/*
Component CSS cua profile "brochure" dang active. Nguon: Main.dc.html. Chi chua
(1) base reset dung o moi trang, (2) button/icon dung chung, (3) header/footer —
day la hai phan KHONG di qua Elementor (§3.2). Section noi dung trang (hero, stats,
card...) se thanh Elementor global class o buoc dung trang, khong nam trong file nay.

Breakpoint 1199px/767px phai KHOP voi VHSYSCO_BREAKPOINT_TABLET/MOBILE trong
core/compiler.php va gia tri da dong bo trong core/elementor-config.php.

CSS bien --* (:root va hai @media doi bien) do core/compiler.php sinh, nam o
assets/tokens.css + inline ngay sau no — KHONG lap lai o day, chi selector.
*/

/* KHONG dat overflow-x tren html/body — bien chung thanh scroll-container rieng,
   pha position:sticky cua .site-header (header "dinh" sai theo scroll noi bo cua
   body thay vi viewport that). Xac nhan bang Playwright 2026-08-25: header.rect
   di chuyen dung bang scroll amount thay vi dung yen o top:0. Neu can chan
   overflow-x thi bao trong 1 wrapper con, khong dat o day. */
* { box-sizing: border-box; }
body { margin: 0; font-family: var(--font-body); color: var(--color-ink); background: var(--color-white); }
img { max-width: 100%; display: block; }
a { color: var(--color-primary); text-decoration: none; }
a:hover { color: var(--color-secondary); }
h1, h2, h3, h4, p { margin: 0; }

.container { width: 100%; max-width: var(--container-max); margin-left: auto; margin-right: auto; padding-left: var(--container-pad); padding-right: var(--container-pad); box-sizing: border-box; }

/* Buttons */
.btn-primary, .btn-secondary, .btn-ghost {
	display: flex; align-items: center; justify-content: center; gap: var(--space-1);
	font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--text-body);
	padding: var(--space-2) var(--space-4); border-radius: var(--radius-full);
	border-width: var(--border-width-thick); border-style: solid; white-space: nowrap;
}
/* .btn-primary la nut hotline trong HEADER — Main.dc.html dong 111 ghi de rieng
   cho vi tri nay: font-body (khong phai display), weight 600 (khong phai 700),
   14px (khong phai 16px), padding 12px 22px (khong phai 16px 32px). Phat hien
   qua QC doc lap 2026-08-25. */
.btn-primary {
	background: var(--color-secondary); border-color: var(--color-secondary); color: var(--color-white);
	font-family: var(--font-body); font-weight: 600; font-size: 14px;
	padding: 12px 22px; border-width: 0;
}
.btn-primary:hover { background: var(--color-secondary-dark); border-color: var(--color-secondary-dark); color: var(--color-white); }
.btn-ghost { background: transparent; border-color: var(--color-white); color: var(--color-white); }
.btn-ghost:hover { background: var(--color-white); color: var(--color-primary); }
.btn-secondary { background: var(--color-white); border-color: var(--color-primary); color: var(--color-primary); }
.btn-secondary:hover { background: var(--color-cream); color: var(--color-primary-dark); }
.icon { width: 18px; height: 18px; flex-shrink: 0; }

/* Header */
.site-header { 
	position: sticky; 
	top: 0; 
	left: 0; 
	right: 0; 
	z-index: var(--z-header); 
	background: rgba(255, 255, 255, 0.98); 
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	border-bottom: 1px solid rgba(197, 160, 89, 0.25); 
	box-shadow: 0 4px 20px rgba(84, 21, 28, 0.05);
}
.header-inner { 
	display: flex; 
	align-items: center; 
	justify-content: space-between; 
	gap: clamp(16px, 2vw, 36px); 
	height: 90px; 
	width: 100%; 
	max-width: var(--header-max-width, 1560px); 
	margin-left: auto; 
	margin-right: auto; 
	padding-left: clamp(20px, 3vw, 48px); 
	padding-right: clamp(20px, 3vw, 48px); 
	box-sizing: border-box; 
}
.brand { 
	display: flex; 
	align-items: center; 
	gap: 16px; 
	text-decoration: none;
	flex-shrink: 0;
}
.brand-logo-img {
	height: 60px;
	width: auto;
	max-width: 320px;
	object-fit: contain;
	display: block;
	transition: height 0.25s ease, transform 0.25s ease;
}
.brand:hover .brand-logo-img {
	transform: scale(1.02);
}
@media (max-width: 991px) {
	.brand-logo-img {
		height: 50px;
		max-width: 260px;
	}
}
@media (max-width: 480px) {
	.brand-logo-img {
		height: 42px;
		max-width: 210px;
	}
}
.brand-emblem-wrap {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 62px;
	height: 62px;
	border-radius: 12px;
	background: #FAF6F0;
	border: 1px solid rgba(197, 160, 89, 0.35);
	padding: 4px;
	box-shadow: 0 2px 8px rgba(84, 21, 28, 0.06);
	flex-shrink: 0;
}
.brand-emblem { 
	height: 52px; 
	width: auto; 
	object-fit: contain; 
	display: block;
}
.brand-text-block {
	display: flex;
	flex-direction: column;
	gap: 2px;
	justify-content: center;
}
.brand-title {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: 24px;
	color: var(--color-primary);
	letter-spacing: 0.05em;
	text-transform: uppercase;
	line-height: 1.1;
}
.brand-tagline {
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 10.5px;
	color: var(--color-secondary-dark);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	line-height: 1.2;
}

@supports (animation-timeline: scroll()) {
	@keyframes vh-header-shrink {
		from { height: 90px; }
		to { height: 72px; }
	}
	@keyframes vh-header-logo-shrink {
		from { width: 62px; height: 62px; }
		to { width: 50px; height: 50px; }
	}
	@keyframes vh-header-shadow-grow {
		from { box-shadow: 0 0 0 rgba(28,31,38,0); }
		to { box-shadow: 0 4px 20px rgba(84, 21, 28, 0.1); }
	}
	.header-inner { animation: vh-header-shrink linear both; animation-timeline: scroll(root block); animation-range: 0 100px; }
	.brand-emblem-wrap { animation: vh-header-logo-shrink linear both; animation-timeline: scroll(root block); animation-range: 0 100px; }
	.site-header { animation: vh-header-shadow-grow linear both; animation-timeline: scroll(root block); animation-range: 0 100px; }
}
@media (prefers-reduced-motion: reduce) {
	.header-inner, .brand-emblem-wrap, .site-header { animation: none !important; }
}

.nav { display: flex; align-items: center; justify-content: center; flex: 1; margin: 0 clamp(8px, 1.5vw, 24px); }
.nav .nav-menu { display: flex; align-items: center; justify-content: center; gap: clamp(16px, 1.8vw, 32px); list-style: none; margin: 0; padding: 0; }
.nav .nav-menu li { list-style: none; }
.nav .nav-menu a { position: relative; font-family: var(--font-body); font-weight: 700; font-size: 13.5px; text-transform: uppercase; letter-spacing: 0.06em; color: #54151C; padding: 8px 6px; text-decoration: none; white-space: nowrap; transition: color 0.2s ease; }
.nav .nav-menu a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 2px; background: #C5A059; transition: right 0.25s ease; }
.nav .nav-menu a:hover::after, .nav .nav-menu .current-menu-item > a::after { right: 0; }
.nav .nav-menu a:hover { color: #9E7D3B; }
.nav .nav-menu .current-menu-item > a { color: #54151C; font-weight: 800; }
.header-actions { display: flex; align-items: center; gap: clamp(12px, 1.4vw, 24px); flex-shrink: 0; }
.lang-switch { display: flex; align-items: center; gap: 3px; background: var(--color-cream-dark); border-radius: var(--radius-full); padding: 4px; }
.lang-pill { padding: 5px 11px; border-radius: var(--radius-full); font-size: 11.5px; font-weight: var(--weight-bold); letter-spacing: 0.02em; font-family: var(--font-body); cursor: pointer; transition: background 0.2s ease, color 0.2s ease; }
.lang-pill.is-active { background: var(--color-primary); color: var(--color-white); }
.lang-pill.is-soon { color: var(--color-ink-faint); cursor: default; }
@media (max-width: 1080px) { .lang-switch { display: none; } }
.nav-toggle { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 40px; height: 40px; background: transparent; border-width: 0; cursor: pointer; }
.nav-toggle-bar { width: 22px; height: 2px; background: var(--color-ink); border-radius: var(--radius-full); }

/* Toggle mobile menu — checkbox+label thuan CSS, khong JS (xem parts/header-standard.php) */
.nav-toggle-input { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; }
.nav-mobile { display: none; flex-direction: column; padding-top: var(--space-1); padding-bottom: var(--space-2); border-top-width: var(--border-width); border-top-style: solid; border-top-color: var(--color-border); }
.nav-toggle-input:checked ~ .nav-mobile { display: flex; }
.nav-mobile-list { display: flex; flex-direction: column; list-style: none; margin: 0; padding: 0; }
.nav-mobile-list li { list-style: none; }
.nav-mobile-list a { display: block; padding-top: var(--space-2); padding-bottom: var(--space-2); font-family: var(--font-body); font-weight: var(--weight-medium); font-size: var(--text-h4); color: var(--color-ink); border-bottom-width: var(--border-width); border-bottom-style: solid; border-bottom-color: var(--color-border); }
.nav-mobile-list li:last-child a { border-bottom-width: 0; }
.nav-mobile-list .current-menu-item > a { color: var(--color-secondary); }
.nav-mobile-cta { margin-top: var(--space-2); width: 100%; }

/* Footer */
.site-footer { 
	background: #1F0508; 
	color: #FAF6F0; 
	border-top: 2px solid rgba(197, 160, 89, 0.35);
}
.footer-inner { 
	display: grid; 
	grid-template-columns: 1.5fr 1.05fr 1.25fr 1.05fr; 
	gap: clamp(24px, 3vw, 48px); 
	padding-top: var(--space-7); 
	padding-bottom: var(--space-6); 
	max-width: var(--footer-max-width, 1440px);
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	padding-left: clamp(20px, 3.5vw, 56px);
	padding-right: clamp(20px, 3.5vw, 56px);
	box-sizing: border-box;
}
.footer-col { 
	display: flex; 
	flex-direction: column; 
	gap: 12px; 
}
.footer-brand { }
.footer-brand-link {
	display: inline-block;
	text-decoration: none;
	margin-bottom: var(--space-2);
}
.footer-logo-img {
	height: 60px;
	width: auto;
	max-width: 310px;
	object-fit: contain;
	display: block;
	transition: opacity 0.25s ease;
}
.footer-brand-link:hover .footer-logo-img {
	opacity: 0.92;
}
@media (max-width: 480px) {
	.footer-logo-img {
		height: 48px;
		max-width: 250px;
	}
}
.footer-brand-row { 
	display: flex; 
	align-items: center; 
	gap: 14px; 
}
.footer-emblem-wrap {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(197, 160, 89, 0.3);
	padding: 4px;
	flex-shrink: 0;
}
.footer-emblem { 
	height: 44px; 
	width: auto; 
	object-fit: contain; 
}
.footer-brand-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.footer-brand-name { 
	font-family: var(--font-display); 
	font-weight: 800; 
	font-size: 22px; 
	color: #FFFFFF; 
	text-transform: uppercase; 
	letter-spacing: 0.04em;
	line-height: 1.1;
}
.footer-brand-sub {
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 10px;
	color: var(--color-secondary);
	letter-spacing: 0.12em;
	text-transform: uppercase;
}
.footer-tagline { 
	font-family: var(--font-body); 
	font-weight: 700; 
	font-size: 14.5px; 
	color: var(--color-secondary); 
	margin-top: 6px; 
	letter-spacing: 0.02em;
	line-height: 1.45;
}
.footer-desc { 
	font-family: var(--font-body); 
	font-weight: var(--weight-regular); 
	font-size: 15px; 
	line-height: 1.68; 
	color: rgba(255, 255, 255, 0.82); 
	margin: 0;
}
.footer-heading { 
	font-family: var(--font-display); 
	font-weight: var(--weight-bold); 
	font-size: 14px; 
	letter-spacing: 0.12em; 
	text-transform: uppercase; 
	color: var(--color-secondary); 
	margin-bottom: 6px; 
	padding-bottom: 6px;
	border-bottom: 1px solid rgba(197, 160, 89, 0.25);
}
.footer-link, .footer-text { 
	font-family: var(--font-body); 
	font-weight: var(--weight-regular); 
	font-size: 14.5px; 
	color: rgba(255, 255, 255, 0.88); 
	line-height: 1.55; 
	text-decoration: none;
	transition: color 0.2s ease, transform 0.2s ease;
}
.footer-link:hover { 
	color: var(--color-secondary-light); 
	transform: translateX(3px);
}
.footer-bottom { 
	border-top: 1px solid rgba(197, 160, 89, 0.2); 
}
.footer-bottom-inner { 
	padding-top: var(--space-3); 
	padding-bottom: var(--space-3); 
	display: flex; 
	align-items: center; 
	justify-content: space-between; 
	gap: var(--space-2); 
	flex-wrap: wrap; 
}
.footer-legal { 
	font-family: var(--font-body); 
	font-weight: var(--weight-regular); 
	font-size: 13px; 
	color: rgba(255, 255, 255, 0.72); 
}

@media (max-width: 1080px) {
	.nav { display: none; }
	.nav-toggle { display: flex; }
	.footer-inner { grid-template-columns: 1.3fr 1fr; gap: 40px 32px; }
}

@media (max-width: 767px) {
	.header-actions .btn-primary span.btn-label-full { display: none; }
}

@media (max-width: 640px) {
	.footer-inner { grid-template-columns: 1fr; gap: 32px; }
}

/* ============================================================================
   ADAPTER — hieu ung khong bieu dien duoc bang Elementor atomic global-classes
   (khong co animation/@keyframes/animation-timeline/@starting-style/@property/
   counter/backdrop-filter/border mot canh trong tap prop atomic da xac nhan —
   xem ELEMENTOR_V4_ATOMIC_SCHEMA.md + SOP-08 [FACT] 2026-08-24). Cac class ten
   duoi day duoc gan vao phan tu qua MOT global-class Elementor co label TRUNG
   TEN (xem SOP-08 [LESSON] 2026-08-24) — class Elementor chi mang layout co
   ban, effect that nam o day.
   ============================================================================ */
/* SUA 2026-08-25: ban dau dung animation-timeline:view() de opacity chay tu 0->1
   theo cuon trang — phat hien qua QA thuc te la RUI RO NGHIEM TRONG: noi dung
   kinh doanh (gia, san pham, xuat khau) nam trong .reveal/.reveal-2 bi AN HOAN
   TOAN neu animation khong kich hoat dung (man hinh chup tu dong khong cuon that,
   prefers-reduced-motion tat animation ve trang thai initial la opacity:0 —
   nghia la nhom nguoi dung nay KHONG BAO GIO thay noi dung). Noi dung chinh
   khong duoc phep phu thuoc vao animation co the fail — bo hoan toan hieu ung
   an/hien, giu opacity:1 luon luon. Van giu ten class de khong phai dung lai
   global-classes/element tree da build.*/
.reveal, .reveal-2 { opacity: 1; }

/* 5 bien delay roi rac thay vi 1 custom property --fade-delay — Elementor atomic
   khong co co che gan custom-property tuy chinh tren tung phan tu, nen moi buoc
   delay la mot class rieng (fade-in-1..5), khong phai --d inline nhu ban .dc.html
   goc. */
.fade-in-1, .fade-in-2, .fade-in-3, .fade-in-4, .fade-in-5 { opacity: 1; }
.fade-in-1 { transition: opacity 0.7s cubic-bezier(0.2,0.7,0.3,1) 0s, transform 0.7s cubic-bezier(0.2,0.7,0.3,1) 0s; }
.fade-in-2 { transition: opacity 0.7s cubic-bezier(0.2,0.7,0.3,1) 0.08s, transform 0.7s cubic-bezier(0.2,0.7,0.3,1) 0.08s; }
.fade-in-3 { transition: opacity 0.7s cubic-bezier(0.2,0.7,0.3,1) 0.16s, transform 0.7s cubic-bezier(0.2,0.7,0.3,1) 0.16s; }
.fade-in-4 { transition: opacity 0.7s cubic-bezier(0.2,0.7,0.3,1) 0.24s, transform 0.7s cubic-bezier(0.2,0.7,0.3,1) 0.24s; }
.fade-in-5 { transition: opacity 0.7s cubic-bezier(0.2,0.7,0.3,1) 0.32s, transform 0.7s cubic-bezier(0.2,0.7,0.3,1) 0.32s; }
@starting-style {
	.fade-in-1, .fade-in-2, .fade-in-3, .fade-in-4, .fade-in-5 { opacity: 0; transform: translateY(20px); }
}

/* SUA 2026-08-25: cung loi nhu .reveal — dem so bang @property/counter phu thuoc
   animation (thoi gian HOAC scroll-timeline tuy trinh duyet) da xac nhan hien
   "0%"/"0+" that su khi animation khong kip chay hoac khong kich hoat (chup man
   hinh, cuon nhanh, prefers-reduced-motion). "0% xuat khau" la NOI DUNG SAI
   NGHIEM TRONG cho khach hang thay, khong chi la mat hieu ung dep. Bo han
   animation, hien so co dinh 90%/30+ luon luon dung.*/
.count-90::after { content: "90%"; }
.count-30::after { content: "30+"; }

.parallax-img { position: absolute; top: -6%; left: 0; width: 100%; height: 112%; object-fit: cover; }
@supports (animation-timeline: view()) {
	.parallax-img { animation: vh-hero-pan linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
}
@keyframes vh-hero-pan { from { transform: translateY(-3%); } to { transform: translateY(4%); } }

.frosted-panel { backdrop-filter: blur(6px) !important; -webkit-backdrop-filter: blur(6px) !important; }

/* background prop atomic chi nhan {color:...}, khong nhan gradient — dung adapter
   cho overlay toi dan tren anh nen hero (Main.dc.html dong 119). */
.hero-gradient { background-image: linear-gradient(100deg, rgba(8,20,46,.92) 0%, rgba(8,20,46,.82) 40%, rgba(11,42,93,.58) 64%, rgba(11,42,93,.32) 100%) !important; }

/* Thay the border-left (khong bieu dien duoc trong Elementor atomic — chi co
   border-width/border-color 4 canh) bang mot strip tuyet doi 3px canh trai,
   dat trong phan tu relative. Xem PAS section, san-pham page.
   !important vi QC 2026-08-25 do duoc content:none tren ::before khi khong ep —
   nghi ngo Elementor co CSS reset pseudo-element rieng load SAU theme.css. */
/* width/height cung phai !important — do duoc computed width cua ::before bang
   HET chieu rong phan tu cha (578px thay vi 3px) du rule width:3px da khai bao,
   chung to co luat khac thang width ma khong dat !important thi khong cach nao
   thang duoc. Xac nhan qua Playwright 2026-08-25. */
.left-strip { position: relative !important; }
.left-strip::before { content: "" !important; position: absolute !important; top: 0 !important; bottom: 0 !important; left: 0 !important; width: 3px !important; max-width: 3px !important; background: var(--color-accent) !important; }

/* Bien the mau xanh cho strip (dung o export-balance-box, thay vi mac dinh mau
   accent vang cua PAS). */
.left-strip-blue::before { background: var(--color-primary) !important; }

/* Thay border-bottom 1 canh cua .trust-bar va border-right 1 canh cua
   .trust-item-bordered — cung ly do khong bieu dien duoc trong Elementor atomic. */
.bottom-line { position: relative !important; }
.bottom-line::after { content: "" !important; position: absolute !important; left: 0 !important; right: 0 !important; bottom: 0 !important; height: 1px !important; max-height: 1px !important; background: var(--color-border) !important; }
.right-line { position: relative !important; }
.right-line::after { content: "" !important; position: absolute !important; top: 0 !important; bottom: 0 !important; right: 0 !important; width: 1px !important; max-width: 1px !important; background: var(--color-border) !important; }

/* opacity khong xac nhan la prop atomic hop le (xem ELEMENTOR_V4_ATOMIC_SCHEMA.md
   §"Known unresolved gaps") — dung adapter cho cac truong hop can opacity < 1. */
.dimmed-45 { opacity: 0.45 !important; }

/* font-style khong nam trong danh sach prop atomic da xac nhan. */
.italic-text { font-style: italic !important; }

/* letter-spacing khong nam trong danh sach prop atomic da xac nhan. */
.tracked-wide { letter-spacing: 0.05em !important; }

/* Chevron sau link-arrow (Main.dc.html dong 177/255) — e-button wrapper hien
   tai khong co slot icon, dung ::after + SVG chevron ve san mau accent-red
   (mau tinh cung, khong theo bien — giong hero-gradient, chap nhan tradeoff
   nay cho decorative-only). */
.link-arrow::after {
	content: "";
	width: 16px; height: 16px; flex-shrink: 0;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23A6091D' stroke-width='2'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-size: contain;
}

/* Form lien he that (core/contact-form.php) — render NGOAI cay Elementor (khong co
   widget input/textarea/submit that o Elementor 4.2.3, xem ELEMENTOR_V4_ATOMIC_SCHEMA.md
   muc "e-form"), nen CSS phai tu chua het o day, KHONG dua vao Global Classes cua
   Elementor (trang co the khong con phan tu nao tham chieu toi de sinh CSS do). */
/* Modal xem video YouTube ngay tren trang (assets/video-modal.js) — JS thuan cua
   theme, khong phai Elementor widget, nen luon hoat dong du trang co bao nhieu
   atomic elements. */
.vh-yt-modal { position: fixed; inset: 0; z-index: 9999; display: none; align-items: center; justify-content: center; padding: 24px; box-sizing: border-box; }
.vh-yt-modal--open { display: flex; }
.vh-yt-modal__backdrop { position: absolute; inset: 0; background: rgba(8,20,46,0.86); }
.vh-yt-modal__box { position: relative; width: 100%; max-width: 960px; }
.vh-yt-modal__frame-wrap { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; border-radius: var(--radius-lg); overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,0.4); }
.vh-yt-modal__frame-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.vh-yt-modal__close { position: absolute; top: -44px; right: 0; width: 36px; height: 36px; border-radius: 999px; border: 0; background: rgba(255,255,255,.14); color: #fff; font-size: 22px; line-height: 1; cursor: pointer; }
.vh-yt-modal__close:hover { background: rgba(255,255,255,.28); }
body.vh-yt-modal-lock { overflow: hidden; }

.vh-branches-section { background: var(--color-cream); }
.vh-branches-grid { max-width: var(--container-max); margin: 0 auto; padding: 24px 24px 96px; display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.vh-branch-card { background: var(--color-white); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: 36px; }
.vh-branch-card--dark { background: var(--color-primary-dark); }
.vh-branch-tag { display: inline-block; font-family: var(--font-body); font-size: 12px; font-weight: var(--weight-bold); color: var(--color-primary); background: rgba(14,79,172,.08); padding: 6px 12px; border-radius: var(--radius-full); margin-bottom: 16px; }
.vh-branch-tag--dark { color: var(--color-primary-dark); background: var(--color-accent); }
.vh-branch-title { font-family: var(--font-display); font-size: 20px; font-weight: var(--weight-bold); color: var(--color-ink); margin-bottom: 20px; }
.vh-branch-title--dark { color: #fff; margin-bottom: 12px; }
.vh-branch-desc { font-family: var(--font-body); font-size: 14px; line-height: 1.55; color: rgba(255,255,255,.7); margin-bottom: 20px; }
@media (max-width: 767px) {
	.vh-branches-grid { grid-template-columns: 1fr; padding: 20px 20px 44px; gap: 20px; }
	.vh-branch-card { padding: 24px; }
}

/* "Bai viet lien quan" cuoi single post — render THAT boi single.php qua WP_Query,
   khong con la 2 the gan cung trong Elementor (mot the tung tro toi bai KHONG TON
   TAI, xem ghi chu trong build_blogpost_page.js). Class ten "bp-related-*" giu
   nguyen de noi tiep dung mach thi giac voi phan than bai (Elementor), nhung gio la
   CSS that trong theme, khong phai Global Class — phai tu chua het vi trang co the
   khong con phan tu Elementor nao dung ten nay de sinh CSS. */
.bp-related-section { background: var(--color-cream); padding: 0 24px 88px; }
.bp-related-wrap { max-width: 700px; width: 100%; margin: 0 auto; border-top: var(--border-width) solid var(--color-border); padding-top: 36px; }
.bp-related-title { font-family: var(--font-display); font-size: 13px; font-weight: var(--weight-bold); letter-spacing: 1.5px; color: var(--color-ink-faint); margin: 0 0 20px; }
.bp-related-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; width: 100%; }
@media (max-width: 767px) { .bp-related-grid { grid-template-columns: 1fr; } }
.bp-related-card { display: flex; flex-direction: column; padding: 20px 22px; background: var(--color-white); border-radius: var(--radius-md); box-shadow: var(--shadow-card); text-decoration: none; }
.bp-related-card:hover { box-shadow: 0 4px 22px rgba(28,31,38,0.14); }
.bp-related-card-title { font-family: var(--font-display); font-size: 16px; font-weight: var(--weight-bold); line-height: 1.3; color: var(--color-primary-dark); margin: 0 0 6px; }
.bp-related-card-sub { font-size: 13px; color: var(--color-ink-soft); font-family: var(--font-body); margin: 0; }

.vh-form { display: flex; flex-direction: column; gap: var(--space-2); }
.vh-form__hp { position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; opacity: 0 !important; }
.vh-field { display: flex; flex-direction: column; gap: 6px; font-family: var(--font-body); }
.vh-label { font-size: 13px; font-weight: var(--weight-medium); color: var(--color-ink-soft); }
.vh-label--dark { color: rgba(255,255,255,.7); }
.vh-input {
	width: 100%; box-sizing: border-box; font-family: var(--font-body); font-size: var(--text-body);
	color: var(--color-ink); background: var(--color-white); border: var(--border-width) solid var(--color-border);
	border-radius: var(--radius-md); padding: 12px 16px; appearance: none;
}
.vh-input:focus { outline: none; border-color: var(--color-primary); }
.vh-textarea { resize: vertical; min-height: 88px; font-family: var(--font-body); }
.vh-select { cursor: pointer; }
.vh-input--dark {
	background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.2); color: #fff;
}
.vh-input--dark::placeholder { color: rgba(255,255,255,.65); }
.vh-input--dark:focus { border-color: var(--color-accent); }
.vh-form__submit {
	display: flex; align-items: center; justify-content: center; gap: var(--space-1);
	font-family: var(--font-body); font-weight: 600; font-size: 15px;
	padding: 15px 30px; border-radius: var(--radius-full); border-width: 0;
	cursor: pointer; margin-top: 4px;
}
.vh-form__submit--hotline { background: var(--color-secondary); color: #fff; }
.vh-form__submit--hotline:hover { background: var(--color-secondary-dark); }
.vh-form__submit--accent { background: var(--color-accent); color: var(--color-primary-dark); }
.vh-form__submit--accent:hover { filter: brightness(0.95); }
.vh-form-notice { padding: 14px 18px; border-radius: var(--radius-md); font-family: var(--font-body); font-size: 14px; margin-bottom: 16px; }
.vh-form-notice--ok { background: rgba(14,79,172,.08); color: var(--color-primary-dark); border: 1px solid rgba(14,79,172,.2); }
.vh-form-notice--err { background: rgba(166,9,29,.08); color: var(--color-secondary); border: 1px solid rgba(166,9,29,.25); }

/* display khong phai atomic prop hop le (implied boi elType, xem
   ELEMENTOR_V4_ATOMIC_SCHEMA.md) — an dong tieu de bang tren mobile phai qua adapter
   CSS, khong the set truc tiep tren Global Class. Sp-spec-head (San Pham) va
   bp-table-head (BlogPost) deu xep 1 cot o mobile (xem build_*_classes.js), nen dong
   nhan "Model | Trong luong | ..." khong con y nghia — an di, du lieu da co nhan
   rieng trong tung the/cap. Breakpoint 767px khop core/compiler.php. */
@media (max-width: 767px) {
	.sp-spec-head, .bp-table-head { display: none !important; }
}

/* page-blog.php (2026-08-26) render danh sach bai + CTA bang PHP/WP_Query that
   (khong qua cay Elementor nua — xem page-blog.php), nen cac class Global dung
   lai o day (flex-direction/gap/padding cua chung van dung qua Global Class)
   MAT display:flex/grid von truoc gio den tu elType e-flexbox/e-grid cua
   Elementor, cung ly do "display khong phai atomic prop hop le" o tren. Bo
   sung rieng o day cho dung 8 class dang dung ngoai cay Elementor. */
.bl-content-section, .bl-content-inner, .bl-cta-section, .bl-cta-inner,
.bl-featured-body, .link-arrow { display: flex; }
.bl-article-grid { display: grid; }
.bl-card-featured, .bl-article-card { display: flex; text-decoration: none; color: inherit; }

/* Filter category, phan trang, anh+body luoi bai viet (page-blog.php, 2026-08-27)
   — cac thanh phan nay CHI dung trong PHP thuan, khong qua Global Class Elementor
   (xem ghi chu dau page-blog.php), nen viet CSS thuong o day, cung kieu voi
   .vh-branches-grid/.bp-related-card da co san. */
.bl-filter-bar { display: flex; flex-wrap: wrap; gap: var(--space-1); margin-bottom: var(--space-4); }
.bl-filter-pill {
	font-family: var(--font-body); font-size: 14px; font-weight: var(--weight-medium);
	color: var(--color-ink-soft); background: var(--color-white);
	border: 1px solid var(--color-border); border-radius: var(--radius-full);
	padding: 8px 18px; text-decoration: none; transition: transform 0.2s cubic-bezier(0.2,0.7,0.3,1), background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.bl-filter-pill:hover { border-color: var(--color-primary); color: var(--color-primary-dark); transform: scale(1.05); }
.bl-filter-pill.is-active { background: var(--color-primary-dark); border-color: var(--color-primary-dark); color: var(--color-white); }

.bl-article-img { width: 100%; height: 172px; object-fit: cover; }
.bl-article-body { display: flex; flex-direction: column; gap: 10px; padding: 22px; }
@media (max-width: 767px) {
	.bl-article-img { height: 150px; }
	.bl-article-body { padding: 18px; }
}

.bl-empty-note { font-family: var(--font-body); font-size: 15px; color: var(--color-ink-faint); padding: var(--space-4) 0; }

.bl-pagination { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: var(--space-5); }
.bl-page-link, .bl-page-current {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 40px; height: 40px; padding: 0 12px; box-sizing: border-box;
	font-family: var(--font-body); font-size: 14px; font-weight: var(--weight-medium);
	border-radius: var(--radius-full);
}
.bl-page-link { color: var(--color-ink-soft); background: var(--color-white); border: 1px solid var(--color-border); text-decoration: none; transition: transform 0.2s cubic-bezier(0.2,0.7,0.3,1), background 0.2s ease, color 0.2s ease; }
.bl-page-link:hover { background: var(--color-cream-dark); color: var(--color-primary-dark); transform: scale(1.08); }
.bl-page-current { background: var(--color-secondary); color: var(--color-white); font-weight: var(--weight-bold); }

/* Hover "nhac len" cho card noi dung (khac hover zoom cua nut bam) — dung
   tinh than voi .card:hover trong cac file .dc.html goc thiet ke
   (transform:translateY(-8px) scale(1.015)). */
.bl-card-featured, .bl-article-card { transition: transform 0.3s cubic-bezier(0.2,0.7,0.3,1), box-shadow 0.3s ease; }
.bl-card-featured:hover, .bl-article-card:hover { transform: translateY(-6px); box-shadow: 0 20px 40px rgba(28,31,38,0.16); }

/* CA 3 nut play video (export-play-btn/gt-video-play-btn/tv-video-play-btn)
   la widget e-button THAT (khong phai flexbox trang tri) — Elementor tu gan
   them class ".e-button-base" cho MOI e-button, class do co CSS rieng dat
   display:block, nap SAU theme.css nen thang tie-break. Global Class cua ca
   3 nut deu dat justify-content/align-items ky vong flex — voi display:block
   thi 2 prop nay VO HIEU LUC HOAN TOAN, khong loi console, khong canh bao gi.
   - export-play-link: vo hieu lo ro nhat — day la 1 element RIENG BIET boc
     ngoai export-play-btn (xem ghi chu 2026-08-26 trong build_home_classes.js),
     icon play ben trong no can flex that su de canh giua — thieu flex thi icon
     lech han sang trai (anh Hien phat hien 2026-08-27, do bang bounding_box
     xac nhan: vong tron dung tam, icon ben trong thi khong).
   - gt-video-play-btn/tv-video-play-btn: chinh no la nut, chu "▶" nam THANG
     TRONG the <a> (khong phai element con rieng) — text trong block tu canh
     giua tuong doi nho text-align/line-height nen KHONG lo ro bang mat
     thuong, nhung justify-content/align-items cung dang chet y het, chi la
     may man khong bi phat hien qua hinh anh. Sua dong bo ca 3 cho dung, tranh
     dinh lai lan sau khi icon doi thanh element con thuc su. */
.export-play-link, .gt-video-play-btn, .tv-video-play-btn { display: flex !important; }

/* Hover lam nut play "than thien" hon (do anh Hien de xuat 2026-08-27) — ap
   dung dong nhat ca 3 trang co video (Trang chu/Gioi thieu/Thu vien anh),
   cung tinh than voi .card:hover trong cac file .dc.html goc. */
.export-play-btn, .gt-video-play-btn, .tv-video-play-btn {
	transition: transform 0.25s cubic-bezier(0.2,0.7,0.3,1), box-shadow 0.25s ease;
}
.export-video-card:hover .export-play-btn,
.gt-video-card:hover .gt-video-play-btn,
.tv-video-card:hover .tv-video-play-btn {
	transform: scale(1.08);
	box-shadow: 0 6px 20px rgba(0,0,0,0.32);
}

/* Hover zoom cho TAT CA nut bam that tren site (do anh Hien yeu cau
   2026-08-27) — gom du 2 nhom: Global Class cua Elementor (btn-hotline/
   btn-accent/btn-outline-w/btn-branch/btn-branch-outline/link-arrow, dung
   lai o moi trang qua buttonLink(), xem build_*_page.js) + nut PHP thuan
   ngoai cay Elementor (.btn-primary/.btn-secondary/.btn-ghost trong header,
   .vh-form__submit trong form lien he that). scale nho hon nut play tron
   (1.05 thay vi 1.08) vi day la nut chu nhat/vien tron dai, zoom manh de
   trong meo. transform khong dung atomic prop nen khong bi gioi han "display
   khong phai atomic prop" — chi can them qua theme.css binh thuong. */
.btn-hotline, .btn-accent, .btn-outline-w, .btn-branch, .btn-branch-outline,
.link-arrow, .btn-primary, .btn-secondary, .btn-ghost,
.vh-form__submit {
	transition: transform 0.2s cubic-bezier(0.2,0.7,0.3,1);
}
.btn-hotline:hover, .btn-accent:hover, .btn-outline-w:hover, .btn-branch:hover,
.btn-branch-outline:hover, .link-arrow:hover, .btn-primary:hover,
.btn-secondary:hover, .btn-ghost:hover, .vh-form__submit:hover {
	transform: scale(1.05);
}

/* Bo sung nut "dong/mo" (hamburger mobile mo nav, nut dong video modal, pill
   doi ngon ngu) — cung yeu cau 2026-08-27, tach rieng vi day la nut chuc
   nang/icon nho, khong phai nut CTA chu dai. .lang-pill.is-soon (FR/EN chua
   hoat dong that) KHONG zoom — bam vao khong lam gi, zoom se gay hieu lam la
   bam duoc. */
.nav-toggle, .vh-yt-modal__close, .lang-pill:not(.is-soon) {
	transition: transform 0.2s cubic-bezier(0.2,0.7,0.3,1);
}
.nav-toggle:hover, .vh-yt-modal__close:hover, .lang-pill:not(.is-soon):hover {
	transform: scale(1.08);
}

@media (prefers-reduced-motion: reduce) {
	.reveal, .reveal-2, .count-90, .count-30, .parallax-img { animation: none !important; }
	.fade-in-1, .fade-in-2, .fade-in-3, .fade-in-4, .fade-in-5 { transition: none !important; }
	.export-play-btn, .gt-video-play-btn, .tv-video-play-btn { transition: none !important; }
	.btn-hotline, .btn-accent, .btn-outline-w, .btn-branch, .btn-branch-outline,
	.link-arrow, .btn-primary, .btn-secondary, .btn-ghost,
	.vh-form__submit { transition: none !important; }
	.nav-toggle, .vh-yt-modal__close, .lang-pill:not(.is-soon) { transition: none !important; }
	.bl-filter-pill, .bl-page-link, .bl-card-featured, .bl-article-card { transition: none !important; }
}