/* ===========================================================================
 * DESIGN TOKENS Ä‚Â¢Ă¢â€šÂ¬Ă¢â‚¬Â mau thuong hieu, bo goc, font
 *
 * TONG MAU: XANH LA #137a18 Ä‚Â¢Ă¢â€šÂ¬Ă¢â‚¬Â mau chu dao, dung cho nganh co khi
 * khuon mau (Cty Khuon mau Dai Hoang Vinh).
 *
 * ---------------------------------------------------------------------------
 * VI SAO CHON DUNG 3 MA NAY (doc truoc khi doi mau)
 * ---------------------------------------------------------------------------
 * `--ez-green` khong chi la mau chu Ä‚Â¢Ă¢â€šÂ¬Ă¢â‚¬Â no la NEN cua header, nut "Tim kiem",
 * nut "Mua ngay", nut so luong, va nhieu badge. Tren cac nen do chu la MAU TRANG.
 * Vi vay mau nay PHAI DU DAM: do sang (luminance) phai du thap thi chu trang moi
 * doc duoc.
 *
 *   --ez-green       #137a18  mau chu dao Ä‚Â¢Ă¢â€šÂ¬Ă¢â‚¬Â chu trang tuong phan 5.49:1  (chuan AA can 4.5)
 *                             chu vang #ffea70 tren nen nay: 4.51:1 (van DAT, sat nguong)
 *   --ez-green-dark  #023d05  dam hon (thanh tren cung, nut khi ro chuot) Ä‚Â¢Ă¢â€šÂ¬Ă¢â‚¬Â 12.56:1
 *   --ez-green-pale  #edf5eb  nhat (badge, o hover) Ä‚Â¢Ă¢â€šÂ¬Ă¢â‚¬Â chu xanh dam tren nen nay 7.75:1
 *
 * LICH SU MAU `--ez-green`:
 *   #4f6b45  ban dau (5.96:1) -> #025908  dam han (8.62:1) -> #137a18  Tuoi hon (5.49:1)
 * LÄ‚Â¡Ă‚ÂºĂ‚Â§n Ä‚â€žĂ¢â‚¬ËœÄ‚Â¡Ă‚Â»Ă¢â‚¬Â¢i cuÄ‚Â¡Ă‚Â»Ă¢â‚¬Ëœi (06-10-2026) theo yĂ„â€šĂ‚Âªu cÄ‚Â¡Ă‚ÂºĂ‚Â§u chÄ‚Â¡Ă‚Â»Ă‚Â§ shop: mĂ u #025908 quĂ„â€šĂ‚Â¡ tÄ‚Â¡Ă‚Â»Ă¢â‚¬Ëœi so vÄ‚Â¡Ă‚Â»Ă¢â‚¬Âºi web mÄ‚Â¡Ă‚ÂºĂ‚Â«u
 * cĂ„â€šĂ‚Â¹ng ngĂ nh. Ä‚â€žĂ‚ÂĂ„â€šĂ‚Â£ dĂ„â€šĂ‚Â² tÄ‚Â¡Ă‚Â»Ă‚Â«ng mĂ„â€šĂ‚Â£ Ä‚â€žĂ¢â‚¬ËœÄ‚Â¡Ă‚Â»Ă†â€™ tìm mĂ u TÄ‚â€ Ă‚Â¯Ä‚â€ Ă‚Â I NHÄ‚Â¡Ă‚ÂºĂ‚Â¤T mĂ  cĂ„â€šĂ‚Â²n Ä‚â€žĂ¢â‚¬ËœÄ‚Â¡Ă‚ÂºĂ‚Â¡t chuÄ‚Â¡Ă‚ÂºĂ‚Â©n:
 *   #137a18 -> trÄ‚Â¡Ă‚ÂºĂ‚Â¯ng 5.49:1, vĂ ng 4.51:1  (chÄ‚Â¡Ă‚Â»Ă‚Ân)
 *   #1a7f1f -> trÄ‚Â¡Ă‚ÂºĂ‚Â¯ng 5.12:1, vĂ ng 4.21:1  (LOÄ‚Â¡Ă‚ÂºĂ‚Â I: vĂ ng khĂ´ng Ä‚â€žĂ¢â‚¬ËœÄ‚Â¡Ă‚ÂºĂ‚Â¡t)
 *   #46a32b -> trÄ‚Â¡Ă‚ÂºĂ‚Â¯ng 3.21:1               (LOÄ‚Â¡Ă‚ÂºĂ‚Â I: trÄ‚Â¡Ă‚ÂºĂ‚Â¯ng khĂ´ng Ä‚â€žĂ¢â‚¬ËœÄ‚Â¡Ă‚ÂºĂ‚Â¡t)
 * Ä‚â€žĂ‚ÂÄ‚Â¡Ă‚Â»Ă‚ÂªNG sĂ„â€šĂ‚Â¡ng hÄ‚â€ Ă‚Â¡n #137a18 nÄ‚Â¡Ă‚Â»Ă‚Â¯a: chÄ‚Â¡Ă‚Â»Ă‚Â¯ vĂ ng #ffea70 (mÄ‚Â¡Ă‚Â»Ă‚Â¥c menu Ä‚â€žĂ¢â‚¬Ëœang trÄ‚Â¡Ă‚Â»Ă‚Â / hover) sÄ‚Â¡Ă‚ÂºĂ‚Â½ tÄ‚Â¡Ă‚Â»Ă‚Â¥t dÄ‚â€ Ă‚Â°Ä‚Â¡Ă‚Â»Ă¢â‚¬Âºi 4.5:1.
 * NÄ‚Â¡Ă‚ÂºĂ‚Â¿u buÄ‚Â¡Ă‚Â»Ă¢â€žÂ¢c phÄ‚Â¡Ă‚ÂºĂ‚Â£i sĂ„â€šĂ‚Â¡ng hÄ‚â€ Ă‚Â¡n thì phÄ‚Â¡Ă‚ÂºĂ‚Â£i Ä‚â€žĂ¢â‚¬ËœÄ‚Â¡Ă‚Â»Ă¢â‚¬Â¢i luĂ´n `--ez-yellow` sang tĂ´ng vĂ ng Ä‚â€žĂ¢â‚¬ËœÄ‚Â¡Ă‚ÂºĂ‚Â­m hÄ‚â€ Ă‚Â¡n.
 *
 * Ca 3 deu VUOT chuan WCAG AA.
 *
 * `--ez-red` la ten CU cua cung mau nay (giu lai de khong phai sua ~75 cho dung
 * no trong file). No KHONG phai mau do Ä‚Â¢Ă¢â€šÂ¬Ă¢â‚¬Â xem ghi chu o cac dong ben duoi.
 *
 * MUON DOI TONG MAU KHAC: chi sua 6 dong nay, ca giao dien doi theo.
 * =========================================================================== */

:root {
	
	--ez-red: #137a18;
	--ez-red-dark: #023d05;
	--ez-line: #ededed;
	--ez-promo-bg: #fdf8e8;
	--ez-promo-line: #f0e3b8;
	--ez-promo-head: #fbf1d4;

	
	--ez-green: #137a18;
	--ez-green-dark: #023d05;
	--ez-green-pale: #edf5eb;

	/*
	 * NĂ„â€šĂ‚Âºt "LiĂ„â€šĂ‚Âªn hÄ‚Â¡Ă‚Â»Ă¢â‚¬Â¡ bĂ„â€šĂ‚Â¡o giĂ„â€šĂ‚Â¡" Ä‚Â¢Ă¢â€šÂ¬Ă¢â‚¬Â mĂ u chÄ‚Â¡Ă‚Â»Ă‚Â§ shop chÄ‚Â¡Ă‚Â»Ă‚Ân riĂ„â€šĂ‚Âªng (06-10-2026), Ä‚â€žĂ¢â‚¬ËœÄ‚Â¡Ă‚ÂºĂ‚Â­m hÄ‚â€ Ă‚Â¡n `--ez-green`.
	 *
	 * TĂ„â€šĂ‚Â¡ch thĂ nh biÄ‚Â¡Ă‚ÂºĂ‚Â¿n riĂ„â€šĂ‚Âªng vì Ä‚â€žĂ¢â‚¬ËœĂ„â€šĂ‚Â¢y lĂ  mĂ u CÄ‚Â¡Ă‚Â»Ă‚Â¦A NÚT, khĂ´ng phÄ‚Â¡Ă‚ÂºĂ‚Â£i mĂ u thÄ‚â€ Ă‚Â°Ä‚â€ Ă‚Â¡ng hiÄ‚Â¡Ă‚Â»Ă¢â‚¬Â¡u: `--ez-green`
	 * cĂ„â€šĂ‚Â²n dĂ„â€šĂ‚Â¹ng cho nÄ‚Â¡Ă‚Â»Ă‚Ân header, dÄ‚Â¡Ă‚ÂºĂ‚Â£i menu, footer. NÄ‚Â¡Ă‚ÂºĂ‚Â¿u gÄ‚Â¡Ă‚Â»Ă¢â€žÂ¢p chung thì Ä‚â€žĂ¢â‚¬ËœÄ‚Â¡Ă‚Â»Ă¢â‚¬Â¢i mĂ u nĂ„â€šĂ‚Âºt sÄ‚Â¡Ă‚ÂºĂ‚Â½ kĂ©o theo
	 * Ä‚â€žĂ¢â‚¬ËœÄ‚Â¡Ă‚Â»Ă¢â‚¬Â¢i cÄ‚Â¡Ă‚ÂºĂ‚Â£ header.
	 *
	 * DĂ„â€šĂ‚Â¹ng Ä‚Â¡Ă‚Â»Ă…Â¸ HAI chÄ‚Â¡Ă‚Â»Ă¢â‚¬â€, phÄ‚Â¡Ă‚ÂºĂ‚Â£i sÄ‚Â¡Ă‚Â»Ă‚Â­a cÄ‚Â¡Ă‚ÂºĂ‚Â£ hai nÄ‚Â¡Ă‚ÂºĂ‚Â¿u Ä‚â€žĂ¢â‚¬ËœÄ‚Â¡Ă‚Â»Ă¢â‚¬Â¢i:
	 *   - ez-home.css : `.ezk-sp-nut`  (thÄ‚Â¡Ă‚ÂºĂ‚Â» sÄ‚Â¡Ă‚ÂºĂ‚Â£n phÄ‚Â¡Ă‚ÂºĂ‚Â©m Ä‚Â¡Ă‚Â»Ă…Â¸ TRANG CHÄ‚Â¡Ă‚Â»Ă‚Â¦)
	 *   - ez-shop.css : `ul.products .ast-on-card-button`, `.button.ez-quote-btn` (TRANG CÄ‚Â¡Ă‚Â»Ă‚Â¬A HĂ„â€šĂ¢â€šÂ¬NG)
	 *
	 * TÄ‚â€ Ă‚Â°Ä‚â€ Ă‚Â¡ng phÄ‚Â¡Ă‚ÂºĂ‚Â£n vÄ‚Â¡Ă‚Â»Ă¢â‚¬Âºi chÄ‚Â¡Ă‚Â»Ă‚Â¯ trÄ‚Â¡Ă‚ÂºĂ‚Â¯ng: 8.29:1 Ä‚Â¢Ă¢â€šÂ¬Ă¢â‚¬Â vÄ‚â€ Ă‚Â°Ä‚Â¡Ă‚Â»Ă‚Â£t chuÄ‚Â¡Ă‚ÂºĂ‚Â©n AA (4.5:1).
	 */
	--ez-quote-bg: #015c05;

	
	--ez-yellow: #ffea70;
	--ez-pink: #fff5f6;
	--ez-pink-price: #ffa7ab;
	--ez-radius: 10px;
	--ez-radius-sm: 5px;
	--ez-font: "Montserrat", "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* CSS note */

/* CSS note */
body.home .entry-header,
body.page-id-2 .entry-header {
	display: none;
}

/*
 * KhÄ‚Â¡Ă‚Â»Ă¢â‚¬Ëœi "SÄ‚Â¡Ă‚ÂºĂ‚Â£n phÄ‚Â¡Ă‚ÂºĂ‚Â©m bĂ„â€šĂ‚Â¡n chÄ‚Â¡Ă‚ÂºĂ‚Â¡y" Ä‚Â¡Ă‚Â»Ă…Â¸ trang chÄ‚Â¡Ă‚Â»Ă‚Â§ (`.ez-bestsellers`, `.ez-bs-banner`,
 * `.ez-bs-carousel`, `.ez-bs-title`, `.ez-bs-inner`, `.ez-bs-nav`Ä‚Â¢Ă¢â€šÂ¬Ă‚Â¦) Ä‚Â¢Ă¢â€šÂ¬Ă¢â‚¬Â Ă„ÂÄ‚Æ’ XĂ„â€šĂ¢â‚¬Å“A.
 *
 * KhÄ‚Â¡Ă‚Â»Ă¢â‚¬Ëœi Ä‚â€žĂ¢â‚¬ËœĂ„â€šĂ‚Â³ Ä‚â€žĂ¢â‚¬ËœĂ„â€šĂ‚Â£ gÄ‚Â¡Ă‚Â»Ă‚Â¡ cĂ„â€šĂ‚Â¹ng shortcode [ez_best_sellers] vĂ  khung tick trong admin.
 * GIÄ‚Â¡Ă‚Â»Ă‚Â® LÄ‚Â¡Ă‚ÂºĂ‚Â I `.ez-bs-grid` + `.ez-cols-*` ngay dÄ‚â€ Ă‚Â°Ä‚Â¡Ă‚Â»Ă¢â‚¬Âºi Ä‚â€žĂ¢â‚¬ËœĂ„â€šĂ‚Â¢y: trang danh mÄ‚Â¡Ă‚Â»Ă‚Â¥c, khÄ‚Â¡Ă‚Â»Ă¢â‚¬Ëœi danh mÄ‚Â¡Ă‚Â»Ă‚Â¥c
 * trang chÄ‚Â¡Ă‚Â»Ă‚Â§, tìm kiÄ‚Â¡Ă‚ÂºĂ‚Â¿m vĂ  khÄ‚Â¡Ă‚Â»Ă¢â‚¬Ëœi tin tÄ‚Â¡Ă‚Â»Ă‚Â©c Ä‚â€žĂ¢â‚¬ËœÄ‚Â¡Ă‚Â»Ă‚Âu dĂ„â€šĂ‚Â¹ng chung hai class Ä‚â€žĂ¢â‚¬ËœĂ„â€šĂ‚Â³ Ä‚â€žĂ¢â‚¬ËœÄ‚Â¡Ă‚Â»Ă†â€™ xÄ‚Â¡Ă‚ÂºĂ‚Â¿p lÄ‚â€ Ă‚Â°Ä‚Â¡Ă‚Â»Ă¢â‚¬Âºi.
 */

.ez-bs-grid {
	display: grid;
	gap: 12px;
	margin-top: 0;
	padding: 0;
}

.ez-bs-grid.ez-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.ez-bs-grid.ez-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ez-bs-grid.ez-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ez-bs-grid.ez-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ez-bs-grid.ez-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.ez-bs-grid.ez-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }

.ez-card {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 14px 10px 10px;
	border: 1px solid #ddd;
	border-radius: var(--ez-radius-sm);
	background: #fff;
	text-align: center;
}

/*
 * NhĂ„â€šĂ‚Â£n "HOT" Ä‚Â¡Ă‚Â»Ă…Â¸ gĂ„â€šĂ‚Â³c thÄ‚Â¡Ă‚ÂºĂ‚Â» sÄ‚Â¡Ă‚ÂºĂ‚Â£n phÄ‚Â¡Ă‚ÂºĂ‚Â©m (trang chÄ‚Â¡Ă‚Â»Ă‚Â§ + danh mÄ‚Â¡Ă‚Â»Ă‚Â¥c).
 *
 * Ghi mĂ„â€šĂ‚Â£ mĂ u trÄ‚Â¡Ă‚Â»Ă‚Â±c tiÄ‚Â¡Ă‚ÂºĂ‚Â¿p thay vì `var(--ez-red)`: biÄ‚Â¡Ă‚ÂºĂ‚Â¿n Ä‚â€žĂ¢â‚¬ËœĂ„â€šĂ‚Â³ hiÄ‚Â¡Ă‚Â»Ă¢â‚¬Â¡n lĂ  mĂ u xanh thÄ‚â€ Ă‚Â°Ä‚â€ Ă‚Â¡ng hiÄ‚Â¡Ă‚Â»Ă¢â‚¬Â¡u
 * (xanh rĂ„â€šĂ‚Âªu) nĂ„â€šĂ‚Âªn nhĂ„â€šĂ‚Â£n bÄ‚Â¡Ă‚Â»Ă¢â‚¬Â¹ ra mĂ u xanh. NhĂ„â€šĂ‚Â£n HOT cÄ‚Â¡Ă‚ÂºĂ‚Â§n mĂ u Ä‚â€žĂ¢â‚¬ËœÄ‚Â¡Ă‚Â»Ă‚Â cho nÄ‚Â¡Ă‚Â»Ă¢â‚¬Â¢i.
 */
.ez-card-hot {
	position: absolute;
	top: 0;
	left: 0;
	padding: 3px 10px;
	border-radius: 4px 0 8px 0;
	background: #d32517;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.5px;
}

.ez-card-thumb {
	display: flex;
	align-items: center;
	justify-content: center;
	
	height: 160px;
	margin: 10px 0 6px;
	border: 0;
	border-radius: var(--ez-radius);
	background: #fff;
	overflow: hidden;
}

.ez-card-thumb img {
	/*
	 * Ä‚Â¡Ă‚ÂºĂ‚Â¢nh Ä‚â€žĂ¢â‚¬ËœÄ‚â€ Ă‚Â°Ä‚Â¡Ă‚Â»Ă‚Â£c phĂ©p chiÄ‚Â¡Ă‚ÂºĂ‚Â¿m hÄ‚Â¡Ă‚ÂºĂ‚Â¿t khung (trÄ‚â€ Ă‚Â°Ä‚Â¡Ă‚Â»Ă¢â‚¬Âºc Ä‚â€žĂ¢â‚¬ËœĂ„â€šĂ‚Â¢y giÄ‚Â¡Ă‚Â»Ă¢â‚¬Âºi hÄ‚Â¡Ă‚ÂºĂ‚Â¡n 70% nĂ„â€šĂ‚Âªn Ä‚Â¡Ă‚ÂºĂ‚Â£nh nhÄ‚Â¡Ă‚Â»Ă‚Â).
	 * VÄ‚Â¡Ă‚ÂºĂ‚Â«n giÄ‚Â¡Ă‚Â»Ă‚Â¯ `width/height: auto` + `object-fit: contain` Ä‚â€žĂ¢â‚¬ËœÄ‚Â¡Ă‚Â»Ă†â€™ Ä‚Â¡Ă‚ÂºĂ‚Â£nh KHĂ„â€šĂ¢â‚¬ÂNG bÄ‚Â¡Ă‚Â»Ă¢â‚¬Â¹ mĂ©o:
	 * Ä‚Â¡Ă‚ÂºĂ‚Â£nh chÄ‚Â¡Ă‚Â»Ă¢â‚¬Â° to lĂ„â€šĂ‚Âªn tÄ‚Â¡Ă‚Â»Ă¢â‚¬Âºi khi chÄ‚Â¡Ă‚ÂºĂ‚Â¡m mĂ©p khung lĂ  dÄ‚Â¡Ă‚Â»Ă‚Â«ng.
	 */
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	margin: 0;
	transition: transform 0.3s ease;

	/*
	 * Astra puts a black glow on every image inside `.ast-article-single`:
	 *   .ast-article-single figure,
	 *   .ast-article-single img:not(figure img) { box-shadow: 0 0 30px 0 rgba(0,0,0,.15); }
	 * Product pages are `.ast-article-single` too, so that shadow shows up around
	 * the image inside every product card (related products, best sellers, ...).
	 * `!important` is used on purpose: Astra also sets the -webkit-/-moz- prefixes,
	 * and this must win no matter how the theme is loaded.
	 */
	box-shadow: none !important;
	-webkit-box-shadow: none !important;
	-moz-box-shadow: none !important;
}

/* Product card */
.ez-card:hover .ez-card-thumb img,
.ez-card-thumb:focus img {
	transform: scale(1.06);
}

/* Product card */
.ez-card-unit {
	margin: 2px 0 8px;
}

.ez-card-unit span {
	display: inline-block;
	padding: 0 10px;
	border-radius: var(--ez-radius-sm);
	background: var(--ez-pink);
	color: var(--ez-red);
	font-family: var(--ez-font);
	font-size: 11px;
	font-weight: 300;
	line-height: 20px;
}

.ez-card-title {
	min-height: 63px;
	margin: 4px 0 8px;
	font-family: var(--ez-font);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.6;
	
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
}

.ez-card-title a {
	color: #222;
	text-decoration: none;
}

.ez-card-title a:hover {
	color: var(--ez-red);
}

.ez-card-meta {
	margin: 0 0 8px;
	padding: 0;
	list-style: none;
	font-family: var(--ez-font);
	font-size: 12.5px;
	line-height: 1.6;
	color: #555;
}

.ez-card-meta li span {
	color: #333;
}

/* Product card */

.ez-card-price {
	margin: 2px 0 12px;
	color: var(--ez-red);
	font-family: var(--ez-font);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.5;
}

.ez-card-price del {
	margin-right: 4px;
	color: #999;
	font-weight: 400;
}

.ez-card-price ins {
	text-decoration: none;
}

.ez-price-contact {
	color: #666;
	font-weight: 600;
	letter-spacing: 0.3px;
}

/* Product card */
.ez-card-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin-top: auto;
	padding: 0 10px;
	border: 1px solid #ddd;
	border-radius: var(--ez-radius-sm);
	background: #fff;
	color: var(--ez-red) !important;
	font-family: var(--ez-font);
	font-size: 13px;
	font-weight: 600;
	line-height: 33px;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	transition: background 0.15s ease, color 0.15s ease;
}

/* Product card */
.ez-card-btn::after {
	content: "";
	display: inline-block;
	width: 8px;
	height: 8px;
	border-top: 2px solid currentColor;
	border-right: 2px solid currentColor;
	border-radius: 1px;
	transform: translateY(-1px) rotate(45deg);
}

.ez-card-btn:hover,
.ez-card-btn:focus {
	background: var(--ez-red);
	border-color: var(--ez-red);
	color: #fff !important;
}

/*
 * Khoi "San deal hoi" o trang chu (.ez-deal, .ez-deal-card, .ez-deal-nav...) va
 * phan carousel cua khoi "San pham ban chay" (.ez-bs-carousel, .ez-bs-nav...)
 * DA XOA cung hai khoi do.
 *
 * Da kiem tra truoc khi xoa: khong file PHP nao con dung cac class nay.
 */

/* Home category section */

.ez-pcat {
	margin: 0 0 42px;
}

.ez-pcat-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 16px;
}

.ez-pcat-title {
	margin: 0;
	font-family: var(--ez-font);
	font-size: 20px;      /* trÄ‚â€ Ă‚Â°Ä‚Â¡Ă‚Â»Ă¢â‚¬Âºc lĂ  25px - hÄ‚Â¡Ă‚ÂºĂ‚Â¡ xuÄ‚Â¡Ă‚Â»Ă¢â‚¬Ëœng cho gÄ‚Â¡Ă‚Â»Ă‚Ân (yĂ„â€šĂ‚Âªu cÄ‚Â¡Ă‚ÂºĂ‚Â§u) */
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0.3px;
	text-transform: uppercase;
	color: var(--ez-green);   /* xanh rĂ„â€šĂ‚Âªu thÄ‚â€ Ă‚Â°Ä‚â€ Ă‚Â¡ng hiÄ‚Â¡Ă‚Â»Ă¢â‚¬Â¡u; trÄ‚â€ Ă‚Â°Ä‚Â¡Ă‚Â»Ă¢â‚¬Âºc lĂ  #383838 (xĂ„â€šĂ‚Â¡m Ä‚â€žĂ¢â‚¬ËœÄ‚Â¡Ă‚ÂºĂ‚Â­m) */
}

.ez-pcat-title a {
	color: inherit;
	text-decoration: none;
}

.ez-pcat-title a:hover {
	color: var(--ez-red);
}

/* Home category section */
.ez-pcat-seeall {
	flex: 0 0 auto;
	padding: 8px 16px;
	border: 1px solid var(--ez-red);
	border-radius: 25px;
	background: var(--ez-red);
	color: #fff;
	font-family: var(--ez-font);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
	text-decoration: none;
	text-transform: uppercase;
	white-space: nowrap;
	transition: background 0.15s ease, color 0.15s ease;
}

.ez-pcat-seeall::after {
	content: "";
	display: inline-block;
	width: 7px;
	height: 7px;
	margin-left: 7px;
	border-top: 2px solid currentColor;
	border-right: 2px solid currentColor;
	transform: translateY(-1px) rotate(45deg);
}

.ez-pcat-seeall:hover,
.ez-pcat-seeall:focus {
	border-color: var(--ez-red);
	background: #fff;
	color: var(--ez-red);
}

/*
 * ĐIÄ‚Â¡Ă‚Â»Ă¢â‚¬Â N THOÄ‚Â¡Ă‚ÂºĂ‚Â I: Ä‚Â¡Ă‚ÂºĂ‚Â©n nĂ„â€šĂ‚Âºt "XEM TÄ‚Â¡Ă‚ÂºĂ‚Â¤T CÄ‚Â¡Ă‚ÂºĂ‚Â¢" cÄ‚Â¡Ă‚Â»Ă‚Â§a KHÄ‚Â¡Ă‚Â»Ă‚ÂI DANH MÄ‚Â¡Ă‚Â»Ă‚Â¤C Ä‚Â¡Ă‚Â»Ă‚Âž TRANG CHÄ‚Â¡Ă‚Â»Ă‚Â¦.
 *
 * Khoanh Ä‚â€žĂ¢â‚¬ËœĂ„â€šĂ‚Âºng `.ez-cat-section` (class riĂ„â€šĂ‚Âªng cÄ‚Â¡Ă‚Â»Ă‚Â§a khÄ‚Â¡Ă‚Â»Ă¢â‚¬Ëœi [ez_category_section] Ä‚Â¡Ă‚Â»Ă…Â¸ trang chÄ‚Â¡Ă‚Â»Ă‚Â§ -
 * category-section.php). CĂ„â€šĂ‚Â¹ng class `.ez-pcat-seeall` cĂ„â€šĂ‚Â²n dĂ„â€šĂ‚Â¹ng Ä‚Â¡Ă‚Â»Ă…Â¸ 3 chÄ‚Â¡Ă‚Â»Ă¢â‚¬â€ khĂ„â€šĂ‚Â¡c: khÄ‚Â¡Ă‚Â»Ă¢â‚¬Ëœi
 * [ez_category_products], khÄ‚Â¡Ă‚Â»Ă¢â‚¬Ëœi danh mÄ‚Â¡Ă‚Â»Ă‚Â¥c Ä‚Â¡Ă‚Â»Ă…Â¸ TRANG DANH MÄ‚Â¡Ă‚Â»Ă‚Â¤C, vĂ  khÄ‚Â¡Ă‚Â»Ă¢â‚¬Ëœi TIN TÄ‚Â¡Ă‚Â»Ă‚Â¨C Ä‚Â¡Ă‚Â»Ă…Â¸ trang chÄ‚Â¡Ă‚Â»Ă‚Â§
 * (`.ez-news`) - ba chÄ‚Â¡Ă‚Â»Ă¢â‚¬â€ Ä‚â€žĂ¢â‚¬ËœĂ„â€šĂ‚Â³ VÄ‚Â¡Ă‚ÂºĂ‚ÂªN GIÄ‚Â¡Ă‚Â»Ă‚Â® nĂ„â€šĂ‚Âºt, nĂ„â€šĂ‚Âªn TUYÄ‚Â¡Ă‚Â»Ă¢â‚¬Â T Ä‚â€žĂ‚ÂÄ‚Â¡Ă‚Â»Ă‚ÂI khĂ´ng Ä‚Â¡Ă‚ÂºĂ‚Â©n trÄ‚Â¡Ă‚ÂºĂ‚Â§n `.ez-pcat-seeall`
 * (lĂ m vÄ‚Â¡Ă‚ÂºĂ‚Â­y lĂ  mÄ‚Â¡Ă‚ÂºĂ‚Â¥t nĂ„â€šĂ‚Âºt Ä‚Â¡Ă‚Â»Ă…Â¸ cÄ‚Â¡Ă‚ÂºĂ‚Â£ tin tÄ‚Â¡Ă‚Â»Ă‚Â©c lÄ‚Â¡Ă‚ÂºĂ‚Â«n trang danh mÄ‚Â¡Ă‚Â»Ă‚Â¥c).
 *
 * TiĂ„â€šĂ‚Âªu Ä‚â€žĂ¢â‚¬ËœÄ‚Â¡Ă‚Â»Ă‚Â khÄ‚Â¡Ă‚Â»Ă¢â‚¬Ëœi vÄ‚Â¡Ă‚ÂºĂ‚Â«n lĂ  link sang trang danh mÄ‚Â¡Ă‚Â»Ă‚Â¥c, nĂ„â€šĂ‚Âªn khĂ„â€šĂ‚Â¡ch Ä‚â€žĂ¢â‚¬ËœiÄ‚Â¡Ă‚Â»Ă¢â‚¬Â¡n thoÄ‚Â¡Ă‚ÂºĂ‚Â¡i vÄ‚Â¡Ă‚ÂºĂ‚Â«n vĂ o danh mÄ‚Â¡Ă‚Â»Ă‚Â¥c Ä‚â€žĂ¢â‚¬ËœÄ‚â€ Ă‚Â°Ä‚Â¡Ă‚Â»Ă‚Â£c.
 */
@media (max-width: 782px) {
	.ez-cat-section .ez-pcat-seeall {
		display: none;
	}

	/*
	 * ...vĂ  Ä‚Â¡Ă‚ÂºĂ‚Â©n LUĂ„â€šĂ¢â‚¬ÂN dĂ„â€šĂ‚Â£y "tab" danh mÄ‚Â¡Ă‚Â»Ă‚Â¥c con (9 Ă´: HÄ‚Â¡Ă‚Â»Ă¢â‚¬â€ trÄ‚Â¡Ă‚Â»Ă‚Â£ BÄ‚Â¡Ă‚Â»Ă¢â‚¬Â¡nh tiÄ‚Â¡Ă‚Â»Ă†â€™u Ä‚â€žĂ¢â‚¬ËœÄ‚â€ Ă‚Â°Ä‚Â¡Ă‚Â»Ă‚Âng & HuyÄ‚Â¡Ă‚ÂºĂ‚Â¿t Ă„â€šĂ‚Â¡p (0)Ä‚Â¢Ă¢â€šÂ¬Ă‚Â¦).
	 * TrĂ„â€šĂ‚Âªn Ä‚â€žĂ¢â‚¬ËœiÄ‚Â¡Ă‚Â»Ă¢â‚¬Â¡n thoÄ‚Â¡Ă‚ÂºĂ‚Â¡i chĂ„â€šĂ‚Âºng xuÄ‚Â¡Ă‚Â»Ă¢â‚¬Ëœng mÄ‚Â¡Ă‚Â»Ă¢â‚¬â€i Ă´ mÄ‚Â¡Ă‚Â»Ă¢â€žÂ¢t dĂ„â€šĂ‚Â²ng nĂ„â€šĂ‚Âªn chiÄ‚Â¡Ă‚ÂºĂ‚Â¿m gÄ‚Â¡Ă‚ÂºĂ‚Â§n nÄ‚Â¡Ă‚Â»Ă‚Â­a mĂ n hình trÄ‚â€ Ă‚Â°Ä‚Â¡Ă‚Â»Ă¢â‚¬Âºc khi tÄ‚Â¡Ă‚Â»Ă¢â‚¬Âºi
	 * sÄ‚Â¡Ă‚ÂºĂ‚Â£n phÄ‚Â¡Ă‚ÂºĂ‚Â©m. PC giÄ‚Â¡Ă‚Â»Ă‚Â¯ nguyĂ„â€šĂ‚Âªn.
	 *
	 * CÅ©ng khoanh trong `.ez-cat-section` (khÄ‚Â¡Ă‚Â»Ă¢â‚¬Ëœi danh mÄ‚Â¡Ă‚Â»Ă‚Â¥c Ä‚Â¡Ă‚Â»Ă…Â¸ trang chÄ‚Â¡Ă‚Â»Ă‚Â§) - KHĂ„â€šĂ¢â‚¬ÂNG Ä‚Â¡Ă‚ÂºĂ‚Â©n trÄ‚Â¡Ă‚ÂºĂ‚Â§n
	 * `.ez-pcat-chips`, vì class Ä‚â€žĂ¢â‚¬ËœĂ„â€šĂ‚Â³ cĂ„â€šĂ‚Â²n dĂ„â€šĂ‚Â¹ng Ä‚Â¡Ă‚Â»Ă…Â¸ khÄ‚Â¡Ă‚Â»Ă¢â‚¬Ëœi [ez_category_products] (Ä‚â€žĂ¢â‚¬ËœĂ„â€šĂ‚Â³ mÄ‚Â¡Ă‚Â»Ă¢â‚¬Âºi lĂ 
	 * tablist thÄ‚Â¡Ă‚ÂºĂ‚Â­t, bÄ‚Â¡Ă‚ÂºĂ‚Â¥m Ä‚â€žĂ¢â‚¬ËœÄ‚Â¡Ă‚Â»Ă†â€™ chuyÄ‚Â¡Ă‚Â»Ă†â€™n sÄ‚Â¡Ă‚ÂºĂ‚Â£n phÄ‚Â¡Ă‚ÂºĂ‚Â©m - Ä‚Â¡Ă‚ÂºĂ‚Â©n Ä‚â€žĂ¢â‚¬Ëœi lĂ  mÄ‚Â¡Ă‚ÂºĂ‚Â¥t chÄ‚Â¡Ă‚Â»Ă‚Â©c nĂ„Æ’ng) vĂ  Ä‚Â¡Ă‚Â»Ă…Â¸ khÄ‚Â¡Ă‚Â»Ă¢â‚¬Ëœi danh mÄ‚Â¡Ă‚Â»Ă‚Â¥c
	 * trĂ„â€šĂ‚Âªn trang danh mÄ‚Â¡Ă‚Â»Ă‚Â¥c.
	 */
	.ez-cat-section .ez-pcat-chips {
		display: none;
	}
}

/* Home category section */
.ez-pcat-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	overflow-x: auto;
	margin: 0 0 22px;
}

.ez-pcat-chip {
	padding: 8px 10px;
	border: 1px solid var(--ez-red);
	border-radius: var(--ez-radius-sm);
	background: #fff;
	color: #333;
	font-family: var(--ez-font);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.3;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
}

.ez-pcat-chip:hover,
.ez-pcat-chip:focus {
	background: var(--ez-pink);
	color: var(--ez-red);
}

.ez-pcat-chip.is-active {
	border-color: var(--ez-red);
	background: var(--ez-red);
	color: #fff;
}

/* Home category section */
.ez-pcat.is-light {
	margin-left: -14px;
	margin-right: -14px;
	padding: 24px 14px;
	background: var(--ez-pink);
}

/* Home category section */
.ez-pcat-grid {
	margin-top: 0;
	padding: 0;
}

/* Home category section */
.ez-pcat-found {
	margin: 0 0 36px;
}

/* Home category section */
.ez-cat-section {
	margin-top: 20px;
}

.ez-pcat-found .ez-pcat-chip {
	display: inline-block;
	text-decoration: none;
}

.ez-pcat-found .ez-pcat-chip-n {
	margin-left: 4px;
	color: #999;
	font-weight: 400;
}

.ez-pcat-found .ez-pcat-chip:hover .ez-pcat-chip-n {
	color: inherit;
}

.ez-pcat-empty {
	margin: 0;
	padding: 24px 0;
	color: #666;
	font-family: var(--ez-font);
	font-size: 15px;
}

/* Home category section */
.tax-product_cat .ez-pcat-found .ez-pcat-head,
.term-description .ez-pcat-found .ez-pcat-head {
	display: none;
}

/* WooCommerce screens */

/*
 * KhÄ‚Â¡Ă‚Â»Ă¢â‚¬Ëœi "MĂ´ tÄ‚Â¡Ă‚ÂºĂ‚Â£ sÄ‚Â¡Ă‚ÂºĂ‚Â£n phÄ‚Â¡Ă‚ÂºĂ‚Â©m" (.ez-desc, .ez-desc-nav, .ez-desc-secÄ‚Â¢Ă¢â€šÂ¬Ă‚Â¦) Ä‚Â¢Ă¢â€šÂ¬Ă¢â‚¬Â Ă„ÂÄ‚Æ’ GÄ‚Â¡Ă‚Â»Ă‚Â  CĂ„â€šĂ¢â€žÂ¢NG KHÄ‚Â¡Ă‚Â»Ă‚ÂI.
 *
 * TrÄ‚â€ Ă‚Â°Ä‚Â¡Ă‚Â»Ă¢â‚¬Âºc Ä‚â€žĂ¢â‚¬ËœĂ„â€šĂ‚Â¢y khÄ‚Â¡Ă‚Â»Ă¢â‚¬Ëœi nĂ y tÄ‚Â¡Ă‚ÂºĂ‚Â¡o kiÄ‚Â¡Ă‚Â»Ă†â€™u cho menu 6 mÄ‚Â¡Ă‚Â»Ă‚Â¥c (ThĂ nh phÄ‚Â¡Ă‚ÂºĂ‚Â§n · CĂ´ng dÄ‚Â¡Ă‚Â»Ă‚Â¥ng · CĂ„â€šĂ‚Â¡ch dĂ„â€šĂ‚Â¹ng ·
 * TĂ„â€šĂ‚Â¡c dÄ‚Â¡Ă‚Â»Ă‚Â¥ng phÄ‚Â¡Ă‚Â»Ă‚Â¥ · LÆ°u Ă„â€šĂ‚Â½ · BÄ‚Â¡Ă‚ÂºĂ‚Â£o quÄ‚Â¡Ă‚ÂºĂ‚Â£n) Ä‚Â¡Ă‚Â»Ă…Â¸ trang chi tiÄ‚Â¡Ă‚ÂºĂ‚Â¿t sÄ‚Â¡Ă‚ÂºĂ‚Â£n phÄ‚Â¡Ă‚ÂºĂ‚Â©m. KhÄ‚Â¡Ă‚Â»Ă¢â‚¬Ëœi Ä‚â€žĂ¢â‚¬ËœĂ„â€šĂ‚Â³ Ä‚â€žĂ¢â‚¬ËœĂ„â€šĂ‚Â£ bÄ‚Â¡Ă‚Â»Ă‚Â
 * (file inc/product-description.php Ä‚â€žĂ¢â‚¬ËœĂ„â€šĂ‚Â£ xĂ„â€šĂ‚Â³a) nĂ„â€šĂ‚Âªn toĂ n bÄ‚Â¡Ă‚Â»Ă¢â€žÂ¢ CSS cÄ‚Â¡Ă‚Â»Ă‚Â§a nĂ„â€šĂ‚Â³ Ä‚â€žĂ¢â‚¬ËœĂ„â€šĂ‚Â£ xĂ„â€šĂ‚Â³a cho nhÄ‚Â¡Ă‚ÂºĂ‚Â¹ file.
 */

/* Responsive tweaks */

/* Home banner slider */

.ez-bn {
	margin: 0 0 24px;
	font-family: var(--ez-font);
}

/*
 * .ez-bn-inner giÄ‚Â¡Ă‚Â»Ă‚Â chÄ‚Â¡Ă‚Â»Ă¢â‚¬Â° cĂ„â€šĂ‚Â²n 1 con (slider). CÄ‚Â¡Ă‚Â»Ă¢â€žÂ¢t phÄ‚Â¡Ă‚ÂºĂ‚Â£i Ä‚â€žĂ¢â‚¬ËœĂ„â€šĂ‚Â£ gÄ‚Â¡Ă‚Â»Ă‚Â¡ nĂ„â€šĂ‚Âªn bÄ‚Â¡Ă‚Â»Ă‚Â flex vĂ  cĂ„â€šĂ‚Â¡c bÄ‚Â¡Ă‚Â»Ă‚Â
 * rÄ‚Â¡Ă‚Â»Ă¢â€žÂ¢ng 2/3 Ä‚Â¢Ă¢â€šÂ¬Ă¢â‚¬Â slider chiÄ‚Â¡Ă‚ÂºĂ‚Â¿m trÄ‚Â¡Ă‚Â»Ă‚Ân chiÄ‚Â¡Ă‚Â»Ă‚Âu rÄ‚Â¡Ă‚Â»Ă¢â€žÂ¢ng.
 */
.ez-bn-inner {
	display: block;
}

.ez-bn-slider {
	position: relative;
	overflow: hidden;
	width: 100%;
	max-width: 100%;
	border-radius: var(--ez-radius);
	background: #f4f4f4;
}

.ez-bn-track {
	display: flex;
	transition: transform 0.5s ease;
	will-change: transform;
}

.ez-bn-slide {
	flex: 0 0 100%;
	max-width: 100%;
}

.ez-bn-slide img,
.ez-bn-imglink img {
	display: block;
	width: 100%;
	height: auto;
}

/* Home banner slider */
.ez-bn-nav {
	position: absolute;
	top: 50%;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin-top: -20px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: #ccc;
	opacity: 0.7;
	cursor: pointer;
	transition: opacity 0.15s ease, color 0.15s ease, background 0.15s ease;
}

/* Home banner slider */
.ez-bn-nav:hover {
	background: var(--ez-green);
	color: #fff;
	opacity: 1;
}

.ez-bn-nav:focus {
	color: #fff;
	opacity: 1;
}

.ez-bn-prev {
	left: 0;
}

.ez-bn-next {
	right: 0;
}

/* Home banner slider */
.ez-bn-dots {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 10px;
	z-index: 2;
	display: flex;
	justify-content: center;
	gap: 8px;
}

.ez-bn-dot {
	width: 12px;
	height: 12px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #fff;
	opacity: 0.6;
	cursor: pointer;
}

.ez-bn-dot.is-active {
	background: var(--ez-yellow);
	opacity: 1;
}

/*
 * CÄ‚Â¡Ă‚Â»Ă¢â€žÂ¢t phÄ‚Â¡Ă‚ÂºĂ‚Â£i cÄ‚Â¡Ă‚Â»Ă‚Â§a banner trang chÄ‚Â¡Ă‚Â»Ă‚Â§ (.ez-bn-side, .ez-bn-banner, .ez-bn-links,
 * .ez-bn-item, .ez-bn-item-name) Ä‚Â¢Ă¢â€šÂ¬Ă¢â‚¬Â Ă„ÂÄ‚Æ’ XĂ„â€šĂ¢â‚¬Å“A cĂ„â€šĂ‚Â¹ng cÄ‚Â¡Ă‚Â»Ă¢â€žÂ¢t Ä‚â€žĂ¢â‚¬ËœĂ„â€šĂ‚Â³.
 *
 * CÄ‚Â¡Ă‚Â»Ă¢â€žÂ¢t phÄ‚Â¡Ă‚ÂºĂ‚Â£i gÄ‚Â¡Ă‚Â»Ă¢â‚¬Å“m 1 Ä‚Â¡Ă‚ÂºĂ‚Â£nh banner + 3 Ă´ bÄ‚Â¡Ă‚ÂºĂ‚Â¥m; Ä‚â€žĂ¢â‚¬ËœĂ„â€šĂ‚Â£ gÄ‚Â¡Ă‚Â»Ă‚Â¡ khÄ‚Â¡Ă‚Â»Ă‚Âi HTML nĂ„â€šĂ‚Âªn CSS cÅ©ng bÄ‚Â¡Ă‚Â»Ă‚Â.
 */

/* Home banner slider */
@media (max-width: 1100px) {
	.ez-bn-desktop {
		display: none;
	}
}

@media (max-width: 782px) {
	.ez-bn-slider {
		max-width: 100%;
	}
}

/* ===========================================================================
 * HIÄ‚Â¡Ă‚Â»Ă¢â‚¬Â U Ä‚Â¡Ă‚Â»Ă‚Â¨NG ZOOM NHÄ‚Â¡Ă‚ÂºĂ‚Â¸ KHI RÊ CHUÄ‚Â¡Ă‚Â»Ă‹Å“T Ä‚Â¡Ă‚Â»Ă‚Âž BANNER TRANG CHÄ‚Â¡Ă‚Â»Ă‚Â¦
 *
 *   Slider (.ez-bn-slider) - rĂ„â€šĂ‚Âª vĂ o lĂ  Ä‚Â¡Ă‚ÂºĂ‚Â£nh banner phĂ„â€šĂ‚Â³ng nhÄ‚Â¡Ă‚ÂºĂ‚Â¹.
 *
 * ĐiÄ‚Â¡Ă‚Â»Ă‚Âu kiÄ‚Â¡Ă‚Â»Ă¢â‚¬Â¡n Ä‚â€žĂ¢â‚¬ËœÄ‚Â¡Ă‚Â»Ă†â€™ zoom khĂ´ng lĂ m vÄ‚Â¡Ă‚Â»Ă‚Â¡ bÄ‚Â¡Ă‚Â»Ă¢â‚¬Ëœ cÄ‚Â¡Ă‚Â»Ă‚Â¥c: khung cha phÄ‚Â¡Ă‚ÂºĂ‚Â£i cĂ„â€šĂ‚Â³ `overflow: hidden`.
 *   - .ez-bn-slider Ä‚â€žĂ¢â‚¬ËœĂ„â€šĂ‚Â£ cĂ„â€šĂ‚Â³ sÄ‚Â¡Ă‚ÂºĂ‚Âµn `overflow: hidden`
 *   - riĂ„â€šĂ‚Âªng .ez-bn-slide thì chÆ°a, nĂ„â€šĂ‚Âªn thĂ„â€šĂ‚Âªm Ä‚Â¡Ă‚Â»Ă…Â¸ dÄ‚â€ Ă‚Â°Ä‚Â¡Ă‚Â»Ă¢â‚¬Âºi
 * NhÄ‚Â¡Ă‚Â»Ă‚Â vÄ‚Â¡Ă‚ÂºĂ‚Â­y Ä‚Â¡Ă‚ÂºĂ‚Â£nh phĂ„â€šĂ‚Â³ng lĂ„â€šĂ‚Âªn vÄ‚Â¡Ă‚ÂºĂ‚Â«n bÄ‚Â¡Ă‚Â»Ă¢â‚¬Â¹ cÄ‚Â¡Ă‚ÂºĂ‚Â¯t gÄ‚Â¡Ă‚Â»Ă‚Ân bĂ„â€šĂ‚Âªn trong khung, khĂ´ng trĂ n ra ngoĂ i vĂ 
 * khĂ´ng Ä‚â€žĂ¢â‚¬ËœÄ‚Â¡Ă‚ÂºĂ‚Â©y lÄ‚Â¡Ă‚Â»Ă¢â‚¬Â¡ch cĂ„â€šĂ‚Â¡c khÄ‚Â¡Ă‚Â»Ă¢â‚¬Ëœi khĂ„â€šĂ‚Â¡c.
 *
 * MÄ‚Â¡Ă‚Â»Ă‚Â©c phĂ„â€šĂ‚Â³ng Ä‚â€žĂ¢â‚¬ËœÄ‚Â¡Ă‚Â»Ă†â€™ NHÄ‚Â¡Ă‚ÂºĂ‚Â¸: 1.04 (4%). MuÄ‚Â¡Ă‚Â»Ă¢â‚¬Ëœn rõ hÄ‚â€ Ă‚Â¡n thì tĂ„Æ’ng sÄ‚Â¡Ă‚Â»Ă¢â‚¬Ëœ nĂ y (1.08 lĂ  khĂ„â€šĂ‚Â¡ rõ).
 * Ai bÄ‚Â¡Ă‚ÂºĂ‚Â­t "giÄ‚Â¡Ă‚ÂºĂ‚Â£m chuyÄ‚Â¡Ă‚Â»Ă†â€™n Ä‚â€žĂ¢â‚¬ËœÄ‚Â¡Ă‚Â»Ă¢â€žÂ¢ng" trong Windows thì mĂ„â€šĂ‚Â¡y tÄ‚Â¡Ă‚Â»Ă‚Â± tÄ‚Â¡Ă‚ÂºĂ‚Â¯t hiÄ‚Â¡Ă‚Â»Ă¢â‚¬Â¡u Ä‚Â¡Ă‚Â»Ă‚Â©ng.
 *
 * (HiÄ‚Â¡Ă‚Â»Ă¢â‚¬Â¡u Ä‚Â¡Ă‚Â»Ă‚Â©ng cho Ä‚Â¡Ă‚ÂºĂ‚Â£nh cÄ‚Â¡Ă‚Â»Ă¢â€žÂ¢t phÄ‚Â¡Ă‚ÂºĂ‚Â£i .ez-bn-banner vĂ  3 Ă´ .ez-bn-item Ä‚â€žĂ¢â‚¬ËœĂ„â€šĂ‚Â£ bÄ‚Â¡Ă‚Â»Ă‚Â cĂ„â€šĂ‚Â¹ng cÄ‚Â¡Ă‚Â»Ă¢â€žÂ¢t phÄ‚Â¡Ă‚ÂºĂ‚Â£i.)
 * =========================================================================== */

.ez-bn-slide {
	overflow: hidden;
	border-radius: var(--ez-radius);
}

.ez-bn-slide img,
.ez-bn-imglink img {
	transition: transform 0.45s ease;
	transform-origin: center center;
}

.ez-bn-slider:hover .ez-bn-slide img,
.ez-bn-slider:hover .ez-bn-imglink img,
.ez-bn-slider:focus-within .ez-bn-slide img,
.ez-bn-slider:focus-within .ez-bn-imglink img {
	transform: scale(1.04);
}

@media (prefers-reduced-motion: reduce) {
	.ez-bn-slide img,
	.ez-bn-imglink img {
		transition: none;
	}

	.ez-bn-slider:hover .ez-bn-slide img,
	.ez-bn-slider:hover .ez-bn-imglink img,
	.ez-bn-slider:focus-within .ez-bn-slide img,
	.ez-bn-slider:focus-within .ez-bn-imglink img {
		transform: none;
	}
}


/* ===========================================================================
 * BANNER Ä‚â€žĂ‚ÂÄ‚Â¡Ă‚ÂºĂ‚Â¦U TRANG Ä‚Â¢Ă¢â€šÂ¬Ă¢â‚¬Â bÄ‚Â¡Ă‚Â»Ă¢â‚¬Ëœ cÄ‚Â¡Ă‚Â»Ă‚Â¥c theo web mÄ‚Â¡Ă‚ÂºĂ‚Â«u cĂ„â€šĂ‚Â¹ng ngĂ nh
 *
 *   Ä‚Â¢Ă¢â‚¬ÂĂ…â€™Ä‚Â¢Ă¢â‚¬ÂĂ¢â€šÂ¬Ä‚Â¢Ă¢â‚¬ÂĂ¢â€šÂ¬Ä‚Â¢Ă¢â‚¬ÂĂ¢â€šÂ¬Ä‚Â¢Ă¢â‚¬ÂĂ¢â€šÂ¬Ä‚Â¢Ă¢â‚¬ÂĂ¢â€šÂ¬Ä‚Â¢Ă¢â‚¬ÂĂ¢â€šÂ¬Ä‚Â¢Ă¢â‚¬ÂĂ¢â€šÂ¬Ä‚Â¢Ă¢â‚¬ÂĂ¢â€šÂ¬Ä‚Â¢Ă¢â‚¬ÂĂ¢â€šÂ¬Ä‚Â¢Ă¢â‚¬ÂĂ¢â€šÂ¬Ä‚Â¢Ă¢â‚¬ÂĂ¢â€šÂ¬Ä‚Â¢Ă¢â‚¬ÂĂ¢â€šÂ¬Ä‚Â¢Ă¢â‚¬ÂĂ¢â€šÂ¬Ä‚Â¢Ă¢â‚¬ÂĂ¢â€šÂ¬Ä‚Â¢Ă¢â‚¬ÂĂ‚Â¬Ä‚Â¢Ă¢â‚¬ÂĂ¢â€šÂ¬Ä‚Â¢Ă¢â‚¬ÂĂ¢â€šÂ¬Ä‚Â¢Ă¢â‚¬ÂĂ¢â€šÂ¬Ä‚Â¢Ă¢â‚¬ÂĂ¢â€šÂ¬Ä‚Â¢Ă¢â‚¬ÂĂ¢â€šÂ¬Ä‚Â¢Ă¢â‚¬ÂĂ¢â€šÂ¬Ä‚Â¢Ă¢â‚¬ÂĂ¢â€šÂ¬Ä‚Â¢Ă¢â‚¬ÂĂ¢â€šÂ¬Ä‚Â¢Ă¢â‚¬ÂĂ¢â€šÂ¬Ä‚Â¢Ă¢â‚¬ÂĂ¢â€šÂ¬Ä‚Â¢Ă¢â‚¬ÂĂ¢â€šÂ¬Ä‚Â¢Ă¢â‚¬ÂĂ¢â€šÂ¬Ä‚Â¢Ă¢â‚¬ÂĂ¢â€šÂ¬Ä‚Â¢Ă¢â‚¬ÂĂ¢â€šÂ¬Ä‚Â¢Ă¢â‚¬ÂĂ¢â€šÂ¬Ä‚Â¢Ă¢â‚¬ÂĂ¢â€šÂ¬Ä‚Â¢Ă¢â‚¬ÂĂ¢â€šÂ¬Ä‚Â¢Ă¢â‚¬ÂĂ¢â€šÂ¬Ä‚Â¢Ă¢â‚¬ÂĂ¢â€šÂ¬Ä‚Â¢Ă¢â‚¬ÂĂ¢â€šÂ¬Ä‚Â¢Ă¢â‚¬ÂĂ¢â€šÂ¬Ä‚Â¢Ă¢â‚¬ÂĂ¢â€šÂ¬Ä‚Â¢Ă¢â‚¬ÂĂ¢â€šÂ¬Ä‚Â¢Ă¢â‚¬ÂĂ¢â€šÂ¬Ä‚Â¢Ă¢â‚¬ÂĂ¢â€šÂ¬Ä‚Â¢Ă¢â‚¬ÂĂ¢â€šÂ¬Ä‚Â¢Ă¢â‚¬ÂĂ¢â€šÂ¬Ä‚Â¢Ă¢â‚¬ÂĂ¢â€šÂ¬Ä‚Â¢Ă¢â‚¬ÂĂ‚Â¬Ä‚Â¢Ă¢â‚¬ÂĂ¢â€šÂ¬Ä‚Â¢Ă¢â‚¬ÂĂ¢â€šÂ¬Ä‚Â¢Ă¢â‚¬ÂĂ¢â€šÂ¬Ä‚Â¢Ă¢â‚¬ÂĂ¢â€šÂ¬Ä‚Â¢Ă¢â‚¬ÂĂ¢â€šÂ¬Ä‚Â¢Ă¢â‚¬ÂĂ¢â€šÂ¬Ä‚Â¢Ă¢â‚¬ÂĂ¢â€šÂ¬Ä‚Â¢Ă¢â‚¬ÂĂ¢â€šÂ¬Ä‚Â¢Ă¢â‚¬ÂĂ¢â€šÂ¬Ä‚Â¢Ă¢â‚¬ÂĂ¢â€šÂ¬Ä‚Â¢Ă¢â‚¬ÂĂ¢â€šÂ¬Ä‚Â¢Ă¢â‚¬ÂĂ¢â€šÂ¬Ä‚Â¢Ă¢â‚¬ÂĂ¢â€šÂ¬Ä‚Â¢Ă¢â‚¬ÂĂ¢â€šÂ¬Ä‚Â¢Ă¢â‚¬ÂĂ‚Â
 *   Ä‚Â¢Ă¢â‚¬ÂĂ¢â‚¬Âš logo         Ä‚Â¢Ă¢â‚¬ÂĂ¢â‚¬Âš  TÊN CĂ„â€šĂ¢â‚¬ÂNG TY               Ä‚Â¢Ă¢â‚¬ÂĂ¢â‚¬Âš  HOTLINE     Ä‚Â¢Ă¢â‚¬ÂĂ¢â‚¬Âš
 *   Ä‚Â¢Ă¢â‚¬ÂĂ¢â‚¬Âš (nÄ‚Â¡Ă‚Â»Ă‚Ân sĂ„â€šĂ‚Â¡ng)   Ä‚Â¢Ă¢â‚¬ÂĂ¢â‚¬Âš  khÄ‚Â¡Ă‚ÂºĂ‚Â©u hiÄ‚Â¡Ă‚Â»Ă¢â‚¬Â¡u                 Ä‚Â¢Ă¢â‚¬ÂĂ¢â‚¬Âš  0907Ä‚Â¢Ă¢â€šÂ¬Ă‚Â¦       Ä‚Â¢Ă¢â‚¬ÂĂ¢â‚¬Âš
 *   Ä‚Â¢Ă¢â‚¬ÂĂ¢â‚¬ÂÄ‚Â¢Ă¢â‚¬ÂĂ¢â€šÂ¬Ä‚Â¢Ă¢â‚¬ÂĂ¢â€šÂ¬Ä‚Â¢Ă¢â‚¬ÂĂ¢â€šÂ¬Ä‚Â¢Ă¢â‚¬ÂĂ¢â€šÂ¬Ä‚Â¢Ă¢â‚¬ÂĂ¢â€šÂ¬Ä‚Â¢Ă¢â‚¬ÂĂ¢â€šÂ¬Ä‚Â¢Ă¢â‚¬ÂĂ¢â€šÂ¬Ä‚Â¢Ă¢â‚¬ÂĂ¢â€šÂ¬Ä‚Â¢Ă¢â‚¬ÂĂ¢â€šÂ¬Ä‚Â¢Ă¢â‚¬ÂĂ¢â€šÂ¬Ä‚Â¢Ă¢â‚¬ÂĂ¢â€šÂ¬Ä‚Â¢Ă¢â‚¬ÂĂ¢â€šÂ¬Ä‚Â¢Ă¢â‚¬ÂĂ¢â€šÂ¬Ä‚Â¢Ă¢â‚¬ÂĂ¢â€šÂ¬Ä‚Â¢Ă¢â‚¬ÂĂ‚Â´Ä‚Â¢Ă¢â‚¬ÂĂ¢â€šÂ¬Ä‚Â¢Ă¢â‚¬ÂĂ¢â€šÂ¬Ä‚Â¢Ă¢â‚¬ÂĂ¢â€šÂ¬Ä‚Â¢Ă¢â‚¬ÂĂ¢â€šÂ¬Ä‚Â¢Ă¢â‚¬ÂĂ¢â€šÂ¬Ä‚Â¢Ă¢â‚¬ÂĂ¢â€šÂ¬Ä‚Â¢Ă¢â‚¬ÂĂ¢â€šÂ¬Ä‚Â¢Ă¢â‚¬ÂĂ¢â€šÂ¬Ä‚Â¢Ă¢â‚¬ÂĂ¢â€šÂ¬Ä‚Â¢Ă¢â‚¬ÂĂ¢â€šÂ¬Ä‚Â¢Ă¢â‚¬ÂĂ¢â€šÂ¬Ä‚Â¢Ă¢â‚¬ÂĂ¢â€šÂ¬Ä‚Â¢Ă¢â‚¬ÂĂ¢â€šÂ¬Ä‚Â¢Ă¢â‚¬ÂĂ¢â€šÂ¬Ä‚Â¢Ă¢â‚¬ÂĂ¢â€šÂ¬Ä‚Â¢Ă¢â‚¬ÂĂ¢â€šÂ¬Ä‚Â¢Ă¢â‚¬ÂĂ¢â€šÂ¬Ä‚Â¢Ă¢â‚¬ÂĂ¢â€šÂ¬Ä‚Â¢Ă¢â‚¬ÂĂ¢â€šÂ¬Ä‚Â¢Ă¢â‚¬ÂĂ¢â€šÂ¬Ä‚Â¢Ă¢â‚¬ÂĂ¢â€šÂ¬Ä‚Â¢Ă¢â‚¬ÂĂ¢â€šÂ¬Ä‚Â¢Ă¢â‚¬ÂĂ¢â€šÂ¬Ä‚Â¢Ă¢â‚¬ÂĂ¢â€šÂ¬Ä‚Â¢Ă¢â‚¬ÂĂ¢â€šÂ¬Ä‚Â¢Ă¢â‚¬ÂĂ¢â€šÂ¬Ä‚Â¢Ă¢â‚¬ÂĂ¢â€šÂ¬Ä‚Â¢Ă¢â‚¬ÂĂ¢â€šÂ¬Ä‚Â¢Ă¢â‚¬ÂĂ‚Â´Ä‚Â¢Ă¢â‚¬ÂĂ¢â€šÂ¬Ä‚Â¢Ă¢â‚¬ÂĂ¢â€šÂ¬Ä‚Â¢Ă¢â‚¬ÂĂ¢â€šÂ¬Ä‚Â¢Ă¢â‚¬ÂĂ¢â€šÂ¬Ä‚Â¢Ă¢â‚¬ÂĂ¢â€šÂ¬Ä‚Â¢Ă¢â‚¬ÂĂ¢â€šÂ¬Ä‚Â¢Ă¢â‚¬ÂĂ¢â€šÂ¬Ä‚Â¢Ă¢â‚¬ÂĂ¢â€šÂ¬Ä‚Â¢Ă¢â‚¬ÂĂ¢â€šÂ¬Ä‚Â¢Ă¢â‚¬ÂĂ¢â€šÂ¬Ä‚Â¢Ă¢â‚¬ÂĂ¢â€šÂ¬Ä‚Â¢Ă¢â‚¬ÂĂ¢â€šÂ¬Ä‚Â¢Ă¢â‚¬ÂĂ¢â€šÂ¬Ä‚Â¢Ă¢â‚¬ÂĂ¢â€šÂ¬Ä‚Â¢Ă¢â‚¬ÂĂ‹Å“
 *
 * NÄ‚Â¡Ă‚Â»Ă¢â€šÂ¬N SÁNG, khĂ´ng phÄ‚Â¡Ă‚ÂºĂ‚Â£i nÄ‚Â¡Ă‚Â»Ă‚Ân xanh: nÄ‚Â¡Ă‚ÂºĂ‚Â¿u dĂ„â€šĂ‚Â¹ng nÄ‚Â¡Ă‚Â»Ă‚Ân xanh thì Ă´ tìm kiÄ‚Â¡Ă‚ÂºĂ‚Â¿m (nÄ‚Â¡Ă‚Â»Ă‚Ân trÄ‚Â¡Ă‚ÂºĂ‚Â¯ng, chÄ‚Â¡Ă‚Â»Ă‚Â¯ xĂ„â€šĂ‚Â¡m)
 * vĂ  chÄ‚Â¡Ă‚Â»Ă‚Â¯ xanh Ä‚â€žĂ¢â‚¬ËœÄ‚Â¡Ă‚ÂºĂ‚Â­m sÄ‚Â¡Ă‚ÂºĂ‚Â½ chìm, khĂ´ng Ä‚â€žĂ¢â‚¬ËœÄ‚Â¡Ă‚Â»Ă‚Âc Ä‚â€žĂ¢â‚¬ËœÄ‚â€ Ă‚Â°Ä‚Â¡Ă‚Â»Ă‚Â£c.
 *
 * CÄ‚Â¡Ă‚ÂºĂ‚Â£ 3 cÄ‚Â¡Ă‚Â»Ă¢â€žÂ¢t nay Ä‚â€žĂ¢â‚¬ËœÄ‚Â¡Ă‚Â»Ă‚Âu nÄ‚Â¡Ă‚ÂºĂ‚Â±m trĂ„â€šĂ‚Âªn nÄ‚Â¡Ă‚Â»Ă‚Ân sĂ„â€šĂ‚Â¡ng Ä‚Â¢Ă¢â€šÂ¬Ă¢â‚¬Â khÄ‚Â¡Ă‚Â»Ă¢â‚¬Ëœi xanh Ä‚â€žĂ¢â‚¬ËœÄ‚Â¡Ă‚ÂºĂ‚Â­m sau logo Ä‚â€žĂ¢â‚¬ËœĂ„â€šĂ‚Â£ bÄ‚Â¡Ă‚Â»Ă‚Â ngĂ y 06-10-2026
 * theo yĂ„â€šĂ‚Âªu cÄ‚Â¡Ă‚ÂºĂ‚Â§u chÄ‚Â¡Ă‚Â»Ă‚Â§ shop (xem ghi chĂ„â€šĂ‚Âº Ä‚Â¡Ă‚Â»Ă…Â¸ `.ez-hd-banner-left` bĂ„â€šĂ‚Âªn dÄ‚â€ Ă‚Â°Ä‚Â¡Ă‚Â»Ă¢â‚¬Âºi).
 * =========================================================================== */

.ez-hd-banner {
	background: #f5f8f4;
	border-bottom: 1px solid var(--ez-line);
}

.ez-hd-banner-inner {
	display: flex;
	align-items: stretch;
	gap: 0;
	min-height: 92px;
	/*
	 * Ä‚â€žĂ‚ÂÄ‚Â¡Ă‚Â»Ă¢â‚¬Â¡m DÄ‚Â¡Ă‚Â»Ă…â€™C = 0, nhÆ°ng KHĂ„â€šĂ¢â‚¬ÂNG dĂ„â€šĂ‚Â¹ng `padding: 0` vì shorthand Ä‚â€žĂ¢â‚¬ËœĂ„â€šĂ‚Â³ xoĂ„â€šĂ‚Â¡ luĂ´n Ä‚â€žĂ¢â‚¬ËœÄ‚Â¡Ă‚Â»Ă¢â‚¬Â¡m NGANG 20px mĂ 
	 * `.ez-hd-inner` Ä‚â€žĂ¢â‚¬ËœÄ‚Â¡Ă‚ÂºĂ‚Â·t (khung nÄ‚Â¡Ă‚Â»Ă¢â€žÂ¢i dung). ThiÄ‚Â¡Ă‚ÂºĂ‚Â¿u Ä‚â€žĂ¢â‚¬ËœÄ‚Â¡Ă‚Â»Ă¢â‚¬Â¡m ngang lĂ  chÄ‚Â¡Ă‚Â»Ă‚Â¯ trong banner thĂ„â€šĂ‚Â² ra mĂ©p.
	 */
	padding-top: 0;
	padding-bottom: 0;
	/*
	 * Ä‚Â¢Ă‚ÂšĂ‚Â Ä‚Â¯Ă‚Â¸Ă‚Â PHÄ‚Â¡Ă‚ÂºĂ‚Â¢I Ä‚â€žĂ¢â‚¬ËœÄ‚Â¡Ă‚ÂºĂ‚Â·t lÄ‚Â¡Ă‚ÂºĂ‚Â¡i `max-width` vĂ  Ä‚â€žĂ¢â‚¬ËœÄ‚Â¡Ă‚Â»Ă¢â‚¬Â¡m NGANG Ä‚Â¡Ă‚Â»Ă…Â¸ Ä‚â€žĂ¢â‚¬ËœĂ„â€šĂ‚Â¢y, KHĂ„â€šĂ¢â‚¬ÂNG Ä‚â€žĂ¢â‚¬ËœÄ‚â€ Ă‚Â°Ä‚Â¡Ă‚Â»Ă‚Â£c bÄ‚Â¡Ă‚Â»Ă‚Â.
	 * Selector nĂ y cĂ„â€šĂ‚Â³ Ä‚â€žĂ¢â‚¬ËœÄ‚Â¡Ă‚Â»Ă¢â€žÂ¢ Æ°u tiĂ„â€šĂ‚Âªn CAO HÆ N `.ez-hd-inner` (2 lÄ‚Â¡Ă‚Â»Ă¢â‚¬Âºp so vÄ‚Â¡Ă‚Â»Ă¢â‚¬Âºi 1), nĂ„â€šĂ‚Âªn mÄ‚Â¡Ă‚Â»Ă‚Âi thuÄ‚Â¡Ă‚Â»Ă¢â€žÂ¢c tĂ­nh
	 * khai Ä‚Â¡Ă‚Â»Ă…Â¸ Ä‚â€žĂ¢â‚¬ËœĂ„â€šĂ‚Â¢y Ä‚â€žĂ¢â‚¬ËœĂ„â€šĂ‚Â¨ lĂ„â€šĂ‚Âªn khung nÄ‚Â¡Ă‚Â»Ă¢â€žÂ¢i dung cÄ‚Â¡Ă‚Â»Ă‚Â§a `.ez-hd-inner`. Ä‚â€žĂ‚ÂĂ„â€šĂ‚Â£ bÄ‚Â¡Ă‚Â»Ă¢â‚¬Â¹ Ä‚â€žĂ¢â‚¬ËœĂ„â€šĂ‚Âºng lÄ‚Â¡Ă‚Â»Ă¢â‚¬â€i nĂ y: `padding: 0`
	 * Ä‚Â¡Ă‚Â»Ă…Â¸ Ä‚â€žĂ¢â‚¬ËœĂ„â€šĂ‚Â¢y xoĂ„â€šĂ‚Â¡ Ä‚â€žĂ¢â‚¬ËœÄ‚Â¡Ă‚Â»Ă¢â‚¬Â¡m ngang -> nÄ‚Â¡Ă‚Â»Ă¢â€žÂ¢i dung banner trĂ n hÄ‚Â¡Ă‚ÂºĂ‚Â¿t bÄ‚Â¡Ă‚Â»Ă‚Â ngang, trong khi cĂ„â€šĂ‚Â¡c hĂ ng khĂ„â€šĂ‚Â¡c vÄ‚Â¡Ă‚ÂºĂ‚Â«n
	 * Ä‚â€žĂ¢â‚¬ËœĂ„â€šĂ‚Âºng khung.
	 */
	max-width: 1300px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 20px;
	padding-right: 20px;
}

/* --- TrĂ„â€šĂ‚Â¡i: logo Ä‚â€žĂ¢â‚¬ËœÄ‚Â¡Ă‚ÂºĂ‚Â·t thÄ‚Â¡Ă‚ÂºĂ‚Â³ng trĂ„â€šĂ‚Âªn nÄ‚Â¡Ă‚Â»Ă‚Ân sĂ„â€šĂ‚Â¡ng cÄ‚Â¡Ă‚Â»Ă‚Â§a banner --- */
/*
 * TRÄ‚â€ Ă‚Â¯Ä‚Â¡Ă‚Â»Ă‚ÂšC (bÄ‚Â¡Ă‚Â»Ă‚Â 06-10-2026): khÄ‚Â¡Ă‚Â»Ă¢â‚¬Ëœi nĂ y cĂ„â€šĂ‚Â³ `background: var(--ez-green)` + `clip-path` tÄ‚Â¡Ă‚ÂºĂ‚Â¡o
 * cÄ‚Â¡Ă‚ÂºĂ‚Â¡nh xiĂ„â€šĂ‚Âªn, tÄ‚Â¡Ă‚Â»Ă‚Â©c mÄ‚Â¡Ă‚Â»Ă¢â€žÂ¢t khÄ‚Â¡Ă‚Â»Ă¢â‚¬Ëœi xanh Ä‚â€žĂ¢â‚¬ËœÄ‚Â¡Ă‚ÂºĂ‚Â­m nÄ‚Â¡Ă‚ÂºĂ‚Â±m sau logo. ChÄ‚Â¡Ă‚Â»Ă‚Â§ shop yĂ„â€šĂ‚Âªu cÄ‚Â¡Ă‚ÂºĂ‚Â§u BÄ‚Â¡Ă‚Â»Ă‚ÂŽ NÄ‚Â¡Ă‚Â»Ă¢â€šÂ¬N XANH Ä‚â€žĂ¢â‚¬ËœĂ„â€šĂ‚Â³.
 *
 * HÄ‚Â¡Ă‚Â»Ă¢â‚¬Â¡ quÄ‚Â¡Ă‚ÂºĂ‚Â£ cÄ‚Â¡Ă‚ÂºĂ‚Â§n biÄ‚Â¡Ă‚ÂºĂ‚Â¿t: logo gÄ‚Â¡Ă‚Â»Ă¢â‚¬Ëœc lĂ  nĂ©t XANH MÄ‚Â¡Ă‚ÂºĂ‚Â¢NH trĂ„â€šĂ‚Âªn nÄ‚Â¡Ă‚Â»Ă‚Ân trong suÄ‚Â¡Ă‚Â»Ă¢â‚¬Ëœt, nĂ„â€šĂ‚Âªn trÄ‚â€ Ă‚Â°Ä‚Â¡Ă‚Â»Ă¢â‚¬Âºc Ä‚â€žĂ¢â‚¬ËœĂ„â€šĂ‚Â¢y khÄ‚Â¡Ă‚Â»Ă¢â‚¬Ëœi
 * xanh Ä‚â€žĂ¢â‚¬ËœÄ‚Â¡Ă‚ÂºĂ‚Â­m chĂ­nh lĂ  thÄ‚Â¡Ă‚Â»Ă‚Â© tÄ‚Â¡Ă‚ÂºĂ‚Â¡o tÄ‚â€ Ă‚Â°Ä‚â€ Ă‚Â¡ng phÄ‚Â¡Ă‚ÂºĂ‚Â£n. Nay logo nÄ‚Â¡Ă‚ÂºĂ‚Â±m trĂ„â€šĂ‚Âªn nÄ‚Â¡Ă‚Â»Ă‚Ân sĂ„â€šĂ‚Â¡ng #f5f8f4 cÄ‚Â¡Ă‚Â»Ă‚Â§a banner,
 * tÄ‚â€ Ă‚Â°Ä‚â€ Ă‚Â¡ng phÄ‚Â¡Ă‚ÂºĂ‚Â£n thÄ‚Â¡Ă‚ÂºĂ‚Â¥p hÄ‚â€ Ă‚Â¡n hÄ‚Â¡Ă‚ÂºĂ‚Â³n Ä‚Â¢Ă¢â€šÂ¬Ă¢â‚¬Â logo vÄ‚Â¡Ă‚ÂºĂ‚Â«n nhìn thÄ‚Â¡Ă‚ÂºĂ‚Â¥y nhÆ°ng nhÄ‚Â¡Ă‚ÂºĂ‚Â¡t hÄ‚â€ Ă‚Â¡n. KhĂ´ng cĂ„â€šĂ‚Â²n `clip-path`
 * vì khĂ´ng cĂ„â€šĂ‚Â²n khÄ‚Â¡Ă‚Â»Ă¢â‚¬Ëœi mĂ u nĂ o Ä‚â€žĂ¢â‚¬ËœÄ‚Â¡Ă‚Â»Ă†â€™ cÄ‚Â¡Ă‚ÂºĂ‚Â¯t xiĂ„â€šĂ‚Âªn.
 */
.ez-hd-banner-left {
	flex: 0 0 200px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 14px 8px 14px 20px;
}

.ez-hd-banner-logo {
	display: flex;
	align-items: center;
	justify-content: center;
	max-width: 100%;
	text-decoration: none !important;
}

.ez-hd-banner-logo img {
	/*
	 * Logo gÄ‚Â¡Ă‚Â»Ă¢â‚¬Ëœc 350x297 (tÄ‚Â¡Ă‚Â»Ă‚Â· lÄ‚Â¡Ă‚Â»Ă¢â‚¬Â¡ gÄ‚Â¡Ă‚ÂºĂ‚Â§n vuĂ´ng) nĂ„â€šĂ‚Âªn PHÄ‚Â¡Ă‚ÂºĂ‚Â¢I giÄ‚Â¡Ă‚Â»Ă¢â‚¬Âºi hÄ‚Â¡Ă‚ÂºĂ‚Â¡n CÄ‚Â¡Ă‚ÂºĂ‚Â¢ 2 chiÄ‚Â¡Ă‚Â»Ă‚Âu. KhĂ´ng giÄ‚Â¡Ă‚Â»Ă¢â‚¬Âºi hÄ‚Â¡Ă‚ÂºĂ‚Â¡n
	 * thì WordPress in ra Ä‚Â¡Ă‚ÂºĂ‚Â£nh 300x255 vĂ  banner bÄ‚Â¡Ă‚Â»Ă¢â‚¬Â¹ kĂ©o cao vÄ‚Â¡Ă‚Â»Ă‚Ât lĂ„â€šĂ‚Âªn 96px.
	 *
	 * `max-height` quyÄ‚Â¡Ă‚ÂºĂ‚Â¿t Ä‚â€žĂ¢â‚¬ËœÄ‚Â¡Ă‚Â»Ă¢â‚¬Â¹nh chiÄ‚Â¡Ă‚Â»Ă‚Âu cao banner; `width: auto` giÄ‚Â¡Ă‚Â»Ă‚Â¯ Ä‚â€žĂ¢â‚¬ËœĂ„â€šĂ‚Âºng tÄ‚Â¡Ă‚Â»Ă‚Â· lÄ‚Â¡Ă‚Â»Ă¢â‚¬Â¡ Ä‚Â¡Ă‚ÂºĂ‚Â£nh.
	 */
	max-height: 58px;
	max-width: 100%;
	width: auto;
	height: auto;
	display: block;
}

/*
 * ChÆ°a cĂ„â€šĂ‚Â³ logo -> hiÄ‚Â¡Ă‚Â»Ă¢â‚¬Â¡n CHÄ‚Â¡Ă‚Â»Ă‚Â® VIÄ‚Â¡Ă‚ÂºĂ‚Â¾T TÄ‚Â¡Ă‚ÂºĂ‚Â®T cÄ‚Â¡Ă‚Â»Ă‚Â§a tĂ„â€šĂ‚Âªn cĂ´ng ty (vĂ­ dÄ‚Â¡Ă‚Â»Ă‚Â¥ "ĐHV").
 * `-webkit-text-stroke` cho chÄ‚Â¡Ă‚Â»Ă‚Â¯ rÄ‚Â¡Ă‚Â»Ă¢â‚¬â€ng (viÄ‚Â¡Ă‚Â»Ă‚Ân trÄ‚Â¡Ă‚ÂºĂ‚Â¯ng, ruÄ‚Â¡Ă‚Â»Ă¢â€žÂ¢t trong) giÄ‚Â¡Ă‚Â»Ă¢â‚¬Ëœng kiÄ‚Â¡Ă‚Â»Ă†â€™u logo.
 */
.ez-hd-banner-viettat {
	color: #fff;
	font-family: var(--ez-font);
	font-size: 40px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: 2px;
	text-transform: uppercase;
	text-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
}

/* --- GiÄ‚Â¡Ă‚Â»Ă‚Â¯a: tĂ„â€šĂ‚Âªn cĂ´ng ty + khÄ‚Â¡Ă‚ÂºĂ‚Â©u hiÄ‚Â¡Ă‚Â»Ă¢â‚¬Â¡u --- */
.ez-hd-banner-giua {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-width: 0;
	padding: 14px 26px;
	text-align: center;
}

.ez-hd-banner-ten {
	color: var(--ez-green-dark);
	font-family: var(--ez-font);
	font-size: 25px;
	font-weight: 800;
	line-height: 1.25;
	letter-spacing: 0.2px;
	text-decoration: none !important;
	text-transform: uppercase;
}

.ez-hd-banner-ten:hover,
.ez-hd-banner-ten:focus {
	color: var(--ez-green);
	text-decoration: none !important;
}

/* TÄ‚Â¡Ă‚Â»Ă‚Â« CUÄ‚Â¡Ă‚Â»Ă‚ÂI cÄ‚Â¡Ă‚Â»Ă‚Â§a tĂ„â€šĂ‚Âªn cĂ´ng ty tĂ´ mĂ u nhÄ‚Â¡Ă‚ÂºĂ‚Â¥n (giÄ‚Â¡Ă‚Â»Ă¢â‚¬Ëœng web mÄ‚Â¡Ă‚ÂºĂ‚Â«u: tĂ„â€šĂ‚Âªn riĂ„â€šĂ‚Âªng mĂ u Ä‚â€žĂ¢â‚¬ËœÄ‚Â¡Ă‚Â»Ă‚Â) */
.ez-hd-banner-ten .ez-hd-nhan {
	color: #c62828;
}

.ez-hd-banner-khau-hieu {
	margin: 5px 0 0;
	color: #5a5a5a;
	font-family: var(--ez-font);
	font-size: 13px;
	font-style: italic;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0.4px;
	text-transform: uppercase;
}

/* --- PhÄ‚Â¡Ă‚ÂºĂ‚Â£i: hotline --- */
.ez-hd-banner-hotline {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 0 14px 20px;
}

/*
 * ICON ĐIÄ‚Â¡Ă‚Â»Ă¢â‚¬Â N THOÄ‚Â¡Ă‚ÂºĂ‚Â I BĂ„â€šĂ¢â€šÂ¬N cÄ‚Â¡Ă‚ÂºĂ‚Â¡nh hotline Ä‚Â¢Ă¢â€šÂ¬Ă¢â‚¬Â NAY LĂ„â€šĂ¢â€šÂ¬ Ä‚Â¡Ă‚ÂºĂ‚Â¢NH THÄ‚Â¡Ă‚ÂºĂ‚Â¬T (06-10-2026, lÄ‚Â¡Ă‚ÂºĂ‚Â§n 4).
 *
 * LÄ‚Â¡Ă‚Â»Ă‚ÂŠCH SÄ‚Â¡Ă‚Â»Ă‚Â¬: vĂ„â€šĂ‚Â²ng trĂ„â€šĂ‚Â²n + chÄ‚Â¡Ă‚Â»Ă‚Â¯ "HOTLINE" (CSS) -> Ä‚Â¡Ă‚Â»Ă¢â‚¬Ëœng nghe nĂ©t mÄ‚Â¡Ă‚ÂºĂ‚Â£nh (SVG) -> khÄ‚Â¡Ă‚Â»Ă¢â‚¬Ëœi Ä‚â€žĂ¢â‚¬ËœÄ‚Â¡Ă‚ÂºĂ‚Â·c cĂ„â€šĂ‚Â³ bĂ n
 * phĂ­m (SVG vÄ‚Â¡Ă‚ÂºĂ‚Â½ tay) -> Ä‚Â¡Ă‚ÂºĂ‚Â¢NH THÄ‚Â¡Ă‚ÂºĂ‚Â¬T trong ThÆ° viÄ‚Â¡Ă‚Â»Ă¢â‚¬Â¡n (ID 212, `icon-dien-thoai-quay-so.png`).
 *
 * Ä‚Â¡Ă‚ÂºĂ‚Â¢nh 360x360, PNG nÄ‚Â¡Ă‚Â»Ă‚Ân TRONG SUÄ‚Â¡Ă‚Â»Ă‚ÂT nĂ„â€šĂ‚Âªn khĂ´ng bÄ‚Â¡Ă‚Â»Ă¢â‚¬Â¹ Ă´ vuĂ´ng trÄ‚Â¡Ă‚ÂºĂ‚Â¯ng trĂ„â€šĂ‚Âªn nÄ‚Â¡Ă‚Â»Ă‚Ân banner.
 *
 * Ä‚â€žĂ‚ÂĂ„â€šĂ‚Â£ bÄ‚Â¡Ă‚Â»Ă‚Â 2 rule `.ez-hd-phone-than` / `.ez-hd-phone-phim` (chÄ‚Â¡Ă‚Â»Ă¢â‚¬Â° dĂ„â€šĂ‚Â¹ng cho SVG vÄ‚Â¡Ă‚ÂºĂ‚Â½ tay) vĂ  rule
 * `.ez-hd-banner-badge-svg`. Nay chÄ‚Â¡Ă‚Â»Ă¢â‚¬Â° cĂ„â€šĂ‚Â²n khung giÄ‚Â¡Ă‚Â»Ă¢â‚¬Âºi hÄ‚Â¡Ă‚ÂºĂ‚Â¡n kĂ­ch thÄ‚â€ Ă‚Â°Ä‚Â¡Ă‚Â»Ă¢â‚¬Âºc cho Ä‚Â¡Ă‚ÂºĂ‚Â£nh.
 *
 * KĂ­ch thÄ‚â€ Ă‚Â°Ä‚Â¡Ă‚Â»Ă¢â‚¬Âºc 48px: Ä‚Â¡Ă‚ÂºĂ‚Â£nh cĂ„â€šĂ‚Â³ khÄ‚Â¡Ă‚Â»Ă¢â‚¬Ëœi, bĂ„â€šĂ‚Â³ng vĂ  chi tiÄ‚Â¡Ă‚ÂºĂ‚Â¿t vĂ„â€šĂ‚Â²ng quay sÄ‚Â¡Ă‚Â»Ă¢â‚¬Ëœ nĂ„â€šĂ‚Âªn cÄ‚Â¡Ă‚ÂºĂ‚Â§n Ä‚â€žĂ¢â‚¬ËœÄ‚Â¡Ă‚Â»Ă‚Â§ chÄ‚Â¡Ă‚Â»Ă¢â‚¬â€ mÄ‚Â¡Ă‚Â»Ă¢â‚¬Âºi nhìn ra;
 * Ä‚â€žĂ¢â‚¬ËœÄ‚Â¡Ă‚Â»Ă†â€™ 32px lĂ  chi tiÄ‚Â¡Ă‚ÂºĂ‚Â¿t quay sÄ‚Â¡Ă‚Â»Ă¢â‚¬Ëœ nhoè mÄ‚Â¡Ă‚ÂºĂ‚Â¥t.
 */
.ez-hd-banner-badge {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 48px;
	height: 48px;
}

.ez-hd-banner-badge-anh {
	display: block;
	width: 100%;
	height: auto;
	/* Ä‚Â¡Ă‚ÂºĂ‚Â¢nh Ä‚â€žĂ¢â‚¬ËœĂ„â€šĂ‚Â£ trong suÄ‚Â¡Ă‚Â»Ă¢â‚¬Ëœt nĂ„â€šĂ‚Âªn khĂ´ng cÄ‚Â¡Ă‚ÂºĂ‚Â§n nÄ‚Â¡Ă‚Â»Ă‚Ân, khĂ´ng bo gĂ„â€šĂ‚Â³c. */
}

.ez-hd-banner-so {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.ez-hd-banner-so a {
	color: #c62828;
	font-family: var(--ez-font);
	font-size: 21px;
	font-weight: 800;
	line-height: 1.25;
	text-decoration: none !important;
	white-space: nowrap;
}

.ez-hd-banner-so a:hover,
.ez-hd-banner-so a:focus {
	color: var(--ez-green-dark);
	text-decoration: none !important;
}

.ez-hd-banner-ghichu {
	color: #7a7a7a;
	font-size: 11.5px;
	font-weight: 600;
	line-height: 1.3;
	text-transform: uppercase;
}

/* --- ĐiÄ‚Â¡Ă‚Â»Ă¢â‚¬Â¡n thoÄ‚Â¡Ă‚ÂºĂ‚Â¡i / mĂ„â€šĂ‚Â¡y tĂ­nh bÄ‚Â¡Ă‚ÂºĂ‚Â£ng --- */
@media (max-width: 1024px) {
	.ez-hd-banner-inner {
		min-height: 76px;
	}

	.ez-hd-banner-left {
		flex: 0 0 148px;
		padding: 10px 6px 10px 16px;
	}

	.ez-hd-banner-viettat {
		font-size: 30px;
	}

	.ez-hd-banner-logo img {
		max-height: 48px;
	}

	.ez-hd-banner-ten {
		font-size: 19px;
	}

	.ez-hd-banner-so a {
		font-size: 17px;
	}

	.ez-hd-banner-badge {
		width: 40px;
		height: 40px;
	}
}

@media (max-width: 782px) {
	/* TrĂ„â€šĂ‚Âªn Ä‚â€žĂ¢â‚¬ËœiÄ‚Â¡Ă‚Â»Ă¢â‚¬Â¡n thoÄ‚Â¡Ă‚ÂºĂ‚Â¡i: bÄ‚Â¡Ă‚Â»Ă‚Â khÄ‚Â¡Ă‚Â»Ă¢â‚¬Ëœi logo vĂ  hotline, chÄ‚Â¡Ă‚Â»Ă¢â‚¬Â° giÄ‚Â¡Ă‚Â»Ă‚Â¯ tĂ„â€šĂ‚Âªn + khÄ‚Â¡Ă‚ÂºĂ‚Â©u hiÄ‚Â¡Ă‚Â»Ă¢â‚¬Â¡u cho gÄ‚Â¡Ă‚Â»Ă‚Ân */
	.ez-hd-banner-left,
	.ez-hd-banner-hotline {
		display: none;
	}

	.ez-hd-banner-giua {
		padding: 12px 16px;
	}

	.ez-hd-banner-ten {
		font-size: 17px;
	}

	.ez-hd-banner-khau-hieu {
		font-size: 11.5px;
	}
}
/* Custom header */

.ez-hd {
	position: relative;
	background: var(--ez-green);
	font-family: var(--ez-font);
	box-shadow: 0 2px 4px -4px rgba(31, 35, 41, 0.02), 0 4px 16px 4px rgba(31, 35, 41, 0.03);
}

/*
 * HEADER: NÄ‚Â¡Ă‚Â»Ă¢â€šÂ¬N FULL BÄ‚Â¡Ă‚Â»Ă¢â€šÂ¬ NGANG · NÄ‚Â¡Ă‚Â»Ă‹Å“I DUNG TRONG CONTAINER (06-10-2026)
 *
 * ChÄ‚Â¡Ă‚Â»Ă‚Â§ shop chÄ‚Â¡Ă‚Â»Ă¢â‚¬Ëœt bÄ‚Â¡Ă‚Â»Ă¢â‚¬Ëœ cÄ‚Â¡Ă‚Â»Ă‚Â¥c: nÄ‚Â¡Ă‚Â»Ă‚Ân xanh (vĂ  nÄ‚Â¡Ă‚Â»Ă‚Ân kem cÄ‚Â¡Ă‚Â»Ă‚Â§a banner) phÄ‚Â¡Ă‚ÂºĂ‚Â£i TRĂ„â€šĂ¢â€šÂ¬N HÄ‚Â¡Ă‚ÂºĂ‚Â¾T bÄ‚Â¡Ă‚Â»Ă‚Â ngang mĂ n hình,
 * cĂ„â€šĂ‚Â²n chÄ‚Â¡Ă‚Â»Ă‚Â¯ + logo + Ă´ tìm kiÄ‚Â¡Ă‚ÂºĂ‚Â¿m thì nÄ‚Â¡Ă‚ÂºĂ‚Â±m gÄ‚Â¡Ă‚Â»Ă‚Ân trong khung nÄ‚Â¡Ă‚Â»Ă¢â€žÂ¢i dung nhÆ° slider bĂ„â€šĂ‚Âªn dÄ‚â€ Ă‚Â°Ä‚Â¡Ă‚Â»Ă¢â‚¬Âºi.
 *
 * CÁCH LĂ„â€šĂ¢â€šÂ¬M: mÄ‚Â¡Ă‚Â»Ă¢â‚¬â€i hĂ ng header lĂ  mÄ‚Â¡Ă‚Â»Ă¢â€žÂ¢t dÄ‚Â¡Ă‚ÂºĂ‚Â£i trĂ n viÄ‚Â¡Ă‚Â»Ă‚Ân (khĂ´ng cĂ„â€šĂ‚Â³ Ä‚â€žĂ¢â‚¬ËœÄ‚Â¡Ă‚Â»Ă¢â‚¬Â¡m ngang), bĂ„â€šĂ‚Âªn trong lĂ 
 * `.ez-hd-inner` giÄ‚Â¡Ă‚Â»Ă‚Â¯ khung 1300px + Ä‚â€žĂ¢â‚¬ËœÄ‚Â¡Ă‚Â»Ă¢â‚¬Â¡m 20px.
 *
 * Ä‚Â¢Ă‚ÂšĂ‚Â Ä‚Â¯Ă‚Â¸Ă‚Â Ä‚â€žĂ‚ÂÄ‚Â¡Ă‚Â»Ă‚ÂªNG Ä‚â€žĂ¢â‚¬ËœÄ‚Â¡Ă‚ÂºĂ‚Â·t `max-width`/`padding` NGANG lĂ„â€šĂ‚Âªn chĂ­nh cĂ„â€šĂ‚Â¡c hĂ ng `.ez-hd-*` Ä‚Â¢Ă¢â€šÂ¬Ă¢â‚¬Â lĂ m vÄ‚Â¡Ă‚ÂºĂ‚Â­y lĂ  nÄ‚Â¡Ă‚Â»Ă‚Ân bÄ‚Â¡Ă‚Â»Ă¢â‚¬Â¹
 * bĂ„â€šĂ‚Â³ lÄ‚Â¡Ă‚ÂºĂ‚Â¡i thĂ nh khÄ‚Â¡Ă‚Â»Ă¢â‚¬Ëœi 1300px (Ä‚â€žĂ¢â‚¬ËœĂ„â€šĂ‚Â£ lĂ m Ä‚â€žĂ¢â‚¬ËœĂ„â€šĂ‚Âºng nhÆ° thÄ‚Â¡Ă‚ÂºĂ‚Â¿ Ä‚Â¡Ă‚Â»Ă…Â¸ lÄ‚Â¡Ă‚ÂºĂ‚Â§n sÄ‚Â¡Ă‚Â»Ă‚Â­a trÄ‚â€ Ă‚Â°Ä‚Â¡Ă‚Â»Ă¢â‚¬Âºc vĂ  bÄ‚Â¡Ă‚Â»Ă¢â‚¬Â¹ trÄ‚Â¡Ă‚ÂºĂ‚Â£ lÄ‚Â¡Ă‚ÂºĂ‚Â¡i). HĂ ng nĂ o chÄ‚Â¡Ă‚Â»Ă¢â‚¬Â°
 * cÄ‚Â¡Ă‚ÂºĂ‚Â§n Ä‚â€žĂ¢â‚¬ËœÄ‚Â¡Ă‚Â»Ă¢â‚¬Â¡m DÄ‚Â¡Ă‚Â»Ă…â€™C thì Ä‚â€žĂ¢â‚¬ËœÄ‚Â¡Ă‚ÂºĂ‚Â·t riĂ„â€šĂ‚Âªng `padding-top`/`padding-bottom`.
 *
 * Khung phÄ‚Â¡Ă‚ÂºĂ‚Â£i KHÄ‚Â¡Ă‚Â»Ă‚ÂšP `.ast-container` cÄ‚Â¡Ă‚Â»Ă‚Â§a Astra Ä‚Â¢Ă¢â€šÂ¬Ă¢â‚¬Â vĂ  Ä‚â€žĂ¢â‚¬ËœĂ„â€šĂ‚Â¢y lĂ  chÄ‚Â¡Ă‚Â»Ă¢â‚¬â€ DÄ‚Â¡Ă‚Â»Ă¢â‚¬Âž NHÄ‚Â¡Ă‚ÂºĂ‚Â¦M:
 * Astra khai `max-width: 1300px` + `padding: 0 20px`, mĂ  `box-sizing` lĂ  `border-box`, nĂ„â€šĂ‚Âªn
 * khÄ‚Â¡Ă‚Â»Ă¢â‚¬Ëœi Ä‚â€žĂ¢â‚¬ËœĂ„â€šĂ‚Â³ rÄ‚Â¡Ă‚Â»Ă¢â€žÂ¢ng 1300px TĂ„â€šĂ‚ÂNH CÄ‚Â¡Ă‚ÂºĂ‚Â¢ Ä‚â€žĂ¢â‚¬ËœÄ‚Â¡Ă‚Â»Ă¢â‚¬Â¡m, tÄ‚Â¡Ă‚Â»Ă‚Â©c bÄ‚Â¡Ă‚Â»Ă‚Â rÄ‚Â¡Ă‚Â»Ă¢â€žÂ¢ng nÄ‚Â¡Ă‚Â»Ă¢â€žÂ¢i dung thÄ‚Â¡Ă‚ÂºĂ‚Â­t chÄ‚Â¡Ă‚Â»Ă¢â‚¬Â° 1300 - 40 = 1260px.
 * `.ez-hd-inner` Ä‚Â¡Ă‚Â»Ă…Â¸ Ä‚â€žĂ¢â‚¬ËœĂ„â€šĂ‚Â¢y cÅ©ng cĂ„â€šĂ‚Â³ 20px Ä‚â€žĂ¢â‚¬ËœÄ‚Â¡Ă‚Â»Ă¢â‚¬Â¡m mÄ‚Â¡Ă‚Â»Ă¢â‚¬â€i bĂ„â€šĂ‚Âªn, nĂ„â€šĂ‚Âªn `max-width` phÄ‚Â¡Ă‚ÂºĂ‚Â£i lĂ  1300px Ä‚Â¢Ă¢â€šÂ¬Ă¢â‚¬Â KHĂ„â€šĂ¢â‚¬ÂNG
 * phÄ‚Â¡Ă‚ÂºĂ‚Â£i 1340px. (TÄ‚Â¡Ă‚Â»Ă‚Â«ng viÄ‚Â¡Ă‚ÂºĂ‚Â¿t 1340px vì tÄ‚â€ Ă‚Â°Ä‚Â¡Ă‚Â»Ă…Â¸ng 1300px lĂ  bÄ‚Â¡Ă‚Â»Ă‚Â rÄ‚Â¡Ă‚Â»Ă¢â€žÂ¢ng nÄ‚Â¡Ă‚Â»Ă¢â€žÂ¢i dung; Ä‚â€žĂ¢â‚¬Ëœo lÄ‚Â¡Ă‚ÂºĂ‚Â¡i mÄ‚Â¡Ă‚Â»Ă¢â‚¬Âºi thÄ‚Â¡Ă‚ÂºĂ‚Â¥y
 * banner rÄ‚Â¡Ă‚Â»Ă¢â€žÂ¢ng 1340px trong khi nÄ‚Â¡Ă‚Â»Ă¢â€žÂ¢i dung trang chÄ‚Â¡Ă‚Â»Ă¢â‚¬Â° 1260px -> lÄ‚Â¡Ă‚Â»Ă¢â‚¬Â¡ch 40px.)
 */
.ez-hd-inner {
	display: flex;
	align-items: center;
	gap: 16px;
	max-width: 1300px;
	width: 100%;
	margin: 0 auto;
	padding-left: 20px;
	padding-right: 20px;
}

/* Custom header */
.ez-hd-top {
	background: var(--ez-green-dark);
	color: #fff;
}

.ez-hd-top .ez-hd-inner {
	justify-content: space-between;
	min-height: 40px;
}

.ez-hd-slogan {
	margin: 0;
	font-size: 15px;
	font-weight: 600;
	line-height: 20px;
	text-transform: uppercase;
	color: var(--ez-yellow);
}

.ez-hd-system {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 14px;
	font-weight: 600;
	line-height: 30px;
	text-transform: uppercase;
	color: #fff;
	text-decoration: none;
}

/* Custom header */
.ez-hd-top-right {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
}

/*
 * .ez-hd-rx (link "TÆ° vÄ‚Â¡Ă‚ÂºĂ‚Â¥n Ä‚â€žĂ¢â‚¬ËœÄ‚â€ Ă‚Â¡n thuÄ‚Â¡Ă‚Â»Ă¢â‚¬Ëœc" trĂ„â€šĂ‚Âªn thanh chĂ o) Ä‚Â¢Ă¢â€šÂ¬Ă¢â‚¬Â Ă„ÂÄ‚Æ’ XĂ„â€šĂ¢â‚¬Å“A cĂ„â€šĂ‚Â¹ng link Ä‚â€žĂ¢â‚¬ËœĂ„â€šĂ‚Â³.
 * Xem ghi chĂ„â€šĂ‚Âº trong inc/header.php.
 */

@media (max-width: 782px) {
	.ez-hd-top-right {
		gap: 10px;
	}
}

.ez-hd-system:hover {
	color: var(--ez-yellow);
}

/* Custom header */
.ez-hd-dot {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--ez-yellow);
}

/* Custom header */
/*
 * .ez-hd-main Ä‚Â¢Ă¢â€šÂ¬Ă¢â‚¬Â hĂ ng header chĂ­nh, NAY CHÄ‚Â¡Ă‚Â»Ă‹â€  CĂ„â€šĂ¢â‚¬â„¢N Ă´ tìm kiÄ‚Â¡Ă‚ÂºĂ‚Â¿m.
 *
 * Logo Ä‚Â¡Ă‚Â»Ă…Â¸ Ä‚â€žĂ¢â‚¬ËœĂ„â€šĂ‚Â¢y Ä‚â€žĂ¢â‚¬ËœĂ„â€šĂ‚Â£ gÄ‚Â¡Ă‚Â»Ă‚Â¡ 06-10-2026 (xem ghi chĂ„â€šĂ‚Âº trong inc/header.php), nĂ„â€šĂ‚Âªn Ä‚â€žĂ¢â‚¬ËœĂ„â€šĂ‚Â£ xoĂ„â€šĂ‚Â¡ luĂ´n
 * `.ez-hd-logo`, `.ez-hd-logo-link`, `.ez-hd-logo img` vĂ  `.ez-hd-sitename`.
 *
 * Ä‚Â¢Ă‚ÂšĂ‚Â Ä‚Â¯Ă‚Â¸Ă‚Â PhÄ‚Â¡Ă‚ÂºĂ‚Â£i viÄ‚Â¡Ă‚ÂºĂ‚Â¿t `padding-top` / `padding-bottom` RIÊNG, KHĂ„â€šĂ¢â‚¬ÂNG viÄ‚Â¡Ă‚ÂºĂ‚Â¿t gÄ‚Â¡Ă‚Â»Ă‚Ân `padding: 6px 0`.
 * BÄ‚Â¡Ă‚ÂºĂ‚Â£n gÄ‚Â¡Ă‚Â»Ă‚Ân Ä‚â€žĂ¢â‚¬ËœĂ„â€šĂ‚Â³ Ä‚â€žĂ¢â‚¬ËœÄ‚Â¡Ă‚ÂºĂ‚Â·t luĂ´n Ä‚â€žĂ¢â‚¬ËœÄ‚Â¡Ă‚Â»Ă¢â‚¬Â¡m NGANG = 0 vĂ  ghi Ä‚â€žĂ¢â‚¬ËœĂ„â€šĂ‚Â¨ Ä‚â€žĂ¢â‚¬ËœÄ‚Â¡Ă‚Â»Ă¢â‚¬Â¡m 20px mĂ  khÄ‚Â¡Ă‚Â»Ă¢â‚¬Ëœi `#main`/header dĂ„â€šĂ‚Â¹ng chung,
 * lĂ m hĂ ng nĂ y thĂ„â€šĂ‚Â² ra ngoĂ i khung Ä‚Â¡Ă‚Â»Ă…Â¸ cÄ‚Â¡Ă‚ÂºĂ‚Â£ hai mĂ©p (Ä‚â€žĂ¢â‚¬ËœĂ„â€šĂ‚Â£ bÄ‚Â¡Ă‚Â»Ă¢â‚¬Â¹ Ä‚â€žĂ¢â‚¬ËœĂ„â€šĂ‚Âºng lÄ‚Â¡Ă‚Â»Ă¢â‚¬â€i nĂ y: Ä‚â€žĂ¢â‚¬Ëœo Ä‚â€žĂ¢â‚¬ËœÄ‚â€ Ă‚Â°Ä‚Â¡Ă‚Â»Ă‚Â£c
 * `.ez-hd-main padding=0px/0px` trong khi cĂ„â€šĂ‚Â¡c hĂ ng khĂ„â€šĂ‚Â¡c lĂ  20px/20px).
 */
.ez-hd-main {
	background: var(--ez-green);
	/*
	 * KHONG dem doc (bo 06-10-2026 theo yeu cau).
	 *
	 * Hang .ez-hd-main nay hien KHONG con noi dung nao (logo va o tim kiem da chuyen sang banner /
	 * dai menu), nen 6px tren + 6px duoi chi tao ra mot dai xanh RONG cao 12px chen giua banner va
	 * dai menu. Bo di thi hai khoi xanh lien nhau, header gon hon.
	 *
	 * KHONG dat padding NGANG o day: khung noi dung da do .ez-hd-inner lo (xem ghi chu o tren).
	 */
}

/*
 * `.ez-hd-search` lĂ  khung bao Ă´ tìm kiÄ‚Â¡Ă‚ÂºĂ‚Â¿m. Nay nĂ„â€šĂ‚Â³ nÄ‚Â¡Ă‚ÂºĂ‚Â±m trong dÄ‚Â¡Ă‚ÂºĂ‚Â£i menu (bĂ„â€šĂ‚Âªn phÄ‚Â¡Ă‚ÂºĂ‚Â£i) nĂ„â€šĂ‚Âªn KHĂ„â€šĂ¢â‚¬ÂNG
 * Ä‚â€žĂ¢â‚¬ËœÄ‚â€ Ă‚Â°Ä‚Â¡Ă‚Â»Ă‚Â£c giĂ„â€šĂ‚Â£n ra: `flex: 1 1 auto` cÅ© sÄ‚Â¡Ă‚ÂºĂ‚Â½ nuÄ‚Â¡Ă‚Â»Ă¢â‚¬Ëœt hÄ‚Â¡Ă‚ÂºĂ‚Â¿t khoÄ‚Â¡Ă‚ÂºĂ‚Â£ng trÄ‚Â¡Ă‚Â»Ă¢â‚¬Ëœng vĂ  Ä‚â€žĂ¢â‚¬ËœÄ‚Â¡Ă‚ÂºĂ‚Â©y menu dĂ„â€šĂ‚Âºm lÄ‚Â¡Ă‚ÂºĂ‚Â¡i mÄ‚Â¡Ă‚Â»Ă¢â€žÂ¢t gĂ„â€šĂ‚Â³c.
 * Ä‚â€žĂ‚ÂÄ‚Â¡Ă‚Â»Ă†â€™ `flex: 0 0 auto` cho nĂ„â€šĂ‚Â³ Ä‚â€žĂ¢â‚¬ËœĂ„â€šĂ‚Âºng bÄ‚Â¡Ă‚ÂºĂ‚Â±ng bÄ‚Â¡Ă‚Â»Ă‚Â rÄ‚Â¡Ă‚Â»Ă¢â€žÂ¢ng form (300px), khoÄ‚Â¡Ă‚ÂºĂ‚Â£ng trÄ‚Â¡Ă‚Â»Ă¢â‚¬Ëœng do
 * `justify-content: space-between` cÄ‚Â¡Ă‚Â»Ă‚Â§a `.ez-hd-nav .ez-hd-inner` lo.
 */
.ez-hd-search {
	flex: 0 0 auto;
	min-width: 0;
}

/* Custom header */
/*
 * Ă„â€šĂ¢â‚¬Â TÄ‚Å’M KIÄ‚Â¡Ă‚ÂºĂ‚Â¾M Ä‚Â¢Ă¢â€šÂ¬Ă¢â‚¬Â nay nÄ‚Â¡Ă‚ÂºĂ‚Â±m trong dÄ‚Â¡Ă‚ÂºĂ‚Â£i menu, sĂ„â€šĂ‚Â¡t bĂ„â€šĂ‚Âªn phÄ‚Â¡Ă‚ÂºĂ‚Â£i.
 *
 * Ă„ÂÄ‚Æ’ BÄ‚Â¡Ă‚Â»Ă‚ÂŽ VIÄ‚Â¡Ă‚Â»Ă¢â€šÂ¬N TRÄ‚Â¡Ă‚ÂºĂ‚Â®NG 3px (06-10-2026). TrÄ‚â€ Ă‚Â°Ä‚Â¡Ă‚Â»Ă¢â‚¬Âºc Ä‚â€žĂ¢â‚¬ËœĂ„â€šĂ‚Â¢y form cĂ„â€šĂ‚Â³ `border: 3px solid #fff` bao quanh
 * cÄ‚Â¡Ă‚ÂºĂ‚Â£ Ă´ nhÄ‚Â¡Ă‚ÂºĂ‚Â­p LÄ‚Â¡Ă‚ÂºĂ‚ÂªN nĂ„â€šĂ‚Âºt, mĂ  nĂ„â€šĂ‚Âºt lÄ‚Â¡Ă‚ÂºĂ‚Â¡i cĂ„â€šĂ‚Â³ nÄ‚Â¡Ă‚Â»Ă‚Ân xanh Ä‚â€žĂ¢â‚¬ËœÄ‚Â¡Ă‚ÂºĂ‚Â­m riĂ„â€šĂ‚Âªng -> thĂ nh hai cĂ„â€šĂ‚Â¡i khung lÄ‚Â¡Ă‚Â»Ă¢â‚¬Å“ng nhau,
 * nhìn thĂ´. ChÄ‚Â¡Ă‚Â»Ă‚Â§ shop so vÄ‚Â¡Ă‚Â»Ă¢â‚¬Âºi web mÄ‚Â¡Ă‚ÂºĂ‚Â«u vĂ  chĂ„â€šĂ‚Âª. Nay chÄ‚Â¡Ă‚Â»Ă¢â‚¬Â° cĂ„â€šĂ‚Â²n mÄ‚Â¡Ă‚Â»Ă¢â€žÂ¢t khÄ‚Â¡Ă‚Â»Ă¢â‚¬Ëœi trÄ‚Â¡Ă‚ÂºĂ‚Â¯ng bo trĂ„â€šĂ‚Â²n, nĂ„â€šĂ‚Âºt nÄ‚Â¡Ă‚ÂºĂ‚Â±m
 * gÄ‚Â¡Ă‚Â»Ă‚Ân bĂ„â€šĂ‚Âªn trong.
 *
 * CĂ„â€šĂ¢â‚¬ÂšN Ä‚â€žĂ‚ÂÄ‚Â¡Ă‚Â»Ă‚ÂI VÄ‚Â¡Ă‚Â»Ă‚ÂšI MENU (06-10-2026): khi menu tĂ„Æ’ng lĂ„â€šĂ‚Âªn 15px/40px thì Ă´ tìm kiÄ‚Â¡Ă‚ÂºĂ‚Â¿m cÅ©
 * (300px, Ă´ nhÄ‚Â¡Ă‚ÂºĂ‚Â­p cao 26px, nĂ„â€šĂ‚Âºt 64px) trĂ´ng lÄ‚Â¡Ă‚Â»Ă¢â‚¬Â¡ch Ä‚Â¢Ă¢â€šÂ¬Ă¢â‚¬Â form thÄ‚Â¡Ă‚ÂºĂ‚Â¥p hÄ‚â€ Ă‚Â¡n hÄ‚Â¡Ă‚ÂºĂ‚Â³n dÄ‚Â¡Ă‚ÂºĂ‚Â£i menu nĂ„â€šĂ‚Âªn nhìn nhÆ°
 * bÄ‚Â¡Ă‚Â»Ă¢â‚¬Â¹ lÄ‚Â¡Ă‚Â»Ă‚Ât thÄ‚Â¡Ă‚Â»Ă‚Âm. Nay nĂ„â€šĂ‚Â¢ng lĂ„â€šĂ‚Âªn:
 *     bÄ‚Â¡Ă‚Â»Ă‚Â rÄ‚Â¡Ă‚Â»Ă¢â€žÂ¢ng  300 -> 330px
 *     Ă´ nhÄ‚Â¡Ă‚ÂºĂ‚Â­p   26  -> 36px, chÄ‚Â¡Ă‚Â»Ă‚Â¯ 12 -> 13.5px
 *     nĂ„â€šĂ‚Âºt      64  -> 78px, chÄ‚Â¡Ă‚Â»Ă‚Â¯ 11.5 -> 13px
 *     bo gĂ„â€šĂ‚Â³c   13  -> 20px (nÄ‚Â¡Ă‚Â»Ă‚Â­a chiÄ‚Â¡Ă‚Â»Ă‚Âu cao form 40px)
 * ChiÄ‚Â¡Ă‚Â»Ă‚Âu cao form = 36px Ă´ nhÄ‚Â¡Ă‚ÂºĂ‚Â­p + 2px viÄ‚Â¡Ă‚Â»Ă‚Ân trĂ„â€šĂ‚Âªn + 2px viÄ‚Â¡Ă‚Â»Ă‚Ân dÄ‚â€ Ă‚Â°Ä‚Â¡Ă‚Â»Ă¢â‚¬Âºi = 40px Ä‚Â¢Ă¢â€šÂ¬Ă¢â‚¬Â BÄ‚Â¡Ă‚ÂºĂ‚Â°NG ĐÚNG chiÄ‚Â¡Ă‚Â»Ă‚Âu
 * cao dÄ‚Â¡Ă‚ÂºĂ‚Â£i menu (40px). Đo lÄ‚Â¡Ă‚ÂºĂ‚Â¡i: menu cao 40, form cao 40, lÄ‚Â¡Ă‚Â»Ă¢â‚¬Â¡ch 0px, lÄ‚Â¡Ă‚Â»Ă¢â‚¬Â¡ch hĂ ng dÄ‚Â¡Ă‚Â»Ă‚Âc 2px.
 *
 * Ä‚Â¢Ă‚ÂšĂ‚Â Ä‚Â¯Ă‚Â¸Ă‚Â `flex: 0 0 auto` Ä‚Â¡Ă‚Â»Ă…Â¸ `.ez-hd-search` khiÄ‚Â¡Ă‚ÂºĂ‚Â¿n form chÄ‚Â¡Ă‚Â»Ă¢â‚¬Â° rÄ‚Â¡Ă‚Â»Ă¢â€žÂ¢ng bÄ‚Â¡Ă‚ÂºĂ‚Â±ng nÄ‚Â¡Ă‚Â»Ă¢â€žÂ¢i dung (271px) chÄ‚Â¡Ă‚Â»Ă‚Â© khĂ´ng
 * Ä‚â€žĂ¢â‚¬ËœÄ‚Â¡Ă‚ÂºĂ‚Â¡t `max-width`. NĂ„â€šĂ‚Âªn phÄ‚Â¡Ă‚ÂºĂ‚Â£i cho form `width: 100%` Ä‚â€žĂ¢â‚¬ËœÄ‚Â¡Ă‚Â»Ă†â€™ nĂ„â€šĂ‚Â³ nÄ‚Â¡Ă‚Â»Ă…Â¸ hÄ‚Â¡Ă‚ÂºĂ‚Â¿t khung Ä‚â€žĂ¢â‚¬ËœĂ„â€šĂ‚Â³.
 */
.ez-hd-form {
	display: flex;
	/*
	 * align-items: center — BAT BUOC sau khi thu nho o nhap (06-10-2026).
	 *
	 * Mac dinh cua flex la stretch: nut ben trong se bi keo cao bang CA form, trong khi o nhap chi
	 * 25px -> nut cao hon o nhap, nhin lech. center cho nut cao dung bang o nhap.
	 */
	align-items: center;
	width: 100%;
	max-width: 330px;
	overflow: hidden;
	border: 2px solid #fff;
	/*
	 * Bo tron bang NUA CHIEU CAO form. Form nay cao 29px (25px o nhap + 2px vien x 2) nen
	 * ban kinh phai la 14px. De nguyen 20px (con so cu, tinh cho form cao 40px) thi goc bi bo
	 * qua tron, nhin nhu nut bam chu khong phai o tim kiem.
	 * Doi chieu cao o nhap thi phai doi ca so nay.
	 */
	border-radius: 14px;
	background: #fff;
}

.ez-hd-form input[type="search"] {
	flex: 1 1 auto;
	min-width: 0;
	/*
	 * CHIEU CAO 25px + CHU 10px (06-10-2026 theo yeu cau).
	 *
	 * Truoc do: 36px / 13.5px, cong 2px vien tren + 2px vien duoi = form cao 40px, bang dung chieu
	 * cao dai menu. Nay thu nho lai nen form chi con 25 + 4 = 29px, THAP HON dai menu 40px — vi vay
	 * o .ez-hd-nav .ez-hd-search phai can giua theo chieu doc (xem align-items: center o do)
	 * de o tim kiem nam giua dai, khong bi lech len tren.
	 */
	height: 25px;
	padding: 0 14px;
	border: 0;
	outline: none;
	background: #fff;
	color: #000;
	font-size: 10px;
}

.ez-hd-form input[type="search"]::placeholder {
	color: #666;
}

/* Custom header */
.ez-hd-form button {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 70px;
	/*
	 * height: 25px cho BANG chieu cao o nhap.
	 *
	 * O nhap nay cao 25px (thu nho theo yeu cau) nhung nut de noi dung quyet dinh chieu cao nen
	 * chi cao 13px -> nhin lech han. Ep cung 25px cho hai ben bang nhau.
	 */
	height: 25px;
	padding: 0;
	border: 0;
	/* NĂ„â€šĂ‚Âºt nÄ‚Â¡Ă‚ÂºĂ‚Â±m trong khÄ‚Â¡Ă‚Â»Ă¢â‚¬Ëœi Ä‚â€žĂ¢â‚¬ËœĂ„â€šĂ‚Â£ bo trĂ„â€šĂ‚Â²n + `overflow: hidden` Ä‚Â¡Ă‚Â»Ă…Â¸ form nĂ„â€šĂ‚Âªn khĂ´ng cÄ‚Â¡Ă‚ÂºĂ‚Â§n bo riĂ„â€šĂ‚Âªng. */
	border-radius: 0;
	background: var(--ez-green-dark);
	color: #fff;
	/* 11px cho can voi o nhap da thu nho (truoc la 13px). */
	font-size: 11px;
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
	cursor: pointer;
}

/* Custom header */
.ez-hd-form button:hover {
	background: #04694c;
}

.ez-hd-suggest {
	margin-top: 6px;
	font-size: 14px;
	line-height: 1.4;
}

.ez-hd-suggest a {
	margin-right: 12px;
	color: #fff;
	text-decoration: none;
}

.ez-hd-suggest a:hover {
	color: var(--ez-yellow);
}

/* Custom header */
.ez-hd-hotline {
	flex: 0 0 auto;
	padding: 0 15px;
	border-radius: 30px;
	background: var(--ez-green-dark);
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	line-height: 45px;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
}

.ez-hd-hotline span {
	color: var(--ez-yellow);
}

.ez-hd-hotline:hover {
	background: var(--ez-green-pale);
	color: var(--ez-green-dark);
}

.ez-hd-hotline:hover span {
	color: var(--ez-green-dark);
}

/* Custom header */
.ez-hd-cart {
	position: relative;
	flex: 0 0 auto;
	padding: 0 14px;
	border-radius: 30px;
	background: var(--ez-green-dark);
	color: #fff;
	/* 11px cho can voi o nhap da thu nho (truoc la 13px). */
	font-size: 11px;
	font-weight: 600;
	line-height: 45px;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
}

.ez-hd-cart:hover {
	background: var(--ez-green-pale);
	color: var(--ez-green-dark);
}

.ez-hd-cart-count {
	position: absolute;
	top: 0;
	right: 0;
	width: 17px;
	height: 17px;
	border-radius: 50%;
	background: var(--ez-yellow);
	color: var(--ez-green-dark);
	font-size: 10px;
	font-weight: 700;
	line-height: 17px;
	text-align: center;
}

/* Header category strip */
/*
 * DÄ‚Â¡Ă‚ÂºĂ‚Â¢I MENU Ä‚Â¢Ă¢â€šÂ¬Ă¢â‚¬Â nay nÄ‚Â¡Ă‚ÂºĂ‚Â±m TRÊN NÄ‚Â¡Ă‚Â»Ă¢â€šÂ¬N XANH, chÄ‚Â¡Ă‚Â»Ă‚Â¯ TRÄ‚Â¡Ă‚ÂºĂ‚Â®NG (Ä‚â€žĂ¢â‚¬ËœÄ‚Â¡Ă‚Â»Ă¢â‚¬Â¢i 06-10-2026 theo yĂ„â€šĂ‚Âªu cÄ‚Â¡Ă‚ÂºĂ‚Â§u).
 *
 * TRÄ‚â€ Ă‚Â¯Ä‚Â¡Ă‚Â»Ă‚ÂšC: `background: #fff` + chÄ‚Â¡Ă‚Â»Ă‚Â¯ `#333` Ä‚Â¢Ă¢â€šÂ¬Ă¢â‚¬Â mÄ‚Â¡Ă‚Â»Ă¢â€žÂ¢t dÄ‚Â¡Ă‚ÂºĂ‚Â£i trÄ‚Â¡Ă‚ÂºĂ‚Â¯ng rÄ‚Â¡Ă‚Â»Ă‚Âi nÄ‚Â¡Ă‚ÂºĂ‚Â±m dÄ‚â€ Ă‚Â°Ä‚Â¡Ă‚Â»Ă¢â‚¬Âºi khÄ‚Â¡Ă‚Â»Ă¢â‚¬Ëœi header xanh.
 * NAY: cĂ„â€šĂ‚Â¹ng mĂ u `--ez-green` vÄ‚Â¡Ă‚Â»Ă¢â‚¬Âºi `.ez-hd-main` Ä‚Â¡Ă‚Â»Ă…Â¸ trĂ„â€šĂ‚Âªn, nĂ„â€šĂ‚Âªn 2 khÄ‚Â¡Ă‚Â»Ă¢â‚¬Ëœi LIÄ‚Â¡Ă‚Â»Ă¢â€šÂ¬N thĂ nh mÄ‚Â¡Ă‚Â»Ă¢â€žÂ¢t vĂ„â€šĂ‚Â¹ng
 * xanh, menu nhÆ° nÄ‚Â¡Ă‚ÂºĂ‚Â±m ngay trong header. ChÄ‚Â¡Ă‚Â»Ă‚Â¯ trÄ‚Â¡Ă‚ÂºĂ‚Â¯ng trĂ„â€šĂ‚Âªn #137a18 Ä‚â€žĂ¢â‚¬ËœÄ‚Â¡Ă‚ÂºĂ‚Â¡t tÄ‚â€ Ă‚Â°Ä‚â€ Ă‚Â¡ng phÄ‚Â¡Ă‚ÂºĂ‚Â£n 5.49:1
 * (chuÄ‚Â¡Ă‚ÂºĂ‚Â©n AA cÄ‚Â¡Ă‚ÂºĂ‚Â§n 4.5) nĂ„â€šĂ‚Âªn Ä‚â€žĂ¢â‚¬ËœÄ‚Â¡Ă‚Â»Ă‚Âc tÄ‚Â¡Ă‚Â»Ă¢â‚¬Ëœt.
 *
 * Ä‚â€žĂ‚ÂÄ‚Â¡Ă‚Â»Ă‚Â«ng Ä‚â€žĂ¢â‚¬ËœÄ‚Â¡Ă‚Â»Ă¢â‚¬Â¢i nÄ‚Â¡Ă‚Â»Ă‚Ân sang tĂ´ng nhÄ‚Â¡Ă‚ÂºĂ‚Â¡t hÄ‚â€ Ă‚Â¡n mĂ  quĂ„â€šĂ‚Âªn Ä‚â€žĂ¢â‚¬ËœÄ‚Â¡Ă‚Â»Ă¢â‚¬Â¢i mĂ u chÄ‚Â¡Ă‚Â»Ă‚Â¯ Ä‚Â¢Ă¢â€šÂ¬Ă¢â‚¬Â xem ghi chĂ„â€šĂ‚Âº Ä‚Â¡Ă‚Â»Ă…Â¸ Ä‚â€žĂ¢â‚¬ËœÄ‚Â¡Ă‚ÂºĂ‚Â§u file.
 */
.ez-hd-nav {
	background: var(--ez-green);
	/*
	 * Ä‚Â¢Ă‚ÂšĂ‚Â Ä‚Â¯Ă‚Â¸Ă‚Â KHĂ„â€šĂ¢â‚¬ÂNG Ä‚â€žĂ¢â‚¬ËœÄ‚Â¡Ă‚ÂºĂ‚Â·t `border-bottom` Ä‚Â¡Ă‚Â»Ă…Â¸ Ä‚â€žĂ¢â‚¬ËœĂ„â€šĂ‚Â¢y (Ä‚â€žĂ¢â‚¬ËœĂ„â€šĂ‚Â£ bÄ‚Â¡Ă‚Â»Ă‚Â 06-10-2026).
	 *
	 * ViÄ‚Â¡Ă‚Â»Ă‚Ân 1px nĂ y lĂ m hĂ ng cao 41px trong khi nÄ‚Â¡Ă‚Â»Ă¢â€žÂ¢i dung bĂ„â€šĂ‚Âªn trong (mÄ‚Â¡Ă‚Â»Ă‚Â¥c menu) chÄ‚Â¡Ă‚Â»Ă¢â‚¬Â° 40px, nĂ„â€šĂ‚Âªn
	 * khi rĂ„â€šĂ‚Âª chuÄ‚Â¡Ă‚Â»Ă¢â€žÂ¢t cĂ„â€šĂ‚Â²n hÄ‚Â¡Ă‚Â»Ă…Â¸ 1px xanh Ä‚Â¡Ă‚Â»Ă…Â¸ Ä‚â€žĂ¢â‚¬ËœĂ„â€šĂ‚Â¡y mÄ‚Â¡Ă‚Â»Ă‚Â¥c Ä‚Â¢Ă¢â€šÂ¬Ă¢â‚¬Â Ä‚Â¡Ă‚Â»Ă…Â¸ mÄ‚Â¡Ă‚Â»Ă‚Â©c zoom lÄ‚Â¡Ă‚Â»Ă¢â‚¬Âºn nhìn thĂ nh vÄ‚Â¡Ă‚Â»Ă¢â‚¬Â¡t rõ.
	 * BÄ‚Â¡Ă‚Â»Ă‚Â viÄ‚Â¡Ă‚Â»Ă‚Ân thì hĂ ng cao Ä‚â€žĂ¢â‚¬ËœĂ„â€šĂ‚Âºng bÄ‚Â¡Ă‚ÂºĂ‚Â±ng nÄ‚Â¡Ă‚Â»Ă¢â€žÂ¢i dung vĂ  nÄ‚Â¡Ă‚Â»Ă‚Ân hover phÄ‚Â¡Ă‚Â»Ă‚Â§ kĂ­n.
	 *
	 * GiÄ‚Â¡Ă‚Â»Ă‚Â¯a dÄ‚Â¡Ă‚ÂºĂ‚Â£i menu vĂ  slider phĂ­a dÄ‚â€ Ă‚Â°Ä‚Â¡Ă‚Â»Ă¢â‚¬Âºi vÄ‚Â¡Ă‚ÂºĂ‚Â«n cĂ„â€šĂ‚Â³ ranh giÄ‚Â¡Ă‚Â»Ă¢â‚¬Âºi tÄ‚Â¡Ă‚Â»Ă‚Â± nhiĂ„â€šĂ‚Âªn vì slider lĂ  Ä‚Â¡Ă‚ÂºĂ‚Â£nh sĂ„â€šĂ‚Â¡ng mĂ u,
	 * khĂ´ng cÄ‚Â¡Ă‚ÂºĂ‚Â§n viÄ‚Â¡Ă‚Â»Ă‚Ân.
	 */
}

/* Header category strip */
.ez-hd-nav.is-stuck {
	position: fixed;
	top: var(--wp-admin--admin-bar--height, 0px);
	left: 0;
	right: 0;
	z-index: 100;
	margin: 0;
	box-shadow: 0 4px 12px rgba(16, 24, 40, 0.12);
}

/* Header category strip */
.ez-hd-nav-spacer {
	height: 0;
}

/*
 * DÄ‚Â¡Ă‚ÂºĂ‚Â£i menu: menu bĂ„â€šĂ‚Âªn TRÁI · Ă´ tìm kiÄ‚Â¡Ă‚ÂºĂ‚Â¿m bĂ„â€šĂ‚Âªn PHÄ‚Â¡Ă‚ÂºĂ‚Â¢I, cĂ„â€šĂ‚Â¹ng MÄ‚Â¡Ă‚Â»Ă‹Å“T hĂ ng.
 *
 * `justify-content: space-between` Ä‚â€žĂ¢â‚¬ËœÄ‚Â¡Ă‚ÂºĂ‚Â©y 2 mÄ‚Â¡Ă‚Â»Ă‚Â¥c ra 2 Ä‚â€žĂ¢â‚¬ËœÄ‚Â¡Ă‚ÂºĂ‚Â§u. Ä‚Â¢Ă‚ÂšĂ‚Â Ä‚Â¯Ă‚Â¸Ă‚Â NĂ„â€šĂ‚Â³ chÄ‚Â¡Ă‚Â»Ă¢â‚¬Â° Ä‚â€žĂ¢â‚¬ËœĂ„â€šĂ‚Âºng khi MENU LĂ„â€šĂ¢â€šÂ¬ MÄ‚Â¡Ă‚Â»Ă‹Å“T MÄ‚Â¡Ă‚Â»Ă‚Â¤C
 * DUY NHÄ‚Â¡Ă‚ÂºĂ‚Â¤T Ä‚Â¢Ă¢â€šÂ¬Ă¢â‚¬Â tÄ‚Â¡Ă‚Â»Ă‚Â©c cĂ„â€šĂ‚Â¡c link phÄ‚Â¡Ă‚ÂºĂ‚Â£i nÄ‚Â¡Ă‚ÂºĂ‚Â±m trong mÄ‚Â¡Ă‚Â»Ă¢â€žÂ¢t khÄ‚Â¡Ă‚Â»Ă¢â‚¬Ëœi `.ez-hd-menu`. NÄ‚Â¡Ă‚ÂºĂ‚Â¿u Ä‚â€žĂ¢â‚¬ËœÄ‚Â¡Ă‚Â»Ă†â€™ tÄ‚Â¡Ă‚Â»Ă‚Â«ng thÄ‚Â¡Ă‚ÂºĂ‚Â» `<a>` rÄ‚Â¡Ă‚Â»Ă‚Âi
 * ra thÄ‚Â¡Ă‚ÂºĂ‚Â³ng Ä‚â€žĂ¢â‚¬ËœĂ„â€šĂ‚Â¢y thì mÄ‚Â¡Ă‚Â»Ă¢â‚¬â€i thÄ‚Â¡Ă‚ÂºĂ‚Â» thĂ nh mÄ‚Â¡Ă‚Â»Ă¢â€žÂ¢t cÄ‚Â¡Ă‚Â»Ă¢â€žÂ¢t vĂ  bÄ‚Â¡Ă‚Â»Ă¢â‚¬Â¹ dĂ n Ä‚â€žĂ¢â‚¬ËœÄ‚Â¡Ă‚Â»Ă‚Âu khÄ‚Â¡Ă‚ÂºĂ‚Â¯p chiÄ‚Â¡Ă‚Â»Ă‚Âu ngang (Ä‚â€žĂ¢â‚¬ËœĂ„â€šĂ‚Â£ tÄ‚Â¡Ă‚Â»Ă‚Â«ng bÄ‚Â¡Ă‚Â»Ă¢â‚¬Â¹ Ä‚â€žĂ¢â‚¬ËœĂ„â€šĂ‚Âºng
 * lÄ‚Â¡Ă‚Â»Ă¢â‚¬â€i nĂ y Ä‚Â¡Ă‚Â»Ă…Â¸ nhĂ„â€šĂ‚Â¡nh dÄ‚Â¡Ă‚Â»Ă‚Â± phĂ„â€šĂ‚Â²ng trong inc/header.php Ä‚Â¢Ă¢â€šÂ¬Ă¢â‚¬Â nay Ä‚â€žĂ¢â‚¬ËœĂ„â€šĂ‚Â£ bÄ‚Â¡Ă‚Â»Ă‚Âc `.ez-hd-menu`).
 *
 * Ä‚Â¢Ă‚ÂšĂ‚Â Ä‚Â¯Ă‚Â¸Ă‚Â `align-items: stretch` (KHĂ„â€šĂ¢â‚¬ÂNG phÄ‚Â¡Ă‚ÂºĂ‚Â£i `center`) lĂ  thÄ‚Â¡Ă‚Â»Ă‚Â© lĂ m NÄ‚Â¡Ă‚Â»Ă¢â€šÂ¬N HOVER PHÄ‚Â¡Ă‚Â»Ă‚Â¦ KĂ„â€šĂ‚ÂN chiÄ‚Â¡Ă‚Â»Ă‚Âu cao.
 * VÄ‚Â¡Ă‚Â»Ă¢â‚¬Âºi `center`, mÄ‚Â¡Ă‚Â»Ă‚Â¥c menu chÄ‚Â¡Ă‚Â»Ă¢â‚¬Â° cao bÄ‚Â¡Ă‚ÂºĂ‚Â±ng dĂ„â€šĂ‚Â²ng chÄ‚Â¡Ă‚Â»Ă‚Â¯ (40px) giÄ‚Â¡Ă‚Â»Ă‚Â¯a hĂ ng, hÄ‚Â¡Ă‚Â»Ă…Â¸ nÄ‚Â¡Ă‚Â»Ă‚Ân xanh trĂ„â€šĂ‚Âªn/dÄ‚â€ Ă‚Â°Ä‚Â¡Ă‚Â»Ă¢â‚¬Âºi.
 * Đo thÄ‚Â¡Ă‚ÂºĂ‚Â­t trÄ‚â€ Ă‚Â°Ä‚Â¡Ă‚Â»Ă¢â‚¬Âºc khi sÄ‚Â¡Ă‚Â»Ă‚Â­a: nav cao 41px, mÄ‚Â¡Ă‚Â»Ă‚Â¥c menu cao 40px -> hÄ‚Â¡Ă‚Â»Ă…Â¸ 1px Ä‚Â¡Ă‚Â»Ă…Â¸ Ä‚â€žĂ¢â‚¬ËœĂ„â€šĂ‚Â¡y (do nav cĂ„â€šĂ‚Â³
 * `border-bottom`), Ä‚Â¡Ă‚Â»Ă…Â¸ mÄ‚Â¡Ă‚Â»Ă‚Â©c zoom lÄ‚Â¡Ă‚Â»Ă¢â‚¬Âºn nhìn thĂ nh vÄ‚Â¡Ă‚Â»Ă¢â‚¬Â¡t xanh rõ.
 *
 * CĂ„â€šĂ‚Â¡c mÄ‚Â¡Ă‚Â»Ă‚Â¥c KHÁC trong hĂ ng (nĂ„â€šĂ‚Âºt 3 gÄ‚Â¡Ă‚ÂºĂ‚Â¡ch, Ă´ tìm kiÄ‚Â¡Ă‚ÂºĂ‚Â¿m) tÄ‚Â¡Ă‚Â»Ă‚Â± cĂ„Æ’n giÄ‚Â¡Ă‚Â»Ă‚Â¯a bÄ‚Â¡Ă‚ÂºĂ‚Â±ng `align-self` riĂ„â€šĂ‚Âªng nĂ„â€šĂ‚Âªn
 * Ä‚â€žĂ¢â‚¬ËœÄ‚Â¡Ă‚Â»Ă¢â‚¬Â¢i `stretch` Ä‚Â¡Ă‚Â»Ă…Â¸ Ä‚â€žĂ¢â‚¬ËœĂ„â€šĂ‚Â¢y khĂ´ng lĂ m chĂ„â€šĂ‚Âºng dĂ­nh mĂ©p.
 */
.ez-hd-nav .ez-hd-inner {
	/*
	 * HAI HANG: menu mot hang (can giua), o tim kiem mot hang (duoi, dung het be rong).
	 *
	 * VI SAO PHAI HAI HANG: menu that rong 761px, con cho trong canh no chi 499px. Khong the
	 * vua CAN GIUA vua KHONG CHONG len o tim kiem — da do: menu 301..1062 con o tim kiem bat
	 * dau o 1039, chong 11px (man 1400) va 79px (man 1200). Xuong hai hang thi het mau thuan.
	 *
	 * `align-content: center` de moi hang cao dung bang noi dung — thieu no thi hang flex chia
	 * chieu cao theo `stretch` va nen hover cua menu ho 46px ben duoi (da do duoc).
	 */
	flex-wrap: wrap;
	/*
	 * align-content: flex-start — DONG DAU PHAI SAT MEP TREN.
	 *
	 * Voi `center`, hang flex nhieu dong (menu + o tim kiem) duoc can giua theo chieu cao khung,
	 * nen hang menu bi day xuong va de lai mot khoang xanh TRONG phia tren (hoac duoi) no. Nen
	 * hover chi phu hang menu -> nhin thay khoang xanh ho. Da do: nav cao 86px, menu 40px,
	 * ho duoi 46px.
	 */
	align-content: flex-start;
	align-items: stretch;
	justify-content: center;
	gap: 6px 20px;
	/*
	 * Ä‚Â¢Ă‚ÂšĂ‚Â Ä‚Â¯Ă‚Â¸Ă‚Â PHÄ‚Â¡Ă‚ÂºĂ‚Â¢I Ä‚â€žĂ¢â‚¬ËœÄ‚Â¡Ă‚ÂºĂ‚Â·t lÄ‚Â¡Ă‚ÂºĂ‚Â¡i khung Ä‚Â¡Ă‚Â»Ă…Â¸ Ä‚â€žĂ¢â‚¬ËœĂ„â€šĂ‚Â¢y, KHĂ„â€šĂ¢â‚¬ÂNG Ä‚â€žĂ¢â‚¬ËœÄ‚â€ Ă‚Â°Ä‚Â¡Ă‚Â»Ă‚Â£c bÄ‚Â¡Ă‚Â»Ă‚Â.
	 * Selector `.ez-hd-nav .ez-hd-inner` cĂ„â€šĂ‚Â³ Ä‚â€žĂ¢â‚¬ËœÄ‚Â¡Ă‚Â»Ă¢â€žÂ¢ Æ°u tiĂ„â€šĂ‚Âªn CAO HÆ N `.ez-hd-inner` (2 lÄ‚Â¡Ă‚Â»Ă¢â‚¬Âºp so vÄ‚Â¡Ă‚Â»Ă¢â‚¬Âºi
	 * 1), nĂ„â€šĂ‚Âªn bÄ‚Â¡Ă‚ÂºĂ‚Â¥t cÄ‚Â¡Ă‚Â»Ă‚Â© thuÄ‚Â¡Ă‚Â»Ă¢â€žÂ¢c tĂ­nh nĂ o khai Ä‚Â¡Ă‚Â»Ă…Â¸ Ä‚â€žĂ¢â‚¬ËœĂ„â€šĂ‚Â¢y Ä‚â€žĂ¢â‚¬ËœÄ‚Â¡Ă‚Â»Ă‚Âu Ä‚â€žĂ¢â‚¬ËœĂ„â€šĂ‚Â¨ lĂ„â€šĂ‚Âªn khung nÄ‚Â¡Ă‚Â»Ă¢â€žÂ¢i dung cÄ‚Â¡Ă‚Â»Ă‚Â§a `.ez-hd-inner`.
	 * Ä‚â€žĂ‚ÂĂ„â€šĂ‚Â£ bÄ‚Â¡Ă‚Â»Ă¢â‚¬Â¹ Ä‚â€žĂ¢â‚¬ËœĂ„â€šĂ‚Âºng lÄ‚Â¡Ă‚Â»Ă¢â‚¬â€i nĂ y: mÄ‚Â¡Ă‚Â»Ă¢â€žÂ¢t dĂ„â€šĂ‚Â²ng `width: 100%` cÅ© Ä‚Â¡Ă‚Â»Ă…Â¸ Ä‚â€žĂ¢â‚¬ËœĂ„â€šĂ‚Â¢y xoĂ„â€šĂ‚Â¡ mÄ‚Â¡Ă‚ÂºĂ‚Â¥t `max-width` -> menu vĂ  Ă´
	 * tìm kiÄ‚Â¡Ă‚ÂºĂ‚Â¿m trĂ n hÄ‚Â¡Ă‚ÂºĂ‚Â¿t bÄ‚Â¡Ă‚Â»Ă‚Â ngang thay vì nÄ‚Â¡Ă‚ÂºĂ‚Â±m trong khung.
	 */
	max-width: 1300px;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	padding-left: 20px;
	padding-right: 20px;
}

/*
 * CĂ„â€šĂ‚Â¡c mÄ‚Â¡Ă‚Â»Ă‚Â¥c khĂ„â€šĂ‚Â¡c trong hĂ ng tÄ‚Â¡Ă‚Â»Ă‚Â± cĂ„Æ’n giÄ‚Â¡Ă‚Â»Ă‚Â¯a. CÄ‚Â¡Ă‚ÂºĂ‚Â§n thiÄ‚Â¡Ă‚ÂºĂ‚Â¿t vì `.ez-hd-inner` Ä‚â€žĂ¢â‚¬ËœĂ„â€šĂ‚Â£ Ä‚â€žĂ¢â‚¬ËœÄ‚Â¡Ă‚Â»Ă¢â‚¬Â¢i sang
 * `align-items: stretch` (Ä‚â€žĂ¢â‚¬ËœÄ‚Â¡Ă‚Â»Ă†â€™ nÄ‚Â¡Ă‚Â»Ă‚Ân hover cÄ‚Â¡Ă‚Â»Ă‚Â§a menu phÄ‚Â¡Ă‚Â»Ă‚Â§ kĂ­n chiÄ‚Â¡Ă‚Â»Ă‚Âu cao) Ä‚Â¢Ă¢â€šÂ¬Ă¢â‚¬Â nÄ‚Â¡Ă‚ÂºĂ‚Â¿u khĂ´ng cĂ„â€šĂ‚Â³ dĂ„â€šĂ‚Â²ng nĂ y
 * thì nĂ„â€šĂ‚Âºt 3 gÄ‚Â¡Ă‚ÂºĂ‚Â¡ch vĂ  Ă´ tìm kiÄ‚Â¡Ă‚ÂºĂ‚Â¿m bÄ‚Â¡Ă‚Â»Ă¢â‚¬Â¹ kĂ©o cao dĂ­nh mĂ©p trĂ„â€šĂ‚Âªn/dÄ‚â€ Ă‚Â°Ä‚Â¡Ă‚Â»Ă¢â‚¬Âºi.
 */
/*
 * Ă” TÄ‚Å’M KIĂ¡ÂºÂ¾M trong dĂ¡ÂºÂ£i menu Ă¢â‚¬â€ RA KHĂ¡Â»ÂŽI LUĂ¡Â»â€™NG FLEX, bĂ¡m sĂ¡t mĂ©p phĂ¡ÂºÂ£i (06-10-2026).
 *
 * VÄ‚Å’ SAO: chĂ¡Â»Â§ shop muĂ¡Â»â€˜n MENU NĂ¡ÂºÂ°M GIĂ¡Â»Â®A. NhÆ°ng nĂ¡ÂºÂ¿u Ă´ tìm kiĂ¡ÂºÂ¿m vĂ¡ÂºÂ«n lĂ  mĂ¡Â»â„¢t mĂ¡Â»Â¥c flex thì nĂ³
 * chiĂ¡ÂºÂ¿m chĂ¡Â»â€” bĂªn phĂ¡ÂºÂ£i vĂ  Ă„â€˜Ă¡ÂºÂ©y menu lĂ¡Â»â€¡ch sang trĂ¡i Ă¢â‚¬â€ `justify-content: center` khĂ´ng bao giĂ¡Â»Â
 * cho ra giĂ¡Â»Â¯a thĂ¡ÂºÂ­t. Đưa nĂ³ ra khĂ¡Â»Âi luĂ¡Â»â€œng thì menu trĂ¡Â»Å¸ thĂ nh mĂ¡Â»Â¥c DUY NHĂ¡ÂºÂ¤T vĂ  mĂ¡Â»â€ºi cĂ„Æ’n giĂ¡Â»Â¯a Ă„â€˜Ă†Â°Ă¡Â»Â£c.
 *
 * Đo thĂ¡ÂºÂ­t trĂ†Â°Ă¡Â»â€ºc khi sĂ¡Â»Â­a (mĂ n 1400px): menu cĂ¡ch trĂ¡i 20px, cĂ¡ch phĂ¡ÂºÂ£i 519px Ă¢â‚¬â€ lĂ¡Â»â€¡ch 499px.
 *
 * Ă¢ÂšÂ Ă¯Â¸Â `align-self: center` Ă¡Â»Å¸ khĂ¡Â»â€˜i trĂªn KHĂ”NG cĂ²n tĂ¡c dĂ¡Â»Â¥ng khi Ă„â€˜Ä‚Â£ `absolute`, nĂªn phĂ¡ÂºÂ£i tĂ¡Â»Â± cĂ„Æ’n
 * dĂ¡Â»Âc bĂ¡ÂºÂ±ng flex + `align-items: center` Ă¡Â»Å¸ Ă„â€˜Ä‚Â¢y.
 *
 * Ă¢ÂšÂ Ă¯Â¸Â `background` phĂ¡ÂºÂ£i cĂ¹ng mĂ u dĂ¡ÂºÂ£i menu: khi mĂ n hình hĂ¡ÂºÂ¹p, menu bĂ¡Â»â€¹ Ă„â€˜Ă¡ÂºÂ©y sĂ¡t vĂ  cuĂ¡Â»â„¢n Ă„â€˜Ă†Â°Ă¡Â»Â£c
 * (`.ez-hd-menu` cĂ³ `overflow-x: auto`), nĂ¡ÂºÂ¿u Ă´ tìm kiĂ¡ÂºÂ¿m trong suĂ¡Â»â€˜t thì chĂ¡Â»Â¯ menu sĂ¡ÂºÂ½ hiĂ¡Â»â€¡n ra
 * ngay dĂ†Â°Ă¡Â»â€ºi nĂ³.
 *
 * `padding-left` Ă„â€˜Ă¡Â»Æ’ chĂ¡Â»Â¯ menu khĂ´ng chĂ¡ÂºÂ¡m sĂ¡t Ă´ tìm kiĂ¡ÂºÂ¿m khi cuĂ¡Â»â„¢n tĂ¡Â»â€ºi cuĂ¡Â»â€˜i.
 */
.ez-hd-nav .ez-hd-search {
	/*
	 * O TIM KIEM: nam CUOI MENU, cung MOT HANG (06-10-2026 theo yeu cau).
	 *
	 * Truoc do tung bi day xuong hang rieng, nhung lam vay khung menu cao 86px trong khi hang menu
	 * chi 40px -> ho mot khoang xanh 46px ben duoi, va khi hover nhin thay ro.
	 * Nay ve cung hang: menu + o tim kiem la mot nhom duoc can giua, o tim kiem nam sat cuoi nhom.
	 */
	position: static;
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	padding-left: 14px;
	background: transparent;
}

/*
 * MENU: chừa chỗ cho ô tìm kiếm + cuộn ngang khi hết chỗ (06-10-2026).
 *
 * Áp dụng ở MỌI bề rộng, không chỉ trong @media. Lý do: menu đứng giữa còn ô tìm kiếm (273px)
 * nằm đè bên phải, nên nếu menu rộng bằng cả khung thì mục CUỐI bị ô tìm kiếm che.
 * Đo thật khi thiếu dòng này: chữ "Dịch vụ gia công" bị đè 8px ở màn 1920/1400.
 *
 * `calc(100% - 293px)` = chừa 273px cho form + 20px khoảng cách.
 *
 * ⚠️ `min-width: 0` là BẮT BUỘC: mục flex mặc định `min-width: auto` nên không chịu co xuống
 * dưới bề rộng nội dung — thiếu nó thì `max-width` không có tác dụng gì.
 *
 * `margin: 0 auto` để căn giữa trong phần còn lại. `overflow-x: auto` để khi bị co quá thì
 * cuộn ngang được thay vì mất mục.
 */
.ez-hd-nav .ez-hd-menu {
	/*
	 * align-self: flex-start — giu menu DUNG 40px, khong bi keo cao bang ca khung.
	 * Hang khai `align-items: stretch` nen mac dinh muc nay cao bang ca khung (86px) trong khi
	 * noi dung chi 40px -> nua duoi thanh khoang xanh trong, va nen hover chi phu 40px do.
	 */
	align-self: flex-start;
	/*
	 * `flex: 0 0 auto` — GIỮ NGUYÊN bề rộng nội dung (761px), KHÔNG cho co.
	 *
	 * ⚠️ ĐỪNG đổi thành `flex: 0 1 auto` rồi dựa vào `max-width`. Đã thử và SAI: ô tìm kiếm
	 * bên cạnh khai `flex: 1 1 100%`, tức hệ số co × bề rộng cơ sở của nó lớn hơn menu rất
	 * nhiều, nên khi hết chỗ trình duyệt co MENU trước — đo được menu còn 631px trong khi form
	 * còn 422px, và form vẫn đè lên mục cuối của menu.
	 * Cách đúng: menu giữ nguyên, để Ô TÌM KIẾM co (xem rule `.ez-hd-nav .ez-hd-search`).
	 */
	flex: 0 0 auto;
	max-width: 100%;
	margin: 0 auto;
	/*
	 * ⚠️ TUYET DOI KHONG dat `overflow-x: auto` (hay bat ky `overflow` khac `visible`) o day.
	 *
	 * Menu con (`.sub-menu`) dat `position: absolute; top: 100%` — tuc no XO RA NGOAI khoi menu,
	 * xuong duoi dai menu. Khi phan tu co `overflow-x: auto`, trinh duyet buoc phai tinh
	 * `overflow-y` thanh `auto` theo (quy tac CSS: mot truc khac `visible` thi truc con lai thanh
	 * `auto`). The la menu con bi CAT MAT — dung loi "khong hien ra menu con".
	 *
	 * Menu da duoc xuong hang o nguong 1300px nen khong con can cuon ngang nua.
	 */
	overflow: visible;
}



/*
 * DÄ‚Â¡Ă‚ÂºĂ‚Â£i menu nÄ‚Â¡Ă‚Â»Ă‚Ân xanh -> chÄ‚Â¡Ă‚Â»Ă‚Â¯ trÄ‚Â¡Ă‚ÂºĂ‚Â¯ng; hover dĂ„â€šĂ‚Â¹ng vĂ ng nhÄ‚Â¡Ă‚ÂºĂ‚Â¥n vì xanh trĂ„â€šĂ‚Âªn xanh sÄ‚Â¡Ă‚ÂºĂ‚Â½ chìm.
 *
 * CÄ‚Â¡Ă‚Â»Ă‚Â  CHÄ‚Â¡Ă‚Â»Ă‚Â® QUA CÁC LÄ‚Â¡Ă‚ÂºĂ‚Â¦N:
 *   13px/48px  ->  12px/32px (thu nhÄ‚Â¡Ă‚Â»Ă‚Â)  ->  15px/40px (06-10-2026: cho chÄ‚Â¡Ă‚Â»Ă‚Â¯ TO RA)
 * ChÄ‚Â¡Ă‚Â»Ă‚Â§ shop thÄ‚Â¡Ă‚ÂºĂ‚Â¥y 12px quĂ„â€šĂ‚Â¡ nhÄ‚Â¡Ă‚Â»Ă‚Â so vÄ‚Â¡Ă‚Â»Ă¢â‚¬Âºi Ă´ tìm kiÄ‚Â¡Ă‚ÂºĂ‚Â¿m bĂ„â€šĂ‚Âªn cÄ‚Â¡Ă‚ÂºĂ‚Â¡nh nĂ„â€šĂ‚Âªn yĂ„â€šĂ‚Âªu cÄ‚Â¡Ă‚ÂºĂ‚Â§u tĂ„Æ’ng. 15px lĂ  cÄ‚Â¡Ă‚Â»Ă‚Â¡ Ä‚â€žĂ¢â‚¬ËœÄ‚Â¡Ă‚Â»Ă‚Âc
 * thoÄ‚Â¡Ă‚ÂºĂ‚Â£i mĂ„â€šĂ‚Â¡i cho menu, Ä‚â€žĂ¢â‚¬ËœÄ‚Â¡Ă‚Â»Ă¢â‚¬Å“ng thÄ‚Â¡Ă‚Â»Ă‚Âi vÄ‚Â¡Ă‚ÂºĂ‚Â«n nhÄ‚Â¡Ă‚Â»Ă‚Â hÄ‚â€ Ă‚Â¡n tĂ„â€šĂ‚Âªn cĂ´ng ty Ä‚Â¡Ă‚Â»Ă…Â¸ banner (25px) Ä‚â€žĂ¢â‚¬ËœÄ‚Â¡Ă‚Â»Ă†â€™ giÄ‚Â¡Ă‚Â»Ă‚Â¯ thÄ‚Â¡Ă‚Â»Ă‚Â© bÄ‚Â¡Ă‚ÂºĂ‚Â­c.
 *
 * Ä‚â€žĂ‚ÂÄ‚Â¡Ă‚Â»Ă¢â‚¬Â¡m ngang 12px -> 16px: chÄ‚Â¡Ă‚Â»Ă‚Â¯ to hÄ‚â€ Ă‚Â¡n thì cÄ‚Â¡Ă‚ÂºĂ‚Â§n nhiÄ‚Â¡Ă‚Â»Ă‚Âu Ä‚â€žĂ¢â‚¬ËœÄ‚Â¡Ă‚Â»Ă¢â‚¬Â¡m hÄ‚â€ Ă‚Â¡n, nÄ‚Â¡Ă‚ÂºĂ‚Â¿u khĂ´ng cĂ„â€šĂ‚Â¡c mÄ‚Â¡Ă‚Â»Ă‚Â¥c dĂ­nh vĂ o nhau.
 */
.ez-hd-navlink {
	display: inline-block;
	padding: 0 16px;
	color: #fff;
	font-size: 15px;
	font-weight: 600;
	line-height: 40px;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
}

.ez-hd-navlink:hover,
.ez-hd-navlink:focus {
	color: var(--ez-yellow);
	background: var(--ez-green-dark);
}

/*
 * MÁY TĂ„â€šĂ‚ÂNH BÄ‚Â¡Ă‚ÂºĂ‚Â¢NG (Ä‚Â¢Ă¢â‚¬Â°Ă‚Â¤1100px): menu vĂ  Ă´ tìm kiÄ‚Â¡Ă‚ÂºĂ‚Â¿m KHĂ„â€šĂ¢â‚¬ÂNG cĂ„â€šĂ‚Â²n Ä‚â€žĂ¢â‚¬ËœÄ‚Â¡Ă‚Â»Ă‚Â§ chÄ‚Â¡Ă‚Â»Ă¢â‚¬â€ nÄ‚Â¡Ă‚ÂºĂ‚Â±m chung mÄ‚Â¡Ă‚Â»Ă¢â€žÂ¢t hĂ ng.
 *
 * Menu 4 mÄ‚Â¡Ă‚Â»Ă‚Â¥c chiÄ‚Â¡Ă‚ÂºĂ‚Â¿m ~500px (Ä‚â€žĂ¢â‚¬Ëœo thÄ‚Â¡Ă‚ÂºĂ‚Â­t: 98+89+79+127px chÄ‚Â¡Ă‚Â»Ă‚Â¯ + 4Ă„â€šĂ¢â‚¬â€24px Ä‚â€žĂ¢â‚¬ËœÄ‚Â¡Ă‚Â»Ă¢â‚¬Â¡m ngang), cÄ‚Â¡Ă‚Â»Ă¢â€žÂ¢ng Ă´ tìm
 * kiÄ‚Â¡Ă‚ÂºĂ‚Â¿m 300px vĂ  khoÄ‚Â¡Ă‚ÂºĂ‚Â£ng cĂ„â€šĂ‚Â¡ch 20px lĂ  ~820px. ThĂ„â€šĂ‚Âªm bÄ‚Â¡Ă‚Â»Ă‚Â rÄ‚Â¡Ă‚Â»Ă¢â€žÂ¢ng tÄ‚Â¡Ă‚Â»Ă¢â‚¬Ëœi thiÄ‚Â¡Ă‚Â»Ă†â€™u cÄ‚Â¡Ă‚Â»Ă‚Â§a lÄ‚â€ Ă‚Â°Ä‚Â¡Ă‚Â»Ă¢â‚¬Âºi nÄ‚Â¡Ă‚Â»Ă¢â€žÂ¢i dung thì
 * dÄ‚â€ Ă‚Â°Ä‚Â¡Ă‚Â»Ă¢â‚¬Âºi ~1000px lĂ  chĂ„â€šĂ‚Âºng chen vĂ o nhau. NĂ„â€šĂ‚Âªn tÄ‚Â¡Ă‚Â»Ă‚Â« 1100px trÄ‚Â¡Ă‚Â»Ă…Â¸ xuÄ‚Â¡Ă‚Â»Ă¢â‚¬Ëœng cho xuÄ‚Â¡Ă‚Â»Ă¢â‚¬Ëœng HAI HĂ„â€šĂ¢â€šÂ¬NG:
 * menu mÄ‚Â¡Ă‚Â»Ă¢â€žÂ¢t hĂ ng, Ă´ tìm kiÄ‚Â¡Ă‚ÂºĂ‚Â¿m mÄ‚Â¡Ă‚Â»Ă¢â€žÂ¢t hĂ ng dĂ„â€šĂ‚Â¹ng hÄ‚Â¡Ă‚ÂºĂ‚Â¿t bÄ‚Â¡Ă‚Â»Ă‚Â rÄ‚Â¡Ă‚Â»Ă¢â€žÂ¢ng.
 *
 * Ä‚â€žĂ‚ÂĂ„â€šĂ‚Â¢y lĂ  chÄ‚Â¡Ă‚Â»Ă¢â‚¬â€ Ä‚â€žĂ¢â‚¬ËœĂ„â€šĂ‚Â¡nh Ä‚â€žĂ¢â‚¬ËœÄ‚Â¡Ă‚Â»Ă¢â‚¬Â¢i: bÄ‚Â¡Ă‚ÂºĂ‚Â£n PC (mÄ‚Â¡Ă‚Â»Ă¢â€žÂ¢t hĂ ng) lĂ  bÄ‚Â¡Ă‚Â»Ă¢â‚¬Ëœ cÄ‚Â¡Ă‚Â»Ă‚Â¥c chÄ‚Â¡Ă‚Â»Ă‚Â§ shop muÄ‚Â¡Ă‚Â»Ă¢â‚¬Ëœn, nhÆ°ng nhÄ‚Â¡Ă‚Â»Ă¢â‚¬Å“i mĂ„â€šĂ‚Â£i vĂ o mÄ‚Â¡Ă‚Â»Ă¢â€žÂ¢t
 * hĂ ng Ä‚Â¡Ă‚Â»Ă…Â¸ mĂ n hÄ‚Â¡Ă‚ÂºĂ‚Â¹p thì chÄ‚Â¡Ă‚Â»Ă‚Â¯ sÄ‚Â¡Ă‚ÂºĂ‚Â½ chÄ‚Â¡Ă‚Â»Ă¢â‚¬Å“ng lĂ„â€šĂ‚Âªn nhau Ä‚Â¢Ă¢â€šÂ¬Ă¢â‚¬Â tÄ‚Â¡Ă‚Â»Ă¢â‚¬Â¡ hÄ‚â€ Ă‚Â¡n nhiÄ‚Â¡Ă‚Â»Ă‚Âu so vÄ‚Â¡Ă‚Â»Ă¢â‚¬Âºi viÄ‚Â¡Ă‚Â»Ă¢â‚¬Â¡c xuÄ‚Â¡Ă‚Â»Ă¢â‚¬Ëœng hai hĂ ng.
 */
/*
 * NGUONG XUONG HAI HANG: 1300px (nang tu 1100px ngay 06-10-2026).
 *
 * VI SAO NANG: menu that rong 867px (7 muc) + o tim kiem 273px + 14px cach nhau = 1154px.
 * Khung noi dung rong 1260px, nen chi khi con du cho mot hang thi menu va o tim kiem moi nam
 * canh nhau duoc. Duoi nguong do ma van nhoi mot hang thi menu DE LEN o tim kiem.
 * Do thuc te o man 1200px: menu ket thuc o x=1023 con o tim kiem bat dau o x=1003 -> chong 20px.
 */
@media (max-width: 1300px) {
	/*
	 * Menu vĂ  Ă´ tìm kiếm xuống HAI HĂ€NG.
	 *
	 * ⚠️ Ở bản PC, menu nằm giữa nhờ `.ez-hd-menu { margin: 0 auto }` vĂ  hĂ ng chỉ cĂ³ MỘT mục
	 * trong luồng (Ă´ tìm kiếm Ä‘Ă£ `absolute`). Xuống hai hĂ ng thì cĂ¡ch Ä‘Ă³ KHĂ”NG cĂ²n Ä‘Ăºng: mục
	 * `flex: 1 1 100%` chiếm trọn hĂ ng nĂªn `margin: auto` hết chá»— để đẩy, menu lại dồn trĂ¡i.
	 * Vì vậy ở Ä‘Ă¢y phải căn giữa bằng CHÍNH hĂ ng flex (`justify-content: center`, menu để
	 * `flex: 0 0 auto`) vĂ  trả `margin` của menu về `0`.
	 */
	/*
	 * gap: 0 14px — KHONG khoang cach DOC, GIU 14px khoang cach NGANG.
	 *
	 * Khoang cach DOC phai bang 0: hai hang (menu / o tim kiem) cung mau xanh, de cach nhau thi
	 * o giua hien ra mot DAI XANH TRONG — nhin khong lien lac. Do duoc o man 1200px: menu ket thuc
	 * o y=185, o tim kiem bat dau o y=191 -> ho 6px.
	 *
	 * Khoang cach NGANG 14px thi phai giu: khi con du cho mot hang (man >= 1250px), menu va o tim
	 * kiem nam canh nhau, thieu no la dinh vao nhau.
	 */
	.ez-hd-nav .ez-hd-inner {
		flex-wrap: wrap;
		justify-content: center;
		gap: 0 14px;
		align-content: flex-start;
	}

	/*
	 * ⚠️ Tra menu ve `align-self: auto` (tuc `stretch`) o nguong nay.
	 *
	 * Ban PC dat `.ez-hd-menu { align-self: flex-start }` de menu khong bi keo cao bang ca khung.
	 * Nhung o day menu la muc DUY NHAT cua hang 1, va chinh no quyet dinh chieu cao hang 1.
	 * Ep no `flex-start` lam hang 1 co lai, roi o tim kiem (hang 2) bi keo lech — do duoc o man
	 * 1000px: menu o 129..169, o tim kiem o 175..215 trong khi hang 2 phai bat dau o 169 ->
	 * HO TREN 6px, ho duoi 0px. Dung loi "ho tren khong ho duoi".
	 *
	 * De `stretch` thi hang 1 cao dung 40px va hover van phu kin.
	 */
	.ez-hd-nav .ez-hd-menu {
		align-self: auto;
	}



	/*
	 * ⚠️ PHẢI trả ô tìm kiếm về `static` ở ngưỡng này.
	 * Rule ngoài @media là `.ez-hd-nav .ez-hd-search { position: absolute }` với độ ưu tiên
	 * (0,2,0). Nếu ở đây chỉ khai `.ez-hd-search` (0,1,0) thì KHÔNG thắng được — ô tìm kiếm
	 * vẫn nổi tuyệt đối và đè lên menu thay vì xuống hàng.
	 */
	/*
	 * O TIM KIEM — hang RIENG ben duoi menu, phu KIN chieu cao hang.
	 *
	 * ⚠️ `align-self: stretch` la BAT BUOC, thieu no la o tim kiem bi lech:
	 * do duoc o man 1000px: nav cao 86px (2 hang), menu 40px, o tim kiem 40px NHUNG dat o
	 * y=175..215 trong khi hang cua no la 169..215 -> HO TREN 6px, ho duoi 0px. Dung loi
	 * "ho tren khong ho duoi" ma chu shop chi ra.
	 *
	 * `align-items: center` co san o rule goc nen khi o tim kiem cao bang ca hang thi form
	 * ben trong van duoc can giua theo chieu doc.
	 */
	.ez-hd-nav .ez-hd-search {
		position: static;
		align-self: stretch;
		flex: 1 1 100%;
		padding-left: 0;
		background: transparent;
	}

	.ez-hd-form {
		max-width: none;
	}

	.ez-hd-form button {
		width: 70px;
	}

	.ez-hd-hotline {
		padding: 0 10px;
		font-size: 12px;
	}
}

@media (max-width: 782px) {
	/*
	 * AN HANG TREN CUNG (`.ez-hd-top`) TREN DIEN THOAI (06-10-2026 theo yeu cau).
	 *
	 * Hang nay chua: loi chao `CHUYEN KHUON NHUA - KHUON CHAI - KHUON LINH KIEN` va hotline.
	 * Tren dien thoai no chiem 40px dau trang ma thong tin khong con gia tri (hotline da hien
	 * to o banner ngay duoi), lai lam chu phai xuong dong. An di cho header gon.
	 *
	 * Chi an o <=782px. May tinh giu nguyen.
	 */
	.ez-hd-top {
		display: none;
	}

	.ez-hd-top .ez-hd-inner {
		justify-content: center;
		text-align: center;
	}

	.ez-hd-slogan {
		font-size: 12px;
		line-height: 18px;
	}

	.ez-hd-system {
		display: none;
	}

	.ez-hd-main .ez-hd-inner {
		flex-wrap: wrap;
		gap: 10px;
	}

	.ez-hd-hotline,
	.ez-hd-cart {
		line-height: 36px;
		font-size: 12px;
	}

	.ez-hd-cart-count {
		top: -4px;
		right: -4px;
	}

	/*
	 * CHÄ‚Â¡Ă‚Â»Ă‹â€  ĐIÄ‚Â¡Ă‚Â»Ă¢â‚¬Â N THOÄ‚Â¡Ă‚ÂºĂ‚Â I (Ä‚Â¢Ă¢â‚¬Â°Ă‚Â¤782px): Ä‚â€žĂ¢â‚¬ËœÄ‚Â¡Ă‚ÂºĂ‚Â©y riĂ„â€šĂ‚Âªng nĂ„â€šĂ‚Âºt GIÄ‚Â¡Ă‚Â»Ă‚ÂŽ HĂ„â€šĂ¢â€šÂ¬NG ra sĂ„â€šĂ‚Â¡t mĂ©p phÄ‚Â¡Ă‚ÂºĂ‚Â£i.
	 *
	 * HĂ ng 1 cÄ‚Â¡Ă‚Â»Ă‚Â§a .ez-hd-main (3 gÄ‚Â¡Ă‚ÂºĂ‚Â¡ch · [logo Ä‚Â¢Ă¢â€šÂ¬Ă¢â‚¬Â Ă„ÂÄ‚Æ’ GÄ‚Â¡Ă‚Â»Ă‚Â ] · giÄ‚Â¡Ă‚Â»Ă‚Â hĂ ng) nÄ‚Â¡Ă‚ÂºĂ‚Â±m trong mÄ‚Â¡Ă‚Â»Ă¢â€žÂ¢t flex
	 * khĂ´ng cĂ„â€šĂ‚Â³ `justify-content` nĂ„â€šĂ‚Âªn mÄ‚Â¡Ă‚ÂºĂ‚Â·c Ä‚â€žĂ¢â‚¬ËœÄ‚Â¡Ă‚Â»Ă¢â‚¬Â¹nh `flex-start`: cĂ„â€šĂ‚Â¡c mÄ‚Â¡Ă‚Â»Ă‚Â¥c dÄ‚Â¡Ă‚Â»Ă¢â‚¬Å“n vÄ‚Â¡Ă‚Â»Ă‚Â bĂ„â€šĂ‚Âªn trĂ„â€šĂ‚Â¡i vĂ 
	 * chÄ‚Â¡Ă‚Â»Ă‚Â«a ra mÄ‚Â¡Ă‚Â»Ă¢â€žÂ¢t khoÄ‚Â¡Ă‚ÂºĂ‚Â£ng xanh trÄ‚Â¡Ă‚Â»Ă¢â‚¬Ëœng bĂ„â€šĂ‚Âªn phÄ‚Â¡Ă‚ÂºĂ‚Â£i (Ă´ tìm kiÄ‚Â¡Ă‚ÂºĂ‚Â¿m khĂ´ng nÄ‚Â¡Ă‚ÂºĂ‚Â±m hĂ ng nĂ y vì Ä‚Â¡Ă‚Â»Ă…Â¸ Ä‚Â¢Ă¢â‚¬Â°Ă‚Â¤782px
	 * nĂ„â€šĂ‚Â³ Ä‚â€žĂ¢â‚¬ËœÄ‚â€ Ă‚Â°Ä‚Â¡Ă‚Â»Ă‚Â£c Ä‚â€žĂ¢â‚¬ËœÄ‚Â¡Ă‚ÂºĂ‚Â·t `flex: 1 1 100%` + `order: 3`, tÄ‚Â¡Ă‚Â»Ă‚Â©c bÄ‚Â¡Ă‚Â»Ă¢â‚¬Â¹ Ä‚â€žĂ¢â‚¬ËœÄ‚Â¡Ă‚ÂºĂ‚Â©y xuÄ‚Â¡Ă‚Â»Ă¢â‚¬Ëœng hĂ ng 2).
	 *
	 * `margin-left: auto` chÄ‚Â¡Ă‚Â»Ă¢â‚¬Â° kĂ©o MÄ‚Â¡Ă‚Â»Ă‹Å“T mình nĂ„â€šĂ‚Âºt giÄ‚Â¡Ă‚Â»Ă‚Â hĂ ng sang phÄ‚Â¡Ă‚ÂºĂ‚Â£i; nĂ„â€šĂ‚Âºt 3 gÄ‚Â¡Ă‚ÂºĂ‚Â¡ch, logo
	 * vĂ  hotline giÄ‚Â¡Ă‚Â»Ă‚Â¯ nguyĂ„â€šĂ‚Âªn chÄ‚Â¡Ă‚Â»Ă¢â‚¬â€ cÅ©. KhĂ´ng dĂ„â€šĂ‚Â¹ng `justify-content` trĂ„â€šĂ‚Âªn .ez-hd-inner
	 * vì nhÆ° vÄ‚Â¡Ă‚ÂºĂ‚Â­y sÄ‚Â¡Ă‚ÂºĂ‚Â½ dÄ‚Â¡Ă‚Â»Ă‚Âi luĂ´n cÄ‚Â¡Ă‚ÂºĂ‚Â£ logo (space-between) hoÄ‚Â¡Ă‚ÂºĂ‚Â·c cÄ‚Â¡Ă‚ÂºĂ‚Â£ cÄ‚Â¡Ă‚Â»Ă‚Â¥m (flex-end).
	 */
	.ez-hd-main .ez-hd-cart {
		margin-left: auto;
	}

	/*
	 * CHÄ‚Â¡Ă‚Â»Ă‹â€  ĐIÄ‚Â¡Ă‚Â»Ă¢â‚¬Â N THOÄ‚Â¡Ă‚ÂºĂ‚Â I: sau khi khĂ„â€šĂ‚Â¡ch cuÄ‚Â¡Ă‚Â»Ă¢â€žÂ¢n qua header, DÁN khÄ‚Â¡Ă‚Â»Ă¢â‚¬Ëœi .ez-hd-main
	 * (3 gÄ‚Â¡Ă‚ÂºĂ‚Â¡ch · logo · Ă´ tìm kiÄ‚Â¡Ă‚ÂºĂ‚Â¿m · GIÄ‚Â¡Ă‚Â»Ă‚ÂŽ HĂ„â€šĂ¢â€šÂ¬NG) lĂ„â€šĂ‚Âªn Ä‚â€žĂ¢â‚¬ËœÄ‚Â¡Ă‚Â»Ă¢â‚¬Â°nh mĂ n hình:
	 *   - kĂ©o XUÄ‚Â¡Ă‚Â»Ă‚ÂNG -> trÄ‚â€ Ă‚Â°Ä‚Â¡Ă‚Â»Ă‚Â£t lĂ„â€šĂ‚Âªn Ä‚Â¡Ă‚ÂºĂ‚Â©n, nhÄ‚â€ Ă‚Â°Ä‚Â¡Ă‚Â»Ă‚Âng chÄ‚Â¡Ă‚Â»Ă¢â‚¬â€ cho nÄ‚Â¡Ă‚Â»Ă¢â€žÂ¢i dung
	 *   - cuÄ‚Â¡Ă‚Â»Ă¢â€žÂ¢n LÊN  -> trÄ‚â€ Ă‚Â°Ä‚Â¡Ă‚Â»Ă‚Â£t xuÄ‚Â¡Ă‚Â»Ă¢â‚¬Ëœng hiÄ‚Â¡Ă‚Â»Ă¢â‚¬Â¡n lÄ‚Â¡Ă‚ÂºĂ‚Â¡i Ä‚â€žĂ¢â‚¬ËœÄ‚Â¡Ă‚Â»Ă†â€™ khĂ„â€šĂ‚Â¡ch mÄ‚Â¡Ă‚Â»Ă…Â¸ menu / tìm thuÄ‚Â¡Ă‚Â»Ă¢â‚¬Ëœc / vĂ o giÄ‚Â¡Ă‚Â»Ă‚Â
	 *   - vÄ‚Â¡Ă‚Â»Ă‚Â sĂ„â€šĂ‚Â¡t Ä‚â€žĂ¢â‚¬ËœÄ‚Â¡Ă‚ÂºĂ‚Â§u trang -> trÄ‚Â¡Ă‚ÂºĂ‚Â£ khÄ‚Â¡Ă‚Â»Ă¢â‚¬Ëœi vÄ‚Â¡Ă‚Â»Ă‚Â Ä‚â€žĂ¢â‚¬ËœĂ„â€šĂ‚Âºng luÄ‚Â¡Ă‚Â»Ă¢â‚¬Å“ng nhÆ° cÅ©
	 *
	 * PhÄ‚Â¡Ă‚ÂºĂ‚Â§n Ä‚â€žĂ¢â‚¬ËœÄ‚Â¡Ă‚Â»Ă¢â‚¬Â¢i hÄ‚â€ Ă‚Â°Ä‚Â¡Ă‚Â»Ă¢â‚¬Âºng cuÄ‚Â¡Ă‚Â»Ă¢â€žÂ¢n nÄ‚Â¡Ă‚ÂºĂ‚Â±m Ä‚Â¡Ă‚Â»Ă…Â¸ JS trong inc/header.php (thĂ„â€šĂ‚Âªm/bÄ‚Â¡Ă‚Â»Ă¢â‚¬Âºt .is-stuck .is-hidden).
	 *
	 * Ä‚Â¢Ă‚ÂšĂ‚Â Ä‚Â¯Ă‚Â¸Ă‚Â DĂ„â€šĂ‚Â¹ng `fixed` chÄ‚Â¡Ă‚Â»Ă‚Â© KHĂ„â€šĂ¢â‚¬ÂNG Ä‚â€žĂ¢â‚¬ËœÄ‚â€ Ă‚Â°Ä‚Â¡Ă‚Â»Ă‚Â£c Ä‚â€žĂ¢â‚¬ËœÄ‚Â¡Ă‚Â»Ă¢â‚¬Â¢i sang `sticky`: body cÄ‚Â¡Ă‚Â»Ă‚Â§a Astra/WP Ä‚â€žĂ¢â‚¬ËœÄ‚Â¡Ă‚ÂºĂ‚Â·t
	 * `overflow-x: hidden` nĂ„â€šĂ‚Âªn sticky KHĂ„â€šĂ¢â‚¬ÂNG dĂ­nh - Ä‚â€žĂ¢â‚¬ËœĂ„â€šĂ‚Â£ Ä‚â€žĂ¢â‚¬Ëœo thÄ‚Â¡Ă‚Â»Ă‚Â­ trong Chrome thÄ‚Â¡Ă‚ÂºĂ‚Â­t:
	 * cuÄ‚Â¡Ă‚Â»Ă¢â€žÂ¢n xuÄ‚Â¡Ă‚Â»Ă¢â‚¬Ëœng 900px thì khÄ‚Â¡Ă‚Â»Ă¢â‚¬Ëœi trĂ´i lĂ„â€šĂ‚Âªn top = -991px (mÄ‚Â¡Ă‚ÂºĂ‚Â¥t hÄ‚Â¡Ă‚ÂºĂ‚Â³n khÄ‚Â¡Ă‚Â»Ă‚Âi mĂ n hình), vĂ 
	 * cuÄ‚Â¡Ă‚Â»Ă¢â€žÂ¢n ngÄ‚â€ Ă‚Â°Ä‚Â¡Ă‚Â»Ă‚Â£c lĂ„â€šĂ‚Âªn nĂ„â€šĂ‚Â³ cÅ©ng khĂ´ng quay lÄ‚Â¡Ă‚ÂºĂ‚Â¡i. `fixed` khĂ´ng bÄ‚Â¡Ă‚Â»Ă¢â‚¬Â¹ Ä‚Â¡Ă‚ÂºĂ‚Â£nh hÄ‚â€ Ă‚Â°Ä‚Â¡Ă‚Â»Ă…Â¸ng bÄ‚Â¡Ă‚Â»Ă…Â¸i overflow
	 * cÄ‚Â¡Ă‚Â»Ă‚Â§a tÄ‚Â¡Ă‚Â»Ă¢â‚¬Â¢ tiĂ„â€šĂ‚Âªn, nhÆ°ng rĂ„â€šĂ‚Âºt khÄ‚Â¡Ă‚Â»Ă¢â‚¬Ëœi ra khÄ‚Â¡Ă‚Â»Ă‚Âi luÄ‚Â¡Ă‚Â»Ă¢â‚¬Å“ng nĂ„â€šĂ‚Âªn JS phÄ‚Â¡Ă‚ÂºĂ‚Â£i chèn thĂ„â€šĂ‚Âªm
	 * div.ez-hd-mob-spacer giÄ‚Â¡Ă‚Â»Ă‚Â¯ chÄ‚Â¡Ă‚Â»Ă¢â‚¬â€, nÄ‚Â¡Ă‚ÂºĂ‚Â¿u khĂ´ng nÄ‚Â¡Ă‚Â»Ă¢â€žÂ¢i dung bĂ„â€šĂ‚Âªn dÄ‚â€ Ă‚Â°Ä‚Â¡Ă‚Â»Ă¢â‚¬Âºi nhÄ‚Â¡Ă‚ÂºĂ‚Â£y lĂ„â€šĂ‚Âªn 130px.
	 */
	.ez-hd-main.is-stuck {
		position: fixed;
		top: var(--wp-admin--admin-bar--height, 0px);
		left: 0;
		right: 0;
		z-index: 100;
		box-shadow: 0 4px 12px rgba(16, 24, 40, 0.12);
		transition: transform 0.25s ease;
		/*
		 * Ä‚â€žĂ‚ÂÄ‚Â¡Ă‚ÂºĂ‚Â©y khÄ‚Â¡Ă‚Â»Ă¢â‚¬Ëœi lĂ„â€šĂ‚Âªn layer riĂ„â€šĂ‚Âªng cÄ‚Â¡Ă‚Â»Ă‚Â§a GPU. ThiÄ‚Â¡Ă‚ÂºĂ‚Â¿u 2 dĂ„â€šĂ‚Â²ng nĂ y thì mÄ‚Â¡Ă‚Â»Ă¢â‚¬â€i khung hình lĂ„â€šĂ‚Âºc
		 * trÄ‚â€ Ă‚Â°Ä‚Â¡Ă‚Â»Ă‚Â£t, trình duyÄ‚Â¡Ă‚Â»Ă¢â‚¬Â¡t phÄ‚Â¡Ă‚ÂºĂ‚Â£i vÄ‚Â¡Ă‚ÂºĂ‚Â½ lÄ‚Â¡Ă‚ÂºĂ‚Â¡i cÄ‚Â¡Ă‚ÂºĂ‚Â£ trang -> trĂ„â€šĂ‚Âªn Ä‚â€žĂ¢â‚¬ËœiÄ‚Â¡Ă‚Â»Ă¢â‚¬Â¡n thoÄ‚Â¡Ă‚ÂºĂ‚Â¡i thÄ‚Â¡Ă‚ÂºĂ‚Â¥y giÄ‚Â¡Ă‚ÂºĂ‚Â­t.
		 */
		will-change: transform;
		backface-visibility: hidden;
	}

	.ez-hd-main.is-stuck.is-hidden {
		/* translate3d (khĂ´ng phÄ‚Â¡Ă‚ÂºĂ‚Â£i translateY) Ä‚â€žĂ¢â‚¬ËœÄ‚Â¡Ă‚Â»Ă†â€™ trình duyÄ‚Â¡Ă‚Â»Ă¢â‚¬Â¡t chÄ‚Â¡Ă‚ÂºĂ‚Â¡y trĂ„â€šĂ‚Âªn GPU. */
		transform: translate3d(0, -101%, 0);
		/* KhÄ‚Â¡Ă‚Â»Ă¢â‚¬Ëœi Ä‚â€žĂ¢â‚¬ËœĂ„â€šĂ‚Â£ ra ngoĂ i mĂ n hình thì khÄ‚Â¡Ă‚Â»Ă‚Âi vÄ‚Â¡Ă‚ÂºĂ‚Â½ Ä‚â€žĂ¢â‚¬ËœÄ‚Â¡Ă‚Â»Ă¢â‚¬Â¢ bĂ„â€šĂ‚Â³ng. */
		box-shadow: none;
	}

	/*
	 * ChÄ‚Â¡Ă‚ÂºĂ‚Â·n transition ĐÚNG lĂ„â€šĂ‚Âºc bÄ‚Â¡Ă‚ÂºĂ‚Â­t/tÄ‚Â¡Ă‚ÂºĂ‚Â¯t trÄ‚Â¡Ă‚ÂºĂ‚Â¡ng thĂ„â€šĂ‚Â¡i dĂ„â€šĂ‚Â¡n. ThiÄ‚Â¡Ă‚ÂºĂ‚Â¿u rule nĂ y thì lĂ„â€šĂ‚Âºc mÄ‚Â¡Ă‚Â»Ă¢â‚¬Âºi
	 * dĂ„â€šĂ‚Â¡n, header Ä‚â€žĂ¢â‚¬Ëœang Ä‚Â¡Ă‚Â»Ă…Â¸ ngoĂ i mĂ n hình phĂ­a trĂ„â€šĂ‚Âªn sÄ‚Â¡Ă‚ÂºĂ‚Â½ bÄ‚Â¡Ă‚Â»Ă¢â‚¬Â¹ trÄ‚â€ Ă‚Â°Ä‚Â¡Ă‚Â»Ă‚Â£t tÄ‚Â¡Ă‚Â»Ă‚Â« translateY(0) xuÄ‚Â¡Ă‚Â»Ă¢â‚¬Ëœng
	 * -101% trong 250ms -> khĂ„â€šĂ‚Â¡ch thÄ‚Â¡Ă‚ÂºĂ‚Â¥y header "nhĂ„â€šĂ‚Â¡y" mÄ‚Â¡Ă‚Â»Ă¢â€žÂ¢t cĂ„â€šĂ‚Â¡i rÄ‚Â¡Ă‚Â»Ă¢â‚¬Å“i mÄ‚Â¡Ă‚Â»Ă¢â‚¬Âºi biÄ‚Â¡Ă‚ÂºĂ‚Â¿n mÄ‚Â¡Ă‚ÂºĂ‚Â¥t.
	 */
	.ez-hd-main.ez-hd-nofx {
		transition: none !important;
	}

	/*
	 * Ä‚Â¢Ă¢â‚¬Â°Ă‚Â¤782px: menu Ä‚â€žĂ¢â‚¬ËœĂ„â€šĂ‚Â£ chuyÄ‚Â¡Ă‚Â»Ă†â€™n vĂ o ngĂ„Æ’n kĂ©o 3 gÄ‚Â¡Ă‚ÂºĂ‚Â¡ch (`.ez-hd-nav { display: none }` Ä‚Â¡Ă‚Â»Ă…Â¸ khÄ‚Â¡Ă‚Â»Ă¢â‚¬Ëœi trĂ„â€šĂ‚Âªn),
	 * nĂ„â€šĂ‚Âªn dÄ‚Â¡Ă‚ÂºĂ‚Â£i nĂ y chÄ‚Â¡Ă‚Â»Ă¢â‚¬Â° cĂ„â€šĂ‚Â²n Ă´ tìm kiÄ‚Â¡Ă‚ÂºĂ‚Â¿m. TrÄ‚Â¡Ă‚ÂºĂ‚Â£ lÄ‚Â¡Ă‚ÂºĂ‚Â¡i `flex: 1 1 100%` Ä‚â€žĂ¢â‚¬ËœÄ‚Â¡Ă‚Â»Ă†â€™ nĂ„â€šĂ‚Â³ dĂ„â€šĂ‚Â¹ng hÄ‚Â¡Ă‚ÂºĂ‚Â¿t bÄ‚Â¡Ă‚Â»Ă‚Â rÄ‚Â¡Ă‚Â»Ă¢â€žÂ¢ng Ä‚Â¢Ă¢â€šÂ¬Ă¢â‚¬Â
	 * nÄ‚Â¡Ă‚ÂºĂ‚Â¿u giÄ‚Â¡Ă‚Â»Ă‚Â¯ `flex: 0 0 auto` cÄ‚Â¡Ă‚Â»Ă‚Â§a bÄ‚Â¡Ă‚ÂºĂ‚Â£n PC thì Ă´ tìm kiÄ‚Â¡Ă‚ÂºĂ‚Â¿m teo lÄ‚Â¡Ă‚ÂºĂ‚Â¡i cĂ„â€šĂ‚Â²n 300px giÄ‚Â¡Ă‚Â»Ă‚Â¯a mĂ n hình.
	 */
	.ez-hd-search {
		flex: 1 1 100%;
	}

	/* `.ez-hd-nav` Ä‚â€žĂ¢â‚¬ËœĂ„â€šĂ‚Â£ bÄ‚Â¡Ă‚Â»Ă¢â‚¬Â¹ Ä‚Â¡Ă‚ÂºĂ‚Â©n Ä‚Â¡Ă‚Â»Ă…Â¸ Ä‚Â¢Ă¢â‚¬Â°Ă‚Â¤782px nĂ„â€šĂ‚Âªn 2 dĂ„â€šĂ‚Â²ng dÄ‚â€ Ă‚Â°Ä‚Â¡Ă‚Â»Ă¢â‚¬Âºi chÄ‚Â¡Ă‚Â»Ă¢â‚¬Â° Ä‚â€žĂ¢â‚¬ËœÄ‚Â¡Ă‚Â»Ă†â€™ chÄ‚Â¡Ă‚ÂºĂ‚Â¯c, phĂ„â€šĂ‚Â²ng khi bÄ‚Â¡Ă‚ÂºĂ‚Â­t lÄ‚Â¡Ă‚ÂºĂ‚Â¡i dÄ‚Â¡Ă‚ÂºĂ‚Â£i menu. */
	.ez-hd-nav .ez-hd-inner {
		flex-wrap: wrap;
		overflow-x: visible;
	}
}

/* ===========================================================================
 * Ô TÌM KIẾM TRÊN ĐIỆN THOẠI (06-10-2026)
 *
 * Ô tìm kiếm của bản PC nằm trong `.ez-hd-nav` — mà dải đó bị ẩn ở ≤782px, nên điện thoại
 * KHÔNG có ô tìm kiếm nào. Khối này là bản sao đặt trong `.ez-hd-main`, NGAY SAU nút 3 gạch.
 *
 * Mặc định ẨN. Chỉ hiện ở ≤782px. Nhờ vậy máy tính vẫn dùng đúng ô cũ trong dải menu,
 * không bao giờ có 2 ô tìm kiếm cùng lúc.
 * =========================================================================== */

.ez-hd-search--mob {
	display: none;
	flex: 1 1 auto;
	min-width: 0;
}

@media (max-width: 782px) {
	/* Hàng nút 3 gạch: 3 gạch bên trái · ô tìm kiếm chiếm phần còn lại. */
	.ez-hd-main .ez-hd-inner {
		flex-wrap: nowrap;
		gap: 10px;
	}

	.ez-hd-search--mob {
		display: flex;
		align-items: center;
	}

	/* Form trong hàng này dùng hết chỗ còn lại, không giới hạn 330px như bản PC. */
	.ez-hd-main .ez-hd-form {
		width: 100%;
		max-width: none;
		/* Nút "Tìm" cùng màu xanh đậm với nút ở dải menu cho nhất quán. */
	}

	.ez-hd-main .ez-hd-form input[type="search"] {
		/* Ô nhập cao bằng nút 3 gạch (40px) trừ viền, để hàng nhìn thẳng. */
		height: 34px;
		font-size: 13px;
	}

	.ez-hd-main .ez-hd-form button {
		height: 34px;
		width: 60px;
		font-size: 12.5px;
	}
}
/* Mobile hamburger button (shown <=782px) */

.ez-hd-burger {
	display: none; 
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 1px solid var(--ez-line);
	border-radius: var(--ez-radius-sm);
	background: #fff;
	color: var(--ez-green);
	cursor: pointer;
	transition: background 0.2s ease, border-color 0.2s ease;
}

.ez-hd-burger:hover,
.ez-hd-burger:focus-visible {
	border-color: var(--ez-green);
	background: var(--ez-green-pale);
}

/* ===========================================================================
 * Ô TÌM KIẾM TRÊN ĐIỆN THOẠI (06-10-2026)
 *
 * Ô tìm kiếm của bản PC nằm trong `.ez-hd-nav` — mà dải đó bị ẩn ở ≤782px, nên điện thoại
 * KHÔNG có ô tìm kiếm nào. Khối này là bản sao đặt trong `.ez-hd-main`, NGAY SAU nút 3 gạch.
 *
 * Mặc định ẨN. Chỉ hiện ở ≤782px. Nhờ vậy máy tính vẫn dùng đúng ô cũ trong dải menu,
 * không bao giờ có 2 ô tìm kiếm cùng lúc.
 * =========================================================================== */

.ez-hd-search--mob {
	display: none;
	flex: 1 1 auto;
	min-width: 0;
}

@media (max-width: 782px) {
	/* Hàng nút 3 gạch: 3 gạch bên trái · ô tìm kiếm chiếm phần còn lại. */
	.ez-hd-main .ez-hd-inner {
		flex-wrap: nowrap;
		gap: 10px;
	}

	.ez-hd-search--mob {
		display: flex;
		align-items: center;
	}

	/* Form trong hàng này dùng hết chỗ còn lại, không giới hạn 330px như bản PC. */
	.ez-hd-main .ez-hd-form {
		width: 100%;
		max-width: none;
		/* Nút "Tìm" cùng màu xanh đậm với nút ở dải menu cho nhất quán. */
	}

	.ez-hd-main .ez-hd-form input[type="search"] {
		/* Ô nhập cao bằng nút 3 gạch (40px) trừ viền, để hàng nhìn thẳng. */
		height: 34px;
		font-size: 13px;
	}

	.ez-hd-main .ez-hd-form button {
		height: 34px;
		width: 60px;
		font-size: 12.5px;
	}
}
/* Mobile hamburger button (shown <=782px) */
.ez-hd-burger-box {
	display: block;
	width: 20px;
	height: 14px;
}

.ez-hd-burger-box span {
	display: block;
	height: 2px;
	margin: 0 0 4px;
	border-radius: 2px;
	background: currentColor;
	transition: transform 0.25s ease, opacity 0.2s ease;
}

.ez-hd-burger-box span:last-child {
	margin-bottom: 0;
}

/* ===========================================================================
 * Ô TÌM KIẾM TRÊN ĐIỆN THOẠI (06-10-2026)
 *
 * Ô tìm kiếm của bản PC nằm trong `.ez-hd-nav` — mà dải đó bị ẩn ở ≤782px, nên điện thoại
 * KHÔNG có ô tìm kiếm nào. Khối này là bản sao đặt trong `.ez-hd-main`, NGAY SAU nút 3 gạch.
 *
 * Mặc định ẨN. Chỉ hiện ở ≤782px. Nhờ vậy máy tính vẫn dùng đúng ô cũ trong dải menu,
 * không bao giờ có 2 ô tìm kiếm cùng lúc.
 * =========================================================================== */

.ez-hd-search--mob {
	display: none;
	flex: 1 1 auto;
	min-width: 0;
}

@media (max-width: 782px) {
	/* Hàng nút 3 gạch: 3 gạch bên trái · ô tìm kiếm chiếm phần còn lại. */
	.ez-hd-main .ez-hd-inner {
		flex-wrap: nowrap;
		gap: 10px;
	}

	.ez-hd-search--mob {
		display: flex;
		align-items: center;
	}

	/* Form trong hàng này dùng hết chỗ còn lại, không giới hạn 330px như bản PC. */
	.ez-hd-main .ez-hd-form {
		width: 100%;
		max-width: none;
		/* Nút "Tìm" cùng màu xanh đậm với nút ở dải menu cho nhất quán. */
	}

	.ez-hd-main .ez-hd-form input[type="search"] {
		/* Ô nhập cao bằng nút 3 gạch (40px) trừ viền, để hàng nhìn thẳng. */
		height: 34px;
		font-size: 13px;
	}

	.ez-hd-main .ez-hd-form button {
		height: 34px;
		width: 60px;
		font-size: 12.5px;
	}
}
/* Mobile hamburger button (shown <=782px) */
.ez-hd-burger.is-active .ez-hd-burger-box span:nth-child(1) {
	transform: translateY(6px) rotate(45deg);
}

.ez-hd-burger.is-active .ez-hd-burger-box span:nth-child(2) {
	opacity: 0;
}

.ez-hd-burger.is-active .ez-hd-burger-box span:nth-child(3) {
	transform: translateY(-6px) rotate(-45deg);
}

.ez-hd-drawer {
	position: fixed;
	inset: 0;
	z-index: 9999;
}

.ez-hd-drawer-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(16, 24, 40, 0.5);
}

.ez-hd-drawer-panel {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 86%;
	max-width: 340px;
	height: 100%;
	background: #fff;
	box-shadow: 4px 0 18px rgba(16, 24, 40, 0.18);
	transform: translateX(-100%);
	transition: transform 0.25s ease;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

.ez-hd-drawer.is-open .ez-hd-drawer-panel {
	transform: translateX(0);
}

/* Mobile menu drawer (hamburger) */
body.ez-drawer-open {
	overflow: hidden;
}

.ez-hd-drawer-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 14px 16px;
	background: var(--ez-green);
	color: #fff;
}

.ez-hd-drawer-title {
	font-family: var(--ez-font);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.4px;
	text-transform: uppercase;
}

.ez-hd-drawer-close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.18);
	color: #fff;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
}

.ez-hd-drawer-close:hover,
.ez-hd-drawer-close:focus-visible {
	background: rgba(255, 255, 255, 0.32);
}

.ez-hd-drawer-list,
.ez-hd-drawer-sub {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ez-hd-drawer-row {
	display: flex;
	align-items: center;
	border-bottom: 1px solid var(--ez-line);
}

.ez-hd-drawer-sub li {
	border-bottom: 1px solid var(--ez-line);
}

.ez-hd-drawer-sub li:last-child {
	border-bottom: 0;
}

/*
 * MỤC TRONG NGĂN KÉO ĐIỆN THOẠI — CHỮ HOA (06-10-2026 theo yêu cầu).
 *
 * Dải menu trên máy tính vốn đã viết HOA (`text-transform: uppercase` ở
 * `.ez-hd-nav .ez-hd-menu > li > a`), nhưng ngăn kéo điện thoại thì chưa — nên hai chỗ
 * nhìn khác nhau, không nhất quán.
 *
 * Đặt ở `.ez-hd-drawer-link` nên áp cho MỌI cấp: mục chính lẫn mục con (depth 1, 2...).
 * Chữ hoa cao hơn chữ thường nên tăng `line-height` 1.4 -> 1.45 cho khỏi chạm dòng.
 */
.ez-hd-drawer-link {
	flex: 1 1 auto;
	min-width: 0;
	padding: 13px 16px;
	color: #222;
	font-family: var(--ez-font);
	font-size: 14.5px;
	font-weight: 600;
	line-height: 1.45;
	text-transform: uppercase;
	letter-spacing: 0.2px;
	text-decoration: none;
}

.ez-hd-drawer-link:hover,
.ez-hd-drawer-link:focus {
	color: var(--ez-green);
}

/* Mobile menu drawer (hamburger) */
.ez-hd-drawer-more {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 46px;
	align-self: stretch;
	padding: 0;
	border: 0;
	border-left: 1px solid var(--ez-line);
	background: transparent;
	color: #444;
	cursor: pointer;
}

.ez-hd-drawer-more:hover,
.ez-hd-drawer-more:focus-visible {
	color: var(--ez-green);
	background: var(--ez-green-pale);
}

/* Custom header */
.ez-hd-caret {
	display: block;
	width: 7px;
	height: 7px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform 0.2s ease;
}

.ez-hd-drawer-item.is-open > .ez-hd-drawer-row .ez-hd-caret {
	transform: rotate(-135deg);
}

/*
 * Danh mÄ‚Â¡Ă‚Â»Ă‚Â¥c con trong ngĂ„Æ’n kĂ©o menu - MÄ‚Â¡Ă‚Â»Ă…â€™I TÄ‚Â¡Ă‚ÂºĂ‚Â¦NG.
 *
 * `.ez-hd-drawer-sub` lÄ‚Â¡Ă‚Â»Ă¢â‚¬Å“ng nhau Ä‚â€žĂ¢â‚¬ËœÄ‚â€ Ă‚Â°Ä‚Â¡Ă‚Â»Ă‚Â£c: mÄ‚Â¡Ă‚Â»Ă‚Â¥c tÄ‚Â¡Ă‚ÂºĂ‚Â§ng 2 cĂ„â€šĂ‚Â³ con thì con nĂ„â€šĂ‚Â³ lĂ  mÄ‚Â¡Ă‚Â»Ă¢â€žÂ¢t
 * `.ez-hd-drawer-sub` khĂ„â€šĂ‚Â¡c nÄ‚Â¡Ă‚ÂºĂ‚Â±m bĂ„â€šĂ‚Âªn trong. Vì vÄ‚Â¡Ă‚ÂºĂ‚Â­y:
 *   - Ä‚Â¡Ă‚ÂºĂ‚Â©n/hiÄ‚Â¡Ă‚Â»Ă¢â‚¬Â¡n dĂ„â€šĂ‚Â¹ng `.ez-hd-drawer-item.is-open > .ez-hd-drawer-sub` cho MÄ‚Â¡Ă‚Â»Ă…â€™I mÄ‚Â¡Ă‚Â»Ă‚Â©c
 *     (con cÄ‚Â¡Ă‚Â»Ă‚Â§a `.ez-hd-drawer-sub` cÅ©ng lĂ  `.ez-hd-drawer-item`)
 *   - mÄ‚Â¡Ă‚Â»Ă‚Â¥c cÄ‚Â¡Ă‚ÂºĂ‚Â¥p cĂ ng sĂ„â€šĂ‚Â¢u cĂ ng thÄ‚Â¡Ă‚Â»Ă‚Â¥t vĂ o, vĂ  chÄ‚Â¡Ă‚Â»Ă‚Â¯ nhÄ‚Â¡Ă‚Â»Ă‚Â hÄ‚â€ Ă‚Â¡n mÄ‚Â¡Ă‚Â»Ă¢â€žÂ¢t chĂ„â€šĂ‚Âºt
 *   - nÄ‚Â¡Ă‚Â»Ă‚Ân tÄ‚Â¡Ă‚Â»Ă¢â‚¬Ëœi dÄ‚Â¡Ă‚ÂºĂ‚Â§n theo tÄ‚Â¡Ă‚ÂºĂ‚Â§ng cho dÄ‚Â¡Ă‚Â»Ă¢â‚¬Â¦ nhìn ra phĂ„â€šĂ‚Â¢n cÄ‚Â¡Ă‚ÂºĂ‚Â¥p
 */
.ez-hd-drawer-sub {
	display: none;
	background: #f7faf8;
}

.ez-hd-drawer-item.is-open > .ez-hd-drawer-sub {
	display: block;
}

/* TÄ‚Â¡Ă‚ÂºĂ‚Â§ng 2: thÄ‚Â¡Ă‚Â»Ă‚Â¥t lÄ‚Â¡Ă‚Â»Ă‚Â, chÄ‚Â¡Ă‚Â»Ă‚Â¯ nhÄ‚Â¡Ă‚Â»Ă‚Â hÄ‚â€ Ă‚Â¡n tÄ‚Â¡Ă‚ÂºĂ‚Â§ng 1 */
.ez-hd-drawer-depth-1 > .ez-hd-drawer-row > .ez-hd-drawer-link {
	padding-left: 32px;
	color: #444;
	font-size: 13.5px;
	font-weight: 500;
}

.ez-hd-drawer-depth-1 > .ez-hd-drawer-row > .ez-hd-drawer-more {
	width: 40px;
}

/* TÄ‚Â¡Ă‚ÂºĂ‚Â§ng 3 trÄ‚Â¡Ă‚Â»Ă…Â¸ Ä‚â€žĂ¢â‚¬Ëœi: thÄ‚Â¡Ă‚Â»Ă‚Â¥t sĂ„â€šĂ‚Â¢u hÄ‚â€ Ă‚Â¡n nÄ‚Â¡Ă‚Â»Ă‚Â¯a */
.ez-hd-drawer-depth-2 > .ez-hd-drawer-row > .ez-hd-drawer-link {
	padding-left: 48px;
	font-size: 13px;
}

.ez-hd-drawer-depth-2 > .ez-hd-drawer-sub .ez-hd-drawer-link {
	padding-left: 62px;
	font-size: 12.5px;
}

/* NÄ‚Â¡Ă‚Â»Ă‚Ân tÄ‚Â¡Ă‚Â»Ă¢â‚¬Ëœi dÄ‚Â¡Ă‚ÂºĂ‚Â§n theo tÄ‚Â¡Ă‚ÂºĂ‚Â§ng Ä‚â€žĂ¢â‚¬ËœÄ‚Â¡Ă‚Â»Ă†â€™ mÄ‚Â¡Ă‚ÂºĂ‚Â¯t tĂ„â€šĂ‚Â¡ch Ä‚â€žĂ¢â‚¬ËœÄ‚â€ Ă‚Â°Ä‚Â¡Ă‚Â»Ă‚Â£c tÄ‚Â¡Ă‚ÂºĂ‚Â§ng nĂ o lĂ  tÄ‚Â¡Ă‚ÂºĂ‚Â§ng nĂ o */
.ez-hd-drawer-list > .ez-hd-drawer-item > .ez-hd-drawer-sub {
	background: #f4f8f6;
}

.ez-hd-drawer-sub .ez-hd-drawer-sub {
	background: #eef4f1;
}

/* Link Ä‚Â¡Ă‚Â»Ă…Â¸ tÄ‚Â¡Ă‚ÂºĂ‚Â§ng 2 trÄ‚Â¡Ă‚Â»Ă…Â¸ xuÄ‚Â¡Ă‚Â»Ă¢â‚¬Ëœng: bÄ‚Â¡Ă‚Â»Ă‚Â khung bao ngoĂ i cÄ‚Â¡Ă‚Â»Ă‚Â§a tÄ‚Â¡Ă‚ÂºĂ‚Â§ng 1 */
.ez-hd-drawer-sub .ez-hd-drawer-row {
	padding: 0;
}

.ez-hd-drawer-sub a:hover,
.ez-hd-drawer-sub a:focus {
	color: var(--ez-green);
	background: var(--ez-green-pale);
}

@media (max-width: 782px) {
	.ez-hd-burger {
		display: inline-flex;
	}

	/*
	 * On phones the horizontal category strip built for desktop is hidden: the
	 * same menu lives in the hamburger drawer instead (see .ez-hd-drawer above).
	 * Desktop (>782px) keeps the strip exactly as before.
	 *
	 * The items themselves are NOT lost - inc/header.php prints the same
	 * wp_nav_menu tree into the drawer, so a menu edited in Appearance > Menus
	 * still shows up on phones.
	 */
	.ez-hd-nav {
		display: none;
	}

	/* The sticky-strip spacer would leave an empty gap once the strip is hidden. */
	.ez-hd-nav-spacer {
		display: none;
	}
}

/* Mobile menu drawer (hamburger) */
@media (prefers-reduced-motion: reduce) {
	.ez-hd-drawer-panel,
	.ez-hd-burger-box span,
	.ez-hd-caret {
		transition: none;
	}
}

/* Custom footer */

/*
 * FOOTER 3 CÄ‚Â¡Ă‚Â»Ă‹Å“T Ä‚Â¢Ă¢â€šÂ¬Ă¢â‚¬Â nÄ‚Â¡Ă‚Â»Ă‚Ân xanh rĂ„â€šĂ‚Âªu Ä‚â€žĂ¢â‚¬ËœÄ‚Â¡Ă‚ÂºĂ‚Â­m, thanh bÄ‚Â¡Ă‚ÂºĂ‚Â£n quyÄ‚Â¡Ă‚Â»Ă‚Ân nÄ‚Â¡Ă‚Â»Ă‚Ân Ä‚â€žĂ¢â‚¬ËœÄ‚Â¡Ă‚ÂºĂ‚Â­m hÄ‚â€ Ă‚Â¡n.
 *
 * CÄ‚Â¡Ă‚ÂºĂ‚Â¥u trĂ„â€šĂ‚Âºc (xem inc/footer.php):
 *   .ez-ft
 *     .ez-ft-inner > .ez-ft-cols > .ez-ft-cot1 / .ez-ft-cot2 / .ez-ft-cot3
 *     .ez-ft-social   4 nĂ„â€šĂ‚Âºt trĂ„â€šĂ‚Â²n
 *     .ez-ft-copy     thanh bÄ‚Â¡Ă‚ÂºĂ‚Â£n quyÄ‚Â¡Ă‚Â»Ă‚Ân (nÄ‚Â¡Ă‚Â»Ă‚Ân --ez-green-dark)
 *
 * DĂ„â€šĂ‚Â¹ng design token --ez-green / --ez-green-dark nĂ„â€šĂ‚Âªn Ä‚â€žĂ¢â‚¬ËœÄ‚Â¡Ă‚Â»Ă¢â‚¬Â¢i tĂ´ng mĂ u Ä‚Â¡Ă‚Â»Ă…Â¸ Ä‚â€žĂ¢â‚¬ËœÄ‚Â¡Ă‚ÂºĂ‚Â§u file lĂ  footer
 * Ä‚â€žĂ¢â‚¬ËœÄ‚Â¡Ă‚Â»Ă¢â‚¬Â¢i theo, khĂ´ng phÄ‚Â¡Ă‚ÂºĂ‚Â£i sÄ‚Â¡Ă‚Â»Ă‚Â­a gì Ä‚Â¡Ă‚Â»Ă…Â¸ Ä‚â€žĂ¢â‚¬ËœĂ„â€šĂ‚Â¢y.
 *
 * LÄ‚â€ Ă‚Â¯U Ă„â€šĂ‚Â vÄ‚Â¡Ă‚Â»Ă‚Â tÄ‚â€ Ă‚Â°Ä‚â€ Ă‚Â¡ng phÄ‚Â¡Ă‚ÂºĂ‚Â£n: nÄ‚Â¡Ă‚Â»Ă‚Ân xanh rĂ„â€šĂ‚Âªu Ä‚â€žĂ¢â‚¬ËœÄ‚Â¡Ă‚ÂºĂ‚Â­m nĂ„â€šĂ‚Âªn chÄ‚Â¡Ă‚Â»Ă‚Â¯ phÄ‚Â¡Ă‚ÂºĂ‚Â£i SÁNG. ChÄ‚Â¡Ă‚Â»Ă‚Â¯ trÄ‚Â¡Ă‚ÂºĂ‚Â¯ng trĂ„â€šĂ‚Âªn --ez-green
 * Ä‚â€žĂ¢â‚¬ËœÄ‚Â¡Ă‚ÂºĂ‚Â¡t 5.96:1 (chuÄ‚Â¡Ă‚ÂºĂ‚Â©n AA); chÄ‚Â¡Ă‚Â»Ă‚Â¯ mÄ‚Â¡Ă‚Â»Ă‚Â (rgba trÄ‚Â¡Ă‚ÂºĂ‚Â¯ng ~0.8) vÄ‚Â¡Ă‚ÂºĂ‚Â«n trĂ„â€šĂ‚Âªn 4.5:1. Ä‚â€žĂ‚ÂÄ‚Â¡Ă‚Â»Ă‚Â«ng Ä‚â€žĂ¢â‚¬ËœÄ‚Â¡Ă‚Â»Ă¢â‚¬Â¢i nÄ‚Â¡Ă‚Â»Ă‚Ân sang
 * tĂ´ng nhÄ‚Â¡Ă‚ÂºĂ‚Â¡t hÄ‚â€ Ă‚Â¡n mĂ  quĂ„â€šĂ‚Âªn Ä‚â€žĂ¢â‚¬ËœÄ‚Â¡Ă‚Â»Ă¢â‚¬Â¢i mĂ u chÄ‚Â¡Ă‚Â»Ă‚Â¯.
 */

.ez-ft {
	margin-top: 46px;
	background: var(--ez-green);
	color: #fff;
	font-family: var(--ez-font);
}

.ez-ft-inner {
	max-width: 1200px;
	width: 95%;
	margin: 0 auto;
	padding: 46px 0 34px;
}

/* --- 3 cÄ‚Â¡Ă‚Â»Ă¢â€žÂ¢t --- */
.ez-ft-cols {
	display: grid;
	grid-template-columns: 1.5fr 1fr 1.2fr;
	gap: 38px;
}

.ez-ft-cot {
	min-width: 0;
}

/* --- Logo --- */
.ez-ft-logo {
	margin: 0 0 16px;
}

.ez-ft-logo img {
	/*
	 * Logo footer lĂ  logo Ä‚â€žĂ¢â‚¬ËœÄ‚Â¡Ă‚ÂºĂ‚Â§y Ä‚â€žĂ¢â‚¬ËœÄ‚Â¡Ă‚Â»Ă‚Â§ (biÄ‚Â¡Ă‚Â»Ă†â€™u tÄ‚â€ Ă‚Â°Ä‚Â¡Ă‚Â»Ă‚Â£ng + chÄ‚Â¡Ă‚Â»Ă‚Â¯ Ä‚â€žĂ¢â‚¬ËœÄ‚Â¡Ă‚Â»Ă‚Â) trĂ„â€šĂ‚Âªn nÄ‚Â¡Ă‚Â»Ă‚Ân xanh Ä‚â€žĂ¢â‚¬ËœÄ‚Â¡Ă‚ÂºĂ‚Â­m cÄ‚Â¡Ă‚Â»Ă‚Â§a footer.
	 * GiÄ‚Â¡Ă‚Â»Ă¢â‚¬Âºi hÄ‚Â¡Ă‚ÂºĂ‚Â¡n theo CHIÄ‚Â¡Ă‚Â»Ă¢â€šÂ¬U CAO Ä‚â€žĂ¢â‚¬ËœÄ‚Â¡Ă‚Â»Ă†â€™ 2 dĂ„â€šĂ‚Â²ng chÄ‚Â¡Ă‚Â»Ă‚Â¯ bĂ„â€šĂ‚Âªn cÄ‚Â¡Ă‚ÂºĂ‚Â¡nh khĂ´ng bÄ‚Â¡Ă‚Â»Ă¢â‚¬Â¹ Ä‚â€žĂ¢â‚¬ËœÄ‚Â¡Ă‚ÂºĂ‚Â©y lÄ‚Â¡Ă‚Â»Ă¢â‚¬Â¡ch.
	 */
	max-height: 72px;
	max-width: 190px;
	width: auto;
	height: auto;
	display: block;
}

/* --- TiĂ„â€šĂ‚Âªu Ä‚â€žĂ¢â‚¬ËœÄ‚Â¡Ă‚Â»Ă‚Â cÄ‚Â¡Ă‚Â»Ă¢â€žÂ¢t --- */
.ez-ft-heading {
	margin: 0 0 16px;
	padding: 0;
	color: #fff;
	font-family: var(--ez-font);
	font-size: 16px;
	font-weight: 800;
	line-height: 1.4;
	text-transform: uppercase;
}

/* GÄ‚Â¡Ă‚ÂºĂ‚Â¡ch chĂ„â€šĂ‚Â¢n ngÄ‚Â¡Ă‚ÂºĂ‚Â¯n dÄ‚â€ Ă‚Â°Ä‚Â¡Ă‚Â»Ă¢â‚¬Âºi tiĂ„â€šĂ‚Âªu Ä‚â€žĂ¢â‚¬ËœÄ‚Â¡Ă‚Â»Ă‚Â (giÄ‚Â¡Ă‚Â»Ă¢â‚¬Ëœng web mÄ‚Â¡Ă‚ÂºĂ‚Â«u) */
.ez-ft-heading::after {
	content: "";
	display: block;
	width: 46px;
	height: 3px;
	margin-top: 10px;
	background: var(--ez-yellow);
}

/* --- CÄ‚Â¡Ă‚Â»Ă¢â€žÂ¢t 1: Ä‚â€žĂ¢â‚¬ËœoÄ‚Â¡Ă‚ÂºĂ‚Â¡n vĂ„Æ’n tÄ‚Â¡Ă‚Â»Ă‚Â± do --- */
.ez-ft-text {
	color: rgba(255, 255, 255, 0.84);
	font-size: 14.5px;
	line-height: 1.8;
}

.ez-ft-text p {
	margin: 0 0 12px;
}

.ez-ft-text p:last-child {
	margin-bottom: 0;
}

.ez-ft-text strong {
	color: #fff;
}

.ez-ft-text a {
	color: var(--ez-yellow);
	text-decoration: none;
}

.ez-ft-text a:hover,
.ez-ft-text a:focus {
	color: #fff;
	text-decoration: underline;
}

/* --- CÄ‚Â¡Ă‚Â»Ă¢â€žÂ¢t 2: danh sĂ„â€šĂ‚Â¡ch link --- */
.ez-ft-links {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ez-ft-links li {
	margin: 0 0 9px;
}

.ez-ft-links a,
.ez-ft-links span {
	color: rgba(255, 255, 255, 0.84);
	font-size: 14.5px;
	line-height: 1.6;
	text-decoration: none;
}

.ez-ft-links a:hover,
.ez-ft-links a:focus {
	color: var(--ez-yellow);
	text-decoration: underline;
}

/*
 * MĂ¡Â»Å’I LINK TRONG 3 CĂ¡Â»ËœT FOOTER Ă¢â‚¬â€ nĂ¡Â»Ân tĂ¡ÂºÂ£ng mĂ u (06-10-2026).
 *
 * VÄ‚Å’ SAO CĂ¡ÂºÂ¦N RULE RIÊNG NĂ€Y (bĂ¡Â»â€¹ "mĂ u xanh da trĂ¡Â»Âi" Ă„â€˜Ä‚Âºng vì thiĂ¡ÂºÂ¿u nĂ³):
 * Link email vĂ  website trong cĂ¡Â»â„¢t 3 nĂ¡ÂºÂ±m trong `.ez-ft-lh-dong` Ă¢â‚¬â€ KHĂ”NG nĂ¡ÂºÂ±m trong `.ez-ft-lh`,
 * nĂªn rule `.ez-ft-lh a` Ă¡Â»Å¸ dĂ†Â°Ă¡Â»â€ºi khĂ´ng khĂ¡Â»â€ºp. KhĂ´ng rule nĂ o cĂ¡Â»Â§a theme khĂ¡Â»â€ºp cĂ¡ÂºÂ£, thĂ nh ra
 * `a { color: rgb(65,105,225) }` trong `main.min.css` cĂ¡Â»Â§a Astra thĂ¡ÂºÂ¯ng -> chĂ¡Â»Â¯ xanh hoĂ ng gia
 * trĂªn nĂ¡Â»Ân xanh rĂªu, gĂ¡ÂºÂ§n nhÆ° khĂ´ng Ă„â€˜Ă¡Â»Âc Ă„â€˜Ă†Â°Ă¡Â»Â£c.
 *
 * DĂ¹ng `.ez-ft-cols a` (1 lĂ¡Â»â€ºp + 1 thĂ¡ÂºÂ» = 0,1,1) Ă¢â‚¬â€ Ă„â€˜Ă¡Â»Â§ mĂ¡ÂºÂ¡nh Ă„â€˜Ă¡Â»Æ’ thĂ¡ÂºÂ¯ng `a` cĂ¡Â»Â§a Astra (0,0,1).
 *
 * Ă¢ÂšÂ Ă¯Â¸Â KHĂ”NG dĂ¹ng `.ez-ft a` cho rĂ¡Â»â„¢ng: selector Ă„â€˜Ä‚Â³ cÅ©ng khĂ¡Â»â€ºp 4 nĂºt mĂ¡ÂºÂ¡ng xĂ£ hĂ¡Â»â„¢i `.ez-ft-social`
 * vĂ  sĂ¡ÂºÂ½ Ă„â€˜Ä‚Â¨ mĂ u chĂ¡Â»Â¯ cĂ¡Â»Â§a chĂºng. GiĂ¡Â»â€ºi hĂ¡ÂºÂ¡n trong `.ez-ft-cols` Ă„â€˜Ă¡Â»Æ’ trĂ¡nh.
 *
 * Ă¢ÂšÂ Ă¯Â¸Â Rule nĂ y KHĂ”NG Ă„â€˜Ä‚Â¨ `.ez-ft-lh a` (0,2,0) Ă¡Â»Å¸ dĂ†Â°Ă¡Â»â€ºi Ă¢â‚¬â€ luĂ¡ÂºÂ­t Æ°u tiĂªn cao hĂ†Â¡n vĂ¡ÂºÂ«n thĂ¡ÂºÂ¯ng, nĂªn
 * sĂ¡Â»â€˜ Ă„â€˜iĂ¡Â»â€¡n thoĂ¡ÂºÂ¡i vĂ¡ÂºÂ«n giĂ¡Â»Â¯ mĂ u trĂ¡ÂºÂ¯ng Ă„â€˜Ă¡ÂºÂ­m riĂªng cĂ¡Â»Â§a nĂ³.
 */
.ez-ft-cols a {
	color: rgba(255, 255, 255, 0.84);
	text-decoration: none;
}

.ez-ft-cols a:hover,
.ez-ft-cols a:focus {
	color: var(--ez-yellow);
	text-decoration: underline;
}

/* --- CÄ‚Â¡Ă‚Â»Ă¢â€žÂ¢t 3: liĂ„â€šĂ‚Âªn hÄ‚Â¡Ă‚Â»Ă¢â‚¬Â¡ cĂ„â€šĂ‚Â³ biÄ‚Â¡Ă‚Â»Ă†â€™u tÄ‚â€ Ă‚Â°Ä‚Â¡Ă‚Â»Ă‚Â£ng --- */
.ez-ft-lh {
	margin: 0 0 12px;
	padding: 0;
	list-style: none;
}

.ez-ft-lh li {
	margin: 0 0 8px;
}

.ez-ft-lh-dong,
.ez-ft-lh li {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 8px;
	color: rgba(255, 255, 255, 0.84);
	font-size: 14.5px;
	line-height: 1.7;
}

.ez-ft-lh-dong {
	margin: 0 0 8px;
}

.ez-ft-lh-ico {
	flex: 0 0 auto;
	color: var(--ez-yellow);
	font-size: 15px;
	line-height: 1.4;
}

.ez-ft-lh a {
	color: #fff;
	font-weight: 600;
	text-decoration: none;
}

.ez-ft-lh a:hover,
.ez-ft-lh a:focus {
	color: var(--ez-yellow);
	text-decoration: underline;
}

.ez-ft-lh-chu {
	color: rgba(255, 255, 255, 0.66);
	font-size: 13.5px;
}

/* --- NĂ„â€šĂ‚Âºt mÄ‚Â¡Ă‚ÂºĂ‚Â¡ng xĂ„â€šĂ‚Â£ hÄ‚Â¡Ă‚Â»Ă¢â€žÂ¢i --- */
.ez-ft-social {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 30px;
	padding-top: 24px;
	border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.ez-ft-soc {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.14);
	color: #fff;
	font-family: var(--ez-font);
	font-size: 15px;
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	transition: background 0.2s ease, color 0.2s ease;
}

.ez-ft-soc:hover,
.ez-ft-soc:focus {
	background: var(--ez-yellow);
	color: #333;
	text-decoration: none;
}

/* --- Thanh bÄ‚Â¡Ă‚ÂºĂ‚Â£n quyÄ‚Â¡Ă‚Â»Ă‚Ân: nÄ‚Â¡Ă‚Â»Ă‚Ân Ä‚â€žĂ¢â‚¬ËœÄ‚Â¡Ă‚ÂºĂ‚Â­m hÄ‚â€ Ă‚Â¡n --- */
.ez-ft-copy {
	background: var(--ez-green-dark);
	color: rgba(255, 255, 255, 0.78);
	font-size: 13.5px;
	line-height: 1.6;
}

.ez-ft-copy-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	max-width: 1200px;
	width: 95%;
	margin: 0 auto;
	padding: 14px 0;
}

.ez-ft-copy-trai {
	color: #fff;
	font-weight: 600;
}

/* --- ĐiÄ‚Â¡Ă‚Â»Ă¢â‚¬Â¡n thoÄ‚Â¡Ă‚ÂºĂ‚Â¡i / mĂ„â€šĂ‚Â¡y tĂ­nh bÄ‚Â¡Ă‚ÂºĂ‚Â£ng --- */
@media (max-width: 1024px) {
	.ez-ft-cols {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 30px;
	}
}

@media (max-width: 782px) {
	.ez-ft-inner {
		padding: 32px 0 26px;
	}

	.ez-ft-cols {
		grid-template-columns: minmax(0, 1fr);
		gap: 26px;
	}

	.ez-ft-copy-inner {
		flex-direction: column;
		align-items: flex-start;
		gap: 4px;
	}
}
.ez-card-meta {
	display: none;
}

/* CSS note */

/* WooCommerce screens */
@media (min-width: 922px) {
	body.single-product.woocommerce #content .ast-woocommerce-container div.product div.images {
		float: left;
		width: 40%;
	}

	body.single-product.woocommerce #content .ast-woocommerce-container div.product div.summary {
		float: right;
		width: 56%;
	}
}

/*
 * Product gallery thumbnails - the SMALL images below the main image.
 *
 * WHERE THEY LIVE (confirmed in DevTools):
 *   <ol class="flex-control-nav flex-control-thumbs"> <li> <img> ...
 *   They are NOT `.woocommerce-product-gallery__image` - those are the big slides
 *   inside `.flex-viewport` / `.woocommerce-product-gallery__wrapper`.
 *
 * WHAT WAS MAKING THEM BIG (Astra, woocommerce-grid.min.css):
 *   .woocommerce-js div.product div.images .flex-control-thumbs li { width: 25%; }
 *   .woocommerce-js div.product div.woocommerce-product-gallery--columns-4
 *     .flex-control-thumbs li { width: 24%; width: calc(25% - .75em);
 *                               margin-right: 1em; }
 *   The columns-4 rule wins (more classes + later), which is ~115px per thumb on
 *   a ~508px image column - that is why the old rule below never changed anything.
 *
 * The selector below copies the columns-4 rule and adds `.ast-article-single`
 * (0,7,1 > 0,6,1) plus `!important`, so it always wins.
 *
 * SIZE: percentage of the image column (508px):
 *   25% / calc(25% - .75em) = Astra/WooCommerce default (~115px)
 *    3% = current (~15px)
 * To resize later, change ONLY the number in this rule.
 */
body.single-product.woocommerce .ast-article-single div.product
div.woocommerce-product-gallery--columns-4 .flex-control-thumbs li,
body.single-product.woocommerce .ast-article-single div.product
div.images .flex-control-thumbs li {
	width: 3% !important;
	margin-right: 0.4em;
	margin-bottom: 0.4em;
}

/*
 * GiĂ„â€šĂ‚Â¡ Ä‚Â¡Ă‚Â»Ă…Â¸ trang chi tiÄ‚Â¡Ă‚ÂºĂ‚Â¿t sÄ‚Â¡Ă‚ÂºĂ‚Â£n phÄ‚Â¡Ă‚ÂºĂ‚Â©m.
 *
 * HAI chÄ‚Â¡Ă‚Â»Ă¢â‚¬â€ cÄ‚Â¡Ă‚ÂºĂ‚Â§n lÆ°u Ă„â€šĂ‚Â½, thiÄ‚Â¡Ă‚ÂºĂ‚Â¿u lĂ  khĂ´ng Ă„Æ’n:
 *   1. KhĂ´ng dĂ„â€šĂ‚Â¹ng `var(--ez-red)` - biÄ‚Â¡Ă‚ÂºĂ‚Â¿n Ä‚â€žĂ¢â‚¬ËœĂ„â€šĂ‚Â³ hiÄ‚Â¡Ă‚Â»Ă¢â‚¬Â¡n lĂ  mĂ u xanh rĂ„â€šĂ‚Âªu thÄ‚â€ Ă‚Â°Ä‚â€ Ă‚Â¡ng hiÄ‚Â¡Ă‚Â»Ă¢â‚¬Â¡u
 *      nĂ„â€šĂ‚Âªn giĂ„â€šĂ‚Â¡ bÄ‚Â¡Ă‚Â»Ă¢â‚¬Â¹ ra mĂ u xanh. Ghi thÄ‚Â¡Ă‚ÂºĂ‚Â³ng mĂ„â€šĂ‚Â£ Ä‚â€žĂ¢â‚¬ËœÄ‚Â¡Ă‚Â»Ă‚Â Ä‚Â¡Ă‚Â»Ă…Â¸ Ä‚â€žĂ¢â‚¬ËœĂ„â€šĂ‚Â¢y.
 *   2. Astra cĂ„â€šĂ‚Â³ rule mÄ‚Â¡Ă‚ÂºĂ‚Â¡nh hÄ‚â€ Ă‚Â¡n:
 *        .woocommerce-js div.product p.price { color:#77a464; font-size:1.5rem; }
 *      (3 class + 2 element). Selector cũ `.single-product .summary .price`
 *      (3 class + 1 element) THUA nĂ„â€šĂ‚Âªn giĂ„â€šĂ‚Â¡ vÄ‚Â¡Ă‚ÂºĂ‚Â«n theo mĂ u/cÄ‚Â¡Ă‚Â»Ă‚Â¡ cÄ‚Â¡Ă‚Â»Ă‚Â§a Astra.
 *      Selector dÄ‚â€ Ă‚Â°Ä‚Â¡Ă‚Â»Ă¢â‚¬Âºi Ä‚â€žĂ¢â‚¬ËœĂ„â€šĂ‚Â¢y cĂ„â€šĂ‚Â³ 5 class + 2 element nĂ„â€šĂ‚Âªn thÄ‚Â¡Ă‚ÂºĂ‚Â¯ng chÄ‚Â¡Ă‚ÂºĂ‚Â¯c.
 */
body.single-product.woocommerce div.product .summary p.price,
body.single-product.woocommerce div.product .summary span.price {
	color: #c72128;
	font-size: 20px;
	font-weight: 800;
	line-height: 1.1;
}

.single-product .summary .price del {
	color: #999;
	font-size: 20px;
	font-weight: 400;
}

.single-product .summary .price ins {
	text-decoration: none;
}

.single-product .summary .product_title {
	font-size: 26px;
	line-height: 1.3;
	/* Viết hoa chữ đầu — xem ghi chú ở `#main ul.products ... .woocommerce-loop-product__title`. */
	text-transform: capitalize;
}

/*
 * BÄ‚Â¡Ă‚ÂºĂ‚Â£ng thĂ´ng sÄ‚Â¡Ă‚Â»Ă¢â‚¬Ëœ sÄ‚Â¡Ă‚ÂºĂ‚Â£n phÄ‚Â¡Ă‚ÂºĂ‚Â©m (.ez-spec-table, .ez-spec-brand) Ä‚Â¢Ă¢â€šÂ¬Ă¢â‚¬Â Ă„ÂÄ‚Æ’ GÄ‚Â¡Ă‚Â»Ă‚Â  CĂ„â€šĂ¢â€žÂ¢NG BÄ‚Â¡Ă‚ÂºĂ‚Â¢NG.
 *
 * TrÄ‚â€ Ă‚Â°Ä‚Â¡Ă‚Â»Ă¢â‚¬Âºc Ä‚â€žĂ¢â‚¬ËœĂ„â€šĂ‚Â¢y khÄ‚Â¡Ă‚Â»Ă¢â‚¬Ëœi nĂ y tÄ‚Â¡Ă‚ÂºĂ‚Â¡o kiÄ‚Â¡Ă‚Â»Ă†â€™u cho bÄ‚Â¡Ă‚ÂºĂ‚Â£ng "Quy cĂ„â€šĂ‚Â¡ch / XuÄ‚Â¡Ă‚ÂºĂ‚Â¥t xÄ‚Â¡Ă‚Â»Ă‚Â© / NhĂ  sÄ‚Â¡Ă‚ÂºĂ‚Â£n xuÄ‚Â¡Ă‚ÂºĂ‚Â¥t / NÄ‚â€ Ă‚Â°Ä‚Â¡Ă‚Â»Ă¢â‚¬Âºc sÄ‚Â¡Ă‚ÂºĂ‚Â£n
 * xuÄ‚Â¡Ă‚ÂºĂ‚Â¥t" in ngay dÄ‚â€ Ă‚Â°Ä‚Â¡Ă‚Â»Ă¢â‚¬Âºi giĂ„â€šĂ‚Â¡ Ä‚Â¡Ă‚Â»Ă…Â¸ trang chi tiÄ‚Â¡Ă‚ÂºĂ‚Â¿t. BÄ‚Â¡Ă‚ÂºĂ‚Â£ng Ä‚â€žĂ¢â‚¬ËœĂ„â€šĂ‚Â³ Ä‚â€žĂ¢â‚¬ËœĂ„â€šĂ‚Â£ bÄ‚Â¡Ă‚Â»Ă‚Â (xem inc/single-product.php)
 * nĂ„â€šĂ‚Âªn toĂ n bÄ‚Â¡Ă‚Â»Ă¢â€žÂ¢ CSS cÄ‚Â¡Ă‚Â»Ă‚Â§a nĂ„â€šĂ‚Â³ Ä‚â€žĂ¢â‚¬ËœĂ„â€šĂ‚Â£ xĂ„â€šĂ‚Â³a cho nhÄ‚Â¡Ă‚ÂºĂ‚Â¹ file.
 */

.ez-promo-box {
	margin: 0 0 18px;
	border: 1px solid var(--ez-promo-line);
	border-radius: 4px;
	background: var(--ez-promo-bg);
	overflow: hidden;
}

.ez-promo-head {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 12px;
	border-bottom: 1px solid var(--ez-promo-line);
	background: var(--ez-promo-head);
	color: #8a6d1f;
	font-size: 14px;
	font-weight: 700;
}

.ez-promo-icon {
	font-size: 15px;
}

.ez-promo-body {
	padding: 10px 12px;
	color: #333;
	font-size: 14px;
	font-weight: 600;
}

.single-product .summary form.cart {
	display: flex;
	align-items: stretch;
	gap: 8px;
	margin-bottom: 18px;
}

.single-product .summary form.cart .quantity {
	margin: 0;
}

.single-product .summary form.cart .single_add_to_cart_button {
	flex: 1;
	margin: 0;
	border-radius: 3px;
	background: var(--ez-red);
	font-weight: 700;
	letter-spacing: 0.4px;
	text-transform: uppercase;
}

.single-product .summary form.cart .single_add_to_cart_button:hover {
	background: var(--ez-red-dark);
}

.ez-contact-cta {
	margin: 8px 0 18px;
}

.ez-contact-btn {
	display: inline-block;
	padding: 12px 30px;
	border-radius: 3px;
	background: var(--ez-red);
	color: #fff !important;
	font-weight: 700;
	letter-spacing: 0.4px;
	text-decoration: none;
	text-transform: uppercase;
}

.ez-contact-btn:hover {
	background: var(--ez-red-dark);
}

.ez-contact-note {
	margin: 8px 0 0;
	color: #666;
	font-size: 13px;
}

/* WooCommerce screens */
.single-product .woocommerce-tabs li.reviews_tab,
.single-product .woocommerce-tabs #tab-reviews,
.single-product .woocommerce-Reviews,
.single-product #reviews #review_form_wrapper {
	width: 100% !important;
}

/*
 * Ba Ă´ cam kÄ‚Â¡Ă‚ÂºĂ‚Â¿t dÄ‚â€ Ă‚Â°Ä‚Â¡Ă‚Â»Ă¢â‚¬Âºi nĂ„â€šĂ‚Âºt mua (.ez-trust-badges, .ez-trust-item, .ez-trust-icon,
 * .ez-trust-text) Ä‚Â¢Ă¢â€šÂ¬Ă¢â‚¬Â Ă„ÂÄ‚Æ’ XĂ„â€šĂ¢â‚¬Å“A cĂ„â€šĂ‚Â¹ng 3 Ă´ Ä‚â€žĂ¢â‚¬ËœĂ„â€šĂ‚Â³.
 *
 * Xem ghi chĂ„â€šĂ‚Âº trong inc/single-product.php.
 */

/* Luoi the san pham (.ez-bs-grid) - dung chung o nhieu khoi */

@media (max-width: 1100px) {
	.ez-bs-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

}

@media (max-width: 782px) {
	.ez-bs-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.single-product .summary .price {
		font-size: 28px;
	}
}

/* CSS note */

.ez-cat-layout {
	display: grid;
	grid-template-columns: 258px minmax(0, 1fr);
	gap: 26px;
	align-items: start;
}

.ez-cat-main {
	min-width: 0;
}

.ez-shop-sidebar {
	min-width: 0;
	font-family: var(--ez-font);
}

/* Archive sidebar filter */
.ez-sb-box {
	margin: 0 0 16px;
	background: #fff;
	border: 1px solid var(--ez-line);
	border-radius: var(--ez-radius);
	overflow: hidden;
}

.ez-sb-title {
	position: relative;
	margin: 0;
	padding: 11px 14px 11px 16px;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
	color: #383838;
	border-bottom: 1px solid var(--ez-line);
}

/* Archive sidebar filter */
.ez-sb-title::before {
	content: "";
	position: absolute;
	left: 0;
	top: 12px;
	bottom: 12px;
	width: 3px;
	border-radius: 0 3px 3px 0;
	background: var(--ez-red);
}

/* Archive sidebar filter */
.ez-sb-cats,
.ez-sb-sub {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ez-sb-cats {
	padding: 6px 0;
}

.ez-sb-cat-link {
	display: block;
	padding: 7px 14px;
	font-size: 14px;
	line-height: 1.35;
	color: #444;
	text-decoration: none;
}

.ez-sb-cat-link:hover {
	color: var(--ez-red);
}

.ez-sb-cat.is-current > .ez-sb-cat-link,
.ez-sb-cat.is-current > details > summary > .ez-sb-cat-link {
	color: var(--ez-red);
	font-weight: 600;
}

/* Archive sidebar filter */
.ez-sb-cat > details > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-right: 12px;
	list-style: none;
	cursor: pointer;
}

.ez-sb-cat > details > summary::-webkit-details-marker {
	display: none;
}

.ez-sb-cat > details > summary::after {
	content: "\25BE"; /* mui ten xuong o cot loc */
	flex: none;
	color: #9a9a9a;
	font-size: 18px;
	line-height: 1;
	transform: rotate(90deg);
	transition: transform 0.18s ease;
}

.ez-sb-cat > details[open] > summary::after {
	transform: rotate(-90deg);
}

.ez-sb-sub {
	padding-left: 12px;
}

.ez-sb-sub .ez-sb-cat-link {
	padding-top: 6px;
	padding-bottom: 6px;
	font-size: 13.5px;
	color: #5a5a5a;
}

/* Archive sidebar filter */
.ez-sb-list {
	padding: 8px 14px 10px;
}

.ez-sb-opt {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	padding: 5px 0;
	font-size: 14px;
	line-height: 1.35;
	color: #444;
	cursor: pointer;
}

.ez-sb-opt input {
	flex: none;
	width: 15px;
	height: 15px;
	margin: 2px 0 0;
	accent-color: var(--ez-red);
}

.ez-sb-opt:hover span {
	color: var(--ez-red);
}

.ez-sb-opt input:checked + span {
	color: var(--ez-red);
	font-weight: 600;
}

/* Archive sidebar filter */
.ez-sb-actions {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 2px 0 4px;
}

.ez-sb-apply {
	padding: 9px 18px;
	border: 0;
	border-radius: 25px;
	background: var(--ez-red);
	color: #fff;
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
}

.ez-sb-apply:hover {
	background: var(--ez-red-dark);
}

.ez-sb-clear {
	font-size: 13px;
	color: #7a7a7a;
	text-decoration: underline;
}

.ez-sb-clear:hover {
	color: var(--ez-red);
}

.ez-sb-empty {
	margin: 0;
	padding: 10px 14px;
	font-size: 13.5px;
	color: #8a8a8a;
}

/* Responsive tweaks */
.ez-shop-sidebar a {
	box-shadow: none;
}

/* Archive sidebar filter */
@media (max-width: 1099px) {
	.ez-cat-layout {
		grid-template-columns: minmax(0, 1fr);
		gap: 18px;
	}

	/*
	 * CÄ‚Â¡Ă‚Â»Ă¢â€žÂ¢t lÄ‚Â¡Ă‚Â»Ă‚Âc XUÄ‚Â¡Ă‚Â»Ă‚ÂNG DÄ‚â€ Ă‚Â¯Ä‚Â¡Ă‚Â»Ă‚ÂšI danh sĂ„â€šĂ‚Â¡ch sÄ‚Â¡Ă‚ÂºĂ‚Â£n phÄ‚Â¡Ă‚ÂºĂ‚Â©m trĂ„â€šĂ‚Âªn mĂ n nhÄ‚Â¡Ă‚Â»Ă‚Â (Ä‚â€žĂ¢â‚¬ËœiÄ‚Â¡Ă‚Â»Ă¢â‚¬Â¡n thoÄ‚Â¡Ă‚ÂºĂ‚Â¡i + iPad).
	 *
	 * Trong DOM cÄ‚Â¡Ă‚Â»Ă¢â€žÂ¢t lÄ‚Â¡Ă‚Â»Ă‚Âc in TRÄ‚â€ Ă‚Â¯Ä‚Â¡Ă‚Â»Ă‚ÂšC `.ez-cat-main` (xem `ez_sidebar_layout_open()` trong
	 * inc/archive-sidebar.php), nĂ„â€šĂ‚Âªn mÄ‚Â¡Ă‚ÂºĂ‚Â·c Ä‚â€žĂ¢â‚¬ËœÄ‚Â¡Ă‚Â»Ă¢â‚¬Â¹nh nĂ„â€šĂ‚Â³ luĂ´n nÄ‚Â¡Ă‚ÂºĂ‚Â±m trĂ„â€šĂ‚Âªn; `order: 2` mÄ‚Â¡Ă‚Â»Ă¢â‚¬Âºi Ä‚â€žĂ¢â‚¬ËœÄ‚Â¡Ă‚ÂºĂ‚Â©y nĂ„â€šĂ‚Â³
	 * xuÄ‚Â¡Ă‚Â»Ă¢â‚¬Ëœng dÄ‚â€ Ă‚Â°Ä‚Â¡Ă‚Â»Ă¢â‚¬Âºi (order mÄ‚Â¡Ă‚ÂºĂ‚Â·c Ä‚â€žĂ¢â‚¬ËœÄ‚Â¡Ă‚Â»Ă¢â‚¬Â¹nh cÄ‚Â¡Ă‚Â»Ă‚Â§a `.ez-cat-main` lĂ  0).
	 *
	 * NĂ„â€šĂ‚Â³ nÄ‚Â¡Ă‚ÂºĂ‚Â±m dÄ‚â€ Ă‚Â°Ä‚Â¡Ă‚Â»Ă¢â‚¬Âºi CÄ‚Â¡Ă‚ÂºĂ‚Â¢ dĂ„â€šĂ‚Â£y phĂ„â€šĂ‚Â¢n trang - vì phĂ„â€šĂ‚Â¢n trang nÄ‚Â¡Ă‚ÂºĂ‚Â±m trong `.ez-cat-main`. MuÄ‚Â¡Ă‚Â»Ă¢â‚¬Ëœn nĂ„â€šĂ‚Â³
	 * nÄ‚Â¡Ă‚ÂºĂ‚Â±m giÄ‚Â¡Ă‚Â»Ă‚Â¯a danh sĂ„â€šĂ‚Â¡ch vĂ  phĂ„â€šĂ‚Â¢n trang thì phÄ‚Â¡Ă‚ÂºĂ‚Â£i Ä‚â€žĂ¢â‚¬ËœÄ‚Â¡Ă‚Â»Ă¢â‚¬Â¢i cÄ‚Â¡Ă‚ÂºĂ‚Â¥u trĂ„â€šĂ‚Âºc PHP, khĂ´ng phÄ‚Â¡Ă‚ÂºĂ‚Â£i CSS.
	 *
	 * TrÄ‚â€ Ă‚Â°Ä‚Â¡Ă‚Â»Ă¢â‚¬Âºc Ä‚â€žĂ¢â‚¬ËœĂ„â€šĂ‚Â¢y lĂ  `order: -1` (cÄ‚Â¡Ă‚Â»Ă¢â€žÂ¢t lÄ‚Â¡Ă‚Â»Ă‚Âc lĂ„â€šĂ‚Âªn TRÊN): khĂ„â€šĂ‚Â¡ch phÄ‚Â¡Ă‚ÂºĂ‚Â£i cuÄ‚Â¡Ă‚Â»Ă¢â€žÂ¢n hÄ‚Â¡Ă‚ÂºĂ‚Â¿t cÄ‚Â¡Ă‚Â»Ă‚Â¥c lÄ‚Â¡Ă‚Â»Ă‚Âc mÄ‚Â¡Ă‚Â»Ă¢â‚¬Âºi thÄ‚Â¡Ă‚ÂºĂ‚Â¥y
	 * sÄ‚Â¡Ă‚ÂºĂ‚Â£n phÄ‚Â¡Ă‚ÂºĂ‚Â©m. Desktop (>1099px) vÄ‚Â¡Ă‚ÂºĂ‚Â«n 2 cÄ‚Â¡Ă‚Â»Ă¢â€žÂ¢t nhÆ° cÅ©, khĂ´ng Ä‚â€žĂ¢â‚¬ËœÄ‚Â¡Ă‚Â»Ă‚Â¥ng tÄ‚Â¡Ă‚Â»Ă¢â‚¬Âºi.
	 */
	.ez-shop-sidebar {
		order: 2;
	}

	.ez-sb-box {
		margin-bottom: 12px;
	}
}

/* WooCommerce screens */

/*
 * TiĂ„â€šĂ‚Âªu Ä‚â€žĂ¢â‚¬ËœÄ‚Â¡Ă‚Â»Ă‚Â "SÄ‚Â¡Ă‚ÂºĂ‚Â£n phÄ‚Â¡Ă‚ÂºĂ‚Â©m tÄ‚â€ Ă‚Â°Ä‚â€ Ă‚Â¡ng tÄ‚Â¡Ă‚Â»Ă‚Â±" Ä‚Â¡Ă‚Â»Ă…Â¸ trang chi tiÄ‚Â¡Ă‚ÂºĂ‚Â¿t sÄ‚Â¡Ă‚ÂºĂ‚Â£n phÄ‚Â¡Ă‚ÂºĂ‚Â©m.
 *
 * MÄ‚Â¡Ă‚ÂºĂ‚Â·c Ä‚â€žĂ¢â‚¬ËœÄ‚Â¡Ă‚Â»Ă¢â‚¬Â¹nh Astra cho `h2` lĂ  30px vĂ  mĂ u `--ast-global-color-3`, mĂ u Ä‚â€žĂ¢â‚¬ËœĂ„â€šĂ‚Â³ khĂ´ng phÄ‚Â¡Ă‚ÂºĂ‚Â£i
 * mĂ u thÄ‚â€ Ă‚Â°Ä‚â€ Ă‚Â¡ng hiÄ‚Â¡Ă‚Â»Ă¢â‚¬Â¡u nĂ„â€šĂ‚Âªn nhìn lÄ‚Â¡Ă‚Â»Ă¢â‚¬Â¡ch tĂ´ng. Ä‚Â¡Ă‚Â»Ă‚Âž Ä‚â€žĂ¢â‚¬ËœĂ„â€šĂ‚Â¢y: mĂ u xanh thÄ‚â€ Ă‚Â°Ä‚â€ Ă‚Â¡ng hiÄ‚Â¡Ă‚Â»Ă¢â‚¬Â¡u, chÄ‚Â¡Ă‚Â»Ă‚Â¯ nhÄ‚Â¡Ă‚Â»Ă‚Â lÄ‚Â¡Ă‚ÂºĂ‚Â¡i, vĂ 
 * chÄ‚Â¡Ă‚Â»Ă‚Â«a khoÄ‚Â¡Ă‚ÂºĂ‚Â£ng trÄ‚Â¡Ă‚Â»Ă¢â‚¬Ëœng phĂ­a trĂ„â€šĂ‚Âªn Ä‚â€žĂ¢â‚¬ËœÄ‚Â¡Ă‚Â»Ă†â€™ tĂ„â€šĂ‚Â¡ch khÄ‚Â¡Ă‚Â»Ă‚Âi phÄ‚Â¡Ă‚ÂºĂ‚Â§n bÄ‚Â¡Ă‚ÂºĂ‚Â£ng thĂ´ng sÄ‚Â¡Ă‚Â»Ă¢â‚¬Ëœ.
 */
body.single-product .related.products > h2 {
	margin: 0 0 16px;
	padding-top: 26px;
	color: var(--ez-green);
	font-family: var(--ez-font);
	font-size: 22px;
	font-weight: 700;
	line-height: 1.3;
}

/* Mobile: nhÄ‚Â¡Ă‚Â»Ă‚Â thĂ„â€šĂ‚Âªm cho vÄ‚Â¡Ă‚Â»Ă‚Â«a mĂ n hình */
@media (max-width: 782px) {
	body.single-product .related.products > h2 {
		padding-top: 20px;
		font-size: 19px;
	}
}

body.woocommerce .ez-cat-layout .ez-cat-main ul.products.ez-cat-products,
body.woocommerce .related.products ul.products.ez-cat-products {
	display: grid;
	gap: 14px;
	margin: 0 0 26px;
	padding: 0;
	list-style: none;
}

body.woocommerce .ez-cat-layout .ez-cat-main ul.products.ez-cat-products.ez-cols-1,
body.woocommerce .related.products ul.products.ez-cat-products.ez-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }

body.woocommerce .ez-cat-layout .ez-cat-main ul.products.ez-cat-products.ez-cols-2,
body.woocommerce .related.products ul.products.ez-cat-products.ez-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

body.woocommerce .ez-cat-layout .ez-cat-main ul.products.ez-cat-products.ez-cols-3,
body.woocommerce .related.products ul.products.ez-cat-products.ez-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

body.woocommerce .ez-cat-layout .ez-cat-main ul.products.ez-cat-products.ez-cols-4,
body.woocommerce .related.products ul.products.ez-cat-products.ez-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

body.woocommerce .ez-cat-layout .ez-cat-main ul.products.ez-cat-products.ez-cols-5,
body.woocommerce .related.products ul.products.ez-cat-products.ez-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }

body.woocommerce .ez-cat-layout .ez-cat-main ul.products.ez-cat-products.ez-cols-6,
body.woocommerce .related.products ul.products.ez-cat-products.ez-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }

/* Shop / archive list */
body.woocommerce .ez-cat-layout .ez-cat-main ul.products.ez-cat-products > li.ez-archive-item,
body.woocommerce .related.products ul.products.ez-cat-products > li.ez-archive-item {
	display: flex;
	float: none;
	width: auto;
	max-width: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	box-shadow: none;
	text-align: left;
}

body.woocommerce .ez-cat-layout .ez-cat-main ul.products.ez-cat-products > li.ez-archive-item > .ez-card,
body.woocommerce .related.products ul.products.ez-cat-products > li.ez-archive-item > .ez-card {
	flex: 1 1 auto;
	width: 100%;
	margin: 0;
}

/* WooCommerce screens */
.ez-cat-main .woocommerce-result-count {
	margin: 0 0 18px;
	padding-top: 7px;
	color: #6b6b6b;
	font-size: 14px;
}

.ez-cat-main .woocommerce-ordering {
	margin: 0 0 18px;
}

.ez-cat-main .woocommerce-ordering select {
	padding: 8px 34px 8px 12px;
	border: 1px solid var(--ez-line);
	border-radius: var(--ez-radius-sm);
	background-color: #fff;
	color: #444;
	font-size: 13.5px;
	line-height: 1.4;
	cursor: pointer;
}

.ez-cat-main .woocommerce-ordering select:focus {
	border-color: var(--ez-red);
	box-shadow: 0 0 0 2px rgba(2, 89, 8, 0.14);
	outline: none;
}

/* WooCommerce screens */
/*
 * PHÂN TRANG — CĂN GIỮA (sửa 06-10-2026).
 *
 * ⚠️ VÌ SAO PHẢI VIẾT LẠI SELECTOR: rule cũ khoá trong `.ez-cat-main`
 * (`.ez-cat-main .woocommerce-pagination ul.page-numbers`), nhưng trang danh mục sản phẩm
 * KHÔNG có class `.ez-cat-main` — đo thật: class đó xuất hiện 0 lần trong HTML. Nên rule
 * `justify-content: center` cũ chưa bao giờ chạy.
 *
 * Cây thật: nav.woocommerce-pagination > div.ast-woocommerce-container > main#main.site-main
 * Nên bỏ tiền tố `.ez-cat-main` là khớp.
 *
 * ⚠️ `display: flex` là dòng QUYẾT ĐỊNH. `<ul>` mặc định là `display: block`, mà
 * `justify-content` KHÔNG có tác dụng với khối block — đo thật: `ul display=block`, các ô dồn
 * hết về trái dù đã có `justify-content: center`. Phải đổi sang flex thì mới căn giữa được.
 */
.woocommerce-pagination ul.page-numbers {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px;
	margin: 0;
	padding: 0;
	border: 0;
	list-style: none;
}

.woocommerce-pagination ul.page-numbers li {
	border: 1px solid var(--ez-line);
	border-radius: var(--ez-radius-sm);
	overflow: hidden;
}

.woocommerce-pagination ul.page-numbers li a,
.woocommerce-pagination ul.page-numbers li span {
	min-width: 34px;
	padding: 8px 10px;
	border: 0;
	color: #444;
	text-align: center;
}

.woocommerce-pagination ul.page-numbers li span.current,
.woocommerce-pagination ul.page-numbers li a:hover {
	background: var(--ez-red);
	color: #fff;
}

/* WooCommerce screens */
@media (max-width: 1099px) {
	body.woocommerce .ez-cat-layout .ez-cat-main ul.products.ez-cat-products,
	body.woocommerce .related.products ul.products.ez-cat-products {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 782px) {
	body.woocommerce .ez-cat-layout .ez-cat-main ul.products.ez-cat-products,
	body.woocommerce .related.products ul.products.ez-cat-products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	
	.ez-cat-main .ez-card-meta,
	.related.products .ez-card-meta {
		display: none;
	}
}

/* Home category section */

@media (max-width: 1024px) {
	
	.ez-bs-grid.ez-cols-3,
	.ez-bs-grid.ez-cols-4,
	.ez-bs-grid.ez-cols-5,
	.ez-bs-grid.ez-cols-6,
	body.woocommerce .ez-cat-layout .ez-cat-main ul.products.ez-cat-products.ez-cols-3,
	body.woocommerce .ez-cat-layout .ez-cat-main ul.products.ez-cat-products.ez-cols-4,
	body.woocommerce .ez-cat-layout .ez-cat-main ul.products.ez-cat-products.ez-cols-5,
	body.woocommerce .ez-cat-layout .ez-cat-main ul.products.ez-cat-products.ez-cols-6,
	body.woocommerce .related.products ul.products.ez-cat-products.ez-cols-3,
	body.woocommerce .related.products ul.products.ez-cat-products.ez-cols-4,
	body.woocommerce .related.products ul.products.ez-cat-products.ez-cols-5,
	body.woocommerce .related.products ul.products.ez-cat-products.ez-cols-6 {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}


}

@media (max-width: 782px) {
	
	.ez-deal-card {
		flex: 0 0 100% !important;
	}

	
	.woocommerce-products-header__title,
	.ez-cat-main h1 {
		font-size: 22px !important;
		line-height: 1.3 !important;
		overflow-wrap: anywhere;
	}

	
	.ez-card-thumb {
		height: 128px !important;
	}

	.ez-card-title {
		font-size: 13px !important;
	}

	.ez-card-btn {
		font-size: 12px !important;
		line-height: 30px !important;
	}
}

/* Header category strip */

.ez-hd-nav .ez-hd-menu {
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ez-hd-nav .ez-hd-menu > li {
	position: relative;
	flex: 0 0 auto;
	margin: 0;
}

/* DÄ‚Â¡Ă‚ÂºĂ‚Â£i menu nÄ‚Â¡Ă‚Â»Ă‚Ân xanh -> chÄ‚Â¡Ă‚Â»Ă‚Â¯ trÄ‚Â¡Ă‚ÂºĂ‚Â¯ng (xem ghi chĂ„â€šĂ‚Âº cÄ‚Â¡Ă‚Â»Ă‚Â¡ chÄ‚Â¡Ă‚Â»Ă‚Â¯ Ä‚Â¡Ă‚Â»Ă…Â¸ `.ez-hd-navlink`). */
.ez-hd-nav .ez-hd-menu > li > a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 0 16px;
	color: #fff;
	font-family: var(--ez-font);
	font-size: 15px;
	font-weight: 600;
	line-height: 40px;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
}

/*
 * Hover / mÄ‚Â¡Ă‚Â»Ă‚Â¥c Ä‚â€žĂ¢â‚¬Ëœang mÄ‚Â¡Ă‚Â»Ă…Â¸: KHĂ„â€šĂ¢â‚¬ÂNG dĂ„â€šĂ‚Â¹ng `--ez-green` nÄ‚Â¡Ă‚Â»Ă‚Â¯a Ä‚Â¢Ă¢â€šÂ¬Ă¢â‚¬Â xanh trĂ„â€šĂ‚Âªn nÄ‚Â¡Ă‚Â»Ă‚Ân xanh lĂ  chìm.
 * DĂ„â€šĂ‚Â¹ng vĂ ng nhÄ‚Â¡Ă‚ÂºĂ‚Â¥n `--ez-yellow` + nÄ‚Â¡Ă‚Â»Ă‚Ân Ä‚â€žĂ¢â‚¬ËœÄ‚Â¡Ă‚ÂºĂ‚Â­m hÄ‚â€ Ă‚Â¡n Ä‚â€žĂ¢â‚¬ËœÄ‚Â¡Ă‚Â»Ă†â€™ thÄ‚Â¡Ă‚ÂºĂ‚Â¥y rõ Ä‚â€žĂ¢â‚¬Ëœang trÄ‚Â¡Ă‚Â»Ă‚Â vĂ o mÄ‚Â¡Ă‚Â»Ă‚Â¥c nĂ o.
 */
.ez-hd-nav .ez-hd-menu > li > a:hover,
.ez-hd-nav .ez-hd-menu > li > a:focus,
.ez-hd-nav .ez-hd-menu > li.current-menu-item > a,
.ez-hd-nav .ez-hd-menu > li.current-menu-ancestor > a {
	color: var(--ez-yellow);
	background: var(--ez-green-dark);
}

/* Header category strip */
.ez-hd-nav .ez-hd-menu > li.menu-item-has-children > a::after {
	content: "";
	width: 6px;
	height: 6px;
	margin-top: -3px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	border-radius: 1px;
	transform: rotate(45deg);
}

/* Header category strip */
.ez-hd-nav .ez-hd-menu .sub-menu {
	position: absolute;
	left: 0;
	/*
	 * top: 40px (KHONG phai 100%) — 40px la CHIEU CAO THAT cua muc menu.
	 *
	 * Dung 100% thi menu con bi ho 6px so voi muc cha (do duoc: muc cha ket thuc o y=185,
	 * menu con bat dau o y=191). Nguyen nhan: muc cha co line-height: 40px cong them phan
	 * cua dong nen 100% tinh ra 46px chu khong phai 40px.
	 * Ghi thang 40px cho khop. Doi chieu cao muc menu thi phai doi ca so nay.
	 */
	top: 40px;
	z-index: 60;
	min-width: 232px;
	margin: 0;
	padding: 6px 0;
	list-style: none;
	background: #fff;
	border: 1px solid var(--ez-line);
	border-radius: 8px;
	box-shadow: 0 12px 30px rgba(16, 24, 40, 0.14);
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s ease;
}

/* Header category strip */
.ez-hd-nav .ez-hd-menu li:hover > .sub-menu,
.ez-hd-nav .ez-hd-menu li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.ez-hd-nav .ez-hd-menu .sub-menu li {
	position: relative;
	margin: 0;
}

.ez-hd-nav .ez-hd-menu .sub-menu a {
	display: block;
	padding: 8px 16px;
	color: #333;
	font-family: var(--ez-font);
	font-size: 13.5px;
	font-weight: 500;
	line-height: 1.5;
	text-transform: none;
	text-decoration: none;
	white-space: nowrap;
}

.ez-hd-nav .ez-hd-menu .sub-menu a:hover,
.ez-hd-nav .ez-hd-menu .sub-menu a:focus {
	background: var(--ez-green-pale);
	color: var(--ez-green-dark);
}

/* Header category strip */
.ez-hd-nav .ez-hd-menu .sub-menu .sub-menu {
	left: calc(100% - 4px);
	top: -7px;
}

/* Header category strip */
.ez-hd-nav .ez-hd-menu .sub-menu li.menu-item-has-children > a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.ez-hd-nav .ez-hd-menu .sub-menu li.menu-item-has-children > a::after {
	content: "";
	flex: 0 0 auto;
	width: 6px;
	height: 6px;
	margin-top: -2px;
	border-top: 2px solid currentColor;
	border-right: 2px solid currentColor;
	border-radius: 1px;
	transform: rotate(45deg);
}

/* Header category strip */
.ez-hd-nav .ez-hd-menu > li:last-child > .sub-menu {
	left: auto;
	right: 0;
}

/* Header category strip */
@media (max-width: 782px) {
	/*
	 * On phones the dropdown is laid out inside the scrollable strip, so it must
	 * be allowed to size itself instead of inheriting a fixed width.
	 */
	.ez-hd-nav .ez-hd-menu .sub-menu {
		width: auto !important;
	}

	.ez-hd-nav .ez-hd-menu > li.menu-item-has-children > a::after {
		display: none;
	}
}

/* Header category strip */
.ez-hd-nav.is-stuck .ez-hd-menu .sub-menu {
	z-index: 120;
}

/*
 * CSS trang liĂ„â€šĂ‚Âªn hÄ‚Â¡Ă‚Â»Ă¢â‚¬Â¡ (.ez-ct, .ez-ct-title, .ez-ct-boxes, .ez-ct-form, .ez-ct-mapÄ‚Â¢Ă¢â€šÂ¬Ă‚Â¦)
 * Ä‚Â¢Ă¢â€šÂ¬Ă¢â‚¬Â Ă„ÂÄ‚Æ’ XĂ„â€šĂ¢â‚¬Å“A cĂ„â€šĂ‚Â¹ng cÄ‚Â¡Ă‚Â»Ă‚Â¥m trang liĂ„â€šĂ‚Âªn hÄ‚Â¡Ă‚Â»Ă¢â‚¬Â¡.
 *
 * Xem ghi chĂ„â€šĂ‚Âº trong functions.php. CÄ‚Â¡Ă‚ÂºĂ‚Â£ file inc/contact-page.php Ä‚â€žĂ¢â‚¬ËœĂ„â€šĂ‚Â£ gÄ‚Â¡Ă‚Â»Ă‚Â¡.
 */
/*
 * 4 cam ket + dai do cua footer (.ez-ft-promises, .ez-ft-promise*, .ez-ft-band*)
 * Ä‚Â¢Ă¢â€šÂ¬Ă¢â‚¬Â DA XOA cung 2 tang do cua footer.
 *
 * Xem ghi chu trong inc/footer.php.
 */
/* WooCommerce screens */

.woocommerce input.qty[type="number"],
.woocommerce-page input.qty[type="number"],
.woocommerce .quantity input[type="number"],
.woocommerce-page .quantity input[type="number"] {
	-moz-appearance: number-input;
	appearance: auto;
}

.woocommerce input.qty[type="number"]::-webkit-inner-spin-button,
.woocommerce input.qty[type="number"]::-webkit-outer-spin-button,
.woocommerce-page input.qty[type="number"]::-webkit-inner-spin-button,
.woocommerce-page input.qty[type="number"]::-webkit-outer-spin-button,
.woocommerce .quantity input[type="number"]::-webkit-inner-spin-button,
.woocommerce .quantity input[type="number"]::-webkit-outer-spin-button {
	opacity: 1;
	height: 100%;
	cursor: pointer;
}

/* WooCommerce screens */

/* WooCommerce screens */
.woocommerce form.cart input.qty[type="number"]::-webkit-inner-spin-button,
.woocommerce form.cart input.qty[type="number"]::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.woocommerce form.cart input.qty[type="number"] {
	-moz-appearance: textfield;
	appearance: textfield;
}

.ez-qty {
	display: inline-flex;
	align-items: stretch;
	vertical-align: middle;
}

/* CSS note */
.ez-qty input.qty {
	width: 62px !important;
	height: 44px;
	margin: 0 !important;
	border-radius: 4px 0 0 4px !important;
	text-align: center;
	box-sizing: border-box;
}

.ez-qty-btns {
	display: flex;
	flex-direction: column;
	width: 30px;
}

.ez-qty-btn {
	display: flex;
	flex: 1 1 50%;
	align-items: center;
	justify-content: center;
	width: 30px;
	min-height: 22px;
	padding: 0;
	border: 1px solid #d7d7d7;
	border-left: 0;
	border-radius: 0;
	background: #fff;
	color: #555;
	font-size: 10px;
	line-height: 1;
	cursor: pointer;
	box-sizing: border-box;
	transition: background 0.12s ease, color 0.12s ease;
}

.ez-qty-up {
	border-radius: 0 4px 0 0;
}

.ez-qty-down {
	border-top: 0;
	border-radius: 0 0 4px 0;
}

.ez-qty-btn:hover,
.ez-qty-btn:focus {
	background: var(--ez-green);
	border-color: var(--ez-green);
	color: #fff;
	outline: none;
}

/* Responsive tweaks */
@media (max-width: 782px) {
	.ez-qty input.qty {
		width: 64px !important;
		height: 46px;
	}

	.ez-qty-btns,
	.ez-qty-btn {
		width: 34px;
	}

	.ez-qty-btn {
		min-height: 23px;
		font-size: 11px;
	}
}

/* Product card */

.ez-card a,
.ez-card a:hover,
.ez-card a:focus,
.ez-archive-item a,
.ez-archive-item a:hover,
.ez-archive-item a:focus,
.ez-pcat a,
.ez-pcat a:hover,
.ez-pcat a:focus {
	text-decoration: none !important;
}

/* Product card */
.ez-card-btn,
.ez-card-btn:hover,
.ez-card-btn:focus,
.ez-pcat-seeall,
.ez-pcat-seeall:hover,
.ez-pcat-seeall:focus {
	text-decoration: none !important;
}

/* Single post: container width + entry meta */
@media (min-width: 922px) {
	.single-post.ast-separate-container .site-content .ast-container {
		max-width: 1300px;
	}
}

/* Home news block (shortcode ez_news_section) */
.single-post .entry-header .entry-meta {
	display: none;
}

/*
 * AN TAC GIA / NGAY TREN TRANG DANH SACH BAI VIET (06-10-2026 theo yeu cau).
 *
 * Trang chuyen muc `/category/tin-tuc/` hien dong `dangnhap@quantri.com / 06/10/2026` tren moi
 * the bai viet. Do la tai khoan quan tri, khong phai thong tin nen cho khach xem.
 *
 * Rule ngay tren (`.single-post .entry-header .entry-meta`) da an phan nay o TRANG BAI VIET DON,
 * nhung KHONG ap cho trang danh sach — vi o day bai viet khong nam trong `.entry-header` ma nam
 * trong `.ast-blog-meta-container` (xem DOM that: article > .ast-post-format- > .post-content >
 * .entry-header.ast-blog-meta-container > .entry-meta).
 *
 * Dung `body.category` de CHI ap cho trang chuyen muc, khong dung tới trang chu hay trang khac.
 * Muon ap cho MOI trang danh sach (tag, tac gia, luu tru, tim kiem) thi bo `body.category` di,
 * hoac doi thanh `.archive` / `.blog`.
 */
body.category .ast-blog-meta-container .entry-meta,
body.category .entry-meta {
	display: none;
}

/* Home news block (shortcode ez_news_section) */

.ez-news {
	margin: 0 0 42px;
}

.ez-news-grid {
	gap: 20px;
}

.ez-news-card {
	height: 100%;
	border: 1px solid #e4e4e4;
	border-radius: var(--ez-radius);
	background: #fff;
	overflow: hidden;
	transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

/* Home news block (shortcode ez_news_section) */
.ez-news-link {
	display: flex;
	flex-direction: column;
	height: 100%;
	color: inherit;
	text-decoration: none;
}

/*
 * Khung Ä‚Â¡Ă‚ÂºĂ‚Â£nh cÄ‚Â¡Ă‚Â»Ă‚Â§a thÄ‚Â¡Ă‚ÂºĂ‚Â» tin tÄ‚Â¡Ă‚Â»Ă‚Â©c.
 *
 * PC: cao 250px. MĂ n nhÄ‚Â¡Ă‚Â»Ă‚Â hÄ‚â€ Ă‚Â¡n thì hÄ‚Â¡Ă‚ÂºĂ‚Â¡ xuÄ‚Â¡Ă‚Â»Ă¢â‚¬Ëœng (xem @media bĂ„â€šĂ‚Âªn dÄ‚â€ Ă‚Â°Ä‚Â¡Ă‚Â»Ă¢â‚¬Âºi) Ä‚â€žĂ¢â‚¬ËœÄ‚Â¡Ă‚Â»Ă†â€™ Ä‚Â¡Ă‚ÂºĂ‚Â£nh khĂ´ng choĂ„â€šĂ‚Â¡n
 * hÄ‚Â¡Ă‚ÂºĂ‚Â¿t mĂ n hình Ä‚â€žĂ¢â‚¬ËœiÄ‚Â¡Ă‚Â»Ă¢â‚¬Â¡n thoÄ‚Â¡Ă‚ÂºĂ‚Â¡i.
 */
.ez-news-thumb {
	position: relative;
	height: 250px;
	background: #f3f5f4;
	overflow: hidden;
}

/* Home news block (shortcode ez_news_section) */
.ez-news-thumb-empty {
	background: linear-gradient(135deg, #eef6f2 0%, #dcebe4 100%);
}

.ez-news-thumb img {
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	object-fit: cover;
	transition: transform 0.35s ease;
}

.ez-news-meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	padding: 14px 16px 0;
	font-family: var(--ez-font);
	font-size: 12px;
	line-height: 1.4;
}

.ez-news-cat {
	padding: 3px 10px;
	border-radius: 999px;
	background: var(--ez-green-pale);
	color: var(--ez-green-dark);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.3px;
}

.ez-news-date {
	color: #8a8a8a;
	font-weight: 600;
}

/* Home news block (shortcode ez_news_section) */
.ez-news-cat + .ez-news-date::before {
	content: "\2022"; /* dau cham giua ngay o khoi tin tuc */
	margin-right: 8px;
	color: #d0d0d0;
}

.ez-news-title {
	margin: 8px 0 0;
	padding: 0 16px;
	color: #222;
	font-family: var(--ez-font);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.45;
	
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	transition: color 0.18s ease;
}

.ez-news-excerpt {
	margin: 8px 0 0;
	padding: 0 16px 18px;
	color: #666;
	font-size: 13.5px;
	line-height: 1.6;
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
}

/* Home news block (shortcode ez_news_section) */
.ez-news-card:hover,
.ez-news-card:focus-within {
	transform: translateY(-4px);
	border-color: var(--ez-green);
	box-shadow: 0 10px 22px rgba(2, 89, 8, 0.16);
}

.ez-news-card:hover .ez-news-thumb img,
.ez-news-card:focus-within .ez-news-thumb img {
	transform: scale(1.06);
}

.ez-news-card:hover .ez-news-title,
.ez-news-card:focus-within .ez-news-title {
	color: var(--ez-green);
}

/* Home news block (shortcode ez_news_section) */
.ez-news-link:focus-visible {
	outline: 2px solid var(--ez-green);
	outline-offset: -2px;
}

@media (max-width: 1024px) {
	.ez-news-grid {
		gap: 16px;
	}

	/* MĂ„â€šĂ‚Â¡y tĂ­nh bÄ‚Â¡Ă‚ÂºĂ‚Â£ng: 3 cÄ‚Â¡Ă‚Â»Ă¢â€žÂ¢t -> 2 cÄ‚Â¡Ă‚Â»Ă¢â€žÂ¢t, Ä‚Â¡Ă‚ÂºĂ‚Â£nh thÄ‚Â¡Ă‚ÂºĂ‚Â¥p lÄ‚Â¡Ă‚ÂºĂ‚Â¡i cho cĂ„â€šĂ‚Â¢n */
	.ez-news-thumb {
		height: 220px;
	}
}

@media (max-width: 782px) {
	
	.ez-news-grid.ez-bs-grid.ez-cols-1,
	.ez-news-grid.ez-bs-grid.ez-cols-2,
	.ez-news-grid.ez-bs-grid.ez-cols-3,
	.ez-news-grid.ez-bs-grid.ez-cols-4 {
		grid-template-columns: minmax(0, 1fr) !important;
	}

	/* ĐiÄ‚Â¡Ă‚Â»Ă¢â‚¬Â¡n thoÄ‚Â¡Ă‚ÂºĂ‚Â¡i: 1 cÄ‚Â¡Ă‚Â»Ă¢â€žÂ¢t, Ä‚Â¡Ă‚ÂºĂ‚Â£nh thÄ‚Â¡Ă‚ÂºĂ‚Â¥p hÄ‚â€ Ă‚Â¡n PC nhÆ°ng vÄ‚Â¡Ă‚ÂºĂ‚Â«n Ä‚â€žĂ¢â‚¬ËœÄ‚Â¡Ă‚Â»Ă‚Â§ to Ä‚â€žĂ¢â‚¬ËœÄ‚Â¡Ă‚Â»Ă†â€™ nhìn */
	.ez-news-thumb {
		height: 210px;
	}

	.ez-news-title {
		font-size: 15.5px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ez-news-card,
	.ez-news-thumb img,
	.ez-news-title {
		transition: none;
	}

	.ez-news-card:hover,
	.ez-news-card:focus-within {
		transform: none;
	}

	.ez-news-card:hover .ez-news-thumb img,
	.ez-news-card:focus-within .ez-news-thumb img {
		transform: none;
	}
}


/*
 * KhÄ‚Â¡Ă‚Â»Ă¢â‚¬Ëœi GIÄ‚Â¡Ă‚Â»Ă‚ÂšI THIÄ‚Â¡Ă‚Â»Ă¢â‚¬Â U NHĂ„â€šĂ¢â€šÂ¬ THUÄ‚Â¡Ă‚Â»Ă‚ÂC (.ez-about, .ez-about-inner, .ez-about-text,
 * .ez-about-media) Ä‚Â¢Ă¢â€šÂ¬Ă¢â‚¬Â Ă„ÂÄ‚Æ’ XĂ„â€šĂ¢â‚¬Å“A cĂ„â€šĂ‚Â¹ng khÄ‚Â¡Ă‚Â»Ă¢â‚¬Ëœi Ä‚â€žĂ¢â‚¬ËœĂ„â€šĂ‚Â³.
 *
 * Xem ghi chĂ„â€šĂ‚Âº trong inc/functions.php. KhÄ‚Â¡Ă‚Â»Ă¢â‚¬Ëœi nĂ y do shortcode [ez_about_section]
 * tÄ‚Â¡Ă‚ÂºĂ‚Â¡o ra; toĂ n bÄ‚Â¡Ă‚Â»Ă¢â€žÂ¢ CSS (kÄ‚Â¡Ă‚Â»Ă†â€™ cÄ‚Â¡Ă‚ÂºĂ‚Â£ 2 @media) Ä‚â€žĂ¢â‚¬ËœĂ„â€šĂ‚Â£ bÄ‚Â¡Ă‚Â»Ă‚Â.
 */

/*
 * Popup "CÄ‚Â¡Ă‚ÂºĂ‚Â£nh bĂ„â€šĂ‚Â¡o thuÄ‚Â¡Ă‚Â»Ă¢â‚¬Ëœc kĂ„â€šĂ‚Âª Ä‚â€žĂ¢â‚¬ËœÄ‚â€ Ă‚Â¡n" (.ez-rx-warn, .ez-rx-card, .ez-rx-text, .ez-rx-okÄ‚Â¢Ă¢â€šÂ¬Ă‚Â¦)
 * Ä‚Â¢Ă¢â€šÂ¬Ă¢â‚¬Â Ă„ÂÄ‚Æ’ XĂ„â€šĂ¢â‚¬Å“A cĂ„â€šĂ‚Â¹ng popup Ä‚â€žĂ¢â‚¬ËœĂ„â€šĂ‚Â³.
 *
 * Xem ghi chĂ„â€šĂ‚Âº trong functions.php. ToĂ n bÄ‚Â¡Ă‚Â»Ă¢â€žÂ¢ CSS cÄ‚Â¡Ă‚Â»Ă‚Â§a popup Ä‚â€žĂ¢â‚¬ËœĂ„â€šĂ‚Â£ bÄ‚Â¡Ă‚Â»Ă‚Â; trÄ‚â€ Ă‚Â°Ä‚Â¡Ă‚Â»Ă¢â‚¬Âºc Ä‚â€žĂ¢â‚¬ËœĂ„â€šĂ‚Â¢y nĂ„â€šĂ‚Â³ nÄ‚Â¡Ă‚ÂºĂ‚Â±m Ä‚Â¡Ă‚Â»Ă…Â¸
 * cuÄ‚Â¡Ă‚Â»Ă¢â‚¬Ëœi file nĂ y.
 */

/* ===========================================================================
 * Ä‚Â¡Ă‚ÂºĂ‚Â¨N Ă„â€šĂ¢â‚¬Â "SÄ‚Â¡Ă‚ÂºĂ‚Â®P XÄ‚Â¡Ă‚ÂºĂ‚Â¾P MÄ‚Â¡Ă‚ÂºĂ‚Â¶C Ä‚â€žĂ‚ÂÄ‚Â¡Ă‚Â»Ă‚ÂŠNH" Ä‚Â¡Ă‚Â»Ă‚Âž TRANG CÄ‚Â¡Ă‚Â»Ă‚Â¬A HĂ„â€šĂ¢â€šÂ¬NG / DANH MÄ‚Â¡Ă‚Â»Ă‚Â¤C (06-10-2026)
 *
 * Ä‚â€žĂ‚ÂĂ„â€šĂ‚Â³ lĂ  `<form class="woocommerce-ordering">` do WooCommerce tÄ‚Â¡Ă‚Â»Ă‚Â± in ra, chÄ‚Â¡Ă‚Â»Ă‚Â©a
 * `<select name="orderby">` vÄ‚Â¡Ă‚Â»Ă¢â‚¬Âºi lÄ‚Â¡Ă‚Â»Ă‚Â±a chÄ‚Â¡Ă‚Â»Ă‚Ân Ä‚â€žĂ¢â‚¬ËœÄ‚Â¡Ă‚ÂºĂ‚Â§u lĂ  "SÄ‚Â¡Ă‚ÂºĂ‚Â¯p xÄ‚Â¡Ă‚ÂºĂ‚Â¿p mÄ‚Â¡Ă‚ÂºĂ‚Â·c Ä‚â€žĂ¢â‚¬ËœÄ‚Â¡Ă‚Â»Ă¢â‚¬Â¹nh". ChÄ‚Â¡Ă‚Â»Ă‚Â§ shop thÄ‚Â¡Ă‚ÂºĂ‚Â¥y thÄ‚Â¡Ă‚Â»Ă‚Â«a nĂ„â€šĂ‚Âªn
 * yĂ„â€šĂ‚Âªu cÄ‚Â¡Ă‚ÂºĂ‚Â§u Ä‚Â¡Ă‚ÂºĂ‚Â©n.
 *
 * VÄ‚Å’ SAO DĂ„â€šĂ¢â€žÂ¢NG `#main` Ä‚Â¡Ă‚Â»Ă‚Âž Ä‚â€žĂ‚ÂÄ‚Â¡Ă‚ÂºĂ‚Â¦U SELECTOR: CSS cÄ‚Â¡Ă‚Â»Ă‚Â§a WooCommerce/Astra cĂ„â€šĂ‚Â³
 * `.woocommerce .woocommerce-ordering { float: right; margin-bottom: 2.5em; }` Ä‚Â¢Ă¢â€šÂ¬Ă¢â‚¬Â Ä‚â€žĂ¢â‚¬ËœÄ‚Â¡Ă‚Â»Ă¢â€žÂ¢ Æ°u tiĂ„â€šĂ‚Âªn
 * (0,2,0). DĂ„â€šĂ‚Â¹ng `#main` cho thĂ nh (1,2,0) nĂ„â€šĂ‚Âªn thÄ‚Â¡Ă‚ÂºĂ‚Â¯ng chÄ‚Â¡Ă‚ÂºĂ‚Â¯c, khĂ´ng phÄ‚Â¡Ă‚ÂºĂ‚Â£i rÄ‚Â¡Ă‚ÂºĂ‚Â¯c `!important`.
 *
 * Vì sao dĂ„â€šĂ‚Â¹ng `display: none` chÄ‚Â¡Ă‚Â»Ă‚Â© khĂ´ng `visibility`/`height`: form nĂ y chÄ‚Â¡Ă‚Â»Ă¢â‚¬Â° chÄ‚Â¡Ă‚Â»Ă‚Â©a Ä‚â€žĂ¢â‚¬ËœĂ„â€šĂ‚Âºng cĂ„â€šĂ‚Â¡i
 * dropdown, Ä‚Â¡Ă‚ÂºĂ‚Â©n cÄ‚Â¡Ă‚ÂºĂ‚Â£ form lĂ  gÄ‚Â¡Ă‚Â»Ă‚Ân nhÄ‚Â¡Ă‚ÂºĂ‚Â¥t Ä‚Â¢Ă¢â€šÂ¬Ă¢â‚¬Â khĂ´ng Ä‚â€žĂ¢â‚¬ËœÄ‚Â¡Ă‚Â»Ă†â€™ lÄ‚Â¡Ă‚ÂºĂ‚Â¡i khoÄ‚Â¡Ă‚ÂºĂ‚Â£ng trÄ‚Â¡Ă‚Â»Ă¢â‚¬Ëœng hay phÄ‚Â¡Ă‚ÂºĂ‚Â§n tÄ‚Â¡Ă‚Â»Ă‚Â­ vĂ´ hình vÄ‚Â¡Ă‚ÂºĂ‚Â«n
 * nhÄ‚Â¡Ă‚ÂºĂ‚Â­n Ä‚â€žĂ¢â‚¬ËœÄ‚â€ Ă‚Â°Ä‚Â¡Ă‚Â»Ă‚Â£c tiĂ„â€šĂ‚Âªu Ä‚â€žĂ¢â‚¬ËœiÄ‚Â¡Ă‚Â»Ă†â€™m bĂ n phĂ­m.
 *
 * Ä‚Â¢Ă‚ÂšĂ‚Â Ä‚Â¯Ă‚Â¸Ă‚Â CHÄ‚Â¡Ă‚Â»Ă‹â€  Ä‚Â¡Ă‚ÂºĂ‚Â©n Ă´ sÄ‚Â¡Ă‚ÂºĂ‚Â¯p xÄ‚Â¡Ă‚ÂºĂ‚Â¿p. KHĂ„â€šĂ¢â‚¬ÂNG Ä‚Â¡Ă‚ÂºĂ‚Â©n `.woocommerce-result-count` ("HiÄ‚Â¡Ă‚Â»Ă†â€™n thÄ‚Â¡Ă‚Â»Ă¢â‚¬Â¹ 1Ä‚Â¢Ă¢â€šÂ¬Ă¢â‚¬Å“12 cÄ‚Â¡Ă‚Â»Ă‚Â§a 74 kÄ‚Â¡Ă‚ÂºĂ‚Â¿t
 * quÄ‚Â¡Ă‚ÂºĂ‚Â£") vì dĂ„â€šĂ‚Â²ng Ä‚â€žĂ¢â‚¬ËœĂ„â€šĂ‚Â³ hÄ‚Â¡Ă‚Â»Ă‚Â¯u Ă­ch cho khĂ„â€šĂ‚Â¡ch. NÄ‚Â¡Ă‚ÂºĂ‚Â¿u sau nĂ y muÄ‚Â¡Ă‚Â»Ă¢â‚¬Ëœn Ä‚Â¡Ă‚ÂºĂ‚Â©n luĂ´n thì thĂ„â€šĂ‚Âªm selector Ä‚â€žĂ¢â‚¬ËœĂ„â€šĂ‚Â³ vĂ o.
 *
 * KhĂ´ng Ä‚Â¡Ă‚ÂºĂ‚Â£nh hÄ‚â€ Ă‚Â°Ä‚Â¡Ă‚Â»Ă…Â¸ng chÄ‚Â¡Ă‚Â»Ă‚Â©c nĂ„Æ’ng lÄ‚Â¡Ă‚Â»Ă‚Âc/sÄ‚Â¡Ă‚ÂºĂ‚Â¯p xÄ‚Â¡Ă‚ÂºĂ‚Â¿p bÄ‚Â¡Ă‚ÂºĂ‚Â±ng URL (`?orderby=price`) Ä‚Â¢Ă¢â€šÂ¬Ă¢â‚¬Â chÄ‚Â¡Ă‚Â»Ă¢â‚¬Â° Ä‚Â¡Ă‚ÂºĂ‚Â©n giao diÄ‚Â¡Ă‚Â»Ă¢â‚¬Â¡n.
 * =========================================================================== */
#main .woocommerce-ordering {
	display: none;
}

/* ===========================================================================
 * LÄ‚â€ Ă‚Â¯Ä‚Â¡Ă‚Â»Ă‚ÂšI SÄ‚Â¡Ă‚ÂºĂ‚Â¢N PHÄ‚Â¡Ă‚ÂºĂ‚Â¨M Ä‚Â¢Ă¢â€šÂ¬Ă¢â‚¬Â SÄ‚Â¡Ă‚Â»Ă‚Â¬A CÄ‚Â¡Ă‚ÂºĂ‚Â¢NH "LÄ‚Â¡Ă‚Â»Ă¢â‚¬ÂM CHÄ‚Â¡Ă‚Â»Ă¢â‚¬ÂM CÁI TRÊN CÁI DÄ‚â€ Ă‚Â¯Ä‚Â¡Ă‚Â»Ă‚ÂšI" (06-10-2026)
 *
 * Ä‚â€žĂ‚ÂĂ„â€šĂ‚Â¢y lĂ  thÄ‚Â¡Ă‚ÂºĂ‚Â» sÄ‚Â¡Ă‚ÂºĂ‚Â£n phÄ‚Â¡Ă‚ÂºĂ‚Â©m MÄ‚Â¡Ă‚ÂºĂ‚Â¶C Ä‚â€žĂ‚ÂÄ‚Â¡Ă‚Â»Ă‚ÂŠNH cÄ‚Â¡Ă‚Â»Ă‚Â§a Astra/WooCommerce (`ul.products` +
 * `.astra-shop-thumbnail-wrap` + `.ast-on-card-button`), KHĂ„â€šĂ¢â‚¬ÂNG phÄ‚Â¡Ă‚ÂºĂ‚Â£i thÄ‚Â¡Ă‚ÂºĂ‚Â» tÄ‚Â¡Ă‚Â»Ă‚Â± viÄ‚Â¡Ă‚ÂºĂ‚Â¿t cÄ‚Â¡Ă‚Â»Ă‚Â§a theme
 * (`.ez-card`, chÄ‚Â¡Ă‚Â»Ă¢â‚¬Â° dĂ„â€šĂ‚Â¹ng Ä‚Â¡Ă‚Â»Ă…Â¸ template danh mÄ‚Â¡Ă‚Â»Ă‚Â¥c cÅ© Ä‚â€žĂ¢â‚¬ËœĂ„â€šĂ‚Â£ gÄ‚Â¡Ă‚Â»Ă‚Â¡).
 *
 * ---------------------------------------------------------------------------
 * VÄ‚Å’ SAO LÄ‚Â¡Ă‚Â»Ă¢â‚¬Â CH (Ä‚â€žĂ¢â‚¬ËœÄ‚Â¡Ă‚Â»Ă‚Âc trÄ‚â€ Ă‚Â°Ä‚Â¡Ă‚Â»Ă¢â‚¬Âºc khi sÄ‚Â¡Ă‚Â»Ă‚Â­a)
 * ---------------------------------------------------------------------------
 * 1. Ä‚Â¡Ă‚ÂºĂ‚Â¢NH CAO THÄ‚Â¡Ă‚ÂºĂ‚Â¤P KHÁC NHAU. Ä‚Â¡Ă‚ÂºĂ‚Â¢nh sÄ‚Â¡Ă‚ÂºĂ‚Â£n phÄ‚Â¡Ă‚ÂºĂ‚Â©m cĂ„â€šĂ‚Â³ tÄ‚Â¡Ă‚Â»Ă‚Â· lÄ‚Â¡Ă‚Â»Ă¢â‚¬Â¡ gÄ‚Â¡Ă‚Â»Ă¢â‚¬Ëœc khĂ„â€šĂ‚Â¡c nhau (cĂ„â€šĂ‚Â³ Ä‚Â¡Ă‚ÂºĂ‚Â£nh vuĂ´ng, cĂ„â€šĂ‚Â³ Ä‚Â¡Ă‚ÂºĂ‚Â£nh
 *    ngang). Astra chÄ‚Â¡Ă‚Â»Ă¢â‚¬Â° Ä‚â€žĂ¢â‚¬ËœÄ‚Â¡Ă‚ÂºĂ‚Â·t `width: 100%` nĂ„â€šĂ‚Âªn chiÄ‚Â¡Ă‚Â»Ă‚Âu cao chÄ‚Â¡Ă‚ÂºĂ‚Â¡y theo tÄ‚Â¡Ă‚Â»Ă‚Â· lÄ‚Â¡Ă‚Â»Ă¢â‚¬Â¡ Ä‚Â¡Ă‚ÂºĂ‚Â£nh -> mÄ‚Â¡Ă‚Â»Ă¢â‚¬â€i Ă´ cao
 *    mÄ‚Â¡Ă‚Â»Ă¢â€žÂ¢t kiÄ‚Â¡Ă‚Â»Ă†â€™u, kĂ©o theo cÄ‚Â¡Ă‚ÂºĂ‚Â£ phÄ‚Â¡Ă‚ÂºĂ‚Â§n chÄ‚Â¡Ă‚Â»Ă‚Â¯ vĂ  nĂ„â€šĂ‚Âºt bĂ„â€šĂ‚Âªn dÄ‚â€ Ă‚Â°Ä‚Â¡Ă‚Â»Ă¢â‚¬Âºi lÄ‚Â¡Ă‚Â»Ă¢â‚¬Â¡ch nhau.
 * 2. TIÊU Ä‚â€žĂ‚ÂÄ‚Â¡Ă‚Â»Ă¢â€šÂ¬ 1 HAY 2 DĂ„â€šĂ¢â‚¬â„¢NG. TĂ„â€šĂ‚Âªn dĂ i ("Đinh bĂ„Æ’ng xĂ„â€šĂ‚Â¢y dÄ‚Â¡Ă‚Â»Ă‚Â±ng- NgĂ nh xĂ„â€šĂ‚Â¢y dÄ‚Â¡Ă‚Â»Ă‚Â±ng") xuÄ‚Â¡Ă‚Â»Ă¢â‚¬Ëœng 2 dĂ„â€šĂ‚Â²ng,
 *    tĂ„â€šĂ‚Âªn ngÄ‚Â¡Ă‚ÂºĂ‚Â¯n 1 dĂ„â€šĂ‚Â²ng -> nĂ„â€šĂ‚Âºt bĂ„â€šĂ‚Âªn dÄ‚â€ Ă‚Â°Ä‚Â¡Ă‚Â»Ă¢â‚¬Âºi bÄ‚Â¡Ă‚Â»Ă¢â‚¬Â¹ Ä‚â€žĂ¢â‚¬ËœÄ‚Â¡Ă‚ÂºĂ‚Â©y lÄ‚Â¡Ă‚Â»Ă¢â‚¬Â¡ch.
 *
 * ---------------------------------------------------------------------------
 * CÁCH SÄ‚Â¡Ă‚Â»Ă‚Â¬A
 * ---------------------------------------------------------------------------
 * a. Ă„â€šĂ¢â‚¬Â°p mÄ‚Â¡Ă‚Â»Ă‚Âi Ä‚Â¡Ă‚ÂºĂ‚Â£nh vÄ‚Â¡Ă‚Â»Ă‚Â cĂ„â€šĂ‚Â¹ng mÄ‚Â¡Ă‚Â»Ă¢â€žÂ¢t khung 4:3 bÄ‚Â¡Ă‚ÂºĂ‚Â±ng `aspect-ratio` + `object-fit: cover`. CÄ‚Â¡Ă‚ÂºĂ‚Â¯t bÄ‚Â¡Ă‚Â»Ă¢â‚¬Âºt
 *    mÄ‚Â¡Ă‚Â»Ă¢â€žÂ¢t Ă­t Ä‚Â¡Ă‚Â»Ă…Â¸ mĂ©p Ä‚Â¡Ă‚ÂºĂ‚Â£nh lĂ  cĂ„â€šĂ‚Â¡i giĂ„â€šĂ‚Â¡ phÄ‚Â¡Ă‚ÂºĂ‚Â£i trÄ‚Â¡Ă‚ÂºĂ‚Â£ Ä‚â€žĂ¢â‚¬ËœÄ‚Â¡Ă‚Â»Ă†â€™ lÄ‚â€ Ă‚Â°Ä‚Â¡Ă‚Â»Ă¢â‚¬Âºi phÄ‚Â¡Ă‚ÂºĂ‚Â³ng Ä‚Â¢Ă¢â€šÂ¬Ă¢â‚¬Â Ä‚â€žĂ¢â‚¬ËœÄ‚Â¡Ă‚Â»Ă¢â‚¬Â¢i lÄ‚Â¡Ă‚ÂºĂ‚Â¡i cÄ‚Â¡Ă‚ÂºĂ‚Â£ hĂ ng cao Ä‚â€žĂ¢â‚¬ËœÄ‚Â¡Ă‚Â»Ă‚Âu nhau.
 *    (KhĂ´ng dĂ„â€šĂ‚Â¹ng `contain`: sÄ‚Â¡Ă‚ÂºĂ‚Â½ chÄ‚Â¡Ă‚Â»Ă‚Â«a viÄ‚Â¡Ă‚Â»Ă‚Ân trÄ‚Â¡Ă‚ÂºĂ‚Â¯ng, nhìn cĂ„â€šĂ‚Â²n lÄ‚Â¡Ă‚Â»Ă¢â€žÂ¢n xÄ‚Â¡Ă‚Â»Ă¢â€žÂ¢n hÄ‚â€ Ă‚Â¡n.)
 * b. Cho `<li>` vĂ  lÄ‚Â¡Ă‚Â»Ă¢â‚¬Âºp bÄ‚Â¡Ă‚Â»Ă‚Âc nÄ‚Â¡Ă‚Â»Ă¢â€žÂ¢i dung thĂ nh flex cÄ‚Â¡Ă‚Â»Ă¢â€žÂ¢t, rÄ‚Â¡Ă‚Â»Ă¢â‚¬Å“i Ä‚â€žĂ¢â‚¬ËœÄ‚Â¡Ă‚ÂºĂ‚Â©y nĂ„â€šĂ‚Âºt xuÄ‚Â¡Ă‚Â»Ă¢â‚¬Ëœng Ä‚â€žĂ¢â‚¬ËœĂ„â€šĂ‚Â¡y bÄ‚Â¡Ă‚ÂºĂ‚Â±ng
 *    `margin-top: auto`. NhÄ‚Â¡Ă‚Â»Ă‚Â vÄ‚Â¡Ă‚ÂºĂ‚Â­y tiĂ„â€šĂ‚Âªu Ä‚â€žĂ¢â‚¬ËœÄ‚Â¡Ă‚Â»Ă‚Â 1 dĂ„â€šĂ‚Â²ng hay 2 dĂ„â€šĂ‚Â²ng thì NÚT VÄ‚Â¡Ă‚ÂºĂ‚ÂªN THÄ‚Â¡Ă‚ÂºĂ‚Â²NG HĂ„â€šĂ¢â€šÂ¬NG.
 * c. TiĂ„â€šĂ‚Âªu Ä‚â€žĂ¢â‚¬ËœÄ‚Â¡Ă‚Â»Ă‚Â chÄ‚Â¡Ă‚ÂºĂ‚Â·n tÄ‚Â¡Ă‚Â»Ă¢â‚¬Ëœi Ä‚â€žĂ¢â‚¬Ëœa 2 dĂ„â€šĂ‚Â²ng (`-webkit-line-clamp`) Ä‚â€žĂ¢â‚¬ËœÄ‚Â¡Ă‚Â»Ă†â€™ tĂ„â€šĂ‚Âªn quĂ„â€šĂ‚Â¡ dĂ i khĂ´ng phĂ„â€šĂ‚Â¡ lÄ‚â€ Ă‚Â°Ä‚Â¡Ă‚Â»Ă¢â‚¬Âºi.
 *
 * DĂ„â€šĂ‚Â¹ng `#main` Ä‚Â¡Ă‚Â»Ă…Â¸ Ä‚â€žĂ¢â‚¬ËœÄ‚Â¡Ă‚ÂºĂ‚Â§u selector cho Ä‚â€žĂ¢â‚¬ËœÄ‚Â¡Ă‚Â»Ă¢â€žÂ¢ Æ°u tiĂ„â€šĂ‚Âªn (1,x,0) Ä‚Â¢Ă¢â€šÂ¬Ă¢â‚¬Â thÄ‚Â¡Ă‚ÂºĂ‚Â¯ng CSS cÄ‚Â¡Ă‚Â»Ă‚Â§a Astra/WooCommerce mĂ 
 * khĂ´ng phÄ‚Â¡Ă‚ÂºĂ‚Â£i rÄ‚Â¡Ă‚ÂºĂ‚Â¯c `!important`.
 * =========================================================================== */

/* --- a. Ä‚Â¡Ă‚ÂºĂ‚Â¢nh vÄ‚Â¡Ă‚Â»Ă‚Â cĂ„â€šĂ‚Â¹ng khung 4:3 --- */
/* --- a. Ảnh cũng khung 4:3 + BO GÓC + ZOOM NHẸ KHI RÊ CHUỘT (06-10-2026) ---
 *
 * BO GÓC 5px: theo yêu cầu. Đặt ở CẢ khung bao lẫn ảnh:
 *   - khung bao cần `overflow: hidden` để ảnh phóng to khi hover KHÔNG tràn ra ngoài góc bo;
 *   - ảnh cần `border-radius` riêng vì `overflow: hidden` trên khung chỉ cắt phần tràn, không
 *     tự bo góc cho ảnh bên trong ở một số trình duyệt cũ.
 *
 * ZOOM: `scale(1.05)` khi rê chuột hoặc khi bàn phím focus vào (khách dùng Tab vẫn thấy).
 * Chỉ 5% nên nhẹ nhàng, không giật. `transition 0.4s` cho mượt.
 *
 * ⚠️ KHÔNG đổi `position: relative` của khung — nút `.ast-on-card-button` (đã ẩn) và các
 * thành phần phủ khác dựa vào mốc định vị này.
 */
#main ul.products li.product .astra-shop-thumbnail-wrap {
	position: relative;
	/*
	 * ⚠️ `flex-shrink: 0` là BẮT BUỘC khi bo góc ảnh.
	 *
	 * `li.product` là flex container (CSS của Astra), nên khung ảnh là một mục flex và mặc định
	 * bị CO LẠI khi thẻ không đủ chỗ: đo thật ở màn 1400px — ảnh cao 214px nhưng khung chỉ còn
	 * 139px. Nếu đặt `overflow: hidden` lên khung đang bị co đó thì ảnh bị CẮT MẤT 75px
	 * (đúng lỗi đã gặp). Chặn co lại thì khung cao đúng bằng ảnh, không cắt gì.
	 */
	flex-shrink: 0;
	border-radius: 5px;
}

#main ul.products li.product .astra-shop-thumbnail-wrap img {
	display: block;
	width: 100%;
	height: auto;
	/*
	 * KHUNG VUÔNG 1:1 (đổi 06-10-2026 theo yêu cầu) — trước đây là 4:3.
	 *
	 * VÌ SAO ĐỔI: ảnh sản phẩm của site phần lớn là ảnh DỌC (500x666, 500x667, 960x1280).
	 * Khung 4:3 cắt mất khoảng 43% chiều cao ảnh nên đáy chai / nắp chai hay bị cụt. Khung
	 * vuông chỉ còn cắt khoảng 25% và các thẻ nhìn đều nhau hơn.
	 *
	 * `object-fit: cover` giữ nguyên: ảnh luôn kín khung, không chừa viền.
	 * Muốn THẤY TRỌN sản phẩm (không cắt) thì đổi `cover` -> `contain`; khi đó ảnh dọc sẽ
	 * chừa hai dải màu nền ở hai bên.
	 *
	 * Bản cũ nằm ở `backup-truoc-khi-anh-san-pham-vuong\ez-shop.css`.
	 */
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 5px;
	transition: transform 0.4s ease;
}

#main ul.products li.product .astra-shop-thumbnail-wrap:hover img,
#main ul.products li.product .astra-shop-thumbnail-wrap:focus-within img {
	transform: scale(1.05);
}

/* Ai bật "giảm chuyển động" thì không zoom, chỉ giữ bo góc. */
@media (prefers-reduced-motion: reduce) {
	#main ul.products li.product .astra-shop-thumbnail-wrap img {
		transition: none;
	}

	#main ul.products li.product .astra-shop-thumbnail-wrap:hover img,
	#main ul.products li.product .astra-shop-thumbnail-wrap:focus-within img {
		transform: none;
	}
}
/*
 * --- b. ThÄ‚Â¡Ă‚ÂºĂ‚Â» thĂ nh flex cÄ‚Â¡Ă‚Â»Ă¢â€žÂ¢t, nĂ„â€šĂ‚Âºt dÄ‚Â¡Ă‚Â»Ă¢â‚¬Å“n xuÄ‚Â¡Ă‚Â»Ă¢â‚¬Ëœng Ä‚â€žĂ¢â‚¬ËœĂ„â€šĂ‚Â¡y ---
 *
 * Astra bÄ‚Â¡Ă‚Â»Ă‚Âc nÄ‚Â¡Ă‚Â»Ă¢â€žÂ¢i dung trong `.astra-shop-summary-wrap`. Cho nĂ„â€šĂ‚Â³ flex cÄ‚Â¡Ă‚Â»Ă¢â€žÂ¢t + `height: 100%`,
 * rÄ‚Â¡Ă‚Â»Ă¢â‚¬Å“i `margin-top: auto` cho nĂ„â€šĂ‚Âºt.
 *
 * Ä‚Â¢Ă‚ÂšĂ‚Â Ä‚Â¯Ă‚Â¸Ă‚Â `.ast-on-card-button` nÄ‚Â¡Ă‚ÂºĂ‚Â±m TRONG `.astra-shop-thumbnail-wrap` (Ä‚â€žĂ¢â‚¬ËœĂ„â€šĂ‚Â¨ lĂ„â€šĂ‚Âªn Ä‚Â¡Ă‚ÂºĂ‚Â£nh) chÄ‚Â¡Ă‚Â»Ă‚Â© khĂ´ng
 * phÄ‚Â¡Ă‚ÂºĂ‚Â£i trong khÄ‚Â¡Ă‚Â»Ă¢â‚¬Ëœi nÄ‚Â¡Ă‚Â»Ă¢â€žÂ¢i dung Ä‚Â¢Ă¢â€šÂ¬Ă¢â‚¬Â Ä‚â€žĂ¢â‚¬ËœĂ„â€šĂ‚Â£ kiÄ‚Â¡Ă‚Â»Ă†â€™m tra DOM thÄ‚Â¡Ă‚ÂºĂ‚Â­t. NĂ„â€šĂ‚Âªn nĂ„â€šĂ‚Â³ khĂ´ng tham gia flex cÄ‚Â¡Ă‚Â»Ă¢â€žÂ¢t nĂ y;
 * `margin-top: auto` Ä‚Â¡Ă‚Â»Ă…Â¸ Ä‚â€žĂ¢â‚¬ËœĂ„â€šĂ‚Â¢y chÄ‚Â¡Ă‚Â»Ă¢â‚¬Â° tĂ„â€šĂ‚Â¡c Ä‚â€žĂ¢â‚¬ËœÄ‚Â¡Ă‚Â»Ă¢â€žÂ¢ng tÄ‚Â¡Ă‚Â»Ă¢â‚¬Âºi nĂ„â€šĂ‚Âºt nĂ o thÄ‚Â¡Ă‚ÂºĂ‚Â­t sÄ‚Â¡Ă‚Â»Ă‚Â± nÄ‚Â¡Ă‚ÂºĂ‚Â±m trong khÄ‚Â¡Ă‚Â»Ă¢â‚¬Ëœi nÄ‚Â¡Ă‚Â»Ă¢â€žÂ¢i dung.
 */
#main ul.products li.product .astra-shop-summary-wrap {
	display: flex;
	flex-direction: column;
	height: 100%;
}

/* NĂ„â€šĂ‚Âºt trong khÄ‚Â¡Ă‚Â»Ă¢â‚¬Ëœi nÄ‚Â¡Ă‚Â»Ă¢â€žÂ¢i dung (nÄ‚Â¡Ă‚ÂºĂ‚Â¿u cĂ„â€šĂ‚Â³) dÄ‚Â¡Ă‚Â»Ă¢â‚¬Å“n xuÄ‚Â¡Ă‚Â»Ă¢â‚¬Ëœng Ä‚â€žĂ¢â‚¬ËœĂ„â€šĂ‚Â¡y */
#main ul.products li.product .astra-shop-summary-wrap > .button,
#main ul.products li.product .astra-shop-summary-wrap > .added_to_cart {
	margin-top: auto;
}

/* --- c. TiĂ„â€šĂ‚Âªu Ä‚â€žĂ¢â‚¬ËœÄ‚Â¡Ă‚Â»Ă‚Â tÄ‚Â¡Ă‚Â»Ă¢â‚¬Ëœi Ä‚â€žĂ¢â‚¬Ëœa 2 dĂ„â€šĂ‚Â²ng --- */
#main ul.products li.product .woocommerce-loop-product__title {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
	/* TÊN SẢN PHẨM VIẾT HOA CHỮ ĐẦU (đổi 06-10-2026 theo yêu cầu).
	 *
	 * Nhiều sản phẩm bị gõ toàn chữ thường trong dữ liệu ("khuôn móc", "khuôn nón",
	 * "khuôn kẹp tóc") nên in ra nhìn thiếu trang trọng.
	 *
	 * `capitalize` chỉ viết hoa chữ đầu MỖI từ và GIỮ NGUYÊN phần còn lại, nên tên đã
	 * viết hoa sẵn ("Sắt CNC", "Cao Su") không bị đổi, tên viết HOA toàn bộ cũng không bị
	 * hạ xuống. Sửa ở CSS nên KHÔNG đụng dữ liệu sản phẩm. */
	text-transform: capitalize;
	/* GiÄ‚Â¡Ă‚Â»Ă‚Â¯ chÄ‚Â¡Ă‚Â»Ă¢â‚¬â€ cho 2 dĂ„â€šĂ‚Â²ng Ä‚â€žĂ¢â‚¬ËœÄ‚Â¡Ă‚Â»Ă†â€™ Ă´ nĂ o cÅ©ng cao bÄ‚Â¡Ă‚ÂºĂ‚Â±ng nhau dĂ„â€šĂ‚Â¹ tĂ„â€šĂ‚Âªn 1 dĂ„â€šĂ‚Â²ng. */
	min-height: 2.6em;
	/* CĂN GIỮA TÊN SẢN PHẨM (đổi 06-10-2026 theo yêu cầu).
	 *
	 * TRƯỚC: tên dựa trái theo `text-align: left` mà Astra đặt sẵn cho `li.product`, trong
	 * khi dòng danh mục phía trên (`.ast-woo-product-category`) và nút "Liên hệ báo giá"
	 * phía dưới đều ĐÃ căn giữa -> tên lệch trái nhìn so le.
	 *
	 * NAY: căn giữa cho thẳng hàng với hai thứ đó. Ảnh là khối full-width nên không đổi.
	 *
	 * Sản phẩm của site hiện KHÔNG có giá (0/70) nên trong thẻ không có dòng giá nào lệch lại. */
	text-align: center;
}

/*
 * DONG DANH MUC TREN THE SAN PHAM — DA AN (06-10-2026 theo yeu cau).
 *
 * Day la dong "Khuon linh kien" nho nam ngay TREN ten san pham, do Astra in ra voi class
 * `.ast-woo-product-category`.
 *
 * LICH SU:
 *   - Truoc 06-10-2026: theme khong co rule nao cho class nay, nen no an theo
 *     `text-align: left` mac dinh cua Astra va don ve trai.
 *   - 06-10-2026 (lan 1): can giua cho thang hang voi nut "Lien he bao gia" o day the.
 *   - 06-10-2026 (lan 2): AN HAN theo yeu cau — trong the chi con anh, ten san pham, nut.
 *
 * ⚠️ AN BANG CSS (`display: none`), KHONG xoa khoi DOM.
 * Class nay do Astra sinh ra ben trong `ul.products`. Muon bo han markup phai loc qua hook
 * `astra_woo_shop_product_structure` trong functions.php — lam vay mat luon link danh muc
 * (link noi bo co ich) va phuc tap hon. An bang CSS thi doi y dinh chi can sua dung rule nay.
 *
 * Pham vi: CHI luoi san pham (`#main ul.products li.product`), khong dung tới noi khac.
 * Trang CHI TIET san pham van con dong "Danh muc: ..." trong khoi thong tin — do la markup
 * khac (`.product_meta`), khong dinh rule nay.
 *
 * Dung tien to `#main ul.products li.product` (1,3,1) de thang CSS mac dinh cua Astra ma
 * khong can `!important`.
 */
#main ul.products li.product .ast-woo-product-category {
	display: none;
}

/*
 * --- NĂ„â€šĂ‚Âºt "LiĂ„â€šĂ‚Âªn hÄ‚Â¡Ă‚Â»Ă¢â‚¬Â¡ bĂ„â€šĂ‚Â¡o giĂ„â€šĂ‚Â¡" trĂ„â€šĂ‚Âªn thÄ‚Â¡Ă‚ÂºĂ‚Â» sÄ‚Â¡Ă‚ÂºĂ‚Â£n phÄ‚Â¡Ă‚ÂºĂ‚Â©m ---
 *
 * TRÄ‚â€ Ă‚Â¯Ä‚Â¡Ă‚Â»Ă‚ÂšC: nĂ„â€šĂ‚Âºt mang mĂ u xanh dÄ‚â€ Ă‚Â°Ä‚â€ Ă‚Â¡ng (#046bd2, `--ast-global-color-0` cÄ‚Â¡Ă‚Â»Ă‚Â§a Astra) Ä‚Â¢Ă¢â€šÂ¬Ă¢â‚¬Â lÄ‚Â¡Ă‚ÂºĂ‚Â¡c tĂ´ng hoĂ n
 * toĂ n vÄ‚Â¡Ă‚Â»Ă¢â‚¬Âºi xanh lĂ„â€šĂ‚Â¡ thÄ‚â€ Ă‚Â°Ä‚â€ Ă‚Â¡ng hiÄ‚Â¡Ă‚Â»Ă¢â‚¬Â¡u.
 * NAY: dĂ„â€šĂ‚Â¹ng biÄ‚Â¡Ă‚ÂºĂ‚Â¿n `--ez-quote-bg` (#015c05) theo mĂ u chÄ‚Â¡Ă‚Â»Ă‚Â§ shop chÄ‚Â¡Ă‚Â»Ă‚Ân. ViÄ‚Â¡Ă‚Â»Ă‚Ân cÅ©ng Ä‚â€žĂ¢â‚¬ËœÄ‚Â¡Ă‚Â»Ă¢â‚¬Â¢i theo, nÄ‚Â¡Ă‚ÂºĂ‚Â¿u
 * khĂ´ng sÄ‚Â¡Ă‚ÂºĂ‚Â½ cĂ„â€šĂ‚Â²n viÄ‚Â¡Ă‚Â»Ă‚Ân xanh dÄ‚â€ Ă‚Â°Ä‚â€ Ă‚Â¡ng quanh nĂ„â€šĂ‚Âºt.
 */
/*
 * KIỂU NÚT (06-10-2026): VIỀN XANH · RUỘT TRẮNG · CHỮ XANH — theo yêu cầu chủ shop.
 *
 * TRƯỚC: nền đặc `--ez-quote-bg`, chữ trắng.
 * NAY  : nền trắng, viền `--ez-quote-bg`, chữ `--ez-quote-bg`.
 *
 * Tương phản chữ xanh #015c05 trên nền trắng = 8.29:1 (chuẩn AA cần 4.5:1) — đọc tốt.
 * Viền xanh trên nền trắng = 8.29:1 (chuẩn cho đồ hoạ cần 3:1) — thấy rõ.
 *
 * ⚠️ BA DÒNG CUỐI LÀ ĐỂ CĂN GIỮA — thiếu là nút dính mép trái.
 * `.astra-shop-summary-wrap` là flex CỘT (xem khối bên trên), mà mục flex trong cột mặc định
 * bị `align-items: stretch` kéo giãn hết chiều ngang. Nút giãn hết chiều ngang thì không thể
 * "căn giữa" được nữa — nó ĐÃ chiếm cả hàng, nhìn như dính trái.
 *   - `align-self: center`  : thu nút về đúng bề rộng chữ rồi đặt vào giữa hàng.
 *   - `width: fit-content`  : chốt bề rộng theo nội dung.
 *   - `max-width: 100%`     : tên nút dài vẫn không tràn ra ngoài thẻ.
 *
 * `margin-top: auto` ở khối trên vẫn giữ tác dụng — vẫn đẩy nút xuống đáy thẻ cho các nút
 * thẳng hàng nhau. `align-self` chỉ can thiệp trục NGANG, không ảnh hưởng trục dọc.
 */
#main ul.products li.product .ast-on-card-button,
#main ul.products li.product a.button,
#main ul.products li.product .button {
	align-self: center;
	width: fit-content;
	max-width: 100%;
	background-color: #fff;
	/*
	 * PHẢI ghi đủ `border: 1px solid ...`, KHÔNG chỉ `border-color`.
	 *
	 * Không rule nào trong theme đặt ĐỘ DÀY viền cho nút này, nên viền = 0px. Chỉ đổi
	 * `border-color` (như bản trước) thì KHÔNG thấy viền nào — đo thật: `vien=rgb(1,92,5) 0px`.
	 * Viết đủ `border` mới ra được kiểu "viền xanh, ruột trắng" mà chủ shop yêu cầu.
	 */
	border: 1px solid var(--ez-quote-bg);
	color: var(--ez-quote-bg);
}

#main ul.products li.product .ast-on-card-button:hover,
#main ul.products li.product a.button:hover,
#main ul.products li.product .button:hover,
#main ul.products li.product .ast-on-card-button:focus,
#main ul.products li.product a.button:focus,
#main ul.products li.product .button:focus {
	background-color: var(--ez-green-dark);
	border-color: var(--ez-green-dark);
	color: #fff;
}

/*
 * ẨN NÚT "GIỎ HÀNG" HIỆN TRÊN ẢNH KHI RÊ CHUỘT (06-10-2026 theo yêu cầu).
 *
 * Đây là nút Astra tự chèn vào ảnh sản phẩm (`.ast-on-card-button` nằm TRONG
 * `.astra-shop-thumbnail-wrap`). Nó chỉ hiện khi rê chuột, gồm 2 phần:
 *   - `.ast-icon.icon-bag`       : hình cái túi — thứ chủ shop thấy và không muốn
 *   - `.ast-card-action-tooltip` : chữ "Liên hệ báo giá" hiện kèm bên trái
 *
 * Shop này KHÔNG bán online (không cần giỏ hàng), mọi liên hệ đi qua nút "Liên hệ báo giá"
 * ở ĐÁY thẻ — nút đó là thẻ `<a class="button ez-quote-btn">` RIÊNG, không bị rule này ảnh
 * hưởng (đã kiểm tra DOM thật: 2 phần tử khác nhau, không lồng nhau).
 *
 * `display: none` để bỏ cả nút lẫn chữ chú thích của nó. Dùng selector có tiền tố
 * `#main ul.products li.product` (độ ưu tiên 1,3,2) để thắng CSS động của Astra mà không
 * cần `!important`.
 */
#main ul.products li.product .ast-on-card-button {
	display: none;
}

/* ===========================================================================
 * TRANG LIÊN HỆ (/lien-he/) — shortcode [ez_khuon_lien_he]
 *
 * Bố cục 2 CỘT: trái = thông tin + địa chỉ, phải = bản đồ Google.
 *
 * Dùng `grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr)` để cột bản đồ rộng hơn
 * chút (bản đồ cần chỗ hơn chữ). `minmax(0, …)` chứ KHÔNG viết `1fr` trần: `1fr` mặc định
 * có `min-width: auto`, nếu iframe bên trong rộng hơn cột thì cả lưới bị đẩy tràn ra ngoài.
 *
 * Vì sao viết trong ez-shop.css mà không phải ez-home.css: đây là CSS của MỘT TRANG riêng
 * (không thuộc trang chủ). ez-shop.css là stylesheet nền của cả site nên đúng chỗ hơn.
 * =========================================================================== */

.ezk-lh {
	margin: 0 0 10px;
}

.ezk-lh-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
	gap: 34px;
	align-items: start;
}

.ezk-lh-cot {
	min-width: 0;
}

/* --- Cột trái: thông tin --- */

.ezk-lh-ten {
	margin: 0 0 10px;
	font-family: var(--ez-font);
	font-size: 23px;
	font-weight: 800;
	line-height: 1.3;
	color: var(--ez-green-dark);
}

.ezk-lh-mo-ta {
	margin: 0 0 20px;
	font-size: 15px;
	line-height: 1.75;
	color: #3a3a3a;
}

.ezk-lh-ds {
	margin: 0 0 14px;
	padding: 0;
	list-style: none;
}

.ezk-lh-dong {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 9px;
	margin: 0 0 9px;
	font-size: 15px;
	line-height: 1.6;
	color: #333;
}

/* Icon nhỏ màu vàng, cùng kiểu với cột liên hệ ở footer cho nhất quán. */
.ezk-lh-ico {
	flex: 0 0 auto;
	color: var(--ez-green);
	font-size: 16px;
	line-height: 1.3;
}

.ezk-lh-dong a {
	color: #333;
	font-weight: 600;
	text-decoration: none;
}

.ezk-lh-dong a:hover,
.ezk-lh-dong a:focus {
	color: var(--ez-quote-bg);
	text-decoration: underline;
}

.ezk-lh-chu {
	color: #7a7a7a;
	font-size: 13.5px;
}

.ezk-lh-nut {
	margin: 22px 0 0;
}

/* --- Cột phải: bản đồ --- */

.ezk-lh-bando {
	position: relative;
	overflow: hidden;
	border-radius: var(--ez-radius);
	border: 1px solid var(--ez-line);
	background: var(--ez-green-pale);
	/* Bản đồ luôn cùng tỉ lệ 4:3 — đổi số này thì cả iframe co theo, không bị nhảy chiều cao. */
	aspect-ratio: 4 / 3;
}

.ezk-lh-bando iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

.ezk-lh-bando--trong {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	text-align: center;
}

.ezk-lh-bando--trong p {
	margin: 0;
	font-size: 14px;
	line-height: 1.6;
	color: #5a5a5a;
}

/* --- Điện thoại / máy tính bảng: về MỘT cột, bản đồ xuống dưới --- */
@media (max-width: 900px) {
	.ezk-lh-grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 26px;
	}

	.ezk-lh-ten {
		font-size: 20px;
	}

	.ezk-lh-bando {
		aspect-ratio: 16 / 10;
	}
}
/* ===========================================================================
 * KHỐI TIÊU ĐỀ TRANG DANH MỤC SẢN PHẨM — làm đẹp (06-10-2026)
 *
 * TRƯỚC: trang danh mục chỉ có breadcrumb + tiêu đề + mô tả nằm trơ trên nền trắng, nhìn
 * đơn điệu.
 * NAY: bo lại thành MỘT THẺ có nền xanh nhạt, bo góc, kèm vạch nhấn và hoạ tiết mờ.
 *
 * ⚠️ BO CẢ CỤM, KHÔNG BO RIÊNG `<header>`.
 * Trong DOM, breadcrumb (`nav.woocommerce-breadcrumb`) nằm NGOÀI
 * `header.woocommerce-products-header`:
 *     div.ast-woocommerce-container
 *       ├ nav.woocommerce-breadcrumb
 *       ├ header.woocommerce-products-header   (chỉ có <h1> và mô tả)
 *       └ ul.products
 * Nếu chỉ bo `<header>` thì breadcrumb bị bỏ lại bên ngoài, nhìn rời rạc.
 *
 * ⚠️ CHỈ ÁP KHI KHÔNG CÓ SIDEBAR (`.ast-no-sidebar`).
 * Trang danh mục của site này không có sidebar nên breadcrumb là CON TRỰC TIẾP của
 * `.ast-woocommerce-container`. Nếu sau này bật sidebar, cấu trúc đổi và selector
 * `>` sẽ không khớp — lúc đó khối tự trở về kiểu cũ, KHÔNG vỡ bố cục.
 *
 * Hoạ tiết: hai vòng sáng mờ (radial-gradient) + lưới chấm nhỏ. Đều là nền CSS nên không
 * tốn thêm ảnh, không phải tải gì.
 * =========================================================================== */

.ast-no-sidebar .ast-woocommerce-container > .woocommerce-breadcrumb {
	margin: 0;
	padding: 22px 30px 0;
	border-radius: var(--ez-radius) var(--ez-radius) 0 0;
	background: var(--ez-green-pale);
	color: #6b6b6b;
	font-size: 13px;
	line-height: 1.5;
}

.ast-no-sidebar .ast-woocommerce-container > .woocommerce-breadcrumb a {
	color: #6b6b6b;
	text-decoration: none;
}

.ast-no-sidebar .ast-woocommerce-container > .woocommerce-breadcrumb a:hover,
.ast-no-sidebar .ast-woocommerce-container > .woocommerce-breadcrumb a:focus {
	color: var(--ez-quote-bg);
	text-decoration: underline;
}

.ast-no-sidebar .ast-woocommerce-container > .woocommerce-products-header {
	position: relative;
	overflow: hidden;
	margin: 0 0 26px;
	padding: 8px 30px 24px;
	border-radius: 0 0 var(--ez-radius) var(--ez-radius);
	background: var(--ez-green-pale);
}

/* Vạch nhấn xanh bên trái — chạy suốt chiều cao thẻ. */
.ast-no-sidebar .ast-woocommerce-container > .woocommerce-products-header::before {
	content: "";
	position: absolute;
	left: 0;
	top: 16px;
	bottom: 16px;
	width: 5px;
	border-radius: 0 4px 4px 0;
	background: var(--ez-green);
}

/* Hoạ tiết: vòng sáng góc phải + lưới chấm góc trái. */
.ast-no-sidebar .ast-woocommerce-container > .woocommerce-products-header::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background:
		radial-gradient( 60% 150% at 100% 0%, rgba(19, 122, 24, 0.10) 0%, rgba(19, 122, 24, 0) 62% ),
		radial-gradient( 3px 3px at 1px 1px, rgba(19, 122, 24, 0.14) 0%, rgba(19, 122, 24, 0) 100% );
	background-size: auto, 22px 22px;
	background-position: 0 0, 18px 100%;
}

/* Nội dung phải nằm TRÊN lớp hoạ tiết, nếu không chấm sẽ phủ lên chữ. */
.ast-no-sidebar .ast-woocommerce-container > .woocommerce-products-header > * {
	position: relative;
	z-index: 1;
}

.woocommerce-products-header__title.page-title {
	margin: 0;
	font-family: var(--ez-font);
	font-size: 32px;
	font-weight: 800;
	line-height: 1.22;
	letter-spacing: -0.2px;
	color: var(--ez-green-dark);
}

/* Mô tả danh mục (nếu có) — chữ nhẹ hơn, có vạch ngăn cách với tiêu đề. */
.ast-no-sidebar .woocommerce-products-header .term-description {
	margin: 14px 0 0;
	padding-top: 14px;
	border-top: 1px solid rgba(19, 122, 24, 0.16);
	max-width: 78ch;
	color: #4a4a4a;
	font-size: 15px;
	line-height: 1.7;
}

.ast-no-sidebar .woocommerce-products-header .term-description p {
	margin: 0 0 10px;
}

.ast-no-sidebar .woocommerce-products-header .term-description p:last-child {
	margin-bottom: 0;
}

/* Dòng "Hiển thị 1–12 của 26 kết quả" nằm riêng, sát lưới sản phẩm. */
.ast-no-sidebar .ast-woocommerce-container > .woocommerce-result-count {
	margin: 0 0 16px;
	color: #6b6b6b;
	font-size: 14px;
}

@media (max-width: 782px) {
	.ast-no-sidebar .ast-woocommerce-container > .woocommerce-breadcrumb {
		padding: 16px 18px 0;
		font-size: 12px;
	}

	.ast-no-sidebar .ast-woocommerce-container > .woocommerce-products-header {
		padding: 6px 18px 18px;
		margin-bottom: 20px;
	}

	.woocommerce-products-header__title.page-title {
		font-size: 23px;
	}

	.ast-no-sidebar .ast-woocommerce-container > .woocommerce-products-header::before {
		top: 12px;
		bottom: 12px;
		width: 4px;
	}
}