/* ==========================================================================
   site.css — CSS của trang công khai. Header / footer / ngăn kéo / bảng tìm kiếm CHÉP wwwroot/assets/css/site.css của
   benhviendakhoathuynguyen (biến màu đổi sang thương hiệu An Lão); khối trang chủ dựng mới. CSS mới viết vào CUỐI.

   QUY ƯỚC MÀU (người dùng chốt 2026-10-30 — bám màu logo):
     • Xanh dương đậm  --primary  (~60%): thanh menu, tiêu đề khối / chuyên khoa, chân trang, banner.
     • Đỏ              --red      (~10%): CHỈ nút Hotline cấp cứu + Đặt lịch khám.
     • Vàng            --yellow   : điểm xuyết — biểu tượng đánh giá chất lượng, huy hiệu nổi bật.
     • Trắng + lam nhạt --bg-soft  : nền trang.
   ========================================================================== */

:root {
  --primary: #084CA1;
  --primary-dark: #063B7E;
  --primary-deep: #052D61;
  --red: #E51D1B;
  --red-dark: #BF1412;
  --yellow: #FCCA13;
  --yellow-dark: #D9A800;
  --text-dark: #14213d;
  --text: #334155;
  --text-muted: #64748b;
  --border: #dde6f1;
  --border-light: #edf2f7;
  --bg-soft: #f2f7fd;
  --bg-soft-2: #e6f0fb;
  --font-main: 'Roboto', system-ui, sans-serif;
  --font-heading: 'Barlow', system-ui, sans-serif;
  --font-condensed: 'Roboto Condensed', system-ui, sans-serif;
  --ease: all .25s cubic-bezier(.4, 0, .2, 1);
  --sticky-top: calc(var(--site-header-h, 108px) + 20px);
}

/* ── Nền tảng ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; overflow-x: clip; font-size: 16px; }
body { font-family: var(--font-main); color: var(--text); background: #fff; line-height: 1.65; font-size: .95rem; overflow-x: clip; }
h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); color: var(--text-dark); font-weight: 700; line-height: 1.35; }
a { color: var(--primary); text-decoration: none; transition: var(--ease); }
a:hover { color: var(--primary-dark); }
img { max-width: 100%; display: block; }
ul { list-style: none; }
button { font: inherit; }
.icon { width: 1em; height: 1em; flex-shrink: 0; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; }

.container { width: 100%; max-width: 1320px; margin: 0 auto; padding: 0 16px; }

/* Footer luôn ở đáy khi nội dung ngắn */
body { min-height: 100vh; display: flex; flex-direction: column; }
#main { flex: 1 0 auto; }

/* ==========================================================================
   HEADER — thanh trên cùng + thanh menu, cùng dính khi cuộn
   ========================================================================== */
.site-header { position: sticky; top: 0; z-index: 1000; background: #fff; box-shadow: 0 4px 15px rgba(0, 0, 0, .08); }

/* Thanh trên cùng */
.topbar { background: #fff; color: #475569; font-size: .86rem; padding: 9px 0; border-bottom: 1px solid #eef2f6; }
.topbar-inner { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.topbar-slogan { font-weight: 500; color: var(--primary); }
.topbar-contacts { display: flex; align-items: center; justify-content: flex-end; gap: 12px; }
.topbar-item { display: inline-flex; align-items: center; gap: 6px; color: var(--text); }
.topbar-item .icon { color: var(--primary); }
.topbar-item:hover { color: var(--primary); }
.topbar-item.is-emergency, .topbar-item.is-emergency .icon { color: var(--red); font-weight: 700; }
.topbar-item.is-emergency:hover { color: var(--red-dark); }
.topbar-sep { color: #cbd5e1; }
/* Chọn ngôn ngữ (2026-10-30): chữ + cờ SVG — KHÔNG viền, KHÔNG bóng (người dùng: viền "thô"); cờ đang xem rõ, cờ khác mờ nhạt. */
.lang-switch { display: flex; align-items: center; gap: 8px; margin-left: 6px; padding-left: 12px; border-left: 1px solid #cbd5e1; }
.lang-label { display: inline-flex; align-items: center; gap: 5px; margin-right: 2px; color: var(--text-muted); font-size: .82rem; }
.lang-label .icon { width: 15px; height: 15px; color: var(--primary); }
.lang-flag { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 16px; border-radius: 2px; overflow: hidden; opacity: .45; filter: saturate(.6); font-size: .6rem; font-weight: 700; color: var(--text); transition: opacity .2s ease, filter .2s ease; }
.lang-flag img { width: 100%; height: 100%; object-fit: cover; }
.lang-flag:hover, .lang-flag.is-active { opacity: 1; filter: none; }

/* Thanh menu */
.menubar { background: var(--primary); position: relative; z-index: 999; }
.menubar-inner { display: flex; align-items: center; justify-content: space-between; }
.menubar-logo { display: flex; align-items: center; gap: 12px; color: #fff; padding-right: 18px; margin-right: 14px; border-right: 1px solid rgba(255, 255, 255, .25); flex-shrink: 0; }
.menubar-logo:hover { color: #fff; }
.menubar-logo img { width: 44px; height: 44px; border-radius: 50%; object-fit: contain; background: #fff; }
.menubar-logo span { max-width: 190px; font-family: var(--font-heading); font-size: .8rem; font-weight: 800; text-transform: uppercase; line-height: 1.45; letter-spacing: .4px; }

.nav-main { display: flex; align-items: center; flex-wrap: nowrap; flex: 1; min-width: 0; }
.nav-item { position: relative; flex-shrink: 0; }
.nav-item.has-mega { position: static; }
.nav-item > .nav-link { display: flex; align-items: center; gap: 5px; padding: 18px 12px; color: #fff; font-family: var(--font-condensed); font-size: .9rem; font-weight: 700; text-transform: uppercase; letter-spacing: .2px; white-space: nowrap; position: relative; cursor: pointer; }
/* Gạch chân khi rê / đang xem: VÀNG (điểm xuyết) — nguồn đỏ; đỏ dành riêng cho Đặt lịch + Cấp cứu. */
.nav-item > .nav-link::before { content: ""; position: absolute; bottom: 0; left: 8px; right: 8px; height: 3px; background: var(--yellow); transform: scaleX(0); transition: transform .25s ease; }
.nav-item:hover > .nav-link, .nav-item.is-active > .nav-link { background: rgba(255, 255, 255, .1); color: #fff; }
.nav-item:hover > .nav-link::before, .nav-item.is-active > .nav-link::before { transform: scaleX(1); }
.nav-item.has-dropdown:hover > .nav-link::before, .nav-item.has-mega:hover > .nav-link::before { transform: scaleX(0); }
.nav-item.is-highlight > .nav-link { color: var(--yellow); font-weight: 800; }
.nav-caret { width: .8rem; height: .8rem; transition: transform .2s ease; }
.nav-item:hover .nav-caret { transform: rotate(180deg); }

/* Dropdown */
.nav-dropdown { position: absolute; top: 100%; left: 0; min-width: 250px; background: #fff; box-shadow: 0 10px 30px rgba(0, 0, 0, .15); border-top: 3px solid var(--yellow); border-radius: 0 0 6px 6px; padding: 8px 0; opacity: 0; visibility: hidden; transform: translateY(15px); transition: all .25s ease; z-index: 1000; }
.nav-item:hover .nav-dropdown, .nav-item:focus-within .nav-dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-dropdown a { display: block; padding: 9px 20px; font-size: .88rem; color: var(--text-dark); font-weight: 400; border-bottom: 1px solid var(--border-light); position: relative; }
.nav-dropdown li:last-child a { border-bottom: none; }
.nav-dropdown a::before {
  content: ""; position: absolute; left: 13px; top: 50%; width: 10px; height: 10px; transform: translateY(-50%);
  background-color: var(--primary); opacity: 0; transition: opacity .2s ease;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m8 4 8 8-8 8'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m8 4 8 8-8 8'/%3E%3C/svg%3E") center / contain no-repeat;
}
.nav-dropdown a:hover { background: var(--bg-soft); color: var(--primary); padding-left: 26px; }
.nav-dropdown a:hover::before { opacity: 1; }

/* Mega "Bài mới của danh mục" — tràn ngang thanh menu: hàng tiêu đề + lưới thẻ bài. */
.nav-mega { position: absolute; top: 100%; left: 0; right: 0; background: #fff; box-shadow: 0 10px 30px rgba(0, 0, 0, .15); border-top: 3px solid var(--yellow); padding: 22px 0 26px; opacity: 0; visibility: hidden; transform: translateY(15px); transition: all .25s ease; z-index: 1000; }
.nav-item:hover .nav-mega, .nav-item:focus-within .nav-mega { opacity: 1; visibility: visible; transform: translateY(0); }
/* Mega gói trong KHUNG container (2026-11-05, người dùng: "mega menu chỉ hiển thị trong khung container, không full 100%"): hộp trắng rộng đúng
   vùng nội dung của .container (1320 − 2×16), căn giữa thanh menu, bo góc dưới; ruột bỏ giới hạn / lề của .container lồng bên trong. */
.nav-mega { left: 50%; right: auto; width: min(1288px, calc(100vw - 32px)); transform: translate(-50%, 15px); border-radius: 0 0 10px 10px; padding: 22px 28px 26px; }
.nav-item:hover .nav-mega, .nav-item:focus-within .nav-mega { transform: translate(-50%, 0); }
.nav-mega > .container { max-width: none; padding: 0; }
.nav-mega-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 22px; padding-bottom: 12px; margin-bottom: 16px; border-bottom: 1px solid var(--border); }
.nav-mega-title { font-family: var(--font-heading); font-weight: 800; font-size: 1rem; color: var(--primary); text-transform: uppercase; }
.nav-mega-row { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.nav-mega-row a { font-size: .86rem; color: var(--text-muted); }
.nav-mega-row a.is-quick { color: var(--text-dark); font-weight: 600; }
.nav-mega-row a:hover { color: var(--primary); }
/* Mega "Danh sách chuyên khoa" — lưới 4 cột liên kết. */
.nav-mega-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px 28px; }
.nav-mega-col { list-style: none; margin: 0; padding: 0; }
.nav-mega-col a { position: relative; display: block; padding: 9px 0 9px 16px; border-bottom: 1px dashed var(--border); color: var(--text-dark); font-size: .9rem; font-weight: 500; transition: color .2s, padding-left .2s; }
.nav-mega-col li:last-child a { border-bottom: 0; }
.nav-mega-col a::before { content: ""; position: absolute; left: 2px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--yellow); }
.nav-mega-col a:hover, .nav-mega-col a.is-active { color: var(--primary); padding-left: 20px; }
/* Menu xổ + mega chuyên khoa — CHUNG một kiểu mục (2026-11-05, người dùng): chấm vàng ở đầu (như ban đầu), chữ .88rem thường, gạch ngăn liền;
   rê chuột / đang mở → CHỈ nền xanh nhạt + chữ xanh (không thụt chữ, không mũi tên). Mega: mỗi tên MỘT dòng — cột co theo tên dài nhất,
   thiếu chỗ thì cắt "…" (title hiện tên đủ). */
.nav-dropdown a, .nav-mega-col a { display: block; padding: 9px 16px 9px 30px; border-bottom: 1px solid var(--border-light); font-size: .88rem; font-weight: 400;
  color: var(--text-dark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: background-color .2s ease, color .2s ease; }
.nav-dropdown a::before, .nav-mega-col a::before { content: ""; position: absolute; left: 14px; top: 50%; width: 6px; height: 6px; margin-top: 0;
  transform: translateY(-50%); border-radius: 50%; background: var(--yellow); opacity: 1; -webkit-mask: none; mask: none; }
.nav-dropdown a:hover, .nav-mega-col a:hover, .nav-mega-col a.is-active { background: var(--bg-soft); color: var(--primary); padding-left: 30px; }
.nav-mega-col a { border-radius: 4px; }
.nav-mega-col li:last-child a { border-bottom: 0; }
.nav-mega-grid { grid-template-columns: repeat(4, minmax(0, max-content)); justify-content: space-between; gap: 0 24px; }
.nav-mega-posts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.nav-mega-post { display: flex; flex-direction: column; gap: 8px; color: var(--text-dark); }
.nav-mega-thumb { display: block; aspect-ratio: 16 / 9; border-radius: 6px; overflow: hidden; background: var(--bg-soft-2); }
.nav-mega-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.nav-mega-post:hover .nav-mega-thumb img { transform: scale(1.04); }
.nav-mega-post-title { font-size: .88rem; font-weight: 500; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.nav-mega-post:hover { color: var(--primary); }

/* Công cụ bên phải: tìm kiếm + nút đỏ Đặt lịch khám */
.menubar-tools { display: flex; align-items: center; gap: 10px; margin-left: 12px; }
.btn-extend { background: rgba(255, 255, 255, .15); color: #fff; border: none; width: 42px; height: 42px; border-radius: 6px; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 1.2rem; transition: var(--ease); }
.btn-extend:hover { background: rgba(255, 255, 255, .28); }
.btn-search .icon { width: 20px; height: 20px; }
.btn-booking { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 18px; border-radius: 6px; background: var(--red); color: #fff; font-family: var(--font-condensed); font-size: .88rem; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; white-space: nowrap; box-shadow: 0 4px 12px rgba(229, 29, 27, .35); }
.btn-booking:hover { background: var(--red-dark); color: #fff; }
.btn-booking .icon { width: 18px; height: 18px; }

/* ── Điện thoại ─────────────────────────────────────────────────────────── */
.mobile-bar { display: none; position: sticky; top: 0; z-index: 1000; background: #fff; align-items: center; justify-content: space-between; }
.mobile-brand { display: flex; align-items: center; gap: 8px; min-width: 0; }
.mobile-brand img { width: 40px; height: 40px; object-fit: contain; border-radius: 50%; flex-shrink: 0; }
.mobile-brand span { font-family: var(--font-heading); font-size: .84rem; font-weight: 800; color: var(--primary); line-height: 1.25; text-transform: uppercase; max-width: 190px; }
body.no-scroll { overflow: hidden; }

/* Chữ menu dài → thu đệm ở màn hẹp. Nút Đặt lịch LUÔN có chữ (người dùng 2026-11-03: "đặt lịch khám hiển thị rõ, không phải icon") — mục
   menu trỏ trùng trang đặt lịch đã bỏ khỏi thanh máy tính để đủ chỗ. */
@media (max-width: 1199px) {
  .nav-item > .nav-link { padding: 18px 7px; font-size: .8rem; }
  .menubar-logo { padding-right: 12px; margin-right: 8px; }
  .menubar-logo span { max-width: 140px; font-size: .7rem; }
  .nav-mega-posts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 991px) {
  .site-header { display: none; }
  .mobile-bar { display: flex; }
}

/* ═══ Header điện thoại — CHÉP .m-header của nguồn: logo trái, nút tìm kiếm + ngôn ngữ + menu phải (42px, chỉ icon). ═══ */
.mobile-bar.m-header { min-height: 64px; padding: 6px 6px 6px 14px; border-bottom: 1px solid #e6eaee; gap: 6px; }
.m-header .mh-logo { flex: 1 1 auto; min-width: 0; }
.m-header .mh-actions { flex: 0 0 auto; display: flex; align-items: center; gap: 2px; }
.m-header .mh-btn {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px;
  padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--primary); cursor: pointer;
}
.m-header .mh-btn:active { background: rgba(0, 0, 0, .06); }
.m-header .mh-btn .icon { width: 20px; height: 20px; }

/* Chọn ngôn ngữ trên điện thoại — CHÉP .nav-lang của nguồn. */
.nav-lang { position: relative; flex-shrink: 0; }
.nav-lang-btn {
  display: flex; align-items: center; gap: 5px; height: 42px; padding: 0 6px; border: none; border-radius: 6px;
  background: transparent; color: var(--primary); cursor: pointer; transition: background .2s;
}
.nav-lang-btn:hover, .nav-lang.open .nav-lang-btn { background: rgba(0, 0, 0, .05); }
.nav-lang-flag { width: 24px; height: 16px; object-fit: cover; border-radius: 2px; display: block; }
.nav-lang-code { font-size: .8rem; font-weight: 700; letter-spacing: .03em; }
.nav-lang-btn .nav-lang-chevron { width: 13px; height: 13px; opacity: .7; transition: transform .2s; }
.nav-lang.open .nav-lang-chevron { transform: rotate(180deg); }
.nav-lang-menu {
  position: absolute; top: calc(100% + 6px); right: 0; min-width: 170px; margin: 0; padding: 6px 0; list-style: none;
  background: #fff; border: 1px solid #e2e8f0; border-radius: 8px;
  opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .2s, transform .2s, visibility .2s; z-index: 1100;
}
.nav-lang.open .nav-lang-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-lang-menu a {
  display: flex; align-items: center; gap: 10px; padding: 10px 14px; color: var(--text-dark);
  font-size: .9rem; white-space: nowrap; text-decoration: none; transition: background .15s;
}
.nav-lang-menu a:hover { background: rgba(0, 0, 0, .04); }
.nav-lang-menu a.is-active { font-weight: 700; color: var(--primary); background: var(--bg-soft); }

/* ═══ Ngăn kéo menu điện thoại — CHÉP .nav-drawer của nguồn (z-index trên header dính). ═══ */
.ui-overlay {
  position: fixed; inset: 0; z-index: 9999; background: rgba(0, 0, 0, .6);
  opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s ease;
}
body.drawer-open .ui-overlay { opacity: 1; visibility: visible; }
.nav-drawer {
  position: fixed; top: 0; bottom: 0; left: 0; z-index: 10000; width: 100%; max-width: 350px; background: #fff;
  transform: translateX(-100%); transition: transform .28s ease;
  overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; visibility: hidden;
}
body.drawer-open .nav-drawer { transform: translateX(0); box-shadow: 2px 0 12px rgba(0, 0, 0, .25); visibility: visible; }
.nav-drawer .nd-head {
  position: relative; display: flex; align-items: center; justify-content: center; min-height: 92px; padding: 14px 56px;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-deep) 100%);
}
.nav-drawer .nd-brand { display: flex; align-items: center; gap: 10px; color: #fff; }
.nav-drawer .nd-brand img { width: 48px; height: 48px; flex-shrink: 0; object-fit: contain; border-radius: 50%; background: #fff; }
.nav-drawer .nd-brand span { font-family: var(--font-heading); font-size: .95rem; font-weight: 800; line-height: 1.3; text-transform: uppercase; }
.nav-drawer .nd-close {
  position: absolute; top: 8px; right: 8px; display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border: 0; border-radius: 6px; background: transparent; color: #fff; cursor: pointer;
}
.nav-drawer .nd-close .icon { width: 22px; height: 22px; }
.nav-drawer .nd-search { padding: 14px 16px 10px; }
.nav-drawer .nd-search__box { position: relative; }
.nav-drawer .nd-search__box input {
  width: 100%; height: 44px; padding: 0 46px 0 14px; border: 1px solid #e2e8f0; border-radius: 8px;
  background: #fff; color: var(--text-dark); font-family: inherit; font-size: .9rem; outline: none; transition: border-color .18s ease;
}
.nav-drawer .nd-search__box input::placeholder { color: #94a3b8; }
.nav-drawer .nd-search__box input:focus { border-color: var(--primary); }
.nav-drawer .nd-search__box button {
  position: absolute; top: 5px; right: 5px; display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--primary); cursor: pointer;
}
.nav-drawer .nd-search__box button .icon { width: 17px; height: 17px; }
/* Hai nút đỏ dưới ô tìm (thêm — quy ước màu: đỏ cho Đặt lịch + Cấp cứu). */
.nav-drawer .nd-cta { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 2px 16px 10px; }
.nav-drawer .nd-cta__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 42px; padding: 0 10px; border-radius: 8px;
  background: var(--red); color: #fff; font-size: .84rem; font-weight: 700; text-align: center; line-height: 1.25;
}
.nav-drawer .nd-cta__btn:only-child { grid-column: 1 / -1; }
.nav-drawer .nd-cta__btn.is-outline { background: #fff; color: var(--red); border: 1.5px solid var(--red); }
.nav-drawer .nd-cta__btn .icon { width: 17px; height: 17px; }

.nav-drawer .nd-menu { margin: 0; padding: 6px 0 8px; list-style: none; }
.nav-drawer .nd-menu > li + li { border-top: 1px solid #eef2f7; }
.nav-drawer .nd-menu a, .nav-drawer .nd-label {
  display: flex; align-items: center; min-height: 48px; padding: 4px 20px;
  color: var(--text-dark); font-size: .94rem; font-weight: 500; text-decoration: none;
}
.nav-drawer .nd-menu a:active { color: var(--primary); }
.nav-drawer .nd-row { display: flex; align-items: stretch; position: relative; }
.nav-drawer .nd-row > a, .nav-drawer .nd-row > .nd-label { flex: 1 1 auto; min-width: 0; position: relative; z-index: 1; }
.nav-drawer .nd-toggle {
  flex: 0 0 52px; position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center;
  border: 0; background: transparent; color: #90a4ae; cursor: pointer;
}
.nav-drawer .nd-toggle svg { width: 17px; height: 17px; transition: transform .25s ease; }
.nav-drawer li.nd-open > .nd-row .nd-toggle svg { transform: rotate(90deg); }
.nav-drawer li.nd-open > .nd-row::before { content: ""; position: absolute; inset: 3px 8px; background: var(--bg-soft-2); border-radius: 8px; }
.nav-drawer .nd-menu > li > a, .nav-drawer .nd-menu > li > .nd-row > a, .nav-drawer .nd-row > .nd-label { gap: 10px; }
.nav-drawer .nd-menu > li > a::before, .nav-drawer .nd-menu > li > .nd-row > a::before, .nav-drawer .nd-row > .nd-label::before {
  content: ""; flex: 0 0 auto; width: 5px; height: 5px; background: currentColor; opacity: .55;
}
.nav-drawer .nd-sub { display: none; margin: 0; padding: 0; list-style: none; }
.nav-drawer .nd-sub > li > a { gap: 8px; min-height: 44px; padding-left: 34px; color: #475569; font-size: .88rem; font-weight: 400; }
.nav-drawer .nd-sub > li > a::before {
  content: ""; flex: 0 0 auto; width: 0; height: 0;
  border-left: 4px solid currentColor; border-top: 3px solid transparent; border-bottom: 3px solid transparent; opacity: .55;
}
.nav-drawer .nd-menu > li.is-current > a, .nav-drawer .nd-menu > li.is-current > .nd-row > a { color: var(--primary); font-weight: 700; }
.nav-drawer .nd-menu > li.is-highlight > a, .nav-drawer .nd-menu > li.is-highlight > .nd-row > a { color: var(--primary); font-weight: 800; }

.nav-drawer .nd-contact { margin: 14px 16px 22px; padding: 16px; border: 1px solid #e2e8f0; border-radius: 12px; background: var(--bg-soft); }
.nav-drawer .nd-contact__biz { margin: 0 0 12px; font-family: var(--font-heading); font-size: .88rem; font-weight: 800; line-height: 1.45; text-transform: uppercase; color: var(--primary); }
.nav-drawer .nd-contact__row { display: flex; gap: 10px; }
.nav-drawer .nd-contact__row + .nd-contact__row { margin-top: 12px; }
.nav-drawer .nd-contact__ico {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px;
  border-radius: 8px; background: #fff; border: 1px solid #e2e8f0; color: var(--primary);
}
.nav-drawer .nd-contact__ico .icon { width: 16px; height: 16px; }
.nav-drawer .nd-contact__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.nav-drawer .nd-contact__lbl { font-size: .75rem; color: var(--text-muted); line-height: 1.4; }
.nav-drawer .nd-contact__val { font-size: .88rem; font-weight: 500; line-height: 1.5; color: var(--text-dark); text-decoration: none; overflow-wrap: anywhere; }
.nav-drawer a.nd-contact__val:hover { color: var(--primary); }
.nav-drawer a.nd-contact__val.is-emergency { color: var(--red); font-weight: 700; }

/* ═══ KHUNG TÌM KIẾM NỔI — dựng mới 2026-10-30 (thay bảng trượt phải .search-panel của nguồn): kiểu command palette, nền mờ xanh,
   khung trắng bo 18px trượt nhẹ xuống; điện thoại phủ toàn màn hình. ═══ */
.search-overlay {
  position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; padding: 24px 16px;
  background: rgba(5, 45, 97, .55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 0; transition: opacity .2s ease;
}
.search-overlay[hidden] { display: none; }
body.search-open .search-overlay { opacity: 1; }
.so-panel {
  width: 100%; max-width: 720px; max-height: 100%; display: flex; flex-direction: column; overflow: hidden;
  background: #fff; border-radius: 18px; box-shadow: 0 30px 80px rgba(5, 45, 97, .35), 0 0 0 1px rgba(8, 76, 161, .08);
  transform: translateY(-14px) scale(.98); transition: transform .22s cubic-bezier(.2, .9, .3, 1.1);
}
body.search-open .so-panel { transform: none; }
.so-bar { display: flex; align-items: center; gap: 12px; padding: 0 14px 0 22px; height: 62px; border-bottom: 1px solid var(--border-light); }
.so-bar-ico { display: flex; color: var(--primary); }
.so-bar-ico .icon { width: 22px; height: 22px; }
.so-input {
  flex: 1 1 auto; min-width: 0; height: 100%; border: 0; outline: none; background: transparent;
  font-family: inherit; font-size: 1rem; color: var(--text-dark);
}
.so-input::placeholder { color: #94a3b8; font-size: .92rem; }
.so-input::-webkit-search-cancel-button { display: none; }
.so-kbd, .so-foot kbd {
  display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 22px; padding: 0 6px;
  border: 1px solid var(--border); border-bottom-width: 2px; border-radius: 6px; background: var(--bg-soft);
  font-family: inherit; font-size: .72rem; font-weight: 600; color: var(--text-muted);
}
.so-close {
  display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: 0; border-radius: 10px;
  background: transparent; color: var(--text-muted); cursor: pointer; transition: var(--ease);
}
.so-close:hover { background: var(--bg-soft); color: var(--text-dark); }
.so-close .icon { width: 20px; height: 20px; }
.so-scopes { display: flex; gap: 8px; padding: 14px 22px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--border-light); }
.so-scopes::-webkit-scrollbar { display: none; }
.so-chip {
  flex: 0 0 auto; height: 34px; padding: 0 16px; border: 1px solid var(--border); border-radius: 999px; background: #fff;
  color: var(--text); font-size: .85rem; font-weight: 500; cursor: pointer; transition: var(--ease);
}
.so-chip:hover { border-color: var(--primary); color: var(--primary); }
.so-chip.is-active { background: var(--primary); border-color: var(--primary); color: #fff; box-shadow: 0 4px 12px rgba(8, 76, 161, .25); }
.so-body { flex: 1 1 auto; overflow-y: auto; padding: 16px 14px 10px; }
.so-label { padding: 0 8px 8px; font-size: .72rem; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: var(--text-muted); }
.so-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
.so-link { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 12px; color: var(--text-dark); font-weight: 500; font-size: .92rem; }
.so-link-ico {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px;
  background: var(--bg-soft-2); color: var(--primary); transition: var(--ease);
}
.so-link-ico .icon { width: 18px; height: 18px; }
.so-link.is-red .so-link-ico { background: #fde8e8; color: var(--red); }
.so-link.is-red .so-link-text { color: var(--red); font-weight: 700; }
.so-link-text { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.so-link-go { width: 16px; height: 16px; color: var(--primary); opacity: 0; transform: translateX(-4px); transition: var(--ease); }
.so-link:hover, .so-link:focus-visible { background: var(--bg-soft); color: var(--text-dark); }
.so-link:hover .so-link-go, .so-link:focus-visible .so-link-go { opacity: 1; transform: none; }
.so-link:hover .so-link-ico { background: var(--primary); color: #fff; }
.so-link.is-red:hover .so-link-ico { background: var(--red); color: #fff; }
.so-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 22px;
  border-top: 1px solid var(--border-light); background: var(--bg-soft); font-size: .78rem; color: var(--text-muted);
}
.so-foot span { display: inline-flex; align-items: center; gap: 5px; }
@media (max-width: 767.98px) {
  .search-overlay { align-items: stretch; padding: 0; background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .so-panel { max-width: none; height: 100%; border-radius: 0; box-shadow: none; transform: translateY(12px); }
  .so-bar { height: 62px; padding-left: 16px; }
  .so-input { font-size: .95rem; }
  .so-input::placeholder { font-size: .88rem; }
  .so-kbd, .so-foot { display: none; }
  .so-scopes { padding: 12px 16px; }
  .so-links { grid-template-columns: 1fr; }
}

/* ==========================================================================
   FOOTER — CHÉP .site-footer của nguồn; NỀN XANH ĐẬM chữ trắng (quy ước màu 2026-10-30).
   ========================================================================== */
.site-footer { background: var(--primary-deep); color: rgba(255, 255, 255, .82); font-size: .88rem; padding-top: 50px; }
.site-footer a { color: #fff; }
.site-footer a:hover { color: var(--yellow); }
.footer-grid { display: grid; grid-template-columns: 5fr 3fr 3fr; gap: 32px; justify-content: space-between; }
.footer-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.footer-brand img { width: 56px; height: 56px; border-radius: 50%; background: #fff; object-fit: contain; flex-shrink: 0; }
.footer-brand-name { font-family: var(--font-heading); font-size: 1.05rem; font-weight: 900; line-height: 1.25; letter-spacing: .4px; text-transform: uppercase; color: #fff; }
.footer-desc { font-size: .86rem; line-height: 1.6; margin-bottom: 12px; max-width: 520px; }
.footer-info p { display: flex; gap: 8px; line-height: 1.6; font-size: .86rem; margin-bottom: 8px; }
.footer-info p > .icon { margin-top: .3em; color: var(--yellow); }
.footer-info strong { color: #fff; font-weight: 600; }
.footer-phone { font-weight: 700; }
.footer-muted { font-size: .8rem; color: rgba(255, 255, 255, .65); }
.footer-emergency { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; background: var(--red); color: #fff !important; font-weight: 800; font-size: .88rem; padding: 9px 24px; border-radius: 30px; text-transform: uppercase; letter-spacing: .3px; box-shadow: 0 4px 12px rgba(0, 0, 0, .25); }
.footer-emergency:hover { background: var(--red-dark); transform: translateY(-2px); }
.footer-heading { font-family: var(--font-heading); font-size: .95rem; font-weight: 800; color: #fff; text-transform: uppercase; margin-bottom: 16px; letter-spacing: .4px; position: relative; padding-bottom: 10px; }
.footer-heading::after { content: ""; position: absolute; left: 0; bottom: 0; width: 36px; height: 3px; border-radius: 2px; background: var(--yellow); }
.footer-hours li { display: flex; flex-direction: column; margin-bottom: 10px; }
.footer-hours-name { font-weight: 700; color: #fff; }
.footer-social { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.footer-social a { width: 36px; height: 36px; border-radius: 50%; color: #fff; display: flex; align-items: center; justify-content: center; font-size: .95rem; transition: transform .25s ease; box-shadow: 0 0 0 2px rgba(255, 255, 255, .15); }
.footer-social a:hover { color: #fff; transform: translateY(-3px) scale(1.08); }
.social-text { font-size: .62rem; font-weight: 800; letter-spacing: .2px; }
.footer-quick-links li { margin-bottom: 6px; }
.footer-quick-links a { color: rgba(255, 255, 255, .85); font-size: .86rem; }
.footer-bottom { background: rgba(0, 0, 0, .18); padding: 16px 0; margin-top: 40px; font-size: .82rem; color: rgba(255, 255, 255, .7); }
.footer-bottom-inner { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
@media (max-width: 991px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-col-main { grid-column: 1 / -1; }
}
@media (max-width: 767px) {
  .site-footer { padding-top: 28px; }
  .footer-grid { grid-template-columns: 1fr; gap: 20px; }
  .footer-info p { font-size: .82rem; margin-bottom: 6px; }
  .footer-heading { font-size: .88rem; margin-bottom: 12px; }
  .footer-bottom { margin-top: 28px; }
  .footer-bottom-inner { justify-content: center; text-align: center; }
}

/* ==========================================================================
   TRANG CHỦ — dựng mới (giai đoạn 8 bước 1): banner thương hiệu, thẻ truy cập nhanh, khung các khối module (để trống).
   ========================================================================== */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 22px; border-radius: 8px; font-weight: 700; font-size: .92rem; border: 1.5px solid transparent; transition: var(--ease); }
.btn .icon { width: 18px; height: 18px; }
.btn-red { background: var(--red); color: #fff; box-shadow: 0 6px 16px rgba(229, 29, 27, .35); }
.btn-red:hover { background: var(--red-dark); color: #fff; transform: translateY(-2px); }
.btn-ghost { background: rgba(255, 255, 255, .1); color: #fff; border-color: rgba(255, 255, 255, .55); }
.btn-ghost:hover { background: #fff; color: var(--primary); }

/* Banner (chưa có Slide) */
.home-hero { position: relative; overflow: hidden; color: #fff;
  background: radial-gradient(circle at 85% 20%, rgba(255, 255, 255, .12) 0, transparent 40%),
              linear-gradient(120deg, var(--primary-deep) 0%, var(--primary) 60%, #1565c0 100%); }
.home-hero::after { content: ""; position: absolute; right: -120px; bottom: -160px; width: 420px; height: 420px; border-radius: 50%; border: 60px solid rgba(255, 255, 255, .05); }
.home-hero-inner { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 40px; padding-top: 72px; padding-bottom: 96px; }
.home-hero-tag { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 14px; padding: 6px 14px; border-radius: 30px; background: rgba(255, 255, 255, .12); font-size: .78rem; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; }
.icon-star { color: var(--yellow); }
.home-hero-title { color: #fff; font-size: clamp(1.8rem, 3.6vw, 3rem); font-weight: 800; line-height: 1.15; text-transform: uppercase; margin-bottom: 14px; max-width: 760px; }
.home-hero-lead { font-size: 1.05rem; max-width: 620px; color: rgba(255, 255, 255, .88); margin-bottom: 26px; }
.home-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.home-hero-art img { width: 260px; height: 260px; border-radius: 50%; background: #fff; padding: 14px; object-fit: contain; box-shadow: 0 0 0 12px rgba(255, 255, 255, .12), 0 20px 50px rgba(0, 0, 0, .3); }

/* Thẻ truy cập nhanh — đè lên mép dưới banner */
.home-quick { position: relative; z-index: 2; margin-top: -48px; }
.quick-grid { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 16px; }
.quick-card { display: flex; align-items: center; gap: 14px; padding: 20px; border-radius: 12px; background: #fff; color: var(--text-dark); border: 1px solid var(--border); border-top: 3px solid var(--primary); }
.quick-card:hover { color: var(--text-dark); transform: translateY(-3px); border-color: #b9cde6; border-top-color: var(--primary); }
.quick-card.is-red:hover { border-top-color: var(--red); }
.quick-card.is-red { border-top-color: var(--red); }
.quick-ico { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 50px; height: 50px; border-radius: 50%; background: var(--bg-soft-2); color: var(--primary); }
.quick-card.is-red .quick-ico { background: #fde8e8; color: var(--red); }
.quick-ico .icon { width: 24px; height: 24px; }
.quick-text { display: flex; flex-direction: column; min-width: 0; }
.quick-text strong { font-family: var(--font-heading); font-size: 1.02rem; font-weight: 800; line-height: 1.3; text-transform: uppercase; }
.quick-card.is-red .quick-text strong { color: var(--red); }
.quick-text small { font-size: .82rem; color: var(--text-muted); }

/* Khối module */
.home-section { padding: 64px 0; }
.home-section.is-soft { background: var(--bg-soft); }
.home-quick + .home-section { margin-top: -48px; padding-top: 112px; }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 26px; }
.section-title { position: relative; padding-bottom: 12px; color: var(--primary); font-size: clamp(1.4rem, 2.4vw, 1.85rem); font-weight: 800; text-transform: uppercase; letter-spacing: .3px; }
.section-title::after { content: ""; position: absolute; left: 0; bottom: 0; width: 56px; height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--primary) 0 70%, var(--yellow) 70% 100%); }
.section-more { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: .9rem; white-space: nowrap; }
.section-more .icon { width: 16px; height: 16px; transition: transform .2s ease; }
.section-more:hover .icon { transform: translateX(3px); }
.section-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-height: 180px; padding: 32px 16px; border: 1.5px dashed #c6d6ea; border-radius: 14px; background: rgba(255, 255, 255, .7); color: var(--text-muted); text-align: center; }
.section-empty-ico { display: inline-flex; align-items: center; justify-content: center; width: 54px; height: 54px; border-radius: 50%; background: var(--bg-soft-2); color: var(--primary); }
.section-empty-ico .icon { width: 26px; height: 26px; }

@media (max-width: 991px) {
  .home-hero-inner { grid-template-columns: 1fr; padding-top: 48px; padding-bottom: 80px; }
  .home-hero-art { display: none; }
  .quick-grid { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575px) {
  .home-hero-inner { padding-top: 36px; }
  .home-hero-actions .btn { flex: 1 1 100%; }
  .quick-grid { gap: 10px; }
  .quick-card { flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px; }
  .quick-text strong { font-size: .9rem; }
  .home-section { padding: 44px 0; }
  .home-quick + .home-section { padding-top: 92px; }
  .section-head { align-items: flex-start; flex-direction: column; gap: 6px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }

/* ==========================================================================
   BANNER TRƯỢT (module Slide) — CHÉP "HERO BANNER CAROUSEL" của nguồn (.slider-container / .slider-track / .slide-item, nút tròn
   mờ, chấm tròn). Đổi (người dùng 2026-10-30):
     • ẢNH ĐÚNG KÍCH THƯỚC GỐC — rộng 100%, cao tự nhiên (nguồn ép cao 600/520/440/360 + cover cắt ảnh); khung cao bằng slide đang
       hiện (site.js đo). Slide video = khung tỉ lệ 1920:720 (cỡ ảnh slide chuẩn), video / ảnh chờ phủ kín khung đó.
     • Thẻ truy cập nhanh KHÔNG đè lên slide (đè che mất thông tin slide).
     • Chấm đang chọn VÀNG (nguồn đỏ — quy ước màu: đỏ chỉ Đặt lịch + Cấp cứu).
   THÊM: chữ đè (.slide-content) cho kiểu có nội dung; dưới 992px ảnh thấp → chữ xuống dưới ảnh trên nền xanh đậm.
   ========================================================================== */
.hero-slider-section { position: relative; overflow: hidden; background-color: var(--primary-deep); }
.slider-container { position: relative; width: 100%; overflow: hidden; transition: height .4s ease; }
.slider-track { display: flex; align-items: flex-start; width: 100%; transition: transform .6s cubic-bezier(.25, 1, .5, 1); }
.slide-item { position: relative; flex: 0 0 100%; width: 100%; overflow: hidden; }
.slide-item > a { display: block; }
.slide-banner-img { display: block; width: 100%; height: auto; user-select: none; }
/* Slide video: khung 1920:720; video / ảnh chờ / iframe YouTube phủ kín. */
.slide-media { position: relative; aspect-ratio: 1920 / 720; overflow: hidden; background: var(--primary-deep); }
.slide-media > .slide-banner-img { position: absolute; inset: 0; height: 100%; object-fit: cover; }

.slider-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 10; width: 46px; height: 46px; border-radius: 50%; border: none;
  display: flex; align-items: center; justify-content: center; cursor: pointer; color: #fff;
  background-color: rgba(0, 0, 0, .3); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); transition: var(--ease);
}
.slider-arrow .icon { width: 22px; height: 22px; }
.slider-arrow:hover { background-color: var(--primary); transform: translateY(-50%) scale(1.1); }
.slider-arrow.prev { left: 20px; }
.slider-arrow.next { right: 20px; }
.slider-dots { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); z-index: 10; display: flex; gap: 8px; }
.slider-dot { width: 12px; height: 12px; border-radius: 6px; border: 0; background-color: rgba(255, 255, 255, .55); cursor: pointer; transition: all .3s ease; }
.slider-dot.active { width: 30px; background-color: var(--yellow); }

/* Thẻ truy cập nhanh sau slide: KHÔNG đè (khối thương hiệu khi chưa có slide vẫn đè như cũ). */
.hero-slider-section + .home-quick { margin-top: 24px; }
.hero-slider-section + .home-quick + .home-section { margin-top: 0; padding-top: 64px; }

/* Chữ đè lên ảnh (kiểu "Ảnh nền + nội dung" / "Ảnh + nội dung" / "Video + nội dung"). */
.slide-content { position: absolute; inset: 0; display: flex; align-items: center; padding: 24px 0 48px; color: #fff; }
.slide-content.is-v-top { align-items: flex-start; padding-top: 48px; }
.slide-content.is-v-bottom { align-items: flex-end; padding-bottom: 64px; }
.slide-content > .container { display: flex; }
.slide-content.is-h-center > .container { justify-content: center; text-align: center; }
.slide-content.is-h-right > .container { justify-content: flex-end; text-align: right; }
.slide-text { max-width: 640px; transition: opacity .6s ease .25s, transform .6s ease .25s; }
.slide-item:not(.is-current) .slide-text { opacity: 0; transform: translateY(16px); }
.slide-sub { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 14px; padding: 6px 14px; border-radius: 30px; background: rgba(255, 255, 255, .12); font-size: .78rem; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; }
.slide-title { color: #fff; font-size: clamp(1.7rem, 3.2vw, 3rem); font-weight: 800; line-height: 1.15; margin-bottom: 14px; text-transform: uppercase; }
.slide-desc { font-size: 1.05rem; color: rgba(255, 255, 255, .9); margin-bottom: 26px; }
.btn-light { background: #fff; color: var(--primary); }
.btn-light:hover { background: var(--bg-soft-2); color: var(--primary-dark); transform: translateY(-2px); }

@media (max-width: 1199px) {
  .slide-title { font-size: 2rem; }
  .slide-desc { margin-bottom: 18px; }
}
@media (max-width: 991px) {
  .slider-arrow { display: none; }
  /* Ảnh thấp (≈ 37% chiều rộng) → chữ xuống dưới ảnh trên nền xanh đậm; chấm tròn nằm trên ảnh. */
  .slide-content { position: static; display: block; padding: 22px 0 30px; background: var(--primary-deep); }
  .slide-content.is-h-right > .container, .slide-content.is-h-center > .container { justify-content: flex-start; text-align: left; }
  .slide-title { font-size: 1.5rem; }
  .slide-desc { font-size: .92rem; }
  .slider-dots { top: calc(min(100vw, 991px) * .375 - 26px); bottom: auto; }
}
@media (max-width: 575px) {
  .slide-sub { font-size: .68rem; padding: 5px 10px; margin-bottom: 10px; }
  .slide-title { font-size: 1.3rem; }
  .slide-text .btn { width: 100%; }
}

/* Video nền nhúng YouTube: iframe phủ kín khung (kích thước do site.js tính), không nhận chuột, CHỈ hiện khi YouTube báo đang phát
   (site.js gắn .is-playing) — không phát được thì giữ ảnh chờ. */
.slide-yt { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.slide-yt iframe { position: absolute; top: 50%; left: 50%; border: 0; transform: translate(-50%, -50%); opacity: 0; transition: opacity .8s ease; }
.slide-yt.is-playing iframe { opacity: 1; }
/* Ảnh chờ = ảnh thu nhỏ của YouTube (slide không đặt ảnh riêng): ảnh 16:9 có sẵn viền đen khi video quay tỉ lệ điện ảnh → phóng
   1.42 lần (phần hình ~70% chiều cao) để viền nằm ngoài khung trong lúc video chưa phát. */
.slide-banner-img.is-yt-thumb { transform: scale(1.42); }

/* ==========================================================================
   Trang chủ theo KHỐI (Themes → Trang chủ → Giao diện, 2026-11-02)
   ========================================================================== */
/* Thẻ truy cập nhanh: icon .svg từ Nguồn dữ liệu tô theo màu thẻ (mask) — xanh, thẻ đặt lịch đỏ. */
.quick-ico-mask { display: block; width: 24px; height: 24px; background: currentColor; -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; }
.quick-ico img { width: 26px; height: 26px; object-fit: contain; }
div.quick-card { cursor: default; }
div.quick-card:hover { transform: none; }

/* Lưới hàng / ô của khối (thang 12) + thẻ nội dung chung. */
.home-row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; }
.home-row + .home-row { margin-top: 24px; }
.home-cell { grid-column: span var(--span, 12); min-width: 0; }
.home-cell-title { font-size: 1.15rem; color: var(--primary); margin-bottom: 8px; }
.home-cell-desc { color: var(--text-muted); margin-bottom: 16px; }
.section-tagline { margin-bottom: 6px; color: var(--yellow-dark); font-size: .8rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; }
.section-desc { max-width: 720px; margin: 12px 0 0; color: var(--text-muted); }
.content-grid { display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); gap: 20px; }
.content-card { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 12px; background: #fff; overflow: hidden; transition: var(--ease); }
.content-card:hover { transform: translateY(-3px); border-color: #b9cde6; }
.content-card-img { aspect-ratio: 16 / 10; background: var(--bg-soft-2); }
.content-card-img img { width: 100%; height: 100%; object-fit: cover; }
.content-card-body { padding: 16px; }
.content-card-title { font-size: 1rem; margin-bottom: 6px; }
.content-card-title a { color: var(--text-dark); }
.content-card-sub { font-size: .85rem; color: var(--primary); font-weight: 600; margin-bottom: 6px; }
.content-card-desc { font-size: .88rem; color: var(--text-muted); margin: 0; }

/* ── Tư vấn & đăng ký khám bệnh — khung chung (.home-booking, .booking-card loé viền); giao diện khối: ".hb" cuối tệp (thiết kế lại 2026-11-03). ── */
.home-booking { padding: 64px 0; background: #fff; scroll-margin-top: var(--site-header-h, 96px); }
.home-quick + .home-booking { padding-top: 40px; }
@keyframes ringPhone { 0%, 60%, 100% { transform: rotate(0); } 10%, 30% { transform: rotate(-14deg); } 20%, 40% { transform: rotate(14deg); } }

.booking-card { border: 1px solid #d6e3f3; border-top: 4px solid var(--primary); border-radius: 16px; background: #fff; overflow: hidden;
  scroll-margin-top: calc(var(--site-header-h, 96px) + 16px); }
.booking-card.is-flash { animation: bookingFlash 1.4s ease; }
@keyframes bookingFlash { 0%, 100% { box-shadow: 0 0 0 0 rgba(252, 202, 19, 0); } 30% { box-shadow: 0 0 0 4px rgba(252, 202, 19, .85); } }

.bf .form-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.bf-row { display: grid; grid-template-columns: repeat(var(--cols, 1), minmax(0, 1fr)); gap: 0 16px; }
.bf-field { margin-bottom: 14px; min-width: 0; }
.bf-field label { display: block; margin-bottom: 5px; font-size: .84rem; font-weight: 600; color: var(--text-dark); }
.bf-field label.required::after { content: " *"; color: var(--red); }
.bf-field input:not([type=radio]):not([type=checkbox]):not([type=file]), .bf-field select, .bf-field textarea {
  display: block; width: 100%; min-height: 44px; padding: 9px 13px; border: 1px solid #d3deeb; border-radius: 8px; background-color: #fff;
  font: inherit; font-size: .92rem; color: var(--text-dark); transition: border-color .2s, box-shadow .2s, background-color .2s; }
.bf-field textarea { min-height: 84px; resize: vertical; }
.bf-field select { appearance: none; padding-right: 38px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%2364748b' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; }
.bf-field input:focus, .bf-field select:focus, .bf-field textarea:focus { outline: none; border-color: var(--primary); background-color: #fff; box-shadow: 0 0 0 4px rgba(8, 76, 161, .12); }
.bf-field.is-invalid input, .bf-field.is-invalid select, .bf-field.is-invalid textarea { border-color: var(--red); background-color: #fff5f5; }
.bf-help { display: block; margin-top: 4px; font-size: .78rem; color: var(--text-muted); }
.bf-choices { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.bf-choice { display: inline-flex; align-items: center; gap: 6px; font-size: .92rem; }
.bf-notice { margin: 0 0 16px; padding: 10px 14px; border-radius: 10px; background: #fff1f1; color: var(--red-dark); font-size: .9rem; }
.bf-actions { margin-top: 6px; }
.bf-submit { width: 100%; min-height: 44px; padding: 10px 20px; justify-content: center; font-size: .9rem; text-transform: uppercase; letter-spacing: .3px; box-shadow: none; }
.bf-submit .icon { width: 16px; height: 16px; }
.bf-privacy { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 10px 0 0; color: var(--text-muted); font-size: .8rem; text-align: center; }
.bf-privacy .icon { flex: 0 0 auto; width: 13px; height: 13px; }
.bf-submit[disabled] { opacity: .7; cursor: wait; transform: none; }
.bf-success { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 24px 8px; outline: none; }
.bf-success[hidden] { display: none; }
.bf-success-ico { display: inline-flex; align-items: center; justify-content: center; width: 72px; height: 72px; border-radius: 50%; background: #e7f6ec; color: #16a34a; animation: zoomPop .4s cubic-bezier(.175, .885, .32, 1.275); }
.bf-success-ico .icon { width: 36px; height: 36px; }
@keyframes zoomPop { from { transform: scale(.5); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.bf-success h3 { margin: 0; color: var(--primary); font-size: 1.5rem; font-weight: 800; }
.bf-success p { margin: 0; color: var(--text-muted); max-width: 480px; }
.bf-summary { width: 100%; max-width: 520px; margin: 8px 0 6px; padding: 14px 18px; border-radius: 12px; background: var(--bg-soft); text-align: left; }
.bf-summary > div { display: flex; justify-content: space-between; gap: 16px; padding: 6px 0; border-bottom: 1px dashed #d4e1f1; font-size: .9rem; }
.bf-summary > div:last-child { border-bottom: 0; }
.bf-summary > div[hidden] { display: none; }
.bf-summary dt { color: var(--text-muted); }
.bf-summary dd { margin: 0; font-weight: 600; color: var(--text-dark); text-align: right; }
.btn-outline { background: #fff; color: var(--primary); border-color: var(--primary); }
.btn-outline:hover { background: var(--primary); color: #fff; }

@media (max-width: 1199px) {
  .bf-row { grid-template-columns: repeat(var(--cols-tab, var(--cols, 1)), minmax(0, 1fr)); }
}
@media (max-width: 991px) {
  .home-cell { grid-column: span 12; }
  .content-grid { grid-template-columns: repeat(min(var(--cols, 4), 2), minmax(0, 1fr)); }
}
@media (max-width: 575px) {
  .home-booking { padding: 40px 0; }
  .booking-card { border-radius: 14px; }
  .bf-row { grid-template-columns: repeat(var(--cols-mb, 1), minmax(0, 1fr)); gap: 0 12px; }
  .content-grid { grid-template-columns: 1fr; }
}

/* Thẻ truy cập nhanh: máy tính bảng đủ 3 cột (không lẻ 2 + 1); điện thoại → dải vuốt ngang, thẻ nằm ngang (icon trái). */
@media (min-width: 576px) and (max-width: 991px) {
  .home-quick .quick-grid { grid-template-columns: repeat(min(var(--n, 3), 3), minmax(0, 1fr)); }
}
@media (max-width: 575px) {
  .home-quick .quick-grid { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 80%; overflow-x: auto; scroll-snap-type: x mandatory;
    padding: 4px 2px 14px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .home-quick .quick-grid::-webkit-scrollbar { display: none; }
  .home-quick .quick-card { flex-direction: row; align-items: center; scroll-snap-align: start; padding: 14px 16px; }
  .home-quick .quick-card:hover { transform: none; }
}

/* Ô ngày tự dựng (site.js enhanceDate — CHÉP .pd-* của benhviendakhoathuynguyen; bóng của lịch xổ giảm theo yêu cầu "hạn chế shadow"). */
.pd-wrap { position: relative; }
.bf-field .pd-input { padding-right: 40px; }
.pd-btn { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; border: 0; background: none; color: var(--text-muted); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.pd-btn .icon { width: 17px; height: 17px; }
.pd-wrap.is-open .pd-btn { color: var(--primary); }
.pd-wrap.is-open .pd-input { border-color: var(--primary); background-color: #fff; }
.pd-menu { position: absolute; left: 0; top: calc(100% + 6px); z-index: 50; width: 288px; max-width: calc(100vw - 32px); background: #fff; border: 1px solid #cfdcec; border-radius: 12px; padding: 10px; box-shadow: 0 6px 16px rgba(8, 41, 91, .08); color: var(--text-dark); }
.pd-wrap.drop-up .pd-menu { top: auto; bottom: calc(100% + 6px); }
.pd-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.pd-title { font-weight: 700; font-size: .9rem; font-family: var(--font-heading); color: var(--primary); }
.pd-nav { width: 30px; height: 30px; border-radius: 8px; border: 0; background: var(--bg-soft); color: var(--primary); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: var(--ease); }
.pd-nav:hover { background: var(--primary); color: #fff; }
.pd-nav .icon { width: 16px; height: 16px; }
.pd-dow, .pd-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.pd-dow span { text-align: center; font-size: .7rem; font-weight: 700; color: #94a3b8; padding: 4px 0; }
.pd-day { height: 34px; border: 0; border-radius: 8px; background: none; font-size: .82rem; color: var(--text-dark); cursor: pointer; transition: background .15s ease, color .15s ease; }
.pd-day:hover { background: var(--bg-soft-2); color: var(--primary); }
.pd-day.is-out { color: #cbd5e1; }
.pd-day.is-today { box-shadow: inset 0 0 0 1.5px var(--primary); font-weight: 700; }
.pd-day.is-selected { background: var(--primary); color: #fff; font-weight: 700; }
.pd-foot { display: flex; justify-content: space-between; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border-light); }
.pd-foot button { border: 0; background: none; font-size: .8rem; font-weight: 600; color: var(--primary); cursor: pointer; padding: 4px 6px; border-radius: 6px; }
.pd-foot button:hover { background: var(--bg-soft); }
.pd-foot [data-clear] { color: var(--text-muted); }

/* ── SKELETON dùng chung (2026-11-02 — người dùng: "public UI phải có skeleton"; bản Thủy Nguyên không có): khung .sk nhấp nháy tới khi ảnh
   [data-sk] bên trong tải xong (site.js thêm .is-loaded), ảnh hiện dần. Thẻ chờ (.is-skeleton) chèn vào lưới khi lọc / "Xem thêm". ── */
@keyframes skShimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
.sk, .sk-line { background: linear-gradient(90deg, #eef3f9 25%, #e1e9f3 37%, #eef3f9 63%); background-size: 400% 100%; animation: skShimmer 1.4s ease infinite; }
.sk.is-loaded { animation: none; background: #f2f6fb; }
.sk img[data-sk] { opacity: 0; transition: opacity .35s ease, transform .6s cubic-bezier(.22, .61, .36, 1); } /* GIỮ transform: quy tắc này mạnh hơn quy tắc ảnh của từng thẻ — chỉ khai opacity thì hiệu ứng phóng ảnh khi rê mất chuyển động (ảnh nhảy) */
.sk.is-loaded img[data-sk] { opacity: 1; }
.sk-line { display: block; height: 12px; border-radius: 6px; }
@media (prefers-reduced-motion: reduce) { .sk, .sk-line { animation: none; } }

/* ── Đội ngũ bác sĩ: đầu trang ── */
.doc-hero { position: relative; padding: 34px 0 40px; color: #fff; overflow: hidden;
  background: linear-gradient(120deg, rgba(5, 45, 97, .94), rgba(8, 76, 161, .86)), var(--hero-bg, none) center / cover no-repeat, var(--primary-deep); }
.doc-hero.is-slim { padding: 18px 0; }
.doc-crumb { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: .85rem; color: rgba(255, 255, 255, .78); }
.doc-crumb a { color: rgba(255, 255, 255, .9); }
.doc-crumb a:hover { color: var(--yellow); }
.doc-crumb .icon { width: 14px; height: 14px; opacity: .7; }
.doc-crumb [aria-current] { color: #fff; font-weight: 600; }
.doc-hero-title { margin: 14px 0 0; color: #fff; font-size: clamp(1.7rem, 3vw, 2.4rem); font-weight: 800; text-transform: uppercase; }
.doc-hero-desc { margin: 8px 0 0; max-width: 720px; color: rgba(255, 255, 255, .85); }

/* ── Bộ lọc ── */
.doc-list { padding: 36px 0 64px; }
.doc-filter { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px 18px; padding: 18px 20px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-soft); }
.doc-filter-field { display: flex; flex-direction: column; gap: 6px; min-width: 240px; }
.doc-filter-field.is-grow { flex: 1 1 320px; }
.doc-filter-field label { font-size: .84rem; font-weight: 600; color: var(--text-dark); }
.doc-select, .doc-search { position: relative; }
.doc-select select, .doc-search input { width: 100%; height: 44px; border: 1px solid #d3deeb; border-radius: 8px; background: #fff; font: inherit; font-size: .92rem; color: var(--text-dark); transition: border-color .2s, box-shadow .2s; }
.doc-select select { appearance: none; padding: 0 38px 0 13px; cursor: pointer; }
.doc-select > .icon { position: absolute; right: 12px; top: 50%; width: 16px; height: 16px; transform: translateY(-50%); color: var(--text-muted); pointer-events: none; }
.doc-search input { padding: 0 13px 0 38px; }
.doc-search > .icon { position: absolute; left: 12px; top: 50%; width: 17px; height: 17px; transform: translateY(-50%); color: var(--text-muted); pointer-events: none; }
.doc-select select:focus, .doc-search input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 4px rgba(8, 76, 161, .12); }
.doc-count { margin: 18px 0 14px; color: var(--text-muted); font-size: .9rem; }

/* ── Lưới + thẻ ── */
.doc-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
.doc-card { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 14px; background: #fff; overflow: hidden; transition: border-color .2s, transform .2s; }
.doc-card:hover { border-color: #b9cde6; transform: translateY(-3px); }
.doc-card-photo { position: relative; display: block; aspect-ratio: 3 / 4; overflow: hidden; }
.doc-card-photo img { width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: opacity .35s ease, transform .5s ease; }
.doc-card:hover .doc-card-photo img { transform: scale(1.04); }
.doc-card-noimg { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #b7c7dc; }
.doc-card-noimg .icon { width: 64px; height: 64px; }
.doc-card-body { display: flex; flex-direction: column; flex: 1; padding: 16px 16px 18px; }
.doc-card-name { margin: 0; font-size: 1.05rem; font-weight: 800; line-height: 1.3; }
.doc-card-name a { color: var(--primary); }
.doc-card-name a:hover { color: var(--primary-dark); }
.doc-card-degree { display: block; margin-bottom: 2px; color: var(--text-muted); font-size: .78rem; font-weight: 700; letter-spacing: .3px; }
.doc-card-tag { margin: 6px 0 0; color: var(--red); font-size: .84rem; font-weight: 600; line-height: 1.4; }
.doc-card-exp { display: flex; align-items: flex-start; gap: 6px; margin: 8px 0 0; color: var(--text-dark); font-size: .84rem; }
.doc-card-exp .icon { flex: 0 0 auto; width: 15px; height: 15px; margin-top: 2px; color: var(--primary); }
.doc-card-desc { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin: 10px 0 0; color: var(--text-muted); font-size: .84rem; line-height: 1.55; }
.doc-card-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: auto; padding-top: 14px; }
.doc-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 0 12px; border-radius: 8px; border: 1px solid transparent;
  font-size: .8rem; font-weight: 700; line-height: 1.2; text-align: center; transition: background-color .2s, color .2s, border-color .2s; cursor: pointer; }
.doc-btn .icon { flex: 0 0 auto; width: 15px; height: 15px; }
.doc-btn.is-red { background: var(--red); color: #fff; }
.doc-btn.is-red:hover { background: var(--red-dark); color: #fff; }
.doc-btn.is-ghost { border-color: #cfdcec; background: #fff; color: var(--primary); }
.doc-btn.is-ghost:hover { border-color: var(--primary); background: var(--bg-soft); }
.doc-btn.is-outline { min-height: 46px; padding: 0 26px; border-color: var(--primary); background: #fff; color: var(--primary); font-size: .9rem; }
.doc-btn.is-outline:hover { background: var(--primary); color: #fff; }
.doc-more { display: flex; justify-content: center; margin-top: 30px; }
.doc-more[hidden] { display: none; }
.doc-more .doc-btn.is-loading { pointer-events: none; opacity: .7; }
.doc-empty { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 48px 16px; border: 1px dashed #cfdcec; border-radius: 12px; color: var(--text-muted); text-align: center; }
.doc-empty .icon { width: 34px; height: 34px; color: #b7c7dc; }
.doc-empty p { margin: 0; }
/* Thẻ chờ */
.doc-card.is-skeleton { pointer-events: none; }
.doc-card.is-skeleton:hover { transform: none; border-color: var(--border); }
.doc-card.is-skeleton .doc-card-photo { aspect-ratio: 3 / 4; }
.doc-card.is-skeleton .doc-card-body { gap: 10px; }
.doc-card.is-skeleton .sk-line.w-40 { width: 40%; } .doc-card.is-skeleton .sk-line.w-60 { width: 60%; } .doc-card.is-skeleton .sk-line.w-80 { width: 80%; } .doc-card.is-skeleton .sk-line.w-100 { width: 100%; }
.doc-card.is-skeleton .sk-line.is-title { height: 16px; }
.doc-card.is-skeleton .sk-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 6px; }
.doc-card.is-skeleton .sk-btns .sk-line { height: 40px; border-radius: 8px; }
.doc-grid.is-busy { pointer-events: none; }

/* ── Chi tiết bác sĩ ── */
.doc-detail { padding: 36px 0 56px; }
.doc-detail-grid { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 40px; align-items: start; }
.doc-profile { position: sticky; top: var(--sticky-top, 120px); border: 1px solid var(--border); border-top: 4px solid var(--primary); border-radius: 16px; background: #fff; overflow: hidden; }
.doc-profile-photo { position: relative; aspect-ratio: 3 / 4; overflow: hidden; }
.doc-profile-photo img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.doc-profile-body { padding: 20px 22px 22px; }
.doc-profile-degree { margin: 0 0 2px; color: var(--text-muted); font-size: .82rem; font-weight: 700; letter-spacing: .3px; }
.doc-profile-name { margin: 0; color: var(--primary); font-size: 1.5rem; font-weight: 800; line-height: 1.25; }
.doc-profile-tag { margin: 8px 0 0; color: var(--red); font-weight: 600; font-size: .92rem; }
.doc-profile-facts { list-style: none; margin: 14px 0 0; padding: 14px 0 0; border-top: 1px dashed #d4e1f1; display: grid; gap: 8px; }
.doc-profile-facts li { display: flex; align-items: flex-start; gap: 8px; color: var(--text-dark); font-size: .9rem; }
.doc-profile-facts .icon { flex: 0 0 auto; width: 17px; height: 17px; margin-top: 2px; color: var(--primary); }
.doc-profile-actions { display: grid; gap: 10px; margin-top: 18px; }
.doc-profile-actions .doc-btn { min-height: 46px; font-size: .88rem; }
.doc-sections { display: grid; gap: 18px; }
.doc-sec { padding: 22px 24px; border: 1px solid var(--border); border-radius: 14px; background: #fff; }
.doc-sec:first-child { background: var(--bg-soft); border-color: #d6e3f3; }
.doc-sec-title { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; color: var(--primary); font-size: 1.1rem; font-weight: 800; }
.doc-sec-title .icon { flex: 0 0 auto; width: 36px; height: 36px; padding: 8px; border-radius: 10px; background: var(--primary); color: #fff; }
.doc-sec p { margin: 0 0 10px; color: var(--text-dark); line-height: 1.7; }
.doc-sec p:last-child { margin-bottom: 0; }
.doc-sec-list { margin: 0 0 10px; padding: 0; list-style: none; display: grid; gap: 8px; }
.doc-sec-list li { position: relative; padding-left: 22px; color: var(--text-dark); line-height: 1.6; }
.doc-sec-list li::before { content: ""; position: absolute; left: 4px; top: .62em; width: 8px; height: 8px; border-radius: 50%; background: var(--yellow); }
.doc-related { padding: 8px 0 64px; }
.doc-grid.is-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 1199px) {
  .doc-grid, .doc-grid.is-4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .doc-detail-grid { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 28px; }
}
@media (max-width: 991px) {
  .doc-grid, .doc-grid.is-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .doc-detail-grid { grid-template-columns: 1fr; }
  .doc-profile { position: static; display: grid; grid-template-columns: minmax(0, 240px) minmax(0, 1fr); }
  .doc-profile-photo { aspect-ratio: auto; min-height: 100%; }
}
@media (max-width: 575px) {
  .doc-hero { padding: 24px 0 28px; }
  .doc-filter { padding: 14px; }
  .doc-filter-field { min-width: 0; flex: 1 1 100%; }
  .doc-grid, .doc-grid.is-4 { gap: 12px; }
  .doc-card-body { padding: 12px 12px 14px; }
  .doc-card-name { font-size: .95rem; }
  .doc-card-desc { display: none; }
  .doc-card-actions { grid-template-columns: 1fr; }
  .doc-btn { font-size: .76rem; min-height: 38px; }
  .doc-profile { grid-template-columns: 1fr; }
  .doc-profile-photo { aspect-ratio: 4 / 5; }
  .doc-sec { padding: 18px 16px; }
}
/* Skeleton băng slide trang chủ: slide ảnh chưa tải giữ chỗ theo tỉ lệ banner 1920:720 (ảnh tải xong → bỏ, site.js đo lại khung). */
.slide-item.sk:not(.is-loaded) { aspect-ratio: 1920 / 720; }
.slide-item.sk:not(.is-loaded) .slide-content { opacity: 0; }
.slide-item.sk img[data-sk] { opacity: 0; }
.slide-item.sk.is-loaded img[data-sk] { opacity: 1; }
.content-card-img.sk { min-height: 120px; }

/* ── CHUYÊN KHOA (2026-11-02) — giao diện riêng, tham khảo bố cục benhviendakhoathuynguyen. Màu nhấn / màu nhãn theo admin (acc-* / tagc-*). ── */
.acc-blue { --acc: var(--primary); --acc-soft: #e8f0fb; } .acc-navy { --acc: var(--primary-deep); --acc-soft: #e6ecf5; }
.acc-red { --acc: var(--red); --acc-soft: #fdecec; } .acc-dark { --acc: #1f2937; --acc-soft: #eef0f3; }
.acc-yellow { --acc: #b98a00; --acc-soft: #fff6d6; } .acc-green { --acc: #15803d; --acc-soft: #e7f6ec; }
.tagc-blue { --tagc: var(--primary); } .tagc-navy { --tagc: var(--primary-deep); } .tagc-red { --tagc: var(--red); }
.tagc-dark { --tagc: #1f2937; } .tagc-yellow { --tagc: #b98a00; } .tagc-green { --tagc: #15803d; }

/* Nội dung soạn thảo (TinyMCE) */
.richtext { color: var(--text-dark); line-height: 1.75; }
.richtext > :first-child { margin-top: 0; }
.richtext h2, .richtext h3 { margin: 1.4em 0 .5em; color: var(--primary); font-weight: 800; line-height: 1.3; }
.richtext h2 { font-size: 1.35rem; } .richtext h3 { font-size: 1.15rem; }
.richtext p { margin: 0 0 1em; }
.richtext ul, .richtext ol { margin: 0 0 1em; padding-left: 1.4em; }
.richtext li { margin-bottom: .35em; }
.richtext img { max-width: 100%; height: auto; border-radius: 10px; }
.richtext a { color: var(--primary); text-decoration: underline; text-underline-offset: 2px; }
.richtext table { width: 100%; border-collapse: collapse; margin: 0 0 1em; }
.richtext th, .richtext td { padding: 8px 10px; border: 1px solid var(--border); }

/* ── Danh sách ── */
.sp-list { padding: 36px 0 56px; }
.sp-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; margin-bottom: 22px; }
.sp-search { flex: 0 1 420px; }
.sp-count { margin: 0; color: var(--text-muted); font-size: .9rem; }
.sp-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.sp-grid.is-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sp-grid-item { display: flex; min-width: 0; }
.sp-grid-item[hidden] { display: none; }
.sp-empty[hidden] { display: none; }
.sp-page-content { margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--border-light); }

/* ── Thẻ ── */
.sp-card { position: relative; display: flex; flex-direction: column; width: 100%; border: 1px solid var(--border); border-radius: 14px; background: #fff; overflow: hidden; transition: border-color .2s; }
.sp-card::before { content: ""; position: absolute; left: 0; top: 18px; bottom: 18px; width: 3px; border-radius: 0 3px 3px 0; background: var(--acc, var(--primary)); opacity: 0; transition: opacity .2s; }
.sp-card:hover { border-color: #b9cde6; }
.sp-card:hover::before { opacity: 1; }
.sp-card-body { display: flex; flex-direction: column; flex: 1; padding: 20px 20px 18px; }
.sp-card-head { display: flex; align-items: center; gap: 14px; }
.sp-card-ico { position: relative; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 14px; background: var(--acc-soft, var(--bg-soft)); color: var(--acc, var(--primary)); overflow: hidden; }
.sp-card-ico .icon { width: 28px; height: 28px; }
.sp-card-ico img { width: 100%; height: 100%; object-fit: cover; }
.sp-card-titles { min-width: 0; }
.sp-card-name { margin: 0; font-size: 1.08rem; font-weight: 800; line-height: 1.3; }
.sp-card-name a { color: var(--acc, var(--primary)); }
.sp-card-name a:hover { text-decoration: underline; text-underline-offset: 3px; }
.sp-card-tag { display: inline-block; margin-top: 6px; font-size: .76rem; font-weight: 700; }
.sp-card-tag.is-solid { padding: 3px 9px; border-radius: 20px; background: var(--tagc, var(--red)); color: #fff; }
.sp-card-tag.is-text { color: var(--tagc, var(--red)); }
.sp-card-desc { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin: 14px 0 0; color: var(--text-muted); font-size: .88rem; line-height: 1.6; }
.sp-card-info { display: flex; flex-wrap: wrap; gap: 4px 6px; margin: 12px 0 0; padding: 8px 10px; border-radius: 8px; background: var(--bg-soft); font-size: .84rem; }
.sp-card-info span { color: var(--text-muted); }
.sp-card-info span::after { content: ":"; }
.sp-card-info strong { color: var(--text-dark); }
.sp-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 16px; }
.sp-card-link { display: inline-flex; align-items: center; gap: 6px; color: var(--acc, var(--primary)); font-weight: 700; font-size: .86rem; }
.sp-card-link .icon { width: 16px; height: 16px; transition: transform .2s; }
.sp-card-link:hover .icon { transform: translateX(3px); }
.sp-card-book { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border-radius: 8px; background: var(--red); color: #fff; font-size: .8rem; font-weight: 700; transition: background-color .2s; }
.sp-card-book:hover { background: var(--red-dark); color: #fff; }
.sp-card-book .icon { width: 15px; height: 15px; }
/* Kiểu bày */
.sp-card.is-center .sp-card-head { flex-direction: column; text-align: center; }
.sp-card.is-center .sp-card-desc, .sp-card.is-center .sp-card-info { text-align: center; justify-content: center; }
.sp-card-media { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; }
.sp-card-media img { width: 100%; height: 100%; object-fit: cover; transition: opacity .35s ease, transform .5s ease; }
.sp-card:hover .sp-card-media img { transform: scale(1.04); }
.sp-card.is-media-left { flex-direction: row; }
.sp-card.is-media-left .sp-card-media { flex: 0 0 38%; aspect-ratio: auto; }
.sp-card.is-media-bg { color: #fff; min-height: 300px; }
.sp-card.is-media-bg .sp-card-media { position: absolute; inset: 0; aspect-ratio: auto; }
.sp-card.is-media-bg .sp-card-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5, 45, 97, .15) 20%, rgba(5, 45, 97, .88) 100%); }
.sp-card.is-media-bg .sp-card-body { position: relative; justify-content: flex-end; }
.sp-card.is-media-bg .sp-card-name a, .sp-card.is-media-bg .sp-card-link { color: #fff; }
.sp-card.is-media-bg .sp-card-desc { color: rgba(255, 255, 255, .85); }
.sp-card.is-media-bg .sp-card-info { background: rgba(255, 255, 255, .14); }
.sp-card.is-media-bg .sp-card-info span, .sp-card.is-media-bg .sp-card-info strong { color: #fff; }

/* ── Chi tiết ── */
.sp-cover { position: relative; min-height: 160px; }
.sp-cover img { display: block; width: 100%; height: auto; }
.sp-hero-tag { display: inline-block; margin: 10px 0 0; padding: 4px 12px; border-radius: 20px; background: var(--yellow); color: var(--primary-deep); font-size: .82rem; font-weight: 700; }
.sp-detail { padding: 36px 0 48px; }
.sp-detail-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 340px); gap: 36px; align-items: start; }
.sp-main-title { margin: 0 0 16px; color: var(--primary); font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 800; }
.sp-lead { margin: 0 0 22px; padding: 18px 20px; border-left: 4px solid var(--acc, var(--primary)); border-radius: 0 12px 12px 0; background: var(--acc-soft, var(--bg-soft)); color: var(--text-dark); font-size: 1.05rem; line-height: 1.7; }
.sp-content { margin-bottom: 8px; }
.sp-placeholder { display: flex; align-items: center; gap: 12px; padding: 18px 20px; border: 1px dashed #cfdcec; border-radius: 12px; color: var(--text-muted); }
.sp-placeholder .icon { flex: 0 0 auto; width: 22px; height: 22px; color: var(--primary); }
.sp-placeholder p { margin: 0; }
.sp-block { margin-top: 36px; }
.sp-block-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; margin-bottom: 16px; }
.sp-block-title { position: relative; margin: 0; padding-left: 14px; color: var(--primary); font-size: 1.3rem; font-weight: 800; }
.sp-block-title::before { content: ""; position: absolute; left: 0; top: .2em; bottom: .2em; width: 4px; border-radius: 2px; background: var(--yellow); }
.sp-block > .sp-block-title { margin-bottom: 16px; }
.sp-block-sub { margin: 6px 0 0; color: var(--text-muted); font-size: .9rem; }
.doc-grid.is-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.sp-aside { position: sticky; top: var(--sticky-top, 120px); display: grid; gap: 18px; }
.sp-facts { padding: 22px; border: 1px solid #d6e3f3; border-top: 4px solid var(--acc, var(--primary)); border-radius: 16px; background: #fff; }
.sp-facts-name { margin: 12px 0 0; color: var(--acc, var(--primary)); font-size: 1.2rem; font-weight: 800; line-height: 1.3; }
.sp-facts-info { margin: 8px 0 0; font-size: .9rem; }
.sp-facts-info span { color: var(--text-muted); }
.sp-facts-info span::after { content: ": "; }
.sp-facts-desc { margin: 12px 0 0; color: var(--text-muted); font-size: .88rem; }
.sp-facts-actions { display: grid; gap: 10px; margin-top: 16px; }
.sp-facts-actions .doc-btn { min-height: 46px; font-size: .88rem; }
.sp-others { padding: 18px 18px 14px; border: 1px solid var(--border); border-radius: 16px; background: var(--bg-soft); }
.sp-others-title { margin: 0 0 8px; color: var(--primary); font-weight: 800; font-size: 1rem; }
.sp-others ul { list-style: none; margin: 0; padding: 0; }
.sp-others li + li { border-top: 1px solid #dfe8f3; }
.sp-others li a { display: flex; align-items: center; gap: 10px; padding: 10px 2px; color: var(--text-dark); font-size: .9rem; }
.sp-others li a span:nth-child(2) { flex: 1; min-width: 0; }
.sp-others li a .icon { flex: 0 0 auto; width: 15px; height: 15px; color: var(--text-muted); transition: transform .2s; }
.sp-others li a:hover { color: var(--primary); }
.sp-others li a:hover .icon { transform: translateX(3px); color: var(--primary); }
.sp-dot { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: var(--acc, var(--primary)); }
.sp-others-all { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; color: var(--primary); font-weight: 700; font-size: .86rem; }
.sp-others-all .icon { width: 15px; height: 15px; }

@media (max-width: 1199px) {
  .sp-detail-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 300px); gap: 28px; }
  .doc-grid.is-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 991px) {
  .sp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .sp-detail-grid { grid-template-columns: 1fr; }
  .sp-aside { position: static; grid-template-columns: 1fr 1fr; align-items: start; }
}
@media (max-width: 575px) {
  .sp-grid, .sp-grid.is-2 { grid-template-columns: 1fr; gap: 12px; }
  .sp-search { flex: 1 1 100%; }
  .sp-card-body { padding: 16px; }
  .sp-card.is-media-left { flex-direction: column; }
  .sp-card.is-media-left .sp-card-media { aspect-ratio: 16 / 9; }
  .sp-aside { grid-template-columns: 1fr; }
  .doc-grid.is-3 { gap: 12px; }
  .sp-lead { font-size: .98rem; padding: 14px 16px; }
}

/* ── ĐẦU TRANG trang tổng (_PageBanner — 2026-11-03, tương tự benhvienhanoi.vn/chuyen-khoa-page): nền xanh đậm trái, ảnh phải tan dần vào
   nền (mask), breadcrumb + tiêu đề lớn chữ thường; thanh lối tắt trắng bo góc trên dính mép dưới (liền nền trắng của trang). ── */
.pg-banner { position: relative; overflow: hidden; color: #fff; background: var(--primary-deep); }
.pg-banner-media { position: absolute; top: 0; right: 0; bottom: 0; width: 64%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .55) 22%, #000 55%); mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .55) 22%, #000 55%); }
.pg-banner-media.sk:not(.is-loaded), .pg-banner-media.sk.is-loaded { background: transparent; }
.pg-banner-media img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.pg-banner::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, var(--primary-deep) 0%, rgba(5, 45, 97, .55) 50%, rgba(8, 76, 161, .18) 100%); }
.pg-banner.is-plain::after { background: radial-gradient(circle at 88% 10%, rgba(255, 255, 255, .08) 0 220px, transparent 221px),
  radial-gradient(circle at 70% 120%, rgba(252, 202, 19, .10) 0 160px, transparent 161px); }
.pg-banner-inner { position: relative; z-index: 1; padding-top: 44px; }
.pg-banner-crumb { gap: 8px; font-size: .9rem; }
.pg-banner-crumb a { color: #8fc0ff; }
.pg-banner-crumb a:hover { color: #fff; }
.pg-banner-sep { color: rgba(255, 255, 255, .7); }
.pg-banner-title { max-width: 720px; margin: 14px 0 0; color: #fff; font-size: clamp(2rem, 4vw, 3.2rem); font-weight: 800; line-height: 1.12; letter-spacing: -.5px; }
.pg-banner-desc { max-width: 600px; margin: 12px 0 0; color: rgba(255, 255, 255, .85); font-size: 1rem; line-height: 1.65; }
.pg-banner-tabs { display: flex; width: fit-content; max-width: 100%; margin-top: 34px; border-radius: 14px 14px 0 0; background: #fff; overflow: hidden; }
.pg-banner-tab { position: relative; display: flex; align-items: center; gap: 12px; min-width: 230px; padding: 20px 22px; color: var(--text-dark); font-weight: 700; font-size: .95rem; transition: background-color .2s; }
.pg-banner-tab + .pg-banner-tab::before { content: ""; position: absolute; left: 0; top: 18px; bottom: 18px; width: 1px; background: var(--border); }
.pg-banner-tab:hover { background: var(--bg-soft); color: var(--primary); }
.pg-banner-tab-ico { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 10px; background: var(--bg-soft); color: var(--primary); }
.pg-banner-tab-ico .icon { width: 19px; height: 19px; }
.pg-banner-tab.is-hotline .pg-banner-tab-ico, .pg-banner-tab.is-book .pg-banner-tab-ico { background: #fdecec; color: var(--red); }
.pg-banner-tab-text { display: flex; flex-direction: column; flex: 1; line-height: 1.3; }
.pg-banner-tab-text small { margin-top: 2px; color: var(--red); font-size: .8rem; font-weight: 700; }
.pg-banner-tab > .icon { flex: 0 0 auto; width: 17px; height: 17px; margin-left: 10px; color: #9db7d8; transition: transform .25s ease, color .2s; }
.pg-banner-tab:hover > .icon { transform: translateX(4px); color: var(--primary); }
@media (max-width: 767px) {
  .pg-banner-media { width: 100%; -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 60%); mask-image: linear-gradient(180deg, transparent 0%, #000 60%); opacity: .45; }
  .pg-banner-inner { padding-top: 26px; }
  .pg-banner-tabs { width: 100%; margin-top: 24px; }
  .pg-banner-tab { flex: 1 1 0; min-width: 0; flex-direction: column; gap: 6px; padding: 14px 6px; font-size: .78rem; text-align: center; }
  .pg-banner-tab-text { align-items: center; }
  .pg-banner-tab-text small { font-size: .72rem; }
  .pg-banner-tab > .icon { display: none; }
}

/* Thẻ chuyên khoa — đầy đặn hơn: vạch màu nhấn trái luôn hiện mờ, dòng thông tin có icon, đường kẻ tách chân thẻ. */
.sp-card::before { opacity: .35; }
.sp-card-info { align-items: center; gap: 10px; padding: 10px 12px; border: 1px dashed #d4e1f1; background: #fbfdff; }
.sp-card-info::before { content: ""; flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; background: var(--acc-soft, var(--bg-soft)) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23084CA1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E") center / 16px no-repeat; }
.sp-card-info span { display: block; width: 100%; font-size: .72rem; font-weight: 600; letter-spacing: .4px; text-transform: uppercase; }
.sp-card-info span::after { content: none; }
.sp-card-info > :not(span):not(strong) { display: none; }
.sp-card-info { display: grid; grid-template-columns: 30px minmax(0, 1fr); column-gap: 10px; row-gap: 0; }
.sp-card-info::before { grid-row: 1 / span 2; }
.sp-card-info span, .sp-card-info strong { grid-column: 2; }
.sp-card-foot { border-top: 1px solid var(--border-light); margin-top: auto; padding-top: 14px; }
.sp-card-body > .sp-card-foot { margin-top: auto; }
.sp-card-desc + .sp-card-foot, .sp-card-info + .sp-card-foot { margin-top: 16px; }
/* Thanh menu 8 mục (menu theo cấu trúc bvqtthuynguyen.vn — 2026-11-02) + nút tìm + Đặt lịch: khung nội dung tối đa 1320px nên MỌI màn ≥ 1200px
   thiếu ~160px → thu khoảng cách, chữ menu nhỏ lại một chút, nút Đặt lịch chỉ còn icon (chữ ở title — như nguồn: thanh menu không có nút chữ). */
@media (min-width: 1200px) {
  .nav-item > .nav-link { padding: 18px 9px; font-size: .86rem; letter-spacing: 0; }
  .menubar-tools { margin-left: 8px; gap: 8px; }
  .btn-booking { padding: 0 14px; }
}
@media (min-width: 1200px) and (max-width: 1299px) {
  .nav-item > .nav-link { padding: 18px 7px; font-size: .84rem; }
}

/* Thẻ chuyên khoa "Ảnh lớn trên – chữ dưới" (2026-11-02 — người dùng: "ảnh trên, nội dung bên dưới, ảnh to"): ảnh 16:10, nhãn ngắn đè góc ảnh;
   khoa chưa có ảnh → khung thay thế nền màu nhấn chuyển sắc + icon lớn + tên mờ. */
.sp-card.is-media .sp-card-media { aspect-ratio: 16 / 10; background: var(--acc-soft, var(--bg-soft)); }
.sp-card.is-media .sp-card-body { padding-top: 18px; }
.sp-card.is-media .sp-card-name { font-size: 1.15rem; }
.sp-card-media.is-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; overflow: hidden;
  background: radial-gradient(circle at 85% 15%, rgba(255, 255, 255, .55) 0 70px, transparent 71px),
              radial-gradient(circle at 10% 110%, rgba(255, 255, 255, .35) 0 110px, transparent 111px),
              linear-gradient(135deg, var(--acc-soft, var(--bg-soft)) 0%, #fff 100%); color: var(--acc, var(--primary)); }
.sp-card-media.is-empty .icon { width: 64px; height: 64px; padding: 14px; border-radius: 20px; background: #fff; border: 1px solid rgba(8, 76, 161, .12); transition: transform .4s ease; }
.sp-card-media.is-empty span { max-width: 80%; color: var(--acc, var(--primary)); opacity: .55; font-family: var(--font-heading); font-weight: 800; font-size: .82rem; letter-spacing: .6px; text-align: center; text-transform: uppercase; }
.sp-card:hover .sp-card-media.is-empty .icon { transform: scale(1.06) rotate(-4deg); }
.sp-card.is-media::before { display: none; }
.sp-card.is-media { border-top: 3px solid var(--acc, var(--primary)); }

/* Ảnh bìa trang chi tiết chuyên khoa (2026-11-02): "Chỉ ảnh" giới hạn cao (ảnh lớn không chiếm hết màn hình); "Ảnh nền" lớp phủ nhạt hơn để thấy ảnh. */
.sp-cover img { width: 100%; height: clamp(220px, 34vw, 460px); object-fit: cover; object-position: center; }
.doc-hero.has-cover { padding: 64px 0 56px;
  background: linear-gradient(100deg, rgba(5, 45, 97, .9) 0%, rgba(5, 45, 97, .62) 45%, rgba(8, 76, 161, .25) 100%), var(--hero-bg) center / cover no-repeat, var(--primary-deep); }

/* Sửa thẻ chuyên khoa (2026-11-02 — "UI đang lỗi"): bỏ vạch màu dọc mép trái (trông như đường lỗi); chân thẻ LUÔN dồn đáy (quy tắc
   ".sp-card-desc + .sp-card-foot" cũ ghi đè margin-top:auto → thẻ ngắn hở khoảng trắng lớn); khoảng cách chữ ↔ chân thẻ đều nhau. */
.sp-card::before { display: none; }
.sp-card-body > .sp-card-foot, .sp-card-desc + .sp-card-foot, .sp-card-info + .sp-card-foot { margin-top: auto; }
.sp-card-body > :not(.sp-card-foot):nth-last-child(2) { margin-bottom: 18px; }
.sp-list { padding-top: 40px; }
/* Thẻ "Ảnh nền – chữ đè": cụm tên + mô tả + chân thẻ dồn ĐÁY (vùng lớp phủ đậm) — quy tắc chân thẻ dồn đáy ở trên đẩy chữ lên đầu ảnh. */
.sp-card.is-media-bg .sp-card-head { margin-top: auto; }
.sp-card.is-media-bg .sp-card-body > .sp-card-foot { margin-top: 0; }

/* Hover thẻ chuyên khoa mượt (2026-11-02 — "UI hover đang bị giật"): ảnh phóng to bằng transform nhưng chỉ được tách lớp GPU KHI bắt đầu rê
   → đầu / cuối hiệu ứng ảnh nhảy 1px, chữ cả thẻ vẽ lại (nhoè). Tách lớp sẵn từ đầu (will-change + translateZ), khung ảnh tự cắt góc
   (isolation — tránh lỗi bo góc khi phóng), đường cong êm hơn; bỏ chuyển màu viền (đổi viền vẽ lại cả thẻ). */
.sp-card { transition: none; }
.sp-card-media { isolation: isolate; transform: translateZ(0); }
.sp-card-media img { transform: translateZ(0) scale(1); will-change: transform; backface-visibility: hidden;
  transition: opacity .35s ease, transform .6s cubic-bezier(.22, .61, .36, 1); }
.sp-card:hover .sp-card-media img { transform: translateZ(0) scale(1.04); }
.sp-card-link .icon, .sp-card-media.is-empty .icon { will-change: transform; }
@media (prefers-reduced-motion: reduce) { .sp-card-media img, .sp-card-media.is-empty .icon, .sp-card-link .icon { transition: none; } .sp-card:hover .sp-card-media img { transform: none; } }

/* Tinh chỉnh đầu trang (2026-11-03 — "rất thô, không phù hợp với tỷ lệ của website"): tiêu đề theo thang chữ của site (khối 1,85rem →
   đầu trang ~2,25rem, đậm 700), breadcrumb nhỏ; thanh lối tắt mảnh: icon trơn (bỏ ô nền), chữ .88rem, đệm gọn, bo 10px; banner cao vừa. */
.pg-banner-inner { padding-top: 40px; }
.pg-banner-crumb { font-size: .82rem; }
.pg-banner-title { margin-top: 10px; font-size: clamp(1.6rem, 2.6vw, 2.25rem); font-weight: 700; letter-spacing: 0; line-height: 1.2; }
.pg-banner-desc { margin-top: 10px; font-size: .95rem; }
.pg-banner-tabs { margin-top: 28px; border-radius: 10px 10px 0 0; }
.pg-banner-tab { gap: 10px; min-width: 0; padding: 15px 22px; font-size: .88rem; font-weight: 600; }
.pg-banner-tab + .pg-banner-tab::before { top: 14px; bottom: 14px; background: var(--border-light, #edf1f6); }
.pg-banner-tab-ico { width: auto; height: auto; border-radius: 0; background: none !important; }
.pg-banner-tab-ico .icon { width: 20px; height: 20px; }
.pg-banner-tab-text small { font-size: .76rem; }
.pg-banner-tab > .icon { width: 15px; height: 15px; margin-left: 18px; color: #b5c8e0; }
.pg-banner-tab:hover { background: #f7faff; }
@media (max-width: 767px) {
  .pg-banner-inner { padding-top: 22px; }
  .pg-banner-tab { gap: 5px; padding: 12px 6px; font-size: .78rem; }
  .pg-banner-tab-ico .icon { width: 20px; height: 20px; }
}
/* Đầu trang cao hơn (2026-11-03 — "tăng page header lên"): PC tối thiểu 300px, máy tính bảng 270px, điện thoại 220px (≤ 374px: 200px); thanh lối tắt luôn dính đáy, cụm chữ căn giữa vùng còn lại, cách thanh ≥ 36px. */
.pg-banner-inner { display: flex; flex-direction: column; min-height: 300px; padding-top: 32px; }
.pg-banner-inner > :first-child { margin-top: auto; }  /* cụm chữ nằm GIỮA vùng trên thanh lối tắt */
.pg-banner-inner > :nth-last-child(2) { margin-bottom: 36px; }
.pg-banner-inner > .pg-banner-tabs { margin-top: auto; }
@media (min-width: 768px) and (max-width: 1199px) { .pg-banner-inner { min-height: 270px; padding-top: 28px; } .pg-banner-inner > :nth-last-child(2) { margin-bottom: 30px; } .pg-banner-media { width: 75%; } }
@media (max-width: 767px) { .pg-banner-inner { min-height: 220px; padding-top: 22px; } .pg-banner-inner > :nth-last-child(2) { margin-bottom: 22px; } }
@media (max-width: 374px) { .pg-banner-inner { min-height: 200px; } }

/* Khối Đăng ký khám bệnh dưới trang Chuyên khoa (2026-11-03 — "khối đăng ký khám bệnh và chuyên khoa hiển thị không ổn"): lưới thẻ và form
   cùng nền trắng + khoảng hở lớn → trông như dính liền, không rõ ranh giới. Tách bằng DẢI NỀN lam nhạt (form trắng nổi trên nền), đường kẻ
   trên mảnh, khoảng cách gọn lại; nút "Xem thêm" bo tròn nhẹ hơn cho đồng bộ thẻ. */
.sp-list { padding-bottom: 48px; }
.sp-list + .home-booking, [data-spec-default] > .home-booking { padding: 56px 0 64px; border-top: 1px solid var(--border-light, #edf1f6);
  background: linear-gradient(180deg, var(--bg-soft) 0%, #fff 100%); }
.sp-list .doc-more { margin-top: 32px; }
.sp-list .doc-btn.is-outline { min-height: 42px; border-radius: 10px; font-size: .86rem; }
@media (max-width: 767px) {
  .sp-list { padding-bottom: 36px; }
  .sp-list + .home-booking, [data-spec-default] > .home-booking { padding: 36px 0 44px; }
}

/* ── QUY CHẾ HOẠT ĐỘNG (Điều khoản & chính sách — 2026-11-03) ──
   Chân trang: thêm cột thứ 4 (có điều khoản đang bật) — lưới tự chia 4 cột; danh sách chấm tròn vàng như ảnh mẫu người dùng gửi.
   Trang /dieu-khoan/{slug}: cột trái danh sách điều khoản (dính khi cuộn, mục đang xem nền lam + vạch trái), cột phải nội dung trong khung trắng. */
.footer-grid:has(> .footer-col:nth-child(4)) { grid-template-columns: 4fr 3fr 3fr 3fr; gap: 28px; }
.footer-policies li { position: relative; margin-bottom: 9px; padding-left: 16px; }
.footer-policies li::before { content: ""; position: absolute; left: 0; top: .62em; width: 6px; height: 6px; border-radius: 50%; background: var(--yellow); }
.footer-policies a { color: rgba(255, 255, 255, .88); font-size: .86rem; line-height: 1.5; }
.footer-policies a:hover { color: var(--yellow); }
@media (max-width: 991px) { .footer-grid:has(> .footer-col:nth-child(4)) { grid-template-columns: 1fr 1fr; } }
@media (max-width: 767px) { .footer-grid:has(> .footer-col:nth-child(4)) { grid-template-columns: 1fr; } }

.pol-detail { padding: 40px 0 64px; background: linear-gradient(180deg, #fff 0, var(--bg-soft) 100%); }
.pol-grid { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 32px; align-items: start; }
.pol-nav { position: sticky; top: var(--sticky-top, 120px); border: 1px solid var(--border); border-radius: 14px; background: #fff; overflow: hidden; }
.pol-nav-title { display: flex; align-items: center; gap: 10px; padding: 16px 18px; border-bottom: 1px solid var(--border-light, #edf1f6); color: var(--primary); font-family: var(--font-heading); font-weight: 700; font-size: 1rem; }
.pol-nav-title .icon { width: 20px; height: 20px; }
.pol-nav ul { padding: 8px; }
.pol-nav a { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 12px; border-radius: 9px; color: var(--text-dark); font-size: .9rem; font-weight: 600; transition: background-color .2s, color .2s; }
.pol-nav a .icon { flex: 0 0 auto; width: 15px; height: 15px; color: #b5c8e0; }
.pol-nav a:hover { background: var(--bg-soft); color: var(--primary); }
.pol-nav a.is-active { background: var(--bg-soft); color: var(--primary); }
.pol-nav a.is-active::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: var(--primary); }
.pol-nav a.is-active .icon { color: var(--primary); }
.pol-article { padding: 32px 36px 36px; border: 1px solid var(--border); border-radius: 14px; background: #fff; }
.pol-updated { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 20px; padding: 6px 12px; border-radius: 20px; background: var(--bg-soft); color: var(--text-muted); font-size: .8rem; }
.pol-updated .icon { width: 14px; height: 14px; color: var(--primary); }
.pol-content { font-size: .96rem; }
.pol-content h2 { padding-top: 6px; font-size: 1.15rem; text-transform: uppercase; letter-spacing: .2px; }
.pol-content h3 { font-size: 1.02rem; color: var(--text-dark); }
.pol-content ul, .pol-content ol { margin: 0 0 1em; padding-left: 1.3em; }
.pol-content ul { list-style: disc; } .pol-content ol { list-style: decimal; }
.pol-content li { margin-bottom: .4em; }
.pol-empty { color: var(--text-muted); }
@media (max-width: 991px) {
  .pol-grid { grid-template-columns: 1fr; gap: 20px; }
  .pol-nav { position: static; }
  .pol-nav ul { display: flex; gap: 6px; overflow-x: auto; padding: 8px; scrollbar-width: none; }
  .pol-nav li { flex: 0 0 auto; }
  .pol-nav a { white-space: nowrap; }
  .pol-nav a .icon { display: none; }
  .pol-nav a.is-active::before { left: 12px; right: 12px; top: auto; bottom: 4px; width: auto; height: 2px; }
}
@media (max-width: 767px) {
  .pol-detail { padding: 24px 0 44px; }
  .pol-article { padding: 22px 18px; }
  .pol-content { font-size: .92rem; }
}

/* ── Chân trang (2026-11-03): ẢNH NỀN MỜ (ảnh sảnh khám bệnh, trắng đen, độ đậm ~12% — chữ vẫn đọc rõ trên nền xanh đậm), ô Đăng ký nhận
   tin (ô email bo tròn + nút gửi vàng), mạng xã hội dưới liên kết nhanh. ── */
.site-footer { position: relative; isolation: isolate; overflow: hidden; }
.site-footer::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: url("/assets/images/footer-bg.webp") center / cover no-repeat; opacity: .12; filter: grayscale(1) contrast(1.1); }
.site-footer::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(5, 45, 97, .35) 0%, rgba(5, 45, 97, 0) 40%, rgba(5, 45, 97, .55) 100%); }
.footer-bottom { position: relative; }
.footer-quick-links + .footer-social { margin-top: 16px; }
.footer-heading-newsletter { margin-top: 22px; font-size: .88rem; line-height: 1.4; }
.footer-subscribe { position: relative; display: flex; max-width: 340px; }
.footer-subscribe-input { flex: 1; min-width: 0; height: 44px; padding: 0 52px 0 16px; border: 1px solid rgba(255, 255, 255, .22); border-radius: 999px;
  background: rgba(255, 255, 255, .1); color: #fff; font-size: .86rem; outline: none; transition: border-color .2s, background-color .2s; }
.footer-subscribe-input::placeholder { color: rgba(255, 255, 255, .6); }
.footer-subscribe-input:focus { border-color: var(--yellow); background: rgba(255, 255, 255, .16); }
.footer-subscribe-btn { position: absolute; top: 4px; right: 4px; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px;
  border: 0; border-radius: 50%; background: var(--yellow); color: var(--primary-deep); cursor: pointer; transition: transform .2s, opacity .2s; }
.footer-subscribe-btn:hover { transform: scale(1.06); }
.footer-subscribe-btn:disabled { opacity: .6; cursor: wait; }
.footer-subscribe-btn .icon { width: 16px; height: 16px; }
.footer-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.footer-subscribe-msg { margin: 8px 0 0; font-size: .8rem; }
.footer-subscribe-msg.is-ok { color: #8ee6a8; }
.footer-subscribe-msg.is-error { color: #ffb4b4; }
@media (max-width: 767px) { .footer-subscribe { max-width: none; } }
/* Chân trang (2026-11-03): bỏ bóng đổ icon mạng xã hội + nút Cấp cứu; mạng xã hội thành dòng "Mạng xã hội: icon" dưới cùng cột 1. */
.footer-emergency, .footer-social a { box-shadow: none; }
.footer-social-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-top: 18px; font-size: .86rem; }
.footer-social-row strong { color: #fff; font-weight: 600; }
.footer-social-row .footer-social { margin: 0; gap: 8px; }
.footer-social-row .footer-social a { width: 32px; height: 32px; }
/* Hover icon mạng xã hội (2026-11-03 — "bị nhòe rồi mới hết, transform hơi nhiều"): bỏ scale(1.08) (phóng icon SVG nhỏ → trình duyệt vẽ bằng
   ảnh tạm khi đang chuyển động = nhòe) — chỉ nhích lên 2px (số nguyên, không nhòe) + sáng nhẹ. */
.footer-social a { transition: transform .2s ease, filter .2s ease; }
.footer-social a:hover { transform: translateY(-2px); filter: brightness(1.1); }

/* ── Đầu chân trang (2026-11-03 — "bên trên footer hơi đơn điệu"): vạch 3 màu thương hiệu (xanh · vàng · đỏ) ở mép trên + dải kêu gọi kính mờ
   (ô icon vàng, câu hỏi, nút Tổng đài viền trắng + nút Đặt lịch đỏ). ── */
.site-footer { padding-top: 0; }
.footer-stripe { height: 4px; background: linear-gradient(90deg, var(--primary) 0 60%, var(--yellow) 60% 85%, var(--red) 85% 100%); }
.footer-cta { display: flex; align-items: center; gap: 20px; margin: 36px 0 40px; padding: 22px 26px; border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 16px; background: linear-gradient(100deg, rgba(255, 255, 255, .1) 0%, rgba(255, 255, 255, .03) 100%); }
.footer-cta-ico { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 54px; height: 54px; border-radius: 14px;
  background: var(--yellow); color: var(--primary-deep); }
.footer-cta-ico .icon { width: 28px; height: 28px; }
.footer-cta-text { flex: 1; min-width: 0; }
.footer-cta-title { color: #fff; font-family: var(--font-heading); font-size: 1.3rem; font-weight: 700; line-height: 1.3; }
.footer-cta-text p { margin: 4px 0 0; color: rgba(255, 255, 255, .75); font-size: .88rem; line-height: 1.55; }
.footer-cta-actions { display: flex; flex-wrap: wrap; gap: 10px; flex: 0 0 auto; }
.footer-cta-btn { display: inline-flex; align-items: center; gap: 10px; min-height: 50px; padding: 0 20px; border-radius: 12px; font-weight: 700; font-size: .9rem;
  transition: background-color .2s, border-color .2s, transform .2s; }
.footer-cta-btn .icon { flex: 0 0 auto; width: 19px; height: 19px; }
.footer-cta-btn span { display: flex; flex-direction: column; line-height: 1.2; }
.footer-cta-btn small { font-size: .72rem; font-weight: 500; opacity: .8; }
.site-footer .footer-cta-btn.is-call { border: 1.5px solid rgba(255, 255, 255, .45); color: #fff; font-size: 1.02rem; }
.site-footer .footer-cta-btn.is-call .icon { color: var(--yellow); }
.site-footer .footer-cta-btn.is-call:hover { border-color: var(--yellow); background: rgba(255, 255, 255, .08); color: #fff; }
.site-footer .footer-cta-btn.is-book { background: var(--red); color: #fff; }
.site-footer .footer-cta-btn.is-book:hover { background: var(--red-dark); color: #fff; }
.footer-cta-btn:hover { transform: translateY(-2px); }
@media (max-width: 991px) {
  .footer-cta { flex-wrap: wrap; }
  .footer-cta-text { flex-basis: calc(100% - 74px); }
  .footer-cta-actions { width: 100%; }
  .footer-cta-btn { flex: 1 1 0; justify-content: center; }
}
@media (max-width: 767px) {
  .footer-cta { margin: 24px 0 28px; padding: 18px; gap: 14px; }
  .footer-cta-ico { width: 44px; height: 44px; border-radius: 12px; }
  .footer-cta-ico .icon { width: 22px; height: 22px; }
  .footer-cta-text { flex-basis: calc(100% - 58px); }
  .footer-cta-title { font-size: 1.08rem; }
  .footer-cta-btn { flex: 1 1 100%; min-height: 46px; }
}
/* Khối CTA NỔI giữa nội dung trang và chân trang (2026-11-03 — "đưa lên trên, chèn giữa line footer và main"): kéo lên vắt qua vạch 3 màu
   (nửa trên nằm trên nền trang, nửa dưới trong chân trang) → nền xanh ĐẶC + bóng mềm (nền kính mờ cũ sẽ trong suốt trên nền trắng).
   Chân trang cách nội dung một khoảng bằng phần kéo lên để khối không đè nội dung; bỏ overflow:hidden (ảnh nền mờ vẫn inset:0). */
.site-footer { overflow: visible; margin-top: 64px; }
.footer-cta { position: relative; z-index: 2; margin: -64px 0 40px; padding: 24px 28px; border: 0;
  background: radial-gradient(circle at 94% -30%, rgba(255, 255, 255, .07) 0 150px, transparent 151px), linear-gradient(110deg, var(--primary) 0%, var(--primary-deep) 100%);
  box-shadow: 0 18px 40px -12px rgba(5, 45, 97, .45); }
@media (max-width: 767px) {
  .site-footer { margin-top: 44px; }
  .footer-cta { margin: -44px 0 28px; padding: 18px; }
}
/* CTA nền TRẮNG (2026-11-03 — "màu đang bị lẫn", khối xanh trùng tông chân trang): thẻ trắng viền mảnh + vạch vàng trái, chữ đậm màu, nút gọi
   viền xanh, nút đặt lịch đỏ; cách các cột chân trang xa hơn ("hơi dính vào cta"). */
.footer-cta { margin-bottom: 60px; border: 1px solid var(--border); border-left: 4px solid var(--yellow); background: #fff;
  box-shadow: 0 16px 36px -14px rgba(5, 45, 97, .35); }
.footer-cta-ico { background: #fff6d6; color: var(--primary); }
.footer-cta-title { color: var(--primary-deep); }
.footer-cta-text p { color: var(--text-muted); }
.site-footer .footer-cta-btn.is-call { border-color: var(--primary); color: var(--primary); }
.site-footer .footer-cta-btn.is-call .icon { color: var(--primary); }
.site-footer .footer-cta-btn.is-call small { color: var(--text-muted); opacity: 1; }
.site-footer .footer-cta-btn.is-call:hover { border-color: var(--primary); background: var(--bg-soft); color: var(--primary); }
@media (max-width: 767px) { .footer-cta { margin-bottom: 36px; } }

/* ── Trang Lịch khám / Đăng ký khám (/dat-lich-kham — 2026-11-03): "Nội dung lịch khám" trong thẻ trắng trên nền lam nhạt, rồi khối Đăng ký
   khám bệnh (giữ nguyên kiểu trang chủ). ── */
.sch-content { padding: 44px 0 0; }
.sch-content-card { padding: 30px 34px; border: 1px solid var(--border); border-radius: 14px; background: #fff; }
.sch-content-card table { width: 100%; border-collapse: collapse; margin: 0 0 1em; font-size: .92rem; }
.sch-content-card th, .sch-content-card td { padding: 10px 12px; border: 1px solid var(--border); text-align: left; vertical-align: top; }
.sch-content-card th { background: var(--bg-soft); color: var(--primary); font-weight: 700; }
.sch-page .home-booking { padding-top: 48px; }
@media (max-width: 767px) {
  .sch-content { padding-top: 24px; }
  .sch-content-card { padding: 20px 18px; overflow-x: auto; }
  .sch-page .home-booking { padding-top: 28px; }
}

/* ── TRANG GIỚI THIỆU (/gioi-thieu — 2026-11-03, About/Index + About/_Cell): khối xen kẽ trắng / lam nhạt, tiêu đề khối căn giữa (nhãn đỏ
   nhỏ + tiêu đề xanh + gạch vàng); giới thiệu chung ảnh trái – chữ phải; thẻ giá trị icon tròn; dòng thời gian; thẻ chân dung; lưới ảnh. ── */
.ab-section { padding: 64px 0; scroll-margin-top: var(--site-header-h, 96px); }
.ab-section.is-white { background: #fff; }
.ab-section.is-soft { background: var(--bg-soft); }
.ab-section.is-dark { background: var(--primary-deep); color: #fff; }
.ab-head { max-width: 760px; margin: 0 auto 36px; text-align: center; }
.ab-tagline { margin: 0 0 8px; color: var(--red); font-size: .8rem; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; }
.ab-title { position: relative; margin: 0; padding-bottom: 14px; color: var(--primary); font-size: clamp(1.4rem, 2.4vw, 1.85rem); font-weight: 800; text-transform: uppercase; }
/* Gạch dưới (2026-11-10): MỘT đường ĐỎ, dài CỐ ĐỊNH 56px — mọi khối bằng nhau. */
.ab-title::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 56px; height: 3px; margin-left: -28px; border-radius: 2px; background: var(--red); }
.ab-desc { margin: 14px 0 0; color: var(--text-muted); line-height: 1.7; }
.ab-section.is-dark .ab-title { color: #fff; }
.ab-section.is-dark .ab-desc { color: rgba(255, 255, 255, .8); }
.ab-more { margin-top: 24px; text-align: center; }

/* Giới thiệu chung */
.ab-intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 56px; align-items: center; }
.ab-intro.is-right .ab-intro-media { order: 2; }
.ab-intro.no-image { grid-template-columns: 1fr; max-width: 860px; margin: 0 auto; text-align: center; }
.ab-intro-media { position: relative; padding: 0 0 18px 18px; }
.ab-intro-media::before { content: ""; position: absolute; left: 0; bottom: 0; width: 62%; height: 70%; border-radius: 18px; background: linear-gradient(135deg, var(--primary) 0%, var(--primary-deep) 100%); }
.ab-intro-media::after { content: ""; position: absolute; right: -14px; top: -14px; width: 92px; height: 92px; border-radius: 50%; border: 10px solid rgba(252, 202, 19, .55); }
.ab-intro-img { position: relative; z-index: 1; aspect-ratio: 4 / 3; border-radius: 16px; overflow: hidden; background: var(--bg-soft); }
.ab-intro-img img { width: 100%; height: 100%; object-fit: cover; }
.ab-intro-title { position: relative; margin: 0 0 12px; padding-bottom: 14px; color: var(--primary); font-size: clamp(1.3rem, 2.1vw, 1.75rem); font-weight: 800; line-height: 1.3; text-transform: uppercase; letter-spacing: .3px; }
.ab-intro-title::after { content: ""; position: absolute; left: 0; bottom: 0; width: 64px; height: 4px; border-radius: 2px; background: var(--yellow); }
.ab-intro.no-image .ab-intro-title::after { left: 50%; margin-left: -32px; }
.ab-intro-slogan { margin: 0 0 16px; color: var(--red); font-family: var(--font-heading); font-size: 1.05rem; font-weight: 600; font-style: italic; }
.ab-intro-slogan::before { content: "\201C"; }
.ab-intro-slogan::after { content: "\201D"; }
.ab-intro-text p:not(.ab-intro-slogan) { margin: 0 0 12px; color: var(--text); line-height: 1.8; text-align: justify; }

/* Thẻ giá trị (Sứ mệnh – Giá trị cốt lõi – Tầm nhìn) */
.ab-values { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: 24px; }
.ab-value { position: relative; padding: 30px 26px 28px; border: 1px solid var(--border); border-top: 4px solid var(--primary); border-radius: 14px; background: #fff; text-align: center; transition: transform .25s ease; }
.ab-value:nth-child(3n+2) { border-top-color: var(--yellow); }
.ab-value:nth-child(3n) { border-top-color: var(--red); }
.ab-value:hover { transform: translateY(-3px); }
.ab-value-ico { display: inline-flex; align-items: center; justify-content: center; width: 84px; height: 84px; margin-bottom: 16px; border-radius: 50%; background: var(--bg-soft); overflow: hidden; box-shadow: 0 0 0 6px #fff, 0 0 0 7px var(--border); }
.ab-value-ico img { width: 100%; height: 100%; object-fit: cover; }
.ab-value-title { margin: 0 0 10px; color: var(--primary); font-size: 1rem; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; }
.ab-value-sub { margin: 0 0 8px; color: var(--red); font-weight: 500; font-size: .875rem; }
.ab-value-text { margin: 0; color: var(--text-muted); line-height: 1.7; font-size: .9rem; }
.ab-values.is-text .ab-value { text-align: left; }

/* Dòng thời gian — CHÉP .about-timeline của benhviendakhoathuynguyen (2026-11-03, người dùng: "sửa theo UI Thủy Nguyên, font đậm quá"):
   trục gạch đứt, mốc năm viên tròn xanh / đỏ xen kẽ, thẻ trắng đổ bóng nhẹ (ảnh trái – chữ phải). Khác nguồn: chữ nhẹ hơn (năm Barlow 700,
   tiêu đề Roboto 500), màu theo biến của site. Trục ngang PC (≥768px) / Mobile theo cấu hình ô (.is-pc-h / .is-mb-h). */
.ab-timeline { list-style: none; margin: 0 auto; padding: 0; max-width: 900px; position: relative; }
.ab-timeline::before { content: ""; position: absolute; left: 44px; top: 8px; bottom: 8px; border-left: 2px dashed #b8c7df; }
.ab-tl-item { position: relative; display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 16px; align-items: start; padding-bottom: 20px; }
.ab-tl-item:last-child { padding-bottom: 0; }
.ab-tl-year { position: relative; z-index: 1; justify-self: center; min-width: 76px; padding: 6px 10px; border-radius: 30px; text-align: center;
  background: var(--primary); color: #fff; font-family: var(--font-heading); font-weight: 700; font-size: .95rem; line-height: 1.4; letter-spacing: .3px;
  box-shadow: 0 0 0 5px rgba(8, 76, 161, .12); }
.ab-tl-item:nth-child(even) .ab-tl-year { background: var(--red); box-shadow: 0 0 0 5px rgba(229, 29, 27, .12); }
.ab-tl-card { display: flex; gap: 16px; background: #fff; border-radius: 12px; padding: 16px 18px; box-shadow: 0 8px 22px rgba(15, 23, 42, .07); }
.ab-tl-img { width: 120px; height: 90px; object-fit: cover; border-radius: 8px; flex-shrink: 0; }
.ab-tl-title { margin: 0 0 4px; font-family: var(--font-heading); font-size: 1rem; font-weight: 700; line-height: 1.45; color: var(--primary); }
.ab-tl-desc { margin: 0; color: var(--text-muted); font-size: .9rem; line-height: 1.65; white-space: pre-line; }
@media (max-width: 575px) {
  .ab-timeline::before { left: 32px; }
  .ab-tl-item { grid-template-columns: 64px minmax(0, 1fr); gap: 10px; }
  .ab-tl-year { min-width: 58px; font-size: .82rem; padding: 5px 8px; }
  .ab-tl-card { flex-direction: column; }
  .ab-tl-img { width: 100%; height: 160px; }
}
/* Trục NGANG (máy tính ≥992px): MỌI mốc xếp vừa MỘT hàng — không cuộn, không xuống dòng (người dùng 2026-11-03: cuộn ngang làm trục gạch
   bị cụt + hiện thanh cuộn). Khác TN (TN chia theo "số mục" của ô rồi cuộn). Dưới 992px trục ngang PC chuyển về trục dọc. */
@media (min-width: 992px) {
  .ab-timeline.is-pc-h { max-width: none; display: grid; grid-template-columns: repeat(var(--count, 4), minmax(0, 1fr)); gap: 20px; }
  .ab-timeline.is-pc-h::before { left: calc((100% - (var(--count, 4) - 1) * 20px) / var(--count, 4) / 2); right: calc((100% - (var(--count, 4) - 1) * 20px) / var(--count, 4) / 2); top: 17px; bottom: auto; border-left: 0; border-top: 2px dashed #b8c7df; }
  .ab-timeline.is-pc-h .ab-tl-item { grid-template-columns: 1fr; grid-template-rows: auto 1fr; gap: 16px; padding-bottom: 0; }
  .ab-timeline.is-pc-h .ab-tl-card { flex-direction: column; height: 100%; text-align: center; }
  .ab-timeline.is-pc-h .ab-tl-img { width: 100%; height: 150px; }
}
@media (max-width: 767px) {
  .ab-timeline.is-mb-h { max-width: none; display: grid; grid-auto-flow: column; gap: 20px; overflow-x: auto; padding: 4px 4px 28px; margin: -4px -4px 0; scrollbar-width: thin;
    grid-auto-columns: calc((100% - (var(--nm) - 1) * 20px) / var(--nm)); }
  .ab-timeline.is-mb-h::before { left: 0; right: 0; top: 19px; bottom: auto; border-left: 0; border-top: 2px dashed #b8c7df; }
  .ab-timeline.is-mb-h .ab-tl-item { grid-template-columns: 1fr; grid-template-rows: auto 1fr; gap: 16px; padding-bottom: 0; }
  .ab-timeline.is-mb-h .ab-tl-card { flex-direction: column; height: 100%; text-align: center; }
  .ab-timeline.is-mb-h .ab-tl-img { width: 100%; height: 150px; }
}

/* Thẻ chân dung (Ban lãnh đạo) */
.ab-people { display: flex; flex-wrap: wrap; justify-content: center; gap: 28px; }  /* flex: ít người vẫn căn GIỮA (lưới chia sẵn cột thì dồn trái) */
.ab-person { flex: 0 1 calc((100% - (var(--cols, 4) - 1) * 28px) / var(--cols, 4)); max-width: 280px; border: 1px solid var(--border); border-radius: 14px; background: #fff; overflow: hidden; text-align: center; }
.ab-person-photo { position: relative; aspect-ratio: 4 / 5; background: linear-gradient(180deg, #eaf2fc 0%, #f7faff 100%); overflow: hidden; }
.ab-person-photo img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.ab-person-empty { display: flex; align-items: center; justify-content: center; height: 100%; color: #b5c8e0; }
.ab-person-empty .icon { width: 64px; height: 64px; }
.ab-person-body { padding: 16px 16px 18px; border-top: 3px solid var(--primary); }
.ab-person-name { margin: 0; color: var(--primary); font-size: 1rem; font-weight: 700; line-height: 1.45; }
.ab-person-name a { color: inherit; }
.ab-person-role { margin: 6px 0 0; color: var(--red); font-size: .875rem; font-weight: 500; }
.ab-person-desc { margin: 4px 0 0; color: var(--text-muted); font-size: .875rem; line-height: 1.55; }

/* Thư viện ảnh */
.ab-gallery { display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); gap: 14px; }
.ab-gallery-item { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; }
.ab-gallery-item img { width: 100%; height: 100%; object-fit: cover; }
.ab-gallery-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 12px 10px; background: linear-gradient(180deg, transparent, rgba(5, 45, 97, .85)); color: #fff; font-size: .875rem; font-weight: 500; }
.ab-gallery-item:hover img { transform: translateZ(0) scale(1.04); }

/* Hộp xem ảnh lớn (site.js [data-lightbox]) */
.lb { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 56px 64px; background: rgba(3, 18, 40, .92);
  opacity: 0; transition: opacity .2s ease; }
.lb.is-open { opacity: 1; }
.lb[hidden] { display: none; }
/* Chuyển ảnh (2026-11-03): .is-out = ảnh cũ trượt + mờ RA theo hướng bấm; .is-in = vị trí đầu của ảnh mới (tắt transition) rồi trượt về giữa. */
.lb-fig { --lb-dx: 0px; margin: 0; max-width: 100%; max-height: 100%; text-align: center; transition: opacity .2s ease, transform .32s cubic-bezier(.22, .61, .36, 1); }
.lb:not(.is-open) .lb-fig { transform: scale(.96); }
.lb-fig.is-out { opacity: 0; transform: translateX(var(--lb-dx)); }
.lb-fig.is-in { opacity: 0; transform: translateX(var(--lb-dx)); transition: none; }
/* Vòng quay chỉ hiện khi ảnh tải lâu hơn .3s (ảnh nhanh không nháy vòng quay). */
.lb.is-loading::after { content: ""; position: absolute; left: 50%; top: 50%; width: 34px; height: 34px; margin: -17px 0 0 -17px; border: 3px solid rgba(255, 255, 255, .25); border-top-color: #fff; border-radius: 50%;
  opacity: 0; animation: lb-fade .2s ease .3s forwards, lb-spin .8s linear infinite; }
@keyframes lb-spin { to { transform: rotate(360deg); } }
@keyframes lb-fade { to { opacity: 1; } }
.lb-count { position: absolute; top: 24px; left: 50%; transform: translateX(-50%); color: rgba(255, 255, 255, .8); font-size: .875rem; letter-spacing: .5px; }
@media (prefers-reduced-motion: reduce) { .lb, .lb-fig { transition: none; } }
.lb-fig img { max-width: 100%; max-height: calc(100vh - 150px); border-radius: 8px; }
.lb-fig figcaption { margin-top: 12px; color: #fff; font-size: .92rem; }
.lb-btn { position: absolute; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .12); color: #fff; cursor: pointer; transition: background-color .2s; }
.lb-btn:hover { background: rgba(255, 255, 255, .24); }
.lb-btn .icon { width: 22px; height: 22px; }
.lb-close { top: 14px; right: 14px; }
.lb-prev { left: 12px; top: 50%; margin-top: -22px; }
.lb-next { right: 12px; top: 50%; margin-top: -22px; }

@media (max-width: 991px) {
  .ab-intro { grid-template-columns: 1fr; gap: 32px; }
  .ab-intro.is-right .ab-intro-media { order: 0; }
  .ab-values { grid-template-columns: repeat(min(var(--cols, 3), 2), minmax(0, 1fr)); }
  .ab-gallery { grid-template-columns: repeat(min(var(--cols, 4), 3), minmax(0, 1fr)); }
  .ab-person { flex-basis: calc((100% - 56px) / 3); }
}
@media (max-width: 767px) {
  .ab-section { padding: 40px 0; }
  .ab-head { margin-bottom: 24px; }
  .ab-values { grid-template-columns: 1fr; }
  .ab-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .ab-people { gap: 14px; }
  .ab-person { flex-basis: calc((100% - 14px) / 2); }
  /* Người đứng đầu (_Cell.cshtml — admin tick "Đứng đầu trên điện thoại"): riêng hàng trên, thẻ to hơn; các thẻ khác chạy slide 2 thẻ / màn. */
  .ab-people.has-lead { display: block; }
  .ab-person.is-lead { width: 72%; max-width: 280px; margin: 0 auto 18px; }
  .ab-person.is-lead .ab-person-name { font-size: 1.08rem; }
  .ab-people-rest { --gap: 14px; }
  .ab-people-rest .ab-person { max-width: none; }
}
/* Máy tính / tablet: lớp bọc slide "biến mất" (display:contents) → mọi thẻ là con trực tiếp của .ab-people, xếp theo style order = thứ tự. */
@media (min-width: 768px) {
  .ab-people-rest, .ab-people-rest .hp-track { display: contents; }
}

/* ═══ Trang Tiêm chủng /tiem-chung-vaccine (2026-11-03) ═══════════════════════════════════════════════════════════════════════════
   CHÉP khối "Trang con — Tiêm chủng" + "Trang Tiêm chủng trên điện thoại ≤768px" của site.css benhviendakhoathuynguyen (vaccine-calc-card,
   vaccine-period-*, vaccine-item-pill, vaccine-badge-origin, vaccine-pkg-card, vaccine-step-card — màu Bootstrap của demo). Chênh lệch: xanh
   thương hiệu nguồn (#0C48A1 / #072d69) → biến --primary / --primary-deep của dự án; giá đỏ → --red; lưới thẻ gói / thẻ bước tự dựng (nguồn
   dùng .hp-list / lưới ô của bộ dựng); bỏ .sub-hero-btn--calc + .form-panel (dự án dùng thanh lối tắt _PageBanner + khối đăng ký 2 cột). */

/* Thẻ tra cứu */
.vaccine-calc { max-width: 1000px; margin: 0 auto; }
.vaccine-calc-card {
  max-width: 1000px; margin: 0 auto 24px; background: #fff; border-radius: 18px; overflow: hidden;
  border: 2px solid #e0f2fe; box-shadow: 0 15px 35px rgba(8, 76, 161, .12);
}
.vaccine-calc-header {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 22px 28px;
  background: linear-gradient(135deg, var(--primary), #0284c7); color: #fff;
}
.vaccine-calc-title { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; font-family: var(--font-main); font-size: 1.15rem; font-weight: 700; color: #fff; }
.vaccine-calc-title .icon { width: 22px; height: 22px; }
.vaccine-calc-sub { font-size: .85rem; opacity: .8; }
.vaccine-calc-standard {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 50px; background: #fff; color: var(--primary);
  font-size: .8rem; font-weight: 700; white-space: nowrap;
}
.vaccine-calc-standard .icon { width: 15px; height: 15px; color: #198754; }
.vaccine-calc-body { padding: 28px; }
.vaccine-calc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: end; }
.vaccine-calc-field label { display: block; margin-bottom: 6px; font-size: .85rem; font-weight: 500; color: #475569; }
.vaccine-calc-field label .req { color: #dc3545; }
.vaccine-input-group { display: flex; align-items: stretch; }
.vaccine-input-icon {
  display: flex; align-items: center; justify-content: center; padding: 0 12px; background: #f8f9fa; color: var(--primary);
  border: 1px solid #dee2e6; border-right: 0; border-radius: 6px 0 0 6px;
}
.vaccine-input-icon .icon { width: 16px; height: 16px; }
.vaccine-input-group .form-control, .vaccine-input-group .pd-wrap { flex: 1; min-width: 0; }
.vaccine-calc .form-control {
  width: 100%; height: 42px; padding: .55rem .75rem; font-family: var(--font-main); font-size: .9rem; color: #212529; background: #fff;
  border: 1px solid #dee2e6; border-radius: 0 6px 6px 0; transition: border-color .15s ease, box-shadow .15s ease;
}
.vaccine-calc .pd-input { width: 100%; height: 42px; padding: .55rem .75rem; font-size: .9rem; border: 1px solid #dee2e6; border-radius: 0 6px 6px 0; }
.vaccine-calc .form-control:focus, .vaccine-calc .pd-input:focus { outline: 0; border-color: #86b7fe; box-shadow: 0 0 0 .25rem rgba(13, 110, 253, .25); }
.vaccine-calc .form-control.is-invalid, .vaccine-calc .pd-input.is-invalid { border-color: #dc3545; }
.vaccine-calc-btn {
  display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; height: 42px; padding: .6rem 1rem; border: 0; border-radius: 6px;
  background: var(--primary); color: #fff; font-family: var(--font-main); font-size: .95rem; font-weight: 700; cursor: pointer;
  box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075); transition: background .2s ease;
}
.vaccine-calc-btn:hover { background: var(--primary-dark); }
.vaccine-calc-btn .icon { width: 16px; height: 16px; }
.vaccine-calc-error { margin: 12px 0 0; padding: 8px 12px; border-radius: 6px; background: #fef2f2; color: #991b1b; font-size: .85rem; }
.vaccine-calc-error[hidden] { display: none; }
.vaccine-quick { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px; }
.vaccine-quick > span { font-size: .85rem; color: #6c757d; margin-right: 4px; }
.vaccine-quick-btn {
  padding: 4px 10px; border: 1px solid #6c757d; border-radius: 4px; background: #fff; color: #6c757d; font-family: var(--font-main);
  font-size: .82rem; cursor: pointer; transition: all .2s ease;
}
.vaccine-quick-btn:hover { background: #6c757d; color: #fff; }

/* Kết quả */
.vaccine-result { max-width: 1000px; margin: 0 auto; scroll-margin-top: var(--sticky-top, 110px); }
.vaccine-result[hidden] { display: none; }
.vaccine-summary {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 24px; padding: 24px;
  border-radius: 16px; background: linear-gradient(135deg, var(--primary-deep), var(--primary)); color: #fff; box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075);
}
.vaccine-summary-child { display: flex; align-items: center; gap: 16px; }
.vaccine-summary-avatar { width: 60px; height: 60px; flex-shrink: 0; border-radius: 50%; background: #fff; color: var(--primary); display: flex; align-items: center; justify-content: center; }
.vaccine-summary-avatar .icon { width: 30px; height: 30px; }
.vaccine-summary-name { margin: 0 0 4px; font-family: var(--font-heading); font-size: 1.18rem; font-weight: 700; color: #fff; }
.vaccine-summary-age { font-size: .9rem; opacity: .95; }
.vaccine-summary-age strong { color: var(--yellow); }
.vaccine-summary-book, .vaccine-btn-book {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 22px; border-radius: 50px; font-weight: 700; font-size: .88rem;
  transition: all .2s ease;
}
.vaccine-summary-book { background: var(--yellow); color: #1e293b; box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .15); }
.vaccine-summary-book:hover { background: #ffd84a; color: #1e293b; }
.vaccine-summary-book .icon, .vaccine-btn-book .icon, .vaccine-btn-print .icon { width: 16px; height: 16px; }
.vaccine-period-box { margin-bottom: 20px; padding: 20px; border-radius: 14px; transition: all .3s ease; }
.vaccine-period-current { background: #f0fdf4; border: 2px solid #86efac; }
.vaccine-period-next { background: #eff6ff; border: 2px solid #93c5fd; }
.vaccine-period-past { background: #f8fafc; border: 2px dashed #cbd5e1; }
.vaccine-period-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 14px; }
.vaccine-period-head h5, .vaccine-period-head h6 {
  display: flex; align-items: center; gap: 6px; margin: 0; font-family: var(--font-main); font-size: .95rem; font-weight: 700;
}
.vaccine-period-head h6 { font-size: .9rem; }
.vaccine-period-head .icon { width: 17px; height: 17px; flex-shrink: 0; }
.vaccine-period-current h5 { color: #198754; }
.vaccine-period-next h5 { color: var(--primary); }
.vaccine-period-past h6 { color: #6c757d; }
.vaccine-period-tag { padding: 6px 14px; border-radius: 50px; font-size: .78rem; font-weight: 700; color: #fff; white-space: nowrap; }
.vaccine-period-tag.is-green { background: #198754; }
.vaccine-period-tag.is-blue { background: var(--primary); }
.vaccine-period-tag.is-gray { background: #6c757d; border-radius: 6px; padding: 4px 10px; }
.vaccine-next-due { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; margin-bottom: 10px; font-size: .85rem; color: #6c757d; }
.vaccine-next-due .icon { width: 15px; height: 15px; color: #ffc107; }
.vaccine-next-due strong { color: #0f172a; }
.vaccine-past-note { margin: 0 0 14px; font-size: .85rem; color: #6c757d; }
.vaccine-past-none { padding: 6px 0; font-size: .85rem; color: #6c757d; }
.vaccine-item-pill {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; padding: 12px 16px;
  background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; transition: transform .2s ease, box-shadow .2s ease;
}
.vaccine-item-pill:hover { transform: translateX(4px); box-shadow: 0 4px 12px rgba(0, 0, 0, .06); }
.vaccine-item-pill.is-past { opacity: .85; }
.vaccine-item-pill:last-child { margin-bottom: 0; }
.vaccine-item-name { font-size: .95rem; font-weight: 700; color: var(--primary-deep); }
.vaccine-item-sub { margin-top: 2px; font-size: .82rem; color: #6c757d; }
.vaccine-badge-origin { flex-shrink: 0; max-width: 45%; padding: 4px 10px; border-radius: 6px; background: #e0f2fe; color: #0369a1; font-size: .78rem; font-weight: 700; text-align: right; }
.vaccine-badge-past { flex-shrink: 0; padding: 3px 8px; border-radius: 6px; background: #f8f9fa; border: 1px solid #dee2e6; color: #6c757d; font-size: .75rem; font-weight: 700; white-space: nowrap; }
.vaccine-result-actions {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: 24px; padding-top: 16px;
  border-top: 1px solid #dee2e6;
}
.vaccine-btn-print {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border: 1px solid #6c757d; border-radius: 6px;
  background: #fff; color: #6c757d; font-family: var(--font-main); font-size: .88rem; cursor: pointer; transition: all .2s ease;
}
.vaccine-btn-print:hover { background: #6c757d; color: #fff; }
.vaccine-btn-book { background: var(--primary); color: #fff; }
.vaccine-btn-book:hover { background: var(--primary-dark); color: #fff; }

/* Gói tiêm chủng — .vaccine-pkg-card; lưới theo số thẻ mỗi hàng của ô (PC · tablet <992 · ĐT dọc <576). */
.vaccine-pkg-grid { display: grid; gap: 24px; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); padding-top: 6px; }
@media (max-width: 991px) { .vaccine-pkg-grid { grid-template-columns: repeat(var(--cols-tab, 2), minmax(0, 1fr)); } }
@media (max-width: 575px) { .vaccine-pkg-grid { grid-template-columns: repeat(var(--cols-mb, 1), minmax(0, 1fr)); gap: 14px; } }
.vaccine-pkg-card {
  position: relative; display: flex; flex-direction: column; height: 100%; padding: 24px; background: #fff;
  border: 2px solid #e2e8f0; border-radius: 16px; cursor: pointer; transition: all .3s ease;
}
.vaccine-pkg-card:hover, .vaccine-pkg-card.selected { border-color: var(--primary); box-shadow: 0 12px 30px rgba(8, 76, 161, .15); transform: translateY(-6px); }
.vaccine-pkg-card:focus-visible { outline: 3px solid rgba(8, 76, 161, .35); outline-offset: 2px; }
.vaccine-pkg-card.featured { border-color: #f59e0b; background: linear-gradient(180deg, #fffbeb 0%, #fff 100%); box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15); }
.vaccine-pkg-badge { align-self: flex-start; margin-bottom: 16px; padding: 4px 14px; border-radius: 50px; font-size: .75rem; font-weight: 700; text-transform: uppercase; }
.vaccine-pkg-badge.is-blue { background: var(--primary); color: #fff; }
.vaccine-pkg-badge.is-amber { background: var(--yellow); color: #212529; }
.vaccine-pkg-badge.is-green { background: #198754; color: #fff; }
.vaccine-pkg-name { margin: 0 0 4px; font-family: var(--font-heading); font-size: 1.18rem; font-weight: 700; color: var(--primary); line-height: 1.25; }
.vaccine-pkg-sub { margin: 0 0 16px; font-size: .85rem; color: #6c757d; }
.vaccine-pkg-price { margin-bottom: 12px; font-family: var(--font-heading); font-size: 1.35rem; font-weight: 800; color: var(--red); }
.vaccine-pkg-price .pkg-old-price { margin-left: 6px; font-size: .9rem; font-weight: 600; color: #94a3b8; text-decoration: line-through; }
.vaccine-pkg-benefits { list-style: none; padding: 0; margin: 0 0 24px; font-size: .85rem; color: #6c757d; line-height: 1.8; }
.vaccine-pkg-benefits li { display: flex; align-items: flex-start; gap: 8px; }
.vaccine-pkg-benefits .icon { width: 15px; height: 15px; flex-shrink: 0; margin-top: 5px; color: #198754; }
.vaccine-pkg-btn {
  margin-top: auto; display: block; width: 100%; padding: 8px 12px; text-align: center; border: 1px solid var(--primary); border-radius: 50px;
  color: var(--primary); font-size: .88rem; font-weight: 700; transition: all .2s ease;
}
.vaccine-pkg-btn.is-solid, .vaccine-pkg-card:hover .vaccine-pkg-btn { background: var(--primary); color: #fff; }

/* Quy trình — .vaccine-step-card (nhóm "Chỉ chữ" có mô tả). */
.vaccine-steps { display: grid; gap: 20px; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); }
@media (max-width: 991px) { .vaccine-steps { grid-template-columns: repeat(var(--cols-tab, 2), minmax(0, 1fr)); } }
.vaccine-step-card { display: block; height: 100%; padding: 22px; background: #fff; border-radius: 14px; border-left: 5px solid var(--primary); box-shadow: 0 4px 15px rgba(0, 0, 0, .04); color: inherit; }
a.vaccine-step-card:hover { box-shadow: 0 8px 22px rgba(8, 76, 161, .1); color: inherit; }
.vaccine-step-badge { display: inline-block; margin-bottom: 14px; padding: 4px 12px; border-radius: 50px; background: var(--primary); color: #fff; font-size: .75rem; font-weight: 700; }
.vaccine-step-title { margin: 0 0 8px; font-family: var(--font-main); font-size: 1rem; font-weight: 700; color: var(--primary-deep); line-height: 1.4; }
.vaccine-step-desc { margin: 0; font-size: .875rem; color: #6c757d; line-height: 1.55; white-space: pre-line; }
.vaccine-step-card.is-last { border-left-color: #198754; }
.vaccine-step-card.is-last .vaccine-step-badge { background: #198754; }
.vaccine-step-card.is-last .vaccine-step-title { color: #198754; }
/* Vòng số thứ tự — chỉ hiện trên điện thoại (thay nhãn "Bước n"). */
.vaccine-step-no { display: none; }

@media (max-width: 767px) {
  .vaccine-calc-grid { grid-template-columns: 1fr; }
  .vaccine-item-pill { flex-direction: column; align-items: flex-start; }
  .vaccine-badge-origin { max-width: none; text-align: left; }
  .vaccine-result-actions { justify-content: center; }
}

/* Điện thoại ≤768px — chuẩn điện thoại của nguồn: ô nhập cao 40px, chữ 14px, nút bo 4px, thẻ bo 8px, đệm mỏng. */
@media (max-width: 768px) {
  .vaccine-calc-card { border-radius: 8px; }
  .vaccine-calc-header { padding: 12px 14px; }
  .vaccine-calc-title { font-size: .98rem; margin-bottom: 2px; }
  .vaccine-calc-title .icon { width: 18px; height: 18px; }
  .vaccine-calc-sub { font-size: .78rem; line-height: 1.45; }
  .vaccine-calc-standard { margin-top: 8px; padding: 3px 10px; font-size: .72rem; }
  .vaccine-calc-standard .icon { width: 13px; height: 13px; }
  .vaccine-calc-body { padding: 14px; }
  .vaccine-calc-grid { gap: 10px; }
  .vaccine-calc-field label { font-size: .875rem; margin-bottom: 3px; }
  .vaccine-calc .form-control, .vaccine-calc .pd-input { height: 40px; padding: 6px 10px; font-size: .875rem; }
  .vaccine-input-icon { width: 38px; padding: 0; }
  .vaccine-calc-btn { height: 40px; padding: 0 12px; font-size: .875rem; border-radius: 4px; }
  .vaccine-quick { gap: 6px; margin-top: 12px; }
  .vaccine-quick > span { flex: 0 0 100%; font-size: .8rem; margin: 0; }
  .vaccine-quick-btn { flex: 1 1 calc(25% - 6px); padding: 6px 4px; font-size: .78rem; text-align: center; }
  .vaccine-summary { padding: 18px; }

  .vaccine-pkg-card { padding: 16px; border-radius: 8px; }
  .vaccine-pkg-card:hover, .vaccine-pkg-card.selected { transform: none; }
  .vaccine-pkg-badge { margin-bottom: 10px; padding: 3px 10px; font-size: .68rem; }
  .vaccine-pkg-name { font-size: 1.02rem; }
  .vaccine-pkg-sub { margin-bottom: 10px; font-size: .8rem; line-height: 1.45; }
  .vaccine-pkg-price { font-size: 1.15rem; margin-bottom: 8px; }
  .vaccine-pkg-benefits { margin-bottom: 14px; font-size: .8rem; line-height: 1.6; }
  .vaccine-pkg-benefits .icon { width: 13px; height: 13px; margin-top: 4px; }
  .vaccine-pkg-btn { min-height: 40px; padding: 8px 12px; font-size: .875rem; border-radius: 4px; }

  /* Quy trình: bỏ bóng, dùng viền; số bước là vòng tròn CÙNG HÀNG với nội dung (thay nhãn "Bước n"). */
  .vaccine-steps { grid-template-columns: repeat(var(--cols-mb, 1), minmax(0, 1fr)); gap: 12px; }
  .vaccine-step-card { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 8px; border: 1px solid var(--border); box-shadow: none; }
  .vaccine-step-card.is-last { border-left-color: var(--border); }
  .vaccine-step-no {
    display: flex; flex-shrink: 0; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%;
    background: var(--primary); color: #fff; font-size: .875rem; font-weight: 700; line-height: 1;
  }
  .vaccine-step-card.is-last .vaccine-step-no { background: #198754; }
  .vaccine-step-body { flex: 1; min-width: 0; }
  .vaccine-step-badge { display: none; }
  .vaccine-step-title { margin: 0 0 4px; font-size: .95rem; }
  .vaccine-step-desc { font-size: .8rem; line-height: 1.5; }
}



/* Đăng ký tiêm chủng 2 cột (Vaccination/_Booking — 2026-11-03, người dùng: "hướng dẫn và form giống trang chủ, style lại cho đẹp hơn"):
   HAI CỘT CHUNG MỘT KHUNG (cao bằng nhau) — trái nền xanh thương hiệu chữ trắng (bước = vòng số nối vạch đứt, lưu ý = khung kính mờ, tổng
   đài số vàng), phải thẻ form trắng (đầu thẻ lam nhạt + icon). Ô nhập dùng chung .bf-* của form trang chủ. */
.vbk {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); border-radius: 20px; overflow: hidden; background: #fff;
  box-shadow: 0 24px 60px rgba(8, 41, 91, .14); border: 1px solid var(--border-light);
}
.vbk-guide {
  position: relative; display: flex; flex-direction: column; gap: 22px; padding: 40px 36px; color: #fff; overflow: hidden;
  background: radial-gradient(120% 80% at 100% 0%, rgba(255, 255, 255, .12) 0%, transparent 55%), linear-gradient(160deg, var(--primary) 0%, var(--primary-deep) 100%);
}
.vbk-guide::after {   /* vòng trang trí mờ góc dưới */
  content: ""; position: absolute; right: -90px; bottom: -90px; width: 240px; height: 240px; border-radius: 50%;
  border: 36px solid rgba(255, 255, 255, .05); pointer-events: none;
}
.vbk-tag { display: inline-flex; align-items: center; gap: 10px; margin: 0; font-size: .78rem; font-weight: 700; letter-spacing: 1.2px; color: var(--yellow); }
.vbk-tag::before { content: ""; width: 28px; height: 2px; border-radius: 2px; background: var(--yellow); }
.vbk-title { margin: -10px 0 0; font-family: var(--font-heading); font-size: clamp(1.45rem, 2.2vw, 1.9rem); font-weight: 800; line-height: 1.2; text-transform: uppercase; color: #fff; }
.vbk-desc { margin: -8px 0 0; font-size: .95rem; line-height: 1.6; color: rgba(255, 255, 255, .82); }
.vbk-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.vbk-steps li { position: relative; display: flex; gap: 14px; align-items: flex-start; }
.vbk-steps li:not(:last-child)::before {   /* vạch nối các vòng số */
  content: ""; position: absolute; left: 17px; top: 38px; bottom: -14px; border-left: 2px dashed rgba(255, 255, 255, .3);
}
.vbk-step-no {
  flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%;
  background: #fff; color: var(--primary); font-family: var(--font-heading); font-weight: 800; font-size: 1rem; box-shadow: 0 4px 12px rgba(0, 0, 0, .15);
}
.vbk-steps div > strong { display: block; margin-top: 2px; font-size: .98rem; font-weight: 700; color: #fff; }
.vbk-steps div > span { display: block; margin-top: 2px; font-size: .86rem; line-height: 1.5; color: rgba(255, 255, 255, .78); }
.vbk-note { padding: 16px 18px; border-radius: 14px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .18); backdrop-filter: blur(4px); }
.vbk-note-title { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: .9rem; font-weight: 700; color: #fff; }
.vbk-note-title .icon { width: 17px; height: 17px; color: var(--yellow); }
.vbk-note ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.vbk-note li { display: flex; align-items: flex-start; gap: 8px; font-size: .86rem; line-height: 1.45; color: rgba(255, 255, 255, .88); }
.vbk-note li .icon { flex-shrink: 0; width: 15px; height: 15px; margin-top: 2px; color: #86efac; }
.vbk-contact { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: auto; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .16); }
.vbk-contact-item { display: flex; gap: 10px; align-items: flex-start; color: #fff; }
.vbk-contact-ico { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: rgba(255, 255, 255, .14); }
.vbk-contact-ico .icon { width: 18px; height: 18px; }
.vbk-contact-item small { display: block; font-size: .76rem; color: rgba(255, 255, 255, .7); }
.vbk-contact-item p { margin: 2px 0 0; font-size: .84rem; color: rgba(255, 255, 255, .88); }
.vbk-contact-item p strong { color: #fff; }
.vbk-contact-item.is-call strong { display: block; margin-top: 2px; font-family: var(--font-heading); font-size: 1.3rem; font-weight: 800; color: var(--yellow); }
.vbk-contact-item.is-call .vbk-contact-ico { background: var(--red); }
.vbk-contact-item.is-call:hover strong { color: #fff; }
.vbk-form { display: flex; flex-direction: column; min-width: 0; }
.vbk-form-head { display: flex; align-items: center; gap: 14px; padding: 22px 32px; background: var(--bg-soft); border-bottom: 1px solid var(--border-light); }
.vbk-form-ico { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; background: var(--primary); color: #fff; }
.vbk-form-ico .icon { width: 22px; height: 22px; }
.vbk-form-head h3 { margin: 0; font-family: var(--font-heading); font-size: 1.15rem; font-weight: 700; text-transform: uppercase; color: var(--primary); }
.vbk-form-head p { margin: 2px 0 0; font-size: .82rem; color: var(--text-muted); }
.vbk-form-head p b { color: var(--red); }
.vbk-form-body { flex: 1; padding: 28px 32px 30px; }
@media (max-width: 991px) {
  .vbk { grid-template-columns: 1fr; }
  .vbk-guide { padding: 30px 26px; }
}
@media (max-width: 575px) {
  .vbk { border-radius: 12px; }
  .vbk-guide { gap: 16px; padding: 22px 16px; }
  .vbk-guide::after { display: none; }
  .vbk-title { font-size: 1.2rem; }
  .vbk-desc { font-size: .86rem; }
  .vbk-contact { grid-template-columns: 1fr; gap: 12px; }
  .vbk-form-head { padding: 14px 16px; }
  .vbk-form-head h3 { font-size: 1rem; }
  .vbk-form-body { padding: 18px 16px 20px; }
  /* Hàng có số ô LẺ → ô ĐẦU chiếm trọn hàng, các ô sau ghép đôi (quy tắc form điện thoại của nguồn). */
  .vbk-form .bf-row > .bf-field:first-child:nth-last-child(odd):not(:only-child) { grid-column: 1 / -1; }
}

/* ═══ TRANG CHỦ — các khối module (2026-11-03, người dùng: "xây dựng các module còn thiếu ở trang chủ giống benhvienthuynguyen") ═══════════
   CHÉP site.css của benhviendakhoathuynguyen cho các khối demo trang chủ: .header-box (tiêu đề khối), .page-row / .page-cell (lưới 12 cột),
   .hp-list (lưới / slide theo cấu hình ô), Giới thiệu (.about-*), Dịch vụ (.service-card-*), Đội ngũ (.home-team-section, .stat-counter-*,
   .doctor-featured-*, .doctor-mini-*), Trang thiết bị (.equipment-*), Quy trình (.process-flow-*), Tin tức (.news-*), Video (.featured-video-*,
   .video-*), Đối tác (.partner-logo-*). Chênh lệch: biến màu nguồn → biến thương hiệu (--primary…); đỏ / cam TRANG TRÍ của nguồn (thẻ dịch vụ
   xen kẽ cam, nút play đỏ, bước quy trình đỏ, dấu + thiết bị đỏ, gạch chân tiêu đề đỏ → xanh) đổi sang xanh đậm / vàng theo quy ước màu
   (đỏ chỉ Hotline cấp cứu + Đặt lịch — CLAUDE.md 2026-10-30); nút đặt lịch / tư vấn giữ đỏ. */
.section-padding { padding: 60px 0; }
@media (max-width: 768px) {
  .section-padding { padding: 40px 0; }
}
.header-box { margin-bottom: 2rem; position: relative; }
.header-box .title { font-size: 1.75rem; font-weight: 800; color: var(--primary); text-transform: uppercase; position: relative; display: inline-block; margin-bottom: 1rem; letter-spacing: 0.5px; }
.header-box .title.has-after::after { content: ""; position: absolute; left: 0; bottom: -8px; width: 65px; height: 3px; background: linear-gradient(90deg, var(--primary) 0 70%, var(--yellow) 70% 100%); border-radius: 2px; }
.header-box.text-center .title.has-after::after { left: 50%; transform: translateX(-50%); }
.header-box .title.white { color: #ffffff; }
.header-box .title.white.has-after::after { background: linear-gradient(90deg, var(--red), #ffffff); }
.header-box .title.red { color: var(--red); font-style: italic; font-size: 1.4rem; font-weight: 700; }
.header-box .cont { color: var(--text-muted); font-size: 0.98rem; line-height: 1.7; max-width: 950px; }
.header-box .cont.white { color: rgba(255, 255, 255, 0.88); }
.about-hospital-section { background-color: #ffffff; }
.about-subtitle-tag { color: var(--primary); font-weight: 800; font-size: 0.95rem; text-transform: uppercase; letter-spacing: 1px; display: inline-flex; align-items: center; gap: 6px; }
.about-img-box { position: relative; border-radius: 14px; overflow: hidden; box-shadow: 0 15px 40px rgba(8, 76, 161, 0.18); height: 100%; min-height: 480px; display: flex; transition: transform 0.4s ease, box-shadow 0.4s ease; animation: aboutBoxEntrance 0.9s cubic-bezier(0.22, 1, 0.36, 1) both; }
.about-img-box img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1); }
.about-img-box:hover img { transform: scale(1.05); }
.about-img-box:hover { box-shadow: 0 20px 45px rgba(8, 76, 161, 0.28); }
.about-experience-badge { position: absolute; bottom: 24px; right: 24px; background: linear-gradient(135deg, var(--primary) 0%, var(--primary-deep) 100%); color: #ffffff; padding: 16px 24px; border-radius: 10px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); border: 1px solid rgba(255, 255, 255, 0.25); text-align: center; backdrop-filter: blur(6px); animation: pulseBadge 3s infinite ease-in-out; }
.about-experience-badge .years { font-size: 2.8rem; font-weight: 900; line-height: 1; color: #ffffff !important; letter-spacing: 1px; margin-bottom: 4px; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4); }
.about-experience-badge .text { font-size: 0.82rem; font-weight: 700; color: #ffffff; text-transform: uppercase; letter-spacing: 0.5px; }
.about-features-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 20px; margin-top: 20px; }
.about-feature-item { display: flex; align-items: center; gap: 10px; font-size: 0.92rem; font-weight: 600; color: var(--text-dark); }
.services-packages-section { background-color: #f8fafc; }
@media (max-width: 768px) {
  .service-card-img { height: 110px !important; }
  .service-card-body { padding: 10px 8px !important; min-height: 115px !important; }
  .service-card-title { font-size: 0.78rem !important; line-height: 1.25 !important; margin-bottom: 4px !important; -webkit-line-clamp: 2 !important; }
  .service-card-desc { font-size: 0.68rem !important; line-height: 1.2 !important; margin-bottom: 0 !important; -webkit-line-clamp: 2 !important; }
  .card-plus-btn { width: 22px !important; height: 22px !important; font-size: 0.65rem !important; }
}
.service-card-item { border-radius: 14px; overflow: hidden; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08); display: flex; flex-direction: column; transition: transform 0.35s ease, box-shadow 0.35s ease; text-decoration: none !important; border: none; background-color: #ffffff; }
.service-card-item:hover { transform: translateY(-8px); box-shadow: 0 16px 36px rgba(0, 0, 0, 0.16); }
.service-card-img { position: relative; height: 190px; overflow: hidden; background-color: #f1f5f9; }
.service-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.service-card-item:hover .service-card-img img { transform: scale(1.08); }
.service-card-body { padding: 18px 16px 16px 16px; display: flex; flex-direction: column; justify-content: space-between; min-height: 175px; color: #ffffff; }
.service-card-item.blue-theme .service-card-body { background-color: var(--primary); }
.service-card-item.coral-theme .service-card-body { background-color: var(--primary-deep); }
.service-card-title { font-size: 0.98rem; font-weight: 700; color: #ffffff !important; margin-bottom: 8px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-transform: none; }
.service-card-desc { font-size: 0.82rem; color: rgba(255, 255, 255, 0.92); line-height: 1.45; margin-bottom: 14px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card-plus-btn { width: 28px; height: 28px; border-radius: 50%; background-color: #ffffff; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); transition: transform 0.3s ease; }
.service-card-item.blue-theme .card-plus-btn { color: var(--primary); }
.service-card-item.coral-theme .card-plus-btn { color: var(--primary-deep); }
.service-card-item:hover .card-plus-btn { transform: rotate(90deg) scale(1.15); }
.home-team-section { background: linear-gradient(180deg, var(--primary-deep) 0%, #03193a 100%); color: #ffffff; position: relative; overflow: hidden; }
.home-team-section .header-box .title, .home-team-section .cell-heading .title { color: #fff; }
.home-team-section .header-box .cont, .home-team-section .cell-heading .cont { color: rgba(255, 255, 255, .92); }
.stat-counter-item { text-align: center; padding: 4px 6px; }
.stat-counter-number { font-size: 1.65rem; font-weight: 800; color: #ffffff !important; line-height: 1.1; margin-bottom: 4px; font-family: var(--font-heading); text-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); }
.stat-counter-label { font-size: 0.74rem; color: #ffffff !important; font-weight: 600; text-transform: uppercase; letter-spacing: 0.2px; line-height: 1.25; }
.doctor-featured-card { background: #ffffff; color: var(--text-dark); border-radius: 14px; overflow: hidden; box-shadow: 0 15px 40px rgba(0, 0, 0, 0.25); margin-top: 35px; transition: opacity 0.25s ease, transform 0.25s ease; }
.doctor-featured-card.fade-switching { opacity: 0.35; transform: scale(0.98); }
.doctor-left-profile { padding: 24px 20px; text-align: center; background: #f8fafc; border-right: 1px solid var(--border); display: flex; flex-direction: column; align-items: center; justify-content: center; }
.doctor-photo-frame { width: 100%; max-width: 250px; height: 360px; border-radius: 12px; overflow: hidden; background: #e2e8f0; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); margin-bottom: 14px; }
.doctor-portrait-img { width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: transform 0.4s ease; }
.doctor-left-profile:hover .doctor-portrait-img { transform: scale(1.05); }
.doctor-left-profile .doctor-name { font-size: 1.18rem; font-weight: 800; color: var(--primary); text-transform: uppercase; margin-bottom: 3px; letter-spacing: 0.3px; }
.doctor-left-profile .doctor-position { font-size: 0.9rem; font-weight: 700; color: #0f172a; margin-bottom: 10px; }
.doctor-right-details { padding: 28px 32px; }
.doctor-detail-block { margin-bottom: 18px; }
.doctor-detail-block:last-child { margin-bottom: 0; }
.doctor-detail-block .detail-heading { font-size: 0.98rem; font-weight: 800; color: var(--primary); text-transform: uppercase; margin-bottom: 6px; display: flex; align-items: center; gap: 8px; }
.doctor-detail-block .detail-content-box p { border-left: 3px solid var(--primary); padding-left: 14px; margin-left: 2px; font-size: 0.86rem; color: #334155; line-height: 1.6; margin-bottom: 0; }
.doctor-detail-block .doc-intro-text { font-style: italic; }
.doctor-mini-card { background: #ffffff; border-radius: 12px; padding: 18px 12px; text-align: center; color: var(--text-dark); box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); transition: all 0.35s ease; cursor: pointer; border: 2px solid transparent; position: relative; }
.doctor-mini-card:hover,
.doctor-mini-card.active { transform: translateY(-6px); border-color: var(--primary); box-shadow: 0 12px 30px rgba(8, 76, 161, 0.35); }
.doctor-mini-card.active { background-color: #f0f7ff; }
.doctor-mini-card.active .btn { background-color: var(--primary); color: #ffffff; }
.doctor-mini-avatar { width: 95px; height: 95px; border-radius: 12px; object-fit: cover; margin: 0 auto 10px; border: 3px solid var(--primary); transition: transform 0.3s ease; }
.doctor-mini-card:hover .doctor-mini-avatar { transform: scale(1.08); }
.doctor-mini-name { font-size: 0.88rem; font-weight: 700; color: var(--primary); text-transform: uppercase; margin-bottom: 4px; line-height: 1.3; }
.doctor-mini-role { font-size: 0.75rem; color: var(--text-muted); margin-bottom: 10px; line-height: 1.3; }
.equipment-section { background-color: #ffffff; }
.equipment-item-card { position: relative; border-radius: 12px; overflow: hidden; height: 250px; cursor: pointer; background-color: #ffffff; border: 1px solid #e2e8f0; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08); transition: transform 0.35s ease, box-shadow 0.35s ease; }
.equipment-item-card:hover { transform: translateY(-6px); box-shadow: 0 15px 35px rgba(8, 76, 161, 0.2); }
.equipment-item-card img { width: 100%; height: 100%; object-fit: contain; padding: 14px 14px 44px; background-color: #ffffff; transition: transform 0.4s ease; }
.equipment-bottom-caption { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(180deg, rgba(8, 41, 91, 0) 0%, rgba(6, 28, 64, 0.96) 100%); padding: 36px 16px 16px; color: #ffffff !important; font-family: var(--font-heading); font-size: 1.05rem; font-weight: 900 !important; text-transform: uppercase; letter-spacing: 0.6px; text-align: center; pointer-events: none; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7); transition: opacity 0.3s ease; z-index: 2; }
.equipment-item-card:hover .equipment-bottom-caption { opacity: 0; }
.equipment-item-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(180deg, rgba(8, 76, 161, 0.45) 0%, rgba(8, 41, 91, 0.95) 100%); color: #ffffff; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px 20px; text-align: center; opacity: 0; transition: opacity 0.3s ease; z-index: 3; }
.equipment-item-card:hover .equipment-item-overlay { opacity: 1; }
.equipment-item-card:hover img { transform: scale(1.08); }
.equipment-item-overlay .plus-icon { width: 48px; height: 48px; border-radius: 50%; background: var(--yellow); color: var(--primary-deep); display: flex; align-items: center; justify-content: center; font-size: 1.2rem; margin-bottom: 12px; box-shadow: 0 4px 15px rgba(252, 202, 19, .4); transform: scale(0.8); transition: transform 0.3s ease; }
.equipment-item-card:hover .equipment-item-overlay .plus-icon { transform: scale(1); }
.equipment-item-overlay .equipment-title { font-family: var(--font-heading); font-size: 1.1rem; font-weight: 900 !important; text-transform: uppercase; color: #ffffff !important; letter-spacing: 0.6px; line-height: 1.4; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6); }
.process-section { background-color: var(--bg-soft); }
.news-section { background-color: #ffffff; }
.news-main-card { background: #ffffff; border-radius: 12px; overflow: hidden; box-shadow: 0 2px 4px rgba(0, 0, 0, .05); border: 1px solid var(--border); transition: transform 0.3s ease, box-shadow 0.3s ease; height: 100%; }
.news-main-card:hover { transform: translateY(-3px); box-shadow: 0 4px 12px rgba(0, 0, 0, .08); }
.news-main-img { height: 100%; min-height: 180px; overflow: hidden; position: relative; }
.news-main-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.news-main-card:hover .news-main-img img { transform: scale(1.05); }
.news-main-body { padding: 16px 20px; display: flex; flex-direction: column; justify-content: center; height: 100%; }
.news-main-title { font-size: 1.12rem; font-weight: 700; line-height: 1.4; margin-bottom: 8px; }
.news-main-title a { color: var(--text-dark); text-decoration: none; transition: color 0.2s ease; }
.news-main-title a:hover { color: var(--primary); }
.news-main-desc { font-size: 0.84rem; line-height: 1.5; color: #666666; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.news-sub-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.news-sub-card { background: #ffffff; border-radius: 10px; overflow: hidden; border: 1px solid var(--border); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04); transition: transform 0.3s ease, box-shadow 0.3s ease; height: 100%; display: flex; flex-direction: column; }
.news-sub-card:hover { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(0, 0, 0, 0.08); }
.news-sub-thumb { width: 100%; aspect-ratio: 16 / 10; overflow: hidden; position: relative; }
.news-sub-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.news-sub-card:hover .news-sub-thumb img { transform: scale(1.05); }
.news-sub-body { padding: 12px 14px; display: flex; flex-direction: column; justify-content: space-between; flex: 1; }
.news-sub-title { font-size: 0.86rem; font-weight: 600; line-height: 1.35; margin-bottom: 6px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.news-sub-title a { color: var(--text-dark); text-decoration: none; transition: color 0.2s ease; }
.news-sub-title a:hover { color: var(--primary); }
.news-sub-meta { font-size: 0.74rem; }
.news-meta-info { display: flex; align-items: center; justify-content: space-between; font-size: 0.78rem; color: var(--text-muted); margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--border-light); }
.video-section { background-color: #ffffff; }
.featured-video-box { display: flex; border-radius: 14px; overflow: hidden; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); background-color: var(--primary); min-height: 340px; margin-bottom: 24px; }
@media (max-width: 991px) {
  .featured-video-box { flex-direction: column; }
}
.featured-video-left { flex: 0 0 42%; background-color: var(--primary); color: #ffffff; padding: 40px 35px; display: flex; flex-direction: column; justify-content: center; }
@media (max-width: 991px) {
  .featured-video-left { flex: 1 1 auto; padding: 30px 20px; }
}
.featured-video-title { font-size: 1.45rem; font-weight: 800; color: #ffffff; line-height: 1.35; margin-bottom: 16px; font-family: var(--font-heading); }
.featured-video-desc { font-size: 0.90rem; color: rgba(255, 255, 255, 0.9); line-height: 1.65; margin-bottom: 0; }
.featured-video-right { flex: 0 0 58%; position: relative; overflow: hidden; cursor: pointer; background-color: #0f172a; }
@media (max-width: 991px) {
  .featured-video-right { flex: 1 1 auto; height: 280px; }
}
.featured-video-right img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.featured-video-right:hover img { transform: scale(1.04); }
.video-grid-three { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 24px; }
.video-thumbnail-card { position: relative; border-radius: 12px; overflow: hidden; cursor: pointer; background: #ffffff; border: 1px solid var(--border); box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06); transition: transform 0.35s ease, box-shadow 0.35s ease; display: flex; flex-direction: column; }
.video-thumbnail-card:hover { transform: translateY(-4px); box-shadow: 0 10px 25px rgba(8, 76, 161, 0.15); }
.video-card-thumb { position: relative; width: 100%; aspect-ratio: 16 / 10; overflow: hidden; }
.video-card-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.video-thumbnail-card:hover .video-card-thumb img { transform: scale(1.05); }
.video-card-title { font-size: 0.86rem; font-weight: 600; color: var(--text-dark); line-height: 1.35; padding: 10px 12px; margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.video-thumbnail-card:hover .video-card-title { color: var(--primary); }
.btn-play-video-pulse { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 54px; height: 54px; border-radius: 50%; background-color: var(--yellow); color: var(--primary-deep); display: flex; align-items: center; justify-content: center; font-size: 1.2rem; box-shadow: 0 0 0 6px rgba(252, 202, 19, .35), 0 0 0 12px rgba(252, 202, 19, .18); transition: transform 0.3s ease, box-shadow 0.3s ease; z-index: 2; }
.featured-video-right:hover .btn-play-video-pulse,
.video-thumbnail-card:hover .btn-play-video-pulse { transform: translate(-50%, -50%) scale(1.12); box-shadow: 0 0 0 10px rgba(252, 202, 19, .45), 0 0 0 20px rgba(252, 202, 19, .25); }
.partners-section { background-color: #ffffff; }
.partner-logo-item { background: #ffffff; border: 1px solid var(--border); border-radius: 12px; padding: 10px; display: flex; align-items: center; justify-content: center; aspect-ratio: 1 / 1; width: 100%; height: auto; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04); transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; }
.partner-logo-item:hover { transform: translateY(-4px); border-color: var(--primary); box-shadow: 0 8px 20px rgba(8, 76, 161, 0.12); }
.partner-logo-item img { max-height: 80%; max-width: 80%; width: auto; height: auto; object-fit: contain; transition: transform 0.3s ease; }
.partner-logo-item:hover img { transform: scale(1.06); }
.page-block .header-box.text-center { text-align: center; }
.page-block .header-box.text-center .cont { margin-left: auto; margin-right: auto; }
.page-block .header-box .cont:last-child { margin-bottom: 0; }
.page-row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; align-items: start; }
.page-row + .page-row { margin-top: 28px; }
.page-cell { grid-column: span var(--span, 12); min-width: 0; }
@media (max-width: 991px) {
  .page-cell { grid-column: 1 / -1; }
}
.hp-list { position: relative; --gap: 20px; --n: var(--n-pc); }
@media (max-width: 1199px) {
  .hp-list { --n: var(--n-tab); }
}
@media (max-width: 767px) {
  .hp-list { --n: var(--n-ml); --gap: 12px; }
}
@media (max-width: 575px) {
  .hp-list { --n: var(--n-mp); }
}
.hp-track { display: grid; gap: var(--gap); grid-template-columns: repeat(var(--n), minmax(0, 1fr)); }
.hp-track > * { min-width: 0; }
.hp-slide-on .hp-track { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: calc((100% - (var(--n) - 1) * var(--gap)) / var(--n)); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 6px 2px 10px; }
.hp-slide-on .hp-track::-webkit-scrollbar { display: none; }
.hp-slide-on .hp-track > * { scroll-snap-align: start; }
.hp-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 40px; height: 40px; border-radius: 50%; border: 0; background: #fff; color: var(--primary); display: none; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 4px 12px rgba(0, 0, 0, .12); transition: var(--ease); }
.hp-arrow:hover { background: var(--primary); color: #fff; }
.hp-arrow.prev { left: -14px; }
.hp-arrow.next { right: -14px; }
.hp-slide-on .hp-arrow { display: flex; }
.hp-arrow[disabled] { opacity: .35; cursor: default; }
.hp-arrow[hidden] { display: none !important; }
.hp-arrow .icon { width: 18px; height: 18px; }
@media (max-width: 767px) {
  .hp-arrow.prev { left: -6px; }
  .hp-arrow.next { right: -6px; }
}
.hp-list--stats .hp-track { background: rgba(255, 255, 255, 0.08); backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 10px; padding: 14px 18px; gap: 12px; }
.doctor-mini-card { display: block; }
.doctor-mini-card:hover { color: inherit; }
.doctor-mini-avatar { display: block; }
.doctor-mini-avatar.is-empty { display: flex; align-items: center; justify-content: center; background: #f0f7ff; color: var(--primary); }
.doctor-mini-avatar.is-empty .icon { width: 42px; height: 42px; }
.doctor-mini-btn { display: inline-block; padding: 4px 12px; border: 1px solid var(--primary); border-radius: 4px; font-size: .75rem; font-weight: 600; color: var(--primary); transition: var(--ease); }
.doctor-mini-card:hover .doctor-mini-btn { background: var(--primary); color: #fff; }
.equipment-item-overlay .plus-icon .icon { width: 20px; height: 20px; }
.partner-logo-text { font-weight: 700; color: var(--primary); text-align: center; font-size: .85rem; }
.about-grid { display: grid; grid-template-columns: 5fr 7fr; gap: 32px; align-items: stretch; }
.about-grid.no-image { grid-template-columns: 1fr; }
/* Ảnh phải – chữ trái (ô trang Giới thiệu chọn "Ảnh phải", 2026-11-04 — dùng chung khối với trang chủ). */
.about-grid.is-right { grid-template-columns: 7fr 5fr; }
.about-grid.is-right .about-img-box { order: 2; }
.about-content { display: flex; flex-direction: column; justify-content: center; }
.about-subtitle-tag .icon { width: 16px; height: 16px; }
.about-content .header-box .title { display: block; }
.about-content .header-box .title.red { margin-bottom: 1.5rem; }
@media (max-width: 991px) {
  .about-grid { grid-template-columns: 1fr; }
  .about-grid.is-right { grid-template-columns: 1fr; }
  .about-grid.is-right .about-img-box { order: 0; }
  .about-img-box { min-height: 300px; }
}
.btn-pill { display: inline-flex; align-items: center; gap: 8px; padding: 10px 24px; border-radius: 6px; font-weight: 700; text-transform: uppercase; font-size: .88rem; transition: var(--ease); }
.btn-pill .icon { width: 16px; height: 16px; }
.btn-pill--blue { background: var(--primary); color: #fff; }
.btn-pill--blue:hover { background: var(--primary-dark); color: #fff; }
.doctor-spotlight { margin-bottom: 8px; }
.doctor-spotlight .doctor-featured-card { margin: 0 0 28px; }
.doctor-featured-grid { display: grid; grid-template-columns: 1fr; align-items: center; }
@media (min-width: 992px) {
  .doctor-featured-grid { grid-template-columns: 4fr 8fr; }
}
@media (max-width: 991px) {
  .doctor-left-profile { border-right: 0; border-bottom: 1px solid var(--border); }
  .doctor-right-details { padding: 22px 18px; }
}
.doctor-photo-empty { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: #94a3b8; }
.doctor-photo-empty .icon { width: 64px; height: 64px; }
.doctor-specialty { font-size: .8rem; color: var(--text-muted); margin-bottom: 10px; display: flex; align-items: center; justify-content: center; gap: 5px; }
.doctor-specialty .icon { width: 15px; height: 15px; color: var(--yellow-dark); flex-shrink: 0; }
.doctor-book-btn { display: inline-flex; align-items: center; gap: 6px; padding: .25rem 1.5rem; font-size: .875rem; font-weight: 700; color: #fff; background: #dc3545; border: 1px solid #dc3545; border-radius: 4px; cursor: pointer; transition: background .15s ease; }
.doctor-book-btn:hover { background: #bb2d3b; color: #fff; }
.doctor-book-btn .icon { width: 14px; height: 14px; }
.doctor-detail-block .detail-heading .icon { width: 18px; height: 18px; flex-shrink: 0; }
button.doctor-mini-card { font: inherit; width: 100%; cursor: pointer; }
.doctor-featured-card { display: grid; }
.doctor-featured-card > .doctor-featured-grid { grid-area: 1 / 1; background: #fff; }
.doctor-featured-grid.is-wiping { transition: clip-path .45s cubic-bezier(.4, 0, .2, 1); }
.doctor-photo-frame { height: auto; aspect-ratio: 25 / 36; }
.doctor-mini-avatar { width: 95px; height: auto; aspect-ratio: 25 / 36; object-position: top center; }
/* Thẻ bác sĩ nhỏ (2026-11-04, người dùng: "khi chọn bác sĩ chỉ tạo border chứ không transform (cả hover)" + "bỏ luôn shadows"):
   rê chuột / đang chọn CHỈ đổi viền (+ nền xanh nhạt khi chọn) — không nhấc thẻ, không phóng ảnh, không bóng đổ. */
.doctor-mini-card { box-shadow: none; transition: border-color .2s ease, background-color .2s ease; }
.doctor-mini-card:hover, .doctor-mini-card.active { transform: none; box-shadow: none; border-color: var(--primary); }
.doctor-mini-card:hover .doctor-mini-avatar { transform: none; }
button.equipment-item-card { font: inherit; padding: 0; border: 0; width: 100%; text-align: inherit; cursor: pointer; display: block; }
.equipment-bottom-caption, .equipment-item-overlay .equipment-title { font-family: var(--font-main) !important; font-size: .95rem !important; font-weight: 700 !important; letter-spacing: .3px !important; line-height: 1.4; }
@media (max-width: 767px) {
  .equipment-bottom-caption, .equipment-item-overlay .equipment-title { font-size: .75rem !important; }
}
.process-flow { --dot: 68px; --gap: 24px; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--steps, 5), minmax(0, 1fr)); gap: var(--gap); }
.process-flow-step { --tone: var(--primary); --tone-soft: rgba(8, 76, 161, .12); position: relative; display: flex; flex-direction: column; align-items: center; }
.process-flow-step.is-red { --tone: var(--primary-deep); --tone-soft: rgba(5, 45, 97, .12); }
.process-flow-marker { position: relative; width: 100%; display: flex; justify-content: center; margin-bottom: 20px; }
.process-flow-num { position: relative; z-index: 1; width: var(--dot); height: var(--dot); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-heading); font-size: 1.45rem; font-weight: 800; color: #fff; letter-spacing: .5px; background: var(--tone); box-shadow: 0 0 0 7px var(--tone-soft), 0 10px 22px rgba(15, 23, 42, .18); }
.process-flow-step:not(:last-child) .process-flow-marker::after { content: ""; position: absolute; top: 50%; left: calc(50% + var(--dot) / 2 + 10px); width: calc(100% + var(--gap) - var(--dot) - 20px); border-top: 2px dashed #b8c7df; }
.process-flow-arrow { position: absolute; z-index: 2; top: 50%; left: calc(100% + var(--gap) / 2); transform: translate(-50%, -50%); width: 28px; height: 28px; border-radius: 50%; background: #fff; border: 1px solid #dbe4f0; display: flex; align-items: center; justify-content: center; color: var(--tone); box-shadow: 0 4px 10px rgba(15, 23, 42, .08); }
.process-flow-arrow .icon { width: 16px; height: 16px; }
.process-flow-card { flex: 1; width: 100%; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 16px 16px 20px; background: #fff; border-radius: 14px; border-top: 4px solid var(--tone); box-shadow: 0 10px 28px rgba(15, 23, 42, .08); color: inherit; transition: transform .3s ease; }
button.process-flow-card { font: inherit; border-left: 0; border-right: 0; border-bottom: 0; cursor: pointer; }
a.process-flow-card:hover, button.process-flow-card:hover, .process-flow-card:hover { transform: translateY(-6px); color: inherit; }
.process-flow-thumb { display: block; width: 100%; aspect-ratio: 16 / 10; border-radius: 10px; overflow: hidden; background: #eef3fa; margin-bottom: 14px; }
.process-flow-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.process-flow-label { font-family: var(--font-main); font-size: .72rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--tone); margin-bottom: 4px; }
.process-flow-title { font-family: var(--font-main); font-size: 1.02rem; font-weight: 700; letter-spacing: 0; color: #0f2a55; line-height: 1.4; margin: 0 0 8px; }
.process-flow-desc { font-size: .85rem; color: var(--text-muted); line-height: 1.55; margin: 0; }
@media (max-width: 991px) {
  .process-flow { --dot: 52px; grid-template-columns: 1fr; gap: 0; }
  .process-flow-step { flex-direction: row; align-items: stretch; gap: 16px; padding-bottom: 22px; }
  .process-flow-step:last-child { padding-bottom: 0; }
  .process-flow-marker { width: var(--dot); flex-shrink: 0; flex-direction: column; justify-content: center; margin: 0; }
  .process-flow-num { font-size: 1.1rem; box-shadow: 0 0 0 5px var(--tone-soft), 0 6px 14px rgba(15, 23, 42, .16); }
  .process-flow-step:not(:last-child) .process-flow-marker::after { top: calc(50% + var(--dot) / 2 + 8px); left: 50%; width: 0; height: calc(100% - var(--dot) - 16px + 22px); border-top: 0; border-left: 2px dashed #b8c7df; }
  .process-flow-arrow { top: calc(100% + 11px); left: 50%; transform: translate(-50%, -50%) rotate(90deg); width: 24px; height: 24px; }
  .process-flow-card { display: grid; grid-template-columns: 120px minmax(0, 1fr); column-gap: 14px; align-items: start; text-align: left; padding: 14px; border-top: 0; border-left: 4px solid var(--tone); }
  button.process-flow-card { border-top: 0; }
  .process-flow-thumb { grid-row: 1 / span 3; margin: 0; aspect-ratio: 4 / 3; }
  .process-flow-card:hover { transform: translateY(-3px); }
}
@media (max-width: 575px) {
  .process-flow-card { grid-template-columns: 84px minmax(0, 1fr); column-gap: 12px; }
  .process-flow-title { font-size: .95rem; margin-bottom: 4px; }
  .process-flow-desc { font-size: .8rem; }
}
.service-card-item:hover .service-card-img img { transform: none; }
.news-main-title { font-size: 1.35rem; font-weight: 700; line-height: 1.4; margin-bottom: 12px; }
.news-main-desc { font-size: .98rem; line-height: 1.7; color: var(--text-muted); }
.news-meta-info { font-size: .85rem; }
.news-sub-title { font-size: 1.02rem; font-weight: 700; line-height: 1.45; }
.news-sub-meta { font-size: .82rem; }
@media (max-width: 767px) {
  .news-main-title { font-size: 1.15rem; }
  .news-main-desc { font-size: .92rem; }
  .news-sub-title { font-size: .98rem; }
}
.partner-logo-item { aspect-ratio: 1.6 / 1; }
.partner-logo-item:hover img { transform: none; }
.featured-video-right:hover img,
.video-thumbnail-card:hover .video-card-thumb img { transform: none; }
.btn-pill--outline-red { background: #fff; color: #dc3545; border: 1px solid #dc3545; cursor: pointer; }
.btn-pill--outline-red:hover { background: #dc3545; color: #fff; }
.about-action-btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 1.5rem; }
.about-content .header-box .title:not(.red) { text-transform: uppercase; }
.about-content .header-box .cont + .cont { margin-top: 1rem; }
.about-feature-item .icon { width: 18px; height: 18px; flex-shrink: 0; color: var(--primary); }
@media (max-width: 575px) {
  .about-features-list { grid-template-columns: 1fr; }
}
.page-cell > .cell-heading { text-align: left; }
.page-cell > .cell-heading .cont { margin-bottom: 0; }
.home-team-section .btn-outline-view { border-color: rgba(255, 255, 255, .8); color: #fff; }
.home-team-section .btn-outline-view:hover { background: #fff; color: var(--primary); }
.home-team-section .cell-action { text-align: center; }   /* nút "Xem tất cả bác sĩ" giữa, dưới slide (2026-11-04) */
button.partner-logo-item { border: 1px solid var(--border); }
button.equipment-item-card { border: 1px solid #e2e8f0; display: block; }
.news-block { display: flex; flex-direction: column; gap: 16px; }
a.news-main-card { display: grid; grid-template-columns: 5fr 7fr; color: inherit; }
.news-main-card:hover .news-main-title { color: var(--primary); }
.news-main-title { color: var(--text-dark); }
.news-meta-info span, .news-sub-meta { display: inline-flex; align-items: center; gap: 5px; color: var(--text-muted); }
.news-meta-info .icon, .news-sub-meta .icon { width: 14px; height: 14px; }
.news-sub-grid { grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); }
a.news-sub-card { color: inherit; }
.news-sub-card:hover .news-sub-title { color: var(--primary); }
.news-sub-title { color: var(--text-dark); }
@media (max-width: 767px) {
  a.news-main-card { grid-template-columns: 1fr; }
  .news-sub-grid { grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: 6px; }
  .news-sub-card { border-radius: 8px; }
  .news-sub-thumb { aspect-ratio: 1 / 1; }
  .news-sub-meta { gap: 3px; }
  .news-sub-meta .icon { width: 11px; height: 11px; }
}
button.featured-video-right, button.video-thumbnail-card { border: 0; padding: 0; font: inherit; text-align: left; color: inherit; width: 100%; }
button.featured-video-right { display: block; min-height: 300px; }
.video-grid-three { --cols: var(--n-pc, 3); grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); }
@media (max-width: 1199px) {
  .video-grid-three { --cols: var(--n-tab, 2); }
}
@media (max-width: 767px) {
  .video-grid-three { --cols: var(--n-ml, 2); }
}
@media (max-width: 575px) {
  .video-grid-three { --cols: var(--n-mp, 1); }
}
.video-card-thumb { display: block; background: #0f172a; }
.video-card-title { display: -webkit-box; padding-bottom: 0; margin-bottom: 10px; }
.btn-play-video-pulse .icon { width: 20px; height: 20px; margin-left: 3px; }
@media (max-width: 767px) {
  .video-grid-three { gap: 12px; }
}
@media (max-width: 768px) {
  .section-padding { padding: 28px 0 !important; }
  .header-box { margin-bottom: 16px !important; }
  .header-box .title { font-size: 1.22rem !important; line-height: 1.35 !important; margin-bottom: 6px !important; }
  .header-box .title.has-after { margin-bottom: 16px !important; }
  .header-box .title.has-after::after { margin-top: 6px !important; width: 42px !important; height: 2.5px !important; }
  .header-box .cont { font-size: .82rem !important; line-height: 1.45 !important; margin-bottom: 12px !important; }
  .about-img-box { border-radius: 10px !important; }
  .about-experience-badge { padding: 5px 10px !important; bottom: 8px !important; right: 8px !important; }
  .about-experience-badge .years { font-size: 1.15rem !important; }
  .about-experience-badge .text { font-size: .65rem !important; }
  .about-features-list { gap: 6px !important; }
  .about-feature-item { font-size: .8rem !important; }
  .about-action-btns { gap: 8px !important; margin-top: 14px !important; }
  .about-action-btns .btn-pill { padding: 7px 14px !important; font-size: .8rem !important; line-height: 1.3 !important; }
  .service-card-title { font-size: .74rem !important; line-height: 1.25 !important; }
  .service-card-desc { font-size: .68rem !important; line-height: 1.35 !important; }
  .stat-counter-number { font-size: 1.15rem !important; line-height: 1 !important; }
  .stat-counter-label { font-size: .62rem !important; line-height: 1.2 !important; }
  .doctor-featured-card { border-radius: 10px !important; margin-top: 8px !important; }
  .doctor-featured-card .doctor-featured-grid { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: stretch !important; }
  .doctor-featured-card .doctor-left-profile { flex: 0 0 45% !important; max-width: 45% !important; width: 45% !important; padding: 10px 6px !important; border-right: 1px solid var(--border) !important; border-bottom: none !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; }
  .doctor-featured-card .doctor-photo-frame { width: 100% !important; max-width: 135px !important; height: 165px !important; aspect-ratio: auto !important; border-radius: 8px !important; margin-bottom: 6px !important; }
  .doctor-featured-card .doctor-name { font-size: .74rem !important; line-height: 1.2 !important; margin-bottom: 2px !important; text-align: center !important; }
  .doctor-featured-card .doctor-position { font-size: .62rem !important; line-height: 1.15 !important; margin-bottom: 4px !important; text-align: center !important; }
  .doctor-featured-card .doctor-specialty { font-size: .6rem !important; line-height: 1.2 !important; margin-bottom: 4px !important; text-align: center !important; }
  .doctor-featured-card .doctor-book-btn { padding: 4px 6px !important; font-size: .64rem !important; width: 100% !important; white-space: nowrap !important; margin: 0 !important; border-radius: 4px !important; }
  .doctor-featured-card .doctor-right-details { flex: 0 0 55% !important; max-width: 55% !important; width: 55% !important; padding: 8px !important; }
  .doctor-featured-card .doctor-detail-block { margin-bottom: 10px !important; }
  .doctor-featured-card .doctor-detail-block:last-child { margin-bottom: 0 !important; }
  .doctor-featured-card .doctor-detail-block .detail-heading { font-size: .68rem !important; margin-bottom: 4px !important; }
  .doctor-featured-card .doctor-detail-block .detail-heading .icon { width: 12px !important; height: 12px !important; }
  .doctor-featured-card .doctor-detail-block .detail-content-box p,
  .doctor-featured-card .doctor-detail-block .doc-intro-text { padding-left: 6px !important; margin-left: 1px !important; font-size: .62rem !important; line-height: 1.25 !important; margin-bottom: 0 !important; display: -webkit-box !important; -webkit-line-clamp: 3 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; }
  .equipment-bottom-caption { font-size: .68rem !important; padding: 4px 6px !important; }
  .equipment-title { font-size: .68rem !important; }
  .process-flow-card { padding: 8px 12px !important; }
  .process-flow-title { font-size: .82rem !important; margin-bottom: 2px !important; line-height: 1.3 !important; }
  .process-flow-desc { font-size: .7rem !important; line-height: 1.35 !important; margin-bottom: 0 !important; }
  .process-flow-label { font-size: .62rem !important; }
  .process-flow-num { font-size: .82rem !important; }
  .news-main-body { padding: 10px 12px !important; }
  .news-main-title { font-size: .88rem !important; line-height: 1.3 !important; margin-bottom: 4px !important; }
  .news-main-desc { font-size: .75rem !important; line-height: 1.45 !important; }
  .news-meta-info { margin-top: 6px !important; padding-top: 6px !important; font-size: .72rem !important; }
  .news-sub-body { padding: 6px 5px !important; }
  .news-sub-title { font-size: .68rem !important; line-height: 1.22 !important; margin-bottom: 3px !important; }
  .news-sub-meta { font-size: .6rem !important; }
  .featured-video-left { padding: 10px 12px !important; }
  .featured-video-title { font-size: .88rem !important; line-height: 1.3 !important; margin-bottom: 0 !important; }
  .featured-video-desc { font-size: .75rem !important; line-height: 1.45 !important; }
  .video-card-title { font-size: .68rem !important; line-height: 1.22 !important; padding: 5px 4px 0 !important; margin: 0 0 5px !important; }
  .partner-logo-item { padding: 8px !important; }
}
.about-content .header-box { margin-bottom: 0 !important; }
.about-content .header-box .cont:last-child { margin-bottom: 0 !important; }
.about-content .about-features-list { margin-top: 16px !important; }
@media (max-width: 768px) {
  .about-action-btns { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 8px !important; margin-top: 12px !important; }
  .about-action-btns .btn-pill { width: 100% !important; justify-content: center !important; text-align: center !important; white-space: normal !important; min-height: 40px !important; padding: 9px 8px !important; font-size: .8rem !important; letter-spacing: -.2px !important; gap: 6px !important; line-height: 1.25 !important; }
  .about-action-btns .btn-pill .icon { width: 16px !important; height: 16px !important; flex-shrink: 0 !important; }
}
@media (max-width: 991px) {
  .doctor-featured-card .doctor-specialty { display: none !important; }
}
@media (min-width: 576px) and (max-width: 767px) {
  .hp-list.ml-dense { --gap: 4px; }
  .hp-list--stats.ml-dense .hp-track { gap: 3px !important; padding: 5px 3px !important; border-radius: 8px !important; }
  .hp-list--stats.ml-dense .stat-counter-number { font-size: .88rem !important; line-height: 1 !important; }
  .hp-list--stats.ml-dense .stat-counter-label { font-size: .5rem !important; line-height: 1.1 !important; }
  .hp-list--doctorcards.ml-dense .doctor-mini-card { padding: 5px 2px !important; border-radius: 6px !important; }
  .hp-list--doctorcards.ml-dense .doctor-mini-card:hover,
  .hp-list--doctorcards.ml-dense .doctor-mini-card.active { transform: none !important; }
  .hp-list--doctorcards.ml-dense .doctor-mini-avatar { width: 46px !important; height: 46px !important; border-radius: 8px !important; border-width: 2px !important; margin: 0 auto 3px !important; }
  .hp-list--doctorcards.ml-dense .doctor-mini-name { font-size: .6rem !important; line-height: 1.15 !important; margin-bottom: 0 !important; text-align: center !important; display: -webkit-box !important; -webkit-line-clamp: 3 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; }
  .hp-list--doctorcards.ml-dense .doctor-mini-role,
  .hp-list--doctorcards.ml-dense .doctor-mini-btn { display: none !important; }
}
@media (max-width: 575px) {
  .hp-list.mp-dense { --gap: 4px; }
  .hp-list--stats.mp-dense .hp-track { gap: 3px !important; padding: 5px 3px !important; border-radius: 8px !important; }
  .hp-list--stats.mp-dense .stat-counter-number { font-size: .88rem !important; line-height: 1 !important; }
  .hp-list--stats.mp-dense .stat-counter-label { font-size: .5rem !important; line-height: 1.1 !important; }
  .hp-list--doctorcards.mp-dense .doctor-mini-card { padding: 5px 2px !important; border-radius: 6px !important; }
  .hp-list--doctorcards.mp-dense .doctor-mini-card:hover,
  .hp-list--doctorcards.mp-dense .doctor-mini-card.active { transform: none !important; }
  .hp-list--doctorcards.mp-dense .doctor-mini-avatar { width: 46px !important; height: 46px !important; border-radius: 8px !important; border-width: 2px !important; margin: 0 auto 3px !important; }
  .hp-list--doctorcards.mp-dense .doctor-mini-name { font-size: .6rem !important; line-height: 1.15 !important; margin-bottom: 0 !important; text-align: center !important; display: -webkit-box !important; -webkit-line-clamp: 3 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; }
  .hp-list--doctorcards.mp-dense .doctor-mini-role,
  .hp-list--doctorcards.mp-dense .doctor-mini-btn { display: none !important; }
}
.doctor-more-btn { display: none; align-items: center; gap: 6px; margin-top: 4px; padding: 0; border: 0; background: none; cursor: pointer; color: var(--primary); font-family: inherit; font-size: .82rem; font-weight: 700; line-height: 1.3; text-align: left; }
.doctor-more-btn .icon { width: 15px; height: 15px; flex-shrink: 0; }
.doctor-more-btn:hover { color: var(--red); }
.doctor-right-details.is-clamped .doctor-more-btn { display: inline-flex; }
@media (max-width: 768px) {
  .doctor-more-btn { font-size: .66rem; gap: 4px; margin-top: 2px; }
  .doctor-more-btn .icon { width: 12px; height: 12px; }
}
.featured-video-box { border-radius: 6px !important; box-shadow: none !important; }
.video-thumbnail-card, .video-thumbnail-card:hover { border-radius: 6px !important; box-shadow: none !important; }
@media (max-width: 991px) {
  .featured-video-box { background: #fff !important; border: 1px solid var(--border); min-height: 0; }
  .featured-video-right { order: 1; height: auto !important; min-height: 0 !important; aspect-ratio: 16 / 10; }
  .featured-video-left { order: 2; background: transparent !important; color: var(--text-dark); padding: 14px 16px !important; }
  .featured-video-title { color: var(--text-dark) !important; margin-bottom: 6px !important; }
  .featured-video-desc { color: var(--text-muted) !important; }
}
@media (max-width: 768px) {
  .featured-video-right .btn-play-video-pulse { width: 44px; height: 44px; box-shadow: 0 0 0 4px rgba(252, 202, 19, .35), 0 0 0 8px rgba(252, 202, 19, .18); }
  .featured-video-right .btn-play-video-pulse .icon { width: 16px; height: 16px; margin-left: 2px; }
  .video-card-thumb .btn-play-video-pulse { width: 28px; height: 28px; box-shadow: 0 0 0 3px rgba(252, 202, 19, .35), 0 0 0 6px rgba(252, 202, 19, .18); }
  .video-card-thumb .btn-play-video-pulse .icon { width: 11px; height: 11px; margin-left: 1px; }
  .featured-video-right:hover .btn-play-video-pulse,
  .video-thumbnail-card:hover .btn-play-video-pulse { transform: translate(-50%, -50%); }
}
@media (max-width: 768px) {
  .partner-logo-item, button.partner-logo-item, .partner-logo-item:hover { transform: none !important; aspect-ratio: 2 / 1 !important; padding: 6px !important; border-radius: 6px !important; }
  .partner-logo-item img { max-height: 100%; max-width: 100%; }
  .hp-list--logos.hp-slide-on { padding: 0 20px; }
  .hp-list--logos .hp-arrow { width: 28px; height: 28px; box-shadow: none; border: 0; }
  .hp-list--logos .hp-arrow .icon { width: 14px; height: 14px; }
  .hp-list--logos .hp-arrow.prev { left: -10px; }
  .hp-list--logos .hp-arrow.next { right: -10px; }
}
.hp-arrow, .hp-arrow:hover { background: transparent !important; box-shadow: none !important; border: 0 !important; }
.hp-arrow:hover { color: var(--red); }
.home-team-section .hp-arrow { color: #fff; }
.home-team-section .hp-arrow:hover { color: rgba(255, 255, 255, .7); }
.hp-list.hp-slide-on.hp-has-arrows { padding-left: 28px; padding-right: 28px; }
.hp-list.hp-slide-on .hp-arrow { width: 28px; height: 28px; }
.hp-list.hp-slide-on .hp-arrow.prev { left: 0; }
.hp-list.hp-slide-on .hp-arrow.next { right: 0; }
.hp-list.hp-slide-on .hp-arrow .icon { width: 20px; height: 20px; }
.about-content .header-box .title.red { font-size: 1.1rem !important; line-height: 1.4 !important; margin-bottom: 1rem; }
@media (max-width: 768px) {
  .about-content .header-box .title.red { font-size: .86rem !important; margin-bottom: 10px !important; }
}
@media (max-width: 767px) {
  .hp-list--stats.ml-dense .stat-counter-number, .hp-list--stats.mp-dense .stat-counter-number { font-size: 1.25rem !important; line-height: 1.1 !important; }
  .hp-list--stats.ml-dense .stat-counter-label, .hp-list--stats.mp-dense .stat-counter-label { font-size: .54rem !important; }
}
@media (max-width: 768px) {
  .header-box .title:not(.red) { font-size: 18px !important; }
}
.service-card-item { border-radius: 8px !important; }

.cell-action { margin-top: 1.5rem; }
.btn-outline-view {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 24px; border: 1px solid var(--primary);
  border-radius: 6px; color: var(--primary); font-weight: 700; text-transform: uppercase; font-size: .88rem; transition: var(--ease);
}
.btn-outline-view:hover { background: var(--primary); color: #fff; }
.btn-outline-view .icon { width: 16px; height: 16px; }
body.no-scroll { overflow: hidden; }
.home-team-section .section-tagline { color: var(--yellow); }

/* ═══ TIN TỨC — trang tổng + trang bài viết (2026-11-03) — CHÉP khối "TIN TỨC" của site.css benhviendakhoathuynguyen (.nw-* + .search-pager).
   Chênh lệch: bỏ ô tìm kiếm + kiểu thẻ "Ảnh tròn trên" (chưa dùng); xanh nguồn → --primary; thẻ tổng đài đỏ = --red (đỏ của Hotline). */
.search-pager { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 28px; }
.search-pager a, .search-pager span { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 10px; border: 1px solid #e2e8f0; border-radius: 8px; background: #fff; color: var(--text-dark); font-size: .9rem; text-decoration: none; transition: background .2s, color .2s, border-color .2s; }
.search-pager a:hover { border-color: var(--primary); color: var(--primary); }
.search-pager .is-current { background: var(--primary); border-color: var(--primary); color: #fff; font-weight: 600; }
.search-pager .is-gap { border: 0; min-width: 20px; }
.search-pager .icon { width: 16px; height: 16px; }
.nw-hero { margin-bottom: 28px; }
.nw-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: start; }
.nw-layout.has-side { grid-template-columns: minmax(0, 1fr) 340px; }
.nw-main { min-width: 0; }
.nw-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 48px 0; color: var(--text-muted); text-align: center; }
.nw-empty .icon { width: 32px; height: 32px; }
.nw-page-content { margin-top: 32px; }
.nw-meta { display: flex; flex-wrap: nowrap; align-items: center; gap: 4px 14px; min-width: 0; overflow: hidden; font-size: .85rem; color: var(--text-muted); }
.nw-meta > span { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.nw-meta > span.nw-meta__cat { flex: 0 1 auto; min-width: 0; overflow: hidden; }
.nw-meta__cat a { display: block; flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nw-meta .icon { flex: 0 0 auto; width: 14px; height: 14px; }
.nw-meta a { color: var(--text-muted); }
.nw-meta a:hover { color: var(--primary); }
.nw-item { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); padding: 18px 0; border-bottom: 1px solid var(--border-light); }
.nw-list > .nw-item:first-child { padding-top: 0; }
.nw-item:last-child { border-bottom: 0; padding-bottom: 4px; }
.nw-item__img { display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 3; padding: 10px; border-radius: 8px; overflow: hidden; background: var(--bg-soft); }
.nw-item__img img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.nw-item__img:hover img { opacity: .92; }
.nw-item__body { padding-left: 16px; min-width: 0; }
.nw-item__name { margin: 0 0 6px; font-size: 1.05rem; font-weight: 500; line-height: 1.45; }
.nw-item__name a { color: var(--text-dark); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.nw-item__name a:hover { color: var(--primary); }
.nw-item__info { margin-top: 8px; font-size: .95rem; color: var(--text); line-height: 1.65; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.nw-item__more { margin-top: 8px; text-align: right; }
.nw-item__more a { font-size: .95rem; font-weight: 500; color: var(--primary); }
.nw-item__more a:hover { color: var(--primary-dark); }
.nw-cards { display: grid; gap: 18px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.nw-cards.nw-cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.nw-card { display: flex; flex-direction: column; min-width: 0; }
.nw-card__name { margin: 0 0 6px; font-size: 1.05rem; font-weight: 500; line-height: 1.45; }
.nw-card__name a { color: var(--text-dark); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.nw-card__name a:hover { color: var(--primary); }
.nw-card__info { margin-top: 8px; font-size: .95rem; color: var(--text); line-height: 1.65; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.nw-card__more { margin-top: auto; padding-top: 8px; }
.nw-card__more a { font-size: .95rem; font-weight: 500; color: var(--primary); }
.nw-card__more a:hover { color: var(--primary-dark); }
.nw-card__img { display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 9; padding: 10px; margin-bottom: 12px; border-radius: 8px; overflow: hidden; background: var(--bg-soft); }
.nw-card__img img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.nw-card__img:hover img { opacity: .92; }
.nw-card__body { display: flex; flex-direction: column; flex: 1 1 auto; }
.nw-detail__title { margin: 0 0 10px; font-family: var(--font-heading); font-size: 1.6rem; font-weight: 800; line-height: 1.35; color: var(--text-dark); }
.nw-detail__title + .nw-meta { padding-bottom: 12px; border-bottom: 1px solid var(--border-light); margin-bottom: 16px; }
.nw-related { margin-top: 36px; }
.nw-related__more { margin-top: 18px; text-align: center; }
.nw-side { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.nw-widget { background: #fff; border: 1px solid var(--border); border-radius: 8px; padding: 16px; box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075); }
.nw-widget__title { margin: 0 0 16px; font-family: var(--font-heading); font-size: 1.25rem; font-weight: 700; line-height: 1.2; color: var(--primary); }
.nw-sticky { position: sticky; top: var(--sticky-top); }
.nw-cats { list-style: none; }
.nw-cats li { border-bottom: 1px solid var(--border-light); }
.nw-cats li:last-child { border-bottom: 0; }
.nw-cats a { display: flex; align-items: center; gap: 6px; padding: 9px 0 9px calc(var(--depth, 0) * 16px); font-weight: 400; color: var(--text-dark); }
.nw-cats a .icon { flex: 0 0 auto; width: 14px; height: 14px; color: var(--text-muted); }
.nw-cats__name { flex: 1 1 auto; min-width: 0; }
.nw-cats a:hover, .nw-cats li.is-active > a, .nw-cats a:hover .icon, .nw-cats li.is-active > a .icon { color: var(--primary); }
.nw-cats li.is-active > a { font-weight: 500; }
.nw-cats__n { flex: 0 0 auto; font-size: .85rem; color: var(--text-muted); }
.nw-hotline { display: flex; flex-direction: column; align-items: center; padding: 24px; border-radius: 8px; background: var(--red); color: #fff; text-align: center; box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075); }
.nw-hotline > .icon { width: 40px; height: 40px; margin-bottom: 16px; }
.nw-hotline__title { margin: 0 0 8px; font-family: var(--font-heading); font-size: 1.25rem; font-weight: 700; line-height: 1.2; text-transform: uppercase; color: #fff; }
.nw-hotline__desc { margin: 0 0 16px; font-size: .875rem; color: #fff; }
.nw-hotline__btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: 100%; padding: 8px 12px; border-radius: 6px; background: #f8f9fa; color: var(--red); font-weight: 700; }
.nw-hotline__btn:hover { background: #fff; color: var(--red-dark); }
.nw-hotline__btn .icon { width: 16px; height: 16px; }
.nw-side-list { display: flex; flex-direction: column; gap: 12px; }
.nw-side-item { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 10px; align-items: start; color: var(--text-dark); }
.nw-side-item__thumb { display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 3; padding: 4px; background: var(--bg-soft); border-radius: 6px; overflow: hidden; }
.nw-side-item__thumb img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.nw-side-item__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.nw-side-item__name { font-size: .9rem; font-weight: 500; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.nw-side-item:hover .nw-side-item__name { color: var(--primary); }
.nw-side-item__date { display: inline-flex; align-items: center; gap: 4px; font-size: .8rem; color: var(--text-muted); }
.nw-side-item__date .icon { width: 13px; height: 13px; }
@media (max-width: 1199.98px) {
  .nw-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .nw-layout.has-side { grid-template-columns: minmax(0, 1fr) 300px; }
}
@media (max-width: 991.98px) {
  .nw-layout.has-side { grid-template-columns: minmax(0, 1fr); }
  .nw-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .nw-sticky { position: static; }
}
@media (max-width: 767.98px) {
  .nw-item { grid-template-columns: minmax(0, 1fr); }
  .nw-item__body { padding-left: 0; padding-top: 10px; }
  .nw-item__img { aspect-ratio: auto; padding: 0; background: none; }
  .nw-item__img img { width: 100%; height: auto; max-height: none; }
  .nw-detail__title { font-size: 1.3rem; }
}
@media (max-width: 575px) {
  .nw-cards, .nw-cards.nw-cards--2 { grid-template-columns: 1fr; }
}
.nw-lead { margin: 0 0 18px; padding: 14px 18px; border-left: 4px solid var(--primary); border-radius: 0 8px 8px 0; background: var(--bg-soft); font-size: 1rem; font-weight: 500; line-height: 1.65; color: var(--text-dark); }
.nw-detail__body { line-height: 1.75; }
.nw-detail__body img { max-width: 100%; height: auto; border-radius: 8px; }

/* ═══ THAI SẢN /dang-ky-sinh (2026-11-03) — CHÉP site.css của benhviendakhoathuynguyen: Đặc quyền (.privilege-*), thẻ gói thai sản
   (.maternity-package-card, .pkg-*, .deposit-badge), Ngân hàng & QR (.maternity-deposit-box, .deposit-*, .btn-copy-syntax). Chênh lệch: xanh nguồn →
   --primary; viền / dấu tích thẻ ĐANG CHỌN hồng (#f43f5e) → xanh thương hiệu (quy ước màu — đỏ chỉ Hotline + Đặt lịch); giá, tiền cọc, huy hiệu
   giữ đỏ (--red) như thẻ gói tiêm chủng; lưới đặc quyền + khung 2 thẻ form | ngân hàng (.mbk) tự dựng (nguồn: lưới ô của bộ dựng). */
.privilege-card-box { display: block; height: 100%; padding: 24px; text-align: center; color: inherit; }
.privilege-card-box.tone-1 { --pv-bg: #fee2e2; --pv-fg: #e11d48; }
.privilege-card-box.tone-2 { --pv-bg: #e0e7ff; --pv-fg: #4338ca; }
.privilege-card-box.tone-3 { --pv-bg: #dcfce7; --pv-fg: #15803d; }
.privilege-card-box.tone-4 { --pv-bg: #fef3c7; --pv-fg: #b45309; }
.privilege-icon-circle { width: 60px; height: 60px; border-radius: 50%; margin: 0 auto 16px; display: flex; align-items: center; justify-content: center; background: var(--pv-bg); color: var(--pv-fg); overflow: hidden; }
.privilege-icon-circle img { width: 30px; height: 30px; object-fit: contain; }
.privilege-icon-circle .icon { width: 26px; height: 26px; }
.privilege-title { font-family: var(--font-heading); font-weight: 700; color: var(--primary); font-size: .98rem; line-height: 1.3; margin: 0 0 8px; }
.privilege-desc { font-size: .82rem; color: #6c757d; line-height: 1.6; margin: 0; }
.maternity-package-card { position: relative; display: flex; flex-direction: column; height: 100%; padding: 22px; text-align: left; background: #fff; border: 2px solid #e2e8f0; border-radius: 14px; cursor: pointer; transition: all .3s ease; }
.maternity-package-card:hover, .maternity-package-card.selected { border-color: var(--primary); box-shadow: 0 10px 25px rgba(8, 76, 161, .15); transform: translateY(-4px); }
.maternity-package-card:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.maternity-package-card.selected::before { content: ""; position: absolute; top: -10px; right: -10px; width: 28px; height: 28px; border-radius: 50%; background: var(--primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 14px no-repeat; box-shadow: 0 3px 8px rgba(0, 0, 0, .2); }
.pkg-badge { position: absolute; top: 16px; right: 16px; display: inline-flex; align-items: center; gap: 4px; background: var(--red); color: #fff; border-radius: 50px; font-size: .82rem; font-weight: 700; padding: 5px 10px; box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075); }
.pkg-badge .icon { width: 13px; height: 13px; }
.pkg-badge ~ .pkg-name { padding-right: 104px; }
@media (max-width: 768px) {
  .pkg-badge ~ .pkg-name { padding-right: 0; margin-top: 18px; }
}
.pkg-name { font-family: var(--font-heading); font-weight: 700; color: var(--primary); font-size: 1.18rem; line-height: 1.2; margin: 0 0 4px; }
.pkg-sub { font-size: .82rem; color: #6c757d; margin-bottom: 14px; }
.pkg-price-row { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.pkg-price { font-family: var(--font-heading); font-size: 1.35rem; font-weight: 800; color: var(--red); line-height: 1.2; }
.pkg-old-price { color: #6c757d; text-decoration: line-through; font-weight: 700; font-size: .95rem; }
.deposit-badge { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; margin: 4px 0 16px; padding: 4px 10px; background: #fef2f2; color: #991b1b; border: 1px dashed #fca5a5; border-radius: 6px; font-size: .82rem; font-weight: 700; }
.deposit-badge .icon { width: 14px; height: 14px; }
.pkg-benefits { list-style: none; padding: 0; margin: 0 0 24px; font-size: .82rem; color: #6c757d; line-height: 1.8; }
.pkg-benefits li { display: flex; align-items: flex-start; gap: 8px; }
.pkg-benefits .icon { width: 14px; height: 14px; color: #198754; flex-shrink: 0; margin-top: 6px; }
.pkg-btn { margin-top: auto; display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; padding: 4px 8px; border: 1px solid var(--primary); border-radius: 4px; color: var(--primary); font-size: .875rem; transition: all .2s ease; }
.pkg-btn .icon { width: 15px; height: 15px; }
.pkg-btn-on { display: none; align-items: center; gap: 6px; }
.maternity-package-card:hover .pkg-btn { background: var(--primary); color: #fff; }
.maternity-package-card.selected .pkg-btn { border-color: var(--red); color: var(--red); background: #fff; }
.maternity-package-card.selected .pkg-btn-on { display: inline-flex; }
.maternity-package-card.selected .pkg-btn-off { display: none; }
.maternity-deposit-box { display: flex; flex-direction: column; gap: 16px; height: 100%; padding: 20px; text-align: left; background: #fff; border: 1px solid #e3eaf5; border-top: 4px solid var(--primary); border-radius: 16px; box-shadow: 0 12px 30px rgba(8, 76, 161, .08); }
.deposit-head { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 22px 18px; text-align: center; background: linear-gradient(135deg, #eef4ff 0%, #f8fbff 100%); border-radius: 12px; }
.deposit-qr { width: 200px; margin: 0; padding: 10px; background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 14px rgba(15, 23, 42, .1); }
.deposit-qr img, .deposit-qr-svg svg { display: block; width: 100%; height: auto; }
.deposit-label { font-size: .85rem; color: #64748b; line-height: 1.4; margin-bottom: 4px; }
.deposit-amount { font-family: var(--font-heading); font-size: 1.45rem; font-weight: 800; color: var(--red); line-height: 1.15; white-space: nowrap; }
.deposit-rows { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 10px; }
.deposit-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 13px 14px; background: #f8fafc; border: 1px solid #eef2f7; border-radius: 10px; font-size: .875rem; }
.deposit-row-label { color: #64748b; flex-shrink: 0; }
.deposit-row-value { display: inline-flex; align-items: center; justify-content: flex-end; gap: 8px; text-align: right; min-width: 0; }
.deposit-row-value strong { color: #0f172a; font-weight: 700; word-break: break-word; }
.deposit-row-value .is-code { font-family: SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; letter-spacing: .3px; }
.deposit-row-value .is-blue { color: var(--primary); }
.deposit-row-value .is-red { color: var(--red); }
.btn-copy-syntax { position: relative; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 28px; height: 28px; padding: 0; border: 1px solid #dbe4f0; border-radius: 8px; background: #fff; color: #475569; cursor: pointer; transition: all .2s ease; }
.btn-copy-syntax .icon { width: 14px; height: 14px; }
.btn-copy-syntax:hover { background: var(--primary); border-color: var(--primary); color: #fff; }
.btn-copy-syntax.is-copied::after { content: attr(data-copied); position: absolute; bottom: calc(100% + 6px); right: 0; white-space: nowrap; padding: 3px 8px; border-radius: 4px; background: #0f172a; color: #fff; font-size: .72rem; }
.deposit-note { padding: 12px 16px; background: #eff6ff; border-left: 4px solid var(--primary); border-radius: 10px; color: #1e3a8a; font-size: .85rem; line-height: 1.6; }
.deposit-note .icon { width: 15px; height: 15px; color: var(--primary); vertical-align: -2px; margin-right: 2px; }
@media (max-width: 480px) {
  .deposit-head { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 12px; padding: 10px; text-align: left; }
  .deposit-qr { width: 110px; padding: 6px; }
  .deposit-amount { font-size: 1.35rem; }
  .deposit-row { flex-direction: column; align-items: flex-start; gap: 2px; }
  .deposit-row-value { justify-content: flex-start; text-align: left; }
}
@media (max-width: 768px) {
  .privilege-card-box { padding: 14px 10px; border-radius: 12px; }
  .privilege-icon-circle { width: 44px; height: 44px; margin: 0 auto 10px; }
  .privilege-icon-circle img { width: 22px; height: 22px; }
  .privilege-title { font-size: .84rem; line-height: 1.3; margin-bottom: 6px; min-height: 34px; display: flex; align-items: center; justify-content: center; }
  .privilege-desc { font-size: .72rem; line-height: 1.35; }
  .maternity-package-card { padding: 14px 10px; border-radius: 12px; }
  .pkg-name { font-size: .88rem; margin-bottom: 4px; }
  .pkg-price { font-size: 1.15rem; }
  .pkg-price-row { margin-bottom: 4px; }
  .deposit-badge { font-size: .7rem; padding: 3px 6px; margin-bottom: 8px; }
  .pkg-benefits { font-size: .72rem; line-height: 1.45; margin-bottom: 10px; }
  .pkg-btn { font-size: .74rem; padding: 6px 4px; }
  .pkg-badge { top: 8px; right: 8px; font-size: .62rem; padding: 3px 6px; }
}
.privilege-icon-circle img { width: 100% !important; height: 100% !important; object-fit: cover; border-radius: 50%; }
.maternity-deposit-box { box-shadow: none !important; }
.deposit-lbl-short { display: none; }
@media (max-width: 575px) {
  .maternity-package-card .deposit-badge { display: flex; align-items: center; gap: 3px; width: 100%; margin-right: 0; padding: 3px 4px; overflow: hidden; white-space: nowrap; font-size: .7rem; }
  .maternity-package-card .deposit-badge .icon { width: 12px; height: 12px; flex-shrink: 0; }
  .maternity-package-card .deposit-badge.is-short .deposit-lbl { display: none; }
  .maternity-package-card .deposit-badge.is-short .deposit-lbl-short { display: inline; }
  .maternity-package-card .deposit-badge.is-tight { font-size: .64rem; }
  .pkg-price { font-size: 1.05rem !important; }
}
.maternity-package-card .pkg-badge { top: -11px !important; left: 14px; right: auto !important; gap: 4px; padding: 3px 9px !important; border-radius: 4px; background: linear-gradient(135deg, var(--red) 0%, var(--red-dark) 100%); font-size: .68rem !important; font-weight: 800; letter-spacing: .4px; line-height: 1.4; text-transform: uppercase; box-shadow: 0 2px 6px rgba(229, 29, 27, .3); }
.maternity-package-card .pkg-badge .icon { width: 12px; height: 12px; }
.maternity-package-card .pkg-badge ~ .pkg-name { padding-right: 0 !important; margin-top: 0 !important; }
@media (max-width: 768px) {
  .maternity-package-card .pkg-badge { top: -9px !important; left: 10px; padding: 2px 7px !important; font-size: .6rem !important; }
  .maternity-package-card .pkg-badge .icon { width: 10px; height: 10px; }
}

@media (max-width: 480px) {
  .deposit-row { flex-direction: row !important; align-items: baseline !important; justify-content: space-between; gap: 10px !important; }
  .deposit-row-value { justify-content: flex-end !important; text-align: right !important; }
}

.privilege-grid { display: grid; gap: 20px; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); }
@media (max-width: 991px) { .privilege-grid { grid-template-columns: repeat(var(--cols-tab, 2), minmax(0, 1fr)); } }
@media (max-width: 575px) { .privilege-grid { grid-template-columns: repeat(var(--cols-mb, 2), minmax(0, 1fr)); gap: 10px; } }
a.privilege-card-box:hover .privilege-title { color: var(--primary-dark); }
.vaccine-pkg-grid .maternity-package-card { margin-top: 8px; }

/* Phiếu đăng ký sinh + Ngân hàng & QR: một hàng hai thẻ (form 7 / ngân hàng 5), cao bằng nhau. */
.mbk { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 24px; align-items: stretch; }
.mbk-card { display: flex; flex-direction: column; min-width: 0; background: #fff; border: 1px solid var(--border-light); border-radius: 16px; overflow: hidden; box-shadow: 0 18px 45px rgba(8, 41, 91, .1); }
.mbk-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 24px; background: var(--bg-soft); border-bottom: 1px solid var(--border-light); }
.mbk-title { display: flex; align-items: center; gap: 10px; margin: 0; font-family: var(--font-heading); font-size: 1.1rem; font-weight: 700; text-transform: uppercase; color: var(--primary); }
.mbk-title .icon { width: 22px; height: 22px; flex-shrink: 0; }
.mbk-hotline { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 50px; background: var(--red); color: #fff; font-weight: 700; font-size: .9rem; white-space: nowrap; }
.mbk-hotline:hover { background: var(--red-dark); color: #fff; }
.mbk-hotline .icon { width: 15px; height: 15px; }
.mbk-body { flex: 1; padding: 24px; }
.mbk-bank .maternity-deposit-box { flex: 1; border: 0; border-radius: 0; padding: 20px 24px 24px; }
@media (max-width: 991px) { .mbk { grid-template-columns: 1fr; } }
@media (max-width: 575px) {
  .mbk-card { border-radius: 12px; }
  .mbk-head { padding: 12px 14px; }
  .mbk-title { font-size: .95rem; }
  .mbk-hotline { padding: 4px 10px; font-size: .8rem; }
  .mbk-body { padding: 16px 14px 18px; }
  .mbk-bank .maternity-deposit-box { padding: 14px 12px 16px; }
  .mbk-form .bf-row > .bf-field:first-child:nth-last-child(odd):not(:only-child) { grid-column: 1 / -1; }
}

/* ═══ Ô CHỌN TỰ DỰNG (.ps-select — site.js enhanceSelect, 2026-11-03; người dùng: "sửa lại dropdown cho đẹp hơn") — CHÉP khối "Ô chọn tự dựng" của
   site.css benhviendakhoathuynguyen: nút mở cùng khuôn ô nhập của form (cao 44px, viền #d3deeb, bo 8px), danh sách xổ khung trắng bo 12px đổ bóng
   xanh, ô tìm nhanh (> 9 lựa chọn), dòng rê chuột nền lam nhạt, dòng đang chọn chữ xanh đậm + dấu tích. Chênh lệch: màu theo biến thương hiệu. */
.ps-native { display: none !important; }
.ps-select { position: relative; }
.ps-trigger {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-height: 44px; padding: 9px 12px 9px 13px;
  border: 1px solid #d3deeb; border-radius: 8px; background: #fff; font: inherit; font-size: .92rem; color: var(--text-dark); text-align: left;
  line-height: 1.3; cursor: pointer; transition: border-color .2s, box-shadow .2s;
}
.ps-trigger:hover { border-color: #b6c7dd; }
.ps-trigger:focus-visible, .ps-select.is-open .ps-trigger { outline: none; border-color: var(--primary); box-shadow: 0 0 0 4px rgba(8, 76, 161, .12); }
.ps-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ps-label.is-placeholder { color: #94a3b8; }
.ps-chevron { flex-shrink: 0; width: 16px; height: 16px; color: var(--text-muted); transition: transform .2s ease; }
.ps-select.is-open .ps-chevron { transform: rotate(180deg); color: var(--primary); }
.bf-field.is-invalid .ps-trigger { border-color: var(--red); background-color: #fff5f5; }
.ps-menu {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 60; background: #fff;
  border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 16px 38px rgba(8, 41, 91, .18); overflow: hidden; animation: psIn .14s ease-out;
}
.ps-select.drop-up .ps-menu { top: auto; bottom: calc(100% + 6px); }
/* Ô hẹp (nửa hàng trên điện thoại): danh sách giãn rộng hơn ô (JS đặt min-width) — sát mép phải màn hình thì canh theo mép phải của ô. */
.ps-select.drop-left .ps-menu { left: auto; right: 0; }
@keyframes psIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.ps-search { padding: 8px; border-bottom: 1px solid var(--border-light); background: var(--bg-soft); }
.ps-search input {
  width: 100%; height: 36px; padding: 0 12px; border: 1px solid var(--border); border-radius: 8px; background: #fff;
  font: inherit; font-size: .85rem; color: var(--text-dark); outline: none;
}
.ps-search input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(8, 76, 161, .12); }
.ps-list { max-height: 264px; overflow-y: auto; margin: 0; padding: 6px; list-style: none; overscroll-behavior: contain; }
.ps-option {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 12px; border-radius: 8px;
  font-size: .9rem; line-height: 1.35; color: var(--text-dark); cursor: pointer; transition: background .12s, color .12s;
}
.ps-option + .ps-option { margin-top: 2px; }
.ps-option:hover, .ps-option.is-active { background: var(--bg-soft); color: var(--primary); }
.ps-option.is-selected { background: #e8f0fb; color: var(--primary); font-weight: 600; }
.ps-check { flex-shrink: 0; width: 15px; height: 15px; color: var(--primary); visibility: hidden; }
.ps-option.is-selected .ps-check { visibility: visible; }
.ps-empty { padding: 14px 10px; font-size: .85rem; color: var(--text-muted); text-align: center; }
.ps-list::-webkit-scrollbar { width: 6px; }
.ps-list::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }
/* Bộ lọc chuyên khoa trang Đội ngũ bác sĩ: chevron vẽ sẵn trong .doc-select thừa khi đã thay bằng ô tự dựng. */
.doc-select:has(.ps-select) > .icon { display: none; }
@media (max-width: 575px) {
  .ps-trigger, .ps-option { font-size: .875rem; }
  .ps-list { max-height: 50vh; }
}
/* Danh sách xổ / lịch của ô ngày KHÔNG bị cắt trong thẻ form: bỏ overflow:hidden của khung (giữ bo góc bằng các phần con) — trước đó danh sách gần
   đáy thẻ bị cắt và ô tìm nhanh nhận con trỏ làm cả khung trượt ngang trên điện thoại. */
.vbk, .mbk-card, .booking-card { overflow: visible; }
.vbk-guide { border-radius: 20px 0 0 20px; }
.vbk-form-head { border-radius: 0 20px 0 0; }
.mbk-head { border-radius: 16px 16px 0 0; }
@media (max-width: 991px) {
  .vbk-guide { border-radius: 20px 20px 0 0; }
  .vbk-form-head { border-radius: 0; }
}
@media (max-width: 575px) {
  .vbk-guide { border-radius: 12px 12px 0 0; }
  .mbk-head { border-radius: 12px 12px 0 0; }
}

/* ═══ BÁC SĨ — kiểu "THẺ HỒ SƠ GỌN" (2026-11-03, người dùng: "module bác sĩ hơi thô, có style nào khác đẹp hơn không") ═══════════════════════════
   Ghi đè thẻ .doc-card cũ (khung đứng 3:4 + hai nút to đỏ) và trang chi tiết (dp-*). Đỏ chỉ ở nút Đặt lịch của trang chi tiết + khi rê nút lịch. */
.doc-grid { gap: 24px; }
.doc-card { position: relative; border: 1px solid var(--border-light); border-radius: 16px; box-shadow: 0 2px 10px rgba(8, 41, 91, .05);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.doc-card:hover { transform: translateY(-5px); border-color: #cfdcef; box-shadow: 0 18px 40px rgba(8, 41, 91, .12); }
.doc-card-photo { aspect-ratio: 1 / 1; background: radial-gradient(120% 90% at 50% 0%, #ffffff 0%, #eaf2fc 55%, #dbe8f8 100%); }
.doc-card-photo img { object-position: center 8%; transform-origin: center top; }
.doc-card:hover .doc-card-photo img { transform: scale(1.05); }
.doc-card-body { padding: 16px 18px 16px; }
.doc-card-degree { display: inline-flex; align-self: flex-start; margin: 0 0 6px; padding: 2px 9px; border-radius: 50px; background: #e8f0fb;
  color: var(--primary); font-size: .72rem; font-weight: 700; letter-spacing: .3px; }
.doc-card-name { font-family: var(--font-heading); font-size: 1.15rem; font-weight: 700; line-height: 1.25; }
.doc-card-name a { color: var(--text-dark); }
.doc-card-name a:hover, .doc-card:hover .doc-card-name a { color: var(--primary); }
.doc-card-tag { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin: 5px 0 0;
  color: var(--primary); font-size: .84rem; font-weight: 500; line-height: 1.45; }
.doc-card-chip { display: inline-flex; align-self: flex-start; align-items: center; gap: 5px; max-width: 100%; margin: 10px 0 0; padding: 4px 10px;
  border-radius: 8px; background: var(--bg-soft); color: var(--text); font-size: .78rem; font-weight: 500; }
.doc-card-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-card-chip .icon { flex-shrink: 0; width: 13px; height: 13px; color: var(--primary); }
.doc-card-desc { -webkit-line-clamp: 2; margin: 10px 0 0; font-size: .83rem; }
.doc-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 14px; }
.doc-card-desc + .doc-card-foot, .doc-card-chip + .doc-card-foot, .doc-card-tag + .doc-card-foot { margin-top: auto; }
.doc-card-foot { border-top: 1px dashed var(--border); }
.doc-card-body > :nth-last-child(2) { margin-bottom: 14px; }
.doc-card-more { display: inline-flex; align-items: center; gap: 6px; color: var(--primary); font-size: .86rem; font-weight: 700; }
.doc-card-more .icon { width: 15px; height: 15px; transition: transform .2s ease; }
.doc-card:hover .doc-card-more .icon { transform: translateX(3px); }
.doc-card-book { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid #cddcf0; color: var(--primary); background: #fff; transition: background .2s, color .2s, border-color .2s; }
.doc-card-book .icon { width: 17px; height: 17px; }
.doc-card-book:hover { background: var(--red); border-color: var(--red); color: #fff; }
.doc-card.is-skeleton .doc-card-photo { aspect-ratio: 1 / 1; }
@media (max-width: 575px) {
  .doc-grid, .doc-grid.is-4, .doc-grid.is-3 { gap: 12px; }
  .doc-card { border-radius: 12px; }
  .doc-card-body { padding: 11px 11px 12px; }
  .doc-card-degree { font-size: .66rem; padding: 1px 7px; margin-bottom: 4px; }
  .doc-card-name { font-size: .98rem; }
  .doc-card-tag { font-size: .76rem; }
  .doc-card-chip { margin-top: 8px; padding: 3px 8px; font-size: .72rem; }
  .doc-card-desc { display: none; }
  .doc-card-body > :nth-last-child(2) { margin-bottom: 10px; }
  .doc-card-foot { padding-top: 10px; }
  .doc-card-more { font-size: .78rem; }
  .doc-card-book { width: 32px; height: 32px; }
  .doc-card-book .icon { width: 15px; height: 15px; }
}

/* Trang chi tiết bác sĩ */
.dp-hero { position: relative; padding: 40px 0 0; color: #fff;
  background: radial-gradient(90% 120% at 100% 0%, rgba(255, 255, 255, .12) 0%, transparent 55%), linear-gradient(135deg, var(--primary) 0%, var(--primary-deep) 100%); }
.dp-hero-grid { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 40px; align-items: end; }
.dp-photo { position: relative; aspect-ratio: 4 / 5; margin-bottom: -60px; border: 6px solid #fff; border-radius: 22px; overflow: hidden;
  background: radial-gradient(120% 90% at 50% 0%, #fff 0%, #eaf2fc 60%, #dbe8f8 100%); box-shadow: 0 24px 50px rgba(5, 45, 97, .35); z-index: 1; }
.dp-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 10%; }
.dp-info { padding-bottom: 36px; min-width: 0; }
.dp-crumb { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 18px; font-size: .84rem; }
.dp-crumb a { color: rgba(255, 255, 255, .78); }
.dp-crumb a:hover { color: #fff; }
.dp-crumb .icon { width: 14px; height: 14px; color: rgba(255, 255, 255, .5); }
.dp-degree { display: inline-flex; padding: 3px 12px; border-radius: 50px; background: var(--yellow); color: var(--primary-deep); font-size: .78rem; font-weight: 800; letter-spacing: .4px; }
.dp-name { margin: 10px 0 0; font-family: var(--font-heading); font-size: clamp(1.8rem, 3.4vw, 2.6rem); font-weight: 800; line-height: 1.15; color: #fff; }
.dp-tag { margin: 8px 0 0; font-size: 1.02rem; color: rgba(255, 255, 255, .88); }
.dp-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; }
.dp-chips li { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 50px; background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .22); font-size: .84rem; }
.dp-chips .icon { width: 15px; height: 15px; color: var(--yellow); }
.dp-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.dp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 10px 22px; border-radius: 10px;
  font-weight: 700; font-size: .92rem; transition: background .2s, color .2s, border-color .2s, transform .2s; }
.dp-btn .icon { width: 17px; height: 17px; }
.dp-btn.is-red { background: var(--red); color: #fff; box-shadow: 0 8px 20px rgba(229, 29, 27, .3); }
.dp-btn.is-red:hover { background: var(--red-dark); color: #fff; transform: translateY(-1px); }
.dp-btn.is-ghost { border: 1px solid rgba(255, 255, 255, .55); color: #fff; }
.dp-btn.is-ghost:hover { background: #fff; color: var(--primary); }
.dp-btn.is-block { display: flex; width: 100%; }
.dp-body { padding: 84px 0 56px; background: var(--bg-soft); }
.dp-body-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 28px; align-items: start; }
.dp-sections { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.dp-sec { padding: 24px 26px; border-radius: 16px; background: #fff; border: 1px solid var(--border-light); box-shadow: 0 2px 10px rgba(8, 41, 91, .04); }
.dp-sec-title { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; font-family: var(--font-heading); font-size: 1.12rem; font-weight: 700;
  color: var(--primary); text-transform: uppercase; }
.dp-sec-ico { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px;
  background: #e8f0fb; color: var(--primary); }
.dp-sec-ico .icon { width: 20px; height: 20px; }
.dp-sec-body { color: var(--text); font-size: .95rem; line-height: 1.75; }
.dp-sec-body p { margin: 0 0 10px; }
.dp-sec-body p:last-child { margin-bottom: 0; }
.dp-sec.is-intro .dp-sec-body p { font-style: italic; }
.dp-sec-list { display: flex; flex-direction: column; gap: 8px; margin: 0 0 10px; padding: 0; list-style: none; }
.dp-sec-list li { display: flex; align-items: flex-start; gap: 10px; }
.dp-sec-list .icon { flex-shrink: 0; width: 17px; height: 17px; margin-top: 4px; color: #16a34a; }
.dp-aside { position: sticky; top: var(--sticky-top); }
.dp-book { display: flex; flex-direction: column; gap: 8px; padding: 24px; border-radius: 16px; background: #fff; border: 1px solid var(--border-light);
  border-top: 4px solid var(--primary); box-shadow: 0 18px 40px rgba(8, 41, 91, .1); text-align: center; }
.dp-book-ico { align-self: center; display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%;
  background: #e8f0fb; color: var(--primary); }
.dp-book-ico .icon { width: 24px; height: 24px; }
.dp-book-title { margin: 4px 0 0; font-family: var(--font-heading); font-size: 1.1rem; font-weight: 800; color: var(--text-dark); text-transform: uppercase; }
.dp-book-name { margin: 0; color: var(--primary); font-weight: 700; }
.dp-book-desc { margin: 0 0 8px; color: var(--text-muted); font-size: .86rem; line-height: 1.55; }
.dp-book-call { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 6px; padding: 10px; border-radius: 10px; background: var(--bg-soft); color: var(--text-dark); text-align: left; }
.dp-book-call .icon { width: 20px; height: 20px; color: var(--red); }
.dp-book-call small { display: block; font-size: .74rem; color: var(--text-muted); }
.dp-book-call strong { display: block; font-family: var(--font-heading); font-size: 1.15rem; color: var(--red); }
@media (max-width: 991px) {
  .dp-hero-grid { grid-template-columns: 220px minmax(0, 1fr); gap: 26px; }
  .dp-body-grid { grid-template-columns: 1fr; }
  .dp-aside { position: static; }
}
@media (max-width: 767px) {
  .dp-hero { padding-top: 24px; }
  .dp-hero-grid { grid-template-columns: 1fr; gap: 0; text-align: center; }
  .dp-photo { width: 190px; margin: 0 auto -50px; border-width: 4px; border-radius: 18px; order: 2; }
  .dp-info { order: 1; padding-bottom: 20px; }
  .dp-crumb, .dp-chips, .dp-actions { justify-content: center; }
  .dp-body { padding: 70px 0 36px; }
  .dp-sec { padding: 18px 16px; border-radius: 12px; }
  .dp-sec-title { font-size: 1rem; }
  .dp-sec-ico { width: 34px; height: 34px; border-radius: 10px; }
  .dp-sec-body { font-size: .9rem; }
  .dp-btn { flex: 1 1 auto; }
}

/* ═══ LIÊN HỆ /lien-he (2026-11-03) — CHÉP khối "Liên hệ" của site.css benhviendakhoathuynguyen: 3 thẻ liên hệ, form góp ý | bản đồ, popup chỉ
   đường. Chênh lệch: xanh nguồn → --primary; popup tự dựng (.cdir-*) thay .hospital-modal của nguồn. */
.contact-section { padding: 56px 0 64px; }
.contact-intro { margin-bottom: 36px; }
.contact-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-bottom: 40px; }
.contact-card { --cc: var(--primary); display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 28px 24px; text-align: center;
  background: #fff; border: 1px solid var(--border); border-radius: 14px; transition: transform .25s ease, box-shadow .25s ease; }
.contact-card:hover { transform: translateY(-4px); box-shadow: 0 14px 32px rgba(8, 41, 91, .1); }
.contact-card.is-red { --cc: var(--red); background: #fff7f7; border-color: #f9d7d6; }
.contact-card.is-teal { --cc: #0d9488; }
.contact-card-icon { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; margin-bottom: 8px; border-radius: 50%;
  background: color-mix(in srgb, var(--cc) 12%, #fff); color: var(--cc); }
.contact-card-icon .icon { width: 30px; height: 30px; }
.contact-card-title { margin: 0 0 6px; font-family: var(--font-heading); font-size: 1.1rem; font-weight: 800; text-transform: uppercase; color: var(--cc); }
.contact-card-text { margin: 0; font-size: .92rem; line-height: 1.6; color: var(--text-muted); }
.contact-card-text a { color: var(--primary); }
.contact-card-text a:hover { color: var(--primary-dark); }
.contact-card-text.is-emergency, .contact-card-text.is-emergency a { color: var(--red); font-weight: 700; }
.contact-main { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: stretch; }
.contact-main.no-form { grid-template-columns: 1fr; }
.contact-box { display: flex; flex-direction: column; padding: 28px; background: #fff; border: 1px solid var(--border); border-radius: 14px; }
.contact-box-title { margin: 0 0 8px; font-family: var(--font-heading); font-size: 1.2rem; font-weight: 800; text-transform: uppercase; color: var(--primary); }
.contact-box-title + .contact-map, .contact-box-title + .bf { margin-top: 10px; }
.contact-box-desc { margin: 0 0 18px; color: var(--text-muted); font-size: .9rem; }
.contact-map { flex: 1; min-height: 380px; overflow: hidden; border: 1px solid var(--border); border-radius: 10px; }
.contact-map iframe { display: block; width: 100%; height: 100%; min-height: 380px; border: 0; }
.contact-map-actions { margin-top: 16px; text-align: center; }
.contact-dir-btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; border: 1px solid var(--red); border-radius: 8px; background: #fff;
  color: var(--red); font-family: inherit; font-size: .88rem; font-weight: 700; cursor: pointer; transition: background .2s, color .2s; }
.contact-dir-btn:hover { background: var(--red); color: #fff; }
.contact-dir-btn .icon { width: 16px; height: 16px; }
.btn-primary-solid { background: var(--primary); color: #fff; box-shadow: 0 6px 16px rgba(8, 76, 161, .25); }
.btn-primary-solid:hover { background: var(--primary-dark); color: #fff; }
@media (max-width: 991px) {
  .contact-main { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .contact-section { padding: 32px 0 44px; }
  .contact-cards { gap: 8px; margin-bottom: 24px; }
  .contact-card { padding: 14px 6px; border-radius: 10px; }
  .contact-card-icon { width: 40px; height: 40px; margin-bottom: 4px; }
  .contact-card-icon .icon { width: 20px; height: 20px; }
  .contact-card-title { margin-bottom: 4px; font-size: .68rem; line-height: 1.3; }
  .contact-card-text { font-size: .68rem; line-height: 1.45; overflow-wrap: anywhere; }
  .contact-box { padding: 20px 16px; }
  .contact-map, .contact-map iframe { min-height: 300px; }
}

/* Popup chỉ đường */
.cdir-modal { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 16px; }
.cdir-modal[hidden] { display: none; }
.cdir-backdrop { position: absolute; inset: 0; background: rgba(2, 6, 23, .6); backdrop-filter: blur(3px); }
.cdir-dialog { position: relative; width: 100%; max-width: 960px; max-height: 92vh; overflow: auto; background: #fff; border-radius: 14px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .3); animation: psIn .2s ease-out; }
.cdir-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px; color: #fff;
  background: linear-gradient(135deg, var(--primary), var(--primary-deep)); border-radius: 14px 14px 0 0; }
.cdir-title { display: flex; align-items: center; gap: 8px; margin: 0; font-family: var(--font-heading); font-size: 1.1rem; font-weight: 800; text-transform: uppercase; color: #fff; }
.cdir-title .icon { width: 20px; height: 20px; color: var(--yellow); }
.cdir-close { display: flex; padding: 4px; border: 0; background: none; color: #fff; cursor: pointer; transition: transform .2s; }
.cdir-close:hover { transform: rotate(90deg); }
.cdir-close .icon { width: 22px; height: 22px; }
.cdir-body { padding: 18px 20px 20px; }
.contact-dir-form { margin-bottom: 14px; }
.contact-dir-to { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: .9rem; font-weight: 600; color: var(--text-dark); }
.contact-dir-to .icon { width: 16px; height: 16px; color: var(--red); flex-shrink: 0; }
.contact-dir-row { display: flex; gap: 8px; }
.contact-dir-row input { flex: 1; min-width: 0; height: 44px; padding: 0 14px; border: 1px solid #d3deeb; border-radius: 8px; font: inherit; font-size: .9rem; color: var(--text-dark); outline: none; }
.contact-dir-row input:focus { border-color: var(--primary); box-shadow: 0 0 0 4px rgba(8, 76, 161, .12); }
.contact-dir-geo, .contact-dir-go { flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 16px; border-radius: 8px;
  font: inherit; font-size: .88rem; font-weight: 600; cursor: pointer; transition: background .2s, color .2s; }
.contact-dir-geo { border: 1px solid #d3deeb; background: #fff; color: var(--primary); }
.contact-dir-geo:hover { background: var(--bg-soft); }
.contact-dir-geo:disabled { opacity: .6; cursor: wait; }
.contact-dir-go { border: 0; background: var(--primary); color: #fff; }
.contact-dir-go:hover { background: var(--primary-dark); }
.contact-dir-geo .icon, .contact-dir-go .icon { width: 16px; height: 16px; }
.contact-dir-msg { margin: 8px 0 0; font-size: .85rem; color: var(--red); }
.contact-dir-map { height: 60vh; min-height: 320px; overflow: hidden; border: 1px solid var(--border); border-radius: 10px; }
.contact-dir-map iframe { display: block; width: 100%; height: 100%; border: 0; }
@media (max-width: 575px) {
  .contact-dir-row { flex-wrap: wrap; }
  .contact-dir-row input { flex: 1 1 100%; }
  .contact-dir-geo, .contact-dir-go { flex: 1; justify-content: center; }
  .contact-dir-map { height: 50vh; }
}

/* ═══ BẢNG GIÁ /bang-gia (2026-11-03) — CHÉP khối "Bảng giá" của site.css benhviendakhoathuynguyen: thẻ thông báo (.price-notice-*: đầu xanh + danh
   sách), bảng giá 5 cột (.price-table-*; điện thoại: mỗi dòng thành thẻ). Chênh lệch: đỏ nguồn → --red (nút đăng ký khám = Đặt lịch); thêm chấm đầu
   dòng tròn, "Liên hệ" khi chưa có giá, thẻ thông báo cao bằng nhau trong một hàng (.home-row). */
.price-notice-card { border: 1px solid var(--border); border-radius: 8px; background: #fff; margin-bottom: 2rem; overflow: hidden; }
.price-notice-head { display: flex; align-items: center; gap: 8px; padding: 14px 18px; background: var(--primary); color: #fff; font-family: var(--font-main); font-size: .9375rem; font-weight: 600; letter-spacing: .02em; line-height: 1.4; }
.price-notice-head .icon { width: 18px; height: 18px; flex-shrink: 0; }
.price-notice-body { padding: 16px 18px 18px; }
.price-notice-intro { margin: 0 0 10px; color: var(--text); font-size: .9375rem; line-height: 1.6; }
.price-notice-list { margin: 0; padding: 0; list-style: none; color: var(--text-muted); font-size: .875rem; line-height: 1.6; }
.price-notice-list li + li { margin-top: 4px; }
.price-notice-list strong { color: var(--text-dark); font-weight: 600; }
.price-table-wrap { overflow-x: auto; margin-bottom: 2rem; border: 1px solid var(--border); border-radius: 8px; background: #fff; }
.price-table { width: 100%; min-width: 720px; margin: 0; border-collapse: collapse; color: var(--text); font-size: .9375rem; line-height: 1.5; }
.price-table th, .price-table td { padding: 14px 18px; text-align: left; vertical-align: middle; }
.price-table thead th { background: var(--primary); color: #fff; font-size: .78125rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.price-table tbody td { border-top: 1px solid var(--border-light); }
.price-table tbody tr:first-child td { border-top: 0; }
.price-table tbody tr { transition: background .15s ease; }
.price-table tbody tr:hover { background: #f3f7fe; }
.price-table .price-col-no { width: 72px; text-align: center; }
.price-table td.price-col-no { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.price-table .price-col-unit { width: 120px; text-align: center; }
.price-table td.price-col-unit { color: var(--text-muted); }
.price-table .price-col-price { width: 180px; text-align: right; }
.price-table .price-col-note { width: 180px; text-align: center; }
.price-name { color: var(--text-dark); font-weight: 500; }
.price-value { color: var(--primary); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.price-tag { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 4px; font-size: .78125rem; font-weight: 500; line-height: 1.4; white-space: nowrap; }
.price-tag .icon { width: 13px; height: 13px; stroke-width: 3; }
.price-table .price-tag { min-width: 124px; justify-content: center; }
.price-tag--ok { background: #e8f6ee; color: #157347; }
.price-tag--plain { background: #f1f5f9; color: #475569; }
.price-table-foot { text-align: center; }
.price-table-note { max-width: 760px; margin: 0 auto 1.25rem; color: var(--text-muted); font-size: .875rem; line-height: 1.6; white-space: pre-line; }
.price-table-btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 24px; border: none; border-radius: 6px; background: linear-gradient(135deg, var(--red) 0%, var(--red-dark) 100%); color: #fff; font-size: .88rem; font-weight: 700; text-transform: uppercase; cursor: pointer; box-shadow: 0 4px 12px rgba(229, 29, 27, .35); transition: var(--ease); }
.price-table-btn:hover { background: linear-gradient(135deg, var(--red) 0%, var(--red) 100%); color: #fff; transform: translateY(-2px); box-shadow: 0 6px 18px rgba(229, 29, 27, .5); }
.price-table-btn .icon { width: 16px; height: 16px; }
@media (max-width: 767px) {
  .price-table-wrap { overflow: hidden; }
  .price-table { min-width: 0; }
  .price-table thead { display: none; }
  .price-table, .price-table tbody { display: block; }
  .price-table tbody tr { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 14px 16px; border-top: 1px solid var(--border-light); }
  .price-table tbody tr:first-child { border-top: 0; }
  .price-table tbody td { display: block; padding: 0; border: 0; }
  .price-table td.price-col-name, .price-table td.price-col-unit,
  .price-table td.price-col-price, .price-table td.price-col-note { width: auto; text-align: left; }
  .price-table td.price-col-no { display: none; }
  .price-table td.price-col-name { flex: 0 0 100%; }
  .price-table td.price-col-unit { order: 1; min-width: 2.5em; font-size: .875rem; }
  .price-table td.price-col-note { order: 2; }
  .price-table td.price-col-note:empty { display: none; }
  .price-table td.price-col-price { order: 3; margin-left: auto; }
  .price-notice-head, .price-notice-body { padding-left: 16px; padding-right: 16px; }
}
.price-notice-card[id], .price-table-anchor { scroll-margin-top: 90px; }

.price-notice-card { margin-bottom: 24px; border-radius: 12px; }
.home-cell > .price-notice-card:last-child { margin-bottom: 0; height: 100%; }
.home-row:has(> .home-cell > .price-notice-card) { align-items: stretch; }
.price-notice-list li { display: flex; align-items: flex-start; gap: 10px; }
.price-notice-dot { flex-shrink: 0; width: 7px; height: 7px; margin-top: 8px; border-radius: 50%; background: var(--primary); }
.price-table-title { margin: 0 0 16px; font-family: var(--font-heading); font-size: 1.3rem; font-weight: 800; text-transform: uppercase; color: var(--primary); }
.price-table-wrap { border-radius: 12px; }
.price-contact { color: var(--text-muted); font-style: italic; white-space: nowrap; }

/* ═══ TRANG TÌM KIẾM /tim-kiem (2026-11-03) — bố cục theo .search-page-* của benhviendakhoathuynguyen: thanh tìm thẻ trắng giữa trang, phạm vi =
   hàng nút viên (cùng tinh thần .so-chip của khung tìm nổi) kèm số kết quả; thẻ kết quả là thẻ của từng module. ═══ */
.srch-page { padding: 36px 0 70px; background: var(--bg-soft); }
.srch-form { max-width: 860px; margin: 0 auto 34px; }
.srch-box { position: relative; display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 18px; background: #fff; border: 1px solid var(--border); border-radius: 14px; transition: border-color .2s, box-shadow .2s; }
.srch-box:focus-within { border-color: var(--primary); box-shadow: 0 0 0 4px rgba(8, 76, 161, .1); }
.srch-box > .icon { flex: 0 0 auto; width: 20px; height: 20px; color: var(--primary); }
.srch-box input { flex: 1; min-width: 0; height: 46px; border: 0; outline: 0; background: transparent; font-size: 1.02rem; color: var(--text-dark); }
.srch-box input::placeholder { color: #94a3b8; }
.srch-submit { flex: 0 0 auto; height: 46px; padding: 0 24px; border: 0; border-radius: 10px; background: var(--primary); color: #fff; font-weight: 700; cursor: pointer; transition: background .2s; }
.srch-submit:hover { background: var(--primary-dark); }
.srch-scopes { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 16px; }
.srch-scope { position: relative; cursor: pointer; }
.srch-scope input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.srch-scope span { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 16px; border: 1px solid var(--border); border-radius: 999px; background: #fff; color: var(--text); font-size: .9rem; font-weight: 600; transition: background .2s, color .2s, border-color .2s; }
.srch-scope span .icon { width: 15px; height: 15px; }
.srch-scope em { min-width: 22px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--bg-soft); color: var(--primary); font-size: .75rem; font-style: normal; line-height: 20px; text-align: center; }
.srch-scope:hover span { border-color: var(--primary); color: var(--primary); }
.srch-scope input:checked + span { background: var(--primary); border-color: var(--primary); color: #fff; }
.srch-scope input:checked + span em { background: rgba(255, 255, 255, .2); color: #fff; }
.srch-scope input:focus-visible + span { outline: 2px solid var(--yellow); outline-offset: 2px; }
.srch-live { transition: opacity .2s ease; }
.srch-live.is-loading { opacity: .55; pointer-events: none; }
.srch-summary { margin: 0 0 26px; text-align: center; font-size: .95rem; color: var(--text); }
.srch-summary strong { color: var(--primary); }
.srch-empty { max-width: 520px; margin: 0 auto; padding: 56px 24px 64px; text-align: center; background: #fff; border: 1px dashed var(--border); border-radius: 16px; color: var(--text); }
.srch-empty-ico { display: inline-flex; align-items: center; justify-content: center; width: 72px; height: 72px; margin-bottom: 16px; border-radius: 50%; background: var(--bg-soft); color: var(--primary); }
.srch-empty-ico .icon { width: 32px; height: 32px; }
.srch-empty p { margin: 0 0 4px; font-size: .92rem; }
.srch-empty .srch-empty-title { margin-bottom: 6px; font-size: 1.05rem; font-weight: 600; color: var(--text-dark); }
.srch-section + .srch-section { margin-top: 44px; }
.srch-section-title { display: flex; align-items: center; gap: 10px; margin: 0 0 18px; padding-left: 12px; border-left: 4px solid var(--primary); font-size: 1.3rem; font-weight: 700; color: var(--primary-deep); text-transform: uppercase; }
.srch-section-title span { min-width: 28px; height: 24px; padding: 0 8px; border-radius: 999px; background: var(--yellow); color: var(--primary-deep); font-size: .8rem; line-height: 24px; text-align: center; }
.srch-news.nw-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.srch-news .nw-card { padding-bottom: 16px; background: #fff; border: 1px solid var(--border-light); border-radius: 12px; overflow: hidden; }
.srch-news .nw-card > :not(.nw-card__img) { padding-left: 16px; padding-right: 16px; }
.srch-more { margin-top: 24px; text-align: center; }
@media (max-width: 991px) { .srch-news.nw-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } }
@media (max-width: 575px) {
  .srch-page { padding: 24px 0 50px; }
  .srch-box { padding-left: 14px; }
  .srch-submit { padding: 0 16px; }
  .srch-scopes { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; margin-inline: -16px; padding: 0 16px 4px; scrollbar-width: none; }
  .srch-scopes::-webkit-scrollbar { display: none; }
  .srch-scope { flex: 0 0 auto; }
  .srch-news.nw-cards { grid-template-columns: 1fr; }
  .srch-section-title { font-size: 1.1rem; }
}

/* ═══ TRANG LỖI /loi/{mã} (2026-11-03) — bố cục .error-page của benhviendakhoathuynguyen (mã lớn · tiêu đề · lời nhắn · đường dẫn · 2 nút); thẻ trắng
   giữa nền lam nhạt, mã lỗi xanh kèm vòng vàng điểm xuyết, nút đỏ CHỈ cho Đặt lịch khám; 404 thêm ô tìm kiếm. ═══ */
.err-page { padding: 56px 0 80px; background: var(--bg-soft); }
.err-card { max-width: 680px; margin: 0 auto; padding: 44px 40px 40px; text-align: center; background: #fff; border: 1px solid var(--border-light); border-radius: 20px; }
.err-code { position: relative; display: inline-block; margin: 0 0 8px; font-family: var(--font-heading, inherit); font-size: clamp(4.5rem, 14vw, 7.5rem); font-weight: 800; line-height: 1; letter-spacing: -.02em; color: var(--primary); }
.err-code span { position: relative; z-index: 1; }
.err-code::before { content: ""; position: absolute; top: 4px; right: -18px; width: 34px; height: 34px; border-radius: 50%; background: var(--yellow); opacity: .85; }
.err-title { margin: 0 0 10px; font-size: 1.6rem; font-weight: 700; color: var(--primary-deep); }
.err-message { max-width: 500px; margin: 0 auto 14px; font-size: 1rem; line-height: 1.65; color: var(--text); }
.err-path { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 6px; margin: 0 0 24px; font-size: .88rem; color: var(--text); }
.err-path code { max-width: 100%; padding: 3px 10px; border-radius: 6px; background: var(--bg-soft); color: var(--primary-deep); font-size: .85rem; word-break: break-all; }
/* Trang xác nhận đăng ký nhận tin (2026-11-10 — Views/Shared/NewsletterConfirm.cshtml, dùng lại thẻ .err-card). */
.nl-confirm-icon { display: inline-flex; align-items: center; justify-content: center; width: 72px; height: 72px; margin: 0 0 16px; border-radius: 50%; background: var(--bg-soft); color: var(--primary); }
.nl-confirm-icon .icon { width: 34px; height: 34px; }
.nl-confirm-icon.is-bad { color: var(--red); background: #fdecec; }
button.err-btn { border: 0; cursor: pointer; font-family: inherit; }
.err-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.err-btn { display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 22px; border-radius: 10px; font-weight: 700; font-size: .95rem; transition: background .2s, color .2s, border-color .2s; }
.err-btn .icon { width: 18px; height: 18px; }
.err-btn.is-primary { background: var(--primary); color: #fff; }
.err-btn.is-primary:hover { background: var(--primary-dark); color: #fff; }
.err-btn.is-red { background: var(--red); color: #fff; }
.err-btn.is-red:hover { background: var(--red-dark); color: #fff; }
.err-search { margin-top: 32px; padding-top: 26px; border-top: 1px dashed var(--border); text-align: left; }
.err-search label { display: block; margin-bottom: 10px; text-align: center; font-size: .9rem; color: var(--text); }
.err-search-box { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 14px; border: 1px solid var(--border); border-radius: 12px; transition: border-color .2s, box-shadow .2s; }
.err-search-box:focus-within { border-color: var(--primary); box-shadow: 0 0 0 4px rgba(8, 76, 161, .1); }
.err-search-box > .icon { flex: 0 0 auto; width: 18px; height: 18px; color: var(--primary); }
.err-search-box input { flex: 1; min-width: 0; height: 40px; border: 0; outline: 0; background: transparent; font-size: .95rem; color: var(--text-dark); }
.err-search-box button { flex: 0 0 auto; height: 40px; padding: 0 18px; border: 0; border-radius: 8px; background: var(--primary); color: #fff; font-weight: 700; cursor: pointer; }
.err-search-box button:hover { background: var(--primary-dark); }
@media (max-width: 575px) {
  .err-page { padding: 32px 0 56px; }
  .err-card { padding: 32px 20px 28px; border-radius: 16px; }
  .err-title { font-size: 1.3rem; }
  .err-btn { flex: 1 1 100%; justify-content: center; }
}

/* ═══ THƯ VIỆN ẢNH / VIDEO — /thu-vien-anh, /video (2026-11-03): khuôn /wallpapers · /videos của BlogGame, giao diện theo thẻ của site (bo 14px, viền
   nhạt, rê chuột nhấc nhẹ + ảnh phóng nhẹ); nút play đỏ dùng chung .btn-play-video-pulse của khối video trang chủ. ═══ */
.lib-page { padding: 44px 0 70px; }
.lib-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.lib-grid.is-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.lib-content { margin-top: 36px; }
.lib-content--top { margin: 0 0 28px; }
.lib-album, .lib-video { display: flex; flex-direction: column; min-width: 0; background: #fff; border: 1px solid var(--border-light); border-radius: 14px; overflow: hidden; color: inherit; transition: transform .25s, border-color .25s; }
.lib-album:hover, .lib-video:hover { transform: translateY(-3px); border-color: var(--primary); }
.lib-album-media, .lib-video-media { position: relative; display: block; overflow: hidden; background: var(--bg-soft); }
.lib-album-media { aspect-ratio: 4 / 3; }
.lib-video-media { aspect-ratio: 16 / 9; }
.lib-album-media img, .lib-video-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.lib-album:hover .lib-album-media img, .lib-video:hover .lib-video-media img { transform: scale(1.05); }
.lib-album-ph { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: #b6c6dc; }
.lib-album-ph .icon { width: 42px; height: 42px; }
.lib-album-count { position: absolute; top: 12px; left: 12px; display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; background: rgba(5, 45, 97, .78); color: #fff; font-size: .78rem; font-weight: 600; }
.lib-album-count .icon { width: 13px; height: 13px; }
.lib-album-body, .lib-video-body { display: flex; flex-direction: column; gap: 6px; flex: 1; padding: 16px 18px 18px; }
.lib-album-name, .lib-video-name { font-size: 1.05rem; font-weight: 700; line-height: 1.4; color: var(--primary-deep); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lib-album-desc { font-size: .9rem; line-height: 1.6; color: var(--text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lib-album-more { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 6px; font-size: .88rem; font-weight: 600; color: var(--primary); }
.lib-album-more .icon { width: 15px; height: 15px; transition: transform .25s; }
.lib-album:hover .lib-album-more .icon { transform: translateX(3px); }
.lib-video-media .btn-play-video-pulse { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.lib-video-len { position: absolute; right: 10px; bottom: 10px; padding: 2px 7px; border-radius: 4px; background: rgba(0, 0, 0, .75); color: #fff; font-size: .75rem; font-weight: 600; }
.lib-video-date { display: inline-flex; align-items: center; gap: 6px; font-size: .82rem; color: var(--text); }
.lib-video-date .icon { width: 14px; height: 14px; }
/* Ảnh trong album: xếp gạch theo cột (giữ tỉ lệ ảnh), chú thích trượt lên khi rê. */
.lib-photos { columns: 4 240px; column-gap: 14px; }
.lib-photo { position: relative; display: block; margin-bottom: 14px; break-inside: avoid; border-radius: 12px; overflow: hidden; background: var(--bg-soft); }
.lib-photo img { display: block; width: 100%; height: auto; transition: transform .4s; }
.lib-photo:hover img { transform: scale(1.04); }
.lib-photo-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 12px 10px; background: linear-gradient(transparent, rgba(5, 45, 97, .85)); color: #fff; font-size: .85rem; line-height: 1.45; opacity: 0; transform: translateY(8px); transition: opacity .25s, transform .25s; }
.lib-photo:hover .lib-photo-cap, .lib-photo:focus-visible .lib-photo-cap { opacity: 1; transform: none; }
.lib-others { margin-top: 56px; padding-top: 36px; border-top: 1px solid var(--border-light); }
.lib-others-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 20px; }
.lib-others-title { margin: 0; padding-left: 12px; border-left: 4px solid var(--primary); font-size: 1.3rem; font-weight: 700; color: var(--primary-deep); text-transform: uppercase; }
/* Trang một video */
.lib-player { position: relative; max-width: 960px; margin: 0 auto; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; background: #000; cursor: pointer; }
.lib-player img { width: 100%; height: 100%; object-fit: cover; opacity: .9; transition: opacity .25s; }
.lib-player:hover img { opacity: 1; }
.lib-player-btn { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; border: 0; background: transparent; cursor: pointer; }
.lib-player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.lib-video-info { max-width: 960px; margin: 22px auto 0; }
.lib-video-title { margin: 0 0 8px; font-size: 1.5rem; font-weight: 700; line-height: 1.35; color: var(--primary-deep); }
.lib-video-info .lib-video-date { margin: 0 0 12px; }
.lib-video-desc { margin: 0; font-size: 1rem; line-height: 1.7; color: var(--text); }
.lib-video-info .lib-content { margin-top: 20px; }
@media (max-width: 1199px) { .lib-grid.is-4 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 991px) { .lib-grid, .lib-grid.is-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } .lib-photos { columns: 3 200px; } }
@media (max-width: 575px) {
  .lib-page { padding: 28px 0 50px; }
  .lib-grid, .lib-grid.is-4 { grid-template-columns: 1fr; gap: 16px; }
  .lib-photos { columns: 2; column-gap: 10px; }
  .lib-photo { margin-bottom: 10px; border-radius: 10px; }
  .lib-photo-cap { opacity: 1; transform: none; font-size: .78rem; }
  .lib-player { border-radius: 12px; }
  .lib-video-title, .lib-others-title { font-size: 1.15rem; }
}

/* TRANG TĨNH /{slug} (2026-11-03): thẻ .pol-article của trang Điều khoản, một cột giữa trang. */
.static-article { max-width: 920px; margin: 0 auto; }

/* ═══ ĐĂNG KÝ KHÁM BỆNH — thiết kế lại 2026-11-03 (người dùng: "đang bị lệch — UI khác hiện đại hơn, không bị lệch"). MỘT khối bo 24px chia 2 cột CAO
   BẰNG NHAU: lưới 2 hàng, form TRÁI chiếm cả 2 hàng; cột PHẢI = 2 ô nền xanh chuyển sắc nối liền (đầu: nhãn + tiêu đề + mô tả; dưới: bước, lưu ý,
   giờ làm, gọi tổng đài, liên kết nhanh). Tablet / ĐT: đầu xanh → form → phần hướng dẫn xanh. Đỏ CHỈ ở nút gửi (đặt lịch) + nút gọi tổng đài. ═══ */
.hb { padding: 72px 0; background: linear-gradient(180deg, #fff 0%, var(--bg-soft) 100%); }
.hb-shell { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-rows: auto 1fr;
  grid-template-areas: "form top" "form rest"; border-radius: 24px; background: #fff; border: 1px solid var(--border-light);
  box-shadow: 0 24px 60px -32px rgba(5, 45, 97, .35); }
.hb-panel { position: relative; color: #fff; background: linear-gradient(165deg, var(--primary) 0%, var(--primary-deep) 100%); }
.hb-panel--top { grid-area: top; padding: 40px 40px 8px; border-radius: 0 24px 0 0; overflow: hidden; }
.hb-panel--rest { grid-area: rest; display: flex; flex-direction: column; gap: 22px; padding: 22px 40px 36px; border-radius: 0 0 24px 0;
  background: linear-gradient(180deg, color-mix(in srgb, var(--primary) 55%, var(--primary-deep)) 0%, var(--primary-deep) 100%); }
/* Cột phải liền một màu: ô trên chuyển sắc xuống đúng màu đầu của ô dưới. */
.hb-panel--top { background: linear-gradient(180deg, var(--primary) 0%, color-mix(in srgb, var(--primary) 55%, var(--primary-deep)) 100%); }
.hb-tag { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 12px; color: var(--yellow); font-size: .78rem; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; }
.hb-tag::before { content: ""; width: 26px; height: 3px; border-radius: 2px; background: var(--yellow); }
.hb-title { position: relative; margin: 0 0 10px; color: #fff; font-size: clamp(1.6rem, 2.4vw, 2.1rem); font-weight: 800; line-height: 1.15; text-transform: uppercase; }
.hb-desc { position: relative; margin: 0; color: rgba(255, 255, 255, .82); font-size: .98rem; line-height: 1.6; }

/* Bước: số trong vòng tròn, vạch nối mảnh. */
.hb-steps { list-style: none; margin: 0; padding: 0; }
.hb-steps li { position: relative; display: flex; gap: 14px; padding-bottom: 16px; }
.hb-steps li:last-child { padding-bottom: 0; }
.hb-steps li:not(:last-child)::before { content: ""; position: absolute; left: 17px; top: 38px; bottom: 2px; width: 2px; background: rgba(255, 255, 255, .18); }
.hb-step-no { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .28); color: #fff; font-weight: 800; font-size: .95rem; }
.hb-steps li:first-child .hb-step-no { background: var(--yellow); border-color: var(--yellow); color: var(--primary-deep); }
.hb-steps strong { display: block; margin: 6px 0 2px; color: #fff; font-size: .98rem; }
.hb-steps div > span { display: block; color: rgba(255, 255, 255, .72); font-size: .86rem; line-height: 1.5; }

.hb-note { padding: 16px 18px; border-radius: 14px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14); }
.hb-note-title { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; color: var(--yellow); font-weight: 700; font-size: .92rem; }
.hb-note-title .icon { width: 17px; height: 17px; }
.hb-note ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.hb-note li { display: flex; gap: 8px; color: rgba(255, 255, 255, .9); font-size: .87rem; line-height: 1.45; }
.hb-note li .icon { flex: 0 0 auto; width: 15px; height: 15px; margin-top: 2px; color: var(--yellow); }

.hb-contact { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 14px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .14); }
.hb-hours-title { display: flex; align-items: center; gap: 7px; margin: 0 0 4px; color: rgba(255, 255, 255, .7); font-size: .78rem; text-transform: uppercase; letter-spacing: .6px; }
.hb-hours-title .icon { width: 14px; height: 14px; }
.hb-hours-row { display: flex; gap: 6px; margin: 0; color: rgba(255, 255, 255, .78); font-size: .86rem; }
.hb-hours-row strong { color: #fff; }
.hb-hours-row span::after { content: ":"; }
.hb-call { display: inline-flex; align-items: center; gap: 10px; padding: 8px 18px 8px 8px; border-radius: 999px; background: var(--red); color: #fff; transition: background .2s, transform .2s; }
.hb-call:hover { background: var(--red-dark); color: #fff; transform: translateY(-1px); }
.hb-call-ico { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: rgba(255, 255, 255, .2); }
.hb-call-ico .icon { width: 18px; height: 18px; animation: ringPhone 2.2s ease-in-out infinite; }
.hb-call small { display: block; font-size: .7rem; opacity: .85; line-height: 1.2; }
.hb-call strong { display: block; font-size: 1.05rem; font-weight: 800; letter-spacing: .3px; line-height: 1.2; white-space: nowrap; }

/* Liên kết nhanh: viên kính mờ xếp hàng, tự giãn đầy hàng (3 liên kết vừa một hàng — không lẻ 2 + 1). */
.hb-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }
.hb-link { flex: 1 1 auto; display: flex; align-items: center; gap: 9px; min-width: 0; padding: 8px 14px 8px 8px; border-radius: 12px; background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .14); color: #fff; font-size: .86rem; font-weight: 600; transition: background .2s, border-color .2s; }
.hb-link:hover { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .3); color: #fff; }
.hb-link-ico { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 8px; background: #fff; color: var(--primary); }
.hb-link-ico .quick-ico-mask { width: 17px; height: 17px; }
.hb-link-ico img { width: 18px; height: 18px; object-fit: contain; }
.hb-link.is-book .hb-link-ico { color: var(--red); }
.hb-link-text { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hb-link > .icon { display: none; flex: 0 0 auto; width: 15px; height: 15px; margin-left: auto; opacity: .7; }

/* Cột form. */
.hb .hb-form { grid-area: form; border: 0; border-radius: 24px 0 0 24px; background: #fff; overflow: visible; }
.hb-form-head { display: flex; align-items: center; gap: 14px; padding: 32px 40px 20px; }
.hb-form-ico { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 14px; background: var(--bg-soft); color: var(--primary); }
.hb-form-ico .icon { width: 22px; height: 22px; }
.hb-form-head h3 { margin: 0; color: var(--primary-deep); font-size: 1.2rem; font-weight: 800; text-transform: uppercase; }
.hb-form-head p { margin: 2px 0 0; color: var(--text-muted); font-size: .85rem; }
.hb-form-head p b { color: var(--red); }
.hb-form-body { padding: 4px 40px 36px; }
.hb .bf-field input:not([type=radio]):not([type=checkbox]):not([type=file]), .hb .bf-field select, .hb .bf-field textarea { border-radius: 10px; background-color: #f8fafd; border-color: #dfe7f1; }
.hb .bf-field input:focus, .hb .bf-field select:focus, .hb .bf-field textarea:focus { background-color: #fff; }
.hb .bf-submit { min-height: 50px; border-radius: 12px; font-size: .95rem; }

/* Dưới 1200px cột form quá hẹp so với phần hướng dẫn (form hụt, trống đáy) → xếp dọc: đầu xanh → form → hướng dẫn. */
@media (max-width: 1199px) {
  .hb { padding: 48px 0; }
  .hb-panel--top { padding: 32px 32px 30px; }
  .hb-panel--rest { padding: 30px 32px 32px; }
  .hb-form-head { padding: 28px 32px 18px; }
  .hb-form-body { padding: 4px 32px 32px; }
  .hb-shell { grid-template-columns: 1fr; grid-template-rows: none; grid-template-areas: "top" "form" "rest"; }
  .hb-panel--top { border-radius: 24px 24px 0 0; padding-bottom: 30px; background: linear-gradient(165deg, var(--primary) 0%, var(--primary-deep) 100%); }
  .hb .hb-form { border-radius: 0; }
  .hb-panel--rest { border-radius: 0 0 24px 24px; padding-top: 30px; background: linear-gradient(165deg, var(--primary) 0%, var(--primary-deep) 100%); }
  .hb-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .hb-steps li { flex-direction: column; gap: 8px; padding-bottom: 0; }
  .hb-steps li:not(:last-child)::before { left: 44px; right: -8px; top: 17px; bottom: auto; width: auto; height: 2px; }
  .hb-steps strong { margin-top: 0; }
  .hb-contact { grid-template-columns: minmax(0, 1fr) auto; }
}
@media (max-width: 575px) {
  .hb { padding: 32px 0; }
  .hb-shell { border-radius: 18px; }
  .hb-panel--top { border-radius: 18px 18px 0 0; padding: 26px 20px 22px; }
  .hb-panel--rest { border-radius: 0 0 18px 18px; padding: 24px 20px 26px; }
  .hb-form-head { padding: 22px 18px 14px; }
  .hb-form-ico { width: 42px; height: 42px; border-radius: 12px; }
  .hb-form-body { padding: 4px 18px 24px; }
  .hb-steps { grid-template-columns: 1fr; gap: 0; }
  .hb-steps li { flex-direction: row; gap: 12px; padding-bottom: 14px; }
  .hb-steps li:not(:last-child)::before { left: 17px; right: auto; top: 38px; bottom: 2px; width: 2px; height: auto; }
  .hb-steps strong { margin-top: 6px; }
  .hb-contact { grid-template-columns: 1fr; }
  .hb-call { justify-self: stretch; justify-content: flex-start; }
  .hb-links { flex-direction: column; }
  .hb-link > .icon { display: block; }
}

/* Nút "Đăng ký khám" ở khối Giới thiệu (2026-11-03) — đỏ (quy ước: đỏ cho Đặt lịch), cuộn tới form trên trang. Điện thoại: lên đầu, rộng cả hàng. */
.btn-pill--red { background: var(--red); color: #fff; border: 1px solid var(--red); }
.btn-pill--red:hover { background: var(--red-dark); border-color: var(--red-dark); color: #fff; }
@media (max-width: 575px) { .about-action-btns .about-book-btn { order: -1; grid-column: 1 / -1; } }

/* Hai khối nền trắng liền nhau ở trang chủ (Home/Index gắn "is-joined" cho khối sau) — bớt padding trên để khoảng trắng giữa hai khối không cộng dồn. */
.page-block.section-padding.is-joined { padding-top: 24px !important; }
@media (max-width: 575px) { .page-block.section-padding.is-joined { padding-top: 12px !important; } }

/* ═══ TIN TỨC & SỰ KIỆN trang chủ — kiểu "Tạp chí" (2026-11-03, người dùng chọn): trái tin chính ảnh lớn chữ đè, phải danh sách tin có ô ngày dạng tờ lịch.
   Vàng điểm xuyết (nhãn chuyên mục, ô ngày rê chuột); không dùng đỏ. ═══ */
.nmag { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 28px; align-items: stretch; }
.nmag.is-single { grid-template-columns: 1fr; }
.nmag-main { position: relative; display: block; min-height: 380px; border-radius: 20px; overflow: hidden; background: var(--primary-deep); color: #fff; isolation: isolate; }
.nmag-main img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; z-index: -2; }
.nmag-main::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(5, 45, 97, 0) 30%, rgba(5, 45, 97, .55) 58%, rgba(5, 45, 97, .95) 100%); }
.nmag-main:hover img { transform: scale(1.05); }
.nmag-main:hover { color: #fff; }
.nmag-main-body { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; gap: 8px; padding: 28px 30px 26px; }
.nmag-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; font-size: .8rem; }
.nmag-cat { padding: 3px 10px; border-radius: 999px; background: var(--yellow); color: var(--primary-deep); font-weight: 700; font-size: .7rem; text-transform: uppercase; letter-spacing: .4px; }
.nmag-date { display: inline-flex; align-items: center; gap: 6px; color: rgba(255, 255, 255, .85); }
.nmag-date .icon { width: 14px; height: 14px; }
.nmag-main-title { font-family: var(--font-heading); font-size: 1.25rem; font-weight: 700; line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.nmag-main-desc { color: rgba(255, 255, 255, .82); font-size: .9rem; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.nmag-more { display: inline-flex; align-items: center; gap: 6px; margin-top: 2px; font-weight: 700; font-size: .85rem; color: var(--yellow); }
.nmag-more .icon { width: 16px; height: 16px; transition: transform .25s; }
.nmag-main:hover .nmag-more .icon { transform: translateX(4px); }

.nmag-list { list-style: none; margin: 0; padding: 6px 24px; display: flex; flex-direction: column; border: 1px solid var(--border-light); border-radius: 20px; background: #fff; }
.nmag-list li { flex: 1; display: flex; }
.nmag-list li + li { border-top: 1px dashed var(--border); }
.nmag-item { flex: 1; display: flex; align-items: center; gap: 14px; padding: 16px 0; color: var(--text-dark); }
.nmag-cal { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 52px; height: 56px; border-radius: 12px;
  background: var(--bg-soft); border: 1px solid #dbe6f3; color: var(--primary); transition: background .25s, border-color .25s, color .25s; }
.nmag-cal b { font-family: var(--font-heading); font-size: 1.2rem; font-weight: 800; line-height: 1; }
.nmag-cal small { margin-top: 3px; font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--text-muted); }
.nmag-item:hover .nmag-cal { background: var(--yellow); border-color: var(--yellow); color: var(--primary-deep); }
.nmag-item:hover .nmag-cal small { color: var(--primary-deep); }
.nmag-item-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.nmag-item-cat { font-size: .68rem; font-weight: 700; color: var(--primary); text-transform: uppercase; letter-spacing: .5px; }
.nmag-item-title { font-size: .9rem; font-weight: 600; line-height: 1.5; color: var(--text-dark); transition: color .2s;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.nmag-item:hover .nmag-item-title { color: var(--primary); }
.nmag-thumb { flex: 0 0 auto; width: 76px; height: 76px; border-radius: 12px; overflow: hidden; background: var(--bg-soft); }
.nmag-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.nmag-item:hover .nmag-thumb img { transform: scale(1.08); }

@media (max-width: 991px) {
  .nmag { grid-template-columns: 1fr; gap: 20px; }
  .nmag-main { min-height: 0; aspect-ratio: 16 / 10; }
}
@media (max-width: 575px) {
  .nmag-main { aspect-ratio: 4 / 3; border-radius: 16px; }
  .nmag-main-body { padding: 18px 16px 16px; gap: 6px; }
  .nmag-main-title { font-size: 1rem; line-height: 1.4; }
  .nmag-meta { font-size: .72rem; }
  .nmag-cat { font-size: .62rem; padding: 2px 8px; }
  .nmag-more { font-size: .78rem; }
  .nmag-main-desc { display: none; }
  .nmag-list { padding: 2px 16px; border-radius: 16px; }
  .nmag-item { gap: 12px; padding: 14px 0; }
  .nmag-cal { width: 44px; height: 48px; border-radius: 10px; }
  .nmag-cal b { font-size: 1rem; }
  .nmag-cal small { font-size: .6rem; }
  .nmag-item-cat { font-size: .62rem; }
  .nmag-thumb { width: 60px; height: 60px; border-radius: 10px; }
  .nmag-item-title { font-size: .82rem; line-height: 1.45; }
}

/* ═══ VIDEO trang chủ — kiểu "Rạp chiếu + danh sách" (2026-11-03, người dùng chọn): cả khối nền xanh đậm, trái khung phát 16:9 phát tại chỗ, phải danh
   sách phát (đang phát: viền + chữ vàng). Đỏ không dùng; vàng điểm xuyết (nút play, đang phát). ═══ */
.video-section { background: radial-gradient(120% 90% at 85% 0%, color-mix(in srgb, var(--primary) 70%, var(--primary-deep)) 0%, var(--primary-deep) 60%); color: #fff; }
.video-section .header-box .title { color: #fff; }
.video-section .header-box .cont { color: rgba(255, 255, 255, .75); }
.video-section .header-box .title.has-after::after { background: linear-gradient(90deg, #fff 0 70%, var(--yellow) 70% 100%); }
.video-section .btn-outline-view { color: #fff; border-color: rgba(255, 255, 255, .5); }
.video-section .btn-outline-view:hover { background: #fff; color: var(--primary-deep); }
.vcin { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 24px; align-items: stretch; }
.vcin.is-single { grid-template-columns: minmax(0, 1fr); max-width: 960px; margin: 0 auto; }
.vcin-player { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 18px; overflow: hidden; background: #000; box-shadow: 0 24px 50px -24px rgba(0, 0, 0, .6); }
.vcin-player img { width: 100%; height: 100%; object-fit: cover; opacity: .88; transition: opacity .3s, transform .6s; }
.vcin-player:hover img { opacity: 1; transform: scale(1.02); }
.vcin-play { position: absolute; top: 50%; left: 50%; display: inline-flex; align-items: center; justify-content: center; width: 78px; height: 78px; margin: -39px 0 0 -39px;
  border-radius: 50%; background: var(--yellow); color: var(--primary-deep); box-shadow: 0 0 0 10px rgba(252, 202, 19, .25); transition: transform .25s, box-shadow .25s; }
.vcin-play .icon { width: 28px; height: 28px; margin-left: 4px; }
.vcin-player:hover .vcin-play { transform: scale(1.08); box-shadow: 0 0 0 16px rgba(252, 202, 19, .18); }
.vcin-player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.vcin-player.is-playing img, .vcin-player.is-playing .vcin-play { display: none; }
.vcin-info { padding: 18px 4px 0; }
.vcin-title { margin: 0 0 6px; color: #fff; font-size: 1.2rem; font-weight: 700; line-height: 1.4; }
.vcin-desc { margin: 0; color: rgba(255, 255, 255, .75); font-size: .9rem; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.vcin-list { position: relative; min-height: 240px; border-radius: 18px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); }
.vcin-list-in { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 16px; }
.vcin-list-head { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; padding: 0 4px; color: #fff; font-size: .82rem; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; }
.vcin-list-head .icon { width: 16px; height: 16px; color: var(--yellow); }
.vcin-list-head span { margin-left: auto; min-width: 24px; height: 22px; padding: 0 7px; border-radius: 999px; background: rgba(255, 255, 255, .14); font-size: .75rem; line-height: 22px; text-align: center; }
.vcin-items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.3) transparent; }
.vcin-item { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: 12px; border: 1px solid transparent; color: #fff; transition: background .2s, border-color .2s; }
.vcin-item:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.vcin-item.is-active { background: rgba(252, 202, 19, .1); border-color: rgba(252, 202, 19, .55); }
.vcin-thumb { position: relative; flex: 0 0 auto; width: 120px; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; background: rgba(0, 0, 0, .3); }
.vcin-thumb img { width: 100%; height: 100%; object-fit: cover; }
.vcin-len { position: absolute; right: 5px; bottom: 5px; padding: 1px 5px; border-radius: 4px; background: rgba(0, 0, 0, .75); font-size: .68rem; font-weight: 600; }
.vcin-item-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.vcin-now { display: none; align-items: center; gap: 4px; color: var(--yellow); font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; }
.vcin-now .icon { width: 10px; height: 10px; }
.vcin-item.is-active .vcin-now { display: inline-flex; }
.vcin-item-title { font-size: .86rem; font-weight: 600; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

@media (max-width: 991px) {
  .vcin { grid-template-columns: 1fr; gap: 18px; }
  .vcin-list { min-height: 0; }
  .vcin-list-in { position: static; }
}
@media (max-width: 575px) {
  .vcin-player { border-radius: 14px; }
  .vcin-play { width: 58px; height: 58px; margin: -29px 0 0 -29px; box-shadow: 0 0 0 7px rgba(252, 202, 19, .25); }
  .vcin-play .icon { width: 22px; height: 22px; }
  .vcin-info { padding-top: 12px; }
  .vcin-title { font-size: 1rem; }
  .vcin-desc { font-size: .82rem; }
  .vcin-list { border-radius: 14px; }
  .vcin-list-in { padding: 10px; }
  .vcin-thumb { width: 96px; }
  .vcin-item-title { font-size: .8rem; }
}

/* Hộp xem ảnh (2026-11-03 — người dùng: "bỏ background tròn khỏi button close và popup phải có thumb"): nút ✕ chỉ còn biểu tượng (vàng khi rê);
   dải ảnh nhỏ ở đáy — ảnh đang xem viền vàng, ảnh khác mờ; ảnh lớn nhường chỗ cho dải. Điện thoại: ‹ › về hai bên giữa màn (đáy là dải ảnh nhỏ). */
.lb { padding-bottom: 116px; background: #031228; }
.lb-close { width: 40px; height: 40px; border-radius: 0; background: transparent; }
.lb-close:hover { background: transparent; color: var(--yellow); }
.lb-close .icon { width: 28px; height: 28px; }
/* Khung ảnh lớn CỐ ĐỊNH 4:3 nền trắng (người dùng 2026-11-03): khung .lb-frame riêng, ảnh ở giữa giữ CỠ THẬT — chỉ thu nhỏ khi to hơn khung
   (max-width / max-height 100%), KHÔNG phóng to ảnh nhỏ ("muốn max width chứ không ép 100%"). Mọi ảnh cùng một khung → chuyển ảnh không nhảy cỡ. */
.lb-frame { display: flex; align-items: center; justify-content: center; width: min(92vw, calc((100vh - 220px) * 4 / 3), 1100px); aspect-ratio: 4 / 3;
  padding: 16px; background: #fff; border-radius: 12px; }
.lb-fig .lb-frame img { display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; border-radius: 0; object-fit: contain; }
.lb-thumbs { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); display: flex; gap: 8px; max-width: calc(100% - 32px); padding: 4px;
  overflow-x: auto; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .3) transparent; }
.lb-thumbs[hidden] { display: none; }
/* Nền TRẮNG (người dùng 2026-11-03): ảnh thiết bị nền trong suốt chìm trên nền tối → thumb nền trắng, ảnh hiện trọn (contain). */
.lb-thumb { flex: 0 0 auto; width: 84px; height: 60px; padding: 4px; border: 2px solid transparent; border-radius: 8px; overflow: hidden; background: #fff;
  cursor: pointer; opacity: .82; transition: opacity .2s, border-color .2s, transform .2s; }
.lb-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.lb-thumb.is-active { transform: translateY(-2px); }
.lb-thumb:hover { opacity: 1; }
.lb-thumb.is-active { opacity: 1; border-color: var(--yellow); }
@media (max-width: 767px) {
  .lb { padding: 56px 10px 96px; }
  .lb-frame { width: min(calc(100vw - 20px), calc((100vh - 190px) * 4 / 3)); padding: 10px; border-radius: 10px; }
  .lb-prev, .lb-next { top: 50%; bottom: auto; width: 36px; height: 36px; margin-top: -18px; }
  .lb-prev { left: 6px; }
  .lb-next { right: 6px; }
  .lb-thumbs { bottom: 12px; gap: 6px; }
  .lb-thumb { width: 64px; height: 46px; border-radius: 6px; }
}

/* Thẻ Trang thiết bị — hover NHẸ (2026-11-03, người dùng: "khi hover vào hơi thô"): bỏ lớp phủ xanh đặc + nút "+" vàng to giữa thẻ; giữ dải tên ở đáy,
   thẻ nhấc nhẹ, viền xanh nhạt, ảnh phóng rất nhẹ, góc trên phải hiện nút tròn trắng nhỏ (kính lúp khi bấm mở ảnh, "+" khi thẻ có link). */
.equipment-item-card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--primary) 35%, #fff); box-shadow: 0 12px 26px -14px rgba(8, 76, 161, .35); }
.equipment-item-card:hover img { transform: scale(1.03); }
.equipment-item-card:hover .equipment-bottom-caption { opacity: 1; }
.equipment-item-overlay { inset: 0; width: auto; height: auto; background: none; align-items: flex-end; justify-content: flex-start; padding: 12px; }
.equipment-item-overlay .equipment-title { display: none; }
.equipment-item-overlay .plus-icon { width: 34px; height: 34px; margin: 0; background: #fff; color: var(--primary); border: 1px solid var(--border-light);
  box-shadow: 0 4px 12px -4px rgba(5, 45, 97, .3); transform: translateY(-4px); opacity: 0; transition: opacity .25s ease, transform .25s ease; }
.equipment-item-card:hover .equipment-item-overlay .plus-icon { transform: none; opacity: 1; }
.equipment-item-overlay .plus-icon .icon { width: 16px; height: 16px; }

/* ==========================================================================
   HỖ TRỢ TRỰC TUYẾN (2026-11-03) — CHÉP khối .osc-* trong site.css của benhviendakhoathuynguyen; bản đó ghi:
   HỖ TRỢ TRỰC TUYẾN — chép nguyên khối .osc-* của livaxvietnam (assets/css/site.css, mục 27; người
   dùng chỉ định). Map biến của livaxvietnam: --brand → --primary, --surface-muted / --border-light /
   --text / --text-muted / --fs-* → giá trị cụ thể; màu dự phòng chuyển sắc → --primary-dark.
   Thêm: ngăn kéo menu điện thoại mở (body.no-scroll) thì ẩn nút.
   ========================================================================== */
/* ── 27. Hỗ trợ trực tuyến — nút liên hệ nổi ────────────────────────────────
   Clone giao diện module hỗ trợ trực tuyến của vilacojsc. Khác bản gốc ở hai chỗ:
   dùng biến màu của dự án này (--brand / --surface-muted) thay cho --theme-color, và
   phần JS đóng/mở nằm trong main.js chứ không nhúng thẳng vào view.

   Kênh hiển thị đã được LỌC THEO NGÔN NGỮ ở phía máy chủ; hai class
   --desktop-only / --mobile-only chỉ lo phần thiết bị.                            */
.osc-fab {
    position: fixed;
    right: 22px;
    bottom: 26px;
    z-index: 900;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 14px;
    /* Vùng trống giữa nút và panel không được chặn click xuống nội dung bên dưới. */
    pointer-events: none;
}

.osc-panel {
    width: 320px;
    max-width: calc(100vw - 44px);
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .22);
    overflow: hidden;
    transform-origin: bottom right;
    transform: translateY(16px) scale(.92);
    opacity: 0;
    pointer-events: none;
    transition: opacity .22s ease, transform .24s cubic-bezier(.2, .8, .3, 1);
}
.osc-fab.osc-open .osc-panel {
    transform: translateY(0) scale(1);
    opacity: 1;
    pointer-events: auto;
}

.osc-panel__head {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 16px 18px 14px;
    color: #fff;
    /* Màu cấu hình được ghi vào --osc-accent / --osc-accent-to bởi main.js; chưa cấu hình
       thì var() rơi về màu thương hiệu, đúng như trước khi có màn hình Cấu hình. */
    background: linear-gradient(135deg,
                var(--osc-accent, var(--primary)),
                var(--osc-accent-to, var(--primary-dark)));
}
.osc-panel__head span  { font-size: 15px; font-weight: 700; }
.osc-panel__head small { font-size: 12.5px; opacity: .85; }
.osc-panel__list { padding: 6px; }

.osc-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 11px 12px;
    border-radius: 12px;
    text-decoration: none;
    transition: background .16s ease;
}
.osc-item:hover { background: #f3f4f6; }

/* Vạch ngăn thụt vào sau biểu tượng, không kẻ hết chiều ngang. */
.osc-item:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 61px;
    right: 12px;
    bottom: 0;
    height: 1px;
    background: #eef0f2;
}

.osc-item__ico {
    /* Màu nền riêng của từng kênh (--osc-item-bg) do main.js gán; không đặt thì dùng màu
       chính của khối. */
    background: var(--osc-item-bg, var(--osc-accent, var(--primary)));
    flex: none;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    box-shadow: 0 3px 10px rgba(0, 0, 0, .18);
}
.osc-item__ico img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.osc-item__ico .icon { width: 22px; height: 22px; }

.osc-item__text { flex: 1 1 auto; display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.osc-item__text b     { font-size: 14.5px; font-weight: 700; color: #1f2430; }
.osc-item__text small { font-size: 12.5px; font-weight: 600; color: #6b7280; letter-spacing: .2px; }

.osc-item > .icon:last-child {
    flex: none;
    width: 16px;
    height: 16px;
    color: #c2c7cf;
    transition: transform .16s ease, color .16s ease;
}
.osc-item:hover > .icon:last-child { color: var(--osc-accent, var(--primary)); transform: translateX(3px); }

@media (max-width: 767.98px) { .osc-item--desktop-only { display: none; } }
@media (min-width: 768px)    { .osc-item--mobile-only  { display: none; } }

.osc-toggle {
    position: relative;
    width: 58px;
    height: 58px;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    pointer-events: auto;
    color: #fff;
    background: var(--osc-accent, var(--primary));
    box-shadow: 0 6px 20px rgba(12, 72, 161, .45);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .2s ease, background .2s ease;
}
.osc-toggle:hover { transform: scale(1.06); }

/* Vòng sóng lan toả khi panel đang đóng — dấu hiệu mời bấm. */
.osc-toggle::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    box-shadow: 0 0 0 0 rgba(12, 72, 161, .5);
    animation: oscPulse 2s ease-out infinite;
    pointer-events: none;
}
@keyframes oscPulse { to { box-shadow: 0 0 0 18px rgba(12, 72, 161, 0); } }

.osc-toggle__open,
.osc-toggle__close {
    position: absolute;
    display: flex;
    transition: opacity .2s ease, transform .25s ease;
}
.osc-toggle .icon { width: 26px; height: 26px; }
.osc-toggle__close { opacity: 0; transform: rotate(-90deg) scale(.6); }

.osc-fab.osc-open .osc-toggle          { background: #6b7280; box-shadow: 0 6px 20px rgba(0, 0, 0, .3); }
.osc-fab.osc-open .osc-toggle::before  { animation: none; opacity: 0; }
.osc-fab.osc-open .osc-toggle__open    { opacity: 0; transform: rotate(90deg) scale(.6); }
.osc-fab.osc-open .osc-toggle__close   { opacity: 1; transform: rotate(0) scale(1); }

@media (max-width: 575px) {
    .osc-fab { right: 16px; bottom: 18px; }
    .osc-toggle { width: 52px; height: 52px; }
}

/* Người dùng đã tắt hiệu ứng chuyển động thì bỏ vòng sóng — nó lặp vô hạn. */
@media (prefers-reduced-motion: reduce) {
    .osc-toggle::before { animation: none; }
}
body.no-scroll .osc-fab { display: none !important; }


/* ── Gói dịch vụ của khoa (trang chi tiết, 2026-11-03) — CHÉP khối .sp-pkg-* của site.css benhviendakhoathuynguyen; biến màu đổi sang biến của dự án,
   "Tiết kiệm" / "+ N dịch vụ khác" xanh thay đỏ (quy ước: đỏ CHỈ Hotline + Đặt lịch — nút "Đặt lịch ngay" giữ đỏ). ── */
.specialty-packages-section { background: #fff; }
.specialty-packages-section .header-box.text-center { text-align: center; }
.specialty-packages-section .header-box.text-center .cont { max-width: 720px; margin-left: auto; margin-right: auto; }
.sp-pkg-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: stretch; }
@media (max-width: 991px) { .sp-pkg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } }
@media (max-width: 767px) { .sp-pkg-grid { grid-template-columns: 1fr; gap: 16px; } }
.sp-pkg-card {
  position: relative; display: flex; flex-direction: column; padding: 26px 22px 22px; overflow: hidden;
  background: #fff; border-radius: 14px; box-shadow: 0 4px 18px rgba(15, 23, 42, .07); transition: transform .3s ease, box-shadow .3s ease;
}
.sp-pkg-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: linear-gradient(90deg, var(--red), var(--primary)); }
.sp-pkg-card:hover { transform: translateY(-5px); box-shadow: 0 14px 30px rgba(15, 23, 42, .13); }
.sp-pkg-badge {
  position: absolute; top: 16px; right: 16px; display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px;
  background: var(--red); color: #fff; font-size: .7rem; font-weight: 700; letter-spacing: .2px;
}
.sp-pkg-badge .icon { width: 12px; height: 12px; }
.sp-pkg-card.has-badge .sp-pkg-name { padding-right: 84px; }
.sp-pkg-name { margin: 0 0 6px; font-family: var(--font-heading); font-size: .98rem; font-weight: 700; line-height: 1.35; text-transform: uppercase; color: var(--primary); }
.sp-pkg-sub {
  margin: 0 0 14px; font-size: .82rem; line-height: 1.6; color: var(--text-muted);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.sp-pkg-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px dashed #e2e8f0; }
.sp-pkg-price-now { width: 100%; font-family: var(--font-heading); font-size: 1.5rem; font-weight: 800; line-height: 1.2; color: var(--red); }
.sp-pkg-price-old { font-size: .82rem; font-weight: 600; color: #94a3b8; text-decoration: line-through; }
.sp-pkg-save { font-size: .72rem; font-weight: 700; text-transform: uppercase; color: var(--primary); }
.sp-pkg-benefits { flex: 1; padding: 14px 14px 10px; margin-bottom: 18px; border-radius: 10px; background: var(--bg-soft); }
.sp-pkg-benefits-title { margin: 0 0 8px; font-size: .7rem; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: #94a3b8; }
.sp-pkg-benefits ul { list-style: none; margin: 0; padding: 0; }
.sp-pkg-benefits li { display: flex; align-items: flex-start; gap: 8px; padding: 4px 0; font-size: .84rem; line-height: 1.5; color: var(--text-dark); }
.sp-pkg-benefits li .icon { width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; padding: 2px; border-radius: 50%; background: #dcfce7; color: #15803d; }
.sp-pkg-more { margin: 6px 0 0; font-size: .75rem; font-weight: 700; color: var(--primary); }
.sp-pkg-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: auto; padding: 11px 16px; border-radius: 8px;
  background: var(--red); color: #fff; font-size: .85rem; font-weight: 700; text-transform: uppercase; letter-spacing: .3px;
  box-shadow: 0 4px 14px rgba(186, 20, 26, .25); transition: background .25s ease, transform .25s ease;
}
.sp-pkg-btn .icon { width: 16px; height: 16px; }
.sp-pkg-btn:hover { color: #fff; background: var(--red-dark); transform: translateY(-1px); }
.sp-pkg-card:not(:has(.sp-pkg-benefits)) .sp-pkg-price { flex: 1; align-content: flex-start; }

/* Thẻ cuối bài viết (2026-11-03) → /tag/{slug}: viên nền lam nhạt, rê chuột xanh đậm. */
/* Tham vấn chuyên môn + Nguồn tham khảo cuối bài (2026-11-10 — News/Detail.cshtml). */
.nw-review { margin-top: 28px; padding: 16px 18px; border: 1px solid var(--border); border-left: 4px solid var(--primary); border-radius: 12px; background: var(--bg-soft); }
.nw-review__head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--primary); font-weight: 700; }
.nw-review__head .icon { width: 20px; height: 20px; }
.nw-review__date { margin-left: auto; color: var(--text-muted); font-size: .85rem; font-weight: 500; }
.nw-review__list { display: flex; flex-wrap: wrap; gap: 12px 24px; margin-top: 12px; }
.nw-review__doc { display: flex; align-items: center; gap: 12px; color: inherit; min-width: 0; }
.nw-review__photo { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; overflow: hidden; background: #fff; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--border); color: #b5c8e0; }
/* Ảnh bác sĩ toàn thân, nhiều khoảng trống trên đầu → phóng nhẹ quanh vùng mặt cho avatar tròn nhỏ. */
.nw-review__photo img { width: 100%; height: 100%; object-fit: cover; object-position: top center; transform: scale(1.6); transform-origin: 50% 18%; }
.nw-review__info { display: flex; flex-direction: column; min-width: 0; line-height: 1.45; }
.nw-review__info strong { color: var(--primary); font-size: .95rem; }
.nw-review__doc:hover strong { text-decoration: underline; }
.nw-review__info small { color: var(--text-muted); font-size: .82rem; }
.nw-cite { margin-top: 24px; }
.nw-cite__title { margin: 0 0 8px; font-size: 1rem; font-weight: 700; color: var(--primary); }
.nw-cite ol { margin: 0; padding-left: 20px; color: var(--text-muted); font-size: .875rem; line-height: 1.6; }
.nw-cite a { color: inherit; text-decoration: underline; word-break: break-word; }
.nw-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 24px; padding-top: 18px; border-top: 1px dashed var(--border); }
.nw-tags__label { display: inline-flex; align-items: center; gap: 6px; margin-right: 4px; font-size: .85rem; font-weight: 700; color: var(--text-dark); }
.nw-tags__label .icon { width: 15px; height: 15px; color: var(--primary); }
.nw-tag { display: inline-flex; align-items: center; padding: 4px 12px; border-radius: 999px; background: var(--bg-soft); border: 1px solid #dbe6f3;
  color: var(--primary); font-size: .82rem; font-weight: 600; transition: background .2s, color .2s, border-color .2s; }
.nw-tag:hover { background: var(--primary); border-color: var(--primary); color: #fff; }

/* Gợi ý khi gõ trong khung tìm kiếm nổi (2026-11-03): nhóm (nhãn + tổng), mỗi dòng ảnh nhỏ + tên + dòng phụ, "Xem tất cả" cuối. */
.so-results .so-label span { font-weight: 600; color: var(--primary); }
.so-hits { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 2px; }
.so-hits li { min-width: 0; }
.so-results { overflow-x: hidden; }
.so-hit { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: 10px; color: var(--text-dark); transition: background .15s; }
.so-hit:hover, .so-hit:focus-visible { background: var(--bg-soft); color: var(--text-dark); }
.so-hit-thumb { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 8px; overflow: hidden; background: var(--bg-soft); }
.so-hit-thumb img { width: 100%; height: 100%; object-fit: cover; }
.so-hit-body { min-width: 0; display: flex; flex-direction: column; }
.so-hit-body b { font-size: .92rem; font-weight: 600; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.so-hit-body small { font-size: .78rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.so-hit:hover b { color: var(--primary); }
.so-viewall { display: block; margin: 4px 8px 8px; padding: 10px 12px; border-radius: 10px; background: var(--bg-soft); color: var(--primary); font-size: .88rem; font-weight: 700; text-align: center; }
.so-viewall:hover { background: var(--primary); color: #fff; }
.so-status { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 24px 8px; margin: 0; color: var(--text-muted); font-size: .9rem; }
.so-spin { width: 18px; height: 18px; border: 2px solid var(--border); border-top-color: var(--primary); border-radius: 50%; animation: soSpin .7s linear infinite; }
@keyframes soSpin { to { transform: rotate(360deg); } }

/* ═══ POPUP THÔNG BÁO (dựng mới 2026-11-11 — module admin "Popup thông báo"; site.js khối "POPUP THÔNG BÁO"). Hộp giữa màn hình theo khung popup
   chỉ đường (.cdir-*): nền mờ, thẻ trắng bo 14px, viền đầu xanh; ĐỎ chỉ dành cho Hotline / Đặt lịch nên nút popup dùng xanh chính. Thanh đầu
   trang: dải xanh đậm chữ trắng, tiêu đề vàng (điểm xuyết). ═══ */
.spn-modal { position: fixed; inset: 0; z-index: 2100; display: flex; align-items: center; justify-content: center; padding: 16px; }
.spn-backdrop { position: absolute; inset: 0; background: rgba(2, 6, 23, .6); backdrop-filter: blur(3px); animation: spnFade .2s ease-out; }
.spn-dialog { position: relative; width: 100%; max-width: 520px; max-height: 90vh; overflow: auto; background: #fff; border-radius: 14px;
  border-top: 4px solid var(--primary); box-shadow: 0 24px 60px rgba(0, 0, 0, .3); animation: spnIn .25s ease-out; }
.spn-dialog:focus { outline: none; }
.spn-close { position: absolute; top: 10px; right: 10px; z-index: 1; display: flex; padding: 6px; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(255, 255, 255, .9); color: var(--text-dark); transition: transform .2s, color .2s; }
.spn-close:hover { transform: rotate(90deg); color: var(--primary); }
.spn-img { display: block; width: 100%; max-height: 280px; object-fit: cover; border-radius: 10px 10px 0 0; }
.spn-body { padding: 26px 28px 28px; text-align: center; }
.spn-title { margin: 0 0 12px; padding: 0 20px; font-family: var(--font-heading); font-size: 1.45rem; font-weight: 800; line-height: 1.25; color: var(--primary); }
.spn-text { margin: 0 0 10px; font-size: .97rem; line-height: 1.65; color: var(--text); }
.spn-btn { display: inline-flex; align-items: center; justify-content: center; margin-top: 10px; min-height: 44px; padding: 0 26px; border-radius: 999px;
  background: var(--primary); color: #fff; font-weight: 700; text-decoration: none; transition: background .2s; }
.spn-btn:hover { background: var(--primary-dark); color: #fff; }
@keyframes spnIn { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes spnFade { from { opacity: 0; } to { opacity: 1; } }

.spn-bar { position: relative; z-index: 1001; background: var(--primary-deep); color: #fff; font-size: .9rem; }
.spn-bar-inner { display: flex; align-items: center; gap: 14px; min-height: 44px; padding-top: 8px; padding-bottom: 8px; }
.spn-bar-text { flex: 1; min-width: 0; margin: 0; line-height: 1.5; }
.spn-bar-text strong { color: var(--yellow); margin-right: 2px; }
.spn-bar-btn { flex-shrink: 0; padding: 5px 14px; border: 1px solid rgba(255, 255, 255, .6); border-radius: 999px; color: #fff; font-weight: 600;
  font-size: .85rem; text-decoration: none; white-space: nowrap; transition: background .2s, color .2s; }
.spn-bar-btn:hover { background: #fff; color: var(--primary-deep); }
.spn-bar-close { flex-shrink: 0; display: flex; padding: 4px; border: 0; background: none; color: #fff; cursor: pointer; opacity: .85; }
.spn-bar-close:hover { opacity: 1; }
.spn-bar-close svg { width: 18px; height: 18px; }
@media (max-width: 575px) {
  .spn-body { padding: 22px 18px; }
  .spn-title { font-size: 1.2rem; }
  .spn-bar { font-size: .82rem; }
  .spn-bar-inner { flex-wrap: wrap; gap: 6px 10px; }
  .spn-bar-text { flex-basis: calc(100% - 40px); }
}
@media (prefers-reduced-motion: reduce) { .spn-dialog, .spn-backdrop { animation: none; } }

/* CAPTCHA của form công khai (2026-11-11 — site.js window.siteCaptcha): Turnstile chạy ngầm nên ô thường trống → ẩn hẳn, chỉ chiếm chỗ khi
   Cloudflare cần khách bấm / reCAPTCHA v2. */
.form-captcha { margin: 4px 0 12px; max-width: 100%; overflow: hidden; }
.form-captcha:empty { display: none; }
.bf-actions .form-captcha { width: 100%; }
.footer-subscribe + .form-captcha, .form-captcha + [data-newsletter-msg] { margin-top: 8px; }