/* ============================================================
   ĐẠI TIỆC BUILD PC — CSS TRANG PC LẮP RÁP
   Bảng màu NỔI BẬT cho chương trình SALE - không còn nhạt nhòa
   Namespace "lr-" (Lắp Ráp)
============================================================ */
:root{
    --site-primary:#3b82f6;
    --site-danger:#e11d48;
    --site-text:#0f172a;
    --site-gray:#64748b;
    --site-border:#e2e8f0;
    --site-bg:#f1f5f9;

    /* MÀU SẮC RỰC RỠ CHO SALE - ĐỒNG */
    --lr-dong-bg: linear-gradient(135deg, #fff7ed 0%, #fed7aa 100%);
    --lr-dong-border:#ea580c;
    --lr-dong-ink:#9a3412;
    --lr-dong-icon:#c2410c;
    --lr-dong-accent: #ea580c;

    /* MÀU SẮC RỰC RỠ CHO SALE - VÀNG */
    --lr-vang-bg: linear-gradient(135deg, #fefce8 0%, #fef08a 100%);
    --lr-vang-border:#ca8a04;
    --lr-vang-ink:#854d0e;
    --lr-vang-icon:#ca8a04;
    --lr-vang-accent: #fbbf24;

    /* MÀU SẮC RỰC RỠ CHO SALE - KIM CƯƠNG */
    --lr-kc-bg: linear-gradient(135deg, #f5f3ff 0%, #ddd6fe 100%);
    --lr-kc-border:#7c3aed;
    --lr-kc-ink:#4c1d95;
    --lr-kc-icon:#7c3aed;
    --lr-kc-accent: #8b5cf6;

    /* Animation colors */
    --lr-glow-dong: rgba(234, 88, 12, 0.3);
    --lr-glow-vang: rgba(251, 191, 36, 0.4);
    --lr-glow-kc: rgba(139, 92, 246, 0.4);

    --lr-radius: 16px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{font-family:'Inter',sans-serif;margin:0;background:var(--site-bg);color:var(--site-text);}
.lr-wrapper{padding-bottom:60px;margin-top:-16px}
.lr-container{max-width:1280px;margin:0 auto;padding:0 20px;}
img{max-width:100%;display:block;}
.d-none{display:none !important;}
a{text-decoration:none;}

/* ============================================================
   1. BANNER CHÍNH - Thêm hiệu ứng shine
============================================================ */
.lr-hero{display:block;width:100%;line-height:0;position:relative;overflow:hidden;}
.lr-hero::after{
    content:'';
    position:absolute;
    top:0;left:-100%;
    width:50%;height:100%;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.15),transparent);
    animation:lrShine 4s ease-in-out infinite;
}
@keyframes lrShine{
    0%{left:-100%;}
    100%{left:200%;}
}
.lr-hero img{width:100%;height:auto;object-fit:cover;}
/* ============================================================
   2. THANH QUYỀN LỢI - Màu rực rỡ hơn
============================================================ */
.dtp-perks {
    background: #000d33;
    overflow: hidden;
    padding: 11px 0;
}

.dtp-perks-track {
    display: flex;
    width: max-content;
    gap: 40px;
    animation: dtpMarquee 36s linear infinite;
}

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

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

.dtp-perks-track span i {
    color: #fbbf24;
}

@keyframes dtpMarquee {
    0% {
        transform: translateX(0);
    }

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

/* ============================================================
   3. FLASH SALE + ĐẾM NGƯỢC - Thiết kế nổi bật hơn
============================================================ */
.lr-flash-strip{
    margin-top:20px;
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 50%, #991b1b 100%);
    border: none;
    border-radius: 20px;
    padding: 18px 24px;
    display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;
    box-shadow: 0 8px 32px rgba(220, 38, 38, 0.4), inset 0 1px 0 rgba(255,255,255,.2);
    position: relative;
    overflow: hidden;
}
.lr-flash-strip::before{
    content:'';
    position:absolute;
    top:-50%;right:-20%;
    width:200px;height:200px;
    background:radial-gradient(circle,rgba(255,255,255,.15) 0%,transparent 70%);
    border-radius:50%;
}
.lr-flash-left{display:flex;align-items:center;gap:14px;color:#fff;}
.lr-flash-left i{font-size:28px;animation:lrBlink 1.2s infinite;}
@keyframes lrBlink{0%,100%{opacity:1;transform:scale(1);}50%{opacity:.6;transform:scale(.95);}}
.lr-flash-left strong{display:block;font-size:17px;font-weight:900;text-transform:uppercase;letter-spacing:.5px;text-shadow:0 2px 4px rgba(0,0,0,.2);}
.lr-flash-left small{color:rgba(255,255,255,.85);font-weight:600;font-size:13px;}
.lr-countdown{display:flex;align-items:center;gap:6px;}
.lr-countdown span{color:#fff;font-weight:800;font-size:17px;opacity:.8;}
.lr-cd-box{
    background:linear-gradient(180deg,#fff 0%,#fef2f2 100%);
    color:#dc2626;font-weight:900;font-size:18px;
    padding:8px 12px;border-radius:10px;min-width:44px;text-align:center;
    box-shadow: 0 4px 12px rgba(0,0,0,.2), inset 0 -2px 0 rgba(0,0,0,.1);
}

/* ============================================================
   4. TIER GRID SECTIONS - Phần mới thêm từ policy
============================================================ */
.lr-tier-section {
    padding-top: 32px;
}

.lr-tier-head-section {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 28px;
}

.lr-tier-head-section .lr-tier-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .6px;
    text-transform: uppercase;
    padding: 8px 20px;
    border-radius: 30px;
    margin-bottom: 14px;
}

.lr-tier-head-section .lr-tier-tag.dong {
    background: linear-gradient(135deg, #fff7ed, #fed7aa);
    color: var(--lr-dong-ink);
    border: 2px solid var(--lr-dong-border);
}
.lr-tier-head-section .lr-tier-tag.vang {
    background: linear-gradient(135deg, #fefce8, #fef08a);
    color: var(--lr-vang-ink);
    border: 2px solid var(--lr-vang-border);
}
.lr-tier-head-section .lr-tier-tag.kimcuong {
    background: linear-gradient(135deg, #f5f3ff, #ddd6fe);
    color: var(--lr-kc-ink);
    border: 2px solid var(--lr-kc-border);
}

.lr-tier-head-section h2 {
    font-family: 'Inter', sans-serif;
    font-weight: 800;
    font-size: clamp(20px, 3vw, 28px);
    margin: 0 0 10px;
    color: var(--site-text);
}

.lr-tier-head-section p {
    font-size: 14.5px;
    color: var(--site-gray);
    line-height: 1.7;
    margin: 0;
}

.lr-tier-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.lr-tier-card {
    background: #fff;
    border-radius: var(--lr-radius);
    border: 2px solid var(--site-border);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.lr-tier-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(15, 23, 42, .15);
}

.lr-tier-card.dong:hover { border-color: var(--lr-dong-accent); box-shadow: 0 20px 40px var(--lr-glow-dong); }
.lr-tier-card.vang:hover { border-color: var(--lr-vang-accent); box-shadow: 0 20px 40px var(--lr-glow-vang); }
.lr-tier-card.kimcuong:hover { border-color: var(--lr-kc-accent); box-shadow: 0 20px 40px var(--lr-glow-kc); }

.lr-tier-card-head {
    padding: 18px 18px 16px;
    color: #fff;
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
}

.lr-tier-card-head.dong {
    background: linear-gradient(120deg, #c2410c 0%, #ea580c 100%);
}
.lr-tier-card-head.vang {
    background: linear-gradient(120deg, #ca8a04 0%, #fbbf24 100%);
}
.lr-tier-card-head.kimcuong {
    background: linear-gradient(120deg, #6d28d9 0%, #8b5cf6 100%);
}

.lr-tier-card-head .lr-rank-badge {
    width: 48px;
    height: 48px;
    clip-path: polygon(50% 0%, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 18px;
    flex-shrink: 0;
    background: rgba(255, 255, 255, .25);
}

.lr-tier-card-head.dong .lr-rank-badge { background: linear-gradient(145deg, #fb923c, #ea580c); }
.lr-tier-card-head.vang .lr-rank-badge { background: linear-gradient(145deg, #fcd34d, #f59e0b); }
.lr-tier-card-head.kimcuong .lr-rank-badge { background: linear-gradient(145deg, #a78bfa, #7c3aed); }

.lr-tier-card-head-text { line-height: 1.3; }
.lr-tier-card-head-text .label {
    display: block;
    font-size: 11px;
    opacity: .9;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
}
.lr-tier-card-head-text strong {
    font-family: 'Inter', sans-serif;
    font-size: 20px;
    font-weight: 800;
}

.lr-tier-gift-value {
    margin: 14px 18px 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, #fff7ed, #ffedd5);
    color: #c2410c;
    border: 1px solid #fed7aa;
    font-size: 13px;
    font-weight: 800;
    padding: 8px 14px;
    border-radius: 20px;
    width: fit-content;
}

.lr-tier-card.vang .lr-tier-gift-value {
    background: linear-gradient(135deg, #fefce8, #fef9c3);
    color: #a16207;
    border-color: #fde68a;
}

.lr-tier-card.kimcuong .lr-tier-gift-value {
    background: linear-gradient(135deg, #f5f3ff, #ede9fe);
    color: #6d28d9;
    border-color: #ddd6fe;
}

.lr-tier-choice-label {
    margin: 14px 18px 2px;
    font-size: 12px;
    font-weight: 700;
    color: var(--site-gray);
    text-transform: uppercase;
    letter-spacing: .3px;
}

.lr-tier-options {
    padding: 8px 18px 18px;
    display: flex;
    flex-direction: column;
    gap: 0;
    flex: 1;
}

.lr-tier-option {
    display: flex;
    gap: 12px;
    padding: 12px 0;
}

.lr-tier-option:not(:last-child) {
    border-bottom: 1px dashed var(--site-border);
}

.lr-tier-option-img {
    width: 56px;
    height: 56px;
    border-radius: 10px;
    flex-shrink: 0;
    overflow: hidden;
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
}

.lr-tier-option-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.lr-tier-option-body { flex: 1; min-width: 0; }

.lr-tier-option-tag {
    display: inline-block;
    font-size: 10.5px;
    font-weight: 800;
    color: #fff;
    background: var(--site-primary);
    padding: 3px 10px;
    border-radius: 10px;
    margin-bottom: 5px;
}

.lr-tier-option-body p {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--site-text);
    font-weight: 600;
}

.lr-tier-option-or {
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    color: var(--site-gray);
    margin: 4px 0;
    position: relative;
}

.lr-tier-option-or::before,
.lr-tier-option-or::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 35%;
    height: 1px;
    background: var(--site-border);
}
.lr-tier-option-or::before { left: 0; }
.lr-tier-option-or::after { right: 0; }

/* ============================================================
   5. RANK NAV - Thiết kế nổi bật hơn
============================================================ */
.lr-ranknav{
    margin-top:24px;display:flex;justify-content:center;gap:0;background:linear-gradient(180deg,#fff 0%,#f8fafc 100%);
    border-radius:20px;border:2px solid var(--site-border);
    box-shadow:0 8px 24px rgba(15,23,42,.08);padding:16px 12px;
}
.lr-ranknav-item{
    flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 16px;border-radius:14px;
    cursor:pointer;color:var(--site-text);position:relative;transition:.25s;margin:0 6px;
    background: linear-gradient(180deg, transparent 0%, transparent 100%);
}
.lr-ranknav-item:hover{
    background: linear-gradient(180deg, rgba(59,130,246,.08) 0%, rgba(59,130,246,.04) 100%);
    transform: translateY(-2px);
}
.lr-ranknav-item:not(:last-child)::after{
    content:"";position:absolute;top:30%;right:-12px;width:1px;height:40%;
    background:var(--site-border);
}
.lr-badge{
    width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0;
    transition: transform .25s ease, box-shadow .25s ease;
}
.lr-badge.dong{
    background: linear-gradient(135deg, #fff7ed, #fed7aa);
    border: 3px solid var(--lr-dong-accent);
    color: var(--lr-dong-icon);
    box-shadow: 0 4px 12px var(--lr-glow-dong);
}
.lr-badge.vang{
    background: linear-gradient(135deg, #fefce8, #fef08a);
    border: 3px solid var(--lr-vang-accent);
    color: var(--lr-vang-icon);
    box-shadow: 0 4px 12px var(--lr-glow-vang);
}
.lr-badge.kimcuong{
    background: linear-gradient(135deg, #f5f3ff, #ddd6fe);
    border: 3px solid var(--lr-kc-accent);
    color: var(--lr-kc-icon);
    box-shadow: 0 4px 12px var(--lr-glow-kc);
}
.lr-ranknav-item:hover .lr-badge{transform:scale(1.1);}
.lr-ranknav-item strong{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.3px;color:var(--site-text);}
.lr-ranknav-item small{font-size:10.5px;color:var(--site-gray);font-weight:600;}

/* ============================================================
   6. TOOLBAR: TÌM KIẾM - SẮP XẾP
============================================================ */
.lr-toolbar{
    margin-top:20px;background:#fff;border-radius:16px;border:2px solid var(--site-border);
    padding:16px 20px;
    box-shadow:0 4px 16px rgba(15,23,42,.06);display:flex;flex-wrap:wrap;align-items:center;gap:15px;
}
.lr-search{position:relative;flex:1 1 240px;}
.lr-search i{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--site-gray);}
.lr-search input{width:100%;border:2px solid var(--site-border);border-radius:30px;padding:10px 16px 10px 40px;font-size:14px;outline:none;transition:.2s;}
.lr-search input:focus{border-color:var(--site-primary);box-shadow:0 0 0 4px rgba(59,130,246,.12);}
.lr-sort select{border:2px solid var(--site-border);border-radius:30px;padding:9px 16px;font-size:13px;font-weight:600;color:var(--site-text);outline:none;background:#fff;cursor:pointer;transition:.2s;}
.lr-sort select:focus{border-color:var(--site-primary);}
.lr-toolbar-note{font-size:12.5px;color:var(--site-gray);font-weight:600;flex:1 1 100%;}

/* ============================================================
   7. SECTION HẠNG - Thiết kế nổi bật hơn
============================================================ */
.lr-section{padding-top:50px;}
.lr-section-head{
    display:flex;align-items:center;gap:14px;border-radius:16px;padding:18px 22px;margin-bottom:20px;
    flex-wrap:wrap;border:2px solid transparent;
    box-shadow: 0 4px 16px rgba(15,23,42,.06);
}
.lr-section-head.dong{
    background: linear-gradient(135deg, #fff7ed 0%, #fed7aa 100%);
    border-color: var(--lr-dong-accent);
}
.lr-section-head.vang{
    background: linear-gradient(135deg, #fefce8 0%, #fef08a 100%);
    border-color: var(--lr-vang-accent);
}
.lr-section-head.kimcuong{
    background: linear-gradient(135deg, #f5f3ff 0%, #ddd6fe 100%);
    border-color: var(--lr-kc-accent);
}
.lr-section-head .lr-badge{width:50px;height:50px;font-size:20px;background:#fff;border-width:3px;}
.lr-section-head-text{flex:1;min-width:180px;}
.lr-section-head-text h2{font-weight:800;font-size:18px;margin:0 0 4px;color:var(--site-text);}
.lr-section-head.dong h2{color:var(--lr-dong-ink);}
.lr-section-head.vang h2{color:var(--lr-vang-ink);}
.lr-section-head.kimcuong h2{color:var(--lr-kc-ink);}
.lr-section-head-text p{margin:0;font-size:13px;color:var(--site-gray);font-weight:600;}
.lr-section-count{
    font-size:13px;font-weight:800;color:#fff;background:var(--site-primary);
    padding:6px 16px;border-radius:20px;
}

/* ============================================================
   8. LƯỚI SẢN PHẨM + THẺ PC LẮP RÁP
============================================================ */
.lr-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;align-items:stretch;}
.lr-card{
    display:none;flex-direction:column;background:#fff;border-radius:var(--lr-radius);overflow:hidden;
    border:2px solid var(--site-border);border-top-width:5px;transition:transform .25s ease, box-shadow .25s ease;position:relative;
}
.lr-card.dong{border-top-color:var(--lr-dong-accent);}
.lr-card.vang{border-top-color:var(--lr-vang-accent);}
.lr-card.kimcuong{border-top-color:var(--lr-kc-accent);}
.lr-card.is-visible{display:flex;height:100%;}
.lr-card:hover{transform:translateY(-6px);box-shadow:0 16px 32px rgba(15,23,42,.12);z-index:2;}

.lr-card-top{display:flex;align-items:center;justify-content:space-between;padding:10px 12px 0 12px;}
.lr-tag-percent{
    background: linear-gradient(135deg, #dc2626, #b91c1c);
    color:#fff;font-size:12px;font-weight:800;padding:4px 10px;border-radius:6px;
    box-shadow: 0 2px 8px rgba(220,38,38,.3);
}
.lr-tag-build{
    font-size:10.5px;font-weight:800;color:#059669;background:#ecfdf5;border:1px solid #a7f3d0;
    padding:4px 10px;border-radius:20px;text-transform:uppercase;letter-spacing:.2px;
}
.lr-brand-logo{height:16px;max-width:80px;object-fit:contain;}

.lr-card-img{position:relative;display:block;width:100%;padding-top:100%;background:linear-gradient(180deg,#fff 0%,#f8fafc 100%);}
.lr-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 .3s ease;
}
.lr-card:hover .lr-card-img img{transform:scale(1.08);}

.lr-card-specs{padding:8px 12px 0;min-height:52px;}
.lr-card-specs .specs-grid{display:flex;align-items:stretch;gap:0;}
.lr-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(--site-border);}
.lr-card-specs .spec-block:first-child{padding-left:0;border-left:none;}
.lr-card-specs .spec-icon{width:13px;height:13px;font-size:12px;color:var(--site-gray);flex-shrink:0;margin-top:1px;}
.lr-card-specs .spec-label{display:none;}
.lr-card-specs .spec-value{
    font-size:11.5px;color:var(--site-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;
}

.lr-card-body{padding:12px;display:flex;flex-direction:column;flex:1;border-top:1px solid #f8fafc;}
.lr-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;}
.lr-card-title:hover{color:var(--site-danger);}

.lr-gift-badge{
    display:flex;align-items:flex-start;gap:6px;font-size:11px;font-weight:700;padding:8px 10px;border-radius:10px;margin-bottom:9px;line-height:1.4;
    border-width:2px;
}
.lr-card.dong .lr-gift-badge{
    background: linear-gradient(135deg, #fff7ed, #ffedd5);
    border-color: var(--lr-dong-border);
    color:var(--lr-dong-ink);
}
.lr-card.vang .lr-gift-badge{
    background: linear-gradient(135deg, #fefce8, #fef9c3);
    border-color: var(--lr-vang-border);
    color:var(--lr-vang-ink);
}
.lr-card.kimcuong .lr-gift-badge{
    background: linear-gradient(135deg, #f5f3ff, #ede9fe);
    border-color: var(--lr-kc-border);
    color:var(--lr-kc-ink);
}
.lr-gift-badge i{font-size:14px;flex-shrink:0;margin-top:1px;}

.lr-price{margin-top:auto;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-bottom:6px;}
.lr-price-new{color:#0f172a;font-size:18px;font-weight:900;}
.lr-price-old{color:#94a3b8;font-size:12px;font-weight:600;text-decoration:line-through;}
.lr-price-hs-label{color:var(--site-gray);font-size:12px;font-weight:600;}
.lr-price-hs{color:var(--site-danger);font-size:14px;font-weight:900;}

.lr-btn-buy{
    display:flex;align-items:center;justify-content:center;gap:6px;
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    color:#fff;font-size:13px;font-weight:700;padding:10px 0;border-radius:10px;margin-top:6px;
    transition:.2s;
    box-shadow: 0 4px 12px rgba(220,38,38,.25);
}
.lr-btn-buy:hover{
    background: linear-gradient(135deg, #b91c1c 0%, #991b1b 100%);
    color:#fff;
    box-shadow: 0 6px 16px rgba(220,38,38,.35);
}

/* ============================================================
   9. TRẠNG THÁI RỖNG / XEM THÊM
============================================================ */
.lr-empty{text-align:center;padding:40px 20px;color:var(--site-gray);}
.lr-empty i{font-size:38px;margin-bottom:12px;opacity:.5;}
.lr-load-more{display:flex;justify-content:center;margin-top:24px;}
.lr-btn-more{
    display:flex;align-items:center;gap:8px;padding:12px 36px;
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color:#fff;border:none;border-radius:30px;font-size:14px;font-weight:700;text-transform:uppercase;cursor:pointer;
    transition:.2s;
    box-shadow: 0 4px 12px rgba(59,130,246,.3);
}
.lr-btn-more:hover{
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    box-shadow: 0 6px 16px rgba(59,130,246,.4);
    transform: translateY(-2px);
}
.lr-btn-more:disabled{opacity:.5;cursor:not-allowed;transform:none;}

/* ============================================================
   10. THỂ LỆ - Thiết kế nổi bật hơn
============================================================ */
.lr-terms{
    background: linear-gradient(135deg, #fff 0%, #f8fafc 100%);
    border-radius:20px;padding:28px 26px;text-align:center;margin-top:50px;
    border:2px solid var(--site-border);
    box-shadow:0 8px 24px rgba(15,23,42,.08);
}
.lr-terms h3{color:var(--site-text);font-weight:800;font-size:20px;margin:0 0 12px;}
.lr-terms h3 i{color:#fbbf24;margin-right:8px;}
.lr-terms p{color:#475569;font-size:14.5px;line-height:1.7;margin:0 auto 18px;max-width:660px;font-weight:600;}
.lr-btn-readmore{
    background: linear-gradient(135deg, #f97316 0%, #ea580c 50%, #dc2626 100%);
    background-size: 200% 100%;
    animation: lrBtnGradient 3s ease infinite;
    color:#fff;font-weight:800;padding:13px 36px;border-radius:30px;border:none;cursor:pointer;font-size:15px;
    transition:.2s;
    box-shadow: 0 6px 20px rgba(249,115,22,.35);
}
@keyframes lrBtnGradient{
    0%,100%{background-position:0% 50%;}
    50%{background-position:100% 50%;}
}
.lr-btn-readmore:hover{transform: translateY(-2px);box-shadow: 0 8px 24px rgba(249,115,22,.45);}

/* ============================================================
   11. MODAL
============================================================ */
.lr-modal-overlay{position:fixed;inset:0;background:rgba(15,23,42,.6);display:flex;align-items:center;justify-content:center;z-index:1000;padding:20px;opacity:0;pointer-events:none;transition:opacity .2s;backdrop-filter:blur(4px);}
.lr-modal-overlay.is-open{opacity:1;pointer-events:auto;}
.lr-modal{background:#fff;border-radius:20px;max-width:680px;width:100%;max-height:85vh;display:flex;flex-direction:column;overflow:hidden;transform:translateY(16px);transition:transform .25s ease;}
.lr-modal-overlay.is-open .lr-modal{transform:translateY(0);}
.lr-modal-header{display:flex;align-items:center;justify-content:space-between;padding:18px 22px;border-bottom:1px solid var(--site-border);}
.lr-modal-header h4{margin:0;font-size:16px;font-weight:800;display:flex;align-items:center;gap:8px;}
.lr-modal-close{background:none;border:none;font-size:20px;color:var(--site-gray);cursor:pointer;line-height:1;}
.lr-modal-body{padding:22px;overflow-y:auto;font-size:13.5px;line-height:1.75;color:#334155;}
.lr-modal-body h5{font-size:14px;font-weight:800;color:var(--site-text);margin:20px 0 8px;}
.lr-modal-body h5:first-child{margin-top:0;}
.lr-modal-body ul{margin:0 0 4px;padding-left:20px;}
.lr-modal-body li{margin-bottom:6px;}
.lr-modal-footer{padding:16px 22px;border-top:1px solid var(--site-border);text-align:center;}
.lr-modal-footer button{background:var(--site-primary);color:#fff;border:none;padding:10px 32px;border-radius:30px;font-weight:700;cursor:pointer;}

/* ============================================================
   12. NÚT LÊN ĐẦU TRANG
============================================================ */
.lr-back-top{
    position:fixed;bottom:28px;right:28px;width:48px;height:48px;border-radius:50%;
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color:#fff;border:none;display:none;align-items:center;justify-content:center;
    box-shadow:0 8px 20px rgba(59,130,246,.4);cursor:pointer;z-index:999;transition:.2s;
}
.lr-back-top.is-visible{display:flex;}
.lr-back-top:hover{transform:translateY(-4px) scale(1.05);box-shadow:0 12px 28px rgba(59,130,246,.5);}

/* ============================================================
   13. RESPONSIVE
============================================================ */
@media (max-width:1024px){
    .lr-grid{grid-template-columns:repeat(3,1fr);}
    .lr-tier-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:768px){
    .lr-grid{grid-template-columns:repeat(2,1fr);gap:12px;}
    .lr-tier-grid{grid-template-columns:1fr;}
    .lr-toolbar{margin-top:14px;align-items:stretch;}
    .lr-search{flex:1 1 100%;}
    .lr-sort select{width:100%;}
    .lr-card-title{font-size:13px;}
    .lr-price-new{font-size:16px;}
    .lr-section-head{padding:14px 16px;}
    .lr-flash-strip{flex-direction:column;text-align:center;}
    .lr-wrapper{margin-top:120px;}
}
@media (max-width:465px){
    .lr-ranknav{flex-direction:column;gap:8px;padding:12px;}
    .lr-ranknav-item:not(:last-child)::after{display:none;}
    .lr-grid{grid-template-columns:repeat(2,1fr);}
    .lr-wrapper{margin-top:95px;}
}
@media (max-width:400px){
    .lr-grid{grid-template-columns:1fr;}
}

/* ============================================================
   14. BANNERS CÁC CHƯƠNG TRÌNH KHÁC
============================================================ */
.lr-banners {
    margin-top: 48px;
    margin-bottom: 32px;
}

.lr-banner-item {
    border-radius: 12px;
    overflow: hidden;
}

.lr-banner-item a {
    display: block;
    transition: transform .2s ease, box-shadow .2s ease;
}

.lr-banner-item a:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(15, 23, 42, .15);
}

.lr-banner-item img {
    width: 100%;
    height: auto;
    border-radius: 12px;
}

/* ============================================================
   15. TIER GRID RESPONSIVE - 3 và 4 cột
============================================================ */
.lr-tier-grid {
    display: grid;
    gap: 20px;
}

.lr-tier-grid-3 {
    grid-template-columns: repeat(3, 1fr);
}

.lr-tier-grid-4 {
    grid-template-columns: repeat(4, 1fr);
}

/* Responsive cho tier grid */
@media (max-width: 1200px) {
    .lr-tier-grid-4 {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 992px) {
    .lr-tier-grid-3,
    .lr-tier-grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .lr-tier-grid-3,
    .lr-tier-grid-4 {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   16. HẠNG MASTER - Badge đặc biệt
============================================================ */
.lr-tier-card-master {
    background: linear-gradient(120deg, #be185d, #db2777, #ec4899) !important;
    background-size: 200% 200%;
    animation: lrMasterGlow 3s ease infinite;
}

@keyframes lrMasterGlow {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

.lr-rank-badge-master {
    background: linear-gradient(145deg, #f472b6, #ec4899) !important;
    box-shadow: 0 0 20px rgba(236, 72, 153, 0.5) !important;
}

.lr-tier-gift-master {
    background: linear-gradient(135deg, #fdf2f8, #fce7f3) !important;
    color: #be185d !important;
    border-color: #fbcfe8 !important;
}
/* ============================================================
   17. TỐI ƯU UI QUÀ TẶNG: ACCORDION (PC) & TABS (MOBILE)
============================================================ */

/* UI Nút bấm Header chung */
.lr-tier-card-head {
    cursor: pointer;
    user-select: none;
    transition: filter 0.3s;
}

.lr-tier-card-head:hover {
    filter: brightness(1.1);
}

.lr-tier-toggle {
    margin-left: auto;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), background 0.3s;
}

.lr-tier-card-head:hover .lr-tier-toggle {
    background: rgba(255, 255, 255, 0.35);
}

.lr-tier-card.is-expanded .lr-tier-toggle {
    transform: rotate(180deg);
}

/* Hiệu ứng cuộn Grid siêu mượt (dành cho PC) */
.lr-tier-body-wrapper {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.lr-tier-card.is-expanded .lr-tier-body-wrapper {
    grid-template-rows: 1fr;
}

.lr-tier-body {
    min-height: 0;
    /* Bắt buộc để CSS Grid animate */
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* ================== GIAO DIỆN TABS (CHỈ DÀNH CHO MOBILE) ================== */
@media (max-width: 992px) {
    .lr-tier-grid {
        display: flex !important;
        flex-wrap: wrap;
        background: #fff;
        border-radius: var(--lr-radius);
        border: 2px solid var(--site-border);
        overflow: hidden;
        gap: 0 !important;
    }

    /* Xóa box card để gộp Header và Body chung vào 1 flex container */
    .lr-tier-card {
        display: contents;
    }

    /* 1. HEADER BIẾN THÀNH CÁC TAB NÚT BẤM NẰM NGANG */
    .lr-tier-card-head {
        order: 1;
        flex: 1 1 20%;
        min-width: 80px;
        border-radius: 0 !important;
        padding: 10px 5px !important;
        flex-direction: column;
        justify-content: center;
        text-align: center;
        gap: 6px !important;

        /* Trạng thái Tab Tắt (Màu xám) */
        background: #f1f5f9 !important;
        color: #64748b !important;
        border-bottom: 2px solid var(--site-border);
        border-right: 1px solid var(--site-border);
        opacity: 1;
    }

    .lr-tier-card:last-child .lr-tier-card-head {
        border-right: none;
    }

    /* Ẩn bớt các thành phần thừa trên Mobile */
    .lr-tier-toggle,
    .lr-tier-card-head-text .label {
        display: none !important;
    }

    .lr-tier-card-head .lr-rank-badge {
        width: 28px !important;
        height: 28px !important;
        font-size: 13px !important;
        background: #cbd5e1 !important;
        /* Icon xám khi tắt */
    }

    .lr-tier-card-head .lr-tier-card-head-text strong {
        font-size: 13px !important;
    }

    /* 2. TRẠNG THÁI TAB BẬT (Trở lại màu Gradient nổi bật) */
    .lr-tier-card.active-tab .lr-tier-card-head {
        border-bottom-color: transparent;
        color: #fff !important;
    }

    .lr-tier-card.dong.active-tab .lr-tier-card-head {
        background: linear-gradient(120deg, #c2410c, #ea580c) !important;
    }

    .lr-tier-card.vang.active-tab .lr-tier-card-head {
        background: linear-gradient(120deg, #ca8a04, #fbbf24) !important;
    }

    .lr-tier-card.kimcuong.active-tab .lr-tier-card-head {
        background: linear-gradient(120deg, #6d28d9, #8b5cf6) !important;
    }

    .lr-tier-card.dong.active-tab .lr-rank-badge {
        background: linear-gradient(145deg, #fb923c, #ea580c) !important;
    }

    .lr-tier-card.vang.active-tab .lr-rank-badge {
        background: linear-gradient(145deg, #fcd34d, #f59e0b) !important;
    }

    .lr-tier-card.kimcuong.active-tab .lr-rank-badge {
        background: linear-gradient(145deg, #a78bfa, #7c3aed) !important;
    }

    .lr-tier-card.kimcuong.active-tab .lr-tier-card-head.lr-tier-card-master {
        background: linear-gradient(120deg, #be185d, #db2777, #ec4899) !important;
    }

    /* 3. HIỂN THỊ NỘI DUNG (BODY) XUỐNG DƯỚI DẠNG TAB CONTENT */
    .lr-tier-body-wrapper {
        order: 2;
        width: 100%;
        display: none !important;
        /* Ghi đè CSS Grid */
    }

    .lr-tier-card.active-tab .lr-tier-body-wrapper {
        display: block !important;
        animation: fadeInTab 0.35s ease;
    }

    .lr-tier-options {
        padding-bottom: 20px;
    }
}

@keyframes fadeInTab {
    from {
        opacity: 0;
        transform: translateY(4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}