/* ==========================================================================
   Mộc Trầm Hương — phương án B "Editorial" — CSS toàn site
   Ghi đè Flatsome 3.15. Dùng !important chỉ ở chỗ Customizer của Flatsome
   in CSS inline sau file này (màu nền, màu nút, font).
   ========================================================================== */

:root {
	--mth-paper: #F4EFE6;
	--mth-paper-2: #EAE2D4;
	--mth-sand: #E4DACA;
	--mth-line: #CFC3AE;
	--mth-ink: #1E1711;
	--mth-ink-2: #3C3127;
	--mth-muted: #5E5244;
	--mth-night: #17120D;
	--mth-night-line: #3A2F22;
	--mth-night-text: #EDE4D3;
	--mth-night-muted: #B9AC97;
	--mth-gold: #D9AE3F;        /* màu logo — chỉ dùng trên nền tối */
	--mth-gold-ink: #8A6514;    /* vàng đậm — dùng cho chữ trên nền sáng */
	--mth-serif: "Lora", Georgia, "Times New Roman", serif;
	--mth-sans: "Montserrat", "Segoe UI", system-ui, sans-serif;
	--mth-wrap: 1312px;
}

/* ---------- Nền & chữ ---------- */
html body,
body #wrapper,
body #main,
body .page-wrapper {
	background-color: var(--mth-paper) !important;
	color: var(--mth-ink);
}
body,
body p,
body li,
body input,
body select,
body textarea,
body button,
body .nav > li > a {
	font-family: var(--mth-sans) !important;
}
body h1, body h2, body h3, body h4,
body .product-title,
body .section-title,
body .entry-title,
body .heading-font {
	font-family: var(--mth-serif) !important;
	font-weight: 400 !important;
	color: var(--mth-ink);
	letter-spacing: 0;
}
body a { color: var(--mth-gold-ink); }
body a:hover { color: #5E440C; }

:focus-visible {
	outline: 2px solid var(--mth-gold-ink);
	outline-offset: 3px;
}

/* ---------- Header (nền tối, logo vàng) ---------- */
body .header-top,
body .header-main,
body .header-bottom,
body .header-wrapper.stuck .header-main,
body .header-bg-color {
	background-color: var(--mth-night) !important;
	border: 0 !important;
}
body .header-main .nav > li > a,
body .header-bottom .nav > li > a,
body .header-top .nav > li > a,
body .header-main .icon-shopping-bag,
body .header-main .header-button a {
	color: var(--mth-night-text) !important;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
body .header-main .nav > li.active > a,
body .header-main .nav > li > a:hover {
	color: var(--mth-gold) !important;
}
body .header-main .cart-icon strong,
body .header-main .cart-icon strong:after {
	border-color: var(--mth-gold) !important;
	color: var(--mth-gold) !important;
}
body .nav-dropdown {
	background-color: var(--mth-night) !important;
	border-color: var(--mth-night-line) !important;
}
body .nav-dropdown li a { color: var(--mth-night-text) !important; }

/* ---------- Nút ---------- */
body .button,
body button.button,
body input[type="submit"] {
	border-radius: 0 !important;
	font-family: var(--mth-sans) !important;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	box-shadow: none !important;
}
body .button.primary,
body .button.alt,
body .single_add_to_cart_button,
body .checkout-button,
body #place_order {
	background-color: var(--mth-night) !important;
	color: var(--mth-paper) !important;
	border: 1px solid var(--mth-night) !important;
}
body .button.primary:hover,
body .button.alt:hover,
body .single_add_to_cart_button:hover,
body .checkout-button:hover,
body #place_order:hover {
	background-color: #000 !important;
}
body .button.is-outline,
body .button.secondary {
	background: transparent !important;
	border: 1px solid var(--mth-ink) !important;
	color: var(--mth-ink) !important;
}
/* Nút "Mua ngay" của plugin DevVN Quick Buy — tên class có thể khác, kiểm tra trên staging */
body .devvn-popup-quickbuy,
body a.devvn_buy_now,
body .devvn_buy_now {
	background-color: var(--mth-gold) !important;
	color: #16110B !important;
	border-radius: 0 !important;
}

/* ---------- Ô nhập ---------- */
body input[type="text"],
body input[type="email"],
body input[type="tel"],
body input[type="number"],
body input[type="search"],
body select,
body textarea {
	background-color: #fff;
	border: 1px solid var(--mth-line);
	border-radius: 0;
	box-shadow: none;
	color: var(--mth-ink);
}

/* ---------- Thẻ sản phẩm trong danh mục ---------- */
body .product-small .box-image,
body .product-small .box-image img {
	background-color: var(--mth-sand);
}
body .product-small .box-text .name,
body .product-small .box-text .name a,
body .product-small .product-title a {
	font-family: var(--mth-serif) !important;
	font-size: 17px;
	line-height: 1.35;
	color: var(--mth-ink) !important;
}
body .price,
body .price .amount {
	color: var(--mth-ink) !important;
	font-weight: 600;
}
body .price del .amount { color: var(--mth-muted) !important; font-weight: 400; }
body .badge-inner,
body .badge-inner.on-sale {
	background-color: var(--mth-night) !important;
	color: var(--mth-gold) !important;
	border-radius: 0 !important;
	font-family: var(--mth-sans);
}
body .category-page-row .shop-container,
body .woocommerce-breadcrumb,
body .breadcrumbs {
	color: var(--mth-muted);
}

/* ---------- Trang sản phẩm ---------- */
body .product-info .product-title {
	font-size: clamp(30px, 3vw, 42px);
	line-height: 1.15;
}
body .product-info .price-wrapper .price {
	font-size: 22px;
}
body .product-gallery .woocommerce-product-gallery__image,
body .product-gallery img {
	background-color: var(--mth-sand);
}
body .variations .label label {
	font-family: var(--mth-sans);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}
/* Nút chọn biến thể (plugin Variation Swatches) */
body .variable-items-wrapper .variable-item:not(.radio-variable-item) {
	border-radius: 0 !important;
	box-shadow: 0 0 0 1px var(--mth-line) !important;
	background: transparent !important;
}
body .variable-items-wrapper .variable-item.selected:not(.radio-variable-item) {
	box-shadow: 0 0 0 1px var(--mth-ink) !important;
	background: var(--mth-night) !important;
}
body .variable-items-wrapper .variable-item.selected .variable-item-span {
	color: var(--mth-paper) !important;
}

.mth-scent {
	margin: 4px 0 20px;
	font-family: var(--mth-serif) !important;
	font-style: italic;
	font-size: 19px;
	line-height: 1.6;
	color: var(--mth-ink-2);
}
.mth-specs {
	margin: 0 0 24px;
	border-top: 1px solid var(--mth-line);
}
.mth-specs > div {
	display: grid;
	grid-template-columns: 1fr 2fr;
	gap: 16px;
	padding: 12px 0;
	border-bottom: 1px solid var(--mth-line);
	font-size: 14px;
}
.mth-specs dt { color: var(--mth-muted); font-weight: 400; }
.mth-specs dd { margin: 0; color: var(--mth-ink); }

.mth-zalo-ask {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 50px;
	margin: 12px 0 24px;
	border: 1px solid var(--mth-line);
	color: var(--mth-ink) !important;
	font-size: 13px;
	font-weight: 600;
}
.mth-zalo-ask:hover { border-color: var(--mth-ink); }

.mth-accordion { border-top: 1px solid var(--mth-line); margin-bottom: 24px; }
.mth-accordion details { border-bottom: 1px solid var(--mth-line); }
.mth-accordion summary {
	display: flex;
	justify-content: space-between;
	align-items: center;
	min-height: 52px;
	cursor: pointer;
	list-style: none;
	font-size: 14px;
	color: var(--mth-ink);
}
.mth-accordion summary::-webkit-details-marker { display: none; }
.mth-accordion summary::after { content: "+"; font-size: 18px; color: var(--mth-muted); }
.mth-accordion details[open] summary::after { content: "−"; }
.mth-accordion details p {
	margin: 0 0 16px;
	font-size: 14px;
	line-height: 1.7;
	color: var(--mth-muted);
}

.mth-ritual {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
	gap: 48px;
	margin: 48px 0;
	padding: 64px 56px;
	background: var(--mth-night);
	color: var(--mth-night-text);
}
.mth-ritual h2 {
	margin: 0;
	color: var(--mth-night-text) !important;
	font-size: clamp(28px, 3vw, 40px);
	line-height: 1.2;
}
.mth-ritual__steps {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 32px;
}
.mth-ritual__steps > div { padding-top: 20px; border-top: 1px solid #5A4B3A; }
.mth-ritual h3 {
	margin: 0 0 10px;
	color: var(--mth-night-text) !important;
	font-size: 20px;
}
.mth-ritual p { margin: 0; font-size: 14px; line-height: 1.7; color: var(--mth-night-muted); }

/* Tab mô tả sản phẩm */
body .woocommerce-tabs .tabs li a {
	font-family: var(--mth-sans);
	font-size: 13px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--mth-muted);
}
body .woocommerce-tabs .tabs li.active a { color: var(--mth-ink); }

/* ---------- Footer (nền tối) ---------- */
body .footer-wrapper,
body .footer-1,
body .footer-2,
body .absolute-footer {
	background-color: var(--mth-night) !important;
	color: var(--mth-night-muted) !important;
	border: 0 !important;
}
body .footer-wrapper a,
body .absolute-footer a { color: var(--mth-night-muted) !important; }
body .footer-wrapper a:hover,
body .absolute-footer a:hover { color: var(--mth-gold) !important; }
body .footer-wrapper h3,
body .footer-wrapper .widget-title,
body .footer-wrapper .widget-title span {
	color: var(--mth-gold) !important;
	font-family: var(--mth-sans) !important;
	font-size: 12px;
	font-weight: 600 !important;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}
body .absolute-footer { border-top: 1px solid var(--mth-night-line) !important; }

/* ---------- Ảnh chờ ---------- */
.mth-img--placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	background: var(--mth-sand);
	color: #6F6353;
	font-size: 13px;
	text-align: center;
}

/* ---------- Thanh liên hệ mobile ---------- */
.mth-mobile-bar { display: none; }
@media (max-width: 849px) {
	.mth-mobile-bar {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 999;
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 8px;
		padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
		background: var(--mth-night);
		border-top: 1px solid var(--mth-night-line);
	}
	.mth-mobile-bar a {
		display: flex;
		align-items: center;
		justify-content: center;
		min-height: 48px;
		font-size: 14px;
		font-weight: 700;
	}
	.mth-mobile-bar__zalo { border: 1px solid var(--mth-gold); color: var(--mth-gold) !important; }
	.mth-mobile-bar__call { background: var(--mth-gold); color: #16110B !important; }
	body.mth-has-mobile-bar { padding-bottom: 72px; }
	body.mth-has-mobile-bar .back-to-top { bottom: 90px; }

	.mth-ritual { grid-template-columns: 1fr; padding: 40px 20px; gap: 24px; }
	.mth-ritual__steps { grid-template-columns: 1fr; gap: 20px; }
}

@media (prefers-reduced-motion: reduce) {
	* { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}