/* ==========================================================================
   healthcare.info.vn — Design System
   Prototype tĩnh (HTML/CSS/JS). Chưa lồng PHP.
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
  /* Màu thương hiệu: teal y tế, đáng tin, không "bệnh viện lạnh" */
  --c-brand-50:  #eefbf8;
  --c-brand-100: #d3f4ed;
  --c-brand-200: #a9e8dd;
  --c-brand-300: #72d5c8;
  --c-brand-500: #1a9e8f;
  --c-brand-600: #0f8377;
  --c-brand-700: #0c6a61;
  --c-brand-900: #093f3a;

  /* Trung tính */
  --c-ink:      #14211f;
  --c-body:     #3d4b49;
  --c-muted:    #6b7b78;
  --c-line:     #e2e8e7;
  --c-line-2:   #eef2f1;
  --c-bg:       #ffffff;
  --c-bg-soft:  #f7faf9;

  /* Ngữ nghĩa — dùng cho badge phân loại chỉ số */
  --c-ok:       #12805f;
  --c-ok-bg:    #e6f6ef;
  --c-low:      #1d6fb8;
  --c-low-bg:   #e8f2fb;
  --c-warn:     #a86a00;
  --c-warn-bg:  #fdf3e0;
  --c-high:     #c2410c;
  --c-high-bg:  #fdefe8;
  --c-danger:   #b31f2b;
  --c-danger-bg:#fdecec;

  /* Typography */
  --f-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
            "Helvetica Neue", Arial, sans-serif;
  --f-serif: "Lora", Georgia, "Times New Roman", serif;

  --fs-xs: .8125rem;   /* 13 */
  --fs-sm: .875rem;    /* 14 */
  --fs-base: 1rem;     /* 16 */
  --fs-md: 1.0625rem;  /* 17 — body bài viết */
  --fs-lg: 1.25rem;
  --fs-xl: 1.5rem;
  --fs-2xl: 1.875rem;
  --fs-3xl: 2.25rem;
  --fs-4xl: 2.875rem;

  /* Spacing / layout */
  --sp: 8px;
  --w-max: 1160px;
  --w-prose: 720px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-full: 999px;

  --sh-1: 0 1px 2px rgba(16,32,30,.06), 0 1px 3px rgba(16,32,30,.04);
  --sh-2: 0 4px 12px rgba(16,32,30,.07), 0 2px 4px rgba(16,32,30,.04);
  --sh-3: 0 12px 32px rgba(16,32,30,.10);

  --header-h: 68px;
}

/* ---------- 2. Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }

body {
  margin: 0;
  font-family: var(--f-sans);
  font-size: var(--fs-base);
  line-height: 1.65;
  color: var(--c-body);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  /* Lưới an toàn: nếu một phần tử nào đó vẫn tràn, trang không cuộn ngang
     được — lỗi hiện ra ngay chỗ tràn thay vì làm lệch toàn bộ bố cục.
     KHÔNG dùng overflow-x: hidden vì nó vô hiệu hoá position: sticky. */
  max-width: 100vw;
}

h1, h2, h3, h4, h5 {
  margin: 0 0 .5em;
  color: var(--c-ink);
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: -.011em;
}
h1 { font-size: var(--fs-3xl); }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-lg); }

p { margin: 0 0 1em; }

a { color: var(--c-brand-600); text-decoration: none; }
a:hover { text-decoration: underline; }

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

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

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

button, input, select, textarea { font: inherit; color: inherit; }

table { border-collapse: collapse; width: 100%; }

:focus-visible {
  outline: 2px solid var(--c-brand-500);
  outline-offset: 2px;
  border-radius: 4px;
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.skip-link {
  position: absolute; left: 8px; top: -60px; z-index: 200;
  background: var(--c-brand-600); color: #fff; padding: 10px 16px;
  border-radius: var(--r-sm); transition: top .15s;
}
.skip-link:focus { top: 8px; }

/* ---------- 3. Layout helpers ---------- */
.container {
  width: 100%;
  max-width: var(--w-max);
  margin-inline: auto;
  padding-inline: 20px;
}
.container--narrow { max-width: 860px; }

.section { padding-block: clamp(40px, 6vw, 72px); }
.section--soft { background: var(--c-bg-soft); }
.section--tight { padding-block: clamp(28px, 4vw, 44px); }

.stack > * + * { margin-top: 1rem; }

.grid { display: grid; gap: 20px; }

/* Ô lưới mặc định có min-width: auto — nó không bao giờ co nhỏ hơn nội dung
   bên trong. Một bảng rộng hay một chuỗi dài không ngắt dòng sẽ nong cột ra và
   đẩy cả trang tràn ngang, trên mobile là lỗi thấy ngay.
   min-width: 0 cho phép ô hẹp lại và để phần tử con tự lo (cuộn hoặc ngắt). */
.grid > * { min-width: 0; }

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

.section-head { max-width: 640px; margin-bottom: 28px; }
.section-head p { color: var(--c-muted); margin: 0; }
.section-head--center { margin-inline: auto; text-align: center; }

.eyebrow {
  display: inline-block;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--c-brand-600);
  margin-bottom: 10px;
}

/* ---------- 4. Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 20px;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
  background: none;
  transition: background-color .15s, border-color .15s, color .15s, transform .05s;
  text-decoration: none;
  white-space: nowrap;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }

.btn--primary { background: var(--c-brand-600); color: #fff; }
.btn--primary:hover { background: var(--c-brand-700); color: #fff; }

.btn--ghost { border-color: var(--c-line); color: var(--c-ink); background: #fff; }
.btn--ghost:hover { border-color: var(--c-brand-300); background: var(--c-brand-50); }

.btn--quiet { color: var(--c-brand-600); padding-inline: 4px; }
.btn--quiet:hover { text-decoration: underline; }

.btn--danger { border-color: #f0c9c9; color: var(--c-danger); background: #fff; }
.btn--danger:hover { background: var(--c-danger-bg); }

.btn--lg { padding: 14px 26px; font-size: var(--fs-base); }
.btn--sm { padding: 7px 12px; font-size: var(--fs-xs); }
.btn--block { width: 100%; }

/* ---------- 5. Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.92);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--c-line);
}
.header-inner {
  height: var(--header-h);
  display: flex; align-items: center; gap: 28px;
}

/* ---------- Logo ----------
   Tên site đặt trên một dòng thay vì hai: chữ "healthcare" đủ dài để tự nhận
   diện, còn tách "info.vn" xuống dòng dưới làm cả khối trông nhỏ và rời rạc. */
.logo {
  display: flex; align-items: center; gap: 11px;
  text-decoration: none;
  /* Cho phép co lại khi khung hẹp. Để flex-shrink: 0 thì logo giữ nguyên bề
     rộng và đẩy nút mở menu ra khỏi màn hình — người dùng mất lối vào menu. */
  min-width: 0;
}
.logo:hover { text-decoration: none; }

.logo__mark {
  width: 38px; height: 38px; border-radius: 11px;
  background: linear-gradient(140deg, var(--c-brand-500) 0%, var(--c-brand-700) 100%);
  display: grid; place-items: center; color: #fff; flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(15, 131, 119, .28);
  transition: transform .18s ease, box-shadow .18s ease;
}
.logo:hover .logo__mark {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(15, 131, 119, .34);
}
.logo__mark svg { width: 24px; height: 24px; }

.logo__text {
  display: flex; align-items: baseline; gap: 1px;
  line-height: 1;
}
.logo__name {
  font-weight: 700; color: var(--c-ink);
  font-size: 1.9rem; letter-spacing: -.028em;
}
/* Nửa sau của tên đổi màu thương hiệu — tạo điểm nhấn mà không cần thêm hình. */
.logo__name em { font-style: normal; color: var(--c-brand-600); }

.logo__tld {
  font-size: .8rem; font-weight: 500;
  color: var(--c-muted); letter-spacing: -.01em;
}

/* Màn hình hẹp: xếp tên site thành hai dòng.
   Để một dòng thì logo chiếm hết chiều ngang và đẩy nút menu ra ngoài khung —
   người dùng không mở được menu. */
@media (max-width: 560px) {
  .logo { gap: 9px; }
  .logo__mark { width: 34px; height: 34px; border-radius: 10px; }
  .logo__mark svg { width: 21px; height: 21px; }

  .logo__text {
    flex-direction: column; align-items: flex-start;
    gap: 0; line-height: 1.05;
  }
  .logo__name { font-size: 1.05rem; }
  .logo__tld { font-size: .68rem; letter-spacing: .01em; }
}

/* ---------- Menu chính ---------- */
.nav { display: flex; align-items: center; gap: 2px; margin-right: auto; }

.nav-link {
  display: block;
  padding: 8px 12px; border-radius: var(--r-sm);
  color: var(--c-body); font-size: var(--fs-sm); font-weight: 500;
  white-space: nowrap;
}
.nav-link:hover { background: var(--c-bg-soft); color: var(--c-ink); text-decoration: none; }
.nav-link[aria-current="page"], .nav-link.is-active {
  color: var(--c-brand-700); font-weight: 600; background: var(--c-brand-50);
}

/* Mục có menu con */
.nav-item { position: relative; display: flex; align-items: center; }
.nav-item--has-sub > .nav-link { padding-right: 4px; }

.nav-caret {
  display: grid; place-items: center;
  width: 22px; height: 30px; padding: 0;
  border: 0; background: none; cursor: pointer;
  color: var(--c-muted); border-radius: var(--r-sm);
}
.nav-caret svg { width: 14px; height: 14px; transition: transform .18s ease; }
.nav-caret:hover { color: var(--c-ink); }
.nav-item[data-open="true"] .nav-caret svg { transform: rotate(180deg); }

.nav-sub {
  position: absolute; top: 100%; left: 0;
  min-width: 232px; padding-top: 8px;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
  z-index: 110;
}
.nav-sub__inner {
  background: #fff; border: 1px solid var(--c-line);
  border-radius: var(--r-md); box-shadow: var(--sh-3);
  padding: 6px; overflow: hidden;
}
.nav-sub a {
  display: block; padding: 9px 12px; border-radius: 6px;
  font-size: var(--fs-sm); color: var(--c-body); white-space: nowrap;
}
.nav-sub a:hover {
  background: var(--c-brand-50); color: var(--c-brand-700); text-decoration: none;
}

/* Mở bằng hover trên máy tính, bằng bấm trên cảm ứng.
   :focus-within giữ menu mở khi người dùng đi bằng phím Tab. */
@media (hover: hover) and (min-width: 941px) {
  .nav-item--has-sub:hover .nav-sub,
  .nav-item--has-sub:focus-within .nav-sub {
    opacity: 1; visibility: visible; transform: translateY(0);
  }
  .nav-item--has-sub:hover .nav-caret svg { transform: rotate(180deg); }
}
.nav-item[data-open="true"] .nav-sub {
  opacity: 1; visibility: visible; transform: translateY(0);
}

.header-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

/* ---------- 5b. Tìm kiếm trên header ---------- */
.search-toggle {
  width: 38px; height: 38px; flex-shrink: 0;
  border: 1px solid var(--c-line); border-radius: var(--r-sm);
  background: #fff; color: var(--c-body); cursor: pointer;
  display: grid; place-items: center;
  transition: border-color .15s, background-color .15s, color .15s;
}
.search-toggle:hover { border-color: var(--c-brand-300); background: var(--c-brand-50); color: var(--c-brand-700); }
.search-toggle svg { width: 17px; height: 17px; }
.search-toggle[aria-expanded="true"] { background: var(--c-brand-50); border-color: var(--c-brand-300); color: var(--c-brand-700); }

/* Lớp phủ tìm kiếm — trượt xuống dưới header */
.search-panel {
  position: absolute; left: 0; right: 0; 
  top: 8%; /* cũ là 100% */
  background: #fff; border-bottom: 1px solid var(--c-line);
  box-shadow: var(--sh-2);
  padding: 18px 0 22px;
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
  z-index: 99;
}
.search-panel[data-open="true"] { opacity: 1; visibility: visible; transform: translateY(0); }

.search-field { position: relative; }
.search-field__icon {
  position: absolute; left: 15px; top: 50%; transform: translateY(-50%);
  width: 19px; height: 19px; color: var(--c-muted); pointer-events: none;
}
.search-field input {
  width: 100%; padding: 14px 46px 14px 44px;
  border: 1px solid var(--c-line); border-radius: var(--r-sm);
  font-size: var(--fs-md); background: var(--c-bg-soft);
  transition: border-color .15s, box-shadow .15s, background-color .15s;
}
.search-field input:focus {
  outline: none; background: #fff;
  border-color: var(--c-brand-500);
  box-shadow: 0 0 0 3px var(--c-brand-100);
}
.search-field input::placeholder { color: #a8b4b2; }
.search-field__clear {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  width: 28px; height: 28px; border: 0; border-radius: 50%;
  background: none; color: var(--c-muted); cursor: pointer;
  display: none; place-items: center;
}
.search-field__clear svg { width: 15px; height: 15px; }
.search-field__clear:hover { background: var(--c-line-2); color: var(--c-ink); }
.search-field__clear[data-visible="true"] { display: grid; }

/* Gợi ý nhanh khi chưa gõ gì */
.search-hints { margin-top: 14px; }
.search-hints__label {
  font-size: var(--fs-xs); color: var(--c-muted);
  text-transform: uppercase; letter-spacing: .06em; font-weight: 600;
  margin-bottom: 9px;
}
.search-hints__list { display: flex; flex-wrap: wrap; gap: 7px; }
.search-hints__list a {
  font-size: var(--fs-sm); padding: 6px 13px;
  border: 1px solid var(--c-line); border-radius: var(--r-full);
  color: var(--c-body); background: #fff;
  transition: border-color .15s, color .15s, background-color .15s;
}
.search-hints__list a:hover {
  border-color: var(--c-brand-300); color: var(--c-brand-700);
  background: var(--c-brand-50); text-decoration: none;
}

/* Kết quả */
.search-results { margin-top: 16px; max-height: 52vh; overflow-y: auto; }
.search-results__count {
  font-size: var(--fs-xs); color: var(--c-muted);
  padding-bottom: 10px; border-bottom: 1px solid var(--c-line-2); margin-bottom: 4px;
}
.search-result {
  display: flex; align-items: flex-start; gap: 13px;
  padding: 11px 12px; border-radius: var(--r-sm);
  transition: background-color .12s;
}
.search-result:hover, .search-result.is-active {
  background: var(--c-brand-50); text-decoration: none;
}
.search-result__icon {
  width: 34px; height: 34px; flex-shrink: 0; border-radius: 9px;
  background: var(--c-brand-50); color: var(--c-brand-600);
  display: grid; place-items: center; margin-top: 1px;
}
.search-result:hover .search-result__icon, .search-result.is-active .search-result__icon { background: #fff; }
.search-result__icon svg { width: 17px; height: 17px; }
.search-result__body { min-width: 0; flex: 1; }
.search-result__title {
  display: block; font-weight: 600; color: var(--c-ink);
  font-size: var(--fs-sm); line-height: 1.45; margin-bottom: 2px;
}
.search-result__title mark {
  background: #fdf3d0; color: inherit; padding: 0 2px; border-radius: 2px;
}
.search-result__desc {
  display: block; font-size: var(--fs-xs); color: var(--c-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.search-result__tag {
  flex-shrink: 0; font-size: 11px; color: var(--c-muted);
  background: var(--c-line-2); padding: 3px 9px; border-radius: var(--r-full);
  margin-top: 3px;
}

.search-empty { text-align: center; padding: 30px 20px; color: var(--c-muted); }
.search-empty svg { width: 36px; height: 36px; color: var(--c-line); margin: 0 auto 12px; }
.search-empty p { font-size: var(--fs-sm); margin: 0 0 4px; }
.search-empty__hint { font-size: var(--fs-xs); }

.search-foot {
  margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--c-line-2);
  font-size: var(--fs-xs); color: var(--c-muted);
  display: flex; gap: 16px; flex-wrap: wrap;
}
.search-foot kbd {
  font-family: inherit; font-size: 10px; padding: 2px 6px;
  border: 1px solid var(--c-line); border-bottom-width: 2px;
  border-radius: 4px; background: var(--c-bg-soft); color: var(--c-body);
}
@media (max-width: 620px) { .search-foot { display: none; } }

/* Nền mờ phía sau khi mở tìm kiếm */
.search-backdrop {
  position: fixed; inset: var(--header-h) 0 0; z-index: 98;
  background: rgba(16, 32, 30, .28);
  opacity: 0; visibility: hidden; transition: opacity .18s, visibility .18s;
}
.search-backdrop[data-open="true"] { opacity: 1; visibility: visible; }

.nav-toggle {
  display: none; width: 40px; height: 40px; border: 1px solid var(--c-line);
  border-radius: var(--r-sm); background: #fff; cursor: pointer;
  align-items: center; justify-content: center;
  /* Không bao giờ được co lại: đây là lối duy nhất vào menu trên mobile. */
  flex-shrink: 0;
}
.nav-toggle span {
  display: block; width: 17px; height: 1.5px; background: var(--c-ink);
  position: relative;
}
.nav-toggle span::before, .nav-toggle span::after {
  content: ""; position: absolute; left: 0; width: 17px; height: 1.5px; background: var(--c-ink);
}
.nav-toggle span::before { top: -5px; }
.nav-toggle span::after  { top: 5px; }

@media (max-width: 940px) {
  .nav-toggle { display: flex; order: 3; }

  /* gap nhỏ lại: khoảng cách giữa logo và nhóm nút giờ do margin-left: auto
     trên .header-actions lo, gap chỉ còn tách nút tìm kiếm với nút menu. */
  .header-inner { gap: 8px; }
  .nav {
    position: absolute; top: var(--header-h); left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 2px;
    background: #fff; border-bottom: 1px solid var(--c-line);
    padding: 12px 20px 20px; box-shadow: var(--sh-2);
    display: none;
  }
  .nav[data-open="true"] { display: flex; }
  .nav-link { padding: 11px 12px; font-size: var(--fs-base); }
  .header-actions .btn--ghost { display: none; }
  /* Panel tìm kiếm nằm dưới cả menu khi menu đang mở */
  .nav[data-open="true"] ~ .search-panel { top: auto; }

  /* Đẩy nhóm nút sang sát mép phải.
     Trên desktop việc này do .nav lo bằng margin-right: auto, nhưng ở đây .nav
     bị ẩn nên không còn gì đẩy — hai nút dồn về sát logo. */
  .header-actions { margin-left: auto; }

  /* Nút "Dùng công cụ" nhỏ lại — nó cạnh tranh chỗ với nút mở menu.
     Menu vẫn dẫn tới trang công cụ nên không mất lối đi nào. */
  .header-actions .btn--primary { padding: 8px 12px; font-size: var(--fs-xs); }

  /* Menu con trên mobile: xổ trong dòng chảy thay vì nổi đè lên nội dung.
     Popup nổi trên màn hình hẹp che mất chính những mục người dùng đang tìm. */
  .nav-item { flex-direction: column; align-items: stretch; }
  .nav-item--has-sub { position: static; }
  .nav-item--has-sub > .nav-link { padding-right: 12px; }

  /* Nút mũi tên phủ hết chiều rộng để dễ bấm — nó nằm sau .nav-link nên
     position absolute đưa nó lên đúng hàng với nhãn. */
  .nav-item--has-sub { position: relative; }
  .nav-caret {
    position: absolute; top: 0; right: 0;
    width: 46px; height: 44px;
  }

  .nav-sub {
    position: static; min-width: 0; padding-top: 0;
    max-height: 0; overflow: hidden;
    opacity: 1; visibility: visible; transform: none;
    transition: max-height .22s ease;
  }
  .nav-item[data-open="true"] .nav-sub { max-height: 60vh; overflow-y: auto; }
  .nav-sub__inner {
    border: 0; box-shadow: none; border-radius: 0;
    padding: 2px 0 8px 12px;
    border-left: 2px solid var(--c-brand-100);
    margin-left: 12px;
  }
  .nav-sub a { padding: 9px 10px; }
}

/* Màn hình rất hẹp: thu gọn để header không tràn */
@media (max-width: 420px) {
  .header-actions { gap: 6px; }
  .search-toggle { width: 36px; height: 36px; }

  /* Bỏ hẳn nút "Dùng công cụ": ba phần tử cạnh logo là quá nhiều cho khung
     hẹp, và nút mở menu phải luôn bấm được. Menu chính vẫn có mục Công cụ. */
  .header-actions .btn { display: none; }
  .search-field input { padding: 12px 42px 12px 40px; font-size: var(--fs-base); }
  .search-field__icon { left: 13px; width: 17px; height: 17px; }
  .search-hints__list a { font-size: var(--fs-xs); padding: 5px 11px; }
}

/* ---------- 6. Hero ---------- */
.hero {
  background:
    radial-gradient(900px 380px at 78% -8%, var(--c-brand-100), transparent 62%),
    linear-gradient(180deg, var(--c-brand-50), #fff 78%);
  border-bottom: 1px solid var(--c-line-2);
  padding-block: clamp(48px, 7vw, 88px);
}
.hero__grid {
  display: grid; grid-template-columns: 1.05fr .95fr;
  gap: 48px; align-items: center;
}
@media (max-width: 900px) { .hero__grid { grid-template-columns: 1fr; gap: 36px; } }

.hero h1 {
  font-size: clamp(1.9rem, 4.6vw, var(--fs-4xl));
  letter-spacing: -.025em;
  margin-bottom: 16px;
}
.hero__lead {
  font-size: var(--fs-lg); color: var(--c-body); max-width: 34em;
  margin-bottom: 26px;
}
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 22px; }
.hero__note { font-size: var(--fs-sm); color: var(--c-muted); display: flex; align-items: center; gap: 8px; }
.hero__note svg { width: 16px; height: 16px; color: var(--c-brand-600); flex-shrink: 0; }

/* Mockup card trong hero */
.hero__preview {
  background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-lg);
  box-shadow: var(--sh-3); padding: 20px;
}
.preview__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.preview__title { font-weight: 600; color: var(--c-ink); font-size: var(--fs-sm); }
.preview__reading {
  display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px;
}
.preview__num { font-size: 2.5rem; font-weight: 700; color: var(--c-ink); letter-spacing: -.03em; line-height: 1; }
.preview__unit { font-size: var(--fs-sm); color: var(--c-muted); }
.preview__chart { margin-top: 14px; }

/* ---------- 7. Cards ---------- */
.card {
  background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-md);
  padding: 22px; transition: border-color .15s, box-shadow .15s, transform .15s;
  display: flex; flex-direction: column;
}
.card--link:hover { border-color: var(--c-brand-300); box-shadow: var(--sh-2); transform: translateY(-2px); }
.card h3 { margin-bottom: 6px; font-size: var(--fs-lg); }
.card p { color: var(--c-muted); font-size: var(--fs-sm); margin-bottom: 16px; }
.card__foot { margin-top: auto; }

.card__icon {
  width: 42px; height: 42px; border-radius: 11px;
  background: var(--c-brand-50); color: var(--c-brand-600);
  display: grid; place-items: center; margin-bottom: 14px;
}
.card__icon svg { width: 21px; height: 21px; }

/* Card bài viết */
.post-card { display: flex; flex-direction: column; height: 100%; }
.post-card a { color: inherit; }
.post-card__thumb {
  aspect-ratio: 16 / 9; border-radius: var(--r-md); overflow: hidden;
  background: linear-gradient(135deg, var(--c-brand-100), var(--c-brand-50));
  margin-bottom: 14px; position: relative;
}
.post-card__thumb img { width: 100%; height: 100%; object-fit: cover; }
.post-card__cat {
  position: absolute; left: 10px; top: 10px;
  background: rgba(255,255,255,.94); color: var(--c-brand-700);
  font-size: var(--fs-xs); font-weight: 600; padding: 4px 10px; border-radius: var(--r-full);
}
.post-card h3 { font-size: var(--fs-md); line-height: 1.4; margin-bottom: 8px; }
.post-card h3 a:hover { color: var(--c-brand-600); text-decoration: none; }
.post-card__excerpt { color: var(--c-muted); font-size: var(--fs-sm); margin-bottom: 12px; }
.post-card__meta {
  margin-top: auto; padding-top: 12px; border-top: 1px solid var(--c-line-2);
  font-size: var(--fs-xs); color: var(--c-muted);
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
}
.post-card__meta .dot { opacity: .5; }

/* ---------- 8. Badge phân loại ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 11px; border-radius: var(--r-full);
  font-size: var(--fs-xs); font-weight: 600; line-height: 1.5;
  white-space: nowrap;
}
.badge::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: currentColor; flex-shrink: 0;
}
.badge--ok     { background: var(--c-ok-bg);     color: var(--c-ok); }
.badge--low    { background: var(--c-low-bg);    color: var(--c-low); }
.badge--warn   { background: var(--c-warn-bg);   color: var(--c-warn); }
.badge--high   { background: var(--c-high-bg);   color: var(--c-high); }
.badge--danger { background: var(--c-danger-bg); color: var(--c-danger); }
.badge--plain  { background: var(--c-line-2);    color: var(--c-muted); }
.badge--plain::before { display: none; }

/* ---------- 9. Trust bar / minh bạch ---------- */
.trust-bar {
  background: var(--c-brand-900);
  color: #d8efeb;
  padding-block: 20px;
}
.trust-bar__inner {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  flex-wrap: wrap; text-align: center; font-size: var(--fs-sm);
}
.trust-bar svg { width: 18px; height: 18px; color: var(--c-brand-300); flex-shrink: 0; }
.trust-bar a { color: #fff; text-decoration: underline; text-underline-offset: 3px; font-weight: 600; }

.trust-points { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 780px) { .trust-points { grid-template-columns: 1fr; } }
.trust-point__icon {
  width: 38px; height: 38px; border-radius: 10px; background: #fff;
  border: 1px solid var(--c-line); color: var(--c-brand-600);
  display: grid; place-items: center; margin-bottom: 12px;
}
.trust-point h3 { font-size: var(--fs-md); }
.trust-point p { font-size: var(--fs-sm); color: var(--c-muted); margin: 0; }

/* ---------- 10. Disclaimer / callout ---------- */
.callout {
  border: 1px solid var(--c-line); border-left: 3px solid var(--c-brand-500);
  background: var(--c-bg-soft); border-radius: var(--r-sm);
  padding: 16px 18px; font-size: var(--fs-sm);
}
.callout p:last-child { margin-bottom: 0; }
.callout__title {
  display: flex; align-items: center; gap: 8px;
  font-weight: 700; color: var(--c-ink); margin-bottom: 6px;
}
.callout__title svg { width: 17px; height: 17px; flex-shrink: 0; }

.callout--medical { border-left-color: var(--c-warn); background: var(--c-warn-bg); border-color: #f3e2c4; }
.callout--medical .callout__title { color: #7a4d00; }
.callout--danger  { border-left-color: var(--c-danger); background: var(--c-danger-bg); border-color: #f4d3d3; }
.callout--danger .callout__title { color: var(--c-danger); }
.callout--info    { border-left-color: var(--c-low); background: var(--c-low-bg); border-color: #d6e6f6; }

/* ---------- 11. Footer ---------- */
.site-footer {
  background: var(--c-bg-soft); border-top: 1px solid var(--c-line);
  padding-block: 48px 28px; margin-top: 0;
  font-size: var(--fs-sm);
}
.footer-grid {
  display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 32px;
  margin-bottom: 36px;
}
@media (max-width: 900px) { .footer-grid { grid-template-columns: repeat(2, 1fr); gap: 28px; } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; } }

.footer-brand p { color: var(--c-muted); margin: 12px 0 0; max-width: 30em; }
.footer-col h4 {
  font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .07em;
  color: var(--c-ink); margin-bottom: 12px;
}
.footer-col ul { list-style: none; padding: 0; margin: 0; }
.footer-col li + li { margin-top: 8px; }
.footer-col a { color: var(--c-muted); }
.footer-col a:hover { color: var(--c-brand-600); }

.footer-legal {
  border-top: 1px solid var(--c-line); padding-top: 22px;
  color: var(--c-muted); font-size: var(--fs-xs);
}
.footer-legal p { margin-bottom: 10px; }
.footer-legal strong { color: var(--c-body); }

/* ---------- 12. Breadcrumb ---------- */
.breadcrumb {
  padding-block: 16px; font-size: var(--fs-xs); color: var(--c-muted);
}
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
.breadcrumb li + li::before { content: "/"; margin-right: 8px; opacity: .5; }
.breadcrumb a { color: var(--c-muted); }
.breadcrumb a:hover { color: var(--c-brand-600); }
.breadcrumb [aria-current] { color: var(--c-body); }

/* ---------- 13. Page header ---------- */
.page-head { padding-block: 12px 32px; border-bottom: 1px solid var(--c-line-2); }
.page-head h1 { margin-bottom: 10px; }
.page-head__lead { font-size: var(--fs-md); color: var(--c-muted); max-width: 100ch; margin: 0; }

/* ---------- 14. Forms ---------- */
.field { margin-bottom: 16px; }
.field__label {
  display: block; font-size: var(--fs-sm); font-weight: 600;
  color: var(--c-ink); margin-bottom: 6px;
}
.field__hint { font-size: var(--fs-xs); color: var(--c-muted); margin: 5px 0 0; }
.field__req { color: var(--c-danger); }

.input, .select, .textarea {
  width: 100%; padding: 10px 12px;
  border: 1px solid var(--c-line); border-radius: var(--r-sm);
  background: #fff; font-size: var(--fs-base);
  transition: border-color .15s, box-shadow .15s;
  /* Safari trên iOS gán bề rộng nội tại cho input date/time và bỏ qua
     width: 100% — ô ngày giờ nong cả form ra ngoài khung. min-width: 0 gỡ
     ràng buộc đó. */
  min-width: 0;
  max-width: 100%;
}
/* Trình duyệt WebKit thêm padding riêng cho ô ngày giờ; bỏ để nó vừa khung. */
.input[type="date"], .input[type="datetime-local"], .input[type="month"],
.input[type="time"] {
  -webkit-appearance: none; appearance: none;
}
.textarea { resize: vertical; }
.input:focus, .select:focus, .textarea:focus {
  outline: none; border-color: var(--c-brand-500);
  box-shadow: 0 0 0 3px var(--c-brand-100);
}
.input::placeholder { color: #a8b4b2; }
.input[aria-invalid="true"] { border-color: var(--c-danger); }

.select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7b78' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 17px;
  padding-right: 34px;
}

.field-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.field-row--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 560px) { .field-row, .field-row--3 { grid-template-columns: 1fr; } }

.input-group { display: flex; }
.input-group .input { border-radius: var(--r-sm) 0 0 var(--r-sm); }
.input-group__suffix {
  display: inline-flex; align-items: center; padding: 0 12px;
  border: 1px solid var(--c-line); border-left: 0;
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  background: var(--c-bg-soft); color: var(--c-muted);
  font-size: var(--fs-sm); white-space: nowrap;
}

/* Segmented control — chọn đơn vị, khoảng thời gian */
.segmented {
  display: inline-flex; padding: 3px; gap: 2px;
  background: var(--c-line-2); border-radius: var(--r-sm);
  max-width: 100%;
}
.segmented button {
  border: 0; background: none; cursor: pointer;
  padding: 6px 13px; border-radius: 6px;
  font-size: var(--fs-xs); font-weight: 600; color: var(--c-muted);
  transition: background-color .15s, color .15s;
  white-space: nowrap;
}

/* Bốn nút "7 ngày / 30 ngày / 90 ngày / Tất cả" cộng lại rộng hơn khung điện
   thoại. Thu padding thay vì cho cuộn ngang: người dùng cần thấy đủ cả bốn
   lựa chọn mới biết mình đang xem khoảng nào. */
@media (max-width: 480px) {
  .segmented button { padding: 6px 8px; font-size: 11px; }
}
.segmented button:hover { color: var(--c-ink); }
.segmented button[aria-pressed="true"] { background: #fff; color: var(--c-brand-700); box-shadow: var(--sh-1); }

.error-text { color: var(--c-danger); font-size: var(--fs-xs); margin-top: 5px; }

/* ---------- 15. Tool layout ---------- */
.tool-layout {
  display: grid; grid-template-columns: 380px minmax(0, 1fr); gap: 28px;
  align-items: start; padding-block: 32px 56px;
}
/* minmax(0, 1fr) thay vì 1fr: mặc định ô lưới có min-width: auto, nghĩa là nó
   không co nhỏ hơn nội dung bên trong. Bảng .data-table đặt min-width: 520px
   sẽ nong cả cột rộng ra và đẩy trang tràn ngang. */
@media (max-width: 940px) {
  .tool-layout { grid-template-columns: minmax(0, 1fr); }
}

.panel {
  background: #fff; border: 1px solid var(--c-line);
  border-radius: var(--r-md); padding: 22px;
  /* Cùng lý do: panel là ô lưới, phải cho phép nó hẹp hơn nội dung để
     .table-wrap bên trong tự cuộn ngang. */
  min-width: 0;
}
.panel--sticky { position: sticky; top: calc(var(--header-h) + 20px); }
@media (max-width: 940px) { .panel--sticky { position: static; } }
.panel__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 18px; flex-wrap: wrap;
}
.panel__head h2 { margin: 0; font-size: var(--fs-lg); }
.panel + .panel { margin-top: 22px; }

/* Kết quả tức thì dưới form */
.result-box {
  margin-top: 18px; padding: 18px;
  border: 1px solid var(--c-line); border-radius: var(--r-md);
  background: var(--c-bg-soft);
}
.result-box[hidden] { display: none; }
.result-box__value {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 10px;
}
.result-box__num { font-size: 2rem; font-weight: 700; color: var(--c-ink); letter-spacing: -.03em; line-height: 1; }
.result-box__unit { color: var(--c-muted); font-size: var(--fs-sm); }
.result-box__desc { font-size: var(--fs-sm); color: var(--c-body); margin: 0; }

/* Thang đo trực quan */
.scale { margin: 16px 0 8px; }
.scale__track {
  display: flex; height: 8px; border-radius: var(--r-full); overflow: hidden;
  background: var(--c-line-2);
}
.scale__seg { height: 100%; }
.scale__marker-wrap { position: relative; height: 18px; margin-top: 4px; }
.scale__marker {
  position: absolute; top: 0; transform: translateX(-50%);
  width: 2px; height: 10px; background: var(--c-ink); border-radius: 1px;
  transition: left .3s ease;
}
.scale__marker::after {
  content: ""; position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
  width: 11px; height: 11px; border-radius: 50%;
  background: #fff; border: 3px solid var(--c-ink);
}
.scale__labels {
  display: flex; justify-content: space-between;
  font-size: 11px; color: var(--c-muted); margin-top: 2px;
}

/* ---------- 16. Chart ---------- */
.chart-wrap { position: relative; height: 300px; }
@media (max-width: 620px) { .chart-wrap { height: 240px; } }

.chart-legend { display: flex; gap: 18px; flex-wrap: wrap; font-size: var(--fs-xs); color: var(--c-muted); margin-top: 14px; }
.chart-legend span { display: inline-flex; align-items: center; gap: 7px; }
.chart-legend i { width: 12px; height: 3px; border-radius: 2px; display: inline-block; }

.empty-state { text-align: center; padding: 44px 20px; color: var(--c-muted); }
.empty-state svg { width: 44px; height: 44px; color: var(--c-line); margin: 0 auto 14px; }
.empty-state p { font-size: var(--fs-sm); margin: 0; }

/* ---------- 17. Table ---------- */
/* max-width: 100% là phần bắt buộc, không phải trang trí: overflow-x: auto chỉ
   có tác dụng khi phần tử BỊ giới hạn bề rộng. Thiếu nó, khung vẫn nở theo bảng
   bên trong và tràn ra ngoài thay vì cuộn. */
.table-wrap {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  max-width: 100%;
}
.data-table { min-width: 520px; font-size: var(--fs-sm); }
.data-table th {
  text-align: left; font-weight: 600; color: var(--c-muted);
  font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .05em;
  padding: 10px 12px; border-bottom: 1px solid var(--c-line);
  white-space: nowrap;
}
.data-table td {
  padding: 12px; border-bottom: 1px solid var(--c-line-2);
  vertical-align: middle;
}
.data-table tbody tr:hover { background: var(--c-bg-soft); }
.data-table .num { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--c-ink); }
.data-table .actions { text-align: right; white-space: nowrap; }

.icon-btn {
  width: 30px; height: 30px; border: 1px solid transparent; border-radius: 6px;
  background: none; cursor: pointer; color: var(--c-muted);
  display: inline-grid; place-items: center;
}
.icon-btn:hover { background: var(--c-line-2); color: var(--c-ink); }
.icon-btn--danger:hover { background: var(--c-danger-bg); color: var(--c-danger); }
.icon-btn svg { width: 16px; height: 16px; }

/* ---------- 18. Bài viết ---------- */
.article-layout {
  display: grid; grid-template-columns: minmax(0,1fr) 280px; gap: 40px;
  align-items: start; padding-block: 8px 56px;
}
@media (max-width: 1000px) { .article-layout { grid-template-columns: 1fr; gap: 32px; } }

/* Trong bố cục hai cột, chính cột đã giới hạn bề rộng dòng chữ rồi.
   Giữ thêm max-width 720px của .prose sẽ bó cột nội dung lần nữa, tạo khoảng
   trắng thừa giữa bài và sidebar. */
.article-layout .prose { max-width: none; }

.article-header { margin-bottom: 28px; }
.article-header h1 { font-size: clamp(1.75rem, 3.6vw, 2.4rem); letter-spacing: -.022em; }

/* Dòng minh bạch dưới tiêu đề — thành phần E-E-A-T cốt lõi */
.byline {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px;
  padding: 14px 16px; margin-top: 18px;
  background: var(--c-brand-50); border: 1px solid var(--c-brand-100);
  border-radius: var(--r-sm); font-size: var(--fs-sm);
}
.byline__reviewer { display: flex; align-items: center; gap: 9px; }
.byline__avatar {
  width: 34px; height: 34px; border-radius: 50%; object-fit: cover;
  background: var(--c-brand-200); flex-shrink: 0;
}
.byline__name { font-weight: 600; color: var(--c-ink); }
.byline__cred { color: var(--c-muted); font-size: var(--fs-xs); display: block; }
.byline__item { color: var(--c-muted); font-size: var(--fs-xs); }
.byline__item strong { color: var(--c-body); }
.byline__sep { color: var(--c-brand-200); }

/* Ảnh đại diện đầu bài — đặt ngoài .prose để tràn hết chiều rộng cột */
.article-hero { margin: 0 0 28px; }
.article-hero img {
  width: 100%; height: auto; border-radius: var(--r-md);
  aspect-ratio: 16 / 9; object-fit: cover;
}

.prose { font-size: var(--fs-md); line-height: 1.78; color: var(--c-body); max-width: var(--w-prose); }

/* Trang chỉ có nội dung văn bản (không sidebar) — căn giữa khối chữ */
.prose--center { margin-inline: auto; max-width: 780px; }
.prose h2 { font-size: var(--fs-xl); margin-top: 2em; margin-bottom: .6em; scroll-margin-top: calc(var(--header-h) + 20px); }
.prose h3 { font-size: var(--fs-lg); margin-top: 1.6em; }
.prose ul, .prose ol { padding-left: 1.4em; }
.prose li { margin-bottom: .4em; }
.prose img { border-radius: var(--r-md); margin-block: 1.6em; }
.prose figure { margin: 1.6em 0; }
.prose figcaption { font-size: var(--fs-xs); color: var(--c-muted); text-align: center; margin-top: 8px; }
.prose blockquote {
  margin: 1.6em 0; padding: 4px 0 4px 20px;
  border-left: 3px solid var(--c-brand-200);
  color: var(--c-ink); font-family: var(--f-serif); font-size: 1.0625em;
}
.prose table { font-size: var(--fs-sm); margin-block: 1.6em; }
.prose th { background: var(--c-bg-soft); text-align: left; padding: 10px 12px; border: 1px solid var(--c-line); color: var(--c-ink); }
.prose td { padding: 10px 12px; border: 1px solid var(--c-line); }
.prose .callout { margin-block: 1.8em; font-size: var(--fs-sm); }

/* Footnote — mọi claim y khoa phải có */
.fn {
  font-size: .72em; font-weight: 700; vertical-align: super;
  color: var(--c-brand-600); text-decoration: none;
  padding: 0 2px; line-height: 1;
}
.fn:hover { text-decoration: underline; }
.fn::before { content: "["; }
.fn::after  { content: "]"; }

/* ---------- Mục lục ----------
   Bài dài có thể có hơn 20 mục. Không khống chế chiều cao thì TOC tràn quá
   khung dính (sticky) và phần dưới của nó nằm đè lên nội dung khi cuộn —
   sticky chỉ giữ phần tử trong khung nhìn, không tự cắt phần thừa. */
/* Cả cột phải dính lại, không chỉ riêng TOC.
   Nếu chỉ TOC sticky, các card bên dưới nó cuộn bình thường và bị TOC che mất
   khi người đọc cuộn xuống — vì sticky nhấc TOC ra khỏi dòng chảy thị giác
   nhưng không nhấc phần còn lại. */
.article-sticky {
  position: sticky; top: calc(var(--header-h) + 16px);
  max-height: calc(100vh - var(--header-h) - 32px);
  overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: none;   /* thanh cuộn của cột: ẩn, TOC đã có riêng */
}
.article-sticky::-webkit-scrollbar { width: 0; }
@media (max-width: 1000px) {
  .article-sticky { position: static; max-height: none; overflow: visible; }
}

.toc {
  border: 1px solid var(--c-line); border-radius: var(--r-md);
  background: #fff;
  font-size: var(--fs-sm);
  /* Chiều cao tối đa nhỏ hơn cột chứa để còn chỗ cho card bên dưới. */
  max-height: min(62vh, 520px);
  display: flex; flex-direction: column;
  overflow: hidden;   /* bo góc vẫn đúng khi phần trong cuộn */
}
.toc h2 {
  font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .07em;
  color: var(--c-muted); margin: 0;
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--c-line-2);
  flex-shrink: 0;
}
.toc ul {
  list-style: none; padding: 8px; margin: 0;
  overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin;
}
.toc ul::-webkit-scrollbar { width: 6px; }
.toc ul::-webkit-scrollbar-thumb { background: var(--c-line); border-radius: 3px; }
.toc ul::-webkit-scrollbar-thumb:hover { background: var(--c-brand-300); }

.toc li + li { margin-top: 1px; }
.toc a {
  display: block; padding: 6px 10px;
  border-left: 2px solid transparent;
  color: var(--c-muted); border-radius: 0 4px 4px 0;
  line-height: 1.45;
  /* Tiêu đề dài cắt gọn còn 2 dòng: TOC là bảng chỉ đường, không phải bản
     sao của nội dung. */
  display: -webkit-box; -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; line-clamp: 2;
  overflow: hidden;
}
.toc a:hover { color: var(--c-brand-700); background: var(--c-bg-soft); text-decoration: none; }
.toc a.is-active {
  color: var(--c-brand-700); border-left-color: var(--c-brand-500);
  font-weight: 600; background: var(--c-brand-50);
}

/* H3 lùi vào và nhỏ hơn để thấy rõ cấp bậc */
.toc li[data-level="3"] a { padding-left: 22px; font-size: var(--fs-xs); }

@media (max-width: 1000px) {
  .toc { max-height: none; }
  .toc ul { max-height: 320px; }
}

/* Nguồn tham khảo */
.sources { margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--c-line); }
.sources h2 { font-size: var(--fs-lg); }
.sources ol { counter-reset: src; list-style: none; padding: 0; font-size: var(--fs-sm); }
.sources li {
  counter-increment: src; position: relative; padding-left: 34px;
  margin-bottom: 12px; color: var(--c-body); scroll-margin-top: calc(var(--header-h) + 20px);
}
.sources li::before {
  content: counter(src); position: absolute; left: 0; top: 1px;
  width: 24px; height: 24px; border-radius: 6px;
  background: var(--c-brand-50); color: var(--c-brand-700);
  font-size: var(--fs-xs); font-weight: 700;
  display: grid; place-items: center;
}
.sources li:target::before { background: var(--c-brand-500); color: #fff; }
.sources .src-org { color: var(--c-muted); }

/* Hộp lịch review */
.review-box {
  display: flex; gap: 14px; align-items: flex-start;
  margin-top: 28px; padding: 18px;
  border: 1px dashed var(--c-brand-200); border-radius: var(--r-md);
  background: var(--c-brand-50); font-size: var(--fs-sm);
}
.review-box svg { width: 20px; height: 20px; color: var(--c-brand-600); flex-shrink: 0; margin-top: 2px; }
.review-box p { margin: 0; }
.review-box strong { color: var(--c-ink); }

/* ---------- 19. Filter chips ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  padding: 7px 15px; border: 1px solid var(--c-line); border-radius: var(--r-full);
  background: #fff; font-size: var(--fs-sm); color: var(--c-body);
  cursor: pointer; transition: all .15s; text-decoration: none;
}
.chip:hover { border-color: var(--c-brand-300); color: var(--c-brand-700); text-decoration: none; }
.chip[aria-pressed="true"], .chip.is-active {
  background: var(--c-brand-600); border-color: var(--c-brand-600); color: #fff;
}

/* ---------- 20. Pagination ---------- */
.pagination { display: flex; justify-content: center; gap: 6px; margin-top: 40px; }
.pagination a, .pagination span {
  min-width: 38px; height: 38px; padding: 0 12px;
  display: inline-grid; place-items: center;
  border: 1px solid var(--c-line); border-radius: var(--r-sm);
  font-size: var(--fs-sm); color: var(--c-body);
}
.pagination a:hover { border-color: var(--c-brand-300); background: var(--c-brand-50); text-decoration: none; }
.pagination [aria-current="page"] { background: var(--c-brand-600); border-color: var(--c-brand-600); color: #fff; font-weight: 600; }
.pagination .is-disabled { color: #c3ccca; }

/* ---------- 21. Auth ---------- */
.auth-wrap { max-width: 550px; margin: 56px auto; }
.auth-card { border: 1px solid var(--c-line); border-radius: var(--r-lg); padding: 32px; box-shadow: var(--sh-1); }
.auth-card h1 { font-size: var(--fs-2xl); text-align: center; margin-bottom: 6px; }
.auth-card__sub { text-align: center; color: var(--c-muted); font-size: var(--fs-sm); margin-bottom: 26px; }
.auth-divider {
  display: flex; align-items: center; gap: 12px;
  color: var(--c-muted); font-size: var(--fs-xs); margin: 20px 0;
}
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--c-line); }
.auth-foot { text-align: center; font-size: var(--fs-sm); color: var(--c-muted); margin-top: 22px; }

/* ---------- 22. Toast ---------- */
.toast-host {
  position: fixed; right: 20px; bottom: 20px; z-index: 300;
  display: flex; flex-direction: column-reverse; gap: 10px;
  pointer-events: none;
}
.toast {
  background: var(--c-ink); color: #fff; padding: 12px 18px;
  border-radius: var(--r-sm); font-size: var(--fs-sm); box-shadow: var(--sh-3);
  animation: toast-in .22s ease; max-width: 340px; pointer-events: auto;
}
.toast--ok { background: var(--c-ok); }
.toast--err { background: var(--c-danger); }
@keyframes toast-in { from { opacity: 0; transform: translateY(10px); } }

/* ---------- 22b. Công cụ tính nhanh ---------- */

/* Layout 2 cột cho calculator đơn giản */
.calc-layout {
  display: grid; grid-template-columns: 1fr 1fr; gap: 28px;
  align-items: start; padding-block: 32px 56px;
}
@media (max-width: 900px) { .calc-layout { grid-template-columns: 1fr; gap: 20px; } }

/* Khối kết quả lớn */
.big-result {
  background: linear-gradient(160deg, var(--c-brand-50), #fff 70%);
  border: 1px solid var(--c-brand-100); border-radius: var(--r-md);
  padding: 24px; text-align: center;
}
.big-result__label { font-size: var(--fs-sm); color: var(--c-muted); margin-bottom: 6px; }
.big-result__num {
  font-size: clamp(2.2rem, 6vw, 3rem); font-weight: 700; color: var(--c-brand-700);
  line-height: 1.05; letter-spacing: -.03em; font-variant-numeric: tabular-nums;
}
.big-result__unit { font-size: var(--fs-md); color: var(--c-muted); font-weight: 500; }
.big-result__badge { margin-top: 12px; }
.big-result__note { font-size: var(--fs-sm); color: var(--c-body); margin: 14px 0 0; }

/* Lưới các ô kết quả phụ */
.result-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 18px; }
@media (max-width: 480px) { .result-grid { grid-template-columns: 1fr; } }
.result-tile {
  border: 1px solid var(--c-line); border-radius: var(--r-sm);
  padding: 14px 16px; background: #fff;
}
.result-tile__label { display: block; font-size: var(--fs-xs); color: var(--c-muted); margin-bottom: 4px; }
.result-tile__value {
  font-size: var(--fs-lg); font-weight: 700; color: var(--c-ink);
  font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
.result-tile__sub { display: block; font-size: var(--fs-xs); color: var(--c-muted); margin-top: 3px; }
.result-tile--accent { background: var(--c-brand-50); border-color: var(--c-brand-100); }
.result-tile--accent .result-tile__value { color: var(--c-brand-700); }

/* Lịch chu kỳ / thai kỳ */
.timeline { list-style: none; padding: 0; margin: 0; }
.timeline li {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 0; font-size: var(--fs-sm);
}
.timeline li + li { border-top: 1px solid var(--c-line-2); }
.timeline__dot {
  width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
  background: var(--c-brand-500);
}
.timeline__dot--fertile { background: #d9862c; }
.timeline__dot--period  { background: #c2410c; }
.timeline__label { color: var(--c-body); }
.timeline__date { margin-left: auto; font-weight: 600; color: var(--c-ink); white-space: nowrap; }

/* Thanh tiến trình (thai kỳ, nước uống) */
.progress {
  height: 10px; border-radius: var(--r-full);
  background: var(--c-line-2); overflow: hidden; margin: 10px 0 6px;
}
.progress__bar {
  height: 100%; border-radius: var(--r-full);
  background: linear-gradient(90deg, var(--c-brand-500), var(--c-brand-600));
  transition: width .4s ease;
}
.progress__meta {
  display: flex; justify-content: space-between;
  font-size: var(--fs-xs); color: var(--c-muted);
}

/* Nhóm công cụ trên trang danh mục */
.tool-group + .tool-group { margin-top: 48px; }
.tool-group__head {
  display: flex; align-items: baseline; gap: 12px;
  flex-wrap: wrap; margin-bottom: 6px;
}
.tool-group__head h2 { margin: 0; }
.tool-group__tag {
  font-size: var(--fs-xs); font-weight: 600; padding: 3px 10px;
  border-radius: var(--r-full); background: var(--c-brand-50); color: var(--c-brand-700);
}
.tool-group__desc { color: var(--c-muted); font-size: var(--fs-sm); margin-bottom: 22px; max-width: 60ch; }

/* Card công cụ nhỏ gọn cho nhóm tính nhanh */
.mini-card {
  display: flex; gap: 14px; align-items: flex-start;
  background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-md);
  padding: 18px; text-decoration: none;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.mini-card:hover {
  border-color: var(--c-brand-300); box-shadow: var(--sh-2);
  transform: translateY(-2px); text-decoration: none;
}
.mini-card__icon {
  width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0;
  background: var(--c-brand-50); color: var(--c-brand-600);
  display: grid; place-items: center;
}
.mini-card__icon svg { width: 18px; height: 18px; }
.mini-card h3 { font-size: var(--fs-base); margin-bottom: 3px; }
.mini-card p { font-size: var(--fs-sm); color: var(--c-muted); margin: 0; }

/* Bảng quy đổi đơn vị */
.conv-row {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px;
  align-items: center; padding: 14px 0;
}
.conv-row + .conv-row { border-top: 1px solid var(--c-line-2); }
.conv-row__arrow { color: var(--c-muted); font-size: var(--fs-lg); }
@media (max-width: 560px) {
  .conv-row { grid-template-columns: 1fr; gap: 8px; }
  .conv-row__arrow { transform: rotate(90deg); justify-self: center; }
}

/* ---------- 23. Utilities ---------- */
.text-muted { color: var(--c-muted); }
.text-sm  { font-size: var(--fs-sm); }
.text-xs  { font-size: var(--fs-xs); }
.text-center { text-align: center; }
.mt-0 { margin-top: 0; } .mt-1 { margin-top: 8px; }  .mt-2 { margin-top: 16px; }
.mt-3 { margin-top: 24px; } .mt-4 { margin-top: 32px; }
.mb-0 { margin-bottom: 0; } .mb-2 { margin-bottom: 16px; } .mb-3 { margin-bottom: 24px; }
.flex { display: flex; } .items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-1 { gap: 8px; } .gap-2 { gap: 16px; }
.flex-wrap { flex-wrap: wrap; }
.w-full { width: 100%; }

@media print {
  .site-header, .site-footer, .nav, .btn, .toc, .breadcrumb, .toast-host { display: none !important; }
  body { font-size: 12pt; }
  .tool-layout { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  html { scroll-behavior: auto; }
}