/* ═══════════════════════════════════════════════════════════════
   MENU CHÍNH (mẫu Aesop) — deploy/gan-menu.py gắn vào header mọi trang khi build.
   Máy tính ≥1100px: hàng mục thứ hai trong header, rê chuột mở bảng nhiều cột + ô ảnh.
   Điện thoại / máy tính bảng: nút "Menu" mở bảng toàn màn hình, các mục xổ xuống từng nhóm.
   ═══════════════════════════════════════════════════════════════ */
.mm{--mm-paper:var(--paper,#FAF7F1); --mm-ink:var(--ink,#141210); --mm-soft:var(--ink-soft,#5B554D);
  --mm-line:var(--line-soft,#EAE3D6); --mm-gold:var(--gold-ink,#8A6212)}
.mm ul{list-style:none; margin:0; padding:0}
.mm a{color:inherit; text-decoration:none}
.mm__an{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.mm__dau{display:none}
.mmbtn{display:none; align-items:center; gap:.6rem; background:transparent; border:0; padding:.6rem 0;
  font:inherit; font-size:.72rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:inherit; cursor:pointer}
.mmbtn u{text-decoration:none}
.mmbtn i{display:block; width:22px; height:9px; border-top:1px solid currentColor; border-bottom:1px solid currentColor}

/* ── Máy tính ──────────────────────────────────────────────── */
@media (min-width:1100px){
  .nav{flex-wrap:wrap; row-gap:0}
  .nav > .brand{order:1} .nav > .nav__right{order:2} .nav > .mm{order:3}
  .mm{flex:1 0 100%; margin:.85rem calc(-1 * max(4vw,1rem)) -1.1rem; padding:0 max(4vw,1rem);
    border-top:1px solid var(--mm-line)}
  .nav.is-solid .mm{margin-bottom:-1rem}
  /* header cao thêm một hàng: liên kết nhảy mục (#lienhe, mục lục bài) không bị header che */
  html{scroll-padding-top:8.5rem} .than h2{scroll-margin-top:0}
  .mm__hang{display:flex; justify-content:center; align-items:stretch; gap:.2rem}
  .mm__tab{position:relative; display:block; padding:.85rem 1rem; font-size:.8rem; font-weight:500;
    letter-spacing:.02em; color:var(--mm-ink); white-space:nowrap}
  .mm__tab::after{content:""; position:absolute; left:1rem; right:1rem; bottom:-1px; height:2px; background:var(--mm-ink);
    transform:scaleX(0); transition:transform .25s ease}
  .mm__tab:hover::after, .mm__tab[aria-expanded="true"]::after{transform:scaleX(1)}
  .mm__bang{position:absolute; left:0; right:0; top:100%; background:var(--mm-paper);
    border-top:1px solid var(--mm-line); border-bottom:1px solid var(--mm-line);
    box-shadow:0 18px 30px -24px rgba(20,18,16,.35);
    visibility:hidden; opacity:0; transform:translateY(-4px); transition:opacity .2s ease, transform .2s ease, visibility 0s .2s}
  .mm__muc.is-open .mm__bang{visibility:visible; opacity:1; transform:none; transition:opacity .2s ease, transform .2s ease}
  .mm__trong{width:min(1240px,100% - 8vw); margin:0 auto; padding:1.6rem 0 2.2rem;
    display:flex; gap:2.4rem; align-items:flex-start; justify-content:center}
  .mm__cot{flex:0 1 190px; min-width:140px}
  .mm__td{margin:0 0 .55rem; font-size:.8rem; font-weight:600; color:var(--mm-ink)}
  .mm__cot li a{display:block; padding:.22rem 0; font-size:.8rem; font-weight:400; line-height:1.45; color:var(--mm-ink)}
  .mm__cot li a:hover{color:var(--mm-gold); text-decoration:underline; text-underline-offset:3px}
  .mm__anh{display:flex; gap:1.1rem; flex:0 0 auto; margin-left:.6rem}
  .mm__anh:empty{display:none}
  .mm__the{display:block; width:150px}
  .mm__the img{display:block; width:150px; height:112px; object-fit:cover; background:var(--paper-2,#F2ECE1)}
  .mm__the span{display:block; margin-top:.55rem; font-size:.78rem; line-height:1.4; color:var(--mm-ink)}
  .mm__the:hover span{text-decoration:underline; text-underline-offset:3px}
  /* Ô tìm kiếm cuối hàng mục, như mẫu */
  .mm__tim{display:flex; align-items:center; margin-left:1.2rem; padding-left:1.2rem; border-left:1px solid var(--mm-line)}
}
@media (min-width:1100px) and (max-width:1279px){
  .mm__tab{padding-inline:.7rem; font-size:.76rem} .mm__tab::after{left:.7rem; right:.7rem}
  .mm__trong{gap:1.6rem} .mm__the, .mm__the img{width:128px} .mm__the img{height:96px}
}
.mm__tim form{position:relative; display:flex; align-items:center; gap:.5rem; margin:0}
.mm__tim svg{width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.6; flex:none}
.mm__tim input{width:150px; border:0; background:transparent; padding:.5rem 0; font:inherit; font-size:.8rem;
  color:var(--mm-ink); outline:none; -webkit-appearance:none; appearance:none}
.mm__tim input::placeholder{color:var(--mm-soft)}
.mm__tim input::-webkit-search-cancel-button{display:none}
.mm__kq{position:absolute; top:calc(100% + .7rem); right:0; width:min(380px,90vw); max-height:70vh; overflow:auto;
  background:var(--mm-paper); border:1px solid var(--mm-line); box-shadow:0 18px 30px -20px rgba(20,18,16,.4); z-index:5}
.mm__kq a{display:block; padding:.65rem .9rem; border-top:1px solid var(--mm-line); font-size:.82rem; line-height:1.4; color:var(--mm-ink)}
.mm__kq a:first-child{border-top:0}
.mm__kq a small{display:block; margin-top:.15rem; font-size:.66rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--mm-gold)}
.mm__kq a:hover, .mm__kq a.on{background:var(--paper-2,#F2ECE1)}
.mm__kq p{margin:0; padding:.8rem .9rem; font-size:.82rem; color:var(--mm-soft)}

/* ── Điện thoại / máy tính bảng ───────────────────────────── */
@media (max-width:1099px){
  .mmbtn{display:flex}
  .menubtn{display:none}
  .mm{display:none}
  html.mm-mo, html.mm-mo body{overflow:hidden}
  html.mm-mo .nav{backdrop-filter:none; -webkit-backdrop-filter:none}
  html.mm-mo .mm{display:block; position:fixed; inset:0; z-index:200; overflow-y:auto; overscroll-behavior:contain;
    background:var(--mm-paper); color:var(--mm-ink); padding:0 max(4vw,1rem) 3rem; text-align:left}
  .mm__dau{display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; z-index:2;
    padding:1.1rem 0; background:var(--mm-paper); border-bottom:1px solid var(--mm-line);
    font-size:.72rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase}
  .mm__dong{background:none; border:0; font-size:1.2rem; line-height:1; padding:.4rem; cursor:pointer; color:inherit}
  .mm__hang{display:flex; flex-direction:column}
  .mm__tim{order:-1; padding:1rem 0; border-bottom:1px solid var(--mm-line)}
  .mm__tim form{width:100%} .mm__tim input{flex:1; width:auto; font-size:1rem}
  .mm__kq{position:static; width:auto; max-height:none; margin-top:.6rem; box-shadow:none}
  .mm__muc{border-bottom:1px solid var(--mm-line)}
  .mm__tab{display:flex; justify-content:space-between; align-items:center; padding:1.05rem 0; font-size:1.05rem; font-weight:500}
  .mm__tab::after{content:"+"; font-weight:300; font-size:1.3rem; line-height:1}
  .mm__tab[aria-expanded="true"]::after{content:"–"}
  .mm__bang{display:none; padding:0 0 1.2rem}
  .mm__muc.is-open .mm__bang{display:block}
  .mm__trong{display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:1.2rem 1.5rem}
  .mm__td{margin:0 0 .35rem; font-size:.7rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--mm-soft)}
  .mm__cot li a{display:block; padding:.4rem 0; font-size:.95rem}
  .mm__anh{display:none}
}
@media (prefers-reduced-motion:reduce){ .mm *{transition:none !important} }