/* ==========================================================================
   TrendyShop — reset và primitive dùng chung
   Component của từng dải nằm ở main.css.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--mona-head-h, 96px) + 16px);  /* header dính — neo trong trang phải chừa chỗ.
	   --mona-head-h do main.js đo từ chính .mona-header rồi đặt lên :root, nên
	   neo không trượt khi header cao thấp khác nhau theo bề rộng. Không có JS
	   thì 96px vẫn là con số cũ, vẫn dùng được. */
	font-size: 16px;
}

/* ── Màn lớn: 2K, 4K ───────────────────────────────────────────────────────
   MỘT cơ chế duy nhất: nâng cỡ chữ gốc. Mọi thứ khai bằng rem — khung, máng
   lề, chiều cao dải, toàn bộ thang chữ — giãn theo cùng một tỉ lệ, nên tương
   quan giữa chúng không đổi. Nâng riêng lẻ từng token là cách chắc chắn làm
   vỡ tỉ lệ ở một chỗ nào đó.

   Vì sao cần: `--container` đứng yên ở 1280px thì trên màn 2560 nội dung chỉ
   chiếm nửa màn hình, và mọi clamp() đã chạm trần từ khoảng 1400px nên chữ
   không lớn thêm dù màn to gấp đôi. Kết quả là một cột hẹp, chữ nhỏ, kẹt
   giữa hai mảng trống.

   Bậc chọn theo BỀ RỘNG CSS thật, không theo "2K/4K" trên hộp máy: một màn
   4K chạy ở tỉ lệ 150% báo về 2560px CSS, và đó mới là con số quyết định.

   Trần dừng ở 1840px khung: rộng hơn nữa thì một dòng văn bản dài quá tầm
   mắt, và lưới sản phẩm phải thêm cột chứ không phải kéo thẻ to ra —
   xem `--per` trong main.css.                                               */
@media (min-width: 1600px) { html { font-size: 17px; } }    /* khung ~1360px */
@media (min-width: 1920px) { html { font-size: 18px; } }    /* khung ~1440px */
@media (min-width: 2100px) { html { font-size: 19px; } }    /* khung ~1520px */
@media (min-width: 2400px) { html { font-size: 20px; } }    /* khung ~1600px */
@media (min-width: 3000px) { html { font-size: 23px; } }    /* khung ~2024px */

/* Trên 3000px CSS (4K không chia tỉ lệ) nới thêm bề rộng khung. Ở đây nới được
   mà không hại tầm đọc, vì mọi khối văn bản đã có `max-inline-size` riêng —
   phần rộng thêm rơi vào các lưới sản phẩm, đúng chỗ cần nó. */
@media (min-width: 3000px) { :root { --container: 88rem; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
	margin: 0;
	/* Nền mặc định TRẮNG toàn site (yêu cầu bỏ nền kem). Component nào cần
	   nền kem thì tự khai --ground/--ground-2, không dựa vào nền trang. */
	background: var(--card);
	color: var(--ink);
	font-family: var(--f-body);
	font-size: var(--t-body);
	line-height: var(--lh-body);
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--f-display);
	font-weight: 800;
	line-height: var(--lh-head);
	letter-spacing: -.022em;
	margin: 0;
	overflow-wrap: anywhere;   /* tên nhân vật dài không được phá thẻ */
}

/* Reset lề của MỌI thẻ có lề mặc định, không chỉ p/ul/ol.
   <figure> và <blockquote> mang `margin: 1em 40px` từ UA stylesheet. Trong
   thẻ đánh giá chúng lồng nhau, nên mỗi cấp ăn 80px bề ngang: ô chữ trong
   thẻ 232px co còn ~32px và mỗi từ rơi xuống một dòng. Không tràn ngang,
   không sai leading — nên không phép đo tự động nào của dự án bắt được;
   chỉ nhìn mới thấy. */
p, ul, ol, figure, blockquote, figcaption, dl, dd, pre, fieldset, form { margin: 0; }
fieldset { padding: 0; border: 0; }
ul, ol { list-style: none; padding: 0; }
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

:focus-visible { outline: 3px solid var(--sky); outline-offset: 2px; border-radius: 4px; }
.mona-on-dark :focus-visible, .mona-topbar :focus-visible { outline-color: var(--sun); }

.screen-reader-text {
	position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
	border: 0; clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}
.mona-skip-link {
	position: absolute; top: 0; left: 0; z-index: 999;
	transform: translateY(-120%);
	background: var(--ink); color: var(--on-dark); padding: 12px 18px;
}
.mona-skip-link:focus { transform: translateY(0); }

/* ── Khung ─────────────────────────────────────────────────────────────────*/
.mona-container {
	width: 100%; max-width: var(--container);
	margin-inline: auto; padding-inline: var(--gutter);
}
.mona-band  { padding-block: var(--band); }
.mona-band--sunk { background: var(--ground-2); }
.mona-band--white{ background: var(--card); }
/* --tight và --tail dùng trên 11 trang từ đợt trước mà CHƯA HỀ có quy tắc —
   chúng không lỗi, không cảnh báo, chỉ đơn giản là không làm gì. Một modifier
   BEM không tồn tại trông y hệt một modifier đã áp dụng. Cách bắt: đối chiếu
   class dùng trong HTML với class có trong CSS, đừng nhìn trang. */
.mona-band--tight { padding-block: calc(var(--band) * .62); }
.mona-band--tail  { padding-bottom: calc(var(--band) * 1.35); }
.mona-band--dark { background: var(--ink); color: var(--on-dark); }
.mona-band--dark h2, .mona-band--dark h3 { color: var(--on-dark); }

.mona-prose > p, .mona-prose > ul, .mona-prose > ol { max-inline-size: var(--measure); }

/* ── Đầu dải ───────────────────────────────────────────────────────────────
   Nhãn nhỏ + tiêu đề bên trái, link "xem tất cả" bên phải. Đây là nhịp mà
   một trang bán hàng lặp lại sáu, bảy lần — nên nó là component, không phải
   markup lặp lại. */
.mona-head {
	display: flex; align-items: flex-end; justify-content: space-between;
	gap: 20px 28px; flex-wrap: wrap; margin-bottom: clamp(24px, 3vw, 44px);
}
.mona-head__t { min-width: 0; }
.mona-head h2 { font-size: var(--t-h2); max-inline-size: 20ch; }
.mona-head p  { color: var(--ink-2); margin-top: 8px; max-inline-size: 52ch; font-size: var(--t-small); }
.mona-band--dark .mona-head p { color: var(--on-dark-soft); }

.mona-eyebrow {
	display: inline-flex; align-items: center; gap: 9px;
	font-family: var(--f-display); font-size: var(--t-micro); font-weight: 700;
	letter-spacing: .13em; text-transform: uppercase; color: var(--brand-ink);
	margin-bottom: 10px;
}
.mona-eyebrow::before { content: ""; width: 22px; height: 2px; background: currentColor; }
.mona-band--dark .mona-eyebrow { color: var(--sun); }

/* ── Nút ───────────────────────────────────────────────────────────────────*/
.mona-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	min-height: var(--tap); padding: 11px 22px;
	border: 1.5px solid transparent; border-radius: var(--r-full);
	font-family: var(--f-display); font-weight: 700; font-size: var(--t-small);
	white-space: nowrap;
	transition: background var(--dur) var(--ease-2), color var(--dur) var(--ease-2),
	            border-color var(--dur) var(--ease-2), transform var(--dur) var(--ease);
}
.mona-btn--brand   { background: var(--brand); color: #fff; box-shadow: var(--sh-pop); }
.mona-btn--brand:hover  { background: var(--brand-ink); transform: translateY(-1px); }
.mona-btn--ink     { background: var(--ink); color: var(--on-dark); }
.mona-btn--ink:hover    { background: var(--brand); }
.mona-btn--ghost   { border-color: var(--line-2); color: var(--ink); }
.mona-btn--ghost:hover  { border-color: var(--ink); }
.mona-band--dark .mona-btn--ghost { border-color: var(--line-dark); color: var(--on-dark); }
.mona-band--dark .mona-btn--ghost:hover { border-color: var(--on-dark); background: rgba(255,255,255,.06); }

/* Link "xem tất cả" — chữ + mũi tên, có gạch chân chạy khi hover */
.mona-more {
	display: inline-flex; align-items: center; gap: 7px;
	font-family: var(--f-display); font-weight: 700; font-size: var(--t-small);
	color: var(--brand-ink); white-space: nowrap; min-height: var(--tap);
}
.mona-band--dark .mona-more { color: var(--sun); }
.mona-more svg { transition: transform var(--dur) var(--ease); }
.mona-more:hover svg { transform: translateX(4px); }

/* ── Lưới thẻ ──────────────────────────────────────────────────────────────
   Bốn cột trên desktop là nhịp chuẩn của một trang bán hàng: đủ để so sánh
   cạnh nhau mà không phải cuộn. 2 cột ở tablet, 2 cột ở điện thoại — KHÔNG
   xuống 1 cột, vì thẻ sản phẩm vuông ở 1 cột chiếm gần trọn màn hình và
   người mua mất khả năng lướt so sánh. */
/* Nới từ clamp(12px, 1.3vw, 20px). 19px giữa hai thẻ ở 1440px là lưới của một
   trang liệt kê; 28px là lưới của một cửa hàng. Khoảng hở giữa các thẻ làm
   nhiều cho cảm giác cao cấp hơn bất cứ hiệu ứng nào đặt lên chính cái thẻ. */
.mona-grid { display: grid; gap: clamp(14px, 1.9vw, 28px); }
.mona-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* Trên màn rất rộng, thêm cột — kéo một thẻ to gấp rưỡi chỉ làm ảnh sản phẩm
   1200px bị phóng lên và chữ trong thẻ dài quá tầm đọc. */
@media (min-width: 2400px) { .mona-grid--4 { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.mona-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mona-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 1000px) { .mona-grid--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px)  {
	.mona-grid--4, .mona-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px)  {
	/* Thẻ đánh giá và thẻ bài viết về MỘT cột. Ở 320px, hai cột nghĩa là mỗi
	   thẻ rộng 130px — không đọc được, và min-content của nó đẩy cả lưới rộng
	   hơn khung. Lưới --4 (sản phẩm) giữ hai cột vì thẻ sản phẩm dẫn bằng ảnh
	   vuông, vẫn nhận ra được ở khổ đó. */
	.mona-grid--3 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 520px)  { .mona-grid--2 { grid-template-columns: minmax(0, 1fr); } }

/* ── Reveal ────────────────────────────────────────────────────────────────
   Rule nằm dưới .js, nên script bị chặn thì thấy đủ trang chứ không trắng. */
.js .mona-reveal { opacity: 0; transform: translateY(12px);
	transition: opacity .5s var(--ease), transform .5s var(--ease);
	transition-delay: calc(var(--i, 0) * 45ms); }
.js .mona-reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
	.js .mona-reveal { opacity: 1; transform: none; transition: none; }
	*, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* Khoá cuộn trang nền khi popup mở. Bù đúng bề rộng thanh cuộn đã mất bằng
   padding-right (JS đo và đặt --mona-sbw) để trang không giật ngang. Khe padding
   nằm sau backdrop tối nên không nhìn thấy. */
html.mona-scroll-lock { overflow: hidden; padding-right: var(--mona-sbw, 0px); }