body {
	font-family: var(--font-base);
	background: #fff;
	color: var(--c-text);
}

/* Footer brand column used a plain "V VITAL" text badge instead of the real
   logo. The source artwork is dark blue, which disappears against the
   footer's dark blue background, so invert it to white (a filter, since no
   separate white/reversed logo file exists) rather than leaving it as text. */
.vital-footer__logo-img {
	filter: brightness(0) invert(1);
	height: auto;
	margin-bottom: 14px;
	width: 190px;
}

/* Feedback lần 3: "logo trong menu quá bé ko nhìn thấy, mong muốn cho to
   như ngoài header". Ngăn kéo menu rộng 300px (--drawer-width), nên thu lề
   ngang từ 30px xuống 20px để logo có trọn 260px — xấp xỉ đúng bề ngang
   logo ở hàng header trên máy 375px sau khi đã phóng to bên dưới. Dùng
   width:100% + max-width thay cho width cố định để trên máy hẹp hơn logo tự
   co lại chứ không tràn ra ngoài ngăn kéo. */
.mobile-sidebar-brand {
	padding: 22px 20px 12px;
	text-align: center;
}

.mobile-sidebar-brand img {
	height: auto;
	margin: 0 auto;
	max-width: 260px;
	width: 100%;
}

/* Mobile off-canvas menu (hamburger): Flatsome's overlay-menu.php template
   hardcodes the "nav-uppercase" class onto the sidebar <ul> regardless of
   the Customizer's "Uppercase" toggle, so text-transform has to be undone
   here instead. The dark-blue row background wasn't intentional theming —
   it came from a generic ".nav{background:...}" rule in the ported mockup
   CSS colliding with Flatsome's own (very common) "nav" class name; that's
   now scoped to ".vital-page .nav" so it no longer reaches this menu. */
.mobile-sidebar .nav-sidebar > li > a {
	text-transform: none;
	font-weight: 600;
	letter-spacing: 0;
	color: var(--c-text);
}

.mobile-sidebar .nav-sidebar > li > a:hover {
	color: var(--c-primary);
}

/* Client feedback: submenu items ("Về VITAL"/"Chuyên gia" under "Giới
   thiệu") didn't match the parent items' font-weight/color/size, and
   neither level showed any visible "current page" state. Flatsome's own
   ".nav>li>a{font-size:.8em}" only targets the top-level <ul class="nav">
   — the nested ".sub-menu.nav-sidebar-ul" isn't a ".nav" itself, so
   without this rule its links fell back to the unscaled 17px body size,
   rendering larger than their parent. */
.mobile-sidebar .nav-sidebar-ul > li > a {
	text-transform: none;
	letter-spacing: 0;
	font-weight: 600;
	font-size: 0.8em;
	color: var(--c-text);
}

.mobile-sidebar .nav-sidebar-ul > li > a:hover {
	color: var(--c-primary);
}

.mobile-sidebar .nav-sidebar > li.current-menu-item > a,
.mobile-sidebar .nav-sidebar > li.current_page_item > a,
.mobile-sidebar .nav-sidebar-ul > li.current-menu-item > a,
.mobile-sidebar .nav-sidebar-ul > li.current_page_item > a {
	color: var(--c-primary);
}

/* "Đăng nhập" is a different kind of action than the nav links above it
   (log into wp-admin, not browse a page), so it's styled as a distinct
   pill button — reusing the same outline-button look used elsewhere on
   the site (.btn--outline) — instead of blending in as a plain nav row. */
.mobile-sidebar .header-button-1 {
	padding: 16px 30px 20px;
}

/* Flatsome renders this as a "Link" style header button (classes
   "button plain is-link"), and Flatsome's own .is-link rule forces
   background-color/border-color to transparent via !important — normal
   declarations can't win against that, so these need !important too. */
.mobile-sidebar .header-button-1 .button {
	background: #fff !important;
	border: 1.5px solid var(--c-primary) !important;
	border-radius: 999px !important;
	color: var(--c-primary) !important;
	font-weight: 700;
	height: auto;
	justify-content: center;
	min-height: 0;
	padding: 11px 20px !important;
	text-transform: none;
	width: 100%;
	gap: 8px;
}

.mobile-sidebar .header-button-1 .button::before {
	content: "";
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4'/%3E%3Cpolyline points='10 17 15 12 10 7'/%3E%3Cline x1='15' y1='12' x2='3' y2='12'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4'/%3E%3Cpolyline points='10 17 15 12 10 7'/%3E%3Cline x1='15' y1='12' x2='3' y2='12'/%3E%3C/svg%3E") center / contain no-repeat;
}

.mobile-sidebar .header-button-1 .button:hover {
	background: var(--c-primary);
	color: #fff;
}

/* Header dropdown submenus ("Giới thiệu" > "Về VITAL" / "Chuyên gia") used
   Flatsome's default sharp-cornered panel. Round it and give items a soft
   hover highlight to match the rest of the site's card language. */
.nav-dropdown {
	border: 1px solid var(--c-border);
	border-radius: var(--radius-card);
	box-shadow: var(--shadow-card-hover);
	overflow: hidden;
	padding: 8px !important;
}

.nav-dropdown.nav-dropdown-default > li > a {
	border-radius: 8px;
	color: var(--c-text) !important;
	margin: 0 !important;
	padding: 10px 14px !important;
	font-size: 15px !important;
}

.nav-dropdown.nav-dropdown-default > li:not(:last-child) > a {
	border-bottom: 1px solid var(--c-border);
	border-radius: 8px 8px 0 0;
}

.nav-dropdown > li > a:hover {
	background: var(--c-bg-alt);
	color: var(--c-primary) !important;
}

/* The source design only shrinks the hero display font at <=767px, so
   between ~768-1100px the title runs into the hero photo. Add a tablet
   step so "Nâng tầm" never gets covered by the image. */
@media (max-width: 1100px) and (min-width: 768px) {
	:root {
		--fs-display: 42px;
	}
}

/* The "VITAL / Hospital Leadership" badge over the hero photo wraps
   awkwardly at its default size; give it a touch more room and a
   slightly smaller label so it reads on one line. */
.hero-mini-card {
	max-width: 200px;
}

.hero-mini-card strong {
	font-size: 15px;
	white-space: nowrap;
}

@media (max-width: 900px) {
	.hero-mini-card strong {
		font-size: 13px;
	}
}

.lb-overlay[hidden] {
	display: none;
}

/* The source design's lightbox overlay is only ~82% opaque, so the
   album carousel's prev/next arrows show through faintly behind the
   popup. Make the overlay fully solid. */
.lb-overlay {
	background: #0a1420 !important;
}

/* Flatsome's sticky header uses z-index:1001, higher than the lightbox's
   original z-index:200 — the header nav bar was rendering on top of the
   popup and clashing with the close button. Push the lightbox above it. */
.lb-overlay {
	z-index: 9999 !important;
}

/* Give the carousel arrows room so they don't sit on top of the photo. */
.album-carousel {
	padding: 0 32px;
}

.album-carousel .ac-arrow--left {
	left: 0;
}

.album-carousel .ac-arrow--right {
	right: 0;
}

/* Switched from an inline SVG chevron (which kept rendering invisible —
   Flatsome's global button style sets color:#fff, making a
   stroke="currentColor" icon disappear on the white circle) to
   Flatsome's own icon font, which is simpler and always visible. */
.ac-arrow {
	color: var(--c-primary) !important;
	font-size: 16px;
}

.ac-arrow i {
	color: inherit;
}

.ac-arrow:hover {
	color: #fff !important;
}

/* Lightbox prev/next used a raw "‹ ›" text glyph, off-center inside the
   circle because of font metrics. Switched to Flatsome's icon font
   (same fix as the album carousel arrows). */
.lb-arrow {
	color: var(--c-primary) !important;
	font-size: 18px;
	line-height: 1;
}

.lb-arrow i {
	color: inherit;
	display: block;
}

.lb-arrow:hover:not(:disabled) {
	color: #fff !important;
}

/* The close button went through a text glyph ("✕") and then Flatsome's
   icon font (icon-x) — both rendered off-center or as a plain fallback
   letter depending on browser/font-loading. Draw the X with pure CSS
   (two rotated bars) so it never depends on any font.
   Note: no "position" set here — .lb-close already has position:absolute
   from the original design CSS. Setting position:relative here (equal
   specificity, loads later) overrode that and pulled the button back
   into normal flex flow, leaving a blank column and pushing the photo
   over — exactly the bug reported. */
.vital-x-icon::before,
.vital-x-icon::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 16px;
	height: 2px;
	background: currentColor;
	transform-origin: center;
}

.vital-x-icon::before {
	transform: translate(-50%, -50%) rotate(45deg);
}

.vital-x-icon::after {
	transform: translate(-50%, -50%) rotate(-45deg);
}

.lb-close {
	color: var(--c-primary) !important;
}

.lb-close:hover {
	color: #fff !important;
}

@media (max-width: 767px) {
	.album-carousel {
		padding: 0 26px;
	}
}

/* Flatsome's global button reset (min-height/padding) inflates the round
   search button when .page-search sits outside .page-head; force the
   compact circular size everywhere it's used. */
.page-search {
	margin: 0 0 24px;
}

.page-search button {
	padding: 0 !important;
	margin: 0 !important;
	min-height: 0 !important;
	min-width: 0 !important;
	line-height: 1 !important;
}

/* Safari/Chrome add native OS chrome (rounded box + shadow + cancel
   button) to input[type=search] unless appearance is explicitly reset,
   which shows up as a second box around the custom pill. */
.page-search input[type="search"] {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	box-shadow: none;
	border-radius: 0;
}

.page-search input[type="search"]::-webkit-search-decoration,
.page-search input[type="search"]::-webkit-search-cancel-button,
.page-search input[type="search"]::-webkit-search-results-button,
.page-search input[type="search"]::-webkit-search-results-decoration {
	display: none;
}

.vital-page {
	background: #fff;
}

.vital-page .container {
	max-width: var(--container);
}

.vital-page a {
	text-decoration: none;
}

.page-template-page-blank #content,
.single-vital_program #content,
.single-vital_knowledge #content,
.single-vital_news #content {
	padding: 0;
}

.page-template-page-blank .entry-content,
.page-template-page-blank .entry-content > p {
	margin: 0;
}

.header-wrapper,
.header-main {
	background: #fff;
}

.header-top,
.header-search,
.element-error,
.top-divider,
.footer-primary .footer-nav {
	display: none !important;
}

.header-main {
	border-bottom: none;
}

/* Login/CTA area in Header Main (right of logo): VI/EN toggle (native "HTML"
   element) + "Button 1"/"Button 2" (native Header Builder button elements). */
.header-main .header-nav-main,
.header-main .header-nav-main > li,
.header-main .header-button,
.header-main .header-divider {
	background: transparent !important;
}

.header-main .header-nav-main > li.html {
	display: flex;
	align-items: center;
}

.header-main .lang-toggle {
	margin-right: 4px;
}

/* =====================================================================
   NÚT CHUYỂN NGÔN NGỮ VI / EN
   Feedback lần 3: "Hiện tại đang lệch vị trí chia đôi và ko có En. Mong
   muốn khi có thêm En chia đều vị trí 2 bên Vi-En để nhìn cân đối".

   Bản cũ ẩn hẳn nút không được chọn (.lang-toggle button[aria-pressed=false]
   {display:none} trong vital-html.css) nên chỉ còn đúng chữ "VI" nằm lệch
   trong cái vỏ pill. Bản mới dựng bằng thẻ <a> (xem shortcode
   [vital_lang_switch]) nên quy tắc ẩn cũ — vốn chỉ nhắm <button> — không
   còn chạm tới, và hai nửa được ép bằng nhau bằng flex:1 + min-width chung
   thay vì để bề rộng chạy theo độ dài chữ.
   ===================================================================== */
.lang-toggle {
	align-items: stretch;
	background: #fff;
	border: 1px solid var(--c-border);
	border-radius: var(--radius-pill);
	display: inline-flex;
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
	overflow: hidden;
}

.lang-toggle__btn {
	align-items: center;
	background: transparent;
	color: var(--c-muted);
	display: flex;
	/* flex:1 + flex-basis 0 + min-width chung = hai nửa luôn rộng bằng nhau,
	   kể cả khi một mã ngôn ngữ hiển thị rộng hơn mã kia. */
	flex: 1 1 0;
	justify-content: center;
	min-width: 46px;
	padding: 8px 4px;
	text-align: center;
	transition: background var(--transition), color var(--transition);
}

.lang-toggle__btn + .lang-toggle__btn {
	border-left: 1px solid var(--c-border);
}

.lang-toggle__btn:hover {
	background: var(--c-bg-alt);
	color: var(--c-primary);
}

.lang-toggle__btn.is-active,
.lang-toggle__btn.is-active:hover {
	background: var(--c-primary);
	color: #fff;
}

/* Ngoài header chỉ hiện mã VI/EN cho gọn; tên đầy đủ dành cho menu mobile. */
.lang-toggle__name {
	display: none;
}

/* Bản trong menu off-canvas: trải hết bề ngang ngăn kéo và kèm tên đầy đủ,
   vì trên mobile không có tooltip để đoán "VI"/"EN" là gì. */
.mobile-sidebar-lang {
	padding: 0 20px 18px;
}

.lang-toggle--wide {
	display: flex;
	font-size: 14px;
	width: 100%;
}

.lang-toggle--wide .lang-toggle__btn {
	gap: 7px;
	padding: 11px 6px;
}

.lang-toggle--wide .lang-toggle__code {
	font-weight: 800;
	letter-spacing: .04em;
}

.lang-toggle--wide .lang-toggle__name {
	display: inline;
	font-size: 13px;
	font-weight: 600;
}

.header-button .button {
	text-transform: none;
	letter-spacing: normal;
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	min-height: 0;
	padding: 9px 18px;
	margin: 0;
}

.header-button-1 .button.is-link {
	color: var(--c-text);
	background: none;
	padding-left: 0;
	padding-right: 0;
}

.header-button-1 .button.is-link:hover {
	color: var(--c-primary);
}

/* Nút "Tham gia VITAL" dùng màu xanh lá thương hiệu (--c-green), đúng
   bằng màu nhãn "Tài nguyên" trên trang chủ. Đây là nút hành động chính
   nên để khác màu xanh dương của header/menu cho nổi bật hẳn lên. */
.header-button-2 .button {
	background: var(--c-green) !important;
	color: #fff !important;
	font-weight: 700;
	border: none;
}

.header-button-2 .button:hover {
	background: var(--c-green-90) !important;
}

/* In the mobile sidebar it sits right under "Đăng nhập" (header-button-1,
   full-width pill) but was left at its default content-width sizing —
   match the same full-width/padding treatment so the two line up. */
.mobile-sidebar .header-button-2 {
	padding: 0 30px 20px;
}

.mobile-sidebar .header-button-2 .button {
	width: 100%;
	padding: 11px 20px !important;
	min-height: 0;
	justify-content: center;
}

/* Absolute footer: two-line bottom bar matching source design */
.absolute-footer {
	background: var(--c-primary-90);
	color: #ffffffb3;
	border-top: 1px solid #ffffff33;
	padding: 20px 0;
	font-size: 13px;
}

.absolute-footer .container {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 16px;
}

.absolute-footer .footer-primary,
.absolute-footer .footer-secondary {
	float: none;
	padding: 0;
}

.absolute-footer a,
.absolute-footer .copyright-footer,
.absolute-footer .footer-text {
	color: #ffffffb3;
}

@media (max-width: 549px) {
	.absolute-footer .footer-text {
		font-size: 10px;
		letter-spacing: -0.01em;
		white-space: nowrap;
	}
}

/* =====================================================================
   KHUNG ẢNH "ĐỘI NGŨ CHUYÊN GIA" / "ĐỘI NGŨ GIẢNG VIÊN"
   Feedback lần 3: "Tỷ lệ khung ảnh 3:4 chưa đúng. Hiện tải ảnh 4x6 bị mất
   1 phần".

   Bản cũ để height:340px cố định, trong khi thẻ rộng ~381px ở bố cục 3 cột
   — tức khung thực tế là 1,12:1 (nằm NGANG), không phải 3:4 (đứng). Ảnh
   chân dung 4x6 (tỷ lệ 2:3) nhét vào khung ngang đó bị object-fit/cover cắt
   khoảng 40% chiều cao, chia đều trên–dưới, nên mất luôn cả đỉnh đầu.

   Đặt đúng aspect-ratio 3/4 thì phần dôi ra chỉ còn ~17%, và neo về mép
   trên (center top) để phần bị cắt rơi hết xuống dưới ngực — chỗ duy nhất
   cắt được ở ảnh chân dung mà không hỏng bố cục khuôn mặt.
   ===================================================================== */
.faculty .ph {
	aspect-ratio: 3 / 4;
	background-position: center top;
	height: auto;
}

.faculty-carousel {
	position: relative;
}

@media (max-width: 700px) {
	.faculty-carousel .ac-arrow--left {
		left: -6px;
	}

	.faculty-carousel .ac-arrow--right {
		right: -6px;
	}
}

.header-main .header-inner {
	min-height: 88px;
}

.header-main #logo {
	align-items: center;
	display: flex;
	min-height: 88px;
}

/* Logo enlarged (desktop only) so the tagline baked into the image itself
   is legible without a separate HTML tagline element next to it. Explicit
   transition so the shrink to the sticky-header size (70px, set by the
   Customizer's own inline CSS) animates smoothly instead of snapping —
   client reported the sticky header feeling "janky" on scroll. */
/* Flatsome auto-generates an inline "#logo{width:200px}" rule from the
   Customizer logo setting — that container width was the real ceiling on
   visual logo size (object-fit:contain fits inside whichever of width/height
   is tighter), not the img's own max-height below. Override it so height is
   the only constraint. */
#logo {
	width: auto !important;
	max-width: 320px !important;
}

.header-main #logo img {
	height: auto !important;
	max-height: 114px !important;
	object-fit: contain;
	transition: max-height 0.3s ease;
	width: auto !important;
}

.header-main,
.header-main .header-inner,
#logo {
	transition: height 0.3s ease, min-height 0.3s ease;
}

.header-bottom .nav > li > a {
	font-family: var(--font-base);
	font-weight: 700;
	letter-spacing: 0;
}

.header-main .header-logo a,
.header-main .logo a {
	color: var(--c-primary);
	font-family: var(--font-base);
	font-size: 28px;
	font-weight: 800;
	letter-spacing: 0;
}

.header-bottom {
	background: var(--c-primary) !important;
	min-height: 58px;
}

.header-bottom .nav > li > a {
	color: #fff;
	font-size: 16px;
	min-height: 58px;
	padding: 0 18px;
}

.header-bottom .nav > li.active > a,
.header-bottom .nav > li.current-menu-item > a,
.header-bottom .nav > li > a:hover {
	background: rgba(255, 255, 255, .12);
	color: #fff;
}

.vital-logo-inline {
	align-items: center;
	color: var(--c-primary);
	display: inline-flex;
	font-size: 26px;
	font-weight: 800;
	gap: 10px;
}

.vital-logo-inline::before {
	background: var(--grad-highlight);
	border-radius: 9px;
	color: #fff;
	content: "V";
	display: grid;
	font-size: 18px;
	height: 40px;
	place-items: center;
	width: 40px;
}

/* Footer content is a Flatsome "Blocks" (UX Builder) post assigned via footer_block. */
.vital-footer-section {
	color: rgba(255, 255, 255, .86);
}

.vital-footer-section a {
	color: rgba(255, 255, 255, .86);
}

.vital-footer-section a:hover {
	color: #fff;
}

.vital-footer__logo {
	align-items: center;
	color: #fff;
	display: inline-flex;
	font-size: 24px;
	font-weight: 800;
	gap: 10px;
	margin-bottom: 14px;
}

.vital-footer__logo .brand-mark {
	background: rgba(255, 255, 255, .16);
	border-radius: 9px;
	color: #fff;
	display: grid;
	height: 40px;
	width: 40px;
	place-items: center;
	font-size: 16px;
}

.vital-footer-col h4 {
	color: #fff;
	font-size: 15px;
	letter-spacing: .08em;
	margin-bottom: 14px;
	text-transform: uppercase;
}

.vital-footer-col ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.vital-footer-col li {
	margin-bottom: 8px;
}

.vital-post-grid {
	display: grid;
	gap: var(--space-card-gap);
	grid-template-columns: repeat(3, 1fr);
}

.vital-post-grid--list {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.vital-post-grid .card .ph,
.vital-post-grid--list .post-item .ph {
	background-position: center;
	background-size: cover;
}

/* "Liên hệ VITAL" Contact Form 7 form styling, matching the source design's inputs */
/* Bỏ max-width:520px của bản cũ (hồi form đứng một mình giữa trang). Ở bố
   cục 2 cột mới, form nằm trong cột riêng rồi — giữ giới hạn 520px khiến
   form hụt 105px so với bề rộng cột, làm lề phải trang trông rộng hơn hẳn
   lề trái. Để form lấp đủ cột thì hai bên mới cân. */
.vital-cf7-wrap {
	width: 100%;
}

.vital-cf7-wrap .wpcf7-form {
	display: grid;
	gap: 14px;
}

.vital-cf7-wrap input[type="text"],
.vital-cf7-wrap input[type="email"],
.vital-cf7-wrap input[type="tel"],
.vital-cf7-wrap select,
.vital-cf7-wrap textarea {
	border: 1.5px solid var(--c-border);
	border-radius: var(--radius-input);
	font: inherit;
	font-size: 16px;
	padding: 13px 16px;
	width: 100%;
	box-sizing: border-box;
	color: var(--c-text);
}

.vital-cf7-wrap textarea {
	min-height: 110px;
	resize: vertical;
}

.vital-cf7-wrap .wpcf7-list-item {
	margin-left: 0;
}

.vital-cf7-wrap .wpcf7-form-control-wrap {
	display: block;
}

/* Once vital-wp.js wraps a <select> in the .program-select combobox
   (trigger + searchable panel), hide the native control visually but
   keep it in the DOM so its value still submits with the CF7 form. */
.program-select {
	position: relative;
}

/* Client feedback: don't uppercase the "Chọn chương trình quan tâm" text. */
.program-select-trigger,
.program-select-option,
.vital-cf7-wrap select {
	text-transform: none;
}

.program-select .wpcf7-form-control-wrap.program-select-native {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.vital-cf7-wrap input[type="submit"] {
	justify-self: start;
}

/* Flatsome's global [type=submit] reset (uppercase text, bold weight,
   tall line-height/min-height, inset-shadow hover) fights with the
   .btn/.btn--primary classes already on the CF7 submit input, since it
   ties on specificity and wins on some properties .btn doesn't set —
   making "Gửi liên hệ" look different from every other button on the
   site. Force it back in line with the rest of the .btn--primary style. */
.vital-cf7-wrap input[type="submit"].btn {
	border-radius: var(--radius-pill) !important;
	font-weight: 600 !important;
	letter-spacing: .02em !important;
	line-height: normal !important;
	min-height: 0 !important;
	padding: 14px 30px !important;
	text-transform: none !important;
}

/* Belt-and-suspenders: Flatsome's own [type=submit] rule sets
   background-color from --fs-color-primary (its own theme color, a
   different blue than this site's --c-primary), and ties with
   .btn--primary on specificity. Make the color explicit instead of
   relying on cascade order to keep "Gửi liên hệ" matching every other
   .btn--primary on the site. */
.vital-cf7-wrap input[type="submit"].btn--primary {
	background: var(--c-primary) !important;
	color: #fff !important;
}

.vital-cf7-wrap input[type="submit"].btn--primary:hover {
	background: var(--c-primary-90) !important;
	box-shadow: none !important;
}

.vital-cf7-wrap .wpcf7-not-valid-tip {
	color: var(--c-error);
	display: block;
	font-size: 13px;
	margin-top: 4px;
	position: static;
}

/* Pair the text tip with a red border on the actual invalid field —
   client reported the required-field validation looking wrong; CF7 marks
   invalid inputs with aria-invalid="true" but this site's inputs didn't
   visually react to it before. */
.vital-cf7-wrap input[aria-invalid="true"],
.vital-cf7-wrap textarea[aria-invalid="true"] {
	border-color: var(--c-error) !important;
}

/* "Thông tin liên hệ" column on the Liên hệ page: the office/email text
   sat next to a barely-visible watermark illustration (opacity: .38 in
   the source design's .contact-illust). Give the details an icon-list
   treatment and pair them with a real photo instead. */
.contact-card {
	background: var(--c-bg-alt);
	border: 1px solid var(--c-border);
	border-radius: var(--radius-card);
	padding: 20px 22px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.contact-info-item {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 15px;
	color: var(--c-text);
}

.contact-info-item a {
	color: var(--c-text);
}

.contact-info-item a:hover {
	color: var(--c-primary);
}

.contact-info-item .ico {
	width: 36px;
	height: 36px;
	border-radius: 10px;
	background: var(--c-primary-12);
	color: var(--c-primary);
	display: grid;
	place-items: center;
	flex-shrink: 0;
}

/* Trang Liên hệ dựng lại theo mẫu isqua: ẢNH bên trái — NỘI DUNG bên
   phải. Giữ nguyên 3 thành phần cũ (form, thông tin liên hệ, ảnh). */
.contact-layout {
	display: grid;
	grid-template-columns: 0.9fr 1.1fr;
	gap: 56px;
	align-items: start;
}

.contact-side {
	display: flex;
	flex-direction: column;
	gap: 22px;
}

.contact-side__title {
	margin: 0;
}

/* Điểm nhấn của mẫu: ảnh bo góc trên–phải cong lớn, ba góc còn lại bo nhẹ.
   Ảnh để khổ NGANG giống mẫu — bản trước để khổ dọc (4/5) nên cùng một độ
   cong lại trông gắt và thô, vì đường cong chiếm phần lớn cạnh ngắn.
   Dùng đơn vị % cho góc cong để nó luôn cân theo bề ngang ảnh ở mọi khổ
   màn hình, thay vì số px cố định. */
.contact-visual {
	border-radius: 14px 22% 14px 14px;
	overflow: hidden;
	box-shadow: var(--shadow-card);
	aspect-ratio: 4 / 3;
}

.contact-visual .contact-photo {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .5s ease;
}

@media (hover: hover) {
	.contact-visual:hover .contact-photo {
		transform: scale(1.04);
	}
}

@media (max-width: 900px) {
	.contact-layout {
		grid-template-columns: 1fr;
		gap: 32px;
	}
	.contact-visual {
		border-radius: 14px 20% 14px 14px;
		aspect-ratio: 16 / 10;
	}
}

.vital-cf7-wrap .wpcf7-response-output {
	border-radius: var(--radius-input);
	font-size: 14px;
	margin: 12px 0 0;
}

@media (max-width: 900px) {
	.vital-post-grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 767px) {
	.header-main .flex-row {
		min-height: 72px;
	}

	/* Logo mobile — feedback lần 3: "Vẫn muốn tăng sai trên mobile to lên
	   vài saize nữa".

	   Bề rộng mới đây mới là thứ quyết định, không phải max-height: file
	   logo là 709x110 (rất dẹt), nên ở mọi cỡ máy điện thoại nó luôn chạm
	   giới hạn chiều ngang trước. Vì vậy dùng calc theo bề ngang màn hình
	   thay cho một con số cứng: 100vw trừ đi đúng phần đã bị chiếm chỗ —
	   30px lề .container + 44px cột nút hamburger + 30px lề hai bên của
	   .medium-logo-center .logo. Nhờ vậy máy càng rộng logo càng lớn, còn
	   máy hẹp (360px trở xuống) thì tự co lại chứ không đẩy tràn hàng.
	   Chặn trên 340px để trên tablet nhỏ logo không phình quá cỡ.
	   Ở 375px: 271px (cao ~42px) so với 220px (cao ~34px) của bản cũ. */
	#logo {
		max-width: min(340px, calc(100vw - 104px)) !important;
	}

	.header-main #logo img {
		max-height: 64px !important;
		width: auto !important;
	}

	/* Customizer đặt .header-main{height:90px} (và 70px dưới 549px) — chiều
	   cao CỐ ĐỊNH, nên logo cao hơn sẽ bị tràn ra ngoài nền trắng của
	   header. Trả về auto và điều chỉnh chiều cao tối thiểu ở hàng bên
	   trong để header tự cao theo logo. */
	.header-main {
		height: auto !important;
	}

	.header-main .header-inner {
		min-height: 84px;
	}

	.header-main #logo {
		justify-content: center;
		min-height: 84px;
	}

	/* Flatsome's .medium-logo-center gives .flex-left / .flex-right
	   flex:1 1 0 so the centered logo sits balanced between two equal
	   side columns. This hamburger button used to override that with
	   position:absolute — taking it out of flow entirely — which left
	   the (still flex:1) empty .flex-right column to gobble up all the
	   leftover space alone, dragging the centered logo left until it
	   sat underneath this now-floating button. Give it a fixed flex
	   basis instead so it still reserves real space in the row. */
	/* This used to be a solid blue block (var(--c-primary)) behind the
	   hamburger icon — client feedback flagged it as looking like a
	   rendering bug. It only ever needed to be a plain icon button; the
	   fixed flex-basis below is just to keep the logo balanced (see
	   comment above), not to reserve room for a colored background. */
	/* 48px → 44px: nhường thêm 4px cho logo vừa phóng to, vẫn đạt ngưỡng
	   vùng chạm tối thiểu 44px. */
	.header-main .show-for-medium.flex-left {
		align-items: center;
		background: transparent;
		display: flex;
		flex: 0 0 44px;
		height: auto;
		justify-content: center;
		width: 44px;
	}

	.header-main .show-for-medium.flex-left .nav-icon a {
		color: var(--c-primary);
		min-height: 44px;
		width: 44px;
	}

	.vital-page .hero {
		padding-top: 56px;
	}

	.vital-page .hero .container,
	.vital-page .hero-shell,
	.vital-page .hero-content,
	.vital-page .hero .lead,
	.vital-page .hero-actions {
		max-width: 100% !important;
		min-width: 0 !important;
		width: 100% !important;
	}

	.vital-page .hero h1 {
		font-size: 38px;
		max-width: 100% !important;
		overflow-wrap: normal;
		width: 100% !important;
	}

	.vital-page .hero .hl {
		display: inline-block;
		max-width: 100%;
		white-space: normal;
	}

	.vital-page .hero .btn {
		max-width: 100%;
		width: 100%;
	}
}

/* Client feedback: menu items should visibly change color on hover
   (referencing isqua.org's nav treatment: light accent on a dark navy
   bar). header-bottom-nav sits on a bar whose background is literally
   var(--c-primary), so an earlier version of this rule that changed the
   hover color TO var(--c-primary) made the text vanish into its own
   background instead of standing out — use the site's cyan accent
   instead, which reads clearly against that dark background. */
@media (hover:hover) {
	.header-nav-main > li > a:hover {
		color: var(--c-primary) !important;
	}
	.header-bottom-nav > li > a:hover {
		color: var(--c-cyan) !important;
	}
}

/* Khối "Tổng quan" ở trang chi tiết Chương trình đào tạo: chữ trái — ảnh
   phải. Chữ chỉ là bản tóm tắt (xem single-vital_program.php) nên hai cột
   luôn cân nhau, không còn cảnh cột chữ dài lê thê kéo ảnh lệch hẳn lên
   như bản trước. */
.program-intro {
	display: grid;
	grid-template-columns: 1.05fr 0.95fr;
	gap: 48px;
	align-items: center;
}

/* Khoang trong duoi khoi Tong quan qua rong (89px) khi cot anh va cot chu
   lech chieu cao — thu gon lai cho lien mach voi muc "Doi ngu giang vien"
   ben duoi. Chi ap cho section nay, khong dung toi cac trang khac dung
   chung .section--after-article. */
.section--program-intro {
	padding-bottom: 26px;
}

/* Khoi toan van nam sat ngay duoi khoi tom tat nen khong can padding tren */
.section--program-body {
	padding-top: 0;
}

/* Chua co anh dai dien: khung nen xam tuong trung, giu nguyen 2 cot */
.program-intro__media--empty {
	background: #eef1f4;
	border: 1px dashed #cfd6dd;
	display: grid;
	place-items: center;
	box-shadow: none;
}

.program-intro__media--empty svg {
	width: 56px;
	height: 56px;
	fill: #c3ccd5;
}

.program-intro__text p {
	margin: 0;
	font-size: 17px;
	line-height: 1.85;
	color: var(--c-text);
}

.program-intro__media {
	border-radius: var(--radius-card);
	overflow: hidden;
	box-shadow: var(--shadow-card);
	aspect-ratio: 16 / 10;
}

.program-intro__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .5s ease;
}

@media (hover: hover) {
	.program-intro__media:hover img {
		transform: scale(1.04);
	}
}

@media (max-width: 900px) {
	.program-intro {
		grid-template-columns: 1fr;
		gap: 26px;
	}
	/* Giu thu tu CHU truoc - ANH sau tren mobile, dong bo voi cac khoi
	   2 cot khac cua site (Su menh/Tam nhin/Gia tri cot loi). */
	.program-intro__media {
		aspect-ratio: 16 / 10;
	}
}

/* ---------------------------------------------------------------------
   Định dạng thân bài viết (.article-body) — dùng chung cho chi tiết
   Chương trình đào tạo, Tin tức và Album ảnh.
   Trước đây gần như không có style: ảnh dán sát chữ, không bo góc, tiêu
   đề phụ và danh sách trong bài không được định dạng nên nhìn rất thô.
   --------------------------------------------------------------------- */

/* Ảnh trong bài: tách hẳn khỏi chữ, bo góc + đổ bóng nhẹ cho ra dáng
   khối riêng thay vì bức ảnh dán thẳng vào đoạn văn. */
.article-body img {
	width: 100%;
	height: auto;
	display: block;
	margin: 36px 0;
	border-radius: var(--radius-card);
	box-shadow: var(--shadow-card);
}

/* Ảnh có chú thích: gom ảnh + chú thích thành một khối, chú thích nằm
   ngay dưới ảnh (không bị margin 36px của ảnh đẩy ra xa). */
.article-body figure {
	margin: 36px 0;
}

.article-body figure img {
	margin: 0;
}

.article-body figcaption,
.article-body .wp-caption-text {
	color: var(--c-muted);
	font-size: 14px;
	font-style: italic;
	line-height: 1.6;
	margin-top: 10px;
	text-align: center;
}

/* Tiêu đề phụ trong bài */
.article-body h2,
.article-body h3,
.article-body h4 {
	color: var(--c-text);
	line-height: 1.3;
	margin: 36px 0 14px;
}

.article-body h2 { font-size: 26px; }
.article-body h3 { font-size: 21px; }
.article-body h4 { font-size: 18px; }

.article-body > *:first-child {
	margin-top: 0;
}

/* Danh sách trong bài */
.article-body ul,
.article-body ol {
	margin: 0 0 20px;
	padding-left: 26px;
}

.article-body li {
	font-size: 18px;
	line-height: 1.85;
	margin-bottom: 8px;
}

/* Trích dẫn trong bài */
.article-body blockquote {
	border-left: 4px solid var(--c-primary);
	background: var(--c-bg-alt);
	border-radius: 0 var(--radius-card) var(--radius-card) 0;
	margin: 32px 0;
	padding: 18px 24px;
	font-size: 18px;
	font-style: italic;
	color: var(--c-primary-90);
}

.article-body blockquote p:last-child {
	margin-bottom: 0;
}

.article-body a {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.article-body table {
	border-collapse: collapse;
	width: 100%;
	margin: 28px 0;
	font-size: 16px;
}

.article-body th,
.article-body td {
	border: 1px solid var(--c-border);
	padding: 10px 14px;
	text-align: left;
}

.article-body th {
	background: var(--c-bg-alt);
	font-weight: 700;
}

/* Đường kẻ mảnh phía trên khối toàn văn, để việc khối này hẹp hơn khối
   tóm tắt bên trên trông là chủ ý phân tách chứ không phải lệch lỗi. */
.section--program-body .article-detail {
	border-top: 1px solid var(--c-border);
	padding-top: 36px;
}

@media (max-width: 767px) {
	.article-body img,
	.article-body figure {
		margin: 24px 0;
	}
	.article-body h2 { font-size: 22px; }
	.article-body h3 { font-size: 19px; }
	.article-body li { font-size: 17px; }
}

/* =====================================================================
   HIỆU ỨNG XUẤT HIỆN KHI CUỘN TRANG
   Chỉ chạy khi trình duyệt hỗ trợ IntersectionObserver và người dùng KHÔNG
   bật chế độ giảm chuyển động. Thiếu điều kiện nào -> không phần tử nào
   được gắn class, nội dung hiện bình thường.

   Đối tượng người đọc chính là lãnh đạo bệnh viện, phần nhiều lớn tuổi,
   nên cố ý chọn biên độ nhỏ (dịch lên 18px) và tốc độ vừa phải — đủ tạo
   cảm giác mượt và có chủ ý, không gây phân tán hay chóng mặt.
   ===================================================================== */
/* Hiệu ứng chỉ gắn qua class .vital-fx do JS thêm vào, và JS CHỈ thêm cho
   phần tử đang nằm DƯỚI màn hình (người dùng chưa nhìn thấy). Vì vậy:
   - Không có chuyện nội dung hiện rồi bị ẩn (nháy) như bản trước.
   - Nếu JS lỗi / bị chặn: không phần tử nào bị ẩn, trang vẫn đầy đủ.
   Đây là điểm khác cốt lõi so với cách "ẩn hết bằng CSS rồi mới hiện". */
.vital-fx {
	opacity: 0;
	transform: translateY(18px);
	/* cubic-bezier kiểu "ease-out" mềm: bung nhanh lúc đầu rồi chậm dần lại */
	transition: opacity .7s cubic-bezier(.22, .61, .36, 1),
	            transform .7s cubic-bezier(.22, .61, .36, 1);
	will-change: opacity, transform;
}

/* Ảnh ở khối 2 cột trượt ngang thay vì trồi lên — tạo nhịp so le với cột chữ */
.vital-fx--right { transform: translateX(26px); }
.vital-fx--left  { transform: translateX(-26px); }

.vital-fx.is-in {
	opacity: 1;
	transform: none;
	will-change: auto;
}

/* Header nổi khối hơn một chút khi bắt đầu cuộn, để tách bạch với nội dung
   phía sau — thay vì luôn phẳng lì. */
.header-wrapper.stuck,
.header.vital-scrolled {
	box-shadow: 0 4px 18px rgba(20, 32, 50, .1);
	transition: box-shadow .35s ease;
}

@media (prefers-reduced-motion: reduce) {
	.vital-fx {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}

/* =====================================================================
   MÀU THẺ (TAG) VÀ BỘ LỌC THẺ
   Feedback lần 3: "Các tag hiển thị màu mè nhẹ nhàng cho khác nhau chút
   nhìn cho nổi bật. Đừng để màu chói quá nhé, theo tông màu chủ đạo thôi".

   Bản cũ mọi thẻ đều một màu xanh ngọc đặc (--c-cyan) chữ trắng — vừa
   không phân biệt được thẻ nào với thẻ nào, vừa khá chói khi nhiều thẻ
   đứng cạnh nhau. Ở đây mỗi thẻ nhận một trong 6 biến thể lấy từ chính
   bảng màu thương hiệu, nền pha loãng ~12-18% và chữ là màu đó đã đằm
   xuống cho đủ tương phản đọc.

   Màu gán theo crc32 của slug (xem vital_tag_color_class trong PHP) nên
   một thẻ luôn giữ đúng một màu ở mọi trang; thêm hay bớt thẻ khác không
   làm cả loạt đổi màu theo.

   Ba biến đặt trên chính class màu, để nhãn thẻ (.tag) và chip lọc
   (.chip--filter) dùng chung một nguồn, không phải khai báo hai lần:
     --t-bg   nền pha loãng
     --t-ink  màu chữ
     --t-line màu viền
   ===================================================================== */
.tag--c1 { --t-bg: #316e8d1f; --t-ink: #255569; --t-line: #316e8d66; }
.tag--c2 { --t-bg: #56c5d029; --t-ink: #0f6a73; --t-line: #56c5d0a6; }
.tag--c3 { --t-bg: #8ac8652e; --t-ink: #4c7a33; --t-line: #8ac865a6; }
.tag--c4 { --t-bg: #5b7fa61f; --t-ink: #3d5f80; --t-line: #5b7fa666; }
.tag--c5 { --t-bg: #2f8f8a1f; --t-ink: #256b67; --t-line: #2f8f8a66; }
.tag--c6 { --t-bg: #b8873c1f; --t-ink: #82601f; --t-line: #b8873c73; }
/* "Nổi bật" giữ tông cam của thương hiệu nhưng đằm lại — nó cần nổi hơn
   các thẻ thường một chút, không cần nổi bằng nút bấm. */
.tag--featured { --t-bg: #f9a61833; --t-ink: #8a5a05; --t-line: #f9a618a6; }

.tag {
	background: var(--t-bg, var(--c-bg-alt));
	color: var(--t-ink, var(--c-text-muted));
	font-weight: 600;
}

/* .tag--featured trong vital-html.css còn ép font-size:11px và
   vertical-align:middle (di sản của thời nó nằm chèn trước tiêu đề). Giờ
   nó đứng cùng hàng với các thẻ khác nên phải cùng cỡ chữ. */
.tag--featured {
	font-size: 12px;
	vertical-align: baseline;
}

/* Hàng thẻ nằm trong dòng meta của trang chi tiết: để inline-flex mới nằm
   cùng dòng với ngày tháng thay vì rơi xuống dòng riêng. */
.article-meta .tags {
	display: inline-flex;
	vertical-align: middle;
}

/* --- Chip lọc ------------------------------------------------------- */

/* Nhiều thẻ thì hàng lọc dài, canh phải (mặc định của thiết kế gốc, hồi
   chỉ có 2 chip) làm các chip dồn cục về một góc và mắt phải quét ngược.
   Canh trái cho thẳng hàng với danh sách bên dưới. */
.filter-row {
	justify-content: flex-start;
}

.chip--filter[class*="tag--"] {
	background: #fff;
	border-color: var(--t-line);
	color: var(--t-ink);
}

.chip--filter[class*="tag--"]:hover {
	background: var(--t-bg);
	border-color: var(--t-line);
	color: var(--t-ink);
}

/* Trạng thái ĐANG CHỌN không chỉ dựa vào màu: chip nào đang bật cũng hiện
   thêm dấu "×" — vừa để người mù màu vẫn phân biệt được, vừa nói luôn rằng
   bấm lần nữa là tắt (bộ lọc này bật/tắt từng thẻ, không phải chọn một). */
.chip--filter[class*="tag--"].is-active {
	background: var(--t-bg);
	border-color: var(--t-line);
	box-shadow: inset 0 0 0 1px var(--t-line);
	color: var(--t-ink);
	font-weight: 700;
}

.chip--filter.is-active::after {
	content: "×";
	font-size: 14px;
	line-height: 1;
	margin-left: 6px;
	opacity: .7;
}

/* "Tất cả" chỉ là nút xóa hết lựa chọn, không phải một thẻ — nên không có
   dấu "×" và giữ nguyên kiểu tô đặc màu chủ đạo khi đang bật. */
.chip--all.is-active::after {
	content: none;
}

/* Feedback: chữ "Việt Nam" ở đoạn mô tả ngắn dưới tiêu đề trang (VD: trang
   Giới thiệu) bị tách xuống dòng lẻ vì .page-head .lead kế thừa
   max-width:760px dùng chung với .hero .lead (vital-html.css). Nới riêng
   cho khối đầu trang để câu đủ chỗ nằm trọn 1 dòng ở màn hình desktop. */
.page-head .lead {
	max-width: 880px;
}