/**
 * ==============================================================================
 * Header, Topbar, Search, Cart & Mobile Navigation Styles
 * Trang Trí 4 Mùa (trangtri4mua.com) — Boutique Holiday Commerce
 * Version: 2.1.0
 * Typography: Be Vietnam Pro + Playfair Display
 * Palette: Evergreen (#14532D), Deep Pine (#0F3F22), Festive Crimson (#C41E2F),
 *          Soft Ivory (#FAF8F5), Crisp White (#FFFFFF), Slate (#1F2937).
 * ==============================================================================
 */

/* ==============================================================================
 * 1. TOPBAR REFINED ANNOUNCEMENT BANNER
 * ============================================================================== */

/* When custom tt4m-topbar-banner is active, hide default Blocksy top row */
.tt4m-topbar-banner ~ #header [data-row="top"],
#main-container:has(.tt4m-topbar-banner) .ct-header [data-row="top"],
body:has(.tt4m-topbar-banner) .ct-header [data-row="top"] {
	display: none !important;
}

/* Fallback styling for native Blocksy top row if rendered */
.ct-header [data-row="top"] {
	background: var(--tt4m-primary-dark, #0F3F22) !important;
	color: #FAF8F5 !important;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
	font-size: 13px !important;
	font-family: var(--tt4m-font-family, 'Be Vietnam Pro', sans-serif) !important;
}

.ct-header [data-row="top"] a {
	color: #FAF8F5 !important;
	text-decoration: none !important;
	font-weight: 500 !important;
}

.ct-header [data-row="top"] a:hover {
	color: var(--tt4m-gold-light, #FEF3C7) !important;
}

/* Custom TT4M Boutique Topbar Banner */
.tt4m-topbar-banner {
	background: var(--tt4m-primary-dark, #0F3F22);
	color: #FAF8F5;
	font-family: var(--tt4m-font-family, 'Be Vietnam Pro', sans-serif);
	font-size: 13px;
	line-height: 1.4;
	letter-spacing: 0.01em;
	padding: 8px 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	position: relative;
	z-index: 100;
}

.tt4m-topbar-container {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

/* Desktop 3-Segment Layout */
.tt4m-topbar-desktop {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
}

.tt4m-topbar-item {
	display: inline-flex;
	align-items: center;
	font-size: 12.5px;
	font-weight: 450;
	color: rgba(250, 248, 245, 0.92);
}

.tt4m-topbar-item strong {
	font-weight: 600;
	color: #FFFFFF;
}

/* Subtle Vertical Divider Bars */
.tt4m-topbar-sep {
	color: rgba(255, 255, 255, 0.22);
	margin: 0 16px;
	font-size: 11px;
	user-select: none;
}

/* Clear Phone & Consultation Link */
.tt4m-topbar-phone {
	color: #FAF8F5 !important;
	font-weight: 600 !important;
	text-decoration: none !important;
	border-bottom: 1px dotted rgba(250, 248, 245, 0.45);
	margin-left: 4px;
	transition: color 0.18s ease, border-color 0.18s ease;
}

.tt4m-topbar-phone:hover {
	color: var(--tt4m-gold-light, #FEF3C7) !important;
	border-bottom-color: var(--tt4m-gold-light, #FEF3C7);
}

/* Mobile Static Announcement (No Ticker, No Emojis, No Dots) */
.tt4m-topbar-mobile {
	display: none;
	width: 100%;
	text-align: center;
	padding: 2px 0;
}

.tt4m-topbar-mobile-text {
	font-size: 12px;
	font-weight: 450;
	color: rgba(250, 248, 245, 0.95);
	line-height: 1.4;
}

@media (max-width: 991.98px) {
	.tt4m-topbar-desktop {
		display: none !important;
	}
	.tt4m-topbar-mobile {
		display: block !important;
	}
}


/* ==============================================================================
 * 2. MAIN HEADER & LOGO DISPLAY
 * ============================================================================== */

/* Main Header Shell: Clean White with Subtle 1px Border */
.ct-header {
	background: #FFFFFF !important;
	border-bottom: 1px solid var(--tt4m-border, #E5E7EB) !important;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03) !important;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

/* Refined Logo Display */
.site-branding[data-id="logo"] {
	display: flex;
	align-items: center;
}

.site-logo-container {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
}

.site-logo-container img {
	max-height: 48px;
	width: auto;
	object-fit: contain;
	image-rendering: -webkit-optimize-contrast;
	transition: opacity 0.2s ease;
}

.site-logo-container:hover img {
	opacity: 0.9;
}

@media (max-width: 768px) {
	.site-logo-container img {
		max-height: 40px;
	}
}

/* Hide duplicate site title markup */
.site-title-container {
	display: none !important;
}


/* ==============================================================================
 * 3. DESKTOP NAVIGATION LINKS & DROPDOWNS
 * ============================================================================== */

.header-menu-1 {
	display: flex;
	align-items: center;
}

.header-menu-1 .menu {
	display: flex;
	align-items: center;
	gap: 2px;
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Main Navigation Item Link: Be Vietnam Pro, 14px, weight 500, NO UPPERCASE */
.header-menu-1 .ct-menu-link {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 10px 14px !important;
	font-family: var(--tt4m-font-family, 'Be Vietnam Pro', sans-serif) !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	text-transform: none !important;
	letter-spacing: 0.01em !important;
	color: var(--tt4m-text, #1F2937) !important;
	text-decoration: none !important;
	background-color: transparent !important;
	border-radius: 4px;
	transition: color 0.2s ease;
	white-space: nowrap;
}

/* Clean Hover Effect: Minimal Underline in Deep Pine/Evergreen */
.header-menu-1 .ct-menu-link::after {
	content: '';
	position: absolute;
	bottom: 3px;
	left: 14px;
	right: 14px;
	height: 2px;
	background: var(--tt4m-primary, #14532D);
	border-radius: 1px;
	transform: scaleX(0);
	transform-origin: center;
	transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
	pointer-events: none;
}

/* Hover State */
.header-menu-1 li:hover > .ct-menu-link,
.header-menu-1 .ct-menu-link:hover {
	color: var(--tt4m-primary, #14532D) !important;
	background-color: transparent !important;
}

.header-menu-1 li:hover > .ct-menu-link::after,
.header-menu-1 .ct-menu-link:hover::after {
	transform: scaleX(1);
}

/* Active State */
.header-menu-1 li.current-menu-item > .ct-menu-link,
.header-menu-1 li.current_page_item > .ct-menu-link,
.header-menu-1 li.current-menu-ancestor > .ct-menu-link {
	color: var(--tt4m-primary, #14532D) !important;
	font-weight: 600 !important;
	background-color: transparent !important;
}

.header-menu-1 li.current-menu-item > .ct-menu-link::after,
.header-menu-1 li.current_page_item > .ct-menu-link::after,
.header-menu-1 li.current-menu-ancestor > .ct-menu-link::after {
	transform: scaleX(1);
	background: var(--tt4m-primary, #14532D);
}

/* Refined Dropdown Menu */
.header-menu-1 .sub-menu {
	background: #FFFFFF !important;
	border: 1px solid var(--tt4m-border, #E5E7EB) !important;
	border-radius: 10px !important;
	box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.02) !important;
	padding: 6px !important;
	min-width: 220px !important;
	list-style: none !important;
	z-index: 1000 !important;
}

.header-menu-1 .sub-menu li {
	margin: 0;
	padding: 0;
}

.header-menu-1 .sub-menu li a {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	padding: 9px 14px !important;
	border-radius: 6px !important;
	font-family: var(--tt4m-font-family, 'Be Vietnam Pro', sans-serif) !important;
	font-size: 13.5px !important;
	font-weight: 500 !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	color: var(--tt4m-text, #1F2937) !important;
	text-decoration: none !important;
	transition: background-color 0.16s ease, color 0.16s ease !important;
}

.header-menu-1 .sub-menu li a::after {
	display: none !important;
}

.header-menu-1 .sub-menu li a:hover {
	background: #F9FAFB !important;
	color: var(--tt4m-primary, #14532D) !important;
	font-weight: 600 !important;
	padding-left: 16px !important;
}

.header-menu-1 .sub-menu li.current-menu-item > a {
	background: rgba(20, 83, 45, 0.06) !important;
	color: var(--tt4m-primary, #14532D) !important;
	font-weight: 600 !important;
}


/* ==============================================================================
 * 4. HEADER SEARCH & CART BUTTONS
 * ============================================================================== */

/* Search Trigger Button */
.ct-header-search {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 40px !important;
	height: 40px !important;
	min-width: 40px !important;
	min-height: 40px !important;
	border-radius: 50% !important;
	border: 1px solid var(--tt4m-border, #E5E7EB) !important;
	background: #FFFFFF !important;
	color: var(--tt4m-text, #1F2937) !important;
	cursor: pointer !important;
	transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease !important;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02) !important;
}

.ct-header-search:hover {
	border-color: var(--tt4m-primary, #14532D) !important;
	color: var(--tt4m-primary, #14532D) !important;
	background: #F9FAFB !important;
}

/* Search Modal Overlay */
#search-modal {
	backdrop-filter: blur(10px) !important;
	-webkit-backdrop-filter: blur(10px) !important;
	background: rgba(15, 63, 34, 0.82) !important;
	transition: opacity 0.25s ease !important;
}

#search-modal .ct-toggle-close {
	width: 42px !important;
	height: 42px !important;
	border-radius: 50% !important;
	background: rgba(255, 255, 255, 0.12) !important;
	border: 1px solid rgba(255, 255, 255, 0.25) !important;
	color: #FFFFFF !important;
	cursor: pointer !important;
	transition: background-color 0.2s ease !important;
}

#search-modal .ct-toggle-close:hover {
	background: rgba(255, 255, 255, 0.25) !important;
}

#search-modal .ct-search-form {
	max-width: 640px !important;
	margin: 0 auto !important;
	width: 100% !important;
}

#search-modal .ct-search-form-inner {
	display: flex !important;
	align-items: center !important;
	background: #FFFFFF !important;
	border: 1px solid #FFFFFF !important;
	border-radius: 9999px !important;
	padding: 4px 6px 4px 18px !important;
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25) !important;
	transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

#search-modal .ct-search-form-inner:focus-within {
	border-color: var(--tt4m-gold, #D97706) !important;
	box-shadow: 0 12px 36px rgba(0, 0, 0, 0.3), 0 0 0 3px rgba(217, 119, 6, 0.2) !important;
}

#search-modal input[type="search"] {
	width: 100% !important;
	border: none !important;
	background: transparent !important;
	color: var(--tt4m-heading, #111827) !important;
	font-family: var(--tt4m-font-family, 'Be Vietnam Pro', sans-serif) !important;
	font-size: 15px !important;
	font-weight: 500 !important;
	outline: none !important;
	box-shadow: none !important;
	padding: 10px 12px 10px 0 !important;
	min-height: 44px !important;
}

#search-modal input[type="search"]::placeholder {
	color: var(--tt4m-text-muted, #6B7280) !important;
	font-weight: 400 !important;
	font-size: 14px !important;
}

#search-modal button[type="submit"] {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 42px !important;
	height: 42px !important;
	border-radius: 50% !important;
	background: var(--tt4m-primary, #14532D) !important;
	color: #FFFFFF !important;
	border: none !important;
	cursor: pointer !important;
	flex-shrink: 0 !important;
	transition: background-color 0.2s ease !important;
}

#search-modal button[type="submit"]:hover {
	background: var(--tt4m-primary-dark, #0F3F22) !important;
}

/* Header Cart Item Pill */
.ct-header-cart {
	position: relative;
	display: inline-flex;
	align-items: center;
}

.ct-cart-item {
	display: inline-flex !important;
	align-items: center !important;
	gap: 8px !important;
	padding: 6px 12px !important;
	border: 1px solid var(--tt4m-border, #E5E7EB) !important;
	border-radius: 9999px !important;
	background: #FFFFFF !important;
	text-decoration: none !important;
	transition: border-color 0.2s ease, background-color 0.2s ease !important;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02) !important;
}

.ct-cart-item:hover {
	border-color: var(--tt4m-primary, #14532D) !important;
	background: #F9FAFB !important;
}

.ct-cart-item .ct-amount,
.ct-cart-item .ct-label {
	font-family: var(--tt4m-font-family, 'Be Vietnam Pro', sans-serif) !important;
	font-size: 13.5px !important;
	font-weight: 600 !important;
	color: var(--tt4m-primary, #14532D) !important;
	white-space: nowrap !important;
	background: transparent !important;
	background-color: transparent !important;
	box-shadow: none !important;
	border: none !important;
}

.ct-cart-item .ct-icon-container {
	position: relative !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	color: var(--tt4m-text, #1F2937) !important;
}

/* Dynamic Item Count Bubble */
.ct-dynamic-count-cart {
	position: absolute !important;
	top: -8px !important;
	right: -9px !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	min-width: 18px !important;
	height: 18px !important;
	padding: 0 4px !important;
	font-family: var(--tt4m-font-family, 'Be Vietnam Pro', sans-serif) !important;
	font-size: 11px !important;
	font-weight: 700 !important;
	line-height: 1 !important;
	color: #FFFFFF !important;
	background: var(--tt4m-cta, #C41E2F) !important;
	border: 2px solid #FFFFFF !important;
	border-radius: 999px !important;
	box-shadow: 0 1px 4px rgba(196, 30, 47, 0.3) !important;
	z-index: 2 !important;
}

/* Mini-Cart Dropdown */
.ct-cart-content {
	background: #FFFFFF !important;
	border: 1px solid var(--tt4m-border, #E5E7EB) !important;
	border-radius: 12px !important;
	box-shadow: 0 12px 28px -5px rgba(0, 0, 0, 0.12) !important;
	color: var(--tt4m-text, #1F2937) !important;
	padding: 16px !important;
	z-index: 1050 !important;
}

.ct-cart-content .total {
	color: var(--tt4m-heading, #111827) !important;
	font-size: 14.5px !important;
	font-weight: 600 !important;
	border-top: 1px solid var(--tt4m-border, #E5E7EB) !important;
	padding-top: 12px !important;
	margin-top: 12px !important;
}

.ct-cart-content .total .woocommerce-Price-amount {
	color: var(--tt4m-cta, #C41E2F) !important;
	font-size: 15.5px !important;
	font-weight: 700 !important;
}

.ct-cart-content .button {
	border-radius: 6px !important;
	font-weight: 600 !important;
	text-align: center !important;
	padding: 10px 16px !important;
}

.ct-cart-content .button.checkout {
	background: var(--tt4m-primary, #14532D) !important;
	color: #FFFFFF !important;
}

.ct-cart-content .button.checkout:hover {
	background: var(--tt4m-primary-dark, #0F3F22) !important;
}


/* ==============================================================================
 * 5. MOBILE OFFCANVAS DRAWER & CATEGORY HIERARCHY
 * ============================================================================== */

#offcanvas {
	background: #FFFFFF !important;
}

#offcanvas .ct-panel-inner {
	display: flex !important;
	flex-direction: column !important;
	height: 100% !important;
	background: #FFFFFF !important;
}

/* Offcanvas Close Button: Touch Target >= 44x44px */
#offcanvas .ct-toggle-close {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 44px !important;
	height: 44px !important;
	min-width: 44px !important;
	min-height: 44px !important;
	border-radius: 50% !important;
	background: #F9FAFB !important;
	border: 1px solid var(--tt4m-border, #E5E7EB) !important;
	color: var(--tt4m-text, #1F2937) !important;
	cursor: pointer !important;
	transition: background-color 0.18s ease, color 0.18s ease !important;
}

#offcanvas .ct-toggle-close:hover {
	background: #F3F4F6 !important;
	color: var(--tt4m-heading, #111827) !important;
}

#offcanvas .ct-panel-content-inner {
	display: flex !important;
	flex-direction: column !important;
	min-height: 100% !important;
	padding: 0 4px 20px 4px !important;
}

/* --- Drawer Brand Identity --- */
.tt4m-drawer-header-section {
	padding-bottom: 4px;
}

.tt4m-drawer-brand {
	padding: 4px 14px 12px 14px;
	border-bottom: 1px solid #F3F4F6;
	margin-bottom: 10px;
}

.tt4m-drawer-brand-link {
	text-decoration: none;
	display: inline-block;
}

.tt4m-drawer-brand-name {
	font-family: var(--tt4m-font-heading, 'Playfair Display', serif);
	font-size: 18px;
	font-weight: 700;
	color: var(--tt4m-primary, #14532D);
	letter-spacing: 0.01em;
	display: block;
}

.tt4m-drawer-brand-tagline {
	font-size: 12px;
	color: var(--tt4m-text-muted, #6B7280);
	margin: 2px 0 0 0;
	line-height: 1.35;
}

/* Drawer Section Headings (No ALL-CAPS, No Tracking) */
.tt4m-drawer-section-heading {
	font-family: var(--tt4m-font-family, 'Be Vietnam Pro', sans-serif);
	font-size: 12px;
	font-weight: 600;
	color: var(--tt4m-text-muted, #6B7280);
	padding: 10px 14px 6px 14px;
	letter-spacing: 0.01em;
}

/* --- Clean Category List with Indented Hierarchy --- */
.tt4m-drawer-cat-tree {
	list-style: none;
	margin: 0;
	padding: 0 8px;
}

.tt4m-cat-node {
	margin-bottom: 2px;
	border-radius: 8px;
}

.tt4m-cat-node-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 44px;
	border-radius: 8px;
	transition: background-color 0.16s ease;
}

.tt4m-cat-node-row:hover {
	background-color: #F9FAFB;
}

.tt4m-cat-node-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	flex: 1;
	min-height: 44px;
	padding: 8px 12px;
	font-family: var(--tt4m-font-family, 'Be Vietnam Pro', sans-serif);
	font-size: 14.5px;
	font-weight: 600;
	color: var(--tt4m-heading, #111827);
	text-decoration: none;
}

.tt4m-cat-node-badge {
	font-size: 10.5px;
	font-weight: 600;
	padding: 2px 7px;
	border-radius: 4px;
	background: rgba(20, 83, 45, 0.08);
	color: var(--tt4m-primary, #14532D);
	line-height: 1.2;
}

/* Toggle Chevron Button: Touch Target >= 44x44px */
.tt4m-cat-toggle-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	min-width: 44px;
	min-height: 44px;
	background: transparent;
	border: none;
	cursor: pointer;
	color: var(--tt4m-text-muted, #6B7280);
	padding: 0;
	transition: color 0.18s ease;
}

.tt4m-cat-chevron {
	transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

.tt4m-cat-node.is-expanded .tt4m-cat-chevron {
	transform: rotate(180deg);
}

/* Indented Subcategory Hierarchy with Subtle Guide Line */
.tt4m-drawer-subcat-list {
	list-style: none;
	margin: 2px 0 8px 16px;
	padding: 0 0 0 12px;
	border-left: 1.5px solid var(--tt4m-border, #E5E7EB);
}

.tt4m-subcat-item {
	margin: 0;
}

.tt4m-subcat-link {
	display: block;
	min-height: 44px;
	line-height: 44px;
	padding: 0 10px;
	font-family: var(--tt4m-font-family, 'Be Vietnam Pro', sans-serif);
	font-size: 13.5px;
	font-weight: 450;
	color: var(--tt4m-text, #374151);
	text-decoration: none;
	border-radius: 4px;
	transition: color 0.16s ease, background-color 0.16s ease;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.tt4m-subcat-link:hover,
.tt4m-subcat-link:active {
	color: var(--tt4m-primary, #14532D);
	background-color: #F9FAFB;
	font-weight: 550;
}

/* Drawer Dividers */
.tt4m-drawer-divider {
	height: 1px;
	background: #F3F4F6;
	margin: 12px 14px;
}

/* --- Blocksy Mobile Menu Styling --- */
.mobile-menu ul {
	list-style: none;
	margin: 0;
	padding: 0 8px;
}

.mobile-menu li {
	margin: 0;
	border-bottom: 1px solid #F9FAFB;
}

.mobile-menu li:last-child {
	border-bottom: none;
}

.mobile-menu .ct-menu-link {
	display: flex !important;
	align-items: center !important;
	min-height: 44px !important;
	padding: 10px 12px !important;
	font-family: var(--tt4m-font-family, 'Be Vietnam Pro', sans-serif) !important;
	font-size: 14.5px !important;
	font-weight: 500 !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	color: var(--tt4m-heading, #111827) !important;
	text-decoration: none !important;
	transition: color 0.18s ease !important;
}

.mobile-menu li.current-menu-item > .ct-menu-link,
.mobile-menu li.current_page_item > .ct-menu-link {
	color: var(--tt4m-primary, #14532D) !important;
	font-weight: 600 !important;
}

.mobile-menu .ct-toggle-dropdown-mobile {
	width: 44px !important;
	height: 44px !important;
	min-width: 44px !important;
	min-height: 44px !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	background: transparent !important;
	border: none !important;
	cursor: pointer !important;
	color: var(--tt4m-text-muted, #6B7280) !important;
}

/* Nested submenus inside mobile menu */
.mobile-menu .sub-menu {
	margin: 2px 0 6px 14px !important;
	padding: 0 0 0 12px !important;
	border-left: 1.5px solid var(--tt4m-border, #E5E7EB) !important;
	background: transparent !important;
	border-radius: 0 !important;
}

.mobile-menu .sub-menu .ct-menu-link {
	font-size: 13.5px !important;
	font-weight: 450 !important;
	min-height: 42px !important;
	padding: 8px 8px !important;
	color: var(--tt4m-text, #374151) !important;
}

.mobile-menu .sub-menu .sub-menu {
	margin-left: 12px !important;
	border-left-color: var(--tt4m-border-strong, #D1D5DB) !important;
}

/* --- Mobile Drawer Footer: Hotline & Zalo Actions --- */
.tt4m-drawer-footer-section {
	margin-top: auto;
	padding: 10px 12px 12px 12px;
}

.tt4m-drawer-actions {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-bottom: 12px;
}

/* Base Drawer Button: Touch Target >= 44x44px */
.tt4m-drawer-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 46px;
	padding: 10px 16px;
	border-radius: 8px;
	font-family: var(--tt4m-font-family, 'Be Vietnam Pro', sans-serif);
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	text-align: center;
	transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

/* Primary Contact: Hotline in Deep Pine */
.tt4m-drawer-btn-hotline {
	background: var(--tt4m-primary, #14532D);
	color: #FFFFFF !important;
	border: 1px solid var(--tt4m-primary, #14532D);
}

.tt4m-drawer-btn-hotline:hover,
.tt4m-drawer-btn-hotline:active {
	background: var(--tt4m-primary-dark, #0F3F22);
	border-color: var(--tt4m-primary-dark, #0F3F22);
	color: #FFFFFF !important;
}

/* Secondary Contact: Zalo in Clean White with Official Blue Border */
.tt4m-drawer-btn-zalo {
	background: #FFFFFF;
	color: var(--tt4m-zalo, #0068FF) !important;
	border: 1.5px solid var(--tt4m-zalo, #0068FF);
}

.tt4m-drawer-btn-zalo:hover,
.tt4m-drawer-btn-zalo:active {
	background: #F0F7FF;
	color: var(--tt4m-zalo-hover, #0056D6) !important;
	border-color: var(--tt4m-zalo-hover, #0056D6);
}

.tt4m-drawer-icon {
	flex-shrink: 0;
}

/* Subtle Trust Reassurance List (Clean SVGs, No Emojis) */
.tt4m-drawer-trust {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 10px 12px;
	background: #F9FAFB;
	border: 1px solid var(--tt4m-border, #E5E7EB);
	border-radius: 8px;
	margin-bottom: 10px;
}

.tt4m-drawer-trust-item {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 12.5px;
	font-weight: 450;
	color: var(--tt4m-text, #374151);
}

.tt4m-drawer-trust-svg {
	color: var(--tt4m-primary, #14532D);
	flex-shrink: 0;
}

/* Working Hours Note */
.tt4m-drawer-hours {
	font-size: 11.5px;
	color: var(--tt4m-text-muted, #6B7280);
	text-align: center;
	line-height: 1.4;
	padding: 0 4px;
}


/* ==============================================================================
 * 6. ACCESSIBILITY & PRINT STYLES
 * ============================================================================== */

/* High-contrast focus outline */
.tt4m-topbar-phone:focus-visible,
.tt4m-drawer-btn:focus-visible,
.tt4m-cat-node-link:focus-visible,
.tt4m-subcat-link:focus-visible,
.ct-header-search:focus-visible,
.ct-cart-item:focus-visible {
	outline: 2px solid var(--tt4m-primary, #14532D) !important;
	outline-offset: 2px !important;
}

@media print {
	.tt4m-topbar-banner,
	.ct-header-search,
	.ct-header-cart {
		display: none !important;
	}
}

/* ==============================================================================
 * 7. MOBILE SEARCH & ACCESSIBLE DRAWER CLOSE BUTTON (R2-08 & R2-09)
 * ============================================================================== */

/* High-Contrast Accessible Close Button in Mobile Drawer (R2-09) */
.ct-drawer-canvas .ct-toggle-close,
.ct-panel .ct-toggle-close {
	color: #1F2937 !important; /* Dark Slate Charcoal, ratio > 14:1 on white! */
	background-color: #F3F4F6 !important;
	border-radius: 50% !important;
	width: 44px !important;
	height: 44px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	border: 1px solid #E5E7EB !important;
	transition: all 0.2s ease !important;
}

.ct-drawer-canvas .ct-toggle-close:hover,
.ct-panel .ct-toggle-close:hover {
	color: #FFFFFF !important;
	background-color: var(--tt4m-primary, #14532D) !important;
	border-color: var(--tt4m-primary, #14532D) !important;
}

.ct-drawer-canvas .ct-toggle-close svg,
.ct-panel .ct-toggle-close svg {
	width: 16px !important;
	height: 16px !important;
	stroke-width: 2.5px !important;
	fill: currentColor !important;
}

/* Mobile Drawer Search Bar (R2-08) */
.tt4m-drawer-search {
	margin: 14px 0 18px 0;
	width: 100%;
}

.tt4m-mobile-search-form {
	width: 100%;
}

.tt4m-mobile-search-inner {
	display: flex;
	align-items: center;
	background: #F9FAFB;
	border: 1.5px solid var(--tt4m-border, #E5E7EB);
	border-radius: 8px;
	padding: 2px 4px 2px 12px;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.tt4m-mobile-search-inner:focus-within {
	border-color: var(--tt4m-primary, #14532D);
	box-shadow: 0 0 0 3px rgba(20, 83, 45, 0.1);
	background: #FFFFFF;
}

.tt4m-mobile-search-input {
	flex: 1;
	border: none !important;
	background: transparent !important;
	font-family: var(--tt4m-font-sans, 'Be Vietnam Pro', sans-serif);
	font-size: 13.5px !important;
	color: var(--tt4m-text, #1F2937) !important;
	padding: 8px 0 !important;
	outline: none !important;
	box-shadow: none !important;
	min-height: 40px;
}

.tt4m-mobile-search-input::placeholder {
	color: #9CA3AF;
}

.tt4m-mobile-search-btn {
	background: none;
	border: none;
	padding: 8px 10px;
	color: var(--tt4m-primary, #14532D);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 6px;
	transition: background-color 0.2s ease;
}

.tt4m-mobile-search-btn:hover {
	background: #E8F5E9;
}

/* Enable Search icon in mobile/tablet header (R2-08) */
@media (max-width: 991.98px) {
	.ct-header [data-id="search"] {
		display: flex !important;
	}
	.ct-header [data-id="search"] .ct-header-search {
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		width: 44px !important;
		height: 44px !important;
		color: var(--tt4m-text, #1F2937) !important;
	}
}