/*
 * Trang nội dung: bài viết, trang tĩnh, liên hệ, giỏ hàng, thanh toán,
 * tài khoản, tìm kiếm, 404.
 * Phụ thuộc: tokens.css, base.css, components.css, pages.css.
 */

/* ===============================================================
 * ĐẦU TRANG DÙNG CHUNG
 * =============================================================== */

.page-hero {
	padding-block: var(--sp-8) var(--sp-7);
	border-bottom: 1px solid var(--c-line-soft);
	text-align: center;
}

.page-hero__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--sp-3);
	max-width: 720px;
	margin-inline: auto;
}

.page-hero--left {
	text-align: left;
}

.page-hero--left .page-hero__inner {
	align-items: flex-start;
	margin-inline: 0;
}

/* ===============================================================
 * BÀI VIẾT
 * =============================================================== */

.article-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: var(--sp-7) var(--sp-5);
}

.article-card {
	display: flex;
	flex-direction: column;
	gap: var(--sp-3);
}

.article-card__media {
	display: block;
}

.article-card__img {
	transition: transform var(--dur-slow) var(--ease);
}

.article-card:hover .article-card__img {
	transform: scale(1.03);
}

.article-card__cat {
	font-size: var(--fs-2xs);
	font-weight: var(--fw-medium);
	letter-spacing: var(--ls-widest);
	text-transform: uppercase;
	color: var(--c-accent-text);
	text-decoration: none;
}

.article-card__title {
	font-family: var(--f-head);
	font-size: var(--fs-lg);
	font-weight: var(--fw-medium);
	line-height: var(--lh-snug);
	letter-spacing: 0;
	margin: 0;
}

.article-card__title a {
	text-decoration: none;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.article-card__excerpt {
	font-size: var(--fs-sm);
	color: var(--c-text-muted);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.article-card__date {
	font-size: var(--fs-xs);
	color: var(--c-muted);
	font-variant-numeric: tabular-nums;
}

/* Bộ lọc chuyên mục dạng hàng chip. */
.cat-filter {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2);
	padding-bottom: var(--sp-6);
}

.cat-filter__item {
	padding: var(--sp-2) var(--sp-4);
	border: 1px solid var(--c-border);
	font-size: var(--fs-xs);
	letter-spacing: var(--ls-wide);
	text-transform: uppercase;
	text-decoration: none;
	transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}

.cat-filter__item:hover,
.cat-filter__item[aria-current='true'] {
	background: var(--c-navy);
	border-color: var(--c-navy);
	color: var(--c-white);
}

/* --------------------------------------------------------------
 * BÀI VIẾT CHI TIẾT
 * -------------------------------------------------------------- */

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

.entry__head {
	display: flex;
	flex-direction: column;
	gap: var(--sp-4);
	max-width: var(--container-text);
	margin: 0 auto var(--sp-7);
	text-align: center;
	align-items: center;
}

.entry__meta {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--sp-2) var(--sp-4);
	font-size: var(--fs-xs);
	color: var(--c-text-muted);
}

.entry__hero {
	margin-bottom: var(--sp-8);
}

.entry__body {
	max-width: var(--container-text);
	margin-inline: auto;
}

/* Cỡ chữ bài dài lớn hơn mặc định cho dễ đọc. */
.entry__body.prose {
	font-size: var(--fs-md);
	line-height: var(--lh-loose);
	color: var(--c-text);
}

.entry__share {
	display: flex;
	align-items: center;
	gap: var(--sp-4);
	max-width: var(--container-text);
	margin: var(--sp-8) auto 0;
	padding-top: var(--sp-5);
	border-top: 1px solid var(--c-line-soft);
	font-size: var(--fs-xs);
	letter-spacing: var(--ls-wide);
	text-transform: uppercase;
	color: var(--c-text-muted);
}

/* ===============================================================
 * TRANG TĨNH / GIỚI THIỆU
 * =============================================================== */

.about-split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	gap: var(--sp-9);
	padding-block: var(--sp-section);
}

.about-split--reverse .about-split__media {
	order: -1;
}

@media (max-width: 960px) {
	.about-split {
		grid-template-columns: 1fr;
		gap: var(--sp-6);
	}

	.about-split--reverse .about-split__media {
		order: 0;
	}
}

.stat-row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: var(--sp-6);
	padding-block: var(--sp-8);
	border-block: 1px solid var(--c-line-soft);
}

.stat {
	display: flex;
	flex-direction: column;
	gap: var(--sp-1);
	text-align: center;
}

.stat__value {
	font-family: var(--f-head);
	font-size: var(--fs-2xl);
	font-weight: var(--fw-medium);
	font-variant-numeric: tabular-nums;
	color: var(--c-accent-text);
}

.stat__label {
	font-size: var(--fs-xs);
	letter-spacing: var(--ls-wide);
	text-transform: uppercase;
	color: var(--c-text-muted);
}

/* ===============================================================
 * LIÊN HỆ
 * =============================================================== */

.contact-layout {
	display: grid;
	grid-template-columns: 1fr 1.1fr;
	gap: var(--sp-9);
	align-items: start;
	padding-block: var(--sp-section);
}

@media (max-width: 960px) {
	.contact-layout {
		grid-template-columns: 1fr;
		gap: var(--sp-7);
	}
}

.contact-info {
	display: flex;
	flex-direction: column;
	gap: var(--sp-5);
}

.contact-item {
	display: flex;
	gap: var(--sp-4);
	align-items: flex-start;
}

.contact-item svg {
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	margin-top: 3px;
	color: var(--c-gold-ink);
}

.contact-item__label {
	font-size: var(--fs-xs);
	letter-spacing: var(--ls-wide);
	text-transform: uppercase;
	color: var(--c-text-muted);
	display: block;
	margin-bottom: 2px;
}

.contact-item a {
	text-decoration: none;
}

.contact-item a:hover {
	color: var(--c-accent-text);
}

.form-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--sp-4);
}

.form-grid__full {
	grid-column: 1 / -1;
}

@media (max-width: 480px) {
	.form-grid {
		grid-template-columns: 1fr;
	}
}

.map-embed {
	width: 100%;
	border: 0;
	filter: grayscale(1);
	transition: filter var(--dur) var(--ease);
}

.map-embed:hover {
	filter: grayscale(0);
}

/* ===============================================================
 * GIỎ HÀNG
 * =============================================================== */

.cart-layout {
	display: grid;
	grid-template-columns: 1fr 360px;
	gap: var(--sp-8);
	align-items: start;
	padding-block: var(--sp-7) var(--sp-section);
	padding-top: 0;
}

@media (max-width: 960px) {
	.cart-layout {
		grid-template-columns: 1fr;
		gap: var(--sp-6);
	}
}

.cart-table {
	width: 100%;
	font-size: var(--fs-sm);
}

.cart-table th {
	padding: 0 var(--sp-3) var(--sp-3) 0;
	border-bottom: 1px solid var(--c-border);
	text-align: left;
	font-family: var(--f-ui);
	font-size: var(--fs-2xs);
	font-weight: var(--fw-semibold);
	letter-spacing: var(--ls-wide);
	text-transform: uppercase;
	color: var(--c-text-muted);
}

.cart-table td {
	padding: var(--sp-4) var(--sp-3) var(--sp-4) 0;
	border-bottom: 1px solid var(--c-line-soft);
	vertical-align: middle;
}

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

.cart-item__media {
	flex: 0 0 auto;
	width: 84px;
}

.cart-item__title {
	font-size: var(--fs-sm);
	font-weight: var(--fw-medium);
	text-decoration: none;
}

/*
 * Màn hình hẹp: bảng giỏ hàng thành danh sách thẻ.
 *
 * Bảng cần khoảng 610px mới đủ chỗ. Dưới ngưỡng đó, `.scroll-x` vẫn cứu được
 * về mặt kỹ thuật — nhưng cái giá là cột tên sản phẩm co còn 79px, tên đồng hồ
 * xuống bốn dòng, và người dùng phải kéo ngang để thấy giá. Trên một trang mà
 * việc duy nhất cần làm là xác nhận mình mua gì và hết bao nhiêu, đó là hỏng.
 *
 * Markup đã sẵn sàng cho bố cục này: mỗi ô giá trị mang `data-title` để lấy
 * làm nhãn khi hàng tiêu đề biến mất.
 */
@media (max-width: 700px) {
	.cart-table,
	.cart-table tbody,
	.cart-table tr,
	.cart-table td {
		display: block;
	}

	.cart-table thead {
		display: none;
	}

	.cart-table .cart_item {
		position: relative;
		margin-bottom: var(--sp-4);
		padding: var(--sp-4);
		border: 1px solid var(--c-border);
		border-radius: var(--r-field);
	}

	.cart-table .cart_item td {
		padding: 0;
		border-bottom: 0;
	}

	/* Khối sản phẩm nằm trên, chừa lề phải cho nút xoá ở góc. */
	.cart-table .cart_item td:first-child {
		margin-bottom: var(--sp-4);
		padding-right: var(--sp-8);
		padding-bottom: var(--sp-4);
		border-bottom: 1px solid var(--c-line-soft);
	}

	/* Ba ô số liệu thành hàng "nhãn — giá trị". */
	.cart-table .cart_item td[data-title] {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--sp-4);
		min-height: 32px;
		padding-block: var(--sp-2);
	}

	.cart-table .cart_item td[data-title]::before {
		content: attr(data-title);
		font-family: var(--f-ui);
		font-size: var(--fs-2xs);
		font-weight: var(--fw-semibold);
		letter-spacing: var(--ls-wide);
		text-transform: uppercase;
		color: var(--c-text-muted);
	}

	/*
	 * Nút xoá về góc trên bên phải thẻ. Lề âm -6px của `.chip__remove` là để
	 * giữ nguyên vị trí thị giác khi nút nằm trong dòng; ở đây ô chứa nó đã
	 * được định vị tuyệt đối nên lề âm chỉ làm lệch đi 6px.
	 */
	.cart-table .cart_item td:last-child {
		position: absolute;
		top: var(--sp-3);
		right: var(--sp-3);
	}

	.cart-table .cart_item td:last-child .chip__remove {
		margin: 0;
	}
}

/*
 * Ô số lượng.
 *
 * Đây là một ô nhập ghép từ ba phần, nên viền phải trùng với `.field__input`:
 * cùng bo góc, cùng độ đậm. `overflow: hidden` để nền hover của nút không tràn
 * ra ngoài góc bo.
 */
.qty {
	display: inline-flex;
	align-items: center;
	overflow: hidden;
	border: 1px solid var(--c-field-border);
	border-radius: var(--r-field);
	transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

/*
 * Vòng focus vẽ trên cả cụm chứ không riêng ô số: người dùng bàn phím tab vào
 * đây thì thứ họ cần thấy là ranh giới của cả bộ tăng/giảm.
 */
.qty:focus-within {
	border-color: var(--c-gold-ink);
	box-shadow: 0 0 0 2px var(--c-gold-ring);
}

.qty__btn {
	width: 36px;
	height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--c-text-muted);
	transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.qty__btn:hover {
	color: var(--c-text);
	background-color: var(--c-cream);
}

.qty__input {
	width: 44px;
	height: 40px;
	border: 0;
	border-inline: 1px solid var(--c-field-border);
	text-align: center;
	font-variant-numeric: tabular-nums;
	background: transparent;
}

.qty__input:focus {
	outline: none;
}

/* Ẩn mũi tên tăng giảm mặc định của trình duyệt. */
.qty__input::-webkit-outer-spin-button,
.qty__input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.qty__input[type='number'] {
	-moz-appearance: textfield;
	appearance: textfield;
}

/* Bảng tổng tiền. */
.totals {
	display: flex;
	flex-direction: column;
	gap: var(--sp-4);
	padding: var(--sp-6);
	background: var(--c-mist);
	position: sticky;
	top: calc(var(--header-h) + var(--sp-4));
}

@media (max-width: 960px) {
	.totals {
		position: static;
	}
}

.totals__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--sp-4);
	font-size: var(--fs-sm);
	color: var(--c-text-muted);
}

.totals__row--grand {
	padding-top: var(--sp-4);
	border-top: 1px solid var(--c-border);
	font-size: var(--fs-md);
	color: var(--c-text);
}

.totals__row--grand strong {
	font-size: var(--fs-lg);
	font-variant-numeric: tabular-nums;
}

.cart-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--sp-4);
	padding-block: var(--sp-11);
	text-align: center;
}

/* ===============================================================
 * THANH TOÁN
 * =============================================================== */

.checkout-layout {
	display: grid;
    grid-template-columns: 1fr 400px;
    gap: var(--sp-8);
    align-items: start;
    padding-block: var(--sp-7) var(--sp-section);
    padding-top: 0;    padding-bottom: 0;
}

@media (max-width: 960px) {
	.checkout-layout {
		grid-template-columns: 1fr;
	}

	/* Trên di động đưa tóm tắt đơn lên trước form cho dễ đối chiếu. */
	.checkout-layout__summary {
		order: -1;
	}
}

.checkout-section {
	display: flex;
	flex-direction: column;
	gap: var(--sp-4);
	padding-bottom: var(--sp-7);
	margin-bottom: var(--sp-7);
	border-bottom: 1px solid var(--c-line-soft);
	padding-top: 5px;
 	margin-bottom: 0;
    padding-bottom: 0;
}

.checkout-section:last-child {
	border-bottom: 0;
	margin-bottom: 0;
	padding-bottom: 0;
}

.checkout-section__title {
	font-family: var(--f-head);
	font-size: var(--fs-lg);
	margin: 0 0 var(--sp-2);
}

/* Ô chọn phương thức thanh toán/vận chuyển. */
.choice {
	display: flex;
	align-items: flex-start;
	gap: var(--sp-3);
	padding: var(--sp-4);
	border: 1px solid var(--c-border);
	cursor: pointer;
	transition: border-color var(--dur) var(--ease);
}

.choice:hover {
	border-color: var(--c-gold);
}

.choice input {
	margin-top: 3px;
	accent-color: var(--c-gold-ink);
}

.choice__title {
	font-size: var(--fs-sm);
	font-weight: var(--fw-medium);
	display: block;
}

.choice__note {
	font-size: var(--fs-xs);
	color: var(--c-text-muted);
}

.order-summary {
	display: flex;
	flex-direction: column;
	gap: var(--sp-4);
	padding: var(--sp-6);
	background: var(--c-mist);
}

.order-line {
	display: flex;
	gap: var(--sp-3);
	align-items: center;
	font-size: var(--fs-sm);
}

.order-line__media {
	flex: 0 0 auto;
	width: 56px;
}

/* ===============================================================
 * TÀI KHOẢN
 * =============================================================== */

.account-layout {
	display: grid;
	grid-template-columns: 240px 1fr;
	gap: var(--sp-8);
	align-items: start;
	padding-block: var(--sp-7) var(--sp-section);
}

@media (max-width: 960px) {
	.account-layout {
		grid-template-columns: 1fr;
		gap: var(--sp-5);
	}
}

.account-nav {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--c-line-soft);
}

.account-nav__link {
	padding: var(--sp-4) var(--sp-5);
	border-bottom: 1px solid var(--c-line-soft);
	font-size: var(--fs-sm);
	text-decoration: none;
	transition: background var(--dur) var(--ease);
}

.account-nav__link:last-child {
	border-bottom: 0;
}

.account-nav__link:hover {
	background: var(--c-mist);
}

.account-nav__link[aria-current='page'] {
	background: var(--c-navy);
	color: var(--c-white);
}

.auth-card {
	max-width: 460px;
	margin-inline: auto;
	padding: var(--sp-8);
	border: 1px solid var(--c-line-soft);
	display: flex;
	flex-direction: column;
	gap: var(--sp-5);
}

/* Bảng đơn hàng. */
.orders {
	width: 100%;
	font-size: var(--fs-sm);
}

.orders th {
	padding: 0 var(--sp-3) var(--sp-3) 0;
	border-bottom: 1px solid var(--c-border);
	text-align: left;
	font-family: var(--f-ui);
	font-size: var(--fs-2xs);
	font-weight: var(--fw-semibold);
	letter-spacing: var(--ls-wide);
	text-transform: uppercase;
	color: var(--c-text-muted);
	white-space: nowrap;
}

.orders td {
	padding: var(--sp-4) var(--sp-3) var(--sp-4) 0;
	border-bottom: 1px solid var(--c-line-soft);
}

/* ===============================================================
 * TÌM KIẾM & 404
 * =============================================================== */

.search-form-lg {
	display: flex;
	gap: 0;
	max-width: 560px;
	margin-inline: auto;
	width: 100%;
}

.search-form-lg .field__input {
	flex: 1;
	border-right: 0;
	min-height: 56px;
}

.search-form-lg .btn {
	min-height: 56px;
}

.notice-center {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--sp-5);
	padding-block: var(--sp-11);
	text-align: center;
}

.notice-center__code {
	font-family: var(--f-head);
	font-size: clamp(5rem, 16vw, 10rem);
	line-height: 1;
	font-weight: var(--fw-medium);
	color: var(--c-gold);
}

/*
 * Khối văn bản căn giữa trang.
 *
 * Thay cho `style="margin-inline: auto"` viết thẳng trong template. Style
 * nội tuyến có độ ưu tiên cao hơn mọi selector class nên không ai đè lại
 * được, kể cả khi cần — và nó nằm ngoài tầm với của mọi công cụ CSS.
 */
.prose--centered {
	margin-inline: auto;
}

/*
 * Hàng nút thao tác dưới bảng giỏ hàng.
 *
 * Nút "Cập nhật giỏ hàng" chỉ cần khi không có JavaScript; initQuantity() gắn
 * class `--live` rồi tự gửi form khi số lượng đổi.
 */
.cart-table__actions {
	padding-top: var(--sp-5);
	text-align: right;
}

/*
 * `display: none` chứ không phải kỹ thuật giấu-nhưng-vẫn-đọc-được: nút này vẫn
 * là submitter mà JS bấm bằng `click()` — vẫn chạy khi không hiển thị — còn
 * giấu bằng clip thì để lại một nút bấm được bằng phím Tab mà không ai thấy.
 */
.woocommerce-cart-form--live .cart-table__actions {
	padding-top: 0;
}

.woocommerce-cart-form--live .cart-table__update {
	display: none;
}

.woocommerce-notices-wrapper {
	margin-top: var(--sp-3);
	margin-bottom: 0;
}

/* ---------------------------------------------------------------
 * DRAWER GIỎ HÀNG
 *
 * `.drawer__content` là khung mà WooCommerce thay innerHTML khi cập nhật
 * giỏ bằng AJAX. Nó chen vào giữa `.drawer` và hai phần body/foot, nên phải
 * tiếp tục chuỗi flex — thiếu bước này thì phần chân trôi lên giữa drawer
 * thay vì bám đáy.
 * --------------------------------------------------------------- */

.drawer__content {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	/* Không có min-height: 0 thì mục flex không co dưới nội dung, và
	   overflow-y: auto của .drawer__body không bao giờ kích hoạt. */
	min-height: 0;
}

.mini-cart {
	display: flex;
	flex-direction: column;
	gap: var(--sp-5);
	margin: 0;
	padding: 0;
	list-style: none;
}

.mini-cart__item {
	display: flex;
	align-items: flex-start;
	gap: var(--sp-4);
}

.mini-cart__media {
	flex: 0 0 auto;
	width: 84px;
}

.mini-cart__info {
	flex: 1;
	/* Tên sản phẩm dài không được đẩy nút xoá ra khỏi drawer. */
	min-width: 0;
}

/*
 * Bỏ gạch chân. Base style gạch chân mọi liên kết để chữ trong bài viết đọc
 * ra là link; ở đây cả dòng đã là một mục sản phẩm nên gạch chân chỉ làm rối.
 * Cùng cách xử lý với .cart-item__title trong bảng giỏ hàng.
 */
.mini-cart__title {
	font-size: var(--fs-sm);
	font-weight: var(--fw-medium);
	line-height: var(--lh-20);
	color: var(--c-text);
	text-decoration: none;
	overflow-wrap: break-word;
	transition: color var(--dur) var(--ease);
}

.mini-cart__title:hover {
	color: var(--c-gold-ink);
}

/*
 * Vùng bấm 32×32 cho nút xoá, dù dấu ✕ chỉ rộng 11px.
 *
 * Đây là nút PHÁ HỦY và không có bước xác nhận. Vùng bấm bé hơn ngón tay
 * nghĩa là người dùng vừa khó bấm trúng khi muốn xoá, vừa dễ bấm trúng khi
 * không muốn. Lề âm giữ nguyên vị trí thị giác của dấu ✕.
 */
.mini-cart__remove,
.cart-table .chip__remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 32px;
	height: 32px;
	margin: -6px;
	color: var(--c-muted);
	font-size: var(--fs-sm);
	line-height: 1;
	transition: color var(--dur) var(--ease);
}

.mini-cart__remove:hover,
.mini-cart__remove:focus-visible,
.cart-table .chip__remove:hover,
.cart-table .chip__remove:focus-visible {
	color: var(--c-danger);
}

.mini-cart__subtotal {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-4);
}

.mini-cart__empty {
	margin-bottom: var(--sp-5);
}