/* CHXN page: home — hero, trust, category grid, flash sale, bestsellers,
   news, newsletter. front-page.php prints each section as a plain
   "<section class="chxn-section-wrap"><div class="chxn-container">...",
   no Flatsome row/col wrapper to strip gutters from — the WooCommerce
   product-grid shortcodes ([sale_products]/[best_selling_products]) land
   straight inside .chxn-container and are styled the same way the shop
   archive's grid is (product-card.css's ul.products rule). */

/* per-section padding matches the original UX Builder page's own
   "[section padding=...]" attribute exactly, section by section
   (Bestsellers/News already match layout.css's own default
   ".chxn-section-wrap{padding:44px 0 8px}", so they don't need their own
   modifier class here) — a single uniform padding for every section here
   previously left consecutive sections feeling airier than the original
   design. */
.chxn-section-trust {
	padding: 34px 0 8px;
}
.chxn-section-cat {
	padding: 40px 0 8px;
}
.chxn-section-flash {
	padding: 40px 0 8px;
}
.chxn-section-newsletter {
	padding: 44px 0 24px;
}
@media (max-width: 850px) {
	.chxn-section-trust {
		padding: 20px 0 6px;
	}
	.chxn-section-cat {
		padding: 22px 0 6px;
	}
	.chxn-section-flash {
		padding: 22px 0 6px;
	}
	.chxn-section-newsletter {
		padding: 26px 0 20px;
	}
}

/* ---- hero ---- */
.chxn-hero {
	background: linear-gradient(135deg, #0d5538, #137a52);
}
.chxn-hero-inner {
	padding: 48px 20px 52px;
	display: grid;
	grid-template-columns: 1.25fr .75fr;
	gap: 40px;
	align-items: center;
	color: #fff;
}
@media (max-width: 850px) {
	.chxn-hero-inner {
		padding: 28px 14px 32px;
		gap: 22px;
	}
}
.chxn-hero-badge {
	display: inline-block;
	background: rgba(255, 255, 255, .15);
	border: 1px solid rgba(255, 255, 255, .25);
	padding: 6px 14px;
	border-radius: var(--chxn-radius-pill);
	font-size: 12.5px;
	font-weight: 600;
}
.chxn-hero-text h1 {
	font-size: 42px;
	line-height: 1.12;
	font-weight: 800;
	margin: 18px 0 0;
	color: #fff;
}
.chxn-hero-text p {
	font-size: 16px;
	line-height: 1.7;
	color: #d8ece3;
	margin: 16px 0 0;
	max-width: 520px;
}
.chxn-hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 26px;
}
@media (max-width: 850px) {
	/* the 2 buttons' combined natural width (icon + label + this token's
	   own 14px/28px padding) ran a little past a narrow phone's available
	   width, so "wrap" above was doing its job — just not what was
	   wanted here. Forcing the row itself to "nowrap" and letting each
	   button flex/shrink to half keeps them side by side instead. */
	.chxn-hero-actions {
		flex-wrap: nowrap;
	}
	.chxn-hero-actions .chxn-btn-white,
	.chxn-hero-actions .chxn-btn-ghost {
		flex: 1 1 0;
		padding: 12px 10px;
		font-size: 13.5px;
		text-align: center;
		white-space: nowrap;
	}
}
/* fixed 3-column grid (3 coupons always in one row) instead of flex-wrap —
   real coupon descriptions pulled from WooCommerce vary in length, a
   flex chip would grow past 1/3 and force wrapping; a grid keeps all 3
   columns equal width and lets the description text wrap internally. */
.chxn-hero-coupons {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
	margin-top: 28px;
}
.chxn-coupon {
	background: rgba(255, 255, 255, .1);
	border: 1px dashed rgba(255, 255, 255, .4);
	/* base.css's site-wide "button{border-radius:var(--chxn-radius-pill)
	   !important}" reset otherwise wins over a plain (non-!important)
	   value here since ".chxn-coupon" is a real <button> tag — needs its
	   own !important to actually land the rounded-corner look instead of
	   a pill. */
	border-radius: 10px !important;
	padding: 12px 14px;
	font-family: inherit;
	text-align: left;
	cursor: pointer;
	transition: background .15s, border-color .15s;
	width: 100%;
	box-sizing: border-box;
	display: block;
	color: inherit;
}
.chxn-coupon:hover,
.chxn-coupon:focus-visible {
	background: rgba(255, 255, 255, .18);
	border-color: rgba(255, 255, 255, .7);
}
.chxn-coupon-code {
	font-weight: 800;
	font-size: 15px;
	letter-spacing: .02em;
	color: #fff;
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0 0 4px;
}
.chxn-coupon-copy-icon {
	font-size: 12px;
	opacity: .75;
}
.chxn-coupon-desc {
	font-size: 12.5px;
	line-height: 1.4;
	color: #cfe6da;
}
.chxn-hero-media {
	position: relative;
}
.chxn-hero-media img {
	width: 100%;
	height: 330px;
	object-fit: cover;
	border-radius: 18px;
	box-shadow: 0 18px 44px rgba(0, 0, 0, .3);
	display: block;
}
.chxn-hero-float {
	position: absolute;
	left: -16px;
	bottom: -18px;
	background: #fff;
	color: var(--chxn-ink);
	border-radius: 14px;
	padding: 14px 18px;
	box-shadow: 0 10px 26px rgba(0, 0, 0, .18);
	max-width: 230px;
}
.chxn-hero-float-title {
	font-weight: 700;
	font-size: 13.5px;
	color: var(--chxn-green-d);
}
.chxn-hero-float-text {
	font-size: 12px;
	color: var(--chxn-ink-2);
	margin-top: 4px;
	line-height: 1.5;
}

/* ---- shared section head ---- */
.chxn-section-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 20px;
}
.chxn-section-head h2 {
	font-size: 24px;
	font-weight: 800;
	margin: 0;
}
.chxn-see-all {
	color: var(--chxn-green-d);
	font-weight: 700;
	font-size: 14px;
	text-decoration: none;
	white-space: nowrap;
}

/* ---- trust ---- */
.chxn-trust-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
}
.chxn-trust-item {
	background: var(--chxn-card);
	border: 1px solid var(--chxn-line);
	border-radius: var(--chxn-radius-card);
	padding: 18px 20px;
	display: flex;
	gap: 14px;
	align-items: flex-start;
}
.chxn-trust-icon {
	font-size: 26px;
	flex: none;
}
.chxn-trust-title {
	font-weight: 700;
	font-size: 14.5px;
}
.chxn-trust-text {
	font-size: 12.5px;
	color: var(--chxn-ink-2);
	margin-top: 3px;
	line-height: 1.5;
}

/* ---- category grid ---- */
.chxn-cat-grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 14px;
}
.chxn-cat-tile {
	text-decoration: none;
	color: var(--chxn-ink);
	background: var(--chxn-card);
	border: 1px solid var(--chxn-line);
	border-radius: 16px;
	padding: 20px 8px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	text-align: center;
	transition: transform .16s, box-shadow .16s, border-color .16s;
}
.chxn-cat-tile:hover {
	transform: translateY(-3px);
	box-shadow: 0 10px 22px rgba(18, 107, 72, .12);
	border-color: var(--chxn-green);
}
.chxn-cat-tile span:first-child {
	font-size: 30px;
}
/* the tile name is an <h3> now (homepage heading outline: section h2 →
   item h3) — "span:last-child" kept for safety, styles pinned so the
   base h1-h6 reset (weight 800, ink color) changes nothing visually. */
.chxn-cat-tile span:last-child,
.chxn-cat-tile h3 {
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.3;
	margin: 0;
	color: inherit;
}

/* ---- flash sale ---- */
.chxn-flash-wrap {
	background: linear-gradient(120deg, #fff4ec, #ffe9df);
	border: 1px solid #f6d7c6;
	border-radius: 18px;
	padding: 22px 24px;
}
@media (max-width: 850px) {
	.chxn-flash-wrap {
		/* this card's own side padding stacks on top of ".chxn-container"'s
		   (base.css) and the product grid's own gap — on a phone screen
		   all three together were leaving very little actual width for
		   each of the 2 cards in the row. */
		padding: 14px;
	}
}
.chxn-flash-wrap ul.products {
	margin-top: 0;
	grid-template-columns: repeat(5, 1fr);
}
@media (max-width: 1300px) {
	.chxn-flash-wrap ul.products {
		grid-template-columns: repeat(4, 1fr);
	}
}
@media (max-width: 1100px) {
	.chxn-flash-wrap ul.products {
		grid-template-columns: repeat(3, 1fr);
	}
}
@media (max-width: 850px) {
	.chxn-flash-wrap ul.products {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* ---- slider mode (> 5 on-sale products, front-page.php) — same clone-
   buffer infinite carousel technique as the single-product page's
   related-products row (modules/product-gallery.js's setupScroller()),
   adapted for 5 visible cards instead of 4 (modules/home.js's
   setupFlashSlider()). ---- */
.chxn-flash-slider ul.products {
	display: flex !important;
	flex-wrap: nowrap;
	overflow: visible;
	margin: 0;
	padding: 0;
	transition: transform .4s ease;
}
.chxn-flash-slider ul.products > li {
	flex-shrink: 0;
	width: calc((100% - 4 * 20px) / 5) !important;
}
@media (max-width: 1300px) {
	.chxn-flash-slider ul.products > li {
		width: calc((100% - 3 * 20px) / 4) !important;
	}
}
@media (max-width: 1100px) {
	.chxn-flash-slider ul.products > li {
		width: calc((100% - 2 * 20px) / 3) !important;
	}
}
@media (max-width: 850px) {
	.chxn-flash-slider ul.products > li {
		width: calc((100% - 20px) / 2) !important;
	}
}
.chxn-flash-scroll-wrap {
	position: relative;
}
.chxn-flash-scroll-viewport {
	overflow: hidden;
}
.chxn-flash-scroll-btn {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 3;
	width: 40px;
	height: 40px;
	border-radius: 12px !important;
	border: 1px solid var(--chxn-line);
	background: var(--chxn-card);
	box-shadow: 0 4px 14px rgba(0, 0, 0, .12);
	font-size: 18px;
	line-height: 1;
	color: var(--chxn-ink);
	cursor: pointer;
	font-family: inherit;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}
.chxn-flash-scroll-btn:hover {
	border-color: var(--chxn-green);
	color: var(--chxn-green-d);
}
.chxn-flash-scroll-prev {
	left: -16px;
}
.chxn-flash-scroll-next {
	right: -16px;
}
@media (max-width: 850px) {
	/* NOT "display:none" — ".chxn-flash-scroll-viewport{overflow:hidden}"
	   above gives this track no native touch-scroll fallback at all
	   (movement only ever comes from these buttons' click handler,
	   modules/home.js's setupFlashSlider(), driving a CSS transform), so
	   hiding them on mobile left the carousel with no way to advance past
	   the first 2 cards — not a leaner mobile layout, just a stuck one.
	   Inset instead of overlapping (this wrap's own padding shrank
	   considerably for mobile, same file, above) so they stay inside the
	   now-narrower visible area instead of clipping like the product
	   gallery's thumb-scroll buttons once did (pages/product-detail.css). */
	.chxn-flash-scroll-btn {
		width: 32px;
		height: 32px;
		font-size: 15px;
	}
	.chxn-flash-scroll-prev {
		left: 2px;
	}
	.chxn-flash-scroll-next {
		right: 2px;
	}
}
.chxn-flash-head {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 18px;
}
.chxn-flash-title-group {
	display: flex;
	align-items: center;
	gap: 14px;
	/* wrap, not nowrap — on very narrow phones the title + "Số lượng có
	   hạn" note together don't fit on one line, and forcing both to stay
	   put (like the checkout step-bar labels once did, pages/checkout.css)
	   pushed this row past the viewport edge instead of just breaking the
	   note onto its own line. */
	flex-wrap: wrap;
}
.chxn-flash-head h2 {
	white-space: nowrap;
	flex-shrink: 0;
}
.chxn-flash-head h2 {
	width: auto;
	font-size: 23px;
	font-weight: 800;
	margin: 0;
	color: var(--chxn-red-d);
}
.chxn-flash-note {
	font-size: 13px;
	color: var(--chxn-ink-2);
}
.chxn-flash-countdown {
	display: flex;
	align-items: center;
	gap: 9px;
	margin-left: auto;
	/* nowrap (the default) — letting THIS row wrap let individual boxes
	   and separators break apart mid-sequence ("13 : 39" on one line,
	   a lone "49" stranded on the next) instead of moving the whole
	   countdown down together. ".chxn-flash-head"'s own "flex-wrap:wrap"
	   already sends the entire countdown to its own line as one piece
	   when it doesn't fit next to the title. */
	flex-wrap: nowrap;
}
@media (max-width: 480px) {
	.chxn-flash-countdown {
		width: 100%;
		margin-left: 0;
		justify-content: flex-start;
	}
}
.chxn-flash-countdown-label {
	font-size: 13px;
	color: var(--chxn-ink-2);
	font-weight: 600;
	/* a flex row this squeezed for width (3 number boxes + separators
	   already claim most of it, ".chxn-flash-countdown"'s "margin-left:
	   auto" leaves this label whatever's left) will otherwise wrap this
	   plain, unset text at every space — "Kết", "thúc", "sau:" each
	   landing on their own line instead of just breaking once, sooner,
	   as a normal phrase would. Keeping it one unit lets the whole
	   countdown wrap onto its own line (".chxn-flash-head"'s own
	   "flex-wrap:wrap") instead of the label alone fragmenting mid-word. */
	white-space: nowrap;
	flex-shrink: 0;
}
.chxn-flash-countdown-box {
	background: var(--chxn-red);
	color: #fff;
	font-weight: 800;
	font-size: 16px;
	padding: 6px 10px;
	border-radius: 8px;
	min-width: 42px;
	text-align: center;
}
.chxn-flash-countdown-sep {
	font-weight: 800;
	color: var(--chxn-red);
}

/* ---- homepage news section ([chx_home_news] shortcode, business-
   logic.php): 1 large featured post (left) + 3 smaller horizontal list
   items (right) ---- */
.chxn-home-news-grid {
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	gap: 20px;
	align-items: stretch;
}
.chxn-home-news-featured {
	text-decoration: none;
	color: var(--chxn-ink);
	background: var(--chxn-card);
	border: 1px solid var(--chxn-line);
	border-radius: 14px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: box-shadow .16s;
}
.chxn-home-news-featured:hover {
	box-shadow: 0 12px 26px rgba(0, 0, 0, .08);
}
.chxn-home-news-featured img {
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	display: block;
}
.chxn-home-news-featured-body {
	padding: 20px 22px;
	display: flex;
	flex-direction: column;
	flex: 1;
}
.chxn-home-news-meta {
	font-size: 11.5px;
	color: var(--chxn-green-d);
	font-weight: 700;
}
.chxn-home-news-featured-title {
	font-weight: 800;
	font-size: 20px;
	line-height: 1.3;
	margin: 8px 0 0;
	/* h3 now — inherit keeps the featured card's light-on-photo color
	   instead of base.css's h1-h6 ink. */
	color: inherit;
}
.chxn-home-news-featured-excerpt {
	font-size: 13.5px;
	color: var(--chxn-ink-2);
	line-height: 1.7;
	margin: 10px 0 0;
}
.chxn-home-news-list {
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.chxn-home-news-list-item {
	text-decoration: none;
	color: var(--chxn-ink);
	background: var(--chxn-card);
	border: 1px solid var(--chxn-line);
	border-radius: 14px;
	overflow: hidden;
	display: flex;
	flex: 1;
	min-height: 0;
	transition: box-shadow .16s;
}
.chxn-home-news-list-item:hover {
	box-shadow: 0 12px 26px rgba(0, 0, 0, .08);
}
.chxn-home-news-list-item img {
	width: 200px;
	flex: none;
	object-fit: cover;
	display: block;
}
.chxn-home-news-list-body {
	padding: 14px 16px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-width: 0;
}
.chxn-home-news-list-title {
	font-weight: 700;
	font-size: 15px;
	line-height: 1.35;
	margin: 6px 0 0;
	color: inherit;
}

@media (max-width: 850px) {
	.chxn-home-news-grid { grid-template-columns: 1fr; }
	.chxn-home-news-list-item img { width: 120px; }
}

/* ---- newsletter ---- */
.chxn-newsletter {
	background: var(--chxn-green);
	border-radius: 18px;
	padding: 44px;
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	align-items: center;
	justify-content: space-between;
	color: #fff;
}
.chxn-newsletter-text h2 {
	font-size: 26px;
	font-weight: 800;
	margin: 0;
	color: #fff;
	display: flex;
	align-items: center;
	gap: 10px;
}
.chxn-newsletter-icon {
	display: inline-flex;
	flex-shrink: 0;
	font-size: 24px;
}
.chxn-newsletter-text p {
	font-size: 14.5px;
	color: #d6ece2;
	line-height: 1.7;
	margin: 12px 0 0;
}
/* Contact Form 7 (id 457, "Đăng ký nhận bảng tin" — a single email field
   + submit) rendered as the actual input+button row; CF7's own field
   config sets the submit's value to "." (a placeholder never finished),
   so the real "Nhận ưu đãi →" label is drawn via ::after instead of
   editing the form's saved field data. */
.chxn-newsletter-form {
	/* 520px cap (was 460): the input needs ~260px of text room for its
	   full "Nhập địa chỉ Email của bạn" placeholder next to the 150px
	   button — at 460 the flex math squeezed it to ~219px, clipping the
	   placeholder at "của b". */
	flex: 1 1 420px;
	max-width: 520px;
}
/* CF7's own markup actually nests the email input + submit button + spinner
   inside a "<p>" INSIDE ".form-nhan-tin" (".form-nhan-tin > p > [input,
   button, span]") — making ".form-nhan-tin" itself the flex row (as this
   used to) only turns its single "<p>" child into one flex item; the
   input/button stayed block-stacked one level further down, inside that
   "<p>". The actual row has to be the "<p>" itself. */
.chxn-newsletter-form .wpcf7-form,
.chxn-newsletter-form .wpcf7-form .form-nhan-tin,
.chxn-newsletter-form .wpcf7-form .form-nhan-tin > p,
.chxn-newsletter-form .wpcf7 form {
	display: flex;
	align-items: center;
	gap: 10px;
}
/* a plain "flex:1" here let the input grow to soak up ALL of whatever
   space the button (sized only by its own text + padding) didn't need —
   at wider viewports that stretched the input far past the button,
   reading as lopsided. A fixed basis keeps the two in a steady, roughly
   even proportion regardless of viewport width. */
.chxn-newsletter-form .wpcf7-form-control-wrap {
	/* 300px: wide enough for the full "Nhập địa chỉ Email của bạn"
	   placeholder (240px clipped it at "của b") */
	flex: 0 1 300px;
	display: flex;
}
.chxn-newsletter-form input[type="email"] {
	width: 100%;
	box-sizing: border-box;
	border: 0;
	border-radius: var(--chxn-radius-pill) !important;
	padding: 14px 20px;
	font-size: 14.5px;
	font-family: inherit;
	color: var(--chxn-ink);
}
.chxn-newsletter-form input[type="submit"] {
	flex: 0 0 auto;
	min-width: 150px;
	background: var(--chxn-gold);
	color: #3a2a08;
	border: 0;
	border-radius: var(--chxn-radius-pill) !important;
	padding: 14px 26px;
	font-size: 14.5px;
	font-weight: 700;
	white-space: nowrap;
	cursor: pointer;
}
@media (max-width: 560px) {
	/* the button's own "flex:0 0 auto" never shrinks, so on a narrow
	   phone it was claiming most of the row and leaving the input
	   (which DOES shrink, "flex:0 1 240px") squeezed down to just a
	   couple characters wide. Stacking input above button, both full
	   width, instead of forcing them into one too-narrow row. */
	.chxn-newsletter-form .wpcf7-form,
	.chxn-newsletter-form .wpcf7-form .form-nhan-tin,
	.chxn-newsletter-form .wpcf7-form .form-nhan-tin > p,
	.chxn-newsletter-form .wpcf7 form {
		flex-wrap: wrap;
	}
	.chxn-newsletter-form .wpcf7-form-control-wrap {
		flex: 1 1 100%;
	}
	.chxn-newsletter-form input[type="submit"] {
		flex: 1 1 100%;
		min-width: 0;
	}
}
.chxn-newsletter-form .wpcf7-not-valid-tip {
	color: #ffe4d6;
	font-size: 12px;
	margin-top: 6px;
}
.chxn-newsletter-form .wpcf7-response-output {
	color: #fff;
	font-size: 13px;
	margin: 10px 0 0;
	border-color: rgba(255, 255, 255, .4) !important;
}

@media (max-width: 850px) {
	.chxn-newsletter-form {
		flex-basis: 100%;
		max-width: none;
	}
	.chxn-hero-inner { grid-template-columns: 1fr; }
	.chxn-hero-coupons { grid-template-columns: 1fr; }
	.chxn-trust-grid { grid-template-columns: repeat(2, 1fr); }
	.chxn-cat-grid { grid-template-columns: repeat(3, 1fr); }
}