/* ══════════════════════════════════════════════════════════════════════════
   HQ-HEADER — HEADER CHÍNH THỨC của gdpthuyenquang.com
   Người dùng duyệt 27/8/2026. Dùng cho MỌI trang, không trừ trang nào.

   MỘT NGUỒN: sửa tệp này là cả site đổi theo. Đi cặp với /js/hq-header.js
   (tệp JS dựng lại khung header rồi gắn class .hqh — thiếu nó thì luật ở
   đây không khớp vào đâu cả).

   ⚠ MỌI luật đều neo dưới  #header.hqh  nên không đụng CSS riêng của trang.
   ⚠ skel.min.js chèn luật  {display:none!important}  để giấu #logo và #nav.
     Vì vậy phần "gỡ trói" bên dưới BẮT BUỘC phải có !important, và nhờ neo
     hai lớp (#header.hqh …) nên đặc hiệu hơn luật của skel.
   ══════════════════════════════════════════════════════════════════════════ */

#header.hqh{
  /* nền & mực */
  --hqh-mun:      #150A04;
  --hqh-mun-sau:  #0C0603;
  --hqh-mun-nhat: #241309;
  --hqh-giay:     #F6F0E3;
  --hqh-bone:     rgba(246,240,227,.74);
  --hqh-bone-mo:  rgba(246,240,227,.44);

  /* vàng thương hiệu — GIỮ NGUYÊN của trang nhà */
  --hqh-gold:     #C9963B;
  --hqh-anh:      #EFCB7E;

  /* hai màu lấy từ chính đời sống đoàn */
  --hqh-lam:      #7E9B92;   /* màu ÁO LAM của đoàn sinh */
  --hqh-sen:      #D98C82;   /* sắc hoa sen */

  /* phông — cả ba trang nhà đã nạp sẵn, không thêm byte nào */
  --hqh-display:  'Playfair Display', Georgia, 'Times New Roman', serif;
  --hqh-ui:       'Be Vietnam Pro', 'Segoe UI', system-ui, sans-serif;
  --hqh-van:      'EB Garamond', Garamond, Georgia, serif;

  --hqh-vien:     rgba(201,150,59,.22);
  --hqh-vien-dam: rgba(201,150,59,.42);
}

/* ── GỠ TRÓI khỏi skel ─────────────────────────────────────────────────── */
#header.hqh,
#header.hqh #logo,
#header.hqh #nav,
#header.hqh #nav > ul,
#header.hqh #search-container{ display:block !important; }
#header.hqh #nav > ul{ display:flex !important; }
/* vạch đen 44px và ngăn kéo của skel — không dùng nữa */
body.hqh-on #titleBar,
body.hqh-on #navPanel{ display:none !important; }
/* skel chừa sẵn 44px cho vạch đen của nó. Bỏ vạch rồi mà không bỏ đệm thì
   đầu trang hở một dải trắng. Đệm nằm trên #skel-layers-wrapper, KHÔNG phải body. */
body.hqh-on,
body.hqh-on #skel-layers-wrapper{ padding-top:0 !important; }
/* dropotron (js/init.js) cũng tự dựng menu đổ xuống riêng — nếu để nguyên thì
   khách thấy HAI lớp menu chồng nhau. Menu con nay do .hqh-con lo. */
body.hqh-on .dropotron{ display:none !important; }

/* ── KHUNG MASTHEAD ───────────────────────────────────────────────────── */
#header.hqh{
  position:relative;
  /* ⚠ z-index CAO là bắt buộc. Nếu để mặc định, menu con bị kẹt trong lớp xếp
     chồng của header (z-index:1) và các khối nội dung bên dưới ĐÈ LÊN nửa dưới
     của menu — khách thấy menu bị cắt ngang. Đã trả giá 27/8/2026. */
  z-index:100;
  background:var(--hqh-mun) url("/images/pic01-v2.jpg") no-repeat center 42% / cover;
  overflow:visible;              /* KHÔNG bao giờ hidden: cắt mất menu con */
  padding:0;
  color:var(--hqh-giay);
  font-family:var(--hqh-ui);
  text-align:left;
}
/* Lớp phủ: ảnh vẫn thấy rõ mà chữ SẮC NÉT.
   Bản cũ chỉ có một dốc mờ nên chữ folio chìm hẳn vào ảnh. */
#header.hqh::before{
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(120% 90% at 50% 8%, rgba(21,10,4,.30) 0%, rgba(21,10,4,.74) 55%, rgba(21,10,4,.93) 100%),
    linear-gradient(to bottom, rgba(21,10,4,.86) 0%, rgba(21,10,4,.34) 26%, rgba(21,10,4,.52) 62%, rgba(21,10,4,.97) 100%);
}
#header.hqh > *{ position:relative; z-index:1; }
#header.hqh .hqh-in{ max-width:1240px; margin:0 auto; padding:0 32px; }

/* ── DẢI FOLIO ────────────────────────────────────────────────────────── */
#header.hqh .hqh-folio{
  position:relative;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:9px 0; border-bottom:1px solid var(--hqh-vien);
  font-size:.58rem; font-weight:600; letter-spacing:.22em; text-transform:uppercase;
  color:var(--hqh-bone-mo); line-height:1.4;
}
#header.hqh .hqh-f-giua{
  position:absolute; left:50%; transform:translateX(-50%);
  color:rgba(201,150,59,.86); letter-spacing:.3em; white-space:nowrap; font-weight:700;
}
#header.hqh .hqh-f-phai{ display:flex; align-items:center; gap:16px; }

/* nút ngôn ngữ nằm trong dải folio */
#header.hqh .lang-switch{
  display:inline-flex; border:1px solid var(--hqh-vien-dam);
  border-radius:2px; overflow:hidden; flex:none;
}
#header.hqh .lang-switch .lang-btn{
  appearance:none; border:0; cursor:pointer; margin:0;
  padding:4px 9px; background:transparent; color:var(--hqh-bone-mo);
  font-family:var(--hqh-ui); font-size:.6rem; font-weight:700; letter-spacing:.1em;
  width:auto; min-width:0; line-height:1.6;
  transition:background .2s, color .2s;
}
#header.hqh .lang-switch .lang-btn + .lang-btn{ border-left:1px solid var(--hqh-vien); }
#header.hqh .lang-switch .lang-btn.active,
#header.hqh .lang-switch .lang-btn[aria-pressed="true"]{ background:var(--hqh-gold); color:#20100A; }
#header.hqh .lang-switch .lang-btn:not(.active):hover{ color:var(--hqh-anh); background:rgba(201,150,59,.12); }
#header.hqh .lang-label{ display:none; }

/* ── LỜI CHÀO đổi theo ngày ───────────────────────────────────────────── */
#header.hqh .hqh-chao{
  display:flex; align-items:center; justify-content:center; gap:12px;
  padding:14px 0 2px; margin:0;
  font-family:var(--hqh-van); font-style:italic; font-size:1.02rem;
  color:var(--hqh-sen); letter-spacing:.015em; text-align:center;
}
#header.hqh .hqh-chao::before, #header.hqh .hqh-chao::after{
  content:''; width:34px; height:1px; flex:none;
  background:linear-gradient(to right, transparent, rgba(217,140,130,.6));
}
#header.hqh .hqh-chao::after{ background:linear-gradient(to left, transparent, rgba(217,140,130,.6)); }

/* ── KHỐI LOGO — chữ 3D GIỮ NGUYÊN, người dùng dặn ────────────────────── */
#header.hqh #logo{
  text-align:center; padding:18px 0 4px; margin:0;
  background:none; border:0; width:auto; height:auto;
}
#header.hqh #logo .logo-eyebrow{
  display:block; font-family:var(--hqh-ui); font-size:.56rem; font-weight:700;
  letter-spacing:.4em; text-transform:uppercase; color:var(--hqh-gold);
  margin:0 0 16px;
}
#header.hqh .hqh-ten{
  font-family:var(--hqh-display); font-weight:700;
  font-size:clamp(2.9rem, 8vw, 5.8rem); line-height:.98; letter-spacing:.04em;
  margin:0; padding:0; color:#FFD700; border:0;
  text-shadow:
    1px 1px 0 #c8920a, 2px 2px 0 #b07e08, 3px 3px 0 #976b06,
    4px 4px 0 #8b6004, 5px 5px 0 #7a5303, 6px 6px 14px rgba(0,0,0,.7);
}
#header.hqh .hqh-ten a{ color:inherit !important; text-decoration:none; border:0; }
#header.hqh .hqh-gach{
  display:flex; align-items:center; gap:16px; max-width:460px; margin:18px auto 0;
}
#header.hqh .hqh-gach::before, #header.hqh .hqh-gach::after{
  content:''; flex:1; height:1px;
  background:linear-gradient(to right, transparent, var(--hqh-vien-dam));
}
#header.hqh .hqh-gach::after{ background:linear-gradient(to left, transparent, var(--hqh-vien-dam)); }
#header.hqh .hqh-kc{
  width:7px; height:7px; flex:none; background:var(--hqh-gold); transform:rotate(45deg);
}

/* ── CÂU MỤC ĐÍCH — điều lệ của đơn vị, làm trụ của masthead ──────────── */
#header.hqh .hqh-mucdich{ max-width:720px; margin:20px auto 0; text-align:center; }
#header.hqh .hqh-md-nhan{
  display:block; font-family:var(--hqh-ui); font-size:.55rem; font-weight:700;
  letter-spacing:.34em; text-transform:uppercase; color:var(--hqh-gold); margin-bottom:13px;
}
#header.hqh .hqh-cham{
  margin:0; font-family:var(--hqh-van); font-size:1.04rem; line-height:1.74;
  color:var(--hqh-bone); font-style:italic; text-wrap:balance;
}
#header.hqh .hqh-cham .hqh-noibat{ color:var(--hqh-giay); font-style:normal; font-weight:500; }

/* ── Ô TÌM KIẾM ───────────────────────────────────────────────────────── */
#header.hqh #search-container{
  max-width:520px; margin:26px auto 0; position:relative; padding:0; background:none;
}
#header.hqh #search-container #search-input{
  width:100%; margin:0; padding:13px 18px 13px 18px;
  background:rgba(12,6,3,.62); color:var(--hqh-giay);
  border:1px solid var(--hqh-vien); border-radius:2px;
  font-family:var(--hqh-ui); font-size:.9rem; letter-spacing:.01em; line-height:1.4;
  transition:border-color .22s, background .22s, box-shadow .22s;
}
#header.hqh #search-container #search-input::placeholder{ color:rgba(246,240,227,.38); }
#header.hqh #search-container #search-input:focus{
  outline:none; border-color:var(--hqh-gold); background:rgba(12,6,3,.86);
  box-shadow:0 0 0 3px rgba(201,150,59,.16);
}
#header.hqh #search-results{ text-align:left; }

/* ── THANH MENU ───────────────────────────────────────────────────────── */
#header.hqh .hqh-thanh{
  position:relative; z-index:70;   /* để menu con đổ xuống nằm trên mọi khối khác */
  margin-top:30px;
  border-top:1px solid var(--hqh-vien);
  border-bottom:1px solid var(--hqh-vien);
  background:linear-gradient(to bottom, rgba(12,6,3,.30), rgba(12,6,3,.62));
}
#header.hqh .hqh-thanh-in{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
}
#header.hqh #nav{ border:0; padding:0; margin:0; background:none; flex:0 1 auto; }
#header.hqh #nav > ul{
  display:flex; flex-wrap:nowrap; list-style:none; margin:0; padding:0;
}
/* Nhiều trang tự tô nền cho mục đang xem (có trang tô XANH LÁ) — gột sạch,
   dấu "đang ở đây" nay là hạt kim cương vàng + gạch vàng. */
#header.hqh #nav > ul > li{
  position:relative; margin:0; padding:0; border:0;
  background:none !important; border-radius:0 !important; box-shadow:none !important;
}
#header.hqh #nav > ul > li > a{
  display:flex; align-items:center; gap:7px;
  padding:15px 12px; text-decoration:none; border:0;
  font-family:var(--hqh-ui);
  font-size:.69rem; font-weight:600; letter-spacing:.115em; text-transform:uppercase;
  color:var(--hqh-bone) !important; white-space:nowrap;
  transition:color .2s ease;
}
/* hạt kim cương bung ra — lấy đúng mô-típ viên kim cương dưới chữ Huyền Quang */
#header.hqh #nav > ul > li > a::before{
  content:'' !important; position:static !important;
  width:5px !important; height:5px !important; margin:0 -1px 0 0 !important;
  padding:0 !important; flex:none; border:0 !important; border-radius:0 !important;
  background:var(--hqh-gold) !important; box-shadow:none !important; opacity:1 !important;
  transform:rotate(45deg) scale(0); transform-origin:center;
  transition:transform .26s cubic-bezier(.34,1.56,.64,1);
}
/* gạch vàng quét từ giữa ra hai bên */
#header.hqh #nav > ul > li > a::after{
  content:''; position:absolute; left:50%; right:50%; bottom:-1px; height:2px;
  background:linear-gradient(to right, transparent, var(--hqh-gold), transparent);
  transition:left .3s ease, right .3s ease;
}
#header.hqh #nav > ul > li:hover > a,
#header.hqh #nav > ul > li:focus-within > a,
#header.hqh #nav > ul > li.active > a{ color:var(--hqh-anh) !important; }
#header.hqh #nav > ul > li:hover > a::before,
#header.hqh #nav > ul > li:focus-within > a::before,
#header.hqh #nav > ul > li.active > a::before{ transform:rotate(45deg) scale(1); }
#header.hqh #nav > ul > li:hover > a::after,
#header.hqh #nav > ul > li:focus-within > a::after,
#header.hqh #nav > ul > li.active > a::after{ left:12px; right:12px; }

/* ── MENU CON: thẻ ấm, có nhãn phân mục màu ÁO LAM ────────────────────── */
#header.hqh .hqh-con{
  position:absolute; top:100%; left:0; z-index:60;
  min-width:280px; padding:10px 0; margin:0;
  background:var(--hqh-mun-nhat);
  border:1px solid var(--hqh-vien); border-top:2px solid var(--hqh-gold);
  box-shadow:0 24px 60px rgba(0,0,0,.6);
  opacity:0; visibility:hidden; transform:translateY(-8px);
  transition:opacity .2s ease, transform .2s ease, visibility .2s;
  text-align:left;
  /* màn hình thấp: menu dài không chạy tuột khỏi màn, cho cuộn trong hộp */
  max-height:70vh; overflow-y:auto; overscroll-behavior:contain;
}
#header.hqh .hqh-con::-webkit-scrollbar{ width:8px; }
#header.hqh .hqh-con::-webkit-scrollbar-thumb{ background:rgba(201,150,59,.35); border-radius:4px; }
/* ⚠ KHÔNG mở bằng :hover thuần nữa.
   :hover thuần thì menu mở-đóng tức thì: con trỏ lỡ đi chệch một chút là menu
   biến mất, phải rê lại từ đầu — người dùng phàn nàn "dropdown khó sử dụng quá".
   Nay JS gắn .hqh-mo, có nhịp chờ mở 90ms / đóng 320ms, và bấm thì GIM lại.
   Giữ :focus-within để đi bằng bàn phím vẫn mở được. */
#header.hqh #nav > ul > li.hqh-mo > .hqh-con,
#header.hqh #nav > ul > li:focus-within > .hqh-con{
  opacity:1 !important; visibility:visible !important; transform:translateY(0) !important;
}
/* Vùng đệm vô hình nối mục cha xuống menu con: con trỏ đi chéo qua khe hở
   cũng không bị coi là rời khỏi mục. */
#header.hqh #nav > ul > li.hqh-cha{ }
#header.hqh #nav > ul > li.hqh-cha::after{
  content:''; position:absolute; left:0; right:0; top:100%; height:14px;
  display:none;
}
#header.hqh #nav > ul > li.hqh-cha.hqh-mo::after{ display:block; }

/* Mũi tên báo "mục này có menu con" — thiếu nó khách không biết chỗ nào bấm */
#header.hqh .hqh-mui{
  display:inline-block; margin-left:1px; font-size:.72em; line-height:1;
  opacity:.6; transform:translateY(1px);
  transition:transform .22s ease, opacity .22s ease;
}
#header.hqh #nav > ul > li.hqh-mo > a .hqh-mui{
  opacity:1; transform:translateY(1px) rotate(180deg);
}
#header.hqh #nav > ul > li > a:hover .hqh-mui{ opacity:1; }
/* trên máy cảm ứng, mục menu và mục con phải đủ lớn để chạm cho trúng */
@media (hover: none){
  #header.hqh .hqh-con a{ padding-top:11px !important; padding-bottom:11px !important; }
  #header.hqh #nav > ul > li > a{ padding-top:17px; padding-bottom:17px; }
}
#header.hqh .hqh-con.hqh-rong{ min-width:580px; column-count:2; column-gap:0; padding:14px 0; }
/* JS gắn .hqh-phai cho menu con nào thò khỏi mép phải màn hình */
#header.hqh .hqh-con.hqh-phai{ left:auto; right:0; }
/* mỗi nhóm phải ở TRỌN một cột — thiếu luật này thì nhãn lạc khỏi mục của nó */
#header.hqh .hqh-nhomo{
  break-inside:avoid-column; -webkit-column-break-inside:avoid;
  page-break-inside:avoid; display:block;
}
/* ⚠⚠ LUẬT SỐNG CÒN — ĐỪNG BỎ.
   CSS riêng của trang (menu đổ xuống đời cũ) có luật  #nav ul ul{display:none}.
   Menu con MỚI do JS dựng cũng là <ul> nằm trong #nav ul, nên bị luật ấy ẩn
   theo: khách chỉ còn thấy nhãn nhóm, MẤT SẠCH mục bên trong.
   Đã trả giá thật — lỗi lên máy chủ và người dùng phát hiện 27/8/2026.
   Phải có !important vì luật của trang đặc hiệu hơn về số phần tử. */
#header.hqh .hqh-con ul,
#header.hqh .hqh-con li{
  display:block !important;
  position:static !important;      /* trang có luật đặt position cho #nav ul li */
  float:none !important;           /* float làm cha KHÔNG nở theo con ⇒ hộp cụt 64px */
  clear:none !important;
  width:auto !important; min-width:0 !important; max-width:none !important;
  height:auto !important; min-height:0 !important; max-height:none !important;
  overflow:visible !important;
  visibility:visible !important; opacity:1 !important;
  margin:0 !important; padding:0 !important; border:0 !important;
  background:none !important; list-style:none !important;
  transform:none !important; top:auto !important; left:auto !important;
  right:auto !important; bottom:auto !important;
}
#header.hqh .hqh-nhan{
  display:block; padding:12px 20px 6px;
  font-family:var(--hqh-ui); font-size:.56rem; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase; color:var(--hqh-lam);
}
#header.hqh .hqh-con a{
  display:flex !important; align-items:center; gap:9px;
  position:static !important; float:none !important;
  padding:8px 20px !important; margin:0 !important;
  width:auto !important; height:auto !important; min-height:0 !important;
  text-decoration:none; text-align:left; white-space:normal;
  font-family:var(--hqh-ui); font-size:.845rem; font-weight:400;
  letter-spacing:.005em; line-height:1.45 !important; text-transform:none !important;
  color:rgba(246,240,227,.80) !important;
  border:0; border-left:2px solid transparent; background:none;
  border-radius:0 !important; box-shadow:none !important;
  transition:color .16s, background .16s, border-color .16s, padding-left .16s;
}
#header.hqh .hqh-con a:hover, #header.hqh .hqh-con a:focus-visible{
  color:var(--hqh-anh) !important; background:rgba(201,150,59,.09);
  border-left-color:var(--hqh-gold); padding-left:24px; outline:none;
}
#header.hqh .hqh-moi{
  flex:none; padding:2px 6px; border-radius:2px;
  background:rgba(217,140,130,.16); color:var(--hqh-sen);
  font-size:.52rem; font-weight:700; letter-spacing:.11em; text-transform:uppercase;
}
/* menu cấp 3 gốc đã được JS gấp thành nhóm — ẩn phần thừa cho chắc */
#header.hqh #nav ul ul ul{ display:none; }

/* ── CỤM HÀNH ĐỘNG: khác hẳn menu, vì đây là việc làm ───────────────────
   Là <ul> chứa nguyên thẻ <li> nhấc từ menu sang, nên menu con của
   "Ghi Danh" vẫn còn nguyên — chỉ đổ ra từ mép phải. */
#header.hqh .hqh-viec{
  display:flex; align-items:center; gap:10px; flex:none;
  list-style:none; margin:0; padding:0;
}
#header.hqh .hqh-viec > li{ position:relative; margin:0; padding:0; border:0; }
#header.hqh .hqh-viec .hqh-con{ left:auto; right:0; }
#header.hqh .hqh-viec > li:hover > .hqh-con,
#header.hqh .hqh-viec > li:focus-within > .hqh-con{ opacity:1; visibility:visible; transform:translateY(0); }
#header.hqh .hqh-viec > li > ul{ display:none !important; }
#header.hqh .hqh-nut{
  display:inline-flex; align-items:center; gap:7px;
  padding:9px 17px; text-decoration:none; border-radius:2px; width:auto;
  font-family:var(--hqh-ui);
  font-size:.69rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  transition:background .2s, color .2s, border-color .2s, box-shadow .2s, transform .2s;
}
#header.hqh .hqh-nut-chinh{
  background:var(--hqh-gold); color:#20100A !important; border:1px solid var(--hqh-gold);
  box-shadow:0 2px 0 rgba(0,0,0,.3);
}
#header.hqh .hqh-nut-chinh:hover{
  background:var(--hqh-anh); border-color:var(--hqh-anh); transform:translateY(-1px);
}
#header.hqh .hqh-nut-vien{
  background:transparent; color:var(--hqh-bone) !important; border:1px solid var(--hqh-vien-dam);
}
#header.hqh .hqh-nut-vien:hover{
  color:var(--hqh-anh) !important; border-color:var(--hqh-gold); background:rgba(201,150,59,.10);
}

/* ── BẬC TRUNG GIAN: màn hình vừa, dồn chữ cho vừa MỘT hàng ───────────── */
/* Mũi tên chỉ dẫn làm mỗi mục dài thêm ~10px × 6 mục = 60px, nên vùng "dồn
   chữ" phải rộng hơn trước (1340 → 1500) và ngưỡng chuyển sang nút ☰ phải
   nâng lên 1200. Thiếu bước này, cụm nút Ghi Danh / Thành Viên tràn ra ngoài
   ở 1130–1440px — đo được, đã sửa. */
@media(max-width:1500px){
  #header.hqh #nav > ul > li > a{ padding:15px 8px; font-size:.64rem; letter-spacing:.06em; }
  #header.hqh .hqh-nut{ padding:9px 12px; font-size:.64rem; letter-spacing:.09em; }
  #header.hqh .hqh-viec{ gap:8px; }
  #header.hqh .hqh-in{ padding:0 24px; }
}
@media(max-width:1300px){
  #header.hqh #nav > ul > li > a{ padding:15px 6px; font-size:.62rem; letter-spacing:.04em; }
  #header.hqh .hqh-nut{ padding:9px 10px; font-size:.62rem; letter-spacing:.07em; }
  #header.hqh .hqh-viec{ gap:6px; }
  #header.hqh .hqh-in{ padding:0 18px; }
}

/* ── #banner: lời dẫn RIÊNG của từng trang, đặt dưới thanh menu ────────── */
#header.hqh .hqh-banner{
  max-width:820px; margin:0 auto; padding:30px 32px 34px;
  text-align:center; background:none; border:0;
}
#header.hqh .hqh-banner p{
  margin:0 0 14px; font-family:var(--hqh-van); font-size:1.04rem; line-height:1.7;
  color:var(--hqh-bone); font-style:italic; text-wrap:pretty;
}
#header.hqh .hqh-banner p:last-child{ margin-bottom:0; }
#header.hqh .hqh-banner h1,
#header.hqh .hqh-banner h2,
#header.hqh .hqh-banner h3{
  font-family:var(--hqh-display); color:var(--hqh-giay);
  font-size:clamp(1.3rem,2.6vw,1.9rem); margin:0 0 12px; line-height:1.25;
}
#header.hqh .hqh-banner .button,
#header.hqh .hqh-banner a.button,
#header.hqh .hqh-banner a.btn-outline,
#header.hqh .hqh-banner a.btn{
  display:inline-flex; align-items:center; gap:7px; width:auto;
  margin-top:8px; padding:11px 22px; border-radius:2px;
  background:var(--hqh-gold); color:#20100A !important;
  border:1px solid var(--hqh-gold); box-shadow:0 2px 0 rgba(0,0,0,.3);
  font-family:var(--hqh-ui); font-size:.7rem; font-weight:700;
  letter-spacing:.13em; text-transform:uppercase; text-decoration:none;
  transition:background .2s, transform .2s;
}
#header.hqh .hqh-banner .button:hover,
#header.hqh .hqh-banner a.btn-outline:hover,
#header.hqh .hqh-banner a.btn:hover{ background:var(--hqh-anh); transform:translateY(-1px); }
@media(max-width:640px){ #header.hqh .hqh-banner{ padding:24px 18px 28px; } }

/* ══ THANH DÍNH khi cuộn — thay hẳn vạch đen 44px của skel ══════════════ */
.hqh-dinh{
  position:fixed; top:0; left:0; right:0; z-index:10050;
  background:rgba(12,6,3,.94);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(201,150,59,.42);
  transform:translateY(-100%);
  transition:transform .34s cubic-bezier(.4,0,.2,1);
  box-shadow:0 8px 30px rgba(0,0,0,.45);
  font-family:'Be Vietnam Pro','Segoe UI',system-ui,sans-serif;
}
.hqh-dinh.hqh-hien{ transform:translateY(0); }
.hqh-dinh .hqh-dinh-in{
  max-width:1240px; margin:0 auto; padding:0 32px;
  display:flex; align-items:center; gap:22px; height:62px;
}
.hqh-dinh .hqh-dinh-ten{ display:flex; align-items:center; gap:11px; text-decoration:none; flex:none; }
.hqh-dinh .hqh-dinh-ten img{ width:34px; height:34px; display:block; }
.hqh-dinh .hqh-dinh-ten .hqh-d-chu{
  font-family:'Playfair Display',Georgia,serif; font-weight:700; font-size:1.12rem;
  color:#EFCB7E; letter-spacing:.03em; line-height:1;
}
.hqh-dinh .hqh-dinh-ten .hqh-d-nho{
  display:block; font-size:.5rem; font-weight:600; letter-spacing:.2em;
  text-transform:uppercase; color:rgba(246,240,227,.44); margin-top:3px;
}
.hqh-dinh .hqh-d-menu{ flex:1; display:flex; justify-content:center; list-style:none; margin:0; padding:0; }
.hqh-dinh .hqh-d-menu > li{ position:relative; }
.hqh-dinh .hqh-d-menu > li > a{
  display:block; padding:20px 12px; text-decoration:none;
  font-size:.665rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:rgba(246,240,227,.74) !important; white-space:nowrap; transition:color .2s;
}
.hqh-dinh .hqh-d-menu > li > a:hover{ color:#EFCB7E !important; }
@media(max-width:1360px){ .hqh-dinh .hqh-d-menu > li:nth-child(n+7){ display:none; } }

/* ══ ĐIỆN THOẠI — nút và bảng menu riêng, KHÔNG dùng skel ═══════════════ */
#header.hqh .hqh-nut-mn{
  display:none; appearance:none; cursor:pointer;
  align-items:center; justify-content:center; gap:9px; width:100%;
  margin:22px 0 0; padding:13px 18px;
  background:rgba(12,6,3,.6); color:var(--hqh-giay);
  border:1px solid var(--hqh-vien-dam); border-radius:2px;
  font-family:var(--hqh-ui); font-size:.72rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase;
}
#header.hqh .hqh-nut-mn:hover{ border-color:var(--hqh-gold); color:var(--hqh-anh); }
#header.hqh .hqh-vach{ display:inline-flex; flex-direction:column; gap:3px; flex:none; }
#header.hqh .hqh-vach i{
  display:block; width:16px; height:2px; background:currentColor;
  transition:transform .24s, opacity .24s;
}
#header.hqh .hqh-nut-mn[aria-expanded="true"] .hqh-vach i:nth-child(1){ transform:translateY(5px) rotate(45deg); }
#header.hqh .hqh-nut-mn[aria-expanded="true"] .hqh-vach i:nth-child(2){ opacity:0; }
#header.hqh .hqh-nut-mn[aria-expanded="true"] .hqh-vach i:nth-child(3){ transform:translateY(-5px) rotate(-45deg); }

@media(max-width:1200px){
  #header.hqh .hqh-nut-mn{ display:flex; }
  #header.hqh .hqh-thanh{ margin-top:0; border-top:0; background:none; }
  #header.hqh .hqh-thanh-in{ display:block; }
  #header.hqh #nav > ul{ display:none !important; flex-direction:column; }
  #header.hqh #nav > ul.hqh-mo{
    display:flex !important; margin:10px 0 0; padding:6px 16px 12px;
    background:rgba(10,5,2,.97);            /* nền ĐẶC: thiếu là ảnh xuyên qua */
    border:1px solid var(--hqh-vien); border-radius:2px;
    box-shadow:0 18px 44px rgba(0,0,0,.55);
  }
  #header.hqh #nav > ul > li > a{ padding:13px 4px; font-size:.74rem; justify-content:flex-start; }
  #header.hqh #nav > ul > li > a::after{ display:none; }
  #header.hqh #nav > ul > li + li{ border-top:1px solid rgba(201,150,59,.13); }
  #header.hqh .hqh-con{
    position:static; opacity:1; visibility:visible; transform:none;
    min-width:0; border:0; box-shadow:none;
    background:rgba(201,150,59,.05); padding:4px 0 10px; display:none;
  }
  #header.hqh .hqh-con.hqh-rong{ min-width:0; column-count:1; }
  #header.hqh #nav > ul > li.hqh-mo > .hqh-con{ display:block; }
  #header.hqh .hqh-viec{ padding:14px 0 20px; border-top:1px solid var(--hqh-vien); flex-wrap:wrap; }
  .hqh-dinh .hqh-dinh-in{ height:56px; }
  .hqh-dinh .hqh-d-menu{ display:none; }
}
@media(max-width:900px){
  /* bỏ định vị tuyệt đối, nếu không nút VI/EN đè lên chữ giữa */
  #header.hqh .hqh-f-ben{ display:none; }
  #header.hqh .hqh-f-giua{
    position:static; transform:none; white-space:normal;
    font-size:.5rem; letter-spacing:.14em; line-height:1.5;
  }
  #header.hqh .hqh-folio{ gap:14px; }
  #header.hqh .hqh-f-phai{ flex:none; }
}
@media(max-width:640px){
  #header.hqh .hqh-in{ padding:0 18px; }
  .hqh-dinh .hqh-dinh-in{ padding:0 18px; }
  #header.hqh .hqh-mucdich{ margin-top:16px; }
  #header.hqh .hqh-cham{ font-size:.95rem; line-height:1.68; }
  #header.hqh .hqh-md-nhan{ letter-spacing:.26em; }
  #header.hqh .hqh-chao{ font-size:.94rem; }
  #header.hqh #logo .logo-eyebrow{ font-size:.5rem; letter-spacing:.3em; }
}

@media (prefers-reduced-motion: reduce){
  #header.hqh *, #header.hqh *::before, #header.hqh *::after,
  .hqh-dinh, .hqh-dinh *{ transition-duration:.001ms !important; animation-duration:.001ms !important; }
}
#header.hqh :focus-visible, .hqh-dinh :focus-visible{ outline:2px solid var(--hqh-gold,#C9963B); outline-offset:2px; }