/* =========================================================================
   base.css — RESET + THE CHU + PHAN TU CO BAN
   Chi dat o day nhung gi ap cho CA TRANG. Cai gi rieng cua mot khoi thi
   nam o file CSS cua khoi do.
   ========================================================================= */

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* Nav dinh o tren che mat tieu de khi nhay bang #anchor -> chua san le. */
  scroll-padding-top: calc(var(--nav-h) + 16px);
  -webkit-text-size-adjust: 100%;
}

/* overflow-x: clip chu KHONG phai hidden.
   hidden tren <body> bien no thanh khung cuon rieng, lam hong position:sticky
   ben trong (muc luc tai lieu, dong tieu de bang). clip chan tran ngang ma
   khong tao khung cuon.
   Dat tren CA <html> lan <body>: chi dat mot cai thi trinh duyet van sinh
   thanh cuon ngang o cai con lai. */
html, body { overflow-x: clip; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--text);
  background: var(--surface);
  /* Doi giao dien: khong cho no "nhay" mau dot ngot. */
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

/* Khoa cuon nen khi mo lightbox / menu dien thoai. Bu lai be rong thanh cuon
   bang bien --sbw (js/scrolllock.js do va gan) de trang khong bi giat ngang. */
body.is-locked {
  overflow: hidden;
  padding-right: var(--sbw, 0px);
}

h1, h2, h3, h4 {
  margin: 0 0 .5em;
  line-height: 1.18;
  letter-spacing: -.02em;
  font-weight: 700;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a {
  color: var(--accent);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease);
}
a:hover { color: var(--accent-hover); }

img, video, svg, canvas { max-width: 100%; display: block; }
img { height: auto; }

ul, ol { margin: 0 0 1em; padding-left: 1.25em; }
li { margin: .3em 0; }

code, kbd {
  font-family: var(--font-mono);
  font-size: .88em;
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: .1em .42em;
}

hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: 2rem 0;
}

/* ── Vien khi di ban phim ────────────────────────────────────
   :focus-visible chu KHONG phai :focus — de bam chuot khong hien vien. */
:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

::selection { background: var(--accent-soft); color: var(--text); }

/* ── Thanh cuon ────────────────────────────────────────────── */
* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: var(--radius-pill);
  border: 2px solid var(--surface);
}
*::-webkit-scrollbar-track { background: transparent; }

/* ── Chi doc bang trinh doc man hinh ─────────────────────────
   Khong dung display:none — nhu the trinh doc cung khong thay. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Nut "sang thang noi dung" — an cho toi khi di ban phim toi. */
.skip-link {
  position: fixed;
  top: -60px; left: 16px;
  z-index: 200;
  background: var(--accent-solid);
  color: var(--accent-fg);
  padding: 10px 18px;
  border-radius: var(--radius-sm);
  transition: top var(--dur) var(--ease);
}
.skip-link:focus-visible { top: 12px; color: var(--accent-fg); }

/* =========================================================================
   Thuoc tinh hidden PHAI thang moi khai bao display khac.

   Khong co dong nay thi khoi da dat hidden nhung co display:grid/flex (khoi
   .showcase luc doi nen tang chang han) van hien nguyen — vi display viet
   trong CSS de hon hidden cua trinh duyet. Dat o CUOI file de thang ca cac
   dong .showcase{display:grid} o file khac.
   ========================================================================= */
[hidden] { display: none !important; }

/* =========================================================================
   CHONG TRAN NGANG

   Nguyen nhan thuong gap nhat cua "trang bi lech sang phai": mot o trong
   luoi (grid) hoac hang (flex) co noi dung dai hon o — theo mac dinh o do
   KHONG chiu co lai duoi kich thuoc noi dung, no phinh ra va day ca trang.

   min-width: 0 go bo mac dinh do. Dat cho cac khung hai cot chinh cua trang
   thay vi dat bua khap noi.
   ========================================================================= */
.hero__inner > *,
.split > *,
.forum > *,
.docs > *,
.contact > *,
.showcase > *,
.profile > * { min-width: 0; }

/* Anh khong bao gio duoc rong hon o chua no. */
img, svg, video, canvas, iframe { max-width: 100%; }