/* ============================================================================
   RESET + NEN TANG
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }


/* Thuoc tinh `hidden` phai thang MOI quy tac display cua minh.
   -----------------------------------------------------------------------
   `hidden` chi dat `display: none` qua stylesheet MAC DINH cua trinh duyet —
   bat ky khai bao `display` nao trong CSS cua du an cung de dang de bep no.
   Hau qua: `el.hidden = true` chay dung, thuoc tinh duoc dat, nhung phan tu
   VAN HIEN. Khong co loi, khong canh bao.

   Da dinh hai lan trong du an nay: menu drawer (phai them
   `.fs-drawer[hidden]` rieng), roi dai xin phep cookie — nguoi dung bam
   "Dong y" ma dai khong dong lai.

   Quy tac nay xoa han loai loi do, nen khong phai them `[hidden]` rieng cho
   tung component nua. `!important` o day la co chu dich: muc dich chinh la
   de bep moi khai bao display khac. */
[hidden] { display: none !important; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--fs-header-height) + var(--fs-space-4));
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  font-family: var(--fs-font-sans);
  font-size: var(--fs-text-base);
  line-height: var(--fs-leading-normal);
  color: var(--fs-color-text);
  background: var(--fs-color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, picture, video, svg { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }

/* ---------- Tieu de ---------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--fs-font-heading);
  color: var(--fs-color-heading);
  font-weight: var(--fs-weight-bold);
  line-height: var(--fs-leading-tight);
  letter-spacing: var(--fs-tracking-tight);
}

h1 { font-size: clamp(2rem, 5vw, var(--fs-text-5xl)); }
h2 { font-size: clamp(1.6rem, 3.6vw, var(--fs-text-3xl)); }
h3 { font-size: clamp(1.25rem, 2.4vw, var(--fs-text-xl)); line-height: var(--fs-leading-snug); }
h4 { font-size: var(--fs-text-lg); line-height: var(--fs-leading-snug); }

a { color: var(--fs-color-link); text-decoration: none; transition: color var(--fs-transition-fast); }
a:hover { color: var(--fs-color-link-hover); }

/* ---------- Tro nang: focus luon nhin thay ro ---------- */
:focus-visible {
  outline: 3px solid var(--fs-color-focus);
  outline-offset: 2px;
  border-radius: var(--fs-radius-xs);
}

.fs-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: var(--fs-z-toast);
  padding: var(--fs-space-3) var(--fs-space-5);
  background: var(--fs-primary-500);
  color: var(--fs-white);
  font-weight: var(--fs-weight-semibold);
  border-radius: 0 0 var(--fs-radius-sm) 0;
}
.fs-skip-link:focus {
  left: 0;
  color: var(--fs-white);
}

.fs-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;
}

/* ============================================================================
   BO CUC
   ========================================================================== */
.fs-container {
  width: 100%;
  max-width: var(--fs-container);
  margin-inline: auto;
  padding-inline: var(--fs-gutter);
}
/* Cot chu hep cho trang noi dung dai (bai viet, chinh sach, FAQ, case study).
   Giu khung ngoai bang container thuong de CAN TRAI thang hang voi logo va moi
   khoi khac; chi gioi han do dai dong chu o tung phan tu con.

   Truoc day dat max-width thang len chinh phan tu nay. Vi .fs-container co
   `margin-inline: auto`, khoi 820px tu can giua man hinh — do duoc tren man
   hinh 1600px: logo o 232 nhung noi dung bai viet o 390, lech 158px. Chu
   trong trang bi day vao giua trong khi banner, thanh dieu huong va cac the
   deu bam trai. */
.fs-container--narrow { max-width: var(--fs-container); }
.fs-container--narrow > * { max-width: var(--fs-container-narrow); }
.fs-container--wide { max-width: var(--fs-container-wide); }

.fs-section { padding-block: var(--fs-section-y); }
.fs-section--lg { padding-block: var(--fs-section-y-lg); }
.fs-section--subtle { background: var(--fs-color-bg-subtle); }
.fs-section--muted { background: var(--fs-color-bg-muted); }
.fs-section--inverse { background: var(--fs-color-bg-inverse); color: var(--fs-accent-100); }
.fs-section--inverse h1,
.fs-section--inverse h2,
.fs-section--inverse h3 { color: var(--fs-white); }

/* ---------- Dau muc section ---------- */
.fs-section-head { max-width: 760px; margin-bottom: var(--fs-space-12); }
.fs-section-head--center { margin-inline: auto; text-align: center; }

.fs-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--fs-space-2);
  font-size: var(--fs-text-sm);
  font-weight: var(--fs-weight-semibold);
  letter-spacing: var(--fs-tracking-wider);
  text-transform: uppercase;
  color: var(--fs-primary-500);
  margin-bottom: var(--fs-space-3);
}
.fs-eyebrow::before {
  content: '';
  width: 28px;
  height: 2px;
  background: var(--fs-primary-500);
  flex-shrink: 0;
}
.fs-section-head--center .fs-eyebrow::before { display: none; }
.fs-section--inverse .fs-eyebrow { color: var(--fs-accent-300); }
.fs-section--inverse .fs-eyebrow::before { background: var(--fs-accent-300); }

.fs-section-lead {
  margin-top: var(--fs-space-4);
  font-size: var(--fs-text-lg);
  color: var(--fs-color-text-muted);
  line-height: var(--fs-leading-relaxed);
}
.fs-section--inverse .fs-section-lead { color: var(--fs-accent-200); }

/* ---------- Luoi ---------- */
.fs-grid { display: grid; gap: var(--fs-space-6); }
.fs-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fs-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fs-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 1024px) {
  .fs-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fs-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .fs-grid--2,
  .fs-grid--3,
  .fs-grid--4 { grid-template-columns: minmax(0, 1fr); }
}

/* ============================================================================
   NOI DUNG DAI (bai viet, trang tinh)
   ========================================================================== */
.fs-prose { font-size: var(--fs-text-lg); line-height: var(--fs-leading-relaxed); color: var(--fs-gray-700); }
.fs-prose > * + * { margin-top: var(--fs-space-5); }
.fs-prose h2 { margin-top: var(--fs-space-12); font-size: var(--fs-text-2xl); }
.fs-prose h3 { margin-top: var(--fs-space-8); font-size: var(--fs-text-xl); }
.fs-prose ul, .fs-prose ol { padding-left: var(--fs-space-6); }
.fs-prose li + li { margin-top: var(--fs-space-2); }
.fs-prose a { text-decoration: underline; text-underline-offset: 3px; }
.fs-prose img { border-radius: var(--fs-radius-md); margin-block: var(--fs-space-8); }

/* ---------- Ba kieu canh le anh cua Wagtail ----------
   Nut chen anh cho chon "Toan chieu rong", "Canh trai", "Canh phai" va gan
   class richtext-image + full-width|left|right. Khong co quy tac nao o day
   thi bien tap vien chon kieu ma trang khong doi gi — lua chon tro thanh vo
   nghia ma khong bao loi. */
.fs-prose .richtext-image { height: auto; }
.fs-prose .richtext-image.full-width { display: block; width: 100%; }
.fs-prose .richtext-image.left {
  float: left;
  max-width: 50%;
  margin: var(--fs-space-2) var(--fs-space-6) var(--fs-space-4) 0;
}
.fs-prose .richtext-image.right {
  float: right;
  max-width: 50%;
  margin: var(--fs-space-2) 0 var(--fs-space-4) var(--fs-space-6);
}
/* ---------- Khoi anh co chu thich ---------- */
.fs-figure { margin: var(--fs-space-8) 0; }
.fs-figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--fs-radius-md);
}
.fs-figure figcaption {
  margin-top: var(--fs-space-3);
  font-size: var(--fs-text-sm);
  color: var(--fs-color-text-muted);
  text-align: center;
}

/* Tieu de khong duoc trao len anh dang tha noi o tren. */
.fs-prose h2, .fs-prose h3, .fs-prose h4 { clear: both; }

/* Tren dien thoai, anh tha noi rong 50% chi con mot nhum chu ben canh —
   kho doc. Cho anh chiem tron chieu rong. */
@media (max-width: 640px) {
  .fs-prose .richtext-image.left,
  .fs-prose .richtext-image.right {
    float: none;
    max-width: 100%;
    margin-inline: 0;
  }
}
.fs-prose blockquote {
  border-left: 4px solid var(--fs-primary-500);
  padding: var(--fs-space-2) 0 var(--fs-space-2) var(--fs-space-6);
  color: var(--fs-gray-800);
  font-style: italic;
}
.fs-prose table { width: 100%; border-collapse: collapse; font-size: var(--fs-text-base); }
.fs-prose th, .fs-prose td { border: 1px solid var(--fs-color-border); padding: var(--fs-space-3); text-align: left; }
.fs-prose th { background: var(--fs-color-bg-subtle); font-weight: var(--fs-weight-semibold); }
.fs-prose code {
  font-family: var(--fs-font-mono);
  font-size: 0.9em;
  background: var(--fs-color-bg-muted);
  padding: 0.15em 0.4em;
  border-radius: var(--fs-radius-xs);
}

/* ---------- Cac the sinh ra tu thanh cong cu o soan thao ----------
   Moi feature bat trong FULL_RICH_TEXT (core/models.py) phai co style o day,
   neu khong bien tap vien bam nut ma trang khong doi gi. */
.fs-prose h4 { margin-top: var(--fs-space-8); font-size: var(--fs-text-lg); }
.fs-prose h5 {
  margin-top: var(--fs-space-6);
  font-size: var(--fs-text-base);
  font-weight: var(--fs-weight-semibold);
}
.fs-prose h6 {
  margin-top: var(--fs-space-6);
  font-size: var(--fs-text-sm);
  font-weight: var(--fs-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--fs-color-text-muted);
}
.fs-prose hr {
  border: 0;
  border-top: 1px solid var(--fs-color-border);
  margin-block: var(--fs-space-10);
}
/* line-height: 0 de chi so tren/duoi khong lam gian dong van ban. */
.fs-prose sup,
.fs-prose sub { font-size: 0.72em; line-height: 0; position: relative; }
.fs-prose sup { vertical-align: super; }
.fs-prose sub { vertical-align: sub; }
.fs-prose s,
.fs-prose del { color: var(--fs-color-text-muted); }

/* ---------- Video nhung (feature "embed") ----------
   Wagtail boc iframe trong <div style="padding-bottom: 56.25%"> — thuoc tinh
   style INLINE, bi CSP `style-src 'self'` chan, khien khung cao 0px va video
   bien mat. Vi vay template wagtailembeds/embed_frontend.html duoc ghi de de
   bo style inline, con ty le khung giu bang aspect-ratio o day. */
.fs-embed {
  aspect-ratio: 16 / 9;
  margin-block: var(--fs-space-8);
  border-radius: var(--fs-radius-md);
  overflow: hidden;
  background: var(--fs-gray-900);
}
/* Ep iframe lap kin khung ty le, de bo qua width/height cung ma nha cung cap
   tra ve (thuong la 200x113 — be xiu tren desktop). */
.fs-embed:not(.fs-embed--static) > iframe,
.fs-embed:not(.fs-embed--static) > object,
.fs-embed:not(.fs-embed--static) > video {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}
/* Nhung khong phai video (anh, bai dang, tweet) cao bao nhieu de bay nhieu —
   ep height:100% vao khung aspect-ratio:auto se lam no sap ve 0px. */
.fs-embed--static { aspect-ratio: auto; background: none; }
.fs-embed--static > * { max-width: 100%; border: 0; }

/* ---------- Bang cuon ngang tren mobile ---------- */
.fs-table-scroll { overflow-x: auto; }

/* ============================================================================
   TIEN ICH
   ========================================================================== */
.fs-text-center { text-align: center; }
.fs-mt-auto { margin-top: auto; }
.fs-mt-10 { margin-top: var(--fs-space-10); }