/* ==========================================================================
   TAKA INTERIOR — DESIGN TOKENS
   Hướng: editorial luxury — Newsreader (serif) + Montserrat (sans),
   trắng / near-black, đỏ chỉ ở logo. Bỏ tiếng Nhật, dùng VN/EN.
   ========================================================================== */

:root {
  /* --- Màu --- */
  --bg:        #FAF9F6; /* off-white ấm nhẹ (không trắng gắt) */
  --bg-soft:   #F3F1EB; /* dải xen kẽ — đậm hơn chút */
  --ink:       #0A0A0A;
  --ink-soft:  #4A4A4A;
  --mut:       #6B6B6B;
  --line:      #E6E6E6;
  --line-soft: #F0F0F0;
  --dark:      #0E0E0E; /* section/footer nền tối */
  --brand-red: #E60012; /* CHỈ cho logo */

  /* --- Typography --- */
  --serif: "Newsreader", "Times New Roman", Georgia, serif;
  --sans:  "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;

  --fs-hero:   clamp(34px, 4.6vw, 56px);  /* hero home (full-bleed) — Nhật tiết chế */
  --fs-h1:     clamp(31px, 3.5vw, 46px);  /* tiêu đề TRANG: page-hero, single project */
  --fs-h2:     clamp(25px, 2.4vw, 32px);  /* tiêu đề MỤC: sec-head */
  --fs-h3:     clamp(20px, 1.9vw, 26px);  /* tiêu đề phụ / card nổi bật */
  --fs-title:  clamp(18px, 1.7vw, 23px);  /* TIÊU ĐỀ THẺ (tile/prod/mat…) — luôn < H2 để không đảo bậc */
  --fs-body:   16px;
  --fs-lead:   18px;   /* body nhấn / đoạn dẫn */
  --fs-small:  14px;
  --fs-caption:12px;   /* nav, tag, meta thường */
  --fs-label:  11px;

  /* --- Display / trang trí (serif cỡ lớn: số thứ tự & câu trích) --- */
  --fs-quote:      clamp(27px, 3.2vw, 42px);  /* câu trích lớn */
  --fs-stat:       clamp(40px, 5vw, 64px);    /* số liệu lớn nhất */
  --fs-numeral:    clamp(30px, 3.5vw, 52px);  /* số thứ tự lớn (dịch vụ / timeline / dự án) */
  --fs-numeral-sm: clamp(24px, 2.2vw, 32px);  /* số thứ tự nhỏ (bước) */

  /* --- Spacing (8pt) --- */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px;
  /* spacing lớn = fluid: tự co trên mobile/tablet, giữ nguyên desktop */
  --sp-7:  clamp(28px, 4.5vw, 48px);
  --sp-8:  clamp(34px, 6vw, 64px);
  --sp-9:  clamp(44px, 8vw, 96px);
  --sp-10: clamp(52px, 10vw, 128px);

  /* --- Layout --- */
  --maxw:    1200px;
  --gutter:  clamp(24px, 5vw, 72px);
  --gap:     24px;
  --measure: 760px;  /* bề rộng cho khối căn giữa: quote, story-lead */
  --measure-pad: 24px;

  /* --- Motion --- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft: cubic-bezier(0.33, 1, 0.68, 1);  /* reveal mượt, bớt "gắt" */
  --dur:  0.35s;
}

/* ==========================================================================
   BASE
   ========================================================================== */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg) !important;
  color: var(--ink);
  font-family: var(--sans) !important;
  font-size: var(--fs-body) !important;
  font-weight: 400;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip; /* clip (không tạo scroll-container) → không phá position:sticky của header */
}
img { display: block; max-width: 100%; }
/* `body a` (0,0,2) thắng link xanh mặc định của GeneratePress cho mọi link trần,
   nhưng vẫn thua các rule .class-based của mình → không phá link đã style. */
a { text-decoration: none; }
/* `body a` (0,0,2) thắng màu xanh + gạch chân hover mặc định của GeneratePress,
   nhưng vẫn thua rule .class-based của mình → không phá link đã style. */
body a, body a:hover { color: inherit; text-decoration: none; }

/* Tiêu đề serif mảnh — chữ ký editorial */
h1, h2, h3, h4, .serif {
  font-family: var(--serif) !important;
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: 0.01em;
  color: var(--ink);
}
em { font-style: italic; }

/* Nhãn uppercase nhỏ */
.label {
  font-family: var(--sans); font-size: var(--fs-label);
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--mut); font-weight: 400;
}
.label-en {
  font-family: var(--sans); font-size: var(--fs-label);
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); font-weight: 400;
}

/* ==========================================================================
   LAYOUT
   ========================================================================== */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }

/* ==========================================================================
   BUTTON / LINK
   ========================================================================== */
.btn {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--sans); font-size: var(--fs-label); letter-spacing: 0.28em;
  text-transform: uppercase; font-weight: 500;
  padding: 16px 28px; border: 1px solid var(--ink); background: var(--ink); color: #fff;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.btn:hover { background: transparent; color: var(--ink); }
.btn--ghost { background: transparent; color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: #fff; }
.btn--solid { background: var(--ink); color: #fff; }
/* "Xem tất cả" — đồng bộ kiểu tab menu: xám, hover → đen + gạch chân 1px chạy từ trái */
.link-arrow {
  position: relative; display: inline-block; padding-bottom: 5px;
  font-family: var(--sans); font-size: var(--fs-label); letter-spacing: 0.22em;
  text-transform: uppercase; font-weight: 500; color: var(--ink-soft);
  transition: color 0.2s;
}
.link-arrow::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--ink); transform: scaleX(0); transform-origin: left;
  transition: transform 0.3s var(--ease);
}
.link-arrow:hover { color: var(--ink); }
.link-arrow:hover::after { transform: scaleX(1); }

.reveal { opacity: 1; }