/*
Theme Name:   Flatsome Child — Duy Nguyên
Theme URI:    https://diennuocduynguyen.demonet5s.com/
Description:  Child theme của Flatsome cho CÔNG TY TNHH THIẾT BỊ ĐIỆN DUY NGUYÊN. Mọi tùy biến nằm ở đây, không sửa theme gốc.
Author:       Thiết Bị Điện Duy Nguyên
Template:     flatsome
Version:      3.7.1
Requires PHP: 8.0
Text Domain:  flatsome-child
*/

/* ==========================================================================
   BẢNG TƯƠNG PHẢN (WCAG 2.2 AA: chữ thường ≥ 4.5:1; chữ lớn ≥ 18.66px đậm/24px và
   thành phần giao diện ≥ 3:1). Tính theo công thức relative luminance của WCAG.

   Chữ / nền                               Tỷ lệ   Dùng cho
   #1F2A24 text      / #FFFFFF             14.84   Chữ thân
   #1F2A24 text      / #F6F5F2 bg-soft     13.61   Chữ trên nền xám ấm
   #5C6660 muted     / #FFFFFF              5.96   Chữ phụ, chú thích
   #5C6660 muted     / #F0F8EB green-50     5.48   Chữ phụ trên nền xanh nhạt
   #064E2C primary   / #FFFFFF              9.84   Tiêu đề, link, nút viền
   #064E2C primary   / #F0F8EB green-50     9.06   Link trên nền xanh nhạt
   #FFFFFF           / #064E2C primary      9.84   Chữ nút chính, header, footer
   #FFFFFF           / #04331D green-950   14.03   Chữ footer
   #FFFFFF           / #3A8501 secondary    4.63   Chữ nút phụ (Zalo)
   #C1E1A9 green-200 / #064E2C              6.85   Chữ phụ trên nền xanh đậm
   #F5B700 amber     / #064E2C              5.46   Điểm nhấn vàng trên nền xanh đậm
   #1F2A24 text      / #F5B700 amber        8.24   Chữ trên nút vàng
   #49A801 green-500 / #FFFFFF              3.05   CHỈ icon, viền, chữ ≥ 24px — KHÔNG dùng cho chữ thường
   #49A801 green-500 / #064E2C              3.23   Icon trên nền xanh đậm
   #8A948E border    / #FFFFFF              3.13   Viền ô nhập liệu (1.4.11)
   #B42318 error     / #FFFFFF              6.57   Thông báo lỗi
   #B54708 warning   / #FFFFFF              5.43   Cảnh báo
   #067647 success   / #FFFFFF              5.69   Thành công, còn hàng
   #175CD3 info      / #FFFFFF              5.99   Thông tin
   ========================================================================== */

/* ==========================================================================
   1. FONT Be Vietnam Pro (tải cục bộ, OFL — assets/fonts/OFL-LICENSE.txt)
   ========================================================================== */

@font-face {
	font-family: "Be Vietnam Pro";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("assets/fonts/be-vietnam-pro-vietnamese-400-normal.woff2") format("woff2");
	unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
	font-family: "Be Vietnam Pro";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("assets/fonts/be-vietnam-pro-latin-400-normal.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Be Vietnam Pro";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("assets/fonts/be-vietnam-pro-vietnamese-600-normal.woff2") format("woff2");
	unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
	font-family: "Be Vietnam Pro";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("assets/fonts/be-vietnam-pro-latin-600-normal.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Be Vietnam Pro";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("assets/fonts/be-vietnam-pro-vietnamese-700-normal.woff2") format("woff2");
	unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
	font-family: "Be Vietnam Pro";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("assets/fonts/be-vietnam-pro-latin-700-normal.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   2. TOKEN — màu, khoảng cách (thang 4/8px), bo góc, đổ bóng, chữ
   Màu chính khai báo thêm trong Flatsome → Theme Options → Style → Colors:
   Primary #064E2C · Secondary #3A8501 · Success #067647 · Alert #B42318.
   ========================================================================== */

:root {
	/* Thang xanh lá suy ra từ logo: 900 = #064E2C (chữ "THIẾT BỊ ĐIỆN"), 500 = #49A801 (tia sét). */
	--dn-green-50: #F0F8EB;
	--dn-green-100: #E2F1D6;
	--dn-green-200: #C1E1A9;
	--dn-green-300: #9DD076;
	--dn-green-400: #75BD3E;
	--dn-green-500: #49A801;
	--dn-green-600: #38920C;
	--dn-green-700: #287B16;
	--dn-green-800: #176421;
	--dn-green-900: #064E2C;
	--dn-green-950: #04331D;

	--dn-primary: var(--dn-green-900);
	--dn-primary-hover: var(--dn-green-950);
	--dn-secondary: #3A8501;       /* Biến thể đậm của #49A801 để chữ trắng đạt 4.63:1. */
	--dn-secondary-hover: #2F6F01;
	--dn-accent: var(--dn-green-500);

	/* Vàng hổ phách "tia điện": chỉ dùng điểm nhấn, không làm màu chủ đạo. */
	--dn-amber: #F5B700;
	--dn-amber-hover: #E0A800;

	/* Trung tính xám ấm. */
	--dn-text: #1F2A24;
	--dn-muted: #5C6660;
	--dn-border-strong: #8A948E;
	--dn-border: #CFD5D1;
	--dn-border-soft: #E4E8E5;
	--dn-bg: #FFFFFF;
	--dn-bg-soft: #F6F5F2;

	/* Màu chức năng. */
	--dn-success: #067647;
	--dn-success-bg: #ECFDF3;
	--dn-warning: #B54708;
	--dn-warning-bg: #FFFAEB;
	--dn-error: #B42318;
	--dn-error-bg: #FEF3F2;
	--dn-info: #175CD3;
	--dn-info-bg: #EFF8FF;

	--dn-focus: var(--dn-green-900);

	/* Khoảng cách: thang 4/8px. */
	--dn-space-1: 4px;
	--dn-space-2: 8px;
	--dn-space-3: 12px;
	--dn-space-4: 16px;
	--dn-space-5: 24px;
	--dn-space-6: 32px;
	--dn-space-7: 48px;
	--dn-space-8: 64px;

	--dn-radius-sm: 6px;
	--dn-radius: 10px;
	--dn-radius-lg: 16px;
	--dn-radius-pill: 999px;

	--dn-shadow-sm: 0 1px 2px rgba(6, 78, 44, .08);
	--dn-shadow-md: 0 6px 18px rgba(6, 78, 44, .12);
	--dn-shadow-lg: 0 16px 40px rgba(6, 78, 44, .16);

	--dn-font: "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	--dn-text-sm: .875rem;
	--dn-text-base: 1rem;
	--dn-text-lg: 1.125rem;
	--dn-h4: 1.125rem;
	--dn-h3: clamp(1.125rem, 1rem + .5vw, 1.375rem);
	--dn-h2: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
	--dn-h1: clamp(1.75rem, 1.3rem + 2vw, 2.625rem);

	--dn-header-offset: 96px;   /* Chiều cao header dính, để focus/anchor không bị che. */
	--dn-mobile-bar-h: 60px;
}

/* ==========================================================================
   3. NỀN TẢNG
   ========================================================================== */

html {
	scroll-padding-top: var(--dn-header-offset);
}

body {
	font-family: var(--dn-font);
	font-size: var(--dn-text-base);
	line-height: 1.6;
	color: var(--dn-text);
	background: var(--dn-bg);
}

h1, h2, h3, h4, h5, h6,
.heading-font,
.nav > li > a,
.button,
input, select, textarea {
	font-family: var(--dn-font);
}

h1, h2, h3, h4, h5, h6 {
	color: var(--dn-primary);
	line-height: 1.3;
	font-weight: 700;
	letter-spacing: 0;
}
h1 { font-size: var(--dn-h1); }
h2 { font-size: var(--dn-h2); }
h3 { font-size: var(--dn-h3); }
h4 { font-size: var(--dn-h4); }

.dark h1, .dark h2, .dark h3, .dark h4, .dark h5, .dark h6 {
	color: #FFFFFF;
}

p, li { max-width: 72ch; }
.text-center p, .text-center li, .dn-cat-grid li, .nav li, .products li { max-width: none; }

/* Link trong nội dung luôn có gạch chân (không chỉ phân biệt bằng màu — WCAG 1.4.1). */
.entry-content a:not(.button),
.page-wrapper .col-inner p a:not(.button),
.dn-content a:not(.button),
footer.entry-meta a {
	color: var(--dn-primary);
	text-decoration: underline;
	text-underline-offset: .18em;
	text-decoration-thickness: 1px;
}
.entry-content a:not(.button):hover,
.page-wrapper .col-inner p a:not(.button):hover {
	color: var(--dn-secondary-hover);
	text-decoration-thickness: 2px;
}
.dark .col-inner p a:not(.button) { color: #FFFFFF; }

/* Không gõ chữ hoa trong nội dung; chỉ nhãn ngắn mới viết hoa qua CSS (.dn-eyebrow). */
.section-title,
.section-title b,
.widget-title,
.breadcrumbs,
.nav-uppercase > li > a,
th,
.button,
input[type="submit"],
.product-small .category,
.is-uppercase,
.uppercase {
	text-transform: none;
	letter-spacing: 0;
}

[hidden] { display: none !important; }

/* Link "Bỏ qua đến nội dung chính" của Flatsome. */
.skip-link:focus,
.screen-reader-text:focus {
	position: fixed !important;
	top: var(--dn-space-2);
	left: var(--dn-space-2);
	z-index: 100000;
	width: auto;
	height: auto;
	clip: auto;
	clip-path: none;
	padding: var(--dn-space-3) var(--dn-space-4);
	background: #FFFFFF;
	color: var(--dn-primary);
	font-weight: 700;
	border-radius: var(--dn-radius-sm);
	box-shadow: var(--dn-shadow-lg);
}

/* Focus nhìn rõ (2.4.7) — !important vì một số thành phần Flatsome đặt outline: none. */
:focus-visible {
	outline: 3px solid var(--dn-focus) !important;
	outline-offset: 2px !important;
}
.dark :focus-visible,
.nav-dark :focus-visible,
.dn-on-dark :focus-visible,
.dn-hero :focus-visible,
.dn-mobile-bar :focus-visible,
#top-bar :focus-visible,
.footer-wrapper :focus-visible {
	outline-color: var(--dn-amber) !important;
}

/* ==========================================================================
   4. NÚT — primary / secondary / ghost (is-outline) / amber
   Trạng thái: hover, focus-visible, active, disabled.
   ========================================================================== */

.button,
button,
input[type="submit"],
input[type="button"] {
	font-weight: 600;
	border-radius: var(--dn-radius-sm);
	min-height: 44px;
	line-height: 1.25;
	padding: 10px 20px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--dn-space-2);
	text-align: center;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.button.is-small { min-height: 40px; padding: 8px 14px; font-size: var(--dn-text-sm); }

.button.primary:not(.is-outline),
input[type="submit"].button,
.wpcf7-submit {
	background-color: var(--dn-primary);
	border-color: var(--dn-primary);
	color: #FFFFFF;
}
.button.primary:not(.is-outline):hover,
.wpcf7-submit:hover {
	background-color: var(--dn-primary-hover);
	border-color: var(--dn-primary-hover);
	box-shadow: var(--dn-shadow-md);
}

.button.secondary:not(.is-outline) {
	background-color: var(--dn-secondary);
	border-color: var(--dn-secondary);
	color: #FFFFFF;
}
.button.secondary:not(.is-outline):hover {
	background-color: var(--dn-secondary-hover);
	border-color: var(--dn-secondary-hover);
}

.button.primary.is-outline {
	background-color: transparent;
	border: 2px solid var(--dn-primary);
	color: var(--dn-primary);
}
.button.primary.is-outline:hover {
	background-color: var(--dn-primary);
	color: #FFFFFF;
}

/* Trên nền tối: nút trắng chữ xanh, nút viền trắng. */
.button.white:not(.is-outline) {
	background-color: #FFFFFF !important;
	border-color: #FFFFFF !important;
	color: var(--dn-primary) !important;
}
.button.white:not(.is-outline):hover { background-color: var(--dn-green-50) !important; }
.button.white.is-outline { border: 2px solid #FFFFFF; color: #FFFFFF; }
.button.white.is-outline:hover { background-color: #FFFFFF !important; color: var(--dn-primary) !important; }

.button.dn-btn--amber,
.button.primary.dn-btn--amber:not(.is-outline) {
	background-color: var(--dn-amber);
	border: 2px solid var(--dn-amber);
	color: var(--dn-text);
}
.button.dn-btn--amber:hover,
.button.primary.dn-btn--amber:not(.is-outline):hover { background-color: var(--dn-amber-hover); border-color: var(--dn-amber-hover); color: var(--dn-text); }

.button:active,
.wpcf7-submit:active { transform: translateY(1px); box-shadow: none; }

.button:disabled,
.button[disabled],
.button.disabled,
.wpcf7-submit:disabled {
	opacity: 1;
	cursor: not-allowed;
	background-color: var(--dn-bg-soft) !important;
	border-color: var(--dn-border) !important;
	color: var(--dn-muted) !important;
	box-shadow: none !important;
	transform: none;
}

.dn-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--dn-space-3);
	margin: var(--dn-space-4) 0;
}
.dn-actions .button,
.dn-btn { margin: 0; }
/* Flatsome đặt line-height 2.19em cho nút viền, làm nút cao 58px cạnh nút đặc 44px. */
.dn-actions .button.is-outline { line-height: 1.25; }
.dn-actions.justify-center,
.text-center .dn-actions { justify-content: center; }

/* ==========================================================================
   5. HEADER & ĐIỀU HƯỚNG
   ========================================================================== */

/* Flatsome ép ảnh logo vào khung rộng × cao cố định (260×90) nên logo 3,65:1 bị bóp ngang.
   Giữ nguyên khung (không nhảy layout), chỉ vẽ logo đúng tỷ lệ bên trong. */
#logo img { object-fit: contain; object-position: left center; }

.header-nav-main.nav > li > a,
.header-bottom-nav.nav > li > a {
	font-size: .9375rem;
	font-weight: 600;
}
.header-nav .nav-dropdown li a,
.nav-dropdown .menu-item a { font-size: .9375rem; min-height: 40px; }

/* Khung menu thả xuống (Giới thiệu…) và mega menu "Sản phẩm": bo góc, viền mảnh, bóng xanh nhẹ thay
   cho viền xám 2px góc vuông của Flatsome. */
.header-nav .nav-dropdown {
	border: 1px solid var(--dn-border-soft);
	border-radius: var(--dn-radius-lg);
	box-shadow: var(--dn-shadow-lg);
}
.header-nav li.has-dropdown::before { border-bottom-color: var(--dn-border-soft); }
/* Mục cấp 2: icon trong ô xanh nhạt (PHP: dn_dropdown_menu_icon()); rê chuột hoặc trang đang xem thì
   nền mục xanh nhạt, ô icon xanh đậm và hiện mũi tên nhỏ. */
.header-nav .nav-dropdown-simple {
	min-width: 280px;
	padding: var(--dn-space-2);
}
.header-nav .nav-dropdown-simple > li > a {
	display: flex;
	align-items: center;
	gap: var(--dn-space-3);
	padding: 7px var(--dn-space-3) 7px 7px;
	border-radius: var(--dn-radius);
	color: var(--dn-text);
	font-weight: 500;
	transition: background-color .15s, color .15s;
}
.header-nav .dn-menu-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	border-radius: 8px;
	background-color: var(--dn-green-50);
	color: var(--dn-green-800);
	transition: background-color .15s, color .15s;
}
.header-nav .dn-menu-icon svg { display: block; width: 18px; height: 18px; }
.header-nav .nav-dropdown-simple > li > a::after {
	content: "";
	flex: 0 0 auto;
	width: 7px;
	height: 7px;
	margin-left: auto;
	border-top: 2px solid currentColor;
	border-right: 2px solid currentColor;
	transform: translateX(-4px) rotate(45deg);
	opacity: 0;
	transition: opacity .15s, transform .15s;
}
.header-nav .nav-dropdown-simple > li > a:hover,
.header-nav .nav-dropdown-simple > li > a:focus-visible,
.header-nav .nav-dropdown-simple > li.current-menu-item > a {
	background-color: var(--dn-green-50);
	color: var(--dn-primary);
}
.header-nav .nav-dropdown-simple > li > a:hover .dn-menu-icon,
.header-nav .nav-dropdown-simple > li > a:focus-visible .dn-menu-icon,
.header-nav .nav-dropdown-simple > li.current-menu-item > a .dn-menu-icon {
	background-color: var(--dn-primary);
	color: #FFFFFF;
}
.header-nav .nav-dropdown-simple > li > a:hover::after,
.header-nav .nav-dropdown-simple > li > a:focus-visible::after,
.header-nav .nav-dropdown-simple > li.current-menu-item > a::after {
	opacity: 1;
	transform: translateX(0) rotate(45deg);
}
.header-nav .nav-dropdown-simple > li.current-menu-item > a { font-weight: 600; }
@media (prefers-reduced-motion: reduce) {
	.header-nav .nav-dropdown-simple > li > a,
	.header-nav .nav-dropdown-simple > li > a::after,
	.header-nav .dn-menu-icon { transition: none; }
}

#top-bar { font-size: var(--dn-text-sm); }
#top-bar,
#top-bar a,
#top-bar .dn-topbar-text { color: #FFFFFF; }
#top-bar a { text-decoration: none; }
#top-bar a:hover { color: var(--dn-amber); text-decoration: underline; }

/* Thanh menu đậm hơn hero một bậc để hai vùng không dính vào nhau. */
.header-bottom { border-top: 1px solid rgba(255, 255, 255, .08); border-bottom: 1px solid rgba(255, 255, 255, .12); }

.header-contact .dn-tel,
.dn-header-hotline {
	font-weight: 700;
	color: var(--dn-primary);
	white-space: nowrap;
}
.dn-header-hotline {
	display: flex;
	flex-direction: column;
	line-height: 1.25;
	text-align: right;
}
.dn-header-hotline__label {
	font-size: .75rem;
	font-weight: 500;
	color: var(--dn-muted);
}
.dn-header-hotline a {
	font-size: 1.0625rem;
	color: var(--dn-primary);
	text-decoration: none;
}
.dn-header-hotline a:hover { color: var(--dn-secondary-hover); text-decoration: underline; }
.off-canvas .dn-header-hotline { text-align: left; padding: 12px 20px; }
/* Menu điện thoại (off-canvas của Flatsome). Mặc định nền trắng 95% nên chữ của trang phía sau lộ ra,
   rộng 260px làm cụt ô tìm kiếm, mục cấp 1 chữ 12.8px xám nhạt còn mục con 16px: đổi thành nền trắng đặc,
   rộng hơn, mục cấp 1 đậm và rõ, mục con nhỏ hơn và thụt vào. Vị trí lúc đóng theo % để khớp độ rộng mới. */
.off-canvas-left .mfp-content,
.off-canvas-right .mfp-content {
	width: min(320px, 86vw);
	background-color: #FFFFFF;
}
.off-canvas-left .mfp-content { transform: translateX(-100%); }
.off-canvas-right .mfp-content { transform: translateX(100%); }
#main-menu .nav-sidebar > li > a {
	font-size: 1rem;
	font-weight: 600;
	color: var(--dn-text);
}
#main-menu .nav-sidebar > li.current-menu-item > a,
#main-menu .nav-sidebar > li.current-menu-ancestor > a { color: var(--dn-primary); }
#main-menu .nav-sidebar li li > a {
	padding: 9px 20px 9px 32px;
	font-size: .9375rem;
	color: var(--dn-muted);
}
#main-menu .nav-sidebar li li.current-menu-item > a { color: var(--dn-primary); font-weight: 600; }

/* H1 của trang lưu trữ bài viết và cửa hàng/danh mục: Flatsome in nhỏ và in hoa. */
.archive-page-header .page-title,
h1.shop-page-title {
	font-size: var(--dn-h1);
	text-transform: none;
	letter-spacing: 0;
	color: var(--dn-primary);
}
.archive-page-header .taxonomy-description { color: var(--dn-muted); }

.breadcrumbs { font-size: var(--dn-text-sm); color: var(--dn-muted); }
.breadcrumbs a { color: var(--dn-primary); }

/* ==========================================================================
   6. ẢNH PLACEHOLDER (logo) — khung tỷ lệ cố định, logo contain, nền xanh nhạt
   Logo được gắn class .dn-logo-ph tự động (inc/shortcodes.php); vị trí trong UX Builder
   có class "thay-anh". Khi thay ảnh thật, class .dn-logo-ph tự mất.
   ========================================================================== */

img.dn-logo-ph {
	aspect-ratio: 1 / 1;
	width: 100%;
	height: auto;
	object-fit: contain !important;
	padding: 14%;
	background-color: var(--dn-green-50);
}
/* Chỉ ảnh còn là logo tạm: ảnh thật đặt vào ô "thay-anh" phải lấp đầy khung như thường. */
.image-cover img.dn-logo-ph,
.banner-bg img.dn-logo-ph,
.thay-anh img.dn-logo-ph {
	object-fit: contain !important;
	padding: 10%;
	background-color: var(--dn-green-50);
}
.thay-anh .img-inner,
.thay-anh .image-cover {
	background-color: var(--dn-green-50);
	border-radius: var(--dn-radius);
}
.dn-hero .thay-anh .img-inner,
.dn-hero .thay-anh img.dn-logo-ph { background-color: #FFFFFF; }
/* Trong khung .image-cover (card bài viết, banner) Flatsome tự đặt tỷ lệ khung: ảnh lấp đầy khung. */
.image-cover img.dn-logo-ph { aspect-ratio: auto; height: 100%; }
/* Ảnh đại diện ở trang chi tiết bài viết: băng ngang, để logo tạm không chiếm cả màn hình. */
.single-post .entry-image img.dn-logo-ph { aspect-ratio: 21 / 9; padding: 5% 22%; }
.header-cart-link img.dn-logo-ph,
.cart_list img.dn-logo-ph,
.woocommerce-mini-cart img.dn-logo-ph,
.shop_table img.dn-logo-ph { padding: 8%; }

/* ==========================================================================
   7. CÁC KHỐI TRANG CHỦ / TRANG NỘI DUNG
   ========================================================================== */

/* Họa tiết đường mạch điện nhẹ lấy cảm hứng từ tia sét trong logo (chỉ trang trí). */
.dn-hero,
.dn-on-dark.dn-pattern {
	background-color: var(--dn-primary);
	--dn-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'%3E%3Cg fill='none' stroke='%23176421' stroke-width='1.5'%3E%3Cpath d='M0 50h50l25 25h50l25-25h50M0 150h75l25-25h100M50 50V0M125 125v75'/%3E%3C/g%3E%3Cg fill='%23176421'%3E%3Ccircle cx='50' cy='50' r='4'/%3E%3Ccircle cx='125' cy='125' r='4'/%3E%3Ccircle cx='150' cy='50' r='4'/%3E%3C/g%3E%3C/svg%3E");
	background-image: var(--dn-pattern);
	background-size: 200px 200px;
	color: #FFFFFF;
}
.dn-hero h1 {
	color: #FFFFFF;
	font-size: var(--dn-h1);
	margin-bottom: var(--dn-space-4);
}
.dn-hero p,
.dn-on-dark p { color: var(--dn-green-100); font-size: var(--dn-text-lg); }
/* Section .dn-hero có ảnh nền (PHP tự thêm class dn-hero--anh khi section có bg; trong UX Builder ảnh
   nằm ở style của .section-bg): lớp xanh đậm bên trái mờ dần sang phải để chữ trắng đọc rõ, và vẫn phủ
   nhẹ phần ảnh bên phải; backdrop-filter giảm độ rực để ảnh màu chói (xanh neon…) hợp tông xanh
   thương hiệu. Dưới 850px phủ đều cả ảnh. */
.dn-hero--anh > .section-bg::after,
.dn-hero > .section-bg[style*="url("]::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(90deg, rgba(6, 78, 44, .97) 0%, rgba(6, 78, 44, .92) 38%, rgba(6, 78, 44, .55) 62%, rgba(6, 78, 44, .3) 100%);
	-webkit-backdrop-filter: saturate(.6) brightness(.85);
	backdrop-filter: saturate(.6) brightness(.85);
}
@media (max-width: 849px) {
	.dn-hero--anh > .section-bg::after,
	.dn-hero > .section-bg[style*="url("]::after { background: rgba(6, 78, 44, .88); }
}

.dn-eyebrow {
	display: inline-block;
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--dn-green-800);
	margin-bottom: var(--dn-space-2);
}
.dark .dn-eyebrow,
.dn-hero .dn-eyebrow { color: var(--dn-amber); }

.dn-lead { font-size: var(--dn-text-lg); color: var(--dn-muted); }
.dn-muted { color: var(--dn-muted); }
.dn-bg-soft { background-color: var(--dn-bg-soft); }
.dn-bg-green { background-color: var(--dn-green-50); }

/* Tiêu đề section h2 + gạch nhấn xanh tươi. */
.dn-section-title { margin-bottom: var(--dn-space-5); }
.dn-section-title h2 { margin-bottom: var(--dn-space-2); }
.dn-section-title h2::after {
	content: "";
	display: block;
	width: 56px;
	height: 4px;
	margin-top: var(--dn-space-3);
	border-radius: 2px;
	background: var(--dn-accent);
}
.text-center .dn-section-title h2::after,
.dn-section-title.text-center h2::after { margin-left: auto; margin-right: auto; }

/* Dải cam kết (ul, không dùng heading). */
.dn-cam-ket {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: var(--dn-space-3);
}
.dn-cam-ket > li {
	margin: 0;
	display: flex;
	gap: var(--dn-space-3);
	align-items: flex-start;
	padding: var(--dn-space-4);
	background: #FFFFFF;
	border: 1px solid var(--dn-border-soft);
	border-radius: var(--dn-radius);
	font-weight: 600;
	line-height: 1.45;
}
.dn-cam-ket > li::before {
	content: "";
	flex: 0 0 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--dn-green-50) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%2349A801' d='M13 2 4 14h7l-1 8 9-12h-7z'/%3E%3C/svg%3E") center / 16px no-repeat;
	border: 1px solid var(--dn-green-200);
}
.dn-cam-ket small { display: block; font-weight: 400; color: var(--dn-muted); }

/* Lưới danh mục có icon [dn_danh_muc]. */
.dn-cat-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--dn-space-3);
}
@media (min-width: 550px) { .dn-cat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 850px) { .dn-cat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--dn-space-4); } }
.dn-cat-grid > li,
.col-inner .dn-cat-grid > li { margin: 0; }
.dn-cat-grid a {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--dn-space-3);
	height: 100%;
	padding: var(--dn-space-5) var(--dn-space-3);
	background: #FFFFFF;
	border: 1px solid var(--dn-border-soft);
	border-radius: var(--dn-radius-lg);
	color: var(--dn-text);
	text-align: center;
	text-decoration: none;
	transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.dn-cat-grid a:hover {
	border-color: var(--dn-accent);
	box-shadow: var(--dn-shadow-md);
	transform: translateY(-2px);
}
.dn-cat-grid .dn-icon {
	width: 48px;
	height: 48px;
	padding: 10px;
	box-sizing: content-box;
	border-radius: 50%;
	background: var(--dn-green-50);
	color: var(--dn-green-700);
}
.dn-cat-name {
	margin: 0;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.35;
	color: inherit;
}

/* Bản gọn trong mega-menu "Sản phẩm". */
.dn-cat-grid--compact { gap: var(--dn-space-2); }
@media (min-width: 850px) { .dn-cat-grid--compact { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--dn-space-2); } }
.dn-cat-grid--compact a {
	flex-direction: row;
	justify-content: flex-start;
	gap: var(--dn-space-3);
	padding: var(--dn-space-3);
	border-radius: var(--dn-radius);
	text-align: left;
}
.dn-cat-grid--compact a:hover { transform: none; box-shadow: none; background: var(--dn-green-50); }
.dn-cat-grid--compact .dn-icon { width: 28px; height: 28px; padding: 6px; flex: 0 0 auto; }
.dn-cat-grid--compact .dn-cat-name { font-size: .9375rem; }
.nav-dropdown .dn-cat-grid { min-width: min(880px, 92vw); }

/* Quy trình đặt hàng 4 bước. */
.dn-steps {
	list-style: none;
	counter-reset: dn-step;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: var(--dn-space-4);
}
.dn-steps > li {
	counter-increment: dn-step;
	position: relative;
	margin: 0;
	padding: var(--dn-space-5) var(--dn-space-4) var(--dn-space-4);
	background: #FFFFFF;
	border: 1px solid var(--dn-border-soft);
	border-radius: var(--dn-radius);
}
.dn-steps > li::before {
	content: counter(dn-step);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin-bottom: var(--dn-space-3);
	border-radius: 50%;
	background: var(--dn-primary);
	color: #FFFFFF;
	font-weight: 700;
	font-size: 1.125rem;
}
.dn-steps h3 { font-size: 1.0625rem; margin-bottom: var(--dn-space-1); }
.dn-steps p { margin: 0; color: var(--dn-muted); }

/* Thẻ nội dung dùng chung. */
.dn-card {
	height: 100%;
	padding: var(--dn-space-5);
	background: #FFFFFF;
	border: 1px solid var(--dn-border-soft);
	border-radius: var(--dn-radius-lg);
	box-shadow: var(--dn-shadow-sm);
}
.dn-card > :last-child { margin-bottom: 0; }

.dn-badge {
	display: inline-block;
	padding: 2px 10px;
	border-radius: var(--dn-radius-pill);
	background: var(--dn-amber);
	color: var(--dn-text);
	font-size: .8125rem;
	font-weight: 700;
	line-height: 1.6;
}

/* Danh sách thông tin pháp lý / liên hệ (dl). */
/* Flatsome đặt dl in hoa, mờ 80% và giãn chữ — bỏ để địa chỉ, email đọc đúng như viết. */
.dn-info-list { margin: 0; text-transform: none; letter-spacing: 0; opacity: 1; font-size: inherit; line-height: inherit; }
.dn-info-list > div {
	display: grid;
	grid-template-columns: minmax(110px, 34%) minmax(0, 1fr);
	gap: var(--dn-space-3);
	padding: var(--dn-space-2) 0;
	border-bottom: 1px solid var(--dn-border-soft);
}
.dn-info-list dt { font-weight: 600; color: var(--dn-muted); }
/* Email dài không có chỗ ngắt: cho xuống dòng thay vì tràn và bị cắt trên màn 320–360px. */
.dn-info-list dd { margin: 0; overflow-wrap: anywhere; }
.dark .dn-info-list > div { border-color: rgba(255, 255, 255, .16); }
.dark .dn-info-list dt { color: var(--dn-green-200); }
.dark .dn-info-list dd,
.dark .dn-info-list a { color: #FFFFFF; }

/* Chỗ trống chờ chủ doanh nghiệp bổ sung (giấy chứng nhận, đánh giá thật). */
.dn-todo {
	padding: var(--dn-space-4);
	border: 2px dashed var(--dn-border);
	border-radius: var(--dn-radius);
	color: var(--dn-muted);
	background: var(--dn-bg-soft);
}

/* Bản đồ nhúng. */
.dn-map {
	position: relative;
	overflow: hidden;
	border-radius: var(--dn-radius-lg);
	background: var(--dn-green-50);
}
.dn-map iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.dn-byline { font-size: var(--dn-text-sm); color: var(--dn-muted); }

/* Mục lục bài viết. */
.dn-toc {
	margin: var(--dn-space-5) 0;
	padding: var(--dn-space-4) var(--dn-space-5);
	background: var(--dn-green-50);
	border-left: 4px solid var(--dn-accent);
	border-radius: 0 var(--dn-radius) var(--dn-radius) 0;
}
.dn-toc p { font-weight: 700; margin-bottom: var(--dn-space-2); color: var(--dn-primary); }
.dn-toc ol { margin: 0 0 0 1.2em; }
.dn-toc li { margin-bottom: var(--dn-space-1); }

.dn-callout {
	margin: var(--dn-space-5) 0;
	padding: var(--dn-space-4) var(--dn-space-5);
	border-radius: var(--dn-radius);
	background: var(--dn-warning-bg);
	border-left: 4px solid var(--dn-warning);
}
.dn-cta-box {
	margin: var(--dn-space-6) 0 var(--dn-space-4);
	padding: var(--dn-space-5);
	border-radius: var(--dn-radius-lg);
	background: var(--dn-primary);
	color: #FFFFFF;
}
.dn-cta-box p { color: var(--dn-green-100); }
.dn-cta-box strong { color: #FFFFFF; }

/* Tiêu đề card bài viết/sản phẩm đổi từ h5/p sang h3 (inc/shortcodes.php): giữ cỡ chữ gọn. */
.post-item h3.post-title {
	font-size: 1.0625rem;
	line-height: 1.4;
	margin-bottom: var(--dn-space-2);
}
.product-small h3.product-title,
.product-small .product-title {
	font-size: .9375rem;
	line-height: 1.4;
	font-weight: 600;
	margin: 0 0 var(--dn-space-1);
	color: var(--dn-text);
}
.product-small .product-title a { color: inherit; }

/* ==========================================================================
   7b. TRANG CHỦ DẠNG CỬA HÀNG (shortcode trong inc/home.php)
   Hero "bento" (thẻ chính + thẻ nhóm hàng + thẻ cửa hàng) → dải cam kết → sidebar danh mục
   dính + khối sản phẩm theo nhóm → banner đại lý → 3 cột sản phẩm gọn → kiến thức
   → thương hiệu → cửa hàng & bản đồ. Không slider, lưới tĩnh (CLS = 0).
   ========================================================================== */

.dn-home-top { background: var(--dn-bg-soft); }

/* Flatsome thụt lề 1.3em cho mọi li trong cột; các danh sách dạng thẻ dưới đây tự căn lề. */
.col-inner .dn-cam-ket--bar > li,
.col-inner .dn-side-nav li,
.col-inner .dn-support__list li,
.col-inner .dn-store-card__info li,
.col-inner .dn-brands > li,
.col-inner .dn-checks li,
.col-inner .dn-steps > li,
.col-inner .dn-cat-nav li,
.col-inner .dn-quote__items > li,
.col-inner .dn-catalog-grid > li { margin-left: 0; }
/* Flatsome đặt width: 100% cho mọi heading: trả về tự nhiên để link "Xem tất cả" nằm cùng hàng. */
.dn-pblock__title,
.dn-mini__head h2 { width: auto; }

/* Các cột trong hàng bento cao bằng nhau. */
.dn-bento > .col > .col-inner { height: 100%; }

/* Thẻ hero chính là [ux_banner class="dn-hero-banner"] để chủ site đổi ảnh trong UX Builder
   (bấm Banner → Background → Image). Ảnh hiện trọn, không cắt, ở phần trên của thẻ: PHP gắn
   --dn-hero-ratio theo kích thước ảnh (dn_filter_shortcode_output), trong UX Builder dùng 3:1. Chữ
   và nút nằm dưới ảnh trên nền xanh, nên tùy chọn Height của banner và vị trí/độ rộng Text Box không
   dùng. */
.dn-hero-banner {
	display: flex;
	height: 100%;
	padding-top: 0 !important;
	overflow: hidden;
	border-radius: 20px;
	box-shadow: var(--dn-shadow-md);
}
.dn-hero-banner > .banner-inner.fill {
	position: relative !important;
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	width: auto !important;
	height: auto !important;
}
.dn-hero-banner .banner-bg.fill {
	position: relative !important;
	flex: 0 0 auto;
	width: auto !important;
	height: auto !important;
	aspect-ratio: var(--dn-hero-ratio, 3 / 1);
}
/* Flatsome đặt background-size: cover và vị trí ảnh theo tùy chọn: đổi thành hiện trọn ảnh. */
.dn-hero-banner .banner-bg .bg {
	background-size: contain !important;
	background-position: center !important;
}
/* Mép dưới ảnh nhòe dần rồi chuyển sang xanh của thẻ, không cắt ngang (chủ site yêu cầu). Dải mỏng
   (16%) để không che chân người trong ảnh. Mask làm độ nhòe tăng dần; trình duyệt không có
   backdrop-filter vẫn có lớp chuyển màu. */
.dn-hero-banner .banner-bg.fill::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: -1px;
	left: 0;
	height: 16%;
	pointer-events: none;
	background: linear-gradient(to bottom, rgba(6, 78, 44, 0) 0%, rgba(6, 78, 44, .45) 55%, var(--dn-primary) 100%);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	-webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 75%);
	mask-image: linear-gradient(to bottom, transparent 0%, #000 75%);
}
.dn-hero-banner .banner-layers {
	display: flex;
	flex: 1 1 auto;
	align-items: center;
	height: auto;
	max-width: none;
	padding: clamp(20px, 3vw, 36px);
	z-index: 1;
}
/* Flatsome: .banner-layers > * { position: absolute !important }, transform !important theo vị trí và
   độ rộng % theo id của Text Box. */
.dn-hero-banner .banner-layers > .text-box {
	position: relative !important;
	inset: auto;
	width: auto !important;
	max-height: none;
	transform: none !important;
}
.dn-hero-banner .text-box,
.dn-hero-banner .text-box-content { font-size: 1rem; }
.dn-hero-banner .text-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	column-gap: var(--dn-space-3);
}
.dn-hero-banner .text-inner > :not(.button) { flex: 0 0 100%; }
.dn-hero-banner .text-inner .dn-eyebrow { margin-bottom: var(--dn-space-2); font-size: .8125rem; }
.dn-hero-banner h1 { margin-bottom: var(--dn-space-3); font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.125rem); line-height: 1.2; }
.dn-hero-banner .text-inner > p:not(.dn-eyebrow) { margin-bottom: var(--dn-space-2); font-size: var(--dn-text-lg); }
.dn-hero-banner .text-inner > .button { margin: var(--dn-space-3) 0 0; }
.dn-hero-banner .text-inner > .button.is-outline { line-height: 1.25; }
.dn-hero-banner .button > span { line-height: inherit; }
@media (max-width: 549px) {
	/* Mỗi nút một hàng: hai nút vừa một hàng với font dự phòng nhưng xuống hàng khi Be Vietnam Pro
	   tải xong, đẩy thẻ bên dưới (CLS). Nút rộng hết cũng dễ bấm hơn. */
	.dn-hero-banner .text-inner > .button { flex: 1 1 100%; }
}

/* Cột phải của hero: thẻ nhóm hàng + thẻ cửa hàng. */
.dn-bento__side > .col-inner {
	display: flex;
	flex-direction: column;
	gap: var(--dn-space-4);
}

.dn-promo-card {
	position: relative;
	flex: 1 1 auto;
	display: grid;
	grid-template-columns: minmax(0, 1fr) 112px;
	align-items: center;
	gap: var(--dn-space-4);
	padding: var(--dn-space-5);
	border: 1px solid var(--dn-green-100);
	border-radius: 20px;
	background: linear-gradient(135deg, var(--dn-green-50) 0%, #FFFFFF 75%);
	transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.dn-promo-card:hover,
.dn-promo-card:focus-within {
	border-color: var(--dn-green-300);
	box-shadow: var(--dn-shadow-md);
	transform: translateY(-2px);
}
.dn-promo-card .dn-eyebrow { margin-bottom: var(--dn-space-1); }
.dn-promo-card__title {
	margin: 0 0 var(--dn-space-1);
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--dn-primary);
}
.dn-promo-card__desc {
	margin: 0 0 var(--dn-space-2);
	font-size: .9375rem;
	line-height: 1.5;
	color: var(--dn-muted);
}
/* Cả thẻ bấm được nhờ phần ::after của link phủ toàn thẻ. */
.dn-promo-card__link::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 20px;
}
.dn-promo-card__media img {
	display: block;
	width: 112px;
	height: 112px;
	object-fit: contain;
	border-radius: 16px;
	background: #FFFFFF;
}
.dn-promo-card__media img.dn-logo-ph { padding: 12%; }

.dn-store-card {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--dn-border-soft);
	border-radius: 20px;
	background: #FFFFFF;
}
/* Dải "bản đồ" trang trí bằng lưới đường phố vẽ CSS, không tải bản đồ thật ở đầu trang. */
.dn-store-card__map {
	display: grid;
	place-items: center;
	min-height: 72px;
	color: var(--dn-primary);
	background-color: var(--dn-green-50);
	background-image:
		linear-gradient(115deg, transparent 46%, rgba(255, 255, 255, .95) 46%, rgba(255, 255, 255, .95) 54%, transparent 54%),
		linear-gradient(20deg, transparent 47%, rgba(255, 255, 255, .8) 47%, rgba(255, 255, 255, .8) 51%, transparent 51%),
		repeating-linear-gradient(0deg, transparent 0 22px, rgba(6, 78, 44, .06) 22px 23px),
		repeating-linear-gradient(90deg, transparent 0 22px, rgba(6, 78, 44, .06) 22px 23px);
}
.dn-store-card__map .dn-ui-icon {
	fill: var(--dn-amber);
	filter: drop-shadow(0 4px 6px rgba(4, 51, 29, .25));
}
.dn-store-card__body { padding: var(--dn-space-4) var(--dn-space-5) var(--dn-space-5); }
.dn-store-card .dn-eyebrow { margin-bottom: 0; }
.dn-store-card__name { margin: 0 0 var(--dn-space-2); font-size: 1.0625rem; font-weight: 700; color: var(--dn-text); }
.dn-store-card__info { list-style: none; margin: 0 0 var(--dn-space-3); padding: 0; }
.dn-store-card__info li {
	display: flex;
	gap: var(--dn-space-2);
	margin: 0 0 var(--dn-space-1);
	font-size: .9375rem;
	line-height: 1.45;
	color: var(--dn-text);
}
.dn-store-card__info .dn-ui-icon { flex: 0 0 auto; margin-top: 2px; color: var(--dn-green-700); }
.dn-store-card .dn-actions .button { margin: 0; }

/* Dải cam kết dạng một thẻ, mỗi ý một icon riêng. */
.dn-cam-ket--bar {
	gap: 0;
	background: #FFFFFF;
	border: 1px solid var(--dn-border-soft);
	border-radius: 20px;
	box-shadow: var(--dn-shadow-sm);
}
.dn-cam-ket--bar > li {
	align-items: center;
	padding: var(--dn-space-5);
	background: transparent;
	border: 0;
	border-radius: 0;
}
.dn-cam-ket--bar > li::before {
	flex: 0 0 48px;
	height: 48px;
	background-size: 24px;
	background-color: var(--dn-green-50);
	border: 0;
}
.dn-cam-ket--bar > li:nth-child(1)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23287B16' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7 3v5c0 5-3.5 8.5-7 10-3.5-1.5-7-5-7-10V6z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E"); }
.dn-cam-ket--bar > li:nth-child(2)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23287B16' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h11v10H3zM14 9h4l3 3v4h-7'/%3E%3Ccircle cx='7' cy='17.5' r='1.8'/%3E%3Ccircle cx='17' cy='17.5' r='1.8'/%3E%3C/svg%3E"); }
.dn-cam-ket--bar > li:nth-child(3)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23287B16' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12V4h8l10 10-8 8z'/%3E%3Ccircle cx='7.5' cy='8.5' r='1.5'/%3E%3C/svg%3E"); }
.dn-cam-ket--bar > li:nth-child(4)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23287B16' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='9' r='5'/%3E%3Cpath d='M9 13.5L8 21l4-2 4 2-1-7.5'/%3E%3C/svg%3E"); }
/* Khối [dn_cam_ket]: biểu tượng chọn trong UX Builder (đứng sau các quy tắc theo vị trí ở trên). */
.dn-cam-ket--bar > li.dn-ic-khien::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23287B16' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7 3v5c0 5-3.5 8.5-7 10-3.5-1.5-7-5-7-10V6z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E"); }
.dn-cam-ket--bar > li.dn-ic-xe::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23287B16' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h11v10H3zM14 9h4l3 3v4h-7'/%3E%3Ccircle cx='7' cy='17.5' r='1.8'/%3E%3Ccircle cx='17' cy='17.5' r='1.8'/%3E%3C/svg%3E"); }
.dn-cam-ket--bar > li.dn-ic-gia::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23287B16' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12V4h8l10 10-8 8z'/%3E%3Ccircle cx='7.5' cy='8.5' r='1.5'/%3E%3C/svg%3E"); }
.dn-cam-ket--bar > li.dn-ic-huy-chuong::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23287B16' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='9' r='5'/%3E%3Cpath d='M9 13.5L8 21l4-2 4 2-1-7.5'/%3E%3C/svg%3E"); }
.dn-cam-ket--bar > li.dn-ic-hoa-don::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23287B16' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h12v18l-3-2-3 2-3-2-3 2z'/%3E%3Cpath d='M9 8h6M9 12h6M9 16h3'/%3E%3C/svg%3E"); }
.dn-cam-ket--bar > li.dn-ic-dien-thoai::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23287B16' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 3.5h3.5l1.8 4.5-2.3 1.4a11 11 0 0 0 6.6 6.6l1.4-2.3 4.5 1.8V19a2 2 0 0 1-2 2A16.5 16.5 0 0 1 3 5.5a2 2 0 0 1 2-2z'/%3E%3C/svg%3E"); }
.dn-cam-ket--bar > li.dn-ic-dong-ho::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23287B16' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E"); }
.dn-cam-ket--bar > li.dn-ic-dien::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23287B16' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 2L4 14h7l-1 8 9-12h-7z'/%3E%3C/svg%3E"); }
@media (min-width: 850px) {
	/* [dn_cam_ket] đặt --dn-cam-ket-cols theo số ý (1–4 một hàng, 5–6 ý ba cột). */
	.dn-cam-ket--bar { grid-template-columns: repeat(var(--dn-cam-ket-cols, 4), minmax(0, 1fr)); }
	.dn-cam-ket--bar > li + li { border-left: 1px solid var(--dn-border-soft); }
}

/* Sidebar danh mục + hỗ trợ trực tuyến: dính khi cuộn trên máy tính. */
.dn-catalog__side > .col-inner { height: 100%; }
@media (min-width: 850px) {
	.dn-side {
		position: sticky;
		top: calc(var(--dn-header-offset) + var(--dn-space-4));
	}
	.admin-bar .dn-side { top: calc(var(--dn-header-offset) + 32px + var(--dn-space-4)); }
}
.dn-side-nav,
.dn-support {
	overflow: hidden;
	background: #FFFFFF;
	border: 1px solid var(--dn-border-soft);
	border-radius: 16px;
}
.dn-support { margin-top: var(--dn-space-4); }
.dn-side__title {
	margin: 0;
	padding: var(--dn-space-3) var(--dn-space-4);
	background: var(--dn-primary);
	color: #FFFFFF;
	font-size: 1rem;
	line-height: 1.4;
}
.dn-side-nav ul { list-style: none; margin: 0; padding: var(--dn-space-2); }
.dn-side-nav li { margin: 0; }
.dn-side-nav li a {
	display: flex;
	align-items: center;
	gap: var(--dn-space-3);
	min-height: 44px;
	padding: 6px var(--dn-space-2);
	border-radius: var(--dn-radius);
	color: var(--dn-text);
	font-size: .9375rem;
	font-weight: 500;
	line-height: 1.35;
	text-decoration: none;
	transition: background-color .15s ease, color .15s ease;
}
.dn-side-nav li a:hover { background: var(--dn-green-50); color: var(--dn-primary); }
.dn-side-nav .dn-icon {
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	padding: 7px;
	box-sizing: border-box;
	border-radius: 10px;
	background: var(--dn-green-50);
	color: var(--dn-green-700);
	transition: background-color .15s ease, color .15s ease;
}
.dn-side-nav li a:hover .dn-icon { background: var(--dn-primary); color: #FFFFFF; }
.dn-side-nav__count {
	margin-left: auto;
	min-width: 28px;
	padding: 0 var(--dn-space-2);
	border-radius: var(--dn-radius-pill);
	background: var(--dn-bg-soft);
	color: var(--dn-muted);
	font-size: .8125rem;
	font-weight: 600;
	line-height: 1.7;
	text-align: center;
}
.dn-side-nav__all {
	margin: 0;
	padding: var(--dn-space-3) var(--dn-space-4);
	border-top: 1px solid var(--dn-border-soft);
}

.dn-support__list { list-style: none; margin: 0; padding: var(--dn-space-2) var(--dn-space-4); }
.dn-support__list li {
	display: flex;
	gap: var(--dn-space-3);
	margin: 0;
	padding: var(--dn-space-2) 0;
	border-bottom: 1px dashed var(--dn-border-soft);
	line-height: 1.4;
}
.dn-support__list li:last-child { border-bottom: 0; }
.dn-support__list .dn-ui-icon { flex: 0 0 auto; margin-top: 2px; color: var(--dn-green-700); }
.dn-support__list small { display: block; font-size: .8125rem; color: var(--dn-muted); }
.dn-support__list a { font-weight: 700; color: var(--dn-primary); overflow-wrap: anywhere; }
.dn-support__actions { padding: 0 var(--dn-space-4) var(--dn-space-4); }
.dn-support__actions .button { flex: 1 1 auto; margin: 0; }

/* Dưới 850px: danh mục thành hàng chip cuộn ngang, ẩn khối hỗ trợ (đã có thanh Gọi/Zalo ở đáy). */
@media (max-width: 849px) {
	.dn-side-nav { border: 0; border-radius: 0; background: transparent; overflow: visible; }
	.dn-side-nav .dn-side__title { padding: 0 0 var(--dn-space-2); background: none; color: var(--dn-text); font-size: 1.125rem; }
	.dn-side-nav ul {
		display: flex;
		gap: var(--dn-space-2);
		overflow-x: auto;
		padding: 2px 2px var(--dn-space-3);
		scroll-snap-type: x proximity;
		scrollbar-width: thin;
	}
	.dn-side-nav li { flex: 0 0 auto; scroll-snap-align: start; }
	.dn-side-nav li a {
		padding: 4px var(--dn-space-4) 4px 4px;
		border: 1px solid var(--dn-border-soft);
		border-radius: var(--dn-radius-pill);
		background: #FFFFFF;
		white-space: nowrap;
	}
	.dn-side-nav .dn-icon { border-radius: 50%; }
	.dn-side-nav__count,
	.dn-side-nav__all,
	.dn-support { display: none; }
	.dn-catalog__side { padding-bottom: 0; }
}

/* Khối sản phẩm theo nhóm hàng. */
.dn-pblock { scroll-margin-top: calc(var(--dn-header-offset) + var(--dn-space-4)); }
.dn-pblock + .dn-pblock { margin-top: var(--dn-space-7); }
.dn-pblock__head {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--dn-space-2) var(--dn-space-4);
	margin-bottom: var(--dn-space-4);
	padding-bottom: var(--dn-space-3);
	border-bottom: 1px solid var(--dn-border-soft);
}
.dn-pblock__head::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -2px;
	width: 72px;
	height: 3px;
	border-radius: 2px;
	background: var(--dn-accent);
}
.dn-pblock__title {
	display: flex;
	flex: 1 1 auto;
	align-items: center;
	gap: var(--dn-space-3);
	margin: 0;
	font-size: clamp(1.25rem, 1.1rem + .6vw, 1.5rem);
	line-height: 1.3;
}
.dn-pblock__title .dn-icon {
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	padding: 8px;
	box-sizing: border-box;
	border-radius: 12px;
	background: var(--dn-green-50);
	color: var(--dn-green-700);
}
.dn-pblock__sub { margin: calc(-1 * var(--dn-space-2)) 0 var(--dn-space-4); color: var(--dn-muted); }

.dn-more {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 24px;
	color: var(--dn-primary);
	font-size: .9375rem;
	font-weight: 600;
	text-decoration: none;
}
.dn-more:hover { color: var(--dn-secondary-hover); text-decoration: underline; text-underline-offset: .2em; }
.dn-more .dn-ui-icon { transition: transform .2s ease; }
.dn-more:hover .dn-ui-icon { transform: translateX(3px); }

/* Banner nhóm hàng: chữ trên nền xanh đậm / xanh nhạt xen kẽ; thay bằng ảnh khi có anh="ID". */
.dn-cat-banner {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--dn-space-4) var(--dn-space-5);
	margin-bottom: var(--dn-space-4);
	padding: var(--dn-space-5);
	overflow: hidden;
	border-radius: 16px;
}
.dn-cat-banner--dark {
	color: #FFFFFF;
	background: linear-gradient(120deg, var(--dn-green-950) 0%, var(--dn-primary) 55%, #0A5A33 100%);
}
.dn-cat-banner--light {
	color: var(--dn-text);
	background: linear-gradient(120deg, var(--dn-green-50) 0%, #FFFFFF 80%);
	border: 1px solid var(--dn-green-100);
}
/* Tia sét mờ ở góc phải, chỉ trang trí. */
.dn-cat-banner::after {
	content: "";
	position: absolute;
	right: -24px;
	top: -30px;
	width: 160px;
	height: 160px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%2349A801' d='M13 2 4 14h7l-1 8 9-12h-7z'/%3E%3C/svg%3E") center / contain no-repeat;
	opacity: .12;
	pointer-events: none;
}
.dn-cat-banner__icon {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 56px;
	height: 56px;
	border-radius: 14px;
	background: #FFFFFF;
	color: var(--dn-green-700);
}
.dn-cat-banner--dark .dn-cat-banner__icon { background: rgba(255, 255, 255, .1); color: var(--dn-amber); }
.dn-cat-banner__icon .dn-icon { width: 30px; height: 30px; }
.dn-cat-banner__body { position: relative; z-index: 1; flex: 1 1 280px; min-width: 0; }
.dn-cat-banner__brands {
	margin: 0 0 2px;
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--dn-green-800);
}
.dn-cat-banner--dark .dn-cat-banner__brands { color: var(--dn-amber); }
.dn-cat-banner__desc { margin: 0; font-size: .9375rem; line-height: 1.55; }
.dn-cat-banner--dark .dn-cat-banner__desc { color: var(--dn-green-100); }
.dn-cat-banner .button { position: relative; z-index: 1; flex: 0 0 auto; margin: 0; }
.dn-cat-banner--dark :focus-visible { outline-color: var(--dn-amber) !important; }
.dn-cat-banner--image { display: block; padding: 0; }
.dn-cat-banner--image::after { content: none; }
.dn-cat-banner--image img { display: block; width: 100%; height: auto; }

/* Card sản phẩm hiện đại: khối sản phẩm trang chủ, trang cửa hàng/danh mục, sản phẩm liên quan. */
.dn-products > .row { margin-bottom: 0; }
.dn-products .col { padding-bottom: var(--dn-space-4); }
.dn-products .col-inner,
.shop-container .products .col-inner,
.related-products-wrapper .products .col-inner { height: 100%; }
.dn-products .product-small.box,
.shop-container .products .product-small.box,
.related-products-wrapper .products .product-small.box {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	background: #FFFFFF;
	border: 1px solid var(--dn-border-soft);
	border-radius: 14px;
	transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.dn-products .product-small.box:hover,
.dn-products .product-small.box:focus-within,
.shop-container .products .product-small.box:hover,
.shop-container .products .product-small.box:focus-within,
.related-products-wrapper .products .product-small.box:hover,
.related-products-wrapper .products .product-small.box:focus-within {
	border-color: var(--dn-green-200);
	box-shadow: var(--dn-shadow-md);
	transform: translateY(-3px);
}
/* Flatsome căn .box-image bằng margin: 0 auto — trong khung flex sẽ co về 0, phải đặt lại. */
.dn-products .box-image,
.shop-container .products .box-image,
.related-products-wrapper .products .box-image { width: 100%; margin: 0; background: var(--dn-bg-soft); }
.dn-products .box-image img,
.shop-container .products .box-image img,
.related-products-wrapper .products .box-image img { transition: transform .35s ease; }
.dn-products .product-small.box:hover .box-image img,
.shop-container .products .product-small.box:hover .box-image img,
.related-products-wrapper .products .product-small.box:hover .box-image img { transform: scale(1.04); }
.dn-products .box-text,
.shop-container .products .box-text,
.related-products-wrapper .products .box-text {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	padding: var(--dn-space-3) var(--dn-space-4) var(--dn-space-4);
}
.dn-products .price-wrapper,
.shop-container .products .price-wrapper,
.related-products-wrapper .products .price-wrapper { margin-top: auto; padding-top: var(--dn-space-1); }
.dn-products .dn-price-contact,
.shop-container .products .dn-price-contact,
.related-products-wrapper .products .dn-price-contact {
	display: inline-block;
	padding: 1px 10px;
	border-radius: var(--dn-radius-pill);
	background: var(--dn-green-50);
	font-size: .875rem;
}

/* Banner đại lý & nhà thầu + quy trình 4 bước gọn. */
.dn-dealer {
	display: grid;
	gap: var(--dn-space-6);
	align-items: center;
	padding: clamp(24px, 4vw, 48px);
	border-radius: 24px;
	overflow: hidden;
}
@media (min-width: 850px) {
	.dn-dealer { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
	.dn-dealer--mot-cot { grid-template-columns: minmax(0, 1fr); } /* [dn_dai_ly] không có bước nào. */
}
.dn-dealer h2,
.dn-dealer h3 { color: #FFFFFF; }
.dn-dealer h2 { font-size: var(--dn-h2); margin-bottom: var(--dn-space-4); }
.dn-dealer h3 { font-size: 1.125rem; margin-bottom: var(--dn-space-4); }
.dn-checks { list-style: none; margin: 0 0 var(--dn-space-5); padding: 0; }
.dn-checks li {
	position: relative;
	margin: 0 0 var(--dn-space-2);
	padding-left: 30px;
	color: var(--dn-green-100);
	line-height: 1.5;
}
.dn-checks li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 2px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--dn-amber) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F2A24' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12l4 4 8-8'/%3E%3C/svg%3E") center / 12px no-repeat;
}
.dn-dealer__steps {
	padding: var(--dn-space-5);
	border: 1px solid rgba(255, 255, 255, .16);
	border-radius: 18px;
	background: rgba(255, 255, 255, .06);
}
.dn-steps--compact { grid-template-columns: minmax(0, 1fr); gap: var(--dn-space-3); }
.dn-steps--compact > li {
	display: flex;
	gap: var(--dn-space-3);
	align-items: flex-start;
	padding: 0;
	background: transparent;
	border: 0;
}
.dn-steps--compact > li::before {
	flex: 0 0 36px;
	width: 36px;
	height: 36px;
	margin: 0;
	background: var(--dn-amber);
	color: var(--dn-text);
	font-size: 1rem;
}
.dn-steps--compact strong { display: block; color: #FFFFFF; }
.dn-steps--compact span { display: block; color: var(--dn-green-100); font-size: .9375rem; line-height: 1.5; }

/* Dải chỉ chứa shortcode sản phẩm/thương hiệu/danh mục (class đặt trong UX Builder): chưa có gì để hiện
   thì ẩn cả dải, kể cả tiêu đề và nền. Trang chủ: dn-sec-mini, dn-sec-brands; trang 404: dn-row-cats. */
.dn-sec-mini:not(:has(.dn-mini)),
.dn-sec-brands:not(:has(.dn-brands)),
.dn-row-cats:not(:has(.dn-cat-grid)) {
	display: none;
}

/* Cột có danh sách gọn trống (thương hiệu chưa có sản phẩm): ẩn cột, các cột còn lại chia đều hàng.
   Chỉ còn cột đầu ("Mới cập nhật"): xếp sản phẩm thành 3 cột để dải không trống hai phần ba. */
.dn-sec-mini .row > .col:not(:has(.dn-mini)) { display: none; }
@media (min-width: 850px) {
	.dn-sec-mini .row > .col:has(.dn-mini) { flex: 1 1 0; max-width: 100%; }
	.dn-sec-mini .row:not(:has(> .col ~ .col .dn-mini)) .dn-mini__list {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		column-gap: var(--dn-space-5);
	}
}

/* Danh sách sản phẩm gọn (3 cột). */
.dn-mini {
	height: 100%;
	padding: var(--dn-space-4) var(--dn-space-4) var(--dn-space-2);
	background: #FFFFFF;
	border: 1px solid var(--dn-border-soft);
	border-radius: 16px;
}
.dn-mini__head {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--dn-space-1) var(--dn-space-3);
	margin-bottom: var(--dn-space-2);
	padding-bottom: var(--dn-space-3);
	border-bottom: 1px solid var(--dn-border-soft);
}
.dn-mini__head::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -2px;
	width: 48px;
	height: 3px;
	border-radius: 2px;
	background: var(--dn-accent);
}
.dn-mini__head h2 { margin: 0; font-size: 1.125rem; }
.dn-mini__list { list-style: none; margin: 0; padding: 0; }
.dn-mini__item,
.col-inner .dn-mini__list > .dn-mini__item {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--dn-space-3);
	margin: 0 calc(-1 * var(--dn-space-2));
	padding: var(--dn-space-2);
	border-radius: 12px;
	transition: background-color .15s ease;
}
.dn-mini__item:hover { background: var(--dn-green-50); }
.dn-mini__img {
	flex: 0 0 72px;
	width: 72px;
	height: 72px;
	overflow: hidden;
	border-radius: 10px;
	background: var(--dn-bg-soft);
}
.dn-mini__img img { display: block; width: 100%; height: 100%; object-fit: contain; }
.dn-mini__img img.dn-logo-ph { padding: 10%; }
.dn-mini__name { margin: 0 0 2px; font-size: .9375rem; font-weight: 600; line-height: 1.4; }
.dn-mini__name a { color: var(--dn-text); text-decoration: none; }
.dn-mini__name a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 12px;
}
.dn-mini__item:hover .dn-mini__name a { color: var(--dn-primary); }
.dn-mini__price { font-size: .875rem; }

/* Card bài viết kiến thức. */
.dn-kien-thuc .post-item .col-inner { height: 100%; }
.dn-kien-thuc .box-blog-post {
	height: 100%;
	overflow: hidden;
	background: #FFFFFF;
	border: 1px solid var(--dn-border-soft);
	border-radius: 16px;
	transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.dn-kien-thuc .post-item a:hover .box-blog-post,
.dn-kien-thuc .post-item a:focus-visible .box-blog-post {
	border-color: var(--dn-green-200);
	box-shadow: var(--dn-shadow-md);
	transform: translateY(-3px);
}
.dn-kien-thuc .box-blog-post .box-text { padding: var(--dn-space-4) var(--dn-space-5) var(--dn-space-5); }

/* Thương hiệu: logo của hãng nếu đã chọn (ô "Logo" khi sửa thương hiệu), không thì tên hãng; ô cuối mời
   gửi danh sách vật tư. */
.dn-brands {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: var(--dn-space-4);
}
.dn-brands li { margin: 0; }
.dn-brands a {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 2px;
	height: 100%;
	min-height: 112px;
	padding: var(--dn-space-5);
	background: #FFFFFF;
	border: 1px solid var(--dn-border-soft);
	border-radius: 16px;
	color: var(--dn-text);
	text-decoration: none;
	transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.dn-brands a:hover { border-color: var(--dn-green-300); box-shadow: var(--dn-shadow-md); transform: translateY(-2px); }
.dn-brands__name { font-size: 1.5rem; font-weight: 800; line-height: 1.2; letter-spacing: -.01em; color: var(--dn-primary); }
/* Logo nằm trong khung cao cố định, co theo chiều nào chạm trước: logo ngang dài (Panasonic) và logo gần
   vuông (Tiền Phong) trông cân nhau, các ô cao bằng nhau. */
.dn-brands__logo {
	display: flex;
	align-items: center;
	height: 56px;
	margin-bottom: var(--dn-space-2);
}
.dn-brands__logo img {
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: 100%;
	object-fit: contain;
}
.dn-brands__count { font-size: .9375rem; color: var(--dn-muted); }
.dn-brands__ask a { border-style: dashed; border-color: var(--dn-border-strong); background: transparent; }
.dn-brands__ask .dn-brands__name { font-size: 1.125rem; }

/* Điện thoại: lưới sản phẩm thành hàng vuốt ngang (thấy một phần thẻ thứ ba để gợi ý vuốt),
   trang ngắn hơn nhiều; thẻ vẫn là link thường nên Tab tới đâu hàng tự cuộn tới đó. */
@media (max-width: 549px) {
	.dn-products > .row {
		flex-wrap: nowrap;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: thin;
	}
	.dn-products > .row > .col {
		flex: 0 0 46%;
		max-width: 46%;
		scroll-snap-align: start;
	}
	.dn-cat-banner { gap: var(--dn-space-3); padding: var(--dn-space-4); }
	.dn-cat-banner__icon { width: 44px; height: 44px; border-radius: 12px; }
	.dn-cat-banner__icon .dn-icon { width: 24px; height: 24px; }
	.dn-cat-banner__body { flex-basis: calc(100% - 60px); }
	.dn-cat-banner__desc { font-size: .875rem; }
	.dn-brands { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--dn-space-3); }
	.dn-brands__ask { grid-column: 1 / -1; }
	.dn-brands a { min-height: 88px; padding: var(--dn-space-4); }
	.dn-brands__name { font-size: 1.25rem; }
	.dn-brands__logo { height: 44px; }
}

/* Video YouTube tải khi bấm. */
.dn-video { max-width: 960px; margin: 0 auto; }
.dn-video__facade,
.dn-video iframe {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border: 0;
	border-radius: 20px;
	background: var(--dn-green-950);
}
.dn-video__facade img { width: 100%; height: 100%; object-fit: cover; opacity: .85; }
.dn-video__play {
	position: absolute;
	top: 50%;
	left: 50%;
	display: grid;
	place-items: center;
	width: 72px;
	height: 72px;
	border-radius: 50%;
	background: var(--dn-amber);
	color: var(--dn-text);
	transform: translate(-50%, -50%);
	box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
	transition: transform .2s ease;
}
.dn-video__facade:hover .dn-video__play { transform: translate(-50%, -50%) scale(1.08); }

/* ==========================================================================
   8. WOOCOMMERCE
   ========================================================================== */

/* Ảnh chính ở trang chi tiết sản phẩm: khung vuông cố định, ảnh nằm gọn (không cắt), nên mọi sản phẩm
   cao bằng nhau dù ảnh gốc dọc (540×1200), ngang hay vuông. Lưới sản phẩm đã dùng ảnh cắt vuông của WooCommerce. */
.product-images .woocommerce-product-gallery__image img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: contain;
	background-color: var(--dn-bg-soft);
}

.price .dn-unit,
.dn-mini__price .dn-unit {
	margin-left: 2px;
	font-size: .85em;
	font-weight: 400;
	color: var(--dn-muted);
}
.dn-price-contact {
	color: var(--dn-primary);
	font-weight: 700;
}

/* Giá đã công khai (thẻ sản phẩm, trang sản phẩm, danh sách gọn trang chủ): giá đang bán + đơn vị ở dòng
   đầu, giá gốc gạch ngang + nhãn "-20%" ở dòng sau. WooCommerce in giá gốc trước nên đổi thứ tự bằng order;
   ::before rộng 100% để ngắt dòng, chỉ khi có giá gốc. */
.product-small .price-wrapper .price,
.product-info .price,
.dn-mini__price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	row-gap: 2px;
}
.product-small .price-wrapper .price:has(> del)::before,
.product-info .price:has(> del)::before,
.dn-mini__price:has(> del)::before {
	content: "";
	order: 3;
	flex-basis: 100%;
}
.product-small .price ins,
.product-info .price ins,
.dn-mini__price ins { order: 1; }
.product-small .price .dn-unit,
.product-info .price .dn-unit,
.dn-mini__price .dn-unit { order: 2; }
.product-small .price del,
.product-info .price del,
.dn-mini__price del {
	order: 4;
	margin-right: 8px;
	color: var(--dn-muted);
	font-size: .8125rem;
}
.product-info .price del { font-size: .6em; }
.product-small .price .amount,
.product-info .price .amount,
.dn-mini__price .amount { color: var(--dn-primary); }
.product-small .price ins .amount,
.product-info .price ins .amount,
.dn-mini__price ins .amount { color: var(--dn-error); }
/* Flatsome làm mờ giá gốc 60% (chữ xám mờ không đủ tương phản). */
.product-small .price del .amount,
.product-info .price del .amount,
.dn-mini__price del .amount {
	margin-right: 0;
	color: inherit;
	font-weight: 400;
	opacity: 1;
}
.product-small .price-wrapper .price { font-size: 1.0625rem; }
@media (max-width: 549px) {
	/* Thẻ ~148px: thu nhỏ để giá gốc và nhãn % vừa một dòng. */
	.product-small .price-wrapper .price { font-size: 1rem; }
	.product-small .price del { margin-right: 6px; font-size: .75rem; }
	.product-small .dn-sale-pct { padding-right: 4px; padding-left: 4px; }
}

/* Nhãn % giảm (dn_sale_badge). */
.dn-sale-pct {
	order: 5;
	display: inline-block;
	padding: 1px 6px;
	border-radius: var(--dn-radius-sm);
	background: var(--dn-error);
	color: #FFFFFF;
	font-size: .75rem;
	font-weight: 700;
	line-height: 1.4;
	white-space: nowrap;
}
.product-info .dn-sale-pct { font-size: .875rem; }
.dn-table__price .dn-sale-pct { margin-left: 6px; }
.product-small .dn-contact-btn { margin-top: var(--dn-space-2); }

.stock.in-stock { color: var(--dn-success); }
.stock.out-of-stock { color: var(--dn-error); }

.dn-product-identity {
	display: flex;
	flex-wrap: wrap;
	gap: var(--dn-space-1) var(--dn-space-2);
	margin-bottom: var(--dn-space-3);
	font-size: .9375rem;
	color: var(--dn-muted);
}
.dn-product-identity strong { color: var(--dn-text); }
.dn-product-identity a { color: var(--dn-primary); }

.dn-pack-price {
	margin: calc(-1 * var(--dn-space-2)) 0 var(--dn-space-3);
	font-weight: 600;
	color: var(--dn-text);
}

.dn-product-contact {
	display: flex;
	flex-wrap: wrap;
	gap: var(--dn-space-3);
	margin: var(--dn-space-4) 0;
	padding: var(--dn-space-4);
	background: var(--dn-green-50);
	border-radius: var(--dn-radius);
}
.dn-product-contact__note { flex-basis: 100%; margin: 0; }
.dn-product-contact .button { margin: 0; }
/* Điện thoại: ba nút cùng chiều rộng, xếp dọc, dễ bấm. */
@media (max-width: 549px) {
	.dn-product-contact .button { flex: 1 1 100%; justify-content: center; text-align: center; }
	/* Flatsome thu mũi tên của dải sản phẩm trượt còn 20px trên điện thoại — nới lên 28px để dễ bấm (tối thiểu 24px). */
	.row-slider .flickity-prev-next-button.flickity-button { width: 28px !important; }
}

.dn-policy-list {
	list-style: none;
	margin: var(--dn-space-4) 0;
	padding: var(--dn-space-3) var(--dn-space-4);
	border: 1px solid var(--dn-border-soft);
	border-radius: var(--dn-radius);
}
.dn-policy-list li {
	position: relative;
	margin: 0;
	padding: 6px 0 6px 28px;
}
.dn-policy-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 10px;
	width: 18px;
	height: 18px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2349A801' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center / contain no-repeat;
}
.dn-policy-list a { color: var(--dn-text); text-decoration: underline; text-underline-offset: .18em; }

/* Bảng thông số kỹ thuật (tab "Thông số kỹ thuật"). */
.woocommerce-product-attributes {
	width: 100%;
	border: 1px solid var(--dn-border-soft);
	border-radius: var(--dn-radius);
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
}
.woocommerce-product-attributes th,
.woocommerce-product-attributes td {
	padding: 10px 14px;
	border-bottom: 1px solid var(--dn-border-soft);
	text-align: left;
	vertical-align: top;
}
.woocommerce-product-attributes th {
	width: 38%;
	background: var(--dn-bg-soft);
	font-weight: 600;
	font-size: .9375rem;
	color: var(--dn-text);
}
.woocommerce-product-attributes td p { margin: 0; }
.woocommerce-product-attributes td { color: var(--dn-text); }

/* Tab sản phẩm: chữ đủ lớn để chạm/đọc, tab đang mở có màu thương hiệu và gạch chân. */
.product-tabs li > a {
	font-size: 1rem;
	text-transform: none;
	letter-spacing: 0;
	color: var(--dn-text);
	opacity: 1;
}
.product-tabs li.active > a { color: var(--dn-primary); }
.woocommerce-product-attributes tr:last-child th,
.woocommerce-product-attributes tr:last-child td { border-bottom: 0; }

/* Thông báo (toast) của WooCommerce. */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	border-radius: var(--dn-radius);
	padding: var(--dn-space-3) var(--dn-space-4);
}
.woocommerce-message { background: var(--dn-success-bg); color: var(--dn-text); }
.woocommerce-info { background: var(--dn-info-bg); color: var(--dn-text); }
.woocommerce-error { background: var(--dn-error-bg); color: var(--dn-text); }

/* Phân trang. */
.page-numbers a,
.page-numbers span {
	min-width: 40px;
	min-height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* Số sản phẩm trong widget danh mục/bộ lọc: Flatsome làm mờ bằng opacity, không đủ tương phản. */
.widget ul li span.count { opacity: 1; color: var(--dn-muted); }

/* Kết quả lọc rỗng. */
.woocommerce-no-products-found .woocommerce-info,
.dn-empty {
	padding: var(--dn-space-5);
	text-align: center;
	background: var(--dn-bg-soft);
	border-radius: var(--dn-radius);
}

/* ==========================================================================
   8b. MUA HÀNG — danh sách báo giá, cửa hàng, gợi ý + hộp thoại "Tư vấn nhanh"
   (inc/shop.php, assets/js/dn-shop.js)
   ========================================================================== */

/* Nút "Thêm báo giá": icon + đổi sang dấu tích khi sản phẩm đã có trong danh sách. */
.dn-quote-add__icon { display: inline-flex; flex: 0 0 auto; }
.dn-quote-add__icon .dn-ui-icon + .dn-ui-icon,
.dn-quote-add.is-added .dn-quote-add__icon .dn-ui-icon:first-child { display: none; }
.dn-quote-add.is-added .dn-quote-add__icon .dn-ui-icon + .dn-ui-icon { display: block; }

.dn-quote-add:not(.button) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-height: 40px;
	padding: 8px 14px;
	border: 1px solid var(--dn-green-200);
	border-radius: var(--dn-radius);
	background: var(--dn-green-50);
	color: var(--dn-primary);
	font-size: .875rem;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.dn-quote-add:not(.button):hover {
	background: var(--dn-primary);
	border-color: var(--dn-primary);
	color: #FFFFFF;
}
.dn-quote-add:not(.button).is-added {
	background: var(--dn-success-bg);
	border-color: var(--dn-success);
	color: var(--dn-success);
}
.dn-quote-add:not(.button).is-added:hover { background: var(--dn-success); color: #FFFFFF; }
.dn-quote-add--card { position: relative; width: 100%; margin-top: var(--dn-space-3); }
/* Chữ ngắn "Báo giá" (dn_quote_button $short) chỉ hiện khi nút hẹp. */
.dn-quote-add__short { display: none; }
@media (max-width: 549px) {
	/* Thẻ sản phẩm trên điện thoại chỉ rộng ~148px: icon + "Thêm báo giá" (111px) không vừa nút (100px),
	   chữ bị cắt. Hiện "Báo giá"; nhãn đầy đủ vẫn còn cho trình đọc màn hình. */
	.dn-quote-add--card:not(.button) { padding-right: 10px; padding-left: 10px; }
	.dn-quote-add--card .dn-quote-add__label {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}
	.dn-quote-add--card .dn-quote-add__short { display: inline; }
}
/* Flatsome đặt margin .1em cho link trong .box-text, đè dòng trên: nút dính sát giá. */
.product-small .box-text a.dn-quote-add--card { margin-top: var(--dn-space-3); }
.dn-table td .dn-quote-add { padding: 6px 12px; min-height: 36px; text-decoration: none; }
.dn-product-contact .dn-quote-add.is-added { background-color: var(--dn-success); border-color: var(--dn-success); color: #FFFFFF; }

/* Thanh danh mục có icon đầu trang cửa hàng: xuống dòng trên máy tính, vuốt ngang trên điện thoại. */
.dn-cat-nav { margin: 0 0 var(--dn-space-5); }
.dn-cat-nav ul {
	display: flex;
	flex-wrap: wrap;
	gap: var(--dn-space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}
.dn-cat-nav ul li { flex: 0 0 auto; margin: 0; }
.dn-cat-nav a {
	display: inline-flex;
	align-items: center;
	gap: var(--dn-space-2);
	min-height: 44px;
	padding: 4px 12px 4px 4px;
	border: 1px solid var(--dn-border-soft);
	border-radius: var(--dn-radius-pill);
	background: #FFFFFF;
	color: var(--dn-text);
	font-size: .9375rem;
	font-weight: 600;
	line-height: 1.25;
	text-decoration: none;
	white-space: nowrap;
	transition: border-color .15s ease, background-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.dn-cat-nav .dn-icon,
.dn-cat-nav .dn-ui-icon {
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	padding: 7px;
	box-sizing: border-box;
	border-radius: 50%;
	background: var(--dn-green-50);
	color: var(--dn-green-700);
}
.dn-cat-nav__count {
	min-width: 24px;
	padding: 0 7px;
	border-radius: var(--dn-radius-pill);
	background: var(--dn-bg-soft);
	color: var(--dn-muted);
	font-size: .8125rem;
	line-height: 22px;
	text-align: center;
}
.dn-cat-nav a:hover { border-color: var(--dn-green-300); color: var(--dn-primary); box-shadow: var(--dn-shadow-sm); }
.dn-cat-nav a[aria-current="page"] { border-color: var(--dn-primary); background: var(--dn-primary); color: #FFFFFF; }
.dn-cat-nav a[aria-current="page"] .dn-icon,
.dn-cat-nav a[aria-current="page"] .dn-ui-icon { background: rgba(255, 255, 255, .14); color: #FFFFFF; }
.dn-cat-nav a[aria-current="page"] .dn-cat-nav__count { background: rgba(255, 255, 255, .16); color: #FFFFFF; }
@media (max-width: 849px) {
	.dn-cat-nav { margin-bottom: var(--dn-space-4); }
	.dn-cat-nav ul {
		flex-wrap: nowrap;
		overflow-x: auto;
		padding: 4px 4px 8px;   /* Chừa chỗ cho viền focus trong khung cuộn. */
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}
	.dn-cat-nav ul::-webkit-scrollbar { display: none; }
}

/* Nút đổi kiểu lưới / danh sách (cạnh ô sắp xếp). */
.dn-view-toggle {
	display: inline-flex;
	gap: 2px;
	margin: 0 var(--dn-space-3) 0 0;
	padding: 3px;
	vertical-align: middle;
	border: 1px solid var(--dn-border);
	border-radius: var(--dn-radius);
	background: #FFFFFF;
}
.dn-view-toggle button {
	width: 36px;
	min-height: 36px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 7px;
	background: transparent;
	color: var(--dn-muted);
	line-height: 1;
	box-shadow: none;
}
.dn-view-toggle button:hover { background: var(--dn-green-50); color: var(--dn-primary); }
.dn-view-toggle button[aria-pressed="true"] { background: var(--dn-primary); color: #FFFFFF; }

/* Đầu trang cửa hàng/danh mục dưới 850px: tiêu đề, breadcrumb, rồi MỘT hàng công cụ
   [Lọc] [Sắp xếp] [Lưới/Danh sách] thay vì ba hàng chồng nhau. Hai cột flex của Flatsome thành
   display: contents để các phần tử con xếp chung một lưới. */
@media (max-width: 849px) {
	.shop-page-title .page-title-inner {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr) auto;
		grid-template-areas:
			"title  title title"
			"crumb  crumb crumb"
			"filter sort  view";
		align-items: center;
		gap: 0 var(--dn-space-2);
	}
	.shop-page-title .page-title-inner > .flex-col { display: contents; }
	.shop-page-title .page-title-inner h1 { grid-area: title; margin-bottom: var(--dn-space-1); }
	.shop-page-title .page-title-inner .is-small { grid-area: crumb; margin-bottom: var(--dn-space-4); }
	.shop-page-title .category-filtering { grid-area: filter; display: flex; margin: 0; padding: 0; }
	.shop-page-title .category-filtering .inline-block:empty { display: none; }
	.shop-page-title .filter-button {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		min-height: 44px;
		margin: 0;
		padding: 0 12px;
		border: 1px solid var(--dn-border);
		border-radius: var(--dn-radius);
		background: #FFFFFF;
		color: var(--dn-primary);
		text-transform: none;
	}
	.shop-page-title .filter-button:hover { border-color: var(--dn-green-300); background: var(--dn-green-50); }
	.shop-page-title .woocommerce-ordering { grid-area: sort; margin: 0; }
	.shop-page-title .woocommerce-ordering select {
		width: 100%;
		max-width: none;
		height: 44px;
		margin: 0;
		padding: 0 26px 0 10px;
		font-size: .9375rem;
	}
	.shop-page-title .dn-view-toggle { grid-area: view; margin: 0; }
}

/* Kiểu danh sách: ảnh bên trái, tên + giá ở giữa, nút "Thêm báo giá" bên phải. */
.dn-view-list .shop-container .products > .col {
	flex-basis: 100%;
	max-width: 100%;
	padding-bottom: var(--dn-space-3);
}
.dn-view-list .shop-container .products .product-small.box {
	display: grid;
	grid-template-columns: 112px minmax(0, 1fr);
	transform: none;
}
.dn-view-list .shop-container .products .box-image { height: 100%; }
.dn-view-list .shop-container .products .box-text { padding: var(--dn-space-3) var(--dn-space-4); text-align: left; }
.dn-view-list .shop-container .products .dn-quote-add--card { width: auto; align-self: flex-start; }
@media (min-width: 550px) {
	.dn-view-list .shop-container .products .product-small.box { grid-template-columns: 160px minmax(0, 1fr); }
	.dn-view-list .shop-container .products .box-text {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		align-content: center;
		column-gap: var(--dn-space-5);
		padding: var(--dn-space-4) var(--dn-space-5);
	}
	.dn-view-list .shop-container .products .box-text > * { grid-column: 1; }
	.dn-view-list .shop-container .products .box-text .title-wrapper { font-size: 1.0625rem; }
	.dn-view-list .shop-container .products .box-text .dn-quote-add--card {
		grid-column: 2;
		grid-row: 1 / span 3;
		align-self: center;
		margin: 0;
		padding-inline: 18px;
	}
}

/* Mô tả danh mục dài: 3 dòng đầu + nút "Xem thêm" (dn_category_description). Chỉ thu gọn khi có JS
   (lớp dn-js gắn ở <head>) nên không bao giờ mất chữ; khung có chiều cao cố định nên không gây CLS. */
.dn-term-desc__more { display: none; }
.dn-js .dn-term-desc:not(.is-open) {
	position: relative;
	max-height: 4.8em;   /* 3 dòng × line-height 1.6 */
	overflow: hidden;
}
.dn-js .dn-term-desc:not(.is-open)::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: 1.6em;
	background: linear-gradient(rgba(255, 255, 255, 0), #FFFFFF);
	pointer-events: none;
}
.dn-js .dn-term-desc__more {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	margin: 0 0 var(--dn-space-4);
	padding: 0;
	border: 0;
	background: none;
	color: var(--dn-primary);
	font-size: inherit;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: .18em;
	text-transform: none;
	letter-spacing: 0;
	cursor: pointer;
}
.dn-term-desc__more::after {
	content: "";
	width: 7px;
	height: 7px;
	border: solid currentColor;
	border-width: 0 2px 2px 0;
	transform: translateY(-2px) rotate(45deg);
}
.dn-term-desc__more[aria-expanded="true"]::after { transform: translateY(2px) rotate(-135deg); }
.dn-js .dn-term-desc + .dn-term-desc__more { margin-top: calc(-1 * var(--dn-space-2)); }

/* Sidebar bộ lọc. */
.dn-filter-title {
	display: flex;
	align-items: center;
	gap: var(--dn-space-2);
	margin: 0 0 var(--dn-space-4);
	padding: 10px 14px;
	border-radius: var(--dn-radius);
	background: var(--dn-primary);
	color: #FFFFFF;
	font-size: 1rem;
	line-height: 1.4;
}
.dn-filter-title::before {
	content: "";
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F5B700' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5h16l-6 7.5V19l-4 1.5v-8z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Bộ lọc thuộc tính: ô vuông như checkbox; giá trị đang chọn có dấu tích. */
.woocommerce-widget-layered-nav-list .woocommerce-widget-layered-nav-list__item {
	display: flex;
	align-items: center;
	gap: var(--dn-space-2);
	margin: 0;
	padding: 2px 0;
	border: 0;
}
.woocommerce-widget-layered-nav-list .woocommerce-widget-layered-nav-list__item > a {
	display: inline-flex;
	flex: 1 1 auto;
	align-items: center;
	gap: 10px;
	min-height: 32px;
	padding: 0;
	color: var(--dn-text);
	text-decoration: none;
}
.woocommerce-widget-layered-nav-list .woocommerce-widget-layered-nav-list__item > a::before {
	content: "";
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	margin: 0;
	border: 1.5px solid var(--dn-border-strong);
	border-radius: 4px;
	background: #FFFFFF;
	font-family: inherit;
	transition: border-color .15s ease, background-color .15s ease;
}
.woocommerce-widget-layered-nav-list .woocommerce-widget-layered-nav-list__item > a:hover { color: var(--dn-primary); }
.woocommerce-widget-layered-nav-list .woocommerce-widget-layered-nav-list__item > a:hover::before { border-color: var(--dn-primary); }
.woocommerce-widget-layered-nav-list .woocommerce-widget-layered-nav-list__item--chosen > a { font-weight: 600; color: var(--dn-primary); }
.widget .woocommerce-widget-layered-nav-list .woocommerce-widget-layered-nav-list__item--chosen > a::before { /* Thắng ".widget li.chosen a::before" (dấu "x" mờ) của Flatsome. */
	content: "";
	margin: 0;
	opacity: 1;
	border-color: var(--dn-primary);
	background: var(--dn-primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center / 12px no-repeat;
}
.woocommerce-widget-layered-nav-list__item .count { margin-left: auto; font-size: .8125rem; }
.widget_layered_nav_filters ul { display: flex; flex-wrap: wrap; gap: var(--dn-space-2); margin: 0; padding: 0; list-style: none; }
.widget_layered_nav_filters ul li { margin: 0; }
.widget_layered_nav_filters ul li a {
	display: inline-flex;
	align-items: center;
	min-height: 32px;
	padding: 2px 12px;
	border-radius: var(--dn-radius-pill);
	background: var(--dn-green-50);
	color: var(--dn-primary);
	font-size: .875rem;
	font-weight: 600;
	text-decoration: none;
}
.dn-filter-search { margin-bottom: var(--dn-space-2); }
.dn-filter-search input[type="search"] {
	width: 100%;
	min-height: 40px;
	margin: 0;
	padding-left: 36px;
	background: #FFFFFF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235C6660' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='M16 16l4 4'/%3E%3C/svg%3E") 11px center / 18px no-repeat;
}

/* Thông báo ngắn (toast). Vùng role="status" luôn có trong trang; khi rỗng thì không chiếm chỗ. */
.dn-toast {
	position: fixed;
	left: 50%;
	bottom: 24px;
	z-index: 100000;
	width: max-content;
	max-width: min(92vw, 480px);
	padding: 12px 16px;
	border-radius: var(--dn-radius);
	background: var(--dn-green-950);
	color: #FFFFFF;
	font-size: .9375rem;
	line-height: 1.45;
	box-shadow: var(--dn-shadow-lg);
	opacity: 0;
	pointer-events: none;
	transform: translate(-50%, 12px);
	transition: opacity .2s ease, transform .2s ease;
}
.dn-toast:empty { padding: 0; box-shadow: none; }
.dn-toast.is-visible { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); }
.dn-toast strong { color: #FFFFFF; }
.dn-toast a,
.dn-toast .dn-toast__undo { color: var(--dn-amber); font-weight: 700; text-decoration: underline; text-underline-offset: .18em; }
.dn-toast .dn-toast__undo {
	min-height: 28px;
	margin: 0;
	padding: 0 4px;
	border: 0;
	background: none;
	font-size: inherit;
	line-height: inherit;
	vertical-align: baseline;
}
.dn-toast :focus-visible { outline-color: var(--dn-amber) !important; }
@media (max-width: 849px) {
	.has-dn-mobile-bar .dn-toast { bottom: calc(var(--dn-mobile-bar-h) + 12px + env(safe-area-inset-bottom)); }
}

/* Số sản phẩm trong danh sách báo giá trên nút header và thanh mobile. */
.dn-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	height: 20px;
	padding: 0 6px;
	border-radius: var(--dn-radius-pill);
	background: var(--dn-amber);
	color: var(--dn-text);
	font-size: .75rem;
	font-weight: 700;
	line-height: 1;
}
.dn-mobile-bar__item--quote { position: relative; }
.dn-mobile-bar__item--quote .dn-count {
	position: absolute;
	top: 6px;
	left: calc(50% + 6px);
	background: var(--dn-primary);
	color: #FFFFFF;
	box-shadow: 0 0 0 2px var(--dn-amber);
}

/* Trang Nhận báo giá: danh sách sửa được. */
.dn-quote {
	margin: 0 0 var(--dn-space-6);
	padding: var(--dn-space-4) var(--dn-space-5);
	border: 1px solid var(--dn-border-soft);
	border-radius: var(--dn-radius-lg);
	background: #FFFFFF;
	box-shadow: var(--dn-shadow-sm);
}
.dn-quote__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--dn-space-2) var(--dn-space-4);
	margin-bottom: var(--dn-space-3);
}
.dn-quote__head h2 { width: auto; margin: 0; font-size: var(--dn-h3); }
.dn-quote__head h2:focus { outline: none; }
.dn-quote .dn-quote__clear {
	min-height: 36px;
	margin: 0;
	padding: 6px 12px;
	border: 1px solid var(--dn-border);
	border-radius: var(--dn-radius-sm);
	background: #FFFFFF;
	color: var(--dn-error);
	font-size: .875rem;
}
.dn-quote .dn-quote__clear:hover { border-color: var(--dn-error); background: var(--dn-error-bg); }
.dn-quote__empty { margin: 0; color: var(--dn-muted); }
.dn-quote__items { margin: 0; padding: 0; list-style: none; }
.dn-quote .dn-quote__item {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto auto;
	align-items: center;
	gap: var(--dn-space-2) var(--dn-space-3);
	max-width: none;
	margin: 0;
	padding: var(--dn-space-3) 0;
	border-top: 1px solid var(--dn-border-soft);
}
.dn-quote__info a { color: var(--dn-primary); font-weight: 600; line-height: 1.4; text-decoration: none; }
.dn-quote__info a:hover { text-decoration: underline; text-underline-offset: .18em; }
.dn-quote__sku { display: block; font-size: .8125rem; color: var(--dn-muted); }
.dn-quote__qty { display: flex; align-items: center; gap: 6px; }
.dn-quote__qty input[type="number"] { width: 88px; min-height: 40px; margin: 0; padding: 0 6px; text-align: center; }
.dn-quote__unit { min-width: 3em; font-size: .875rem; color: var(--dn-muted); }
.dn-quote .dn-quote__remove {
	width: 40px;
	min-height: 40px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: var(--dn-radius-sm);
	background: transparent;
	color: var(--dn-muted);
}
.dn-quote .dn-quote__remove:hover { background: var(--dn-error-bg); color: var(--dn-error); }
.dn-quote__note {
	margin: var(--dn-space-3) 0 0;
	padding: 10px 12px;
	border-radius: var(--dn-radius-sm);
	background: var(--dn-green-50);
	font-size: .9375rem;
}
@media (max-width: 549px) {
	.dn-quote { padding: var(--dn-space-4); }
	.dn-quote .dn-quote__item { grid-template-columns: minmax(0, 1fr) auto; }
	.dn-quote__info { grid-column: 1 / -1; }
}

/* Ô gợi ý ở góc màn hình: không che nội dung chính, không lấy focus, đóng được. */
.dn-teaser {
	position: fixed;
	left: 20px;
	bottom: 20px;
	z-index: 990;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 2px var(--dn-space-3);
	width: min(360px, calc(100vw - 32px));
	padding: var(--dn-space-4) 44px var(--dn-space-4) var(--dn-space-4);
	border: 1px solid var(--dn-border-soft);
	border-radius: var(--dn-radius-lg);
	background: #FFFFFF;
	box-shadow: var(--dn-shadow-lg);
	opacity: 0;
	transform: translateY(16px);
	transition: opacity .3s ease, transform .3s ease;
}
.dn-teaser.is-visible { opacity: 1; transform: none; }
.dn-teaser__icon {
	grid-row: 1 / span 3;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 12px;
	background: var(--dn-amber);
	color: var(--dn-text);
}
.dn-teaser__title { margin: 0; font-weight: 700; line-height: 1.35; color: var(--dn-text); }
.dn-teaser__desc { margin: 0; font-size: .875rem; line-height: 1.45; color: var(--dn-muted); }
.dn-teaser__actions { margin-top: var(--dn-space-2); }
.dn-teaser .dn-teaser__close {
	position: absolute;
	top: 6px;
	right: 6px;
	width: 36px;
	min-height: 36px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--dn-muted);
}
.dn-teaser .dn-teaser__close:hover { background: var(--dn-bg-soft); color: var(--dn-text); }
@media (max-width: 849px) {
	.dn-teaser { left: 12px; right: 12px; bottom: 12px; width: auto; }
	.has-dn-mobile-bar .dn-teaser { bottom: calc(var(--dn-mobile-bar-h) + 12px + env(safe-area-inset-bottom)); }
}

/* Hộp thoại "Tư vấn nhanh" (thẻ <dialog> gốc: tự giữ focus bên trong, Esc để đóng). */
.dn-dialog {
	width: min(560px, calc(100vw - 32px));
	max-width: none;
	max-height: calc(100vh - 32px);
	max-height: calc(100dvh - 32px);
	padding: 0;
	border: 0;
	border-radius: 20px;
	background: #FFFFFF;
	color: var(--dn-text);
	box-shadow: 0 24px 64px rgba(4, 51, 29, .35);
	overflow: auto;
	overscroll-behavior: contain;
}
.dn-dialog[open] { animation: dn-dialog-in .2s ease-out; }
.dn-dialog::backdrop { background: rgba(4, 51, 29, .6); }
@keyframes dn-dialog-in { from { opacity: 0; transform: translateY(16px) scale(.98); } }
html:has(.dn-dialog[open]) { overflow: hidden; }
.dn-dialog__head {
	position: relative;
	padding: var(--dn-space-5) 64px var(--dn-space-4) var(--dn-space-5);
	background: linear-gradient(135deg, var(--dn-green-950), var(--dn-green-900));
	color: #FFFFFF;
}
.dn-dialog__head .dn-eyebrow { margin-bottom: 6px; color: var(--dn-amber); font-size: .75rem; }
.dn-dialog__head h2 { margin: 0 0 6px; color: #FFFFFF; font-size: 1.375rem; }
.dn-dialog__head p:not(.dn-eyebrow) { margin: 0; color: var(--dn-green-100); font-size: .9375rem; }
.dn-dialog .dn-dialog__close {
	position: absolute;
	top: 12px;
	right: 12px;
	width: 40px;
	min-height: 40px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .12);
	color: #FFFFFF;
}
.dn-dialog .dn-dialog__close:hover { background: rgba(255, 255, 255, .24); }
.dn-dialog__head :focus-visible { outline-color: var(--dn-amber) !important; }
.dn-dialog__body { padding: var(--dn-space-5) var(--dn-space-5) var(--dn-space-2); }
.dn-dialog .dn-form p { margin-bottom: var(--dn-space-3); }
.dn-dialog .dn-form textarea { min-height: 88px; }
.dn-dialog .wpcf7-submit { width: 100%; }
.dn-dialog__foot {
	max-width: none;
	margin: 0;
	padding: var(--dn-space-3) var(--dn-space-5) var(--dn-space-4);
	border-top: 1px solid var(--dn-border-soft);
	color: var(--dn-muted);
	font-size: .875rem;
}
.dn-dialog__foot a { color: var(--dn-primary); font-weight: 600; text-decoration: underline; text-underline-offset: .18em; }
.dn-dialog__done { padding: var(--dn-space-2) 0 var(--dn-space-4); text-align: center; }
.dn-dialog__done:focus { outline: none; }
.dn-dialog__done svg { color: var(--dn-success); }
.dn-dialog__done p { max-width: none; margin: 0 0 var(--dn-space-3); }
.dn-dialog__done .dn-dialog__done-title { margin: var(--dn-space-2) 0 var(--dn-space-1); font-size: 1.25rem; font-weight: 700; }
@media (max-width: 549px) {
	/* Điện thoại: trượt lên từ đáy màn hình. */
	.dn-dialog {
		width: 100%;
		margin: auto 0 0;
		border-radius: 20px 20px 0 0;
		max-height: 92vh;
		max-height: 92dvh;
	}
	.dn-dialog[open] { animation-name: dn-sheet-in; }
	.dn-dialog__head { padding: var(--dn-space-4) 60px var(--dn-space-4) var(--dn-space-4); }
	.dn-dialog__body { padding: var(--dn-space-4) var(--dn-space-4) var(--dn-space-2); }
	.dn-dialog__foot { padding: var(--dn-space-3) var(--dn-space-4) calc(var(--dn-space-4) + env(safe-area-inset-bottom)); }
}
@keyframes dn-sheet-in { from { transform: translateY(100%); } }

/* Thẻ bảng giá theo hãng [dn_bang_gia_hang]. */
.dn-catalog-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
	gap: var(--dn-space-4);
	margin: 0;
	padding: 0;
	list-style: none;
}
.dn-catalog-grid .dn-catalog-card {
	display: flex;
	flex-direction: column;
	max-width: none;
	margin: 0;
	overflow: hidden;
	border: 1px solid var(--dn-border-soft);
	border-radius: var(--dn-radius-lg);
	background: #FFFFFF;
	transition: border-color .2s ease, box-shadow .2s ease;
}
.dn-catalog-grid .dn-catalog-card:hover { border-color: var(--dn-green-200); box-shadow: var(--dn-shadow-md); }
.dn-catalog-card__cover {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 128px;
	padding: 18px 20px;
	background:
		radial-gradient(circle at 88% 12%, rgba(245, 183, 0, .3), transparent 42%),
		linear-gradient(135deg, var(--dn-green-950), var(--dn-green-800));
	color: #FFFFFF;
}
.dn-catalog-card__kicker { font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--dn-amber); }
.dn-catalog-card__brand { font-size: 1.625rem; font-weight: 800; line-height: 1.15; letter-spacing: -.01em; }
.dn-catalog-card__cover .dn-ui-icon { position: absolute; top: 16px; right: 16px; color: var(--dn-amber); }
.dn-catalog-card__body { display: flex; flex: 1 1 auto; flex-direction: column; padding: var(--dn-space-4) 20px 20px; }
.dn-catalog-card__title { margin: 0 0 6px; font-size: 1.0625rem; }
.dn-catalog-card__desc { margin: 0 0 6px; font-size: .9375rem; color: var(--dn-muted); }
.dn-catalog-card__meta { margin: 0 0 var(--dn-space-3); font-size: .875rem; color: var(--dn-muted); }
.dn-catalog-card__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--dn-space-3) var(--dn-space-4);
	margin-top: auto;
}

/* Câu hỏi thường gặp (<details>) trong trang nội dung. */
.dn-content details {
	margin: 0 0 var(--dn-space-2);
	border: 1px solid var(--dn-border-soft);
	border-radius: var(--dn-radius);
	background: #FFFFFF;
	transition: border-color .15s ease;
}
.dn-content details[open] { border-color: var(--dn-green-200); }
.dn-content summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--dn-space-3);
	min-height: 48px;
	padding: var(--dn-space-3) var(--dn-space-4);
	font-weight: 600;
	cursor: pointer;
	list-style: none;
}
.dn-content summary::-webkit-details-marker { display: none; }
.dn-content summary::after {
	content: "";
	flex: 0 0 auto;
	width: 10px;
	height: 10px;
	margin-right: 4px;
	border-right: 2px solid var(--dn-primary);
	border-bottom: 2px solid var(--dn-primary);
	transform: translateY(-3px) rotate(45deg);
	transition: transform .2s ease;
}
.dn-content details[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
.dn-content details > :not(summary) { margin: 0 var(--dn-space-4) var(--dn-space-4); }

/* ==========================================================================
   9. BẢNG GIÁ [dn_bang_gia] — bảng cuộn ngang bên trong khung trên mobile
   ========================================================================== */

.dn-price-table__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--dn-space-3);
	margin-bottom: var(--dn-space-4);
}
.dn-price-table__meta p { margin: 0; color: var(--dn-muted); }

.dn-price-table__tools {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: var(--dn-space-3) var(--dn-space-4);
	margin-bottom: var(--dn-space-4);
}
.dn-field { flex: 1 1 240px; }
.dn-field label {
	display: block;
	margin-bottom: var(--dn-space-1);
	font-weight: 600;
}
.dn-field input,
.dn-field select { width: 100%; margin: 0; }
/* Lọc nhanh theo danh mục: chip bật/tắt (aria-pressed). */
.dn-chips {
	display: flex;
	flex: 1 1 100%;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--dn-space-2);
	min-width: 0;
}
.dn-chips__label { margin-right: var(--dn-space-1); font-weight: 600; }
.dn-chips .dn-chip {
	min-height: 40px;
	margin: 0;
	padding: 6px 14px;
	border: 1px solid var(--dn-border);
	border-radius: var(--dn-radius-pill);
	background: #FFFFFF;
	color: var(--dn-text);
	font-size: .9375rem;
	font-weight: 600;
	line-height: 1.2;
	white-space: nowrap;
	box-shadow: none;
}
.dn-chips .dn-chip:hover { border-color: var(--dn-primary); color: var(--dn-primary); }
.dn-chips .dn-chip[aria-pressed="true"] { border-color: var(--dn-primary); background: var(--dn-primary); color: #FFFFFF; }
@media (max-width: 549px) {
	.dn-chips { flex-wrap: nowrap; overflow-x: auto; padding: 4px 4px 8px; scrollbar-width: none; }
	.dn-chips::-webkit-scrollbar { display: none; }
	.dn-chips__label { flex: 0 0 auto; }
}
.dn-price-table__count {
	flex-basis: 100%;
	margin: 0;
	font-size: var(--dn-text-sm);
	color: var(--dn-muted);
}

.dn-table-scroll {
	overflow-x: auto;
	border: 1px solid var(--dn-border);
	border-radius: var(--dn-radius);
	-webkit-overflow-scrolling: touch;
}
.dn-table {
	width: 100%;
	min-width: 760px;
	margin: 0;
	border-collapse: collapse;
	font-size: .9375rem;
}
.dn-table caption {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}
.dn-table th,
.dn-table td {
	padding: 10px 12px;
	border-bottom: 1px solid var(--dn-border-soft);
	text-align: left;
	vertical-align: top;
}
.dn-table thead th {
	background: var(--dn-primary);
	color: #FFFFFF;
	font-weight: 600;
	white-space: nowrap;
	border-bottom: 0;
}
.dn-table__group th {
	background: var(--dn-green-100);
	color: var(--dn-primary);
	font-weight: 700;
}
.dn-table tbody tr:not(.dn-table__group):hover td { background: var(--dn-green-50); }
.dn-table td a { color: var(--dn-primary); font-weight: 600; text-decoration: underline; text-underline-offset: .18em; }
.dn-table__price { white-space: nowrap; font-weight: 600; }
.dn-price-table__empty { margin-top: var(--dn-space-4); }

/* ==========================================================================
   10. FORM (Contact Form 7, thanh toán WooCommerce)
   ========================================================================== */

input[type="text"],
input[type="tel"],
input[type="email"],
input[type="search"],
input[type="number"],
input[type="password"],
input[type="url"],
textarea,
select {
	min-height: 44px;
	font-size: 1rem;              /* ≥ 16px để iOS không tự phóng to. */
	color: var(--dn-text);
	background-color: #FFFFFF;
	border: 1px solid var(--dn-border-strong);
	border-radius: var(--dn-radius-sm);
	box-shadow: none;
}
input::placeholder,
textarea::placeholder { color: var(--dn-muted); opacity: 1; }
input:focus,
textarea:focus,
select:focus {
	border-color: var(--dn-primary);
	box-shadow: 0 0 0 1px var(--dn-primary);
}

.dn-form .dn-row {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0 var(--dn-space-4);
}
@media (min-width: 550px) {
	.dn-form .dn-row--2 { grid-template-columns: 1fr 1fr; }
}
.dn-form p { margin-bottom: var(--dn-space-4); max-width: none; }
.dn-form label,
.wpcf7-form label {
	display: block;
	font-weight: 600;
	margin-bottom: var(--dn-space-1);
}
.dn-form .dn-req { color: var(--dn-error); }
.dn-form fieldset { margin: 0 0 var(--dn-space-4); padding: 0; border: 0; }
.dn-form legend { margin-bottom: var(--dn-space-2); padding: 0; border: 0; width: auto; font-weight: 600; font-size: 1rem; text-transform: none; letter-spacing: 0; color: var(--dn-text); }
.dn-form .dn-consent { margin-bottom: var(--dn-space-4); font-size: .9375rem; }
.dn-form .dn-consent label { font-weight: 400; }
.dn-form .dn-hint { display: block; font-size: var(--dn-text-sm); font-weight: 400; color: var(--dn-muted); }
.dn-form .wpcf7-form-control-wrap { display: block; margin-top: var(--dn-space-1); }
.dn-form input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
.dn-form textarea,
.dn-form select { width: 100%; margin: 0; }
.dn-form textarea { min-height: 140px; height: auto; }
.dn-form .wpcf7-radio,
.dn-form .wpcf7-checkbox { display: flex; flex-wrap: wrap; gap: var(--dn-space-2) var(--dn-space-4); }
.dn-form .wpcf7-list-item { margin: 0; }
.dn-form .wpcf7-list-item label { font-weight: 400; display: inline-flex; align-items: center; gap: var(--dn-space-2); min-height: 32px; }
.dn-form .wpcf7-acceptance .wpcf7-list-item label { align-items: flex-start; }
.dn-form input[type="checkbox"],
.dn-form input[type="radio"] { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--dn-primary); }
.dn-form input[type="file"] { min-height: 44px; padding: var(--dn-space-2); border: 1px dashed var(--dn-border-strong); border-radius: var(--dn-radius-sm); width: 100%; }
.dn-form .wpcf7-submit { width: 100%; font-size: 1.0625rem; }
@media (min-width: 550px) { .dn-form .wpcf7-submit { width: auto; min-width: 240px; } }

.wpcf7-not-valid { border-color: var(--dn-error) !important; }
.wpcf7-not-valid-tip {
	display: block;
	margin-top: var(--dn-space-1);
	font-size: var(--dn-text-sm);
	font-weight: 600;
	color: var(--dn-error);
}
.wpcf7 form .wpcf7-response-output {
	margin: var(--dn-space-4) 0 0;
	padding: var(--dn-space-3) var(--dn-space-4);
	border-width: 0 0 0 4px;
	border-radius: var(--dn-radius-sm);
	color: var(--dn-text);
}
.wpcf7 form.sent .wpcf7-response-output { border-color: var(--dn-success); background: var(--dn-success-bg); }
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output { border-color: var(--dn-warning); background: var(--dn-warning-bg); }
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output,
.wpcf7 form.spam .wpcf7-response-output { border-color: var(--dn-error); background: var(--dn-error-bg); }
.wpcf7 form[aria-busy="true"] .wpcf7-submit { cursor: progress; opacity: .85; }
/* Các phần CF7 tự ẩn bằng CSS của plugin; hộp thoại "Tư vấn nhanh" không nạp CSS đó nên ẩn ở đây. */
.wpcf7 .screen-reader-response {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	border: 0;
	word-wrap: normal !important;
}
.wpcf7 .hidden-fields-container { display: none; }
.dn-dialog .wpcf7-spinner { display: none; }
.wpcf7 form .wpcf7-response-output:empty { display: none; }

/* Honeypot: ẩn với người dùng và trình đọc màn hình. */
.dn-hp {
	position: absolute !important;
	left: -10000px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Trang thanh toán: cảnh báo chống mạo danh chuyển khoản. */
.dn-bank-warning {
	padding: var(--dn-space-3) var(--dn-space-4);
	border-left: 4px solid var(--dn-warning);
	background: var(--dn-warning-bg);
	border-radius: var(--dn-radius-sm);
}

/* ==========================================================================
   11. FOOTER
   ========================================================================== */

.dn-footer { font-size: .9375rem; }
.dn-footer p,
.dn-footer li { color: var(--dn-green-100); }
.dn-footer h2,
.dn-footer h3 {
	color: #FFFFFF;
	font-size: 1.0625rem;
	margin-bottom: var(--dn-space-3);
}
.dn-footer ul { list-style: none; margin: 0; padding: 0; }
.dn-footer ul li { margin: 0; }
.dn-footer ul a {
	display: inline-block;
	padding: 6px 0;              /* Vùng chạm ≥ 24px (2.5.8). */
	color: #FFFFFF;
	text-decoration: none;
}
.dn-footer ul a:hover { color: var(--dn-amber); text-decoration: underline; }
.dn-footer a[href^="tel:"]:not(.button),
.dn-footer a[href^="mailto:"]:not(.button) { color: #FFFFFF; font-weight: 600; }
.dn-footer .dn-footer-logo {
	display: inline-block;
	padding: var(--dn-space-3) var(--dn-space-4);
	background: #FFFFFF;
	border-radius: var(--dn-radius);
}
/* [dn_logo]: độ rộng chọn trong UX Builder (--dn-logo-w). Logo của site trùng ảnh tạm (.dn-logo-ph) nên
   bỏ khung vuông, đệm và nền xanh nhạt của ảnh tạm; tỉ lệ ảnh do PHP ghi vào style. */
.dn-footer-logo img { display: block; width: var(--dn-logo-w, 220px); max-width: 100%; height: auto; }
.dn-footer-logo img.dn-logo-ph { padding: 0; background: none; }
.dn-footer .dn-info-list > div { grid-template-columns: 1fr; gap: 0; padding: 6px 0; }
.dn-footer .dn-info-list dt { font-size: .8125rem; }
.dn-footer .dn-actions .button { min-height: 44px; }
/* Dấu "·" giữa các link thừa hưởng màu #777 của Flatsome, chỉ đạt 4.47:1. */
.dn-mega-links { margin: var(--dn-space-3) 0 0; font-size: .9375rem; color: var(--dn-muted); }
.dn-mega-links a { font-weight: 600; color: var(--dn-primary); text-decoration: underline; text-underline-offset: .18em; }
.absolute-footer { font-size: var(--dn-text-sm); }
.back-to-top.button,
.back-to-top.button.is-outline {
	background-color: #FFFFFF;
	color: var(--dn-primary);
	border-color: var(--dn-primary);
}
.absolute-footer.dark,
.absolute-footer.dark a { color: var(--dn-green-100); }

/* ==========================================================================
   12. THANH HÀNH ĐỘNG MOBILE (≤ 849px) — inc/mobile-bar.php
   ========================================================================== */

.dn-mobile-bar { display: none; }

@media (max-width: 849px) {
	.dn-mobile-bar {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 998;
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		padding-bottom: env(safe-area-inset-bottom);
		background: var(--dn-primary);
		box-shadow: 0 -4px 16px rgba(4, 51, 29, .2);
	}
	.dn-mobile-bar__item {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 2px;
		min-height: var(--dn-mobile-bar-h);
		color: #FFFFFF;
		font-size: var(--dn-text-sm);
		font-weight: 600;
		line-height: 1.2;
		text-decoration: none;
	}
	.dn-mobile-bar__item:hover,
	.dn-mobile-bar__item:focus { color: #FFFFFF; background: var(--dn-primary-hover); }
	.dn-mobile-bar__item + .dn-mobile-bar__item { border-left: 1px solid rgba(255, 255, 255, .18); }
	.dn-mobile-bar__item--quote,
	.dn-mobile-bar__item--quote:hover,
	.dn-mobile-bar__item--quote:focus { background: var(--dn-amber); color: var(--dn-text); }
	.dn-mobile-bar .dn-mobile-bar__item:focus-visible { outline-offset: -4px !important; }
	.dn-mobile-bar .dn-mobile-bar__item--quote:focus-visible { outline-color: var(--dn-green-950) !important; }

	body.has-dn-mobile-bar { padding-bottom: calc(var(--dn-mobile-bar-h) + env(safe-area-inset-bottom)); }
	html { scroll-padding-bottom: calc(var(--dn-mobile-bar-h) + 16px); }
	.has-dn-mobile-bar .back-to-top { bottom: calc(var(--dn-mobile-bar-h) + 12px + env(safe-area-inset-bottom)) !important; }

	:root { --dn-header-offset: 72px; }
}

/* ==========================================================================
   13. GIẢM CHUYỂN ĐỘNG (prefers-reduced-motion)
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
	.dn-cat-grid a:hover,
	.dn-promo-card:hover,
	.dn-promo-card:focus-within,
	.dn-products .product-small.box:hover,
	.dn-products .product-small.box:focus-within,
	.dn-products .product-small.box:hover .box-image img,
	.dn-kien-thuc .post-item a:hover .box-blog-post,
	.dn-brands a:hover,
	.dn-more:hover .dn-ui-icon,
	.shop-container .products .product-small.box:hover,
	.shop-container .products .product-small.box:focus-within,
	.shop-container .products .product-small.box:hover .box-image img,
	.related-products-wrapper .products .product-small.box:hover,
	.related-products-wrapper .products .product-small.box:focus-within,
	.related-products-wrapper .products .product-small.box:hover .box-image img,
	.dn-teaser { transform: none; }
	.dn-toast,
	.dn-toast.is-visible { transform: translateX(-50%); }
	.dn-dialog[open] { animation: none; }
	.dn-video__facade:hover .dn-video__play { transform: translate(-50%, -50%); }
}