/* ═══════════════════════════════════════════════════════════════════════════
   public/assets/css/guest-shell.css — MẶT TIỀN NAVS (khách chưa đăng nhập), đợt 1 · 23/09/2026.
   Thanh trên + ngăn kéo điện thoại + chân trang, cùng ngôn ngữ với App học v3 (teal chồng lớp, nền sáng)
   để khách đăng ký xong bước vào app không thấy hụt. Mọi màu dẫn xuất từ design-tokens.css — KHÔNG hex cứng.
   Chỉ nạp cho KHÁCH (templates/guest_nav.php). Người đã đăng nhập dùng learn-shell.css.
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
  --gs-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --gs-bg:      color-mix(in srgb, var(--color-primary) 4%, var(--color-bg));
  --gs-surface: var(--color-surface);
  --gs-sunken:  color-mix(in srgb, var(--color-primary) 4%, var(--color-soft));
  --gs-tint:    color-mix(in srgb, var(--color-primary) 7%, var(--color-surface));
  --gs-wash:    color-mix(in srgb, var(--color-primary) 10%, var(--color-surface));
  --gs-border:  color-mix(in srgb, var(--color-primary-deep) 9%, var(--color-border));
  --gs-hair:    color-mix(in srgb, var(--color-primary-deep) 5%, color-mix(in srgb, var(--color-border) 55%, var(--color-line)));
  --gs-ink:     var(--color-ink);
  --gs-text:    var(--color-secondary-text);
  --gs-muted:   color-mix(in srgb, var(--color-muted) 84%, var(--color-ink));
  --gs-brand:        var(--color-primary);
  --gs-brand-strong: var(--color-primary-hover);
  --gs-brand-fg:     color-mix(in srgb, var(--color-primary-hover) 60%, var(--color-primary-deep));
  --gs-brand-deep:   var(--color-primary-deep);
  --gs-on:      var(--color-on-dark);
  --gs-deep-ink: color-mix(in srgb, var(--color-primary-hover) 26%, black);
  --gs-shade:   color-mix(in srgb, var(--color-primary-deep) 55%, black);
  --gs-sh-1: 0 1px 2px color-mix(in srgb, var(--gs-shade) 8%, transparent);
  --gs-sh-2: 0 1px 2px color-mix(in srgb, var(--gs-shade) 9%, transparent), 0 10px 24px -14px color-mix(in srgb, var(--gs-shade) 30%, transparent);
  --gs-focus: 0 0 0 3px color-mix(in srgb, var(--color-primary) 32%, transparent);
  --gs-ease: cubic-bezier(.4, 0, .2, 1);
  --gs-dur: 180ms;
  --gs-top-h: 68px;
  --gs-r: 16px;
}

/* Chữ: app.css đặt --hsk-font-body theo cài đặt giao diện và ĐÈ mất Inter ⇒ phần khách chạy font hệ thống
   (đo 23/09: gần như mọi trang khách hiện -apple-system). Cầu chữ ở đây trả lại đúng font thương hiệu. */
body.gs3 {
  --hsk-font: var(--gs-font);
  --hsk-font-body: var(--gs-font);
  --hsk-font-heading: var(--gs-font);
  --font-sans: var(--gs-font);
  --bs-body-font-family: var(--gs-font);
  font-family: var(--gs-font);
  -webkit-font-smoothing: antialiased;
}
body.gs3 :where(code, kbd, samp, pre) { font-family: var(--gs-font); }
.gs-i { flex: none; display: block; }

/* ═══ THANH TRÊN ═══ */
#hsk-navbar.gs-top {
  position: fixed; top: var(--gs-vv-top, 0px); left: 0; right: 0; z-index: 1000;
  height: var(--gs-top-h); display: flex; align-items: center; gap: 18px; padding: 0 24px;
  background: var(--gs-surface); border-bottom: 1px solid var(--gs-hair); color: var(--gs-ink);
  font-family: var(--gs-font);
  transition: box-shadow var(--gs-dur) var(--gs-ease), transform .24s var(--gs-ease);
}
#hsk-navbar.gs-top.is-scrolled { box-shadow: 0 1px 0 var(--gs-hair), 0 8px 20px -18px color-mix(in srgb, var(--gs-shade) 40%, transparent); }
.gs-brand { display: flex; align-items: center; flex: none; }
.gs-brand img { height: 42px; width: auto; max-width: 190px; object-fit: contain; display: block; }

.gs-nav { display: flex; align-items: center; gap: 2px; min-width: 0; }
.gs-nav__it {
  display: inline-flex; align-items: center; height: 40px; padding: 0 13px; border-radius: 11px;
  font-size: 15px; font-weight: 550; color: var(--gs-text); text-decoration: none; white-space: nowrap;
  transition: background var(--gs-dur) var(--gs-ease), color var(--gs-dur) var(--gs-ease);
}
.gs-nav__it:hover { background: var(--gs-sunken); color: var(--gs-ink); text-decoration: none; }
.gs-nav__it.is-on { background: var(--gs-wash); color: var(--gs-brand-deep); font-weight: 650; }
.gs-nav__it:focus-visible { outline: none; box-shadow: var(--gs-focus); }

.gs-act { display: flex; align-items: center; gap: 8px; margin-left: auto; flex: none; }
.gs-search {
  display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; border-radius: 11px;
  border: 1px solid var(--gs-hair); background: var(--gs-sunken); color: var(--gs-muted);
  font: 500 14px var(--gs-font); cursor: pointer; max-width: 230px;
}
.gs-search:hover { background: var(--gs-tint); color: var(--gs-text); }
.gs-search > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gs-kbd { display: flex; gap: 3px; margin-left: 4px; }
.gs-kbd kbd { min-width: 18px; height: 19px; padding: 0 4px; border-radius: 5px; background: var(--gs-surface); border: 1px solid var(--gs-hair);
  font: 600 11px/19px var(--gs-font); color: var(--gs-muted); text-align: center; }
.gs-icbtn {
  position: relative; height: 40px; min-width: 40px; padding: 0 9px; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border-radius: 11px; border: 1px solid var(--gs-hair); background: var(--gs-surface); color: var(--gs-text); cursor: pointer; text-decoration: none;
  transition: background var(--gs-dur) var(--gs-ease), color var(--gs-dur) var(--gs-ease), border-color var(--gs-dur) var(--gs-ease);
}
.gs-icbtn:hover { background: var(--gs-sunken); color: var(--gs-ink); text-decoration: none; }
.gs-icbtn:focus-visible { outline: none; box-shadow: var(--gs-focus); }
.gs-badge {
  position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
  font: 700 11px/18px var(--gs-font); text-align: center; color: var(--gs-on); background: var(--gs-brand-strong);
  box-shadow: 0 0 0 2px var(--gs-surface);
}
.gs-lang { display: flex; padding: 3px; gap: 2px; border-radius: 11px; border: 1px solid var(--gs-hair); background: var(--gs-sunken); margin: 0; }
.gs-lang button { border: 0; background: transparent; height: 30px; min-width: 34px; padding: 0 8px; border-radius: 8px;
  font: 650 12.5px var(--gs-font); color: var(--gs-muted); cursor: pointer; }
.gs-lang button.is-on { background: var(--gs-surface); color: var(--gs-brand-deep); box-shadow: var(--gs-sh-1); cursor: default; }

.gs-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 46px; padding: 0 20px; border-radius: 12px;
  border: 1px solid transparent; font: 700 14.5px var(--gs-font); white-space: nowrap; cursor: pointer; text-decoration: none;
  transition: background var(--gs-dur) var(--gs-ease), color var(--gs-dur) var(--gs-ease), border-color var(--gs-dur) var(--gs-ease);
}
.gs-btn--primary { background: var(--gs-brand-strong); color: var(--gs-on); box-shadow: var(--gs-sh-1); }
.gs-btn--primary:hover { background: color-mix(in srgb, var(--color-primary-hover) 82%, black); color: var(--gs-on); text-decoration: none; }
.gs-btn--ghost { background: transparent; color: var(--gs-ink); }
.gs-btn--ghost:hover { background: var(--gs-sunken); color: var(--gs-ink); text-decoration: none; }
.gs-btn--outline { background: var(--gs-surface); color: var(--gs-ink); border-color: var(--gs-border); }
.gs-btn--outline:hover { background: var(--gs-tint); color: var(--gs-ink); text-decoration: none; }
.gs-btn--block { width: 100%; }
.gs-btn:focus-visible { outline: none; box-shadow: var(--gs-focus); }

.gs-cta-s { display: none; }   /* máy hẹp mới rút gọn nhãn nút — xem khối 480px bên dưới */
.gs-search-m { display: none; }   /* máy tính dùng ô tìm kiếm dài; nút kính lúp chỉ cho điện thoại */
.gs-burger { display: none; width: 42px; height: 42px; flex: none; border-radius: 12px; border: 1px solid var(--gs-hair);
  background: var(--gs-surface); color: var(--gs-ink); cursor: pointer; place-items: center; }
.gs-burger:hover { background: var(--gs-sunken); }

/* Lề trên cho nội dung trang (navbar cố định) — header.php cũng tự tính, đây là lưới an toàn khi JS chưa chạy */
body.gs3 { padding-top: var(--gs-top-h); background-color: var(--gs-bg); }

/* ═══ NGĂN KÉO ĐIỆN THOẠI ═══ */
.gs-drawer { position: fixed; inset: 0; z-index: 1200; display: none; }
.gs-drawer[hidden] { display: none !important; }
.gs-drawer.is-open { display: block; }
.gs-drawer__scrim { position: absolute; inset: 0; background: color-mix(in srgb, var(--gs-shade) 45%, transparent); animation: gsFade .2s var(--gs-ease); }
.gs-drawer__panel {
  position: absolute; top: 0; bottom: 0; left: 0; width: min(88vw, 340px); display: flex; flex-direction: column; gap: 6px;
  padding: calc(14px + env(safe-area-inset-top, 0px)) 14px calc(18px + env(safe-area-inset-bottom, 0px));
  background: var(--gs-surface); box-shadow: var(--gs-sh-2); overflow-y: auto; animation: gsSlide .24s var(--gs-ease);
}
@keyframes gsFade { from { opacity: 0 } }
@keyframes gsSlide { from { transform: translateX(-100%) } }
.gs-drawer__head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.gs-drawer__head img { height: 38px; width: auto; max-width: 170px; object-fit: contain; }
.gs-drawer__x { margin-left: auto; width: 38px; height: 38px; flex: none; border-radius: 11px; display: grid; place-items: center;
  border: 1px solid var(--gs-hair); background: var(--gs-surface); color: var(--gs-muted); cursor: pointer; }
.gs-drawer__x:hover { color: var(--gs-ink); background: var(--gs-sunken); }
.gs-drawer__it {
  display: flex; align-items: center; gap: 12px; height: 48px; padding: 0 12px; border-radius: 12px;
  font-size: 15.5px; font-weight: 550; color: var(--gs-text); text-decoration: none;
}
.gs-drawer__it:hover { background: var(--gs-sunken); color: var(--gs-ink); text-decoration: none; }
.gs-drawer__it.is-on { background: var(--gs-wash); color: var(--gs-brand-deep); font-weight: 650; }
.gs-drawer__grp { margin: 14px 12px 4px; font-size: 13px; font-weight: 650; color: var(--gs-muted); }
.gs-drawer__foot { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--gs-hair); display: grid; gap: 8px; }
.gs-drawer__foot .gs-btn { height: 48px; }
.gs-drawer__foot .gs-lang { justify-self: center; }

/* ═══ CHÂN TRANG ═══ */
.gs-foot { background: var(--gs-surface); border-top: 1px solid var(--gs-hair); color: var(--gs-text); font-family: var(--gs-font); }
.gs-foot__in { max-width: 1180px; margin: 0 auto; padding: 44px 24px 28px; display: grid; gap: 30px; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); }
.gs-foot__brand { display: grid; gap: 12px; align-content: start; }
.gs-foot__brand img { height: 42px; width: auto; max-width: 190px; object-fit: contain; }
.gs-foot__brand p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--gs-muted); max-width: 38ch; }
.gs-foot__col { display: grid; gap: 9px; align-content: start; }
.gs-foot__col h3 { margin: 0 0 2px; font-size: 14.5px; font-weight: 700; color: var(--gs-ink); }
.gs-foot__col a { font-size: 14px; color: var(--gs-text); text-decoration: none; }
.gs-foot__col a:hover { color: var(--gs-brand-deep); text-decoration: none; }
.gs-foot__soc { display: flex; flex-wrap: wrap; gap: 8px; }
.gs-foot__soc a { display: inline-flex; align-items: center; height: 34px; padding: 0 12px; border-radius: 10px;
  border: 1px solid var(--gs-hair); background: var(--gs-sunken); color: var(--gs-text); font-size: 13px; font-weight: 600; text-decoration: none; }
.gs-foot__soc a:hover { background: var(--gs-wash); color: var(--gs-brand-deep); }
.gs-foot__news { display: grid; gap: 8px; margin-top: 4px; max-width: 420px; }
.gs-foot__news label { font-size: 13.5px; color: var(--gs-muted); }
.gs-foot__news-row { display: flex; gap: 8px; }
.gs-foot__news-row input {
  flex: 1; min-width: 0; height: 46px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--gs-border);
  background: var(--gs-surface); color: var(--gs-ink); font: 500 14.5px var(--gs-font);
}
.gs-foot__news-row input:focus { outline: none; border-color: color-mix(in srgb, var(--color-primary) 45%, var(--gs-border)); box-shadow: var(--gs-focus); }
.gs-foot__news-row .gs-btn { flex: none; }
.gs-foot__news-msg { display: none; font-size: 13.5px; font-weight: 600; color: var(--gs-brand-deep); }
.gs-foot__news-msg.show { display: block; }
.gs-foot__bar { border-top: 1px solid var(--gs-hair); }
.gs-foot__bar div { max-width: 1180px; margin: 0 auto; padding: 16px 24px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px;
  font-size: 13px; color: var(--gs-muted); }
.gs-foot__bar a { color: var(--gs-muted); text-decoration: none; }
.gs-foot__bar a:hover { color: var(--gs-brand-deep); }
.gs-foot__bar .gs-foot__legal { margin-left: auto; display: flex; flex-wrap: wrap; gap: 8px 16px; }

/* ═══ ĐIỆN THOẠI / MÁY TÍNH BẢNG ═══ */
@media (max-width: 1023px) {
  :root { --gs-top-h: 58px; }
  #hsk-navbar.gs-top { gap: 10px; padding: 0 12px; height: calc(var(--gs-top-h) + env(safe-area-inset-top, 0px)); padding-top: env(safe-area-inset-top, 0px); }
  body.gs3 { padding-top: calc(var(--gs-top-h) + env(safe-area-inset-top, 0px)); }
  .gs-burger { display: grid; }
  .gs-search-m { display: inline-flex; }
  .gs-nav, .gs-search, .gs-lang, .gs-login { display: none; }
  .gs-brand img { height: 34px; max-width: 150px; }
  .gs-act { gap: 6px; }
  .gs-icbtn { height: 38px; min-width: 38px; border-radius: 11px; }
  /* Nút chính LUÔN thấy trên điện thoại: trước đây nằm trong menu ẩn nên khách phải mò mới thấy lối đăng ký */
  .gs-act .gs-btn { height: 40px; padding: 0 14px; font-size: 13.5px; border-radius: 11px; }
  body.gs-top-hidden #hsk-navbar.gs-top { transform: translateY(-100%); }
  .gs-foot__in { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; padding: 34px 18px 24px; }
  .gs-foot__brand { grid-column: 1 / -1; }
  .gs-foot__bar div { padding: 14px 18px; }
  .gs-foot__bar .gs-foot__legal { margin-left: 0; width: 100%; }
}
@media (max-width: 480px) {
  /* Đủ thứ cùng nằm trên thanh hẹp (ba gạch, logo, tìm kiếm, giỏ, nút chính) ⇒ rút nhãn nút chính,
     kẻo nút bị đẩy lọt khỏi mép phải — thanh cố định nên trang KHÔNG tràn ngang, lỗi này đo không ra. */
  .gs-cta-l { display: none; }
  .gs-cta-s { display: inline; }
  .gs-brand { min-width: 0; }
}
@media (max-width: 420px) {
  .gs-brand img { height: 30px; max-width: 108px; }
  .gs-act .gs-btn { padding: 0 11px; }
  .gs-foot__in { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  #hsk-navbar.gs-top, .gs-drawer__panel, .gs-drawer__scrim { transition: none; animation: none; }
}
@media print { #hsk-navbar.gs-top, .gs-drawer, .gs-foot { display: none !important; } body.gs3 { padding-top: 0; } }