/*
Theme Name: Thể Thao Mẫu Theme
Theme URI: https://thu.lamkaspatialxrlab.com
Author: Thể Thao Mẫu
Author URI: https://thu.lamkaspatialxrlab.com
Description: Website mẫu để xem giao diện ngành thể thao: máy chạy bộ, dụng cụ gym, vợt cầu lông, pickleball, bóng đá, đồ chạy bộ và dã ngoại. Chưa bán hàng.
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 7.4
Version: 1.0.3
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: lamka-xr
Tags: blog, news, e-commerce, block-patterns, full-site-editing, wide-blocks, grid-layout
*/

/* =========================================================
   0. Biến màu (lấy từ theme.json) + kích thước
   ========================================================= */
:root {
	--base: var(--wp--preset--color--base);
	--surface: var(--wp--preset--color--surface);
	--surface-2: var(--wp--preset--color--surface-2);
	--footer: var(--wp--preset--color--footer);
	--border: var(--wp--preset--color--border);
	--border-strong: var(--wp--preset--color--border-strong);
	--contrast: var(--wp--preset--color--contrast);
	--muted: var(--wp--preset--color--muted);
	--primary: var(--wp--preset--color--primary);
	--accent: var(--wp--preset--color--accent);
	--hud: var(--wp--preset--color--hud);
	--grad: var(--wp--preset--gradient--lamka);
	--mono: var(--wp--preset--font-family--mono);
	--radius-sm: 10px;
	--radius: 16px;
	--radius-lg: 24px;
	--header-h: 56px;
	--topbar-h: 0px;
	--bottom-h: 64px;
}
@media (min-width: 1100px) {
	:root { --header-h: 72px; --topbar-h: 36px; }
}

/* =========================================================
   1. Nền tảng
   ========================================================= */
html { scroll-padding-top: calc(var(--header-h) + 64px); } /* Khoảng chừa khi nhảy tới mục (header + thanh mục lục). Không đặt thêm scroll-margin cho từng mục để khỏi cộng đôi. */
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.wp-site-blocks { overflow-x: clip; }
html.lamka-lock { overflow: hidden; }
img, svg { max-width: 100%; height: auto; }
::selection { background: var(--primary); color: var(--base); }
:where(a, button, input, select, textarea, summary):focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
.screen-reader-text:not(:focus) {
	position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.muted { color: var(--muted); }
.lead { color: var(--muted); font-size: clamp(1.0625rem, 1.5vw, 1.25rem); line-height: 1.6; }
.site-main { padding-bottom: 24px; }
.site-main > * + * { margin-block-start: 0; }

/* Nhãn nhỏ phía trên tiêu đề */
.eyebrow {
	display: inline-flex; align-items: center; gap: .55rem; margin: 0;
	font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
	color: var(--accent);
}
.eyebrow::before { content: ""; width: 1.5rem; height: 1px; background: currentColor; }

/* Nhãn loại bài (biên tập) */
.type {
	display: inline-flex; align-items: center; gap: .35rem;
	font-size: 12px; font-weight: 600; letter-spacing: .02em; color: var(--accent); text-decoration: none;
}
.type::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
a.type:hover { color: var(--contrast); }
.type--lab { color: var(--hud); }
.type--guide { color: var(--primary); }

/* Nhãn thương mại "Cửa hàng LamKa" */
.commerce-tag {
	display: inline-flex; align-items: center; gap: .4rem; padding: 3px 10px 3px 8px; border-radius: 6px;
	border: 1px solid rgba(214, 40, 40, .55); background: rgba(214, 40, 40, .08);
	color: var(--primary); font-size: 12px; font-weight: 600; white-space: nowrap;
}

.chip {
	display: inline-flex; align-items: center; gap: .4rem; min-height: 36px; padding: 6px 14px; border-radius: 999px;
	border: 1px solid var(--border); background: var(--surface); color: var(--contrast); font-size: 14px;
	white-space: nowrap; text-decoration: none;
}
.chip:hover, .chip.is-active { border-color: var(--primary); color: var(--contrast); }
.chip.is-active { background: rgba(214, 40, 40, .12); }
.chip--hot::before { content: "#"; color: var(--accent); font-weight: 700; }

.badge { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; border: 1px solid transparent; }
.badge--rent { color: var(--accent); border-color: rgba(245, 158, 11, .45); background: rgba(245, 158, 11, .08); }
.badge--lab { color: var(--primary); border-color: rgba(214, 40, 40, .45); background: rgba(214, 40, 40, .08); }
.badge--plain { color: var(--muted); border-color: var(--border); }

/* Nút */
.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 48px; padding: 0 22px;
	border-radius: 999px; font-weight: 600; font-size: 15px; border: 1px solid transparent; cursor: pointer;
	text-decoration: none; transition: background-color .2s, color .2s, border-color .2s, box-shadow .2s; box-sizing: border-box;
}
.btn--primary { background: var(--primary); color: var(--base); }
.btn--primary:hover { background: var(--accent); color: var(--base); box-shadow: 0 0 24px -6px rgba(245, 158, 11, .6); }
.btn--rent { background: var(--accent); color: var(--base); }
.btn--rent:hover { background: var(--hud); color: var(--base); }
.btn--ghost { border-color: rgba(234, 240, 247, .28); color: var(--contrast); background: transparent; }
.btn--ghost:hover { border-color: var(--accent); color: var(--accent); }
.btn--sm { min-height: 40px; padding: 0 16px; font-size: 14px; }
.wp-block-button__link { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; transition: background-color .2s, color .2s, border-color .2s; }
.wp-block-button.is-style-outline > .wp-block-button__link { background: transparent; color: var(--contrast); border: 1px solid rgba(234, 240, 247, .28); padding: calc(.75rem - 1px) calc(1.375rem - 1px); }
.wp-block-button.is-style-outline > .wp-block-button__link:hover { border-color: var(--accent); color: var(--accent); background: rgba(245, 158, 11, .06); }
.wp-block-button.is-style-rent > .wp-block-button__link { background: var(--accent); color: var(--base); }
.wp-block-button.is-style-rent > .wp-block-button__link:hover { background: var(--hud); }

.icon-btn {
	position: relative; display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 12px;
	border: 0; background: transparent; color: var(--contrast); cursor: pointer; text-decoration: none;
}
.icon-btn:hover { background: var(--surface-2); color: var(--contrast); }
.icon-btn.is-copied { color: var(--accent); }
.link-more { display: inline-flex; align-items: center; gap: .35rem; font-weight: 600; font-size: 14px; white-space: nowrap; text-decoration: none; }
.link-more-group { display: flex; flex-wrap: wrap; gap: 6px 18px; }   /* 1.6.2: khung nhiều chuyên mục — mỗi mục 1 link */

/* Khoảng cách khối */
.section { padding-block: 40px; }
@media (min-width: 1100px) { .section { padding-block: 56px; } }
.section-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px 16px; margin-bottom: 20px; }
.section-head h2 { font-size: clamp(22px, 2.4vw, 30px); margin: 6px 0 0; }
.section-head p { color: var(--muted); margin: 6px 0 0; max-width: 46rem; }

/* Cuộn ngang */
.scroller { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(-1 * var(--wp--style--root--padding-left, 16px)); padding-inline: var(--wp--style--root--padding-left, 16px); }
.scroller::-webkit-scrollbar { display: none; }
.scroller > * { scroll-snap-align: start; flex: 0 0 auto; }

.grid-4, .grid-3 { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) { .grid-4, .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) {
	.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
	.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
}
@media (max-width: 767px) {
	.m-scroll { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(-1 * var(--wp--style--root--padding-left, 16px)); padding-inline: var(--wp--style--root--padding-left, 16px); }
	.m-scroll::-webkit-scrollbar { display: none; }
	.m-scroll > * { flex: 0 0 78%; scroll-snap-align: start; }
}

/* =========================================================
   2. Đầu trang
   ========================================================= */
header.wp-block-template-part {
	position: sticky; top: calc(-1 * var(--topbar-h)); z-index: 50;
	transition: transform .25s ease;
}
.admin-bar header.wp-block-template-part { top: calc(var(--wp-admin--admin-bar--height, 32px) - var(--topbar-h)); }
@media (max-width: 600px) { .admin-bar header.wp-block-template-part { top: 0; } }
header.wp-block-template-part.is-hidden { transform: translateY(-100%); }
html.has-modal-open header.wp-block-template-part { transform: none !important; }

.topbar { display: none; }
@media (min-width: 1100px) {
	.topbar { display: block; background: var(--footer); border-bottom: 1px solid var(--border); font-size: 13px; color: var(--muted); }
	.topbar__inner { width: min(1280px, 100% - 2 * var(--wp--style--root--padding-left, 32px)); margin-inline: auto; display: flex; justify-content: space-between; align-items: center; gap: 24px; min-height: var(--topbar-h); }
	.topbar p { margin: 0; white-space: nowrap; }
	.topbar a { white-space: nowrap; }
	.topbar .topbar__addr { display: inline-block; max-width: 34ch; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }
	.topbar strong { color: var(--accent); font-weight: 600; }
	.topbar nav { display: flex; gap: 20px; }
	.topbar a { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); text-decoration: none; }
	.topbar a:hover { color: var(--contrast); }
}

.site-header { position: relative; isolation: isolate; border-bottom: 1px solid rgba(234, 240, 247, .07); }
.site-header::before {
	content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
	background: rgba(7, 10, 16, .9); -webkit-backdrop-filter: saturate(160%) blur(14px); backdrop-filter: saturate(160%) blur(14px);
}
.header-row { min-height: var(--header-h); gap: 8px !important; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--contrast); text-decoration: none; flex-shrink: 0; margin-right: auto; }
.brand:hover { color: var(--contrast); }
.brand img { width: 36px; height: auto; }
.brand span { display: grid; font-weight: 800; font-size: 17px; line-height: 1.05; letter-spacing: -.01em; white-space: nowrap; }
.brand small { font-family: var(--mono); font-weight: 500; font-size: 9.5px; letter-spacing: .16em; color: var(--accent); margin-top: 3px; }

/* Menu chính: dạng lớp phủ trên điện thoại/máy tính bảng, nằm ngang từ 1100px */
.main-nav { order: 5; }
.main-nav .wp-block-navigation__responsive-container-open { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; color: var(--contrast); }
.main-nav .wp-block-navigation__responsive-container-open svg { width: 26px; height: 26px; }
.main-nav .wp-block-navigation__responsive-container.is-menu-open { padding: 20px var(--wp--style--root--padding-left, 16px) 32px; }
.main-nav .is-menu-open .wp-block-navigation__responsive-container-content { padding-top: 48px; gap: 4px; }
.main-nav .is-menu-open .wp-block-navigation-item { width: 100%; font-size: 1.125rem; font-weight: 600; }
.main-nav .is-menu-open .wp-block-navigation__submenu-container { padding: 4px 0 10px 14px !important; gap: 2px; }
.main-nav .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item { font-size: 1rem; font-weight: 500; color: var(--muted); }
.main-nav .wp-block-navigation-item__description { display: none; }
.main-nav a { text-decoration: none; }
.main-nav a:hover { color: var(--accent); }

.header-search { display: none; }
.header-actions { display: flex; align-items: center; gap: 2px; }
.header-cta { display: none !important; }
.hide-m { display: none !important; }

@media (min-width: 1100px) {
	.brand img { width: 42px; }
	.brand span { font-size: 19px; }
	.brand small { font-size: 10px; }
	.brand { margin-right: 12px; }
	.header-row { gap: 16px !important; }
	.main-nav { order: 0; margin-right: auto; }
	.main-nav .wp-block-navigation__responsive-container-open { display: none !important; }
	.main-nav .wp-block-navigation__responsive-container.hidden-by-default:not(.is-menu-open) {
		display: block; position: relative; width: auto; z-index: auto; background: transparent !important; color: inherit !important;
	}
	.main-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__responsive-container-close { display: none; }
	.main-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__responsive-container-content { display: flex; padding: 0; }
	.main-nav .wp-block-navigation__container { gap: 2px; }
	.main-nav .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content { display: inline-flex; align-items: center; height: 44px; padding: 0 12px; border-radius: 10px; font-weight: 500; font-size: 15px; }
	.main-nav .wp-block-navigation__container > .wp-block-navigation-item:hover > .wp-block-navigation-item__content { background: var(--surface-2); color: var(--contrast); }
	.main-nav .nav-mobile-only { display: none !important; }
	.main-nav .wp-block-navigation__submenu-icon { margin-left: -6px; margin-right: 6px; }
	.main-nav .wp-block-navigation__submenu-container {
		min-width: 340px !important; padding: 10px !important; border-radius: var(--radius) !important;
		background: var(--surface) !important; border: 1px solid var(--border) !important; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .7);
		top: calc(100% + 6px) !important;
	}
	/* 1.6.1: mục con = 1 cột dọc — tên ở trên, chú thích ngay dưới, cùng lề trái (core WordPress đặt flex hàng ngang → lộn xộn) */
	.main-nav .wp-block-navigation__submenu-container .wp-block-navigation-item { width: 100%; }
	.main-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: flex-start !important;
		gap: 3px; width: 100%; box-sizing: border-box; text-align: left; padding: 10px 12px !important; border-radius: 10px;
	}
	.main-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__label,
	.main-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__description { display: block; width: 100%; text-align: left; }
	.main-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover { background: var(--surface-2); }
	.main-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__label { font-weight: 600; font-size: 14.5px; line-height: 1.35; color: var(--contrast); }
	.main-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__description { margin: 0; color: var(--muted); font-size: 12.5px; line-height: 1.45; }

	.header-search { display: block; flex: 1 1 240px; max-width: 340px; margin: 0; }
	.btn-search-mobile { display: none !important; }
	.header-cta { display: inline-flex !important; margin-left: 6px; }
	.hide-m { display: inline-grid !important; }
}

/* Ô tìm kiếm (khối Search của WordPress + ô tìm riêng) */
.wp-block-search__inside-wrapper, .search-field {
	display: flex; align-items: center; gap: 6px; height: 44px; padding: 0 4px 0 14px !important; border-radius: 999px;
	background: var(--surface-2); border: 1px solid var(--border-strong) !important;
}
.wp-block-search__inside-wrapper:focus-within, .search-field:focus-within { border-color: var(--primary) !important; box-shadow: 0 0 0 3px rgba(214, 40, 40, .22); }
.wp-block-search__input, .search-field input {
	flex: 1; min-width: 0; height: 100%; border: 0 !important; background: transparent !important; color: var(--contrast) !important;
	font: inherit; font-size: 14.5px; padding: 0 !important; outline: none;
}
.wp-block-search__input::placeholder, .search-field input::placeholder { color: var(--muted); opacity: 1; }
.wp-block-search__button {
	margin: 0 !important; width: 38px; height: 38px; padding: 0 !important; border-radius: 999px !important; border: 0;
	background: var(--primary) !important; color: var(--base) !important; display: grid; place-items: center;
}
.wp-block-search__button:not(.has-icon) { width: auto; padding: 0 16px !important; }
.wp-block-search__button svg { width: 20px; height: 20px; fill: currentColor; }
.search-field .icon { color: var(--muted); flex-shrink: 0; }
.search-large .wp-block-search__inside-wrapper { height: 52px; }

.search-sheet {
	position: fixed; inset: 0; z-index: 90; background: var(--base); padding: 12px var(--wp--style--root--padding-left, 16px) 24px; overflow-y: auto;
}
.search-sheet[hidden] { display: none; }
.search-sheet__row { display: flex; gap: 8px; align-items: center; }
.search-sheet__row .search-field { flex: 1; height: 48px; }
.search-sheet__label { font-size: 13px; color: var(--muted); font-weight: 600; margin: 24px 0 10px; text-transform: uppercase; letter-spacing: .08em; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.search-pill { margin-top: 12px; }
.search-pill .search-field { height: 48px; }
@media (min-width: 1100px) { .search-pill { display: none; } }

/* =========================================================
   3. Chân trang + thanh đáy điện thoại
   ========================================================= */
footer.wp-block-template-part { margin-top: 24px; }
.site-footer { background: var(--footer); border-top: 1px solid var(--border); padding-block: 40px 28px; }
.footer-top { display: grid; gap: 28px; }
.footer-logo { margin: 0 0 12px; }
.footer-logo img { width: 200px; height: auto; display: block; }
.footer-brand > p { font-size: 14px; max-width: 30rem; margin: 0 0 14px; }
.footer-cols { display: grid; gap: 0; }
.footer-cols .wp-block-details { border-bottom: 1px solid var(--border); margin: 0; }
.footer-cols summary { list-style: none; min-height: 48px; display: flex; align-items: center; justify-content: space-between; font-weight: 600; cursor: pointer; }
.footer-cols summary::-webkit-details-marker { display: none; }
.footer-cols summary::after { content: "+"; color: var(--muted); font-size: 18px; }
.footer-cols details[open] summary::after { content: "–"; }
.footer-cols ul { list-style: none; margin: 0 0 12px; padding: 0; }
.footer-cols li a { display: block; padding: 7px 0; color: var(--muted); font-size: 14px; text-decoration: none; }
.footer-cols li a:hover { color: var(--accent); }
.footer-bottom { margin-top: 28px !important; padding-top: 20px; border-top: 1px solid var(--border); color: var(--muted); font-size: 13px; gap: 8px 24px; }
.footer-bottom p { margin: 0; }
@media (min-width: 1100px) {
	.footer-top { grid-template-columns: 1.2fr 2fr; gap: 48px; }
	.footer-cols { grid-template-columns: repeat(4, 1fr); gap: 24px; }
	.footer-cols .wp-block-details { border: 0; }
	.footer-cols summary { pointer-events: none; min-height: 0; margin-bottom: 10px; font-size: 14px; }
	.footer-cols summary::after { display: none; }
}

.lab-info ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.lab-info li { display: grid; grid-template-columns: 20px 1fr; gap: 10px; align-items: start; color: var(--muted); font-size: 14px; line-height: 1.55; }
.lab-info li .icon { color: var(--accent); margin-top: 1px; }
.lab-info a { color: var(--contrast); text-decoration: none; }
.lab-info a:hover { color: var(--accent); }
.lab-info--contact { padding: 18px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border); }
.lab-info__name { font-weight: 700; font-size: 17px; margin: 0 0 12px; }
.lab-info__ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }

.bottom-nav {
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
	height: calc(var(--bottom-h) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
	background: rgba(9, 13, 20, .97); border-top: 1px solid var(--border); display: grid; grid-template-columns: repeat(5, 1fr);
}
.bottom-nav a, .bottom-nav button {
	display: grid; justify-items: center; align-content: center; gap: 3px; color: var(--muted); font-size: 11px; font-weight: 500;
	border: 0; background: none; cursor: pointer; text-decoration: none; font-family: inherit;
}
.bottom-nav [aria-current="page"] { color: var(--accent); }
.bottom-nav .is-cta { color: var(--primary); }
footer.wp-block-template-part { padding-bottom: calc(var(--bottom-h) + env(safe-area-inset-bottom)); }
@media (min-width: 1100px) {
	.bottom-nav { display: none; }
	footer.wp-block-template-part { padding-bottom: 0; }
}

/* =========================================================
   4. Thẻ bài
   ========================================================= */
.post-card { display: flex; flex-direction: column; gap: 10px; color: var(--contrast); text-decoration: none; }
.post-card:hover { color: var(--contrast); }
.post-card:hover :is(h2, h3) { color: var(--primary); }
.post-card .media, .post-row .media { position: relative; border-radius: var(--radius); overflow: hidden; background: var(--surface-2); aspect-ratio: 16 / 9; }
.post-card .media img, .post-row .media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.media-placeholder {
	display: block; width: 100%; height: 100%;
	background:
		radial-gradient(60% 80% at 80% 10%, rgba(214, 40, 40, .35), transparent 70%),
		radial-gradient(50% 70% at 10% 100%, rgba(245, 158, 11, .2), transparent 70%),
		linear-gradient(rgba(234, 240, 247, .05) 1px, transparent 1px) 0 0 / 24px 24px,
		linear-gradient(90deg, rgba(234, 240, 247, .05) 1px, transparent 1px) 0 0 / 24px 24px,
		var(--surface-2);
}
.post-card :is(h2, h3) { font-size: 17px; line-height: 1.35; margin: 0; transition: color .2s; }
.post-card p { color: var(--muted); font-size: 14.5px; line-height: 1.55; margin: 0; }
.meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; color: var(--muted); font-size: 13px; }
.meta .dot::before { content: "·"; margin-right: 10px; }
.post-card--lead :is(h2, h3) { font-size: clamp(24px, 2.6vw, 36px); line-height: 1.2; letter-spacing: -.02em; }
.post-card--lead p { font-size: 16px; }

.post-rows { display: grid; }
.post-row { display: grid; grid-template-columns: 112px 1fr; gap: 12px; align-items: start; color: var(--contrast); padding-block: 12px; border-bottom: 1px solid var(--border); text-decoration: none; }
.post-row:last-child { border-bottom: 0; }
.post-row:hover h3 { color: var(--primary); }
.post-row .media { border-radius: 10px; aspect-ratio: 4 / 3; }
.post-row h3 { font-size: 15px; line-height: 1.4; margin: 4px 0; transition: color .2s; }

.post-line { display: block; padding: 12px 0; border-bottom: 1px solid var(--border); color: var(--contrast); text-decoration: none; }
.post-line:last-of-type { border-bottom: 0; }
.post-line:hover h3 { color: var(--primary); }
.post-line h3 { font-size: 15px; line-height: 1.45; margin: 4px 0 0; font-weight: 600; }
.post-line time { color: var(--muted); font-size: 12.5px; font-family: var(--mono); }

.numbered { counter-reset: n; list-style: none; margin: 0; padding: 0; }
.numbered li { counter-increment: n; display: grid; grid-template-columns: 34px 1fr; gap: 8px; padding: 12px 0; border-bottom: 1px solid var(--border); }
.numbered li::before { content: counter(n, decimal-leading-zero); font-family: var(--mono); color: var(--accent); font-size: 14px; padding-top: 2px; }
.numbered a { color: var(--contrast); font-weight: 600; font-size: 15px; line-height: 1.45; text-decoration: none; }
.numbered a:hover { color: var(--primary); }

/* Thẻ bài trong lưới có phân trang (khối Query) */
.lamka-query { margin-top: 24px !important; }
.card-grid { gap: 28px 20px !important; }
@media (max-width: 599px) { .card-grid { grid-template-columns: minmax(0, 1fr) !important; } }
.wp-card { display: flex; flex-direction: column; gap: 10px; height: 100%; }
.wp-card > * { margin: 0 !important; }
.wp-card .wp-block-post-featured-image { border-radius: var(--radius); overflow: hidden; background: var(--surface-2); }
.wp-card .wp-block-post-featured-image img { transition: transform .5s ease; }
.wp-card:hover .wp-block-post-featured-image img { transform: scale(1.03); }
.wp-card__title { font-size: 17px !important; line-height: 1.35; }
.wp-card__title a { color: var(--contrast); text-decoration: none; }
.wp-card__title a:hover { color: var(--primary); }
.wp-card__excerpt p { margin: 0; color: var(--muted); font-size: 14.5px; line-height: 1.55; }
.wp-card__excerpt .wp-block-post-excerpt__more-text { display: none; }

.wp-block-query-pagination { gap: 8px; margin-top: 40px !important; }
.wp-block-query-pagination a, .wp-block-query-pagination .page-numbers {
	display: inline-grid; place-items: center; min-width: 44px; height: 44px; padding: 0 14px; border-radius: 999px;
	border: 1px solid var(--border); color: var(--contrast); text-decoration: none; font-size: 15px;
}
.wp-block-query-pagination a:hover { border-color: var(--primary); color: var(--primary); }
.wp-block-query-pagination .page-numbers.current { background: var(--primary); border-color: var(--primary); color: var(--base); font-weight: 600; }
.wp-block-query-pagination .page-numbers.dots { border: 0; min-width: auto; padding: 0; }

/* =========================================================
   5. Trang chủ
   ========================================================= */
.trending { padding-top: 12px; }
.trending__row { margin-top: 12px; }
.trending .label { display: none; }
@media (min-width: 1100px) {
	.trending { padding-top: 20px; }
	.trending__row { margin-top: 0; display: flex; align-items: center; gap: 12px; }
	.trending .label { display: inline; color: var(--muted); font-size: 13px; white-space: nowrap; }
	.trending .scroller { margin: 0; padding: 0; flex-wrap: wrap; overflow: visible; }
}

.home-hero { padding-top: 16px; }
.home-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
.latest h2 { font-size: 15px; font-family: var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--accent); margin: 0 0 4px; }
.latest .foot { padding-top: 12px; }
@media (min-width: 1100px) {
	.home-hero { padding-top: 24px; }
	.home-hero__grid { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 32px; }
	.latest { padding: 20px; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--border); }
}

.lab-band {
	position: relative; overflow: hidden; isolation: isolate; border-radius: var(--radius-lg); border: 1px solid rgba(214, 40, 40, .35);
	background:
		radial-gradient(60% 90% at 90% 0%, rgba(214, 40, 40, .22), transparent 60%),
		radial-gradient(50% 80% at 0% 100%, rgba(245, 158, 11, .12), transparent 60%),
		var(--surface);
	padding: 24px 20px;
}
.lab-band > * { margin: 0 !important; }
.lab-band .inner > * { margin: 0; }
.lab-band .inner > * + * { margin-top: 12px; }
.lab-band h2 { font-size: clamp(24px, 3vw, 36px); }
.lab-band h2 em { font-style: normal; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lab-band .lead { max-width: 36rem; font-size: 16px; }
.steps { list-style: none; margin: 20px 0 0 !important; padding: 0; display: grid; gap: 10px; counter-reset: s; }
.steps li {
	counter-increment: s; position: relative; padding: 12px 12px 12px 64px; min-height: 64px; border-radius: 14px;
	background: rgba(7, 10, 16, .55); border: 1px solid var(--border); color: var(--muted); font-size: 13.5px; line-height: 1.5;
}
.steps li::before {
	content: counter(s); position: absolute; left: 12px; top: 12px; display: grid; place-items: center; width: 40px; height: 40px;
	border-radius: 12px; background: var(--grad); color: var(--base); font-weight: 800;
}
.steps li strong { display: block; font-size: 15px; color: var(--contrast); }
.lab-band .ctas { margin-top: 20px !important; gap: 10px; }
.lab-avail { margin-top: 20px !important; }
.lab-avail__title { font-size: 13px; color: var(--muted); font-weight: 600; margin: 0 0 10px; }
.lab-avail__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.lab-avail__list li { padding: 10px 12px; border-radius: 12px; background: rgba(7, 10, 16, .55); border: 1px solid var(--border); font-size: 14px; }
.lab-avail__list li::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 2px; background: var(--accent); transform: rotate(45deg); }
.lab-avail__note { font-size: 13px; color: var(--muted); margin: 12px 0 0; }
@media (min-width: 768px) { .steps { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) {
	.lab-band { padding: 40px; display: grid; grid-template-columns: 1.5fr 1fr; gap: 40px; align-items: center; }
	.lab-avail { margin-top: 0 !important; }
}

/* 4 ô chuyên mục trang chủ (1.6.0): Tin tức · Kiến thức · Trải nghiệm · Phần mềm — mọi bài có ảnh */
.cat-boxes__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 640px) { .cat-boxes__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .cat-boxes__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.cat-box { display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 14px; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--border); }
.cat-box__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-bottom: 10px; border-bottom: 1px solid var(--border); }
.cat-box__head h3 { margin: 0; font-size: 18px; line-height: 1.3; }
.cat-box__head h3::before { content: ""; display: inline-block; width: 4px; height: 16px; margin-right: 8px; border-radius: 2px; background: var(--grad); vertical-align: -2px; }
.cat-box__head h3 a { color: var(--contrast); text-decoration: none; }
.cat-box__head .link-more { font-size: 13px; white-space: nowrap; }
.cat-box .post-card h3 { font-size: 16px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.cat-box__list { display: grid; gap: 10px; }
.cat-box__row { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 10px; align-items: start; color: var(--contrast); text-decoration: none; }
.cat-box__row .media { aspect-ratio: 4 / 3; overflow: hidden; border-radius: 10px; background: var(--base); }
.cat-box__row .media img, .cat-box__row .media .media-placeholder { display: block; width: 100%; height: 100%; object-fit: cover; }
.cat-box__row h4 { margin: 0; font-size: 14px; line-height: 1.4; font-weight: 600; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.cat-box__row .meta { display: block; margin-top: 4px; font-size: 12px; color: var(--muted); }
.cat-box__row:hover h4, .cat-box__head h3 a:hover { color: var(--primary); }
.cat-box__empty { margin: 0; font-size: 14px; color: var(--muted); }
.cat-box .btn { align-self: flex-start; }

/* Phần mềm tự phát triển (1.5.0): dải trang chủ / trang chuyên mục + form yêu cầu */
.software-band { border-color: rgba(245, 158, 11, .4); }
.software-band__devices { display: flex; flex-wrap: wrap; gap: 8px; }
.software-band .ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px !important; }
.software-band__aside > * + * { margin-top: 10px; }
.software-band__posts .post-line { display: block; padding: 10px 12px; border-radius: 12px; background: rgba(7, 10, 16, .55); border: 1px solid var(--border); color: var(--contrast); text-decoration: none; }
.software-band__posts .post-line + .post-line { margin-top: 8px; }
.software-band__posts .post-line h3 { margin: 4px 0 0; font-size: 15px; line-height: 1.4; }
.software-band__posts time { font-size: 12px; color: var(--muted); }
.steps--stack { grid-template-columns: minmax(0, 1fr) !important; margin-top: 0 !important; }
.software-form { margin-top: 24px; }
.form-hint { font-size: 13px; color: var(--muted); margin: 12px 0 0; }
.type--soft { color: var(--accent); }
@media (min-width: 1100px) { .software-band { grid-template-columns: 1.4fr 1fr; } }

.needs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.need { display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border); }
.need:hover { border-color: rgba(245, 158, 11, .5); }
.need__main { display: grid; gap: 8px; color: var(--contrast); text-decoration: none; }
.need__main:hover { color: var(--contrast); }
.need img { border-radius: 12px; aspect-ratio: 4 / 3; width: 100%; object-fit: cover; }
.need h3 { font-size: 15px; line-height: 1.35; margin: 0; }
.need p { display: none; color: var(--muted); font-size: 14px; margin: 0; }
.need .links { display: none; }
.need .links a { text-decoration: none; }
@media (min-width: 1100px) {
	.needs { grid-template-columns: repeat(4, 1fr); gap: 20px; }
	.need { padding: 18px; }
	.need h3 { font-size: 18px; }
	.need p { display: block; }
	.need .links { display: flex; flex-wrap: wrap; gap: 14px; font-size: 14px; font-weight: 600; margin-top: auto; padding-top: 6px; }
}

.split { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; }
.split > * { margin: 0 !important; }
.split .section { padding: 0; }
@media (min-width: 1100px) { .split { grid-template-columns: 2fr 1fr; gap: 40px; } }

/* =========================================================
   6. Trang danh sách
   ========================================================= */
.page-head { padding-top: 16px; }
.page-head > * { margin: 0; }
.page-head > * + * { margin-top: 12px; }
.page-head h1, .page-head .wp-block-query-title { font-size: clamp(28px, 3.6vw, 40px); letter-spacing: -.025em; }
.page-head .lead, .page-head .wp-block-term-description { color: var(--muted); max-width: 44rem; }
.page-head .wp-block-search { max-width: 560px; }
.category-chips { margin-top: 20px !important; }
@media (min-width: 1100px) {
	.page-head { padding-top: 28px; }
	.category-chips { flex-wrap: wrap; overflow: visible; margin-inline: 0; padding-inline: 0; }
}

/* Breadcrumb */
.breadcrumb { font-size: 13px; color: var(--muted); }
.breadcrumb ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 8px; }
.breadcrumb li + li::before { content: "›"; margin-right: 8px; color: var(--border-strong); }
.breadcrumb a { color: var(--muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--contrast); }
.breadcrumb [aria-current] { color: var(--contrast); }
.back-link { display: none; }
@media (max-width: 767px) {
	.breadcrumb--collapse ol { display: none; }
	.breadcrumb--collapse .back-link { display: inline-flex; align-items: center; min-height: 36px; color: var(--primary); font-weight: 600; font-size: 14px; text-decoration: none; }
}

/* =========================================================
   7. Trang bài viết
   ========================================================= */
.article-intro { padding-top: 16px; }
.article-intro > * { margin: 0; }
.article-head { max-width: 880px; margin-top: 16px !important; }
.article-head > * { margin: 0; }
.article-head > * + * { margin-top: 12px; }
.article-head .wp-block-post-title { font-size: clamp(28px, 4.2vw, 44px); line-height: 1.18; letter-spacing: -.025em; }
.dek { color: var(--muted); font-size: clamp(17px, 1.6vw, 20px); line-height: 1.6; }
.byline { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; margin-top: 18px !important; padding-block: 14px; border-block: 1px solid var(--border); }
.byline .author { display: flex; gap: 10px; align-items: center; }
.avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--surface-2); border: 1px solid var(--border); display: grid; place-items: center; overflow: hidden; flex-shrink: 0; }
.avatar img { width: 30px; height: auto; }
.author__name { display: block; font-weight: 700; font-size: 14.5px; color: var(--contrast); text-decoration: none; }
.author__role { display: block; color: var(--muted); font-size: 12.5px; }
.byline .dates { display: grid; gap: 2px; font-size: 13px; color: var(--muted); }
.byline .dates b { color: var(--contrast); font-weight: 600; }
.byline .share { margin-left: auto; }
.disclosure {
	display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start; padding: 12px 14px; border-radius: 12px;
	background: rgba(214, 40, 40, .07); border: 1px solid rgba(214, 40, 40, .35); font-size: 14px;
}
.disclosure .icon { color: var(--primary); }
.disclosure p { margin: 0; }
.disclosure span { color: var(--muted); }
.hero-figure { margin-top: 24px !important; border-radius: var(--radius-lg); overflow: hidden; background: var(--surface-2); }

.article-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; margin-top: 28px !important; }
.article-layout > * { margin: 0 !important; }
.article-body > * { margin-top: 0; }
.article-body > * + * { margin-top: 28px; }
@media (min-width: 1100px) {
	.article-intro { padding-left: 240px; }
	.article-layout { grid-template-columns: 200px minmax(0, 680px) 300px; gap: 40px; justify-content: space-between; }
}

.toc-desktop { display: none; }
@media (min-width: 1100px) {
	.toc-desktop { display: block; position: sticky; top: calc(var(--header-h) + 24px); align-self: start; }
	.toc-desktop__title { font-size: 12px; font-family: var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 0 0 10px; }
	.toc-desktop ol { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--border); }
	.toc-desktop a { display: block; padding: 7px 0 7px 14px; margin-left: -1px; border-left: 2px solid transparent; color: var(--muted); font-size: 14px; line-height: 1.4; text-decoration: none; }
	.toc-desktop a:hover { color: var(--contrast); }
	.toc-desktop a.is-active { color: var(--accent); border-left-color: var(--accent); }
}
.toc-bar {
	position: sticky; top: 0; z-index: 40; margin-inline: calc(-1 * var(--wp--style--root--padding-left, 16px)) !important;
	background: rgba(13, 19, 29, .97); border-bottom: 1px solid var(--border); transition: top .25s ease;
}
body.header-shown .toc-bar { top: var(--header-h); }
.admin-bar.header-shown .toc-bar { top: calc(var(--header-h) + var(--wp-admin--admin-bar--height, 0px)); }
.toc-bar button {
	width: 100%; display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 var(--wp--style--root--padding-left, 16px);
	border: 0; background: none; color: var(--contrast); text-align: left; cursor: pointer; font: inherit;
}
.toc-bar .lbl { font-family: var(--mono); font-size: 11px; color: var(--accent); letter-spacing: .1em; text-transform: uppercase; flex-shrink: 0; }
.toc-bar .cur { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.toc-bar .icon { color: var(--muted); transition: transform .2s; }
.toc-bar[data-open="true"] .icon { transform: rotate(180deg); }
.toc-bar ol { display: none; list-style: none; margin: 0; padding: 0 var(--wp--style--root--padding-left, 16px) 12px; max-height: 60vh; overflow-y: auto; }
.toc-bar[data-open="true"] ol { display: block; }
.toc-bar ol a { display: block; padding: 10px 0; border-top: 1px solid var(--border); color: var(--muted); font-size: 14.5px; text-decoration: none; }
.toc-bar ol a.is-active { color: var(--accent); }
.progress { height: 2px; background: var(--grad); transform-origin: left; transform: scaleX(0); }
@media (min-width: 1100px) { .toc-bar { display: none; } }

/* Thân bài */
.prose { font-size: 17px; line-height: 1.75; color: #D9E1EC; }
@media (min-width: 1100px) { .prose { font-size: 18px; } }
.prose > * { margin-block: 0; }
.prose > * + * { margin-block-start: 1.1em; }
.prose h2 { font-size: clamp(22px, 2.4vw, 28px); color: var(--contrast); margin-block-start: 2em; }
.prose h3 { font-size: 20px; color: var(--contrast); margin-block-start: 1.6em; }
.prose a { text-decoration: underline; text-underline-offset: .2em; text-decoration-color: rgba(214, 40, 40, .5); }
.prose a:hover { text-decoration-color: currentColor; }
.prose :is(.btn, .lab-info a, .rental-form a.btn) { text-decoration: none; }
.prose :where(ul, ol) { padding-left: 1.2em; }
.prose li + li { margin-top: .35em; }
.prose li::marker { color: var(--accent); }
.prose figure { margin-block: 1.6em; }
.prose img { border-radius: var(--radius); }
.prose figcaption { color: var(--muted); font-size: 13.5px; text-align: left; margin-top: 8px; }
.prose blockquote { margin-inline: 0; font-size: 1.1em; color: var(--contrast); }
.prose :not(pre) > code { padding: .15em .4em; border-radius: 6px; background: var(--surface-2); font-family: var(--mono); font-size: .9em; }
.prose .wp-block-table { overflow-x: auto; border: 1px solid var(--border); border-radius: 12px; }
.prose table { width: 100%; border-collapse: collapse; font-size: 15px; }
.prose th, .prose td { text-align: left; padding: 10px 12px; border: 0; border-bottom: 1px solid var(--border); vertical-align: top; }
.prose thead { border-bottom: 1px solid var(--primary); }
.prose th { color: var(--muted); font-weight: 600; }
.is-style-key-points, .lamka-key-points { padding: 18px 20px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border); font-size: .95em; }
.is-style-key-points > *, .lamka-key-points > * { margin: 0; }
.is-style-key-points ul, .lamka-key-points ul { margin-top: 8px; }
.key-points__title { font-family: var(--mono); font-size: 13px !important; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }

.post-tags { font-size: 14px; color: var(--muted); }
.post-tags a { display: inline-block; margin: 3px 0; padding: 3px 12px; border-radius: 999px; border: 1px solid var(--border); color: var(--contrast); text-decoration: none; }
.post-tags a:hover { border-color: var(--primary); color: var(--primary); }
.post-tags .wp-block-post-terms__separator { display: none; }

.sources { padding: 18px 20px; border-radius: var(--radius); border: 1px dashed var(--border-strong); }
.sources__title { font-size: 18px; margin: 0 0 10px; }
.sources ol { margin: 0; padding-left: 1.3em; font-size: 15px; line-height: 1.6; }
.sources li + li { margin-top: 6px; }
.sources a { word-break: break-word; }
.sources .method { margin: 12px 0 0; font-size: 14px; color: var(--muted); }

.author-box { display: grid; grid-template-columns: 56px 1fr; gap: 14px; padding: 18px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border); }
.author-box .avatar { width: 56px; height: 56px; }
.author-box .avatar img { width: 40px; }
.author-box__name { font-weight: 700; font-size: 16px; color: var(--contrast); text-decoration: none; }
.author-box p { color: var(--muted); font-size: 14px; margin: 4px 0 0; }
.ai-note { margin-top: 10px !important; padding-top: 10px; border-top: 1px solid var(--border); font-size: 13px !important; }

.aside-rail { display: grid; gap: 20px; align-content: start; }
.aside-rail .sticky > * + * { margin-top: 20px; }
@media (min-width: 1100px) { .aside-rail .sticky { position: sticky; top: calc(var(--header-h) + 24px); } }
.aside-card { padding: 16px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border); }
.aside-card__title { font-size: 15px; font-weight: 700; margin: 0 0 4px; }

/* Trang lẻ */
.page-body { max-width: 760px; margin-top: 24px !important; }
@media (min-width: 1100px) { .page-view .article-intro, .page-view .page-body { padding-left: 0; margin-inline: auto; max-width: 760px; } }
.page-view .article-intro .wp-block-post-title { font-size: clamp(28px, 4vw, 42px); letter-spacing: -.02em; margin-top: 16px; }

/* =========================================================
   8. Form thuê & đặt lịch
   ========================================================= */
.rental-form { padding: 20px; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid rgba(245, 158, 11, .35); }
.rental-form h2 { font-size: 22px; margin: 0 0 16px; }
.form-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
@media (min-width: 640px) { .form-grid { grid-template-columns: 1fr 1fr; } .form-grid .span-2 { grid-column: 1 / -1; } }
.lamka-form label, .lamka-form legend { display: grid; grid-template-columns: auto 1fr; justify-content: start; gap: 6px 4px; font-size: 14px; font-weight: 600; color: var(--contrast); }
.lamka-form label > :is(input, select, textarea) { grid-column: 1 / -1; box-sizing: border-box; }
.lamka-form fieldset { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 20px; }
.lamka-form legend { margin-bottom: 6px; width: 100%; }
.lamka-form .radio, .lamka-form .check { display: flex; align-items: center; gap: 10px; font-weight: 500; min-height: 44px; }
.lamka-form .check { align-items: flex-start; min-height: 0; line-height: 1.5; }
.lamka-form input[type="text"], .lamka-form input[type="tel"], .lamka-form input[type="date"], .lamka-form select, .lamka-form textarea {
	width: 100%; min-height: 48px; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--border-strong);
	background: var(--base); color: var(--contrast); font: inherit; font-size: 15px; font-weight: 400; color-scheme: dark;
}
.lamka-form textarea { min-height: 96px; resize: vertical; }
.lamka-form :is(input, select, textarea):focus { border-color: var(--primary); outline: none; box-shadow: 0 0 0 3px rgba(214, 40, 40, .22); }
.lamka-form input[type="radio"], .lamka-form input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--accent); flex-shrink: 0; margin: 0; }
.lamka-form .req { color: var(--accent); }
.form-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-note { padding: 12px 14px; border-radius: 12px; font-size: 14.5px; margin: 0 0 16px; }
.form-note--ok { background: rgba(245, 158, 11, .1); border: 1px solid rgba(245, 158, 11, .45); }
.form-note--err { background: rgba(255, 84, 104, .1); border: 1px solid rgba(255, 84, 104, .45); }

/* =========================================================
   9. Cửa hàng (WooCommerce)
   ========================================================= */
/* Tính cả phần đệm vào kích thước (thẻ cao 100% không tràn khỏi ô lưới) */
:is(.product-card, .aside-card, .pricebox, .rent-table, .rent-tile, .rent-row, .compat-row, .buy-bar, .gallery__main) { box-sizing: border-box; }
.btn--block { display: flex; width: 100%; }
.icon-btn .cart-count {
	position: absolute; top: 4px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
	background: var(--accent); color: var(--base); font-size: 11px; font-weight: 700; line-height: 18px; text-align: center;
}
.section-head .commerce-tag + h2, .section-head .commerce-tag + .eyebrow + h2 { margin-top: 10px; }
.aside-card > .commerce-tag { margin-bottom: 10px; }

/* Giá (dùng chung với mã giá của WooCommerce) */
:is(.product-card, .gear-item) .price { font-weight: 700; font-size: 17px; color: var(--contrast); line-height: 1.35; }
:is(.price, .big, .buy-bar .p) del { color: var(--muted); font-weight: 500; font-size: .8em; margin-right: 6px; }
:is(.price, .big, .buy-bar .p) ins { text-decoration: none; color: var(--contrast); }
.rent-line { font-size: 13px; font-weight: 600; color: var(--accent); }

/* Thẻ sản phẩm */
.product-card {
	display: flex; flex-direction: column; gap: 10px; height: 100%; padding: 12px; border-radius: var(--radius);
	background: var(--surface); border: 1px solid var(--border); color: var(--contrast); text-decoration: none;
	transition: border-color .2s, transform .2s;
}
.product-card:hover { border-color: rgba(214, 40, 40, .5); transform: translateY(-2px); color: var(--contrast); }
.product-card .media { border-radius: 12px; overflow: hidden; background: var(--surface-2); aspect-ratio: 4 / 3; }
.product-card .media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.product-card :is(h2, h3) { font-size: 15px; line-height: 1.4; font-weight: 600; margin: 0; min-height: 2.8em; }
.product-card .badges { display: flex; flex-wrap: wrap; gap: 6px; }
.product-card .price { margin-top: auto; }
@media (max-width: 767px) { .m-scroll--products > * { flex-basis: 64%; } }

/* Lưới sản phẩm (trang cửa hàng, danh mục) */
.shop-query .product-grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; }
.shop-query .product-grid > li { margin: 0; }
@media (min-width: 768px) { .shop-query .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 16px !important; } }
@media (min-width: 1100px) { .shop-query .product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 20px !important; } }
@media (max-width: 599px) {
	.product-grid .product-card { padding: 10px; gap: 8px; }
	.product-grid .product-card :is(h2, h3) { font-size: 14px; }
	.product-grid .product-card .price { font-size: 15px; }
	.product-grid .badge { font-size: 11px; padding: 2px 7px; }
}

.shop-intro { padding-top: 16px; }
.shop-intro > * { margin: 0; }
.shop-head { padding-top: 12px; }
/* Tiêu đề gọn, cùng cỡ chữ với tiêu đề "Nhóm thiết bị" ở cột trái */
.shop-head__row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
.page-head .shop-title { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: 16px; line-height: 1.4; font-weight: 700; letter-spacing: 0; }
.shop-title .icon { color: var(--primary); flex-shrink: 0; }
.shop-head__desc { margin: 0 !important; font-size: 14px; color: var(--muted); }
.shop-head > .shop-head__row + * { margin-top: 12px; }
.shop-head .category-chips { margin-top: 16px !important; }
@media (min-width: 1100px) { .shop-head .category-chips { flex-wrap: wrap; overflow: visible; margin-inline: 0; padding-inline: 0; } }
.chip__n { color: var(--muted); font-size: 12px; font-weight: 600; }
.chip--empty { color: var(--muted); border-style: dashed; }
.chips-wrap { display: flex; flex-wrap: wrap; gap: 8px; }
.need-note { margin-top: 14px !important; padding: 12px 14px; border-radius: 12px; border: 1px solid rgba(245, 158, 11, .35); background: rgba(245, 158, 11, .06); max-width: 52rem; }
.need-note p { margin: 0; font-size: 14.5px; }
.need-note p + p { margin-top: 4px; font-size: 13.5px; }
.need-note a { color: var(--contrast); }

/* Trang gốc cửa hàng: nhóm thiết bị */
.group-grid { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
.group-card { display: flex; flex-direction: column; gap: 12px; padding: 12px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border); box-sizing: border-box; min-width: 0; }
.group-card:hover { border-color: rgba(214, 40, 40, .45); }
.group-card__main { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 12px; align-items: center; color: var(--contrast); text-decoration: none; }
.group-card__main:hover { color: var(--contrast); }
.group-card__main img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 12px; background: var(--surface-2); }
.group-card__text { display: grid; gap: 4px; min-width: 0; }
.group-card h3 { font-size: 16px; line-height: 1.35; margin: 0; }
.group-card__main:hover h3 { color: var(--primary); }
.group-card p { display: none; margin: 0; color: var(--muted); font-size: 14px; line-height: 1.5; }
.group-card__count { font-size: 13px; font-weight: 600; color: var(--accent); }
.group-card__count.is-empty, .need-card__count.is-empty { color: var(--muted); font-weight: 500; }
.group-card__subs { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.group-card__subs a { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 4px 11px; border-radius: 999px; border: 1px solid var(--border); background: var(--base); color: var(--contrast); font-size: 13px; text-decoration: none; box-sizing: border-box; }
.group-card__subs a:hover { border-color: var(--primary); }
.group-card__subs a span { color: var(--muted); font-size: 12px; font-weight: 600; }
.group-card__subs a.is-empty { color: var(--muted); border-style: dashed; }
@media (min-width: 768px) { .group-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } }
@media (min-width: 1100px) {
	.group-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
	.group-card { padding: 14px; }
	.group-card__main { grid-template-columns: minmax(0, 1fr); align-items: start; }
	.group-card h3 { font-size: 17px; }
	.group-card p { display: block; font-size: 13.5px; }
	.group-card__subs { flex-direction: column; flex-wrap: nowrap; gap: 2px; margin-top: auto; padding-top: 10px; border-top: 1px solid var(--border); }
	.group-card__subs a { display: flex; justify-content: space-between; min-height: 32px; padding: 4px 2px; border: 0; background: none; border-radius: 6px; font-size: 14px; }
	.group-card__subs a:hover { color: var(--primary); }
	.group-card__subs a.is-empty { border: 0; }
}

/* Tìm theo nhu cầu */
.need-grid { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.need-card { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 14px; border-radius: var(--radius); background: linear-gradient(160deg, rgba(214, 40, 40, .09), rgba(245, 158, 11, .04) 70%), var(--surface); border: 1px solid var(--border); color: var(--contrast); text-decoration: none; box-sizing: border-box; min-width: 0; }
.need-card:hover { border-color: rgba(245, 158, 11, .5); color: var(--contrast); }
.need-card__n { font-family: var(--mono); font-size: 12px; color: var(--accent); letter-spacing: .1em; }
.need-card h3 { font-size: 15px; line-height: 1.35; margin: 0; }
.need-card p { display: none; margin: 0; color: var(--muted); font-size: 14px; line-height: 1.5; }
.need-card__cats { font-size: 12.5px; color: var(--muted); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.need-card__count { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 4px; font-size: 13px; font-weight: 600; color: var(--primary); }
@media (min-width: 1100px) {
	.need-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
	.need-card { padding: 18px; gap: 8px; }
	.need-card h3 { font-size: 18px; }
	.need-card p { display: block; }
}

/* Thanh trên danh sách: nút Tìm theo nhu cầu + ô tìm sản phẩm */
.shop-nav { display: flex; align-items: center; gap: 10px; margin-top: 14px !important; position: relative; z-index: 45; }
@media (min-width: 1100px) {
	/* Thẳng cột với bố cục bên dưới: nút nhu cầu rộng bằng cột "Nhóm thiết bị", ô tìm kiếm rộng bằng lưới sản phẩm */
	.shop-nav { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 28px; }
	.needs-menu__btn { width: 100%; justify-content: flex-start; }
	.needs-menu__btn .icon-caret { margin-left: auto; }
}
.needs-menu { position: relative; flex-shrink: 0; }
.needs-menu__btn {
	display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 16px 0 14px; border-radius: 999px; box-sizing: border-box;
	border: 1px solid rgba(245, 158, 11, .5); background: rgba(245, 158, 11, .08); color: var(--contrast); font: inherit; font-weight: 600; font-size: 15px; cursor: pointer; white-space: nowrap;
}
.needs-menu__btn .icon-grid { color: var(--accent); }
.needs-menu__btn .icon-caret { color: var(--muted); transition: transform .2s; }
.needs-menu.is-open .needs-menu__btn .icon-caret { transform: rotate(180deg); }
.needs-menu__btn:hover, .needs-menu.is-open .needs-menu__btn { border-color: var(--accent); }
.needs-menu__short { display: none; }
.needs-menu__panel {
	position: absolute; top: calc(100% + 8px); left: 0; z-index: 60; width: min(600px, calc(100vw - 32px)); box-sizing: border-box; padding: 10px;
	border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border-strong); box-shadow: 0 24px 60px -12px rgba(0, 0, 0, .7);
	visibility: hidden; opacity: 0; transform: translateY(-4px); transition: opacity .15s, transform .15s, visibility 0s linear .15s;
}
.needs-menu__panel::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px; } /* Cầu nối để di chuột từ nút xuống không bị đóng */
.needs-menu.is-open .needs-menu__panel { visibility: visible; opacity: 1; transform: none; transition: opacity .15s, transform .15s; }
@media (hover: hover) and (min-width: 1100px) {
	.needs-menu:hover .needs-menu__panel { visibility: visible; opacity: 1; transform: none; transition: opacity .15s, transform .15s; }
	.needs-menu:hover .needs-menu__btn .icon-caret { transform: rotate(180deg); }
}
.needs-menu__hint { margin: 2px 6px 8px; font-size: 13px; color: var(--muted); }
.needs-menu__panel ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
.needs-menu__opt { display: grid; gap: 3px; padding: 10px 12px; border-radius: 12px; color: var(--contrast); text-decoration: none; border: 1px solid transparent; }
.needs-menu__opt:hover, .needs-menu__opt.is-active { background: var(--surface-2); border-color: var(--border); color: var(--contrast); }
.needs-menu__opt b { font-size: 15px; }
.needs-menu__opt span { font-size: 13px; color: var(--muted); line-height: 1.45; }
.needs-menu__opt small { font-size: 12px; color: var(--muted); opacity: .85; }
.needs-menu__opt em { font-style: normal; font-size: 12.5px; font-weight: 600; color: var(--primary); }
.needs-menu__opt em.is-empty { color: var(--muted); font-weight: 500; }
.needs-menu__clear { display: inline-block; margin: 8px 6px 2px; font-size: 13px; }
.shop-search { position: relative; flex: 1; min-width: 0; margin: 0; }
.shop-search input[type="search"] {
	width: 100%; min-height: 48px; box-sizing: border-box; padding: 0 52px 0 18px; border-radius: 999px; border: 1px solid var(--border-strong);
	background: var(--surface); color: var(--contrast); font: inherit; font-size: 15px; color-scheme: dark; -webkit-appearance: none; appearance: none;
}
.shop-search input[type="search"]:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(214, 40, 40, .22); }
.shop-search__btn { position: absolute; top: 5px; right: 5px; width: 38px; height: 38px; border: 0; border-radius: 50%; background: var(--primary); color: var(--base); display: grid; place-items: center; cursor: pointer; }
.shop-search__btn:hover { background: var(--accent); }
@media (max-width: 599px) {
	.needs-menu__long { display: none; }
	.needs-menu__short { display: inline; }
	.needs-menu__btn { padding: 0 12px; }
	.needs-menu__panel ul { grid-template-columns: minmax(0, 1fr); }
	.shop-search input[type="search"] { padding: 0 44px 0 12px; font-size: 14px; }
}

/* Cột trái: nhóm thiết bị */
.shop-side { display: grid; gap: 16px; align-content: start; min-width: 0; }
.shop-side > * { margin: 0 !important; }
.cat-rail__title { display: none; }
.cat-rail__list { list-style: none; margin: 0 calc(-1 * var(--wp--style--root--padding-left, 16px)); padding: 0 var(--wp--style--root--padding-left, 16px); display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.cat-rail__list::-webkit-scrollbar { display: none; }
.cat-rail__item { flex: 0 0 auto; }
.cat-rail__link {
	display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 6px 14px; box-sizing: border-box; border-radius: 999px;
	border: 1px solid var(--border); background: var(--surface); color: var(--contrast); font-size: 14px; white-space: nowrap; text-decoration: none;
}
.cat-rail__item.is-active > .cat-rail__link { border-color: var(--primary); background: rgba(214, 40, 40, .12); }
.cat-rail__img, .cat-rail__ico, .cat-rail__caret, .cat-rail__sub { display: none; }
.cat-rail__n { color: var(--muted); font-size: 12px; font-weight: 600; }
@media (min-width: 1100px) {
	.cat-rail { position: relative; padding: 8px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border); }
	.cat-rail__title { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; padding: 8px 10px 12px; border-bottom: 1px solid var(--border); font-weight: 700; font-size: 16px; }
	.cat-rail__title .icon { color: var(--primary); }
	.cat-rail__list { display: grid; gap: 2px; margin: 0; padding: 0; overflow: visible; }
	.cat-rail__link {
		display: grid; grid-template-columns: 40px minmax(0, 1fr) auto 14px; gap: 10px; width: 100%; min-height: 50px; padding: 6px 8px;
		border: 0; border-radius: 10px; background: none; font-size: 14.5px; font-weight: 600; white-space: normal; line-height: 1.3;
	}
	.cat-rail__img { display: block; width: 40px; height: 30px; object-fit: cover; border-radius: 6px; }
	.cat-rail__ico { display: grid; place-items: center; width: 40px; height: 30px; color: var(--primary); }
	.cat-rail__caret { display: grid; place-items: center; color: var(--muted); }
	.cat-rail__caret .icon { transform: rotate(-90deg); }
	.cat-rail__item:not(:has(.cat-rail__caret)) .cat-rail__link { grid-template-columns: 40px minmax(0, 1fr) auto; }
	.cat-rail__item:hover > .cat-rail__link, .cat-rail__item:focus-within > .cat-rail__link { background: var(--surface-2); }
	.cat-rail__item.is-active > .cat-rail__link { background: rgba(214, 40, 40, .12); color: var(--contrast); }
	.cat-rail__item.is-active > .cat-rail__link .cat-rail__name { color: var(--primary); }
	/* Danh mục con sổ ra bên phải khi di chuột / tab vào nhóm */
	.cat-rail__sub {
		display: block; position: absolute; top: -1px; left: calc(100% - 2px); z-index: 40; width: 300px; min-height: calc(100% + 2px); box-sizing: border-box; padding: 16px;
		border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border-strong); box-shadow: 24px 24px 60px -16px rgba(0, 0, 0, .7);
		visibility: hidden; opacity: 0; transform: translateX(-4px); transition: opacity .12s, transform .12s, visibility 0s linear .12s;
	}
	.cat-rail__item:hover > .cat-rail__sub, .cat-rail__item:focus-within > .cat-rail__sub { visibility: visible; opacity: 1; transform: none; transition: opacity .12s, transform .12s; }
	.cat-rail__sub-title { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 16px; color: var(--contrast); text-decoration: none; }
	.cat-rail__sub-title:hover { color: var(--primary); }
	.cat-rail__sub-desc { margin: 6px 0 12px; font-size: 13px; color: var(--muted); line-height: 1.5; }
	.cat-rail__sub ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
	.cat-rail__sub ul a { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 40px; padding: 6px 10px; border-radius: 8px; color: var(--contrast); font-size: 14px; text-decoration: none; }
	.cat-rail__sub ul a:hover, .cat-rail__sub ul a.is-active { background: var(--surface-2); color: var(--primary); }
	.cat-rail__sub ul a.is-empty { color: var(--muted); }
	.cat-rail__sub ul b { font-size: 12px; color: var(--muted); font-weight: 600; }
}

/* Bố cục danh sách: cột trái (nhóm thiết bị + bộ lọc) + lưới sản phẩm */
.shop-layout { margin-top: 14px !important; }
.shop-results > * { margin: 0; }
.shop-results > * + * { margin-top: 16px !important; }
.shop-toolbar { display: grid; gap: 12px; scroll-margin-top: calc(var(--header-h) + 12px); }
.shop-toolbar__lead { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; }
.shop-toolbar__title { font-size: 18px; margin: 0; }
/* Hai cột bắt đầu cùng một độ cao (bỏ khoảng cách mặc định giữa các khối) */
.shop-layout > * { margin-block-start: 0 !important; }
.shop-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 1100px) {
	/* Hàng "Tất cả sản phẩm" thẳng hàng với dòng "Nhóm thiết bị" ở cột trái */
	.shop-toolbar .shop-toolbar__row { box-sizing: border-box; min-height: 47px; padding-top: 8px; flex-wrap: nowrap; }
}
/* Điện thoại: các ô điều khiển cùng cao 44px, xếp thẳng hàng */
@media (max-width: 1099px) {
	.shop-intro + .shop-nav, .shop-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
	.shop-nav .needs-menu__btn { width: 100%; justify-content: center; }
	.needs-menu__btn, .shop-search input[type="search"] { min-height: 44px; height: 44px; }
	.shop-search__btn { top: 4px; right: 4px; width: 36px; height: 36px; }
	.shop-toolbar .shop-toolbar__row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
	.shop-toolbar .shop-toolbar__actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
	.shop-toolbar__actions > * { min-width: 0; }
	.shop-toolbar .shop-toolbar__actions a.btn.shop-filter-btn { display: flex; width: 100%; min-height: 44px; height: 44px; box-sizing: border-box; justify-content: center; }
	.shop-toolbar .shop-toolbar__actions .shop-sort, .shop-toolbar .shop-toolbar__actions .shop-sort label { display: block; width: 100%; margin: 0; }
	.shop-toolbar .shop-toolbar__actions form.shop-sort.lamka-form select { width: 100%; min-height: 44px; height: 44px; }
	.shop-toolbar .shop-toolbar__actions > :only-child { grid-column: 1 / -1; } /* Chỉ 1 nút (vd. ít sản phẩm nên không có ô sắp xếp): giãn hết hàng */
}
.shop-toolbar__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
.shop-toolbar__count { margin: 0; font-size: 14px; color: var(--muted); }
.shop-toolbar__actions { display: flex; align-items: center; gap: 8px; }
.shop-toolbar form.shop-sort.lamka-form select { width: auto; min-height: 40px; height: 40px; padding: 6px 34px 6px 14px; font-size: 14px; border-radius: 999px; }
.shop-filter-btn__n { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--accent); color: var(--base); font-size: 12px; font-weight: 700; box-sizing: border-box; }
.active-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.chip--remove { min-height: 34px; padding: 4px 10px 4px 12px; font-size: 13px; border-color: rgba(214, 40, 40, .55); background: rgba(214, 40, 40, .1); white-space: normal; }
.chip--remove .icon { color: var(--muted); flex-shrink: 0; }
.chip--remove:hover .icon { color: var(--contrast); }

/* Bộ lọc */
.shop-filters { box-sizing: border-box; }
.shop-filters__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.shop-filters__title { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-weight: 700; font-size: 16px; }
.shop-filters__body { display: grid; }
.facet { border-bottom: 1px solid var(--border); padding-block: 4px; }
.facet:last-child { border-bottom: 0; }
.facet summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; cursor: pointer; list-style: none; font-weight: 600; font-size: 14.5px; }
.facet summary::-webkit-details-marker { display: none; }
.facet summary .icon { color: var(--muted); transition: transform .2s; }
.facet[open] summary .icon { transform: rotate(180deg); }
.facet ul { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 2px; max-height: 300px; overflow-y: auto; }
.facet__opt, .facet__link { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 4px 6px; border-radius: 8px; color: var(--contrast); font-size: 14px; text-decoration: none; }
.facet__opt:hover, .facet__link:hover { background: var(--surface-2); color: var(--contrast); }
.facet__box { width: 18px; height: 18px; flex-shrink: 0; border-radius: 5px; border: 1.5px solid var(--border-strong); box-sizing: border-box; display: grid; place-items: center; }
.facet__opt--radio .facet__box { border-radius: 50%; }
.facet__opt.is-on .facet__box { border-color: var(--primary); background: var(--primary); }
.facet__opt.is-on .facet__box::after { content: ""; width: 8px; height: 5px; border: 2px solid var(--base); border-top: 0; border-right: 0; transform: rotate(-45deg) translate(1px, -1px); }
.facet__opt--radio.is-on .facet__box::after { width: 6px; height: 6px; border: 0; border-radius: 50%; background: var(--base); transform: none; }
.facet__label { flex: 1; min-width: 0; line-height: 1.35; }
.facet__n { color: var(--muted); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.shop-filters__foot { display: flex; gap: 8px; }
.shop-filters__foot .btn { flex: 1; }

@media (max-width: 1099px) {
	/* Điện thoại, máy tính bảng: bộ lọc là ngăn kéo bên trái, mở bằng nút "Bộ lọc" (không có JavaScript vẫn mở được nhờ #bo-loc). */
	.shop-filters {
		position: fixed; top: 0; bottom: 0; left: 0; z-index: 120; width: min(88vw, 380px); margin: 0 !important;
		display: flex; flex-direction: column; background: var(--base); border-right: 1px solid var(--border);
		transform: translateX(-102%); visibility: hidden; transition: transform .25s ease, visibility 0s linear .25s;
	}
	.shop-filters.is-open, .shop-filters:target { transform: none; visibility: visible; transition: transform .25s ease; box-shadow: 0 0 0 100vmax rgba(3, 5, 9, .66); }
	.shop-filters__head { padding: 8px 8px 8px 16px; border-bottom: 1px solid var(--border); }
	.shop-filters__body { flex: 1; overflow-y: auto; padding: 4px 16px 16px; overscroll-behavior: contain; }
	.shop-filters__foot { padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--border); }
	.facet ul { max-height: none; }
}
@media (min-width: 1100px) {
	.shop-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 36px; align-items: start; }
	.shop-layout { gap: 28px; }
	.shop-filters { padding: 16px 16px 8px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border); }
	.shop-filters__close, .shop-filter-btn, .shop-filters__foot [data-lamka-filters-close] { display: none !important; }
	.shop-filters__head { padding-bottom: 6px; border-bottom: 1px solid var(--border); }
	.shop-filters__foot:not(:has(.btn:not([data-lamka-filters-close]))) { display: none; }
	.shop-filters__foot { padding: 12px 0 8px; }
	.shop-layout .shop-query .product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 14px !important; }
	.shop-layout .product-grid .product-card { padding: 10px; gap: 8px; }
	.shop-layout .product-grid .product-card :is(h2, h3) { font-size: 14px; }
	.shop-layout .product-grid .product-card .price { font-size: 15.5px; }
}

/* Nhãn % giảm trên ảnh thẻ sản phẩm */
.product-card .media { position: relative; }
.sale-badge { position: absolute; top: 8px; left: 8px; padding: 3px 8px; border-radius: 8px; background: #FF3B30; color: #fff; font-size: 12.5px; font-weight: 800; letter-spacing: .02em; box-shadow: 0 4px 12px -4px rgba(255, 59, 48, .7); }

/* BIG SALE – Khuyến mãi lớn (rộng bằng khối thuê/thử tại Lab) */
.shop-sale { margin-top: 36px !important; padding: 18px; border-radius: var(--radius-lg); box-sizing: border-box;
	border: 1px solid rgba(255, 92, 60, .45); background: radial-gradient(120% 160% at 0% 0%, rgba(255, 92, 60, .16), transparent 55%), var(--surface); }
.shop-sale__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 8px 16px; margin-bottom: 14px; }
.shop-sale__head h2 { margin: 6px 0 0; font-size: clamp(21px, 2.4vw, 28px); }
.shop-sale__head p { margin: 4px 0 0; font-size: 14px; color: var(--muted); }
.shop-sale__tag { display: inline-block; padding: 3px 10px; border-radius: 6px; background: linear-gradient(90deg, #FF3B30, #FF8A00); color: #fff; font-size: 12px; font-weight: 800; letter-spacing: .14em; }
.shop-sale__head .link-more { color: #FF8A5C; }
.shop-sale__grid .product-card { background: var(--base); }
@media (min-width: 768px) { .shop-sale__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } }
@media (min-width: 1100px) {
	.shop-sale { padding: 24px; }
	.shop-sale__grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
	.shop-sale__grid .product-card { padding: 10px; gap: 8px; }
	.shop-sale__grid .product-card :is(h2, h3) { font-size: 14px; }
	.shop-sale__grid .product-card .price { font-size: 15.5px; }
}
@media (max-width: 767px) { .shop-sale__grid > * { flex-basis: 46%; } }

/* Không có sản phẩm */
.shop-empty { padding: 24px; border-radius: var(--radius); border: 1px dashed var(--border-strong); background: var(--surface); }
.shop-empty > * { margin: 0; }
.shop-empty > * + * { margin-top: 10px; }
.shop-empty__title { font-weight: 700; font-size: 17px; }
.shop-empty__more { font-size: 14px; font-weight: 600; margin-top: 16px !important; }

/* Sau danh sách: thuê / thử tại Lab + hướng dẫn */
.shop-after { margin-top: 28px !important; display: grid; gap: 40px; }
.shop-lab { display: grid; gap: 20px; padding: 20px; border-radius: var(--radius-lg); border: 1px solid rgba(245, 158, 11, .35); background: radial-gradient(120% 140% at 100% 0%, rgba(214, 40, 40, .14), transparent 55%), var(--surface); box-sizing: border-box; }
.shop-lab__text > * { margin: 0; }
.shop-lab__text > * + * { margin-top: 12px; }
.shop-lab h2 { font-size: clamp(21px, 2.4vw, 28px); line-height: 1.3; }
.shop-lab .ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.shop-lab__links { font-size: 14px; }
.shop-lab__img { display: none; border-radius: var(--radius); width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
@media (min-width: 1100px) {
	.shop-lab { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 40px; align-items: center; padding: 36px; }
	.shop-lab__img { display: block; }
}

/* Trang sản phẩm */
.product-intro { padding-top: 16px; }
.product-intro > * { margin: 0; }
.product-intro > * + * { margin-top: 16px; }
.pdp { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
/* Điện thoại / máy tính bảng: ảnh → khung mua → thông tin bảo hành, địa chỉ (cột trái không tạo khối riêng). */
.pdp-media { display: contents; }
.pdp-media .gallery { order: 1; }
.pdp .buybox { order: 2; }
.pdp-media .pdp-trust { order: 3; }
@media (min-width: 1100px) {
	/*
	 * Máy tính: lưới 3 hàng dùng chung 2 cột để các phần thẳng hàng với nhau —
	 * ảnh lớn | thông tin + Thêm vào giỏ (đáy ngang chân ảnh) · ảnh nhỏ | Mua ngay · Shopee · Thuê trước · bảo hành | bảng giá thuê.
	 */
	.pdp { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); grid-template-areas: "img buy" "thumbs actions" "trust rent"; column-gap: 44px; row-gap: 12px; align-items: start; }
	.pdp-media, .pdp-media .gallery, .pdp .buybox { display: contents; }
	.pdp .gallery__main { grid-area: img; }
	.pdp .gallery .thumbs { grid-area: thumbs; margin-top: 0; align-self: start; }
	/* Hàng 3: ô bảo hành và bảng giá thuê cao bằng nhau (cùng giãn theo ô cao hơn), nội dung căn giữa theo chiều dọc. */
	.pdp .pdp-trust { grid-area: trust; margin-top: 6px !important; align-self: stretch; align-content: center; box-sizing: border-box; }
	.pdp .buybox__top { grid-area: buy; align-self: stretch; display: flex; flex-direction: column; }
	.pdp .buybox__top > .pdp-cart { margin-top: auto; padding-top: 18px; }
	.pdp .buybox > .pdp-actions { grid-area: actions; align-self: start; margin-top: 0; }
	.pdp .buybox > .rent-table { grid-area: rent; margin-top: 6px !important; align-self: stretch; display: flex; flex-direction: column; justify-content: center; box-sizing: border-box; }
}
.gallery__main { position: relative; border-radius: var(--radius-lg); overflow: hidden; background: var(--surface); border: 1px solid var(--border); aspect-ratio: 4 / 3; }
.gallery__main img { width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity .28s ease; }
.gallery__main img.is-fading { opacity: .12; }
.gallery__open { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; background: none; color: var(--contrast); cursor: zoom-in; }
.gallery__open .icon { position: absolute; right: 12px; bottom: 12px; width: 40px; height: 40px; padding: 10px; box-sizing: border-box; border-radius: 999px; background: rgba(7, 10, 16, .72); border: 1px solid var(--border); transition: border-color .2s, color .2s; }
.gallery__open:hover .icon { border-color: var(--accent); color: var(--accent); }
.gallery__open:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; border-radius: var(--radius-lg); }
.gallery__count { position: absolute; left: 12px; bottom: 12px; padding: 5px 10px; border-radius: 999px; background: rgba(7, 10, 16, .72); border: 1px solid var(--border); color: var(--contrast); font-size: 13px; font-weight: 600; line-height: 1.2; pointer-events: none; font-variant-numeric: tabular-nums; }

/* Khung phóng to ảnh sản phẩm: 16:9, tối đa 1600×900, giữa màn hình */
html.has-lightbox { overflow: hidden; }
.lightbox { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; }
.lightbox[hidden] { display: none; }
.lightbox__backdrop { position: absolute; inset: 0; background: rgba(3, 5, 9, .92); opacity: 0; transition: opacity .28s ease; }
.lightbox.is-open .lightbox__backdrop { opacity: 1; }
.lightbox__frame { position: relative; margin: 0; width: min(1600px, 92vw, calc((100vh - 150px) * 16 / 9)); width: min(1600px, 92vw, calc((100dvh - 150px) * 16 / 9)); aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: var(--surface); box-shadow: 0 30px 90px rgba(0, 0, 0, .6); transition: transform .3s cubic-bezier(.2, .8, .2, 1); }
.lightbox__img { width: 100%; height: 100%; object-fit: contain; display: block; }
.lightbox__btn { position: absolute; z-index: 2; width: 48px; height: 48px; margin: 0; padding: 0; display: grid; place-items: center; border-radius: 999px; border: 1px solid var(--border); background: rgba(13, 19, 29, .88); color: var(--contrast); cursor: pointer; }
.lightbox__btn:hover { border-color: var(--accent); color: var(--accent); }
.lightbox__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.lightbox__close { top: 16px; right: 16px; }
.lightbox__prev, .lightbox__next { top: 50%; transform: translateY(-50%); }
.lightbox__prev { left: 16px; }
.lightbox__next { right: 16px; }
.lightbox__count { position: absolute; z-index: 2; bottom: 18px; left: 50%; transform: translateX(-50%); margin: 0; padding: 6px 14px; border-radius: 999px; background: rgba(13, 19, 29, .88); color: var(--contrast); font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
@media (max-width: 700px) {
	.lightbox__frame { width: 100vw; border-radius: 0; }
	.lightbox__prev, .lightbox__next { top: auto; bottom: 14px; transform: none; }
	.lightbox__prev { left: 14px; }
	.lightbox__next { right: 14px; }
}
.gallery .thumbs { display: flex; gap: 10px; margin-top: 12px; overflow-x: auto; scrollbar-width: none; }
.gallery .thumbs::-webkit-scrollbar { display: none; }
.gallery .thumbs button { flex: 0 0 70px; height: 52px; padding: 0; border-radius: 10px; overflow: hidden; border: 1px solid var(--border); background: var(--surface-2); cursor: pointer; }
.gallery .thumbs button[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.gallery .thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pdp-trust { margin: 0 !important; padding: 14px 16px !important; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border); gap: 8px !important; }
.pdp-trust li { font-size: 13.5px; }
@media (min-width: 1100px) { .pdp-trust { margin-top: 16px !important; } }

.buybox > *, .buybox__top > * { margin: 0; }
.buybox .eyebrow { text-decoration: none; }
.buybox__title { font-size: clamp(22px, 2.4vw, 28px); line-height: 1.22; letter-spacing: -.02em; margin-top: 8px !important; }
.buybox .sku { color: var(--muted); font-size: 13px; margin-top: 8px; font-family: var(--mono); }
.buybox .badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.pricebox { margin-top: 18px; padding: 16px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border); }
.pricebox__row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 8px 16px; }
.pricebox small { display: block; color: var(--muted); font-size: 12.5px; }
.pricebox .big { font-size: 28px; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; }
.pricebox .rent { color: var(--accent); font-weight: 700; font-size: 18px; }
@media (min-width: 768px) { .pricebox .rent-col { text-align: right; margin-left: auto; } }
.buybox__short { margin-top: 14px; color: var(--muted); font-size: 15px; }
.buybox__short > :first-child { margin-top: 0; }
.buybox__short > :last-child { margin-bottom: 0; }

/* Khung "Thêm vào giỏ" của WooCommerce */
.pdp-cart { margin-top: 18px; }
.pdp-cart form.cart { margin: 0; }
/* Khung mua: mọi nút cao 52px, cách nhau 10px (số lượng + Thêm vào giỏ · Mua ngay · Shopee · Thuê trước) */
.pdp-cart form.cart:not(.variations_form), .pdp-cart .woocommerce-variation-add-to-cart { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 10px; align-items: stretch; }
/* Hàng nút: Mua ngay · Shopee · Thuê trước (· Đặt lịch thử) chung 1 hàng; hẹp quá thì tự xuống dòng, nút cuối giãn hết hàng. */
.pdp-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.pdp-actions > .btn { flex: 1 1 140px; min-height: 52px; padding: 0 12px; font-family: inherit; font-size: 15px; white-space: nowrap; gap: .45rem; }
.buybox > .pdp-actions { margin-top: 10px; }
.pdp-cart .quantity { margin: 0; min-width: 0; }
/* Ghi đè quy tắc ô nhập chung của WooCommerce (rộng 100% + đệm 10px làm ô tràn sang nút, cao 70px). */
.pdp .pdp-cart .quantity input.qty.qty {
	box-sizing: border-box; width: 100%; height: 52px; min-height: 0; padding: 0 8px; border-radius: 999px; border: 1px solid var(--border-strong); background: var(--base);
	color: var(--contrast); font: inherit; font-size: 16px; font-weight: 600; text-align: center; color-scheme: dark;
}
.pdp-cart .single_add_to_cart_button.button {
	display: inline-flex; align-items: center; justify-content: center; min-height: 52px; height: 52px; box-sizing: border-box; padding: 0 18px; border-radius: 999px;
	border: 1px solid rgba(234, 240, 247, .28); background: transparent; color: var(--contrast); font: inherit; font-weight: 600; font-size: 15px; cursor: pointer;
}
.pdp-cart .single_add_to_cart_button.button:hover { border-color: var(--accent); color: var(--accent); background: transparent; }
.pdp-cart .single_add_to_cart_button.button:is(.disabled, :disabled) { opacity: .5; cursor: not-allowed; }
.pdp-cart table.variations { width: 100%; border-collapse: collapse; margin-bottom: 8px; }
.pdp-cart table.variations :is(tbody, tr, th, td) { display: block; width: 100%; padding: 0; text-align: left; }
.pdp-cart table.variations th { padding-bottom: 6px; font-size: 14px; font-weight: 600; }
.pdp-cart table.variations td { padding-bottom: 12px; }
.pdp-cart table.variations select {
	width: 100%; min-height: 48px; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--border-strong);
	background: var(--base); color: var(--contrast); font: inherit; font-size: 15px; color-scheme: dark;
}
.pdp-cart .reset_variations { display: inline-block; margin-top: 8px; font-size: 13px; }
.pdp-cart .reset_variations[style*="hidden"], .pdp-cart .woocommerce-variation:empty { display: none; }
.pdp-cart .woocommerce-variation { margin-bottom: 10px; }
.pdp-cart .woocommerce-variation-price .price { font-size: 20px; }
.pdp-cart .stock { margin: 0 0 10px; font-size: 14px; font-weight: 600; }
.pdp-cart .stock.in-stock { color: var(--accent); }
.pdp-cart .stock.out-of-stock { color: #FF7A8A; }

/* Nút Shopee: nền cam Shopee, logo túi trắng trước chữ */
.btn--shopee { background: #EE4D2D; color: #fff; border-color: #EE4D2D; gap: .6rem; letter-spacing: .01em; }
.btn--shopee:hover { background: #D73211; border-color: #D73211; color: #fff; box-shadow: 0 0 22px -6px rgba(238, 77, 45, .7); }
.btn--shopee .icon-shopee { flex-shrink: 0; }

.consult { display: flex; gap: 8px; align-items: center; margin-top: 14px !important; font-size: 14px; color: var(--muted); }
.consult .icon { color: var(--accent); flex-shrink: 0; }

.rent-table { margin-top: 14px !important; padding: 12px 14px; border-radius: var(--radius); background: var(--surface); border: 1px solid rgba(245, 158, 11, .35); }
.rent-table__title { margin: 0 0 8px; font-weight: 700; font-size: 14px; }
.rent-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.rent-tile { display: grid; gap: 1px; padding: 7px 10px; border-radius: 10px; background: var(--base); border: 1px solid var(--border); color: var(--contrast); text-decoration: none; }
.rent-tile:hover { border-color: var(--accent); color: var(--contrast); }
.rent-tile span { font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rent-tile b { font-size: 15px; }
.rent-tile small { font-size: 12px; font-weight: 700; color: var(--accent); }
.rent-notes { margin: 8px 0 0; font-size: 13px; color: var(--muted); line-height: 1.45; }
@media (max-width: 520px) {
	/* Điện thoại: mỗi gói 1 dòng (tên gói + % giảm bên trái, giá bên phải) để không bị cắt chữ. */
	.rent-tiles { grid-template-columns: minmax(0, 1fr); gap: 6px; }
	.rent-tile { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 12px; }
	.rent-tile span { font-size: 13.5px; }
}
.rent-notes b { color: var(--contrast); font-weight: 600; }

.policies { list-style: none; margin: 18px 0 0 !important; padding: 0; display: grid; gap: 10px; }
.policies li { display: grid; grid-template-columns: 20px 1fr; gap: 10px; font-size: 14px; color: var(--muted); line-height: 1.5; }
.policies li b { color: var(--contrast); font-weight: 600; }
.policies .icon { color: var(--accent); margin-top: 1px; }

.pdp-details { margin-top: 32px !important; }
.pdp-tabs {
	position: sticky; top: 0; z-index: 30; margin-inline: calc(-1 * var(--wp--style--root--padding-left, 16px));
	background: var(--base); border-bottom: 1px solid var(--border); transition: top .25s ease; /* nền đặc: chữ bên dưới không lộ qua */
}
body.header-shown .pdp-tabs { top: var(--header-h); }
.admin-bar.header-shown .pdp-tabs { top: calc(var(--header-h) + var(--wp-admin--admin-bar--height, 0px)); }
.pdp-tabs .scroller { margin: 0; padding: 0 var(--wp--style--root--padding-left, 16px); gap: 0; }
.pdp-tabs a { display: inline-flex; align-items: center; min-height: 48px; padding: 0 14px; color: var(--muted); font-weight: 600; font-size: 14.5px; border-bottom: 2px solid transparent; text-decoration: none; }
.pdp-tabs a:hover { color: var(--contrast); }
.pdp-tabs a.is-active { color: var(--contrast); border-bottom-color: var(--accent); }
@media (min-width: 1100px) {
	.pdp-tabs { top: var(--header-h); margin-inline: 0; }
	.pdp-tabs .scroller { padding: 0; }
}
.pdp-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; }
@media (min-width: 1100px) { .pdp-grid { grid-template-columns: minmax(0, 1fr) 360px; gap: 48px; } }
.pdp-section { padding-top: 32px; }
.pdp-section > h2 { font-size: clamp(20px, 2.2vw, 26px); margin: 0 0 14px; }
.pdp-section .prose { font-size: 16px; }
.table-scroll { overflow-x: auto; border: 1px solid var(--border); border-radius: 12px; }
.spec-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.spec-table :is(th, td) { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border); vertical-align: top; }
.spec-table tr:last-child :is(th, td) { border-bottom: 0; }
.spec-table th { color: var(--muted); font-weight: 500; width: 40%; }
.spec-prose > :first-child { margin-top: 0; }
.spec-prose .table-scroll { margin: 0 0 16px; }
.spec-prose .spec-table { margin: 0; }
.spec-prose + .table-scroll { margin-top: 16px; }
.pdp-section .table-scroll + .prose { margin-top: 16px; }
.warranty-notes { list-style: none; margin: 16px 0 0 !important; padding: 0; display: grid; gap: 10px; }
.warranty-notes li { display: grid; grid-template-columns: 20px 1fr; gap: 10px; font-size: 14.5px; color: var(--muted); line-height: 1.55; }
.warranty-notes .icon { color: var(--accent); margin-top: 2px; }
.warranty-notes a { color: var(--contrast); }
.compat { display: grid; gap: 10px; }
.compat-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border); }
.compat-row strong { font-size: 15px; }
.compat-row div span { display: block; color: var(--muted); font-size: 13px; }
.status { font-size: 13px; font-weight: 700; padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.status--ok { color: var(--accent); background: rgba(245, 158, 11, .1); }
.status--partial { color: var(--primary); background: rgba(214, 40, 40, .1); }
.status--no { color: var(--muted); background: var(--surface-2); }
.faq details { border-bottom: 1px solid var(--border); }
.faq summary { list-style: none; min-height: 52px; display: flex; align-items: center; justify-content: space-between; gap: 12px; font-weight: 600; cursor: pointer; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--muted); font-size: 20px; }
.faq details[open] summary::after { content: "–"; }
.faq p { color: var(--muted); margin: 0; padding-bottom: 14px; }

/* Dòng sản phẩm nhỏ (cột phải, thiết bị trong bài) */
.gear-item { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 12px; padding: 12px 0; border-top: 1px solid var(--border); }
.aside-card__title + .gear-item { border-top: 0; padding-top: 6px; }
.gear-item__img { display: block; width: 76px; height: 57px; border-radius: 8px; overflow: hidden; background: var(--surface-2); }
.gear-item__img img, .gear-item__img .media-placeholder { width: 100%; height: 100%; object-fit: cover; display: block; }
.gear-item h4 { font-size: 14.5px; line-height: 1.35; margin: 0 0 4px; }
.gear-item h4 a { color: var(--contrast); text-decoration: none; }
.gear-item h4 a:hover { color: var(--primary); }
.gear-item .price { font-size: 15px; }
.gear-item .acts { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.gear-item .acts .btn { min-height: 40px; font-size: 13.5px; padding: 0 8px; }
.gear-item .acts .btn:only-child { grid-column: 1 / -1; }
.lab-mini p { font-size: 14px; margin: 4px 0 12px; }
.gear-box--rail { display: none; }
@media (min-width: 1100px) {
	.gear-box--rail { display: block; }
	.gear-box--inline { display: none; }
}

/* Thanh mua cố định trên điện thoại (trang sản phẩm) */
.buy-bar {
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; margin: 0 !important;
	padding: 10px var(--wp--style--root--padding-left, 16px) calc(10px + env(safe-area-inset-bottom));
	background: rgba(9, 13, 20, .97); border-top: 1px solid var(--border);
	display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; align-items: center;
}
.buy-bar .p { font-weight: 800; font-size: 15px; line-height: 1.25; min-width: 0; }
.buy-bar .p del { display: none; }
.buy-bar .p small { display: block; font-size: 12px; color: var(--accent); font-weight: 600; }
.buy-bar .btn { min-height: 44px; padding: 0 14px; font-size: 14px; }
.has-buy-bar .bottom-nav { display: none; }
.has-buy-bar footer.wp-block-template-part { padding-bottom: calc(68px + env(safe-area-inset-bottom)); }
@media (min-width: 1100px) {
	.buy-bar { display: none; }
	.has-buy-bar footer.wp-block-template-part { padding-bottom: 0; }
}

/* Bảng giá thuê (trang Thuê & đặt lịch) */
.rent-list { display: grid; gap: 10px; }
.rent-list__title { font-weight: 700; font-size: 18px; margin: 0; color: var(--contrast); }
.rent-list__note { font-size: 13.5px; margin: 0; }
.rent-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 14px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border); }
.rent-row__name { font-weight: 600; font-size: 15px; line-height: 1.4; color: var(--contrast); }
.rent-prices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; }
.rent-prices dt { font-size: 12.5px; color: var(--muted); }
.rent-prices dd { margin: 0; font-weight: 700; font-size: 15px; color: var(--contrast); }
@media (min-width: 768px) { .rent-row { grid-template-columns: minmax(0, 1.2fr) minmax(0, 2fr) auto; align-items: center; } }
.prose :is(.rent-list, .product-card, .gear-item) a, .prose a.rent-row__name { text-decoration: none; }

/* Thông báo, giỏ hàng, thanh toán, tài khoản (WooCommerce) */
.woocommerce-notices-wrapper:empty { display: none; }
:is(.woocommerce-message, .woocommerce-info, .woocommerce-error, .wc-block-components-notice-banner) {
	display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 0 0 16px; padding: 12px 16px; list-style: none;
	border-radius: 12px; border: 1px solid rgba(214, 40, 40, .45); background: rgba(214, 40, 40, .08); color: var(--contrast); font-size: 14.5px;
}
:is(.woocommerce-message, .wc-block-components-notice-banner.is-success) { border-color: rgba(245, 158, 11, .5); background: rgba(245, 158, 11, .08); }
:is(.woocommerce-error, .wc-block-components-notice-banner.is-error) { border-color: rgba(255, 84, 104, .55); background: rgba(255, 84, 104, .1); }
.wc-block-components-notice-banner > svg { fill: currentColor; flex-shrink: 0; }
:is(.woocommerce-message, .woocommerce-info, .wc-block-components-notice-banner) a.button, .wc-block-components-notice-banner__content a.button { order: 2; margin-left: auto; color: var(--primary); font-weight: 600; background: none; border: 0; padding: 0; text-decoration: none; }
.woocommerce :is(a.button, button.button, input.button, .button) {
	display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 18px; border-radius: 999px;
	border: 1px solid transparent; background: var(--primary); color: var(--base); font: inherit; font-weight: 600; font-size: 14.5px; cursor: pointer; text-decoration: none;
}
.woocommerce :is(a.button, button.button, .button):hover { background: var(--accent); color: var(--base); }
.woocommerce form:not(.wc-block-components-form) .form-row { margin: 0 0 14px; }
.woocommerce form:not(.wc-block-components-form) .form-row label { display: block; margin-bottom: 6px; font-size: 14px; font-weight: 600; }
:is(.woocommerce, .woocommerce-page) form:not(.wc-block-components-form) :is(.input-text, select, textarea) {
	width: 100%; min-height: 48px; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--border-strong);
	background: var(--base); color: var(--contrast); font: inherit; font-size: 15px; color-scheme: dark;
}
.woocommerce table.shop_table { width: 100%; border-collapse: collapse; font-size: 15px; border: 1px solid var(--border); border-radius: 12px; }
.woocommerce table.shop_table :is(th, td) { padding: 10px 12px; border-bottom: 1px solid var(--border); text-align: left; }
.woocommerce-MyAccount-navigation ul { list-style: none; margin: 0 0 24px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.woocommerce-MyAccount-navigation a { display: inline-flex; min-height: 40px; align-items: center; padding: 0 14px; border-radius: 999px; border: 1px solid var(--border); color: var(--contrast); text-decoration: none; font-size: 14px; }
.woocommerce-MyAccount-navigation .is-active a { border-color: var(--primary); background: rgba(214, 40, 40, .12); }

/* Khối giỏ hàng / thanh toán của WooCommerce: ô nhập, lựa chọn theo nền tối */
.wc-block-components-text-input :is(input, textarea), .wc-block-components-textarea,
.wc-blocks-components-select .wc-blocks-components-select__container, .wc-blocks-components-select .wc-blocks-components-select__select,
.wc-block-components-combobox .components-combobox-control input.components-combobox-control__input {
	background-color: var(--base) !important; color: var(--contrast) !important; border-color: var(--border-strong) !important;
}
.wc-block-components-text-input :is(input, textarea):focus, .wc-blocks-components-select__select:focus { border-color: var(--primary) !important; box-shadow: 0 0 0 1px var(--primary) !important; }
.wc-block-components-text-input label, .wc-blocks-components-select__label, .wc-block-components-combobox label { color: var(--muted) !important; }
.wc-blocks-components-select__expand { fill: var(--muted); }
.wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"], .wc-block-components-radio-control .wc-block-components-radio-control__input {
	background-color: var(--base) !important; border-color: var(--border-strong) !important;
}
.wc-block-components-checkbox .wc-block-components-checkbox__mark { fill: var(--accent) !important; }
.wc-block-components-radio-control .wc-block-components-radio-control__input:checked::before { background: var(--accent) !important; }
.wc-block-components-product-name { color: var(--contrast) !important; font-weight: 600; text-decoration: none !important; }
.wc-block-components-product-name:hover { color: var(--primary) !important; }
/* Giỏ hàng trên điện thoại: giá VND dài → đưa cột thành tiền xuống dưới tên sản phẩm */
:is(.is-mobile, .is-small) table.wc-block-cart-items .wc-block-cart-items__row { grid-template-columns: 72px minmax(0, 1fr) !important; }
:is(.is-mobile, .is-small) table.wc-block-cart-items .wc-block-cart-item__product { grid-column: 2 / 3 !important; padding-right: 0 !important; }
:is(.is-mobile, .is-small) table.wc-block-cart-items .wc-block-cart-item__total { grid-column: 2 / 3 !important; grid-row: 2 !important; justify-self: start !important; padding-top: 6px !important; }
:is(.is-mobile, .is-small) table.wc-block-cart-items .wc-block-cart-item__total .wc-block-components-product-price { text-align: left !important; }

.shop-flow .page-head { padding-top: 24px; }
.shop-flow .page-head .wp-block-post-title { font-size: clamp(26px, 3.4vw, 36px); letter-spacing: -.02em; margin: 0; }
.shop-flow__body { margin-top: 20px !important; }

/* =========================================================
   10. Khung liên hệ nổi bên phải (Email · Messenger · Zalo · Gọi)
   ========================================================= */
.float-contact {
	position: fixed; right: 12px; z-index: 58; display: grid; gap: 8px;
	bottom: calc(var(--bottom-h) + env(safe-area-inset-bottom) + 12px);
}
.has-buy-bar .float-contact { bottom: calc(68px + env(safe-area-inset-bottom) + 12px); }
html:is(.has-modal-open, .lamka-lock) .float-contact { display: none; }
.float-contact__btn {
	position: relative; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%;
	color: #fff; text-decoration: none; box-shadow: 0 8px 20px -6px rgba(0, 0, 0, .7), 0 0 0 3px rgba(7, 10, 16, .6);
	transition: transform .2s;
}
.float-contact__btn:hover, .float-contact__btn:focus-visible { color: #fff; transform: scale(1.08); }
.float-contact__btn svg { width: 24px; height: 24px; }
.float-contact__btn--email { background: #0D9488; }
.float-contact__btn--messenger { background: linear-gradient(135deg, #0099FF, #A033FF 60%, #FF5280); }
.float-contact__btn--zalo { background: #0068FF; }
.float-contact__btn--phone { background: #E53935; }
.float-contact__btn--phone::after {
	content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
	animation: lamka-ring 2s ease-out infinite;
}
@keyframes lamka-ring {
	0% { box-shadow: 0 0 0 0 rgba(229, 57, 53, .55); }
	70%, 100% { box-shadow: 0 0 0 14px rgba(229, 57, 53, 0); }
}
.float-contact__tip {
	position: absolute; right: calc(100% + 12px); top: 50%; transform: translateY(-50%);
	display: grid; gap: 1px; padding: 7px 12px; border-radius: 10px; white-space: nowrap; text-align: right;
	background: var(--surface); border: 1px solid var(--border); color: var(--muted); font-size: 12.5px; line-height: 1.35;
	box-shadow: 0 12px 30px -12px rgba(0, 0, 0, .8); opacity: 0; visibility: hidden; transition: opacity .15s;
}
.float-contact__tip small { font-size: 11px; color: var(--accent); }
.float-contact__tip b { font-size: 14px; color: var(--contrast); }
@media (hover: hover) {
	.float-contact__btn:hover .float-contact__tip, .float-contact__btn:focus-visible .float-contact__tip { opacity: 1; visibility: visible; }
}
@media (min-width: 1100px) {
	.float-contact { right: 24px; bottom: 24px; gap: 12px; }
	.has-buy-bar .float-contact { bottom: 24px; }
	.float-contact__btn { width: 56px; height: 56px; }
	.float-contact__btn svg { width: 28px; height: 28px; }
}
@media print { .float-contact { display: none; } }

/* Trang "Cửa hàng đang được chuẩn bị" (chế độ Sắp ra mắt của WooCommerce) */
.coming-soon { max-width: 760px; padding-block: 48px 24px; }
.coming-soon > * { margin: 0; }
.coming-soon > * + * { margin-top: 16px; }
.coming-soon h1 { font-size: clamp(30px, 4.4vw, 46px); line-height: 1.15; letter-spacing: -.025em; }
.coming-soon .wp-block-buttons { gap: 10px; margin-top: 24px !important; }
.coming-soon .lab-info { margin-top: 32px !important; }
@media (min-width: 1100px) { .coming-soon { padding-block: 72px 32px; } }

/* =========================================================
   11. 404
   ========================================================= */
.notfound { max-width: 560px; margin-inline: auto !important; padding-block: 64px; text-align: center; }
.notfound > * { margin: 0; }
.notfound > * + * { margin-top: 16px; }
.code-404 { font-size: clamp(80px, 20vw, 160px); font-weight: 800; line-height: 1; letter-spacing: -.05em; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.notfound .wp-block-buttons.center { justify-content: center; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation: none !important; transition: none !important; }
}
@media (min-width: 1100px) { .cat-boxes__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* 0.2.0: cây 3 chuyên mục chính -> 3 cột */

/* =========================================================
   99. Giao diện SÁNG (Site Kit 0.2.0 — hồ sơ brand.scheme = "sang"; theme nền tối không có đoạn này)
   Nền trắng, chữ đậm; màu thương hiệu đã được làm đậm lúc đóng gói để chữ trắng trên nút và chữ màu trên nền trắng
   đọc rõ (tương phản >= 4.5:1). Dải trên cùng + chân trang giữ nền tối làm điểm nhấn.
   ========================================================= */
html:root {
	--wp--preset--color--base: #FFFFFF;
	--wp--preset--color--surface: #F5F7FA;
	--wp--preset--color--surface-2: #EBEFF4;
	--wp--preset--color--footer: #0F1623;
	--wp--preset--color--border: #E2E7EE;
	--wp--preset--color--border-strong: #A7B2C1;
	--wp--preset--color--contrast: #111827;
	--wp--preset--color--muted: #5A6577;
	--wp--preset--color--primary: #D62828;
	--wp--preset--color--accent: #A46A07;
	--wp--preset--color--hud: #A46A07;
	--wp--preset--gradient--lamka: linear-gradient(90deg, #D62828 0%, #A46A07 100%);
	--wp--preset--gradient--night: linear-gradient(165deg, #F3F6FA 0%, #FFFFFF 100%);
	color-scheme: light;
}
html:root :is(input, select, textarea) { color-scheme: light !important; }
.topbar, .site-footer {
	--wp--preset--color--contrast: #EAF0F7; --wp--preset--color--muted: #A3B0C2; --wp--preset--color--border: #253246;
	--wp--preset--color--border-strong: #5B6B80; --wp--preset--color--primary: #D62828;
	--wp--preset--color--accent: #F59E0B; --wp--preset--color--hud: #F59E0B;
	--contrast: #EAF0F7; --muted: #A3B0C2; --border: #253246; --border-strong: #5B6B80;
	--primary: #D62828; --accent: #F59E0B; --hud: #F59E0B;
	color: #A3B0C2;
}
.site-footer :is(h2, h3, h4, strong, summary) { color: #EAF0F7; }
.site-header { border-bottom-color: rgba(15, 23, 42, .08); }
.site-header::before { background: rgba(255, 255, 255, .92); }
.btn--ghost, .wp-block-button.is-style-outline > .wp-block-button__link { border-color: rgba(15, 23, 42, .22); }
.steps li, .lab-avail__list li, .software-band__posts .post-line { background: rgba(255, 255, 255, .78); }
.media-placeholder {
	background:
		radial-gradient(60% 80% at 80% 10%, rgba(214, 40, 40, .22), transparent 70%),
		radial-gradient(50% 70% at 10% 100%, rgba(245, 158, 11, .16), transparent 70%),
		linear-gradient(rgba(15, 23, 42, .05) 1px, transparent 1px) 0 0 / 24px 24px,
		linear-gradient(90deg, rgba(15, 23, 42, .05) 1px, transparent 1px) 0 0 / 24px 24px,
		#F3F6FA;
}
.main-nav .wp-block-navigation__submenu-container, .needs-menu__panel, .cat-rail__sub { box-shadow: 0 18px 44px -14px rgba(15, 23, 42, .22) !important; }
.lightbox__frame { box-shadow: 0 30px 90px rgba(15, 23, 42, .35); }


/* ===== Giao diện theo ngành: Thể thao — siêu thị dụng cụ & máy tập (Site Kit 0.3.0b2) ===== */
/* Biến giao diện ngành — Site Kit tính từ giao_dien.json → token (không sửa tay) */
:root {
	--gd-sale: #D62828;
	--gd-ink: #1F2933;
	--gd-deal: #FBBF24;
	--gd-deal-ink: #1F2933;
	--gd-star: #F59E0B;
	--gd-stock: #15803D;
	--gd-topbar-bg: var(--wp--preset--color--primary);
	--gd-topbar-ink: #FFFFFF;
	--gd-menu-bg: #1F2933;
	--gd-menu-ink: #FFFFFF;
	--gd-footer-bg: #16191D;
	--gd-footer-ink: #C9CED6;
	--gd-r-s: 4px;
	--gd-r-m: 6px;
	--gd-r-l: 10px;
	--gd-gap: 10px;
	--gd-section: 32px;
	--gd-shadow: 0 1px 2px rgba(15,23,42,.06),0 4px 14px rgba(15,23,42,.06);
	--gd-btn-bg: var(--wp--preset--color--primary);
	--gd-btn-ink: #FFFFFF;
	--gd-btn-radius: var(--gd-r-m);
	--gd-btn-tt: uppercase;
	--gd-body-font: var(--wp--preset--font-family--body);
	--gd-h-font: var(--wp--preset--font-family--body);
	--gd-h-weight: 800;
	--gd-h-tt: uppercase;
	--gd-h-ls: 0.01em;
	--gd-body: 15px;
	--gd-eyebrow-font: inherit;
	--gd-wide: 1240px;
	--gd-img: 1/1;
	--gd-bg: #FFFFFF;
	--gd-bg-2: #F3F4F6;
	--gd-line: #E5E7EB;
	--gd-brand: var(--wp--preset--color--primary);
	--gd-primary-dark: #9E1E1E;
	--gd-page: var(--gd-bg);
	--gd-buy-bg: var(--gd-btn-bg);
	--gd-buy-ink: var(--gd-btn-ink);
	--gd-link: var(--wp--preset--color--primary);
	--gd-banner-bg: #16191D;
}

/* --- _chung/css/00-nen.css --- */
/* =========================================================
   Giao diện theo ngành — NỀN CSS dùng chung (Site Kit 0.3.0)
   Builder nối: biến --gd-* (Python tính từ token của giao_dien.json) → _chung/css/*.css theo tên (tệp này trước)
   → <mẫu>/giao-dien.css ("da" riêng của ngành). Mọi luật nằm dưới .gd (lớp body) để tệp lỡ có ở site gốc cũng không ảnh hưởng.
   Chỉ dùng biến --gd-* + biến gốc (--primary, --contrast, --muted, --border…). Mobile-first, mốc 768 / 1100 / 1280 như gốc.
   ========================================================= */

/* ---------- Nhịp khối trang chủ + đầu khối ---------- */
.gd .gd-home > [data-gd] { margin-block: 0 var(--gd-section); }
.gd .gd-home > [data-gd]:first-of-type { margin-top: 0; }
/* border-box cho MỌI khối (0.3.0b2): theme gốc không đặt border-box toàn cục → khối có đệm / viền (dải tối, đoạn SEO, dải trải
   nghiệm, đăng ký, hộp trắng của ngành…) rộng hơn khối khác đúng 2 × đệm trong bố cục 1280px (5 ngành báo). */
.gd [data-gd] { box-sizing: border-box; font-size: var(--gd-body); }
@supports (content-visibility: auto) {
	.gd .gd-home > [data-gd]:nth-child(n+5) { content-visibility: auto; contain-intrinsic-size: auto 480px; }
}
.gd .gd-dau-khoi { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin: 0 0 calc(var(--gd-gap) + 4px); }
.gd .gd-dau-khoi__nho { display: block; font-family: var(--gd-eyebrow-font); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.gd .gd-dau-khoi__tieu-de {
	margin: 0; font-family: var(--gd-h-font); font-weight: var(--gd-h-weight); text-transform: var(--gd-h-tt);
	letter-spacing: var(--gd-h-ls); font-size: clamp(1.125rem, 2.2vw, 1.5rem); line-height: 1.25; color: var(--contrast);
}
.gd .gd-dau-khoi__them { flex-shrink: 0; font-size: 14px; font-weight: 600; color: var(--primary); text-decoration: none; white-space: nowrap; }
.gd .gd-dau-khoi__them:hover { text-decoration: underline; }
.gd .gd-in-hoa { text-transform: uppercase; letter-spacing: .04em; }

/* ---------- Nút ---------- */
.gd .gd-nut {
	display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 8px 14px;
	border: 1px solid transparent; border-radius: var(--gd-btn-radius); background: var(--gd-btn-bg); color: var(--gd-btn-ink);
	font-weight: 700; font-size: 14px; line-height: 1.2; text-transform: var(--gd-btn-tt); text-decoration: none; cursor: pointer;
	transition: filter .15s ease, background-color .15s ease;
}
.gd .gd-nut:hover { filter: brightness(1.06); }
.gd .gd-nut--vien, .gd .gd-nut--phu { background: transparent; color: var(--contrast); border-color: var(--gd-line); }
.gd .gd-nut--gio { background: var(--gd-ink); color: var(--gd-bg); }
.gd .gd-nut--icon { min-width: 40px; padding: 0; font-size: 20px; }
.gd .gd-nut--rong { width: 100%; }
.gd .gd-nut.is-dang { opacity: .6; pointer-events: none; }

/* ---------- Lưới sản phẩm + dải cuộn ngang (điện thoại ~2,2 thẻ) ---------- */
.gd .gd-luoi-sp { --gd-cot: 4; list-style: none; margin: 0; padding: 0; display: grid; gap: var(--gd-gap); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 768px) { .gd .gd-luoi-sp { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .gd .gd-luoi-sp { grid-template-columns: repeat(var(--gd-cot), minmax(0, 1fr)); } }
.gd .gd-luoi-sp > li { min-width: 0; }
.gd .gd-cuon, .gd [data-gd-cuon] {
	display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 2 * var(--gd-gap)) / 2.2); grid-template-columns: none;
	overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; gap: var(--gd-gap);
}
.gd .gd-cuon::-webkit-scrollbar, .gd [data-gd-cuon]::-webkit-scrollbar { display: none; }
.gd .gd-cuon > *, .gd [data-gd-cuon] > * { scroll-snap-align: start; }
@media (min-width: 768px) { .gd .gd-cuon, .gd [data-gd-cuon] { grid-auto-columns: calc((100% - 3 * var(--gd-gap)) / 3.3); } }
@media (min-width: 1100px) { .gd .gd-cuon, .gd [data-gd-cuon] { grid-auto-columns: calc((100% - (var(--gd-cot, 5) - 1) * var(--gd-gap)) / var(--gd-cot, 5)); } }
.gd [data-gd-cuon-nut] {
	display: none; width: 36px; height: 36px; border-radius: 999px; border: 1px solid var(--gd-line); background: var(--gd-bg);
	color: var(--contrast); box-shadow: var(--gd-shadow); cursor: pointer;
}
@media (hover: hover) and (min-width: 1100px) { .gd [data-gd-cuon-nut] { display: inline-grid; place-items: center; } }

/* ---------- Thẻ sản phẩm ---------- */
.gd .gd-the {
	position: relative; display: flex; flex-direction: column; height: 100%; background: var(--gd-bg); border: 1px solid var(--gd-line);
	border-radius: var(--gd-r-m); overflow: hidden; box-shadow: var(--gd-shadow); color: var(--contrast);
}
.gd .gd-the__anh { position: relative; display: block; aspect-ratio: var(--gd-img); background: #FFFFFF; overflow: hidden; }
.gd .gd-the__anh img { width: 100%; height: 100%; object-fit: contain; display: block; transition: opacity .25s ease; }
.gd .gd-the__anh .gd-the__anh-2 { position: absolute; inset: 0; opacity: 0; }
@media (hover: hover) { .gd .gd-the:hover .gd-the__anh-2 { opacity: 1; } }
.gd .gd-the__trong { position: absolute; inset: 0; background: var(--gd-bg-2); }
.gd .gd-the__nhan { position: absolute; top: 8px; left: 8px; display: flex; flex-wrap: wrap; gap: 4px; max-width: calc(100% - 16px); }
.gd .gd-nhan { display: inline-block; padding: 2px 6px; border-radius: var(--gd-r-s); font-size: 11px; font-weight: 700; line-height: 1.4; background: var(--gd-ink); color: var(--gd-bg); }
.gd .gd-nhan--giam, .gd .gd-nhan--giam-tien { background: var(--gd-sale); color: #FFFFFF; }
.gd .gd-nhan--moi { background: var(--primary); color: #FFFFFF; }
.gd .gd-nhan--ban-chay { background: var(--gd-deal); color: var(--gd-deal-ink); }
.gd .gd-nhan--het-hang { background: rgba(17, 24, 39, .72); color: #FFFFFF; }
.gd .gd-the__than { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px 12px; flex: 1; }
.gd .gd-the__hang { font-size: 11px; font-weight: 700; color: var(--muted); }
.gd .gd-the__ten { margin: 0; font-size: 14px; font-weight: 600; line-height: 1.35; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: var(--gd-dong, 2); overflow: hidden; }
.gd .gd-the__ten a { color: inherit; text-decoration: none; }
.gd .gd-the__ten a:hover { color: var(--primary); }
.gd .gd-the__gia { font-weight: 800; font-size: 16px; color: var(--gd-ink); }
.gd .gd-the__gia--do-dam { color: var(--gd-sale); }
.gd .gd-the__gia del { color: var(--muted); font-weight: 400; font-size: 13px; margin-right: 4px; }
.gd .gd-the__gia ins { text-decoration: none; }
.gd .gd-gia--lien-he { color: var(--gd-ink); }
.gd .gd-zalo-nho { font-size: 12px; font-weight: 600; color: var(--primary); }
.gd .gd-the__phu { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 12px; color: var(--muted); }
.gd .gd-the__sao { color: var(--gd-star); font-weight: 700; }
.gd .gd-the__sao span { color: var(--muted); font-weight: 400; }
.gd .gd-the__chip { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; }
.gd .gd-the__chip li { padding: 1px 6px; border: 1px solid var(--gd-line); border-radius: var(--gd-r-s); font-size: 11px; color: var(--muted); }
.gd .gd-the__mau { display: flex; align-items: center; gap: 4px; }
.gd .gd-cham { width: 14px; height: 14px; border-radius: 50%; background: var(--c, var(--gd-bg-2)); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18); }
.gd .gd-cham-them, .gd .gd-the__so-mau { font-size: 11px; color: var(--muted); }
.gd .gd-the__qua, .gd .gd-the__thue { font-size: 12px; color: var(--muted); }
.gd .gd-the__nut { display: flex; gap: 6px; margin-top: auto; padding-top: 4px; }
.gd .gd-the__nut .gd-nut { flex: 1; min-height: 36px; padding: 6px 8px; font-size: 13px; }
.gd .gd-the__nut .gd-nut--icon { flex: 0 0 36px; }
.gd .gd-lien-he-gia { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 18px; }

/* ---------- Số món giỏ, thông báo nhỏ, hộp giữ chỗ (trình soạn thảo) ---------- */
.gd .gd-gio-dem { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--gd-sale); color: #FFFFFF; font-size: 11px; font-weight: 700; line-height: 1; }
.gd .gd-gio-dem[hidden] { display: none; }
.gd .gd-bao {
	position: fixed; z-index: 100; left: 50%; bottom: calc(var(--bottom-h, 64px) + 16px); transform: translateX(-50%);
	max-width: min(92vw, 420px); padding: 10px 14px; border-radius: var(--gd-r-m); background: var(--gd-ink); color: var(--gd-bg);
	font-size: 14px; box-shadow: 0 8px 30px rgba(0, 0, 0, .25); transition: opacity .35s ease;
}
.gd .gd-bao a { color: inherit; font-weight: 700; }
.gd .gd-bao.is-het { opacity: 0; }
@media (min-width: 1100px) { .gd .gd-bao { bottom: 24px; } }
.gd-giu-cho { padding: 16px; border: 1px dashed var(--border, #9CA3AF); border-radius: 8px; font-size: 13px; color: var(--muted, #6B7280); }

/* ---------- Đầu trang: chiều cao đo bằng JS; giữ hàng data-gd-dinh khi cuộn trên điện thoại (phản biện B4) ---------- */
.gd-dinh header.wp-block-template-part.is-hidden { transform: translateY(calc(-1 * var(--gd-header-an, 0px))); }
.gd-dinh:not(.header-shown) .pdp-tabs, .gd-dinh:not(.header-shown) .toc-bar { top: var(--gd-header-con, 0px); }

/* ---------- Nội dung trang thường (.prose: chính sách, bảo hành, hướng dẫn, trang ngành…) ---------- */
/* Gốc ghi cứng chữ .prose #D9E1EC (thiết kế cho nền tối), phần "giao diện sáng" của gốc không đè → trên nền sáng chữ gần như
   trắng trên trắng. Theo màu chữ của giao diện (sáng hay tối đều đọc được) — 9 ngành đã báo (0.3.0b2). */
.gd .prose { color: color-mix(in srgb, var(--contrast) 90%, var(--gd-bg)); }

/* ---------- Nút của theme gốc (.btn--primary / .btn--rent): chữ luôn theo nút ---------- */
/* Gốc: nút nền --primary / --accent / --hud, chữ --base. Nhưng luật ".lab-info a { color: --contrast }" (thẻ thông tin cửa hàng: nút
   "Nhắn Zalo") và ".gd a { color: --gd-link }" (ngành khai token liên kết) mạnh hơn → chữ tối trên nền màu (giao diện sáng ~3,9:1;
   thời trang nền mực: chữ mực trên nền mực — rà soát cuối 0.3.0b2). Trả lại màu chữ của nút; ngành đổi --accent / --primary thì đặt
   --gd-tren-nut (chữ trên nền nút). */
.gd a:is(.btn--primary, .btn--rent), .gd .lab-info a:is(.btn--primary, .btn--rent),
.gd a:is(.btn--primary, .btn--rent):hover, .gd .lab-info a:is(.btn--primary, .btn--rent):hover { color: var(--gd-tren-nut, var(--base)); }

/* ---------- Phân trang danh sách: "Sau →" / "← Trước" không tách 2 dòng ---------- */
.gd :is(.wp-block-query-pagination, .woocommerce-pagination, .pagination, .nav-links) a { white-space: nowrap; }

/* ---------- Trang rộng (mẫu trang page-gd-rong) ---------- */
.gd .gd-trang-rong .gd-trang-rong__noi-dung > * + * { margin-top: var(--gd-section); }
/* Breadcrumb + H1 cùng bề rộng nội dung 1280px (CSS gốc ".page-view .article-intro" ép 760px canh giữa → H1 lệch phải so với khối). */
@media (min-width: 1100px) { .gd .gd-trang-rong .article-intro { max-width: 1280px; padding-left: 0; } }

/* ---------- Giảm chuyển động ---------- */
@media (prefers-reduced-motion: reduce) {
	.gd [data-gd] *, .gd .gd-bao { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* --- _chung/css/10-dau-trang.css --- */
/* =========================================================
   Nhóm ĐẦU TRANG — thanh-tren, tim-kiem, nut-dau-trang, menu-chinh, menu-phu, menu-doc, ngan-keo + 3 khung đầu trang
   (ba-tang · nut-danh-muc · logo-giua; kinh-toi / am-cung là biến thể). Mọi luật dưới .gd; màu chỉ từ biến --gd-* và biến gốc.
   Mobile-first, mốc 768 / 1100 / 1280. Bảng thả xuống hiện khi rê / :focus-within (không cần JS).
   ========================================================= */

/* ---------- Khung chung ---------- */
.gd .gd-dau { position: relative; isolation: isolate; background: var(--gd-bg); color: var(--contrast); border-bottom: 1px solid var(--gd-line); }
.gd .gd-dau::before { content: none; } /* bỏ nền kính mờ của đầu trang gốc */
.gd .gd-dau > *, .gd .gd-dau__hang > * { margin-block: 0; }
.gd .gd-dau__hang { position: relative; padding-inline: max(var(--wp--style--root--padding-left, 16px), calc((100% - var(--gd-wide)) / 2)); }
.gd .gd-dau__hang--chinh { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 6px; min-height: 56px; padding-block: 6px; }
.gd .gd-dau__hang--chinh > .brand { order: 1; margin-right: auto; }
.gd .gd-dau__hang--menu { display: none; }
.gd .gd-dau__hang--phu { border-top: 1px solid var(--gd-line); }
.gd .gd-dau__hang--phu:not(:has([data-gd])) { display: none; }
.gd .gd-dau .gd-icon { flex-shrink: 0; }
.gd .gd-dau :is(a, button, summary):focus-visible,
.gd .gd-lop :is(a, button, summary):focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.gd .gd-menu-nhan {
	display: inline-block; margin-left: 4px; padding: 1px 5px; border-radius: var(--gd-r-s); background: var(--gd-sale); color: #FFFFFF;
	font-size: 10px; font-weight: 700; line-height: 1.4; text-transform: none; letter-spacing: 0; vertical-align: 2px;
}

/* ---------- Bảng thả xuống dùng chung (.gd-tha) ---------- */
.gd .gd-tha { position: relative; display: flex; align-items: center; }
.gd .gd-tha__link { color: inherit; text-decoration: none; }
.gd .gd-tha__nut {
	display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 2px; border: 0; background: none; color: inherit;
	font: inherit; cursor: pointer;
}
.gd .gd-tha__nut .gd-icon--xuong { transition: transform .15s ease; }
.gd .gd-tha.is-mo > .gd-tha__nut .gd-icon--xuong { transform: rotate(180deg); }
.gd .gd-tha__bang {
	display: none; position: absolute; top: 100%; left: 0; z-index: 30; min-width: 220px; padding: 8px; background: var(--gd-bg);
	color: var(--contrast); border: 1px solid var(--gd-line); border-radius: var(--gd-r-m); box-shadow: var(--gd-shadow); text-align: left;
	text-transform: none; letter-spacing: 0; font-size: 14px; font-weight: 400;
}
@media (hover: hover) { .gd .gd-tha:hover > .gd-tha__bang { display: block; } }
.gd .gd-tha:focus-within > .gd-tha__bang, .gd .gd-tha.is-mo > .gd-tha__bang { display: block; }
.gd .gd-tha.is-dong > .gd-tha__bang { display: none; } /* Esc: đóng dù chuột / tiêu điểm còn trong mục */
.gd .gd-tha__bang ul { list-style: none; margin: 0; padding: 0; }
.gd .gd-tha__bang .gd-don a, .gd .gd-thanh-tren .gd-tha__bang a {
	display: block; padding: 8px 10px; border-radius: var(--gd-r-s); color: var(--contrast); text-decoration: none; white-space: nowrap;
}
.gd .gd-tha__bang .gd-don a:hover, .gd .gd-thanh-tren .gd-tha__bang a:hover { background: var(--gd-bg-2); color: var(--primary); }

/* ---------- A1. Thanh trên ---------- */
.gd .gd-thanh-tren { background: var(--gd-topbar-bg); color: var(--gd-topbar-ink); font-size: 13px; line-height: 1.35; }
.gd .gd-thanh-tren[hidden], .gd .gd-thanh-tren--an-mobile[hidden] { display: none !important; }
.gd .gd-thanh-tren--an-mobile { display: none; }
.gd .gd-thanh-tren__trong {
	position: relative; display: flex; align-items: center; gap: 8px 20px; min-height: 34px;
	padding-inline: max(var(--wp--style--root--padding-left, 16px), calc((100% - var(--gd-wide)) / 2));
}
.gd .gd-thanh-tren :is(a, summary, button) { color: inherit; }
.gd .gd-thanh-tren__ds { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 18px; list-style: none; margin: 0; padding: 0; }
.gd .gd-thanh-tren__ds > li > a, .gd .gd-thanh-tren__ds .gd-tha__link { text-decoration: none; white-space: nowrap; }
.gd .gd-thanh-tren__ds > li > a:hover, .gd .gd-thanh-tren__ds .gd-tha__link:hover { text-decoration: underline; }
.gd .gd-thanh-tren__giua { flex: 1; min-width: 0; overflow: hidden; }
.gd .gd-thanh-tren__cau { list-style: none; margin: 0; padding: 0; }
.gd .gd-thanh-tren__cau li { display: none; align-items: center; justify-content: center; gap: 6px; white-space: nowrap; }
.gd .gd-thanh-tren__cau li.is-hien { display: flex; }
.gd .gd-thanh-tren__cau li > span { overflow: hidden; text-overflow: ellipsis; }
.gd .gd-thanh-tren__giua--cam-ket .gd-thanh-tren__cau li { justify-content: flex-start; }
.gd .gd-thanh-tren__phai { display: none; align-items: center; gap: 16px; margin-left: auto; white-space: nowrap; }
.gd .gd-thanh-tren__muc { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
.gd a.gd-thanh-tren__muc:hover span { text-decoration: underline; }
.gd .gd-thanh-tren__dong {
	display: none; place-items: center; width: 28px; height: 28px; flex-shrink: 0; border: 0; border-radius: 999px; background: none; cursor: pointer;
}
.gd .gd-thanh-tren.is-js .gd-thanh-tren__dong { display: inline-grid; }
/* Điện thoại: nhiều câu → 1 dòng chạy chữ (tắt khi giảm chuyển động) */
@media (max-width: 767px) {
	.gd .gd-thanh-tren__giua--nhieu .gd-thanh-tren__cau {
		display: inline-flex; gap: 48px; padding-right: 48px; white-space: nowrap; animation: gd-chay-chu 22s linear 2s infinite;
	}
	.gd .gd-thanh-tren__giua--nhieu .gd-thanh-tren__cau li { display: inline-flex; }
}
@keyframes gd-chay-chu { to { transform: translateX(-100%); } }
@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
	.gd .gd-thanh-tren__giua--nhieu .gd-thanh-tren__cau { display: block; padding-right: 0; }
	.gd .gd-thanh-tren__giua--nhieu .gd-thanh-tren__cau li:not(.is-hien) { display: none; }
}
@media (min-width: 768px) {
	.gd .gd-thanh-tren--an-mobile { display: block; }
	.gd .gd-thanh-tren__phai { display: flex; }
	.gd .gd-thanh-tren__giua--cam-ket .gd-thanh-tren__cau { display: flex; gap: 22px; }
	.gd .gd-thanh-tren__giua--cam-ket .gd-thanh-tren__cau li { display: flex; }
}
@media (min-width: 768px) and (max-width: 1099px) {
	.gd .gd-thanh-tren__giua--cam-ket .gd-thanh-tren__cau li:not(:first-child) { display: none; }
}

/* Hệ thống cửa hàng ▾ (thanh trên) + dòng cửa hàng dùng chung (chân trang) */
.gd .gd-cua-hang-tha { position: relative; }
.gd .gd-cua-hang-tha > summary { display: inline-flex; align-items: center; gap: 6px; list-style: none; cursor: pointer; }
.gd .gd-cua-hang-tha > summary::-webkit-details-marker { display: none; }
.gd .gd-cua-hang-tha[open] > summary .gd-icon--xuong { transform: rotate(180deg); }
.gd .gd-cua-hang-tha__bang {
	position: absolute; right: 0; top: calc(100% + 8px); z-index: 30; width: min(360px, calc(100vw - 32px)); max-height: 70vh; overflow-y: auto;
	padding: 10px 14px; background: var(--gd-bg); color: var(--contrast); border: 1px solid var(--gd-line); border-radius: var(--gd-r-m);
	box-shadow: var(--gd-shadow); white-space: normal;
}
.gd .gd-cua-hang-tha__bang ul { list-style: none; margin: 0; padding: 0; }
.gd .gd-cua-hang-tha__tinh { margin: 8px 0 2px; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.gd .gd-cua-hang-tha__tat-ca { display: block; margin-top: 8px; font-weight: 700; color: var(--primary); }
.gd .gd-cua-hang-dong { display: grid; gap: 2px; padding: 8px 0; border-bottom: 1px solid var(--gd-line); font-size: 13px; }
.gd .gd-cua-hang-dong:last-child { border-bottom: 0; }
.gd .gd-cua-hang-dong__ten { font-size: 14px; }
.gd .gd-cua-hang-dong__dia-chi, .gd .gd-cua-hang-dong__gio { color: var(--muted); }
.gd .gd-cua-hang-dong a { color: inherit; }
.gd .gd-cua-hang-dong__sdt { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; text-decoration: none; }
.gd .gd-cua-hang-dong__ban-do { font-weight: 600; text-decoration: underline; }

/* ---------- A2. Ô tìm kiếm ---------- */
.gd .gd-tim-kiem { min-width: 0; }
.gd .gd-tim-kiem__form {
	display: flex; align-items: center; height: 42px; border: 1px solid var(--gd-line); border-radius: 999px; background: var(--gd-bg);
	color: var(--contrast); overflow: hidden;
}
.gd .gd-tim-kiem__form:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 22%, transparent); }
.gd .gd-tim-kiem__o {
	flex: 1; min-width: 0; height: 100%; margin: 0; padding: 0 6px 0 16px; border: 0; background: transparent; color: inherit; font: inherit;
	font-size: 15px; outline: none; -webkit-appearance: none; appearance: none;
}
.gd .gd-tim-kiem__o::placeholder { color: var(--muted); opacity: 1; }
.gd .gd-tim-kiem__nut {
	display: grid; place-items: center; align-self: stretch; width: 52px; margin: 0; border: 0; background: var(--gd-btn-bg); color: var(--gd-btn-ink);
	cursor: pointer;
}
.gd .gd-tim-kiem--hang-rieng { order: 10; flex: 1 0 100%; }
.gd .gd-tim-kiem:not(.gd-tim-kiem--hang-rieng) > .gd-tim-kiem__form { display: none; } /* điện thoại: mở bằng nút kính lúp */
.gd .gd-tim-kiem--bieu-tuong { display: contents; }
.gd .gd-tim-kiem__chip { display: none; list-style: none; margin: 0; padding: 0; }
.gd .gd-tim-kiem__chip a { color: inherit; opacity: .78; text-decoration: none; white-space: nowrap; } /* theo màu hàng (trắng / màu chính) */
.gd .gd-tim-kiem__chip a:hover { opacity: 1; text-decoration: underline; }
.gd .gd-tim-kiem__chip--tam { display: flex; flex-wrap: wrap; gap: 8px; }
.gd .gd-tim-kiem__chip--tam a { display: inline-block; padding: 6px 12px; border: 1px solid var(--gd-line); border-radius: 999px; font-size: 14px; color: var(--contrast); }
.gd .gd-tim-kiem__form--lon { height: 48px; }

/* ---------- A3. Cụm nút đầu trang ---------- */
.gd .gd-nut-dau-trang { order: 2; display: flex; align-items: center; gap: 0; }
.gd .gd-nut-dau__muc {
	display: inline-flex; align-items: center; gap: 8px; min-width: 44px; min-height: 44px; padding: 0 6px; justify-content: center;
	color: inherit; text-decoration: none;
}
.gd .gd-nut-dau__muc--may-tinh, .gd .gd-nut-dau__chu { display: none; }
.gd .gd-nut-dau__icon { position: relative; display: grid; place-items: center; }
.gd .gd-nut-dau__icon .gd-gio-dem { position: absolute; top: -6px; right: -9px; }
.gd .gd-nut-dau__chu small { display: block; font-size: 11px; line-height: 1.2; opacity: .78; white-space: nowrap; }
.gd .gd-nut-dau__chu b { display: block; font-size: 13px; line-height: 1.25; font-weight: 700; white-space: nowrap; }
.gd .gd-nut-dau__tong { display: block; font-size: 12px; font-weight: 700; line-height: 1.2; }
.gd .gd-nut-dau__tong:empty { display: none; }
.gd .gd-nut-dau__lab { height: 40px; min-height: 0; padding-block: 0; white-space: nowrap; }

/* ---------- A7. Ngăn kéo menu điện thoại (nút ☰) ---------- */
.gd .gd-ngan-keo { order: 3; }
.gd .gd-ngan-keo__mo { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--gd-r-m); color: inherit; }

/* Lớp phủ toàn màn hình (ngăn kéo, tấm tìm kiếm): tắt JS mở bằng :target, có JS mở bằng lớp is-mo (đã chuyển ra cuối body) */
.gd .gd-lop { display: none; position: fixed; inset: 0; z-index: 100; }
.gd .gd-lop:not(.is-js):target, .gd .gd-lop.is-mo { display: block; }
.gd .gd-lop__nen { position: absolute; inset: 0; background: rgba(15, 23, 42, .55); }
.gd .gd-lop__khung {
	position: absolute; top: 0; bottom: 0; left: 0; box-sizing: border-box; width: min(88vw, 380px); overflow-y: auto; overscroll-behavior: contain;
	padding: 14px 16px calc(28px + env(safe-area-inset-bottom)); background: var(--gd-bg); color: var(--contrast); box-shadow: var(--gd-shadow);
	animation: gd-truot-vao .22s ease-out;
}
@keyframes gd-truot-vao { from { transform: translateX(-100%); } }
.gd .gd-lop__dong { position: absolute; top: 6px; right: 6px; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 999px; color: var(--contrast); }
.gd .gd-lop__tieu-de { margin: 6px 48px 14px 0; font-size: 18px; font-weight: 800; }
.gd .gd-lop__nho { margin: 18px 0 8px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.gd .gd-tim-kiem__tam .gd-lop__khung {
	bottom: auto; right: 0; width: auto; max-height: 100%; animation-name: gd-truot-xuong;
	padding: 14px max(16px, calc((100% - 760px) / 2)) 24px;
}
.gd .gd-tim-kiem__tam .gd-tim-kiem__form { display: flex; }
@keyframes gd-truot-xuong { from { transform: translateY(-100%); } }
@media (prefers-reduced-motion: reduce) { .gd .gd-lop__khung { animation: none; } }

.gd .gd-nk { display: grid; gap: 14px; }
.gd .gd-nk a { color: var(--contrast); text-decoration: none; }
.gd .gd-nk__tim { display: flex; }
.gd .gd-nk__nhom { border-bottom: 1px solid var(--gd-line); }
.gd .gd-nk__nhom > summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 48px; font-weight: 700; list-style: none; cursor: pointer; }
.gd .gd-nk__nhom > summary::-webkit-details-marker { display: none; }
.gd .gd-nk__nhom[open] > summary .gd-icon--xuong { transform: rotate(180deg); }
.gd .gd-nk__con { display: grid; list-style: none; margin: 0 0 10px; padding: 0 0 0 12px; }
.gd .gd-nk__con a { display: block; padding: 9px 0; }
.gd .gd-nk__tat-ca a { font-weight: 700; color: var(--primary); }
.gd .gd-nk__ten { margin: 0 0 6px; font-weight: 800; }
.gd .gd-nk__nho { margin: 10px 0 6px; font-size: 12px; font-weight: 700; color: var(--muted); }
.gd .gd-nk__chip { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }
.gd .gd-nk__chip a { display: inline-block; padding: 4px 10px; border: 1px solid var(--gd-line); border-radius: 999px; font-size: 13px; }
/* hai-cot: cột trái nhóm, phải lưới danh mục con + chip hãng */
.gd .gd-nk__hai-cot { display: grid; grid-template-columns: 92px minmax(0, 1fr); margin-inline: -16px; border-block: 1px solid var(--gd-line); }
.gd .gd-nk__trai { list-style: none; margin: 0; padding: 0; background: var(--gd-bg-2); }
.gd .gd-nk__tab {
	display: grid; justify-items: center; gap: 4px; padding: 10px 4px; border-left: 3px solid transparent; font-size: 12px; line-height: 1.3;
	text-align: center; overflow-wrap: anywhere;
}
.gd .gd-nk__tab img { width: 32px; height: 32px; }
.gd .gd-nk__tab.is-chon { background: var(--gd-bg); border-left-color: var(--primary); color: var(--primary); font-weight: 700; }
.gd .gd-nk__phai { min-width: 0; padding: 10px 16px 12px 12px; }
.gd .gd-nk__bang + .gd-nk__bang { margin-top: 20px; }
.gd .gd-nk__hai-cot.is-js .gd-nk__bang:not(.is-chon) { display: none; }
.gd .gd-nk__hai-cot.is-js .gd-nk__bang + .gd-nk__bang { margin-top: 0; }
.gd .gd-nk__hai-cot .gd-nk__con { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; padding: 0; }
.gd .gd-nk__hai-cot .gd-nk__con a { height: 100%; padding: 10px 6px; border-radius: var(--gd-r-m); background: var(--gd-bg-2); font-size: 13px; text-align: center; }
.gd .gd-nk__hai-cot .gd-nk__tat-ca { grid-column: 1 / -1; }
.gd .gd-nk__hai-cot .gd-nk__tat-ca a { background: none; }
/* truot-cap: trượt từng cấp có "Quay lại" (tắt JS: các cấp xếp dưới danh sách) */
.gd .gd-nk__truot { position: relative; }
.gd .gd-nk__goc { list-style: none; margin: 0; padding: 0; }
.gd .gd-nk__vao { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 48px; border-bottom: 1px solid var(--gd-line); font-weight: 700; }
.gd .gd-nk__cap { margin-top: 16px; }
.gd .gd-nk__lui { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; font-weight: 700; }
.gd .gd-nk__lui, .gd .gd-nk a.gd-nk__lui { color: var(--primary); }
.gd .gd-nk__truot.is-js { overflow: hidden; margin-inline: -16px; padding-inline: 16px; }
.gd .gd-nk__truot.is-js .gd-nk__cap {
	position: absolute; inset: 0; margin: 0; padding-inline: 16px; background: var(--gd-bg); transform: translateX(100%); visibility: hidden;
	transition: transform .22s ease, visibility 0s linear .22s;
}
.gd .gd-nk__truot.is-js .gd-nk__cap.is-mo { transform: none; visibility: visible; transition: transform .22s ease; }
.gd .gd-nk__them, .gd .gd-nk__lien-he { display: grid; list-style: none; margin: 0; padding: 0; }
.gd .gd-nk__them a, .gd .gd-nk__lien-he a { display: flex; align-items: center; gap: 10px; min-height: 44px; border-bottom: 1px solid var(--gd-line); }

/* ---------- A5. Hàng link nhanh ---------- */
.gd .gd-menu-phu__ds {
	display: flex; gap: 8px; list-style: none; margin: 0; padding: 8px 0; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
}
.gd .gd-menu-phu__ds::-webkit-scrollbar { display: none; }
.gd .gd-menu-phu__ds a {
	display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--gd-line); border-radius: 999px;
	background: var(--gd-bg); color: var(--contrast); font-size: 13px; text-decoration: none; white-space: nowrap;
}
.gd .gd-menu-phu__muc--do a { color: var(--gd-sale); border-color: currentColor; font-weight: 700; }
@media (max-width: 1099px) {
	.gd .gd-menu-phu--an-mobile, .gd .gd-dau__hang--phu:has(.gd-menu-phu--an-mobile) { display: none; }
}

/* ---------- A4 + A6. Menu sản phẩm, danh mục dọc, bảng bung ---------- */
.gd .gd-menu-chinh { display: none; }
.gd .gd-bang { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; }
.gd .gd-bang__cac-cot { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 16px 28px; align-content: start; }
.gd .gd-bang__cot--con { grid-column: span 2; }
.gd .gd-bang__cot--con ul { columns: 2 170px; column-gap: 28px; }
.gd .gd-bang__tieu-de { margin: 0 0 6px; font-size: 13px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; color: var(--contrast); }
.gd .gd-bang ul { list-style: none; margin: 0; padding: 0; }
.gd .gd-bang li { break-inside: avoid; }
.gd .gd-bang li a { display: block; padding: 5px 0; color: var(--contrast); font-size: 14px; text-decoration: none; }
.gd .gd-bang li a:hover { color: var(--primary); }
.gd .gd-bang .gd-bang__tat-ca { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; font-size: 14px; font-weight: 700; color: var(--primary); text-decoration: none; }
.gd .gd-bang__banner {
	display: grid; align-content: start; gap: 6px; width: 230px; padding: 16px; border-radius: var(--gd-r-l); background: var(--gd-bg-2);
	color: var(--contrast); font-size: 13px; text-decoration: none;
}
.gd .gd-bang__banner img { width: 100%; height: 130px; object-fit: contain; }
.gd .gd-bang__banner strong { font-size: 15px; }
.gd .gd-bang__banner span:not(.gd-nut) { color: var(--muted); }
.gd .gd-bang__banner .gd-nut { justify-self: start; min-height: 34px; margin-top: 4px; }
.gd .gd-don { min-width: 200px; }

.gd .gd-doc { position: relative; list-style: none; margin: 0; padding: 6px 0; background: var(--gd-bg); color: var(--contrast); }
.gd .gd-doc__link { display: flex; align-items: center; gap: 10px; padding: 9px 14px; color: var(--contrast); font-size: 14px; font-weight: 500; text-decoration: none; }
.gd .gd-doc__link > .gd-icon--phai { margin-left: auto; opacity: .5; }
.gd .gd-doc__anh { width: 28px; height: 28px; flex-shrink: 0; }
.gd .gd-doc__muc--do .gd-doc__link { color: var(--gd-sale); font-weight: 700; }
.gd .gd-doc__bang {
	display: none; position: absolute; top: 0; left: 100%; z-index: 31; min-height: 100%; overflow-y: auto; padding: 18px 22px;
	width: min(820px, calc(100vw - 100% - 2 * max(16px, (100vw - var(--gd-wide)) / 2) - 24px));
	background: var(--gd-bg); border: 1px solid var(--gd-line); border-radius: var(--gd-r-m); box-shadow: var(--gd-shadow);
}
@media (hover: hover) {
	.gd .gd-doc__muc:hover > .gd-doc__link { background: var(--gd-bg-2); color: var(--primary); }
	.gd .gd-doc__muc:hover > .gd-doc__bang { display: block; }
}
.gd .gd-doc__muc:focus-within > .gd-doc__bang { display: block; }
.gd .gd-bang--doc .gd-bang__banner { width: 200px; }
.gd .gd-menu-doc { display: none; }
.gd .gd-menu-doc__nut { list-style: none; margin: 0; padding: 0; }

@media (min-width: 1100px) {
	/* Hàng chính */
	.gd .gd-dau__hang--chinh { flex-wrap: nowrap; gap: 16px; min-height: 76px; padding-block: 10px; }
	.gd .gd-dau__hang--chinh > .brand { margin-right: 8px; }
	.gd .gd-dau .gd-ngan-keo { display: none; }
	.gd .gd-tim-kiem { order: 2; flex: 1 1 260px; max-width: 640px; }
	.gd .gd-tim-kiem--hang-rieng { order: 2; flex: 1 1 260px; }
	.gd .gd-tim-kiem:not(.gd-tim-kiem--hang-rieng) > .gd-tim-kiem__form { display: flex; }
	.gd .gd-tim-kiem--gon { max-width: 320px; }
	.gd .gd-tim-kiem--gon .gd-tim-kiem__form { height: 38px; }
	.gd .gd-tim-kiem--o-lon .gd-tim-kiem__form { height: 44px; }
	.gd .gd-tim-kiem--o-lon .gd-tim-kiem__chip { display: flex; flex-wrap: wrap; gap: 0 14px; height: 18px; margin: 5px 0 0 18px; overflow: hidden; font-size: 12px; }
	.gd .gd-nut-dau-trang { order: 3; gap: 4px; margin-left: auto; }
	.gd .gd-nut-dau__muc { justify-content: flex-start; }
	.gd .gd-nut-dau__muc--may-tinh { display: inline-flex; }
	.gd .gd-nut-dau__muc--mobile { display: none; }
	.gd .gd-nut-dau__chu { display: block; }
	.gd .gd-nut-dau__muc--tim-kiem .gd-nut-dau__chu { display: none; }
	.gd .gd-dau.is-thu-gon .gd-dau__hang--chinh { min-height: 60px; padding-block: 6px; }
	.gd .gd-dau.is-thu-gon .gd-tim-kiem__chip { display: none; }

	/* Hàng menu (ba-tang, logo trái) */
	.gd .gd-dau__hang--menu { display: block; background: var(--gd-menu-bg); color: var(--gd-menu-ink); }
	.gd .gd-menu-chinh, .gd .gd-menu-doc { display: block; }
	.gd .gd-menu-chinh__ds { display: flex; flex-wrap: wrap; align-items: stretch; list-style: none; margin: 0; padding: 0; }
	.gd .gd-menu-chinh__muc { display: flex; align-items: center; }
	.gd .gd-menu-chinh__muc > .gd-tha__link, .gd .gd-menu-chinh__muc--khac > .gd-tha__nut {
		display: flex; align-items: center; min-height: 46px; padding: 0 12px; font-size: 14px; font-weight: 700;
	}
	.gd .gd-menu-chinh__muc > .gd-tha__nut:not(.gd-tha__nut--chu) { margin-left: -10px; padding: 0 8px 0 2px; opacity: .8; }
	.gd .gd-menu-chinh__muc:hover > .gd-tha__link, .gd .gd-menu-chinh__muc.is-mo > .gd-tha__link { background: color-mix(in srgb, currentColor 10%, transparent); }
	.gd .gd-menu-chinh--in-hoa .gd-menu-chinh__muc > .gd-tha__link,
	.gd .gd-menu-chinh--in-hoa .gd-menu-chinh__muc--khac > .gd-tha__nut { text-transform: uppercase; letter-spacing: .02em; font-size: 13px; }
	.gd .gd-menu-chinh__muc--do > .gd-tha__link { margin-block: 7px; min-height: 32px; border-radius: var(--gd-r-s); background: var(--gd-sale); color: #FFFFFF; }
	.gd .gd-menu-chinh__muc--do:hover > .gd-tha__link { background: var(--gd-sale); filter: brightness(1.08); }
	.gd .gd-menu-chinh__muc--rong { position: static; }
	.gd .gd-menu-chinh__muc--rong > .gd-tha__bang {
		left: 0; right: 0; border-radius: 0 0 var(--gd-r-m) var(--gd-r-m); padding: 22px max(16px, calc((100% - var(--gd-wide)) / 2));
	}

	/* Nút "Danh mục sản phẩm" + danh sách dọc bung theo chiều rộng nội dung */
	.gd .gd-menu-chinh--nut-danh-muc, .gd .gd-menu-chinh__danh-muc { order: 1; position: static; }
	.gd .gd-menu-chinh__danh-muc > .gd-tha__nut--chu, .gd .gd-menu-doc__nut .gd-tha__nut--chu {
		gap: 8px; min-height: 42px; padding: 0 14px; border-radius: var(--gd-r-m); background: color-mix(in srgb, currentColor 12%, transparent);
		font-weight: 700; white-space: nowrap;
	}
	.gd .gd-menu-chinh__danh-muc > .gd-tha__bang {
		left: max(var(--wp--style--root--padding-left, 16px), calc((100% - var(--gd-wide)) / 2)); right: max(var(--wp--style--root--padding-left, 16px), calc((100% - var(--gd-wide)) / 2));
		padding: 0; background: transparent; border: 0; box-shadow: none; pointer-events: none;
	}
	.gd .gd-menu-chinh__danh-muc > .gd-tha__bang > .gd-doc {
		position: static; width: 270px; pointer-events: auto; border: 1px solid var(--gd-line); border-radius: var(--gd-r-m); box-shadow: var(--gd-shadow);
	}
	.gd .gd-menu-chinh__danh-muc .gd-doc__bang { left: 270px; right: 0; width: auto; pointer-events: auto; }
	.gd .gd-menu-doc--mo-san .gd-doc { width: 250px; max-width: 100%; box-sizing: border-box; border: 1px solid var(--gd-line); border-radius: var(--gd-r-m); }
	.gd .gd-menu-doc__nut .gd-tha__bang { padding: 0; }

	/* Hàng link nhanh */
	.gd .gd-dau__hang--phu { background: var(--gd-bg); }
	.gd .gd-menu-phu__ds { flex-wrap: wrap; gap: 4px 24px; min-height: 40px; align-items: center; padding: 0; overflow: visible; }
	.gd .gd-menu-phu__ds a { padding: 0; border: 0; border-radius: 0; background: none; font-size: 14px; font-weight: 600; }
	.gd .gd-menu-phu__ds a:hover { color: var(--primary); }
}
@media (min-width: 1100px) and (max-width: 1279px) {
	.gd .gd-nut-dau__muc:not(.gd-nut-dau__muc--gio) .gd-nut-dau__chu { display: none; }
	.gd .gd-menu-chinh__muc > .gd-tha__link { padding: 0 9px; }
	.gd .gd-bang__banner { display: none; }
}

/* ---------- Khung ba-tang: kiểu "am-cung" = nền kem, chữ tiêu đề có chân (theo token) ---------- */
.gd .gd-dau--am-cung .gd-dau__hang--chinh { background: var(--gd-bg-2); }
@media (min-width: 1100px) { .gd .gd-dau--am-cung .gd-dau__hang--menu { border-top: 1px solid var(--gd-line); } }

/* ---------- Khung nut-danh-muc: hàng chính mang màu hàng menu (nen: primary | trang) ---------- */
.gd .gd-dau--khung-nut-danh-muc .gd-dau__hang--chinh { background: var(--gd-menu-bg); color: var(--gd-menu-ink); }
.gd .gd-dau--khung-nut-danh-muc .gd-dau__hang--chinh > .brand,
.gd .gd-dau--khung-nut-danh-muc .gd-dau__hang--chinh > .brand small { color: inherit; }
.gd .gd-dau--khung-nut-danh-muc .gd-tim-kiem__form { border-color: transparent; }
.gd .gd-dau--nen-trang .gd-dau__hang--chinh { background: var(--gd-bg); color: var(--contrast); }
.gd .gd-dau--nen-trang .gd-tim-kiem__form { border-color: var(--gd-line); background: var(--gd-bg-2); }

/* kinh-toi (XR): nền tối trong mờ — hiệu ứng mờ đặt ở ::before để lớp phủ fixed bên trong không bị giới hạn */
.gd .gd-dau--kinh-toi { background: transparent; }
.gd .gd-dau--kinh-toi::before {
	content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
	background: color-mix(in srgb, var(--gd-menu-bg) 86%, transparent); -webkit-backdrop-filter: saturate(160%) blur(14px); backdrop-filter: saturate(160%) blur(14px);
}
.gd .gd-dau--kinh-toi .gd-dau__hang--chinh, .gd .gd-dau--kinh-toi .gd-dau__hang--phu { background: transparent; color: var(--gd-menu-ink); }
.gd .gd-dau--kinh-toi .gd-dau__hang--phu { border-top-color: color-mix(in srgb, var(--gd-menu-ink) 14%, transparent); }
.gd .gd-dau--kinh-toi .gd-menu-phu__ds a { background: transparent; color: inherit; border-color: color-mix(in srgb, var(--gd-menu-ink) 22%, transparent); }
.gd .gd-dau--kinh-toi .gd-menu-phu__muc--do a { color: var(--gd-sale); }

/* ---------- Khung logo-giua ---------- */
.gd .gd-dau--logo-giua .gd-dau__hang--chinh > .brand { margin: 0; }
.gd .gd-dau--logo-giua .gd-ngan-keo { order: 0; flex: 1 1 0; }
.gd .gd-dau--logo-giua .gd-nut-dau-trang { flex: 1 1 0; justify-content: flex-end; }
@media (min-width: 1100px) {
	.gd .gd-dau--logo-giua .gd-dau__hang--chinh > .gd-menu-chinh { order: 0; flex: 1 1 0; min-width: 0; }
	.gd .gd-dau--logo-giua .gd-dau__hang--chinh > .gd-menu-chinh .gd-menu-chinh__ds { flex-wrap: nowrap; }
	.gd .gd-dau--logo-giua .gd-dau__hang--chinh > .gd-menu-chinh .gd-tha__link { min-height: 44px; padding: 0 8px; font-size: 13px; white-space: nowrap; }
	/* logo giữa: menu bên trái chật → bỏ nút mũi tên (rê chuột / Tab vẫn mở bảng), viên "Sale" không lề trên dưới */
	.gd .gd-dau--logo-giua .gd-dau__hang--chinh > .gd-menu-chinh .gd-menu-chinh__muc > .gd-tha__nut:not(.gd-tha__nut--chu) { display: none; }
	.gd .gd-dau--logo-giua .gd-dau__hang--chinh > .gd-menu-chinh .gd-menu-chinh__muc--do > .gd-tha__link { align-self: center; min-height: 30px; margin: 0 0 0 6px; }
	.gd .gd-dau--logo-giua .gd-dau__hang--chinh > .gd-menu-chinh .gd-tha__link:hover { background: none; text-decoration: underline; text-underline-offset: 6px; }
	.gd .gd-dau--logo-trai .gd-dau__hang--chinh > .brand { margin-right: 16px; }
	.gd .gd-dau--logo-trai .gd-nut-dau-trang { flex: 0 0 auto; }
	.gd .gd-dau--logo-trai .gd-dau__hang--menu { border-top: 1px solid var(--gd-line); }
	.gd .gd-dau--logo-trai .gd-menu-chinh__ds { justify-content: center; }
	.gd .gd-dau--logo-trai .gd-menu-chinh__muc > .gd-tha__link { font-weight: 600; letter-spacing: .06em; }
	/* logo giữa + menu ở hàng riêng (0.3.0b2, thời trang báo): ≥ 1100px ngăn kéo bên trái ẩn → hàng chính chỉ còn logo + nút → logo
	   lệch trái. Phần tử giả cân bên trái khi hàng chính không có menu / ô tìm kiếm; hàng menu riêng căn giữa. */
	.gd .gd-dau--logo-giua .gd-dau__hang--chinh:not(:has(.gd-menu-chinh, .gd-tim-kiem))::before { content: ""; order: 0; flex: 1 1 0; }
	.gd .gd-dau--logo-giua .gd-dau__hang--menu .gd-menu-chinh__ds { justify-content: center; }
}
@media (min-width: 1100px) and (max-width: 1439px) {
	/* logo giữa trên màn 1100–1439: bỏ link thêm (Hàng mới, Bộ sưu tập…) khỏi hàng menu, chữ nhỏ hơn — vẫn có trong ngăn kéo / chân trang */
	.gd .gd-dau--logo-giua .gd-dau__hang--chinh > .gd-menu-chinh .gd-menu-chinh__muc--them:not(.gd-menu-chinh__muc--do) { display: none; }
	.gd .gd-dau--logo-giua .gd-dau__hang--chinh > .gd-menu-chinh .gd-tha__link { padding: 0 6px; font-size: 12px; }
}

/* --- _chung/css/15-chan-trang.css --- */
/* =========================================================
   Nhóm CHÂN TRANG — chan-trang-cot, phap-ly, hotline-nhieu, mang-xa-hoi, thanh-toan, thanh-day, ve-dau-trang + 3 khung chân trang
   (nam-cot · nhan-tin · showroom; sieu-thi / cong-nghe là tham số) + nút liên hệ nổi theo ngành (.float-contact của gốc).
   Mọi luật dưới .gd; màu chân trang từ --gd-footer-bg / --gd-footer-ink (đặt lại --contrast/--muted/--border trong chân trang
   để khối bên trong đọc rõ cả khi chân trang nền sáng). Mobile-first, mốc 768 / 1100.
   ========================================================= */

/* ---------- Khung chung ---------- */
.gd .gd-chan {
	--contrast: var(--gd-footer-ink); --muted: color-mix(in srgb, var(--gd-footer-ink) 74%, transparent);
	--border: color-mix(in srgb, var(--gd-footer-ink) 18%, transparent); --primary: var(--gd-footer-ink);
	background: var(--gd-footer-bg); color: var(--gd-footer-ink); border-top: 0; padding-block: 28px 18px;
	padding-inline: max(var(--wp--style--root--padding-left, 16px), calc((100% - var(--gd-wide)) / 2)); font-size: 14px;
}
.gd .gd-chan > *, .gd .gd-chan__tren > *, .gd .gd-chan__cot > *, .gd .gd-chan__hang > *, .gd .gd-chan__day > * { margin-block: 0; }
.gd .gd-chan :is(h2, h3, h4, strong, summary) { color: inherit; }
.gd .gd-chan a { color: inherit; }
.gd .gd-chan :is(a, summary):focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.gd .gd-chan-nho { margin: 0 0 8px; font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; opacity: .78; }
.gd .gd-chan__tren { padding: 22px max(var(--wp--style--root--padding-left, 16px), calc((100% - var(--gd-wide)) / 2)); background: var(--gd-bg-2); }
.gd .gd-chan__tren > * + * { margin-top: 16px; }
.gd .gd-chan__tu-khoa { padding-block: 16px; border-top: 1px solid var(--border); }

/* ---------- E1. Cột ---------- */
.gd .gd-chan__cot { display: flex; flex-direction: column; }
.gd .gd-chan__cot > * { min-width: 0; }
.gd .gd-chan-trang-cot--thuong-hieu { padding-bottom: 18px; }
.gd .gd-chan-trang-cot__logo img { display: block; width: 190px; max-width: 100%; height: auto; }
.gd .gd-chan-trang-cot__gioi-thieu { margin: 12px 0 0; max-width: 34rem; color: var(--muted); line-height: 1.55; }
.gd .gd-chan-trang-cot__phap-ly { margin: 12px 0 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.gd .gd-chan-trang-cot__khung { border-bottom: 1px solid var(--border); }
.gd .gd-chan-trang-cot__khung > summary {
	display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 48px; list-style: none; cursor: pointer;
}
.gd .gd-chan-trang-cot__khung > summary::-webkit-details-marker { display: none; }
.gd .gd-chan-trang-cot__khung > summary::after { content: "+"; font-size: 20px; line-height: 1; opacity: .7; }
.gd .gd-chan-trang-cot__khung[open] > summary::after { content: "–"; }
.gd .gd-chan-trang-cot__tieu-de { margin: 0; font-size: 14px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; }
.gd .gd-chan-trang-cot__than { padding-bottom: 12px; }
.gd .gd-chan-trang-cot__ds, .gd .gd-chan-trang-cot__cua-hang, .gd .gd-chan-trang-cot__lien-he { list-style: none; margin: 0; padding: 0; }
.gd .gd-chan-trang-cot__ds a { display: block; padding: 6px 0; color: var(--muted); text-decoration: none; }
.gd .gd-chan-trang-cot__ds a:hover { color: var(--contrast); text-decoration: underline; }
.gd .gd-chan-trang-cot__lien-he { display: grid; gap: 8px; margin-top: 10px; color: var(--muted); }
.gd .gd-chan-trang-cot__lien-he li { display: flex; align-items: flex-start; gap: 8px; }
.gd .gd-chan-trang-cot__lien-he .gd-icon { margin-top: 2px; }
.gd .gd-chan-trang-cot__them { display: inline-block; margin-top: 6px; font-weight: 700; }
.gd .gd-chan .gd-cua-hang-dong { border-bottom-color: var(--border); }

/* ---------- E3. Hotline ---------- */
.gd .gd-hotline { display: grid; gap: 8px; list-style: none; margin: 0; padding: 0; }
.gd .gd-hotline li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.gd .gd-hotline__viec { font-size: 13px; color: var(--muted); }
.gd .gd-hotline__so { display: inline-flex; align-items: center; gap: 6px; font-size: 16px; font-weight: 800; text-decoration: none; white-space: nowrap; }
.gd .gd-hotline__gio { font-size: 12px; color: var(--muted); }
.gd .gd-hotline--lon { margin-top: 14px; }
.gd .gd-hotline--lon .gd-hotline__so { font-size: 20px; }

/* ---------- E4. Mạng xã hội (cả trong ngăn kéo menu) ---------- */
.gd .gd-mxh { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.gd .gd-mxh__link { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; color: inherit; text-decoration: none; }
.gd .gd-mxh--icon .gd-mxh__link {
	justify-content: center; width: 40px; border: 1px solid color-mix(in srgb, currentColor 30%, transparent); border-radius: 999px;
}
.gd .gd-mxh--icon .gd-mxh__link:hover { background: color-mix(in srgb, currentColor 12%, transparent); }
.gd .gd-mxh--chu { display: grid; gap: 2px; }
.gd .gd-mxh--chu .gd-mxh__link { min-height: 34px; color: var(--muted); }
.gd .gd-mxh--chu .gd-mxh__link:hover { color: var(--contrast); }
.gd .gd-chan-trang-cot--thuong-hieu .gd-mxh { margin-top: 14px; }

/* ---------- E5. Thanh toán & giao hàng ---------- */
.gd .gd-thanh-toan__ds { display: flex; flex-wrap: wrap; gap: 8px 16px; list-style: none; margin: 0; padding: 0; }
.gd .gd-thanh-toan__ds li { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.gd .gd-thanh-toan--the .gd-thanh-toan__ds { gap: 8px; }
.gd .gd-thanh-toan--the .gd-thanh-toan__ds li { padding: 6px 10px; border: 1px solid var(--border); border-radius: var(--gd-r-m); color: var(--contrast); }

/* ---------- Hàng (hotline + mạng xã hội / thanh toán) và E2. Pháp lý ---------- */
.gd .gd-chan__hang { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 16px 32px; padding-block: 18px; border-top: 1px solid var(--border); }
.gd .gd-chan__day { padding-top: 16px; border-top: 1px solid var(--border); }
.gd .gd-phap-ly { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; font-size: 13px; color: var(--muted); }
.gd .gd-phap-ly p { margin: 0 0 2px; }
.gd .gd-phap-ly__ten { font-weight: 700; color: var(--contrast); }
.gd .gd-phap-ly__huy-hieu { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; list-style: none; margin: 0; padding: 0; }
.gd .gd-phap-ly__huy-hieu img { display: block; width: auto; height: 44px; }

@media (min-width: 768px) {
	.gd .gd-chan { padding-block: 40px 22px; }
	.gd .gd-chan__cot { flex-direction: row; flex-wrap: wrap; gap: 28px 40px; padding-bottom: 12px; }
	.gd .gd-chan__cot > * { flex: 1 1 170px; }
	.gd .gd-chan__cot > .gd-chan-trang-cot--thuong-hieu { flex: 1.7 1 280px; padding-bottom: 0; }
	.gd .gd-chan-trang-cot__khung { border: 0; }
	.gd .gd-chan-trang-cot__khung > summary { min-height: 0; margin-bottom: 10px; pointer-events: none; }
	.gd .gd-chan-trang-cot__khung > summary::after { display: none; }
	.gd .gd-hotline-nhieu--hang .gd-hotline { display: flex; flex-wrap: wrap; gap: 12px 36px; }
}

/* khung showroom: cột cửa hàng rộng hơn; khung nam-cot kiểu siêu thị: hàng hotline lớn nằm trên các cột */
@media (min-width: 768px) {
	.gd .gd-chan--khung-showroom .gd-chan__cot > .gd-chan-trang-cot--cua-hang { flex: 1.5 1 240px; }
	.gd .gd-chan--sieu-thi .gd-chan__hang--lien-he { margin-bottom: 18px; padding-top: 0; border-top: 0; border-bottom: 1px solid var(--border); }
	.gd .gd-chan--sieu-thi .gd-hotline__so { font-size: 20px; }
}

/* ---------- E6. Thanh đáy điện thoại ---------- */
.gd .gd-thanh-day {
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
	height: calc(var(--bottom-h, 64px) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
	background: var(--gd-bg); border-top: 1px solid var(--gd-line); box-shadow: 0 -4px 16px rgba(15, 23, 42, .08);
}
.gd .gd-thanh-day__muc {
	display: grid; justify-items: center; align-content: center; gap: 3px; min-width: 0; color: var(--muted); font-size: 11px; font-weight: 600;
	line-height: 1.2; text-decoration: none;
}
.gd .gd-thanh-day__chu { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gd .gd-thanh-day__muc[aria-current="page"] { color: var(--primary); }
.gd .gd-thanh-day__icon { position: relative; display: grid; place-items: center; }
.gd .gd-thanh-day__icon .gd-gio-dem { position: absolute; top: -6px; right: -10px; }
.gd .gd-thanh-day--noi-bo-tron {
	left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); height: 60px; padding-bottom: 0;
	border: 1px solid var(--gd-line); border-radius: 18px; box-shadow: var(--gd-shadow);
}
.gd .gd-thanh-day--noi-bo-tron .gd-thanh-day__muc:nth-child(3) .gd-thanh-day__icon {
	width: 50px; height: 50px; margin-top: -24px; border-radius: 999px; background: var(--gd-btn-bg); color: var(--gd-btn-ink); box-shadow: var(--gd-shadow);
}
.gd.gd-co-thanh-day:has(.gd-thanh-day--noi-bo-tron) { --bottom-h: 72px; }
.gd.gd-khong-thanh-day { --bottom-h: 0px; } /* ngành không dùng thanh đáy: chân trang + nút nổi không chừa chỗ */
.gd.has-buy-bar .gd-thanh-day { display: none; } /* trang sản phẩm: thanh mua thay thanh đáy */
@media (min-width: 1100px) { .gd .gd-thanh-day { display: none; } }

/* ---------- E8. Về đầu trang ---------- */
.gd .gd-ve-dau-trang {
	position: fixed; left: 12px; bottom: calc(var(--bottom-h, 64px) + env(safe-area-inset-bottom) + 12px); z-index: 57;
	opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
}
.gd .gd-ve-dau-trang.is-hien { opacity: 1; visibility: visible; transform: none; transition: opacity .2s ease, transform .2s ease; }
.gd.has-buy-bar .gd-ve-dau-trang { bottom: calc(68px + env(safe-area-inset-bottom) + 12px); }
.gd .gd-ve-dau-trang__nut {
	display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--gd-line); border-radius: 999px;
	background: var(--gd-bg); color: var(--contrast); box-shadow: var(--gd-shadow);
}
@media (min-width: 1100px) { .gd .gd-ve-dau-trang { left: 24px; bottom: 24px; } }

/* ---------- E7. Nút liên hệ nổi theo ngành (.float-contact của gốc — giữ nguyên lớp) ---------- */
@media (max-width: 1099px) {
	.gd.gd-co-thanh-day .float-contact, .gd.has-buy-bar .float-contact { bottom: calc(var(--gd-lhn-day, 88px) + env(safe-area-inset-bottom)); }
	.gd.gd-khong-thanh-day:not(.has-buy-bar) .float-contact { bottom: calc(16px + env(safe-area-inset-bottom)); }
}
/* cot-nhap-nhay: vòng sáng nhẹ, chậm quanh mọi nút (tắt khi giảm chuyển động — luật chung của gốc) */
.gd.gd-lhn--cot-nhap-nhay .float-contact__btn::before {
	content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none; animation: gd-nhip 2.6s ease-out infinite;
}
.gd.gd-lhn--cot-nhap-nhay .float-contact__btn:nth-child(2)::before { animation-delay: .5s; }
.gd.gd-lhn--cot-nhap-nhay .float-contact__btn:nth-child(3)::before { animation-delay: 1s; }
@keyframes gd-nhip {
	0% { box-shadow: 0 0 0 0 rgba(15, 23, 42, .28); }
	70%, 100% { box-shadow: 0 0 0 12px rgba(15, 23, 42, 0); }
}
/* vien-thuoc: nút dạng viên thuốc có chữ "Zalo" / "Gọi hotline" */
.gd.gd-lhn--vien-thuoc .float-contact { justify-items: end; }
.gd.gd-lhn--vien-thuoc .float-contact__btn {
	display: inline-flex; justify-content: flex-start; gap: 8px; width: auto; height: 44px; padding: 0 16px 0 12px; border-radius: 999px;
}
.gd.gd-lhn--vien-thuoc .float-contact__btn svg { width: 22px; height: 22px; }
.gd.gd-lhn--vien-thuoc .float-contact__tip {
	position: static; display: inline; padding: 0; border: 0; background: none; box-shadow: none; opacity: 1; visibility: visible; transform: none;
}
.gd.gd-lhn--vien-thuoc .float-contact__tip small, .gd.gd-lhn--vien-thuoc .float-contact__tip > span { display: none; }
.gd.gd-lhn--vien-thuoc .float-contact__tip b { color: #FFFFFF; font-size: 14px; }
/* gom-mot-nut: 1 nút "Liên hệ" bấm bung các kênh (JS thêm nút; tắt JS vẫn hiện đủ các nút) */
.gd .gd-lhn__mo { display: none; }
.gd.gd-lhn--gom-mot-nut .float-contact.is-gom .gd-lhn__mo {
	display: grid; border: 0; background: var(--gd-btn-bg); color: var(--gd-btn-ink); font: inherit; cursor: pointer;
}
.gd.gd-lhn--gom-mot-nut .float-contact.is-gom:not(.is-mo) > .float-contact__btn:not(.gd-lhn__mo) { display: none; }
.gd .gd-lhn__mo .gd-icon--dong { display: none; }
.gd .float-contact.is-mo .gd-lhn__mo .gd-icon--dong { display: block; }
.gd .float-contact.is-mo .gd-lhn__mo .gd-icon--zalo-chu { display: none; }

/* --- _chung/css/20-trang-chu-1.css --- */
/* =========================================================
   Nhóm khối TRANG CHỦ 1 (Site Kit 0.3.0) — slider, dai-cam-ket, o-dich-vu, o-danh-muc, flash-sale, tab-san-pham,
   hang-danh-muc, tuong-thuong-hieu, dai-banner, phoi-do, anh-khach-hang.
   Mobile-first (390px không tràn ngang), mốc 768 / 1100. Mọi luật dưới .gd; chỉ dùng biến --gd-* + biến gốc
   (--primary, --accent, --contrast, --muted…); màu ngành do Python tính (không viết tay ở đây).
   Lớp dùng chung trong nhóm (không thuộc 1 khối): gd-tc1-cuon (nút cuộn), gd-tc1-chip, gd-tc1-banner-chu (banner chữ dẫn tới nhóm hàng).
   ========================================================= */

/* ---------- Chung của nhóm ---------- */
.gd :is([data-gd="slider"], [data-gd="dai-cam-ket"], [data-gd="o-dich-vu"], [data-gd="o-danh-muc"], [data-gd="flash-sale"], [data-gd="tab-san-pham"], [data-gd="hang-danh-muc"], [data-gd="tuong-thuong-hieu"], [data-gd="dai-banner"], [data-gd="phoi-do"], [data-gd="anh-khach-hang"])[hidden],
.gd :is([data-gd="slider"], [data-gd="dai-cam-ket"], [data-gd="o-dich-vu"], [data-gd="o-danh-muc"], [data-gd="flash-sale"], [data-gd="tab-san-pham"], [data-gd="hang-danh-muc"], [data-gd="tuong-thuong-hieu"], [data-gd="dai-banner"], [data-gd="phoi-do"], [data-gd="anh-khach-hang"]) [hidden] {
	display: none !important;
}
.gd :is([data-gd="slider"], [data-gd="dai-cam-ket"], [data-gd="o-dich-vu"], [data-gd="o-danh-muc"], [data-gd="flash-sale"], [data-gd="tab-san-pham"], [data-gd="hang-danh-muc"], [data-gd="tuong-thuong-hieu"], [data-gd="dai-banner"], [data-gd="phoi-do"], [data-gd="anh-khach-hang"]) :is(a, button, [tabindex]):focus-visible {
	outline: 2px solid var(--primary); outline-offset: 2px;
}
.gd .gd-icon { flex-shrink: 0; }
/* Phần tử có padding + height 100% không tràn khung (theme gốc không đặt border-box toàn cục) */
.gd :is([data-gd="slider"], [data-gd="dai-cam-ket"], [data-gd="o-dich-vu"], [data-gd="o-danh-muc"], [data-gd="flash-sale"], [data-gd="tab-san-pham"], [data-gd="hang-danh-muc"], [data-gd="tuong-thuong-hieu"], [data-gd="dai-banner"], [data-gd="phoi-do"], [data-gd="anh-khach-hang"]),
.gd :is([data-gd="slider"], [data-gd="dai-cam-ket"], [data-gd="o-dich-vu"], [data-gd="o-danh-muc"], [data-gd="flash-sale"], [data-gd="tab-san-pham"], [data-gd="hang-danh-muc"], [data-gd="tuong-thuong-hieu"], [data-gd="dai-banner"], [data-gd="phoi-do"], [data-gd="anh-khach-hang"]) *,
.gd :is([data-gd="slider"], [data-gd="dai-cam-ket"], [data-gd="o-dich-vu"], [data-gd="o-danh-muc"], [data-gd="flash-sale"], [data-gd="tab-san-pham"], [data-gd="hang-danh-muc"], [data-gd="tuong-thuong-hieu"], [data-gd="dai-banner"], [data-gd="phoi-do"], [data-gd="anh-khach-hang"]) *::before,
.gd :is([data-gd="slider"], [data-gd="dai-cam-ket"], [data-gd="o-dich-vu"], [data-gd="o-danh-muc"], [data-gd="flash-sale"], [data-gd="tab-san-pham"], [data-gd="hang-danh-muc"], [data-gd="tuong-thuong-hieu"], [data-gd="dai-banner"], [data-gd="phoi-do"], [data-gd="anh-khach-hang"]) *::after { box-sizing: border-box; }
/* Dải cuộn / lưới có thẻ đổ bóng: chừa chỗ để bóng không bị cắt */
.gd :is([data-gd="slider"], [data-gd="dai-cam-ket"], [data-gd="o-dich-vu"], [data-gd="o-danh-muc"], [data-gd="flash-sale"], [data-gd="tab-san-pham"], [data-gd="hang-danh-muc"], [data-gd="tuong-thuong-hieu"], [data-gd="dai-banner"], [data-gd="phoi-do"], [data-gd="anh-khach-hang"]) :is(.gd-cuon, [data-gd-cuon], .gd-o-dich-vu__ds, .gd-o-danh-muc__ds, .gd-dai-banner__ds) { padding-block: 2px 8px; }

/* Nút cuộn ngang (máy tính có chuột) */
.gd .gd-tc1-cuon { display: none; gap: 6px; margin-left: auto; }
@media (hover: hover) and (min-width: 1100px) { .gd .gd-tc1-cuon { display: inline-flex; } }
.gd .gd-tc1-cuon .gd-tc1-cuon__nut {
	display: inline-grid; place-items: center; width: 36px; height: 36px; padding: 0; border-radius: 999px;
	border: 1px solid var(--gd-line); background: var(--gd-bg); color: var(--contrast); box-shadow: var(--gd-shadow); cursor: pointer;
}
.gd .gd-tc1-cuon .gd-tc1-cuon__nut:hover { color: var(--primary); border-color: var(--primary); }

/* Chip (danh mục con, thương hiệu) */
.gd .gd-tc1-chip {
	display: inline-flex; align-items: center; flex: 0 0 auto; min-height: 32px; padding: 4px 12px; border: 1px solid var(--gd-line);
	border-radius: 999px; background: var(--gd-bg); color: var(--contrast); font-size: 13px; font-weight: 600; line-height: 1.2;
	text-decoration: none; white-space: nowrap;
}
.gd .gd-tc1-chip:hover, .gd .gd-tc1-chip.is-chon { border-color: var(--primary); color: var(--primary); }
.gd .gd-tc1-chip--hang { text-transform: uppercase; letter-spacing: .03em; font-size: 12px; }

/* "Banner chữ" dẫn tới nhóm hàng (khi Admin chưa tải ảnh) */
.gd .gd-tc1-banner-chu {
	position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 40%; align-items: center; gap: 8px; min-height: 132px;
	padding: 14px 16px; border-radius: var(--gd-r-l); overflow: hidden; text-decoration: none; color: var(--contrast);
	background: color-mix(in srgb, var(--primary) 10%, var(--gd-bg));
}
.gd .gd-tc1-banner-chu:hover .gd-tc1-banner-chu__nut { text-decoration: underline; }
.gd .gd-tc1-banner-chu__chu { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.gd .gd-tc1-banner-chu__ten { font-family: var(--gd-h-font); font-weight: var(--gd-h-weight); font-size: 17px; line-height: 1.25; overflow-wrap: anywhere; }
.gd .gd-tc1-banner-chu__mo-ta { font-size: 13px; line-height: 1.4; color: var(--muted); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.gd .gd-tc1-banner-chu__nut { margin-top: 4px; font-size: 13px; font-weight: 700; color: var(--primary); }
.gd .gd-tc1-banner-chu__anh { width: 100%; height: auto; max-height: 120px; object-fit: contain; }

/* ---------- B1 slider ---------- */
.gd .gd-slider__luoi { display: grid; gap: var(--gd-gap); }
.gd .gd-slider__chinh { position: relative; min-width: 0; border-radius: var(--gd-r-l); overflow: hidden; background: var(--gd-bg-2); }
.gd .gd-slider__khung {
	display: grid; grid-auto-flow: column; grid-auto-columns: 100%; overflow-x: auto; overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory; scrollbar-width: none;
}
.gd .gd-slider__khung::-webkit-scrollbar { display: none; }
.gd .gd-slider__slide { scroll-snap-align: start; aspect-ratio: var(--gd-ti-le); }
.gd .gd-slider--anh-dt .gd-slider__slide { aspect-ratio: var(--gd-ti-le-dt); }
@media (min-width: 768px) { .gd .gd-slider--anh-dt .gd-slider__slide { aspect-ratio: var(--gd-ti-le); } }
.gd .gd-slider__link { display: block; height: 100%; }
.gd .gd-slider__slide picture, .gd .gd-slider__slide img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gd .gd-slider__menu, .gd .gd-slider__phu { display: none; }
@media (min-width: 1100px) {
	.gd .gd-slider--co-phu .gd-slider__luoi { grid-template-columns: minmax(0, 1fr) minmax(220px, 32%); }
	.gd .gd-slider--co-menu .gd-slider__luoi { grid-template-columns: 240px minmax(0, 1fr); }
	.gd .gd-slider--co-menu.gd-slider--co-phu .gd-slider__luoi { grid-template-columns: 240px minmax(0, 1fr) 260px; }
	/* Menu và banner phụ không làm cao hàng: chiều cao theo slider (height 0 + min-height 100%). */
	.gd .gd-slider__menu { display: block; height: 0; min-height: 100%; overflow: auto; }
	/* Menu dọc của nhóm đầu trang (có bảng bung sang phải): không cắt bảng bung (0.3.0b2 — điện thoại, cửa hàng chung báo);
	   cây dài hơn slider thì menu tự cao theo thay vì có thanh cuộn. */
	.gd .gd-slider__menu:has(> .gd-menu-doc) { position: relative; z-index: 6; height: auto; overflow: visible; }
	.gd .gd-slider__menu > .gd-menu-doc { height: 100%; }
	.gd .gd-slider__menu > .gd-menu-doc .gd-doc { width: auto; min-height: 100%; }
	.gd .gd-slider__phu { display: grid; grid-template-rows: repeat(2, minmax(0, 1fr)); gap: var(--gd-gap); height: 0; min-height: 100%; }
}
.gd nav.gd-slider__menu { background: var(--gd-bg); border: 1px solid var(--gd-line); border-radius: var(--gd-r-l); }
/* Menu dự phòng (chưa có khối menu-doc): chỉ áp cho danh sách của chính nó — không lọt vào bảng bung của menu-doc (0.3.0b2). */
.gd nav.gd-slider__menu > ul { list-style: none; margin: 0; padding: 6px 0; }
.gd nav.gd-slider__menu > ul > li > a { display: flex; align-items: center; gap: 10px; padding: 8px 14px; color: var(--contrast); font-size: 14px; text-decoration: none; }
.gd nav.gd-slider__menu > ul > li > a:hover { background: var(--gd-bg-2); color: var(--primary); }
.gd .gd-slider__menu-anh { width: 32px; height: 24px; object-fit: contain; }
.gd .gd-slider__phu-muc:not(.gd-tc1-banner-chu) { display: block; min-height: 0; border-radius: var(--gd-r-l); overflow: hidden; }
.gd .gd-slider__phu-muc:not(.gd-tc1-banner-chu) img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gd .gd-slider__phu .gd-tc1-banner-chu { min-height: 0; height: 100%; }

/* Nút, chấm, tạm dừng (JS bỏ hidden) */
.gd .gd-slider__dk { position: absolute; inset: 0; pointer-events: none; }
.gd .gd-slider__dk button { pointer-events: auto; cursor: pointer; }
.gd .gd-slider__nut {
	position: absolute; top: 50%; transform: translateY(-50%); display: none; place-items: center; width: 40px; height: 40px; padding: 0;
	border: 0; border-radius: 999px; background: rgba(255, 255, 255, .88); color: #111827; box-shadow: var(--gd-shadow);
}
.gd .gd-slider__nut--truoc { left: 12px; }
.gd .gd-slider__nut--sau { right: 12px; }
@media (hover: hover) and (min-width: 768px) { .gd .gd-slider__nut { display: grid; } }
.gd .gd-slider__cham { position: absolute; left: 50%; bottom: 4px; transform: translateX(-50%); display: flex; }
.gd .gd-slider__cham-nut { display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; background: transparent; }
.gd .gd-slider__cham-nut::before {
	content: ""; width: 8px; height: 8px; border-radius: 999px; background: rgba(255, 255, 255, .65);
	box-shadow: 0 0 0 1px rgba(17, 24, 39, .3); transition: width .2s ease;
}
.gd .gd-slider__cham-nut[aria-current="true"]::before { width: 20px; background: #FFFFFF; }
.gd .gd-slider__dung {
	position: absolute; right: 8px; bottom: 6px; display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0;
	border-radius: 999px; background: rgba(17, 24, 39, .55); color: #FFFFFF;
}
.gd .gd-slider__dung.is-dung { background: var(--primary); }

/* Banner chữ (chưa có ảnh slide) — nền màu nút chính, chữ tự chọn tương phản (--gd-btn-ink) */
.gd .gd-slider__chu {
	display: grid; gap: 18px; align-items: center; min-height: 240px; padding: 24px 20px;
	background: linear-gradient(135deg, var(--gd-btn-bg), color-mix(in srgb, var(--gd-btn-bg) 72%, #000000)); color: var(--gd-btn-ink);
}
@media (min-width: 768px) {
	.gd .gd-slider__chu { aspect-ratio: var(--gd-ti-le); min-height: 0; padding: clamp(24px, 4vw, 56px); }
	.gd .gd-slider__chu--co-anh { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
}
.gd .gd-slider__chu-noi { min-width: 0; }
.gd .gd-slider__chu-ten { margin: 0 0 6px; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: .85; }
.gd .gd-slider__chu-tieu-de {
	margin: 0 0 12px; color: inherit; font-family: var(--gd-h-font); font-weight: var(--gd-h-weight); letter-spacing: var(--gd-h-ls);
	font-size: clamp(1.5rem, 3.4vw, 2.6rem); line-height: 1.15; overflow-wrap: anywhere;
}
.gd .gd-slider__chu-mo-ta { margin: 0 0 12px; font-size: 15px; line-height: 1.5; opacity: .9; }
.gd .gd-slider__cam-ket { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 14px; font-weight: 600; }
.gd .gd-slider__cam-ket li { display: inline-flex; align-items: center; gap: 6px; }
.gd .gd-slider__chu-nut { display: flex; flex-wrap: wrap; gap: 10px; }
.gd .gd-slider:not(.gd-slider--video-chu) .gd-slider__nut-chinh { background: var(--gd-btn-ink); color: var(--gd-btn-bg); }
.gd .gd-slider__nut-phu { color: inherit; border-color: currentColor; }
.gd .gd-slider__chu-anh { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; min-width: 0; }
.gd .gd-slider__sp { display: block; aspect-ratio: 1; padding: 6px; border-radius: var(--gd-r-m); background: #FFFFFF; overflow: hidden; box-shadow: 0 6px 20px rgba(0, 0, 0, .18); }
.gd .gd-slider__sp img { display: block; width: 100%; height: 100%; object-fit: contain; }
.gd .gd-slider__sp--minh-hoa { background: rgba(255, 255, 255, .16); box-shadow: none; }
.gd .gd-slider__chu-anh--lon { grid-template-columns: minmax(0, 1fr); }
.gd .gd-slider__anh-lon { display: block; border-radius: var(--gd-r-l); overflow: hidden; }
.gd .gd-slider__anh-lon img { display: block; width: 100%; height: auto; }
/* video-chu (công nghệ): nền tối kiểu trang hãng */
.gd .gd-slider--video-chu .gd-slider__chu { background: var(--gd-footer-bg); color: var(--gd-footer-ink); border-radius: var(--gd-r-l); }
@media (min-width: 768px) { .gd .gd-slider--video-chu .gd-slider__chu-tieu-de { font-size: clamp(1.9rem, 4.2vw, 3.4rem); } }

/* ---------- B2 dai-cam-ket ---------- */
.gd .gd-dai-cam-ket__ds { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gd-gap); }
@media (min-width: 768px) { .gd .gd-dai-cam-ket__ds { grid-template-columns: repeat(var(--gd-so, 4), minmax(0, 1fr)); } }
.gd .gd-dai-cam-ket__muc, .gd .gd-dai-cam-ket__link { display: flex; align-items: center; gap: 10px; min-width: 0; }
.gd .gd-dai-cam-ket__muc { padding: 10px 4px; }
.gd .gd-dai-cam-ket__link { flex: 1; color: inherit; text-decoration: none; }
.gd .gd-dai-cam-ket__link:hover .gd-dai-cam-ket__tieu-de { color: var(--primary); }
.gd .gd-dai-cam-ket__icon {
	display: grid; place-items: center; flex: 0 0 44px; width: 44px; height: 44px; border-radius: 999px; color: var(--primary);
	background: color-mix(in srgb, var(--primary) 12%, transparent);
}
.gd .gd-dai-cam-ket__chu { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.gd .gd-dai-cam-ket__tieu-de { font-size: 14px; font-weight: 700; line-height: 1.3; color: var(--contrast); overflow-wrap: anywhere; }
.gd .gd-dai-cam-ket__mo-ta { font-size: 12px; line-height: 1.35; color: var(--muted); }
.gd .gd-dai-cam-ket--the .gd-dai-cam-ket__muc { padding: 12px; border: 1px solid var(--gd-line); border-radius: var(--gd-r-m); background: var(--gd-bg); box-shadow: var(--gd-shadow); }
.gd .gd-dai-cam-ket--nen-mau .gd-dai-cam-ket__ds { padding: 10px 12px; border-radius: var(--gd-r-l); background: var(--gd-bg-2); }
.gd .gd-dai-cam-ket--nen-mau .gd-dai-cam-ket__icon { background: var(--gd-bg); }
.gd .gd-dai-cam-ket--vien-duoi .gd-dai-cam-ket__ds { border-block: 1px solid var(--gd-line); }
.gd .gd-dai-cam-ket--vien-duoi .gd-dai-cam-ket__icon { background: none; width: 32px; flex-basis: 32px; }
@media (min-width: 768px) {
	.gd .gd-dai-cam-ket--vien-duoi .gd-dai-cam-ket__muc + .gd-dai-cam-ket__muc { border-left: 1px solid var(--gd-line); padding-left: 14px; }
	.gd .gd-dai-cam-ket--mot-hang .gd-dai-cam-ket__muc { justify-content: center; }
}

/* ---------- B3 o-dich-vu ---------- */
.gd .gd-o-dich-vu__ds {
	list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-template-rows: repeat(2, auto);
	grid-auto-columns: 23%; gap: var(--gd-gap); overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none;
}
.gd .gd-o-dich-vu__ds::-webkit-scrollbar { display: none; }
.gd .gd-o-dich-vu__ds > li { min-width: 0; scroll-snap-align: start; }
.gd .gd-o-dich-vu__muc { display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; color: var(--contrast); text-decoration: none; text-align: center; }
.gd .gd-o-dich-vu__icon {
	display: grid; place-items: center; width: 56px; height: 56px; border-radius: 999px; color: var(--contrast);
	background: color-mix(in srgb, var(--primary) 14%, var(--gd-bg));
}
.gd .gd-o-dich-vu__ds > li:nth-child(4n+2) .gd-o-dich-vu__icon { background: color-mix(in srgb, var(--accent) 18%, var(--gd-bg)); }
.gd .gd-o-dich-vu__ds > li:nth-child(4n+3) .gd-o-dich-vu__icon { background: color-mix(in srgb, var(--gd-deal) 22%, var(--gd-bg)); }
.gd .gd-o-dich-vu__ds > li:nth-child(4n+4) .gd-o-dich-vu__icon { background: color-mix(in srgb, var(--gd-sale) 12%, var(--gd-bg)); }
.gd .gd-o-dich-vu__chu { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.gd .gd-o-dich-vu__ten { font-size: 13px; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.gd .gd-o-dich-vu__mo-ta { font-size: 12px; line-height: 1.35; color: var(--muted); }
.gd .gd-o-dich-vu__muc:hover .gd-o-dich-vu__ten { color: var(--primary); }
.gd .gd-o-dich-vu--o-vuong .gd-o-dich-vu__mo-ta { display: none; }
/* Viên thuốc: chip ngang icon + chữ */
.gd .gd-o-dich-vu--vien-thuoc .gd-o-dich-vu__ds { grid-auto-columns: max-content; }
.gd .gd-o-dich-vu--vien-thuoc .gd-o-dich-vu__muc { flex-direction: row; gap: 8px; padding: 6px 14px 6px 6px; border: 1px solid var(--gd-line); border-radius: 999px; background: var(--gd-bg); text-align: left; }
.gd .gd-o-dich-vu--vien-thuoc .gd-o-dich-vu__icon { width: 36px; height: 36px; }
.gd .gd-o-dich-vu--vien-thuoc .gd-o-dich-vu__mo-ta { display: none; }
/* Thẻ ngang: icon + 2 dòng */
.gd .gd-o-dich-vu--the-ngang .gd-o-dich-vu__ds { grid-template-rows: none; grid-auto-columns: 72%; }
.gd .gd-o-dich-vu--the-ngang .gd-o-dich-vu__muc { flex-direction: row; gap: 12px; padding: 12px; border: 1px solid var(--gd-line); border-radius: var(--gd-r-m); background: var(--gd-bg); text-align: left; box-shadow: var(--gd-shadow); }
.gd .gd-o-dich-vu--the-ngang .gd-o-dich-vu__icon { width: 44px; height: 44px; flex: 0 0 44px; }
.gd .gd-o-dich-vu--the-ngang .gd-o-dich-vu__ten { font-size: 14px; font-weight: 700; }
@media (min-width: 768px) {
	.gd .gd-o-dich-vu__ds { grid-auto-columns: 15%; }
	.gd .gd-o-dich-vu--the-ngang .gd-o-dich-vu__ds { grid-auto-columns: 40%; }
}
@media (min-width: 1100px) {
	.gd .gd-o-dich-vu__ds { grid-auto-flow: row; grid-template-rows: none; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); overflow: visible; }
	.gd .gd-o-dich-vu--vien-thuoc .gd-o-dich-vu__ds { display: flex; flex-wrap: wrap; justify-content: center; }
	.gd .gd-o-dich-vu--the-ngang .gd-o-dich-vu__ds { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
}

/* ---------- B4 o-danh-muc ---------- */
.gd .gd-o-danh-muc__ds {
	list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-template-rows: repeat(var(--gd-hang, 2), auto);
	grid-auto-columns: 23%; gap: var(--gd-gap); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: none;
}
.gd .gd-o-danh-muc__ds::-webkit-scrollbar { display: none; }
.gd .gd-o-danh-muc__muc { min-width: 0; scroll-snap-align: start; }
.gd .gd-o-danh-muc__link { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; height: 100%; color: var(--contrast); text-decoration: none; text-align: center; }
.gd .gd-o-danh-muc__anh { position: relative; display: grid; place-items: center; width: 100%; overflow: hidden; background: var(--gd-bg-2); }
.gd .gd-o-danh-muc__anh img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gd .gd-o-danh-muc__anh .gd-o-danh-muc__minh-hoa { object-fit: contain; padding: 8%; }
.gd .gd-o-danh-muc__icon { display: grid; place-items: center; color: var(--primary); }
.gd .gd-o-danh-muc__ten { font-size: 13px; font-weight: 600; line-height: 1.3; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; }
.gd .gd-o-danh-muc__so { font-size: 12px; color: var(--muted); }
.gd .gd-o-danh-muc__link:hover .gd-o-danh-muc__ten { color: var(--primary); }
/* icon-tron: ảnh tròn + tên */
.gd .gd-o-danh-muc--icon-tron .gd-o-danh-muc__anh { width: min(100%, 80px); aspect-ratio: 1; border-radius: 999px; border: 1px solid var(--gd-line); }
/* the-anh: thẻ ảnh vuông + tên */
.gd .gd-o-danh-muc--the-anh .gd-o-danh-muc__ds { grid-auto-columns: 40%; }
.gd .gd-o-danh-muc--the-anh .gd-o-danh-muc__anh { aspect-ratio: 1; border-radius: var(--gd-r-m); }
.gd .gd-o-danh-muc--the-anh .gd-o-danh-muc__ten { font-size: 14px; font-weight: 700; }
/* o-lon: ô ảnh lớn, tên + nút đè lên ảnh (điện thoại lưới 2×2) */
.gd .gd-o-danh-muc--o-lon .gd-o-danh-muc__ds { grid-auto-flow: row; grid-template-rows: none; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; }
.gd .gd-o-danh-muc--o-lon .gd-o-danh-muc__link { display: block; border-radius: var(--gd-r-l); overflow: hidden; }
.gd .gd-o-danh-muc--o-lon .gd-o-danh-muc__anh { aspect-ratio: 3 / 4; }
.gd .gd-o-danh-muc--o-lon .gd-o-danh-muc__link::after { content: ""; position: absolute; inset: 40% 0 0; background: linear-gradient(transparent, rgba(0, 0, 0, .62)); pointer-events: none; }
.gd .gd-o-danh-muc--o-lon .gd-o-danh-muc__ten { position: absolute; z-index: 1; left: 12px; right: 12px; bottom: 46px; color: #FFFFFF; font-size: clamp(1rem, 2.4vw, 1.375rem); font-weight: var(--gd-h-weight); text-transform: var(--gd-h-tt); text-align: left; }
.gd .gd-o-danh-muc--o-lon .gd-o-danh-muc__so { position: absolute; z-index: 1; left: 12px; top: 10px; color: #FFFFFF; text-shadow: 0 1px 2px rgba(0, 0, 0, .6); }
.gd .gd-o-danh-muc--o-lon .gd-o-danh-muc__nut { position: absolute; z-index: 1; left: 12px; bottom: 12px; padding: 5px 12px; border-radius: 999px; background: #FFFFFF; color: #111827; font-size: 12px; font-weight: 700; text-transform: var(--gd-btn-tt); }
/* o-pastel: ô bo góc nền nhạt khác màu từng ô */
.gd .gd-o-danh-muc--o-pastel .gd-o-danh-muc__ds { grid-auto-columns: 30%; }
.gd .gd-o-danh-muc--o-pastel .gd-o-danh-muc__link { align-items: flex-start; gap: 4px; padding: 10px; border-radius: var(--gd-r-l); background: color-mix(in srgb, var(--primary) 10%, var(--gd-bg)); text-align: left; }
.gd .gd-o-danh-muc--o-pastel .gd-o-danh-muc__muc:nth-child(4n+2) .gd-o-danh-muc__link { background: color-mix(in srgb, var(--accent) 14%, var(--gd-bg)); }
.gd .gd-o-danh-muc--o-pastel .gd-o-danh-muc__muc:nth-child(4n+3) .gd-o-danh-muc__link { background: color-mix(in srgb, var(--gd-deal) 18%, var(--gd-bg)); }
.gd .gd-o-danh-muc--o-pastel .gd-o-danh-muc__muc:nth-child(4n+4) .gd-o-danh-muc__link { background: color-mix(in srgb, var(--gd-sale) 10%, var(--gd-bg)); }
.gd .gd-o-danh-muc--o-pastel .gd-o-danh-muc__anh { order: 3; aspect-ratio: 1; background: none; }
.gd .gd-o-danh-muc--o-pastel .gd-o-danh-muc__anh img { object-fit: contain; }
.gd .gd-o-danh-muc--o-pastel .gd-o-danh-muc__ten { font-weight: 700; }
@media (min-width: 768px) {
	.gd .gd-o-danh-muc__ds { grid-auto-columns: 14%; }
	.gd .gd-o-danh-muc--the-anh .gd-o-danh-muc__ds { grid-auto-columns: 23%; }
	.gd .gd-o-danh-muc--o-pastel .gd-o-danh-muc__ds { grid-auto-columns: 18%; }
	.gd .gd-o-danh-muc--o-lon .gd-o-danh-muc__ds { grid-template-columns: repeat(var(--gd-cot, 4), minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
	.gd .gd-o-danh-muc__ds { grid-auto-flow: row; grid-template-rows: none; grid-template-columns: repeat(var(--gd-cot, 8), minmax(0, 1fr)); overflow: visible; }
	.gd .gd-o-danh-muc--icon-tron .gd-o-danh-muc__anh { width: min(100%, 96px); }
}

/* ---------- B5 flash-sale ---------- */
.gd .gd-flash-sale { padding: 14px 12px; border-radius: var(--gd-r-l); }
@media (min-width: 768px) { .gd .gd-flash-sale { padding: 18px; } }
.gd .gd-flash-sale--dai-mau { background: var(--gd-deal); color: var(--gd-deal-ink); }
.gd .gd-flash-sale--khung-vien { background: var(--gd-bg); border: 2px solid var(--gd-deal); }
.gd .gd-flash-sale--toi { background: var(--gd-footer-bg); color: var(--gd-footer-ink); }
.gd .gd-flash-sale__dau { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-bottom: 12px; }
.gd .gd-flash-sale__tieu { min-width: 0; }
.gd .gd-flash-sale__nho { display: block; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; opacity: .8; }
.gd .gd-flash-sale__tieu-de {
	display: flex; align-items: center; gap: 6px; margin: 0; color: inherit; font-family: var(--gd-h-font); font-weight: var(--gd-h-weight);
	text-transform: var(--gd-h-tt); letter-spacing: var(--gd-h-ls); font-size: clamp(1.125rem, 2.2vw, 1.5rem); line-height: 1.2;
}
.gd .gd-flash-sale--khung-vien .gd-flash-sale__tieu-de { color: var(--gd-sale); }
.gd .gd-flash-sale__dong-ho { order: 3; flex-basis: 100%; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 13px; font-weight: 600; }
@media (min-width: 768px) { .gd .gd-flash-sale__dong-ho { order: 0; flex-basis: auto; } }
.gd .gd-flash-sale__so { display: inline-flex; align-items: center; gap: 3px; }
.gd .gd-flash-sale__so b {
	min-width: 28px; padding: 3px 5px; border-radius: var(--gd-r-s); background: var(--gd-ink); color: var(--gd-bg); text-align: center;
	font-size: 14px; font-variant-numeric: tabular-nums;
}
.gd .gd-flash-sale__so i { font-style: normal; font-weight: 800; }
.gd .gd-flash-sale--toi .gd-flash-sale__so b {
	background: rgba(255, 255, 255, .08); color: var(--gd-deal); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
	text-shadow: 0 0 10px color-mix(in srgb, var(--gd-deal) 70%, transparent);
}
.gd .gd-flash-sale__dong-ho.is-chay .gd-flash-sale__luc { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.gd .gd-flash-sale__them { margin-left: auto; color: inherit; font-size: 14px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.gd .gd-flash-sale--khung-vien .gd-flash-sale__them { color: var(--primary); }
.gd .gd-flash-sale__them:hover { text-decoration: underline; }
.gd .gd-flash-sale__dau .gd-tc1-cuon { margin-left: 0; }
.gd .gd-flash-sale__muc { display: flex; flex-direction: column; gap: 6px; }
.gd .gd-flash-sale__muc > .gd-the { flex: 1; height: auto; }
/* Hạn giảm riêng của thẻ (khối không có đồng hồ chung — mốc mỗi sản phẩm khác nhau) */
.gd .gd-flash-sale__han { display: flex; align-items: center; gap: 4px; margin: 0; font-size: 12px; font-weight: 700; }
.gd .gd-flash-sale__han .gd-icon { flex: none; }
/* Thanh "Đã bán": rãnh (::before) + phần đã bán chồng cùng ô lưới, chữ ở dòng dưới (không đè chữ lên màu) */
.gd .gd-flash-sale__ban { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; font-size: 12px; font-weight: 700; }
.gd .gd-flash-sale__ban::before { content: ""; grid-row: 1; grid-column: 1; height: 6px; border-radius: 999px; background: color-mix(in srgb, currentColor 18%, transparent); }
.gd .gd-flash-sale__thanh { grid-row: 1; grid-column: 1; width: var(--gd-pt, 0%); height: 6px; border-radius: 999px; background: var(--gd-sale); }
.gd .gd-flash-sale__ban-chu { grid-row: 2; grid-column: 1; }

/* ---------- B7 tab-san-pham ---------- */
.gd .gd-tab-san-pham__thanh { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; }
.gd .gd-tab-san-pham__hang { display: flex; flex: 1; gap: 8px; min-width: 0; padding: 2px; overflow-x: auto; scrollbar-width: none; }
.gd .gd-tab-san-pham__hang::-webkit-scrollbar { display: none; }
.gd .gd-tab-san-pham__nut {
	flex: 0 0 auto; padding: 7px 14px; border: 1px solid var(--gd-line); border-radius: 999px; background: var(--gd-bg); color: var(--contrast);
	font-size: 14px; font-weight: 600; line-height: 1.3; text-decoration: none; white-space: nowrap;
}
.gd .gd-tab-san-pham__nut:hover { border-color: var(--primary); color: var(--primary); }
.gd .gd-tab-san-pham__nut.is-chon { background: var(--gd-ink); border-color: var(--gd-ink); color: var(--gd-bg); }

/* ---------- B8 hang-danh-muc ---------- */
.gd .gd-hang-danh-muc__dau { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-bottom: 12px; }
.gd .gd-hang-danh-muc__tieu-de {
	margin: 0; min-width: 0; color: var(--contrast); font-family: var(--gd-h-font); font-weight: var(--gd-h-weight); text-transform: var(--gd-h-tt);
	letter-spacing: var(--gd-h-ls); font-size: clamp(1.125rem, 2.2vw, 1.5rem); line-height: 1.25; overflow-wrap: anywhere;
}
.gd .gd-hang-danh-muc__tieu-de a { color: inherit; text-decoration: none; }
.gd .gd-hang-danh-muc__tieu-de a:hover { color: var(--primary); }
.gd .gd-hang-danh-muc__chip { order: 3; flex: 1 1 100%; display: flex; gap: 6px; min-width: 0; padding: 1px; overflow-x: auto; scrollbar-width: none; }
.gd .gd-hang-danh-muc__chip::-webkit-scrollbar { display: none; }
.gd .gd-hang-danh-muc__them { margin-left: auto; color: var(--primary); font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.gd .gd-hang-danh-muc__them:hover { text-decoration: underline; }
@media (min-width: 1100px) {
	/* Dồn chip sang phải bằng margin-left:auto của chip đầu (không dùng justify-content:flex-end: hàng chip dài hơn chỗ trống thì
	   chip đầu bị đẩy ra ngoài mép trái, không cuộn tới được — thấy khi thử Playground 06/10, hàng "Máy tập" 7 chip). */
	.gd .gd-hang-danh-muc__chip { order: 0; flex: 1 1 0; }
	.gd .gd-hang-danh-muc__chip > :first-child { margin-left: auto; }
	.gd .gd-hang-danh-muc__chip + .gd-hang-danh-muc__them { margin-left: 0; }
}
.gd .gd-hang-danh-muc__dau .gd-tc1-cuon { margin-left: 0; }
.gd .gd-hang-danh-muc__than { display: grid; gap: var(--gd-gap); }
.gd .gd-hang-danh-muc__sp { min-width: 0; }
.gd .gd-hang-danh-muc__banner:not(.gd-tc1-banner-chu) { display: block; border-radius: var(--gd-r-l); overflow: hidden; }
.gd .gd-hang-danh-muc__banner:not(.gd-tc1-banner-chu) img { display: block; width: 100%; height: 120px; object-fit: cover; }
.gd .gd-hang-danh-muc__banner--chu { min-height: 120px; }
.gd .gd-hang-danh-muc__banner--chu .gd-tc1-banner-chu__anh { max-height: 96px; }
@media (min-width: 1100px) {
	.gd .gd-hang-danh-muc--co-banner .gd-hang-danh-muc__than { grid-template-columns: minmax(180px, 1fr) minmax(0, 4fr); }
	.gd .gd-hang-danh-muc--co-banner .gd-hang-danh-muc__banner:not(.gd-tc1-banner-chu) img { height: 100%; }
	.gd .gd-hang-danh-muc__banner--chu { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; align-content: space-between; height: 100%; padding: 18px; }
	.gd .gd-hang-danh-muc__banner--chu .gd-tc1-banner-chu__anh { max-height: 180px; align-self: end; }
}
.gd .gd-hang-danh-muc__tren { margin-bottom: var(--gd-gap); grid-auto-columns: 78%; }
.gd .gd-hang-danh-muc__nho:not(.gd-tc1-banner-chu) { display: block; border-radius: var(--gd-r-l); overflow: hidden; }
.gd .gd-hang-danh-muc__nho:not(.gd-tc1-banner-chu) img { display: block; width: 100%; height: 110px; object-fit: cover; }
@media (min-width: 768px) {
	.gd .gd-hang-danh-muc__tren { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; }
}

/* ---------- B9 tuong-thuong-hieu ---------- */
.gd .gd-tuong-thuong-hieu__ds { list-style: none; margin: 0; padding: 0; gap: var(--gd-gap); }
.gd .gd-tuong-thuong-hieu__ds:not(.gd-cuon) { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gd .gd-tuong-thuong-hieu__ds.gd-cuon { grid-auto-columns: calc((100% - 2 * var(--gd-gap)) / 3.2); }
@media (min-width: 768px) {
	.gd .gd-tuong-thuong-hieu__ds:not(.gd-cuon) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.gd .gd-tuong-thuong-hieu__ds.gd-cuon { grid-auto-columns: calc((100% - 4 * var(--gd-gap)) / 5); }
}
@media (min-width: 1100px) {
	.gd .gd-tuong-thuong-hieu__ds:not(.gd-cuon) { grid-template-columns: repeat(6, minmax(0, 1fr)); }
	.gd .gd-tuong-thuong-hieu__ds.gd-cuon { grid-auto-columns: calc((100% - 6 * var(--gd-gap)) / 7); }
}
.gd .gd-tuong-thuong-hieu__muc {
	display: grid; place-items: center; aspect-ratio: 3 / 2; padding: 10px; border: 1px solid var(--gd-line); border-radius: var(--gd-r-m);
	background: #FFFFFF; text-decoration: none; transition: border-color .15s ease, box-shadow .15s ease;
}
.gd .gd-tuong-thuong-hieu__muc:hover { border-color: var(--primary); box-shadow: var(--gd-shadow); }
.gd .gd-tuong-thuong-hieu__logo { display: block; width: auto; height: auto; max-width: 100%; max-height: 56px; object-fit: contain; }
.gd .gd-tuong-thuong-hieu__muc--chu { background: var(--gd-bg); }
.gd .gd-tuong-thuong-hieu__muc--chu span { color: var(--contrast); font-size: 14px; font-weight: 800; letter-spacing: .04em; text-align: center; text-transform: uppercase; overflow-wrap: anywhere; }
.gd .gd-tuong-thuong-hieu--xam .gd-tuong-thuong-hieu__logo { filter: grayscale(1); opacity: .72; transition: filter .2s ease, opacity .2s ease; }
.gd .gd-tuong-thuong-hieu--xam .gd-tuong-thuong-hieu__muc:is(:hover, :focus-visible) .gd-tuong-thuong-hieu__logo { filter: none; opacity: 1; }

/* ---------- B10 dai-banner ---------- */
.gd .gd-dai-banner__ds {
	list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: 86%; gap: var(--gd-gap);
	overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
}
.gd .gd-dai-banner__ds::-webkit-scrollbar { display: none; }
.gd .gd-dai-banner__ds > li { min-width: 0; scroll-snap-align: start; }
.gd .gd-dai-banner__muc:not(.gd-tc1-banner-chu) { display: block; height: 100%; border-radius: var(--gd-r-l); overflow: hidden; }
.gd .gd-dai-banner__muc:not(.gd-tc1-banner-chu) img { display: block; width: 100%; height: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.gd .gd-dai-banner--2 .gd-dai-banner__muc:not(.gd-tc1-banner-chu) img { aspect-ratio: 2.4 / 1; }
.gd .gd-dai-banner--thanh-toan .gd-dai-banner__muc:not(.gd-tc1-banner-chu) img { aspect-ratio: 3 / 1; }
@media (min-width: 768px) {
	.gd .gd-dai-banner__ds { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(var(--gd-so, 2), minmax(0, 1fr)); overflow: visible; }
	.gd .gd-dai-banner--1-4 .gd-dai-banner__ds { grid-template-columns: 2fr 1fr 1fr; }
	.gd .gd-dai-banner--1-4 .gd-dai-banner__ds > li:first-child { grid-row: span 2; }
	.gd .gd-dai-banner--1-4 .gd-dai-banner__ds > li:first-child .gd-dai-banner__muc:not(.gd-tc1-banner-chu) img { aspect-ratio: auto; }
}

/* ---------- B11 phoi-do ---------- */
.gd .gd-phoi-do__dau, .gd .gd-anh-khach-hang__dau { display: flex; align-items: flex-end; gap: 12px; }
.gd .gd-phoi-do__dau .gd-dau-khoi, .gd .gd-anh-khach-hang__dau .gd-dau-khoi { flex: 1; min-width: 0; }
.gd .gd-phoi-do__dau .gd-tc1-cuon, .gd .gd-anh-khach-hang__dau .gd-tc1-cuon { margin-bottom: calc(var(--gd-gap) + 4px); }
.gd .gd-phoi-do__ds { list-style: none; margin: 0; padding: 0; grid-auto-columns: 88%; }
.gd .gd-phoi-do--the-doc .gd-phoi-do__ds { grid-auto-columns: 62%; }
@media (min-width: 768px) { .gd .gd-phoi-do--the-doc .gd-phoi-do__ds { grid-auto-columns: calc((100% - 2 * var(--gd-gap)) / 2.4); } }
@media (min-width: 1100px) {
	.gd .gd-phoi-do--the-doc .gd-phoi-do__ds { grid-auto-columns: calc((100% - 2 * var(--gd-gap)) / 3); }
	.gd .gd-phoi-do--diem-cham .gd-phoi-do__ds, .gd .gd-phoi-do--combo .gd-phoi-do__ds { grid-auto-columns: 100%; }
}
.gd .gd-phoi-do__the { display: flex; flex-direction: column; gap: 6px; color: var(--contrast); text-decoration: none; }
.gd .gd-phoi-do__the .gd-phoi-do__anh { aspect-ratio: 3 / 4; }
.gd .gd-phoi-do__anh { display: block; border-radius: var(--gd-r-l); overflow: hidden; background: var(--gd-bg-2); }
.gd .gd-phoi-do__anh img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.gd .gd-phoi-do__the:hover .gd-phoi-do__anh img { transform: scale(1.03); }
.gd .gd-phoi-do__ten { margin: 0; font-family: var(--gd-h-font); font-size: 16px; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.gd .gd-phoi-do__ten a { color: inherit; text-decoration: none; }
.gd .gd-phoi-do__xem { color: var(--primary); font-size: 13px; font-weight: 700; }
.gd .gd-phoi-do__look { display: grid; gap: 12px; height: 100%; padding: 10px; border-radius: var(--gd-r-l); background: var(--gd-bg-2); }
.gd .gd-phoi-do__look .gd-phoi-do__anh { aspect-ratio: 4 / 3; }
@media (min-width: 768px) {
	.gd .gd-phoi-do__look { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); padding: 14px; }
	.gd .gd-phoi-do__look .gd-phoi-do__anh { aspect-ratio: 16 / 10; }
}
.gd .gd-phoi-do__noi { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.gd .gd-phoi-do__mons { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.gd .gd-phoi-do__mon { display: flex; align-items: center; gap: 10px; padding: 6px; border-radius: var(--gd-r-m); background: var(--gd-bg); }
.gd .gd-phoi-do__mon a { display: flex; align-items: center; flex: 1; gap: 10px; min-width: 0; color: var(--contrast); text-decoration: none; }
.gd .gd-phoi-do__mon img { flex: 0 0 52px; width: 52px; height: 52px; border-radius: var(--gd-r-s); object-fit: contain; background: #FFFFFF; }
.gd .gd-phoi-do__mon-ten { font-size: 13px; font-weight: 600; line-height: 1.3; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.gd .gd-phoi-do__mon-gia { flex-shrink: 0; color: var(--gd-sale); font-size: 13px; font-weight: 800; text-align: right; }
.gd .gd-phoi-do__mon-gia del { display: block; color: var(--muted); font-weight: 400; font-size: 11px; }
.gd .gd-phoi-do__mon-gia ins { text-decoration: none; }
.gd .gd-phoi-do__tong { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; font-size: 14px; }
.gd .gd-phoi-do__tong strong { color: var(--gd-sale); font-size: 17px; }

/* ---------- B12 anh-khach-hang ---------- */
.gd .gd-anh-khach-hang__ds { list-style: none; margin: 0; padding: 0; gap: var(--gd-gap); }
.gd .gd-anh-khach-hang__ds.gd-cuon { --gd-cot: 4; }
.gd .gd-anh-khach-hang__ds:not(.gd-cuon) { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (min-width: 1100px) { .gd .gd-anh-khach-hang__ds:not(.gd-cuon) { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.gd .gd-anh-khach-hang__muc, .gd .gd-anh-khach-hang__the { margin: 0; height: 100%; }
.gd .gd-anh-khach-hang__anh { display: block; aspect-ratio: 1; border-radius: var(--gd-r-m); overflow: hidden; background: var(--gd-bg-2); }
.gd .gd-anh-khach-hang__anh img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.gd a.gd-anh-khach-hang__anh:hover img { transform: scale(1.04); }
.gd .gd-anh-khach-hang__chu { margin-top: 6px; color: var(--contrast); font-size: 13px; line-height: 1.35; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.gd .gd-anh-khach-hang--luoi-6 .gd-anh-khach-hang__chu { -webkit-line-clamp: 1; font-size: 12px; }
.gd .gd-anh-khach-hang--the-danh-gia .gd-anh-khach-hang__ds.gd-cuon { --gd-cot: 3; grid-auto-columns: 78%; }
@media (min-width: 768px) { .gd .gd-anh-khach-hang--the-danh-gia .gd-anh-khach-hang__ds.gd-cuon { grid-auto-columns: calc((100% - var(--gd-gap)) / 2.2); } }
@media (min-width: 1100px) { .gd .gd-anh-khach-hang--the-danh-gia .gd-anh-khach-hang__ds.gd-cuon { grid-auto-columns: calc((100% - 2 * var(--gd-gap)) / 3); } }
.gd .gd-anh-khach-hang__the { display: flex; flex-direction: column; border: 1px solid var(--gd-line); border-radius: var(--gd-r-l); overflow: hidden; background: var(--gd-bg); box-shadow: var(--gd-shadow); }
.gd .gd-anh-khach-hang__the .gd-anh-khach-hang__anh { aspect-ratio: 4 / 3; border-radius: 0; }
.gd .gd-anh-khach-hang__the figcaption { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px 14px; }
.gd .gd-anh-khach-hang__loi { margin: 0; padding: 0; border: 0; color: var(--contrast); font-size: 14px; line-height: 1.5; }
.gd .gd-anh-khach-hang__loi::before { content: "“"; margin-right: 2px; color: var(--primary); font-size: 20px; font-weight: 800; line-height: 0; }
.gd .gd-anh-khach-hang__ten { color: var(--muted); font-size: 13px; font-style: normal; font-weight: 700; }

/* --- _chung/css/25-trang-chu-2.css --- */
/* =========================================================
   Giao diện theo ngành — nhóm khối TRANG CHỦ 2 (Site Kit 0.3.0)
   he-thong-cua-hang · tin-tuc · dang-ky · doan-seo · tu-khoa-hot · cau-chuyen · dai-trai-nghiem · loi-tat (+ 7 bí danh) · combo-goi
   Mọi luật dưới .gd; chỉ dùng biến --gd-* + biến gốc. Mobile-first, mốc 600 / 768 / 1100. Không tràn ngang ở 390px.
   Lớp dùng chung riêng của nhóm có tiền tố gd-tc2- (tab) để không đụng nhóm khác.
   ========================================================= */

/* ---------- Tab của nhóm (tin-tuc kiểu "tab", he-thong-cua-hang kiểu "tab-tinh"): JS dựng hàng tab; tắt JS → các phần xếp chồng ---------- */
.gd .gd-tc2-tab__ds { display: flex; gap: 8px; margin: 0 0 var(--gd-gap); padding: 0 0 2px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
.gd .gd-tc2-tab__ds::-webkit-scrollbar { display: none; }
.gd .gd-tc2-tab__nut {
	box-sizing: border-box; flex-shrink: 0; min-height: 40px; padding: 8px 16px; border: 1px solid var(--gd-line); border-radius: 999px;
	background: var(--gd-bg); color: var(--contrast); font: inherit; font-size: 14px; font-weight: 600; white-space: nowrap; cursor: pointer;
}
.gd .gd-tc2-tab__nut:hover { border-color: var(--primary); }
.gd .gd-tc2-tab__nut[aria-selected="true"] { background: var(--gd-btn-bg); border-color: transparent; color: var(--gd-btn-ink); }
.gd .gd-tc2-tab__nut:focus-visible, .gd .gd-tc2-tab__panel:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.gd .gd-tc2-tab__panel + .gd-tc2-tab__panel { margin-top: var(--gd-section); }
.gd .gd-tc2-tab.is-js .gd-tc2-tab__panel + .gd-tc2-tab__panel { margin-top: 0; }
.gd .gd-tc2-tab__panel[hidden] { display: none; }
.gd .gd-tc2-tab__ten { margin: 0 0 var(--gd-gap); font-size: 17px; font-weight: 700; line-height: 1.3; color: var(--contrast); }
.gd .gd-tc2-tab.is-js .gd-tc2-tab__ten { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- B13. Hệ thống cửa hàng ---------- */
.gd .gd-he-thong-cua-hang__tong { margin: -6px 0 var(--gd-gap); font-size: 13px; color: var(--muted); }
.gd .gd-he-thong-cua-hang__loc { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 var(--gd-gap); font-size: 14px; font-weight: 600; color: var(--contrast); }
.gd .gd-he-thong-cua-hang__loc select {
	min-height: 40px; max-width: 100%; padding: 6px 10px; border: 1px solid var(--gd-line); border-radius: var(--gd-r-m);
	background: var(--gd-bg); color: var(--contrast); font: inherit; font-weight: 400;
}
.gd .gd-he-thong-cua-hang__luoi { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--gd-gap); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 600px) { .gd .gd-he-thong-cua-hang__luoi { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .gd .gd-he-thong-cua-hang__luoi { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.gd .gd-he-thong-cua-hang__luoi > li { min-width: 0; }
.gd .gd-he-thong-cua-hang__luoi > li[hidden] { display: none; }
.gd .gd-he-thong-cua-hang__the {
	display: flex; flex-direction: column; gap: 8px; height: 100%; box-sizing: border-box; padding: 16px;
	background: var(--gd-bg); border: 1px solid var(--gd-line); border-radius: var(--gd-r-m); box-shadow: var(--gd-shadow);
}
.gd .gd-he-thong-cua-hang__ten { margin: 0; font-size: 16px; font-weight: 700; line-height: 1.3; color: var(--contrast); }
.gd .gd-he-thong-cua-hang__tinh { align-self: flex-start; padding: 2px 8px; border-radius: 999px; background: var(--gd-bg-2); font-size: 12px; font-weight: 600; color: var(--muted); }
.gd .gd-he-thong-cua-hang__dong { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 14px; line-height: 1.45; color: var(--contrast); }
.gd .gd-he-thong-cua-hang__dong li { display: flex; align-items: flex-start; gap: 8px; min-width: 0; overflow-wrap: anywhere; }
.gd .gd-he-thong-cua-hang__dong svg { flex-shrink: 0; margin-top: 1px; color: var(--primary); }
.gd .gd-he-thong-cua-hang__dong a { color: inherit; font-weight: 700; text-decoration: none; }
.gd .gd-he-thong-cua-hang__dong a:hover { color: var(--primary); }
.gd .gd-he-thong-cua-hang__chi-duong { align-self: flex-start; margin-top: auto; min-height: 38px; }

.gd .gd-he-thong-cua-hang__gon {
	display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding: 14px 16px;
	background: var(--gd-bg-2); border: 1px solid var(--gd-line); border-radius: var(--gd-r-m);
}
.gd .gd-he-thong-cua-hang__gon-icon { display: inline-grid; place-items: center; flex-shrink: 0; width: 48px; height: 48px; border-radius: 50%; background: var(--gd-bg); color: var(--primary); }
.gd .gd-he-thong-cua-hang__gon-chu { flex: 1 1 220px; min-width: 0; }
.gd .gd-he-thong-cua-hang__gon-ten { margin: 0 0 2px; font-family: var(--gd-h-font); font-size: 15px; font-weight: var(--gd-h-weight); text-transform: var(--gd-h-tt); letter-spacing: var(--gd-h-ls); color: var(--contrast); }
.gd .gd-he-thong-cua-hang__gon-chu p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--contrast); overflow-wrap: anywhere; }
.gd .gd-he-thong-cua-hang__chi-tiet { margin-top: var(--gd-gap); }
.gd .gd-he-thong-cua-hang__chi-tiet summary { padding: 8px 0; font-weight: 700; color: var(--primary); cursor: pointer; }
.gd .gd-he-thong-cua-hang__chi-tiet .gd-he-thong-cua-hang__luoi { margin-top: 8px; }

.gd .gd-he-thong-cua-hang--dai-cta { position: relative; overflow: hidden; border-radius: var(--gd-r-l); background: var(--gd-footer-bg); color: var(--gd-footer-ink); }
.gd .gd-he-thong-cua-hang__nen { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.gd .gd-he-thong-cua-hang--dai-cta.is-co-anh { color: #FFFFFF; }
.gd .gd-he-thong-cua-hang--dai-cta.is-co-anh::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0, 0, 0, .74), rgba(0, 0, 0, .32)); }
.gd .gd-he-thong-cua-hang__cta { position: relative; z-index: 1; display: grid; gap: 6px; padding: 28px 20px; }
@media (min-width: 768px) { .gd .gd-he-thong-cua-hang__cta { padding: 40px 48px; } }
.gd .gd-he-thong-cua-hang__cta-ten { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: inherit; opacity: .85; }
.gd .gd-he-thong-cua-hang__cta-so { margin: 0; font-family: var(--gd-h-font); font-size: clamp(1.5rem, 4vw, 2.25rem); font-weight: var(--gd-h-weight); line-height: 1.15; overflow-wrap: anywhere; }
.gd .gd-he-thong-cua-hang__cta-so strong { font-size: 1.3em; }
.gd .gd-he-thong-cua-hang__cta-phu { margin: 0; max-width: 60ch; font-size: 14px; line-height: 1.5; opacity: .9; }
.gd .gd-he-thong-cua-hang__cta-nut { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.gd .gd-he-thong-cua-hang--dai-cta .gd-nut--vien { color: inherit; border-color: currentColor; }

/* ---------- B14. Tin & kiến thức (thẻ bài của theme gốc .post-card) ---------- */
.gd .gd-tin-tuc__luoi { list-style: none; margin: 0; padding: 0; }
.gd .gd-tin-tuc__luoi > li, .gd .gd-tin-tuc__nho > li { min-width: 0; }
.gd .gd-tin-tuc .post-card { height: 100%; }
.gd .gd-tin-tuc .post-card .media { border-radius: var(--gd-r-m); }
.gd .gd-tin-tuc .post-card :is(h2, h3) { font-size: 15px; line-height: 1.4; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.gd .gd-tin-tuc .post-card--lead :is(h2, h3) { font-size: clamp(18px, 2.2vw, 24px); line-height: 1.3; }
.gd .gd-tin-tuc .post-card p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.gd .gd-tin-tuc__lon-nho, .gd .gd-tin-tuc__lon-dong { display: grid; gap: calc(var(--gd-gap) + 8px); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) {
	.gd .gd-tin-tuc__lon-nho, .gd .gd-tin-tuc__lon-dong { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: start; }
	.gd .gd-tin-tuc__lon-nho.is-mot, .gd .gd-tin-tuc__lon-dong.is-mot { grid-template-columns: minmax(0, 1fr); }
}
.gd .gd-tin-tuc__nho { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--gd-gap); grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; }
.gd .gd-tin-tuc__nho .post-card :is(h2, h3) { font-size: 14px; }
.gd .gd-tin-tuc__dong { list-style: none; margin: 0; padding: 0; display: grid; }
@media (min-width: 768px) { .gd .gd-tin-tuc > .gd-tin-tuc__dong { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; } }
.gd .gd-tin-tuc__dong > li { min-width: 0; border-bottom: 1px solid var(--gd-line); }
.gd .gd-tin-tuc__dong > li:last-child { border-bottom: 0; }
.gd .gd-tin-tuc__dong-bai { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; align-items: start; padding: 10px 0; color: var(--contrast); text-decoration: none; }
.gd .gd-tin-tuc__dong-anh { display: block; aspect-ratio: 4 / 3; border-radius: var(--gd-r-s); overflow: hidden; background: var(--gd-bg-2); }
.gd .gd-tin-tuc__dong-anh img, .gd .gd-tin-tuc__dong-anh .media-placeholder { display: block; width: 100%; height: 100%; object-fit: cover; }
.gd .gd-tin-tuc__dong-chu { display: grid; gap: 4px; min-width: 0; }
.gd .gd-tin-tuc__dong-ten { margin: 0; font-size: 14.5px; font-weight: 600; line-height: 1.4; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.gd .gd-tin-tuc__dong-bai:hover .gd-tin-tuc__dong-ten { color: var(--primary); }
.gd .gd-tin-tuc__dong time { font-size: 12px; color: var(--muted); }
.gd .gd-tin-tuc__them { display: inline-flex; align-items: center; gap: 6px; margin-top: var(--gd-gap); font-size: 14px; font-weight: 600; color: var(--primary); text-decoration: none; }
.gd .gd-tin-tuc__them:hover { text-decoration: underline; }

/* ---------- B15. Nhận ưu đãi / tư vấn ---------- */
.gd .gd-dang-ky {
	display: grid; gap: 14px 24px; align-items: center; padding: 22px 18px;
	background: var(--gd-bg-2); border: 1px solid var(--gd-line); border-radius: var(--gd-r-l);
}
@media (min-width: 768px) {
	.gd .gd-dang-ky--zalo { grid-template-columns: minmax(0, 1fr) auto; padding: 26px 32px; }
	.gd .gd-dang-ky--form { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); padding: 28px 32px; }
}
.gd .gd-dang-ky__ten { margin: 0 0 4px; font-family: var(--gd-h-font); font-size: clamp(1.125rem, 2.2vw, 1.375rem); font-weight: var(--gd-h-weight); text-transform: var(--gd-h-tt); letter-spacing: var(--gd-h-ls); line-height: 1.25; color: var(--contrast); }
.gd .gd-dang-ky__mo-ta { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--muted); }
.gd .gd-dang-ky__nut .gd-nut, .gd .gd-dang-ky__gui { min-height: 44px; }
.gd .gd-dang-ky__form { display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 600px) {
	.gd .gd-dang-ky__form { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; align-items: end; }
	.gd .gd-dang-ky__dong-y { grid-column: 1 / -1; }
}
.gd .gd-dang-ky__o { display: grid; gap: 4px; min-width: 0; font-size: 13px; font-weight: 600; color: var(--contrast); }
.gd .gd-dang-ky__o input {
	box-sizing: border-box; width: 100%; min-height: 44px; padding: 8px 12px; border: 1px solid var(--gd-line); border-radius: var(--gd-r-m);
	background: var(--gd-bg); color: var(--contrast); font: inherit; font-size: 15px; font-weight: 400;
}
.gd .gd-dang-ky__o input:focus { border-color: var(--primary); outline: 2px solid var(--primary); outline-offset: 1px; }
.gd .gd-dang-ky__bat-buoc { color: var(--gd-sale); }
.gd .gd-dang-ky__dong-y { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; line-height: 1.5; color: var(--muted); }
.gd .gd-dang-ky__dong-y input { flex-shrink: 0; width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--primary); }
.gd .gd-dang-ky__dong-y a { color: var(--primary); }
.gd .gd-dang-ky__bao { grid-column: 1 / -1; margin: 0; padding: 10px 14px; border: 1px solid var(--gd-line); border-left-width: 4px; border-radius: var(--gd-r-m); background: var(--gd-bg); font-size: 14px; color: var(--contrast); }
.gd .gd-dang-ky__bao--ok { border-left-color: var(--gd-stock); }
.gd .gd-dang-ky__bao--loi { border-left-color: var(--gd-sale); }

/* ---------- B16. Đoạn giới thiệu SEO thu gọn (JS thêm is-thu-gon; tắt JS → hiện đủ) ---------- */
.gd .gd-doan-seo { padding: 20px 18px; background: var(--gd-bg); border: 1px solid var(--gd-line); border-radius: var(--gd-r-m); }
.gd .gd-doan-seo__ten { margin: 0 0 10px; font-family: var(--gd-h-font); font-size: 18px; font-weight: var(--gd-h-weight); text-transform: var(--gd-h-tt); color: var(--contrast); }
.gd .gd-doan-seo__noi-dung { position: relative; font-size: 14.5px; line-height: 1.7; color: var(--contrast); overflow-wrap: anywhere; }
.gd .gd-doan-seo__noi-dung > :first-child { margin-top: 0; }
.gd .gd-doan-seo__noi-dung > :last-child { margin-bottom: 0; }
.gd .gd-doan-seo__noi-dung :is(h2, h3, h4) { margin: 1.2em 0 .4em; font-size: 16px; line-height: 1.35; }
.gd .gd-doan-seo__noi-dung img { max-width: 100%; height: auto; }
.gd .gd-doan-seo__noi-dung table { display: block; max-width: 100%; overflow-x: auto; }
.gd .gd-doan-seo__noi-dung.is-thu-gon { max-height: var(--gd-thu, 200px); overflow: hidden; }
.gd .gd-doan-seo__noi-dung.is-thu-gon::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 72px; background: linear-gradient(to bottom, transparent, var(--gd-bg)); pointer-events: none; }
.gd .gd-doan-seo__nut {
	box-sizing: border-box; display: flex; align-items: center; margin: 12px auto 0; min-height: 40px; padding: 8px 18px; border: 1px solid var(--gd-line); border-radius: 999px;
	background: var(--gd-bg); color: var(--primary); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
}
.gd .gd-doan-seo__nut[hidden] { display: none; }
.gd .gd-doan-seo__nut:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* ---------- B17. Từ khóa tìm nhiều (điện thoại: chip cuộn ngang) ---------- */
.gd .gd-tu-khoa-hot__ten { margin: 0 0 10px; font-family: var(--gd-h-font); font-size: 16px; font-weight: var(--gd-h-weight); text-transform: var(--gd-h-tt); letter-spacing: var(--gd-h-ls); color: var(--contrast); }
.gd .gd-tu-khoa-hot__ds { list-style: none; margin: 0; padding: 0 0 2px; display: flex; gap: 8px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
.gd .gd-tu-khoa-hot__ds::-webkit-scrollbar { display: none; }
.gd .gd-tu-khoa-hot__ds > li { flex-shrink: 0; }
@media (min-width: 768px) { .gd .gd-tu-khoa-hot__ds { flex-wrap: wrap; overflow: visible; } }
.gd .gd-tu-khoa-hot__chip {
	box-sizing: border-box; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 6px 14px; border: 1px solid var(--gd-line);
	border-radius: 999px; background: var(--gd-bg); color: var(--contrast); font-size: 13.5px; text-decoration: none; white-space: nowrap;
}
.gd .gd-tu-khoa-hot__chip svg { flex-shrink: 0; color: var(--muted); }
.gd .gd-tu-khoa-hot__chip:hover { border-color: var(--primary); color: var(--primary); }
.gd .gd-tu-khoa-hot--dai-toi { padding: 20px 18px; border-radius: var(--gd-r-l); background: var(--gd-footer-bg); color: var(--gd-footer-ink); }
.gd .gd-tu-khoa-hot--dai-toi .gd-tu-khoa-hot__ten { color: inherit; }
.gd .gd-tu-khoa-hot--dai-toi .gd-tu-khoa-hot__chip { background: transparent; color: inherit; border-color: currentColor; border-color: color-mix(in srgb, currentColor 40%, transparent); }
.gd .gd-tu-khoa-hot--dai-toi .gd-tu-khoa-hot__chip svg { color: inherit; }
.gd .gd-tu-khoa-hot--dai-toi .gd-tu-khoa-hot__chip:hover { background: var(--gd-bg); color: var(--contrast); }
/* Trong chân trang (--contrast = chữ chân trang): chip trong suốt theo màu chữ chân trang — nền trắng + chữ sáng thì không đọc
   được (0.3.0b2, mỹ phẩm báo; mọi ngành bật chan_trang.tu_khoa). */
.gd .gd-chan .gd-tu-khoa-hot__chip { background: transparent; color: inherit; border-color: color-mix(in srgb, currentColor 30%, transparent); }
.gd .gd-chan .gd-tu-khoa-hot__chip svg { color: inherit; opacity: .8; }
.gd .gd-chan .gd-tu-khoa-hot__chip:hover { border-color: currentColor; color: inherit; text-decoration: underline; }

/* ---------- B18. Câu chuyện thương hiệu ---------- */
.gd .gd-cau-chuyen { display: grid; gap: 20px; align-items: center; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) {
	.gd .gd-cau-chuyen--anh-trai, .gd .gd-cau-chuyen--anh-phai { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; }
	.gd .gd-cau-chuyen--anh-phai .gd-cau-chuyen__anh { order: 2; }
	.gd .gd-cau-chuyen.is-khong-anh { grid-template-columns: minmax(0, 1fr); }
}
.gd .gd-cau-chuyen__anh { aspect-ratio: 4 / 3; border-radius: var(--gd-r-l); overflow: hidden; background: var(--gd-bg-2); }
.gd .gd-cau-chuyen__anh img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gd .gd-cau-chuyen__anh--og { aspect-ratio: 1200 / 630; }   /* ảnh chia sẻ có chữ: giữ nguyên khung, không cắt */
.gd .gd-cau-chuyen__anh--og img { object-fit: contain; }
.gd .gd-cau-chuyen__chu { min-width: 0; }
.gd .gd-cau-chuyen__nho { display: block; margin-bottom: 6px; font-family: var(--gd-eyebrow-font); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--primary); }
.gd .gd-cau-chuyen__ten { margin: 0 0 12px; font-family: var(--gd-h-font); font-size: clamp(1.375rem, 3vw, 2rem); font-weight: var(--gd-h-weight); text-transform: var(--gd-h-tt); letter-spacing: var(--gd-h-ls); line-height: 1.2; color: var(--contrast); }
.gd .gd-cau-chuyen__doan { margin: 0 0 10px; font-size: 15px; line-height: 1.7; color: var(--muted); }
.gd .gd-cau-chuyen__nut { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.gd .gd-cau-chuyen--dai-toi { padding: 28px 20px; border-radius: var(--gd-r-l); background: var(--gd-footer-bg); color: var(--gd-footer-ink); }
.gd .gd-cau-chuyen--dai-toi :is(.gd-cau-chuyen__nho, .gd-cau-chuyen__ten, .gd-cau-chuyen__doan) { color: inherit; }
.gd .gd-cau-chuyen--dai-toi .gd-cau-chuyen__doan { opacity: .85; }
@media (min-width: 768px) {
	.gd .gd-cau-chuyen--dai-toi { padding: 40px 48px; }
	.gd .gd-cau-chuyen--dai-toi .gd-cau-chuyen__chu { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 32px; align-items: center; }
	.gd .gd-cau-chuyen--dai-toi .gd-cau-chuyen__chu > * { grid-column: 1; }
	.gd .gd-cau-chuyen--dai-toi .gd-cau-chuyen__chu > .gd-cau-chuyen__nut { grid-column: 2; grid-row: 1 / span 4; margin: 0; }
}

/* ---------- B19. Trải nghiệm tại cửa hàng / Lab ---------- */
.gd .gd-dai-trai-nghiem__nho { display: block; margin-bottom: 6px; font-family: var(--gd-eyebrow-font); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--primary); }
.gd .gd-dai-trai-nghiem__ten { margin: 0 0 8px; font-family: var(--gd-h-font); font-size: clamp(1.25rem, 2.6vw, 1.75rem); font-weight: var(--gd-h-weight); text-transform: var(--gd-h-tt); letter-spacing: var(--gd-h-ls); line-height: 1.25; color: var(--contrast); }
.gd .gd-dai-trai-nghiem__mo-ta { margin: 0 0 12px; font-size: 15px; line-height: 1.6; color: var(--muted); }
.gd .gd-dai-trai-nghiem__thiet-bi { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.gd .gd-dai-trai-nghiem__thiet-bi li { padding: 4px 10px; border: 1px solid var(--gd-line); border-radius: 999px; background: var(--gd-bg); font-size: 13px; color: var(--contrast); }
.gd .gd-dai-trai-nghiem__thong-tin { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 6px; font-size: 14px; line-height: 1.45; color: var(--contrast); }
.gd .gd-dai-trai-nghiem__thong-tin li { display: flex; align-items: flex-start; gap: 8px; min-width: 0; overflow-wrap: anywhere; }
.gd .gd-dai-trai-nghiem__thong-tin svg { flex-shrink: 0; margin-top: 1px; color: var(--primary); }
.gd .gd-dai-trai-nghiem__nut { display: flex; flex-wrap: wrap; gap: 10px; }
.gd .gd-dai-trai-nghiem__chu { position: relative; z-index: 1; min-width: 0; }

.gd .gd-dai-trai-nghiem--hai-cot {
	display: grid; gap: 20px; align-items: center; padding: 20px;
	background: var(--gd-bg-2); border: 1px solid var(--gd-line); border-radius: var(--gd-r-l);
}
@media (min-width: 768px) { .gd .gd-dai-trai-nghiem--hai-cot { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 36px; padding: 32px; } }
.gd .gd-dai-trai-nghiem__anh { border-radius: var(--gd-r-m); overflow: hidden; background: var(--gd-bg); }
.gd .gd-dai-trai-nghiem__anh img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.gd .gd-dai-trai-nghiem__anh .gd-dai-trai-nghiem__minh-hoa { box-sizing: border-box; padding: 12px; object-fit: contain; }

.gd .gd-dai-trai-nghiem--dai-anh {
	position: relative; overflow: hidden; display: grid; gap: 16px; align-items: center; padding: 24px 20px;
	border-radius: var(--gd-r-l); background: var(--gd-footer-bg); color: var(--gd-footer-ink);
}
@media (min-width: 768px) { .gd .gd-dai-trai-nghiem--dai-anh { grid-template-columns: minmax(0, 1fr) 260px; padding: 32px 40px; } }
.gd .gd-dai-trai-nghiem--dai-anh.is-co-anh { grid-template-columns: minmax(0, 1fr); color: #FFFFFF; }
.gd .gd-dai-trai-nghiem--dai-anh .gd-dai-trai-nghiem__hinh { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.gd .gd-dai-trai-nghiem--dai-anh.is-co-anh::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0, 0, 0, .72), rgba(0, 0, 0, .2)); }
.gd .gd-dai-trai-nghiem--dai-anh :is(.gd-dai-trai-nghiem__ten, .gd-dai-trai-nghiem__mo-ta) { color: inherit; }
.gd .gd-dai-trai-nghiem--dai-anh .gd-dai-trai-nghiem__mo-ta { opacity: .88; }
.gd .gd-dai-trai-nghiem--dai-anh .gd-dai-trai-nghiem__thiet-bi li { background: transparent; border-color: currentColor; color: inherit; }
.gd .gd-dai-trai-nghiem__phu { display: none; }
@media (min-width: 768px) {
	.gd .gd-dai-trai-nghiem__phu { position: relative; z-index: 1; display: block; }
	.gd .gd-dai-trai-nghiem__phu img { display: block; width: 100%; height: auto; border-radius: var(--gd-r-m); background: var(--gd-bg); }
}

/* ---------- B23. Lối tắt lọc (+ theo-mon, theo-dip, theo-da, theo-do-tuoi, theo-phong, theo-nhu-cau, qua-theo-ngan-sach) ---------- */
.gd .gd-loi-tat__ds { list-style: none; margin: 0; padding: 0; }
.gd .gd-loi-tat__ds > li { min-width: 0; }
.gd .gd-loi-tat__muc { box-sizing: border-box; display: flex; flex-direction: column; align-items: center; gap: 8px; height: 100%; color: var(--contrast); text-align: center; text-decoration: none; }
.gd .gd-loi-tat__muc:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; border-radius: var(--gd-r-m); }
.gd .gd-loi-tat__ten { font-size: 13.5px; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.gd .gd-loi-tat__so { font-size: 12px; color: var(--muted); }
.gd .gd-loi-tat__muc:hover .gd-loi-tat__ten { color: var(--primary); }
.gd .gd-loi-tat__dieu-huong, .gd .gd-combo-goi__dieu-huong { display: flex; justify-content: flex-end; gap: 6px; margin-top: 8px; }

/* the-icon: ô icon tròn + nhãn; điện thoại ~4,3 ô một hàng (cuộn ngang) */
.gd .gd-loi-tat--the-icon .gd-loi-tat__ds { grid-auto-columns: calc((100% - 3 * var(--gd-gap)) / 4.3); }
@media (min-width: 768px) { .gd .gd-loi-tat--the-icon .gd-loi-tat__ds { grid-auto-columns: calc((100% - 5 * var(--gd-gap)) / 6.3); } }
@media (min-width: 1100px) { .gd .gd-loi-tat--the-icon .gd-loi-tat__ds { grid-auto-columns: calc((100% - (var(--gd-cot, 8) - 1) * var(--gd-gap)) / var(--gd-cot, 8)); } }
.gd .gd-loi-tat__hinh {
	display: grid; place-items: center; width: 64px; height: 64px; border: 1px solid var(--gd-line); border-radius: 50%;
	background: var(--gd-bg-2); color: var(--primary); overflow: hidden; transition: transform .2s ease, border-color .2s ease;
}
@media (min-width: 1100px) { .gd .gd-loi-tat__hinh { width: 76px; height: 76px; } }
.gd .gd-loi-tat__hinh img { width: 100%; height: 100%; object-fit: contain; }
.gd .gd-loi-tat__hinh svg { width: 30px; height: 30px; }
.gd .gd-loi-tat__muc:hover .gd-loi-tat__hinh { transform: translateY(-2px); border-color: var(--primary); }

/* the-anh: thẻ ảnh vuông + tên; điện thoại ~2,6 thẻ */
.gd .gd-loi-tat--the-anh .gd-loi-tat__ds { grid-auto-columns: calc((100% - 2 * var(--gd-gap)) / 2.6); }
@media (min-width: 768px) { .gd .gd-loi-tat--the-anh .gd-loi-tat__ds { grid-auto-columns: calc((100% - 3 * var(--gd-gap)) / 4.2); } }
@media (min-width: 1100px) { .gd .gd-loi-tat--the-anh .gd-loi-tat__ds { grid-auto-columns: calc((100% - (var(--gd-cot, 6) - 1) * var(--gd-gap)) / var(--gd-cot, 6)); } }
.gd .gd-loi-tat--the-anh .gd-loi-tat__muc { padding: 0 0 10px; background: var(--gd-bg); border: 1px solid var(--gd-line); border-radius: var(--gd-r-m); overflow: hidden; box-shadow: var(--gd-shadow); }
.gd .gd-loi-tat--the-anh .gd-loi-tat__ten, .gd .gd-loi-tat--the-anh .gd-loi-tat__so { padding: 0 8px; }
.gd .gd-loi-tat__anh { display: grid; place-items: center; width: 100%; aspect-ratio: 1 / 1; background: var(--gd-bg-2); color: var(--primary); overflow: hidden; }
.gd .gd-loi-tat__anh img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gd .gd-loi-tat__anh img[src$=".svg"] { box-sizing: border-box; padding: 10%; object-fit: contain; }
.gd .gd-loi-tat__icon svg { width: 40px; height: 40px; }

/* chip: hàng chip (điện thoại cuộn ngang) */
.gd .gd-loi-tat--chip .gd-loi-tat__ds { display: flex; gap: 8px; padding-bottom: 2px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
.gd .gd-loi-tat--chip .gd-loi-tat__ds::-webkit-scrollbar { display: none; }
@media (min-width: 768px) { .gd .gd-loi-tat--chip .gd-loi-tat__ds { flex-wrap: wrap; overflow: visible; } }
.gd .gd-loi-tat--chip .gd-loi-tat__ds > li { flex-shrink: 0; }
.gd .gd-loi-tat--chip .gd-loi-tat__muc {
	flex-direction: row; gap: 6px; min-height: 40px; padding: 6px 14px; border: 1px solid var(--gd-line); border-radius: 999px;
	background: var(--gd-bg); white-space: nowrap;
}
.gd .gd-loi-tat--chip .gd-loi-tat__muc svg { flex-shrink: 0; color: var(--primary); }
.gd .gd-loi-tat--chip .gd-loi-tat__muc:hover { border-color: var(--primary); }
.gd .gd-loi-tat--chip .gd-loi-tat__so { padding: 0 6px; border-radius: 999px; background: var(--gd-bg-2); }

/* o-lon: 2–4 ô ảnh lớn, tên + "Khám phá" đè lên ảnh; điện thoại lưới 2×2 */
.gd .gd-loi-tat--o-lon .gd-loi-tat__ds { display: grid; gap: var(--gd-gap); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 1100px) { .gd .gd-loi-tat--o-lon .gd-loi-tat__ds { grid-template-columns: repeat(var(--gd-cot, 4), minmax(0, 1fr)); } }
.gd .gd-loi-tat--o-lon .gd-loi-tat__muc { position: relative; display: block; border-radius: var(--gd-r-l); overflow: hidden; background: var(--gd-bg-2); }
.gd .gd-loi-tat--o-lon .gd-loi-tat__anh { aspect-ratio: 4 / 5; }
.gd .gd-loi-tat--o-lon .gd-loi-tat__anh img { transition: transform .35s ease; }
.gd .gd-loi-tat--o-lon .gd-loi-tat__muc:hover .gd-loi-tat__anh img { transform: scale(1.04); }
.gd .gd-loi-tat__phu {
	position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
	padding: 32px 12px 12px; background: linear-gradient(to top, rgba(0, 0, 0, .7), rgba(0, 0, 0, 0)); color: #FFFFFF; text-align: left;
}
.gd .gd-loi-tat--o-lon .gd-loi-tat__ten { font-size: 15px; font-weight: 700; }
.gd .gd-loi-tat--o-lon .gd-loi-tat__muc:hover .gd-loi-tat__ten { color: inherit; }
.gd .gd-loi-tat--o-lon .gd-loi-tat__so { color: inherit; opacity: .85; }
.gd .gd-loi-tat__kham-pha { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }

/* ---------- B24. Combo / gói / giỏ quà ---------- */
.gd .gd-combo-goi__ds {
	list-style: none; margin: 0; padding: 0 0 4px; display: grid; gap: var(--gd-gap); grid-auto-flow: column; grid-auto-columns: 82%;
	overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
}
.gd .gd-combo-goi__ds::-webkit-scrollbar { display: none; }
@media (min-width: 768px) { .gd .gd-combo-goi__ds { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(var(--gd-cot, 3), minmax(0, 1fr)); overflow: visible; } }
.gd .gd-combo-goi__muc { min-width: 0; scroll-snap-align: start; }
.gd .gd-combo-goi__the {
	position: relative; display: flex; flex-direction: column; gap: 8px; height: 100%; box-sizing: border-box; padding: 14px;
	background: var(--gd-bg); border: 1px solid var(--gd-line); border-radius: var(--gd-r-l); box-shadow: var(--gd-shadow);
}
.gd .gd-combo-goi__muc.is-giua .gd-combo-goi__the { border: 2px solid var(--primary); }
.gd .gd-combo-goi__muc-ten { align-self: flex-start; padding: 3px 10px; border-radius: 999px; background: var(--gd-bg-2); font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--contrast); }
.gd .gd-combo-goi__muc.is-giua .gd-combo-goi__muc-ten { background: var(--gd-btn-bg); color: var(--gd-btn-ink); }
.gd .gd-combo-goi__anh { position: relative; display: block; aspect-ratio: var(--gd-img); border-radius: var(--gd-r-m); overflow: hidden; background: #FFFFFF; }
.gd .gd-combo-goi__anh img { display: block; width: 100%; height: 100%; object-fit: contain; }
.gd .gd-combo-goi__ten { margin: 0; font-size: 16px; font-weight: 700; line-height: 1.35; }
.gd .gd-combo-goi__ten a { color: var(--contrast); text-decoration: none; }
.gd .gd-combo-goi__ten a:hover { color: var(--primary); }
.gd .gd-combo-goi__mon { margin: 0; padding: 0 0 0 18px; display: grid; gap: 3px; font-size: 13.5px; line-height: 1.45; color: var(--muted); }
.gd .gd-combo-goi__gia { font-size: 18px; font-weight: 800; color: var(--gd-sale); }
.gd .gd-combo-goi__gia del { margin-right: 4px; font-size: 13px; font-weight: 400; color: var(--muted); }
.gd .gd-combo-goi__gia ins { text-decoration: none; }
.gd .gd-combo-goi__nut { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }
.gd .gd-combo-goi__nut .gd-nut { flex: 1 1 auto; }

/* --- _chung/css/30-danh-muc.css --- */
/* =========================================================
   Nhóm khối DANH MỤC — trang cửa hàng / danh mục / thẻ / tìm kiếm (THU-VIEN-KHOI §C1–C6)
   Bố cục: .gd-ds (main) → .gd-ds-bo-cuc [ ds-bo-loc | .gd-ds-ket-qua ( ds-cong-cu · lưới .gd-ds-luoi · phân trang · ds-xem-them ) ]
   Bộ lọc mobile-first = ngăn kéo trái (JS gốc theme.js mở / đóng qua data-lamka-filters; tắt JS: #bo-loc :target).
   ≥ 1100px: cot-trai = cột trái 252px · thanh-ngang = thanh dính trên lưới, mỗi nhóm 1 nút thả xuống · ngan-keo = vẫn ngăn kéo.
   Chỉ dùng biến --gd-* + biến gốc; mọi luật dưới .gd.
   ========================================================= */

/* ---------- Khung trang ---------- */
.gd .gd-ds-mo-dau { padding-top: 12px; }
.gd .gd-ds-bo-cuc { margin-top: 20px; }
.gd .gd-ds-ket-qua { min-width: 0; }
.gd .gd-ds-ket-qua > * + * { margin-top: 16px; }
.gd .gd-ds-truy-van { margin-top: 12px; }
.gd .gd-ds-luoi { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--gd-gap); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gd .gd-ds-luoi > li { margin: 0; min-width: 0; }
.gd.gd-ds-cot--2 { --gd-ds-cot: 2; }
.gd.gd-ds-cot--3 { --gd-ds-cot: 3; }
.gd.gd-ds-cot--4 { --gd-ds-cot: 4; }
.gd.gd-ds-cot--5 { --gd-ds-cot: 5; }
.gd.gd-ds-cot--6 { --gd-ds-cot: 6; }
@media (max-width: 767px) { .gd.gd-ds-cot-dt--1 .gd-ds-luoi { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 768px) { .gd .gd-ds-luoi { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .gd .gd-ds-luoi { grid-template-columns: repeat(var(--gd-ds-cot, 4), minmax(0, 1fr)); } }
.gd .gd-ds-phan-trang { margin-top: 28px !important; }

/* ---------- Chip dùng chung (danh mục con, nhu cầu, sắp xếp) ---------- */
.gd .gd-ds-chip {
	display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; min-height: 36px; padding: 6px 12px; box-sizing: border-box;
	border: 1px solid var(--gd-line); border-radius: 999px; background: var(--gd-bg); color: var(--contrast);
	font-size: 13.5px; font-weight: 600; line-height: 1.2; text-decoration: none; white-space: nowrap; scroll-snap-align: start;
}
.gd .gd-ds-chip:hover { border-color: var(--primary); color: var(--contrast); }
.gd .gd-ds-chip.is-on { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); font-weight: 700; }
.gd .gd-ds-chip.is-trong { border-style: dashed; color: var(--muted); }
.gd .gd-ds-chip__so { color: var(--muted); font-size: 12px; font-weight: 500; font-variant-numeric: tabular-nums; }
.gd :is(.gd-ds-chip, .gd-loc__muc, .gd-ds-dau__icon, .gd-ds-dau__the, .gd-ds-dau__hang-sx, .gd-ds-chip-loc__muc):focus-visible {
	outline: 2px solid var(--primary); outline-offset: 2px;
}

/* ---------- C1. ds-dau ---------- */
.gd .gd-ds-dau { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; min-width: 0; }
.gd .gd-ds-dau__hang { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.gd .gd-ds-dau__tieu-de {
	margin: 0; font-family: var(--gd-h-font); font-weight: var(--gd-h-weight); text-transform: var(--gd-h-tt); letter-spacing: var(--gd-h-ls);
	font-size: clamp(1.3rem, 3.2vw, 1.85rem); line-height: 1.2; color: var(--contrast); overflow-wrap: anywhere;
}
.gd .gd-ds-dau__so { color: var(--muted); font-size: 14px; font-variant-numeric: tabular-nums; }
.gd .gd-ds-dau__mo-ta { margin: 6px 0 0; max-width: 78ch; color: var(--muted); font-size: 14.5px; line-height: 1.55; }
.gd .gd-ds-dau__banner {
	position: relative; display: grid; align-items: end; min-height: 150px; padding: 20px; box-sizing: border-box;
	border-radius: var(--gd-r-l); overflow: hidden; isolation: isolate; background: var(--gd-banner-bg, var(--gd-footer-bg));
}
.gd .gd-ds-dau__banner-anh { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.gd .gd-ds-dau__banner--anh::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(0, 0, 0, .66) 0%, rgba(0, 0, 0, .18) 75%); }
.gd .gd-ds-dau__banner :is(.gd-ds-dau__tieu-de, .gd-ds-dau__so) { color: #FFFFFF; }
.gd .gd-ds-dau__banner .gd-ds-dau__mo-ta { color: rgba(255, 255, 255, .88); }
.gd .gd-ds-dau__banner--toi .gd-ds-dau__mo-ta { color: rgba(255, 255, 255, .88); }
@media (min-width: 768px) { .gd .gd-ds-dau__banner { min-height: 200px; padding: 28px 32px; } }
/* Ảnh danh mục gần vuông (ảnh kiểu sản phẩm): không phủ kín dải ngang (bị phóng to, cắt mạnh) → ô ảnh bên phải, nền dải tối
   (--gd-banner-bg: Python chọn màu tối đủ tương phản với chữ trắng — chân trang trắng cũng không mất H1). 0.3.0b2. */
.gd .gd-ds-dau__banner--anh-ben { padding-right: calc(34% + 16px); }
.gd .gd-ds-dau__banner--anh-ben .gd-ds-dau__banner-anh {
	inset: 12px 12px 12px auto; z-index: 0; width: 34%; height: calc(100% - 24px); object-fit: contain; padding: 8px; box-sizing: border-box;
	border-radius: var(--gd-r-m); background: #FFFFFF;
}
@media (min-width: 768px) {
	.gd .gd-ds-dau__banner--anh-ben { padding-right: calc(min(30%, 320px) + 48px); }
	.gd .gd-ds-dau__banner--anh-ben .gd-ds-dau__banner-anh { inset: 16px 24px 16px auto; width: min(30%, 320px); height: calc(100% - 32px); }
}

.gd .gd-ds-dau__dong { display: grid; gap: 6px; min-width: 0; }
.gd .gd-ds-dau__nhan { font-size: 12.5px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.gd .gd-ds-dau__cuon {
	position: relative; display: flex; gap: 8px; min-width: 0; overflow-x: auto; overscroll-behavior-x: contain;
	scroll-snap-type: x proximity; scrollbar-width: none; padding: 2px 1px 4px;
}
.gd .gd-ds-dau__cuon::-webkit-scrollbar { display: none; }
@media (min-width: 768px) {
	.gd .gd-ds-dau__dong { display: flex; align-items: center; gap: 12px; }
	.gd .gd-ds-dau__nhan { flex-shrink: 0; }
	.gd .gd-ds-dau__dong > .gd-ds-dau__cuon { flex: 1 1 auto; }
}
@media (min-width: 1100px) { .gd .gd-ds-dau__cuon { flex-wrap: wrap; overflow: visible; } }

/* Danh mục con dạng icon tròn / thẻ ảnh */
.gd :is(.gd-ds-dau__icon, .gd-ds-dau__the) { flex-shrink: 0; color: var(--contrast); text-decoration: none; scroll-snap-align: start; }
.gd .gd-ds-dau__icon { display: grid; justify-items: center; align-content: start; gap: 6px; width: 84px; text-align: center; font-size: 12.5px; font-weight: 600; line-height: 1.3; }
.gd .gd-ds-dau__icon .gd-ds-dau__anh {
	display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; overflow: hidden; box-sizing: border-box;
	background: var(--gd-bg-2); border: 1px solid var(--gd-line);
}
.gd .gd-ds-dau__icon.is-on .gd-ds-dau__anh { border: 2px solid var(--primary); }
.gd .gd-ds-dau__the { display: grid; gap: 6px; width: 148px; font-size: 13.5px; font-weight: 600; line-height: 1.3; }
.gd .gd-ds-dau__the .gd-ds-dau__anh { display: block; aspect-ratio: 4 / 3; border-radius: var(--gd-r-m); overflow: hidden; background: var(--gd-bg-2); border: 1px solid var(--gd-line); }
.gd .gd-ds-dau__the.is-on .gd-ds-dau__anh { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); }
.gd .gd-ds-dau__anh img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gd .gd-ds-dau__anh img.gd-ds-minh-hoa { object-fit: contain; padding: 6%; box-sizing: border-box; }
.gd .gd-ds-dau__chu-cai { font-size: 22px; font-weight: 800; color: var(--muted); }
.gd .gd-ds-dau__dem { color: var(--muted); font-size: 12px; font-weight: 500; }
.gd :is(.gd-ds-dau__icon, .gd-ds-dau__the).is-trong .gd-ds-dau__ten { color: var(--muted); }
.gd :is(.gd-ds-dau__icon, .gd-ds-dau__the):hover .gd-ds-dau__ten { color: var(--primary); }
@media (min-width: 1100px) {
	.gd .gd-ds-dau__con--anh .gd-ds-dau__cuon { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
	.gd .gd-ds-dau__con--anh .gd-ds-dau__the { width: auto; }
}

/* Thương hiệu */
.gd .gd-ds-dau__hang-sx {
	display: grid; place-items: center; flex-shrink: 0; width: 96px; height: 48px; padding: 6px 10px; box-sizing: border-box;
	border: 1px solid var(--gd-line); border-radius: var(--gd-r-m); background: var(--gd-bg); color: var(--contrast);
	font-size: 13px; font-weight: 700; text-align: center; text-decoration: none; line-height: 1.15; overflow: hidden; scroll-snap-align: start;
}
.gd .gd-ds-dau__hang-sx img { max-width: 100%; max-height: 34px; width: auto; height: auto; object-fit: contain; }
.gd .gd-ds-dau__hang-sx:hover, .gd .gd-ds-dau__hang-sx.is-on { border-color: var(--primary); }
.gd .gd-ds-dau__hang-sx.is-on { box-shadow: inset 0 0 0 1px var(--primary); }

/* ---------- C2. ds-bo-loc — nội dung ---------- */
.gd .gd-ds-bo-loc { box-sizing: border-box; font-size: 14px; color: var(--contrast); }
.gd .gd-ds-bo-loc__dau { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.gd .gd-ds-bo-loc__tieu-de { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-weight: 800; font-size: 15px; text-transform: var(--gd-h-tt); letter-spacing: var(--gd-h-ls); }
.gd .gd-ds-bo-loc__dong { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: var(--gd-r-m); color: var(--contrast); }
.gd .gd-ds-bo-loc__chon { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 12px 0 4px; }
.gd .gd-ds-bo-loc__nho { margin: 0; font-size: 12.5px; font-weight: 700; color: var(--muted); }

.gd .gd-loc__nhom { border-bottom: 1px solid var(--gd-line); }
.gd .gd-loc__nhom:last-child { border-bottom: 0; }
.gd .gd-loc__ten { display: flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; list-style: none; font-weight: 700; font-size: 14.5px; }
.gd .gd-loc__ten::-webkit-details-marker { display: none; }
.gd .gd-loc__ten .icon { margin-left: auto; color: var(--muted); transition: transform .2s ease; flex-shrink: 0; }
.gd .gd-loc__nhom[open] > .gd-loc__ten .icon { transform: rotate(180deg); }
.gd .gd-loc__ten:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: var(--gd-r-s); }
.gd .gd-loc__so-chon {
	display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; box-sizing: border-box; border-radius: 999px;
	background: var(--gd-ink); color: var(--gd-bg); font-size: 11.5px; font-weight: 700;
}
.gd .gd-loc__than { padding-bottom: 10px; }
.gd .gd-loc__ds { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.gd .gd-loc__ds.is-thu-gon > li[data-gd-thua] { display: none; }
.gd .gd-loc__ds.is-thu-gon.is-dang-tim > li[data-gd-thua]:not([hidden]) { display: block; }
.gd .gd-loc__muc {
	display: flex; align-items: center; gap: 10px; min-height: 38px; padding: 4px 6px; border-radius: var(--gd-r-s);
	color: var(--contrast); text-decoration: none; line-height: 1.35;
}
.gd .gd-loc__muc:hover { background: var(--gd-bg-2); color: var(--contrast); }
.gd .gd-loc__o { position: relative; width: 18px; height: 18px; flex-shrink: 0; box-sizing: border-box; border: 1.5px solid var(--muted); border-radius: 4px; }
.gd .gd-loc__muc--mot .gd-loc__o { border-radius: 50%; }
.gd .gd-loc__muc.is-on .gd-loc__o { border-color: var(--primary); background: var(--primary); }
.gd .gd-loc__muc.is-on .gd-loc__o::after {
	content: ""; position: absolute; left: 4px; top: 2px; width: 5px; height: 9px; box-sizing: border-box;
	border: solid #FFFFFF; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.gd .gd-loc__muc--mot.is-on .gd-loc__o::after { left: 4px; top: 4px; width: 7px; height: 7px; border: 0; border-radius: 50%; background: #FFFFFF; transform: none; }
.gd .gd-loc__muc.is-on .gd-loc__chu { font-weight: 700; }
.gd .gd-loc__mau { width: 20px; height: 20px; flex-shrink: 0; border-radius: 50%; background: var(--c, var(--gd-bg-2)); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .2); }
.gd .gd-loc__muc.is-on .gd-loc__mau { outline: 2px solid var(--primary); outline-offset: 2px; }
.gd .gd-loc__chu { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.gd .gd-loc__dem { color: var(--muted); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.gd .gd-loc__them { margin: 6px 0 0; padding: 4px 6px; border: 0; background: none; color: var(--primary); font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; }
.gd .gd-loc__tim {
	width: 100%; box-sizing: border-box; min-height: 38px; margin: 0 0 8px; padding: 6px 10px; border: 1px solid var(--gd-line);
	border-radius: var(--gd-r-s); background: var(--gd-bg); color: var(--contrast); font: inherit; font-size: 14px;
}
.gd .gd-loc__gia { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 6px; margin-top: 8px; }
.gd .gd-loc__gia-o input {
	width: 100%; box-sizing: border-box; min-height: 38px; padding: 6px 8px; border: 1px solid var(--gd-line); border-radius: var(--gd-r-s);
	background: var(--gd-bg); color: var(--contrast); font: inherit; font-size: 14px;
}
.gd .gd-loc__gia-gach { color: var(--muted); }
.gd .gd-loc__gia .gd-nut { grid-column: 1 / -1; min-height: 38px; }

/* Chip "Bạn đã chọn" (bộ lọc + thanh sắp xếp) */
.gd .gd-ds-chip-loc { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.gd .gd-ds-chip-loc__muc {
	display: inline-flex; align-items: center; gap: 4px; min-height: 32px; padding: 4px 8px 4px 12px; box-sizing: border-box;
	border: 1px solid var(--primary); border-radius: 999px; background: var(--gd-bg); color: var(--contrast);
	font-size: 13px; font-weight: 600; text-decoration: none; max-width: 100%;
}
.gd .gd-ds-chip-loc__muc span { overflow-wrap: anywhere; }
.gd .gd-ds-chip-loc__muc .icon { color: var(--muted); flex-shrink: 0; }
.gd .gd-ds-chip-loc__xoa { font-size: 13px; font-weight: 700; color: var(--primary); }

/* ---------- C2. ds-bo-loc — ngăn kéo (mặc định) ---------- */
.gd .gd-ds-bo-loc {
	position: fixed; top: 0; bottom: 0; left: 0; z-index: 120; width: min(88vw, 380px); margin: 0 !important;
	display: flex; flex-direction: column; background: var(--gd-bg); border-right: 1px solid var(--gd-line);
	transform: translateX(-102%); visibility: hidden; transition: transform .25s ease, visibility 0s linear .25s;
}
.gd .gd-ds-bo-loc__dau { padding: 6px 6px 6px 16px; border-bottom: 1px solid var(--gd-line); }
.gd .gd-ds-bo-loc__chon { padding: 12px 16px 4px; }
.gd .gd-ds-bo-loc__than { flex: 1; overflow-y: auto; padding: 4px 16px 16px; overscroll-behavior: contain; }
.gd .gd-ds-bo-loc__chan { display: flex; gap: 8px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--gd-line); }
.gd .gd-ds-bo-loc__chan .gd-nut { flex: 1; }
.gd .gd-ds-bo-loc__chan:empty { display: none; }
@media (max-width: 1099px) {
	.gd .gd-ds-bo-loc.is-open, .gd .gd-ds-bo-loc:target { transform: none; visibility: visible; transition: transform .25s ease; box-shadow: 0 0 0 100vmax rgba(3, 5, 9, .55); }
}
.gd .gd-ds-bo-loc--ngan-keo.is-open, .gd .gd-ds-bo-loc--ngan-keo:target { transform: none; visibility: visible; transition: transform .25s ease; box-shadow: 0 0 0 100vmax rgba(3, 5, 9, .55); }

/* ---------- C2. ≥ 1100px: cột trái / thanh ngang ---------- */
@media (min-width: 1100px) {
	.gd .gd-ds-bo-loc--cot-trai, .gd .gd-ds-bo-loc--thanh-ngang {
		position: static; z-index: auto; width: auto; display: block; transform: none; visibility: visible; transition: none;
		border-right: 0; box-shadow: none;
	}
	.gd :is(.gd-ds-bo-loc--cot-trai, .gd-ds-bo-loc--thanh-ngang) :is(.gd-ds-bo-loc__dong, .gd-ds-bo-loc__chan) { display: none; }
	.gd :is(.gd-ds-bo-loc--cot-trai, .gd-ds-bo-loc--thanh-ngang) :is(.gd-ds-bo-loc__dau, .gd-ds-bo-loc__chon, .gd-ds-bo-loc__than) { padding-inline: 0; }
	.gd :is(.gd-ds-bo-loc--cot-trai, .gd-ds-bo-loc--thanh-ngang) .gd-ds-bo-loc__than { overflow: visible; }

	.gd .gd-ds-bo-cuc:has(> .gd-ds-bo-loc--cot-trai) { display: grid; grid-template-columns: 252px minmax(0, 1fr); gap: 24px; align-items: start; }
	.gd .gd-ds-bo-cuc:has(> .gd-ds-bo-loc--cot-trai) > * { margin: 0 !important; }
	.gd .gd-ds-bo-loc--cot-trai { padding: 6px 16px 8px; border: 1px solid var(--gd-line); border-radius: var(--gd-r-m); background: var(--gd-bg); }
	.gd .gd-ds-bo-loc--cot-trai .gd-ds-bo-loc__dau { min-height: 44px; }

	.gd .gd-ds-bo-loc--thanh-ngang {
		position: sticky; top: var(--header-h, 0px); z-index: 30; display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 8px 12px;
		margin-bottom: 8px !important; padding: 10px 0; background: var(--gd-bg); border-bottom: 1px solid var(--gd-line);
	}
	.gd .gd-ds-bo-loc--thanh-ngang .gd-ds-bo-loc__dau { border: 0; }
	.gd .gd-ds-bo-loc--thanh-ngang .gd-ds-bo-loc__chon { display: none; } /* chip đang lọc nằm ở thanh sắp xếp */
	.gd .gd-ds-bo-loc--thanh-ngang .gd-ds-bo-loc__dau { flex: 0 0 auto; }
	.gd .gd-ds-bo-loc--thanh-ngang .gd-ds-bo-loc__than { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; }
	.gd .gd-ds-bo-loc--thanh-ngang .gd-loc__nhom { position: relative; border: 0; }
	.gd .gd-ds-bo-loc--thanh-ngang .gd-loc__ten {
		min-height: 38px; padding: 0 10px 0 14px; border: 1px solid var(--gd-line); border-radius: 999px; background: var(--gd-bg);
		font-weight: 600; font-size: 13.5px; white-space: nowrap;
	}
	.gd .gd-ds-bo-loc--thanh-ngang .gd-loc__nhom[open] > .gd-loc__ten { border-color: var(--primary); }
	.gd .gd-ds-bo-loc--thanh-ngang .gd-loc__than {
		position: absolute; top: calc(100% + 6px); left: 0; z-index: 40; width: max-content; min-width: 240px; max-width: 340px; max-height: 380px;
		overflow-y: auto; padding: 10px; box-sizing: border-box; border: 1px solid var(--gd-line); border-radius: var(--gd-r-m);
		background: var(--gd-bg); box-shadow: var(--gd-shadow);
	}
	.gd .gd-ds-bo-loc--thanh-ngang .gd-loc__nhom:nth-last-child(-n+2) > .gd-loc__than { left: auto; right: 0; }

	.gd .gd-ds-bo-loc--ngan-keo .gd-ds-bo-loc__than { padding-top: 8px; }
}
@supports not selector(:has(*)) {
	@media (min-width: 1100px) {
		.gd.gd-loc--cot-trai .gd-ds-bo-cuc { display: grid; grid-template-columns: 252px minmax(0, 1fr); gap: 24px; align-items: start; }
	}
}

/* ---------- C3. ds-cong-cu ---------- */
.gd .gd-ds-cong-cu { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; min-width: 0; scroll-margin-top: calc(var(--header-h, 56px) + 12px); }
.gd .gd-ds-cong-cu__hang { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; min-width: 0; }
.gd .gd-ds-cong-cu__dem { margin: 0 auto 0 0; color: var(--muted); font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.gd .gd-ds-cong-cu__loc { min-height: 38px; gap: 6px; text-transform: none; }
.gd .gd-ds-cong-cu__so-loc {
	display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; box-sizing: border-box; border-radius: 999px;
	background: var(--gd-ink); color: var(--gd-bg); font-size: 11.5px; font-weight: 700;
}
.gd .gd-ds-cong-cu__sap-xep { display: flex; align-items: center; gap: 8px; min-width: 0; max-width: 100%; }
.gd .gd-ds-cong-cu__sap-xep ul { list-style: none; margin: 0; padding: 2px 1px; display: flex; gap: 6px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.gd .gd-ds-cong-cu__sap-xep ul::-webkit-scrollbar { display: none; }
.gd .gd-ds-cong-cu__sap-xep .gd-ds-chip { min-height: 34px; padding: 4px 12px; font-size: 13px; }
.gd .gd-ds-cong-cu__nhan { flex-shrink: 0; color: var(--muted); font-size: 13px; font-weight: 600; }
.gd .gd-ds-cong-cu__chon label { display: inline-flex; align-items: center; gap: 8px; }
.gd .gd-ds-cong-cu__chon select {
	min-height: 38px; max-width: 220px; padding: 4px 10px; border: 1px solid var(--gd-line); border-radius: var(--gd-r-s);
	background: var(--gd-bg); color: var(--contrast); font: inherit; font-size: 14px;
}
.gd .gd-ds-cong-cu__kieu { display: inline-flex; border: 1px solid var(--gd-line); border-radius: var(--gd-r-s); overflow: hidden; }
.gd .gd-ds-cong-cu__kieu[hidden] { display: none; }
.gd .gd-ds-cong-cu__kieu button { display: inline-grid; place-items: center; width: 38px; height: 36px; border: 0; background: var(--gd-bg); color: var(--muted); cursor: pointer; }
.gd .gd-ds-cong-cu__kieu button[aria-pressed="true"] { background: var(--gd-bg-2); color: var(--contrast); }
@media (max-width: 767px) {
	/* Hàng 1: số sản phẩm · nút Bộ lọc · đổi kiểu; hàng 2: chip sắp xếp cuộn ngang hết bề rộng */
	.gd .gd-ds-cong-cu__dem { flex: 1 1 auto; }
	.gd .gd-ds-cong-cu__sap-xep { order: 5; flex: 1 1 100%; }
	.gd .gd-ds-cong-cu__sap-xep .gd-ds-cong-cu__nhan { display: none; }
}
@media (max-width: 1099px) {
	/* Điện thoại: "Bộ lọc & Sắp xếp" dính trên đầu lưới (đi theo đầu trang khi hiện / ẩn) */
	.gd .gd-ds-cong-cu { position: sticky; top: 0; z-index: 20; margin-inline: -4px; padding: 8px 4px; background: var(--gd-bg); transition: top .25s ease; }
	.gd.header-shown .gd-ds-cong-cu { top: var(--header-h, 56px); }
	.gd.gd-dinh:not(.header-shown) .gd-ds-cong-cu { top: var(--gd-header-con, 0px); }
}
@media (min-width: 1100px) {
	.gd .gd-ds-cong-cu__loc { display: none; }
	.gd .gd-ds-bo-cuc:has(> .gd-ds-bo-loc--ngan-keo) .gd-ds-cong-cu__loc { display: inline-flex; }
	.gd .gd-ds-bo-cuc:has(> .gd-ds-bo-loc--cot-trai) .gd-ds-cong-cu__dang-loc { display: none; } /* chip đang lọc đã ở cột trái */
}
@supports not selector(:has(*)) {
	@media (min-width: 1100px) { .gd.gd-loc--ngan-keo .gd-ds-cong-cu__loc { display: inline-flex; } }
}

/* ---------- C5. ds-xem-them ---------- */
.gd .gd-ds-xem-them { display: grid; justify-items: center; gap: 10px; margin-top: 28px !important; text-align: center; }
.gd .gd-ds-xem-them__dem { margin: 0; color: var(--muted); font-size: 13.5px; font-variant-numeric: tabular-nums; }
.gd .gd-ds-xem-them__thanh { width: min(240px, 80%); height: 4px; border-radius: 999px; background: var(--gd-line); overflow: hidden; }
.gd .gd-ds-xem-them__thanh span { display: block; height: 100%; background: var(--primary); }
.gd .gd-ds-xem-them__nut { min-width: min(320px, 100%); }

/* ---------- C6. ds-seo ---------- */
.gd .gd-ds-seo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; margin-top: var(--gd-section) !important; padding-top: var(--gd-section); border-top: 1px solid var(--gd-line); min-width: 0; }
.gd .gd-ds-seo__noi-dung { position: relative; min-width: 0; color: var(--contrast); font-size: 15px; line-height: 1.7; }
.gd .gd-ds-seo__noi-dung > :first-child { margin-top: 0; }
.gd .gd-ds-seo__noi-dung :is(h2, h3) { font-family: var(--gd-h-font); line-height: 1.3; scroll-margin-top: calc(var(--header-h, 56px) + 16px); }
.gd .gd-ds-seo__noi-dung h2 { font-size: clamp(1.15rem, 2.4vw, 1.4rem); margin: 1.4em 0 .5em; }
.gd .gd-ds-seo__noi-dung h3 { font-size: 1.05rem; margin: 1.2em 0 .4em; }
.gd .gd-ds-seo__noi-dung img { max-width: 100%; height: auto; }
.gd .gd-ds-seo__noi-dung table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; }
.gd .gd-ds-seo__noi-dung :is(th, td) { padding: 8px 10px; border: 1px solid var(--gd-line); text-align: left; vertical-align: top; }
.gd .gd-ds-seo__noi-dung.is-thu-gon { max-height: var(--gd-seo-cao, 260px); overflow: hidden; }
.gd .gd-ds-seo__noi-dung.is-thu-gon::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 96px; pointer-events: none;
	background: linear-gradient(to bottom, transparent, var(--gd-bg));
}
.gd .gd-ds-seo__nut { justify-self: center; min-width: 160px; }
.gd .gd-ds-seo__muc-luc { margin: 0 0 1.2em; padding: 12px 16px; border: 1px solid var(--gd-line); border-radius: var(--gd-r-m); background: var(--gd-bg-2); }
.gd .gd-ds-seo__muc-luc-ten { margin: 0 0 6px; font-weight: 800; }
.gd .gd-ds-seo__muc-luc ol { margin: 0; padding-left: 1.25em; display: grid; gap: 4px; }
.gd .gd-ds-seo__muc-luc a { color: var(--contrast); }
.gd .gd-ds-seo__hoi { margin: 8px 0; border: 1px solid var(--gd-line); border-radius: var(--gd-r-m); background: var(--gd-bg); }
.gd .gd-ds-seo__hoi > summary { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 10px 14px; cursor: pointer; list-style: none; font-weight: 700; line-height: 1.4; }
.gd .gd-ds-seo__hoi > summary::-webkit-details-marker { display: none; }
.gd .gd-ds-seo__hoi > summary::after { content: "+"; margin-left: auto; color: var(--muted); font-size: 20px; line-height: 1; }
.gd .gd-ds-seo__hoi[open] > summary::after { content: "−"; }
.gd .gd-ds-seo__hoi > summary:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.gd .gd-ds-seo__dap { padding: 0 14px 12px; }
.gd .gd-ds-seo__dap > :first-child { margin-top: 0; }
.gd .gd-ds-seo__cua-hang { display: grid; gap: 12px; padding: 16px; border: 1px solid var(--gd-line); border-radius: var(--gd-r-m); background: var(--gd-bg-2); }
.gd .gd-ds-seo__cua-hang-ten { margin: 0; font-family: var(--gd-h-font); font-size: 1.05rem; font-weight: var(--gd-h-weight); text-transform: var(--gd-h-tt); }
.gd .gd-ds-seo__cua-hang ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
@media (min-width: 768px) { .gd .gd-ds-seo__cua-hang ul { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); } }
.gd .gd-ds-seo__ch { display: grid; gap: 3px; font-size: 14px; color: var(--muted); }
.gd .gd-ds-seo__ch strong { color: var(--contrast); }
.gd .gd-ds-seo__ch-nut { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 4px; }
.gd .gd-ds-seo__ch-nut a { display: inline-flex; align-items: center; gap: 4px; min-height: 32px; color: var(--primary); font-weight: 700; text-decoration: none; }

@media (prefers-reduced-motion: reduce) {
	.gd .gd-ds-bo-loc, .gd .gd-ds-cong-cu, .gd .gd-loc__ten .icon { transition: none !important; }
}

/* --- _chung/css/35-the-san-pham.css --- */
/* =========================================================
   Nhóm khối THẺ SẢN PHẨM (THU-VIEN-KHOI §C4) — phần thêm cho thẻ của khung (.gd-the trong 00-nen.css):
   khối bọc trong lưới danh sách, chip phiên bản, dòng kích thước / quy cách, đơn vị sau giá, tag nhỏ, dạng danh sách,
   nút xếp dọc trên điện thoại. Chỉ dùng biến --gd-* + biến gốc; mọi luật dưới .gd.
   ========================================================= */

.gd .gd-the-san-pham { height: 100%; min-width: 0; }
.gd .gd-the { transition: border-color .15s ease, box-shadow .15s ease; }
@media (hover: hover) { .gd .gd-the:hover { border-color: var(--border-strong, var(--gd-line)); } }
.gd .gd-the a:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.gd .gd-the__don-vi { margin-left: 2px; color: var(--muted); font-size: 12px; font-weight: 500; }

/* Chip phiên bản (128GB · 256GB) + tag nhỏ (vị…) */
.gd :is(.gd-the__phien-ban, .gd-the__tag) { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; }
.gd .gd-the__phien-ban li {
	padding: 2px 7px; border: 1px solid var(--gd-line); border-radius: var(--gd-r-s); background: var(--gd-bg-2);
	font-size: 11.5px; font-weight: 700; color: var(--contrast); line-height: 1.35;
}
.gd .gd-the__phien-ban .gd-the__them-so { background: transparent; color: var(--muted); }
.gd .gd-the__tag li { padding: 1px 8px; border-radius: 999px; background: var(--gd-bg-2); font-size: 11.5px; color: var(--muted); line-height: 1.5; }
.gd .gd-the__dong-phu { font-size: 12px; color: var(--muted); line-height: 1.4; }

/* Thẻ hẹp (điện thoại, lưới 4–5 cột có cột lọc): 2 nút không đủ chỗ thì tự xuống dòng, mỗi nút rộng hết thẻ — không tràn ngang */
.gd .gd-the__nut { flex-wrap: wrap; }
.gd .gd-the__nut .gd-nut:not(.gd-nut--icon) { flex: 1 1 auto; }
@media (max-width: 767px) {
	.gd .gd-the__than { padding: 8px 10px 10px; }
	.gd .gd-the__gia { font-size: 15px; }
}

/* Dạng danh sách (nút đổi kiểu của ds-cong-cu): ảnh trái, thân phải */
.gd .gd-ds--danh-sach .gd-ds-luoi { grid-template-columns: minmax(0, 1fr) !important; }
.gd .gd-ds--danh-sach .gd-the { flex-direction: row; }
.gd .gd-ds--danh-sach .gd-the__anh { flex: 0 0 clamp(120px, 30%, 220px); }
.gd .gd-ds--danh-sach .gd-the__than { justify-content: center; }
.gd .gd-ds--danh-sach .gd-the__nut { margin-top: 8px; max-width: 360px; }

@media (prefers-reduced-motion: reduce) {
	.gd .gd-the, .gd .gd-the__anh img { transition: none !important; }
}

/* --- _chung/css/40-san-pham.css --- */
/* =========================================================
   Nhóm khối TRANG SẢN PHẨM (sp-anh, sp-mua, sp-cot-phu, sp-noi-dung, bang-size, sp-danh-gia, sp-mua-kem,
   sp-lien-quan, thanh-mua, sp-thong-tin). Mobile-first; mốc 768 / 1100 / 1280 (bố cục 3 cột).
   Chỉ dùng biến --gd-* + biến gốc; mọi luật dưới .gd. Khối giữ lớp gốc (.pdp, .gallery, .pdp-tabs…) → ghi đè cho đủ mạnh.
   ========================================================= */

/* ---------- Bố cục trên: ảnh | khung mua | cột phụ (san_pham.bo_cuc) ---------- */
.gd .gd-sp__dau { padding-top: 12px; }
.gd .gd-sp-tren { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; margin-top: 12px; align-items: start; }
.gd .gd-sp-tren > * { margin: 0; min-width: 0; }
@media (min-width: 768px) {
	.gd .gd-sp-tren { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 28px; }
	.gd .gd-sp-tren > .gd-sp-cot-phu { grid-column: 1 / -1; }
}
@media (min-width: 1100px) {
	.gd .gd-sp-tren--hai-cot { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); column-gap: 40px; }
	.gd .gd-sp-tren--hai-cot-dinh { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 40px; }
	.gd .gd-sp-tren--ba-cot { column-gap: 32px; }
	/* Cột phụ xuống dưới khung mua (cùng cột 2); ảnh chiếm 2 hàng để không hở khoảng trắng dưới ảnh. */
	.gd .gd-sp-tren > .gd-sp-anh { grid-row: 1 / span 2; position: sticky; top: calc(var(--header-h, 72px) + 16px); } /* ảnh đi theo khi cột mua dài */
	.gd .gd-sp-tren > .gd-sp-cot-phu { grid-column: 2; }
	.gd .gd-sp-tren--hai-cot-dinh > .gd-sp-mua { position: sticky; top: calc(var(--header-h, 72px) + 16px); }
}
@media (min-width: 1280px) {
	/* ba-cot: ảnh 42% · khung mua 36% · cột phụ 22%. */
	.gd .gd-sp-tren--ba-cot { grid-template-columns: minmax(0, 42fr) minmax(0, 36fr) minmax(0, 22fr); column-gap: 28px; }
	.gd .gd-sp-tren--ba-cot > .gd-sp-anh { grid-row: auto; }
	.gd .gd-sp-tren--ba-cot > .gd-sp-cot-phu { grid-column: 3; grid-row: 1; }
}

/* ---------- D1. sp-anh (markup gốc .gallery → JS gốc đổi ảnh / phóng to / vuốt) ---------- */
.gd .gd-sp-anh .gallery { display: grid; gap: 10px; min-width: 0; }
.gd .gd-sp-anh .gallery__main {
	position: relative; aspect-ratio: var(--gd-img, 1 / 1); background: #FFFFFF; border: 1px solid var(--gd-line);
	border-radius: var(--gd-r-l); overflow: hidden;
}
.gd .gd-sp-anh .gallery__main img { width: 100%; height: 100%; object-fit: contain; display: block; }
.gd .gd-sp-anh .gallery__open .icon { background: rgba(255, 255, 255, .92); color: var(--gd-ink); border-color: var(--gd-line); }
.gd .gd-sp-anh .gallery__count { background: rgba(17, 24, 39, .72); color: #FFFFFF; border: 0; }
.gd .gd-sp-anh__giam { position: absolute; top: 12px; left: 12px; z-index: 1; padding: 4px 8px; font-size: 13px; pointer-events: none; }
.gd .gd-sp-anh__trong { display: block; width: 100%; height: 100%; background: var(--gd-bg-2); }
.gd .gd-sp-anh__dai { display: flex; gap: 8px; min-width: 0; }
.gd .gd-sp-anh .thumbs { display: flex; gap: 8px; margin: 0; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.gd .gd-sp-anh .thumbs::-webkit-scrollbar { display: none; }
.gd .gd-sp-anh .thumbs button {
	flex: 0 0 64px; width: 64px; height: 64px; padding: 2px; border: 1px solid var(--gd-line); border-radius: var(--gd-r-m);
	background: #FFFFFF; cursor: pointer;
}
.gd .gd-sp-anh .thumbs img { width: 100%; height: 100%; object-fit: contain; border-radius: calc(var(--gd-r-m) - 2px); }
.gd .gd-sp-anh .thumbs button[aria-pressed="true"] { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }
.gd .gd-sp-anh__video {
	flex: 0 0 64px; width: 64px; height: 64px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
	border-radius: var(--gd-r-m); background: var(--gd-ink); color: var(--gd-bg); font-size: 11px; font-weight: 700; text-decoration: none;
}
.gd .gd-sp-anh__video:hover { filter: brightness(1.15); }
.gd .gd-sp-anh__luoi { display: none; }
.gd .gd-sp-anh__nhanh { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.gd .gd-sp-anh__nhanh a {
	display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border: 1px solid var(--gd-line); border-radius: 999px;
	font-size: 13px; font-weight: 600; color: var(--contrast); text-decoration: none;
}
.gd .gd-sp-anh__nhanh a:hover { border-color: var(--primary); color: var(--primary); }
@media (min-width: 768px) {
	/* trai: ảnh nhỏ xếp dọc bên trái ảnh lớn. */
	.gd .gd-sp-anh--trai .gallery { grid-template-columns: 72px minmax(0, 1fr); align-items: start; }
	.gd .gd-sp-anh--trai .gallery__main { grid-column: 2; grid-row: 1; }
	.gd .gd-sp-anh--trai .gd-sp-anh__dai { grid-column: 1; grid-row: 1; flex-direction: column; }
	.gd .gd-sp-anh--trai .thumbs { flex-direction: column; overflow-x: hidden; overflow-y: auto; max-height: 560px; }
	.gd .gd-sp-anh--trai .thumbs button, .gd .gd-sp-anh--trai .gd-sp-anh__video { flex: 0 0 72px; width: 72px; height: 72px; }
}
@media (min-width: 1100px) {
	/* luoi-2-cot: ảnh lớn + các ảnh còn lại lưới 2 cột (thời trang); điện thoại vẫn là thư viện vuốt. */
	.gd .gd-sp-anh--luoi-2-cot .thumbs { display: none; }
	.gd .gd-sp-anh--luoi-2-cot .gd-sp-anh__luoi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; list-style: none; margin: 10px 0 0; padding: 0; }
	.gd .gd-sp-anh__luoi img { display: block; width: 100%; height: auto; aspect-ratio: var(--gd-img, 1 / 1); object-fit: cover; border-radius: var(--gd-r-m); background: #FFFFFF; }
}

/* Hộp xem video (JS tạo khi bấm — iframe chỉ tải lúc đó) */
.gd .gd-video-hop { width: min(960px, 94vw); max-width: 94vw; padding: 0; border: 0; border-radius: var(--gd-r-m); background: #000000; color: #FFFFFF; overflow: hidden; }
.gd .gd-video-hop::backdrop { background: rgba(0, 0, 0, .82); }
.gd .gd-video-hop__dau { display: flex; justify-content: flex-end; padding: 6px; }
.gd .gd-video-hop__dong { display: inline-grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .14); color: #FFFFFF; cursor: pointer; }
.gd .gd-video-hop__khung, .gd .gd-video { position: relative; aspect-ratio: 16 / 9; background: #000000; }
.gd .gd-video-hop__khung :is(iframe, video), .gd .gd-video :is(iframe, video) { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.gd .gd-video { max-width: 860px; border-radius: var(--gd-r-m); overflow: hidden; }
.gd .gd-video__mo { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 10px; color: #FFFFFF; font-weight: 700; text-decoration: none; }
.gd .gd-video__mo .gd-icon { width: 48px; height: 48px; }

/* ---------- D2. sp-mua (giữ lớp .pdp của gốc → tắt lưới gốc) ---------- */
.gd .gd-sp-mua.pdp { display: flex; flex-direction: column; align-items: stretch; gap: 12px; grid-template-areas: none; } /* gốc: .pdp lưới + align-items:start */
.gd .gd-sp-mua > *, .gd .gd-sp-mua__giua > * { margin: 0; }
.gd .gd-sp-mua__hang { align-self: flex-start; font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--primary); text-decoration: none; }
.gd .gd-sp-mua__bst { font-size: 13px; color: var(--muted); }
.gd .gd-sp-mua__ten {
	font-family: var(--gd-h-font); font-weight: var(--gd-h-weight); font-size: clamp(20px, 2.4vw, 28px); line-height: 1.25;
	letter-spacing: -.01em; color: var(--contrast);
}
.gd .gd-sp-mua__dong-tt { list-style: none; padding: 0; display: flex; flex-wrap: wrap; row-gap: 4px; font-size: 13px; color: var(--muted); }
.gd .gd-sp-mua__dong-tt li + li::before { content: "|"; margin: 0 8px; color: var(--gd-line); }
.gd .gd-sp-mua__dong-tt a { color: var(--primary); font-weight: 600; text-decoration: none; }
.gd .gd-sp-mua__con { color: var(--gd-stock); font-weight: 600; }
.gd .gd-sp-mua__het { color: var(--gd-sale); font-weight: 600; }
.gd .gd-sp-mua__danh-gia { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; font-size: 14px; color: var(--muted); }
.gd .gd-sp-mua__sao { display: inline-flex; align-items: center; gap: 6px; color: var(--contrast); text-decoration: none; }
.gd .gd-sp-mua__sao span { color: var(--muted); }
.gd a.gd-sp-mua__sao:hover span { text-decoration: underline; }
.gd .gd-sp-mua__da-ban { position: relative; }
.gd .gd-sp-mua__tag { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.gd .gd-sp-mua__tag li { padding: 3px 10px; border-radius: 999px; background: var(--gd-bg-2); font-size: 12.5px; font-weight: 600; color: var(--contrast); }
.gd .gd-sp-mua__tom-tat { color: var(--muted); font-size: 15px; }
.gd .gd-sp-mua__tom-tat > :first-child { margin-top: 0; }
.gd .gd-sp-mua__tom-tat > :last-child { margin-bottom: 0; }
.gd .gd-sp-mua__tom-tat ul { padding-left: 1.2em; }

/* Sao: 5 sao vẽ bằng mặt nạ SVG, tô theo --gd-sao (%) — chỉ in khi có đánh giá thật. */
.gd .gd-sao {
	--gd-sao: 0%; display: inline-block; flex-shrink: 0; width: 86px; height: 16px; vertical-align: -2px;
	background: linear-gradient(90deg, var(--gd-star) var(--gd-sao), var(--gd-line) var(--gd-sao));
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 22'%3E%3Cpath d='M12 1l3.1 6.6 7.2.8-5.4 4.9 1.5 7.1L12 16.8l-6.4 3.6 1.5-7.1L1.7 8.4l7.2-.8z'/%3E%3C/svg%3E") left center / 17.2px 16px repeat-x;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 22'%3E%3Cpath d='M12 1l3.1 6.6 7.2.8-5.4 4.9 1.5 7.1L12 16.8l-6.4 3.6 1.5-7.1L1.7 8.4l7.2-.8z'/%3E%3C/svg%3E") left center / 17.2px 16px repeat-x;
}

/* Giá */
.gd .gd-sp-mua__gia { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; padding: 12px 14px; border-radius: var(--gd-r-m); background: var(--gd-bg-2); }
.gd .gd-sp-mua__gia-ban, .gd .gd-sp-mua__gia .price { font-size: clamp(24px, 3vw, 30px); font-weight: 800; line-height: 1.15; color: var(--gd-sale); }
.gd .gd-sp-mua__gia-ban small { font-size: 14px; font-weight: 600; color: var(--muted); }
.gd .gd-sp-mua__gia .price del { font-size: .55em; font-weight: 400; color: var(--muted); margin-right: 6px; }
.gd .gd-sp-mua__gia ins { text-decoration: none; }
.gd .gd-sp-mua__gia-goc { font-size: 14px; color: var(--muted); }
.gd .gd-sp-mua__gia-goc del { color: var(--muted); }
.gd .gd-sp-mua__tiet-kiem { font-size: 13px; font-weight: 700; color: var(--gd-sale); }
.gd .gd-sp-mua__gia .gd-nhan { align-self: center; font-size: 12px; }
.gd .gd-sp-mua__gia--lien-he { background: transparent; padding: 0; }

/* Ưu đãi + mã giảm */
.gd .gd-sp-mua__uu-dai { border: 1px solid var(--gd-line); border-left: 3px solid var(--gd-sale); border-radius: var(--gd-r-m); padding: 10px 14px; background: var(--gd-bg); }
.gd .gd-sp-mua__uu-dai-tieu-de { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-weight: 800; font-size: 14px; color: var(--gd-sale); text-transform: var(--gd-h-tt); }
.gd .gd-sp-mua__uu-dai ul, .gd .gd-sp-mua__cam-ket, .gd .gd-sp-mua__kich-thuoc { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.gd .gd-sp-mua__uu-dai li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 8px; align-items: start; font-size: 14px; }
.gd .gd-sp-mua__uu-dai li .gd-icon { color: var(--gd-stock); margin-top: 2px; }
/* Chỉ dòng chính sách thật (không ưu đãi riêng / sản phẩm cấm khuyến mãi): hộp trung tính, không màu khuyến mãi (0.3.0b2). */
.gd .gd-sp-mua__uu-dai--chinh-sach { border-left-color: var(--gd-line); }
.gd .gd-sp-mua__uu-dai--chinh-sach .gd-sp-mua__uu-dai-tieu-de { color: var(--contrast); }
.gd .gd-sp-mua__so { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--gd-sale); color: #FFFFFF; font-size: 11px; font-weight: 800; }
.gd .gd-sp-mua__ma p { margin: 0 0 6px; font-weight: 700; font-size: 14px; }
.gd .gd-sp-mua__ma ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.gd .gd-sp-mua__ma li { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.gd .gd-ma {
	display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 4px 10px; border: 1px dashed var(--gd-sale);
	border-radius: var(--gd-r-s); background: var(--gd-bg); color: var(--gd-sale); font: inherit; font-size: 13px; cursor: pointer;
}
.gd .gd-sp-mua__kich-thuoc li span { color: var(--muted); }

/* Form giỏ của WooCommerce (biến thể, số lượng, Thêm vào giỏ) + Mua ngay */
.gd .gd-sp-mua__gio form.cart { margin: 0; }
.gd .gd-sp-mua__gio form.cart:not(.variations_form), .gd .gd-sp-mua__gio .woocommerce-variation-add-to-cart { display: flex; flex-wrap: wrap; gap: 10px; align-items: stretch; }
.gd .gd-sp-mua__gio .gd-sp-mua__giua { flex: 1 1 100%; display: flex; flex-direction: column; gap: 12px; margin: 0 0 4px; }
.gd .gd-sp-mua__gio form.variations_form > .gd-sp-mua__giua { margin-bottom: 12px; }
.gd .gd-sp-mua__gio .quantity {
	order: 0; flex: 0 0 124px; display: flex; align-items: stretch; margin: 0; border: 1px solid var(--gd-line); border-radius: var(--gd-btn-radius);
	overflow: hidden; background: var(--gd-bg);
}
.gd .gd-sp-mua__gio .quantity.hidden, .gd .gd-sp-mua__gio .quantity:has(input[type="hidden"]) { display: none; }
.gd .gd-sp-mua__gio .quantity input.qty {
	flex: 1; min-width: 0; width: auto; height: 48px; margin: 0; padding: 0 4px; border: 0; background: transparent; color: var(--contrast);
	font: inherit; font-size: 16px; font-weight: 700; text-align: center; -moz-appearance: textfield; appearance: textfield;
}
.gd .gd-sp-mua__gio .quantity input.qty::-webkit-inner-spin-button, .gd .gd-sp-mua__gio .quantity input.qty::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.gd .gd-sl-nut { flex: 0 0 38px; border: 0; background: var(--gd-bg-2); color: var(--contrast); font: inherit; font-size: 18px; font-weight: 700; cursor: pointer; }
.gd .gd-sl-nut:hover { background: var(--gd-line); }
.gd .gd-sp-mua__gio .single_add_to_cart_button, .gd .gd-sp-mua__gio .lamka-buy-now {
	flex: 1 1 140px; min-height: 50px; margin: 0; padding: 0 16px; border-radius: var(--gd-btn-radius); font: inherit; font-size: 15px; font-weight: 800;
	text-transform: var(--gd-btn-tt); letter-spacing: .02em; white-space: nowrap; cursor: pointer;
}
.gd .gd-sp-mua__gio .single_add_to_cart_button {
	order: 2; border: 1.5px solid var(--gd-ink); background: var(--gd-bg); color: var(--gd-ink);
}
.gd .gd-sp-mua__gio .single_add_to_cart_button:hover { background: var(--gd-ink); color: var(--gd-bg); }
.gd .gd-sp-mua__gio .single_add_to_cart_button:is(.disabled, :disabled) { opacity: .5; cursor: not-allowed; }
.gd .gd-sp-mua__gio .lamka-buy-now { order: 3; border: 1px solid transparent; background: var(--gd-buy-bg, var(--gd-btn-bg)); color: var(--gd-buy-ink, var(--gd-btn-ink)); }
.gd .gd-sp-mua--mua-truoc .gd-sp-mua__gio .lamka-buy-now { order: 1; }
.gd .gd-sp-mua--gio-icon .gd-sp-mua__gio .single_add_to_cart_button {
	flex: 0 0 56px; padding: 0; font-size: 0; position: relative;
}
.gd .gd-sp-mua--gio-icon .gd-sp-mua__gio .single_add_to_cart_button::before {
	content: ""; position: absolute; inset: 0; margin: auto; width: 24px; height: 24px; background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4h2l2.4 11.2a2 2 0 0 0 2 1.6h7.7a2 2 0 0 0 2-1.5L21 8H6.2'/%3E%3Ccircle cx='10' cy='20.5' r='1.3'/%3E%3Ccircle cx='17' cy='20.5' r='1.3'/%3E%3Cpath d='M14 9v5M11.5 11.5h5'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4h2l2.4 11.2a2 2 0 0 0 2 1.6h7.7a2 2 0 0 0 2-1.5L21 8H6.2'/%3E%3Ccircle cx='10' cy='20.5' r='1.3'/%3E%3Ccircle cx='17' cy='20.5' r='1.3'/%3E%3Cpath d='M14 9v5M11.5 11.5h5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.gd .gd-sp-mua__gio table.variations { width: 100%; margin: 0 0 4px; border: 0; border-collapse: collapse; }
.gd .gd-sp-mua__gio table.variations :is(tbody, tr, th, td) { display: block; width: 100%; padding: 0; border: 0; background: none; text-align: left; }
.gd .gd-sp-mua__gio table.variations th { padding-bottom: 6px; font-size: 14px; font-weight: 700; color: var(--contrast); }
.gd .gd-sp-mua__gio table.variations td { position: relative; padding-bottom: 12px; }
.gd .gd-sp-mua__gio table.variations select {
	width: 100%; min-height: 44px; padding: 8px 12px; border: 1px solid var(--gd-line); border-radius: var(--gd-r-m);
	background: var(--gd-bg); color: var(--contrast); font: inherit; font-size: 15px;
}
.gd .gd-sp-mua__gio .reset_variations { display: inline-block; margin-top: 8px; font-size: 13px; color: var(--muted); }
.gd .gd-sp-mua__gio .reset_variations[style*="hidden"] { display: none; }
.gd .gd-sp-mua__gio .woocommerce-variation:empty { display: none; }
.gd .gd-sp-mua__gio .woocommerce-variation { margin-bottom: 10px; }
.gd .gd-sp-mua__gio .woocommerce-variation-price .price { font-size: 20px; font-weight: 800; color: var(--gd-sale); }
.gd .gd-sp-mua__gio.is-gia-tren .woocommerce-variation-price { display: none; }
.gd .gd-sp-mua__gio .stock, .gd .gd-sp-mua .stock { margin: 0 0 8px; font-size: 14px; font-weight: 600; }
.gd .gd-sp-mua .stock.in-stock { color: var(--gd-stock); }
.gd .gd-sp-mua .stock.out-of-stock { color: var(--gd-sale); }
.gd .gd-sp-mua__dong-phu { margin-top: -4px; font-size: 13px; color: var(--muted); }

/* Ô chọn biến thể (JS dựng thay select — select vẫn trong form, ẩn) */
.gd .gd-select-an { position: absolute !important; width: 1px !important; height: 1px !important; min-height: 0 !important; padding: 0 !important; opacity: 0; pointer-events: none; }
.gd .gd-chon { display: flex; flex-wrap: wrap; gap: 8px; }
.gd .gd-chon__o {
	position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 46px; min-height: 42px;
	padding: 6px 12px; border: 1px solid var(--gd-line); border-radius: var(--gd-r-s); background: var(--gd-bg); color: var(--contrast);
	font: inherit; font-size: 14px; font-weight: 600; line-height: 1.2; cursor: pointer; overflow: hidden;
}
.gd .gd-chon__o:hover { border-color: var(--contrast); }
.gd .gd-chon__o[aria-checked="true"] { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); color: var(--primary); }
.gd .gd-chon__o:disabled { opacity: .4; cursor: not-allowed; }
.gd .gd-chon__o.is-het { color: var(--muted); background: var(--gd-bg-2); }
.gd .gd-chon__o.is-het::after {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background: linear-gradient(to top right, transparent calc(50% - .75px), var(--muted) calc(50% - .75px), var(--muted) calc(50% + .75px), transparent calc(50% + .75px));
	opacity: .7;
}
.gd .gd-chon--mau .gd-chon__o { width: 38px; min-width: 38px; height: 38px; min-height: 38px; padding: 0; border-radius: 50%; background: var(--c, var(--gd-bg-2)); box-shadow: inset 0 0 0 3px var(--gd-bg); }
.gd .gd-chon--mau .gd-chon__o[aria-checked="true"] { box-shadow: inset 0 0 0 3px var(--gd-bg), 0 0 0 2px var(--primary); border-color: var(--primary); }
.gd .gd-chon--anh .gd-chon__o { width: 56px; height: 56px; padding: 2px; }
.gd .gd-chon--anh .gd-chon__o img { width: 100%; height: 100%; object-fit: cover; border-radius: calc(var(--gd-r-s) - 1px); }
.gd .gd-chon--gia .gd-chon__o { flex-direction: column; align-items: flex-start; min-width: 112px; padding: 8px 12px; }
.gd .gd-chon__gia { font-size: 12.5px; font-weight: 700; color: var(--gd-sale); }
.gd .gd-chon--bang { flex-direction: column; gap: 6px; }
.gd .gd-chon--bang .gd-chon__o { flex-direction: row; justify-content: space-between; width: 100%; padding: 10px 14px; }
.gd .gd-chon__dang { font-weight: 400; color: var(--muted); }

/* Liên hệ (không giá), nút phụ, có hàng tại, cam kết ngắn, giao hàng */
.gd .gd-sp-mua__lien-he { display: grid; gap: 10px; padding: 12px 14px; border: 1px solid var(--gd-line); border-radius: var(--gd-r-m); }
.gd .gd-sp-mua__lien-he .gd-form { padding: 0; border: 0; }
.gd .gd-lien-he-gia strong { color: var(--gd-sale); font-size: 22px; }
.gd .gd-sp-mua__nut-phu { display: flex; flex-wrap: wrap; gap: 8px; }
.gd .gd-sp-mua__nut-phu .gd-nut { flex: 1 1 120px; min-height: 42px; text-transform: none; font-size: 14px; }
.gd .gd-nut--zalo .gd-icon, .gd .gd-nut--goi .gd-icon, .gd .gd-nut--messenger .gd-icon { flex-shrink: 0; }
.gd .gd-sp-mua__co-tai, .gd .gd-sp-mua__giao-hang { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; color: var(--muted); }
.gd .gd-sp-mua__co-tai .gd-icon, .gd .gd-sp-mua__giao-hang .gd-icon { flex-shrink: 0; margin-top: 1px; color: var(--primary); }
.gd .gd-sp-mua__co-tai strong { color: var(--contrast); }
.gd .gd-sp-mua__cam-ket { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; padding-top: 12px; border-top: 1px solid var(--gd-line); }
.gd .gd-sp-mua__cam-ket li { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; color: var(--contrast); }
.gd .gd-sp-mua__cam-ket li > svg { flex-shrink: 0; color: var(--primary); }
.gd .gd-sp-mua .rent-table { margin: 0 !important; }

/* ---------- D3. sp-cot-phu ---------- */
.gd .gd-sp-cot-phu__trong { display: grid; gap: 14px; }
@media (min-width: 768px) and (max-width: 1099px) { .gd .gd-sp-cot-phu__trong { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } }
@media (min-width: 1100px) { .gd .gd-sp-cot-phu--dinh .gd-sp-cot-phu__trong { position: sticky; top: calc(var(--header-h, 72px) + 16px); } }
.gd .gd-hop { margin: 0; border: 1px solid var(--gd-line); border-radius: var(--gd-r-m); background: var(--gd-bg); overflow: hidden; }
.gd .gd-hop__tieu-de {
	margin: 0; padding: 10px 14px; background: var(--gd-ink); color: var(--gd-bg); font-family: var(--gd-h-font); font-weight: 800; font-size: 14px;
	text-transform: var(--gd-h-tt); letter-spacing: .02em;
}
.gd .gd-hop__tich, .gd .gd-hop__lien-he { list-style: none; margin: 0; padding: 12px 14px; display: grid; gap: 10px; }
.gd .gd-hop__tich li, .gd .gd-hop__lien-he li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 8px; align-items: start; font-size: 14px; color: var(--contrast); overflow-wrap: anywhere; }
.gd .gd-hop__tich .gd-icon { color: var(--gd-stock); margin-top: 1px; }
.gd .gd-hop__lien-he svg { color: var(--primary); margin-top: 1px; }
.gd .gd-hop small { display: block; margin-top: 2px; color: var(--muted); font-size: 12.5px; font-weight: 400; }
.gd .gd-hop a { color: var(--contrast); }
.gd .gd-hop__lien-he a strong { color: var(--gd-sale); font-size: 16px; }
.gd .gd-hop__nut { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 14px 12px; }
.gd .gd-hop__nut .gd-nut { flex: 1 1 100px; min-height: 40px; text-transform: none; }
.gd .gd-hop__dong { display: flex; gap: 8px; margin: 0; padding: 12px 14px; font-size: 14px; }

/* Form nhận tư vấn / báo giá (gửi vào danh sách Yêu cầu của gốc) */
.gd .gd-form { position: relative; display: grid; gap: 10px; margin: 0; padding: 12px 14px 14px; border-top: 1px solid var(--gd-line); }
.gd .gd-form__tieu-de { margin: 0; font-weight: 800; font-size: 14px; }
.gd .gd-form__o { display: grid; gap: 4px; font-size: 13px; color: var(--muted); }
.gd .gd-form :is(input[type="text"], input[type="tel"], input[type="number"]) {
	width: 100%; min-height: 44px; box-sizing: border-box; padding: 8px 12px; border: 1px solid var(--gd-line); border-radius: var(--gd-r-s);
	background: var(--gd-bg); color: var(--contrast); font: inherit; font-size: 15px;
}
.gd .gd-form__dong-y { display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; color: var(--muted); }
.gd .gd-form__dong-y input { margin-top: 2px; }
.gd .gd-form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.gd .gd-form__bao { margin: 0; font-size: 13.5px; font-weight: 600; }
.gd .gd-form__bao--ok { color: var(--gd-stock); }
.gd .gd-form__bao--loi { color: var(--gd-sale); }

/* ---------- D4. sp-noi-dung ---------- */
.gd .gd-sp-noi-dung { margin-top: var(--gd-section); }
.gd .gd-sp-noi-dung__tieu-de {
	margin: 0 0 12px; font-family: var(--gd-h-font); font-weight: var(--gd-h-weight); text-transform: var(--gd-h-tt);
	letter-spacing: var(--gd-h-ls); font-size: clamp(18px, 2vw, 22px); line-height: 1.3; color: var(--contrast);
}
.gd .gd-sp-noi-dung__tabs {
	display: flex; overflow-x: auto; scrollbar-width: none; margin: 0 0 18px; border-bottom: 2px solid var(--gd-line);
}
.gd .gd-sp-noi-dung__tabs::-webkit-scrollbar { display: none; }
.gd .gd-sp-noi-dung__tabs[hidden] { display: none; }
.gd .gd-sp-noi-dung__tabs [role="tab"] {
	flex: 0 0 auto; min-height: 48px; margin-bottom: -2px; padding: 0 16px; border: 0; border-bottom: 3px solid transparent; background: none;
	color: var(--muted); font: inherit; font-size: 14.5px; font-weight: 700; text-transform: var(--gd-h-tt); white-space: nowrap; cursor: pointer;
}
.gd .gd-sp-noi-dung__tabs [role="tab"]:hover { color: var(--contrast); }
.gd .gd-sp-noi-dung__tabs [aria-selected="true"] { color: var(--contrast); border-bottom-color: var(--primary); }
.gd .gd-sp-noi-dung.is-tab .gd-sp-noi-dung__muc > .gd-sp-noi-dung__tieu-de {
	position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap;
}
.gd .gd-sp-noi-dung--tab:not(.is-tab) .gd-sp-noi-dung__muc + .gd-sp-noi-dung__muc { margin-top: 32px; }
.gd .gd-sp-noi-dung__muc[hidden] { display: none; }
.gd details.gd-sp-noi-dung__muc { border-bottom: 1px solid var(--gd-line); }
.gd details.gd-sp-noi-dung__muc:first-of-type { border-top: 1px solid var(--gd-line); }
.gd details.gd-sp-noi-dung__muc > summary {
	list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; cursor: pointer;
}
.gd details.gd-sp-noi-dung__muc > summary::-webkit-details-marker { display: none; }
.gd details.gd-sp-noi-dung__muc > summary::after { content: "+"; flex-shrink: 0; font-size: 22px; line-height: 1; color: var(--muted); }
.gd details.gd-sp-noi-dung__muc[open] > summary::after { content: "–"; }
.gd details.gd-sp-noi-dung__muc .gd-sp-noi-dung__tieu-de { margin: 0; font-size: 16px; }
.gd .gd-sp-noi-dung__than { padding: 0 0 20px; }
.gd .gd-sp-noi-dung--neo .pdp-tabs { margin-bottom: 4px; }
.gd .gd-sp-noi-dung--neo .pdp-section { padding-top: 28px; }
.gd .gd-sp-noi-dung__muc > * + * { margin-top: 16px; }
.gd .gd-prose { max-width: 960px; font-size: 16px; line-height: 1.7; color: var(--contrast); }
.gd .gd-prose img { max-width: 100%; height: auto; border-radius: var(--gd-r-m); }
.gd .gd-prose > :first-child { margin-top: 0; }
.gd .gd-sp-noi-dung .table-scroll, .gd .gd-sp-thong-tin .table-scroll { max-width: 960px; border-color: var(--gd-line); border-radius: var(--gd-r-m); }
.gd .gd-sp-noi-dung .spec-table th, .gd .gd-sp-thong-tin .spec-table th { background: var(--gd-bg-2); color: var(--contrast); font-weight: 600; }
.gd .gd-sp-noi-dung .spec-table :is(th, td), .gd .gd-sp-thong-tin .spec-table :is(th, td) { border-bottom-color: var(--gd-line); }
.gd .gd-ds-tich { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.gd .gd-ds-tich li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 8px; }
.gd .gd-ds-tich .gd-icon { color: var(--gd-stock); margin-top: 3px; }
.gd .gd-trich { max-width: 860px; padding: 14px 16px; border: 1px solid var(--gd-line); border-radius: var(--gd-r-m); background: var(--gd-bg-2); }
.gd .gd-trich p { margin: 0 0 8px; color: var(--muted); }
.gd .gd-trich .gd-trich__tieu-de { color: var(--contrast); font-weight: 700; }
.gd .gd-trich__them { font-weight: 700; color: var(--primary); }
.gd .gd-bai { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) { .gd .gd-bai { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.gd .gd-bai a { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; align-items: center; color: var(--contrast); text-decoration: none; font-weight: 600; }
.gd .gd-bai__anh { display: block; aspect-ratio: 4 / 3; border-radius: var(--gd-r-s); overflow: hidden; background: var(--gd-bg-2); }
.gd .gd-bai__anh img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gd .gd-bai a:hover .gd-bai__ten { color: var(--primary); }
.gd .gd-so-sanh table { min-width: 560px; }
.gd .gd-so-sanh thead th { vertical-align: bottom; font-weight: 700; }
.gd .gd-so-sanh thead a { color: var(--contrast); }
.gd .gd-so-sanh tr.is-khac td { background: color-mix(in srgb, var(--primary) 6%, transparent); }
.gd .gd-hoi-dap { display: grid; gap: 10px; max-width: 860px; padding: 14px 16px; border-radius: var(--gd-r-m); background: var(--gd-bg-2); }
.gd .gd-hoi-dap p { margin: 0; }
.gd .gd-hoi-dap__nut { display: flex; flex-wrap: wrap; gap: 8px; }
.gd .gd-hoi-dap__nut .gd-nut { text-transform: none; }

/* ---------- D5. bang-size ---------- */
.gd .gd-bang-size__mo {
	display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--primary);
	text-decoration: underline; text-underline-offset: 3px;
}
.gd .gd-bang-size__hop {
	width: min(760px, 94vw); max-width: 94vw; max-height: 86vh; padding: 0; border: 0; border-radius: var(--gd-r-l);
	background: var(--gd-bg); color: var(--contrast); box-shadow: 0 24px 70px rgba(0, 0, 0, .3);
}
.gd .gd-bang-size__hop::backdrop { background: rgba(15, 23, 42, .55); }
.gd .gd-bang-size__hop[open] { display: flex; }
.gd .gd-bang-size__khung { display: flex; flex-direction: column; width: 100%; max-height: 86vh; }
.gd .gd-bang-size__dau { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--gd-line); }
.gd .gd-bang-size__dau h2 { margin: 0; font-size: 18px; font-family: var(--gd-h-font); font-weight: var(--gd-h-weight); text-transform: var(--gd-h-tt); }
.gd .gd-bang-size__dong { display: inline-grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 999px; background: var(--gd-bg-2); color: var(--contrast); cursor: pointer; }
.gd .gd-bang-size__tabs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 10px 16px 0; }
.gd .gd-bang-size__tabs [role="tab"] {
	flex: 0 0 auto; min-height: 38px; padding: 0 12px; border: 1px solid var(--gd-line); border-radius: 999px; background: var(--gd-bg);
	color: var(--contrast); font: inherit; font-size: 13px; font-weight: 600; white-space: nowrap; cursor: pointer;
}
.gd .gd-bang-size__tabs [aria-selected="true"] { border-color: var(--primary); background: var(--primary); color: var(--gd-btn-ink); }
.gd .gd-bang-size__than { padding: 14px 16px 18px; overflow: auto; }
.gd .gd-bang-size__bang + .gd-bang-size__bang { margin-top: 28px; }
.gd .gd-bang-size__bang[hidden] { display: none; }
.gd .gd-bang-size__ten { margin: 0 0 10px; font-size: 17px; }
.gd .gd-bang-size__table { min-width: 0; }
.gd .gd-bang-size__table :is(th, td) { padding: 8px 10px; text-align: center; }
.gd .gd-bang-size__table thead th { background: var(--gd-bg-2); color: var(--contrast); font-weight: 700; width: auto; }
.gd .gd-bang-size__table tbody th { color: var(--contrast); font-weight: 700; width: auto; }
.gd .gd-bang-size__ghi-chu { margin: 10px 0 0; font-size: 13px; color: var(--muted); }
.gd .gd-tim-size { max-width: 560px; margin: 12px 0 0; padding: 12px 14px; border-radius: var(--gd-r-m); background: var(--gd-bg-2); }
.gd .gd-tim-size[hidden] { display: none; }
.gd .gd-tim-size__tieu-de { margin: 0 0 8px; font-weight: 700; font-size: 14px; }
.gd .gd-tim-size__o { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; }
.gd .gd-tim-size__o label { display: grid; gap: 4px; flex: 1 1 140px; font-size: 13px; color: var(--muted); }
.gd .gd-tim-size__o input { min-height: 42px; padding: 6px 10px; border: 1px solid var(--gd-line); border-radius: var(--gd-r-s); background: var(--gd-bg); color: var(--contrast); font: inherit; font-size: 15px; }
.gd .gd-tim-size__o .gd-nut { flex: 0 0 auto; min-height: 42px; }
.gd .gd-tim-size__kq { margin: 8px 0 0; font-size: 14px; }
.gd .gd-tim-size__kq:empty { display: none; }
.gd .gd-tim-size__kq strong { color: var(--primary); font-size: 18px; }
@media (max-width: 767px) {
	/* Điện thoại: tấm trượt từ dưới lên. */
	.gd .gd-bang-size__hop { width: 100vw; max-width: 100vw; max-height: 88vh; margin: auto 0 0; border-radius: var(--gd-r-l) var(--gd-r-l) 0 0; }
	.gd .gd-bang-size__khung { max-height: 88vh; }
}

/* ---------- D6. sp-danh-gia (+ danh sách / form đánh giá của WooCommerce) ---------- */
.gd .gd-sp-danh-gia { margin-top: var(--gd-section); }
.gd .gd-dg__tom-tat { display: grid; gap: 16px; max-width: 760px; padding: 16px; border: 1px solid var(--gd-line); border-radius: var(--gd-r-m); background: var(--gd-bg); }
@media (min-width: 768px) { .gd .gd-dg__tom-tat { grid-template-columns: 180px minmax(0, 1fr); align-items: center; } }
.gd .gd-dg__diem { display: grid; justify-items: center; gap: 6px; text-align: center; font-size: 13px; color: var(--muted); }
.gd .gd-dg__diem strong { font-size: 40px; line-height: 1; font-weight: 800; color: var(--contrast); }
.gd .gd-dg__bieu-do { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.gd .gd-dg__bieu-do li { display: grid; grid-template-columns: 40px minmax(0, 1fr) 32px; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.gd .gd-dg__thanh { height: 8px; border-radius: 999px; background: var(--gd-bg-2); overflow: hidden; }
.gd .gd-dg__thanh span { display: block; height: 100%; border-radius: inherit; background: var(--gd-star); }
.gd .gd-dg__trong { margin: 0; color: var(--muted); }
.gd .gd-dg__ds { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.gd .gd-dg__the { padding: 12px 14px; border: 1px solid var(--gd-line); border-radius: var(--gd-r-m); }
.gd .gd-dg__the p { margin: 6px 0; font-size: 14px; }
.gd .gd-dg__ten { font-size: 13px; font-weight: 700; color: var(--muted); }
.gd .gd-dg__nut { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.gd .gd-dg__nut .gd-nut { text-transform: none; }
.gd .gd-dg__them { margin-top: 14px; }
.gd .gd-dg__them > summary { display: inline-flex; min-height: 40px; align-items: center; font-weight: 700; color: var(--primary); cursor: pointer; }
.gd .gd-danh-gia-woo { margin-top: 18px; max-width: 860px; }
.gd .gd-danh-gia-woo :is(.woocommerce-Reviews-title, .woocommerce-noreviews) { display: none; }
.gd .gd-danh-gia-woo .commentlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.gd .gd-danh-gia-woo .commentlist li { margin: 0; padding: 12px 0; border-bottom: 1px solid var(--gd-line); }
.gd .gd-danh-gia-woo .comment-text { margin: 0; }
.gd .gd-danh-gia-woo .meta { margin: 4px 0; font-size: 13px; color: var(--muted); }
.gd .gd-danh-gia-woo .woocommerce-review__author { color: var(--contrast); }
.gd .gd-danh-gia-woo .description p { margin: 0; }
.gd .star-rating { position: relative; display: inline-block; width: 86px; height: 16px; overflow: hidden; font-size: 0; }
.gd .star-rating::before, .gd .star-rating span::before {
	content: ""; position: absolute; inset: 0 auto 0 0; width: 86px; background: var(--gd-line);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 22'%3E%3Cpath d='M12 1l3.1 6.6 7.2.8-5.4 4.9 1.5 7.1L12 16.8l-6.4 3.6 1.5-7.1L1.7 8.4l7.2-.8z'/%3E%3C/svg%3E") left center / 17.2px 16px repeat-x;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 22'%3E%3Cpath d='M12 1l3.1 6.6 7.2.8-5.4 4.9 1.5 7.1L12 16.8l-6.4 3.6 1.5-7.1L1.7 8.4l7.2-.8z'/%3E%3C/svg%3E") left center / 17.2px 16px repeat-x;
}
.gd .star-rating span { position: absolute; inset: 0 auto 0 0; overflow: hidden; }
.gd .star-rating span::before { background: var(--gd-star); }
.gd .gd-danh-gia-woo #review_form_wrapper { margin-top: 18px; padding: 16px; border: 1px solid var(--gd-line); border-radius: var(--gd-r-m); }
.gd .gd-danh-gia-woo .comment-reply-title { display: block; margin-bottom: 10px; font-weight: 800; font-size: 16px; }
.gd .gd-danh-gia-woo .comment-form { display: grid; gap: 12px; }
.gd .gd-danh-gia-woo .comment-form p { margin: 0; }
.gd .gd-danh-gia-woo .comment-form label { display: block; margin-bottom: 4px; font-size: 13px; font-weight: 600; }
.gd .gd-danh-gia-woo .comment-form :is(input[type="text"], input[type="email"], textarea, select) {
	width: 100%; box-sizing: border-box; min-height: 44px; padding: 8px 12px; border: 1px solid var(--gd-line); border-radius: var(--gd-r-s);
	background: var(--gd-bg); color: var(--contrast); font: inherit; font-size: 15px;
}
.gd .gd-danh-gia-woo .comment-form .comment-form-cookies-consent { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; }
.gd .gd-danh-gia-woo .comment-form .comment-form-cookies-consent label { display: inline; font-weight: 400; }
.gd .gd-danh-gia-woo .form-submit input[type="submit"] {
	min-height: 46px; padding: 0 22px; border: 0; border-radius: var(--gd-btn-radius); background: var(--gd-btn-bg); color: var(--gd-btn-ink);
	font: inherit; font-weight: 800; text-transform: var(--gd-btn-tt); cursor: pointer;
}
.gd .gd-danh-gia-woo p.stars { margin: 0; }
.gd .gd-danh-gia-woo p.stars span { display: inline-flex; gap: 4px; }
.gd .gd-danh-gia-woo p.stars a { position: relative; display: inline-block; width: 28px; height: 28px; font-size: 0; text-decoration: none; }
.gd .gd-danh-gia-woo p.stars a::before { content: "★"; position: absolute; inset: 0; font-size: 28px; line-height: 28px; color: var(--gd-line); }
.gd .gd-danh-gia-woo p.stars:hover a::before { color: var(--gd-star); }
.gd .gd-danh-gia-woo p.stars a:hover ~ a::before { color: var(--gd-line); }
.gd .gd-danh-gia-woo p.stars.selected a:not(.active)::before, .gd .gd-danh-gia-woo p.stars.selected a.active::before { color: var(--gd-star); }
.gd .gd-danh-gia-woo p.stars.selected a.active ~ a::before { color: var(--gd-line); }

/* ---------- D7 / D8. sp-mua-kem, sp-lien-quan ---------- */
.gd .gd-sp-mua-kem, .gd .gd-sp-lien-quan, .gd .gd-sp-thong-tin { margin-top: var(--gd-section); }
.gd .gd-sp-lien-quan[hidden] { display: none; }
.gd .gd-sp-lien-quan__dau { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.gd .gd-sp-lien-quan__dau .gd-dau-khoi { flex: 1; min-width: 0; }
.gd .gd-sp-cuon-nut { display: flex; gap: 6px; margin-bottom: calc(var(--gd-gap) + 4px); }

/* ---------- D9. thanh-mua (điện thoại) ---------- */
.gd .gd-thanh-mua {
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; margin: 0 !important;
	padding: 8px var(--wp--style--root--padding-left, 16px) calc(8px + env(safe-area-inset-bottom));
	background: var(--gd-bg); border-top: 1px solid var(--gd-line); box-shadow: 0 -6px 20px rgba(15, 23, 42, .08);
}
.gd .gd-thanh-mua__trong { display: flex; align-items: center; gap: 8px; max-width: 640px; margin: 0 auto; }
/* Giá không xuống dòng giữa số (thử Playground 06/10 ở 390px: "₫1.590.0 / 00" khi có nút "Chọn phân loại" + "Mua ngay"). */
.gd .gd-thanh-mua__gia { flex: 1 1 auto; min-width: 0; font-weight: 800; font-size: 15px; line-height: 1.2; color: var(--gd-sale); white-space: nowrap; }
.gd .gd-thanh-mua__gia del { display: block; font-size: 12px; font-weight: 400; color: var(--muted); }
.gd .gd-thanh-mua__gia small { font-size: 12px; font-weight: 600; color: var(--muted); }
.gd .gd-thanh-mua .gd-nut { flex: 0 0 auto; min-height: 46px; padding: 0 12px; font-size: 13px; white-space: nowrap; }
.gd .gd-thanh-mua .gd-nut--mua { flex: 1 1 auto; max-width: 180px; background: var(--gd-buy-bg, var(--gd-btn-bg)); color: var(--gd-buy-ink, var(--gd-btn-ink)); }
.gd .gd-thanh-mua__icon { flex-direction: column; gap: 0; min-width: 52px; padding: 0 6px !important; font-size: 11px !important; text-transform: none; }
.gd .gd-thanh-mua__icon .gd-icon, .gd .gd-thanh-mua__icon .icon { width: 20px; height: 20px; }
@media (min-width: 1100px) { .gd .gd-thanh-mua { display: none; } }
@media (max-width: 1099px) {
	/* Trang sản phẩm có thanh mua: ẩn thanh đáy menu, chừa chỗ cuối trang, đẩy nút liên hệ nổi lên trên thanh mua. */
	.gd.gd-co-thanh-mua :is(.gd-thanh-day, .bottom-nav) { display: none !important; }
	.gd.gd-co-thanh-mua footer.wp-block-template-part { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
	.gd.gd-co-thanh-mua .float-contact { bottom: calc(76px + env(safe-area-inset-bottom)); }
}

/* ---------- D10. sp-thong-tin ---------- */
.gd .gd-sp-thong-tin__luoi { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 768px) { .gd .gd-sp-thong-tin__luoi { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .gd .gd-sp-thong-tin__luoi { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.gd .gd-sp-thong-tin__luoi li { display: flex; align-items: flex-start; gap: 10px; padding: 12px; border: 1px solid var(--gd-line); border-radius: var(--gd-r-m); background: var(--gd-bg); min-width: 0; }
.gd .gd-sp-thong-tin__luoi svg { flex-shrink: 0; color: var(--primary); }
.gd .gd-sp-thong-tin__luoi small { display: block; color: var(--muted); font-size: 12px; }
.gd .gd-sp-thong-tin__luoi strong { display: block; font-size: 14px; overflow-wrap: anywhere; }
.gd .gd-sp-thong-tin__ghi-chu { margin: 10px 0 0; font-size: 13px; color: var(--muted); }

@media (prefers-reduced-motion: reduce) {
	.gd .gd-sp-anh .gallery__main img, .gd .gd-chon__o { transition: none !important; }
}

/* --- the-thao/giao-dien.css --- */
/* =========================================================
   "Da" ngành THỂ THAO (Site Kit 0.3.0b1) — nối SAU css của _chung, chỉ áp khi body có lớp gd--the-thao.
   Cấu trúc kiểu siêu thị dụng cụ thể thao (tham khảo cách bố trí của Thiên Trường / Kingsport — không chép chữ, ảnh, logo):
   tiêu đề khối IN HOA có vạch đỏ, hàng menu nền than chữ in hoa (rê → nền đỏ), thẻ sản phẩm viền mảnh nổi đỏ khi rê,
   ô danh mục 4:3, cam kết icon tròn đỏ đặc, nút vuông góc chữ in hoa.
   Màu chỉ lấy từ biến (--gd-* do Python tính từ token đỏ #D62828 + than #1F2933, --primary của theme) — không viết tay mã màu ngành.
   Mobile-first, mốc 768 / 1100 như khung. ≤ 300 dòng (KIEN-TRUC §5.11).
   ========================================================= */

/* ---------- Tiêu đề khối: IN HOA + vạch đỏ dưới chữ trên đường kẻ mảnh ---------- */
.gd--the-thao .gd-dau-khoi,
.gd--the-thao .gd-hang-danh-muc__dau,
.gd--the-thao .gd-anh-khach-hang__dau {
	position: relative; padding-bottom: 10px; border-bottom: 1px solid var(--gd-line);
}
.gd--the-thao .gd-dau-khoi__tieu-de,
.gd--the-thao .gd-hang-danh-muc__tieu-de { position: relative; font-size: clamp(1.0625rem, 2vw, 1.375rem); }
.gd--the-thao .gd-dau-khoi__tieu-de::after,
.gd--the-thao .gd-hang-danh-muc__tieu-de::after {
	content: ""; position: absolute; left: 0; bottom: -11px; width: 56px; height: 3px; background: var(--primary);
}
/* Hàng tiêu đề có chip (hàng theo nhóm): vạch đỏ đi theo tiêu đề, không theo chip xuống dòng */
.gd--the-thao .gd-hang-danh-muc__dau { row-gap: 10px; }
@media (max-width: 1099px) {
	.gd--the-thao .gd-hang-danh-muc__dau { padding-bottom: 0; border-bottom: 0; }
	.gd--the-thao .gd-hang-danh-muc__tieu-de::after { bottom: -6px; height: 2px; width: 40px; }
	.gd--the-thao .gd-hang-danh-muc__chip { margin-top: 6px; }
}
.gd--the-thao .gd-dau-khoi__them,
.gd--the-thao .gd-hang-danh-muc__them { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; }
.gd--the-thao .gd-dau-khoi__them::after,
.gd--the-thao .gd-hang-danh-muc__them::after { content: " ›"; }

/* ---------- Đầu trang: hàng menu than, chữ in hoa; rê → nền đỏ; bảng bung có viền đỏ trên ---------- */
@media (min-width: 1100px) {
	.gd--the-thao .gd-dau__hang--menu { box-shadow: inset 0 -3px 0 color-mix(in srgb, var(--primary) 90%, transparent); }
	.gd--the-thao .gd-menu-chinh__muc > .gd-tha__link,
	.gd--the-thao .gd-menu-chinh__muc--khac > .gd-tha__nut { font-weight: 800; letter-spacing: .03em; transition: background-color .15s ease; }
	.gd--the-thao .gd-menu-chinh__muc:not(.gd-menu-chinh__muc--do):hover > .gd-tha__link,
	.gd--the-thao .gd-menu-chinh__muc:not(.gd-menu-chinh__muc--do):focus-within > .gd-tha__link,
	.gd--the-thao .gd-menu-chinh__muc--khac:hover > .gd-tha__nut { background: var(--primary); color: #FFFFFF; }
	.gd--the-thao .gd-menu-chinh__muc--do > .gd-tha__link { background: var(--gd-deal); color: var(--gd-deal-ink); }
	.gd--the-thao .gd-menu-chinh__muc--do:hover > .gd-tha__link { background: var(--gd-deal); }
	.gd--the-thao .gd-dau .gd-tha__bang { border-top: 3px solid var(--primary); border-radius: 0 0 var(--gd-r-m) var(--gd-r-m); }
}
.gd--the-thao .gd-thanh-tren { font-weight: 500; }
.gd--the-thao .gd-menu-nhan { text-transform: uppercase; }

/* ---------- Slider (banner chữ): sọc chéo mờ kiểu sân đấu ---------- */
.gd--the-thao .gd-slider__chu {
	background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, .05) 0 18px, transparent 18px 36px),
		linear-gradient(120deg, var(--primary), color-mix(in srgb, var(--primary) 70%, #000000));
}

/* ---------- Cam kết: icon tròn đỏ đặc, chữ đậm ---------- */
.gd--the-thao .gd-dai-cam-ket__icon { background: var(--primary); color: #FFFFFF; }
.gd--the-thao .gd-dai-cam-ket--the .gd-dai-cam-ket__muc { border-radius: var(--gd-r-s); box-shadow: none; border-color: var(--gd-line); }
.gd--the-thao .gd-dai-cam-ket__tieu-de { font-weight: 800; }
@media (max-width: 767px) {   /* điện thoại 2×2: icon nhỏ, bỏ dòng mô tả cho gọn (kiểu các site thể thao VN) */
	.gd--the-thao .gd-dai-cam-ket--the .gd-dai-cam-ket__muc { gap: 8px; padding: 10px 8px; }
	.gd--the-thao .gd-dai-cam-ket__icon { flex-basis: 34px; width: 34px; height: 34px; }
	.gd--the-thao .gd-dai-cam-ket__icon svg { width: 18px; height: 18px; }
	.gd--the-thao .gd-dai-cam-ket__tieu-de { font-size: 13px; }
	.gd--the-thao .gd-dai-cam-ket__mo-ta { display: none; }
}

/* ---------- Ô danh mục (thẻ ảnh): ảnh 4:3, khung viền, rê → viền đỏ + phóng nhẹ ảnh ---------- */
.gd--the-thao .gd-o-danh-muc--the-anh .gd-o-danh-muc__link {
	gap: 0; border: 1px solid var(--gd-line); border-radius: var(--gd-r-m); overflow: hidden; background: var(--gd-bg);
	transition: border-color .15s ease, box-shadow .15s ease;
}
.gd--the-thao .gd-o-danh-muc--the-anh .gd-o-danh-muc__anh { aspect-ratio: 4 / 3; border-radius: 0; background: var(--gd-bg); }
/* Ảnh danh mục WooCommerce là ảnh vuông đã cắt → contain trong ô 4:3 (không cắt thêm trên / dưới), ảnh sản phẩm nền trắng hợp nền ô */
/* (img tuyệt đối = đúng khung 4:3: trong lưới place-items:center, height:100% không có tác dụng → ảnh vuông cao hơn khung, bị cắt) */
.gd--the-thao .gd-o-danh-muc--the-anh .gd-o-danh-muc__anh img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transition: transform .3s ease; }
.gd--the-thao .gd-o-danh-muc--the-anh .gd-o-danh-muc__ten {
	width: 100%; padding: 9px 8px; font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .02em;
	border-top: 1px solid var(--gd-line);
}
.gd--the-thao .gd-o-danh-muc--the-anh .gd-o-danh-muc__link:hover { border-color: var(--primary); box-shadow: var(--gd-shadow); }
.gd--the-thao .gd-o-danh-muc--the-anh .gd-o-danh-muc__link:hover img { transform: scale(1.04); }
.gd--the-thao .gd-o-danh-muc--the-anh .gd-o-danh-muc__link:hover .gd-o-danh-muc__ten { background: var(--primary); color: #FFFFFF; }

/* ---------- Thẻ sản phẩm: góc nhỏ, viền mảnh, rê → viền đỏ + nổi ---------- */
.gd--the-thao .gd-the { box-shadow: none; border-radius: var(--gd-r-s); transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
@media (hover: hover) {
	.gd--the-thao .gd-the:hover { border-color: var(--primary); box-shadow: var(--gd-shadow); transform: translateY(-2px); }
}
.gd--the-thao .gd-the__hang { letter-spacing: .06em; color: var(--gd-ink); opacity: .7; }
.gd--the-thao .gd-the__ten { font-weight: 600; }
.gd--the-thao .gd-the__gia { font-size: 17px; }
.gd--the-thao .gd-the__chip li { border-radius: 2px; background: var(--gd-bg-2); border-color: transparent; color: var(--gd-ink); font-weight: 600; }
.gd--the-thao .gd-nhan { border-radius: 2px; text-transform: uppercase; letter-spacing: .02em; font-size: 10.5px; }
.gd--the-thao .gd-the__nut .gd-nut { font-size: 12px; letter-spacing: .02em; }

/* ---------- Flash sale: tiêu đề mực, sọc chéo nhẹ trên dải vàng ---------- */
.gd--the-thao .gd-flash-sale--dai-mau {
	background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, .14) 0 14px, transparent 14px 28px);
}
.gd--the-thao .gd-flash-sale__tieu-de { font-style: italic; letter-spacing: .02em; }
.gd--the-thao .gd-flash-sale__so b { background: var(--primary); color: #FFFFFF; }

/* ---------- Tab sản phẩm: gạch chân đỏ thay viên thuốc ---------- */
.gd--the-thao .gd-tab-san-pham__nut { border-radius: var(--gd-r-s); text-transform: uppercase; font-size: 13px; font-weight: 700; }
.gd--the-thao .gd-tab-san-pham__nut.is-chon { background: var(--primary); border-color: var(--primary); color: #FFFFFF; }
.gd--the-thao .gd-tc1-chip { border-radius: var(--gd-r-s); }
.gd--the-thao .gd-tc1-chip.is-chon { background: var(--primary); border-color: var(--primary); color: #FFFFFF; }

/* ---------- Banner chữ của hàng theo nhóm: nền than, chữ trắng, vạch đỏ ---------- */
.gd--the-thao .gd-tc1-banner-chu { background: var(--gd-ink); color: #FFFFFF; border-left: 4px solid var(--primary); border-radius: var(--gd-r-s); }
.gd--the-thao .gd-tc1-banner-chu__ten { color: #FFFFFF; text-transform: uppercase; }
.gd--the-thao .gd-tc1-banner-chu__mo-ta { color: rgba(255, 255, 255, .72); }
.gd--the-thao .gd-tc1-banner-chu__nut { color: #FFFFFF; text-transform: uppercase; }
.gd--the-thao .gd-tc1-banner-chu__anh { border-radius: var(--gd-r-s); }

/* ---------- Chọn theo môn: vòng tròn viền đỏ, rê → nền đỏ ---------- */
.gd--the-thao .gd-loi-tat--the-icon .gd-loi-tat__hinh { background: var(--gd-bg); border: 2px solid color-mix(in srgb, var(--primary) 30%, var(--gd-line)); }
.gd--the-thao .gd-loi-tat--the-icon .gd-loi-tat__muc:hover .gd-loi-tat__hinh { background: var(--primary); border-color: var(--primary); color: #FFFFFF; }
.gd--the-thao .gd-loi-tat__ten { font-weight: 700; }

/* ---------- Thương hiệu: ô logo xám → màu khi rê ---------- */
.gd--the-thao [data-gd="tuong-thuong-hieu"] img { filter: grayscale(1); opacity: .85; transition: filter .2s ease, opacity .2s ease; }
.gd--the-thao [data-gd="tuong-thuong-hieu"] a:hover img { filter: none; opacity: 1; }

/* ---------- Dải "thử tại cửa hàng" + đoạn SEO ---------- */
.gd--the-thao .gd-dai-trai-nghiem { border-radius: var(--gd-r-s); border-left: 6px solid var(--primary); }

/* ---------- Danh mục: H1 vạch đỏ, khung bộ lọc tiêu đề nền than, chip sắp xếp vuông ---------- */
.gd--the-thao .gd-ds-dau__tieu-de { position: relative; padding-left: 14px; }
.gd--the-thao .gd-ds-dau__tieu-de::before { content: ""; position: absolute; left: 0; top: .18em; bottom: .18em; width: 5px; background: var(--primary); }
.gd--the-thao .gd-ds-chip { border-radius: var(--gd-r-s); }
.gd--the-thao .gd-ds-chip.is-on { background: var(--primary); border-color: var(--primary); color: #FFFFFF; box-shadow: none; }
@media (min-width: 1100px) {
	.gd--the-thao .gd-ds-bo-loc--cot-trai .gd-ds-bo-loc__dau { margin: -1px -1px 0; padding: 12px 16px; background: var(--gd-ink); color: #FFFFFF; border-radius: var(--gd-r-s) var(--gd-r-s) 0 0; }
	.gd--the-thao .gd-ds-bo-loc--cot-trai .gd-ds-bo-loc__tieu-de { color: inherit; text-transform: uppercase; letter-spacing: .03em; }
}
.gd--the-thao .gd-loc__ten { text-transform: uppercase; font-size: 13px; letter-spacing: .02em; }

/* ---------- Trang sản phẩm: hộp cột phụ đầu than, giá đỏ lớn, tab gạch đỏ ---------- */
.gd--the-thao .gd-hop { border-radius: var(--gd-r-s); }
.gd--the-thao .gd-hop__tieu-de { letter-spacing: .03em; }
.gd--the-thao .gd-sp-mua__ten { font-size: clamp(1.375rem, 2.4vw, 1.875rem); line-height: 1.2; }
.gd--the-thao .gd-sp-noi-dung__tabs a, .gd--the-thao .gd-sp-noi-dung__tabs button { font-weight: 800; letter-spacing: .02em; }

/* ---------- Chân trang: tiêu đề cột vạch đỏ ---------- */
.gd--the-thao .gd-chan-trang-cot__tieu-de { position: relative; padding-bottom: 8px; }
.gd--the-thao .gd-chan-trang-cot__tieu-de::after { content: ""; position: absolute; left: 0; bottom: 0; width: 32px; height: 2px; background: var(--primary); }

/* ---------- Trang WooCommerce (giỏ hàng, thanh toán, tài khoản): nút vuông góc in hoa như thẻ ---------- */
.gd--the-thao .wc-block-components-button:not(.is-link),
.gd--the-thao .wc-block-grid__product-add-to-cart .wp-block-button__link,
.gd--the-thao .wp-block-woocommerce-product-button .wp-block-button__link,
.gd--the-thao .woocommerce-page .button, .gd--the-thao .woocommerce .button {
	border-radius: var(--gd-btn-radius); text-transform: var(--gd-btn-tt); font-weight: 800; letter-spacing: .02em;
}
.gd--the-thao .wc-block-grid__product-onsale, .gd--the-thao .wc-block-components-product-sale-badge {
	border-color: var(--gd-sale); background: var(--gd-sale); color: #FFFFFF; border-radius: 2px; text-transform: uppercase;
}
.gd--the-thao .wc-block-grid__product-title, .gd--the-thao .wc-block-components-product-name { color: var(--contrast); text-decoration: none; }

/* ---------- Nội dung trang (.prose): theme gốc ghi cứng chữ #D9E1EC (thiết kế cho nền tối) và phần "giao diện sáng" của gốc không
   đổi màu này → ô bảng / chữ trơn trong trang (Bảng size, Hướng dẫn chọn…) gần như trắng trên nền trắng (thử Playground 06/10).
   Lớp phủ không được sửa theme gốc nên chữa ở đây: theo màu chữ chính của giao diện (tối hay sáng đều đúng). ---------- */
.gd--the-thao .prose { color: color-mix(in srgb, var(--contrast) 90%, var(--gd-bg)); }

/* ---------- Giảm chuyển động ---------- */
@media (prefers-reduced-motion: reduce) {
	.gd--the-thao .gd-the, .gd--the-thao .gd-o-danh-muc__anh img { transition: none; transform: none !important; }
}