/* ==========================================================================
   PALCLE GALLERIA — WordPress-only corrections on top of cf-main.css.
   cf-main.css is the ported storefront stylesheet and is never edited; anything
   that only exists because this is WordPress (admin bar, block editor output,
   comment markup) belongs here, plus the rules the Shopify header section used
   to print inline.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Carried over from the inline <style> of sections/cf-header.liquid
   -------------------------------------------------------------------------- */
.cf-quicklinks__list li[data-cf-dropdown] { position: relative; display: flex; align-items: center; }
.cf-quicklinks__list li[data-cf-dropdown] > a { padding-right: 6px; }
.cf-quicklinks__toggle { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; margin-right: 4px; border: 0; border-radius: 6px; background: transparent; color: rgba(255,255,255,.85); cursor: pointer; }
.cf-quicklinks__toggle:hover, .cf-quicklinks__toggle[aria-expanded="true"] { background: rgba(255,255,255,.12); color: #fff; }
.cf-quicklinks__list .cf-dropdown { left: 0; right: auto; top: calc(100% + 6px); width: max-content; min-width: 230px; max-width: 320px; }
.cf-quicklinks__list .cf-dropdown a { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px; font-size: 14px; font-weight: 500; color: var(--cf-text); white-space: normal; }
.cf-quicklinks__list .cf-dropdown a:hover { background: var(--cf-light); color: var(--cf-green); }

.cf-miniprod__placeholder { display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; color: rgba(var(--cf-green-rgb), .35); background: var(--cf-light); }
.cf-miniprod__price ins { text-decoration: none; }

/* The green bar scrolls instead of overflowing the viewport: "Products" stays pinned
   left, the support address stays pinned right. */
.cf-navbar__products { flex-shrink: 0; }
.cf-quicklinks { min-width: 0; flex: 1 1 auto; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.35) transparent; }
.cf-quicklinks::-webkit-scrollbar { height: 5px; }
.cf-quicklinks::-webkit-scrollbar-thumb { background: rgba(255,255,255,.35); border-radius: 999px; }
.cf-quicklinks::-webkit-scrollbar-track { background: transparent; }
.cf-quicklinks__list { flex-wrap: nowrap; }
.cf-navbar__right { flex-shrink: 0; }

/* Product cards without an image (the Liquid snippet inlined this). */
.cf-card__placeholder { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.cf-placeholder--cart { display: flex; align-items: center; justify-content: center; width: 72px; height: 72px; border-radius: 10px; }

/* --------------------------------------------------------------------------
   Admin bar
   -------------------------------------------------------------------------- */
body.admin-bar.cf-sticky .cf-header__main { top: 32px; }
body.admin-bar.cf-sticky .cf-mega { top: calc(var(--cf-header-h) + 32px); }
body.admin-bar .cf-drawer__panel,
body.admin-bar .cf-cartdrawer__panel,
body.admin-bar .cf-shop__sidebar { top: 32px; }
@media screen and (max-width: 782px) {
	body.admin-bar.cf-sticky .cf-header__main { top: 46px; }
	body.admin-bar.cf-sticky .cf-mega { top: calc(var(--cf-header-h) + 46px); }
	body.admin-bar .cf-drawer__panel,
	body.admin-bar .cf-cartdrawer__panel,
	body.admin-bar .cf-shop__sidebar { top: 46px; }
}
@media screen and (max-width: 600px) {
	body.admin-bar.cf-sticky .cf-header__main { top: 0; }
}

/* --------------------------------------------------------------------------
   Block editor output inside .cf-prose
   -------------------------------------------------------------------------- */
.cf-prose > * { max-width: 100%; }
.cf-prose .alignleft { float: left; margin: .3em 1.5em 1em 0; }
.cf-prose .alignright { float: right; margin: .3em 0 1em 1.5em; }
.cf-prose .aligncenter { display: block; margin-left: auto; margin-right: auto; }
.cf-prose .alignwide { width: min(100%, 1100px); margin-left: auto; margin-right: auto; }
.cf-prose .alignfull { width: 100%; }
.cf-prose figure { margin: 1.5em 0; }
.cf-prose figcaption, .cf-prose .wp-caption-text { margin-top: .6em; font-size: 13px; color: var(--cf-muted); text-align: center; }
.cf-prose .wp-block-image img, .cf-prose .wp-caption img { border-radius: 14px; }
.cf-prose .wp-block-button__link { display: inline-block; padding: 11px 20px; border-radius: 12px; background: var(--cf-green); color: #fff; font-weight: 600; text-decoration: none; }
.cf-prose .wp-block-quote, .cf-prose .wp-block-pullquote { margin: 1.5em 0; padding: 14px 22px; border-left: 4px solid var(--cf-accent); background: var(--cf-light); border-radius: 0 12px 12px 0; }
.cf-prose pre, .cf-prose .wp-block-code { overflow-x: auto; padding: 16px 18px; border-radius: 14px; background: var(--cf-light); border: 1px solid var(--cf-border); font-size: 13.5px; }
.cf-prose .wp-block-embed__wrapper, .cf-prose .wp-block-embed iframe { max-width: 100%; }
.cf-prose .wp-block-table { overflow-x: auto; }
.cf-prose::after { content: ""; display: block; clear: both; }

/* --------------------------------------------------------------------------
   Comments
   -------------------------------------------------------------------------- */
.cf-comments__list, .cf-comments__list .children { list-style: none; margin: 0; padding: 0; }
.cf-comments__list .children { margin-left: 22px; }
.cf-comments .comment-meta { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; font-size: 13px; color: var(--cf-muted); }
.cf-comments .comment-author img { border-radius: 50%; }
.cf-comments .comment-author .fn { font-style: normal; font-weight: 700; color: var(--cf-text-strong); }
.cf-comments .comment-content { font-size: 15px; line-height: 1.7; }
.cf-comments .comment-form { margin-top: 24px; display: grid; gap: 14px; }
.cf-comments .comment-form p { margin: 0; }
.cf-comments .comment-form label { display: block; font-weight: 600; font-size: 14px; margin-bottom: 4px; color: var(--cf-text-strong); }
.cf-comments .comment-form .form-submit { margin-top: 4px; }
.cf-comments .comment-reply-link { font-weight: 600; }
.cf-comments .comment-respond > .comment-reply-title { font-size: 1.15rem; color: var(--cf-dark); }

/* --------------------------------------------------------------------------
   Small WordPress bits
   -------------------------------------------------------------------------- */
.search-form .search-submit { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.navigation.pagination .nav-links { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.navigation.pagination .screen-reader-text { display: none; }
.navigation.comments-pagination { margin: 20px 0; }
.cf-main > .cf-section:first-child { padding-top: 40px; }
.cf-wcpage .woocommerce-notices-wrapper:empty { display: none; }
.cf-wcpage .entry-content > h2:first-child { margin-top: 0; }

/* The search results page stacks two result groups. */
.cf-main .cf-h2 + ul.products, .cf-main .cf-h2 + .cf-blog__grid { margin-top: 18px; }
.cf-main .cf-h2 { margin-top: 8px; }
.cf-main ul.products + .cf-h2 { margin-top: 44px; }

/* --------------------------------------------------------------------------
   Narrow phones (360px): keep every shell element inside the viewport.
   -------------------------------------------------------------------------- */
@media (max-width: 400px) {
	.cf-header__row { gap: 8px; }
	.cf-logo svg, .cf-logo img { max-width: 160px; height: 34px; }
	.cf-search__input { font-size: 16px; }
	.cf-drawer__panel { width: min(320px, 92vw); }
	.cf-tiles { gap: 10px; }
	.cf-tile__text { padding: 12px 10px 14px; }
	.cf-brand-grid, .cf-collection-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
	.cf-404__code { font-size: 3.4rem; }
	.cf-post__tags a { font-size: 12px; }
	.cf-footer__bottominner { font-size: 12px; }
}

/* ---------------------------------------------------------------------
 * Trang nhieu chu (trang tinh + bai viet): gioi han be ngang cot chu de
 * khong chay sat hai mep. Dung dung modifier co san cua bo giao dien
 * (.cf-container--narrow = 860px) va keo tieu de trang ve cung mot mep.
 * ------------------------------------------------------------------ */
body.page .cf-page-hero .cf-container,
body.single-post .cf-page-hero .cf-container {
	max-width: 860px;
}

body.page .cf-prose,
body.single-post .cf-prose {
	max-width: 100%;
}

/* Bang trong trang chinh sach: cho phep cuon ngang thay vi tran ra ngoai. */
body.page .cf-prose table,
body.single-post .cf-prose table {
	display: block;
	width: 100%;
	overflow-x: auto;
	border-collapse: collapse;
}

@media (max-width: 640px) {
	body.page .cf-container.cf-section,
	body.single-post .cf-container.cf-section {
		padding-left: 18px !important;
		padding-right: 18px !important;
	}
}

/* ---------------------------------------------------------------------
 * Trang san pham: luoi .cf-product__grid da chia cot (5fr anh / 7fr mo ta),
 * nhung WooCommerce van ep div.summary rong 48% va float:right nen cot phai
 * chi dung nua cho, tro nen lech so voi anh. Tra lai cho no dung be rong cot.
 * ------------------------------------------------------------------ */
.woocommerce div.product div.summary,
.woocommerce-page div.product div.summary,
.woocommerce #content div.product div.summary {
	float: none;
	width: 100%;
	clear: none;
	margin-bottom: 0;
}

.woocommerce div.product div.images,
.woocommerce-page div.product div.images,
.woocommerce #content div.product div.images {
	float: none;
	width: 100%;
	margin-bottom: 0;
}

/* Doan mo ta ngan doc de chiu hon khi cot rong ra. */
.cf-product__excerpt,
.cf-product__lead {
	max-width: 68ch;
}

/* ---------------------------------------------------------------------
 * Logo phuong thuc thanh toan o chan trang: dung anh that thay vi chu.
 * Nen trang de logo Visa/Amex (von mau xanh dam) doc duoc tren nen xanh la.
 * ------------------------------------------------------------------ */
.cf-payments {
	align-items: center;
	gap: 5px;
}

.cf-payments .cf-payment-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 2px 4px;
	border-radius: 4px;
	background: #fff;
	border: 1px solid rgba(255, 255, 255, .18);
	line-height: 0;
	font-size: 0;
}

.cf-payments .cf-payment-icon img {
	display: block;
	height: 15px;
	width: auto;
	max-width: none;
}

@media (max-width: 640px) {
	.cf-payments .cf-payment-icon img { height: 13px; }
	.cf-payments { gap: 4px; }
}

/* ---------------------------------------------------------------------
 * Trang Ho tro dung bo cuc 2 cot (form + the thong tin) nen giu be ngang
 * day du, khong thu hep 860px nhu cac trang chi co chu.
 * ------------------------------------------------------------------ */
body.page-template-page-contact .cf-page-hero .cf-container {
	max-width: var(--cf-container);
}

body.page-template-page-contact .cf-contact-intro {
	max-width: 780px;
}

.cf-contact-form form button[type="submit"] {
	min-width: 190px;
}

.cf-contact-links {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

/* ---------------------------------------------------------------------
 * Nhan SALE tren trang danh muc/cua hang.
 * WooCommerce dat nhan o goc phai voi margin am (top:0;right:0;margin:-.5em)
 * va ep thanh hinh tron (min-width:3.236em) -> nhan tran ra ngoai the va BI CAT.
 * Cac quy tac duoi day co do uu tien cao hon de tra nhan ve dung kieu cua thiet ke:
 * vien bo tron, mau cam, nam gon trong goc trai tren cua anh.
 * ------------------------------------------------------------------ */
.woocommerce ul.products li.product .cf-card__media .onsale,
.woocommerce-page ul.products li.product .cf-card__media .onsale,
.woocommerce ul.products li.product .cf-card__media .cf-badge,
.woocommerce span.onsale.cf-badge {
	position: absolute;
	top: 12px;
	left: 12px;
	right: auto;
	bottom: auto;
	margin: 0;
	min-width: 0;
	min-height: 0;
	width: auto;
	height: auto;
	padding: 4px 10px;
	border-radius: 999px;
	line-height: 1.4;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .03em;
	text-transform: uppercase;
	text-align: center;
	background: var(--cf-orange);
	color: #fff;
	z-index: 2;
}

/* Nhan "het hang" van nam ben phai nhu thiet ke goc. */
.woocommerce ul.products li.product .cf-card__media .cf-badge--out,
.woocommerce-page ul.products li.product .cf-card__media .cf-badge--out {
	left: auto;
	right: 12px;
	background: #374151;
}

/* Phong khi the bi cat mep: cho phep nhan hien day du. */
.cf-card .cf-card__media {
	overflow: hidden;
}

@media (max-width: 480px) {
	.woocommerce ul.products li.product .cf-card__media .onsale,
	.woocommerce span.onsale.cf-badge {
		top: 8px;
		left: 8px;
		padding: 3px 8px;
		font-size: 10px;
	}
}

/* ------------------------------------------------------------------
 * Quick checkout: "Buy it now" under Add to cart, Checkout at the top of the cart drawer
 * ------------------------------------------------------------------ */
.woocommerce div.product form.cart .woocommerce-variation-add-to-cart { flex-wrap: wrap; }
.woocommerce div.product form.cart .button.cf-buynow {
	flex: 1 0 100%;
	height: 54px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 22px !important;
	border: 0;
	border-radius: 12px !important;
	background: var(--cf-orange) !important;
	color: #fff !important;
	font-family: var(--cf-font);
	font-size: 17px;
	font-weight: 700;
	letter-spacing: .01em;
	transition: background .15s, box-shadow .15s, transform .15s;
}
.woocommerce div.product form.cart .button.cf-buynow:hover { background: #ea580c !important; box-shadow: var(--cf-shadow-medium); transform: translateY(-1px); }
.woocommerce div.product form.cart .button.cf-buynow.disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }
@media (max-width: 640px) {
	.woocommerce div.product form.cart .button.cf-buynow { font-size: 15px; }
}

.cf-mini-cart__top {
	display: grid;
	gap: 10px;
	margin: 0 0 16px;
	padding: 14px;
	border: 1px solid rgba(var(--cf-green-rgb), .18);
	border-radius: var(--cf-radius);
	background: var(--cf-mint);
}
.cf-mini-cart__topline {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin: 0;
	font-size: 14px;
	color: var(--cf-text);
}
.cf-mini-cart__topline strong { font-size: 17px; color: var(--cf-text-strong); }
.cf-mini-cart__checkout {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 50px;
	border-radius: 12px;
	background: var(--cf-green);
	color: #fff !important;
	font-size: 16px;
	font-weight: 700;
	text-decoration: none !important;
	transition: background .15s;
}
.cf-mini-cart__checkout:hover { background: var(--cf-medium); }
.cf-mini-cart__continue {
	height: 44px;
	border: 1px solid var(--cf-border);
	border-radius: 12px;
	background: #fff;
	color: var(--cf-text-strong);
	font-family: var(--cf-font);
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
}
.cf-mini-cart__continue:hover { border-color: var(--cf-green); color: var(--cf-green); }

/* Cart drawer quantity stepper: larger touch targets than the storefront's 22px buttons */
.cf-mini-cart .woocommerce-mini-cart-item .quantity.cf-mini-qty { gap: 6px; margin-top: 8px; padding-right: 0; overflow: visible; border-radius: 0; }
.cf-mini-cart .cf-mini-qty .cf-qty-btn { width: 30px; height: 30px; border-radius: 8px; }
.cf-mini-cart .cf-mini-qty .cf-qty-btn:disabled { opacity: .35; cursor: not-allowed; border-color: var(--cf-border); color: var(--cf-muted); }
.cf-mini-cart .cf-mini-qty input.qty { width: 40px !important; height: 30px !important; font-size: 15px; font-weight: 700; }
.cf-mini-cart .cf-mini-qty__price { font-size: 15px; }
.cf-mini-cart .woocommerce-mini-cart-item.is-updating { opacity: .55; pointer-events: none; transition: opacity .15s; }

/* ---- Huy hieu App Store o chan trang (them 2026-09-28) ---- */
.cf-appstore { margin-top: 20px; }
.cf-appstore__label { margin: 0 0 8px; font-size: 13px; color: rgba(255,255,255,.72); }
.cf-appstore__badge { display: inline-block; line-height: 0; transition: opacity .2s, transform .2s; }
.cf-appstore__badge:hover { opacity: .82; transform: translateY(-1px); }
.cf-appstore__badge img { display: block; width: 140px; height: auto; }
body.palcle-app .cf-appstore { display: none; }

/* ---- Bang anh dau trang chu tren dien thoai (them 2026-09-28) ---- */
.cf-hslider { display: none; }
@media screen and (max-width: 782px) {
	.cf-hero:has(.cf-hslider) { padding-top: 0; }
	.cf-hero:has(.cf-hslider) .cf-hero__head { display: none; }
	.cf-hslider { display: block; position: relative; margin: 0 calc(50% - 50vw) 26px; overflow: hidden; background: var(--cf-light); }
	.cf-hslider__track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
	.cf-hslider__track::-webkit-scrollbar { display: none; }
	.cf-hslider__slide { position: relative; flex: 0 0 100%; scroll-snap-align: start; aspect-ratio: 16 / 9; min-height: 230px; max-height: 62vh; }
	.cf-hslider__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
	.cf-hslider__body { position: absolute; left: 0; right: 0; bottom: 0; padding: 56px 20px 26px; background: linear-gradient(180deg, rgba(18,28,22,0) 0%, rgba(18,28,22,.38) 40%, rgba(18,28,22,.66) 100%); }
	.cf-hslider__title, .cf-hslider__sub { text-shadow: 0 1px 2px rgba(0,0,0,.35), 0 2px 14px rgba(0,0,0,.25); }
	.cf-hslider__title { margin: 0; font-size: clamp(1.65rem, 7.2vw, 2.25rem); font-weight: 800; line-height: 1.05; letter-spacing: -0.02em; text-transform: uppercase; color: #FFFFFF; }
	.cf-hslider__sub { margin: 6px 0 14px; font-size: 15px; font-weight: 500; color: rgba(246, 241, 231, .95); }
	.cf-hslider__btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 20px; border-radius: 10px; font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; }
	.cf-hslider__btn svg { width: 16px; height: 16px; }
	.cf-hslider__dots { position: absolute; left: 0; right: 0; bottom: 10px; display: flex; justify-content: center; gap: 7px; pointer-events: none; }
	.cf-hslider__dot { width: 8px; height: 8px; border-radius: 50%; border: 0; padding: 0; background: rgba(22, 101, 52, .28); pointer-events: auto; transition: background .2s, transform .2s; }
	.cf-hslider__dot.is-active { background: var(--cf-green); transform: scale(1.25); }
}
.cf-hslider__kicker { display: none; }
@media screen and (max-width: 782px) {
	.cf-hslider__kicker { display: block; text-align: center; margin: 0 0 22px; font-size: clamp(1.35rem, 6vw, 1.7rem); font-weight: 800; letter-spacing: .02em; text-transform: uppercase; color: var(--cf-green); }
	.cf-hslider__kicker span { display: inline-block; padding-bottom: 8px; border-bottom: 4px solid var(--cf-green); }
}

/* ==== PALETTE REFRESH 2026-09-28 — xanh rung + kem + dat nung (xoa tu day den END de quay ve mau cu) ==== */
:root {
	--cf-green: #1F4D3A; --cf-green-rgb: 31, 77, 58; --cf-medium: #2B6B4F; --cf-dark: #183528; --cf-darker: #10261C;
	--cf-accent: #3E8E6A; --cf-leaf: #8FBFA6; --cf-orange: #C9613A; --cf-lime: #C9613A;
	--cf-mint: #EEF3EE; --cf-light: #FAF7F2; --cf-neutral: #F1ECE3; --cf-bg: #FFFDF9;
	--cf-border: #E7E1D6; --cf-border-2: #D6CEC0; --cf-text: #3F4A45; --cf-text-strong: #1B241F; --cf-muted: #7A837E;
	--cf-shadow-soft: 0 4px 20px rgba(24, 53, 40, .06); --cf-shadow-medium: 0 10px 30px rgba(24, 53, 40, .12); --cf-shadow-heavy: 0 18px 48px rgba(24, 53, 40, .16);
}
body { background: var(--cf-bg); }
/* Nut: mot mau xanh rung, bo dai mau neon */
.cf-btn--grad { background: var(--cf-green); }
.cf-btn--grad:hover { background: var(--cf-medium); }
/* ==== END PALETTE REFRESH ==== */

/* ---- Bang anh dau trang chu tren MAY TINH (them 2026-09-28): dat tren dong Welcome, giu nguyen moi thu ben duoi ---- */
@media screen and (min-width: 783px) {
	.cf-hslider { display: block; position: relative; margin: 6px 0 40px; border-radius: var(--cf-radius-xl); overflow: hidden; box-shadow: var(--cf-shadow-medium); background: var(--cf-light); }
	.cf-hslider__track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
	.cf-hslider__track::-webkit-scrollbar { display: none; }
	.cf-hslider__slide { position: relative; flex: 0 0 100%; scroll-snap-align: start; height: clamp(340px, 31vw, 460px); overflow: hidden; }
	.cf-hslider__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 42%; display: block; transform-origin: 50% 45%; animation: cf-kenburns 22s ease-in-out infinite alternate; will-change: transform; }
	.cf-hslider__body { position: absolute; left: 0; right: 0; bottom: 0; padding: 120px 56px 48px; background: linear-gradient(180deg, rgba(18,28,22,0) 0%, rgba(18,28,22,.35) 45%, rgba(18,28,22,.68) 100%); }
	.cf-hslider__title { margin: 0; font-size: clamp(2.2rem, 3.6vw, 3.2rem); font-weight: 800; line-height: 1.05; letter-spacing: -0.02em; text-transform: uppercase; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.35), 0 2px 16px rgba(0,0,0,.25); }
	.cf-hslider__sub { margin: 10px 0 22px; font-size: clamp(1.05rem, 1.4vw, 1.3rem); font-weight: 500; color: rgba(246, 241, 231, .95); text-shadow: 0 1px 2px rgba(0,0,0,.35); }
	.cf-hslider__btn { display: inline-flex; align-items: center; gap: 10px; padding: 15px 28px; border-radius: 12px; font-size: 15px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
	.cf-hslider__btn svg { width: 18px; height: 18px; }
	.cf-hslider__dots { position: absolute; left: 0; right: 0; bottom: 16px; display: flex; justify-content: center; gap: 8px; pointer-events: none; }
	.cf-hslider__dot { width: 9px; height: 9px; border-radius: 50%; border: 0; padding: 0; background: rgba(255,255,255,.45); pointer-events: auto; transition: background .2s, transform .2s; }
	.cf-hslider__dot.is-active { background: #fff; transform: scale(1.3); }
	.cf-hslider__kicker { display: none; }
}
@keyframes cf-kenburns {
	0%   { transform: scale(1.02) translateX(-1.2%); }
	100% { transform: scale(1.10) translateX(1.2%); }
}
@media (prefers-reduced-motion: reduce) { .cf-hslider__img { animation: none; } }

/* ---- May tinh: hien TRON anh o giua, hai ben la chinh anh do lam mo (2026-09-28) ---- */
.cf-hslider__bg { display: none; }
@media screen and (min-width: 783px) {
	.cf-hslider__slide { height: auto; aspect-ratio: 16 / 9; max-height: 540px; background: var(--cf-darker); }
	.cf-hslider__bg { display: block; position: absolute; inset: -8%; width: 116%; height: 116%; object-fit: cover; object-position: center; filter: blur(26px) saturate(1.05) brightness(.8); transform-origin: 50% 50%; animation: cf-kenburns 26s ease-in-out infinite alternate; }
	.cf-hslider__img { object-fit: contain; object-position: center; animation: none; transform: none; will-change: auto; }
	.cf-hslider__body { padding-left: max(56px, calc(50% - 430px)); padding-right: 56px; }
}

/* ---- May tinh: dong chao + 3 cam ket nam TRONG bang anh; SHOP BY COLLECTION lam tieu de phan duoi (2026-09-28) ---- */
.cf-hslider__welcome { display: none; }
@media screen and (min-width: 783px) {
	.cf-hslider__welcome { display: block; position: absolute; left: 0; right: 0; bottom: 122px; padding: 0 56px 0 max(56px, calc(50% - 430px)); pointer-events: none; }
	.cf-hslider__eyebrow { margin: 0 0 6px; font-size: 14px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: rgba(246, 241, 231, .85); text-shadow: 0 1px 2px rgba(0,0,0,.35); }
	.cf-hslider__brand { margin: 0; font-size: clamp(2.4rem, 4vw, 3.6rem); font-weight: 800; line-height: 1; letter-spacing: -0.02em; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.35), 0 2px 18px rgba(0,0,0,.28); }
	.cf-hslider__tag { margin: 10px 0 16px; font-size: clamp(1.05rem, 1.4vw, 1.35rem); font-weight: 500; color: rgba(246, 241, 231, .95); text-shadow: 0 1px 2px rgba(0,0,0,.35); }
	.cf-hslider__usps { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
	.cf-hslider__usps li { display: inline-flex; align-items: center; gap: 8px; padding: 7px 13px; border-radius: 999px; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.22); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); color: #fff; font-size: 13px; font-weight: 600; }
	.cf-hslider__usps svg, .cf-hslider__usps img { width: 16px; height: 16px; flex: 0 0 16px; }
	.cf-hslider__body { padding-top: 250px; padding-bottom: 44px; background: linear-gradient(180deg, rgba(18,28,22,0) 0%, rgba(18,28,22,.42) 40%, rgba(18,28,22,.74) 100%); }
	.cf-hslider__title, .cf-hslider__sub { display: none; }
	.cf-hslider__kicker { display: block; text-align: center; margin: 44px 0 30px; font-size: clamp(1.6rem, 2.4vw, 2.2rem); font-weight: 800; letter-spacing: .02em; text-transform: uppercase; color: var(--cf-green); }
	.cf-hslider__kicker span { display: inline-block; padding-bottom: 8px; border-bottom: 4px solid var(--cf-green); }
}
@media screen and (min-width: 783px) {
	.cf-hslider__eyebrow { display: inline-block; margin: 0 0 10px; padding: 5px 12px; border-radius: 999px; background: rgba(24, 53, 40, .72); border: 1px solid rgba(255,255,255,.18); color: #fff; font-size: 12px; letter-spacing: .2em; text-shadow: none; }
}

/* ---- Slide co anh rong (>= 2.1:1): may tinh phu kin khung, khong can nen mo (2026-09-28) ---- */
.cf-hslider__slide picture { display: contents; }
@media screen and (min-width: 783px) {
	.cf-hslider__slide--wide { aspect-ratio: 2.37 / 1; max-height: 540px; }
	.cf-hslider__slide--wide .cf-hslider__img { object-fit: cover; object-position: center; }
	.cf-hslider__slide--wide .cf-hslider__bg { display: none; }
}

/* ---- Thanh dieu huong duoi: ap sat day man hinh, co dinh; o tim kiem nam trong thanh nay tren dien thoai (2026-09-28) ---- */
.cf-search__close { display: none; }
@media screen and (max-width: 1024px) {
	.cf-mobnav { left: 0; right: 0; bottom: 0; border-radius: 16px 16px 0 0; border-bottom: 0; box-shadow: 0 -6px 24px rgba(24, 53, 40, .12); padding: 6px 4px max(6px, env(safe-area-inset-bottom)); }
	body { padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
}
@media screen and (max-width: 768px) {
	/* Mac dinh an o tim kiem o dau trang de tiet kiem cho; bam nut Search o thanh duoi moi hien */
	.cf-search { display: none; }
	body.cf-msearch-open .cf-search { display: block; position: fixed; top: 0; left: 0; right: 0; z-index: 120; margin: 0; padding: max(10px, env(safe-area-inset-top)) 12px 12px; background: rgba(255, 253, 249, .98); box-shadow: 0 10px 30px rgba(0, 0, 0, .18); }
	body.cf-msearch-open .cf-search__form { margin-right: 50px; }
	body.cf-msearch-open .cf-search__panel { left: 12px; right: 12px; top: auto; max-height: 62vh; overflow: auto; border-radius: 0 0 14px 14px; }
	body.cf-msearch-open .cf-search__close { display: grid; place-items: center; position: absolute; top: max(10px, env(safe-area-inset-top)); right: 12px; width: 44px; height: 44px; border: 0; border-radius: 12px; background: var(--cf-neutral); color: var(--cf-dark); }
	body.cf-msearch-open [data-cf-msearch-toggle] .cf-mobnav__ico { background: var(--cf-green); color: #fff; }
}
/* Loi cu cua cf-main.js: tieu de "Popular searches" bi in 2 lan khi mo o tim kiem -> an ban trung */
.cf-sr__group > .cf-sr__title + .cf-sr__title { display: none; }

/* ---- iPhone: khong tu phong to trang khi bam vao o nhap; thanh duoi bam theo vung an toan (2026-09-28) ---- */
@media screen and (max-width: 768px) {
	input, select, textarea { font-size: max(16px, 1em); }
}
@media screen and (max-width: 1024px) {
	.cf-mobnav { bottom: env(safe-area-inset-bottom, 0px); padding-bottom: 6px; }
}

/* ---- Trang My account: bo khoang trong tren form, loi dan Dang ky/Dang nhap (2026-09-28) ---- */
.palcle-anchor { display: block; position: relative; top: -90px; height: 0; }
.palcle-auth-switch { margin: 16px 0 0; font-size: 14px; color: var(--cf-text); }
.palcle-auth-switch .button { display: inline-block; margin-left: 8px; }
.palcle-auth-note { margin: 0 0 14px; font-size: 14px; color: var(--cf-muted); }
.woocommerce-account .woocommerce-notices-wrapper:empty { display: none; margin: 0; }
.woocommerce-account #customer_login { margin-top: 0; }
@media screen and (max-width: 768px) {
	.woocommerce-account .cf-container--narrow { padding-top: 14px; }
	.woocommerce-account #customer_login .u-column1, .woocommerce-account #customer_login .u-column2 { padding-top: 0; margin-top: 0; }
	.woocommerce-account #customer_login h2 { margin-top: 0; }
	.woocommerce-account #customer_login .u-column2 { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--cf-border); }
	.palcle-auth-switch .button { display: block; margin: 10px 0 0; text-align: center; }
}
/* #customer_login la grid: hai gia-phan-tu clearfix ::before/::after thanh 2 hang rong + gap 32px -> khoang trong tren/duoi form */
.woocommerce-account #customer_login::before, .woocommerce-account #customer_login::after,
.woocommerce-account article.cf-prose > .woocommerce::before { display: none !important; }
.woocommerce-account article.cf-prose > .woocommerce { margin-top: 0; padding-top: 0; }

/* ---- Chan trang: App Store + o Android "Coming soon" canh nhau (2026-09-29) ---- */
.cf-appstore__row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.cf-appstore__soon { display: inline-flex; align-items: center; gap: 9px; height: 47px; padding: 0 14px 0 11px; box-sizing: border-box; min-width: 140px; border: 1px solid rgba(255,255,255,.55); border-radius: 9px; color: #fff; background: rgba(255,255,255,.06); cursor: default; user-select: none; }
.cf-appstore__soon svg { flex: 0 0 22px; color: #9FD9B4; }
.cf-appstore__soon-text { display: flex; flex-direction: column; line-height: 1.1; font-size: 15px; font-weight: 600; letter-spacing: .01em; }
.cf-appstore__soon-text small { font-size: 10px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; opacity: .78; }
.cf-appstore__badge--play img { width: auto; height: 47px; display: block; margin: -7px -9px; box-sizing: content-box; }

/* ---- Chan trang: logo mang xa hoi ro net, dung mau thuong hieu (2026-09-29) ---- */
.cf-social a { width: 42px; height: 42px; border-radius: 12px; background: rgba(255,255,255,.14); color: #fff; }
.cf-social a svg { width: 22px; height: 22px; }
.cf-social a[aria-label="Facebook"] { background: #1877F2; border-radius: 50%; }
.cf-social a[aria-label="Facebook"] svg { width: 26px; height: 26px; }
.cf-social a[aria-label="Facebook"]:hover { background: #166FE0; }
.cf-social a[aria-label="Instagram"] { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285AEB 90%); }
.cf-social a[aria-label="Youtube"] { background: #FF0000; }

/* ---- Bang anh may tinh: huy hieu tai app o goc duoi phai (2026-09-29) ---- */
.cf-hslider__apps { display: none; }
@media screen and (min-width: 1360px) {
	.cf-hslider__apps { display: block; position: absolute; right: 44px; bottom: 44px; z-index: 3; padding: 14px 16px 16px; border-radius: 16px; background: rgba(16, 38, 28, .42); border: 1px solid rgba(255, 255, 255, .16); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
	.cf-hslider__apps-label { margin: 0 0 10px; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgba(246, 241, 231, .92); }
	.cf-hslider__apps .cf-appstore__row { flex-wrap: nowrap; }
	.cf-hslider__apps .cf-appstore__badge img { width: 140px; height: auto; display: block; }
}

/* ---- Huy hieu Google Play: anh chinh chu co vien trong suot → phan nhin thay cao 47px bang huy hieu Apple (2026-09-29) ---- */
.cf-appstore__badge--play img, .cf-hslider__apps .cf-appstore__badge--play img { width: auto; height: 69.9px; max-width: none; margin: -11.5px -11.5px -11.5px -11.5px; }

/* ---- Chua cho thanh trang thai khi web chay tran man hinh (2026-09-29) ----
 * Trang dung viewport-fit=cover. Trong trinh duyet thuong env(safe-area-inset-*) = 0 nen khong doi gi.
 * Trong khung trinh duyet cua app (WebView), trinh duyet trong Zalo/Facebook, web them vao man hinh chinh
 * tren Android 15+ / iPhone co tai tho, trang ve tran len duoi thanh trang thai → logo bi de. Day cac phan
 * dinh tren xuong dung bang chieu cao thanh trang thai. */
.cf-header { padding-top: env(safe-area-inset-top, 0px); }
body.cf-sticky .cf-header__main { padding-top: env(safe-area-inset-top, 0px); } /* khi cuon, thanh tren thanh position:fixed top:0 */
.cf-drawer__panel, .cf-cartdrawer__panel { padding-top: env(safe-area-inset-top, 0px); }
.cf-drawer__panel { padding-left: env(safe-area-inset-left, 0px); }
.cf-cartdrawer__panel { padding-right: env(safe-area-inset-right, 0px); }

/* Du phong cho khung app Android ve tran ma khong bao inset (class do palcle-app-store.php gan som trong <head>) */
html.palcle-wv-fullbleed { --palcle-sat: 48px; --palcle-sab: 22px; }
html.palcle-wv-fullbleed .cf-header,
html.palcle-wv-fullbleed body.cf-sticky .cf-header__main,
html.palcle-wv-fullbleed .cf-drawer__panel,
html.palcle-wv-fullbleed .cf-cartdrawer__panel { padding-top: var(--palcle-sat); }
html.palcle-wv-fullbleed body.cf-msearch-open .cf-search { padding-top: calc(var(--palcle-sat) + 10px); }
html.palcle-wv-fullbleed body.cf-msearch-open .cf-search__close { top: calc(var(--palcle-sat) + 10px); }
html.palcle-wv-fullbleed .cf-mobnav { bottom: 0; padding-bottom: var(--palcle-sab); }
html.palcle-wv-fullbleed body { padding-bottom: calc(84px + var(--palcle-sab)); }

/* ---- Dien thoai: "Shop by collection" xep nhu app iOS — o anh nho vuot ngang, ten ben duoi (2026-09-30) ---- */
@media screen and (max-width: 768px) {
	.cf-hero .cf-tiles { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; margin: 0; padding: 2px 0 10px; -webkit-overflow-scrolling: touch; }
	.cf-hero .cf-tiles::-webkit-scrollbar { display: none; }
	.cf-hero .cf-tile { flex: 0 0 78px; scroll-snap-align: start; display: flex; flex-direction: column; align-items: center; gap: 7px; aspect-ratio: auto; overflow: visible; border: 0; border-radius: 0; background: none; box-shadow: none; transform: none !important; }
	.cf-hero .cf-tile__media { position: relative; inset: auto; width: 78px; height: 78px; padding: 0; border-radius: 16px; overflow: hidden; background: var(--cf-neutral); box-shadow: 0 2px 10px rgba(24, 53, 40, .10); }
	.cf-hero .cf-tile__media img { width: 100%; height: 100%; object-fit: cover; filter: none; transform: none !important; }
	.cf-hero .cf-tile__shade, .cf-hero .cf-tile__tag, .cf-hero .cf-tile__count { display: none; }
	.cf-hero .cf-tile__text { position: static; padding: 0; background: none; gap: 0; }
	.cf-hero .cf-tile__title { font-size: 12px; font-weight: 600; line-height: 1.25; letter-spacing: 0; text-transform: none; color: var(--cf-text-strong); text-align: center; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-shadow: none; }
}