/* =========================================================
   Sensini - CSS chính
    1. Biến & nền tảng        8. Trang danh mục & bộ lọc
    2. Tiện ích               9. Trang chi tiết sản phẩm
    3. Nút                   10. Yêu cầu báo giá & form
    4. Header & menu         11. Tin tức, trang trong
    5. Banner trang chủ      12. Chân trang & nút nổi
    6. Khối trang chủ        13. Responsive
    7. Thẻ sản phẩm & băng chạy
   ========================================================= */

/* ---------- 1. Biến & nền tảng ---------- */

/*
 * Bảng màu: NỀN TRẮNG, cam #f5670f làm màu chính.
 * Bố cục tham khảo kemksa.vn nhưng đổi đỏ thành cam.
 *
 * VẤN ĐỀ PHẢI BIẾT TRƯỚC KHI SỬA MÀU
 * ----------------------------------
 * kemksa.vn dùng đỏ #d02e2e - chữ trắng trên đỏ đạt 5.11:1 nên đặt chữ
 * trắng lên nút đỏ là đọc được. Cam thì KHÔNG:
 *
 *   chữ trắng trên nền cam #f5670f  =  3.07:1   KHÔNG ĐẠT
 *   chữ cam #f5670f trên nền trắng  =  3.07:1   KHÔNG ĐẠT
 *
 * Cam sáng hơn đỏ nhiều nên không "gánh" được chữ trắng. Cách xử lý:
 *
 *   --cam-dam   #c74c05  MỌI mảng màu CÓ CHỮ: dải menu, nút bấm, băng báo giá,
 *                        số đếm. Chữ trắng trên đó đạt 4.70:1. Cũng dùng
 *                        khi cam là chữ trên nền trắng (liên kết, giá).
 *
 *   --cam       #f5670f  CHỈ trang trí, không bao giờ đặt chữ lên: gạch chân
 *                        tiêu đề, chấm slide, số liệu trên nền tối, viền.
 *
 *   --cam-sau   #b84504  khi rê chuột lên nền cam đậm (5.40:1 với chữ trắng).
 *
 * Ô chứa ảnh sản phẩm để nền xám rất nhạt (--anh) chứ không trắng tinh,
 * để ảnh chụp nền trắng vẫn thấy được mép.
 */
:root {
	--cam: #f5670f;
	--cam-dam: #c74c05;
	--cam-sau: #b84504;
	--cam-mo: #fff2e9;
	--tren-cam: #ffffff;

	--nen: #ffffff;
	--nen-2: #f8f6f4;
	--nen-3: #ffffff;
	--nen-dam: #221c18;
	--anh: #f7f5f3;

	--chu: #241d18;
	--chu-mo: #5a514a;
	--chu-rat-mo: #7a706a;
	--chu-tren-toi: #f5efe6;
	--vien: #e8e3df;

	--radius: 8px;
	--radius-lg: 14px;
	--shadow: 0 4px 18px rgba(36, 29, 24, .08);
	--shadow-lg: 0 16px 44px rgba(36, 29, 24, .16);
	--container: 1240px;
	--font: "Be Vietnam Pro", "Segoe UI", Roboto, Arial, sans-serif;

	/* Tỉ lệ khung banner trang chủ. */
	--hero-ratio: 1920 / 700;
}

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

body {
	margin: 0;
	font-family: var(--font);
	font-size: 16px;
	line-height: 1.7;
	color: var(--chu-mo);
	background: var(--nen);
	-webkit-font-smoothing: antialiased;
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

a {
	color: var(--cam-dam);
	text-decoration: none;
	transition: color .2s ease;
}

a:hover {
	color: var(--cam);
}

h1, h2, h3, h4 {
	font-family: var(--font);
	color: var(--chu);
	line-height: 1.3;
	margin: 0 0 .6em;
	font-weight: 700;
}

p {
	margin: 0 0 1em;
}

ul, ol {
	margin: 0 0 1em;
	padding-left: 1.2em;
}

button {
	font-family: inherit;
	cursor: pointer;
}

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

.icon {
	flex: none;
}

/* ---------- 2. Tiện ích ---------- */
.container {
	width: 100%;
	max-width: var(--container);
	margin: 0 auto;
	padding: 0 16px;
}

.container--narrow {
	max-width: 880px;
}

.section {
	padding: 56px 0;
}

.section--categories,
.section--process {
	background: var(--nen-2);
}

.section-head {
	margin-bottom: 28px;
	text-align: center;
}

.section-head--row {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 20px;
	text-align: left;
}

.section-title {
	font-size: 26px;
	margin: 0 0 8px;
	position: relative;
	display: inline-block;
}

.section-head:not(.section-head--row) .section-title::after {
	content: "";
	display: block;
	width: 54px;
	height: 3px;
	background: var(--cam);
	margin: 10px auto 0;
	border-radius: 2px;
}

.section-head--row .section-title::after {
	content: "";
	display: block;
	width: 44px;
	height: 3px;
	background: var(--cam);
	margin-top: 8px;
	border-radius: 2px;
}

.section-desc {
	margin: 0;
	color: var(--chu-rat-mo);
	font-size: 15px;
}

.section-head__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-weight: 600;
	white-space: nowrap;
	color: var(--cam);
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

.skip-link:focus {
	position: fixed;
	top: 8px;
	left: 8px;
	z-index: 999;
	width: auto;
	height: auto;
	clip: auto;
	padding: 10px 16px;
	background: var(--cam-dam);
	color: var(--tren-cam);
	border-radius: var(--radius);
}

.page-head {
	padding: 0 0 18px;
}

.page-title {
	font-size: 28px;
	margin: 0 0 6px;
}

.page-desc {
	color: var(--chu-rat-mo);
	margin: 0;
	max-width: 720px;
}

.no-result {
	text-align: center;
	padding: 56px 20px;
	color: var(--chu-rat-mo);
}

.no-result > .icon {
	margin: 0 auto 14px;
	color: var(--vien);
}

.no-result h1,
.no-result h2 {
	font-size: 20px;
}

.no-result__actions {
	display: flex;
	gap: 10px;
	justify-content: center;
	flex-wrap: wrap;
	margin-top: 18px;
}

/* ---------- 3. Nút ---------- */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 11px 20px;
	border: 1px solid transparent;
	border-radius: var(--radius);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	transition: background .2s ease, color .2s ease, border-color .2s ease;
}

.btn--lg {
	padding: 14px 26px;
	font-size: 16px;
}

.btn--block {
	width: 100%;
}

.btn--primary {
	background: var(--cam-dam);
	border-color: var(--cam-dam);
	color: var(--tren-cam);
}

.btn--primary:hover {
	background: var(--cam-sau);
	border-color: var(--cam-sau);
	color: var(--tren-cam);
}

.btn--dark {
	background: var(--nen-dam);
	border-color: var(--nen-dam);
	color: var(--chu-tren-toi);
}

.btn--dark:hover {
	background: #000;
	color: var(--chu-tren-toi);
}

.btn--light {
	background: #fff;
	border-color: #fff;
	color: var(--cam-dam);
}

.btn--light:hover {
	background: var(--cam-mo);
	color: var(--cam-dam);
}

.btn--outline {
	background: transparent;
	border-color: var(--vien);
	color: var(--chu);
}

.btn--outline:hover {
	border-color: var(--cam);
	color: var(--cam);
}

/* Nút viền dùng trên băng báo giá nền cam đậm #c74c05 - chữ trắng đạt 4.70:1. */
.btn--outline-light {
	background: transparent;
	border-color: rgba(255, 255, 255, .7);
	color: #fff;
}

.btn--outline-light:hover {
	background: rgba(255, 255, 255, .16);
	border-color: #fff;
	color: #fff;
}

.btn--ghost {
	background: var(--nen-2);
	border-color: var(--vien);
	color: var(--chu);
}

.btn:disabled {
	opacity: .55;
	cursor: not-allowed;
}

/* ---------- 4. Header & menu ---------- */
.site-header {
	position: relative;
	z-index: 50;
	background: var(--nen);
}

.topbar {
	background: var(--nen-dam);
	color: rgba(255, 255, 255, .82);
	font-size: 13.5px;
}

.topbar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	min-height: 36px;
}

.topbar__left strong {
	color: var(--chu-tren-toi);
	letter-spacing: .3px;
}

.topbar__sep {
	margin: 0 8px;
	opacity: .4;
}

.topbar__right {
	display: flex;
	align-items: center;
	gap: 14px;
}

.topbar__link,
.topbar__social {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: rgba(255, 255, 255, .82);
}

.topbar__link:hover,
.topbar__social:hover {
	color: var(--chu-tren-toi);
}

/*
 * Logo và cụm hotline cùng giãn đều (flex: 1 1 0) ở hai bên, ô tìm kiếm
 * cố định ở giữa. Trước đây ô tìm kiếm nằm sát logo còn cụm hotline bị đẩy
 * hết sang phải, để lại một khoảng trống lớn làm header trông lệch trái.
 */
.header-main__inner {
	display: flex;
	align-items: center;
	gap: 32px;
	padding: 16px 16px;
}

.site-branding {
	flex: 1 1 0;
}

/* Logo là dòng chữ ngang (363x88, tỉ lệ 4.1:1). Cao 38px thì rộng
   khoảng 157px - vừa đủ, không lấn ô tìm kiếm. */
.site-branding img {
	max-height: 38px;
	width: auto;
}

.site-branding__text {
	display: block;
	color: var(--chu);
}

.site-title {
	display: block;
	font-size: 22px;
	font-weight: 800;
	color: var(--cam);
	letter-spacing: .5px;
}

.site-description {
	display: block;
	font-size: 13px;
	color: var(--chu-rat-mo);
}

.header-search-form {
	flex: 0 1 500px;
	display: flex;
	border: 1.5px solid var(--vien);
	border-radius: 999px;
	overflow: hidden;
	transition: border-color .2s ease;
}

.header-search-form:focus-within {
	border-color: var(--cam);
}

.header-search-form input {
	flex: 1;
	border: 0;
	padding: 10px 18px;
	font: inherit;
	font-size: 15px;
	color: var(--chu);
	outline: none;
	background: transparent;
	min-width: 0;
}

.header-search-form button {
	border: 0;
	background: var(--cam-dam);
	color: var(--tren-cam);
	padding: 0 18px;
	display: flex;
	align-items: center;
}

.header-search-form button:hover {
	background: var(--cam-sau);
}

.header-info {
	flex: 1 1 0;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 18px;
}

.info-box {
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--chu);
}

.info-box__icon {
	position: relative;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--cam-mo);
	color: var(--cam);
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
}

.info-box__count {
	position: absolute;
	top: -3px;
	right: -3px;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border-radius: 9px;
	background: var(--cam-dam);
	color: var(--tren-cam);
	font-size: 11px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
}

.info-box__body {
	display: flex;
	flex-direction: column;
	line-height: 1.35;
	white-space: nowrap;
}

.info-box__label {
	font-size: 12.5px;
	color: var(--chu-rat-mo);
}

.info-box__value {
	font-size: 16px;
	color: var(--cam);
}

.info-box--quote .info-box__value {
	font-size: 14.5px;
	color: var(--chu);
}

.menu-toggle {
	display: none;
	border: 1px solid var(--vien);
	background: var(--nen-3);
	border-radius: var(--radius);
	padding: 8px;
	color: var(--chu);
}

/*
 * Dải menu để nền tối, không đổ nguyên mảng đỏ san hô.
 * Bộ slide thương hiệu của khách dùng đỏ rất tiết chế - chỉ làm điểm nhấn
 * trên nền tối. Đổ nguyên dải đỏ ngang trang sẽ át hết phần còn lại.
 */
.header-nav {
	background: var(--cam-dam);
}

.header-nav__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.primary-menu {
	display: flex;
	list-style: none;
	margin: 0;
	padding: 0;
	flex-wrap: wrap;
}

/* Cho <a> giãn hết chiều cao <li>: nếu có mục nào cao hơn thì chữ
   các mục còn lại vẫn nằm giữa chứ không bị đẩy lên trên. */
.primary-menu > li {
	position: relative;
	display: flex;
}

.primary-menu > li > .menu-link {
	flex: 1;
}

.primary-menu .menu-link {
	display: flex;
	align-items: center;
	gap: 5px;
	padding: 13px 16px;
	color: var(--tren-cam);
	font-size: 15px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .2px;
	transition: background .2s ease;
}

/* Mục đang xem / rê chuột: chỉ đổi nền đậm hơn, không gạch chân. */
.primary-menu > li:hover > .menu-link,
.primary-menu > li.current-menu-item > .menu-link,
.primary-menu > li.current-menu-parent > .menu-link {
	background: var(--cam-sau);
}

.primary-menu .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 240px;
	background: var(--nen-3);
	list-style: none;
	margin: 0;
	padding: 6px 0;
	box-shadow: var(--shadow-lg);
	border-top: 3px solid var(--cam);
	border-radius: 0 0 var(--radius) var(--radius);
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity .18s ease, transform .18s ease, visibility .18s;
	z-index: 60;
}

.primary-menu li:hover > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.primary-menu .sub-menu .menu-link {
	padding: 9px 16px;
	color: var(--chu);
	text-transform: none;
	font-weight: 500;
	justify-content: space-between;
}

.primary-menu .sub-menu .menu-link:hover {
	background: var(--cam-mo);
	color: var(--cam);
}

.primary-menu .sub-menu .sub-menu {
	top: 0;
	left: 100%;
	border-top: 0;
	border-left: 3px solid var(--cam);
}

.submenu-toggle {
	display: none;
	position: absolute;
	top: 4px;
	right: 4px;
	border: 0;
	background: transparent;
	color: inherit;
	padding: 8px;
}

.main-nav__mobile-extra {
	display: none;
}

.header-zalo {
	white-space: nowrap;
	font-size: 14px;
	padding: 8px 16px;
}

/* ---------- 5. Banner trang chủ ---------- */
.hero {
	position: relative;
	overflow: hidden;
	background: var(--nen-dam);
}

.hero__viewport {
	overflow: hidden;
}

.hero__track {
	display: flex;
	transition: transform .5s ease;
}

/*
 * Khoá tỉ lệ khung banner (1920x700) ngay ở CSS.
 *
 * Nếu để ảnh tự quyết chiều cao thì khách tải lên tấm lệch kích thước là mỗi
 * slide cao một kiểu, chuyển slide bị nhảy và banner phình cao hơn thiết kế.
 * Khoá khung rồi cắt ảnh cho vừa là chắc nhất - kể cả sau này khách tải lên
 * ảnh nhỏ hơn 1920px, banner vẫn đúng tỉ lệ.
 *
 * Banner hiện tại in sẵn chữ nên phải đúng đủ 1920x700, tải lên tấm khác tỉ lệ
 * là bị cắt mất chữ.
 */
.hero__slide {
	position: relative;
	flex: 0 0 100%;
	aspect-ratio: var(--hero-ratio);
	overflow: hidden;
	background: var(--nen-dam);
}

/* <picture> mặc định là inline, không kéo giãn được theo khung slide. */
.hero__slide picture {
	display: block;
	width: 100%;
	height: 100%;
}

.hero__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/*
 * Banner in sẵn chữ và nút trong ảnh thì nút đó không bấm được. Phủ một lớp
 * liên kết trong suốt lên cả tấm để khách bấm đâu cũng mở trang báo giá.
 * Chỉ dùng khi slide không nhập tiêu đề/nút thật - xem hero.php.
 */
.hero__lien-ket {
	position: absolute;
	inset: 0;
	z-index: 1;
}

.hero__lien-ket:focus-visible {
	outline: 3px solid var(--cam);
	outline-offset: -5px;
}

.hero__overlay {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	background: linear-gradient(90deg, rgba(0, 0, 0, .62) 0%, rgba(0, 0, 0, .28) 55%, rgba(0, 0, 0, 0) 100%);
}

.hero__content {
	color: #fff;
	max-width: 640px;
}

.hero__title {
	color: #fff;
	font-size: 38px;
	margin: 0 0 12px;
	text-shadow: 0 2px 14px rgba(0, 0, 0, .35);
}

.hero__sub {
	font-size: 17px;
	color: rgba(255, 255, 255, .9);
	margin-bottom: 22px;
}

.hero__actions {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
}

.hero__nav {
	position: absolute;
	/* Phải trên lớp .hero__lien-ket, nếu không thì không bấm chuyển ảnh được. */
	z-index: 2;
	top: 50%;
	transform: translateY(-50%);
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .85);
	color: var(--chu);
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: opacity .2s ease, background .2s ease;
}

.hero:hover .hero__nav {
	opacity: 1;
}

.hero__nav:hover {
	background: #fff;
	color: var(--cam);
}

.hero__nav--prev {
	left: 16px;
}

.hero__nav--next {
	right: 16px;
}

.hero__dots {
	position: absolute;
	z-index: 2;
	left: 0;
	right: 0;
	bottom: 14px;
	display: flex;
	justify-content: center;
	gap: 8px;
}

.hero__dot {
	width: 9px;
	height: 9px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .5);
	transition: background .2s ease, width .2s ease;
}

.hero__dot.is-active {
	background: var(--cam);
	width: 26px;
	border-radius: 5px;
}

/* ---------- 6. Khối trang chủ ---------- */

/* Số liệu năng lực */
/* Dải số liệu ngay dưới banner. Dùng --cam-dam chứ không phải --cam:
   chữ trắng trên #f5670f chỉ đạt 3.07:1, trên #c74c05 được 4.70:1. */
.stats {
	background: var(--cam-dam);
	color: #fff;
}

.stats__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
}

.stat {
	padding: 22px 12px;
	text-align: center;
	border-right: 1px solid rgba(255, 255, 255, .22);
}

.stat:last-child {
	border-right: 0;
}

.stat__num {
	display: block;
	font-size: 30px;
	font-weight: 800;
	color: #fff;
	line-height: 1.2;
}

.stat__label {
	font-size: 14px;
	color: rgba(255, 255, 255, .88);
}

/* Danh mục */
.category-grid {
	display: grid;
	grid-template-columns: repeat(var(--so-cot, 4), 1fr);
	gap: 18px;
}

.category-card {
	background: var(--nen-3);
	border: 1px solid var(--vien);
	border-radius: var(--radius-lg);
	overflow: hidden;
	transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}

.category-card:hover {
	border-color: var(--cam);
	box-shadow: var(--shadow);
	transform: translateY(-3px);
}

.category-card__media {
	display: block;
	aspect-ratio: 1 / 1;
	background: var(--anh);
}

.category-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.category-card__placeholder {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--vien);
}

.category-card__body {
	display: block;
	padding: 13px 14px;
	text-align: center;
}

.category-card__name {
	display: block;
	color: var(--chu);
	font-size: 15px;
}

.category-card__count {
	display: block;
	font-size: 13.5px;
	color: var(--chu-rat-mo);
}

/* Giới thiệu + video */
.intro__grid {
	display: grid;
	grid-template-columns: 1.05fr 1fr;
	gap: 44px;
	align-items: center;
}

.intro__media .video-box,
.intro__image {
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: var(--shadow);
}

.intro__tag {
	display: inline-block;
	font-size: 13.5px;
	font-weight: 700;
	letter-spacing: 1.2px;
	color: var(--cam);
	background: var(--cam-mo);
	padding: 5px 12px;
	border-radius: 999px;
	margin-bottom: 12px;
}

.intro__title {
	font-size: 28px;
	margin: 0 0 14px;
}

.intro__text {
	color: var(--chu-mo);
}

.intro__points {
	list-style: none;
	padding: 0;
	margin: 18px 0 24px;
	display: grid;
	gap: 10px;
}

.intro__points li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-weight: 500;
	color: var(--chu);
}

.intro__points .icon {
	color: var(--cam);
	margin-top: 2px;
}

.intro__actions {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
}

/* Video */
.video-box {
	position: relative;
	aspect-ratio: 16 / 9;
	background: var(--nen-dam);
}

.video-box__thumb {
	width: 100%;
	height: 100%;
	border: 0;
	padding: 0;
	background: none;
	position: relative;
	display: block;
}

.video-box__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.video-box__play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 68px;
	height: 68px;
	border-radius: 50%;
	background: var(--cam-dam);
	color: var(--tren-cam);
	display: flex;
	align-items: center;
	justify-content: center;
	padding-left: 5px;
	box-shadow: 0 6px 24px rgba(245, 103, 15, .4);
	transition: transform .2s ease;
}

.video-box__thumb:hover .video-box__play {
	transform: translate(-50%, -50%) scale(1.08);
}

.video-box iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.video-box__caption {
	padding: 10px 14px;
	font-size: 14px;
	color: var(--chu-rat-mo);
}

/* Video sản phẩm (trang chủ) */
.video-card {
	background: var(--nen-3);
	border: 1px solid var(--vien);
	border-radius: var(--radius-lg);
	overflow: hidden;
	height: 100%;
}

.video-card .video-box__play {
	width: 58px;
	height: 58px;
}

.video-card__title {
	margin: 0;
	padding: 12px 16px 14px;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.45;
}

/* Đánh giá khách hàng (trang chủ) */
.section--review {
	background: var(--nen-2);
}

.review-card {
	margin: 0;
	height: 100%;
	background: var(--nen-3);
	border: 1px solid var(--vien);
	border-radius: var(--radius-lg);
	padding: 22px 22px 24px;
	box-shadow: var(--shadow);
}

.review-card__head {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 12px;
}

.review-card__avatar {
	width: 52px;
	height: 52px;
	flex: none;
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid var(--cam-mo);
}

.review-card__avatar--chu {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--cam-mo);
	color: var(--cam-dam);
	font-size: 21px;
	font-weight: 700;
}

.review-card__who {
	display: flex;
	flex-direction: column;
	line-height: 1.4;
	min-width: 0;
}

.review-card__name {
	color: var(--chu);
	font-size: 16px;
}

.review-card__role {
	font-size: 14px;
	color: var(--chu-rat-mo);
}

.review-card__stars {
	display: flex;
	gap: 2px;
	margin-bottom: 10px;
	color: var(--vien);
}

.review-card__stars .is-on {
	color: #f5a623;
}

.review-card__stars span {
	display: flex;
}

.review-card__text {
	margin: 0;
	color: var(--chu-mo);
	font-style: italic;
}

/* Quy trình */
.process {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 14px;
	counter-reset: buoc;
}

.process__step {
	position: relative;
	background: var(--nen-3);
	border: 1px solid var(--vien);
	border-radius: var(--radius-lg);
	padding: 22px 14px 18px;
	text-align: center;
	transition: border-color .2s ease, transform .2s ease;
}

.process__step:hover {
	border-color: var(--cam);
	transform: translateY(-3px);
}

.process__num {
	position: absolute;
	top: 8px;
	left: 12px;
	font-size: 22px;
	font-weight: 800;
	color: var(--vien);
}

.process__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 54px;
	height: 54px;
	margin: 0 auto 10px;
	border-radius: 50%;
	background: var(--cam-mo);
	color: var(--cam);
}

.process__title {
	display: block;
	font-size: 15px;
	color: var(--chu);
}

/* Băng báo giá */
.section--cta {
	background: var(--cam-dam);
	color: var(--tren-cam);
}

.cta__inner {
	display: grid;
	grid-template-columns: 1fr 460px;
	gap: 44px;
	align-items: center;
}

.cta__title {
	color: var(--tren-cam);
	font-size: 28px;
}

.cta__text {
	color: rgba(255, 255, 255, .9);
	max-width: 520px;
}

.cta__actions {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	margin-top: 18px;
}

.cta__form {
	background: var(--nen-3);
	border: 1px solid var(--vien);
	border-radius: var(--radius-lg);
	padding: 22px;
	box-shadow: var(--shadow-lg);
}

/* ---------- 7. Thẻ sản phẩm & băng chạy ---------- */
.product-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}

.product-card {
	background: var(--nen-3);
	border: 1px solid var(--vien);
	border-radius: var(--radius-lg);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: box-shadow .2s ease, border-color .2s ease, transform .2s ease;
}

.product-card:hover {
	border-color: var(--cam);
	box-shadow: var(--shadow);
	transform: translateY(-3px);
}

.product-card__media {
	position: relative;
	display: block;
	aspect-ratio: 1 / 1;
	background: var(--anh);
	overflow: hidden;
}

.product-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .35s ease;
}

.product-card__img--hover {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity .3s ease;
}

.product-card:hover .product-card__img--hover {
	opacity: 1;
}

/* Đã bấm chọn màu thì không đổi ảnh khi rê chuột nữa. */
.product-card.is-swapped .product-card__img--hover {
	display: none;
}

.product-card__placeholder {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--vien);
}

.product-card__code {
	position: absolute;
	top: 10px;
	left: 10px;
	background: rgba(11, 12, 6, .82);
	color: #fff;
	font-size: 12.5px;
	font-weight: 600;
	padding: 3px 8px;
	border-radius: 4px;
	z-index: 2;
}

.product-card__body {
	padding: 13px 14px 15px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	flex: 1;
}

.product-card__title {
	font-size: 15px;
	margin: 0;
	line-height: 1.45;
}

.product-card__title a {
	color: var(--chu);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.product-card__title a:hover {
	color: var(--cam);
}

.product-card__colors {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
}

.product-card__more {
	font-size: 13px;
	color: var(--chu-rat-mo);
}

.product-card__sizes {
	margin: 0;
	font-size: 13.5px;
	color: var(--chu-rat-mo);
}

.product-card__sizes span {
	color: var(--chu-mo);
	font-weight: 600;
}

.product-card__link {
	margin-top: auto;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 14px;
	font-weight: 600;
	color: var(--cam);
}

/* Chấm màu */
.swatch {
	width: 40px;
	height: 40px;
	padding: 2px;
	border: 2px solid var(--vien);
	border-radius: 7px;
	background: var(--nen-3);
	overflow: hidden;
	transition: border-color .2s ease;
	flex: none;
}

.swatch img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 4px;
}

.swatch__color {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 4px;
}

.swatch:hover,
.swatch.is-active {
	border-color: var(--cam);
}

.swatch--sm {
	width: 26px;
	height: 26px;
	border-width: 1.5px;
	border-radius: 5px;
	padding: 1px;
}

/* Băng chạy */
.carousel {
	position: relative;
}

.carousel__viewport {
	overflow: hidden;
}

.carousel__track {
	display: flex;
	transition: transform .45s ease;
	margin: 0 -9px;
}

.carousel__item {
	flex: 0 0 25%;
	padding: 0 9px;
	box-sizing: border-box;
}

.carousel__nav {
	position: absolute;
	top: 38%;
	width: 40px;
	height: 40px;
	border: 1px solid var(--vien);
	border-radius: 50%;
	background: var(--nen-3);
	color: var(--chu);
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: var(--shadow);
	transition: background .2s ease, color .2s ease;
	z-index: 3;
}

.carousel__nav:hover:not(:disabled) {
	background: var(--cam-dam);
	border-color: var(--cam);
	color: var(--tren-cam);
}

.carousel__nav:disabled {
	display: none;
}

.carousel__nav--prev {
	left: -18px;
}

.carousel__nav--next {
	right: -18px;
}

.carousel__dots {
	display: flex;
	justify-content: center;
	gap: 7px;
	margin-top: 18px;
}

.carousel__dot {
	width: 8px;
	height: 8px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--vien);
	transition: background .2s ease, width .2s ease;
}

.carousel__dot.is-active {
	background: var(--cam);
	width: 22px;
	border-radius: 4px;
}

/* ---------- 8. Trang danh mục & bộ lọc ---------- */
.breadcrumb {
	background: var(--nen-2);
	border-bottom: 1px solid var(--vien);
	font-size: 14px;
}

.breadcrumb .container {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 4px;
	padding-top: 10px;
	padding-bottom: 10px;
}

.breadcrumb a {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	color: var(--chu-mo);
}

.breadcrumb a:hover {
	color: var(--cam);
}

.breadcrumb__sep {
	color: var(--vien);
	display: inline-flex;
}

.breadcrumb__current {
	color: var(--cam);
	font-weight: 600;
}

.archive-layout,
.news-layout {
	display: grid;
	grid-template-columns: 268px 1fr;
	gap: 28px;
	align-items: start;
}

.news-layout {
	grid-template-columns: 1fr 300px;
}

.filters__toggle {
	display: none;
	width: 100%;
	align-items: center;
	gap: 8px;
	padding: 11px 14px;
	border: 1px solid var(--vien);
	border-radius: var(--radius);
	background: var(--nen-3);
	font-weight: 600;
	color: var(--chu);
	margin-bottom: 12px;
}

.filters__toggle .icon:last-child {
	margin-left: auto;
}

.filters__clear {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 14px;
	color: var(--cam);
	margin-bottom: 14px;
}

.filter-group {
	border: 1px solid var(--vien);
	border-radius: var(--radius-lg);
	padding: 16px;
	margin-bottom: 16px;
}

.filter-group__title {
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: .4px;
	margin: 0 0 12px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--vien);
}

.filter-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.filter-list--sub {
	padding-left: 12px;
	border-left: 1px solid var(--vien);
	margin: 4px 0 4px 4px;
}

.filter-link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 6px 0;
	color: var(--chu-mo);
	font-size: 15px;
}

.filter-link em {
	font-style: normal;
	font-size: 13px;
	color: var(--chu-rat-mo);
	background: var(--nen-2);
	border-radius: 10px;
	padding: 1px 8px;
}

.filter-link:hover,
.filter-link.is-active {
	color: var(--cam);
	font-weight: 600;
}

.filter-colors {
	display: grid;
	gap: 6px;
}

.filter-color {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 5px 8px;
	border-radius: var(--radius);
	color: var(--chu-mo);
	font-size: 15px;
	border: 1px solid transparent;
}

.filter-color__dot {
	width: 18px;
	height: 18px;
	border-radius: 50%;
	border: 1px solid var(--vien);
	flex: none;
}

.filter-color:hover {
	background: var(--nen-2);
}

.filter-color.is-active {
	border-color: var(--cam);
	background: var(--cam-mo);
	color: var(--cam-dam);
	font-weight: 600;
}

.filter-sizes {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
}

.filter-size {
	min-width: 44px;
	text-align: center;
	padding: 7px 10px;
	border: 1px solid var(--vien);
	border-radius: var(--radius);
	color: var(--chu-mo);
	font-size: 15px;
	font-weight: 600;
}

.filter-size:hover {
	border-color: var(--cam);
	color: var(--cam);
}

.filter-size.is-active {
	background: var(--cam-dam);
	border-color: var(--cam);
	color: var(--tren-cam);
}

.filter-help {
	background: var(--nen-2);
	border-radius: var(--radius-lg);
	padding: 16px;
	text-align: center;
	font-size: 14px;
	color: var(--chu-rat-mo);
}

/* Chỉ áp cho biểu tượng thông tin ở ngay trong ô, không áp cho biểu
   tượng nằm trong nút bấm - nếu không nó sẽ bị tô trùng màu nền nút. */
.filter-help > .icon {
	color: var(--cam);
	margin: 0 auto 8px;
}

.archive-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	flex-wrap: wrap;
	padding: 0 0 16px;
}

.archive-bar__count {
	font-size: 15px;
	color: var(--chu-rat-mo);
}

.archive-bar__sort {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 15px;
}

.archive-bar__sort select {
	border: 1px solid var(--vien);
	border-radius: var(--radius);
	padding: 7px 10px;
	font: inherit;
	font-size: 15px;
	background: var(--nen-3);
	color: var(--chu);
}

.pagination {
	margin-top: 28px;
}

.pagination .nav-links {
	display: flex;
	justify-content: center;
	gap: 6px;
	flex-wrap: wrap;
}

.pagination .page-numbers {
	min-width: 38px;
	height: 38px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 10px;
	border: 1px solid var(--vien);
	border-radius: var(--radius);
	color: var(--chu-mo);
	font-weight: 600;
	font-size: 15px;
}

.pagination .page-numbers:hover,
.pagination .page-numbers.current {
	background: var(--cam-dam);
	border-color: var(--cam-dam);
	color: var(--tren-cam);
}

/* ---------- 9. Trang chi tiết sản phẩm ---------- */
.single-product {
	padding: 34px 0 56px;
}

.product {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 40px;
	align-items: start;
}

.gallery__main {
	position: relative;
	aspect-ratio: 1 / 1;
	background: var(--anh);
	border: 1px solid var(--vien);
	border-radius: var(--radius-lg);
	overflow: hidden;
}

.gallery__main img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.gallery__placeholder {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--vien);
}

.gallery__thumbs {
	list-style: none;
	margin: 12px 0 0;
	padding: 0;
	display: flex;
	gap: 9px;
	overflow-x: auto;
	scrollbar-width: thin;
}

.gallery__thumb {
	width: 74px;
	height: 74px;
	padding: 2px;
	border: 2px solid var(--vien);
	border-radius: var(--radius);
	background: #fff;
	overflow: hidden;
	flex: none;
}

.gallery__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 4px;
}

.gallery__thumb.is-active,
.gallery__thumb:hover {
	border-color: var(--cam);
}

.product__title {
	font-size: 26px;
	margin: 0 0 8px;
}

.product__cats {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 14.5px;
	color: var(--chu-rat-mo);
	margin-bottom: 14px;
}

.product__cats .icon {
	color: var(--cam);
}

.product__price-box {
	background: var(--cam-mo);
	border-left: 3px solid var(--cam);
	border-radius: 0 var(--radius) var(--radius) 0;
	padding: 12px 16px;
	margin-bottom: 18px;
}

.product__price {
	display: block;
	font-size: 20px;
	font-weight: 800;
	color: var(--cam);
}

.product__price-note {
	display: block;
	font-size: 14px;
	color: var(--chu-mo);
}

.product__excerpt {
	color: var(--chu-mo);
}

.product__option {
	margin-bottom: 20px;
}

.product__option-head {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 9px;
	font-size: 15px;
}

.product__option-label {
	color: var(--chu-rat-mo);
}

.product__option-value {
	color: var(--chu);
}

.swatches {
	display: flex;
	gap: 9px;
	flex-wrap: wrap;
}

.sizes {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.size-btn {
	min-width: 48px;
	padding: 9px 14px;
	border: 1.5px solid var(--vien);
	border-radius: var(--radius);
	background: var(--nen-3);
	color: var(--chu);
	font-size: 15px;
	font-weight: 600;
	transition: border-color .2s ease, background .2s ease, color .2s ease;
}

.size-btn:hover {
	border-color: var(--cam);
	color: var(--cam);
}

.size-btn.is-active {
	background: var(--cam-dam);
	border-color: var(--cam);
	color: var(--tren-cam);
}

.product__actions {
	display: flex;
	gap: 11px;
	flex-wrap: wrap;
	margin: 24px 0 10px;
}

.product__added {
	font-size: 14.5px;
	font-weight: 600;
	margin: 0 0 14px;
}

.product__added.is-success {
	color: #1e7a35;
}

.product__added.is-warning {
	color: #b9770e;
}

.product__specs {
	border: 1px solid var(--vien);
	border-radius: var(--radius);
	overflow: hidden;
	font-size: 15px;
	margin-bottom: 16px;
}

.product__specs th,
.product__specs td {
	padding: 9px 14px;
	text-align: left;
	border-bottom: 1px solid var(--vien);
	vertical-align: top;
}

.product__specs tr:last-child th,
.product__specs tr:last-child td {
	border-bottom: 0;
}

.product__specs th {
	width: 150px;
	background: var(--nen-2);
	color: var(--chu-mo);
	font-weight: 600;
}

.product__hotline {
	display: flex;
	align-items: center;
	gap: 9px;
	font-size: 15px;
	margin: 0;
}

.product__hotline .icon {
	color: var(--cam);
}

.product__hotline a {
	font-weight: 700;
	font-size: 17px;
}

.product-detail,
.product-extra {
	margin-top: 44px;
}

.product-detail__title {
	font-size: 20px;
	padding-bottom: 10px;
	border-bottom: 2px solid var(--vien);
	position: relative;
}

.product-detail__title::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -2px;
	width: 90px;
	height: 2px;
	background: var(--cam);
}

.product-extra__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 14px;
	margin-top: 18px;
}

.product-extra__grid img {
	border-radius: var(--radius);
	border: 1px solid var(--vien);
}

.section--related {
	padding: 48px 0 0;
}

.section--related .section-head {
	text-align: left;
}

/* ---------- 10. Yêu cầu báo giá & form ---------- */
/*
 * Khoảng cách giữa phần đầu trang (đường dẫn phân cấp / header) và nội dung.
 * Trước đây các trang trong không có khoảng này nên chữ dính sát lên trên.
 */
.single-post,
.single-page,
.archive-news,
.archive-products,
.quote-page,
.error-404 {
	padding: 34px 0 56px;
}

.quote-page {
	padding-bottom: 56px;
}

.quote-layout {
	display: grid;
	grid-template-columns: 1fr 440px;
	gap: 28px;
	align-items: start;
}

.quote-list-box,
.quote-form-box {
	border: 1px solid var(--vien);
	border-radius: var(--radius-lg);
	padding: 22px;
}

.quote-list-box__title {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 17px;
	margin: 0 0 16px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--vien);
}

.quote-list-box__title .icon {
	color: var(--cam);
}

.quote-list-box__count {
	background: var(--cam-dam);
	color: var(--tren-cam);
	font-size: 12px;
	min-width: 22px;
	height: 22px;
	border-radius: 11px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 7px;
}

.quote-item {
	display: flex;
	align-items: center;
	gap: 13px;
	padding: 11px 0;
	border-bottom: 1px dashed var(--vien);
}

.quote-item__media {
	width: 64px;
	height: 64px;
	border-radius: var(--radius);
	background: var(--anh);
	overflow: hidden;
	flex: none;
}

.quote-item__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.quote-item__body {
	flex: 1;
	min-width: 0;
}

.quote-item__name {
	display: block;
	color: var(--chu);
	font-weight: 600;
	font-size: 15.5px;
}

.quote-item__name:hover {
	color: var(--cam);
}

.quote-item__meta {
	font-size: 14px;
	color: var(--chu-rat-mo);
}

.quote-item__remove {
	border: 0;
	background: transparent;
	color: var(--chu-rat-mo);
	font-size: 24px;
	line-height: 1;
	padding: 0 6px;
}

.quote-item__remove:hover {
	color: var(--cam);
}

.quote-list__empty {
	color: var(--chu-rat-mo);
	font-size: 15px;
	margin: 0;
}

.quote-list__clear {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	border: 0;
	background: transparent;
	color: var(--chu-rat-mo);
	font-size: 14px;
	padding: 12px 0 0;
}

.quote-list__clear:hover {
	color: var(--cam);
}

.quote-note {
	display: flex;
	gap: 9px;
	align-items: flex-start;
	background: var(--nen-2);
	border-radius: var(--radius);
	padding: 12px 14px;
	font-size: 14px;
	color: var(--chu-rat-mo);
	margin: 18px 0 0;
}

.quote-note .icon {
	color: var(--cam);
	margin-top: 1px;
}

/* Form */
.quote-form__title {
	font-size: 18px;
	margin: 0 0 4px;
}

.quote-form__subtitle {
	font-size: 14px;
	color: var(--cam);
	font-weight: 600;
	margin: 0;
}

/* minmax(0, 1fr): ô nhập có độ rộng tối thiểu theo cỡ chữ, để 1fr thì ô
   tràn ra ngoài khung khi cột hẹp (trang Liên hệ). */
.quote-form__row {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}

.quote-form .field {
	margin: 0 0 12px;
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.quote-form label {
	font-size: 14px;
	font-weight: 600;
	color: var(--chu);
}

.quote-form .req {
	color: var(--cam);
}

/* width 100% + min-width 0: ô nhập không tự đòi độ rộng theo cỡ chữ.
   Thiếu hai dòng này thì khi tăng cỡ chữ lên 16px, ô nhập ép khung form
   rộng ~460px, làm cả trang chủ tràn ngang trên điện thoại. */
.quote-form input,
.quote-form textarea {
	width: 100%;
	min-width: 0;
	border: 1px solid var(--vien);
	border-radius: var(--radius);
	padding: 10px 13px;
	font: inherit;
	font-size: 15px;
	color: var(--chu);
	background: var(--nen-3);
	transition: border-color .2s ease;
}

.quote-form input:focus,
.quote-form textarea:focus {
	outline: none;
	border-color: var(--cam);
}

.quote-form .has-error {
	border-color: var(--cam);
	background: var(--cam-mo);
	color: var(--chu);
}

.quote-form textarea {
	resize: vertical;
}

.field--trap {
	position: absolute !important;
	left: -9999px;
	height: 0;
	overflow: hidden;
}

.captcha-row {
	display: flex;
	align-items: center;
	gap: 9px;
}

.captcha-row input {
	flex: 1;
	min-width: 0;
}

/* Ảnh mã bảo mật - máy chủ vẽ, đáp án không gửi về trình duyệt. */
.captcha-anh {
	display: block;
	width: 150px;
	height: 52px;
	flex: 0 0 auto;
	border: 1px solid var(--vien);
	border-radius: var(--radius);
	background: var(--anh);
	user-select: none;
}

/* Lối thoát cho người không đọc được ảnh. */
.captcha-tro-giup {
	margin: 8px 0 0;
	font-size: 14px;
	color: var(--chu-rat-mo);
}

.captcha-tro-giup a {
	color: var(--cam-dam);
	font-weight: 600;
}

/* Ô chờ thay cho ảnh mã lúc khách chưa chạm vào form. */
.captcha-anh--cho {
	padding: 0 8px;
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	color: var(--cam-dam);
	cursor: pointer;
}

.captcha-anh[hidden] {
	display: none;
}

.captcha-refresh {
	border: 1px solid var(--vien);
	background: var(--nen-3);
	border-radius: var(--radius);
	padding: 9px;
	color: var(--chu-mo);
	display: flex;
}

.captcha-refresh:hover {
	color: var(--cam);
	border-color: var(--cam);
}

.quote-form__submit {
	margin-top: 6px;
}

.quote-form__message {
	margin: 10px 0 0;
	font-size: 14.5px;
	font-weight: 600;
}

.quote-form__message.is-success {
	color: #1e7a35;
}

.quote-form__message.is-error {
	color: var(--cam);
}

/* ---------- 11. Tin tức, trang trong ---------- */
.news-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
}

.news-card {
	background: var(--nen-3);
	border: 1px solid var(--vien);
	border-radius: var(--radius-lg);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: box-shadow .2s ease, border-color .2s ease;
}

.news-card:hover {
	border-color: var(--cam);
	box-shadow: var(--shadow);
}

.news-card__media {
	display: block;
	aspect-ratio: 16 / 10;
	background: var(--anh);
	overflow: hidden;
}

.news-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .35s ease;
}

.news-card:hover .news-card__media img {
	transform: scale(1.05);
}

.news-card__placeholder {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--vien);
}

.news-card__body {
	padding: 14px 16px 16px;
	display: flex;
	flex-direction: column;
	gap: 7px;
	flex: 1;
}

.news-card__date {
	font-size: 13.5px;
	color: var(--chu-rat-mo);
}

.news-card__title {
	font-size: 16px;
	margin: 0;
	line-height: 1.45;
}

.news-card__title a {
	color: var(--chu);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.news-card__title a:hover {
	color: var(--cam);
}

.news-card__excerpt {
	margin: 0;
	font-size: 14.5px;
	color: var(--chu-rat-mo);
}

.news-card__link {
	margin-top: auto;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 14px;
	font-weight: 600;
	color: var(--cam);
}

.entry {
	padding-bottom: 20px;
}

.entry-head {
	margin-bottom: 18px;
}

.entry-title {
	font-size: 28px;
	margin: 0 0 8px;
}

.entry-meta {
	font-size: 14px;
	color: var(--chu-rat-mo);
	display: flex;
	gap: 8px;
	align-items: center;
}

.entry-thumb {
	margin: 0 0 22px;
	border-radius: var(--radius-lg);
	overflow: hidden;
}

.entry-content {
	color: var(--chu-mo);
	font-size: 16.5px;
}

.entry-content h2 {
	font-size: 21px;
	margin-top: 1.6em;
}

.entry-content h3 {
	font-size: 18px;
	margin-top: 1.4em;
}

.entry-content img {
	border-radius: var(--radius);
	margin: 1em 0;
}

.entry-content blockquote {
	margin: 1.4em 0;
	padding: 12px 20px;
	border-left: 3px solid var(--cam);
	background: var(--nen-2);
	border-radius: 0 var(--radius) var(--radius) 0;
	font-style: italic;
}

.entry-content table th,
.entry-content table td {
	border: 1px solid var(--vien);
	padding: 9px 12px;
}

.entry-tags {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	margin: 24px 0;
	font-size: 14px;
}

.entry-tags .icon {
	color: var(--cam);
}

.entry-tags a {
	background: var(--nen-2);
	border-radius: 999px;
	padding: 4px 12px;
	color: var(--chu-mo);
}

.entry-tags a:hover {
	background: var(--cam-mo);
	color: var(--cam);
}

.entry-nav {
	display: flex;
	justify-content: space-between;
	gap: 14px;
	border-top: 1px solid var(--vien);
	padding-top: 18px;
	flex-wrap: wrap;
}

.entry-nav__item {
	display: flex;
	align-items: center;
	gap: 7px;
	max-width: 46%;
	font-size: 14.5px;
	color: var(--chu-mo);
}

.entry-nav__item span {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.entry-nav__item:hover {
	color: var(--cam);
}

/* Sidebar */
.news-sidebar {
	position: sticky;
	top: 16px;
}

.widget {
	border: 1px solid var(--vien);
	border-radius: var(--radius-lg);
	padding: 18px;
	margin-bottom: 18px;
}

.widget-title {
	font-size: 15px;
	text-transform: uppercase;
	letter-spacing: .4px;
	margin: 0 0 14px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--vien);
}

.widget-posts {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 12px;
}

.widget-posts a {
	display: flex;
	gap: 11px;
	align-items: flex-start;
	color: var(--chu);
}

.widget-posts img {
	width: 62px;
	height: 62px;
	object-fit: cover;
	border-radius: var(--radius);
	flex: none;
}

.widget-posts strong {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: 14.5px;
	font-weight: 600;
	line-height: 1.45;
}

.widget-posts em {
	font-style: normal;
	font-size: 13px;
	color: var(--chu-rat-mo);
}

.widget-posts a:hover strong {
	color: var(--cam);
}

.widget--cta {
	background: var(--nen-2);
	font-size: 14.5px;
}

.search-form {
	display: flex;
	border: 1px solid var(--vien);
	border-radius: var(--radius);
	overflow: hidden;
}

.search-form input {
	flex: 1;
	border: 0;
	padding: 9px 13px;
	font: inherit;
	font-size: 15px;
	color: var(--chu);
	background: var(--nen-3);
	outline: none;
	min-width: 0;
}

.search-form button {
	border: 0;
	background: var(--cam-dam);
	color: var(--tren-cam);
	padding: 0 14px;
	display: flex;
	align-items: center;
}

.comments {
	margin-top: 34px;
	border-top: 1px solid var(--vien);
	padding-top: 24px;
}

.comment-list {
	list-style: none;
	padding: 0;
}

/* ---------- 12. Chân trang & nút nổi ---------- */
.site-footer {
	background: var(--nen-dam);
	color: rgba(255, 255, 255, .72);
	font-size: 15px;
}

.site-footer__grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1.3fr;
	gap: 36px;
	padding-top: 44px;
	padding-bottom: 36px;
}

.site-footer h3 {
	color: var(--chu-tren-toi);
}

.footer-logo img {
	max-height: 34px;
	width: auto;
	margin-bottom: 14px;
}

.footer-brand-text {
	font-size: 22px;
	color: var(--cam);
	margin-bottom: 8px;
}

.footer-company {
	color: var(--chu-tren-toi);
	font-weight: 600;
	margin-bottom: 6px;
}

.footer-desc {
	margin: 0 0 14px;
}

.footer-social {
	display: flex;
	gap: 9px;
}

.footer-social a {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .1);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
}

.footer-social a:hover {
	background: var(--cam-dam);
}

.footer-title {
	font-size: 15px;
	text-transform: uppercase;
	letter-spacing: .5px;
	margin-bottom: 16px;
	padding-bottom: 10px;
	border-bottom: 1px solid rgba(255, 255, 255, .12);
	position: relative;
}

.footer-title::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -1px;
	width: 48px;
	height: 2px;
	background: var(--cam);
}

.footer-menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 8px;
}

.footer-menu a,
.footer-contact a {
	color: rgba(255, 255, 255, .72);
}

.footer-menu a:hover,
.footer-contact a:hover {
	color: var(--cam);
}

.footer-contact {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 12px;
}

.footer-contact li {
	display: flex;
	gap: 10px;
	align-items: flex-start;
}

.footer-contact .icon {
	color: var(--cam);
	margin-top: 3px;
}

.footer-contact strong {
	color: var(--chu-tren-toi);
	font-weight: 600;
}

.footer-map {
	margin-top: 14px;
	border-radius: var(--radius);
	overflow: hidden;
}

.footer-map iframe {
	width: 100%;
	height: 170px;
	border: 0;
	display: block;
}

.site-footer__bottom {
	border-top: 1px solid rgba(255, 255, 255, .1);
	padding: 14px 0;
	font-size: 14px;
	text-align: center;
}

/* Nút nổi */
.floating-bar {
	position: fixed;
	right: 14px;
	bottom: 20px;
	z-index: 90;
	display: flex;
	flex-direction: column;
	gap: 9px;
}

.floating-btn {
	position: relative;
	width: 46px;
	height: 46px;
	border: 0;
	border-radius: 50%;
	background: var(--cam-dam);
	color: var(--tren-cam);
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 6px 18px rgba(0, 0, 0, .2);
	transition: background .2s ease, transform .2s ease;
}

.floating-btn:hover {
	background: var(--cam-sau);
	color: var(--tren-cam);
	transform: translateY(-2px);
}

.floating-btn--quote {
	background: var(--nen-dam);
	color: var(--chu-tren-toi);
}

.floating-btn--top {
	background: rgba(36, 29, 24, .55);
	color: var(--chu-tren-toi);
	opacity: 0;
	visibility: hidden;
	transition: opacity .2s ease, visibility .2s;
}

.floating-btn--top.is-visible {
	opacity: 1;
	visibility: visible;
}

.floating-btn__count {
	position: absolute;
	top: -3px;
	right: -3px;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border-radius: 9px;
	background: #fff;
	color: var(--cam);
	font-size: 11px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--cam);
}

.floating-btn__tip {
	position: absolute;
	right: 56px;
	top: 50%;
	transform: translateY(-50%);
	white-space: nowrap;
	background: var(--nen-dam);
	color: var(--chu-tren-toi);
	font-size: 13.5px;
	padding: 6px 11px;
	border-radius: var(--radius);
	opacity: 0;
	visibility: hidden;
	transition: opacity .2s ease, visibility .2s;
}

.floating-btn:hover .floating-btn__tip {
	opacity: 1;
	visibility: visible;
}

/*
 * Cụm liên hệ bên trái (Facebook, Zalo, TikTok, hotline) - chép hiệu ứng
 * của kemksa.vn, đổi đỏ #c50b1c thành cam. Nút đặc dùng --cam-dam vì có
 * chữ/biểu tượng trắng; vòng mờ và sóng dùng cam sáng vì chỉ để trang trí.
 */
.contact-float {
	position: fixed;
	left: 4px;
	bottom: 14px;
	z-index: 90;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0;
}

/* Khung 80x80 chứa vòng mờ + nút, giống .phone-vr của kemksa. */
.contact-float__btn {
	position: relative;
	display: block;
	width: 80px;
	height: 80px;
	color: var(--tren-cam);
}

.contact-float__vong-mo {
	position: absolute;
	top: 10px;
	left: 10px;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background: rgba(245, 103, 15, .35);
	border: 2px solid rgba(245, 103, 15, .15);
	animation: contact-zoom 1.5s infinite;
}

.contact-float__nut {
	position: absolute;
	top: 20px;
	left: 20px;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--cam-dam) 0%, var(--cam-sau) 100%);
	box-shadow: 0 8px 18px rgba(199, 76, 5, .35), inset 0 1px 1px rgba(255, 255, 255, .2);
	display: flex;
	align-items: center;
	justify-content: center;
	animation: contact-lac 1s infinite ease-in-out;
}

.contact-float__btn:hover .contact-float__nut {
	background: var(--cam-sau);
}

.contact-float__chu {
	font-size: 12px;
	font-weight: 800;
	letter-spacing: -.3px;
}

/* Hotline: nút gọi đè lên đầu trái của viên thuốc chứa số. */
.contact-float__hotline {
	position: relative;
	display: flex;
	align-items: center;
	color: var(--tren-cam);
}

.contact-float__hotline::before {
	content: "";
	position: absolute;
	left: 30px;
	top: 21px;
	bottom: 21px;
	right: 0;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--cam-dam) 0%, var(--cam-sau) 100%);
	box-shadow: 0 10px 25px rgba(199, 76, 5, .25);
	transition: transform .35s ease, box-shadow .35s ease;
}

.contact-float__hotline:hover {
	color: var(--tren-cam);
}

.contact-float__hotline:hover::before {
	transform: translateY(-2px);
	box-shadow: 0 15px 30px rgba(199, 76, 5, .35);
}

.contact-float__btn--goi {
	z-index: 1;
}

/* Vòng viền mảnh nở to dần, giống .ring-alo-ph-circle. */
.contact-float__vien {
	position: absolute;
	top: 0;
	left: 0;
	width: 80px;
	height: 80px;
	border-radius: 50%;
	border: 2px solid rgba(199, 76, 5, .8);
	opacity: .5;
	animation: contact-vien 1.2s ease-in-out infinite;
}

.contact-float__number {
	position: relative;
	z-index: 1;
	padding: 0 18px 0 2px;
	font-size: 18px;
	font-weight: 700;
	letter-spacing: .3px;
	white-space: nowrap;
}

@keyframes contact-zoom {
	0% {
		transform: scale(.9);
		box-shadow: 0 0 0 0 rgba(245, 103, 15, .45);
	}

	70% {
		transform: scale(1);
		box-shadow: 0 0 0 18px transparent;
	}

	100% {
		transform: scale(.9);
		box-shadow: 0 0 0 0 transparent;
	}
}

@keyframes contact-lac {
	0%, 50%, 100% {
		transform: rotate(0);
	}

	10%, 30% {
		transform: rotate(-20deg);
	}

	20%, 40% {
		transform: rotate(20deg);
	}
}

@keyframes contact-vien {
	0% {
		opacity: .1;
		transform: scale(.5);
	}

	30% {
		opacity: .5;
		transform: scale(.7);
	}

	100% {
		opacity: .6;
		transform: scale(1);
	}
}

@media (prefers-reduced-motion: reduce) {
	.contact-float__vong-mo,
	.contact-float__nut,
	.contact-float__vien {
		animation: none;
	}
}

.mobile-bar {
	display: none;
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 95;
	background: var(--nen);
	border-top: 1px solid var(--vien);
	box-shadow: 0 -2px 14px rgba(0, 0, 0, .08);
}

.mobile-bar__item {
	position: relative;
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	padding: 8px 4px;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--chu);
}

.mobile-bar__item .icon {
	color: var(--cam);
}

.mobile-bar__count {
	position: absolute;
	top: 3px;
	right: 50%;
	margin-right: -22px;
	min-width: 17px;
	height: 17px;
	padding: 0 5px;
	border-radius: 9px;
	background: var(--cam-dam);
	color: var(--tren-cam);
	font-size: 10.5px;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* ---------- 13. Responsive ---------- */
@media (max-width: 1280px) {
	.carousel__nav--prev {
		left: 4px;
	}

	.carousel__nav--next {
		right: 4px;
	}
}

@media (max-width: 1100px) {
	.header-search-form {
		display: none;
	}

	.category-grid,
	.product-extra__grid {
		grid-template-columns: repeat(3, 1fr);
	}

	.process {
		grid-template-columns: repeat(3, 1fr);
	}

	.cta__inner {
		grid-template-columns: minmax(0, 1fr);
	}

	.quote-layout {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 900px) {
	.menu-toggle {
		display: flex;
	}

	.header-main__inner {
		gap: 14px;
	}

	.header-info {
		gap: 12px;
	}

	.info-box__body {
		display: none;
	}

	.header-nav__inner {
		display: block;
		padding: 0;
	}

	.header-zalo {
		display: none;
	}

	.main-nav {
		display: none;
	}

	.main-nav.is-open {
		display: block;
		background: var(--nen);
		border-bottom: 1px solid var(--vien);
	}

	.primary-menu {
		display: block;
	}

	.primary-menu .menu-link {
		color: var(--chu);
		padding: 12px 16px;
		border-bottom: 1px solid var(--vien);
		text-transform: none;
	}

	.primary-menu > li:hover > .menu-link,
	.primary-menu > li.current-menu-item > .menu-link {
		background: var(--cam-mo);
		color: var(--cam);
	}

	.primary-menu .sub-menu {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		box-shadow: none;
		border: 0;
		border-radius: 0;
		display: none;
		padding: 0;
		background: var(--nen-2);
	}

	.primary-menu .sub-menu.is-open {
		display: block;
	}

	.primary-menu li {
		position: relative;
	}

	.submenu-toggle {
		display: block;
		top: 2px;
		right: 0;
		color: var(--chu-mo);
	}

	.main-nav__mobile-extra {
		display: block;
		padding: 12px 16px;
	}

	.archive-layout,
	.news-layout {
		grid-template-columns: 1fr;
	}

	.news-sidebar {
		position: static;
	}

	.filters__toggle {
		display: flex;
	}

	.filters__body {
		display: none;
	}

	.filters__body.is-open {
		display: block;
	}

	.intro__grid {
		grid-template-columns: 1fr;
		gap: 26px;
	}

	.product {
		grid-template-columns: 1fr;
		gap: 26px;
	}

	.hero__title {
		font-size: 26px;
	}

	.hero__sub {
		font-size: 15px;
	}

	.site-footer__grid {
		grid-template-columns: 1fr 1fr;
	}

	.floating-bar {
		bottom: 72px;
	}

	.contact-float {
		bottom: 72px;
	}

	.mobile-bar {
		display: flex;
	}

	body {
		padding-bottom: 56px;
	}
}

@media (max-width: 680px) {
	/*
	 * Trên điện thoại giữ nguyên tỉ lệ ảnh, KHÔNG cắt bớt hai bên nữa.
	 * Banner bây giờ in sẵn chữ trải hết chiều ngang, cắt là mất chữ.
	 * Slide nào cũng có ảnh dọc riêng thì đổi hẳn khung sang 3:4 - xem
	 * template-parts/home/hero.php.
	 */
	.hero--co-anh-dung {
		--hero-ratio: 800 / 1200;
	}

	.topbar__right,
	.topbar__note,
	.topbar__sep {
		display: none;
	}

	.section {
		padding: 36px 0;
	}

	.section-head--row {
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
	}

	.stats__grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.stat {
		border-bottom: 1px solid rgba(255, 255, 255, .22);
	}

	.stat:nth-child(2n) {
		border-right: 0;
	}

	.product-grid,
	.category-grid,
	.product-extra__grid,
	.news-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 12px;
	}

	.process {
		grid-template-columns: repeat(2, 1fr);
	}

	.hero__overlay {
		background: linear-gradient(180deg, rgba(0, 0, 0, .25) 0%, rgba(0, 0, 0, .68) 100%);
		align-items: flex-end;
		padding-bottom: 34px;
	}

	.hero__title {
		font-size: 20px;
	}

	.hero__nav {
		display: none;
	}

	.hero__actions .btn {
		padding: 10px 16px;
		font-size: 14px;
	}

	.quote-form__row {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
	}

	.product__title,
	.page-title,
	.entry-title {
		font-size: 21px;
	}

	.section-title,
	.intro__title,
	.cta__title {
		font-size: 21px;
	}

	.site-footer__grid {
		grid-template-columns: 1fr;
		gap: 26px;
	}

	.product__specs th {
		width: 120px;
	}

	.floating-bar {
		display: none;
	}

	/* Điện thoại đã có thanh Gọi ngay / Zalo / Báo giá dưới đáy nên bỏ
	   số hotline và nút Zalo, chỉ giữ Facebook, TikTok cỡ nhỏ. */
	.contact-float {
		left: 0;
	}

	.contact-float__btn--zalo,
	.contact-float__hotline {
		display: none;
	}

	.quote-list-box,
	.quote-form-box,
	.cta__form {
		padding: 16px;
	}
}

/* ---------- Chữ gợi ý trong ô nhập ---------- */
/*
 * Màu mặc định của trình duyệt dành cho nền sáng, đặt lên nền tối thì mờ
 * gần như không đọc được. Khai báo lại cho rõ.
 */
::placeholder {
	color: var(--chu-rat-mo);
	opacity: 1;
}

/* Ô nhập tự điền của trình duyệt hay bị ép nền trắng - ghi đè lại. */
input:-webkit-autofill,
textarea:-webkit-autofill {
	-webkit-text-fill-color: var(--chu);
	-webkit-box-shadow: 0 0 0 1000px var(--nen-3) inset;
}

/* ---------- Trang Liên hệ ---------- */
.contact-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 14px;
	margin-bottom: 14px;
}

.contact-card {
	display: flex;
	flex-direction: column;
	gap: 3px;
	padding: 18px;
	background: var(--nen-3);
	border: 1px solid var(--vien);
	border-radius: var(--radius-lg);
	color: var(--chu-mo);
	transition: border-color .2s ease;
}

a.contact-card:hover {
	border-color: var(--cam);
	color: var(--chu-mo);
}

.contact-card__icon {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--cam-mo);
	color: var(--cam);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 6px;
}

.contact-card__label {
	font-size: 13.5px;
	color: var(--chu-rat-mo);
	font-weight: 500;
}

.contact-card__value {
	font-size: 17px;
	font-weight: 700;
	color: var(--chu);
	word-break: break-word;
}

.contact-address {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	padding: 16px 18px;
	background: var(--nen-2);
	border: 1px solid var(--vien);
	border-radius: var(--radius-lg);
	margin-bottom: 28px;
}

.contact-address .icon {
	color: var(--cam);
	margin-top: 3px;
}

.contact-address strong {
	display: block;
	color: var(--chu);
}

.contact-layout {
	display: grid;
	grid-template-columns: 1fr 440px;
	gap: 28px;
	align-items: start;
}

.contact-map,
.contact-map iframe {
	width: 100%;
	border: 0;
	border-radius: var(--radius-lg);
	display: block;
}

.contact-map iframe {
	height: 380px;
}

.contact-map--empty {
	height: 380px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	text-align: center;
	padding: 24px;
	background: var(--nen-2);
	border: 1px dashed var(--vien);
	color: var(--chu-rat-mo);
	font-size: 14.5px;
}

.contact-map--empty .icon {
	color: var(--vien);
}

.contact-layout__right .quote-form {
	background: var(--nen-3);
	border: 1px solid var(--vien);
	border-radius: var(--radius-lg);
	padding: 22px;
}

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

@media (max-width: 900px) {
	.contact-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 680px) {
	.contact-grid {
		grid-template-columns: 1fr;
		gap: 10px;
	}

	/* Trang trong trên điện thoại: bớt khoảng cách trên cho đỡ trống. */
	.single-post,
	.single-page,
	.archive-news,
	.archive-products,
	.quote-page,
	.single-product,
	.error-404 {
		padding-top: 22px;
	}
}

/* =========================================================
   14. Hiệu ứng khi cuộn trang
   =========================================================

   Ba điều bắt buộc phải giữ:

   1. KHÔNG ẨN NỘI DUNG NẾU JAVASCRIPT KHÔNG CHẠY.
      Lớp "co-hieu-ung" do JavaScript gắn vào thẻ <html>. Máy nào chặn
      JavaScript, hoặc file JS lỗi, thì lớp này không có và mọi thứ hiện
      bình thường. Nếu viết opacity:0 thẳng vào phần tử, chỉ cần JS hỏng
      là cả trang trắng trơn mà không ai biết vì sao.

   2. TÔN TRỌNG NGƯỜI TẮT HIỆU ỨNG.
      Một số người bị chóng mặt khi nhìn chuyển động (rối loạn tiền đình),
      hệ điều hành có tuỳ chọn "giảm chuyển động". Trình duyệt báo qua
      prefers-reduced-motion, mình phải nghe theo.

   3. KHÔNG ĐỤNG VÀO BANNER.
      Banner là thứ Google đo tốc độ hiển thị (LCP). Cho nó mờ dần rồi mới
      hiện là tự làm chậm điểm tốc độ của chính mình. Banner chỉ phóng nhẹ
      bằng transform - không ảnh hưởng thời điểm hiện ra.
   ========================================================= */

.co-hieu-ung .section-head,
.co-hieu-ung .stat,
.co-hieu-ung .category-card,
.co-hieu-ung .product-card,
.co-hieu-ung .news-card,
.co-hieu-ung .process__step,
.co-hieu-ung .intro__media,
.co-hieu-ung .intro__body,
.co-hieu-ung .cta__body,
.co-hieu-ung .cta__form,
.co-hieu-ung .contact-card {
	opacity: 0;
	transform: translateY(20px);
}

/*
 * Hàng đầu của lưới sản phẩm KHÔNG chờ JavaScript.
 *
 * Cùng lý do với banner ở điều 3 bên trên: trên trang Sản phẩm và các trang
 * danh mục, mấy thẻ đầu tiên chính là thứ khách nhìn thấy ngay và cũng là thứ
 * Google đo tốc độ. Ẩn chúng sau JavaScript là tự làm chậm điểm của mình.
 * Các thẻ phía dưới vẫn giữ hiệu ứng vì khách phải cuộn mới tới.
 */
.co-hieu-ung .product-grid > .product-card:nth-child(-n+4) {
	opacity: 1;
	transform: none;
}

.co-hieu-ung .hien-ra {
	opacity: 1;
	transform: none;
	transition: opacity .55s ease-out, transform .55s cubic-bezier(.2, .7, .3, 1);
}

/*
 * Thẻ sản phẩm vốn đã dùng transform cho hiệu ứng nhấc lên khi rê chuột.
 * Sau khi hiện ra thì trả transition về như cũ để hai thứ không đá nhau.
 */
.co-hieu-ung .product-card.hien-ra,
.co-hieu-ung .category-card.hien-ra,
.co-hieu-ung .news-card.hien-ra,
.co-hieu-ung .process__step.hien-ra {
	transition: opacity .55s ease-out,
	            transform .55s cubic-bezier(.2, .7, .3, 1),
	            box-shadow .2s ease,
	            border-color .2s ease;
}

/* Banner: phóng rất nhẹ rồi thu về, tạo cảm giác ảnh đang "thở". */
.hero__slide .hero__image {
	transform: scale(1.04);
	transition: transform 7s ease-out;
}

.hero__slide.dang-xem .hero__image {
	transform: scale(1);
}

/*
 * Dải menu dính lại đầu màn hình khi cuộn xuống.
 *
 * Không đặt sticky thẳng lên .header-nav được: phần tử dính chỉ dính trong
 * phạm vi thẻ cha, mà .site-header kết thúc ngay sau dải menu nên nó trôi
 * đi luôn. Cách đúng: cho cả .site-header dính, rồi đẩy lên trên một đoạn
 * đúng bằng chiều cao phần nằm trên dải menu. Kết quả là thanh trên cùng và
 * khối logo cuộn đi mất, chỉ còn dải menu đứng lại.
 *
 * Đoạn đẩy lên do JavaScript đo và ghi vào biến --day-len (xem main.js),
 * vì chiều cao đổi theo việc khách có bật thanh trên cùng hay không.
 */
@media (min-width: 901px) {
	.site-header {
		position: sticky;
		top: calc(var(--day-len, 0px) * -1);
		z-index: 60;
	}
}

.header-nav {
	transition: box-shadow .2s ease;
}

.header-nav.dinh-tren {
	box-shadow: 0 6px 22px rgba(0, 0, 0, .5);
}

/* Nút bấm nhấc nhẹ khi rê chuột. */
.btn {
	transition: background .2s ease, color .2s ease, border-color .2s ease, transform .15s ease;
}

.btn:hover:not(:disabled) {
	transform: translateY(-2px);
}

.btn:active:not(:disabled) {
	transform: translateY(0);
}

/*
 * Người dùng bật "giảm chuyển động" trong hệ điều hành: tắt sạch.
 * Đây là phòng hờ - JavaScript đã không gắn lớp co-hieu-ung trong
 * trường hợp này, nhưng khai báo thêm cho chắc.
 */
@media (prefers-reduced-motion: reduce) {
	.co-hieu-ung .section-head,
	.co-hieu-ung .stat,
	.co-hieu-ung .category-card,
	.co-hieu-ung .product-card,
	.co-hieu-ung .news-card,
	.co-hieu-ung .process__step,
	.co-hieu-ung .intro__media,
	.co-hieu-ung .intro__body,
	.co-hieu-ung .cta__body,
	.co-hieu-ung .cta__form,
	.co-hieu-ung .contact-card {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.hero__slide .hero__image,
	.hero__slide.dang-xem .hero__image {
		transform: none;
		transition: none;
	}

	.btn:hover:not(:disabled) {
		transform: none;
	}

	* {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
}