/*
Theme Name: Trà Sen Tây Hồ (Flatsome Child)
Description: Child theme of Flatsome for Trà Sen Tây Hồ — the approved design (xanh lá sen #5b7f6a, kem #e8d8c3, Playfair Display / Be Vietnam Pro) mapped onto Flatsome and UX Builder elements.
Author: WP Agent
Template: flatsome
Version: 1.11.0
Requires PHP: 7.4
Text Domain: wpagent-child
*/

/* ==========================================================================
   0. Tokens
   ========================================================================== */
:root {
	--tsth-g: #5b7f6a;      /* primary — xanh lá sen */
	--tsth-gd: #3e5a4a;     /* hover */
	--tsth-gx: #2c4236;     /* headings, footer, top bar */
	--tsth-c: #e8d8c3;      /* secondary — kem */
	--tsth-cl: #f6efe5;     /* cream band */
	--tsth-bg: #fffdf9;     /* page */
	--tsth-ink: #2b2f2c;
	--tsth-body: #4a4f49;
	--tsth-mut: #6b6f69;
	--tsth-pink: #d98c95;
	--tsth-line: #e4dccf;
	--tsth-r: 14px;
	--tsth-serif: "Playfair Display", Georgia, serif;
	--tsth-sans: "Be Vietnam Pro", system-ui, sans-serif;
	--tsth-sec: 88px;
}
@media (max-width: 849px) { :root { --tsth-sec: 60px; } }

/* ==========================================================================
   1. Base — Flatsome defaults that collide with the design
   ========================================================================== */
html { background: var(--tsth-bg); }
body {
	font-family: var(--tsth-sans);
	color: var(--tsth-ink);
	background: var(--tsth-bg);
	font-size: 16px;
	line-height: 1.7;
}
h1, h2, h3, h4, h5, h6, .heading-font {
	font-family: var(--tsth-serif);
	font-weight: 600;
	line-height: 1.25;
	color: var(--tsth-gx);
	text-rendering: optimizeLegibility;
}
h1 { font-size: clamp(34px, 5vw, 60px); }
h2 { font-size: clamp(28px, 3.4vw, 42px); }
h3 { font-size: 22px; }
.alt-font { font-family: var(--tsth-serif); font-style: italic; }
p:empty { display: block; }
#wrapper, #main { background: var(--tsth-bg); }
/* Design container: 1200 px with 24 px gutters (18 px on phones) = 1152 px of content. */
/* Flatsome prints .container/.row widths from site_width after this file: !important. */
.container, .header-wrapper .container, .absolute-footer .container { max-width: 1200px !important; padding-left: 24px; padding-right: 24px; }
.row, .row.row-large { max-width: 1182px !important; }
.row.row-collapse { max-width: 1152px !important; }
@media (max-width: 549px) { .container, .header-wrapper .container, .absolute-footer .container { padding-left: 18px; padding-right: 18px; } .row { max-width: none; } }

/* Buttons: pill, sentence case (Flatsome: uppercase + letter-spacing + 2.4em line). */
.button, button, input[type="submit"], input[type="button"] {
	text-transform: none;
	letter-spacing: 0;
	font-family: var(--tsth-sans);
	font-weight: 600;
}
.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 0;
	padding: 13px 28px;
	line-height: 1.5;
	font-size: 15px;
	border-radius: 99px;
	margin: 0;
	transition: background-color .25s, color .25s, border-color .25s;
}
.button span { line-height: 1.5; }
.button.primary, .button.primary:not(.is-outline) { background-color: var(--tsth-g); border: 1.5px solid var(--tsth-g); color: #fff; }
.button.primary:not(.is-outline):hover { background-color: var(--tsth-gd); border-color: var(--tsth-gd); }
.button.is-outline { border: 1.5px solid currentColor; }
.button.primary.is-outline { color: var(--tsth-g); background: transparent; }
.button.primary.is-outline:hover { background: var(--tsth-g); color: #fff; border-color: var(--tsth-g); }
.button.white:not(.is-outline) { background: #fff; color: var(--tsth-gx); border: 1.5px solid #fff; }
.button.white:not(.is-outline):hover { background: var(--tsth-c); border-color: var(--tsth-c); }
.button.white.is-outline { color: #fff; border-color: rgba(255,255,255,.8); }
.button.white.is-outline:hover { background: #fff; color: var(--tsth-gx); }
/* Woo buttons use the secondary colour (cream) in Flatsome: keep them green. */
.button.alt, .single_add_to_cart_button, .checkout-button, #place_order {
	background-color: var(--tsth-g) !important;
	color: #fff !important;
	border-radius: 99px;
}
.button.alt:hover, .single_add_to_cart_button:hover, .checkout-button:hover, #place_order:hover { background-color: var(--tsth-gd) !important; }
.button .icon-angle-right, .tsth-arrow::after { margin-left: 2px; }

/* Shared text helpers (set on Text elements with a class). */
.tsth-eyebrow, .text .tsth-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--tsth-sans);
	font-size: 13px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--tsth-g);
	font-weight: 600;
	margin-bottom: 14px;
	line-height: 1.4;
}
.tsth-eyebrow::before { content: ""; width: 28px; height: 1px; background: currentColor; }
.dark .tsth-eyebrow, .tsth-on-dark .tsth-eyebrow { color: var(--tsth-c); }
.tsth-head { text-align: center; max-width: 680px; margin: 0 auto 48px; }
.tsth-head .tsth-eyebrow::after { content: ""; width: 28px; height: 1px; background: currentColor; }
.tsth-head p { color: var(--tsth-mut); margin: 12px 0 0; }
.tsth-head h2 { margin: 0; }
.tsth-lead { font-size: 18px; color: var(--tsth-body); }
.tsth-muted { color: var(--tsth-mut); }
.tsth-link { display: inline-flex; gap: 6px; align-items: center; color: var(--tsth-g); font-weight: 600; }
.tsth-link::after { content: "→"; }

/* Sections. */
.tsth-sec { padding-top: var(--tsth-sec) !important; padding-bottom: var(--tsth-sec) !important; }
.tsth-sec-tight { padding-top: 56px !important; padding-bottom: 56px !important; }
.tsth-cream { background-color: var(--tsth-cl); }
.tsth-c { background-color: var(--tsth-c); }
.section-title-container { margin-bottom: 0; }

/* ==========================================================================
   2. Icons (line icons as CSS masks; class `tsth-ic ic-<name>`)
   ========================================================================== */
:root {
	--ic-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E");
	--ic-user: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c1.5-4 4.5-6 8-6s6.5 2 8 6'/%3E%3C/svg%3E");
	--ic-bag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8h14l-1 12H6L5 8Z'/%3E%3Cpath d='M9 8V6a3 3 0 0 1 6 0v2'/%3E%3C/svg%3E");
	--ic-menu: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16M4 12h16M4 17h16'/%3E%3C/svg%3E");
	--ic-x: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E");
	--ic-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	--ic-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
	--ic-leaf: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 19c0-8 5-14 14-14 0 9-6 14-14 14Z'/%3E%3Cpath d='M5 19 13 11'/%3E%3C/svg%3E");
	--ic-truck: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h11v10H3zM14 10h4l3 3v3h-7'/%3E%3Ccircle cx='7' cy='18' r='2'/%3E%3Ccircle cx='17' cy='18' r='2'/%3E%3C/svg%3E");
	--ic-wallet: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='6' width='18' height='13' rx='2'/%3E%3Cpath d='M16 12h2M3 10h18'/%3E%3C/svg%3E");
	--ic-gift: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='9' width='18' height='12' rx='1'/%3E%3Cpath d='M3 13h18M12 9v12M12 9c-2-4-6-4-6-1.5S9 9 12 9Zm0 0c2-4 6-4 6-1.5S15 9 12 9Z'/%3E%3C/svg%3E");
	--ic-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m8 12 3 3 5-6'/%3E%3C/svg%3E");
	--ic-phone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L15 13l5 2v4a1 1 0 0 1-1 1A16 16 0 0 1 4 5a1 1 0 0 1 1-1Z'/%3E%3C/svg%3E");
	--ic-chat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5h16v11H9l-5 4V5Z'/%3E%3Cpath d='M8 10h8M8 13h5'/%3E%3C/svg%3E");
	--ic-mail: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E");
	--ic-pin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-6.5-7-12a7 7 0 0 1 14 0c0 5.5-7 12-7 12Z'/%3E%3Ccircle cx='12' cy='9' r='2.5'/%3E%3C/svg%3E");
	--ic-clock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");
	--ic-hand: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 11V6a1.5 1.5 0 0 1 3 0v5M10 10V4.5a1.5 1.5 0 0 1 3 0V10M13 10V5.5a1.5 1.5 0 0 1 3 0V12M16 9.5a1.5 1.5 0 0 1 3 0V14a7 7 0 0 1-7 7h-1a6 6 0 0 1-5-3l-2.5-4.5a1.5 1.5 0 0 1 2.6-1.5L7 13'/%3E%3C/svg%3E");
	--ic-heart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20s-7-4.5-7-10a4 4 0 0 1 7-2.6A4 4 0 0 1 19 10c0 5.5-7 10-7 10Z'/%3E%3C/svg%3E");
	--ic-cup: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9h13v5a6 6 0 0 1-6 6h-1a6 6 0 0 1-6-6V9Z'/%3E%3Cpath d='M17 11h1.5a2.5 2.5 0 0 1 0 5H17M8 3c0 2 2 2 2 4M12 3c0 2 2 2 2 4'/%3E%3C/svg%3E");
	--ic-box: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8l9-5 9 5v8l-9 5-9-5V8Z'/%3E%3Cpath d='m3 8 9 5 9-5M12 13v8'/%3E%3C/svg%3E");
	--ic-print: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 9V3h10v6M7 17H4v-7h16v7h-3'/%3E%3Crect x='7' y='14' width='10' height='7'/%3E%3C/svg%3E");
	--ic-card: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M7 10h6M7 14h10'/%3E%3C/svg%3E");
	--ic-doc: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h8l4 4v14H6V3Z'/%3E%3Cpath d='M14 3v4h4M9 12h6M9 16h6'/%3E%3C/svg%3E");
	--ic-cal: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E");
	--ic-filter: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5h16l-6 8v6l-4-2v-4L4 5Z'/%3E%3C/svg%3E");
	--ic-fb: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 8h3V4h-3a4 4 0 0 0-4 4v2H8v4h2v7h4v-7h3l1-4h-4V8Z'/%3E%3C/svg%3E");
	--ic-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E");
	--ic-arrow-w: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
}
.ic-search { --ic: var(--ic-search); --ic-bg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b7f6a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E"); }
.ic-user { --ic: var(--ic-user); --ic-bg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b7f6a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c1.5-4 4.5-6 8-6s6.5 2 8 6'/%3E%3C/svg%3E"); }
.ic-bag { --ic: var(--ic-bag); --ic-bg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b7f6a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8h14l-1 12H6L5 8Z'/%3E%3Cpath d='M9 8V6a3 3 0 0 1 6 0v2'/%3E%3C/svg%3E"); }
.ic-menu { --ic: var(--ic-menu); --ic-bg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b7f6a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16M4 12h16M4 17h16'/%3E%3C/svg%3E"); }
.ic-x { --ic: var(--ic-x); --ic-bg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b7f6a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E"); }
.ic-down { --ic: var(--ic-down); --ic-bg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b7f6a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); }
.ic-arrow { --ic: var(--ic-arrow); --ic-bg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b7f6a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E"); }
.ic-leaf { --ic: var(--ic-leaf); --ic-bg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b7f6a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 19c0-8 5-14 14-14 0 9-6 14-14 14Z'/%3E%3Cpath d='M5 19 13 11'/%3E%3C/svg%3E"); }
.ic-truck { --ic: var(--ic-truck); --ic-bg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b7f6a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h11v10H3zM14 10h4l3 3v3h-7'/%3E%3Ccircle cx='7' cy='18' r='2'/%3E%3Ccircle cx='17' cy='18' r='2'/%3E%3C/svg%3E"); }
.ic-wallet { --ic: var(--ic-wallet); --ic-bg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b7f6a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='6' width='18' height='13' rx='2'/%3E%3Cpath d='M16 12h2M3 10h18'/%3E%3C/svg%3E"); }
.ic-gift { --ic: var(--ic-gift); --ic-bg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b7f6a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='9' width='18' height='12' rx='1'/%3E%3Cpath d='M3 13h18M12 9v12M12 9c-2-4-6-4-6-1.5S9 9 12 9Zm0 0c2-4 6-4 6-1.5S15 9 12 9Z'/%3E%3C/svg%3E"); }
.ic-check { --ic: var(--ic-check); --ic-bg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b7f6a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m8 12 3 3 5-6'/%3E%3C/svg%3E"); }
.ic-phone { --ic: var(--ic-phone); --ic-bg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b7f6a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L15 13l5 2v4a1 1 0 0 1-1 1A16 16 0 0 1 4 5a1 1 0 0 1 1-1Z'/%3E%3C/svg%3E"); }
.ic-chat { --ic: var(--ic-chat); --ic-bg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b7f6a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5h16v11H9l-5 4V5Z'/%3E%3Cpath d='M8 10h8M8 13h5'/%3E%3C/svg%3E"); }
.ic-mail { --ic: var(--ic-mail); --ic-bg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b7f6a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E"); }
.ic-pin { --ic: var(--ic-pin); --ic-bg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b7f6a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-6.5-7-12a7 7 0 0 1 14 0c0 5.5-7 12-7 12Z'/%3E%3Ccircle cx='12' cy='9' r='2.5'/%3E%3C/svg%3E"); }
.ic-clock { --ic: var(--ic-clock); --ic-bg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b7f6a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E"); }
.ic-hand { --ic: var(--ic-hand); --ic-bg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b7f6a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 11V6a1.5 1.5 0 0 1 3 0v5M10 10V4.5a1.5 1.5 0 0 1 3 0V10M13 10V5.5a1.5 1.5 0 0 1 3 0V12M16 9.5a1.5 1.5 0 0 1 3 0V14a7 7 0 0 1-7 7h-1a6 6 0 0 1-5-3l-2.5-4.5a1.5 1.5 0 0 1 2.6-1.5L7 13'/%3E%3C/svg%3E"); }
.ic-heart { --ic: var(--ic-heart); --ic-bg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b7f6a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20s-7-4.5-7-10a4 4 0 0 1 7-2.6A4 4 0 0 1 19 10c0 5.5-7 10-7 10Z'/%3E%3C/svg%3E"); }
.ic-cup { --ic: var(--ic-cup); --ic-bg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b7f6a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9h13v5a6 6 0 0 1-6 6h-1a6 6 0 0 1-6-6V9Z'/%3E%3Cpath d='M17 11h1.5a2.5 2.5 0 0 1 0 5H17M8 3c0 2 2 2 2 4M12 3c0 2 2 2 2 4'/%3E%3C/svg%3E"); }
.ic-box { --ic: var(--ic-box); --ic-bg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b7f6a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8l9-5 9 5v8l-9 5-9-5V8Z'/%3E%3Cpath d='m3 8 9 5 9-5M12 13v8'/%3E%3C/svg%3E"); }
.ic-print { --ic: var(--ic-print); --ic-bg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b7f6a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 9V3h10v6M7 17H4v-7h16v7h-3'/%3E%3Crect x='7' y='14' width='10' height='7'/%3E%3C/svg%3E"); }
.ic-card { --ic: var(--ic-card); --ic-bg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b7f6a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M7 10h6M7 14h10'/%3E%3C/svg%3E"); }
.ic-doc { --ic: var(--ic-doc); --ic-bg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b7f6a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h8l4 4v14H6V3Z'/%3E%3Cpath d='M14 3v4h4M9 12h6M9 16h6'/%3E%3C/svg%3E"); }
.ic-cal { --ic: var(--ic-cal); --ic-bg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b7f6a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E"); }
.ic-filter { --ic: var(--ic-filter); --ic-bg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b7f6a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5h16l-6 8v6l-4-2v-4L4 5Z'/%3E%3C/svg%3E"); }
.ic-fb { --ic: var(--ic-fb); --ic-bg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b7f6a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 8h3V4h-3a4 4 0 0 0-4 4v2H8v4h2v7h4v-7h3l1-4h-4V8Z'/%3E%3C/svg%3E"); }
.ic-chevron { --ic: var(--ic-chevron); --ic-bg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b7f6a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E"); }
.tsth-ic::before,
.featured-box.tsth-feat .icon-box-text::before,
.tsth-footer-contact li::before {
	content: "";
	display: block;
	flex: none;
	width: 22px;
	height: 22px;
	background: currentColor;
	-webkit-mask: var(--ic) center / contain no-repeat;
	mask: var(--ic) center / contain no-repeat;
}

/* ==========================================================================
   3. Header — top bar, logo, main nav, icons
   ========================================================================== */
.header-top { background-color: var(--tsth-gx) !important; min-height: 38px; }
.header-top .html_topbar_left, .header-top .html_topbar_right, .tsth-topbar { font-size: 13px; color: #e9e2d6; letter-spacing: 0; text-transform: none; font-weight: 400; }
.tsth-topbar b { color: #fff; font-weight: 500; }
.html_topbar_left .tsth-topbar::before {
	content: "";
	display: inline-block;
	width: 16px; height: 16px;
	margin-right: 6px;
	vertical-align: -3px;
	background: currentColor;
	-webkit-mask: var(--ic-truck) center / contain no-repeat;
	mask: var(--ic-truck) center / contain no-repeat;
}
.header-main { border-bottom: 1px solid var(--tsth-line); }
@media (max-width: 549px) {
	.header-top .flex-row { justify-content: center; }
	.header-top .tsth-topbar { font-size: 12px; white-space: nowrap; }
	.html_topbar_left .tsth-topbar::before { display: none; }
	.tsth-logo__mark { width: 38px; height: 38px; }
	.tsth-logo__name { font-size: 20px; }
}
.header-bg-color { background-color: var(--tsth-bg) !important; }
.header-wrapper.stuck .header-main { box-shadow: 0 6px 18px -12px rgba(44,66,54,.35); }

/* Logo (text logo from the child theme's element-logo.php override). */
#logo { width: auto !important; }
#logo a.tsth-logo, .tsth-logo { display: inline-flex; align-items: center; gap: 12px; color: var(--tsth-gx); text-decoration: none; line-height: 1; }
.tsth-logo__mark { width: 46px; height: 46px; flex: none; }
.tsth-logo__text { display: block; }
.tsth-logo__name { display: block; font-family: var(--tsth-serif); font-size: 24px; font-weight: 600; color: var(--tsth-gx); line-height: 1; letter-spacing: 0; text-transform: none; }
.tsth-logo__place { display: block; font-family: var(--tsth-sans); font-size: 10.5px; letter-spacing: .42em; color: var(--tsth-g); margin-top: 5px; font-weight: 600; }

/* Main nav. */
.header-nav-main.nav > li > a, .nav > li.menu-item > a.nav-top-link {
	font-family: var(--tsth-sans);
	font-size: 14.5px;
	font-weight: 500;
	color: var(--tsth-ink);
	text-transform: none;
	letter-spacing: 0;
	padding-left: 11px;
	padding-right: 11px;
}
.header-nav-main.nav > li { margin: 0; }
.header-nav-main.nav > li > a:hover, .header-nav-main.nav > li.active > a, .header-nav-main.nav > li.current-menu-item > a { color: var(--tsth-g); }
.header-nav-main.nav > li.active > a, .header-nav-main.nav > li.current-menu-item > a { box-shadow: inset 0 -2px 0 var(--tsth-g); }
.header-nav-main .icon-angle-down { font-size: 12px; margin-left: 4px; opacity: .8; }
/* Icons: search, account, cart. */
.header-main .header-search > a, .header-main .account-item > a, .header-main .cart-item > a { color: var(--tsth-gx); }
.header-main .header-nav .icon-search, .header-main .header-nav .icon-user, .header-main .header-nav .icon-shopping-bag { font-size: 19px; }
.header-main .cart-icon strong, .header-main .cart-icon strong::after { border-color: var(--tsth-gx); color: var(--tsth-gx); }
.header-main .header-nav-main > li.header-search, .header-main .header-nav-main > li.account-item { margin-left: 6px; }
.cart-icon strong { border-radius: 4px; }
.image-icon .cart-icon strong, .header-cart-link .cart-icon strong { font-family: var(--tsth-sans); }

/* Mega menu ("Sản phẩm" → UX Block mega-san-pham, full width). */
.nav-dropdown { border: 0; }
.menu-item-design-full-width > .nav-dropdown {
	border-top: 1px solid var(--tsth-line);
	box-shadow: 0 24px 40px -20px rgba(44,66,54,.25);
	padding: 0;
	background: #fff;
}
.menu-item-design-full-width .nav-dropdown > .row,
.nav-dropdown .tsth-mega {
	max-width: 1182px;
	margin: 0 auto;
	padding: 36px 0 40px;
}
.tsth-mega .col { padding-bottom: 0; }
.tsth-mega-col { padding-left: 20px !important; padding-right: 20px !important; }
.tsth-mega-title h4 {
	font-family: var(--tsth-sans);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--tsth-g);
	margin: 0 0 16px;
}
.nav-dropdown .tsth-mega ul, .nav-dropdown ul ul { margin: 0; }
.tsth-mega-item { margin-bottom: 4px; }
.tsth-mega-item .icon-box-img { width: 44px !important; margin-right: 12px !important; }
.tsth-mega-item .icon-box-img img { width: 44px; height: 44px; object-fit: cover; border-radius: 10px; }
.tsth-mega-item .icon-box-text { padding: 2px 0; }
.tsth-mega-item h5 {
	font-family: var(--tsth-sans);
	font-size: 15px;
	font-weight: 500;
	text-transform: none;
	letter-spacing: 0;
	color: var(--tsth-ink);
	margin: 0;
	line-height: 1.35;
}
.tsth-mega-item p { color: var(--tsth-mut); font-size: 13px; line-height: 1.3; margin: 0; }
.tsth-mega-item:hover h5 { color: var(--tsth-g); }
.tsth-promo { border-radius: var(--tsth-r); overflow: hidden; }
.tsth-promo .overlay { background: linear-gradient(0deg, rgba(28,44,35,.85), rgba(28,44,35,0) 65%) !important; }
.tsth-promo-box .text-box-content { padding: 22px; }
.tsth-promo-text h3 { color: #fff; font-size: 22px; margin: 0 0 4px; }
.tsth-promo-text p { font-size: 14px; color: rgba(255,255,255,.9); margin: 0; line-height: 1.5; }
.tsth-promo-text .tsth-eyebrow { color: var(--tsth-c); margin-bottom: 8px; }
.tsth-promo-text .tsth-link { color: #fff; margin-top: 8px; border-bottom: 1px solid #fff; font-size: 14px; }
.tsth-promo-text .tsth-link::after { content: none; }

/* Mobile off-canvas menu. */
.off-canvas-left .mfp-content, .off-canvas .sidebar-menu { background: var(--tsth-bg); }
.off-canvas .nav-sidebar.nav-vertical > li > a {
	font-family: var(--tsth-sans);
	font-size: 16px;
	font-weight: 500;
	text-transform: none;
	letter-spacing: 0;
	color: var(--tsth-ink);
	padding-top: 14px;
	padding-bottom: 14px;
}
.off-canvas .nav-sidebar.nav-vertical > li { border-top-color: var(--tsth-line); }
.off-canvas .nav-sidebar .children li > a, .off-canvas .nav-sidebar .sub-menu li > a { font-size: 15px; color: var(--tsth-body); text-transform: none; }

/* ==========================================================================
   4. Footer — UX Block footer-tra-sen + absolute footer
   ========================================================================== */
.tsth-footer { color: #d7d9cf; font-size: 15px; }
.tsth-footer .tsth-logo__name { color: #fff; }
.tsth-footer .tsth-logo__place { color: var(--tsth-c); }
.tsth-footer-about p { margin: 18px 0 0; opacity: .85; max-width: 320px; color: #d7d9cf; }
.tsth-pay { display: flex; gap: 8px; margin-top: 18px; flex-wrap: wrap; }
.tsth-pay span { border: 1px solid rgba(255,255,255,.25); border-radius: 6px; padding: 4px 10px; font-size: 12.5px; color: #d7d9cf; }
.tsth-footer-links h4 {
	color: #fff;
	font-family: var(--tsth-sans);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	margin: 0 0 18px;
}
.tsth-footer-links ul { list-style: none; margin: 0; padding: 0; }
.tsth-footer-links li { margin: 0 0 10px; padding: 0; color: #d7d9cf; line-height: 1.6; }
.col-inner .tsth-footer-links ul li { margin-left: 0; }
.tsth-footer-links a { color: #d7d9cf; }
.tsth-footer-links a:hover { color: #fff; }
.tsth-footer-contact li { display: flex; gap: 10px; align-items: flex-start; }
.tsth-footer-contact li::before { width: 18px; height: 18px; margin-top: 4px; color: var(--tsth-c); background: var(--tsth-c); }
.absolute-footer {
	background-color: var(--tsth-gx) !important;
	border-top: 1px solid rgba(255,255,255,.12);
	color: rgba(215,217,207,.75);
	font-size: 13.5px;
	padding: 22px 0;
}
.absolute-footer .footer-primary, .absolute-footer .footer-secondary { padding: 0; }
.absolute-footer .copyright-footer { padding: 0; }
.back-to-top { background: var(--tsth-g); border-color: var(--tsth-g); color: #fff; }

/* ==========================================================================
   5. Shared page components (set as classes on UX Builder elements)
   ========================================================================== */
/* 5.1 Hero (ux_banner .tsth-hero) */
.tsth-hero .overlay { background: linear-gradient(90deg, rgba(28,44,35,.82) 0%, rgba(28,44,35,.55) 42%, rgba(28,44,35,0) 72%) !important; }
.tsth-hero .text-box h1 { color: #fff; margin-bottom: 18px; }
.tsth-hero .text-box h1 em { font-style: italic; color: var(--tsth-c); }
.tsth-hero .text-box p { font-size: 18px; color: rgba(255,255,255,.92); margin-bottom: 32px; max-width: 480px; }
.tsth-acts { display: flex; gap: 14px; flex-wrap: wrap; }

/* 5.2 Page hero (ux_banner .tsth-phero) + title band (section .tsth-titleband) */
.tsth-phero .overlay { background: rgba(28,44,35,.62) !important; }
.tsth-phero h1 { color: #fff; margin: 0; }
.tsth-phero p { max-width: 620px; margin: 14px auto 0; color: rgba(255,255,255,.92); font-size: 17px; }
.tsth-crumb { font-size: 13.5px; color: var(--tsth-mut); display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.tsth-phero .tsth-crumb { justify-content: center; color: rgba(255,255,255,.8); margin-bottom: 14px; }
.tsth-phero .tsth-crumb a { color: rgba(255,255,255,.9); }
.tsth-titleband { background: var(--tsth-cl); border-bottom: 1px solid var(--tsth-line); }
.tsth-titleband h1 { font-size: clamp(30px, 4vw, 44px); margin: 0; }

/* 5.3 Icon features (featured_box .tsth-feat + ic-<name>) */
.featured-box.tsth-feat .icon-box-text { display: flex; gap: 14px; align-items: center; }
.featured-box.tsth-feat .icon-box-text::before {
	width: 52px; height: 52px;
	-webkit-mask: none; mask: none;
	background: #fff var(--ic-bg, none) center / 22px no-repeat;
	border: 1px solid var(--tsth-line);
	border-radius: 50%;
}
.featured-box.tsth-feat h5 { font-family: var(--tsth-sans); text-transform: none; letter-spacing: 0; font-size: 15px; font-weight: 600; color: var(--tsth-gx); margin: 0; }
.featured-box.tsth-feat p { font-size: 13.5px; color: var(--tsth-mut); line-height: 1.4; margin: 0; }

/* 5.4 Cards: values (col .tsth-card) */
.tsth-card > .col-inner { background: #fff; border: 1px solid var(--tsth-line); border-radius: var(--tsth-r); padding: 36px 30px; height: 100%; }
.tsth-card p { color: var(--tsth-mut); font-size: 15px; margin-top: 8px; }

/* 5.5 Split (image + text) */
.tsth-split-img .img-inner, .tsth-split-img img { border-radius: var(--tsth-r); }
.tsth-ticks ul { list-style: none; margin: 8px 0 28px; padding: 0; }
.tsth-ticks li { position: relative; padding-left: 30px; margin: 0 0 10px !important; }
.tsth-ticks li::before {
	content: ""; position: absolute; left: 0; top: 4px; width: 20px; height: 20px;
	background: var(--tsth-g);
	-webkit-mask: var(--ic-check) center / contain no-repeat;
	mask: var(--ic-check) center / contain no-repeat;
}

/* 5.6 Quote */
.tsth-quote p { font-family: var(--tsth-serif); font-style: italic; font-size: clamp(22px, 2.6vw, 30px); color: var(--tsth-gx); text-align: center; max-width: 820px; margin: 0 auto; line-height: 1.5; }
.tsth-quote small { display: block; font-family: var(--tsth-sans); font-style: normal; font-size: 14px; color: var(--tsth-g); margin-top: 16px; letter-spacing: .12em; text-transform: uppercase; }

/* 5.7 CTA band (row .tsth-cta) */
.tsth-cta { background: var(--tsth-g); color: #fff; border-radius: 22px; padding: 56px 64px !important; position: relative; overflow: hidden; }
.tsth-cta::before { content: ""; position: absolute; right: -60px; top: -60px; width: 260px; height: 260px; border-radius: 50%; border: 1px solid rgba(255,255,255,.18); }
.tsth-cta h2 { color: #fff; }
.tsth-cta p { color: rgba(255,255,255,.9); }
@media (max-width: 849px) { .tsth-cta { padding: 40px 28px !important; } }

/* 5.8 Accordion (FAQ) */
.tsth-faq .accordion-item { border: 1px solid var(--tsth-line); border-radius: 12px; background: #fff; margin-bottom: 12px; overflow: hidden; }
.tsth-faq .accordion-title {
	border: 0;
	padding: 18px 56px 18px 22px;
	font-family: var(--tsth-sans);
	font-weight: 600;
	font-size: 16px;
	color: var(--tsth-gx);
	position: relative;
}
.tsth-faq .accordion-title.active { color: var(--tsth-gx); background: none; border-color: transparent; }
.tsth-faq .accordion-item:has(.accordion-title.active) { border-color: var(--tsth-g); }
.tsth-faq .accordion-title .toggle { left: auto; right: 14px; top: 50%; transform: translateY(-50%); color: var(--tsth-g); }
.tsth-faq .accordion-inner { padding: 0 22px 20px; color: var(--tsth-body); }

/* 5.9 Forms (Contact Form 7) */
.wpcf7 label { width: auto; display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 500; color: var(--tsth-ink); margin: 0 0 16px; }
.wpcf7 .wpcf7-form-control-wrap { display: block; }
.wpcf7 input[type="text"], .wpcf7 input[type="tel"], .wpcf7 input[type="email"], .wpcf7 input[type="number"], .wpcf7 select, .wpcf7 textarea {
	font: inherit;
	font-weight: 400;
	height: auto;
	padding: 13px 16px;
	border: 1px solid var(--tsth-line);
	border-radius: 10px;
	background: var(--tsth-bg);
	color: var(--tsth-ink);
	box-shadow: none;
	margin: 0;
	width: 100%;
}
.wpcf7 textarea { min-height: 130px; resize: vertical; }
.wpcf7 input:focus, .wpcf7 select:focus, .wpcf7 textarea:focus { border-color: var(--tsth-g); box-shadow: 0 0 0 3px rgba(91,127,106,.15); }
.tsth-fg { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
@media (max-width: 549px) { .tsth-fg { grid-template-columns: 1fr; } }
.wpcf7 input[type="submit"].wpcf7-submit {
	background: var(--tsth-g);
	color: #fff;
	border: 0;
	border-radius: 99px;
	padding: 14px 30px;
	font-size: 15px;
	line-height: 1.5;
	height: auto;
	min-height: 0;
	margin: 4px 0 0;
}
.wpcf7 input[type="submit"].wpcf7-submit:hover { background: var(--tsth-gd); box-shadow: none; }
.wpcf7 .wpcf7-response-output { border-radius: 10px; margin: 16px 0 0; }
.tsth-form > .col-inner { background: #fff; border: 1px solid var(--tsth-line); border-radius: 18px; padding: 40px; }
@media (max-width: 549px) { .tsth-form > .col-inner { padding: 26px 20px; } }

/* 5.10 WooCommerce product boxes (ux_products / shop archive) */
.product-small.box { background: #fff; border: 1px solid var(--tsth-line); border-radius: var(--tsth-r); overflow: hidden; transition: box-shadow .25s, transform .25s; }
.product-small.box:hover { box-shadow: 0 18px 36px -18px rgba(44,66,54,.35); transform: translateY(-3px); }
.product-small .box-image { background: var(--tsth-cl); }
.product-small .box-text { padding: 16px 18px 20px; }
.product-small .box-text .category { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--tsth-g); font-weight: 600; opacity: 1; }
.product-small .box-text .name a, .product-small .woocommerce-loop-product__title a { font-family: var(--tsth-serif); font-size: 18px; color: var(--tsth-gx); line-height: 1.3; }
.product-small .price { font-weight: 700; color: var(--tsth-gx); }
.badge-container .badge-inner { background: var(--tsth-pink); border-radius: 999px; }

/* 5.11 Blog boxes (blog_posts) */
.tsth-posts .box-blog-post .box-image img, .tsth-posts .box-blog-post .box-image .image-cover { border-radius: var(--tsth-r); }
.tsth-posts .box-text { padding: 16px 0 0; }
.tsth-posts .post-title { font-family: var(--tsth-serif); font-size: 21px; font-weight: 600; color: var(--tsth-gx); }
.tsth-posts .is-divider { display: none; }
.tsth-posts .from_the_blog_excerpt { color: var(--tsth-body); font-size: 15px; }

/* ==========================================================================
   6. Home (page trang-chu)
   ========================================================================== */
/* 6.1 Hero — section .tsth-hero (bg id 16) */
.tsth-hero .section-bg-overlay { background: linear-gradient(90deg, rgba(28,44,35,.82) 0%, rgba(28,44,35,.55) 42%, rgba(28,44,35,0) 72%) !important; }
.tsth-hero .section-content { width: 100%; }
.tsth-hero-col { padding-bottom: 0 !important; }
.tsth-hero-col > .col-inner { max-width: 560px; }
.tsth-hero-text h1 { color: #fff; margin: 0 0 18px; font-size: clamp(34px, 5vw, 60px); line-height: 1.25; }
.tsth-hero-text h1 em { font-style: italic; color: var(--tsth-c); }
.tsth-hero-text p { font-size: 18px; color: rgba(255,255,255,.92); margin: 0 0 32px; max-width: 480px; line-height: 1.7; }
.tsth-hero-text .tsth-eyebrow { color: var(--tsth-c); }
.tsth-hero .button { margin: 0 14px 0 0; padding: 13px 28px; }
.button.white:not(.is-outline) { color: var(--tsth-gx); }
.button i, .button .icon-angle-right { font-size: 14px; margin: 0 0 0 4px; top: 0; }

/* 6.2 Trust strip — section .tsth-trust, featured_box .tsth-feat */
.tsth-trust { border-bottom: 1px solid var(--tsth-line); }
.tsth-trust .col { padding-bottom: 0; }
.featured-box.tsth-feat .icon-box-text {
	display: grid;
	grid-template-columns: 52px 1fr;
	column-gap: 14px;
	align-items: center;
	text-align: left;
}
.featured-box.tsth-feat .icon-box-text::before { grid-row: 1 / span 2; align-self: center; box-sizing: border-box; }
.featured-box.tsth-feat .icon-box-text h5 { align-self: end; line-height: 1.4; }
.featured-box.tsth-feat .icon-box-text p { align-self: start; }

/* 6.3 Section heads + category tiles (ux_product_categories .tsth-cats) */
.tsth-head { margin-bottom: 48px; }
.tsth-head .tsth-eyebrow { justify-content: center; }
.tsth-head p { font-size: 16px; line-height: 1.7; }
.tsth-cats .box-category { border-radius: var(--tsth-r); overflow: hidden; }
.tsth-cats .box-image { border-radius: var(--tsth-r); overflow: hidden; }
.tsth-cats .box-image img { transition: transform .6s; }
.tsth-cats .box-category:hover .box-image img { transform: scale(1.06); }
.tsth-cats .overlay { background: linear-gradient(0deg, rgba(28,44,35,.85), rgba(28,44,35,0) 55%) !important; opacity: 1 !important; }
.tsth-cats .box-text { padding: 22px; }
.tsth-cats .box-text h5 { font-family: var(--tsth-serif); font-size: 21px; font-weight: 600; text-transform: none; letter-spacing: 0; color: #fff; margin: 0; line-height: 1.25; }

/* 6.4 Featured products (ux_products .tsth-prods) */
.tsth-center { text-align: center; margin-top: 44px; }

/* 6.5 Story split */
.tsth-split-media > .col-inner { position: relative; }
.tsth-split-img .img-inner { border-radius: var(--tsth-r); overflow: hidden; }
.tsth-stamp {
	position: absolute;
	right: -22px;
	bottom: -22px;
	z-index: 2;
	background: var(--tsth-g);
	color: #fff;
	border-radius: var(--tsth-r);
	padding: 20px 24px;
	max-width: 220px;
	font-family: var(--tsth-serif);
	font-size: 18px;
	line-height: 1.35;
	box-shadow: 0 18px 30px -16px rgba(0,0,0,.4);
}
.tsth-split-body { padding-left: 49px !important; }
.tsth-split-text p { color: var(--tsth-body); margin-bottom: 16px; }
.tsth-split-text h2 { margin: 0 0 16px; }

/* 6.6 Two banners (ux_banner .tsth-bn) */
.tsth-duo .col { padding-bottom: 0; }
.tsth-bn { border-radius: var(--tsth-r); overflow: hidden; }
.tsth-bn .overlay { background: linear-gradient(20deg, rgba(28,44,35,.9) 10%, rgba(28,44,35,.1) 70%) !important; }
.tsth-bn-box .text-box-content { padding: 36px; }
.tsth-bn-box { max-width: 440px; }
.tsth-bn-text h3 { color: #fff; font-size: 30px; margin: 4px 0 10px; }
.tsth-bn-text p { color: rgba(255,255,255,.9); margin: 0 0 20px; }
.tsth-bn-text .tsth-eyebrow { color: var(--tsth-c); }

/* 6.7 CTA band */
.row.tsth-cta { max-width: 1152px !important; padding: 41px 49px; margin-left: auto; margin-right: auto; }
.tsth-cta .col { padding-bottom: 0; }
.tsth-cta-text h2 { color: #fff; margin: 0; }
.tsth-cta-text p { color: rgba(255,255,255,.9); margin: 10px 0 0; }
.tsth-cta-text .tsth-eyebrow { color: var(--tsth-c); }
.tsth-cta-acts > .col-inner { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.tsth-cta-acts .button { margin: 0; }

@media (max-width: 849px) {
	.tsth-split-body { padding-left: 15px !important; }
	.tsth-stamp { right: 12px; bottom: -18px; }
	.row.tsth-cta { padding: 25px 13px; }
}
@media (max-width: 549px) {
	.tsth-hero { align-items: flex-end; padding-bottom: 48px !important; }
	.tsth-hero .section-bg-overlay { background: linear-gradient(0deg, rgba(28,44,35,.9) 10%, rgba(28,44,35,.35) 65%, rgba(28,44,35,.1)) !important; }
	.tsth-hero-text p { font-size: 16px; }
	.tsth-hero .button { width: calc(50% - 7px); margin-right: 10px; padding: 13px 16px; }
	.tsth-hero .button + .button { margin-right: 0; }
	.featured-box.tsth-feat .icon-box-text { grid-template-columns: 1fr; justify-items: center; text-align: center; row-gap: 8px; }
	.featured-box.tsth-feat .icon-box-text::before { grid-row: auto; }
	.tsth-cats .box-text { padding: 14px; }
	.tsth-cats .box-text h5 { font-size: 18px; }
	.tsth-bn-box .text-box-content { padding: 24px; }
	.tsth-bn-text h3 { font-size: 25px; }
}

/* 6.8 Home fixes after compare #1 */
/* Flatsome columns carry 30 px bottom padding: the design's sections do not. */
.section[class*="tsth-"] .section-content > .row > .col { padding-bottom: 0; }
.tsth-footer .section-content > .row > .col { padding-bottom: 0; }
/* Card grids: 24 px gutters like the design (14 px on phones). */
.row.tsth-cats, .row.tsth-prods { margin: 0 -12px -24px; width: calc(100% + 24px); max-width: none !important; }
.tsth-cats > .col, .tsth-prods > .col { padding: 0 12px 24px; }
.tsth-duo > .col + .col { }
.tsth-bn-text p { font-size: 16px; line-height: 1.7; }
@media (max-width: 849px) {
	.tsth-duo > .col:first-child { padding-bottom: 32px; }
	.tsth-split-media { padding-bottom: 32px !important; }
	.tsth-cta-acts { padding-top: 32px !important; }
}
@media (max-width: 549px) {
	.row.tsth-cats, .row.tsth-prods { margin: 0 -7px -14px; width: calc(100% + 14px); }
	.tsth-cats > .col, .tsth-prods > .col { padding: 0 7px 14px; }
}
/* Product box button (theme mod add_to_cart_icon = button). */
.product-small .add-to-cart-button { margin-top: 14px; }
.product-small .add-to-cart-button .button, .product-small .add-to-cart-button a {
	display: flex;
	width: 100%;
	justify-content: center;
	gap: 8px;
	padding: 9px 16px;
	font-size: 14px;
	font-weight: 600;
	border: 1.5px solid var(--tsth-g);
	color: var(--tsth-g);
	background: transparent;
	border-radius: 99px;
	margin: 0;
}
.product-small .add-to-cart-button a::before {
	content: "";
	width: 16px; height: 16px;
	background: currentColor;
	-webkit-mask: var(--ic-bag) center / contain no-repeat;
	mask: var(--ic-bag) center / contain no-repeat;
}
.product-small .add-to-cart-button a:hover { background: var(--tsth-g); color: #fff; }
.product-small .box-text { text-align: left; }
.product-small .box-text .title-wrapper { margin-bottom: 0; }
.product-small .name.product-title { margin: 6px 0 8px; }
.tsth-split-text h2 { margin: 0 0 0; }
@media (max-width: 849px) { .section[class*="tsth-"] .tsth-duo > .col:first-child { padding-bottom: 32px !important; } }
/* Flatsome's `.row .row:not(.row-collapse)` sets -15px margins (0,3,0): force the design's gutters. */
.section .row.tsth-cats, .section .row.tsth-prods { margin-left: -12px !important; margin-right: -12px !important; }
.tsth-footer { padding-bottom: 56px !important; }
@media (max-width: 549px) {
	.section .row.tsth-cats, .section .row.tsth-prods { margin-left: -7px !important; margin-right: -7px !important; }
	.section[class*="tsth-"] .section-content > .row > .col { padding-left: 18px; padding-right: 18px; }
	.product-small .box-text { padding: 12px 12px 14px; }
	.product-small .box-text .name a, .product-small .woocommerce-loop-product__title a { font-size: 15.5px; }
	.product-small .box-text .category { font-size: 10.5px; }
	.product-small .add-to-cart-button a { padding: 9px 10px; font-size: 13px; }
}
@media (max-width: 849px) {
	.tsth-sec-tight { padding-top: 40px !important; padding-bottom: 40px !important; }
	.tsth-footer .tsth-footer-cols > .col { padding-bottom: 32px !important; }
}

/* 6.9 Home fixes after compare #3 (trust strip gaps, card text line-heights) */
@media (min-width: 550px) and (max-width: 849px) {
	.section[class*="tsth-"] .section-content > .row.tsth-trust-row > .col:nth-child(-n+2) { padding-bottom: 24px; }
}
@media (max-width: 549px) {
	.section .row.tsth-trust-row { padding: 0 12px; }
	.section[class*="tsth-"] .section-content > .row.tsth-trust-row > .col { padding-left: 6px; padding-right: 6px; }
	.section[class*="tsth-"] .section-content > .row.tsth-trust-row > .col:nth-child(-n+2) { padding-bottom: 18px; }
	.featured-box.tsth-feat .icon-box-text { row-gap: 0; }
	.featured-box.tsth-feat .icon-box-text::before { margin-bottom: 8px; }
	.featured-box.tsth-feat .icon-box-text h5 { line-height: 1.7; }
	.product-small .add-to-cart-button a { line-height: 21px; min-height: 0; }
	.product-small .name.product-title, .product-small .name.product-title a { line-height: 1.25; }
}
.tsth-posts .post-title, .tsth-posts .post-title a { line-height: 1.25 !important; }
.tsth-posts .post-title a { display: block; }
.product-small .name.product-title a { display: block; line-height: 1.25 !important; }
.button.white:not(.is-outline), .dark .button.white:not(.is-outline) { color: var(--tsth-gx) !important; font-weight: 600; }

/* 6.10 Buttons and footer like the design (.btn 14/28 px, line 1.7; footer grid 1.4fr 1fr 1fr 1.2fr) */
.tsth-hero .button, .tsth-split-body .button, .tsth-bn-box .button { padding: 14px 28px; }
.tsth-hero .button, .tsth-hero .button span, .tsth-split-body .button, .tsth-split-body .button span, .tsth-bn-box .button, .tsth-bn-box .button span { line-height: 1.7; }
.product-small .add-to-cart-button { margin-top: 22px; }
.product-small .add-to-cart-button .button, .product-small .add-to-cart-button a { padding: 11px 16px; line-height: 22.8px; min-height: 0; }
.tsth-footer-links li { line-height: 1.7; }
@media (min-width: 850px) {
	.section .row.tsth-footer-cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; column-gap: 44px; padding: 0 15px; }
	.row.tsth-footer-cols::before, .row.tsth-footer-cols::after { display: none; }
	.row.tsth-footer-cols > .col { padding: 0; max-width: none; flex-basis: auto; width: auto; }
}
@media (min-width: 550px) and (max-width: 849px) {
	/* design .ftr .cols: 1fr 1fr with a 44 px gap (Flatsome's 50 % columns put the 2nd column 7.5 px left) */
	.section .row.tsth-footer-cols { display: grid; grid-template-columns: 1fr 1fr; column-gap: 44px; margin-left: 0 !important; margin-right: 0 !important; width: auto; max-width: none; padding: 0 24px !important; }
	.row.tsth-footer-cols::before, .row.tsth-footer-cols::after { display: none; }
	.row.tsth-footer-cols > .col { padding-left: 0; padding-right: 0; max-width: none; flex-basis: auto; width: auto; }
	.tsth-footer .tsth-footer-cols > .col:nth-child(-n+2) { padding-bottom: 44px !important; }
	.tsth-footer .tsth-footer-cols > .col:nth-child(n+3) { padding-bottom: 0 !important; }
}
@media (max-width: 849px) {
	.tsth-footer .tsth-footer-cols > .col:last-child { padding-bottom: 0 !important; }
}
.absolute-footer .container { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px; text-align: left; }
.absolute-footer .container::before, .absolute-footer .container::after { display: none; }
.absolute-footer .footer-primary, .absolute-footer .footer-secondary { float: none; order: 0; margin: 0; }
.absolute-footer .footer-secondary { order: 1; }
.absolute-footer .footer-text { display: block; padding: 0; }
@media (max-width: 549px) {
	.tsth-hero .button { padding: 13px 16px; }
	.product-small .add-to-cart-button .button, .product-small .add-to-cart-button a { padding: 9px 10px; line-height: 21px; }
}

/* 6.11 Header and trust items like the design (top bar 38 px; header 84 + 1 px line, 68 + 1 px below 850 px) */
#top-bar.header-top { min-height: 38px; }
#header .header-wrapper:not(.stuck) #masthead.header-main { height: 85px; }
@media (max-width: 849px) { #header .header-wrapper:not(.stuck) #masthead.header-main { height: 69px; } }
@media (max-width: 549px) {
	#top-bar.header-top { min-height: 36px; padding: 7px 0; }
	#top-bar .tsth-topbar { white-space: normal; line-height: 1.5; text-align: center; display: inline-block; }
	#top-bar .html_topbar_left .tsth-topbar::before { display: inline-block; }
}
.featured-box.tsth-feat .icon-box-text { row-gap: 0; }
.featured-box.tsth-feat .icon-box-text h5 { line-height: 1.7; }

/* ==========================================================================
   7. Blog — home.php (Tin tức), archive.php, single.php (design blog-post.html)
   ========================================================================== */
/* 7.1 Title band (page Tin tức section + templates) */
.tsth-band { padding: 44px 0; }
.section.tsth-titleband { padding-top: 44px !important; padding-bottom: 44px !important; }
.tsth-titleband .tsth-crumb, .tsth-band .tsth-crumb { margin: 0; line-height: 1.7; }
.tsth-crumb i { font-style: normal; }
.tsth-crumb a { color: var(--tsth-mut); }
.tsth-crumb a:hover { color: var(--tsth-g); }
.tsth-titleband h1, .tsth-band h1 { margin: 8px 0 0; line-height: 1.25; }
.tsth-band-text p, .tsth-band-desc p, .tsth-band-desc { color: var(--tsth-mut); margin: 12px 0 0; max-width: 680px; }
.tsth-pmeta { display: flex; gap: 18px; flex-wrap: wrap; color: var(--tsth-mut); font-size: 14px; margin-top: 14px; line-height: 1.7; }
.tsth-pmeta .tsth-ic { display: inline-flex; align-items: center; gap: 6px; }
.tsth-pmeta .tsth-ic::before { width: 16px; height: 16px; }
.tsth-pmeta a { color: inherit; }
.tsth-pmeta a:hover { color: var(--tsth-g); }

/* 7.2 Article (narrow column 780 incl. gutters) */
.container.tsth-article { max-width: 780px !important; }
.tsth-post-body { padding: 12px 0 var(--tsth-sec); }
.tsth-feat-img { margin: 28px 0 36px; }
.tsth-feat-img img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--tsth-r); }
.tsth-single .entry-content { padding: 0; }
.tsth-single .entry-content > p:first-child { font-family: var(--tsth-serif); font-size: 19px; color: var(--tsth-gx); line-height: 1.6; margin-bottom: 24px; }
.tsth-single .entry-content h2 { font-size: 28px; margin: 36px 0 14px; }
.tsth-single .entry-content h3 { font-size: 22px; margin: 28px 0 12px; }
.tsth-single .entry-content p { margin: 0 0 16px; color: #3f443e; font-size: 17px; }
.tsth-single .entry-content ol, .tsth-single .entry-content ul { padding-left: 22px; margin: 0 0 18px; color: #3f443e; font-size: 17px; }
.tsth-single .entry-content ol li, .tsth-single .entry-content ul li { margin: 0 0 8px; padding: 0; }
.tsth-single .entry-content ol li { list-style: decimal; }
.tsth-single .entry-content ul li { list-style: disc; }
.tsth-single .entry-content a { color: var(--tsth-g); text-decoration: underline; text-underline-offset: 3px; }
.tsth-single .entry-content blockquote {
	border-left: 3px solid var(--tsth-g);
	background: var(--tsth-cl);
	padding: 20px 26px;
	border-radius: 0 12px 12px 0;
	font-family: var(--tsth-serif);
	font-style: italic;
	font-size: 20px;
	color: var(--tsth-gx);
	margin: 28px 0;
	line-height: 1.7;
}
.tsth-single .entry-content blockquote::before { content: none; }
.tsth-single .entry-content blockquote p { margin: 0; font-size: inherit; color: inherit; }
.tsth-tags { display: flex; gap: 8px; flex-wrap: wrap; border-top: 1px solid var(--tsth-line); padding-top: 24px; margin-top: 36px; }
.tsth-tags a { background: var(--tsth-cl); padding: 6px 14px; border-radius: 999px; font-size: 13.5px; color: var(--tsth-ink); line-height: 1.7; }
.tsth-tags a:hover { background: var(--tsth-c); }
.tsth-share { display: flex; gap: 10px; align-items: center; margin-top: 18px; font-size: 14px; color: var(--tsth-mut); }
.tsth-share a { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--tsth-line); display: grid; place-items: center; color: var(--tsth-gx); }
.tsth-share a::before { width: 18px; height: 18px; }
.tsth-share a:hover { border-color: var(--tsth-g); color: var(--tsth-g); }

/* 7.3 Post cards (blog_posts .tsth-posts): category · title · excerpt · Đọc tiếp → */
.row.tsth-posts { margin-left: -14px !important; margin-right: -14px !important; width: calc(100% + 28px); max-width: none !important; }
.row.tsth-posts > .col { padding: 0 14px; }
.tsth-posts .box-blog-post .box-image { border-radius: var(--tsth-r); overflow: hidden; }
.tsth-posts .box-blog-post .box-text { padding: 0; font-size: 16px; line-height: 1.7; } /* the design's 16/1.7 strut around the inline-flex "Đọc tiếp" (Flatsome .9em/85 % made the card 0.7 px short) */
.tsth-posts .box-blog-post .image-cover { padding-top: 66.6667% !important; } /* aspect-ratio 3/2 */
.tsth-posts .cat-label { text-transform: none; letter-spacing: 0; font-size: 13px; opacity: 1; color: var(--tsth-mut); margin: 16px 0 6px; line-height: 1.7; font-weight: 400; }
.tsth-posts .post-title { font-size: 21px; line-height: 1.25; margin: 0 0 8px; }
.tsth-posts .post-title a:hover { color: var(--tsth-g); }
.tsth-posts .from_the_blog_excerpt { color: #4a4f49; font-size: 15px; line-height: 1.7; margin: 0; }
.tsth-posts .button.is-link {
	display: inline-flex; gap: 6px; align-items: center;
	color: var(--tsth-g); font-weight: 600; font-size: 15px;
	padding: 0; margin: 10px 0 0 !important; border: 0; line-height: 1.7; min-height: 0;
}
.tsth-posts .button.is-link::after {
	content: ""; width: 22px; height: 22px; flex: none; background: currentColor;
	-webkit-mask: var(--ic-arrow) center / contain no-repeat;
	mask: var(--ic-arrow) center / contain no-repeat;
}
.tsth-posts .box-blog-post:hover .button.is-link { color: var(--tsth-gd); }
.tsth-posts .button.is-link span { line-height: inherit; } /* Flatsome .button span is 1.6 */
@media (max-width: 849px) {
	.row.tsth-posts > .col { padding-bottom: 32px; }
	.row.tsth-posts > .col:last-child { padding-bottom: 0; }
}
@media (max-width: 549px) {
	.row.tsth-posts { margin-left: -18px !important; margin-right: -18px !important; width: calc(100% + 36px); }
	.row.tsth-posts > .col { padding-left: 18px; padding-right: 18px; }
}

/* Flatsome's page-wrapper 30 px paddings off; the category label is plain text, not Flatsome's grey tag. */
.page-wrapper.tsth-single, .page-wrapper.tsth-blog { padding-top: 0; padding-bottom: 0; }
.tsth-posts .cat-label.tag-label { background: none; padding: 0; border-radius: 0; color: var(--tsth-mut); display: block; }

/* 7.4 List: category pills + pagination */
.tsth-pills { display: flex; gap: 10px; flex-wrap: wrap; margin: 0 0 36px; }
.tsth-pills a { border: 1px solid var(--tsth-line); background: #fff; padding: 7px 18px; border-radius: 99px; font-size: 14px; font-weight: 500; color: var(--tsth-ink); line-height: 1.6; }
.tsth-pills a:hover { border-color: var(--tsth-g); color: var(--tsth-g); }
.tsth-pills a.is-on { background: var(--tsth-g); border-color: var(--tsth-g); color: #fff; }
.tsth-blog-list .nav-pagination { margin: 48px 0 0; }
.tsth-blog-list .page-numbers > li > a, .tsth-blog-list .page-numbers > li > span {
	border: 1px solid var(--tsth-line); color: var(--tsth-gx); border-radius: 50%;
	min-width: 42px; height: 42px; line-height: 40px; font-weight: 500;
}
.tsth-blog-list .page-numbers > li > span.current, .tsth-blog-list .page-numbers > li > a:hover { background: var(--tsth-g); border-color: var(--tsth-g); color: #fff; }
.tsth-blog-list { padding-top: 56px !important; }
@media (max-width: 849px) { .tsth-blog-list { padding-top: 40px !important; } }
@media (max-width: 549px) { .tsth-pmeta { gap: 8px 16px; } }

/* ==========================================================================
   8. Pages — Câu chuyện (design page.html), Hỏi đáp (faq.html)
   ========================================================================== */
/* 8.1 Page hero: section .tsth-phero-sec (bg photo + overlay), centred crumb/title/lead */
.section.tsth-phero-sec { padding-top: 110px !important; padding-bottom: 90px !important; }
.tsth-phero-sec .section-bg-overlay { background: rgba(28,44,35,.62) !important; }
.tsth-phero-text .tsth-crumb { justify-content: center; color: rgba(255,255,255,.8); margin: 0 0 14px; line-height: 1.7; }
.tsth-phero-text .tsth-crumb a { color: rgba(255,255,255,.8); }
.tsth-phero-text h1 { color: #fff; margin: 0; line-height: 1.25; }
.tsth-phero-text p { max-width: 620px; margin: 14px auto 0; color: rgba(255,255,255,.92); font-size: 17px; line-height: 1.7; }
@media (max-width: 549px) { .section.tsth-phero-sec { padding-top: 80px !important; padding-bottom: 60px !important; } }

/* 8.2 Five steps: row .tsth-steps (5 cols as a grid with the dashed line) */
.row.tsth-steps {
	display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px;
	position: relative; max-width: 1152px !important; margin: 0 auto !important;
}
.row.tsth-steps::before { content: ""; position: absolute; left: 10%; right: 10%; top: 32px; border-top: 1px dashed var(--tsth-g); opacity: .5; }
.row.tsth-steps > .col { max-width: none; flex-basis: auto; width: auto; padding: 0 !important; position: relative; }
.tsth-step-text { text-align: center; }
.tsth-step-n {
	width: 64px; height: 64px; border-radius: 50%; background: #fff; border: 1px solid var(--tsth-g);
	display: grid; place-items: center; margin: 0 auto 18px; color: var(--tsth-g);
	font-family: var(--tsth-serif); font-size: 24px; line-height: 1; position: relative;
}
.tsth-step-text h3 { font-size: 19px; margin: 0 0 6px; }
.tsth-step-text p { font-size: 14.5px; color: var(--tsth-mut); margin: 0; line-height: 1.7; }
@media (max-width: 1100px) {
	.row.tsth-steps { grid-template-columns: repeat(3, 1fr); }
	.row.tsth-steps::before { display: none; }
}
@media (max-width: 549px) {
	.row.tsth-steps { grid-template-columns: 1fr; }
	.tsth-step-text { display: grid; grid-template-columns: 64px 1fr; gap: 0 16px; text-align: left; }
	.tsth-step-n { margin: 0; grid-row: span 2; }
}

/* 8.3 Values: row .tsth-vals of cards (icon circle, title, text) */
.row.tsth-vals { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; max-width: 1152px !important; margin: 0 auto !important; }
.row.tsth-vals > .col { max-width: none; flex-basis: auto; width: auto; padding: 0 !important; }
.tsth-val > .col-inner { padding: 36px 30px; }
.tsth-val-ic { width: 56px; height: 56px; border-radius: 50%; background: var(--tsth-cl) var(--ic-bg) center / 24px no-repeat; margin-bottom: 18px; }
.tsth-val-text h3 { font-size: 22px; margin: 0; }
.tsth-val-text p { color: var(--tsth-mut); margin: 8px 0 0; font-size: 15px; line-height: 1.7; }
@media (max-width: 849px) { .row.tsth-vals { grid-template-columns: 1fr; gap: 32px; } }

/* 8.4 Quote band */
.tsth-quote p small { display: block; }
.tsth-quote-sec .tsth-center { margin-top: 44px; }
.tsth-center .button { margin: 0; }

/* 8.5 Fixes after compare #1 (about page) */
/* Flatsome's clearfix .row::after becomes an extra grid item (+1 row gap): off on the grid rows. */
.row.tsth-steps::after, .row.tsth-vals::after { content: none; display: none; }
/* Grid rows keep the design's 24 px gutters (18 px on phones). */
.row.tsth-steps, .row.tsth-vals { width: calc(100% - 48px); }
@media (max-width: 549px) { .row.tsth-steps, .row.tsth-vals { width: calc(100% - 36px); } }
/* Split: Flatsome gives an image followed by another element 1em bottom margin; design columns 553 | 72 | 527. */
.col-inner > .img.tsth-split-img { margin-bottom: 0; }
@media (min-width: 850px) {
	.row.tsth-split > .tsth-split-media { flex-basis: 49.33%; max-width: 49.33%; }
	.row.tsth-split > .tsth-split-body { flex-basis: 50.67%; max-width: 50.67%; padding-left: 57px !important; }
}
/* Buttons: the design's arrow icon and 14 px padding with the body line height. */
.button i.icon-angle-right { width: 18px; height: 18px; background: currentColor; -webkit-mask: var(--ic-arrow) center / contain no-repeat; mask: var(--ic-arrow) center / contain no-repeat; font-size: 0; }
.button i.icon-angle-right::before { content: none; }
.tsth-center .button, .tsth-center .button span { padding: 14px 28px; line-height: 1.7; }
.tsth-center .button span { padding: 0; }
/* 8.6 FAQ: nav column 280 | 56 | groups; accordion items with + / – */
.row.tsth-faqgrid { display: grid; grid-template-columns: 280px 1fr; gap: 56px; max-width: 1152px !important; width: calc(100% - 48px); margin: 0 auto !important; }
.row.tsth-faqgrid::after { content: none; display: none; }
.row.tsth-faqgrid > .col { max-width: none; flex-basis: auto; width: auto; padding: 0 !important; min-width: 0; }
.tsth-faqnav-col > .col-inner { position: sticky; top: 110px; }
.tsth-faqnav { display: block; }
.tsth-faqnav a { display: flex; gap: 12px; align-items: center; padding: 12px 16px; border-radius: 12px; font-weight: 500; margin-bottom: 4px; color: var(--tsth-ink); line-height: 1.7; }
.tsth-faqnav a::before { width: 20px; height: 20px; }
.tsth-faqnav a.is-on, .tsth-faqnav a:hover { background: var(--tsth-cl); color: var(--tsth-g); }
.tsth-faqgroup-h h2 { font-size: 28px; margin: 0 0 18px; scroll-margin-top: 110px; }
.tsth-faqgroup-h { scroll-margin-top: 110px; }
.accordion.tsth-faq { margin-bottom: 44px; }
.tsth-faq .accordion-item { margin-bottom: 12px; border-radius: 12px; }
.tsth-faq .accordion-title {
	display: flex; justify-content: space-between; align-items: center; gap: 16px;
	padding: 18px 22px; font-size: 16px; line-height: 1.7; border: 0;
}
.tsth-faq .accordion-title .toggle { display: none; }
.tsth-faq .accordion-title::after { content: "+"; font-size: 24px; color: var(--tsth-g); font-weight: 300; line-height: 1; font-family: var(--tsth-sans); }
.tsth-faq .accordion-title.active::after { content: "–"; }
.tsth-faq .accordion-inner { padding: 0 22px 20px; }
.tsth-faq .accordion-inner p { margin: 0; color: #4a4f49; line-height: 1.7; }
.tsth-faq .accordion-inner a { color: var(--tsth-g); text-decoration: underline; text-underline-offset: 3px; }
.tsth-ask-text h2 { margin: 0; }
.tsth-ask-text p { color: var(--tsth-mut); margin: 10px 0 24px; line-height: 1.7; }
.tsth-ask .tsth-center { margin-top: 0; }
@media (max-width: 849px) {
	.row.tsth-faqgrid { grid-template-columns: 1fr; gap: 32px; }
	.tsth-faqnav-col > .col-inner { position: static; }
	.tsth-faqnav { display: flex; gap: 6px; overflow-x: auto; }
	.tsth-faqnav a { white-space: nowrap; margin: 0; flex: none; }
}
@media (max-width: 549px) { .row.tsth-faqgrid { width: calc(100% - 36px); } }

/* Tablet: the design keeps 24 px gutters (Flatsome rows give 15 px). */
@media (min-width: 550px) and (max-width: 1199px) {
	.section[class*="tsth-"] .section-content > .row:not(.tsth-steps):not(.tsth-vals):not(.tsth-cta):not(.tsth-faqgrid):not(.tsth-contact):not(.tsth-footer-cols) { padding-left: 9px; padding-right: 9px; }
}

/* ==========================================================================
   9. Shop + product categories (design product-category.html)
   ========================================================================== */
/* 9.1 Title band (woocommerce/layouts/headers/category-title.php) */
.shop-page-title.tsth-band { margin: 0; }
.tsth-band .shop-page-title-h { font-size: clamp(30px, 4vw, 44px); text-transform: none; letter-spacing: 0; }
/* 9.2 Layout: sidebar 260 | 44 | products, 1200 wide */
.row.category-page-row {
	display: grid; grid-template-columns: 260px 1fr; gap: 44px;
	max-width: 1200px !important; margin: 0 auto; padding: 48px 0 88px;
}
.row.category-page-row::before, .row.category-page-row::after { content: none; display: none; }
.row.category-page-row > .col { max-width: none; flex-basis: auto; width: auto; padding: 0; min-width: 0; }
.category-page-row .shop-container { padding: 0; }
@media (max-width: 1240px) { .row.category-page-row { padding-left: 24px; padding-right: 24px; } }
@media (max-width: 1100px) {
	.row.category-page-row { grid-template-columns: 1fr; }
	.row.category-page-row > .col:first-child { display: none; }
}
@media (max-width: 549px) { .row.category-page-row { padding: 40px 18px 60px; } }
/* 9.3 Sidebar widgets */
#shop-sidebar .widget { margin-bottom: 34px; }
#shop-sidebar .widget-title {
	display: block; font-family: var(--tsth-sans); font-size: 14px; font-weight: 600; letter-spacing: .14em;
	text-transform: uppercase; color: var(--tsth-gx); margin: 0 0 14px; padding-bottom: 10px; border-bottom: 1px solid var(--tsth-line); line-height: 1.7;
}
#shop-sidebar .is-divider { display: none; }
#shop-sidebar ul.product-categories { margin: 0; list-style: none; }
#shop-sidebar .product-categories li { display: flex; justify-content: space-between; align-items: center; padding: 0; margin: 0; border: 0; list-style: none; }
#shop-sidebar .product-categories li a { display: block; flex: 1; padding: 7px 0; color: #4a4f49; font-size: 15px; line-height: 1.7; }
#shop-sidebar .product-categories li .count { color: var(--tsth-mut); font-size: 13px; opacity: 1; }
#shop-sidebar .product-categories li.current-cat > a, #shop-sidebar .product-categories li a:hover { color: var(--tsth-g); font-weight: 600; }
#shop-sidebar .product-categories .children { display: block; padding-left: 14px; flex-basis: 100%; }
#shop-sidebar .product-categories .toggle { display: none; }
.tsth-side-promo { min-height: 0; }
.tsth-side-promo .overlay { background: linear-gradient(0deg, rgba(28,44,35,.85), rgba(28,44,35,0) 65%) !important; }
.tsth-side-promo .tsth-promo-text h3 { margin: 0; }
/* 9.4 Category card */
.tsth-catdesc { display: grid; grid-template-columns: 1fr 280px; gap: 32px; align-items: center; background: var(--tsth-cl); border-radius: var(--tsth-r); padding: 28px 32px; margin-bottom: 28px; }
.tsth-catdesc-text h2 { font-size: 28px; margin: 0; }
.tsth-catdesc-text p { color: #4a4f49; font-size: 15px; margin: 8px 0 0; line-height: 1.7; }
.tsth-catdesc-img { display: block; width: 100%; border-radius: 12px; aspect-ratio: 16 / 10; object-fit: cover; }
@media (max-width: 849px) { .tsth-catdesc { grid-template-columns: 1fr; } }
/* 9.5 Bar: count · filter button · sorting */
.tsth-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 22px; font-size: 14px; color: var(--tsth-mut); }
.tsth-bar .woocommerce-result-count { margin: 0; font-size: 14px; color: var(--tsth-mut); line-height: 1.7; }
.tsth-bar .woocommerce-ordering { margin: 0; }
.tsth-bar .woocommerce-ordering select { font: inherit; font-size: 14px; height: auto; padding: 9px 34px 9px 14px; border: 1px solid var(--tsth-line); border-radius: 8px; background-color: #fff; box-shadow: none; margin: 0; color: var(--tsth-ink); }
.tsth-filtbtn { display: none; padding: 8px 16px; font-size: 14px; }
.tsth-filtbtn .tsth-ic::before { width: 16px; height: 16px; }
@media (max-width: 1100px) { .tsth-filtbtn { display: inline-flex; margin-left: auto; } }
/* 9.6 Product grid: 3 columns (2 below 1100 px), 24 px gutters (14 px on phones) */
.category-page-row .products.row { margin: 0 -12px !important; width: calc(100% + 24px); max-width: none !important; }
.category-page-row .products.row > .col { padding: 0 12px 24px; }
@media (min-width: 550px) and (max-width: 1100px) { .category-page-row .products.row > .col { flex-basis: 50%; max-width: 50%; } }
@media (max-width: 549px) {
	.category-page-row .products.row { margin: 0 -7px !important; width: calc(100% + 14px); }
	.category-page-row .products.row > .col { padding: 0 7px 14px; }
}
.category-page-row .product-small .box-image .image-tools { display: none; }
/* Product card category label: Flatsome's no-text-overflow clips the capital accents (À, Á). */
.product-small .box-text .category { line-height: 1.7; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.tsth-cta-acts .button, .tsth-cta-acts .button span { line-height: 1.7; }
.tsth-cta-acts .button { padding: 14px 28px; }
/* Flatsome's result-count template hides it below 850 px: the design keeps it in the bar. */
.tsth-bar .woocommerce-result-count { display: block !important; }
@media (max-width: 549px) { .tsth-bar { gap: 8px; } .tsth-bar .woocommerce-ordering select { padding-right: 28px; max-width: 150px; } }
/* 9.7 Pagination */
.category-page-row .woocommerce-pagination { margin-top: 20px; }
.category-page-row .page-numbers.nav-pagination { justify-content: center; gap: 8px; }
.category-page-row .page-numbers > li > a, .category-page-row .page-numbers > li > span {
	width: 42px; height: 42px; min-width: 42px; line-height: 40px; border-radius: 50%; border: 1px solid var(--tsth-line); font-weight: 600; color: var(--tsth-ink); margin: 0;
}
.category-page-row .page-numbers > li > span.current, .category-page-row .page-numbers > li > a:hover { background: var(--tsth-g); border-color: var(--tsth-g); color: #fff; }

/* ==========================================================================
   10. Contact (design contact.html)
   ========================================================================== */
.section.tsth-phero-contact { padding-top: 90px !important; padding-bottom: 70px !important; }
/* 10.1 Two columns 1fr | 1.25fr, gap 56 */
.row.tsth-contact { display: grid; grid-template-columns: 1fr 1.25fr; gap: 56px; align-items: stretch; max-width: 1152px !important; width: calc(100% - 48px); margin: 0 auto !important; }
.row.tsth-contact::after, .row.tsth-contact::before { content: none; display: none; }
.row.tsth-contact > .col { max-width: none; flex-basis: auto; width: auto; padding: 0 !important; min-width: 0; }
@media (max-width: 849px) { .row.tsth-contact { grid-template-columns: 1fr; gap: 32px; } }
@media (max-width: 549px) { .row.tsth-contact { width: calc(100% - 36px); } }
/* 10.2 Info rows */
.tsth-cinfo-text { margin: 0; }
.tsth-cinfo-text h2 { margin: 0; line-height: 1.25; }
.tsth-ci-row { display: flex; gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--tsth-line); line-height: 1.7; }
.tsth-ci-row b { display: block; color: var(--tsth-gx); font-weight: 600; }
.tsth-ci-row span:not(.tsth-ci) { color: var(--tsth-body); font-size: 15px; }
.tsth-ci { width: 50px; height: 50px; border-radius: 50%; background: var(--tsth-cl); display: grid; place-items: center; color: var(--tsth-g); flex: none; }
.tsth-ci.tsth-ic::before { width: 20px; height: 20px; }
/* 10.3 Quick-order note */
.text.tsth-note, .tsth-note { background: var(--tsth-cl); border-radius: var(--tsth-r); padding: 28px 32px; display: flex; gap: 20px; align-items: center; margin-top: 28px; }
.tsth-note .tsth-ci { width: 54px; height: 54px; background: var(--tsth-g); color: #fff; }
.tsth-note h3 { font-size: 20px; margin: 0; line-height: 1.25; }
.tsth-note p { color: var(--tsth-body); font-size: 15px; margin: 4px 0 0; line-height: 1.7; }
@media (max-width: 549px) { .text.tsth-note, .tsth-note { flex-direction: column; align-items: flex-start; } }
/* 10.4 Form fields like the design: textarea 130 px, native select arrow, 16 px row gap when stacked */
.wpcf7 textarea { height: 130px; }
.wpcf7 select { -webkit-appearance: auto; appearance: auto; background-image: none; }
@media (max-width: 549px) { .tsth-fg { gap: 16px; } }
.tsth-contact .tsth-form > .col-inner { height: 100%; }
.tsth-form .wpcf7 form, .tsth-form .wpcf7 { margin-bottom: 0; }
/* 10.5 Form card head + submit arrow */
.tsth-form-head h2 { font-size: 30px; margin: 0 0 6px; line-height: 1.25; }
.tsth-form-head p { color: var(--tsth-mut); margin: 0 0 26px; line-height: 1.7; }
.tsth-form .wpcf7 input[type="submit"].wpcf7-submit {
	padding-right: 56px; background-image: var(--ic-arrow-w); background-repeat: no-repeat; background-position: right 28px center; background-size: 18px 18px;
}

/* ==========================================================================
   11. Single product (woocommerce/content-single-product.php, design product.html)
   ========================================================================== */
/* 11.1 Wrap 1200 (24 px sides, 18 on phones) + title band with the crumb only */
.tsth-wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
@media (max-width: 549px) { .tsth-wrap { padding: 0 18px; } }
.tsth-titleband.tsth-pd-band { padding: 22px 0; }
.tsth-pd-band .tsth-crumb { margin: 0; line-height: 1.7; }
/* 11.2 Gallery 1.05fr | info 1fr, gap 64 (one column below 850 px) */
.tsth-pd { display: grid; grid-template-columns: 1.05fr 1fr; gap: 64px; padding-top: 40px; padding-bottom: 72px; }
.tsth-pd > * { min-width: 0; }
/* The design's .pd drops the wrap's side padding: 1200 px of content where the screen allows. */
@media (min-width: 1248px) { .tsth-pd { padding-left: 0; padding-right: 0; } }
@media (max-width: 849px) { .tsth-pd { grid-template-columns: 1fr; gap: 32px; } }
.tsth-gal-main { border-radius: var(--tsth-r); overflow: hidden; aspect-ratio: 1; background: var(--tsth-cl); }
.tsth-gal-main img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tsth-gal-th { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 12px; }
.tsth-gal-th .tsth-th {
	display: block; margin: 0; padding: 0; min-height: 0; aspect-ratio: 1; line-height: 0;
	border: 2px solid transparent; border-radius: 10px !important; overflow: hidden; background: none; box-shadow: none; cursor: pointer;
}
.tsth-gal-th .tsth-th.is-on { border-color: var(--tsth-g); }
.tsth-gal-th .tsth-th img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* 11.3 Info: category, title, price, short description, buy row, perks, categories */
.tsth-pd-ct { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--tsth-g); font-weight: 600; line-height: 1.7; }
.tsth-pd-info h1 { font-size: clamp(30px, 3.2vw, 40px); margin: 8px 0 14px; line-height: 1.25; }
.tsth-pd-price { font-size: 28px; font-weight: 700; color: var(--tsth-gx); line-height: 1.7; }
.tsth-pd-price del { font-size: 18px; font-weight: 400; color: var(--tsth-mut); }
.tsth-pd-short { color: var(--tsth-body); font-size: 16px; line-height: 1.7; margin: 18px 0 24px; padding-bottom: 24px; border-bottom: 1px solid var(--tsth-line); }
.tsth-pd-short p { margin: 0; }
.tsth-pd-short p + p { margin-top: 12px; }
.tsth-pd-buy { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 24px; }
.tsth-pd-buy .button.tsth-pd-btn, .tsth-pd-buy .single_add_to_cart_button.button {
	flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 52px; min-width: 180px; min-height: 0;
	margin: 0; padding: 0 28px; border-radius: 999px; font-size: 15px; font-weight: 600; line-height: 1; text-transform: none; letter-spacing: 0;
}
.tsth-pd-btn .tsth-ic::before { width: 22px; height: 22px; }
.tsth-pd-buy .single_add_to_cart_button::before {
	content: ""; width: 22px; height: 22px; background: currentColor;
	-webkit-mask: var(--ic-bag) center / contain no-repeat; mask: var(--ic-bag) center / contain no-repeat;
}
.tsth-pd-buy form.cart { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; width: 100%; margin: 0; }
.tsth-pd-buy .quantity { display: flex; align-items: center; height: 52px; margin: 0; border: 1px solid var(--tsth-line); border-radius: 999px; opacity: 1; }
.tsth-pd-buy .quantity .button.minus, .tsth-pd-buy .quantity .button.plus {
	width: 44px; height: 100%; min-height: 0; margin: 0; padding: 0; border: 0; background: none; box-shadow: none; font-size: 20px; color: var(--tsth-gx);
}
.tsth-pd-buy .quantity input.qty { width: 44px; height: 100%; margin: 0; padding: 0; border: 0; background: none; box-shadow: none; font-weight: 600; text-align: center; }
.tsth-perks { display: grid; gap: 12px; background: var(--tsth-cl); border-radius: var(--tsth-r); padding: 20px 22px; font-size: 14.5px; line-height: 1.7; color: var(--tsth-ink); }
.tsth-perks > div { display: flex; gap: 12px; align-items: center; }
.tsth-perks .tsth-ic { color: var(--tsth-g); flex: none; display: inline-flex; }
.tsth-perks .tsth-ic::before { width: 22px; height: 22px; }
.tsth-pd-meta { font-size: 14px; color: var(--tsth-mut); margin: 20px 0 0; line-height: 1.7; }
.tsth-pd-meta a { color: inherit; }
.tsth-pd-meta a:hover { color: var(--tsth-g); }
/* 11.4 Tabs: centred list, 820 px pane (24/18 px sides on narrow screens; the design keeps none) */
.tsth-tabs { border-top: 1px solid var(--tsth-line); }
.tsth-tl { display: flex; gap: 36px; justify-content: center; border-bottom: 1px solid var(--tsth-line); }
.tsth-tl a { padding: 18px 0; font-size: 16px; font-weight: 600; line-height: 1.7; color: var(--tsth-mut); }
.tsth-tl a:hover { color: var(--tsth-gx); }
.tsth-tl a.is-on { color: var(--tsth-gx); box-shadow: inset 0 -2px 0 var(--tsth-g); }
.tsth-tc { max-width: 820px; margin: 0 auto; padding: 40px 0 64px; color: var(--tsth-body); font-size: 16px; line-height: 1.7; }
@media (max-width: 867px) { .tsth-tc { padding-left: 24px; padding-right: 24px; } }
.tsth-pane { display: none; }
.tsth-pane.is-on { display: block; }
.tsth-pane h3 { margin: 22px 0 10px; font-size: 22px; line-height: 1.25; }
.tsth-pane p { margin: 0 0 12px; }
.tsth-pane ul { list-style: disc; padding-left: 20px; margin: 0 0 12px; }
.tsth-pane li { margin: 0; }
@media (max-width: 549px) {
	.tsth-tl { gap: 20px; overflow-x: auto; justify-content: flex-start; padding: 0 18px; }
	.tsth-tl a { white-space: nowrap; }
	.tsth-tc { padding-left: 18px; padding-right: 18px; }
}
/* 11.5 Related products: cream section, 4 cards (2 below 1100 px) */
.tsth-related { background: var(--tsth-cl); padding: var(--tsth-sec) 0; }
@media (min-width: 850px) and (max-width: 1100px) { .tsth-related .tsth-prods > .col { flex-basis: 50%; max-width: 50%; } }

/* ==========================================================================
   12. Quà tặng doanh nghiệp (page dich-vu, layout of design page.html)
   ========================================================================== */
/* 12.1 Four-step process: same steps grid, 4 columns (2 below 1100 px, 1 on phones) */
.row.tsth-steps.tsth-steps-4 { grid-template-columns: repeat(4, 1fr); }
.row.tsth-steps.tsth-steps-4::before { left: 12.5%; right: 12.5%; }
@media (max-width: 1100px) { .row.tsth-steps.tsth-steps-4 { grid-template-columns: repeat(2, 1fr); gap: 32px 20px; } }
@media (max-width: 549px) { .row.tsth-steps.tsth-steps-4 { grid-template-columns: 1fr; gap: 24px; } }
/* 12.2 Gift categories: square tiles, landscape on phones (one per row) */
@media (max-width: 549px) { .tsth-gifts-sec .tsth-cats .box-image .image-cover { padding-top: 62% !important; } }
/* 12.3 Quote form band: text column + form card on #e8d8c3 */
.tsth-quote-form .tsth-cinfo { align-self: center; }
.tsth-quote-form .tsth-cinfo-text p { color: var(--tsth-mut); margin: 14px 0 22px; line-height: 1.7; }
.tsth-quote-form .tsth-ticks ul { margin-bottom: 0; }
.anchor-bao-gia, #bao-gia { scroll-margin-top: 120px; }

/* ==========================================================================
   13. Policy page (chinh-sach-mua-hang): narrow prose like the article (7.2)
   ========================================================================== */
.tsth-policy h2 { font-size: 26px; margin: 34px 0 12px; line-height: 1.25; }
.tsth-policy h2:first-child { margin-top: 0; }
.tsth-policy p, .tsth-policy ul { margin: 0 0 16px; color: #3f443e; font-size: 17px; line-height: 1.7; }
.tsth-policy ul { padding-left: 22px; }
.tsth-policy ul li { list-style: disc; margin: 0 0 8px; padding: 0; }
.tsth-policy a { color: var(--tsth-g); text-decoration: underline; text-underline-offset: 3px; }
.tsth-policy > :last-child { margin-bottom: 0; }
@media (max-width: 549px) { .tsth-policy h2 { font-size: 23px; } .tsth-policy p, .tsth-policy ul { font-size: 16px; } }

/* ==========================================================================
   14. Fix round 1 — shared chrome like design index.html (top bar outside
   the header, 84 + 1 px sticky header, nav box, outline icons, mega panel,
   mobile panel, footer bottom line)
   ========================================================================== */
/* 14.1 Top bar (inc/header.php, printed before #header) */
.tsth-topbar-bar { background: var(--tsth-gx); color: #e9e2d6; font-size: 13px; }
.tsth-topbar-wrap.container { display: flex; justify-content: space-between; align-items: center; height: 38px; gap: 16px; }
.tsth-topbar-bar .tsth-topbar { font-size: 13px; color: #e9e2d6; line-height: 1.7; white-space: nowrap; }
.tsth-topbar-bar .tsth-topbar b { color: #fff; font-weight: 500; }
.tsth-topbar-ico {
	display: inline-block; width: 16px; height: 16px; margin-right: 6px; vertical-align: -3px;
	background: currentColor;
	-webkit-mask: var(--ic-truck) center / contain no-repeat;
	mask: var(--ic-truck) center / contain no-repeat;
}
@media (max-width: 560px) {
	.tsth-topbar-bar .tsth-topbar--r { display: none; }
	.tsth-topbar-wrap.container { justify-content: center; font-size: 12px; height: auto; min-height: 36px; padding-top: 7px; padding-bottom: 7px; text-align: center; }
	.tsth-topbar-bar .tsth-topbar { font-size: 12px; line-height: 1.5; white-space: normal; }
}

/* 14.2 Header bar: sticky by CSS, 84 px + 1 px line (68 + 1 below 850 px) */
#header.header { position: sticky; top: 0; z-index: 1001; }
@media (min-width: 850px) { .admin-bar #header.header { top: 32px; } }
#header .header-wrapper { box-shadow: none; }
#masthead .top-divider { display: none; }
.back-to-top { display: none !important; }
#masthead { position: relative; }
#masthead .header-inner, #masthead .header-inner > .flex-col, #masthead .header-nav-main, #masthead .header-nav-main > li.menu-item-design-full-width { position: static; }

/* 14.3 Logo: name inline in a 16 px / 1.7 line, place below (design .logo) */
#logo { margin: 0 32px 0 0; }
.tsth-logo, #logo a.tsth-logo { display: flex; align-items: center; gap: 12px; }
.tsth-logo__text { display: block; font-family: var(--tsth-sans); font-size: 16px; line-height: 1.7; font-weight: 400; text-transform: none; }
.tsth-logo__name { display: inline; line-height: 1; }
.tsth-logo__place { display: block; line-height: 1.7; }
.tsth-footer .tsth-logo__text { font-size: 15px; }
@media (max-width: 560px) {
	.tsth-logo__mark { width: 38px; height: 38px; }
	.tsth-logo__name { font-size: 20px; }
}

/* 14.4 Main nav: 8/11 px boxes 4 px apart, centred in the bar; current = 2 px line under the box */
#masthead .header-nav-main { gap: 4px; flex-wrap: nowrap; }
#masthead .header-nav-main > li { margin: 0; }
#masthead .header-nav-main > li.menu-item > a {
	padding: 8px 11px;
	line-height: 1.7;
	font-size: 14.5px;
	font-weight: 500;
	white-space: nowrap;
	flex-wrap: nowrap;
	gap: 4px;
	border-radius: 8px;
	color: var(--tsth-ink);
}
#masthead .header-nav-main > li.menu-item > a:hover,
#masthead .header-nav-main > li.current-menu-item > a,
#masthead .header-nav-main > li.active > a { color: var(--tsth-g); }
#masthead .header-nav-main > li.current-menu-item > a,
#masthead .header-nav-main > li.active > a { box-shadow: inset 0 -2px 0 var(--tsth-g); border-radius: 0; }
#masthead .header-nav-main .icon-angle-down {
	width: 14px; height: 14px; margin: 0; font-size: 0; opacity: 1; top: 0;
	background: currentColor;
	-webkit-mask: var(--ic-down) center / contain no-repeat;
	mask: var(--ic-down) center / contain no-repeat;
}
#masthead .header-nav-main .icon-angle-down::before { content: none; }

/* 14.5 Tools: 42 px round buttons with 22 px outline icons; pink count badge */
#masthead .header-nav-main > li.header-search { margin-left: 28px; }
#masthead .header-nav-main > li.account-item, #masthead .header-nav-main > li.cart-item { margin-left: 2px; }
#masthead .mobile-nav { gap: 6px; flex-wrap: nowrap; }
#masthead .mobile-nav > li { margin: 0; }
#masthead li.header-search > a, #masthead li.account-item > a, #masthead li.cart-item > a, #masthead li.nav-icon > a {
	width: 42px; height: 42px; padding: 0; margin: 0;
	display: grid; place-items: center;
	border-radius: 50%;
	position: relative;
	color: var(--tsth-gx);
	font-size: 0; line-height: 1;
	box-shadow: none;
	background: transparent;
}
#masthead li.header-search > a:hover, #masthead li.account-item > a:hover, #masthead li.cart-item > a:hover, #masthead li.nav-icon > a:hover { background: var(--tsth-cl); color: var(--tsth-gx); }
#masthead li.header-search > a::before, #masthead li.account-item > a::before, #masthead li.cart-item > a::before, #masthead li.nav-icon > a::before {
	content: ""; display: block; width: 22px; height: 22px;
	background: currentColor;
	-webkit-mask: var(--tsth-tool) center / contain no-repeat;
	mask: var(--tsth-tool) center / contain no-repeat;
}
#masthead li.header-search > a { --tsth-tool: var(--ic-search); }
#masthead li.account-item > a { --tsth-tool: var(--ic-user); }
#masthead li.cart-item > a { --tsth-tool: var(--ic-bag); }
#masthead li.nav-icon > a { --tsth-tool: var(--ic-menu); }
#masthead li.header-search > a > *, #masthead li.account-item > a > *, #masthead li.nav-icon > a > * { display: none; }
#masthead li.cart-item > a .cart-icon { display: contents; }
#masthead li.cart-item > a .cart-icon strong {
	position: absolute; top: 3px; right: 2px;
	width: 18px; height: 18px; margin: 0; padding: 0;
	display: grid; place-items: center;
	border: 0; border-radius: 50%;
	background: var(--tsth-pink); color: #fff;
	font: 700 11px/1 var(--tsth-sans);
}
#masthead li.cart-item > a .cart-icon strong::after { content: none; display: none; }

/* 14.6 Mega panel ("Sản phẩm" → UX Block 26): under the bar, full width */
#masthead li.menu-item-design-full-width > .nav-dropdown {
	position: absolute !important;
	top: 100% !important; left: 0 !important; right: 0 !important;
	width: auto !important; max-width: none !important; min-width: 0;
	margin: 0 !important; transform: none !important;
	display: block;
	padding: 0;
	background: #fff;
	border: 0; border-top: 1px solid var(--tsth-line); border-radius: 0;
	box-shadow: 0 24px 40px -20px rgba(44,66,54,.25);
}
.nav-dropdown .row.tsth-mega {
	display: grid; grid-template-columns: 1fr 1fr 1.3fr; gap: 40px;
	max-width: 1200px !important; width: auto; margin: 0 auto;
	padding: 36px 24px 40px;
}
.nav-dropdown .row.tsth-mega::before, .nav-dropdown .row.tsth-mega::after { display: none; }
.nav-dropdown .row.tsth-mega > .col { max-width: none; flex-basis: auto; width: auto; padding: 0 !important; margin: 0; }
.nav-dropdown .row.tsth-mega > .col > .col-inner { height: 100%; }
.nav-dropdown .tsth-mega-title h4 { font: 600 13px/1.25 var(--tsth-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--tsth-g); margin: 0 0 16px; }
.nav-dropdown .tsth-mega a.plain { display: block; color: var(--tsth-ink); }
.nav-dropdown .tsth-mega .tsth-mega-item { display: flex; align-items: center; gap: 12px; padding: 8px 0; margin: 0; }
.nav-dropdown .tsth-mega .tsth-mega-item .icon-box-img { width: 44px !important; flex: none; margin: 0 !important; }
.nav-dropdown .tsth-mega .tsth-mega-item .icon-box-img .icon, .nav-dropdown .tsth-mega .tsth-mega-item .icon-inner { display: block; }
.nav-dropdown .tsth-mega .tsth-mega-item .icon-box-img img { display: block; width: 44px; height: 44px; object-fit: cover; border-radius: 10px; }
.nav-dropdown .tsth-mega .tsth-mega-item .icon-box-text { padding: 0; }
.nav-dropdown .tsth-mega .tsth-mega-item h5 { font: 500 16px/1.7 var(--tsth-sans); text-transform: none; letter-spacing: 0; color: var(--tsth-ink); margin: 0; }
.nav-dropdown .tsth-mega .tsth-mega-item p { font-size: 13px; line-height: 1.3; font-weight: 400; color: var(--tsth-mut); margin: 0; }
.nav-dropdown .tsth-mega a.plain:hover h5 { color: var(--tsth-g); }
.nav-dropdown .tsth-mega .tsth-promo { padding-top: 0 !important; height: 100%; min-height: 230px; border-radius: var(--tsth-r); }
.nav-dropdown .tsth-mega .tsth-promo .banner-layers { padding: 0; }
.nav-dropdown .tsth-promo-text .tsth-eyebrow { color: var(--tsth-c); margin: 0 0 14px; line-height: 1.7; }
.nav-dropdown .tsth-promo-text h3 { font-size: 22px; line-height: 1.25; margin: 0; color: #fff; }
.nav-dropdown .tsth-promo-text p { font-size: 14px; line-height: 1.7; margin: 0; color: rgba(255,255,255,.9); }
.nav-dropdown .tsth-promo-text .tsth-link { display: inline-block; margin-top: 8px; font-size: 16px; line-height: 1.7; font-weight: 600; color: #fff; border-bottom: 1px solid #fff; }

/* 14.7 Mobile panel (template-parts/overlays/overlay-menu.php) */
html .off-canvas-left .mfp-content { --drawer-width: min(86vw, 360px); background: var(--tsth-bg); box-shadow: none; }
.mfp-bg.main-menu-overlay { background-color: #000 !important; }
.mfp-bg.main-menu-overlay.mfp-ready { opacity: .45 !important; }
.off-canvas .mfp-close:not(.tsth-mnav-close) { display: none !important; }
.off-canvas #main-menu .tsth-mnav-pn { padding: 22px; background: var(--tsth-bg); height: auto; }
.tsth-mnav { color: var(--tsth-ink); font-family: var(--tsth-sans); font-size: 16px; line-height: 1.7; }
.tsth-mnav .tsth-svg { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.tsth-mnav-x { display: flex; justify-content: space-between; align-items: center; margin: 0 0 18px; }
.tsth-mnav-x .tsth-logo { color: var(--tsth-gx); }
#main-menu button.tsth-mnav-close {
	position: static !important; top: auto !important; right: auto;
	display: inline-flex; align-items: center; justify-content: center;
	width: auto; height: auto; min-height: 0; margin: 0 !important; padding: 0;
	background: none; border: 0; border-radius: 0; box-shadow: none;
	color: var(--tsth-gx); opacity: 1; mix-blend-mode: normal;
	font-size: 16px; line-height: 1; transform: none; cursor: pointer;
}
.tsth-mnav-srch { display: flex; align-items: center; gap: 8px; border: 1px solid var(--tsth-line); border-radius: 999px; padding: 10px 16px; margin: 0 0 12px; color: var(--tsth-mut); font-size: 14px; line-height: 1.7; }
#main-menu .tsth-mnav-srch input[type="search"] {
	flex: 1; min-width: 0; height: 23.8px; margin: 0; padding: 0;
	border: 0; border-radius: 0; box-shadow: none; background: transparent;
	font: 400 14px/1.7 var(--tsth-sans); color: var(--tsth-ink);
	-webkit-appearance: none; appearance: none;
}
#main-menu .tsth-mnav-srch input[type="search"]::placeholder { color: var(--tsth-mut); opacity: 1; }
#main-menu .tsth-mnav-list, #main-menu .tsth-mnav-list ul { list-style: none; margin: 0; padding: 0; }
#main-menu .tsth-mnav-list li { list-style: none; margin: 0; padding: 0; }
#main-menu .tsth-mnav-list li > a, #main-menu .tsth-mnav-list summary {
	display: flex; justify-content: space-between; align-items: center; gap: 16px;
	padding: 14px 4px; border-bottom: 1px solid var(--tsth-line);
	font-size: 16px; line-height: 1.7; font-weight: 500; color: var(--tsth-ink);
	text-transform: none; letter-spacing: 0;
}
#main-menu .tsth-mnav-list details { border: 0; border-radius: 0; margin: 0; padding: 0; background: none; }
#main-menu .tsth-mnav-list summary { list-style: none; cursor: pointer; }
#main-menu .tsth-mnav-list summary::-webkit-details-marker { display: none; }
#main-menu .tsth-mnav-list summary::after { content: "+"; font-size: 24px; color: var(--tsth-g); font-weight: 300; line-height: 1; }
#main-menu .tsth-mnav-list details[open] summary::after { content: "–"; }
#main-menu .tsth-mnav-list details ul { padding: 6px 0 10px 14px; }
#main-menu .tsth-mnav-list details li a { padding: 9px 4px; border: 0; font-size: 15px; color: var(--tsth-body); font-weight: 400; }
#main-menu .tsth-mnav-list details b { display: block; font-size: 12px; line-height: 1.7; letter-spacing: .14em; text-transform: uppercase; color: var(--tsth-g); margin: 10px 4px 2px; font-weight: 700; }

/* 14.8 Footer bottom line: inset to the content width, like .ftr .bot (border under its .75 opacity) */
.absolute-footer { border-top: 0; padding-top: 0; }
.absolute-footer .container {
	padding-top: 23px; /* the 1 px line + 22 px, like border-top + padding of .bot */
	background: linear-gradient(rgba(255,255,255,.09), rgba(255,255,255,.09)) 24px 0 / calc(100% - 48px) 1px no-repeat;
}
@media (max-width: 549px) {
	.absolute-footer .container { background-position: 18px 0; background-size: calc(100% - 36px) 1px; }
}

/* 14.9 Mega panel open state: Flatsome keeps .nav-dropdown at max-height 0 (1 px tall panel);
   the promo is 230 px under the columns, not stretched to the row (design .promo) */
#masthead li.menu-item-design-full-width.current-dropdown > .nav-dropdown,
#masthead li.menu-item-design-full-width:hover > .nav-dropdown { max-height: none !important; height: auto; }
/* Flatsome's JS writes inset: <top> 0 0 inline, so bottom 0 squeezed the panel to its border */
#masthead li.menu-item-design-full-width > .nav-dropdown { bottom: auto !important; }
.nav-dropdown .tsth-mega .tsth-promo { height: auto !important; }
/* the eyebrow (inline-flex) and the link (inline-block) sit on the design's 16/1.7 line boxes */
.nav-dropdown .tsth-promo-text { font-size: 16px; line-height: 1.7; }
.nav-dropdown .row.tsth-mega > .col > .col-inner { height: auto; }

/* 14.10 Section heads and buttons like the design: eyebrow on a 1.7 line (22.1 px, design .eyebrow),
   button arrow 22 px right after the 8 px gap (design .btn .ico) */
.tsth-eyebrow, .text .tsth-eyebrow { line-height: 1.7; }
.button i.icon-angle-right { width: 22px; height: 22px; margin: 0 !important; }

/* Banner buttons sit on the 36/24 px padding (Flatsome adds a 7.5 px bottom margin) */
.tsth-bn-box .button { margin-bottom: 0 !important; margin-top: 0 !important; } /* Flatsome adds 7.5 px above too */
.tsth-bn-box .text-inner { font-size: 16px; line-height: 1.7; } /* the design's 16/1.7 line box around the button (res-text scaled it to 11 px) */
/* Design .bn div: up to 440 px wide (not 75 % of the card); title on the 1.25 heading line */
.tsth-bn .tsth-bn-box { width: 100% !important; max-width: 440px; }
.tsth-bn-text h3 { line-height: 1.25; }

/* 14.11 CTA band: text | actions as the design grid 1.4fr 1fr, gap 40 (text column 574 px at 1440) */
@media (min-width: 850px) {
	.row.tsth-cta { display: grid !important; grid-template-columns: 1.4fr 1fr; column-gap: 40px; align-items: center; }
	.row.tsth-cta::after { content: none; display: none; }
	.row.tsth-cta > .col { max-width: none !important; flex-basis: auto !important; width: auto; padding: 0 !important; }
}
/* Home: the design wraps the CTA section in .bg-cream with padding-top 1px */
.home .section.tsth-cta-sec { border-top: 1px solid transparent; }

/* ==========================================================================
   15. Fix round 1 — pages
   ========================================================================== */
/* 15.1 Policy prose on the design's article measure (design .article max-width 780) */
.tsth-policy-sec .row { max-width: 810px !important; }
/* and the article's type (design .article h2 28px 36/14, p/ul 17px at every width) */
.tsth-policy h2 { font-size: 28px; margin: 36px 0 14px; }
.tsth-policy ul { margin-bottom: 18px; }
@media (max-width: 549px) { .tsth-policy h2 { font-size: 28px; } .tsth-policy p, .tsth-policy ul { font-size: 17px; } }
/* 15.2 FAQ nav icons 22 px like the design's .ico */
.tsth-faqnav a::before { width: 22px; height: 22px; flex: none; }
/* 15.3 Shop: the design's .shop{padding:48px 0 88px} drops the .wrap gutters from 561 to 1240 px
   (card, bar and products flush with the screen edge at 820); phones keep 18 px */
@media (min-width: 550px) and (max-width: 1240px) {
	.row.category-page-row { padding-left: 0; padding-right: 0; }
	.category-page-row .products.row { display: grid !important; grid-template-columns: 1fr 1fr; column-gap: 24px; margin: 0 !important; width: 100%; }
	.category-page-row .products.row::before, .category-page-row .products.row::after { content: none; display: none; }
	.category-page-row .products.row > .col { flex-basis: auto; max-width: none; width: auto; padding: 0 0 24px; }
}
@media (min-width: 1101px) and (max-width: 1240px) { .category-page-row .products.row { grid-template-columns: repeat(3, 1fr); } }
/* 15.4 Shop bar like the design: select 40 px (9/14 px padding, 20 px line), "Lọc" ghost button 15/1.7 + 8/16 px, 1 px border */
.tsth-bar .woocommerce-ordering select { height: 40px; line-height: 20px; min-height: 0; }
.tsth-filtbtn { font-size: 15px; line-height: 1.7; min-height: 0; border-width: 1px; }
@media (max-width: 549px) { .tsth-bar .woocommerce-ordering select { max-width: none; padding-right: 34px; } }
/* 15.5 Contact: the design's `.cinfo span{font-size:15px}` also sizes its eyebrow span; submit 52 px tall */
.page-id-75 .tsth-cinfo-text .tsth-eyebrow { font-size: 15px; }
.tsth-form .wpcf7 input[type="submit"].wpcf7-submit { line-height: 24px; }
/* 15.6 Split text column on phones: the 18 px gutter of the photo column (6.9), not the tablet 15 px */
@media (max-width: 549px) { .tsth-split-body { padding-left: 18px !important; } }
/* 15.7 Home trust strip on the design grid gap 24 (Flatsome's 30 px gutters pushed columns 2-4 by 1.5/3/4.5 px) */
@media (min-width: 550px) {
	.section[class*="tsth-"] .section-content > .row.tsth-trust-row > .col { padding-left: 12px; padding-right: 12px; }
	.section .row.tsth-trust-row { padding-left: 3px !important; padding-right: 3px !important; }
}
@media (min-width: 550px) and (max-width: 1199px) { .section .row.tsth-trust-row { padding-left: 12px !important; padding-right: 12px !important; } }
/* 15.8 Home CTA card inside the design's .wrap gutters below 850 px (24 px, 18 px on phones), text on the card's 28 px padding */
@media (max-width: 849px) {
	.section .row.tsth-cta { margin-left: 24px !important; margin-right: 24px !important; width: auto !important; max-width: none !important; }
	.section[class*="tsth-"] .section-content > .row.tsth-cta > .col { padding-left: 0; padding-right: 0; }
}
@media (max-width: 549px) { .section .row.tsth-cta { margin-left: 18px !important; margin-right: 18px !important; } }
/* 15.9 Post cards: "Đọc tiếp" on the text baseline like the design's a.more (Flatsome .button is middle: card 0.69 px short) */
.tsth-posts .button.is-link { vertical-align: baseline; }

/* 15.10 Form submit right under the last field like the design's .form button (margin 0; CF7 rule had 4px: form +4 px) */
.tsth-form .wpcf7 input[type="submit"].wpcf7-submit { margin-top: 0; }

/* 15.11 Policy prose: the design's .article is 780 px border-box with 24 px padding = 732 px of text (from 550 px; phone: full width) */
@media (min-width: 550px) { .tsth-policy { max-width: 732px; margin-left: auto; margin-right: auto; } }

/* 15.12 Trust strip titles bold like the design's <b> (700; the shared feature title is 600) */
.tsth-trust .featured-box.tsth-feat h5 { font-weight: 700; }

/* ==========================================================================
   16. Fix round 2
   ========================================================================== */
/* 16.1 Contact submit like the design's .btn: 1.5 px border, 28 px sides, 8 px gap + 22 px arrow (was 30 | 18 px arrow, no border) */
.tsth-form .wpcf7 input[type="submit"].wpcf7-submit {
	border: 1.5px solid var(--tsth-g); padding: 14px 58px 14px 28px; line-height: 22px;
	background-size: 22px 22px; background-position: right 28px center;
}
.tsth-form .wpcf7 input[type="submit"].wpcf7-submit:hover { border-color: var(--tsth-gd); }
/* 16.3 Contact info rows: the design's .ci svg is the 22 px .ico (site had 20) and its <b> computes 700 (site 600) */
.tsth-ci.tsth-ic::before { width: 22px; height: 22px; }
.tsth-ci-row b { font-weight: 700; }
/* 16.2 Shop sidebar widget titles on the design's h4 line (1.25, not the body 1.7: list 6.3 px low) */
#shop-sidebar .widget-title { line-height: 1.25; }
/* 16.4 Shop bar ≤1100 px like the design's .bar: "Lọc" 43.5 px (Flatsome .button.is-outline line-height 2.19em won: 50.8 px),
   22 px funnel (.ico), the three items spread by space-between with no gap (button mid-bar, not pushed to the select) */
.tsth-bar .button.tsth-filtbtn { line-height: 25.5px; margin: 0; }
.tsth-bar .tsth-filtbtn .tsth-ic::before { width: 22px; height: 22px; }
.tsth-bar { gap: 0; }
/* phones: only the result text shrinks/wraps, like the design's span (site squeezed "Lọc" to 82 px and the select to 138 px) */
.tsth-bar .button.tsth-filtbtn, .tsth-bar .woocommerce-ordering { flex: none; }
.tsth-bar .woocommerce-result-count { flex: 0 1 auto; min-width: 0; }