/* MỘC HIÊN — hệ thị giác "bảng danh mục vật tư bấm trên bìa xám".
   Tất cả token sống ở đây; không viết px/rem thẳng trong component. */

:root {
  /* --- Mặt phẳng --- */
  --board:        #241F1B;  /* mặt bàn xưởng ám khói */
  --board-deep:   #191512;  /* chân trang, khung tên */
  --board-warm:   #2F2823;  /* bậc nền phụ trên nền tối */
  --stock:        #C9C3B7;  /* bìa các-tông xám — mặt biểu mẫu */
  --stock-warm:   #BFB8AA;  /* bậc nền phụ trên bìa */

  /* --- Mực (KHÔNG BAO GIỜ dùng token đường kẻ làm chữ) --- */
  --ink:          #221E1A;  /* trên bìa xám — 9,4:1 */
  --ink-2:        #4A443B;  /* trên bìa xám — 5,5:1 */
  --ink-rev:      #EDE8DE;  /* trên nền tối — 13,3:1 */
  --ink-rev-2:    #B8AF9F;  /* trên nền tối — 7,5:1 */

  /* --- Đường kẻ (chỉ kẻ, không làm chữ) --- */
  --rule:         #9A9285;
  --rule-soft:    #ADA598;
  --rule-rev:     #4A423A;
  --rule-rev-soft:#3A332C;

  /* --- Màu nhấn: xanh lõi ván MDF chống ẩm.
         Nghĩa duy nhất: "đã có mã, đã vào bảng danh mục". --- */
  --core:         #3F7D52;  /* fill: cạnh lõi chip, nút chính, dấu tick */
  --core-ink:     #265134;  /* chữ nhấn trên bìa xám — 5,2:1 */
  --core-rev:     #63A971;  /* chữ nhấn trên nền tối — 5,8:1 */
  --core-deep:    #2F6340;

  /* --- Thang chữ --- */
  --fs-micro:  0.70rem;   /* 11,2px — sàn nhãn micro-caps */
  --fs-mono:   0.745rem;
  --fs-sm:     0.845rem;
  --fs-base:   1.0rem;
  --fs-body:   1.03rem;
  --fs-lead:   1.19rem;
  --fs-md:     1.35rem;
  --fs-lg:     1.72rem;
  --fs-xl:     2.35rem;
  --fs-2xl:    3.15rem;
  --fs-3xl:    4.05rem;

  /* --- Nhịp --- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;
  --sp-9: 88px; --sp-10: 120px;

  --shell: 1240px;
  --gut: clamp(20px, 4.4vw, 56px);

  --f-grot: 'Chivo', 'Helvetica Neue', Arial, sans-serif;
  --f-prose: 'Faustina', Georgia, 'Times New Roman', serif;
  --f-mono: 'Azeret Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  --ease: cubic-bezier(.22,.61,.36,1);
}

*, *::before, *::after { box-sizing: border-box; border-radius: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--board);
  color: var(--ink-rev);
  font-family: var(--f-prose);
  font-size: var(--fs-body);
  line-height: 1.62;
  font-variant-numeric: lining-nums;
}

/* Bất biến §4: mọi con số là chữ số tabular. */
.num, .num * {
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: 'tnum' 1, 'lnum' 1;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--f-grot);
  font-weight: 600;
  letter-spacing: -0.018em;
  line-height: 1.08;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; }

.shell {
  max-width: var(--shell);
  margin: 0 auto;
  padding-inline: var(--gut);
}

/* ---------- Nhãn micro-caps: ≥ 11px, tracking 0,15em ---------- */
.mc {
  font-family: var(--f-grot);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.155em;
  text-transform: uppercase;
  line-height: 1.3;
  display: block;
}
.mc--core { color: var(--core-ink); }
.mc--core-rev { color: var(--core-rev); }
.mc--dim { color: var(--ink-2); }
.mc--dim-rev { color: var(--ink-rev-2); }

.code {
  font-family: var(--f-mono);
  font-size: var(--fs-mono);
  font-variant-numeric: lining-nums tabular-nums;
  letter-spacing: 0.04em;
}

/* ---------- Chip lõi ván: dấu hiệu nhận dạng của cả hệ ----------
   Một lát cắt ván 3 lớp: mặt phủ / lõi xanh / mặt phủ.
   Nó xuất hiện ở đầu MỌI dòng thông số trên toàn site. */
.chip {
  flex: 0 0 auto;
  width: 22px;
  height: 13px;
  margin-top: 6px;
  background: var(--board-warm);
  border: 1px solid var(--rule-rev);
  position: relative;
  overflow: hidden;
}
.chip::after {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 3px;
  margin-top: -1.5px;
  background: var(--core-rev);
  transform: scaleY(1);
  transform-origin: 50% 50%;
  transition: transform .34s var(--ease);
}
.on-stock .chip { background: var(--stock-warm); border-color: var(--rule); }
.on-stock .chip::after { background: var(--core); }

/* ---------- Dòng thông số: nhãn trái / giá trị phải ---------- */
.row {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  gap: var(--sp-4);
  align-items: start;
  padding: var(--sp-4) 0;
  border-bottom: 1px solid var(--rule-rev);
  position: relative;
}
.on-stock .row { border-bottom-color: var(--rule); }
.row__label { display: block; font-family: var(--f-grot); font-size: var(--fs-base); font-weight: 600; letter-spacing: -0.01em; line-height: 1.32; }
.row__note { display: block; font-family: var(--f-prose); font-size: var(--fs-sm); line-height: 1.5; color: var(--ink-rev-2); margin-top: var(--sp-1); }
.on-stock .row__note { color: var(--ink-2); }
.row__value {
  font-family: var(--f-grot);
  font-weight: 600;
  font-size: var(--fs-base);
  font-variant-numeric: lining-nums tabular-nums;
  text-align: right;
  white-space: nowrap;
  padding-top: 1px;
}

/* dòng tổng: kẻ đôi */
.row--total {
  border-bottom: 3px double var(--core-rev);
  border-top: 1px solid var(--rule-rev);
  padding-top: var(--sp-4);
}
.on-stock .row--total { border-bottom-color: var(--core-deep); border-top-color: var(--rule); }
.row--total .row__label { font-size: var(--fs-md); }
.row--total .row__value { font-size: var(--fs-lg); color: var(--core-rev); }
.on-stock .row--total .row__value { color: var(--core-ink); }

/* ---------- Thiết bị hover DUY NHẤT của cả site ----------
   Rê vào một dòng: lõi xanh của chip nở ra và một vạch lõi mọc
   dọc mép trái dòng — "tấm ván này đã được vào mã". Chỉ transform. */
.row::before {
  content: '';
  position: absolute;
  left: -14px; top: 0; bottom: -1px;
  width: 3px;
  background: var(--core-rev);
  transform: scaleY(0);
  transform-origin: 50% 0;
  transition: transform .34s var(--ease);
}
.on-stock .row::before { background: var(--core); }
.row:hover::before, .row:focus-within::before { transform: scaleY(1); }
.row:hover .chip::after, .row:focus-within .chip::after { transform: scaleY(2.6); }

/* ---------- Khung tên (title block) ---------- */
.tblock {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
  border: 1px solid var(--rule-rev);
  border-bottom: 0;
}
.on-stock .tblock { border-color: var(--rule); }
.tblock > div {
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--rule-rev);
  border-right: 1px solid var(--rule-rev);
}
.on-stock .tblock > div { border-color: var(--rule); }
.tblock > div:last-child { border-right: 0; }
.tblock b {
  display: block;
  margin-top: var(--sp-2);
  font-family: var(--f-grot);
  font-weight: 600;
  font-size: var(--fs-base);
  font-variant-numeric: lining-nums tabular-nums;
  letter-spacing: -0.01em;
}

/* ---------- Nút ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  font-family: var(--f-grot);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  text-decoration: none;
  padding: var(--sp-4) var(--sp-5);
  border: 1px solid transparent;
  background: var(--core);
  color: #FFFFFF;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.btn::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 4px;
  background: rgba(255,255,255,.55);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform .34s var(--ease);
}
.btn:hover::after, .btn:focus-visible::after { transform: scaleX(1); }
.btn--ghost {
  background: transparent;
  border-color: var(--rule-rev);
  color: var(--ink-rev);
}
.on-stock .btn--ghost { border-color: var(--rule); color: var(--ink); }
.btn--ghost::after { background: var(--core); }

.phone-cta {
  font-family: var(--f-grot);
  font-weight: 700;
  font-size: var(--fs-md);
  font-variant-numeric: lining-nums tabular-nums;
  letter-spacing: -0.01em;
  text-decoration: none;
  border-bottom: 2px solid var(--core-rev);
  padding-bottom: 2px;
}
.on-stock .phone-cta { border-bottom-color: var(--core); }

/* ---------- Masthead ---------- */
.masthead {
  background: var(--board-deep);
  border-bottom: 1px solid var(--rule-rev);
}
.masthead__in {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  padding-block: var(--sp-4);
  flex-wrap: wrap;
}
.wordmark {
  font-family: var(--f-grot);
  font-weight: 700;
  font-size: var(--fs-md);
  letter-spacing: 0.06em;
  text-decoration: none;
  line-height: 1;
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
}
.wordmark span { color: var(--core-rev); }
.mainnav {
  display: flex;
  gap: var(--sp-5);
  margin-left: auto;
  flex-wrap: wrap;
}
.mainnav a {
  font-family: var(--f-grot);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.155em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink-rev-2);
  padding-bottom: 3px;
  border-bottom: 2px solid transparent;
}
.mainnav a:hover, .mainnav a[aria-current='page'] {
  color: var(--ink-rev);
  border-bottom-color: var(--core-rev);
}

.lang-toggle { display: flex; border: 1px solid var(--rule-rev); }
.lang-toggle button {
  font-family: var(--f-grot);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.14em;
  padding: 7px 10px;
  background: transparent;
  color: var(--ink-rev-2);
  border: 0;
  cursor: pointer;
  line-height: 1;
}
.lang-toggle button + button { border-left: 1px solid var(--rule-rev); }
.lang-toggle button[aria-pressed='true'] { background: var(--core); color: #FFFFFF; }

.masthead .btn { padding: 11px var(--sp-4); }

/* ---------- Section ---------- */
.sec { padding-block: var(--sp-9); }
.sec--stock { background: var(--stock); color: var(--ink); }
.sec--warm { background: var(--board-warm); }
.sec--tight { padding-block: var(--sp-8); }

.sechead { margin-bottom: var(--sp-7); max-width: 62ch; }
.sechead h2 { font-size: var(--fs-xl); margin-top: var(--sp-3); }
.sechead p { margin-top: var(--sp-4); font-size: var(--fs-lead); color: var(--ink-rev-2); }
.sec--stock .sechead p { color: var(--ink-2); }

.prose { font-size: var(--fs-lead); line-height: 1.68; max-width: 60ch; }
.prose p + p { margin-top: var(--sp-5); }

/* ---------- Hero ---------- */
.hero { background: var(--board); padding-block: var(--sp-9) var(--sp-10); overflow: hidden; }
.hero__in { display: grid; grid-template-columns: minmax(0, 0.86fr) minmax(0, 1fr); gap: var(--sp-8); align-items: start; }
.hero h1 { font-size: var(--fs-3xl); letter-spacing: -0.032em; }
.hero h1 em { font-style: normal; color: var(--core-rev); display: block; }
.hero__lead { margin-top: var(--sp-5); font-size: var(--fs-lead); color: var(--ink-rev-2); max-width: 46ch; }
.hero__acts { margin-top: var(--sp-7); display: flex; align-items: center; gap: var(--sp-5); flex-wrap: wrap; }
.hero__meta { margin-top: var(--sp-7); border-top: 1px solid var(--rule-rev); }

/* tờ bìa đặt trên mặt bàn tối — ngoại lệ box-shadow đã khai báo (§9) */
.sheet {
  background: var(--stock);
  color: var(--ink);
  padding: var(--sp-6);
  box-shadow: 0 26px 60px -34px rgba(0,0,0,.78);
  position: relative;
}
.sheet__hd {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--sp-4);
  padding-bottom: var(--sp-4);
  border-bottom: 2px solid var(--ink);
  flex-wrap: wrap;
}
.sheet__hd h2 { font-size: var(--fs-md); letter-spacing: 0.01em; }
.sheet__foot { margin-top: var(--sp-4); font-family: var(--f-prose); font-size: var(--fs-sm); color: var(--ink-2); }

/* ảnh bấm ở góc tờ bìa */
.tack {
  position: absolute;
  right: var(--sp-6);
  top: auto;
  bottom: calc(100% - 1px);
  width: 168px;
  border: 1px solid var(--rule);
  background: var(--stock);
  padding: 5px;
}
.tack figcaption { margin-top: 5px; }

/* ---------- Dải năng lực ---------- */
.capband { display: grid; grid-template-columns: repeat(auto-fit, minmax(178px, 1fr)); border-top: 1px solid var(--rule-rev); }
.capband > div { padding: var(--sp-5) var(--sp-5) var(--sp-5) 0; border-bottom: 1px solid var(--rule-rev); }
.capband b {
  display: block;
  margin-top: var(--sp-2);
  font-family: var(--f-grot);
  font-weight: 600;
  font-size: var(--fs-xl);
  font-variant-numeric: lining-nums tabular-nums;
  letter-spacing: -0.03em;
  line-height: 1;
}
.capband small { display: block; margin-top: var(--sp-2); font-family: var(--f-prose); font-size: var(--fs-sm); color: var(--ink-rev-2); }

/* ---------- Khung ảnh có mã ---------- */
.plate { border: 1px solid var(--rule-rev); padding: 6px; background: var(--board-warm); }
.on-stock .plate { border-color: var(--rule); background: var(--stock-warm); }
.plate__img { aspect-ratio: 16 / 10; overflow: hidden; }
.plate__img img { width: 100%; height: 100%; object-fit: cover; }
.plate__cap { display: flex; justify-content: space-between; gap: var(--sp-4); padding: var(--sp-3) 2px 1px; }

/* ---------- Lưới 2 cột dùng lại ---------- */
.split { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: var(--sp-8); align-items: start; }
.split--wide-left { grid-template-columns: minmax(0,1.12fr) minmax(0,1fr); }

/* ---------- Hồ sơ công trình ---------- */
.dossier-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(292px, 1fr)); gap: var(--sp-6); }
.dossier { display: flex; flex-direction: column; border: 1px solid var(--rule-rev); padding: var(--sp-4); background: var(--board-warm); }
.on-stock .dossier { border-color: var(--rule); background: var(--stock-warm); }
.dossier__img { aspect-ratio: 16 / 10; overflow: hidden; }
.dossier__img img { width: 100%; height: 100%; object-fit: cover; }
.dossier h3 { font-size: var(--fs-md); margin: var(--sp-4) 0 var(--sp-5); }
.dossier__spec { margin-top: auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--rule-rev); border: 1px solid var(--rule-rev); }
.on-stock .dossier__spec { background: var(--rule); border-color: var(--rule); }
.dossier__spec > div { background: var(--board-warm); padding: var(--sp-3); }
.on-stock .dossier__spec > div { background: var(--stock-warm); }
.dossier__spec b { display: block; margin-top: 5px; font-family: var(--f-grot); font-weight: 600; font-size: var(--fs-sm); font-variant-numeric: lining-nums tabular-nums; }
.dossier__hd { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-3); padding-bottom: var(--sp-3); margin-bottom: var(--sp-4); border-bottom: 1px solid var(--rule-rev); }
.on-stock .dossier__hd { border-bottom-color: var(--rule); }

/* ---------- Cảm nhận ---------- */
.quote { border-top: 1px solid var(--rule-rev); padding-top: var(--sp-5); }
.on-stock .quote { border-top-color: var(--rule); }
.quote blockquote { margin: var(--sp-3) 0 0; font-family: var(--f-prose); font-size: var(--fs-lead); font-style: italic; line-height: 1.56; }
.quote figcaption { margin-top: var(--sp-4); }

/* ---------- Form ---------- */
.qform { display: grid; gap: var(--sp-5); max-width: 620px; }
.field { display: block; }
.field input, .field select {
  width: 100%;
  margin-top: var(--sp-2);
  padding: 9px 0;
  font-family: var(--f-grot);
  font-size: var(--fs-md);
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--ink-2);
  outline: 0;
}
.field input:focus, .field select:focus { border-bottom: 2px solid var(--core); padding-bottom: 8px; }
.qform__pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--sp-5); }

/* ---------- Footer ---------- */
.foot { background: var(--board-deep); padding-block: var(--sp-8) var(--sp-6); border-top: 1px solid var(--rule-rev); }
.foot__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--sp-6); }
.foot h3 { font-size: var(--fs-sm); font-family: var(--f-grot); }
.foot ul { list-style: none; margin: var(--sp-4) 0 0; padding: 0; }
.foot li { padding: 5px 0; font-size: var(--fs-sm); color: var(--ink-rev-2); }
.foot li a { text-decoration: none; }
.foot li a:hover { color: var(--ink-rev); }
.foot__legal { margin-top: var(--sp-7); padding-top: var(--sp-5); border-top: 1px solid var(--rule-rev); display: flex; justify-content: space-between; gap: var(--sp-5); flex-wrap: wrap; }

/* ---------- Hatch vật liệu (§9) ---------- */
.hatch-wood {
  background-image: repeating-linear-gradient(0deg, rgba(255,255,255,.10) 0 1px, transparent 1px 7px);
}
.on-stock .hatch-wood {
  background-image: repeating-linear-gradient(0deg, rgba(34,30,26,.11) 0 1px, transparent 1px 7px);
}

/* ---------- CHUYỂN ĐỘNG ----------
   Ngân sách cả site: 1 entrance mang xuyên suốt + 1 thiết bị hover (.row ở trên).
   BẤT BIẾN: reveal chỉ dùng transform. opacity không bao giờ xuất hiện ở đây. */
.reveal { transform: translateY(20px); transition: transform .62s var(--ease); }
.reveal.is-visible { transform: none; }

@keyframes mh-rise { from { transform: translateY(15px); } to { transform: none; } }
@keyframes mh-slide { from { transform: translateX(20px); } to { transform: none; } }

.hero__col > * { animation: mh-rise .62s var(--ease) both; }
.hero__col > *:nth-child(1) { animation-delay: .04s; }
.hero__col > *:nth-child(2) { animation-delay: .12s; }
.hero__col > *:nth-child(3) { animation-delay: .20s; }
.hero__col > *:nth-child(4) { animation-delay: .28s; }
.hero__col > *:nth-child(5) { animation-delay: .36s; }
.hero__sheet { padding-top: 176px; animation: mh-slide .68s var(--ease) both; animation-delay: .16s; }

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal.is-visible { transform: none; transition: none; }
  .hero__col > *, .hero__sheet { padding-top: 176px; animation: none; }
  .row::before, .chip::after, .btn::after { transition: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  :root { --fs-3xl: 3.15rem; --fs-2xl: 2.5rem; --fs-xl: 2rem; }
  .hero__in { grid-template-columns: 1fr; gap: var(--sp-8); }
  .hero__sheet { padding-top: 0; }
  .tack { bottom: auto; }
  .tack { position: static; width: 100%; max-width: 240px; margin-bottom: var(--sp-5); }
  .split, .split--wide-left { grid-template-columns: 1fr; gap: var(--sp-7); }
}

@media (max-width: 720px) {
  :root { --fs-3xl: 2.5rem; --fs-xl: 1.72rem; --sp-9: 64px; --sp-10: 80px; }
  .masthead__in { gap: var(--sp-4); }
  .mainnav { order: 3; width: 100%; margin-left: 0; gap: var(--sp-4); }
  .row { grid-template-columns: 22px minmax(0, 1fr); row-gap: var(--sp-2); }
  .row__value { grid-column: 2; text-align: left; }
  .row::before { left: -10px; }
  .dossier__spec { grid-template-columns: repeat(2, 1fr); }
  .sheet { padding: var(--sp-5); }
  .hero__acts { gap: var(--sp-4); }
}

/* ---------- Bộ lọc hồ sơ ---------- */
.filterbar { display: flex; flex-wrap: wrap; gap: 0; margin-top: var(--sp-4); border: 1px solid var(--rule-rev); width: fit-content; }
.on-stock .filterbar { border-color: var(--rule); }
.filterbar button {
  font-family: var(--f-grot);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.155em;
  text-transform: uppercase;
  padding: 11px var(--sp-4);
  background: transparent;
  color: var(--ink-rev-2);
  border: 0;
  border-left: 1px solid var(--rule-rev);
  cursor: pointer;
}
.on-stock .filterbar button { color: var(--ink-2); border-left-color: var(--rule); }
.filterbar button:first-child { border-left: 0; }
.filterbar button[aria-pressed='true'] { background: var(--core); color: #FFFFFF; }

/* ---------- Bài viết ---------- */
.article { max-width: 68ch; }
.article p, .article ul { font-size: var(--fs-lead); line-height: 1.72; margin-top: var(--sp-5); }
.article h2 { font-size: var(--fs-lg); margin-top: var(--sp-8); }
.article h3 { font-size: var(--fs-md); margin-top: var(--sp-7); }
.article ul { padding-left: 0; list-style: none; }
.article li { padding: var(--sp-3) 0 var(--sp-3) var(--sp-6); border-bottom: 1px solid var(--rule); position: relative; }
.article li::before { content: ''; position: absolute; left: 0; top: 1.05em; width: 22px; height: 3px; background: var(--core); }
.article blockquote {
  margin: var(--sp-7) 0 0;
  padding-left: var(--sp-5);
  border-left: 3px solid var(--core);
  font-size: var(--fs-md);
  font-style: italic;
  line-height: 1.5;
}
.article .lede { font-size: var(--fs-md); line-height: 1.6; }

/* ---------- Trang trong: dải mở đầu ---------- */
.pagehead h1 { font-size: var(--fs-2xl); margin-top: var(--sp-4); }
.pagehead p { margin-top: var(--sp-5); font-size: var(--fs-lead); color: var(--ink-rev-2); max-width: 62ch; }

/* ---------- Khung tên đầu mục (thay cho kicker dài) ---------- */
.kick { display: flex; align-items: baseline; gap: var(--sp-3); }
.kick .code { color: var(--ink-rev-2); }
.on-stock .kick .code { color: var(--ink-2); }

/* ---------- Caption ảnh: sentence-case, KHÔNG viết hoa ----------
   Quy luật §8: nhãn viết hoa chỉ dành cho cụm <= 3 từ; dài hơn thì
   nó không còn là nhãn, nó là caption. */
.cap {
  display: block;
  font-family: var(--f-prose);
  font-size: var(--fs-sm);
  line-height: 1.4;
  color: var(--ink-rev-2);
}
.on-stock .cap { color: var(--ink-2); }