/*
Theme Name:   Tee Story House (Flatsome)
Theme URI:    https://teestoryhouse.com
Description:  Child theme cua Flatsome cho Tee Story House. Port design system
              tu tsh-child (Storefront): muc/giay/do gach, Instrument Serif,
              spec 9 khoi trang san pham. Homepage dung UX Builder.
Author:       Godfashion Ecom, LLC
Template:     flatsome
Version:      1.0.0
Text Domain:  tsh
*/

/* ── Font display — self-host, khong goi Google Fonts runtime ────────────── */
@font-face {
	font-family: "Instrument Serif";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url(fonts/instrument-serif-regular.woff2) format("woff2");
}
@font-face {
	font-family: "Instrument Serif";
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url(fonts/instrument-serif-italic.woff2) format("woff2");
}

/* ── Bang mau — nha in thu cong ──────────────────────────────────────────── */
:root {
	--tsh-ink:        #1A1815;
	--tsh-ink-soft:   #3D3934;
	--tsh-muted:      #6E6862;
	--tsh-paper:      #FBFAF7;
	--tsh-paper-2:    #F2EFE9;
	--tsh-rule:       #DFDAD1;
	--tsh-accent:     #A8432A;
	--tsh-accent-ink: #FFFFFF;
	--tsh-ok:         #2F6B4F;

	--tsh-f-ink:      #191714;
	--tsh-f-text:     #B9B2A8;
	--tsh-f-link:     #E4DFD6;

	--tsh-font-display: "Instrument Serif", Georgia, "Times New Roman", serif;
	--tsh-font-body:    system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

body {
	background: var(--tsh-paper);
	color: var(--tsh-ink);
	font-family: var(--tsh-font-body);
	font-size: 16px;
	line-height: 1.65;
}
#main, #main.dark { background-color: var(--tsh-paper); }

h1, h2, h3, .section-title span, .product-title, .page-title-inner h1 {
	font-family: var(--tsh-font-display);
	font-weight: 400;
	letter-spacing: -0.01em;
	line-height: 1.15;
	color: var(--tsh-ink);
}
.section-title { border: 0; }
.section-title span { font-size: clamp(1.5rem, 3vw, 2rem); text-transform: none; letter-spacing: -0.01em; }
.section-title b { background-color: var(--tsh-rule); opacity: .6; }

a { text-underline-offset: 0.15em; }

a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
	outline: 2px solid var(--tsh-accent);
	outline-offset: 2px;
}
::selection { background: var(--tsh-accent); color: #fff; }

/* ── Header: logo chu serif, nen giay, vien duoi mo ──────────────────────── */
.header-main, .header-bottom, .header-wrapper { background-color: var(--tsh-paper) !important; }
.header-bottom { box-shadow: none; border-bottom: 1px solid var(--tsh-rule); }
.logo a { font-family: var(--tsh-font-display); font-weight: 400; color: var(--tsh-ink) !important; letter-spacing: -0.015em; }
.header-nav > li > a, .nav > li > a.nav-top-link {
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.09em;
}
.header-main .nav > li > a { line-height: 1.2; }
.cart-icon strong { border-color: var(--tsh-ink); color: var(--tsh-ink); }
.cart-icon strong:after { border-color: var(--tsh-ink); }
.header .searchform .button.icon { background: var(--tsh-ink); border-color: var(--tsh-ink); }
.searchform input[type="search"] { background: #fff; border-color: var(--tsh-rule); }

/* ── Form input dong nhat ────────────────────────────────────────────────── */
input[type="text"], input[type="email"], input[type="tel"], input[type="url"],
input[type="password"], input[type="search"], input[type="number"],
textarea, select {
	background: #fff;
	border-color: var(--tsh-rule);
	border-radius: 3px;
	color: var(--tsh-ink);
	box-shadow: none;
}
input:focus, textarea:focus, select:focus { border-color: var(--tsh-ink-soft); }

/* ── Breadcrumb Flatsome ─────────────────────────────────────────────────── */
.breadcrumbs { font-size: 0.8125rem; color: var(--tsh-muted); text-transform: none; letter-spacing: 0; font-weight: 400; }
.breadcrumbs a { color: var(--tsh-muted); }
.breadcrumbs a:hover { color: var(--tsh-accent); }

/* ── The san pham / danh muc trong luoi ──────────────────────────────────── */
.product-small .box-image img { border: 1px solid var(--tsh-rule); border-radius: 4px; background: var(--tsh-paper-2); }
.product-small .name a { font-family: var(--tsh-font-body); font-size: 0.9375rem; font-weight: 600; color: var(--tsh-ink); }
.product-small .name a:hover { color: var(--tsh-accent); }
.product-small .price { color: var(--tsh-ink-soft); font-variant-numeric: tabular-nums; }
.price del { color: var(--tsh-muted); opacity: 1; }
.price ins { color: var(--tsh-accent); text-decoration: none; font-weight: 600; }
.badge-inner.on-sale, .callout.badge .badge-inner {
	background: var(--tsh-accent) !important;
	color: #fff;
	border-radius: 2px;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.cat-label, .header-cart-title { font-family: var(--tsh-font-display); text-transform: none; letter-spacing: -0.01em; }
.box-category .cat-label { font-size: 1.125rem; }
.star-rating span::before, .star-rating::before { color: var(--tsh-accent); }

/* ── Trang san pham ──────────────────────────────────────────────────────── */
.product-info .product-title { font-size: clamp(1.625rem, 3.5vw, 2.25rem); }
.product-info .price {
	font-family: var(--tsh-font-display);
	font-size: 1.625rem;
	color: var(--tsh-ink);
}
.product-gallery .woocommerce-product-gallery__image img { border: 1px solid var(--tsh-rule); border-radius: 4px; background: var(--tsh-paper-2); }
.product-info form.cart { border-top: 1px solid var(--tsh-rule); padding-top: 1rem; }
.single_add_to_cart_button { font-size: 1rem; }
.product_meta { font-size: 0.8125rem; color: var(--tsh-muted); border-top: 1px solid var(--tsh-rule); padding-top: 1rem; }
.product_meta a { color: var(--tsh-ink-soft); }

/* Tab gach chan toi gian */
.woocommerce-tabs .nav-tabs > li > a { color: var(--tsh-muted); font-size: 0.8125rem; letter-spacing: 0.09em; }
.woocommerce-tabs .nav-tabs > li.active > a { color: var(--tsh-ink); border-color: var(--tsh-accent); }
.nav-line > li > a::before, .nav-line-grow > li > a::before { background-color: var(--tsh-accent); }

/* ── Spec 9 khoi (giu nguyen tu tsh-child) ───────────────────────────────── */
.tsh-spec {
	display: grid;
	gap: 1.75rem;
	margin: 2.5rem 0;
	padding-top: 2rem;
	border-top: 1px solid var(--tsh-rule);
}
.tsh-spec__block { max-width: 68ch; }
.tsh-spec__label {
	display: block;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--tsh-muted);
	margin-bottom: 0.45rem;
}
.tsh-spec__block p { margin: 0 0 0.65rem; }
.tsh-spec__block p:last-child { margin-bottom: 0; }

.tsh-sizechart { overflow-x: auto; }
.tsh-sizechart table {
	border-collapse: collapse;
	width: 100%;
	font-size: 0.875rem;
	font-variant-numeric: tabular-nums;
}
.tsh-sizechart th, .tsh-sizechart td {
	border: 1px solid var(--tsh-rule);
	padding: 0.45rem 0.7rem;
	text-align: left;
}
.tsh-sizechart th { background: var(--tsh-paper-2); font-weight: 600; }

.tsh-delivery {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	padding: 1rem 1.15rem;
	background: var(--tsh-paper-2);
	border-left: 3px solid var(--tsh-accent);
	border-radius: 0 3px 3px 0;
	margin-bottom: 1rem;
}
.tsh-delivery__leg { flex: 1 1 12rem; }
.tsh-delivery__num {
	display: block;
	font-family: var(--tsh-font-display);
	font-size: 1.375rem;
	color: var(--tsh-ink);
}
.tsh-delivery__cap {
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--tsh-muted);
}

.tsh-trust {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
	margin: 1.5rem 0;
	padding: 0;
	list-style: none;
	font-size: 0.875rem;
	color: var(--tsh-ink-soft);
}
.tsh-trust li::before { content: "—"; color: var(--tsh-accent); margin-right: 0.45rem; }

@media (max-width: 767px) { .tsh-delivery__leg { flex: 1 1 100%; } }

/* ── Class ho tro homepage UX Builder ────────────────────────────────────── */
.tsh-hero__kicker {
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--tsh-accent);
	margin: 0 0 1rem;
}
.tsh-hero__h1 { font-size: clamp(2.25rem, 6vw, 3.75rem); max-width: 18ch; margin: 0 0 1rem; }
.tsh-hero__sub {
	font-size: clamp(1rem, 1.8vw, 1.1875rem);
	color: var(--tsh-ink-soft);
	max-width: 58ch;
	margin: 0 0 1.5rem;
	line-height: 1.6;
}
.tsh-num {
	font-family: var(--tsh-font-display);
	color: var(--tsh-accent);
	margin-right: 0.4rem;
}
.tsh-kicker {
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--tsh-accent);
	margin: 0 0 0.5rem;
}
.tsh-story { }
.tsh-story h2 { font-size: clamp(1.75rem, 4vw, 2.5rem); margin-top: 0; }
.tsh-story p { font-size: 1.0625rem; color: var(--tsh-ink-soft); max-width: 54ch; }
.tsh-story .ux-image, .tsh-story img { border: 1px solid var(--tsh-rule); border-radius: 4px; }
.tsh-why-item {
	padding-left: 1rem;
	border-left: 2px solid var(--tsh-rule);
	font-size: .9375rem;
	line-height: 1.55;
}
.tsh-why-item strong { display: block; color: var(--tsh-ink); margin-bottom: .15rem; }
.tsh-note { font-size: .9375rem; color: var(--tsh-muted); max-width: 62ch; }

/* ── Announcement bar (mau Cincy) ────────────────────────────────────────── */
html { scroll-behavior: smooth; }
.tsh-announce {
	background: var(--tsh-ink);
	color: var(--tsh-paper);
	font-size: 0.8125rem;
	letter-spacing: 0.04em;
	text-align: center;
	padding: 0.5em 0;
}
.tsh-announce a { color: #fff; text-decoration: underline; text-underline-offset: 0.15em; }
.tsh-announce a:hover { color: var(--tsh-rule); }

/* ── Swatches (Flatsome ux_label) ────────────────────────────────────────── */
.variations .label, .variations th {
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--tsh-ink-soft);
}
.variations_form .ux-swatch {
	border: 1px solid var(--tsh-rule);
	border-radius: 3px;
	background: #fff;
	font-weight: 600;
}
.variations_form .ux-swatch:hover { border-color: var(--tsh-ink-soft); }
.variations_form .ux-swatch.selected {
	background: var(--tsh-ink);
	color: #fff;
	box-shadow: none !important;
	border-color: var(--tsh-ink);
}
.tsh-sizelink { margin: 0 0 0.75rem; font-size: 0.875rem; }
.reset_variations { font-size: 0.8125rem; color: var(--tsh-muted); }

/* ── Sticky add-to-cart bar cua Flatsome ─────────────────────────────────── */
.sticky-add-to-cart--active, .sticky-add-to-cart__product {
	background: var(--tsh-paper);
	border-bottom: 1px solid var(--tsh-rule);
}
.sticky-add-to-cart .button { background: var(--tsh-accent); }

/* ── Thong bao he thong ──────────────────────────────────────────────────── */
.woocommerce-message, .woocommerce-info, .woocommerce-error, .message-wrapper .message-container {
	background-color: var(--tsh-paper-2);
	color: var(--tsh-ink);
	border-left: 3px solid var(--tsh-muted);
	border-radius: 0 3px 3px 0;
}
.woocommerce-message { border-left-color: var(--tsh-ok); }
.woocommerce-error { border-left-color: var(--tsh-accent); }

/* ── Bang gio hang / checkout ────────────────────────────────────────────── */
.shop_table { border: 1px solid var(--tsh-rule); }
.shop_table th {
	background: var(--tsh-paper-2);
	font-size: 0.8125rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--tsh-ink-soft);
}
.shop_table td, .shop_table th { border-color: var(--tsh-rule); }

/* ── Footer: nen muc, chu giay ───────────────────────────────────────────── */
.footer-widgets { background-color: var(--tsh-f-ink) !important; color: var(--tsh-f-text); font-size: 0.875rem; }
.footer-widgets .widget-title, .footer-widgets .widget > h3, .footer-widgets .widget > .widgettitle {
	font-family: var(--tsh-font-body);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--tsh-f-text);
	border: 0;
}
.footer-widgets a { color: var(--tsh-f-link); }
.footer-widgets a:hover { color: #fff; }
.tsh-flinks { list-style: none; margin: 0; padding: 0; }
.tsh-flinks li { margin: 0 0 0.5rem; }
.tsh-fbrand { font-family: var(--tsh-font-display); font-size: 1.375rem; color: #fff; margin: 0 0 0.6rem; }
.tsh-faddr { font-style: normal; line-height: 1.7; }
.absolute-footer, html { background-color: var(--tsh-f-ink) !important; }
.absolute-footer { color: var(--tsh-f-text); font-size: 0.8125rem; border-top: 1px solid rgba(255,255,255,0.09); }
.absolute-footer.dark .copyright-footer { color: var(--tsh-f-text); }