/* ============================================================
   ĐẠI TIỆC BUILD PC — CSS TRANG PC LẮP RÁP (dai-tiec-laprap.blade.php)
   Bảng màu sáng, pastel, tối ưu trải nghiệm đọc & tỉ lệ chuyển đổi.
   Namespace "lr-" (Lắp Ráp) để tách riêng khỏi "sale-" (muahe) và "dtp-" (trang nội dung).
============================================================ */
:root{
    --site-primary:#57bbfe;
    --site-danger:#dc2626;
    --site-text:#1e293b;
    --site-gray:#64748b;
    --site-border:#e2e8f0;
    --site-bg:#f8fafc;

    /* Pastel theo từng hạng - nền rất nhạt + màu chữ/icon đậm vừa đủ để đảm bảo tương phản đọc */
    --lr-dong-bg:#fdf3ea;
    --lr-dong-border:#f3d9bd;
    --lr-dong-ink:#a8672f;
    --lr-dong-icon:#c9834a;

    --lr-vang-bg:#fdf8e6;
    --lr-vang-border:#f2e2a0;
    --lr-vang-ink:#92720a;
    --lr-vang-icon:#d4af1f;

    --lr-kc-bg:#f1f0fd;
    --lr-kc-border:#d9d5fb;
    --lr-kc-ink:#5b4bcf;
    --lr-kc-icon:#8b5cf6;

    --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;}
.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
============================================================ */
.lr-hero{display:block;width:100%;line-height:0;position:relative;}
.lr-hero img{width:100%;height:auto;object-fit:cover;}
@media (max-width:465px){
    .lr-hero{padding-top:95px;}
}

/* ============================================================
   2. THANH QUYỀN LỢI — nền pastel sáng thay vì tối
============================================================ */
.lr-perks{background:#eef6ff;border-bottom:1px solid #dbeafe;overflow:hidden;padding:10px 0;}
.lr-perks-track{display:flex;width:max-content;gap:40px;animation:lrMarquee 36s linear infinite;}
.lr-perks:hover .lr-perks-track{animation-play-state:paused;}
.lr-perks-track span{color:#1d4ed8;font-size:13px;font-weight:700;white-space:nowrap;display:inline-flex;align-items:center;gap:8px;}
.lr-perks-track span i{color:#f59e0b;}
@keyframes lrMarquee{0%{transform:translateX(0);}100%{transform:translateX(-50%);}}

/* ============================================================
   3. FLASH SALE + ĐẾM NGƯỢC
============================================================ */
.lr-flash-strip{
    margin-top:20px;background:#fff5f5;border:2px solid #fecaca;border-radius:16px;padding:14px 20px;
    display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;
}
.lr-flash-left{display:flex;align-items:center;gap:12px;color:var(--site-danger);}
.lr-flash-left i{font-size:24px;animation:lrBlink 1.4s infinite;}
@keyframes lrBlink{0%,100%{opacity:1;}50%{opacity:.4;}}
.lr-flash-left strong{display:block;font-size:15px;font-weight:900;text-transform:uppercase;}
.lr-flash-left small{color:var(--site-gray);font-weight:600;}
.lr-countdown{display:flex;align-items:center;gap:6px;}
.lr-countdown span{color:var(--site-danger);font-weight:800;font-size:15px;}
.lr-cd-box{background:var(--site-danger);color:#fff;font-weight:900;font-size:16px;padding:6px 9px;border-radius:8px;min-width:36px;text-align:center;}

/* ============================================================
   4. RANK NAV — huy hiệu bo tròn pastel (thay hexagon tối màu)
============================================================ */
.lr-ranknav{
    margin-top:20px;display:flex;justify-content:center;gap:0;background:#fff;border-radius:20px;
    box-shadow:0 4px 15px rgba(15,23,42,.05);padding:14px 10px;
}
.lr-ranknav-item{
    flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;padding:8px;border-radius:12px;
    cursor:pointer;color:var(--site-text);position:relative;transition:.2s;
}
.lr-ranknav-item:hover{background:#f8fafc;}
.lr-ranknav-item:not(:last-child)::after{
    content:"";position:absolute;top:24px;right:-4px;width:20px;height:2px;
    background:repeating-linear-gradient(90deg,var(--site-border) 0 6px, transparent 6px 10px);
}
.lr-badge{
    width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:17px;flex-shrink:0;
}
.lr-badge.dong{background:var(--lr-dong-bg);border:2px solid var(--lr-dong-border);color:var(--lr-dong-icon);}
.lr-badge.vang{background:var(--lr-vang-bg);border:2px solid var(--lr-vang-border);color:var(--lr-vang-icon);}
.lr-badge.kimcuong{background:var(--lr-kc-bg);border:2px solid var(--lr-kc-border);color:var(--lr-kc-icon);}
.lr-ranknav-item strong{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.3px;}
.lr-ranknav-item small{font-size:10px;color:var(--site-gray);font-weight:600;}

/* ============================================================
   5. TOOLBAR: TÌM KIẾM - SẮP XẾP
============================================================ */
.lr-toolbar{
    margin-top:20px;background:#fff;border-radius:16px;padding:16px 20px;
    box-shadow:0 4px 15px rgba(15,23,42,.05);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:1px solid var(--site-border);border-radius:30px;padding:10px 16px 10px 38px;font-size:14px;outline:none;transition:.2s;}
.lr-search input:focus{border-color:var(--site-primary);box-shadow:0 0 0 3px rgba(87,187,254,.15);}
.lr-sort select{border:1px 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;}
.lr-toolbar-note{font-size:12.5px;color:var(--site-gray);font-weight:600;flex:1 1 100%;}

/* ============================================================
   6. SECTION HẠNG — dải màu pastel riêng theo từng hạng
============================================================ */
.lr-section{padding-top:50px;}
.lr-section-head{
    display:flex;align-items:center;gap:14px;border-radius:16px;padding:16px 20px;margin-bottom:18px;
    flex-wrap:wrap;border:1px solid transparent;
}
.lr-section-head.dong{background:var(--lr-dong-bg);border-color:var(--lr-dong-border);}
.lr-section-head.vang{background:var(--lr-vang-bg);border-color:var(--lr-vang-border);}
.lr-section-head.kimcuong{background:var(--lr-kc-bg);border-color:var(--lr-kc-border);}
.lr-section-head .lr-badge{width:46px;height:46px;font-size:18px;background:#fff;}
.lr-section-head-text{flex:1;min-width:180px;}
.lr-section-head-text h2{font-weight:800;font-size:17px;margin:0 0 3px;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:12.5px;color:var(--site-gray);}
.lr-section-count{font-size:12.5px;font-weight:700;color:var(--site-gray);background:#fff;padding:5px 14px;border-radius:20px;}

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

.lr-card-top{display:flex;align-items:center;justify-content:space-between;padding:10px 12px 0 12px;}
.lr-tag-percent{background:var(--site-danger);color:#fff;font-size:12px;font-weight:800;padding:3px 9px;border-radius:5px;}
.lr-tag-build{
    font-size:10.5px;font-weight:800;color:#0f766e;background:#ecfdf5;border:1px solid #a7f3d0;
    padding:3px 8px;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:#fff;}
.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.06);}

.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:7px 9px;border-radius:8px;margin-bottom:9px;line-height:1.4;
}
.lr-card.dong .lr-gift-badge{background:var(--lr-dong-bg);border:1px solid var(--lr-dong-border);color:var(--lr-dong-ink);}
.lr-card.vang .lr-gift-badge{background:var(--lr-vang-bg);border:1px solid var(--lr-vang-border);color:var(--lr-vang-ink);}
.lr-card.kimcuong .lr-gift-badge{background:var(--lr-kc-bg);border:1px solid var(--lr-kc-border);color:var(--lr-kc-ink);}
.lr-gift-badge i{font-size:13px;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:17px;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:var(--site-danger);color:#fff;font-size:13px;font-weight:700;padding:8px 0;border-radius:8px;margin-top:6px;transition:.2s;}
.lr-btn-buy:hover{background:#b91c1c;color:#fff;}

/* ============================================================
   8. 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:20px;}
.lr-btn-more{
    display:flex;align-items:center;gap:8px;padding:11px 32px;background:#fff;color:var(--site-primary);
    border:2px solid var(--site-primary);border-radius:30px;font-size:13.5px;font-weight:800;text-transform:uppercase;cursor:pointer;transition:.2s;
}
.lr-btn-more:hover{background:var(--site-primary);color:#fff;}
.lr-btn-more:disabled{opacity:.5;cursor:not-allowed;}

/* ============================================================
   9. THỂ LỆ + MODAL
============================================================ */
.lr-terms{background:#fff;border-radius:var(--lr-radius);padding:26px 24px;text-align:center;margin-top:50px;box-shadow:0 4px 15px rgba(15,23,42,.05);}
.lr-terms h3{color:var(--site-text);font-weight:800;font-size:19px;margin:0 0 10px;}
.lr-terms h3 i{color:#f59e0b;margin-right:6px;}
.lr-terms p{color:#475569;font-size:14px;line-height:1.7;margin:0 auto 16px;max-width:620px;}
.lr-btn-readmore{background:linear-gradient(90deg,#fb923c,#f59e0b);color:#fff;font-weight:800;padding:11px 30px;border-radius:30px;border:none;cursor:pointer;font-size:14px;transition:.2s;}
.lr-btn-readmore:hover{opacity:.9;}

.lr-modal-overlay{position:fixed;inset:0;background:rgba(15,23,42,.5);display:flex;align-items:center;justify-content:center;z-index:1000;padding:20px;opacity:0;pointer-events:none;transition:opacity .2s;}
.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;}

/* ============================================================
   10. NÚT LÊN ĐẦU TRANG
============================================================ */
.lr-back-top{
    position:fixed;bottom:24px;right:24px;width:44px;height:44px;border-radius:50%;background:#fff;color:var(--site-primary);
    border:1px solid var(--site-border);display:none;align-items:center;justify-content:center;box-shadow:0 6px 16px rgba(15,23,42,.15);
    cursor:pointer;z-index:999;transition:.2s;
}
.lr-back-top.is-visible{display:flex;}
.lr-back-top:hover{transform:translateY(-3px);}

/* ============================================================
   11. RESPONSIVE
============================================================ */
@media (max-width:1024px){.lr-grid{grid-template-columns:repeat(3,1fr);}}
@media (max-width:768px){
    .lr-grid{grid-template-columns:repeat(2,1fr);gap:10px;}
    .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:15px;}
    .lr-section-head{padding:14px 16px;}
}
@media (max-width:465px){
    .lr-ranknav{flex-direction:column;gap:8px;}
    .lr-ranknav-item:not(:last-child)::after{display:none;}
    .lr-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:400px){
    .lr-grid{grid-template-columns:1fr 1fr;}
}