/* ============================================================
   HospiGuide.org — Shared Stylesheet
   All pages import this file for consistent design system.
   ============================================================ */

/* --- DESIGN TOKENS --- */
:root {
  --navy: #1B4965;
  --navy-deep: #0F2D40;
  --teal: #1D8B7A;
  --teal-hover: #167A6B;
  --teal-light: #E6F5F1;
  --amber: #C08B20;
  --amber-light: #FDF5E3;
  --red: #C0392B;
  --red-light: #FDE8E8;
  --purple: #6C5B8A;
  --purple-light: #EDE8F5;
  --bg: #F7F6F3;
  --surface: #FFFFFF;
  --surface-alt: #EEECE7;
  --text: #1F2937;
  --text-secondary: #5C5E63;
  --text-on-navy: #F0EDE8;
  --border: #DDD9D2;
  --border-subtle: #E8E5DF;
  --star: #E0A800;
  --star-empty: #D5D2CC;
  --rating-good: #1D8B7A;
  --rating-mid: #C08B20;
  --rating-low: #B44D3E;
  --shadow-xs: 0 1px 2px rgba(27,49,65,0.04);
  --shadow: 0 1px 3px rgba(27,49,65,0.06), 0 1px 2px rgba(27,49,65,0.04);
  --shadow-md: 0 4px 6px -1px rgba(27,49,65,0.07), 0 2px 4px -2px rgba(27,49,65,0.05);
  --shadow-hover: 0 10px 25px -5px rgba(27,49,65,0.1), 0 4px 10px -3px rgba(27,49,65,0.05);
  --shadow-card: 0 2px 8px rgba(27,49,65,0.05), 0 0 0 1px rgba(27,49,65,0.02);
  --radius: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;

  --font-display: 'DM Serif Text', Georgia, 'Times New Roman', serif;
  --font-body: 'Atkinson Hyperlegible Next', 'Verdana', 'Arial', sans-serif;

  --fs-hero: clamp(2.25rem, 4.5vw, 3.25rem);
  --fs-h1: clamp(1.75rem, 3.5vw, 2.5rem);
  --fs-h2: clamp(1.5rem, 3vw, 2rem);
  --fs-h3: 1.25rem;
  --fs-body: 1.125rem;
  --fs-small: 0.9375rem;
  --fs-caption: 0.8125rem;
  --fs-tag: 0.75rem;

  --max-w: 1120px;
  --max-w-narrow: 780px;
  --gutter: max(16px, env(safe-area-inset-left, 0px));
  --gutter-r: max(16px, env(safe-area-inset-right, 0px));
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* --- DARK THEME --- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --navy: #8BBAD0;
    --navy-deep: #1B4965;
    --teal: #5EC7AC;
    --teal-hover: #4EB99E;
    --teal-light: #152D26;
    --amber: #E0B84A;
    --amber-light: #2A2312;
    --red: #E74C3C;
    --red-light: #3A1A1A;
    --purple: #A090C4;
    --purple-light: #2A2538;
    --bg: #171717;
    --surface: #222222;
    --surface-alt: #2A2A2A;
    --text: #EAEAE8;
    --text-secondary: #9CA3AF;
    --text-on-navy: #E8E6E1;
    --border: #363636;
    --border-subtle: #2E2E2E;
    --star: #E0B84A;
    --star-empty: #3D3D39;
    --shadow-xs: 0 1px 2px rgba(0,0,0,0.2);
    --shadow: 0 1px 3px rgba(0,0,0,0.25), 0 1px 2px rgba(0,0,0,0.15);
    --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.3), 0 2px 4px -2px rgba(0,0,0,0.2);
    --shadow-hover: 0 10px 25px -5px rgba(0,0,0,0.4), 0 4px 10px -3px rgba(0,0,0,0.2);
    --shadow-card: 0 2px 8px rgba(0,0,0,0.2), 0 0 0 1px rgba(255,255,255,0.04);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --navy: #8BBAD0;
  --navy-deep: #1B4965;
  --teal: #5EC7AC;
  --teal-hover: #4EB99E;
  --teal-light: #152D26;
  --amber: #E0B84A;
  --amber-light: #2A2312;
  --red: #E74C3C;
  --red-light: #3A1A1A;
  --purple: #A090C4;
  --purple-light: #2A2538;
  --bg: #171717;
  --surface: #222222;
  --surface-alt: #2A2A2A;
  --text: #EAEAE8;
  --text-secondary: #9CA3AF;
  --text-on-navy: #E8E6E1;
  --border: #363636;
  --border-subtle: #2E2E2E;
  --star: #E0B84A;
  --star-empty: #3D3D39;
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.2);
  --shadow: 0 1px 3px rgba(0,0,0,0.25), 0 1px 2px rgba(0,0,0,0.15);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.3), 0 2px 4px -2px rgba(0,0,0,0.2);
  --shadow-hover: 0 10px 25px -5px rgba(0,0,0,0.4), 0 4px 10px -3px rgba(0,0,0,0.2);
  --shadow-card: 0 2px 8px rgba(0,0,0,0.2), 0 0 0 1px rgba(255,255,255,0.04);
  color-scheme: dark;
}

/* --- RESET & BASE --- */
* { box-sizing: border-box; margin: 0; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.65;
  padding-left: var(--gutter);
  padding-right: var(--gutter-r);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: var(--teal); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

a:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
  border-radius: 4px;
}

img { max-width: 100%; display: block; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* --- HEADER --- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--bg) 85%, transparent);
  backdrop-filter: blur(12px) saturate(1.6);
  -webkit-backdrop-filter: blur(12px) saturate(1.6);
  border-bottom: 1px solid var(--border-subtle);
}

/* Logo trái · menu bám sát logo · icon search đẩy ra mép phải.
   `flex: 1` cho <nav> là mấu chốt: nav phải chiếm hết chiều rộng còn lại thì
   `margin-left: auto` trên icon search mới có không gian để đẩy. Thiếu nó, nav
   chỉ rộng bằng nội dung và icon dính ngay sau "About". */
.header-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: flex;
  align-items: center;
  padding-block: 0.75rem;
  gap: 2.5rem;
}

.site-header nav { flex: 1; }

.logo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  color: var(--text);
  flex-shrink: 0;
}

.logo:hover { text-decoration: none; }

.logo-icon { width: 36px; height: 36px; }

.logo-text {
  font-family: var(--font-display);
  font-size: 1.5rem;
  line-height: 1;
  letter-spacing: -0.01em;
}

.logo-text span { color: var(--teal); }

/* 🔴 PHẢI giới hạn trong .site-header.
 *
 * Mockup tĩnh dùng `nav { display: flex }` trần vì trang đó chỉ có một <nav>.
 * Bản PHP có bốn loại: header, breadcrumb, mục lục bài viết (.toc), và phân
 * trang. Selector trần áp flex cho TẤT CẢ — mục lục xếp NGANG thành một hàng
 * chữ chen nhau thay vì danh sách dọc, và `nav a { padding + background }`
 * biến mọi link trong đó thành nút.
 *
 * Triệu chứng chỉ lộ ra ở trang có sidebar, nên rất dễ lọt qua kiểm thử
 * trang chủ. Giữ `.site-header` ở đây là bắt buộc, không phải tuỳ chọn. */
.site-header nav {
  display: flex;
  align-items: center;
  gap: 0.125rem;
}

.site-header nav a {
  color: var(--text-secondary);
  text-decoration: none;
  font-size: var(--fs-small);
  font-weight: 600;
  padding: 0.5rem 0.875rem;
  border-radius: var(--radius);
  transition: color 0.2s var(--ease-out), background 0.2s var(--ease-out);
}

.site-header nav a:hover,
.site-header nav a:focus-visible {
  color: var(--text);
  background: var(--surface-alt);
  text-decoration: none;
}

.site-header nav a.active {
  color: var(--teal);
  background: var(--teal-light);
}

.nav-toggle {
  display: none;
  background: none;
  border: none;
  color: var(--text);
  padding: 0.5rem;
  cursor: pointer;
  border-radius: var(--radius);
}

.nav-toggle:hover { background: var(--surface-alt); }

@media (max-width: 700px) {
  /* 🔴 `.site-header` bắt buộc: `nav { display: none }` trần sẽ ẩn LUÔN
     breadcrumb, mục lục bài viết và cả thanh phân trang trên điện thoại —
     ba thứ mà người đọc trên màn hình nhỏ cần nhất. */
  .site-header nav { display: none; }

  .site-header nav.open {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    padding: 0.5rem 1rem 0.75rem;
    box-shadow: var(--shadow-hover);
    gap: 0.125rem;
  }

  .nav-toggle { display: block; }
}

/* --- PAGE HERO (reusable for inner pages) --- */
.page-hero {
  background: linear-gradient(145deg, #1B4965 0%, #143B55 50%, #0F2D40 100%);
  color: #F0EDE8;
  margin-left: calc(-1 * var(--gutter));
  margin-right: calc(-1 * var(--gutter-r));
  padding: 2.75rem var(--gutter) 2.25rem;
  position: relative;
  overflow: hidden;
}

.page-hero::after {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background: radial-gradient(ellipse at 80% 20%, rgba(29,139,122,0.12) 0%, transparent 60%);
  pointer-events: none;
}

.page-hero-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.page-hero h1 {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  line-height: 1.25;
  text-wrap: balance;
  letter-spacing: -0.01em;
}

.page-hero p {
  margin-top: 0.625rem;
  opacity: 0.88;
  max-width: 600px;
  line-height: 1.6;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .page-hero { background: linear-gradient(145deg, #0F2D40 0%, #0A2030 50%, #071820 100%); }
}
:root[data-theme="dark"] .page-hero { background: linear-gradient(145deg, #0F2D40 0%, #0A2030 50%, #071820 100%); }

/* ============================================================
   BREADCRUMBS
   ------------------------------------------------------------
   🔴 Khớp markup do helpers/view.php::breadcrumb_render() sinh:
      nav.breadcrumb-nav > div.container > ol.breadcrumb > li

   Mockup tĩnh dùng .breadcrumbs (số nhiều) với <span class="sep">;
   hàm PHP dùng <ol><li> và dấu phân cách bằng ::before. Chỉ style
   một trong hai thì breadcrumb hiện thành danh sách đánh số dọc —
   list-style mặc định của <ol>.
   Giữ <ol><li> vì đó là markup đúng chuẩn cho breadcrumb; CSS phải
   theo nó, không ngược lại. Cả hai tên class đều được style ở đây
   để template cũ (nếu còn) không vỡ.
   ============================================================ */
.breadcrumb-nav {
  background: var(--surface);
  border-bottom: 1px solid var(--border-subtle);
  margin-left: calc(-1 * var(--gutter));
  margin-right: calc(-1 * var(--gutter-r));
  padding-inline: var(--gutter);
}

.breadcrumb-nav .container {
  max-width: var(--max-w);
  margin: 0 auto;
}

.breadcrumb,
.breadcrumbs {
  list-style: none;           /* <ol> mặc định có số — phải bỏ */
  margin: 0;
  padding: 0.75rem 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem;
  font-size: var(--fs-caption);
  color: var(--text-secondary);
}

.breadcrumb li {
  display: inline-flex;
  align-items: center;
  margin: 0;
}

/* Dấu phân cách sinh bằng ::before, không phải ký tự trong HTML:
   screen reader bỏ qua content của pseudo-element, nên không đọc
   "Home slash Hospitals slash" — chỉ đọc các mục thật. */
.breadcrumb li + li::before {
  content: '/';
  margin: 0 0.5rem;
  opacity: 0.4;
  flex-shrink: 0;
}

.breadcrumb a,
.breadcrumbs a {
  color: var(--text-secondary);
  text-decoration: underline;
  text-decoration-color: var(--border);
  text-underline-offset: 3px;
}

.breadcrumb a:hover,
.breadcrumbs a:hover {
  color: var(--teal);
  text-decoration-color: var(--teal);
}

/* Mục cuối = trang hiện tại. Đậm hơn để mắt biết mình đang ở đâu,
   nhưng không phải link. */
.breadcrumb [aria-current="page"] {
  color: var(--text);
  font-weight: 600;
}

.breadcrumbs .sep { margin: 0 0.25rem; opacity: 0.4; }

/* Màn hình hẹp: breadcrumb dài (Home / Hospitals / Alabama /
   Birmingham / Tên bệnh viện) chiếm 3 dòng. Cuộn ngang trong chính
   nó thay vì đẩy cả trang sang ngang. */
@media (max-width: 560px) {
  .breadcrumb {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .breadcrumb::-webkit-scrollbar { display: none; }
  .breadcrumb li { flex-shrink: 0; }
}

/* --- SECTION COMMON --- */
.section {
  max-width: var(--max-w);
  margin: 0 auto;
  padding-block: 3rem;
}

.section + .section { padding-top: 0; }

.section-head { margin-bottom: 1.75rem; }

.section-head h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  line-height: 1.25;
  text-wrap: balance;
  letter-spacing: -0.01em;
}

.section-head p {
  color: var(--text-secondary);
  margin-top: 0.625rem;
  max-width: 600px;
  line-height: 1.6;
}

/* --- BUTTONS --- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.375rem;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: 600;
  cursor: pointer;
  border: none;
  text-decoration: none;
  transition: all 0.2s var(--ease-out);
  white-space: nowrap;
}

.btn:hover { text-decoration: none; }

.btn-primary {
  background: var(--teal);
  color: white;
  box-shadow: 0 1px 2px rgba(29,139,122,0.2), 0 0 0 1px rgba(29,139,122,0.1);
}
.btn-primary:hover {
  background: var(--teal-hover);
  box-shadow: 0 2px 6px rgba(29,139,122,0.25), 0 0 0 1px rgba(29,139,122,0.15);
  transform: translateY(-1px);
}

.btn-secondary {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-xs);
}
.btn-secondary:hover {
  border-color: var(--teal);
  box-shadow: var(--shadow);
}

.btn-small {
  padding: 0.5rem 0.875rem;
  font-size: var(--fs-caption);
}

.btn-icon {
  width: 18px;
  height: 18px;
}

/* --- FORM ELEMENTS --- */
.input, .select {
  padding: 0.75rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: var(--fs-small);
  background: var(--surface);
  color: var(--text);
  transition: border-color 0.2s, box-shadow 0.2s;
  width: 100%;
  box-shadow: var(--shadow-xs);
}

.input:focus, .select:focus {
  outline: none;
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(29,139,122,0.12), var(--shadow-xs);
}

.input::placeholder { color: var(--text-secondary); opacity: 0.7; }

.select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='%235C5E63' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  padding-right: 2.5rem;
}

label {
  display: block;
  font-size: var(--fs-caption);
  font-weight: 600;
  color: var(--text);
  margin-bottom: 0.375rem;
}

/* --- TAGS / BADGES --- */
.tag {
  display: inline-block;
  padding: 0.2rem 0.625rem;
  border-radius: 4px;
  font-size: var(--fs-tag);
  font-weight: 600;
  letter-spacing: 0.02em;
}

.tag-teal { background: var(--teal-light); color: var(--teal); }
.tag-amber { background: var(--amber-light); color: var(--amber); }
.tag-red { background: var(--red-light); color: var(--red); }
.tag-purple { background: var(--purple-light); color: var(--purple); }

/* --- STAR RATING --- */
.stars {
  display: inline-flex;
  gap: 2px;
  align-items: center;
}

.stars svg { width: 18px; height: 18px; }
.stars .filled { color: var(--star); }
.stars .empty { color: var(--star-empty); }

.star-label {
  margin-left: 0.375rem;
  font-weight: 700;
  font-size: var(--fs-small);
}

/* --- HOSPITAL CARD (listing pages) --- */
.hospital-card {
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 1.375rem 1.5rem;
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
  transition: all 0.25s var(--ease-out);
  text-decoration: none;
  color: var(--text);
  box-shadow: var(--shadow-xs);
}

.hospital-card:hover {
  box-shadow: var(--shadow-hover);
  border-color: var(--teal);
  text-decoration: none;
  transform: translateY(-2px);
}

.hospital-card-main { flex: 1; min-width: 0; }

.hospital-card h3 {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  line-height: 1.3;
  margin-bottom: 0.25rem;
}

.hospital-card .hospital-meta {
  font-size: var(--fs-caption);
  color: var(--text-secondary);
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 0.375rem;
}

.hospital-card .hospital-meta span {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.hospital-card-stats {
  display: flex;
  gap: 1rem;
  margin-top: 0.875rem;
  flex-wrap: wrap;
}

.hospital-card-stat {
  display: flex;
  flex-direction: column;
  font-size: var(--fs-caption);
  color: var(--text-secondary);
}

.hospital-card-stat strong {
  font-size: var(--fs-small);
  color: var(--text);
}

.hospital-card-rating {
  flex-shrink: 0;
  text-align: center;
  min-width: 80px;
  padding: 0.5rem 0;
}

.hospital-card-rating .rating-num {
  font-family: var(--font-display);
  font-size: 2rem;
  line-height: 1;
  color: var(--text);
}

.hospital-card-rating .rating-label {
  font-size: var(--fs-caption);
  color: var(--text-secondary);
  margin-top: 0.25rem;
}

@media (max-width: 550px) {
  .hospital-card { flex-direction: column; }
  .hospital-card-rating {
    flex-direction: row;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: auto;
    padding: 0;
  }
}

/* --- FILTER SIDEBAR --- */
.filter-panel {
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 1.375rem;
  box-shadow: var(--shadow);
}

.filter-panel h3 {
  font-size: var(--fs-small);
  font-weight: 700;
  margin-bottom: 0.75rem;
}

.filter-group { margin-bottom: 1.25rem; }
.filter-group:last-child { margin-bottom: 0; }

.filter-group label {
  margin-bottom: 0.25rem;
}

.checkbox-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.checkbox-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--fs-small);
  cursor: pointer;
}

.checkbox-item input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--teal);
  border-radius: 4px;
}

/* ============================================================
   PAGINATION
   ------------------------------------------------------------
   🔴 Khớp markup do helpers/view.php::pagination_render() sinh:
      nav.pagination-wrap > p.pagination-status + div.pagination
      Trong .pagination: a · span.page-current · span.page-gap

   Mockup tĩnh dùng .active và .disabled; hàm PHP dùng .page-current
   và .page-gap. Chỉ style theo mockup thì ô trang hiện tại không
   được tô màu — người dùng không biết mình đang ở trang nào.
   Cả hai bộ tên đều được style ở đây.
   ============================================================ */
.pagination-wrap { margin-top: 2rem; }

.pagination-status {
  text-align: center;
  font-size: var(--fs-caption);
  color: var(--text-secondary);
  margin-bottom: 0.75rem;
}
.pagination-status strong { color: var(--text); }

.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.375rem;
}

/* .pagination-wrap đã có margin-top; tránh cộng dồn khi lồng nhau */
.pagination-wrap .pagination { margin-top: 0; }

.pagination a,
.pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 0.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--text-secondary);
  text-decoration: none;
  transition: all 0.2s var(--ease-out);
}

.pagination a:hover {
  border-color: var(--teal);
  color: var(--teal);
  text-decoration: none;
  background: var(--teal-light);
}

/* Trang hiện tại. .active là tên của mockup, .page-current là tên
   hàm PHP thật sự sinh ra — giữ cả hai. */
.pagination .active,
.pagination .page-current {
  background: var(--teal);
  color: #fff;
  border-color: var(--teal);
  box-shadow: 0 1px 3px rgba(29,139,122,0.2);
}

/* Dấu "…" giữa các dải số: không phải nút, nên bỏ viền và khung. */
.pagination .page-gap {
  border-color: transparent;
  background: none;
  min-width: 24px;
  color: var(--text-secondary);
  opacity: 0.6;
}

.pagination .disabled {
  opacity: 0.35;
  pointer-events: none;
}

/* --- DATA TABLE --- */
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-small);
}

.data-table th {
  text-align: left;
  padding: 0.75rem 1rem;
  background: var(--surface-alt);
  font-weight: 700;
  font-size: var(--fs-caption);
  color: var(--text-secondary);
  border-bottom: 2px solid var(--border);
  white-space: nowrap;
}

.data-table td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border-subtle);
  vertical-align: top;
}

.data-table tbody tr {
  transition: background 0.15s;
}

.data-table tbody tr:hover {
  background: var(--teal-light);
}

/* --- METRIC CARDS (hospital profile) --- */
.metric-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
}

.metric-card {
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 1.125rem 1.25rem;
  text-align: center;
  box-shadow: var(--shadow-xs);
  transition: box-shadow 0.2s var(--ease-out);
}

.metric-card:hover { box-shadow: var(--shadow-md); }

.metric-card .metric-value {
  font-family: var(--font-display);
  font-size: 1.75rem;
  line-height: 1;
  margin-bottom: 0.25rem;
}

.metric-card .metric-label {
  font-size: var(--fs-caption);
  color: var(--text-secondary);
}

.metric-card .metric-compare {
  font-size: var(--fs-tag);
  margin-top: 0.375rem;
  font-weight: 600;
}

.metric-better { color: var(--rating-good); }
.metric-same { color: var(--rating-mid); }
.metric-worse { color: var(--rating-low); }

/* --- COMPARISON TABLE --- */
.compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-small);
}

.compare-table th {
  padding: 1rem;
  text-align: center;
  background: var(--surface);
  border-bottom: 2px solid var(--border);
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  min-width: 180px;
}

.compare-table th:first-child {
  text-align: left;
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  font-weight: 700;
  color: var(--text-secondary);
  min-width: 160px;
}

.compare-table td {
  padding: 0.75rem 1rem;
  text-align: center;
  border-bottom: 1px solid var(--border-subtle);
  vertical-align: middle;
}

.compare-table td:first-child {
  text-align: left;
  font-weight: 600;
  color: var(--text-secondary);
  font-size: var(--fs-caption);
}

.compare-table tbody tr { transition: background 0.15s; }
.compare-table tbody tr:hover { background: var(--teal-light); }

.compare-table .compare-best {
  background: var(--teal-light);
  font-weight: 700;
}

/* --- CONTENT / ARTICLE STYLES --- */
.article-content {
  max-width: var(--max-w-narrow);
  margin: 0 auto;
  padding-block: 2.5rem;
}

.article-content h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  margin-top: 2.5rem;
  margin-bottom: 1rem;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.article-content h3 {
  font-family: var(--font-body);
  font-size: var(--fs-h3);
  font-weight: 700;
  margin-top: 2rem;
  margin-bottom: 0.75rem;
}

.article-content p {
  margin-bottom: 1rem;
  line-height: 1.75;
}

.article-content ul, .article-content ol {
  margin-bottom: 1rem;
  padding-left: 1.5rem;
}

.article-content li {
  margin-bottom: 0.5rem;
  line-height: 1.65;
}

.article-content blockquote {
  border-left: 3px solid var(--teal);
  padding: 1rem 1.5rem;
  margin: 1.5rem 0;
  background: var(--teal-light);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-style: italic;
  color: var(--text-secondary);
}

.article-header {
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--border-subtle);
}

.article-header h1 {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  line-height: 1.25;
  text-wrap: balance;
  margin-bottom: 0.75rem;
  letter-spacing: -0.01em;
}

.article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  font-size: var(--fs-caption);
  color: var(--text-secondary);
  align-items: center;
}

.article-meta span {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

/* --- CALLOUT BOX --- */
.callout {
  border-radius: var(--radius-lg);
  padding: 1.25rem 1.5rem;
  margin: 1.5rem 0;
}

.callout-info { background: var(--teal-light); border-left: 3px solid var(--teal); }
.callout-warning { background: var(--amber-light); border-left: 3px solid var(--amber); }
.callout-danger { background: var(--red-light); border-left: 3px solid var(--red); }

.callout h4 {
  font-weight: 700;
  margin-bottom: 0.375rem;
}

.callout p {
  font-size: var(--fs-small);
  color: var(--text-secondary);
  margin-bottom: 0;
}

/* --- GUIDE / BLOG CARDS --- */
.content-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1.25rem;
}

.content-card {
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-decoration: none;
  color: var(--text);
  transition: all 0.25s var(--ease-out);
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-xs);
}

.content-card:hover {
  box-shadow: var(--shadow-hover);
  text-decoration: none;
  transform: translateY(-2px);
}

.content-card-accent { height: 3px; }

.content-card-body {
  padding: 1.375rem 1.5rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.content-card .card-tag {
  font-size: var(--fs-caption);
  font-weight: 600;
  color: var(--teal);
}

.content-card h3 {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  line-height: 1.3;
}

.content-card p {
  font-size: var(--fs-small);
  color: var(--text-secondary);
  line-height: 1.55;
  flex: 1;
}

.content-card-footer {
  font-size: var(--fs-caption);
  color: var(--text-secondary);
  padding-top: 0.625rem;
  border-top: 1px solid var(--border-subtle);
  margin-top: auto;
}

/* ============================================================
   TABLE OF CONTENTS (sidebar)
   ------------------------------------------------------------
   🔴 Sticky BẮT BUỘC phải có nền đục và z-index.
   Không có nền, khi cuộn thì các khối phía dưới trong sidebar
   trượt qua PHÍA SAU TOC và chữ chồng lên nhau — trông như lỗi
   font. Đây là bẫy kinh điển của position:sticky, và nó chỉ lộ
   ra khi cuộn nên dễ lọt qua kiểm thử ảnh tĩnh.

   max-height + overflow cũng bắt buộc: bài 15 mục lục dài hơn
   màn hình thì phần cuối bị cắt và không cách nào tới được.
   ============================================================ */
.toc {
  position: sticky;
  top: 5rem;
  z-index: 2;
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 1rem 0.875rem;
  box-shadow: var(--shadow-xs);
  max-height: calc(100vh - 7rem);
  overflow-y: auto;
  overscroll-behavior: contain;   /* cuộn hết TOC không kéo theo cả trang */
}

/* Thanh cuộn mảnh, chỉ hiện khi cần — thanh mặc định của Windows chiếm
   17px và bóp hẹp phần chữ. */
.toc { scrollbar-width: thin; }
.toc::-webkit-scrollbar { width: 6px; }
.toc::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 3px;
}

.toc h4 {
  font-size: var(--fs-caption);
  font-weight: 700;
  color: var(--text-secondary);
  margin-bottom: 0.75rem;
  letter-spacing: 0.02em;
}

.toc a {
  display: block;
  padding: 0.375rem 0.75rem;
  font-size: var(--fs-caption);
  color: var(--text-secondary);
  border-left: 2px solid var(--border-subtle);
  text-decoration: none;
  transition: color 0.2s, border-color 0.2s;
}

.toc a:hover, .toc a.active {
  color: var(--teal);
  border-color: var(--teal);
}

/* --- TABS --- */
.tabs {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--border-subtle);
  margin-bottom: 1.5rem;
  overflow-x: auto;
}

.tab {
  padding: 0.75rem 1.25rem;
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--text-secondary);
  border: none;
  background: none;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  white-space: nowrap;
  transition: color 0.2s, border-color 0.2s;
  font-family: var(--font-body);
}

.tab:hover { color: var(--text); }
.tab.active { color: var(--teal); border-bottom-color: var(--teal); }

.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* --- AD SLOT --- */
.ad-slot {
  background: var(--surface-alt);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  padding: 0.75rem;
  text-align: center;
  font-size: var(--fs-caption);
  color: var(--text-secondary);
  margin-block: 1.5rem;
}

/* --- DISCLAIMER --- */
.disclaimer {
  background: var(--amber-light);
  border: 1px solid color-mix(in srgb, var(--amber) 40%, transparent);
  border-radius: var(--radius-lg);
  padding: 1.125rem 1.375rem;
  font-size: var(--fs-caption);
  color: var(--text-secondary);
  line-height: 1.65;
}

.disclaimer strong { color: var(--text); }

/* --- FOOTER --- */
.site-footer {
  margin-left: calc(-1 * var(--gutter));
  margin-right: calc(-1 * var(--gutter-r));
  background: var(--surface-alt);
  border-top: 1px solid var(--border-subtle);
  padding: 3rem var(--gutter) 1.5rem;
  margin-top: 3.5rem;
}

.footer-inner { max-width: var(--max-w); margin: 0 auto; }

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 2rem;
  margin-bottom: 2.5rem;
}

@media (max-width: 700px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 440px) { .footer-grid { grid-template-columns: 1fr; } }

.footer-brand p {
  font-size: var(--fs-small);
  color: var(--text-secondary);
  line-height: 1.6;
  margin-top: 0.625rem;
  max-width: 320px;
}

.footer-col h4 {
  font-size: var(--fs-caption);
  font-weight: 700;
  color: var(--text);
  margin-bottom: 0.75rem;
  letter-spacing: 0.025em;
}

.footer-col a {
  display: block;
  font-size: var(--fs-small);
  color: var(--text-secondary);
  text-decoration: none;
  padding-block: 0.3rem;
  transition: color 0.15s;
}

.footer-col a:hover { color: var(--teal); }

.footer-bottom {
  border-top: 1px solid var(--border);
  padding-top: 1.25rem;
  font-size: var(--fs-caption);
  color: var(--text-secondary);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem;
}

/* --- LAYOUT HELPERS --- */
.layout-sidebar {
  max-width: var(--max-w);
  margin: 0 auto;
  padding-block: 2rem;
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 2rem;
  align-items: start;
}

@media (max-width: 800px) {
  .layout-sidebar {
    grid-template-columns: 1fr;
  }
}

.layout-content-sidebar {
  max-width: var(--max-w);
  margin: 0 auto;
  padding-block: 2rem;
  display: grid;
  grid-template-columns: 1fr 240px;
  gap: 3rem;
  align-items: start;
}

/* 🔴 GHIM CẢ <aside>, KHÔNG PHẢI CHỈ .toc.
 *
 * Vì sao không ghim riêng TOC: `position: sticky` chỉ trượt được TRONG phạm vi
 * phần tử CHA. Với `align-items: start` ở trên, <aside> co lại đúng bằng chiều
 * cao nội dung — TOC dính được đúng chiều cao đó rồi cuộn mất, trông như sticky
 * không hoạt động. Đó chính là lỗi ở trang tĩnh.
 *
 * Kéo <aside> cao bằng cột nội dung (align-self: stretch) thì sticky có phạm vi,
 * nhưng sidebar bài viết có BỐN khối (TOC + quảng cáo + 2 panel) — chỉ TOC dính
 * thì ba khối kia bị đẩy xuống đáy cột đã kéo dài.
 *
 * Ghim cả <aside> giải quyết cả hai: mọi khối đi cùng nhau và cùng dính. Khi đó
 * .toc KHÔNG được sticky nữa (sticky lồng sticky gây giật trên Safari) —
 * xem luật ghi đè ở khối .toc bên dưới.
 */
.layout-content-sidebar > aside {
  position: sticky;
  top: 5rem;
  align-self: start;

  /* Sidebar dài hơn màn hình thì tự cuộn trong chính nó — nếu không, các khối
     cuối (panel "Verify with Medicare") không bao giờ tới được. */
  max-height: calc(100vh - 6rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

.layout-content-sidebar > aside::-webkit-scrollbar { width: 6px; }
.layout-content-sidebar > aside::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 3px;
}

/* <aside> đã ghim rồi → TOC bên trong trở về tĩnh và bỏ giới hạn chiều cao
   riêng, để cuộn do <aside> điều khiển. */
.layout-content-sidebar > aside .toc {
  position: static;
  max-height: none;
  overflow: visible;
}

@media (max-width: 900px) {
  .layout-content-sidebar {
    grid-template-columns: 1fr;
  }

  /* Sidebar xuống dưới nội dung → bỏ ghim. Sticky trên màn hình nhỏ ăn mất
     30% chiều cao khả dụng và che chính thứ người đọc đang đọc. */
  .layout-content-sidebar > aside {
    position: static;
    max-height: none;
    overflow: visible;
  }

  /* TOC bài viết ẩn trên mobile: nó nằm SAU nội dung nên không còn tác dụng
     điều hướng — người đọc đã cuộn hết bài mới thấy nó.
     (Trang tĩnh thì khác — TOC ở đó được đưa lên ĐẦU, xem .page-layout.) */
  .layout-content-sidebar .toc { display: none; }
  .page-layout .toc { display: block; }
}

/* --- RESULTS COUNT / SORT BAR --- */
.results-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.25rem;
  font-size: var(--fs-small);
  color: var(--text-secondary);
}

.results-bar strong { color: var(--text); }

.sort-select {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* --- EMPTY STATE --- */
.empty-state {
  text-align: center;
  padding: 3.5rem 1rem;
  color: var(--text-secondary);
}

.empty-state svg { width: 48px; height: 48px; margin: 0 auto 1rem; opacity: 0.35; }
.empty-state h3 { font-size: var(--fs-body); margin-bottom: 0.5rem; color: var(--text); }
.empty-state p { font-size: var(--fs-small); max-width: 400px; margin: 0 auto; line-height: 1.6; }

/* --- LOADING SKELETON --- */
.skeleton {
  background: linear-gradient(90deg, var(--surface-alt) 25%, var(--border-subtle) 50%, var(--surface-alt) 75%);
  background-size: 200% 100%;
  animation: skeleton-pulse 1.5s ease infinite;
  border-radius: var(--radius);
}

@keyframes skeleton-pulse {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* --- MOBILE UTILITIES --- */
@media (max-width: 440px) {
  .hide-mobile { display: none !important; }
  .content-grid { grid-template-columns: 1fr; }
  .metric-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 700px) {
  .hide-tablet { display: none !important; }
}

/* ============================================================
   BỔ SUNG CHO BẢN PHP — các thành phần mockup tĩnh chưa có
   ============================================================ */

/* --- SKIP LINK (bắt buộc cho a11y; mockup thiếu) --- */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--teal);
  color: #fff;
  padding: 0.75rem 1.25rem;
  border-radius: 0 0 var(--radius) 0;
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus {
  left: 0;
  text-decoration: none;
}

/* --- BACK TO TOP --- */
.back-to-top {
  position: fixed;
  right: max(1rem, env(safe-area-inset-right, 0px));
  bottom: max(1rem, env(safe-area-inset-bottom, 0px));
  z-index: 40;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  background: var(--surface);
  color: var(--text-secondary);
  border: 1px solid var(--border);
  border-radius: 50%;
  box-shadow: var(--shadow-md);
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s, transform 0.2s var(--ease-out);
}
.back-to-top:hover {
  color: var(--teal);
  border-color: var(--teal);
  transform: translateY(-2px);
}
.back-to-top svg { width: 20px; height: 20px; }

/* --- STARS: trạng thái chưa xếp hạng --- */
.stars-none {
  font-size: var(--fs-caption);
  color: var(--text-secondary);
  font-style: italic;
}

/* --- THANH SO SÁNH (nổi dưới màn hình) --- */
.compare-bar {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: max(1rem, env(safe-area-inset-bottom, 0px));
  z-index: 45;
  display: flex;
  align-items: center;
  gap: 1rem;
  background: var(--navy-deep);
  color: var(--text-on-navy);
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-hover);
  font-size: var(--fs-small);
  max-width: calc(100vw - 2rem);
}
.compare-bar .btn-primary { padding: 0.5rem 1rem; }

/* --- NÚT THÊM VÀO SO SÁNH --- */
.compare-toggle {
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-secondary);
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  font-weight: 600;
  padding: 0.375rem 0.75rem;
  cursor: pointer;
  transition: all 0.2s var(--ease-out);
}
.compare-toggle:hover { border-color: var(--teal); color: var(--teal); }
.compare-toggle.active {
  background: var(--teal-light);
  border-color: var(--teal);
  color: var(--teal);
}
.compare-toggle.active::before { content: '✓ '; }
.compare-toggle[data-compare-full] {
  border-color: var(--amber);
  color: var(--amber);
}
.compare-toggle[data-compare-full]::after { content: ' — max 4'; }

/* --- HỘP XÁC MINH --- */
.verify-box h4 { margin-bottom: 0.5rem; }
.verify-box p { color: var(--text-secondary); }

/* --- BẢNG MEASURE TRÊN TRANG HỒ SƠ --- */
.measure-row-none td { color: var(--text-secondary); font-style: italic; }

.measure-help {
  display: block;
  font-size: var(--fs-tag);
  color: var(--text-secondary);
  font-weight: 400;
  font-style: normal;
  margin-top: 0.2rem;
  line-height: 1.5;
  max-width: 54ch;
}

.measure-source {
  font-size: var(--fs-tag);
  color: var(--text-secondary);
  opacity: 0.8;
}

/* --- THANH SO VỚI TRUNG VỊ --- */
.bar-compare {
  display: block;
  height: 5px;
  background: var(--surface-alt);
  border-radius: 3px;
  overflow: hidden;
  margin-top: 0.3rem;
  min-width: 70px;
}
.bar-compare span {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: var(--text-secondary);
}
.bar-better span { background: var(--rating-good); }
.bar-worse span  { background: var(--rating-low); }
.bar-same span   { background: var(--rating-mid); }

/* --- LƯỚI SỐ LIỆU TỔNG QUAN --- */
.rating-hero {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  box-shadow: var(--shadow);
  margin-bottom: 1.75rem;
}
.rating-hero-score { text-align: center; min-width: 120px; }
.rating-hero-score .rating-num {
  font-family: var(--font-display);
  font-size: 3.25rem;
  line-height: 1;
  color: var(--teal);
}
.rating-hero-body { flex: 1; min-width: 240px; }
.rating-hero-body h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  margin-bottom: 0.375rem;
}
.rating-hero-body p {
  font-size: var(--fs-small);
  color: var(--text-secondary);
  line-height: 1.6;
}

/* --- DANH SÁCH BỆNH VIỆN (khoảng cách giữa các card) --- */
.hospital-list {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}

/* --- LƯỚI THÀNH PHỐ --- */
.city-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 0.5rem;
}
.city-link {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.625rem 0.875rem;
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--text);
  font-size: var(--fs-small);
  box-shadow: var(--shadow-xs);
  transition: all 0.2s var(--ease-out);
}
.city-link:hover {
  border-color: var(--teal);
  box-shadow: var(--shadow-md);
  text-decoration: none;
  transform: translateY(-1px);
}
.city-link em {
  font-style: normal;
  color: var(--text-secondary);
  font-size: var(--fs-caption);
}

/* --- FORM LỌC --- */
.filter-form .btn { width: 100%; justify-content: center; margin-top: 0.25rem; }
.filter-reset {
  display: block;
  text-align: center;
  font-size: var(--fs-caption);
  margin-top: 0.5rem;
  color: var(--text-secondary);
}

/* --- NGỮ CẢNH ĐỊA PHƯƠNG --- */
.local-context {
  font-size: var(--fs-small);
  color: var(--text-secondary);
  line-height: 1.65;
  margin-bottom: 1.25rem;
}

/* --- AD SLOT: biến thể leaderboard --- */
.ad-slot-leaderboard { min-height: 90px; display: grid; place-items: center; }
.ad-slot-label { letter-spacing: 0.08em; text-transform: uppercase; font-size: var(--fs-tag); }

/* --- PHÂN TRANG: rel prev/next dùng nofollow --- */
.pagination-note {
  text-align: center;
  font-size: var(--fs-caption);
  color: var(--text-secondary);
  margin-top: 0.75rem;
}

/* --- TOC: markup do helpers/toc.php sinh (div.toc-title + ol) --- */
.toc-title {
  font-size: var(--fs-caption);
  font-weight: 700;
  color: var(--text-secondary);
  margin-bottom: 0.75rem;
  letter-spacing: 0.02em;
}

.toc ol {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: toc;
}

.toc li { margin: 0; }

/* Số thứ tự giúp người đọc biết bài dài bao nhiêu phần trước khi cuộn. */
.toc li a::before {
  counter-increment: toc;
  content: counter(toc) ". ";
  opacity: 0.5;
}

/* --- BÀI VIẾT: phần tử do CMS trả về --- */
.article-content table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-small);
  margin: 1.5rem 0;
  display: block;
  overflow-x: auto;
}
.article-content th {
  text-align: left;
  padding: 0.75rem 1rem;
  background: var(--surface-alt);
  font-weight: 700;
  font-size: var(--fs-caption);
  color: var(--text-secondary);
  border-bottom: 2px solid var(--border);
}
.article-content td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border-subtle);
  vertical-align: top;
}

.article-content img {
  border-radius: var(--radius-lg);
  margin: 1.5rem 0;
}

.article-content figcaption {
  font-size: var(--fs-caption);
  color: var(--text-secondary);
  text-align: center;
  margin-top: -0.75rem;
  margin-bottom: 1.5rem;
}

.article-content code {
  background: var(--surface-alt);
  padding: 0.1em 0.35em;
  border-radius: 4px;
  font-size: 0.9em;
}

.article-content hr {
  border: none;
  border-top: 1px solid var(--border-subtle);
  margin: 2.5rem 0;
}

/* Heading có anchor từ toc_extract — chừa chỗ cho header sticky khi nhảy tới. */
.article-content h2[id],
.article-content h3[id] { scroll-margin-top: 5rem; }

.article-nav a { max-width: 48%; }
@media (max-width: 600px) {
  .article-nav a { max-width: 100%; }
}

/* --- GLOSSARY --- */
.alpha-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin-bottom: 2rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--border-subtle);
}
.alpha-nav a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--text-secondary);
  text-decoration: none;
  transition: all 0.2s var(--ease-out);
}
.alpha-nav a:hover {
  border-color: var(--teal);
  color: var(--teal);
  background: var(--teal-light);
  text-decoration: none;
}

.alpha-heading {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  color: var(--teal);
  margin-top: 2.5rem;
  margin-bottom: 1rem;
  padding-bottom: 0.375rem;
  border-bottom: 2px solid var(--teal-light);
  scroll-margin-top: 5rem;
}

.glossary-item {
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--border-subtle);
  scroll-margin-top: 5rem;
}
.glossary-item:last-child { border-bottom: none; }

.glossary-term {
  font-family: var(--font-body);
  font-size: var(--fs-h3);
  font-weight: 700;
  margin-bottom: 0.375rem;
}
.glossary-term a { color: var(--text); }
.glossary-term a:hover { color: var(--teal); }

.glossary-full {
  display: block;
  font-size: var(--fs-caption);
  font-weight: 400;
  color: var(--text-secondary);
  margin-top: 0.125rem;
}

.glossary-def { margin-bottom: 0.625rem; }

.glossary-why {
  font-size: var(--fs-small);
  color: var(--text-secondary);
  line-height: 1.7;
  background: var(--surface);
  border-left: 3px solid var(--teal);
  padding: 0.75rem 1rem;
  border-radius: 0 var(--radius) var(--radius) 0;
  margin-bottom: 0.625rem;
}
.glossary-why strong { color: var(--text); }

.glossary-source { font-size: var(--fs-caption); margin-bottom: 0; }

/* --- FAQ --- */
.faq-item {
  border-bottom: 1px solid var(--border-subtle);
  padding: 1.25rem 0;
  scroll-margin-top: 5rem;
}
.faq-item:last-child { border-bottom: none; }

.faq-q {
  font-family: var(--font-body);
  font-size: var(--fs-h3);
  font-weight: 700;
  margin-bottom: 0.5rem;
  line-height: 1.35;
}

.faq-a { color: var(--text-secondary); line-height: 1.75; }
.faq-a p + p { margin-top: 0.75rem; }
.faq-a strong { color: var(--text); }

/* ============================================================
   HOMEPAGE — hero, stats bar, states grid
   Trích từ khối <style> inline của mockup index.html. Các class
   này do views/home.php dùng; để trong inline style của một file
   HTML tĩnh nghĩa là bản PHP mất sạch phần đầu trang.
   ============================================================ */

/* --- HERO (homepage-specific) --- */
.hero {
  background: linear-gradient(155deg, #1B4965 0%, #143B55 40%, #0F2D40 100%);
  color: var(--text-on-navy);
  margin-left: calc(-1 * var(--gutter));
  margin-right: calc(-1 * var(--gutter-r));
  padding: 4rem var(--gutter) 3.5rem;
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute;
  top: -30%; right: -10%;
  width: 50%; height: 140%;
  background: radial-gradient(ellipse, rgba(29,139,122,0.12) 0%, transparent 65%);
  pointer-events: none;
}
.hero::after {
  content: '';
  position: absolute;
  bottom: -40%; left: 10%;
  width: 40%; height: 80%;
  background: radial-gradient(ellipse, rgba(29,139,122,0.06) 0%, transparent 65%);
  pointer-events: none;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .hero { background: linear-gradient(155deg, #0F2D40 0%, #0A2030 40%, #071820 100%); }
}
:root[data-theme="dark"] .hero { background: linear-gradient(155deg, #0F2D40 0%, #0A2030 40%, #071820 100%); }

.hero-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
.hero h1 {
  font-family: var(--font-display);
  font-size: var(--fs-hero);
  line-height: 1.15;
  max-width: 680px;
  text-wrap: balance;
  letter-spacing: -0.01em;
}
.hero-sub {
  margin-top: 1rem;
  font-size: var(--fs-body);
  max-width: 580px;
  line-height: 1.65;
  opacity: 0.88;
}
.search-box {
  margin-top: 2rem;
  display: flex;
  gap: 0.5rem;
  max-width: 560px;
}
.search-box input {
  flex: 1;
  padding: 0.875rem 1.25rem;
  border: 2px solid transparent;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: #2C2C2C;
  min-width: 0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  transition: border-color 0.2s;
}
.search-box input:focus {
  outline: none;
  border-color: var(--teal);
}
.search-box button {
  background: var(--teal);
  color: white;
  border: none;
  padding: 0.875rem 1.5rem;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(29,139,122,0.25);
  transition: all 0.2s var(--ease-out);
}
.search-box button:hover {
  background: var(--teal-hover);
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(29,139,122,0.3);
}
.hero-cta-row {
  margin-top: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  font-size: var(--fs-small);
}
.hero-cta-row a {
  color: var(--text-on-navy);
  text-decoration: none;
  opacity: 0.8;
  transition: opacity 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}
.hero-cta-row a::before {
  content: '→';
  font-size: 0.875em;
  opacity: 0.6;
}
.hero-cta-row a:hover { opacity: 1; text-decoration: none; }

/* --- STATS BAR --- */
.stats-bar {
  background: var(--surface);
  border-bottom: 1px solid var(--border-subtle);
  margin-left: calc(-1 * var(--gutter));
  margin-right: calc(-1 * var(--gutter-r));
  padding: 1.125rem var(--gutter);
  box-shadow: var(--shadow-xs);
}
.stats-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2.5rem;
}
.stat-item {
  font-size: var(--fs-small);
  color: var(--text-secondary);
  display: flex;
  align-items: baseline;
  gap: 0.25rem;
}
.stat-num {
  font-family: var(--font-display);
  font-size: 1.375rem;
  color: var(--teal);
}

/* ============================================================
   BROWSE STATES
   ------------------------------------------------------------
   Mỗi ô có ba thành phần theo thứ tự quét mắt: mã bang (neo thị
   giác, giúp tìm nhanh trong 51 ô), tên bang, rồi số bệnh viện.
   Bản trước gộp tên và số vào một dòng chữ đậm — mắt không phân
   biệt được đâu là nhãn đâu là dữ liệu, nên cả lưới đọc như một
   khối chữ. Tách phân cấp bằng cỡ chữ và màu, không bằng độ đậm.
   ============================================================ */
.states-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 0.625rem;
}

.state-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 0.875rem;
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: var(--text);
  box-shadow: var(--shadow-xs);
  transition: border-color 0.2s var(--ease-out),
              box-shadow 0.2s var(--ease-out),
              transform 0.2s var(--ease-out);
}

.state-link:hover,
.state-link:focus-visible {
  border-color: var(--teal);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
  text-decoration: none;
}

/* Mã bang: khối vuông nền nhạt. aria-hidden trong HTML vì tên bang
   ngay cạnh đã nói đủ — screen reader đọc "CA California" là thừa. */
.state-code {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: var(--radius);
  background: var(--surface-alt);
  color: var(--text-secondary);
  font-family: var(--font-display);
  font-size: 0.9375rem;
  letter-spacing: 0.02em;
  transition: background 0.2s var(--ease-out), color 0.2s var(--ease-out);
}

.state-link:hover .state-code,
.state-link:focus-visible .state-code {
  background: var(--teal-light);
  color: var(--teal);
}

.state-body {
  min-width: 0;          /* cho phép tên dài xuống dòng thay vì tràn ô */
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}

.state-name {
  font-size: var(--fs-small);
  font-weight: 600;
}

.state-count {
  font-size: var(--fs-tag);
  color: var(--text-secondary);
  font-weight: 400;
  margin-top: 1px;
}

/* Màn hình hẹp: bỏ ô mã bang, giữ hai cột để lưới không thành một
   cột dài 51 dòng. Mã bang là tiện ích quét mắt, không phải nội
   dung — bỏ được mà không mất thông tin nào. */
@media (max-width: 480px) {
  .states-grid { grid-template-columns: 1fr 1fr; gap: 0.5rem; }
  .state-code { display: none; }
  .state-link { padding: 0.625rem 0.75rem; }
}


/* Responsive cho hero — ô tìm kiếm xếp dọc trên điện thoại, nếu không thì
   input và nút chen nhau và nút bị cắt mất chữ. */
@media (max-width: 440px) {
  .hero { padding: 3rem var(--gutter) 2.5rem; }
  .search-box { flex-direction: column; }
  .search-box button { padding: 0.875rem; }
  .hero-cta-row { gap: 0.75rem; }
  .stats-inner { gap: 1.25rem; }
}

/* ============================================================
   HEADER — SUBMENU + SEARCH POPUP
   ------------------------------------------------------------
   Cả hai đều hoạt động không cần JS: submenu dùng :hover và
   :focus-within, popup dùng <details>/<summary> native.
   ============================================================ */

/* Chỉ dùng cho nhãn mà screen reader cần nhưng mắt không. */
.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;
}

/* --- SUBMENU --- */
.nav-item { position: relative; display: inline-flex; }

.nav-sub-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.nav-caret {
  width: 10px; height: 7px;
  opacity: 0.55;
  transition: transform 0.2s var(--ease-out);
}

.has-sub:hover .nav-caret,
.has-sub:focus-within .nav-caret { transform: rotate(180deg); }

.nav-sub {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 60;
  min-width: 268px;
  padding: 0.5rem;
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-hover);

  /* visibility + opacity thay vì display:none — display không chuyển động
     được, và nó cũng cắt phần tử khỏi thứ tự tab ngay cả khi đang mở. */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.18s var(--ease-out),
              transform 0.18s var(--ease-out),
              visibility 0.18s;
}

/* Vùng đệm vô hình nối trigger với panel: thiếu nó, chuột đi qua khe 6px
   giữa hai phần tử là submenu đóng ngay giữa chừng. */
.nav-sub::before {
  content: '';
  position: absolute;
  top: -8px; left: 0; right: 0;
  height: 8px;
}

.has-sub:hover .nav-sub,
.has-sub:focus-within .nav-sub {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.nav-sub-head {
  font-size: var(--fs-tag);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-secondary);
  padding: 0.375rem 0.625rem 0.5rem;
}

.site-header .nav-sub a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.5rem 0.625rem;
  border-radius: var(--radius);
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--text);
  line-height: 1.35;
}

.site-header .nav-sub a:hover,
.site-header .nav-sub a:focus-visible {
  background: var(--teal-light);
  color: var(--teal);
}

.nav-sub a em {
  font-style: normal;
  font-weight: 400;
  font-size: var(--fs-tag);
  color: var(--text-secondary);
  flex-shrink: 0;
}

.site-header .nav-sub-all {
  margin-top: 0.25rem;
  padding-top: 0.625rem;
  border-top: 1px solid var(--border-subtle);
  border-radius: 0;
  color: var(--teal);
  font-size: var(--fs-caption);
}

/* --- SEARCH POPUP --- */
/* `margin-left: auto` nuốt toàn bộ khoảng trống còn lại trong nav, đẩy icon ra
   sát mép phải. Hoạt động được là nhờ `.site-header nav { flex: 1 }` ở trên. */
.nav-search-wrap {
  position: relative;
  margin-left: auto;
}

/* Không còn vạch ngăn: khi icon đã ở mép phải, khoảng trắng giữa nó và menu đã
   đủ để tách nhóm. Thêm vạch nữa là thừa và trông như một mục menu bị cắt rời. */

/* Ẩn tam giác mặc định của <summary> ở mọi trình duyệt. */
.nav-search::-webkit-details-marker { display: none; }
.nav-search { list-style: none; }

.nav-search {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius);
  color: var(--text-secondary);
  font-size: var(--fs-small);
  font-weight: 600;
  cursor: pointer;
  transition: color 0.2s var(--ease-out), background 0.2s var(--ease-out);
}

.nav-search:hover,
.nav-search-wrap[open] .nav-search {
  color: var(--text);
  background: var(--surface-alt);
}

.nav-search svg { width: 18px; height: 18px; flex-shrink: 0; }

/* Chữ "Search" ẩn trên desktop — icon đã đủ rõ, aria-label lo phần trợ năng.
   Hiện lại khi menu thu gọn, vì lúc đó các mục xếp dọc và một icon đơn độc
   giữa danh sách chữ trông như lỗi. */
.nav-search-text { display: none; }

.nav-search-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 60;
  width: 340px;
  max-width: calc(100vw - 2rem);
  padding: 0.875rem;
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-hover);
}

.nav-search-row {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.nav-search-row input {
  flex: 1;
  min-width: 0;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-small);
}

.nav-search-row input:focus {
  outline: none;
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(29,139,122,0.12);
}

.nav-search-row .btn { flex-shrink: 0; }

.nav-search-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border-subtle);
}

.site-header .nav-search-links a {
  padding: 0;
  font-size: var(--fs-caption);
  font-weight: 400;
  color: var(--text-secondary);
}

.site-header .nav-search-links a:hover {
  background: none;
  color: var(--teal);
}

/* --- MOBILE --- */
@media (max-width: 700px) {
  .nav-search-text { display: inline; }

  /* Nav thu gọn thành cột dọc trong panel bung ra — `flex: 1` (dùng để đẩy
     icon sang phải trên desktop) không còn ý nghĩa và gây co giãn lạ. */
  .site-header nav { flex: none; }

  .nav-item, .nav-search-wrap { width: 100%; }
  .nav-search-wrap { margin-left: 0; }

  /* Menu đã thu gọn thành cột dọc — panel nổi chồng lên sẽ che các mục khác.
     Cho cả submenu lẫn search panel chảy theo dòng thay vì nổi. */
  .nav-sub,
  .nav-search-panel {
    position: static;
    width: 100%;
    max-width: none;
    box-shadow: none;
    border: none;
    border-top: 1px solid var(--border-subtle);
    border-radius: 0;
    padding: 0.5rem 0 0;
    margin-top: 0.375rem;
  }

  .nav-sub {
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  .nav-sub::before { display: none; }
}

/* --- GỢI Ý THÀNH PHỐ DƯỚI Ô TÌM KIẾM (hero) --- */
.hero-suggest {
  margin-top: 0.875rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--fs-caption);
  color: var(--text-on-navy);
  max-width: 560px;
}

.hero-suggest > span { opacity: 0.65; }

.hero-suggest a {
  display: inline-flex;
  align-items: baseline;
  gap: 0.3rem;
  padding: 0.25rem 0.625rem;
  border-radius: 999px;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.14);
  color: var(--text-on-navy);
  text-decoration: none;
  transition: background 0.2s var(--ease-out), border-color 0.2s var(--ease-out);
}

.hero-suggest a:hover {
  background: rgba(255,255,255,0.18);
  border-color: rgba(255,255,255,0.3);
  text-decoration: none;
}

.hero-suggest a em {
  font-style: normal;
  opacity: 0.6;
  font-size: var(--fs-tag);
}

/* --- LƯỚI 3 CỘT CỐ ĐỊNH (khối bài viết trang chủ) --- */
/* .content-grid mặc định dùng auto-fill minmax(320px) — trên màn rộng nó có thể
   xếp 4 cột, làm 6 bài thành 4+2 lệch. Khối này cần đúng 3 cột × 2 hàng. */
.content-grid-3 { grid-template-columns: repeat(3, 1fr); }

@media (max-width: 900px) {
  .content-grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .content-grid-3 { grid-template-columns: 1fr; }
}

/* ============================================================
   HERO 2 CỘT — nội dung trái, hồ sơ mẫu phải
   ------------------------------------------------------------
   Vùng phải của hero trước đây bỏ trống. Lấp bằng vài thẻ hồ sơ
   thật cho người mới thấy ngay dữ liệu trông ra sao.
   ============================================================ */
.hero-split {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.85fr);
  gap: 3rem;
  align-items: center;
}

.hero-main { min-width: 0; }

.hero-side {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius-xl);
  padding: 1rem;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.hero-side-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0 0.25rem 0.625rem;
  font-size: var(--fs-caption);
  color: var(--text-on-navy);
}

.hero-side-head > span { opacity: 0.7; }

.hero-side-head a {
  color: var(--text-on-navy);
  opacity: 0.85;
  font-weight: 600;
  white-space: nowrap;
}
.hero-side-head a:hover { opacity: 1; }

.hero-hosp {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.625rem 0.75rem;
  border-radius: var(--radius);
  color: var(--text-on-navy);
  text-decoration: none;
  transition: background 0.18s var(--ease-out);
}

.hero-hosp:hover {
  background: rgba(255,255,255,0.1);
  text-decoration: none;
}

.hero-hosp-main { min-width: 0; }

.hero-hosp strong {
  display: block;
  font-size: var(--fs-small);
  font-weight: 600;
  line-height: 1.3;
}

.hero-hosp-main span {
  display: block;
  font-size: var(--fs-tag);
  opacity: 0.62;
  margin-top: 1px;
}

.hero-hosp-rating { flex-shrink: 0; }
.hero-hosp-rating .stars svg { width: 13px; height: 13px; }

/* Sao rỗng trên nền navy cần sáng hơn --star-empty (vốn tính cho nền trắng),
   nếu không nó chìm hẳn và thẻ 2 sao trông như 2 sao trên thang 2. */
.hero-hosp-rating .stars .empty { color: rgba(255,255,255,0.22); }

.hero-side-note {
  margin-top: 0.5rem;
  padding: 0.625rem 0.25rem 0;
  border-top: 1px solid rgba(255,255,255,0.1);
  font-size: var(--fs-tag);
  color: var(--text-on-navy);
  opacity: 0.55;
  line-height: 1.5;
}

/* Dưới 980px cột phải bị bóp quá hẹp, tên bệnh viện xuống 3 dòng — xếp dọc
   và để nó xuống dưới phần tìm kiếm, vốn mới là việc chính của hero. */
@media (max-width: 980px) {
  .hero-split { grid-template-columns: 1fr; gap: 2rem; }
}

@media (max-width: 560px) {
  .hero-side { padding: 0.75rem; }
}

/* --- SUBMENU 3 NHÓM (Articles) --- */
.nav-sub-wide { min-width: 300px; }

/* Mục dẫn nhóm: đậm hơn, có nền nhạt — mắt thấy ngay đâu là nhóm, đâu là
   chuyên mục con, mà không cần thụt lề nhiều cấp. */
.site-header .nav-sub-lead {
  margin-top: 0.25rem;
  font-weight: 700;
  color: var(--text);
}

.site-header .nav-sub-lead:first-of-type { margin-top: 0; }

.site-header .nav-sub-lead em {
  font-weight: 700;
  color: var(--teal);
  font-size: var(--fs-caption);
}

/* Chuyên mục con: thụt vào và nhạt hơn một bậc. */
.site-header .nav-sub-child {
  padding-left: 1.5rem;
  font-weight: 400;
  color: var(--text-secondary);
  position: relative;
}

.site-header .nav-sub-child::before {
  content: '';
  position: absolute;
  left: 0.75rem;
  top: 50%;
  width: 6px;
  height: 1px;
  background: var(--border);
}

.site-header .nav-sub-child:hover,
.site-header .nav-sub-child:focus-visible { color: var(--teal); }
.site-header .nav-sub-child:hover::before { background: var(--teal); }

/* ============================================================
   KHỐI LIÊN KẾT CUỐI TRANG (includes/related-footer.php)
   ------------------------------------------------------------
   Nối hai nửa của site: ~5,400 trang dữ liệu và 135 bài viết.
   Nền khác biệt để mắt biết phần chính đã hết, đây là phần
   "đọc tiếp" — không bị nhầm là nội dung của bài.
   ============================================================ */
.related-footer {
  border-top: 1px solid var(--border-subtle);
  padding-top: 2.5rem;
}

.related-footer + .related-footer {
  border-top: none;
  padding-top: 0;
}

/* --- DẢI BỆNH VIỆN --- */
.hosp-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.75rem;
}

.hosp-chip {
  display: block;
  padding: 0.875rem 1rem;
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  text-decoration: none;
  color: var(--text);
  transition: border-color 0.2s var(--ease-out),
              box-shadow 0.2s var(--ease-out),
              transform 0.2s var(--ease-out);
}

.hosp-chip:hover {
  border-color: var(--teal);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
  text-decoration: none;
}

.hosp-chip strong {
  display: block;
  font-size: var(--fs-small);
  font-weight: 600;
  line-height: 1.35;
}

.hosp-chip > span {
  display: block;
  font-size: var(--fs-caption);
  color: var(--text-secondary);
  margin-top: 2px;
}

.hosp-chip-stars { margin-top: 0.5rem !important; }
.hosp-chip-stars .stars svg { width: 14px; height: 14px; }

/* ============================================================
   TRANG TĨNH 2 CỘT (includes/page-layout.php)
   ------------------------------------------------------------
   Trang chính sách/giới thiệu dài 4–11 mục. Một cột 780px bỏ phí
   nửa màn hình và không có cách nhảy nhanh tới mục cần đọc.
   Cột TOC rộng hơn article (260 vs 240) vì tiêu đề mục ở đây dài
   hơn tiêu đề trong bài viết — "We are not the government",
   "What we do not use".
   ============================================================ */
.page-layout { grid-template-columns: minmax(0, 1fr) 260px; }

/* Đoạn mở đầu to hơn phần còn lại. Dùng :first-child thay vì class để
   trang nào cũng tự có mà không phải nhớ thêm thuộc tính. */
.page-layout .article-content > p:first-child {
  color: var(--text-secondary);
}

@media (max-width: 900px) {
  /* Dưới 900px cột TOC bị bóp dưới 200px, tiêu đề mục xuống 3 dòng.
     Chuyển TOC lên đầu dạng khối ngang — vẫn hữu ích trên điện thoại
     vì nó cho thấy trang dài bao nhiêu trước khi cuộn.

     🔴 Bỏ sticky ở đây: TOC ghim trên màn hình nhỏ ăn mất 30% chiều cao
     khả dụng, và người đọc không còn thấy nội dung mình đang đọc. */
  .page-layout { grid-template-columns: 1fr; gap: 0; }

  .page-layout > aside {
    order: -1;
    position: static;
    max-height: none;
    overflow: visible;
  }

  .page-layout .toc {
    position: static;
    max-height: none;
    margin-bottom: 1.5rem;
  }

  .page-layout .toc ol {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 0 0.75rem;
  }

  .page-layout .toc a { border-left-width: 2px; }
}

/* ============================================================
   BẢN ĐỒ TRÊN TRANG HỒ SƠ (includes/hospital-map.php)
   ------------------------------------------------------------
   Ba lớp: nút chỉ đường (luôn có) · iframe OSM (không JS) ·
   Leaflet (tương tác). CSS phải phục vụ cả ba.
   ============================================================ */
.map-wrap {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-xs);
  background: var(--surface-alt);
}

/* Chiều cao cố định cho cả iframe lẫn Leaflet: nếu khác nhau, trang nhảy
   một đoạn ngay khi bản đồ tương tác thay thế iframe (CLS). */
.map-frame,
#hgMap {
  display: block;
  width: 100%;
  height: 380px;
  border: 0;
}

@media (max-width: 600px) {
  .map-frame,
  #hgMap { height: 280px; }
}

/* Ghim Leaflet — divIcon nên thừa hưởng biến màu của site. */
.map-pin {
  display: block;
  width: 34px;
  height: 34px;
  color: var(--teal);
  filter: drop-shadow(0 2px 3px rgba(27,49,65,0.35));
}
.map-pin svg { width: 100%; height: 100%; }

.map-pop-addr {
  color: var(--text-secondary);
  font-size: var(--fs-caption);
}
.map-pop-note {
  display: block;
  margin-top: 0.25rem;
  color: var(--text-secondary);
  font-size: var(--fs-tag);
  font-style: italic;
}

/* Popup Leaflet mặc định dùng font hệ thống — ép về font của site. */
.leaflet-popup-content { font-family: var(--font-body); font-size: var(--fs-caption); }
.leaflet-container     { font-family: var(--font-body); }

.map-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1rem;
}

.map-note {
  margin-top: 0.75rem;
  font-size: var(--fs-caption);
  color: var(--text-secondary);
  line-height: 1.6;
}

/* ============================================================
   ẢNH BÀI VIẾT
   ------------------------------------------------------------
   Đường dẫn ảnh do CMS trả về là tương đối; IMAGE_BASE_URL gắn
   CDN vào — xem helpers/blog.php::image_url().
   ============================================================ */

/* Ảnh đầu bài. aspect-ratio + width/height trong HTML giữ chỗ trước khi ảnh
   tải xong, nên trang không nhảy (CLS). */
.article-hero {
  width: 100%;
  height: auto;
  aspect-ratio: 1200 / 630;
  object-fit: cover;
  border-radius: var(--radius-lg);
  margin: 1.25rem 0 0;
  background: var(--surface-alt);
}

/* Ảnh trong thẻ bài. Thay chỗ của .content-card-accent khi bài có ảnh. */
.content-card-media {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--surface-alt);
}

.content-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.35s var(--ease-out);
}

/* Phóng nhẹ khi rê chuột — tín hiệu thẻ bấm được, không chỉ là hình trang trí.
   transform thay vì width/height để trình duyệt chỉ phải vẽ lại lớp ảnh. */
.content-card:hover .content-card-media img { transform: scale(1.04); }

@media (prefers-reduced-motion: reduce) {
  .content-card-media img { transition: none; }
  .content-card:hover .content-card-media img { transform: none; }
}