/*
Theme Name: LoaDevialet Child
Template: storefront
Version: 2.2.8
Text Domain: loadevialet-child
*/

:root {
	/* Bảng màu lấy thẳng từ logo: vàng kim trên navy gần đen */
	--color-bg: #ffffff;
	--color-surface: #ffffff;
	--color-mist: #f4f5f7;      /* nền phụ để đổi nhịp section */
	--color-ink: #0a111f;       /* navy gần đen - đúng nền logo */
	--color-ink-soft: #33405a;
	--color-gray: #7b828e;
	--color-gold: #c9a063;      /* vàng kim của logo */
	--color-gold-lt: #e3c489;
	--color-gold-dark: #a37e42;
	--color-border: #d5d9df;   /* đậm hơn bản cũ #e6e8ec - đường viền cần rõ, không mờ */
	--shadow-mid: 0 4px 10px rgba(10, 17, 31, 0.16);
	--font-body: "Be Vietnam Pro", -apple-system, "Segoe UI", sans-serif;
	--font-display: "Montserrat", "Be Vietnam Pro", sans-serif;  /* khớp chữ trong logo */
	--font-read: "Lora", Georgia, serif;   /* thân bài viết dài */
	--w-page: 1440px;   /* khung chính */
	--w-text: 760px;    /* bề rộng đọc thoải mái */
	--ease-brand: cubic-bezier(0.3, 1, 0.3, 1);
	/* nhịp chữ hoa giãn rộng - đặc trưng logo */
	--track-wide: 0.16em;
	--track-mid: 0.1em;
}

body {
	background: var(--color-bg);
	color: var(--color-ink);
	font-family: var(--font-body);
	font-size: 15px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}

/* Tiêu đề: chữ mảnh, giãn rộng - đồng bộ wordmark trong logo */
h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-display);
	color: var(--color-ink);
	font-weight: 500;
	letter-spacing: var(--track-mid);
	text-wrap: balance;
}
h1 { font-size: 36px; font-weight: 400; line-height: 1.3; text-transform: uppercase; }
h2 { font-size: 26px; font-weight: 500; line-height: 1.35; text-transform: uppercase; }
h3 { font-size: 17px; font-weight: 400; letter-spacing: 0.05em; }
h4, h5, h6 { font-weight: 400; letter-spacing: 0.05em; }

a {
	color: var(--color-ink);
	transition: color 0.3s ease;
}
a:hover {
	color: var(--color-gold-dark);
}

/* ===== THANH TIỆN ÍCH ĐEN trên cùng (như bản gốc) ===== */
.loade-topbar {
	background: #060b14;
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
	font-size: 12px;
	color: rgba(255, 255, 255, 0.72);
}
.loade-topbar-inner {
	max-width: var(--w-page); margin: 0 auto; padding: 7px 32px;
	display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.loade-topbar a { color: rgba(255, 255, 255, 0.72); transition: color 0.3s ease; }
.loade-topbar a:hover { color: var(--color-gold-lt); }
.loade-topbar-social { display: flex; align-items: center; gap: 13px; opacity: .62; }
.loade-topbar-social svg { width: 14px; height: 14px; fill: currentColor; display: block; }
.loade-topbar-note { letter-spacing: 0.04em; }
.loade-topbar-contact {
	display: flex; align-items: center; gap: 16px;
	font-family: var(--font-display); font-weight: 400; letter-spacing: 0.05em;
}
.loade-topbar-contact a { color: var(--color-gold-lt); }
@media (max-width: 1024px) { .loade-topbar-inner { padding: 8px 20px; } .loade-topbar-note { display: none; } }
@media (max-width: 600px) { .loade-topbar-inner { padding: 7px 16px; } .loade-topbar-social { gap: 11px; } }

/* ===== HEADER TỐI - logo vàng đặt trên nền navy như bản thiết kế logo ===== */
#masthead {
	background: var(--color-ink);
	border-bottom: 1px solid rgba(201, 160, 99, 0.22);
	padding-top: 0;
	padding-bottom: 0;
}
/* Hàng 1: logo trái - ô tìm kiếm phải */
#masthead > .col-full {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
	padding-top: 15px;
	padding-bottom: 15px;
}
/* Hàng 2: menu trái - giỏ hàng phải, ngăn bằng vạch mảnh */
#masthead .storefront-primary-navigation {
	border-top: 1px solid rgba(255, 255, 255, 0.08);
	background: transparent;
}
#masthead .storefront-primary-navigation > .col-full {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
	padding-top: 0;
	padding-bottom: 0;
}
#masthead .storefront-primary-navigation .main-navigation { float: none; width: auto; }
#masthead .storefront-primary-navigation .site-header-cart { float: none; width: auto; }
/* Logo: cao vừa phải, không phình */
#masthead .site-branding { margin: 0; padding: 0; }
#masthead .site-logo-link img,
#masthead .custom-logo-link img {
	max-height: 46px;
	width: auto;
	margin: 0;
}
#masthead .site-branding a,
#masthead .site-title a {
	font-family: var(--font-display);
	font-weight: 500;
	color: #fff;
	letter-spacing: var(--track-wide);
	text-transform: uppercase;
	font-size: 1.15rem;
}
#masthead .site-description { display: none; }

/* Menu chính: chữ hoa mảnh giãn rộng, gạch chân vàng khi hover */
.main-navigation { flex: 1 1 auto; }
.main-navigation ul li a {
	color: rgba(255, 255, 255, 0.86);
	font-family: var(--font-display);
	font-weight: 400;
	font-size: 12.5px;
	letter-spacing: var(--track-mid);
	text-transform: uppercase;
	padding: 10px 0;
	margin-right: 26px;
	position: relative;
	transition: color 0.3s var(--ease-brand);
}
/* Gạch chân dùng ::before - ::after đã bị Storefront dùng cho icon mũi tên Font Awesome */
.main-navigation ul li a::before {
	content: "";
	position: absolute;
	left: 0; right: 100%; bottom: 4px;
	height: 1px;
	background: var(--color-gold);
	transition: right 0.35s var(--ease-brand);
}
.main-navigation ul li a:hover::before,
.main-navigation ul li.current-menu-item > a::before { right: 0; }
/* Mũi tên dropdown: nằm gọn cạnh chữ, không rớt xuống dưới header */
.main-navigation ul li.menu-item-has-children > a::after {
	position: static !important;
	display: inline-block;
	margin-left: 7px;
	font-size: 9px;
	opacity: .5;
	color: inherit;
}
.main-navigation ul li a:hover,
.main-navigation ul li:hover > a,
.main-navigation ul li.current-menu-item > a {
	color: var(--color-gold-lt);
}
/* mũi tên submenu bớt to */
.main-navigation ul li.menu-item-has-children > a::before { opacity: .55; }

/* Submenu: nền trắng, chữ đen, đổ bóng nhẹ (trước đây chữ trắng trên nền xám -> không đọc được) */
.main-navigation ul.nav-menu ul,
.main-navigation ul li ul.sub-menu,
.main-navigation ul li ul.children {
	background: #fff;
	border: 1px solid var(--color-border);
	border-radius: 2px;
	box-shadow: 0 8px 24px rgba(22, 35, 58, 0.14);
	padding: 6px 0;
	min-width: 240px;
}
.main-navigation ul li ul li a {
	color: var(--color-ink) !important;
	background: transparent;
	font-weight: 500;
	font-size: 0.92rem;
	padding: 10px 18px;
	white-space: nowrap;
}
.main-navigation ul li ul li a:hover {
	color: var(--color-gold-dark) !important;
	background: #fafafa;
}
.main-navigation ul li ul li { border: none; }

/* Giỏ hàng trên header tối: chỉ icon + số, bỏ chữ "đ0 / 0 items" */
.site-header-cart { margin: 0; }
.site-header-cart .cart-contents { color: #fff; padding: 6px 0; }
.site-header-cart .cart-contents:hover { color: var(--color-gold-lt); }
.site-header-cart .amount,
.site-header-cart .woocommerce-Price-currencySymbol { display: none; }
.site-header-cart .count {
	color: var(--color-ink);
	background: var(--color-gold);
	font-family: var(--font-display);
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0;
	min-width: 17px; height: 17px; line-height: 17px;
	border-radius: 50%;
	text-align: center;
	display: inline-block;
	margin-left: 4px;
	text-indent: 0;
}
.site-header-cart .count::after { content: none; }
#masthead .widget_shopping_cart { background: #fff; }

/* Ô tìm kiếm: viền mảnh trong suốt thay cho khối xám to */
#masthead .site-search { margin: 0; flex: 0 0 auto; }
#masthead .site-search .widget_product_search form,
#masthead .site-search .widget_search form { margin: 0; }
#masthead .site-search input[type="text"],
#masthead .site-search input[type="search"] {
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 2px;
	color: #fff;
	font-size: 12.5px;
	letter-spacing: 0.04em;
	padding: 9px 14px;
	width: 210px;
	box-shadow: none;
	transition: border-color .3s var(--ease-brand), width .35s var(--ease-brand);
}
#masthead .site-search input::placeholder { color: rgba(255, 255, 255, 0.45); }
#masthead .site-search input:focus {
	border-color: var(--color-gold);
	width: 250px;
	outline: none;
}

/* Buttons - pill trắng/đen như hero CTA bản gốc */
.button,
button,
input[type="submit"],
.woocommerce a.button,
.woocommerce button.button,
.woocommerce #respond input#submit {
	background: transparent;
	color: var(--color-ink);
	border: 1px solid var(--color-ink);
	border-radius: 2px;
	font-family: var(--font-display);
	font-weight: 400;
	font-size: 11.5px;
	letter-spacing: var(--track-mid);
	text-transform: uppercase;
	padding: 11px 26px;
	box-shadow: none;
	transition: background .35s var(--ease-brand), color .35s var(--ease-brand), border-color .35s var(--ease-brand);
}
.button:hover,
button:hover,
input[type="submit"]:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover {
	background: var(--color-gold);
	color: #fff;
	border-color: var(--color-gold);
	box-shadow: var(--shadow-mid);
}
.button.alt,
.woocommerce a.button.alt,
.woocommerce #respond input#submit.alt {
	background: var(--color-gold);
	color: #fff;
	border-color: var(--color-gold);
}
.button.alt:hover {
	background: var(--color-gold-dark);
	color: #fff;
	border-color: var(--color-gold-dark);
}

/* Product cards - viền mảnh, bo góc nhẹ, nút full-width bordered (giống grid gốc) */
.woocommerce ul.products li.product {
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: 2px;
	padding: 1rem;
	transition: box-shadow 0.3s ease, transform 0.3s var(--ease-brand);
}
.woocommerce ul.products li.product:hover {
	box-shadow: var(--shadow-mid);
	transform: translateY(-2px);
}
.woocommerce ul.products li.product .price {
	color: var(--color-gold-dark);
	font-weight: 700;
	font-family: var(--font-body);
}
.woocommerce ul.products li.product .price del {
	color: var(--color-gray);
	opacity: 1;
	font-weight: 400;
}
.woocommerce ul.products li.product .price ins {
	text-decoration: none;
}
.woocommerce ul.products li.product h2,
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 0.95rem;
}
.woocommerce ul.products li.product .button {
	width: 100%;
	text-align: center;
	border-radius: 2px;
	margin-top: 0.75rem;
}

/* Category / page headers */
.woocommerce-products-header__title,
.page-title {
	font-family: var(--font-display);
	font-weight: 400;
	letter-spacing: var(--track-mid);
	text-transform: uppercase;
	font-size: clamp(1.6rem, 3vw, 2.2rem);
}

/* Footer - đen, cột trắng/xám, giống bản gốc */
#colophon,
.site-footer {
	background: var(--color-ink);
	color: #b3b3b3;
}
#colophon a,
.site-footer a {
	color: #b3b3b3;
}
#colophon a:hover,
.site-footer a:hover {
	color: var(--color-gold);
}
#colophon .widget-title,
.site-footer .widget-title {
	font-family: var(--font-body);
	font-weight: 700;
	color: #fff;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	font-size: 0.9rem;
}

/* Sale badge - giữ tối giản như bản gốc (chữ đen, không badge màu rực) */
.onsale {
	background: var(--color-gold) !important;
	color: #fff !important;
	border-radius: 2px !important;
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 0.75rem;
	letter-spacing: 0.02em;
}

.storefront-product-section,
.content-area {
	padding-top: 2.5rem;
	padding-bottom: 2.5rem;
}

/* ============================================================
   TRANG CHỦ - dựng theo cấu trúc devialet.com.vn
   ============================================================ */

.loade-container { max-width: var(--w-page); margin: 0 auto; padding: 0 32px; }
.loade-home h2 { font-weight: 700; }

/* 1. HERO - ảnh full-bleed, phủ tối từ trái, chữ canh trái trong khung nội dung */
.loade-slider {
	position: relative;
	overflow: hidden;
	background: var(--color-ink);
}
.loade-slide { display: none; position: relative; }
.loade-slide.is-active { display: block; }
.loade-slide img {
	width: 100%;
	height: 68vh;
	min-height: 460px;
	max-height: 720px;
	object-fit: cover;
	display: block;
}
/* lớp phủ tối để chữ luôn đọc được, không cần text-shadow */
.loade-slide::after {
	content: "";
	position: absolute; inset: 0;
	background: linear-gradient(90deg, rgba(6, 11, 20, 0.88) 0%, rgba(6, 11, 20, 0.55) 42%, rgba(6, 11, 20, 0.08) 75%);
	pointer-events: none;
}
.loade-slide-text {
	position: absolute; inset: 0;
	z-index: 2;
	display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
	max-width: var(--w-page);
	margin: 0 auto;
	padding: 0 32px;
}
.loade-slide-kicker {
	font-family: var(--font-display);
	font-size: 11px; font-weight: 400;
	letter-spacing: var(--track-wide);
	text-transform: uppercase;
	color: var(--color-gold);
	display: flex; align-items: center; gap: 12px;
	margin-bottom: 20px;
}
.loade-slide-kicker::before {
	content: ""; width: 40px; height: 1px; background: var(--color-gold); display: block;
}
.loade-slide-text h2 {
	color: #fff;
	font-family: var(--font-display);
	font-size: clamp(28px, 3.4vw, 48px);
	font-weight: 400;
	line-height: 1.22;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	margin: 0 0 30px;
	max-width: 15ch;
	text-shadow: none;
}
/* Nút hero: viền vàng mảnh, vuông - đúng tinh thần logo */
.loade-btn-pill {
	background: transparent;
	color: var(--color-gold-lt);
	border: 1px solid var(--color-gold);
	border-radius: 2px;
	padding: 13px 34px;
	font-family: var(--font-display);
	font-weight: 400; font-size: 11.5px;
	letter-spacing: var(--track-wide);
	text-transform: uppercase;
	white-space: nowrap;
	display: inline-block;
	transition: background .4s var(--ease-brand), color .4s var(--ease-brand);
}
.loade-btn-pill:hover { background: var(--color-gold); color: var(--color-ink); }

/* Mũi tên: mảnh, không khối tròn */
.loade-slider-nav {
	position: absolute; top: 50%; transform: translateY(-50%);
	background: none; color: rgba(255, 255, 255, 0.55); border: none;
	width: 46px; height: 46px; border-radius: 2px; cursor: pointer;
	font-size: 1.4rem; line-height: 1; padding: 0; z-index: 3;
	transition: color .3s ease;
}
.loade-slider-nav:hover { background: none; color: var(--color-gold-lt); }
.loade-slider-nav.prev { left: 6px; }
.loade-slider-nav.next { right: 6px; }

/* Chấm chỉ báo slide */
.loade-slider-dots {
	position: absolute; z-index: 3;
	left: 0; right: 0; bottom: 30px;
	display: flex; justify-content: center; gap: 10px;
}
.loade-slider-dots button {
	width: 22px; height: 2px; padding: 0; border: none; border-radius: 2px;
	background: rgba(255, 255, 255, 0.32); cursor: pointer;
	transition: background .3s ease, width .3s var(--ease-brand);
}
.loade-slider-dots button:hover { background: rgba(255, 255, 255, 0.6); }
.loade-slider-dots button.is-active { background: var(--color-gold); width: 40px; }

/* Hiệu ứng hero cho sang trọng (2026-07-25): ảnh zoom chậm kiểu phim tài liệu
   nội thất cao cấp (Ken Burns) + chữ/nút hiện tuần tự thay vì bật hết cùng lúc.
   JS đổi slide đã tự toggle .is-active nên animation tự chạy lại mỗi lần
   chuyển slide, không cần sửa JS. */
.loade-slide img { transform: scale(1); transform-origin: 50% 50%; }
.loade-slide.is-active img {
	animation: loade-kenburns 7s linear forwards;
}
.loade-slide-kicker, .loade-slide-text h2, .loade-slide-text .loade-btn-pill {
	opacity: 0;
}
.loade-slide.is-active .loade-slide-kicker {
	animation: loade-fade-up .9s var(--ease-brand) .15s forwards;
}
.loade-slide.is-active .loade-slide-text h2 {
	animation: loade-fade-up 1s var(--ease-brand) .32s forwards;
}
.loade-slide.is-active .loade-slide-text .loade-btn-pill {
	animation: loade-fade-up .9s var(--ease-brand) .55s forwards;
}
.loade-slide-kicker::before { width: 0; }
.loade-slide.is-active .loade-slide-kicker::before {
	animation: loade-line-draw .7s var(--ease-brand) .5s forwards;
}
@keyframes loade-kenburns { from { transform: scale(1); } to { transform: scale(1.07); } }
@keyframes loade-fade-up { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
@keyframes loade-line-draw { from { width: 0; } to { width: 40px; } }
@media (prefers-reduced-motion: reduce) {
	.loade-slide.is-active img,
	.loade-slide.is-active .loade-slide-kicker,
	.loade-slide.is-active .loade-slide-text h2,
	.loade-slide.is-active .loade-slide-text .loade-btn-pill,
	.loade-slide.is-active .loade-slide-kicker::before { animation: none; opacity: 1; width: auto; }
	.loade-slide-kicker::before { width: 40px; }
}

@media (max-width: 767px) {
	.loade-slide img { height: auto; min-height: 0; max-height: none; }
	.loade-slide::after { display: none; }
	.loade-slide-text {
		position: static; inset: auto;
		background: var(--color-ink);
		padding: 26px 20px 30px;
		align-items: flex-start;
	}
	.loade-slide-text h2 { font-size: 21px; margin-bottom: 20px; max-width: none; }
	.loade-slider-nav { display: none; }
	.loade-slider-dots { position: static; padding: 0 0 18px; background: var(--color-ink); }
}

/* 2. Danh mục: 6 ô ảnh + nhãn */
.loade-danhmuc { padding: 2.5rem 0; }
.loade-danhmuc-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
.loade-danhmuc-item {
	position: relative; display: block; border-radius: 2px; overflow: hidden;
	transition: transform .4s cubic-bezier(.3,1,.3,1);
}
.loade-danhmuc-item:hover { transform: translateY(-4px); }
.loade-danhmuc-item img { width: 100%; height: 150px; object-fit: cover; display: block; }
.loade-danhmuc-label {
	position: absolute; left: 0; right: 0; bottom: 0; padding: 10px 12px;
	background: linear-gradient(transparent, rgba(22,35,58,.78));
	color: #fff; display: flex; flex-direction: column;
}
.loade-danhmuc-label strong { font-size: .95rem; font-weight: 600; }
.loade-danhmuc-label em { font-size: .75rem; font-style: normal; opacity: .85; }

/* 3. Info: ảnh trái, chữ phải */
.loade-info { padding: 2.5rem 0; }
.loade-info-inner {
	display: grid; grid-template-columns: 6fr 6fr; gap: 3.5rem; align-items: center;
}
.loade-info-image img { width: 100%; height: auto; border-radius: 2px; display: block; }
.loade-info-text p { max-width: 62ch; }
.loade-info-icon { width: 44px; height: auto; margin-bottom: 1rem; }
.loade-info-text h2 { font-size: 30px; line-height: 1.3; margin-bottom: 1rem; }
.loade-info-text p { font-size: 15px; line-height: 1.7; color: #231f20; }

/* 4. Lưới sản phẩm dưới mỗi khối info */
.loade-product-section { padding-bottom: 2.5rem; }
.loade-products { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.loade-product-card {
	border: 1px solid var(--color-border); border-radius: 2px; padding: 1rem;
	background: #fff; text-align: center;
	transition: box-shadow .3s ease, transform .3s cubic-bezier(.3,1,.3,1);
}
.loade-product-card:hover { box-shadow: var(--shadow-mid); transform: translateY(-2px); }
.loade-product-thumb img { width: 100%; height: auto; display: block; }
.loade-product-card h3 { font-size: .95rem; font-weight: 500; margin: .75rem 0 .35rem; }
.loade-price { font-weight: 700; margin-bottom: .75rem; color: var(--color-gold-dark); }
.loade-price del { color: var(--color-gray); font-weight: 400; margin-left: .35rem; }
.loade-price ins { text-decoration: none; }
.loade-btn {
	display: block; border: 1px solid var(--color-ink); border-radius: 2px; padding: 8px 16px;
	font-size: .85rem; font-weight: 600; transition: all .3s ease;
}
.loade-btn:hover { background: var(--color-ink); color: #fff; }

/* 5. Dải chính sách */
.loade-chinhsach { border-top: 1px solid var(--color-border); padding: 1.75rem 0; }
.loade-chinhsach-grid {
	display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; text-align: center;
}
.loade-chinhsach-grid strong { font-size: .9rem; font-weight: 600; }

/* Responsive */
@media (max-width: 1024px) {
	.loade-danhmuc-grid { grid-template-columns: repeat(3, 1fr); }
	.loade-products { grid-template-columns: repeat(3, 1fr); }
	.loade-info-inner { grid-template-columns: 1fr; gap: 1.5rem; }
	.loade-slide-text h2 { font-size: 28px; max-width: 100%; }
}
@media (max-width: 767px) {
	.loade-danhmuc-grid { grid-template-columns: repeat(2, 1fr); }
	.loade-products { grid-template-columns: repeat(2, 1fr); }
	.loade-chinhsach-grid { grid-template-columns: repeat(2, 1fr); }
	.loade-slide-text { bottom: auto; top: 50%; transform: translateY(-50%); }
	.loade-slide-text h2 { font-size: 18px; }
	.loade-info-text h2 { font-size: 22px; }
}

/* ===== FOOTER (theo devialet.com.vn) ===== */
.loade-footer { padding: 3rem 0 2rem; }
.loade-footer-grid {
	display: grid; grid-template-columns: 2.2fr 1.4fr 1fr 1fr 1fr; gap: 2.5rem;
}
.loade-footer-wordmark {
	font-weight: 800; font-size: 1.7rem; letter-spacing: .12em; color: #fff; line-height: 1;
}
.loade-footer-wordmark span {
	display: block; font-size: .6rem; letter-spacing: .06em;
	color: var(--color-gold); font-weight: 700; margin-top: .35rem;
}
.loade-footer-logo { max-width: 220px; height: auto; }
.loade-footer-brand p { margin-top: 1rem; font-size: .82rem; line-height: 1.65; color: #b3b3b3; }
.loade-footer-col h4, .loade-footer-col .loade-footer-h {
	color: #fff; font-size: .95rem; font-weight: 700; margin-bottom: .9rem;
}
.loade-footer-col p { font-size: .82rem; line-height: 1.7; color: #b3b3b3; margin-bottom: .4rem; }
.loade-footer-col strong { color: #fff; font-weight: 600; }
.loade-footer-col ul { list-style: none; margin: 0; padding: 0; }
.loade-footer-col li { margin-bottom: .5rem; }
.loade-footer-col a { font-size: .82rem; color: #b3b3b3; }
.loade-footer-col a:hover { color: var(--color-gold); }
.loade-credit {
	border-top: 1px solid rgba(255,255,255,.12); padding: 1rem 0;
	font-size: .78rem; color: #8c8c8c; text-align: center;
}
@media (max-width: 1100px) {
	.loade-footer-grid { grid-template-columns: 1.6fr 1fr 1fr; }
}
@media (max-width: 767px) {
	.loade-footer-grid { grid-template-columns: 1fr 1fr; gap: 1.6rem 1.2rem; }
	.loade-footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 420px) {
	.loade-footer-grid { grid-template-columns: 1fr; gap: 1.4rem; }
}
/* mọi cột footer không được đẩy rộng hơn ô lưới */
.loade-footer-grid > * { min-width: 0; }
.loade-footer-col p,
.loade-footer-col a,
.loade-footer-brand p { overflow-wrap: anywhere; }

/* ============================================================
   LAYOUT RỘNG - theo container 1700px của devialet.com.vn
   (Storefront mặc định chỉ ~931px, quá hẹp)
   ============================================================ */

.col-full {
	max-width: var(--w-page) !important;
	padding-left: 32px;
	padding-right: 32px;
	box-sizing: border-box;
}

/* Nội dung full width, bỏ sidebar bó hẹp */
.site-main,
.content-area,
.woocommerce .content-area {
	width: 100% !important;
	float: none !important;
	margin-right: 0 !important;
}
.widget-area,
#secondary { display: none; }

/* Shop grid: 4 cột rộng rãi thay vì 3 cột chật */
.woocommerce ul.products {
	display: grid !important;
	grid-template-columns: repeat(4, 1fr);
	gap: 28px;
	margin: 0 0 3rem;
}
.woocommerce ul.products::before,
.woocommerce ul.products::after { display: none; }
.woocommerce ul.products li.product {
	width: 100% !important;
	float: none !important;
	margin: 0 !important;
	clear: none !important;
	padding: 1.25rem;
}

/* Trang sản phẩm: ảnh và thông tin thoáng hơn */
.woocommerce div.product div.images { width: 52%; }
.woocommerce div.product div.summary { width: 43%; margin-bottom: 3rem; }
.woocommerce div.product .product_title { font-size: 40px; line-height: 1.25; }
.woocommerce div.product .woocommerce-tabs { padding-top: 1.5rem; }
.woocommerce div.product .woocommerce-tabs .panel { max-width: 100ch; }

/* Nhịp thở dọc rộng hơn */
.site-content { padding-top: 2rem; padding-bottom: 3rem; }

.loade-danhmuc { padding: 3.5rem 0; }
.loade-info { padding: 4rem 0; }
.loade-info-inner { gap: 5rem; }
.loade-product-section { padding-bottom: 4rem; }
.loade-products { gap: 28px; }
.loade-chinhsach { padding: 2.5rem 0; }
.loade-footer { padding: 4rem 0 2.5rem; }

/* Ảnh danh mục cao hơn cho thoáng */
.loade-danhmuc-item img { height: 200px; }

@media (max-width: 1200px) {
	.woocommerce ul.products { grid-template-columns: repeat(3, 1fr); }
	.loade-products { grid-template-columns: repeat(3, 1fr); }
	.loade-info-inner { gap: 3rem; }
}
@media (max-width: 1024px) {
	.col-full { padding-left: 20px; padding-right: 20px; }
	.loade-container { padding: 0 20px; }
	.woocommerce ul.products { grid-template-columns: repeat(2, 1fr); }
	.woocommerce div.product div.images,
	.woocommerce div.product div.summary { width: 100%; }
	.loade-danhmuc-item img { height: 150px; }
}
@media (max-width: 600px) {
	.col-full { padding-left: 16px; padding-right: 16px; }
	.loade-container { padding: 0 16px; }
	.woocommerce ul.products { grid-template-columns: repeat(2, 1fr); gap: 14px; }
	.woocommerce div.product .product_title { font-size: 26px; }
}

/* ===== TIN TỨC (bố cục 1 bài lớn + 3 bài nhỏ như bản gốc) ===== */
.loade-blog { padding: 4rem 0; }
.loade-blog-title { font-size: 32px; font-weight: 700; margin-bottom: .4rem; }
.loade-blog-sub { color: #666; margin-bottom: 2rem; font-size: .9rem; }
.loade-blog-grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 2rem; }
.loade-blog-side { display: flex; flex-direction: column; gap: 1.5rem; }
.loade-blog-card.is-feature .loade-blog-thumb img { height: 420px; }
.loade-blog-card.is-feature h3 { font-size: 1.35rem; }
.loade-blog-card:not(.is-feature) {
	display: grid; grid-template-columns: 130px 1fr; gap: 1rem; align-items: start;
}
.loade-blog-thumb { display: block; border-radius: 2px; overflow: hidden; }
.loade-blog-thumb img {
	width: 100%; height: 90px; object-fit: cover; display: block;
	transition: transform .5s cubic-bezier(.3,1,.3,1);
}
.loade-blog-thumb:hover img { transform: scale(1.04); }
.loade-blog-body time { font-size: .72rem; color: #999; }
.loade-blog-body h3 { font-size: .95rem; font-weight: 600; line-height: 1.4; margin: .35rem 0 .5rem; }
.loade-blog-body p { font-size: .85rem; line-height: 1.65; color: #555; margin-bottom: .6rem; }
.loade-blog-more { font-size: .8rem; font-weight: 600; text-decoration: underline; }
.loade-blog-all { text-align: center; margin-top: 2.5rem; }
.loade-blog-all .loade-btn-pill { border: 1px solid var(--color-ink); }

@media (max-width: 1024px) {
	.loade-blog-grid { grid-template-columns: 1fr; }
	.loade-blog-card.is-feature .loade-blog-thumb img { height: 260px; }
}
@media (max-width: 600px) {
	.loade-blog-card:not(.is-feature) { grid-template-columns: 100px 1fr; }
}



/* ===== TRANG LIÊN HỆ ===== */
.loade-contact-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 3rem; align-items: start; }
.loade-contact-info h2 { font-size: 28px; margin-bottom: 1rem; }
.loade-contact-info p { font-size: .95rem; line-height: 1.7; color: #444; }
.loade-contact-list { list-style: none; margin: 1.5rem 0; padding: 0; }
.loade-contact-list li {
	padding: .7rem 0; border-bottom: 1px solid var(--color-border); font-size: .92rem;
}
.loade-contact-list strong { display: inline-block; min-width: 120px; font-weight: 600; }
.loade-contact-map iframe { display: block; }
@media (max-width: 1024px) { .loade-contact-grid { grid-template-columns: 1fr; gap: 2rem; } }

/* ===== POPUP khuyến mãi (như bản gốc) ===== */
.loade-popup-overlay {
	position: fixed; inset: 0; background: rgba(22,35,58,.6); z-index: 10000;
	display: none; align-items: center; justify-content: center; padding: 20px;
}
.loade-popup-overlay.is-open { display: flex; }
.loade-popup {
	position: relative; max-width: 620px; width: 100%;
	background: #fff; border-radius: 2px; overflow: hidden;
	box-shadow: 0 20px 50px rgba(22,35,58,.4);
}
.loade-popup img { width: 100%; height: auto; display: block; }
.loade-popup-close {
	position: absolute; top: 10px; right: 10px; width: 34px; height: 34px;
	border-radius: 50%; border: none; background: rgba(255,255,255,.92); color: var(--color-ink);
	font-size: 1.2rem; line-height: 1; cursor: pointer; padding: 0;
	transition: background .3s ease;
}
.loade-popup-close:hover { background: #fff; }

/* Tên site 1 dòng trên mobile (rule menu-single-line) */
@media (max-width: 600px) {
	#masthead .site-branding a,
	#masthead .site-title a { font-size: 1.05rem; white-space: nowrap; }
	#masthead .site-description { font-size: .58rem; white-space: nowrap; }
}
@media (max-width: 380px) {
	#masthead .site-branding a,
	#masthead .site-title a { font-size: .92rem; }
}

/* Ép nền submenu trắng (Storefront đặt #f0f0f0 với specificity cao hơn) */
.main-navigation ul.menu ul,
.main-navigation ul.nav-menu ul,
.main-navigation ul li ul.sub-menu,
.main-navigation ul li ul.children,
.storefront-primary-navigation .main-navigation ul ul {
	background-color: #fff !important;
}
.main-navigation ul li ul li a:hover {
	background-color: #f7f7f7 !important;
}

/* Wordmark footer (thay logo Audio Room) */
.loade-footer-wordmark span {
	display: block; font-size: .72rem; letter-spacing: .22em;
	color: var(--color-gold); font-weight: 600; margin-top: .4rem;
	text-transform: uppercase;
}
/* Khối thông tin pháp nhân (E-E-A-T) */
.loade-legal {
	margin-top: 2.5rem; padding-top: 1.5rem;
	border-top: 1px solid rgba(255,255,255,.12);
	display: flex; flex-wrap: wrap; gap: .4rem 2rem;
	font-size: .78rem; color: #9aa3b2; line-height: 1.7;
}
.loade-legal strong { color: #cfd6e0; font-weight: 600; }



/* Trang liên hệ: nhóm nút */
.loade-contact-info .loade-btn-pill {
	border: 1px solid var(--color-ink); margin: 0 .5rem .5rem 0;
}


/* ===== NÚT NỔI GỌN: 1 nút gọi + nút "+" bung các kênh khác ===== */
.loade-float {
	position: fixed; right: 16px; bottom: 16px; z-index: 9999;
	display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.loade-float a,
.loade-float button {
	width: 44px; height: 44px; border-radius: 50%; padding: 0; border: none;
	display: flex; align-items: center; justify-content: center; cursor: pointer;
	background: var(--color-ink); color: #fff;
	box-shadow: 0 3px 10px rgba(22,35,58,.28);
	transition: transform .25s cubic-bezier(.3,1,.3,1), background .25s ease, opacity .25s ease;
}
.loade-float a:hover,
.loade-float button:hover { transform: scale(1.07); color: #fff; }
.loade-float svg { width: 20px; height: 20px; fill: currentColor; }

.loade-float .is-phone,
.loade-float .is-phone2 { background: #1aa260; }
.loade-float .is-zalo { background: #0068ff; }
.loade-float .is-mess { background: #a334fa; }
.loade-float .is-map  { background: #ea4335; }

/* các kênh phụ: mặc định thu gọn, bấm "+" mới bung */
.loade-float-items {
	display: flex; flex-direction: column; align-items: center; gap: 8px;
	max-height: 0; opacity: 0; overflow: hidden; pointer-events: none;
	transition: max-height .32s cubic-bezier(.3,1,.3,1), opacity .25s ease;
}
.loade-float.is-open .loade-float-items {
	max-height: 240px; opacity: 1; pointer-events: auto;
}
.loade-float-toggle { background: var(--color-gold) !important; }
.loade-float-toggle svg { transition: transform .3s cubic-bezier(.3,1,.3,1); }
.loade-float.is-open .loade-float-toggle svg { transform: rotate(45deg); }

@media (max-width: 600px) {
	.loade-float { right: 12px; bottom: 12px; gap: 7px; }
	.loade-float a, .loade-float button { width: 40px; height: 40px; }
	.loade-float svg { width: 18px; height: 18px; }
}

/* ===== LOGO trong header ===== */
.site-header .custom-logo-link img,
#masthead .custom-logo { max-height: 62px; width: auto; }
.site-header .site-branding .site-title,
.site-header .site-branding .site-description { display: none; }
@media (max-width: 600px) {
	.site-header .custom-logo-link img,
	#masthead .custom-logo { max-height: 44px; }
}

/* ===== SẢN PHẨM LIÊN QUAN: lưới gọn, không phải panel trượt ===== */
.related.products,
.up-sells.products {
	margin-top: 3rem; padding-top: 2.5rem;
	border-top: 1px solid var(--color-border);
	clear: both;
}
.related.products > h2,
.up-sells.products > h2 {
	font-size: 1.5rem; font-weight: 700; margin-bottom: 1.5rem;
	text-transform: none; letter-spacing: -0.01em;
}

/* Sticky "You're viewing" bar của Storefront: canh theo tông navy/đồng */
.storefront-sticky-add-to-cart {
	border-bottom: 1px solid var(--color-border);
	background: rgba(255,255,255,.97);
	backdrop-filter: none;
}
.storefront-sticky-add-to-cart__content-title { color: var(--color-ink); }
.storefront-sticky-add-to-cart__content-price { color: var(--color-gold-dark); font-weight: 700; }

/* ============================================================
   THANH ĐIỀU HƯỚNG DƯỚI CÙNG (mobile)
   ============================================================ */
.loade-bottomnav { display: none; }

@media (max-width: 900px) {
	.loade-bottomnav {
		display: grid; grid-template-columns: repeat(5, 1fr);
		position: fixed; left: 0; right: 0; bottom: 0; z-index: 9998;
		background: #fff; border-top: 1px solid var(--color-border);
		box-shadow: 0 -2px 14px rgba(22,35,58,.09);
		padding-bottom: env(safe-area-inset-bottom);
	}
	.loade-bottomnav a,
	.loade-bottomnav button {
		display: flex; flex-direction: column; align-items: center; justify-content: center;
		gap: 3px; padding: 8px 2px 7px; background: none; border: none; cursor: pointer;
		color: var(--color-ink-soft); font-family: var(--font-body);
		font-size: .64rem; font-weight: 600; line-height: 1.2; text-align: center;
		position: relative; transition: color .2s ease;
	}
	.loade-bottomnav svg { width: 21px; height: 21px; }
	.loade-bottomnav a.is-current,
	.loade-bottomnav a:hover,
	.loade-bottomnav button:hover { color: var(--color-gold-dark); }
	.loade-bottomnav a.is-accent { color: #1aa260; }
	.loade-bottomnav-badge {
		position: absolute; top: 3px; right: calc(50% - 20px);
		background: var(--color-gold); color: #fff; font-style: normal;
		font-size: .6rem; font-weight: 700; min-width: 16px; height: 16px;
		border-radius: 2px; display: flex; align-items: center; justify-content: center; padding: 0 4px;
	}

	/* chừa chỗ cho thanh dưới + đẩy nút nổi lên */
	body { padding-bottom: 62px; }
	.loade-float { bottom: 74px; }
}

/* Bảng danh mục trượt lên từ đáy */
.loade-catsheet {
	position: fixed; inset: 0; z-index: 9999;
	background: rgba(22,35,58,.5); opacity: 0; transition: opacity .26s ease;
	display: flex; align-items: flex-end;
}
.loade-catsheet.is-open { opacity: 1; }
.loade-catsheet-panel {
	width: 100%; background: #fff; border-radius: 16px 16px 0 0;
	padding: 4px 0 calc(14px + env(safe-area-inset-bottom));
	transform: translateY(100%); transition: transform .3s cubic-bezier(.3,1,.3,1);
	max-height: 74vh; overflow-y: auto;
}
.loade-catsheet.is-open .loade-catsheet-panel { transform: translateY(0); }
.loade-catsheet-head {
	display: flex; align-items: center; justify-content: space-between;
	padding: 14px 20px 10px; border-bottom: 1px solid var(--color-border);
}
.loade-catsheet-head strong { font-size: 1rem; font-weight: 700; }
.loade-catsheet-head button {
	background: none; border: none; font-size: 1.6rem; line-height: 1;
	color: var(--color-ink-soft); cursor: pointer; padding: 0 4px;
}
.loade-catsheet ul { list-style: none; margin: 0; padding: 6px 0; }
.loade-catsheet li + li { border-top: 1px solid #f2efe9; }
.loade-catsheet a {
	display: flex; align-items: center; justify-content: space-between;
	padding: 14px 20px; font-size: .95rem; font-weight: 600; color: var(--color-ink);
}
.loade-catsheet a em {
	font-style: normal; font-size: .78rem; font-weight: 600;
	color: var(--color-gray); background: #f5f2ec; border-radius: 2px; padding: 2px 9px;
}

/* ===== HERO MOBILE: ảnh vuông + khối chữ riêng bên dưới (dễ đọc hơn đè chữ) ===== */
@media (max-width: 767px) {
	.loade-slide { display: none; }
	.loade-slide.is-active { display: block; }
	.loade-slide picture,
	.loade-slide picture img { display: block; width: 100%; }
	.loade-slide-text {
		position: static; transform: none;
		display: block; text-align: center;
		background: var(--color-ink); padding: 20px 22px 24px;
	}
	.loade-slide-text h2 {
		font-size: 20px; line-height: 1.35; letter-spacing: -0.01em;
		max-width: 100%; margin: 0 0 14px; text-shadow: none;
	}
	.loade-btn-pill { padding: 10px 26px; font-size: .9rem; }
	.loade-slider-nav {
		top: 34%;
		width: 36px; height: 36px; font-size: .95rem;
		background: rgba(22,35,58,.45);
	}
	.loade-slider-nav.prev { left: 10px; }
	.loade-slider-nav.next { right: 10px; }
}

/* Desktop: giữ chữ đè ảnh nhưng có lớp phủ nhẹ cho dễ đọc */
@media (min-width: 768px) {
	.loade-slide { position: relative; }
	.loade-slide::after {
		content: ""; position: absolute; inset: 0; pointer-events: none;
		background: linear-gradient(to top, rgba(22,35,58,.42) 0%, rgba(22,35,58,.10) 38%, transparent 62%);
	}
	.loade-slide-text { z-index: 2; }
}

/* ============================================================
   TRANG BÀI VIẾT - tối ưu cho việc đọc
   ============================================================ */
.single-post .site-main {
	max-width: 1320px;
	margin-left: auto;
	margin-right: auto;
}
.single-post .entry-title {
	font-size: clamp(1.8rem, 3.4vw, 2.6rem);
	font-weight: 700;
	line-height: 1.22;
	letter-spacing: -0.02em;
	margin-bottom: .6rem;
	text-wrap: balance;
}
.loade-meta {
	display: flex; gap: .5rem; align-items: center;
	font-size: .85rem; color: var(--color-gray); margin-bottom: 1.5rem;
}
.single-post .entry-header { margin-bottom: 1.5rem; }
.single-post .post-thumbnail img { border-radius: 2px; }

/* Thân bài: chữ to, giãn dòng thoáng. Đổi từ serif (Lora) sang sans-serif
   (Be Vietnam Pro) - nét chữ serif mảnh nhìn mờ ở cỡ chữ thường trên màn
   hình thường (không Retina); sans nét đều, rõ, đậm hơn, dễ đọc hơn. */
.single-post .entry-content {
	font-family: var(--font-body);
	font-size: 18px;
	font-weight: 400;
	line-height: 1.8;
	color: #1c2430;
}
.single-post .entry-content p { margin-bottom: 1.35em; }
.single-post .entry-content h2 {
	font-family: var(--font-body);
	font-size: 1.55rem; font-weight: 700; line-height: 1.3;
	margin: 2.4rem 0 .9rem; padding-top: .4rem;
	letter-spacing: -0.015em; scroll-margin-top: 90px;
}
.single-post .entry-content h3 {
	font-family: var(--font-body);
	font-size: 1.2rem; font-weight: 700; line-height: 1.35;
	margin: 1.9rem 0 .7rem; color: var(--color-ink); scroll-margin-top: 90px;
}
.single-post .entry-content h4 {
	font-family: var(--font-body); font-size: 1.05rem; font-weight: 600; margin: 1.5rem 0 .6rem;
}
.single-post .entry-content ul,
.single-post .entry-content ol { margin: 0 0 1.35em 1.3em; }
.single-post .entry-content li { margin-bottom: .5em; }
.single-post .entry-content img { border-radius: 2px; margin: 1.5rem 0; }
.single-post .entry-content a {
	color: var(--color-gold-dark); text-decoration: underline;
	text-underline-offset: 3px; text-decoration-thickness: 1px;
}
.single-post .entry-content strong { color: var(--color-ink); font-weight: 600; }
.single-post .entry-content blockquote {
	border-left: 3px solid var(--color-gold);
	padding: .2rem 0 .2rem 1.2rem; margin: 1.8rem 0;
	font-style: italic; color: #3d4757;
}
.single-post .entry-content table {
	font-family: var(--font-body); font-size: .92rem; width: 100%;
	border-collapse: collapse; margin: 1.6rem 0;
}
.single-post .entry-content th,
.single-post .entry-content td {
	border: 1px solid var(--color-border); padding: 10px 12px; text-align: left;
}
.single-post .entry-content th { background: #f5f2ec; font-weight: 600; }

/* ===== MỤC LỤC ===== */
.loade-toc {
	font-family: var(--font-body);
	background: #f5f2ec; border: 1px solid var(--color-border);
	border-radius: 2px; margin: 0 0 2rem; overflow: hidden;
}
.loade-toc-head {
	width: 100%; display: flex; align-items: center; justify-content: space-between;
	background: none; border: none; cursor: pointer; padding: 14px 18px;
	font-family: var(--font-body); font-size: .95rem; font-weight: 700;
	color: var(--color-ink); text-align: left;
}
.loade-toc-head svg { transition: transform .28s cubic-bezier(.3,1,.3,1); flex: none; }
.loade-toc.is-collapsed .loade-toc-head svg { transform: rotate(-90deg); }
.loade-toc-list {
	list-style: none; margin: 0; padding: 0 18px 16px;
	max-height: 460px; overflow: hidden; transition: max-height .3s ease, padding .3s ease;
}
.loade-toc.is-collapsed .loade-toc-list { max-height: 0; padding-top: 0; padding-bottom: 0; }
/* KHÔNG counter-increment ở đây - mục lv2 tự tăng+hiện số qua ::before riêng
   phía dưới (dòng ~1172). Trước đây tăng ở CẢ 2 chỗ (li này + ::before) nên
   mỗi mục cấp lớn ăn 2 nấc đếm -> số nhảy 1,2,3...rồi 7,9,11,13,15. */
.loade-toc-list li { margin: 0; }
.loade-toc-list li.lv3 { padding-left: 1.1rem; }
.loade-toc-list a {
	display: block; padding: 7px 0; font-size: .9rem; line-height: 1.45;
	color: var(--color-ink-soft); text-decoration: none;
	border-left: 2px solid transparent; padding-left: 10px; margin-left: -10px;
	transition: color .2s ease, border-color .2s ease;
}
.loade-toc-list li.lv3 a { font-size: .85rem; }
.loade-toc-list a:hover { color: var(--color-gold-dark); }
.loade-toc-list a.is-active {
	color: var(--color-gold-dark); font-weight: 600; border-left-color: var(--color-gold);
}

@media (max-width: 767px) {
	.single-post .entry-content { font-size: 17px; line-height: 1.8; }
	.single-post .entry-content h2 { font-size: 1.3rem; }
	.single-post .entry-content h3 { font-size: 1.08rem; }
	.loade-toc-list { max-height: 300px; }
}

/* Bài viết: canh giữa thật (Storefront float trái nên margin auto không ăn) */
.single-post .content-area,
.single-post #primary {
	float: none !important;
	width: 100% !important;
	margin: 0 !important;
}
.single-post .site-main {
	max-width: 1320px;
	margin: 0 auto !important;
	float: none !important;
}
/* Ẩn meta mặc định của theme (đã có dòng ngày + phút đọc riêng) */
.single-post .entry-meta,
.single-post .posted-on,
.single-post .post-author,
.single-post .comments-link { display: none; }
.single-post .entry-header .entry-title { margin-top: 0; }

/* Trang lưu trữ / danh sách bài cũng canh giữa cho dễ đọc */
.blog .site-main,
.archive:not(.post-type-archive-product):not(.tax-product_cat) .site-main {
	max-width: 1000px; margin: 0 auto !important; float: none !important;
}
.blog .content-area,
.archive:not(.post-type-archive-product):not(.tax-product_cat) .content-area {
	float: none !important; width: 100% !important;
}
.single-post .entry-header .byline,
.single-post .entry-header > p:first-child { display: none; }

/* TOC nằm trong .entry-content nên phải gỡ style link của bài viết */
.single-post .entry-content .loade-toc a {
	text-decoration: none;
	font-family: var(--font-body);
}
.single-post .entry-content .loade-toc { font-family: var(--font-body); }
.loade-toc-list { counter-reset: toc; }
.loade-toc-list li.lv2 a::before {
	counter-increment: toc; content: counter(toc) ". ";
	color: var(--color-gold); font-weight: 700;
}

/* ============================================================
   CHỐNG TRÀN NGANG - nội dung nhập từ site gốc có width cứng
   ============================================================ */
/* overflow-x:hidden buộc trình duyệt tự đổi overflow-y thành "auto" (quy tắc
   CSS: 1 trục hidden thì trục kia không được để "visible") -> html/body vô
   tình biến thành 1 vùng cuộn riêng, làm position:sticky của ảnh sản phẩm bị
   tính sai mốc. Đổi sang overflow-x:clip - vẫn chặn tràn ngang nhưng KHÔNG
   tạo vùng cuộn giả, sticky hoạt động đúng. */
html, body { overflow-x: clip; max-width: 100%; }
/* Theme gốc Storefront đặt overflow-x:hidden lên .site (khối bọc .hfeed) ->
   cùng lý do trên, biến .site thành vùng cuộn giả nằm GIỮA div.product và
   body, chặn luôn sticky dù đã sửa html/body. Ghi đè bằng class thật của
   Storefront (.hfeed.site) để thắng specificity. */
.hfeed.site { overflow-x: clip !important; }

.entry-content img,
.entry-content video,
.entry-content iframe,
.entry-content embed,
.entry-content object,
.woocommerce-product-details__short-description img,
#tab-description img {
	max-width: 100% !important;
	height: auto !important;
}
.entry-content iframe,
#tab-description iframe { width: 100% !important; }

/* Bảng dài: cho cuộn ngang trong khung riêng, không đẩy cả trang */
.entry-content table,
#tab-description table {
	display: block;
	width: 100%;
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}
.entry-content table th,
.entry-content table td { min-width: 110px; }

/* Chuỗi dài (URL, mã) không đẩy layout */
.entry-content, .entry-content p, .entry-content li,
#tab-description, #tab-description p, #tab-description li {
	overflow-wrap: break-word;
	word-wrap: break-word;
}

/* Phần tử có style width cứng trong nội dung nhập */
.entry-content [style*="width"],
#tab-description [style*="width"] { max-width: 100% !important; }

/* Khung cuộn cho bảng dài */
.loade-table-scroll {
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	margin: 1.6rem 0;
	border: 1px solid var(--color-border);
	border-radius: 2px;
}
.loade-table-scroll table {
	display: table !important;
	width: 100%;
	margin: 0 !important;
	border: none !important;
	overflow: visible !important;
	min-width: 460px;   /* dưới mức này thì cuộn */
}
.loade-table-scroll th:first-child,
.loade-table-scroll td:first-child { border-left: none; }
.loade-table-scroll tr:first-child th,
.loade-table-scroll tr:first-child td { border-top: none; }

/* ============================================================
   ĐỒNG BỘ THEO LOGO (v3) - vàng kim trên navy, chữ mảnh giãn rộng
   ============================================================ */

/* Thân bài viết: KHÔNG viết hoa, giữ dễ đọc (chỉ giao diện mới dùng chữ hoa) */
.entry-content h1, .entry-content h2, .entry-content h3,
.entry-content h4, .entry-content h5, .entry-content h6,
.woocommerce-Tabs-panel h2, .woocommerce-Tabs-panel h3 {
	text-transform: none;
	letter-spacing: 0.01em;
	font-weight: 500;
}

/* Tiêu đề mục: gạch vàng mảnh phía trên, chữ hoa giãn rộng */
.loade-blog-title,
.loade-info-text h2 {
	position: relative;
	padding-top: 20px;
	font-size: 24px;
}
.loade-blog-title::before,
.loade-info-text h2::before {
	content: "";
	position: absolute; top: 0; left: 0;
	width: 44px; height: 1px;
	background: var(--color-gold);
}
.loade-blog-title { text-align: left; }

/* Tên sản phẩm trên card: chữ thường, gọn */
.loade-product-card h3,
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 14px;
	letter-spacing: 0.01em;
	text-transform: none;
	line-height: 1.5;
}

/* Giá: dùng font display cho cảm giác cao cấp */
.loade-price, .price, .woocommerce ul.products li.product .price {
	font-family: var(--font-display);
	font-weight: 400;
	letter-spacing: 0.03em;
	color: var(--color-gold-dark);
}

/* Nút phụ trong card: viền vàng thay vì viền đen đặc */
.loade-btn,
.loade-product-card .loade-btn {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: 11px;
	letter-spacing: var(--track-mid);
	text-transform: uppercase;
	border-color: var(--color-border);
	color: var(--color-ink);
	transition: border-color .35s var(--ease-brand), color .35s var(--ease-brand);
}
.loade-btn:hover { border-color: var(--color-gold); color: var(--color-gold-dark); }

/* Nút chính hover: nền vàng, chữ navy (thay vì nền đồng chữ trắng) */
.button:hover, button:hover,
input[type="submit"]:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce #respond input#submit:hover {
	background: var(--color-gold);
	border-color: var(--color-gold);
	color: var(--color-ink);
}
.woocommerce button.button.alt,
.woocommerce a.button.alt,
.single_add_to_cart_button {
	background: var(--color-ink) !important;
	border-color: var(--color-ink) !important;
	color: #fff !important;
}
.woocommerce button.button.alt:hover,
.woocommerce a.button.alt:hover,
.single_add_to_cart_button:hover {
	background: var(--color-gold) !important;
	border-color: var(--color-gold) !important;
	color: var(--color-ink) !important;
}

/* Ô danh mục: nhãn chữ hoa giãn rộng, phủ tối theo tông logo */
.loade-danhmuc-label {
	background: linear-gradient(transparent, rgba(6, 11, 20, 0.85)) !important;
	font-family: var(--font-display);
	font-weight: 400;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-size: 11.5px;
}
.loade-danhmuc-item { border: 1px solid transparent; transition: border-color .4s var(--ease-brand), transform .4s var(--ease-brand); }
.loade-danhmuc-item:hover { border-color: var(--color-gold); }

/* Bỏ nền kem cũ ở các badge nhỏ */
.loade-catsheet-count { background: var(--color-mist) !important; }

/* Giỏ hàng: icon túi + số vàng */
.loade-cart { list-style: none; margin: 0; padding: 0; }
.loade-cart li { list-style: none; margin: 0; }
.loade-cart .cart-contents {
	display: flex; align-items: center; gap: 7px;
	color: #fff; padding: 12px 0; text-indent: 0;
}
.loade-cart .cart-contents::after { content: none; }
.loade-cart svg { width: 21px; height: 21px; display: block; }
.loade-cart-count {
	font-family: var(--font-display); font-size: 10px; font-weight: 500;
	min-width: 17px; height: 17px; line-height: 17px; border-radius: 50%;
	background: var(--color-gold); color: var(--color-ink); text-align: center;
}
.loade-cart-count.is-empty { background: rgba(255,255,255,.16); color: rgba(255,255,255,.75); }
.loade-cart .cart-contents:hover { color: var(--color-gold-lt); }

/* --- Sửa sau khi soi bản dựng thật --- */

/* Lớp phủ hero phải đủ đậm: ảnh gốc sáng màu kem, chữ trắng chìm */
.loade-slide::after {
	background: linear-gradient(90deg, rgba(6, 11, 20, 0.9) 0%, rgba(6, 11, 20, 0.72) 34%, rgba(6, 11, 20, 0.3) 62%, rgba(6, 11, 20, 0.06) 100%) !important;
}
.loade-slide-text h2 { line-height: 1.3; }

/* Ô tìm kiếm: Storefront ép nền sáng, phải ghi đè hẳn */
#masthead .site-search .search-field,
#masthead .site-search input[type="text"],
#masthead .site-search input[type="search"],
#masthead .widget_product_search input[type="search"],
#masthead .widget_search input[type="search"] {
	background-color: rgba(255, 255, 255, 0.07) !important;
	border: 1px solid rgba(255, 255, 255, 0.18) !important;
	color: #fff !important;
	box-shadow: none !important;
	padding-left: 38px !important;
}
#masthead .site-search form::before {
	color: rgba(255, 255, 255, 0.5) !important;
	left: 14px !important;
	right: auto !important;
}
#masthead .site-search .widget { margin: 0; padding: 0; border: none; }

/* Nhịp section: khối sản phẩm đặt trên nền xám rất nhạt để tách khỏi khối ảnh+chữ */
.loade-products {
	background: var(--color-mist);
	padding: 34px 30px;
	margin-top: 6px;
}
.loade-product-card {
	background: #fff;
	border: 1px solid var(--color-border);
	padding: 18px 16px 20px;
	transition: border-color .4s var(--ease-brand);
}
.loade-product-card:hover { border-color: var(--color-gold); }

/* --- Mobile: nút MENU và khoảng cách trên hero --- */
@media (max-width: 767px) {
	/* Nút MENU mặc định Storefront là khối trắng viền đen -> chỏi hẳn với header tối */
	.menu-toggle,
	button.menu-toggle {
		background: transparent !important;
		color: #fff !important;
		border: 1px solid rgba(255, 255, 255, 0.28) !important;
		border-radius: 2px !important;
		font-family: var(--font-display);
		font-size: 11.5px !important;
		font-weight: 400 !important;
		letter-spacing: var(--track-mid);
		text-transform: uppercase;
		padding: 9px 16px !important;
	}
	.menu-toggle:hover, button.menu-toggle:hover {
		border-color: var(--color-gold) !important;
		color: var(--color-gold-lt) !important;
	}
	/* Hero dán sát header, bỏ khoảng trắng thừa của Storefront */
	.home #content { padding-top: 0 !important; }
	/* Nhãn danh mục dài bị đè lên ảnh -> cho chữ nhỏ và bó gọn */
	.loade-danhmuc-label { font-size: 10.5px; line-height: 1.35; padding: 8px 10px; }
	.loade-danhmuc-label span { font-size: 9px; opacity: .78; }
}

/* Storefront cho header margin-bottom ~68px -> tạo dải trắng thừa dưới header */
#masthead.site-header { margin-bottom: 0 !important; }
.home #content { padding-top: 0 !important; }

/* Hero tràn hết bề ngang, thoát khỏi khung col-full */
.loade-slider {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}
/* chữ trong hero vẫn thẳng hàng với nội dung bên dưới */
.loade-slide-text { padding-left: max(32px, calc((100vw - var(--w-page)) / 2 + 32px)); }
@media (max-width: 767px) { .loade-slide-text { padding-left: 20px; } }

/* Submenu: ẩn hẳn khi chưa hover (sau khi đổi col-full sang flex, cơ chế ẩn của Storefront hụt
   -> mũi tên dropdown rớt xuống đè lên hero) */
@media (min-width: 768px) {
	.main-navigation ul.nav-menu li > ul.sub-menu,
	.main-navigation ul.nav-menu li > ul.children {
		position: absolute;
		left: -9999px;
		opacity: 0;
		visibility: hidden;
		transition: opacity .25s var(--ease-brand);
	}
	.main-navigation ul.nav-menu li:hover > ul.sub-menu,
	.main-navigation ul.nav-menu li:hover > ul.children,
	.main-navigation ul.nav-menu li:focus-within > ul.sub-menu,
	.main-navigation ul.nav-menu li:focus-within > ul.children {
		left: auto;
		opacity: 1;
		visibility: visible;
		z-index: 200;
	}
	.main-navigation ul.nav-menu > li { position: relative; }
	/* bỏ mũi tên tam giác mặc định của Storefront */
	.main-navigation ul.nav-menu ul::before,
	.main-navigation ul.nav-menu ul::after { content: none !important; }
}

/* LỖI NGHIÊM TRỌNG đã sửa: .loade-catsheet dùng display:flex nên đè lên thuộc tính [hidden]
   -> lớp phủ trong suốt nằm đè toàn trang, chặn mọi click ở cả desktop lẫn mobile. */
.loade-catsheet[hidden] { display: none !important; }

/* Ảnh phóng to của WooCommerce tràn khỏi khung gallery */
.woocommerce-product-gallery,
.woocommerce-product-gallery__wrapper { overflow: hidden; }

/* =========================================================================
   TINH CHỈNH SANG TRỌNG (2026-07-20) — Hiếu: "style thanh lịch, cao cấp"
   Nguyên tắc: bớt khung viền/nền/nút, tăng khoảng thở, chữ mảnh giãn rộng,
   vàng dùng dè dặt như điểm nhấn chứ không tô kín.
   ========================================================================= */

/* --- 1. Nhịp dọc: hàng xa xỉ sống bằng khoảng trắng --- */
.loade-danhmuc { padding: 7rem 0 1rem; }
.loade-info { padding: 7rem 0 3.25rem; }
.loade-product-section { padding-bottom: 7rem; }
.loade-blog { padding: 7rem 0; }
.site-content { padding-top: 0; }

/* --- 2. Dải danh mục: 3 cột ảnh lớn, nhãn nằm DƯỚI ảnh (bỏ lớp phủ tối) --- */
.loade-danhmuc-grid { grid-template-columns: repeat(3, 1fr); gap: 40px 32px; }
.loade-danhmuc-item { overflow: visible; }
.loade-danhmuc-item:hover { transform: none; }
.loade-danhmuc-item img {
	height: 300px; background: var(--color-mist);
	transition: opacity .6s var(--ease-brand);
}
.loade-danhmuc-item:hover img { opacity: .82; }
.loade-danhmuc-label {
	position: static; background: none; padding: 18px 0 0;
	color: var(--color-ink); text-align: center; align-items: center;
}
.loade-danhmuc-label strong {
	font-family: var(--font-display); font-weight: 500; font-size: 13px;
	letter-spacing: var(--track-mid); text-transform: uppercase;
}
.loade-danhmuc-label em {
	font-size: 12px; color: var(--color-gray); margin-top: 5px; opacity: 1;
}

/* --- 3. Khối giới thiệu: chữ dẫn to hơn, thoáng hơn, không dồn chữ --- */
.loade-info-text h2 { font-size: 27px; line-height: 1.45; margin-bottom: 1.25rem; }
.loade-info-text p {
	font-size: 16.5px; line-height: 1.95; color: var(--color-ink-soft); max-width: 52ch;
}

/* --- 4. Lưới sản phẩm: bỏ nền xám + viền + nút, để sản phẩm tự đứng --- */
.loade-products {
	background: none !important; padding: 0 !important; margin-top: 0;
	gap: 56px 32px;
}
.loade-product-card {
	background: none !important; border: none !important; padding: 0 !important;
	box-shadow: none !important; text-align: center;
}
.loade-product-card:hover { box-shadow: none !important; transform: none; }
.loade-product-thumb {
	display: block; background: var(--color-mist); overflow: hidden;
}
.loade-product-thumb img {
	transition: transform 1.1s var(--ease-brand);
}
.loade-product-card:hover .loade-product-thumb img { transform: scale(1.045); }
.loade-product-card h3 { margin: 1.15rem 0 .4rem; font-size: 14.5px; }
/* Nút "Xem chi tiết" trên từng thẻ làm lưới rối - cả thẻ đã bấm được */
.loade-product-card .loade-btn { display: none; }

/* --- 5. Giá: thôi tô vàng như giá khuyến mãi, dùng mực nhạt trang nhã --- */
.loade-price,
.woocommerce ul.products li.product .price {
	color: var(--color-ink-soft) !important;
	font-weight: 500 !important; font-size: 13.5px;
	letter-spacing: 0.05em; margin-bottom: 0;
}
.loade-price del, .woocommerce ul.products li.product .price del {
	color: var(--color-gray); opacity: .75;
}
.loade-price ins, .woocommerce ul.products li.product .price ins {
	color: var(--color-ink); font-weight: 400;
}

/* --- 6. Lưới shop/danh mục WooCommerce: cùng ngôn ngữ với trang chủ --- */
.woocommerce ul.products li.product {
	border: none !important; background: none !important;
	box-shadow: none !important; padding: 0 !important; text-align: center;
}
.woocommerce ul.products li.product a img {
	background: var(--color-mist); margin-bottom: 1.1rem;
	transition: transform 1.1s var(--ease-brand);
}
.woocommerce ul.products li.product:hover a img { transform: scale(1.045); }
.woocommerce ul.products li.product > a { display: block; overflow: hidden; }
.woocommerce ul.products li.product .button { display: none; }
.woocommerce ul.products { gap: 56px 32px; }

/* --- 7. Dải cam kết: nói khẽ, không hô khẩu hiệu --- */
.loade-chinhsach { padding: 3.25rem 0; }
.loade-chinhsach-grid > div + div { border-left: 1px solid var(--color-border); }
.loade-chinhsach-grid strong {
	font-family: var(--font-display); font-weight: 500; font-size: 11px;
	letter-spacing: var(--track-mid); text-transform: uppercase;
	color: var(--color-ink-soft);
}

/* --- 8. Tiêu đề mục + phụ đề tin tức --- */
.loade-blog-sub {
	font-size: 15px; color: var(--color-gray); margin-bottom: 2.75rem; max-width: 52ch;
}
.loade-blog-grid { gap: 3rem; }

/* --- 9. Mobile: giữ thoáng nhưng đừng dài vô tận --- */
@media (max-width: 1024px) {
	.loade-danhmuc-grid { grid-template-columns: repeat(2, 1fr); gap: 32px 20px; }
	.loade-danhmuc-item img { height: 220px; }
}
@media (max-width: 767px) {
	.loade-danhmuc { padding: 4rem 0 .5rem; }
	.loade-info { padding: 4rem 0 2rem; }
	.loade-product-section { padding-bottom: 4rem; }
	.loade-blog { padding: 4rem 0; }
	.loade-products, .woocommerce ul.products { gap: 34px 16px; }
	.loade-danhmuc-item img { height: 160px; }
	.loade-info-text p { font-size: 15.5px; line-height: 1.85; }
	.loade-chinhsach-grid > div + div { border-left: none; }
	.loade-chinhsach-grid { gap: 1.25rem; }
}

/* --- 10. Hàng sản phẩm lẻ (3 hoặc 2 món) bị dồn về trái, chừa mảng trống lệch
   -> chuyển sang flex có canh giữa để hàng thiếu vẫn cân đối --- */
.loade-products {
	display: flex !important; flex-wrap: wrap; justify-content: center;
}
.loade-products .loade-product-card { flex: 0 0 calc(25% - 24px); max-width: 320px; }
@media (max-width: 1200px) { .loade-products .loade-product-card { flex-basis: calc(33.333% - 22px); } }
@media (max-width: 767px)  { .loade-products .loade-product-card { flex-basis: calc(50% - 8px); } }

/* --- 11. Ẩn nhãn "Sale!" ở mọi nơi (kể cả widget tự render, không qua hook) --- */
.onsale, span.onsale, .woocommerce span.onsale { display: none !important; }

/* --- 12. Ô ảnh sản phẩm: cùng một khung vuông nền xám nhạt cho MỌI ảnh.
   Trước đó ảnh gốc khác tỉ lệ nên lưới lỗ chỗ chỗ trắng chỗ xám, trông rời rạc. --- */
.loade-product-thumb,
.woocommerce ul.products li.product > a:first-of-type {
	display: block; background: var(--color-mist); overflow: hidden;
}
.loade-product-thumb img,
.woocommerce ul.products li.product a img {
	aspect-ratio: 1 / 1; object-fit: contain; width: 100%; height: auto;
	padding: 8%; background: var(--color-mist); margin-bottom: 0;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title { margin-top: 1.1rem; }

/* Thanh sắp xếp: chỉ giữ 1 lần ở trên, bỏ bản lặp cuối trang cho gọn */
.woocommerce nav.woocommerce-pagination ~ .woocommerce-ordering,
.woocommerce ul.products ~ .woocommerce-ordering,
.woocommerce ul.products ~ .woocommerce-result-count { display: none; }
.woocommerce-ordering select { font-size: 13px; }
.woocommerce-result-count {
	font-family: var(--font-display); font-size: 11px;
	letter-spacing: var(--track-mid); text-transform: uppercase; color: var(--color-gray);
}

/* --- 12b. Sửa lại: ảnh sản phẩm vốn đã có nền TRẮNG nung sẵn, đặt trên nền xám
   tạo ra khung trắng lồng khung xám nhìn như đóng khung tranh -> để nền trắng. --- */
.loade-product-thumb,
.woocommerce ul.products li.product > a:first-of-type { background: #fff; }
.loade-product-thumb img,
.woocommerce ul.products li.product a img { background: #fff; padding: 0; }

/* Thanh sắp xếp lặp lại ở cuối trang danh mục */
.storefront-sorting + .storefront-sorting,
ul.products + .storefront-sorting { display: none; }

/* --- 13. Trang sản phẩm: ảnh chính vốn chỉ rộng 416px nên nằm lọt thỏm trong
   cột 538px -> ép đầy cột, cân lại tỉ lệ ảnh/thông tin cho ra dáng trang cao cấp. --- */
.woocommerce div.product div.images { width: 54% !important; }
.woocommerce div.product div.summary { width: 41% !important; }
.woocommerce div.product div.images img,
.woocommerce div.product .woocommerce-product-gallery__image img { width: 100% !important; height: auto; }
.woocommerce div.product .flex-control-thumbs { margin-top: 14px; gap: 10px; display: flex; flex-wrap: wrap; }
.woocommerce div.product .flex-control-thumbs li { width: calc(20% - 8px); margin: 0; }
.woocommerce div.product .flex-control-thumbs img {
	opacity: .45; transition: opacity .35s var(--ease-brand);
}
.woocommerce div.product .flex-control-thumbs img.flex-active,
.woocommerce div.product .flex-control-thumbs img:hover { opacity: 1; }

/* Tiêu đề "Sản phẩm liên quan" bị bơ vơ giữa trang, cho gạch vàng như các mục khác */
.related > h2, .up-sells > h2 {
	position: relative; padding-top: 20px; font-size: 24px; text-align: left;
}
.related > h2::before, .up-sells > h2::before {
	content: ""; position: absolute; top: 0; left: 0;
	width: 44px; height: 1px; background: var(--color-gold);
}
.related, .up-sells { padding-top: 3rem; }

/* --- 14. Giá trên trang sản phẩm: cùng ngôn ngữ với lưới (mực nhạt, không tô vàng) --- */
.woocommerce div.product p.price,
.woocommerce div.product span.price {
	color: var(--color-ink) !important; font-weight: 500 !important;
	font-family: var(--font-display); font-size: 22px; letter-spacing: 0.04em;
}
.woocommerce div.product .product_meta { font-size: 13px; color: var(--color-gray); }

/* =========================================================================
   TINH CHỈNH SANG TRỌNG - PHẦN 2: các chi tiết còn "ồn" trên mobile
   ========================================================================= */

/* --- 15. Nút nổi liên hệ: xanh lá / xanh dương / tím / đỏ của từng app là 4 màu
   chỏi nhau, phá hoàn toàn tông navy-vàng. Đưa hết về navy viền vàng. --- */
.loade-float a,
.loade-float button,
.loade-float .is-phone,
.loade-float .is-phone2,
.loade-float .is-zalo,
.loade-float .is-mess,
.loade-float .is-map {
	background: var(--color-ink) !important;
	color: var(--color-gold-lt) !important;
	border: 1px solid rgba(201, 160, 99, .45);
	box-shadow: 0 6px 22px rgba(10, 17, 31, .22);
}
.loade-float a:hover,
.loade-float button:hover {
	background: var(--color-gold) !important;
	color: var(--color-ink) !important;
	border-color: var(--color-gold) !important;
	transform: none;
}
.loade-float-toggle {
	background: var(--color-ink) !important; color: var(--color-gold-lt) !important;
}

/* --- 16. Thanh dưới mobile: bỏ chữ xanh lá, thống nhất chữ hoa mảnh --- */
@media (max-width: 767px) {
	.loade-bottomnav {
		background: var(--color-ink) !important;
		border-top: 1px solid rgba(201, 160, 99, .22) !important;
	}
	.loade-bottomnav a,
	.loade-bottomnav button {
		color: rgba(255, 255, 255, .72) !important;
		font-family: var(--font-display); font-size: 9.5px !important;
		font-weight: 400; letter-spacing: 0.08em; text-transform: uppercase;
	}
	.loade-bottomnav a.is-accent { color: rgba(255, 255, 255, .72) !important; }
	.loade-bottomnav a.is-current,
	.loade-bottomnav a:hover,
	.loade-bottomnav button:hover { color: var(--color-gold-lt) !important; }
	.loade-bottomnav-badge { background: var(--color-gold); color: var(--color-ink); }

	/* Icon hamburger mặc định của Storefront vẽ đè lên chữ MENU */
	.menu-toggle::before,
	button.menu-toggle::before { content: none !important; }
	/* Hàng menu mobile bị dồn sang phải, chừa mảng trống bên trái */
	#masthead .storefront-primary-navigation > .col-full { justify-content: space-between; }
	#masthead .menu-toggle { margin: 0 !important; }
}

/* --- 17. Hamburger của Storefront vẽ bằng ::after (border/box-shadow), không phải
   ::before -> phải gỡ đúng cái này thì chữ MENU mới hết bị đè. --- */
@media (max-width: 767px) {
	.menu-toggle::after,
	button.menu-toggle::after { content: none !important; display: none !important; }
	/* Nút MENU nằm lệch phải trong khối nav -> kéo về sát mép trái.
	   KHÔNG dùng display:flex ở đây: Storefront xổ menu bằng cách đổi chiều cao
	   của <ul>, flex làm ul co về 0 -> bấm MENU không ra gì. */
	#masthead .main-navigation {
		display: block; text-align: left;
		/* nằm trong hàng flex nên phải chặn bề rộng, không thì tràn 421px/390px */
		flex: 1 1 auto; min-width: 0; max-width: 100%;
	}
	#masthead .menu-toggle { float: none; }
	#masthead .handheld-navigation,
	#masthead .handheld-navigation .menu { max-width: 100%; }
}
@media (max-width: 767px) {
	/* Storefront còn vẽ 2 vạch burger trên <span> bên trong nút -> gỡ nốt */
	.menu-toggle span::before,
	.menu-toggle span::after,
	button.menu-toggle span::before,
	button.menu-toggle span::after { content: none !important; display: none !important; }
	.menu-toggle span { padding: 0 !important; background: none !important; box-shadow: none !important; }
}

/* --- 18. Viền focus mặc định của trình duyệt là tím, chỏi với tông navy-vàng --- */
:focus-visible { outline: 2px solid var(--color-gold); outline-offset: 2px; }
.menu-toggle:focus, button.menu-toggle:focus { outline-color: var(--color-gold); }

/* =========================================================================
   PHẢN HỒI HIẾU (2026-07-20): "tối quá / chữ mờ khó đọc / lỏng lẻo, chi tiết
   thừa, không compact / mục tiêu là BÁN HÀNG, mọi nút bấm phải chỉn chu".
   Giữ chất sang nhưng siết lại: chữ đậm rõ, nhịp gọn, nút bán hàng rõ ràng.
   ========================================================================= */

/* --- A. COMPACT: siết nhịp dọc (trước 7rem quá rỗng, trang trôi tuột) --- */
.loade-danhmuc { padding: 3.5rem 0 .5rem; }
.loade-info { padding: 3.5rem 0 2rem; }
.loade-product-section { padding-bottom: 3.5rem; }
.loade-blog { padding: 3.5rem 0; }
.loade-chinhsach { padding: 2rem 0; }
.loade-products, .woocommerce ul.products { gap: 34px 26px !important; }
.loade-danhmuc-grid { gap: 26px 24px; }
.loade-danhmuc-item img { height: 230px; }
.loade-info-inner { gap: 3.5rem; }
.related, .up-sells { padding-top: 2.25rem; }

/* --- B. DỄ ĐỌC: bỏ chữ xám mảnh, tăng độ tương phản + cỡ chữ --- */
:root { --color-gray: #5f6875; }          /* xám cũ #7b828e quá nhạt trên nền trắng */

.loade-product-card h3,
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-size: 15px !important; font-weight: 500 !important;
	color: var(--color-ink) !important; line-height: 1.45;
	margin: .95rem 0 .35rem !important;
}
/* Giá là thông tin bán hàng quan trọng nhất -> phải nổi, không được mảnh mờ */
.loade-price,
.woocommerce ul.products li.product .price {
	color: var(--color-ink) !important; font-weight: 500 !important;
	font-size: 15px !important; letter-spacing: 0.02em;
	margin-bottom: .85rem !important;
}
.loade-price del, .woocommerce ul.products li.product .price del {
	color: var(--color-gray); font-weight: 400; font-size: 13px;
}
.loade-info-text p { color: var(--color-ink-soft); font-size: 16px; line-height: 1.8; }
.loade-blog-sub { color: var(--color-ink-soft); }
.loade-danhmuc-label strong { font-size: 13.5px; font-weight: 400; color: var(--color-ink); }
.loade-danhmuc-label em { color: var(--color-gray); font-size: 12.5px; }
.loade-chinhsach-grid strong { color: var(--color-ink); font-size: 11.5px; }
.woocommerce div.product p.price,
.woocommerce div.product span.price {
	font-size: 26px; font-weight: 400 !important; color: var(--color-ink) !important;
}

/* --- C. BÁN HÀNG: trả lại nút CTA trên từng sản phẩm, một hệ nút thống nhất.
   Bỏ nút đi tuy "sạch" nhưng khách mất đường bấm rõ ràng -> hại chuyển đổi. --- */
.loade-product-card .loade-btn,
.woocommerce ul.products li.product .button {
	display: block !important; width: 100%;
	margin: 0 !important; padding: 11px 14px !important;
	background: var(--color-ink) !important; color: #fff !important;
	border: 1px solid var(--color-ink) !important; border-radius: 2px;
	font-family: var(--font-display); font-size: 11px !important; font-weight: 400 !important;
	letter-spacing: var(--track-mid); text-transform: uppercase; text-align: center;
	transition: background .3s var(--ease-brand), border-color .3s var(--ease-brand), color .3s var(--ease-brand);
}
.loade-product-card .loade-btn:hover,
.woocommerce ul.products li.product .button:hover {
	background: var(--color-gold) !important; border-color: var(--color-gold) !important;
	color: var(--color-ink) !important;
}
.loade-product-card, .woocommerce ul.products li.product {
	display: flex; flex-direction: column;
}
/* Nút luôn nằm sát đáy thẻ -> hàng nút thẳng hàng dù tên sản phẩm dài ngắn khác nhau */
.loade-product-card .loade-btn,
.woocommerce ul.products li.product .button { margin-top: auto !important; }
.loade-price, .woocommerce ul.products li.product .price { margin-top: 0; }

/* Nút chính trên hero: đổ nền vàng cho bật hẳn, không còn viền mảnh chìm vào ảnh */
.loade-slide-text .loade-btn-pill {
	background: var(--color-gold); color: var(--color-ink);
	border-color: var(--color-gold); font-weight: 500;
}
.loade-slide-text .loade-btn-pill:hover {
	background: var(--color-gold-lt); border-color: var(--color-gold-lt);
}

/* --- D. BỚT TỐI: lớp phủ hero đang đen 90% bên trái, nuốt gần nửa ảnh --- */
@media (min-width: 768px) {
	.loade-slide::after {
		background: linear-gradient(90deg, rgba(6,11,20,.72) 0%, rgba(6,11,20,.5) 32%,
			rgba(6,11,20,.18) 58%, rgba(6,11,20,0) 88%) !important;
	}
	.loade-slide img { height: 58vh; min-height: 420px; max-height: 620px; }
}
@media (max-width: 767px) {
	/* Khối navy dưới ảnh chiếm gần nửa màn -> nén lại */
	.loade-slide-text { padding: 18px 20px 20px !important; }
	.loade-slide-text h2 { font-size: 19px !important; margin-bottom: 12px !important; }
	.loade-danhmuc { padding: 2.25rem 0 .25rem; }
	.loade-info { padding: 2.25rem 0 1.25rem; }
	.loade-product-section { padding-bottom: 2.25rem; }
	.loade-blog { padding: 2.5rem 0; }
	.loade-products, .woocommerce ul.products { gap: 26px 14px !important; }
}

/* --- C2. Nút navy đặc trên MỌI thẻ tạo một dải tối chạy ngang lưới -> lại rơi vào
   lỗi "tối quá". Đổi sang nút viền navy nền trắng, hover mới đổ nền. --- */
.loade-product-card .loade-btn,
.woocommerce ul.products li.product .button {
	background: #fff !important; color: var(--color-ink) !important;
	border: 1px solid var(--color-ink) !important;
}
.loade-product-card:hover .loade-btn,
.woocommerce ul.products li.product:hover .button {
	background: var(--color-ink) !important; color: #fff !important;
}
.loade-product-card .loade-btn:hover,
.woocommerce ul.products li.product .button:hover {
	background: var(--color-gold) !important; border-color: var(--color-gold) !important;
	color: var(--color-ink) !important;
}

/* --- D2. Mobile: khối navy đặc dưới ảnh hero cao ~370px, cộng header tối 310px
   là gần 2 màn hình toàn màu tối trước khi thấy sản phẩm. Đưa chữ đè lên ảnh
   với lớp chuyển sắc như bản desktop -> sáng hơn, ngắn hơn. --- */
@media (max-width: 767px) {
	.loade-slide { position: relative; }
	.loade-slide::after {
		content: "" !important; display: block !important;
		position: absolute; inset: 0; pointer-events: none;
		background: linear-gradient(to top, rgba(6,11,20,.88) 0%, rgba(6,11,20,.55) 34%,
			rgba(6,11,20,.12) 62%, rgba(6,11,20,0) 100%) !important;
	}
	.loade-slide-text {
		position: absolute !important; left: 0; right: 0; bottom: 0; top: auto;
		background: none !important; z-index: 2;
		padding: 0 20px 26px !important; text-align: left !important;
	}
	.loade-slide-kicker { justify-content: flex-start; }
	.loade-slide-text h2 { font-size: 22px !important; margin-bottom: 14px !important; }
	.loade-slider-dots {
		position: absolute !important; bottom: 8px; left: 0; right: 0;
		background: none !important; padding: 0 !important; z-index: 3;
	}
	/* Header tối bớt cao: hàng logo và hàng menu gọn lại */
	#masthead > .col-full { padding-top: 10px !important; padding-bottom: 10px !important; }
	#masthead .custom-logo { max-height: 42px; width: auto; }
	.loade-topbar { font-size: 11px; padding: 6px 0; }
}

/* --- Ô danh mục trên mobile: 230px (đặt ở phần A) là quá cao cho màn hẹp --- */
@media (max-width: 767px) {
	.loade-danhmuc-item img { height: 150px !important; }
	.loade-danhmuc-grid { gap: 20px 14px; }
}

/* --- E. Nút "Xem tất cả" sau mỗi lưới: vừa gọn trang, vừa rõ lối đi mua hàng --- */
.loade-grid-more { text-align: center; margin-top: 2rem; }
.loade-grid-more .loade-btn-pill {
	border: 1px solid var(--color-ink); color: var(--color-ink); background: #fff;
	padding: 12px 30px;
}
.loade-grid-more .loade-btn-pill:hover {
	background: var(--color-ink); color: #fff; border-color: var(--color-ink);
}
/* Mobile: chỉ để 4 sản phẩm mỗi khối, còn lại xem ở trang danh mục
   (trước đó đổ 8 món x 3 khối làm trang dài hơn 10.000px) */
@media (max-width: 767px) {
	.loade-products .loade-product-card:nth-child(n+5) { display: none; }
	.loade-grid-more { margin-top: 1.5rem; }
}

/* Nút "Xem tất cả <tên danh mục>" dài, trên 390px bị tràn khỏi màn -> cho xuống
   dòng có kiểm soát và bó trong bề rộng khung. */
.loade-grid-more .loade-btn-pill {
	display: inline-block; max-width: 100%;
	white-space: normal; text-wrap: balance; line-height: 1.5;
}
@media (max-width: 767px) {
	.loade-grid-more .loade-btn-pill { padding: 11px 20px; font-size: 12px; }
}

/* =========================================================================
   PHẢN HỒI HIẾU (lượt 2): "chữ vẫn bé ti hin khó đọc / card không đều /
   toàn trang chữ to hơn, đậm hơn, dễ đọc hơn"
   ========================================================================= */

/* --- F. THANG CHỮ MỚI: nâng nền chung, đậm hơn, màu mực đặc --- */
body, p, li, td, .site-content { font-size: 17px; line-height: 1.75; color: var(--color-ink); }

/* Tiêu đề: to và chắc hơn, bớt giãn chữ để đọc nhanh */
h1 { font-size: 42px; font-weight: 500; letter-spacing: 0.06em; }
h2 { font-size: 32px; font-weight: 400; letter-spacing: 0.05em; }
h3 { font-size: 20px; font-weight: 500; letter-spacing: 0.03em; }
.loade-info-text h2, .loade-blog-title, .related > h2, .up-sells > h2 { font-size: 29px; }
.woocommerce div.product .product_title { font-size: 40px; font-weight: 500; }
.woocommerce-products-header__title, .page-title { font-size: 36px; font-weight: 500; }

/* Đoạn dẫn khối giới thiệu */
.loade-info-text p { font-size: 18px; line-height: 1.85; color: var(--color-ink); }

/* Menu chính + thanh trên cùng */
.main-navigation ul li a { font-size: 14px !important; font-weight: 500 !important; letter-spacing: 0.09em; }
.loade-topbar { font-size: 13.5px; }
.loade-topbar-contact a { font-weight: 600; }

/* Thẻ sản phẩm: tên + giá + nút đều lên một bậc */
.loade-product-card h3,
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-size: 17px !important; font-weight: 600 !important; line-height: 1.4;
}
.loade-price,
.woocommerce ul.products li.product .price {
	font-size: 17px !important; font-weight: 600 !important;
}
.woocommerce div.product p.price,
.woocommerce div.product span.price { font-size: 30px; font-weight: 500 !important; }

/* Nút: 11px quá bé để bấm và để đọc */
.loade-product-card .loade-btn,
.woocommerce ul.products li.product .button,
.loade-btn, .button, button, input[type="submit"],
.woocommerce a.button, .woocommerce button.button {
	font-size: 13px !important; font-weight: 600 !important; letter-spacing: 0.08em;
}
.loade-product-card .loade-btn,
.woocommerce ul.products li.product .button { padding: 13px 14px !important; }
.loade-btn-pill { font-size: 14px; font-weight: 600; letter-spacing: 0.08em; padding: 14px 34px; }

/* Tin tức */
.loade-blog-body h3 { font-size: 17px !important; font-weight: 600; }
.loade-blog-card.is-feature h3 { font-size: 25px !important; }
.loade-blog-body p { font-size: 16px; line-height: 1.7; color: var(--color-ink-soft); }
.loade-blog-body time { font-size: 12.5px; color: var(--color-gray); letter-spacing: 0.08em; }
.loade-blog-more { font-size: 14px; font-weight: 600; }
.loade-blog-sub { font-size: 17px; }

/* Dải cam kết + chân trang */
.loade-chinhsach-grid strong { font-size: 13.5px; font-weight: 600; letter-spacing: 0.08em; }
.loade-footer, .loade-footer p, .loade-footer a, .loade-footer li { font-size: 15.5px; line-height: 1.75; }
.loade-footer h4 { font-size: 16px; font-weight: 600; letter-spacing: 0.08em; }

/* Thanh dưới mobile */
@media (max-width: 767px) {
	.loade-bottomnav a, .loade-bottomnav button { font-size: 10.5px !important; font-weight: 600; }
	h1 { font-size: 30px; }
	h2 { font-size: 24px; }
	.loade-info-text h2, .loade-blog-title { font-size: 23px; }
	.loade-info-text p { font-size: 16.5px; }
	.woocommerce div.product .product_title { font-size: 27px; }
	.loade-product-card h3,
	.woocommerce ul.products li.product .woocommerce-loop-product__title { font-size: 15px !important; }
	.loade-price, .woocommerce ul.products li.product .price { font-size: 15.5px !important; }
}

/* --- G. Card danh mục không đều: ô đầu có thêm dòng phụ nên cao hơn 26px,
   và lớp phủ tối cũ vẫn còn bám trên nhãn. --- */
.loade-danhmuc-label {
	background: none !important;
	min-height: 62px; justify-content: center;
}
/* Dòng phụ "Xem ngay tất cả sản phẩm" lặp lại y tiêu đề -> bỏ cho 6 ô bằng nhau */
.loade-danhmuc-label em { display: none !important; }
.loade-danhmuc-label strong { font-size: 15px !important; font-weight: 600 !important; }
.loade-danhmuc-item { display: flex; flex-direction: column; }
.loade-danhmuc-item img { border: 1px solid var(--color-border); }

/* --- H. Bố cục trang chủ đảo lại so với bản gốc --- */
/* Dải cam kết nay nằm ngay dưới hero -> cho nền nhạt để tách khỏi ảnh */
.loade-chinhsach {
	background: var(--color-mist); border-top: none;
	border-bottom: 1px solid var(--color-border);
}

/* Ảnh so le trái/phải, tránh 3 khối giống hệt nhau chạy nối tiếp */
.loade-info-alt .loade-info-inner > .loade-info-image { order: 2; }
.loade-info-alt .loade-info-inner > .loade-info-text  { order: 1; }

/* Khối "Mua loa Devialet ở đâu cho yên tâm" */
.loade-why { padding: 3.5rem 0; background: var(--color-mist); }
.loade-why-title {
	position: relative; padding-top: 20px; margin-bottom: 2rem; font-size: 29px;
}
.loade-why-title::before {
	content: ""; position: absolute; top: 0; left: 0;
	width: 44px; height: 1px; background: var(--color-gold);
}
.loade-why-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; }
.loade-why-item {
	background: #fff; border: 1px solid var(--color-border); padding: 26px 24px;
}
.loade-why-item h3 {
	font-size: 17px !important; font-weight: 600; margin-bottom: .6rem;
	text-transform: none; letter-spacing: 0.01em;
}
.loade-why-item p { font-size: 15.5px; line-height: 1.7; color: var(--color-ink-soft); margin: 0; }
@media (max-width: 1024px) { .loade-why-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  {
	.loade-why-grid { grid-template-columns: 1fr; gap: 14px; }
	.loade-why { padding: 2.25rem 0; }
	/* trên mobile mọi khối đều xếp dọc nên bỏ đảo thứ tự cho ảnh luôn đứng trước */
	.loade-info-alt .loade-info-inner > .loade-info-image { order: 0; }
	.loade-info-alt .loade-info-inner > .loade-info-text  { order: 0; }
}

/* --- I. Menu bị vỡ 2 dòng sau khi tăng cỡ chữ ("LIÊN HỆ" rớt xuống hàng dưới).
   Theo rule của Hiếu: thanh menu TUYỆT ĐỐI 1 dòng ở mọi bề rộng. --- */
@media (min-width: 1100px) {
	#masthead .main-navigation ul.nav-menu {
		display: flex !important; flex-wrap: nowrap !important;
		align-items: center; gap: 0;
	}
	#masthead .main-navigation ul.nav-menu > li {
		float: none !important; white-space: nowrap;
	}
	#masthead .main-navigation ul.nav-menu > li > a { white-space: nowrap; }
	/* Submenu vẫn phải xổ dọc bình thường */
	#masthead .main-navigation ul.nav-menu ul.sub-menu,
	#masthead .main-navigation ul.nav-menu ul.children {
		display: block; flex-wrap: wrap;
	}
	/* Chật dần thì bóp khoảng cách + giãn chữ, không cho xuống dòng */
	.main-navigation ul li a { padding-left: 12px; padding-right: 12px; }
}
@media (min-width: 1100px) and (max-width: 1300px) {
	.main-navigation ul li a { font-size: 13px !important; letter-spacing: 0.06em; padding-left: 9px; padding-right: 9px; }
}
@media (min-width: 1100px) and (max-width: 1200px) {
	.main-navigation ul li a { font-size: 11px !important; letter-spacing: 0.01em; padding-left: 4px; padding-right: 4px; }
	.main-navigation ul li.menu-item-has-children > a::after { margin-left: 3px; font-size: 8px; }
}

/* --- I2. 8 mục menu + giỏ hàng không đủ chỗ dưới 1100px (giỏ bị đẩy ra ngoài màn).
   Theo rule: chật thì CHUYỂN HAMBURGER, tuyệt đối không cho menu xuống 2 dòng.
   Storefront chỉ tự đổi ở 768px nên phải nâng ngưỡng lên 1100px bằng tay. --- */
@media (max-width: 1099px) {
	#masthead .menu-toggle,
	#masthead button.menu-toggle { display: block !important; }
	#masthead .main-navigation ul.nav-menu { display: none !important; }
	#masthead .main-navigation .handheld-navigation { display: none; }
	#masthead .main-navigation.toggled .handheld-navigation { display: block; }
	#masthead .main-navigation { display: block; text-align: left; flex: 1 1 auto; min-width: 0; }
	#masthead .menu-toggle::before, #masthead .menu-toggle::after,
	#masthead .menu-toggle span::before, #masthead .menu-toggle span::after {
		content: none !important; display: none !important;
	}
	#masthead .menu-toggle, #masthead button.menu-toggle {
		background: transparent !important; color: #fff !important;
		border: 1px solid rgba(255,255,255,.28) !important; border-radius: 2px !important;
		font-family: var(--font-display); font-size: 12px !important; font-weight: 500 !important;
		letter-spacing: var(--track-mid); text-transform: uppercase;
		padding: 10px 18px !important; float: none;
	}
	#masthead .menu-toggle:hover { border-color: var(--color-gold) !important; color: var(--color-gold-lt) !important; }
}

/* --- I3. Giỏ hàng bị đẩy lòi ra ngoài mép phải ở 1100-1300px: nó là <ul> nên
   thừa hưởng padding-left mặc định của danh sách, cộng thêm gap của hàng flex. --- */
#masthead .site-header-cart {
	flex: 0 0 auto !important; margin: 0 0 0 auto !important;
	padding: 0 !important; list-style: none;
}
#masthead .site-header-cart li { margin: 0 !important; padding: 0 !important; }
#masthead .storefront-primary-navigation > .col-full { box-sizing: border-box; }
#masthead .main-navigation { min-width: 0; }

/* =========================================================================
   FOOTER: sửa vỡ dòng lộn xộn + bỏ khoảng trống thừa
   ========================================================================= */

/* Cột chính sách/hỗ trợ quá hẹp nên "Chính Sách Vận / Chuyển", "Phương Thức Thanh /
   Toán" bị xé làm đôi - đúng lỗi chữ mồ côi. Chia lại tỉ lệ cột cho vừa chữ dài nhất. */
.loade-footer-grid {
	grid-template-columns: 1.9fr 1.5fr 1.35fr 1.3fr 1fr;
	gap: 2rem 2.25rem;
}
/* Link footer luôn nằm trọn 1 dòng trên desktop */
@media (min-width: 1101px) {
	.loade-footer-col li > a { white-space: nowrap; }
}
/* overflow-wrap:anywhere cắt giữa từ tiếng Việt -> chỉ cho ngắt ở ranh giới từ */
.loade-footer-col p,
.loade-footer-col a,
.loade-footer-brand p { overflow-wrap: normal; word-break: normal; }
.loade-footer-col p, .loade-footer-brand p { text-wrap: pretty; }

/* Địa chỉ + giờ mở cửa: giữ các cụm dính liền, không để "100000" hay "đến chủ nhật" rớt lẻ */
.loade-footer-col p { hyphens: none; }

/* Chữ footer đọc được hơn (0.82rem ~ 13px là quá bé so với thang chữ mới) */
.loade-footer-brand p,
.loade-footer-col p,
.loade-footer-col a { font-size: 15px !important; line-height: 1.7; color: #c3c9d3; }
.loade-footer-col h4, .loade-footer-col .loade-footer-h { font-size: 16px; letter-spacing: 0.06em; }
.loade-footer-col li { margin-bottom: .55rem; }
.loade-legal { font-size: 13.5px; margin-top: 2rem; padding-top: 1.25rem; }
.loade-credit { font-size: 13.5px; }

/* Khoảng trống thừa dưới các cột */
.loade-footer { padding: 3rem 0 1.25rem; }

@media (max-width: 1100px) {
	.loade-footer-grid { grid-template-columns: 1.6fr 1fr 1fr; gap: 1.75rem 1.75rem; }
}
@media (max-width: 767px) {
	.loade-footer-brand p, .loade-footer-col p, .loade-footer-col a { font-size: 14.5px !important; }
}

/* Lỗi tôi vừa gây ra: khối @media 1100px viết SAU nên đè luôn quy tắc 767px,
   khiến footer giữ 3 cột ở 390px -> "Chính / Sách / Mua / Hàng" vỡ 4 dòng. */
@media (max-width: 767px) {
	.loade-footer-grid { grid-template-columns: 1fr 1fr !important; gap: 1.75rem 1.25rem; }
	.loade-footer-brand { grid-column: 1 / -1; }
	.loade-footer-col li > a { white-space: normal; }
}
@media (max-width: 420px) {
	.loade-footer-grid { grid-template-columns: 1fr !important; gap: 1.5rem; }
}

/* Logo thật ở chân trang (thay wordmark chữ) - bản nền trong màu vàng kim hợp nền navy */
.loade-footer-logo-link { display: inline-block; line-height: 0; }
.loade-footer-logo {
	max-width: 240px; width: 100%; height: auto; display: block;
	transition: opacity .35s var(--ease-brand);
}
.loade-footer-logo-link:hover .loade-footer-logo { opacity: .8; }
@media (max-width: 767px) { .loade-footer-logo { max-width: 200px; } }

/* =========================================================================
   SUBMENU: nền trắng chữ đen giữa header navy trông như dán từ theme khác,
   lại bị min-width cứng 240px nên chữ dài tràn ra ngoài khung.
   Đổi sang nền navy đậm hơn header + viền vàng mảnh, rộng theo chữ.
   ========================================================================= */
.main-navigation ul.menu ul,
.main-navigation ul.nav-menu ul,
.main-navigation ul li ul.sub-menu,
.main-navigation ul li ul.children,
.storefront-primary-navigation .main-navigation ul ul {
	background-color: #060b14 !important;
	background: #060b14;
	border: 1px solid rgba(201, 160, 99, .28);
	border-top: 1px solid var(--color-gold);
	border-radius: 2px;
	box-shadow: 0 18px 40px rgba(0, 0, 0, .45);
	padding: 8px 0;
	/* rộng theo mục dài nhất, không cắt chữ */
	min-width: max-content;
	width: max-content;
	max-width: 340px;
}
.main-navigation ul li ul li { width: auto; }
.main-navigation ul li ul li a {
	color: rgba(255, 255, 255, .82) !important;
	background: transparent !important;
	font-family: var(--font-display);
	font-weight: 400;
	font-size: 12.5px !important;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	padding: 11px 22px !important;
	white-space: nowrap;
	border-left: 2px solid transparent;
	transition: color .25s var(--ease-brand), border-color .25s var(--ease-brand),
		background-color .25s var(--ease-brand);
}
.main-navigation ul li ul li a:hover,
.main-navigation ul li ul li.current-menu-item > a {
	color: var(--color-gold-lt) !important;
	background-color: rgba(201, 160, 99, .08) !important;
	border-left-color: var(--color-gold);
}
/* gạch chân vàng của menu cấp 1 không được lan xuống mục con */
.main-navigation ul li ul li a::before { content: none !important; }

/* Storefront đặt width cố định (~14.1em) cho submenu với specificity cao hơn
   -> "DEVIALET PHANTOM ULTIMATE 108DB" tràn khỏi khung. Ép rộng theo chữ. */
.main-navigation ul.menu ul,
.main-navigation ul.nav-menu ul,
.main-navigation ul li ul.sub-menu,
.main-navigation ul li ul.children,
.storefront-primary-navigation .main-navigation ul ul {
	width: max-content !important;
	min-width: 220px !important;
	max-width: 380px !important;
}
.main-navigation ul li ul li { width: 100% !important; float: none !important; }
.main-navigation ul li ul li a { width: auto !important; display: block; }

/* Quy tắc rộng-theo-chữ ở trên chỉ đúng cho dropdown desktop. Trên menu hamburger,
   submenu xổ dọc trong khung hẹp -> max-content làm nó rộng 347px/390px, tràn màn. */
@media (max-width: 1099px) {
	.main-navigation ul.menu ul,
	.main-navigation ul.nav-menu ul,
	.main-navigation ul li ul.sub-menu,
	.main-navigation ul li ul.children,
	.storefront-primary-navigation .main-navigation ul ul {
		width: 100% !important; min-width: 0 !important; max-width: 100% !important;
		box-shadow: none; border: none; border-left: 1px solid rgba(201,160,99,.3);
		border-radius: 0; padding: 2px 0 6px;
	}
	.main-navigation ul li ul li a {
		white-space: normal; padding: 9px 0 9px 16px !important; font-size: 12px !important;
	}
}

/* =========================================================================
   RÀ SOÁT TOÀN SITE - sửa các lỗi đo được
   ========================================================================= */

/* Tiêu đề hero: trước dùng h2, nay slide đầu là h1 -> gom style về 1 class chung */
.loade-slide-text .loade-slide-title,
.loade-slide-text h1, .loade-slide-text h2 {
	font-family: var(--font-display); font-size: clamp(28px, 3.4vw, 48px);
	font-weight: 400; line-height: 1.3; letter-spacing: .06em;
	text-transform: uppercase; max-width: 15ch; color: #fff; margin: 0 0 22px;
}

/* Chữ quá bé đo được: kicker hero 11px, đếm kết quả 11px */
.loade-slide-kicker { font-size: 12.5px !important; }
.woocommerce-result-count { font-size: 12.5px !important; }

/* Mũi tên phân trang bị cắt mất một nửa */
.woocommerce-pagination .page-numbers li a,
.woocommerce-pagination .page-numbers li span,
.pagination .page-numbers, .nav-links .page-numbers {
	min-width: 44px; height: 44px; line-height: 42px;
	padding: 0 12px !important; overflow: visible !important;
	display: inline-flex; align-items: center; justify-content: center;
	font-size: 14px; border-radius: 2px;
}
.woocommerce-pagination .page-numbers li .current,
.pagination .page-numbers.current {
	background: var(--color-ink) !important; color: #fff !important;
}

/* Vùng bấm tối thiểu 44px trên mobile (đo được nhiều link chỉ ~24px) */
@media (max-width: 767px) {
	.loade-blog-more, .loade-footer-col a, .woocommerce-LoopProduct-link {
		display: inline-block; padding-top: 6px; padding-bottom: 6px;
	}
	.loade-float a, .loade-float button { width: 46px !important; height: 46px !important; }
}

/* Bảng trong nội dung: chỉ ra cho người dùng biết cuộn được */
.loade-table-scroll { position: relative; }
@media (max-width: 767px) {
	.loade-table-scroll::after {
		content: "Vuốt ngang để xem tiếp";
		display: block; padding: 6px 10px; font-size: 12px;
		color: var(--color-gray); border-top: 1px solid var(--color-border);
		position: sticky; left: 0;
	}
}

/* --- Trang Giỏ hàng / khối WooCommerce Blocks: dùng bộ class wc-block-* riêng
   nên toàn bộ style lưới sản phẩm ở trên KHÔNG áp vào. Đồng bộ lại. --- */
.wc-block-grid__product-onsale,
.wc-block-grid__product .onsale { display: none !important; }

.wc-block-grid__products { gap: 34px 26px; }
.wc-block-grid__product { text-align: center; padding: 0 !important; }
.wc-block-grid__product-image img {
	aspect-ratio: 1 / 1; object-fit: contain; width: 100%; height: auto; background: #fff;
}
.wc-block-grid__product-title {
	font-family: var(--font-body) !important;
	font-size: 17px !important; font-weight: 600 !important;
	color: var(--color-ink) !important; text-transform: none !important;
	letter-spacing: 0.01em; line-height: 1.4; margin: .95rem 0 .35rem !important;
}
.wc-block-grid__product-price {
	font-size: 17px !important; font-weight: 600 !important;
	color: var(--color-ink) !important; margin-bottom: .85rem !important;
}
.wc-block-grid__product-add-to-cart .wp-block-button__link,
.wc-block-grid__product .wp-block-button__link {
	background: #fff !important; color: var(--color-ink) !important;
	border: 1px solid var(--color-ink) !important; border-radius: 2px !important;
	font-family: var(--font-display); font-size: 13px !important; font-weight: 600 !important;
	letter-spacing: 0.08em; text-transform: uppercase;
	padding: 13px 18px !important; width: 100%;
	transition: background .3s var(--ease-brand), color .3s var(--ease-brand);
}
.wc-block-grid__product:hover .wp-block-button__link {
	background: var(--color-ink) !important; color: #fff !important;
}
.wc-block-grid__product .wp-block-button__link:hover {
	background: var(--color-gold) !important; border-color: var(--color-gold) !important;
	color: var(--color-ink) !important;
}
/* Tiêu đề khối + trạng thái giỏ trống */
.wc-block-cart__empty-cart__title {
	font-family: var(--font-display) !important; font-weight: 500;
	font-size: 22px !important; letter-spacing: 0.06em;
}
.wp-block-heading, .wc-block-cart h2 {
	font-family: var(--font-display); font-weight: 500; letter-spacing: 0.05em;
}
/* Trang giỏ trống đang để một mảng trắng rất lớn phía dưới */
.woocommerce-cart .site-main, .woocommerce-checkout .site-main { padding-bottom: 1rem; }

/* --- Danh sách bài viết / kết quả tìm kiếm: thẻ gọn thay vì in cả bài --- */
.loade-archive-card { display: grid; grid-template-columns: 280px 1fr; gap: 1.75rem; align-items: start; }
.loade-archive-thumb { display: block; overflow: hidden; border-radius: 2px; }
.loade-archive-thumb img {
	width: 100%; height: 180px; object-fit: cover; display: block;
	transition: transform 1.1s var(--ease-brand);
}
.loade-archive-card:hover .loade-archive-thumb img { transform: scale(1.04); }
.loade-archive-body p { font-size: 16px; line-height: 1.75; color: var(--color-ink-soft); margin-bottom: .75rem; }
.loade-archive-more {
	font-family: var(--font-display); font-size: 13px; font-weight: 600;
	letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-ink);
	border-bottom: 1px solid var(--color-gold); padding-bottom: 2px;
}
.loade-archive-more:hover { color: var(--color-gold-dark); }
.search .site-main article, .archive .site-main article, .blog .site-main article {
	padding-bottom: 2.25rem; margin-bottom: 2.25rem; border-bottom: 1px solid var(--color-border);
}
.search .entry-title, .archive .entry-title, .blog .entry-title {
	font-size: 22px !important; line-height: 1.35; margin-bottom: .75rem;
	text-transform: none !important; letter-spacing: 0.01em; font-weight: 600;
}
@media (max-width: 767px) {
	.loade-archive-card { grid-template-columns: 1fr; gap: .9rem; }
	.loade-archive-thumb img { height: 200px; }
	.search .entry-title, .archive .entry-title, .blog .entry-title { font-size: 19px !important; }
}

/* --- Form tài khoản / giỏ hàng: ô nhập kéo dài 1400px rất khó dùng --- */
.woocommerce-account .woocommerce, .woocommerce-account form.login,
.woocommerce-account form.register, .woocommerce-account .u-column1 {
	max-width: 460px; margin-left: auto; margin-right: auto;
}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce-account input[type="text"],
.woocommerce-account input[type="email"],
.woocommerce-account input[type="password"] {
	background: #fff !important; border: 1px solid var(--color-border) !important;
	border-radius: 2px !important; padding: 12px 14px !important; font-size: 16px !important;
}
.woocommerce form .form-row input:focus { border-color: var(--color-gold) !important; }
.woocommerce-account .woocommerce-form-login__submit { width: 100%; }
.woocommerce-account h2 { font-size: 24px; }

/* Tiêu đề trang lưu trữ / tìm kiếm + ngày đăng trên thẻ */
.loade-archive-header { margin-bottom: 2rem; }
.loade-archive-title {
	font-size: 32px !important; font-weight: 500; letter-spacing: 0.05em;
	text-transform: uppercase; margin: 0;
}
.loade-archive-date {
	display: block; font-family: var(--font-display); font-size: 12.5px;
	letter-spacing: 0.09em; color: var(--color-gray); margin-bottom: .5rem;
}
/* Nhịp gọn hơn: khoảng trắng đầu trang và giữa các bài đang quá rộng */
.blog .site-main, .archive .site-main, .search .site-main { padding-top: 0; }
.search .site-main article, .archive .site-main article, .blog .site-main article {
	padding-bottom: 1.75rem; margin-bottom: 1.75rem;
}
.loade-archive-card { gap: 1.5rem; }
.loade-archive-thumb img { height: 165px; }
.search .entry-header, .archive .entry-header, .blog .entry-header { margin-bottom: .9rem; }
.search .entry-header::after, .archive .entry-header::after, .blog .entry-header::after { content: none; }
@media (max-width: 767px) { .loade-archive-title { font-size: 24px !important; } }

/* Vùng bấm "Đọc tiếp" trên mobile phải đủ 44px theo chuẩn chạm */
@media (max-width: 767px) {
	.loade-archive-more { padding: 11px 0; display: inline-block; }
}

/* Trang Giỏ hàng: khối gợi ý đang lệch trái và vỡ 3+1, canh giữa + 4 cột cho cân */
.woocommerce-cart .wp-block-woocommerce-cart,
.woocommerce-cart .wc-block-cart { max-width: var(--w-page); margin: 0 auto; }
.wc-block-grid__products,
.wp-block-woocommerce-product-collection .wp-block-post-template {
	display: grid !important;
	grid-template-columns: repeat(4, 1fr) !important;
	gap: 34px 26px !important;
	justify-items: stretch;
}
.wc-block-cart__empty-cart__title + *, .wc-block-cart .wp-block-heading { text-align: center; }
@media (max-width: 1024px) {
	.wc-block-grid__products,
	.wp-block-woocommerce-product-collection .wp-block-post-template {
		grid-template-columns: repeat(3, 1fr) !important;
	}
}
@media (max-width: 600px) {
	.wc-block-grid__products,
	.wp-block-woocommerce-product-collection .wp-block-post-template {
		grid-template-columns: repeat(2, 1fr) !important; gap: 26px 14px !important;
	}
}

/* ============================================================
   TRANG SẢN PHẨM - dựng lại bố cục (2026-07-20)
   Lỗi trước: ảnh chiếm 743px còn cột mua hàng 564px và kết thúc
   ở 529px -> nửa phải trống hoác; 10 ảnh nhỏ rải trên khung cao
   350px; tab mô tả bị đẩy sang phải x=511 rộng 897px (quá dài
   để đọc); thanh mua hàng dán đáy đè lên nội dung.
   ============================================================ */
@media (min-width: 993px) {
	/* Storefront (theme gốc) đặt overflow:hidden lên div.product để clearfix
	   layout float cũ - vô tình VÔ HIỆU HOÁ position:sticky của ảnh (sticky
	   cần ancestor overflow:visible mới có "khoảng" để dán). Bỏ clearfix này
	   vì đã chuyển sang CSS Grid, không còn cần float nữa. */
	.single-product div.product { overflow: visible !important; }
	.single-product div.product { display: grid;
		grid-template-columns: minmax(0, 1fr) 420px;
		/* Khai rõ 6 hàng để "-1" (dòng cuối) bên dưới có mốc xác định - không
		   khai thì "-1" vô nghĩa vì chưa có grid-template-rows, khiến trình
		   duyệt đặt lung tung các khối (ảnh bị đẩy xuống tận y=1440). Hàng dư
		   không có nội dung tự co về 0, không tốn chỗ. */
		grid-template-rows: repeat(6, auto);
		column-gap: 56px; align-items: start; }
	/* KHÔNG dùng grid-area (tên vùng) nữa - container đã bỏ grid-template-areas.
	   grid-area vẫn set luôn cả phần "hàng" dù không khớp vùng nào, khiến các
	   khối bị đặt lung tung (ảnh từng bị đẩy xuống tận y=3851px). Vị trí thật
	   sự khai ở khối "BỐ CỤC LẠI theo tham chiếu TGDĐ" phía dưới. */
	.single-product div.product .woocommerce-product-gallery { width: 100% !important; float: none !important; margin: 0 !important; }
	.single-product div.product .entry-summary { width: 100% !important; float: none !important; margin: 0 !important; }
	.single-product div.product .woocommerce-tabs { margin-top: 3.5rem; }
	.single-product .woocommerce-product-gallery__image img { max-height: 620px; object-fit: contain; }
}

/* Dải ảnh nhỏ: lưới 5 ô vuông đều nhau, sát nhau */
.woocommerce div.product .flex-control-thumbs {
	display: grid !important; grid-template-columns: repeat(5, 1fr);
	gap: 8px !important; margin-top: 12px !important; height: auto !important; }
.woocommerce div.product .flex-control-thumbs li {
	width: auto !important; float: none !important; margin: 0 !important; }
.woocommerce div.product .flex-control-thumbs img {
	width: 100% !important; aspect-ratio: 1 / 1; object-fit: contain;
	background: #fff; border: 1px solid #dde1e5; opacity: .85; }
.woocommerce div.product .flex-control-thumbs img.flex-active,
.woocommerce div.product .flex-control-thumbs img:hover { opacity: 1; border-color: var(--color-gold); }

/* Tab mô tả: thanh tab NGANG, chữ bó 820px cho dễ đọc */
.woocommerce div.product .woocommerce-tabs ul.tabs { float: none !important; width: 100% !important;
	display: flex; flex-wrap: wrap; gap: 0; padding: 0 !important; margin: 0 0 1.75rem !important;
	border-bottom: 1px solid #d5d9df; }
.woocommerce div.product .woocommerce-tabs ul.tabs li { float: none !important; width: auto !important;
	margin: 0 !important; background: none !important; border: 0 !important; padding: 0 !important; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a { display: block; padding: 12px 22px !important;
	font-family: var(--font-display); font-size: 13px; font-weight: 600; letter-spacing: .09em;
	text-transform: uppercase; color: var(--color-gray) !important; border-bottom: 2px solid transparent; }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a,
.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover {
	color: var(--color-ink) !important; border-bottom-color: var(--color-gold); }
.woocommerce div.product .woocommerce-Tabs-panel { float: none !important; width: 100% !important;
	max-width: 820px; margin: 0 !important; }
.woocommerce div.product .woocommerce-Tabs-panel img { max-width: 100%; height: auto; }

/* Thanh mua hàng dán đáy: chỉ giữ cho mobile. Trên desktop cột mua
   hàng đã dính theo màn nên thanh này chỉ che mất nội dung. */
@media (min-width: 993px) { .storefront-sticky-add-to-cart { display: none !important; } }

/* Ghi đè bề rộng % cũ (rule cũ nhiều thẻ hơn nên thắng ở vòng trước) */
@media (min-width: 993px) {
	.woocommerce.single-product div.product div.images.woocommerce-product-gallery,
	.woocommerce.single-product div.product div.summary.entry-summary {
		width: 100% !important; max-width: none !important; float: none !important; margin-right: 0 !important; }
}

/* Cột mua hàng: siết nhịp + đồng bộ chiều cao ô chọn/số lượng/nút */
.single-product .site-main { padding-top: 1.5rem; }
.woocommerce div.product .product_title.entry-title {
	font-size: 30px !important; line-height: 1.25; margin: 0 0 .75rem !important; }
.woocommerce div.product .entry-summary p.price { margin: 0 0 1.25rem !important;
	font-size: 24px !important; font-weight: 600; color: var(--color-ink) !important; }
.woocommerce div.product form.cart { margin: 0 !important; }
.woocommerce div.product form.cart .variations { margin-bottom: 1rem !important; }
.woocommerce div.product form.cart .variations td,
.woocommerce div.product form.cart .variations th { padding: 0 0 .4rem !important; display: block; }
.woocommerce div.product form.cart .variations label { font-family: var(--font-display); font-size: 12px;
	letter-spacing: .1em; text-transform: uppercase; color: var(--color-gray); }
.woocommerce div.product form.cart select { width: 100%; max-width: 320px; height: 50px;
	padding: 0 14px; border: 1px solid #d7d9de; border-radius: 2px; font-size: 16px; background-color: #fff; }
.woocommerce div.product form.cart .quantity .qty { height: 52px; width: 76px; text-align: center;
	border: 1px solid #d7d9de; border-radius: 2px; font-size: 16px; }
.woocommerce div.product form.cart .single_add_to_cart_button {
	height: 52px; padding: 0 34px !important; background: var(--color-ink) !important; color: #fff !important;
	font-family: var(--font-display); font-size: 13px !important; font-weight: 600 !important;
	letter-spacing: .1em; text-transform: uppercase; border-radius: 2px; }
.woocommerce div.product form.cart .single_add_to_cart_button:hover:not(.disabled) {
	background: var(--color-gold) !important; color: var(--color-ink) !important; }
.woocommerce div.product .product_meta { margin-top: 1.5rem; padding-top: 1.25rem;
	border-top: 1px solid #d5d9df; font-size: 14px; }

/* Tab mô tả: bỏ tiêu đề trùng với tên tab, bó chữ 820px, canh trái */
.woocommerce div.product .woocommerce-Tabs-panel--description > h2:first-child { display: none; }
.woocommerce div.product div.woocommerce-tabs .woocommerce-Tabs-panel {
	max-width: 820px !important; }
.woocommerce div.product .woocommerce-Tabs-panel p,
.woocommerce div.product .woocommerce-Tabs-panel h2,
.woocommerce div.product .woocommerce-Tabs-panel h3 { text-align: left !important; text-indent: 0 !important; }
.woocommerce div.product .woocommerce-Tabs-panel h2,
.woocommerce div.product .woocommerce-Tabs-panel h3 { font-size: 22px !important; margin: 2rem 0 .75rem !important; }
.woocommerce div.product .woocommerce-Tabs-panel p { margin: 0 0 1rem !important; }

/* Mobile/tablet: ảnh + cột mua hàng phải chiếm trọn bề ngang.
   Rule cũ đặt width 41% kèm !important nên bản 100% ở dưới bị thua. */
@media (max-width: 992px) {
	.woocommerce div.product div.images.woocommerce-product-gallery,
	.woocommerce div.product div.summary.entry-summary {
		width: 100% !important; float: none !important; margin-right: 0 !important; }
	.woocommerce div.product .product_title.entry-title { font-size: 24px !important; }
	.woocommerce div.product .flex-control-thumbs { grid-template-columns: repeat(5, 1fr); }
	.woocommerce div.product form.cart .single_add_to_cart_button { width: 100%; }
}

/* Siết khoảng trắng trang sản phẩm (2026-07-20, lượt 2)
   Ảnh chính cao 620px nhưng ảnh gốc nằm ngang -> thừa trắng trên dưới.
   Dải ảnh nhỏ 145px x 3 hàng = 452px, cột ảnh cao 1100px trong khi
   cột mua hàng chỉ 447px. Hạ ảnh còn 420px, ảnh nhỏ 7 ô/hàng. */
@media (min-width: 993px) {
	.single-product .woocommerce-product-gallery__image img { max-height: 420px !important; }
}
.woocommerce div.product .flex-control-thumbs {
	grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)) !important;
	gap: 6px !important; margin-top: 10px !important; }
@media (max-width: 992px) {
	.woocommerce div.product .flex-control-thumbs {
		grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)) !important; }
	.single-product .woocommerce-product-gallery__image img { max-height: 340px !important; object-fit: contain; }
}

/* Cắt 150px trắng giữa đường dẫn và ảnh sản phẩm */
.single-product .storefront-breadcrumb { margin-bottom: 0 !important; padding-bottom: 0 !important; }
.single-product .site-main { padding-top: 0 !important; }
.single-product #content { padding-top: 1rem !important; }
.single-product div.product > .woocommerce-product-gallery,
.single-product div.product > .summary { margin-top: 0 !important; }

/* Khoảng cách ô chọn màu -> hàng nút mua (Woo chèn margin 2em) */
.woocommerce div.product .woocommerce-variation-add-to-cart,
.woocommerce div.product .single_variation_wrap { margin-top: 1rem !important; }
.woocommerce div.product .woocommerce-variation-price { margin-bottom: .75rem; }
.woocommerce div.product .reset_variations { font-size: 13px; }

/* Khối cam kết dưới nút mua (lấp 250px trống bên phải) */
.loade-trust { list-style: none; margin: 1.75rem 0 0 !important; padding: 1.25rem 0 0;
	border-top: 1px solid #d5d9df; }
.loade-trust li { display: grid; grid-template-columns: 22px 1fr; gap: 0 12px;
	margin: 0 0 .9rem !important; padding: 0; list-style: none; }
.loade-trust li::before { content: ""; width: 18px; height: 18px; margin-top: 3px;
	border: 1px solid var(--color-gold); border-radius: 50%;
	background: var(--color-gold) url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%230A111F' stroke-width='2.2' d='M3.5 8.4l3 3 6-6.4'/%3E%3C/svg%3E") center/12px no-repeat; }
.loade-trust strong { font-size: 15px; font-weight: 600; color: var(--color-ink); }
.loade-trust span { display: block; font-size: 14px; line-height: 1.6; color: var(--color-gray); }
/* strong + span phải cùng nằm ở cột 2, nếu không span rơi xuống cột 1 rộng 22px */
.loade-trust strong, .loade-trust span { grid-column: 2; }
.loade-trust span a { color: var(--color-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* ============================================================
   UX pass 2026-07-20: vùng chạm + cỡ chữ nhỏ trên mobile
   Đo được: chấm chuyển ảnh chỉ cao 2px (gần như không bấm được),
   link footer cao 37px, nhãn thanh dưới 10,5px.
   ============================================================ */
/* Chấm chuyển ảnh: giữ nguyên nét mảnh nhưng mở rộng vùng bấm bằng ::before */
.loade-slider-dots button { position: relative; }
.loade-slider-dots button::before { content: ""; position: absolute;
	left: 50%; top: 50%; transform: translate(-50%, -50%);
	width: 100%; min-width: 28px; height: 44px; }

@media (max-width: 767px) {
	/* Link footer: 37px -> 44px đúng chuẩn vùng chạm */
	.loade-footer-col ul li a,
	.loade-footer-col p a { display: inline-block; min-height: 44px; line-height: 44px; }
	/* Nhãn thanh điều hướng dưới: 10,5px quá nhỏ để đọc lướt */
	.loade-mobilebar a span { font-size: 11.5px !important; }
	/* Hotline trên thanh trên cùng: 24px -> 40px */
	.loade-topbar a { display: inline-block; padding: 8px 0; }
}
/* Nhãn thanh dưới (class đúng là .loade-bottomnav, bản trên viết nhầm .loade-mobilebar) */
@media (max-width: 767px) { .loade-bottomnav a span, .loade-bottomnav button span { font-size: 11.5px !important; } }
/* Cách ::before không ăn (khối kế tiếp đè lên). Làm thẳng: nút cao 24px,
   padding trong suốt nhờ background-clip: content-box -> nhìn vẫn là vạch mảnh. */
.loade-slider-dots button::before { display: none; }
.loade-slider-dots button {
	height: 24px !important; padding: 11px 0 !important;
	background-clip: content-box !important; box-sizing: border-box; }

/* Mô tả danh mục: bó chữ cho dễ đọc, canh trái, không đẩy lưới sản phẩm xuống sâu */
.term-description { max-width: 820px; margin: 0 auto 1.5rem; text-align: left; }
.term-description p { margin: 0 0 .85rem; }
.loade-cat-intro { margin-bottom: 1.75rem; }
.loade-cat-more { max-width: 820px; margin: 3rem auto 0; padding-top: 2rem; border-top: 1px solid #d5d9df; }
.loade-cat-more h2 { font-size: 24px !important; margin: 0 0 1.25rem !important; }
.woocommerce-products-header { margin-bottom: 1rem; }

/* Trang danh mục: đưa lưới sản phẩm lên trong màn hình đầu.
   Đo được: #content cách đỉnh 324px, header danh mục có padding-bottom 102px thừa,
   khiến lưới sản phẩm bắt đầu ở y=740. */
.woocommerce .woocommerce-products-header { padding-bottom: 0 !important; margin-bottom: .75rem !important; }
.tax-product_cat #content, .post-type-archive-product #content { padding-top: 1rem !important; }
.tax-product_cat .site-main, .post-type-archive-product .site-main { padding-top: 0 !important; }
.woocommerce .storefront-sorting { margin-bottom: 1.25rem !important; }
.tax-product_cat .storefront-breadcrumb, .post-type-archive-product .storefront-breadcrumb { margin-bottom: 0 !important; }

/* Mô tả ngắn cạnh nút mua */
.woocommerce div.product .woocommerce-product-details__short-description {
	margin: 0 0 1.5rem; padding-bottom: 1.25rem; border-bottom: 1px solid #d5d9df;
	font-size: 15.5px; line-height: 1.7; color: var(--color-gray); }
.woocommerce div.product .woocommerce-product-details__short-description p { margin: 0; }

/* ============================================================
   Trang sản phẩm: các mục xếp dọc thay cho tab (2026-07-20)
   ============================================================ */
.loade-psec { max-width: 820px; margin: 3rem 0 0; padding-top: 2.25rem; border-top: 1px solid #d5d9df; }
.loade-psec:first-of-type { border-top: 0; padding-top: 0; }
.loade-psec > h2 {
	font-family: var(--font-display); font-size: 22px !important; font-weight: 500 !important;
	letter-spacing: .1em; text-transform: uppercase; color: var(--color-ink);
	margin: 0 0 1.5rem !important; padding-bottom: .75rem; border-bottom: 2px solid var(--color-gold); display: inline-block; }
.loade-spec-table { width: 100%; border-collapse: collapse; margin: 0 0 1rem; }
.loade-spec-table th, .loade-spec-table td {
	padding: 13px 16px; text-align: left; font-size: 16px; border-bottom: 1px solid #dde1e5; }
.loade-spec-table th { width: 42%; font-weight: 500; color: var(--color-gray); background: #fafafb; }
.loade-spec-table td { font-weight: 600; color: var(--color-ink); }
.loade-spec-table tr:last-child th, .loade-spec-table tr:last-child td { border-bottom: 0; }
.loade-spec-note { font-size: 14px; color: var(--color-gray); margin: 0; }
.loade-spec-note a { color: var(--color-ink); font-weight: 600; }
.loade-psec-body { font-size: 17px; line-height: 1.8; }
.loade-psec-body h2, .loade-psec-body h3 { font-size: 20px !important; font-weight: 600 !important;
	margin: 2rem 0 .75rem !important; text-transform: none; letter-spacing: 0; }
.loade-psec-body p { margin: 0 0 1rem; }
.loade-psec-body img { max-width: 100%; height: auto; margin: 1.25rem 0; }
.loade-psec-body ul, .loade-psec-body ol { margin: 0 0 1.25rem 1.25rem; }
.loade-psec-body li { margin-bottom: .5rem; }
@media (max-width: 992px) { .loade-psec { max-width: none; } .loade-spec-table th { width: 46%; } }
/* comments_template() tự in tiêu đề "Đánh giá" -> trùng với tiêu đề mục */
#danh-gia .woocommerce-Reviews-title { display: none; }
#danh-gia #review_form_wrapper { max-width: 620px; }

/* ============================================================
   BỐ CỤC LẠI theo tham chiếu TGDĐ (2026-07-25)
   Nghiên cứu thegioididong.com/loa-laptop/bluetooth-jbl-charge-5:
   cột PHẢI (mua hàng) HẸP + DÁN theo màn hình xuyên suốt cả trang;
   cột TRÁI (rộng hơn) chứa TẤT CẢ nội dung dài - ảnh, thông số kỹ
   thuật, mô tả, sản phẩm liên quan - xếp dọc liền mạch, không tách
   thành khối "full-width" riêng. Nhờ vậy cột trái tự nhiên dài hơn
   cột phải bao nhiêu cũng được, không còn khoảng trắng thừa và cột
   phải luôn trong tầm mắt khi đọc thông số/mô tả dài.
   Trước đây: cột trái/phải xử lý = "hàng lưới" (grid row) chỉ đủ
   chứa ảnh+mua hàng, các mục sau đó bị ép "chiếm trọn bề ngang" nên
   tạo khối riêng biệt, cắt đứt cảm giác 1 cột liền mạch của TGDĐ.
   ============================================================ */
@media (min-width: 993px) {
	.single-product div.product > .woocommerce-product-gallery,
	.single-product div.product > .loade-psec,
	.single-product div.product > .related,
	.single-product div.product > .up-sells { grid-column: 1; }
	/* Cột mua hàng CHIẾM TRỌN chiều cao toàn bộ cột trái (span hết các
	   hàng, không chỉ hàng 1) rồi dán lại - dán được xuyên suốt lúc cuộn
	   qua thông số/mô tả dài bên trái, không phụ thuộc đếm số mục. */
	.single-product div.product > .summary.entry-summary {
		grid-column: 2; grid-row: 1 / -1; align-self: start;
		position: sticky; top: 24px; }
}

.loade-psec { max-width: 720px; margin: 3rem 0 0; padding-top: 2.25rem; border-top: 1px solid #d5d9df; }
.loade-psec:first-of-type { border-top: 0; padding-top: 0; }
.loade-psec > h2 { display: block; text-align: left; border-bottom: 2px solid var(--color-gold);
	position: relative; padding-bottom: .75rem; }
.loade-psec-body { text-align: left; }
.woocommerce div.product .related > h2 { text-align: left; font-family: var(--font-display);
	font-size: 22px !important; font-weight: 500 !important; letter-spacing: .1em; text-transform: uppercase; }
.woocommerce div.product .related > h2::before,
.woocommerce div.product .related > h2::after { display: none; }
@media (min-width: 993px) {
	.single-product div.product > .related { max-width: 720px; margin-top: 3.5rem; padding-top: 2.5rem; border-top: 1px solid #d5d9df; }
	/* Cột trái co giãn (không cố định px) -> lưới liên quan đổi 2/3 cột theo
	   bề rộng thật còn lại, tránh thẻ sản phẩm bị bóp méo ở màn 1024-1279px. */
	.woocommerce div.product .related ul.products { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (min-width: 1280px) {
	.woocommerce div.product .related ul.products { grid-template-columns: repeat(3, 1fr) !important; }
}

/* Trang thông tin (liên hệ, chính sách, thanh toán): bó chữ cho dễ đọc.
   Đo được đang trải hết 1376px - dòng quá dài, mắt phải quét ngang mỏi. */
.page:not(.woocommerce-page):not(.home) .entry-content,
.page-template-default .entry-content { max-width: 820px; margin-left: auto; margin-right: auto; }
.page .entry-content h2 { font-size: 26px !important; margin: 2.5rem 0 1rem !important; }
.page .entry-content h3 { font-size: 20px !important; margin: 1.75rem 0 .6rem !important; }
.page .entry-content ul, .page .entry-content ol { margin: 0 0 1.25rem 1.35rem; }
.page .entry-content li { margin-bottom: .5rem; }
.page .entry-content table { width: 100%; border-collapse: collapse; margin: 0 0 1.5rem; }
.page .entry-content th, .page .entry-content td { padding: 12px 14px; border: 1px solid #dde1e5; text-align: left; font-size: 15.5px; }
.page .entry-content th { background: #fafafb; font-weight: 600; }

/* ============================================================
   Trang sản phẩm 2026-07-21: đưa thông tin then chốt lên cột mua
   (kiểu TGDĐ) - hộp "Thông số nổi bật" + giá đậm + siết khối cam kết.
   Bỏ những thứ theo quy mô (gói bảo hành bán thêm, trả góp, đánh giá
   sao, số đã bán, cửa hàng gần bạn) - không phù hợp đại lý nhỏ.
   ============================================================ */
.loade-keyspec { margin: 1.5rem 0 0; padding: 1.25rem 0 0; border-top: 1px solid #d5d9df; }
.loade-keyspec-h { font-family: var(--font-display); font-size: 12.5px; font-weight: 500;
	letter-spacing: .14em; text-transform: uppercase; color: var(--color-gray);
	margin: 0 0 .6rem !important; padding: 0; }
.loade-keyspec table { width: 100%; border-collapse: collapse; margin: 0; }
.loade-keyspec tr { border-bottom: 1px solid #e2e5e9; }
.loade-keyspec tr:last-child { border-bottom: 0; }
.loade-keyspec th, .loade-keyspec td { padding: 8px 0; font-size: 14.5px; line-height: 1.45;
	vertical-align: top; text-align: left; }
.loade-keyspec th { width: 40%; color: var(--color-gray); font-weight: 400; padding-right: 14px; }
.loade-keyspec td { color: var(--color-ink); font-weight: 500; }
.loade-keyspec-more { display: inline-block; margin-top: .85rem; font-family: var(--font-display);
	font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--color-ink);
	border-bottom: 1px solid var(--color-gold); padding-bottom: 2px; text-decoration: none; }
.loade-keyspec-more:hover { color: var(--color-gold-dark); }

/* Giá: to + đậm hơn để quét nhanh (kiểu box giá TGDĐ) */
.woocommerce div.product .entry-summary p.price { font-size: 28px !important;
	font-weight: 700 !important; letter-spacing: 0; }

/* Khối cam kết: siết cho gọn khi đứng cạnh hộp thông số */
.loade-trust { margin-top: 1.5rem !important; padding-top: 1.25rem; }
.loade-trust li { margin-bottom: .7rem !important; }
.loade-trust strong { font-size: 14.5px; }
.loade-trust span { font-size: 13.5px; line-height: 1.55; }

/* ============================================================
   Giỏ hàng & thanh toán ĐƠN GIẢN - shortcode cổ điển (2026-07-25)
   Đổi từ Cart/Checkout Blocks (React, tiếng Anh cứng, không theo brand)
   sang [woocommerce_cart]/[woocommerce_checkout] cổ điển - style theo
   đúng tông navy/vàng của site, đồng bộ nút bấm với phần còn lại.
   ============================================================ */
.woocommerce-cart .site-main, .woocommerce-checkout .site-main {
	max-width: 1100px; margin: 0 auto !important; float: none !important; padding-top: 1.5rem; }
.woocommerce-cart .content-area, .woocommerce-checkout .content-area { float: none !important; width: 100% !important; }
.woocommerce-cart .page-title, .woocommerce-checkout .page-title {
	font-family: var(--font-display); font-weight: 500; letter-spacing: .12em; text-transform: uppercase; }
.woocommerce table.shop_table { border: 1px solid var(--color-border); border-radius: 2px; border-collapse: collapse; }
.woocommerce table.shop_table th { background: var(--color-mist); font-family: var(--font-display);
	font-size: 12px; letter-spacing: .08em; text-transform: uppercase; font-weight: 500; color: var(--color-gray); }
.woocommerce table.shop_table th, .woocommerce table.shop_table td { padding: 14px 16px; border-color: var(--color-border); }
.woocommerce a.remove { color: var(--color-gray) !important; border-radius: 50%; }
.woocommerce a.remove:hover { background: var(--color-ink) !important; color: #fff !important; }
.woocommerce #coupon_code { height: 46px; border: 1px solid var(--color-border); border-radius: 2px; padding: 0 14px; }
.woocommerce button.button, .woocommerce input.button, .woocommerce #place_order,
.woocommerce a.checkout-button {
	background: var(--color-ink) !important; color: #fff !important; border: none !important;
	border-radius: 2px !important; font-family: var(--font-display); font-size: 13px !important;
	font-weight: 600 !important; letter-spacing: .1em; text-transform: uppercase; padding: 15px 30px !important;
	transition: background .3s var(--ease-brand), color .3s var(--ease-brand); }
.woocommerce button.button:hover, .woocommerce input.button:hover, .woocommerce #place_order:hover,
.woocommerce a.checkout-button:hover { background: var(--color-gold) !important; color: var(--color-ink) !important; }
.woocommerce-cart-form .actions .button.disabled { opacity: .5; }
.cart-collaterals .cart_totals { background: var(--color-mist); border: 1px solid var(--color-border);
	border-radius: 2px; padding: 22px 24px; }
.cart_totals h2 { font-family: var(--font-display); font-size: 16px !important; font-weight: 500 !important;
	letter-spacing: .08em; text-transform: uppercase; }
.cart_totals .order-total .amount { color: var(--color-ink); font-weight: 700; font-size: 20px; }
#customer_details .form-row input.input-text, #customer_details .form-row textarea,
.woocommerce-additional-fields textarea, .select2-selection {
	border: 1px solid var(--color-border) !important; border-radius: 2px !important; padding: 10px 12px !important;
	height: auto !important; font-size: 15px; }
#order_review_heading, #order_review { border-radius: 2px; }
.woocommerce-checkout-payment { background: var(--color-mist) !important; border-radius: 2px; }
.woocommerce-checkout-payment ul.payment_methods { border: none !important; }
.wc_payment_method label { font-weight: 600; }

/* Nút "Nhắn Zalo cho Hiệp" ở trang cảm ơn sau khi đặt hàng */
.loade-zalo-cta { max-width: 620px; margin: 2rem auto 0; padding: 26px 28px; background: var(--color-mist);
	border: 1px solid var(--color-border); border-radius: 2px; text-align: left; }
.loade-zalo-cta h2 { font-family: var(--font-display); font-size: 18px !important; font-weight: 600 !important;
	letter-spacing: .02em; text-transform: none; margin: 0 0 .6rem !important; color: var(--color-ink); }
.loade-zalo-cta > p { font-size: 14.5px; line-height: 1.6; color: var(--color-ink-soft); margin: 0 0 1rem; }
.loade-zalo-cta textarea { width: 100%; resize: vertical; border: 1px solid var(--color-border); border-radius: 2px;
	padding: 12px 14px; font-family: var(--font-body); font-size: 14px; color: var(--color-ink); background: #fff;
	margin-bottom: 1rem; }
.loade-zalo-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.loade-zalo-actions .loade-btn-pill { border-color: var(--color-ink); color: var(--color-ink); }
.loade-zalo-actions .loade-zalo-open { background: var(--color-gold); color: var(--color-ink); border-color: var(--color-gold); }
.loade-zalo-actions .loade-zalo-open:hover { background: var(--color-gold-dark); border-color: var(--color-gold-dark); }
.loade-zalo-actions .loade-zalo-copy:hover { background: var(--color-ink); color: #fff; }
.loade-zalo-alt { margin: 1rem 0 0 !important; font-size: 13.5px; color: var(--color-gray); }
.loade-zalo-alt a { color: var(--color-ink); font-weight: 600; }
@media (max-width: 767px) {
	.woocommerce-cart .site-main, .woocommerce-checkout .site-main { padding-left: 16px; padding-right: 16px; }
	.woocommerce table.shop_table th, .woocommerce table.shop_table td { padding: 10px 8px; font-size: 13.5px; }
}

/* ============================================================
   Bài blog: LAYOUT 3 CỘT (2026-07-25)
   Trái: cây danh mục sản phẩm | Giữa: bài viết | Phải: mục lục (TOC, dán)
   ============================================================ */
@media (min-width: 1200px) {
	/* Grid đặt trên #main (site-main) - lúc này chỉ có ĐÚNG 3 con trực tiếp:
	   aside danh mục, <article> (trọn vẹn 1 khối, nội dung lộn xộn bên
	   trong không ảnh hưởng ranh giới ngoài của nó), aside chỗ trống TOC.
	   Không cần grid-row span vì mỗi cột đã đúng 1 hàng duy nhất. */
	.single-post #main.site-main {
		display: grid; overflow: visible !important;
		grid-template-columns: 190px minmax(0, 760px) 310px;
		column-gap: 36px; align-items: start; }
	.single-post #main.site-main > article { grid-column: 2; }
	.single-post #main.site-main > .loade-post-catnav,
	.single-post #main.site-main > .loade-post-toc-slot { align-self: start; position: sticky; top: 24px; }
	.loade-post-toc-slot .loade-toc { margin: 0; }
}
@media (max-width: 1199px) {
	/* display:flex (không phải block) để "order" còn tác dụng - đưa TOC lên
	   đầu bài dù trong DOM nó nằm SAU <article> (in ra ở storefront_single_post_after) */
	.single-post #main.site-main { display: flex; flex-direction: column; }
	.loade-post-catnav { display: none; }
	.loade-post-toc-slot { order: -1; }
}

.loade-post-catnav { font-family: var(--font-body); font-size: 14px; }
.loade-post-catnav-h { font-family: var(--font-display); font-size: 11.5px; font-weight: 500;
	letter-spacing: .12em; text-transform: uppercase; color: var(--color-gray); margin: 0 0 .9rem !important; }
.loade-cattree { list-style: none; margin: 0; padding: 0; }
.loade-cattree.is-root { border-top: 1px solid var(--color-border); padding-top: .75rem; }
.loade-cattree a { display: block; padding: 6px 0; color: var(--color-ink-soft); text-decoration: none;
	border-left: 2px solid transparent; padding-left: 10px; margin-left: -11px; line-height: 1.4; }
.loade-cattree a.lv1 { font-weight: 600; color: var(--color-ink); }
.loade-cattree a.lv2 { font-size: 13px; padding-left: 20px; color: var(--color-gray); }
.loade-cattree a:hover, .loade-cattree a.is-current { color: var(--color-gold-dark); border-left-color: var(--color-gold); }
.loade-post-catnav-cta { display: block; margin-top: 1.5rem; padding: 12px 14px; text-align: center;
	background: var(--color-ink); color: #fff !important; border-radius: 2px; text-decoration: none;
	font-family: var(--font-display); font-size: 12px; letter-spacing: .06em; font-weight: 600;
	transition: background .3s var(--ease-brand); }
.loade-post-catnav-cta:hover { background: var(--color-gold); color: var(--color-ink) !important; }

.loade-post-toc-slot:empty { display: none; }
.loade-post-toc-slot .loade-toc { max-width: none; }
@media (min-width: 1200px) {
	.loade-post-toc-slot .loade-toc-list { max-height: calc(100vh - 140px); overflow-y: auto; }
}

/* =========================================================================
   PHẢN HỒI HIẾU (2026-07-25): mobile "thô, chưa tinh tế" - 3 hàng đầu header
   (topbar 2 hotline dồn cục, nút DANH MỤC khối rỗng lệch xa giỏ hàng) + dải
   cam kết dưới hero chữ vỡ dòng xấu. Sửa cho thoáng/cân đối, tham khảo nhịp
   canh lề rộng rãi kiểu SEONGON (không copy màu/bố cục, chỉ lấy tinh thần
   "air": khoảng trắng chủ động, hàng rõ ràng, không dồn cục).
   ========================================================================= */
@media (max-width: 600px) {
	/* --- Topbar: 2 số hotline đứng cạnh nhau trông như không liên quan.
	   Bỏ nhãn lặp, thêm icon + dấu chấm phân cách, canh giữa cho cân. --- */
	.loade-topbar-social:empty { display: none; }
	.loade-topbar-inner { justify-content: center; gap: 0; }
	.loade-topbar-contact {
		gap: 10px; font-size: 12.5px;
	}
	.loade-topbar-contact a:first-child::before {
		content: ""; display: inline-block; width: 11px; height: 11px; margin-right: 6px;
		vertical-align: -1px; flex: none;
		background: var(--color-gold-lt);
		-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8c1.4 2.8 3.8 5.1 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.1.4 2.4.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1-9.4 0-17-7.6-17-17 0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.4 0 .8-.2 1l-2.3 2.2z'/%3E%3C/svg%3E") center / contain no-repeat;
		mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8c1.4 2.8 3.8 5.1 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.1.4 2.4.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1-9.4 0-17-7.6-17-17 0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.4 0 .8-.2 1l-2.3 2.2z'/%3E%3C/svg%3E") center / contain no-repeat;
	}
	.loade-topbar-contact a + a { position: relative; padding-left: 15px; }
	.loade-topbar-contact a + a::before {
		content: "\00b7"; position: absolute; left: 0; top: -3px; color: rgba(255,255,255,.4); font-size: 16px;
	}
}

@media (max-width: 767px) {
	/* --- Nút DANH MỤC: khối viền rỗng nặng nề, xa giỏ hàng thành 2 cực lệch.
	   Thêm icon 3 vạch cho có trọng lượng thị giác, giảm padding, viền mảnh
	   hơn - đỡ "hộp rỗng", cân với icon giỏ hàng bên phải. --- */
	#masthead .menu-toggle,
	#masthead button.menu-toggle {
		display: inline-flex !important; align-items: center !important; gap: 9px;
		border: 1px solid rgba(201, 160, 99, .38) !important;
		background: none !important;
		padding: 9px 16px 9px 14px !important;
		border-radius: 2px;
	}
	#masthead .menu-toggle::before,
	#masthead button.menu-toggle::before {
		content: "" !important; display: block !important; position: static !important;
		width: 14px; height: 1.5px; background: var(--color-gold-lt);
		box-shadow: 0 -4.5px 0 var(--color-gold-lt), 0 4.5px 0 var(--color-gold-lt);
		flex: none; margin: 0 !important; top: auto; left: auto;
	}
	#masthead .menu-toggle span { font-size: 10.5px; letter-spacing: .1em; display: block; white-space: nowrap; }
	#masthead .menu-toggle, #masthead button.menu-toggle { white-space: nowrap; width: auto !important; }
	#masthead .storefront-primary-navigation > .col-full { padding-top: 9px; padding-bottom: 9px; }
	#masthead .site-header-cart .cart-contents { display: flex; align-items: center; gap: 6px; }

	/* --- Dải cam kết dưới hero: 2 cột canh giữa làm "Miễn phí vận chuyển và
	   đổi trả" vỡ 3 dòng, đọc rối. Chuyển 1 cột, canh trái, có vạch vàng nhỏ
	   đầu dòng thay border chia ô - thoáng và dễ quét mắt hơn. --- */
	.loade-chinhsach-grid {
		grid-template-columns: 1fr !important;
		text-align: left !important;
		gap: 0 !important;
	}
	.loade-chinhsach-grid > div {
		position: relative;
		padding: 12px 0 12px 16px;
		border-bottom: 1px solid var(--color-border);
		border-left: none !important;
	}
	.loade-chinhsach-grid > div::before {
		content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 2px;
		background: var(--color-gold);
	}
	.loade-chinhsach-grid > div:last-child { border-bottom: none; }
	.loade-chinhsach-grid strong { font-size: 12.5px !important; }
	/* Nút tròn nổi (gọi/Zalo) đè lên dòng "Miễn phí vận chuyển..." - chừa lề phải */
	.loade-chinhsach .loade-container { padding-right: 76px; }
}

/* =========================================================================
   PHẢN HỒI HIẾU (2026-07-25): "bố cục lởm" - đoạn dẫn nhập đầu bài (cả 9 bài
   blog đều có, do pipeline viết bài chèn sẵn <p style="text-align:center">
   in đậm cỡ 20px) đứng giữa trang trông như hét vào mặt người đọc, ngay sau
   đó là ảnh minh hoạ nền đen full-width không khung/không bóng -> 2 khối
   nặng nề chồng lên nhau ngay đầu bài. Sửa bằng CSS chung (không sửa từng
   bài): đoạn dẫn nhập chuyển về canh trái kiểu "sa-pô" báo chí, có vạch vàng
   bên trái; ảnh đầu bài thêm bo góc/đổ bóng cho có khung, đỡ trần trụi. --- */
.single-post .entry-content > p:first-of-type {
	text-align: left !important;
	font-family: var(--font-body);
	font-size: 19px !important; line-height: 1.7;
	font-weight: 400 !important;
	color: var(--color-ink-soft);
	border-left: 3px solid var(--color-gold);
	padding: .2rem 0 .2rem 20px;
	margin-bottom: 2rem !important;
}
.single-post .entry-content > p:first-of-type span { font-size: inherit !important; }
.single-post .entry-content > p:first-of-type strong { color: var(--color-ink); font-weight: 600; }
.single-post .entry-content > p:first-of-type + p {
	text-align: center;
}
.single-post .entry-content > p:first-of-type + p img {
	border-radius: 6px;
	box-shadow: 0 16px 40px rgba(10, 17, 31, .18);
}