/* ===== MEGA MENU "Sản phẩm" =====
   Rê chuột (desktop) / bấm mũi tên (mobile) -> đổ xuống lưới 10 nhóm có ảnh.
   Nạp ở MỌI trang vì nằm trong header. */

/* Panel neo vào .kgx-hd (đã sticky -> sẵn là mốc định vị) => trải NGANG hết header.
   TUYỆT ĐỐI không đặt position:relative cho .kgx-nav > li:
   panel sẽ neo vào <li> và co lại bằng bề ngang chữ "Sản phẩm" (một dải hẹp). */
.kgx-site .kgx-mega{
  position:absolute; top:100%; left:0; right:0; z-index:60;
  padding:14px 20px 0;                  /* 14px trên = khe hở nhìn thấy, vẫn bắt được chuột */
  display:none;
}
.kgx-site .kgx-has-mega.kgx-open > .kgx-mega,
.kgx-site .kgx-has-mega:focus-within > .kgx-mega{display:block}   /* focus-within = đi bằng bàn phím */

.kgx-site .kgx-mega-in{
  max-width:1200px; margin:0 auto;
  background:#fff; border:1px solid var(--border); border-radius:var(--r-lg);
  box-shadow:0 18px 44px rgba(30,58,138,.18); padding:20px;
}

.kgx-site .kgx-mega-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:12px}
.kgx-site .kgx-mega-card{
  display:block; border:1px solid var(--border-2); border-radius:var(--r-md);
  overflow:hidden; background:#fff;
  transition:border-color var(--t), transform var(--t), box-shadow var(--t)}
.kgx-site .kgx-mega-card:hover{border-color:var(--accent-600); transform:translateY(-3px); box-shadow:var(--elev-2)}
.kgx-site .kgx-mega-card:focus-visible{outline:3px solid var(--metric); outline-offset:2px}
.kgx-site .kgx-mega-card img{
  width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; display:block; background:var(--muted)}
.kgx-site .kgx-mega-card span{display:block; padding:9px 10px}
.kgx-site .kgx-mega-card b{
  display:block; font-size:13px; font-weight:600; color:var(--fg); line-height:1.3; margin-bottom:2px}
.kgx-site .kgx-mega-card small{font-size:11px; color:var(--muted-fg)}

.kgx-site .kgx-mega-ft{
  display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
  margin-top:16px; padding-top:14px; border-top:1px solid var(--border-2);
  font-size:13px; color:var(--muted-fg)}
.kgx-site .kgx-mega-all{
  display:inline-flex; align-items:center; gap:6px; font-weight:700; color:var(--accent-600); font-size:14px}
.kgx-site .kgx-mega-all .kgx-ic{width:16px; height:16px}
.kgx-site .kgx-mega-ft a[href^="tel:"]{color:var(--primary); font-weight:700}

/* Nút mũi tên: chỉ hiện trên mobile.
   44×44 là bắt buộc (DESIGN.md §mobile: nút bấm ≥44px) — trước đây 26×26, quá nhỏ để bấm.
   margin âm để ô bấm to ra mà không làm cao thêm hàng menu. */
.kgx-site .kgx-mega-tog{
  display:none; background:none; border:0; cursor:pointer; color:var(--text);
  min-width:44px; min-height:44px; align-items:center; justify-content:center; margin:-10px 0}
.kgx-site .kgx-mega-tog .kgx-ic{width:20px; height:20px; transition:transform var(--t)}
.kgx-site .kgx-mega-tog:focus-visible{outline:3px solid var(--metric); outline-offset:-3px; border-radius:var(--r-sm)}
.kgx-site .kgx-has-mega.kgx-open > .kgx-mega-tog .kgx-ic{transform:rotate(180deg)}

@media(max-width:1200px){
  .kgx-site .kgx-mega-grid{grid-template-columns:repeat(4,1fr)}
}

/* ---- Mobile: menu là cột dọc trong burger -> mega thành khối xổ trong luồng ---- */
@media(max-width:900px){
  .kgx-site .kgx-has-mega{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between}
  .kgx-site .kgx-mega-tog{display:inline-flex}

  .kgx-site .kgx-mega{
    position:static; width:100%; margin-top:10px; padding:0;
    max-height:58vh; overflow-y:auto}
  /* mobile không có "rê chuột" -> chỉ mở khi BẤM */
  .kgx-site .kgx-has-mega:focus-within > .kgx-mega{display:none}
  .kgx-site .kgx-has-mega.kgx-open > .kgx-mega{display:block}
  .kgx-site .kgx-mega-in{box-shadow:none; padding:12px; border-radius:var(--r-md)}

  .kgx-site .kgx-mega-grid{grid-template-columns:repeat(2,1fr); gap:9px}
  .kgx-site .kgx-mega-card b{font-size:12px}
  .kgx-site .kgx-mega-ft{font-size:12px; gap:8px}
}