/*
Theme Name: Toàn Khang Hợp Kim
Theme URI: https://phelieudacbiettoankhang.com/
Description: Astra child theme — Modern Trading Desk direction. Implements TK design tokens (Fraunces + Be Vietnam Pro), 5-page site (Home/About/Services/Catalog/Contact), CPT material, Polylang 4-lang. See mdfiles/PHE LIEU HOP KIM/WORDPRESS-BUILD-SPEC.md.
Author: Toàn Khang
Template: astra
Version: 1.0.0
Text Domain: tk-toankhang
*/

/* === Design tokens (mirrors shared/chrome.jsx in prototype) === */
:root {
  --tk-bone:    #FAF7F2;
  --tk-paper:   #FFFFFF;
  --tk-ink:     #15110D;
  --tk-ink-2:   #3F362C;
  --tk-muted:   #6E6256;
  --tk-line:    #E5DCCB;
  --tk-line-2:  #D6CBB5;
  --tk-red:     #B91C1C;
  --tk-red-dk:  #7F1414;
  --tk-gold:    #B8862C;
  --tk-gold-lt: #E9C76B;
  --tk-green:   #1F7A4E;

  --tk-font-body: 'Be Vietnam Pro', system-ui, -apple-system, sans-serif;
  --tk-font-disp: 'Fraunces', 'Be Vietnam Pro', Georgia, serif;
  --tk-font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace;

  --tk-container: 1240px;
  --tk-pad-x: 32px;
  --tk-radius-card: 12px;
  --tk-radius-btn: 6px;
  --tk-radius-pill: 999px;
}

/* === Base resets layered on top of Astra === */
body { background: var(--tk-bone); color: var(--tk-ink); font-family: var(--tk-font-body); }
.site-content, .ast-container { max-width: var(--tk-container); padding-left: var(--tk-pad-x); padding-right: var(--tk-pad-x); }
h1, h2, h3, h4, h5 { font-family: var(--tk-font-disp); color: var(--tk-ink); letter-spacing: -0.025em; }

/* H1 hero on home (Spectra advanced-heading inherits) */
.tk-h1-hero { font: 700 76px/0.95 var(--tk-font-disp); letter-spacing: -0.035em; }
.tk-h1-page { font: 700 64px/1.05 var(--tk-font-disp); letter-spacing: -0.03em; }
.tk-h2       { font: 700 44px/1.05 var(--tk-font-disp); letter-spacing: -0.025em; }
.tk-h3       { font: 700 22px/1.2  var(--tk-font-disp); letter-spacing: -0.015em; }

.tk-eyebrow {
  font: 600 11px/1 var(--tk-font-body);
  letter-spacing: 0.18em;
  color: var(--tk-gold);
  text-transform: uppercase;
}
.tk-mono { font-family: var(--tk-font-mono); font-weight: 500; }

/* Hairline divider — used on cards, sections */
.tk-hairline { border: 1px solid var(--tk-line); }
.tk-hairline-strong { border: 1px solid var(--tk-line-2); }

/* CTA buttons */
.tk-btn-primary {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--tk-red); color: var(--tk-bone);
  font: 600 14px/1 var(--tk-font-body);
  padding: 14px 22px; border-radius: var(--tk-radius-btn);
  text-decoration: none; border: none; cursor: pointer;
  transition: background 0.15s ease;
}
.tk-btn-primary:hover { background: var(--tk-red-dk); color: var(--tk-bone); }
.tk-btn-outline {
  display: inline-flex; align-items: center; gap: 8px;
  background: transparent; color: var(--tk-ink);
  font: 600 14px/1 var(--tk-font-body);
  padding: 13px 21px; border-radius: var(--tk-radius-btn);
  text-decoration: none; border: 1px solid var(--tk-ink);
}
.tk-btn-outline:hover { background: var(--tk-ink); color: var(--tk-bone); }

/* Pill (eyebrow tag) */
.tk-pill {
  display: inline-block;
  padding: 6px 12px;
  background: var(--tk-paper);
  border: 1px solid var(--tk-line);
  border-radius: var(--tk-radius-pill);
  font: 600 11px/1 var(--tk-font-body);
  letter-spacing: 0.18em;
  color: var(--tk-gold);
  text-transform: uppercase;
}

/* === Floating call bar (bottom-right, fixed, every page) === */
.tk-float-calls {
  position: fixed; bottom: 20px; right: 20px; z-index: 50;
  display: flex; flex-direction: column; gap: 10px;
}
.tk-float-calls a {
  width: 52px; height: 52px; border-radius: var(--tk-radius-pill);
  display: flex; align-items: center; justify-content: center;
  text-decoration: none; color: var(--tk-bone);
}
.tk-float-calls .phone { background: var(--tk-red); box-shadow: 0 8px 24px rgba(185,28,28,0.4); }
.tk-float-calls .zalo  { background: #0084FF;        box-shadow: 0 8px 24px rgba(0,132,255,0.35); }

/* === Top bar (dark, hidden on mobile) === */
.tk-topbar {
  background: var(--tk-ink); color: #D9CFBF;
  font: 500 12px/1 var(--tk-font-body);
  padding: 8px 0;
}
.tk-topbar .inner {
  max-width: var(--tk-container); margin: 0 auto;
  padding: 0 var(--tk-pad-x);
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
}
.tk-topbar .phone { color: var(--tk-gold-lt); }

/* === Material card (catalog grid) === */
.tk-material-card {
  background: var(--tk-paper);
  border: 1px solid var(--tk-line);
  border-radius: var(--tk-radius-card);
  overflow: hidden;
  display: flex; flex-direction: column;
}
.tk-material-card .img-wrap { aspect-ratio: 768 / 1024; overflow: hidden; }
.tk-material-card .img-wrap img { width: 100%; height: 100%; object-fit: cover; }
.tk-material-card .body { padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.tk-material-card .code-chip {
  display: inline-block; padding: 4px 10px;
  background: var(--tk-bone); border: 1px solid var(--tk-line);
  border-radius: var(--tk-radius-pill);
  font: 600 11px/1 var(--tk-font-mono);
  color: var(--tk-ink-2);
}
.tk-material-card .price-range {
  font: 600 18px/1.2 var(--tk-font-mono); color: var(--tk-ink);
}
.tk-material-card .trend-up   { color: var(--tk-green); font-weight: 600; }
.tk-material-card .trend-down { color: var(--tk-red);   font-weight: 600; }
.tk-material-card .props-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
  border-top: 1px solid var(--tk-line); padding-top: 12px; margin-top: 4px;
}
.tk-material-card .props-grid .label {
  font: 500 10px/1 var(--tk-font-body);
  color: var(--tk-muted); letter-spacing: 0.1em; text-transform: uppercase;
  margin-bottom: 4px;
}
.tk-material-card .props-grid .value { font: 600 13px/1.2 var(--tk-font-mono); color: var(--tk-ink); }

/* === Mobile breakpoints (per spec §9) === */
@media (max-width: 1023px) {
  .tk-h1-hero { font-size: 56px; }
  .tk-h1-page { font-size: 48px; }
  .tk-h2 { font-size: 36px; }
}
@media (max-width: 767px) {
  .tk-topbar { display: none; }
  .tk-h1-hero { font-size: 40px; }
  .tk-h1-page { font-size: 36px; }
  .tk-h2 { font-size: 28px; }
  :root { --tk-pad-x: 20px; }
}