/* ═══════════════════════════════════════════════════════════
   DESIGN TOKENS — mockup cam kết một thế giới sáng (website
   bệnh viện là sáng), nên mọi màu được sơn tường minh.
   ═══════════════════════════════════════════════════════════ */
:root{
  /* Accent — một màu duy nhất */
  --brand:#0E5F46;
  --brand-dark:#0A4634;
  --brand-mid:#2E8B6B;
  --brand-wash:#E8F2ED;
  --brand-wash-2:#F1F7F3;

  /* Trung tính lệch xanh, không phải xám lạnh */
  --ground:#F4F7F4;
  --surface:#FFFFFF;
  --line:#DCE5DF;
  --line-soft:#EAF0EC;

  --ink:#13201A;
  --ink-2:#4E5C55;
  --ink-3:#7E8B84;
  --on-brand:#FFFFFF;

  /* Accent phụ — mặc định trùng accent chính; chỉ bản Chàm dùng màu riêng */
  --accent:var(--brand);
  --accent-wash:var(--brand-wash);

  /* Semantic — chỉ dùng cho số cấp cứu */
  --urgent:#A8362A;
  --urgent-wash:#F7EAE8;

  /* Ô ảnh placeholder + lớp phủ, dẫn xuất từ accent nên đổi màu theo bản */
  --ph-1:color-mix(in srgb, var(--brand) 22%, #FFFFFF);
  --ph-2:color-mix(in srgb, var(--brand) 10%, #FFFFFF);
  --ph-3:color-mix(in srgb, var(--brand) 17%, #FFFFFF);
  --scrim:color-mix(in srgb, var(--brand-dark) 62%, transparent);
  --glow:color-mix(in srgb, var(--brand-dark) 55%, transparent);

  --shadow-hover:0 2px 4px rgba(19,32,26,.04), 0 12px 28px -14px rgba(19,32,26,.28);

  --container:1280px;
  --hdr-h:88px;
  --gutter:clamp(20px,4vw,40px);
  --rhythm:clamp(56px,7vw,96px);
  --r:10px;
}

/* ═══ BA BẢN MÀU ═══════════════════════════════════════════
   Chỉ ghi đè token. Mọi thành phần đọc token nên không có
   component nào cần biết đang chạy bản nào.
   --accent kế thừa --brand qua var(), nên bản nào không khai
   accent riêng thì tự động dùng một màu duy nhất. */
:root[data-palette="blue"]{
  --brand:#10538F; --brand-dark:#0B3B68; --brand-mid:#3E85C6;
  --brand-wash:#E7EFF8; --brand-wash-2:#F1F6FB;
  --ground:#F4F6FA; --line:#D9E1EC; --line-soft:#E8EEF5;
  --ink:#121A24; --ink-2:#4C5764; --ink-3:#7C8695;
}
:root[data-palette="indigo"]{
  --brand:#2B3A6F; --brand-dark:#1E2950; --brand-mid:#5C6BB0;
  --brand-wash:#ECEEF7; --brand-wash-2:#F4F5FA;
  --ground:#F7F6F3;                    /* ngả ấm một chút để bắt tay với hổ phách */
  --line:#DFDFE6; --line-soft:#EDEDF2;
  --ink:#161A27; --ink-2:#4E5366; --ink-3:#82889C;
  --accent:#9A6412; --accent-wash:#F6EEDF;   /* hổ phách — chỉ ở dấu nhấn nhỏ */
}

*{box-sizing:border-box}
body{
  margin:0;
  background:var(--ground);
  color:var(--ink);
  font-family:"Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:17px;
  line-height:1.72;
  -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%}
a{color:inherit;text-decoration:none}
:focus-visible{outline:3px solid var(--brand-mid);outline-offset:2px;border-radius:4px}

.wrap{max-width:var(--container);margin:0 auto;padding-inline:var(--gutter)}

/* Serif ở đúng hai chỗ: H1 và H2. Đủ để mang chất cổ truyền, không đủ để
   biến trang thành tạp chí. Mọi cấp dưới — tên card, tên khoa, con số, số
   điện thoại — dùng sans, vì đó là những thứ người bệnh QUÉT chứ không ĐỌC. */
h1,h2{font-family:"Source Serif 4",Georgia,serif;font-weight:600;text-wrap:balance;margin:0}
h1{font-size:clamp(32px,4vw,46px);line-height:1.18;letter-spacing:-.008em}
h2{font-size:clamp(25px,2.6vw,33px);line-height:1.26;letter-spacing:-.005em}
h3{font-family:"Be Vietnam Pro",system-ui,sans-serif;font-weight:600;font-size:19px;line-height:1.4;margin:0;text-wrap:balance}
p{margin:0}

/* ── Eyebrow + section head ────────────────────────────── */
.eyebrow{
  font-size:12.5px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:var(--brand);margin:0 0 12px;
}
.sechead{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:36px;flex-wrap:wrap}
.sechead .sub{margin-top:10px;color:var(--ink-2);max-width:58ch}
.seclink{
  position:relative;display:inline-flex;align-items:center;gap:7px;flex:none;
  color:var(--brand);font-weight:600;font-size:15.5px;padding-bottom:2px;
  border-bottom:2px solid transparent;
}
.seclink:hover{border-bottom-color:var(--brand)}

section.band{padding-block:var(--rhythm)}
.band-surface{background:var(--surface)}
.band-wash{background:var(--brand-wash-2)}

/* ── Buttons ───────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:52px;padding:0 26px;border-radius:8px;border:2px solid transparent;
  font-family:inherit;font-size:16px;font-weight:600;letter-spacing:.01em;
  cursor:pointer;transition:background-color .16s,color .16s,border-color .16s;
}
.btn-primary{background:var(--brand);color:var(--on-brand)}
.btn-primary:hover{background:var(--brand-dark)}
.btn-outline{background:transparent;color:var(--brand);border-color:var(--brand)}
.btn-outline:hover{background:var(--brand-wash)}
.btn-onbrand{background:var(--on-brand);color:var(--brand)}
.btn-onbrand:hover{background:var(--brand-wash)}
.btn-ghost-onbrand{background:transparent;color:var(--on-brand);border-color:rgba(255,255,255,.5)}
.btn-ghost-onbrand:hover{border-color:var(--on-brand);background:rgba(255,255,255,.1)}
.btn svg{flex:none}

/* ── Placeholder ảnh ───────────────────────────────────── */
.ph{
  position:relative;overflow:hidden;border-radius:var(--r);
  background:linear-gradient(140deg,var(--ph-1) 0%,var(--ph-2) 45%,var(--ph-3) 100%);
  display:block;
}
.ph::after{
  content:attr(data-label);
  position:absolute;left:12px;bottom:12px;
  font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--brand-dark);background:rgba(255,255,255,.82);
  padding:4px 9px;border-radius:4px;
}
/* Không có nhãn thì không vẽ chip — nếu không sẽ để lại một ô trắng rỗng
   trên mọi ảnh thumbnail. */
.ph:not([data-label])::after,.ph[data-label=""]::after{display:none}
.ph svg{position:absolute;inset:0;width:100%;height:100%}
.ph-portrait{aspect-ratio:3/4}
.ph-16x9{aspect-ratio:16/9}
.ph-4x3{aspect-ratio:4/3}

/* ═════════ 01 · TOP UTILITY BAR ═════════ */
.util{background:var(--brand-dark);color:rgba(255,255,255,.88);font-size:14px}
.util .wrap{display:flex;align-items:center;gap:8px 28px;flex-wrap:wrap;min-height:44px;padding-block:8px}
.util a{display:inline-flex;align-items:center;gap:8px}
.util a:hover{color:#fff}
.util .sep{flex:1}
.util .urgent{
  display:inline-flex;align-items:center;gap:8px;font-weight:700;color:#fff;
  background:var(--urgent);padding:4px 12px;border-radius:5px;
}
.util svg{flex:none;opacity:.85}

/* ═════════ 02 · HEADER ═════════ */
.hdr{background:var(--surface);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
.hdr .wrap{display:flex;align-items:center;gap:22px;min-height:var(--hdr-h);}
.logo{display:flex;align-items:center;gap:13px;flex:none;}
.logo .mark{
  width:46px;height:46px;border-radius:11px;background:var(--brand);
  display:grid;place-items:center;flex:none;
}
.logo .name{font-family:"Source Serif 4",Georgia,serif;font-weight:700;font-size:17px;line-height:1.15;letter-spacing:-.01em;}
.logo .sub{font-size:12px;color:var(--ink-3);letter-spacing:.03em}

nav.main{margin-left:auto;margin-right:-11px}
nav.main ul{display:flex;gap:2px;list-style:none;margin:0;padding:0}
nav.main a{
  display:block;padding:10px 11px;border-radius:7px;
  font-size:15.5px;font-weight:500;color:var(--ink-2);white-space:nowrap;
}
nav.main a:hover{background:var(--brand-wash);color:var(--brand)}
nav.main a.on{color:var(--brand);font-weight:600;background:var(--brand-wash)}

.hdr-tools{display:flex;align-items:center;gap:12px;flex:none}
.iconbtn{
  width:44px;height:44px;border-radius:8px;border:1px solid var(--line);
  background:var(--surface);display:grid;place-items:center;cursor:pointer;color:var(--ink-2);
}
.iconbtn:hover{border-color:var(--brand);color:var(--brand)}
.burger{display:none}

/* ═════════ 03 · HERO ═════════ */
.hero{background:var(--surface);border-bottom:1px solid var(--line);position:relative;overflow:hidden}
.hero .wrap{
  display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,5vw,72px);
  align-items:center;padding-block:clamp(44px,6vw,80px);position:relative;z-index:1;
}
.hero h1{margin-bottom:20px}
.hero .lede{font-size:18.5px;color:var(--ink-2);max-width:52ch;margin-bottom:32px}
.hero .cta{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:32px}
.hero .trust{display:flex;gap:10px 30px;flex-wrap:wrap;padding-top:26px;border-top:1px solid var(--line)}
.hero .trust div{display:flex;align-items:center;gap:9px;font-size:14.5px;color:var(--ink-2)}
.hero .trust svg{color:var(--brand);flex:none}
.sprig{position:absolute;right:-56px;top:-46px;width:340px;opacity:.055;color:var(--brand);pointer-events:none}
@media (max-width:1023px){.sprig{display:none}}

/* ═════════ 04 · QUICK ACCESS ═════════ */
.quick{background:var(--brand);color:var(--on-brand)}
.quick .wrap{padding-block:0}
.quick ul{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(4,1fr);
}
/* `li` là ô lưới nên luôn cao bằng ô cao nhất trong hàng, còn `<a>` bên trong
   thì không — nên nền hover từng chừa lại một dải hở ở đáy những ô có tiêu đề
   một dòng. Cho `li` thành flex và `a` chiếm hết chiều cao thì hết. */
.quick li{border-left:1px solid rgba(255,255,255,.16);display:flex}
.quick li:first-child{border-left:0}
.quick a{
  flex:1;display:flex;align-items:center;gap:14px;
  padding:24px 20px;min-height:104px;transition:background-color .16s;
}
.quick a:hover{background:var(--brand-dark)}
.quick .ico{
  width:44px;height:44px;border-radius:10px;flex:none;
  background:rgba(255,255,255,.14);display:grid;place-items:center;
}
/* Hai dòng chữ phải là hai KHỐI. Trước đây chúng là hai <span> nội tuyến nên
   `margin-top` không có tác dụng và tiêu đề dính liền dòng mô tả. */
.quick .txt{display:flex;flex-direction:column;gap:4px;min-width:0}
.quick .t{display:block;font-weight:600;font-size:15.5px;line-height:1.32}
.quick .d{display:block;font-size:12.5px;line-height:1.4;color:rgba(255,255,255,.72)}

/* ═════════ 05 · ABOUT ═════════ */
.about .wrap{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(32px,5vw,64px);align-items:center}
.about p{color:var(--ink-2);margin-top:18px;max-width:56ch}
.about .creds{display:grid;gap:12px;margin:28px 0 32px;padding:0;list-style:none}
.about .creds li{display:flex;gap:12px;align-items:flex-start;font-size:16px}
.about .creds svg{color:var(--brand);flex:none;margin-top:5px}

/* ═════════ 06 · SERVICES ═════════ */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  display:flex;flex-direction:column;transition:border-color .16s,box-shadow .16s,transform .16s;
}
.card:hover{border-color:var(--brand-mid);box-shadow:var(--shadow-hover);transform:translateY(-2px)}
/* Cột dọc có chiều cao đầy đủ, để dòng “Xem chi tiết” của mọi card trong
   một hàng nằm trên cùng một đường — dù mô tả dài ngắn khác nhau. */
.svc{padding:28px 26px 26px;display:flex;flex-direction:column;height:100%}
.svc .ico{
  width:54px;height:54px;border-radius:12px;background:var(--accent-wash);
  color:var(--accent);display:grid;place-items:center;margin-bottom:20px;
}
.svc h3{margin-bottom:10px}
.svc p{color:var(--ink-2);font-size:15.5px;line-height:1.65;flex:1}
.svc .more{
  display:inline-flex;align-items:center;gap:7px;margin-top:20px;
  color:var(--brand);font-weight:600;font-size:15px;
}
.card:hover .svc .more{gap:11px}

/* ═════════ 07 · SƠ ĐỒ TỔ CHỨC KHOA PHÒNG ═════════
   Ba khối xếp dọc theo một trục sống bên trái. Trục là thứ khiến người xem
   đọc ra "sơ đồ" chứ không phải "danh sách có gạch đầu dòng".

   Khối hỗ trợ (cận lâm sàng, dược) dùng nút RỖNG, khác hai khối trên: nó
   phục vụ cả viện chứ không phải chặng thứ ba của luồng người bệnh. Vẽ nó
   giống hai khối kia là vẽ sai cấu trúc. */
.orgmap{position:relative;padding-left:52px}
.tier{position:relative;padding-bottom:38px}
.tier:last-child{padding-bottom:0}
/* đoạn trục nối nút của khối này xuống nút của khối kế tiếp */
.tier:not(:last-child)::before{
  content:"";position:absolute;left:-37px;top:26px;bottom:-4px;width:2px;
  background:linear-gradient(180deg,
    color-mix(in srgb,var(--brand) 34%,transparent),
    color-mix(in srgb,var(--brand) 16%,transparent));
}
.thead{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:18px}
.node{
  position:absolute;left:-45px;top:4px;width:18px;height:18px;border-radius:50%;
  background:var(--brand);box-shadow:0 0 0 4px var(--surface),0 0 0 6px color-mix(in srgb,var(--brand) 20%,transparent);
}
.tier.support .node{background:var(--surface);box-shadow:inset 0 0 0 2.5px var(--brand-mid),0 0 0 4px var(--surface)}
.tlabel{margin:0;font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--brand)}
.tdesc{margin:0;font-size:14.5px;color:var(--ink-2);flex:1;min-width:220px}
.tcount{
  flex:none;font-size:12.5px;font-weight:600;color:var(--ink-3);
  border:1px solid var(--line);border-radius:99px;padding:2px 11px;background:var(--surface);
}
.tbody{display:grid;gap:16px}
.tbody.c1{grid-template-columns:1fr}
.tbody.c2{grid-template-columns:repeat(2,1fr)}
.tbody.c3{grid-template-columns:repeat(3,1fr)}

.dept{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:22px 22px 20px;display:flex;flex-direction:column;gap:7px;
  transition:border-color .16s,box-shadow .16s,transform .16s;
}
.dept:hover{border-color:var(--brand-mid);box-shadow:var(--shadow-hover);transform:translateY(-2px)}
.dept .t{font-size:17px;font-weight:600;line-height:1.38}
.dept .d{font-size:14.5px;color:var(--ink-2);line-height:1.6;flex:1}
.dept .go{display:inline-flex;align-items:center;gap:6px;color:var(--brand);font-weight:600;font-size:14.5px;margin-top:4px}
.dept:hover .go{gap:10px}
/* Khoa Khám bệnh là cửa vào duy nhất — tô nền để nó không bị đọc ngang hàng
   với các khoa điều trị phía dưới. */
/* Chỉ có một khoa ở khối này, nên thẻ trải ngang. Xếp dọc thì mô tả một dòng
   nằm lọt thỏm giữa một khoảng trắng rất rộng — nằm ngang thì bề ngang đó
   được dùng để làm việc. */
.dept.entry{
  background:var(--brand-wash);border-color:color-mix(in srgb,var(--brand) 22%,transparent);
  flex-direction:row;align-items:center;gap:10px 26px;flex-wrap:wrap;
  padding:20px 24px;
}
.dept.entry .t{flex:none}
.dept.entry .d{color:var(--ink-2);flex:1;min-width:260px}
.dept.entry .go{margin-top:0;flex:none}
.orgnote{
  margin:26px 0 0;padding-top:16px;border-top:1px solid var(--line);
  font-size:13px;color:var(--ink-3);
}

/* ═════════ 08 · DOCTORS ═════════ */
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.doc .body{padding:20px 20px 22px;display:flex;flex-direction:column;flex:1}
.doc .deg{font-size:12.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--accent)}
.doc h3{font-size:18.5px;margin:5px 0 6px}
.doc .role{font-size:14.5px;color:var(--ink-2);line-height:1.55;flex:1}
.doc .dept-line{
  display:flex;align-items:center;gap:8px;margin-top:14px;padding-top:14px;
  border-top:1px solid var(--line-soft);font-size:14px;color:var(--ink-3);
}
.doc .dept-line svg{color:var(--brand-mid);flex:none}

/* ═════════ 09 · STATISTICS ═════════ */
.stats{background:var(--brand);color:var(--on-brand)}
.stats .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;padding-block:clamp(44px,5vw,64px)}
.stat{display:flex;flex-direction:column;gap:6px}
.stat .v{
  font-size:clamp(34px,3.6vw,46px);
  font-weight:700;line-height:1.05;letter-spacing:-.02em;font-variant-numeric:tabular-nums;
}
.stat .l{font-size:15px;color:rgba(255,255,255,.78)}
.stats .foot{grid-column:1/-1;font-size:13px;color:rgba(255,255,255,.6);border-top:1px solid rgba(255,255,255,.2);padding-top:18px;margin-top:8px}

/* ═════════ 10 · NEWS ═════════ */
.news-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:32px;align-items:start}
.feat{display:block}
.feat .ph{margin-bottom:20px}
.feat h3{font-size:22px;line-height:1.36;margin:10px 0}
.feat p{color:var(--ink-2);font-size:16px}
.meta{display:flex;align-items:center;gap:12px;font-size:13.5px;color:var(--ink-3)}
.tag{
  display:inline-block;padding:4px 11px;border-radius:5px;
  background:var(--brand-wash);color:var(--brand);
  font-size:12.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
}
.news-list{display:grid;gap:0}
.news-item{
  display:grid;grid-template-columns:132px 1fr;gap:18px;
  padding:20px 0;border-bottom:1px solid var(--line);align-items:start;
}
.news-list .news-item:first-child{padding-top:0}
.news-list .news-item:last-child{border-bottom:0}
.news-item h3{font-size:17.5px;line-height:1.4;margin:8px 0 0;font-family:"Be Vietnam Pro",sans-serif;font-weight:600}
.news-item:hover h3{color:var(--brand)}

/* ═════════ 11 · HEALTH KNOWLEDGE ═════════ */
.kn-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:32px}
.kn-tab{
  padding:9px 18px;border-radius:99px;border:1px solid var(--line);
  background:var(--surface);font-size:15px;font-weight:500;color:var(--ink-2);cursor:pointer;
  font-family:inherit;
}
.kn-tab:hover{border-color:var(--brand-mid);color:var(--brand)}
.kn-tab.on{background:var(--brand);border-color:var(--brand);color:var(--on-brand);font-weight:600}
.kn{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;transition:border-color .16s,box-shadow .16s}
.kn:hover{border-color:var(--brand-mid);box-shadow:var(--shadow-hover)}
.kn .body{padding:20px 20px 22px;display:flex;flex-direction:column;gap:9px;flex:1}
.kn h3{font-size:17.5px;line-height:1.42;font-family:"Be Vietnam Pro",sans-serif;font-weight:600}
.kn p{font-size:14.5px;color:var(--ink-2);line-height:1.62;flex:1}
.kn .read{font-size:13.5px;color:var(--ink-3);display:flex;align-items:center;gap:7px}

/* ═════════ 12 · QUY TRÌNH KHÁM BỆNH ═════════
   Ngang trên desktop rộng vì mục đích là NHÌN MỘT LẦN THẤY HẾT đường đi;
   dọc từ 1279 trở xuống vì sáu cột tiếng Việt dưới 200px là không đọc nổi. */
.pat{background:var(--brand-wash);border-radius:var(--r);padding:clamp(32px,4vw,52px)}

.flow{display:grid;grid-template-columns:repeat(6,1fr);gap:0;margin-top:34px}
.step{position:relative;padding:0 14px 0 0}
.step:last-child{padding-right:0}
/* đường nối chạy NGANG QUA tâm nút, nên phải bắt đầu sau nút và dừng ở nút kế */
.step:not(:last-child)::before{
  content:"";position:absolute;left:34px;right:-4px;top:15px;height:2px;
  background:color-mix(in srgb,var(--brand) 20%,transparent);
}
.snum{
  position:relative;z-index:1;width:32px;height:32px;border-radius:50%;
  background:var(--brand);color:var(--on-brand);
  display:grid;place-items:center;font-size:14.5px;font-weight:700;
  font-variant-numeric:tabular-nums;
  box-shadow:0 0 0 4px var(--brand-wash);
}
.step.opt .snum{background:var(--surface);color:var(--brand);box-shadow:inset 0 0 0 2px var(--brand-mid),0 0 0 4px var(--brand-wash)}
.step .st{display:block;margin:16px 0 6px;font-size:16px;font-weight:600;line-height:1.36;
  min-height:2.72em}   /* chốt 2 dòng: bước dài như "Thanh toán, nhận thuốc" không đẩy lệch hàng mô tả */
.step .sd{margin:0;font-size:13.5px;color:var(--ink-2);line-height:1.55}
.step .tagopt{
  display:inline-block;margin-top:9px;font-size:11.5px;font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;color:var(--brand);
  background:var(--surface);border-radius:4px;padding:2px 8px;
}
.flownote{margin:26px 0 0;padding-top:16px;border-top:1px solid color-mix(in srgb,var(--brand) 16%,transparent);
  font-size:13px;color:var(--ink-3)}

.pat-links{margin-top:30px}
.pat-links .lb{margin:0 0 14px;font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.pat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.pat-card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:18px 18px 20px;display:flex;flex-direction:column;gap:9px;
  transition:border-color .16s,box-shadow .16s,transform .16s;
}
.pat-card:hover{border-color:var(--brand);box-shadow:var(--shadow-hover);transform:translateY(-2px)}
.pat-card .ico{color:var(--brand)}
.pat-card .t{font-weight:600;font-size:15.5px;line-height:1.38}
.pat-card .d{font-size:13px;color:var(--ink-3);line-height:1.5;flex:1}

/* ═══════════════════════════════════════════════════════════
   CHỮ KÝ THẺ — thanh dấu ở cạnh trên
   Bình thường là một đoạn ngắn ở góc trên trái; rê chuột thì chạy hết
   chiều ngang. Đọc token màu nên đổi tông màu là chữ ký đổi theo.

   `overflow:hidden` là bắt buộc: thẻ bo góc 10px, mà thanh dấu chỉ cao
   3px nên tự nó không bo theo được — không cắt thì nó thò ra ngoài chỗ
   góc lượn. Thẻ .kn vốn đã cắt sẵn, ba loại còn lại nay mới thêm.
   ═══════════════════════════════════════════════════════════ */
.card,.kn,.pat-card,.dept{position:relative;overflow:hidden}
.card::before,
.kn::before,
.pat-card::before,
.dept::before{
  content:"";position:absolute;left:0;top:0;z-index:3;
  height:3px;width:42px;pointer-events:none;
  background:var(--brand);opacity:.3;
  transition:width .38s cubic-bezier(.2,.7,.25,1),opacity .22s ease;
}
.card:hover::before,
.kn:hover::before,
.pat-card:hover::before,
.dept:hover::before{width:100%;opacity:1}

/* ═════════ 13 · CONTACT ═════════ */
.contact-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(28px,4vw,56px);align-items:stretch}
.cinfo{display:grid;gap:0;align-content:start}
.crow{display:grid;grid-template-columns:44px 1fr;gap:16px;padding:20px 0;border-bottom:1px solid var(--line);align-items:start}
.cinfo .crow:first-of-type{padding-top:0}
.crow .ico{width:44px;height:44px;border-radius:10px;background:var(--brand-wash);color:var(--brand);display:grid;place-items:center}
.crow .k{font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);margin-bottom:3px}
.crow .v{font-size:16.5px;font-weight:500;line-height:1.5}
.crow .v.big{font-size:27px;font-weight:700;color:var(--brand);letter-spacing:-.01em;font-variant-numeric:tabular-nums}
/* ═════════ BẢN ĐỒ ═════════
   Nền kẻ ô giữ nguyên phía sau iframe: nếu bản đồ bị chặn (chính sách bảo
   mật của trang nhúng, tiện ích chặn quảng cáo, hoặc mất mạng) thì chỗ đó
   vẫn là một mặt phẳng có thiết kế chứ không phải một ô trắng vỡ.
   Nút "Chỉ đường" là phần tử ANH EM của iframe, không nằm trong nó, nên
   luôn bấm được kể cả khi bản đồ không tải. */
.map{
  position:relative;border-radius:var(--r);overflow:hidden;min-height:380px;
  background:
    linear-gradient(0deg,var(--brand-wash),var(--brand-wash)),
    repeating-linear-gradient(0deg,color-mix(in srgb,var(--brand) 12%,#FFFFFF) 0 1px,transparent 1px 46px),
    repeating-linear-gradient(90deg,color-mix(in srgb,var(--brand) 12%,#FFFFFF) 0 1px,transparent 1px 46px),
    var(--brand-wash-2);
  border:1px solid var(--line);
}
/* Lớp nhãn nằm DƯỚI iframe. Iframe tải được thì lớp này bị che hoàn toàn;
   iframe bị chặn theo kiểu trong suốt thì người xem vẫn đọc được đang nhìn
   vào đâu, thay vì một ô kẻ ô trống không. */
.map-fb{
  position:absolute;inset:0;z-index:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:8px;text-align:center;padding:24px;
}
.map-fb svg{color:var(--brand)}
.map-fb .n{font-weight:600;font-size:16px;color:var(--ink)}
.map-fb .a{font-size:14px;color:var(--ink-2)}
.map iframe{
  position:absolute;inset:0;width:100%;height:100%;border:0;display:block;z-index:1;
  filter:saturate(.92);
}
.map-cta{
  position:absolute;z-index:2;right:14px;bottom:14px;
  display:inline-flex;align-items:center;gap:9px;
  min-height:44px;padding:0 18px;border-radius:8px;
  background:var(--surface);color:var(--brand);
  font-size:15px;font-weight:600;
  border:1px solid var(--line);
  box-shadow:0 2px 4px rgba(19,32,26,.06),0 10px 24px -12px rgba(19,32,26,.4);
  transition:background-color .16s,border-color .16s,transform .16s;
}
.map-cta:hover{background:var(--brand-wash);border-color:var(--brand);transform:translateY(-1px)}
.map-cta svg{flex:none}

/* ═════════ 14 · FOOTER ═════════ */
footer{background:var(--brand-dark);color:rgba(255,255,255,.76);font-size:15px}
.f-top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:40px;padding-block:clamp(44px,5vw,64px)}
footer h4{
  font-family:"Be Vietnam Pro",sans-serif;font-size:13px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:#fff;margin:0 0 18px;
}
footer ul{list-style:none;margin:0;padding:0;display:grid;gap:11px}
footer a:hover{color:#fff}
.f-brand .logo .name{color:#fff}
.f-brand .logo .sub{color:rgba(255,255,255,.6)}
.f-brand .logo .mark{background:rgba(255,255,255,.14)}
.f-brand p{margin-top:20px;line-height:1.7;max-width:38ch}
.f-brand .hot{margin-top:16px;font-size:24px;font-weight:700;color:#fff;font-variant-numeric:tabular-nums}
.f-legal{
  border-top:1px solid rgba(255,255,255,.16);padding-block:22px;
  display:flex;justify-content:space-between;gap:12px 28px;flex-wrap:wrap;font-size:13.5px;color:rgba(255,255,255,.6);
}

/* ═══════════════════════════════════════════════════════════
   MOTION — có cổng `.anim` do JS bật. Không JS thì mọi thứ hiện
   nguyên vẹn: không bao giờ có nội dung mắc kẹt ở opacity:0.
   ═══════════════════════════════════════════════════════════ */

/* Hero vào theo bậc, ngay khi tải — không chờ cuộn */
.anim .rise{opacity:0;transform:translateY(16px);animation:rise .62s cubic-bezier(.2,.7,.25,1) forwards;animation-delay:var(--d,0s)}
@keyframes rise{to{opacity:1;transform:none}}

/* Khối dưới màn đầu: hiện khi cuộn tới, chỉ một lần */
.anim .reveal{opacity:0;transform:translateY(18px)}
.anim .reveal.in{
  opacity:1;transform:none;
  transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.25,1);
  transition-delay:var(--d,0s);
}

/* Header: viền đổi thành bóng khi rời đỉnh trang */
.hdr{transition:box-shadow .2s ease,border-color .2s ease}
.hdr.scrolled{border-bottom-color:transparent;box-shadow:0 2px 16px -4px color-mix(in srgb,var(--ink) 16%,transparent)}

/* Ảnh trong card nhích rất nhẹ khi rê chuột */
.ph svg{transition:transform .5s cubic-bezier(.2,.7,.25,1)}
.card:hover .ph svg,.kn:hover .ph svg,.feat:hover .ph svg{transform:scale(1.035)}

/* ═══════════════════════════════════════════════════════════
   NHỊP "TÚC TRỰC"
   Hai nhịp khác nhau vì hai lời hứa khác nhau:
     · Cấp cứu 115  → đèn báo đập theo nhịp tim = trực 24/7 thật.
     · Hotline 1900 → không phải 24/7 (T2–T7, 07:00–17:00), nên chỉ
       "thở" và đổ chuông để hút mắt, KHÔNG có đèn live.
   ═══════════════════════════════════════════════════════════ */

/* ── Đèn báo trực · nhịp tim thật (thu – trương – nghỉ) ── */
.live{position:relative;display:inline-block;width:8px;height:8px;flex:none}
.live::before,.live::after{
  content:"";position:absolute;inset:0;border-radius:50%;
  background:currentColor;
}
.live::after{opacity:0}
.anim .live::before{animation:beat 2.4s ease-in-out infinite}
.anim .live::after{animation:halo 2.4s ease-out infinite}
@keyframes beat{
  0%,46%,100%{transform:scale(1)}
  8%{transform:scale(1.5)}     /* nhịp 1 */
  18%{transform:scale(1)}
  26%{transform:scale(1.32)}   /* nhịp 2, nhẹ hơn */
  36%{transform:scale(1)}
}
@keyframes halo{
  0%{opacity:.5;transform:scale(1)}
  60%,100%{opacity:0;transform:scale(3.2)}
}

/* Quầng đỏ rất mỏng quanh thẻ cấp cứu, cùng nhịp với đèn báo */
.anim .util .urgent{animation:urgentGlow 2.4s ease-in-out infinite}
@keyframes urgentGlow{
  0%,46%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--urgent) 0%,transparent)}
  16%{box-shadow:0 0 0 4px color-mix(in srgb,var(--urgent) 34%,transparent)}
}

/* ── Hotline · thở đều + thỉnh thoảng đổ chuông ── */
.hotfloat .ring{position:relative}
.hotfloat .ring::after{
  content:"";position:absolute;inset:0;border-radius:inherit;
  background:rgba(255,255,255,.26);opacity:0;pointer-events:none;
}
.anim .hotfloat .ring::after{animation:breathe 2.4s ease-in-out infinite}
@keyframes breathe{0%,100%{opacity:0}50%{opacity:1}}

.hotfloat::after{
  content:"";position:absolute;inset:0;border-radius:inherit;
  border:2px solid var(--brand);opacity:0;pointer-events:none;
}
/* Vòng lan ra và ống nghe rung cùng lúc — đọc ra là "một cuộc gọi đang đi" */
.anim .hotfloat::after{animation:ping 6s ease-out infinite 3s}
@keyframes ping{
  0%{opacity:.55;transform:scale(1)}
  37%,100%{opacity:0;transform:scale(1.18)}
}
.hotfloat .ring svg,.callbar svg{transform-origin:50% 50%}
.anim .hotfloat .ring svg,.anim .callbar svg{animation:handset 6s ease-in-out infinite 3s}
@keyframes handset{
  0%,88%,100%{transform:rotate(0)}
  90%{transform:rotate(-12deg)}
  92%{transform:rotate(10deg)}
  94%{transform:rotate(-8deg)}
  96%{transform:rotate(6deg)}
  98%{transform:rotate(-3deg)}
}

@media (prefers-reduced-motion:reduce){
  .anim .rise{opacity:1;transform:none;animation:none}
  .anim .reveal{opacity:1;transform:none}
  .anim .hotfloat::after,
  .anim .hotfloat .ring::after,
  .anim .hotfloat .ring svg,
  .anim .callbar svg,
  .anim .util .urgent,
  .anim .live::before,
  .anim .live::after{animation:none}
  /* Tắt hoạt ảnh thì đèn báo vẫn phải nhìn thấy được, chỉ là đứng yên */
  .live::after{opacity:0}
}

/* ═════════ CHỌN TÔNG MÀU · nằm trong thanh tiện ích ═════════
   Đặt cạnh các tiện ích phụ khác (email, giờ làm việc) — đúng chỗ người dùng
   quen tìm những thứ như cỡ chữ, tương phản, ngôn ngữ. Không nổi đè lên nội
   dung, nên không tranh chỗ với nút hotline và không bị đọc ra là dev tool.
   Mỗi chấm màu đặt trên một đĩa trắng, vì màu thương hiệu nào cũng tối và sẽ
   chìm nếu đặt thẳng lên nền thanh này. */
.pal{display:inline-flex;align-items:center;gap:10px}
.pal .lb{font-size:13px;color:rgba(255,255,255,.62);white-space:nowrap}
.pal .sw{display:flex;gap:7px}
.pal button{
  width:26px;height:26px;border-radius:50%;padding:0;cursor:pointer;
  background:rgba(255,255,255,.9);border:2px solid transparent;
  display:grid;place-items:center;
  transition:background-color .16s,border-color .16s,transform .16s;
}
.pal button span{
  width:15px;height:15px;border-radius:50%;display:block;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.16);
}
.pal button:hover{background:#fff;transform:scale(1.08)}
.pal button[aria-pressed="true"]{
  background:#fff;border-color:#fff;
  box-shadow:0 0 0 2px color-mix(in srgb,#fff 30%,transparent);
}
.pal button:focus-visible{outline-offset:3px}

/* ═════════ HOTLINE FLOAT · bottom-right ═════════
   Cùng góc với callbar của mobile, nên hotline luôn ở "dưới cùng bên phải"
   trên mọi thiết bị — chỉ đổi hình dạng, không đổi chỗ. */
.hotfloat{
  position:fixed;z-index:30;
  bottom:clamp(20px,2.6vw,32px);right:clamp(16px,2.4vw,28px);
  display:inline-flex;align-items:center;gap:12px;
  padding:9px 20px 9px 10px;border-radius:14px;
  background:var(--brand);color:var(--on-brand);
  box-shadow:0 10px 26px -10px var(--glow),0 2px 6px color-mix(in srgb,var(--brand-dark) 22%,transparent);
  transition:transform .18s ease,box-shadow .18s ease,background-color .16s ease;
}
.hotfloat:hover{
  background:var(--brand-dark);transform:translateY(-2px);
  box-shadow:0 16px 34px -10px var(--glow),0 3px 8px color-mix(in srgb,var(--brand-dark) 26%,transparent);
}
.hotfloat:active{transform:translateY(0)}
.hotfloat .ring{
  width:42px;height:42px;border-radius:11px;flex:none;
  background:rgba(255,255,255,.16);display:grid;place-items:center;
}
.hotfloat .txt{display:flex;flex-direction:column;gap:1px;line-height:1.2}
.hotfloat .k{font-size:11.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:rgba(255,255,255,.78)}
.hotfloat .v{font-size:19px;font-weight:700;letter-spacing:.01em;font-variant-numeric:tabular-nums}

/* ═════════ MOBILE / TABLET NAV DRAWER ═════════
   Trước đây nút burger không mở gì cả. Drawer trượt từ phải, có scrim,
   đóng bằng Esc hoặc chạm ra ngoài, và khoá cuộn trang phía dưới. */
.mnav{position:fixed;inset:0;z-index:60;display:none}
.mnav.open{display:block}
.mnav-scrim{
  position:absolute;inset:0;border:0;padding:0;cursor:pointer;
  background:var(--scrim);backdrop-filter:blur(2px);
  animation:fade .2s ease;
}
.mnav-panel{
  position:absolute;top:0;right:0;bottom:0;width:min(348px,88vw);
  background:var(--surface);display:flex;flex-direction:column;
  box-shadow:-8px 0 40px var(--glow);animation:slide .24s cubic-bezier(.22,.7,.25,1);
}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes slide{from{transform:translateX(100%)}to{transform:translateX(0)}}
.mnav-head{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:16px 18px;border-bottom:1px solid var(--line);flex:none;
}
.mnav-head .name{font-family:"Source Serif 4",Georgia,serif;font-weight:700;font-size:15px;line-height:1.2}
.mnav-head .sub{font-size:12px;color:var(--ink-3)}
.mnav-list{list-style:none;margin:0;padding:8px 0;overflow-y:auto;flex:1}
.mnav-list a{
  display:flex;align-items:center;justify-content:space-between;
  min-height:54px;padding:0 20px;font-size:17px;font-weight:500;color:var(--ink);
  border-bottom:1px solid var(--line-soft);
}
.mnav-list a:hover,.mnav-list a:focus-visible{background:var(--brand-wash);color:var(--brand)}
.mnav-list a.on{color:var(--brand);font-weight:600;box-shadow:inset 3px 0 0 var(--brand)}
.mnav-list svg{color:var(--ink-3);flex:none}
.mnav-foot{padding:18px;border-top:1px solid var(--line);display:grid;gap:12px;flex:none}
.mnav-foot .btn{width:100%}
.mnav-foot .urg{
  display:flex;align-items:center;justify-content:center;gap:9px;min-height:46px;
  border-radius:8px;background:var(--urgent-wash);color:var(--urgent);font-weight:700;font-size:15px;
}
.mnav-foot .hrs{font-size:13.5px;color:var(--ink-3);text-align:center}
body.locked{overflow:hidden}

/* ═════════ Sticky call bar — mobile ═════════ */
.callbar{display:none}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE — bốn lớp
     ≥1280   Desktop rộng · nav đầy đủ trên một hàng
     1024–1279 Desktop hẹp · drawer (xem ghi chú dưới)
     768–1023  Tablet / iPad
     ≤767      Mobile
   ═══════════════════════════════════════════════════════════ */

@media (min-width:1280px){
  .hdr-tools{display:none}      /* chỉ chứa burger, mà burger ẩn ở lớp này */
}

/* ── ≤1279 · nav chuyển sang drawer ─────────────────────────
   Tám mục tiếng Việt cần khoảng 850px chỉ riêng cho nav. Cộng
   logo và nút hotline thì dưới 1280 không còn đủ chỗ, mà cách
   duy nhất để nhét vừa là thu chữ xuống dưới ngưỡng đọc được
   của người cao tuổi — đúng thứ brief cấm. Nên dưới 1280 nav
   vào drawer, và hotline vẫn nằm ở top bar + Quick Access. */
@media (max-width:1279px){
  nav.main{display:none}
  .burger{display:grid}
  :root{--hdr-h:76px}
  .hdr .wrap{gap:16px}
  .hdr-tools{margin-left:auto}
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .pat-grid{grid-template-columns:repeat(2,1fr)}
  /* Sáu cột dọc dưới 1280 là hết chỗ — timeline chuyển sang trục dọc. */
  .flow{grid-template-columns:1fr;gap:0}
  .step{padding:0 0 26px 46px}
  .step:last-child{padding-bottom:0}
  .step:not(:last-child)::before{left:15px;right:auto;top:34px;bottom:-4px;width:2px;height:auto}
  .snum{position:absolute;left:0;top:0}
  .step .st{margin-top:3px}
  .quick a{padding:22px 18px;min-height:96px}
}

/* ── ≤1023 · Tablet / iPad ─────────────────────────────────── */
@media (max-width:1023px){
  :root{--rhythm:clamp(52px,6vw,72px)}
  .hero .wrap{grid-template-columns:1fr;gap:32px}
  .hero .art{order:-1}
  .hero .art .ph{aspect-ratio:16/9}          /* 4:3 dựng đứng quá cao khi xếp chồng */
  .hero .lede{font-size:17.5px;max-width:60ch}
  .about .wrap{grid-template-columns:1fr;gap:30px}
  .about .ph{aspect-ratio:16/9}
  .quick ul{grid-template-columns:repeat(2,1fr)}
  .quick li{border-left:0;border-top:1px solid rgba(255,255,255,.16)}
  .quick li:nth-child(2n){border-left:1px solid rgba(255,255,255,.16)}
  .quick li:nth-child(-n+2){border-top:0}
  .grid-3{grid-template-columns:repeat(2,1fr)}
  .tbody.c3{grid-template-columns:repeat(2,1fr)}
  .stats .wrap{grid-template-columns:repeat(2,1fr);gap:28px 32px}
  .news-grid{grid-template-columns:1fr;gap:36px}
  .contact-grid{grid-template-columns:1fr}
  .map{min-height:300px;order:-1}            /* bản đồ lên trước, thông tin dưới */
  .f-top{grid-template-columns:repeat(2,1fr);gap:36px}
  .f-brand{grid-column:1/-1}
  .util .hide-md{display:none}
}

/* ══════════════════════════════════════════════════════════════
   VÙNG CHẠM — theo THIẾT BỊ, không theo bề rộng
   Chuột có con trỏ 1px, ngón tay thì không. Ở đây mọi thứ bấm được
   phải cao tối thiểu 44px, và không có chữ nào dưới 12px — người dùng
   chính của trang này là người cao tuổi.

   Điều kiện có thêm `pointer:coarse` chứ không chỉ `max-width:1023px`:
   iPad Pro dọc rộng đúng 1024px, iPad mini xoay ngang cũng 1024px —
   nếu chỉ chặn theo bề rộng thì hai máy đó là màn hình cảm ứng mà lại
   nhận vùng chạm cỡ chuột.

   Riêng "Xem tất cả …" nới vùng chạm bằng một lớp giả trong suốt chứ
   không tăng padding: link này có gạch chân khi rê chuột, tăng padding
   thì gạch chân rơi xuống cách chữ 9px và trông như bị lỗi.
   ══════════════════════════════════════════════════════════════ */
@media (max-width:1023px),(pointer:coarse){
  .util .urgent{min-height:44px}
  .util a{min-height:44px}

  .pal button{width:36px;height:36px}
  .pal button span{width:19px;height:19px}

  .seclink::after{
    content:"";position:absolute;left:0;right:0;top:50%;
    transform:translateY(-50%);height:44px;
  }
  .kn-tab{min-height:44px}

  /* Footer: link cao 18px, cách nhau 11px — ngón tay bấm nhầm hàng bên
     cạnh. Nới chiều cao chứ không nới vùng chạm, vì nới vùng chạm ở đây
     sẽ khiến các vùng chồng lên nhau, càng dễ bấm nhầm hơn. */
  footer ul{gap:0}
  footer ul a{display:flex;align-items:center;min-height:44px}

  .hotfloat .k{font-size:12px}
  .step .tagopt{font-size:12px}
}

/* ── ≤767 · Mobile ─────────────────────────────────────────── */
@media (max-width:767px){
  body{font-size:16.5px;padding-bottom:80px}
  :root{--rhythm:52px}

  .util .wrap{min-height:40px;justify-content:center}
  .util .sep{display:none}
  .util .hide-sm{display:none}
  .util .urgent{width:100%;justify-content:center;min-height:48px}
  .pal{width:100%;justify-content:center}

  :root{--hdr-h:68px}
  .logo .mark{width:40px;height:40px;border-radius:9px}
  .logo .mark svg{width:23px;height:23px}
  .logo .name{font-size:14.5px;letter-spacing:0}
  .logo .sub{font-size:12px}

  h1{font-size:clamp(27px,7.4vw,34px)}
  h2{font-size:clamp(22px,5.6vw,27px)}
  .hero .wrap{padding-block:32px}
  .hero .lede{font-size:16.5px;margin-bottom:26px}
  .hero .cta{flex-direction:column;gap:11px}
  .hero .cta .btn{width:100%}
  .hero .trust{flex-direction:column;gap:9px}

  .quick ul{grid-template-columns:1fr}
  .quick li{border-left:0!important;border-top:1px solid rgba(255,255,255,.16)}
  .quick li:first-child{border-top:0}
  .quick a{min-height:76px;padding:16px 18px}

  .sechead{margin-bottom:26px}
  .grid-3{grid-template-columns:1fr}
  .pat-grid{grid-template-columns:1fr}
  .grid-4{grid-template-columns:repeat(2,1fr);gap:14px}
  .doc .body{padding:14px 14px 16px}
  .doc h3{font-size:16.5px}
  .doc .role{font-size:13.5px}
  .doc .dept-line{font-size:12.5px;margin-top:11px;padding-top:11px}
  .kn h3{font-size:16.5px}

  .orgmap{padding-left:34px}
  .tier:not(:last-child)::before{left:-25px}
  .node{left:-33px;width:15px;height:15px}
  .tbody.c2,.tbody.c3{grid-template-columns:1fr}
  .tier{padding-bottom:30px}
  .dept.entry{flex-direction:column;align-items:flex-start;gap:7px}
  .dept.entry .d{min-width:0}
  .step .st{min-height:0}

  .stats .wrap{grid-template-columns:repeat(2,1fr);gap:24px}
  .stat .v{font-size:30px}
  .stat .l{font-size:13.5px}

  .feat h3{font-size:19.5px}
  .news-item{grid-template-columns:88px 1fr;gap:13px;padding:16px 0}
  .news-item h3{font-size:16px}

  /* Tab chuyên mục: cuộn ngang, không xuống dòng thành ba tầng */
  .kn-tabs{
    flex-wrap:nowrap;overflow-x:auto;margin-inline:calc(var(--gutter)*-1);
    padding-inline:var(--gutter);scrollbar-width:none;
  }
  .kn-tabs::-webkit-scrollbar{display:none}
  .kn-tab{flex:none}

  .pat{padding:26px 20px}
  .pat-card{padding:18px 16px}
  .crow{grid-template-columns:38px 1fr;gap:13px;padding:16px 0}
  .crow .ico{width:38px;height:38px}
  .crow .v.big{font-size:24px}
  .map{min-height:220px}

  .f-top{grid-template-columns:1fr;gap:30px}
  .f-brand{grid-column:auto}
  .f-legal{flex-direction:column;gap:8px}

  .hotfloat{display:none}
  .callbar{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:40;
    background:var(--brand);color:var(--on-brand);
    align-items:center;justify-content:center;gap:11px;
    min-height:64px;font-weight:700;font-size:18px;
    padding-bottom:env(safe-area-inset-bottom);
    box-shadow:0 -4px 20px rgba(19,32,26,.18);
  }
}

/* ── ≤479 · điện thoại nhỏ ─────────────────────────────────── */
@media (max-width:479px){
  .grid-4{grid-template-columns:1fr}
  .stats .wrap{grid-template-columns:1fr;gap:20px}
}

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

/* ═════════ 02B · BANNER NHẬN DIỆN — "Cuốn thư" ═════════
   Dải nhận diện đặt giữa header và hero. Cố ý KHÔNG có tiêu đề lớn
   hay nút CTA: hero ngay bên dưới đã đảm nhiệm việc đó, hai khối cùng
   "hô" một lúc thì người xem lướt qua cả hai.

   Mọi class mang tiền tố bn- vì trang đã có .card và .sprig riêng.
   Ảnh dùng tối đa ~270px CSS — ảnh nguồn chỉ rộng 550–680px, trải
   rộng hơn sẽ nhoè, nhất là trên màn retina. */
.bn{position:relative;overflow:hidden;
  background:linear-gradient(115deg,var(--brand-wash) 0%,var(--brand-wash-2) 52%,var(--surface) 100%);
  border-bottom:1px solid var(--line)}
.bn::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to bottom,transparent 82%,rgba(0,0,0,.035))}
.bn-sprig{position:absolute;left:-70px;bottom:-90px;width:330px;opacity:.06;
  color:var(--brand);pointer-events:none;z-index:0}
.bn .wrap{position:relative;z-index:1;display:grid;
  grid-template-columns:minmax(300px,.85fr) 1.15fr;gap:clamp(28px,4vw,64px);
  align-items:center;padding-block:clamp(30px,3.6vw,46px)}

.bn-id{display:flex;align-items:center;gap:20px}
.bn-em{width:118px;flex:none;filter:drop-shadow(0 6px 16px rgba(19,32,26,.18));
  animation:bnFloat 7s ease-in-out infinite}
.bn-parent{font-size:11.5px;font-weight:700;letter-spacing:.16em;color:var(--brand-mid);margin:0 0 7px}
.bn-nm{font-family:"Source Serif 4",Georgia,serif;font-weight:700;
  font-size:clamp(17px,1.5vw,21px);line-height:1.3;color:var(--brand-dark);letter-spacing:-.005em}
.bn-rule{display:flex;align-items:center;gap:9px;margin-top:13px}
.bn-rule i{height:2px;width:46px;background:var(--brand);border-radius:2px;display:block}
.bn-rule span{font-size:12.5px;color:var(--ink-3);font-weight:500}

.bn-fan{position:relative;height:226px}
/* margin:0 là bắt buộc — <figure> mặc định có margin 1em 40px, nếu để nguyên
   thì mọi thẻ bị đẩy lệch 40px và ở bố cục lưới thẻ co lại chỉ còn ~100px. */
.bn-card{position:absolute;top:50%;margin:0;width:268px;border-radius:12px;background:#fff;padding:7px;
  box-shadow:0 3px 8px rgba(19,32,26,.08),0 18px 36px -20px rgba(19,32,26,.4);
  /* Không đặt will-change:transform cố định — ba thẻ ảnh lớn sẽ bị tách thành
     ba lớp hợp thành thường trực, tốn bộ nhớ mà chẳng được gì; Chrome tự
     thăng lớp khi transition chạy. */
  transition:transform .45s cubic-bezier(.2,.7,.3,1),box-shadow .45s}
.bn-fig{position:relative;display:block;border-radius:7px;overflow:hidden}
.bn-card img{display:block;width:100%;height:168px;object-fit:cover}
/* figcaption phải là con trực tiếp của figure nên nó định vị theo .bn-card,
   không theo .bn-fig — vì vậy trừ đi đúng 7px padding của thẻ. */
.bn-card figcaption{position:absolute;inset:auto 7px 7px;border-radius:0 0 7px 7px;
  padding:24px 11px 9px;text-align:right;
  font-size:12.5px;font-weight:600;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.66))}
/* Thẻ trước nằm trên thẻ sau, nên phần luôn lộ ra của mỗi thẻ là nửa PHẢI
   — đó là lý do nhãn canh phải. */
.bn-c1{left:0;    z-index:3;transform:translateY(-50%) rotate(-4.5deg)}
.bn-c2{left:192px;z-index:2;transform:translateY(-52%) rotate(1.5deg)}
.bn-c3{left:384px;z-index:1;transform:translateY(-48%) rotate(5.5deg)}
.bn-card:hover{z-index:9;box-shadow:0 6px 14px rgba(19,32,26,.12),0 26px 52px -22px rgba(19,32,26,.5)}
.bn-c1:hover{transform:translateY(-54%) rotate(-2deg) scale(1.045)}
.bn-c2:hover{transform:translateY(-56%) rotate(0deg) scale(1.045)}
.bn-c3:hover{transform:translateY(-52%) rotate(3deg) scale(1.045)}

@keyframes bnFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes bnFan{from{opacity:0;transform:translate(-56px,-50%) rotate(-14deg) scale(.92)}}
@keyframes bnIn{from{opacity:0;transform:translateY(14px)}}
.bn-card{animation:bnFan .78s cubic-bezier(.2,.8,.25,1) backwards}
.bn-c1{animation-delay:.05s}.bn-c2{animation-delay:.17s}.bn-c3{animation-delay:.29s}
.bn-id{animation:bnIn .7s cubic-bezier(.2,.7,.3,1) backwards}

/* Ngưỡng 1300px được tính chứ không ước lượng: dải xoè rộng 384+268=652px,
   cột phải nhận 1.15/2 phần của (bề rộng .wrap trừ gap), .wrap = 1280−2×40
   và gap = 4vw. Giải ra vw ≥ 1265px mới đủ chỗ; lấy 1300 cho dư một chút.
   Hẹp hơn thì thẻ thứ ba bị .bn{overflow:hidden} cắt mất — đúng lỗi đã thấy
   ở 1180px. Hết chồng lớp thì nhãn canh trái như chú thích ảnh bình thường. */
@media (max-width:1299px){
  .bn .wrap{grid-template-columns:1fr;gap:26px;padding-block:clamp(24px,3vw,34px)}
  .bn-fan{height:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
  /* left/top phải trả về 0: .bn-c2/.bn-c3 đặt left:192px/384px cho kiểu xoè,
     mà position:relative vẫn đọc left nên thẻ bị đẩy lệch nếu để nguyên. */
  .bn-card{position:relative;left:0;top:0;width:auto;transform:none!important;animation-name:bnIn}
  .bn-card img{height:124px}
  .bn-card figcaption{padding:22px 10px 8px;text-align:left}
}
/* Điện thoại: giữ đủ cả 3 ảnh bằng dải cuộn ngang thay vì ẩn bớt hoặc xếp
   chồng — xếp chồng sẽ đẩy hero xuống quá sâu. */
@media (max-width:639px){
  .bn-fan{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
    gap:12px;padding-bottom:4px;margin-inline:-2px;padding-inline:2px}
  .bn-card{flex:0 0 194px;scroll-snap-align:start}
  .bn-card img{height:116px}
  .bn-em{width:86px}
  .bn-id{gap:14px}
}
@media (prefers-reduced-motion:reduce){
  .bn-em,.bn-card,.bn-id{animation:none}
  .bn-card:hover{transform:translateY(-50%) rotate(0)}
}


/* ═════════ 02C · TÊN BỆNH VIỆN ĐẦY ĐỦ ═════════
   Tên đầy đủ dài hơn bản rút gọn cũ, riêng header phải chỉnh lại kích thước
   chữ và khoảng cách, nếu không khối thương hiệu đẩy thanh điều hướng tràn. */
.logo .name{font-size:15px;line-height:1.24}
/* Tên đầy đủ làm dòng eyebrow tràn sang dòng hai với mỗi chữ "TRỊ" lạc lõng.
   balance chia hai dòng cho đều, nbsp giữ "Bắc Quảng Trị" không bị tách. */
.hero .eyebrow,.mnav-head .name,.f-brand .logo .name,.map-fb .n{text-wrap:balance}
.hdr .wrap{gap:16px}
nav.main a{padding-inline:9px}
@media (max-width:1023px){ .logo .name{font-size:13.5px} }