/* MENU = CHỒNG Ô THẢ TỪ CHỮ "MENU" XUỐNG (7/10/2026) — dùng chung cho mọi trang.
   Chủ site chốt: menu nằm bên phải, thả từ chính chữ MENU xuống, MỖI MỤC MỘT Ô RIÊNG, các ô bằng nhau và chữ canh giữa.
   Dáng ô (bản "sang trọng"): mặt navy sâu có khung chỉ vàng kép, tên mục chữ Marcellus in hoa giãn, canh giữa — KHÔNG số thứ tự,
   KHÔNG mũi tên, KHÔNG dấu cộng (chủ site yêu cầu bỏ). Rê chuột thì một vệt sáng lướt qua ô; trang đang xem là ô VÀNG KIM chữ navy.
   "Services" bung 3 dịch vụ con ngay trong ô của nó (ô tự cao lên).
   Markup và JS bật/tắt (class .open trên #menu-overlay và #menu-toggle) vẫn nằm trong từng trang.
   Dùng #menu-overlay (id) để thắng luật `.menu-overlay …` khai báo nội tuyến ở từng trang, bất kể thứ tự nạp.
   Vị trí (--md-top / --md-right) do assets/menu-dropdown.js đo từ nút MENU; số trong var() là dự phòng khi chưa đo. */

/* khung chứa: trong suốt, chỉ để xếp các ô thành một cột thẳng mép phải của nút MENU */
#menu-overlay{
  --md-h:3.5rem;                          /* chiều cao một ô */
  --md-gap:.5rem;                         /* khe giữa hai ô */
  --md-row:calc(var(--md-h) + var(--md-gap)); /* bước của một ô — dùng cho hiệu ứng xoè chồng ô */
  --md-gold:linear-gradient(105deg,#a67c33 0%,#d9a441 28%,#f6e6b6 50%,#d9a441 72%,#a67c33 100%);
  position:fixed; inset:auto; top:var(--md-top,4.6rem); right:var(--md-right,2.5rem); z-index:101;
  width:min(18.5rem,calc(100vw - 1.5rem)); min-width:0; max-width:none;
  max-height:calc(100vh - var(--md-top,4.6rem) - .6rem); overflow-y:auto; overscroll-behavior:contain; scrollbar-width:none;
  display:flex; flex-direction:column; align-items:stretch; justify-content:flex-start; gap:var(--md-gap);
  padding:0 0 1.4rem; box-sizing:border-box; text-align:center;
  background:none; border:0; box-shadow:none; -webkit-backdrop-filter:none; backdrop-filter:none;
  opacity:1; visibility:hidden; transform:none; -webkit-clip-path:none; clip-path:none;
  transition:visibility 0s linear .3s;
}
#menu-overlay::-webkit-scrollbar{ display:none; }
#menu-overlay.open{ visibility:visible; transition:visibility 0s; }

/* ================= mỗi mục một ô ================= */
#menu-overlay > a,
#menu-overlay > .menu-group{
  position:relative; box-sizing:border-box; width:100%; margin:0; flex:none;
  /* lớp trên: vệt sáng chéo (nằm chờ ngoài mép phải, rê chuột thì lướt qua) · lớp dưới: mặt navy sâu, sáng hơn ở góc trên-trái */
  background:
    linear-gradient(105deg,rgba(245,217,168,0) 36%,rgba(245,217,168,.16) 50%,rgba(245,217,168,0) 64%) 140% 0 / 260% 100% no-repeat,
    linear-gradient(160deg,rgba(28,43,88,.97) 0%,rgba(13,22,48,.97) 55%,rgba(8,14,32,.98) 100%);
  border:1px solid rgba(180,136,77,.5);
  /* khung chỉ thứ hai nằm lọt bên trong ô (viền kép kiểu hộp trang sức) */
  outline:1px solid rgba(232,194,132,.14); outline-offset:-5px;
  box-shadow:0 18px 34px -18px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,246,220,.1);
  /* đóng: các ô rút nhanh về phía chữ MENU */
  opacity:0; transform:translateY(calc(var(--i,0) * var(--md-row) * -1 - .6rem));
  transition:opacity .22s ease,transform .3s cubic-bezier(.5,0,.75,.2),border-color .4s ease,outline-color .4s ease,background-position 1s cubic-bezier(.2,.7,.2,1);
}
/* mở: chồng ô xoè dần xuống, ô trên ra trước ô dưới */
#menu-overlay.open > a,
#menu-overlay.open > .menu-group{
  opacity:1; transform:none;
  transition:opacity .4s ease calc(var(--i,0) * .05s),transform .62s cubic-bezier(.16,.84,.3,1) calc(var(--i,0) * .05s),
    border-color .4s ease,outline-color .4s ease,background-position 1s cubic-bezier(.2,.7,.2,1),color .35s ease;
}
#menu-overlay > :nth-child(2){ --i:1; } #menu-overlay > :nth-child(3){ --i:2; } #menu-overlay > :nth-child(4){ --i:3; }
#menu-overlay > :nth-child(5){ --i:4; } #menu-overlay > :nth-child(6){ --i:5; } #menu-overlay > :nth-child(7){ --i:6; }

/* tên mục: Marcellus in hoa, giãn chữ rộng, canh giữa ô */
#menu-overlay > a,
#menu-overlay .menu-toggle-item{
  display:flex; align-items:center; justify-content:center;
  min-height:var(--md-h); padding:.3rem 1.4rem; white-space:nowrap; text-decoration:none;
  font-family:'Marcellus','Playfair Display',serif; font-weight:400; font-size:.98rem; line-height:1.2;
  letter-spacing:.24em; text-transform:uppercase; color:#F5F1E8; cursor:pointer;
}
/* nút nằm TRONG ô Services (ô đã có viền 1px trên + dưới) → thấp hơn 2px để ô Services cao đúng bằng các ô khác */
#menu-overlay .menu-toggle-item{ position:relative; width:100%; min-height:calc(var(--md-h) - 2px); box-sizing:border-box;
  background:none; border:0; opacity:1; transition:color .35s ease; }
/* letter-spacing cộng thêm một khoảng sau chữ cuối → bù lại để chữ nằm đúng giữa ô */
#menu-overlay > a,#menu-overlay .menu-toggle-item > span{ text-indent:.24em; }

/* ---- rê chuột / focus: viền vàng rõ, khung trong sáng lên, vệt sáng lướt qua, chữ ngả vàng ---- */
#menu-overlay > a:hover,#menu-overlay > a:focus-visible,
#menu-overlay > .menu-group:hover,#menu-overlay > .menu-group:focus-within,#menu-overlay > .menu-group.open{
  border-color:#E8C284; outline-color:rgba(232,194,132,.42); background-position:-40% 0,0 0; }
#menu-overlay > a:hover,#menu-overlay > a:focus-visible,
#menu-overlay .menu-toggle-item:hover,#menu-overlay .menu-toggle-item:focus-visible,
#menu-overlay .menu-group.open .menu-toggle-item{ color:#F5D9A8; }
#menu-overlay .menu-toggle-item,#menu-overlay .menu-toggle-item:focus-visible{ outline:none; }

/* ---- trang đang xem: ô vàng kim, chữ navy ---- */
#menu-overlay > a.here,
#menu-overlay > a.here:hover{
  background:var(--md-gold); color:#0D1730; border-color:#f6e6b6; outline-color:rgba(13,23,48,.28);
  box-shadow:0 18px 36px -16px rgba(217,164,65,.55),inset 0 1px 0 rgba(255,255,255,.35);
}
/* trang service: ô Services đang xem → hàng chữ Services tô vàng kim (ba dịch vụ con bên dưới vẫn nền navy) */
#menu-overlay > .menu-group:has(.menu-toggle-item.here){ border-color:#f6e6b6; }
#menu-overlay .menu-toggle-item.here,
#menu-overlay .menu-group.open .menu-toggle-item.here{ background:var(--md-gold); color:#0D1730; }

/* ---- ô "Services": bấm thì ô cao lên, lộ 3 dịch vụ con bên trong (cơ chế bung của trang giữ nguyên) ---- */
#menu-overlay .menu-group{ display:block; }
/* không đặt padding ở khối bọc: lúc đang thu gọn (hàng lưới 0fr) padding vẫn chiếm chỗ và làm ô Services cao hơn các ô khác */
#menu-overlay .menu-submenu-inner{ align-items:stretch; gap:0; padding:0; }
#menu-overlay .menu-submenu a{
  display:block; padding:.46rem 1rem; white-space:nowrap; text-decoration:none; text-align:center;
  font-family:'Archivo',Arial,sans-serif; font-weight:500; font-size:.8rem; line-height:1.4; letter-spacing:.09em; text-transform:none;
  color:rgba(245,241,232,.74); opacity:1; transition:color .3s ease,letter-spacing .5s cubic-bezier(.2,.7,.2,1);
}
#menu-overlay .menu-submenu a:first-child{ margin:0 1.15rem; padding-top:.85rem; border-top:1px solid rgba(180,136,77,.34); }
#menu-overlay .menu-submenu a:last-child{ padding-bottom:1rem; }
#menu-overlay .menu-submenu a:hover,#menu-overlay .menu-submenu a:focus-visible,
#menu-overlay .menu-submenu a.here{ color:#F5D9A8; outline:none; }

@media(prefers-reduced-motion:reduce){
  #menu-overlay,#menu-overlay.open,#menu-overlay > a,#menu-overlay > .menu-group,
  #menu-overlay.open > a,#menu-overlay.open > .menu-group{ transition:none; }
}