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

/* ── 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; }
  .process-flow-marker { width: var(--dot); flex-shrink: 0; flex-direction: column; justify-content: flex-start; margin: 0; }
  .process-flow-num { font-size: 1.1rem; box-shadow: 0 0 0 5px var(--tone-soft), 0 6px 14px rgba(15, 23, 42, .16); }
  .process-flow-step:not(:last-child) .process-flow-marker::after {
    top: calc(var(--dot) + 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(var(--dot) + (100% - var(--dot) + 22px) / 2); left: 50%; transform: translate(-50%, -50%) rotate(90deg); width: 24px; height: 24px; }
  .process-flow-card {
    display: grid; grid-template-columns: 120px minmax(0, 1fr); column-gap: 14px; align-items: start;
    text-align: left; padding: 14px; border-top: 0; border-left: 4px solid var(--tone);
  }
  button.process-flow-card { border-top: 0; }
  .process-flow-thumb { grid-row: 1 / span 3; margin: 0; aspect-ratio: 4 / 3; }
  .process-flow-card:hover { transform: translateY(-3px); }
}
@media (max-width: 575px) {
  .process-flow-card { grid-template-columns: 84px minmax(0, 1fr); column-gap: 12px; }
  .process-flow-title { font-size: .95rem; margin-bottom: 4px; }
  .process-flow-desc { font-size: .8rem; }
}

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

/* 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; }
.btn-outline-view {
  display: inline-flex; align-items: center; gap: 6px; padding: 9px 24px; border: 1px solid var(--primary-blue);
  border-radius: 6px; color: var(--primary-blue); font-weight: 600; text-transform: uppercase; font-size: .95rem;
  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; }
  .news-sub-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
}

/* 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; }
.video-card-title { display: -webkit-box; }
.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; }
.sp-tag-yellow { --sp-tag: #f59e0b; --sp-tag-fg: #1e293b; }
.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%; }
.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: 90px; }
@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: 480px; 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); }
.m-header .mh-btn .icon { width: 24px; height: 24px; }
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); }
.ss-dd__menu {
  position: absolute; top: calc(100% + 6px); left: 0; min-width: 100%; margin: 0; padding: 6px; list-style: none;
  background: #fff; border: 1px solid #e2e8f0; border-radius: 8px;
  opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .2s ease, transform .2s ease, visibility .2s; z-index: 3;
}
.ss-dd.is-open .ss-dd__menu { opacity: 1; visibility: visible; transform: translateY(0); }
.ss-dd__menu li {
  padding: 9px 12px; border-radius: 5px; color: #374151; font-size: .9rem; white-space: nowrap; cursor: pointer;
  transition: background .15s, color .15s;
}
.ss-dd__menu li:hover { background: #f1f6fd; color: var(--primary-blue); }
.ss-dd__menu li.is-active { background: var(--primary-blue); color: #fff; }
/* 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; }
@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; }
}