/* Coupons Section 01 Styles */
.section-coupons01 {
    padding: 60px 0;
}

.section-coupons01 .coupons-header {
    margin-bottom: 40px;
}

.section-coupons01 .coupons-header .sub-title {
    color: #CB8161;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 2px;
    display: block;
    margin-bottom: 12px;
}

.section-coupons01 .coupons-header .title {
    font-size: 48px;
    font-weight: 700;
    color: #2D2D2D;
    font-family: 'Dancing Script', cursive;
    margin-bottom: 15px;
}

.coupon-card {
    position: relative;
    display: flex;
    background: color-mix(in srgb, var(--bv-primary) 10%, white 90%);
    /* Light cream background */
    border-radius: 12px;
    padding: 20px 15px;
    /* margin-bottom: 30px; */
}

/* Side notches */
.coupon-card::before,
.coupon-card::after {
    content: '';
    position: absolute;
    left: 82px;
    /* Centered on 90px divider with 16px width */
    width: 16px;
    height: 16px;
    background: #fff;
    /* Match body background */
    border-radius: 50%;
    z-index: 2;
}

.coupon-card::before {
    top: -8px;
}

.coupon-card::after {
    bottom: -8px;
}

.coupon-card .coupon-left {
    flex: 0 0 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 1px dashed #E8E0D1;
}

.coupon-card .coupon-icon {
    width: 70px;
    height: 70px;
    background: var(--bv-primary);
    /* Yellow background from screenshot */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.coupon-card .coupon-icon img {
    max-width: 80%;
}

.coupon-card .coupon-right {
    flex: 1;
    padding-left: 10px;
    /* Slightly more space from divider */
    position: relative;
    display: flex;
    flex-direction: column;
}

.coupon-card .coupon-info-icon {
    position: absolute;
    top: 0;
    right: 0;
    /* color: #CB8161; */
    cursor: pointer;
    opacity: 0.8;
}

.coupon-card .coupon-code {
    font-size: 20px;
    font-weight: 800;
    color: #333;
    margin: 0 0 4px;
    padding-right: 20px;
    /* space for icon */
}

.coupon-card .coupon-desc {
    font-size: 14px;
    color: #444;
    margin-bottom: 15px;
    line-height: 1.4;
    height: auto;
}

.coupon-card .coupon-footer {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.coupon-card .coupon-hsd {
    font-size: 12px;
    color: #888;
    margin-bottom: 0;
}

.coupon-card .coupon-hsd .date {
    color: #999;
    font-size: 11px;
}

.coupon-card .btn-copy {
    background: var(--bv-primary);
    /* Warmer brown */
    color: #fff;
    border: 1px solid var(--bv-primary);
    border-radius: 6px;
    /* Slightly more rounded */
    padding: 6px 11px;
    /* Rectangular shape */
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
}

.coupon-card .btn-copy:hover {
    background: white;
    color: var(--bv-primary);
    /* Darker brown for hover */
}

@media (max-width: 1199px) {
    .section-coupons01 .coupons-header .title {
        font-size: 36px;
    }
}

@media (max-width: 575px) {
    .coupon-card .coupon-left {
        flex: 0 0 80px;
    }

    .coupon-card::before,
    .coupon-card::after {
        left: 74px;
    }
}

/* <section class="section-coupons01">
            <div class="ctnr">
                <div class="coupons-header text-center">
                    <span class="sub-title">• THỦ CÔNG SUDES CRAFT</span>
                    <h2 class="title">Mã giảm giá dành cho bạn</h2>
                </div>
                <div class="coupons-list row">
                    @php
                        $coupons = [['code' => 'CRAFT200', 'desc' => 'Giảm 200k giá trị đơn hàng', 'hsd' => '12/12/2026'], ['code' => 'CRAF100', 'desc' => 'Giảm 100k giá trị đơn hàng', 'hsd' => '24/12/2026'], ['code' => 'CRAF50', 'desc' => 'Giảm 50k giá trị đơn hàng', 'hsd' => '25/12/2026'], ['code' => 'FREESHIP', 'desc' => 'Miễn phí giao hàng', 'hsd' => '25/12/2026']];
                    @endphp
                    @foreach ($coupons as $coupon)
                        <div class="col-xl-3 col-lg-6 col-md-6 col-12">
                            <div class="coupon-card">
                                <div class="coupon-left">
                                    <div class="coupon-icon">
                                        <img src="{{ asset('/assets/frontend/css/section-coupons/images/img_coupon_1.webp') }}" alt="">
                                    </div>
                                </div>
                                <div class="coupon-right">
                                    <div class="coupon-info-icon">
                                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none"
                                            stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                            stroke-linejoin="round">
                                            <circle cx="12" cy="12" r="10"></circle>
                                            <line x1="12" y1="16" x2="12" y2="12"></line>
                                            <line x1="12" y1="8" x2="12.01" y2="8"></line>
                                        </svg>
                                    </div>
                                    <h3 class="coupon-code">{{ $coupon['code'] }}</h3>
                                    <p class="coupon-desc">{{ $coupon['desc'] }}</p>
                                    <div class="coupon-footer">
                                        <div class="coupon-hsd">
                                            <span>HSD: {{ $coupon['hsd'] }}</span>
                                        </div>
                                        <button class="btn-copy" data-code="{{ $coupon['code'] }}">Copy mã</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </section> */