/**
 * C-14 · CSS LAYOUT — header · drawer · footer · nút nổi.
 *
 * Task T-213. Dùng token của `_tokens.css` (bước 03a) — file đó PHẢI nạp
 * trước file này, nếu không biến chưa tồn tại và mọi màu về mặc định trình
 * duyệt.
 *
 * ⚠️ File này KHÔNG nằm trong ước lượng gốc của T-213 (bảng task chỉ ghi
 *    `template-parts/layout/`). Nhưng T-219 chỉ phủ COMPONENT (nút, form,
 *    card, bảng, phân trang, breadcrumb) — không task nào sở hữu CSS layout.
 *    Mà drawer không có CSS thì không trượt được, header không sticky được,
 *    tức DoD của T-213.2 không kiểm được. Đã ghi lại trong ghi chú task.
 *
 * Quy ước: BEM, biến `--c-*` / `--sp-*` / `--z-*` từ _tokens.css.
 */

/* =========================================================================
   0. TIỆN ÍCH DÙNG CHUNG
   ⚠️ PHẢI đứng TRƯỚC các khối component bên dưới.
   Bản đầu đặt `.btn` ở cuối file; nó cùng độ đặc hiệu với
   `.site-header__cta { display: none }` nhưng đứng sau, nên THẮNG — và nút
   "Nhận báo giá" hiện ở mobile trái spec §1.1. Chỉ soi ảnh chụp mới thấy,
   test "không cuộn ngang" vẫn xanh. Utility đi trước, component đi sau.
   ====================================================================== */

.skip-link.screen-reader-text {
	position: absolute;
	left: -9999px;
}

.skip-link.screen-reader-text:focus {
	left: 8px;
	top: 8px;
	z-index: var(--z-toast);
	width: auto;
	height: auto;
	padding: 10px 16px;
	color: var(--c-text-invert);
	background: var(--c-primary);
	border-radius: var(--radius-sm);
}

/* ⚠️ `.btn` và `.btn--accent` ĐÃ CHUYỂN sang `components.css` (C-20 · T-219).
   Bản tạm ở đây sinh ra vì T-213 làm trước T-219 và header cần một cái nút
   để dùng ngay. Giữ hai bản là mở đường cho chúng lệch nhau — và bản ở
   components.css đầy đủ hơn (5 biến thể, 3 cỡ, đủ trạng thái focus/disabled).

   `components.css` nạp TRƯỚC `layout.css` (xem `inc/enqueue.php`), nên phần
   riêng của header bên dưới vẫn ghi đè được khi cần. */

/* =========================================================================
   1. HEADER
   ====================================================================== */

.site-header {
	position: sticky;
	top: 0;
	z-index: var(--z-sticky);
	background: var(--c-bg);
	border-bottom: var(--border-w) solid var(--c-border);
}

/* Đổ bóng khi đã cuộn — lớp do JS gắn, xem assets/js/drawer.js không lo
   phần này; hiện tại chỉ giữ chỗ bằng bóng tĩnh nhẹ. */
.site-header.is-scrolled {
	box-shadow: var(--shadow-sm);
}

/*
 * ⚠️ `--header-h` là chiều cao header DÍNH, và nhiều chỗ khác bám vào nó:
 *    sidebar dính (`components.css` §sidebar), mục lục dính và offset nhảy neo
 *    của trang Giới thiệu. Trước đây mỗi chỗ tự viết `72px`/`60px` — đổi mốc
 *    header là phải nhớ sửa đủ 5 chỗ, và quên một chỗ thì phần tử dính bị header
 *    che mất một dải, lỗi rất khó thấy.
 *
 *    Khai một biến, mọi chỗ đọc theo, đổi mốc chỉ sửa ở đây.
 */
:root {
	--header-h: 60px;
}

.site-header__inner {
	display: flex;
	align-items: center;
	gap: var(--sp-5);
	max-width: var(--container);
	height: var(--header-h);
	margin: 0 auto;
	padding: 0 var(--gutter);
}

.site-header__brand {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
	text-decoration: none;
}

.site-header__logo {
	display: block;
	width: auto;
	height: 36px;
}

.site-header__name {
	font-family: var(--font-heading);
	font-weight: var(--fw-bold);
	font-size: var(--fs-h4);
	color: var(--c-primary);
}

/* Menu ngang chỉ tồn tại từ 992px — dưới đó dùng drawer. */
.site-nav {
	display: none;
}

.site-header__actions {
	display: flex;
	align-items: center;
	gap: var(--sp-1);
	margin-left: auto;
}

/* SP: nút gọi hiện dưới dạng CHỈ ICON — spec §1.1 vẽ header SP là
   [logo] 📞 ☰. Trên màn hẹp, số điện thoại đầy đủ đẩy nút ☰ ra ngoài mép. */
.site-header__phone {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	width: 44px;
	height: 44px;
	font-weight: var(--fw-semi);
	color: var(--c-primary);
	text-decoration: none;
	white-space: nowrap;
	transition: var(--transition);
}

/*
 * Hotline header PHẢI có phản hồi hover — R-06-layout F-06.
 *
 * Đo trước khi sửa: `cursor: pointer` nhưng 0/9 thuộc tính đổi khi rê chuột.
 * Đây là phần tử chuyển đổi đứng ngay cạnh nút "Nhận báo giá", và người vận
 * hành đã báo *"hover không có hiệu ứng"* từ lượt bug đầu tiên — lần đó sửa cho
 * menu chính, chỗ này thì sót.
 *
 * `--c-accent-strong` (#BF4E05) chứ không `--c-accent`: trên nền trắng của
 * header, #BF4E05 được 4,87:1 còn #FC6C06 chỉ 2,88:1 — xem luật hai tông cam ở
 * `design-system.md` §1.5.
 */
.site-header__phone:hover,
.site-header__phone:focus-visible {
	color: var(--c-accent-strong);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.site-header__phone-text {
	display: none;
}

.site-header__cta {
	display: none;
}

/* Nút ☰ — chỉ ở khổ nhỏ. */
.site-header__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;   /* 44px là ngưỡng vùng chạm tối thiểu, đừng thu nhỏ */
	height: 44px;
	padding: 0;
	background: none;
	border: 0;
	cursor: pointer;
}

.site-header__burger,
.site-header__burger::before,
.site-header__burger::after {
	display: block;
	width: 22px;
	height: 2px;
	background: var(--c-primary);
	transition: var(--transition);
}

.site-header__burger::before,
.site-header__burger::after {
	content: "";
	position: relative;
}

.site-header__burger::before {
	top: -7px;
}

.site-header__burger::after {
	top: 5px;
}

/*
 * ⚠️ MỐC 1200px, KHÔNG phải 992px — đây là mốc header ĐỦ CHỖ, không phải mốc
 *    "màn hình rộng".
 *
 *    Đo thực tế nội dung header: logo 132 + menu 8 mục 720 + số ĐT 126 + nút CTA
 *    142 + hai `gap` 40 + padding 48 = **1212px**. Mà `.site-header__inner` là
 *    flex, các item mặc định `min-width: auto` nên KHÔNG co được.
 *
 *    Đặt mốc ở 992 thì suốt dải 992–1200px header cần 1212px trong khung chỉ có
 *    ~1000px ⇒ nó đẩy cả TRANG tràn ngang: đo được **203px** ở khổ 985, còn 2px
 *    ở khổ 1185. Đây là lỗi của header dùng chung nên có ở MỌI trang, và
 *    1024 · 1100 · 1152 · 1180 đều là bề rộng cửa sổ laptop rất thường gặp.
 *
 *    Spec thiết kế §26 định nghĩa *Desktop ≥1200 · Tablet 768–1199 · Mobile
 *    ≤767*. Dưới mốc này dùng nút ☰ + drawer đã có sẵn.
 *
 * ⚠️ 1220 chứ không phải 1200 CHẴN — vì thanh cuộn.
 *
 *    Media query đo theo bề rộng khung nhìn **kể cả thanh cuộn**, còn bố cục
 *    thì chỉ được dùng phần **trừ thanh cuộn** (~15px trên Windows). Đặt đúng
 *    1200 thì ở cửa sổ rộng 1200: media query khớp ⇒ header desktop bật lên,
 *    nhưng chỗ thật chỉ còn 1185 ⇒ tràn 2px. Đo được ở cả ba trang.
 *
 *    1220 = 1200 của thiết kế + phần thanh cuộn ăn mất, để mốc thật sự là
 *    "chỗ dùng được ≥1200". Dải 1200–1219 hiện header tablet — 20px, không ai
 *    nhận ra, đổi lại không còn khổ nào cuộn ngang.
 *
 * ⚠️ Đổi số này phải đổi kèm `assets/js/drawer.js` — nó nghe `matchMedia` cùng
 *    mốc để đóng drawer khi sang khổ desktop. Lệch hai bên thì có dải mà drawer
 *    mở được nhưng không tự đóng.
 */
@media (min-width: 1220px) {
	:root {
		--header-h: 72px;
	}

	.site-header__logo {
		height: 44px;
	}

	.site-nav {
		display: block;
	}

	.site-header__phone,
	.site-header__cta {
		display: inline-flex;
	}

	/* PC hiện SỐ đầy đủ, không chỉ icon (spec §1.1). Phải gỡ cả khoá rộng
	   44px của bản SP, nếu không chữ bị cắt. */
	.site-header__phone {
		width: auto;
		padding: 0 8px;
	}

	.site-header__phone-text {
		display: inline;
	}

	.site-header__toggle {
		display: none;
	}
}

/* ---- Menu 2 tầng ---- */

.site-nav__list,
.site-nav__list ul {
	display: flex;
	gap: var(--sp-1);
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-nav__list li {
	position: relative;
}

.site-nav__list a {
	position: relative;
	display: block;
	padding: 10px 12px;
	font-weight: var(--fw-medium);
	color: var(--c-heading);
	text-decoration: none;
	white-space: nowrap;
	border-radius: var(--radius-sm);
	transition: var(--transition);
}

/*
 * ⚠️ Hover PHẢI đổi thứ nhìn thấy được, không chỉ đổi màu chữ.
 *
 * Bản cũ chuyển `--c-heading` (#001E5A) sang `--c-primary` (#002466): lệch 12
 * trên 255 ở đúng một kênh màu — về mặt kỹ thuật có hiệu ứng, về mặt thị giác
 * bằng không. Người dùng báo "hover không có phản hồi" là chính xác.
 *
 * Dùng gạch chân cam vẽ bằng `::after` chứ KHÔNG dùng `border-bottom`: border
 * cộng thêm 3px chiều cao vào đúng lúc rê chuột, đẩy cả hàng menu nhảy — một
 * nguồn CLS không đáng có ở header.
 */
.site-nav__list > li > a::after {
	content: "";
	position: absolute;
	right: 12px;
	bottom: 4px;
	left: 12px;
	height: 3px;
	background: var(--c-accent);
	border-radius: 2px;
	opacity: 0;
	transform: scaleX(0.4);
	transition: var(--transition);
}

.site-nav__list > li > a:hover::after,
.site-nav__list > li > a:focus-visible::after {
	opacity: 1;
	transform: scaleX(1);
}

.site-nav__list a:hover,
.site-nav__list a:focus-visible {
	color: var(--c-primary);
}

/*
 * Trạng thái ĐANG XEM phải khác hẳn hover, không dùng chung một biểu hiện.
 * Spec `_common` §1.1 (sơ đồ header) ghi "mục đang xem nền navy" — và bản
 * drawer đã làm đúng như vậy từ đầu, nên hai bản giờ mới thống nhất.
 */
.site-nav__list .current-menu-item > a,
.site-nav__list .current-menu-parent > a,
.site-nav__list .current-menu-ancestor > a {
	color: var(--c-text-invert);
	background: var(--c-primary);
}

.site-nav__list .current-menu-item > a:hover,
.site-nav__list .current-menu-parent > a:hover {
	color: var(--c-text-invert);
}

/* Tầng 2 — mở khi hover HOẶC khi có tiêu điểm bàn phím bên trong.
   `:focus-within` là thứ khiến menu này dùng được bằng phím Tab; thiếu nó
   thì người dùng bàn phím không bao giờ tới được mục con. */
.site-nav__list > li > ul {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: var(--z-dropdown);
	display: block;
	flex-direction: column;
	min-width: 220px;
	padding: 6px 0;
	background: var(--c-bg);
	border: var(--border-w) solid var(--c-border);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-md);
	opacity: 0;
	visibility: hidden;
	transition: var(--transition);
}

.site-nav__list > li:hover > ul,
.site-nav__list > li:focus-within > ul {
	opacity: 1;
	visibility: visible;
}

.site-nav__list > li > ul a {
	white-space: normal;
}

/* =========================================================================
   2. DRAWER
   ====================================================================== */

.drawer {
	width: min(360px, 88vw);
	max-width: none;
	height: 100%;
	max-height: none;
	/* Ghim sang mép phải — <dialog> mặc định canh giữa. */
	margin: 0 0 0 auto;
	padding: 0;
	border: 0;
	background: var(--c-bg);
	z-index: var(--z-drawer);
}

.drawer::backdrop {
	background: rgb(0 0 0 / 50%);
}

.drawer__inner {
	display: flex;
	flex-direction: column;
	gap: var(--sp-5);
	height: 100%;
	padding: var(--sp-5) var(--gutter);
	overflow-y: auto;
}

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

.drawer__logo {
	display: block;
	width: auto;
	height: 36px;
}

.drawer__close {
	width: 44px;
	height: 44px;
	padding: 0;
	font-size: 28px;
	line-height: 1;
	color: var(--c-heading);
	background: none;
	border: 0;
	cursor: pointer;
}

.drawer__list,
.drawer__list ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.drawer__list a {
	display: block;
	padding: 12px 8px;
	color: var(--c-heading);
	text-decoration: none;
	border-bottom: var(--border-w) solid var(--c-border);
}

.drawer__list .current-menu-item > a {
	color: var(--c-text-invert);
	background: var(--c-primary);
	border-radius: var(--radius-sm);
}

.drawer__list ul a {
	padding-left: 24px;
	font-size: var(--fs-sm);
}

/*
 * DR-04 · Danh mục dịch vụ trong drawer (T-303) — `sidebar/service` biến thể
 * `drawer`, nay là `sidebar/cat-nav` với `variant => drawer` (C-17 v2, T-216.3).
 * CSS gốc `.cat-nav*` ở `components.css` §10 (nạp mọi trang) — ở đây chỉ còn
 * phần KHÁC của drawer: bỏ khung thẻ + header navy (drawer đã là một tấm
 * trắng), tiêu đề thành nhãn nhỏ, mục đang xem tô navy đặc.
 */
.cat-nav--drawer {
	border: 0;
	border-radius: 0;
}

.cat-nav--drawer .cat-nav__title {
	margin: var(--sp-4) 0 var(--sp-2);
	padding: 0;
	border-radius: 0;
	background: none;
	font-family: var(--font-heading);
	color: var(--c-heading);
}

.cat-nav--drawer .cat-nav__link {
	gap: 12px;
	padding: 10px 8px;
	color: var(--c-heading);
	border-radius: 0;
}

.cat-nav--drawer .cat-nav__item + .cat-nav__item {
	border-top: 0;
}

.cat-nav--drawer .cat-nav__link {
	border-bottom: var(--border-w) solid var(--c-border);
}

.cat-nav--drawer .cat-nav__link.is-current {
	padding-left: 8px;
	border-left: 0;
	border-radius: var(--radius-sm);
	color: var(--c-text-invert);
	background: var(--c-primary);
}

.cat-nav--drawer .cat-nav__link.is-current .cat-nav__icon {
	color: var(--c-text-invert);
}

.drawer__cta {
	padding: var(--sp-5);
	color: var(--c-text-invert);
	background: var(--c-primary-800);
	border-radius: var(--radius-md);
}

.drawer__cta-title {
	margin: 0 0 var(--sp-1);
	font-family: var(--font-heading);
	font-weight: var(--fw-bold);
	text-transform: uppercase;
	letter-spacing: var(--ls-caps);
}

.drawer__cta-btn {
	display: block;
	margin-bottom: var(--sp-1);
	text-align: center;
}

.drawer__cta-line {
	display: block;
	color: var(--c-text-invert);
	text-decoration: none;
}

.drawer__profile {
	display: block;
	padding: 12px;
	text-align: center;
	color: var(--c-primary);
	border: var(--border-w) solid var(--c-primary);
	border-radius: var(--radius-md);
	text-decoration: none;
}

/* =========================================================================
   3. FOOTER
   ====================================================================== */

.site-footer {
	margin-top: var(--section-gap);
	color: var(--c-text-invert);
	background: var(--c-primary-900);
}

.site-footer__inner {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--sp-5);
	max-width: var(--container);
	margin: 0 auto;
	padding: var(--sp-12) var(--gutter);
}

@media (min-width: 768px) {
	.site-footer__inner {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 992px) {
	/* `auto-fit` chứ không phải 4 cột cứng: cột rỗng bị PHP bỏ hẳn khỏi DOM,
	   nên lưới cố định 4 cột sẽ để lại một ô trống. Đây là vế CSS của DoD
	   "cột rỗng tự ẩn". */
	.site-footer__inner {
		grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	}
}

.site-footer__logo {
	width: auto;
	height: 44px;
	margin-bottom: var(--sp-1);
}

.site-footer__name {
	font-family: var(--font-heading);
	font-weight: var(--fw-bold);
	font-size: var(--fs-h4);
	margin: 0 0 var(--sp-1);
}

.site-footer__desc {
	margin: 0 0 var(--sp-5);
	font-size: var(--fs-sm);
	line-height: var(--lh-body);
	opacity: 0.85;
}

.site-footer__heading {
	margin: 0 0 var(--sp-1);
	font-family: var(--font-heading);
	font-size: var(--fs-body);
	font-weight: var(--fw-bold);
	text-transform: uppercase;
	letter-spacing: var(--ls-caps);
}

.site-footer__menu,
.site-footer__contact,
.site-footer__social,
.site-footer__legal {
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * ⚠️ `padding-block: 4px` — R-06-layout F-13, hạ từ 12px theo CR 2026-09-11.
 *
 * F-13 nới link chân trang từ 17px lên 44px vùng chạm bằng `padding-block:
 * 12px`. Hệ quả người vận hành báo: các mục "Liên kết nhanh" cách nhau ~46px,
 * và ở cột liên hệ icon (không có đệm) trôi lên cao hơn chữ (có đệm) 10px.
 *
 * Chốt lại: link cao **30px** (22px dòng + 4px×2), các mục cách nhau đúng
 * **20px** (4 + 12 margin + 4). WCAG 2.2 AA (2.5.8) chỉ đòi 24×24 nên vẫn
 * đạt; khuyến nghị 44px của HIG/Material nhường cho nhịp của layout gốc.
 *
 * Nới bằng `padding-block` chứ không `min-height`: link là phần tử inline nằm
 * giữa dòng chữ, đặt chiều cao cứng sẽ đẩy khoảng cách dòng của cả cột.
 */
.site-footer__menu a,
.site-footer__contact a,
.site-footer__legal a {
	display: inline-block;
	padding-block: 4px;
	color: inherit;
	text-decoration: none;
	opacity: 0.85;
}

/* Icon đầu link menu (CR 2026-09-11): `link_before` của wp_nav_menu() và
   cột Dịch vụ tự dựng dùng cùng một SVG — canh giữa với dòng chữ đầu. */
.site-footer__menu a {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-1);
}

.site-footer__menu-icon {
	flex: 0 0 auto;
	opacity: 0.7;
}

.site-footer__menu a:hover,
.site-footer__contact a:hover,
.site-footer__legal a:hover {
	opacity: 1;
	text-decoration: underline;
}

/* Nhịp 20px giữa các mục (CR 2026-09-11): 4px đệm link + 12px + 4px đệm link.
   `li` không tự đệm — cộng cả hai thì cột chân trang dài ra vô ích. */
.site-footer__menu li {
	padding: 0;
	font-size: var(--fs-sm);
	line-height: var(--lh-body);
}

.site-footer__menu li + li,
.site-footer__contact-item + .site-footer__contact-item {
	margin-top: 12px;
}

/* Dòng liên hệ: icon trái · chữ phải, icon canh theo DÒNG ĐẦU của địa chỉ
   (địa chỉ dài xuống 2-3 dòng, canh giữa sẽ làm icon trôi xuống giữa khối).

   ⚠️ Cả `<a>` lẫn `<address>` đều mang `padding-block: 4px` để dòng đầu của
   MỌI mục bắt đầu ở cùng một độ cao — trước đây chỉ `<a>` có đệm (12px) nên
   icon canh đúng với địa chỉ nhưng lệch 10px so với hotline/email/web. */
.site-footer__contact-item {
	display: flex;
	align-items: flex-start;
	gap: var(--sp-2);
	padding: 0;
	font-size: var(--fs-sm);
	line-height: var(--lh-body);
}

/* Icon 18px canh giữa dòng chữ đầu: 4px đệm + (22px dòng − 18px) / 2. */
.site-footer__contact-icon {
	flex: 0 0 auto;
	margin-top: 6px;
	opacity: 0.85;
}

/* `<address>` mặc định in nghiêng — trả về chữ thường như các dòng khác. */
.site-footer__address {
	margin: 0;
	padding-block: 4px;
	font-style: normal;
}

.site-footer__social {
	display: flex;
	gap: 8px;
}

/* 44×44 — ngưỡng vùng chạm khuyến nghị (F-13). Icon bên trong vẫn 20px, chỉ
   vùng bấm rộng ra. */
.site-footer__social-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	font-weight: var(--fw-bold);
	color: var(--c-text-invert);
	text-decoration: none;
	background: rgb(255 255 255 / 12%);
	border-radius: var(--radius-full);
}

/*
 * ⚠️ `--c-accent-strong` (#BF4E05), KHÔNG phải `--c-accent` (#FC6C06).
 *
 * Glyph mạng xã hội là chữ trắng: trắng trên #FC6C06 chỉ được **2,88:1**, dưới
 * cả ngưỡng 3:1 của WCAG 1.4.11 cho đồ hoạ phi văn bản — đúng cặp màu mà
 * `_tokens.css` đã ghi thành văn là cấm. Trắng trên #BF4E05 được 4,87:1.
 *
 * Đây cũng là chiều mà MỌI nút khác trong theme đi khi hover (`.btn--accent`,
 * `header-cta`, `about-contact-btn`): đậm màu LÊN. Riêng cụm social trước đây
 * đi ngược sang tông sáng hơn. R-06-layout F-05 — anh em với F-01.
 */
.site-footer__social-link:hover {
	background: var(--c-accent-strong);
}

.site-footer__bottom {
	border-top: var(--border-w) solid rgb(255 255 255 / 15%);
}

.site-footer__bottom-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-1);
	max-width: var(--container);
	margin: 0 auto;
	padding: var(--sp-5) var(--gutter);
	font-size: var(--fs-sm);
}

.site-footer__copy {
	margin: 0;
	opacity: 0.85;
}

.site-footer__legal {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-5);
}

/* =========================================================================
   4. NÚT LIÊN HỆ NỔI
   ====================================================================== */

.float-contact {
	position: fixed;
	right: 16px;
	bottom: 16px;
	z-index: var(--z-floating);
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.float-contact__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	font-size: 20px;
	font-weight: var(--fw-bold);
	color: var(--c-text-invert);
	text-decoration: none;
	background: var(--c-primary);
	border-radius: var(--radius-full);
	box-shadow: var(--shadow-md);
	transition: var(--transition);
}

/*
 * F-03 — và ở đây hậu quả nặng hơn chỗ khác: cụm nút nổi CHỈ hiện trên điện
 * thoại, tức thiết bị duy nhất nhìn thấy nó cũng là thiết bị duy nhất làm hover
 * dính. Chạm gọi điện xong quay lại trang là thấy nút vẫn nhấc lên.
 */
@media (hover: hover) and (pointer: fine) {

	.float-contact__btn:hover {
		transform: translateY(-2px);
	}
}

.float-call {
	background: var(--c-accent-strong);
}

/* =========================================================================
   6. KHUNG NỘI DUNG
   Container dùng chung cho vùng nội dung. Header/footer đã tự canh giữa,
   nhưng `<main>` thì chưa — thiếu nó thì nội dung bám sát mép trái trong
   khi header canh giữa, và trang trông như lệch.
   ====================================================================== */

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

.site-main {
	padding-top: var(--sp-12);
	padding-bottom: var(--sp-12);
}

/*
 * Dải CTA đứng cuối `<main>` thì KHÔNG chừa khoảng dưới — R-06-layout F-14.
 *
 * Dải CTA là khối tràn nền có màu, và ngay dưới nó là footer cũng nền tối. Giữ
 * `padding-bottom` của main + `margin-top` của footer thì giữa hai vùng tối có
 * một mảng trắng ~130px, đọc thành "thiếu mất một khối" chứ không thành khoảng
 * thở. Trang chủ không bị vì `page/home.css` đã tự gỡ hai thứ đó — nhưng gỡ
 * theo TỪNG TRANG nghĩa là mọi template sau này phải nhớ gỡ lại một lần nữa,
 * và trang Giới thiệu là bằng chứng đầu tiên rằng sẽ có người quên.
 *
 * Quy tắc dưới đây bám vào CẤU TRÚC (dải CTA có phải phần tử cuối không) chứ
 * không bám vào tên trang, nên template thứ ba thêm sau tự đúng.
 *
 * ⚠️ Hai quy tắc riêng cho trang chủ ở `page/home.css` §0 GIỮ NGUYÊN, cố ý:
 *    chúng là đường lui cho trình duyệt chưa hỗ trợ `:has()` — selector không
 *    hiểu được thì cả khối bị bỏ qua, không có cảnh báo nào.
 *
 * ═══════════════════════════════════════════════════════════════════════════
 * ⚠️⚠️ ĐỪNG ĐẶT BẤT KỲ PHẦN TỬ NÀO SAU `.cta-band` TRONG `.site-main`.
 *
 * `:last-child` bám THỨ TỰ DOM — thứ dễ đổi nhất và đổi mà không ai thấy. Thêm
 * một thẻ sau dải CTA là hai quy tắc dưới đây thôi khớp, `padding-bottom` và
 * `margin-top` quay lại, và khoảng trắng ~130px hiện ra y như trước khi có
 * F-14.
 *
 * Đã xảy ra thật, 2026-09-09, ở `single-product.php`: thanh dính đáy
 * `.product-sticky` đứng sau `.cta-band`. Trớ trêu là nó `position: fixed` và ở
 * desktop còn `display: none` — KHÔNG chiếm một pixel nào, mà vẫn đủ để vô
 * hiệu hoá cả fix. Đã chuyển ra ngoài `</main>`.
 *
 * ⇒ Cần thêm khối gì sau dải CTA thì đặt NGOÀI `<main>`. Phần tử `fixed` /
 *   `absolute` không mất gì khi đứng ngoài đó.
 * ═══════════════════════════════════════════════════════════════════════════
 */
.site-main:has(> .cta-band:last-child) {
	padding-bottom: 0;
}

body:has(.site-main > .cta-band:last-child) .site-footer {
	margin-top: 0;
}

.archive-count {
	margin: 0 0 var(--sp-5);
	color: var(--c-text-muted);
}

/* Bố cục nội dung + sidebar. `align-items: start` là điều kiện cần để
   `position: sticky` của sidebar có chỗ trượt — thiếu nó thì grid kéo cột
   sidebar cao bằng cột nội dung và sticky trông như không chạy. */
.with-sidebar {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--block-gap);
	align-items: start;
	padding-top: var(--sp-12);
	padding-bottom: var(--sp-12);
}

@media (min-width: 992px) {
	.with-sidebar {
		grid-template-columns: 1fr var(--sidebar-w);
	}
}