/*
Theme Name: Tapbi
Theme URI: https://tapbi.vn
Author: TAPBI
Description: Block theme cho website CONG TY TNHH CONG NGHE TAPBI VIET NAM
Version: 0.18.2
Requires at least: 6.5
Tested up to: 7.0
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: tapbi
*/

/* CSS bo sung. Uu tien khai bao token trong theme.json truoc. */

/*
 * He so scale theo dung ti le frame Figma goc (1440px).
 * Dung cho MOI gia tri kich thuoc lay tu Figma (padding, gap, max-width...)
 * qua cong thuc calc(var(--tapbi-scale) * Npx) - hoac gian tiep qua token
 * spacing trong theme.json (cac token do da doi sang cong thuc nay).
 * KHONG dung cho font-size (giu co che fluid rieng, co nguong doc duoc)
 * va padding nut bam (giu co dinh, tranh nho hon nguong de bam tren mobile).
 * Chi tiet xem CLAUDE.md > Quy tac code > CSS.
 */
:root {
	--tapbi-scale: clamp(0.2222, calc(100vw / 1440px), 1);
	/*
	 * He so scale cho frame Figma MOBILE (375px) - baseline thu hai, doc lap
	 * voi --tapbi-scale o tren. Ban mobile KHONG phai ban desktop thu nho:
	 * header cao 120px (desktop 148), padding 24px (desktop 64), logo 114px
	 * (desktop 171) - neu dung chung --tapbi-scale thi o 375px moi thu chi con
	 * 26% kich thuoc thiet ke.
	 * CHI dung ben trong @media (max-width: 767px).
	 * Tran = 1: tu 375px tro len giu nguyen kich thuoc thiet ke, phan du thanh
	 * khoang trang - may pho bien 390-430px se hien thi giong het 375px thay vi
	 * phinh to. San = 0.8533 (320/375) cho may nho nhat.
	 * Quy uoc cho cac section mobile sau: gia tri DOC / padding / gap dung bien
	 * nay; khoi noi dung theo chieu NGANG dung width:100% (hoac max-width +
	 * auto) chu khong khoa cung 327px, de tan dung man rong hon 375.
	 */
	--tapbi-scale-m: clamp(0.8533, calc(100vw / 375px), 1);
	/* Chieu cao khung "Logo and Menu" trong Figma (148px). Tach thanh bien vi
	   trang "Ve chung toi" phai keo <main> len dung bang gia tri nay de
	   header nam de len anh nen hero - xem block cuoi file. */
	--tapbi-header-height: calc(var(--tapbi-scale) * 148px);
	/*
	 * LE NGANG cua section full-width: dung token spacing--gutter (khai bao
	 * trong theme.json), KHONG dung spacing--50 (64px) truc tiep nua.
	 *   gutter = 64px + max(0px, (100vw - 1440px - 17px) / 2)
	 * Duoi 1440px gutter = dung 64px nhu cu. Tren 1440px phan du duoc don het
	 * vao hai le, nen kho noi dung khoa cung ~1312px (= 1440 - 64*2) va nam
	 * giua man hinh, con NEN section van tran full-bleed.
	 * Tru 17px vi 100vw tinh CA thanh cuon doc con be rong bo cuc thi khong:
	 * khong tru thi o 1920px kho noi dung chi con 1297px, trong khi
	 * .tapbi-footer-main va .tapbi-whph-main rong CUNG 1312px (nowrap) -> tran
	 * ra ngoai va sinh thanh cuon NGANG 15px. 17px = thanh cuon co dien rong
	 * nhat (Windows/Firefox); may dung thanh cuon noi (macOS) thi kho noi dung
	 * rong 1329px thay vi 1312 - lech 1.3%, doi lai khong bao gio tran.
	 * Khong lam vay thi tren 1440px kho noi dung cu no ra theo man hinh: cac
	 * khoi space-between bi day xa nhau, cot flex-grow phinh to - du moi kich
	 * thuoc da dung yen (--tapbi-scale cap o 1).
	 * Section moi: le ngang lay spacing--gutter; cac khoang cach khac (gap,
	 * padding doc) van dung spacing--50 binh thuong.
	 */

	/*
	 * TOKEN ANIMATION - dung cho khoi "ANIMATION" o cuoi file.
	 * Ease: ease-out manh o dau roi cham dan, cam giac "trot" nhe chu khong
	 * bat lai nhu spring - hop voi website cong ty.
	 * Rise: quang duong truot len. KHONG scale theo --tapbi-scale: day la
	 * chuyen dong chu khong phai kich thuoc bo cuc, 24px o man hep van dung.
	 */
	--tapbi-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--tapbi-dur: 600ms;
	--tapbi-rise: 24px;
}

/*
 * CANH BAO khi them mau moi vao palette trong theme.json (khong dat comment
 * duoc trong file JSON nen ghi o day):
 * TUYET DOI khong dat slug la "text", "border", "link" hay "background".
 * WordPress tu sinh rule .has-{slug}-color{... !important} cho moi mau trong
 * palette, ma .has-text-color / .has-border-color / .has-link-color /
 * .has-background lai la class DANH DAU co san cua WordPress, duoc gan tu dong
 * vao MOI block co dat mau. Trung ten => rule cua palette (nam sau trong
 * stylesheet, cung specificity, cung !important) luon thang => moi block bi ep
 * ve dung 1 mau bat ke chon mau gi.
 * Da tung dinh loi nay voi slug "text" (#161d21): 22 block trong theme bi ep
 * den het, ke ca nut chu trang o hero trang chu. Da go, dung nature-900 /
 * nature-200 thay cho 2 bi danh "text" / "border" cu.
 */

/* WP tu them margin-top 32px (root blockGap trong theme.json) cho moi block
   goc tru :first-child. <main> da tu fix duoc bang style.spacing.margin vi
   la wp:group thuong. Nhung <footer> la wp:template-part - WP boc them 1
   the <footer class="wp-block-template-part"> ben ngoai ma khong nhan
   thuoc tinh spacing qua block JSON nhu wp:group, nen phai override truc
   tiep o day. Header khong can vi la :first-child, da duoc mien tru san. */
.wp-site-blocks > footer.wp-block-template-part {
	margin-block-start: 0;
}

/* Font Plus Jakarta Sans - self-host, khong dung CDN ngoai */
@font-face {
	font-family: 'Plus Jakarta Sans';
	font-style: normal;
	font-weight: 200 800;
	font-display: swap;
	src: url('assets/fonts/PlusJakartaSans-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Plus Jakarta Sans';
	font-style: normal;
	font-weight: 200 800;
	font-display: swap;
	src: url('assets/fonts/PlusJakartaSans-vietnamese.woff2') format('woff2');
	unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

/* Header: logo + menu (padding scale theo ti le Figma, xem :root o tren).
   Theo JSON Figma (node "Logo and Menu"): khung cao co dinh 148px, khong
   dung padding-top/bottom - logo duoc can giua theo chieu doc trong khung do
   (align-items: center), khong phai padding cung. */
.tapbi-header {
	padding-left: var(--wp--preset--spacing--gutter);
	padding-right: var(--wp--preset--spacing--gutter);
	height: var(--tapbi-header-height);
	align-items: center;
	position: relative;
}
.tapbi-logo {
	margin: 0;
}
.tapbi-logo img {
	display: block;
	height: auto;
	max-width: calc(var(--tapbi-scale) * 171px);
}
.tapbi-nav-toggle {
	position: relative;
}
.tapbi-nav-check {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}
.tapbi-nav-burger {
	display: flex;
	align-items: center;
	cursor: pointer;
	color: var(--wp--preset--color--primary);
}
/* Menu OVERLAY mobile - JSON Figma "Menu" (design/mobile/menu.json, node
   2085:266217, 375x812): day la trang thai menu DANG MO. Nen trang phu kin man
   hinh; thanh tren 375x120 chinh la header that (chi doi nen + them vien day
   khi mo, xem @media max-width 767px), than menu 374x692 xep DOC, itemSpacing
   48, can giua ca hai truc.
   Kich thuoc lay tu frame 375px nen scale theo --tapbi-scale-m, KHONG phai
   --tapbi-scale (1440px).
   Truoc day khoi nay la dropdown goc phai tu che, vi luc do Figma chua co ban
   mobile - gio da co frame that nen dung theo frame. */
/* Selector con (0,2,0) chu KHONG phai `.tapbi-menu` don (0,1,0): WP core in
   rule `body .is-layout-flex{display:flex}` co do uu tien (0,1,1), cao hon
   class don nen thu tu file khong cuu duoc - menu se luon mo tren mobile.
   Xem them ghi chu cung kieu o .tapbi-product-hero-illustration. */
.tapbi-nav-toggle > .tapbi-menu {
	display: none;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center;
	/* top = chieu cao header (120px ban mobile) -> overlay bat dau ngay duoi
	   vien day cua header, dung nhu frame Figma tach "Logo and Menu" (120) va
	   "Menu" (692) thanh hai khoi roi nhau. */
	position: fixed;
	top: var(--tapbi-header-height);
	left: 0;
	right: 0;
	bottom: 0;
	/* Bat buoc: WP tu them margin-block-start (blockGap goc) cho con khong phai
	   :first-child cua group. Voi hop fixed da chot ca top lan bottom thi margin
	   do se day overlay tut xuong. */
	margin: 0;
	background: var(--wp--preset--color--base);
	/* Man ngan (xoay ngang) thi cuon trong overlay, khong tran ra ngoai. */
	overflow-y: auto;
	z-index: 20;
}
.tapbi-nav-toggle > .tapbi-nav-check:checked ~ .tapbi-menu {
	display: flex;
}
.tapbi-menu-item {
	margin: 0;
}
.tapbi-menu-item a {
	text-decoration: none;
	display: inline-block;
	padding-bottom: var(--wp--preset--spacing--20);
	font-weight: 500;
}
.tapbi-menu-item.is-active a {
	border-bottom: 2px solid var(--wp--preset--color--secondary);
}
/* Nut dong (chu X) chi ton tai o ban mobile va chi khi menu dang mo - an mac
   dinh o moi do rong. Style vong tron xem trong @media max-width 767px. */
.tapbi-nav-close {
	display: none;
}

/* Tu day tro di chi con doi PATTERN (hamburger -> menu ngang), khong phai
   doi kich thuoc - kich thuoc da scale lien tuc theo --tapbi-scale o tren. */
@media (min-width: 768px) {
	.tapbi-nav-burger,
	.tapbi-nav-close {
		display: none;
	}
	/* Go het phan overlay ve lai menu ngang. position:static da vo hieu hoa
	   top/left/right/bottom nen khong can khai bao lai. */
	.tapbi-nav-toggle > .tapbi-menu,
	.tapbi-nav-toggle > .tapbi-nav-check:checked ~ .tapbi-menu {
		display: flex;
		flex-direction: row !important;
		align-items: center !important;
		justify-content: normal;
		position: static;
		margin: 0;
		background: transparent;
		overflow: visible;
	}
}

/* Header ban MOBILE - frame Figma 375px (node "Logo and Menu": 375x120,
   paddingLeft/Right 24, SPACE_BETWEEN, logo 114x48). Kich thuoc lay tu frame
   nay nen scale theo --tapbi-scale-m, KHONG phai --tapbi-scale (1440px). */
@media (max-width: 767px) {
	/* itemSpacing 48 cua frame "Menu". Van phai ghi de blockGap cua block vi
	   block dung --tapbi-scale (baseline 1440px) con ban mobile dung
	   --tapbi-scale-m (baseline 375px) - cung so 48px nhung he so khac han.
	   De rule nay TRONG media query mobile: neu de o ngoai, dau !important se
	   an luon gap 48px cua desktop (Figma) - do la loi cu. */
	.tapbi-nav-toggle > .tapbi-menu {
		gap: calc(var(--tapbi-scale-m) * 48px) !important;
		/* Block khai bao layout flexWrap "wrap" (dung cho menu NGANG ban desktop).
		   O ban mobile menu xep DOC nen wrap lai thanh tai hoa: man thap (may nho,
		   xoay ngang) khong du 432px cho 5 muc thi cac muc tran sang thanh COT THU
		   HAI, THU BA - vo han bo cuc. Ep nowrap de phan du cuon doc trong overlay
		   (overflow-y: auto) thay vi de sang ben canh. */
		flex-wrap: nowrap !important;
		/* "safe" de khi noi dung cao hon overlay thi neo ve dau thay vi can giua -
		   can giua + cuon se lam cac muc dau bi cat va KHONG cuon nguoc len duoc.
		   Trinh duyet khong hieu "safe" se bo qua ca dong nay va dung lai
		   justify-content: center o rule goc - van chap nhan duoc. */
		justify-content: safe center;
	}
	/* Khong cho cac muc bi bop lai khi tong chieu cao vuot qua overlay. */
	.tapbi-menu-item {
		flex-shrink: 0;
	}
	:root {
		/* Khung header mobile cao 120px (desktop 148px). Ghi de o :root de
		   .tapbi-about-main va .tapbi-about-hero - hai cho dung chung bien
		   nay de header nam de len anh hero - tu dong khop theo. */
		--tapbi-header-height: calc(var(--tapbi-scale-m) * 120px);
	}
	.tapbi-header {
		padding-left: calc(var(--tapbi-scale-m) * 24px);
		padding-right: calc(var(--tapbi-scale-m) * 24px);
	}
	.tapbi-logo img {
		/* 114x48 - dung ti le 2.375 voi ban desktop 171x72 nen dung chung file
		   SVG, chi doi max-width. */
		max-width: calc(var(--tapbi-scale-m) * 114px);
	}
	.tapbi-nav-burger {
		/* Vung cham 48x48 (bang chieu cao logo mobile), icon giu 24px. */
		width: calc(var(--tapbi-scale-m) * 48px);
		height: calc(var(--tapbi-scale-m) * 48px);
		justify-content: flex-end;
	}
	/* Chu menu ban mobile - node "Menu Item": 32px / line-height 40 / Bold /
	   letter-spacing -2%, mau #181f53 (= primary). Khac han ban desktop
	   (16px, Medium) nen phai ghi de day du 4 thuoc tinh.
	   NGOAI LE so voi quy tac "font-size khong scale" trong CLAUDE.md: o day
	   font-size CO nhan --tapbi-scale-m, cung ly do nhu .tapbi-about-hero-title
	   (san 0.8533 => nho nhat 27px, van thua nguong doc; doi lai chu giu dung
	   ti le voi be ngang khung).
	   !important vi .has-medium-font-size cua WP co san !important. */
	.tapbi-menu-item a {
		font-size: calc(var(--tapbi-scale-m) * 32px) !important;
		line-height: 1.25; /* 40/32 */
		font-weight: 700;
		letter-spacing: -0.02em;
		/* paddingBottom 8 cua khung moi muc - khoang ho cho gach chan 2px cua
		   muc dang chon (.tapbi-menu-item.is-active a). */
		padding-bottom: calc(var(--tapbi-scale-m) * 8px);
	}
	/* Doi hamburger <-> chu X khi menu mo. Dung HAI <label> rieng chu khong doi
	   icon bang CSS tren mot label: aria-label khong doi duoc bang CSS, de
	   "Mo menu" khi menu dang mo la sai voi nguoi dung trinh doc man hinh. */
	.tapbi-nav-check:checked ~ .tapbi-nav-burger {
		display: none;
	}
	.tapbi-nav-check:checked ~ .tapbi-nav-close {
		display: flex;
	}
	/* Nut dong - node "Frame 9" (48x48): nen trang, vien 1px nature-200,
	   cornerRadius 24 = hinh tron, icon 24px mau #0b0a0f (~ ink).
	   Trung style voi nut hamburger cua trang "Ve chung toi"/"San pham" o cuoi
	   file, nhung o day ap dung cho MOI trang vi frame menu-dang-mo ve nhu vay. */
	.tapbi-nav-close {
		align-items: center;
		justify-content: center;
		cursor: pointer;
		width: calc(var(--tapbi-scale-m) * 48px);
		height: calc(var(--tapbi-scale-m) * 48px);
		color: var(--wp--preset--color--ink);
		background-color: var(--wp--preset--color--base);
		border: 1px solid var(--wp--preset--color--nature-200);
		border-radius: 50%;
		box-sizing: border-box;
		/* Nam tren overlay (z-index 20) de con bam dong duoc. */
		position: relative;
		z-index: 30;
	}
	/* Khi menu mo, thanh header phai thanh nen trang + vien day 1px nature-200
	   dung nhu node "Logo and Menu" trong frame menu.
	   Do uu tien (0,3,0) - :has() lay do uu tien cua doi so ben trong
	   (.tapbi-nav-check:checked = 0,2,0) roi cong voi .tapbi-header. Con (0,3,0)
	   la CO Y: hai trang co header trong suot (.tapbi-header-merge o trang chu,
	   .tapbi-header-overlay o trang "Ve chung toi") deu dat
	   `background-color: transparent !important` voi do uu tien (0,2,0) va nam
	   SAU trong file - chi (0,3,0) moi de len duoc ca hai ma khong phai lap lai
	   rule nay o tung khoi trang. */
	.tapbi-header:has(.tapbi-nav-check:checked) {
		background-color: var(--wp--preset--color--base) !important;
		/* Vien day ve bang box-shadow inset chu KHONG phai border-bottom:
		   .tapbi-header khoa cung height 120px va theme khong dat box-sizing
		   border-box toan cuc, nen border se doi header thanh 121px trong khi
		   overlay bat dau o dung 120px -> net ke chui xuong duoi overlay.
		   Inset cung dung voi strokeAlign INSIDE cua Figma. */
		box-shadow: inset 0 -1px 0 var(--wp--preset--color--nature-200);
		/* Hai trang noi tren dat header z-index 2 (tao stacking context de header
		   noi tren nen hero) - nang han len de overlay khong bi anh hero chen. */
		z-index: 100;
	}
	/* Khoa cuon trang nen khi menu mo. Thuan CSS, khong can JS. Trinh duyet cu
	   khong ho tro :has() thi nen van cuon duoc nhung overlay fixed che kin nen
	   khong vo bo cuc. */
	html:has(.tapbi-nav-check:checked) {
		overflow: hidden;
	}
}

/* Nut chon ngon ngu - JSON Figma design/header-eng.json (node "Frame 48095790",
   53x30, trang thai DONG) va design/language_dropdown.json (node
   "Frame 48095798", 92x70, trang thai MO).
   Nut la muc thu 6 trong khung "Menu" nen khoang cach 48px voi muc "Lien he" da
   co san tu blockGap cua block (spacing|45) - o day khong dat lai.
   MOI so do trong khoi nay giu CO DINH, khong nhan --tapbi-scale. Hai ly do deu
   la ngoai le da ghi trong CLAUDE.md: day la vung thao tac tay (padding nut bam
   giu nguyen) va co 16px la hinh khoi nho mang thong tin - nhan he so o man hep
   se teo con ~4px, cung ly do voi .tapbi-nav-close. */
.tapbi-lang {
	/* Moc cho bang xo dinh vi tuyet doi ben duoi. Khong dat margin: block cha
	   .tapbi-menu co layout flex nen WP in `.is-layout-flex > :is(*, div)
	   {margin:0}` voi do uu tien (0,1,1), class don o day thua. Khoang cach de
	   blockGap cua khung menu lo. */
	position: relative;
}
.tapbi-lang-toggle {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 8px 7px 8px 10px;
	box-sizing: border-box;
	cursor: pointer;
	color: var(--wp--preset--color--ink);
	background-color: var(--wp--preset--color--base);
	/* Hai trang thai vien khac nhau, theo dung hai ban ve rieng: luc DONG
	   (design/header-when-close.json, node "Frame 48095793") vien xam nhat
	   #d3d5da = nature-300; luc DANG MO (design/header-eng.json, node
	   "Frame 48095790") vien dam len #0b0a0f - xem rule .tapbi-lang[open] ben
	   duoi. */
	border: 1px solid var(--wp--preset--color--nature-300);
	border-radius: 6px;
	/* Bo tam giac mac dinh cua <summary>: list-style cho Chrome/Firefox, gia
	   phan tu ::-webkit-details-marker cho Safari. */
	list-style: none;
}
.tapbi-lang-toggle::-webkit-details-marker {
	display: none;
}
.tapbi-lang-flag {
	display: block;
	flex-shrink: 0;
	border-radius: 1px;
}
.tapbi-lang-caret {
	display: block;
	flex-shrink: 0;
	/* File SVG ve san mui ten HUONG LEN (node "CaretUp" trong header-eng.json =
	   trang thai MO). Trang thai dong xoay 180 do thanh huong xuong, dung nhu
	   node "CaretDown" trong header-when-close.json. */
	transform: rotate(180deg);
	/* #6c727f cua ban ve trang thai dong. */
	color: var(--wp--preset--color--nature-500);
}
/* Trang thai MO: vien va mui ten cung dam len #0b0a0f (quy ve ink, cung cach da
   lam o .tapbi-nav-close). */
.tapbi-lang[open] .tapbi-lang-toggle {
	border-color: var(--wp--preset--color--ink);
}
.tapbi-lang[open] .tapbi-lang-caret {
	transform: none;
	color: var(--wp--preset--color--ink);
}
.tapbi-lang-list {
	position: absolute;
	/* 4px la khoang ho giua day nut (y = 89) va dinh bang xo (y = 93) trong
	   Figma; right: 0 cho hai mep phai thang hang dung nhu ban ve. */
	top: calc(100% + 4px);
	right: 0;
	z-index: 30;
	display: flex;
	flex-direction: column;
	gap: 4px;
	/* 92 = 4 (dem) + 82 (muc) + 4 (dem) + 2 (vien). */
	width: 92px;
	box-sizing: border-box;
	margin: 0;
	padding: 4px;
	list-style: none;
	background-color: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--nature-200);
	border-radius: 8px;
}
.tapbi-lang-item {
	/* SPACE_BETWEEN cua Figma: cum co + ma ngon ngu don trai, dau tich don phai. */
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 4px;
	padding: 2px 6px;
	border-radius: 4px;
	text-decoration: none;
	color: var(--wp--preset--color--ink);
	/* Body 2 cua style guide: 16 / 24 / Medium / letter-spacing 0. Khong dung
	   class has-medium-font-size vi con phai dat rieng line-height va weight. */
	font-size: 16px;
	line-height: 24px;
	font-weight: 500;
	letter-spacing: 0;
}
.tapbi-lang-item.is-current {
	background-color: var(--wp--preset--color--surface);
}
/* Khong co trong Figma - them vi khong co phan hoi di chuot thi khong biet muc
   nao dang tro toi. Dung chung mau voi muc dang chon cho khoi sinh mau moi. */
.tapbi-lang-item:hover,
.tapbi-lang-item:focus-visible {
	background-color: var(--wp--preset--color--surface);
}
.tapbi-lang-item-label {
	display: flex;
	align-items: center;
	gap: 4px;
}
.tapbi-lang-check {
	display: block;
	flex-shrink: 0;
}

@media (max-width: 767px) {
	/* Trong lop phu menu, cac muc xep doc va khong duoc bop lai - cung ly do da
	   ghi o .tapbi-menu-item. */
	.tapbi-lang {
		flex-shrink: 0;
	}
}

/* Hero: nen gradient + hoa tiet + layout 2 cot (padding scale theo ti le Figma) */
.tapbi-hero {
	padding-left: var(--wp--preset--spacing--gutter);
	padding-right: var(--wp--preset--spacing--gutter);
	position: relative;
	overflow: hidden;
}
.tapbi-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: url('assets/images/home/hero-bg-pattern.png');
	background-size: cover;
	background-position: center;
	opacity: 0.5;
	pointer-events: none;
}
.tapbi-hero > * {
	position: relative;
}
.tapbi-hero-content {
	max-width: calc(var(--tapbi-scale) * 533px);
	flex: 1 1 320px;
}
.tapbi-hero-heading {
	/* -0.03em = -1.92px / 64px (letter-spacing goc Figma o font-size 64px).
	   Dung don vi em de tu khop ti le voi font-size thuc te dang render,
	   khong phu thuoc --tapbi-scale (font-size co co che fluid rieng). */
	letter-spacing: -0.03em;
}
.tapbi-hero-illustration {
	flex: 1 1 320px;
	max-width: calc(var(--tapbi-scale) * 819px);
	width: 100%;
	margin: 0;
}
.tapbi-hero-illustration img {
	width: 100%;
	height: auto;
	display: block;
	/* 5 lop DROP_SHADOW cua node anh "2222 1" trong Figma (lop thu 5 alpha = 0
	   nen bo) - giong cach da lam o .tapbi-product-hero-illustration img.
	   Da kiem tra file hero-illustration.png: vien alpha chi rong vai px do
	   khu rang cua, KHONG co mang bong nung san => them bong o day khong bi
	   bong doi. Dung drop-shadow chu KHONG box-shadow vi anh xoay -7.95 do va
	   nen trong suot - box-shadow se ve khung chu nhat lech goc.
	   Bong bam theo kich thuoc anh nen scale theo --tapbi-scale. */
	filter:
		drop-shadow(calc(var(--tapbi-scale) * 13px) calc(var(--tapbi-scale) * 12px) calc(var(--tapbi-scale) * 39px) rgba(0, 0, 0, 0.1))
		drop-shadow(calc(var(--tapbi-scale) * 54px) calc(var(--tapbi-scale) * 46px) calc(var(--tapbi-scale) * 71px) rgba(0, 0, 0, 0.09))
		drop-shadow(calc(var(--tapbi-scale) * 121px) calc(var(--tapbi-scale) * 104px) calc(var(--tapbi-scale) * 96px) rgba(0, 0, 0, 0.05))
		drop-shadow(calc(var(--tapbi-scale) * 216px) calc(var(--tapbi-scale) * 184px) calc(var(--tapbi-scale) * 113px) rgba(0, 0, 0, 0.01));
}

/* Tu 1024px ep hero khong wrap nua (doi PATTERN 2-cot, khong phai kich thuoc) */
@media (min-width: 1024px) {
	.tapbi-hero {
		flex-wrap: nowrap !important;
	}
}

/* Hero ban MOBILE - frame Figma 375px, node "Container" (2085:263482):
   375 x 236, paddingLeft/Right 24, layout VERTICAL itemSpacing 32, gom
   Title (327x156) + Button Container (151x48). Kich thuoc lay tu frame nay
   nen scale theo --tapbi-scale-m, KHONG phai --tapbi-scale (1440px).
   CHUA CO trong frame: anh minh hoa va padding duoi cua section - hai thu do
   van giu theo ban desktop cho toi khi co frame tuong ung. */
@media (max-width: 767px) {
	.tapbi-hero {
		padding-left: calc(var(--tapbi-scale-m) * 24px);
		padding-right: calc(var(--tapbi-scale-m) * 24px);
		/* Container dinh sat day header trong Figma (y 10880 = 10760 + 120),
		   khong co paddingTop. Block ghi padding qua INLINE style nen o day
		   bat buoc phai !important moi de len duoc.
		   Padding duoi cung bang 0: khung anh (Frame 48095743) ket thuc o
		   y=536.32, dung bang day cua bbox anh (535.79) - tuc khong con
		   khoang ho nao duoi anh trong thiet ke. */
		padding-top: 0 !important;
		padding-bottom: 0 !important;
	}
	/* Selector 2 cap (0,2,0) de thang rule .wp-container-* (0,1,0) ma WP sinh
	   ra tu blockGap trong block JSON, va thang ca theme.json cho nut bam. */
	.tapbi-hero .tapbi-hero-content {
		/* Content rong 327 = 375 - 24*2, tuc chiem tron be ngang. Bo
		   max-width 533px cua ban desktop (o 375px chi con 139px - chinh la
		   nguyen nhan chu H1 tran ra ngoai cot). */
		max-width: none;
		flex: 1 1 100%;
		gap: calc(var(--tapbi-scale-m) * 32px);
	}
	.tapbi-hero .tapbi-hero-heading {
		/* Figma mobile: 44px / line-height 52px / Semibold / letter-spacing -2%
		   (ban desktop: 64px / 1.125 / Semibold / -3%).
		   NGOAI LE so voi quy tac "font-size khong scale" trong CLAUDE.md:
		   o day font-size CO nhan --tapbi-scale-m. Ly do: san cua bien do la
		   0.8533 nen co nho nhat cung con 37.5px (van thua nguong doc), doi
		   lai dong "Think Different," giu dung ti le voi be ngang cot nen
		   khong tran khung o may 320px.
		   font-size can !important vi .has-xx-large-font-size cua WP co san
		   !important; line-height can !important vi block ghi qua inline style.
		   font-weight khong khai bao o day: H1 = Semibold ca 2 ban, pattern
		   da ghi 600 inline roi. */
		font-size: calc(var(--tapbi-scale-m) * 44px) !important;
		line-height: 1.1818 !important; /* 52/44 */
		letter-spacing: -0.02em;
	}
	/* Khoang cach nut -> anh: Container ket thuc o y=236, khung anh bat dau
	   y=276 nhung anh tran len tren 24px (bbox sau khi xoay bat dau o y=252)
	   => khoang ho nhin thay dung 16px. Selector 2 cap de thang rule
	   .wp-container-* (0,1,0) ma WP sinh ra tu blockGap cua block. */
	.wp-block-group.tapbi-hero {
		row-gap: calc(var(--tapbi-scale-m) * 16px);
	}
	.tapbi-hero .tapbi-hero-illustration {
		/* Frame 48095743 (375 x 260.32): anh "2222 1" xoay -7.95 do, bbox sau
		   khi xoay = 384.73 x 283.79 dat tai x=-10 (tran khoi mep trai man
		   hinh) va y=-24 so voi khung. Vi vay:
		   - be ngang 384.73 (rong hon ca man hinh 375)
		   - margin-left -34 = -24 (padding cua .tapbi-hero) -10 (phan tran)
		   Phan tran trai bi .tapbi-hero{overflow:hidden} cat dung nhu Figma.
		   flex: 0 0 auto de width co hieu luc (flex-basis se de len width). */
		flex: 0 0 auto;
		max-width: none;
		width: calc(var(--tapbi-scale-m) * 384.73px);
		margin-left: calc(var(--tapbi-scale-m) * -34px);
		/* Khoa dung chieu cao bbox thiet ke. File PNG (1638x1304, ti le
		   1.2561) cao hon ti le khung nay (1.3557) vi con chua mot dai trong
		   suot o day - object-fit:cover + object-position top cat dai do di,
		   dung nhu fill scaleMode FILL cua Figma. Khong co buoc nay thi duoi
		   anh ho ra ~22px khoang trang. */
		aspect-ratio: 384.73 / 283.79;
	}
	.tapbi-hero .tapbi-hero-illustration img {
		height: 100%;
		object-fit: cover;
		object-position: center top;
		/* Frame mobile chua co node bong rieng - lay gia tri desktop nhan
		   0.4698 (= 384.73 / 819, ti le be ngang anh mobile so voi desktop),
		   giong cach da lam o .tapbi-product-hero-illustration img ban mobile.
		   Phai ghi de vi ban desktop nhan --tapbi-scale, o 375px bien do chi
		   con 26% nen bong gan nhu mat. */
		filter:
			drop-shadow(calc(var(--tapbi-scale-m) * 6.11px) calc(var(--tapbi-scale-m) * 5.64px) calc(var(--tapbi-scale-m) * 18.32px) rgba(0, 0, 0, 0.1))
			drop-shadow(calc(var(--tapbi-scale-m) * 25.37px) calc(var(--tapbi-scale-m) * 21.61px) calc(var(--tapbi-scale-m) * 33.35px) rgba(0, 0, 0, 0.09))
			drop-shadow(calc(var(--tapbi-scale-m) * 56.84px) calc(var(--tapbi-scale-m) * 48.85px) calc(var(--tapbi-scale-m) * 45.1px) rgba(0, 0, 0, 0.05))
			drop-shadow(calc(var(--tapbi-scale-m) * 101.47px) calc(var(--tapbi-scale-m) * 86.44px) calc(var(--tapbi-scale-m) * 53.08px) rgba(0, 0, 0, 0.01));
	}
	.tapbi-hero .wp-element-button {
		/* Button Container 151x48: chu 14px Bold line-height 24 va padding
		   32/12 da khai bao o theme.json (styles.elements.button) nen o day
		   chi con bo goc 4px cua ban mobile (desktop dang 8px). */
		border-radius: 4px;
	}
}

/* Tuyen dung - Hero: frame Figma 1440x536, layout 2 cot can giua theo chieu doc.
   Cot chu lay tu design/tapbi-recruitment-hero-content.json (node "Content"
   644x264, VERTICAL gap 24, khong padding); cot anh van la uoc luong.
   KHONG co padding tren/duoi (giong ban mobile): 536 = 264 cot chu + 136 tren
   + 136 duoi, con cot anh cao dung bang ca frame. */
.tapbi-recruitment-hero {
	padding-left: var(--wp--preset--spacing--gutter);
	padding-right: var(--wp--preset--spacing--gutter);
	/* min- chu khong phai height: chu dai ra (man hep, doi ngon ngu) thi section
	   cao them chu khong tran ra ngoai. O 1440px con cao dung 536. */
	min-height: calc(var(--tapbi-scale) * 536px);
	position: relative;
	overflow: hidden;
}
.tapbi-recruitment-hero-content {
	max-width: calc(var(--tapbi-scale) * 644px);
	flex: 1 1 320px;
}
.tapbi-recruitment-hero-heading {
	/* -0.03em = -1.92px / 64px (H1, CLAUDE.md) - giong .tapbi-hero-heading */
	letter-spacing: -0.03em;
}
.tapbi-recruitment-hero-desc {
	/* Node "Description" trong JSON: 16px Medium, line-height 24 (1.5), mau
	   nature-700 (dat o pattern), letterSpacing 0% - khac bang style guide
	   (Body 2 la -2%) nen ghi ro 0 de khong bi hieu nham la thieu. */
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: 0;
}
.tapbi-recruitment-hero-illustration {
	flex: 1 1 320px;
	/* 489 x 536: chieu cao dung bang frame (489 = 536 * 518/568 theo ti le anh),
	   nho vay section cao dung 536 ma anh khong bi cat. */
	max-width: calc(var(--tapbi-scale) * 489px);
	width: 100%;
	margin: 0;
	/* Ti le pixel that cua recruitment/hero-illustration.png (518x568) -
	   da crop bo khoang trang trong suot thua o file goc (von 624x694,
	   noi dung that chi chiem gan giua-tren, lech phai/duoi rat nhieu) */
	aspect-ratio: 518 / 568;
}
.tapbi-recruitment-hero-illustration img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

/* Tuyen dung - Hero ban MOBILE - frame Figma 375px (node "Frame 48095746"
   2085:264350, 375x668, dat ngay duoi header 120px nen KHONG co padding
   tren/duoi). Layout VERTICAL itemSpacing 48, padding ngang 24, gom:
     - cot chu 327x348: Title 44/52 Bold -2%, cach 24, Description 16/24
       Medium letterSpacing 0% mau nature-700 do mo 60%
     - cach 48
     - khung anh 327x272, ben trong la node VUONG 254x254 (fill FILL)
   Frame khong co fill rieng -> giu nen neutral-50 cua ban desktop.
   Kich thuoc lay tu frame nay nen scale theo --tapbi-scale-m (baseline 375px),
   KHONG phai --tapbi-scale (1440px). */
@media (max-width: 767px) {
	.tapbi-recruitment-hero {
		padding-left: calc(var(--tapbi-scale-m) * 24px);
		padding-right: calc(var(--tapbi-scale-m) * 24px);
		/* Bo rang buoc cao 536 cua frame desktop: frame mobile (375x668) cao
		   theo noi dung ben trong. Padding doc van la 0 nhu ban desktop -
		   frame bat dau o y=120 (sat day header), ket thuc o day khung anh. */
		min-height: 0;
	}
	/* Selector 2 cap (0,2,0) de thang rule .wp-container-* (0,1,0) ma WP sinh
	   ra tu blockGap trong block JSON. */
	.wp-block-group.tapbi-recruitment-hero {
		row-gap: calc(var(--tapbi-scale-m) * 48px);
	}
	.tapbi-recruitment-hero .tapbi-recruitment-hero-content {
		/* Cot chu rong 327 = 375 - 24*2, tuc chiem tron be ngang. Bo max-width
		   644px cua ban desktop (o 375px chi con 167px). */
		max-width: none;
		flex: 1 1 100%;
		gap: calc(var(--tapbi-scale-m) * 24px);
	}
	.tapbi-recruitment-hero .tapbi-recruitment-hero-heading {
		/* Figma mobile: 44px / 52px / Semibold / -2% (ban desktop: 64px / 1.125 /
		   Semibold / -3%).
		   NGOAI LE so voi quy tac "font-size khong scale" trong CLAUDE.md: o day
		   font-size CO nhan --tapbi-scale-m, cung ly do nhu .tapbi-hero-heading
		   (san 0.8533 => nho nhat 37.5px, van thua nguong doc).
		   !important: font-size vi .has-xx-large-font-size cua WP co san
		   !important; line-height vi block ghi qua inline style.
		   font-weight khong khai bao: H1 = Semibold ca 2 ban, pattern da ghi
		   600 inline roi. */
		font-size: calc(var(--tapbi-scale-m) * 44px) !important;
		line-height: 1.1818 !important; /* 52/44 */
		letter-spacing: -0.02em;
	}
	.tapbi-recruitment-hero .tapbi-recruitment-hero-desc {
		/* Figma mobile: cung mau nature-700 va letterSpacing 0% nhu ban desktop
		   (pattern da dat san), chi khac o cho bi lam mo con 60%. */
		opacity: 0.6;
	}
	/* Khung anh (Frame 48095745) 327x272, ben trong la node VUONG 254x254 can
	   giua ngang (le trai 36 / phai 37). Node do dung fill FILL cua file goc
	   624x694 => he so 254/624 = 0.407; phan noi dung that (file trong theme
	   da crop con 518x568) hien ra rong 518*0.407 = 211, cao 568*0.407 = 231.
	   Khoang trong con lai duoi anh: 272 - 231 = 41.
	   KHONG them drop-shadow nhu ban "San pham": file PNG nay van con nguyen
	   mang bong goc (thay ro o goc duoi-phai), them nua se thanh bong doi.
	   Phai viet selector con (0,2,0) chu KHONG dung mot class don: WordPress
	   co san rule ".is-layout-flex > :is(*, div){margin:0}" (0,1,1) nuot moi
	   margin khai bao bang 1 class - da tung dinh dung loi nay. */
	.tapbi-recruitment-hero > .tapbi-recruitment-hero-illustration {
		/* flex: 0 0 auto de width co hieu luc (flex-basis se de len width) */
		flex: 0 0 auto;
		max-width: none;
		width: calc(var(--tapbi-scale-m) * 211px);
		margin: 0 auto calc(var(--tapbi-scale-m) * 41px);
	}
}

/* San pham - Hero (JSON Figma frame 2049:255325 = 1440x684, trong do khung
   "Logo and Menu" 148 + "Container" 2085:262576 cao 536).
   Container: padding 64 hai ben, KHONG padding tren/duoi, 2 cot can giua theo
   chieu doc - cot chu 668 va khung anh 644, cong lai vua het 1312. */
.tapbi-product-hero {
	padding-left: var(--wp--preset--spacing--gutter);
	padding-right: var(--wp--preset--spacing--gutter);
	position: relative;
	overflow: hidden;
	/* 536px = 684 (chieu cao hero trong Figma) - 148 (khung Logo and Menu) */
	min-height: calc(var(--tapbi-scale) * 536px);
}
.tapbi-product-hero-content {
	/* Cot chu trong Figma (frame 2085:262577) rong dung 668px */
	max-width: calc(var(--tapbi-scale) * 668px);
	flex: 1 1 320px;
}
.tapbi-product-hero-heading {
	/* -0.03em = letterSpacing -3% cua node Title (64px/72px, SemiBold) */
	letter-spacing: -0.03em;
}
.tapbi-product-hero-desc {
	/* Node Description: 16px/24px, Medium, letterSpacing 0% (KHONG phai -2%
	   nhu Body 2 trong style guide chung), mau nature-700 do mo con 60%. */
	font-weight: 500;
	line-height: 1.5;
	opacity: 0.6;
}
.tapbi-product-hero-illustration {
	flex: 1 1 320px;
	/* Trong Figma node anh la khung VUONG 449x449 (fill dang CROP) nen khong
	   suy ra duoc kich thuoc ngoi nha tu do - do tren anh chup frame thi ngoi
	   nha rong ~367px. Ti le 733/836 lay tu file that. */
	max-width: calc(var(--tapbi-scale) * 367px);
	width: 100%;
	aspect-ratio: 733 / 836;
}
.tapbi-product-hero-illustration img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
	/* 5 lop DROP_SHADOW cua node anh trong Figma (lop thu 5 alpha = 0 nen bo).
	   File goc image_house.png co san mang bong rieng nhung da duoc go khi
	   crop - bong that nam o day de scale dung theo --tapbi-scale. */
	filter:
		drop-shadow(calc(var(--tapbi-scale) * 4px) calc(var(--tapbi-scale) * 9px) calc(var(--tapbi-scale) * 23px) rgba(0, 0, 0, 0.1))
		drop-shadow(calc(var(--tapbi-scale) * 17px) calc(var(--tapbi-scale) * 37px) calc(var(--tapbi-scale) * 41px) rgba(0, 0, 0, 0.09))
		drop-shadow(calc(var(--tapbi-scale) * 39px) calc(var(--tapbi-scale) * 84px) calc(var(--tapbi-scale) * 55px) rgba(0, 0, 0, 0.05))
		drop-shadow(calc(var(--tapbi-scale) * 69px) calc(var(--tapbi-scale) * 149px) calc(var(--tapbi-scale) * 66px) rgba(0, 0, 0, 0.01));
}

/* Khung anh trong Figma (frame 2085:262583) rong 644 va sat le phai 64px,
   nhung trong khung do ngoi nha chi chiem x=878..1245 va lech len 10px so voi
   tam - phan con lai la vung trong cua fill CROP. Da crop file PNG sat ngoi
   nha nen phai bu lai bang margin:
     phai  = 1440 - 1245 - 64 = 131
     duoi  = 20  (flex dang can giua nen margin-bottom 20 keo anh len 10)
   PHAI viet selector con (.tapbi-product-hero > ...) chu KHONG dung mot class
   don: WordPress co san rule ".is-layout-flex > :is(*, div){margin:0}" cho moi
   block layout flex, do uu tien (0,1,1) cao hon class don (0,1,0) nen margin
   khai bao bang 1 class luon bi nuot - da dinh dung loi nay. */
.tapbi-product-hero > .tapbi-product-hero-illustration {
	margin: 0 calc(var(--tapbi-scale) * 131px) calc(var(--tapbi-scale) * 20px) 0;
}

/* Tu 1024px ep khong wrap nua (doi PATTERN 2-cot, khong phai kich thuoc) */
@media (min-width: 1024px) {
	.tapbi-product-hero {
		flex-wrap: nowrap !important;
	}
}

/* San pham - Hero ban MOBILE - frame Figma 375px (node "Hero" 2085:264083,
   375x736, nen #f9fafb = neutral-50). Ben trong:
     - "Logo and Menu" 375x120  -> da xu ly o block header mobile dau file
     - "Container" 375x616 dat ngay duoi header (khong padding tren/duoi),
       padding ngang 24, gom:
         + cot chu 327x296: Title 44/52 Bold -2%, cach 24, Description
           16/24 Medium 0% mau nature-700 do mo 60% (giong ban desktop)
         + cach 48
         + khung anh 327x272
   Kich thuoc lay tu frame nay nen scale theo --tapbi-scale-m (baseline
   375px), KHONG phai --tapbi-scale (1440px). */
@media (max-width: 767px) {
	.tapbi-product-hero {
		padding-left: calc(var(--tapbi-scale-m) * 24px);
		padding-right: calc(var(--tapbi-scale-m) * 24px);
		/* Padding doc ghi qua INLINE style cua block nen phai !important.
		   Container dinh sat day header (y 10880 = 10760 + 120) va khung anh
		   ket thuc dung o day Container -> ca hai dau bang 0. */
		padding-top: 0 !important;
		padding-bottom: 0 !important;
		/* Bo min-height 536px cua ban desktop: chieu cao mobile do noi dung
		   quyet dinh (296 + 48 + 272 = 616). */
		min-height: 0;
	}
	/* Selector 2 cap (0,2,0) de thang rule .wp-container-* (0,1,0) ma WP sinh
	   ra tu blockGap trong block JSON. */
	.wp-block-group.tapbi-product-hero {
		row-gap: calc(var(--tapbi-scale-m) * 48px);
	}
	.tapbi-product-hero .tapbi-product-hero-content {
		/* Cot chu rong 327 = 375 - 24*2, tuc chiem tron be ngang. Bo max-width
		   668px cua ban desktop (o 375px chi con 174px). */
		max-width: none;
		flex: 1 1 100%;
		gap: calc(var(--tapbi-scale-m) * 24px);
	}
	.tapbi-product-hero .tapbi-product-hero-heading {
		/* Figma mobile: 44px / 52px / Semibold / -2% (ban desktop: 64px / 1.125 /
		   Semibold / -3%).
		   NGOAI LE so voi quy tac "font-size khong scale" trong CLAUDE.md: o day
		   font-size CO nhan --tapbi-scale-m, cung ly do nhu .tapbi-hero-heading
		   (san 0.8533 => nho nhat 37.5px, van thua nguong doc).
		   !important: font-size vi .has-xx-large-font-size cua WP co san
		   !important; line-height vi block ghi qua inline style.
		   font-weight khong khai bao: H1 = Semibold ca 2 ban, pattern da ghi
		   600 inline roi. */
		font-size: calc(var(--tapbi-scale-m) * 44px) !important;
		line-height: 1.1818 !important; /* 52/44 */
		letter-spacing: -0.02em;
	}
	/* Khung anh (Frame 48095745) 327x272, ben trong la node anh VUONG 252x252
	   (fill CROP) dat sat mep tren, can giua ngang (le trai 38 / phai 37).
	   Node vuong ban desktop la 449x449 chua ngoi nha rong 367 => ti le
	   252/449 cho ngoi nha mobile rong 206 (cao 235 theo ti le file 733/836).
	   Phan trong con lai duoi anh: 20 (khung) + 8.5 (ngoi nha can giua trong
	   node vuong) ~ 28.
	   Phai viet selector con (0,2,0) chu KHONG dung mot class don - ly do xem
	   ghi chu o rule margin ban desktop phia tren. */
	.tapbi-product-hero > .tapbi-product-hero-illustration {
		/* flex: 0 0 auto de width co hieu luc (flex-basis se de len width) */
		flex: 0 0 auto;
		max-width: none;
		width: calc(var(--tapbi-scale-m) * 206px);
		margin: 0 auto calc(var(--tapbi-scale-m) * 28px);
	}
	.tapbi-product-hero-illustration img {
		/* 4 lop DROP_SHADOW cua node anh trong frame mobile (lop thu 5 alpha = 0
		   nen bo). Dung bang gia tri desktop nhan 0.5613 - phai ghi de vi ban
		   desktop nhan --tapbi-scale, o 375px chi con 26% nen bong gan nhu mat. */
		filter:
			drop-shadow(calc(var(--tapbi-scale-m) * 2.25px) calc(var(--tapbi-scale-m) * 5.06px) calc(var(--tapbi-scale-m) * 12.93px) rgba(0, 0, 0, 0.1))
			drop-shadow(calc(var(--tapbi-scale-m) * 9.56px) calc(var(--tapbi-scale-m) * 20.81px) calc(var(--tapbi-scale-m) * 23.06px) rgba(0, 0, 0, 0.09))
			drop-shadow(calc(var(--tapbi-scale-m) * 21.93px) calc(var(--tapbi-scale-m) * 47.24px) calc(var(--tapbi-scale-m) * 30.93px) rgba(0, 0, 0, 0.05))
			drop-shadow(calc(var(--tapbi-scale-m) * 38.8px) calc(var(--tapbi-scale-m) * 83.79px) calc(var(--tapbi-scale-m) * 37.11px) rgba(0, 0, 0, 0.01));
	}
}

/* San pham - "San pham noi bat" (JSON Figma node 2085:262585, 1440x808):
   padding doc 100, cac phan cach nhau 48, noi dung can giua.
   Carousel dang coverflow: 1 anh lon 866x436 o giua, 2 anh 290x332 mo 50% hai
   ben (dat tuyet doi dung toa do Figma) - xem assets/js/product-showcase.js. */
.tapbi-showcase {
	padding-left: var(--wp--preset--spacing--gutter);
	padding-right: var(--wp--preset--spacing--gutter);
}
.tapbi-showcase-head,
.tapbi-showcase-stage {
	width: 100%;
}
.tapbi-showcase-heading {
	/* -2% theo bang type-scale (size 44px, line-height 52) */
	letter-spacing: -0.02em;
	margin: 0;
}

/* Tabbar loc danh muc. So do lay tu design/mobile/tapbi-showcase-tabs.json
   (frame 1440, tabbar 300x40 dat tai x=570 tuc can giua): o "Game" 140x40,
   o "Application" 160x40, khung bo goc 8 vien 1px #e5e6eb. Padding trong o giu
   co dinh (ngoai le vung thao tac tay trong CLAUDE.md), rieng chieu rong o thi
   scale theo ti le Figma. */
.tapbi-showcase-tabs {
	display: flex;
	border: 1px solid var(--wp--preset--color--nature-200);
	border-radius: 8px;
	overflow: hidden;
}
.tapbi-showcase-tab {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	width: calc(var(--tapbi-scale) * 140px);
	min-width: 104px;
	padding: 8px 24px;
	border: 0;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--muted);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
	line-height: 1.5;
	cursor: pointer;
}
/* Ban thiet ke KHONG co duong ke giua 2 o (ca hai container deu khong co
   stroke) - ranh gioi da ro nho o dang chon co nen cam. */
.tapbi-showcase-tab[data-category="app"] {
	/* O "Application" rong 160 chu khong phai 140 vi chu dai hon. */
	width: calc(var(--tapbi-scale) * 160px);
	min-width: 119px;
	/* Khoang cach icon - chu o o nay la 8 (icon x=21..41, chu x=49). */
	gap: 8px;
}
.tapbi-showcase-tab.is-active {
	background: var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--base);
}
.tapbi-showcase-tab svg {
	flex: 0 0 auto;
}

/* Khung carousel 1312x436 */
.tapbi-showcase-stage {
	position: relative;
	max-width: calc(var(--tapbi-scale) * 1312px);
	height: calc(var(--tapbi-scale) * 436px);
	margin-inline: auto;
}
.tapbi-showcase-slide {
	position: absolute;
	top: calc(var(--tapbi-scale) * 52px);
	width: calc(var(--tapbi-scale) * 290px);
	height: calc(var(--tapbi-scale) * 332px);
	border-radius: calc(var(--tapbi-scale) * 24px);
	overflow: hidden;
	z-index: 1;
	opacity: 0.5;
}
/* Ca BA o deu dinh vi bang 'left' (khong dung 'right', khong dung transform):
   trinh duyet chi noi suy duoc giua hai gia tri CUNG mot thuoc tinh, nen day la
   dieu kien de the truot muot tu o nay sang o kia.
   Quy doi tuong duong chinh xac, khong doi trang thai nghi mot pixel nao:
     - o giua: left:50% + translateX(-50%)  ==  left: calc(50% - scale*433px)
               (433 = 866/2, dung bang phan translateX bu lai)
     - o phai: right: 0                     ==  left: calc(100% - scale*290px) */
.tapbi-showcase-slide.is-prev {
	left: 0;
}
.tapbi-showcase-slide.is-next {
	left: calc(100% - var(--tapbi-scale) * 290px);
}
.tapbi-showcase-slide.is-center {
	top: 0;
	left: calc(50% - var(--tapbi-scale) * 433px);
	width: calc(var(--tapbi-scale) * 866px);
	height: calc(var(--tapbi-scale) * 436px);
	opacity: 1;
	z-index: 2;
}

/* --- Doi slide: TRUOT ------------------------------------------------------
   Ban truoc cho CA BA slide ve opacity 0 roi cho ve, tuc la ca cum chop mot
   cai - ke ca hai the ben khong he doi noi dung. Nang hon nua: the moi vao di
   ra tu display:none nen khong co gia tri dau de transition, no bat len ngay
   trong khi hai the kia mo dan -> hai nhip lech nhau, doc ra thanh loi.
   Bay gio moi the tu truot tu o cu sang o moi. */
.tapbi-showcase-slide {
	transition:
		left 400ms var(--tapbi-ease),
		top 400ms var(--tapbi-ease),
		width 400ms var(--tapbi-ease),
		height 400ms var(--tapbi-ease),
		opacity 400ms var(--tapbi-ease);
}

/* The di NGUOC dong (o trai nhay sang o phai khi bam next). De no truot that
   thi no bay ngang qua ca man hinh, nguoc chieu voi hai the kia -> roi mat.
   Thay vao do: doi vi tri TUC THI (0s) nhung TRE 200ms, dung luc keyframe ben
   duoi dang keo opacity ve 0, nen cu nhay bi che kin. Nho meo nay ma
   product-showcase.js van chi goi render() DUNG MOT LAN o thoi diem 0. */
.tapbi-showcase-slide.is-wrap {
	transition:
		left 0s 200ms,
		top 0s 200ms,
		width 0s 200ms,
		height 0s 200ms;
	animation: tapbi-slide-wrap 400ms var(--tapbi-ease);
}
@keyframes tapbi-slide-x {
	0% {
		transform: translateX(0);
		opacity: 1;
	}
	49% {
		transform: translateX(-100%);
		opacity: 0;
	}
	51% {
		transform: translateX(100%);
		opacity: 0;
	}
	100% {
		transform: translateX(0);
		opacity: 1;
	}
}
@keyframes tapbi-slide-wrap {
	0%,
	100% {
		opacity: 0.5;
	}
	46%,
	54% {
		opacity: 0;
	}
}

/* Khoi thong tin (ten + icon + badge) chi hien o the giua. Neu de nguyen thi
   ngay khi the ben phai nhan class is-center, chu 36px va icon 96px hien luon
   ben trong the con dang be 290px suot 400ms - nhin vo. An di trong luc truot,
   truot xong moi hien ra. */
.tapbi-showcase-info {
	transition: opacity 200ms var(--tapbi-ease);
}
.tapbi-showcase-stage.is-sliding .tapbi-showcase-info {
	opacity: 0;
}

.tapbi-showcase-shot {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
/* Lop phu gradient + khoi thong tin chi hien o the giua (2 the ben chi la anh) */
.tapbi-showcase-slide.is-center::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 86.74%);
	pointer-events: none;
}
.tapbi-showcase-info {
	display: none;
}
.tapbi-showcase-slide.is-center .tapbi-showcase-info {
	display: flex;
	position: absolute;
	left: calc(var(--tapbi-scale) * 32px);
	right: calc(var(--tapbi-scale) * 32px);
	bottom: calc(var(--tapbi-scale) * 32px);
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--40);
	z-index: 1;
}
.tapbi-showcase-app {
	display: flex;
	align-items: center;
	gap: calc(var(--tapbi-scale) * 24px);
}
.tapbi-showcase-icon {
	/* Figma dat icon FIXED 96 (khong co gian). Thieu flex-shrink:0 thi cot chu
	   ben canh dai hon cho trong se bop icon nho lai vai phan pixel. */
	flex: 0 0 auto;
	width: calc(var(--tapbi-scale) * 96px);
	height: calc(var(--tapbi-scale) * 96px);
	border-radius: calc(var(--tapbi-scale) * 12px);
	object-fit: cover;
	display: block;
}
.tapbi-showcase-meta {
	display: flex;
	flex-direction: column;
	gap: calc(var(--tapbi-scale) * 8px);
}
.tapbi-showcase-label {
	margin: 0;
	/* Viet hoa o day chu KHONG dung strtoupper() trong PHP: ham do dem theo byte
	   nen lam vo chu tieng Viet co dau khi admin tu nhap nhan the loai. */
	text-transform: uppercase;
	color: var(--wp--preset--color--secondary);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
	line-height: 1.5;
}
.tapbi-showcase-name {
	margin: 0;
	color: var(--wp--preset--color--base);
	/* H4 trong style guide: 36px/44, Bold, letter-spacing -2% */
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 700;
	line-height: 1.2222;
	letter-spacing: -0.02em;
}
.tapbi-showcase-stores {
	flex: 0 0 auto;
	display: flex;
	flex-wrap: wrap;
	gap: calc(var(--tapbi-scale) * 12px);
}
.tapbi-showcase-store {
	flex: 0 0 auto;
	line-height: 0;
}
.tapbi-showcase-store img {
	width: calc(var(--tapbi-scale) * 162px);
	height: auto;
	display: block;
}

/* Nut chuyen san pham: nam de len the giua, cach mep the ~44px (do tren anh
   Figma - phan nay JSON bi cat nen khong co so do that). */
.tapbi-showcase-prev,
.tapbi-showcase-next {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 8px;
	border: 0;
	background: transparent;
	color: var(--wp--preset--color--base);
	cursor: pointer;
	filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.35));
}
.tapbi-showcase-prev {
	left: calc(var(--tapbi-scale) * 247px);
}
.tapbi-showcase-next {
	right: calc(var(--tapbi-scale) * 247px);
}
.tapbi-showcase-empty {
	/* .tapbi-showcase-stage cao co dinh 436px nen dong chu phai tu can giua,
	   khong thi no dinh sat mep tren cua mot khoang trong. */
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	text-align: center;
	color: var(--wp--preset--color--muted);
}
/* display:flex de len quy tac an mac dinh cua [hidden] - thieu dong nay thi
   dong thong bao hien de len ca carousel. */
.tapbi-showcase-empty[hidden] {
	display: none;
}

/* Duoi 1024px: bo kieu coverflow (2 anh ben qua nho de nhin), the giua tran
   het chieu ngang va tu cao theo ti le anh goc. */
@media (max-width: 1023px) {
	.tapbi-showcase-stage {
		height: auto;
	}
	/* Khung khong con cao co dinh 436 nen dong thong bao khong the can giua bang
	   inset:0 (se sup xuong con 0). Tra ve dong chay binh thuong.
	   Padding co dinh: day la trang thai phu, khong co trong Figma. */
	.tapbi-showcase-empty {
		position: static;
		padding: 48px 0;
	}
	.tapbi-showcase-slide.is-prev,
	.tapbi-showcase-slide.is-next {
		display: none;
	}
	/* Duoi 1024px chi MOT the hien nen khong co gi de truot qua lai giua cac
	   the. Thay vao do cho ca khung boc truot: ra trai -> trao noi dung luc dang
	   o ngoai khung nhin -> vao lai tu phai. Chi mot phan tu chay transform nen
	   chay tren GPU.
	   overflow:hidden de khung truot ra khong tran sang phan khac cua trang;
	   o trang thai nghi khong co gi vuot khoi stage nen them dong nay khong doi
	   giao dien. */
	.tapbi-showcase-stage {
		overflow: hidden;
	}
	.tapbi-showcase-stage.is-sliding .tapbi-showcase-slides {
		animation: tapbi-slide-x 400ms var(--tapbi-ease);
	}
	.tapbi-showcase-stage.is-sliding.is-back .tapbi-showcase-slides {
		/* Bam prev thi chay nguoc: ra phai roi vao tu trai. */
		animation-direction: reverse;
	}
	.tapbi-showcase-slide.is-center {
		position: relative;
		top: auto;
		left: auto;
		transform: none;
		width: 100%;
		/* height auto + ti le anh goc: the giua khong con bi keo theo chieu cao
		   co dinh 436 cua khung, tu cao theo be ngang man hinh */
		height: auto;
		aspect-ratio: 866 / 436;
	}
	.tapbi-showcase-prev {
		left: 0;
	}
	.tapbi-showcase-next {
		right: 0;
	}
}

/* "San pham noi bat" ban MOBILE - frame Figma 375px (node "Header Container"
   2085:264145, 375x756, nam ngay duoi Hero). Ben trong:
     - khung dau 327x192 tai y=80 (padding tren 80, ngang 24):
         + tieu de 40/48 Bold -2% can giua
         + cach 24
         + tabbar 327x120: 3 o XEP DOC, moi o 327x40 (ban desktop: 3 o nam
           NGANG 140x40); vien 1px nature-200 bo goc 8 bao ngoai, o "IOS" co
           duong ke DUOI (ban desktop la ke PHAI)
     - cach 48
     - the anh 327x436 bo goc 24, ket thuc dung o day frame => KHONG padding
       duoi. Trong the: khoi thong tin cach le 16, xep DOC (ban desktop nam
       ngang, cach le 32) gom hang icon 96 + chu, cach 24, roi badge
       Google Play 163 rong; hai nut chuyen o hai mep, cach 16, mo 80%.
   Kich thuoc lay tu frame nay nen scale theo --tapbi-scale-m (baseline
   375px), KHONG phai --tapbi-scale (1440px). */
@media (max-width: 767px) {
	.tapbi-showcase {
		padding-left: calc(var(--tapbi-scale-m) * 24px);
		padding-right: calc(var(--tapbi-scale-m) * 24px);
		/* Padding doc ghi qua INLINE style cua block nen phai !important. */
		padding-top: calc(var(--tapbi-scale-m) * 80px) !important;
		padding-bottom: 0 !important;
	}
	/* Selector 2 cap (0,2,0) de thang rule .wp-container-* (0,1,0) ma WP sinh
	   ra tu blockGap trong block JSON. */
	.wp-block-group.tapbi-showcase {
		row-gap: calc(var(--tapbi-scale-m) * 48px);
	}
	.wp-block-group.tapbi-showcase-head {
		row-gap: calc(var(--tapbi-scale-m) * 24px);
	}
	.tapbi-showcase .tapbi-showcase-heading {
		/* 40/48 Bold -2% (ban desktop 44px / 1.1818). !important vi
		   .has-section-heading-font-size cua WP co san !important, line-height
		   ghi qua inline style cua block. */
		font-size: calc(var(--tapbi-scale-m) * 40px) !important;
		line-height: 1.2 !important; /* 48/40 */
	}
	.tapbi-showcase-tabs {
		flex-direction: column;
		/* Khung tabbar la con cua mot flex column co align-items:center nen mac
		   dinh chi rong bang noi dung - phai ep tron 327. box-sizing de vien 1px
		   nam TRONG 327 (Figma ve stroke kieu INSIDE). */
		width: 100%;
		box-sizing: border-box;
	}
	.tapbi-showcase-tab,
	.tapbi-showcase-tab[data-category="app"] {
		/* Xep doc nen moi o rong tron khung (327) thay vi 140/160 nhu ban
		   desktop. Khoa cung chieu cao 40 + box-sizing: border-box de vien
		   khong cong them 1px lam lech ca khung xuong. */
		width: 100%;
		min-width: 0;
		height: calc(var(--tapbi-scale-m) * 40px);
		box-sizing: border-box;
	}
	.tapbi-showcase-slide {
		border-radius: calc(var(--tapbi-scale-m) * 24px);
	}
	.tapbi-showcase-slide.is-center {
		/* The anh 327x436 (ban desktop 866x436). Rule o block max-width:1023px
		   phia tren dat 866/436 - block nay nam SAU nen de len duoc. */
		aspect-ratio: 327 / 436;
	}
	.tapbi-showcase-slide.is-center .tapbi-showcase-info {
		/* Ban desktop: icon+chu ben trai, badge ben phai (space-between).
		   Ban mobile: xep DOC, badge nam duoi. */
		flex-direction: column;
		align-items: flex-start;
		gap: calc(var(--tapbi-scale-m) * 24px);
		left: calc(var(--tapbi-scale-m) * 16px);
		right: calc(var(--tapbi-scale-m) * 16px);
		bottom: calc(var(--tapbi-scale-m) * 16px);
	}
	.tapbi-showcase-app {
		/* Khoang icon - chu la 16 chu khong phai 24 nhu ban desktop: trong
		   design/mobile/tapbi-showcase-slide.json icon chiem x 0..96, cot chu
		   bat dau tai x=112 va rong 182 (96 + 16 + 182 = 294 = be ngang khoi
		   thong tin). */
		gap: calc(var(--tapbi-scale-m) * 16px);
	}
	.tapbi-showcase-icon {
		width: calc(var(--tapbi-scale-m) * 96px);
		height: calc(var(--tapbi-scale-m) * 96px);
		border-radius: calc(var(--tapbi-scale-m) * 12px);
	}
	.tapbi-showcase-meta {
		gap: calc(var(--tapbi-scale-m) * 8px);
	}
	.tapbi-showcase-name {
		/* Van la 36/44 Bold -2% nhu ban desktop, nhung preset x-large chay theo
		   co che fluid (28-36px) nen o 375px chi con ~28px - phai ghi lai dung
		   36px cua frame mobile. */
		font-size: calc(var(--tapbi-scale-m) * 36px);
	}
	.tapbi-showcase-stores {
		/* 2 nut 163px khong nam vua the rong 327 -> nut thu hai xuong dong. */
		gap: calc(var(--tapbi-scale-m) * 12px);
	}
	.tapbi-showcase-store img {
		width: calc(var(--tapbi-scale-m) * 163px);
	}
	/* Nut chuyen cach mep the 16: nut co padding 8 nen day ra 8 la vua. */
	.tapbi-showcase-prev {
		left: calc(var(--tapbi-scale-m) * 8px);
	}
	.tapbi-showcase-next {
		right: calc(var(--tapbi-scale-m) * 8px);
	}
	.tapbi-showcase-prev,
	.tapbi-showcase-next {
		opacity: 0.8; /* dung theo frame mobile */
	}
}

/* Benefit (Tuyen dung): luoi 6 the 2 hang x 3 cot trong 1 khung bo goc.
   Duong ke doc/ngang giua cac the/hang mo phong theo Figma (row co
   border-bottom rieng cho hang khong phai hang cuoi, card co border-right
   rieng cho the khong phai the cuoi hang). */
.tapbi-benefit-grid {
	max-width: calc(var(--tapbi-scale) * 1312px);
	width: 100%;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--nature-200);
	border-radius: calc(var(--tapbi-scale) * 40px);
	box-shadow: 0 calc(var(--tapbi-scale) * 3px) calc(var(--tapbi-scale) * 6px) rgba(57, 57, 57, 0.08);
	overflow: hidden;
}
.tapbi-benefit-row {
	align-items: stretch;
}
.tapbi-benefit-row.has-row-divider {
	border-bottom: 1px solid var(--wp--preset--color--nature-200);
}
.tapbi-benefit-card {
	flex: 1 1 0;
	min-height: calc(var(--tapbi-scale) * 400px);
	padding: 0 var(--wp--preset--spacing--40);
	transition: background-color 0.2s ease;
}
.tapbi-benefit-card.has-col-divider {
	border-right: 1px solid var(--wp--preset--color--nature-200);
}
/* Hover: o dang tro chuot doi nen sang nature-50 (#f9fafb). Boc trong
   (hover: hover) de may cam ung khong bi "dinh" mau sau khi cham. */
@media (hover: hover) {
	.tapbi-benefit-card:hover {
		background-color: var(--wp--preset--color--nature-50);
	}
}
.tapbi-benefit-icon {
	margin: 0;
}
.tapbi-benefit-icon img {
	width: calc(var(--tapbi-scale) * 80px);
	height: calc(var(--tapbi-scale) * 80px);
	/* Group.png (dong ho bam gio) khong vuong (57x77) - contain de khong bi bop meo. */
	object-fit: contain;
	display: block;
}
.tapbi-benefit-title,
.tapbi-benefit-desc {
	margin: 0;
}

/* Benefit (Tuyen dung) ban MOBILE - frame Figma 375px, node "Header Container"
   (375x2472) nam trong "Main Container" (VERTICAL, padding tren 80, gap 80).
   Header Container: padding ngang 24, gap 48, gom:
     - "Header Title" 327x144: 40/48 Bold -2%, can giua, mau primary
     - "Features Container" 327x2280: nen trang, bo goc 32, vien 1px nature-200,
       bong 0/3 blur 6 mau #393939 8% - ben trong la 6 the XEP DOC (desktop la
       2 hang x 3 cot), moi the 327x380.
   Moi the: padding ngang 32, can giua ca 2 chieu, gap icon <-> chu 48; ben
   trong Feature Content gap 16 (Title 24/32 Bold -2% + Description 16/24
   Medium letterSpacing 0% mau nature-700 do mo 60%).
   Duong ke: Figma dat stroke tren/duoi cho the 2, 4 va tren cho the 6 => quy
   ra la CO duong ke giua moi cap the lien tiep, KHONG co duong ke duoi the 6.
   Ban desktop da co san .has-col-divider (ke doc, 2 the dau moi hang) va
   .has-row-divider (ke ngang duoi hang 1) - khi xep doc chi can doi
   .has-col-divider tu border-right sang border-bottom la ra dung 5 duong ke.
   Khoang cach 80 giua Benefit va "Ban Tin Tuyen Dung" (gap cua Main Container)
   dat vao padding-bottom cua Benefit, vi block .tapbi-joblist ngay duoi dang
   de padding-top = 0.
   Kich thuoc lay tu frame nay nen scale theo --tapbi-scale-m (baseline 375px),
   KHONG phai --tapbi-scale (1440px). */
@media (max-width: 767px) {
	.tapbi-benefit {
		/* Padding ghi qua INLINE style cua block nen phai !important. */
		padding-left: calc(var(--tapbi-scale-m) * 24px) !important;
		padding-right: calc(var(--tapbi-scale-m) * 24px) !important;
		padding-top: calc(var(--tapbi-scale-m) * 80px) !important;
		padding-bottom: calc(var(--tapbi-scale-m) * 80px) !important;
	}
	/* Selector 2 cap (0,2,0) de thang rule .wp-container-* (0,1,0) ma WP sinh
	   ra tu blockGap trong block JSON. */
	.wp-block-group.tapbi-benefit {
		row-gap: calc(var(--tapbi-scale-m) * 48px);
	}
	.tapbi-benefit .tapbi-benefit-heading {
		/* Figma mobile: 40px / 48px / Bold / -2% (ban desktop: 44px / 1.1818).
		   NGOAI LE so voi quy tac "font-size khong scale" trong CLAUDE.md - cung
		   ly do da ghi o .tapbi-hero-heading (san 0.8533 => nho nhat 34px).
		   !important: font-size vi .has-section-heading-font-size cua WP co san
		   !important; line-height vi block ghi qua inline style. */
		font-size: calc(var(--tapbi-scale-m) * 40px) !important;
		line-height: 1.2 !important; /* 48/40 */
		letter-spacing: -0.02em;
	}
	.tapbi-benefit .tapbi-benefit-grid {
		/* Khung rong 327 = 375 - 24*2, tuc tron be ngang. Bo max-width 1312px
		   cua ban desktop. */
		max-width: none;
		border-radius: calc(var(--tapbi-scale-m) * 32px);
		box-shadow: 0 calc(var(--tapbi-scale-m) * 3px) calc(var(--tapbi-scale-m) * 6px) rgba(57, 57, 57, 0.08);
	}
	.tapbi-benefit .tapbi-benefit-row {
		/* 3 the trong hang xep doc lai. align-items: stretch da co o ban desktop
		   nen the tu tran het be ngang. */
		flex-direction: column;
	}
	.wp-block-group.tapbi-benefit-card {
		/* flex: 0 0 auto de bo flex-basis: 0 cua ban desktop (trong cot doc no
		   lam chieu cao the phu thuoc flex-grow thay vi noi dung). */
		flex: 0 0 auto;
		min-height: calc(var(--tapbi-scale-m) * 380px);
		padding: 0 calc(var(--tapbi-scale-m) * 32px);
		/* gap icon <-> khoi chu */
		gap: calc(var(--tapbi-scale-m) * 48px);
	}
	.tapbi-benefit .tapbi-benefit-card.has-col-divider {
		/* Xep doc roi nen ke doc thanh ke ngang. */
		border-right: 0;
		border-bottom: 1px solid var(--wp--preset--color--nature-200);
	}
	/* Khoi chu ben trong the (Feature Content) - la .wp-block-group duy nhat
	   trong the (anh la <figure>), gap 16 thay cho spacing|15 = 12px. */
	.tapbi-benefit-card > .wp-block-group {
		gap: calc(var(--tapbi-scale-m) * 16px);
	}
	.tapbi-benefit .tapbi-benefit-icon img {
		/* Icon van 80x80 nhu Figma desktop, nhung ban desktop nhan --tapbi-scale
		   nen o 375px chi con ~20px - phai ghi de theo --tapbi-scale-m. */
		width: calc(var(--tapbi-scale-m) * 80px);
		height: calc(var(--tapbi-scale-m) * 80px);
	}
	.tapbi-benefit .tapbi-benefit-title {
		/* 24/32 Bold -2%. Token `large` la fluid 20-24px nen o 375px WordPress
		   tinh ra ~20px - phai ghi font-size tuong minh moi dung Figma.
		   !important vi .has-large-font-size cua WP co san !important. */
		font-size: calc(var(--tapbi-scale-m) * 24px) !important;
		line-height: 1.3333; /* 32/24 */
		letter-spacing: -0.02em;
	}
	.tapbi-benefit .tapbi-benefit-desc {
		/* Figma mobile: 16/24 Medium, letterSpacing 0%, mau nature-700 do mo
		   con 60% (ban desktop dang la mau muted dac).
		   !important vi .has-muted-color cua WP co san !important. */
		color: var(--wp--preset--color--nature-700) !important;
		opacity: 0.6;
		font-weight: 500;
		line-height: 1.5;
		letter-spacing: 0;
	}
}

/* Job Listing (Tuyen dung): tieu de + toggle grid/list (da noi JS o
   assets/js/job-listing.js), sidebar loc phong ban/cap do, danh sach tin dang
   card. JSON Figma ban mobile da xac nhan bo mau cua the: "MOI NHAT" dung
   success-light/success, the phong ban dung secondary-100/secondary-800,
   chu "Het han" dung #df1c41 (= danger-bright, moi them vao theme.json). */
.tapbi-joblist-header {
	/* WP khong tu stretch block con trong flex doc (mac dinh align-items:
	   center → header bi hug width rieng va nam giua trang thay vi tran
	   het 1312px), phai set width tuong minh moi de space-between dung. */
	align-items: center;
	width: 100%;
}
.tapbi-joblist-view-toggle {
	/* Theo JSON Figma xac nhan: itemSpacing 8px = spacing--20 (truoc do nham spacing--15/12px) */
	gap: var(--wp--preset--spacing--20);
}
.tapbi-joblist-view-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: calc(var(--tapbi-scale) * 40px);
	height: calc(var(--tapbi-scale) * 40px);
	padding: 0;
	border: 1px solid var(--wp--preset--color--nature-200);
	border-radius: calc(var(--tapbi-scale) * 4px);
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--nature-300);
	cursor: pointer;
}
.tapbi-joblist-view-btn svg {
	width: calc(var(--tapbi-scale) * 24px);
	height: calc(var(--tapbi-scale) * 24px);
	display: block;
}
.tapbi-joblist-view-btn.is-active {
	color: var(--wp--preset--color--nature-900);
}
/* Nut "Filter" chi co trong thiet ke MOBILE - mac dinh an, block
   @media (max-width: 767px) ben duoi bat len va an cum toggle luoi/danh sach. */
.tapbi-joblist-filter-toggle {
	display: none;
	align-items: center;
	gap: 4px;
	/* Padding vung thao tac tay - giu co dinh, khong scale (xem CLAUDE.md). */
	padding: 8px 16px;
	border: 1px solid var(--wp--preset--color--nature-200);
	border-radius: 4px;
	background: var(--wp--preset--color--base);
	/* Figma ghi #0b0a0f - lech khong nhin ra so voi nature-900 (#161d21) dang
	   la mau chu goc cua theme nen dung luon, khoi them mau moi. */
	color: var(--wp--preset--color--nature-900);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	line-height: 1.7143; /* 24/14 */
	cursor: pointer;
}
.tapbi-joblist-filter-toggle svg {
	width: 24px;
	height: 24px;
	display: block;
}
.tapbi-joblist-filter-toggle.is-active {
	/* Frame "List View Button" trang thai da mo: nen #0b0a0f, chu + icon trang.
	   Dung nature-900 thay #0b0a0f - lech khong nhin ra. */
	background: var(--wp--preset--color--nature-900);
	border-color: var(--wp--preset--color--nature-900);
	color: var(--wp--preset--color--base);
}
.tapbi-joblist-body {
	align-items: flex-start;
	gap: var(--wp--preset--spacing--25);
	width: 100%;
}
.tapbi-joblist-filters {
	flex: 0 0 calc(var(--tapbi-scale) * 421px);
	max-width: calc(var(--tapbi-scale) * 421px);
	width: 100%;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--nature-200);
	border-radius: calc(var(--tapbi-scale) * 24px);
	box-shadow: 0 calc(var(--tapbi-scale) * 3px) calc(var(--tapbi-scale) * 6px) rgba(57, 57, 57, 0.08);
	padding: var(--wp--preset--spacing--25);
}
.tapbi-filter-label {
	margin: 0;
	color: var(--wp--preset--color--primary);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
	line-height: 1.5;
}
.tapbi-filter-options {
	gap: var(--wp--preset--spacing--30);
}
.tapbi-filter-chip {
	display: inline-flex;
	align-items: center;
	border: none;
	border-radius: calc(var(--tapbi-scale) * 8px);
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--nature-900);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 500;
	line-height: 1.5;
	cursor: pointer;
}
.tapbi-filter-chip.is-active {
	background: var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--base);
}
.tapbi-filter-count {
	color: var(--wp--preset--color--muted);
}
.tapbi-joblist-jobs {
	flex: 1 1 calc(var(--tapbi-scale) * 400px);
	width: 100%;
}
/* Nut "Xem Them" nam giua cot job. Khung .wp-block-buttons von da co
   justifyContent:center trong block JSON, nhung .tapbi-joblist-jobs la flex
   COLUMN - WordPress set san align-items:flex-start cho no nen khung nut bi co
   lai vua bang be rong nut, can giua ben trong thanh vo nghia. Ep khung tran
   het hang thi nut moi ra giua that.
   Selector con (0,2,0) de thang rule .wp-container-* (0,1,0) WP tu sinh. */
.tapbi-joblist-jobs > .wp-block-buttons {
	width: 100%;
	justify-content: center;
}
.tapbi-job-card {
	/* Kich thuoc/mau theo dung JSON Figma (node Job Card, xac nhan day du). */
	width: 100%;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--nature-200);
	border-radius: calc(var(--tapbi-scale) * 24px);
	box-shadow: 0 calc(var(--tapbi-scale) * 3px) calc(var(--tapbi-scale) * 6px) rgba(57, 57, 57, 0.08);
	padding: var(--wp--preset--spacing--25);
	/* The la <a> (dan sang trang chi tiet job) - bo underline/mau link mac dinh. */
	text-decoration: none;
	color: inherit;
}
.tapbi-job-tags {
	gap: var(--wp--preset--spacing--20);
}
.tapbi-job-tag {
	display: inline-flex;
	border-radius: calc(var(--tapbi-scale) * 4px);
	padding: calc(var(--tapbi-scale) * 4px) var(--wp--preset--spacing--15);
	background: var(--wp--preset--color--secondary-100);
	color: var(--wp--preset--color--secondary-800);
	font-size: var(--wp--preset--font-size--caption-2);
	font-weight: 400;
	line-height: 1.333;
	letter-spacing: -0.02em;
}
.tapbi-job-tag.is-new {
	background: var(--wp--preset--color--success-light);
	color: var(--wp--preset--color--success);
}
.tapbi-job-title {
	margin: 0;
	color: var(--wp--preset--color--primary);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 700;
	line-height: 1.333;
	letter-spacing: -0.02em;
}
.tapbi-job-meta {
	gap: var(--wp--preset--spacing--45);
}
.tapbi-job-meta-item {
	display: flex;
	flex-direction: column;
	gap: calc(var(--tapbi-scale) * 6px);
}
.tapbi-job-meta-label {
	margin: 0;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
	line-height: 1.5;
}
.tapbi-job-meta-value {
	margin: 0;
	color: var(--wp--preset--color--primary);
	font-size: var(--wp--preset--font-size--title);
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: -0.02em;
}
.tapbi-job-meta-value.is-expired {
	/* JSON Figma ban mobile (node "Job Deadline Value" cua the het han) ghi ro
	   #df1c41 = danger-bright, chu van Medium nhu 2 gia tri kia. Khac slug
	   `danger` (#b42318) - cai do danh cho loi form.
	   (Truoc day cho la xam dam + in dam vi chua co data Figma.) */
	color: var(--wp--preset--color--danger-bright);
}
/* Dang luoi (nut toggle grid) - selector kep de thang layout stylesheet WP
   tu sinh cho .wp-block-group (display:flex). Mobile-first: 1 cot, tu 768px
   len 2 cot. Gap dung token spacing (da scale theo --tapbi-scale). */
.tapbi-joblist-jobs.is-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--25);
	align-items: stretch;
}
/* Nut "Xem Them" khi khong con tin de tai: LAM MO chu khong an. An nut lam bo
   cuc nhay va nguoi dung khong biet la da xem het hay nut hong.
   Dung [aria-disabled] chu khong phai [disabled] vi day la the <a> - thuoc tinh
   disabled khong co tac dung tren <a>, chi <button>/<input> moi hieu. Do mo 0.6
   lay theo .tapbi-apply-submit[disabled] (dong ~2021) cho dong bo. */
.tapbi-joblist-loadmore[aria-disabled="true"] {
	opacity: 0.6;
	cursor: default;
}

/* Thong bao rong + nut "Xem Them" nam trong container - phai tran het hang. */
.tapbi-joblist-jobs.is-grid > .tapbi-joblist-empty,
.tapbi-joblist-jobs.is-grid > .wp-block-buttons {
	grid-column: 1 / -1;
}
/* Card cao bang nhau trong 1 hang - ghim khoi meta xuong day. */
.tapbi-joblist-jobs.is-grid > .tapbi-job-card {
	height: 100%;
	justify-content: space-between;
}
@media (min-width: 768px) {
	.tapbi-joblist-jobs.is-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
/* .wp-block-group set display:flex qua block layout - ep [hidden] thang de
   JS filter/xem-them (assets/js/job-listing.js) an duoc job card that su. */
.tapbi-job-card[hidden] {
	display: none;
}

/* Ban Tin Tuyen Dung ban MOBILE - frame Figma 375px, node "Job Section"
   (375x1482, khong co fill rieng -> giu nen trang cua ban desktop):
   padding ngang 24, KHONG padding tren/duoi, gap 48, gom
     - "Job Section Header" 327x160: XEP DOC (desktop xep ngang space-between),
       gap 24 - Title 40/48 Bold -2% + nut "Filter" 95x40
     - "Job Filters" 327x1274: chi con danh sach job, KHONG co khung loc
       phong ban/cap do (desktop la sidebar 421px ben trai). Khung loc van
       render nhung an di, bam nut "Filter" moi mo ra (xem job-listing.js).
   "Job Listings": gap 32 giua cum card va nut "Xem Them"; cac card cach nhau
   24; moi card 327x382 - bo goc 24, vien 1px nature-200, bong 0/3 blur 6,
   padding 24, gap 24 giua khoi chu va khoi thong tin.
   Cum toggle luoi/danh sach KHONG co trong ban mobile -> an di, danh sach
   luon o dang list.
   Kich thuoc lay tu frame nay nen scale theo --tapbi-scale-m (baseline 375px),
   KHONG phai --tapbi-scale (1440px). */
@media (max-width: 767px) {
	.tapbi-joblist {
		/* Padding ghi qua INLINE style cua block nen phai !important. Frame
		   dinh sat day section Benefit (khoang 80 da nam o padding-bottom cua
		   Benefit) va sat dinh section "Gia nhap doi ngu" ngay duoi. */
		padding-left: calc(var(--tapbi-scale-m) * 24px) !important;
		padding-right: calc(var(--tapbi-scale-m) * 24px) !important;
		padding-top: 0 !important;
		padding-bottom: 0 !important;
	}
	/* Selector 2 cap (0,2,0) de thang rule .wp-container-* (0,1,0) ma WP sinh
	   ra tu blockGap trong block JSON. */
	.wp-block-group.tapbi-joblist {
		row-gap: calc(var(--tapbi-scale-m) * 48px);
	}
	.tapbi-joblist .tapbi-joblist-header {
		/* Desktop: tieu de va nut nam 2 dau 1 hang. Mobile: xep doc, can trai. */
		flex-direction: column;
		align-items: flex-start;
		gap: calc(var(--tapbi-scale-m) * 24px);
	}
	.tapbi-joblist .tapbi-joblist-title {
		/* Figma mobile: 40px / 48px / Bold / -2%. Token `section-heading` la
		   fluid 32-44px nen o 375px WordPress tinh ra ~32px - phai ghi de.
		   !important: font-size vi .has-section-heading-font-size cua WP co san
		   !important; line-height vi block ghi qua inline style. */
		font-size: calc(var(--tapbi-scale-m) * 40px) !important;
		line-height: 1.2 !important; /* 48/40 */
		letter-spacing: -0.02em;
	}
	.tapbi-joblist .tapbi-joblist-view-toggle {
		/* Ban mobile khong co cum toggle luoi/danh sach. */
		display: none;
	}
	.tapbi-joblist .tapbi-joblist-filter-toggle {
		display: inline-flex;
	}
	.tapbi-joblist .tapbi-joblist-body {
		gap: calc(var(--tapbi-scale-m) * 24px);
	}
	.tapbi-joblist .tapbi-joblist-filters {
		/* Frame "Container" 327x464 trong trang thai da mo: nen trang, bo goc
		   16 (desktop 24), vien 1px nature-200, bong 0/3 blur 6, padding 24,
		   2 nhom (Phong ban / Cap do) cach nhau 32. */
		display: none;
		flex: 0 0 100%;
		max-width: none;
		border-radius: calc(var(--tapbi-scale-m) * 16px);
		padding: calc(var(--tapbi-scale-m) * 24px);
		box-shadow: 0 calc(var(--tapbi-scale-m) * 3px) calc(var(--tapbi-scale-m) * 6px) rgba(57, 57, 57, 0.08);
		gap: calc(var(--tapbi-scale-m) * 32px);
	}
	.tapbi-joblist .tapbi-joblist-filters.is-open {
		display: flex;
		/* Figma xep: nut "Filter" -> 16 -> khung loc -> 48 -> danh sach job.
		   Trong DOM khung loc lai la con dau cua .tapbi-joblist-body nen mac
		   dinh no an theo row-gap 48 cua section (phia tren) va gap 24 cua
		   body (phia duoi) - bu bang margin cho ra dung 16 / 48.
		   Selector 3 cap (0,3,0) de thang rule ".is-layout-flex > :is(*, div)
		   {margin:0}" (0,1,1) cua WordPress. */
		margin-top: calc(var(--tapbi-scale-m) * -32px);
		margin-bottom: calc(var(--tapbi-scale-m) * 24px);
	}
	.tapbi-joblist-filters > .wp-block-group {
		gap: calc(var(--tapbi-scale-m) * 16px);
	}
	.tapbi-joblist .tapbi-filter-options {
		gap: calc(var(--tapbi-scale-m) * 16px);
	}
	.tapbi-joblist .tapbi-filter-chip {
		/* Padding vung thao tac tay - giu co dinh, khong scale (CLAUDE.md). */
		padding: 8px 16px;
		border-radius: 8px;
	}
	.tapbi-joblist .tapbi-joblist-jobs {
		flex: 1 1 100%;
	}
	.wp-block-group.tapbi-joblist-jobs {
		row-gap: calc(var(--tapbi-scale-m) * 24px);
	}
	.tapbi-joblist-jobs > .wp-block-buttons {
		/* Figma: 32 giua cum card va nut "Xem Them", trong khi cac card cach
		   nhau 24 - bu them 8. Phai viet selector con (0,2,0): WordPress co san
		   rule ".is-layout-flex > :is(*, div){margin:0}" (0,1,1) nuot margin
		   khai bao bang 1 class. */
		margin-top: calc(var(--tapbi-scale-m) * 8px);
	}
	.wp-block-group.tapbi-job-card {
		border-radius: calc(var(--tapbi-scale-m) * 24px);
		padding: calc(var(--tapbi-scale-m) * 24px);
		gap: calc(var(--tapbi-scale-m) * 24px);
		box-shadow: 0 calc(var(--tapbi-scale-m) * 3px) calc(var(--tapbi-scale-m) * 6px) rgba(57, 57, 57, 0.08);
	}
	.tapbi-job-card .tapbi-job-card-content {
		gap: calc(var(--tapbi-scale-m) * 16px);
	}
	.tapbi-job-card .tapbi-job-tags {
		gap: calc(var(--tapbi-scale-m) * 8px);
	}
	.tapbi-joblist .tapbi-job-tag {
		border-radius: calc(var(--tapbi-scale-m) * 4px);
		padding: calc(var(--tapbi-scale-m) * 4px) calc(var(--tapbi-scale-m) * 12px);
	}
	.tapbi-joblist .tapbi-job-title {
		/* 24/32 Bold -2%. Token `large` la fluid 20-24px nen o 375px WordPress
		   tinh ra ~20px - phai ghi font-size tuong minh (giong .tapbi-benefit-title).
		   min-height 64 = 2 dong: trong Figma o tieu de la FIXED 64 nen ca 3 the
		   deu cao dung 382 du ten job dai ngan khac nhau. */
		font-size: calc(var(--tapbi-scale-m) * 24px);
		min-height: calc(var(--tapbi-scale-m) * 64px);
	}
	.tapbi-job-card .tapbi-job-meta {
		gap: calc(var(--tapbi-scale-m) * 16px);
	}
	.tapbi-job-meta .tapbi-job-meta-item {
		/* Trong Figma 3 o thong tin co be rong co dinh 164/194/113, cong lai
		   qua 279 nen tu xuong dong => tren mobile luon xep doc. Ep 100% cho
		   chac thay vi de wrap tu nhien. */
		flex: 0 0 100%;
		gap: calc(var(--tapbi-scale-m) * 6px);
	}
}

/* Trang chi tiet job (single-tapbi_job) - breadcrumb + khung noi dung toi gian,
   cho anh Figma phan than trang de tinh chinh lai. */
.tapbi-breadcrumb {
	gap: var(--wp--preset--spacing--15);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.714;
}
.tapbi-breadcrumb-link {
	color: var(--wp--preset--color--muted);
	text-decoration: none;
}
.tapbi-breadcrumb-link:hover {
	color: var(--wp--preset--color--primary);
	text-decoration: underline;
}
/* Dau phan cach la SVG chevron (node "arrow-right-s-line" trong Figma), khong
   phai ky tu ">". Co icon buoc theo font-size cua thanh breadcrumb: 20/14 =
   1.4286em - o ca hai ban desktop va mobile deu ra dung 20px cua Figma. */
.tapbi-breadcrumb-sep {
	color: var(--wp--preset--color--nature-300);
	display: inline-flex;
	align-items: center;
	flex: none;
}
.tapbi-breadcrumb-sep svg {
	display: block;
	width: 1.4286em;
	height: 1.4286em;
}
.tapbi-breadcrumb-current {
	color: var(--wp--preset--color--primary);
	font-weight: 600;
}
/* Padding de o day chu KHONG dat inline trong pattern: style inline thang moi
   rule CSS nen ban mobile ben duoi se khong ghi de duoc. */
.tapbi-jobdetail-breadcrumb-bar {
	width: 100%;
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--gutter);
	box-sizing: border-box;
}
.tapbi-jobdetail-hero {
	/* Anh nen recruitment/job-detail-hero-bg.png (1440x320) da co san lop mau cam cua Figma
	   (frame 2037:2486) nung trong anh luc export - KHONG them background-color
	   + background-blend-mode nua: trong CSS background-color nam DUOI anh
	   (nguoc thu tu voi Figma, noi fill mau nam TREN anh), nen blend "color" se
	   lay do sang tu mau cam phang va xoa sach van sang toi cua lua.
	   Can giua bang flex o day thay vi qua layout cua block: da kiem tra DOM
	   that, WP khong gan is-layout-flex cho group nay. */
	/* Khong set width:100% - block .alignfull nay nam trong <main> co
	   .has-global-padding, WP keo rong bang margin-inline am; width:100%
	   se khoa be ngang bang content-box cua main nen hut 32px ben phai. */
	/* Dung min-height chu KHONG dung aspect-ratio 1440/320 (giong ly do da ghi
	   o .tapbi-about-hero): font-size cua H1 chay theo co che fluid rieng,
	   khong co theo --tapbi-scale, nen o man hinh hep tieu de xuong 2-3 dong
	   trong khi aspect-ratio ep khung con ~83px -> chu tran ra ngoai anh.
	   min-height cho khung cao dung 320px o khung Figma 1440px, con man hep
	   thi khung tu nong ra theo noi dung. */
	min-height: calc(var(--tapbi-scale) * 320px);
	background-image: url('assets/images/recruitment/job-detail-hero-bg.png');
	background-size: cover;
	background-position: center;
	display: flex;
	align-items: center;
	justify-content: center;
	/* Padding doc an toan cho man hep - khong co trong Figma nen giu co dinh,
	   khong scale (giong .tapbi-jobdetail-hero-inner). Voi box-sizing:border-box
	   no nam trong 320px nen o 1440px chieu cao van dung 320px. */
	padding-block: 24px;
	padding-inline: calc(var(--tapbi-scale) * 8px);
	box-sizing: border-box;
}
.tapbi-jobdetail-hero-inner {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--wp--preset--spacing--25);
	/* Padding an toan cho man hinh hep - khong co trong Figma (chi co khung
	   1440px) nen giu co dinh, khong scale theo --tapbi-scale. */
	padding: 0 24px;
}
.tapbi-jobdetail-hero-meta {
	gap: var(--wp--preset--spacing--30);
	opacity: 0.7;
	color: var(--wp--preset--color--base);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 500;
	line-height: 1.5;
}
.tapbi-jobdetail-hero-dot {
	width: calc(var(--tapbi-scale) * 4px);
	height: calc(var(--tapbi-scale) * 4px);
	border-radius: 50%;
	background: currentColor;
	flex: none;
}
/* Than trang chi tiet job - theo JSON Figma frame 2037:1730 (1440x1248):
   khung ngoai padding 100px tren / 0 duoi / 64px hai ben, gap 24px, cac cot
   can tren; cot trai 755px co gian, cot phai 533px co dinh (755+24+533 =
   1312 = 1440 - 64*2). Dat display:flex o CSS thay vi qua layout cua block -
   ly do xem ghi chu o .tapbi-jobdetail-hero. */
/* WordPress tu chen gap 32px (blockGap goc trong theme.json) giua cac khoi
   con cua group ngoai cung, cong them margin-block-start 32px cho khoi thu 2
   tro di, va align-items:flex-start lam khoi con co lai theo noi dung.
   Figma khong co khoang cach nay (breadcrumb sat hero, hero sat than trang -
   than trang tu co padding-top 100px roi) nen ep ve 0. Dung 2 class de thang
   do uu tien rule cua WordPress. */
.wp-block-group.tapbi-jobdetail {
	gap: 0;
	align-items: stretch;
}
.wp-block-group.tapbi-jobdetail-body > * {
	margin-block-start: 0;
}
/* Padding de o day chu KHONG dat inline trong pattern: style inline thang moi
   rule CSS nen ban mobile ben duoi se khong ghi de duoc. */
.tapbi-jobdetail-body {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--25);
	padding: var(--wp--preset--spacing--70) var(--wp--preset--spacing--gutter) 0;
	box-sizing: border-box;
}
.tapbi-jobdetail-main {
	/* Basis 400px chu KHONG phai 755px cua Figma: 755 + 24 + 533 = 1312 vua
	   khit be rong noi dung o 1440px, chi can thanh cuon chiem 15px la cot
	   phai bi day xuong hang duoi. Cho cot trai gian ra lay phan con lai -
	   o 1440px van ra dung 755px. Cung cach .tapbi-joblist-jobs dang lam. */
	flex: 1 1 calc(var(--tapbi-scale) * 400px);
	min-width: 0;
	display: flex;
	flex-direction: column;
	/* Frame 48095678: hang the meta cach the noi dung 16px */
	gap: var(--wp--preset--spacing--30);
}
.tapbi-jobdetail-aside {
	flex: 0 0 calc(var(--tapbi-scale) * 533px);
}

/* Hang 4 the meta (frame 48095676): chia deu, cach nhau 16px */
.tapbi-jobdetail-facts {
	display: flex;
	gap: var(--wp--preset--spacing--30);
}
.tapbi-jobdetail-fact {
	flex: 1 1 0;
	min-width: 0;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--nature-200);
	border-radius: calc(var(--tapbi-scale) * 16px);
	box-shadow: 0 calc(var(--tapbi-scale) * 3px) calc(var(--tapbi-scale) * 6px) rgba(57, 57, 57, 0.08);
	padding: calc(var(--tapbi-scale) * 20px) var(--wp--preset--spacing--30);
	display: flex;
	flex-direction: column;
	gap: calc(var(--tapbi-scale) * 4px);
}
.tapbi-jobdetail-fact-label {
	margin: 0;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	line-height: 1.7143; /* 24/14 */
}
.tapbi-jobdetail-fact-value {
	margin: 0;
	color: var(--wp--preset--color--primary);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
	line-height: 1.5; /* 24/16 */
}

/* The noi dung (frame 48095682): padding 32px, section cach nhau 24px */
.tapbi-jobdetail-content {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--nature-200);
	border-radius: calc(var(--tapbi-scale) * 24px);
	box-shadow: 0 calc(var(--tapbi-scale) * 3px) calc(var(--tapbi-scale) * 6px) rgba(57, 57, 57, 0.08);
	padding: var(--wp--preset--spacing--40);
}
/* Ben trong la noi dung admin tu soan nen khong biet truoc cau truc - style
   theo the HTML. So do lay tu JSON Figma: tieu de section 24/32 Bold -2%
   mau primary, than 16/24 Medium mau muted, tieu de cach khoi truoc no 24px
   va cach phan than cua chinh no 8px. */
.tapbi-jobdetail-content > *:first-child {
	margin-block-start: 0;
}
.tapbi-jobdetail-content :is(h2, h3, h4) {
	margin-block: var(--wp--preset--spacing--25) var(--wp--preset--spacing--20);
	color: var(--wp--preset--color--primary);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 700;
	line-height: 1.3333; /* 32/24 */
	letter-spacing: -0.02em;
}
.tapbi-jobdetail-content :is(p, ul, ol) {
	/* Figma gop nhieu doan van vao 1 khoi chu duy nhat - giua cac doan khong
	   co khoang cach them, chi co line-height. */
	margin-block: 0;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 500;
	line-height: 1.5; /* 24/16 */
}
.tapbi-jobdetail-content :is(ul, ol) {
	padding-inline-start: var(--wp--preset--spacing--25);
}
.tapbi-jobdetail-content li {
	margin-block: 0;
}
/* Figma dung dau cham dac ca o cap 2, khong phai vong tron rong mac dinh */
.tapbi-jobdetail-content li ul {
	list-style-type: disc;
}

/* The form ung tuyen (JSON Figma frame 2037:1758, 533x780): padding 32px,
   tieu de cach khoi field 28px, cac field cach nhau 16px, nhan cach o nhap 8px.
   LUU Y: chieu cao o nhap/nut/vung tha KHONG scale theo --tapbi-scale (theo
   CLAUDE.md: vung thao tac bang tay giu co dinh de khong co nho hon nguong
   bam duoc tren mobile) - chi khoang cach bo cuc moi scale. */
.tapbi-apply,
.tapbi-contact-card {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--nature-200);
	border-radius: calc(var(--tapbi-scale) * 24px);
	box-shadow: 0 calc(var(--tapbi-scale) * 3px) calc(var(--tapbi-scale) * 6px) rgba(57, 57, 57, 0.08);
	padding: var(--wp--preset--spacing--40);
	display: flex;
	flex-direction: column;
	gap: calc(var(--tapbi-scale) * 28px);
}
.tapbi-apply-title {
	margin: 0;
	color: var(--wp--preset--color--primary);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 700;
	line-height: 1.3333; /* 32/24 */
	letter-spacing: -0.02em;
}
.tapbi-apply-form,
.tapbi-contact-form {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--30);
}
.tapbi-field {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
	min-width: 0;
}
.tapbi-field-row {
	display: flex;
	gap: var(--wp--preset--spacing--30);
}
.tapbi-field-row > .tapbi-field {
	flex: 1 1 0;
}
.tapbi-field-label {
	color: var(--wp--preset--color--primary);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
	line-height: 1.5; /* 24/16 */
}
.tapbi-input {
	box-sizing: border-box;
	width: 100%;
	height: 48px;
	padding: 0 16px;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--nature-200);
	border-radius: 8px;
	color: var(--wp--preset--color--nature-900);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--caption-1);
	font-weight: 500;
	line-height: 1.5385; /* 20/13 */
	letter-spacing: -0.01em;
}
.tapbi-input::placeholder {
	color: var(--wp--preset--color--nature-400);
}
.tapbi-input:focus-visible {
	outline: 2px solid var(--wp--preset--color--secondary);
	outline-offset: -1px;
}
.tapbi-textarea {
	height: 160px;
	padding: 14px 16px;
	resize: vertical;
}

/* Vung tha CV: input file phu kin ca vung nen bam va keo-tha deu chay bang
   co che san co cua trinh duyet, khong can JS cho thao tac co ban. */
.tapbi-dropzone {
	position: relative;
	box-sizing: border-box;
	height: 160px;
	padding: 0 16px;
	border: 1px dashed var(--wp--preset--color--nature-200);
	border-radius: 8px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: calc(var(--tapbi-scale) * 4px);
	text-align: center;
}
.tapbi-dropzone-input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	cursor: pointer;
}
.tapbi-dropzone.is-dragover {
	border-color: var(--wp--preset--color--secondary);
	background: var(--wp--preset--color--secondary-50);
}
.tapbi-dropzone-main {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--caption-1);
	font-weight: 500;
	line-height: 1.5385;
	letter-spacing: -0.01em;
}
.tapbi-dropzone-browse {
	color: var(--wp--preset--color--secondary);
}
.tapbi-dropzone-hint {
	color: var(--wp--preset--color--nature-400);
	font-size: var(--wp--preset--font-size--caption-2);
	font-weight: 500;
	line-height: 1.3333;
	letter-spacing: -0.01em;
}
.tapbi-apply-submit,
.tapbi-contact-submit {
	box-sizing: border-box;
	width: 100%;
	height: 48px;
	border: none;
	border-radius: 8px;
	background: var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--base);
	font-family: inherit;
	/* Nut bam = Bold theo Figma, giong moi nut CTA khac trong theme. */
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 700;
	line-height: 1.5;
	cursor: pointer;
}
.tapbi-apply-submit:hover,
.tapbi-contact-submit:hover {
	background: var(--wp--preset--color--secondary-500);
}
.tapbi-apply-submit[disabled],
.tapbi-contact-submit[disabled] {
	opacity: 0.6;
	cursor: progress;
}

/* Thong bao ket qua sau khi nop don (hien sau khi trang tai lai). */
.tapbi-apply-notice,
.tapbi-contact-notice {
	margin: 0;
	padding: calc(var(--tapbi-scale) * 12px) calc(var(--tapbi-scale) * 16px);
	border-radius: 8px;
	font-size: var(--wp--preset--font-size--caption-1);
	font-weight: 500;
	line-height: 1.5385; /* 20/13 */
	letter-spacing: -0.01em;
}
.tapbi-apply-notice.is-ok,
.tapbi-contact-notice.is-ok {
	background: var(--wp--preset--color--success-light);
	color: var(--wp--preset--color--success);
}
.tapbi-apply-notice.is-error,
.tapbi-contact-notice.is-error {
	background: var(--wp--preset--color--danger-light);
	color: var(--wp--preset--color--danger);
}

/* Loi cua tung o nhap, nam ngay duoi o do. */
.tapbi-field-error {
	margin: 0;
	color: var(--wp--preset--color--danger);
	font-size: var(--wp--preset--font-size--caption-2);
	font-weight: 500;
	line-height: 1.3333; /* 16/12 */
	letter-spacing: -0.01em;
}

/* O moi bat bot: day ra ngoai man hinh thay vi display:none - bot nhan ra
   display:none va bo qua, nhung khong nhan ra cach nay. */
.tapbi-honeypot {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Ten file da chon, thay cho dong "Drop your resume here" khi da co file. */
.tapbi-dropzone-file {
	color: var(--wp--preset--color--primary);
	font-size: var(--wp--preset--font-size--caption-1);
	font-weight: 600;
	line-height: 1.5385;
	letter-spacing: -0.01em;
	word-break: break-all;
}

/* Chi tiet job ban MOBILE - frame Figma 375px: node "Breadcrumbs Group [1.0]"
   (2085:265525, 375x78), node "Frame 48095693" (hero, 375x320) va node
   "Frame 48095679" (than trang, 375x3132). Kich thuoc lay tu frame mobile nen
   scale theo --tapbi-scale-m, KHONG phai --tapbi-scale.
   PHAI dat SAU toan bo CSS desktop cua trang chi tiet job: nhieu rule o day
   trung selector voi ban desktop, cung do uu tien thi rule dung sau thang. */
@media (max-width: 767px) {
	.tapbi-jobdetail-breadcrumb-bar {
		padding: calc(var(--tapbi-scale-m) * 16px) calc(var(--tapbi-scale-m) * 24px);
		/* Figma: strokeWeight { top: 1 } - duong ke nam o canh TREN, ngan voi
		   header, khong phai canh duoi. */
		border-top: 1px solid var(--wp--preset--color--nature-200);
	}
	.tapbi-breadcrumb {
		/* layoutWrap WRAP + itemSpacing/counterAxisSpacing deu 6px: ten job dai
		   tu xuong dong thu hai (trong Figma dung la 2 dong). */
		gap: calc(var(--tapbi-scale-m) * 6px);
	}
	.tapbi-breadcrumb-current {
		/* Figma #0b0a0f - gan den, khong phai navy nhu ban desktop; Medium 500. */
		color: var(--wp--preset--color--nature-900);
		font-weight: 500;
	}
	.tapbi-jobdetail-hero {
		/* Ban desktop dung --tapbi-scale nen o 375px min-height chi con ~83px,
		   noi dung day khung len ~165px thay vi 320px cua thiet ke. */
		min-height: calc(var(--tapbi-scale-m) * 320px);
		padding-block: calc(var(--tapbi-scale-m) * 8px);
		padding-inline: calc(var(--tapbi-scale-m) * 8px);
	}
	.tapbi-jobdetail-hero-inner {
		gap: calc(var(--tapbi-scale-m) * 24px);
		/* Frame 48095670 rong 359 = 375 - 8*2, tuc padding cua .tapbi-jobdetail-hero
		   da du - bo padding 24px hai ben cua ban desktop. */
		padding: 0;
	}
	/* 40/48 Bold -2% (ban desktop 44px / 1.1818). Token `section-heading` la
	   fluid 32-44px nen o 375px WordPress tinh ra 32px - phai ghi de tuong minh.
	   !important: font-size vi .has-section-heading-font-size cua WP co san
	   !important; line-height vi block ghi qua inline style. */
	.tapbi-jobdetail-hero-title {
		font-size: calc(var(--tapbi-scale-m) * 40px) !important;
		line-height: 1.2 !important;
	}
	.tapbi-jobdetail-hero-meta {
		gap: calc(var(--tapbi-scale-m) * 16px);
	}
	.tapbi-jobdetail-hero-dot {
		width: calc(var(--tapbi-scale-m) * 4px);
		height: calc(var(--tapbi-scale-m) * 4px);
	}

	/* Than trang - node "Frame 48095679" (375x3132, pad 0/24, gap 24). Khoang
	   cach voi hero la 80px (frame bat dau o y=598, hero het o 518). */
	.tapbi-jobdetail-body {
		padding: calc(var(--tapbi-scale-m) * 80px) calc(var(--tapbi-scale-m) * 24px) 0;
		gap: calc(var(--tapbi-scale-m) * 24px);
	}
	/* Ban desktop chia 2 cot (trai co gian, phai co dinh 533px) - o 375px cot
	   phai con ~139px. Mobile xep 1 cot: ca hai chiem tron hang. */
	.tapbi-jobdetail-main,
	.tapbi-jobdetail-aside {
		flex: 1 1 100%;
	}
	.tapbi-jobdetail-main {
		gap: calc(var(--tapbi-scale-m) * 16px);
	}

	/* 4 the meta (frame 48095676): desktop xep ngang 1 hang, mobile chong doc,
	   moi the tran chieu rong, cach nhau 8px. */
	.tapbi-jobdetail-facts {
		flex-direction: column;
		gap: calc(var(--tapbi-scale-m) * 8px);
	}
	.tapbi-jobdetail-fact {
		/* Bo flex: 1 1 0 cua ban desktop - trong container doc no bien thanh
		   chia deu CHIEU CAO, khong phai chieu rong. */
		flex: 0 0 auto;
		border-radius: calc(var(--tapbi-scale-m) * 16px);
		box-shadow: 0 calc(var(--tapbi-scale-m) * 3px) calc(var(--tapbi-scale-m) * 6px) rgba(57, 57, 57, 0.08);
		padding: calc(var(--tapbi-scale-m) * 20px) calc(var(--tapbi-scale-m) * 16px);
		gap: calc(var(--tapbi-scale-m) * 4px);
	}

	/* The noi dung (frame 48095682): padding 24 (desktop 32), section cach nhau 24. */
	.tapbi-jobdetail-content {
		border-radius: calc(var(--tapbi-scale-m) * 24px);
		box-shadow: 0 calc(var(--tapbi-scale-m) * 3px) calc(var(--tapbi-scale-m) * 6px) rgba(57, 57, 57, 0.08);
		padding: calc(var(--tapbi-scale-m) * 24px);
	}
	/* Token `large` la fluid 20-24px nen o 375px WordPress tinh ra 20px -
	   Figma muon 24px, phai ghi de tuong minh. */
	.tapbi-jobdetail-content :is(h2, h3, h4) {
		margin-block: calc(var(--tapbi-scale-m) * 24px) calc(var(--tapbi-scale-m) * 8px);
		font-size: calc(var(--tapbi-scale-m) * 24px);
	}
	.tapbi-jobdetail-content :is(ul, ol) {
		padding-inline-start: calc(var(--tapbi-scale-m) * 24px);
	}

	/* The form ung tuyen (frame 48095687): padding 24 (desktop 32), tieu de
	   cach form 28, cac field cach nhau 16, nhan cach o nhap 8.
	   Moi rule boc trong .tapbi-apply vi .tapbi-field / .tapbi-input /
	   .tapbi-dropzone dung CHUNG voi form trang Lien he - section do chua co
	   frame mobile nen khong dung vao. */
	.tapbi-apply {
		border-radius: calc(var(--tapbi-scale-m) * 24px);
		box-shadow: 0 calc(var(--tapbi-scale-m) * 3px) calc(var(--tapbi-scale-m) * 6px) rgba(57, 57, 57, 0.08);
		padding: calc(var(--tapbi-scale-m) * 24px);
		gap: calc(var(--tapbi-scale-m) * 28px);
	}
	.tapbi-apply-title {
		font-size: calc(var(--tapbi-scale-m) * 24px);
	}
	.tapbi-apply-form {
		gap: calc(var(--tapbi-scale-m) * 16px);
	}
	.tapbi-apply .tapbi-field {
		gap: calc(var(--tapbi-scale-m) * 8px);
	}
	/* Email + So dien thoai: desktop nam canh nhau, mobile xep doc. */
	.tapbi-apply .tapbi-field-row {
		flex-direction: column;
		gap: calc(var(--tapbi-scale-m) * 16px);
	}
	.tapbi-apply .tapbi-field-row > .tapbi-field {
		flex: 0 0 auto;
	}
	.tapbi-apply .tapbi-dropzone {
		gap: calc(var(--tapbi-scale-m) * 4px);
	}
	/* Figma mobile: 13px mau muted (ban desktop 12px mau nature-400). */
	.tapbi-apply .tapbi-dropzone-hint {
		color: var(--wp--preset--color--muted);
		font-size: var(--wp--preset--font-size--caption-1);
		line-height: 1.5385; /* 20/13 */
	}
	/* Figma mobile: 14/24 Bold (ban desktop 16px / 700 - chi khac co chu). */
	.tapbi-apply-submit {
		font-size: var(--wp--preset--font-size--small);
	}
}

/* Tu 1024px ep khong wrap nua (doi PATTERN, khong phai kich thuoc) */
@media (min-width: 1024px) {
	.tapbi-recruitment-hero {
		flex-wrap: nowrap !important;
	}
}

/* Thong ke nhanh: 3 stat item, tu wrap xuong dong khi khong du cho (mobile-first) */
.tapbi-stat-item {
	flex: 1 1 240px;
	justify-content: center;
}
.tapbi-stat-icon {
	flex-shrink: 0;
}
.tapbi-stat-icon img {
	/* Ca 3 file SVG deu phai co viewBox 90x90 (bang khung icon trong Figma),
	   phan hinh ve nam dung vi tri cua no trong khung do. Neu file bi export
	   crop sat hinh (vd star: 73.84x70) thi rule vuong 90x90 nay se keo gian
	   khong deu hai chieu -> hinh vua to hon thiet ke vua meo. */
	width: calc(var(--tapbi-scale) * 90px);
	height: calc(var(--tapbi-scale) * 90px);
	display: block;
}
.tapbi-stat-number {
	/* -0.02em = -0.88px / 44px; line-height 52/44 = 1.182 - dung ti le goc Figma */
	letter-spacing: -0.02em;
	line-height: 1.182;
}
.tapbi-stat-label {
	/* Theo style guide: size Title (20px) = letter-spacing -1%, line-height 28/20 = 1.4 */
	letter-spacing: -0.01em;
	line-height: 1.4;
}

/* Thong ke nhanh ban MOBILE - frame Figma 375px, node "Frame 48238"
   (2085:263493): 375 x 428, nen #f9fafb, padding 24 hai ben + 40 tren/duoi,
   layout VERTICAL itemSpacing 48, gom 3 hang doc.
   Moi hang ("Frame 129"/"Frame 132"/...): 327 x 84, padding 48 hai ben,
   HORIZONTAL itemSpacing 16, can giua theo chieu doc - icon 82x82 + cot chu.
   Frame nay bat dau o y=656.32, dung bang day khung anh hero -> xac nhan
   .tapbi-hero khong con padding duoi (xem khoi hero ban mobile o tren). */
@media (max-width: 767px) {
	.tapbi-stats {
		/* Padding ghi qua INLINE style cua block nen phai !important. */
		padding-left: calc(var(--tapbi-scale-m) * 24px) !important;
		padding-right: calc(var(--tapbi-scale-m) * 24px) !important;
		padding-top: calc(var(--tapbi-scale-m) * 40px) !important;
		padding-bottom: calc(var(--tapbi-scale-m) * 40px) !important;
	}
	/* Selector 2 cap (0,2,0) de thang rule .wp-container-* (0,1,0) ma WP sinh
	   ra tu blockGap trong block JSON. */
	.wp-block-group.tapbi-stats {
		row-gap: calc(var(--tapbi-scale-m) * 48px);
	}
	.tapbi-stats .tapbi-stat-item {
		/* Moi hang chiem tron be ngang (327 = 375 - 24*2), noi dung bat dau
		   tu trai sau padding 48 -> cach mep man hinh 72px dung nhu Figma. */
		flex: 0 0 100%;
		justify-content: flex-start;
		padding-left: calc(var(--tapbi-scale-m) * 48px);
		padding-right: calc(var(--tapbi-scale-m) * 48px);
		gap: calc(var(--tapbi-scale-m) * 16px);
	}
	.tapbi-stat-item > .wp-block-group {
		/* itemSpacing 8 giua con so va nhan */
		gap: calc(var(--tapbi-scale-m) * 8px);
		/* Trong Figma cot chu la HUG (137px) - rong hon cho con lai cua hang
		   (231 - 82 - 16 = 133) nen no tran ra ngoai padding phai chu KHONG
		   xuong dong. Khong co flex-shrink:0 thi "Apps & Games" gay 2 dong,
		   hang cao 112 thay vi 84. Tran toi da toi x=307, van con cach mep
		   phai man hinh 68px nen khong loi ra ngoai. */
		flex-shrink: 0;
	}
	.tapbi-stats .tapbi-stat-icon img {
		width: calc(var(--tapbi-scale-m) * 82px);
		height: calc(var(--tapbi-scale-m) * 82px);
	}
	.tapbi-stats .tapbi-stat-number {
		/* 40px / 48px / Bold / -2% (ban desktop: 44px / 52px).
		   Can !important vi .has-section-heading-font-size cua WP co san
		   !important. Font-size scale theo --tapbi-scale-m cung ly do da ghi
		   o .tapbi-hero-heading. */
		font-size: calc(var(--tapbi-scale-m) * 40px) !important;
		line-height: 1.2; /* 48/40 */
	}
	.tapbi-stats .tapbi-stat-label {
		/* 20px / 28px / Medium / -2% (ban desktop dung -1% theo style guide) */
		letter-spacing: -0.02em;
	}
}

/* Gioi thieu: nen den + anh bo goc + heading nhieu mau (padding/kich thuoc
   uoc luong tu screenshot user gui, chua co data Figma that - xem plan). */
.tapbi-about {
	padding-left: var(--wp--preset--spacing--gutter);
	padding-right: var(--wp--preset--spacing--gutter);
}
.tapbi-about-photo {
	flex: 1 1 320px;
	max-width: calc(var(--tapbi-scale) * 608px);
	width: 100%;
	margin: 0;
	aspect-ratio: 608 / 470;
	overflow: hidden;
	border-radius: calc(var(--tapbi-scale) * 28px);
}
.tapbi-about-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.tapbi-about-content {
	flex: 1 1 320px;
	max-width: calc(var(--tapbi-scale) * 703px);
}
.tapbi-about-heading {
	/* -0.02em: dung chung ti le voi .tapbi-stat-number (cung font-size 44px).
	   line-height 52/44 = 1.1818 ghi inline trong pattern. */
	letter-spacing: -0.02em;
}
.tapbi-about-desc {
	/* Theo style guide: size Body 2 (16px) = Medium, line-height 24/16,
	   letter-spacing -2%. font-weight ghi inline trong pattern. */
	line-height: 1.5;
	letter-spacing: -0.02em;
}

/* Tu 1024px ep 2 cot khong wrap nua (doi PATTERN, khong phai kich thuoc) */
@media (min-width: 1024px) {
	.tapbi-about {
		flex-wrap: nowrap !important;
	}
}

/* Gioi thieu ban MOBILE - frame Figma 375px, node "Frame 48095737"
   (2085:263568): 375 x 772, padding 24 hai ben + 80 tren + 0 duoi, layout
   VERTICAL itemSpacing 24, xep DOC (anh tren, chu duoi) thay vi 2 cot.
   Frame bat dau o y=1084.32, dung bang day cua section thong ke -> hai
   section dinh lien nhau, khong co khoang ho. */
@media (max-width: 767px) {
	.tapbi-about {
		padding-left: calc(var(--tapbi-scale-m) * 24px);
		padding-right: calc(var(--tapbi-scale-m) * 24px);
		/* Padding tren ghi qua INLINE style cua block nen phai !important.
		   Padding duoi da la 0 san trong block JSON, dung nhu Figma. */
		padding-top: calc(var(--tapbi-scale-m) * 80px) !important;
	}
	/* Selector 2 cap (0,2,0) de thang rule .wp-container-* (0,1,0) cua WP. */
	.wp-block-group.tapbi-about {
		row-gap: calc(var(--tapbi-scale-m) * 24px);
	}
	.tapbi-about .tapbi-about-photo {
		/* "Rectangle 26": 327 x 260 (ti le 1.2577, ban desktop 608/470 =
		   1.2936), bo goc 12.997 ~ 13 (desktop 28). */
		flex: 0 0 100%;
		max-width: none;
		aspect-ratio: 327 / 260;
		border-radius: calc(var(--tapbi-scale-m) * 13px);
	}
	.tapbi-about .tapbi-about-content {
		flex: 0 0 100%;
		max-width: none;
		/* itemSpacing 24 giua heading va mo ta (desktop dung 16) */
		gap: calc(var(--tapbi-scale-m) * 24px);
	}
	.tapbi-about .tapbi-about-heading {
		/* 40px / 48px / Bold / -2% (desktop: 44px / 1.25). Can !important vi
		   .has-section-heading-font-size co san !important, con line-height
		   thi block ghi qua inline style. Font-size scale theo
		   --tapbi-scale-m cung ly do da ghi o .tapbi-hero-heading. */
		font-size: calc(var(--tapbi-scale-m) * 40px) !important;
		line-height: 1.2 !important; /* 48/40 */
	}
	.tapbi-about-heading br {
		/* Ban desktop ngat dong cung 3 lan bang <br>. Figma mobile de chu tu
		   xuong dong trong khung 327px (5 dong). Trong markup da them dau
		   cach ngay truoc moi <br> - o desktop dau cach do nam cuoi dong nen
		   bi thu gon, khong anh huong gi; con o mobile no giu cho hai tu
		   khong dinh vao nhau khi <br> bi an. */
		display: none;
	}
	.tapbi-about .tapbi-about-desc {
		/* Ban desktop cung da la 16px / 24px / Medium (Body 2) nen o day chi
		   con khac moi letter-spacing: Figma mobile de 0%, desktop -2%. */
		letter-spacing: 0;
	}
}


/* Moi truong lam viec: gallery carousel ngang (scroll-snap + nut dieu khien,
   khong dung thu vien ngoai - xem assets/js/work-environment.js) */
.tapbi-workenv {
	padding-left: var(--wp--preset--spacing--gutter);
	padding-right: var(--wp--preset--spacing--gutter);
}
.tapbi-workenv-heading {
	/* -2% theo bang type-scale trong CLAUDE.md (size H2) */
	letter-spacing: -0.02em;
}
.tapbi-workenv-track {
	display: flex;
	gap: var(--wp--preset--spacing--25);
	/* Con cua group flex doc cua WordPress mac dinh co theo noi dung
	   (align-items: center), nen phai ep width 100% + max-width khoi
	   noi dung - neu khong track rong bang max-content (5 card = 1796px)
	   va tran ra ngoai section, thay vi tu scroll ngang ben trong.
	   1312px = kho noi dung Figma (1440 - 2 x 64), giong .tapbi-products-grid. */
	width: 100%;
	max-width: calc(var(--tapbi-scale) * 1312px);
	min-width: 0;
	margin-inline: auto;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	/* an scrollbar mac dinh, dung thanh progress tu ve thay the */
	scrollbar-width: none;
}
.tapbi-workenv-track::-webkit-scrollbar {
	display: none;
}
.tapbi-workenv-item {
	flex: 0 0 auto;
	width: calc(var(--tapbi-scale) * 340px);
	scroll-snap-align: start;
}
.tapbi-workenv-photo {
	margin: 0 0 var(--wp--preset--spacing--25);
}
.tapbi-workenv-photo img {
	width: 100%;
	aspect-ratio: 340 / 440;
	object-fit: cover;
	display: block;
	border-radius: calc(var(--tapbi-scale) * 24px);
}
.tapbi-workenv-caption {
	/* Theo style guide: size Title (20px) = Medium, line-height 28/20 = 1.4,
	   letter-spacing -1%. font-size va font-weight ghi trong pattern. */
	line-height: 1.4;
	letter-spacing: -0.01em;
}

.tapbi-workenv-controls,
.tapbi-whph-controls {
	display: flex;
	align-items: center;
	/* itemSpacing 32 giua nut - thanh - nut (JSON Figma "Frame 48095734") */
	gap: var(--wp--preset--spacing--40);
	/* Cung ly do va cung kho voi .tapbi-workenv-track: khong ep width thi
	   cum nut co lai bang 2 nut va .tapbi-workenv-progress tinh ra 0px. */
	width: 100%;
	max-width: calc(var(--tapbi-scale) * 1312px);
	min-width: 0;
	margin-inline: auto;
}
.tapbi-workenv-prev,
.tapbi-workenv-next,
.tapbi-whph-prev,
.tapbi-whph-next {
	display: flex;
	align-items: center;
	justify-content: center;
	/* Khung nut 32x32, icon 26.67 ben trong (JSON Figma node
	   "arrow-circle-right"): nut KHONG co vien va KHONG co nen - vong tron la
	   mot phan cua chinh icon. Kich thuoc vung thao tac tay nen giu co dinh,
	   khong scale (CLAUDE.md). */
	width: 32px;
	height: 32px;
	flex-shrink: 0;
	border: 0;
	background: none;
	color: var(--wp--preset--color--primary);
	cursor: pointer;
	padding: 0;
}
.tapbi-workenv-prev svg,
.tapbi-workenv-next svg,
.tapbi-whph-prev svg,
.tapbi-whph-next svg {
	width: 26.67px;
	height: 26.67px;
	display: block;
}
/* Het duong cuon ve phia do -> nut chuyen xam. Trong JSON Figma nut trai dang
   mau #d3d5da (nature-300) con nut phai #181f53 (primary): do la anh chup luc
   carousel dang o dau day, khong phai hai mau co dinh - JS gan/go thuoc tinh
   disabled theo vi tri cuon. */
.tapbi-workenv-prev:disabled,
.tapbi-workenv-next:disabled,
.tapbi-whph-prev:disabled,
.tapbi-whph-next:disabled {
	color: var(--wp--preset--color--nature-300);
	cursor: default;
}
.tapbi-workenv-prev:not(:disabled):hover,
.tapbi-workenv-next:not(:disabled):hover,
.tapbi-whph-prev:not(:disabled):hover,
.tapbi-whph-next:not(:disabled):hover {
	/* Figma khong ve trang thai hover - dung opacity de van co phan hoi ma
	   khong phai them mau ngoai palette. */
	opacity: 0.7;
}
.tapbi-workenv-progress,
.tapbi-whph-progress {
	flex: 1 1 auto;
	/* Thanh 1184x6, bo goc 40 - nen #f4f4f6 = surface (JSON Figma
	   "Rectangle 40"). Be ngang tu co ra vi flex: 1312 - 32*2 - 32*2 = 1184. */
	height: 6px;
	background: var(--wp--preset--color--surface);
	border-radius: 999px;
	position: relative;
	cursor: pointer;
	/* de keo ngang tren cam ung khong bi trinh duyet cuop mat cu chi */
	touch-action: none;
}
/* Mo rong vung cham len/xuong 10px (thanh day 6px thi kho keo trung) bang
   mot lop phu vo hinh, KHONG dung border trong suot + overflow:hidden nhu
   truoc: khi do border-radius 999px tinh tren border-box cao 26px nen bi kep
   con 13px, roi overflow cat theo goc ellipse 13x3 -> dau thanh keo bi vot
   nhon moi khi no chay ve sat hai dau. Gia tri 10px tu them cho thao tac tay
   nen KHONG scale (CLAUDE.md). Su kien chuot/cham van tinh cho chinh thanh
   progress vi pseudo-element khong phai mot target rieng. */
.tapbi-workenv-progress::before,
.tapbi-whph-progress::before {
	content: "";
	position: absolute;
	inset: -10px 0;
}
.tapbi-workenv-progress-thumb,
.tapbi-whph-progress-thumb {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 25%;
	/* "Rectangle 41" fill #0b0a0f - gan den, khong co trong palette; ink
	   (#000000) la mau gan nhat trong dai chuan. */
	background: var(--wp--preset--color--ink);
	border-radius: 999px;
	cursor: grab;
}
.tapbi-workenv-progress.is-dragging,
.tapbi-workenv-progress.is-dragging .tapbi-workenv-progress-thumb,
.tapbi-whph-progress.is-dragging,
.tapbi-whph-progress.is-dragging .tapbi-whph-progress-thumb {
	cursor: grabbing;
}

/* Moi truong lam viec ban MOBILE - frame Figma 375px, node "Frame 48095709"
   (2085:263573): 375 x 896, padding 24 hai ben + 80 tren + 100 duoi, layout
   VERTICAL itemSpacing 48, can giua.
   Khung "Images" rong dung 327 (= be ngang noi dung) trong khi 5 card moi
   card 300 + gap 16 = 1564 -> van la carousel cuon ngang nhu ban desktop,
   moi card he lo 11px cua card ke tiep.
   Frame bat dau o y=1856.32, dung bang day section gioi thieu -> lien mach. */
@media (max-width: 767px) {
	.tapbi-workenv {
		padding-left: calc(var(--tapbi-scale-m) * 24px);
		padding-right: calc(var(--tapbi-scale-m) * 24px);
		/* Padding tren/duoi ghi qua INLINE style cua block nen phai !important */
		padding-top: calc(var(--tapbi-scale-m) * 80px) !important;
		padding-bottom: calc(var(--tapbi-scale-m) * 100px) !important;
	}
	/* Selector 2 cap (0,2,0) de thang rule .wp-container-* (0,1,0) cua WP. */
	.wp-block-group.tapbi-workenv {
		row-gap: calc(var(--tapbi-scale-m) * 48px);
	}
	.tapbi-workenv .tapbi-workenv-heading {
		/* 40px / 48px / Bold / -2% (ban desktop dung token h-2 = 48px/1.1667).
		   Rong 327 nen chu tu gay 2 dong dung nhu Figma (cao 96).
		   font-size can !important vi .has-h-2-font-size co san !important;
		   line-height can !important vi block ghi qua inline style. */
		font-size: calc(var(--tapbi-scale-m) * 40px) !important;
		line-height: 1.2 !important; /* 48/40 */
	}
	.tapbi-workenv-track {
		/* Bo max-width 1312px cua ban desktop de track rong dung 327. */
		max-width: none;
		gap: calc(var(--tapbi-scale-m) * 16px);
	}
	.tapbi-workenv-item {
		width: calc(var(--tapbi-scale-m) * 300px);
	}
	.tapbi-workenv-photo {
		/* itemSpacing 24 giua anh va chu thich */
		margin-bottom: calc(var(--tapbi-scale-m) * 24px);
	}
	.tapbi-workenv-photo img {
		/* 300 x 440 (desktop 340 x 440), bo goc 24 */
		aspect-ratio: 300 / 440;
		border-radius: calc(var(--tapbi-scale-m) * 24px);
	}
	.tapbi-workenv .tapbi-workenv-caption {
		/* Ban desktop cung da la 20px / 28px / Medium, o day chi khac hai diem:
		   co chu scale theo --tapbi-scale-m vi nam trong card cung scale (de o
		   may 320px dong "Van hoa ton trong va coi mo" khong gay 2 dong), va
		   letter-spacing Figma mobile de -2% (desktop -1% theo style guide).
		   font-size can !important vi .has-title-font-size co san !important. */
		font-size: calc(var(--tapbi-scale-m) * 20px) !important;
		letter-spacing: -0.02em;
	}
	.tapbi-workenv-controls {
		max-width: none;
		gap: calc(var(--tapbi-scale-m) * 24px);
	}
}

/* San pham noi bat: luoi 2x2 card + nut Xem Them */
.tapbi-products {
	padding-left: var(--wp--preset--spacing--gutter);
	padding-right: var(--wp--preset--spacing--gutter);
}
.tapbi-products-heading {
	/* Co rieng 44px (token section-heading), -2% giong moi cho khac dung co
	   nay. line-height 52/44 = 1.1818 ghi inline trong pattern. */
	letter-spacing: -0.02em;
}
.tapbi-products-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--wp--preset--spacing--25);
	max-width: calc(var(--tapbi-scale) * 1312px);
	width: 100%;
	margin: 0 auto;
}
.tapbi-product-card {
	align-items: center;
	/* Figma dat strokeAlign INSIDE - vien 1px #e5e6eb nam TRONG khung 644x168.
	   Card cao tu dong nen border cua CSS se cong them 2px, thanh 170. Ve vien
	   bang box-shadow inset de giu dung 168 (giong ban mobile). */
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--nature-200);
	border-radius: calc(var(--tapbi-scale) * 16px);
	padding: var(--wp--preset--spacing--25);
	background: var(--wp--preset--color--base);
}
.tapbi-product-info {
	/* "Product Info" layoutGrow 1 - chiem het chieu ngang con lai (452 = 644 -
	   24*2 padding - 120 icon - 24 gap). min-width:0 de chu dai khong day card. */
	flex: 1 1 auto;
	min-width: 0;
}
.tapbi-product-icon {
	flex-shrink: 0;
	margin: 0;
}
.tapbi-product-icon img {
	width: calc(var(--tapbi-scale) * 120px);
	height: calc(var(--tapbi-scale) * 120px);
	object-fit: cover;
	display: block;
	/* "Component 13" cornerRadius 8 (ban mobile la 6.667 = 8 x 100/120). */
	border-radius: calc(var(--tapbi-scale) * 8px);
}
.tapbi-product-label {
	/* Base 1 (16px) = Semibold, line-height 24/16. font-size va font-weight
	   ghi trong pattern. Figma ghi letterSpacing 0% - KHONG gian chu du la
	   dong IN HOA. */
	line-height: 1.5;
	letter-spacing: 0;
}
.tapbi-product-name {
	/* H6: 24px / 32px / Bold / -2%. font-size (token large) va font-weight ghi
	   trong pattern. */
	line-height: 1.3333;
	letter-spacing: -0.02em;
}

/* San pham noi bat ban MOBILE - frame Figma 375px, node "Frame 48095727"
   (2085:263599): 375 x 1368, nen #f9fafb, padding 24 hai ben + 80 tren/duoi,
   layout VERTICAL itemSpacing 48.
   "Product List" 327 x 1016 = 4 card 236 + 3 khoang ho 24, xep 1 cot.
   Frame bat dau o y=2752.32, dung bang day section moi truong lam viec. */
@media (max-width: 767px) {
	.tapbi-products {
		/* Figma mobile ghi nen #f9fafb (= neutral-50), ban desktop dang dung
		   surface (#f4f4f6). Class .has-surface-background-color cua WP co
		   san !important nen o day cung phai !important. */
		background-color: var(--wp--preset--color--neutral-50) !important;
		padding-left: calc(var(--tapbi-scale-m) * 24px);
		padding-right: calc(var(--tapbi-scale-m) * 24px);
		/* Padding tren/duoi ghi qua INLINE style cua block nen phai !important */
		padding-top: calc(var(--tapbi-scale-m) * 80px) !important;
		padding-bottom: calc(var(--tapbi-scale-m) * 80px) !important;
	}
	/* Selector 2 cap (0,2,0) de thang rule .wp-container-* (0,1,0) cua WP. */
	.wp-block-group.tapbi-products {
		row-gap: calc(var(--tapbi-scale-m) * 48px);
	}
	.tapbi-products .tapbi-products-heading {
		/* 40px / 48px / Bold / -2% (desktop dung token section-heading = 44px).
		   font-size can !important vi .has-section-heading-font-size co san
		   !important; line-height can !important vi block ghi qua inline style. */
		font-size: calc(var(--tapbi-scale-m) * 40px) !important;
		line-height: 1.2 !important; /* 48/40 */
	}
	.tapbi-products-grid {
		/* 1 cot, moi card rong tron 327 */
		grid-template-columns: 1fr;
		gap: calc(var(--tapbi-scale-m) * 24px);
		max-width: none;
	}
	.tapbi-products .tapbi-product-card {
		/* Card 327 x 236: nen trang, vien 1px #e5e6eb (= nature-200, dung
		   san), bo goc 16, padding 24, layout DOC (desktop xep ngang).
		   Vien ve bang box-shadow inset - xem rule goc .tapbi-product-card. */
		flex-direction: column;
		align-items: flex-start;
		justify-content: center;
		gap: calc(var(--tapbi-scale-m) * 24px);
		padding: calc(var(--tapbi-scale-m) * 24px);
		border-radius: calc(var(--tapbi-scale-m) * 16px);
	}
	.tapbi-products .tapbi-product-icon img {
		/* "Component 13": 100 x 100, bo goc 6.667 (desktop 120 / 8) */
		width: calc(var(--tapbi-scale-m) * 100px);
		height: calc(var(--tapbi-scale-m) * 100px);
		border-radius: calc(var(--tapbi-scale-m) * 6.667px);
	}
	/* Khoi chu trong card cao dung 64 (= 236 - 24*2 padding - 100 icon - 24
	   gap). Khop voi data Figma cua card (design/mobile/tapbi-product-card.json):
	   Base 1 (16px/24px) + gap 8 + H6 (24px/32px) = 64. */
	/* Selector 2 cap (0,2,0) de thang rule .wp-container-* (0,1,0) cua WP -
	   gap cua khoi nay do blockGap trong pattern sinh ra. */
	.tapbi-product-card > .tapbi-product-info {
		gap: calc(var(--tapbi-scale-m) * 8px);
	}
	.tapbi-products .tapbi-product-name {
		/* .has-large-font-size cua WP co san !important */
		font-size: calc(var(--tapbi-scale-m) * 24px) !important;
		line-height: 1.3333; /* 32/24 */
	}
}

/* Gia nhap doi ngu: anh nen that (hoa tiet + 6 avatar nhan vien da gan san trong anh,
   xuat tu Figma, luu o shared/join-team-bg.png) - khong con la CSS xap xi nua.
   Anh goc 5760x3000 (= 1440x750 @4x) dung khop khung: padding-top 486 (vung anh)
   + content 164 + padding-bottom 100 = 750. */
.tapbi-jointeam {
	position: relative;
	overflow: hidden;
	padding-top: calc(var(--tapbi-scale) * 486px);
	padding-bottom: var(--wp--preset--spacing--70);
}
.tapbi-jointeam-bg {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: calc(var(--tapbi-scale) * 1440px);
	max-width: none;
	height: auto;
	pointer-events: none;
}

.tapbi-jointeam-content {
	position: relative;
	max-width: calc(var(--tapbi-scale) * 570px);
	margin: 0 auto;
	align-items: center;
}
.tapbi-jointeam-heading {
	letter-spacing: -0.03em;
}

/* Gia nhap doi ngu ban MOBILE - frame Figma 375px, node "image" (2085:263665):
   375 x 550, anh nen la FILL cua CA khung (desktop: anh nam o dai tren cao
   486px, chu nam duoi tren nen trang). Padding 8 hai ben + 0 tren + 64 duoi,
   noi dung day xuong DAY khung (primaryAxisAlignItems MAX).
   Khoi chu "Frame 6" 359 x 216 nam o y=270 (= 550 - 64 - 216).
   Frame bat dau o y=4864.32, dung bang day section Work Hard, Play Harder. */
@media (max-width: 767px) {
	.tapbi-jointeam {
		box-sizing: border-box;
		/* min-height chu khong phai height: o may hep hon 375 chu co the
		   xuong 3 dong, de khung no ra thay vi de chu tran. */
		min-height: calc(var(--tapbi-scale-m) * 550px);
		padding-top: 0;
		padding-bottom: calc(var(--tapbi-scale-m) * 64px);
		padding-left: calc(var(--tapbi-scale-m) * 8px);
		padding-right: calc(var(--tapbi-scale-m) * 8px);
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
	}
	.tapbi-jointeam-bg {
		/* scaleMode FILL = phu kin ca khung (desktop: anh giu nguyen ti le
		   1440x750 va chi chiem dai tren). */
		left: 0;
		transform: none;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
	.tapbi-jointeam .tapbi-jointeam-content {
		max-width: none;
		width: 100%;
		gap: calc(var(--tapbi-scale-m) * 24px);
	}
	.tapbi-jointeam .tapbi-jointeam-heading {
		/* 64px / 72px / SemiBold / -3% - giong het H1 ban desktop, KHONG ha
		   xuong 40px nhu cac heading mobile khac. Rong 359 nen chu tu gay 2
		   dong dung nhu Figma (cao 144).
		   font-size can !important vi .has-xx-large-font-size co san
		   !important (token nay fluid, o 375px chi con 40px). */
		font-size: calc(var(--tapbi-scale-m) * 64px) !important;
		line-height: 1.125 !important; /* 72/64 */
	}
}

/* Work Hard, Play Harder: collage 2 hang anh + 1 anh doc ben phai.
   Kich thuoc lay dung tu Figma Dev Mode (JSON), khong phai uoc luong. */
.tapbi-whph-heading {
	/* -2% theo bang type-scale (size section-heading dung o day theo dung Figma) */
	letter-spacing: -0.02em;
}
.tapbi-whph-main {
	display: flex;
	align-items: stretch;
	gap: var(--wp--preset--spacing--25);
	max-width: calc(var(--tapbi-scale) * 1312px);
	margin: 0 auto;
	width: 100%;
}
.tapbi-whph-content {
	flex: 0 0 auto;
	width: calc(var(--tapbi-scale) * 978px);
}
.tapbi-whph-row {
	display: flex;
	gap: var(--wp--preset--spacing--25);
}
.tapbi-whph-img {
	margin: 0;
	flex-shrink: 0;
}
.tapbi-whph-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: calc(var(--tapbi-scale) * 12px);
}
.tapbi-whph-img.is-top1  { width: calc(var(--tapbi-scale) * 310px); height: calc(var(--tapbi-scale) * 276px); }
.tapbi-whph-img.is-top2  { width: calc(var(--tapbi-scale) * 421px); height: calc(var(--tapbi-scale) * 276px); }
.tapbi-whph-img.is-top3  { width: calc(var(--tapbi-scale) * 199px); height: calc(var(--tapbi-scale) * 276px); }
.tapbi-whph-img.is-bottom1 { width: calc(var(--tapbi-scale) * 310px); height: calc(var(--tapbi-scale) * 280px); }
.tapbi-whph-img.is-bottom2 { width: calc(var(--tapbi-scale) * 199px); height: calc(var(--tapbi-scale) * 280px); }
.tapbi-whph-img.is-bottom3 { width: calc(var(--tapbi-scale) * 421px); height: calc(var(--tapbi-scale) * 280px); }
.tapbi-whph-side {
	flex: 0 0 auto;
	margin: 0;
	width: calc(var(--tapbi-scale) * 310px);
}
.tapbi-whph-side img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: calc(var(--tapbi-scale) * 12px);
}

/* Cum nut dieu khien cua "Work Hard, Play Harder" CHI xuat hien duoi 768px:
   tu 768px tro len section nay la collage tinh, khong phai carousel. */
@media (min-width: 768px) {
	.tapbi-whph-controls {
		display: none;
	}
}

/* Work Hard, Play Harder ban MOBILE - frame Figma 375px, node "Frame 48095712"
   (2085:263648): 375 x 744, padding 24 hai ben + 80 tren + 0 duoi, layout
   VERTICAL itemSpacing 48.
   Khac han ban desktop: desktop la collage (2 hang anh kich thuoc khac nhau +
   1 anh doc), mobile la carousel ngang - moi anh 300 x 440, bo goc 24,
   khoang ho 16, kem cum nut giong section "Moi truong lam viec".
   Frame bat dau o y=4120.32, dung bang day section san pham noi bat. */
@media (max-width: 767px) {
	.tapbi-whph {
		padding-left: calc(var(--tapbi-scale-m) * 24px);
		padding-right: calc(var(--tapbi-scale-m) * 24px);
		/* Padding tren ghi qua INLINE style cua block nen phai !important.
		   Padding duoi da la 0 san, dung nhu Figma. */
		padding-top: calc(var(--tapbi-scale-m) * 80px) !important;
	}
	/* Selector 2 cap (0,2,0) de thang rule .wp-container-* (0,1,0) cua WP. */
	.wp-block-group.tapbi-whph {
		row-gap: calc(var(--tapbi-scale-m) * 48px);
	}
	.tapbi-whph .tapbi-whph-heading {
		/* 40px / 48px / Bold / -2% (desktop dung token section-heading = 44px).
		   Rong 327 nen chu tu gay 2 dong dung nhu Figma (cao 96).
		   font-size can !important vi .has-section-heading-font-size co san
		   !important; line-height can !important vi block ghi qua inline style. */
		font-size: calc(var(--tapbi-scale-m) * 40px) !important;
		line-height: 1.2 !important; /* 48/40 */
	}
	/* display:contents go hai lop boc .tapbi-whph-content/.tapbi-whph-row ra
	   khoi cay layout, de ca 7 anh thanh con truc tiep cua .tapbi-whph-main -
	   tuc mot hang ngang duy nhat. Khong phai sua markup cua ban desktop. */
	.tapbi-whph .tapbi-whph-content,
	.tapbi-whph .tapbi-whph-row {
		/* Selector 2 cap (0,2,0) chu KHONG phai class don: WP core in rule
		   `body .is-layout-flex{display:flex}` co do uu tien (0,1,1), cao hon
		   class don nen thu tu file khong cuu duoc - hai lop boc se van la
		   flex va anh xep thanh 2 hang. */
		display: contents;
	}
	.tapbi-whph .tapbi-whph-main {
		max-width: none;
		align-items: flex-start;
		gap: calc(var(--tapbi-scale-m) * 16px);
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-behavior: smooth;
		-webkit-overflow-scrolling: touch;
		/* an scrollbar mac dinh, dung thanh progress tu ve thay the */
		scrollbar-width: none;
	}
	.tapbi-whph .tapbi-whph-main::-webkit-scrollbar {
		display: none;
	}
	/* Selector 2 cap de thang cac rule .tapbi-whph-img.is-top1... (cung
	   (0,2,0) nhung nam truoc trong file). */
	.tapbi-whph .tapbi-whph-img,
	.tapbi-whph .tapbi-whph-side {
		flex: 0 0 auto;
		width: calc(var(--tapbi-scale-m) * 300px);
		height: calc(var(--tapbi-scale-m) * 440px);
		scroll-snap-align: start;
	}
	.tapbi-whph .tapbi-whph-img img,
	.tapbi-whph .tapbi-whph-side img {
		/* bo goc 24 (desktop 12) */
		border-radius: calc(var(--tapbi-scale-m) * 24px);
	}
	.tapbi-whph-controls {
		max-width: none;
		gap: calc(var(--tapbi-scale-m) * 24px);
	}
}

/* Footer: logo + 2 cot (menu/social) + khoi lien he + thanh copyright.
   Gap giua 2 cot menu (96px) la uoc luong tu anh chup, JSON Figma bi cat truoc
   khi lo phan nay - can verify lai khi co so do chinh xac. */
.tapbi-footer {
	padding-top: var(--wp--preset--spacing--70);
	padding-bottom: 0;
	gap: var(--wp--preset--spacing--55) !important;
	align-items: stretch !important;
}
.tapbi-footer-main {
	display: flex;
	align-items: flex-end;
	/* nowrap: hai khoi con da co be ngang co dinh 644 vua khit 1312, cho phep
	   wrap chi tao them rui ro xuong dong khi lam tron subpixel. Duoi 768px
	   .tapbi-footer-main doi sang xep doc nen khong can wrap. */
	flex-wrap: nowrap;
	/* Khoi trai va khoi lien he cach nhau dung 24px. Bo space-between: hai
	   khoi khong dat ra hai mep nua ma chia deu be ngang noi dung - 644 + 24
	   + 644 = 1312, dung bang be ngang hai frame 644 trong Figma. */
	gap: var(--wp--preset--spacing--25);
	padding-left: var(--wp--preset--spacing--gutter);
	padding-right: var(--wp--preset--spacing--gutter);
}
.tapbi-footer-left {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--45);
	/* 644 + 24 + 644 = 1312, dung bang be ngang noi dung; moi so hang deu nhan
	   --tapbi-scale nen ti le giu nguyen o moi do rong man hinh.
	   Phai la 0 0 (khong co, khong gian): con so shrink/grow khac 0 deu khien
	   Chrome do chieu cao khoi theo kich ban be ngang co lai - chu trong o
	   "Dia chi" gay lam 2 dong - roi lay so do lam chieu cao dong, ket qua
	   footer cao 564 thay vi 536 du tren man hinh khoi van rong 644 va chu
	   chi co 1 dong.
	   Duoi 768px .tapbi-footer-main doi sang xep doc nen cap nay het tac dung. */
	flex: 0 0 calc(var(--tapbi-scale) * 644px);
}
/* Hai cot menu/"Theo doi" - JSON Figma "Frame 48095642" (design/mobile/
   footer1.json, node desktop 644x164): NGANG gap 24, khong wrap.
     "Frame 9"        199x164, doc gap 10 -> cot menu (rong CO DINH 199 nen
                                             cot "Theo doi" bat dau o x=223)
     "Frame 48095641"  88x76,  doc gap 16 -> cot "Theo doi"
     "Frame 655"       88x32,  ngang gap 24, icon 32x32
   Cau truc trung khop ban mobile, chi khac he so scale. */
.tapbi-footer-left > .tapbi-footer-cols {
	display: flex;
	gap: calc(var(--tapbi-scale) * 24px);
	flex-wrap: nowrap;
	/* Ca hai cot deu bat dau o y=0 trong Figma. Phai ghi de vi WordPress sinh
	   san align-items:center cho moi block layout flex - khong co dong nay thi
	   cot "Theo doi" (cao 76) bi day xuong giua cot menu (cao 164). Selector
	   2 cap de thang rule .wp-container-* (0,1,0) cua WP. */
	align-items: flex-start;
}
.tapbi-footer-cols > .tapbi-footer-col:first-child {
	flex: 0 0 calc(var(--tapbi-scale) * 199px);
}
.tapbi-footer-col {
	display: flex;
	flex-direction: column;
	gap: calc(var(--tapbi-scale) * 10px);
}
.tapbi-footer-cols > .tapbi-footer-col:last-child {
	/* Cot "Theo doi" dung gap 16 (khac cot menu la 10) */
	gap: calc(var(--tapbi-scale) * 16px);
}
.tapbi-footer-col-heading {
	/* 20px / 28px / Medium / -2% - size Title trong style guide. Khoang cach
	   xuong muc dau tien do gap cua cot lo, khong dung margin. */
	margin: 0;
	line-height: 1.4;
	letter-spacing: -0.02em;
}
.tapbi-footer-link {
	margin: 0;
	/* line-height phai dat len CA the <p> boc ngoai: <a> la inline nen chieu
	   cao dong van do line-height cua <p> quyet dinh (1.6 mac dinh = 25.6px),
	   moi dong du ra 1.6px. */
	line-height: 1.5;
}
.tapbi-footer-link a {
	text-decoration: none;
	/* 16px / 24px / Medium / letter-spacing 0 / mau #6c727f (= muted, dat
	   bang class trong markup) */
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: 0;
}
.tapbi-footer-social {
	display: flex;
	gap: calc(var(--tapbi-scale) * 24px);
	/* Icon to trang #ffffff nhung khung boc ("Frame 655") co opacity 0.3 -
	   day la ly do icon trong Figma nhin ra xam nhat chu khong trang tinh. */
	opacity: 0.3;
}
.tapbi-footer-social-icon:hover {
	/* Figma khong ve trang thai hover - keo ve trang day de link co phan hoi. */
	opacity: 1;
}
.tapbi-footer-social-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	/* Chi con hinh icon 32x32 mau trang, KHONG co vong tron nen mo phia sau. */
	width: calc(var(--tapbi-scale) * 32px);
	height: calc(var(--tapbi-scale) * 32px);
	color: var(--wp--preset--color--base);
	flex-shrink: 0;
}
.tapbi-footer-social-icon svg {
	width: 100%;
	height: 100%;
}
/* Khoi lien he - JSON Figma "Frame 34" (design/mobile/footer-col-2.json,
   node desktop 644x284): DOC, SPACE_BETWEEN, 3 o cao 72 deu nhau
   (24 nhan + 4 gap + 28 gia tri + 16 padding duoi) => hai khoang ho con lai
   moi cai 34. Dat gap 34 cho ket qua y het ma khung van no ra duoc neu chu
   xuong them dong. */
.tapbi-footer-contact {
	display: flex;
	flex-direction: column;
	gap: calc(var(--tapbi-scale) * 34px);
	flex: 0 0 calc(var(--tapbi-scale) * 644px);
	max-width: calc(var(--tapbi-scale) * 644px);
}
.tapbi-footer-contact-item {
	display: flex;
	flex-direction: column;
	/* WP dat align-items:flex-start cho group flex doc -> o con co lai bang
	   noi dung, net gach duoi ngan cun. Figma: moi o rong tron 644. */
	align-self: stretch;
	gap: calc(var(--tapbi-scale) * 4px);
	padding-bottom: calc(var(--tapbi-scale) * 16px);
	/* Figma ve net bang stroke INSIDE - nam TRONG 72px. border cua CSS tren
	   khoi cao tu dong luon cong them 1px ra ngoai, nen ve bang box-shadow
	   inset (giong .tapbi-product-card). Ca 3 o deu co net nay. */
	box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.1);
}
.tapbi-footer-contact-label,
.tapbi-footer-contact-value {
	margin: 0;
}
.tapbi-footer-contact-label {
	/* 16px / 24px / Medium / letter-spacing 0 / mau #6c727f (= muted, dat
	   bang class trong markup) */
	line-height: 1.5;
	letter-spacing: 0;
}
.tapbi-footer-contact-value {
	/* 20px / 28px / Medium / -2% - size Title trong style guide */
	line-height: 1.4;
	letter-spacing: -0.02em;
}
/* Thanh copyright - JSON Figma "Frame 1729" (design/mobile/footer.json, node
   desktop 1440x72): NGANG, gap 24 deu cho MOI muc (ca 3 link), can giua hai
   truc, padding 24 tren/duoi va 0 hai ben, stroke TREN #ffffff 10%.
   Cac muc con: dong copyright - net doc 1x16 - 3 link. */
.tapbi-footer-bottom {
	display: flex;
	align-items: center;
	justify-content: center !important;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--25);
	padding: var(--wp--preset--spacing--25) 0;
	/* Ve net bang box-shadow inset chu KHONG border-top: Figma ve stroke
	   INSIDE (nam trong chieu cao thanh), con border cua CSS cong them 1px ra
	   ngoai - dung 1px do lam ca footer cao 537 thay vi 536. Cung ly do da
	   ghi o .tapbi-footer-contact-item. */
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.tapbi-footer-copyright,
.tapbi-footer-bottom-links a {
	/* 16px / 24px / Medium / letter-spacing 0 - size Body 2, KHONG phai Base 2
	   14px. Mau la #ffffff nhung node Figma co opacity 0.3 (cung cach lam voi
	   .tapbi-footer-social) - vi vay dung class mau base + opacity, khong ghi
	   thang rgba. */
	font-weight: 500;
	line-height: 1.5;
	opacity: 0.3;
}
.tapbi-footer-copyright {
	margin: 0;
}
.tapbi-footer-divider {
	/* Figma la LINE xoay -90 => net DOC 1x16, trang, opacity 0.3. Ky tu "|"
	   trong markup chi de giu cho ngu nghia - an bang font-size 0. Khoang cach
	   24 hai ben da do gap cua .tapbi-footer-bottom lo. */
	width: 0;
	height: calc(var(--tapbi-scale) * 16px);
	border-left: 1px solid var(--wp--preset--color--base);
	opacity: 0.3;
	font-size: 0;
	line-height: 0;
	flex-shrink: 0;
}
.tapbi-footer-bottom-links {
	display: flex;
	gap: var(--wp--preset--spacing--25);
	flex-wrap: wrap;
}
.tapbi-footer-bottom-links a {
	text-decoration: none;
}
.tapbi-footer-bottom-links a:hover {
	/* Figma khong ve trang thai hover - keo ve trang day de link mo 30% co
	   phan hoi khi ro chuot (giong .tapbi-footer-social-icon:hover). */
	opacity: 1;
}

@media (max-width: 767px) {
	.tapbi-footer-main {
		flex-direction: column;
		align-items: flex-start;
	}
	.tapbi-footer-contact {
		max-width: 100%;
	}
	.tapbi-footer-bottom {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* Footer ban MOBILE - frame Figma 375px, node "Footer" (2085:263670): 375 x
   888, nen #212936 (= nature-800, dung san), padding 0 hai ben + 64 tren + 0
   duoi, gap 32.
   LUU Y NGUON: design/mobile/footer.json GIO LA FRAME DESKTOP (1440x536, xem
   khoi .tapbi-footer o tren) - ban export mobile khong con tren dia. Muon doi
   chieu lai cac so mobile duoi day thi phai export lai node 2085:263670.
   Anh xa khung Figma sang class co san:
     "Frame 30"        375x600, padding 24 hai ben, gap 32 -> .tapbi-footer-main
     "Frame 29"        327x284, gap 48                     -> .tapbi-footer-left
     logo              171x72                              -> .tapbi-logo trong footer
     "Frame 48095642"  327x164, NGANG gap 24               -> .tapbi-footer-cols
     "Frame 9"         199x164, doc gap 10                 -> cot menu
     "Frame 48095641"   88x76,  doc gap 16                 -> cot "Theo doi"
     "Frame 655"        88x32,  ngang gap 24, icon 32x32   -> .tapbi-footer-social
     "Frame 34"        327x284, gap thuc 28                -> .tapbi-footer-contact
     "Frame 1729"      375x192, doc gap 16, padding 16/0   -> .tapbi-footer-bottom
   Co chu trong footer giu CO DINH (16 va 20px), khong scale theo
   --tapbi-scale-m: toan la chu than bai/lien ket, tu xuong dong duoc nen
   khong co nguy co tran khung.
   Frame bat dau o y=5414.32, dung bang day section "Gia nhap doi ngu". */
@media (max-width: 767px) {
	.tapbi-footer {
		padding-top: calc(var(--tapbi-scale-m) * 64px);
		/* Rule goc dung !important nen o day cung phai !important */
		gap: calc(var(--tapbi-scale-m) * 32px) !important;
	}
	.tapbi-footer-main {
		/* flex-direction: column da dat o khoi @media ben tren; doi
		   align-items sang stretch de hai khoi con rong tron 327. */
		align-items: stretch;
		padding-left: calc(var(--tapbi-scale-m) * 24px);
		padding-right: calc(var(--tapbi-scale-m) * 24px);
		gap: calc(var(--tapbi-scale-m) * 32px);
	}
	.tapbi-footer-left,
	.tapbi-footer-contact {
		/* Go flex-basis 644 cua ban desktop: o day .tapbi-footer-main xep DOC
		   nen basis se tinh vao CHIEU CAO, keo hai khoi cao vong len. */
		flex: 0 1 auto;
	}
	.tapbi-footer-left {
		gap: calc(var(--tapbi-scale-m) * 48px);
	}
	.tapbi-footer .tapbi-logo img {
		/* Logo footer giu nguyen co goc 171x72, KHONG dung 114x48 nhu logo
		   tren header - phai ghi de vi rule header la .tapbi-logo img (chung
		   class) va nam truoc trong file. */
		max-width: calc(var(--tapbi-scale-m) * 171px);
	}

	/* --- Cot menu + cot "Theo doi" ---
	   Bo cuc va co chu trung khop ban desktop (xem khoi .tapbi-footer-cols o
	   tren), o day chi doi he so scale sang --tapbi-scale-m. */
	.tapbi-footer-cols {
		gap: calc(var(--tapbi-scale-m) * 24px);
	}
	.tapbi-footer-cols > .tapbi-footer-col:first-child {
		flex: 0 0 calc(var(--tapbi-scale-m) * 199px);
	}
	.tapbi-footer-col {
		gap: calc(var(--tapbi-scale-m) * 10px);
	}
	.tapbi-footer-cols > .tapbi-footer-col:last-child {
		gap: calc(var(--tapbi-scale-m) * 16px);
	}
	.tapbi-footer-social {
		gap: calc(var(--tapbi-scale-m) * 24px);
	}
	.tapbi-footer-social-icon {
		width: calc(var(--tapbi-scale-m) * 32px);
		height: calc(var(--tapbi-scale-m) * 32px);
	}

	/* --- Khoi lien he --- */
	.tapbi-footer-contact {
		/* Figma dung SPACE_BETWEEN trong khung cao 284; noi dung 3 khoi
		   (72 + 72 + 84 = 228) nen hai khoang ho deu bang 28. Dat gap 28 cho
		   ket qua y het ma khung van no ra duoc neu chu xuong them dong. */
		gap: calc(var(--tapbi-scale-m) * 28px);
	}
	.tapbi-footer-contact-item {
		/* Co chu va cach xep giong ban desktop, chi doi he so scale. */
		gap: calc(var(--tapbi-scale-m) * 4px);
		padding-bottom: calc(var(--tapbi-scale-m) * 16px);
	}
	.tapbi-footer-contact-item.is-last {
		/* Rieng ban mobile: o "Dia chi" khong co net gach (footer.json,
		   Frame 33 khong co stroke) - ban desktop thi co. */
		box-shadow: none;
	}

	/* --- Thanh cuoi --- */
	.tapbi-footer-bottom {
		/* flex-direction: column da dat o khoi @media ben tren */
		align-items: center;
		gap: calc(var(--tapbi-scale-m) * 16px);
		padding: calc(var(--tapbi-scale-m) * 16px) 0;
		/* Ban mobile net mo hon mot chut (0.1 thay vi 0.12) */
		box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
	}
	/* Co chu/mau/weight cua dong copyright + link: giong het ban desktop
	   (16/24 Medium, trang opacity 0.3) nen khong khai bao lai o day. */
	.tapbi-footer-copyright {
		text-align: center;
	}
	.tapbi-footer-divider {
		/* Ban desktop la net DOC 1x16 nam giua dong copyright va cac link.
		   Figma mobile xoay thanh net NGANG 16x1, nam duoi dong copyright.
		   Chi can dao lai truc so voi rule desktop. */
		display: block;
		width: calc(var(--tapbi-scale-m) * 16px);
		/* Trong Figma net nay la LINE khong chiem cho trong layout. Tai lap
		   bang height 0 + border-top, roi margin-bottom -1px de tra lai dung
		   0px chieu cao. Khoang cach 16 tren/duoi da do gap cua
		   .tapbi-footer-bottom lo nen margin-top phai la 0. */
		height: 0;
		border-left: 0;
		border-top: 1px solid var(--wp--preset--color--base);
		overflow: hidden;
	}
	.tapbi-footer-bottom > .tapbi-footer-divider {
		/* Selector 2 cap de thang rule ".is-layout-flex > :is(*, div){margin:0}"
		   cua WordPress (0,1,1) - khong co no thi margin am bi go, thanh cuoi
		   cao 193 thay vi 192. */
		margin: 0 auto -1px;
	}
	.tapbi-footer-bottom-links {
		flex-direction: column;
		align-items: center;
		gap: calc(var(--tapbi-scale-m) * 16px);
	}
}

/* =========================================================================
   TRANG "VE CHUNG TOI"
   Theo JSON Figma frame 2037:569 (1440x560): node "Logo and Menu" nam BEN
   TRONG khung hero -> header de len anh nen, nen trong suot, chu trang.
   Header la template-part dung chung cho ca site nen moi thay doi mau o day
   deu phai boc trong .tapbi-header-overlay (class gan vao wp:template-part
   trong templates/page-ve-chung-toi.html), tranh anh huong trang khac.
   ========================================================================= */

/* Keo <main> len dung bang chieu cao header de hero nam duoi header.
   Chon cach nay THAY VI position:absolute cho header: header van o trong
   luong nen khong phu thuoc ancestor nao co position. Neu dung absolute thi
   containing block roi ve initial containing block (.wp-site-blocks khong co
   position), ma khi dang nhap WordPress them html{margin-top:32px} cho admin
   bar -> header lech 32px so voi hero, chi khi dang nhap.
   Selector 2 cap giong rule .wp-site-blocks > footer o tren de chac chan
   thang rule margin mac dinh cua WordPress. */
.wp-site-blocks > main.tapbi-about-main {
	margin-block-start: calc(var(--tapbi-header-height) * -1);
}

/* Preset class cua WordPress (.has-neutral-50-background-color,
   .has-primary-color) deu kem !important nen o day phai vua tang do uu tien
   vua dung !important moi de len duoc. */
.tapbi-header-overlay .tapbi-header {
	background-color: transparent !important;
	position: relative;
	z-index: 2;
}
/* Icon burger nam NGOAI dropdown, de thang len anh hero -> phai trang o moi
   do rong man hinh (rule goc khong co !important nen chi can specificity). */
.tapbi-header-overlay .tapbi-nav-burger {
	color: var(--wp--preset--color--base);
}

@media (min-width: 768px) {
	/* Chi doi chu menu sang trang tu 768px tro len: duoi nguong do menu la
	   dropdown nen trang (.tapbi-menu), chu trang se mat hut tren nen trang. */
	.tapbi-header-overlay .tapbi-menu-item a {
		color: var(--wp--preset--color--base) !important;
	}

	/* Nut chon ngon ngu tren nen anh hero - JSON Figma
	   design/header-about-us.json, node "Frame 48095790": nen den (#000000 =
	   ink), vien #4d5461 = nature-600, mui ten #d3d5da = nature-300. Ban ve
	   header nen sang (design/header-when-close.json) dung nen trang + vien
	   nature-300, nen phai ghi de rieng cho trang nay.
	   Cung nguong 768px voi mau chu menu o tren va cung ly do: duoi nguong do
	   nut nam trong lop phu menu nen TRANG, giu nguyen kieu sang thi moi doc
	   duoc. Hinh khoi (padding, gap, bo goc 6) khong doi nen khong ghi lai. */
	.tapbi-header-overlay .tapbi-lang-toggle {
		background-color: var(--wp--preset--color--ink);
		border-color: var(--wp--preset--color--nature-600);
	}
	.tapbi-header-overlay .tapbi-lang-caret {
		color: var(--wp--preset--color--nature-300);
	}
	/* Trang thai MO khong co trong ban ve cua trang nay. Ban ve nen sang cho
	   vien + mui ten DAM len (ink) de nhan manh; tren nen den lam vay la mat
	   hut, nen dao lai: sang len thanh trang. Do uu tien (0,4,0) de thang rule
	   goc .tapbi-lang[open] .tapbi-lang-toggle (0,3,0). */
	.tapbi-header-overlay .tapbi-lang[open] .tapbi-lang-toggle {
		border-color: var(--wp--preset--color--base);
	}
	.tapbi-header-overlay .tapbi-lang[open] .tapbi-lang-caret {
		color: var(--wp--preset--color--base);
	}
}

.tapbi-about-hero {
	/* Khong set width:100% - block .alignfull nay nam trong <main> co
	   .has-global-padding, WP keo rong bang margin-inline am; width:100%
	   se khoa be ngang bang content-box cua main nen hut 32px ben phai. */
	/* Anh about/hero-bg.png da nung san lop mau cam cua Figma (fill
	   GRADIENT_LINEAR blendMode COLOR) luc export - KHONG dung
	   background-color + background-blend-mode, ly do day du xem ghi chu o
	   .tapbi-jobdetail-hero. Mau ink ben duoi chi la nen du phong khi anh
	   chua tai xong / thieu file, de chu trang van doc duoc. */
	background-color: var(--wp--preset--color--ink);
	background-image: url('assets/images/about/hero-bg.png');
	background-size: cover;
	background-position: center;
	/* Dung min-height chu KHONG dung aspect-ratio 1440/560 nhu
	   .tapbi-jobdetail-hero: font-size cua H1 chay theo co che fluid rieng,
	   khong co theo --tapbi-scale, nen o man hinh hep chu xuong 3-4 dong.
	   aspect-ratio se ep cung chieu cao lam chu tran ra ngoai khung. */
	min-height: calc(var(--tapbi-scale) * 560px);
	display: flex;
	align-items: center;
	justify-content: center;
	/* Padding tren/duoi BANG NHAU nen H1 van nam giua khung 560px dung nhu
	   Figma (tam chu o y=280). Lay = chieu cao header + 24px an toan de o man
	   hinh hep chu khong chui vao vung header. Gia tri 24px khong co trong
	   Figma nen giu co dinh, khong scale (giong .tapbi-jobdetail-hero-inner). */
	padding-block: calc(var(--tapbi-header-height) + 24px);
	padding-inline: 24px;
	box-sizing: border-box;
}
.tapbi-about-hero-title {
	margin: 0;
	max-width: calc(var(--tapbi-scale) * 1312px);
	/* -0.03em = -1.92px / 64px, cung ly do nhu .tapbi-hero-heading o tren. */
	letter-spacing: -0.03em;
}

/* Hero "Ve chung toi" ban MOBILE - frame Figma 375px (node 2085:263772,
   375x560): ben trong gom "Logo and Menu" 375x120 (header de len anh nen) va
   khung noi dung 375x320 padding ngang 24, can giua ca hai chieu, chua H1
   44px / line-height 52 / Bold / letter-spacing -2% mau trang, can giua.
   Tam chu o y=280 dung bang giua khung 560 nen giu nguyen co che can giua
   bang flex + padding-block doi xung cua ban desktop, chi doi kich thuoc.
   Kich thuoc lay tu frame nay nen scale theo --tapbi-scale-m (baseline 375px),
   KHONG phai --tapbi-scale (1440px). */
@media (max-width: 767px) {
	.tapbi-about-hero {
		min-height: calc(var(--tapbi-scale-m) * 560px);
		padding-inline: calc(var(--tapbi-scale-m) * 24px);
	}
	/* Selector 2 cap de thang rule inline/preset cua block. */
	.tapbi-about-hero .tapbi-about-hero-title {
		/* NGOAI LE so voi quy tac "font-size khong scale" trong CLAUDE.md:
		   o day font-size CO nhan --tapbi-scale-m, cung ly do nhu
		   .tapbi-hero-heading (san 0.8533 => nho nhat 37.5px, van thua nguong
		   doc; doi lai chu giu dung ti le voi be ngang cot o may 320px).
		   !important: font-size vi .has-xx-large-font-size cua WP co san
		   !important; line-height vi block ghi qua inline style.
		   font-weight khong khai bao: H1 = Semibold ca 2 ban, pattern da ghi
		   600 inline roi. */
		font-size: calc(var(--tapbi-scale-m) * 44px) !important;
		line-height: 1.1818 !important; /* 52/44 */
		letter-spacing: -0.02em;
		max-width: none;
	}
	/* Nut hamburger tren mobile (node "Frame 9", 48x48): nen trang, vien 1px
	   nature-200 (#e5e6eb), bo goc 24 = hinh tron, icon den (ink) - khac ban
	   desktop la icon trang tran thang len anh. Frame mobile cua CA HAI trang
	   "Ve chung toi" (.tapbi-header-overlay) va "San pham"
	   (.tapbi-header-boxed, class gan o templates/page-san-pham.html) deu ve
	   nut nay giong het nhau nen dung chung mot rule. Trang chu KHONG co - frame
	   mobile cua no chi la icon tran, khong khung.
	   Rule mau trang o ".tapbi-header-overlay .tapbi-nav-burger" phia tren cung
	   do uu tien (0,2,0) nen block nay bat buoc phai nam SAU trong file moi de
	   len duoc.
	   Kich thuoc 48x48 da co san o block header mobile dau file. */
	.tapbi-header-overlay .tapbi-nav-burger,
	.tapbi-header-boxed .tapbi-nav-burger {
		justify-content: center;
		color: var(--wp--preset--color--ink);
		background-color: var(--wp--preset--color--base);
		border: 1px solid var(--wp--preset--color--nature-200);
		border-radius: 50%;
		box-sizing: border-box;
	}
}

/* Ve chung toi - section "About Us" (JSON Figma frame 2049:252379, 1440x580):
   khung ngoai padding 100px tren / 0 duoi / 64px hai ben, gap 24px, can giua;
   anh 755x480 bo goc 32, the ben phai 533x480 nen neutral-50 + vien 1px
   nature-200 bo goc 32, padding 48, chu can giua theo chieu doc.
   Tong: 64 + 755 + 24 + 533 + 64 = 1440 (khong du cho trong).
   KHAC voi .tapbi-about (section "Gioi thieu" o trang chu) - hai section
   rieng biet, dung song song, nen tach han tien to class. */
.tapbi-aboutus-photo {
	flex: 1 1 320px;
	max-width: calc(var(--tapbi-scale) * 755px);
	width: 100%;
	margin: 0;
	aspect-ratio: 755 / 480;
	overflow: hidden;
	border-radius: calc(var(--tapbi-scale) * 32px);
}
.tapbi-aboutus-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.tapbi-aboutus-card {
	flex: 1 1 320px;
	max-width: calc(var(--tapbi-scale) * 533px);
	width: 100%;
	/* min-height chu KHONG phai height: o man hinh hep font-size khong co theo
	   --tapbi-scale (co che fluid rieng) nen chu xuong nhieu dong - de khung
	   no ra thay vi de chu tran. O 1440px noi dung chi chiem 48+280+48 = 376
	   < 480 nen khung van giu dung 480 nhu Figma. */
	min-height: calc(var(--tapbi-scale) * 480px);
	box-sizing: border-box;
	border: 1px solid var(--wp--preset--color--nature-200);
	border-radius: calc(var(--tapbi-scale) * 32px);
	/* Dat display:flex o day thay vi qua layout cua block, va blockGap "0"
	   trong block JSON de WordPress khong chen margin chong len gap nay.
	   Ly do khong dung layout cua block: xem ghi chu o .tapbi-jobdetail-hero. */
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--30);
}
.tapbi-aboutus-heading {
	margin: 0;
	/* -0.02em = -0.8px / 40px (letter-spacing goc Figma o font-size 40px) */
	letter-spacing: -0.02em;
}
.tapbi-aboutus-desc {
	margin: 0;
	/* 24/16 = 1.5; Figma ghi letter-spacing 0% cho doan nay (khac dong Body 2
	   trong style guide) - lay theo Figma. */
	line-height: 1.5;
	letter-spacing: 0;
}

/* Tu 1024px ep 2 cot khong wrap nua (doi PATTERN, khong phai kich thuoc) */
@media (min-width: 1024px) {
	.tapbi-aboutus {
		flex-wrap: nowrap !important;
	}
}

/* About Us ban MOBILE - frame Figma 375px (node "About Us" trong khung
   "Frame 48095666"): khung ngoai padding 80 tren / 0 duoi / 24 hai ben,
   gap 24; anh 327x208 bo goc 16; the 327 cao HUG (444) nen #f9fafb, vien 1px
   nature-200, bo goc 16, padding 24, gap 16; H2 36/44 Bold -2%; doan chu
   16/24 Medium (giong ban desktop nen khong can ghi de).
   Anh va the xep DOC - ban desktop la 2 cot. Kich thuoc lay tu frame 375px
   nen scale theo --tapbi-scale-m, KHONG phai --tapbi-scale (1440px). */
@media (max-width: 767px) {
	.tapbi-aboutus {
		/* Padding ghi qua INLINE style cua block nen phai !important. */
		padding-top: calc(var(--tapbi-scale-m) * 80px) !important;
		padding-left: calc(var(--tapbi-scale-m) * 24px) !important;
		padding-right: calc(var(--tapbi-scale-m) * 24px) !important;
	}
	/* Selector 2 cap (0,2,0) de thang rule .wp-container-* (0,1,0) ma WP sinh
	   ra tu blockGap trong block JSON. */
	.wp-block-group.tapbi-aboutus {
		row-gap: calc(var(--tapbi-scale-m) * 24px);
	}
	.tapbi-aboutus-photo {
		/* Bo max-width 755px cua ban desktop - o 375px no chi con 196px. */
		flex: 0 0 100%;
		max-width: none;
		aspect-ratio: 327 / 208;
		border-radius: calc(var(--tapbi-scale-m) * 16px);
	}
	.tapbi-aboutus-card {
		flex: 0 0 100%;
		max-width: none;
		/* Trong Figma the cao HUG (444 = vua du noi dung) nen bo min-height
		   480px cua ban desktop, neu khong the se ho mot khoang trong lon. */
		min-height: 0;
		justify-content: flex-start;
		gap: calc(var(--tapbi-scale-m) * 16px);
		border-radius: calc(var(--tapbi-scale-m) * 16px);
		padding: calc(var(--tapbi-scale-m) * 24px) !important;
	}
	.tapbi-aboutus .tapbi-aboutus-heading {
		/* 36/44 Bold -2% (ban desktop 40px / 1.2). !important vi
		   .has-h-3-font-size cua WP co san !important va line-height ghi qua
		   inline style cua block. */
		font-size: calc(var(--tapbi-scale-m) * 36px) !important;
		line-height: 1.2222 !important; /* 44/36 */
	}
}

/* Ve chung toi - section "Tu Tam Nhin Den Hanh Dong" (JSON Figma frame
   2049:252410, 1440x1804): heading can giua + 3 the xep doc, moi the co cot
   chu ben trai va hinh minh hoa nen be ben phai.
   Khung ngoai padding 100 tren/duoi + 64 hai ben, gap 48; nhom the gap 32.
   Trong the: padding trai 48 / phai 32 / tren-duoi 32, cot trai 596, gap 24,
   cot phai 612x416. Kiem tra: 48 + 596 + 24 + 612 + 32 = 1312 = 1440 - 64*2.
   Luu y: "itemSpacing": 152 trong JSON la gia tri chet - Figma bo qua khi
   primaryAxisAlignItems = SPACE_BETWEEN. Gap that (24) suy tu toa do: cot
   trai x=48 rong 596 -> het o 644, cot phai bat dau o x=668. */
.tapbi-vision-heading {
	margin: 0;
	/* 52/44 = 1.182; -0.02em = -0.88px / 44px (giong .tapbi-stat-number cung co) */
	letter-spacing: -0.02em;
}
.tapbi-vision-cards {
	max-width: calc(var(--tapbi-scale) * 1312px);
	width: 100%;
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--40);
}
/* Dat display:flex o CSS thay vi qua layout cua block (va blockGap "0" trong
   block JSON de WordPress khong chen margin chong len gap) - ly do day du xem
   ghi chu o .tapbi-jobdetail-hero.
   KHONG dat height cung 480px: hinh ben phai co aspect-ratio 612/416 cong
   padding 32 tu cho ra 480 o the 1; the 2 (4 gach dau dong) chu cao hon nen
   the tu no ra, hinh van can giua theo chieu doc. */
.tapbi-vision-card {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: calc(var(--tapbi-scale) * 24px);
	box-sizing: border-box;
	border: 1px solid var(--wp--preset--color--nature-200);
	border-radius: calc(var(--tapbi-scale) * 40px);
	box-shadow: 0 calc(var(--tapbi-scale) * 3px) calc(var(--tapbi-scale) * 6px) rgba(57, 57, 57, 0.08);
}
.tapbi-vision-body {
	flex: 1 1 320px;
	max-width: calc(var(--tapbi-scale) * 596px);
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--30);
}
.tapbi-vision-visual {
	flex: 1 1 320px;
	max-width: calc(var(--tapbi-scale) * 612px);
	width: 100%;
	margin: 0;
	aspect-ratio: 612 / 416;
	border-radius: calc(var(--tapbi-scale) * 32px);
	/* Icon mo trong SVG tran ra ngoai khung (x = -26.77) - da clip san luc
	   export, day chi la lop chan them. */
	overflow: hidden;
}
.tapbi-vision-visual img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.tapbi-vision-card-title {
	margin: 0;
	/* -0.02em = -0.8px / 40px */
	letter-spacing: -0.02em;
}
.tapbi-vision-list {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--30);
}
.tapbi-vision-item {
	display: flex;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--30);
}
.tapbi-vision-bullet {
	flex: none;
	width: calc(var(--tapbi-scale) * 12.288px);
	height: calc(var(--tapbi-scale) * 12.288px);
	/* padding-top 7px cua khung dau trong Figma - de dau ✦ ngang hang voi
	   dong chu dau tien (line-height 24px). */
	margin-top: calc(var(--tapbi-scale) * 7px);
	color: var(--wp--preset--color--secondary);
}
.tapbi-vision-item-text {
	display: flex;
	flex-direction: column;
	gap: calc(var(--tapbi-scale) * 4px);
}
.tapbi-vision-lead,
.tapbi-vision-desc {
	margin: 0;
	/* 24/16 = 1.5, letter-spacing 0% theo Figma */
	line-height: 1.5;
	letter-spacing: 0;
}
.tapbi-vision-desc strong {
	color: var(--wp--preset--color--primary);
	/* JSON Figma (node "Doi moi: ...") ghi ro doan nhan manh la SemiBold 16px,
	   phan con lai Medium - khong phai Bold. */
	font-weight: 600;
}

/* Tu 1024px ep 2 cot khong wrap nua (doi PATTERN, khong phai kich thuoc) */
@media (min-width: 1024px) {
	.tapbi-vision-card {
		flex-wrap: nowrap;
	}
}

/* "Tu Tam Nhin Den Hanh Dong" ban MOBILE - frame Figma 375px
   (node "Frame 48095655" trong khung "Frame 48095666"): 24 hai ben, cach
   section About Us 80 (dat thanh padding-tren cua chinh section nay vi
   About Us da co padding-duoi = 0). Khung ngoai trong Figma co
   paddingBottom = 0 nen o day KHONG co padding duoi truoc footer.
   Heading 40/48 Bold -2% can giua, cach nhom the 48; 3 the cach nhau 32.
   Trong the: padding 32 tren-duoi / 24 hai ben, bo goc 24, vien 1px
   nature-200, bong 0 3px 6px rgba(57,57,57,.08); anh 279x190 bo goc 14.59
   nam TREN cot chu; tieu de 32/40 Bold -2%; danh sach gap 12; moi gach dau
   dong = dau ✦ 12.29 + gap 16 + cot chu gap 4.
   Sai lech trong Figma: the "Gia Tri Cot Loi" ghi gap anh-chu 24 (hai the
   kia 32), the "Su Menh" ghi gap dau-chu 12 (hai the kia 16) - lay gia tri
   da so (32 va 16) cho ca ba the de dong deu. */
@media (max-width: 767px) {
	.tapbi-vision {
		/* Padding ghi qua INLINE style cua block nen phai !important. */
		padding-top: calc(var(--tapbi-scale-m) * 80px) !important;
		padding-bottom: 0 !important;
		padding-left: calc(var(--tapbi-scale-m) * 24px) !important;
		padding-right: calc(var(--tapbi-scale-m) * 24px) !important;
	}
	/* Selector 2 cap de thang rule .wp-container-* WP sinh ra tu blockGap. */
	.wp-block-group.tapbi-vision {
		row-gap: calc(var(--tapbi-scale-m) * 48px);
	}
	.tapbi-vision .tapbi-vision-heading {
		/* 40/48 Bold -2% (ban desktop 44px / 1.182). !important vi
		   .has-section-heading-font-size co san !important, line-height ghi qua
		   inline style. */
		font-size: calc(var(--tapbi-scale-m) * 40px) !important;
		line-height: 1.2 !important; /* 48/40 */
	}
	.tapbi-vision-cards {
		max-width: none;
		gap: calc(var(--tapbi-scale-m) * 32px);
	}
	.tapbi-vision-card {
		/* Anh nam TREN cot chu. Trong markup anh la con CUOI (ban desktop no la
		   cot phai) nen dao chieu bang column-reverse - giu nguyen thu tu DOM
		   thi thu tu doc man hinh cua trinh doc van la tieu de truoc, anh sau. */
		flex-direction: column-reverse;
		flex-wrap: nowrap;
		align-items: stretch;
		gap: calc(var(--tapbi-scale-m) * 32px);
		border-radius: calc(var(--tapbi-scale-m) * 24px);
		box-shadow: 0 calc(var(--tapbi-scale-m) * 3px) calc(var(--tapbi-scale-m) * 6px) rgba(57, 57, 57, 0.08);
		padding: calc(var(--tapbi-scale-m) * 32px) calc(var(--tapbi-scale-m) * 24px) !important;
	}
	/* flex: 1 1 320px cua ban desktop tinh tren truc NGANG; o day the doi sang
	   truc doc nen 320px se bien thanh chieu CAO toi thieu - phai go bo. */
	.tapbi-vision-body,
	.tapbi-vision-visual {
		flex: 0 0 auto;
		max-width: none;
	}
	.tapbi-vision-body {
		gap: calc(var(--tapbi-scale-m) * 16px);
	}
	.tapbi-vision-visual {
		aspect-ratio: 279 / 190;
		border-radius: calc(var(--tapbi-scale-m) * 14.59px);
	}
	.tapbi-vision .tapbi-vision-card-title {
		/* 32/40 Bold -2% (ban desktop 40px / 1.2) */
		font-size: calc(var(--tapbi-scale-m) * 32px) !important;
		line-height: 1.25 !important; /* 40/32 */
	}
	.tapbi-vision-list {
		gap: calc(var(--tapbi-scale-m) * 12px);
	}
	.tapbi-vision-item {
		gap: calc(var(--tapbi-scale-m) * 16px);
	}
	.tapbi-vision-bullet {
		width: calc(var(--tapbi-scale-m) * 12.288px);
		height: calc(var(--tapbi-scale-m) * 12.288px);
		margin-top: calc(var(--tapbi-scale-m) * 7px);
	}
	.tapbi-vision-item-text {
		gap: calc(var(--tapbi-scale-m) * 4px);
	}
}


/* ==========================================================================
   Trang Lien he - Hero (patterns/contact-hero.php)
   Dai anh 1440x320 giong hero trang chi tiet job, header trang nam TREN
   (khong overlay) dung theo frame Figma 2085:261085.
   ========================================================================== */

.tapbi-contact-hero {
	/* Anh nen contact/hero-bg.png (1440x320) da nung san lop mau vang cua
	   Figma luc export - KHONG them background-blend-mode (xem ghi chu day du
	   o .tapbi-jobdetail-hero). background-color chi la lop do phong khi anh
	   chua tai xong.
	   Can giua bang flex o day thay vi qua layout cua block, giong jobdetail.
	   KHONG set width:100% - block nay la .alignfull nam trong <main> co
	   .has-global-padding, WP keo no rong ra bang margin-inline am (-16px
	   moi ben). width:100% se khoa be ngang bang content-box cua main
	   (1408px) nen dai anh hut 32px ben phai; de width auto thi box tu
	   nong ra du 1440px. */
	aspect-ratio: 1440 / 320;
	background-color: var(--wp--preset--color--ink);
	background-image: url('assets/images/contact/hero-bg.png');
	background-size: cover;
	background-position: center;
	display: flex;
	align-items: center;
	justify-content: center;
	/* Padding an toan cho man hinh hep - khong co trong Figma (chi co khung
	   1440px) nen giu co dinh, khong scale theo --tapbi-scale. */
	padding-inline: 24px;
	box-sizing: border-box;
}
.tapbi-contact-hero-title {
	margin: 0;
	max-width: calc(var(--tapbi-scale) * 1312px);
}

/* Hero Lien he ban MOBILE - JSON Figma "Frame 48095693"
   (design/mobile/tapbi-contact-hero.json, node 2085:266090, 375x320): dai anh
   cao 320 nam ngay duoi header 120, padding 24 hai ben + 8 tren/duoi, tieu de
   40/48 Bold -2% mau trang can giua ca hai chieu.
   Anh nen: frame mobile dung mot image fill KHAC (imageHash rieng) + lop mau
   #f9aa31 blend COLOR, nhung file do chua co tren dia - dung lai
   contact/hero-bg.png (1440x320, da nung san mau vang) voi background-size
   cover, tuc cat lay phan giua. Anh la van lua truu tuong khong co chu the nen
   cat giua khong mat gi; muon dung y het Figma thi phai export node do ra
   assets/images/contact/ roi doi URL o day.
   Kich thuoc lay tu frame 375px nen scale theo --tapbi-scale-m. */
@media (max-width: 767px) {
	.tapbi-contact-hero {
		/* Ban desktop dung aspect-ratio 1440/320 nen o 375px dai anh chi con
		   ~83px thay vi 320px cua thiet ke. Phai TAT han aspect-ratio chu khong
		   chi them min-height: voi height:auto thi aspect-ratio van chot chieu
		   cao theo be ngang, noi dung dai hon se TRAN ra ngoai khung thay vi day
		   khung cao len. Dung min-height (khong phai height) de man hep, tieu de
		   xuong 3 dong thi khung tu nong ra - cung cach da lam o
		   .tapbi-jobdetail-hero va .tapbi-about-hero. */
		aspect-ratio: auto;
		min-height: calc(var(--tapbi-scale-m) * 320px);
		padding-block: calc(var(--tapbi-scale-m) * 8px);
		padding-inline: calc(var(--tapbi-scale-m) * 24px);
	}
	/* Figma mobile: 40px / 48px / Bold / -2% (ban desktop 44px / 1.1818 /
	   Semibold). Token `section-heading` la fluid 32-44px nen o 375px WordPress
	   tinh ra 32px - phai ghi de tuong minh.
	   !important cho ca ba: font-size vi .has-section-heading-font-size cua WP
	   co san !important; line-height va font-weight vi pattern ghi hai thu do
	   qua INLINE style (inline thang moi rule khong co !important). */
	.tapbi-contact-hero-title {
		font-size: calc(var(--tapbi-scale-m) * 40px) !important;
		line-height: 1.2 !important; /* 48/40 */
		font-weight: 700 !important;
		/* Be ngang da do padding cua khung quyet dinh (327 = 375 - 24*2). Giu
		   max-width theo --tapbi-scale se bop kho chu lai o quang 700-767px. */
		max-width: none;
	}
}


/* ==========================================================================
   Trang Lien he - Form + anh + thong tin (patterns/contact-form.php)
   JSON Figma frame 2085:261154 (1440x912): padding 100px tren/duoi + 64px hai
   ben, hai cot bang nhau 644px cach nhau 24px.
   Card form dung chung CSS voi .tapbi-apply (form ung tuyen) - xem nhom
   selector o tren, o day chi them phan rieng cua trang nay.
   ========================================================================== */

.tapbi-contact-section {
	display: flex;
	align-items: stretch;
	gap: var(--wp--preset--spacing--25);
}
/* Hai cot chia deu: (1440 - 64*2 - 24) / 2 = 644px dung nhu Figma, va tu co
   theo be ngang man hinh thay vi khoa cung 644px. */
.tapbi-contact-section > .tapbi-contact-card,
.tapbi-contact-section > .tapbi-contact-side {
	flex: 1 1 0;
	min-width: 0;
	/* Block group nay khong khai bao layout nen WordPress ap layout mac dinh,
	   kem rule ".wp-container-x > * + * { margin-block-start: blockGap }" (32px)
	   - lam cot phai bi tut xuong 32px so voi cot trai. Section da dung flex +
	   gap roi nen xoa margin do di. */
	margin-block: 0;
}
/* Figma: khoi tieu de va khoi form day ve hai dau the (SPACE_BETWEEN) nen the
   ben trai luon cao bang cot phai. */
.tapbi-contact-card {
	justify-content: space-between;
}
.tapbi-contact-intro {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
}
.tapbi-contact-eyebrow {
	margin: 0;
	color: var(--wp--preset--color--primary);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
	line-height: 1.5; /* 24/16 */
	letter-spacing: 0;
}
.tapbi-contact-title {
	margin: 0;
	color: var(--wp--preset--color--primary);
	font-size: var(--wp--preset--font-size--section-heading);
	font-weight: 700;
	line-height: 1.1818; /* 52/44 */
	letter-spacing: -0.02em;
}

/* Cot phai (JSON "Frame 48095678" 644x712, xep doc gap 24): anh 644x360 bo goc
   24 + the thong tin 644x328. Chinh cot nay quyet dinh chieu cao section, con
   the form ben trai la cai gian ra cho bang. */
.tapbi-contact-side {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--25);
	/* Cot phai cao dung 712 nhu frame Figma (360 anh + 24 + 328 the thong tin).
	   align-self: flex-start de section (align-items: stretch) khong keo dai no
	   theo cot form - cot form moi la cai gian ra cho bang 712. */
	align-self: flex-start;
}
.tapbi-contact-photo {
	/* Trong Figma khung anh co ti le co dinh 644x360 ("Rectangle 34" trong
	   design/tapbi-contact-side.json) - chinh no (cong the thong tin ben duoi)
	   quyet dinh chieu cao ca section, con the form ben trai moi la cai gian
	   theo. Vi vay dat aspect-ratio thay vi cho anh grow.
	   height:auto de aspect-ratio thang attribute height="720" cua the <img>.
	   Anh nguon office/contact-photo.jpg la 1288x720 (= 644x360 @2x) nen dung
	   ti le khung, object-fit: cover khong cat gi. */
	flex: 0 0 auto;
	width: 100%;
	aspect-ratio: 644 / 360;
	height: auto;
	object-fit: cover;
	border-radius: calc(var(--tapbi-scale) * 24px);
}
.tapbi-contact-info {
	flex: 0 0 auto;
	box-sizing: border-box;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--nature-200);
	border-radius: calc(var(--tapbi-scale) * 24px);
	box-shadow: 0 calc(var(--tapbi-scale) * 3px) calc(var(--tapbi-scale) * 6px) rgba(57, 57, 57, 0.08);
	padding: var(--wp--preset--spacing--40);
}
.tapbi-contact-info-row {
	display: flex;
	align-items: center;
	/* JSON: gap 20 giua vong tron icon va khoi chu (khong co token spacing 20px
	   nen viet thang), padding duoi 24 + gap 24 giua cac hang -> duong ke nam
	   chinh giua khoang 48 do. */
	gap: calc(var(--tapbi-scale) * 20px);
	padding-block: var(--wp--preset--spacing--25);
}
.tapbi-contact-info-row:first-child {
	padding-block-start: 0;
}
.tapbi-contact-info-row:last-child {
	padding-block-end: 0;
}
.tapbi-contact-info-row + .tapbi-contact-info-row {
	border-block-start: 1px solid var(--wp--preset--color--nature-200);
	/* Trong Figma duong ke la stroke INSIDE nen khong lam hang cao them. Tren
	   web border cong vao chieu cao, bu lai 1px o padding tren de the thong tin
	   ra dung 328 (va ca cot dung 712). */
	padding-block-start: calc(var(--wp--preset--spacing--25) - 1px);
}
/* Vong tron icon 56x56, icon 24x24 ben trong (JSON: "Frame 4" padding 16, nen
   #f4f4f6, bo tron het). Scale theo Figma nhung co SAN - cung ly do font-size
   khong scale (xem CLAUDE.md): o man hinh hep 56px * 0.35 con 20px thi icon be
   den muc khong nhan ra hinh gi nua. */
.tapbi-contact-info-icon {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: max(40px, calc(var(--tapbi-scale) * 56px));
	height: max(40px, calc(var(--tapbi-scale) * 56px));
	border-radius: 50%;
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--primary);
}
.tapbi-contact-info-icon svg {
	width: max(18px, calc(var(--tapbi-scale) * 24px));
	height: max(18px, calc(var(--tapbi-scale) * 24px));
}
.tapbi-contact-info-text {
	display: flex;
	flex-direction: column;
	gap: calc(var(--tapbi-scale) * 4px);
	min-width: 0;
}
.tapbi-contact-info-label {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 500;
	line-height: 1.5; /* 24/16 */
}
.tapbi-contact-info-value {
	color: var(--wp--preset--color--primary);
	/* Base 1 (16px) = Semibold, giong .tapbi-footer-contact-value cung vai tro. */
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
	line-height: 1.5;
	text-decoration: none;
	overflow-wrap: anywhere;
}
a.tapbi-contact-info-value:hover {
	text-decoration: underline;
}

/* Duoi 1024px xep doc (doi PATTERN, khong phai doi kich thuoc): hai cot 644px
   co lai qua hep cho o nhap cao 48px va dia chi mot dong. */
@media (max-width: 1023px) {
	.tapbi-contact-section {
		flex-direction: column;
	}
	/* Section thanh flex COLUMN -> align-self doi sang truc NGANG: giu
	   flex-start cua ban desktop thi cot phai chi rong bang noi dung. */
	.tapbi-contact-section > .tapbi-contact-side {
		align-self: stretch;
	}
}

/* Than trang Lien he ban MOBILE - JSON Figma "Frame 48095679"
   (design/mobile/tapbi-contact-section.json, node 2085:266093, 375x1370):
   xep DOC gap 24, padding 24 hai ben, khong padding doc; the form
   (frame 48095687) roi den cot anh + the thong tin (frame 48095678).
   Kiem chung: 784 (the form) + 24 + 562 (cot phai) = 1370 dung chieu cao frame.
   Card form la CUNG frame 48095687 voi form ung tuyen, nen moi so o phan card
   trung khop khoi .tapbi-apply ban mobile o tren - sua mot ben thi doi chieu
   ben kia. Rule nao dung selector DUNG CHUNG (.tapbi-field, .tapbi-field-row)
   deu boc trong .tapbi-contact-card de khong dung vao form ung tuyen.
   Kich thuoc lay tu frame 375px nen scale theo --tapbi-scale-m. */
@media (max-width: 767px) {
	.tapbi-contact-section {
		/* Frame de padding doc = 0. Khoang 80px giua day hero (abs y 11200) va
		   dinh section (abs y 11280) la itemSpacing cua frame trang, khong phai
		   padding cua section - nhung <main> dat blockGap 0 nen moi pattern tu
		   quan khoang cach cua minh, dua 80 do vao padding-top o day.
		   Padding-bottom lay doi xung 80: vung export dung o day nen frame khong
		   noi gi ve khoang cach xuong footer.
		   !important vi padding ghi qua INLINE style cua block. */
		padding-top: calc(var(--tapbi-scale-m) * 80px) !important;
		padding-bottom: calc(var(--tapbi-scale-m) * 80px) !important;
		padding-left: calc(var(--tapbi-scale-m) * 24px) !important;
		padding-right: calc(var(--tapbi-scale-m) * 24px) !important;
		/* flex-direction: column da dat o khoi @media (max-width: 1023px) o tren. */
		gap: calc(var(--tapbi-scale-m) * 24px);
	}

	/* --- The form (frame 48095687) --- */
	.tapbi-contact-card {
		border-radius: calc(var(--tapbi-scale-m) * 24px);
		box-shadow: 0 calc(var(--tapbi-scale-m) * 3px) calc(var(--tapbi-scale-m) * 6px) rgba(57, 57, 57, 0.08);
		padding: calc(var(--tapbi-scale-m) * 24px);
		gap: calc(var(--tapbi-scale-m) * 28px);
	}
	.tapbi-contact-intro {
		gap: calc(var(--tapbi-scale-m) * 8px);
	}
	/* Figma mobile: 36/44 Bold -2% (ban desktop 44 / 1.1818). Token
	   `section-heading` la fluid 32-44px nen o 375px WordPress tinh ra 32px.
	   Khong can !important: <h2> nay la HTML thuong trong pattern, khong mang
	   class has-*-font-size cua WordPress. */
	.tapbi-contact-title {
		font-size: calc(var(--tapbi-scale-m) * 36px);
		line-height: 1.2222; /* 44/36 */
	}
	.tapbi-contact-form {
		gap: calc(var(--tapbi-scale-m) * 16px);
	}
	.tapbi-contact-card .tapbi-field {
		gap: calc(var(--tapbi-scale-m) * 8px);
	}
	/* Email + So dien thoai: desktop nam canh nhau, mobile xep doc (frame ve 3 o
	   rieng, moi o rong tron 279). */
	.tapbi-contact-card .tapbi-field-row {
		flex-direction: column;
		gap: calc(var(--tapbi-scale-m) * 16px);
	}
	.tapbi-contact-card .tapbi-field-row > .tapbi-field {
		flex: 0 0 auto;
	}
	/* Figma mobile: 14/24 Bold (ban desktop 16px / 700 - chi khac co chu). */
	.tapbi-contact-submit {
		font-size: var(--wp--preset--font-size--small);
	}

	/* --- Cot anh + the thong tin (frame 48095678) --- */
	.tapbi-contact-side {
		gap: calc(var(--tapbi-scale-m) * 24px);
	}
	.tapbi-contact-photo {
		/* "Rectangle 35" 327x182, bo goc 12.186 = 24 x 327/644, tuc dung bo goc
		   ban desktop thu theo ti le be ngang.
		   Ti le khung giu nguyen 644/360 cua ban desktop: 327/182 = 1.7967 so voi
		   644/360 = 1.7889, lech 0.8px chieu cao o khung 327 - khong dang tach. */
		border-radius: calc(var(--tapbi-scale-m) * 12.186px);
	}
	.tapbi-contact-info {
		/* Bo goc 20 (the form ben tren la 24 - hai so khac nhau that trong frame). */
		border-radius: calc(var(--tapbi-scale-m) * 20px);
		box-shadow: 0 calc(var(--tapbi-scale-m) * 3px) calc(var(--tapbi-scale-m) * 6px) rgba(57, 57, 57, 0.08);
		padding: calc(var(--tapbi-scale-m) * 24px);
	}
	.tapbi-contact-info-row {
		gap: calc(var(--tapbi-scale-m) * 20px);
		padding-block: calc(var(--tapbi-scale-m) * 24px);
	}
	.tapbi-contact-info-row + .tapbi-contact-info-row {
		/* Bu 1px cua border giong ban desktop - xem ghi chu o rule goc. */
		padding-block-start: calc(var(--tapbi-scale-m) * 24px - 1px);
	}
	/* Ban desktop phai dat san max(40px, ...) vi --tapbi-scale tut xuong 0.22.
	   --tapbi-scale-m san 0.8533 nen 56px chi be nhat con 47.8px - san khong bao
	   gio cham toi, bo di cho dung so Figma. */
	.tapbi-contact-info-icon {
		width: calc(var(--tapbi-scale-m) * 56px);
		height: calc(var(--tapbi-scale-m) * 56px);
	}
	.tapbi-contact-info-icon svg {
		width: calc(var(--tapbi-scale-m) * 24px);
		height: calc(var(--tapbi-scale-m) * 24px);
	}
	.tapbi-contact-info-text {
		gap: calc(var(--tapbi-scale-m) * 4px);
	}
}

/* =========================================================================
   TRANG CHU - header hoa vao hero thanh MOT khoi nen
   Header va hero dung chung mot nen gradient duy nhat (gradient "hero-fade"
   dat tren .tapbi-hero): bo nen rieng cua header, keo <main> len dung bang
   chieu cao header de vung gradient + hoa tiet cua hero chay lien qua ca
   header, khong con duong ranh giua hai mau.
   Cach lam giong khoi "VE CHUNG TOI" o tren (margin am thay vi position
   absolute) - ly do chon margin am da ghi day du tai .tapbi-about-main.
   Khac biet: o day chu menu GIU mau primary vi nen hero sang, khong doi
   sang trang nhu .tapbi-header-overlay.
   ========================================================================= */
.wp-site-blocks > main.tapbi-home-main {
	margin-block-start: calc(var(--tapbi-header-height) * -1);
}

/* Preset class .has-neutral-50-background-color cua WordPress co kem
   !important nen phai vua tang do uu tien vua dung !important moi de duoc. */
.tapbi-header-merge .tapbi-header {
	background-color: transparent !important;
	/* z-index de header noi tren nen + hoa tiet cua hero (hero dung sau
	   trong DOM va cung la position:relative). */
	position: relative;
	z-index: 2;
}

/* Hero trang chu KHONG co padding tren: content dinh ngay duoi day header o
   ca desktop lan mobile. Van phai dat dung chieu cao header vi <main> da bi
   keo len am dung bang tung do - so nay chi la BU lai phan bi header de len,
   khong phai khoang trang trang tri. Bo han se lam H1 va anh chui xuong duoi
   header.
   Selector 2 cap (0,2,0) de thang inline padding cua block hero. */
.tapbi-home-main > .tapbi-hero {
	padding-top: var(--tapbi-header-height) !important;
}


/* =========================================================================
   ANIMATION - hieu ung hien dan khi cuon + hover
   =========================================================================
   CO CHE: CSS lo phan nhin, JS (assets/js/reveal.js) chi bat/tat 1 class.

   1. reveal.js nap o <head> va gan class 'tapbi-motion' len <html> NGAY khi
      duoc parse -> trang thai an duoi day co hieu luc tu lan ve dau tien,
      khong bi nhay noi dung. File khong tai duoc (404, loi mang) thi khong co
      'tapbi-motion' -> khong rule nao ben duoi khop -> noi dung hien binh
      thuong, chi mat animation. Vi vay MOI rule an deu phai co tien to
      '.tapbi-motion', khong duoc bo.
   2. IntersectionObserver gan 'is-visible' khi phan tu vao khung nhin roi
      unobserve luon - moi phan tu chay dung 1 lan.

   DO UU TIEN: '.tapbi-motion .tapbi-x' = (0,2,0), cao hon rule
   '.is-layout-flex > :is(*, div)' (0,1,1) cua WP core, nen khong can
   !important o bat ky dau.

   CAM: khong dat transform len phan tu DA co transform san
   (.tapbi-jointeam-bg, .tapbi-workenv-progress-thumb, cac slide showcase) va
   khong dat len <html>/<body>/.tapbi-home-main (se tao containing block moi,
   lam hong overlay menu mobile dang position:fixed).
   ========================================================================= */

/* --- 1. Reveal co bien: mo dan + truot len --------------------------------- */
.tapbi-motion .tapbi-reveal {
	opacity: 0;
	transform: translateY(var(--tapbi-rise));
	transition:
		opacity var(--tapbi-dur) var(--tapbi-ease),
		transform var(--tapbi-dur) var(--tapbi-ease);
}
.tapbi-motion .tapbi-reveal.is-visible {
	opacity: 1;
	transform: none;
}

/* --- 2. Reveal chi mo dan, KHONG transform --------------------------------
   Danh cho track carousel (.tapbi-workenv-track, .tapbi-whph-main): 2 khoi nay
   la vung cuon ngang co scroll-snap va bi work-environment.js doc scrollLeft /
   scrollWidth, nen tranh dong vao transform cua chung cho chac. */
.tapbi-motion .tapbi-reveal-fade {
	opacity: 0;
	transition: opacity var(--tapbi-dur) var(--tapbi-ease);
}
.tapbi-motion .tapbi-reveal-fade.is-visible {
	opacity: 1;
}

/* --- 3. Nhom co so le (stagger) -------------------------------------------
   Class dat o KHOI CHA (vd .tapbi-products-grid), observer theo doi khoi cha
   nen ca nhom cung mot moc thoi gian, con le nhau la do transition-delay chu
   khong phai do tung the vao khung nhin lech nhau. */
.tapbi-motion .tapbi-reveal-group > * {
	opacity: 0;
	transform: translateY(var(--tapbi-rise));
	transition:
		opacity var(--tapbi-dur) var(--tapbi-ease),
		transform var(--tapbi-dur) var(--tapbi-ease);
}
.tapbi-motion .tapbi-reveal-group.is-visible > * {
	opacity: 1;
	transform: none;
}
.tapbi-motion .tapbi-reveal-group.is-visible > *:nth-child(2) {
	transition-delay: 80ms;
}
.tapbi-motion .tapbi-reveal-group.is-visible > *:nth-child(3) {
	transition-delay: 160ms;
}
.tapbi-motion .tapbi-reveal-group.is-visible > *:nth-child(4) {
	transition-delay: 240ms;
}
.tapbi-motion .tapbi-reveal-group.is-visible > *:nth-child(5) {
	transition-delay: 320ms;
}
.tapbi-motion .tapbi-reveal-group.is-visible > *:nth-child(6) {
	transition-delay: 400ms;
}

/* --- 3b. Nhom so le CHI mo dan, khong transform ---------------------------
   Giong khoi 3 nhung bo transform. Ly do ton tai: khoi cha cua mot so luoi co
   'overflow: hidden' (vd .tapbi-benefit-grid, style.css ~1160) - the con truot
   len 24px se bi CAT CUT o mep duoi luoi trong suot luc chay, keo theo duong
   ke chia hang nhin nhu bi lech. Bo transform di thi khong con gi de cat. */
.tapbi-motion .tapbi-reveal-group-fade > * {
	opacity: 0;
	transition: opacity var(--tapbi-dur) var(--tapbi-ease);
}
.tapbi-motion .tapbi-reveal-group-fade.is-visible > * {
	opacity: 1;
}
.tapbi-motion .tapbi-reveal-group-fade.is-visible > *:nth-child(2) {
	transition-delay: 80ms;
}
.tapbi-motion .tapbi-reveal-group-fade.is-visible > *:nth-child(3) {
	transition-delay: 160ms;
}
.tapbi-motion .tapbi-reveal-group-fade.is-visible > *:nth-child(4) {
	transition-delay: 240ms;
}
.tapbi-motion .tapbi-reveal-group-fade.is-visible > *:nth-child(5) {
	transition-delay: 320ms;
}
.tapbi-motion .tapbi-reveal-group-fade.is-visible > *:nth-child(6) {
	transition-delay: 400ms;
}

/* --- 4. Hero: thuan CSS, KHONG qua JS -------------------------------------
   Hero luon nam trong khung nhin luc tai trang nen khong can observer. Chay
   thang @keyframes de phan tu LCP khong phu thuoc vao viec JS chay xong.
   Anh minh hoa chi mo dan, KHONG truot: hero nao cung co overflow:hidden va
   anh nam sat day, truot len se bi cat mat 24px o day.

   Dung 'backwards' chu KHONG 'both': 'both' giu animation o trang thai fill
   vinh vien, khien phan tu bi giu lai o mot lop compositing rieng - anh hero
   co 4 lop drop-shadow nen rasterize lech di vai pixel bien so voi khi khong
   co animation (do duoc: 5444 px lech, trung binh 0.15/255 - mat thuong khong
   thay nhung la khac biet that). 'backwards' chi ap gia tri 'from' trong luc
   cho delay; chay xong la tra phan tu ve dung style goc, khong con lop rieng.
   An toan vi keyframe chi co 'from' nen dich cua animation VON DA la style goc,
   khong co cu nhay nao khi fill ket thuc.

   Hai @keyframes duoi day CHI khai bao 'from', co y: khi thieu 'to' thi trinh
   duyet lay chinh gia tri tinh toan cua phan tu lam dich. Bat buoc phai vay vi
   .tapbi-product-hero-desc (dong ~654) va .tapbi-recruitment-hero-desc (dong
   ~607, ban mobile) co san 'opacity: 0.6' - viet 'to { opacity: 1 }' la chu mo
   ta bi dam han len, sai thiet ke ma khong bao loi gi. */
@keyframes tapbi-rise-in {
	from {
		opacity: 0;
		transform: translateY(var(--tapbi-rise));
	}
}
@keyframes tapbi-fade-in {
	from {
		opacity: 0;
	}
}
.tapbi-motion .tapbi-hero-heading {
	animation: tapbi-rise-in 500ms var(--tapbi-ease) backwards;
}
.tapbi-motion .tapbi-hero-content .wp-block-buttons {
	animation: tapbi-rise-in 500ms 120ms var(--tapbi-ease) backwards;
}
.tapbi-motion .tapbi-hero-illustration {
	animation: tapbi-fade-in 600ms 60ms var(--tapbi-ease) backwards;
}

/* Hero trang San pham va trang Tuyen dung: cung nhip voi hero trang chu.
   Tieu de truot len truoc, mo ta truot len tre 120ms, anh chi mo dan.
   Mo ta KHONG duoc dat 'to { opacity: 1 }' - xem giai thich o keyframes tren. */
.tapbi-motion .tapbi-product-hero-heading,
.tapbi-motion .tapbi-recruitment-hero-heading {
	animation: tapbi-rise-in 500ms var(--tapbi-ease) backwards;
}
.tapbi-motion .tapbi-product-hero-desc,
.tapbi-motion .tapbi-recruitment-hero-desc {
	animation: tapbi-rise-in 500ms 120ms var(--tapbi-ease) backwards;
}
.tapbi-motion .tapbi-product-hero-illustration,
.tapbi-motion .tapbi-recruitment-hero-illustration {
	animation: tapbi-fade-in 600ms 60ms var(--tapbi-ease) backwards;
}

/* Hero trang Ve chung toi va trang Lien he: hai hero nay chi co MOT dong tieu
   de tren dai anh nen, khong co mo ta lan anh minh hoa - nen chi mot rule.
   Khong dat animation cho dai anh: nen la background-image cua CHINH khung
   hero, cho no mo dan thi tieu de nam trong do mo theo.
   Hai tieu de nay co !important cho font-size / line-height / font-weight o
   ban mobile (dong ~3517 va ~3924); 'animation' khong dung toi ba thuoc tinh
   do nen khong xung dot. */
.tapbi-motion .tapbi-about-hero-title,
.tapbi-motion .tapbi-contact-hero-title {
	animation: tapbi-rise-in 500ms var(--tapbi-ease) backwards;
}

/* --- 4b. The Loi ich: gop transition ---------------------------------------
   .tapbi-benefit-card da co 'transition: background-color 0.2s ease' (dong
   ~1172) cho hover doi nen. Rule reveal '.tapbi-motion .tapbi-reveal-group-fade
   > *' co do uu tien (0,2,0), cao hon (0,1,0) cua rule goc, nen se DE MAT
   transition do va hover nen nhay giat. Khai bao lai ca hai trong cung mot
   'transition' o do uu tien (0,2,0)/(0,3,0), dat sau nen thang.
   Cung ban chat voi ca da xu ly cho .tapbi-product-card o khoi hover ben duoi. */
.tapbi-motion .tapbi-benefit-row > .tapbi-benefit-card,
.tapbi-benefit .tapbi-benefit-card {
	transition:
		opacity var(--tapbi-dur) var(--tapbi-ease),
		background-color 0.2s ease;
}

/* --- 5. Hover ------------------------------------------------------------
   Khong co tien to .tapbi-motion: hover khong lien quan den JS, luon chay.
   Boc trong @media (hover: hover) theo dung khuon .tapbi-benefit-card - may
   cam ung khong co con tro nen bo qua het. */
@media (hover: hover) {
	/* Nut: truoc day doi trang thai tuc thi va khong he co hover.
	   Rule hover co rao :not([aria-disabled="true"]) - nut dang mo ma van nhuc
	   nhich khi ro chuot thi trong nhu bam duoc. Cung thoi quen voi
	   .tapbi-workenv-prev:not(:disabled):hover (dong ~2519). */
	.wp-block-button__link {
		transition:
			background-color 0.2s ease,
			transform 0.2s var(--tapbi-ease),
			box-shadow 0.2s ease;
	}
	.wp-block-button__link:not([aria-disabled="true"]):hover {
		transform: translateY(-2px);
		/* Bong dung rgba den nhu cac lop drop-shadow san co trong file (bong
		   khong nam trong palette theme.json nen khong co token de tra). */
		box-shadow: 0 8px 20px rgba(0, 0, 0, 0.14);
	}

	/* The san pham trang chu: doi vien + do bong, KHONG nhac bang transform.
	   Ly do: card la con cua .tapbi-products-grid (mot .tapbi-reveal-group),
	   ma rule reveal '.tapbi-motion .tapbi-reveal-group > *' (0,2,0) da chiem
	   thuoc tinh 'transition' cua chinh the card nay. Neu hover cung dung
	   transform thi hai hieu ung phai dung chung mot thoi luong: hoac reveal
	   truot len qua nhanh, hoac card ha xuong qua cham khi ro chuot ra. Tach
	   han ra - reveal giu opacity + transform, hover giu box-shadow - thi
	   khong con phai danh doi.
	   Vien nghi la inset 1px nature-200 (dong ~2655); hover phai ve LAI vien
	   do trong cung mot box-shadow, neu khong vien goc se bien mat. */
	.tapbi-motion .tapbi-products-grid > .tapbi-product-card,
	.tapbi-products .tapbi-product-card {
		transition:
			opacity var(--tapbi-dur) var(--tapbi-ease),
			transform var(--tapbi-dur) var(--tapbi-ease),
			box-shadow 0.25s ease;
	}
	.tapbi-products .tapbi-product-card:hover {
		box-shadow:
			inset 0 0 0 1px var(--wp--preset--color--secondary),
			0 10px 24px rgba(0, 0, 0, 0.08);
	}

	/* Nut "Gui" (form Lien he) va "Nop don" (form Ung tuyen): truoc day chi doi
	   nen TUC THI, khong co gi khac - trong khi moi nut .wp-block-button__link
	   deu da duoc lam muot o tren. Gop chung mot rule vi hai nut nay VON DA dung
	   chung mot rule :hover doi nen (dong ~2119); lam mot cai bo mot cai thi
	   lech nhau vo co.
	   Ca hai la <button> that (khong phai <a>), khong nam trong khoi reveal nao
	   nen khong co rule (0,2,0) nao cuop mat 'transition' - khong can khai bao
	   lai opacity/transform nhu da phai lam voi .tapbi-product-card. */
	.tapbi-apply-submit,
	.tapbi-contact-submit {
		transition:
			background-color 0.2s ease,
			transform 0.2s var(--tapbi-ease),
			box-shadow 0.2s ease;
	}
	.tapbi-apply-submit:hover,
	.tapbi-contact-submit:hover {
		transform: translateY(-2px);
		box-shadow: 0 8px 20px rgba(0, 0, 0, 0.14);
	}
	/* Luc dang gui, nut co [disabled] + cursor:progress (dong ~2123): bo hover
	   di de nut khong con nhuc nhich khi da bam roi. */
	.tapbi-apply-submit[disabled]:hover,
	.tapbi-contact-submit[disabled]:hover {
		transform: none;
		box-shadow: none;
	}

	/* Icon mang xa hoi o footer: opacity 0.3 dang dat o KHUNG BOC
	   (.tapbi-footer-social, dong ~3057). Opacity cua cha NHAN voi opacity cua
	   con, nen rule .tapbi-footer-social-icon:hover{opacity:1} co san khong bao
	   gio hien ra duoc. Ha 0.3 xuong tung icon de hover that su co tac dung -
	   luc nghi nhin y het truoc vi cac icon khong de len nhau. */
	.tapbi-footer-social {
		opacity: 1;
	}
	.tapbi-footer-social-icon {
		opacity: 0.3;
		transition: opacity 0.2s ease;
	}
}

/* --- 6. Ton trong cai dat "giam chuyen dong" cua he dieu hanh -------------
   reveal.js cung tu kiem tra prefers-reduced-motion va gan 'is-visible' cho
   tat ca, khoi nay la lop chan thu hai (phong khi JS chua kip chay). */
@media (prefers-reduced-motion: reduce) {
	.tapbi-motion .tapbi-reveal,
	.tapbi-motion .tapbi-reveal-fade,
	.tapbi-motion .tapbi-reveal-group > *,
	.tapbi-motion .tapbi-reveal-group-fade > * {
		opacity: 1;
		transform: none;
		transition: none;
	}
	.tapbi-motion .tapbi-hero-heading,
	.tapbi-motion .tapbi-hero-content .wp-block-buttons,
	.tapbi-motion .tapbi-hero-illustration,
	.tapbi-motion .tapbi-product-hero-heading,
	.tapbi-motion .tapbi-product-hero-desc,
	.tapbi-motion .tapbi-product-hero-illustration,
	.tapbi-motion .tapbi-recruitment-hero-heading,
	.tapbi-motion .tapbi-recruitment-hero-desc,
	.tapbi-motion .tapbi-recruitment-hero-illustration,
	.tapbi-motion .tapbi-about-hero-title,
	.tapbi-motion .tapbi-contact-hero-title {
		animation: none;
	}
	.tapbi-motion .tapbi-benefit-row > .tapbi-benefit-card,
	.tapbi-benefit .tapbi-benefit-card {
		transition: none;
	}
	.tapbi-showcase-slide,
	.tapbi-showcase-slides,
	.tapbi-showcase-info {
		transition: none;
		animation: none;
	}
	.wp-block-button__link,
	.tapbi-apply-submit,
	.tapbi-contact-submit,
	.tapbi-footer-social-icon {
		transition: none;
	}
	/* Rule hover o khoi 5 la (0,2,0); o day viet dung (0,2,0) va dat SAU nen
	   thang (media query khong lam tang do uu tien). */
	.tapbi-apply-submit:hover,
	.tapbi-contact-submit:hover {
		transform: none;
		box-shadow: none;
	}
	.tapbi-motion .tapbi-products-grid > .tapbi-product-card,
	.tapbi-products .tapbi-product-card {
		transition: none;
	}
	/* Do uu tien phai BANG rule hover o khoi 5 (0,3,0): rule do da them
	   :not([aria-disabled="true"]) nen neu o day chi viet
	   .wp-block-button__link:hover (0,2,0) thi no thua, nut van nhac len 2px du
	   nguoi dung da tat chuyen dong. Media query KHONG lam tang do uu tien. */
	.wp-block-button__link:not([aria-disabled="true"]):hover {
		transform: none;
	}
}