/*
 * Reset, kiểu chữ nền và lớp tiện ích.
 * Phụ thuộc: tokens.css phải nạp trước.
 */

/* ---------------------------------------------------------------
 * RESET
 * --------------------------------------------------------------- */

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	margin: 0;
	background: var(--c-bg);
	color: var(--c-text);
	font-family: var(--f-ui);
	font-size: var(--fs-base);
	font-weight: var(--fw-light);
	/*
	 * Số nguyên px, không phải hệ số 1.6.
	 *
	 * Đây là sửa tận gốc: 16px × 1.6 = 25,6px, và MỌI container không tự
	 * khai báo line-height đều kế thừa con số lẻ đó. Vá từng component thì
	 * hết cái này lại lòi cái khác. Đặt 26px ở body là mọi thứ kế thừa đều
	 * rơi đúng lưới pixel, kể cả component viết sau này.
	 *
	 * 26/16 = 1,625 — chênh 1,6 không đáng kể về nhịp đọc.
	 */
	line-height: var(--lh-16);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
figure,
blockquote,
dl,
dd {
	margin: 0;
}

ul,
ol {
	margin: 0;
	padding: 0;
}

/* Chỉ bỏ bullet ở danh sách bố cục; danh sách trong bài viết giữ nguyên. */
nav ul,
nav ol,
.list-reset {
	list-style: none;
}

img,
picture,
video,
canvas,
svg {
	display: block;
	max-width: 100%;
	height: auto;
}

/*
 * Icon có kích thước khai báo sẵn thì KHÔNG áp quy tắc co giãn ở trên.
 *
 * `max-width: 100%` tính theo khung chứa. Khi khung chứa là một flex
 * container tự co theo nội dung — ví dụ `<a class="..."><svg></a>` không có
 * padding — thì bề rộng khung phụ thuộc vào icon, mà icon lại phụ thuộc vào
 * khung: vòng lặp. Trình duyệt cắt vòng lặp bằng cách coi phần trăm đó là 0,
 * và icon co xuống đúng 0px.
 *
 * Đã đo trên thật: cụm mạng xã hội ở header có 5 icon 18px, khối cha rộng
 * 64px — vừa đúng phần khoảng cách giữa các icon — và cả 5 icon rộng 0px.
 * Chúng biến mất hoàn toàn chứ không phải nhỏ đi.
 *
 * Mọi icon của theme đều do `thekronos_icon()` in ra kèm width/height, nên
 * selector này nhắm đúng chúng và không đụng tới SVG minh hoạ cần co giãn.
 */
svg[width][height] {
	max-width: none;
	flex-shrink: 0;
}

/*
 * Phải đứng SAU khối trên. `svg { display: block }` ở trên có cùng độ ưu
 * tiên với quy tắc mặc định của trình duyệt cho [hidden], nhưng thắng nhờ
 * đứng sau — nên một <svg hidden> vẫn hiện ra. Đã gặp thật: icon hamburger
 * và icon X hiện cùng lúc.
 */
[hidden] {
	display: none !important;
}

button,
input,
select,
textarea {
	font: inherit;
	color: inherit;
}

button {
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
}

table {
	border-collapse: collapse;
	width: 100%;
}

a {
	color: inherit;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.22em;
}

.skip-link {
	line-height: var(--lh-14);
}

/* ---------------------------------------------------------------
 * KIỂU CHỮ NỀN
 * --------------------------------------------------------------- */

h1,
h2,
h3,
h4 {
	font-family: var(--f-head);
	font-weight: var(--fw-medium);
	line-height: var(--lh-tight);
	letter-spacing: var(--ls-tight);
	text-wrap: balance;
}

h1 {
	font-size: var(--fs-hero);
}

h2 {
	font-size: var(--fs-section);
}

h3 {
	font-size: var(--fs-xl);
}

h4 {
	font-size: var(--fs-lg);
}

h5,
h6 {
	font-family: var(--f-ui);
	font-size: var(--fs-sm);
	font-weight: var(--fw-semibold);
	letter-spacing: var(--ls-wide);
	text-transform: uppercase;
}

p {
	text-wrap: pretty;
}

strong,
b {
	font-weight: var(--fw-semibold);
}

small {
	font-size: var(--fs-sm);
}

/*
 * Nhãn viết hoa giãn rộng — mô-típ lặp đi lặp lại trong giao diện LWC.
 * Xuất hiện ở eyebrow, tên thương hiệu trên thẻ sản phẩm, nhãn nút.
 */
.eyebrow {
	font-family: var(--f-ui);
	font-size: var(--fs-2xs);
	line-height: var(--lh-11);
	font-weight: var(--fw-medium);
	letter-spacing: var(--ls-widest);
	text-transform: uppercase;
	color: var(--c-accent-text);
	margin: 0;
}

/* ---------------------------------------------------------------
 * BỐ CỤC DÙNG CHUNG
 * --------------------------------------------------------------- */

.container {
	width: 100%;
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.container--narrow {
	max-width: var(--container-narrow);
}

.container--text {
	max-width: var(--container-text);
}

.section {
	padding-block: var(--sp-section);
}

.section--tight {
	padding-block: var(--sp-7);
}

/* Nền tối: đã đảo token ở .on-dark, chỉ cần sơn nền. */
.on-dark {
	background: var(--c-bg);
	color: var(--c-text);
}

.stack {
	display: flex;
	flex-direction: column;
}

.stack--2 { gap: var(--sp-2); }
.stack--3 { gap: var(--sp-3); }
.stack--4 { gap: var(--sp-4); }
.stack--5 { gap: var(--sp-5); }
.stack--6 { gap: var(--sp-6); }
.stack--8 { gap: var(--sp-8); }

.cluster {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sp-4);
}

/* ---------------------------------------------------------------
 * TIÊU ĐỀ SECTION
 * --------------------------------------------------------------- */

.section-head {
	display: flex;
	flex-direction: column;
	gap: var(--sp-3);
	align-items: center;
	text-align: center;
	margin-bottom: var(--sp-8);
}

.section-head--left {
	align-items: flex-start;
	text-align: left;
}

.section-head__title {
	margin: 0;
}

.section-head__lead {
	max-width: var(--measure);
	color: var(--c-text-muted);
	font-size: var(--fs-md);
}

/*
 * Đường kẻ vàng mảnh dưới tiêu đề — chi tiết trang trí của LWC.
 * Chỉ trang trí nên ẩn khỏi trình đọc màn hình.
 */
.section-head__rule {
	width: 52px;
	height: 1px;
	background: var(--c-gold);
	border: 0;
	margin: var(--sp-1) 0 0;
}

/* ---------------------------------------------------------------
 * TIẾP CẬN
 * --------------------------------------------------------------- */

/* Ẩn khỏi mắt nhưng vẫn đọc được bằng trình đọc màn hình. */
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.skip-link:focus {
	position: fixed;
	top: var(--sp-3);
	left: var(--sp-3);
	z-index: var(--z-modal);
	width: auto;
	height: auto;
	margin: 0;
	padding: var(--sp-3) var(--sp-5);
	clip-path: none;
	background: var(--c-navy);
	color: var(--c-white);
	font-size: var(--fs-sm);
	line-height: var(--lh-14);
}

/* Chỉ hiện viền focus khi điều hướng bằng bàn phím, không hiện khi bấm chuột. */
:focus-visible {
	outline: 2px solid var(--c-gold);
	outline-offset: 3px;
}

:focus:not(:focus-visible) {
	outline: none;
}

/*
 * Giảm chuyển động — nhưng KHÔNG xoá sạch.
 *
 * Cách viết phổ biến là ép mọi `transition-duration` về 0,01ms. Nó tắt được
 * hiệu ứng trang trí, nhưng cũng biến drawer trượt và header ẩn/hiện thành
 * NHẢY tức thì: panel không trượt vào mà xuất hiện đột ngột, header giật khi
 * đổi trạng thái. Người dùng đọc đó là lỗi giao diện, không phải là tôn trọng
 * lựa chọn của họ. Đã gặp thật trên máy bật "tắt hiệu ứng động" của Windows.
 *
 * Chia làm hai loại:
 *
 * - CHUYỂN ĐỘNG TRANG TRÍ — marquee, hiệu ứng hiện dần theo bậc thang, ảnh
 *   phóng khi rê chuột: tắt hẳn. Đây mới là thứ gây khó chịu tiền đình.
 * - CHUYỂN TIẾP CHỨC NĂNG — drawer, menu, đổi màu khi rê chuột: rút ngắn còn
 *   khoảng 120–150ms. Đủ ngắn để không ai thấy "đang chuyển động", đủ dài để
 *   mắt bám được cái gì vừa đổi.
 */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
	}

	:root {
		--dur: 120ms;
		--dur-slow: 150ms;
		--dur-panel-in: 160ms;
		--dur-panel-out: 120ms;
		--dur-panel-content: 100ms;
		--dur-underline: 120ms;
	}

	/*
	 * Nội dung bên trong drawer hiện ra cùng lúc với panel, không xếp bậc
	 * thang và không trượt lên. Đó là phần trang trí thuần tuý.
	 */
	.drawer__head,
	.drawer__body > *,
	.mini-cart__item,
	.drawer__foot,
	.nav-panel > * {
		transform: none !important;
		transition-delay: 0ms !important;
	}
}

/* ---------------------------------------------------------------
 * TIỆN ÍCH
 * --------------------------------------------------------------- */

.text-center { text-align: center; }
.text-muted { color: var(--c-text-muted); }
.nowrap { white-space: nowrap; }

/* Số xếp cột thẳng hàng — dùng cho giá và bảng thông số. */
.tnum { font-variant-numeric: tabular-nums; }

/*
 * Nội dung rộng tự cuộn ngang trong khung của nó, không đẩy cả trang.
 *
 * `min-width: 0` là phần bắt buộc, không phải thừa. Item của grid và flex
 * mặc định có `min-width: auto`, nghĩa là chúng KHÔNG co xuống dưới bề rộng
 * nội dung bên trong. Chỉ đặt `overflow-x: auto` là chưa đủ: một bảng rộng
 * 540px vẫn kéo giãn cả cột grid chứa nó, và trang tràn ngang trên di động.
 */
/*
 * `position: relative` cũng bắt buộc, và đây là cái bẫy khó thấy nhất.
 *
 * `overflow: auto` chỉ cắt được những phần tử con có KHỐI CHỨA nằm bên
 * trong nó. Một phần tử `position: absolute` mà không có tổ tiên nào được
 * định vị thì khối chứa của nó là viewport — nó thoát ra ngoài vùng cắt và
 * kéo giãn cả document.
 *
 * Trường hợp thật gặp phải: `<span class="screen-reader-text">Xoá</span>`
 * trong ô tiêu đề của bảng giỏ hàng. Span rộng 1px đó nằm ở toạ độ x=545
 * của bảng rộng 553px, và một mình nó làm trang tràn ngang trên di động.
 */
.scroll-x {
	position: relative;
	min-width: 0;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

/*
 * Cùng lý do trên, áp cho mọi item trực tiếp của các layout dạng grid.
 * Không có dòng này thì một bảng hay đoạn code dài bên trong sẽ phá vỡ
 * bố cục ở màn hình hẹp.
 */
.stack,
.shop-layout > *,
.product-detail > *,
.cart-layout > *,
.checkout-layout > *,
.account-layout > *,
.contact-layout > *,
.about-split > * {
	min-width: 0;
}

/*
 * Giữ đúng tỉ lệ khung ảnh sản phẩm để lưới không nhảy khi ảnh tải xong.
 *
 * `display: block` là bắt buộc, không phải cho đẹp: aspect-ratio không có
 * tác dụng lên phần tử inline. Class này hay được đặt lên <span> (vì nằm
 * trong <a>, mà <a> không được chứa <div>), lúc đó khung sẽ cao 0px và ảnh
 * biến mất hoàn toàn.
 */
.ratio {
	display: block;
	position: relative;
	overflow: hidden;
	background: var(--c-mist);
}

.ratio > img,
.ratio > video,
.ratio > iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ratio--square { aspect-ratio: 1 / 1; }
.ratio--product { aspect-ratio: 4 / 5; }
.ratio--wide { aspect-ratio: 16 / 9; }
.ratio--hero { aspect-ratio: 21 / 9; }