/* ==========================================================================
   H.A.C STUDIO – GRILLZ HANOI
   base.css — Biến thiết kế, theme, reset, typography, header/nav, layout chung.
   Không dùng thư viện ngoài.
   ========================================================================== */

/* --- 0. FONT TIẾNG VIỆT (nạp cục bộ, không phụ thuộc mạng) ----------------
   Toàn bộ website dùng font SANS-SERIF.
   File bên dưới là subset 'vietnamese' của Inter (variable font, weight 400–800).
   unicode-range giới hạn font này chỉ dùng cho ký tự tiếng Việt; phần chữ
   Latin còn lại rơi về font hệ thống -> nhẹ hơn và luôn hiển thị đúng.
   Bản Inter mặc định trên Google Fonts KHÔNG có glyph dấu tiếng Việt -> chữ
   bị rơi dấu, nên bắt buộc phải dùng subset 'vietnamese' như file này. */
@font-face{
  font-family:"Inter";
  font-style:normal;
  font-weight:400 800;
  font-display:swap;
  src:url("../fonts/inter-vietnamese.woff2") format("woff2");
  unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}

/* --- 1. BIẾN THIẾT KẾ (giữ nguyên bảng màu gốc) ------------------------- */
:root{
  --bg:#faf8f7;--bg2:#f1ebea;--tx:#140d0d;--mut:#6e6262;--gold:#a8111b;--card:#fff;--bd:#e6dcdc;--on:#fff;
  /* Token dẫn xuất – không thay đổi màu gốc, chỉ tinh chỉnh chúng */
  --sh-c:#140d0d;                      /* màu bóng đổ bóng (đổi theo theme) */
  --gold-soft:color-mix(in srgb,var(--gold) 10%,var(--bg));
  --gold-line:color-mix(in srgb,var(--gold) 28%,transparent);
  --sh-1:0 1px 2px color-mix(in srgb,var(--sh-c) 6%,transparent),0 4px 14px color-mix(in srgb,var(--sh-c) 7%,transparent);
  --sh-2:0 2px 6px color-mix(in srgb,var(--sh-c) 7%,transparent),0 16px 40px color-mix(in srgb,var(--sh-c) 11%,transparent);
  --sh-3:0 30px 90px color-mix(in srgb,var(--sh-c) 26%,transparent);
  --r-xs:8px;--r-sm:12px;--r-md:16px;--r-lg:22px;--r-xl:30px;
  --sp-1:6px;--sp-2:10px;--sp-3:14px;--sp-4:18px;--sp-5:26px;--sp-6:38px;--sp-7:58px;--sp-8:84px;
  /* Toàn bộ website dùng font SANS-SERIF.
     Inter (subset tiếng Việt, nạp cục bộ) cho tiêu đề; system-ui/Segoe UI cho
     nội dung. Tất cả đều có đủ dấu tiếng Việt. */
  --ff-display:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --ff-body:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --ff-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --dur:.3s;--dur-s:.18s;--ease:cubic-bezier(.22,.61,.36,1);--ease-out:cubic-bezier(.16,1,.3,1);
  --gutter:18px;--header-h:60px;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media(prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0a0909;--bg2:#161111;--tx:#f5f0f0;--mut:#a89c9c;--gold:#e0323d;--card:#141010;--bd:#2e2323;--on:#fff;--sh-c:#000;
  }
}
:root[data-theme="dark"]{
  --bg:#0a0909;--bg2:#161111;--tx:#f5f0f0;--mut:#a89c9c;--gold:#e0323d;--card:#141010;--bd:#2e2323;--on:#fff;--sh-c:#000;
}

/* --- 2. RESET / BASE ---------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-padding-top:calc(var(--header-h) + env(safe-area-inset-top,0px) + 12px);scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--tx);
  font:16px/1.62 var(--ff-body);
  letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  transition:background-color var(--dur) var(--ease),color var(--dur) var(--ease);
}
/* Nút & nhãn có dấu tiếng Việt: cần line-height rộng để dấu không bị cắt */
.btn,nav button,.lang button,.badges b{line-height:1.4}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);background:var(--bg);z-index:60}
img{max-width:100%;display:block}
/* line-height rộng hơn để dấu tiếng Việt (ề ắ ặ ữ ợ) không tràn ô dòng */
h1,h2,h3,h4{font-family:var(--ff-display);font-weight:700;line-height:1.34}
button,input,select,textarea{font-family:inherit}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:6px}
::selection{background:var(--gold);color:var(--on)}
[hidden]{display:none !important}

/* --- 3. HEADER / NAV ---------------------------------------------------- */
header{
  position:sticky;top:env(safe-area-inset-top,0px);z-index:50;
  height:var(--header-h);display:flex;justify-content:space-between;align-items:center;gap:var(--sp-3);
  padding:0 var(--gutter);
  background:color-mix(in srgb,var(--bg) 82%,transparent);
  backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);
  border-bottom:1px solid var(--bd);
  transition:background-color var(--dur) var(--ease),border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
}
header.scrolled{box-shadow:0 6px 24px color-mix(in srgb,var(--sh-c) 9%,transparent)}
.logo{
  font-family:var(--ff-display);font-weight:700;letter-spacing:.2em;color:var(--gold);
  font-size:19px;white-space:nowrap;
}
.lang{display:flex;border:1px solid var(--gold);border-radius:99px;overflow:hidden;flex:none}
.lang button{
  background:none;border:0;color:var(--gold);padding:7px 13px;font-weight:700;font-size:13px;letter-spacing:.06em;
  cursor:pointer;transition:background-color var(--dur-s) var(--ease),color var(--dur-s) var(--ease);
}
.lang button:hover:not(.on){background:var(--gold-soft)}
.lang button.on{background:var(--gold);color:var(--on)}
.lang button:active{transform:scale(.96)}

/* Nhóm bên phải header + nút đổi theme sáng/tối */
.head-right{display:flex;align-items:center;gap:10px;flex:none}
.theme-toggle{
  width:38px;height:38px;border-radius:50%;flex:none;
  display:grid;place-items:center;cursor:pointer;
  background:none;border:1px solid var(--bd);color:var(--mut);
  transition:color var(--dur-s) var(--ease),border-color var(--dur-s) var(--ease),background-color var(--dur-s) var(--ease),transform var(--dur-s) var(--ease);
}
.theme-toggle:hover{color:var(--gold);border-color:var(--gold-line);background:var(--gold-soft)}
.theme-toggle:active{transform:scale(.92)}
.theme-toggle svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.theme-toggle .ic-moon{display:none}
/* Khi theme tối đang được chọn → hiện mặt trăng, ẩn mặt trời */
:root[data-theme="dark"] .theme-toggle .ic-sun{display:none}
:root[data-theme="dark"] .theme-toggle .ic-moon{display:block}
/* Khi hệ điều hành ở chế độ tối (chưa chọn theme thủ công) → hiện mặt trăng */
@media(prefers-color-scheme:dark){
  :root:not([data-theme="light"]):not([data-theme="dark"]) .theme-toggle .ic-sun{display:none}
  :root:not([data-theme="light"]):not([data-theme="dark"]) .theme-toggle .ic-moon{display:block}
}
header .logo{text-decoration:none}

nav{
  position:sticky;top:calc(var(--header-h) + env(safe-area-inset-top,0px));z-index:49;
  display:flex;gap:6px;overflow-x:auto;padding:8px var(--gutter);
  background:color-mix(in srgb,var(--bg) 88%,transparent);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--bd);
  scrollbar-width:none;-ms-overflow-style:none;
  scroll-snap-type:x proximity;
}
nav::-webkit-scrollbar{display:none}
nav button{
  flex:none;background:none;border:1px solid var(--bd);color:var(--mut);border-radius:99px;padding:7px 15px;
  font:inherit;font-size:14px;cursor:pointer;white-space:nowrap;scroll-snap-align:center;
  transition:color var(--dur-s) var(--ease),background-color var(--dur-s) var(--ease),border-color var(--dur-s) var(--ease),transform var(--dur-s) var(--ease);
}
nav button:hover{color:var(--gold);border-color:var(--gold-line);transform:translateY(-1px)}
nav button.on{background:var(--gold);border-color:var(--gold);color:var(--on);font-weight:700}
/* Liên kết dạng trang (multi-page) – dùng chung style với nav button */
nav a{
  flex:none;background:none;border:1px solid var(--bd);color:var(--mut);border-radius:99px;padding:7px 15px;
  font-size:14px;cursor:pointer;white-space:nowrap;scroll-snap-align:center;text-decoration:none;
  transition:color var(--dur-s) var(--ease),background-color var(--dur-s) var(--ease),border-color var(--dur-s) var(--ease),transform var(--dur-s) var(--ease);
}
nav a:hover{color:var(--gold);border-color:var(--gold-line);transform:translateY(-1px)}
nav a.on{background:var(--gold);border-color:var(--gold);color:var(--on);font-weight:700}

/* --- 4. LAYOUT CHUNG ---------------------------------------------------- */
main{max-width:760px;margin:0 auto;padding:0 var(--gutter) var(--sp-8)}
.pg{display:none}.pg.on{display:block;animation:pgIn .42s var(--ease-out) both}
@keyframes pgIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
section{scroll-margin-top:calc(var(--header-h) + 64px)}

/* Tiêu đề section – style thống nhất */
h2{
  display:flex;align-items:center;gap:var(--sp-3);
  font-family:var(--ff-body);font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);
  margin:var(--sp-7) 0 var(--sp-4);font-weight:800;
}
h2::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--gold-line),transparent)}

/* --- 5. FOOTER ---------------------------------------------------------- */
footer{
  border-top:1px solid var(--bd);padding:var(--sp-6) var(--gutter);
  text-align:center;color:var(--mut);font-size:14px;
  padding-bottom:calc(var(--sp-6) + env(safe-area-inset-bottom,0px));
}
footer b{color:var(--tx);font-family:var(--ff-display);font-size:16px;font-weight:700}
footer a{color:inherit;text-decoration:none;transition:color var(--dur-s) var(--ease)}
footer a:hover{color:var(--gold)}
a{color:var(--gold);text-decoration-thickness:1px;text-underline-offset:3px}

/* --- 6. REVEAL KHI SCROLL ----------------------------------------------- */
.rv{opacity:0;transform:translateY(18px);transition:opacity .6s var(--ease-out),transform .6s var(--ease-out)}
.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
  .rv{opacity:1;transform:none}
  .slide-bg{transform:none !important}
}