/*
Theme Name: VOC
Theme URI: https://voiceofcoffee.vn
Author: Voice of Coffee
Description: Theme cho thuong hieu ca phe VOC - Voice of Coffee.
Version: 1.59.0
Requires at least: 6.7
Tested up to: 7.1
Requires PHP: 8.2
License: GPL-2.0-or-later
Text Domain: voc
*/

/*
 * Vung cham toi thieu 44px cho nut mo/dong menu tren dien thoai.
 * Mac dinh cua WordPress chi 24px - qua nho de cham chinh xac.
 */
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
	min-width: 44px;
	min-height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
}

/*
 * THE SAN PHAM
 *
 * Giai phau lay tu hello5.vn (doc CSS that trong ban sao luu 19/08/2026): khung
 * vien mong bo goc, ten dam, mo ta hai dong cat bang line-clamp, gia khuyen mai
 * NAM TREN gia goc gach ngang, nut mua la bieu tuong o goc duoi phai.
 * Mau thi lay tu bang mau VOC, khong lay mau xanh cua hello5.
 *
 * The cao bang nhau va nut luon nam duoi cung - khong co quy tac nay thi ten
 * dai ngan khac nhau lam nut so le.
 */
.wp-block-woocommerce-product-template li.wc-block-product {
	display: flex;
	flex-direction: column;
	align-self: stretch;
	position: relative;
	border: 1px solid var(--wp--preset--color--vien);
	border-radius: 6px;
	padding: 10px;
	background: var(--wp--preset--color--nen-noi);
}

/*
 * LUOI TRANG DANH MUC
 *
 * WooCommerce co dat lop `columns-4` nhung KHONG dat be rong: `flex-basis` van
 * la `auto`, nen the tu co theo noi dung ra 307px. Bon the 307px vuot khung
 * 1200px nen roi xuong con ba cot, chua mot khoang trong ben phai.
 *
 * Do bang so thi thay lop "columns-4" va tuong la xong; chup man hinh moi thay
 * mot hang chi co ba the.
 *
 * Khong ap cho luoi truot ngang o trang chu - luoi do dung `columns-5` va co
 * quy tac rieng ben duoi.
 */
.wp-block-woocommerce-product-template.columns-4 {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 20px;
}

/*
 * Ten lop lap lai la CO Y, de thang luat cua WooCommerce.
 *
 * WooCommerce in mot luat noi tuyen tu nhan doi ten lop cho do uu tien cao hon:
 *   .wc-block-product-template.is-flex-container.is-flex-container.columns-4 > li
 *   { width: calc(25% - 0.9375em) }
 *
 * Luat do dung cho bo cuc flex. Khi doi sang luoi, "25%" khong con tinh tren ca
 * hang ma tinh tren O LUOI 285px, ra 25% x 285 - 15 = 56,25px - the san pham
 * tut xuong con mot coc chu. Do bang so thi thay "columns-4" va tuong la xong;
 * chi anh chup moi lo ra.
 *
 * Lap `.columns-4` va `.wc-block-product` de do uu tien vuot ho ma khong phai
 * dung `!important`.
 */
.wp-block-woocommerce-product-template.columns-4.columns-4 > li.wc-block-product.wc-block-product {
	width: 100%;
	max-width: none;
	margin: 0;
}

@media (max-width: 1024px) {
	.wp-block-woocommerce-product-template.columns-4 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 700px) {
	.wp-block-woocommerce-product-template.columns-4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/*
 * Anh trong the: khung vuong co chieu cao co dinh.
 *
 * Truoc day anh chiem het be ngang the (~370px tren man 1440px) nen moi the cao
 * gan 700px - mot trang danh muc chi chua duoc bon san pham truoc khi phai cuon.
 * Thay duoc khi chup man hinh ngay 28/08/2026, do bang so thi khong.
 */
.wp-block-woocommerce-product-template li.wc-block-product .wc-block-components-product-image img {
	aspect-ratio: 1 / 1;
	object-fit: contain;
	width: 100%;
	max-height: 230px;
}

/*
 * The <p> rong ma `wpautop` chen vao trong o anh.
 *
 * Do ngay 09/09/2026 tren voccoffee.com, tab "Ca phe nguyen ban". Ben trong
 * the <a> cua o anh:
 *
 *   the thuong        <img>                                    o anh cao 225px
 *   the khuyen mai    <p></p> + khoi nhan + <p>...anh...</p>    o anh cao 257px
 *
 * Chenh 32px, va no day tieu de cua rieng the khuyen mai xuong thap hon bon the
 * con lai - chu dau tu nhin ra ngay tren anh chup. Cac the thuong cung dang
 * chiu 16px thua ma khong ai de y, vi chung deu nhau.
 *
 * Nguon con: `do_blocks()` gan lai `wpautop` o uu tien 12, tuc la SAU shortcode
 * `[voc_hang_san_pham]` o uu tien 11. Ma khoi cua WooCommerce co xuong dong
 * quanh khoi nhan giam gia, va `wpautop` thay dong trong thi bien thanh <p>.
 * Cac the <p> do rong nhung le 16px cua chung thi that.
 *
 * Chua o day chu khong chua o `ManHinhHangSanPham`: shortcode khong ngan duoc
 * mot bo loc chay sau no tren toan bo noi dung trang. Muon chua tan goc thi
 * phai go `wpautop` khoi `the_content`, ma lam vay se doi cach xuong dong cua
 * moi trang do nguoi khac bien tap.
 */
.wp-block-woocommerce-product-template li.wc-block-product .wc-block-components-product-image p {
	margin: 0;
}

.wp-block-woocommerce-product-template li.wc-block-product .wc-block-components-product-image p:empty {
	display: none;
}

/* Nhan giam gia: o do dat de len anh, goc tren trai. */
.wp-block-woocommerce-product-template li.wc-block-product .wc-block-components-product-sale-badge {
	position: absolute;
	top: 16px;
	left: 16px;
	z-index: 1;
	margin: 0;
	padding: 3px 8px;
	border-radius: 4px;
	background: var(--wp--preset--color--chinh);
	color: var(--wp--preset--color--nen-noi);
	font-size: var(--wp--preset--font-size--nho, 0.875rem);
	font-weight: 500;
	text-transform: uppercase;
	border: 0;
}

/* Mo ta ngan dung dung hai dong, de gia va nut thang hang giua cac the. */
.wp-block-woocommerce-product-template li.wc-block-product .wp-block-woocommerce-product-summary {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
	min-height: 2.9em;
	margin-block: 0 0.5rem;
	color: var(--wp--preset--color--chu-nhat);
	line-height: 1.45;
}

/*
 * GIA - phai la thu noi nhat trong the.
 *
 * Do ngay 27/08/2026: gia dang mang mau rgb(56,39,31), tuc la DUNG BANG mau chu
 * toan trang va bang mau ten san pham; co chu 17,3px so voi ten 15,1px; do dam
 * 600 bang y het ten. Ba thu giong nhau thi mat khong bat duoc dau la gia -
 * ca the san pham thanh mot khoi chu deu deu.
 *
 * Mau do thuong hieu truoc day chi ap cho <ins> (gia khuyen mai), ma hau het
 * san pham khong giam gia nen no khong bao gio hien ra.
 */
.wp-block-woocommerce-product-template li.wc-block-product .wc-block-components-product-price {
	display: block;
	margin-block-end: 0.35rem;
	font-size: 1.375rem;
	font-weight: 700;
	line-height: 1.2;
	color: var(--wp--preset--color--chinh);
}

/*
 * Xep doc CHI KHI co giam gia.
 *
 * Ban truoc xep doc cho moi truong hop, nen mot khoang gia
 * "50.788 d - 422.875 d" bi be lam BA dong: so dau, dau gach, so sau.
 * San pham co bien the deu hien khoang gia, tuc la gan nhu ca trang danh muc.
 */
.wp-block-woocommerce-product-template li.wc-block-product .wc-block-components-product-price:has(ins) {
	display: flex;
	flex-direction: column;
}

/*
 * Gia goc o TREN, gia phai tra o DUOI.
 *
 * Ban truoc dao nguoc lai - dua gia phai tra len tren - voi ly do "mat bat gia
 * phai tra truoc". Chu dau tu xem tren may chu that ngay 09/09/2026 va doc ra
 * dung nguoc: so lon mau do o tren, so gach ngang o duoi, thanh ra trong nhu
 * gia khuyen mai bi dat duoi gia that.
 *
 * Doc tu tren xuong "215.156 gach di, con 123.213" la trinh tu ke chuyen giam
 * gia quen thuoc. Giu hai dong chu khong don mot dong: mot dong thi hai con so
 * dai nam canh nhau, o be ngang mot the san pham la be xuong dong lung tung.
 */
.wp-block-woocommerce-product-template li.wc-block-product .wc-block-components-product-price ins {
	order: 0;
	text-decoration: none;
	color: var(--wp--preset--color--chinh);
	font-weight: 700;
}

.wp-block-woocommerce-product-template li.wc-block-product .wc-block-components-product-price del {
	order: -1;
	font-size: var(--wp--preset--font-size--nho, 0.875rem);
	font-weight: 400;
	color: var(--wp--preset--color--chu-nhat);
}

/* Ky hieu dong nho hon con so: con so la thu can doc, khong phai don vi. */
.wp-block-woocommerce-product-template li.wc-block-product .woocommerce-Price-currencySymbol {
	font-size: 0.75em;
	font-weight: 600;
	vertical-align: 0.15em;
	margin-inline-start: 0.1em;
}

/* Ten san pham chiem dung hai dong de gia va nut thang hang. */
.wp-block-woocommerce-product-template li.wc-block-product > .wp-block-post-title {
	min-height: 2.8em;
	margin-block-end: 0.35rem;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.35;
}

.wp-block-woocommerce-product-template li.wc-block-product > .wp-block-post-title a {
	color: var(--wp--preset--color--chu);
	text-decoration: none;
	transition: color .18s ease;
}

.wp-block-woocommerce-product-template li.wc-block-product:hover > .wp-block-post-title a {
	color: var(--wp--preset--color--chinh);
}

/*
 * HIEU UNG KHI RE CHUOT
 *
 * Truoc day the san pham co `box-shadow: none` va khong doi gi khi re chuot -
 * khach khong biet no bam duoc. Mot the hang hoa phai phan hoi.
 */
.wp-block-woocommerce-product-template li.wc-block-product {
	transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.wp-block-woocommerce-product-template li.wc-block-product:hover {
	transform: translateY(-3px);
	border-color: var(--wp--preset--color--be);
	box-shadow: 0 8px 22px rgba(56, 39, 31, .13);
}

/* Anh phong nhe trong khung, khung khong dan ra. */
.wp-block-woocommerce-product-template li.wc-block-product .wc-block-components-product-image {
	overflow: hidden;
	border-radius: 4px;
}

.wp-block-woocommerce-product-template li.wc-block-product .wc-block-components-product-image img {
	transition: transform .35s ease;
}

.wp-block-woocommerce-product-template li.wc-block-product:hover .wc-block-components-product-image img {
	transform: scale(1.05);
}

/* Nguoi da bao giam chuyen dong thi bo het hieu ung nhac va phong. */
@media (prefers-reduced-motion: reduce) {
	.wp-block-woocommerce-product-template li.wc-block-product,
	.wp-block-woocommerce-product-template li.wc-block-product .wc-block-components-product-image img {
		transition: none;
	}

	.wp-block-woocommerce-product-template li.wc-block-product:hover {
		transform: none;
	}

	.wp-block-woocommerce-product-template li.wc-block-product:hover .wc-block-components-product-image img {
		transform: none;
	}
}

.wp-block-woocommerce-product-template li.wc-block-product > .wp-block-woocommerce-product-button {
	margin-block-start: auto;
	padding-block-start: var(--wp--preset--spacing--20, 0.5rem);
}

/* Nut mua trong the san pham: gon hon nut chinh, khong vo hai dong. */
.wp-block-woocommerce-product-template li.wc-block-product .wp-block-button__link {
	padding: 0.6rem 1rem;
	font-size: var(--wp--preset--font-size--nho, 0.875rem);
	white-space: nowrap;
}

/*
 * Dau trang dinh khi cuon, giong hello5. Ly do that su: menu la duong duy nhat
 * di toi 18 danh muc - bat khach cuon len dau trang moi doi duoc muc la mat khach.
 */
/*
 * DINH DAT TREN THE `<header>`, KHONG PHAI TREN `.voc-dau-trang`
 *
 * Loi da xay ra va da do (03/09/2026, man hinh 1280px): `position: sticky` von
 * nam tren `.voc-dau-trang`. Mot phan tu `sticky` chi truot duoc TRONG khoi
 * chua no, ma khoi chua day la the `<header>` boc ngoai - cao dung 93px, bang
 * dung chieu cao cua chinh dau trang. Quang truot bang 0, nen dau trang khong
 * he dinh: cuon 1.200px thi no cung troi len 1.200px.
 *
 * Do duoc bang cach so `getBoundingClientRect().top` cua dau trang sau khi
 * cuon: ra dung -1200 thay vi 0.
 *
 * Chuyen `sticky` len chinh the `<header>`: khoi chua cua no la `.wp-site-
 * blocks`, cao bang ca trang, nen quang truot la ca trang.
 *
 * Van de `<header>` chu khong phai `display: contents` tren no - cach kia cung
 * chua duoc loi nhung lam mat the boc, va the boc nay la vung moc `banner` cho
 * bo doc man hinh.
 */
header.wp-block-template-part:has(> .voc-dau-trang) {
	position: sticky;
	top: 0;
	z-index: 100;
}

.admin-bar header.wp-block-template-part:has(> .voc-dau-trang) {
	top: var(--wp-admin--admin-bar--height, 32px);
}

/*
 * Tu 600px tro xuong thanh quan tri KHONG dinh: WordPress doi no sang
 * `position: absolute`, no troi di khi cuon. Ma dau trang van chua cho 46px
 * cho no - ra mot khe ho ngay tren dau trang, noi dung chay xuyen qua (chu
 * dau tu chup lai ngay 12/09/2026). Chi nguoi dang dang nhap moi thay, nhung
 * chinh chu dau tu la nguoi dang nhap.
 */
@media (max-width: 600px) {
	.admin-bar header.wp-block-template-part:has(> .voc-dau-trang) {
		top: 0;
	}
}

.voc-dau-trang {
	/*
	 * DEM O DAY CHU KHONG O `header.html`
	 *
	 * Truoc day khoi dat `padding` qua thuoc tinh block, tuc la WordPress in ra
	 * `style="padding-top:..."` NOI TUYEN tren the. Hai hau qua:
	 *
	 * 1. Khong luat lop nao doi duoc no - `.voc-dau-trang--gon` thua trang. Do
	 *    ngay 03/09/2026: gan lop `--gon`, `paddingTop` khong nhuc nhich.
	 * Van giu nguyen gia tri cu `spacing|30` - do la con so da lam ra chieu cao
	 * 82px o dai 768-1440px hoi 27/08/2026, khong duoc pha. Doi sang so co dinh
	 * `1rem` thi dau trang phinh len 93px, tuc la tra lai 11px vua gianh duoc.
	 */
	padding-block: var(--wp--preset--spacing--30, 1rem);
}

/*
 * DAU TRANG MOT HANG
 *
 * Loi da xay ra (do ngay 27/08/2026, man hinh 1440px): logo 150 + menu 737 +
 * cong cu 381 = 1268px, vuot be ngang 1200px cua khung. Nhom cha co
 * `flex-wrap: wrap` nen bo cong cu roi xuong hang duoi, dinh sat le trai, va
 * dau trang cao 153px - gan gap doi hello5 (77px).
 *
 * Cach chua: menu chu hoa nho gon lai, cong cu thu hep, va cam xuong hang tren
 * man hinh rong. Duoi 1100px thi cho xuong hang - luc do menu chuyen sang dang
 * thu gon nen khong con chiem cho.
 */
@media (min-width: 1100px) {
	.voc-dau-trang > .wp-block-group {
		flex-wrap: nowrap;
	}
}

.voc-dau-trang > .wp-block-group {
	column-gap: var(--wp--preset--spacing--30, 1rem);
}

/*
 * Menu chinh: gon lai vua mot hang.
 *
 * HAI LAN SAI O DAY, ca hai chi lo ra khi chup man hinh:
 *
 * 1. Bo chon cu la `.voc-menu > .wp-block-navigation__container`. Vi menu co
 *    che do thu gon cho dien thoai, WordPress boc them BON lop div
 *    (responsive-container > responsive-dialog > responsive-close >
 *    responsive-container-content) nen `>` khong bao gio khop. Luat khong chay
 *    ma khong bao loi gi.
 *
 * 2. Dinh cho chu HOA giong hello5. Chu hoa lam menu RONG RA - dung thu dang
 *    lam no vo hang. hello5 dung duoc vi ho chi co 8 muc ngan; VOC co 10 muc,
 *    ma tieng Viet co dau doc chu hoa cung kho hon.
 */
.voc-menu .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
	font-size: 0.9rem;
	font-weight: 600;
	white-space: nowrap;
}

.voc-menu .wp-block-navigation__container {
	column-gap: 1.1rem;
}

/*
 * HIEU UNG RO CHUOT TREN MENU
 *
 * Chu dau tu ngay 10/09/2026: "phần chữ menu đang thiếu hiệu ứng, anh muốn có
 * thêm hiệu ứng mỗi khi di chuột qua 1 ô trên đó".
 *
 * Gach chan moc tu GIUA ra hai ben, khong phai hien nguyen ca vach. Vach hien
 * nguyen thi mat menu giat mot cai; vach moc ra thi mat doc duoc huong di.
 *
 * Ve bang `::after` chu khong bang `text-decoration` hay `border-bottom`: ca
 * hai deu doi chieu cao cua muc menu khi bat len, va ca hang menu nhich xuong
 * mot pixel moi lan ro chuot qua.
 */
.voc-menu .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
	position: relative;
	padding-block: .35rem;
	transition: color .16s ease;
}

.voc-menu .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: 50%;
	right: 50%;
	bottom: 0;
	height: 2px;
	background: var(--wp--preset--color--chinh);
	transition: left .18s ease, right .18s ease;
}

.voc-menu .wp-block-navigation__container > .wp-block-navigation-item:hover > .wp-block-navigation-item__content::after,
.voc-menu .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content:focus-visible::after,
.voc-menu .wp-block-navigation__container > .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content::after {
	left: 0;
	right: 0;
}

.voc-menu .wp-block-navigation__container > .wp-block-navigation-item:hover > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--chinh);
}

/* Muc trong bang xo xuong: to nen ca dong, khong gach chan. */
.voc-menu .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	transition: background-color .14s ease, color .14s ease;
}

.voc-menu .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
.voc-menu .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus-visible {
	background: var(--wp--preset--color--nen);
	color: var(--wp--preset--color--chinh);
}

@media (prefers-reduced-motion: reduce) {
	.voc-menu .wp-block-navigation-item__content,
	.voc-menu .wp-block-navigation-item__content::after { transition: none; }
}

/* Tang menu thu ba: mo sang ben phai thay vi chong len tang hai. */
.voc-menu .wp-block-navigation-submenu .wp-block-navigation-submenu .wp-block-navigation__submenu-container {
	top: 0;
	left: 100%;
}

/*
 * BANG XO XUONG PHAI DUC, KHONG BAO GIO NUA TRONG SUOT.
 *
 * WordPress an bang xo bang `opacity: 0` roi mo lai bang
 * `transition: opacity .1s linear`. Tren trang chu nhe thi 0.1s do khong ai
 * kip thay. Tren trang danh muc - luoi san pham, anh, cot loc - trinh duyet
 * con dang dung bo cuc, cu chuyen 0.1s bi keo dai ra, va khach ro chuot vao
 * menu trong luc do se thay bang xo o giua chung: nen trang chu di xuyen qua
 * chu. Chu dau tu chup lai dung khoanh khac do ngay 10/09/2026 va hoi "tại sao
 * menu nó lại khác trang chủ" - menu KHONG khac, no dang do dang.
 *
 * Da do lai bang puppeteer: mo trang danh muc roi ro chuot ngay khi tai xong
 * DOM cho ra `opacity: 0.50075` va van dung im o do; doi mang lang han
 * (`networkidle2`) roi moi ro chuot thi ra `1`. Dung mot loi do dac hieu -
 * chinh cu chuyen la thu duy nhat khac nhau giua hai lan do.
 *
 * `transition: none` bo han trang thai nua voi. Bang xo hien tuc thi - mat mot
 * hieu ung nho, doi lai chu luon doc duoc.
 */
.voc-menu .wp-block-navigation__submenu-container {
	border: 1px solid var(--wp--preset--color--vien);
	background: var(--wp--preset--color--nen-noi);
	min-width: 15rem;
	transition: none;
}

/* Vung cham cua muc menu con phai du lon tren dien thoai. */
.voc-menu .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 0.7rem 1rem;
}

/*
 * Nut lien he noi o goc phai duoi.
 *
 * Ghi chu cu o day noi nut "dat truoc phan chan trang trong luong doc de khong
 * che nut mua" - do la mo ta SAI: `position: fixed` go phan tu ra khoi luong
 * doc hoan toan, nen no van noi tren nut mua. Cach chua that su nam o khoi
 * media query duoi cuoi tep: tren dien thoai nut thu thanh vong tron 48px va
 * doi sang canh trai.
 */
.voc-lien-he-noi {
	position: fixed;
	right: 12px;
	bottom: 12px;
	z-index: 200;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

/*
 * Vong tron 48px mang bieu tuong, mau cua tung nen tang.
 *
 * `--voc-nut-nen` la mau nen cua rieng tung nut. No duoc khai o day chu khong
 * viet cung vao tung luat vi chu "Zalo" ben trong hinh SVG doc lai chinh bien
 * do de to nguoc mau nen len (chu long trong bong chat).
 */
.voc-lien-he-noi__nut {
	--voc-nut-nen: var(--wp--preset--color--chinh);

	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 999px;
	background: var(--voc-nut-nen);
	color: #fff;
	text-decoration: none;
	box-shadow: 0 3px 10px rgba(56, 39, 31, .28);
	transition: transform .16s ease, box-shadow .16s ease;
}

.voc-lien-he-noi__nut--facebook { --voc-nut-nen: #1877f2; }
.voc-lien-he-noi__nut--zalo     { --voc-nut-nen: #0068ff; }
.voc-lien-he-noi__nut--goi      { --voc-nut-nen: #e01b24; }
.voc-lien-he-noi__nut--trang    { --voc-nut-nen: #7a8b3c; }

.voc-lien-he-noi__nut:hover,
.voc-lien-he-noi__nut:focus-visible {
	color: #fff;
	transform: translateY(-2px) scale(1.06);
	box-shadow: 0 6px 16px rgba(56, 39, 31, .34);
}

/*
 * Ten nut: an san, chi truot ra khi ro chuot qua.
 *
 * Khong dung `display: none` de trinh doc man hinh van doc duoc; va khong dung
 * `title` mot minh vi chu do phai cho gan mot giay moi hien.
 */
.voc-lien-he-noi__ten {
	position: absolute;
	right: calc(100% + 10px);
	white-space: nowrap;
	padding: .35rem .7rem;
	border-radius: 6px;
	background: var(--wp--preset--color--chu);
	color: var(--wp--preset--color--nen-noi);
	font-size: var(--wp--preset--font-size--nho, .875rem);
	opacity: 0;
	pointer-events: none;
	transform: translateX(6px);
	transition: opacity .16s ease, transform .16s ease;
}

.voc-lien-he-noi__nut:hover .voc-lien-he-noi__ten,
.voc-lien-he-noi__nut:focus-visible .voc-lien-he-noi__ten {
	opacity: 1;
	transform: translateX(0);
}

/*
 * Ngon tay khong ro chuot duoc. Tren thiet bi cham, o ten khong bao gio hien -
 * de no o trang thai `hover` dinh cung thi no che mat noi dung ben canh.
 */
@media (hover: none) {
	.voc-lien-he-noi__ten { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.voc-lien-he-noi__nut,
	.voc-lien-he-noi__ten { transition: none; }

	.voc-lien-he-noi__nut:hover,
	.voc-lien-he-noi__nut:focus-visible { transform: none; }
}

/* Cong cu dau trang: o tim kiem, tai khoan, gio hang. */
.voc-cong-cu {
	flex: 0 0 auto;
	column-gap: 0.25rem;
}

.voc-cong-cu .wp-block-woocommerce-customer-account a,
.voc-cong-cu .wc-block-mini-cart__button {
	min-width: 44px;
	min-height: 44px;
}

/*
 * Nut tim kiem nam TRONG o nhap, khong phai mot khoi do rieng ben canh.
 * Ban truoc dat `button-only` nen no ra mot mang do to bang ban tay - vua
 * chiem cho vua khong giong nut tim kiem.
 */
/*
 * Vien va vong sang nam o KHUNG NGOAI, khong o o nhap ben trong.
 *
 * O nhap ben trong la hinh chu nhat; dat vong sang len no thi hai dau bi khung
 * bo tron cat cut, ra hai cai luoi liem. Dat len khung ngoai thi vong sang bo
 * tron theo dung o.
 */
.voc-cong-cu .wp-block-search__inside-wrapper {
	border: 1px solid var(--wp--preset--color--vien);
	border-radius: 999px;
	overflow: hidden;
	background: var(--wp--preset--color--nen);
	padding-inline-start: 0.75rem;
	transition: border-color .14s ease, box-shadow .14s ease;
}

.voc-cong-cu .wp-block-search__inside-wrapper:hover {
	border-color: var(--wp--preset--color--chu-nhat);
}

.voc-cong-cu .wp-block-search__inside-wrapper:focus-within {
	border-color: var(--wp--preset--color--chinh);
	box-shadow: 0 0 0 3px rgba(212, 13, 21, .18);
}

.voc-cong-cu .wp-block-search__input:focus-visible {
	outline: none;
	box-shadow: none;
	border-color: transparent;
}

.voc-cong-cu .wp-block-search__button {
	background: transparent;
	color: var(--wp--preset--color--chu-nhat);
	border: 0;
	padding: 0 0.6rem;
	/* 44px theo "Luat 44px" - truoc day 40px o day roi bi de lai o muc VUNG CHAM. */
	min-width: 44px;
	min-height: 44px;
}

.voc-cong-cu .wp-block-search__button:hover {
	color: var(--wp--preset--color--chinh);
	background: transparent;
}

/* Bang goi y tim kiem. */
.voc-cong-cu .wp-block-search { position: relative; }

.voc-goi-y {
	position: absolute;
	top: calc(100% + 6px);
	right: 0;
	z-index: 120;
	width: min(22rem, 80vw);
	max-height: 60vh;
	overflow-y: auto;
	border: 1px solid var(--wp--preset--color--vien);
	border-radius: 6px;
	background: var(--wp--preset--color--nen-noi);
	box-shadow: 0 6px 20px rgba(56, 39, 31, .18);
}

.voc-goi-y__muc {
	display: flex;
	align-items: center;
	gap: .6rem;
	padding: .6rem .8rem;
	color: var(--wp--preset--color--chu);
	text-decoration: none;
	min-height: 44px;
}

.voc-goi-y__muc + .voc-goi-y__muc { border-top: 1px solid var(--wp--preset--color--vien); }
.voc-goi-y__muc:hover,
.voc-goi-y__muc:focus-visible { background: var(--wp--preset--color--nen); }
.voc-goi-y__ten { flex: 1; font-size: var(--wp--preset--font-size--nho, .875rem); }
.voc-goi-y__gia { font-weight: 600; color: var(--wp--preset--color--chinh); white-space: nowrap; }
.voc-goi-y__trong { margin: 0; padding: .8rem; font-size: var(--wp--preset--font-size--nho, .875rem); }

.voc-cong-cu .wp-block-search__input {
	border: 1px solid var(--wp--preset--color--vien);
	background: var(--wp--preset--color--nen);
}

/*
 * SLIDE ANH MO DAU
 *
 * hello5 dung carousel co thu vien rieng. O day dung cuon ngang co diem dung
 * san co cua trinh duyet: khong them thu vien nao, vuot ngon tay chay ngay, va
 * khi tat JavaScript thi cac tam van cuon duoc - chi mat cham noi.
 */
.voc-slide {
	display: flex;
	flex-wrap: nowrap;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	position: relative;
}

.voc-slide::-webkit-scrollbar { display: none; }

.voc-slide > .voc-slide__tam,
.voc-slide__ray > .voc-slide__tam {
	flex: 0 0 100%;
	scroll-snap-align: start;
	margin: 0;
}

/*
 * CO JAVASCRIPT THI RAY CUON, KHOI NGOAI DUNG YEN - sua ngay 11/09/2026.
 *
 * Truoc do chinh `.voc-slide` la khung cuon, va mui ten lan cham noi la con
 * `position: absolute` cua no. Phan tu tuyet doi nam TRONG khung cuon thi cuon
 * theo noi dung: bam sang tam hai la ca mui ten lan cham troi ra ngoai khung
 * cung tam mot. Do bang `elementFromPoint` ngay tai vi tri mui ten sau mot lan
 * bam: tra ve tam anh, khong con nut nao.
 *
 * `slide.js` gio don cac tam vao `.voc-slide__ray` va ray do moi cuon. Mui ten
 * va cham van la con cua `.voc-slide` - mot khoi KHONG cuon - nen chung dung
 * yen o cho cua minh du ray chay toi dau.
 *
 * Khong co JavaScript thi khong co ray va khong co lop `--co-dieu-khien`, nen
 * `.voc-slide` o tren van tu cuon duoc bang ngon tay nhu cu.
 */
.voc-slide.voc-slide--co-dieu-khien {
	display: block;
	overflow: hidden;
	scroll-snap-type: none;
}

.voc-slide__ray {
	display: flex;
	flex-wrap: nowrap;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	transition: opacity .18s ease;
}

.voc-slide__ray::-webkit-scrollbar { display: none; }

/*
 * Nhay vong (tam cuoi -> tam dau, hay nguoc lai): mo di, nhay, hien lai.
 *
 * Truot muot tu tam ba ve tam mot thi ray chay NGUOC qua het cac tam o giua -
 * bam mui ten "sau" ma anh chay ve phia truoc, khach khong hieu dang di dau.
 * Mo di 180ms roi hien lai thi khong co huong nao de hieu nham.
 */
.voc-slide__ray--mo { opacity: 0; }

.voc-slide__cham {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 14px;
	display: flex;
	justify-content: center;
	gap: 10px;
	z-index: 2;
}

/*
 * Cham nhin thi nho, nhung vung cham phai du 44px - nen dung dem trong suot
 * bao quanh thay vi phong to cai cham.
 */
.voc-slide__cham-nut {
	appearance: none;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	position: relative;
}

.voc-slide__cham-nut::after {
	content: "";
	position: absolute;
	inset: 50% auto auto 50%;
	transform: translate(-50%, -50%);
	width: 10px;
	height: 10px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .45);
	border: 1px solid rgba(255, 255, 255, .8);

	/*
	 * DOI `width` O DAY LA CO Y, du bo do bao no la mau xau.
	 *
	 * Luat "dung animate width" nham vao phan tu nam TRONG luong: doi be rong
	 * mot phan tu trong luong bat trinh duyet xep lai moi thu ben canh no. Cai
	 * `::after` nay la `position: absolute`, tuc la da bi go khoi luong - doi
	 * be rong cua no khong xe dich mot phan tu nao khac.
	 *
	 * Da thu `scaleX(2.6)` de thay the: no keo meo ca vien 1px lan `border-
	 * radius`, hai dau vien tron thanh hai hinh bau duc va net vien ben trai
	 * phai day len 2,6px. Doi mot cai cham meo lay mot con so do khong thay
	 * duoc la doi lo.
	 */
	transition: background .2s ease, width .2s ease;
}

.voc-slide__cham-nut[aria-selected="true"]::after {
	background: var(--wp--preset--color--nen-noi);
	width: 26px;
}

.voc-slide__nut {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 1px solid rgba(255, 255, 255, .55);
	border-radius: 999px;
	background: rgba(56, 39, 31, .35);
	color: #FFFFFF;
	line-height: 1;
	cursor: pointer;
}

/*
 * Mui ten la SVG, khong phai chu - xem chu thich trong `assets/js/slide.js`.
 * `stroke` an theo `currentColor` nen mui ten doi mau cung nut khi can.
 */
.voc-slide__nut svg {
	display: block;
	width: 18px;
	height: 18px;
}

.voc-slide__nut:hover,
.voc-slide__nut:focus-visible { background: rgba(56, 39, 31, .7); }

/*
 * Bam mui ten thi lun 1px - VA VAN GIU `-50%`.
 *
 * Luat chung o khoi "Cham vao la lun xuong" ben duoi viet
 * `.voc-slide__nut:active { transform: translateY(1px) }`. `transform` la mot
 * gia tri duy nhat, ghi de chu khong cong don: no xoa mat `translateY(-50%)`
 * dung de can giua mui ten theo chieu doc, nen trong luc giu chuot mui ten
 * NHAY XUONG gan nua chieu cao cua no (~21px) roi bat nguoc len khi nha tay.
 * Do ngay 11/09/2026. Lap lop hai lan de thang luat chung o do dac hieu.
 */
.voc-slide__nut.voc-slide__nut:active {
	transform: translateY(calc(-50% + 1px));
}
.voc-slide__nut--trai { left: 12px; }
.voc-slide__nut--phai { right: 12px; }

/* Chua co JavaScript thi chua co nut - khong chua cho trong. */
.voc-slide:not(.voc-slide--co-dieu-khien) .voc-slide__nut,
.voc-slide:not(.voc-slide--co-dieu-khien) .voc-slide__cham { display: none; }

@media (max-width: 700px) {
	/* Man hinh hep khong con cho cho mui ten canh chu - vuot ngon tay la du. */
	.voc-slide__nut { display: none; }
}

/*
 * TIEU DE MUC
 *
 * Cac muc tren trang chu deu bat dau bang mot h2 cung co, cung mau, khong co
 * dau hieu gi phan cach - cuon xuong thi cac muc troi vao nhau. Them mot vach
 * do ngan duoi tieu de: du de mat biet "muc moi bat dau o day", khong on ao.
 */
main > .wp-block-group > h2.wp-block-heading,
main > .wp-block-group > .wp-block-heading {
	position: relative;
	font-size: clamp(1.5rem, 1.1rem + 1.3vw, 2rem);
	letter-spacing: -0.01em;
	padding-block-end: 0.7rem;
}

main > .wp-block-group > h2.wp-block-heading.has-text-align-center::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 0;
	transform: translateX(-50%);
	width: 56px;
	height: 3px;
	border-radius: 999px;
	background: var(--wp--preset--color--chinh);
}

/* Chu chi danh cho bo doc man hinh. */
.voc-an-nhin {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* TAB SAN PHAM - kieu gach chan giong `nav-line-bottom` cua hello5. */
.voc-tab__thanh {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .25rem 1.5rem;
	margin-block-end: var(--wp--preset--spacing--40, 2rem);
	border-bottom: 1px solid var(--wp--preset--color--vien);
}

/*
 * Tren dien thoai thanh tab phai la MOT hang cuon ngang, khong duoc xuong dong.
 *
 * Do ngay 31/08/2026 o 375px: nam nhan cua muc ca phe xuong ba dong, thanh tab
 * cao 138px - bang mot phan sau man hinh, chi de chua nam tu. Doi sang cuon
 * ngang thi con 48px. Day la mot trong ba khoan cat de keo san pham dau tien
 * len tren nguong 1.600px.
 */
@media (max-width: 700px) {
	.voc-tab__thanh {
		flex-wrap: nowrap;
		justify-content: flex-start;
		gap: 0 1.25rem;
		overflow-x: auto;
		scrollbar-width: none;
		margin-block-end: var(--wp--preset--spacing--30, 1rem);
	}

	.voc-tab__thanh::-webkit-scrollbar { display: none; }

	.voc-tab__nut {
		flex: 0 0 auto;
		white-space: nowrap;
		padding-block: .5rem;
	}
}

.voc-tab__nut {
	appearance: none;
	border: 0;
	background: none;
	cursor: pointer;
	padding: .7rem .25rem;
	min-height: 44px;
	color: var(--wp--preset--color--chu-nhat);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--thuong, 1rem);
	font-weight: 600;
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
}

.voc-tab__nut[aria-selected="true"] {
	color: var(--wp--preset--color--chinh);
	border-bottom-color: var(--wp--preset--color--chinh);
}

.voc-tab__nut:hover { color: var(--wp--preset--color--chu); }

/*
 * Bang tab CHUA CO SAN PHAM.
 *
 * Tu 10/09/2026 mot hang co danh muc chua duoc tao van hien ra thanh tab cua no
 * (xem `VeHangSanPham::loiChuaCo`). Do ngay 10/09/2026 tren dev: bang do chi cao
 * 26px, tuc la bam sang tab do thi ca trang nhay len gan nua man hinh roi lo ra
 * mot dong chu le loi - nhin nhu trang loi chu khong nhu mot muc chua co hang.
 *
 * Dung PADDING chu khong dung margin: `.voc-tab__bang` khong co vien lan padding
 * nen margin cua dua con chay THOAT ra ngoai no - do duoc 24px margin ma chieu
 * cao bang van dung 26px. Padding thi nam trong, bang cao len 122px.
 */
.voc-tab__trong {
	margin-block: 0;
	padding-block: 3rem;
	color: var(--wp--preset--color--chu-nhat);
}

/*
 * HANG SAN PHAM TRUOT NGANG
 *
 * hello5 dung carousel co thu vien rieng. O day dung cuon ngang co diem dung
 * san co cua trinh duyet: khong them thu vien nao, van vuot duoc bang ngon tay,
 * va khi tat JavaScript thi hang van cuon duoc binh thuong.
 */
.voc-tab__bang { position: relative; }

.voc-tab__bang .wp-block-woocommerce-product-template {
	display: flex;
	flex-wrap: nowrap;
	gap: var(--wp--preset--spacing--30, 1rem);
	/*
	 * `safe center`, khong phai `center`.
	 *
	 * Hang nao it san pham hon so cot thi cum the nam giua cho trong (dong "Coi
	 * Nguon" 10/09/2026 co dung MOT the, no dinh sat le trai nhin nhu hang bi
	 * cat). Nhung day la mot khung CUON NGANG: voi `center` thuong, khi hang
	 * day hon mot man hinh thi phan tran ra o dau bi day ra ngoai vung cuon va
	 * khong the keo tro lai - the dau tien mat han. `safe` bao trinh duyet tu
	 * bo can giua ngay khi bat dau tran, ve lai `flex-start`.
	 */
	justify-content: safe center;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: 2px;
	padding-block-end: .5rem;
	scrollbar-width: thin;
}

.voc-tab__bang .wp-block-woocommerce-product-template li.wc-block-product {
	flex: 0 0 calc((100% - 4 * var(--wp--preset--spacing--30, 1rem)) / 5);
	scroll-snap-align: start;
	margin: 0;
	max-width: none;
}

.voc-truot__nut {
	position: absolute;
	top: 38%;
	z-index: 2;
	display: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 1px solid var(--wp--preset--color--vien);
	border-radius: 999px;
	background: var(--wp--preset--color--nen-noi);
	color: var(--wp--preset--color--chu);
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
}

.voc-tab__bang--co-nut .voc-truot__nut { display: flex; }
.voc-truot__nut--trai { left: -14px; }
.voc-truot__nut--phai { right: -14px; }
.voc-truot__nut:hover { background: var(--wp--preset--color--nen); }

@media (max-width: 1024px) {
	.voc-tab__bang .wp-block-woocommerce-product-template li.wc-block-product {
		flex-basis: calc((100% - 2 * var(--wp--preset--spacing--30, 1rem)) / 3);
	}
}

@media (max-width: 700px) {
	.voc-tab__bang .wp-block-woocommerce-product-template li.wc-block-product {
		flex-basis: calc((100% - var(--wp--preset--spacing--30, 1rem)) / 2);
	}
	/*
	 * Mui ten khong con cho tren dien thoai - vuot ngon tay la du.
	 *
	 * Lap lai `.voc-tab__bang--co-nut` de thang do dac hieu cua luat bat nut o
	 * tren, thay vi dung `!important` - DESIGN.md cam `!important`.
	 */
	.voc-tab__bang--co-nut.voc-tab__bang--co-nut .voc-truot__nut { display: none; }
}

/* CAU HOI THUONG GAP */
.voc-faq .voc-cau-hoi {
	border-bottom: 1px solid var(--wp--preset--color--vien);
	padding-block: .9rem;
}

.voc-faq .voc-cau-hoi summary {
	cursor: pointer;
	font-weight: 600;
	min-height: 44px;
	display: flex;
	align-items: center;
}

.voc-faq .voc-cau-hoi p { margin-block-end: 0; color: var(--wp--preset--color--chu-nhat); }

/*
 * Nam o danh muc: xuong hai cot roi mot cot thay vi bop lai qua hep.
 *
 * Lap ten lop de thang luat `flex-basis` ma khoi Columns cua WordPress tu sinh
 * ra; truoc day cho nay dung `!important`, thu DESIGN.md cam.
 */
@media (max-width: 900px) {
	.voc-o-danh-muc-hang { flex-wrap: wrap; }
	.voc-o-danh-muc-hang.voc-o-danh-muc-hang > .wp-block-column { flex-basis: calc(50% - var(--wp--preset--spacing--30, 1rem)); }
}

@media (max-width: 600px) {
	.voc-o-danh-muc-hang.voc-o-danh-muc-hang > .wp-block-column { flex-basis: 100%; }
}

/*
 * Nut "Xem sản phẩm" phai nam giua o, thang hang voi ten muc o tren.
 *
 * `VeODanhMuc` sinh HTML TAY nen khoi Buttons khong co cac lop bo cuc ma trinh
 * bien tap khoi tu gan (`is-layout-flex`, `is-content-justification-center`) -
 * khong co chung thi nut roi ve le trai. Dat thang o day de khong phai phu
 * thuoc vao ten lop noi bo cua WordPress.
 */
.voc-o-danh-muc .wp-block-buttons {
	display: flex;
	justify-content: center;
}

/* O danh muc: sang len khi ro chuot de biet la bam duoc. */
.voc-o-danh-muc { overflow: hidden; }

.voc-o-danh-muc .wp-block-cover__image-background {
	transition: transform .4s ease;
}

.voc-o-danh-muc:hover .wp-block-cover__image-background {
	transform: scale(1.04);
}

/*
 * HANG DANH MUC CON tren trang danh muc.
 *
 * Dang the bam duoc, khong phai menu doc: mot muc nhu "Máy pha cà phê" co bon
 * hang (Hambach, Jetinno, Outin, Winci) va khach can thu hep ngay tren dau
 * trang, khong phai cuon xuong het 7 san pham roi moi tim thay cho loc.
 *
 * Cuon ngang tren dien thoai, cung cach da dung cho `.voc-tab__thanh` - de mot
 * muc nhieu nhanh khong an ba dong dau man hinh.
 */
.voc-danh-muc-con {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin-block-end: var(--wp--preset--spacing--40, 2rem);
}

.voc-danh-muc-con__o {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	min-height: 44px;
	padding: .35rem 1rem;
	border: 1px solid var(--wp--preset--color--vien);
	border-radius: 999px;
	background: var(--wp--preset--color--nen-noi);
	color: var(--wp--preset--color--chu);
	font-size: var(--wp--preset--font-size--nho, .875rem);
	text-decoration: none;
}

.voc-danh-muc-con__o:hover,
.voc-danh-muc-con__o:focus-visible {
	border-color: var(--wp--preset--color--chinh);
	color: var(--wp--preset--color--chinh);
}

.voc-danh-muc-con__so {
	color: var(--wp--preset--color--chu-nhat);
	font-size: .8em;
}

.voc-danh-muc-con__o:hover .voc-danh-muc-con__so { color: inherit; }

@media (max-width: 700px) {
	.voc-danh-muc-con {
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
		margin-block-end: var(--wp--preset--spacing--30, 1rem);
	}

	.voc-danh-muc-con::-webkit-scrollbar { display: none; }
	.voc-danh-muc-con__o { flex: 0 0 auto; white-space: nowrap; }
}

/* Chan trang toi: lien ket phai doc duoc tren nen nau. */
.voc-chan-trang a { color: var(--wp--preset--color--be); text-decoration: none; }
.voc-chan-trang a:hover { text-decoration: underline; }
.voc-chan-trang h2 { color: var(--wp--preset--color--nen-noi); }
.voc-chan-trang .voc-lien-ket { list-style: none; margin: 0; padding: 0; }
.voc-chan-trang .voc-lien-ket li + li { margin-top: .4rem; }
.voc-chan-trang .voc-vach { border: 0; border-top: 1px solid rgba(232, 220, 207, .22); }

/* Dai chung nhan: gian deu, xuong dong gon tren dien thoai. */
.voc-chung-nhan p { margin: 0; }

@media (max-width: 600px) {
	.voc-chung-nhan .wp-block-group { justify-content: center; gap: .75rem 1.5rem; }
}

/* Khoi noi dung theo nhom hang (plugin voc-storefront). */
.voc-cam-ket,
.voc-huong-dan {
	margin-block: var(--wp--preset--spacing--40, 2rem);
}

.voc-cam-ket__tieu-de,
.voc-huong-dan__tieu-de {
	font-size: var(--wp--preset--font-size--lon, 1.25rem);
	margin-block-end: var(--wp--preset--spacing--20, 0.5rem);
}

.voc-cam-ket__muc,
.voc-huong-dan__muc {
	margin: 0;
	padding-inline-start: 1.25rem;
}

.voc-cam-ket__muc li,
.voc-huong-dan__muc li {
	margin-block-end: 0.35rem;
}

/*
 * =====================================================================
 * TRANG SAN PHAM CA PHE (11/09/2026)
 * =====================================================================
 *
 * Bon khoi moi, theo sau mau chu dau tu gui cung ngay: huong vi (Gloria
 * Jean's), o chon dang xay dang danh sach (Pact), hai cach mua (Pact + Peet's),
 * goi y pha che (Verve), quy trinh dat truoc (Pact).
 *
 * Mau goc dung vach DUT de ngan cac khoi. O day KHONG: vien dut la dau hieu
 * rieng cua "chỗ còn thiếu" trong DESIGN.md, dung no cho mot khoi da xong la
 * noi doi ve trang thai cua khoi do.
 */

/* ---- Huong vi: hai cot "Nhan - gia tri", vach lien tren duoi ---- */
.voc-huong-vi {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: .5rem 2rem;
	margin: var(--wp--preset--spacing--30, 1rem) 0;
	padding-block: var(--wp--preset--spacing--30, 1rem);
	border-block: 1px solid var(--wp--preset--color--vien);
	font-size: var(--wp--preset--font-size--nho-vua, .9375rem);
	line-height: 1.45;
}

.voc-huong-vi__muc dt,
.voc-huong-vi__muc dd {
	display: inline;
	margin: 0;
}

.voc-huong-vi__muc dt {
	font-weight: 700;
	color: var(--wp--preset--color--chu);
}

.voc-huong-vi__muc dt::after {
	content: " – ";
	font-weight: 400;
}

.voc-huong-vi__muc dd {
	color: var(--wp--preset--color--chu-nhat);
}

@media (max-width: 480px) {
	.voc-huong-vi { grid-template-columns: 1fr; }
}

/*
 * `form.cart` co theo noi dung. Khong ghim be ngang thi mo danh sach dang xay
 * ra la ca bieu mau rong them ~43px (dong giai thich dai hon nut), va nut nhay
 * be ngang ngay duoi tay khach - thay khi chup ngay 11/09/2026.
 */
body.woocommerce div.product form.cart:has(.voc-dang, .voc-tui, .voc-cach-mua) {
	width: 100%;
}

/*
 * `form.cart` la `display: grid` (CSS cua khoi add-to-cart-form cua WooCommerce),
 * voi cot tu co theo noi dung. Cot khong ghim thi moi lan doi cach mua, the mo
 * ra khac do rong, va ca khoi "Cách mua" doi be ngang ngay duoi tay khach. Chu
 * dau tu bat duoc ngay 11/09/2026: "mỗi lần đổi cách mua là nó đổi width".
 * Do bang trinh duyet: khoi rong 252px, cha la luoi.
 */
body.woocommerce div.product form.cart:has(.voc-dang, .voc-tui, .voc-cach-mua) {
	grid-template-columns: minmax(0, 36rem);
}

.voc-dang,
.voc-tui,
.voc-cach-mua {
	width: 100%;
	max-width: 36rem;
	box-sizing: border-box;
}

/*
 * Cot anh bam theo khi cuon cot ben phai. Chu dau tu ngay 11/09/2026: keo
 * xuong doc phan dat truoc thi anh san pham troi mat o tren, "anh muốn là
 * media nó chạy theo đến hết phần thông tin cột bên phải".
 *
 * Chi khi hai cot dung canh nhau (tu 782px, moc cua khoi Columns). `top`
 * chua cho dau trang dinh cao 82px.
 */
@media (min-width: 782px) {
	.wp-block-column.voc-cot-anh {
		position: sticky;
		top: calc(82px + var(--wp--preset--spacing--30, 1rem));
		align-self: flex-start;
	}
}

/* ---- O chon dang xay: nut + danh sach tha xuong, moi dong xep ngang ---- */
/*
 * Ban lop phu cac the (mau Pact) chi song mot buoi 11/09/2026. Chu dau tu:
 * "cái phần cỡ xay, em để về dạng như cũ nhé: nhưng nếu được thì nên giữ
 * icon - tên phương pháp - mô tả cỡ xay - mô tả chi tiết theo dạng ngang".
 * Nen: danh sach tha ngay duoi nut, moi dong la mot hang bon cot.
 */
.voc-dang {
	margin: 0 0 var(--wp--preset--spacing--30, 1rem);
	padding: 0;
	border: 0;
	min-width: 0;
}

.voc-dang__nhan,
.voc-tui__nhan,
.voc-cach-mua__nhan {
	margin: 0 0 .4rem;
	padding: 0;
	font-weight: 700;
	color: var(--wp--preset--color--chu);
}

.voc-dang__mo {
	display: flex;
	align-items: center;
	gap: .75rem;
	width: 100%;
	min-height: 48px;
	padding: .6rem 1rem;
	border: 1px solid var(--wp--preset--color--chu-nhat);
	border-radius: 4px;
	background: var(--wp--preset--color--nen-noi);
	color: var(--wp--preset--color--chu);
	font: inherit;
	font-weight: 700;
	text-align: left;
	cursor: pointer;
}

.voc-dang__mo:focus-visible {
	outline: 2px solid var(--wp--preset--color--chinh);
	outline-offset: 2px;
}

/* Dau tick tron: noi "day la cai dang chon", giong mau Pact. */
.voc-dang__dau-tick {
	flex: none;
	width: 1.25rem;
	height: 1.25rem;
	border-radius: 999px;
	background: var(--wp--preset--color--chu) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%23FFFFFF' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='m3 6.2 2 2 4-4.4'/%3E%3C/svg%3E") center / 70% no-repeat;
}

.voc-dang__dang-chon { flex: 1; }

.voc-dang__mui {
	flex: none;
	width: 12px;
	height: 8px;
	background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%2338271F' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: transform .18s ease;
}

.voc-dang.la-mo .voc-dang__mui { transform: rotate(180deg); }

.voc-dang__ds {
	margin-top: .35rem;
	border: 1px solid var(--wp--preset--color--vien);
	border-radius: 4px;
	background: var(--wp--preset--color--nen-noi);
	overflow: hidden;
}

/* Mot dong: o tron | hinh | ten | do xay | mo ta. */
.voc-dang__muc {
	display: grid;
	grid-template-columns: 1.1rem 2.25rem 6.75rem 5.75rem minmax(0, 1fr);
	align-items: center;
	gap: .75rem;
	min-height: 44px;
	padding: .65rem 1rem;
	cursor: pointer;
}

.voc-dang__muc + .voc-dang__muc { border-top: 1px solid var(--wp--preset--color--vien); }

.voc-dang__muc:hover,
.voc-dang__muc:has(input:checked) { background: var(--wp--preset--color--nen); }

.voc-dang__muc:has(input:focus-visible) {
	outline: 2px solid var(--wp--preset--color--chinh);
	outline-offset: -2px;
}

.voc-dang__muc input { margin: 0; }

.voc-dang__hinh {
	width: 2.25rem;
	height: 2.25rem;
	fill: none;
	stroke: var(--wp--preset--color--chu);
	stroke-width: 2.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.voc-dang__ten { font-weight: 600; }

.voc-dang__muc:has(input:checked) .voc-dang__ten { font-weight: 700; }

.voc-dang__do-xay {
	color: var(--wp--preset--color--chu-nhat);
	font-size: var(--wp--preset--font-size--nho, .875rem);
}

.voc-dang__mo-ta {
	font-size: var(--wp--preset--font-size--nho, .875rem);
	line-height: 1.4;
}

/* Hep: mo ta xuong dong duoi, thang hang voi ten. */
@media (max-width: 600px) {
	.voc-dang__muc {
		grid-template-columns: 1.1rem 2.25rem minmax(0, 1fr) auto;
		row-gap: .2rem;
	}

	.voc-dang__mo-ta { grid-column: 3 / -1; }
}

/* ---- The trong luong: hien het, gia ben phai ---- */
body.woocommerce div.product form.cart:has(.voc-tui) table.variations,
body.woocommerce div.product form.cart:has(.voc-tui) .woocommerce-variation-price {
	display: none;
}

.voc-tui {
	margin: 0 0 var(--wp--preset--spacing--30, 1rem);
	padding: 0;
	border: 0;
	min-width: 0;
}

.voc-tui__ds {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: .5rem;
}

.voc-tui__the {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .5rem;
	min-height: 52px;
	padding: .5rem 1rem;
	border: 1px solid var(--wp--preset--color--vien);
	border-radius: 4px;
	background: var(--wp--preset--color--nen-noi);
	cursor: pointer;
}

/* O tron that van con - an bang mat, khong an voi ban phim va trinh doc man hinh. */
.voc-tui__the input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}

.voc-tui__the:has(input:checked) {
	border-color: var(--wp--preset--color--chu);
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--chu);
}

.voc-tui__the:has(input:focus-visible) {
	outline: 2px solid var(--wp--preset--color--chinh);
	outline-offset: 2px;
}

.voc-tui__ten { font-weight: 700; }

.voc-tui__gia {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	font-weight: 700;
	line-height: 1.2;
	text-align: right;
}

.voc-tui__gia small,
.voc-tui__gia del {
	font-size: .75rem;
	font-weight: 400;
	color: var(--wp--preset--color--chu-nhat);
}

/* Het hang: doi han hinh thuc (nen be, chu nau nhat), khong ha opacity. */
.voc-tui__the.la-het-hang {
	background: var(--wp--preset--color--nen);
	color: var(--wp--preset--color--chu-nhat);
	cursor: not-allowed;
}

.voc-tui__het {
	font-size: var(--wp--preset--font-size--nho, .875rem);
	font-weight: 600;
}

/* ---- Hai cach mua ---- */
.voc-cach-mua {
	margin: 0 0 var(--wp--preset--spacing--30, 1rem);
}

.voc-cach-mua__the {
	margin-top: .5rem;
	border: 1px solid var(--wp--preset--color--vien);
	border-radius: 6px;
	background: var(--wp--preset--color--nen-noi);
}

/* The dang chon: vien nau dam 2px - ngon ngu cua mau Peet's. Khong dung do:
 * do la giong cua gia tien, o day chi la "ban dang chon cai nay". */
.voc-cach-mua__the:has(.voc-cach-mua__dau-the input:checked) {
	border-color: var(--wp--preset--color--chu);
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--chu);
}

.voc-cach-mua__dau-the {
	display: flex;
	align-items: flex-start;
	gap: .75rem;
	padding: .9rem 1rem;
	cursor: pointer;
}

.voc-cach-mua__dau-the input {
	flex: none;
	margin-top: .2rem;
}

.voc-cach-mua__dau {
	display: flex;
	flex: 1;
	align-items: flex-start;
	justify-content: space-between;
	gap: .75rem;
}

.voc-cach-mua__ten {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: .35rem;
	font-weight: 700;
}

.voc-cach-mua__nhan-giam {
	padding: 2px 8px;
	border-radius: 4px;
	background: var(--wp--preset--color--chinh-nhat);
	color: var(--wp--preset--color--chinh);
	font-size: .8125rem;
	font-weight: 700;
	white-space: nowrap;
}

.voc-cach-mua__gia-the {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	font-weight: 700;
	line-height: 1.25;
	text-align: right;
	white-space: nowrap;
}

.voc-cach-mua__gia-the small,
.voc-cach-mua__gia-the del {
	font-size: .75rem;
	font-weight: 400;
	color: var(--wp--preset--color--chu-nhat);
}

.voc-cach-mua__chi-tiet {
	margin: 0 1rem;
	padding: .9rem 0 1rem;
	border-top: 1px solid var(--wp--preset--color--vien);
}

/* The mua mot lan chi chua o so luong - xep ngang cho gon. */
.voc-cach-mua__chi-tiet--mot-lan {
	display: flex;
	align-items: center;
	gap: .75rem;
}

.voc-cach-mua__chi-tiet--mot-lan[hidden] { display: none; }

.voc-cach-mua__chi-tiet--mot-lan .quantity { margin: 0; }

.voc-cach-mua__nhan-o {
	font-size: var(--wp--preset--font-size--nho, .875rem);
	font-weight: 600;
}

.voc-cach-mua__bac {
	margin: 0 0 .9rem;
}

/* Bac giam: mot hang o "Từ 3 túi / −5%" thay cho mot cau dai (11/09/2026).
 * `--so-bac` do PHP ghi: 4 bac thi 4 cot deu nhau; hep qua thi xuong 2 cot. */
.voc-bac__tieu-de {
	margin: 0 0 .5rem;
	font-size: var(--wp--preset--font-size--nho-vua, .9375rem);
	font-weight: 600;
}

.voc-bac__tieu-de span {
	color: var(--wp--preset--color--chu-nhat);
	font-size: var(--wp--preset--font-size--nho, .875rem);
	font-weight: 400;
}

.voc-bac {
	display: grid;
	grid-template-columns: repeat(var(--so-bac, 4), minmax(0, 1fr));
	gap: .5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.voc-bac__o {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .1rem;
	padding: .5rem .25rem;
	border: 1px solid var(--wp--preset--color--vien);
	border-radius: 6px;
	background: var(--wp--preset--color--nen);
	text-align: center;
	transition: border-color .18s ease, background-color .18s ease, transform .18s ease;
}

.voc-bac__so {
	color: var(--wp--preset--color--chu-nhat);
	font-size: .8125rem;
	white-space: nowrap;
}

.voc-bac__giam {
	color: var(--wp--preset--color--chu);
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1.2;
}

/* Bac da vuot qua: van doc duoc, chi lui xuong mot bac mau. */
.voc-bac__o.la-da-qua .voc-bac__giam { color: var(--wp--preset--color--chu-nhat); }

/* Bac dang dat: vien va chu mau chinh, nen hong nhat. */
.voc-bac__o.la-dang {
	border-color: var(--wp--preset--color--chinh);
	background: var(--wp--preset--color--chinh-nhat);
	transform: translateY(-1px);
}

.voc-bac__o.la-dang .voc-bac__so,
.voc-bac__o.la-dang .voc-bac__giam { color: var(--wp--preset--color--chinh); }

@media (max-width: 420px) {
	.voc-bac { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
	.voc-bac__o { transition: none; }
	.voc-bac__o.la-dang { transform: none; }
}

.voc-cach-mua__loi-ich {
	margin: 0 0 .9rem;
	padding: 0;
	list-style: none;
	font-size: var(--wp--preset--font-size--nho, .875rem);
}

.voc-cach-mua__loi-ich li {
	position: relative;
	padding-inline-start: 1.25rem;
}

.voc-cach-mua__loi-ich li::before {
	content: "✓";
	position: absolute;
	left: 0;
	color: var(--wp--preset--color--chu-nhat);
}

.voc-cach-mua__hang {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: .75rem;
}

.voc-cach-mua__o {
	display: flex;
	flex-direction: column;
	gap: .3rem;
	margin: 0;
	font-size: var(--wp--preset--font-size--nho, .875rem);
	font-weight: 600;
}

.voc-cach-mua__o--ngay { margin-top: .75rem; }

.voc-cach-mua__o select,
.voc-cach-mua__o input {
	width: 100%;
	font-weight: 400;
}

@media (max-width: 480px) {
	.voc-tui__ds,
	.voc-cach-mua__hang { grid-template-columns: 1fr; }
}

/* Khoang cach giao: ba nut chia doan, nhu "Weekly / Fortnightly / Monthly". */
.voc-cach-mua__khoang {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: .5rem;
	margin: .75rem 0 0;
	padding: 0;
	border: 0;
	min-width: 0;
}

.voc-cach-mua__khoang legend {
	margin-bottom: .3rem;
	padding: 0;
	font-size: var(--wp--preset--font-size--nho, .875rem);
	font-weight: 600;
}

.voc-cach-mua__khoang label {
	position: relative;
	display: flex;
}

.voc-cach-mua__khoang input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}

.voc-cach-mua__khoang span {
	display: flex;
	flex: 1;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: .4rem .5rem;
	border: 1px solid var(--wp--preset--color--vien);
	border-radius: 4px;
	background: var(--wp--preset--color--nen-noi);
	font-size: var(--wp--preset--font-size--nho, .875rem);
	font-weight: 600;
	text-align: center;
	line-height: 1.25;
	cursor: pointer;
}

.voc-cach-mua__khoang input:checked + span {
	border-color: var(--wp--preset--color--chu);
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--chu);
}

.voc-cach-mua__khoang input:focus-visible + span {
	outline: 2px solid var(--wp--preset--color--chinh);
	outline-offset: 2px;
}

/* Dong tong tien: mot con so, doi theo cach mua. So tien mang do - dung cho
 * duy nhat trong khoi nay mang do, vi no la tien. */
.voc-cach-mua__tong {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: .15rem .6rem;
	margin: 1rem 0 0;
}

.voc-cach-mua__tong:empty { display: none; }

.voc-cach-mua__tong-nhan { font-weight: 600; }

.voc-cach-mua__tong-so {
	color: var(--wp--preset--color--chinh);
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.2;
}

.voc-cach-mua__tong del { color: var(--wp--preset--color--chu-nhat); }

.voc-cach-mua__tong-phu {
	flex-basis: 100%;
	color: var(--wp--preset--color--chu-nhat);
	font-size: var(--wp--preset--font-size--nho, .875rem);
}

/*
 * GIA MOI khi co giam: do, dam - la thu mat phai bat duoc truoc. Gia cu gach,
 * nho, nau nhat. Chu dau tu ngay 11/09/2026: "nếu có giảm giá, gạch giá cũ thì
 * phải làm nổi bật giá mới chứ".
 */
.voc-gia-moi {
	color: var(--wp--preset--color--chinh);
	font-weight: 700;
}

/* Goi y bac ke tiep: "Thêm 2 túi nữa để được giảm 7%". */
.voc-cach-mua__goi-y {
	flex-basis: 100%;
	color: var(--wp--preset--color--chu);
	font-size: var(--wp--preset--font-size--nho, .875rem);
}

/* ---- Nut - / + canh o so ----
 * Thay mui ten nho cua trinh duyet: tren dien thoai mui ten do gan nhu khong
 * bam trung. O van la `input type=number` that - van go tay duoc.
 */
.voc-so {
	display: inline-flex;
	align-items: stretch;
	border: 1px solid var(--wp--preset--color--vien);
	border-radius: 4px;
	background: var(--wp--preset--color--nen-noi);
	overflow: hidden;
	transition: border-color .15s ease;
}

.voc-so:hover,
.voc-so:focus-within { border-color: var(--wp--preset--color--chu-nhat); }

.voc-so__nut {
	flex: none;
	width: 44px;
	min-height: 44px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--wp--preset--color--chu);
	font: inherit;
	font-size: 1.25rem;
	line-height: 1;
	cursor: pointer;
	transition: background-color .15s ease;
}

.voc-so__nut:hover { background: var(--wp--preset--color--nen); }

.voc-so__nut:focus-visible {
	outline: 2px solid var(--wp--preset--color--chinh);
	outline-offset: -2px;
}

body.woocommerce div.product form.cart .voc-so input[type="number"] {
	width: 3.5rem;
	min-height: 44px;
	height: auto;
	margin: 0;
	padding: 0;
	border: 0;
	border-inline: 1px solid var(--wp--preset--color--vien);
	border-radius: 0;
	background: transparent;
	font-weight: 600;
	text-align: center;
	-moz-appearance: textfield;
	appearance: textfield;
}

body.woocommerce div.product form.cart .voc-so input[type="number"]:focus {
	outline: none;
	box-shadow: none;
}

.voc-so input::-webkit-inner-spin-button,
.voc-so input::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* O "Số túi mỗi đợt" trai het cot, nhu o "Số đợt giao" canh no. */
.voc-cach-mua__o .voc-so { display: flex; width: 100%; }

/* `min-width: 0` bat buoc: o so co be ngang toi thieu rieng cua trinh duyet,
 * khong co lai trong hang flex, va day nut + ra ngoai khung - chup ngay
 * 11/09/2026 thay nut + bi cat mat mot nua. */
body.woocommerce div.product form.cart .voc-cach-mua__o .voc-so input[type="number"] {
	flex: 1;
	width: auto;
	min-width: 0;
}

/* The mua mot lan: dong so luong gon, khong con khung 75px. */
.voc-cach-mua__so-luong {
	display: flex;
	align-items: center;
	gap: .75rem;
}

.voc-cach-mua__so-luong[hidden] { display: none; }

.voc-cach-mua__so-luong .quantity { margin: 0; }

/* ---- Hieu ung: re chuot va mo the ----
 * Chu dau tu ngay 11/09/2026: khung "thiếu hiệu ứng". Nhe va nhanh - day la
 * mot bieu mau mua hang, khong phai trang trinh dien.
 */
.voc-cach-mua__the,
.voc-tui__the,
.voc-cach-mua__khoang span,
.voc-dang__muc,
.voc-dang__mo {
	transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}

.voc-cach-mua__the:hover,
.voc-tui__the:not(.la-het-hang):hover,
.voc-cach-mua__khoang label:hover span,
.voc-dang__mo:hover {
	border-color: var(--wp--preset--color--chu-nhat);
}

.voc-cach-mua__khoang label:hover span { background: var(--wp--preset--color--nen); }

.voc-cach-mua__the:has(.voc-cach-mua__dau-the input:checked) {
	background: var(--wp--preset--color--nen-noi);
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--chu), 0 6px 18px rgba(56, 39, 31, .08);
}

.voc-cach-mua__chi-tiet:not([hidden]),
.voc-dang__ds:not([hidden]) {
	animation: voc-mo-ra .22s ease both;
}

/* So tong tien "nhay" nhe moi lan doi, de mat thay la no vua tinh lai. */
.voc-cach-mua__tong-so { animation: voc-mo-ra .22s ease both; }

@keyframes voc-mo-ra {
	from { opacity: 0; transform: translateY(-4px); }
	to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.voc-cach-mua__the,
	.voc-tui__the,
	.voc-cach-mua__khoang span,
	.voc-dang__muc,
	.voc-dang__mo,
	.voc-so,
	.voc-so__nut { transition: none; }

	.voc-cach-mua__chi-tiet:not([hidden]),
	.voc-dang__ds:not([hidden]),
	.voc-cach-mua__tong-so { animation: none; }
}

/* ---- O ghi chu cho tung mon ---- */
.voc-ghi-chu {
	display: flex;
	flex-direction: column;
	gap: .4rem;
	width: 100%;
	max-width: 36rem;
	box-sizing: border-box;
	margin: 0 0 var(--wp--preset--spacing--30, 1rem);
	padding: .85rem 1rem;
	border: 1px solid var(--wp--preset--color--vien);
	border-radius: 6px;
	background: var(--wp--preset--color--nen-noi);
	transition: border-color .18s ease;
}

.voc-ghi-chu:focus-within { border-color: var(--wp--preset--color--chu-nhat); }

.voc-ghi-chu__nhan {
	display: flex;
	align-items: center;
	gap: .5rem;
	font-weight: 700;
	color: var(--wp--preset--color--chu);
}

.voc-ghi-chu__hinh {
	flex: none;
	width: 1.25rem;
	height: 1.25rem;
	color: var(--wp--preset--color--chu-nhat);
}

.voc-ghi-chu__phu {
	font-weight: 400;
	color: var(--wp--preset--color--chu-nhat);
	font-size: var(--wp--preset--font-size--nho, .875rem);
}

/* Cao 4.2rem (~67px). Truoc 11/09/2026 o nay cao 100px - do
 * `.woocommerce form textarea` cua WooCommerce. Chu dau tu: "ô đó chiều cao
 * ngắn đi tầm 1/3". Can viet dai hon thi keo goc duoi.
 *
 * `form.cart` o dau bo chon: phai thang (0,1,2) cua WooCommerce. */
form.cart .voc-ghi-chu textarea,
form.cart .voc-qua textarea {
	width: 100%;
	min-height: 4.2rem;
	height: 4.2rem;
	box-sizing: border-box;
	resize: vertical;
}

/* ---- Gui lam qua (`QuaTangSanPham`) ----
 * Dong mac dinh chi la mot o tick - khach khong gui qua thi trang khong dai
 * them. Tick vao thi phan loi nhan mo ra ngay ben duoi, bang `:has()` chu khong
 * can JavaScript. */
.voc-qua {
	width: 100%;
	max-width: 36rem;
	box-sizing: border-box;
	margin: 0 0 .75rem;
	border: 1px solid var(--wp--preset--color--vien);
	border-radius: 6px;
	background: var(--wp--preset--color--nen-noi);
	transition: border-color .18s ease;
}

.voc-qua:has(.voc-qua__bat input:checked) { border-color: var(--wp--preset--color--chu-nhat); }

.voc-qua__bat {
	display: flex;
	align-items: center;
	gap: .6rem;
	min-height: 44px;
	padding: .35rem 1rem;
	font-weight: 700;
	color: var(--wp--preset--color--chu);
	cursor: pointer;
}

.voc-qua__bat input {
	flex: none;
	width: 1.125rem;
	height: 1.125rem;
	margin: 0;
	accent-color: var(--wp--preset--color--chinh);
	cursor: pointer;
}

.voc-qua__hinh {
	flex: none;
	width: 1.25rem;
	height: 1.25rem;
	color: var(--wp--preset--color--chu-nhat);
	transition: color .18s ease, transform .25s ease;
}

.voc-qua__bat:hover .voc-qua__hinh,
.voc-qua__bat input:checked ~ .voc-qua__hinh {
	color: var(--wp--preset--color--chinh);
}

.voc-qua__bat input:checked ~ .voc-qua__hinh { transform: rotate(-8deg); }

.voc-qua__mo {
	display: flex;
	flex-direction: column;
	gap: .4rem;
	padding: 0 1rem .85rem;
}

.voc-qua:not(:has(.voc-qua__bat input:checked)) .voc-qua__mo { display: none; }

.voc-qua:has(.voc-qua__bat input:checked) .voc-qua__mo { animation: voc-mo-ra .22s ease-out; }

.voc-qua__nhan {
	font-size: var(--wp--preset--font-size--nho-vua, .9375rem);
	font-weight: 600;
	color: var(--wp--preset--color--chu);
}

.voc-qua .voc-ghi-chu__dem {
	align-self: flex-end;
	color: var(--wp--preset--color--chu-nhat);
	font-size: .75rem;
}

@media (prefers-reduced-motion: reduce) {
	.voc-qua__hinh { transition: none; }
	.voc-qua:has(.voc-qua__bat input:checked) .voc-qua__mo { animation: none; }
}

.voc-ghi-chu__dem {
	align-self: flex-end;
	color: var(--wp--preset--color--chu-nhat);
	font-size: .75rem;
}

/* ---- Duoi nut mua: thanh toan an toan, VAT, danh muc, chia se ---- */
.voc-them {
	max-width: 36rem;
	margin-top: var(--wp--preset--spacing--30, 1rem);
}

/* Khung co tieu de nam DE LEN duong vien tren, nhu mau "Guaranteed Safe
 * Checkout". Nen cua tieu de phai trung nen trang de cat duong vien. */
.voc-an-toan {
	position: relative;
	margin: 1.25rem 0 1rem;
	padding: 1.35rem 1rem 1rem;
	border: 1px solid var(--wp--preset--color--vien);
	border-radius: 6px;
	text-align: center;
}

.voc-an-toan__tieu-de {
	position: absolute;
	top: 0;
	left: 50%;
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	margin: 0;
	padding: 0 .75rem;
	transform: translate(-50%, -50%);
	background: var(--wp--preset--color--nen);
	color: var(--wp--preset--color--chu);
	font-size: var(--wp--preset--font-size--nho-vua, .9375rem);
	font-weight: 700;
	white-space: nowrap;
}

.voc-an-toan__tieu-de svg {
	width: 1.05rem;
	height: 1.05rem;
	color: var(--wp--preset--color--chu-nhat);
}

.voc-an-toan__ds {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Mau thuong hieu Visa / Mastercard / PayPal nam trong SVG cua tung o: day la
 * dau hieu chap nhan thanh toan, phai dung mau goc moi nhan ra duoc. */
.voc-an-toan__the {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .35rem;
	min-width: 3.5rem;
	height: 2.25rem;
	padding: 0 .6rem;
	border: 1px solid var(--wp--preset--color--vien);
	border-radius: 4px;
	background: #FFFFFF;
	color: var(--wp--preset--color--chu);
	font-size: .8125rem;
	font-weight: 600;
}

.voc-an-toan__the svg {
	height: 1.1rem;
	width: auto;
	max-width: 3rem;
}

.voc-an-toan__the--chu svg {
	width: 1.1rem;
	color: var(--wp--preset--color--chu-nhat);
}

.voc-an-toan__phu {
	margin: .7rem 0 0;
	color: var(--wp--preset--color--chu-nhat);
	font-size: var(--wp--preset--font-size--nho, .875rem);
	line-height: 1.45;
}

.voc-them__vat {
	margin: 0 0 .4rem;
	font-size: var(--wp--preset--font-size--nho-vua, .9375rem);
	font-weight: 700;
}

.voc-them__danh-muc {
	margin: 0 0 .75rem;
	font-size: var(--wp--preset--font-size--nho-vua, .9375rem);
}

.voc-them__danh-muc > span:first-child,
.voc-them__mui { color: var(--wp--preset--color--chu-nhat); }

/* Mot duong "Cà phê VOC › Single Origin › Cội Nguồn" khong bi be doi giua mui
 * ten tren man hinh hep - be thi be ca duong xuong dong. */
.voc-them__duong { display: inline-block; }

.voc-chia-se {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem .75rem;
}

.voc-chia-se__nhan {
	color: var(--wp--preset--color--chu-nhat);
	font-size: var(--wp--preset--font-size--nho, .875rem);
}

.voc-chia-se__ds {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Vong tron vien 44px: vung cham du lon, hinh 18px o giua. */
.voc-chia-se__nut {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border: 1px solid var(--wp--preset--color--vien);
	border-radius: 999px;
	color: var(--wp--preset--color--chu-nhat);
	text-decoration: none;
	transition: border-color .18s ease, color .18s ease, background-color .18s ease;
}

.voc-chia-se__nut:hover,
.voc-chia-se__nut:focus-visible {
	border-color: var(--wp--preset--color--chu);
	background: var(--wp--preset--color--nen-noi);
	color: var(--wp--preset--color--chu);
}

.voc-chia-se__nut:focus-visible {
	outline: 2px solid var(--wp--preset--color--chinh);
	outline-offset: 2px;
}

.voc-chia-se__bao {
	color: var(--wp--preset--color--chu);
	font-size: var(--wp--preset--font-size--nho, .875rem);
}

/* ---- Dong sao danh gia duoi ten san pham ---- */
.voc-sao {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	margin: -.25rem 0 .75rem;
	color: var(--wp--preset--color--chu);
	font-size: var(--wp--preset--font-size--nho, .875rem);
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--vien);
	text-underline-offset: .2em;
}

.voc-sao:hover { color: var(--wp--preset--color--chinh); }

.voc-sao--trong { color: var(--wp--preset--color--chu-nhat); }

.voc-sao .star-rating { margin: 0; }

/* Form danh gia: nhan NAM TREN o nhap, nhu moi bieu mau khac cua site. Mac
 * dinh WooCommerce de nhan va o "Tên", "Email" chung mot dong, lech nhau. */
#review_form .comment-form-author,
#review_form .comment-form-email {
	display: flex;
	flex-direction: column;
	gap: .3rem;
	max-width: 24rem;
}

#review_form .comment-form-author input,
#review_form .comment-form-email input {
	width: 100%;
	box-sizing: border-box;
}

/* "Chúc mừng, bạn đã tiết kiệm được ..." - so tien tiet kiem la tien, nen do. */
.voc-cach-mua__tiet-kiem {
	flex-basis: 100%;
	margin-top: .4rem;
	padding: .5rem .75rem;
	border-radius: 4px;
	background: var(--wp--preset--color--chinh-nhat);
	color: var(--wp--preset--color--chu);
	font-size: var(--wp--preset--font-size--nho-vua, .9375rem);
}

.voc-cach-mua__tiet-kiem strong { color: var(--wp--preset--color--chinh); }

/* Chua du bac thap nhat: cung hinh thuc voi thong bao cua site (gach trai). */
.voc-cach-mua__tong-loi {
	flex-basis: 100%;
	padding: .5rem .75rem;
	border: 1px solid var(--wp--preset--color--vien);
	border-left: 4px solid var(--wp--preset--color--chinh);
	background: var(--wp--preset--color--nen);
	font-size: var(--wp--preset--font-size--nho, .875rem);
}

/* ---- Goi y pha che: luoi anh cong thuc ---- */
.voc-goi-y-pha {
	margin-block: var(--wp--preset--spacing--50, 3.5rem) 0;
	padding: var(--wp--preset--spacing--40, 2rem);
	border: 1px solid var(--wp--preset--color--vien);
	border-radius: 6px;
	background: var(--wp--preset--color--nen-noi);
}

.voc-goi-y-pha__tieu-de {
	margin: 0 0 var(--wp--preset--spacing--30, 1rem);
	font-size: var(--wp--preset--font-size--rat-lon, 2rem);
}

.voc-goi-y-pha__dan {
	position: relative;
	max-width: 40rem;
	margin: 0;
	padding: 0 0 0 3rem;
	border: 0;
	font-size: var(--wp--preset--font-size--lon, 1.25rem);
	line-height: 1.5;
}

.voc-goi-y-pha__dan::before {
	content: "“";
	position: absolute;
	top: -.35rem;
	left: 0;
	font-family: var(--wp--preset--font-family--tieu-de);
	font-size: 4rem;
	font-weight: 700;
	line-height: 1;
	color: var(--wp--preset--color--chu);
}

.voc-goi-y-pha__dan p { margin: 0; }

.voc-goi-y-pha__ds {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
	gap: var(--wp--preset--spacing--40, 2rem);
	margin-top: var(--wp--preset--spacing--40, 2rem);
	padding-top: var(--wp--preset--spacing--40, 2rem);
	border-top: 1px solid var(--wp--preset--color--vien);
}

.voc-goi-y-pha__cong-thuc { margin: 0; }

.voc-goi-y-pha__cong-thuc a {
	display: block;
	overflow: hidden;
	border: 1px solid var(--wp--preset--color--vien);
	border-radius: 4px;
	background: var(--wp--preset--color--nen);
}

.voc-goi-y-pha__anh {
	display: block;
	width: 100%;
	height: auto;
}

.voc-goi-y-pha__cong-thuc figcaption {
	margin-top: .6rem;
	font-weight: 700;
	text-align: center;
}

/* ---- Quy trinh dat truoc ---- */
.voc-quy-trinh {
	margin-block: var(--wp--preset--spacing--50, 3.5rem) 0;
	text-align: center;
}

.voc-vung-quy-trinh .voc-quy-trinh { margin-block: 0; }

.voc-quy-trinh__tieu-de {
	margin: 0;
	font-size: var(--wp--preset--font-size--rat-lon, 2rem);
}

.voc-quy-trinh__phu {
	margin: .5rem 0 0;
	color: var(--wp--preset--color--chu-nhat);
	font-size: var(--wp--preset--font-size--lon, 1.25rem);
}

.voc-quy-trinh__buoc {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--40, 2rem);
	margin: var(--wp--preset--spacing--40, 2rem) 0 0;
	padding: 0;
	list-style: none;
}

.voc-quy-trinh__buoc li {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.voc-quy-trinh__so {
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 999px;
	background: var(--wp--preset--color--be);
	color: var(--wp--preset--color--chu);
	font-family: var(--wp--preset--font-family--tieu-de);
	font-size: 1.25rem;
	font-weight: 700;
}

.voc-quy-trinh__buoc h3 {
	margin: .9rem 0 .4rem;
	font-size: var(--wp--preset--font-size--thuong-lon, 1.0625rem);
}

.voc-quy-trinh__buoc p {
	margin: 0;
	max-width: 17rem;
	color: var(--wp--preset--color--chu-nhat);
	font-size: var(--wp--preset--font-size--nho-vua, .9375rem);
	line-height: 1.5;
}

/* Mui ten cong noi buoc nay sang buoc sau, nam giua hai so tron. Nau nhat,
 * khong do: day la net trang tri, ma DESIGN.md cam do cho trang tri. */
.voc-quy-trinh__mui-ten {
	position: absolute;
	top: .35rem;
	left: calc(50% + 2.25rem);
	width: calc(100% - 4.5rem + var(--wp--preset--spacing--40, 2rem));
	height: 2rem;
	fill: none;
	stroke: var(--wp--preset--color--chu-nhat);
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	overflow: visible;
}

.voc-quy-trinh__nut { margin: var(--wp--preset--spacing--40, 2rem) 0 0; }

.voc-quy-trinh__nut .wp-element-button {
	display: inline-block;
	text-decoration: none;
}

@media (max-width: 800px) {
	.voc-quy-trinh__buoc { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.voc-quy-trinh__mui-ten { display: none; }
}

@media (max-width: 480px) {
	.voc-quy-trinh__buoc { grid-template-columns: 1fr; }
}

/*
 * ANH THU HAI KHI RE CHUOT (the san pham)
 *
 * `Wp\AnhThuHai` chen anh dau tien trong thu vien anh vao cung duong dan voi
 * anh chinh. Anh do nam de len anh chinh, trong suot cho toi khi re chuot.
 * Nen trang: anh PNG tach nen se de lo anh chinh ben duoi neu nen trong suot.
 */
.wc-block-components-product-image.voc-co-anh-thu-hai > a {
	position: relative;
	display: block;
}

.wp-block-woocommerce-product-template li.wc-block-product .voc-co-anh-thu-hai .voc-anh-thu-hai {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-height: none;
	object-fit: contain;
	background: var(--wp--preset--color--nen-noi);
	opacity: 0;
	transition: opacity .3s ease;
}

.wp-block-woocommerce-product-template li.wc-block-product:hover .voc-co-anh-thu-hai .voc-anh-thu-hai,
.wp-block-woocommerce-product-template li.wc-block-product:focus-within .voc-co-anh-thu-hai .voc-anh-thu-hai {
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.voc-dang__mui,
	.wp-block-woocommerce-product-template li.wc-block-product .voc-co-anh-thu-hai .voc-anh-thu-hai {
		transition: none;
	}
}

/*
 * HET HANG - PHAI NHIN LA BIET, KHONG PHAI DOC MOI BIET
 *
 * Kho VOC dang co 78 tren 109 san pham het hang. Truoc day the san pham het
 * hang trong y het the con hang: cung anh ro net, cung nut mau do. Chu tren nut
 * la "Doc tiep" - chu cua the gioi blog, khach mua ca phe khong hieu.
 *
 * Chua hai lop: chu tren nut do PHP doi (lop Wp\NutMuaHang), con hinh thuc cua
 * the do phan nay lo. WooCommerce da gan san lop `outofstock` len the `li`,
 * khong can them markup.
 */
li.wc-block-product.outofstock .wc-block-components-product-image {
	position: relative;
}

/*
 * KHONG lam mo anh hang het.
 *
 * Da thu opacity .55 + grayscale roi chup lai: 78 tren 109 san pham het hang
 * nen gan nhu CA trang danh muc bi lam mo cung luc - nhin ra mot cua hang chet,
 * khong phai mot cua hang tam het vai mon. Nhan goc anh va nut vien da du noi.
 */

/*
 * Nhan goc tren PHAI. Nhan giam gia da chiem goc tren TRAI - dat chung mot goc
 * thi hai nhan de len nhau tren san pham vua giam gia vua het hang.
 */
li.wc-block-product.outofstock .wc-block-components-product-image::after {
	content: "Hết hàng";
	position: absolute;
	top: 16px;
	right: 16px;
	z-index: 2;
	padding: 3px 8px;
	border-radius: 4px;
	background: var(--wp--preset--color--chu-nhat);
	color: var(--wp--preset--color--nen-noi);
	font-size: var(--wp--preset--font-size--nho, 0.875rem);
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: .02em;
}

/* Gia van hien - khach can biet gia de canh hang, ke ca khi chua mua duoc. */
li.wc-block-product.outofstock .wc-block-components-product-price {
	color: var(--wp--preset--color--chu-nhat);
}

/*
 * Nut vien thay vi nut dac: van bam duoc (dan sang trang chi tiet) nhung khong
 * moi goi nhu nut mua. Khong dung thuoc tinh `disabled` - nut nay VAN la mot
 * duong dan hop le.
 */
li.wc-block-product.outofstock .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--chu-nhat);
	border: 1px solid var(--wp--preset--color--vien);
}

li.wc-block-product.outofstock .wp-block-button__link:hover,
li.wc-block-product.outofstock .wp-block-button__link:focus-visible {
	background: var(--wp--preset--color--nen);
	color: var(--wp--preset--color--chu);
	border-color: var(--wp--preset--color--be);
}

/*
 * O tim kiem: chu goi y phai doc HET.
 *
 * Ban truoc o rong 190px, tru 12px dem va 40px nut tim ben trong thi chi con
 * 138px cho chu - "Tim san pham" bi cat cut thanh "Tim san pha". Chua bang hai
 * viec: noi o ra 230px (dau trang con thua cho o 1440px) va ha co chu goi y.
 */
.voc-cong-cu .wp-block-search__input {
	font-size: var(--wp--preset--font-size--nho, 0.875rem);
	text-overflow: ellipsis;
}

/*
 * TRANG CHI TIET: BAO HET HANG CHO RA MOT LOI BAO
 *
 * WooCommerce in "Het hang" thanh mot doan van tran, khong khung khong mau,
 * nam lot thom giua mo ta va khoang trong - doc luot qua khong thay. Voi
 * 78/109 mat hang dang het, day la dong chu khach can doc nhat trang.
 */
.woocommerce div.product p.stock.out-of-stock {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	margin-block: var(--wp--preset--spacing--30, 1rem);
	padding: .7rem 1.1rem;
	border: 1px solid var(--wp--preset--color--vien);
	border-inline-start: 4px solid var(--wp--preset--color--chu-nhat);
	border-radius: 4px;
	background: var(--wp--preset--color--nen);
	color: var(--wp--preset--color--chu);
	font-size: var(--wp--preset--font-size--thuong, 1rem);
	font-weight: 600;
}

.woocommerce div.product p.stock.in-stock {
	color: var(--wp--preset--color--chinh);
	font-weight: 600;
}

/*
 * Anh phu: mot luoi deu, khong phai mot hang cao thap.
 *
 * Anh phu cua nha cung cap moi cai mot ty le (bang thong so thi rat ngang, anh
 * may thi vuong). De WooCommerce tu xep thi hang duoi thut vao mot cach ngau
 * nhien, nhin nhu trang bi vo. Ep tat ca ve o vuong bang nhau.
 *
 * Ten lop lap bon lan la CO Y. Luat cua WooCommerce la
 * `.woocommerce div.product div.images .flex-control-thumbs li { width: 25% }`
 * - bon ten lop VA ba ten the, manh hon moi cach viet thong thuong. Trong luoi,
 * 25% do khong con tinh tren ca hang ma tinh tren O LUOI 94px, ra 23px: anh phu
 * teo lai bang dau ngon tay.
 *
 * Lap ba lan VAN THUA (4 lop + 1 the < 4 lop + 3 the) - da chup man hinh moi
 * biet, doc CSS thi tuong da xong. Phai lap den lan thu tu.
 */
.wp-block-woocommerce-product-image-gallery .flex-control-thumbs.flex-control-thumbs.flex-control-thumbs.flex-control-thumbs {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 10px;
	margin: 10px 0 0;
	padding: 0;
	list-style: none;
	float: none;
}

.wp-block-woocommerce-product-image-gallery .flex-control-thumbs.flex-control-thumbs.flex-control-thumbs.flex-control-thumbs li {
	width: 100%;
	margin: 0;
	float: none;
}

.wp-block-woocommerce-product-image-gallery .flex-control-thumbs.flex-control-thumbs.flex-control-thumbs.flex-control-thumbs img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: contain;
	background: var(--wp--preset--color--nen-noi);
	border: 1px solid var(--wp--preset--color--vien);
	border-radius: 4px;
	opacity: .65;
	transition: opacity .2s ease, border-color .2s ease;
}

.wp-block-woocommerce-product-image-gallery .flex-control-thumbs.flex-control-thumbs.flex-control-thumbs.flex-control-thumbs img.flex-active,
.wp-block-woocommerce-product-image-gallery .flex-control-thumbs.flex-control-thumbs.flex-control-thumbs.flex-control-thumbs img:hover {
	opacity: 1;
	border-color: var(--wp--preset--color--be);
}

/*
 * =====================================================================
 * KHOI BANG CHUNG GIONG
 * =====================================================================
 *
 * Khoi nay dat ngay duoi tam mo dau vi no la ly do khach chon VOC thay vi mot
 * xuong rang bat ky. Hinh thuc phai la HO SO, khong phai quang cao: chu nau
 * tren nen be, khong anh, khong mau do. Do la giong cua mot to giay to.
 */
.voc-bang-chung .voc-bang-chung__mao {
	margin-block-end: var(--wp--preset--spacing--20, 0.5rem);
}

.voc-bang-chung h2 {
	margin-block-start: 0;
}

/* Hai giong nam trong khung vien mong: doc ra la mot bang tra, khong phai van xuoi. */
.voc-giong {
	margin-block-start: var(--wp--preset--spacing--40, 2rem);
	border-top: 1px solid var(--wp--preset--color--vien);
}

.voc-giong__muc {
	padding-block: var(--wp--preset--spacing--30, 1rem);
	border-bottom: 1px solid var(--wp--preset--color--vien);
}

.voc-giong__muc h3 {
	margin: 0 0 0.25rem;
}

.voc-giong__muc p {
	margin: 0;
}

/*
 * Cho con thieu ho so that.
 *
 * PHAI nhin ra ngay la cho trong, khong duoc trong giong noi dung da xong -
 * neu no lan vao nhu chu thuong thi mot ngay nao do se len song that. Vien dut
 * va chu nghieng lam viec do ma khong can mau canh bao.
 */
.voc-giong__thieu {
	display: inline-block;
	margin-block-start: 0.4rem;
	padding: 0.15rem 0.5rem;
	border: 1px dashed var(--wp--preset--color--vien);
	border-radius: 4px;
	color: var(--wp--preset--color--chu-nhat);
	font-style: italic;
}

/*
 * Dai chung nhan: nam ten xep doc, moi ten mot dong co vach ngan.
 *
 * Khong dung logo: chua co tep logo goc do co quan cap phat cung cap, ma logo
 * tu ve lai la bia chung nhan. Chu nau tren nen be van doc duoc va van dung.
 */
.voc-dai-chung-nhan {
	margin-block: var(--wp--preset--spacing--20, 0.5rem) var(--wp--preset--spacing--30, 1rem);
	border-top: 1px solid var(--wp--preset--color--vien);
}

.voc-dai-chung-nhan p {
	margin: 0;
	padding-block: 0.6rem;
	border-bottom: 1px solid var(--wp--preset--color--vien);
	font-weight: 600;
	letter-spacing: 0.02em;
}

@media (max-width: 782px) {
	/* Hai cot chong len nhau: dai chung nhan can khoang tho o tren. */
	.voc-bang-chung .wp-block-column + .wp-block-column {
		margin-block-start: var(--wp--preset--spacing--40, 2rem);
	}
}

/*
 * =====================================================================
 * DAI O DANH MUC: TAT TREN DIEN THOAI
 * =====================================================================
 *
 * Do ngay 31/08/2026 o 375px: dai nam o cao 1.270px va cho dung nam tu. Ngay
 * duoi no la thanh tab lap lai DUNG nam muc do, bam duoc, va khong ton cho.
 * Tren man hinh rong thi nam o nam mot hang nen re; tren dien thoai chung xep
 * doc thanh mot cai gia phai cuon qua truoc khi thay bat cu mon hang nao.
 *
 * Giu lai tren man hinh rong, tat tren dien thoai.
 */
@media (max-width: 700px) {
	.voc-vung-o-danh-muc { display: none; }
}

/*
 * =====================================================================
 * DAU TRANG TREN DIEN THOAI
 * =====================================================================
 *
 * Do ngay 31/08/2026 o 375x812: dau trang cao 152px - gan mot phan nam man
 * hinh, va vi no dinh (`position: sticky`) nen khach mat chung do suot ca
 * phien. Nguyen nhan: logo 150px + nut menu khong vua mot hang voi o tim kiem
 * 230px, nen cong cu roi xuong hang thu hai; hai hang deu de rong rai.
 *
 * KHONG bo o tim kiem de lam gon. Kho co 109 san pham va menu la duong duy
 * nhat toi 18 danh muc - tim kiem la loi tat that su, bo di la doi mot con so
 * dep lay mot buoc dai hon cho khach. Thay vao do bop dem va thu logo.
 */
@media (max-width: 700px) {
	.voc-dau-trang {
		padding-block: var(--wp--preset--spacing--20, 0.5rem);
	}

	.voc-dau-trang > .wp-block-group {
		row-gap: 0.5rem;
	}

	/* Logo nho lai vua du doc, nhuong be ngang cho o tim kiem. */
	.voc-dau-trang .wp-block-site-logo img {
		width: 104px;
		height: auto;
	}

	/* O tim kiem gian het hang thu hai thay vi giu 230px cung. */
	.voc-cong-cu {
		flex: 1 1 100%;
		justify-content: space-between;
	}

	.voc-cong-cu .wp-block-search {
		flex: 1 1 auto;
		min-width: 0;
	}

	.voc-cong-cu .wp-block-search__inside-wrapper {
		width: 100%;
	}
}

/*
 * =====================================================================
 * NUT LIEN HE NOI: THOI CHE NUT MUA
 * =====================================================================
 *
 * Ghi chu cu noi nut duoc "dat truoc phan chan trang trong luong doc de khong
 * che nut mua" - sai: `position: fixed` go phan tu ra khoi luong doc, nen tren
 * dien thoai no do dung len nut "Them vao gio" cua the san pham.
 *
 * DA THU DAT BEN TRAI, do lai thay te hon: vong tron de len dung thanh tab
 * chon dong ca phe, va thanh tab thi cuon ngang nen khach khong the day noi
 * dung ra khoi cho bi che. Ben phai thi chi de len mot phan nut cua the cot
 * phai, ma the do van con anh va ten bam duoc.
 *
 * Nen: giu ben phai, thu tu nut pill xuong vong tron 48px. Chu thay bang bieu
 * tuong vi 48px khong du cho chu "Lien he"; ten day du van o `aria-label`.
 */
@media (max-width: 700px) {
	.voc-lien-he-noi {
		right: 12px;
		bottom: 12px;
		gap: 10px;
	}

	/*
	 * Tu 10/09/2026 nut da la vong tron 48px o MOI kich thuoc man hinh, nen
	 * khoi nay khong con phai thu nho gi - chi con nhich khoang cach.
	 * Bieu tuong emoji cu (☎ 💬 ✉) da duoc thay bang hinh SVG trong
	 * `functions.php`: emoji moi he dieu hanh ve mot kieu, va tren Windows thi
	 * ☎ ra mot cai may ban den xi.
	 */
	.voc-lien-he-noi__nut { box-shadow: 0 2px 8px rgba(56, 39, 31, .3); }
}


/*
 * =====================================================================
 * VUNG CHAM 44px
 * =====================================================================
 *
 * Do ngay 31/08/2026 o 375px: 38 tren 99 phan tu bam duoc dang hien co canh
 * duoi 44px. Phan lon la ba loai duoi day. Cac phan con lai la lien ket chu
 * chay trong doan van, noi ma vung cham 44px se lam vo dong chu.
 */

/* Nut tim kiem trong o (40x40 -> 44x44): da sua thang tai luat goc cua no. */

/*
 * THE DICH VU - anh tren, ten de len anh, chu can giua.
 *
 * Chu dau tu chi vao mau goc cua hello5 ngay 10/09/2026 va yeu cau lam giong.
 * Bo cuc cua mau do: anh chiem phan tren, mot dai nen sang mang ten dich vu
 * de LEN day anh, roi phan chu can giua ben duoi.
 *
 * Dai ten nam de len anh bang `margin-block-start` am chu khong bang
 * `position: absolute`: dai nay cao theo do dai cua ten (mot dong hay hai dong)
 * va bon the phai deu nhau. Voi absolute, dai hai dong se trum sau hon vao anh
 * cua rieng no, va bon the lech nhau ngay.
 */
.voc-dich-vu {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.voc-dich-vu__anh {
	margin: 0;
}

.voc-dich-vu__anh img {
	display: block;
	width: 100%;
	height: 210px;
	object-fit: cover;
}

.voc-dich-vu__than {
	flex: 1;
	display: flex;
	flex-direction: column;
	/* Dai ten de len anh bao nhieu thi keo ca than len bay nhieu. */
	margin-block-start: -2.25rem;
	padding-inline: var(--wp--preset--spacing--30, 1rem);
	padding-block-end: var(--wp--preset--spacing--30, 1rem);
}

.voc-dich-vu__ten {
	margin: 0 auto var(--wp--preset--spacing--30, 1rem);
	padding: .75rem 1.25rem;
	background: var(--wp--preset--color--nen-noi);
	/*
	 * Nau, khong do. Mau hello5 dung do o day, nhung ten dich vu khong phai gia
	 * cung khong phai nut mua - "Luat do thuoc ve tien" trong DESIGN.md. Bon dai
	 * do ngay tren hang the san pham lam gia do mat suc keo. Doi 11/09/2026 sau
	 * audit giao dien; bo cuc cua hello5 giu nguyen.
	 */
	color: var(--wp--preset--color--chu);
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
}

.voc-dich-vu__than p { margin-block: 0 var(--wp--preset--spacing--20, .5rem); }

/* Day duong dan xuong day the de bon the co mot duong chan chung. */
.voc-dich-vu__than p:last-child { margin-block-start: auto; margin-block-end: 0; }

/*
 * "Tim hieu them" trong the dich vu: chu cao 18px, khong co dem nao.
 * Them dem doc de vung cham dat 44px ma dong chu khong xe ra.
 */
.voc-dich-vu a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

/*
 * Cot cua khoi Columns khong tu cao bang nhau khi ben trong la mot the.
 *
 * Khong co luat nay thi `height: 100%` cua `.voc-dich-vu` khong bam vao dau, va
 * duong chan chung o tren thanh vo nghia.
 */
.voc-dich-vu-hang > .wp-block-column { display: flex; }

/*
 * Dai anh nha may duoi khoi bang chung.
 *
 * Chieu cao chot cung + `object-fit: cover`: tep anh o day se do nguoi trong
 * nha thay, va anh dien thoai chup doc thi khong cat se cao ca man hinh.
 */
.voc-bang-chung__anh {
	margin-block: var(--wp--preset--spacing--40, 2rem) 0;
}

.voc-bang-chung__anh img {
	display: block;
	width: 100%;
	height: 320px;
	object-fit: cover;
}

@media (max-width: 700px) {
	.voc-bang-chung__anh img { height: 200px; }
}

/*
 * Khoi bang chung tren dien thoai: nen lai con hai phan ba.
 *
 * Do ngay 31/08/2026 o 375px: khoi cao 1.094px, trong do rieng dai chung nhan
 * xep doc chiem 218px de chua nam tu ngan. Tren man hinh hep thi nam ten do
 * nen nam ngang thanh mot day the, xuong dong tu do.
 */
@media (max-width: 700px) {
	.voc-dai-chung-nhan {
		display: flex;
		flex-wrap: wrap;
		gap: 0.4rem;
		border-top: 0;
	}

	.voc-dai-chung-nhan p {
		padding: 0.3rem 0.7rem;
		border: 1px solid var(--wp--preset--color--vien);
		border-radius: 4px;
		background: var(--wp--preset--color--nen-noi);
		font-size: var(--wp--preset--font-size--nho, 0.875rem);
	}

	.voc-giong__muc {
		padding-block: 0.7rem;
	}
}

/*
 * Hai vung cham con thieu vai pixel, do ngay 31/08/2026 o 375px.
 *
 * Nut "Them vao gio" ra 127x42: thieu dung 2px. Nguyen nhan la dem cua nut lay
 * tu theme.json (0.75rem tren duoi) cong voi mot dong chu 1rem - khong ai nhin
 * ra duoc bang mat, chi thuoc do moi thay.
 */
li.wc-block-product .wp-block-button__link {
	min-height: 44px;
}

/* Logo ra 104x38 sau khi thu nho cho dien thoai; nang vung cham chu khong nang anh. */
.voc-dau-trang .custom-logo-link {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

/*
 * CON LAI 28 LIEN KET DUOI 44px - CO Y DE NGUYEN
 *
 * Do la ten san pham tren the (110x22). Khong nang chung len 44px vi:
 * anh san pham ngay phia tren la mot lien ket DEN CUNG MOT TRANG va da rong
 * gan het the - tieu chi 2.5.8 cua WCAG mien cho truong hop co san mot dich
 * tuong duong du lon. Nhoi them dem doc vao ten se day gia va nut xuong ma
 * khong cho khach them cho nao de cham.
 */

/*
 * =====================================================================
 * DAU TRANG: DAI KHO HEP 1100-1360px
 * =====================================================================
 *
 * Do ngay 31/08/2026 o 1200px: menu can 656px cho mot hang nhung chi con
 * 596px, nen no xuong hai hang va muc "Lien he" bi bo lai mot minh o hang duoi,
 * can giua - nhin ra mot cai menu bi gay chu khong phai mot cai menu hai hang.
 * Dau trang phinh tu 64px len 94px.
 *
 * Luat `flex-wrap: nowrap` o tren chi cam BA khoi con (logo / menu / cong cu)
 * xuong hang; no khong cam ban than menu xuong hang ben trong.
 *
 * KHONG thu o tim kiem de lay cho. O rong 230px, tru dem va nut thi con 158px
 * cho chu - vua du "Tim san pham". Thu xuong 200px la chu bi cat, dung loi da
 * ghi o phan o tim kiem ben duoi. Doi mot cai menu gay lay mot o tim kiem cut
 * la doi ngang gia.
 *
 * Lay cho tu khoang cach giua cac muc: 1.1rem xuong 0.65rem tren chin khe la
 * du 60px thieu. Duoi 1100px menu chuyen sang dang thu gon nen dai nay ket
 * thuc o do.
 */
@media (min-width: 1240px) and (max-width: 1360px) {
	.voc-menu .wp-block-navigation__container {
		column-gap: 0.65rem;
	}
}

/*
 * =====================================================================
 * DUOI 1240px: MENU CHUYEN SANG DANG THU GON
 * =====================================================================
 *
 * Do ngay 31/08/2026: menu ngang can 606px cho mot hang (tam muc, khoang cach
 * da bop con 0.65rem). O 1250px thi vua; o 1200px chi con 598px va o 1100px chi
 * con 518px - muc "Lien he" roi xuong hang duoi mot minh, dau trang phinh tu
 * 82px len 94px, va vi dau trang dinh nen khach mat chung do suot ca phien.
 *
 * DA THU va bo: bop o tim kiem tu 230px xuong 200px. O 230px con dung 158px cho
 * chu, vua khit "Tim san pham"; xuong 200px la chu bi cat - dung loi da ghi o
 * phan o tim kiem. Doi mot menu gay lay mot o tim kiem cut la doi ngang gia.
 *
 * Ghi chu cu o phan dau trang noi "duoi 1100px thi menu chuyen sang dang thu
 * gon" - dieu do KHONG dung: WordPress chi thu gon duoi 600px. Ca dai
 * 600-1240px xua nay deu dang chay menu ngang bi chen. Day la cho chua that su.
 *
 * Nguong 1240px chon theo may that: 1280 / 1366 / 1440 / 1536 deu giu menu
 * ngang; iPad ngang 1024 va cac khung hep hon dung dang thu gon - o do la man
 * hinh cham, dang thu gon von la cai quen thuoc hon.
 */
@media (min-width: 600px) and (max-width: 1239px) {
	.voc-menu .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	.voc-menu .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}

	.voc-menu .wp-block-navigation__responsive-container-close:not(.always-shown) {
		display: flex;
	}

	/* Nut thu gon dung sat logo. De nguyen thi no troi giua dau trang. */
	.voc-dau-trang .voc-menu {
		margin-inline-end: auto;
	}
}

/*
 * =====================================================================
 * MENU THU GON - DAY LA MENU CHINH TREN MOI DIEN THOAI
 * =====================================================================
 *
 * Kiem ngay 31/08/2026 o 375px: lop phu mac dinh cua WordPress dang duoc dung
 * nguyen ban, va no hong o bon cho:
 *
 * 1. Chu lien ket la DEN THUAN `rgb(0,0,0)`. DESIGN.md co "Luat khong co den" -
 *    ca bang mau khong dung mot diem den nao, ke ca trong bong do. Cho vi pham
 *    lai la mat bang dieu huong duoc dung nhieu nhat.
 * 2. Hon hai muoi muc deu can giua. Danh sach dai can giua thi mat trai rang
 *    cua, khong luot bang mat duoc.
 * 3. Ba cap menu (Ca phe > May pha > Winci) nhin gan nhu giong het nhau, chi
 *    khac dam nhat. Khong ra duoc cai nao thuoc cai nao.
 * 4. Khong co vach ngan, khong co gi cua VOC trong do - mo ra la mot tam trang.
 */
.voc-menu .wp-block-navigation__responsive-container.is-menu-open {
	background: var(--wp--preset--color--nen-noi);
	color: var(--wp--preset--color--chu);

	/*
	 * Dem goc cua WordPress la `clamp(1rem, 20vw, 8rem)` - tren dien thoai
	 * 375px thi 20vw = 75px le trai, an gan mot phan nam be ngang de lay cho
	 * cho khoang trang. Danh sach dieu huong khong can khoang tho kieu do; no
	 * can chieu ngang de ten danh muc dai khong xuong dong.
	 */
	padding: 1.25rem 0 2rem;
}

/*
 * Cot noi dung gioi han 480px va can giua khung.
 *
 * Tren dien thoai no phu het be ngang. Tren khung rong (dai 600-1240px, noi
 * menu cung o dang thu gon) mot cot 480px can giua doc ra la co chu y, thay vi
 * mot day chu deo sat le trai giua tam trang menh mong.
 */
.voc-menu .wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation__responsive-container-content {
	width: 100%;
	max-width: 480px;
	margin-inline: auto;
	padding-inline: 1.25rem;

	/*
	 * Dem tren goc la 56px, cong voi dem cua lop phu va chieu cao nut dong thi
	 * mat 172px truoc muc dau tien - gan mot phan tu man hinh de trong tren mot
	 * danh sach da phai cuon.
	 */
	padding-block-start: 1.5rem;
	padding-block-end: 2rem;
}

/*
 * Lop `items-justified-center` den tu thiet lap "can giua" cua khoi Navigation,
 * dung cho menu NGANG tren may tinh. Trong lop phu no lam danh sach co lai
 * dung be chu (212px tren khung 375px) roi day vao giua - do la vi sao moi muc
 * deu thut vao 81px. Ep gian het be ngang khi dang o dang lop phu.
 */
.voc-menu .wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation__responsive-container-content {
	align-items: stretch;
}

.voc-menu .wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation__container.is-responsive {
	width: 100%;
	align-items: stretch;
	gap: 0;
}

/* Moi muc la mot hang tran be ngang: vung cham rong het cot, khong phai be chu. */
.voc-menu .wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation-item__content {
	display: flex;
	align-items: center;
	min-height: 44px;
	width: 100%;
	color: var(--wp--preset--color--chu);
	text-align: left;
}

/*
 * Muc con co dem 1rem hai ben (luat bang xo o tren). Khong co dong nay thi
 * `width: 100%` CONG them 32px dem, lien ket tran ra ngoai roi bi can giua -
 * "Phụ kiện" lech trai 16px so voi "Cà phê" ngay canh. Chi ap cho muc con:
 * cap mot giu nguyen chieu cao hang cu.
 */
.voc-menu .wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	box-sizing: border-box;
}

/* Cap mot: dam, co vach ngan - day la xuong song cua menu. */
.voc-menu .wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation__container.is-responsive > .wp-block-navigation-item {
	align-items: stretch;
	width: 100%;
	border-bottom: 1px solid var(--wp--preset--color--vien);
}

.voc-menu .wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation__container.is-responsive > .wp-block-navigation-item > .wp-block-navigation-item__content {
	font-size: 1.0625rem;
	font-weight: 600;
}

/*
 * Cap hai va cap ba: nhat dan va thut vao dan.
 *
 * Thut le lam bang `border-left` chu khong phai `padding` don thuan: vach be
 * chay doc theo nhom con cho thay chung thuoc ve muc ben tren, thu ma khoang
 * trang khong noi duoc.
 */
/*
 * Lap `.is-menu-open` hai lan de thang luat `border: none` cua WordPress cho
 * lop phu. Do dac hieu bang nhau thi luat nao khai bao sau se thang, ma thu tu
 * nap CSS cua WordPress khong chac chan - lap ten lop la cach duy nhat chac.
 *
 * Dem goc cua WordPress la `24px 32px 0`: 24px tren lam nhom con roi hang khoi
 * muc cha, 32px trai cong voi phan thut cua rieng minh thanh gan 50px. Nen lai.
 */
.voc-menu .wp-block-navigation__responsive-container.is-menu-open.is-menu-open
.wp-block-navigation__submenu-container {
	padding: 0.25rem 0 0.5rem;
	margin-inline-start: 0.35rem;
	border-left: 1px solid var(--wp--preset--color--be);
	border-radius: 0;
	background: transparent;
}

.voc-menu .wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding-inline-start: 1rem;
	font-size: 0.9375rem;
	font-weight: 400;
	color: var(--wp--preset--color--chu-nhat);
}

/*
 * Tang ba tro xuong: vach be dat thang duoi dau chu cua muc cha, nen nhin la
 * biet nhom nao thuoc muc nao. Truoc 11/09/2026 thut bang dem trai 1.75rem,
 * vach lai dung sat le - ba tang chi con khac nhau vai pixel.
 */
.voc-menu .wp-block-navigation__responsive-container.is-menu-open.is-menu-open
.wp-block-navigation__submenu-container .wp-block-navigation__submenu-container {
	margin-inline-start: 1rem;
}

.voc-menu .wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation__submenu-container .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	font-size: 0.875rem;
}

.voc-menu .wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation-item__content:hover,
.voc-menu .wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation-item__content:focus-visible {
	color: var(--wp--preset--color--chinh);
}

/*
 * NHANH XO RA / THU LAI TRONG LOP PHU
 *
 * Chu dau tu ngay 11/09/2026: "phân ô dạng ấn thả chứ đừng hiện hết". Truoc do
 * lop phu bay ca cay danh muc - khach phai cuon qua hon hai muoi dong moi toi
 * "Tin tức". Bay gio moi nhanh co con gap lai, bam mui ten ben phai de mo.
 * Trang thai do `assets/js/menu-dien-thoai.js` giu bang lop `voc-mo`.
 *
 * Chu cua nhanh VAN la lien ket (sang trang danh muc), mui ten moi la nut xo.
 * Tach hai viec ra thi khach muon vao thang "Cà phê" khong phai qua mot buoc.
 *
 * Moi nhanh la luoi hai cot: chu | nut 44px. Danh sach con chiem ca hai cot o
 * hang duoi. WordPress dung flex doc cho the <li> nen phai doi han sang grid.
 */
.voc-menu .wp-block-navigation__responsive-container.is-menu-open.is-menu-open
.wp-block-navigation-item.has-child {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 44px;
	align-items: center;
}

/*
 * Dat tung o vao dung cot. De tu xep thi lien ket (`width: 100%` o tren) tran
 * sang cot nut 13px va de len nut: bam mui ten "Cà phê" lai mo trang Cà phê.
 */
.voc-menu .wp-block-navigation__responsive-container.is-menu-open.is-menu-open
.wp-block-navigation-item.has-child > .wp-block-navigation-item__content {
	grid-column: 1;
	grid-row: 1;
	width: auto;
	min-width: 0;
}

.voc-menu .wp-block-navigation__responsive-container.is-menu-open.is-menu-open
.wp-block-navigation-item.has-child > .wp-block-navigation-submenu__toggle {
	grid-column: 2;
	grid-row: 1;
}

.voc-menu .wp-block-navigation__responsive-container.is-menu-open.is-menu-open
.wp-block-navigation-item.has-child > .wp-block-navigation__submenu-container {
	grid-column: 1 / -1;
	grid-row: 2;
}

/* Gach chan moc ra khi ro chuot la cua menu ngang; trong lop phu cham vao la no dinh lai. */
.voc-menu .wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation-item__content::after {
	display: none;
}

/* Gap: go khoi luong doc luon, de ban phim va trinh doc man hinh cung bo qua. */
.voc-menu .wp-block-navigation__responsive-container.is-menu-open.is-menu-open
.wp-block-navigation-item.has-child:not(.voc-mo):not(.voc-dang-dong) > .wp-block-navigation__submenu-container {
	display: none;
}

.voc-menu .wp-block-navigation__responsive-container.is-menu-open.is-menu-open
.wp-block-navigation-submenu__toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin: 0;
	padding: 0;
	border-radius: 50%;
	color: var(--wp--preset--color--chu-nhat);
	cursor: pointer;
	transition: background-color .16s ease, color .16s ease;
}

.voc-menu .wp-block-navigation__responsive-container.is-menu-open.is-menu-open
.wp-block-navigation-submenu__toggle svg {
	width: 14px;
	height: 14px;
	margin: 0;
	stroke: currentColor;

	/*
	 * WordPress lat mui ten theo `aria-expanded`, ma trong lop phu no coi moi
	 * nhanh la dang mo - mui ten nao cung chi len. Huong mui ten o day chi theo
	 * lop `voc-mo`.
	 */
	transform: none;
	transition: transform .28s cubic-bezier(.2, .7, .2, 1);
}

.voc-menu .wp-block-navigation__responsive-container.is-menu-open.is-menu-open
.wp-block-navigation-submenu__toggle:hover,
.voc-menu .wp-block-navigation__responsive-container.is-menu-open.is-menu-open
.wp-block-navigation-submenu__toggle:focus-visible {
	background: var(--wp--preset--color--nen);
	color: var(--wp--preset--color--chinh);
}

/* Dang mo: mui ten lat nguoc, chu nhanh doi sang mau chinh de biet dang o dau. */
.voc-menu .wp-block-navigation__responsive-container.is-menu-open.is-menu-open
.voc-mo > .wp-block-navigation-submenu__toggle {
	color: var(--wp--preset--color--chinh);
}

.voc-menu .wp-block-navigation__responsive-container.is-menu-open.is-menu-open
.voc-mo > .wp-block-navigation-submenu__toggle svg {
	transform: rotate(180deg);
}

.voc-menu .wp-block-navigation__responsive-container.is-menu-open.is-menu-open
.voc-mo > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--chinh);
}

/*
 * Hieu ung: mo lop phu thi cac muc cap mot truot vao lan luot; mo mot nhanh
 * thi cac dong con hien lan luot trong luc nhanh gian ra (chieu cao do JS keo).
 * `--i` la so thu tu, JS danh san. Ca hai chi chay khi the vua hien ra, nen
 * khong lap lai trong luc khach dang cuon.
 */
@keyframes voc-menu-hien {
	from {
		opacity: 0;
		transform: translateY(-6px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

.voc-menu .wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation__container.is-responsive > .wp-block-navigation-item {
	animation: voc-menu-hien .32s cubic-bezier(.2, .7, .2, 1) both;
	animation-delay: calc(60ms + var(--i, 0) * 40ms);
}

.voc-menu .wp-block-navigation__responsive-container.is-menu-open
.voc-mo > .wp-block-navigation__submenu-container > .wp-block-navigation-item {
	animation: voc-menu-hien .26s cubic-bezier(.2, .7, .2, 1) both;
	animation-delay: calc(40ms + var(--i, 0) * 35ms);
}

@media (prefers-reduced-motion: reduce) {
	.voc-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item,
	.voc-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle svg {
		animation: none;
		transition: none;
	}
}

/* Nut dong: cung mau nau voi phan con lai, khong phai den mac dinh. */
.voc-menu .wp-block-navigation__responsive-container-close {
	color: var(--wp--preset--color--chu);
	min-width: 44px;
	min-height: 44px;
}

/*
 * NUT LIEN HE NOI DE LEN MENU DANG MO
 *
 * Bay stacking context kinh dien: lop phu menu co `z-index: 100000`, nhung no
 * nam TRONG the boc dau trang, ma the do la `position: sticky; z-index: 100`
 * (truoc 03/09/2026 thi hai thuoc tinh nay nam tren `.voc-dau-trang` - chuyen
 * len the boc de dau trang dinh that, khong doi gi o day). Ca cai dau trang
 * chi la mot lop o muc 100, nen moi thu ben trong deu nam duoi nut
 * lien he `z-index: 200` - do bang `elementFromPoint` thay dung nut lien he la
 * phan tu tren cung khi menu dang mo.
 *
 * Khong chua bang cach nang z-index cua lop phu: no da 100000 roi ma van thua.
 * WordPress dat `has-modal-open` len the <html> khi menu mo, dung cho do.
 */
.has-modal-open .voc-lien-he-noi {
	display: none;
}

/*
 * Khoi cau chuyen tren dien thoai: chu truoc, anh sau.
 *
 * Tren man hinh rong hai cot dung canh nhau nen thu tu khong quan trong. Khi
 * chung xep doc thi cot anh len truoc, ma anh do hien la anh TAM - mot o xam
 * cao hon 300px khong noi gi ca, dung chan giua khach va doan chu duy nhat ke
 * ve vung trong. Doi thu tu bang `order`, khong dong vao HTML, nen khi co anh
 * that chi can xoa luat nay neu muon.
 */
@media (max-width: 782px) {
	.voc-cau-chuyen .wp-block-column:has(.voc-cho-video) {
		order: 2;
	}
}

/*
 * =====================================================================
 * LIEN KET TRONG THAN TRANG
 * =====================================================================
 *
 * Do ngay 31/08/2026: MOI lien ket trong than trang deu la #D40D15 - dung cai
 * do danh cho tien. DESIGN.md co hai luat bi vi pham cung luc:
 * "Luat giong hiem" (do khong qua 10% be mat) va "Luat do thuoc ve tien".
 *
 * Hau qua khong nhin ra ngay: khi ca trang ray do thi nut "Mua ca phe" khong
 * con la thu do duy nhat nua, va no mat dung cai suc keo ma mau do sinh ra de
 * co. Rieng khoi "Dich vu cua VOC" da co bon lien ket do gach chan lien nhau.
 *
 * Mau chu doi ve `chu` o theme.json. Con lai o day: gach chan bang mau vien de
 * lien ket van nhin ra la lien ket, va do chi bat len khi ro chuot.
 */
main a:where(:not(.wp-element-button):not(.wp-block-button__link)) {
	text-decoration-color: var(--wp--preset--color--vien);
	text-underline-offset: 0.2em;
}

main a:where(:not(.wp-element-button):not(.wp-block-button__link)):hover,
main a:where(:not(.wp-element-button):not(.wp-block-button__link)):focus-visible {
	text-decoration-color: currentColor;
}

/*
 * Ten san pham tren the: khong gach chan. The da la mot khoi bam duoc ro rang,
 * them gach chan chi lam hang chu ron len giua luoi.
 */
li.wc-block-product .wp-block-post-title a {
	text-decoration: none;
}

/*
 * Chan trang: moi cot cach tieu de nhom mot khoang nhu nhau.
 *
 * Truoc 11/09/2026 luat nay chi bat `.voc-lien-ket` (0.4rem), con cot "Lien he"
 * la doan van tu ma ngan nen an khoang cach khoi mac dinh ~1.2rem - chup o
 * 1440px thay ba cot dinh sat tieu de, mot cot troi xuong. Bat "phan tu ngay
 * sau tieu de" thi cot nao cung theo, du ben trong la danh sach hay doan van.
 */
.voc-chan-trang .wp-block-column > h2 + * {
	margin-top: 0.75rem;
}

/*
 * =====================================================================
 * PHAN TU BIEU MAU
 * =====================================================================
 *
 * Do ngay 31/08/2026 tren trang chi tiet san pham: hai o chon bien the (khoi
 * luong 100g/250g/500g/1kg va dang xay nguyen hat/bot) dang la MAC DINH CUA
 * TRINH DUYET - Arial 13px, chu den thuan, vien xam #767676, khong bo goc, cao
 * 39px. O so luong con dung vien `2px inset` kieu noi 3D cua nhung nam 1990.
 *
 * Theme nay tao kieu cho nut va lien ket rat ky nhung chua bao gio dung den
 * phan tu bieu mau. Cho bi bo quen lai la cua ai de mua mot mon hang co bien
 * the: khong chon xong o do thi khong bam mua duoc.
 *
 * Ba loi cung mot cho:
 * - Chu den, vi pham "Luat khong co den".
 * - Cao dung 44px (nho `box-sizing: border-box` ngay duoi), bang nguong cham.
 * - Chu 13px. Safari tren iOS TU PHONG TO trang khi cham vao o nhap co chu
 *   duoi 16px. Khach dang xem san pham, cham chon khoi luong, ca trang nhay
 *   phong len - roi phai tu thu nho lai. Day la ly do 1rem duoi day la bat
 *   buoc, khong phai chuyen tham my.
 */
/*
 * `box-sizing: border-box` - THEM NGAY 10/09/2026, VA NO SUA MOT LOI THAT.
 *
 * Theme nay khong dat `box-sizing` chung, nen o nhap giu mac dinh
 * `content-box`: `min-height: 44px` chi tinh phan RUOT, cong them dem
 * 0.6rem hai chieu (19.2px) va vien 1px hai ben thanh 65px tong. Ghi chu ngay
 * tren day noi "Cao 39px" - do la con so DINH LAM, khong phai con so that; do
 * bang `getBoundingClientRect()` ra 65px.
 *
 * 65px la ly do chu dau tu noi "mấy khung để điền thì UI đang rất xấu": moi o
 * nhap tren ca trang deu cao hon y do gan 50%.
 */
input:where([type="text"], [type="search"], [type="email"], [type="tel"], [type="url"], [type="number"], [type="password"], [type="date"]),
select,
textarea {
	box-sizing: border-box;
	font-family: inherit;
	font-size: 1rem;
	color: var(--wp--preset--color--chu);
	background-color: var(--wp--preset--color--nen-noi);
	border: 1px solid var(--wp--preset--color--vien);
	border-radius: 6px;
	padding: 0.6rem 0.9rem;
	min-height: 44px;
	max-width: 100%;
	transition: border-color .14s ease, box-shadow .14s ease;
}

/* Ro chuot qua: chi dam vien len, du de biet o do bam duoc. */
input:where([type="text"], [type="search"], [type="email"], [type="tel"], [type="url"], [type="number"], [type="password"], [type="date"]):hover,
select:hover,
textarea:hover {
	border-color: var(--wp--preset--color--chu-nhat);
}

textarea {
	min-height: 7rem;
	line-height: 1.6;
}

input::placeholder,
textarea::placeholder {
	color: var(--wp--preset--color--chu-nhat);
	opacity: 1;
}

/*
 * O dang go: vien dam len + mot quang mo quanh o.
 *
 * Truoc 10/09/2026 day la `outline: 2px solid` mau do thuong hieu. Hai van de
 * do duoc tren anh chup cua chu dau tu hom do:
 *
 * - `outline` bam theo HINH CHU NHAT cua o, khong bam theo goc bo tron. O tim
 *   kiem dau trang bo tron 999px nen hai dau vien do thua ra thanh hai cai
 *   luoi liem do - dung cai ma chu dau tu goi la "rất xấu".
 * - Do la mau canh bao. Mot o dang duoc go chu khong phai mot o dang sai.
 *
 * `box-shadow` thi bam theo `border-radius`, nen goc tron van tron. Vien van
 * doi mau nen cho nay khong chi con la mot quang mo - man hinh do tuong phan
 * cao (`forced-colors`) tat bong do van con vien de nhin.
 */
input:where([type="text"], [type="search"], [type="email"], [type="tel"], [type="url"], [type="number"], [type="password"], [type="date"]):focus-visible,
select:focus-visible,
textarea:focus-visible {
	border-color: var(--wp--preset--color--chinh);
	outline: none;
	/*
	 * Vong sang la do VOC `chinh` (#D40D15 = 212, 13, 21) o do mo 18%. Truoc
	 * 11/09/2026 no la mau 224/27/36 - mot mau do THU BA khong co trong
	 * DESIGN.md, nam ngay canh vien `chinh` cua chinh o nhap do. Ca ba vong
	 * sang trong tep (o nhap, o tim dau trang, o chon cua trang thanh toan) da
	 * doi cung luc.
	 */
	box-shadow: 0 0 0 3px rgba(212, 13, 21, .18);
}

@media (forced-colors: active) {
	input:focus-visible,
	select:focus-visible,
	textarea:focus-visible { outline: 2px solid; }
}

/*
 * O go sai chi to do SAU KHI khach go, nho `:user-invalid`.
 *
 * `:invalid` to do ngay tu luc trang vua mo: moi o bat buoc con trong deu la
 * "sai". Mot bieu mau do loe khi khach chua kip go chu nao la mot bieu mau
 * trong nhu da hong.
 */
input:user-invalid,
select:user-invalid,
textarea:user-invalid {
	border-color: var(--wp--preset--color--chinh);
}

/*
 * O chon: bo mui ten mac dinh roi tu ve lai bang mau nau cua theme.
 *
 * Mui ten la SVG nhung thang trong CSS. Khong dung tep rieng: mot yeu cau mang
 * nua chi de lay mot cai mui ten la khong dang, va neu tep hong thi o chon
 * trong nhu khong bam duoc.
 */
select {
	appearance: none;
	padding-inline-end: 2.4rem;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%2338271F' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.9rem center;
	background-size: 12px 8px;
	cursor: pointer;
}

/* O so luong cua WooCommerce: hep, can giua, khong con vien noi 3D. */
.woocommerce .quantity .qty,
form.cart .qty {
	width: 4.5rem;
	text-align: center;
	padding-inline: 0.4rem;
}

input[type="checkbox"],
input[type="radio"] {
	accent-color: var(--wp--preset--color--chinh);
	min-height: 0;
	width: 1.1rem;
	height: 1.1rem;
}

/*
 * O tim kiem o dau trang giu dang vien tron rieng, da dat o phan tren.
 * Chi lay lai mau chu va co chu - truoc do no cung dang den 14px.
 */
.voc-cong-cu .wp-block-search__input {
	min-height: 0;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: var(--wp--preset--color--chu);
	font-size: 1rem;
}

/*
 * WooCommerce ep co chu cua o chon va o nhap ve
 * `var(--wp--preset--font-size--small)` bang hai bo chon rieng cua no, thang
 * luat `select { font-size: 1rem }` o tren.
 *
 * Day KHONG phai chuyen tham my. Safari tren iOS tu phong to trang khi cham vao
 * o nhap co chu duoi 16px, va khong tu thu lai. Khach dang xem san pham, cham
 * chon khoi luong, ca trang nhay phong len roi ke o do.
 *
 * Lap lai dung bo chon cua WooCommerce, them `body` cho chac ve do dac hieu.
 */
body.woocommerce table.variations tr td select,
body.woocommerce-page table.variations tr td select,
body.woocommerce .input-text,
body.woocommerce-page .input-text,
body.woocommerce select,
body.woocommerce-page select,
body.woocommerce textarea,
body.woocommerce-page textarea {
	font-size: 1rem;
}

/*
 * =====================================================================
 * TRANG CHI TIET SAN PHAM: TAB VA BANG THUOC TINH
 * =====================================================================
 *
 * Do ngay 31/08/2026 tren /san-pham/100-robusta-clean/: hai khoi nay dang la
 * mac dinh cua WooCommerce va lac han bang mau:
 *
 * - Chu tab `rgb(81, 81, 81)` - xam trung tinh, ma bang mau VOC khong co mot
 *   sac xam nao.
 * - Vien tab `rgb(207, 200, 216)` - tim nhat. Khong ro tu dau ra, chac chan
 *   khong tu VOC.
 * - Vien bang thuoc tinh `1px dotted rgba(0, 0, 0, .1)` - dua tren den, vi pham
 *   "Luat khong co den" (luat noi ro: ke ca trong bong do).
 * - Gia tri thuoc tinh in NGHIENG. Chu nghieng o day khong nhan manh gi ca, chi
 *   lam "100g, 250g, 500g, 1kg" kho doc hon.
 *
 * Trang chu da co mot thanh tab dep va dung he: gach chan do, chu nau nhat khi
 * khong chon (`.voc-tab__nut`). Dung lai chinh ngon ngu do o day thay vi de hai
 * kieu tab khac nhau trong cung mot site.
 */
/*
 * WooCommerce dung bo chon `.woocommerce div.product .woocommerce-tabs ul.tabs
 * li` - bon lop cong ba the. Phai viet dai bang no moi thang, them `body` cho
 * chac. Viet ngan hon la luat khong chay ma khong bao loi gi.
 */
body.woocommerce div.product .woocommerce-tabs ul.tabs {
	display: flex;
	flex-wrap: wrap;
	gap: .25rem 1.5rem;
	margin: 0 0 var(--wp--preset--spacing--40, 2rem);
	padding: 0;
	border-bottom: 1px solid var(--wp--preset--color--vien);
	list-style: none;
}

body.woocommerce div.product .woocommerce-tabs ul.tabs li,
body.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
	margin: 0 0 -1px;
	padding: 0;
	background: transparent;
	border: 0;
	border-bottom: 2px solid transparent;
	border-radius: 0;
	box-shadow: none;
}

/* WooCommerce ve hai goc cong cua tab bang `::before` va `::after`. */
body.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
body.woocommerce div.product .woocommerce-tabs ul.tabs li::after {
	display: none;
}

body.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	display: flex;
	align-items: center;
	min-height: 44px;
	padding: .7rem .25rem;
	color: var(--wp--preset--color--chu-nhat);
	font-weight: 600;
	text-decoration: none;
}

body.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
	border-bottom-color: var(--wp--preset--color--chinh);
}

body.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
	color: var(--wp--preset--color--chinh);
}

body.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover {
	color: var(--wp--preset--color--chu);
}

/* Tieu de trong o tab lap lai dung ten tab vua bam - bo di. */
.woocommerce-tabs .woocommerce-Tabs-panel > h2:first-child {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
}

/*
 * Bang thuoc tinh: doc ra phai la mot to thong so, khong phai mot cai bang
 * Excel. Vach ngan mau vien, ten dam, gia tri nau nhat va KHONG nghieng.
 */
/*
 * WooCommerce dat vien bang o `.woocommerce table.shop_attributes th` va con
 * mot ban nua trong `woocommerce-smallscreen.css`. Phai co `body.woocommerce`
 * cong `tr` moi thang duoc ca hai.
 */
body.woocommerce table.shop_attributes,
body.woocommerce-page table.shop_attributes {
	width: 100%;
	border: 0;
	border-collapse: collapse;
}

/*
 * WooCommerce ke so le cac hang bang mot mau xam nhat (`tr:nth-child(even)`).
 * Bang nay chi co vai hang va da co vach ngan roi; them nen xam vao thi vua
 * thua vua la mau ngoai bang mau.
 */
body.woocommerce table.shop_attributes tr,
body.woocommerce table.shop_attributes tr:nth-child(even),
body.woocommerce table.shop_attributes tr:nth-child(even) th,
body.woocommerce table.shop_attributes tr:nth-child(even) td,
body.woocommerce-page table.shop_attributes tr,
body.woocommerce-page table.shop_attributes tr:nth-child(even),
body.woocommerce-page table.shop_attributes tr:nth-child(even) th,
body.woocommerce-page table.shop_attributes tr:nth-child(even) td {
	background: transparent;
}

/*
 * Tren dien thoai, `woocommerce-smallscreen.css` xep bang thanh khoi doc: moi
 * `th` va `td` thanh mot dong rieng. Neu ep `width: 40%` cho `th` o day thi
 * nhan bi bop con hai phan nam be ngang va o mau nen keo lech - da thay dung
 * loi do khi do lan dau.
 *
 * Nen viet theo kieu dien thoai truoc: nhan mot dong, gia tri mot dong, vach
 * ngan dat duoi CAP chu khong duoi tung o. Tu 768px tro len moi quay ve hai cot.
 */
body.woocommerce table.shop_attributes tr th,
body.woocommerce table.shop_attributes tr td,
body.woocommerce-page table.shop_attributes tr th,
body.woocommerce-page table.shop_attributes tr td {
	padding: 0;
	border: 0;
	background: transparent;
	text-align: left;
}

body.woocommerce table.shop_attributes tr th,
body.woocommerce-page table.shop_attributes tr th {
	padding-top: .7rem;
	color: var(--wp--preset--color--chu);
	font-weight: 600;
}

body.woocommerce table.shop_attributes tr td,
body.woocommerce-page table.shop_attributes tr td {
	padding-bottom: .7rem;
	border-bottom: 1px solid var(--wp--preset--color--vien);
}

@media (min-width: 768px) {
	body.woocommerce table.shop_attributes tr th,
	body.woocommerce-page table.shop_attributes tr th {
		width: 40%;
		padding: .7rem 0;
		border-bottom: 1px solid var(--wp--preset--color--vien);
	}

	body.woocommerce table.shop_attributes tr td,
	body.woocommerce-page table.shop_attributes tr td {
		padding: .7rem 0;
	}
}

body.woocommerce table.shop_attributes tr td,
body.woocommerce table.shop_attributes tr td p,
body.woocommerce-page table.shop_attributes tr td,
body.woocommerce-page table.shop_attributes tr td p {
	margin: 0;
	color: var(--wp--preset--color--chu-nhat);
	font-style: normal;
}

/*
 * =====================================================================
 * NUT MUA KHI CHUA CHON BIEN THE
 * =====================================================================
 *
 * WooCommerce gan lop `disabled wc-variation-selection-needed` roi ha
 * `opacity: .5`. Do do tren nen do #D40D15 ra mot mau hong nhat khong nam trong
 * bang mau nao ca - trong nhu mot cai nut bi hong chu khong phai mot cai nut
 * dang cho.
 *
 * Cach cua nha nay da ghi trong DESIGN.md o phan hang het: KHONG dung do mo,
 * dung mot hinh thuc khac han. O day la nut mau be voi chu nau nhat - doc ra la
 * "chua den luot", va khi chon xong bien the thi no bat do len, cai chuyen mau
 * do chinh la phan thuong cho thao tac vua roi.
 *
 * Van de nguyen `opacity: 1`: nut nay VAN bam duoc, bam vao thi WooCommerce nhac
 * chon tuy chon. Lam no mo di la noi doi ve trang thai.
 */
body.woocommerce div.product form.cart button.single_add_to_cart_button.disabled,
body.woocommerce div.product form.cart button.single_add_to_cart_button:disabled {
	opacity: 1;
	background-color: var(--wp--preset--color--be);
	color: var(--wp--preset--color--chu-nhat);
}

/*
 * =====================================================================
 * LUOI BAI VIET (trang tin tuc, luu tru, ket qua tim kiem)
 * =====================================================================
 *
 * Truoc ban 31/08/2026 ba trang nay dung chung `index.html`, mot tep chi co
 * vong lap tieu de va trich doan tran - khong anh, khong bo cuc, khong mot the
 * <h1> nao, va trang thai rong thi khong co. Kiem tren /tin-tuc/ ngay do:
 * `document.querySelectorAll('h1').length` tra ve 0.
 *
 * Gio tach thanh home.html (tin tuc), search.html (tim kiem), index.html (du
 * phong cho cac luu tru khac). Ca ba dung chung lop `.voc-luoi-bai` nay.
 */
.voc-luoi-bai .wp-block-post-template {
	gap: var(--wp--preset--spacing--50, 3.5rem) var(--wp--preset--spacing--30, 1rem);
}

.voc-luoi-bai .wp-block-post {
	display: flex;
	flex-direction: column;
}

.voc-luoi-bai .wp-block-post-featured-image {
	margin-block-end: var(--wp--preset--spacing--20, 0.5rem);
	overflow: hidden;
	border-radius: 6px;
	background: var(--wp--preset--color--nen);
}

.voc-luoi-bai .wp-block-post-featured-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .4s ease;
}

.voc-luoi-bai .wp-block-post:hover .wp-block-post-featured-image img {
	transform: scale(1.03);
}

.voc-luoi-bai .wp-block-post-title {
	margin-block: 0 0.25rem;
	line-height: 1.35;
}

.voc-luoi-bai .wp-block-post-title a {
	text-decoration: none;
}

.voc-luoi-bai .wp-block-post-title a:hover {
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--vien);
}

.voc-luoi-bai .wp-block-post-date {
	margin-block: 0 0.5rem;
}

.voc-luoi-bai .wp-block-post-excerpt {
	margin-block: 0;
	color: var(--wp--preset--color--chu-nhat);
}

/*
 * Truoc 12/09/2026 bai chua co anh dai dien thi khoi anh tu an, luoi chi con
 * chu. Chu dau tu hoi "tại sao các bài blog không có ảnh?" - gio bai chua co
 * anh duoc ve o thay (`.voc-anh-thay`, xem phan O TRON CHU DE ben duoi).
 */

/* Phan trang: so trang la vung cham 44px, trang dang xem to dam len. */
.voc-phan-trang {
	margin-block-start: var(--wp--preset--spacing--50, 3.5rem);
	gap: 0.25rem;
}

.voc-phan-trang .wp-block-query-pagination-numbers a,
.voc-phan-trang .wp-block-query-pagination-numbers span,
.voc-phan-trang .wp-block-query-pagination-previous,
.voc-phan-trang .wp-block-query-pagination-next {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding-inline: 0.5rem;
	border-radius: 4px;
	color: var(--wp--preset--color--chu);
	text-decoration: none;
}

.voc-phan-trang .wp-block-query-pagination-numbers .current {
	background: var(--wp--preset--color--nen);
	border: 1px solid var(--wp--preset--color--vien);
	font-weight: 700;
}

.voc-phan-trang a:hover {
	background: var(--wp--preset--color--nen);
}

/* O tim lai tren trang ket qua: rong vua phai, khong tran het be ngang. */
.voc-tim-lai {
	max-width: 26rem;
}

.voc-tim-lai .wp-block-search__inside-wrapper {
	border: 1px solid var(--wp--preset--color--vien);
	border-radius: 999px;
	background: var(--wp--preset--color--nen);
	padding-inline-start: 0.75rem;
}

.voc-tim-lai .wp-block-search__input {
	min-height: 44px;
	border: 0;
	background: transparent;
	font-size: 1rem;
}

.voc-tim-lai .wp-block-search__button {
	min-width: 44px;
	min-height: 44px;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: var(--wp--preset--color--chu);
}

.voc-tim-lai .wp-block-search__button:hover {
	color: var(--wp--preset--color--chinh);
}

/*
 * =====================================================================
 * THE SAN PHAM TRAN KHOI O LUOI
 * =====================================================================
 *
 * Do ngay 31/08/2026 tren /danh-muc/ca-phe-voc/ va trang ket qua tim kiem, o
 * 375px: luoi chia hai cot moi cot 177,5px, nhung HOP that cua the la 200px.
 * Chenh 22,5px la do the dang `box-sizing: content-box` - dem 10px moi ben cong
 * vien 1px moi ben duoc CONG THEM vao be rong thay vi tinh vao trong.
 *
 * Hau qua: hang the rong 400px trong khung 375px, nen cot phai bi cat mat mot
 * doan - mat luon phan vien va mot phan chu. Loi nay chi lo ra o luoi; tren
 * trang chu cac the nam trong dai cuon ngang nen tran ra khong ai thay.
 */
li.wc-block-product,
li.wc-block-product * {
	box-sizing: border-box;
}

/*
 * =====================================================================
 * THONG BAO CUA WOOCOMMERCE
 * =====================================================================
 *
 * Do ngay 31/08/2026 sau khi them mot mon vao gio: bang thong bao ra nen
 * #F4FFF7, vien #4AB866, chu #2F2F2F. Ba mau, khong mau nao nam trong bang mau
 * VOC - mot dai xanh la giua mot cua hang nau va kem.
 *
 * Dung lai dung ngon ngu ma DESIGN.md da dat cho khoi canh bao het hang o trang
 * san pham: nen giay, vien be, va mot gach day 4px ben trai lam dau hieu. Cung
 * mot y nghia thi cung mot hinh thuc - khach hoc mot lan, dung duoc ca site.
 *
 * Phan biet loai thong bao bang MAU CUA GACH, khong bang mau nen: nen do hay
 * nen xanh deu la nhung mang mau lon, ma "Luat giong hiem" gioi han do duoi
 * 10% be mat.
 */
/*
 * WooCommerce dat mau o `.wc-block-components-notice-banner.is-success` - hai
 * lop, dac hieu hon bo chon mot lop. Lan sua truoc viet mot lop nen chi thang
 * duoc `border-left-width`, con mau nen va mau vien van xanh: do lai thay
 * `4px rgb(74, 184, 102)`. Phai viet du bien the.
 */
body .wc-block-components-notice-banner,
body .wc-block-components-notice-banner.is-success,
body .wc-block-components-notice-banner.is-info,
body .wc-block-components-notice-banner.is-warning,
body .wc-block-components-notice-banner.is-error,
body .woocommerce-message,
body .woocommerce-info,
body .woocommerce-error {
	background-color: var(--wp--preset--color--nen);
	color: var(--wp--preset--color--chu);
	border: 1px solid var(--wp--preset--color--vien);
	border-left: 4px solid var(--wp--preset--color--chu-nhat);
	border-radius: 4px;
}

body .wc-block-components-notice-banner.is-error,
body .woocommerce-error {
	border-left-color: var(--wp--preset--color--chinh);
}

/* Bieu tuong tron mau xanh cua WooCommerce: doi ve nau. */
body .wc-block-components-notice-banner > svg,
body .wc-block-components-notice-banner.is-success > svg,
body .wc-block-components-notice-banner.is-info > svg {
	background-color: var(--wp--preset--color--chu-nhat);
	fill: var(--wp--preset--color--nen-noi);
}

body .wc-block-components-notice-banner.is-error > svg {
	background-color: var(--wp--preset--color--chinh);
}

body .wc-block-components-notice-banner__content {
	color: var(--wp--preset--color--chu);
}

/* Lien ket trong thong bao ("Xem gio hang") van la lien ket, khong phai nut do. */
body .wc-block-components-notice-banner__content a,
body .woocommerce-message a {
	color: var(--wp--preset--color--chu);
	font-weight: 600;
}

/*
 * =====================================================================
 * DONG TINH TRANG KHO
 * =====================================================================
 *
 * Do ngay 31/08/2026 tren /san-pham/che-pham-lam-sach-may-ca-phe/: dong
 * "Con 60 trong kho" dang mau #D40D15 - dung cai do danh cho tien va cho nut
 * mua. "Luat do thuoc ve tien" trong DESIGN.md cam dung no o cho khac.
 *
 * Con hang la tin BINH THUONG, khong phai canh bao va cung khong phai lai keu
 * goi. Chu nau nhat la dung giong. Rieng HET hang thi da co khoi canh bao rieng
 * o phan tren, khong dung dong nay.
 */
body.woocommerce div.product p.stock.in-stock,
body.woocommerce-page div.product p.stock.in-stock {
	color: var(--wp--preset--color--chu-nhat);
	font-weight: 400;
}

/*
 * O so luong dang KHOI (dung o gio hang va o ngan gio nho).
 *
 * Do ngay 09/09/2026 tren /gio-hang/ voi mot mon trong gio, man 1440px:
 *
 *   khung chon so luong   107 x 65 px   (WooCommerce dat `width: 107px`)
 *   nut tru                44 x 63 px
 *   o nhap                 66 x 63 px   (dang phai la 40px)
 *   nut cong               44 x 63 px
 *
 * 44 + 66 + 44 = 154px noi dung nhet vao mot khung 107px. Nut CONG bi day ra
 * ngoai khung, do len nut xoa - tren anh chup no dinh vao cai thung rac thanh
 * mot cuc khong ai doan duoc la nut gi.
 *
 * Nguyen nhan la luat chung cua phan tu bieu mau o tren: no bat MOI
 * `input[type=number]`, ma o so luong cua khoi cung la `type=number`. No cho o
 * nhap them `padding: 9.6px 12.8px` va `min-height: 44px`, thanh ra o nhap
 * phinh tu 40x~30 len 66x63, va ca khung cao theo.
 *
 * O day go padding va chieu cao ra khoi rieng o nhap nay, va tra be ngang cua
 * khung ve `auto` de ba o vua du 44px moi o = 132px.
 *
 * Giu `font-size: 1rem`: WooCommerce dat 13px bang bo chon rieng cua no, ma
 * duoi 16px thi Safari iOS tu phong to ca trang khi khach cham vao o nhap.
 */
/*
 * =====================================================================
 * KHUNG CHON NHANH
 * =====================================================================
 *
 * Mo ra khi bam "Them vao gio" tren the san pham. Xem
 * `assets/js/chon-nhanh.js` de biet vi sao no ton tai.
 *
 * Dung the `<dialog>` that chu khong phai mot cai `<div>` co `position: fixed`:
 * trinh duyet tu lo giam tieu diem trong khung, phim Esc de dong, va chan
 * tuong tac voi phan trang o duoi. Ve tay lai ba thu do bang JavaScript la cach
 * chac chan de bo sot mot cai - thuong la cai giam tieu diem, va no chi hai
 * dung nhung nguoi dung ban phim.
 */
.voc-chon-nhanh {
	position: fixed;
	inset: 0;
	margin: auto;
	width: min(560px, calc(100vw - 32px));
	max-height: calc(100vh - 64px);
	padding: 0;
	border: 0;
	border-radius: 6px;
	background: var(--wp--preset--color--nen-noi);
	color: var(--wp--preset--color--chu);
	box-shadow: 0 12px 40px rgb(56 39 31 / 22%);
	overflow: visible;
}

.voc-chon-nhanh::backdrop {
	background: rgb(56 39 31 / 45%);
}

.voc-chon-nhanh__than {
	display: flex;
	gap: 20px;
	padding: 24px;
	max-height: calc(100vh - 64px);
	overflow-y: auto;
}

@media (max-width: 600px) {
	.voc-chon-nhanh__than {
		flex-direction: column;
		gap: 12px;
	}
}

.voc-chon-nhanh__anh {
	flex: 0 0 120px;
	width: 120px;
	height: 120px;
	object-fit: contain;
	border-radius: 4px;
	background: var(--wp--preset--color--nen);
}

.voc-chon-nhanh__chu {
	flex: 1 1 auto;
	min-width: 0;
}

.voc-chon-nhanh__ten {
	margin: 0 0 4px;
	font-size: 1.25rem;
	line-height: 1.25;
}

.voc-chon-nhanh__gia {
	margin-bottom: 8px;
	color: var(--wp--preset--color--chinh);
	font-size: 1.25rem;
	font-weight: 700;
}

.voc-chon-nhanh__mo-ta {
	margin: 0 0 16px;
	color: var(--wp--preset--color--chu-nhat);
	font-size: var(--wp--preset--font-size--nho, 0.875rem);
	line-height: 1.5;
}

/* Nut dong: 44px vung cham nhu moi nut khac, khong phai mot chu x 16px. */
.voc-chon-nhanh__dong {
	position: absolute;
	top: 4px;
	right: 4px;
	z-index: 1;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 4px;
	background: transparent;
	color: var(--wp--preset--color--chu-nhat);
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
}

.voc-chon-nhanh__dong:hover,
.voc-chon-nhanh__dong:focus-visible {
	color: var(--wp--preset--color--chu);
}

.voc-chon-nhanh__truc {
	margin: 0 0 16px;
	padding: 0;
	border: 0;
}

.voc-chon-nhanh__truc legend {
	padding: 0;
	margin-bottom: 6px;
	color: var(--wp--preset--color--chu-nhat);
	font-size: var(--wp--preset--font-size--nho, 0.875rem);
}

.voc-chon-nhanh__lua-chon {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

/*
 * O tron that, nhung an di va ve lai bang cai nhan cua no.
 *
 * `clip-path: inset(50%)` chu khong phai `display: none`: o bi `display: none`
 * thi ban phim khong di toi duoc va trinh doc man hinh khong doc thay, tuc la
 * mat het cai loi cua viec dung o tron ngay tu dau.
 */
.voc-chon-nhanh__lua-chon input[type="radio"] {
	position: absolute;
	width: 1px;
	height: 1px;
	clip-path: inset(50%);
	overflow: hidden;
}

.voc-chon-nhanh__lua-chon label {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 16px;
	border: 1px solid var(--wp--preset--color--vien);
	border-radius: 4px;
	background: var(--wp--preset--color--nen-noi);
	cursor: pointer;
	line-height: 1.2;
}

.voc-chon-nhanh__lua-chon input:checked + label {
	border-color: var(--wp--preset--color--chinh);
	background: var(--wp--preset--color--chinh);
	color: var(--wp--preset--color--nen-noi);
}

/* Vien tieu diem ve tren NHAN, vi o tron that da bi giau di. */
.voc-chon-nhanh__lua-chon input:focus-visible + label {
	outline: 2px solid var(--wp--preset--color--chinh);
	outline-offset: 2px;
}

.voc-chon-nhanh__lua-chon input:disabled + label {
	border-style: dashed;
	color: var(--wp--preset--color--chu-nhat);
	cursor: not-allowed;
}

.voc-chon-nhanh__lua-chon label span {
	margin-inline-start: 6px;
	font-size: var(--wp--preset--font-size--nho, 0.875rem);
}

.voc-chon-nhanh__them {
	width: 100%;
	min-height: 48px;
	border: 0;
	border-radius: 4px;
	background: var(--wp--preset--color--chinh);
	color: var(--wp--preset--color--nen-noi);
	font-family: inherit;
	font-size: 1rem;
	font-weight: 600;
	cursor: pointer;
}

.voc-chon-nhanh__them[disabled] {
	opacity: 0.7;
	cursor: progress;
}

.voc-chon-nhanh__chi-tiet {
	display: block;
	margin-top: 12px;
	text-align: center;
	color: var(--wp--preset--color--chu-nhat);
	font-size: var(--wp--preset--font-size--nho, 0.875rem);
}

.voc-chon-nhanh__loi {
	margin: 0 0 12px;
	color: var(--wp--preset--color--chinh);
	font-size: var(--wp--preset--font-size--nho, 0.875rem);
}

.voc-chon-nhanh__cho {
	margin: 0;
	padding: 24px;
	color: var(--wp--preset--color--chu-nhat);
}

/*
 * O CHUYEN NGON NGU NOI CUA TRANSLATEPRESS
 *
 * Do ngay 09/09/2026 tren trang chu:
 *
 *   .trp-floating-switcher              position: fixed; bottom: 0; z-index: 99999
 *   .wc-block-components-drawer__...    z-index: 9999    (lop phu cua ngan gio nho)
 *   .voc-lien-he-noi                    z-index: 200
 *
 * 99999 lon gap muoi lan lop phu cua ngan gio, nen khi khach mo ngan gio thi o
 * ngon ngu van noi len tren va nam dung cho nut "Xem gio hang" o day ngan.
 * Chu dau tu gap dung loi nay khi thu mua hang.
 *
 * Ha xuong duoi CA HAI: duoi lop phu de mo ngan gio la o ngon ngu khuat han
 * (dang mua hang thi khong ai doi ngon ngu), va duoi day nut lien he de neu hai
 * cai co cham nhau tren man hinh hep thi nut goi dien thang.
 *
 * CAP NHAT 12/09/2026: GIAU HAN. Ban tieng Anh chua xuat ban nen o noi chi co
 * dung mot dong "Vietnamese" - khong doi duoc sang dau ca - ma tren man hinh
 * 375px no nam de len nut goi, nut lien he va chu cua trang (ban kiem tra ngay
 * 11/09/2026 chup duoc). Khi xuat ban ban EN, `SongNgu` tu ve o "VI / EN" tren
 * dau trang ([voc_doi_ngon_ngu]), nen o noi van thua.
 */
body .trp-floating-switcher {
	display: none;
}

/*
 * =====================================================================
 * GIO HANG: DON GIA × [SO LUONG] = THANH TIEN
 * =====================================================================
 *
 * Chu dau tu ngay 11/09/2026: "giá x số lượng (có thể chỉnh sửa tại đây) = giá
 * tiền", lam to ra, va bo so luong lap. Truoc do dong gio ghi "₫292,719 × 3"
 * duoi ten, o so luong nam rieng mot hang, thanh tien nam tit ben phai - ba
 * con so cua mot phep tinh nam ba noi, va "× 3" con lap lai o so luong.
 *
 * Gio ba thu do nam tren MOT hang, o so luong chinh la thua so o giua. Dung
 * cho ca ngan gio nho (Interactivity API) lan trang gio hang (React): ca hai
 * ve cung bo lop `wc-block-cart-item__*`.
 *
 * Cach lam: dong la mot luoi; o `td` va cac lop boc o giua `display: contents`
 * de con cua chung dung thang vao luoi. Khong di chuyen the nao bang
 * JavaScript - ca hai gio hang deu tu ve lai va se don mat the bi doi cho.
 *
 *   [anh] ten san pham ......................... [xoa]
 *   [anh] dang / dat truoc / trong luong
 *   gia cu            [ − 3 + ]            = thanh tien
 *   GIA MOI     ×                           Tiết kiệm ...
 *
 * Tien to `:root body table.wc-block-cart-items` dai co chu y: `mini-cart-style.css`
 * dat luoi cua dong bang `.is-mobile table.wc-block-cart-items ...` (0,3,1), va
 * `display: flex` cho lop boc cung o muc do. Ngan hon thi khong de len duoc -
 * da thu ngay 11/09/2026, ten san pham bi ep con mot cot 60px.
 */
.wc-block-cart-items thead,
.wc-block-cart-items .wc-block-cart-items__header {
	display: none;
}

.wc-block-cart-items,
.wc-block-cart-items tbody {
	display: block;
	width: 100%;
}

:root body table.wc-block-cart-items .wc-block-cart-items__row {
	position: relative;
	display: grid;
	grid-template-columns: 64px auto auto minmax(0, 1fr);
	grid-template-areas:
		"anh ten  ten  ten"
		"anh meta meta meta"
		"gia gia  so   tong"
		".   .    .    tk";
	column-gap: 12px;
	align-items: start;
	padding: 16px 0;
}

:root body table.wc-block-cart-items .wc-block-cart-items__row > td.wc-block-cart-item__product,
:root body table.wc-block-cart-items .wc-block-cart-items__row > td.wc-block-cart-item__total,
:root body table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__wrap,
:root body table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__quantity,
:root body table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__total-price-and-sale-badge-wrapper {
	display: contents;
}

:root body table.wc-block-cart-items .wc-block-cart-items__row > td.wc-block-cart-item__image {
	grid-area: anh;
	width: 64px;
	padding: 0;
}

:root body table.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-product-name {
	grid-area: ten;
	padding-inline-end: 48px;
	font-size: 1rem;
	font-weight: 600;
}

:root body table.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-product-backorder-badge {
	grid-area: meta;
	justify-self: start;
}

:root body table.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-product-metadata {
	grid-area: meta;
	margin: 4px 0 0;
	font-size: .8125rem;
	line-height: 1.5;
}

:root body table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__remove-link {
	position: absolute;
	top: 6px;
	right: 0;
}

/* Hang phep tinh: ba o canh giua theo chieu doc. */
:root body table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__prices,
:root body table.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-quantity-selector,
:root body table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__total .wc-block-components-product-price {
	margin-top: 14px;
	align-self: center;
}

:root body table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__prices {
	grid-area: gia;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 0;
}

/* Dau nhan nam SAU don gia, sat o so luong. */
:root body table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__prices::after {
	content: "×";
	color: var(--wp--preset--color--chu-nhat);
	font-size: 1.125rem;
}

/* Gia cu gach o TREN, gia moi to va do o duoi - cung thu tu voi trang san pham. */
:root body table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__prices .price {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	line-height: 1.2;
}

/* Ngan gio co HAI khoi gia (co giam / khong giam) va an mot khoi bang thuoc
 * tinh `hidden`. `display: flex` o tren de len `hidden` cua trinh duyet - quen
 * dong nay thi don gia hien hai lan. */
:root body table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__prices .price[hidden],
:root body table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__prices .price > span:not(.screen-reader-text):empty {
	display: none;
}

:root body table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__prices del {
	color: var(--wp--preset--color--chu-nhat);
	font-size: .8125rem;
	text-decoration-thickness: 1px;
}

:root body table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__prices ins,
:root body table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__prices .wc-block-components-product-price__value {
	color: var(--wp--preset--color--chu);
	font-size: 1.0625rem;
	font-weight: 700;
	text-decoration: none;
	background: none;
}

:root body table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__prices ins.is-discounted {
	color: var(--wp--preset--color--chinh);
}

:root body table.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-quantity-selector {
	grid-area: so;
	margin-bottom: 0;
}

:root body table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__total .wc-block-components-product-price {
	grid-area: tong;
	justify-self: end;
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 0;
	color: var(--wp--preset--color--chu);
	font-size: 1.125rem;
	font-weight: 700;
	white-space: nowrap;
}

:root body table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__total .wc-block-components-product-price::before {
	content: "=";
	color: var(--wp--preset--color--chu-nhat);
	font-weight: 400;
}

:root body table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__total .wc-block-components-sale-badge {
	grid-area: tk;
	justify-self: end;
	margin: 6px 0 0;
}

/* Tieu de ngan gio o 375px: WooCommerce xep "Giỏ hàng của bạn" va "(mục: 2)"
 * thanh hai cot flex khong xuong dong, moi cot tu be doi chu cua minh - ra ba
 * dong lech nhau. Cho xuong dong nhu mot cau binh thuong. */
.wc-block-mini-cart__title {
	flex-wrap: wrap;
	column-gap: .3em;
}

/* Chan ngan gio: "Giá gốc" gach, "Tiết kiệm" do, roi moi den "Tạm tính". */
.voc-tiet-kiem-gio .wc-block-components-totals-item {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
	margin: 0 0 6px;
	padding: 0;
	font-size: .9375rem;
}

.voc-tiet-kiem-gio del { color: var(--wp--preset--color--chu-nhat); }

.voc-tiet-kiem-gio__giam .wc-block-components-totals-item__value {
	color: var(--wp--preset--color--chinh);
	font-weight: 700;
}

/* Trang gio hang / thanh toan: cung hai dong do (`tiet-kiem-tong.js`). */
:root .voc-tiet-kiem-tong .wc-block-components-totals-item {
	padding: 4px 0;
}

/* Khung tom tat o trang thanh toan co le 16px, khung o trang gio hang thi
 * khong - canh theo cac dong "Tạm tính", "Giao hàng" cua tung trang. */
:root .wc-block-checkout .voc-tiet-kiem-tong .wc-block-components-totals-item {
	padding-inline: 16px;
}

.voc-tiet-kiem-tong del { color: var(--wp--preset--color--chu-nhat); }

.voc-tiet-kiem-tong__giam .wc-block-components-totals-item__value {
	color: var(--wp--preset--color--chinh);
	font-weight: 700;
}

/* Tom tat don o trang thanh toan: gia moi do, nhu moi noi khac. */
.wc-block-components-order-summary-item .wc-block-components-product-price__value.is-discounted {
	color: var(--wp--preset--color--chinh);
	font-weight: 700;
	background: none;
}

/* Bam vao anh san pham la mo anh lon (`trang-san-pham.js`) - con tro phai noi
 * dieu do truoc khi bam. */
.woocommerce-product-gallery__image,
.woocommerce-product-gallery__image img {
	cursor: zoom-in;
}

/* Hop xem anh lon (PhotoSwipe): nen la CHINH TRANG WEB, lam mo va phu mot lop
 * nau trong - khach van thay minh dang o trang nao. Chu dau tu ngay 11/09/2026:
 * "sao em không để nền vẫn là trang web nhưng làm mờ". Truoc do la nen nau dac
 * (va truoc nua la #000 mac dinh - "Luat khong co den" cua DESIGN.md).
 *
 * Lop phu con nau 55%: nut dong / mui ten cua PhotoSwipe mau trang, tren nen
 * trang mo han thi khong thay nut dau. */
.pswp .pswp__bg {
	background: color-mix(in srgb, var(--wp--preset--color--chu) 55%, transparent);
	-webkit-backdrop-filter: blur(14px) saturate(.9);
	backdrop-filter: blur(14px) saturate(.9);
}

.pswp .pswp__top-bar {
	background: transparent;
}

/* ---- Khung "Quà tặng" o trang gio hang (`voc-storefront/assets/js/qua-tang.js`) ---- */
/* `:root`: khung tong tien cua WooCommerce xoa le cua moi the con ben trong. */
:root .voc-qua-gio {
	margin: 16px 0 0;
	padding: 14px 16px;
	border: 1px solid var(--wp--preset--color--vien);
	border-radius: 6px;
	background: var(--wp--preset--color--nen-noi);
}

.voc-qua-gio__tieu-de {
	margin: 0;
	font-family: inherit;
	font-size: 1rem;
	font-weight: 700;
}

.voc-qua-gio__phu {
	margin: 2px 0 10px;
	color: var(--wp--preset--color--chu-nhat);
	font-size: .8125rem;
}

.voc-qua-gio__ds {
	margin: 0;
	padding: 0;
	list-style: none;
}

.voc-qua-gio__mon + .voc-qua-gio__mon {
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid var(--wp--preset--color--vien);
}

.voc-qua-gio__ten {
	margin: 0 0 6px;
	font-size: .875rem;
	font-weight: 600;
}

.voc-qua-gio__nhan {
	display: block;
	margin-bottom: 4px;
	color: var(--wp--preset--color--chu-nhat);
	font-size: .8125rem;
}

:root .voc-qua-gio textarea {
	width: 100%;
	min-height: 4.2rem;
	box-sizing: border-box;
	resize: vertical;
	font-size: .9375rem;
}

.voc-qua-gio__hang {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: 8px;
	margin-top: 6px;
}

.voc-qua-gio__dem {
	margin-right: auto;
	color: var(--wp--preset--color--chu-nhat);
	font-size: .75rem;
}

.voc-qua-gio__nut {
	min-height: 44px;
	padding: 0 14px;
	border: 1px solid var(--wp--preset--color--chu);
	border-radius: 4px;
	background: var(--wp--preset--color--chu);
	color: var(--wp--preset--color--nen-noi);
	font: inherit;
	font-size: .875rem;
	font-weight: 600;
	cursor: pointer;
}

.voc-qua-gio__nut--bo {
	background: transparent;
	color: var(--wp--preset--color--chu);
}

/* Khong dung opacity cho nut tat (DESIGN.md): doi mau. */
.voc-qua-gio__nut:disabled {
	border-color: var(--wp--preset--color--vien);
	background: var(--wp--preset--color--be);
	color: var(--wp--preset--color--chu-nhat);
	cursor: not-allowed;
}

.voc-qua-gio__bao {
	margin: 6px 0 0;
	font-size: .8125rem;
	color: var(--wp--preset--color--chu);
}

/* Muc "🎁 Thông tin quà tặng" o trang thanh toan: gio khong co qua thi moi
 * truong deu an, nhung WooCommerce van ve tieu de - an ca khoi cho khoi con
 * mot tieu de rong. Xem `QuaTangThanhToan::tieuDeMuc()`. */
.wp-block-woocommerce-checkout-additional-information-block:not(:has(input, select, textarea)) {
	display: none;
}

/* Nhan "Quà tặng" trong dong gio: mot o nho de khach thay ngay mon nao la qua. */
/* Hai ten lop vi hai gio dat ten khac nhau: ngan gio nho giu dau tieng Viet,
 * trang gio hang / thanh toan (React) bo dau. */
.wc-block-components-product-details__quà-tặng .wc-block-components-product-details__name::before,
.wc-block-components-product-details__qua-tang .wc-block-components-product-details__name::before {
	content: "🎁 ";
}

body .wc-block-components-quantity-selector {
	width: auto;
	max-width: none;
}

body .wc-block-components-quantity-selector input.wc-block-components-quantity-selector__input {
	font-size: 1rem;
	color: var(--wp--preset--color--chu);
	flex: 0 0 44px;
	width: 44px;
	min-width: 44px;
	min-height: 44px;
	padding: 0;
}

/*
 * Chấm trượt ở tấm mở đầu: nút khong co chu nen mau `color` khong hien ra,
 * nhung no dang la den mac dinh. Vien focus cua trinh duyet lay `currentColor`,
 * nen bam bang ban phim se ve mot khung DEN len anh - dung thu ma
 * "Luat khong co den" cam. Doi ve nau truoc khi ai do gap.
 */
.voc-slide__cham-nut {
	color: var(--wp--preset--color--chu);
}

/*
 * =====================================================================
 * GIO HANG: NUT +/- VA NUT XOA
 * =====================================================================
 *
 * Do ngay 31/08/2026 o 375px, khi trong gio da co hang: nut tang/giam so luong
 * ra 30x63px va nut xoa ra 24x24px. Ca hai duoi nguong cham 44px, ma day la
 * hai nut duy nhat de sua mot don hang - bam truot thi khach hoac mua thua mot
 * mon, hoac xoa nham ca dong.
 *
 * Nut xoa co them mot ly do rieng: no la thao tac KHONG hoan tac duoc trong
 * giao dien nay. Vung cham cua mot nut pha phai rong bang vung cham cua mot nut
 * thuong, khong duoc nho hon.
 */
/*
 * `mini-cart-style.css` dat `min-width: 30px` bang bo chon hai lop
 * `.wc-block-components-quantity-selector .wc-block-components-quantity-selector__button`,
 * thang bo chon mot lop. Trang gio hang khong dinh vi no dung tep CSS khac -
 * chi ngan gio nho moi hong, va no chi lo ra khi trong gio DA co hang.
 */
body .wc-block-components-quantity-selector .wc-block-components-quantity-selector__button {
	min-width: 44px;
	min-height: 44px;
	color: var(--wp--preset--color--chu);
}

body .wc-block-cart-item__remove-link,
body .wc-block-components-quantity-selector__button:hover {
	color: var(--wp--preset--color--chu);
}

body .wc-block-cart-item__remove-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
}

/*
 * Lien ket chan trang tren dien thoai: hang cao 18px, khoang cach 6px.
 *
 * Tong 24,4px thi vua du qua tieu chi khoang cach cua WCAG 2.5.8, nhung "vua
 * du" tren mot man hinh cham la khong du. Chan trang la noi chua duong toi cac
 * trang chinh sach - doi tra, van chuyen, bao mat - tuc la noi khach tim den
 * khi dang co viec gap.
 *
 * Chi noi tren dien thoai. Tren man hinh rong co chuot thi 18px la du chinh
 * xac, va bon cot chan trang giu duoc do gon.
 */
@media (max-width: 700px) {
	.voc-chan-trang .voc-lien-ket a {
		display: flex;
		align-items: center;
		min-height: 44px;
	}

	.voc-chan-trang .voc-lien-ket li + li {
		margin-top: 0;
	}
}

/*
 * =====================================================================
 * TRANG THANH TOAN
 * =====================================================================
 *
 * Do ngay 31/08/2026 o 375px voi gio da co hang.
 *
 * Nut "Dat hang" ra 42px - thieu dung 2px so voi nguong cham. Day la nut cuoi
 * cung cua ca hanh trinh mua; bam truot o day la mat don, khong phai mat mot
 * cu bam.
 */
body .wc-block-components-checkout-place-order-button {
	min-height: 48px;
}

/*
 * Hang o tich ("giao toi dia chi khac", "luu thong tin") cao 20px. Duoi ca
 * nguong 24px cua WCAG 2.5.8. O tich thi nho la binh thuong, nhung CA HANG -
 * gom ca nhan chu - phai bam duoc va phai du cao.
 */
body .wc-block-components-checkbox label,
body .wc-block-components-checkbox__label {
	display: flex;
	align-items: center;
	min-height: 44px;
}

body .wc-block-components-checkbox__input {
	width: 20px;
	height: 20px;
	margin-inline-end: 0.6rem;
}

/* Day lien ket chinh sach o chan trang thanh toan. */
.voc-chan-thanh-toan p {
	margin-block: 0.35rem;
}

.voc-chan-thanh-toan a {
	color: var(--wp--preset--color--chu-nhat);
}

/*
 * Tieu de muc trong luong thanh toan ("Thong tin lien lac", "Dia chi giao
 * hang", "Tuy chon van chuyen", "Tuy chon thanh toan").
 *
 * WooCommerce dat chung theo `--wp--preset--font-size--medium` - mot preset cua
 * LOI WordPress, khong phai cua theme nay (theme dung ten tieng Viet: nho,
 * thuong, lon...). Fluid typography co preset do xuong 14px tren dien thoai,
 * tuc la tieu de muc NHO HON chu thuong 16px. Do ngay 31/08/2026: h1 20px,
 * h2 14px, body 16px - thu bac lon nguoc.
 *
 * Dat thang ro rang: 20 / 18 / 16.
 */
body .wc-block-components-title.wc-block-components-title {
	font-size: 1.125rem;
	color: var(--wp--preset--color--chu);
}

/*
 * Font bieu tuong cua WooCommerce khong dat `font-display`.
 *
 * No nap tren moi trang, va khong co `font-display` thi trinh duyet co the giu
 * chu an trong toi ba giay trong luc cho tep ve. Sau tep chu cua theme deu da
 * dat `swap` dung; day la tep duy nhat con sot.
 *
 * Khai bao lai cung `font-family` va cung nguon, them `swap`. Trinh duyet gop
 * hai khai bao lam mot va lay thuoc tinh cua ban sau.
 */
@font-face {
	font-family: "WooCommerce";
	font-display: swap;
	src: url("/wp-content/plugins/woocommerce/assets/fonts/WooCommerce.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
}

/*
 * =====================================================================
 * CHUYEN DONG  (03/09/2026)
 * =====================================================================
 *
 * Truoc khi sua, toan bo chuyen dong cua site nam trong `:hover`: the san pham
 * nhac len, anh phong nhe, chu doi mau. Nghia la tren DIEN THOAI - noi phan
 * lon khach mua le dang o - website khong he nhuc nhich mot lan nao. Dung im
 * hoan toan.
 *
 * Bon cho duoi day khong phai la trang tri. Moi cho tra loi mot cau hoi ma
 * khach that su dang hoi:
 *
 *   1. "Anh vua nhay, chuyen gi vay?"      -> cham anh la dong ho dem nguoc
 *   2. "Bam xong roi thi sao?"             -> luoi moi troi vao thay luoi cu
 *   3. "No co an duoc khong?"              -> moi thu cham duoc deu lun xuong
 *   4. "Toi dang o dau trong trang nay?"   -> dau trang gon lai khi roi dinh
 *
 * Cho nao khong tra loi duoc cau nao thi khong them.
 */

/*
 * 1. CHAM ANH BIA VUA LA VI TRI VUA LA DONG HO
 *
 * Slide tu chuyen sau moi 6 giay. Truoc day no NHAY - dang doc dong chu tren
 * anh thi anh bien mat. Hai sua o day:
 *
 * - `slide.js` gio truot muot thay vi gan thang `scrollLeft`.
 * - Cham dang chon khong bat ra 26px trong 0,2 giay nua ma DAI DAN suot ca chu
 *   ky 6 giay. Nhin vao hang cham la biet con bao lau nua thi doi.
 *
 * Vi sao doi `width` chu khong phai `transform`: da ghi ky o khoi
 * `.voc-slide__cham-nut::after` phia tren - cai `::after` nay la `position:
 * absolute` nen doi be rong khong xe dich gi, con `scaleX` thi keo meo vien
 * 1px va bo goc.
 *
 * Lop `voc-slide--tu-chay` chi co mat khi dong ho DANG chay. Khach re chuot
 * vao anh hoac bam mot cham thi `slide.js` go lop ra, cham nhay ve 26px day -
 * dung nghia "dong ho da dung".
 */
.voc-slide--tu-chay .voc-slide__cham-nut[aria-selected="true"]::after {
	animation: voc-cham-dem 6s linear forwards;
}

@keyframes voc-cham-dem {
	from { width: 10px; }
	to { width: 26px; }
}

/*
 * 2. DOI TAB: LUOI MOI TROI VAO
 *
 * `hidden` la `display: none`, khong transition duoc, nen doi tab la mot cu
 * trao cung. 220ms va 8px la du de mat theo kip ma chua kip thay cham; duong
 * cong giam toc de no dung han chu khong nay.
 *
 * Chi bang VUA DUOC BAM moi co lop nay (xem `tab.js`), nen luc tai trang bang
 * dau tien hien san - khong bao gio giau hang hoa sau mot animation.
 */
.voc-tab__bang--vao {
	animation: voc-troi-vao .22s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes voc-troi-vao {
	from { opacity: 0; transform: translateY(8px); }
	to { opacity: 1; transform: none; }
}

/*
 * 3. CHAM VAO LA LUN XUONG
 *
 * Day la cho quan trong nhat trong ca khoi nay. Tren dien thoai khong co
 * `:hover`, nen truoc do bam vao mot the san pham khong co PHAN HOI NAO -
 * khach bam, khong thay gi, bam lai lan hai, roi tuong may treo.
 *
 * `:active` chay tren ca chuot lan ngon tay, va no an theo ca cay: cham vao
 * ten san pham thi the boc ngoai cung tinh la `:active`. Nen mot lop rieng cho
 * the va mot lop cho cac nut la du phu het.
 *
 * 90ms va 1px: phai NGAN va NHO. Phan hoi cham hon 120ms doc ra thanh "may
 * lag" chu khong phai "may nhan roi".
 */
/*
 * Cac nut nay truoc do khong khai bao `transition` nao, nen khong co nen de
 * `:active` chay len. Khai bao san `transform` o trang thai nghi - nha tay ra
 * thi no ve cho muot chu khong bat nguoc.
 */
.voc-tab__nut,
.voc-slide__nut,
.voc-slide__cham-nut,
.voc-truot__nut,
.voc-lien-he-noi__nut,
.wp-block-button__link,
.wp-block-search__button {
	transition: transform .18s cubic-bezier(0.16, 1, 0.3, 1),
		background-color .18s ease, color .18s ease, filter .18s ease;
}

.wp-block-woocommerce-product-template li.wc-block-product:active,
.voc-tab__nut:active,
.voc-slide__nut:active,
.voc-slide__cham-nut:active,
.voc-truot__nut:active,
.voc-lien-he-noi__nut:active,
.wp-block-button__link:active,
.wp-block-search__button:active,
button:active:not([disabled]) {
	transform: translateY(1px);
	transition-duration: .09s;
}

/*
 * Nut mua hang lun sau hon mot chut va toi lai. Day la nut duy nhat tren trang
 * ma bam nham phai tra tien, nen no dang duoc mot phan hoi ro hon phan con lai.
 */
.wp-block-button__link:active,
.wc-block-components-product-button .wp-block-button__link:active {
	transform: translateY(2px);
	filter: brightness(.92);
}

/*
 * 4. DAU TRANG GON LAI KHI ROI DINH TRANG
 *
 * O dinh trang dau trang duoc phep to - do la luc khach nhin thuong hieu. Cuon
 * xuong roi thi khach dang tim hang, va dem tren duoi la cho khong bay hang. Bop
 * dem lai vua tra cho ngay do, vua la dau hieu duy nhat tren dien thoai noi
 * rang khach da roi dinh trang (dien thoai khong co thanh cuon de nhin).
 *
 * Duoi 700px khong bop dem - o do dem da la 0,5rem roi, khong con gi de bot.
 * Chi them bong de van co dau hieu "da roi dinh trang".
 *
 * Chi tiet ve 16px trang nhich len: xem chu thich trong `@media (min-width:
 * 701px)` ngay ben duoi.
 */
.voc-dau-trang,
header.wp-block-template-part:has(> .voc-dau-trang) {
	transition: padding .22s cubic-bezier(0.16, 1, 0.3, 1),
		box-shadow .22s ease;
}

.voc-dau-trang--gon {
	box-shadow: 0 2px 12px rgba(56, 39, 31, .12);
}

@media (min-width: 701px) {
	.voc-dau-trang--gon {
		padding-block: var(--wp--preset--spacing--20, 0.5rem);
	}

	/*
	 * TRANG NHICH LEN 16px MOT LAN - DA THU CHUA VA KHONG CHUA DUOC
	 *
	 * The boc dau trang la phan tu `sticky`, nghia la HOP NHIN THAY va CHO NO
	 * CHIEM TRONG LUONG chinh la mot hop. Top hop do lai cho nho di 16px thi
	 * chieu cao tai lieu cung tut 16px, va noi dung ben duoi bi keo len 16px
	 * dung luc dau trang top.
	 *
	 * Da thu hai cach bu, do ca hai (03/09/2026, man hinh 1280px):
	 *
	 * 1. `margin-block-end: 1rem` tren `.voc-dau-trang` - khong an gi. Le duoi
	 *    thoat ra ngoai the boc roi GOP voi le tren cua `<main>`. Do duoc:
	 *    `margin-bottom` bao 16px ma `scrollHeight` van tut dung 16.
	 * 2. Chuyen le do len chinh the boc - cung khong an, cung mot ly do: gop
	 *    le giua hai the anh em.
	 *
	 * Con `padding` thi khong bi gop, nhung dat len the boc lai phan tac dung:
	 * the boc CHINH LA hop dang duoc ghim, nen dem cua no cung bi ghim theo -
	 * ra mot dai 16px trong suot ngay duoi vach dau trang, noi dung chay xuyen
	 * qua do.
	 *
	 * Nen giu nguyen 16px nhich do. No dien ra trong 220ms cung nhip voi dem
	 * dang top lai, nen doc ra la mot phan cua chuyen dong chu khong phai mot
	 * cu giat. Muon triet de thi phai chen them mot the dem rieng sau dau
	 * trang - doi mot the that trong DOM lay 16px, khong dang.
	 */
}

/*
 * BAO GIAM CHUYEN DONG THI BO HET PHAN KHONG GIU NGHIA
 *
 * Giu lai: `:active` va bong cua dau trang. Ca hai la PHAN HOI - bo di thi
 * khach mat thong tin that, khong phai mat trang tri. "Giam chuyen dong" la
 * it di va nhe di, khong phai tat sach.
 *
 * Bo di: cham dem nguoc, luoi troi vao, dem dau trang co dan. Ca ba deu la
 * chuyen dong trong khong gian.
 */
@media (prefers-reduced-motion: reduce) {
	.voc-slide--tu-chay .voc-slide__cham-nut[aria-selected="true"]::after,
	.voc-tab__bang--vao {
		animation: none;
	}

	.voc-dau-trang {
		transition: box-shadow .22s ease;
	}

	.voc-dau-trang--gon {
		padding-block: var(--wp--preset--spacing--30, 1rem);
	}
}

/*
 * BIEU MAU YEU CAU BAO GIA
 *
 * Khach si it nhung moi nguoi deu dang gia, nen bieu mau phai de dien tren dien
 * thoai: nhan nam tren o nhap, vung cham cao 44px, khong co cot doi.
 */
.voc-bao-gia {
	max-width: 34rem;
	margin-block: var(--wp--preset--spacing--40, 1.5rem);
}

.voc-bao-gia p {
	margin-block: 0 var(--wp--preset--spacing--30, 1rem);
}

.voc-bao-gia label {
	display: block;
	margin-block-end: .35rem;
	font-weight: 600;
	color: var(--wp--preset--color--chu);
}

.voc-bao-gia input,
.voc-bao-gia select,
.voc-bao-gia textarea {
	width: 100%;
	min-height: 44px;
	padding: .6rem .75rem;
	border: 1px solid var(--wp--preset--color--vien);
	border-radius: 4px;
	background: var(--wp--preset--color--nen-noi);
	color: var(--wp--preset--color--chu);
	font: inherit;
}

.voc-bao-gia textarea {
	min-height: 7rem;
	resize: vertical;
}

.voc-bao-gia input:focus-visible,
.voc-bao-gia select:focus-visible,
.voc-bao-gia textarea:focus-visible {
	outline: 2px solid var(--wp--preset--color--chinh);
	outline-offset: 1px;
}

.voc-bao-gia__nhac {
	color: var(--wp--preset--color--chu-nhat);
	font-size: .9rem;
}

.voc-bao-gia__loi {
	margin-block-end: var(--wp--preset--spacing--30, 1rem);
	padding: .75rem 1rem;
	border-inline-start: 3px solid var(--wp--preset--color--chinh);
	background: var(--wp--preset--color--chinh-nhat);
}

.voc-bao-gia__loi p {
	margin-block-end: .35rem;
	font-weight: 600;
}

.voc-bao-gia__loi ul {
	margin: 0;
	padding-inline-start: 1.1rem;
}

/*
 * O bay chan spam. Bot doc DOM va dien vao moi o; nguoi that khong bao gio
 * thay o nay. Giau bang `position` chu khong bang `display:none` - vai bot da
 * biet bo qua o bi an theo kieu do.
 */
.voc-bao-gia__bay {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.voc-bao-gia--xong {
	max-width: 34rem;
	padding: 1.25rem 1.5rem;
	border-inline-start: 3px solid var(--wp--preset--color--chinh);
	background: var(--wp--preset--color--nen-noi);
}

/*
 * O CHUYEN NGON NGU
 *
 * Nam canh o tim kiem tren dau trang. Nho, khong tranh cho voi menu chinh -
 * phan lon khach la nguoi Viet, nut nay danh cho thieu so nhung khong duoc
 * giau di.
 */
.voc-ngon-ngu {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	font-size: .85rem;
	font-weight: 600;
	letter-spacing: .02em;
}

.voc-ngon-ngu a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* Vung cham 44px, giu dung nguyen tac cua ca site. */
	min-width: 2.25rem;
	min-height: 44px;
	color: var(--wp--preset--color--chu-nhat);
	text-decoration: none;
}

.voc-ngon-ngu a:hover,
.voc-ngon-ngu a:focus-visible {
	color: var(--wp--preset--color--chinh);
	text-decoration: underline;
}

.voc-ngon-ngu a[aria-current="true"] {
	color: var(--wp--preset--color--chu);
}

.voc-ngon-ngu span {
	color: var(--wp--preset--color--vien);
}

/*
 * =====================================================================
 * TRANG SAN PHAM: BA O CHON PHAI THANH MOT KHOI
 * =====================================================================
 *
 * Do ngay 10/09/2026 tren /san-pham/100-robusta-clean/, khung 953px, doc bang
 * getBoundingClientRect():
 *
 *   Trong luong / Chung loai   nhan x=481 rong 108   o chon x=589 rong 208 cao 48
 *   Dang                       nhan x=481 rong  41   o chon x=522 rong 140 cao 44
 *
 * Ba o chon cua cung mot san pham nhung hai he do khac han: cot o chon lech
 * 67px, o hep hon 68px, thap hon 4px, nhan mot ben `font-weight: 700` mot ben
 * thuong. Doc ra thanh "hai o cua cua hang, va mot o ai do dan them vao".
 *
 * Nhan cua bang bien the con dam hon ca dong chu quanh no. Nhan o chon khong
 * phai tieu de - no la cho de doc luot roi bo qua, khong phai cho de dung lai.
 *
 * Cho `Dang` di dau thi xem `OChonDang::register()`: no da duoc chuyen len
 * ngay sau bang bien the, vi cho cu nam duoi khoi gia + tinh trang kho.
 */
/*
 * Bang khong co le duoi: hang cuoi cua bang da co .75rem dem duoi roi. De ca
 * hai thi khoang cach giua `Chung loai` va `Dang` la 22px trong khi giua hai
 * hang bien the chi 12px - ba o cung mot nhom ma nhip thua ra o dung cho vua
 * ghep lai.
 */
body.woocommerce div.product form.cart table.variations {
	width: auto;
	margin: 0;
	border-collapse: collapse;
}

body.woocommerce div.product form.cart table.variations th.label,
body.woocommerce div.product form.cart table.variations td.value {
	padding: 0 0 .75rem;
	vertical-align: middle;
}

/*
 * Cot nhan rong bang nhau o ca ba o, ke ca khi chu dai ngan khac nhau. De bang
 * tu do thi "Trong luong" va "Dang" day cot o chon lech nhau, va mat nhin ra
 * ngay du chi lech vai pixel.
 */
body.woocommerce div.product form.cart table.variations th.label label {
	font-weight: 400;
}

body.woocommerce div.product form.cart table.variations th.label {
	box-sizing: border-box;
	width: 8rem;
	padding-inline-end: 1rem;
	color: var(--wp--preset--color--chu-nhat);
	font-weight: 400;
	text-align: start;
}

/*
 * Dem cua o chon phai ep lai, khong chi be ngang.
 *
 * Do luc 10/09/2026: o chon bien the co `padding: 14.4px 48px 14.4px 17.6px`
 * (luat rieng cua WooCommerce cho `table.variations select`), o `Dang` chi co
 * `9.6px 38.4px 9.6px 12.8px` - cao 44px so voi 48px. Cho hai o bang be ngang
 * ma khac chieu cao thi con lo hon truoc.
 *
 * Viet bang `em` chu khong phai px: chinh mach so cua WooCommerce (.9/3/1.1 em)
 * nen o chon van dung ty le khi co chu doi.
 */
body.woocommerce div.product form.cart table.variations td.value select {
	width: 13rem;
	max-width: 100%;
	height: auto;
	padding: .9em 3em .9em 1.1em;
	line-height: 1.25;
}

/*
 * O `Dang` KHONG con la mot hang nhan + `<select>` trong luoi 8rem/auto nhu
 * hai o tren - tu 11/09/2026 no la nut + danh sach mo ra (xem phan "TRANG SAN
 * PHAM CA PHE"). Giu luoi cu thi nut bi bop con ~130px ("Nguyen hat" be ba
 * dong) va danh sach mo ra nam CANH nut chu khong phai duoi nut.
 */

/*
 * "Xoa" la duong lui, khong phai mot lua chon ngang hang voi cac o chon.
 * WooCommerce chi hien no sau khi khach da chon gi do, va mac dinh no la mot
 * lien ket tran nam sat o chon - de bam nham khi dinh doi lua chon.
 */
body.woocommerce div.product form.cart .reset_variations {
	display: inline-block;
	margin-inline-start: 1rem;
	color: var(--wp--preset--color--chu-nhat);
	font-size: var(--wp--preset--font-size--nho, .875rem);
}

/*
 * Man hep: 7rem + 13rem = 320px, cong le trang thi tran o khung 375px. Xep nhan
 * len tren o chon, va cho o chon an het be ngang - ngon tay cham de hon.
 */
@media (max-width: 480px) {
	/*
	 * `tbody` phai vao danh sach nay. Do luc 10/09/2026 o khung 375px: chi doi
	 * `tr` va `td` sang `display: block` thi bang van rong het 325px nhung o
	 * chon ben trong chi 265px - `tbody` con giu `display: table-row-group` nen
	 * no van bo cuc kieu bang va co lai theo noi dung.
	 */
	body.woocommerce div.product form.cart table.variations tbody,
	body.woocommerce div.product form.cart table.variations th.label,
	body.woocommerce div.product form.cart table.variations td.value,
	body.woocommerce div.product form.cart table.variations tr {
		display: block;
		width: auto;
	}

	/*
	 * Bang phai an het be ngang, khong thi cac o chon cua bang chi rong bang
	 * chuoi dai nhat trong no (266px do o 375px) trong khi o `Dang` - von la
	 * mot luoi rieng - rong het 325px. Ba o lai lech nhau, lan nay chi tren
	 * dien thoai.
	 */
	body.woocommerce div.product form.cart table.variations {
		width: 100%;
	}

	body.woocommerce div.product form.cart table.variations th.label {
		padding: 0 0 .25rem;
	}

	/* Hang doc thi le trai la mot duong thang; "Xoa" thut vao 16px pha duong do. */
	body.woocommerce div.product form.cart .reset_variations {
		margin-inline-start: 0;
	}

	body.woocommerce div.product form.cart table.variations td.value select {
		width: 100%;
	}
}

/*
 * Gia cua bien the DA CHON phai to bang khoang gia ma no thay the.
 *
 * Do ngay 10/09/2026 tren /san-pham/100-robusta-clean/, khung 953px:
 *
 *   khoang gia (chua chon)   28.63px / 600   "39.313 d - 308.125 d"
 *   gia da chon                 16px / 400   "159.375 d"
 *
 * Khach chon xong trong luong thi con so QUAN TRONG NHAT trang teo di gan mot
 * nua so voi cai khoang uoc luong no vua thay the. Doc ra thanh "gia vua bi mat
 * di dau do" chu khong phai "day la gia cua thu anh vua chon".
 *
 * `rat-lon` la dung bien ma khoi gia o tren dang dung (clamp ra 28.63px o khung
 * nay), nen hai con so bang nhau o moi be ngang man hinh chu khong chi o 953px.
 */
body.woocommerce div.product .woocommerce-variation-price {
	margin-block: var(--wp--preset--spacing--30, 1rem) .25rem;
}

body.woocommerce div.product .woocommerce-variation-price .price,
body.woocommerce div.product .woocommerce-variation-price .price .amount {
	color: var(--wp--preset--color--chu);
	font-size: var(--wp--preset--font-size--rat-lon, 1.75rem);
	font-weight: 600;
}

/*
 * =====================================================================
 * O NHAP CUA TRANG THANH TOAN
 * =====================================================================
 *
 * Khoi gio hang / thanh toan cua WooCommerce ve o nhap bang lop rieng
 * (`.wc-block-components-text-input`) va tu dat vien, goc bo va vong sang mac
 * dinh mau xanh cua no. Khong keo chung ve chung mot kieu thi buoc quan trong
 * nhat cua ca website lai la buoc nhin khong giong phan con lai.
 *
 * Chi dat vien, goc va vong sang - khong dung vao cach no day nhan chu len khi
 * o co chu, do la co cau rieng cua khoi.
 */
.wc-block-components-text-input input:where([type="text"], [type="email"], [type="tel"], [type="number"], [type="password"]),
.wc-block-components-textarea,
.wc-blocks-components-select .wc-blocks-components-select__select {
	border: 1px solid var(--wp--preset--color--vien);
	border-radius: 6px;
	background-color: var(--wp--preset--color--nen-noi);
	color: var(--wp--preset--color--chu);
	transition: border-color .14s ease, box-shadow .14s ease;
}

.wc-block-components-text-input input:hover,
.wc-block-components-textarea:hover,
.wc-blocks-components-select .wc-blocks-components-select__select:hover {
	border-color: var(--wp--preset--color--chu-nhat);
}

.wc-block-components-text-input input:focus,
.wc-block-components-textarea:focus,
.wc-blocks-components-select .wc-blocks-components-select__select:focus {
	border-color: var(--wp--preset--color--chinh);
	outline: none;
	box-shadow: 0 0 0 3px rgba(212, 13, 21, .18);
}

/*
 * =====================================================================
 * O TIM TRONG DANH MUC, VA TEN NHOM CUA HANG O LOC
 * =====================================================================
 *
 * Chu dau tu ngay 10/09/2026, ve trang May & Thiet bi: "thêm 1 filter dàn hàng
 * ngang nhưng tập trung vào brand, với cả nên đặt thêm 1 ô search ở trong phần
 * máy và thiết bị này".
 */
/*
 * O TIM LA MOT THE NAU DAM, KHONG PHAI MOT O NHAP TRAN - sua ngay 11/09/2026.
 *
 * Chu dau tu: "chỗ ô tìm ấy, anh muốn làm nổi bật". Ban truoc la o nhap vien
 * mau kem tren nen kem, cong mot thanh do "Tìm" tut xuong dong duoi: o nhap
 * chim vao nen trang, con thanh do thi tranh su chu y voi nut "Lọc" o duoi.
 *
 * Nen nau hat `chu` chu khong phai do: DESIGN.md giu do cho gia va nut mua
 * ("Luật đỏ thuộc về tiền"). Nau dam la mau toi duy nhat trong bang mau, va
 * mot the toi nam tren cot kem la khoi nang nhat ma mat gap dau tien khi nhin
 * xuong cot trai - noi bat ma khong muon mau cua gia tien. Do chi con o cai
 * nut kinh lup, dung vai tro "cho de bam".
 */
.voc-tim-muc {
	display: block;
	padding: .9rem 1rem 1rem;
	margin-block-end: var(--wp--preset--spacing--30, 1rem);
	border-radius: 8px;
	background: var(--wp--preset--color--chu);
}

.voc-tim-muc__nhan {
	display: block;
	margin-block-end: .55rem;
	color: var(--wp--preset--color--nen-noi);
	font-size: var(--wp--preset--font-size--nho, .875rem);
	font-weight: 700;
	line-height: 1.35;
}

/*
 * O nhap va nut nam chung mot vien thuoc trang. Vien sang nam o `__hop`
 * (`:focus-within`), khong nam o o nhap: `outline` khong theo bo goc, nen vong
 * sang cua o nhap se thanh hinh chu nhat de len vien thuoc bo tron. Da gap
 * dung loi nay o o tim dau trang ngay 10/09/2026.
 */
.voc-tim-muc__hop {
	position: relative;
	display: flex;
	align-items: center;
	border-radius: 999px;
	background: var(--wp--preset--color--nen-noi);
	transition: box-shadow .14s ease;
}

.voc-tim-muc__hop:focus-within {
	box-shadow: 0 0 0 3px rgba(255, 255, 255, .35);
}

/*
 * Lap lop hai lan de thang luat chung `input:where([type=search])...` va vong
 * sang mac dinh cua no - o nhap nam trong vien thuoc thi khong duoc co vien
 * rieng.
 */
.voc-tim-muc__o.voc-tim-muc__o {
	flex: 1 1 auto;
	min-width: 0;
	max-width: none;
	border: 0;
	border-radius: 999px;
	background: transparent;
	padding-inline: 1rem 3.1rem;
	box-shadow: none;
	outline: none;
}

/* Kinh lup tron do, nam gon ben phai trong vien thuoc. */
.voc-tim-muc__nut {
	position: absolute;
	right: 4px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	min-height: 0;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: var(--wp--preset--color--chinh);
	color: #fff;
	cursor: pointer;
}

.voc-tim-muc__nut:hover,
.voc-tim-muc__nut:focus-visible { background: var(--wp--preset--color--chu); }

/*
 * May de ban: chu goi y 0.9375rem (bac `menu-con` trong DESIGN.md). Vien thuoc
 * rong 218px, tru dem trai 16px va 50px cho nut kinh lup thi chu con ~150px.
 * Cau goi y cu "Tên hoặc mã sản phẩm" bi cat thanh "Tên hoặc mã sản ph" (anh
 * chup 11/09/2026) nen da rut xuong "Tên, mã sản phẩm" - xem `VeTimTrongMuc`.
 *
 * Duoi 782px giu 1rem: Safari iOS tu phong to ca trang khi cham vao o nhap co
 * chu duoi 16px - va o do cot loc da rong het man hinh, khong con chat.
 */
@media (min-width: 782px) {
	.voc-tim-muc__o.voc-tim-muc__o { font-size: .9375rem; }
}

/*
 * Che do tuong phan cao cua Windows xoa `box-shadow`. Khong co dong nay thi o
 * tim khong con dau hieu nao cho biet no dang duoc chon.
 */
@media (forced-colors: active) {
	.voc-tim-muc__hop:focus-within { outline: 2px solid CanvasText; }
}

/*
 * Ten nhom nam CUNG mot hang voi cac o loc, khong phai mot dong tieu de rieng.
 *
 * Hai dong tieu de cho hai hang o loc ngan nhau ra, va tren dien thoai thi hai
 * hang do an het mot man hinh truoc khi khach thay san pham nao.
 */
.voc-danh-muc-con__nhan {
	align-self: center;
	margin-inline-end: .15rem;
	color: var(--wp--preset--color--chu-nhat);
	font-size: var(--wp--preset--font-size--nho, .875rem);
	font-weight: 600;
	white-space: nowrap;
}

.voc-danh-muc-con + .voc-danh-muc-con {
	margin-block-start: calc(var(--wp--preset--spacing--30, 1rem) * -0.5);
}

/*
 * =====================================================================
 * THE SAN PHAM: NHAC LEN KHI RO CHUOT QUA
 * =====================================================================
 *
 * Chu dau tu ngay 10/09/2026: "mấy cái thẻ loại máy đang khá xấu". The truoc
 * do la mot o vien mong dung im - khong co gi noi rang ca the bam duoc, khach
 * phai doan la phai bam vao dung ten hoac dung anh.
 *
 * Nang the len 2px va dam vien lai la du: bong do nang hon lam ca luoi san pham
 * nhin rung rinh, va anh san pham moi la thu phai bat mat o day.
 */
.wc-block-product-template .wc-block-product,
.wp-block-post.product {
	transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.wc-block-product-template .wc-block-product:hover,
.wp-block-post.product:hover {
	transform: translateY(-2px);
	border-color: var(--wp--preset--color--chu-nhat);
	box-shadow: 0 6px 18px rgba(56, 39, 31, .12);
}

@media (prefers-reduced-motion: reduce) {
	.wc-block-product-template .wc-block-product,
	.wp-block-post.product { transition: none; }

	.wc-block-product-template .wc-block-product:hover,
	.wp-block-post.product:hover { transform: none; }
}

/*
 * =====================================================================
 * TRANG DANH MUC: BANG ANH, O TRON, HAI COT, COT LOC
 * =====================================================================
 *
 * Chu dau tu chi vao newtec.vn ngay 10/09/2026: "có slide riêng, sau đó đến
 * các mục con khác, bên dưới bên trái là menu (sẽ có brand, filter tầm giá,..)
 * và bên phải là list sản phẩm".
 */

/* --- Bang anh dau trang ------------------------------------------------- */
.voc-bang-muc {
	margin-block-end: var(--wp--preset--spacing--40, 2rem);
	border-radius: 8px;
	overflow: hidden;
}

/*
 * Bang anh dong thoi la bang TRUOT: phai tra lai `overflow-x: auto`.
 *
 * `.voc-bang-muc` dat `overflow: hidden` (de bo goc an duoc goc anh) va no nam
 * SAU `.voc-slide` trong tep nay. Hai lop cung do dac hieu thi luat viet sau
 * thang, nen `hidden` de len `auto` cua bang truot va khoi do het cuon ngang
 * duoc - vuot ngon tay khong an gi, ma cung khong co dau hieu nao bao vi sao.
 *
 * Hai lop cong lai cho do dac hieu cao hon ca hai, nen day la cho duy nhat noi
 * ro y: cat theo chieu DOC (giu bo goc), cuon theo chieu NGANG.
 */
.voc-bang-muc.voc-slide:not(.voc-slide--co-dieu-khien) {
	overflow-x: auto;
	overflow-y: hidden;
}

/*
 * Co JavaScript thi `.voc-bang-muc` la khung DUNG YEN bo goc, ray ben trong
 * moi cuon. `:not(...)` o tren de luat cuon cu khong de len khung nay - neu
 * de, khung ngoai cung thanh khung cuon va mui ten lai troi di nhu loi cu.
 */

/*
 * `.voc-bang-muc img.voc-bang-muc__anh` chu khong phai `.voc-bang-muc__anh`.
 *
 * WooCommerce co luat `.woocommerce img, .woocommerce-page img { height: auto }`
 * - do dac hieu 0,1,1, cao hon mot lop don 0,1,0 - va no thang, nen anh bang
 * cao theo dung ty le goc: mot tam 1600x750 tren cot 1200px ra 563px thay vi
 * 260px. Do bang `CSS.getMatchedStylesForNode` ngay 10/09/2026; nhin bang mat
 * thi chi thay "bang anh sao to the".
 *
 * Ban nay 0,2,1, thang duoc ma khong phai dung `!important` - `!important` o
 * day se de len ca luat cua chinh minh o phan dien thoai ben duoi.
 */
.voc-bang-muc img.voc-bang-muc__anh {
	display: block;
	width: 100%;
	height: 260px;
	object-fit: cover;
}

/* --- Hang logo hang san xuat -------------------------------------------- */

/*
 * Logo nam tren mot dai nen trang, cach deu, cuon ngang khi chat.
 *
 * `filter: grayscale(1)` luc nghi va bo di khi ro chuot: logo cua bon hang khac
 * nhau mang bon he mau khong lien quan gi den nhau - de nguyen mau that thi mot
 * dai bay mau nam ngay duoi bang anh, va no danh nhau voi ca trang. Xam het thi
 * chung thanh mot hang deu; ro chuot vao thi hang do song lai, dung luc khach
 * dang quan tam den no.
 */
.voc-logo-hang {
	display: flex;
	align-items: center;
	/*
	 * `safe center`: can giua khi du cho, tu chuyen ve canh trai khi khong du.
	 *
	 * `center` khong thoi la mot bay cu trong flexbox - khi noi dung rong hon
	 * khung, phan tran ra o dau TRAI khong cuon toi duoc, logo dau tien bi cat
	 * vinh vien. Tu khoa `safe` chinh la de lo cho truong hop do.
	 */
	justify-content: safe center;
	gap: 2.5rem;
	overflow-x: auto;
	scrollbar-width: thin;
	padding: 1rem 1.25rem;
	margin-block-end: var(--wp--preset--spacing--40, 2rem);
	border: 1px solid var(--wp--preset--color--vien);
	border-radius: 8px;
	background: var(--wp--preset--color--nen-noi);
}

.voc-logo-hang__o {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
}

.voc-logo-hang__o img {
	height: 40px;
	width: auto;
	object-fit: contain;
	filter: grayscale(1);
	opacity: .75;
	transition: filter .18s ease, opacity .18s ease;
}

.voc-logo-hang__o:hover img,
.voc-logo-hang__o:focus-visible img {
	filter: none;
	opacity: 1;
}

/* --- Hang o tron -------------------------------------------------------- */

/*
 * HAI HANG O TRON DUNG CHUNG MOT KIEU
 *
 * `.voc-tron` - muc con tren trang danh muc san pham (Máy & Thiết bị, Cà phê).
 * `.voc-chu-de` - chu de tin tuc (/tin-tuc/, trang chu de, trang chu).
 *
 * Chu dau tu ngay 12/09/2026: "sao phần các mục ở máy với cafe, em không làm
 * to như chỗ tin tức đi?". Truoc do hang san pham la 96px vien mong, hang tin
 * tuc 140px co vong huy hieu - hai kieu cho cung mot viec. Gio cung co, cung
 * vien, cung hieu ung.
 *
 * Chua co anh thi la nen hat cafe cua giao dien (`[data-nen]`), KHONG ve gi de
 * len. Da tung ve chu cai dau ("MP", "MX") roi bieu tuong net (hat, ly, may
 * pha) - chu dau tu che ca hai: "đừng để icon đè lên, quê lắm". Ten muc nam
 * ngay duoi o tron, khong can nhac lai ben trong.
 *
 * Anh lay tu dau: danh muc san pham - anh cua danh muc, khong co thi anh san
 * pham moi nhat trong do; chu de tin tuc - anh bia cua bai moi nhat co anh.
 */

/*
 * Hang san pham cuon ngang chu khong xuong dong: no la loi tat, phai nam gon
 * mot hang ngay duoi tieu de. Cho xuong dong thi mot danh muc co tam muc con
 * day ca danh sach san pham xuong qua man hinh thu hai.
 *
 * Dem tren 4px: vong do khi ro chuot ve RA NGOAI o 3px. `overflow-x: auto`
 * bien ca truc doc thanh khung cat (xem ghi chu hieu ung ben duoi), khong co
 * dem thi vong do mat dinh.
 */
.voc-tron {
	display: flex;
	gap: clamp(1rem, 2.5vw, 2rem);
	overflow-x: auto;
	padding: 4px 4px .5rem;
	margin-block-end: var(--wp--preset--spacing--40, 2rem);
	scrollbar-width: thin;
}

.voc-chu-de {
	display: flex;
	justify-content: center;
	gap: clamp(1rem, 3vw, 2.5rem);
	margin-block: 0 var(--wp--preset--spacing--50, 3rem);
}

.voc-tron__o,
.voc-chu-de__o {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .75rem;
	width: 10rem;
	color: var(--wp--preset--color--chu);
	text-decoration: none;
}

.voc-tron__hinh,
.voc-chu-de__hinh {
	display: block;
	width: 140px;
	height: 140px;
	border-radius: 999px;
	overflow: hidden;
	background-color: var(--wp--preset--color--chu);
	background-size: cover;
	background-position: center;

	/* Vong kem mong ben trong + vien ngoai: nhin nhu mot cai huy hieu. */
	box-shadow: inset 0 0 0 5px rgba(250, 246, 241, .14), 0 0 0 1px var(--wp--preset--color--vien);
	transition: box-shadow .2s ease;
}

.voc-tron__hinh img,
.voc-chu-de__hinh img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .3s cubic-bezier(.2, .7, .2, 1);
}

:is(.voc-tron__hinh, .voc-chu-de__hinh, .voc-anh-thay)[data-nen="0"] { background-image: url(assets/img/o-ca-phe.jpg); }
:is(.voc-tron__hinh, .voc-chu-de__hinh, .voc-anh-thay)[data-nen="1"] { background-image: url(assets/img/o-phu-kien.jpg); }
:is(.voc-tron__hinh, .voc-chu-de__hinh, .voc-anh-thay)[data-nen="2"] { background-image: url(assets/img/o-may-pha.jpg); }
:is(.voc-tron__hinh, .voc-chu-de__hinh, .voc-anh-thay)[data-nen="3"] { background-image: url(assets/img/o-tan-so.jpg); }

.voc-tron__ten,
.voc-chu-de__ten {
	font-family: var(--wp--preset--font-family--tieu-de, inherit);
	font-size: 1.0625rem;
	font-weight: 600;
	line-height: 1.3;
	text-align: center;
	transition: color .16s ease;
}

/*
 * HIEU UNG RO CHUOT: VONG DO VA PHONG ANH, KHONG NANG O LEN.
 *
 * Ban truoc dung `transform: translateY(-2px)`. Loi: `.voc-tron` co
 * `overflow-x: auto`, ma theo chuan CSS mot truc dat `auto` thi truc con lai
 * khong con la `visible` nua - trinh duyet doi no thanh `auto` luon. Nghia la
 * hang o tron la mot khung CAT theo ca chieu doc, va o duoc nang len 2px thi
 * bi cat mat 2px dinh dau. Chu dau tu bao lai ngay 10/09/2026: "hình như em
 * tính làm hình tròn nhưng mà bị che mất phần trên rồi".
 *
 * `scale` cua anh nam trong o co `overflow: hidden`, nen phan anh phinh ra bi
 * vong tron xen - anh nhu dang duoc phong to sau mot o cua tron.
 */
:is(.voc-tron__o, .voc-chu-de__o):is(:hover, :focus-visible, [aria-current]) :is(.voc-tron__hinh, .voc-chu-de__hinh) {
	box-shadow: inset 0 0 0 5px rgba(250, 246, 241, .14), 0 0 0 3px var(--wp--preset--color--chinh);
}

:is(.voc-tron__o, .voc-chu-de__o):is(:hover, :focus-visible) img {
	transform: scale(1.08);
}

:is(.voc-tron__o, .voc-chu-de__o):is(:hover, :focus-visible, [aria-current]) :is(.voc-tron__ten, .voc-chu-de__ten) {
	color: var(--wp--preset--color--chinh);
}

/*
 * Dien thoai: bon o 140px + khoang cach = 620px, qua be ngang. Thu nho lai va
 * cho cuon ngang - van mot hang, khong xuong dong. `safe center` giu o dau
 * khong bi day ra ngoai mep trai khi hang tran.
 */
@media (max-width: 600px) {
	.voc-chu-de {
		justify-content: safe center;
		overflow-x: auto;
		padding-block: 4px .5rem;
		margin-inline: calc(-1 * var(--wp--style--root--padding-left, 1rem));
		padding-inline: var(--wp--style--root--padding-left, 1rem);
		scrollbar-width: none;
	}

	.voc-tron,
	.voc-chu-de {
		gap: .75rem;
	}

	/* Ba o 92px + hai khe 12px = 300px: vua khung 375px, khong cat o cuoi. */
	.voc-tron__o,
	.voc-chu-de__o { width: 5.75rem; gap: .5rem; }

	.voc-tron__hinh,
	.voc-chu-de__hinh { width: 84px; height: 84px; }

	.voc-tron__ten,
	.voc-chu-de__ten { font-size: .875rem; }
}

/* Trang mot chu de: tieu de khong co doan mo ta ben duoi, o tron dinh sat vao no. */
.wp-block-query-title ~ .voc-chu-de {
	margin-block-start: var(--wp--preset--spacing--40, 2rem);
}

/* O thay anh dai dien: chi nen hat cafe, cung mau voi o tron chu de. */
.voc-anh-thay-khung {
	overflow: hidden;
	border-radius: 6px;
	margin-block-end: var(--wp--preset--spacing--20, 0.5rem);
}

.voc-anh-thay-khung a {
	display: block;
	height: 100%;
}

.voc-anh-thay {
	display: block;
	width: 100%;
	height: 100%;
	background-color: var(--wp--preset--color--chu);
	background-size: cover;
	background-position: center;
	transition: transform .4s ease;
}

.wp-block-post:hover .voc-anh-thay {
	transform: scale(1.03);
}

@media (prefers-reduced-motion: reduce) {
	.voc-tron__hinh img,
	.voc-chu-de__hinh img,
	.voc-anh-thay {
		transition: none;
	}
}

/* --- Hai cot ------------------------------------------------------------ */

/*
 * `align-items: flex-start` de cot loc KHONG bi keo cao bang cot san pham.
 * Thieu no thi vien va nen cua cot loc keo dai xuong het trang, tao ra mot cot
 * mau rong hoac gan het.
 */
.voc-trang-muc {
	align-items: flex-start;
}

.voc-trang-muc__ben-trai {
	position: sticky;
	top: 1rem;
}

/* --- Cot loc ------------------------------------------------------------ */

/*
 * NHIP KHOANG CACH HOC THEO ANH CHU DAU TU GUI NGAY 11/09/2026.
 *
 * Chu dau tu: "phần danh mục - hãng, đang bị di dít quá (em có thể học khoảng
 * cách như ảnh anh gửi - học khoảng cách thôi)". Do tren anh do:
 *
 *   - moi nhom cach nhau mot vach, trong nhom co dem tren duoi ~18px
 *   - ten nhom cach dong dau ~12px
 *   - moi dong cao ~32px, KHONG co vach giua cac dong
 *   - o tick 16px, cach chu ~10px
 *
 * Bo vach giua cac dong - vach do chinh chu dau tu xin ngay 10/09/2026. Dat
 * canh anh mau thi thay no la thu lam hop loc "di dit": sau dong co sau vach,
 * mat phai doc vach truoc roi moi doc chu. Nhom cach nhau bang vach, dong cach
 * nhau bang khoang trang - hai cap bac, hai cach phan cach.
 *
 * Chi hoc KHOANG CACH. Chu, mau va o tick van theo bang mau VOC.
 */
.voc-loc {
	border: 1px solid var(--wp--preset--color--vien);
	border-radius: 8px;
	background: var(--wp--preset--color--nen-noi);
	overflow: hidden;
}

.voc-loc__nhom {
	padding: 1.1rem 1rem 1rem;
}

.voc-loc__nhom + .voc-loc__nhom {
	border-block-start: 1px solid var(--wp--preset--color--vien);
}

.voc-loc__ten {
	margin: 0 0 .75rem;
	padding: 0;
	font-size: var(--wp--preset--font-size--nho, .875rem);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--wp--preset--color--chu-nhat);
}

.voc-loc__ds {
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * Moi dong cao 44px tren dien thoai (vung cham cua ngon tay), 32px tren may de
 * ban - dung nhip cua anh mau. Xem khoi `@media (min-width: 782px)` ben duoi.
 */
.voc-loc__muc a {
	display: flex;
	align-items: center;
	gap: .65rem;
	min-height: 44px;
	padding: 0;
	color: var(--wp--preset--color--chu);
	text-decoration: none;
	font-size: var(--wp--preset--font-size--nho, .875rem);
	line-height: 1.35;
}

.voc-loc__chu { flex: 1 1 auto; min-width: 0; }

/*
 * O tick: hinh ve 16px. Dau tick la mot `::after` xoay 45 do voi hai canh vien,
 * khong dung ky tu dau tick: phong chu tieng Viet dang dung khong co ky tu do,
 * trinh duyet lay phong du phong va moi may ve dau tick mot kieu.
 */
.voc-loc__o {
	flex: 0 0 auto;
	position: relative;
	width: 16px;
	height: 16px;
	box-sizing: border-box;
	border: 1px solid var(--wp--preset--color--chu-nhat);
	border-radius: 4px;
	background: var(--wp--preset--color--nen-noi);
	transition: border-color .14s ease, background-color .14s ease;
}

.voc-loc__muc a:hover,
.voc-loc__muc a:focus-visible { color: var(--wp--preset--color--chinh); }

.voc-loc__muc a:hover .voc-loc__o,
.voc-loc__muc a:focus-visible .voc-loc__o { border-color: var(--wp--preset--color--chinh); }

/* Dang tick: o do, dau tick trang, chu dam. */
.voc-loc__muc--chon .voc-loc__o {
	border-color: var(--wp--preset--color--chinh);
	background: var(--wp--preset--color--chinh);
}

.voc-loc__muc--chon .voc-loc__o::after {
	content: "";
	position: absolute;
	left: 4.5px;
	top: 1.5px;
	width: 4px;
	height: 8px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

.voc-loc__muc--chon a {
	font-weight: 700;
	color: var(--wp--preset--color--chu);
}

.voc-loc__so {
	flex: 0 0 auto;
	color: var(--wp--preset--color--chu-nhat);
	font-size: .8em;
	font-weight: 400;
}

@media (min-width: 782px) {
	.voc-loc__muc a { min-height: 32px; }
}

/*
 * Che do tuong phan cao cua Windows bo mau nen, nen o dang tick va o chua
 * tick trong y het nhau. `CanvasText` la mau chu cua che do do - luon hien.
 */
@media (forced-colors: active) {
	.voc-loc__muc--chon .voc-loc__o { background: CanvasText; }
}

.voc-loc__gia {
	display: flex;
	align-items: center;
	gap: .4rem;
	flex-wrap: wrap;
	padding: 0;
}

/*
 * `flex: 1 1 0` chu khong phai `1 1 5rem`: cot loc rong 250px, tru dem hai ben
 * va dau gach giua thi hai o chi con ~95px moi cai. Voi be rong co so 5rem
 * (80px) cong dem, hai o khong du cho tren mot hang nen chung roi xuong hai
 * dong - do duoc tren anh chup 10/09/2026. Be rong co so 0 thi chung chia deu
 * cho con lai, bao nhieu cung vua.
 */
/*
 * O NHAP GIA THAP HON O NHAP THUONG - CHI TREN MAY DE BAN.
 *
 * Chu dau tu 10/09/2026: "chỗ khoảng giá từ-đến đang bị to thô quá". Nguyen
 * nhan: hai o nay an theo luat chung `min-height: 44px` - dung o giua mot bieu
 * mau rong ca trang thi vua mat, nhung nhet vao cot loc 250px thi hai khoi cao
 * 44px nam canh nhau chiem gan het be ngang va nang hon moi thu quanh no.
 *
 * 38px chi ap dung tu 782px tro len - dung nguong ma `wp:columns` tach ra hai
 * cot. Duoi nguong do cot loc xep chong het be ngang, o nhap khong con chat
 * nua, va luat 44px cua vung cham quay lai nguyen ven.
 *
 * Da can nhac `@media (pointer: fine)` cho dung hon (chi thu nho khi co chuot),
 * nhung bo: Chrome khong dau bao `pointer: none`, nen khong the tu chup man
 * hinh kiem tra lai ket qua - ma quy tac cua du an nay la phai NHIN duoc thu
 * minh vua sua.
 *
 * Doi lai 6px: hai o nay la buoc TINH CHINH, khong phai duong di chinh. Moi
 * dong loc con lai trong hop van cao du 44px.
 *
 * `font-size` van giu 1rem o ban dien thoai: Safari iOS tu phong to ca trang
 * khi cham vao o nhap co chu duoi 16px.
 */
.voc-loc__gia input {
	flex: 1 1 0;
	min-width: 0;
	padding-inline: .6rem;
	font-size: var(--wp--preset--font-size--nho, .875rem);
}

.voc-loc__den { color: var(--wp--preset--color--chu-nhat); }

.voc-loc__nut {
	flex: 1 0 100%;
	min-height: 44px;
	border: 0;
	border-radius: 6px;
	background: var(--wp--preset--color--chinh);
	color: #fff;
	font-weight: 600;
	cursor: pointer;
}

.voc-loc__nut:hover,
.voc-loc__nut:focus-visible { background: var(--wp--preset--color--chu); }

/*
 * PHAI DAT SAU `.voc-loc__nut` chu khong phai truoc.
 *
 * Do dac hieu bang nhau thi luat viet sau thang, va `@media` khong cong them
 * do dac hieu nao ca. Dat khoi nay len tren thi `min-height: 44px` cua nut ghi
 * de len `38px` trong day - do duoc: nut van cao dung 44px trong khi hai o
 * nhap da xuong 38px, hai thu le nhau ngay canh nhau.
 *
 * `box-sizing: border-box` la bat buoc o day: o nhap dang la `content-box`, nen
 * `min-height: 38px` chi tinh phan RUOT, cong dem 5.6px hai ben va vien 1px ra
 * thanh 51px - cao hon ca truoc khi sua. Do bang `getBoundingClientRect()`
 * ngay 10/09/2026.
 */
@media (min-width: 782px) {
	.voc-loc__gia input,
	.voc-loc__nut {
		box-sizing: border-box;
		min-height: 38px;
		padding-block: .35rem;
	}
}

/* --- Bai viet lien quan, duoi cot loc ----------------------------------- */

/*
 * Cung khung voi `.voc-loc` (vien, goc bo, nen noi) chu khong phai mot kieu
 * rieng: hai khoi nam chong nhau trong cung mot cot, khac kieu thi cot trai
 * nhin nhu ghep tu hai trang khac nhau.
 */
.voc-bai-muc {
	margin-block-start: var(--wp--preset--spacing--30, 1.5rem);
	border: 1px solid var(--wp--preset--color--vien);
	border-radius: 8px;
	background: var(--wp--preset--color--nen-noi);
	overflow: hidden;
}

.voc-bai-muc__nhan {
	margin: 0;
	padding: .75rem 1rem;
	font-size: var(--wp--preset--font-size--nho, .875rem);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--wp--preset--color--chu-nhat);
}

.voc-bai-muc__ds {
	margin: 0;
	padding: 0;
	list-style: none;
}

.voc-bai-muc__muc + .voc-bai-muc__muc {
	border-block-start: 1px solid var(--wp--preset--color--vien);
}

.voc-bai-muc__lien {
	display: flex;
	gap: .7rem;
	padding: .75rem 1rem;
	color: var(--wp--preset--color--chu);
	text-decoration: none;
}

.voc-bai-muc__lien:hover,
.voc-bai-muc__lien:focus-visible { background: var(--wp--preset--color--nen); }

/*
 * `flex: 0 0 auto` cho o anh: thieu no thi flex bop tam anh 72px lai theo do
 * dai cua tieu de ben canh, va moi bai co mot co anh khac nhau.
 */
.voc-bai-muc__hinh {
	flex: 0 0 auto;
	width: 72px;
	height: 72px;
	border-radius: 6px;
	overflow: hidden;
	background: var(--wp--preset--color--nen);
}

.voc-bai-muc__hinh img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.voc-bai-muc__chu {
	display: flex;
	flex-direction: column;
	gap: .25rem;
	min-width: 0;
}

/*
 * Cat tieu de o hai dong va tom tat o hai dong. Cot chi rong 250px, mot tieu de
 * dai khong cat se cao sau bay dong va day khoi bai duoi no ra khoi tam nhin.
 */
.voc-bai-muc__ten {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: var(--wp--preset--font-size--nho, .875rem);
	font-weight: 600;
	line-height: 1.35;
}

.voc-bai-muc__lien:hover .voc-bai-muc__ten { color: var(--wp--preset--color--chinh); }

.voc-bai-muc__tom {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: var(--wp--preset--font-size--nho, .875rem);
	line-height: 1.45;
	color: var(--wp--preset--color--chu-nhat);
}

@media (max-width: 781px) {
	/*
	 * Duoi 782px `wp:columns` xep chong, nen cot loc nam TREN danh sach san
	 * pham. Bo `sticky` di: mot khoi dinh cao nua man hinh tren dien thoai la
	 * khoi che mat thu khach dang doc.
	 */
	.voc-trang-muc__ben-trai { position: static; }

	/*
	 * Bai viet lien quan AN tren dien thoai.
	 *
	 * Duoi 782px cot loc da nam TREN danh sach san pham (chua thu gon lai
	 * duoc - ghi trong so viec con thieu). Xep them nam bai viet vao do thi
	 * khach phai cuon qua hai man hinh chu moi nhin thay san pham dau tien
	 * tren mot trang ban hang. Bai viet van doc duoc o muc Tin tuc.
	 *
	 * Day la cach chua TAM. Khi cot loc thu duoc thanh nut "Bộ lọc" thi bo
	 * luat nay di va cho khoi bai viet chay xuong duoi danh sach san pham.
	 */
	.voc-bai-muc { display: none; }

	.voc-bang-muc img.voc-bang-muc__anh { height: 160px; }
}

/*
 * =====================================================================
 * HIEN DAN KHI CUON TOI
 * =====================================================================
 *
 * Chu dau tu ngay 10/09/2026: "anh muốn thêm hiệu ứng xuất hiện khi cuộn".
 *
 * LOP `voc-cuon-hien` TREN THE <html> LA CONG TAC AN TOAN. `hien-khi-cuon.js`
 * dat lop do, va no chi dat khi trinh duyet co `IntersectionObserver` va nguoi
 * dung khong bao "giam chuyen dong". Khong co lop thi khong luat nao duoi day
 * chay, va moi thu hien binh thuong - JavaScript hong khong bao gio duoc phep
 * lam mat noi dung mot trang ban hang.
 *
 * `translateY(16px)` chu khong phai 40px: quang duong dai lam ca luoi san pham
 * troi len nhu mot tam man, va tren mot trang co 12 the thi no thanh chuyen
 * dong lien tuc suot luc cuon. 16px du de mat bat duoc "vua co gi do xuat hien"
 * ma khong keo su chu y ra khoi anh san pham.
 *
 * LAP `.voc-hien` HAI LAN LA CO Y, khong phai go nham. Do dac hieu:
 *
 *   `.wp-block-woocommerce-product-template li.wc-block-product`  = 0,2,2
 *   `.voc-cuon-hien .voc-hien`                                    = 0,2,0  (thua)
 *   `.voc-cuon-hien .voc-hien.voc-hien`                           = 0,3,0  (thang)
 *
 * The san pham tu khai bao `transition: transform .18s`. Khong lap lop thi luat
 * do thang, va cu hien dan 0.45s bi rut xuong 0.18s - van chay, nhung nhanh gan
 * ba lan y do va khong ai hieu vi sao.
 *
 * Con `:hover` cua the san pham la 0,3,2 nen no VAN thang ca ban lap - dung nhu
 * can: nang the khi ro chuot khong bi hieu ung cuon nay chan lai.
 */
.voc-cuon-hien .voc-hien.voc-hien {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity .45s ease, transform .45s cubic-bezier(0.16, 1, 0.3, 1);
}

.voc-cuon-hien .voc-hien--vao.voc-hien--vao {
	opacity: 1;
	transform: none;
}

/*
 * Bao hiem lan hai o ngay trong CSS.
 *
 * `hien-khi-cuon.js` da tu thoat khi nguoi dung bao "giam chuyen dong", nen ve
 * ly thuyet khoi nay khong bao gio can den. Van giu, vi cai gia cua no bang
 * khong con cai gia cua viec sai la khach do khong cuon duoc toi noi dung nao.
 */
@media (prefers-reduced-motion: reduce) {
	.voc-cuon-hien .voc-hien.voc-hien {
		opacity: 1;
		transform: none;
		transition: none;
	}
}