/* mobile.css — bản điện thoại AI@Work, 390×844.
   Nạp sau tokens.css. Cấm mã màu thô — dùng var(--...). */

/* ── Reset & Base ────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  background: var(--nen);
  color: var(--chu);
  font-family: var(--phong);
  font-size: var(--co-van);
  line-height: var(--dong-van);
  padding-bottom: 80px; /* chừa chỗ cho nút dính đáy (CTA 77px + lề 3px) */
  overflow-x: hidden;
  max-width: 100%;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--vang); text-decoration: none; }
:focus-visible, a:focus, button:focus, select:focus, input:focus {
  outline: 2px solid var(--vang);
  outline-offset: 3px;
}

/* ── Biến mobile ghi đè tokens ───────────────────────────── */
:root {
  --co-hero-m: 34px;   --dong-hero-m: 44px;
  --co-khoi-m: 26px;   --dong-khoi-m: 36px;
  --co-the-m:  19px;
  --co-van-m:  16px;
  --cach-khoi-m: 72px;
  --le-m: 24px;
}

/* Bản điện thoại có thanh dính ở CẢ HAI đầu: nav 56px trên, khối kêu gọi 77px dưới.
   Bấm liên kết mục lục mà không khai hai số này thì chữ tới nơi bị che —
   đo được 11 lần trên bản 390px, có chỗ che 100% chiều cao dòng.
   Cộng thêm 20px để chữ không dán sát mép thanh. */
html {
  scroll-padding-top: 76px;
  scroll-padding-bottom: 97px;
  scroll-behavior: smooth;
}

/* ── Thanh điều hướng ────────────────────────────────────── */
.nav-m {
  position: sticky; top: 0; z-index: 200;
  background: var(--nen-phu);
  border-bottom: 1px solid var(--vien);
  display: flex; align-items: center;
  justify-content: space-between;
  padding: 0 var(--le-m);
  height: 56px;
}
.nav-m__logo { height: 32px; width: auto; }
.nav-m__logo-link { display: flex; align-items: center; min-height: 44px; }
.nav-m__burger {
  width: 44px; height: 44px;
  background: none; border: none; cursor: pointer;
  display: flex; flex-direction: column; justify-content: center; gap: 5px;
  padding: 0 4px;
}
.nav-m__burger span {
  display: block; height: 2px; width: 100%;
  background: var(--chu); border-radius: 2px;
  transition: transform var(--nhanh), opacity var(--nhanh);
}

/* ── Ngăn trượt ──────────────────────────────────────────── */
.drawer {
  position: fixed; inset: 0 0 0 auto;
  width: min(300px, 85vw);
  background: var(--nen-phu);
  border-left: 1px solid var(--vien);
  transform: translateX(100%);
  transition: transform 300ms ease;
  z-index: 300; overflow-y: auto;
  padding: 24px var(--le-m);
  display: flex; flex-direction: column; gap: 8px;
}
.drawer[aria-hidden="false"] { transform: translateX(0); }
.drawer__close {
  align-self: flex-end;
  width: 44px; height: 44px;
  background: none; border: none; cursor: pointer;
  color: var(--chu); font-size: 24px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
}
.drawer__nav a {
  display: block;
  padding: 12px 0;
  font-size: 18px; color: var(--chu);
  border-bottom: 1px solid var(--vien);
  min-height: 44px; display: flex; align-items: center;
}
/* Tab ngôn ngữ trong ngăn */
.drawer__lang { margin-top: 16px; display: flex; flex-direction: column; gap: 4px; }
.drawer__lang-btn {
  min-height: 44px; padding: 0 16px;
  background: var(--nen); border: 1px solid var(--vien);
  color: var(--chu); font-size: 15px; cursor: pointer;
  border-radius: 8px; text-align: left;
  display: flex; align-items: center; justify-content: space-between;
}
.drawer__lang-btn[aria-current="page"] {
  border-color: var(--vang); color: var(--vang);
}
.drawer__lang-btn[aria-disabled="true"] {
  color: var(--chu-phu); cursor: not-allowed;
}
.drawer__lang-note { font-size: 13px; color: var(--chu-phu); padding: 4px 0 0; }
.drawer-overlay {
  display: none; position: fixed; inset: 0;
  background: var(--nen); opacity: .55; z-index: 290;
}
.drawer-overlay.active { display: block; }
.link-inline { color: var(--vang); text-decoration: underline; cursor: default; }

/* Ngăn menu khi ĐÓNG phải ẩn khỏi luồng bàn phím.
   Bẫy đã trả giá: chỉ đẩy ra ngoài màn bằng `translateX(100%)` thì ngăn vẫn còn
   trong luồng — người dùng bàn phím nhấn Tab sẽ rơi vào 10 phần tử NẰM NGOÀI MÀN
   HÌNH, không thấy gì mà tiêu điểm vẫn đi qua. Đó là bẫy tiêu điểm, không phải
   chỉ bất tiện: họ không có cách nào thoát ra ngoài trừ nhấn Tab hết 10 lần. */
[aria-hidden="true"] { visibility: hidden; }
[aria-hidden="true"] a, [aria-hidden="true"] button { pointer-events: none; }