/*
 * Header, chân trang và các khối bố cục chung.
 *
 * Màu và chiều cao lấy từ token trong style.css, vốn đo lại từ giao diện đang
 * chạy của site. Tên class giữ nguyên để CSS riêng của site tiếp tục đè được.
 */


/* ==========================================================================
   Header — ba tầng: #top-bar, #masthead, #wide-nav

   Số đo đối chiếu với trang render bằng theme cũ:
     desktop 1280px : tầng trên 40px · tầng chính 120px · menu 46px
     điện thoại     : tầng chính 70px · thanh tìm kiếm 50px, tầng trên ẩn
   CSS riêng của site (site.css) phủ lên phần trang trí; ở đây chỉ dựng khung.
   ========================================================================== */

.header {
	position: relative;
	z-index: 30;
	width: 100%;
}

.header-wrapper {
	position: relative;
	width: 100%;
}

.header-top,
.header-main,
.header-bottom {
	position: relative;
	display: flex;
	align-items: center;
	width: 100%;
}

.header-top > .flex-row,
.header-bottom > .flex-row,
.header-inner {
	height: 100%;
}

.header-top {
	min-height: var(--xmn-header-top-height);
	background-color: var(--xmn-header-top-bg);
}

.header-main {
	height: 120px;
	background-color: var(--xmn-header-main-bg);
}

.header-bottom {
	min-height: 46px;
	background-color: var(--xmn-header-bottom-bg);
}

@media screen and (max-width: 849px) {
	.header-bottom {
		min-height: 50px;
	}
}

/* Chỉ điện thoại mới thu tầng header chính lại; máy tính bảng giữ chiều cao
   như máy tính (theo cài đặt của theme cũ). */
@media screen and (max-width: 549px) {
	.header-main {
		height: 70px;
	}
}

/* ---------- Logo ---------- */

.logo {
	flex: 0 0 auto;
	margin: 0 30px 0 0;
	line-height: 1;
	height: 100%;
	display: flex;
	align-items: center;
}

.logo a {
	display: block;
	height: 100%;
	text-decoration: none;
}

.logo img {
	display: block;
	width: auto;
	height: 100%;
	max-height: 120px;
	object-fit: contain;
}

.logo-text {
	display: flex;
	align-items: center;
	height: 100%;
	color: #fff;
	font-family: var(--xmn-font-heading);
	font-size: 1.2rem;
	font-weight: 700;
	white-space: nowrap;
}

/* Điện thoại: logo giữa, nút menu trái, giỏ hàng phải */
@media screen and (max-width: 849px) {
	/* Logo giữ bề rộng tự nhiên (cách hai bên 15px); cột trái và phải chia
	   đều phần còn lại nên logo luôn nằm giữa. */
	.medium-logo-center .logo {
		order: 2;
		flex: 0 0 auto;
		justify-content: center;
		margin: 0 15px;
		text-align: center;
	}

	.medium-logo-center .logo img {
		margin: 0 auto;
	}

	.medium-logo-center > .flex-left {
		order: 1;
		flex: 1 1 0;
		margin: 0;
	}

	.medium-logo-center > .flex-right {
		order: 3;
		flex: 1 1 0;
		margin: 0;
	}
}

/* ==========================================================================
   Danh sách thành phần (ul.nav) trong mọi tầng
   ========================================================================== */

.nav {
	display: flex;
	flex-flow: row wrap;
	align-items: center;
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}

.nav-left   { justify-content: flex-start; }
.nav-right  { justify-content: flex-end; }
.nav-center { justify-content: center; }

.nav > li {
	position: relative;
	display: inline-block;
	margin: 0 7px;
	padding: 0;
	list-style: none;
}

.nav > li:first-child { margin-left: 0; }
.nav > li:last-child  { margin-right: 0; }

.nav-spacing-xlarge > li {
	margin: 0 13px;
}

.nav > li > a {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	padding: 10px 0;
	color: inherit;
	font-size: 0.8em;
	text-decoration: none;
	transition: color 0.2s ease, opacity 0.2s ease;
}

/* Biểu tượng đứng riêng trong mục menu (nút mở menu, kính lúp) */
.nav > li > a > i {
	font-size: 20px;
	vertical-align: middle;
	transition: color 0.3s;
}

.nav > li > a > i + span {
	margin-left: 5px;
}

.nav > li > a > i.icon-search {
	font-size: 1.2em;
}

.nav > li > a > i.icon-menu {
	font-size: 1.9em;
}

/* Dải nhỏ (tầng trên cùng): chữ không đậm — chọn chặt hơn luật đậm 500 của
   menu trong lớp CSS sinh từ cài đặt, như theme cũ. Cỡ chữ để ở luật lỏng
   bên dưới để site.css (.top-bar-nav > li > a: 14px) còn đè được. */
.nav.nav-small > li > a,
.nav-small .nav > li > a {
	padding-top: 5px;
	padding-bottom: 5px;
	font-weight: normal;
}

.nav-small > li > a {
	font-size: 0.9em;
}

.nav-uppercase > li > a {
	text-transform: uppercase;
	letter-spacing: 0.02em;
	font-weight: 700;
}

/* Nền tối: chữ trắng */
.nav-dark .nav > li > a,
.header-main .nav > li > a {
	color: rgba(255, 255, 255, 0.85);
}

.nav-dark .nav > li.html,
.header-main .nav > li.html {
	color: #fff;
}

.nav-dark .nav > li > a:hover,
.header-main .nav > li > a:hover {
	color: #fff;
}

.nav > li.html {
	font-size: 0.85em;
}

.nav-small.nav > li.html {
	font-size: 0.75em;
}

.nav > li.html a {
	color: inherit;
	text-decoration: none;
}

/* Ảnh biểu tượng do plugin Menu Icons chèn trước chữ */
.nav img._mi {
	display: inline-block;
	width: auto;
	max-height: 24px;
	margin-right: 6px;
	vertical-align: middle;
}

/* Mũi tên của mục có menu con */
.nav > li > a .icon-angle-down {
	margin-left: 5px;
	font-size: 0.8em;
	opacity: 0.8;
}

/* ---------- Menu chính (tầng dưới) ---------- */

.header-bottom-nav > li > a {
	color: #fff;
	font-size: 0.9em;
	padding: 12px 0;
}

/* ---------- Menu đổ xuống ---------- */

.nav-dropdown {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 40;
	min-width: 240px;
	margin: 0;
	padding: 0;
	list-style: none;
	background-color: var(--xmn-primary);
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}

.nav > li:hover > .nav-dropdown,
.nav > li.is-open > .nav-dropdown,
.nav-dropdown li:hover > .nav-dropdown {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.nav-dropdown li {
	position: relative;
	margin: 0;
	list-style: none;
}

.nav-dropdown a {
	display: block;
	padding: 9px 16px;
	color: #fff;
	font-size: 0.9rem;
	text-decoration: none;
}

.nav-dropdown a:hover {
	background-color: #fff;
	color: var(--xmn-text);
}

.nav-dropdown .nav-dropdown {
	top: 0;
	left: 100%;
}

@media (prefers-reduced-motion: reduce) {
	.nav-dropdown {
		transition: none;
	}
}

/* ==========================================================================
   Ô tìm kiếm
   ========================================================================== */

.header-search-form {
	flex: 1 1 auto;
}

.header-search-form-wrapper,
.searchform-wrapper {
	width: 100%;
}

.searchform {
	position: relative;
	width: 100%;
}

/* Form, ô nhập, hàng lưới nằm trong ô HTML của header không có lề. */
li.html .row,
li.html form,
li.html select,
li.html input {
	margin: 0;
}

.searchform .flex-row {
	display: flex;
	flex-flow: row nowrap;
	align-items: stretch;
}

.searchform .flex-col {
	margin: 0;
}

/* Ô nhập tìm kiếm: cùng khung với ô nhập thường (style.css), dạng phẳng.
   Hình dạng cụ thể (bo tròn trái, cao 37px, nền trắng) do site.css quyết định. */
.search-field {
	-webkit-appearance: none;
	appearance: none;
}

.search-field:focus {
	outline: 2px solid transparent;
}

.mobile-nav .header-search-form {
	width: 100%;
	margin: 0;
}

/* ==========================================================================
   Nút giỏ hàng
   Tiền tố .header: trên trang WooCommerce, body có class .woocommerce nên quy
   tắc `.woocommerce a.button` (0,1,2) sẽ đè nếu ở đây chỉ là một class.
   ========================================================================== */

.header-button {
	display: inline-block;
}

.header .header-cart-link {
	position: relative;
	display: inline-block;
	padding: 5px 10px;
	border-radius: 99px;
	background-color: var(--xmn-primary);
	color: #fff;
	font-size: 0.8em;
	font-weight: 700;
	letter-spacing: 0.03em;
	line-height: 2.4em;
	text-decoration: none;
	text-transform: uppercase;
	white-space: nowrap;
}

/* Số lượng trong giỏ: chấm tròn góc trên biểu tượng, lấy số từ thuộc tính
   data-icon-label; ẩn khi giỏ trống. */
[data-icon-label] {
	position: relative;
}

[data-icon-label]::after {
	content: attr(data-icon-label);
	position: absolute;
	top: -10px;
	right: -10px;
	z-index: 1;
	min-width: 17px;
	height: 17px;
	padding: 0 2px;
	border-radius: 99px;
	background-color: var(--primary-color, #446084);
	box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.3);
	color: #fff;
	font-family: Arial, sans-serif !important;
	font-size: 11px;
	font-style: normal;
	font-weight: bolder;
	letter-spacing: -0.5px;
	line-height: 17px;
	text-align: center;
	opacity: 0.9;
	transition: transform 0.2s;
}

.button [data-icon-label]::after {
	top: -12px;
	right: -12px;
}

[data-icon-label="0"]::after {
	display: none;
}

.header .header-cart-link:hover {
	background-color: var(--xmn-primary-dark);
	color: #fff;
}

/* ==========================================================================
   Biểu tượng mạng xã hội
   ========================================================================== */

/* Chung: nút theo dõi (header) và nút chia sẻ (bài viết) */
.social-icons {
	display: inline-block;
	color: #999;
	font-size: 0.85em;
	vertical-align: middle;
}

.html .social-icons {
	font-size: 1em;
}

.html .social-icons .button {
	margin-bottom: 0;
}

.social-icons span {
	padding-right: 10px;
	font-weight: bold;
}

.social-icons i {
	min-width: 1em;
}

.text-center .social-icons {
	margin-left: auto;
	margin-right: auto;
}

.nav-dark .social-icons,
.dark .social-icons {
	color: #fff;
}

.nav-dark .social-icons .button.is-outline,
.dark .social-icons .button.is-outline {
	border-color: rgba(255, 255, 255, 0.5);
}

/* Nút đặc hoặc khi rê chuột: nền màu thương hiệu của mạng, biểu tượng trắng */
.social-icons .button.icon:not(.is-outline),
.social-icons .button.icon:hover {
	border-color: currentColor !important;
	background-color: currentColor !important;
}

.social-icons .button.icon:not(.is-outline) > i,
.social-icons .button.icon:hover > i {
	color: #fff !important;
}

.button.facebook:not(.is-outline),
.button.facebook:hover { color: #3a589d !important; }
.button.twitter:not(.is-outline),
.button.twitter:hover { color: #2478ba !important; }
.button.email:not(.is-outline),
.button.email:hover,
.button.tiktok:not(.is-outline),
.button.tiktok:hover { color: #111 !important; }
.button.pinterest:not(.is-outline),
.button.pinterest:hover { color: #cb2320 !important; }
.button.whatsapp:not(.is-outline),
.button.whatsapp:hover,
.button.phone:not(.is-outline),
.button.phone:hover { color: #51cb5a !important; }
.button.linkedin:not(.is-outline),
.button.linkedin:hover { color: #0072b7 !important; }
.button.instagram:not(.is-outline),
.button.instagram:hover { color: #3b6994 !important; }
.button.youtube:not(.is-outline),
.button.youtube:hover { color: #c33223 !important; }
.button.tumblr:not(.is-outline),
.button.tumblr:hover { color: #36455d !important; }
.button.vk:not(.is-outline),
.button.vk:hover { color: #527498 !important; }

/* Nút bo góc nhẹ */
.round {
	border-radius: 5px;
}

/* Riêng dải theo dõi ở tầng trên cùng header: biểu tượng trơn cỡ nhỏ */
.follow-icons {
	line-height: 1;
	white-space: nowrap;
}

.follow-icons a.icon {
	display: inline-block;
	margin: 0 3.6px;
	color: inherit;
	font-size: 12px;
	line-height: 1;
	text-decoration: none;
	vertical-align: middle;
}

.follow-icons i {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 26px;
	height: 26.4px;
	font-size: 12px;
	line-height: 1.2;
}

/* ==========================================================================
   Biểu tượng
   Theme cũ có bộ font icon riêng. Ở đây ánh xạ cùng tên class sang
   Font Awesome 4 để markup cũ trong template và nội dung vẫn hiện đúng.
   ========================================================================== */

[class^="icon-"],
[class*=" icon-"] {
	position: relative;
	display: inline-block;
	margin: 0;
	padding: 0;
	font-family: FontAwesome;
	font-style: normal;
	font-weight: normal;
	line-height: 1.2;
	-webkit-font-smoothing: antialiased;
}

.icon-shopping-cart::before   { content: "\f07a"; }
.icon-shopping-bag::before    { content: "\f290"; }
.icon-angle-down::before      { content: "\f107"; }
.icon-angle-up::before        { content: "\f106"; }
.icon-angle-left::before      { content: "\f104"; }
.icon-angle-right::before     { content: "\f105"; }
.icon-facebook::before        { content: "\f09a"; }
.icon-instagram::before       { content: "\f16d"; }
.icon-youtube::before         { content: "\f16a"; }
.icon-twitter::before         { content: "\f099"; }
.icon-pinterest::before       { content: "\f0d2"; }
.icon-linkedin::before        { content: "\f0e1"; }
.icon-envelop::before,
.icon-email::before           { content: "\f0e0"; }
.icon-phone::before           { content: "\f095"; }
.icon-user::before            { content: "\f007"; }
.icon-heart::before           { content: "\f004"; }
.icon-star::before            { content: "\f005"; }
.icon-checkmark::before       { content: "\f00c"; }
.icon-tag::before             { content: "\f02b"; }
.icon-close::before           { content: "\f00d"; }
.icon-plus::before            { content: "\f067"; }
.icon-minus::before           { content: "\f068"; }
.icon-expand::before          { content: "\f065"; }
.icon-whatsapp::before        { content: "\f232"; }
.icon-vk::before              { content: "\f189"; }
.icon-tumblr::before          { content: "\f173"; }
.icon-google-plus::before     { content: "\f0d5"; }
.icon-user-o::before          { content: "\f2c0"; }
.icon-lock::before            { content: "\f023"; }
.icon-dribbble::before        { content: "\f17d"; }

/* Font Awesome 4 không có TikTok: vẽ bằng SVG */
.icon-tiktok::before {
	content: "";
	width: 1em;
	height: 1em;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M448 209.9a210.1 210.1 0 0 1-122.8-39.3v178.8A162.6 162.6 0 1 1 185 188.3v89.9a74.6 74.6 0 1 0 52.2 71.2V0h88a121 121 0 0 0 1.9 22.2A122.2 122.2 0 0 0 381 102.4a121.4 121.4 0 0 0 67 20.1z'/%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 448 512'%3E%3Cpath d='M448 209.9a210.1 210.1 0 0 1-122.8-39.3v178.8A162.6 162.6 0 1 1 185 188.3v89.9a74.6 74.6 0 1 0 52.2 71.2V0h88a121 121 0 0 0 1.9 22.2A122.2 122.2 0 0 0 381 102.4a121.4 121.4 0 0 0 67 20.1z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Ba biểu tượng dùng nhiều nhất ở header (menu, tìm kiếm, giỏ hàng): vẽ bằng
   SVG nét mảnh cho giống bộ biểu tượng cũ, thay cho nét đậm của Font Awesome.
   Hình do theme tự vẽ; màu lấy theo màu chữ (currentColor). */
.icon-menu::before,
.icon-search::before,
.icon-shopping-basket::before {
	content: "";
	display: inline-block;
	width: 1em;
	height: 1em;
	background-color: currentColor;
	vertical-align: -0.14em;
	-webkit-mask: var(--xmn-icon) center / contain no-repeat;
	mask: var(--xmn-icon) center / contain no-repeat;
}

.icon-menu::before {
	--xmn-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M2.5 5.5h19M2.5 12h19M2.5 18.5h19'/%3E%3C/svg%3E");
}

.icon-search::before {
	--xmn-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='7.2'/%3E%3Cpath d='M16 16l5.5 5.5'/%3E%3C/svg%3E");
}

.icon-shopping-basket::before {
	width: 1.17em;
	--xmn-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 9.5h24l-2.2 10.3a2 2 0 0 1-2 1.7H6.2a2 2 0 0 1-2-1.7z'/%3E%3Cpath d='M9 9.5l4-7M19 9.5l-4-7'/%3E%3Cpath d='M10 13.5v4M14 13.5v4M18 13.5v4'/%3E%3C/svg%3E");
}

/* ==========================================================================
   Menu điện thoại (trượt từ trái)
   ========================================================================== */

.nav-icon a {
	color: #fff;
	text-decoration: none;
}

/* Menu dọc (menu trượt, menu tài khoản) */
.nav.nav-vertical {
	flex-flow: column;
}

.nav.nav-vertical li {
	width: 100%;
	margin: 0;
	list-style: none;
}

.nav-vertical > li {
	display: flex;
	flex-flow: row wrap;
	align-items: center;
}

.nav-vertical > li + li {
	border-top: 1px solid #ececec;
}

.nav-vertical > li > a,
.nav-vertical > li > ul > li a {
	display: flex;
	flex-grow: 1;
	align-items: center;
	width: auto;
}

.nav-vertical > li > ul {
	width: 100%;
	margin: 0 0 2em;
	padding-left: 1em;
}

/* Menu con trong menu dọc: không lề, không thụt ở khung, mỗi mục lùi nửa chữ. */
.nav ul:not(.nav-dropdown) {
	margin: 0;
	padding: 0;
}

.nav-vertical li li {
	padding-left: 0.5em;
	font-size: 1em;
}

.nav-vertical > li > ul li a {
	color: #666;
	transition: color 0.2s;
}

.nav-vertical > li > ul li a:hover {
	color: #111;
	opacity: 1;
}

/* Khung trượt từ trái: rộng 260px, nền trắng mờ (trên điện thoại CSS của
   site tô xanh ngọc cho .mfp-content), lớp nền tối phía sau, nút đóng ở góc
   phải màn hình. Số đo như theme cũ. */
.xmn-offcanvas {
	position: fixed;
	inset: 0;
	z-index: 1043;
	visibility: hidden;
	pointer-events: none;
}

.xmn-offcanvas.is-open {
	visibility: visible;
	pointer-events: auto;
}

/* Plugin devvn-woocommerce-reviews đặt `.mfp-bg{z-index:99999999}` toàn cục,
   khiến lớp nền phủ lên panel và nuốt click. Ba giá trị dưới xếp lại thứ tự
   bên trong ngăn kéo — đủ vì .xmn-offcanvas đã tạo stacking context riêng. */
.xmn-offcanvas .mfp-bg {
	position: fixed;
	inset: 0;
	z-index: 1;
	background-color: #0b0b0b;
	opacity: 0;
	transition: opacity 0.3s;
}

.xmn-offcanvas.is-open .mfp-bg {
	opacity: 0.6;
}

.xmn-offcanvas .mfp-content {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	z-index: 2;
	width: 260px;
	max-width: 100%;
	overflow-x: hidden;
	overflow-y: auto;
	background-color: rgba(255, 255, 255, 0.95);
	box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5);
	transform: translateX(-100%);
	transition: transform 0.3s;
	-webkit-overflow-scrolling: touch;
}

.xmn-offcanvas.is-open .mfp-content {
	transform: none;
}

/* Ngăn kéo bên phải (giỏ hàng): cùng khung với ngăn kéo menu, chỉ đổi phía. */

.xmn-offcanvas.off-canvas-right .mfp-content {
	right: 0;
	left: auto;
	width: 300px;
	background-color: #fff;
	transform: translateX(100%);
}

.xmn-offcanvas.off-canvas-right.is-open .mfp-content {
	transform: none;
}

.xmn-offcanvas.off-canvas-right .mfp-close {
	right: auto;
	left: 0;
}

.cart-popup-inner {
	padding: 30px 20px;
}

.cart-popup-title h4 {
	margin-bottom: 0.5em;
	font-size: 1em;
}

.cart-popup-inner .woocommerce-mini-cart__empty-message {
	margin: 0;
	text-align: center;
	color: #666;
}

.cart-popup-inner .cart_list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.cart-popup-inner .cart_list li {
	position: relative;
	padding: 10px 0 10px 60px;
	border-bottom: 1px solid #ececec;
	min-height: 70px;
}

.cart-popup-inner .cart_list li img {
	position: absolute;
	top: 10px;
	left: 0;
	width: 50px;
	height: auto;
}

.cart-popup-inner .cart_list li a.remove {
	position: absolute;
	top: 10px;
	right: 0;
}

.cart-popup-inner .total {
	margin: 1em 0;
	padding-top: 1em;
	border-top: 1px solid #ececec;
}

.cart-popup-inner .buttons .button {
	display: block;
	margin-bottom: 0.5em;
	text-align: center;
}

.xmn-offcanvas .mfp-close {
	position: fixed;
	top: 20px;
	right: 0;
	z-index: 3;
	width: 40px;
	height: 40px;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: #fff;
	line-height: 40px;
	opacity: 0.6;
	cursor: pointer;
}

.xmn-offcanvas .mfp-close:hover {
	opacity: 1;
}

.xmn-offcanvas .mfp-close svg {
	vertical-align: middle;
}

.no-scrollbar {
	-ms-overflow-style: none;
	scrollbar-width: none;
}

.no-scrollbar::-webkit-scrollbar {
	width: 0 !important;
	height: 0 !important;
}

/* Danh sách mục menu */
.off-canvas .sidebar-menu {
	padding: 30px 0;
}

.nav-sidebar.nav-vertical > li + li {
	border-top: 1px solid #ececec;
}

.nav-sidebar > li > a {
	color: rgba(102, 102, 102, 0.85);
}

.nav-sidebar > li > a:hover {
	color: rgba(17, 17, 17, 0.85);
}

.off-canvas .nav-vertical > li > a {
	padding-top: 15px;
	padding-bottom: 15px;
}

.off-canvas .nav-vertical li li > a {
	padding-top: 5px;
	padding-bottom: 5px;
}

.off-canvas .nav-vertical li > a {
	padding-left: 20px;
}

.nav-vertical > li.html {
	padding-top: 1em;
	padding-bottom: 1em;
}

.off-canvas .nav-vertical li.html {
	padding: 20px;
}

/* Menu con: thu gọn, bung khi mục mang class active (bấm nút mũi tên). */
.nav-sidebar .children {
	display: none;
}

.nav-sidebar li.active > .children {
	display: block;
}

.nav-sidebar .toggle {
	width: 45px;
	height: auto;
	margin: 0 5px 0 0;
	padding: 0;
	color: currentColor;
	line-height: 1;
	opacity: 0.6;
	box-shadow: none !important;
	transition: all 0.3s;
}

.nav-sidebar .toggle i {
	font-size: 1.8em;
	transition: all 0.3s;
}

.nav-sidebar .toggle:hover {
	opacity: 1;
}

.nav-sidebar li.active > .toggle {
	transform: rotate(-180deg);
}

html.has-off-canvas,
body.mobile-nav-open {
	overflow: hidden;
}

body.admin-bar .xmn-offcanvas .mfp-content {
	top: var(--wp-admin--admin-bar--height, 46px);
}

body.admin-bar .xmn-offcanvas .mfp-close {
	top: calc(var(--wp-admin--admin-bar--height, 46px) + 20px);
}

@media (prefers-reduced-motion: reduce) {
	.xmn-offcanvas .mfp-bg,
	.xmn-offcanvas .mfp-content {
		transition: none;
	}
}

.mfp-hide {
	display: none !important;
}

/* ==========================================================================
   Đường dẫn điều hướng
   ========================================================================== */

.rt-breadcrumbs {
	padding: 12px 0;
	color: var(--xmn-text-muted);
	font-size: 0.8rem;
}

.rt-breadcrumbs a {
	color: var(--xmn-link);
}

/* ==========================================================================
   Chân trang
   ========================================================================== */

.footer-wrapper .section {
	padding: 30px 0;
}

.footer-widgets .widget-title {
	color: inherit;
	font-size: 0.95rem;
	text-transform: uppercase;
}

.footer-widgets ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.footer-widgets ul li {
	margin-bottom: 6px;
}

.footer-widgets a {
	color: inherit;
	opacity: 0.85;
}

.footer-widgets a:hover {
	opacity: 1;
}

/* Vùng nền tối trong chân trang */
.footer .dark,
.footer-2,
section.dark {
	color: #fff;
}

section.dark h1,
section.dark h2,
section.dark h3,
section.dark h4,
section.dark a,
.footer-2 a,
.footer-2 .widget-title {
	color: #fff;
}

.absolute-footer {
	padding: 10px 0 15px;
	background-color: #f0f0f0;
	color: rgba(0, 0, 0, 0.5);
	font-size: 0.9em;
}

.absolute-footer .footer-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 0 0 6px;
	padding: 0;
	list-style: none;
}

.absolute-footer .footer-nav li {
	margin: 0;
}

.copyright-footer {
	margin: 0;
}

/* ==========================================================================
   Nội dung chung
   ========================================================================== */

.xmn-main {
	display: block;
}

/* ==========================================================================
   Bài viết (tin tức)
   ========================================================================== */

.post {
	margin: 0 0 30px;
}

.entry-header-text {
	padding: 1.5em 0;
}

.entry-header-text.text-center {
	padding-left: 1.5em;
	padding-right: 1.5em;
}

.entry-header-text-top {
	padding-top: 0;
}

.entry-header-text-bottom {
	padding-bottom: 0;
}

.entry-content {
	padding-top: 1.5em;
	padding-bottom: 1.5em;
}

.entry-image img {
	width: 100%;
}

h1.entry-title.mb {
	margin-bottom: 30px;
}

.article-inner {
	transition: opacity 0.3s, box-shadow 0.5s, transform 0.3s;
}

.article-inner.has-shadow {
	background-color: #fff;
}

.article-inner.has-shadow .entry-content,
.article-inner.has-shadow footer.entry-meta,
.article-inner.has-shadow .entry-header-text,
.article-inner.has-shadow .author-box {
	padding-left: 1.5em;
	padding-right: 1.5em;
}

.article-inner.has-shadow .entry-header-text-top {
	padding-top: 1.5em;
}

/* Dòng chuyên mục, thẻ cuối bài */
footer.entry-meta {
	padding: 0.5em 0 0.6em;
	border-top: 1px solid #ececec;
	border-bottom: 2px solid #ececec;
	font-size: 0.8em;
}

.entry-author {
	padding: 2em 0;
}

/* Bài trước / bài sau */
.next-prev-nav .flex-col {
	padding: 0.7em 0;
}

.next-prev-nav .flex-col + .flex-col {
	border-left: 1px solid #ececec;
}

.next-prev-nav i {
	top: -1px;
	margin: 0 10px !important;
	font-size: 2em;
	vertical-align: middle;
}

.bt {
	border-top: 1px solid #ececec;
}

.bb {
	border-bottom: 1px solid #ececec;
}

a.plain {
	color: currentColor;
	transition: color 0.3s, opacity 0.3s, transform 0.3s;
}

/* ---------- Nhãn (ngày đăng trên ảnh bài viết, nhãn giảm giá) ---------- */

.badge {
	display: table;
	z-index: 20;
	width: 2.8em;
	height: 2.8em;
	pointer-events: none;
	backface-visibility: hidden;
}

.badge.top {
	left: 0;
}

.badge-inner {
	display: table-cell;
	width: 100%;
	height: 100%;
	padding: 2px;
	background-color: var(--primary-color, #446084);
	color: #fff;
	font-weight: bolder;
	line-height: 0.85;
	text-align: center;
	vertical-align: middle;
	white-space: nowrap;
	transition: background-color 0.3s, color 0.3s, border 0.3s;
}

.badge-small {
	width: 2.3em;
	height: 2.3em;
}

.badge-frame .badge-inner,
.badge-outline .badge-inner {
	border: 2px solid currentColor;
	background-color: #fff;
	color: var(--primary-color, #446084);
}

.badge-frame .badge-inner {
	background-color: transparent;
}

.badge-frame {
	height: 2em;
	margin-left: -4px;
}

.badge-outline,
.badge-circle {
	margin-left: -0.4em;
}

.badge-circle .badge-inner,
.badge-circle-inside .badge-inner {
	border-radius: 999px;
}

.badge.post-date {
	top: 7%;
}

/* ---------- Bình luận ---------- */

@media (min-width: 850px) {
	.comment-form {
		display: flex;
		flex-flow: row wrap;
		margin-left: -15px;
		margin-right: -15px;
	}

	.comment-form > div,
	.comment-form > p {
		width: 100%;
		padding: 0 15px;
	}

	.comment-form p.comment-form-author,
	.comment-form p.comment-form-email,
	.comment-form p.comment-form-url {
		flex: 1;
	}
}

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

.comment-list > li:not(:first-child) {
	border-top: 1px dashed #ddd;
}

.comment-list li .avatar {
	border-radius: 100%;
}

#comments .comment-respond {
	margin-top: 15px;
	padding: 15px 25px 0;
	background-color: rgba(0, 0, 0, 0.05);
}

#comments .comment-respond .comment-reply-title {
	font-size: 1.2em;
}

/* Phân trang — dãy nút tròn nằm giữa, như theme cũ.
   Khung: ul.page-numbers.nav-pagination.links > li > a/span.page-number.
   Kích thước tính theo em để nút to nhỏ theo chữ; viền lấy màu chữ. */
ul.links {
	margin: 5px 0;
	font-size: 0.85em;
}

ul.links li {
	display: inline-block;
	margin: 0 0.4em;
}

ul.links li:first-child {
	margin-left: 0;
}

ul.links li:last-child {
	margin-right: 0;
}

ul.links li a {
	color: currentColor;
}

.nav-pagination > li > a,
.nav-pagination > li > span {
	display: block;
	min-width: 2.25em;
	height: 2.25em;
	padding: 0 7px;
	border: 2px solid currentColor;
	border-radius: 99px;
	font-size: 1.1em;
	font-weight: bolder;
	line-height: 2em;
	text-align: center;
	vertical-align: top;
	transition: all 0.3s;
}

.nav-pagination > li i {
	position: relative;
	top: -1px;
	font-size: 1.2em;
	line-height: 1.2;
	vertical-align: middle;
}

/* Trang hiện tại và khi rê chuột: nền màu chính. site.css có luật màu vàng
   cho chỗ này nhưng lớp CSS sinh từ cài đặt (inc/options.php) in sau nó và
   đè lại bằng màu chính (#008c84 trên site) — y như site gốc. */
.nav-pagination > li > .current,
.nav-pagination > li > span:hover,
.nav-pagination > li > a:hover {
	background-color: var(--primary-color, #446084);
	border-color: var(--primary-color, #446084);
	color: #fff;
}

/* Phân trang dạng mặc định của WordPress (chỉ còn ở template dự phòng). */
.pagination .nav-links {
	text-align: center;
}

.pagination .page-numbers {
	display: inline-block;
	min-width: 2.25em;
	margin: 0 0.2em;
	padding: 0 7px;
	border: 2px solid currentColor;
	border-radius: 99px;
	line-height: 2em;
}

.pagination .page-numbers.current {
	background-color: var(--primary-color, #446084);
	border-color: var(--primary-color, #446084);
	color: #fff;
}

/* ==========================================================================
   Cột bên
   ========================================================================== */

.sidebar,
.sidebar-inner {
	font-size: 0.9rem;
}

.widget {
	margin-bottom: 1.5em;
}

/* Tiêu đề widget dạng <span> (in hoa do luật chung trong grid.css). */
span.widget-title {
	font-size: 1em;
	font-weight: 600;
}

/* Vạch ngắn dưới tiêu đề (widget, khối nội dung) */
.is-divider {
	display: block;
	width: 100%;
	max-width: 30px;
	height: 3px;
	margin: 1em 0;
	background-color: rgba(0, 0, 0, 0.1);
}

.widget .is-divider {
	margin-top: 0.66em;
}

.dark .is-divider {
	background-color: rgba(255, 255, 255, 0.3);
}

.text-center .is-divider {
	margin-left: auto;
	margin-right: auto;
}

.text-right .is-divider {
	margin-left: auto;
	margin-right: 0;
}

/* ==========================================================================
   Nút lên đầu trang
   ========================================================================== */

.back-to-top {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 50;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 2px solid currentColor;
	border-radius: 50%;
	background-color: #fff;
	color: var(--xmn-text-muted);
	font-size: 1.2rem;
	text-decoration: none;
	opacity: 0;
	pointer-events: none;
	transform: translateY(30%);
	transition: opacity 0.3s ease, transform 0.3s ease;
}

.back-to-top.is-visible {
	opacity: 1;
	pointer-events: auto;
	transform: none;
}

.back-to-top:hover {
	background-color: var(--xmn-primary);
	border-color: var(--xmn-primary);
	color: #fff;
}

@media (prefers-reduced-motion: reduce) {
	.back-to-top {
		transition: none;
	}
}

/* ---------- Gợi ý tìm kiếm ----------
   Khối đổ xuống ngay dưới ô tìm kiếm, JS đổ nội dung vào (xem theme.js). */

.live-search-results {
	display: none;
	position: absolute;
	top: 100%;
	right: 0;
	left: 0;
	z-index: 9;
	max-height: 70vh;
	overflow-y: auto;
	background-color: #fff;
	box-shadow: 0 3px 12px rgba(0, 0, 0, 0.18);
}

.live-search-results.is-open {
	display: block;
}

.live-search-results a,
.nav > li.html .live-search-results a,
.header-main .live-search-results a {
	color: #333;
}

.live-search-results .search-result {
	display: flex;
	align-items: center;
	padding: 8px 10px;
	border-bottom: 1px solid #ececec;
	color: #333;
	line-height: 1.3;
}

.live-search-results .search-result:hover {
	background-color: #f7f7f7;
}

.live-search-results .search-result img {
	width: 50px;
	height: auto;
	margin-right: 10px;
	flex: 0 0 auto;
}

.live-search-results .search-text {
	display: block;
	min-width: 0;
}

.live-search-results .search-name {
	display: block;
	font-size: 0.9em;
}

.live-search-results .search-price {
	display: block;
	font-size: 0.85em;
	font-weight: bold;
	color: #d0021b;
}

.live-search-results .search-price del {
	margin-right: 0.3em;
	font-weight: normal;
	opacity: 0.6;
}

.live-search-results .search-all {
	display: block;
	padding: 10px;
	text-align: center;
	font-size: 0.85em;
	text-transform: uppercase;
}

/* ---------- Cửa sổ "Xem nhanh" ----------
   Hộp giữa màn hình, nền mờ phía sau. Cùng cách dựng với ngăn kéo: JS chỉ bật
   tắt class .is-open. */

.xmn-modal {
	position: fixed;
	inset: 0;
	z-index: 1044;
	visibility: hidden;
	opacity: 0;
	transition: opacity 0.25s;
}

.xmn-modal.is-open {
	visibility: visible;
	opacity: 1;
}

.xmn-modal-bg {
	position: fixed;
	inset: 0;
	background-color: #0b0b0b;
	opacity: 0.8;
}

.xmn-modal-box {
	position: relative;
	width: 880px;
	max-width: calc(100% - 30px);
	max-height: 90vh;
	margin: 5vh auto;
	overflow-y: auto;
	background-color: #fff;
	-webkit-overflow-scrolling: touch;
}

.xmn-modal-x {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 2;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	background: transparent;
	color: #333;
	font-size: 28px;
	line-height: 44px;
	opacity: 0.6;
	cursor: pointer;
}

.xmn-modal-x:hover {
	opacity: 1;
}

.xmn-modal.is-loading .xmn-modal-content::before {
	content: "";
	display: block;
	width: 30px;
	height: 30px;
	margin: 60px auto;
	border: 2px solid #ddd;
	border-top-color: var(--xmn-primary, #008c84);
	border-radius: 50%;
	animation: xmn-spin 0.8s linear infinite;
}

@keyframes xmn-spin {
	to { transform: rotate(360deg); }
}

.xmn-modal .product-quick-view-container {
	padding: 20px;
}

html.has-modal {
	overflow: hidden;
}