/* Menu con trên header trang chủ (04/10/2026) — "Khác biệt ▾" và "Chọn Khoai ▾".
   Máy tính (>1260px): thả xuống khi rê chuột hoặc bấm nút ▾.
   Điện thoại / hamburger (≤1260px): các mục con xếp thụt vào dưới mục cha, luôn hiện sẵn. */
.nav-nhom{ position:relative; display:flex; align-items:center; }
.nav-mo-con{
  background:none; border:0; cursor:pointer; padding:0; margin-left:2px;
  width:18px; height:30px; color: var(--chu-nhat-mo);
  display:flex; align-items:center; justify-content:center;
}
.nav-mo-con::before{
  content:""; width:6px; height:6px;
  border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg); transition: transform .15s ease;
}
.nav-nhom.mo .nav-mo-con::before{ transform: translateY(1px) rotate(225deg); }
.nav-mo-con:hover, .nav-mo-con:focus-visible, .nav-nhom:hover .nav-mo-con{ color: var(--chu-nhat); }
.nav-mo-con:focus-visible{ outline:2px solid var(--den-ho-phach); outline-offset:2px; border-radius:6px; }

.nav-con{
  display:none; position:absolute; top:100%; left:-14px; min-width:230px;
  margin-top:15px; padding:8px; z-index:60;
  background: var(--nen-toi-2); border:1px solid var(--vien-toi); border-radius:14px;
  box-shadow: 0 14px 34px rgba(0,0,0,.45);
}
/* cầu nối vô hình: chuột đi từ link xuống hộp không bị rớt hover */
.nav-con::before{ content:""; position:absolute; left:0; right:0; top:-18px; height:18px; }
nav.menu-chinh .nav-con a{
  display:block; padding:11px 14px; border:0; border-radius:9px;
  text-transform:none; letter-spacing:0; font-size:.92rem; font-weight:500;
  color: var(--chu-nhat-mo); white-space:nowrap;
}
nav.menu-chinh .nav-con a:hover, nav.menu-chinh .nav-con a:focus-visible{
  background: rgba(255,255,255,.07); color: var(--chu-nhat);
}
.nav-nhom.mo .nav-con{ display:block; }
@media (hover:hover){ .nav-nhom:hover .nav-con{ display:block; } }
.nav-nhom.an .nav-con{ display:none; }   /* vừa chọn / bấm Esc: đóng ngay, chuột rời mục thì hết ép */

/* Dải 1261–1340px vốn chỉ vừa khít 7 mục: bớt khe hở bù cho hai nút ▾ */
@media (min-width:1261px) and (max-width:1340px){ nav.menu-chinh{ gap:12px; } }

@media (max-width:1260px){
  .nav-nhom{ display:block; }
  .nav-mo-con{ display:none; }
  nav.menu-chinh .nav-nhom > a{ display:block; }          /* lấp đủ bề ngang như các mục khác */
  .nav-con{
    display:block; position:static; min-width:0; margin:0; padding:0; z-index:auto;
    background:transparent; border:0; border-radius:0; box-shadow:none;
  }
  .nav-con::before{ display:none; }
  nav.menu-chinh .nav-con a{
    min-height:44px; display:flex; align-items:center; border-radius:0;
    padding:12px 20px 12px 38px; font-size:.86rem;
    border-bottom:1px solid var(--vien-toi);
  }
  .nav-nhom.an .nav-con{ display:block; }
  nav.menu-chinh .nav-con a.nav-trung{ display:none; }   /* trùng đích với mục cha "Khác biệt" */
}