/* ==========================================================================
   site.css — CSS DUY NHẤT của trang công khai (docs/KE-HOACH.md mục 8.11: thêm CSS mới viết vào CUỐI).
   Dựng lại theo demo https://jazzy-malasada-977c08.netlify.app (assets/css/style.css) — màu, cỡ
   chữ, khoảng cách lấy từ demo; HTML/CSS viết mới, không Bootstrap / Font Awesome.
   ========================================================================== */

:root {
  --primary: #0C48A1;
  --primary-dark: #083375;
  --primary-deep: #08295b;
  --red: #BA141A;
  --red-dark: #961015;
  --text-dark: #1e293b;
  --text: #334155;
  --text-muted: #64748b;
  --border: #e2e8f0;
  --border-light: #edf2f7;
  --bg-soft: #f7f9fa;
  --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);
  /* Khối DÍNH khi cuộn chừa chỗ cho đầu trang dính (.site-header = thanh trên + thanh menu): site.js đo chiều cao thật vào
     --site-header-h (đổi cỡ màn hình thì đo lại); chưa đo được thì 108px. Người dùng 2026-10-10: form lịch khám dính sát lề. */
  --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(--red); }
img { max-width: 100%; display: block; }
ul { list-style: none; }
button { font: inherit; }
.icon { width: 1em; height: 1em; flex-shrink: 0; }

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

/* ==========================================================================
   HEADER — thanh trên cùng + thanh menu, cùng dính khi cuộn (demo .master-header-sticky)
   ========================================================================== */
.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(--text); }
.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(--text-muted); }
.topbar-item:hover { color: var(--primary); }
.topbar-item.is-emergency, .topbar-item.is-emergency .icon { color: var(--red); font-weight: 700; }
.topbar-sep { color: #cbd5e1; }
.lang-switch { display: flex; align-items: center; gap: 6px; margin-left: 6px; padding-left: 10px; border-left: 1px solid #cbd5e1; }
.lang-flag { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 19px; border: 1.5px solid transparent; border-radius: 3px; overflow: hidden; box-shadow: 0 1px 3px rgba(0, 0, 0, .15); opacity: .7; font-size: .6rem; font-weight: 700; color: var(--text); background: #fff; }
.lang-flag img { width: 100%; height: 100%; object-fit: cover; }
.lang-flag:hover { transform: scale(1.15); opacity: 1; }
.lang-flag.is-active { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(12, 72, 161, .25), 0 2px 4px rgba(0, 0, 0, .2); opacity: 1; transform: scale(1.08); }

/* 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 > a { 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; }
.nav-item > a::before { content: ""; position: absolute; bottom: 0; left: 8px; right: 8px; height: 3px; background: var(--red); transform: scaleX(0); transition: transform .25s ease; }
.nav-item:hover > a, .nav-item.is-active > a { background: rgba(255, 255, 255, .1); color: #fff; }
.nav-item:hover > a::before, .nav-item.is-active > a::before { transform: scaleX(1); }
/* Mục có dropdown / mega: khung xổ ra đã có viền đỏ phía trên — rê chuột thì KHÔNG gạch chân nữa. */
.nav-item.has-dropdown:hover > a::before, .nav-item.has-mega:hover > a::before { transform: scaleX(0); }
.nav-item.is-highlight > a { color: #ffe4e6; font-weight: 800; }
.nav-icon { width: 18px; height: 18px; object-fit: contain; }
.nav-caret { width: .8rem; height: .8rem; transition: transform .2s ease; }
.nav-item:hover .nav-caret { transform: rotate(180deg); }

/* Dropdown (demo .dropdown-menu-hospital) */
.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(--red); 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 { 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; }
/* Mũi tên đỏ hiện khi rê chuột — demo dùng Font Awesome chevron-right (054, 0.65rem, left 14px);
   ở đây là SVG (chevron nét đậm) tô màu bằng mask để đổi màu theo biến --red. */
.nav-dropdown a::before {
  content: ""; position: absolute; left: 13px; top: 50%; width: 10px; height: 10px; transform: translateY(-50%);
  background-color: var(--red); 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: #f0f7ff; color: var(--primary); padding-left: 26px; }
.nav-dropdown a:hover::before { opacity: 1; }

/* Mega menu — tràn hết bề ngang thanh menu */
.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(--red); padding: 22px 0; opacity: 0; visibility: hidden; transform: translateY(15px); transition: all .25s ease; z-index: 1000; }
.nav-item:hover .nav-mega { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-mega-grid { display: grid; gap: 24px; }
.nav-mega-col { min-width: 0; }
.nav-mega-title { font-family: var(--font-heading); font-weight: 800; font-size: .92rem; color: var(--primary); text-transform: uppercase; padding-bottom: 6px; margin-bottom: 6px; border-bottom: 1px solid var(--border); }
.nav-mega-col a { display: block; position: relative; padding: 5px 0; font-size: .88rem; color: var(--text-dark); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-mega-col a:hover { color: var(--primary); padding-left: 16px; }
/* Cùng mũi tên đỏ của dropdown (SVG mask) — hiện khi rê chuột. */
.nav-mega-col a::before {
  content: ""; position: absolute; left: 0; top: 50%; width: 10px; height: 10px; transform: translateY(-50%);
  background-color: var(--red); 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-mega-col a:hover::before { opacity: 1; }

/* Công cụ bên phải: tìm kiếm + nút ☰ */
.menubar-tools { display: flex; align-items: center; gap: 12px; margin-left: 12px; }
.menu-search { position: relative; display: flex; align-items: center; }
.menu-search input { background: rgba(255, 255, 255, .15); border: 1px solid rgba(255, 255, 255, .3); border-radius: 20px; padding: 9px 38px 9px 16px; color: #fff; font-size: .88rem; width: 180px; transition: width .3s ease, background .3s ease; }
.menu-search input::placeholder { color: rgba(255, 255, 255, .7); }
.menu-search input:focus { outline: none; background: #fff; color: var(--text-dark); width: 230px; }
.menu-search button { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); background: none; border: none; color: #fff; cursor: pointer; display: flex; font-size: .9rem; }
.menu-search input:focus ~ button { color: var(--primary); }
.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: var(--red); }
.btn-extend .icon-close, .btn-extend.is-open .icon-open { display: none; }
.btn-extend.is-open .icon-close { display: flex; }
.btn-extend span { display: flex; }

/* Khối Mở rộng ☰ (demo .menuextend-drawer) */
.extend-drawer { position: absolute; top: 100%; left: 0; right: 0; background: var(--primary-deep); box-shadow: 0 15px 35px rgba(0, 0, 0, .25); padding: 24px 0; display: none; border-top: 1px solid rgba(255, 255, 255, .1); z-index: 998; }
.extend-drawer.is-open { display: block; animation: fadeDown .3s ease; }
.extend-grid { display: grid; gap: 24px; }
.extend-col-title { font-size: .95rem; font-weight: 800; color: #fff; text-transform: uppercase; margin-bottom: 12px; padding-bottom: 6px; border-bottom: 1px solid rgba(255, 255, 255, .2); letter-spacing: .3px; }
.extend-links a { display: block; color: rgba(255, 255, 255, .88); font-size: .86rem; padding: 5px 0; }
.extend-links a:hover { color: #fff; padding-left: 6px; }
.extend-links a.is-call { display: block; margin-top: 4px; padding: 7px 12px; border-radius: 4px; background: #dc3545; color: #fff; font-weight: 700; text-align: center; }
.extend-links a.is-call:hover { background: var(--red-dark); padding-left: 12px; }
@keyframes fadeDown { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* ── Điện thoại (demo .mobile-navbar-bar / .mobile-drawer) ─────────────── */
.mobile-bar { display: none; position: sticky; top: 0; z-index: 1000; background: #fff; padding: 0 16px; height: 64px; box-shadow: 0 2px 10px rgba(0, 0, 0, .08); align-items: center; justify-content: space-between; gap: 8px; }
.mobile-toggle { background: none; border: none; font-size: 1.5rem; color: var(--primary); cursor: pointer; padding: 6px; display: flex; }
.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%; }
.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; }
.mobile-call { width: 42px; height: 42px; border-radius: 50%; background: var(--red); color: #fff; display: flex; align-items: center; justify-content: center; font-size: .95rem; box-shadow: 0 3px 8px rgba(186, 20, 26, .35); flex-shrink: 0; }
.mobile-call:hover { color: #fff; }

.btn-emergency { display: flex; align-items: center; justify-content: center; gap: 6px; background: #dc3545; color: #fff; font-weight: 700; font-size: .85rem; padding: 8px 12px; border-radius: 4px; margin-bottom: 8px; }
.btn-emergency:hover { color: #fff; background: var(--red-dark); }
body.no-scroll { overflow: hidden; }

/* Màn nhỏ: ẩn header máy tính, hiện thanh điện thoại (demo: max-width 991px) */
/* Chữ menu to hơn (header cao hơn) → ẩn ô tìm kiếm sớm hơn, thu đệm ở màn hẹp để không tràn. */
@media (max-width: 1299px) { .menu-search { display: none; } }
@media (max-width: 1199px) {
  .nav-item > a { padding: 18px 7px; font-size: .8rem; }
  .menubar-logo { padding-right: 12px; margin-right: 8px; }
  .menubar-logo span { max-width: 140px; font-size: .7rem; }
}
@media (max-width: 991px) {
  .site-header { display: none; }
  .mobile-bar { display: flex; }
}

/* ==========================================================================
   FOOTER (demo .hospital-footer)
   ========================================================================== */
.site-footer { background: var(--bg-soft); color: var(--text); font-size: .88rem; border-top: 1px solid var(--border); padding-top: 50px; }
.footer-grid { display: grid; grid-template-columns: 5fr 3fr 3fr; gap: 32px; justify-content: space-between; }
.footer-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; color: var(--primary); }
.footer-brand img { height: 48px; width: auto; }
.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: var(--primary); }
.footer-info p { line-height: 1.6; font-size: .86rem; margin-bottom: 8px; }
.footer-info a:hover { text-decoration: underline; }
.footer-phone { font-weight: 700; }
.footer-muted { font-size: .8rem; color: var(--text-muted); }
.footer-emergency { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; background: var(--red); color: #fff; font-weight: 800; font-size: .88rem; padding: 9px 24px; border-radius: 30px; text-transform: uppercase; letter-spacing: .3px; box-shadow: 0 4px 12px rgba(186, 20, 26, .25); }
.footer-emergency:hover { background: var(--red-dark); color: #fff; transform: translateY(-2px); box-shadow: 0 6px 18px rgba(186, 20, 26, .35); }
.footer-heading { font-family: var(--font-heading); font-size: .95rem; font-weight: 800; color: var(--text-dark); text-transform: uppercase; margin-bottom: 16px; letter-spacing: .4px; }
.footer-hours-day { margin-bottom: 10px; }
.footer-hours-name { font-weight: 700; color: var(--text-dark); }
.footer-hours-shift { color: var(--text-muted); }
.footer-hours-shift span { color: var(--text); }
.footer-social { display: flex; flex-wrap: wrap; gap: 10px; }
.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; }
.footer-social a:hover { color: #fff; transform: translateY(-3px) scale(1.08); }
.social-text { font-size: .62rem; font-weight: 800; letter-spacing: .2px; }
/* Liên kết nhanh + đăng ký nhận tin — chép demo .footer-quick-links / .footer-subscribe-form. */
.footer-social { margin-bottom: 16px; }
.footer-quick-links { list-style: none; padding: 0; margin: 0 0 24px; }
.footer-quick-links li { margin-bottom: 6px; }
.footer-quick-links li a { color: #475569; font-size: .86rem; text-decoration: none; transition: color .2s ease; }
.footer-quick-links li a:hover { color: var(--primary-blue, var(--primary)); text-decoration: underline; }
.footer-heading-newsletter { margin-bottom: 8px; line-height: 1.5; }
.footer-subscribe-form { display: flex; margin-top: 10px; max-width: 320px; }
.footer-subscribe-input { background: #fff; border: 1px solid #cbd5e1; border-right: none; border-radius: 4px 0 0 4px; padding: 9px 14px; color: #1e293b; font-size: .86rem; flex-grow: 1; min-width: 0; font-family: inherit; }
.footer-subscribe-input:focus { outline: none; border-color: var(--primary-blue, var(--primary)); }
.footer-subscribe-input::placeholder { color: #94a3b8; }
.footer-subscribe-btn { background-color: var(--primary-blue, var(--primary)); color: #fff; border: none; border-radius: 0 4px 4px 0; padding: 0 16px; cursor: pointer; transition: background-color .2s ease; display: flex; align-items: center; }
.footer-subscribe-btn:hover { background-color: var(--primary-blue-dark, #093a86); }
.footer-subscribe-btn[disabled] { opacity: .6; cursor: default; }
.footer-subscribe-btn .icon { width: 16px; height: 16px; }
.footer-subscribe-msg { margin-top: 8px; font-size: .82rem; max-width: 320px; }
.footer-subscribe-msg.is-ok { color: #15803d; }
.footer-subscribe-msg.is-error { color: var(--red, #dc3545); }
.footer-bottom { background: #fff; padding: 18px 0; margin-top: 45px; border-top: 1px solid var(--border); font-size: .82rem; color: var(--text-muted); }
.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: 24px; }
  .footer-grid { grid-template-columns: 1fr; gap: 16px; }
  .footer-info p { font-size: .78rem; margin-bottom: 4px; }
  .footer-heading { font-size: .88rem; margin-bottom: 8px; }
  .footer-emergency { padding: 7px 14px; font-size: .78rem; }
  .footer-bottom { margin-top: 24px; }
  .footer-bottom-inner { justify-content: center; text-align: center; }
}

/* ── Trang tạm (trang chủ chưa dựng) ──────────────────────────────────── */
.page-placeholder { padding: 80px 0; text-align: center; color: var(--text-muted); }
.page-placeholder h1 { font-size: 1.6rem; margin-bottom: 8px; }

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


/* ==========================================================================
   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; }

/* ==========================================================================
   TRANG CHỦ — dựng từ Giao diện trang chủ (admin/trang-chu/giao-dien). Phần 1: CHÉP NGUYÊN CSS các
   section của demo style.css (header-box, slider, Section 1–9). Phần 2: lưới hàng / ô và danh sách
   lưới / slide theo cấu hình ô — không có trong demo (demo cố định số cột từng section).
   ========================================================================== */

/* Biến của demo (:root style.css) — CSS chép bên dưới dùng nguyên tên biến gốc. */
:root {
  --primary-blue: #0C48A1;
  --primary-blue-dark: #083375;
  --primary-blue-light: #1D68B8;
  --medical-teal: #0C48A1;
  --primary-red: #BA141A;
  --primary-red-dark: #910c11;
  --primary-red-light: #ea0000;
  --accent-gold: #f59e0b;
  --text-main: #334155;
  --bg-light: #f8fafc;
  --border-color: #e2e8f0;
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --font-body: var(--font-main);
}

/* ── demo: section-padding + .header-box (demo dòng 104–172) ── */
.section-padding {
  padding: 60px 0;
}

@media (max-width: 768px) {
  .section-padding {
    padding: 40px 0;
  }
}

/* Standard Section Title matching hopluchospital */
.header-box {
  margin-bottom: 2rem;
  position: relative;
}

.header-box .title {
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--primary-blue);
  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-red), var(--primary-blue));
  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(--primary-red), #ffffff);
}

.header-box .title.red {
  color: var(--primary-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);
}


/* ── demo: HERO BANNER CAROUSEL (demo dòng 926–1088) ── */
/* ==========================================================================
   HERO BANNER CAROUSEL (FULL WIDTH EDGE-TO-EDGE - GỌN HƠN 100PX)
   ========================================================================== */

.hero-slider-section {
  position: relative;
  overflow: hidden;
  background-color: var(--primary-blue);
  width: 100%;
  margin: 0;
  padding: 0;
}

.slider-container {
  position: relative;
  width: 100%;
  max-width: 100%;
  height: 600px;
  max-height: 600px;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.slider-track {
  display: flex;
  transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
  width: 100%;
  height: 100%;
}

.slide-item {
  min-width: 100%;
  width: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--primary-blue);
  height: 600px;
  overflow: hidden;
}

.slide-item a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.slide-banner-img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center center !important;
  display: block !important;
  user-select: none;
}

@media (max-width: 1399px) and (min-width: 1200px) {
  .slider-container,
  .slide-item {
    height: 520px !important;
    max-height: 520px !important;
  }
}

@media (max-width: 1199px) and (min-width: 992px) {
  .slider-container,
  .slide-item {
    height: 440px !important;
    max-height: 440px !important;
  }
}

@media (max-width: 991px) and (min-width: 769px) {
  .slider-container,
  .slide-item {
    height: 360px !important;
    max-height: 360px !important;
  }
}

@media (max-width: 768px) {
  .slider-container,
  .slide-item {
    height: auto !important;
    aspect-ratio: 1920 / 600 !important;
    max-height: none !important;
  }
  .slide-banner-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }
}

/* Slider Controls */
.slider-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(4px);
  color: #ffffff;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  cursor: pointer;
  z-index: 10;
  transition: var(--transition);
}

.slider-arrow:hover {
  background-color: var(--primary-blue);
  color: #ffffff;
  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%);
  display: flex;
  gap: 8px;
  z-index: 10;
}

.slider-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(0, 0, 0, 0.2);
  cursor: pointer;
  transition: all 0.3s ease;
}

.slider-dot.active {
  background-color: var(--primary-red);
  width: 28px;
  border-radius: 6px;
  border-color: var(--primary-red);
}

.slider-dot.active {
  width: 30px;
  border-radius: 6px;
  background-color: var(--primary-red);
}


/* ── demo: SECTION 1–9 (demo dòng 1089–2598) ── */
/* ==========================================================================
   SECTION 1: APPOINTMENT FORM & CLIENT QUICK SERVICES
   ========================================================================== */

.register-links {
  background-color: var(--bg-light);
  border-bottom: 1px solid var(--border-color);
}

.form-home-container {
  background: #0C48A1;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(12, 72, 161, 0.22);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.form-home-header {
  background: #08295B;
  padding: 10px 16px;
  color: #ffffff;
  text-align: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.form-home-header .title {
  font-size: 1.08rem;
  font-weight: 800;
  text-transform: uppercase;
  margin-bottom: 2px;
  letter-spacing: 0.3px;
  color: #ffffff;
}

.form-home-header .subtitle {
  font-size: 0.74rem;
  color: rgba(255, 255, 255, 0.88);
}

.form-home-body {
  background: #0C48A1;
  padding: 14px 18px 16px;
}

.form-home-body .form-group {
  margin-bottom: 8px;
}

.form-home-body label {
  font-size: 0.76rem;
  font-weight: 700;
  color: #ffffff !important;
  margin-bottom: 2px;
  display: block;
}

.form-home-body label.required::after {
  content: " *";
  color: #fecaca;
  font-weight: 900;
}

.form-home-body .form-control {
  background-color: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  font-size: 0.82rem;
  padding: 5px 10px;
  height: 34px;
  width: 100%;
  color: #0f172a;
  transition: var(--transition);
}

.form-home-body textarea.form-control {
  height: 42px;
  min-height: 42px;
  resize: none;
}

.form-home-body .form-control:focus {
  border-color: var(--primary-red);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.35);
  outline: none;
}

.btn-form-submit {
  background: linear-gradient(135deg, var(--primary-red) 0%, var(--primary-red-dark) 100%);
  color: #ffffff !important;
  border: none;
  font-weight: 700;
  font-size: 0.88rem;
  text-transform: uppercase;
  padding: 8px 18px;
  border-radius: 6px;
  width: 100%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 4px 12px rgba(186, 20, 26, 0.35);
  transition: var(--transition);
  margin-top: 6px;
}

.btn-form-submit:hover {
  background: linear-gradient(135deg, var(--primary-red-light) 0%, var(--primary-red) 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(186, 20, 26, 0.5);
}

/* 6 Quick Client Action Cards */
.home-quick-links-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

@media (max-width: 576px) {
  .home-quick-links-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
}

.quick-action-card {
  background: #0C48A1;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  padding: 22px 14px;
  text-align: center;
  transition: var(--transition);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 35px rgba(12, 72, 161, 0.25);
  position: relative;
  overflow: hidden;
  text-decoration: none;
}

.quick-action-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background-color: var(--primary-red);
  transform: scaleX(0);
  transition: transform 0.3s ease;
}

.quick-action-card:hover {
  transform: translateY(-5px);
  background: #08295B;
  border-color: rgba(255, 255, 255, 0.45);
  box-shadow: 0 15px 40px rgba(12, 72, 161, 0.35);
}

.quick-action-card:hover::before {
  transform: scaleX(1);
}

.quick-action-card .card-icon-wrap {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #ffffff;
  color: #0C48A1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  margin-bottom: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transition: var(--transition);
}

.quick-action-card:hover .card-icon-wrap {
  background: var(--primary-red);
  color: #ffffff;
  transform: scale(1.1);
}

.quick-action-card .card-title {
  font-size: 0.88rem;
  font-weight: 700;
  text-transform: uppercase;
  color: #ffffff !important;
  margin-bottom: 0;
  line-height: 1.35;
  transition: var(--transition);
  letter-spacing: 0.3px;
}

.quick-action-card:hover .card-title {
  color: #ffffff !important;
}

/* ==========================================================================
   SECTION 2: ABOUT HOSPITAL (GIỚI THIỆU BỆNH VIỆN)
   ========================================================================== */

.about-hospital-section {
  background-color: #ffffff;
}

.about-subtitle-tag {
  color: var(--primary-blue);
  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(12, 72, 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;
}

@keyframes aboutBoxEntrance {
  0% {
    opacity: 0;
    transform: translateY(30px) scale(0.97);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.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(12, 72, 161, 0.28);
}

.about-experience-badge {
  position: absolute;
  bottom: 24px;
  right: 24px;
  background: linear-gradient(135deg, #0C48A1 0%, #08295B 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;
}

@keyframes pulseBadge {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-4px);
  }
}

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

.about-feature-item i {
  color: var(--medical-teal);
  font-size: 1rem;
}

/* ==========================================================================
   SECTION 3: MEDICAL SERVICES & PACKAGES (CHUẨN MẪU ẢNH 2)
   ========================================================================== */

.services-packages-section {
  background-color: #f8fafc;
}

.service-card-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

@media (max-width: 991px) {
  .service-card-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }
}

@media (max-width: 768px) {
  .service-card-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .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.teal-theme .service-card-body,
.service-card-item.blue-theme .service-card-body {
  background-color: #0C48A1;
}

.service-card-item.coral-theme .service-card-body {
  background-color: #db534b;
}

.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.teal-theme .card-plus-btn,
.service-card-item.blue-theme .card-plus-btn {
  color: #0C48A1;
}

.service-card-item.coral-theme .card-plus-btn {
  color: #db534b;
}

.service-card-item:hover .card-plus-btn {
  transform: rotate(90deg) scale(1.15);
}

/* ==========================================================================
   SECTION 4: DOCTOR EXPERTS & STATS COUNTER
   ========================================================================== */

.home-team-section {
  background: linear-gradient(180deg, #092c63 0%, #061c40 100%);
  color: #ffffff;
  position: relative;
  overflow: hidden;
}

.home-team-section .title,
.home-team-section h2.title,
.home-team-section .head-counter-box .title {
  color: #ffffff !important;
}

.home-team-section .cont,
.home-team-section .head-counter-box .cont {
  color: rgba(255, 255, 255, 0.92) !important;
}

.head-counter-box {
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  padding-bottom: 16px;
}

.stats-counter-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  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;
  margin-top: 16px;
}

@media (max-width: 991px) {
  .stats-counter-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    padding: 10px 14px;
  }
}

@media (max-width: 576px) {
  .stats-counter-grid {
    grid-template-columns: repeat(5, 1fr);
    gap: 4px;
    padding: 6px 4px;
  }
}

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

/* Featured Doctor Big Card */
.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-color);
  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-blue);
  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-blue);
  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-blue);
  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 Slider List */
.doctor-mini-card-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  margin-top: 30px;
}

@media (max-width: 1100px) {
  .doctor-mini-card-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 576px) {
  .doctor-mini-card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.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-blue);
  box-shadow: 0 12px 30px rgba(12, 72, 161, 0.35);
}

.doctor-mini-card.active {
  background-color: #f0f7ff;
}

.doctor-mini-card.active .btn {
  background-color: var(--primary-blue);
  color: #ffffff;
}

.doctor-mini-avatar {
  width: 95px;
  height: 95px;
  border-radius: 12px;
  object-fit: cover;
  margin: 0 auto 10px;
  border: 3px solid var(--primary-blue);
  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-blue);
  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;
}

/* ==========================================================================
   SECTION 5: MODERN MEDICAL EQUIPMENT (TRANG THIẾT BỊ)
   ========================================================================== */

.equipment-section {
  background-color: #ffffff;
}

.equipment-section .header-box .title {
  font-family: var(--font-heading);
  font-size: 1.85rem;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--primary-blue);
  letter-spacing: 0.5px;
}

.equipment-section .header-box .cont {
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--text-main);
  line-height: 1.6;
  max-width: 850px;
}

.equipment-grid-masonry {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 25px;
}

@media (max-width: 991px) {
  .equipment-grid-masonry {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 576px) {
  .equipment-grid-masonry {
    grid-template-columns: 1fr;
  }
}

.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(12, 72, 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(12, 72, 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(--primary-red);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  margin-bottom: 12px;
  box-shadow: 0 4px 15px rgba(186, 20, 26, 0.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);
}

/* ==========================================================================
   SECTION 6: EXAMINATION PROCESS (QUY TRÌNH KHÁM BỆNH)
   ========================================================================== */

.process-section {
  background-color: var(--bg-light);
}

.process-steps-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  position: relative;
}

@media (max-width: 991px) {
  .process-steps-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 576px) {
  .process-steps-grid {
    grid-template-columns: 1fr;
  }
}

.process-step-card {
  border-radius: 12px;
  overflow: hidden;
  text-align: left;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
  display: flex;
  flex-direction: column;
}

.process-step-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.16);
}

.process-step-thumb {
  position: relative;
  height: 155px;
  overflow: hidden;
  background-color: #f1f5f9;
}

.process-step-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.process-step-card:hover .process-step-thumb img {
  transform: scale(1.08);
}

.process-step-body {
  padding: 22px 18px 20px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  color: #ffffff;
  position: relative;
}

.process-step-card.theme-teal .process-step-body,
.process-step-card.theme-blue .process-step-body {
  background-color: var(--primary-blue);
}

.process-step-card.theme-coral .process-step-body,
.process-step-card.theme-red .process-step-body {
  background-color: var(--primary-red);
}

.process-step-title {
  font-size: 1.02rem;
  font-weight: 800;
  color: #ffffff !important;
  margin-bottom: 10px;
  font-family: var(--font-heading);
  line-height: 1.35;
}

.process-step-desc {
  font-size: 0.84rem;
  color: rgba(255, 255, 255, 0.95);
  line-height: 1.55;
  margin-bottom: 24px;
  flex-grow: 1;
}

.process-step-plus-btn {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background-color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 900;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  transition: transform 0.25s ease;
}

.process-step-card.theme-teal .process-step-plus-btn,
.process-step-card.theme-blue .process-step-plus-btn {
  color: var(--primary-blue);
}

.process-step-card.theme-coral .process-step-plus-btn,
.process-step-card.theme-red .process-step-plus-btn {
  color: var(--primary-red);
}

.process-step-card:hover .process-step-plus-btn {
  transform: rotate(90deg) scale(1.15);
}

/* ==========================================================================
   SECTION 7: NEWS & EVENTS (TIN TỨC SỰ KIỆN)
   ========================================================================== */

.news-section {
  background-color: #ffffff;
}

/* 1 TIN CHÍNH (NEWS MAIN CARD) */
.news-main-card {
  background: #ffffff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-color);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  height: 100%;
}

.news-main-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.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-tag-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  background: #e53935;
  color: #ffffff;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 4px;
  z-index: 2;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.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-blue);
}

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

/* 3 TIN PHỤ (NEWS SUB GRID - 3 CỘT NẰM NGANG) */
.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-color);
  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-blue);
}

.news-sub-meta {
  font-size: 0.74rem;
}

.news-featured-card {
  background: #ffffff;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-color);
  transition: var(--transition);
  height: 100%;
}

.news-featured-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.news-featured-img {
  height: 220px;
  overflow: hidden;
  position: relative;
}

.news-featured-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.news-featured-card:hover .news-featured-img img {
  transform: scale(1.06);
}

.news-card-body {
  padding: 20px;
}

.news-card-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: 8px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.news-featured-card:hover .news-card-title {
  color: var(--primary-blue);
}

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

.news-compact-item {
  display: flex;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border-light);
  align-items: center;
}

.news-compact-item:last-child {
  border-bottom: none;
}

.news-compact-thumb {
  width: 110px;
  height: 75px;
  border-radius: 6px;
  overflow: hidden;
  flex-shrink: 0;
}

.news-compact-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.news-compact-title {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-dark);
  line-height: 1.35;
  margin-bottom: 4px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.news-compact-item:hover .news-compact-title {
  color: var(--primary-blue);
}

/* ==========================================================================
   SECTION 8: VIDEO CHANNEL (CHUẨN MẪU ẢNH 2 HOP LUC)
   ========================================================================== */

.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-blue);
  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-blue);
  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);
}

/* 3 Video Cards Row */
.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-color);
  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(12, 72, 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-blue);
}

/* Centered Pulsing Play Button */
.btn-play-video-pulse {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background-color: #BA141A;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  box-shadow: 0 0 0 6px rgba(186, 20, 26, 0.35), 0 0 0 12px rgba(186, 20, 26, 0.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(186, 20, 26, 0.45), 0 0 0 20px rgba(186, 20, 26, 0.25);
}

/* ==========================================================================
   SECTION 9: INSURANCE PARTNERS (ĐỐI TÁC BẢO HIỂM)
   ========================================================================== */

.partners-section {
  background-color: #ffffff;
}

.partners-logo-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 16px;
}

@media (max-width: 1200px) {
  .partners-logo-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
  }
}

.partner-logo-item {
  background: #ffffff;
  border: 1px solid var(--border-color);
  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-blue);
  box-shadow: 0 8px 20px rgba(12, 72, 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);
}


/* ── Phần 2: bố cục theo cấu hình (không có trong demo) ──────────────────── */

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

/* Hàng = lưới 12 cột, ô chiếm "Rộng" của nó; màn nhỏ hơn 992px mỗi ô một hàng. */
.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; } }
.cell-heading { margin-bottom: 1.25rem; }

/* Danh sách: số mục mỗi hàng / mỗi màn theo cấu hình ô (PC ≥1200 · tablet · ĐT ngang · ĐT dọc). */
.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; }

/* Slide: một dải cuộn ngang, mỗi màn đúng --n mục, bấm mũi tên cuộn một màn (site.js). */
.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-blue);  /* bỏ viền — người dùng 2026-09-28 */
  display: none; align-items: center; justify-content: center; cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .12); transition: var(--transition);
}
.hp-arrow:hover { background: var(--primary-blue); 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; } }

/* Số liệu: cả dải nằm trong hộp kính mờ như .stats-counter-grid của demo. */
.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;
}

/* Dành cho khách hàng: rê chuột CHỈ nhấc thẻ lên (transform) — không đổi màu nền, không tô đỏ vòng
   icon, không hiện vạch đỏ đầu thẻ như demo (người dùng chốt). */
.quick-action-card:hover { background: #0C48A1; border-color: rgba(255, 255, 255, 0.2); box-shadow: 0 12px 35px rgba(12, 72, 161, 0.25); }
.quick-action-card:hover::before { transform: scaleX(0); }
.quick-action-card:hover .card-icon-wrap { background: #ffffff; color: #0C48A1; transform: none; }

/* Dành cho khách hàng: icon trong vòng tròn trắng (demo dùng Font Awesome). */
.quick-action-card .card-icon-wrap .icon { width: 26px; height: 26px; }
.quick-action-card .card-icon-wrap img { width: 30px; height: 30px; object-fit: contain; }

/* Bác sĩ: thẻ là liên kết; ảnh trống thì khung icon. */
.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-blue); }
.doctor-mini-avatar.is-empty .icon { width: 42px; height: 42px; }
.doctor-mini-btn {
  display: inline-block; padding: 4px 12px; border: 1px solid var(--primary-blue); border-radius: 4px;
  font-size: .75rem; font-weight: 600; color: var(--primary-blue); transition: var(--transition);
}
.doctor-mini-card:hover .doctor-mini-btn { background: var(--primary-blue); color: #fff; }

/* Dịch vụ / Quy trình / Trang thiết bị: nút cộng dùng SVG. */
.card-plus-btn .icon, .process-step-plus-btn .icon { width: 14px; height: 14px; }
.equipment-item-overlay .plus-icon .icon { width: 20px; height: 20px; }
.service-card-img:empty, .process-step-thumb:empty { background: linear-gradient(135deg, #e8f0fb, #f1f5f9); }

/* Đối tác không có logo: tên thay ảnh. */
.partner-logo-text { font-weight: 700; color: var(--primary-blue); text-align: center; font-size: .85rem; }

/* Thẻ chung (nhóm nội dung kiểu ảnh trái / phải / nền). */
.hp-card { background: #fff; border: 1px solid var(--border-color); border-radius: 12px; overflow: hidden; height: 100%; box-shadow: var(--shadow-sm); }
.hp-card-img { aspect-ratio: 16 / 10; overflow: hidden; background: #f1f5f9; }
.hp-card-img img { width: 100%; height: 100%; object-fit: cover; }
.hp-card-body { padding: 14px 16px; }
.hp-card-title { font-size: 1rem; margin-bottom: 4px; }
.hp-card-sub { color: var(--primary-blue); font-weight: 600; font-size: .85rem; }
.hp-card-desc { color: var(--text-muted); font-size: .85rem; margin-top: 6px; }

/* Giới thiệu: ảnh 5/12 + chữ 7/12 như demo (col-lg-5 / col-lg-7). */
.about-grid { display: grid; grid-template-columns: 5fr 7fr; gap: 32px; align-items: stretch; }
.about-grid.no-image { grid-template-columns: 1fr; }
.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-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(--transition);
}
.btn-pill .icon { width: 16px; height: 16px; }
.btn-pill--blue { background: var(--primary-blue); color: #fff; }
.btn-pill--blue:hover { background: var(--primary-blue-dark); color: #fff; }
/* Bác sĩ nổi bật (demo SECTION 4): lưới Bootstrap col-lg-4 / col-lg-8 viết lại; thẻ nhỏ là <button>
   (bấm để chọn) nên bỏ kiểu nút mặc định của trình duyệt. */
.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-color); } .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(--accent-gold); 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; }
/* Đổi bác sĩ: thẻ (nền, khung) đứng yên; ruột mới QUÉT đè lên ruột cũ theo chiều bấm (clip-path, site.js)
   — hai ruột xếp chồng cùng một ô lưới nên không lúc nào lộ thẻ trống. Thay kiểu mờ + thu nhỏ cả thẻ
   của demo .fade-switching (người dùng yêu cầu 2026-09-26; bản trượt ra–vào lộ nền trắng nên bỏ). */
.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); }

/* Ảnh bác sĩ trên thẻ lớn và thẻ nhỏ CÙNG tỉ lệ 25:36 (khung demo 250×360). */
.doctor-photo-frame { height: auto; aspect-ratio: 25 / 36; }
.doctor-mini-avatar { width: 95px; height: auto; aspect-ratio: 25 / 36; object-position: top center; }

/* Ảnh lớn — demo MODAL 6 (hộp 850px nền #0f172a, đầu bg-dark không viền, thân p-4 căn giữa, ảnh rounded
   max-height 70vh). Thẻ ảnh là <button> nên bỏ kiểu nút mặc định. */
.hospital-modal-dialog.lightbox-dialog { max-width: 850px; background: #0f172a; color: #fff; }
.hospital-modal-header.lightbox-header { background: #212529; border: 0; }
.hospital-modal-header.lightbox-header .modal-title { text-transform: none; font-size: 1.1rem; }
.lightbox-body { padding: 1.5rem; text-align: center; }
.lightbox-body img { max-width: 100%; max-height: 70vh; border-radius: 6px; display: inline-block; }
/* Gallery toàn màn hình kiểu Fancybox (_MediaModals .gallery-lightbox). */
.gallery-lightbox {
  position: fixed; inset: 0; z-index: 10000; background: rgba(12, 14, 20, .96); color: #fff;
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto; animation: fadeInModal .25s ease;
}
.gallery-lightbox[hidden] { display: none; }
.gl-toolbar { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; }
.gl-counter { font-size: .9rem; color: rgba(255, 255, 255, .75); letter-spacing: .5px; padding-left: 6px; }
.gl-btn {
  border: 0; background: rgba(30, 30, 30, .55); color: #fff; width: 44px; height: 44px; border-radius: 4px;
  display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background .2s ease, opacity .2s ease;
}
.gl-btn:hover { background: rgba(60, 60, 60, .85); }
.gl-btn .icon { width: 24px; height: 24px; }
.gl-stage { position: relative; display: flex; align-items: center; justify-content: center; min-height: 0; padding: 0 72px; overflow: hidden; }
.gl-img { max-width: 100%; max-height: 100%; object-fit: contain; user-select: none; box-shadow: 0 10px 40px rgba(0, 0, 0, .5); }
.gl-img.is-in { animation: glIn .3s ease; }
@keyframes glIn { from { opacity: 0; } to { opacity: 1; } }
/* Chuyển ảnh: trượt ngang như Fancybox — ảnh cũ (.gl-ghost, bản sao đặt đúng chỗ) trượt ra, ảnh mới trượt vào. */
.gl-ghost { position: absolute; margin: 0; max-width: none; max-height: none; pointer-events: none; }
.gl-img.gl-from-right { animation: glFromRight .45s cubic-bezier(.22, .61, .36, 1); }
.gl-img.gl-from-left  { animation: glFromLeft .45s cubic-bezier(.22, .61, .36, 1); }
.gl-ghost.gl-to-left  { animation: glToLeft .45s cubic-bezier(.22, .61, .36, 1) forwards; }
.gl-ghost.gl-to-right { animation: glToRight .45s cubic-bezier(.22, .61, .36, 1) forwards; }
@keyframes glFromRight { from { transform: translateX(100vw); } to { transform: none; } }
@keyframes glFromLeft  { from { transform: translateX(-100vw); } to { transform: none; } }
@keyframes glToLeft    { to { transform: translateX(-100vw); } }
@keyframes glToRight   { to { transform: translateX(100vw); } }
.gl-nav { position: absolute; z-index: 2; top: 50%; transform: translateY(-50%); width: 50px; height: 50px; border-radius: 50%; }
.gl-nav[hidden] { display: none; }
.gl-nav.prev { left: 14px; }
.gl-nav.next { right: 14px; }
.gl-caption { text-align: center; font-size: .95rem; color: rgba(255, 255, 255, .88); padding: 12px 16px 8px; min-height: 1.5em; }
.gl-thumbs { display: flex; justify-content: center; gap: 8px; overflow-x: auto; padding: 8px 16px 16px; scrollbar-width: thin; }
.gl-thumbs[hidden] { display: none; }
.gl-thumb {
  flex: 0 0 auto; width: 88px; height: 64px; padding: 0; border: 2px solid transparent; border-radius: 4px; overflow: hidden;
  background: #1e293b; opacity: .45; cursor: pointer; transition: opacity .2s ease, border-color .2s ease;
}
.gl-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gl-thumb:hover { opacity: .8; }
.gl-thumb.is-active { opacity: 1; border-color: #fff; }
@media (max-width: 767px) {
  .gl-stage { padding: 0 8px; }
  .gl-nav { width: 40px; height: 40px; }
  .gl-nav.prev { left: 6px; } .gl-nav.next { right: 6px; }
  .gl-thumbs { justify-content: flex-start; }
  .gl-thumb { width: 64px; height: 46px; }
}
/* Popup video — demo MODAL 5 (hộp 800px nền #000, đầu bg-dark, thân p-0 + khung ratio 16:9); dùng lại đầu
   tối của ảnh lớn. Khung không bo góc (nằm trong hộp đã bo). */
.hospital-modal-dialog.video-dialog { max-width: 800px; background: #000; overflow: hidden; }
.video-dialog .video-modal-frame { border-radius: 0; }
button.equipment-item-card { font: inherit; padding: 0; border: 0; width: 100%; text-align: inherit; cursor: pointer; display: block; }
/* Chú thích ảnh (Trang thiết bị + Thư viện ảnh): demo dùng Barlow 900 1.05rem — dấu tiếng Việt dính nhau, to hơn
   tiêu đề thẻ các khối khác. Đưa về cỡ tiêu đề thẻ của hệ thống (Roboto 700 ~.95rem), cùng cách đã sửa tiêu đề Quy trình. */
.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; } }

/* Quy trình TỪNG BƯỚC (_Process.cshtml) — ⚠️ không có bản gốc (demo là lưới thẻ), dựng mới theo yêu cầu
   2026-09-26. Máy tính: một hàng, số bước nối bằng đường đứt + mũi tên giữa hai bước. Dưới 992px: trục
   dọc, số bên trái, thẻ bên phải. Xanh / đỏ xen kẽ như thẻ cũ; rê chuột chỉ nhấc thẻ (không đổi màu). */
.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-blue); --tone-soft: rgba(12, 72, 161, .12); position: relative; display: flex; flex-direction: column; align-items: center; }
.process-flow-step.is-red { --tone: #c8102e; --tone-soft: rgba(200, 16, 46, .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);
}
/* Đường nối từ số này sang số sau. */
.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; }
/* Tiêu đề bước dùng font nội dung (Roboto 700) — Barlow 800 của h3 hẹp và đậm quá, dấu tiếng Việt khó đọc. */
.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; }
  /* Vòng số căn GIỮA chiều cao thẻ (trước căn mép trên → tâm số lệch tâm thẻ ~17px, người dùng báo 2026-10-02). */
  .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 {
    /* Từ đáy vòng số này (50% + dot/2) tới đỉnh vòng số sau (coi thẻ sau cao bằng thẻ này), chừa 8px hai đầu. */
    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; }   /* giữa khe 22px giữa hai thẻ */
  .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; }
}

/* ═══ Trang Giới thiệu ═══════════════════════════════════════════════════════
   Chép demo /gioi-thieu: FULL SUB-HERO BANNER + thanh nút, khối mở đầu ảnh / chữ, VISION - MISSION - CORE
   VALUES (.vision-mission-grid / .vision-card), Ban lãnh đạo (.doctor-mini-card). Bootstrap → lưới CSS.
   Ảnh banner hiện trọn tỷ lệ gốc (cùng quyết định với banner trang chủ, không cắt cover). */
section[id] { scroll-margin-top: 90px; }
.page-sub-hero-full-section { width: 100%; position: relative; overflow: hidden; background: #072d69; }
.page-sub-hero-img-wrap { width: 100%; line-height: 0; }
.page-sub-hero-img { width: 100%; height: auto; display: block; }
.page-sub-hero-actions-bar {
  background: linear-gradient(180deg, #072d69 0%, #0c48a1 100%); padding: 18px 15px;
  border-bottom: 3px solid #f43f5e; box-shadow: 0 4px 20px rgba(0, 0, 0, .18);
}
.page-sub-hero-actions { display: flex; justify-content: center; align-items: center; gap: 16px; flex-wrap: nowrap; }
.sub-hero-btn {
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; flex-shrink: 0; padding: .5rem 1.5rem;
  border-radius: 50px; text-transform: uppercase; color: #fff; transition: all .25s ease;
}
.sub-hero-btn .icon { width: 18px; height: 18px; }
.sub-hero-btn--book {
  background: #dc3545; border: 1px solid #dc3545; font-weight: 900; font-size: 1.05rem;
  box-shadow: 0 0 22px rgba(225, 29, 72, .55), 0 4px 12px rgba(0, 0, 0, .25);
}
.sub-hero-btn--book:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 0 30px rgba(225, 29, 72, .85), 0 6px 18px rgba(0, 0, 0, .35); }
.sub-hero-btn--hotline {
  font-weight: 800; font-size: 1rem; border: 2px solid rgba(255, 255, 255, .85); background: rgba(255, 255, 255, .12);
  backdrop-filter: blur(6px);
}
.sub-hero-btn--hotline .icon { color: #ffc107; }
.sub-hero-btn--hotline:hover { color: #fff; background: rgba(255, 255, 255, .22); }
@media (max-width: 767px) {
  .page-sub-hero-actions-bar { padding: 10px 6px; }
  .page-sub-hero-actions { gap: 6px; overflow-x: auto; justify-content: flex-start; scrollbar-width: none; }
  .sub-hero-btn { font-size: .76rem !important; padding: 6px 10px; }
  .sub-hero-btn .icon { width: 14px; height: 14px; }
}

/* Khối mở đầu: ảnh trái 380px cover bo góc đổ bóng / chữ phải (demo col-lg-6 + col-lg-6). */
.about-intro-row { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: center; }
.about-intro-row.no-image { grid-template-columns: 1fr; }
.about-intro-img img { width: 100%; height: 380px; object-fit: cover; border-radius: 8px; box-shadow: 0 8px 24px rgba(15, 23, 42, .15); display: block; }
.about-intro-text .title { font-size: 1.75rem; }
.about-intro-text .about-intro-slogan { margin-bottom: 1rem; font-size: 1.1rem !important; line-height: 1.5; }
.about-intro-text .cont + .cont { margin-top: 12px; }
@media (max-width: 991px) {
  .about-intro-row { grid-template-columns: 1fr; gap: 20px; }
  .about-intro-img img { height: 260px; }
}

/* Tầm nhìn / Sứ mệnh / Giá trị cốt lõi. Rê chuột chỉ nhấc thẻ (không đổi màu viền — quy ước trang chủ). */
.vision-mission-grid { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 24px; align-items: stretch; }
.vision-card {
  --tone: #0C48A1; --tone-bg: #e0f2fe;
  display: flex; flex-direction: column; align-items: center; text-align: center; padding: 24px;
  background: #fff; border: 1.5px solid #e2e8f0; border-radius: 12px; box-shadow: 0 2px 6px rgba(15, 23, 42, .06);
  transition: transform .3s ease, box-shadow .3s ease;
}
.vision-card.is-soft { background: #f8f9fa; }
.vision-card.is-red  { --tone: #BA141A; --tone-bg: #ffe4e6; }
.vision-card.is-teal { --tone: #0f766e; --tone-bg: #ccfbf1; }
.vision-card:hover { transform: translateY(-5px); box-shadow: 0 12px 30px rgba(12, 72, 161, .12); }
.vision-icon-wrap {
  width: 64px; height: 64px; border-radius: 50%; background: var(--tone-bg); color: var(--tone);
  display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; overflow: hidden;
}
.vision-icon-wrap img { width: 60%; height: 60%; object-fit: contain; }
.vision-icon-wrap .icon { width: 30px; height: 30px; }
.vision-title { font-weight: 800; text-transform: uppercase; color: var(--tone); font-size: .98rem; margin: 0 0 12px; }
.vision-desc { color: var(--text-muted); margin: 0; font-size: .82rem; line-height: 1.6; }
@media (max-width: 767px) {

  .vision-card { padding: 16px 12px; }
}

/* Ban lãnh đạo: thẻ .doctor-mini-card của demo, ảnh 120px, 3 cột căn giữa. */
.leaders-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; justify-content: center; }
.leader-card { padding: 24px; height: 100%; cursor: default; }
.doctor-mini-avatar.leader-avatar { width: 120px; height: 120px; aspect-ratio: auto; margin: 0 auto 16px; object-fit: cover; }
.leader-avatar.is-empty .icon { width: 48px; height: 48px; }
.leader-role { color: var(--primary-blue); font-weight: 700; margin-bottom: 8px; font-size: .75rem; }
.leader-role.is-red { color: #dc3545; }
.leader-desc { font-size: .75rem; line-height: 1.6; color: var(--text-muted); margin: 0; }


/* Lịch sử hình thành — ⚠️ không có bản gốc: trục dọc, mốc năm tròn, thẻ nội dung. */
.about-timeline { list-style: none; margin: 0 auto; padding: 0; max-width: 900px; position: relative; }
.about-timeline::before { content: ""; position: absolute; left: 44px; top: 8px; bottom: 8px; border-left: 2px dashed #b8c7df; }
.about-timeline-item { position: relative; display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 16px; align-items: start; padding-bottom: 20px; }
.about-timeline-item:last-child { padding-bottom: 0; }
.about-timeline-year {
  position: relative; z-index: 1; justify-self: center; min-width: 76px; padding: 8px 10px; border-radius: 30px; text-align: center;
  background: var(--primary-blue); color: #fff; font-family: var(--font-heading); font-weight: 800; font-size: 1rem;
  box-shadow: 0 0 0 5px rgba(12, 72, 161, .12);
}
.about-timeline-item:nth-child(even) .about-timeline-year { background: #c8102e; box-shadow: 0 0 0 5px rgba(200, 16, 46, .12); }
.about-timeline-card { display: flex; gap: 16px; background: #fff; border-radius: 12px; padding: 16px 18px; box-shadow: 0 8px 22px rgba(15, 23, 42, .07); }
.about-timeline-img { width: 120px; height: 90px; object-fit: cover; border-radius: 8px; flex-shrink: 0; }
.about-timeline-title { font-family: var(--font-main); font-size: 1.02rem; font-weight: 700; color: #0f2a55; margin: 0 0 6px; }
.about-timeline-desc { color: var(--text-muted); margin: 0; line-height: 1.65; white-space: pre-line; }
@media (max-width: 575px) {
  .about-timeline::before { left: 32px; }
  .about-timeline-item { grid-template-columns: 64px minmax(0, 1fr); gap: 10px; }
  .about-timeline-year { min-width: 58px; font-size: .85rem; padding: 6px 8px; }
  .about-timeline-card { flex-direction: column; }
  .about-timeline-img { width: 100%; height: 160px; }
}

/* Thư viện ảnh trang Giới thiệu: ảnh chụp thực tế PHỦ KÍN khung (thẻ Trang thiết bị trang chủ để co vừa +
   nền trắng vì ảnh máy móc nền trắng). */
.about-page-block .equipment-item-card img { object-fit: cover; object-position: center 20%; padding: 0; background: #e2e8f0; }

/* Thư viện video trang Giới thiệu: CHỈ video — lưới đều 16:9, không video lớn / chữ (người dùng yêu cầu
   2026-09-28, _Videos.cshtml nhánh VideoGridOnly). Tên video hiện ở tiêu đề popup khi bấm phát. */
.video-grid-only { margin-top: 0; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); }
.video-grid-only .video-card-thumb { aspect-ratio: 16 / 9; height: auto; }
@media (max-width: 991px) { .video-grid-only { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575px) { .video-grid-only { grid-template-columns: 1fr; } }

/* Lịch sử — TRỤC NGANG (cấu hình ô "Trục ngang", PC và Mobile riêng): mốc năm xếp một hàng trên đường gạch
   ngang, thẻ nội dung bên dưới mỗi mốc; số mốc mỗi màn = "Số mục" của ô, dư thì cuộn ngang. ⚠️ Không có bản gốc. */
@media (min-width: 768px) {
  .about-timeline.is-pc-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(--n) - 1) * 20px) / var(--n));
  }
  .about-timeline.is-pc-h::before { left: 0; right: 0; top: 21px; bottom: auto; border-left: 0; border-top: 2px dashed #b8c7df; }
  .about-timeline.is-pc-h .about-timeline-item { grid-template-columns: 1fr; grid-template-rows: auto 1fr; gap: 16px; padding-bottom: 0; }
  .about-timeline.is-pc-h .about-timeline-card { flex-direction: column; height: 100%; text-align: center; }
  .about-timeline.is-pc-h .about-timeline-img { width: 100%; height: 150px; }
}
@media (max-width: 767px) {
  .about-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));
  }
  .about-timeline.is-mb-h::before { left: 0; right: 0; top: 21px; bottom: auto; border-left: 0; border-top: 2px dashed #b8c7df; }
  .about-timeline.is-mb-h .about-timeline-item { grid-template-columns: 1fr; grid-template-rows: auto 1fr; gap: 16px; padding-bottom: 0; }
  .about-timeline.is-mb-h .about-timeline-card { flex-direction: column; height: 100%; text-align: center; }
  .about-timeline.is-mb-h .about-timeline-img { width: 100%; height: 150px; }
}

/* Tablet (768–1199px) dùng "Số mục tablet" của ô, như .hp-list. */
@media (min-width: 768px) and (max-width: 1199px) {
  .about-timeline.is-pc-h { grid-auto-columns: calc((100% - (var(--nt) - 1) * 20px) / var(--nt)); }
}

/* ═══ Trang con — Thai sản /dang-ky-sinh ═══════════════════════════════════════════════════════════════
   Chép demo /dang-ky-sinh (<style> đầu trang + style.css "2x2 MOBILE GRID CHO ĐẶC QUYỀN MẸ VÀ BÉ & GÓI SINH").
   Màu Bootstrap của demo giữ nguyên giá trị (text-primary #0d6efd, text-danger #dc3545, text-muted #6c757d).
   Nền: SECTION 1 và 3 bg-light, SECTION 2 bg-white. Banner + thanh nút dùng .page-sub-hero-* (trang Giới thiệu). */
.page-privileges-section, .page-booking-section { background: #f8f9fa; }
.page-packages-section { background: #fff; }

/* Đặc quyền — thẻ không nền, vòng icon 60px, 4 màu xoay vò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: #0d6efd; font-size: .98rem; line-height: 1.3; margin: 0 0 8px; }
.privilege-desc { font-size: .82rem; color: #6c757d; line-height: 1.6; margin: 0; }

/* Gói — .maternity-package-card của demo. */
.hp-list--packages .hp-track { padding-top: 12px; }
.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: #f43f5e; box-shadow: 0 10px 25px rgba(244, 63, 94, .15); transform: translateY(-4px);
}
.maternity-package-card:focus-visible { outline: 2px solid #f43f5e; outline-offset: 2px; }
.maternity-package-card.selected::before {
  content: ""; position: absolute; top: -10px; right: -10px; width: 28px; height: 28px; border-radius: 50%;
  background: #f43f5e 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: #dc3545; 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; }
/* Chừa chỗ cho huy hiệu — demo để huy hiệu đè lên tên gói dài ("Thai Sản VIP Deluxe"). */
.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: #0d6efd; 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: #be123c; 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 #0d6efd; border-radius: 4px; color: #0d6efd; 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: #0d6efd; color: #fff; }
.maternity-package-card.selected .pkg-btn { border-color: #dc3545; color: #dc3545; background: #fff; }
.maternity-package-card.selected .pkg-btn-on { display: inline-flex; }
.maternity-package-card.selected .pkg-btn-off { display: none; }

/* Phiếu đăng ký + ngân hàng — mỗi cột một thẻ (.admin-card của demo: không nền, lề 24px). */
.booking-card { height: 100%; padding: 24px; }
.booking-card-title {
  display: flex; align-items: center; gap: 10px; margin: 0 0 24px; padding-bottom: 16px; border-bottom: 1px solid #dee2e6;
  font-family: var(--font-heading); font-weight: 700; font-size: 1.15rem; color: #0d6efd;
}
.booking-card-title .icon { width: 22px; height: 22px; color: #dc3545; flex-shrink: 0; }
.form-card-body .form-home-row { gap: 0 24px; }
.form-card-body .form-group { margin-bottom: 16px; }
.form-card-body label { display: block; margin-bottom: 8px; font-size: .85rem; font-weight: 500; color: #212529; }
.form-card-body label.required::after { content: " *"; color: #dc3545; }
.form-card-body .form-control {
  width: 100%; padding: .55rem .75rem; font-family: var(--font-main); font-size: .9rem; color: #212529; background: #fff;
  border: 1px solid #dee2e6; border-radius: 6px; transition: border-color .15s ease, box-shadow .15s ease;
}
.form-card-body .form-control::placeholder { color: #6c757d; opacity: .75; }
/* Ô chọn (ps-select) và ô ngày (pd) cao bằng ô nhập thường — hàng 3 ô không lệch đáy. */
.form-card-body input.form-control, .form-card-body .ps-trigger, .form-card-body .pd-input {
  height: 44px; min-height: 44px; padding-top: 0; padding-bottom: 0; font-size: .9rem;
}
.form-card-body input[type="file"].form-control { height: auto; }
.form-card-body .form-control:focus { outline: 0; border-color: #86b7fe; box-shadow: 0 0 0 .25rem rgba(13, 110, 253, .25); }
.form-card-body .form-control.is-invalid { border-color: #dc3545; box-shadow: 0 0 0 .2rem rgba(220, 53, 69, .2); }
.form-card-body textarea.form-control { min-height: 62px; resize: vertical; }
.form-card-body .form-help { display: block; margin-top: 4px; font-size: .875rem; color: #6c757d; }
.form-card-body .form-choices { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.form-card-body .form-choice { display: inline-flex; align-items: center; gap: 6px; }
.form-card-body .form-group--file { padding: 12px 14px; background: #f8f9fa; border: 1px solid #dee2e6; border-radius: 6px; }
.form-card-body .form-group--file label { color: #0d6efd; margin-bottom: 4px; }
/* Khung chọn file (⚠️ không có bản gốc): viền đứt xanh nhạt, icon tròn, chữ "Chọn ảnh" xanh đậm, gợi ý xám;
   rê / kéo thả vào thì nền xanh nhạt hơn; chọn xong thành thẻ trắng có ảnh thu nhỏ + tên + dung lượng + nút X. */
.file-drop { position: relative; }
.file-drop-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
/* Gọn một hàng (người dùng yêu cầu thu chiều cao): icon trái chiếm hai dòng, chữ + gợi ý xếp chồng bên phải. */
.file-drop .file-drop-zone {
  display: grid; grid-template-columns: auto auto; justify-content: center; column-gap: 12px; row-gap: 1px; align-items: center; margin: 0 !important;
  padding: 9px 14px; text-align: left; cursor: pointer; background: #fff; color: #475569 !important;
  border: 2px dashed #bfd3f2; border-radius: 10px; transition: border-color .2s ease, background .2s ease;
}
.file-drop-zone:hover, .file-drop-zone.is-drag { border-color: #0d6efd; background: #f0f6ff; }
.file-drop-input:focus-visible + .file-drop-icon { outline: 2px solid #0d6efd; outline-offset: 3px; }
.file-drop-icon {
  grid-row: span 2; width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: #e7f0ff; color: #0d6efd;
}
.file-drop-icon .icon { width: 18px; height: 18px; }
.file-drop-text { font-size: .875rem; color: #475569; }
.file-drop-text strong { color: #0d6efd; font-weight: 700; }
.file-drop-hint { font-size: .78rem; color: #94a3b8; }
.file-drop.is-invalid .file-drop-zone { border-color: #dc3545; background: #fff5f5; }
.file-drop-preview {
  display: flex; align-items: center; gap: 12px; padding: 7px 12px; background: #fff;
  border: 1px solid #dee2e6; border-radius: 10px;
}
.file-drop-preview[hidden], .file-drop-zone[hidden] { display: none; }
.file-drop-thumb {
  width: 40px; height: 40px; flex-shrink: 0; border-radius: 8px; overflow: hidden; display: flex; align-items: center; justify-content: center;
  background: #f1f5f9; color: #64748b;
}
.file-drop-thumb img { width: 100%; height: 100%; object-fit: cover; }
.file-drop-thumb .icon { width: 20px; height: 20px; }
.file-drop-info { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.file-drop-name { font-size: .9rem; color: #212529; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.file-drop-size { font-size: .78rem; color: #6c757d; }
.file-drop-clear {
  width: 32px; height: 32px; flex-shrink: 0; border: 0; border-radius: 50%; background: #f1f5f9; color: #64748b;
  display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all .2s ease;
}
.file-drop-clear:hover { background: #fee2e2; color: #dc3545; }
.file-drop-clear .icon { width: 16px; height: 16px; }
.btn-booking-submit {
  display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; margin-top: 8px; padding: 16px;
  background: #dc3545; color: #fff; border: 0; border-radius: 8px; font-family: var(--font-heading); font-size: 1.1rem;
  font-weight: 900; letter-spacing: .5px; text-transform: uppercase; cursor: pointer;
  box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15); transition: background .2s ease, transform .2s ease;
}
.btn-booking-submit:hover { background: #bb2d3b; transform: translateY(-1px); }
.btn-booking-submit .icon { width: 20px; height: 20px; }
/* Thông báo lỗi trong thẻ form (trang con): hộp đỏ nhạt vạch đỏ trái + icon — thay dải kem của form trang chủ. */
.form-card-body .form-home-notice {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; margin: 0 0 18px; padding: 10px 14px; scroll-margin-top: 120px;
  background: #fef2f2; border: 1px solid #fecaca; border-left: 4px solid #dc3545; border-radius: 8px;
  color: #991b1b; font-size: .875rem; line-height: 1.5;
}
.form-card-body .form-home-notice[hidden] { display: none; }
.form-card-body .form-home-notice > .icon { width: 16px; height: 16px; flex-shrink: 0; color: #dc3545; }
.form-card-body .form-home-notice a { margin-left: auto; }
.form-home-notice a[hidden] { display: none !important; }

/* Khối ngân hàng — làm lại cho gọn (người dùng: "UI hơi thô"): thẻ trắng bo 16px đổ bóng nhẹ, vạch xanh trên;
   đầu khối QR trái + số tiền cọc phải trên nền xanh nhạt; mỗi dòng thông tin một ô xám nhạt bo góc; "Lưu ý" vạch xanh
   trái, dính đáy khối (khối kéo cao bằng cột form). ⚠️ Chênh demo: demo là hộp viền đứt xếp dọc giữa. */
.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 #0C48A1; border-radius: 16px;
  box-shadow: 0 12px 30px rgba(12, 72, 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: #dc3545; line-height: 1.15; white-space: nowrap; }
/* Các dòng chiếm phần cao dư (khối kéo bằng cột form) và nằm giữa phần đó — hai mép trống bằng nhau. */
.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: #0d6efd; }
.deposit-row-value .is-red { color: #dc3545; }
.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: #0C48A1; border-color: #0C48A1; 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 #0d6efd; border-radius: 10px;
  color: #1e3a8a; font-size: .85rem; line-height: 1.6;
}
.deposit-note .icon { width: 15px; height: 15px; color: #0d6efd; vertical-align: -2px; margin-right: 2px; }
/* Hai cột Phiếu đăng ký / Ngân hàng cao bằng nhau. */
.page-booking-section .page-row { align-items: stretch; }
.page-booking-section .page-cell { display: flex; flex-direction: column; }
.page-booking-section .booking-card { flex: 1; display: flex; flex-direction: column; }
.page-booking-section .booking-card > .maternity-deposit-box { flex: 1; }
@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; }
  .booking-card { padding: 16px 0; }
}

/* Popup cảm ơn sau khi gửi form (_ThanksModal) — chép #maternityThankYouModal của demo /dang-ky-sinh. */
.form-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
.thanks-dialog { max-width: 580px; }
.thanks-header { background: linear-gradient(135deg, #be123c 0%, #0C48A1 100%); }
.thanks-header .modal-title .icon { width: 18px; height: 18px; }
.thanks-body { padding: 24px; text-align: center; }
.thank-you-heart-pulse {
  width: 75px; height: 75px; margin: 0 auto 16px; border-radius: 50%; background: #fff1f2; color: #f43f5e;
  display: flex; align-items: center; justify-content: center; animation: heartBeat 1.4s infinite ease-in-out;
}
.thank-you-heart-pulse .icon { width: 36px; height: 36px; }
@keyframes heartBeat { 0% { transform: scale(1); } 14% { transform: scale(1.18); } 28% { transform: scale(1); } 42% { transform: scale(1.18); } 70% { transform: scale(1); } }
.thanks-title { font-family: var(--font-heading); font-weight: 700; color: #dc3545; font-size: 1.6rem; margin: 0 0 8px; }
.thanks-msg { color: #6c757d; font-size: .95rem; line-height: 1.65; margin: 0 0 24px; }
.thanks-summary { text-align: left; padding: 16px; margin-bottom: 24px; background: #f8f9fa; border: 1px solid #dee2e6; border-radius: 6px; font-size: .88rem; line-height: 1.8; }
.thanks-row { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 4px; margin-bottom: 4px; border-bottom: 1px solid #dee2e6; }
.thanks-row:last-child { padding-bottom: 0; margin-bottom: 0; border-bottom: 0; }
.thanks-row span { color: #6c757d; flex-shrink: 0; }
.thanks-row strong { color: #212529; text-align: right; }
.thanks-row .is-code { color: #dc3545; font-family: SFMono-Regular, Menlo, Consolas, monospace; }
.thanks-row .is-money { color: #198754; }
.thanks-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.thanks-btn {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 24px; border-radius: 6px; font-weight: 700; font-size: .95rem; cursor: pointer;
  transition: all .2s ease;
}
.thanks-btn .icon { width: 16px; height: 16px; }
.thanks-btn--ok { background: #0d6efd; color: #fff; border: 1px solid #0d6efd; }
.thanks-btn--ok:hover { background: #0b5ed7; }
.thanks-btn--home { background: #fff; color: #6c757d; border: 1px solid #6c757d; }
.thanks-btn--home:hover { background: #6c757d; color: #fff; }
.ps-trigger.is-invalid { border-color: #dc3545 !important; }
/* CAPTCHA của form — câu đố cộng số (ô ngắn) / ô reCAPTCHA · Turnstile. Chép ô "Kết quả *" của form Liên hệ vilacojsc. */
.form-captcha .form-captcha-input { max-width: 220px; letter-spacing: 1px; }
.form-captcha [data-captcha-widget] { min-height: 65px; }
.form-captcha-note { margin: 0 0 12px; font-size: .75rem; color: #94a3b8; }
.form-home-body .form-captcha label { color: #fff; }
/* Popup xác nhận trước khi gửi (⚠️ không có bản gốc — cùng khung popup cảm ơn). */
.review-body { padding: 22px 24px 24px; text-align: left; }
.review-intro { margin: 0 0 14px; color: #475569; font-size: .92rem; }
.review-summary { max-height: 46vh; overflow-y: auto; margin-bottom: 16px; }
.review-summary .thanks-row strong { white-space: pre-line; word-break: break-word; }
.review-agree { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 14px; font-size: .9rem; color: #1e293b; cursor: pointer; line-height: 1.5; }
.review-agree input { width: 18px; height: 18px; margin-top: 2px; flex-shrink: 0; accent-color: #0d6efd; cursor: pointer; }
.review-error { margin: 0 0 14px; padding: 8px 12px; border-radius: 6px; background: #fef2f2; color: #991b1b; font-size: .85rem; }
.review-actions { justify-content: flex-end; }
.thanks-btn--ok:disabled { opacity: .5; cursor: not-allowed; }

/* ═══ Trang con — Tiêm chủng /tiem-chung-vaccine ═══════════════════════════════════════════════════════════
   Chép <style> đầu trang demo (vaccine-calc-card, vaccine-period-*, vaccine-item-pill, vaccine-badge-origin,
   vaccine-pkg-card, vaccine-step-card) + màu Bootstrap của demo. Nền: tra cứu + form bg-light, gói + quy trình trắng.
   Cỡ chữ thẻ theo thang chung của hệ thống (người dùng chốt đồng nhất với trang chủ / Giới thiệu). */
.page-vaccine-calc-section { background: #f8f9fa; }
.page-steps-section { background: #fff; }
.sub-hero-btn--calc {
  background: #ffc107; border: 1px solid #ffc107; color: #1e293b; font-weight: 900; font-size: 1rem;
  box-shadow: 0 0 22px rgba(255, 193, 7, .45), 0 4px 12px rgba(0, 0, 0, .25);
}
.sub-hero-btn--calc:hover { color: #1e293b; transform: translateY(-2px); box-shadow: 0 0 30px rgba(255, 193, 7, .7), 0 6px 18px rgba(0, 0, 0, .35); }

/* 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(12, 72, 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, #0C48A1, #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: 800; 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: #0C48A1;
  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: #0d6efd;
  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%; 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 .form-control:focus { outline: 0; border-color: #86b7fe; box-shadow: 0 0 0 .25rem rgba(13, 110, 253, .25); }
.vaccine-calc .form-control.is-invalid { border-color: #dc3545; }
.vaccine-calc .pd-wrap .form-control { border-radius: 0 6px 6px 0; }
.vaccine-calc-btn {
  display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; padding: .6rem 1rem; border: 0; border-radius: 6px;
  background: #0d6efd; color: #fff; 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: #0b5ed7; }
.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-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-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: 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, #072d69, #0C48A1); 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: #0C48A1; 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: 800; color: #fff; }
.vaccine-summary-age { font-size: .9rem; opacity: .95; }
.vaccine-summary-age strong { color: #ffc107; }
.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: #ffc107; color: #1e293b; box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .15); }
.vaccine-summary-book:hover { background: #ffca2c; 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: #0C48A1; }
.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: #0d6efd; }
.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: #072d69; }
.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-size: .88rem; cursor: pointer; transition: all .2s ease;
}
.vaccine-btn-print:hover { background: #6c757d; color: #fff; }
.vaccine-btn-book { background: #0d6efd; color: #fff; }
.vaccine-btn-book:hover { background: #0b5ed7; color: #fff; }

/* Gói tiêm chủng — .vaccine-pkg-card */
.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 { border-color: #0C48A1; box-shadow: 0 12px 30px rgba(12, 72, 161, .15); transform: translateY(-6px); }
.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: #0d6efd; color: #fff; }
.vaccine-pkg-badge.is-amber { background: #ffc107; 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: #0C48A1; line-height: 1.25; }
.vaccine-pkg-sub { margin: 0 0 16px; font-size: .82rem; color: #6c757d; }
.vaccine-pkg-price { margin-bottom: 12px; font-family: var(--font-heading); font-size: 1.35rem; font-weight: 900; color: #BA141A; }
.vaccine-pkg-benefits { list-style: none; padding: 0; margin: 0 0 24px; font-size: .82rem; 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 #0d6efd; border-radius: 50px;
  color: #0d6efd; font-size: .88rem; font-weight: 700; transition: all .2s ease;
}
.vaccine-pkg-btn.is-solid, .vaccine-pkg-card:hover .vaccine-pkg-btn { background: #0d6efd; color: #fff; }

/* Quy trình — .vaccine-step-card */
.vaccine-step-card { display: block; height: 100%; padding: 22px; background: #fff; border-radius: 14px; border-left: 5px solid #0C48A1; box-shadow: 0 4px 15px rgba(0, 0, 0, .04); color: inherit; }
.vaccine-step-badge { display: inline-block; margin-bottom: 14px; padding: 4px 12px; border-radius: 50px; background: #0d6efd; color: #fff; font-size: .72rem; font-weight: 700; }
.vaccine-step-title { margin: 0 0 8px; font-family: var(--font-main); font-size: 1.02rem; font-weight: 700; color: #0f2a55; line-height: 1.4; }
.vaccine-step-desc { margin: 0; font-size: .85rem; color: #6c757d; line-height: 1.55; }
.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", xem khối Tiêm chủng điện thoại cuối file). */
.vaccine-step-no { display: none; }

/* Form đứng một mình — .card shadow-lg rounded-4 + card-header bg-primary của demo */
/* Rộng bằng nội dung trang (như lưới gói phía trên), cố định — không co theo nội dung form. */
.form-panel { width: 100%; max-width: none; margin: 0; background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 1rem 3rem rgba(0, 0, 0, .175); }
.form-panel-header { padding: 40px 32px 32px; text-align: center; background: #0d6efd; color: #fff; }
.form-panel-title { margin: 0 0 8px; font-family: var(--font-heading); font-size: 1.35rem; font-weight: 700; color: #fff; }
.form-panel-desc { margin: 0; font-size: .98rem; opacity: .9; }
.form-panel .form-card { padding: 36px 40px 40px; }
.form-panel-actions { padding-top: 12px; text-align: center; }
.btn-panel-submit {
  display: inline-flex; align-items: center; gap: 8px; padding: 14px 44px; border: 0; border-radius: 50px; background: #0d6efd; color: #fff;
  font-family: var(--font-main); font-size: .95rem; font-weight: 700; letter-spacing: .3px; text-transform: uppercase; cursor: pointer;
  box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15); transition: background .2s ease, transform .2s ease;
}
.btn-panel-submit:hover { background: #0b5ed7; transform: translateY(-1px); }
.btn-panel-submit .icon { width: 18px; height: 18px; }

@media (max-width: 767px) {
  .vaccine-calc-header { padding: 18px; }
  .vaccine-calc-body { padding: 18px; }
  .vaccine-calc-grid { grid-template-columns: 1fr; }
  .vaccine-summary { padding: 18px; }
  .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; }
  .form-panel-header { padding: 28px 18px 22px; }
  .form-panel-title { font-size: 1.3rem; }
  .form-panel .form-card { padding: 22px 18px 26px; }
  .btn-panel-submit { width: 100%; justify-content: center; padding: 14px 20px; }
}

/* Ô Văn bản (soạn thảo) — Cơ cấu tổ chức (ảnh sơ đồ)… */
.about-richtext { color: var(--text); line-height: 1.7; }
.about-richtext img { max-width: 100%; height: auto; border-radius: 8px; }
.about-richtext p { margin-bottom: 12px; }

/* Thẻ dịch vụ: rê chuột chỉ nhấc thẻ lên (translateY của demo), ảnh KHÔNG phóng to (người dùng yêu cầu 2026-09-26). */
.service-card-item:hover .service-card-img img { transform: none; }
/* Tin tức: cỡ chữ theo THANG CHỮ CHUNG của trang (người dùng 2026-09-28: demo để 13–14px, nhỏ hơn hẳn các
   khối khác) — đoạn chữ = .cont (≈.98rem), tiêu đề thẻ ≈ 1rem như Dịch vụ / Bác sĩ / Quy trình. */
.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; }
}
/* Tin tức: rê chuột ảnh KHÔNG phóng to (người dùng yêu cầu 2026-09-28). */
.news-main-card:hover .news-main-img img,
.news-sub-card:hover .news-sub-thumb img,
.news-featured-card:hover .news-featured-img img { transform: none; }
/* Đối tác: khung logo tỷ lệ 1.6:1 thay khung vuông 1:1 của demo (người dùng yêu cầu 2026-09-28). */
.partner-logo-item { aspect-ratio: 1.6 / 1; }
.partner-logo-item:hover img { transform: none; }  /* bỏ phóng ảnh khi rê chuột */
/* Video: rê chuột ảnh KHÔNG phóng to (người dùng yêu cầu 2026-09-28) — thẻ nhỏ vẫn nhấc lên như demo. */
.featured-video-right:hover img,
.video-thumbnail-card:hover .video-card-thumb img { transform: none; }
/* Nút thứ hai — demo btn-outline-danger. */
.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(--medical-teal); }
@media (max-width: 575px) { .about-features-list { grid-template-columns: 1fr; } }

/* Form: hàng / cột theo cấu hình hàng của form. */
.form-home-row { display: grid; gap: 0 10px; grid-template-columns: repeat(var(--cols, 1), minmax(0, 1fr)); }
@media (max-width: 991px) { .form-home-row { grid-template-columns: repeat(var(--cols-tab, 1), minmax(0, 1fr)); } }
@media (max-width: 575px) { .form-home-row { grid-template-columns: repeat(var(--cols-mb, 1), minmax(0, 1fr)); } }
.form-home-header .title .icon { width: 16px; height: 16px; color: var(--accent-gold); vertical-align: -2px; }
.btn-form-submit .icon { width: 16px; height: 16px; }
.form-home-body .form-help { display: block; color: rgba(255, 255, 255, .75); font-size: .7rem; margin-top: 2px; }
.form-home-body .form-choices { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.form-home-body .form-choice { display: inline-flex; align-items: center; gap: 6px; font-weight: 500 !important; }
.form-home-body .form-control.is-invalid { border-color: #fca5a5; box-shadow: 0 0 0 3px rgba(252, 165, 165, .45); }
.form-home-notice {
  margin-top: 10px; padding: 10px 12px; border-radius: 6px; background: #fff7ed; color: #9a3412;
  font-size: .8rem; line-height: 1.5;
}
.form-home-notice a { display: inline-flex; align-items: center; gap: 4px; margin-left: 4px; font-weight: 700; color: var(--primary-red); }
.form-home-notice a .icon { width: 14px; height: 14px; }

/* Font ô nhập: trình duyệt mặc định cho input / select / textarea font riêng (textarea là monospace)
   — theo font chữ của trang, placeholder cùng font, màu nhạt. */
input, select, textarea { font: inherit; color: inherit; }
.form-home-body .form-control { font-family: var(--font-main); }
.form-home-body .form-control::placeholder { font-family: var(--font-main); color: #94a3b8; opacity: 1; }
.form-home-body input[type="date"] { color: #0f172a; }

/* Form trên trang — người dùng yêu cầu (2026-09-26) tô CÙNG MÀU popup MODAL 1 của demo: đầu xanh
   chuyển sắc (.hospital-modal-header), thân trắng, nhãn đen, ô viền xám + vòng focus xanh kiểu
   form-control, nút đỏ btn-danger, hotline chữ xám số đỏ. Bố cục (2 cột, đầu căn giữa) giữ của SECTION 1.
   ⚠️ Không có bản gốc cho tổ hợp này — ghép màu popup demo vào khung form trang. */
.form-home-container {
  background: #ffffff; border-radius: 12px; border: 1px solid #e5eaf2;
  box-shadow: 0 20px 40px rgba(12, 72, 161, .14);
}
.form-home-header {
  background: linear-gradient(135deg, var(--primary-blue) 0%, var(--primary-blue-dark) 100%);
  padding: 14px 22px 12px; border-bottom: 0;
}
.form-home-header .title {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  font-size: 1.15rem; letter-spacing: .4px; margin-bottom: 2px; color: #ffffff;
}
.form-home-header .title-badge {
  width: 28px; height: 28px; flex-shrink: 0; border-radius: 50%; background: var(--accent-gold); color: var(--primary-blue-dark);
  display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 4px 10px rgba(245, 158, 11, .35);
}
.form-home-header .title-badge .icon { width: 15px; height: 15px; color: var(--primary-blue-dark); vertical-align: 0; }
.form-home-header .subtitle { font-size: .8rem; color: rgba(255, 255, 255, .85); }
.form-home-body { background: #ffffff; padding: 16px 22px 14px; }
.form-home-body .form-home-row { gap: 0 14px; }
.form-home-body .form-group { margin-bottom: 10px; }
.form-home-body label { font-size: .85rem; font-weight: 500; color: #212529 !important; margin-bottom: 4px; }
.form-home-body label.required::after { color: #dc3545; }
.form-home-body .form-help { color: #6c757d; }
.form-home-body .form-control {
  height: 38px; padding: 6px 12px; font-size: .9rem; color: #212529; background: #fff;
  border: 1px solid #dee2e6; border-radius: 6px; box-shadow: none;
  transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
.form-home-body .form-control::placeholder { color: #6c757d; }
.form-home-body textarea.form-control { height: auto; min-height: 60px; resize: vertical; }
.form-home-body .form-control:focus,
.form-home-body .ps-select.is-open .ps-trigger,
.form-home-body .pd-wrap.is-open .pd-input {
  border-color: #86b7fe; outline: 0; box-shadow: 0 0 0 .25rem rgba(13, 110, 253, .25);
}
.form-home-body .form-control.is-invalid,
.form-home-body .ps-native.is-invalid + .ps-select .ps-trigger,
.form-home-body .pd-native.is-invalid + .pd-wrap .pd-input { border-color: #dc3545; box-shadow: 0 0 0 .25rem rgba(220, 53, 69, .2); }
.form-home-body .ps-trigger { height: 38px; }
.form-home-body .pd-btn { right: 6px; }
.form-home-body .btn-form-submit {
  height: 42px; margin-top: 4px; border-radius: 6px; font-size: .95rem; letter-spacing: .3px;
  background: #dc3545; border: 1px solid #dc3545; box-shadow: none; transition: background .15s ease, border-color .15s ease;
}
.form-home-body .btn-form-submit:hover { background: #bb2d3b; border-color: #b02a37; transform: none; box-shadow: none; }
.form-home-hotline { margin-top: 8px; text-align: center; font-size: .875em; color: #6c757d; }
.form-home-hotline a { color: #dc3545; font-weight: 700; }
.form-home-hotline a:hover { color: #b02a37; }

/* Demo SECTION 1: .row align-items-center — form và cột "Dành cho khách hàng" căn giữa theo chiều dọc. */
.register-links > .container > .page-row { align-items: center; }
/* Hai cột cách nhau rộng hơn khe 24px mặc định (người dùng: "2 cột đang dính sát"). */
@media (min-width: 992px) { .register-links > .container > .page-row { column-gap: 48px; } }

/* Khung form: demo để overflow:hidden — danh sách xổ của ô chọn cuối form sẽ bị cắt, nên mở ra
   và bo góc riêng phần đầu / thân. */
.form-home-container { overflow: visible; }
.form-home-header { border-radius: 12px 12px 0 0; }
.form-home-body { border-radius: 0 0 12px 12px; }
.form-home-container > .form-home-body:first-child { border-radius: 12px; }

/* Ô chọn tự dựng (site.js enhanceSelect) — thay popup <select> gốc không tạo kiểu được. */
.ps-native { display: none !important; }
.ps-select { position: relative; }
.ps-trigger {
  display: flex !important; align-items: center; justify-content: space-between; gap: 8px;
  text-align: left; cursor: pointer; line-height: 1.2;
}
.ps-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ps-label.is-placeholder { color: #94a3b8; }
.ps-chevron { width: 16px; height: 16px; color: #64748b; transition: transform .2s ease; }
.ps-select.is-open .ps-chevron { transform: rotate(180deg); }
.ps-select.is-open .ps-trigger { border-color: var(--primary-red); box-shadow: 0 0 0 3px rgba(255, 255, 255, .35); }
.ps-native.is-invalid + .ps-select .ps-trigger { border-color: #fca5a5; box-shadow: 0 0 0 3px rgba(252, 165, 165, .45); }
.ps-menu {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 50; background: #fff;
  border: 1px solid var(--border-color); border-radius: 10px; box-shadow: 0 14px 34px rgba(8, 41, 91, .22);
  overflow: hidden; animation: psIn .14s ease-out;
}
.ps-select.drop-up .ps-menu { top: auto; bottom: calc(100% + 6px); }
@keyframes psIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.ps-search { padding: 8px; border-bottom: 1px solid var(--border-light); }
.ps-search input {
  width: 100%; height: 34px; padding: 0 10px; border: 1px solid var(--border-color); border-radius: 6px;
  font-size: .82rem; color: var(--text-dark); outline: none;
}
.ps-search input:focus { border-color: var(--primary-blue); box-shadow: 0 0 0 3px rgba(12, 72, 161, .12); }
.ps-list { max-height: 240px; overflow-y: auto; padding: 4px; margin: 0; overscroll-behavior: contain; }
.ps-option {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px;
  border-radius: 6px; font-size: .84rem; color: var(--text-dark); cursor: pointer; line-height: 1.35;
}
.ps-option:hover, .ps-option.is-active { background: #eff5ff; color: var(--primary-blue); }
.ps-option.is-selected { color: var(--primary-blue); font-weight: 600; }
.ps-check { width: 15px; height: 15px; color: var(--primary-blue); visibility: hidden; }
.ps-option.is-selected .ps-check { visibility: visible; }
.ps-empty { padding: 12px 10px; font-size: .82rem; color: var(--text-muted); text-align: center; }
.ps-list::-webkit-scrollbar { width: 6px; }
.ps-list::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }

/* Ô ngày tự dựng (site.js enhanceDate): gõ dd/mm/yyyy + lịch tháng, tuần bắt đầu thứ Hai. */
.pd-native.is-invalid + .pd-wrap .pd-input { border-color: #fca5a5; box-shadow: 0 0 0 3px rgba(252, 165, 165, .45); }
.pd-wrap { position: relative; }
.pd-input { padding-right: 34px !important; }
.pd-btn {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px;
  border: 0; background: none; color: #64748b; display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.pd-btn .icon { width: 16px; height: 16px; }
.pd-wrap.is-open .pd-btn { color: var(--primary-blue); }
.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 var(--border-color); border-radius: 12px; padding: 10px;
  box-shadow: 0 14px 34px rgba(8, 41, 91, .22); animation: psIn .14s ease-out; 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-blue); }
.pd-nav {
  width: 30px; height: 30px; border-radius: 8px; border: 0; background: #f1f5f9; color: var(--primary-blue);
  display: flex; align-items: center; justify-content: center; cursor: pointer; transition: var(--transition);
}
.pd-nav:hover { background: var(--primary-blue); 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: #eff5ff; color: var(--primary-blue); }
.pd-day.is-out { color: #cbd5e1; }
.pd-day.is-today { box-shadow: inset 0 0 0 1.5px var(--primary-blue); font-weight: 700; }
.pd-day.is-selected { background: var(--primary-blue); 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-blue); cursor: pointer; padding: 4px 6px; border-radius: 6px; }
.pd-foot button:hover { background: #eff5ff; }
.pd-foot [data-clear] { color: var(--text-muted); }

/* Tiêu đề + mô tả + nút của MỘT ô (demo cột "Dành cho khách hàng"). */
.page-cell > .cell-heading { text-align: left; }
.page-cell > .cell-heading .cont { margin-bottom: 0; }
.cell-action { margin-top: 1.5rem; }
/* Cùng khuôn với nút khối giới thiệu (.btn-pill: đệm 10px 24px, chữ .88rem đậm 700, bo 6px) — người dùng 2026-10-02 muốn mọi
   nút đồng bộ (trước .95rem / 600, đệm 9px). */
.btn-outline-view {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 24px; border: 1px solid var(--primary-blue);
  border-radius: 6px; color: var(--primary-blue); font-weight: 700; text-transform: uppercase; font-size: .88rem;
  transition: var(--transition);
}
.btn-outline-view:hover { background: var(--primary-blue); color: #fff; }
.btn-outline-view .icon { width: 16px; height: 16px; }
.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-blue); }

/* Thẻ của Nguồn dữ liệu có hành động: thẻ là <a> (link / hotline) hoặc <button> (popup form). */
:is(a, button).quick-action-card, :is(a, button).equipment-item-card, :is(a, button).process-step-card,
:is(a, button).partner-logo-item, :is(a, button).hp-card { font: inherit; color: inherit; text-align: inherit; cursor: pointer; width: 100%; }
button.quick-action-card { border: 1px solid rgba(255, 255, 255, 0.2); }
button.process-step-card, button.hp-card, button.equipment-item-card { border: 0; padding: 0; }
button.partner-logo-item { border: 1px solid var(--border-color); }
button.equipment-item-card { border: 1px solid #e2e8f0; display: block; }
a.quick-action-card:hover, a.hp-card:hover { color: inherit; }

/* Popup form — chép MODALS (POPUPS) + MODAL 1 của demo (style.css .hospital-modal-*). Chênh lệch: ẩn / hiện
   bằng thuộc tính hidden (site.js) thay lớp .is-open; ô nhập kiểu form-control Bootstrap của demo viết
   lại (dự án không nạp Bootstrap); nút đỏ = btn-danger của demo. */
.hospital-modal-backdrop {
  position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(4px); z-index: 10000; display: flex; align-items: center; justify-content: center; padding: 15px;
  animation: fadeInModal 0.25s ease forwards;
}
.hospital-modal-backdrop[hidden] { display: none; }
@keyframes fadeInModal { from { opacity: 0; } to { opacity: 1; } }
.hospital-modal-dialog {
  background: #ffffff; border-radius: 12px; max-width: 600px; width: 100%; max-height: 90vh; overflow-y: auto;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3); position: relative;
  animation: zoomInModal 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}
@keyframes zoomInModal { from { transform: scale(0.9); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.hospital-modal-header {
  background: linear-gradient(135deg, var(--primary-blue) 0%, var(--primary-blue-dark) 100%); color: #ffffff;
  padding: 16px 20px; display: flex; align-items: center; justify-content: space-between; border-radius: 12px 12px 0 0;
  position: sticky; top: 0; z-index: 2;
}
.hospital-modal-header .modal-title {
  font-size: 1.15rem; font-weight: 800; color: #ffffff; text-transform: uppercase; margin-bottom: 0;
  display: flex; align-items: center; gap: 8px;
}
.hospital-modal-header .modal-title .icon { width: 20px; height: 20px; }
.text-gold { color: var(--accent-gold) !important; }
.hospital-modal-close {
  background: none; border: none; color: #ffffff; font-size: 1.35rem; cursor: pointer; line-height: 1;
  transition: transform 0.2s ease; display: flex; padding: 2px;
}
.hospital-modal-close:hover { transform: rotate(90deg); }
.hospital-modal-close .icon { width: 20px; height: 20px; }
.hospital-modal-body { padding: 24px; }

/* Ruột form trong popup — form-label / form-control / btn-danger của demo. */
.modal-form-desc { color: var(--text-muted); font-size: .9rem; margin-bottom: 16px; }
/* Popup chia cột theo cấu hình hàng của form (--cols / --cols-tab / --cols-mb như form trang chủ) — người dùng
   2026-09-29: popup 1 cột quá dài, phải cuộn. Popup có form nới 600 → 760px cho hai cột đủ rộng. */
.hospital-modal-dialog:has(.modal-form) { max-width: 760px; }
.modal-form .form-home-row { gap: 0 16px; }
.modal-form .form-group { margin-bottom: 14px; }
.modal-form label { display: block; margin-bottom: 6px; font-size: .95rem; font-weight: 400; color: #212529; }
.modal-form label.required::after { content: " *"; color: #dc3545; }
.modal-form .form-control {
  display: block; width: 100%; padding: .375rem .75rem; min-height: 38px; font-size: 1rem; line-height: 1.5;
  color: #212529; background: #fff; border: 1px solid #dee2e6; border-radius: 6px;
  transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
.modal-form textarea.form-control { min-height: 86px; resize: vertical; }
.modal-form .form-control::placeholder { color: #6c757d; }
.modal-form .form-control:focus,
.modal-form .ps-select.is-open .ps-trigger,
.modal-form .pd-wrap.is-open .pd-input { border-color: #86b7fe; outline: 0; box-shadow: 0 0 0 .25rem rgba(13, 110, 253, .25); }
.modal-form .form-control.is-invalid,
.modal-form .ps-native.is-invalid + .ps-select .ps-trigger,
.modal-form .pd-native.is-invalid + .pd-wrap .pd-input { border-color: #dc3545; box-shadow: 0 0 0 .25rem rgba(220, 53, 69, .2); }
.modal-form .form-help { color: #6c757d; }
.btn-modal-submit {
  width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; padding: .5rem 1rem;
  font-size: 1rem; font-weight: 500; text-transform: uppercase; color: #fff; background: #dc3545; border: 1px solid #dc3545;
  border-radius: 6px; cursor: pointer; transition: background .15s ease, border-color .15s ease;
}
.btn-modal-submit:hover { background: #bb2d3b; border-color: #b02a37; }
.btn-modal-submit .icon { width: 16px; height: 16px; }
/* Thông báo lỗi ở ĐẦU form (người dùng chốt) — cùng hộp đỏ nhạt vạch trái của form dạng thẻ. */
.modal-form .form-home-notice {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; margin: 0 0 16px; padding: 10px 14px;
  scroll-margin-top: 90px; /* chừa thanh tiêu đề dính của popup — cuộn tới là thấy trọn hộp, không bị đè */
  background: #fef2f2; border: 1px solid #fecaca; border-left: 4px solid #dc3545; border-radius: 8px;
  color: #991b1b; font-size: .875rem; line-height: 1.5;
}
.modal-form .form-home-notice[hidden] { display: none; }
.modal-form .form-home-notice > .icon { width: 16px; height: 16px; flex-shrink: 0; color: #dc3545; }
.modal-form .form-home-notice a { margin-left: auto; }
.modal-hotline { text-align: center; margin-top: 1rem; font-size: .875em; color: #6c757d; }
.modal-hotline a { color: #dc3545; }

/* Ô gắn nhóm Bố cục: lưới con 12 cột trong bề rộng của ô; khoảng cách hẹp hơn lưới ngoài. */
.page-layout > .page-row { gap: 16px; align-items: stretch; }
.page-layout > .page-row + .page-row { margin-top: 24px; }  /* 16 → 24: người dùng thấy các hàng dính sát */
.page-layout .page-cell > .quick-action-card { height: 100%; }
.page-layout .page-cell > .cell-heading { margin-bottom: 0; }
.page-layout .page-cell > .cell-action { margin-top: 0; }
@media (max-width: 991px) { .page-layout > .page-row .page-cell { grid-column: span var(--span, 12); } }
@media (max-width: 575px) {
  /* Điện thoại: ô của MỌI hàng chảy liền trong một lưới (hàng thành display:contents) — 6 thẻ chia
     2 hàng x 3 thành 3 hàng x 2 liền nhau như demo, không còn hàng lẻ 2 + 1. */
  .page-layout { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px 12px; }
  .page-layout > .page-row { display: contents; }
  .page-layout > .page-row + .page-row { margin-top: 0; }
  .page-layout > .page-row .page-cell { grid-column: 1 / -1; }
  .page-layout > .page-row .page-cell:is([data-span="1"], [data-span="2"], [data-span="3"], [data-span="4"], [data-span="5"]) { grid-column: span 6; }
}
.quick-action-card .card-sub { display: block; margin-top: 4px; font-size: .75rem; color: rgba(255, 255, 255, .85); line-height: 1.35; }

/* Tin tức: tin chính ảnh 5/12 + chữ 7/12 (demo col-md-5 / col-md-7), tin phụ theo cấu hình. */
.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-blue); }
.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-blue); }
.news-sub-title { color: var(--text-dark); }
@media (max-width: 767px) {
  a.news-main-card { grid-template-columns: 1fr; }
  /* Điện thoại: tin phụ NẰM MỘT HÀNG như demo (.news-sub-grid repeat(3) + ảnh vuông 1/1, khe 6px) — trước ép 2 cột làm tin
     thứ 3 rớt dòng (người dùng 2026-10-02). Số cột = số tin phụ của ô (--cols, như PC). */
  .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; }
}

/* Video: khối lớn + lưới theo cấu hình; thẻ là nút bấm mở popup. */
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; }
/* Số cột theo cấu hình ô ở cả 4 mức, cùng mốc với .hp-list (PC ≥1200 · tablet · ĐT ngang <768 · ĐT dọc <576). */
.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; }
/* Tên cắt 2 dòng: KHÔNG để padding dưới — phần cắt chỉ che từ mép ngoài padding nên padding dưới làm lộ nửa dòng 3
   (người dùng báo 2026-10-02). Khoảng dưới chuyển sang margin. */
.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; } }
.video-modal { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 16px; }
.video-modal[hidden] { display: none; }
.video-modal-backdrop { position: absolute; inset: 0; background: rgba(2, 6, 23, .8); }
.video-modal-dialog { position: relative; width: 100%; max-width: 960px; }
.video-modal-frame { position: relative; aspect-ratio: 16 / 9; background: #000; border-radius: 10px; overflow: hidden; }
.video-modal-frame iframe, .video-modal-frame video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-modal-close {
  position: absolute; top: -44px; right: 0; width: 36px; height: 36px; border-radius: 50%; border: 0;
  background: rgba(255, 255, 255, .15); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.video-modal-close .icon { width: 20px; height: 20px; }

/* Ảnh hỏng: ẩn, để nền của khung ảnh hiện ra (site.js markBroken). */
main img.is-broken { visibility: hidden; }

/* Banner: nút mũi tên dùng SVG. */
.slider-arrow .icon { width: 22px; height: 22px; }

/* Banner: hiện TRỌN ảnh theo đúng tỉ lệ gốc (người dùng yêu cầu 2026-09-26) thay cho khung cố định
   600 / 520 / 440 / 360px + object-fit: cover của demo — cao khung = cao ảnh, không cắt mép. */
.slider-container,
.slide-item { height: auto !important; max-height: none !important; aspect-ratio: auto !important; }
.slider-track { align-items: flex-start; height: auto; }
.slide-item a { height: auto; }
.slide-banner-img { height: auto !important; object-fit: contain !important; }

/* ═══ Trang Chuyên khoa /chuyen-khoa ════════════════════════════════════════════════════════════════════
   Bố cục thẻ theo demo (đầu thẻ ảnh tròn + tên + nhãn, mô tả, chân thẻ: dòng thông tin + nút cả bề ngang). Kiểu dáng
   đồng bộ trang chủ (người dùng 2026-09-29: "hiện đại hơn, đồng nhất font / font size với trang chủ"):
     • Nền khối xám nhạt var(--bg-light), thẻ trắng bo 14px không viền, bóng mềm, nổi lên khi rê — như thẻ Quy trình.
     • Dải màu nhấn 3px trên đầu thẻ — như thẻ Quy trình; ảnh tròn có quầng nhạt — như vòng số bước.
     • Thang chữ trang chủ: tên thẻ Barlow .98rem 700 in hoa (= .service-card-title), mô tả .82rem (= .service-card-desc),
       tiêu đề khối 1.75rem (.header-box). Màu nhấn theo bảng màu site (--primary-blue / --primary-red) thay Bootstrap. */
.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; }
button.sub-hero-btn { font-family: inherit; cursor: pointer; }

.sp-acc-blue   { --sp-acc: #1D68B8; }
.sp-acc-navy   { --sp-acc: #0C48A1; }
.sp-acc-red    { --sp-acc: #BA141A; }
.sp-acc-dark   { --sp-acc: #1e293b; }
.sp-acc-yellow { --sp-acc: #b7791f; }
.sp-acc-green  { --sp-acc: #15803d; }
.sp-tag-blue   { --sp-tag: #1D68B8; --sp-tag-fg: #fff; }
.sp-tag-navy   { --sp-tag: #0C48A1; --sp-tag-fg: #fff; }
.sp-tag-red    { --sp-tag: #BA141A; --sp-tag-fg: #fff; }
.sp-tag-dark   { --sp-tag: #1e293b; --sp-tag-fg: #fff; }
/* Vàng: chữ TRẮNG như mọi nhãn khác (người dùng 2026-10-06 — trước chữ đen là ngoại lệ duy nhất). Nền đậm hơn một tông
   (#f59e0b → #d97706) để chữ trắng còn đọc được (#f59e0b + trắng chỉ ~2:1). */
.sp-tag-yellow { --sp-tag: #d97706; --sp-tag-fg: #fff; }
.sp-tag-green  { --sp-tag: #15803d; --sp-tag-fg: #fff; }

.specialty-list-section { background: var(--bg-light); }
.specialty-list-section .header-box.text-center { text-align: center; }
.specialty-list-section .header-box.text-center .cont { max-width: 760px; margin-left: auto; margin-right: auto; }

.specialty-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
@media (max-width: 991px) { .specialty-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } }
@media (max-width: 767px) { .specialty-grid { grid-template-columns: 1fr; gap: 16px; } }

.specialty-card {
  position: relative; display: flex; flex-direction: column; height: 100%; overflow: hidden; scroll-margin-top: 120px;
  background: #fff; border-radius: 14px; box-shadow: 0 4px 18px rgba(15, 23, 42, .06);
  transition: transform .3s ease, box-shadow .3s ease;
}
.specialty-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: var(--sp-acc); z-index: 1; }
.specialty-card:hover { transform: translateY(-5px); box-shadow: 0 14px 30px rgba(15, 23, 42, .12); }
.specialty-card-body { position: relative; flex: 1; display: flex; flex-direction: column; padding: 24px 22px 22px; }
.specialty-card-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.specialty-card-icon {
  width: 52px; height: 52px; flex-shrink: 0; border-radius: 50%; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--sp-acc) 10%, #fff); color: var(--sp-acc);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--sp-acc) 7%, transparent);
  transition: background .3s ease, color .3s ease;
}
.specialty-card:hover .specialty-card-icon { background: var(--sp-acc); color: #fff; }
.specialty-card-icon img { width: 100%; height: 100%; object-fit: cover; background: #fff; }
.specialty-card-icon .icon { width: 24px; height: 24px; }
.specialty-card-titles { min-width: 0; }
.specialty-card-name {
  margin: 0; font-family: var(--font-heading); font-size: .98rem; font-weight: 700; line-height: 1.35;
  text-transform: uppercase; color: var(--sp-acc);
}
.specialty-card-tag {
  display: inline-block; margin-top: 6px; padding: 3px 10px; border-radius: 999px;
  font-size: .68rem; font-weight: 600; line-height: 1.4; letter-spacing: .2px;
  background: var(--sp-tag); color: var(--sp-tag-fg);
}
.specialty-card-tag.is-text { padding: 0; background: none; border-radius: 0; font-size: .75rem; color: var(--sp-tag); }
.specialty-card-desc {
  margin: 0 0 16px; font-size: .82rem; line-height: 1.6; color: var(--text-muted);
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.specialty-card-foot { margin-top: auto; padding-top: 14px; border-top: 1px dashed #e2e8f0; }
.specialty-card-info { display: flex; align-items: center; gap: 10px; min-width: 0; }
.specialty-card-info > .icon { width: 30px; height: 30px; padding: 7px; flex-shrink: 0; border-radius: 50%; background: #f1f5f9; color: var(--sp-acc); }
.specialty-card-info-text { min-width: 0; line-height: 1.35; }
.specialty-card-info-label { display: block; font-size: .7rem; font-weight: 500; text-transform: uppercase; letter-spacing: .3px; color: #94a3b8; }
.specialty-card-info-value { display: block; font-size: .85rem; font-weight: 600; color: var(--text-dark); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.specialty-card-info-value { color: var(--primary-red); }
a.specialty-card-info-value:hover { text-decoration: none; color: var(--primary-red-dark); }
.specialty-card-name a { color: inherit; }
.specialty-card-name a, .specialty-card-name a:hover { text-decoration: none; } /* không gạch chân khi rê (người dùng chốt) */
.specialty-card-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.specialty-card-btn {
  display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; padding: 10px 12px; white-space: nowrap;
  border: 0; border-radius: 8px; cursor: pointer; font-family: inherit; font-size: .85rem; font-weight: 600; line-height: 1.4;
  background: color-mix(in srgb, var(--sp-acc) 9%, #fff); color: var(--sp-acc); transition: background .25s ease, color .25s ease, box-shadow .25s ease;
}
.specialty-card-btn .icon { width: 16px; height: 16px; }
.specialty-card-btn:hover { background: var(--sp-acc); color: #fff; }
.specialty-card-btn.is-ghost { background: #fff; color: var(--text-dark); box-shadow: inset 0 0 0 1px #e2e8f0; }
.specialty-card-btn.is-ghost .icon { width: 14px; height: 14px; transition: transform .25s ease; }
.specialty-card-btn.is-ghost:hover { background: #fff; color: var(--sp-acc); box-shadow: inset 0 0 0 1px var(--sp-acc); }
.specialty-card-btn.is-ghost:hover .icon { transform: translateX(3px); }
.specialty-card-btn.is-solid { background: var(--sp-acc); color: #fff; box-shadow: 0 4px 12px color-mix(in srgb, var(--sp-acc) 30%, transparent); }
.specialty-card-btn.is-solid:hover { filter: brightness(.93); }

/* Ảnh tròn trên, căn giữa. */
.specialty-card.is-center .specialty-card-body { text-align: center; }
.specialty-card.is-center .specialty-card-head { flex-direction: column; gap: 12px; }
.specialty-card.is-center .specialty-card-info { justify-content: center; }
.specialty-card.is-center .specialty-card-info-text { text-align: left; }
/* Ảnh lớn trên – chữ dưới (16:9). */
.specialty-card-media { overflow: hidden; background: #f1f5f9; }
.specialty-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.specialty-card:hover .specialty-card-media img { transform: scale(1.06); }
.specialty-card.is-image-top .specialty-card-media { aspect-ratio: 16 / 9; }
/* Ảnh lớn bên trái. */
.specialty-card.is-image-left { flex-direction: row; }
.specialty-card.is-image-left .specialty-card-media { width: 38%; flex-shrink: 0; }
@media (max-width: 575px) {
  .specialty-card.is-image-left { flex-direction: column; }
  .specialty-card.is-image-left .specialty-card-media { width: 100%; aspect-ratio: 16 / 9; }
}
/* Ảnh nền – chữ đè lên. */
.specialty-card.is-image-bg { min-height: 300px; }
.specialty-card-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.specialty-card.is-image-bg .specialty-card-body { background: linear-gradient(180deg, rgba(15, 23, 42, .3), rgba(15, 23, 42, .85)); }
.specialty-card.is-image-bg .specialty-card-name,
.specialty-card.is-image-bg .specialty-card-info-value { color: #fff; }
.specialty-card.is-image-bg .specialty-card-desc { color: rgba(255, 255, 255, .85); }
.specialty-card.is-image-bg .specialty-card-info-label { color: rgba(255, 255, 255, .65); }
.specialty-card.is-image-bg .specialty-card-foot { border-top-color: rgba(255, 255, 255, .25); }
.specialty-card.is-image-bg .specialty-card-btn { background: rgba(255, 255, 255, .15); color: #fff; }
.specialty-card.is-image-bg .specialty-card-btn:hover { background: #fff; color: var(--sp-acc); }
.specialty-card.is-image-bg .specialty-card-btn.is-ghost { background: transparent; color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .6); }

/* Phân trang "Xem thêm": mục ẩn bọc trong .specialty-grid-item (vẫn là một ô lưới), hiện ra thì mờ dần lên. Nút dùng
   .btn-pill--blue của nút "Xem thêm giới thiệu" trang chủ. */
.specialty-grid-item { display: flex; }
.specialty-grid-item[hidden] { display: none; }
.specialty-grid-item > .specialty-card { flex: 1; }
.specialty-grid-item.is-revealed { animation: specialtyReveal .45s ease both; }
@keyframes specialtyReveal { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.specialty-more { display: flex; justify-content: center; margin-top: 36px; }
.specialty-more[hidden] { display: none; }
.specialty-more .btn-pill { border: 0; cursor: pointer; font-family: inherit; }
.specialty-more .btn-pill [data-load-more-count] { opacity: .75; font-weight: 400; }

/* Khối đăng ký khám (#dang-ky) — khung form-panel của trang Tiêm chủng; chừa menu dính khi cuộn tới. */
.specialty-booking-section { scroll-margin-top: 70px; }
/* Form đăng ký ở trang Chuyên khoa / chi tiết khoa / Đội ngũ bác sĩ: KHÔNG đổ bóng, thu về giữa rộng tối đa 960px (người
   dùng: "bỏ shadows, thu gọn vào giữa"). Viền xám mảnh thay bóng; ô nhập focus chỉ đổi màu viền. Trang Tiêm chủng giữ nguyên. */
.specialty-booking-section .form-panel { max-width: 960px; margin: 0 auto; box-shadow: none; border: 1px solid #e2e8f0; }
.specialty-booking-section .form-panel .form-card { padding: 30px 36px 34px; }
.specialty-booking-section .form-card-body .form-control:focus,
.specialty-booking-section .ps-select.is-open .ps-trigger,
.specialty-booking-section .pd-wrap.is-open .pd-input { box-shadow: none; border-color: var(--primary-blue); }
.specialty-booking-section .btn-panel-submit, .specialty-booking-section .btn-panel-submit:hover { box-shadow: none; }
.specialty-booking-section .ps-menu, .specialty-booking-section .pd-menu { box-shadow: none; border: 1px solid #dee2e6; }
@media (max-width: 575px) { .specialty-booking-section .form-panel .form-card { padding: 22px 18px 26px; } }
.specialty-list-section + .specialty-booking-section { background: #fff; }

/* ── Trang chi tiết chuyên khoa (/chuyen-khoa/{slug}) — không có bản gốc, dựng theo kiểu trang Chuyên khoa ── */
/* Đầu trang: CHỈ ảnh bìa (admin "Ảnh bìa trang chi tiết"; trống thì dải xanh đậm chuyển sắc) + breadcrumb ở chân ảnh
   trong viên mờ — người dùng chốt 2026-09-29. Tên, mô tả, nút nằm ở đầu thẻ nội dung (.specialty-intro). */
.specialty-hero {
  position: relative; overflow: hidden; display: flex; align-items: flex-end; min-height: 280px; padding: 0 0 26px; color: #fff;
  background: linear-gradient(120deg, var(--primary-blue-dark) 0%, var(--primary-blue) 60%, var(--primary-blue-light) 100%);
  border-bottom: 3px solid #f43f5e;
}
.specialty-hero:not(.has-cover) { min-height: 150px; }
.specialty-hero:not(.has-cover)::after {
  content: ""; position: absolute; right: -120px; top: -160px; width: 420px; height: 420px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .12), transparent 70%); pointer-events: none;
}
.specialty-hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.specialty-hero.has-cover::before { content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(180deg, rgba(8, 51, 117, 0) 40%, rgba(8, 51, 117, .75)); }
.specialty-hero-inner { position: relative; z-index: 1; width: 100%; }
/* Kiểu "Ảnh nền Background" (Shared/_PageHero — người dùng 2026-10-09): ảnh MỜ phủ trên dải xanh chuyển sắc, breadcrumb
   nằm trên; cao như dải không ảnh. Kiểu "Chỉ ảnh" dùng khuôn banner .page-sub-hero-full-section. */
.specialty-hero.has-bg .specialty-hero-bg { opacity: .25; }
.specialty-breadcrumb {
  display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 999px;
  background: rgba(15, 23, 42, .35); backdrop-filter: blur(6px); font-size: .85rem; color: rgba(255, 255, 255, .8);
}
.specialty-breadcrumb a { color: rgba(255, 255, 255, .85); }
.specialty-breadcrumb a:hover { color: #fff; text-decoration: none; }
.specialty-breadcrumb .icon { width: 14px; height: 14px; opacity: .6; }
.specialty-breadcrumb span { color: #fff; font-weight: 600; }
@media (max-width: 767px) {
  .specialty-hero { min-height: 180px; padding-bottom: 16px; }
  .specialty-hero:not(.has-cover) { min-height: 110px; }
  .specialty-breadcrumb { font-size: .75rem; padding: 6px 12px; border-radius: 14px; }
}

/* Đầu thẻ nội dung: ảnh tròn + tên khoa (H1) + nhãn ngắn, mô tả ngắn, hai nút (nút tổng đài viền xanh trên nền trắng). */
.specialty-intro { display: flex; align-items: center; gap: 18px; }
.specialty-intro-icon {
  width: 72px; height: 72px; flex-shrink: 0; border-radius: 50%; overflow: hidden; display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--sp-acc) 10%, #fff); color: var(--sp-acc);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--sp-acc) 7%, transparent);
}
.specialty-intro-icon img { width: 100%; height: 100%; object-fit: cover; background: #fff; }
.specialty-intro-icon .icon { width: 32px; height: 32px; }
.specialty-intro-text { min-width: 0; }
.specialty-intro-title { margin: 0; font-family: var(--font-heading); font-size: 1.6rem; font-weight: 800; line-height: 1.25; letter-spacing: .3px; text-transform: uppercase; color: var(--sp-acc); }
.specialty-intro-text .specialty-card-tag { margin-top: 8px; }
.specialty-intro-desc { margin: 16px 0 0; font-size: .95rem; line-height: 1.7; color: var(--text-muted); }
.specialty-intro-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 20px 0 26px; padding-bottom: 26px; border-bottom: 1px dashed #e2e8f0; }
.specialty-intro-actions .sub-hero-btn--hotline { background: #fff; border-color: var(--primary-blue); color: var(--primary-blue); backdrop-filter: none; }
.specialty-intro-actions .sub-hero-btn--hotline .icon { color: var(--primary-red); }
.specialty-intro-actions .sub-hero-btn--hotline:hover { background: var(--primary-blue); color: #fff; }
.specialty-intro-actions .sub-hero-btn--hotline:hover .icon { color: #ffc107; }
@media (max-width: 767px) {
  .specialty-intro { gap: 12px; }
  .specialty-intro-icon { width: 54px; height: 54px; }
  .specialty-intro-icon .icon { width: 26px; height: 26px; }
  .specialty-intro-title { font-size: 1.2rem; }
}

.specialty-detail-section { background: var(--bg-light); }
.specialty-detail-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 28px; align-items: start; }
@media (max-width: 991px) { .specialty-detail-grid { grid-template-columns: 1fr; } }
.specialty-detail-card { background: #fff; border-radius: 14px; padding: 28px 30px; box-shadow: 0 4px 18px rgba(15, 23, 42, .06); }
.specialty-detail-card .header-box { margin-bottom: 1.4rem; }
.specialty-detail-card .header-box .title { font-size: 1.35rem; }
.specialty-detail-content { font-size: .95rem; }
.specialty-detail-children { margin-top: 32px; }
.specialty-detail-subtitle { margin: 0 0 16px; font-size: 1.1rem; font-weight: 800; text-transform: uppercase; color: var(--primary-blue); }
.specialty-grid.is-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 767px) { .specialty-grid.is-two { grid-template-columns: 1fr; } .specialty-detail-card { padding: 22px 18px; } }

.specialty-detail-side { display: flex; flex-direction: column; gap: 20px; position: sticky; top: var(--sticky-top); }
@media (max-width: 991px) { .specialty-detail-side { position: static; } }
.specialty-side-card { position: relative; overflow: hidden; background: #fff; border-radius: 14px; padding: 22px; box-shadow: 0 4px 18px rgba(15, 23, 42, .06); }
.specialty-side-card.sp-acc-blue, .specialty-side-card.sp-acc-navy, .specialty-side-card.sp-acc-red,
.specialty-side-card.sp-acc-dark, .specialty-side-card.sp-acc-yellow, .specialty-side-card.sp-acc-green { border-top: 3px solid var(--sp-acc); }
.specialty-side-title { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: .98rem; font-weight: 700; text-transform: uppercase; color: var(--text-dark); }
.specialty-side-title .icon { width: 18px; height: 18px; color: var(--primary-red); }
.specialty-side-desc { margin: 0 0 16px; font-size: .82rem; line-height: 1.6; color: var(--text-muted); }
.specialty-side-card .specialty-card-info { padding: 12px; margin-bottom: 14px; border-radius: 10px; background: var(--bg-light); }
.specialty-side-card .specialty-card-info > .icon { background: #fff; }
/* Nút đặt lịch của thẻ bên: theo CHUẨN NÚT GỬI FORM (đỏ, Barlow 700 in hoa, cao 48px, bo 8px) — đồng bộ nút đỏ đầu thẻ. */
.specialty-side-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 48px; padding: 12px 20px;
  border-radius: 8px; background: #dc3545; color: #fff; font-family: var(--font-heading); font-size: 1rem; font-weight: 700;
  line-height: 1.2; letter-spacing: .3px; text-transform: uppercase; box-shadow: 0 6px 16px rgba(220, 53, 69, .25);
  transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.specialty-side-btn .icon { width: 18px; height: 18px; flex-shrink: 0; }
.specialty-side-btn:hover { background: #bb2d3b; color: #fff; transform: translateY(-1px); box-shadow: 0 8px 20px rgba(220, 53, 69, .32); }
.specialty-side-hotline { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 12px; font-family: var(--font-heading); font-size: 1.05rem; font-weight: 800; color: var(--primary-red); }
.specialty-side-hotline .icon { width: 18px; height: 18px; }
.specialty-side-list { list-style: none; margin: 8px 0 0; padding: 0; }
.specialty-side-list li + li { border-top: 1px dashed #e2e8f0; }
.specialty-side-list a { display: flex; align-items: center; gap: 10px; padding: 10px 2px; font-size: .88rem; color: var(--text-dark); transition: color .2s ease, padding .2s ease; }
.specialty-side-list a:hover { color: var(--sp-acc); padding-left: 6px; }
.specialty-side-dot { width: 22px; height: 22px; flex-shrink: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--sp-acc) 10%, #fff); color: var(--sp-acc); }
.specialty-side-dot .icon { width: 13px; height: 13px; }
.specialty-side-all { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; font-size: .85rem; font-weight: 600; color: var(--primary-blue); }
.specialty-side-all .icon { width: 14px; height: 14px; }
/* Đội ngũ bác sĩ của khoa (trang chi tiết khoa) — thẻ chung Page/_DoctorCard; nền trắng xen khối form nền xám. */
.specialty-doctors-section { background: #fff; }
.specialty-doctors-section .header-box.text-center { text-align: center; }
.specialty-doctors-section .header-box.text-center .cont { max-width: 720px; margin-left: auto; margin-right: auto; }

/* ── Gói dịch vụ của khoa (trang chi tiết) — nội dung như thẻ gói Thai sản, kiểu dáng như thẻ chuyên khoa ── */
.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(--primary-red), var(--primary-blue)); }
.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(--primary-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-blue); }
.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(--primary-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-red); }
.sp-pkg-benefits { flex: 1; padding: 14px 14px 10px; margin-bottom: 18px; border-radius: 10px; background: var(--bg-light); }
.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-red); }
.sp-pkg-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: auto; padding: 11px 16px; border-radius: 8px;
  background: var(--primary-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(--primary-red-dark); transform: translateY(-1px); }
.sp-pkg-card:not(:has(.sp-pkg-benefits)) .sp-pkg-price { flex: 1; align-content: flex-start; }

/* ── Trang Đội ngũ bác sĩ (/doi-ngu-bac-si) — hộp lọc demo ".bg-light p-4 rounded-3 border shadow-sm" (2 cột: lọc chuyên
   khoa | tìm tên), kiểu dáng đồng bộ thẻ chuyên khoa. Thẻ bác sĩ dùng chung lớp .specialty-card*. ── */
.doc-filter {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-bottom: 36px; padding: 22px 24px;
  background: #fff; border-radius: 14px; box-shadow: 0 4px 18px rgba(15, 23, 42, .06);
}
@media (max-width: 767px) { .doc-filter { grid-template-columns: 1fr; gap: 14px; padding: 18px; margin-bottom: 24px; } }
.doc-filter-field label { display: block; margin-bottom: 8px; font-size: .85rem; font-weight: 600; color: var(--text-dark); }
.doc-filter .form-control, .doc-filter .ps-trigger {
  display: flex; align-items: center; width: 100%; min-height: 46px; padding: 10px 14px; border: 1px solid #dee2e6; border-radius: 8px;
  background: #fff; font-family: inherit; font-size: .92rem; color: var(--text-dark); transition: border-color .15s, box-shadow .15s;
}
/* Ô lọc KHÔNG đổ bóng (người dùng chốt): mở / focus chỉ đổi màu viền; hộp thả viền xám mảnh thay bóng. */
.doc-filter .form-control:focus, .doc-filter .ps-select.is-open .ps-trigger { outline: 0; border-color: var(--primary-blue); box-shadow: none; }
.doc-filter .ps-menu { box-shadow: none; border: 1px solid #dee2e6; }
.doc-filter .ps-search input:focus { box-shadow: none; }
.doc-filter .ps-trigger { justify-content: space-between; cursor: pointer; text-align: left; }
.doc-filter-search { position: relative; }
.doc-filter-search > .icon { position: absolute; left: 14px; top: 50%; width: 17px; height: 17px; transform: translateY(-50%); color: #94a3b8; pointer-events: none; }
.doc-filter-search .form-control { padding-left: 40px; }
.doc-filter-search .form-control::placeholder { color: #94a3b8; }
.doc-empty { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 10px 0 0; padding: 28px; border-radius: 14px; background: #fff; color: var(--text-muted); font-size: .92rem; }
.doc-empty[hidden] { display: none; }
.doc-empty .icon { width: 18px; height: 18px; }
/* Ảnh bác sĩ: kiểu "ảnh tròn trên, căn giữa" (mặc định — bố cục demo) là ô VUÔNG bo góc 112px như avatar 130px của demo. */
/* Ảnh bác sĩ: khung VUÔNG (aspect-ratio 1/1, không co), ảnh CONTAIN căn giữa trên nền xanh nhạt — không cắt đầu / vai
   (người dùng chốt). Kiểu "ảnh tròn trên, căn giữa" (mặc định — bố cục demo) là ô vuông bo góc 112px. */
.doctor-card-photo { aspect-ratio: 1 / 1; flex-shrink: 0; background: linear-gradient(180deg, #f1f6fd, #e3edf9); }
.doctor-card.is-center .doctor-card-photo { width: 112px; height: 112px; border-radius: 18px; }
.doctor-card-photo img { width: 100%; height: 100%; object-fit: contain; object-position: center; background: transparent; }
.doctor-card-actions .specialty-card-btn { padding-left: 8px; padding-right: 8px; font-size: .82rem; }
.doctor-card.is-center .doctor-card-photo .icon { width: 50px; height: 50px; stroke-width: 1.4; }
.doctor-card .specialty-card-info > .icon { color: var(--accent-gold); }
.specialty-card-info-value.is-wrap { white-space: normal; overflow: visible; font-weight: 500; }
.specialty-doctors-all { display: flex; justify-content: center; margin-top: 28px; }

/* Popup "Quá trình công tác" (trang Đội ngũ bác sĩ) — khung popup site + đầu hồ sơ (ảnh vuông contain, tên, chức vụ, chuyên
   môn) + các mục hồ sơ kiểu khối bác sĩ nổi bật trang chủ (.doctor-detail-block) + nút đặt lịch đỏ chuẩn. */
.hospital-modal-dialog.doctor-profile-dialog { max-width: 720px; }
.doc-pop-head { display: flex; align-items: center; gap: 18px; padding-bottom: 18px; margin-bottom: 20px; border-bottom: 1px dashed #e2e8f0; }
.doc-pop-photo {
  width: 96px; height: 96px; flex-shrink: 0; border-radius: 16px; overflow: hidden; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, #f1f6fd, #e3edf9); color: var(--primary-blue);
}
.doc-pop-photo img { width: 100%; height: 100%; object-fit: contain; object-position: center; }
.doc-pop-photo .icon { width: 44px; height: 44px; stroke-width: 1.4; }
.doc-pop-text { min-width: 0; }
.doc-pop-name { margin: 0; font-family: var(--font-heading); font-size: 1.15rem; font-weight: 800; line-height: 1.3; text-transform: uppercase; color: var(--sp-acc, var(--primary-blue)); }
.doc-pop-role { margin: 4px 0 0; font-size: .85rem; font-weight: 600; line-height: 1.45; color: var(--primary-red); }
.doc-pop-note { display: flex; align-items: flex-start; gap: 6px; margin: 6px 0 0; font-size: .82rem; line-height: 1.5; color: var(--text-muted); }
.doc-pop-note .icon { width: 15px; height: 15px; flex-shrink: 0; margin-top: 2px; color: var(--accent-gold); }
.doctor-right-details.doc-pop-sections { padding: 0; border: 0; background: none; }
.doc-pop-book { margin-top: 22px; }
@media (max-width: 575px) { .doc-pop-head { gap: 12px; } .doc-pop-photo { width: 72px; height: 72px; } .doc-pop-name { font-size: 1rem; } }

/* Nội dung trang (Cấu hình trang) dưới lưới thẻ. */
.specialty-page-content { margin-top: 48px; font-size: .95rem; line-height: 1.75; color: var(--text); }
.specialty-page-content img { max-width: 100%; height: auto; }
.specialty-page-content h2, .specialty-page-content h3 { margin: 1.2em 0 .5em; }

/* ═══ CHUẨN NÚT GỬI FORM (người dùng 2026-09-29: "đồng nhất UI button các form") ═══════════════════════════════════
   Một kiểu cho MỌI nút gửi: form trang chủ (.btn-form-submit), popup (.btn-modal-submit), thẻ trang con Thai sản
   (.btn-booking-submit), khung panel Tiêm chủng / Chuyên khoa (.btn-panel-submit). Đỏ CTA của site (#dc3545 — màu nút
   "ĐẶT LỊCH HẸN KHÁM"), Barlow 700 in hoa, cao 48px, bo 8px, icon "gửi" 18px, bóng đỏ nhẹ. Nút trong khung panel
   căn giữa (khung rộng cả trang); các form khác trải hết bề ngang. Đặt CUỐI file để đè các kiểu riêng cũ.
   Nút chính của popup xác nhận / cảm ơn (.thanks-btn--ok) cùng màu + chữ; nút phụ viền xám giữ nguyên. */
.btn-form-submit, .form-home-body .btn-form-submit, .btn-modal-submit, .btn-booking-submit, .btn-panel-submit {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 48px; margin: 0;
  padding: 12px 28px; border: 0; border-radius: 8px; cursor: pointer;
  background: #dc3545; color: #fff; font-family: var(--font-heading); font-size: 1rem; font-weight: 700; line-height: 1.2;
  letter-spacing: .3px; text-transform: uppercase; box-shadow: 0 6px 16px rgba(220, 53, 69, .25);
  transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.btn-form-submit:hover, .form-home-body .btn-form-submit:hover, .btn-modal-submit:hover, .btn-booking-submit:hover, .btn-panel-submit:hover {
  background: #bb2d3b; color: #fff; transform: translateY(-1px); box-shadow: 0 8px 20px rgba(220, 53, 69, .32);
}
.btn-form-submit .icon, .btn-modal-submit .icon, .btn-booking-submit .icon, .btn-panel-submit .icon { width: 18px; height: 18px; flex-shrink: 0; }
.btn-form-submit:disabled, .btn-modal-submit:disabled, .btn-booking-submit:disabled, .btn-panel-submit:disabled { opacity: .65; cursor: wait; transform: none; }
.btn-panel-submit { display: inline-flex; width: auto; min-width: 320px; }
@media (max-width: 575px) { .btn-panel-submit { display: flex; width: 100%; min-width: 0; } }

.thanks-btn { min-height: 44px; border-radius: 8px; font-family: var(--font-heading); font-weight: 700; font-size: .95rem; letter-spacing: .3px; text-transform: uppercase; }
.thanks-btn--ok { background: #dc3545; border-color: #dc3545; color: #fff; }
.thanks-btn--ok:hover { background: #bb2d3b; border-color: #bb2d3b; color: #fff; }
.review-agree input { accent-color: #dc3545; }

/* ═══ CHUẨN NÚT DƯỚI BANNER (người dùng 2026-09-29: "các button đang khác nhau, đồng nhất UI") ════════════════════
   Mọi nút ở thanh nút dưới banner trang con (Giới thiệu, Thai sản, Tiêm chủng, Chuyên khoa) và dải đầu trang chi tiết
   chuyên khoa: CÙNG cỡ — Barlow 700 in hoa 1rem (thang chữ nút gửi form), cao 48px, viền 2px (nút đặc viền cùng màu nền
   nên cao bằng nút viền trắng), bo tròn 50px, icon 18px. Chỉ khác MÀU theo vai trò: đặt lịch đỏ, tra cứu vàng, tổng đài
   viền trắng trong suốt. Trước: đặt lịch 16.8px/900 viền 1px, tổng đài 16px/800 viền 2px, dải chi tiết khoa 14px. */
.sub-hero-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 26px;
  border-radius: 50px; border-width: 2px; border-style: solid;
  font-family: var(--font-heading); font-size: 1rem; font-weight: 700; line-height: 1.2; letter-spacing: .3px;
  text-transform: uppercase; white-space: nowrap; cursor: pointer;
}
.sub-hero-btn .icon { width: 18px; height: 18px; flex-shrink: 0; }
.sub-hero-btn--book { border-color: #dc3545; }
.sub-hero-btn--calc { border-color: #ffc107; }
.sub-hero-btn--hotline { border-color: rgba(255, 255, 255, .85); background: rgba(255, 255, 255, .12); }
@media (max-width: 767px) {
  .sub-hero-btn { min-height: 38px; padding: 0 14px; font-size: .78rem !important; gap: 6px; }
  .sub-hero-btn .icon { width: 15px; height: 15px; }
}

/* ═══ THANG CHỮ CHUNG (người dùng 2026-09-29: "font size / font weight chưa đồng nhất") ════════════════════════════════
   Một thang cho các trang module (Chuyên khoa, chi tiết khoa, Đội ngũ bác sĩ) và MỌI form dạng thẻ / panel:
     • Tiêu đề khối   Barlow 800 1.75rem in hoa (.header-box — giữ nguyên)
     • Tiêu đề thẻ    Barlow 700 .98rem in hoa (tên khoa, tên bác sĩ, tên gói)
     • Chữ thường     Roboto 400 .82–.95rem · nhãn ô nhập Roboto 600 .85rem #1e293b
     • Ô nhập / chọn  Roboto 400 .9rem, cao 46px, viền #dee2e6 bo 8px; focus chỉ đổi viền xanh site (không quầng sáng)
     • MỌI NÚT        Barlow 700 in hoa (nút gửi / banner 1rem — đã chuẩn; nút thẻ, "Xem thêm" .82–.88rem)
   Đầu khung form panel đổi từ xanh Bootstrap #0d6efd sang dải xanh đậm của site (như đầu popup), tiêu đề Barlow 800 in hoa. */

/* Đầu khung form panel (Tiêm chủng, Chuyên khoa, Bác sĩ) */
.form-panel-header { padding: 30px 32px 26px; background: linear-gradient(135deg, var(--primary-blue) 0%, var(--primary-blue-dark) 100%); }
.form-panel-title { margin: 0 0 6px; font-family: var(--font-heading); font-size: 1.5rem; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; color: #fff; }
.form-panel-desc { font-size: .92rem; font-weight: 400; opacity: .85; }
@media (max-width: 575px) { .form-panel-header { padding: 22px 18px 18px; } .form-panel-title { font-size: 1.2rem; } .form-panel-desc { font-size: .85rem; } }

/* Nhãn + ô nhập của form dạng thẻ / panel, hộp lọc bác sĩ — cùng một kiểu */
.form-card-body label, .doc-filter-field label { margin-bottom: 7px; font-family: var(--font-main); font-size: .85rem; font-weight: 600; color: #1e293b; }
.form-card-body .form-control, .doc-filter .form-control, .doc-filter .ps-trigger {
  font-family: var(--font-main); font-size: .9rem; font-weight: 400; color: #1e293b; border: 1px solid #dee2e6; border-radius: 8px;
}
.form-card-body input.form-control, .form-card-body .ps-trigger, .form-card-body .pd-input,
.doc-filter .form-control, .doc-filter .ps-trigger { height: 46px; min-height: 46px; }
.form-card-body .form-control::placeholder, .doc-filter .form-control::placeholder { color: #94a3b8; opacity: 1; }
.form-card-body .ps-label.is-placeholder, .doc-filter .ps-label.is-placeholder { color: #94a3b8; }
.form-card-body .form-control:focus, .form-card-body .ps-select.is-open .ps-trigger, .form-card-body .pd-wrap.is-open .pd-input,
.doc-filter .form-control:focus, .doc-filter .ps-select.is-open .ps-trigger { outline: 0; border-color: var(--primary-blue); box-shadow: none; }
.form-card-body .form-control.is-invalid { box-shadow: none; }
.form-card-body .form-help { font-size: .8rem; color: #94a3b8; }
.form-card-body .form-group--file { border-radius: 8px; }

/* Nút thẻ, nút "Xem thêm" — Barlow 700 in hoa như mọi nút khác */
.specialty-card-btn, .doctor-card-actions .specialty-card-btn {
  font-family: var(--font-heading); font-size: .82rem; font-weight: 700; letter-spacing: .3px; text-transform: uppercase;
}
.btn-pill, .specialty-more .btn-pill { font-family: var(--font-heading); font-size: .88rem; font-weight: 700; letter-spacing: .3px; }
.specialty-more .btn-pill [data-load-more-count], .specialty-more .btn-pill [data-doc-more-count] { font-weight: 500; opacity: .8; }

/* Chữ phụ trên thẻ */
.specialty-card-tag { font-size: .72rem; font-weight: 600; }
.specialty-card-tag.is-text { font-size: .8rem; font-weight: 600; }
.specialty-card-info-value { font-size: .85rem; }
.specialty-card-info-value.is-wrap { font-weight: 500; }

/* Thẻ bác sĩ — chỉnh theo người dùng 2026-09-29: chức vụ chữ thường (không đậm), mô tả chữ to hơn, dòng chuyên môn không
   icon; nút "Quá trình công tác" rê chuột đổi NỀN như nút "Đặt lịch khám bác sĩ" (nền nhạt màu nhấn, chữ màu nhấn), icon
   đứng yên; bác sĩ chưa có hồ sơ thì nút mờ, không bấm được. */
/* Khung ảnh bác sĩ giữ nền xanh nhạt cả khi rê thẻ — nền màu nhấn (như icon chuyên khoa) làm lộ hai dải màu bên ảnh contain. */
.doctor-card:hover .doctor-card-photo { background: linear-gradient(180deg, #f1f6fd, #e3edf9); color: var(--sp-acc); }
.doctor-card .specialty-card-tag, .doctor-card .specialty-card-tag.is-text { font-weight: 400; }
.doctor-card .specialty-card-desc { font-size: .9rem; line-height: 1.65; }
.doctor-card .specialty-card-info.is-plain { justify-content: center; }
.doctor-card:not(.is-center) .specialty-card-info.is-plain { justify-content: flex-start; }
.doctor-card.is-center .specialty-card-info.is-plain .specialty-card-info-text { text-align: center; }  /* dòng chuyên khoa dài xuống dòng vẫn căn giữa */
.doctor-card .specialty-card-info.is-plain .specialty-card-info-value { font-size: .88rem; }
/* Rê chuột: GIỐNG HỆT nút "Đặt lịch khám bác sĩ" khi rê — nền đặc màu nhấn, chữ + icon trắng (người dùng chốt). */
.doctor-card-actions .specialty-card-btn.is-ghost:hover:not(:disabled) { background: var(--sp-acc); color: #fff; box-shadow: none; }
.doctor-card-actions .specialty-card-btn.is-ghost .icon,
.doctor-card-actions .specialty-card-btn.is-ghost:hover .icon { transform: none; transition: none; }
.doctor-card-actions .specialty-card-btn:disabled { opacity: .45; cursor: not-allowed; background: #fff; color: var(--text-dark); box-shadow: inset 0 0 0 1px #e2e8f0; }

/* Trang Đội ngũ bác sĩ — KHÔNG đổ bóng, viền mảnh nhạt (người dùng 2026-09-29): hộp lọc, thẻ bác sĩ, quầng khung ảnh. Áp cho cả khối bác sĩ ở trang chi tiết khoa (cùng thẻ). Rê
   thẻ không nổi lên — chỉ viền đổi sang màu nhấn. Dải màu nhấn trên đầu thẻ giữ nguyên. */
.doctor-list-section .doc-filter { box-shadow: none; border: 1px solid #e5eaf1; }
.doctor-list-section .specialty-card, .specialty-doctors-section .specialty-card { box-shadow: none; border: 1px solid #e5eaf1; transition: border-color .2s ease; }
.doctor-list-section .specialty-card, .specialty-doctors-section .specialty-card:hover { transform: none; box-shadow: none; border-color: color-mix(in srgb, var(--sp-acc) 45%, #e5eaf1); }
.doctor-list-section .specialty-card, .specialty-doctors-section .specialty-card-icon, .doctor-list-section .doctor-card-photo { box-shadow: none; border: 1px solid #e5eaf1; }
.doctor-list-section .doc-empty { border: 1px solid #e5eaf1; }

/* Thẻ bác sĩ — thang chữ rõ thứ bậc + màu đen (người dùng 2026-09-29: "mô tả màu đen, tên màu đen, kiểm tra font size,
   UI còn thô"). Tên Barlow 700 1.1rem ĐEN · chức vụ Roboto .85rem đỏ · mô tả Roboto .88rem ĐEN, tối đa 3 dòng · chuyên môn
   Roboto 500 .85rem xanh site · nút Barlow 700 .8rem. Vạch ngăn liền nhạt thay nét đứt; khoảng cách đều nhịp 12–16px. */
.doctor-card .specialty-card-body { padding: 24px 22px 20px; }
.doctor-card .specialty-card-head { margin-bottom: 12px; }
.doctor-card.is-center .specialty-card-head { gap: 14px; }
.doctor-card .specialty-card-name { font-size: 1.1rem; font-weight: 700; line-height: 1.3; letter-spacing: .2px; color: #1e293b; }
.doctor-card .specialty-card-tag, .doctor-card .specialty-card-tag.is-text { margin-top: 5px; font-size: .85rem; font-weight: 400; line-height: 1.45; color: var(--primary-red); }
.doctor-card .specialty-card-desc {
  margin: 0 0 14px; font-size: .88rem; line-height: 1.65; color: #1e293b; -webkit-line-clamp: 3;
}
.doctor-card .specialty-card-foot { padding-top: 14px; border-top: 1px solid #eef2f7; }
.doctor-card .specialty-card-info.is-plain .specialty-card-info-value { font-size: .85rem; font-weight: 500; line-height: 1.5; color: var(--primary-blue); }
.doctor-card-actions { margin-top: 12px; gap: 8px; }
.doctor-card-actions .specialty-card-btn { min-height: 40px; font-size: .8rem; }
/* Thẻ hẹp (điện thoại, 3 cột màn nhỏ): hai nút xếp chồng thay vì tràn chữ — đo theo bề rộng CHÍNH thẻ (container query). */
.doctor-card { container-type: inline-size; }
@container (max-width: 400px) { .doctor-card-actions { grid-template-columns: 1fr; } }

/* Trang chi tiết khoa — MỘT CỘT (người dùng 2026-09-29): thông tin khoa tràn bề ngang; bác sĩ 4 thẻ / hàng; "Chuyên khoa
   khác" cuối trang lưới 3 như /chuyen-khoa. Nền các khối xen kẽ: thông tin xám nhạt → bác sĩ trắng → gói xám nhạt →
   form trắng → chuyên khoa khác xám nhạt. */
.specialty-grid.is-four { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 1199px) { .specialty-grid.is-four { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 991px)  { .specialty-grid.is-four { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575px)  { .specialty-grid.is-four { grid-template-columns: 1fr; } }
.specialty-detail-section .specialty-detail-card { box-shadow: none; border: 1px solid #e5eaf1; }
.specialty-detail-children { margin-top: 32px; }
.specialty-detail-section + .specialty-doctors-section, .specialty-doctors-section { background: #fff; }
.specialty-packages-section { background: var(--bg-light); }
.specialty-detail-section ~ .specialty-booking-section { background: #fff; }
.specialty-others-section { background: var(--bg-light); }
.specialty-others-section .header-box.text-center { text-align: center; }
/* Dòng chuyên môn (ô "Chuyên môn" ở admin) — dòng riêng dưới chức vụ, chữ đen nghiêng nhẹ; dòng chuyên khoa (tự điền) ở chân thẻ
   màu xanh — hai dòng tách biệt (người dùng chốt 2026-09-29). */
.doctor-card-expertise { margin: 4px 0 0; font-size: .85rem; font-style: italic; line-height: 1.45; color: #475569; }

/* Đầu thẻ thông tin khoa — HÀNG NGANG, không icon (người dùng 2026-09-29): trái tên + nhãn, phải hai nút; vạch mảnh ngăn với
   phần "Giới thiệu chuyên khoa". Điện thoại: xếp dọc, hai nút chia đôi bề ngang. */
.specialty-detail-card .specialty-intro {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px 28px;
  padding-bottom: 22px; margin-bottom: 26px; border-bottom: 1px solid #eef2f7;
}
.specialty-detail-card .specialty-intro-text { flex: 1 1 320px; min-width: 0; }
.specialty-detail-card .specialty-intro-title { font-size: 1.6rem; line-height: 1.25; }
.specialty-detail-card .specialty-intro-text .specialty-card-tag { margin-top: 10px; }
.specialty-detail-card .specialty-intro-actions { flex: 0 0 auto; margin: 0; padding: 0; border: 0; gap: 12px; }
.specialty-detail-card .specialty-intro-desc { margin: -8px 0 26px; }
/* Hai nút đầu thẻ KHÔNG đổ bóng / phát sáng (người dùng chốt); dòng thông tin khoa (Trưởng khoa / Hotline cấp cứu) dưới nhãn. */
/* Hai nút CÙNG hiệu ứng (người dùng chốt): đứng yên, không bóng; rê chuột chỉ đổi nền — đặt lịch đỏ đậm hơn, tổng đài nền xanh
   site chữ trắng; cùng thời gian chuyển .2s. */
.specialty-detail-card .specialty-intro-actions .sub-hero-btn { box-shadow: none; transform: none; transition: background-color .2s ease, color .2s ease, border-color .2s ease; }
.specialty-detail-card .specialty-intro-actions .sub-hero-btn:hover { box-shadow: none; transform: none; }
.specialty-detail-card .specialty-intro-actions .sub-hero-btn--book:hover { background: #bb2d3b; border-color: #bb2d3b; color: #fff; }
.specialty-detail-card .specialty-intro-actions .sub-hero-btn--hotline:hover { background: var(--primary-blue); border-color: var(--primary-blue); color: #fff; }
.specialty-detail-card .specialty-intro-actions .sub-hero-btn--hotline:hover .icon { color: #fff; }

/* Mô tả khoa nổi bật (thay tiêu đề "Giới thiệu chuyên khoa") — MỘT KIỂU cho mọi khoa (người dùng chốt: "không muốn mỗi khoa
   1 UI"): nền xanh rất nhạt + vạch trái xanh site, chữ 1rem / 400 đen — KHÔNG đổi theo màu nhấn từng khoa. */
.specialty-lead {
  margin: 0 0 22px; padding: 18px 22px; border-left: 4px solid var(--primary-blue); border-radius: 0 10px 10px 0;
  background: #f1f6fd; font-size: 1rem; font-weight: 400; line-height: 1.75; color: #1e293b;
}
/* Tên khoa ở trang chi tiết: luôn xanh site cho mọi khoa (màu nhấn chỉ dùng cho thẻ ở trang danh sách). */
.specialty-detail-card .specialty-intro-title { color: var(--primary-blue); }
.specialty-lead p:last-child { margin-bottom: 0; }
.specialty-lead + .specialty-detail-content { margin-top: 4px; }
.specialty-detail-card > .specialty-lead:last-child { margin-bottom: 0; }
@media (max-width: 767px) { .specialty-lead { padding: 14px 16px; font-size: .95rem; } }
.specialty-intro-info { margin: 10px 0 0; font-size: .9rem; line-height: 1.5; color: #475569; }
.specialty-intro-info span { margin-right: 4px; }
.specialty-intro-info strong { font-weight: 600; color: #1e293b; }
.specialty-intro-info a { font-weight: 700; color: var(--primary-red); }
@media (max-width: 767px) {
  .specialty-detail-card .specialty-intro { flex-direction: column; align-items: stretch; }
  .specialty-detail-card .specialty-intro-text { flex: none; }  /* xếp dọc: bỏ cơ sở 320px (thành chiều cao) */
  .specialty-detail-card .specialty-intro-title { font-size: 1.25rem; }
  .specialty-detail-card .specialty-intro-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); }
  .specialty-detail-card .specialty-intro-actions .sub-hero-btn { justify-content: center; }
}

/* ═══ Ngăn kéo menu điện thoại — CHÉP .nav-drawer của thietbigasmk (wwwroot/assets/css/style.css) ════════════════════════
   Đổi bắt buộc: biến màu --sd-* → màu site (--primary-blue…); z-index trên header dính của site (9999 / 10000); dải đầu
   logo tròn + tên bệnh viện (site chỉ có logo vuông); chữ cấp 1 15px đậm vừa (người dùng: "menu hơi nhỏ" — bản gốc 14px),
   cấp 2 14px; mục "nổi bật" chữ đỏ; mục đang xem tô xanh. */
.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;
}
/* Bóng CHỈ khi mở — lúc đóng panel nằm ngoài màn hình, bóng tràn vào mép trái (bug bản gốc đã ghi). */
body.drawer-open .nav-drawer { transform: translateX(0); box-shadow: 2px 0 12px rgba(0, 0, 0, .25); }
.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-blue) 0%, var(--primary-blue-dark) 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-blue); }
.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-blue); cursor: pointer;
}
.nav-drawer .nd-search__box button .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 {
  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-blue); }
.nav-drawer .nd-row { display: flex; align-items: stretch; position: relative; }
.nav-drawer .nd-row > a { 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); }
/* Nhánh đang mở: lớp nền tuyệt đối bo góc, thụt vào — ::before nên KHÔNG chiếm chỗ, không giật khi mở (bản gốc). */
.nav-drawer li.nd-open > .nd-row::before { content: ""; position: absolute; inset: 3px 8px; background: #e8f0fb; border-radius: 8px; }
/* Ký hiệu đầu dòng theo cấp (bản gốc): cấp 1 ô vuông, cấp 2 tam giác. */
.nav-drawer .nd-menu > li > a, .nav-drawer .nd-menu > li > .nd-row > a { gap: 10px; }
.nav-drawer .nd-menu > li > a::before, .nav-drawer .nd-menu > li > .nd-row > a::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; background: none; border-radius: 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-blue); font-weight: 700; }
.nav-drawer .nd-menu > li.is-highlight > a, .nav-drawer .nd-menu > li.is-highlight > .nd-row > a { color: #e11d48; font-weight: 700; }

.nav-drawer .nd-contact { margin: 14px 16px 22px; padding: 16px; border: 1px solid #e2e8f0; border-radius: 12px; background: #f8fafc; }
.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-blue);
}
.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-blue);
}
.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-blue); }
.nav-drawer a.nd-contact__val.is-emergency { color: #e11d48; font-weight: 700; }

/* ═══ Header điện thoại — CHÉP .m-header của thietbigasmk: logo trái, nút tìm kiếm + menu phải (42px, chỉ icon), viền mảnh
   dưới thay bóng. Bảng tìm kiếm trượt phải — CHÉP .search-panel (450px, dải đầu xanh + ✕, ô nhập 48px + nút kính lúp nền xanh). */
.mobile-bar.m-header { height: auto; min-height: 64px; padding: 6px 6px 6px 14px; box-shadow: none; 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-blue); cursor: pointer;
}
.m-header .mh-btn:active { background: rgba(0, 0, 0, .06); }
/* Bản gốc thietbigasmk 24px (đi với logo ngang); ở đây logo tròn + tên bệnh viện chữ 13.4px → 24px nặng hơn header, người
   dùng 2026-10-02 yêu cầu nhỏ lại cho đồng bộ: 20px (gần cờ ngôn ngữ 24×16). Vùng bấm .mh-btn giữ 42px. */
.m-header .mh-btn .icon { width: 20px; height: 20px; }
body.search-open .ui-overlay { opacity: 1; visibility: visible; }
.search-panel {
  position: fixed; top: 0; bottom: 0; right: 0; z-index: 10000; width: 450px; max-width: 100vw;
  display: flex; flex-direction: column; background: #fff; transform: translateX(100%); transition: transform .5s ease;
}
body.search-open .search-panel { transform: translateX(0); box-shadow: -2px 0 12px rgba(0, 0, 0, .25); }
.search-panel .sp-head {
  flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; min-height: 60px; padding: 0 12px 0 22px;
  background: linear-gradient(135deg, var(--primary-blue) 0%, var(--primary-blue-dark) 100%); color: #fff;
}
.search-panel .sp-title { font-family: var(--font-heading); font-size: 1.05rem; font-weight: 800; text-transform: uppercase; letter-spacing: .3px; }
.search-panel .sp-close {
  display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 0; border-radius: 6px;
  background: transparent; color: #fff; cursor: pointer;
}
.search-panel .sp-close .icon { width: 22px; height: 22px; }
.search-panel .sp-form { flex-shrink: 0; display: flex; gap: 10px; padding: 18px 22px; border-bottom: 1px solid #eef0f2; }
.search-panel .sp-box { position: relative; flex: 1 1 auto; min-width: 0; }
.search-panel .sp-box input {
  width: 100%; height: 48px; padding: 0 54px 0 14px; border: 1px solid #e5e7eb; border-radius: 6px; background: #fff;
  font-family: inherit; font-size: .9rem; color: var(--text-dark); outline: none; transition: border-color .2s;
}
.search-panel .sp-box input::placeholder { color: #94a3b8; }
.search-panel .sp-box input:focus { border-color: var(--primary-blue); }
.search-panel .sp-box button {
  position: absolute; top: 0; right: 0; display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px;
  border: 0; border-radius: 0 6px 6px 0; background: var(--primary-blue); color: #fff; cursor: pointer; transition: background .2s;
}
.search-panel .sp-box button:hover { background: var(--primary-blue-dark); }
.search-panel .sp-box button .icon { width: 18px; height: 18px; }

/* Chọn ngôn ngữ trên header điện thoại — CHÉP .nav-lang của zendecor (style.css "NÚT CHỌN NGÔN NGỮ"): nút cờ 24×16 + mũi tên
   nhỏ xoay khi mở; danh sách thả neo phải, mở mờ dần + trượt xuống. Đổi: header site nền trắng nên nút / mũi tên màu xanh site,
   hover nền xám nhạt; danh sách viền mảnh KHÔNG bóng (người dùng bỏ đổ bóng toàn site). */
.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-blue); 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; box-shadow: 0 0 0 1px rgba(0, 0, 0, .08); }
.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-blue); background: #f1f6fd; }

/* ═══ TRANG TÌM KIẾM — CHÉP vilacojsc (site.css .ss-dd + .search-page-*) ════════════════════════════════════════════════
   Đổi: màu chủ đạo đỏ → xanh site; danh sách thả của .ss-dd viền mảnh KHÔNG bóng (người dùng bỏ đổ bóng toàn site);
   icon Font Awesome → SVG. Thẻ kết quả / phân trang / nút "Xem tất cả" là phần dựng mới (bản gốc dùng thẻ sản phẩm & thẻ
   bài viết của theme — site này không có thẻ chung cho 3 mục). */
.btn-search .icon { width: 20px; height: 20px; }

.ss-dd { position: relative; flex: 0 0 auto; }
.ss-dd__toggle {
  display: flex; align-items: center; gap: 8px; height: 48px; padding: 0 14px; min-width: 128px;
  border: 1px solid #e5e7eb; border-radius: 6px; background: #fff; color: var(--text-dark);
  font-family: inherit; font-size: .9rem; cursor: pointer; transition: border-color .2s;
}
.ss-dd__toggle .icon { margin-left: auto; width: 15px; height: 15px; color: #6b7280; transition: transform .25s; }
.ss-dd.is-open .ss-dd__toggle { border-color: var(--primary-blue); }
.ss-dd.is-open .ss-dd__toggle .icon { transform: rotate(180deg); }
/* Danh sách thả: cùng kiểu ô chọn chuẩn .ps-menu / .ps-option của site (người dùng 2026-10-09: "thô, màu chọn đậm quá") —
   khung bo 10px đệm 4px, mục 8px 10px chữ .84rem; rê chuột nền xanh nhạt #eff5ff; mục ĐANG CHỌN chỉ chữ xanh + đậm 600,
   KHÔNG tô nền đặc. Vẫn không đổ bóng (người dùng bỏ đổ bóng toàn site). */
.ss-dd__menu {
  position: absolute; top: calc(100% + 6px); left: 0; min-width: 100%; margin: 0; padding: 4px; list-style: none;
  background: #fff; border: 1px solid var(--border); border-radius: 10px;
  opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .14s ease-out, transform .14s ease-out, visibility .14s; z-index: 3;
}
.ss-dd.is-open .ss-dd__menu { opacity: 1; visibility: visible; transform: none; }
.ss-dd__menu li {
  padding: 8px 10px; border-radius: 6px; color: var(--text-dark); font-size: .84rem; line-height: 1.35; white-space: nowrap; cursor: pointer;
  transition: background .15s, color .15s;
}
.ss-dd__menu li:hover { background: #eff5ff; color: var(--primary-blue); }
.ss-dd__menu li.is-active { color: var(--primary-blue); font-weight: 600; }
/* Sidebar: dropdown + ô nhập cùng hàng (thietbigasmk) */
.search-panel .sp-form .ss-dd__toggle { min-width: 132px; }

.search-page-head { margin-bottom: 36px; }
.search-page-title {
  margin: 0 0 6px; font-family: var(--font-heading); font-size: 1.6rem; font-weight: 800; color: var(--primary-blue);
  text-transform: uppercase; letter-spacing: .02em;
}
.search-page-desc { margin: 0 0 16px; font-size: .95rem; line-height: 1.6; color: var(--text-muted); }
.search-page-form { display: flex; gap: 10px; }
.search-page-box { flex: 1; min-width: 0; }
.search-page-box input {
  width: 100%; height: 48px; padding: 0 14px; border: 1px solid #e5e7eb; border-radius: 6px; background: #fff;
  font-family: inherit; font-size: .9rem; color: var(--text-dark); outline: none; transition: border-color .2s;
}
.search-page-box input::placeholder { color: #94a3b8; }
/* Focus KHÔNG đổi màu viền (người dùng yêu cầu) — giữ viền xám như lúc thường. */
.search-page-box input:focus { border-color: #e5e7eb; box-shadow: none; }
.search-page-submit {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; padding: 0 24px;
  border: none; border-radius: 6px; background: var(--primary-blue); color: #fff; font-family: inherit; font-size: .9rem; font-weight: 600;
  cursor: pointer; transition: background .2s;
}
.search-page-submit:hover { background: var(--primary-blue-dark); }
.search-page-submit .icon { width: 17px; height: 17px; }
.search-page-summary { margin: 0 0 30px; font-size: .95rem; color: var(--text-dark); }
.search-page-empty { padding: 70px 20px 80px; text-align: center; color: var(--text-muted); }
.search-page-empty > .icon { display: block; width: 46px; height: 46px; margin: 0 auto 18px; opacity: .25; }
.search-page-empty-title { margin-bottom: 6px !important; font-size: 1.05rem !important; font-weight: 600; color: var(--text-dark); }
.search-page-empty p { margin: 0 0 4px; font-size: .92rem; }
@media (max-width: 575px) {
  /* Mobile: ô nhập full hàng trên; dropdown + nút Tìm chia đôi hàng dưới (bản gốc) */
  .search-page-form { flex-wrap: wrap; }
  .search-page-box { flex: 1 1 100%; order: -1; }
  .search-page-form .ss-dd { flex: 1; }
  .search-page-form .ss-dd .ss-dd__toggle { width: 100%; min-width: 0; }
  .search-page-submit { flex: 1; }
}
@media (max-width: 767.98px) {
  /* Sidebar trên điện thoại — CHÉP thietbigasmk: dropdown 120px + ô nhập vẫn CÙNG HÀNG, cao 42px. */
  .search-panel .sp-form { padding: 14px 16px 16px; gap: 8px; }
  .search-panel .sp-form .ss-dd__toggle { width: 120px; min-width: 0; padding: 0 10px; height: 42px; font-size: .85rem; }
  .search-panel .sp-box input { height: 42px; padding-right: 48px; font-size: .85rem; }
  .search-panel .sp-box button { width: 42px; height: 42px; }
  .search-panel .ss-dd__menu li { font-size: .85rem; padding: 8px 10px; }
}

.search-section + .search-section { margin-top: 44px; }
.search-section-title {
  margin: 0 0 20px; font-family: var(--font-heading); font-size: 1.25rem; font-weight: 800; color: var(--primary-blue);
}
.search-section-title span { font-weight: 600; color: var(--text-muted); }
.search-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.search-card {
  display: flex; flex-direction: column; overflow: hidden; background: #fff; border: 1px solid #e6eaee; border-radius: 12px;
  transition: border-color .2s;
}
.search-card:hover { border-color: var(--primary-blue); }
.search-card-img { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: #f1f6fd; }
.search-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.search-card-ph { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: #b6c6dc; }
.search-card-ph .icon { width: 40px; height: 40px; }
.search-card-body { flex: 1; display: flex; flex-direction: column; gap: 8px; padding: 18px 20px 20px; }
.search-card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: .8rem; color: var(--text-muted); }
.search-card-meta span { display: inline-flex; align-items: center; gap: 5px; }
.search-card-meta .icon { width: 13px; height: 13px; }
.search-card-kind {
  padding: 2px 10px; border-radius: 999px; background: #f1f6fd; color: var(--primary-blue); font-weight: 600;
}
.search-card-title { margin: 0; font-family: var(--font-heading); font-size: 1.05rem; font-weight: 700; line-height: 1.4; }
.search-card-title a { color: var(--text-dark); text-decoration: none; transition: color .2s; }
.search-card-title a:hover { color: var(--primary-blue); }
.search-card-desc {
  margin: 0; font-size: .92rem; line-height: 1.6; color: var(--text-dark);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.search-section-more { margin-top: 24px; text-align: center; }
.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-blue); color: var(--primary-blue); }
.search-pager .is-current { background: var(--primary-blue); border-color: var(--primary-blue); color: #fff; font-weight: 600; }
.search-pager .is-gap { border: 0; min-width: 20px; }
.search-pager .icon { width: 16px; height: 16px; }
@media (max-width: 991px) { .search-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } }
@media (max-width: 575px) { .search-grid { grid-template-columns: 1fr; gap: 16px; } .search-page-title { font-size: 1.35rem; } }

/* ═══ Gợi ý tìm kiếm trong sidebar — CHÉP .sp-results / .ss-* của thietbigasmk (style.css "Vùng kết quả gợi ý").
   Đổi: màu --sd-* → màu site; thêm tiêu đề nhóm .ss-group (kết quả chia theo mục); ô nhập không còn nút kính lúp nên bỏ
   khoảng chừa bên phải; ảnh thumbnail phủ kín (ảnh bài viết / dịch vụ), không có ảnh thì ô nền xanh nhạt. */
.search-panel .sp-box input { padding-right: 14px; }
.search-panel .sp-results { flex: 1 1 auto; overflow-y: auto; padding: 10px 16px 22px; }
.search-panel .sp-results::-webkit-scrollbar { width: 4px; background: #f1f2f4; }
.search-panel .sp-results::-webkit-scrollbar-thumb { background: #cfd4da; border-radius: 2px; }
.ss-status {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 28px 8px; text-align: center; color: var(--text-muted); font-size: .88rem;
}
.ss-spinner {
  flex-shrink: 0; width: 16px; height: 16px; border: 2px solid #e5e7eb; border-top-color: var(--primary-blue);
  border-radius: 50%; animation: ssSpin .7s linear infinite;
}
@keyframes ssSpin { to { transform: rotate(360deg); } }
.ss-group {
  margin: 14px 8px 4px; font-family: var(--font-heading); font-size: .82rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .04em; color: var(--primary-blue);
}
.ss-group:first-child { margin-top: 4px; }
.ss-group span { font-weight: 600; color: var(--text-muted); }
.ss-list { list-style: none; margin: 0; padding: 0; }
.ss-list li + li { border-top: 1px solid #f1f2f4; }
.ss-item { display: flex; align-items: center; gap: 12px; padding: 11px 8px; text-decoration: none; border-radius: 6px; transition: background .15s; }
.ss-item:hover { background: #f1f6fd; }
.ss-item__thumb {
  flex: 0 0 auto; width: 54px; height: 54px; display: flex; align-items: center; justify-content: center; overflow: hidden;
  border: 1px solid #eef0f2; border-radius: 6px; background: #f1f6fd;
}
.ss-item__thumb img { width: 100%; height: 100%; object-fit: cover; }
.ss-item__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ss-item__kind {
  font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ss-item__name {
  font-size: .88rem; font-weight: 500; color: var(--text-dark); line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ss-item:hover .ss-item__name { color: var(--primary-blue); }
.ss-viewall {
  display: flex; align-items: center; justify-content: center; gap: 6px; margin: 14px 8px 0; padding: 12px; border-radius: 6px;
  background: var(--primary-blue); color: #fff; font-size: .88rem; font-weight: 500; text-decoration: none; transition: background .2s;
}
.ss-viewall:hover, .ss-viewall:focus { background: var(--primary-blue-dark); color: #fff; }
@media (max-width: 767.98px) {
  .search-panel .sp-results { padding: 8px 12px 18px; }
  .ss-item__name, .ss-status, .ss-viewall { font-size: .82rem; }
}

/* Trang tìm kiếm lọc ngay khi gõ — vùng kết quả đang tải: mờ nhẹ + chặn bấm, giữ bố cục (vilacojsc [data-spa-section]). */
.search-live { transition: opacity .2s ease; }
.search-live.is-loading { opacity: .55; pointer-events: none; }
@media (max-width: 575px) { .search-page-form .ss-dd { flex: 1 1 100%; } }
/* Icon kính lúp nằm TRONG ô nhập, sát mép phải (người dùng yêu cầu) — chỉ trang trí, không bấm được. */
.search-page-box { position: relative; }
.search-page-box input { padding-right: 46px; }
.search-page-box-icon {
  position: absolute; top: 50%; right: 14px; transform: translateY(-50%); display: inline-flex; pointer-events: none;
  color: #94a3b8; transition: color .2s;
}
.search-page-box-icon .icon { width: 18px; height: 18px; }
.search-page-box input:focus ~ .search-page-box-icon { color: var(--primary-blue); }
/* ═══ Đầu form đứng riêng (.form-panel-header — Tiêm chủng, Chuyên khoa, Bác sĩ, Dịch vụ) — tinh chỉnh 2026-09-30 (người dùng:
   "title hơi thô"): huy hiệu lịch vàng cạnh tiêu đề như đầu form trang chủ (không bóng), tiêu đề nhỏ lại + giãn chữ nhẹ, mô tả
   tách bằng vạch mảnh, nền gradient có hai vầng sáng mờ trang trí (không hình ảnh). */
.form-panel-header { position: relative; overflow: hidden; padding: 28px 32px 24px; }
.form-panel-header::before, .form-panel-header::after {
  content: ""; position: absolute; border-radius: 50%; pointer-events: none; background: rgba(255, 255, 255, .06);
}
.form-panel-header::before { width: 220px; height: 220px; top: -120px; right: -60px; }
.form-panel-header::after  { width: 160px; height: 160px; bottom: -110px; left: -40px; }
.form-panel-title {
  position: relative; display: flex; align-items: center; justify-content: center; gap: 12px;
  margin: 0; font-size: 1.3rem; font-weight: 800; letter-spacing: .8px; line-height: 1.3;
}
.form-panel-badge {
  flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px;
  border-radius: 50%; background: var(--accent-gold); color: var(--primary-blue-dark);
}
.form-panel-badge .icon { width: 17px; height: 17px; }
.form-panel-desc {
  position: relative; display: inline-block; margin: 12px 0 0; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, .22);
  font-size: .9rem; font-weight: 400; line-height: 1.5; color: rgba(255, 255, 255, .88); opacity: 1;
}
@media (max-width: 575px) {
  .form-panel-header { padding: 22px 18px 18px; }
  .form-panel-title { gap: 10px; font-size: 1.1rem; letter-spacing: .5px; }
  .form-panel-badge { width: 30px; height: 30px; }
  .form-panel-badge .icon { width: 15px; height: 15px; }
  .form-panel-desc { font-size: .84rem; }
}
/* Menu thả cấp 1 (.nav-dropdown): rê chuột trượt chữ sang phải 6px để lộ mũi tên đỏ (demo) — BÙ lề phải cùng lượng để bề ngang
   chữ không đổi, tên dài không bị đẩy xuống dòng khi hover (lỗi người dùng báo 2026-09-30). Khung rộng theo tên dài nhất
   (tối đa 360px) thay cho cố định 250px. */
.nav-dropdown { width: max-content; min-width: 250px; max-width: 360px; }
.nav-dropdown a:hover { padding-left: 26px; padding-right: 14px; }
/* ═══ TRANG LIÊN HỆ — CHÉP demo /lien-he (3 thẻ liên hệ căn giữa; form góp ý | bản đồ 380px + nút viền đỏ chỉ đường).
   Đổi: thẻ viền mảnh KHÔNG bóng (chuẩn site); icon Font Awesome fs-1 → SVG 40px; chữ theo thang chữ chung. */
.contact-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-bottom: 48px; }
.contact-card {
  --cc: var(--primary-blue);
  display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 28px 24px; text-align: center;
  background: #fff; border: 1px solid #e2e8f0; border-radius: 12px;
}
.contact-card.is-red  { --cc: var(--red); background: #f8fafc; }
.contact-card.is-teal { --cc: #0d9488; }
.contact-card-icon { display: inline-flex; margin-bottom: 6px; color: var(--cc); }
.contact-card-icon .icon { width: 40px; height: 40px; }
.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-blue); text-decoration: none; }
.contact-card-text a:hover { color: var(--primary-blue-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 #e2e8f0; border-radius: 12px; }
.contact-box-title {
  margin: 0 0 18px; font-family: var(--font-heading); font-size: 1.2rem; font-weight: 800; text-transform: uppercase; color: var(--primary-blue);
}
/* Form trong thẻ: bỏ khung / lề riêng của biến thể "card" — thẻ liên hệ đã là khung. */
.contact-form-box .form-card, .contact-form-box .form-card-body { padding: 0; border: 0; background: none; box-shadow: none; }
.contact-map { flex: 1; min-height: 380px; overflow: hidden; border: 1px solid #e2e8f0; border-radius: 8px; }
.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: 6px;
  color: var(--red); font-size: .88rem; font-weight: 700; text-decoration: none; transition: background .2s, color .2s;
}
.contact-dir-btn:hover { background: var(--red); color: #fff; }
.contact-dir-btn .icon { width: 16px; height: 16px; }
@media (max-width: 991px) {
  .contact-cards { grid-template-columns: 1fr; gap: 16px; margin-bottom: 32px; }
  .contact-main { grid-template-columns: 1fr; }
}
@media (max-width: 575px) { .contact-box { padding: 20px 16px; } .contact-map, .contact-map iframe { min-height: 300px; } }
/* Popup chỉ đường trang Liên hệ — khung .hospital-modal-* chung; ô điểm xuất phát + "Vị trí của tôi" + "Tìm đường", bản đồ
   nhúng tuyến đường cao 60vh. */
button.contact-dir-btn { background: #fff; cursor: pointer; font-family: inherit; }
.hospital-modal-dialog.contact-dir-dialog { max-width: 960px; }
.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 #e2e8f0; border-radius: 6px; font-family: inherit;
  font-size: .9rem; color: var(--text-dark); outline: none;
}
.contact-dir-row input:focus { border-color: var(--primary-blue); }
.contact-dir-geo, .contact-dir-go {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 16px; border-radius: 6px;
  font-family: inherit; font-size: .88rem; font-weight: 600; cursor: pointer; transition: background .2s, color .2s;
}
.contact-dir-geo { border: 1px solid #e2e8f0; background: #fff; color: var(--primary-blue); }
.contact-dir-geo:hover { background: #f1f6fd; }
.contact-dir-geo:disabled { opacity: .6; cursor: wait; }
.contact-dir-go { border: 0; background: var(--primary-blue); color: #fff; }
.contact-dir-go:hover { background: var(--primary-blue-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 #e2e8f0; border-radius: 8px; }
.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; }
}
/* Trang Liên hệ — tên + mô tả doanh nghiệp đầu khối: mô tả giới hạn bề ngang cho dễ đọc. */
.contact-intro, .contact-intro .title, .contact-intro .cont { text-align: center; }
.contact-intro { margin-bottom: 36px; }
.contact-intro .cont { max-width: 860px; margin-left: auto; margin-right: auto; }
/* Ngăn "menu mở rộng" (.extend-links, nút ☰ trên PC): rê chuột hiện mũi tên như mega menu / menu thả (.nav-mega-col a::before
   — cùng SVG mask, cùng trượt 16px). Demo gốc chỉ trượt 6px, không mũi tên — người dùng yêu cầu thêm 2026-09-30. Nền ngăn
   xanh đậm nên mũi tên màu vàng nhấn (đỏ khó thấy trên nền này). Nút gọi (.is-call) giữ nguyên. */
.extend-links a:not(.is-call) { position: relative; transition: color .2s ease, padding-left .2s ease; }
.extend-links a:not(.is-call):hover { padding-left: 16px; }
.extend-links a:not(.is-call)::before {
  content: ""; position: absolute; left: 0; top: 50%; width: 10px; height: 10px; transform: translateY(-50%);
  background-color: var(--accent-gold); 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;
}
.extend-links a:not(.is-call):hover::before { opacity: 1; }
/* ═══ ĐIỀU KHOẢN & CHÍNH SÁCH — trang /dieu-khoan/{slug} (chép vilacojsc Policy/Detail: H1 + nội dung) và danh sách link ở
   thanh cuối chân trang (vilacojsc .vfoot-bar__links: chữ nhỏ, ngăn bằng gạch đứng). */
.policy-article { max-width: 960px; margin: 0 auto; }
.policy-title {
  margin: 0 0 24px; font-family: var(--font-heading); font-size: 1.9rem; font-weight: 800; line-height: 1.3; color: var(--primary-blue);
}
.policy-content { font-size: 1rem; }
.policy-content h2, .policy-content h3 { color: var(--primary-blue); margin: 1.4em 0 .6em; }
.policy-empty { color: var(--text-muted); text-align: center; padding: 40px 0; }
/* Nội dung soạn TinyMCE: trả lại dấu đầu dòng / số thứ tự (reset chung của site bỏ list-style). */
.policy-content ul, .policy-content ol { margin: .4em 0 1em; padding-left: 1.5em; }
.policy-content ul { list-style: disc; }
.policy-content ol { list-style: decimal; }
.policy-content li { margin-bottom: .35em; }
.footer-policy-links { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; margin: 0; padding: 0; list-style: none; }
.footer-policy-links li + li::before { content: "|"; margin: 0 10px; color: #cbd5e1; }
.footer-policy-links a { color: var(--text-muted); text-decoration: none; transition: color .2s; }
.footer-policy-links a:hover { color: var(--primary-blue); }
@media (max-width: 575px) { .policy-title { font-size: 1.45rem; } .footer-policy-links { justify-content: center; } }
/* Chân trang: rê chuột KHÔNG gạch chân (người dùng 2026-09-30) — chỉ đổi màu. Ghi đè .footer-info a:hover /
   .footer-quick-links li a:hover (gạch chân) ở phần đầu site.css. */
.site-footer a:hover, .footer-info a:hover, .footer-quick-links li a:hover, .footer-policy-links a:hover { text-decoration: none; }
/* Trang điều khoản — chỉnh 2026-09-30 (người dùng: "font size không đồng bộ, heading màu đen, nội dung hơi hẹp"): nội dung
   rộng bằng khung trang; tiêu đề theo THANG CHỮ CHUNG (H1 Barlow 800 1.75rem như tiêu đề khối, H2 1.25rem, H3 1.1rem, H4
   1rem) — MỌI heading màu đen; đoạn chữ .98rem như .cont của các khối khác. */
.policy-article { max-width: none; }
.policy-title {
  margin: 0 0 28px; padding-bottom: 18px; border-bottom: 1px solid #e2e8f0;
  font-family: var(--font-heading); font-size: 1.75rem; font-weight: 800; line-height: 1.3; color: var(--text-dark);
}
.policy-content { font-size: .98rem; line-height: 1.75; color: var(--text-dark); }
.policy-content p, .policy-content li { font-size: .98rem; line-height: 1.75; }
.policy-content p { margin: 0 0 14px; }
.policy-content h2, .policy-content h3, .policy-content h4 {
  font-family: var(--font-heading); color: var(--text-dark); line-height: 1.35; margin: 1.6em 0 .6em;
}
.policy-content h2 { font-size: 1.25rem; font-weight: 700; }
.policy-content h3 { font-size: 1.1rem; font-weight: 700; }
.policy-content h4 { font-size: 1rem; font-weight: 700; }
.policy-content > :first-child { margin-top: 0; }
.policy-content strong { color: var(--text-dark); font-weight: 600; }
/* Trang tĩnh (Views/StaticPage — người dùng 2026-10-09): tiêu đề KHÔNG viền dưới, sát nội dung hơn; khoảng trên / dưới khối
   đều 48px. Chỉ đè ở .static-page-detail — trang Điều khoản giữ nguyên. */
.static-page-detail.section-padding { padding: 48px 0; }
.static-page-detail .policy-title { margin-bottom: 16px; padding-bottom: 0; border-bottom: 0; }
.static-page-detail .policy-content > :last-child { margin-bottom: 0; }
@media (max-width: 575px) {
  .static-page-detail .policy-title { margin-bottom: 12px; padding-bottom: 0; }
}
@media (max-width: 575px) {
  .policy-title { font-size: 1.4rem; margin-bottom: 20px; padding-bottom: 14px; }
  .policy-content h2 { font-size: 1.12rem; }
  .policy-content h3 { font-size: 1.02rem; }
  .policy-content, .policy-content p, .policy-content li { font-size: .94rem; }
}

/* ═══ Điện thoại ≤768px — CHÉP khối "@media (max-width: 768px)" của demo (style.css dòng 3141–3930, responsive.css) ══════
   Người dùng 2026-10-02: chữ trên di động quá to so với demo. Chỉ chép phần CHỮ + khoảng cách; KHÔNG chép các quy tắc lưới
   (grid-template-columns 2/3/4/5 cột) vì số cột mỗi thiết bị do ô của bộ dựng trang quyết định (--n-mp…), và không ẩn mô
   tả. Giữ !important như bản gốc (đè các quy tắc desktop có độ ưu tiên cao hơn). Khác demo:
     • Thẻ bác sĩ nổi bật: demo dùng .row.g-0 (Bootstrap) → ở đây .doctor-featured-grid; giới hạn trong .doctor-featured-card
       vì popup hồ sơ bác sĩ dùng chung .doctor-left-profile / .doctor-right-details.
     • Nút khối giới thiệu: demo .btn → .btn-pill; nút đặt lịch bác sĩ: demo .btn → .doctor-book-btn.
     • Quy trình: demo .process-step-* → .process-flow-* (cùng cỡ chữ).
     • Footer: demo .hospital-footer → .site-footer. */
@media (max-width: 768px) {
  /* 1. Khoảng cách & tiêu đề section */
  .section-padding { padding: 28px 0 !important; }
  .header-box { margin-bottom: 16px !important; }
  /* Demo để margin-bottom 6px trong khi gạch chân (::after) nằm ở bottom:-8px → gạch chân đè lên đoạn mô tả 2px (lỗi của
     bản gốc, người dùng báo 2026-10-02). 16px = 8px chỗ cho gạch chân + 8px cách đoạn mô tả. */
  .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; }

  /* 2. Form đăng ký khám + 6 thẻ thao tác nhanh */
  .form-home-container { border-radius: 8px !important; margin-bottom: 14px !important; }
  .form-home-header { padding: 8px 10px !important; }
  .form-home-header .title { font-size: .92rem !important; margin-bottom: 1px !important; line-height: 1.35 !important; }
  .form-home-header .subtitle { font-size: .68rem !important; margin-bottom: 0 !important; line-height: 1.45 !important; }
  .form-home-body { padding: 10px 10px 12px !important; }
  /* Ô nhập: demo cao 31px / chữ .75rem — người dùng 2026-10-02 thấy nhỏ → cao 40px. Cỡ chữ ĐỒNG NHẤT 14px cho nhãn, chữ gõ,
     placeholder, ô chọn tự dựng (.ps-trigger) và nút gửi (người dùng 2026-10-02: placeholder 16px to hơn phần còn lại).
     ⚠️ Dưới 16px thì Safari iPhone tự phóng to trang khi bấm vào ô — người dùng chọn đồng nhất cỡ chữ. */
  .form-home-body label { font-size: .875rem !important; margin-bottom: 3px !important; }
  .form-home-body .form-group { margin-bottom: 10px !important; }
  .form-home-body .form-control, .form-home-body .ps-trigger { height: 40px !important; padding: 6px 10px !important; font-size: .875rem !important; border-radius: 4px !important; }
  .form-home-body .form-control::placeholder { font-size: .875rem; }
  .form-home-body .ps-trigger * { font-size: inherit !important; }
  .form-home-body textarea.form-control { height: 64px !important; min-height: 64px !important; }
  .btn-form-submit { padding: 7px 12px !important; font-size: .875rem !important; margin-top: 4px !important; border-radius: 4px !important; }
  .quick-action-card { padding: 12px 8px !important; min-height: 84px !important; border-radius: 8px !important; }
  .quick-action-card .card-icon-wrap { width: 40px !important; height: 40px !important; margin-bottom: 6px !important; }
  .quick-action-card .card-title { font-size: .75rem !important; line-height: 1.25 !important; margin: 0 !important; font-weight: 700 !important; }
  /* Nút "Xem tất cả…" dưới lưới thẻ — demo .btn.px-4.py-2 */
  /* Điện thoại: như .about-action-btns .btn-pill (cao tối thiểu 40px, đệm 9px, chữ .8rem, dòng 1.25). */
  .btn-outline-view { min-height: 40px; padding: 9px 16px !important; font-size: .8rem !important; line-height: 1.25; gap: 6px; }

  /* 3. Giới thiệu + thẻ dịch vụ */
  .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; }

  /* 4. Đội ngũ bác sĩ & thống kê */
  /* Demo .88rem / .5rem là cho lưới 5 ô một hàng; ở đây số ô do ô bộ dựng trang quyết định (đang 2 ô/hàng) — cỡ vừa
     ô rộng hơn. Đặt 5 ô/hàng trong admin thì vẫn đọc được. */
  .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-color) !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; }
  /* Demo 4px / 2px — người dùng 2026-10-02 thấy các mục hồ sơ dính nhau → 10px giữa các mục, 4px dưới tiêu đề. */
  .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;
  }
  /* Thẻ bác sĩ nhỏ: demo .6rem cho 5 thẻ/hàng; slider ở đây hiện 1 thẻ/hàng trên điện thoại → giữ cỡ chữ gốc. */

  /* 5. Trang thiết bị */
  .equipment-bottom-caption { font-size: .68rem !important; padding: 4px 6px !important; }
  .equipment-title { font-size: .68rem !important; }

  /* 6. Quy trình (demo .process-step-*) */
  .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; }

  /* 7. Tin tức */
  .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; }

  /* 8. Video */
  .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; }

  /* 9. Đối tác */
  .partner-logo-item { padding: 8px !important; }

  /* 10. Footer (demo .hospital-footer) */
  .site-footer .footer-heading { font-size: .88rem !important; margin-bottom: 8px !important; margin-top: 12px !important; }
}

/* Khối giới thiệu: đoạn văn cuối → danh sách tích xanh. Demo cộng dồn 3 khoảng (đoạn văn mb 12px + .header-box mb 16px/2rem
   + danh sách mt 20px ≈ 48px điện thoại, ~70px máy tính) — người dùng báo quá xa 2026-10-02 → còn đúng 16px ở mọi khổ.
   !important vì khối điện thoại phía trên đặt .header-box / .header-box .cont bằng !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; }

/* Hai nút khối giới thiệu chia đôi 50-50 trên điện thoại — CHÉP ".about-action-btns" @media (max-width: 480px) của demo
   (responsive.css), áp cho cả ≤768px theo yêu cầu người dùng 2026-10-02 (481–768px demo vẫn để nút co theo chữ). */
@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;
    /* Người dùng 2026-10-02: bản demo (6px / .72rem, cao ~29px) nhỏ quá → cao tối thiểu 40px, chữ .8rem. */
    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; }
}

/* Form đăng ký (.form-home-container): bỏ bóng, bo góc 12px → 6px ở mọi khổ (người dùng 2026-10-02). Đầu / thân form bo
   riêng để khớp khung (overflow: visible cho dropdown tự dựng tràn ra ngoài) nên đổi cùng lúc. !important để đè khối
   điện thoại phía trên (border-radius 8px !important). */
.form-home-container { box-shadow: none !important; border-radius: 6px !important; }
.form-home-header { border-radius: 6px 6px 0 0 !important; }
.form-home-body { border-radius: 0 0 6px 6px !important; }
.form-home-container > .form-home-body:first-child { border-radius: 6px !important; }
.btn-form-submit, .btn-form-submit:hover, .btn-form-submit:focus { box-shadow: none !important; border-radius: 6px !important; }

/* Thẻ "Dành cho khách hàng" (.quick-action-card): bỏ bóng của thẻ (thường + hover) và vòng tròn icon — người dùng 2026-10-02. */
.quick-action-card, .quick-action-card:hover,
.quick-action-card .card-icon-wrap, .quick-action-card:hover .card-icon-wrap { box-shadow: none !important; }

/* ═══ Khối đội ngũ bác sĩ trên điện thoại — CHÉP demo (style.css 3141–3930 / responsive.css @media 768px), người dùng 2026-10-02 ═══
   • Dòng chuyên môn / chuyên khoa dưới tên bác sĩ nổi bật: demo gắn "d-none d-lg-block" → chỉ hiện từ 992px.
   • Lưới DÀY (_List.cshtml thêm .ml-dense / .mp-dense khi ô đặt ≥4 mục/hàng ở điện thoại ngang / dọc): số liệu và thẻ bác
     sĩ nhỏ dùng cỡ của demo (.stats-counter-grid 5 cột: số .88rem, nhãn .5rem; .doctor-mini-card-grid 5 cột: ảnh 46px, tên
     .6rem 2 dòng, ẩn chức vụ + nút "Xem hồ sơ"). Số cột vẫn do cấu hình ô quyết định — đặt 2 cột thì giữ cỡ thường.
   • Tên thẻ nhỏ 3 dòng (demo 2): tên ở đây kèm học vị ("BSCKII. Dương Tất Linh") dài hơn demo, 2 dòng bị cắt. */
@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; }
}

/* Nút "Xem toàn bộ quá trình công tác" cuối cột hồ sơ bác sĩ nổi bật (_DoctorFeatured) → mở popup hồ sơ. ⚠️ Không có bản gốc
   (demo không có) — chữ xanh + icon như liên kết trong thẻ, không viền / nền. Chỉ hiện khi site.js gắn .is-clamped (có đoạn
   bị cắt). Người dùng thêm 2026-10-02. */
.doctor-more-btn {
  display: none; align-items: center; gap: 6px; margin-top: 4px; padding: 0; border: 0; background: none; cursor: pointer;
  color: var(--primary-blue); 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(--primary-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; }
}

/* ═══ Khối video — người dùng 2026-10-02 ═══════════════════════════════════════════════════════════════════════
   • Bo góc 6px (như form đăng ký) + bỏ bóng cho khung video lớn và thẻ video nhỏ — mọi khổ.
   • ≤991px (khung lớn xếp dọc): video lên trên, tiêu đề + mô tả xuống dưới (như demo: .featured-video-right order 1), bỏ nền
     xanh → thẻ trắng viền mảnh, chữ tối; tiêu đề cách mô tả 6px (khối điện thoại phía trên để 0 → dính nhau).
   • ≤768px: nút play nhỏ lại (lớn 54 → 44px, nhỏ 28px như demo .video-card-thumb .btn-play-video-pulse 26px), vòng tỏa mỏng. */
.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-color); min-height: 0; }
  /* Khung theo TỶ LỆ 16:10 (ảnh video ~1.55, cùng tỷ lệ thẻ nhỏ) thay cho cao cố định 280/300px — trước đó ảnh bị cắt mất
     hai mép ở điện thoại (khung 1.35) và mất trên/dưới ở tablet (khung 2.58), người dùng báo 2026-10-02. */
  .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(186, 20, 26, .35), 0 0 0 8px rgba(186, 20, 26, .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(186, 20, 26, .35), 0 0 0 6px rgba(186, 20, 26, .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%); }
}

/* Đối tác trên điện thoại — người dùng 2026-10-02: khung nhỏ lại (tỷ lệ 2:1 thay 1.6:1, đệm 6px, bo 6px như form), thẻ GIỮ
   viền; bỏ viền (bóng) của nút mũi tên trước / sau. Số logo mỗi hàng do cấu hình ô (Mobile dọc / ngang). */
@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%; }
  /* Khung thấp 63px → mũi tên 40px đè lên logo đầu / cuối: chừa 20px hai bên, mũi tên 28px nằm trong khoảng đó. */
  .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; }
}

/* Nút của ô (.cell-action — "Xem tất cả các dịch vụ y tế"…) căn GIỮA trên điện thoại — người dùng 2026-10-02. */
@media (max-width: 768px) {
  .cell-action { display: flex; justify-content: center; }
}

/* Nút gửi form — thu về khuôn nút chung của site (.btn-pill / .btn-outline-view): người dùng 2026-10-02 thấy nút "Xác nhận đăng
   ký khám" to. Áp cho CẢ BỘ nút gửi (chuẩn 2026-09-29: trang chủ, popup, Thai sản, panel) để vẫn đồng nhất giữa các form:
   máy tính cao 45px / chữ .88rem / bo 6px / icon 16px; điện thoại cao 40px / chữ .8rem. Bỏ bóng đỏ như form đăng ký. */
.btn-form-submit, .form-home-body .btn-form-submit, .btn-modal-submit, .btn-booking-submit, .btn-panel-submit {
  min-height: 45px !important; height: auto !important;   /* đè height: 42px cũ của .form-home-body .btn-form-submit */
  padding: 10px 24px !important; font-size: .88rem !important; border-radius: 6px !important;
  margin-top: 4px; box-shadow: none !important;
}
.btn-form-submit:hover, .form-home-body .btn-form-submit:hover, .btn-modal-submit:hover, .btn-booking-submit:hover, .btn-panel-submit:hover {
  box-shadow: none !important;
}
.btn-form-submit .icon, .btn-modal-submit .icon, .btn-booking-submit .icon, .btn-panel-submit .icon { width: 16px !important; height: 16px !important; }
@media (max-width: 768px) {
  .btn-form-submit, .form-home-body .btn-form-submit, .btn-modal-submit, .btn-booking-submit, .btn-panel-submit {
    min-height: 40px !important; padding: 9px 16px !important; font-size: .8rem !important;
  }
}

/* Mũi tên slider (.hp-arrow) — CHỈ còn mũi tên: bỏ nền tròn trắng + viền (bóng), mọi slider, mọi khổ (người dùng 2026-10-02).
   Không còn nền thì mũi tên đè lên mép thẻ khó thấy → slider chừa 28px hai bên, mũi tên nằm trong khoảng đó. Section nền xanh
   đậm (đội ngũ bác sĩ) mũi tên trắng. */
.hp-arrow, .hp-arrow:hover { background: transparent !important; box-shadow: none !important; border: 0 !important; }
.hp-arrow:hover { color: var(--primary-red); }
.home-team-section .hp-arrow { color: #fff; }
.home-team-section .hp-arrow:hover { color: rgba(255, 255, 255, .7); }
/* Chỉ chừa lề khi mũi tên hiện (site.js gắn .hp-has-arrows) — slide đủ chỗ (vd Tầm nhìn 3 thẻ trên máy tính) rộng 100%
   (người dùng 2026-10-06). */
.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; }

/* Nhãn viên trên tiêu đề khối (_Block .section-tagline) — CHÉP badge "TIỆN ÍCH CHO PHỤ HUYNH" của demo /tiem-chung-vaccine
   (Bootstrap badge bg-primary-subtle text-primary px-3 py-2 rounded-pill, mb-2): nền #e0f2fe, chữ #0369a1, 13.6px đậm 800,
   đệm 8px 16px, bo viên, cách tiêu đề 8px; icon clock-rotate-left → "history". Người dùng thêm 2026-10-02. */
.section-tagline {
  /* Dòng RIÊNG (flex + max-content): tiêu đề ở máy tính là inline-block nên nhãn inline-flex đứng cạnh tiêu đề. */
  display: flex; width: max-content; max-width: 100%; align-items: center; gap: 6px; margin: 0 0 8px; padding: 8px 16px; border-radius: 50rem;
  background: #e0f2fe; color: #0369a1; font-family: var(--font-main); font-size: .85rem; font-weight: 800; line-height: 1;
  text-transform: uppercase;
}
.section-tagline .icon { width: 14px; height: 14px; flex-shrink: 0; }
.header-box.text-center .section-tagline { margin-left: auto; margin-right: auto; }
.home-team-section .section-tagline { background: rgba(255, 255, 255, .14); color: #fff; }

/* Công cụ tra lịch tiêm trên điện thoại — người dùng 2026-10-02 thấy "như bị lỗi" (demo cũng vậy): mốc tuổi dàn lộn xộn,
   "24 tháng" lẻ một hàng; thẻ kết quả avatar to, chữ ngắt lửng. ≤767px: nhãn mốc tuổi một dòng riêng + 7 nút lưới 4 cột đều;
   thẻ kết quả gọn (avatar 44px), nút "Đặt lịch tiêm ngay" trải ngang, cao 40px theo chuẩn nút của site. */
@media (max-width: 767px) {
  .vaccine-quick { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .vaccine-quick > span { grid-column: 1 / -1; margin: 0 0 2px; }
  .vaccine-quick-btn { min-height: 36px; padding: 4px 2px; text-align: center; white-space: nowrap; font-size: .8rem; }
  .vaccine-summary { gap: 12px; padding: 16px; border-radius: 12px; }
  .vaccine-summary-child { gap: 12px; align-items: flex-start; }
  .vaccine-summary-avatar { width: 44px; height: 44px; }
  .vaccine-summary-avatar .icon { width: 22px; height: 22px; }
  .vaccine-summary-name { font-size: 1rem; margin-bottom: 2px; }
  .vaccine-summary-age { font-size: .82rem; line-height: 1.45; }
  .vaccine-summary-book { width: 100%; justify-content: center; min-height: 40px; padding: 9px 16px; font-size: .8rem; }
}

/* Tên tách 2 dòng cố định (<br>, SiteChrome.SiteNameLines) — mỗi dòng không tự gãy thêm, bỏ giới hạn bề ngang. */
.menubar-logo span.brand-2l, .mobile-brand span.brand-2l, .nav-drawer .nd-brand span.brand-2l { max-width: none; white-space: nowrap; }
/* Thanh điện thoại: dòng "QUỐC TẾ THỦY NGUYÊN" không gãy → máy 360px đẩy nút tìm kiếm/menu ra ngoài; chữ co theo bề ngang màn. */
.mobile-brand span.brand-2l { font-size: min(.84rem, 3vw); }

/* Khối Mở rộng ☰: đoạn mô tả dưới tiêu đề cột (MenuColumnTranslation.Description — vd cột Hỗ trợ khẩn cấp 24/7 của demo). */
.extend-col-desc { margin: 0 0 12px; color: #fff; font-size: .86rem; font-weight: 600; line-height: 1.6; }

/* ==========================================================================
   TRANG BẢNG GIÁ (demo /bang-gia) — bố cục theo demo; MÀU + CHỮ đồng bộ một hệ (người dùng 2026-10-06: bỏ xanh Bootstrap
   #0d6efd của demo vì lệch với đầu bảng xanh thương hiệu). Thẻ thông báo và bảng dùng chung:
     • màu: --primary (đầu thẻ / đầu bảng / giá), --border (viền), --text-dark / --text / --text-muted (chữ);
     • khung: viền 1px, bo 8px (nhãn 4px — người dùng thấy 12px / bo tròn hẳn "tròn quá"), không bóng; đệm 14px 18px;
     • chữ: tiêu đề đầu 15px 600 in hoa · nội dung 15px · dòng phụ 14px.
   ========================================================================== */
/* Thẻ thông báo (demo .card.border-primary > .card-header.bg-primary + .card-body ul.text-muted.small). */
.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; }
.page-cell > .price-notice-card:last-child { margin-bottom: 0; }

/* Bảng giá — THIẾT KẾ MỚI (người dùng 2026-10-06: bảng Bootstrap của demo "hơi thô", yêu cầu đẹp + hiện đại hơn, chuẩn
   hóa cỡ chữ). Không có bản gốc để chép. Thang chữ: ô dữ liệu 15px · đầu bảng / nhãn 12.5px · ghi chú dưới bảng 14px.
     • Khung bo 8px, viền mảnh, KHÔNG bóng (người dùng bỏ); đầu bảng nền xanh thương hiệu, chữ trắng in hoa giãn chữ.
     • Độ đậm theo thứ bậc: giá 600 (điểm nhấn duy nhất) · đầu bảng 600 · tên dịch vụ 500 · nhãn 500 · STT / đơn vị 400.
     • Dòng thoáng (14px 18px), không sọc; rê chuột nền xanh rất nhạt. Giá căn phải, đậm, số đều (tabular-nums).
     • Ghi chú BHYT: hai kiểu cùng là nhãn bo 4px cùng cỡ — có BHYT nền xanh lá nhạt + dấu ✓, chữ thường nền xám nhạt.
     • Nút dưới bảng theo chuẩn nút trang chủ (xem .price-table-btn). */
.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; }

/* Nhãn ghi chú BHYT — cùng cỡ chữ, cùng chiều cao cho cả hai kiểu. */
.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; }
/* Mọi nhãn cùng bề rộng, chữ căn giữa — nhãn co theo chữ thì cột lệch mép (người dùng báo). */
.price-table .price-tag { min-width: 124px; justify-content: center; }
.price-tag--ok    { background: #e8f6ee; color: #157347; }
.price-tag--plain { background: #f1f5f9; color: #475569; }

/* Dưới bảng: ghi chú + nút mở form popup. */
.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; }
/* Nút = chuẩn nút trang chủ: dáng .btn-pill (10px 24px, bo 6px, 700 in hoa .88rem) + màu nút đỏ .btn-form-submit
   (gradient đỏ thương hiệu, bóng đỏ nhẹ, nhấc lên khi rê chuột). */
.price-table-btn {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 24px; border: none; border-radius: 6px;
  background: linear-gradient(135deg, var(--primary-red) 0%, var(--primary-red-dark) 100%); color: #fff;
  font-size: .88rem; font-weight: 700; text-transform: uppercase; cursor: pointer;
  box-shadow: 0 4px 12px rgba(186, 20, 26, .35); transition: var(--transition);
}
.price-table-btn:hover {
  background: linear-gradient(135deg, var(--primary-red-light) 0%, var(--primary-red) 100%); color: #fff;
  transform: translateY(-2px); box-shadow: 0 6px 18px rgba(186, 20, 26, .5);
}
.price-table-btn .icon { width: 16px; height: 16px; }
@media (max-width: 767px) {
  /* Điện thoại: mỗi dòng giá là một khối — tên trên cùng; dưới: đơn vị · nhãn BHYT bên trái, giá bên phải. Bỏ đầu
     bảng + STT (thứ tự đã là vị trí khối), không còn cuộn ngang. */
  .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; }
  /* Cùng độ ưu tiên với luật cột bản PC (.price-table .price-col-*) để gỡ bề rộng cố định + căn giữa / căn phải. */
  .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; }   /* "Lần" / "Bộ" → nhãn thẳng cột */
  .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; }
}

/* Neo trong trang Bảng giá: chừa thanh menu dính (cùng 90px như section[id]). Các thẻ thông báo đứng cạnh nhau
   (Bảo lãnh viện phí · Thủ tục nhập viện) cao bằng nhau. */
.price-notice-card[id], .price-table-anchor { scroll-margin-top: 90px; }
.page-row:has(> .page-cell > .price-notice-card) { align-items: stretch; }
.page-cell > .price-notice-card:last-child { height: 100%; }

/* ═══ Trang Tiêm chủng (/tiem-chung-vaccine) trên điện thoại ≤768px ═════════════════════════════════════════════════════
   Người dùng 2026-10-06: "hơi thô và hơi to" — tối ưu theo demo trang chủ. Áp ĐÚNG chuẩn điện thoại của trang chủ (khối
   "@media (max-width: 768px)" chép demo ở trên): ô nhập cao 40px, chữ 14px (nhãn / chữ gõ / nút — dưới 16px Safari iPhone
   tự phóng to, người dùng đã chọn 14px đồng nhất), nút gửi bo 4px, thẻ bo 8px, đệm mỏng, dòng phụ 12.8–13px. Không đổi số
   cột — do ô của bộ dựng trang / dòng của Trình dựng form quyết định. */
@media (max-width: 768px) {
  /* 1. Công cụ tra cứu lịch tiêm */
  .vaccine-calc-card { border-radius: 8px !important; }
  .vaccine-calc-header { padding: 12px 14px !important; }
  .vaccine-calc-title { font-size: .98rem !important; margin-bottom: 2px !important; }
  .vaccine-calc-title .icon { width: 18px; height: 18px; }
  .vaccine-calc-sub { font-size: .78rem !important; line-height: 1.45; }
  .vaccine-calc-standard { margin-top: 8px !important; padding: 3px 10px !important; font-size: .72rem !important; }
  .vaccine-calc-standard .icon { width: 13px; height: 13px; }
  .vaccine-calc-body { padding: 14px !important; }
  .vaccine-calc-grid { gap: 10px !important; }
  .vaccine-calc-field label { font-size: .875rem !important; margin-bottom: 3px !important; }
  .vaccine-calc .form-control { height: 40px !important; padding: 6px 10px !important; font-size: .875rem !important; }
  .vaccine-input-icon { width: 38px !important; padding: 0 !important; justify-content: center; }
  .vaccine-calc-btn { height: 40px !important; padding: 0 12px !important; font-size: .875rem !important; border-radius: 4px !important; }
  .vaccine-quick { gap: 6px !important; margin-top: 12px !important; }
  .vaccine-quick > span { flex: 0 0 100%; font-size: .8rem !important; margin: 0 !important; }
  .vaccine-quick-btn { flex: 1 1 calc(25% - 6px); padding: 6px 4px !important; font-size: .78rem !important; border-radius: 4px !important; text-align: center; }

  /* 2. Gói tiêm chủng */
  .hp-list--packages .hp-track { padding-top: 4px; }
  .vaccine-pkg-card { padding: 16px !important; border-radius: 8px !important; }
  .vaccine-pkg-card:hover { transform: none; }
  .vaccine-pkg-badge { margin-bottom: 10px !important; padding: 3px 10px !important; font-size: .68rem !important; }
  .vaccine-pkg-name { font-size: 1.02rem !important; }
  .vaccine-pkg-sub { margin-bottom: 10px !important; font-size: .8rem !important; line-height: 1.45; }
  .vaccine-pkg-price { font-size: 1.15rem !important; margin-bottom: 8px !important; }
  .vaccine-pkg-benefits { margin-bottom: 14px !important; font-size: .8rem !important; line-height: 1.6 !important; }
  .vaccine-pkg-benefits .icon { width: 13px; height: 13px; margin-top: 4px; }
  .vaccine-pkg-btn { min-height: 40px; padding: 8px 12px !important; font-size: .875rem !important; border-radius: 4px !important; }

  /* 3. Form đăng ký tiêm (form đứng một mình — .form-panel) */
  .form-panel { border-radius: 8px !important; box-shadow: 0 .25rem 1rem rgba(0, 0, 0, .1) !important; }
  .form-panel-header { padding: 12px 14px !important; }
  .form-panel-title { font-size: .98rem !important; margin-bottom: 4px !important; letter-spacing: .2px !important; }
  .form-panel-badge { width: 26px !important; height: 26px !important; }
  .form-panel-badge .icon { width: 14px !important; height: 14px !important; }
  .form-panel-desc { font-size: .78rem !important; line-height: 1.45; }
  .form-panel .form-card { padding: 14px 12px 16px !important; }
  .form-card-body .form-home-row { gap: 0 10px !important; }
  .form-card-body .form-group { margin-bottom: 10px !important; }
  .form-card-body label { font-size: .875rem !important; margin-bottom: 3px !important; }
  .form-card-body .form-control { padding: 6px 10px !important; font-size: .875rem !important; border-radius: 4px !important; }
  /* 36px (thấp hơn chuẩn 40px của form trang chủ) — người dùng 2026-10-06: form đăng ký tiêm vẫn cao, thu nhỏ thêm. */
  .form-card-body input.form-control, .form-card-body .ps-trigger, .form-card-body .pd-input { height: 36px !important; min-height: 36px !important; font-size: .875rem !important; }
  .form-card-body .ps-trigger * { font-size: inherit !important; }
  .form-card-body textarea.form-control { min-height: 56px !important; height: 56px; }
  .form-panel-actions { padding-top: 4px !important; }
  .btn-panel-submit { padding: 9px 12px !important; font-size: .875rem !important; border-radius: 4px !important; }
  .btn-panel-submit .icon { width: 16px; height: 16px; }

  /* 4. Quy trình tiêm chủng 5 bước — người dùng 2026-10-06: 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" phía trên tiêu đề). */
  .vaccine-step-card {
    display: flex !important; align-items: center; gap: 12px; padding: 14px !important; border-radius: 8px !important;
    border: 1px solid var(--border) !important; box-shadow: none !important;
  }
  .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 !important; }
  .vaccine-step-title { margin: 0 0 4px !important; font-size: .95rem !important; }   /* vòng số căn giữa thẻ theo chiều dọc */
  .vaccine-step-desc { font-size: .8rem !important; line-height: 1.5 !important; }
}

/* Form trên điện thoại: hàng 2 cột mà số ô LẺ → ô ĐẦU chiếm trọn hàng, các ô sau ghép đôi (người dùng 2026-10-06, form đăng
   ký tiêm: "Họ tên bé" một hàng, "Ngày sinh + Giới tính" một hàng…). Máy tính / máy tính bảng giữ số cột của hàng. */
@media (max-width: 575px) {
  .form-home-row[data-cols-mb="2"] > :first-child:nth-last-child(odd) { grid-column: 1 / -1; }
  /* Nhãn dài xuống 2 dòng ("Số điện thoại liên hệ (Zalo)") → căn ĐÁY để ô nhập hai cột thẳng hàng. */
  .form-home-row[data-cols-mb="2"] { align-items: end; }
  /* Chốt chặn: nhãn ở hàng 2 cột luôn MỘT dòng (dài thì "…") — nhãn xuống dòng làm ô hai cột lệch nhau. */
  .form-home-row[data-cols-mb="2"] label { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
}

/* ═══ CHUẨN Ô NHẬP CHUNG — mọi form trang công khai (người dùng 2026-10-06: "thu gọn chiều cao về 1 chuẩn") ════════════
   Trước: 34 / 36 / 38 / 40 / 44 / 46 / 48px tùy form. Nay MỘT chuẩn cho máy tính + điện thoại:
     • ô nhập / ô chọn tự dựng (.ps-trigger) / ô ngày (.pd-input) / ô tìm kiếm: cao 36px, chữ 14px, đệm ngang 12px;
     • ô nhiều dòng: cao tối thiểu 64px, đệm 8px 12px;
     • nút dính liền ô (tìm kiếm, chỉ đường, đăng ký nhận tin) cao bằng ô.
   Đặt CUỐI file + !important để đè các khai báo rải rác trước đó (kể cả khối điện thoại chép demo). Đổi chuẩn: sửa 2 biến. */
:root { --field-h: 36px; --field-fs: .875rem; }

.form-home-body input.form-control, .form-home-body select.form-control, .form-home-body .ps-trigger,
.form-card-body input.form-control, .form-card-body select.form-control, .form-card-body .ps-trigger, .form-card-body .pd-input,
.modal-form input.form-control, .modal-form select.form-control, .modal-form .ps-trigger, .modal-form .pd-input,
.vaccine-calc .form-control, .vaccine-calc .pd-input,
.doc-filter .form-control, .doc-filter .ps-trigger,
.contact-dir-row input, .footer-subscribe-input, .menu-search input,
.nav-drawer .nd-search__box input, .search-panel .sp-box input, .search-page-box input {
  height: var(--field-h) !important; min-height: var(--field-h) !important;
  padding-top: 0 !important; padding-bottom: 0 !important; font-size: var(--field-fs) !important;
}
/* Ô chọn phạm vi tìm (.ss-dd — trang Tìm kiếm + panel tìm ở header) đứng CÙNG HÀNG ô nhập: cao bằng ô (trước sót, còn 48px
   nên lệch ô nhập 36px — người dùng báo 2026-10-09). */
.ss-dd__toggle { height: var(--field-h) !important; font-size: var(--field-fs) !important; padding: 0 12px !important; }
.form-home-body .form-control, .form-card-body .form-control, .modal-form .form-control,
.vaccine-calc .form-control, .doc-filter .form-control { padding-left: 12px !important; padding-right: 12px !important; }
.form-card-body input[type="file"].form-control, .modal-form input[type="file"].form-control { height: auto !important; min-height: 0 !important; }
.form-home-body .ps-trigger *, .form-card-body .ps-trigger *, .modal-form .ps-trigger *, .doc-filter .ps-trigger * { font-size: inherit !important; }
.form-home-body .form-control::placeholder, .form-card-body .form-control::placeholder, .modal-form .form-control::placeholder { font-size: var(--field-fs); }

.form-home-body textarea.form-control, .form-card-body textarea.form-control, .modal-form textarea.form-control {
  height: auto !important; min-height: 64px !important; padding: 8px 12px !important; font-size: var(--field-fs) !important;
}

/* Nút dính liền ô — cao bằng ô. */
.search-panel .sp-box button { width: var(--field-h) !important; height: var(--field-h) !important; }
.search-panel .sp-box input { padding-right: calc(var(--field-h) + 8px) !important; }
.nav-drawer .nd-search__box button { top: 1px; right: 1px; width: calc(var(--field-h) - 2px); height: calc(var(--field-h) - 2px); }
.search-page-submit, .contact-dir-geo, .contact-dir-go { height: var(--field-h) !important; }
.footer-subscribe-btn { height: var(--field-h); }

/* Form trên trang KHÔNG bóng (người dùng 2026-10-06) — viền mảnh thay bóng, như form trang Chuyên khoa (.specialty-booking-section
   .form-panel). Áp cho form dạng thẻ (đăng ký tiêm, thai sản…) và thẻ công cụ tra lịch tiêm. Popup giữ bóng (nổi trên lớp mờ). */
.form-panel, .vaccine-calc-card { box-shadow: none !important; border: 1px solid var(--border) !important; }
.btn-panel-submit, .btn-panel-submit:hover { box-shadow: none !important; }

/* Đầu thẻ "Nhập Thông Tin Bé Yêu": giữ bố cục + icon trắng trơn cũ, chỉ đổi NỀN theo đầu form đăng ký (.form-panel-header) —
   gradient xanh thương hiệu + hai vầng sáng mờ (người dùng 2026-10-06). */
.vaccine-calc-header {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, var(--primary-blue) 0%, var(--primary-blue-dark) 100%) !important;
}
.vaccine-calc-header::before, .vaccine-calc-header::after {
  content: ""; position: absolute; border-radius: 50%; pointer-events: none; background: rgba(255, 255, 255, .06);
}
.vaccine-calc-header::before { width: 220px; height: 220px; top: -120px; right: -60px; }
.vaccine-calc-header::after  { width: 160px; height: 160px; bottom: -110px; left: -40px; }
.vaccine-calc-header > * { position: relative; }

/* Icon đầu form (.form-panel-badge — Tiêm chủng, Chuyên khoa, Bác sĩ, Dịch vụ): BỎ nền tròn vàng, icon trắng trơn 22px như icon
   em bé của thẻ "Nhập Thông Tin Bé Yêu" (người dùng 2026-10-06: hai icon phải giống nhau). */
.form-panel-badge { width: auto !important; height: auto !important; background: none !important; color: #fff !important; border-radius: 0; }
.form-panel-badge .icon { width: 22px !important; height: 22px !important; }
@media (max-width: 768px) { .form-panel-badge .icon { width: 18px !important; height: 18px !important; } }

/* ═══ Trang Đăng ký sinh (/dang-ky-sinh) — rà giao diện 2026-10-06 ═══════════════════════════════════════════════════════
   • Icon đặc quyền: ảnh icon ĐÃ CÓ sẵn vòng tròn nền hồng → để ảnh phủ kín vòng (trước 30px / 22px trong vòng 60px / 44px nên
     icon thành chấm nhỏ trong hai lớp vòng).
   • Thẻ ngân hàng & mã QR: bỏ bóng, viền mảnh — đồng bộ các form vừa bỏ bóng.
   • Điện thoại: thanh nút dưới banner XUỐNG DÒNG thay vì cuộn ngang (nút thứ hai bị cắt mép phải); ô "Đặt cọc giữ chỗ" của thẻ
     gói 2 cột: rộng 100%, MỘT dòng — đủ chữ khi vừa, thẻ hẹp thì nhãn ngắn "Cọc" (page.depositShort, site.js). Áp cho mọi trang con
     dùng thanh nút banner. */
.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) {
  .page-sub-hero-actions { flex-wrap: wrap; justify-content: center; overflow: visible; }
  .page-sub-hero-actions .sub-hero-btn { flex: 1 1 auto; justify-content: center; }
  /* Rộng 100%, MỘT hàng; đủ chữ khi vừa — chữ tràn thì site.js gắn .is-short → nhãn ngắn "Cọc:". Cỡ chữ như demo (.7rem). */
  .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;
  }
  /* Đệm 4px + icon 12px: đủ chữ "Đặt cọc giữ chỗ: 3.000.000 VND" từ màn 460px như demo (đo: cần 192px / ô 186px). */
  .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; }   /* máy ~360px: nhãn ngắn vẫn tràn → nhỏ một nấc */
  .pkg-price { font-size: 1.05rem !important; }
}

/* Nhãn "HOT NHẤT" của thẻ gói thai sản (.pkg-badge) — người dùng 2026-10-06 "cần style lại": tag VẮT NGANG VIỀN TRÊN, phía TRÁI
   (dấu ✓ "đang chọn" đã ở góc phải), không chiếm chỗ trong thẻ → tên gói các thẻ cùng hàng thẳng nhau (trước: tên bị đẩy xuống
   18px trên điện thoại / chừa 104px bên phải trên máy tính). Nền gradient đỏ thương hiệu như nút đỏ trang chủ, chữ in hoa nhỏ. */
.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(--primary-red) 0%, var(--primary-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(186, 20, 26, .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; }
}

/* ═══ Phiếu đăng ký sinh + Ngân hàng (.booking-card — /dang-ky-sinh) CHUẨN HÓA THEO FORM TIÊM CHỦNG (.form-panel) ═══════════
   Người dùng 2026-10-06. Mỗi cột là MỘT THẺ: nền trắng, viền mảnh, không bóng, bo 16px (điện thoại 8px) như .form-panel; dải đầu
   gradient xanh thương hiệu + vầng sáng mờ, chữ trắng in hoa font tiêu đề, icon trắng trơn (như đầu form tiêm chủng). Ô nhập
   36px + nhãn dùng chung .form-card-body (khối "CHUẨN Ô NHẬP CHUNG"). Ô ngân hàng bên trong bỏ viền / bo / vạch xanh riêng —
   thẻ ngoài đã là khung. */
.page-booking-section .booking-card {
  padding: 0 !important; overflow: hidden; background: #fff; border: 1px solid var(--border); border-radius: 16px;
}
.booking-card-title {
  position: relative; overflow: hidden; margin: 0 !important; padding: 18px 24px !important; border-bottom: 0 !important;
  background: linear-gradient(135deg, var(--primary-blue) 0%, var(--primary-blue-dark) 100%);
  color: #fff !important; font-size: 1.05rem !important; font-weight: 800; letter-spacing: .5px; text-transform: uppercase;
}
.booking-card-title::before, .booking-card-title::after {
  content: ""; position: absolute; border-radius: 50%; pointer-events: none; background: rgba(255, 255, 255, .06);
}
.booking-card-title::before { width: 160px; height: 160px; top: -100px; right: -40px; }
.booking-card-title::after  { width: 110px; height: 110px; bottom: -80px; left: -30px; }
.booking-card-title > * { position: relative; }
.booking-card-title .icon { color: #fff !important; width: 20px !important; height: 20px !important; }
.booking-card > .form-card { padding: 24px 24px 28px; }
.page-booking-section .booking-card > .maternity-deposit-box {
  margin: 0; padding: 20px 24px 24px; border: 0 !important; border-radius: 0; box-shadow: none !important;
}
@media (max-width: 768px) {
  .page-booking-section .booking-card { border-radius: 8px; }
  .booking-card-title { padding: 12px 14px !important; font-size: .98rem !important; letter-spacing: .2px; }
  .booking-card-title .icon { width: 18px !important; height: 18px !important; }
  .booking-card > .form-card { padding: 14px 12px 16px; }
  .page-booking-section .booking-card > .maternity-deposit-box { padding: 14px 12px 16px; }
}

/* Thẻ ngân hàng trên điện thoại: MỌI dòng giữ nhãn + giá trị CÙNG MỘT HÀNG (người dùng 2026-10-06) — giá trị căn phải, dài
   (tên ngân hàng, chủ tài khoản) thì xuống dòng bên phải. Đè luật xếp dọc ≤480px phía trên. */
@media (max-width: 480px) {
  /* baseline: nhãn ngang dòng ĐẦU của giá trị (không căn giữa theo chiều dọc khi giá trị xuống 2 dòng — người dùng 2026-10-06). */
  .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; }
}

/* ═══ Thẻ dịch vụ / chuyên khoa (_SpecialtyCard) — người dùng 2026-10-06 ═════════════════════════════════════════════════
   • Ảnh trên KHÔNG bị cắt: khung cố định 16:9 + object-fit:cover cắt mất hai bên ảnh dịch vụ (ảnh thật 5:3 — 600×360, chữ
     "BV ĐA KHOA QUỐC TẾ THỦY NGUYÊN", "(WORK PERMIT)" bị cụt). Khung theo đúng tỉ lệ ảnh.
   • Trang Dịch vụ (.service-list-section) trên điện thoại: 2 thẻ / hàng; thẻ hẹp một nửa → chữ, đệm gọn lại, mô tả tối đa 3
     dòng, chỉ còn nút "Đặt lịch khám" (ẩn "Chi tiết"). */
.specialty-card.is-image-top .specialty-card-media { aspect-ratio: auto; }
.specialty-card.is-image-top .specialty-card-media img { height: auto; }
@media (max-width: 767px) {
  .service-list-section .specialty-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .service-list-section .specialty-card { border-radius: 8px; }
  .service-list-section .specialty-card-body { padding: 10px 10px 12px; }
  .service-list-section .specialty-card-head { gap: 8px; margin-bottom: 8px; }
  .service-list-section .specialty-card-name { font-size: .8rem; line-height: 1.3; }
  .service-list-section .specialty-card-tag { margin-top: 4px; padding: 2px 6px; font-size: .58rem !important; }
  .service-list-section .specialty-card-desc { margin-bottom: 8px; font-size: .74rem; line-height: 1.45; -webkit-line-clamp: 3; }
  .service-list-section .specialty-card-foot { padding-top: 8px; }
  .service-list-section .specialty-card-info { gap: 6px; }
  .service-list-section .specialty-card-info > .icon { width: 24px; height: 24px; padding: 5px; }
  .service-list-section .specialty-card-info-label { font-size: .58rem; }
  .service-list-section .specialty-card-info-value { font-size: .74rem; }
  .service-list-section .specialty-card-actions { grid-template-columns: 1fr; gap: 6px; margin-top: 8px; }
  .service-list-section .specialty-card-btn { min-height: 32px; padding: 6px 8px; gap: 4px; font-size: .72rem; }
  .service-list-section .specialty-card-btn .icon { width: 13px; height: 13px; }
  /* Chỉ giữ "Đặt lịch khám" (người dùng 2026-10-06) — vào trang chi tiết bằng ảnh / tên dịch vụ (đều là link). */
  .service-list-section .specialty-card-btn.is-ghost { display: none; }
}

/* ═══ Trang Giới thiệu (/gioi-thieu) trên ĐIỆN THOẠI — người dùng 2026-10-06 (máy tính giữ nguyên) ════════════════════════
   Số cột / kiểu slide do ô của Giao diện giới thiệu quyết định (Tầm nhìn: slide 2; Ban giám đốc: 2; Thư viện ảnh, video: 3).
   CSS ở đây chỉ làm gọn cho vừa ô hẹp:
     • Tầm nhìn: mũi tên trước / sau trơn, lề chừa mũi tên thu còn 22px (vẫn vuốt được — track scroll-snap) + bỏ khoảng trắng
       lớn phía trên (lề dưới khối giới thiệu + lề trên khối Tầm nhìn); thẻ gọn chữ cho 2 thẻ / khung.
     • Thư viện ảnh 3 / hàng: ô VUÔNG (trước cao cố định 250px → ô dọc rất dài), chú thích nhỏ.
     • Thư viện video 3 / hàng: nút play nhỏ lại cho vừa ảnh thu nhỏ. */
@media (max-width: 767px) {
  .about-intro-section:has(+ .about-page-block) { padding-bottom: 16px !important; }
  .about-intro-section .about-intro-text { margin-bottom: 0 !important; }   /* lề tiêu đề section (16px) không cần ở cuối khối chữ */
  .about-intro-section + .about-page-block { padding-top: 0 !important; }
  /* Mũi tên trước / sau (trơn, không nền tròn — luật .hp-arrow chung), lề thu 22px để khối gần full bề ngang. */
  .hp-list--vision.hp-slide-on.hp-has-arrows { padding-left: 22px; padding-right: 22px; }
  .hp-list--vision.hp-slide-on .hp-arrow { width: 22px !important; height: 32px !important; }
  .hp-list--vision.hp-slide-on .hp-arrow .icon { width: 18px !important; height: 18px !important; }
  .hp-list--vision .vision-card { padding: 14px 10px; border-radius: 8px; box-shadow: none; }
  .hp-list--vision .vision-icon-wrap { width: 48px; height: 48px; margin-bottom: 10px; }
  .hp-list--vision .vision-title { font-size: .82rem; margin-bottom: 6px; }
  .hp-list--vision .vision-desc { font-size: .74rem; line-height: 1.5; }

  .about-page-block .hp-list--equipment .equipment-item-card { height: auto; aspect-ratio: 1 / 1; border-radius: 8px; box-shadow: none; }
  .about-page-block .hp-list--equipment .equipment-bottom-caption { padding: 4px 4px 5px !important; font-size: .6rem !important; line-height: 1.25; }

  .about-page-block .btn-play-video-pulse { width: 30px !important; height: 30px !important; }
  .about-page-block .btn-play-video-pulse .icon { width: 12px !important; height: 12px !important; }
}

/* ═══ Đội ngũ bác sĩ (/doi-ngu-bac-si) — người dùng 2026-10-06 ═══════════════════════════════════════════════════════════
   • Ô tìm theo tên: icon kính lúp đè chữ — khối "CHUẨN Ô NHẬP CHUNG" ép đệm trái 12px cho .doc-filter .form-control, mất chỗ
     40px chừa icon (lỗi cả máy tính). Trả đệm cho ô có icon.
   • Điện thoại: bộ lọc MỘT HÀNG (chuyên khoa | tìm tên, ẩn nhãn — ô chọn ghi "Tất cả bác sĩ", ô tìm có gợi ý); thẻ bác sĩ
     2 / hàng, chữ + nút gọn lại, đoạn giới thiệu tối đa 3 dòng. */
.doc-filter-search .form-control { padding-left: 38px !important; }
.doc-filter-search > .icon { left: 12px; width: 16px; height: 16px; }
@media (max-width: 767px) {
  .doc-filter { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; padding: 10px !important; margin-bottom: 16px !important; border-radius: 8px; }
  .doc-filter-field label { display: none; }

  .doctor-list-section .specialty-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .doctor-list-section .doctor-card { border-radius: 8px; }
  .doctor-list-section .doctor-card .specialty-card-body { padding: 12px 10px; }
  .doctor-list-section .doctor-card .specialty-card-head { gap: 8px !important; margin-bottom: 8px; }
  .doctor-list-section .doctor-card.is-center .doctor-card-photo { width: 72px; height: 72px; border-radius: 12px; }
  .doctor-list-section .doctor-card.is-center .doctor-card-photo .icon { width: 34px; height: 34px; }
  .doctor-list-section .doctor-card .specialty-card-name { font-size: .8rem; line-height: 1.3; }
  .doctor-list-section .doctor-card .specialty-card-tag,
  .doctor-list-section .doctor-card .specialty-card-tag.is-text { margin-top: 3px; font-size: .68rem; line-height: 1.35; }
  .doctor-list-section .doctor-card-expertise { font-size: .66rem; line-height: 1.35; }
  .doctor-list-section .doctor-card .specialty-card-desc { margin-bottom: 8px; font-size: .7rem; line-height: 1.45; -webkit-line-clamp: 3; }
  .doctor-list-section .doctor-card .specialty-card-foot { padding-top: 8px; }
  .doctor-list-section .doctor-card .specialty-card-info.is-plain .specialty-card-info-value { font-size: .66rem; line-height: 1.35; }
  .doctor-list-section .doctor-card-actions { grid-template-columns: 1fr; gap: 6px; margin-top: 8px; }
  .doctor-list-section .doctor-card-actions .specialty-card-btn { min-height: 32px; padding: 6px 4px; gap: 4px; font-size: .64rem; }
  .doctor-list-section .doctor-card-actions .specialty-card-btn .icon { width: 12px; height: 12px; }
  /* Nút "Xem thêm" (bác sĩ / chuyên khoa / dịch vụ) = cỡ nút "Xem tất cả…" trang chủ trên điện thoại (.btn-outline-view):
     cao tối thiểu 40px, đệm 9px 16px, chữ .8rem. */
  .specialty-more .btn-pill { min-height: 40px; padding: 9px 16px !important; gap: 6px; font-size: .8rem !important; line-height: 1.25; }
  .specialty-more .btn-pill .icon { width: 14px; height: 14px; }
}

/* ═══ Form dạng thẻ (.form-panel) trên MÁY TÍNH — chuẩn theo form Đăng ký tiêm chủng (người dùng 2026-10-06) ══════════════════
   • Full bề ngang khung (bỏ giới hạn 960px của trang Chuyên khoa / Bác sĩ).
   • TỐI ĐA 3 ô / hàng: các hàng của Trình dựng form "chảy" liền vào MỘT lưới 3 cột (hàng → display:contents) — form
     "Đăng ký khám bệnh" (hàng 2 ô) dùng chung với trang chủ (cột hẹp, 2 cột vừa) nên KHÔNG đổi dữ liệu form, chỉ đổi cách
     bày ở khung .form-panel. Ô nhiều dòng (ghi chú) và các phần ngoài hàng ô (ô xác minh, nút gửi) chiếm trọn hàng.
   Điện thoại / máy tính bảng giữ số cột của từng hàng như cũ. */
.specialty-booking-section .form-panel { max-width: none !important; }
@media (min-width: 992px) {
  .page-booking-section .form-panel form[data-page-form] { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 24px; }
  .page-booking-section .form-panel form[data-page-form] > .form-home-row { display: contents; }
  .page-booking-section .form-panel form[data-page-form] > :not(.form-home-row) { grid-column: 1 / -1; }
  .page-booking-section .form-panel .form-group:has(textarea) { grid-column: 1 / -1; }
}

/* Trang Liên hệ trên ĐIỆN THOẠI: 3 thẻ Địa chỉ / Điện thoại / Email CÙNG MỘT HÀNG (người dùng 2026-10-06) — mỗi thẻ ~115px nên
   icon, tiêu đề, chữ gọn lại; email / địa chỉ dài được ngắt giữa chừng (overflow-wrap) để không tràn thẻ. */
@media (max-width: 767px) {
  .contact-cards { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 8px !important; margin-bottom: 24px !important; }
  .contact-card { padding: 12px 6px !important; border-radius: 8px; }
  .contact-card-icon { margin-bottom: 4px; }
  .contact-card-icon .icon { width: 24px; height: 24px; }
  .contact-card-title { margin-bottom: 4px !important; font-size: .64rem !important; line-height: 1.3; letter-spacing: 0 !important; }
  .contact-card-text { font-size: .64rem; line-height: 1.45; overflow-wrap: anywhere; }
}

/* Trang Bảng giá: hai khối liền nhau (bảng giá → Bảo lãnh viện phí / Thủ tục nhập viện) cách nhau 120px (60px lề dưới + 60px lề
   trên của .section-padding) — người dùng 2026-10-07 thấy xa. Khối thẻ thông báo đứng sau một khối cùng trang: bỏ lề trên. */
.page-block:has(.price-table-wrap, .price-notice-card) + .page-block:has(.price-notice-card) { padding-top: 0 !important; }

/* Khối Giới thiệu trang chủ: dòng khẩu hiệu đỏ (“CHUYÊN NGHIỆP – TRÁCH NHIỆM – HIỆU QUẢ”) nhỏ lại — trước to gần bằng tiêu đề
   (1.4rem / điện thoại 1.22rem) và rớt 2 dòng trên điện thoại (người dùng 2026-10-08). */
.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; }
}

/* Dải số liệu "Đội ngũ chuyên gia – bác sĩ" trên điện thoại (5 ô / hàng — .ml-dense / .mp-dense): số to lên một chút
   (.88rem → 1.25rem), nhãn .5rem → .54rem (người dùng 2026-10-08). */
@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; }
}

/* Tiêu đề section trên điện thoại nhỏ lại một chút: 1.22rem (19.5px) → 18px (người dùng 2026-10-08). Khẩu hiệu đỏ (.title.red) có cỡ
   riêng ở trên, không đổi. */
@media (max-width: 768px) {
  .header-box .title:not(.red) { font-size: 18px !important; }
}

/* Thẻ dịch vụ trang chủ (.service-card-item): bo góc 8px như các thẻ khác của site (người dùng 2026-10-08 — trước bo to). */
.service-card-item { border-radius: 8px !important; }

/* ═══ TIN TỨC — /tin-tuc, /danh-muc/{slug}, /tin-tuc/{slug} (Views/News/*) ═══════════════════════════════════════════════
   Thẻ bài + dòng meta + chi tiết: CHÉP style.css của nhomkinhhaiphong (khối "Dòng meta", "Danh sách bài", "Chi tiết bài
   viết", "Thẻ bài viết theo KIỂU HIỂN THỊ"); token --sd-* đổi sang token :root của site (--text-dark, --text-muted,
   --primary, --primary-dark, --border-light, --bg-soft). Khung 2 cột + thanh bên: CHÉP cột phải tin-tuc.html của demo
   (card border p-3 rounded-3 shadow-sm · h5 text-primary · list-group + badge rounded-pill · card bg-danger) viết lại
   không Bootstrap. Lưới Bootstrap của bản gốc (row/col-lg-9/col-md-4) đổi sang CSS grid. */
.news-page-section .header-box { margin-bottom: 28px; }
.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; }

/* ── Dòng meta: ngày đăng · danh mục · lượt xem — LUÔN 1 dòng, tên danh mục co lại "…" ── */
.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); }

/* ── Danh sách bài (mỗi bài 1 hàng: ảnh trái + nội dung phải) — kiểu "Nổi bật" / "Ảnh bên trái" ── */
.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); }

/* ── Lưới thẻ — kiểu "Ảnh lớn trên" / "Ảnh tròn trên" (trải ngang 4 cột; /tin-tuc có thanh bên: 2 cột như demo) ── */
.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-cards--imgtop .nw-card, .nw-cards--icontop .nw-card { background: #fff; border-radius: 10px; padding: 14px; border: 1px solid var(--border-light); transition: box-shadow .18s ease; }
.nw-cards--imgtop .nw-card:hover, .nw-cards--icontop .nw-card:hover { box-shadow: 0 4px 14px rgba(0, 0, 0, .08); }
.nw-cards--icontop .nw-card { padding-top: 20px; }
.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-card--icon { align-items: center; text-align: center; }
.nw-card--icon .nw-meta { justify-content: center; }
.nw-card--icon .nw-card__more { text-align: center; }
.nw-card__icon { display: flex; align-items: center; justify-content: center; width: 110px; height: 110px; margin-bottom: 12px; padding: 8px; border-radius: 50%; overflow: hidden; background: var(--bg-soft); border: 1px solid var(--border-light); }
.nw-card__icon img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 50%; }
.nw-card__icon:hover img { opacity: .92; }

/* ── Chi tiết bài viết ── */
.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-detail .specialty-lead { margin-bottom: 18px; }
.nw-related { margin-top: 36px; }
.nw-related__more { margin-top: 18px; text-align: center; }

/* ── Thanh bên (demo: card border p-3 rounded-3 shadow-sm) ── */
.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-search { display: flex; }
.nw-search input { flex: 1; min-width: 0; padding: 10px 12px; font: inherit; font-size: .95rem; color: var(--text); border: 1px solid var(--border); border-right: 0; border-radius: 6px 0 0 6px; outline: none; }
.nw-search input:focus { border-color: var(--primary); }
.nw-search button { display: flex; align-items: center; justify-content: center; padding: 0 14px; border: 0; border-radius: 0 6px 6px 0; background: var(--primary); color: #fff; cursor: pointer; }
.nw-search button:hover { background: var(--primary-dark); }
.nw-search .icon { width: 16px; height: 16px; }
.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: #dc3545; 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: #dc3545; font-weight: 700; }
.nw-hotline__btn:hover { background: #fff; color: #b02a37; }
.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: 575.98px) {
  .nw-cards, .nw-cards.nw-cards--2 { grid-template-columns: 1fr; }
  .nw-card__icon { width: 92px; height: 92px; }
}

/* ═══ TRANG LỊCH KHÁM — /dat-lich-kham (Views/Shared/Page/_Booking.cshtml, người dùng 2026-10-10) ═══════════════════════
   ⚠️ Không có bản gốc: bố cục 2 cột theo https://vih.vn/dat-hen-kham/ (trái thông tin, phải form). Khối form dùng .form-panel
   sẵn có; thẻ tổng đài dùng .nw-hotline của thanh bên Tin tức; ô giờ làm việc cùng kiểu thẻ viền mảnh .nw-widget (không đổ
   bóng — người dùng bỏ đổ bóng toàn site). */
.booking-page .header-box { margin-bottom: 28px; }
/* 3/2 — nội dung 60%, form 40% (người dùng 2026-10-10: cột form hơi to; hàng ô chọn của form còn 3 ô nên đủ rộng). */
.booking-grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 32px; align-items: start; }
.booking-grid.no-form { grid-template-columns: minmax(0, 1fr); }
.booking-info { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.booking-content > :first-child { margin-top: 0; }
.booking-content > :last-child { margin-bottom: 0; }
.booking-hours { background: #fff; border: 1px solid var(--border); border-radius: 8px; padding: 16px 20px; }
.booking-hours-title { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-family: var(--font-heading); font-size: 1.15rem; font-weight: 700; color: var(--primary); text-transform: uppercase; }
.booking-hours-title .icon { width: 20px; height: 20px; }
.booking-hours-day + .booking-hours-day { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border-light); }
.booking-hours-name { margin: 0 0 4px; font-weight: 700; color: var(--text-dark); }
.booking-hours-shift { margin: 0; color: var(--text); }
.booking-hours-shift span { color: var(--text-muted); margin-right: 4px; }
.booking-hours-shift strong { color: var(--text-dark); font-weight: 600; }
/* "Gợi ý dịch vụ" — TAG VIỀN MẢNH + MŨI TÊN ↗ (người dùng chọn 2026-10-10): tag trắng viền xám mảnh bo 8px, chữ đậm vừa,
   mũi tên chéo (arrow-right xoay -45°) cuối tag; rê chuột viền + chữ xanh, mũi tên nhích chéo. Không đổ bóng (quy ước site). */
.booking-keywords { padding-top: 20px; border-top: 1px solid var(--border-light); }
.booking-keywords-title { position: relative; margin: 0 0 14px; padding-left: 12px; font-family: var(--font-heading); font-size: 1rem; font-weight: 700; color: var(--text-dark); }
.booking-keywords-title::before { content: ""; position: absolute; left: 0; top: 3px; bottom: 3px; width: 4px; border-radius: 2px; background: var(--primary); }
.booking-keywords-list { display: flex; flex-wrap: wrap; gap: 10px; }
.kw-tag {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px 8px 14px; border: 1px solid var(--border); border-radius: 8px;
  background: #fff; color: var(--text-dark); font-size: .875rem; font-weight: 600; line-height: 1.2; white-space: nowrap;
  transition: border-color .2s ease, color .2s ease;
}
.kw-tag .icon { width: 14px; height: 14px; color: var(--text-muted); transform: rotate(-45deg); transition: transform .2s ease, color .2s ease; }
.kw-tag:hover { border-color: var(--primary); color: var(--primary); }
.kw-tag:hover .icon { color: var(--primary); transform: rotate(-45deg) translateX(2px); }
.kw-tag:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.booking-form-col { position: sticky; top: var(--sticky-top); min-width: 0; scroll-margin-top: var(--sticky-top); }
.booking-form-panel { box-shadow: none; border: 1px solid var(--border); }
/* Câu chọn (Giới tính, BHYT…): 2 lựa chọn chia đều 2 cột như form vih.vn (người dùng 2026-10-10). */
.booking-form-panel .form-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 14px; }
/* Hàng NHIỀU ô (≥3 cột, vd 4 ô chọn): nhãn MỘT dòng (dài thì "…", rê chuột xem trọn qua title) và ô nhập thẳng hàng đáy —
   nhãn xuống dòng làm các ô lệch nhau (người dùng 2026-10-10). */
.booking-form-panel .form-home-row[style*="--cols:3"] label, .booking-form-panel .form-home-row[style*="--cols:4"] label {
  display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.booking-form-panel .form-home-row[style*="--cols:3"] .form-control,
.booking-form-panel .form-home-row[style*="--cols:4"] .form-control { padding-left: 10px !important; padding-right: 26px !important; }

/* Nhóm Radio / Checkbox bắt buộc chưa chọn (site.js — Page/_Form data-required): chữ + ô chọn đỏ như ô nhập lỗi. */
.form-choices.is-invalid .form-choice { color: #dc3545; }
.form-choices.is-invalid input { outline: 2px solid rgba(220, 53, 69, .45); outline-offset: 1px; }

@media (max-width: 991.98px) {
  .booking-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .booking-form-col { position: static; }
}