/* =================== VOUCHER SLIDER =================== */


.voucher-slider-container {
    position: relative;
    width: 100%;
    overflow: visible;
    z-index: 1;
}

    .voucher-slider-container .voucher-list {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: minmax(var(--card-min-width),1fr);
        gap: var(--slider-gap);
        padding: 0 var(--btn-offset);
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        align-items: stretch; /* card stretch cùng chiều cao */
    }

        .voucher-slider-container .voucher-list::-webkit-scrollbar {
            display: none;
        }

    .voucher-slider-container .voucher-card {
        width: 100%;
        scroll-snap-align: start;
        background: #fff;
        border: 1.4px solid var(--color-primary);
        border-radius: 16px;
        box-shadow: 0 2px 10px rgba(60,180,100,.07);
        padding: 13px 10px;
        display: flex;
        flex-direction: column;
        gap: 6px;
        transition: box-shadow .18s, transform .18s;
        min-height: 280px; /* CHIỀU CAO TỐI THIỂU: có thể điều chỉnh */
    }

        .voucher-slider-container .voucher-card:hover {
            box-shadow: 0 4px 16px rgba(40,167,69,.12);
            transform: translateY(-1px);
        }

    .voucher-slider-container .discount-badge {
        align-self: flex-start;
        padding: 3px 11px 3px 10px;
        border-radius: 6px;
        display: inline-flex;
        align-items: baseline;
        gap: 3px;
        font-weight: 700;
        font-size: 16px;
    }

        .voucher-slider-container .discount-badge.percent {
            background: var(--color-primary-dark);
            color: #fff;
        }

        .voucher-slider-container .discount-badge.amount {
            background: #fff6e5;
            color: #a65a00;
        }

        .voucher-slider-container .discount-badge i {
            font-size: 15px;
            margin-right: 3px;
        }

    /* --- Title/Desc/Validity/Countdown cố định chiều cao --- */
    .voucher-slider-container .voucher-title {
        font-size: 1.05rem;
        color: #15a055;
        margin: 0 0 4px;
        font-weight: 700;
        line-height: 1.2;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        min-height: 1.2em; /* 1 dòng */
    }

    .voucher-slider-container .voucher-desc {
        font-size: .97rem;
        color: #222;
        margin: 0 0 4px;
        line-height: 1.28;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        min-height: calc(1.28em * 2); /* đúng 2 dòng */
    }

    .voucher-slider-container .voucher-validity {
        font-size: .9rem;
        color: #28a745;
        display: flex;
        align-items: center;
        gap: 5px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        line-height: 1.25;
        min-height: 1.25em;
    }

    .voucher-slider-container .voucher-countdown {
        font-size: .97rem;
        color: #096d3c;
        margin-top: 2px;
        line-height: 1.25;
        min-height: 1.25em;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

        .voucher-slider-container .voucher-countdown .countdown-label {
            font-weight: 500;
            color: #555;
            margin-right: 4px;
        }

        .voucher-slider-container .voucher-countdown .num {
            font-weight: 600;
            font-variant-numeric: tabular-nums;
        }

        .voucher-slider-container .voucher-countdown.expired,
        .voucher-slider-container .voucher-countdown .countdown-expired {
            color: #b51d1d !important;
            font-weight: 700;
        }

    .voucher-slider-container .voucher-code-container {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-top: auto;
    }

    .voucher-slider-container .voucher-code {
        font-family: ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
        background: #f1fdf5;
        padding: 3px 9px;
        border-radius: 4px;
        font-size: 1.06em;
        color: #197240;
    }

    .voucher-slider-container .voucher-copy-btn {
        background: #f1fdf5;
        color: var(--color-primary-dark);
        border: none;
        padding: 4px 12px;
        border-radius: 5px;
        font-size: .95em;
        cursor: pointer;
        font-weight: 600;
        transition: background .18s,transform .18s,box-shadow .18s;
        box-shadow: 0 1px 7px rgba(40,167,69,.09);
    }

        .voucher-slider-container .voucher-copy-btn:hover {
            background: #dff8e8;
            transform: translateY(-1px);
        }

    /* Prev/Next */
    .voucher-slider-container .slider-btn {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: var(--btn-size);
        height: var(--btn-size);
        border-radius: 50%;
        background: #fff;
        color: var(--color-primary);
        border: 2px solid var(--color-primary);
        box-shadow: 0 4px 10px rgba(0,0,0,.08);
        cursor: pointer;
        z-index: 5000;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        transition: all .25s ease;
        outline: none;
    }

        .voucher-slider-container .slider-btn:hover:not(:disabled) {
            background: var(--color-primary);
            color: #fff;
            transform: translateY(-50%) scale(1.08);
            box-shadow: 0 8px 18px rgba(0,0,0,.12);
        }

        .voucher-slider-container .slider-btn:active:not(:disabled) {
            transform: translateY(-50%) scale(.98);
        }

        .voucher-slider-container .slider-btn:disabled {
            opacity: .35;
            pointer-events: none;
            transform: translateY(-50%) scale(.96);
        }

        .voucher-slider-container .slider-btn:focus-visible {
            box-shadow: 0 0 0 var(--btn-ring) rgba(35,195,98,.25),0 4px 10px rgba(0,0,0,.08);
        }

    .voucher-slider-container .slider-prev {
        left: calc(-1 * var(--btn-offset) + var(--slider-gap));
    }

    .voucher-slider-container .slider-next {
        right: calc(-1 * var(--btn-offset) + var(--slider-gap));
    }

@media (max-width:600px) {
    .voucher-slider-container .voucher-list {
        padding: 0 calc(var(--btn-offset)/2);
    }

    .voucher-slider-container .slider-btn {
        display: none;
    }
    /* mobile vuốt là đủ */
}

/* Đồng bộ màu chữ */
.voucher-slider-container .voucher-countdown,
.voucher-slider-container .voucher-countdown .countdown-label,
.voucher-slider-container .voucher-countdown .num {
    color: var(--gray-dark) !important;
}