/* GENERATED by scripts/build-css.sh from tokens.css + base.css + components.css. Edit those, not this. */
/* TGKN design tokens — style source: owner-supplied "DESIGN 2.md" (white canvas, one electric-blue action colour,
   near-black ink, 500-weight headlines, sharp 4px buttons vs soft 16px cards, dark ink slabs).
   Source of truth for decisions: docs/design-system.md. */
:root {
	/* Colour */
	--tgkn-primary: #024ad8;
	--tgkn-primary-bright: #296ef9;   /* on dark slabs only */
	--tgkn-primary-deep: #0e3191;     /* pressed / visited */
	--tgkn-primary-soft: #c9e0fc;
	--tgkn-on-primary: #ffffff;
	--tgkn-ink: #1a1a1a;
	--tgkn-ink-soft: #292929;
	--tgkn-on-ink: #ffffff;
	--tgkn-canvas: #ffffff;
	--tgkn-cloud: #f7f7f7;
	--tgkn-fog: #e8e8e8;
	--tgkn-steel: #c2c2c2;
	--tgkn-charcoal: #3d3d3d;
	--tgkn-graphite: #636363;
	--tgkn-hairline: #e8e8e8;
	--tgkn-error: #b3262b;

	/* Typography: Manrope is the open substitute recommended by the reference; falls back to system fonts until self-hosted. */
	--tgkn-font: "Manrope", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	--tgkn-fs-display-xxl: clamp(36px, 5.4vw, 72px);
	--tgkn-fs-display-xl: clamp(32px, 4.2vw, 56px);
	--tgkn-fs-display-lg: clamp(28px, 3.4vw, 44px);
	--tgkn-fs-display-md: clamp(24px, 2.4vw, 32px);
	--tgkn-fs-display-sm: 24px;
	--tgkn-fs-display-xs: 20px;
	--tgkn-fs-body-lg: 18px;
	--tgkn-fs-body: 16px;
	--tgkn-fs-caption: 14px;
	--tgkn-fs-caption-sm: 12px;
	/* Reference uses line-height 1.0 for display; Vietnamese stacked diacritics clip at 1.0, so 1.15 is used. */
	--tgkn-lh-display: 1.15;

	/* Spacing (8px base) */
	--tgkn-space-xxs: 4px; --tgkn-space-xs: 8px; --tgkn-space-sm: 12px; --tgkn-space-md: 16px;
	--tgkn-space-lg: 20px; --tgkn-space-xl: 24px; --tgkn-space-xxl: 32px;
	--tgkn-section: clamp(48px, 6vw, 80px);
	--tgkn-container: 1366px;

	/* Shape: sharp interactive elements, soft containers */
	--tgkn-radius-btn: 4px;
	--tgkn-radius-lg: 8px;
	--tgkn-radius-xl: 16px;
	--tgkn-radius-pill: 9999px;

	/* Elevation: flat by default, soft lift only on catalogue cards */
	--tgkn-shadow-soft: 0 2px 8px rgba(26, 26, 26, 0.08);
	--tgkn-shadow-float: 0 8px 24px rgba(26, 26, 26, 0.12);
}
/* Base: typography, links, focus, forms. */
body { font-family: var(--tgkn-font); font-size: var(--tgkn-fs-body); line-height: 1.5; color: var(--tgkn-ink); background: var(--tgkn-canvas); }
h1, h2, h3, h4, h5, h6 { font-family: var(--tgkn-font); color: var(--tgkn-ink); font-weight: 500; letter-spacing: 0; }
h1 { font-size: var(--tgkn-fs-display-xxl); line-height: var(--tgkn-lh-display); }
h2 { font-size: var(--tgkn-fs-display-lg); line-height: var(--tgkn-lh-display); }
h3 { font-size: var(--tgkn-fs-display-md); line-height: 1.2; }
h4 { font-size: var(--tgkn-fs-display-sm); line-height: 1.25; }
h5, h6 { font-size: var(--tgkn-fs-display-xs); line-height: 1.3; }
p { color: var(--tgkn-ink); }
a { color: var(--tgkn-primary); text-decoration: underline; text-underline-offset: 3px; font-weight: 500; }
a:visited { color: var(--tgkn-primary-deep); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--tgkn-primary); outline-offset: 2px; }
input[type="text"], input[type="email"], input[type="tel"], input[type="search"], input[type="url"], input[type="number"], select, textarea {
	background: var(--tgkn-canvas); color: var(--tgkn-ink); font: inherit;
	border: 1px solid var(--tgkn-steel); border-radius: var(--tgkn-radius-btn);
	padding: var(--tgkn-space-sm) var(--tgkn-space-md); min-height: 44px;
}
input:focus, select:focus, textarea:focus { border-color: var(--tgkn-ink); outline: none; box-shadow: none; }
::placeholder { color: var(--tgkn-graphite); opacity: 1; }
.site-header, .main-navigation { background: var(--tgkn-canvas); }
.site-header { border-bottom: 1px solid var(--tgkn-hairline); }
.main-navigation .main-nav ul li a { color: var(--tgkn-ink); font-weight: 400; }
.main-navigation .main-nav ul li[class*="current-menu-"] > a, .main-navigation .main-nav ul li.current_page_item > a { color: var(--tgkn-ink); box-shadow: inset 0 -2px 0 var(--tgkn-primary); }
.site-footer, .site-info { background: var(--tgkn-ink); color: var(--tgkn-on-ink); }
.site-info a { color: var(--tgkn-on-ink); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }
/* Components (tgkn-*). Interactive elements are sharp (4px); containers are soft (16px).
   Blue (--tgkn-primary) is the only action colour: at most ~2 uses per viewport. */

.tgkn-eyebrow { font-size: var(--tgkn-fs-caption); font-weight: 500; line-height: 1.4; color: var(--tgkn-graphite); margin: 0 0 var(--tgkn-space-sm); }

/* Buttons */
.tgkn-btn, .button, .wp-block-button__link, button[type="submit"], input[type="submit"] {
	display: inline-flex; align-items: center; justify-content: center; min-height: 44px;
	font-family: var(--tgkn-font); font-size: 14px; font-weight: 600; line-height: 1.4; letter-spacing: 0.7px; text-transform: uppercase;
	padding: var(--tgkn-space-sm) var(--tgkn-space-xl); border-radius: var(--tgkn-radius-btn);
	background: var(--tgkn-primary); color: var(--tgkn-on-primary); border: 1px solid var(--tgkn-primary);
	text-decoration: none; cursor: pointer;
}
.tgkn-btn:hover, .button:hover, .wp-block-button__link:hover, button[type="submit"]:hover, input[type="submit"]:hover,
.tgkn-btn:active, .button:active { background: var(--tgkn-primary-deep); border-color: var(--tgkn-primary-deep); color: var(--tgkn-on-primary); }
.tgkn-btn:visited { color: var(--tgkn-on-primary); }
.tgkn-btn[disabled], .button.disabled { background: var(--tgkn-steel); border-color: var(--tgkn-steel); color: var(--tgkn-on-primary); cursor: not-allowed; }
.tgkn-btn--ink { background: var(--tgkn-ink); border-color: var(--tgkn-ink); }
.tgkn-btn--ink:hover { background: var(--tgkn-ink-soft); border-color: var(--tgkn-ink-soft); }
.tgkn-btn--outline, .tgkn-btn--secondary { background: var(--tgkn-canvas); color: var(--tgkn-primary); border-color: var(--tgkn-primary); }
.tgkn-btn--outline:hover, .tgkn-btn--secondary:hover { background: var(--tgkn-primary-soft); color: var(--tgkn-primary-deep); border-color: var(--tgkn-primary-deep); }
.tgkn-btn--outline:visited, .tgkn-btn--secondary:visited { color: var(--tgkn-primary); }
.tgkn-btn--outline-ink { background: var(--tgkn-canvas); color: var(--tgkn-ink); border-color: var(--tgkn-ink); }
.tgkn-btn--inverse { background: var(--tgkn-canvas); color: var(--tgkn-ink); border-color: var(--tgkn-canvas); }
.tgkn-btn--inverse:hover { background: var(--tgkn-fog); border-color: var(--tgkn-fog); color: var(--tgkn-ink); }
.tgkn-btn--inverse:visited { color: var(--tgkn-ink); }
.tgkn-link-arrow { font-weight: 500; }
.tgkn-link-arrow::after { content: " \2192"; }

/* Cards: soft 16px, lift only for catalogue tiles */
.tgkn-card, .tgkn-category-card { background: var(--tgkn-canvas); color: var(--tgkn-ink); border-radius: var(--tgkn-radius-xl); padding: var(--tgkn-space-xl); box-shadow: var(--tgkn-shadow-soft); }
.tgkn-card h3 { margin-top: 0; font-size: var(--tgkn-fs-display-sm); }
.tgkn-card--feature { background: var(--tgkn-cloud); box-shadow: none; padding: var(--tgkn-space-xxl); }
.tgkn-card--featured { border-top: 3px solid var(--tgkn-primary); }
.tgkn-category-card { display: flex; flex-direction: column; justify-content: flex-end; min-height: 160px; text-decoration: none; font-size: var(--tgkn-fs-display-xs); font-weight: 500; line-height: 1.3; }
.tgkn-category-card::before { content: ""; width: 48px; height: 48px; margin-bottom: auto; border-radius: var(--tgkn-radius-lg); background: var(--tgkn-cloud); border: 1px solid var(--tgkn-hairline); } /* icon placeholder */
.tgkn-category-card:hover { box-shadow: var(--tgkn-shadow-float); }
.tgkn-category-card--dark { background: var(--tgkn-ink); color: var(--tgkn-on-ink); }
.tgkn-category-card--dark::before { background: var(--tgkn-ink-soft); border-color: var(--tgkn-charcoal); }

/* Pill tabs / badges */
.tgkn-tab { display: inline-block; padding: var(--tgkn-space-xs) var(--tgkn-space-lg); border-radius: var(--tgkn-radius-pill); background: var(--tgkn-canvas); color: var(--tgkn-ink); font-weight: 500; text-decoration: none; border: 1px solid var(--tgkn-steel); }
.tgkn-tab--active { background: var(--tgkn-ink); color: var(--tgkn-on-ink); border-color: var(--tgkn-ink); }
.tgkn-badge { display: inline-block; font-size: var(--tgkn-fs-caption); padding: 6px 12px; border-radius: var(--tgkn-radius-lg); background: var(--tgkn-ink); color: var(--tgkn-on-ink); line-height: 1.2; }
.tgkn-badge--outline { background: var(--tgkn-canvas); color: var(--tgkn-ink); border: 1px solid var(--tgkn-ink); }

/* Technical specification table */
.tgkn-spec-table, .woocommerce table.shop_attributes { width: 100%; border-collapse: collapse; font-size: var(--tgkn-fs-caption); }
.tgkn-spec-table th, .woocommerce table.shop_attributes th { text-align: left; font-weight: 500; color: var(--tgkn-charcoal); background: var(--tgkn-cloud); padding: var(--tgkn-space-sm) var(--tgkn-space-md); border-bottom: 1px solid var(--tgkn-hairline); width: 35%; }
.tgkn-spec-table td, .woocommerce table.shop_attributes td { padding: var(--tgkn-space-sm) var(--tgkn-space-md); border-bottom: 1px solid var(--tgkn-hairline); color: var(--tgkn-ink); }
.tgkn-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Section bands: white / cloud alternate, ink slab closes the page */
.tgkn-band { padding-block: var(--tgkn-section); }
.tgkn-band--cloud { background: var(--tgkn-cloud); }
.tgkn-band--dark { background: var(--tgkn-ink); color: var(--tgkn-on-ink); }
.tgkn-band--dark h1, .tgkn-band--dark h2, .tgkn-band--dark h3, .tgkn-band--dark p { color: var(--tgkn-on-ink); }
.tgkn-band--dark a:not(.tgkn-btn) { color: var(--tgkn-primary-bright); }
.tgkn-rfq-button { background: var(--tgkn-primary); color: var(--tgkn-on-primary); }

/* FAQ row */
.tgkn-faq { border-radius: var(--tgkn-radius-lg); border-bottom: 1px solid var(--tgkn-hairline); padding: var(--tgkn-space-lg) var(--tgkn-space-xl); font-weight: 500; }

/* Mobile action bar (Zalo / Call / Quote): links are placeholders until the owner supplies real ones. */
.tgkn-mobile-bar { display: none; }
@media (max-width: 767px) {
	.tgkn-mobile-bar { position: fixed; inset: auto 0 0 0; z-index: 50; display: flex; gap: var(--tgkn-space-xs); padding: var(--tgkn-space-xs); background: var(--tgkn-canvas); border-top: 1px solid var(--tgkn-hairline); }
	.tgkn-mobile-bar a { flex: 1; text-align: center; }
	body { padding-bottom: 64px; }
}

/* ---- Home page ---- */
.page-id-19 .entry-header, .home .entry-header, .page-id-15 .entry-header { display: none; }
.page-id-15 h1 { font-size: var(--tgkn-fs-display-lg); max-width: 20ch; margin: 0 0 var(--tgkn-space-xl); }
.tgkn-field-hint { font-weight: 400; color: var(--tgkn-graphite); font-size: var(--tgkn-fs-caption); }
.page-id-19 .entry-content > section:nth-of-type(even):not(.tgkn-band--dark) { background: var(--tgkn-cloud); box-shadow: 0 0 0 100vmax var(--tgkn-cloud); clip-path: inset(0 -100vmax); }
.tgkn-hero { padding-block: clamp(48px, 8vw, 96px) var(--tgkn-section); }
.tgkn-hero__title { max-width: 16ch; margin: 0 0 var(--tgkn-space-xl); }
.tgkn-hero__lead { max-width: 60ch; font-size: var(--tgkn-fs-body-lg); line-height: 1.5; color: var(--tgkn-charcoal); margin: 0 0 var(--tgkn-space-xxl); }
.tgkn-actions { display: flex; flex-wrap: wrap; gap: var(--tgkn-space-sm); margin: 0; }
.tgkn-grid { display: grid; gap: var(--tgkn-space-xl); margin-top: var(--tgkn-space-xxl); grid-template-columns: 1fr; }
@media (min-width: 768px) { .tgkn-grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) { .tgkn-grid--3 { grid-template-columns: repeat(3, 1fr); } }
.tgkn-cta { border-radius: var(--tgkn-radius-xl); padding-inline: var(--tgkn-space-xxl); margin-block: var(--tgkn-section); }
.page-id-19 .entry-content > section.tgkn-band--dark { background: var(--tgkn-ink); }
@media (max-width: 767px) { .tgkn-cta { padding-inline: var(--tgkn-space-xl); border-radius: var(--tgkn-radius-lg, 12px); } }

/* ---- Biểu mẫu Yêu cầu báo giá (/bao-gia/) ---- */
.tgkn-rfq-form { max-width: 640px; }
.tgkn-rfq-form .tgkn-field { margin: 0 0 var(--tgkn-space-lg); }
.tgkn-rfq-form .tgkn-field label { display: block; font-weight: 500; margin-bottom: var(--tgkn-space-xxs); color: var(--tgkn-charcoal); }
.tgkn-rfq-form input[type="text"], .tgkn-rfq-form input[type="tel"], .tgkn-rfq-form input[type="email"], .tgkn-rfq-form textarea {
	width: 100%; font-family: var(--tgkn-font); font-size: var(--tgkn-fs-body); color: var(--tgkn-ink);
	background: var(--tgkn-canvas); border: 1px solid var(--tgkn-steel); border-radius: var(--tgkn-radius-btn);
	padding: var(--tgkn-space-sm) var(--tgkn-space-md); box-sizing: border-box;
}
.tgkn-rfq-form input:focus, .tgkn-rfq-form textarea:focus { outline: 2px solid var(--tgkn-primary); outline-offset: 1px; border-color: var(--tgkn-primary); }
.tgkn-rfq-form textarea { resize: vertical; }
.tgkn-field-row { display: grid; gap: var(--tgkn-space-lg); grid-template-columns: 1fr; }
@media (min-width: 600px) { .tgkn-field-row { grid-template-columns: 1fr 1fr; } }
.tgkn-field-note { font-size: var(--tgkn-fs-caption); color: var(--tgkn-graphite); margin: 0 0 var(--tgkn-space-lg); }
.tgkn-rfq-success { border: 1px solid var(--tgkn-primary-soft); background: var(--tgkn-primary-soft); }
.tgkn-rfq-success p { margin: 0; color: var(--tgkn-ink); }
.tgkn-rfq-error { border: 1px solid #e8b4b4; background: #fbe9e9; }
.tgkn-rfq-error p { margin: 0; color: #8a2222; }