/* ========================================================
   GIAO DIỆN SALE MÙA HÈ - PHIÊN BẢN GỌN NHẸ
   Chỉ tập trung: 1 banner nổi bật + 1 lưới sản phẩm tối ưu
======================================================== */
:root {
    --sale-primary: #57bbfe;
    --sale-secondary: #ff9800;
    --sale-danger: #dc2626;
    --sale-bg: #f1f5f9;
    --sale-text: #1e293b;
    --sale-gray: #64748b;
    --sale-border: #e2e8f0;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', sans-serif !important;
}

.sale-wrapper {
    background: var(--sale-bg);
    padding-bottom: 60px;
}

.d-none {
    display: none !important;
}

/* ========================================================
   1. BANNER CHÍNH
======================================================== */
.sale-hero {
    display: block;
    width: 100%;
    line-height: 0;
}

.sale-hero img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* ========================================================
   2. THANH QUYỀN LỢI CHẠY NGANG (MARQUEE)
======================================================== */
.sale-perks {
    background: var(--sale-danger);
    overflow: hidden;
    padding: 10px 0;
}

.sale-perks-track {
    display: flex;
    width: max-content;
    animation: sale-marquee 38s linear infinite;
    gap: 40px;
}

.sale-perks:hover .sale-perks-track {
    animation-play-state: paused;
}

.sale-perks-track span {
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

@keyframes sale-marquee {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

/* ========================================================
   3. DẢI FLASH SALE + ĐẾM NGƯỢC
======================================================== */
.sale-flash-strip {
    margin-top: 20px;
    background: linear-gradient(90deg, #eaf7ff 0%, #fff 100%);
    border: 2px solid var(--sale-danger);
    border-radius: 16px;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

.sale-flash-left {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--sale-danger);
}

.sale-flash-left i {
    font-size: 26px;
    animation: sale-blink 1.4s infinite;
}

@keyframes sale-blink {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.4;
    }
}

.sale-flash-left strong {
    display: block;
    font-size: 16px;
    font-weight: 900;
    text-transform: uppercase;
}

.sale-flash-left small {
    color: var(--sale-gray);
    font-weight: 600;
}

.sale-countdown {
    display: flex;
    align-items: center;
    gap: 6px;
}

.sale-countdown span {
    color: var(--sale-danger);
    font-weight: 800;
    font-size: 16px;
}

.sale-cd-box {
    background: var(--sale-danger);
    color: #fff;
    font-weight: 900;
    font-size: 18px;
    padding: 6px 10px;
    border-radius: 8px;
    min-width: 40px;
    text-align: center;
}

/* ========================================================
   4. SECTION SẢN PHẨM (MỖI DANH MỤC 1 SECTION RIÊNG)
======================================================== */
.sale-section {
    margin-top: 34px;
}

.sale-section:first-of-type {
    margin-top: 20px;
}

.sale-section-banner {
    border-radius: 14px;
    overflow: hidden;
    line-height: 0;
    margin-bottom: 16px;
}

.sale-section-banner img {
    width: 100%;
    height: auto;
    display: block;
}

.sale-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
}

.sale-section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 19px;
    font-weight: 800;
    color: #0f172a;
    margin: 0;
}

.sale-section-title i {
    color: var(--sale-primary);
}

.sale-section-count {
    font-size: 13px;
    color: var(--sale-gray);
    font-weight: 600;
}

/* Bộ lọc theo hãng sản xuất - chỉ dùng riêng cho section Laptop */
.sale-brand-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.sale-brand-pill {
    background: #fff;
    border: 1px solid var(--sale-border);
    border-radius: 30px;
    padding: 8px 18px;
    font-size: 13px;
    font-weight: 700;
    color: var(--sale-text);
    cursor: pointer;
    transition: 0.2s;
}

.sale-brand-pill:hover {
    border-color: var(--sale-primary);
    color: var(--sale-primary);
}

.sale-brand-pill.active {
    background: var(--sale-primary);
    border-color: var(--sale-primary);
    color: #fff;
    box-shadow: 0 4px 10px rgba(87, 187, 254, 0.35);
}

/* ========================================================
   5. LƯỚI SẢN PHẨM
======================================================== */
.sale-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    align-items: stretch;
}

.sale-card {
    display: none;
    flex-direction: column;
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid var(--sale-border);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    position: relative;
}

.sale-card.is-visible {
    display: flex;
    height: 100%;
}

.sale-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 28px rgba(2, 136, 209, 0.15);
    border-color: #7dd3fc;
    z-index: 2;
}

.sale-card-img {
    position: relative;
    display: block;
    width: 100%;
    padding-top: 100%;
    background: #fff;
}

.sale-card-img img {
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    bottom: 10px;
    width: calc(100% - 20px);
    height: calc(100% - 20px);
    object-fit: contain;
    transition: transform 0.3s ease;
}

.sale-card:hover .sale-card-img img {
    transform: scale(1.06);
}

.sale-card-tags {
    position: absolute;
    top: 8px;
    left: 8px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    z-index: 2;
}

.sale-tag {
    font-size: 11px;
    font-weight: 800;
    color: #fff;
    padding: 4px 8px;
    border-radius: 5px;
    text-transform: uppercase;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
}

.sale-tag-flash {
    background: linear-gradient(90deg, #ef4444, #dc2626);
}

.sale-tag-discount {
    background: var(--sale-secondary);
}

.sale-card-body {
    padding: 12px;
    display: flex;
    flex-direction: column;
    flex: 1;
    border-top: 1px solid #f8fafc;
}

.sale-status {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #f0fdf4;
    color: #16a34a;
    border: 1px solid #bbf7d0;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 8px;
    margin-bottom: 8px;
    width: fit-content;
}

.sale-card-title {
    font-size: 14px;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.4;
    height: 38px;
    margin-bottom: 8px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    transition: 0.2s;
}

.sale-card-title:hover {
    color: var(--sale-danger);
    text-decoration: none;
}

.sale-specs {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 10px;
}

.sale-spec-item {
    background: #f1f5f9;
    color: #475569;
    font-size: 10px;
    padding: 3px 7px;
    border-radius: 4px;
    font-weight: 600;
    border: 1px solid var(--sale-border);
}

.sale-price {
    margin-top: auto;
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.sale-price-new {
    color: #0f172a;
    font-size: 17px;
    font-weight: 900;
}

.sale-price-old {
    color: #94a3b8;
    font-size: 12px;
    font-weight: 600;
}

.sale-price-hs {
    color: var(--sale-danger);
    font-size: 15px;
    font-weight: 900;
}

.sale-price-hs-label {
    color: var(--sale-gray);
    font-size: 12px;
    font-weight: 600;
}

/* Desktop: hiện giá HSSV đã tính sẵn (trừ 300K). Mobile: chỉ hiện câu "Giảm 300K" cho gọn. */
.sale-price-hs-mobile {
    display: none;
}

@media (max-width: 768px) {
    .sale-price-hs-desktop {
        display: none;
    }

    .sale-price-hs-mobile {
        display: flex;
    }
}

.sale-btn-buy {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: var(--sale-danger);
    color: #fff !important;
    font-size: 13px;
    font-weight: 700;
    padding: 8px 0;
    border-radius: 8px;
    text-decoration: none !important;
    transition: 0.2s;
}

.sale-btn-buy:hover {
    background: #0277bd;
}

/* ========================================================
   6. TRẠNG THÁI RỖNG / XEM THÊM
======================================================== */
.sale-empty {
    text-align: center;
    padding: 60px 20px;
    color: var(--sale-gray);
}

.sale-empty i {
    font-size: 48px;
    margin-bottom: 15px;
    opacity: 0.5;
}

.sale-btn-reset {
    margin-top: 12px;
    background: var(--sale-primary);
    color: #fff;
    border: none;
    padding: 8px 24px;
    border-radius: 30px;
    font-weight: 700;
    cursor: pointer;
}

.sale-load-more {
    display: flex;
    justify-content: center;
    margin-top: 25px;
}

.sale-btn-more {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 35px;
    background: #fff;
    color: var(--sale-primary);
    border: 2px solid var(--sale-primary);
    border-radius: 30px;
    font-size: 14px;
    font-weight: 800;
    text-transform: uppercase;
    cursor: pointer;
    transition: 0.2s;
}

.sale-btn-more:hover {
    background: var(--sale-primary);
    color: #fff;
}

.sale-btn-more:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ========================================================
   7. THỂ LỆ CHƯƠNG TRÌNH
======================================================== */
.sale-terms {
    background: #fff;
    border-radius: 16px;
    padding: 25px;
    text-align: center;
    margin-top: 30px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.sale-terms h3 {
    color: var(--sale-primary);
    font-weight: 800;
    font-size: 20px;
    margin-bottom: 10px;
}

.sale-terms h3 i {
    color: var(--sale-secondary);
    margin-right: 6px;
}

.sale-terms p {
    color: #475569;
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 15px;
}

.sale-btn-readmore {
    background: linear-gradient(90deg, #d70018 0%, #ff6a00 100%);
    color: #fff;
    font-weight: bold;
    padding: 10px 30px;
    border-radius: 30px;
    border: none;
    cursor: pointer;
    transition: 0.2s;
}

.sale-btn-readmore:hover {
    opacity: 0.9;
}

/* Đã bỏ nút "Lên đầu trang" dạng position:fixed theo yêu cầu hạn chế dùng fixed
   (tránh đè lên header và các khung chat Messenger/Zalo tích hợp trên site). */

/* ========================================================
   9. RESPONSIVE
======================================================== */
@media (max-width: 1024px) {
    .sale-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .sale-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    .sale-hero {
        margin-top: 95px;
    }
    .sale-flash-strip {
        flex-direction: column;
        align-items: flex-start;
    }

    .sale-section {
        margin-top: 26px;
    }

    .sale-section-banner {
        margin-bottom: 12px;
    }

    .sale-section-title {
        font-size: 16px;
    }

    .sale-brand-filter {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 4px;
        margin-bottom: 12px;
    }

    .sale-brand-filter::-webkit-scrollbar {
        display: none;
    }

    .sale-brand-pill {
        white-space: nowrap;
        padding: 7px 14px;
        font-size: 12px;
    }

    .sale-card-title {
        font-size: 13px;
    }

    .sale-price-new {
        font-size: 15px;
    }
}

/* ========================================================
   10. CARD SẢN PHẨM - PHIÊN BẢN THEO MẪU (BADGE %, SPECS-GRID, MINI COUNTDOWN)
======================================================== */
.sale-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px 0 12px;
}

.sale-tag-percent {
    background: var(--sale-danger);
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    padding: 3px 9px;
    border-radius: 5px;
}

.sale-brand-logo {
    height: 18px;
    max-width: 90px;
    object-fit: contain;
}

.sale-brand-text {
    font-size: 11px;
    font-weight: 700;
    color: var(--sale-gray);
    text-transform: uppercase;
}

/* =========================================================
   LƯỚI THÔNG SỐ TỪ $config->beauty_param (RENDER THẲNG HTML GỐC)
   Scope trong .sale-card-specs để không ảnh hưởng CSS .specs-grid
   dùng ở nơi khác trên site (vd trang chi tiết sản phẩm).
   Tự chia đều cột theo số khối thực tế (3 hoặc 4) bằng flexbox,
   không cần biết trước số lượng khối.
========================================================= */
.sale-card-specs {
    padding: 10px 12px 0 12px;
    min-height: 58px;
}

.sale-card-specs .specs-grid {
    display: flex;
    align-items: stretch;
    gap: 0;
}

.sale-card-specs .spec-block {
    display: flex;
    gap: 5px;
    flex: 1 1 0;
    min-width: 0;
    padding: 0 3px;
    flex-direction: column;
    align-items: center;
    text-align: center;
    border-left: 1px solid var(--sale-border);
}

.sale-card-specs .spec-block:first-child {
    padding-left: 0;
    border-left: none;
}

.sale-card-specs .spec-icon {
    width: 13px;
    height: 13px;
    font-size: 12px;
    color: var(--sale-gray);
    flex-shrink: 0;
    text-align: center;
    margin-top: 1px;
    object-fit: contain;
}

.sale-card-specs .spec-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.25;
}

/* Ẩn nhãn (CPU/RAM/Card đồ họa/AI), chỉ hiện giá trị */
.sale-card-specs .spec-label {
    display: none;
}

.sale-card-specs .spec-value {
    font-size: 12px;
    color: var(--sale-text);
    font-weight: 800;
    white-space: normal;
    overflow-wrap: break-word;
    word-break: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

@media (max-width: 768px) {
    /* Chỉ hiển thị tối đa 2 spec-block đầu tiên trên mobile, giữ 1 hàng ngang
       (không dùng flex-wrap để tránh rớt xuống hàng mới) */
    .sale-card-specs .specs-grid {
        flex-wrap: nowrap;
    }

    .sale-card-specs .spec-block {
        flex: 1 1 0;
    }

    .sale-card-specs .spec-value {
        font-size: 11px;
    }
}
@media (max-width: 465px) {
    .sale-card-specs .spec-block:nth-child(n+3) {
        display: none;
    }
}

/* Thanh đếm ngược mini kiểu "05 Ngày - 07:37:21" trong ảnh mẫu */
.sale-mini-countdown {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: linear-gradient(90deg, #fff3d6 0%, #ffb703 100%);
    color: #92400e;
    font-size: 12px;
    font-weight: 800;
    padding: 6px 10px;
    border-radius: 20px;
    margin: 0 12px 10px 12px;
}

.sale-mini-countdown i {
    color: #ea580c;
}

/* Ảnh minh hoạ phụ theo từng nhóm sản phẩm (HSSV, thu cũ đổi mới, tặng màn hình...)
   Cố định chiều cao để mọi card có cùng "khe" hiển thị, tránh lệch hàng
   dù ảnh badge của từng nhóm có tỉ lệ/độ dài chữ khác nhau. */
.sale-card-promo-badge {
    width: 100%;
    object-fit: contain;
    object-position: left center;
    border-radius: 6px;
    margin-bottom: 10px;
    display: block;
}