/* ==============================================
   HEADER: Reading progress + Topbar + Main nav
   ============================================== */

/* ── Reading progress bar ── */
#reading-progress {
  position: fixed;
  top: calc(var(--topbar-h) + var(--header-h));
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, #7C3AED, #2563EB, #0F766E);
  z-index: var(--z-progress, 1001);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .15s ease-out;
  pointer-events: none;
  box-shadow: 0 0 8px rgba(124,58,237,.6), 0 0 20px rgba(37,99,235,.3);
}
#reading-progress::after {
  content: '';
  position: absolute;
  right: -1px;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #2563EB;
  box-shadow: 0 0 8px rgba(37,99,235,.9), 0 0 16px rgba(124,58,237,.6);
}

/* ── Site header wrapper ── */
#site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header, 1000);
}

/* ── Topbar ── */
.ghit-topbar {
  height: var(--topbar-h);
  background: var(--grad-topbar);
  overflow: hidden;
}
.ghit-topbar__inner {
  height: 100%;
  display: flex;
  align-items: center;
  gap: 20px;
}
.ghit-topbar__links {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-shrink: 0;
}
.ghit-topbar__links li { list-style: none; }
.ghit-topbar__links a {
  font-size: 12px;
  font-weight: 500;
  color: rgba(255,255,255,.82);
  transition: color var(--t-fast);
}
.ghit-topbar__links a:hover { color: #fff; }
.ghit-topbar__tagline {
  flex: 1;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 600;
  color: rgba(255,255,255,.75);
  letter-spacing: .06em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ghit-topbar__online {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  color: rgba(255,255,255,.85);
  white-space: nowrap;
}
.ghit-topbar__online-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #34D399;
  box-shadow: 0 0 6px rgba(52,211,153,.9);
  animation: ghit-online-pulse 1.8s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes ghit-online-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .5; transform: scale(.75); }
}
@media (max-width: 700px) {
  :root { --topbar-h: 60px; }
  .ghit-topbar { height: auto; overflow: visible; padding: 6px 0; }
  .ghit-topbar__inner { flex-wrap: wrap; row-gap: 6px; }

  /* Hàng 1: tagline chiếm trọn chiều ngang, hiện đủ chữ (bỏ ellipsis cắt "..."). */
  .ghit-topbar__tagline {
    order: 1;
    flex: 0 0 100%;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }

  /* Hàng 2: online bên trái, app-link (+ socials nếu còn hiện ở breakpoint này) bên phải. */
  .ghit-topbar__online {
    order: 2;
    flex: 0 1 auto;
    justify-content: flex-start;
    margin-right: auto;
  }
  .ghit-topbar__app-link { order: 3; }
  .ghit-topbar__socials { order: 4; }
}
/* Viền xoay phát sáng — cùng kỹ thuật với .ghit-app-promo (sidebar):
   outer = khung viền (padding nhỏ, overflow hidden), spin = conic-gradient xoay
   tràn viền, inner = nội dung thật với nền đặc che phần giữa. */
.ghit-topbar__app-link {
  position: relative;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  padding: 2px;
  border-radius: 99px;
  overflow: hidden;
  box-shadow: 0 0 14px rgba(251,146,60,.6);
  transition: box-shadow var(--t-fast), transform var(--t-fast);
  animation: ghit-topbar-app-pulse 1.4s ease-in-out infinite;
}
.ghit-topbar__app-link:hover {
  transform: translateY(-1px) scale(1.05);
  box-shadow: 0 0 24px rgba(253,224,71,.95);
}
@keyframes ghit-topbar-app-pulse {
  0%, 100% { box-shadow: 0 0 10px rgba(251,146,60,.5); }
  50%      { box-shadow: 0 0 22px rgba(253,224,71,.9); }
}
@media (prefers-reduced-motion: reduce) {
  .ghit-topbar__app-link { animation: none; }
}
.ghit-topbar__app-link-spin {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 220%;
  height: 500%;
  background: conic-gradient(from 0deg, #FDE047, #F97316, #F43F5E, #EC4899, #FDE047);
  animation: ghit-topbar-app-spin 2s linear infinite;
}
@keyframes ghit-topbar-app-spin {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .ghit-topbar__app-link-spin { animation: none; }
}
.ghit-topbar__app-link-inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 12px;
  border-radius: 99px;
  background: linear-gradient(90deg, #F97316, #EA580C 45%, #DB2777);
  overflow: hidden;
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
  white-space: nowrap;
}
.ghit-topbar__app-link-inner::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.35) 45%, rgba(255,255,255,.35) 50%, transparent 65%);
  background-size: 250% 250%;
  background-position: 200% 0;
  pointer-events: none;
  animation: ghit-topbar-app-shimmer 2s ease-in-out infinite;
}
@keyframes ghit-topbar-app-shimmer {
  0%   { background-position: 200% 0; }
  55%  { background-position: -50% 0; }
  100% { background-position: -50% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .ghit-topbar__app-link-inner::after { animation: none; }
}
.ghit-topbar__app-link-icon {
  position: relative;
  z-index: 1;
  display: inline-block;
  font-size: 12px;
  line-height: 1;
  animation: ghit-topbar-app-icon-wiggle 1.8s ease-in-out infinite;
}
@keyframes ghit-topbar-app-icon-wiggle {
  0%, 100% { transform: rotate(0deg) scale(1); }
  20%      { transform: rotate(-12deg) scale(1.1); }
  40%      { transform: rotate(10deg) scale(1.1); }
  60%      { transform: rotate(0deg) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .ghit-topbar__app-link-icon { animation: none; }
}
.ghit-topbar__app-link-domain {
  position: relative;
  z-index: 1;
  font-family: var(--font-mono);
  font-weight: 800;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0,0,0,.3);
}

.ghit-topbar__socials {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.ghit-topbar__socials-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 27px;
  height: 27px;
  border-radius: 99px;
  color: #fff;
  transition: transform var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
}
.ghit-topbar__socials-btn--fb {
  background: #1877F2;
  box-shadow: 0 0 0 1px rgba(255,255,255,.25) inset, 0 2px 8px rgba(24,119,242,.5);
}
.ghit-topbar__socials-btn--fb:hover {
  background: #2E8CFF;
  box-shadow: 0 0 0 1px rgba(255,255,255,.4) inset, 0 4px 14px rgba(24,119,242,.8);
  transform: translateY(-2px) scale(1.08);
}
.ghit-topbar__socials-btn--yt {
  width: 36px;
  height: 36px;
  filter: drop-shadow(0 2px 6px rgba(255,0,0,.5));
}
.ghit-topbar__socials-btn--yt:hover {
  filter: drop-shadow(0 4px 12px rgba(255,0,0,.85));
  transform: translateY(-2px) scale(1.08);
}

/* ── Main nav ── */
.ghit-mainnav {
  position: relative;
  height: var(--header-h);
  /* Lớp nền ĐẶC (#F8FAFC, không alpha) làm nền chính — gradient tím/xanh chỉ phủ
     nhẹ lên trên. #site-header là sticky nên khi cuộn, nội dung đậm màu phía sau
     (vd banner hero tối) có thể xuyên qua nếu nền trong suốt — nền đặc ở đây
     chặn hẳn hiện tượng đó, dù vẫn giữ được sắc tím/xanh làm điểm nhấn. */
  background:
    linear-gradient(135deg, rgba(124,58,237,.09), rgba(37,99,235,.07)),
    #F8FAFC;
  border-bottom: 1px solid rgba(124,58,237,.16);
  box-shadow: 0 3px 16px rgba(91,33,182,.08);
  transition: box-shadow var(--t-normal);
}
#site-header.scrolled .ghit-mainnav {
  box-shadow: 0 6px 28px rgba(91,33,182,.14);
}
/* Trang trí nền — bỏ quầng sáng blur (gây mờ chóa cả thanh nav như sương mù),
   thay bằng họa tiết chấm bi SẮC NÉT (cùng kỹ thuật ::before của .ghit-series-card)
   + viền trên gradient mảnh, KHÔNG blur — ấn tượng nhưng vẫn rõ ràng, không ảnh
   hưởng độ đọc chữ menu/logo. Tách lớp riêng có overflow:hidden của chính nó để
   không cắt submenu dropdown (submenu cần tràn ra ngoài .ghit-mainnav khi mở). */
.ghit-mainnav__glow {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
/* Viền trên gradient — dày + đậm hơn để thấy rõ ranh giới trên của thanh nav */
.ghit-mainnav__glow::before {
  content: '';
  position: absolute;
  z-index: 2;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, #7C3AED, #2563EB, #0F766E);
}
/* Chấm bi 2 màu — tím bên trái, xanh dương bên phải (khớp tông gradient logo/nav),
   đậm hơn bản trước (.14 -> .24) để thực sự nhìn thấy được thay vì gần như ẩn.
   Dùng 2 span riêng (không phải pseudo-element) vì ::before đã dùng cho viền trên
   và 1 element chỉ có tối đa ::before + ::after — không đủ chỗ cho 2 màu + viền. */
.ghit-mainnav__glow-dots {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 52%;
  background-image: radial-gradient(circle, var(--ghit-dot-color) 1.4px, transparent 1.4px);
  background-size: 22px 22px;
}
.ghit-mainnav__glow-dots--left  { left: 0;  --ghit-dot-color: rgba(124,58,237,.24); }
.ghit-mainnav__glow-dots--right { right: 0; --ghit-dot-color: rgba(37,99,235,.24); }
/* Không dùng viền gradient động ở đây nữa — #reading-progress (đầu file CSS
   này) đã nằm đúng sát mép dưới .ghit-mainnav (top: topbar-h + header-h) và
   cùng tông màu/animation, thêm 1 thanh nữa ở đây sẽ đụng/chồng lên nhau. */
.ghit-mainnav__inner {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 24px;
}

/* ── Logo ── */
.ghit-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  text-decoration: none;
}
/* Viền xoay phát sáng thường trực quanh logo — cùng kỹ thuật dual background-clip
   dùng ở mục nav đang active, để logo luôn là điểm hút mắt nhất của thanh nav. */
@property --ghit-logo-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
.ghit-logo__icon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 2px solid transparent;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background:
    linear-gradient(135deg, #7C3AED, #2563EB) padding-box,
    conic-gradient(from var(--ghit-logo-angle), #FDE047, #F97316, #F43F5E, #EC4899, #FDE047) border-box;
  animation:
    ghit-logo-spin-angle 3s linear infinite,
    ghit-logo-pulse 2.2s ease-in-out infinite;
  transform: scale(1.18) rotate(-4deg); /* mặc định đã to như mức hover cũ */
  transition: transform var(--t-fast), filter var(--t-fast);
}
/* Hover: đổi hiệu ứng — không phóng to thêm nữa (đã to sẵn), mà xoay nhanh vụt
   qua (burst) + sáng bừng lên, tạo cảm giác "kích hoạt" khác hẳn scale đơn thuần. */
.ghit-logo:hover .ghit-logo__icon {
  animation:
    ghit-logo-spin-angle .6s linear infinite,
    ghit-logo-pulse 2.2s ease-in-out infinite;
  filter: brightness(1.25) saturate(1.3);
}
@keyframes ghit-logo-spin-angle {
  to { --ghit-logo-angle: 360deg; }
}
@keyframes ghit-logo-pulse {
  0%, 100% { box-shadow: 0 0 14px rgba(124,58,237,.5); }
  50%      { box-shadow: 0 0 24px rgba(37,99,235,.75); }
}
@media (prefers-reduced-motion: reduce) {
  .ghit-logo__icon { animation: none; }
  .ghit-logo:hover .ghit-logo__icon { animation: none; filter: none; }
}
.ghit-logo__icon img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  transform: scale(1.2); /* mặc định đã zoom như mức hover cũ */
}
/* Vòng sáng mờ dần lặp lại — thay cho hiệu ứng "tráng gương" quét chéo trước
   đây (quá chói). Dịu mắt hơn, cùng tinh thần với dot pulse "đang online". */
.ghit-logo__icon::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: 50%;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.5);
  opacity: 0;
  pointer-events: none;
  animation: ghit-logo-ring-pulse 2.6s ease-in-out infinite;
}
@keyframes ghit-logo-ring-pulse {
  0%, 100% { opacity: 0; }
  50%      { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .ghit-logo__icon::after { animation: none; }
}
.ghit-logo__text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}
.ghit-logo__name {
  font-weight: 800;
  font-size: 16px;
  letter-spacing: -.02em;
  color: var(--text-primary);
}
.ghit-logo__sub {
  font-family: var(--font-mono);
  font-size: 10px;
  color: #64748B; /* đậm hơn var(--text-muted) — nền mainnav giờ có tint, chữ nhạt bị chìm */
  letter-spacing: .04em;
}

/* ── Primary nav ── */
.ghit-nav { flex: 1; }
.ghit-nav__menu {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 6px;
}
.ghit-nav__menu > li { position: relative; }
.ghit-nav__menu > li > a {
  position: relative;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 7px 15px;
  font-size: 14px;
  font-weight: 700;
  color: #334155; /* đậm hơn var(--text-secondary) để nổi rõ trên nền tint mới của mainnav */
  border-radius: 10px;
  border: 2px solid transparent;
  overflow: hidden;
  transition: background var(--t-fast), color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast), border-color var(--t-fast);
  white-space: nowrap;
}
.ghit-nav__icon {
  display: inline-flex;
  flex-shrink: 0;
  transition: transform var(--t-fast);
}
.ghit-nav__menu > li > a:hover .ghit-nav__icon {
  transform: scale(1.12) rotate(-4deg);
}
/* Hover (mục thường): pill gradient đặc + chữ trắng + nhấc nhẹ + glow — táo bạo
   hơn nền tím nhạt phẳng trước đây, đồng bộ phong cách button/card của site. */
.ghit-nav__menu > li > a:hover {
  background: linear-gradient(135deg, #7C3AED, #2563EB);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px -4px rgba(91,33,182,.5);
}
/* Ánh sáng quét chéo khi hover — đồng bộ hiệu ứng shimmer dùng ở app-promo/card. */
.ghit-nav__menu > li > a::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.35) 48%, transparent 66%);
  background-size: 250% 250%;
  background-position: 200% 0;
  opacity: 0;
  pointer-events: none;
}
.ghit-nav__menu > li > a:hover::before {
  opacity: 1;
  animation: ghit-nav-shine .7s ease-out;
}
@keyframes ghit-nav-shine {
  from { background-position: 200% 0; }
  to   { background-position: -50% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .ghit-nav__menu > li > a:hover::before { animation: none; opacity: 0; }
}
/* Mục đang chọn: viền xoay phát sáng (cùng kỹ thuật conic-gradient dùng ở badge
   "Phổ biến" / app.gochocit.com) — luôn hiện, không chỉ khi hover, để biết ngay
   đang ở trang nào. Dùng kỹ thuật "dual background-clip" (border-box + padding-box)
   nên không cần thêm thẻ span nào — chỉ 1 thẻ <a> có sẵn từ wp_nav_menu(). */
@property --ghit-nav-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
.ghit-nav__menu > li.current-menu-item > a,
.ghit-nav__menu > li.current-menu-ancestor > a {
  color: #fff;
  background:
    linear-gradient(135deg, #7C3AED, #2563EB) padding-box,
    conic-gradient(from var(--ghit-nav-angle), #FDE047, #F97316, #F43F5E, #EC4899, #FDE047) border-box;
  box-shadow: 0 6px 18px -4px rgba(91,33,182,.55);
  animation: ghit-nav-spin-angle 2.4s linear infinite;
}
@keyframes ghit-nav-spin-angle {
  to { --ghit-nav-angle: 360deg; }
}
@media (prefers-reduced-motion: reduce) {
  .ghit-nav__menu > li.current-menu-item > a,
  .ghit-nav__menu > li.current-menu-ancestor > a { animation: none; }
}
.ghit-nav__menu > li > a:focus-visible {
  outline: 2px solid var(--color-primary, #6366f1);
  outline-offset: 2px;
}
/* Dropdown caret — xoay mượt khi mở submenu */
.ghit-nav__menu > li.menu-item-has-children > a::after {
  content: '';
  width: 0; height: 0;
  border: 4px solid transparent;
  border-top-color: currentColor;
  margin-top: 2px;
  transition: transform var(--t-fast);
}
.ghit-nav__menu > li.menu-item-has-children:hover > a::after,
.ghit-nav__menu > li.menu-item-has-children:focus-within > a::after {
  transform: rotate(180deg);
}
/* Sub-menu */
.ghit-nav__menu .sub-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 210px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 20px 40px rgba(15,23,42,.12);
  list-style: none;
  margin: 0;
  padding: 6px;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px) scale(.97);
  transform-origin: top left;
  transition: opacity .18s ease, visibility .18s ease, transform .32s cubic-bezier(.34,1.56,.64,1);
  z-index: var(--z-nav-submenu, 200);
}
/* Thanh gradient mảnh trên đầu submenu — đồng bộ thanh accent trên series card */
.ghit-nav__menu .sub-menu::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, #7C3AED, #2563EB, #0F766E);
}
.ghit-nav__menu > li:hover > .sub-menu,
.ghit-nav__menu > li:focus-within > .sub-menu,
.ghit-nav__menu > li.is-submenu-open > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: none;
}
/* Từng dòng trong submenu tự bay vào lệch nhịp (stagger) — chỉ chạy khi submenu
   thật sự mở, tránh hiệu ứng "giật" lúc trang vừa tải. */
.ghit-nav__menu .sub-menu li {
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity .22s ease, transform .22s ease;
}
.ghit-nav__menu > li:hover > .sub-menu li,
.ghit-nav__menu > li:focus-within > .sub-menu li,
.ghit-nav__menu > li.is-submenu-open > .sub-menu li {
  opacity: 1;
  transform: none;
}
.ghit-nav__menu .sub-menu li:nth-child(1)  { transition-delay: .02s; }
.ghit-nav__menu .sub-menu li:nth-child(2)  { transition-delay: .05s; }
.ghit-nav__menu .sub-menu li:nth-child(3)  { transition-delay: .08s; }
.ghit-nav__menu .sub-menu li:nth-child(4)  { transition-delay: .11s; }
.ghit-nav__menu .sub-menu li:nth-child(5)  { transition-delay: .14s; }
.ghit-nav__menu .sub-menu li:nth-child(6)  { transition-delay: .17s; }
.ghit-nav__menu .sub-menu li:nth-child(7)  { transition-delay: .20s; }
.ghit-nav__menu .sub-menu li:nth-child(8)  { transition-delay: .23s; }
.ghit-nav__menu .sub-menu li:nth-child(9)  { transition-delay: .26s; }
.ghit-nav__menu .sub-menu li:nth-child(10) { transition-delay: .29s; }
@media (prefers-reduced-motion: reduce) {
  .ghit-nav__menu .sub-menu li { opacity: 1; transform: none; transition: none; transition-delay: 0s; }
}
.ghit-nav__menu .sub-menu li a {
  display: block;
  padding: 8px 12px;
  font-size: 13.5px;
  color: var(--text-secondary);
  border-radius: 8px;
  border-left: 3px solid transparent;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast), padding-left var(--t-fast);
}
.ghit-nav__menu .sub-menu li a:hover {
  background: rgba(91,33,182,.06);
  color: var(--color-purple);
  border-left-color: var(--color-purple);
  padding-left: 16px;
}

/* ── Nav actions ── */
.ghit-nav-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* Search button */
.ghit-search-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 12px;
  background: rgba(255,255,255,.6);
  border: 1px solid rgba(124,58,237,.18);
  border-radius: 10px;
  font-size: 13px;
  color: #64748B; /* đậm hơn var(--text-muted) — nổi rõ hơn trên nền tint mainnav */
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.ghit-search-btn:hover {
  background: rgba(91,33,182,.06);
  border-color: rgba(91,33,182,.2);
  color: var(--color-purple);
}
.ghit-search-btn kbd {
  font-family: var(--font-mono);
  font-size: 10px;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 5px;
  color: var(--text-muted);
}

/* Google site-search button */
.ghit-gsearch-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: rgba(15,23,42,.04);
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}
.ghit-gsearch-btn:hover {
  background: rgba(66,133,244,.08);
  border-color: rgba(66,133,244,.35);
  transform: translateY(-1px);
}
.ghit-gsearch-btn svg { display: block; }

/* Google site-search modal */
#gsearch-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-search-alt, 2100);
  background: rgba(8,6,26,.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 120px;
  opacity: 0;
  transition: opacity var(--t-normal);
}
#gsearch-overlay[hidden] { display: none; }
#gsearch-overlay.is-open { opacity: 1; }

.ghit-gsearch-modal {
  width: 100%;
  max-width: 480px;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 32px 80px rgba(0,0,0,.35), 0 0 0 1px rgba(0,0,0,.06);
  padding: 22px;
  transform: translateY(-12px) scale(.97);
  opacity: 0;
  transition: transform var(--t-normal), opacity var(--t-normal);
}
#gsearch-overlay.is-open .ghit-gsearch-modal { transform: translateY(0) scale(1); opacity: 1; }

.ghit-gsearch-modal__head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}
.ghit-gsearch-modal__head > svg { flex-shrink: 0; }
.ghit-gsearch-modal__titles { flex: 1; display: flex; flex-direction: column; line-height: 1.25; }
.ghit-gsearch-modal__title { font-size: 15px; font-weight: 700; color: var(--text-primary); }
.ghit-gsearch-modal__sub {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--text-muted);
  margin-top: 1px;
}
.ghit-gsearch-modal__close {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 99px;
  border: none;
  background: var(--bg-subtle);
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--t-fast), color var(--t-fast);
}
.ghit-gsearch-modal__close:hover { background: #e2e8f0; color: var(--text-primary); }

.ghit-gsearch-modal__form {
  display: flex;
  gap: 8px;
}
.ghit-gsearch-modal__input {
  flex: 1;
  height: 44px;
  padding: 0 14px;
  border: 1.5px solid var(--border);
  border-radius: 11px;
  font-size: 14px;
  color: var(--text-primary);
  outline: none;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.ghit-gsearch-modal__input:focus {
  border-color: #4285F4;
  box-shadow: 0 0 0 3px rgba(66,133,244,.15);
}
.ghit-gsearch-modal__submit {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 44px;
  padding: 0 18px;
  border: none;
  border-radius: 11px;
  background: linear-gradient(135deg, #4285F4, #2563EB);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 12px -3px rgba(66,133,244,.5);
  transition: filter var(--t-fast), transform var(--t-fast);
}
.ghit-gsearch-modal__submit:hover { filter: brightness(1.06); transform: translateY(-1px); }
.ghit-gsearch-modal__hint {
  margin: 12px 2px 0;
  font-size: 12px;
  color: var(--text-muted);
}

/* Burger button */
.ghit-burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  padding: 0;
}
.ghit-burger span {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--text-secondary);
  border-radius: 2px;
  transition: transform var(--t-fast), opacity var(--t-fast);
}

/* ── Search overlay ── */
#search-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-search, 2000);
  background: rgba(8,6,26,.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 64px;
  opacity: 0;
  transition: opacity var(--t-normal);
}
#search-overlay[hidden] { display: none; }
#search-overlay.is-open { display: flex; opacity: 1; }

/* White modal card */
.ghit-search-modal {
  width: 100%;
  max-width: 640px;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 32px 80px rgba(0,0,0,.35), 0 0 0 1px rgba(0,0,0,.06);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: calc(100dvh - 96px);
  overflow-y: auto;
}

/* Input row */
.ghit-search-box {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  color: var(--text-muted);
  flex-shrink: 0;
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 1;
}
.ghit-search-box svg { flex-shrink: 0; }
#search-input {
  flex: 1;
  border: none;
  outline: none;
  font-size: 16px;
  font-family: var(--font-body);
  color: var(--text-primary);
  background: transparent;
}
#search-input::placeholder { color: var(--text-muted); }
.ghit-search-box kbd {
  font-family: var(--font-mono);
  font-size: 11px;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 2px 7px;
  flex-shrink: 0;
  color: var(--text-muted);
}

/* Section label */
.ghit-search-section { padding: 16px 20px 4px; }
.ghit-search-section__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 10px;
}

/* Quick access 2×2 grid */
.ghit-search-quick-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding-bottom: 8px;
}
.ghit-search-quick-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--bg-subtle);
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 600;
  transition: background var(--t-fast), color var(--t-fast);
  text-decoration: none;
}
.ghit-search-quick-item:hover { background: rgba(91,33,182,.08); color: var(--color-purple); }
.ghit-search-quick-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #fff;
}

/* Recent searches */
.ghit-search-recent-list {
  list-style: none;
  margin: 0;
  padding: 0 0 8px;
}
.ghit-search-recent-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  color: var(--text-secondary);
  font-size: 14px;
  cursor: pointer;
  border-radius: 8px;
  transition: color var(--t-fast);
}
.ghit-search-recent-item:hover { color: var(--color-purple); }
.ghit-search-recent-item svg { flex-shrink: 0; color: var(--text-muted); }
.ghit-search-recent-del {
  margin-left: auto;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  padding: 2px 4px;
  font-size: 16px;
  line-height: 1;
  opacity: 0;
  transition: opacity var(--t-fast), color var(--t-fast);
}
.ghit-search-recent-item:hover .ghit-search-recent-del { opacity: 1; }
.ghit-search-recent-del:hover { color: #EF4444; }

/* Live results */
#search-results {
  flex: 1;
}
.search-result-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-primary);
  transition: background var(--t-fast);
  text-decoration: none;
}
.search-result-item:hover { background: var(--bg-subtle); }
.search-result-item:last-child { border-bottom: none; }
.search-result-title { font-size: 14px; font-weight: 600; }
.search-result-meta { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.search-no-results, .search-loading { padding: 24px; text-align: center; color: var(--text-muted); font-size: 14px; }
.search-load-more {
  display: block;
  width: 100%;
  padding: 12px;
  background: none;
  border: none;
  border-top: 1px solid var(--border-subtle);
  color: var(--color-purple);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--t-fast);
}
.search-load-more:hover { background: rgba(91,33,182,.05); }
.search-load-more:disabled { color: var(--text-muted); cursor: default; }

/* Google fallback — sticky ở bottom của modal */
#search-google {
  padding: 10px 20px 16px;
  border-top: 1px solid var(--border-subtle);
  position: sticky;
  bottom: 0;
  background: #fff;
}
.ghit-search-google-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px dashed rgba(99,102,241,.35);
  color: var(--text-secondary);
  font-size: 13.5px;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
  text-decoration: none;
}
.ghit-search-google-btn:hover {
  background: rgba(99,102,241,.06);
  border-color: rgba(99,102,241,.6);
  color: var(--color-purple);
}
.ghit-search-google-btn em { font-style: normal; font-weight: 600; color: var(--color-purple); }
.ghit-search-google-btn svg:last-child { margin-left: auto; opacity: .5; }

/* ── Mobile drawer ── */
#drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(8,6,26,.6);
  z-index: var(--z-drawer-overlay, 1400);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t-normal), visibility var(--t-normal);
}
#drawer-overlay.is-visible { opacity: 1; visibility: visible; }

#mobile-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: 300px;
  max-width: 85vw;
  height: 100dvh;
  background: #fff;
  z-index: var(--z-drawer, 1500);
  transform: translateX(100%);
  transition: transform var(--t-slow);
  overflow-y: auto;
  /* Không cho cuộn chain ra trang phía sau khi menu chạm đáy/đỉnh */
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
}
#mobile-drawer.is-open { transform: none; }

.ghit-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  padding-top: calc(18px + env(safe-area-inset-top));
  border-bottom: 1px solid var(--border);
}
.ghit-drawer__head button {
  width: 44px;
  height: 44px;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-secondary);
}
.ghit-drawer__nav { padding: 12px; flex: 1; }
.ghit-drawer__menu {
  list-style: none;
  margin: 0;
  padding: 0;
}
.ghit-drawer__menu > li > a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  border-radius: 8px;
  transition: background var(--t-fast), color var(--t-fast);
}
.ghit-drawer__menu > li > a:hover { background: rgba(91,33,182,.06); color: var(--color-purple); }
/* Mũi tên toggle (chèn qua JS, xem main.js) — đẩy hẳn sang phải bằng margin-left:
   auto (thay vì justify-content:space-between trên cả <a>, vốn kéo icon+chữ giãn
   xa nhau ra giữa) — xoay 90° khi submenu mở */
.ghit-drawer__menu .submenu-arrow {
  display: inline-block;
  margin-left: auto;
  font-size: 20px;
  line-height: 1;
  color: var(--text-muted);
  transition: transform var(--t-fast);
  flex-shrink: 0;
}
/* Submenu: đóng mặc định (chỉ mở khi mục cha được bấm — JS toggle .is-open).
   Dùng max-height (không phải grid-template-rows) vì .sub-menu có nhiều <li>
   con trực tiếp — grid-rows chỉ co giãn đúng khi có 1 wrapper con duy nhất. */
.ghit-drawer__menu .sub-menu {
  list-style: none;
  margin: 0;
  padding: 0 0 0 16px;
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--t-normal);
}
.ghit-drawer__menu .sub-menu.is-open {
  max-height: 600px; /* đủ lớn cho submenu dài nhất hiện có (8 mục) + dư an toàn */
  margin-top: 2px;
}
.ghit-drawer__menu .sub-menu li a {
  display: block;
  padding: 7px 12px;
  font-size: 13.5px;
  color: var(--text-secondary);
  border-radius: 6px;
}
.ghit-drawer__menu .sub-menu li a:hover { color: var(--color-purple); }
@media (prefers-reduced-motion: reduce) {
  .ghit-drawer__menu .sub-menu { transition: none; }
}

/* Menu phụ (Giới thiệu/Liên hệ/Quy định/Lộ trình học) trong drawer — nhỏ/nhạt
   hơn menu chính để phân cấp rõ, tách bằng 1 đường kẻ mảnh phía trên. */
.ghit-drawer__divider {
  height: 1px;
  background: var(--border);
  margin: 14px 12px;
}
.ghit-drawer__menu--secondary > li > a {
  padding: 8px 12px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text-secondary);
}
.ghit-drawer__menu--secondary > li > a:hover {
  background: rgba(91,33,182,.06);
  color: var(--color-purple);
}

/* ── Responsive ── */
@media (max-width: 1024px) {
  /* Ngưỡng 1024px: dưới mức này logo (240px) + menu desktop (~540px) + cụm nút
     search (~145px) + padding không đủ chỗ trên 1 hàng — nút tìm kiếm bị đẩy tràn
     ra ngoài viewport và bị cắt mất (đo thực tế tại 970px). Tablet dùng drawer menu. */
  .ghit-burger { display: flex; }
  .ghit-nav { display: none; }
  /* .ghit-nav (flex:1) bị ẩn nên mất phần tử đẩy — tự đẩy cụm nút sang phải */
  .ghit-nav-actions { margin-left: auto; }
  .ghit-search-btn kbd { display: none; }
  .ghit-topbar__links { display: none; }
  .ghit-topbar__tagline { display: block; }
  /* Mở rộng vùng chạm trên mobile/tablet mà không đổi kích thước hiển thị trên desktop */
  .ghit-gsearch-btn { width: 44px; height: 44px; }
}
@media (max-width: 600px) {
  /* Logo đầy đủ (icon + tên + phụ đề, ~240px) + cụm 3 nút (~147px) không đủ chỗ
     trên màn hình hẹp — nút hamburger bị đẩy văng ra ngoài viewport (đo tại 375px).
     Ẩn phụ đề, giữ icon + tên là pattern logo mobile chuẩn. */
  .ghit-logo__sub { display: none; }
}
@media (max-width: 480px) {
  .ghit-topbar__socials { display: none; }
  /* app-link CỐ Ý giữ hiển thị mọi màn hình (kể cả mobile nhỏ) theo yêu cầu —
     topbar chuyển flex-wrap ở breakpoint 700px nên app-link tự xuống dòng an toàn,
     không tràn ngang dù đã ẩn socials để đỡ chật hàng chính. */
}
@media (max-width: 359px) {
  /* Màn hình rất hẹp (320px): vẫn thiếu ~16px cho đủ 3 nút — ẩn nút Google search
     (tính năng phụ, nút tìm kiếm chính vẫn còn) để hamburger không bị cắt. */
  .ghit-gsearch-btn { display: none; }
}