/* Products showcase (/san-pham/): Figma bUb8r3myrJbrbHtYrhBGLs, sections 1440×928, popups 1260×650. */

body.tax-danh-muc-san-pham,
body.single-san-pham {
	margin-bottom: 0;
	background: #fffef4;
}

.single-san-pham .coffilia-header {
	background: #fffef4;
	color: #000;
}

.single-san-pham .coffilia-header .custom-logo {
	filter: brightness(0);
}

.tax-danh-muc-san-pham .coffilia-header {
	/* Follows the active product section (products.js sets --stage-bg). */
	background: var(--stage-bg, #fffef4);
	color: #000;
}

.tax-danh-muc-san-pham .coffilia-header .custom-logo {
	filter: brightness(0);
}

.products-showcase {
	--ink: #231f20;
	/* The Roslindale variable font defaults to wght 200; Display Condensed needs explicit axes. */
	--display-axes: "wght" 400, "wdth" 75;
	color: var(--ink);
	font-family: var(--coffilia-font-ui, Inter), Arial, sans-serif;
}

.products-empty { padding: 5rem 1rem; text-align: center; }

/* ---------- Product section ---------- */
.products-scene { --k-title: 0; --k-specs: 0; --k-price: 0; --o-specs: 1; --o-price: 1; --spin: 0deg; --lift: 0; --o-img: 1; --o-orbit: 1; background: var(--bg); color: var(--ink); }
.products-board { position: relative; margin: 0 auto; container-type: inline-size; }
.products-title-mask { overflow: hidden; margin: 0; text-align: center; }
.products-title { display: block; margin: 0; font-family: var(--coffilia-font-display); font-weight: 400; font-variation-settings: var(--display-axes); line-height: 1; color: var(--accent); white-space: nowrap; transform: translateY(calc(var(--k-title) * 110%)); }
.products-orbits { pointer-events: none; opacity: var(--o-orbit); color: var(--orbit, #9c8fa6); }
.products-orbits ellipse { fill: none; stroke: currentColor; stroke-width: 1; stroke-dasharray: 2 3; opacity: .7; }
.products-item { padding: 0; border: 0; background: none; cursor: pointer; perspective: 1400px; }
.products-item[disabled] { cursor: default; }
.products-spin { display: block; transform: translateY(calc(var(--lift) * 8%)) rotateY(var(--spin)); opacity: var(--o-img); }
.products-item img { display: block; width: auto; max-width: none; transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
.products-item:not([disabled]):hover img,
.products-item:focus-visible img { transform: scale(1.05); }
.products-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 8px; border-radius: 8px; }
.products-foot { display: contents; }
.products-specs { display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; margin: 0; font-weight: 300; font-size: 15.8px; line-height: 1.234; opacity: var(--o-specs); transform: translateY(calc(var(--k-specs) * 40px)); }
.products-specs p { margin: 0; }
.products-specs p + p { margin-top: var(--gap, 9px); }
.products-specs__en { font-style: italic; }
.products-specs__vi,
.products-specs__en { overflow-wrap: anywhere; }
.products-specs__vi :is(ul, ol),
.products-specs__en :is(ul, ol) { margin: 0; padding-left: 1.2em; }
.products-specs__vi li + li,
.products-specs__en li + li { margin-top: .1em; }
.products-specs__vi a,
.products-specs__en a { color: inherit; text-decoration: underline; }
.products-price { display: grid; justify-items: end; row-gap: 2px; margin: 0; color: var(--price, var(--accent)); opacity: var(--o-price); transform: translateY(calc(var(--k-price) * 40px)); }
.products-price__row { display: flex; align-items: baseline; }
.products-price__weight { font-weight: 500; font-size: 16px; color: var(--accent); }
.products-price__line { display: inline-block; width: 36px; height: 1px; margin: 0 14px .55em 12px; background: var(--line, var(--accent)); opacity: .55; align-self: end; }
.products-price__amount { font-weight: 500; font-size: 38px; line-height: 1.05; letter-spacing: -.01em; }
.products-price__contact { font-weight: 500; font-size: 30.4px; color: var(--accent); }

@media (min-width: 900px) {
	/* --shift: design px the whole composition sits higher than the Figma raster, closer to the header. */
	.products-board { --u: calc(100cqw / 1440); --shift: 55; width: min(100%, 1440px); aspect-ratio: 1440 / 928; }
	.products-title-mask, .products-orbits, .products-item, .products-foot { position: absolute; }
	.products-title-mask { left: 0; right: 0; top: calc((97 - var(--shift)) * var(--u)); padding: calc(10 * var(--u)) 0; }
	.products-title { font-size: calc(104 * var(--u)); }
	.products-orbits { inset: 0; width: 100%; height: 100%; transform: translateY(calc(var(--shift) * -1 * var(--u))); }
	.products-item { left: calc(var(--cx) * var(--u)); top: calc((var(--cy) - var(--shift)) * var(--u)); transform: translate(-50%, -50%); z-index: 2; }
	.products-item img { height: calc(var(--h) * var(--u)); }
	/* Specs (two equal columns) and price share one row right under the image; the price column is always reserved, even with no price. */
	.products-foot { display: grid; grid-template-columns: 1fr calc(300 * var(--u)); column-gap: calc(40 * var(--u)); align-items: end; left: calc(211 * var(--u)); right: calc(212 * var(--u)); top: calc((var(--ib, 645) + 24 - var(--shift)) * var(--u)); }
	.products-specs { column-gap: calc(24 * var(--u)); font-size: calc(15.8 * var(--u)); }
	.products-price { margin-bottom: calc((var(--pb, 104) - var(--sb, 106)) * var(--u)); row-gap: calc(var(--pg, 11) * var(--u)); }
	.products-price__weight { font-size: calc(16 * var(--u)); }
	.products-price__line { width: calc(36 * var(--u)); }
	.products-price__amount { font-size: calc(38 * var(--u)); }
	.products-price__contact { font-size: calc(30.4 * var(--u)); }
}

@media (max-width: 899.98px) {
	/* Mobile: one column from the top (just under the header); each price is a full-width row. */
	.products-board { display: grid; grid-template-columns: 1fr; grid-template-areas: "title" "product" "specs" "price"; align-content: start; row-gap: 12px; padding: 16px 16px 88px; min-height: 100svh; }
	.products-title-mask { grid-area: title; padding: .1em 0; }
	.products-title { font-size: clamp(36px, 10.5vw, 72px); }
	.products-orbits { grid-area: product; width: 100%; height: 100%; align-self: center; }
	.products-item { grid-area: product; justify-self: center; align-self: center; }
	.products-item img { height: min(calc(var(--h) / 928 * var(--products-stage-h, 100svh) * .7), calc(var(--h) / 1440 * 230vw)); }
	.products-specs { grid-area: specs; grid-template-columns: 1fr 1fr; column-gap: 16px; font-size: 12px; }
	.products-price { grid-area: price; justify-items: stretch; row-gap: 4px; }
	.products-price__row { justify-content: space-between; }
	.products-price__line { flex: 1 1 auto; width: auto; margin-inline: 12px; }
	.products-price__amount { font-size: 26px; }
	.products-price__contact { font-size: 19.2px; }
}

/* ---------- Pinned mode: one stage under the header, sections swap in place (JS + motion only) ---------- */
.is-pinned { --products-stage-h: calc(100svh - var(--products-header-h, 9.375rem)); }
.is-pinned .products-showcase { position: relative; height: var(--products-stage-h); }
.is-pinned .products-stage { position: relative; height: var(--products-stage-h); overflow: hidden; background: var(--stage-bg, #fffef4); }
.is-pinned .products-scene { position: absolute; inset: 0; display: grid; place-items: center; background: none; visibility: hidden; }
.is-pinned .products-scene:first-child { visibility: visible; }
@media (min-width: 900px) { .is-pinned .products-board { width: min(100%, 1440px, calc(var(--products-stage-h) * 1440 / 928)); } }
@media (max-width: 899.98px) { .is-pinned .products-board { width: 100%; height: var(--products-stage-h); min-height: 0; } }

/* Scroll hint: one step down on click; from the last section it leads to the grid. */
.products-next { display: none; }
.is-pinned .products-next { position: absolute; z-index: 3; left: 50%; bottom: clamp(16px, 3.5svh, 36px); display: block; width: 44px; height: 56px; padding: 5px 8px; border: 0; background: none; color: var(--ink, #231f20); cursor: pointer; transform: translateX(-50%); }
.products-next::before { content: ""; display: block; width: 28px; height: 46px; background: currentColor; -webkit-mask: url("../../images/products/mouse.svg") center / contain no-repeat; mask: url("../../images/products/mouse.svg") center / contain no-repeat; animation: products-blink 1.6s ease-in-out infinite; }
.products-next:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; border-radius: 8px; }
@keyframes products-blink { 50% { opacity: .25; } }
/* Busy while a section hand-off or page glide runs: dimmed and not clickable. */
.products-next:disabled, .products-skip:disabled { cursor: default; opacity: .35; }
.products-next:disabled::before { animation: none; }

/* Skip straight to the bottom of the page (Figma 2068:125, brand green). */
.products-skip { display: none; }
.is-pinned .products-skip { position: absolute; z-index: 3; right: clamp(16px, 3vw, 40px); bottom: clamp(28px, 6svh, 64px); display: block; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: none; color: #009f77; cursor: pointer; transition: opacity .2s ease, transform .2s ease; }
.is-pinned .products-skip svg { display: block; width: 100%; height: 100%; }
.is-pinned .products-skip:not(:disabled):hover { transform: translateY(2px); }
.products-skip:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
@media (max-width: 899.98px) { .is-pinned .products-skip { bottom: clamp(24px, 5svh, 48px); } }

/* ---------- Product popup ---------- */
.products-popup { width: min(100vw - 32px, 1260px); max-width: none; max-height: calc(100svh - 32px); padding: 0; border: 0; border-radius: 0; background: #fffef4; color: #000; overflow: auto; font: 400 16px/1.44 var(--coffilia-font-ui, Inter), Arial, sans-serif; }
.products-popup::backdrop { background: rgba(4, 39, 32, .45); }
.products-popup[open] { animation: products-pop .35s cubic-bezier(.2, .7, .2, 1); }
@keyframes products-pop { from { opacity: 0; transform: translateY(24px); } }
.products-popup__close { position: absolute; z-index: 3; top: 16px; right: 16px; width: 44px; height: 44px; padding: 8px; border: 0; background: none; cursor: pointer; }
.products-popup__close img { display: block; width: 28px; height: 29px; }
.products-popup__board { position: relative; container-type: inline-size; }
.products-popup__title { margin: 0; font-family: var(--coffilia-font-display); font-weight: 400; font-variation-settings: "wght" 400, "wdth" 75; font-size: 48px; line-height: 1; color: var(--accent); text-align: center; }
.products-popup__desc { margin: 0; text-align: center; }
.products-popup__features { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0; padding: 0; list-style: none; text-align: center; }
.products-popup__features li { display: flex; flex-direction: column; align-items: center; }
.products-popup__features img { display: block; width: 80px; height: 80px; }
.products-popup__features span { display: block; width: 146px; margin-top: -10.5px; }
.products-popup__img { display: block; object-fit: contain; }

@media (min-width: 900px) {
	.products-popup__close { top: calc(36 * 100% / 650); right: calc(55 * 100% / 1260); }
	.products-popup__board { --u: calc(100cqw / 1260); aspect-ratio: 1260 / 650; }
	.products-popup__title, .products-popup__desc, .products-popup__features, .products-popup__img { position: absolute; }
	.products-popup__title { left: calc(373.5 * var(--u)); top: calc(165 * var(--u)); transform: translate(-50%, -50%); font-size: calc(48 * var(--u)); white-space: nowrap; }
	.products-popup__desc { left: calc(373.5 * var(--u)); top: calc(295.5 * var(--u)); width: calc(var(--desc-w, 441) * var(--u)); font-size: calc(16 * var(--u)); transform: translate(-50%, -50%); }
	.products-popup__features { left: calc(103.5 * var(--u)); top: calc(397 * var(--u)); width: calc(537 * var(--u)); font-size: calc(16 * var(--u)); }
	.products-popup__features img { width: calc(80 * var(--u)); height: calc(80 * var(--u)); }
	.products-popup__features span { width: calc(146 * var(--u)); margin-top: calc(-10.5 * var(--u)); }
	.products-popup__img { left: calc(var(--x) * var(--u)); top: calc(var(--y) * var(--u)); width: calc(var(--w) * var(--u)); height: calc(var(--h) * var(--u)); }
}

@media (max-width: 899.98px) {
	.products-popup__board { display: flex; flex-direction: column; align-items: center; gap: 20px; padding: 56px 16px 32px; }
	.products-popup__title { font-size: 40px; }
	.products-popup__img { order: -1; width: 100%; height: 220px; }
	.products-popup__desc { font-size: 15px; }
	.products-popup__features { width: 100%; font-size: 14px; }
	.products-popup__features img { width: 64px; height: 64px; }
	.products-popup__features span { width: auto; max-width: 120px; margin-top: -8px; }
}

@media (prefers-reduced-motion: reduce) {
	.products-popup[open] { animation: none; }
	.products-next::before { animation: none; }
	.products-item img { transition: none; }
}

/* ---------- Secondary products: grid below the showcase, and "related" on the detail page ---------- */
/* Mirrors the News card grid (news.css): 3 columns of up to 20rem, one column below 768px. */
.products-grid { padding: 5rem 0 5.8125rem; background: #fffef4; color: #042720; }
.products-grid__title { margin: 0 0 2.5rem; font-family: var(--coffilia-font-display); font-weight: 400; font-variation-settings: "wght" 400, "wdth" 75; font-size: clamp(2.25rem, 4vw, 3.25rem); line-height: 1; color: #009f77; text-align: center; }
.products-grid__list { display: grid; grid-template-columns: repeat(3, minmax(0, 20rem)); column-gap: 1.75rem; row-gap: 2.125rem; width: min(64rem, calc(100% - 3rem)); margin: 0 auto; }
.products-card { min-width: 0; text-align: left; }
.products-card__image { display: block; width: 100%; aspect-ratio: 320 / 225; overflow: hidden; border-radius: 1.25rem; background: var(--card-bg, #f3efe2); }
.products-card__image img, .products-card__placeholder { display: block; width: 100%; height: 100%; padding: 8% 10%; object-fit: contain; }
.products-card__image img { transition: transform .45s cubic-bezier(.2, .7, .2, 1); }
.products-card.is-linked .products-card__image:hover img,
.products-card.is-linked .products-card__image:focus-visible img { transform: scale(1.05); }
.products-card__meta { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-top: .9375rem; }
.products-card__text { min-width: 0; }
.products-card__title { margin: 0; font-family: var(--coffilia-font-ui); font-size: 1.25rem; font-weight: 500; line-height: 1.4; color: #042720; }
.products-card__title a { color: inherit; text-decoration: none; }
.products-card__title a:hover, .products-card__title a:focus-visible { color: #009f77; }
.products-card__price { display: grid; gap: .125rem; margin: .375rem 0 0; font-family: var(--coffilia-font-ui); font-size: 1rem; font-weight: 500; line-height: 1.4; color: #009f77; }
.products-card__link { position: relative; flex: 0 0 2.25rem; display: block; width: 2.25rem; height: 2.25rem; }
.products-card__link-circle, .products-card__link-arrow { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; }
.products-card__link-arrow { inset: 34% 18%; width: 64%; height: 32%; transition: transform .3s ease; }
.products-card__link:hover .products-card__link-arrow,
.products-card.is-linked .products-card__image:hover ~ .products-card__meta .products-card__link-arrow { transform: translateX(.15rem); }

/* Detail page: the News detail layout with the product on its own colour instead of a banner. */
.products-single__hero { aspect-ratio: 1016 / 480; border-radius: 1.25rem; background: var(--card-bg, #f3efe2); }
.news-single__hero.products-single__hero img { padding: 5% 8%; object-fit: contain; }
.products-single__price { display: flex; flex-wrap: wrap; justify-content: center; gap: .25rem 1.5rem; margin: .75rem 0 0; font-family: var(--coffilia-font-ui); font-size: 1.5rem; font-weight: 500; color: #009f77; }
.products-single__related { padding: 6.5rem 0 5.875rem; }
.products-single .news-single__body { margin-top: 3rem; }

@media (max-width: 767px) {
	.products-grid { padding: 3.5rem 1rem 4rem; }
	.products-grid__list { grid-template-columns: minmax(0, 1fr); row-gap: 2rem; width: 100%; }
	.products-single__related { padding: 4rem 1rem; }
	.products-single__price { font-size: 1.25rem; }
}

@media (prefers-reduced-motion: reduce) {
	.products-card__image img, .products-card__link-arrow { transition: none; }
}