/* Palette: Men Ngọc & Son — celadon Bát Tràng + son đỏ sơn mài + trắng gốm */
:root {
	--global-palette1: #2B5F54; /* Men ngọc đậm - celadon Bát Tràng */
	--global-palette2: #3D7A6C; /* Men ngọc vừa */
	--global-palette3: #1A100A; /* Mực tàu */
	--global-palette4: #2B5F54;
	--global-palette5: #3D2C1E; /* Nâu gụ đậm */
	--global-palette6: #8A7464; /* Nâu gụ nhạt */
	--global-palette7: #C0B0A0; /* Xám ấm */
	--global-palette8: #FFFFFF; /* Trắng */
	--global-palette9: #FFFFFF; /* Trắng */
	--global-palette-btn-bg: #2B5F54;
	--global-palette-btn-bg-hover: #3D7A6C;
	--global-palette-btn: #F4F1EB;
	--global-palette-btn-hover: #F4F1EB;
	--global-body-font-family: 'Noto Sans', system-ui, sans-serif;
	--global-heading-font-family: 'EB Garamond', Georgia, 'Times New Roman', serif;
	--cafe-accent: #8C2318;          /* Son đỏ - sơn mài, đình chùa */
	--cafe-accent-light: rgba(140, 35, 24, 0.10);
	--cafe-green: #3D7A6C;           /* Tái dụng cho breadcrumb/stock */
	--cafe-ink: #1A100A;
	--cafe-radius: 2px;
	--cafe-dark: #1E1008;            /* Nâu cà phê rang — thematic, ấm */
	--cafe-dark-surface: #2C1A0E;
	--cafe-dark-border: rgba(200, 175, 145, 0.15);
}

body {
	font-family: var(--global-body-font-family);
	background-color: #ffffff;
}

h1, h2, h3, h4, h5, h6, .site-title, .product_title {
	font-family: var(--global-heading-font-family);
	font-weight: 500;
	letter-spacing: -0.01em;
}

/* === LOGO === */
.custom-logo-link {
	display: inline-flex;
	align-items: center;
}
/* Logo là SVG 278x56 (tỉ lệ ~4.96). max-width phải luôn LỚN HƠN bề rộng tự nhiên ứng với
   chiều cao đang đặt, nếu không trình duyệt ép cả hai chiều và hình tròn trong logo biến
   thành bầu dục. 52 x 4.96 = 258, 44 x 4.96 = 218, 36 x 4.96 = 179. */
.custom-logo {
	width: auto !important;
	height: 52px !important;
	max-width: 272px !important;
}
@media (max-width: 1024px) {
	.custom-logo {
		height: 44px !important;
		max-width: 232px !important;
	}
}
@media (max-width: 600px) {
	.custom-logo {
		height: 36px !important;
		max-width: 192px !important;
	}
}

/* Fallback: khi DB Railway chưa có custom_logo, Kadence render site-title text.
   Body class "cafe-logo-fallback" được thêm bởi functions.php để ẩn text và
   hiển thị SVG logo qua CSS ::before. */
.cafe-logo-fallback .brand a[rel="home"] {
	display: inline-flex;
	align-items: center;
	min-width: 200px;
	height: 52px;
}
.cafe-logo-fallback .brand a[rel="home"] .site-title-wrap {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
}
.cafe-logo-fallback .brand a[rel="home"]::before {
	content: var(--cafe-logo-url, '');
	display: block;
	width: 220px;
	height: 52px;
	background: var(--cafe-logo-url) no-repeat left center;
	background-size: contain;
	/* content trick không hoạt động với URL trực tiếp — dùng background-image */
	content: '';
}

/* === HEADER ICONS: search, account, language === */
.cafe-header-icons {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}
.cafe-header-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	color: var(--global-palette5);
	text-decoration: none;
	transition: color 150ms ease, background 150ms ease;
	cursor: pointer;
}
.cafe-header-icon:hover {
	color: var(--global-palette1);
	background: rgba(43, 95, 84, 0.07);
}
.cafe-header-lang {
	gap: 3px;
}

/* === CHỌN NGÔN NGỮ ([cafe_language_switcher] của cafe-core) === */
.cafe-lang {
	position: relative;
	display: inline-flex;
}
/* Ghi đè style button mặc định của Kadence (nền màu nút, đổ bóng). */
.cafe-lang button.cafe-lang__toggle {
	gap: 3px;
	width: auto;
	min-width: 36px;
	padding: 0 6px;
	border: 0;
	border-radius: 18px;
	background: transparent;
	box-shadow: none;
	color: var(--global-palette5);
	font: inherit;
}
.cafe-lang button.cafe-lang__toggle:hover,
.cafe-lang.is-open button.cafe-lang__toggle {
	background: rgba(43, 95, 84, 0.07);
	box-shadow: none;
	color: var(--global-palette1);
}
.cafe-lang__toggle:focus-visible,
.cafe-lang__option:focus-visible {
	outline: 2px solid var(--global-palette1);
	outline-offset: 2px;
}
.cafe-lang__flag {
	display: block;
	flex: none;
	border-radius: 2px;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
}
.cafe-lang__chevron {
	opacity: 0.5;
	transition: transform 150ms ease;
}
.cafe-lang.is-open .cafe-lang__chevron {
	transform: rotate(180deg);
}
.cafe-lang__menu {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	z-index: 1000;
	min-width: 170px;
	margin: 0;
	padding: 6px 0;
	list-style: none;
	background: #fff;
	border: 1px solid #ebe8e2;
	border-radius: 8px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10);
}
.cafe-lang__menu[hidden] {
	display: none;
}
.cafe-lang__menu li {
	margin: 0;
}
.cafe-lang__option {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 16px;
	color: var(--cafe-ink, var(--global-palette3));
	font-size: 14px;
	line-height: 1.3;
	white-space: nowrap;
	text-decoration: none !important;
	transition: background 150ms ease, color 150ms ease;
}
.cafe-lang__option:hover {
	background: #f5f3ef;
	color: var(--global-palette1);
}
.cafe-lang__option[aria-current="true"] {
	font-weight: 600;
	color: var(--global-palette1);
}

/* === SEARCH: ẩn Kadence fullscreen drawer, dùng dropdown riêng === */
#search-drawer { display: none !important; }

/* === NAV DROPDOWN === */
.primary-navigation .sub-menu,
#primary-menu .sub-menu {
	background: #fff !important;
	border: 1px solid #ebe8e2 !important;
	border-radius: 8px !important;
	box-shadow: 0 8px 24px rgba(0,0,0,0.10) !important;
	padding: 6px 0 !important;
	min-width: 180px !important;
}
.primary-navigation .sub-menu .menu-item > a,
#primary-menu .sub-menu .menu-item > a {
	color: var(--cafe-ink) !important;
	background: transparent !important;
	padding: 9px 18px !important;
	font-size: 14px !important;
	font-weight: 400 !important;
	display: block !important;
	transition: background 150ms ease, color 150ms ease !important;
}
.primary-navigation .sub-menu .menu-item > a:hover,
#primary-menu .sub-menu .menu-item > a:hover,
.primary-navigation .sub-menu .current-menu-item > a,
#primary-menu .sub-menu .current-menu-item > a {
	background: #f5f3ef !important;
	color: var(--global-palette1) !important;
}

/* === NAV SPACING + UPPERCASE === */
.primary-navigation .menu-item > a,
#primary-menu .menu-item > a {
	padding-left: 0.85em !important;
	padding-right: 0.85em !important;
	text-transform: uppercase !important;
	letter-spacing: 0.06em !important;
	font-size: 13px !important;
}

/* === SEARCH ICON === */
.site-header-item .header-search-wrap {
	display: inline-flex;
	align-items: center;
}
.header-search-wrap .search-toggle-open {
	width: 38px;
	height: 38px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: transparent;
	border: none;
	cursor: pointer;
	color: var(--global-palette5);
}

/* === SEARCH PANEL === */
.cafe-search-panel {
	position: absolute;
	z-index: 99999;
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 4px 6px -1px rgba(0,0,0,0.07),
	            0 16px 40px -4px rgba(0,0,0,0.13);
	border: 1px solid rgba(0,0,0,0.06);
	padding: 18px 18px 0;
	font-family: var(--global-body-font-family);
}
.cafe-search-title {
	text-align: center;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.18em;
	color: #5c3020;
	margin: 0;
	padding-bottom: 14px;
	text-transform: uppercase;
	font-family: Georgia, 'Times New Roman', serif;
	border-bottom: 1px solid #e8e4de;
}

/* Khung nhập */
.cafe-search-field-wrap {
	display: flex;
	align-items: center;
	background: #fff;
	border: 1px solid #ddd;
	border-radius: 6px;
	overflow: hidden;
	margin-top: 14px;
	margin-bottom: 4px;
	transition: border-color 150ms ease, box-shadow 150ms ease;
}
/* .cafe-search-input tắt outline mặc định (xấu, lệch bo góc khung cha) — bù lại bằng viền sáng
   trên khung bọc khi input được focus, không thì bàn phím không biết đang gõ vào đâu. */
.cafe-search-field-wrap:focus-within {
	border-color: var(--cafe-accent, #8C2318);
	box-shadow: 0 0 0 2px rgba(140, 35, 24, 0.15);
}
.cafe-search-input {
	flex: 1;
	border: none !important;
	outline: none !important;
	box-shadow: none !important;
	padding: 12px 14px;
	font-size: 14px;
	font-family: inherit;
	background: transparent;
	color: var(--cafe-ink);
}
.cafe-search-input::placeholder { color: #aaa; }
.cafe-search-submit {
	flex-shrink: 0;
	background: transparent;
	border: none;
	padding: 0 13px;
	height: 44px;
	cursor: pointer;
	color: #999;
	display: flex;
	align-items: center;
	transition: color 150ms ease;
}
.cafe-search-submit:hover { color: var(--global-palette1); }

/* Kết quả */
.cafe-search-results {
	max-height: 340px;
	overflow-y: auto;
	scrollbar-width: thin;
	scrollbar-color: #d8d5ce transparent;
}
.cafe-search-list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.cafe-search-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px 6px;
	border-radius: 8px;
	margin: 2px 0;
	transition: background 150ms ease;
}
.cafe-search-item:hover { background: #f5f3ef; }
.cafe-search-thumb {
	flex-shrink: 0;
	order: 2;
}
.cafe-search-thumb img {
	width: 46px;
	height: 46px;
	object-fit: cover;
	border-radius: 6px;
	display: block;
	border: 1px solid #ede9e2;
}
.cafe-search-link {
	flex: 1;
	order: 1;
	text-decoration: none;
	color: inherit;
	min-width: 0;
}
.cafe-search-name {
	font-size: 13px;
	font-weight: 500;
	color: var(--cafe-ink);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	line-height: 1.4;
}
.cafe-search-item:hover .cafe-search-name { color: var(--global-palette1); }
.cafe-search-price {
	font-size: 12px;
	color: var(--global-palette6);
	margin-top: 3px;
}

/* Footer "Xem thêm" */
.cafe-search-more {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 12px 0;
	margin: 6px -18px 0;
	font-size: 13px;
	font-weight: 500;
	color: var(--global-palette5);
	text-decoration: none;
	border-top: 1px solid #f0ede8;
	transition: color 150ms ease, background 150ms ease;
	border-radius: 0 0 12px 12px;
}
.cafe-search-more:hover {
	color: var(--global-palette1);
	background: #f5f3ef;
}
.cafe-search-loading,
.cafe-search-empty {
	font-size: 13px;
	color: var(--global-palette6);
	padding: 14px 0;
	margin: 0;
	text-align: center;
}

/* === CART ICON === */
.site-header-item .header-cart-wrap {
	display: inline-flex;
	align-items: center;
}
.header-cart-inner-wrap .header-cart-button {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	text-decoration: none;
	transition: background 180ms ease, color 180ms ease;
}
.header-cart-inner-wrap .header-cart-button:hover {
	background: rgba(43,95,84,0.08);
}
.header-cart-inner-wrap .header-cart-button .kadence-svg-iconset {
	display: flex;
	align-items: center;
	justify-content: center;
}
.header-cart-inner-wrap .header-cart-button .kadence-svg-icon {
	width: 20px;
	height: 20px;
}
/* Badge số lượng */
.header-cart-inner-wrap .header-cart-total {
	position: absolute;
	top: 1px;
	right: 1px;
	min-width: 16px;
	height: 16px;
	padding: 0 4px;
	background: var(--global-palette1);
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	line-height: 16px;
	text-align: center;
	border-radius: 99px;
	border: 1.5px solid #fff;
	pointer-events: none;
}
/* Ẩn badge khi giỏ trống */
.header-cart-inner-wrap .header-cart-total.header-cart-is-empty-true {
	display: none;
}

.button, button, input[type="submit"], .wp-block-button__link,
.woocommerce a.button, .woocommerce button.button {
	border-radius: var(--cafe-radius);
}

/* Thẻ sản phẩm kiểu tem nhãn */
.woocommerce ul.products li.product {
	background: var(--global-palette9);
	border: 1px dashed var(--global-palette7);
	border-radius: var(--cafe-radius);
	padding: 12px;
}

.woocommerce .stock.in-stock { color: var(--cafe-green); }

/* Khung Thông tin hạt (markup do cafe-core in ra) */
.cafe-bean-info {
	margin: 24px 0;
	padding: 16px;
	background: var(--global-palette9);
	border: 1px dashed var(--global-palette2);
	border-radius: var(--cafe-radius);
}
.cafe-bean-info__title { margin: 0 0 8px; font-size: 1.1rem; }
.cafe-bean-info__list { margin: 0; }
.cafe-bean-info__row {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 6px 0;
	border-bottom: 1px dashed var(--global-palette7);
}
.cafe-bean-info__row:last-child { border-bottom: 0; }
.cafe-bean-info dt { margin: 0; font-weight: 600; }
.cafe-bean-info dd { margin: 0; text-align: right; }

.cafe-thankyou-cod {
	margin: 16px 0;
	padding: 16px;
	background: var(--global-palette9);
	border: 1px dashed var(--global-palette2);
	border-radius: var(--cafe-radius);
}

.cafe-thankyou-bacs {
	margin: 16px 0;
	padding: 16px;
	background: var(--global-palette9);
	border: 1px dashed var(--global-palette2);
	border-radius: var(--cafe-radius);
	text-align: center;
}
.cafe-thankyou-bacs p {
	text-align: left;
}
.cafe-thankyou-bacs__qr {
	display: block;
	width: 220px;
	height: 220px;
	margin: 12px auto;
	background: #fff;
	border: 1px solid var(--global-palette7);
	border-radius: var(--cafe-radius);
}
.cafe-thankyou-bacs__info {
	margin: 0;
	padding: 0;
	list-style: none;
	text-align: left;
}
.cafe-thankyou-bacs__info li {
	padding: 4px 0;
}

@media (max-width: 600px) {
	.cafe-bean-info__row { flex-direction: column; gap: 2px; }
	.cafe-bean-info dd { text-align: left; }
}

/* ---- Toàn trang trắng (trừ dark sections) ---- */
#inner-wrap,
#page,
.site,
.wp-site-blocks,
.content-area,
main#primary,
.cafe-cats,
.cafe-best,
.cafe-news {
	background-color: #ffffff !important;
}

/* Shop page header banner — loại bỏ màu beige mặc định của Kadence */
.entry-header.product-archive-title,
.woocommerce-products-header,
.kadence-archive-title-bg,
.woo-archive-description,
.archive-title-bg {
	background-color: #ffffff !important;
	background-image: none !important;
}

/* ---- Section spacing — breathing room cho các section nội dung ---- */
.cafe-cats,
.cafe-best,
.cafe-news,
.cafe-origin {
	padding-top: clamp(48px, 7vw, 88px);
	padding-bottom: clamp(48px, 7vw, 88px);
}
/* Commit gọn hơn — nó là dải accent nhỏ, không phải hero */
.cafe-commit {
	padding-top: clamp(28px, 3.5vw, 48px);
	padding-bottom: clamp(28px, 3.5vw, 48px);
}

/* Hero: heading lớn hơn, tracking chặt hơn, line-height compact */
.cafe-hero h1 {
	font-size: clamp(40px, 5.5vw, 68px) !important;
	line-height: 1.08 !important;
	letter-spacing: -0.03em !important;
	text-wrap: balance;
}

/* Hero: paragraph body rộng hơn một chút, line-height thoáng */
.cafe-hero p {
	font-size: clamp(15px, 1.2vw, 17px);
	line-height: 1.7;
	max-width: 42ch;
}

/* Origin section: heading lớn, dramatic */
.cafe-origin h2 {
	font-size: clamp(36px, 4.5vw, 58px) !important;
	line-height: 1.1 !important;
	letter-spacing: -0.025em !important;
	text-wrap: balance;
}

/* Commit icons: lớn hơn, section thoáng hơn */
.cafe-commit .cafe-icon {
	width: 48px;
	height: 48px;
}
.cafe-commit .kt-blocks-info-box-title {
	font-size: 16px;
	font-weight: 600;
	letter-spacing: -0.01em;
}

/* Category section heading */
.cafe-cats h2,
.cafe-best h2,
.cafe-news h2 {
	font-size: clamp(22px, 2.8vw, 36px) !important;
	letter-spacing: 0.10em !important;
	line-height: 1.2 !important;
}

/* ---- Redesign upgrades ---- */

/* Smooth scroll */
html { scroll-behavior: smooth; }

/* Typography: balance, negative tracking, readable line length */
h1, h2 {
	text-wrap: balance;
	letter-spacing: -0.025em;
	line-height: 1.15;
}
h3, h4, h5, h6 {
	text-wrap: balance;
	letter-spacing: -0.01em;
}
p { text-wrap: pretty; line-height: 1.75; }

/* Giá sản phẩm: tabular numbers để thẳng hàng */
.price, .woocommerce .amount, .woocommerce-Price-amount {
	font-variant-numeric: tabular-nums;
	letter-spacing: 0;
}

/* Button: uppercase, letter-spacing rõ ràng */
.button, button, input[type="submit"], .wp-block-button__link,
.woocommerce a.button, .woocommerce button.button {
	transition: background-color 200ms ease, box-shadow 200ms ease;
	text-transform: uppercase !important;
	letter-spacing: 0.08em !important;
	font-size: 12px !important;
	font-weight: 600;
}
.button:hover, button:hover, input[type="submit"]:hover, .wp-block-button__link:hover,
.woocommerce a.button:hover, .woocommerce button.button:hover {
	box-shadow: inset 0 -3px 0 rgba(0,0,0,0.20);
}
.button:active, button:active, input[type="submit"]:active, .wp-block-button__link:active,
.woocommerce a.button:active, .woocommerce button.button:active {
	transform: scale(0.98);
	box-shadow: none;
}

/* Focus ring — accessibility */
:focus-visible {
	outline: 2px solid var(--global-palette2);
	outline-offset: 3px;
	border-radius: 2px;
}

/* Product card: hover lift với shadow màu men ngọc */
.woocommerce ul.products li.product {
	transition: transform 250ms ease, box-shadow 250ms ease;
}
.woocommerce ul.products li.product:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 28px rgba(43, 95, 84, 0.14);
}

/* Category image hover scale nhẹ */
.cafe-cats .wp-block-image img {
	transition: transform 350ms ease;
}
.cafe-cats .wp-block-image img:hover {
	transform: scale(1.03);
}

/* Nav: highlight trang hiện tại */
.current-menu-item > a,
.current-page-ancestor > a {
	color: var(--global-palette2) !important;
	font-weight: 600;
}

/* ---- Bổ sung Task 16: trang chủ + header ---- */

/* Icon nét mảnh ở dải "3 cam kết" */
.cafe-commit__icon { display: flex; justify-content: center; margin-bottom: 12px; color: var(--global-palette2); }
.cafe-commit__icon .cafe-icon { width: 56px; height: 56px; }

/* Ô danh mục: ảnh cùng tỉ lệ */
.entry-content .cafe-cats .wp-block-image { margin: 0; }
.cafe-cats .wp-block-image img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: var(--cafe-radius);
	padding: 6px;
	background: var(--global-palette9);
}
.cafe-cats h3 a { color: inherit; text-decoration: none; }
.cafe-cats h3 a:hover { color: var(--global-palette2); }

/* Thẻ sản phẩm: bỏ lớp nền thứ hai của Kadence bên trong thẻ; gọn lại trên điện thoại */
.woocommerce ul.products li.product .product-details { background: transparent; }
@media (max-width: 600px) {
	.woocommerce ul.products li.product { padding: 8px; }
	.woocommerce ul.products li.product .product-details { padding: 12px 4px 4px; }
	.woocommerce ul.products li.product .button { width: 100%; padding: 8px 6px; font-size: 15px; }
}

/* Header điện thoại: logo và nút menu cách mép màn hình bằng lề nội dung (mẫu import để lề 0) */
@media (max-width: 1024px) {
	#mobile-header .site-container {
		padding-left: var(--global-content-edge-padding, 1.5rem);
		padding-right: var(--global-content-edge-padding, 1.5rem);
	}
}

/* ---- TASTE-SKILL: Cold Terroir Overhaul ---- */

/* === HERO: Radial glow + massive type === */
.cafe-hero,
.cafe-hero > .wp-block-kadence-rowlayout,
.cafe-hero .kt-row-layout-background,
.cafe-hero .kt-inside-inner-col {
	background-color: #ffffff !important;
}
.cafe-hero {
	position: relative;
	overflow: hidden;
}
.cafe-hero::before {
	content: '';
	position: absolute;
	top: -10%;
	right: -5%;
	width: 55%;
	height: 120%;
	background: radial-gradient(ellipse at 60% 40%,
		rgba(43, 95, 84, 0.08) 0%,
		rgba(43, 95, 84, 0.03) 45%,
		transparent 72%);
	pointer-events: none;
	z-index: 0;
}
.cafe-hero > * { position: relative; z-index: 1; }
.cafe-hero h1 {
	font-size: clamp(52px, 6.5vw, 88px) !important;
	line-height: 1.02 !important;
	letter-spacing: -0.045em !important;
}

/* === COMMIT SECTION: ảnh cà phê làm mờ + lớp phủ celadon đậm, chữ trắng đè lên ===
   Ảnh nền ở assets/images/cafe-commit-bg.jpg, bundle theo theme (không qua Media Library) để
   không phụ thuộc URL upload riêng từng môi trường. Dùng ::before để làm mờ — không filter:
   blur() trực tiếp lên .cafe-commit vì sẽ làm mờ luôn chữ con bên trong. ::after là lớp phủ màu
   celadon đậm (cùng tông đã dùng trước đây) giúp chữ trắng/kem luôn đọc được bất kể ảnh sáng hay
   tối ở từng vùng. */
.cafe-commit {
	position: relative;
	overflow: hidden;
	background-color: #1E4D41 !important; /* màu dự phòng trong lúc ảnh chưa tải */
	background-image: none !important;
	border-top: none !important;
	border-bottom: none !important;
}
/* Kadence đặt display:table cho ::before/::after của mọi khối rowlayout (clearfix cũ, không
   còn cần thiết vì layout hàng giờ dùng CSS grid) — phải ép lại display:block thì vị trí
   absolute mới có kích thước, nếu không bị co về 0x0 như một bảng rỗng không có ô. */
.cafe-commit::before {
	content: '';
	display: block !important;
	position: absolute;
	inset: -16px; /* chờm ra ngoài để vệt mờ ở mép không lộ viền sắc nét */
	background: url("../images/cafe-commit-bg.jpg") center / cover no-repeat;
	filter: blur(6px);
	transform: scale(1.08);
	z-index: 0;
}
.cafe-commit::after {
	content: '';
	display: block !important;
	position: absolute;
	inset: 0;
	background: rgba(20, 54, 46, 0.6);
	z-index: 1;
}
.cafe-commit > .kt-row-column-wrap {
	position: relative;
	z-index: 2;
}
.cafe-commit .kt-row-column-wrap,
.cafe-commit .wp-block-kadence-column,
.cafe-commit p,
.cafe-commit h2, .cafe-commit h3,
.cafe-commit .kt-blocks-info-box-title,
.cafe-commit .kt-blocks-info-box-text {
	color: rgba(240, 232, 216, 0.90) !important;
	font-family: var(--global-body-font-family) !important;
	/* Nền giờ là ảnh (xem .cafe-commit::before) thay vì màu phẳng — thêm bóng đổ nhẹ để chữ
	   luôn đọc được kể cả khi rơi vào vùng sáng của ảnh (quả chín đỏ, lá sáng). */
	text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
}
.cafe-commit .kt-blocks-info-box-title {
	font-weight: 700 !important;
	letter-spacing: 0.02em !important;
	font-size: 15px !important;
	color: #ffffff !important;
}
.cafe-commit .kt-blocks-info-box-text {
	font-weight: 400 !important;
	font-size: 14px !important;
	line-height: 1.65 !important;
	color: rgba(240, 232, 216, 0.75) !important;
}
.cafe-commit .cafe-commit__icon,
.cafe-commit .cafe-icon { color: #D4A96A !important; } /* vàng đồng ấm — nổi trên men ngọc */

/* === SECTION DIVIDER: Gradient line mỏng === */
.cafe-cats,
.cafe-best,
.cafe-news {
	position: relative;
}
.cafe-cats::before,
.cafe-best::before,
.cafe-news::before {
	content: '';
	position: absolute;
	top: 0;
	left: 8%;
	right: 8%;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--global-palette7), transparent);
}

/* === CATEGORY IMAGES: Taller, editorial + sage frame === */
.cafe-cats .wp-block-image img {
	aspect-ratio: 3 / 4 !important;
	border-color: var(--cafe-accent) !important;
}
.cafe-cats h3 a:hover { color: var(--cafe-accent) !important; }

/* === PRODUCT CARDS === */
.woocommerce ul.products li.product {
	border-color: rgba(43, 95, 84, 0.14);
	background: var(--global-palette9);
}
.woocommerce ul.products li.product:hover {
	background: var(--global-palette9) !important;
	/* Không đổi border khi hover card */
	transform: translateY(-4px);
	box-shadow: 0 12px 32px rgba(43,95,84,0.14);
}
.woocommerce ul.products li.product:hover .product-details {
	background: transparent !important;
}

/* === BUTTON "Chọn": outline mặc định, gradient slide từ trái khi hover === */
.woocommerce ul.products li.product a.button,
.woocommerce ul.products li.product button.button {
	background: linear-gradient(to right, var(--global-palette1) 50%, transparent 50%) !important;
	background-size: 200% 100% !important;
	background-position: right center !important;
	color: var(--global-palette1) !important;
	border: 1.5px solid var(--global-palette1) !important;
	box-shadow: none !important;
	transition:
		background-position 360ms cubic-bezier(0.32, 0.72, 0, 1),
		color 280ms ease !important;
}
.woocommerce ul.products li.product a.button:hover,
.woocommerce ul.products li.product button.button:hover {
	background-position: left center !important;
	color: #ffffff !important;
	border-color: var(--global-palette1) !important;
}

/* Product card image placeholder khi chưa load */
.woocommerce ul.products li.product .woocommerce-LoopProduct-link img {
	background: linear-gradient(135deg,
		rgba(43, 95, 84, 0.06) 0%,
		rgba(140, 35, 24, 0.04) 100%);
}

/* === KEYFRAME ANIMATIONS === */
@keyframes cafe-icon-pulse {
	0%, 100% { transform: scale(1); opacity: 1; }
	50% { transform: scale(1.08); opacity: 0.85; }
}
@keyframes cafe-son-glow {
	0%, 100% { box-shadow: 0 0 0 0 rgba(140, 35, 24, 0); }
	50% { box-shadow: 0 0 0 6px rgba(140, 35, 24, 0.12); }
}

/* Commit icons animation — vàng đồng nổi trên men ngọc */
.cafe-commit .cafe-icon {
	animation: cafe-icon-pulse 3s ease-in-out infinite;
	color: #D4A96A !important;
}
.cafe-commit .wp-block-kadence-column:nth-child(2) .cafe-icon {
	animation-delay: 1s;
}
.cafe-commit .wp-block-kadence-column:nth-child(3) .cafe-icon {
	animation-delay: 2s;
}

/* === ORIGIN SECTION: Bigger, more dramatic === */
.cafe-origin h2 {
	font-size: clamp(44px, 5.5vw, 72px) !important;
	letter-spacing: -0.03em !important;
	line-height: 1.06 !important;
}

/* === LINKS & NAV: Copper hover === */
a:hover { color: var(--cafe-accent); }
.cafe-cats h3 a:hover,
.cafe-origin a:hover { color: var(--cafe-accent) !important; }

/* === BEAN INFO BOX: Accent border son đỏ === */
.cafe-bean-info {
	border-color: rgba(140, 35, 24, 0.28) !important;
	border-style: solid !important;
	border-width: 1px !important;
}
.cafe-bean-info__title { color: var(--cafe-accent); }

/* === WOOCOMMERCE STOCK COLOR === */
.woocommerce .stock.in-stock { color: var(--cafe-green); }

/* === FOOTER: Nâu cà phê rang — nhất quán với commit band === */
.site-footer,
.footer-html,
.site-footer .site-footer-row-container-inner {
	background-color: var(--cafe-dark) !important;
	color: #FFFFFF !important;
}
.site-footer a {
	color: rgba(255, 255, 255, 0.85) !important;
}
.site-footer a:hover {
	color: #FFFFFF !important;
}
.site-footer .site-title {
	color: #FFFFFF !important;
}
/* Tên shop ở đầu cột trái footer. Là thẻ h3 nên thừa kế màu tiêu đề tối của Kadence,
   đè lên màu chữ sáng của footer — không có dòng này thì chữ đen trên nền đen. */
.site-footer .cafe-footer-brand,
.site-footer .widget-title {
	color: #FFFFFF !important;
}
/* Kadence mặc định viết hoa .widget-title (text-transform: uppercase) — bỏ riêng ở footer,
   vd. tiêu đề cột "Về chúng tôi". */
.site-footer .widget-title {
	text-transform: none !important;
}

/* Cột "Liên hệ": mỗi dòng có icon ở đầu (địa chỉ / điện thoại / email) */
.cafe-footer-contact__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.6em;
}
.cafe-footer-contact__item {
	display: flex;
	align-items: flex-start;
	gap: 0.6em;
}
.cafe-footer-contact__icon {
	flex: 0 0 auto;
	width: 1.1em;
	height: 1.1em;
	margin-top: 0.15em;
	color: rgba(255, 255, 255, 0.85);
}
.cafe-footer-contact__icon svg {
	width: 100%;
	height: 100%;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.cafe-footer-contact__map-link {
	display: inline-flex;
	align-items: center;
	gap: 0.3em;
	margin-top: 0.9em;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* === CATEGORY IMAGE PLACEHOLDER: men ngọc gradient khi ảnh chưa load === */
.cafe-cats .wp-block-image {
	background: linear-gradient(135deg,
		rgba(43, 95, 84, 0.08) 0%,
		rgba(140, 35, 24, 0.05) 100%);
	border-radius: var(--cafe-radius);
}
.cafe-cats .wp-block-image img {
	min-height: 240px;
}

/* === NAV: Active link màu xanh rừng === */
.current-menu-item > a,
.current-page-ancestor > a,
.site-header a:hover {
	color: var(--cafe-green) !important;
}

/* === WOOCOMMERCE BUTTONS: Son đỏ cho "Thêm vào giỏ" === */
.woocommerce a.button.ajax_add_to_cart,
.woocommerce button.button.alt,
.woocommerce #respond input#submit.alt {
	background-color: var(--cafe-accent) !important;
	color: #F4F1EB !important;
}
.woocommerce a.button.ajax_add_to_cart:hover,
.woocommerce button.button.alt:hover {
	background-color: #6E1A10 !important;
}

/* ---- Soft-skill: Agency-tier upgrades ---- */

/* Grain overlay — fixed, pointer-events-none, không scroll cùng trang */
body::after {
	content: '';
	position: fixed;
	inset: 0;
	z-index: 9998;
	pointer-events: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.12 0 0 0 0 0.18 0 0 0 0 0.16 0 0 0 .028 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}

/* Product cards — không viền, không shadow */
.woocommerce ul.products li.product {
	padding: 0;
	border-radius: 0;
	border: none;
	background: var(--global-palette9);
	box-shadow: none;
	overflow: hidden;
}
.woocommerce ul.products li.product a img {
	border-radius: 0;
	overflow: hidden;
	display: block;
}
.woocommerce ul.products li.product .product-details {
	border-radius: 0;
	background: var(--global-palette9);
	border-top: 1px solid rgba(43, 95, 84, 0.10);
	padding: 14px 16px;
}

/* Premium cubic-bezier thay ease-in-out */
.button, button, input[type="submit"], .wp-block-button__link,
.woocommerce a.button, .woocommerce button.button {
	transition:
		background-color 500ms cubic-bezier(0.32, 0.72, 0, 1),
		transform 400ms cubic-bezier(0.32, 0.72, 0, 1),
		box-shadow 500ms cubic-bezier(0.32, 0.72, 0, 1);
}

/* Eyebrow tag — dùng bằng class .cafe-eyebrow trong Gutenberg */
.cafe-eyebrow {
	display: inline-flex;
	align-items: center;
	padding: 4px 14px;
	border-radius: 9999px;
	font-size: 10px;
	font-family: var(--global-body-font-family);
	text-transform: uppercase;
	letter-spacing: 0.18em;
	font-weight: 500;
	background: rgba(74, 44, 29, 0.07);
	color: var(--global-palette2);
	margin-bottom: 16px;
}

/* Scroll reveal — CSS side (JS thêm class .cafe-reveal và .cafe-revealed) */
.cafe-reveal {
	opacity: 0;
	transform: translateY(28px);
	filter: blur(5px);
	transition:
		opacity  900ms cubic-bezier(0.32, 0.72, 0, 1),
		transform 900ms cubic-bezier(0.32, 0.72, 0, 1),
		filter   700ms cubic-bezier(0.32, 0.72, 0, 1);
	will-change: transform, opacity;
}
.cafe-reveal.cafe-revealed {
	opacity: 1;
	transform: translateY(0);
	filter: blur(0);
}

/* Reduced motion: tắt hoàn toàn animation */
@media (prefers-reduced-motion: reduce) {
	.cafe-reveal {
		opacity: 1 !important;
		transform: none !important;
		filter: none !important;
		transition: none !important;
	}
	html { scroll-behavior: auto; }
}

/* === HERO EYEBROW: Tem nhãn son đỏ — vuông, viền sơn mài === */
.cafe-hero h6.wp-block-kadence-advancedheading {
	display: inline-flex !important;
	align-items: center !important;
	padding: 4px 12px !important;
	border-radius: 2px !important;
	border: 1px solid rgba(140, 35, 24, 0.40) !important;
	background: rgba(140, 35, 24, 0.06) !important;
	font-size: 10px !important;
	font-family: var(--global-body-font-family) !important;
	letter-spacing: 0.22em !important;
	font-weight: 600 !important;
	color: var(--cafe-accent) !important;
	margin-bottom: 20px !important;
}

/* === PRODUCT TITLE: Dùng EB Garamond cho tên sản phẩm === */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--global-heading-font-family) !important;
}

/* === ORIGIN SECTION: Ghost button trên nền ảnh tối === */
.cafe-origin .kb-button,
.cafe-origin a.button {
	background: rgba(240, 241, 236, 0.08) !important;
	color: #F0F1EC !important;
	border: 1.5px solid rgba(240, 241, 236, 0.55) !important;
	border-radius: 6px !important;
	backdrop-filter: blur(6px);
}
.cafe-origin .kb-button:hover,
.cafe-origin a.button:hover {
	background: rgba(240, 241, 236, 0.18) !important;
	border-color: rgba(240, 241, 236, 0.85) !important;
	color: #FFFFFF !important;
}

/* === PRODUCT TITLE === */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-size: clamp(16px, 1.4vw, 20px);
	line-height: 1.25;
	font-weight: 500;
	letter-spacing: 0;
}

/* === CATEGORY CARD: Hover copper glow border === */
.cafe-cats .wp-block-image img {
	transition: transform 350ms cubic-bezier(0.32, 0.72, 0, 1),
	            border-color 300ms ease,
	            box-shadow 300ms ease;
}
.cafe-cats .wp-block-image img:hover {
	border-color: var(--cafe-accent) !important;
	box-shadow: 0 0 0 3px var(--cafe-accent-light);
}

/* === SITE HEADER: nền xanh lá thương hiệu, bỏ viền đứt nét của Kadence, chữ/icon trắng ===
   Viền đứt nét gốc nằm ở .site-header-row-container-inner (theme cha Kadence), không phải
   .site-header. Chỉ đổi màu ở cấp menu chính (#primary-menu > li trực tiếp) và các nút icon —
   dropdown submenu, bảng chọn ngôn ngữ, khung tìm kiếm vẫn nền sáng/chữ tối như cũ nên không
   chạm vào selector lồng trong .sub-menu, tránh chữ trắng trên nền trắng.
   Cùng hiệu ứng nền với .cafe-commit (celadon đậm + hoa văn thổ cẩm trắng mờ) để đồng bộ với
   dải "Vùng cao 700–1.500 m / Chế biến ướt / Sàng 16+" ở trang chủ. */
.site-header {
	background-color: #1E4D41 !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cpath d='M36 4 L68 36 L36 68 L4 36 Z' stroke='%23ffffff' stroke-width='0.8' fill='none' opacity='0.08'/%3E%3Cpath d='M36 18 L54 36 L36 54 L18 36 Z' stroke='%23ffffff' stroke-width='0.6' fill='none' opacity='0.06'/%3E%3Ccircle cx='36' cy='36' r='1.5' fill='%23ffffff' opacity='0.10'/%3E%3Ccircle cx='4' cy='36' r='1' fill='%23ffffff' opacity='0.07'/%3E%3Ccircle cx='68' cy='36' r='1' fill='%23ffffff' opacity='0.07'/%3E%3Ccircle cx='36' cy='4' r='1' fill='%23ffffff' opacity='0.07'/%3E%3Ccircle cx='36' cy='68' r='1' fill='%23ffffff' opacity='0.07'/%3E%3C/svg%3E") !important;
	background-size: 72px 72px !important;
}
.site-header-row-container-inner {
	background-color: transparent !important;
	background-image: none !important;
	border-bottom: none !important;
}

.site-header #primary-menu > li > a,
.site-header .cafe-header-icon,
.site-header .cafe-lang button.cafe-lang__toggle,
.site-header .header-cart-inner-wrap .header-cart-button,
.site-header .search-toggle-open,
.site-header .menu-toggle-open {
	color: #ffffff !important;
}

.site-header #primary-menu > li.current-menu-item > a,
.site-header #primary-menu > li.current-page-ancestor > a,
.site-header #primary-menu > li > a:hover {
	color: #ffffff !important;
}

.site-header .cafe-header-icon:hover,
.site-header .cafe-lang button.cafe-lang__toggle:hover,
.site-header .cafe-lang.is-open button.cafe-lang__toggle,
.site-header .header-cart-inner-wrap .header-cart-button:hover,
.site-header .search-toggle-open:hover,
.site-header .menu-toggle-open:hover {
	color: #ffffff !important;
	background: rgba(255, 255, 255, 0.15) !important;
}

/* === BREADCRUMB: Trên trang cửa hàng / danh mục === */
.cafe-breadcrumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 6px;
	margin-bottom: 24px;
	font-size: 13px;
	font-family: var(--global-body-font-family);
	color: var(--cafe-green);
}
.cafe-breadcrumb__item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.cafe-breadcrumb__item a {
	color: var(--cafe-green);
	text-decoration: none;
	opacity: 0.65;
	transition: opacity 200ms ease;
}
.cafe-breadcrumb__item a:hover {
	opacity: 1;
}
/* Mục cuối — tên trang hiện tại, không có link, đậm hơn */
.cafe-breadcrumb__item:last-of-type {
	color: var(--cafe-ink);
	font-weight: 600;
}
.cafe-breadcrumb__sep {
	opacity: 0.35;
	font-weight: 400;
	user-select: none;
}

/* === NAV ACTIVE: chỉ đổi màu, không gạch dưới === */
.current-menu-item > a,
.current-page-ancestor > a {
	text-decoration: none !important;
}
.current-menu-item > a::after,
.current-page-ancestor > a::after {
	display: none !important;
}

/* ======================================================
   CAFEGIANG STYLE: Section header + Product card
   ====================================================== */

/* --- Section heading: sans-serif uppercase, giống font item sản phẩm — có thanh ngang mờ dần
   hai bên (kiểu "— Tiêu đề —") giống cách trình bày tiêu đề ở mục Thông tin (.cafe-doc__heading).
   display:flex khiến text node và 2 pseudo-element tự thành flex item, canh giữa mà không cần
   bọc thêm <span> trong nội dung Kadence. Phải loại trừ .woocommerce-loop-product__title vì
   WooCommerce cũng in tên sản phẩm bằng thẻ h2, và .cafe-best bọc luôn cả lưới sản phẩm —
   không có :not() thì tên từng sản phẩm cũng bị ăn thanh ngang theo. */
.cafe-best h2:not(.woocommerce-loop-product__title),
.cafe-cats h2:not(.woocommerce-loop-product__title),
.cafe-cats-header h2:not(.woocommerce-loop-product__title),
.cafe-news h2:not(.woocommerce-loop-product__title) {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 20px !important;
	font-family: var(--global-body-font-family) !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.10em !important;
	line-height: 1.2 !important;
	text-align: center !important;
	margin-bottom: 8px !important;
}
.cafe-best h2:not(.woocommerce-loop-product__title)::before,
.cafe-cats h2:not(.woocommerce-loop-product__title)::before,
.cafe-cats-header h2:not(.woocommerce-loop-product__title)::before,
.cafe-news h2:not(.woocommerce-loop-product__title)::before,
.cafe-best h2:not(.woocommerce-loop-product__title)::after,
.cafe-cats h2:not(.woocommerce-loop-product__title)::after,
.cafe-cats-header h2:not(.woocommerce-loop-product__title)::after,
.cafe-news h2:not(.woocommerce-loop-product__title)::after {
	content: '';
	flex: 1 1 64px;
	min-width: 16px;
	height: 2px;
	border-radius: 1px;
}
.cafe-best h2:not(.woocommerce-loop-product__title)::before,
.cafe-cats h2:not(.woocommerce-loop-product__title)::before,
.cafe-cats-header h2:not(.woocommerce-loop-product__title)::before,
.cafe-news h2:not(.woocommerce-loop-product__title)::before {
	background: linear-gradient(90deg, transparent, var(--cafe-accent, #8C2318) 85%);
}
.cafe-best h2:not(.woocommerce-loop-product__title)::after,
.cafe-cats h2:not(.woocommerce-loop-product__title)::after,
.cafe-cats-header h2:not(.woocommerce-loop-product__title)::after,
.cafe-news h2:not(.woocommerce-loop-product__title)::after {
	background: linear-gradient(90deg, var(--cafe-accent, #8C2318) 15%, transparent);
}
@media (max-width: 480px) {
	.cafe-best h2:not(.woocommerce-loop-product__title),
	.cafe-cats h2:not(.woocommerce-loop-product__title),
	.cafe-cats-header h2:not(.woocommerce-loop-product__title),
	.cafe-news h2:not(.woocommerce-loop-product__title) {
		gap: 12px !important;
	}
	.cafe-best h2:not(.woocommerce-loop-product__title)::before,
	.cafe-cats h2:not(.woocommerce-loop-product__title)::before,
	.cafe-cats-header h2:not(.woocommerce-loop-product__title)::before,
	.cafe-news h2:not(.woocommerce-loop-product__title)::before,
	.cafe-best h2:not(.woocommerce-loop-product__title)::after,
	.cafe-cats h2:not(.woocommerce-loop-product__title)::after,
	.cafe-cats-header h2:not(.woocommerce-loop-product__title)::after,
	.cafe-news h2:not(.woocommerce-loop-product__title)::after {
		flex-basis: 20px;
		min-width: 10px;
	}
}

/* Eyebrow label phía trên heading section */
.cafe-best h6,
.cafe-cats h6,
.cafe-cats-header h6,
.cafe-news h6,
.cafe-best .cafe-eyebrow-text,
.cafe-cats .cafe-eyebrow-text {
	font-family: var(--global-body-font-family) !important;
	font-size: 10px !important;
	font-weight: 700 !important;
	letter-spacing: 0.28em !important;
	text-transform: uppercase !important;
	color: var(--global-palette1) !important;
	text-align: center !important;
	margin-bottom: 10px !important;
}

/* Tên danh mục (h3): UPPERCASE + sans-serif + letter-spaced — 14px (trước là 11px): tiêu đề đang
   nhỏ hơn cả mô tả bên dưới nó (13px), ngược thứ bậc đọc. */
.cafe-cats h3,
.cafe-cats h3 a {
	font-family: var(--global-body-font-family) !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	letter-spacing: 0.14em !important;
	text-transform: uppercase !important;
	line-height: 1.4 !important;
	color: var(--cafe-ink) !important;
	margin-bottom: 4px !important;
}
.cafe-cats h3 a:hover {
	color: var(--global-palette1) !important;
}

/* Mô tả dưới tên danh mục: giữ lowercase, nhỏ, mờ */
.cafe-cats p {
	font-family: var(--global-body-font-family) !important;
	font-size: 13px !important;
	color: var(--global-palette6) !important;
	line-height: 1.55 !important;
	margin-top: 4px !important;
}

/* --- Product card: không viền, không shadow --- */
.woocommerce ul.products li.product {
	padding: 0 !important;
	border: none !important;
	box-shadow: none !important;
	border-radius: 0 !important;
	overflow: hidden;
	position: relative;
}

/* Wrapper ảnh: full width, không padding */
.woocommerce ul.products li.product .woocommerce-LoopProduct-link {
	display: block;
}
.woocommerce ul.products li.product .woocommerce-LoopProduct-link img {
	width: 100% !important;
	aspect-ratio: 4 / 4.5;
	object-fit: contain;
	background: #faf8f5;
	padding: 16px;
	display: block;
}

/* Phần nội dung dưới ảnh */
.woocommerce ul.products li.product .product-details {
	background: #ffffff !important;
	border-top: none !important;
	padding: 14px 16px 16px !important;
}

/* Tên sản phẩm: UPPERCASE + letter-spaced + sans-serif + căn giữa — 13px (trước là 11.5px): tên
   sản phẩm là nội dung chính khách cần đọc để chọn mua, không nên nhỏ hơn giá tiền (15px) bên dưới. */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--global-body-font-family) !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	letter-spacing: 0.12em !important;
	text-transform: uppercase !important;
	text-align: center !important;
	line-height: 1.4 !important;
	color: var(--cafe-ink) !important;
	margin-bottom: 6px !important;
}

/* Giá: amber/vàng nâu, căn giữa, 1 dòng */
.woocommerce ul.products li.product .price {
	display: block !important;
	text-align: center !important;
	width: 100% !important;
	margin-bottom: 12px !important;
	white-space: nowrap !important;
	line-height: 1.4 !important;
}
.woocommerce ul.products li.product .price .woocommerce-Price-amount,
.woocommerce ul.products li.product .price ins .woocommerce-Price-amount,
.woocommerce ul.products li.product .price del .woocommerce-Price-amount {
	color: var(--global-palette1) !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	letter-spacing: 0.02em !important;
	display: inline !important;
}
.woocommerce ul.products li.product .price del {
	opacity: 0.5;
	margin-right: 6px;
}
.woocommerce ul.products li.product .price ins {
	text-decoration: none;
}

/* Button: outlined full-width với mũi tên → */
.woocommerce ul.products li.product a.button,
.woocommerce ul.products li.product button.button {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 8px !important;
	width: 100% !important;
	background: transparent !important;
	background-image: none !important;
	color: var(--cafe-ink) !important;
	border: 1px solid rgba(26, 16, 10, 0.5) !important;
	border-radius: 2px !important;
	padding: 9px 14px !important;
	font-family: var(--global-body-font-family) !important;
	font-size: 10px !important;
	font-weight: 700 !important;
	letter-spacing: 0.18em !important;
	text-transform: uppercase !important;
	transition: background-color 220ms ease, color 220ms ease, border-color 220ms ease !important;
	box-shadow: none !important;
}
.woocommerce ul.products li.product a.button::after,
.woocommerce ul.products li.product button.button::after {
	content: '→';
	font-size: 13px;
	font-weight: 400;
	letter-spacing: 0;
	line-height: 1;
	transition: transform 220ms ease;
}
.woocommerce ul.products li.product a.button:hover,
.woocommerce ul.products li.product button.button:hover,
.woocommerce ul.products li.product:hover a.button,
.woocommerce ul.products li.product:hover button.button {
	background: var(--cafe-ink) !important;
	color: #ffffff !important;
	border-color: var(--cafe-ink) !important;
	background-position: unset !important;
}
.woocommerce ul.products li.product a.button:hover::after,
.woocommerce ul.products li.product button.button:hover::after,
.woocommerce ul.products li.product:hover a.button::after,
.woocommerce ul.products li.product:hover button.button::after {
	transform: translateX(3px);
}

/* Badge "Hết hàng" / "Out of stock": dark badge góc trên trái */
.woocommerce ul.products li.product .woocommerce-badge,
.woocommerce ul.products li.product .onsale,
.woocommerce span.onsale {
	position: absolute !important;
	top: 10px !important;
	left: 10px !important;
	right: auto !important;
	bottom: auto !important;
	background: #1E1008 !important;
	color: #ffffff !important;
	font-family: var(--global-body-font-family) !important;
	font-size: 10px !important;
	font-weight: 700 !important;
	letter-spacing: 0.08em !important;
	text-transform: uppercase !important;
	padding: 4px 10px !important;
	border-radius: 2px !important;
	border: none !important;
	min-height: unset !important;
	line-height: 1.5 !important;
	width: auto !important;
	min-width: unset !important;
}

/* Badge "Hết hàng" WooCommerce out-of-stock: thêm class woo thêm vào .product */
.woocommerce ul.products li.product.outofstock::before {
	content: 'Hết hàng';
	position: absolute;
	top: 10px;
	left: 10px;
	background: #1E1008;
	color: #ffffff;
	font-family: var(--global-body-font-family);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 4px 10px;
	border-radius: 2px;
	z-index: 3;
	line-height: 1.5;
}

/* Card hover: không shadow, không lift */
.woocommerce ul.products li.product:hover {
	transform: none !important;
	box-shadow: none !important;
}

/* === WOOCOMMERCE NOTICES: "Đã thêm vào giỏ" === */
.woocommerce-message,
.woocommerce-info,
.woocommerce-notices-wrapper .woocommerce-message,
.woocommerce-notices-wrapper .woocommerce-info {
	background-color: #ffffff !important;
	color: var(--cafe-ink) !important;
	border-top: none !important;
	border-right: none !important;
	border-bottom: none !important;
	border-left: 3px solid var(--global-palette1) !important;
	box-shadow: 0 2px 12px rgba(26, 16, 10, 0.08) !important;
	border-radius: 2px !important;
	font-family: var(--global-body-font-family) !important;
	font-size: 14px !important;
}
.woocommerce-message::before,
.woocommerce-info::before {
	color: var(--global-palette1) !important;
}
/* Button "View Cart" / "Xem giỏ hàng" bên trong notice */
.woocommerce-message .button,
.woocommerce-message a.button,
.woocommerce-info .button,
.woocommerce-info a.button {
	background: var(--global-palette1) !important;
	color: #ffffff !important;
	border: none !important;
	border-radius: 2px !important;
	padding: 8px 18px !important;
	font-size: 10px !important;
	font-weight: 700 !important;
	letter-spacing: 0.14em !important;
	text-transform: uppercase !important;
	box-shadow: none !important;
}
.woocommerce-message .button:hover,
.woocommerce-message a.button:hover,
.woocommerce-info .button:hover,
.woocommerce-info a.button:hover {
	background: var(--global-palette2) !important;
	color: #ffffff !important;
}

/* Mobile responsive */
@media (max-width: 600px) {
	.woocommerce ul.products li.product .woocommerce-loop-product__title {
		font-size: 12px !important;
	}
	.woocommerce ul.products li.product .price {
		font-size: 14px !important;
	}
}

/* === NÚT LIÊN HỆ NỔI (góc phải dưới) ===
   Markup do cafe-core/includes/contact-float dựng. z-index 9999 để nằm trên lớp
   vân giấy (9998); dưới bảng tìm kiếm (99999, position absolute nên không chạm nhau). */
.cafe-float {
	position: fixed;
	right: 16px;
	bottom: 16px;
	z-index: 9999;
	display: flex;
	flex-direction: column-reverse; /* nút đầu tiên (gọi điện) nằm dưới cùng, gần ngón tay nhất */
	gap: 10px;
	align-items: flex-end;
}

.cafe-float__link {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: flex-end; /* icon neo bên phải; nút nở sang trái khi rê chuột */
	width: 48px;
	height: 48px;
	padding: 0 12px;
	border-radius: 999px;
	background: #fff;
	text-decoration: none;
	/* Viền mảnh vẽ bằng inset shadow để nút trắng vẫn tách khỏi nền sáng mà không
	   cộng thêm vào 48px như border. */
	box-shadow: 0 4px 14px rgba(26, 16, 10, 0.22), inset 0 0 0 1px rgba(26, 16, 10, 0.10);
	overflow: hidden;
	white-space: nowrap;
	transition: width 0.25s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

.cafe-float__link:hover,
.cafe-float__link:focus-visible {
	box-shadow: 0 6px 18px rgba(26, 16, 10, 0.26), inset 0 0 0 1px rgba(26, 16, 10, 0.14);
}

/* Nút nền trắng nên viền focus phải tối, không dùng palette8 (trắng) như trước. */
.cafe-float__link:focus-visible {
	outline: 3px solid var(--cafe-ink, #1A100A);
	outline-offset: 2px;
}

.cafe-float__icon {
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
}

/* Đặt tuyệt đối để chữ không chiếm chỗ trong flex — nếu để trong dòng chảy, dù opacity 0
   nó vẫn đẩy icon tràn khỏi vùng nhìn thấy của nút tròn 48px. */
.cafe-float__text {
	position: absolute;
	right: 48px;
	font-size: 15px;
	font-weight: 600;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.15s ease;
}

/* Nút nền trắng: icon tự mang màu thương hiệu (fill cứng trong SVG), còn `color`
   chỉ điều khiển chữ nhãn — đặt đậm hơn icon để chữ 15px đạt tương phản 4.5:1.
   Bề rộng khi bung đặt riêng theo độ dài nhãn để chữ không bị cắt hay thừa chỗ. */
.cafe-float__link--phone    { color: #2E7D32; --cafe-float-width: 182px; }
.cafe-float__link--zalo     { color: #0068FF; --cafe-float-width: 148px; }
.cafe-float__link--facebook { color: #1266D8; --cafe-float-width: 148px; }

/* Hover tô nền một sắc rất nhạt cùng tông để nút phản hồi mà icon không bị chìm.
   Màu chữ phải khai lại ở đây: `a:hover` bên trên có độ ưu tiên 0,1,1, cao hơn
   selector class 0,1,0, nếu bỏ qua thì nhãn bung ra bị nhuộm đỏ --cafe-accent. */
.cafe-float__link--phone:hover,
.cafe-float__link--phone:focus-visible { color: #2E7D32; background: #F1F8F1; }
.cafe-float__link--zalo:hover,
.cafe-float__link--zalo:focus-visible { color: #0068FF; background: #EFF5FF; }
.cafe-float__link--facebook:hover,
.cafe-float__link--facebook:focus-visible { color: #1266D8; background: #F0F6FE; }

/* Chỉ bung chữ trên thiết bị có con trỏ thật; trên điện thoại giữ nguyên icon tròn. */
@media (hover: hover) and (pointer: fine) {
	.cafe-float__link:hover,
	.cafe-float__link:focus-visible {
		width: var(--cafe-float-width, 180px);
	}
	.cafe-float__link:hover .cafe-float__text,
	.cafe-float__link:focus-visible .cafe-float__text {
		opacity: 1;
	}
}

/* Người dùng tắt hiệu ứng chuyển động thì bỏ transition, chữ hiện ngay. */
@media (prefers-reduced-motion: reduce) {
	.cafe-float__link,
	.cafe-float__text {
		transition: none;
	}
}

/* === KHỐI THU GỌN / MỞ RỘNG (dải "Vùng trồng" ở trang chủ) ===
   Dùng <details> thuần nên không cần JS và vẫn mở được khi trình duyệt tìm chữ bên trong.
   Markup là khối wp:html, không thừa kế palette của block Kadence bên cạnh, mà dải này
   nền tối (overlay palette3) nên phải tự đặt màu chữ sáng. */
.cafe-more {
	max-width: 760px;
	margin: 0 auto 28px;
	text-align: center;
}

.cafe-more__toggle {
	display: inline-flex; /* cũng là cách bỏ dấu tam giác mặc định của summary */
	align-items: center;
	gap: 8px;
	padding-bottom: 4px;
	cursor: pointer;
	list-style: none;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--global-palette7, #D9C3A5);
	border-bottom: 1px solid currentColor;
}
.cafe-more__toggle::-webkit-details-marker { display: none; }

/* Mũi tên vẽ bằng hai cạnh viền, xoay 180° khi mở. */
.cafe-more__toggle::after {
	content: "";
	width: 7px;
	height: 7px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	transition: transform 0.2s ease;
}
.cafe-more[open] .cafe-more__toggle::after {
	transform: translateY(1px) rotate(225deg);
}

.cafe-more__toggle:hover,
.cafe-more__toggle:focus-visible {
	color: var(--global-palette9, #FFFBF5);
}
.cafe-more__toggle:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 4px;
}

/* Đoạn dài căn trái dễ đọc hơn, dù cả dải đang căn giữa. */
.cafe-more__body {
	margin-top: 24px;
	text-align: left;
}
.cafe-more__body p {
	margin: 0 0 16px;
	font-size: 16px;
	line-height: 1.75;
	color: var(--global-palette8, #F5EDE0);
}
.cafe-more__body p:last-child {
	margin-bottom: 0;
}

@media (prefers-reduced-motion: reduce) {
	.cafe-more__toggle::after { transition: none; }
}

/* === MỤC THÔNG TIN (/thong-tin/ + 4 trang con) ===
   Markup do các hàm cafe_info_*_content() trong scripts/seed/helpers.php dựng — xem
   cafe_sync_info_pages(). 4 trang con trình bày dạng bài viết đơn giản: chỉ 2 kiểu chữ —
   tiêu đề (.cafe-doc__heading cho H2 của trang, .cafe-doc__subheading cho H3 tiểu mục/bước/
   bảng bên trong) và nội dung (.cafe-doc__text cho mọi đoạn văn, kể cả trong bảng). Không có
   khối thẻ/số liệu/badge trang trí riêng cho từng mục — bảng (.cafe-doc__table) chỉ là một
   cách trình bày dữ liệu có cấu trúc, không phải một kiểu chữ khác. Trang hub (điều hướng,
   không phải bài viết) vẫn dùng khối thẻ .cafe-hub riêng. Chữ nội dung (không tính eyebrow màu
   accent) cố tình đặt màu đen thuần #000 thay vì màu "ink" nâu đậm dùng chung cho cả site. */
.cafe-doc {
	max-width: 760px;
	margin: 0 auto;
}
.cafe-doc + .cafe-gallery,
.cafe-doc + .cafe-hub,
.cafe-hub + .cafe-doc,
.cafe-doc + .cafe-doc__list {
	margin-top: clamp(40px, 6vw, 72px);
}

.cafe-doc__eyebrow {
	margin: 0 0 10px;
	font-family: var(--global-heading-font-family);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	text-align: center;
	color: #000;
}

/* Tiêu đề trang căn giữa, có thanh ngang mờ dần hai bên (kiểu "— Tiêu đề —") cho nổi bật — chữ
   vẫn là một <h2> thường, hai thanh dựng bằng ::before/::after nên không cần sửa PHP. Dùng flex
   vì text node và 2 pseudo-element tự động trở thành flex item, canh giữa mà không cần bọc
   thêm <span>. */
.cafe-doc__heading {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 20px;
	margin: 0 0 20px;
	font-family: var(--global-heading-font-family);
	font-weight: 700;
	font-size: clamp(22px, 2.6vw, 30px);
	line-height: 1.2;
	letter-spacing: -0.02em;
	text-align: center;
	text-wrap: balance;
	color: #000;
}
.cafe-doc__heading::before,
.cafe-doc__heading::after {
	content: '';
	flex: 1 1 64px;
	min-width: 16px;
	height: 2px;
	border-radius: 1px;
}
.cafe-doc__heading::before {
	background: linear-gradient(90deg, transparent, var(--cafe-accent, #8C2318) 85%);
}
.cafe-doc__heading::after {
	background: linear-gradient(90deg, var(--cafe-accent, #8C2318) 15%, transparent);
}
@media (max-width: 480px) {
	.cafe-doc__heading {
		gap: 12px;
	}
	.cafe-doc__heading::before,
	.cafe-doc__heading::after {
		flex-basis: 20px;
		min-width: 10px;
	}
}

/* Trang Cửa hàng + từng trang danh mục sản phẩm: bỏ khối nền nâu be (theme mod "product_background"
   của Kadence, tô cho .entry-hero-container-inner) hai bên khung tiêu đề — chỉ 2 trang này có khối
   hero riêng nên không ảnh hưởng trang khác. */
.entry-hero-container-inner {
	background: none !important;
}

/* Tiêu đề trang Liên hệ, Cửa hàng và từng trang danh mục sản phẩm ("Cà phê sạch", "Cà phê chất
   lượng cao"...): dùng chung thanh ngang mờ dần hai bên như .cafe-doc__heading cho đồng bộ. Trang
   danh mục/Cửa hàng đều dùng chung cấu trúc .entry-header.product-archive-title của WooCommerce
   nên một rule áp hết; trang Liên hệ là page thường nên phải nhắm riêng qua .page-lien-he (xem
   filter body_class trong functions.php). Bắt buộc có width:100% — thiếu nó, h1 (giờ là flex
   container) tự co theo kiểu shrink-to-fit, và với tiêu đề dài (vd. "Cà phê chất lượng cao") trình
   duyệt tính kích thước "vừa khít nội dung" hụt đúng vài px so với một dòng chữ, khiến chữ bị xuống
   dòng giữa chừng và 2 thanh ngang bị đẩy ra lưng chừng khối chữ 2 dòng, trông sai; width:100% bỏ
   hẳn kiểu co này, trả h1 về full chiều rộng khối cha. */
.entry-header.product-archive-title .archive-title,
.page-lien-he .entry-header.page-title .entry-title {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 20px;
	width: 100%;
	text-align: center;
}
.entry-header.product-archive-title .archive-title::before,
.entry-header.product-archive-title .archive-title::after,
.page-lien-he .entry-header.page-title .entry-title::before,
.page-lien-he .entry-header.page-title .entry-title::after {
	content: '';
	flex: 1 1 64px;
	min-width: 16px;
	height: 2px;
	border-radius: 1px;
}
.entry-header.product-archive-title .archive-title::before,
.page-lien-he .entry-header.page-title .entry-title::before {
	background: linear-gradient(90deg, transparent, var(--cafe-accent, #8C2318) 85%);
}
.entry-header.product-archive-title .archive-title::after,
.page-lien-he .entry-header.page-title .entry-title::after {
	background: linear-gradient(90deg, var(--cafe-accent, #8C2318) 15%, transparent);
}
@media (max-width: 480px) {
	.entry-header.product-archive-title .archive-title,
	.page-lien-he .entry-header.page-title .entry-title {
		gap: 12px;
	}
	.entry-header.product-archive-title .archive-title::before,
	.entry-header.product-archive-title .archive-title::after,
	.page-lien-he .entry-header.page-title .entry-title::before,
	.page-lien-he .entry-header.page-title .entry-title::after {
		flex-basis: 20px;
		min-width: 10px;
	}
}

/* Tiêu đề tiểu mục trong một trang con (vd. "Nốt thảo quả", từng bước sản xuất, tên mỗi bảng
   mã sản phẩm) — cùng một kiểu cho mọi trường hợp, không có biến thể riêng theo ngữ cảnh. */
.cafe-doc__subheading {
	margin: 2em 0 0.75em;
	font-family: var(--global-heading-font-family);
	font-weight: 700;
	font-size: 19px;
	line-height: 1.3;
	letter-spacing: -0.01em;
	color: #000;
}
.cafe-doc__subheading:first-child {
	margin-top: 0;
}

/* Nội dung (đoạn văn, ô bảng, mục danh sách, caption ảnh) dùng chung font EB Garamond với tiêu
   đề — chỉ khác ở độ đậm (font-weight thường, không set riêng vì mặc định của p/td/li đã là
   400) để 2 kiểu chữ của trang chỉ phân biệt bằng đậm/nhạt, không phải bằng font khác nhau. */
.cafe-doc__lead,
.cafe-doc__text {
	margin: 0;
	font-family: var(--global-heading-font-family);
	font-size: 21px;
	line-height: 1.8;
	color: #000;
}
.cafe-doc__text + .cafe-doc__text {
	margin-top: 1em;
}

/* Bảng tra cứu (mục "Mẫu mã sản phẩm") — chữ trong bảng dùng cùng cỡ/màu với .cafe-doc__text,
   chỉ khác cách trình bày dạng lưới; không có badge hay màu riêng cho ký hiệu. */
.cafe-doc__table {
	width: 100%;
	border-collapse: collapse;
	font-family: var(--global-heading-font-family);
	font-size: 21px;
	line-height: 1.6;
}
.cafe-doc__table th,
.cafe-doc__table td {
	padding: 10px 12px 10px 0;
	text-align: left;
	color: #000;
	border-bottom: 1px dashed var(--global-palette7, #D9C3A5);
}
.cafe-doc__table th {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	border-bottom: 1px solid var(--global-palette7, #D9C3A5);
}
.cafe-doc__table th:first-child,
.cafe-doc__table td:first-child {
	font-weight: 600;
	white-space: nowrap;
}
.cafe-doc__table tr:last-child td {
	border-bottom: none;
}
@media (max-width: 600px) {
	.cafe-doc__table {
		font-size: 18px;
	}
	.cafe-doc__table th,
	.cafe-doc__table td {
		padding: 8px 6px 8px 0;
	}
}

/* ---- Lưới ảnh thực tế vùng trồng (mục "Thông tin vùng nguyên liệu") ---- */
.cafe-gallery {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	/* .cafe-gallery figure mặc định được grid kéo giãn bằng align-items:stretch — nếu không
	   tắt, figure bị kéo cao bằng hàng cao nhất (chỉ tính theo ảnh, vì img height:100% tạo
	   tham chiếu vòng với figure nên không được tính vào chiều cao hàng), còn figcaption lại
	   nằm ngoài phần đã kéo giãn đó nên đè lên ảnh ở hàng dưới. Để start, mỗi figure chỉ cao
	   bằng đúng nội dung thật của nó (ảnh + caption). */
	align-items: start;
	gap: 20px;
	max-width: 760px;
	margin: 0 auto;
	padding: 0;
	list-style: none;
}
.cafe-gallery figure {
	margin: 0;
}
.cafe-gallery img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border: 1px dashed var(--global-palette7, #D9C3A5);
	border-radius: var(--cafe-radius, 2px);
	background: #fff;
}
.cafe-gallery figcaption {
	margin-top: 8px;
	font-family: var(--global-heading-font-family);
	font-size: 18px;
	line-height: 1.5;
	color: #000;
	opacity: 0.75;
}
@media (max-width: 600px) {
	.cafe-gallery {
		grid-template-columns: 1fr;
	}
}

/* ---- Danh sách ứng dụng B2B (mục "Định vị thị trường") ---- */
.cafe-doc__list {
	max-width: 760px;
	margin: 0 auto;
	padding: 0;
	list-style: none;
}
.cafe-doc__list li {
	position: relative;
	padding: 16px 0 16px 22px;
	border-top: 1px dashed var(--global-palette7, #D9C3A5);
	font-family: var(--global-heading-font-family);
	font-size: 20px;
	line-height: 1.7;
	color: #000;
}
.cafe-doc__list li:last-child {
	border-bottom: 1px dashed var(--global-palette7, #D9C3A5);
}
.cafe-doc__list li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 23px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--cafe-accent, #8C2318);
}

/* ---- 4 thẻ điều hướng trên trang tổng /thong-tin/ ---- */
.cafe-hub {
	display: grid;
	/* auto-fit thay vì số cột cố định: còn 3 thẻ (trước gộp "Quá trình sản xuất" vào "Phương
	   pháp chế biến" thì có 4) nên để tự xếp 1 hàng trên màn rộng, không cần sửa CSS mỗi lần
	   số thẻ đổi. */
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 20px;
	max-width: 860px;
	margin: 0 auto;
}
.cafe-hub__card {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: clamp(24px, 3vw, 32px);
	background: #FBF7F0;
	border: 1px dashed var(--global-palette7, #D9C3A5);
	border-radius: var(--cafe-radius, 2px);
	text-decoration: none;
	transition: border-color 220ms ease, transform 220ms ease;
}
.cafe-hub__card:hover {
	border-style: solid;
	border-color: var(--cafe-accent, #8C2318);
	transform: translateY(-2px);
}
.cafe-hub__num {
	font-family: "EB Garamond", Georgia, serif;
	font-size: 22px;
	line-height: 1;
	color: #000;
	opacity: 0.6;
}
.cafe-hub__title {
	font-size: 19px;
	font-weight: 600;
	letter-spacing: -0.01em;
	line-height: 1.3;
	color: #000;
}
.cafe-hub__teaser {
	font-size: 14px;
	line-height: 1.6;
	color: #000;
	opacity: 0.8;
}
.cafe-hub__more {
	margin-top: auto;
	padding-top: 8px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: #000;
}
@media (max-width: 600px) {
	.cafe-hub {
		grid-template-columns: 1fr;
	}
}

/* === TRANG GIẤY CHỨNG NHẬN ĐĂNG KÝ KINH DOANH ===
   Markup do cafe_license_page_content() trong scripts/seed/helpers.php dựng. */
.cafe-cert {
	max-width: 860px;
	margin: 0 auto;
}

.cafe-cert__img {
	display: block;
	width: 100%;
	height: auto;
	border: 1px dashed var(--global-palette7, #D9C3A5);
	border-radius: var(--cafe-radius, 2px);
	background: #fff;
}

.cafe-cert__cap {
	margin-top: 20px;
	text-align: left;
}

.cafe-cert__facts {
	margin: 0 0 8px;
	font-size: 15px;
	line-height: 1.7;
	opacity: 0.85;
}

.cafe-cert__source {
	margin: 0;
	font-size: 14px;
	opacity: 0.75;
}

/* === TRANG TIN TỨC (/tin-tuc/) VÀ CHI TIẾT BÀI VIẾT ===
   Markup do theme cha Kadence render cho post_type=post — không có template riêng trong
   cafe-child. Bố cục (sidebar trái, 1 cột, ảnh-trái/chữ-phải) đến từ theme mod Kadence
   (post_archive_*), set trong scripts/setup/blog-layout.php — phần dưới đây chỉ chỉnh màu/kiểu
   chữ theo ngôn ngữ thiết kế của site. Xem
   docs/superpowers/specs/2026-10-09-blog-card-redesign-design.md và
   docs/superpowers/specs/2026-10-09-blog-archive-sidebar-list-design.md để biết DOM gốc và
   quyết định thiết kế. */

/* Ẩn dòng "By" — user Admin chưa đặt display name nên Kadence in ra link tác giả rỗng, chỉ
   giữ lại ngày đăng. Áp dụng cho danh sách và trang chi tiết; sidebar "Bài viết mới nhất" đã tự
   tắt author qua thuộc tính "author":false của block kadence/posts nên không cần CSS riêng. */
.post-archive .entry-meta .posted-by,
.single-post .entry-meta .posted-by {
	display: none;
}

/* Nhãn chuyên mục màu đỏ accent thay vì teal mặc định — khớp eyebrow ở trang Thông tin
   (.cafe-doc__eyebrow). Áp cả cho sidebar (#secondary) vì widget "Bài viết mới nhất" nằm ngoài
   .post-archive nên không tự nhận style này — đã xác nhận qua computed style trước khi thêm rule
   này (sidebar đang là teal mặc định của Kadence, khác màu danh sách chính). */
.post-archive .entry-taxonomies .category-links a,
.single-post .entry-taxonomies .category-links a,
#secondary .entry-taxonomies .category-links a {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--cafe-accent, #8C2318);
}

/* Danh sách 1 cột: không dùng khung "tem nhãn" (nền kem/viền đứt nét) nữa, và không dùng cả
   đường kẻ phân cách — chỉ cách nhau bằng khoảng trắng, giống ảnh tham khảo (không viền, không
   đường kẻ, mỗi bài là một khối độc lập trên nền trắng). .post-archive là CSS grid nên
   margin-bottom trên article (nằm trong li) không tạo khoảng cách giữa các hàng — grid item
   không "tràn" margin ra ngoài ô của nó như block thường. Khoảng cách phải đặt bằng row-gap của
   chính grid, không phải margin trên phần tử con. */
.post-archive {
	row-gap: 8px;
}

/* Kadence mặc định có padding-top 32px cho phần chữ (.entry-content-wrap) — hợp lý khi ảnh nằm
   phía trên, nhưng với layout ảnh-trái/chữ-phải thì ảnh không có khoảng đệm tương ứng, làm chữ
   bị đẩy xuống thấp hơn ảnh. Bỏ padding-top để ảnh và chữ căn top bằng nhau, giữ nguyên 3 cạnh
   còn lại (khoảng cách với ảnh/mép phải/phía dưới). Áp cả cho sidebar (#secondary) vì widget
   "Bài viết mới nhất" dùng cùng markup entry-content-wrap nhưng nằm ngoài .post-archive. */
.post-archive article.loop-entry .entry-content-wrap,
#secondary article.loop-entry .entry-content-wrap {
	padding-top: 0;
}

/* Bỏ đổ bóng mặc định của Kadence (.content-bg) cho từng bài — cả danh sách chính lẫn sidebar
   "Bài viết mới nhất" — không hợp với tinh thần phẳng, không viền/không bóng đã chọn cho khối
   này. */
.post-archive article.loop-entry,
#secondary article.loop-entry {
	box-shadow: none;
}

.post-archive .entry-title a {
	font-family: var(--global-heading-font-family);
	font-size: 22px;
	line-height: 1.3;
	color: var(--cafe-ink, #1A100A);
}
.post-archive .entry-title a:hover {
	color: var(--cafe-accent, #8C2318);
}

.post-archive .entry-meta .posted-on time {
	font-size: 13px;
	opacity: 0.7;
}

/* Giới hạn 3 dòng đoạn trích để danh sách gọn, không bị một bài quá dài kéo lệch nhịp đọc. */
.post-archive .entry-summary p {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* "Đọc thêm" là link chữ (Kadence đã render dạng link thường, không phải nút) — chỉ đổi màu
   theo đỏ accent, gạch chân khi hover; icon mũi tên SVG có sẵn tự đổi màu theo currentColor. */
.post-archive .more-link-wrap .post-more-link {
	color: var(--cafe-accent, #8C2318);
	font-weight: 600;
}
.post-archive .more-link-wrap .post-more-link:hover {
	text-decoration: underline;
}

/* Sidebar "Bài viết mới nhất": tiêu đề widget kiểu eyebrow nổi bật — chữ hoa, dãn cách, gạch
   chân đỏ ngắn bên dưới — giống khung tiêu đề sidebar trong ảnh tham khảo. Lưu ý: #secondary là
   id chung Kadence dùng cho sidebar đang active trên trang hiện tại — hiện tại chỉ trang Tin tức
   bật sidebar nên an toàn; nếu sau này có trang khác cũng bật sidebar kèm wp:heading, rule này sẽ
   áp dụng ở đó luôn (không phải lỗi, nhưng cần nhớ nếu mở rộng). */
.blog #secondary .wp-block-heading {
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-align: center;
	padding-bottom: 12px;
	margin-bottom: 20px;
	border-bottom: 2px solid var(--cafe-accent, #8C2318);
}

/* Khung quanh toàn khối widget "Bài viết mới nhất": viền đứt nét, không nền (giữ nền trắng của
   trang) — padding thu gọn còn 16px cho đỡ rộng. */
#secondary .widget {
	border: 1px dashed var(--global-palette7, #D9C3A5);
	border-radius: var(--cafe-radius, 2px);
	padding: 16px;
}

/* Bỏ nhãn chuyên mục ở đầu mỗi mục trong sidebar — danh sách rút gọn chỉ cần ảnh + tiêu đề + ngày. */
#secondary .entry-taxonomies {
	display: none;
}

/* Danh sách kb-posts là CSS grid với row-gap 40px mặc định của Kadence — cộng dồn với
   margin-bottom bên dưới khiến khoảng cách thực tế giữa các mục lớn hơn nhiều so với giá trị đặt.
   Bỏ row-gap, để margin-bottom là nơi duy nhất quyết định khoảng cách. */
#secondary ul.kb-posts {
	row-gap: 0;
}

/* Đường kẻ phân cách giữa các mục trong sidebar: đứt nét, giống kiểu phân cách danh sách B2B ở
   mục Thông tin (.cafe-doc__list) — đồng bộ với viền đứt nét của khung ngoài. */
#secondary li.kb-post-list-item {
	border-bottom: 1px dashed var(--global-palette7, #D9C3A5);
	padding-bottom: 16px;
	margin-bottom: 8px;
}
#secondary li.kb-post-list-item:last-child {
	border-bottom: none;
	padding-bottom: 0;
	margin-bottom: 0;
}

/* Khoảng cách ảnh↔chữ và khoảng trống cuối mỗi mục trong sidebar đang theo mặc định Kadence
   (padding 32px quanh .entry-content-wrap + margin-bottom 17px của .entry-header) — quá rộng
   cho danh sách rút gọn này. Thu hẹp: padding ngang 12px (thay vì 32px), bỏ hẳn padding dưới và
   margin dưới của header — khoảng cách cuối mỗi mục giờ chỉ còn do padding-bottom ở trên quyết
   định (16px), không cộng dồn nhiều lớp nữa. */
#secondary article.loop-entry .entry-content-wrap {
	padding: 0 12px;
}
#secondary .entry-header {
	margin-bottom: 0;
}
#secondary .entry-meta {
	margin-bottom: 0;
}

/* Trang Liên hệ: cột trái (trụ sở + danh sách chi nhánh) và bản đồ nằm ngang bên phải, cùng
   chiều cao. Dưới 900px xếp chồng: thông tin trước, bản đồ sau. */
.cafe-contact {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 32px;
	margin: 24px 0;
}
.cafe-contact__info {
	flex: 1 1 300px;
}
.cafe-contact__info h2:first-child {
	margin-top: 0;
}
.cafe-contact__details {
	margin: 0 !important;
	padding: 0 !important;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 0.4em;
}
.cafe-contact__detail-item {
	display: flex;
	align-items: flex-start;
	gap: 0.5em;
}
.cafe-contact__branches {
	margin: 0 !important;
	padding: 0 !important;
	list-style: none;
}
.cafe-contact__branches li {
	padding: 10px 0;
	border-top: 1px solid var(--global-palette9, #EFE7DA);
}
.cafe-contact__branches li:first-child {
	border-top: 0;
}
.cafe-contact__map {
	flex: 1.6 1 480px;
	min-height: 480px;
}
.cafe-contact__map iframe {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 480px;
	border: 0;
	border-radius: var(--cafe-radius);
}
@media (max-width: 900px) {
	.cafe-contact__map {
		min-height: 420px;
	}
	.cafe-contact__map iframe {
		min-height: 420px;
	}
}

/* Trang Liên hệ: nút chi nhánh trông như chữ thường, không phải nút mặc định của trình duyệt —
   bấm vào thì đổi bản đồ nhúng (xem assets/js/cafe-contact-map.js). */
.cafe-map-trigger {
	display: inline-flex;
	align-items: flex-start;
	gap: 0.5em;
	background: none;
	border: none;
	padding: 0;
	margin: 0;
	font: inherit;
	font-size: 1rem !important;
	line-height: 1.75 !important;
	color: inherit;
	text-align: left;
	text-transform: none !important;
	letter-spacing: normal !important;
	text-decoration: none;
	cursor: pointer;
}
.cafe-map-trigger:hover {
	color: var(--cafe-accent, #8C2318);
}
.cafe-map-trigger__icon {
	flex: 0 0 auto;
	width: 1.1em;
	height: 1.1em;
	margin-top: 0.2em;
}
.cafe-map-trigger__icon svg {
	width: 100%;
	height: 100%;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* === SECTION "TIN TỨC VÀ KIẾN THỨC" (trang chủ) ===
   Khối .cafe-news (heading + shortcode [cafe_news_section]) được chèn vào post_content trang chủ
   bằng scripts/seed/homepage-news-section.php, đặt ngay dưới .cafe-best. Markup bên trong
   .cafe-news__wrap do shortcode cafe_news_section render (xem functions.php) — mỗi .cafe-news__page
   là một nhóm 4 bài, cafe-news.js chỉ bật/tắt class is-active, không có trang nào reload.
   Dùng lại ngôn ngữ thiết kế "tem nhãn" đã chọn cho card bài viết (nền kem, viền đứt nét) — xem
   docs/superpowers/specs/2026-10-09-blog-card-redesign-design.md. */

.cafe-news__page {
	display: none;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
}
.cafe-news__page.is-active {
	display: grid;
}

.cafe-news__item {
	background: var(--global-palette9, #FBF7F0);
	border: 1px solid transparent;
	border-radius: var(--cafe-radius, 2px);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: border-color 220ms ease, transform 220ms ease;
}
.cafe-news__item:hover {
	border-style: solid;
	border-color: var(--cafe-accent, #8C2318);
	transform: translateY(-2px);
}

.cafe-news__thumb {
	display: block;
	aspect-ratio: 4 / 3;
	min-height: 0; /* .cafe-news__item là flex column — nếu không ghi đè min-height:auto mặc
	                   định của flex item, ảnh dọc (vd. hình túi cà phê) sẽ đẩy khung tràn quá
	                   tỉ lệ 4:3 vì min-content size tính theo tỉ lệ gốc của ảnh, không phải
	                   aspect-ratio đã khai báo. */
	background: #f2ede4;
}
.cafe-news__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.cafe-news__thumb-fallback {
	display: block;
	width: 100%;
	height: 100%;
}

.cafe-news__body {
	padding: 20px;
	display: flex;
	flex-direction: column;
	flex: 1;
}

.cafe-news__date {
	font-size: 12px;
	opacity: 0.7;
	margin-bottom: 8px;
}

.cafe-news__title {
	margin: 0 0 8px;
}
.cafe-news__title a {
	font-family: var(--global-heading-font-family);
	font-size: 17px;
	line-height: 1.35;
	color: var(--cafe-ink, #1A100A);
}
.cafe-news__title a:hover {
	color: var(--cafe-accent, #8C2318);
}

.cafe-news__excerpt {
	font-size: 13px;
	line-height: 1.6;
	color: var(--global-palette6);
	margin: 0 0 12px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.cafe-news__more {
	margin-top: auto;
	align-self: flex-start;
	font-size: 13px;
	font-weight: 600;
	color: var(--cafe-accent, #8C2318);
}
.cafe-news__more:hover {
	text-decoration: underline;
}

.cafe-news__nav {
	display: flex;
	justify-content: center;
	gap: 16px;
	margin-top: 32px;
}
.cafe-news__nav-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	background: transparent;
	color: var(--cafe-ink, #1A100A);
	border: 1px solid rgba(26, 16, 10, 0.5);
	border-radius: 2px;
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
	transition: background-color 220ms ease, color 220ms ease, border-color 220ms ease;
}
.cafe-news__nav-btn:hover:not(:disabled) {
	background: var(--cafe-ink, #1A100A);
	color: #ffffff;
	border-color: var(--cafe-ink, #1A100A);
}
.cafe-news__nav-btn:disabled {
	opacity: 0.35;
	cursor: default;
}

@media (max-width: 900px) {
	.cafe-news__page {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (max-width: 600px) {
	.cafe-news__page {
		grid-template-columns: 1fr;
	}
}