.breadcrumb-shop {
    display: none;
}
body{
  background: #0e0e0f;
}
main {
    background: radial-gradient(800px 260px at 50% -40px, rgba(255, 94, 0, .12), rgba(0, 0, 0, 0)), var(--xg-bg);
}
.config-tags li span {
    font-size: 10px;
    font-weight: 600;
    color: black;
}
/* =========================
   XGEAR BLACK FRIDAY 2025
   demo-code.css (reworked)
   ========================= */
:root{
  --xg-bg: #0a0a0a;
  --xg-surface: #121212;
  --xg-text: #e6e6e6;

  /* Fire theme (cam vàng) */
  --xg-fire-1:#ff3b00;
  --xg-fire-2:#ff8a00;
  --xg-amber:#ffcf5b;
  --xg-amber-2:#ffd27a;

  /* Lime theme (săn dấu chân) */
  --xg-lime-1:#a8ff4f;
  --xg-lime-2:#9be500;
  --xg-lime-t:#cfeea7;

  --xg-border: rgba(255,255,255,.12);
  --xg-muted: #a9b4bf;
  --xg-shadow: 0 12px 28px rgba(0,0,0,.45);
}

/* ==== Utilities (chỉ áp dụng trong section xg-*) ==== */
section[id^="xg-"], section[class^="xg-"]{
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Helvetica Neue", "Noto Sans", sans-serif;
  color: var(--xg-text);
}

/* ---------------------------------------------------
   SECTION 1: HERO
--------------------------------------------------- */
#xg-bf-hero{
  background:
   radial-gradient(1100px 500px at 80% 30%, rgba(255,60,0,.22), rgba(0,0,0,0)),
   radial-gradient(900px 400px at 18% 25%, rgba(255,160,0,.15), rgba(0,0,0,0)),
   var(--xg-bg);
  border-bottom: 2px solid var(--xg-amber);
}
.xg-hero{ padding: 72px 16px 56px; }
.xg-container{ max-width: 1100px; margin: 0 auto; text-align: center; }

.xg-badge{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 14px; border-radius:999px;
  border:2px solid var(--xg-amber);
  background: rgba(255,140,0,.08);
  color: var(--xg-amber-2); font-weight: 800; letter-spacing:.3px;
  box-shadow: inset 0 0 22px rgba(255,180,0,.08);
}

.xg-title{
    font-size: clamp(30px, 6vw, 80px);
    line-height: 1.5;
    background: linear-gradient(180deg, var(--xg-fire-2), var(--xg-amber));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 0 2px 0 rgba(0, 0, 0, .35);
    font-family: "Montserrat", sans-serif !important;
    font-weight: 900;
}

.xg-sub{
  margin:0 0 6px; font-size: clamp(14px, 2vw, 22px);
  color: #ffb680; letter-spacing:.4px;
  text-transform: uppercase; font-weight:700;
}

.xg-tagline{ margin: 6px 0 18px; color: var(--xg-muted); font-size: 16px; }

.xg-actions{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }

.xg-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding: 14px 22px; border-radius: 14px; text-decoration:none; font-weight: 800;
  letter-spacing:.3px; transition: .18s ease; border:2px solid transparent;
  box-shadow: var(--xg-shadow);
}
.xg-btn-primary{
  background: linear-gradient(180deg, var(--xg-fire-1), var(--xg-fire-2));
  color:#fff; border-color: var(--xg-amber);
}
.xg-btn-primary:hover{ transform: translateY(-2px); filter: brightness(1.05); }
.xg-btn-ghost{
  font-family: "Montserrat", sans-serif !important;
  background: transparent; color: var(--xg-amber-2);
  border-color: var(--xg-amber); box-shadow: inset 0 0 0 1px rgba(255,207,91,.12);
}
.xg-btn-ghost:hover{ background: rgba(255,207,91,.08); transform: translateY(-2px); }
.xg-dot{ filter: drop-shadow(0 0 6px rgba(255,120,0,.45)); }

/* ---------------------------------------------------
   SECTION 2: CARDS
--------------------------------------------------- */
#xg-bf-cards{
  background:
    radial-gradient(800px 260px at 50% -40px, rgba(255,94,0,.12), rgba(0,0,0,0)),
    var(--xg-bg);
  padding: 56px 16px 48px;
}
.xg2-container{ max-width: 1160px; margin:0 auto; text-align:center; }

.xg2-title{
  font-size: clamp(24px, 4vw, 56px);
  margin: 0 0 8px;
  background: linear-gradient(180deg, #ff7a00, #ffcf5b);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.xg2-sub{ margin: 0 0 24px; color:#ffcf9a; }

.xg2-grid{
  display:grid; grid-template-columns: repeat(4,1fr); gap:18px;
}
@media (max-width: 1100px){ .xg2-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px){  .xg2-grid{ grid-template-columns: 1fr; } }

.xg2-card{
  position:relative; overflow:hidden; border-radius:18px; text-align:left;
  padding: 24px 20px 22px;
  background: radial-gradient(300px 160px at 40% 20%, rgba(255,140,0,.12), rgba(0,0,0,0)),
              linear-gradient(180deg, #1b1b1b, #0f0f0f);
  border: 2px solid var(--xg-amber-2);
  box-shadow: 0 10px 24px rgba(255,94,0,.20), inset 0 -8px 16px rgba(0,0,0,.25);
  transition: transform .18s ease, box-shadow .18s ease;
}
.xg2-card:hover{ transform: translateY(-4px); box-shadow: 0 16px 28px rgba(255,94,0,.28); }

.xg2-ico{
  width:64px; height:64px; border-radius:50%;
  display:grid; place-items:center; font-size:28px; color:#fff;
  margin-bottom: 14px;
  background: radial-gradient(60% 60% at 50% 35%, #ffb561 0%, #ff5e00 100%);
  box-shadow: 0 0 20px rgba(255,110,0,.35);
  border: 3px solid rgba(255,255,255,.12);
}

.xg2-tt{
  font-size: clamp(16px, 1.6vw, 22px);
  line-height:1.25; color: var(--xg-amber-2); margin: 6px 0 8px;
  text-transform: uppercase; letter-spacing:.3px;
}
.xg2-desc{ margin: 0; color: var(--xg-muted); font-size: 14px; }

.xg2-card-link{
  position:absolute; inset:0; z-index: 1; /* click toàn card */
}

/* góc trang trí */
.xg2-corner{ position:absolute; width:22px; height:22px; border: 3px solid #ff7a00; opacity:.65; }
.xg2-corner.tl{ top:10px; left:10px; border-right:none; border-bottom:none; border-radius:10px 0 0 0; }
.xg2-corner.tr{ top:10px; right:10px; border-left:none; border-bottom:none; border-radius:0 10px 0 0; }
.xg2-corner.bl{ bottom:10px; left:10px; border-right:none; border-top:none; border-radius:0 0 0 10px; }
.xg2-corner.br{ bottom:10px; right:10px; border-left:none; border-top:none; border-radius:0 0 10px 0; }

.xg2-notice{
  font-family: "Montserrat", sans-serif !important;
  margin: 22px auto 0; width: fit-content;
  display:flex; align-items:center; gap:10px;
  padding: 12px 18px; border-radius: 999px; font-weight: 800;
  color:#0b0b0b; background: radial-gradient(80% 160% at 50% 0%, #ffe888, #b1ff3a);
  border: 2px solid #fff3a6; box-shadow: 0 10px 22px rgba(241, 255, 122, .22);
}
.xg2-notice .zap{ filter: drop-shadow(0 0 6px rgba(255,230,120,.6)); }

/* ---------------------------------------------------
   SECTION: SĂN DẤU CHÂN (không card)
--------------------------------------------------- */
.xg-khunglong-hunt{
  background:#050505; padding: 64px 16px 56px; position:relative; overflow:hidden;
}
.xg-khunglong-hunt__inner{ max-width:1100px; margin:0 auto; text-align:center; }
.xg-khunglong-hunt__title{
  font-size: clamp(26px, 3vw, 56px); margin:0 0 8px; line-height:1.1;
  color: var(--xg-lime-1); text-shadow: 0 2px 0 rgba(0,0,0,.45);
}
.xg-khunglong-hunt__subtitle{ font-size: clamp(16px, 1.6vw, 22px); color: var(--xg-lime-t); margin:0 0 12px; }
.xg-khunglong-hunt__desc{ max-width:900px; margin:0 auto 28px; color: var(--xg-muted); font-size: 15px; }

.xg-khunglong-steps{
  display:grid; grid-template-columns: repeat(3,1fr); gap: 28px;
  padding:0; margin:24px 0 28px; list-style:none;
}
@media (max-width: 820px){ .xg-khunglong-steps{ grid-template-columns:1fr; gap:20px; } }

.xg-khunglong-step{
  display:flex; align-items:center; justify-content:center; gap:16px; background:transparent;
}
.xg-khunglong-step__badge{
  width:84px; height:84px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-weight:900; font-size:32px; color:#0b2600;
  background: radial-gradient(60% 60% at 50% 35%, #d8ff7a 0%, #76d800 100%);
  box-shadow: 0 0 22px rgba(163, 255, 71, .35), 0 8px 18px rgba(0,0,0,.4);
  border: 3px solid rgba(255,255,255,.18);
}
.xg-khunglong-step__content{ text-align:left; }
.xg-khunglong-step__title{
  margin:0 0 4px; font-size: clamp(16px, 1.6vw, 22px);
  color:#ffd24d; letter-spacing:.5px;
}
.xg-khunglong-step__text{ margin:0; color: var(--xg-muted); font-size:14px; }

.xg-khunglong-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:14px 22px; border-radius:14px; text-decoration:none; font-weight:800;
  letter-spacing:.3px; transition:.18s ease; border:2px solid transparent;
}
.xg-khunglong-btn--cta{
  background: linear-gradient(180deg, var(--xg-lime-2), #d8ff7a);
  color:#0b2600; border-color:#f6ff7a;
  box-shadow: 0 10px 22px rgba(115,255,0,.25);
}
.xg-khunglong-btn--cta:hover{ transform: translateY(-2px); filter: brightness(1.05); }

/* dấu chân mờ trang trí */
.xg-khunglong-hunt::after{
  content:""; position:absolute; right:6%; bottom:40px; width:220px; height:220px;
  background: radial-gradient(60% 60% at 50% 50%, rgba(168,255,79,.12), rgba(168,255,79,0));
  filter: blur(2px); pointer-events:none;
  mask: radial-gradient(circle at 35% 35%, #000 12%, transparent 13%),
        radial-gradient(circle at 65% 35%, #000 12%, transparent 13%),
        radial-gradient(circle at 25% 65%, #000 12%, transparent 13%),
        radial-gradient(circle at 50% 70%, #000 12%, transparent 13%),
        radial-gradient(circle at 75% 65%, #000 12%, transparent 13%);
  -webkit-mask-composite: destination-out; mask-composite: exclude;
}

/* ---------------------------------------------------
   SECTION: COUNTDOWN HERO + CTA STRIP
--------------------------------------------------- */
.xg-khunglong-hero{
  position: relative; overflow: hidden; padding: 72px 16px 56px;
  background:
   radial-gradient(1200px 500px at 80% 40%, rgba(255,60,0,.25), rgba(0,0,0,0)),
   radial-gradient(900px 400px at 20% 20%, rgba(255,160,0,.18), rgba(0,0,0,0)),
   var(--xg-bg);
  color: var(--xg-amber-2); text-align: center;
  border-top:2px solid var(--xg-amber); border-bottom:2px solid var(--xg-amber);
}
.xg-khunglong-hero__inner{ max-width:1100px; margin:0 auto; }
.xg-khunglong-hero__badge{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 14px; border-radius:999px; border:2px solid var(--xg-amber);
  background: rgba(255,140,0,.08); color: var(--xg-amber-2); font-weight:700;
}
.xg-khunglong-hero__title{
  margin: 24px auto 28px; max-width: 920px;
  font-size: clamp(22px, 2.8vw, 44px); line-height: 1.2; color: var(--xg-amber);
  text-shadow: 0 2px 0 rgba(0,0,0,.3);
}
.xg-khunglong-hero__timer{
  display:flex; justify-content:center; gap:16px; flex-wrap:wrap; margin: 8px 0 28px;
}
.xg-khunglong-timer__cell{
  width: 118px; padding: 18px 10px; border-radius: 16px; text-align:center; color:#fff;
  background: linear-gradient(180deg, var(--xg-fire-1), var(--xg-fire-2));
  border:3px solid var(--xg-amber-2);
  box-shadow: 0 10px 24px rgba(255,94,0,.35), inset 0 -8px 16px rgba(0,0,0,.25);
}
.xg-khunglong-timer__num{ display:block; font-weight:800; font-size: 40px; line-height:1; }
.xg-khunglong-timer__label{ display:block; margin-top:8px; font-size:12px; letter-spacing:1.4px; color:#ffe39e; }

.xg-khunglong-btn--fire{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:14px 22px; border-radius:14px; text-decoration:none; font-weight:800; letter-spacing:.3px;
  color:#fff; background: linear-gradient(180deg, var(--xg-fire-1), var(--xg-fire-2));
  border:2px solid var(--xg-amber-2); box-shadow: 0 10px 24px rgba(255,94,0,.35), inset 0 -8px 16px rgba(0,0,0,.25);
  transition:.18s ease;
}
.xg-khunglong-btn--fire:hover{ transform: translateY(-2px); filter: brightness(1.05); }

.xg-khunglong-strip{
  background: #0e0e0f; color: var(--xg-amber);
  border-top: 2px solid var(--xg-amber); padding: 28px 16px 40px;
}
.xg-khunglong-strip__inner{ max-width:1100px; margin:0 auto; text-align:center; }
.xg-khunglong-strip__title{
  font-size: clamp(20px, 2.3vw, 40px);
  margin: 8px auto 20px; line-height:1.2; color:#ff6b4b;
  text-shadow: 0 2px 0 rgba(0,0,0,.35);
}
.xg-khunglong-strip__actions{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.xg-khunglong-btn--secondary{
  font-family: "Montserrat", sans-serif !important;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:14px 22px; border-radius:14px; text-decoration:none; font-weight:800; letter-spacing:.3px;
  background: transparent; color: var(--xg-amber-2);
  border:2px solid var(--xg-amber-2); box-shadow: inset 0 0 0 1px rgba(255,207,91,.15);
  transition:.18s ease;
}
.xg-khunglong-btn--secondary:hover{ background: rgba(255,207,91,.08); transform: translateY(-2px); }
.xg-khunglong-btn--primary{
  font-family: "Montserrat", sans-serif !important;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:14px 22px; border-radius:14px; text-decoration:none; font-weight:800; letter-spacing:.3px;
  background:#f59e0b; color:#1b1204; border:2px solid var(--xg-amber-2);
  box-shadow: 0 10px 22px rgba(245,158,11,.25); transition:.18s ease;
}
.xg-khunglong-btn--primary:hover{ transform: translateY(-2px); filter: brightness(1.05); }

/* Responsive tweaks cho timer */
@media (max-width: 480px){
  .xg-khunglong-timer__cell{ width: 100px; padding: 14px 10px; }
  .xg-khunglong-timer__num{ font-size: 34px; }
}

.container, .container-fluid {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
    position: relative;
}
.qn-btn {
    width: 180px;
    padding: 8px 14px;
    border-radius: 999px;
    border: 0;
    cursor: pointer;
    font-weight: 700;
    font-size: 14px;
    color: #000;
    transition: .2s;
    background: radial-gradient(80% 160% at 50% 0%, #ffe888, #b1ff3a);
    border: 2px solid #fff3a6;
    box-shadow: 0 10px 22px rgba(241, 255, 122, .22);
}
.qn-btn:hover{ transform: translateY(-1px); }

.qn-btn.active{
  color:#120a00;
  background: linear-gradient(90deg,#ff7a00,#ff2b9d);
  box-shadow: 0 6px 18px rgba(255,122,0,.35);
}  
/* ====== LAYOUT CHUNG CHO CÁC SECTION SẢN PHẨM ====== */
.section-ldp{
  position: relative;
  padding: 28px 0;
  color: #fff;
  --bg:#0a0b10; --panel:#16161d; --muted:#a6aec2;
  --grad1:#ff7a00; --grad2:#ff2b9d; --ring: rgba(255,255,255,.08);
}

/* Nền và overlay ánh sáng */
.section-ldp .ldp-bg{
  position:absolute; inset:0;
  background:
    radial-gradient(120% 160% at 50% -20%, rgba(255,122,0,.12), transparent 58%),
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(10,11,16,1));
  z-index:0;
}
.section-ldp .ldp-overlay{
  position:absolute; inset:0; z-index:1;
  pointer-events:none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.03);
}
.section-ldp .ldp-wrapper{ position:relative; z-index:2; }
.section-ldp .section-content{ width:100%; }

/* ====== TIÊU ĐỀ / BANNER ====== */
.section-ldp .title-banner{
  display:flex; align-items:center; justify-content:center;
  margin-bottom:12px;
}
.section-ldp .title-banner .tablinks{
  border:0; cursor:default;
  padding:10px 16px; border-radius:999px; font-weight:800;
  color:#120900;
  background: linear-gradient(90deg, var(--grad1), var(--grad2));
  box-shadow: 0 10px 24px rgba(255,122,0,.28);
}

/* ====== LƯỚI SẢN PHẨM ====== */
.section-ldp .products-wrapper{
  display:grid;
  grid-template-columns: repeat(5, minmax(0,1fr));
  gap:10px;
  border-radius:12px;
}
.section-ldp .product-item{ width:100% }

/* CTA xem thêm */
.section-ldp .tab-cta{ margin-top:12px }
.section-ldp .btn-more{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:260px;
  padding:10px 16px; border-radius:10px; text-decoration:none;
  background:#6e3be2; color:#fff; font-weight:700;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}
.section-ldp .btn-more:hover{ opacity:.92 }

/* ====== RESPONSIVE ====== */
@media (max-width: 1200px){
  .section-ldp .products-wrapper{ grid-template-columns: repeat(4,1fr) }
}
@media (max-width: 991px){
  .section-ldp{ padding:22px 0 }
  .section-ldp .products-wrapper{ grid-template-columns: repeat(3,1fr); gap:8px }
  .section-ldp .btn-more{ min-width:200px }
}
@media (max-width: 767px){
  .section-ldp .products-wrapper{ grid-template-columns: repeat(2,1fr); gap:8px }
  .section-ldp .btn-more{ width:100%; min-width:0 }
}

/* ====== ẨN BỚT SẢN PHẨM (nếu cần) ======
   Laptop hiển thị tối đa 15, các nhóm còn lại 10 */
#section-scroll-2 .product-item:nth-child(n+16){ display:none }
#section-scroll-3 .product-item:nth-child(n+11),
#section-scroll-4 .product-item:nth-child(n+11),
#section-scroll-5 .product-item:nth-child(n+11){ display:none }

/* ====== ACCENT RIÊNG TỪNG SECTION ======
   Đổi gradient tiêu đề để nhìn khác nhau nhẹ */
.section-collection-1{ --grad1:#ff7a00; --grad2:#ff2b9d }  /* Laptop */
.section-collection-2{ --grad1:#ff6a00; --grad2:#ff3ca6 }  /* PC */
.section-collection-3{ --grad1:#ff9b3d; --grad2:#c858ff }  /* Màn hình */
.section-collection-4{ --grad1:#ff7a00; --grad2:#8a6bff }  /* Gear */

/* Viền nhẹ cho khu sản phẩm để giống mock */
.section-ldp .products-wrapper{
  box-shadow: 0 0 0 1px var(--ring) inset;
  background: rgba(255,255,255,.02);
  padding: 8px;
}
/* Căn giữa & giới hạn bề rộng cho tất cả section 2/3/4/5 */
.section-ldp .ldp-wrapper > .container-fluid,
.section-ldp .section-content,
.section-ldp .products-listing,
.section-ldp .products-wrapper{
  max-width: 1220px;   /* đổi số này nếu bạn muốn hẹp hơn/rộng hơn */
  margin-left: auto;
  margin-right: auto;
}

/* Padding nhẹ 2 bên để không dính mép */
.section-ldp .ldp-wrapper > .container-fluid{
  padding-left: 12px;
  padding-right: 12px;
}

/* Grid vẫn 5 cột desktop nhưng NẰM TRONG khung ở giữa */
.section-ldp .products-wrapper{
  display: grid;
  grid-template-columns: repeat(5, minmax(0,1fr));
  gap: 10px;
}

/* Tablet/Mobile giữ giữa + giảm cột */
@media (max-width: 1200px){
  .button-roll{display: none;}
  .section-ldp .products-wrapper{ grid-template-columns: repeat(4,1fr); }
}
@media (max-width: 991px){
  .button-roll{display: none;}
  .section-ldp .products-wrapper{ grid-template-columns: repeat(3,1fr); }
}
@media (max-width: 767px){
  .button-roll{display: none;}
  .section-ldp .products-wrapper{ grid-template-columns: repeat(2,1fr); }
}