/* ==========================================================================
   An Nhiên Hospital — phong cách theo sighospital.vn
   Navy + vàng đồng, tiêu đề viết hoa, slider ảnh tràn màn hình.
   Mobile-first. Breakpoints: 640 / 900 / 1200.
   ========================================================================== */

/* 1. Tokens
   -------------------------------------------------------------------------- */
:root {
	--navy: #0D5E6B;
	--navy-900: #093E47;
	--navy-800: #0B4D58;
	--navy-600: #1A8A9A;
	--navy-grad: linear-gradient(135deg, #072D34 0%, #0D5E6B 45%, #1A8A9A 100%);

	--gold: #B8706A;          /* trang trí: số liệu, viền, icon */
	--gold-light: #D4A59F;    /* chỉ dùng cho viền/icon; làm CHỮ thì xem --gold-on-navy */
	--gold-on-navy: #EEBFB9;  /* chữ vàng trên nền navy: đạt tương phản 4.5:1 (#D4A59F chỉ được 3.4:1) */
	--gold-band: #C4877F;     /* nền dải gói khám */
	--gold-strong: #9B4F48;   /* nền nút & ô lối tắt: chữ trắng đạt tương phản 4.8:1 */
	--gold-strong-hover: #864440;
	--gold-ink: #7A3B35;      /* chữ accent trên nền sáng */

	--cream: #EDF2F0;
	--cream-50: #F7F5F0;
	--white: #FFFFFF;

	--text: #2D2D2D;
	--text-soft: #5A6068;
	--text-mute: #767676;   /* 4.54:1 tren nen trang; #8B8B8B cu chi dat 3.4:1 */
	--line: #E0DDD6;
	--line-navy: rgba(13, 94, 107, .12);
	--on-navy: #FFFFFF;
	--on-navy-soft: rgba(255, 255, 255, .82);
	--on-navy-line: rgba(255, 255, 255, .2);
	--signal: #D0262F;

	--f-head: "Playfair Display", "Georgia", serif;
	--f-body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;

	--fs-title: clamp(1.85rem, 1.3rem + 2vw, 2.85rem);
	--gutter: clamp(1rem, .5rem + 2.5vw, 2rem);
	--band: clamp(3.75rem, 2.5rem + 5vw, 6.5rem);
	--radius: 12px;
	--header-h: 84px;
	--ease: cubic-bezier(.22, .7, .2, 1);
	--shadow: 0 10px 30px -12px rgba(0, 0, 0, .15);
}

/* 2. Nền tảng
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 12px); }

body {
	margin: 0;
	font-family: var(--f-body);
	font-size: 15px;
	line-height: 1.65;
	color: var(--text);
	background: var(--white);
	-webkit-font-smoothing: antialiased;
	padding-bottom: 64px;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
h1, h2, h3, h4 { margin: 0; font-family: var(--f-head); font-weight: 500; line-height: 1.2; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.skip-link {
	position: fixed;
	top: 8px; left: 8px;
	z-index: 1000;
	padding: .7rem 1rem;
	background: var(--navy);
	color: #fff;
	border-radius: var(--radius);
	transform: translateY(-200%);
}
.skip-link:focus { transform: none; }
.site-main:focus { outline: none; }

.container { width: 100%; max-width: 1180px; margin-inline: auto; padding-inline: var(--gutter); }

/* 3. Dải nền (band) & tiêu đề section
   -------------------------------------------------------------------------- */
.band { position: relative; padding-block: var(--band); overflow: clip; }
.band > .container { position: relative; z-index: 1; }
.band--white { background: var(--white); }
.band--cream { background: var(--cream); }
/* Nền chất liệu (ảnh do AI tạo): lụa navy và giấy vàng, phủ lớp màu mờ để chữ luôn dễ đọc.
   Màu nền phía sau giữ nguyên gradient cũ để trang không bị trống khi ảnh chưa tải xong. */
.band--navy {
	background:
		linear-gradient(115deg, rgba(9, 62, 71, .7) 0%, rgba(13, 94, 107, .4) 45%, rgba(26, 138, 154, .45) 100%),
		url("../images/tex-navy.webp") center / cover no-repeat,
		var(--navy-grad);
	color: var(--on-navy);
}
.band--gold {
	background: linear-gradient(180deg, #F7F5F0 0%, #EAEFEF 100%);
}

/* Hoạ tiết hoa sen nét mảnh (thay chữ "S" của SIG). Nét vẽ không co giãn theo kích thước (non-scaling-stroke). */
.watermark { position: absolute; pointer-events: none; height: auto; }
.band__mark { width: min(640px, 62vw); right: -5%; bottom: -3%; color: #fff; opacity: .13; }
.band__mark--center { left: 50%; right: auto; bottom: -2%; width: min(1000px, 95vw); transform: translateX(-50%); }
.band__mark--left { left: -6%; right: auto; bottom: -3%; width: min(560px, 55vw); }
/* Trên nền sáng (trắng/kem): trắng sẽ vô hình, vàng lại nổi bật quá — dùng navy thật nhạt cho thống nhất 1 màu watermark. */
.band__mark--on-light { color: var(--navy); opacity: .055; }
.sec-head { text-align: center; max-width: 860px; margin: 0 auto clamp(2rem, 1.5rem + 2vw, 3.25rem); }
.sec-title {
	font-size: var(--fs-title);
	font-weight: 500;
	line-height: 1.18;
	letter-spacing: .015em;
	text-transform: none;
	color: var(--navy);
}
.sec-title--left { text-align: left; }
.sec-lede { margin-top: .9rem; color: var(--text-soft); font-size: 15px; }
.sec-head--light .sec-title { color: var(--on-navy); }
.sec-head--light .sec-lede { color: var(--on-navy-soft); max-width: 640px; margin-inline: auto; }

.sec-more { margin-top: clamp(1.75rem, 1rem + 2vw, 2.75rem); text-align: center; }

/* 4. Thành phần dùng chung
   -------------------------------------------------------------------------- */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	min-height: 46px;
	padding: .65rem 1.25rem;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	border-radius: var(--radius);
	border: 0;
	transition: background-color .25s var(--ease), color .25s, box-shadow .25s;
	white-space: nowrap;
}
.btn .icon { width: 19px; height: 19px; flex-shrink: 0; }
/* Nhãn nút dài (vd. "Đặt lịch khám trước để tiết kiệm thời gian") được xuống dòng thay vì tràn khỏi màn hình. */
@media (max-width: 640px) {
	.btn { white-space: normal; text-align: center; max-width: 100%; }
}
.btn--gold { background: var(--gold-strong); color: #fff; }
.btn--gold:hover { background: var(--gold-strong-hover); }
.btn--navy { background: var(--navy); color: #fff; }
.btn--navy:hover { background: var(--navy-900); }
.btn--outline {
	background: transparent;
	color: var(--navy);
	box-shadow: inset 0 0 0 1.5px var(--navy);
}
.btn--outline:hover {
	background: var(--navy);
	color: #fff;
	box-shadow: inset 0 0 0 1.5px var(--navy);
}
.btn--outline-light { background: transparent; color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .55); }
.btn--outline-light:hover { background: #fff; color: var(--navy); box-shadow: inset 0 0 0 1.5px #fff; }
.btn--block { width: 100%; }

.link-more {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	font-size: 15px;
	font-weight: 500;
	color: var(--navy);
	transition: gap .25s var(--ease), color .2s;
}
.link-more .icon { width: 18px; height: 18px; }
.link-more:hover { gap: .8rem; color: var(--gold-ink); }

.square-btn {
	display: inline-grid;
	place-items: center;
	width: 34px; height: 34px;
	border-radius: var(--radius);
	background: var(--gold-strong);
	color: #fff;
	transition: background-color .2s;
}
.square-btn:hover { background: var(--gold-strong-hover); }
.square-btn .icon { width: 18px; height: 18px; }

.icon { width: 20px; height: 20px; flex-shrink: 0; }

.icon-btn { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: var(--radius); transition: background-color .2s, color .2s; }
.icon-btn:hover { background: rgba(13, 94, 107, .08); }

.dot { width: 10px; height: 10px; border-radius: 50%; border: 1px solid var(--gold); transition: background-color .2s; }
.dot.is-active { background: var(--gold); }

/* 5. Header
   -------------------------------------------------------------------------- */
.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: #fff;
	color: var(--navy);
	box-shadow: 0 1px 0 rgba(13, 94, 107, .08);
	transition: background-color .35s var(--ease), box-shadow .35s, color .35s;
}
.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .site-header { top: 46px; } }
/*
 * ≤600px WordPress cho thanh admin (#wpadminbar) cuộn trôi theo trang (position: absolute).
 * Nếu header vẫn chừa 46px thì khi lướt xuống sẽ hở một dải phía trên header.
 * Header sticky: bám top 0 — lúc ở đầu trang nó vẫn nằm dưới thanh admin nhờ margin-top của html.
 * Header trong suốt (fixed) ở trang chủ: nằm dưới thanh admin khi ở đầu trang, rồi lên sát mép
 * khi đã cuộn (is-scrolled bật khi cuộn quá ~126px, lúc đó thanh admin đã trôi khỏi màn hình).
 */
@media (max-width: 600px) {
	.admin-bar .site-header { top: 0; }
	.admin-bar .site-header--overlay { top: 46px; }
	.admin-bar .site-header--overlay.is-scrolled { top: 0; }
}

.site-header--overlay { position: fixed; left: 0; right: 0; background: transparent; color: #fff; box-shadow: none; }
.site-header--overlay::before {
	content: "";
	position: absolute;
	inset: 0 0 -40px;
	background: linear-gradient(rgba(9, 62, 71, .45), transparent);
	pointer-events: none;
	transition: opacity .35s;
}
.site-header--overlay.is-scrolled,
.site-header--overlay.is-open { background: #fff; color: var(--navy); box-shadow: 0 6px 24px -12px rgba(13, 94, 107, .2); }
.site-header--overlay.is-scrolled::before,
.site-header--overlay.is-open::before { opacity: 0; }

.site-header__inner {
	position: relative;
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: center;
	min-height: var(--header-h);
	gap: 1rem;
}
.site-header__right { display: flex; align-items: center; justify-content: flex-end; gap: .35rem; }
.site-header__lang { display: none; font-size: 12px; font-weight: 500; opacity: .85; }
.site-header__cta { display: none; }
.site-nav { display: none; }

@media (min-width: 640px) {
	.site-header__cta { display: inline-flex; margin-left: .5rem; }
}

/* Header rộng hơn phần nội dung (như SIG) để đủ chỗ cho 6 mục menu + logo giữa + nút đặt lịch. */
.site-header__inner.container { max-width: 1520px; }

/* Menu đầy đủ từ 1280px; hẹp hơn thì dùng nút menu. Hai cột bên bằng nhau (minmax 0) để logo luôn đúng tâm. */
@media (min-width: 1280px) {
	.site-header__inner { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: clamp(1rem, 1.6vw, 2rem); }
	.site-nav { display: block; }
	.site-header__burger { display: none; }
}
@media (min-width: 1440px) {
	.site-header__lang { display: inline; margin-left: .5rem; }
}

/* Logo */
.brand { display: inline-flex; align-items: center; gap: .7rem; color: inherit; white-space: nowrap; }
.brand__mark { flex-shrink: 0; width: 46px; height: 46px; }
.brand__petals { fill: var(--navy); transition: fill .35s; }
.brand__center { fill: var(--gold); }
.brand__water { stroke: var(--navy); transition: stroke .35s; }
.brand__divider { align-self: stretch; width: 1px; margin-block: .3rem; background: var(--gold); opacity: .75; }
.brand__text { display: grid; gap: .3rem; line-height: 1; }
.brand__name { font-family: var(--f-head); font-size: 1.6rem; font-weight: 500; letter-spacing: .1em; text-transform: none; color: var(--navy); transition: color .35s; }
.brand__eyebrow { font-size: 9.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-ink); transition: color .35s; }

/* Điện thoại rất hẹp (320–359px): logo cỡ chuẩn rộng hơn phần còn lại của header và đẩy cả trang tràn ngang. */
@media (max-width: 359px) {
	.site-header .brand { gap: .5rem; }
	.site-header .brand__mark { width: 38px; height: 38px; }
	.site-header .brand__name { font-size: 1.3rem; letter-spacing: .06em; }
	.site-header .brand__eyebrow { font-size: 8px; letter-spacing: .1em; }
	.site-header__right { gap: 0; }
}

/* Biến thể sáng: trên nền navy (footer) và trên ảnh slider (header trong suốt) */
.site-header--overlay:not(.is-scrolled):not(.is-open) .brand__petals,
.brand--light .brand__petals { fill: #fff; }
.site-header--overlay:not(.is-scrolled):not(.is-open) .brand__water,
.brand--light .brand__water { stroke: #fff; }
.site-header--overlay:not(.is-scrolled):not(.is-open) .brand__name,
.brand--light .brand__name { color: #fff; }
.site-header--overlay:not(.is-scrolled):not(.is-open) .brand__eyebrow,
.brand--light .brand__eyebrow { color: var(--gold-on-navy); }

@media (max-width: 479px) {
	.brand { gap: .5rem; }
	.brand__mark { width: 38px; height: 38px; }
	.brand__name { font-size: 1.3rem; letter-spacing: .08em; }
	.brand__eyebrow { font-size: 8.5px; letter-spacing: .1em; }
}
.custom-logo-link img { max-height: 56px; width: auto; }

/* Menu desktop */
.site-nav--left .nav { justify-content: flex-start; }
.nav--desktop { display: flex; align-items: center; gap: clamp(.9rem, 2vw - .7rem, 1.9rem); }
.nav--desktop .nav__item { position: relative; display: flex; align-items: center; gap: .15rem; }
.nav--desktop .nav__link { padding: .75rem 0; font-size: 14.5px; font-weight: 500; white-space: nowrap; transition: color .2s; }
.nav--desktop .nav__item:hover > .nav__link,
.nav--desktop .is-current > .nav__link { color: var(--gold); }
.site-header:not(.site-header--overlay) .nav--desktop .nav__item:hover > .nav__link,
.site-header.is-scrolled .nav--desktop .nav__item:hover > .nav__link { color: var(--gold-ink); }
.nav--desktop .nav__toggle { display: grid; place-items: center; width: 16px; height: 28px; opacity: .7; }
.nav--desktop .nav__toggle .icon { width: 13px; height: 13px; transition: transform .25s var(--ease); }

.nav--desktop .nav__sub {
	position: absolute;
	top: 100%;
	left: -1rem;
	min-width: 240px;
	padding: .5rem 0;
	background: #fff;
	border-top: 2px solid var(--gold);
	border-radius: 0 0 var(--radius) var(--radius);
	box-shadow: var(--shadow);
	color: var(--text);
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;
}
.has-sub--wide > .nav__sub { display: grid; grid-template-columns: repeat(2, minmax(200px, 1fr)); min-width: 440px; }
.site-nav--right .nav__sub { left: auto; right: -1rem; }
.nav--desktop .nav__sub a { display: block; padding: .5rem 1.1rem; font-size: 14px; transition: background-color .2s, color .2s; }
.nav--desktop .nav__sub a:hover { background: var(--cream); color: var(--navy); }
.nav--desktop .nav__sub-item--all { grid-column: 1 / -1; border-top: 1px solid var(--line); margin-top: .3rem; }
.nav--desktop .nav__sub-item--all a { color: var(--gold-ink); font-weight: 600; }

.nav--desktop .has-sub:hover > .nav__sub,
.nav--desktop .has-sub:focus-within > .nav__sub,
.nav--desktop .has-sub.is-open > .nav__sub { opacity: 1; visibility: visible; transform: none; }
.nav--desktop .has-sub:hover .nav__toggle .icon,
.nav--desktop .has-sub.is-open .nav__toggle .icon { transform: rotate(180deg); }

/* Ô tìm kiếm */
.search-panel { position: absolute; inset: 100% 0 auto; background: #fff; color: var(--text); box-shadow: var(--shadow); border-top: 1px solid var(--line); }
.search-panel .container { padding-block: 1.5rem; }
.search-panel__form { display: flex; align-items: center; gap: .75rem; }
.search-panel__form input {
	flex: 1;
	min-width: 0;
	height: 50px;
	padding: 0 1rem;
	font-size: 17px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--cream-50);
}
.search-panel__form input:focus { outline: none; border-color: var(--navy); background: #fff; }
.search-panel__form .btn { height: 50px; }
.search-panel__form .btn span { display: none; }
@media (min-width: 640px) { .search-panel__form .btn span { display: inline; } }
.search-panel__hints { display: flex; flex-wrap: wrap; gap: .35rem 1rem; margin-top: .9rem; font-size: 13.5px; color: var(--text-mute); }
.search-panel__hints a { color: var(--navy); text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 3px; }

/* Ngăn kéo menu mobile */
.drawer { position: fixed; inset: 0; z-index: 300; color: var(--text); }
.drawer__backdrop { position: absolute; inset: 0; background: rgba(9, 62, 71, .55); animation: fade .25s var(--ease); }
.drawer__panel { position: absolute; inset: 0 0 0 auto; width: min(400px, 100%); display: flex; flex-direction: column; background: #fff; overflow-y: auto; animation: slide-in .35s var(--ease); }
@keyframes fade { from { opacity: 0; } }
@keyframes slide-in { from { transform: translateX(100%); } }
.drawer__head { display: flex; align-items: center; justify-content: space-between; padding: .9rem var(--gutter); border-bottom: 1px solid var(--line); }
.drawer__nav { flex: 1; padding: .25rem var(--gutter); }
.drawer__foot { display: grid; gap: .8rem; padding: 1.25rem var(--gutter) 1.75rem; background: var(--cream); }
.drawer__line { display: flex; align-items: center; gap: .6rem; font-size: 14px; color: var(--navy); }
.drawer__line .icon { width: 18px; height: 18px; color: var(--gold-ink); }
.drawer__line--emergency, .drawer__line--emergency .icon { color: var(--signal); }

.nav--mobile .nav__item { display: grid; grid-template-columns: 1fr auto; align-items: center; border-bottom: 1px solid var(--line); }
.nav--mobile .nav__link { padding: .95rem 0; font-family: var(--f-head); font-size: 1.3rem; font-weight: 500; color: var(--navy); }
.nav--mobile .nav__toggle { display: grid; place-items: center; width: 44px; height: 44px; color: var(--navy); }
.nav--mobile .nav__toggle .icon { transition: transform .25s var(--ease); }
.nav--mobile .nav__sub { display: none; grid-column: 1 / -1; padding: 0 0 .9rem .75rem; border-left: 2px solid var(--gold); margin-bottom: .9rem; }
.nav--mobile .is-open > .nav__sub { display: grid; }
.nav--mobile .is-open .nav__toggle .icon { transform: rotate(180deg); }
.nav--mobile .nav__sub a { display: block; padding: .4rem 0; font-size: 14.5px; color: var(--text-soft); }
.nav--mobile .nav__sub-item--all a { color: var(--gold-ink); font-weight: 600; }

html.is-locked { overflow: hidden; }

/* 6. Hero slider & lối tắt
   -------------------------------------------------------------------------- */
/* Phần 1: banner cao đúng 100vh. Phần 2: 4 ô lối tắt nằm ngay bên dưới banner (giống SIG). */
.hero { --slides-h: 100svh; --hero-safe: 64px; position: relative; background: var(--navy-900); color: #fff; }

.hero__slides { position: relative; height: var(--slides-h); overflow: hidden; }
.hero__slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity 1s var(--ease), visibility 1s; }
.hero__slide.is-active { opacity: 1; visibility: visible; }
.hero__slide::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(9, 62, 71, .3) 0%, rgba(9, 62, 71, .12) 35%, rgba(9, 62, 71, .7) 100%);
}
.hero__img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.92) brightness(.9); }
.hero__slide.is-active .hero__img { animation: hero-zoom 8s linear both; }
@keyframes hero-zoom { from { transform: scale(1.08); } to { transform: scale(1); } }

.hero__content {
	position: absolute;
	z-index: 1;
	left: 50%;
	bottom: calc(6.5rem + var(--hero-safe));
	width: min(92%, 900px);
	transform: translateX(-50%);
	text-align: center;
}
.hero__title {
	display: grid;
	font-family: var(--f-head);
	font-size: clamp(2rem, 1.1rem + 3.6vw, 3.9rem);
	font-weight: 500;
	line-height: 1.12;
	letter-spacing: .02em;
	text-transform: none;
	text-shadow: 0 2px 24px rgba(9, 62, 71, .35);
}
.hero__slide.is-active .hero__title span { animation: rise .9s var(--ease) both; }
.hero__slide.is-active .hero__title span + span { animation-delay: .12s; }
.hero__sub { margin-top: .75rem; font-size: clamp(14px, 13px + .3vw, 17px); color: rgba(255, 255, 255, .92); }
.hero__slide.is-active .hero__sub { animation: rise .9s .25s var(--ease) both; }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } }

.hero__controls {
	position: absolute;
	z-index: 2;
	left: 50%;
	top: calc(var(--slides-h) - 4rem - var(--hero-safe)); /* neo theo đáy banner, không theo đáy section (vì ô lối tắt nằm dưới) */
	transform: translateX(-50%);
	display: flex;
	align-items: center;
	gap: .9rem;
}
.hero__arrow {
	display: grid;
	place-items: center;
	width: 38px; height: 38px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .16);
	border: 1px solid rgba(255, 255, 255, .45);
	color: #fff;
	backdrop-filter: blur(4px);
	transition: background-color .2s;
}
.hero__arrow:hover { background: rgba(255, 255, 255, .3); }
.hero__arrow .icon { width: 18px; height: 18px; }
.hero__dots { display: flex; gap: .4rem; }
/* Cao 24px de dat nguong vung cham WCAG 2.5.8; vach mau ben trong van mong nhu cu. */
.hero__dot { display: grid; align-items: center; width: 38px; height: 24px; }
.hero__dot span { position: relative; display: block; height: 2px; background: rgba(255, 255, 255, .4); overflow: hidden; }
.hero__dot span::after { content: ""; position: absolute; inset: 0; background: #fff; transform: scaleX(0); transform-origin: left; }
.hero__dot.is-active span::after { transform: scaleX(1); transition: transform var(--slide-duration, 6s) linear; }
.hero.is-paused .hero__dot.is-active span::after { transition: none; }

/* minmax(0, 1fr) chứ không phải 1fr: mặc định ô lưới không co nhỏ hơn nội dung bên trong,
   nên tiêu đề dài đẩy cả dải rộng quá màn hình điện thoại. */
.quickbar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; background: #fff; }
.quickbar__item a {
	display: flex;
	align-items: center;
	gap: .8rem;
	height: 100%;
	padding: .8rem .75rem;
	background: linear-gradient(180deg, var(--gold-band), var(--gold-strong));
	color: #fff;
	transition: background .3s var(--ease);
}
.quickbar__item a:hover { background: linear-gradient(180deg, var(--gold-strong), var(--gold-strong-hover)); }
.quickbar__icon { display: grid; place-items: center; flex-shrink: 0; width: 36px; height: 36px; background: #fff; color: var(--gold-strong); border-radius: var(--radius); }
.quickbar__icon .icon { width: 20px; height: 20px; }
.quickbar__text { display: grid; line-height: 1.25; }
.quickbar__title { font-family: var(--f-head); font-size: 1.05rem; font-weight: 500; }
.quickbar__desc { display: none; font-size: 13px; opacity: .92; }

@media (min-width: 900px) {
	.quickbar { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; background: transparent; }
	.quickbar__item a { padding: 1.35rem clamp(1rem, 2.4vw, 2rem); }
	.quickbar__item + .quickbar__item a { box-shadow: inset 2px 0 0 rgba(255, 255, 255, .85); }
	.quickbar__icon { width: 48px; height: 48px; }
	.quickbar__title { font-size: 1.4rem; white-space: nowrap; }
	.quickbar__desc { display: block; }
	.hero { --hero-safe: 0px; }
	.quickbar__item a { gap: 1rem; }
	.hero__content { bottom: 8rem; }
	.hero__controls { top: calc(var(--slides-h) - 5rem); }
}

/* 7. Giới thiệu & số liệu (navy)
   -------------------------------------------------------------------------- */
.about__grid { display: grid; gap: 3rem; align-items: center; }
.about__title { font-size: clamp(1.7rem, 1.2rem + 1.7vw, 2.55rem); text-transform: none; letter-spacing: .015em; line-height: 1.22; }
.about__text { margin: 1.4rem 0 1.75rem; max-width: 520px; color: var(--on-navy-soft); font-size: 15.5px; }

/* Theo SIG: số và nhãn nằm liền nhau trên một dòng, căn trái. */
.stats__item { padding-block: 1.4rem; border-top: 1px solid var(--on-navy-line); }
.stats__item:last-child { border-bottom: 1px solid var(--on-navy-line); }
.stats__head { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 1rem; }
.stats__value { justify-self: end; } /* số căn phải để luôn nằm sát nhãn, kể cả số ngắn như "16+" */
.stats__value {
	font-family: var(--f-head);
	font-size: clamp(2.8rem, 2rem + 2.2vw, 3.9rem);
	font-weight: 500;
	line-height: 1;
	white-space: nowrap;
	color: #fff;
	background: linear-gradient(180deg, #FFFFFF 0%, #EDF2F0 60%, #C4D3CE 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	font-variant-numeric: lining-nums tabular-nums;
}
.stats__label { font-family: var(--f-head); font-size: clamp(1.05rem, .95rem + .3vw, 1.2rem); font-weight: 500; text-transform: none; letter-spacing: .02em; }
.stats__note { margin-top: .5rem; color: var(--on-navy-soft); font-size: 14.5px; }

@media (min-width: 900px) {
	.about__grid { grid-template-columns: 1fr 1.05fr; gap: clamp(3rem, 6vw, 6rem); }
	.stats__head { flex-wrap: nowrap; }
	.stats__label { white-space: nowrap; }
}

/* 8. Hệ chuyên khoa (vòng cung)
   -------------------------------------------------------------------------- */
.orbit { position: relative; display: grid; gap: 1.25rem; }
.orbit__arc { display: none; }
.orbit__center { order: -1; justify-self: center; width: 300px; aspect-ratio: 1; margin: 0 0 1.5rem; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 8px var(--navy), 0 0 0 9px var(--gold); }
.orbit__center img { width: 100%; height: 100%; object-fit: cover; }
.orbit__col { display: grid; gap: 1rem; }

.pill {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 1rem;
	height: 56px;
	padding: 0 6px 0 1.35rem;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--navy-900), var(--navy-600));
	color: #fff;
	box-shadow: 0 8px 20px -12px rgba(17, 32, 89, .6);
	transition: background .35s var(--ease), transform .35s var(--ease);
}
.pill__name { flex: 1; font-family: var(--f-head); font-size: 1.15rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pill__icon {
	display: grid;
	place-items: center;
	flex-shrink: 0;
	width: 44px; height: 44px;
	border-radius: 50%;
	background: #fff;
	color: var(--navy);
	box-shadow: 0 0 0 3px var(--navy-600);
	transition: color .35s, box-shadow .35s;
}
.pill__icon .icon { width: 24px; height: 24px; }
.pill:hover { background: linear-gradient(90deg, var(--gold-strong), var(--gold)); }
.pill:hover .pill__icon { color: var(--gold-strong); box-shadow: 0 0 0 3px var(--gold); }

@media (min-width: 640px) and (max-width: 899px) {
	.orbit { grid-template-columns: 1fr 1fr; column-gap: 1.25rem; }
	.orbit__center { grid-column: 1 / -1; }
}

.ecosystem.band { padding-block: calc(var(--band) * 1.2); }

@media (min-width: 900px) {
	/*
	 * Bố cục theo SIG: ảnh tròn lớn ở giữa, nút chuyên khoa dài trải gần hết chiều ngang,
	 * icon mỗi nút nằm đúng trên vòng cung. Mọi kích thước tỉ lệ theo --c (đường kính ảnh):
	 *   nút cao .17c · khoảng cách .06c · icon .13c · vòng cung đường kính 1.3c.
	 * Độ dịch ngang --k của từng nút được tính sẵn trong specialties.php từ phương trình đường tròn.
	 * --c co giãn theo cả chiều rộng lẫn chiều cao màn hình để section vẫn vừa một màn hình.
	 */
	.orbit {
		--c: clamp(370px, min(36vw, (100svh - 385px) / 1.15), 580px);
		width: min(1280px, 100vw - 2 * var(--gutter));
		margin-left: 50%;
		transform: translateX(-50%);
		grid-template-columns: 1fr var(--c) 1fr;
		align-items: center;
		column-gap: 0;
		min-height: calc(var(--c) * 1.24);
	}
	.orbit__arc {
		display: block;
		position: absolute;
		left: 50%; top: 50%;
		width: calc(var(--c) * 1.3);
		height: auto;
		transform: translate(-50%, -50%);
		color: var(--navy);
		opacity: .55;
		pointer-events: none;
	}
	.orbit__center {
		order: 0;
		grid-column: 2;
		grid-row: 1;
		position: relative;
		z-index: 1;
		width: 100%;
		margin: 0;
		box-shadow: 0 0 0 calc(var(--c) * .022) var(--navy), 0 30px 60px -20px rgba(17, 32, 89, .5);
	}
	.orbit__col { position: relative; z-index: 2; grid-row: 1; gap: calc(var(--c) * .06); }
	.orbit__col--left { grid-column: 1; }
	.orbit__col--right { grid-column: 3; }

	.orbit__col--left .orbit__item { transform: translateX(calc(var(--c) * var(--k))); }
	.orbit__col--right .orbit__item { transform: translateX(calc(var(--c) * var(--k) * -1)); }

	.pill {
		height: calc(var(--c) * .17);
		gap: calc(var(--c) * .04);
		padding: 0 calc(var(--c) * .02) 0 calc(var(--c) * .09);
		box-shadow: 0 12px 26px -16px rgba(17, 32, 89, .7);
	}
	.pill__name { font-size: calc(var(--c) * .066); letter-spacing: .01em; }
	.pill__icon {
		width: calc(var(--c) * .13);
		height: calc(var(--c) * .13);
		box-shadow: 0 0 0 calc(var(--c) * .009) var(--navy-600);
	}
	.pill__icon .icon { width: 52%; height: 52%; }

	.orbit__col--left .pill__name { text-align: right; }
	.orbit__col--right .pill {
		flex-direction: row-reverse;
		padding: 0 calc(var(--c) * .09) 0 calc(var(--c) * .02);
		background: linear-gradient(270deg, var(--navy-900), var(--navy-600));
	}
	.orbit__col--right .pill:hover { background: linear-gradient(270deg, var(--gold-strong), var(--gold)); }
	.pill:hover { transform: scale(1.02); }
}
/* Laptop nhỏ: với --c tối thiểu 370px, hai cột bên hẹp hơn nút dài nhất ("Phục hồi chức năng"),
   lưới tự nở sang phải và nút bị cắt ở mép màn hình. Thu nhỏ ảnh giữa (kéo theo cỡ chữ nút)
   để cột bên đủ chỗ, và khóa cột bằng minmax(0, 1fr) để lưới không bao giờ nở quá khung. */
@media (min-width: 900px) and (max-width: 1279px) {
	.orbit {
		--c: clamp(290px, min(30vw, (100svh - 385px) / 1.15), 580px);
		grid-template-columns: minmax(0, 1fr) var(--c) minmax(0, 1fr);
	}
}

/* 9. Gói khám (nền vàng)
   -------------------------------------------------------------------------- */
.packages .sec-title { color: var(--navy-900); }

.pkg-grid { display: grid; gap: 1.25rem; }
.pkg {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: rgba(255, 249, 240, .6);
	border: 1px solid rgba(255, 255, 255, .7);
	border-radius: var(--radius);
	color: var(--text);
	backdrop-filter: blur(4px);
	box-shadow: 0 10px 25px -10px rgba(0, 0, 0, .08);
	transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), background 0.4s var(--ease), border-color 0.4s var(--ease);
}
.pkg::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: linear-gradient(90deg, transparent, var(--navy), transparent);
	opacity: 0;
	transform: scaleX(0.4);
	transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
	z-index: 2;
}
.pkg:hover {
	transform: translateY(-8px);
	background: rgba(255, 255, 255, .92);
	border-color: rgba(13, 94, 107, .25);
	box-shadow: 0 24px 50px -15px rgba(13, 94, 107, .22);
	z-index: 2;
}
.pkg:hover::before {
	opacity: 1;
	transform: scaleX(1);
}

.pkg__mark { width: 420px; right: -150px; bottom: -20px; color: #fff; opacity: .1; transition: transform 0.6s var(--ease), opacity 0.4s; }
.pkg:hover .pkg__mark { transform: scale(1.08) rotate(5deg); opacity: .15; }

.pkg__head { position: relative; padding: 2rem 1.5rem 1.4rem; text-align: center; }
.pkg__icon { display: inline-grid; place-items: center; color: var(--navy); margin-bottom: .9rem; transition: transform 0.4s var(--ease), color 0.3s; }
.pkg__icon .icon { width: 56px; height: 56px; stroke-width: 1.3; }
.pkg:hover .pkg__icon { transform: scale(1.1) translateY(-3px); color: var(--navy-900); }

.pkg__name { font-size: clamp(1.4rem, 1.2rem + .6vw, 1.75rem); color: var(--navy-900); line-height: 1.2; transition: color 0.3s; }
.pkg__for { margin-top: .35rem; color: #4F4436; font-size: 14.5px; }

.pkg__price { position: relative; padding: .8rem 1rem; text-align: center; color: #fff; background: linear-gradient(90deg, var(--navy-900), var(--navy-600)); transition: filter 0.3s var(--ease), transform 0.3s var(--ease); }
.pkg:hover .pkg__price { filter: brightness(1.08); }
.pkg__price small { font-size: 14px; margin-right: .3rem; }
.pkg__price strong { font-family: var(--f-head); font-size: 1.65rem; font-weight: 500; letter-spacing: .01em; }

.pkg__items { position: relative; flex: 1; padding: .5rem 1.5rem; align-content: start; }
.pkg__items li { display: flex; gap: .6rem; padding: .7rem 0; border-bottom: 1px solid rgba(13, 94, 107, .14); font-size: 14.5px; transition: transform 0.25s var(--ease); }
.pkg__items li:last-child { border-bottom: 0; }
.pkg__items .icon { width: 18px; height: 18px; margin-top: .15rem; color: var(--navy); transition: transform 0.3s var(--ease), color 0.3s; }
.pkg:hover .pkg__items .icon { transform: scale(1.15); }
.pkg:hover .pkg__items li:hover { transform: translateX(4px); }

.pkg__more { position: relative; justify-content: center; padding: .9rem 0 1.6rem; transition: color 0.3s; }
.pkg__more .icon { transition: transform 0.3s var(--ease); }
.pkg:hover .pkg__more .icon { transform: translateX(5px); }

.pkg--featured {
	background: var(--navy-grad);
	border-color: transparent;
	color: #fff;
	box-shadow: 0 30px 60px -25px rgba(9, 62, 71, .6);
	z-index: 1;
}
.pkg--featured::before {
	background: linear-gradient(90deg, transparent, var(--gold-light), transparent);
}
.pkg--featured:hover {
	transform: translateY(-8px);
	background: var(--navy-grad);
	border-color: rgba(255, 255, 255, .2);
	box-shadow: 0 38px 75px -20px rgba(9, 62, 71, .75), 0 0 0 1px rgba(255, 255, 255, .15);
	z-index: 3;
}
.pkg--featured .pkg__icon, .pkg--featured .pkg__name { color: #fff; }
.pkg--featured:hover .pkg__icon { color: var(--gold-light); }
.pkg--featured .pkg__for { color: var(--on-navy-soft); }
.pkg--featured .pkg__price { background: rgba(0, 0, 0, 0.25); }
.pkg--featured:hover .pkg__price { background: rgba(0, 0, 0, 0.35); }
.pkg--featured .pkg__items li { border-color: rgba(255, 255, 255, .15); }
.pkg--featured .pkg__items .icon { color: var(--gold-light); }
.pkg--featured .link-more { color: #fff; }
.pkg--featured:hover .link-more, .pkg--featured .link-more:hover { color: var(--gold-light); }

@media (min-width: 900px) {
	/* Hai thẻ bên cao bằng nhau (stretch); thẻ giữa nhô ra cả trên lẫn dưới. */
	.pkg-grid { grid-template-columns: repeat(3, 1fr); align-items: stretch; gap: .9rem; padding-block: 1.5rem; }
	.pkg--featured { margin-block: -1.5rem; }
	.pkg__name { min-height: 2.4em; display: grid; place-items: center; }
}

/* 10. Carousel xếp chồng (bác sĩ & tin tức)
   -------------------------------------------------------------------------- */
.stack { position: relative; }
.stack__track { position: relative; touch-action: pan-y; user-select: none; }
.stack__item { transition: transform 1.2s cubic-bezier(.25, .8, .25, 1), opacity 1.2s cubic-bezier(.25, .8, .25, 1), filter 1.5s cubic-bezier(.25, .8, .25, 1); }

/* Bác sĩ: các thẻ chồng lên nhau, thẻ giữa lớn nhất */
.doctors .stack__track { height: 420px; perspective: 1200px; transform-style: preserve-3d; }
.doctors .stack__item {
	position: absolute;
	top: 0;
	left: 50%;
	width: 270px;
	height: 390px;
	margin-left: -135px;
	opacity: 0;
	pointer-events: none;
	z-index: 0;
	transform: translate3d(0, 0, -300px) scale(.6) rotateY(0deg);
	transition: transform 1.2s cubic-bezier(.25, .8, .25, 1), opacity 1.2s cubic-bezier(.25, .8, .25, 1);
	will-change: transform, opacity;
}
.doctors .stack__item[data-pos="0"] { opacity: 1; pointer-events: auto; z-index: 5; transform: translate3d(0, 0, 0) scale(1) rotateY(0deg); }
.doctors .stack__item[data-pos="-1"] { opacity: .7; pointer-events: auto; z-index: 3; transform: translate3d(-65%, 0, -80px) scale(.85) rotateY(18deg); }
.doctors .stack__item[data-pos="1"] { opacity: .7; pointer-events: auto; z-index: 3; transform: translate3d(65%, 0, -80px) scale(.85) rotateY(-18deg); }

.doc-card__link {
	position: relative;
	display: block;
	height: 100%;
	overflow: hidden;
	border-radius: 22px;
	background: linear-gradient(160deg, #EDF2F0 0%, #FFFFFF 55%, #E5EDEA 100%);
	box-shadow: 0 24px 50px -24px rgba(0, 0, 0, .2);
	transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.stack__item[data-pos="0"] .doc-card__link:hover {
	transform: translateY(-8px);
	box-shadow: 0 35px 65px -20px rgba(0, 0, 0, .25);
}
.doc-card__mark { width: 130%; left: -15%; bottom: 0; color: var(--navy); opacity: .06; }
/* Ảnh bác sĩ là ảnh tách nền: dùng contain + căn đáy để nhân vật đứng trọn trong thẻ, không bị cắt.
   Làm mờ dần mép dưới (nơi ảnh bị cắt ngang ở ngực) để hoà vào nền thẻ, tránh lộ đường cắt thẳng. */
.doc-card__img {
	position: relative;
	width: 100%;
	height: 95%;
	object-fit: contain;
	object-position: bottom center;
	transition: transform .6s var(--ease);
	-webkit-mask-image: linear-gradient(to bottom, #000 85%, transparent 100%);
	mask-image: linear-gradient(to bottom, #000 85%, transparent 100%);
}
.stack__item[data-pos="0"] .doc-card__link:hover .doc-card__img { transform: scale(1.05); }
.doc-card__link::after { content: ""; position: absolute; inset: 0; background: rgba(9, 62, 71, .45); transition: opacity 1.2s cubic-bezier(.25, .8, .25, 1); }
.stack__item[data-pos="0"] .doc-card__link::after { opacity: 0; }
.doc-card__info {
	position: absolute;
	z-index: 1;
	left: .8rem; right: .8rem; bottom: .8rem;
	display: grid;
	gap: .1rem;
	padding: .75rem 1rem;
	border-radius: 12px;
	background: rgba(255, 255, 255, .8);
	backdrop-filter: blur(8px);
	opacity: 0;
	transform: translateY(10px);
	transition: opacity .6s .4s cubic-bezier(.25, .8, .25, 1), transform .6s .4s cubic-bezier(.25, .8, .25, 1);
}
.stack__item[data-pos="0"] .doc-card__info { opacity: 1; transform: none; }
.doc-card__name { font-family: var(--f-head); font-size: 1.25rem; font-weight: 500; color: var(--navy); line-height: 1.2; }
.doc-card__role { font-size: 13.5px; color: var(--text-soft); }
.doc-card__meta { font-size: 12.5px; color: var(--gold-ink); font-weight: 500; }

.stack__nav { position: absolute; top: 45%; z-index: 6; transform: translateY(-50%); }
.stack__nav--prev { left: 0; }
.stack__nav--next { right: 0; }

@media (min-width: 900px) {
	.doctors { --card-h: clamp(420px, calc(100svh - 300px), 560px); }
	.doctors .stack__track { height: calc(var(--card-h) + 32px); perspective: 1500px; transform-style: preserve-3d; }
	.doctors .stack__item { height: var(--card-h); width: calc(var(--card-h) * .78); margin-left: calc(var(--card-h) * -.39); top: 16px; }
	.doctors .stack__item[data-pos="0"] { opacity: 1; pointer-events: auto; z-index: 5; transform: translate3d(0, 0, 0) scale(1) rotateY(0deg); }
	.doctors .stack__item[data-pos="-1"] { opacity: .75; pointer-events: auto; z-index: 3; transform: translate3d(-62%, 0, -150px) scale(.9) rotateY(22deg); }
	.doctors .stack__item[data-pos="1"] { opacity: .75; pointer-events: auto; z-index: 3; transform: translate3d(62%, 0, -150px) scale(.9) rotateY(-22deg); }
	.doctors .stack__item[data-pos="-2"] { opacity: .35; pointer-events: auto; z-index: 1; transform: translate3d(-110%, 0, -350px) scale(.75) rotateY(32deg); }
	.doctors .stack__item[data-pos="2"] { opacity: .35; pointer-events: auto; z-index: 1; transform: translate3d(110%, 0, -350px) scale(.75) rotateY(-32deg); }
	.doc-card__name { font-size: 1.4rem; }
}

/* Tab phân đoạn hiện đại (Modern Segmented Tabs) */
.tabs-wrap {
	display: flex;
	justify-content: center;
	margin: 0 auto 1.5rem;
}
.tabs {
	display: inline-flex;
	align-items: center;
	padding: 4px;
	background: #E8EFEF;
	border-radius: 30px;
	gap: 4px;
	max-width: 100%;
	overflow-x: auto;
	scrollbar-width: none;
	box-shadow: inset 0 1px 3px rgba(0, 0, 0, .05);
}
.tabs::-webkit-scrollbar { display: none; }
.tabs__tab {
	display: inline-flex;
	align-items: center;
	padding: .5rem 1.25rem;
	font-size: 14px;
	font-weight: 500;
	color: var(--text-soft);
	background: transparent;
	border: 0;
	border-radius: 24px;
	cursor: pointer;
	white-space: nowrap;
	transition: background-color .25s var(--ease), color .25s var(--ease), box-shadow .25s var(--ease);
}
.tabs__tab:hover {
	color: var(--navy);
}
.tabs__tab[aria-selected="true"], .tabs__tab[aria-current="page"] {
	background: #fff;
	color: var(--navy);
	font-weight: 600;
	box-shadow: 0 4px 12px -2px rgba(13, 94, 107, .18);
}

/* Hiệu ứng chuyển đổi nội dung Tab */
.news__panel[hidden] { display: none; }
.news__panel:not([hidden]) {
	animation: newsPanelFade .55s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes newsPanelFade {
	from { opacity: 0; transform: translateY(14px); }
	to { opacity: 1; transform: translateY(0); }
}

/* Bố cục Tin tức & Kiến thức y tế dạng Tạp chí (Magazine Layout) */
.news-grid {
	display: grid;
	gap: 1.25rem;
}

/* Bài viết tiêu điểm (Lead Article - Cột trái) */
.news-hero {
	display: flex;
	background: #fff;
	border-radius: var(--radius);
	overflow: hidden;
	box-shadow: 0 8px 25px -8px rgba(13, 94, 107, .1);
	border: 1px solid rgba(13, 94, 107, .08);
	transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s;
}
.news-hero:hover {
	transform: translateY(-4px);
	box-shadow: 0 20px 45px -12px rgba(13, 94, 107, .2);
	border-color: rgba(13, 94, 107, .2);
}
.news-hero__link {
	display: flex;
	flex-direction: column;
	width: 100%;
	color: inherit;
}
.news-hero__media {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: #E0E5E3;
}
.news-hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .7s var(--ease);
}
.news-hero:hover .news-hero__media img {
	transform: scale(1.05);
}
.news-hero__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 1.25rem 1.4rem;
}
.news-hero__title {
	font-family: var(--f-head);
	font-size: clamp(1.25rem, 1.1rem + .4vw, 1.55rem);
	font-weight: 600;
	line-height: 1.35;
	color: var(--navy);
	margin-top: .5rem;
	transition: color .25s;
}
.news-hero:hover .news-hero__title {
	color: var(--gold-ink);
}
.news-hero__excerpt {
	margin-top: .5rem;
	font-size: 14px;
	color: var(--text-soft);
	line-height: 1.6;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.news-hero__cta {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	margin-top: auto;
	padding-top: 1rem;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--navy);
	transition: color .25s;
}
.news-hero__cta .icon {
	width: 15px;
	height: 15px;
	transition: transform .25s var(--ease);
}
.news-hero:hover .news-hero__cta {
	color: var(--gold-ink);
}
.news-hero:hover .news-hero__cta .icon {
	transform: translateX(5px);
}

/* Danh sách bài viết bên phải (Sub List) */
.news-list {
	display: flex;
	flex-direction: column;
	gap: .85rem;
}
.news-item {
	display: flex;
	background: #fff;
	border-radius: var(--radius);
	overflow: hidden;
	box-shadow: 0 4px 15px -4px rgba(13, 94, 107, .06);
	border: 1px solid rgba(13, 94, 107, .08);
	transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s;
}
.news-item:hover {
	transform: translateY(-2px) translateX(2px);
	box-shadow: 0 12px 28px -8px rgba(13, 94, 107, .15);
	border-color: rgba(13, 94, 107, .2);
}
.news-item__link {
	display: flex;
	align-items: center;
	padding: .85rem 1.15rem;
	gap: 1rem;
	width: 100%;
	color: inherit;
}
.news-item__media {
	position: relative;
	width: 105px;
	height: 80px;
	flex-shrink: 0;
	border-radius: 8px;
	overflow: hidden;
	background: #E0E5E3;
}
.news-item__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .6s var(--ease);
}
.news-item:hover .news-item__media img {
	transform: scale(1.08);
}
.news-item__body {
	flex: 1;
	min-width: 0;
}
.news-item__title {
	font-family: var(--f-head);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.35;
	color: var(--navy);
	margin-top: .25rem;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	transition: color .25s;
}
.news-item:hover .news-item__title {
	color: var(--gold-ink);
}
.news-item__excerpt {
	margin-top: .25rem;
	font-size: 12.5px;
	color: var(--text-soft);
	line-height: 1.45;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.news-item__arrow {
	display: inline-grid;
	place-items: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--cream);
	color: var(--navy);
	flex-shrink: 0;
	margin-left: .25rem;
	transition: background-color .25s, color .25s, transform .25s var(--ease);
}
.news-item__arrow .icon {
	width: 13px;
	height: 13px;
}
.news-item:hover .news-item__arrow {
	background: var(--navy);
	color: #fff;
	transform: translateX(3px);
}

/* Huy hiệu & Thông tin bài viết (Badges & Meta) */
.news-badge {
	display: inline-flex;
	align-items: center;
	padding: 4px 11px;
	border-radius: 20px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	background: rgba(13, 94, 107, .92);
	color: #fff;
	backdrop-filter: blur(8px);
}
.news-hero__media .news-badge {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 2;
}
.news-badge--sm {
	padding: 2px 8px;
	font-size: 10px;
	background: rgba(13, 94, 107, .1);
	color: var(--navy);
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
}
.news-meta {
	display: flex;
	align-items: center;
	gap: .45rem;
	font-size: 12px;
	color: var(--text-mute);
}
.news-meta__item {
	display: inline-flex;
	align-items: center;
	gap: .3rem;
}
.news-meta__item .icon {
	width: 13px;
	height: 13px;
	color: var(--gold);
}
.news-meta__sep {
	color: var(--line);
}

/* SECTION TIN TỨC FIT CHUẨN TRONG 100VH TRÊN DESKTOP (>= 992px) */
@media (min-width: 992px) {
	.news.band {
		min-height: 100vh;
		min-height: 100dvh;
		padding-block: clamp(1rem, 2.2vh, 2rem);
		display: flex;
		flex-direction: column;
		justify-content: center;
		box-sizing: border-box;
	}
	.news.band > .container {
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
	.news .sec-head {
		margin-bottom: clamp(0.4rem, 1.2vh, 0.85rem);
	}
	.news .sec-title {
		font-size: clamp(1.4rem, 1.15rem + 0.8vw, 1.85rem);
		line-height: 1.25;
		margin-bottom: 0.2rem;
	}
	.news .sec-lede {
		font-size: clamp(12.5px, 12px + 0.15vw, 13.5px);
		line-height: 1.4;
		max-width: 680px;
		margin-inline: auto;
	}
	.news .tabs-wrap {
		margin: 0 auto clamp(0.45rem, 1.3vh, 0.85rem);
	}
	.news .tabs {
		padding: 3px;
		gap: 3px;
	}
	.news .tabs__tab {
		padding: clamp(4px, 0.6vh, 6px) clamp(12px, 1.2vw, 18px);
		font-size: clamp(12.5px, 12px + 0.15vw, 13.5px);
	}
	.news-grid {
		grid-template-columns: 1.15fr 1fr;
		align-items: stretch;
		gap: clamp(1rem, 1.5vw, 1.75rem);
		height: clamp(340px, 48vh, 440px);
	}
	.news-hero {
		height: 100%;
		display: flex;
		flex-direction: column;
	}
	.news-hero__link {
		height: 100%;
		display: flex;
		flex-direction: column;
	}
	/* Ảnh lấp phần chiều cao còn lại của thẻ (thẻ cao bằng cột bài phụ bên phải),
	   để không còn khoảng trống giữa đoạn trích và nút "Đọc chi tiết". */
	.news-hero__media {
		flex: 1 1 auto;
		height: auto;
		min-height: 150px;
		aspect-ratio: auto;
	}
	.news-hero__body {
		flex: 0 0 auto;
		padding: clamp(0.75rem, 1.2vh, 1.1rem) clamp(1rem, 1.4vw, 1.35rem);
		display: flex;
		flex-direction: column;
	}
	.news-hero__title {
		font-size: clamp(1.05rem, 0.95rem + 0.3vw, 1.25rem);
		line-height: 1.3;
		margin-top: 0.25rem;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}
	.news-hero__excerpt {
		font-size: 13px;
		line-height: 1.45;
		margin-top: 0.25rem;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}
	.news-hero__cta {
		padding-top: 0.35rem;
		font-size: 13px;
	}
	.news-list {
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		gap: clamp(0.4rem, 0.8vh, 0.65rem);
	}
	.news-item {
		flex: 1;
		min-height: 0;
		display: flex;
	}
	.news-item__link {
		padding: clamp(0.45rem, 0.8vh, 0.65rem) clamp(0.75rem, 1vw, 1.1rem);
		gap: clamp(0.6rem, 1vw, 0.9rem);
		height: 100%;
		align-items: center;
	}
	.news-item__media {
		width: clamp(75px, 6vw, 95px);
		height: 100%;
		max-height: 82px;
		min-height: 60px;
		border-radius: 7px;
		flex-shrink: 0;
	}
	.news-item__body {
		flex: 1;
		min-width: 0;
	}
	.news-item__title {
		font-size: clamp(0.85rem, 0.8rem + 0.15vw, 0.95rem);
		line-height: 1.3;
		margin-top: 0.2rem;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}
	.news-item__excerpt {
		font-size: 12px;
		line-height: 1.4;
		margin-top: 0.2rem;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}
	.news-item__arrow {
		width: 28px;
		height: 28px;
	}
	.news-item__arrow .icon {
		width: 13px;
		height: 13px;
	}
	.news .sec-more {
		margin-top: clamp(0.55rem, 1.4vh, 0.95rem);
		margin-bottom: 0;
		text-align: center;
	}
	.news .sec-more .btn {
		padding: clamp(5px, 0.8vh, 8px) clamp(16px, 1.5vw, 22px);
		font-size: clamp(12.5px, 12px + 0.15vw, 13.5px);
	}
}

@media (max-width: 640px) {
	.news-hero__body {
		padding: 1.25rem;
	}
	.news-item__link {
		padding: .85rem;
		gap: .85rem;
	}
	.news-item__media {
		width: 90px;
		height: 75px;
	}
	.news-item__excerpt {
		display: none;
	}
	.news-item__arrow {
		display: none;
	}
}

/* 11. Bảo lãnh viện phí (navy, thẻ viền vàng)
   -------------------------------------------------------------------------- */
.frame-grid { display: grid; gap: 1rem; }
.frame-card {
	position: relative;
	display: grid;
	justify-items: center;
	align-content: start;
	gap: .75rem;
	padding: 2.5rem 1.4rem 2rem;
	text-align: center;
	background: #fff;
	color: var(--text);
	border-radius: var(--radius);
	box-shadow: 0 10px 25px -10px rgba(0, 0, 0, .2);
	transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.frame-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 20px 40px -15px rgba(0, 0, 0, .3);
}
.frame-card::before { content: ""; position: absolute; inset: 0; border: 2px solid transparent; border-radius: var(--radius); transition: border-color 0.3s; pointer-events: none; }
.frame-card:hover::before { border-color: rgba(13, 94, 107, 0.18); }
.frame-card__icon {
	display: grid;
	place-items: center;
	width: 64px;
	height: 64px;
	margin-bottom: .5rem;
	border-radius: 50%;
	background: var(--cream);
	color: var(--navy);
	transition: background 0.3s var(--ease), color 0.3s var(--ease), transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.frame-card:hover .frame-card__icon {
	background: var(--navy);
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 8px 18px -4px rgba(13, 94, 107, .35);
}
.frame-card__icon .icon { width: 32px; height: 32px; }
.frame-card__step { 
	display: inline-block;
	padding: 4px 12px;
	background: var(--cream);
	border-radius: 20px;
	font-size: 11px; 
	font-weight: 700; 
	letter-spacing: .08em; 
	text-transform: uppercase; 
	color: var(--navy); 
	margin-bottom: 0.25rem;
	transition: background 0.3s var(--ease), color 0.3s var(--ease);
}
.frame-card:hover .frame-card__step {
	background: rgba(13, 94, 107, 0.1);
	color: var(--navy-900);
}
.frame-card__title { font-size: 1.25rem; font-weight: 600; color: var(--navy); font-family: var(--f-body); }
.frame-card__desc { font-size: 15px; color: var(--text-soft); }

@media (min-width: 640px) { .frame-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .frame-grid { grid-template-columns: repeat(4, 1fr); } }

/* 12. Câu chuyện khách hàng
   -------------------------------------------------------------------------- */
.stories { display: grid; background: var(--cream-50); }
.stories__text { position: relative; padding: clamp(3.5rem, 2.5rem + 4vw, 5.5rem) var(--gutter); }
/* Dấu ngoặc kép chỉ có nét viền, như trên SIG */
.stories__marks {
	position: absolute;
	top: -.15em;
	left: var(--gutter);
	font-family: Georgia, "Times New Roman", serif;
	font-size: 150px;
	line-height: 1;
	color: transparent;
	-webkit-text-stroke: 1.2px var(--gold);
	pointer-events: none;
	user-select: none;
}
.stories__inner { position: relative; max-width: 460px; margin-left: auto; margin-right: auto; }
.stories__slides {
	position: relative;
	display: grid;
	grid-template-columns: 1fr;
	margin-top: 1.5rem;
}
.story {
	grid-area: 1 / 1;
	margin: 0;
	opacity: 0;
	transform: translate3d(0, 0, 0);
	pointer-events: none;
	transition: opacity 1.35s cubic-bezier(0.16, 1, 0.3, 1), transform 1.35s cubic-bezier(0.16, 1, 0.3, 1);
	will-change: transform, opacity;
}
.story.is-active {
	opacity: 1;
	transform: translate3d(0, 0, 0);
	pointer-events: auto;
	z-index: 2;
}
.story[data-state="enter-right"] {
	opacity: 0;
	transform: translate3d(52px, 0, 0);
	transition: none !important;
	z-index: 2;
}
.story[data-state="enter-left"] {
	opacity: 0;
	transform: translate3d(-52px, 0, 0);
	transition: none !important;
	z-index: 2;
}
.story[data-state="leave-left"] {
	opacity: 0;
	transform: translate3d(-52px, 0, 0);
	pointer-events: none;
	z-index: 1;
}
.story[data-state="leave-right"] {
	opacity: 0;
	transform: translate3d(52px, 0, 0);
	pointer-events: none;
	z-index: 1;
}
.story__box { position: relative; margin: 0; padding: 1.75rem 1.75rem 3rem; background: var(--navy); color: #fff; border-radius: var(--radius); font-size: clamp(15.5px, 14px + .35vw, 18px); line-height: 1.75; box-shadow: 0 16px 36px -12px rgba(13, 94, 107, .3); }
.story__plus { position: absolute; left: 1.5rem; bottom: .9rem; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--gold); color: #fff; }
.story__plus .icon { width: 13px; height: 13px; stroke-width: 2.5; }
.story__by { display: flex; align-items: center; justify-content: flex-end; gap: .75rem; margin-top: 1rem; font-family: var(--f-head); font-size: 1.25rem; color: var(--navy); }
.story__by::before { content: ""; width: 42px; height: 1px; background: var(--gold); }
.stories__controls {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-top: 2.25rem;
}
.stories__dots {
	display: flex;
	align-items: center;
	/* Không có khoảng cách giữa các nút vì bản thân mỗi nút đã là vùng chạm 24px,
	   khoảng trắng nhìn thấy do chấm nhỏ nằm giữa vùng đó tạo ra. */
	gap: 0;
	margin-top: 0;
}
/* Nút là vùng chạm 24x24 (WCAG 2.5.8) và trong suốt; chấm nhìn thấy nằm ở ::before. */
.stories__dots .dot {
	display: grid;
	place-items: center;
	width: 24px;
	height: 24px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}
.stories__dots .dot::before {
	content: '';
	display: block;
	width: 8px;
	height: 8px;
	border-radius: 4px;
	background: rgba(184, 112, 106, .35);
	transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.4s;
}
.stories__dots .dot.is-active::before {
	width: 24px;
	background: var(--gold-ink);
}

.stories__arrows {
	display: flex;
	align-items: center;
	gap: .6rem;
}
.stories__btn {
	display: inline-grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border-radius: var(--radius);
	background: #fff;
	color: var(--navy);
	border: 1px solid rgba(13, 94, 107, .18);
	box-shadow: 0 4px 12px -2px rgba(13, 94, 107, .08);
	transition: background-color 0.25s var(--ease), color 0.25s var(--ease), transform 0.25s var(--ease), box-shadow 0.25s var(--ease), border-color 0.25s;
}
.stories__btn .icon {
	width: 18px;
	height: 18px;
}
.stories__btn:hover {
	background: var(--navy);
	color: #fff;
	border-color: var(--navy);
	transform: translateY(-2px);
	box-shadow: 0 8px 18px -4px rgba(13, 94, 107, .25);
}
.stories__btn:active {
	transform: translateY(0);
}

/* Ảnh phủ kín cột, không để tỉ lệ ảnh dọc kéo dài chiều cao section */
.stories__media { position: relative; margin: 0; min-height: 300px; }
.stories__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 65%; }

@media (min-width: 900px) {
	.stories { grid-template-columns: 1fr 1fr; min-height: 560px; }
	.stories__text { padding-left: max(var(--gutter), calc((100vw - 1180px) / 2 + var(--gutter))); padding-right: clamp(2rem, 5vw, 5rem); display: flex; align-items: center; }
	.stories__marks { left: 2.5rem; top: 1.5rem; font-size: 200px; }
	.stories__inner { margin: 0; max-width: 520px; width: 100%; }
	.stories__controls { margin-top: 2.25rem; }
}

/* 13. Footer, nút nổi, thanh mobile
   -------------------------------------------------------------------------- */
.site-footer { position: relative; overflow: clip; background: var(--navy); color: var(--on-navy-soft); padding-top: clamp(3rem, 2.5rem + 2vw, 4rem); font-size: 14px; }
.site-footer__mark { width: 620px; right: -120px; bottom: -10px; color: #fff; opacity: .07; }
.site-footer .container { position: relative; }

.site-footer__top { display: grid; gap: 1.75rem; padding-bottom: 2rem; border-bottom: 1px solid var(--on-navy-line); }
.site-footer__brand { display: grid; gap: 1.1rem; justify-items: start; }
.site-footer .brand__name { font-size: 2rem; }
.site-footer .brand__mark { width: 58px; height: 58px; }

.socials { display: flex; gap: .5rem; }
.socials a { display: grid; place-items: center; width: 32px; height: 32px; background: #fff; color: var(--gold-strong); border-radius: var(--radius); transition: background-color .2s, color .2s; }
.socials a:hover { background: var(--gold-strong); color: #fff; }
.socials .icon { width: 18px; height: 18px; }

.site-footer__map { position: relative; width: 100%; max-width: 360px; height: 150px; overflow: hidden; border-radius: 10px; background: rgba(255, 255, 255, .08); box-shadow: 0 0 0 1px var(--on-navy-line); }
.site-footer__map-embed { width: 100%; height: 100%; }
.site-footer__map iframe { display: block; width: 100%; height: 100%; border: 0; filter: saturate(.85); }
.site-footer__map-link {
	position: absolute;
	left: .6rem; bottom: .6rem;
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	padding: .35rem .7rem;
	font-size: 13px;
	font-weight: 600;
	color: #fff;
	background: var(--gold-strong);
	border-radius: 8px;
	transition: background-color .2s;
}
.site-footer__map-link:hover { background: var(--gold-strong-hover); }
.site-footer__map-link .icon { width: 16px; height: 16px; }

.site-footer__cols { display: grid; gap: 2rem; padding-block: 2rem; }
.site-footer__title { margin-bottom: .75rem; font-size: 1.35rem; color: #fff; }
.site-footer__info li { line-height: 1.9; }
.site-footer__info a, .site-footer__links a { transition: color .2s; }
.site-footer__info a:hover, .site-footer__links a:hover { color: var(--gold-on-navy); }
.site-footer__links { display: grid; gap: .35rem; }
.site-footer__links--2col { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1rem; }

.site-footer__byline {
	display: inline-block;
	font-size: 13px;
	color: var(--gold-on-navy);
	font-weight: 500;
	margin-top: -.25rem;
	margin-bottom: .85rem;
	line-height: 1.45;
}
.site-footer__info strong {
	color: #fff;
	font-weight: 600;
}

.site-footer__bottom { display: grid; gap: .5rem; justify-items: center; padding: 1.5rem 0 2rem; border-top: 1px solid var(--on-navy-line); text-align: center; font-size: 13px; }
.site-footer__disclaimer { max-width: 760px; }
.site-footer__license { opacity: .75; }
.site-footer__legal { display: flex; flex-wrap: wrap; justify-content: center; gap: .25rem 1.25rem; }
.site-footer__legal a:hover { color: #fff; }
.site-footer__copy { margin-top: .4rem; color: #fff; }

/* Tablet: logo và bản đồ đứng cạnh nhau, ba cột thông tin chia 2 + 1 để không bỏ trống nửa phải. */
@media (min-width: 640px) {
	.site-footer__top { grid-template-columns: 1fr minmax(0, 360px); align-items: center; }
	.site-footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 2.5rem; }
	.site-footer__cols > :first-child { grid-column: 1 / -1; }
}
@media (min-width: 900px) {
	.site-footer__top { grid-template-columns: 1fr auto; }
	.site-footer__cols { grid-template-columns: 1.2fr 1fr 1fr; gap: 3rem; }
	.site-footer__cols > :first-child { grid-column: auto; }
}

/* 13. Thanh công cụ & liên hệ nhanh cố định (Floating Action Tools)
   Thiết kế dạng Floating Action Buttons (FAB) sang trọng, chuẩn y tế, không cấn thanh cuộn
   -------------------------------------------------------------------------- */
.float-tools {
	position: fixed;
	right: 16px;
	bottom: 74px;
	z-index: 95;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	pointer-events: none;
}

/* Trên mobile (< 900px): các nút liên hệ nằm ở mobile-bar đáy màn hình, chỉ hiện nút lên đầu trang khi cuộn */
.float-tools__btn:not(.float-tools__btn--top) {
	display: none;
}
/* Nhãn chữ chỉ là tooltip cho desktop (xem media 900px bên dưới). Không ẩn thì trên mobile
   chữ "Lên đầu trang" tràn quanh nút tròn. Nút vẫn có aria-label nên không mất tên đọc. */
@media (max-width: 899px) {
	.float-tools__label { display: none; }
}

.float-tools__btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	border: 0;
	text-decoration: none;
	cursor: pointer;
	box-shadow: 0 8px 20px -3px rgba(13, 94, 107, 0.24), 0 3px 8px -1px rgba(0, 0, 0, 0.08);
	transition: transform .25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow .25s ease, background-color .2s;
	-webkit-tap-highlight-color: transparent;
	pointer-events: auto;
}

.float-tools__btn:hover {
	transform: translateY(-3px) scale(1.08);
	box-shadow: 0 14px 28px -4px rgba(13, 94, 107, 0.35), 0 6px 12px -2px rgba(0, 0, 0, 0.12);
}

.float-tools__btn:active {
	transform: translateY(0) scale(0.96);
}

.float-tools__icon {
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
}

.float-tools__icon .icon {
	width: 22px;
	height: 22px;
	stroke-width: 1.8;
}

/* Các nút liên hệ chính: chữ & icon màu trắng */
.float-tools__btn--emergency,
.float-tools__btn--hotline,
.float-tools__btn--zalo,
.float-tools__btn--booking {
	color: #ffffff;
}

.float-tools__btn--emergency .icon,
.float-tools__btn--hotline .icon,
.float-tools__btn--zalo .icon,
.float-tools__btn--booking .icon {
	stroke: #ffffff;
	color: #ffffff;
}

/* 1. Nút cấp cứu: gradient đỏ + vòng sóng xung kích radar */
.float-tools__btn--emergency {
	background: linear-gradient(135deg, #EF4444 0%, #DC2626 50%, #B91C1C 100%);
	box-shadow: 0 8px 22px -2px rgba(220, 38, 38, 0.42), 0 3px 8px rgba(0, 0, 0, 0.1);
}

.float-tools__btn--emergency:hover {
	box-shadow: 0 14px 30px -3px rgba(220, 38, 38, 0.55), 0 6px 14px rgba(0, 0, 0, 0.15);
}

.float-tools__ping {
	position: absolute;
	inset: -4px;
	border-radius: 50%;
	border: 2px solid rgba(239, 68, 68, 0.75);
	pointer-events: none;
	animation: float-ping 2.2s cubic-bezier(0.2, 0.8, 0.2, 1) infinite;
}

/* 2. Hotline tư vấn: sắc xanh Navy bệnh viện */
.float-tools__btn--hotline {
	background: linear-gradient(135deg, #0D5E6B 0%, #084852 100%);
	box-shadow: 0 8px 20px -2px rgba(13, 94, 107, 0.32), 0 3px 8px rgba(0, 0, 0, 0.1);
}

.float-tools__btn--hotline:hover {
	box-shadow: 0 14px 28px -3px rgba(13, 94, 107, 0.48), 0 6px 12px rgba(0, 0, 0, 0.15);
}

/* 3. Zalo: sắc xanh dương Zalo chính thống */
.float-tools__btn--zalo {
	background: linear-gradient(135deg, #0088FF 0%, #0060D6 100%);
	box-shadow: 0 8px 20px -2px rgba(0, 102, 214, 0.38), 0 3px 8px rgba(0, 0, 0, 0.1);
}

.float-tools__btn--zalo:hover {
	box-shadow: 0 14px 28px -3px rgba(0, 102, 214, 0.55), 0 6px 12px rgba(0, 0, 0, 0.15);
}

/* 4. Đặt lịch khám: sắc vàng đồng / hồng đất sang trọng */
.float-tools__btn--booking {
	background: linear-gradient(135deg, #B8706A 0%, #9B4F48 100%);
	box-shadow: 0 8px 20px -2px rgba(155, 79, 72, 0.38), 0 3px 8px rgba(0, 0, 0, 0.1);
}

.float-tools__btn--booking:hover {
	box-shadow: 0 14px 28px -3px rgba(155, 79, 72, 0.52), 0 6px 12px rgba(0, 0, 0, 0.15);
}

/* 5. Nút lên đầu trang (Back to top): NỀN TRẮNG + ICON XANH NAVY RÕ NÉT */
.float-tools__btn.float-tools__btn--top {
	width: 44px;
	height: 0;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #ffffff !important;
	color: var(--navy) !important;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	overflow: hidden;
	transform: translateY(12px) scale(0.85);
	box-shadow: 0 6px 18px -2px rgba(13, 94, 107, 0.18), 0 2px 6px rgba(0, 0, 0, 0.08);
	transition: height .35s cubic-bezier(0.16, 1, 0.3, 1),
	            opacity .3s var(--ease),
	            transform .35s cubic-bezier(0.16, 1, 0.3, 1),
	            margin .35s var(--ease),
	            visibility .35s,
	            background-color .2s,
	            color .2s,
	            border-color .2s,
	            box-shadow .2s;
}

.float-tools__btn.float-tools__btn--top .float-tools__icon,
.float-tools__btn.float-tools__btn--top .icon,
.float-tools__btn.float-tools__btn--top svg {
	width: 20px;
	height: 20px;
	color: var(--navy) !important;
	stroke: var(--navy) !important;
	stroke-width: 2.2;
}

.float-tools__btn.float-tools__btn--top.is-visible {
	height: 44px;
	min-height: 44px;
	margin-top: 6px;
	border: 1.5px solid rgba(13, 94, 107, 0.18);
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	overflow: visible;
	transform: translateY(0) scale(1);
}

.float-tools__btn.float-tools__btn--top:hover {
	background: var(--navy) !important;
	color: #ffffff !important;
	border-color: var(--navy) !important;
	transform: translateY(-2px) scale(1.08);
	box-shadow: 0 12px 24px -3px rgba(13, 94, 107, 0.42);
}

.float-tools__btn.float-tools__btn--top:hover .float-tools__icon,
.float-tools__btn.float-tools__btn--top:hover .icon,
.float-tools__btn.float-tools__btn--top:hover svg {
	color: #ffffff !important;
	stroke: #ffffff !important;
}

@media (min-width: 900px) {
	.float-tools {
		right: 22px;
		bottom: 30px;
		pointer-events: auto;
	}

	.float-tools__btn:not(.float-tools__btn--top) {
		display: inline-flex;
	}

	/* Tooltip nhãn nổi sang trọng trỏ sang nút */
	.float-tools__label {
		position: absolute;
		right: calc(100% + 14px);
		top: 50%;
		transform: translateY(-50%) translateX(10px);
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: center;
		padding: .5rem .85rem;
		background: rgba(13, 94, 107, 0.96);
		backdrop-filter: blur(10px);
		-webkit-backdrop-filter: blur(10px);
		color: #ffffff;
		border-radius: 10px;
		box-shadow: 0 10px 24px -4px rgba(13, 94, 107, 0.35), 0 2px 6px rgba(0, 0, 0, 0.1);
		white-space: nowrap;
		opacity: 0;
		pointer-events: none;
		transition: opacity .22s var(--ease), transform .22s var(--ease);
	}

	.float-tools__label::after {
		content: "";
		position: absolute;
		left: 100%;
		top: 50%;
		transform: translateY(-50%);
		border-width: 6px 0 6px 7px;
		border-style: solid;
		border-color: transparent transparent transparent rgba(13, 94, 107, 0.96);
	}

	.float-tools__title {
		display: block;
		font-size: 13px;
		font-weight: 600;
		line-height: 1.3;
		letter-spacing: .01em;
	}

	.float-tools__sub {
		display: block;
		font-size: 11px;
		font-weight: 400;
		opacity: 0.85;
		line-height: 1.3;
		margin-top: 1px;
	}

	.float-tools__btn:hover .float-tools__label,
	.float-tools__btn:focus-visible .float-tools__label {
		opacity: 1;
		transform: translateY(-50%) translateX(0);
	}
}

@keyframes float-ping {
	0% {
		transform: scale(0.95);
		opacity: 0.9;
	}
	70%, 100% {
		transform: scale(1.48);
		opacity: 0;
	}
}

.mobile-bar {
	position: fixed;
	inset: auto 0 0;
	z-index: 90;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	padding-bottom: env(safe-area-inset-bottom);
	background: #ffffff;
	border-top: 1px solid rgba(13, 94, 107, 0.08);
	box-shadow: 0 -4px 18px rgba(0, 0, 0, 0.08);
}
.mobile-bar__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: .15rem;
	padding: .55rem .25rem .45rem;
	font-size: 11px;
	font-weight: 600;
	color: var(--navy);
	text-decoration: none;
	transition: background-color .15s;
}
.mobile-bar__item .icon { width: 22px; height: 22px; }
.mobile-bar__item--emergency { color: #DC2626; }
.mobile-bar__item--primary { background: var(--gold-strong); color: #ffffff; }

@media (min-width: 900px) {
	body { padding-bottom: 0; }
	.mobile-bar { display: none; }
}

/* 14. Trang con
   -------------------------------------------------------------------------- */
.page-banner {
	position: relative;
	width: 100%;
	min-height: clamp(260px, 24vw, 360px);
	background-color: var(--navy-900);
	background-size: cover;
	background-position: center 30%;
	background-repeat: no-repeat;
	overflow: clip;
	/* Khối chữ bám đáy nhưng vẫn nằm trong luồng: tiêu đề dài làm banner cao thêm
	   thay vì tràn lên trên và bị cắt. padding-top giữ lại một dải ảnh phía trên. */
	display: flex;
	align-items: flex-end;
	padding-top: clamp(3.5rem, 2rem + 6vw, 7rem);
}
.page-banner::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(100deg, rgba(9, 62, 71, .90) 0%, rgba(9, 62, 71, .62) 38%, rgba(9, 62, 71, .18) 66%, rgba(9, 62, 71, 0) 85%);
	pointer-events: none;
}
.page-banner__block {
	position: relative;
	z-index: 1;
	max-width: 640px;
	padding: clamp(1.4rem, 1rem + 2vw, 2.2rem) clamp(1.5rem, 1rem + 2.5vw, 2.6rem);
	background: var(--navy-grad);
	border-radius: 0 36px 0 0;
	box-shadow: 0 20px 40px -18px rgba(9, 62, 71, .5);
}
.page-banner__title {
	margin: 0 0 .8rem;
	padding-bottom: .8rem;
	position: relative;
	font-size: clamp(1.5rem, 1.15rem + 1.6vw, 2.2rem);
	line-height: 1.2;
	text-transform: uppercase;
	color: #fff;
}
.page-banner__title::after {
	content: '';
	position: absolute;
	left: 0; bottom: 0;
	width: 46px; height: 3px;
	background: var(--gold-light);
}
/* Phụ đề: câu giới thiệu ngắn, chữ thường để không tranh chấp với tiêu đề viết hoa phía trên. */
.page-banner__subtitle {
	margin: 0 0 .9rem;
	max-width: 46ch;
	font-size: clamp(.95rem, .9rem + .2vw, 1.05rem);
	line-height: 1.5;
	color: var(--on-navy-soft);
}
.page-banner__crumb { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem; font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--on-navy-soft); }
.page-banner__crumb a { color: var(--gold-on-navy); }
.page-banner__crumb a:hover { color: #fff; }
.page-banner__crumb-sep { color: var(--on-navy-line); font-size: 11px; }
@media (max-width: 640px) {
	.page-banner { min-height: 220px; }
	.page-banner__block { flex: 1; max-width: none; border-radius: 22px 22px 0 0; }
	.page-banner__crumb.page-banner__crumb--deep .page-banner__crumb-last { display: none; }
}

/* Trang Liên hệ */
.contact-layout { display: grid; gap: clamp(2rem, 1.5rem + 2vw, 3rem); align-items: stretch; }
@media (min-width: 900px) { .contact-layout { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.contact-layout__title { margin-bottom: 1.5rem; font-size: 1.75rem; color: var(--navy); }
.contact-layout__subtitle { margin-bottom: 1.25rem; font-size: 1.3rem; color: var(--navy); }
.contact-list { display: grid; gap: 1.25rem; margin: 0 0 2.5rem; padding: 0; list-style: none; }
.contact-list__item { display: flex; gap: 1rem; color: var(--text-soft); line-height: 1.6; }
.contact-list__item a { display: inline-flex; align-items: center; min-height: 24px; color: var(--text-soft); }
.contact-list__item a:hover { color: var(--gold-ink); }
.contact-list__icon { flex-shrink: 0; color: var(--gold-strong); }
.contact-list__icon .icon { width: 22px; height: 22px; }
.contact-list__label { display: block; margin-bottom: .2rem; color: var(--text); }
.contact-form { display: grid; gap: 1rem; }
.contact-form .contact-form__message { height: auto; min-height: 120px; padding-block: .75rem; resize: vertical; font-family: inherit; }
.contact-form__submit { width: 100%; }
/* Chiều cao bản đồ phải đặt cứng: height:100% trong khung chỉ có min-height không có tác dụng. */
.contact-layout__map { min-height: 360px; overflow: hidden; border-radius: var(--radius); background: var(--cream); box-shadow: 0 0 0 1px var(--line); }
.contact-layout__map iframe { display: block; width: 100%; height: 100%; min-height: 360px; border: 0; }

/* Trang Tuyển dụng */
.careers-intro { max-width: 800px; margin: 0 auto clamp(2.5rem, 2rem + 3vw, 4rem); text-align: center; color: var(--text-soft); line-height: 1.7; }
.careers-intro__title { margin-bottom: 1rem; font-size: clamp(1.5rem, 1.2rem + 1.5vw, 2rem); color: var(--navy); }
.careers-heading { margin-bottom: 1.25rem; font-size: 1.5rem; color: var(--navy); }
.jobs-table-wrap { margin-bottom: clamp(2.5rem, 2rem + 3vw, 4rem); overflow-x: auto; }
.jobs-table { width: 100%; border-collapse: collapse; text-align: left; }
.jobs-table th, .jobs-table td { padding: 1rem; border: 1px solid var(--line); color: var(--text-soft); }
.jobs-table thead th { background: var(--cream); color: var(--navy); font-weight: 600; }
.jobs-table .jobs-table__title { color: var(--text); font-weight: 600; }
.jobs-table .jobs-table__deadline { color: var(--gold-ink); font-weight: 600; }
.careers-apply { padding: clamp(1.5rem, 1rem + 3vw, 2.5rem); border-radius: var(--radius); background: var(--cream); text-align: center; color: var(--text-soft); line-height: 1.7; }
.careers-apply p { margin-bottom: 1.5rem; overflow-wrap: anywhere; }
/* Điện thoại: mỗi vị trí là một thẻ, tên cột hiện bên trái giá trị thay vì bảng phải vuốt ngang. */
@media (max-width: 640px) {
	.jobs-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
	.jobs-table, .jobs-table tbody, .jobs-table tr, .jobs-table th, .jobs-table td { display: block; }
	.jobs-table tbody { display: grid; gap: 1rem; }
	.jobs-table tr { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
	.jobs-table th, .jobs-table td { border: 0; }
	.jobs-table .jobs-table__title { padding: .9rem 1rem; background: var(--cream); color: var(--navy); font-size: 1.05rem; }
	.jobs-table td { display: flex; justify-content: space-between; gap: 1rem; padding: .6rem 1rem; border-top: 1px solid var(--line); text-align: right; }
	.jobs-table td::before { content: attr(data-label); color: var(--text-mute); font-weight: 500; text-align: left; }
}

/* Trang chi tiết bác sĩ (section thường, KHÔNG dùng .band — .band ép min-height 100svh cho panel trang chủ). */
.doctor-hero, .doctor-detail, .doctor-schedule, .doctor-related { position: relative; overflow: clip; padding-block: clamp(2.75rem, 2rem + 3vw, 4.5rem); }
.doctor-hero > .container, .doctor-detail > .container, .doctor-schedule > .container, .doctor-related > .container { position: relative; z-index: 1; }
.doctor-hero__row { display: grid; grid-template-columns: 330px 1fr; gap: clamp(2rem, 1.5rem + 2vw, 3.5rem); align-items: center; }
/* Ảnh bác sĩ là ảnh tách nền: để đứng tự do trên nền navy, có quầng sáng mờ phía sau cho nổi khối. */
.doctor-hero__photo { position: relative; display: flex; justify-content: center; align-items: flex-end; }
.doctor-hero__photo::before {
	content: '';
	position: absolute;
	left: 50%; bottom: -4%;
	width: 112%; aspect-ratio: 1;
	transform: translateX(-50%);
	background: radial-gradient(circle, rgba(212, 165, 159, .2) 0%, rgba(212, 165, 159, 0) 68%);
	pointer-events: none;
}
.doctor-hero__photo img {
	position: relative;
	width: 100%;
	height: auto;
	filter: drop-shadow(0 26px 38px rgba(0, 0, 0, .45));
	/* Ảnh cắt ngang ở ngực: làm mờ dần mép dưới để hoà vào nền thay vì thấy đường cắt thẳng. */
	-webkit-mask-image: linear-gradient(to bottom, #000 88%, transparent 100%);
	mask-image: linear-gradient(to bottom, #000 88%, transparent 100%);
}
.doctor-hero__crumb { margin-bottom: 1rem; }
.doctor-hero__name { font-size: clamp(1.75rem, 1.3rem + 2vw, 2.6rem); line-height: 1.15; color: #fff; margin: 0 0 .3rem; }
.doctor-hero__role { color: var(--gold-on-navy); font-weight: 600; font-size: 1.05rem; margin: 0 0 1.1rem; }
.doctor-hero__meta { display: flex; flex-direction: column; gap: .6rem; margin: 0 0 1.5rem; padding: 0; list-style: none; }
.doctor-hero__meta li { display: flex; align-items: flex-start; gap: .6rem; color: var(--on-navy-soft); font-size: 14.5px; }
.doctor-hero__meta li .icon { width: 18px; height: 18px; color: var(--gold-light); flex-shrink: 0; margin-top: .15rem; }
.doctor-hero__meta strong { color: #fff; font-weight: 600; }
.doctor-hero__cta { padding-top: 1.25rem; border-top: 1px solid var(--on-navy-line); display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; }
.doctor-hero__cta-label { color: var(--on-navy-soft); font-size: 14px; margin: 0; line-height: 1.5; }
.doctor-hero__cta-label strong { color: #fff; }
.doctor-hero__cta-buttons { display: flex; gap: .75rem; flex-wrap: wrap; }
@media (max-width: 760px) {
	.doctor-hero__row { grid-template-columns: 1fr; }
	.doctor-hero__photo { max-width: 220px; margin: 0 auto; }
	.doctor-hero__content { text-align: center; }
	.doctor-hero__crumb, .doctor-hero__meta { align-items: center; }
	.doctor-hero__meta li { justify-content: center; }
	.doctor-hero__cta { flex-direction: column; }
	.doctor-hero__cta-buttons { justify-content: center; }
}

.doctor-detail__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.75rem; align-items: start; }
.doctor-card { background: #fff; border-radius: var(--radius); padding: 1.75rem 2rem; box-shadow: var(--shadow); }
.doctor-card__title { font-family: var(--f-head); font-size: 1.2rem; font-weight: 500; color: var(--navy); margin: 0 0 .8rem; padding-bottom: .7rem; border-bottom: 2px solid var(--gold-light); }
.doctor-card__list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: .65rem; }
.doctor-card__list li { position: relative; padding-left: 1.1rem; font-size: 14.5px; line-height: 1.6; color: var(--text-soft); }
.doctor-card__list li::before { content: ''; position: absolute; left: 0; top: .6em; width: 6px; height: 6px; border-radius: 50%; background: var(--gold-strong); }
.doctor-card--content .prose { max-width: none; margin-inline: 0; font-size: 15px; }

.doctor-timetable-wrap { overflow-x: auto; border-radius: var(--radius); box-shadow: var(--shadow); }
.doctor-timetable { width: 100%; min-width: 560px; border-collapse: collapse; background: #fff; font-size: 13.5px; }
.doctor-timetable th, .doctor-timetable td { padding: .85rem 1rem; text-align: center; border: 1px solid var(--line); }
.doctor-timetable thead th { background: var(--navy-grad); color: #fff; font-family: var(--f-head); font-weight: 500; font-size: 14.5px; white-space: nowrap; border-color: var(--navy-900); }
.doctor-timetable__corner { background: var(--navy-900) !important; }
.doctor-timetable tbody th { background: var(--cream); color: var(--navy); font-weight: 600; text-align: left; white-space: nowrap; }
.doctor-timetable__time { display: inline-flex; align-items: center; gap: .5rem; }
.doctor-timetable__time .icon { width: 15px; height: 15px; color: var(--gold-strong); flex-shrink: 0; }
.doctor-timetable td.is-active { background: rgba(184, 112, 106, .07); color: var(--navy); }
.doctor-timetable td.is-active .icon { width: 16px; height: 16px; color: var(--gold-strong); display: block; margin: 0 auto .3rem; }
.doctor-timetable__room { display: block; font-size: 11.5px; color: var(--text-mute); }
.doctor-timetable td.is-off { color: var(--line); font-weight: 300; }
.doctor-timetable tbody tr:nth-child(even) td:not(.is-active), .doctor-timetable tbody tr:nth-child(even) th { background: #FAFAF8; }

.doctor-related__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 1.5rem; }
.doctor-related__card { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 1.4rem 1rem; border-radius: var(--radius); background: #fff; box-shadow: var(--shadow); transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.doctor-related__card:hover { transform: translateY(-4px); box-shadow: 0 20px 40px -18px rgba(9, 62, 71, .3); }
.doctor-related__card img { width: 104px; height: 104px; border-radius: 50%; object-fit: cover; object-position: top center; background: var(--cream); margin-bottom: .85rem; box-shadow: 0 8px 20px rgba(0, 0, 0, .12); }
.doctor-related__name { font-family: var(--f-head); font-weight: 500; color: var(--navy); font-size: 1rem; line-height: 1.3; }
.doctor-related__role { font-size: 12.5px; color: var(--text-mute); margin-top: .3rem; }

/* Trang chi tiết chuyên khoa (section thường, không dùng .band — xem ghi chú ở trang bác sĩ). */
.specialty-overview, .specialty-detail, .specialty-services { position: relative; overflow: clip; padding-block: clamp(2.75rem, 2rem + 3vw, 4.5rem); }
.specialty-overview > .container, .specialty-detail > .container, .specialty-services > .container { position: relative; z-index: 1; }

.specialty-overview__grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(2rem, 1.5rem + 2vw, 3.5rem); align-items: center; }
.specialty-overview .sec-head { text-align: left; margin: 0 0 1.1rem; max-width: none; }
.specialty-overview__desc { color: var(--text-soft); line-height: 1.8; }
.specialty-overview__photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); box-shadow: var(--shadow); }
@media (max-width: 900px) {
	.specialty-overview__grid { grid-template-columns: 1fr; }
	.specialty-overview__photo { order: -1; }
}

.specialty-detail__grid { display: grid; grid-template-columns: .8fr 1.4fr; gap: clamp(2rem, 1.5rem + 2vw, 3.5rem); align-items: start; }
.specialty-detail__title { font-family: var(--f-head); font-weight: 500; font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.3rem); line-height: 1.25; color: #fff; margin: 0; }
.specialty-detail__body { display: flex; flex-direction: column; gap: 1.1rem; color: var(--on-navy-soft); line-height: 1.85; }
@media (max-width: 800px) {
	.specialty-detail__grid { grid-template-columns: 1fr; }
}

.specialty-equip__grid { margin-top: clamp(2rem, 1.5rem + 2vw, 3rem); display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.5rem; }
.specialty-equip__card { background: rgba(255, 255, 255, .06); border: 1px solid var(--on-navy-line); border-radius: var(--radius); padding: 1.5rem 1.6rem; backdrop-filter: blur(2px); }
.specialty-equip__name { font-family: var(--f-head); font-weight: 500; font-size: 1.05rem; color: var(--gold-on-navy); margin: 0 0 .6rem; }
.specialty-equip__desc { color: var(--on-navy-soft); font-size: 13.5px; line-height: 1.7; margin: 0 0 .8rem; }
.specialty-equip__from { display: inline-block; font-size: 12px; color: #fff; opacity: .75; padding-top: .6rem; border-top: 1px solid var(--on-navy-line); width: 100%; }

.specialty-doctors { position: relative; overflow: clip; padding-block: clamp(2.75rem, 2rem + 3vw, 4.5rem); }
.specialty-doctors > .container { position: relative; z-index: 1; }

.specialty-services__grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(2rem, 1.5rem + 2vw, 3.5rem); align-items: center; }
.specialty-services__photo img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--radius); box-shadow: var(--shadow); }
.specialty-services__eyebrow { color: var(--gold-ink); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; font-size: 13px; margin: 0 0 .4rem; }
.specialty-services__title { font-family: var(--f-head); font-weight: 500; font-size: clamp(1.5rem, 1.15rem + 1.6vw, 2.1rem); color: var(--navy); margin: 0 0 1.5rem; line-height: 1.3; }
.specialty-services__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1rem; }
.specialty-services__list li { display: flex; align-items: baseline; gap: 1rem; padding-bottom: 1rem; border-bottom: 1px dashed var(--line); }
.specialty-services__list li:last-child { border-bottom: 0; padding-bottom: 0; }
.specialty-services__num { font-family: var(--f-head); font-weight: 500; font-size: 1.1rem; color: var(--gold-strong); flex-shrink: 0; min-width: 1.8rem; }
.specialty-services__label { color: var(--text); font-weight: 500; line-height: 1.6; }
@media (max-width: 900px) {
	.specialty-services__grid { grid-template-columns: 1fr; }
	.specialty-services__photo { max-width: 320px; margin: 0 auto; }
}

.prose { max-width: 800px; margin-inline: auto; font-size: 17px; line-height: 1.8; color: var(--text); }
.prose > * + * { margin-top: 1.25em; }
.prose h2, .prose h3 { margin-top: 2em; margin-bottom: 0.75em; color: var(--navy); font-weight: 600; line-height: 1.3; }
.prose h2 { font-size: 2rem; position: relative; padding-bottom: 0.5rem; border-bottom: 1px solid rgba(9, 62, 71, 0.1); }
.prose h3 { font-size: 1.5rem; }
.prose a { color: var(--gold-ink); text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 4px; transition: color 0.2s, text-decoration-color 0.2s; }
.prose a:hover { color: var(--navy); text-decoration-color: var(--navy); }
.prose ul { list-style: disc; padding-left: 1.5em; margin-bottom: 1.5em; }
.prose ol { list-style: decimal; padding-left: 1.5em; margin-bottom: 1.5em; }
.prose li { margin-bottom: 0.5em; }
.prose blockquote { margin-inline: 0; padding: 1.2rem 1.5rem; background: var(--cream); border-left: 4px solid var(--gold); font-size: 1.05em; font-style: italic; color: var(--text-soft); }
.prose img { border-radius: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.05); margin-top: 1em; margin-bottom: 1em; }

.article-meta { display: flex; align-items: center; gap: 0.75rem; font-size: 14px; color: var(--text-mute); margin-bottom: 1.5rem; }
.article-meta a { display: inline-block; padding: 0.2rem 0.8rem; background: var(--cream); border-radius: 20px; color: var(--gold-ink); font-weight: 600; text-decoration: none; transition: background 0.2s; }
.article-meta a:hover { background: var(--gold); color: #fff; }
.article-cover { margin: 1.5rem 0 2.5rem; border-radius: 12px; overflow: hidden; box-shadow: 0 8px 30px rgba(9, 62, 71, 0.08); }
.article-note { margin-top: 3rem; padding: 1rem 1.2rem; font-size: 14px; font-weight: 500; background: var(--cream); border-left: 4px solid var(--gold); border-radius: 4px; color: var(--navy); }

.post-grid { display: grid; gap: 2rem; }
@media (min-width: 640px) { .post-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .post-grid { grid-template-columns: repeat(3, 1fr); } }

/* Thẻ bài viết dạng lưới (trang /tin-tuc/, chuyên mục) — khác .news-hero/.news-item vốn dành cho bố cục tạp chí ở trang chủ. */
.news-card { background: #fff; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.news-card:hover { transform: translateY(-4px); box-shadow: 0 22px 40px -18px rgba(9, 62, 71, .28); }
.news-card__link { display: flex; flex-direction: column; height: 100%; color: inherit; text-decoration: none; }
.news-card__media { position: relative; overflow: hidden; aspect-ratio: 4 / 3; background: var(--cream); box-shadow: inset 0 0 0 1px rgba(9, 62, 71, .06); }
.news-card__media img { width: 100%; height: 100%; object-fit: cover; }
.news-card__media .news-badge { position: absolute; top: 12px; left: 12px; z-index: 1; }
.news-card__body { display: flex; flex-direction: column; gap: .6rem; padding: 1.4rem 1.5rem 1.6rem; flex: 1; }
.news-card__date { font-size: 13px; color: var(--text-mute); }
.news-card__title { font-family: var(--f-head); font-weight: 500; font-size: 1.1rem; line-height: 1.4; color: var(--navy); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.news-card:hover .news-card__title { color: var(--gold-ink); }
.news-card__excerpt { font-size: 14px; line-height: 1.65; color: var(--text-soft); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin: 0; }
.news-card__placeholder { position: relative; display: block; height: 100%; }
.news-card__placeholder .watermark { width: 70%; left: 15%; bottom: 8%; color: var(--navy); opacity: .15; }

/* Trang /tin-tuc/ và chuyên mục: band--cream chỉ có nền, tự thêm khoảng đệm trên/dưới ở đây. */
.news-listing { padding-block: clamp(2.5rem, 2rem + 2vw, 4rem); }
.news-listing .tabs-wrap { margin-bottom: clamp(2rem, 1.5rem + 2vw, 3rem); }

.nav-links { display: flex; justify-content: center; gap: .4rem; margin-top: 3rem; }
.page-numbers { display: grid; place-items: center; min-width: 38px; height: 38px; padding-inline: .5rem; border-radius: 3px; background: #fff; color: var(--navy); }
.page-numbers.current, .page-numbers:hover { background: var(--gold-strong); color: #fff; }

/* Trang bài viết đơn: cột nội dung + sidebar (mục lục, bài liên quan). */
.article-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 3rem; align-items: start; padding-block: clamp(3rem, 5vw, 5rem); }
@media (min-width: 960px) { .article-layout { grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr); } }
.article-sidebar { display: flex; flex-direction: column; gap: 2rem; }
@media (min-width: 960px) { .article-sidebar { position: sticky; top: calc(var(--header-h) + 2rem); } }
.side-widget { background: #fff; border-radius: 12px; padding: 1.75rem; box-shadow: 0 10px 30px rgba(9, 62, 71, 0.06); border: 1px solid rgba(9, 62, 71, 0.03); }
.side-widget__title { font-family: var(--f-head); font-weight: 600; font-size: 1.15rem; color: var(--navy); margin: 0 0 1.25rem; position: relative; padding-bottom: 0.75rem; }
.side-widget__title::after { content: ''; position: absolute; bottom: 0; left: 0; width: 40px; height: 3px; background: var(--gold); border-radius: 2px; }
.toc-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.65rem; font-size: 14.5px; }
.toc-list a { color: var(--text-soft); text-decoration: none; transition: color 0.2s, padding-left 0.2s; display: block; }
.toc-list a:hover { color: var(--gold-ink); padding-left: 5px; font-weight: 500; }
.toc-list li.is-sub { padding-left: 1.25rem; position: relative; }
.toc-list li.is-sub::before { content: '\2022'; position: absolute; left: 0.35rem; color: var(--gold); font-size: 1.2em; }
.toc-list__empty { color: var(--text-mute); font-size: 14px; font-style: italic; }
.related-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1.25rem; }
.related-list li { display: flex; gap: 1rem; align-items: flex-start; }
/* Khung ảnh cố định: nếu để thẻ a co giãn, tiêu đề dài bóp ảnh lại và các dòng chữ lệch nhau. */
.related-list .related-list__thumb { display: block; flex: 0 0 80px; overflow: hidden; border-radius: 8px; -webkit-line-clamp: unset; }
.related-list img { width: 80px; height: 60px; object-fit: cover; border-radius: 8px; flex-shrink: 0; transition: transform 0.3s; }
.related-list li:hover img { transform: scale(1.05); }
.related-list a { font-size: 14.5px; font-weight: 500; color: var(--navy); text-decoration: none; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; transition: color 0.2s; }
.related-list a:hover { color: var(--gold-ink); }
.article-share { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid rgba(9, 62, 71, 0.1); display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.article-share__label { font-weight: 600; color: var(--navy); font-size: 15px; }
.article-share__icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--cream); color: var(--navy); transition: all 0.25s ease; border: 1px solid transparent; }
.article-share__icon:hover { background: var(--gold-strong); color: #fff; transform: translateY(-3px); box-shadow: 0 4px 10px rgba(228, 168, 83, 0.4); }
.article-share__icon .icon { width: 18px; height: 18px; }

.empty-state { max-width: 560px; margin: 0 auto; text-align: center; }
.empty-state__title { font-family: var(--f-head); font-size: 1.6rem; color: var(--navy); margin-bottom: .4rem; }
.search-form { display: flex; gap: .5rem; margin-top: 1.25rem; }
.search-form label { flex: 1; }
.search-field { width: 100%; height: 46px; padding: 0 .9rem; border: 1px solid var(--line); border-radius: 3px; }
.search-submit { height: 46px; padding-inline: 1.1rem; border-radius: 3px; background: var(--gold-strong); color: #fff; font-weight: 600; }

/* Trang Hỗ trợ khách hàng: lưới thẻ lối tắt + dải liên hệ nhanh. */
.support-hub { position: relative; overflow: clip; padding-block: clamp(2.75rem, 2rem + 3vw, 4.5rem); }
.support-grid { margin-top: clamp(2rem, 1.5rem + 2vw, 3rem); display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.75rem; }
.support-card { display: block; background: #fff; border-radius: var(--radius); padding: 2rem 1.75rem; text-align: center; box-shadow: var(--shadow); transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.support-card:hover { transform: translateY(-6px); box-shadow: 0 26px 46px -20px rgba(9, 62, 71, .3); }
.support-card__icon { display: grid; place-items: center; width: 56px; height: 56px; margin: 0 auto 1.1rem; border-radius: 50%; background: var(--cream); color: var(--gold-strong); }
.support-card__icon .icon { width: 26px; height: 26px; }
.support-card:hover .support-card__icon { background: var(--navy-grad); color: #fff; }
.support-card__title { font-family: var(--f-head); font-weight: 500; font-size: 1.1rem; color: var(--navy); margin: 0 0 .5rem; }
.support-card__desc { font-size: 14px; line-height: 1.6; color: var(--text-soft); margin: 0; }

.support-cta { margin-top: clamp(2.5rem, 2rem + 2vw, 3.5rem); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem; background: var(--navy-grad); color: #fff; border-radius: var(--radius); padding: 1.75rem 2.2rem; }
.support-cta__text strong { display: block; font-family: var(--f-head); font-size: 1.2rem; margin-bottom: .3rem; }
.support-cta__text span { color: var(--on-navy-soft); font-size: 14px; }
.support-cta__actions { display: flex; gap: .75rem; flex-wrap: wrap; }

.not-found__inner { display: grid; justify-items: center; text-align: center; gap: 1.25rem; }
.not-found__code { font-family: var(--f-head); font-size: clamp(6rem, 4rem + 8vw, 10rem); font-weight: 500; line-height: 1; color: var(--navy); }
.not-found__text { max-width: 560px; color: var(--text-soft); }
.not-found__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; }

/* 15. Section cao bằng màn hình (desktop)
   --------------------------------------------------------------------------
   Dùng min-height chứ không ép height: nội dung dài hơn màn hình thì section tự giãn, không cắt chữ.
   Trừ chiều cao header vì header dính trên cùng che mất phần đầu section.
   Mobile giữ chiều cao tự nhiên: ép 10 nút chuyên khoa hay 3 thẻ gói khám vào một màn hình điện thoại sẽ chật. */
@media (min-width: 900px) {

	.band,
	.stories { min-height: calc(100svh - var(--header-h)); }

	.band {
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding-block: clamp(2.5rem, 6svh, 5.5rem);
	}
	.band > .container { width: 100%; }
	.sec-head { margin-bottom: clamp(1.5rem, 4svh, 3rem); }
	.sec-more { margin-top: clamp(1.25rem, 3svh, 2.25rem); }

	/* Section Tin tức: tối ưu để luôn vừa vặn 100vh trên desktop */
	.news.band {
		padding-block: clamp(1.25rem, 3svh, 2.5rem);
	}
	.news .sec-head {
		margin-bottom: clamp(0.45rem, 1.3svh, 0.95rem);
	}
	.news .tabs-wrap {
		margin: 0 auto clamp(0.45rem, 1.3svh, 0.95rem);
	}
	.news .sec-more {
		margin-top: clamp(0.55rem, 1.4svh, 1rem);
	}
}

/* Laptop màn hình thấp (≤ 820px chiều cao): thu gọn khoảng cách bên trong để section vẫn vừa một màn hình. */
@media (min-width: 900px) and (max-height: 820px) {
	.sec-title { font-size: clamp(1.8rem, 1.2rem + 1.6vw, 2.5rem); }
	.sec-lede { margin-top: .5rem; }
	.hero__content { bottom: 6.5rem; }
	.hero__controls { top: calc(var(--slides-h) - 4.25rem); }
	.stats__item { padding-block: 1rem; }
	.stats__value { font-size: 4rem; }
	.pkg__head { padding: 1.25rem 1.25rem 1rem; }
	.pkg__icon { margin-bottom: .5rem; }
	.pkg__icon .icon { width: 44px; height: 44px; }
	.pkg__items li { padding: .45rem 0; }
	.pkg-grid { padding-block: 1rem; }
	.pkg--featured { margin-block: -1rem; }
	.pkg__price { padding: .6rem 1rem; }
	.pkg__more { padding: .6rem 0 1.1rem; }
	.frame-card { padding: 1.5rem 1.2rem 1.4rem; }
	.stack__buttons { margin-top: 1.25rem; }

	/* Tin tức & Kiến thức y tế: thu gọn vừa vặn 100vh trên laptop */
	.news.band {
		padding-block: clamp(0.65rem, 1.8svh, 1.25rem);
	}
	.news .sec-head {
		margin-bottom: clamp(0.3rem, 1svh, 0.6rem);
	}
	.news .sec-title {
		font-size: clamp(1.3rem, 1rem + 0.8vw, 1.65rem);
		margin-bottom: .2rem;
	}
	.news .sec-lede {
		display: none;
	}
	.news .tabs-wrap {
		margin: 0 auto clamp(0.35rem, 1svh, 0.65rem);
	}
	.news .tabs {
		padding: 3px;
		gap: 3px;
	}
	.news .tabs__tab {
		padding: .35rem 1rem;
		font-size: 13px;
	}
	.news-grid {
		gap: .85rem;
		height: clamp(310px, 46svh, 380px);
	}
	.news-hero__media {
		min-height: 130px;
	}
	.news-hero__body {
		padding: .75rem 1rem;
	}
	.news-hero__title {
		font-size: 1.1rem;
		margin-top: .2rem;
		-webkit-line-clamp: 2;
	}
	.news-hero__excerpt {
		font-size: 12.5px;
		line-height: 1.4;
		margin-top: .2rem;
		-webkit-line-clamp: 2;
	}
	.news-hero__cta {
		padding-top: .35rem;
		font-size: 12.5px;
	}
	.news-list {
		gap: .5rem;
	}
	.news-item__link {
		padding: .45rem .75rem;
		gap: .75rem;
	}
	.news-item__media {
		width: 80px;
		height: 62px;
	}
	.news-item__title {
		font-size: .88rem;
		margin-top: .15rem;
		-webkit-line-clamp: 2;
	}
	.news-item__excerpt {
		font-size: 11.5px;
		line-height: 1.35;
		margin-top: .15rem;
		-webkit-line-clamp: 1;
	}
	.news-item__arrow {
		width: 26px;
		height: 26px;
	}
	.news-item__arrow .icon {
		width: 12px;
		height: 12px;
	}
	.news .sec-more {
		margin-top: clamp(0.35rem, 1svh, 0.65rem);
	}
	.news .sec-more .btn {
		padding: .4rem 1.25rem;
		font-size: 13px;
	}
}

@media (max-width: 899px) {
	/* Mobile: banner vẫn 100vh, chữ và nút chuyển slide chừa chỗ cho thanh liên hệ nhanh ở đáy màn hình. */
	.hero { --slides-h: max(520px, 100svh); }
}

/* 16. Chuyển động xuất hiện khi cuộn (Scroll Reveal)
   Hiệu ứng xuất hiện từ từ, chậm rãi và mượt mà - lặp lại mỗi khi cuộn tới
   -------------------------------------------------------------------------- */
.js [data-reveal] {
	opacity: 0;
	transform: translateY(36px);
	transition: opacity .4s var(--ease), transform .4s var(--ease);
	will-change: opacity, transform;
}
.js [data-reveal].is-in {
	opacity: 1;
	transform: none;
	transition: opacity 1.25s cubic-bezier(0.16, 1, 0.3, 1), transform 1.25s cubic-bezier(0.16, 1, 0.3, 1);
	transition-delay: calc(var(--i, var(--row, 0)) * 110ms);
}
/* Nút chuyên khoa đã dùng transform để xếp vòng cung: nâng nhẹ và trượt vào vị trí tự nhiên */
@media (min-width: 900px) {
	.js .orbit__col--left .orbit__item[data-reveal] {
		opacity: 0;
		transform: translateX(calc(var(--c) * var(--k))) translateY(28px);
		transition: opacity .4s var(--ease), transform .4s var(--ease);
	}
	.js .orbit__col--right .orbit__item[data-reveal] {
		opacity: 0;
		transform: translateX(calc(var(--c) * var(--k) * -1)) translateY(28px);
		transition: opacity .4s var(--ease), transform .4s var(--ease);
	}
	.js .orbit__col--left .orbit__item[data-reveal].is-in {
		opacity: 1;
		transform: translateX(calc(var(--c) * var(--k)));
		transition: opacity 1.25s cubic-bezier(0.16, 1, 0.3, 1), transform 1.25s cubic-bezier(0.16, 1, 0.3, 1);
		transition-delay: calc(var(--row, 0) * 100ms);
	}
	.js .orbit__col--right .orbit__item[data-reveal].is-in {
		opacity: 1;
		transform: translateX(calc(var(--c) * var(--k) * -1));
		transition: opacity 1.25s cubic-bezier(0.16, 1, 0.3, 1), transform 1.25s cubic-bezier(0.16, 1, 0.3, 1);
		transition-delay: calc(var(--row, 0) * 100ms);
	}
}

/* ==========================================================================
   17. Đặt lịch khám — Wizard nhiều bước
   ========================================================================== */
.booking-wizard { max-width: 920px; margin-inline: auto; padding-block: clamp(2rem, 4vw, 4rem); }

/* Progress bar */
.booking-progress { display: flex; align-items: flex-start; justify-content: space-between; position: relative; margin-bottom: clamp(2.5rem, 4vw, 3.5rem); counter-reset: step; }
.booking-progress::before { content: ''; position: absolute; top: 24px; left: 48px; right: 48px; height: 3px; background: var(--line); z-index: 0; }
.booking-progress__step { display: flex; flex-direction: column; align-items: center; gap: .5rem; position: relative; z-index: 1; flex: 1; }
.booking-progress__icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--cream); color: var(--text-mute); border: 3px solid var(--line); transition: all .35s var(--ease); }
.booking-progress__icon .icon { width: 20px; height: 20px; }
.booking-progress__label { font-size: 13px; font-weight: 600; color: var(--text-mute); text-align: center; transition: color .35s; white-space: nowrap; }
.booking-progress__step.is-active .booking-progress__icon { background: var(--gold-strong); color: #fff; border-color: var(--gold-strong); box-shadow: 0 4px 16px rgba(155, 79, 72, .35); }
.booking-progress__step.is-active .booking-progress__label { color: var(--gold-strong); }
.booking-progress__step.is-done .booking-progress__icon { background: var(--navy); color: #fff; border-color: var(--navy); }
.booking-progress__step.is-done .booking-progress__label { color: var(--navy); }
@media (max-width: 640px) {
	.booking-progress__label { font-size: 11px; }
	.booking-progress__icon { width: 38px; height: 38px; }
	.booking-progress__icon .icon { width: 16px; height: 16px; }
	.booking-progress::before { top: 19px; left: 30px; right: 30px; }
}

/* Step panels */
.booking-step { display: none; animation: bookingFadeIn .4s var(--ease); }
.booking-step.is-visible { display: block; }
@keyframes bookingFadeIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* Step header */
.booking-step__title { font-family: var(--f-head); font-size: 1.6rem; font-weight: 600; color: var(--navy); margin-bottom: .4rem; }
.booking-step__desc { color: var(--text-soft); font-size: 15px; margin-bottom: 2rem; }

/* Specialty grid */
.specialty-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1.25rem; }
.specialty-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: .75rem; padding: 1.75rem 1.25rem; border-radius: var(--radius); background: #fff; border: 2px solid var(--line); cursor: pointer; text-align: center; transition: all .3s var(--ease); }
.specialty-card:hover { border-color: var(--gold); transform: translateY(-3px); box-shadow: 0 10px 25px rgba(9, 62, 71, .08); }
.specialty-card.is-selected { border-color: var(--gold-strong); background: rgba(155, 79, 72, .04); box-shadow: 0 0 0 3px rgba(155, 79, 72, .15); }
.specialty-card__icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--cream); color: var(--gold-strong); transition: all .3s; }
.specialty-card__icon .icon { width: 26px; height: 26px; }
.specialty-card:hover .specialty-card__icon,
.specialty-card.is-selected .specialty-card__icon { background: var(--gold-strong); color: #fff; }
.specialty-card__name { font-family: var(--f-head); font-weight: 500; font-size: 1rem; color: var(--navy); line-height: 1.3; }
.specialty-card__desc { font-size: 13px; color: var(--text-soft); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Doctor grid */
.doctor-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.25rem; }
.doctor-card-select { display: flex; align-items: center; gap: 1.25rem; padding: 1.25rem; border-radius: var(--radius); background: #fff; border: 2px solid var(--line); cursor: pointer; text-align: left; transition: all .3s var(--ease); }
.doctor-card-select:hover { border-color: var(--gold); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(9, 62, 71, .08); }
.doctor-card-select.is-selected { border-color: var(--gold-strong); background: rgba(155, 79, 72, .04); box-shadow: 0 0 0 3px rgba(155, 79, 72, .15); }
.doctor-card-select__photo { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; flex-shrink: 0; background: var(--cream); }
.doctor-card-select__info { flex: 1; min-width: 0; }
.doctor-card-select__name { font-family: var(--f-head); font-weight: 600; font-size: 1rem; color: var(--navy); margin-bottom: .2rem; }
.doctor-card-select__degree { font-size: 13px; color: var(--gold-ink); font-weight: 600; }
.doctor-card-select__position { font-size: 13px; color: var(--text-soft); }
.doctor-skip { display: flex; align-items: center; justify-content: center; gap: .5rem; padding: 1rem; border: 2px dashed var(--line); border-radius: var(--radius); color: var(--text-soft); font-weight: 600; cursor: pointer; transition: all .3s; }
.doctor-skip:hover { border-color: var(--navy); color: var(--navy); background: rgba(13, 94, 107, .03); }

/* Date & Time Slots */
.datetime-layout { display: grid; grid-template-columns: 1fr; gap: 2rem; }
@media (min-width: 640px) { .datetime-layout { grid-template-columns: 280px 1fr; } }
.date-picker-wrap { display: flex; flex-direction: column; gap: .75rem; }
.date-picker-wrap label { font-weight: 600; color: var(--navy); font-size: 15px; }
.date-picker-wrap input[type="date"] { width: 100%; height: 50px; padding: 0 1rem; border: 2px solid var(--line); border-radius: var(--radius); font-size: 16px; color: var(--text); background: #fff; transition: border-color .2s; }
.date-picker-wrap input[type="date"]:focus { outline: none; border-color: var(--gold-strong); }
.slots-container { min-height: 120px; }
.slots-container__title { font-weight: 600; color: var(--navy); font-size: 15px; margin-bottom: .75rem; }
.slots-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .75rem; }
.slot-btn { display: flex; flex-direction: column; align-items: center; gap: .2rem; padding: .85rem .75rem; border-radius: 8px; border: 2px solid var(--line); background: #fff; cursor: pointer; transition: all .25s var(--ease); font-size: 14px; font-weight: 600; color: var(--navy); }
.slot-btn:hover:not(.is-full) { border-color: var(--gold); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(9, 62, 71, .08); }
.slot-btn.is-selected { border-color: var(--gold-strong); background: var(--gold-strong); color: #fff; box-shadow: 0 4px 14px rgba(155, 79, 72, .3); }
.slot-btn.is-full { opacity: .45; cursor: not-allowed; background: var(--cream); text-decoration: line-through; }
.slot-btn__room { font-size: 12px; font-weight: 400; opacity: .7; }
.slots-empty { text-align: center; padding: 2.5rem 1rem; color: var(--text-mute); }
.slots-empty .icon { width: 40px; height: 40px; margin-bottom: .75rem; color: var(--line); }

/* Patient Form */
.patient-layout { display: grid; grid-template-columns: 1fr; gap: 2rem; }
@media (min-width: 768px) { .patient-layout { grid-template-columns: 1fr 300px; } }
.booking-field-group { display: flex; flex-direction: column; gap: .5rem; margin-bottom: 1.25rem; }
.booking-field-group label { font-weight: 600; font-size: 14px; color: var(--navy); }
.booking-field-group label .required { color: var(--signal); margin-left: 2px; }
.booking-field { width: 100%; height: 48px; padding: 0 1rem; border: 2px solid var(--line); border-radius: 8px; font-size: 15px; color: var(--text); background: #fff; transition: border-color .25s, box-shadow .25s; }
.booking-field:focus { outline: none; border-color: var(--gold-strong); box-shadow: 0 0 0 3px rgba(155, 79, 72, .1); }
.booking-field.is-error { border-color: var(--signal); }
.booking-field-error { font-size: 13px; color: var(--signal); display: none; }
.booking-field-group.has-error .booking-field-error { display: block; }
textarea.booking-field { height: auto; min-height: 100px; padding: .75rem 1rem; resize: vertical; }
select.booking-field { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%235A6068' stroke-width='2'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 40px; }
.honeypot-field { position: absolute; left: -9999px; opacity: 0; height: 0; width: 0; overflow: hidden; }

/* Summary sidebar */
.booking-summary { background: var(--cream); border-radius: var(--radius); padding: 1.5rem; position: sticky; top: calc(var(--header-h) + 2rem); }
.booking-summary__title { font-family: var(--f-head); font-weight: 600; font-size: 1.1rem; color: var(--navy); margin-bottom: 1rem; padding-bottom: .75rem; border-bottom: 1px solid var(--line); }
.booking-summary__row { display: flex; justify-content: space-between; align-items: flex-start; gap: .5rem; padding: .5rem 0; font-size: 14px; }
.booking-summary__label { color: var(--text-soft); flex-shrink: 0; }
.booking-summary__value { color: var(--navy); font-weight: 600; text-align: right; }

/* Navigation buttons */
.booking-nav { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.booking-nav .btn { min-width: 140px; }

/* Success screen */
.booking-success { text-align: center; padding: 3rem 1rem; }
.booking-success__icon { display: grid; place-items: center; width: 88px; height: 88px; border-radius: 50%; background: #dcfce7; color: #16a34a; margin: 0 auto 1.5rem; }
.booking-success__icon .icon { width: 44px; height: 44px; }
.booking-success__title { font-family: var(--f-head); font-size: 2rem; font-weight: 600; color: var(--navy); margin-bottom: .5rem; }
.booking-success__code { display: inline-block; background: var(--cream); color: var(--gold-strong); font-size: 1.5rem; font-weight: 700; padding: .5rem 1.5rem; border-radius: 8px; margin: 1rem 0; letter-spacing: 1px; }
.booking-success__details { max-width: 500px; margin: 1.5rem auto 0; text-align: left; background: #fff; border-radius: var(--radius); padding: 1.5rem; box-shadow: var(--shadow); }
.booking-success__details .booking-summary__row:not(:last-child) { border-bottom: 1px solid var(--line); padding-bottom: .75rem; }
.booking-success__actions { margin-top: 2rem; display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap; }

/* Loading spinner */
.booking-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; padding: 3rem; color: var(--text-mute); }
.booking-spinner { width: 40px; height: 40px; border: 3px solid var(--line); border-top-color: var(--gold-strong); border-radius: 50%; animation: bookingSpin .8s linear infinite; }
@keyframes bookingSpin { to { transform: rotate(360deg); } }

/* Toast notification */
.booking-toast { position: fixed; top: 20px; right: 20px; z-index: 9999; background: var(--signal); color: #fff; padding: .9rem 1.5rem; border-radius: 8px; font-size: 14px; font-weight: 600; box-shadow: 0 8px 24px rgba(0,0,0,.2); transform: translateX(120%); transition: transform .35s var(--ease); }
.booking-toast.is-visible { transform: none; }
.booking-toast--success { background: #16a34a; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		transition-delay: 0s !important;
	}
	.js [data-reveal] { opacity: 1; }

	/* Carousel bác sĩ: giữ transition mượt ngay cả khi OS bật reduced-motion,
	   vì đây là tương tác do người dùng chủ động bấm nút. */
	.doctors .stack__item {
		transition-property: transform, opacity !important;
		transition-duration: 1.2s !important;
		transition-timing-function: cubic-bezier(.25, .8, .25, 1) !important;
	}
	.doc-card__link::after {
		transition-property: opacity !important;
		transition-duration: 1.2s !important;
		transition-timing-function: cubic-bezier(.25, .8, .25, 1) !important;
	}
	.doc-card__info {
		transition-property: opacity, transform !important;
		transition-duration: .6s !important;
		transition-delay: .4s !important;
		transition-timing-function: cubic-bezier(.25, .8, .25, 1) !important;
	}
}

/* ---------------------------------------------------------------------------
   22. Trang Hỏi đáp
   Dùng <details>/<summary> gốc: mở/đóng được bằng bàn phím mà không cần JS.
   --------------------------------------------------------------------------- */
.faq { max-width: 760px; margin-inline: auto; }
.faq__heading {
	margin: 0 0 clamp(1.5rem, 1rem + 2vw, 2.5rem);
	font-size: var(--fs-title);
	line-height: 1.2;
	text-align: center;
	color: var(--navy-900);
}
.faq__list { display: flex; flex-direction: column; gap: .75rem; }
.faq__item {
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: 0 2px 8px rgba(0, 0, 0, .02);
	transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.faq__item[open] { border-color: var(--navy-600); box-shadow: var(--shadow); }
.faq__question {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	padding: clamp(1rem, .85rem + .6vw, 1.35rem);
	font-family: var(--f-head);
	font-size: clamp(1rem, .95rem + .3vw, 1.125rem);
	font-weight: 600;
	line-height: 1.4;
	color: var(--navy-900);
	cursor: pointer;
	list-style: none;
}
/* Bỏ mũi tên mặc định của trình duyệt để thay bằng dấu +/- riêng. */
.faq__question::-webkit-details-marker { display: none; }
.faq__question::marker { content: ''; }
.faq__question::after {
	content: '+';
	margin-inline-start: auto;
	flex: none;
	font-size: 1.5rem;
	line-height: 1;
	color: var(--gold-ink);
	transition: transform .2s var(--ease);
}
.faq__item[open] .faq__question::after { content: '−'; }
.faq__question:focus-visible {
	outline: 3px solid var(--navy-600);
	outline-offset: -3px;
	border-radius: var(--radius);
}
.faq__answer {
	padding: 0 clamp(1rem, .85rem + .6vw, 1.35rem) clamp(1rem, .85rem + .6vw, 1.35rem);
	margin-top: -.25rem;
	color: var(--text-soft);
	line-height: 1.7;
}

/* ---------------------------------------------------------------------------
   23. Vùng chạm trên màn hình cảm ứng
   WCAG 2.2 (2.5.8) yêu cầu đích bấm tối thiểu 24x24px. Các liên kết dạng danh sách
   ở chân trang và breadcrumb chỉ cao bằng dòng chữ (17–21px) nên phải nới thêm.
   Dùng min-height thay vì padding để không xô lệch khoảng cách đang có.
   --------------------------------------------------------------------------- */
@media (max-width: 768px) {
	.site-footer__legal a,
	.site-footer__links a,
	.site-footer__info a,
	.page-banner__crumb a,
	.page-banner__crumb span[aria-current],
	.nav--mobile .nav__link,
	.nav__sub-item a {
		display: inline-flex;
		align-items: center;
		min-height: 24px;
	}
}