/*
 * Greway theme — CSS override/bổ sung.
 * Theo quyết định kiến trúc (docs/greway-build-plan.md mục 5.2): asset gốc
 * (Tailwind Play CDN, tailwind.config, font-face) được giữ nguyên và in trực
 * tiếp trong <head> của header.php. File này chỉ chứa:
 *   1. CSS tuỳ biến dùng chung header/footer/mobile-nav/contact-popup — vốn
 *      nằm trong <style> riêng của TỪNG trang HTML gốc (không phải class
 *      Tailwind) — copy nguyên văn 1 lần ở đây để mọi trang WP dùng chung.
 *   2. CSS đè cho phần WordPress sinh khác cấu trúc HTML gốc (ví dụ markup
 *      Elementor/WooCommerce mặc định) — bổ sung dần khi build các giai đoạn
 *      sau, xem ghi chú "GIAI ĐOẠN B/C/D" bên dưới.
 */

/* ── Fix: Elementor `.elementor img{height:auto;max-width:100%}` (mặc định
   plugin, style.min.css của Elementor) có specificity class+element (0,1,1)
   CAO HƠN class Tailwind đơn `h-full`/`h-[99%]` (0,1,0) nên luôn thắng, đè mất
   height mong muốn. Với ảnh THAY THẾ (<img>) — khác div thường — auto-height
   không tự giãn theo top/bottom:0 của `inset-0` như phần tử block bình thường,
   mà co theo tỉ lệ ảnh gốc → ảnh không lấp đầy khung chứa (aspect-ratio box,
   section nền full-bleed...), để lộ khoảng trống. Ảnh hưởng TẤT CẢ ảnh nền/
   thumbnail object-cover trong các widget Elementor riêng của theme (feature-
   banner, image-hero, care-cards, video-showcase, split-image-text, product/
   post carousel...). Mọi ảnh dùng object-cover đều chủ ý muốn lấp đầy khung
   nên revert an toàn ở đây — không đụng ảnh khác (WYSIWYG, gallery WooCommerce
   gốc...) vẫn cần giữ đúng hành vi mặc định height:auto của Elementor. */
.elementor img.object-cover {
	height: 100%;
}

/* feature-banner.php cố ý dùng 99% (không phải 100%) để tránh viền 1px bể ra
   ngoài bo góc/khung ở vài trình duyệt — giữ đúng con số gốc, specificity của
   selector 2-lớp này cao hơn rule chung ở trên nên áp dụng đúng cho riêng nó. */
.elementor-widget-greway-feature-banner img.object-cover {
	height: 99%;
}

/* ── single-product-ebike.php (detail.html gốc) — color swatch + bike stage.
   Copy nguyên từ <style> riêng của detail.html. ── */
.color-swatch {
	position: relative;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	cursor: pointer;
	border: 1px solid rgba(29, 29, 29, 0.12);
	transition: box-shadow 0.2s ease, outline-color 0.2s ease;
}
.color-swatch.active { outline: 2px solid #0d0d0d; outline-offset: 3px; }
.color-swatch:hover { box-shadow: 0 8px 16px rgba(20, 20, 20, 0.12); }
.color-swatch::before,
.color-swatch::after {
	position: absolute;
	left: 50%;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.18s ease, transform 0.18s ease;
	z-index: 20;
}
.color-swatch::before {
	content: attr(data-tooltip);
	bottom: calc(100% + 10px);
	transform: translate(-50%, 4px);
	white-space: nowrap;
	padding: 7px 10px;
	border-radius: 8px;
	background: rgba(20, 20, 20, 0.92);
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
	box-shadow: 0 10px 24px rgba(20, 20, 20, 0.18);
}
.color-swatch::after {
	content: "";
	bottom: calc(100% + 8px);
	margin-left: -4px;
	transform: translateY(4px) rotate(45deg);
	width: 8px;
	height: 8px;
	background: rgba(20, 20, 20, 0.92);
}
.color-swatch:hover::before, .color-swatch:focus-visible::before { opacity: 1; transform: translate(-50%, 0); }
.color-swatch:hover::after, .color-swatch:focus-visible::after { opacity: 1; transform: translateY(0) rotate(45deg); }

.g26-bike-stage { position: relative; width: 100%; height: 100%; background: transparent; overflow: hidden; isolation: isolate; }
.g26-bike-stage img { pointer-events: none; user-select: none; }
/* .g26-bike-base đã bỏ (không còn lớp nền riêng — build plan mục 9k), chỉ
   còn .g26-bike-color; giữ chung 1 rule vì cấu trúc thuộc tính giống hệt. */
.g26-bike-color {
	position: absolute; inset: 0; width: 100%; height: 100%;
	object-fit: contain; object-position: center;
	transition: opacity 0.35s ease, transform 0.5s ease, filter 0.35s ease;
	opacity: 0; transform: scale(0.985); filter: saturate(0.9);
}
.g26-bike-color.active { opacity: 1; transform: scale(1); filter: saturate(1); }
.g26-bike-stage:hover .g26-bike-color.active { transform: scale(1.025); }

/* Spinner loading cho cột "Compare" chèn qua AJAX — single-product-ebike.php */
@keyframes greway-spin { to { transform: rotate(360deg); } }

/* Sub-nav sticky (Overview/Design/Battery/Care/Specs) — single-product-ebike.php */
:root {
	--greway-header-bottom: 64px;
	--greway-product-subnav-height: 56px;
}
#product-subnav { top: var(--greway-header-bottom); }
.product-subnav-link[aria-current="true"] { color: #fff; border-bottom-color: #fff; }
.no-scrollbar { scrollbar-width: none; -ms-overflow-style: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }
.product-subnav-fade {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 30px;
	pointer-events: none;
	background: linear-gradient(90deg, rgba(20, 20, 20, 0), #141414 82%);
	opacity: 0;
	transition: opacity 0.2s ease;
}
.product-subnav-fade.is-visible { opacity: 1; }
#product-intro, #design, #battery, #specs, #care {
	scroll-margin-top: calc(var(--greway-header-bottom) + var(--greway-product-subnav-height) + 2px);
}
@media (min-width: 1024px) {
	.product-subnav-fade { display: none; }
}

/* Zalo/Facebook floating widget — thu nhỏ lại so với bản gốc (nhận xét: quá
   to, chiếm nhiều diện tích/khó bấm đúng nút khác gần đó). Đây là nơi DUY
   NHẤT quyết định kích thước icon — floating-order.js KHÔNG còn đặt lại
   width/height/flex ở đây nữa (bài học build plan mục 9n: "flex" đặt trong
   #zalo-widget vốn là flex-col nên flex-basis điều khiển HEIGHT — trục
   chính — bất kể height!important riêng có thắng hay không, khiến icon bị
   kéo dẹt 40×56 thay vì 40×40; ép luôn flex ở đây để chặn hẳn kiểu lỗi này
   tái diễn nếu có chỗ khác lỡ đặt lại flex-basis sau này). */
#zalo-widget { gap: 8px !important; }
/* 2 icon giờ là thẻ <a> (trước là <span>) — xem build plan mục 9o, tách
   Facebook/Zalo ra 2 link riêng thay vì gộp chung 1 <a> trỏ nhầm cả 2 về
   Zalo. */
#zalo-widget > a:first-child, #zalo-widget > a:nth-child(2) {
	width: 40px !important;
	height: 40px !important;
	flex: 0 0 40px !important;
}
#zalo-widget .font-semibold { font-size: 12px !important; }

/* Dealer locator (trang /dai-ly/, widget Greway — Dealer Locator) — TOÀN BỘ
   khối CSS này copy nguyên từ <style> riêng trong dealers.html gốc, vốn bị
   bỏ sót hoàn toàn lúc build (chỉ chép đúng HTML/JS, quên phần <style> —
   xem build plan mục 9s). Thiếu khối này khiến: khung bản đồ cao vọt theo
   chiều cao cột danh sách bên trái (do CSS Grid mặc định kéo dãn hàng bằng
   nhau) thay vì đúng 1 chiều cao cố định, để lộ khoảng trống xám lớn dưới
   bản đồ thật; danh sách đại lý không có style hover/active/border; nút
   "đang cập nhật" ẩn không thật (mục 9r) — nay dùng lại đúng rule gốc
   ".map-shell [hidden]" tổng quát hơn thay vì rule riêng cho từng #id. */
.dealer-panel { display: flex; min-height: 0; flex-direction: column; overflow: hidden; border: 1px solid rgba(29,29,29,.12); border-radius: 16px; background: #fff; }
.dealer-controls { flex: none; border-bottom: 1px solid rgba(29,29,29,.1); padding: 16px; background: #fff; }
.dealer-list-wrap { min-height: 0; flex: 1; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #bdbdbd transparent; }
.dealer-row { display: grid; grid-template-columns: 30px minmax(0,1fr) auto; gap: 12px; align-items: center; width: 100%; cursor: pointer; border-bottom: 1px solid rgba(29,29,29,.1); padding: 13px 16px; background: #fff; transition: background-color .2s, color .2s; }
.dealer-row:last-child { border-bottom: 0; }
.dealer-row:hover, .dealer-row:focus-visible { background: #f5f8f6; outline: none; }
.dealer-row.active { background: #e8f4ed; }
.dealer-index { align-self: start; padding-top: 2px; color: #108843; font-size: 11px; font-weight: 700; }
.dealer-row-arrow { color: #108843; font-size: 20px; transition: transform .2s; }
.dealer-row.active .dealer-row-arrow { transform: translateX(4px); }
#dealers-map, #dealers-map-fallback { width: 100%; height: 100%; border: 0; }
#dealers-map-fallback { transition: opacity .25s ease; }
.map-shell.map-changing #dealers-map-fallback { opacity: .35; }
.map-shell [hidden] { display: none !important; }
@media (max-width: 639px) { .dealer-row { grid-template-columns: 24px minmax(0,1fr); gap: 10px; padding: 13px 14px; } .dealer-row-meta { grid-column: 2; } }
@media (max-width: 1023px) { .dealer-panel { height: min(560px, 72svh); } .map-shell { margin-top: 20px; aspect-ratio: 4 / 3; } }
@media (min-width: 1024px) { .dealer-locator-shell { height: clamp(520px, 44vw, 600px); } .map-shell { height: 100%; } }

/* Popup "Design in details" — copy nguyên từ <style> riêng detail.html. */
#design-popup { opacity: 0; pointer-events: none; transition: opacity 0.3s ease; }
#design-popup.open { opacity: 1; pointer-events: auto; }

/* Modal video (feature carousel) — YouTube embed, xem ebike-detail.js. */
.ebike-video-modal {
	position: fixed; inset: 0; z-index: 200; display: none;
	align-items: center; justify-content: center; padding: 24px;
	background: rgba(0, 0, 0, 0.85);
}
.ebike-video-modal.open { display: flex; }
.ebike-video-modal-inner { position: relative; width: min(420px, 100%); aspect-ratio: 9/16; }
.ebike-video-modal-inner iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: 12px; }
.ebike-video-modal-close {
	position: absolute; top: -44px; right: 0; width: 36px; height: 36px; border-radius: 999px;
	background: #fff; color: #1d1d1d; display: flex; align-items: center; justify-content: center; cursor: pointer; border: 0;
}

/* ── Header nav căn giữa độc lập với logo/nút phải (đúng CSS gốc) ── */
#header-top > div,
#header-bottom > div {
	position: relative;
}

@media (min-width: 1024px) {
	#header-top > div > nav,
	#header-bottom > div > nav {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
	}
}

/* ── Navbar top ── */
#header-top {
	transition:
		transform 0.3s ease,
		background-color 0.3s ease,
		box-shadow 0.3s ease,
		color 0.3s ease;
	background-color: transparent;
	color: #141414;
}

#header-top.scrolled-down {
	transform: translateY(0);
}

#header-top.is-solid {
	background-color: #141414;
	color: #fff;
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08);
}

#header-top .h-nav-link {
	color: rgba(20, 20, 20, 0.72);
	transition: color 0.2s, opacity 0.2s;
}

#header-top .h-nav-link.active {
	color: #141414;
}

#header-top.is-solid .h-nav-link {
	color: rgba(255, 255, 255, 0.72);
}

#header-top.is-solid .h-nav-link.active {
	color: #fff;
}

/* Trang chủ mới mở đầu bằng hero ảnh tối. Giữ logo/nav trắng khi header đang
   nổi trên ảnh; sau khi qua hero, logo trở về màu thương hiệu trên nền đặc. */
body.home #header-top:not(.is-solid) {
	color: #fff;
}

#header-top .h-logo-fill {
	transition: fill 0.3s ease;
}

body.home #header-top:not(.is-solid) .h-logo-fill {
	fill: #fff;
}

#header-top.is-solid .h-logo-fill {
	fill: #108843;
}

body.home #header-top:not(.is-solid) .h-nav-link {
	color: rgba(255, 255, 255, 0.72);
}

body.home #header-top:not(.is-solid) .h-nav-link.active {
	color: #fff;
}

/* Chỉ tạo một nền mờ rất nhẹ quanh cụm menu giữa khi header còn nổi trên
   hero. Khi cuộn qua hero, .is-solid xuất hiện nên capsule tự biến mất. */
@media (min-width: 1024px) {
	body.home #header-top:not(.is-solid) > div > nav {
		padding: 8px 14px;
		border: 1px solid rgba(255, 255, 255, 0.1);
		border-radius: 9999px;
		background: rgba(13, 13, 13, 0.14);
		-webkit-backdrop-filter: blur(8px);
		backdrop-filter: blur(8px);
		box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
	}
}

@media (max-width: 1023px) {
	body.home #header-top:not(.is-solid) #hamburger-btn {
		color: #fff !important;
	}
}

#header-top:not(.is-solid) .contact-header-btn {
	background: #141414;
	color: #fff;
}

#header-top:not(.is-solid) .contact-header-btn:hover {
	background: #2a2a2a;
}

/* Header nền đen ngay từ đầu cho MỌI trang TRỪ trang chủ — copy nguyên từ
   <style> riêng "Header dark theme for non-home pages" có trong ebikes.html/
   accessories.html/detail.html/accessory-detail.html/news.html/news-detail.html
   gốc (index.html KHÔNG có khối này — chỉ trang chủ mới trong suốt lúc đầu,
   đổi màu khi cuộn qua hero). `.home` là class WP tự thêm vào <body> khi
   is_front_page() true, không cần PHP riêng. */
body:not(.home) #header-top {
	background-color: #141414 !important;
	color: #fff !important;
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08);
}
body:not(.home) #header-top .h-nav-link { color: rgba(255, 255, 255, 0.72) !important; }
body:not(.home) #header-top .h-nav-link.active { color: #fff !important; }
body:not(.home) #header-top .h-logo-color,
body:not(.home) #header-top #hamburger-btn { color: #fff !important; }
body:not(.home) #header-top .contact-header-btn { background: #fff !important; color: #141414 !important; }
body:not(.home) #header-top .contact-header-btn:hover { background: rgba(255, 255, 255, 0.88) !important; }

/* ── Header bottom (sticky mini-nav sau khi qua hero — trang không phải trang chủ) ── */
#header-bottom {
	transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
	transform: translateY(calc(-100% - 4px));
	background-color: #141414;
}

#header-bottom.visible {
	transform: translateY(0);
}

/* ── Zalo chat widget (ẩn cho tới khi qua khỏi hero) ── */
#zalo-widget {
	opacity: 0;
	transform: translateY(16px);
	pointer-events: none;
	transition: opacity 0.35s ease, transform 0.35s ease;
}

#zalo-widget.visible {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}

/* ── Mobile nav ── */
#mobile-nav {
	transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
}

#mobile-nav.open {
	transform: translateX(0);
	opacity: 1;
	pointer-events: auto;
}

#mobile-nav.closed {
	transform: translateX(100%);
	opacity: 0;
	pointer-events: none;
}

/* ── Nav link hover underline ── */
.h-nav-link {
	position: relative;
}

.h-nav-link::after {
	content: "";
	position: absolute;
	bottom: -3px;
	left: 0;
	width: 0;
	height: 1.5px;
	background: currentColor;
	transition: width 0.25s ease;
}

.h-nav-link:hover::after {
	width: 100%;
}

/* ── Language toggle (thay cho phần JS tự bọc <button> trong i18n.js gốc — xem
   functions.php greway_language_toggle(); CSS giữ nguyên giá trị JS gốc từng
   inject qua <style> động) ── */
.greway-language-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 30px;
	padding: 6px;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: inherit;
	cursor: pointer;
	transition: background 0.2s ease;
}

.greway-language-toggle:hover {
	background: rgba(115, 115, 115, 0.12);
}

.greway-language-toggle svg {
	display: block !important;
	width: 22px !important;
	height: 16px !important;
	flex: none;
}

@media (max-width: 1023px) {
	.greway-language-toggle {
		width: 32px;
		height: 28px;
		padding: 5px;
	}
}

/* ── Contact header button ── */
.contact-header-btn {
	background: white;
	color: #1d1d1d;
	border: none;
	border-radius: 9999px;
	padding: 10px 20px;
	font-size: 15px;
	font-weight: 500;
	letter-spacing: -0.4px;
	cursor: pointer;
	font-family: inherit;
	white-space: nowrap;
	line-height: 1;
	align-items: center;
	justify-content: center;
}

.contact-header-btn:hover {
	background: rgba(255, 255, 255, 0.88);
}

/* ── Contact popup ── */
#contact-popup {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 200;
	align-items: center;
	justify-content: center;
	padding: 16px;
}

#contact-popup.open {
	display: flex;
}

#contact-overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.65);
	backdrop-filter: blur(4px);
}

.contact-card {
	position: relative;
	width: 100%;
	max-width: 780px;
	background: #0d0e0e;
	border-radius: 32px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	max-height: 90vh;
	overflow-y: auto;
}

.contact-header {
	position: relative;
	height: 172px;
	flex-shrink: 0;
	overflow: hidden;
}

.contact-header-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.contact-header-gradient {
	position: absolute;
	inset: 0;
	background: linear-gradient(to right, #1d1d1d 30%, rgba(29, 29, 29, 0) 70%);
}

.contact-title {
	position: absolute;
	left: 50px;
	top: 50px;
	font-size: clamp(36px, 8vw, 72px);
	font-weight: 400;
	line-height: 1;
	color: #00ff7b;
	letter-spacing: -1.8px;
	white-space: nowrap;
}

.contact-close-btn {
	position: absolute;
	top: 20px;
	right: 20px;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: #f8f8f5;
	border: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	transition: background 0.2s;
}

.contact-close-btn:hover {
	background: #e5e5e5;
}

.contact-form {
	display: flex;
	flex-direction: column;
	gap: 24px;
	padding: 32px;
}

/* CF7 is deliberately wrapped around the original form markup. These rules
 * neutralize only CF7's structural spans/messages so the source design stays
 * visually unchanged before submission. */
.greway-contact-cf7,
.greway-contact-cf7 > .wpcf7,
.greway-newsletter-cf7,
.greway-newsletter-cf7 > .wpcf7 {
	width: 100%;
}

.greway-contact-form .wpcf7-form-control-wrap,
.greway-newsletter-form .wpcf7-form-control-wrap {
	display: block;
	min-width: 0;
}

.greway-newsletter-controls {
	display: flex;
	width: 100%;
	overflow: hidden;
	border-radius: 9999px;
	background: #fff;
	padding: 4px;
}

.greway-newsletter-controls .wpcf7-form-control-wrap {
	flex: 1 1 0%;
}

.greway-newsletter-controls .greway-newsletter-input {
	width: 100%;
	height: 100%;
	min-width: 0;
	border: 0;
	background: transparent;
	padding: 0 16px;
	font-family: inherit;
	font-size: 12px;
	color: #141414;
	outline: none;
}

.greway-newsletter-controls .greway-newsletter-input::placeholder {
	color: #737373;
}

.greway-contact-form .wpcf7-not-valid-tip {
	margin: 6px 8px 0;
	font-size: 12px;
	line-height: 1.35;
	color: #ff8f8f;
}

.greway-newsletter-form .wpcf7-not-valid-tip {
	margin: 6px 12px 0;
	font-size: 11px;
	line-height: 1.3;
	color: #b42318;
}

.greway-contact-form .wpcf7-response-output,
.greway-newsletter-form .wpcf7-response-output {
	margin: 0;
	border: 0;
	padding: 0;
	font-size: 12px;
	line-height: 1.4;
}

.greway-contact-form .wpcf7-response-output {
	color: #f8f8f5;
}

.greway-newsletter-form .wpcf7-response-output {
	margin-top: 8px;
	padding: 0 12px;
	color: #d7d7d7;
}

.greway-contact-form.submitting .contact-send-btn,
.greway-newsletter-form.submitting button[type="submit"] {
	opacity: 0.65;
	pointer-events: none;
}

.contact-field {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.contact-label {
	font-size: 16px;
	font-weight: 600;
	color: #f8f8f5;
	line-height: 1.2;
	padding: 0 8px;
}

.contact-input {
	background: #141414;
	border: none;
	outline: none;
	width: 100%;
	color: #f8f8f5;
	font-size: 20px;
	border-radius: 16px;
	padding: 0 24px;
	height: 72px;
	line-height: 1.2;
	font-family: inherit;
}

.contact-input::placeholder {
	color: #737373;
}

.contact-textarea {
	background: #141414;
	border: none;
	outline: none;
	width: 100%;
	color: #f8f8f5;
	font-size: 20px;
	border-radius: 16px;
	padding: 24px;
	resize: none;
	height: 140px;
	min-height: 140px;
	line-height: 1.2;
	font-family: inherit;
}

.contact-textarea::placeholder {
	color: #737373;
}

.contact-footer {
	display: flex;
	justify-content: flex-end;
}

.contact-send-btn {
	background: #00cc63;
	color: white;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.2;
	border: none;
	border-radius: 9999px;
	padding: 12px 24px 12px 32px;
	display: flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	transition: background 0.2s;
	font-family: inherit;
}

.contact-send-btn:hover {
	background: #00b357;
}

/* ── Scroll reveal (dùng chung Home + About + Dealers — IntersectionObserver
   trong main.js thêm class .in-view khi phần tử lọt viewport). Giá trị lấy
   theo bản index.html (đầy đủ nhất); about.html có cùng tên class với số hơi
   khác (32px/.8s thay vì 30px/.65s) — chênh lệch nhỏ, không đáng tách riêng
   theo trang. ── */
.reveal {
	transform: translateY(30px);
	transition: opacity 0.65s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.65s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.reveal.in-view {
	opacity: 1;
	transform: translateY(0);
}

.reveal-d1 {
	transition-delay: 0.12s;
}

.reveal-d2 {
	transition-delay: 0.24s;
}

.reveal-d3 {
	transition-delay: 0.36s;
}

.cares-card {
	opacity: 0;
	transform: translateY(36px);
	transition: opacity 0.8s ease, transform 0.8s ease;
}

.cares-card.in-view {
	opacity: 1;
	transform: translateY(0);
}

.bat-reveal {
	opacity: 0;
	filter: blur(12px);
	transform: translateY(16px);
	transition: opacity 0.8s ease, filter 0.9s ease, transform 0.8s ease;
}

.bat-reveal.in-view {
	opacity: 1;
	filter: blur(0);
	transform: translateY(0);
}

/* ── News archive (home.php/archive.php/search.php) — card + pagination.
   Trùng với 1 phần CSS trong plugin greway-elementor/assets/css/widgets.css
   (post-carousel.php) — cố ý lặp lại ở đây vì home.php không load qua
   Elementor nên không có CSS của plugin. ── */
.news-card img {
	transition: transform 0.5s ease;
}

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

.news-card-item {
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.news-card-item:hover {
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.09);
}

.news-arrow-btn {
	width: 36px;
	height: 36px;
	background: #fff;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

/* paginate_links() sinh class .page-numbers — style giống hệt .page-btn của
   HTML gốc (xem ghi chú trong home.php) thay vì ép đổi tên class. */
.greway-pagination {
	flex-wrap: wrap;
}

.greway-pagination .page-numbers {
	width: 40px;
	height: 40px;
	border-radius: 8px;
	border: none;
	background: rgba(29, 29, 29, 0.05);
	font-size: 20px;
	font-weight: 400;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: opacity 0.2s;
	color: #000;
	opacity: 0.5;
	text-decoration: none;
}

.greway-pagination .page-numbers:hover {
	opacity: 0.75;
}

.greway-pagination .page-numbers.current {
	opacity: 1;
	cursor: default;
}

/* ── .greway-prose: typography cho page.php khi trang KHÔNG dùng Elementor
   (trang chính sách...) và KHÔNG phải trang WooCommerce. Bổ sung dần khi có
   nội dung thật để soát heading/list/link/table — xem build plan Giai đoạn E. ── */
.greway-prose {
	font-size: 16px;
	line-height: 1.7;
	color: #1d1d1d;
}

.greway-prose h2 {
	margin-top: 2.2em;
	margin-bottom: 0.6em;
	font-size: clamp(1.4rem, 2.4vw, 1.9rem);
	font-weight: 700;
	letter-spacing: -0.01em;
}

.greway-prose h3 {
	margin-top: 1.8em;
	margin-bottom: 0.5em;
	font-size: clamp(1.15rem, 1.8vw, 1.4rem);
	font-weight: 700;
}

.greway-prose p {
	margin-bottom: 1.2em;
}

.greway-prose ul,
.greway-prose ol {
	margin: 0 0 1.2em 1.4em;
}

.greway-prose li {
	margin-bottom: 0.4em;
}

.greway-prose a {
	color: #108843;
	text-decoration: underline;
}

/* ── Single post: related carousel (single.php does not load Elementor's
   widget stylesheet, so its layout must live in the theme stylesheet). ── */
#related-wrap { overflow: hidden; }
#related-track {
	display: flex;
	align-items: stretch;
	gap: 20px;
	transition: transform .4s cubic-bezier(.4, 0, .2, 1);
	will-change: transform;
}
#related-track > .news-card-item { width: 260px; flex: 0 0 260px; }
#related-track .news-card { flex: none; }
#related-track .news-card img { display: block; width: 100%; height: 100%; object-fit: cover; }
#related-wrap + div .nav-btn {
	display: inline-flex; width: 40px; height: 40px; flex: 0 0 40px;
	align-items: center; justify-content: center; padding: 0; border: 0;
	border-radius: 8px; background: rgba(29,29,29,.05); cursor: pointer;
	transition: background .2s, opacity .2s;
}
#related-wrap + div .nav-btn:hover { background: rgba(29,29,29,.1); }
#related-wrap + div .nav-btn:disabled { opacity: .4; cursor: default; }
#related-wrap + div .nav-btn:focus-visible { outline: 2px solid #108843; outline-offset: 2px; }
#related-wrap + div .nav-btn svg { width: 16px; height: 16px; }
@media (min-width: 640px) { #related-track > .news-card-item { width: 300px; flex-basis: 300px; } }
@media (min-width: 1024px) { #related-track > .news-card-item { width: 340px; flex-basis: 340px; } }
@media (max-width: 768px) {
	#related-wrap {
		overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity;
		overscroll-behavior-inline: contain; -webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}
	#related-wrap::-webkit-scrollbar { display: none; }
	#related-track > .news-card-item { scroll-snap-align: start; }
}

/* WordPress Editor typography. Scoped to .greway-prose so Elementor and
   WooCommerce keep their own component styles. */
.greway-prose { overflow-wrap: break-word; }
.greway-prose > :first-child { margin-top: 0; }
.greway-prose > :last-child { margin-bottom: 0; }
.greway-prose h1, .greway-prose h2, .greway-prose h3,
.greway-prose h4, .greway-prose h5, .greway-prose h6 {
	color: #1d1d1d; font-weight: 700; line-height: 1.25; letter-spacing: -.01em;
}
.greway-prose h1 { margin: 0 0 .65em; font-size: clamp(1.8rem,3.2vw,2.8rem); }
.greway-prose h4 { margin: 1.6em 0 .5em; font-size: 1.15rem; }
.greway-prose h5 { margin: 1.5em 0 .5em; font-size: 1rem; }
.greway-prose h6 { margin: 1.5em 0 .5em; font-size: .875rem; text-transform: uppercase; letter-spacing: .04em; }
.greway-prose p, .greway-prose figure, .greway-prose blockquote,
.greway-prose pre, .greway-prose table, .greway-prose .wp-block-group,
.greway-prose .wp-block-columns, .greway-prose .wp-block-media-text,
.greway-prose .wp-block-gallery, .greway-prose .wp-block-embed {
	margin-top: 0; margin-bottom: 1.25em;
}
.greway-prose ul, .greway-prose ol { margin: 0 0 1.25em; padding-left: 1.5em; }
.greway-prose ul { list-style: disc; }
.greway-prose ol { list-style: decimal; }
.greway-prose ul ul { list-style: circle; }
.greway-prose ol ol { list-style: lower-alpha; }
.greway-prose li > ul, .greway-prose li > ol { margin-top: .4em; margin-bottom: 0; }
.greway-prose strong, .greway-prose b { font-weight: 700; }
.greway-prose em, .greway-prose i { font-style: italic; }
.greway-prose a { text-decoration-thickness: 1px; text-underline-offset: .15em; }
.greway-prose a:hover { color: #0d7439; }
.greway-prose img { display: block; max-width: 100%; height: auto; border-radius: 12px; }
.greway-prose .aligncenter, .greway-prose figure.aligncenter { margin-right: auto; margin-left: auto; }
.greway-prose .alignleft { float: left; margin: .35em 1.5em 1em 0; }
.greway-prose .alignright { float: right; margin: .35em 0 1em 1.5em; }
.greway-prose::after { display: table; clear: both; content: ""; }
.greway-prose figcaption, .greway-prose .wp-caption-text {
	margin-top: .65em; color: #737373; font-size: .875rem; line-height: 1.5; text-align: center;
}
.greway-prose blockquote {
	padding: .25em 0 .25em 1.25em; border-left: 4px solid #108843;
	color: #444; font-size: 1.1em;
}
.greway-prose blockquote p:last-child { margin-bottom: 0; }
.greway-prose hr { margin: 2.25em 0; border: 0; border-top: 1px solid #d4d4d4; }
.greway-prose table { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.greway-prose th, .greway-prose td {
	padding: .75em .9em; border: 1px solid #d4d4d4; text-align: left; vertical-align: top;
}
.greway-prose th { background: #f5f8f6; font-weight: 700; }
.greway-prose .wp-block-table { overflow-x: auto; }
.greway-prose code, .greway-prose kbd {
	padding: .15em .35em; border-radius: 4px; background: #f1f1f1;
	font-family: ui-monospace,SFMono-Regular,Menlo,monospace; font-size: .9em;
}
.greway-prose pre {
	overflow-x: auto; padding: 1em 1.2em; border-radius: 8px;
	background: #141414; color: #fff; line-height: 1.55;
}
.greway-prose pre code { padding: 0; background: transparent; color: inherit; }
.greway-prose iframe, .greway-prose video { max-width: 100%; }
.greway-prose .wp-block-embed__wrapper { position: relative; max-width: 100%; }
@media (max-width: 639px) {
	.greway-prose { font-size: 15px; }
	.greway-prose .alignleft, .greway-prose .alignright { float: none; margin: 0 auto 1.25em; }
	.greway-prose table { min-width: 560px; }
	.greway-prose .wp-block-table { max-width: 100%; overflow-x: auto; }
}

/* ═══════════════════════════════════════════════════════════════════════
   WOOCOMMERCE — style thay thế toàn bộ (woocommerce_enqueue_styles đã tắt
   trong functions.php, xem bài học kanimus mục #2/#10/#11/#12 trong
   docs/greway-build-plan.md). Màu/bo góc theo đúng token greway thay vì CSS
   var kiểu kanimus: xanh chính #108843, chữ #1d1d1d, viền #e5e5e5/#d4d4d4,
   bo góc 16px (card) / 9999px (nút, giống .contact-header-btn v.v.).
   ═══════════════════════════════════════════════════════════════════════ */

.woocommerce table.shop_table { border-collapse: collapse; width: 100%; border: 1px solid #e5e5e5; }
.woocommerce table.shop_table th, .woocommerce table.shop_table td { padding: 14px; border-bottom: 1px solid #e5e5e5; font-size: 14px; }
.woocommerce table.shop_table th { text-transform: uppercase; letter-spacing: .06em; font-size: 11px; color: #737373; font-weight: 700; }

.woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce #respond input#submit {
	background: #108843; color: #fff; border: none; border-radius: 9999px;
	padding: 13px 26px; font-size: 14px; font-weight: 600; font-family: "SVN Apparat", system-ui, sans-serif;
	cursor: pointer; text-decoration: none; display: inline-block;
}
.woocommerce a.button:hover, .woocommerce button.button:hover { background: #0d7439; }
.woocommerce a.button.disabled, .woocommerce button.button.disabled { opacity: .5; cursor: not-allowed; }

.woocommerce ul.products { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; list-style: none; margin: 0; padding: 0; }

.woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-noreviews {
	background: #e6f4ea; border-left: 4px solid #108843; padding: 14px 18px; list-style: none; font-size: 14px; border-radius: 0 8px 8px 0; margin-bottom: 20px;
}
.woocommerce-error { background: #fdecec; border-color: #c0392b; }

/* ── My Account: 2 cột — menu trái, nội dung phải ── */
.woocommerce-account .woocommerce { display: grid; grid-template-columns: 220px 1fr; gap: 40px; align-items: start; }
.woocommerce-account .woocommerce-notices-wrapper { grid-column: 1 / -1; }
.woocommerce-account .woocommerce-notices-wrapper:empty { display: none; }
.woocommerce-account .woocommerce-MyAccount-navigation { background: #fff; border: 1px solid #e5e5e5; border-radius: 16px; padding: 10px; grid-column: 1; }
.woocommerce-account .woocommerce-MyAccount-content { grid-column: 2; min-width: 0; }
.woocommerce-account .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.woocommerce-account .woocommerce-MyAccount-navigation a { display: block; padding: 12px 16px; text-decoration: none; color: #3a3a3a; border-radius: 8px; font-size: 14px; }
.woocommerce-account .woocommerce-MyAccount-navigation a:hover { background: #f5f5f5; }
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a { background: #e6f4ea; color: #108843; font-weight: 700; }
@media (max-width: 780px) {
	.woocommerce-account .woocommerce { grid-template-columns: 1fr; }
	.woocommerce-account .woocommerce-MyAccount-navigation,
	.woocommerce-account .woocommerce-MyAccount-content { grid-column: 1; }
}

.woocommerce-account .woocommerce > h2 { font-size: 22px; font-weight: 700; margin: 0 0 20px; }
#customer_login.col2-set { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.woocommerce-form-login, .woocommerce-form-register, .woocommerce-ResetPassword {
	background: #fff; border: 1px solid #e5e5e5; border-radius: 16px; padding: 28px; max-width: 420px;
}
.woocommerce-ResetPassword > p:first-child { font-size: 14px; color: #3a3a3a; line-height: 1.6; margin: 0 0 20px; }
.woocommerce-form-login__rememberme { display: flex; align-items: center; font-size: 14px; color: #3a3a3a; font-weight: 400; }
.woocommerce-LostPassword { font-size: 13px; margin-top: 16px; }
@media (max-width: 700px) { #customer_login.col2-set { grid-template-columns: 1fr; } }

/* WC tự chèn nút "hiển thị mật khẩu" bằng JS trên mọi ô mật khẩu — không có
   trong HTML tĩnh nên chỉ thấy khi test qua trình duyệt thật. */
.password-input { position: relative; display: block; }
.password-input input { padding-right: 44px !important; }
.show-password-input {
	position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
	background: none; border: none; cursor: pointer; padding: 6px; color: #737373;
	width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
}
.show-password-input::before {
	content: ""; width: 18px; height: 18px;
	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'%3E%3Cpath d='M1 12s4-7 11-7 11 7 11 7-4 7-11 7-11-7-11-7Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%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'%3E%3Cpath d='M1 12s4-7 11-7 11 7 11 7-4 7-11 7-11-7-11-7Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ── Địa chỉ giao hàng/thanh toán — 2 thẻ cạnh nhau ── */
.woocommerce-Addresses.col2-set { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.woocommerce-Address { background: #fff; border: 1px solid #e5e5e5; border-radius: 16px; padding: 24px; }
.woocommerce-Address-title { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.woocommerce-Address-title h3 { font-size: 16px; font-weight: 700; margin: 0; }
.woocommerce-Address-title .edit { font-size: 12px; font-weight: 700; color: #108843; text-decoration: none; text-transform: uppercase; letter-spacing: .06em; }
.woocommerce-Address address { font-style: normal; font-size: 14px; line-height: 1.7; color: #3a3a3a; }
@media (max-width: 700px) { .woocommerce-Addresses.col2-set { grid-template-columns: 1fr; } }
.woocommerce ins { text-decoration: none; }

/* ── Order received (trang cảm ơn sau thanh toán) ── */
.woocommerce-order { max-width: 820px; margin: 0 auto; padding: 48px 24px; }
.woocommerce-order .woocommerce-thankyou-order-received {
	display: flex; align-items: center; gap: 14px; background: #e6f4ea; border-radius: 16px; padding: 28px 32px; margin: 0 0 28px;
	font-size: 17px; font-weight: 600; color: #1d1d1d; border-left: 4px solid #108843;
}
.woocommerce-order-overview {
	list-style: none; margin: 0 0 32px; padding: 24px 28px; display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 20px 28px;
	background: #fff; border: 1px solid #e5e5e5; border-radius: 16px;
}
.woocommerce-order-overview li { min-width: 0; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: #737373; }
.woocommerce-order-overview li strong { display: block; margin-top: 6px; font-size: 16px; text-transform: none; letter-spacing: 0; font-weight: 700; color: #1d1d1d; overflow-wrap: break-word; }
.woocommerce-order > p { font-size: 14px; color: #3a3a3a; margin: -12px 0 28px; }
.woocommerce-order-details__title, .woocommerce-column__title { font-size: 20px; font-weight: 700; margin: 0 0 16px; color: #1d1d1d; }
.woocommerce-order-details { margin-bottom: 40px; }
table.woocommerce-table--order-details tfoot th { text-align: left; font-weight: 600; color: #3a3a3a; }
table.woocommerce-table--order-details tfoot td { text-align: right; }
table.woocommerce-table--order-details tfoot tr:last-child th,
table.woocommerce-table--order-details tfoot tr:last-child td { font-weight: 700; font-size: 16px; color: #108843; border-bottom: none; }
.woocommerce-customer-details { background: #fff; border: 1px solid #e5e5e5; border-radius: 16px; padding: 28px; }
.woocommerce-customer-details address { font-style: normal; font-size: 14px; line-height: 1.7; color: #3a3a3a; }
.woocommerce-customer-details .woocommerce-columns--2 { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
@media (max-width: 700px) { .woocommerce-customer-details .woocommerce-columns--2 { grid-template-columns: 1fr; } }

/* ── Form input chuẩn (checkout, login, register, my-account, addresses) ── */
.woocommerce form .form-row { margin-bottom: 16px; }
.woocommerce form .form-row label { display: block; font-size: 13px; font-weight: 600; color: #1d1d1d; margin-bottom: 6px; }
.woocommerce form .form-row label .required { color: #c0392b; }
.woocommerce form .form-row select,
.woocommerce form .form-row textarea,
.woocommerce form .form-row input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
.woocommerce-page form .form-row select,
.woocommerce-page form .form-row textarea,
.woocommerce-page form .form-row input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]) {
	width: 100%; border: 1px solid #d4d4d4; border-radius: 8px; padding: 12px 14px; font-size: 14px;
	font-family: "SVN Apparat", system-ui, sans-serif; color: #1d1d1d; background: #fff; outline: none; box-sizing: border-box;
}
.woocommerce form .form-row input:focus, .woocommerce form .form-row select:focus, .woocommerce form .form-row textarea:focus { border-color: #108843; }
.woocommerce form .form-row input[type="checkbox"], .woocommerce form .form-row input[type="radio"] { accent-color: #108843; margin-right: 8px; }
.woocommerce-form-login, .woocommerce-form-register, .woocommerce-form-coupon, .woocommerce-ResetPassword { max-width: 420px; }
.woocommerce-billing-fields__field-wrapper, .woocommerce-shipping-fields__field-wrapper, .woocommerce-additional-fields__field-wrapper { display: flex; flex-direction: column; }
#order_review .shop_table, .woocommerce-checkout-review-order-table { margin-bottom: 20px; }

/* ── Cart table ── */
.woocommerce table.shop_table .product-thumbnail img { width: 80px; height: 80px; object-fit: cover; border-radius: 8px; }
.greway-cart-thumb-placeholder { display: flex; align-items: center; justify-content: center; width: 80px; height: 80px; background: #e6f4ea; border-radius: 8px; flex-shrink: 0; }
.woocommerce table.shop_table td.product-thumbnail { width: 80px; }
.woocommerce table.shop_table td.product-remove { width: 40px; text-align: center; }
.woocommerce table.shop_table td { vertical-align: middle; }
/* table-layout:auto không tôn trọng width khai trên <td> — ép fixed cho bảng
   dòng sản phẩm (xem bài học kanimus, docs/greway-build-plan.md mục 1). */
.woocommerce-cart-form table.shop_table { table-layout: fixed; }
.woocommerce-cart-form table.shop_table th.product-remove, .woocommerce-cart-form table.shop_table td.product-remove { width: 40px; }
.woocommerce-cart-form table.shop_table th.product-thumbnail, .woocommerce-cart-form table.shop_table td.product-thumbnail { width: 80px; }
.woocommerce-cart-form table.shop_table th.product-price, .woocommerce-cart-form table.shop_table td.product-price { width: 120px; }
.woocommerce-cart-form table.shop_table th.product-quantity, .woocommerce-cart-form table.shop_table td.product-quantity { width: 110px; }
.woocommerce-cart-form table.shop_table th.product-subtotal, .woocommerce-cart-form table.shop_table td.product-subtotal { width: 120px; }
.woocommerce table.shop_table a.remove { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; color: #737373 !important; text-decoration: none; font-size: 18px; line-height: 1; }
.woocommerce table.shop_table a.remove:hover { background: #eeeeee; color: #c0392b !important; }
.woocommerce table.shop_table .quantity input.qty { width: 64px; padding: 10px; text-align: center; border: 1px solid #d4d4d4; border-radius: 8px; }
.woocommerce table.shop_table .product-name a { color: #1d1d1d; font-weight: 600; text-decoration: none; }
.woocommerce-cart-form .actions { padding-top: 16px; }
.woocommerce-cart-form .actions .coupon { display: inline-flex; gap: 10px; align-items: center; vertical-align: middle; margin: 0 12px 12px 0; }
.woocommerce-cart-form .actions > button.button { vertical-align: middle; margin-bottom: 12px; }
.woocommerce-cart-form .coupon input#coupon_code {
	width: auto; min-width: 200px; box-sizing: border-box; border: 1px solid #d4d4d4; border-radius: 8px;
	padding: 12px 14px; font-size: 14px; font-family: "SVN Apparat", system-ui, sans-serif; color: #1d1d1d; background: #fff; outline: none;
}
.woocommerce-cart-form .coupon input#coupon_code:focus { border-color: #108843; }

/* ── Cart: 2 cột — bảng sản phẩm trái, tổng cộng phải (sticky) ── */
.woocommerce-cart .woocommerce { display: grid; grid-template-columns: 1fr 380px; gap: 20px 48px; align-items: start; }
.woocommerce-cart .woocommerce-notices-wrapper:empty { display: none; }
.woocommerce-cart .woocommerce-notices-wrapper { grid-column: 1 / -1; }
.woocommerce-cart .woocommerce-cart-form { grid-column: 1; }
.woocommerce-cart .cart-collaterals { grid-column: 2; position: sticky; top: 96px; }
.cart-collaterals .cart_totals { max-width: none; background: #fff; border: 1px solid #e5e5e5; border-radius: 16px; padding: 24px; overflow: hidden; }
.cart_totals h2 { font-size: 18px; font-weight: 700; margin: 0 0 16px; }
.cart_totals table.shop_table { border: none; }
.cart_totals table.shop_table th, .cart_totals table.shop_table td { padding: 12px 0; border-bottom: 1px solid #f5f5f5; }
.cart_totals table.shop_table tr:last-child th, .cart_totals table.shop_table tr:last-child td { border-bottom: none; }
.cart_totals .order-total .amount { font-weight: 700; color: #108843; font-size: 17px; }
.wc-proceed-to-checkout { margin-top: 16px; }
.wc-proceed-to-checkout .checkout-button { width: 100%; text-align: center; }
@media (max-width: 900px) {
	.woocommerce-cart .woocommerce { grid-template-columns: 1fr; }
	.woocommerce-cart .cart-collaterals { grid-column: 1; position: static; }
}

/* Bảng responsive (giỏ hàng/đơn hàng My Account) tự dựng lại "card xếp
   chồng" trên mobile vì CSS mặc định WC đã tắt (bài học kanimus). */
@media (max-width: 640px) {
	.woocommerce table.shop_table_responsive thead { display: none; }
	.woocommerce table.shop_table_responsive, .woocommerce table.shop_table_responsive tbody, .woocommerce table.shop_table_responsive tr, .woocommerce table.shop_table_responsive td { display: block; width: auto; }
	.woocommerce table.shop_table_responsive tr { padding: 14px 0; border-bottom: 1px solid #e5e5e5; }
	.woocommerce table.shop_table_responsive tr:last-child { border-bottom: none; }
	.woocommerce table.shop_table_responsive td { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: none; text-align: right; }
	.woocommerce table.shop_table_responsive td[data-title]::before { content: attr(data-title); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #737373; text-align: left; }
	.woocommerce table.shop_table_responsive td.product-thumbnail { justify-content: flex-start; }
	.woocommerce table.shop_table_responsive td.product-thumbnail a { display: block; }
	.woocommerce table.shop_table_responsive td.product-remove { justify-content: flex-end; }
	.woocommerce table.shop_table_responsive td.actions { display: block; text-align: left; }
	.woocommerce table.shop_table_responsive td.actions .coupon { flex-wrap: wrap; }
	.woocommerce table.shop_table_responsive tr:has(th) { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
	.woocommerce table.shop_table_responsive tr:has(th) th, .woocommerce table.shop_table_responsive tr:has(th) td { display: block; border-bottom: none !important; }
	.woocommerce table.shop_table_responsive tr:has(th) th { text-align: left; }
	.woocommerce table.shop_table_responsive tr:has(th) td { text-align: right; padding: 0; }
	.woocommerce table.shop_table_responsive tr:has(th) td[data-title]::before { content: none; }
}

/* ── Checkout: 2 cột — form trái, tóm tắt đơn hàng phải (sticky) ── */
.woocommerce-checkout form.checkout { display: grid; grid-template-columns: minmax(0, 1fr) 440px; gap: 16px 40px; align-items: start; }
.woocommerce-checkout form.checkout #customer_details { grid-column: 1; grid-row: 1 / span 2; }
.woocommerce-checkout form.checkout .col2-set { display: block; }
.woocommerce-checkout form.checkout .col-1, .woocommerce-checkout form.checkout .col-2 { width: 100%; float: none; }
.woocommerce-checkout form.checkout h3 { font-size: 18px; font-weight: 700; margin: 28px 0 18px; }
.woocommerce-checkout form.checkout .col-1 h3 { margin-top: 0; }
#order_review_heading { grid-column: 2; grid-row: 1; font-size: 18px; font-weight: 700; margin: 0; }
#order_review { grid-column: 2; grid-row: 2; position: sticky; top: 96px; background: #fff; border: 1px solid #e5e5e5; border-radius: 16px; padding: 24px; overflow: hidden; }
#order_review table.shop_table { border: none; }
#order_review table.shop_table th, #order_review table.shop_table td { padding: 12px 0; border-bottom: 1px solid #f5f5f5; }
#order_review .order-total .amount { font-weight: 700; color: #108843; font-size: 17px; }
#payment { margin-top: 20px; }
#payment ul.payment_methods { list-style: none; margin: 0 0 16px; padding: 0; }
.woocommerce-terms-and-conditions-wrapper { margin-bottom: 16px; font-size: 13px; }
#place_order { width: 100%; height: 52px; }
@media (max-width: 900px) {
	.woocommerce-checkout form.checkout { grid-template-columns: 1fr; }
	.woocommerce-checkout form.checkout #customer_details { grid-column: 1; grid-row: auto; }
	#order_review_heading, #order_review { grid-column: 1; grid-row: auto; position: static; }
}
/* ═══════════════════════════════════════════════════════════════════════
   CHECKOUT — hoàn thiện phong cách greway (WC css mặc đă đã tắt ở functions).
   Màu token đụng nguyên: #108843 / #0d7439 / #1d1d1d / #3a3a3a / #737373 /
   #e5e5e5 / #f5f5f5 / #f8f8f5. Card radius 16px, nút pill 9999px.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Card cho khối billing / shipping / additional fields (form trái) ── */
.woocommerce-checkout form.checkout .woocommerce-billing-fields,
.woocommerce-checkout form.checkout .woocommerce-shipping-fields,
.woocommerce-checkout form.checkout .woocommerce-additional-fields {
	background: #fff;
	border: 1px solid #e5e5e5;
	border-radius: 16px;
	padding: 26px 28px;
}
.woocommerce-checkout form.checkout .woocommerce-shipping-fields,
.woocommerce-checkout form.checkout .woocommerce-additional-fields { margin-top: 22px; }
.woocommerce-checkout form.checkout .woocommerce-billing-fields > h3,
.woocommerce-checkout form.checkout .woocommerce-shipping-fields > h3,
.woocommerce-checkout form.checkout .woocommerce-additional-fields > h3 { margin: 0 0 18px; }

/* ── Input: hover + focus ring (bổ sun trên rule chuẩđ đây 806–820) ── */
.woocommerce form .form-row select,
.woocommerce form .form-row textarea,
.woocommerce form .form-row input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]) {
	transition: border-color .15s ease, box-shadow .15s ease;
}
.woocommerce form .form-row input:hover,
.woocommerce form .form-row select:hover,
.woocommerce form .form-row textarea:hover { border-color: #b0b0b0; }
.woocommerce form .form-row input:focus,
.woocommerce form .form-row select:focus,
.woocommerce form .form-row textarea:focus { border-color: #108843; box-shadow: 0 0 0 3px rgba(16, 136, 67, .14); }

/* ── Toggle link login/coupon + card form coupon (mặc WC lộ đấy) ── */
.woocommerce-checkout .woocommerce-form-login-toggle,
.woocommerce-checkout .woocommerce-form-coupon-toggle { margin-bottom: 14px; font-size: 13px; color: #3a3a3a; }
.woocommerce-checkout a.showlogin,
.woocommerce-checkout a.showcoupon { color: #108843; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.woocommerce-checkout a.showlogin:hover,
.woocommerce-checkout a.showcoupon:hover { color: #0d7439; }
.woocommerce-checkout .woocommerce-form-coupon {
	background: #fff; border: 1px solid #e5e5e5; border-radius: 16px;
	padding: 22px 26px; max-width: 420px;
}

/* ── Card đơn hàng bản hơn — depth + row chi tot al ── */
#order_review { box-shadow: 0 1px 3px rgba(20, 20, 20, .04); }
#order_review .woocommerce-checkout-review-order-table { width: 100%; table-layout: fixed; border-collapse: collapse; }
#order_review .woocommerce-checkout-review-order-table thead th {
	padding: 0 0 14px; color: #737373; font-size: 11px; font-weight: 700;
	letter-spacing: .06em; text-transform: uppercase;
}
#order_review .woocommerce-checkout-review-order-table thead .product-name { width: 72%; text-align: left; }
#order_review .woocommerce-checkout-review-order-table thead .product-total { width: 28%; text-align: right; }
#order_review .woocommerce-checkout-review-order-table .cart_item td {
	padding-top: 18px; padding-bottom: 18px; vertical-align: middle;
}
#order_review .woocommerce-checkout-review-order-table .cart_item .product-name { padding-right: 14px; }
#order_review .woocommerce-checkout-review-order-table .cart_item .product-total {
	color: #1d1d1d; font-size: 14px; font-weight: 600; line-height: 1.35; text-align: right; white-space: nowrap;
}
.greway-checkout-line-item {
	display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; align-items: start;
}
.greway-checkout-item-thumb,
.greway-checkout-item-thumb img,
.greway-checkout-item-thumb .greway-cart-thumb-placeholder {
	display: block; width: 64px; height: 64px; border-radius: 10px;
}
.greway-checkout-item-thumb { overflow: hidden; background: #f3f3f3; }
.greway-checkout-item-thumb img { object-fit: cover; }
.greway-checkout-item-thumb .greway-cart-thumb-placeholder { background: #e6f4ea; }
.greway-checkout-item-copy { min-width: 0; }
.greway-checkout-item-title {
	display: flex; align-items: flex-start; gap: 7px; color: #1d1d1d;
	font-size: 15px; font-weight: 600; line-height: 1.35;
}
#order_review table.shop_table .greway-checkout-item-title .product-quantity {
	display: inline-flex; min-width: 25px; min-height: 21px; align-items: center; justify-content: center;
	margin-top: -1px; border-radius: 999px; background: #f0f0ed; padding: 2px 7px;
	color: #3a3a3a; font-size: 11px; font-weight: 700; line-height: 1; white-space: nowrap;
}
#order_review .greway-checkout-item-copy dl.variation {
	display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 3px 8px;
	margin: 7px 0 0; color: #737373; font-size: 12px; font-weight: 400; line-height: 1.35;
}
#order_review .greway-checkout-item-copy dl.variation dt,
#order_review .greway-checkout-item-copy dl.variation dd {
	display: block; float: none; clear: none; min-width: 0; margin: 0; padding: 0;
}
#order_review .greway-checkout-item-copy dl.variation dt { color: #3a3a3a; font-weight: 600; }
#order_review .greway-checkout-item-copy dl.variation dd p { margin: 0; overflow-wrap: anywhere; }
#order_review .woocommerce-checkout-review-order-table tfoot th {
	color: #737373; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-align: left; text-transform: uppercase;
}
#order_review .woocommerce-checkout-review-order-table tfoot td { text-align: right; white-space: nowrap; }
#order_review .woocommerce-checkout-review-order-table .order-total th,
#order_review .woocommerce-checkout-review-order-table .order-total td { padding-top: 16px; border-bottom: 0; }
#order_review table.shop_table .cart-discount .amount,
#order_review table.shop_table .order-total .amount { color: #108843; font-weight: 700; }

@media (max-width: 520px) {
	#order_review { padding: 18px; }
	#order_review .woocommerce-checkout-review-order-table thead .product-name { width: calc(100% - 92px); }
	#order_review .woocommerce-checkout-review-order-table thead .product-total { width: 92px; }
	#order_review .woocommerce-checkout-review-order-table .cart_item .product-name { padding-right: 10px; }
	.greway-checkout-line-item { grid-template-columns: 52px minmax(0, 1fr); gap: 10px; }
	.greway-checkout-item-thumb,
	.greway-checkout-item-thumb img,
	.greway-checkout-item-thumb .greway-cart-thumb-placeholder { width: 52px; height: 52px; border-radius: 8px; }
	.greway-checkout-item-title { font-size: 14px; }
	#order_review .woocommerce-checkout-review-order-table .cart_item .product-total { font-size: 13px; }
}

/* ── #payment — band contrast + phương thức thanh toán tách ── */
#payment {
	background: #f8f8f5; border: 1px solid #e5e5e5; border-radius: 16px; padding: 20px 24px;
}
#payment ul.payment_methods { list-style: none; margin: 0 0 16px; padding: 0; }
#payment .wc_payment_method { padding: 12px 14px; }
#payment .wc_payment_method + .wc_payment_method { border-top: 1px dashed #d4d4d4; }
#payment .wc_payment_method label {
	display: flex; align-items: center; gap: 10px; cursor: pointer;
	font-size: 14px; font-weight: 600; color: #1d1d1d;
}
#payment .wc_payment_method input.input-radio { accent-color: #108843; width: 18px; height: 18px; flex: none; }
#payment .payment_box {
	background: #fff; border: 1px solid #e5e5e5; border-radius: 8px;
	padding: 14px 16px; margin-top: 10px; font-size: 13px; color: #3a3a3a;
}
#payment .payment_box p { margin: 0 0 6px; }

/* ── Shipping method (khi danh mục/zone giao thain đang có) ── */
#shipping_method { list-style: none; margin: 0; padding: 0; }
#shipping_method li { display: flex; align-items: center; gap: 10px; padding: 8px 0; font-size: 14px; color: #1d1d1d; }
#shipping_method li input { accent-color: #108843; width: 18px; height: 18px; flex: none; }
#shipping_method .amount { color: #108843; font-weight: 600; }

/* ── Terms + nút đặt hang ── */
.woocommerce-terms-and-conditions-wrapper { margin-bottom: 0; }
.woocommerce-terms-and-conditions-wrapper p.form-row { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; }
.woocommerce-terms-and-conditions-wrapper .input-checkbox {
	accent-color: #108843; width: 18px; height: 18px; flex: none;
}
.woocommerce-terms-and-conditions-wrapper label { font-size: 13px; color: #3a3a3a; }
.woocommerce-terms-and-conditions-wrapper .checkbox span { font-size: 13px; color: #3a3a3a; }
#place_order {
	width: 100%; height: 52px;
	background: #108843; color: #fff; border: none; border-radius: 9999px;
	font-size: 15px; font-weight: 600; cursor: pointer; font-family: "SVN Apparat", system-ui, sans-serif;
}
#place_order:hover { background: #0d7439; }
.woocommerce-checkout .place-order { margin: 0; }

/* ── Trang gio hàng trống / checkout trống — card căn giữa ── */
.wc-empty-cart-message {
	text-align: center; padding: 48px 28px; background: #fff;
	border: 1px solid #e5e5e5; border-radius: 16px;
}
.wc-empty-cart-message .cart-empty {
	border: none; background: none; padding: 0; margin: 0 0 20px;
	font-size: 17px; font-weight: 600; color: #1d1d1d; text-align: center;
}
.return-to-shop { text-align: center; margin: 0; }
.return-to-shop .button { min-width: 232px; }

/* ── Single product: gallery + variation form ── */
.greway-pdp-gallery .woocommerce-product-gallery__wrapper { border-radius: 16px; overflow: hidden; background: #f3f3f3; }
.greway-pdp-gallery .flex-control-thumbs { display: flex; gap: 10px; margin-top: 12px; list-style: none; padding: 0; }
.greway-pdp-gallery .flex-control-thumbs li { width: 76px; }
.greway-pdp-gallery .flex-control-thumbs img { border-radius: 8px; cursor: pointer; border: 2px solid transparent; }
.greway-pdp-gallery .flex-control-thumbs img.flex-active { border-color: #108843; }
.greway-pdp-cart form.cart { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-start; margin-bottom: 16px; }
.greway-pdp-cart form.cart .variations { width: 100%; margin-bottom: 4px; }
.greway-pdp-cart form.cart .variations td.label { font-size: 13px; font-weight: 700; padding-bottom: 8px; }
.greway-pdp-cart form.cart .variations select {
	font-family: "SVN Apparat", system-ui, sans-serif; font-size: 13px; border: 1.5px solid #d4d4d4; border-radius: 8px;
	padding: 11px 16px; color: #1d1d1d; background: #fff; cursor: pointer;
}
.greway-pdp-cart form.cart .woocommerce-variation-price { width: 100%; font-size: 22px; font-weight: 700; color: #108843; margin-bottom: 6px; }
.greway-pdp-cart form.cart .quantity input.qty {
	width: 70px; height: 50px; text-align: center; font-size: 15px; font-weight: 600; border: 1px solid #d4d4d4;
	border-radius: 8px; font-family: "SVN Apparat", system-ui, sans-serif; color: #1d1d1d;
}
.greway-pdp-cart form.cart .single_add_to_cart_button {
	flex: 1; min-width: 200px; height: 50px; padding: 0 28px; background: #108843; color: #fff; border: none;
	border-radius: 9999px; font-size: 15px; font-weight: 600; cursor: pointer; font-family: "SVN Apparat", system-ui, sans-serif;
}
.greway-pdp-cart form.cart .single_add_to_cart_button:hover { background: #0d7439; }
.greway-pdp-cart form.cart .single_add_to_cart_button.disabled { opacity: .5; cursor: not-allowed; }
.greway-pdp-cart .woocommerce-variation-availability { width: 100%; font-size: 13px; color: #737373; }

/* Accessories archive: filter pills from accessories.html. */
#acc-filters .filter-pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid #d4d4d4;
	border-radius: 40px;
	padding: 8px 16px;
	background: transparent;
	color: #141414;
	font-family: inherit;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background .2s, color .2s, border-color .2s;
}
#acc-filters .filter-pill.active {
	background: #141414;
	border-color: #141414;
	color: #f8f8f5;
}
#acc-filters .filter-pill:hover:not(.active) {
	background: rgba(20, 20, 20, .07);
	color: #141414;
}
#acc-filters .filter-pill:focus-visible {
	outline: 2px solid #108843;
	outline-offset: 2px;
}

/* Accessory detail: WooCommerce port of accessory-detail.html. */
.greway-accessory-detail { background: #fff; color: #1d1d1d; }
.greway-accessory-detail button,
.greway-accessory-detail input,
.greway-accessory-detail select { font-family: inherit; }
.greway-accessory-detail .product-card { transition: transform .3s ease; }
.greway-accessory-detail .product-card img { transition: transform .5s ease; }
.greway-accessory-detail .product-card:hover img { transform: scale(1.04); }
.greway-accessory-detail .product-detail-shell {
	border: 1px solid rgba(29, 29, 29, .05); background: #fff; border-radius: 0; overflow: hidden; box-shadow: none;
}
.greway-accessory-detail .product-detail-layout {
	display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; padding: 20px 20px 0;
}
.greway-accessory-detail .product-gallery {
	display: flex; flex-direction: column; gap: 18px; min-width: 0;
}
.greway-accessory-detail .product-gallery-main {
	display: flex; align-items: center; justify-content: center; background: #fff;
	border: 1px solid rgba(29, 29, 29, .02); border-radius: 16px; min-height: 420px;
	height: 460px; padding: 20px; overflow: hidden;
}
.greway-accessory-detail .product-gallery-main img {
	display: block; width: 100%; max-width: 420px; height: 100%; object-fit: contain;
}
.greway-accessory-detail .product-preview-list {
	display: flex; align-items: center; gap: 12px; overflow-x: auto; padding-bottom: 10px; scrollbar-width: thin;
}
.greway-accessory-detail .product-preview-thumb {
	width: 88px; height: 88px; padding: 0; flex: 0 0 88px; display: flex; align-items: center;
	justify-content: center; background: #fff; border: 1px solid rgba(29, 29, 29, .03);
	border-radius: 12px; transition: border-color .2s ease, transform .2s ease;
	overflow: hidden; cursor: pointer;
}
.greway-accessory-detail .product-preview-thumb:hover { transform: translateY(-1px); }
.greway-accessory-detail .product-preview-thumb:focus-visible { outline: 2px solid #108843; outline-offset: 2px; }
.greway-accessory-detail .product-preview-thumb img { display: block; width: 100%; height: 100%; object-fit: contain; }
.greway-accessory-detail .product-preview-thumb.active { border-color: rgba(29, 29, 29, .8); }
.greway-accessory-detail .product-info-panel {
	display: flex; flex-direction: column; justify-content: flex-start; padding: 8px 10px 0 0; min-width: 0;
}
.greway-accessory-detail .product-info-panel h1 {
	margin: 0; font-size: clamp(32px, 3vw, 58px); line-height: 1.05; letter-spacing: -.05em;
	font-weight: 500; color: #1d1d1d;
}
.greway-accessory-detail .product-description {
	margin-top: 20px; margin-bottom: 24px; padding: 0 0 18px;
	border-bottom: 1px solid rgba(29, 29, 29, .12); color: rgba(29, 29, 29, .8);
	font-size: 18px; line-height: 1.6;
}
.greway-accessory-detail .product-description p { margin: 0; }
.greway-accessory-detail .product-price-box {
	display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 0 14px;
	border-bottom: 1px solid rgba(29, 29, 29, .12);
}
.greway-accessory-detail .product-price-box .label { font-size: 18px; font-weight: 600; color: #1d1d1d; }
.greway-accessory-detail .product-price-values {
	display: flex; align-items: baseline; justify-content: flex-end; gap: 10px; flex-wrap: wrap;
}
.greway-accessory-detail .product-price-old {
	color: rgba(29, 29, 29, .45); font-size: 18px; text-decoration: line-through;
}
.greway-accessory-detail .product-price-current,
.greway-accessory-detail .product-price-current .amount { color: #1d1d1d; font-size: 20px; font-weight: 600; }
.greway-accessory-detail .greway-accessory-cart form.cart { margin: 0; }
.greway-accessory-detail .greway-accessory-cart.is-simple form.cart .quantity { display: none; }
.greway-accessory-detail .greway-accessory-cart form.cart .single_add_to_cart_button {
	width: 100%; margin-top: 18px; display: flex; align-items: center; justify-content: center; gap: 10px;
	min-height: 56px; padding: 0 20px; border-radius: 16px; background: #e5e5e5; color: #1d1d1d;
	border: 1px solid rgba(29, 29, 29, .07); font-size: 18px; font-weight: 400; cursor: pointer;
	transition: background .2s ease, opacity .2s ease;
}
.greway-accessory-detail .greway-accessory-cart form.cart .single_add_to_cart_button::after {
	content: ""; width: 20px; height: 22px; background: url("../images/icon-add-to-cart.svg") center / contain no-repeat; flex: 0 0 auto;
}
.greway-accessory-detail .greway-accessory-cart form.cart .single_add_to_cart_button:hover { background: #d9d9d9; }
.greway-accessory-detail .greway-accessory-cart form.cart .single_add_to_cart_button:disabled { opacity: .55; cursor: wait; }
.greway-accessory-detail .greway-accessory-cart form.cart .variations { width: 100%; margin-top: 18px; }
.greway-accessory-detail .greway-accessory-cart form.cart .variations select { width: 100%; }
.greway-accessory-detail .product-tabs { margin-top: 6px; padding: 0 20px 20px; }
.greway-accessory-detail .product-tabs header {
	display: flex; align-items: center; gap: 24px; border-bottom: 1px solid rgba(29, 29, 29, .12);
}
.greway-accessory-detail .detail-tab {
	background: transparent; border: 0; padding: 16px 0 14px; font-size: 18px;
	color: rgba(29, 29, 29, .7); cursor: pointer; position: relative;
}
.greway-accessory-detail .detail-tab.active { color: #1d1d1d; }
.greway-accessory-detail .detail-tab.active::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: #1d1d1d;
}
.greway-accessory-detail .detail-tab:focus-visible { outline: 2px solid #108843; outline-offset: 3px; }
.greway-accessory-detail .detail-panel { display: none; padding-top: 20px; }
.greway-accessory-detail .detail-panel.active { display: block; }
.greway-accessory-detail .detail-panel[hidden] { display: none !important; }
.greway-accessory-detail .detail-panel p,
.greway-accessory-detail .detail-panel li { color: rgba(29, 29, 29, .78); font-size: 15px; line-height: 1.7; }
.greway-accessory-detail .detail-panel p { margin: 0; }
.greway-accessory-detail .spec-list {
	list-style: none; padding: 0; margin: 0; display: grid; gap: 12px;
}
.greway-accessory-detail .spec-list li {
	display: grid; grid-template-columns: 140px 1fr; gap: 12px; padding: 10px 0;
	border-bottom: 1px solid rgba(29, 29, 29, .08);
}
.greway-accessory-detail .spec-list li:last-child { border-bottom: 0; }
.greway-accessory-detail .spec-list strong { font-weight: 600; color: #1d1d1d; }
.greway-accessory-detail .filter-pill {
	border: 1px solid #d4d4d4; border-radius: 40px; padding: 8px 16px; font-size: 16px;
	font-weight: 600; cursor: pointer; white-space: nowrap;
	transition: background .2s, color .2s, border-color .2s; background: transparent;
	color: #141414; line-height: 1.2;
}
.greway-accessory-detail .filter-pill.active { background: #141414; color: #f8f8f5; border-color: #141414; }
.greway-accessory-detail .filter-pill:hover:not(.active) { background: rgba(20, 20, 20, .07); }
.greway-accessory-detail .filter-pill:focus-visible { outline: 2px solid #108843; outline-offset: 2px; }
.greway-accessory-detail .carousel-wrap { overflow: hidden; padding-top: 12px; margin-top: -12px; }
.greway-accessory-detail .detail-acc-wrap { align-self: stretch; margin-right: calc((100% - 100vw) / 2); }
.greway-accessory-detail .carousel-track {
	display: flex; gap: 20px; transition: transform .4s cubic-bezier(.4, 0, .2, 1); will-change: transform;
}
.greway-accessory-detail .detail-acc-card { width: 260px; flex: 0 0 260px; }
.greway-accessory-detail .detail-acc-card[hidden] { display: none !important; }
.greway-accessory-detail .detail-acc-card img { display: block; width: 100%; height: 100%; object-fit: cover; }
.greway-accessory-detail .nav-btn {
	width: 40px; height: 40px; padding: 0; border-radius: 8px; background: rgba(29, 29, 29, .05);
	display: flex; align-items: center; justify-content: center; cursor: pointer;
	transition: background .2s, opacity .2s; border: 0; flex: 0 0 40px;
}
.greway-accessory-detail .nav-btn:hover { background: rgba(29, 29, 29, .1); }
.greway-accessory-detail .nav-btn:disabled { opacity: .4; cursor: default; }
.greway-accessory-detail .nav-btn:focus-visible { outline: 2px solid #108843; outline-offset: 2px; }
.greway-accessory-detail .nav-btn svg { width: 16px; height: 16px; }

@media (min-width: 640px) {
	.greway-accessory-detail .detail-acc-card { width: 300px; flex-basis: 300px; }
}
@media (min-width: 1024px) {
	.greway-accessory-detail .detail-acc-card { width: 340px; flex-basis: 340px; }
}
@media (max-width: 899px) {
	.greway-accessory-detail .product-detail-layout { grid-template-columns: minmax(0, 1fr); gap: 28px; padding: 16px 16px 0; }
	.greway-accessory-detail .product-gallery-main { min-height: 300px; height: min(68vw, 460px); }
	.greway-accessory-detail .product-info-panel { padding: 0; }
	.greway-accessory-detail .product-tabs { margin-top: 24px; padding: 0 16px 16px; }
}
@media (max-width: 639px) {
	.greway-accessory-detail .accessory-product-intro { padding-top: 92px; }
	.greway-accessory-detail .accessory-breadcrumb { font-size: 15px; }
	.greway-accessory-detail .product-gallery-main { min-height: 250px; height: 74vw; padding: 12px; }
	.greway-accessory-detail .product-preview-thumb { width: 72px; height: 72px; flex-basis: 72px; }
	.greway-accessory-detail .product-description { font-size: 16px; margin-top: 16px; margin-bottom: 12px; }
	.greway-accessory-detail .product-price-box { align-items: flex-start; padding-top: 14px; }
	.greway-accessory-detail .product-price-box .label { font-size: 16px; }
	.greway-accessory-detail .product-price-current,
	.greway-accessory-detail .product-price-current .amount { font-size: 18px; }
	.greway-accessory-detail .greway-accessory-cart form.cart .single_add_to_cart_button { min-height: 52px; font-size: 16px; }
	.greway-accessory-detail .spec-list li { grid-template-columns: 1fr; gap: 2px; }
	.greway-accessory-detail .accessory-catalog { padding-top: 56px; padding-bottom: 56px; }
}

/* ── Bảng bảo hành (page-templates/warranty-policy.php) — copy từ <style>
   riêng warranty-policy.html, đổi tên .warranty-table → .greway-warranty-table
   theo đúng convention prefix greway- cho class theme tự viết. ── */
/* About/Giới thiệu dùng header fixed. Bù đúng chiều cao header theo từng
   breakpoint và giữ hero đầu tiên vừa trọn phần viewport còn lại. */
.greway-about-main {
	--greway-about-header-offset: 48px;
	padding-top: var(--greway-about-header-offset);
}
.greway-about-main > .elementor > .elementor-element:first-child {
	min-height: calc(100svh - var(--greway-about-header-offset));
}
@media (min-width: 640px) {
	.greway-about-main { --greway-about-header-offset: 52px; }
}
@media (min-width: 1024px) {
	.greway-about-main { --greway-about-header-offset: 64px; }
}

.greway-warranty-table { width: 100%; border-collapse: separate; border-spacing: 0; border-radius: 16px; overflow: hidden; border: 1px solid rgba(20, 20, 20, 0.08); }
.greway-warranty-table th { background: #f5f8f6; padding: 14px 18px; font-size: 14px; font-weight: 600; text-align: left; color: #141414; border-bottom: 1px solid rgba(20, 20, 20, 0.08); }
.greway-warranty-table td { padding: 14px 18px; font-size: 14px; color: #444; border-bottom: 1px solid rgba(20, 20, 20, 0.06); }
.greway-warranty-table tr:last-child td { border-bottom: 0; }
.greway-warranty-table tr:hover td { background: #fafafa; }
.greway-warranty-table-scroll { display: block; width: 100%; min-width: 0; max-width: 100%; overflow-x: scroll !important; overflow-y: hidden; cursor: grab; touch-action: pan-y; overscroll-behavior-inline: contain; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: #108843 #e8f4ed; }
.greway-warranty-table-scroll::-webkit-scrollbar { height: 8px; }
.greway-warranty-table-scroll::-webkit-scrollbar-track { border-radius: 999px; background: #e8f4ed; }
.greway-warranty-table-scroll::-webkit-scrollbar-thumb { border-radius: 999px; background: #108843; }
.greway-warranty-table-scroll.is-dragging { cursor: grabbing; user-select: none; }
@media (max-width: 767px) {
	.greway-warranty-table { width: max-content; min-width: 1000px; }
	.greway-warranty-table th, .greway-warranty-table td { white-space: nowrap; }
}

/* GIAI ĐOẠN B (Elementor widget) / C (WooCommerce) / D (News) — bổ sung CSS đè
   ở đây khi markup WordPress sinh ra không khớp cấu trúc HTML gốc, theo đúng
   tinh thần "giữ asset gốc, chỉ đè khi cần" (build plan mục 5.2). Chưa có gì
   ở giai đoạn A. */
