/* ===== TRANG SAN PHAM & DICH VU =====
   Tai dung token + .kgx-sec/.kgx-head/.kgx-eyebrow tu style.css.
   Chi them phan luoi anh + muc luc + lightbox. */

/* --- Hero nho dau trang --- */
.kgx-sp-top{background:var(--primary); color:#fff; padding:44px 0 40px}
/* chua 72px ben phai cho cum nut noi (Zalo/FB/TikTok) khoi de len chu */
.kgx-sp-top h1{color:#fff; font-size:36px; font-weight:800; margin-bottom:12px; max-width:min(760px, calc(100% - 72px))}
.kgx-sp-top p{color:#dbe4ff; font-size:17px; max-width:min(640px, calc(100% - 72px))}
.kgx-sp-crumb{font-size:13px; color:#b9c7f0; margin-bottom:14px}
.kgx-sp-crumb a{color:#dbe4ff; font-weight:600}
.kgx-sp-crumb a:hover{color:#fff; text-decoration:underline}

/* --- Muc luc nhom ---
   KHONG dung position:sticky: header .kgx-hd cung sticky top:0 -> hai cai de nhau. */
.kgx-sp-nav{background:var(--bg); border-bottom:1px solid var(--border); padding:16px 0}
.kgx-sp-nav ul{display:flex; gap:8px; flex-wrap:wrap}
.kgx-sp-nav a{display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:600;
  color:var(--primary); background:#fff; border:1px solid var(--border);
  padding:8px 14px; border-radius:var(--r-pill); transition:background var(--t),color var(--t)}
.kgx-sp-nav a:hover,.kgx-sp-nav a:focus-visible{background:var(--primary); color:#fff; border-color:var(--primary)}
.kgx-sp-nav a b{font-weight:700; opacity:.65; font-size:12px}

/* --- Nhom san pham --- */
.kgx-sp-grp{padding:52px 0 8px; scroll-margin-top:80px}
.kgx-sp-grp:nth-child(even){background:var(--bg)}
.kgx-sp-hd{display:flex; align-items:flex-end; justify-content:space-between; gap:20px;
  flex-wrap:wrap; margin-bottom:22px}
.kgx-sp-hd h2{font-size:27px; font-weight:800; margin-bottom:6px}
.kgx-sp-hd p{color:var(--muted-fg); font-size:15px; max-width:600px}

/* --- Luoi anh: chiu duoc ca anh doc lan ngang --- */
.kgx-sp-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:16px}
.kgx-sp-item{background:#fff; border:1px solid var(--border); border-radius:var(--r-lg);
  overflow:hidden; box-shadow:var(--elev-1); transition:transform var(--t),box-shadow var(--t);
  cursor:zoom-in; display:block; width:100%; padding:0; text-align:left; font:inherit; color:inherit}
.kgx-sp-item:hover{transform:translateY(-3px); box-shadow:var(--elev-2)}
.kgx-sp-item:focus-visible{outline:3px solid var(--metric); outline-offset:2px}
/* height:auto BAT BUOC — the <img> co height="800", khong co no thi trinh duyet
   lay 800px lam chieu cao that va aspect-ratio bi vo hieu (o anh cao vong len). */
.kgx-sp-item img{width:100%; height:auto; aspect-ratio:3/4; object-fit:cover; display:block; background:var(--muted)}
/* display:block bat buoc — day la <span>, de inline thi chu khong xuong dong dung. */
.kgx-sp-cap{display:block; padding:11px 13px; font-size:13px; font-weight:600; color:var(--fg);
  line-height:1.4; overflow-wrap:anywhere; min-height:2.8em}

/* --- CTA cuoi moi nhom --- */
.kgx-sp-cta{display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding:22px 0 8px}
.kgx-sp-cta span{color:var(--muted-fg); font-size:14px}

/* --- Lightbox --- */
.kgx-lb{position:fixed; inset:0; background:rgba(15,30,66,.92); z-index:100;
  display:none; align-items:center; justify-content:center; padding:20px}
.kgx-lb[open]{display:flex}
.kgx-lb::backdrop{background:transparent}
.kgx-lb img{max-width:100%; max-height:82vh; width:auto; height:auto; object-fit:contain; border-radius:var(--r-md); display:block; margin:0 auto}
.kgx-lb-cap{color:#dbe4ff; text-align:center; font-size:14px; margin-top:12px}
.kgx-lb-x{position:absolute; top:16px; right:16px; width:44px; height:44px; border-radius:50%;
  background:rgba(255,255,255,.14); color:#fff; border:0; cursor:pointer; font-size:22px; line-height:1}
.kgx-lb-x:hover{background:rgba(255,255,255,.28)}
.kgx-lb-x:focus-visible{outline:3px solid var(--metric); outline-offset:2px}
.kgx-lb-nav{position:absolute; top:50%; transform:translateY(-50%); width:48px; height:48px;
  border-radius:50%; background:rgba(255,255,255,.14); color:#fff; border:0; cursor:pointer; font-size:24px}
.kgx-lb-nav:hover{background:rgba(255,255,255,.28)}
.kgx-lb-nav:focus-visible{outline:3px solid var(--metric); outline-offset:2px}
.kgx-lb-prev{left:14px} .kgx-lb-next{right:14px}

@media(max-width:900px){
  .kgx-sp-top h1{font-size:27px}
  .kgx-sp-top p{font-size:15px}
  .kgx-sp-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:11px}
  .kgx-sp-hd h2{font-size:22px}
  .kgx-sp-grp{padding:36px 0 6px}
  .kgx-lb-nav{width:40px; height:40px}

  /* 10 nhom ma wrap thi thanh 10 hang, chiem het man hinh.
     -> cho cuon ngang 1 hang. */
  .kgx-sp-nav{padding:12px 0}
  .kgx-sp-nav .kgx-wrap{padding:0}
  .kgx-sp-nav ul{flex-wrap:nowrap; overflow-x:auto; scroll-snap-type:x proximity;
    padding:2px 20px 6px; -webkit-overflow-scrolling:touch; scrollbar-width:none}
  .kgx-sp-nav ul::-webkit-scrollbar{display:none}
  .kgx-sp-nav li{flex:none; scroll-snap-align:start}
  .kgx-sp-nav a{white-space:nowrap}
}