@charset "UTF-8";
/* ============================================================================
   CATALOG MATAS – STYLESHEET  ·  phiên bản lookbook
   Trang dựng đúng tỉ lệ A4 dọc (210×297mm): bản web và bản in PDF dùng chung
   một bố cục. Mọi kích thước trong trang tính theo chiều cao trang (cqh) nên
   trang co giãn nguyên khối. Khi in, 1cqh = 2.97mm  (1mm = .3367cqh).

   MỤC LỤC
     1. Chữ (font đóng gói sẵn) & tokens
     2. Base
     3. Khung ứng dụng (thanh trên · sân khấu · thanh điều hướng)
     4. Sách: tờ giấy – trang – chuyển trang
     5. Khung trang (đầu trang · chân trang · lớp trang trí)
     6. Component dùng lại
     7. Bìa · bìa sau
     8. Trang HERO tràn viền (8b: bố cục từng kiểu hero)
     9. Trang lưới · trang hai sản phẩm
    10. Giới thiệu · hướng dẫn · bảng mã (10b: khung xem ảnh lớn)
    11. Animation xuất hiện
    12. Hover
    13. Responsive
    14. Print – A4
   ========================================================================== */


/* ==========================================================================
   1. CHỮ & TOKENS
   Ba họ chữ, mỗi họ một việc, đều hỗ trợ đủ dấu tiếng Việt và nằm trong
   assets/fonts (giấy phép OFL) nên catalog chạy được cả khi không có mạng.
     Big Shoulders  → tiêu đề, con số, mã hàng: khổ hẹp, cứng, nhìn ra chất công nghiệp
     Crimson Pro    → slogan, chú thích: nghiêng, mềm, đối trọng với chữ hẹp
     Work Sans      → mô tả, thông số, bảng: dễ đọc ở cỡ nhỏ
   ========================================================================== */
@font-face { font-family: "Big Shoulders"; font-weight: 700; font-style: normal; font-display: swap;
  src: url("assets/fonts/BigShoulders-Bold.woff") format("woff"); }
@font-face { font-family: "Big Shoulders"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("assets/fonts/BigShoulders-Regular.woff") format("woff"); }
@font-face { font-family: "Crimson Pro"; font-weight: 400; font-style: italic; font-display: swap;
  src: url("assets/fonts/CrimsonPro-Italic.woff") format("woff"); }
@font-face { font-family: "Work Sans"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("assets/fonts/WorkSans-Regular.woff") format("woff"); }
@font-face { font-family: "Work Sans"; font-weight: 700; font-style: normal; font-display: swap;
  src: url("assets/fonts/WorkSans-Bold.woff") format("woff"); }

:root {
  /* MÀU – bộ nhận diện: xanh MATAS là nền, cam tem là điểm nhấn duy nhất.
     Cam lấy từ băng tem trên bao bì; xanh–cam là cặp bù nên tự nổi. */
  --brand:      #0d4a8d;   /* xanh MATAS (đúng màu logo) */
  --brand-deep: #072f5c;   /* xanh đậm */
  --night:      #041629;   /* xanh đêm: đáy các mảng tối */
  --brand-soft: #e8f0f9;
  --sky:        #cfe3f8;   /* xanh băng: mảng sáng */
  --signal:     #ff6a1a;   /* cam tem: số trang, đường nhấn, mã đang chọn */
  --signal-deep:#e04a00;

  --ink:    #0e1b2a;
  --ink-2:  #44536a;
  --ink-3:  #7d8b9f;
  --line:   #dfe6ee;
  --paper:  #fbfcfe;
  --desk:   #dde3ea;   /* nền bàn sau cuốn catalog */

  --font-display: "Big Shoulders", "Oswald", "Arial Narrow", "Roboto Condensed", Impact, sans-serif;
  --font-serif:   "Crimson Pro", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font:         "Work Sans", "Be Vietnam Pro", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-cjk:     "Noto Sans SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", "WenQuanYi Micro Hei", sans-serif;

  --ease-turn:   cubic-bezier(.66, 0, .24, 1);
  --ease-out:    cubic-bezier(.2, .8, .2, 1);
  --turn:        820ms;
  --enter-delay: 360ms;
  --step:        68ms;

  --mm: .3367cqh;          /* 1mm khi in, để đặt hình khối theo toạ độ A4 */

  /* Sàn cỡ chữ (px): trang bị thu nhỏ đến đâu chữ cũng không nhỏ hơn mức này. Điện thoại hạ sàn xuống
     (mục 13) để bố cục không vỡ vì chữ lớn hơn tỉ lệ. */
  --fl-xs: 7.5px; --fl-sm: 8.5px; --fl-md: 9.5px; --fl-lg: 11px; --fl-xl: 14px;

  color-scheme: light;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

/* Tông theo nhóm hàng. Mỗi tông có 4 bậc:
     --tint    nền nhạt nhất       --tint-2  nền mảng màu
     --tone    màu đặc trưng       --tone-deep chữ nhấn trên nền sáng
   Màu bám theo ảnh chụp thật của từng nhóm, xem chú thích cạnh mỗi dòng. */
.t-clear  { --tint: #eaf3fd; --tint-2: #cde1f6; --tone: #3b86d6; --tone-deep: #0d4a8d; }  /* băng dính trong */
.t-opaque { --tint: #fbf1de; --tint-2: #f0d8ab; --tone: #d8973a; --tone-deep: #85520f; }  /* OPP đục – màu kraft */
.t-blue   { --tint: #e6ecfb; --tint-2: #c6d4f4; --tone: #3557c6; --tone-deep: #1b3a94; }  /* OPP xanh dương */
.t-slate  { --tint: #e9edf5; --tint-2: #cfd8e8; --tone: #4c5f85; --tone-deep: #26365a; }  /* simili xanh than */
.t-paper  { --tint: #f9f1df; --tint-2: #eddcb2; --tone: #c99a4a; --tone-deep: #7a5314; }  /* băng dính giấy */
.t-forest { --tint: #e4f1e9; --tint-2: #c3e0d0; --tone: #2f8a63; --tone-deep: #15503a; }  /* xốp xanh lá đậm */
.t-cream  { --tint: #fbf5e0; --tint-2: #f1e3b3; --tone: #cdac48; --tone-deep: #7a6114; }  /* xốp vàng trắng */
.t-milky  { --tint: #eef1fa; --tint-2: #d9e0f1; --tone: #6f82b5; --tone-deep: #33427a; }  /* 2 mặt trắng sữa */
.t-silver { --tint: #ebf0f5; --tint-2: #d6dfe9; --tone: #6f869c; --tone-deep: #33475c; }  /* bạc – nhôm, chống thấm */
.t-sky    { --tint: #e6f4fb; --tint-2: #c5e5f5; --tone: #2a9bd6; --tone-deep: #0f5f8f; }  /* silicon trong suốt */
.t-ink    { --tint: #e9ecf1; --tint-2: #cdd3dd; --tone: #3a4658; --tone-deep: #0e1b2a; }  /* PVC điện */
.page, .pblock { --accent: var(--brand); }


/* ==========================================================================
   2. BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--desk);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
/* Tiếng Trung: các họ chữ Latin không có chữ Hán nên nối thêm font CJK phía sau. Trình duyệt chọn font
   theo từng ký tự: chữ Hán dùng font CJK, còn số và chữ Latin (mã hàng, quy cách) vẫn giữ font thương hiệu. */
:root[lang="zh"] {
  --font-display: "Big Shoulders", var(--font-cjk);
  --font-serif:   "Crimson Pro", var(--font-cjk);
  --font:         "Work Sans", var(--font-cjk);
}

h1, h2, h3, h4, p, dl, dd, figure, table { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; -webkit-tap-highlight-color: transparent; }
img, svg { display: block; }
:focus-visible { outline: 3px solid #7ba7e8; outline-offset: 2px; }
.u-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }


/* ==========================================================================
   3. KHUNG ỨNG DỤNG
   ========================================================================== */
.app { height: 100vh; height: 100dvh; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; overflow: hidden; }

.bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px clamp(12px, 3vw, 28px); }
.bar__brand { display: flex; align-items: center; gap: 10px; }
.bar__brand img { height: 26px; width: auto; }
.bar__brand small { font-size: .8125rem; font-weight: 400; color: var(--ink-2); white-space: nowrap; }
.bar__tools { display: flex; align-items: center; gap: 8px; }

.seg { display: inline-flex; padding: 3px; border-radius: 999px; background: rgba(16, 35, 63, .08); }
.seg button {
  padding: 6px 12px; border: 0; border-radius: 999px; background: transparent;
  color: var(--ink-2); font-size: .8125rem; font-weight: 700; white-space: nowrap; cursor: pointer;
  transition: background-color .2s, color .2s;
}
.seg button[aria-pressed="true"] { background: #fff; color: var(--brand); box-shadow: 0 1px 3px rgba(13, 74, 141, .22); }
.seg button:disabled { opacity: .4; cursor: default; }

.tool-btn {
  display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px;
  border: 1.5px solid var(--brand); border-radius: 999px; background: transparent; color: var(--brand);
  font-size: .8125rem; font-weight: 700; white-space: nowrap; cursor: pointer;
  transition: background-color .2s, color .2s;
}
.tool-btn svg { width: 15px; height: 15px; }

.stage {
  container-type: size;                /* để .book tính kích thước theo khoảng trống còn lại */
  min-height: 0; padding: clamp(6px, 1.4vh, 16px) clamp(8px, 2vw, 24px);
  display: grid; place-items: center;
}

.nav { display: flex; align-items: center; justify-content: center; gap: clamp(10px, 2.4vw, 24px); padding: 8px 14px 15px; }
.nav__btn {
  display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 18px;
  border: 1.5px solid var(--brand); border-radius: 999px; background: #fff; color: var(--brand);
  font-weight: 700; cursor: pointer;
  transition: background-color .2s, color .2s, opacity .2s, transform .2s var(--ease-out);
}
.nav__btn svg { width: 17px; height: 17px; }
.nav__btn:disabled { opacity: .3; cursor: default; }
.nav__progress { display: flex; align-items: center; gap: 12px; }
.nav__dots { display: flex; }
.nav__dot { display: grid; place-items: center; width: 17px; height: 20px; padding: 0; border: 0; background: none; cursor: pointer; }
.nav__dot::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: rgba(16, 35, 63, .25); transition: background-color .25s, transform .25s var(--ease-out); }
.nav__dot.is-current::before { background: var(--signal); transform: scale(1.45); }
.nav__counter { min-width: 6.5em; text-align: center; font-size: .9375rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.nav__counter span { font-weight: 400; color: var(--ink-2); }


/* ==========================================================================
   4. SÁCH – TỜ GIẤY – TRANG – CHUYỂN TRANG
   JS gói các .page thành .book > .sheet > .sheet__face > .page.
   Mỗi .sheet là một tờ giấy hai mặt, lật quanh gáy ở giữa như sách thật.
   Ở chế độ 1 trang, .sheet/.sheet__face chuyển sang display:contents nên
   biến mất khỏi bố cục – không phải dựng lại DOM khi đổi chế độ.
   ========================================================================== */
.book {
  --ratio: .7071;                      /* A4 dọc */
  position: relative;
  width:  min(100cqw, calc(100cqh * var(--ratio)));
  height: min(100cqh, calc(100cqw / var(--ratio)));
  perspective: 2600px;
  transition: transform var(--turn) var(--ease-turn);
}
[data-view="spread"] .book { --ratio: 1.4142; }
/* cặp trang chỉ có một mặt (bìa, trang cuối) thì đưa mặt đó ra giữa */
[data-view="spread"][data-edge="first"] .book { transform: translateX(-25%); }
[data-view="spread"][data-edge="last"]  .book { transform: translateX(25%); }

[data-view="spread"] .book::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 44px;
  transform: translateX(-50%); z-index: 60; pointer-events: none;
  background: linear-gradient(90deg, rgba(16,35,63,0), rgba(16,35,63,.13) 42%, rgba(16,35,63,.2) 50%, rgba(16,35,63,.13) 58%, rgba(16,35,63,0));
}

.sheet {
  position: absolute; top: 0; right: 0; width: 50%; height: 100%;
  transform-origin: left center; transform-style: preserve-3d;
  transition: transform var(--turn) var(--ease-turn);
}
[data-view="spread"] .sheet.is-turned { transform: rotateY(-180deg); }
.sheet.is-flipping { z-index: 90 !important; }
.sheet__face { position: absolute; inset: 0; overflow: hidden; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.sheet__face--back { transform: rotateY(180deg); }
.sheet__face:empty { background: var(--paper); }

.page {
  container-type: size;                /* mốc cho mọi đơn vị cqh bên trong trang */
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  overflow: hidden;
  isolation: isolate;
  background: var(--paper);
  color: var(--fg);
  box-shadow: 0 26px 44px -28px rgba(16, 35, 63, .5), 0 1px 3px rgba(16, 35, 63, .12);

  /* Màu chữ theo nền: trang tối chỉ việc đặt --fg* sáng, mọi thành phần tự theo. */
  --fg:   var(--ink);
  --fg-2: var(--ink-2);
  --fg-3: var(--ink-3);
  --rule: rgba(14, 27, 42, .16);

  /* Thang chữ: số cqh là cỡ chữ KHI IN, số px là mức tối thiểu để còn đọc được
     khi trang bị thu nhỏ trên màn hình. 1cqh = 2.97mm khi in.
     Big Shoulders có chữ hoa rất cao (0.8em) nên tiêu đề hiển thị theo bậc riêng. */
  --t-xs:  max(var(--fl-xs), .95cqh);         /* ≈  8pt  nhãn, chú thích */
  --t-sm:  max(var(--fl-sm), 1.12cqh);        /* ≈  9pt  mô tả, từ khoá */
  --t-md:  max(var(--fl-md), 1.32cqh);        /* ≈ 11pt  giá trị thông số */
  --t-lg:  max(var(--fl-lg),  1.75cqh);        /* ≈ 15pt  tên sản phẩm nhỏ */
  --t-xl:  max(var(--fl-xl),  2.45cqh);        /* ≈ 21pt  tên sản phẩm */
  --t-2xl: max(18px,  3.4cqh);         /* ≈ 29pt  tiêu đề trang */
  --t-3xl: max(24px,  5cqh);
  --t-4xl: max(30px,  8cqh);           /* ≈ 68pt  tiêu đề hero */
  --t-5xl: max(38px,  11.5cqh);        /* ≈ 97pt  bìa */

  --pad: 6.3cqh;                       /* lề trang ≈ 18.7mm khi in */
  --gap: 2.1cqh;
}

[data-view="single"] .sheet,
[data-view="single"] .sheet__face { display: contents; }
[data-view="single"] .page {
  z-index: calc(var(--total, 1) - var(--n, 0));
  visibility: hidden;
  transition: transform var(--turn) var(--ease-turn), visibility 0s linear var(--turn);
}
[data-view="single"] .page.is-current { visibility: visible; transition: transform var(--turn) var(--ease-turn), visibility 0s; }
[data-view="single"][data-transition="slide"] .page.is-before { transform: translateX(-102%); }
[data-view="single"][data-transition="slide"] .page.is-after  { transform: translateX(102%); }
[data-view="single"][data-transition="flip"] .page { transform-origin: left center; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
[data-view="single"][data-transition="flip"] .page.is-before { transform: rotateY(-180deg); }
[data-view="single"][data-transition="flip"] .page.is-after  { transform: translateZ(-60px); }

.is-instant .page, .is-instant .sheet, .is-instant .book { transition: none !important; }


/* ==========================================================================
   5. KHUNG TRANG
   Thứ tự vẽ theo cây DOM (không dùng z-index) để ảnh hero có thể hoà màu
   (mix-blend-mode) với nền và lớp trang trí nằm dưới nó:
     lớp trang trí → ảnh → lớp phủ → đầu trang · nội dung · chân trang
   ========================================================================== */
.page__head, .page__body, .page__foot { position: relative; }

/* ---- Đầu trang: logo mini · tên nhóm hàng · số trang · đường kẻ ----------
   <header class="page__head anim">
     <img class="page__mark" src="assets/mark_matas.svg" alt="">
     <span class="page__section">Băng dính trong suốt</span>
     <span class="page__no">03</span>
   </header>                                                                  */
.page__head {
  flex: none;
  display: flex; align-items: center; gap: 1.4cqh;
  margin: 0 var(--pad); padding: calc(var(--pad) * .55) 0 1.1cqh;
  border-bottom: 1px solid var(--rule);
}
.page__head::after {                   /* đoạn kẻ cam, lặp lại ở chân trang */
  content: ""; position: absolute; left: 0; bottom: -1px;
  width: 7.5cqh; height: 2px; background: var(--signal);
}
.page__mark { flex: none; width: 3.1cqh; height: 3.1cqh; }
.page__section {
  flex: 1; font-size: var(--t-xs); font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--fg-2); line-height: 1.3;
}
.page__no {
  font-family: var(--font-display); font-size: calc(var(--t-xl) * 1.15); font-weight: 700; line-height: 1;
  color: var(--signal); font-variant-numeric: tabular-nums; letter-spacing: .02em;
}

.page__body { flex: 1; min-height: 0; padding: calc(var(--pad) * .8) var(--pad) 0; }

/* ---- Chân trang: tên công ty · slogan · website ---- */
.page__foot {
  flex: none; display: flex; align-items: baseline; gap: 1.8cqh;
  margin: 0 var(--pad); padding: 1.2cqh 0 calc(var(--pad) * .55);
  border-top: 1px solid var(--rule);
  font-size: var(--t-xs); color: var(--fg-3); letter-spacing: .02em;
}
.page__foot::before {
  content: ""; position: absolute; left: 0; top: -1px;
  width: 7.5cqh; height: 2px; background: var(--signal);
}
.page__foot b { font-weight: 700; color: var(--fg-2); }
.page__foot em { font-family: var(--font-serif); font-style: italic; font-size: 1.28em; letter-spacing: 0; color: var(--fg-3); }
.page__foot span { margin-left: auto; font-weight: 700; color: var(--fg-2); }

/* Trang nền tối: đặt màu chữ sáng, logo mini đổi sang trắng */
.page--dark { --fg: #fff; --fg-2: rgba(255, 255, 255, .82); --fg-3: rgba(255, 255, 255, .62); --rule: rgba(255, 255, 255, .28); }
.page--dark .page__mark { filter: brightness(0) invert(1); }

/* tiêu đề mục trong trang */
.page__title {
  font-family: var(--font-display);
  font-size: calc(var(--t-2xl) * 1.32); font-weight: 700; line-height: 1.04; letter-spacing: .008em;
  text-wrap: balance; color: var(--fg);
}
.page__intro { margin-top: 1.4cqh; font-size: var(--t-sm); line-height: 1.62; color: var(--fg-2); max-width: 54ch; }


/* ---- Lớp trang trí ----------------------------------------------------------
   Vòng cuộn băng (rings), dải băng (strip), đường lượn theo logo (flow).
   Vẽ bằng SVG <use> nên giữ nguyên nét vector khi in.
     <svg class="deco deco--rings" viewBox="0 0 400 400" style="…"><use href="#g-rings"/></svg>
   Đặt SAU .hero__bg thì nằm trên ảnh, đặt TRƯỚC thì nằm dưới ảnh.               */
.deco { position: absolute; pointer-events: none; color: var(--tone, var(--brand)); opacity: var(--o, .16); }
.deco--rings { width: var(--s, 60cqh); height: var(--s, 60cqh); overflow: visible; }
.deco--flow  { width: var(--s, 60cqh); height: auto; overflow: visible; }
.deco--strip { width: var(--s, 22cqh); height: auto; opacity: var(--o, .92); }
.deco--dots  {
  background-image: radial-gradient(currentColor 22%, transparent 26%);
  background-size: 2.3cqh 2.3cqh;
}
.deco--hatch {
  background-image: repeating-linear-gradient(135deg, currentColor 0 .22cqh, transparent .22cqh 1.25cqh);
}

/* QUY TẮC HỌA TIẾT NỀN – mỗi loại trang một kiểu riêng, tất cả đều rất mờ để tôn sản phẩm lên:
     trang bìa         bản đồ Việt Nam                                      (.cover__map, mục 7)
     trang chuyển phần vòng tròn đồng tâm thu nhỏ ở một góc, tan dần vào nền (.deco--rings.deco--fade)
     trang hero        logo MATAS phóng to cắt ở mép trang (.deco--logo) hoặc dải sóng lượn (.deco--flow)
     trang thông số    lưới chấm bi (.bg-dots) hoặc chỉ gradient tối giản     (mục 9)
   Độ đậm (--o) luôn để dưới ~.10 trên nền sáng; chỉ tăng nhẹ trên nền xanh đêm. */
/* Vẽ thẳng bằng path (không dùng mask-image trỏ tới file .svg ngoài): dưới file:// một số trình
   duyệt (Chromium) chặn ảnh dùng làm mask nếu tải từ URL khác, logo sẽ không hiện. Path lấy từ
   assets/logo_matas.svg, symbol #g-logo trong SPRITE, tô màu bằng currentColor như .deco--rings. */
.deco--logo { width: var(--s, 90cqh); height: var(--s, 90cqh); overflow: visible; }
.deco--fade {
  -webkit-mask-image: radial-gradient(closest-side, #000 0%, rgba(0, 0, 0, .55) 42%, transparent 100%);
          mask-image: radial-gradient(closest-side, #000 0%, rgba(0, 0, 0, .55) 42%, transparent 100%);
}


/* ==========================================================================
   6. COMPONENT DÙNG LẠI
   Cấu trúc HTML ghi ngay trên phần CSS của từng component.
   ========================================================================== */

/* ---- Media: khung ảnh sản phẩm ---------------------------------------------
   <figure class="media" data-media>
     <img src="assets/ST18.webp" alt="Băng dính siêu trong ST18">
   </figure>
   Ảnh chụp nền trắng nên hoà màu (multiply) vào nền của khối: nền trắng
   biến mất, chỉ còn sản phẩm và bóng đổ – như ảnh đã tách nền.               */
.media { position: relative; overflow: hidden; background: transparent; }
.media img {
  width: 100%; height: 100%; object-fit: cover;
  mix-blend-mode: multiply; filter: brightness(1.045) contrast(1.02);
  transition: transform .5s var(--ease-out), opacity .3s;
}
.media--swap img { animation: a-swap 340ms var(--ease-out); }
/* Bấm vào ảnh để xem ảnh lớn: chỉ đổi con trỏ, không đặt biểu tượng nào lên ảnh */
.media[data-media] { cursor: zoom-in; }
.media[data-media]:focus-visible { outline: 3px solid #7ba7e8; outline-offset: -3px; }
.media__tag {
  position: absolute; left: 1.1cqh; top: 1.1cqh; z-index: 2;
  padding: .45cqh 1cqh; border-radius: .4cqh;
  background: var(--ink); color: #fff;
  font-family: var(--font-display); font-size: calc(var(--t-sm) * 1.15); font-weight: 700; letter-spacing: .04em; font-variant-numeric: tabular-nums;
}

/* ---- Tên sản phẩm + slogan -------------------------------------------------
   <h3 class="title">Băng dính siêu trong</h3>
   <p class="slogan">Dán chắc, chịu lực, tiện lợi</p>                          */
.title {
  font-family: var(--font-display);
  font-size: calc(var(--t-xl) * 1.22); font-weight: 700; line-height: 1.04; letter-spacing: .01em;
  text-wrap: balance; color: var(--fg);
}
.slogan {
  display: flex; align-items: baseline; gap: 1cqh; margin-top: 1cqh;
  font-family: var(--font-serif); font-style: italic; font-weight: 400;
  font-size: calc(var(--t-md) * 1.16); line-height: 1.25; color: var(--tone-deep, var(--brand));
}
.slogan::before {                      /* gạch cam đầu dòng, như mép băng tem */
  content: ""; flex: none; width: 2.4cqh; height: .38cqh; background: var(--signal);
  transform: translateY(-.28em);
}
.subtitle { margin-top: .8cqh; font-size: var(--t-sm); font-weight: 400; line-height: 1.55; color: var(--fg-2); }

/* ---- Variant chips: HIỆN ĐỦ MỌI MÃ ----------------------------------------
   Catalog in ra phải thấy hết mã nên không dùng dropdown. Trên web, rê chuột
   vào một mã là ảnh và thông số đổi theo mã đó; bấm để ghim lại.
   <ul class="vchips" data-variants>
     <li><button class="vchip is-pinned" type="button"
                 data-img="assets/ST18.webp" data-code="ST18"
                 data-size="50 mic × 18 mm × 50 yard" data-pack="10 cuộn">
       <b>ST18</b><span>18 mm</span></button></li>
   </ul>
   Vùng nhận dữ liệu đặt trong cùng một [data-product]:
     [data-media] img · [data-out-code] · [data-out-size] · [data-out-pack]    */
.vchips { display: flex; flex-wrap: wrap; gap: .8cqh; }
.vchip {
  display: flex; align-items: baseline; gap: .8cqh;
  padding: .7cqh 1.3cqh .6cqh; border: 1.5px solid var(--chip-line, rgba(14, 27, 42, .2)); border-radius: .5cqh;
  background: var(--chip-bg, rgba(255, 255, 255, .78)); cursor: pointer; line-height: 1.1;
  transition: border-color .2s, background-color .2s, color .2s, box-shadow .25s, transform .2s var(--ease-out);
}
.vchip b {
  font-family: var(--font-display); font-size: calc(var(--t-md) * 1.28); font-weight: 700;
  color: var(--tone-deep, var(--brand)); font-variant-numeric: tabular-nums; letter-spacing: .02em;
}
.vchip span { font-size: var(--t-xs); color: var(--fg-3); font-variant-numeric: tabular-nums; }
.vchip.is-pinned { border-color: var(--ink); background: var(--ink); box-shadow: 0 .45cqh 0 -.05cqh var(--signal); }
.vchip.is-pinned b { color: #fff; }
.vchip.is-pinned span { color: rgba(255, 255, 255, .72); }
.vchip.is-preview { border-color: var(--signal); background: #fff; box-shadow: 0 .8cqh 1.6cqh -1cqh rgba(224, 74, 0, .5); }
.vchip__dot { width: 1.55cqh; height: 1.55cqh; border-radius: 50%; background: var(--sw); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5), 0 0 0 1px rgba(14, 27, 42, .25); align-self: center; }

/* ---- Specs: thông số kỹ thuật ---------------------------------------------
   <dl class="specs">
     <div><dt>Quy cách</dt><dd data-out-size>50 mic × 18 mm × 50 yard</dd></div>
   </dl>
   .specs--row: gạch ngang trên dưới · .specs--line: một dòng gọn            */
.specs { display: flex; flex-wrap: wrap; gap: 1.3cqh 2.6cqh; }
.specs dt { font-size: var(--t-xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--fg-3); }
.specs dd {
  margin-top: .35cqh; font-family: var(--font-display);
  font-size: calc(var(--t-md) * 1.34); font-weight: 700; letter-spacing: .015em;
  color: var(--fg); font-variant-numeric: tabular-nums; line-height: 1.12;
}
/* Dải thông số: luôn nằm trên MỘT hàng. Nếu để xuống dòng thì vạch ngăn giữa
   các ô sẽ rơi sai chỗ, nên giá trị được phép xuống dòng trong ô của nó. */
.specs--row { border-top: .4cqh solid var(--tone-deep, var(--brand)); border-bottom: 1px solid var(--rule); padding-block: 1.5cqh; gap: 0; flex-wrap: nowrap; }
.specs--row > div { min-width: 0; padding-right: 2.6cqh; }
.specs--row > div + div { padding-left: 2.6cqh; border-left: 1px solid var(--rule); }
.specs--line { gap: .7cqh 1.6cqh; }
.specs--line > div { display: flex; align-items: baseline; gap: .7cqh; }
.specs--line dt { letter-spacing: .06em; }
.specs--line dd { margin-top: 0; font-size: calc(var(--t-sm) * 1.3); }

/* ---- Keywords: ứng dụng · ưu điểm · lưu ý ----------------------------------
   <div class="kw kw--use">
     <h4 class="kw__head">Ứng dụng</h4>
     <ul class="kw__list"><li>Niêm phong thùng carton</li>…</ul>
   </div>
   Biến thể: .kw--use (ứng dụng) · .kw--pro (ưu điểm) · .kw--note (lưu ý)     */
.kw__head {
  display: flex; align-items: center; gap: .9cqh; padding-bottom: .8cqh;
  border-bottom: 1px solid var(--rule);
  font-size: var(--t-sm); font-weight: 700; letter-spacing: .02em; color: var(--fg);
}
.kw__head::before { content: ""; width: 1.3cqh; height: 1.3cqh; border-radius: .2cqh; background: var(--kwc, var(--tone, var(--brand))); }
.kw__list { margin-top: 1.1cqh; display: grid; gap: .75cqh; }
.kw__list li { position: relative; padding-left: 1.9cqh; font-size: var(--t-sm); line-height: 1.45; color: var(--fg-2); }
.kw__list li::before {
  content: ""; position: absolute; left: 0; top: .58em;
  width: .7cqh; height: .7cqh; border-radius: 50%; background: var(--kwc, var(--tone, var(--brand)));
}
.kw--pro  { --kwc: #14805a; }
.kw--note { --kwc: #d98a06; }
.kw--note .kw__list li::before { border-radius: .15cqh; }

/* ---- Product block: khối sản phẩm dùng lại ---------------------------------
   <article class="pblock t-clear" data-product>
     <figure class="media" data-media><img …></figure>
     <div class="pblock__info"> title · slogan · vchips · specs </div>
   </article>
   Cỡ: .pblock--half (2 sp) · .pblock--third (3 sp)
   .pblock--row cho bố cục ảnh bên trái, chữ bên phải.                        */
.pblock { display: flex; flex-direction: column; min-height: 0; }
.pblock__info { display: flex; flex-direction: column; gap: 1.4cqh; min-height: 0; }
.pblock--row { flex-direction: row; gap: 2.8cqh; align-items: stretch; }
.pblock--row > .media { flex: none; width: 40%; }
.pblock--row > .pblock__info { flex: 1; justify-content: center; }
.pblock:not(.pblock--row) > .media { flex: 1 1 auto; min-height: 18%; }
.pblock:not(.pblock--row) > .pblock__info { flex: none; }

.pblock--half .title  { font-size: calc(var(--t-xl) * 1.3); }
.pblock--third .title { font-size: calc(var(--t-lg) * 1.3); }
.pblock--third .pblock__info { gap: 1cqh; }

/* ---- Callout: chú thích chỉ vào ảnh ----------------------------------------
   <div class="callout" style="--x:66%; --y:30%"><b>Bám dính</b><span>…</span></div> */
.callout { position: absolute; left: var(--x); top: var(--y); width: var(--w, 17cqh); }
.callout--left { transform: translateX(-100%); text-align: right; }
.callout::before { content: ""; position: absolute; top: .95cqh; left: -3.4cqh; width: 2.8cqh; height: 1px; background: currentColor; opacity: .55; }
.callout--left::before { left: auto; right: -3.4cqh; }
.callout::after {
  content: ""; position: absolute; top: .5cqh; left: -4.5cqh;
  width: 1.05cqh; height: 1.05cqh; border-radius: 50%; border: 1.5px solid var(--signal); background: var(--signal);
  transition: transform .25s var(--ease-out);
}
.callout--left::after { left: auto; right: -4.5cqh; }
.callout b { display: block; font-family: var(--font-display); font-size: calc(var(--t-md) * 1.3); font-weight: 700; letter-spacing: .02em; }
.callout span { display: block; margin-top: .25cqh; font-size: var(--t-xs); line-height: 1.4; opacity: .82; }

/* ---- Khối liên hệ ---- */
.contact { display: grid; gap: 1.5cqh; }
.contact__row { display: flex; align-items: baseline; gap: 1.2cqh; font-size: var(--t-sm); }
.contact__row dt { flex: none; width: 10cqh; font-size: var(--t-xs); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-3); }
.contact__row dd { font-weight: 700; color: var(--fg); }


/* ==========================================================================
   7. BÌA · BÌA SAU
   Bìa trước: vòng cuộn băng đồng tâm, đĩa ảnh tròn, cuộn cam, hai mảnh băng dính dán giữ ảnh.
   Bìa sau: logo + khẩu hiệu, khối liên hệ, khung ảnh hero tách nền (xem khối "Bìa sau" bên dưới).
   Toạ độ hình khối tính theo mm của tờ A4 (--mm).
   ========================================================================== */
.page--cover, .page--back {
  --fg: #fff; --fg-2: rgba(255, 255, 255, .84); --fg-3: rgba(255, 255, 255, .62); --rule: rgba(255, 255, 255, .28);
  color: #fff;
  background:
    radial-gradient(70% 46% at 74% 66%, rgba(46, 132, 226, .55) 0%, rgba(46, 132, 226, 0) 100%),
    linear-gradient(158deg, #0c539f 0%, var(--brand-deep) 46%, var(--night) 100%);
}
.cover__geo { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
/* Bản đồ Việt Nam 34 tỉnh làm nền chìm, nói lên thông điệp "sản phẩm phủ khắp đất nước".
   Phần đất liền chỉ chiếm ~60% bề rộng khung file gốc (867×900, phần còn lại là biển + Hoàng Sa/Trường Sa
   rất nhỏ và rời rạc), nên căn giữa nguyên khung theo mép sẽ đẩy đất liền lệch trái. Thay vào đó neo lệch
   phải: đất liền nằm giữa/phải trang, phần biển trống + đảo xa tràn quá mép phải và bị cắt – chấp nhận được
   vì không mất chi tiết quan trọng. Đặt trên đĩa ảnh, dưới chữ, hoà màu kiểu difference: trên nền xanh đêm
   bản đồ sáng lên, còn phần chồng lên đĩa ảnh sáng thì tự sẫm lại, nên các đảo không bị đĩa che mất.
   assets/vietnam_map_faint.svg là bản chìm sinh từ file gốc bằng assets/_make_map.py (bỏ nền đen, tô trắng
   trong suốt theo độ đậm từng tỉnh, tỉnh nhấn màu vàng chuyển thành cam); độ mờ chỉnh bằng opacity ở đây. */
.cover__map {
  position: absolute; left: calc(var(--mm) * 22); top: calc(var(--mm) * -11.2); width: calc(var(--mm) * 300); height: auto;
  opacity: .85; mix-blend-mode: difference; pointer-events: none;
}

.page--cover .page__body { display: grid; grid-template-rows: auto auto 1fr auto; padding: calc(var(--pad) * .95) var(--pad) calc(var(--pad) * .8); }
.cover__logo { height: 8.4cqh; width: auto; }
.cover__title {
  margin-top: 6.4cqh;
  font-family: var(--font-display); font-size: calc(var(--t-5xl) * .84); font-weight: 700;
  line-height: 1.04; letter-spacing: .005em; text-transform: uppercase; text-wrap: balance;
  max-width: 60cqh;
}
/* Khối chữ dưới (mô tả + slogan/website) nằm bên PHẢI, đối xứng với đĩa ảnh bên trái – xem giải thích
   ở .cover__disc bên dưới. margin-left:auto đẩy cả khối sang phải; chữ bên trong vẫn canh trái bình thường. */
.cover__foot { margin-left: auto; width: 30cqh; }
.cover__sub { font-size: var(--t-md); line-height: 1.6; color: var(--fg-2); }
.cover__meta {
  margin-top: 2.6cqh; padding-top: 1.5cqh; border-top: 1px solid var(--rule);
  display: flex; justify-content: space-between; align-items: baseline; gap: 1.6cqh;
  font-size: var(--t-sm); font-weight: 700; color: #fff;
}
.cover__meta span:first-child { font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: calc(var(--t-md) * 1.2); }

/* Đĩa ảnh đặt bên TRÁI, đúng chỗ bản đồ hình chữ S thắt eo (khoảng Quảng Bình – Quảng Trị) rồi phình
   rộng dần về hai phía bắc/nam: mép trên bên phải của đĩa áp sát chỗ đất liền còn hẹp, càng xuống dưới
   bờ biển càng lùi ra xa nên vòng tròn và đường bờ biển doãng ra cùng nhịp – như hai mảnh ghép khít vào
   nhau. Vì vậy khối chữ mô tả (.cover__foot) đổi sang bên phải cho cân bố cục.
   Tâm đĩa (80, 178)mm, bán kính 68mm – khớp với các vòng trong SVG .cover__geo. */
.cover__disc {
  position: absolute; left: calc(var(--mm) * 12); top: calc(var(--mm) * 110);
  width: calc(var(--mm) * 118); height: calc(var(--mm) * 118);
  border-radius: 50%; overflow: hidden; background: var(--sky);
  box-shadow: 0 3.2cqh 6cqh -3cqh rgba(0, 8, 24, .65);
}
.cover__disc img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%;
  mix-blend-mode: multiply; filter: brightness(1.045) contrast(1.02);
  transform: scale(1.04);
}
/* mảnh băng dính dán giữ đĩa ảnh: vắt ngang mép đĩa ở hai góc chéo */
.cover__strip { position: absolute; color: #fff; opacity: .94; filter: drop-shadow(0 .4cqh .5cqh rgba(0, 8, 24, .35)); }
.cover__strip--a { left: calc(var(--mm) * 9);  top: calc(var(--mm) * 124); width: calc(var(--mm) * 46); transform: rotate(45deg); color: var(--signal); }
.cover__strip--b { left: calc(var(--mm) * 105); top: calc(var(--mm) * 220); width: calc(var(--mm) * 46); transform: rotate(45deg); color: #d9ebff; }
/* dòng chữ chạy dọc mép phải như băng tem (đĩa đã chiếm mép trái) */
.cover__rail {
  position: absolute; right: calc(var(--mm) * 8); top: calc(var(--mm) * 150); bottom: calc(var(--mm) * 18);
  writing-mode: vertical-rl;
  font-size: var(--t-xs); font-weight: 700; letter-spacing: .34em; text-transform: uppercase; color: rgba(255, 255, 255, .5);
  white-space: nowrap; overflow: hidden;
}

/* ---- Ngôi sao lấp lánh trên bản đồ ----------------------------------------
   Bốn vị trí đặt tạm theo vùng miền; toạ độ là ước lượng, đổi lại left/top (đơn vị mm, hệ
   toạ độ 210×297 như mọi hình khối khác trên bìa) cho khớp đúng thành phố muốn nhấn.
   --d lệch giờ chớp tắt để các sao không nháy cùng lúc; --s là kích thước. */
.cover__star {
  --s: 3.4cqh; --d: 0s;
  position: absolute; width: var(--s); height: var(--s); color: #fff; mix-blend-mode: difference;
  filter: drop-shadow(0 0 .6cqh rgba(255, 255, 255, .7));
  opacity: 0; animation: a-twinkle 3.6s ease-in-out var(--d) infinite; pointer-events: none;
}
.cover__star--1 { --d: 0s;    --s: 3cqh;   left: calc(var(--mm) * 122); top: calc(var(--mm) * 55.9);  }  /* Hà Nội */
.cover__star--2 { --d: .9s;   --s: 2.4cqh; left: calc(var(--mm) * 161); top: calc(var(--mm) * 146.9); }  /* Đà Nẵng */
.cover__star--3 { --d: 1.9s;  --s: 3.6cqh; left: calc(var(--mm) * 144); top: calc(var(--mm) * 231.9); }  /* TP. Hồ Chí Minh */
.cover__star--4 { --d: 2.7s;  --s: 2.1cqh; left: calc(var(--mm) * 185); top: calc(var(--mm) * 194.9); }  /* Trường Sa */

/* ---- Bìa sau: logo + khẩu hiệu cỡ lớn · liên hệ dạng lưới · khung ảnh hero ------------------------------
   Nửa trên bên trái: logo + khẩu hiệu (Big Shoulders, trắng + từ khoá cam).
   Góc dưới bên trái: khối liên hệ dạng lưới 2 cột, kẻ mảnh.
   Nửa phải + góc dưới phải: .back__hero – khung chứa cụm sản phẩm ĐÃ TÁCH NỀN (assets/back_hero.webp).
   Chiều sâu: quầng sáng xanh phía sau (.back__glow), bóng đổ xuống sàn (.back__floor), viền sáng mảnh + đổ bóng
   trên chính ảnh. Thứ tự vẽ theo DOM: nền → vòng tròn mờ → khung hero → chữ (chữ luôn nằm trên ảnh).
   Biến chỉnh nhanh đặt ở thẻ <section> (index.html): --hero-x/-y (dịch) · --hero-s (phóng, neo góc dưới-phải)
   và ngay dưới đây: --hero-w/-h (khung chứa ảnh). Ảnh nào tỉ lệ nào cũng được: object-fit: contain, dính góc dưới-phải. */
.page--back {
  --hero-w: calc(var(--mm) * 172);
  --hero-h: calc(var(--mm) * 182);
  background:
    radial-gradient(56% 36% at 4% 2%, rgba(38, 124, 230, .40) 0%, rgba(38, 124, 230, 0) 100%),            /* hắt sáng nhẹ ở góc logo */
    radial-gradient(70% 30% at 100% 100%, rgba(2, 10, 24, .55) 0%, rgba(2, 10, 24, 0) 100%),               /* tối dần ở góc dưới phải: ảnh nổi lên */
    linear-gradient(164deg, #0b4488 0%, var(--brand-deep) 36%, #04213f 70%, #020f1f 100%);
}
.page--back .page__body { display: grid; grid-template-rows: auto auto 1fr auto; align-content: start;
  padding: calc(var(--pad) * .95) var(--pad) var(--pad); }
.back__logo { height: 8.4cqh; width: auto; justify-self: start; }

.back__slogan {
  margin-top: 5.8cqh; justify-self: start;
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  font-size: max(26px, 7.1cqh); line-height: 1.03; letter-spacing: .008em; color: #fff;
}
.back__sl { display: block; }
.back__sl--hot { color: var(--signal); }
.back__bar { display: block; width: 8cqh; height: .62cqh; margin: 1.4cqh 0 1.6cqh; background: var(--signal); border-radius: .3cqh; }   /* thay cho dấu "-" của khẩu hiệu */
:root[lang="zh"] .back__slogan { letter-spacing: .02em; line-height: 1.12; }

/* Khối liên hệ: lưới 2 cột (nhãn | nội dung), mỗi dòng cách nhau bằng một đường kẻ mảnh, mọi nhãn/nội dung thẳng hàng */
.page--back .contact { grid-row: 4; align-self: end; justify-self: start; width: 29.2cqh;
  grid-template-columns: 8.6cqh 1fr; gap: 0; font-size: max(6.8px, 1.16cqh); line-height: 1.55; }   /* sàn px thấp: khối này phải co theo trang, không được lấn sang ảnh hero */
.page--back .contact::before { content: ""; grid-column: 1 / -1; width: 5.2cqh; height: .5cqh; margin-bottom: 1.5cqh; background: var(--signal); }
.page--back .contact__row { display: contents; }
.page--back .contact__row dt, .page--back .contact__row dd { padding: .9cqh 0 .85cqh; border-top: 1px solid rgba(255, 255, 255, .17); }
.page--back .contact__row dt { width: auto; font-size: max(5.6px, .9cqh); line-height: 1.9; letter-spacing: .14em; color: rgba(255, 255, 255, .56); }
.page--back .contact__row dd { font-weight: 400; color: #fff; letter-spacing: .01em; }
.page--back .contact .nb { white-space: nowrap; }                                               /* địa chỉ ngắt dòng đúng chỗ: sau "Lĩnh Nam," */
.page--back .contact__row:first-child dd { font-weight: 700; white-space: nowrap; }          /* tên công ty đậm hơn một nấc, luôn trên một dòng */
.page--back .contact__row:last-child dt, .page--back .contact__row:last-child dd { border-bottom: 1px solid rgba(255, 255, 255, .17); }

/* Khung hero */
.back__hero {
  position: absolute; right: calc(var(--mm) * -6); bottom: var(--pad);
  width: var(--hero-w); height: var(--hero-h); margin: 0; pointer-events: none;
}
.back__glow {                       /* quầng sáng phía sau cụm ảnh: lớn hơn khung, nhạt dần ra ngoài */
  position: absolute; inset: -14% -22% -22% -30%;
  background:
    radial-gradient(44% 42% at 64% 50%, rgba(104, 192, 255, .70) 0%, rgba(62, 150, 246, .42) 32%, rgba(32, 108, 208, .17) 60%, rgba(30, 104, 205, 0) 82%);
}
.back__floor {                      /* bóng đổ xuống mặt sàn: neo cụm sản phẩm, tạo cảm giác đứng trên mặt phẳng */
  position: absolute; left: 4%; right: -4%; bottom: -4.2%; height: 9.5%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(0, 5, 18, .78) 0%, rgba(0, 5, 18, .42) 48%, rgba(0, 5, 18, 0) 78%);
  filter: blur(.35cqh);
}
.back__shot {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; object-position: 100% 100%;
  transform: translate(var(--hero-x, 0), var(--hero-y, 0)) scale(var(--hero-s, 1)); transform-origin: 100% 100%;
  filter: drop-shadow(0 0 .45cqh rgba(150, 206, 255, .30)) drop-shadow(0 2cqh 2.6cqh rgba(0, 6, 22, .55));
  -webkit-box-reflect: below .1cqh linear-gradient(transparent 74%, rgba(255, 255, 255, .20) 100%);   /* phản chiếu mờ trên mặt sàn */
}


/* ==========================================================================
   8. TRANG HERO TRÀN VIỀN
   Ảnh sản phẩm phủ kín trang (.hero__bg), chữ và thông số xếp đè lên ảnh.
   Ảnh chụp nền trắng nên dùng multiply: nền trắng nhường chỗ cho màu nền của
   trang, sản phẩm và bóng đổ giữ nguyên. Vị trí sản phẩm chỉnh bằng biến:
     --img-s  phóng to/thu nhỏ   --img-x / --img-y  dịch ảnh
     --img-pos  điểm neo khi cắt  --img-o  tâm phóng
   Đổi ảnh thật: giữ nguyên tên file, chỉnh lại 3 biến này cho vừa bố cục.
   Mẹo cho ảnh in: ảnh hero nên ≥ 2480 × 3508 px (A4 ở 300dpi).
   ========================================================================== */
.page--hero { background: linear-gradient(162deg, var(--tint) 0%, var(--tint-2) 100%); }

.hero__bg { position: absolute; inset: 0; margin: 0; pointer-events: none; }
.hero__bg img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: var(--img-pos, 50% 50%);
  mix-blend-mode: multiply; filter: brightness(1.045) contrast(1.02);
  transform: translate(var(--img-x, 0), var(--img-y, 0)) scale(var(--img-s, 1));
  transform-origin: var(--img-o, 50% 50%);
}
.hero__bg.media--swap img { animation: a-swap 420ms var(--ease-out); }
.hero__shade { position: absolute; inset: 0; pointer-events: none; }

.page--hero .page__body { display: grid; padding: calc(var(--pad) * .85) var(--pad) 0; }
.hero__title {
  font-size: var(--t-4xl); line-height: 1.04; letter-spacing: .006em; text-transform: uppercase;
  text-wrap: balance; color: var(--fg);
}
.hero__slogan { margin-top: 1.6cqh; font-size: calc(var(--t-lg) * 1.2); color: var(--tone-deep); }
.hero__slogan::before { transform: translateY(-.32em); }
.hero__col { display: grid; gap: 2.1cqh; align-content: start; }
.hero__col .kw__list { margin-top: .9cqh; gap: .55cqh; }
.hero__col .vchips { margin-bottom: .2cqh; }

/* Hero C dùng nền sáng phía dưới ảnh (ảnh macro có mép trên trắng), chữ trắng nhờ lớp phủ tối */
.hero--c { --fg: #fff; --fg-2: rgba(255, 255, 255, .86); --fg-3: rgba(255, 255, 255, .66); --rule: rgba(255, 255, 255, .34); color: #fff;
  background: linear-gradient(180deg, #d9dee6 0%, #eceff3 100%); }
.hero--c .page__mark { filter: brightness(0) invert(1); }

/* Bố cục riêng từng kiểu hero (A–E) nằm ở phần 8b ngay bên dưới. */


/* ==========================================================================
   8b. HERO – THÀNH PHẦN RIÊNG VÀ BỐ CỤC TỪNG KIỂU
     hero--a  chữ trái, sản phẩm phải, tiêu đề vắt ngang phía trên   (trang 6)
     hero--b  khối xanh đêm vát chéo (rộng trên, thu hẹp dần xuống đáy) mang toàn bộ chữ (trang 9)
     hero--c  ảnh macro tối, chữ trắng, mã có chấm màu                (trang 12)
     hero--d  cột thông số + cột tiêu đề/chú thích quanh cây băng     (trang 11)
     hero--e  ảnh giữa trang, hàng 5–6 mã cỡ lớn phía dưới             (trang 4 và 5)
   ========================================================================== */

/* ---- Thành phần riêng của trang hero ------------------------------------- */

/* nhãn mã đang chọn: miếng tem cam dán lên ảnh, đổi chữ theo mã khi rê chuột; bấm vào để xem ảnh lớn */
.hero__tag {
  position: absolute; display: inline-block;
  padding: .8cqh 1.6cqh .6cqh; border: 0; border-radius: .5cqh;
  background: var(--signal); color: #fff; transform: rotate(-5deg); cursor: zoom-in;
  font-family: var(--font-display); font-weight: 700; font-size: calc(var(--t-xl) * 1.5);
  line-height: 1; letter-spacing: .04em; font-variant-numeric: tabular-nums;
  box-shadow: 0 1.2cqh 1.8cqh -1cqh rgba(4, 22, 41, .55);
  transition: transform .2s var(--ease-out), background-color .2s;
}
.hero__tag:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
@media (hover: hover) { .hero__tag:hover { background: var(--signal-deep); transform: rotate(-5deg) scale(1.06); } }

/* Ảnh hero là nền cả trang nên bấm thẳng vào ảnh để xem ảnh lớn: các khung bố cục phía trên cho chuột
   xuyên qua, chỉ khối chữ, hàng mã và tem mới nhận chuột. */
.hero__bg { pointer-events: auto; cursor: zoom-in; }
.page--hero .page__head, .page--hero .page__body, .page--hero .page__foot,
.page--hero .hero__head, .page--hero .hero__col, .page--hero .hero__foot,
.page--hero .hero__aside, .page--hero .hero__main, .page--hero .hero__callouts { pointer-events: none; }
.page--hero .title, .page--hero .slogan, .page--hero .subtitle, .page--hero .vchips,
.page--hero .kw, .page--hero .specs, .page--hero .callout, .page--hero .hero__tag { pointer-events: auto; }
.hero__foot { display: grid; gap: 1.8cqh; padding-bottom: 2.4cqh; align-content: end; }

/* thông số xếp dọc trong cột hẹp: nhãn nằm trên giá trị nên câu dịch dài cỡ nào cũng không vỡ dòng */
.specs--stack { flex-direction: column; flex-wrap: nowrap; gap: 0; border-top: .4cqh solid var(--tone-deep, var(--brand)); }
.specs--stack > div { padding: 1cqh 0 .9cqh; border-bottom: 1px solid var(--rule); }
.specs--stack dd { margin-top: .3cqh; font-size: calc(var(--t-md) * 1.34); }

/* hàng mã cỡ lớn: mã viết to, độ dài viết nhỏ bên dưới */
.vchips--grid { flex-wrap: nowrap; gap: .7cqh; }
.vchips--grid li { flex: 1 1 0; min-width: 0; }
.vchips--grid .vchip { width: 100%; flex-direction: column; align-items: center; gap: .3cqh; padding: 1cqh .3cqh .8cqh; }
.vchips--grid .vchip b { font-size: calc(var(--t-xl) * 1.55); line-height: 1; }
.vchips--grid .vchip span { font-size: var(--t-xs); }

/* mã điện PVC: chấm màu + mã, nằm trên nền ảnh tối */
.vchips--dots { flex-wrap: nowrap; gap: .7cqh; }
.vchips--dots li { flex: 1 1 0; min-width: 0; }
.vchips--dots .vchip { width: 100%; gap: .8cqh; padding: .9cqh .6cqh .8cqh .9cqh; align-items: center; justify-content: center; --chip-bg: rgba(255, 255, 255, .13); --chip-line: rgba(255, 255, 255, .42); }
.vchips--dots .vchip b { color: #fff; font-size: calc(var(--t-md) * 1.36); letter-spacing: .01em; }
/* Modifier cho các dòng có nhiều biến thể hơn mức --grid/--dots vốn thiết kế (5–7 mã): xuống dòng thay vì ép
   co hết vào 1 hàng. Dùng cùng với .vchips--grid hoặc .vchips--dots khi > ~7 mã (khổ lớn, PVC điện, 2 mặt...). */
.vchips--many { flex-wrap: wrap; }
.vchips--many li { flex: 0 1 auto; }
.vchips--many.vchips--grid .vchip, .vchips--many.vchips--dots .vchip { width: auto; min-width: 6.6cqh; }
/* Hàng nhiều mã dạng lưới (> 7 mã, xuống dòng): chữ mã cỡ vừa, nút gọn – không dùng cỡ 3.8cqh của hàng 5–6 mã */
.vchips--many.vchips--grid { gap: .7cqh; }
.vchips--many.vchips--grid .vchip { min-width: 7.4cqh; padding: .75cqh .9cqh .65cqh; gap: .15cqh; }
.vchips--many.vchips--grid .vchip b { font-size: calc(var(--t-xl) * 1.02); }
.page--dark .vchip { --chip-bg: rgba(255, 255, 255, .13); --chip-line: rgba(255, 255, 255, .42); }
.page--dark .vchip b { color: #fff; }
.page--dark .vchip span { color: rgba(255, 255, 255, .72); }
.page--dark .vchip.is-pinned { background: #fff; border-color: #fff; box-shadow: 0 .45cqh 0 -.05cqh var(--signal); }
.page--dark .vchip.is-pinned b { color: var(--ink); }
.page--dark .vchip.is-pinned span { color: var(--ink-2); }
.page--dark .vchip.is-preview { background: rgba(255, 255, 255, .92); border-color: var(--signal); }
.page--dark .vchip.is-preview b { color: var(--ink); }


/* ---- Hero A · chữ trái, sản phẩm phải, tiêu đề vắt ngang phía trên --------- */
.hero--a .page__body { grid-template-columns: 26cqh 1fr; grid-template-rows: auto 1fr; }
.hero--a .hero__head { grid-column: 1 / -1; }
.hero--a .hero__col { grid-column: 1; align-self: end; padding-bottom: 3cqh; }
.hero--a .hero__tag { right: 7cqh; bottom: 9.4cqh; }

/* ---- Hero B · khối xanh đêm vát chéo bên trái mang toàn bộ chữ -------------
   Mảng xanh RỘNG Ở TRÊN và THU HẸP DẦN XUỐNG ĐÁY TRANG, nhường chỗ cho phần đáy của sản phẩm (ống băng cộng
   cuộn nằm phía trước, đáy rộng hơn đỉnh). Mép chéo đi từ trên-phải xuống dưới-trái:
     mép trên trang  → mảng xanh rộng --edge-top    = 38.5cqh (≈ 54% bề rộng trang)
     mép dưới trang  → mảng xanh rộng --edge-bottom = 34.2cqh (≈ 48% bề rộng trang)
   Mép dưới không nên nhỏ hơn ~34cqh: cột chữ và các đường kẻ của cột kết thúc ở 32.3cqh, cần còn ≥ 1.8cqh
   mép xanh bên phải để chữ trắng không chạm nền kem. Đổi độ nghiêng: chỉ sửa 2 số này; sau đó chỉnh
   --img-x / --img-s / --img-y trên thẻ <section> để mép trái của ống băng vẫn cách đường chéo ≥ 1.5cqh. */
.hero--b { --edge-top: 38.5cqh; --edge-bottom: 34.2cqh; }
.hero__panel {
  position: absolute; left: 0; top: 0; bottom: 0; width: var(--edge-top, 38.5cqh); pointer-events: none;
  background:
    radial-gradient(90% 40% at 0% 0%, rgba(46, 132, 226, .55) 0%, rgba(46, 132, 226, 0) 100%),
    linear-gradient(172deg, #0c539f 0%, var(--brand-deep) 52%, var(--night) 100%);
  clip-path: polygon(0 0, 100% 0, var(--edge-bottom, 34.2cqh) 100%, 0 100%);
}
.hero--b .page__body {
  grid-template-columns: 26cqh 1fr; grid-template-rows: auto minmax(0, 1fr);
  /* thang chữ riêng của khối chữ bên trái: mức tối thiểu px thấp hơn mặc định để khi trang bị thu nhỏ,
     cột chữ không phình cao hơn trang rồi đè lên tiêu đề hoặc chân trang */
  --t-xs: max(6.2px, .95cqh); --t-sm: max(6.9px, 1.12cqh); --t-md: max(7.8px, 1.32cqh);
}
.hero--b .hero__head, .hero--b .hero__col { grid-column: 1; }
.hero--b .hero__head, .hero--b .hero__col, .hero--b .page__head {
  --fg: #fff; --fg-2: rgba(255, 255, 255, .84); --fg-3: rgba(255, 255, 255, .62); --rule: rgba(255, 255, 255, .28);
}
.hero--b .page__head { margin-right: calc(var(--pad)); }
.hero--b .page__mark { filter: brightness(0) invert(1); }
.hero--b .hero__title { font-size: calc(var(--t-4xl) * .7); }
.hero--b .hero__slogan { font-size: calc(var(--t-md) * 1.25); color: #ffd2b0; }
/* Cột chữ dồn xuống đáy, ngay trên chân trang; toàn bộ nội dung phải vừa trong khoảng giữa lời đề và chân trang */
.hero--b .hero__col { align-self: end; padding-bottom: 2.4cqh; gap: 1.9cqh; }
.hero--b .vchip { --chip-bg: rgba(255, 255, 255, .12); --chip-line: rgba(255, 255, 255, .4); }
.hero--b .vchip b { color: #fff; } .hero--b .vchip span { color: rgba(255, 255, 255, .72); }
.hero--b .vchip.is-pinned { background: #fff; border-color: #fff; }
.hero--b .vchip.is-pinned b { color: var(--ink); } .hero--b .vchip.is-pinned span { color: var(--ink-2); }
.hero--b .vchip.is-preview { background: rgba(255, 255, 255, .92); }
.hero--b .vchip.is-preview b { color: var(--ink); }
/* 10 mã xếp 2 cột × 5 hàng, đọc theo cột: cột trái các cuộn 17 m, cột phải các cuộn 9 m (thay vì 8 hàng so le) */
.hero--b .vchips--many {
  display: grid; grid-auto-flow: column; grid-template-rows: repeat(5, auto); grid-template-columns: repeat(2, max-content);
  gap: .6cqh .7cqh; justify-content: start;
}
.hero--b .vchips--many li { min-width: 0; }
.hero--b .vchips--many .vchip { width: 100%; gap: .6cqh; padding: .55cqh .7cqh .5cqh .8cqh; }
.hero--b .vchips--many .vchip b { font-size: calc(var(--t-xl) * .94); }
.hero--b .vchips--many .vchip span { font-size: min(var(--t-xs), 1.08cqh); }
.hero--b .hero__col .kw__head { padding-bottom: .6cqh; }
.hero--b .hero__col .kw__list { margin-top: .8cqh; gap: .5cqh; }
.hero--b .kw__list li { font-size: calc(var(--t-sm) * .96); line-height: 1.38; }
.hero--b .specs--stack > div { padding: .8cqh 0 .7cqh; }
.hero--b .specs--stack dd { margin-top: .15cqh; font-size: calc(var(--t-md) * 1.3); }
.hero--b .hero__tag { right: 6.4cqh; bottom: 8.4cqh; }
.hero--b .page__foot { --rule: rgba(120, 132, 156, .5); }
.hero--b .page__foot em { display: none; }
.hero--b .page__foot b { color: rgba(255, 255, 255, .82); }
/* Trang bị thu nhỏ (cửa sổ nhỏ, điện thoại): mức chữ tối thiểu nhích xuống gần cỡ tỉ lệ thật, khoảng cách khít lại
   để cột chữ vẫn nằm gọn dưới lời đề, trên chân trang và trong mảng xanh. Hình dạng mảng xanh giữ nguyên ở mọi
   cỡ (mép trên 38.5cqh, mép dưới 34.2cqh) vì cột chữ rộng cố định 26cqh. Đã đo ở mọi cỡ từ 320×568 đến màn 4K, cả 3 ngôn ngữ. */
@container (max-height: 620px) {
  .hero--b .page__body {
    --t-xs: max(6px, .95cqh); --t-sm: max(6.6px, 1.12cqh); --t-md: max(7.4px, 1.32cqh);
    padding-top: calc(var(--pad) * 0.75);
  }
  .hero--b .hero__col { gap: 1.6cqh; padding-bottom: 2.2cqh; }
  .hero--b .vchips--many { --t-xl: max(12px, 2.45cqh); gap: 0.5cqh 0.65cqh; }
  .hero--b .vchips--many .vchip { padding: 0.45cqh 0.7cqh 0.4cqh 0.8cqh; }
  .hero--b .hero__col .kw__head { padding-bottom: 0.5cqh; }
  .hero--b .hero__col .kw__list { margin-top: 0.65cqh; gap: 0.4cqh; }
  .hero--b .kw__list li { line-height: 1.34; }
  .hero--b .specs--stack > div { padding: 0.65cqh 0 0.55cqh; }
}
@container (max-height: 540px) {
  .hero--b .page__body {
    --t-xs: max(6px, .95cqh); --t-sm: max(6.4px, 1.12cqh); --t-md: max(7px, 1.32cqh);
    padding-top: calc(var(--pad) * 0.65);
  }
  .hero--b .hero__col { gap: 1.4cqh; padding-bottom: 2.0cqh; }
  .hero--b .vchips--many { --t-xl: max(11px, 2.45cqh); gap: 0.45cqh 0.6cqh; }
  .hero--b .vchips--many .vchip { padding: 0.4cqh 0.6cqh 0.35cqh 0.7cqh; }
  .hero--b .hero__col .kw__head { padding-bottom: 0.45cqh; }
  .hero--b .hero__col .kw__list { margin-top: 0.55cqh; gap: 0.3cqh; }
  .hero--b .kw__list li { line-height: 1.3; }
  .hero--b .specs--stack > div { padding: 0.55cqh 0 0.45cqh; }
}
@container (max-height: 470px) {
  .hero--b .page__body {
    --t-xs: max(6px, .95cqh); --t-sm: max(6.4px, 1.12cqh); --t-md: max(7px, 1.32cqh);
    padding-top: calc(var(--pad) * 0.5);
  }
  .hero--b .hero__title { font-size: calc(var(--t-4xl) * 0.62); }
  .hero--b .hero__col { gap: 1.1cqh; padding-bottom: 1.7cqh; }
  .hero--b .vchips--many { --t-xl: max(10.5px, 2.45cqh); gap: 0.38cqh 0.55cqh; }
  .hero--b .vchips--many .vchip { padding: 0.34cqh 0.55cqh 0.3cqh 0.65cqh; }
  .hero--b .hero__col .kw__head { padding-bottom: 0.4cqh; }
  .hero--b .hero__col .kw__list { margin-top: 0.45cqh; gap: 0.22cqh; }
  .hero--b .kw__list li { line-height: 1.26; }
  .hero--b .specs--stack > div { padding: 0.45cqh 0 0.35cqh; }
}

/* ---- Hero C · ảnh macro tràn viền, chữ trắng trên lớp phủ tối ---------------- */
.hero--c .hero__shade--top    { background: linear-gradient(180deg, rgba(4, 22, 41, .9) 0%, rgba(4, 22, 41, .55) 24%, rgba(4, 22, 41, 0) 44%); }
.hero--c .hero__shade--bottom { background: linear-gradient(0deg, rgba(4, 22, 41, .95) 0%, rgba(4, 22, 41, .82) 26%, rgba(4, 22, 41, 0) 56%); }
.hero--c .page__body { grid-template-rows: auto 1fr auto; }
.hero--c .hero__title { font-size: calc(var(--t-4xl) * .92); color: #fff; }
.hero--c .hero__slogan { color: #ffd2b0; }
.hero--c .specs--row { border-top-color: var(--signal); }
.hero--c .hero__tag { right: 6.3cqh; top: 12.4cqh; }
.hero--c .specs dd { font-size: calc(var(--t-md) * 1.5); }

/* ---- Hero D · cột trái: mã + thông số phía trên cây băng; cột phải: tiêu đề, chú thích, ứng dụng -- */
.hero--d .page__body { grid-template-columns: 30cqh 1fr; grid-template-rows: 1fr; column-gap: 2.6cqh; }
.hero--d .hero__bg img {
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 11%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 11%);
}
.hero--d .hero__aside { grid-column: 1; align-self: start; display: grid; gap: 1.3cqh; padding-top: 0; }
.hero--d .vchips { display: grid; grid-template-columns: 1fr 1fr; gap: .6cqh; }
.hero--d .vchips li { min-width: 0; }
.hero--d .vchip { width: 100%; justify-content: space-between; gap: .5cqh; padding: .5cqh .9cqh .45cqh; }
.hero--d .vchip span { font-size: .84em; }

/* Bảng mã 2 hàng × 7 cột. 14 mã 2M01–2M14 là 2 chiều dài (17 m, 9 m) × 7 khổ rộng (4.6 … 0.5 cm), nên xếp
   thành bảng nhỏ thay vì 2 cột × 7 hàng: cụm mã chỉ cao ≈ 8cqh và nằm trọn phía TRÊN cây băng, không còn
   đè lên ảnh sản phẩm. Nhãn hàng/cột là <li class="vchips__lab"> (không phải .vchip) nên JS hover/ghim
   không bị ảnh hưởng; thông số đầy đủ của mã đang chọn hiện ở dải "Quy cách" ngay bên dưới.
   Cột nhãn hàng (17 m, 9 m) rộng 0 và nhãn "treo" ra lề trái trang, nhờ vậy 7 nút chiếm đủ bề rộng cột
   và chữ trong nút còn chỗ thở; mép trái hàng nút vẫn thẳng với đường kẻ đầu trang. */
.hero--d .vchips--matrix {
  grid-template-columns: 0 repeat(7, minmax(0, 1fr)); gap: .6cqh .4cqh; align-items: center;
  margin-left: -.4cqh; width: calc(100% + .4cqh);                /* bù khe của cột nhãn rộng 0: nút đầu tiên sát mép trái */
}
.vchips__lab { font-size: max(6.2px, .95cqh); line-height: 1.15; font-weight: 700; letter-spacing: .03em; text-align: center; color: var(--fg-3); font-variant-numeric: tabular-nums; }
.vchips__lab--row { justify-self: end; margin-right: .5cqh; white-space: nowrap; font-size: max(6.2px, 1.02cqh); letter-spacing: .02em; color: var(--fg-2); }
.vchips__lab--corner { justify-self: end; margin-right: .5cqh; white-space: nowrap; font-weight: 400; font-style: italic; }
.hero--d .vchips--matrix .vchip { position: relative; justify-content: center; padding: .45cqh 0 .4cqh; border-radius: .45cqh; }
.hero--d .vchips--matrix .vchip b { font-size: max(7px, 1.36cqh); letter-spacing: .01em; }
.hero--d .vchips--matrix .vchip span { display: none; }
.hero--d .vchips--matrix .vchip::after { content: ""; position: absolute; inset: -.3cqh; }   /* vùng chạm rộng hơn nút một chút (điện thoại) */
/* dải thông số xếp ngang, gọn */
.hero--d .specs--row { padding-block: .85cqh .8cqh; flex-wrap: nowrap; row-gap: 0; }   /* luôn 1 hàng, kể cả khi trang thu nhỏ (quy tắc @container ở mục 13 cho .specs--row xuống dòng) */
.hero--d .specs--row > div { padding-right: 1.5cqh; }
.hero--d .specs--row > div + div { padding-left: 1.5cqh; }
.hero--d .specs--row dt { font-size: max(6.2px, .95cqh); }
.hero--d .specs--row dd { font-size: max(8.5px, 1.72cqh); }
.hero--d .hero__main { grid-column: 2; display: grid; gap: 2.6cqh; align-content: start; }
.hero--d .hero__title { font-size: calc(var(--t-4xl) * .8); }
.hero--d .hero__callouts { display: grid; grid-template-columns: 1fr 1fr; gap: 2.2cqh 2.4cqh; }
.hero--d .callout { position: relative; left: auto; top: auto; width: auto; padding-left: 1.5cqh; border-left: .32cqh solid var(--signal); }
.hero--d .callout::before, .hero--d .callout::after { display: none; }
.hero--d .callout span { color: var(--fg-2); opacity: 1; }
.hero--d .hero__tag { right: 6.4cqh; bottom: 9.6cqh; }

/* ---- Hero E · sáu mã chung một khổ: ảnh giữa trang, hàng mã cỡ lớn phía dưới -- */
.hero--e .page__body { grid-template-columns: 1fr; grid-template-rows: auto 1fr auto; }
.hero--e .hero__title { font-size: calc(var(--t-4xl) * .92); }
.hero--e .hero__tag { right: 7cqh; top: 34cqh; }
.hero--e .subtitle { margin: 0; }


/* ---- Tiêu đề bằng chữ Hán không có khoảng trắng nên hạ cỡ để không bị ngắt giữa từ ---- */
:root[lang="zh"] .page--hero .hero__title { font-size: calc(var(--t-4xl) * .78); letter-spacing: 0; }
:root[lang="zh"] .hero--b .hero__title { font-size: calc(var(--t-4xl) * .7); }
:root[lang="zh"] .hero--d .hero__title { font-size: calc(var(--t-4xl) * .6); }
:root[lang="zh"] .cover__title { letter-spacing: 0; }


/* ==========================================================================
   9. TRANG THÔNG SỐ – LƯỚI SẢN PHẨM · HAI SẢN PHẨM
   Trang dày thông số thì nền phải lặng để nhường chỗ cho ảnh và số liệu: gradient tối
   giản theo tông nhóm hàng, nhiều khoảng trắng. Chỉ có hai kiểu nền và chúng luân phiên
   giữa các trang để không trang nào giống trang nào:
     mặc định   chỉ gradient nhạt
     .bg-dots   lưới chấm bi (dot matrix) rất mờ ở phía ảnh, tan dần về phía chữ
   Đặt .bg-dots lên thẻ <section class="page …"> để bật lưới chấm cho trang đó.
   ========================================================================== */
.page--grid, .page--duokw {
  background: linear-gradient(180deg, var(--tint) 0%, #fff 30%, #fff 74%, var(--tint) 100%);
}

/* ---- Lưới: mỗi sản phẩm một dải, tràn hết chiều ngang trang ---- */
.grid { display: grid; gap: 0; flex: 1; min-height: 0; }
.grid--2 { grid-template-rows: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-rows: repeat(3, minmax(0, 1fr)); }
.grid--2c { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.page--grid .page__body { display: flex; flex-direction: column; padding: 1.8cqh 0 0; }

/* mảng màu chỉ đậm ở phía ảnh rồi tan về trắng ở phía chữ */
.pblock--card {
  position: relative; overflow: hidden;
  background: linear-gradient(100deg, var(--tint-2) 0%, var(--tint) 34%, rgba(255, 255, 255, 0) 84%);
}
.pblock--card > .media, .pblock--card > .pblock__info { position: relative; }

/* lưới chấm bi: nằm dưới ảnh và chữ */
.bg-dots .pblock--card::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; color: var(--tone); opacity: .17;
  background-image: radial-gradient(currentColor 0 .17cqh, transparent .24cqh);
  background-size: 2.1cqh 2.1cqh;
  -webkit-mask-image: linear-gradient(100deg, #000 0%, rgba(0, 0, 0, .55) 34%, transparent 66%);
          mask-image: linear-gradient(100deg, #000 0%, rgba(0, 0, 0, .55) 34%, transparent 66%);
}

.page--grid .pblock--card { align-items: center; padding: 0 var(--pad); gap: 1.6cqh; }
.page--grid .pblock--card + .pblock--card { border-top: .3cqh solid var(--signal); }
.page--grid .pblock--card:nth-child(even) {
  flex-direction: row-reverse;
  background: linear-gradient(260deg, var(--tint-2) 0%, var(--tint) 34%, rgba(255, 255, 255, 0) 84%);
}
.bg-dots.page--grid .pblock--card:nth-child(even)::before {
  -webkit-mask-image: linear-gradient(260deg, #000 0%, rgba(0, 0, 0, .55) 34%, transparent 66%);
          mask-image: linear-gradient(260deg, #000 0%, rgba(0, 0, 0, .55) 34%, transparent 66%);
}
.page--grid .pblock--row > .media { width: 52%; align-self: stretch; }
.page--grid .pblock--row > .media img {
  object-position: 60% 54%; transform: scale(var(--zoom, 1.2));
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 74%, transparent 100%);
          mask-image: linear-gradient(90deg, #000 0%, #000 74%, transparent 100%);
}
.page--grid .pblock--card:nth-child(even) > .media img {
  -webkit-mask-image: linear-gradient(270deg, #000 0%, #000 74%, transparent 100%);
          mask-image: linear-gradient(270deg, #000 0%, #000 74%, transparent 100%);
}
.pblock--card .media__tag {
  background: var(--signal); font-size: calc(var(--t-md) * 1.5); padding: .6cqh 1.3cqh .45cqh; border-radius: .5cqh;
  transform: rotate(-4deg); box-shadow: 0 1cqh 1.6cqh -1cqh rgba(4, 22, 41, .5);
}
.page--grid .pblock--card .media__tag { left: 1.6cqh; top: auto; bottom: 2.6cqh; }
.page--grid .pblock--card:nth-child(even) .media__tag { left: auto; right: 1.6cqh; }
.page--duokw .pblock--card .media__tag { left: 0; top: .4cqh; }
.page--grid .pblock--row > .pblock__info { padding-block: 2cqh; gap: 1.5cqh; }
.page--grid .pblock--half .title  { font-size: calc(var(--t-xl) * 1.62); }
.page--grid .pblock--third .title { font-size: calc(var(--t-xl) * 1.28); }
.page--grid .pblock--third { --zoom: 1.12; }
.page--grid .pblock--third .pblock__info { gap: .9cqh; }
.page--grid .pblock--third .slogan, .page--grid .pblock--third .subtitle { font-size: var(--t-sm); margin-top: 0; }
.page--grid .pblock--third .slogan::before { width: 1.6cqh; }

/* ---- Trang hai sản phẩm + hàng từ khoá: hai khối đứng cạnh nhau ---- */
.page--duokw .page__body { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 0; padding: calc(var(--pad) * .8) 0 0; }
.page--duokw .page__body > div:first-child { padding: 0 var(--pad) 2.6cqh; }
.page--duokw .grid--2c { min-height: 0; }
.page--duokw .pblock--card { padding: 2.4cqh 3.2cqh; gap: 1.8cqh; background: linear-gradient(172deg, var(--tint-2) 0%, var(--tint) 30%, rgba(255, 255, 255, 0) 78%); }
.page--duokw .pblock--card + .pblock--card { border-left: .3cqh solid var(--signal); }
.page--duokw .pblock--card > .media { flex: 1 1 auto; min-height: 0; }
.page--duokw .pblock--card > .media img {
  object-fit: cover; object-position: 50% 52%; transform: scale(var(--zoom, 1.28));
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 78%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 0%, #000 78%, transparent 100%);
}
.page--duokw .pblock--card:first-child { padding-left: var(--pad); }
.page--duokw .pblock--card:last-child  { padding-right: var(--pad); }
.bg-dots.page--duokw .pblock--card::before {
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .5) 34%, transparent 64%);
          mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .5) 34%, transparent 64%);
}
.page--duokw .pblock--half .title { font-size: calc(var(--t-xl) * 1.35); }
.page--duokw .pblock__info { position: relative; gap: 1.2cqh; }
.kwrow {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.8cqh;
  padding: 2.2cqh var(--pad) 2.4cqh;
  background: rgba(255, 255, 255, .7); border-top: .3cqh solid var(--brand-deep);
}
.page--duokw .page__title { font-size: calc(var(--t-2xl) * 1.5); text-transform: uppercase; }
.page--duokw .page__body > div:first-child .slogan { margin-top: 1.2cqh; }


/* ==========================================================================
   10. TRANG CHUYỂN PHẦN (GIỚI THIỆU · HƯỚNG DẪN) · BẢNG MÃ ĐẶT HÀNG
   Trang chuyển phần: khối xanh đêm cắt chéo ở đầu trang chứa tiêu đề, thêm một cụm vòng
   tròn đồng tâm thu nhỏ ở một góc và tan dần vào nền (.deco--rings.deco--fade).
   Bảng mã đặt hàng là trang thông số nên KHÔNG dùng khối xanh: nền gradient nhạt, nhiều khoảng trắng.
   ========================================================================== */
.page--intro, .page--guide {
  background:
    radial-gradient(85% 50% at 100% 0%, rgba(255, 255, 255, .8) 0%, rgba(255, 255, 255, 0) 70%),
    linear-gradient(185deg, var(--tint) 0%, var(--tint-2) 100%);
}
.page--intro::before, .page--guide::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; pointer-events: none;
  background:
    radial-gradient(60% 70% at 88% 12%, rgba(46, 132, 226, .5) 0%, rgba(46, 132, 226, 0) 100%),
    linear-gradient(158deg, #0c539f 0%, var(--brand-deep) 58%, var(--night) 100%);
}
.page--intro::before { height: 51cqh; clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%); }
.page--guide::before { height: 47cqh; clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%); }

/* phần chữ nằm trên khối xanh đêm dùng màu sáng */
.page--intro .page__head, .page--guide .page__head,
.page--intro .page__body > div:first-child, .page--guide .page__body > div:first-child,
.page--intro .stats {
  --fg: #fff; --fg-2: rgba(255, 255, 255, .84); --fg-3: rgba(255, 255, 255, .62); --rule: rgba(255, 255, 255, .3);
}
.page--intro .page__mark, .page--guide .page__mark { filter: brightness(0) invert(1); }
.page--intro .page__title, .page--guide .page__title { text-transform: uppercase; }
.page--intro .page__title { font-size: calc(var(--t-2xl) * 1.55); max-width: 40cqh; }
.page--intro .page__intro { max-width: 46ch; }

/* ---- Giới thiệu + mục lục ---- */
.page--intro .page__body { display: grid; grid-template-rows: auto auto 1fr; gap: 2cqh; }
.stats { display: flex; gap: 3.8cqh; padding: 1.7cqh 0 0; border-top: .4cqh solid var(--signal); }
.stat { display: grid; gap: .5cqh; }
.stat b { font-family: var(--font-display); font-size: calc(var(--t-3xl) * 1.4); font-weight: 700; line-height: .86; color: #fff; font-variant-numeric: tabular-nums; }
.stat span { font-size: var(--t-xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--fg-2); }

.toc {
  align-self: stretch; display: grid; grid-auto-rows: minmax(0, 1fr); gap: 0; padding: .55cqh 1.6cqh;      /* các hàng chia đều phần cao còn lại giữa thống kê và chân trang: đủ 16 hàng ở mọi cỡ trang */
  background: rgba(255, 255, 255, .95); border-radius: 1cqh;                       /* gần đặc: thẻ cao hơn nên chồng lên mép chéo của khối xanh, không để lộ màu xanh xuyên qua */
  box-shadow: 0 2.4cqh 4cqh -2.6cqh rgba(7, 47, 92, .5);
}
.toc__row {
  display: grid; grid-template-columns: 4.8cqh 1fr auto; align-items: baseline; gap: 1.4cqh;
  align-content: center; padding: .2cqh .6cqh; line-height: 1.1; transition: background-color .25s;
}
.toc__row + .toc__row { box-shadow: inset 0 1px 0 rgba(14, 27, 42, .1); }
.toc__row > b { font-family: var(--font-display); font-size: calc(min(max(8.5px, 1.25cqh), 1.45cqh) * 1.35); font-weight: 700; color: var(--signal-deep); font-variant-numeric: tabular-nums; }
.toc__name { font-size: min(max(8.5px, 1.25cqh), 1.45cqh); font-weight: 700; }
.toc__kind { font-size: min(max(7px, .95cqh), 1.12cqh); font-style: normal; color: var(--ink-3); }

/* ---- Trang 02 · Lời ngỏ: thư một cột chữ, nhiều khoảng trắng ---------------------------------------------------------
   Chữ thân ≈ 10.5pt khi in (1.27cqh), giãn dòng 1.66, cột rộng 55cqh (≈ 80 ký tự/dòng) nên đọc thoải mái. Mở đầu bằng câu chào
   cỡ lớn (serif nghiêng); ba giá trị cốt lõi đánh số 01–03 bằng CSS (không thêm chữ nào vào nội dung); kết thư "Trân trọng!".
   Sàn cỡ chữ 8px: khi trang bị thu nhỏ quá thì phần thân tự cuộn thay vì tràn khỏi trang. */
.page--letter { background: linear-gradient(185deg, var(--tint) 0%, #fff 36%, #fff 100%); }
.page--letter .page__body { display: flex; flex-direction: column; overflow-y: auto; scrollbar-width: thin; padding-top: 1.2cqh; padding-bottom: 4cqh; }
.letter { width: min(100%, 55cqh); margin-block: auto; font-size: max(8px, 1.27cqh); line-height: 1.66; color: var(--ink); }   /* margin auto: còn chỗ thì căn giữa dọc, tràn thì dính đầu trang và cuộn được (justify-content: center sẽ cắt mất phần đầu) */
.letter > * { margin: 0; }
.letter__lead {
  position: relative; padding-top: 2.2cqh;
  font-family: var(--font-serif); font-style: italic; font-weight: 500; font-size: 1.62em; line-height: 1.36; color: var(--brand-deep); text-wrap: pretty;
}
.letter__lead::before { content: ""; position: absolute; left: 0; top: 0; width: 6cqh; height: .55cqh; background: var(--signal); }   /* gạch cam nhỏ, như vạch trên khẩu hiệu */
.letter__p { margin-top: 1.2em; color: var(--ink-2); text-wrap: pretty; }
.letter__lead + .letter__p { margin-top: 1.55em; }
.letter__p--lead-in { margin-top: 1.4em; color: var(--ink); font-weight: 600; }
.letter__values { list-style: none; counter-reset: v; margin: .75em 0 1em; padding: 0; border-top: 1px solid rgba(14, 27, 42, .14); }
.letter__values li {
  counter-increment: v; display: grid; grid-template-columns: 5.4cqh minmax(0, 1fr); column-gap: 1cqh; align-items: baseline;
  padding: .8em 0 .75em; border-bottom: 1px solid rgba(14, 27, 42, .14);
}
.letter__values li::before { content: counter(v, decimal-leading-zero); font-family: var(--font-display); font-weight: 700; font-size: 2.3em; line-height: .9; color: var(--signal); font-variant-numeric: tabular-nums; }
.letter__values p { margin: 0; color: var(--ink-2); text-wrap: pretty; }
.letter__values b { color: var(--brand-deep); font-weight: 700; }
.letter__sign { margin-top: 1.3em; font-family: var(--font-serif); font-style: italic; font-weight: 600; font-size: 1.55em; line-height: 1.2; color: var(--brand-deep); }
:root[lang="zh"] .letter__lead, :root[lang="zh"] .letter__sign { font-style: normal; }                  /* chữ Hán không nghiêng giả */
:root[lang="zh"] .letter { line-height: 1.85; }


/* ---- Trang bảng mã đặt hàng: nền lặng, bảng là trung tâm ---- */
.page--order { background: linear-gradient(180deg, var(--tint) 0%, #fff 26%, #fff 100%); }
.page--order .page__body { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 3cqh; }
/* Các trang bảng mã (16–22) không còn tiêu đề/đoạn dẫn: bảng ăn trọn chiều cao thân trang */
.page--order:not(.page--summary) .page__body { grid-template-rows: minmax(0, 1fr); align-content: start; }
.page--order .page__title { font-size: calc(var(--t-2xl) * 1.5); text-transform: uppercase; }
.otable {
  width: 100%; border-collapse: collapse; font-size: min(max(8px, 1.25cqh), 1.45cqh); line-height: 1.15;
  background: #fff; box-shadow: 0 0 0 1px rgba(14, 27, 42, .08), 0 2.4cqh 4cqh -3cqh rgba(7, 47, 92, .35);
}
.otable th, .otable td { padding: .3cqh 1cqh; text-align: left; white-space: nowrap; }
.otable thead th {
  background: var(--brand-deep); color: #fff; font-size: min(max(7px, 1.02cqh), 1.25cqh);
  font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
.otable thead th:first-child { padding-left: 1.4cqh; }
.otable tbody tr { border-bottom: 1px solid rgba(14, 27, 42, .1); transition: background-color .2s; }
.otable td { font-variant-numeric: tabular-nums; color: var(--ink-2); }
/* Ô tên nhóm hàng (.fam) gộp nhiều dòng nên ở các dòng sau ô đầu tiên của dòng lại là ô mã hàng.
   Vì vậy KHÔNG dùng :first-child để định dạng mà đặt class riêng, nếu không lề của cột mã bị lệch. */
.otable td.fam { white-space: normal; padding: .7cqh .9cqh; font-weight: 700; color: var(--ink); background: rgba(232, 240, 249, .55); }
/* Tên nhóm ở trên, ảnh to bên dưới — xếp dọc thay vì cạnh nhau để ảnh có chỗ hiển thị lớn hơn hẳn.
   Một ảnh dùng chung cho cả nhóm (không phải từng biến thể); nền trắng hoà (multiply) vào nền ô. */
.fam__box { display: flex; flex-direction: column; align-items: flex-start; gap: .6cqh; }
.fam__box > span { min-width: 0; line-height: 1.15; }
.fam__img {
  flex: none; display: block;
  width: 8.8cqh; height: 8.8cqh; border-radius: .7cqh; object-fit: cover;
  background: #fff; box-shadow: 0 0 0 1px rgba(14, 27, 42, .12);
  mix-blend-mode: multiply; filter: brightness(1.045) contrast(1.02);
}
/* Cột MÃ HÀNG căn trái toàn bộ, cùng một lề từ tiêu đề đến dòng cuối để chữ và số thẳng hàng tắp */
.otable th.c-h, .otable td.c { text-align: left; padding-left: 1.6cqh; }
.otable td.c { font-family: var(--font-display); font-size: 1.55em; line-height: 1; color: var(--brand); font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.page--order .otable td.n, .page--order .otable th.n-h { text-align: right; padding-right: 1.4cqh; }

/* Cột "SL đặt": ô nhập số lượng ngay trong bảng để bản web dùng làm phiếu đặt hàng tương tại chỗ.
   Giá trị nhập được JS gom lại và đổ vào trang "Tổng hợp đơn hàng" ngay sau bảng mã (xem catalog.js).
   Cụm nút +/- và ô số cỡ đủ lớn để bấm thoải mái trên di động, không chỉ dùng chuột trên desktop.
   Khi in, input vẫn hiện khung + giá trị đã gõ như chữ thường nên tờ in ra dùng được luôn làm phiếu đặt. */
.page--order .otable td.qty, .page--order .otable th.qty-h { text-align: center; padding: .3cqh .6cqh; width: 15cqh; }
.qty__row { display: flex; align-items: center; justify-content: center; gap: .6cqh; }
.qty__btn {
  flex: none; width: 2.9cqh; height: 2.9cqh; min-width: 22px; min-height: 22px; padding: 0;
  display: grid; place-items: center; font: 700 max(15px, 1.7cqh)/1 var(--font-body);
  color: var(--brand); background: #eef3f9; border: 1px solid rgba(10, 58, 115, .22); border-radius: 50%;
  cursor: pointer; user-select: none;
}
.qty__btn:hover { background: #fff; border-color: var(--signal); color: var(--signal); }
.qty__btn:active { background: rgba(255, 106, 26, .18); }
.qty__input {
  width: 5.8cqh; min-width: 36px; padding: .2cqh .2cqh; text-align: center; font: inherit; font-size: 1.05em; line-height: 1.1; font-variant-numeric: tabular-nums;
  color: var(--brand); font-weight: 700; border: 1px solid rgba(10, 58, 115, .32); border-radius: .5cqh;
  background: #fbfcfe; -moz-appearance: textfield;
}
.qty__input::-webkit-outer-spin-button, .qty__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qty__input:focus { outline: none; border-color: var(--signal); box-shadow: 0 0 0 3px rgba(255, 106, 26, .18); }
.qty__input::placeholder { color: rgba(10, 58, 115, .35); font-weight: 400; }
/* In ra: bỏ 2 nút +/- (đã có .u-noprint lo), ô số giữ nguyên khung + giá trị đã gõ để dùng làm phiếu đặt */
@media print { .qty__input { width: 7cqh; } }

/* ---- Bảng mã đặt hàng (trang 16–22): ảnh + mã hàng to, quy cách gọn, nút số lượng cỡ ngón tay -----------------
   Class `otable--order` chỉ có ở các bảng mã; bảng ở trang "Tổng hợp đơn hàng" là .summary-table (xem bên dưới).
   · Mọi kích thước tính bằng cqh (1% chiều cao trang), KHÔNG có sàn px → bảng co giãn đúng tỉ lệ với trang A4,
     vừa khít ở mọi cỡ màn hình lẫn khi in, không tràn lề phải / đè chân trang.
   · table-layout: fixed + <colgroup>: 5 cột có độ rộng cố định, giống hệt nhau ở mọi trang, tổng = khoảng giữa hai lề.
   · Phân bổ cột (cộng lại 100%): ảnh nhóm 20.2 · MÃ HÀNG 14.6 · quy cách 20.6 · đóng gói 16.2 · SL đặt 28.4.
   Chỉnh nhanh ngay dưới đây:  --o-row cao mỗi hàng · --o-btn đường kính nút +/− · --o-in-h/-w ô số · --o-thumb cỡ ảnh nhóm.
   Hàng cao hơn ⇒ ít hàng/trang hơn: nếu tăng --o-row quá ~4.7cqh thì phải chia lại các nhóm sang nhiều trang hơn. */
.page--order:not(.page--summary) .page__body { padding-top: calc(var(--pad) * .44); }   /* sát đầu trang hơn: thêm chỗ cho hàng cao */
.page--order .otable.otable--order {
  --o-fs: 1.12cqh;                       /* chữ nền ≈ 9.4pt khi in */
  --o-row: 4.6cqh;                       /* cao 1 hàng mã ≈ 13.7mm */
  --o-btn: 4cqh;                         /* nút +/−: đường kính */
  --o-in-h: 4.3cqh;                      /* ô số: cao hơn nút một chút */
  --o-in-w: 6.2cqh;                      /*       và rộng gần gấp rưỡi nút */
  --o-thumb: 10.2cqh;                    /* ảnh nhóm */
  table-layout: fixed;
  font-size: var(--o-fs); line-height: 1.15;
}
.otable--order th, .otable--order td { padding: 0 .6cqh; }
.otable--order thead th {
  padding: .55cqh .6cqh; font-size: .92cqh; letter-spacing: .06em;
  background: var(--brand-deep); box-shadow: 1px 0 0 var(--brand-deep);       /* tràn 1px sang phải: che đường hở mảnh giữa các ô khi in/PDF */
}
.otable--order thead th:last-child { box-shadow: none; }
.otable--order thead th:first-child { padding-left: 1.2cqh; }
.otable--order tbody tr { height: var(--o-row); }
.otable--order tbody tr.ge { border-bottom-color: rgba(13, 74, 141, .34); }   /* cuối mỗi nhóm: kẻ đậm hơn để tách nhóm */

.otable--order col.k-fam  { width: 20.2%; }
.otable--order col.k-code { width: 14.6%; }
.otable--order col.k-spec { width: 20.6%; }
.otable--order col.k-n    { width: 16.2%; }
.otable--order col.k-qty  { width: 28.4%; }

/* ảnh nhóm: to hơn hẳn */
.otable--order td.fam { padding: .55cqh .75cqh; }
.otable--order .fam__box { gap: .45cqh; }
.otable--order .fam__box > span { font-size: 1cqh; line-height: 1.12; text-wrap: balance; }
.otable--order .fam__img { width: var(--o-thumb); height: var(--o-thumb); border-radius: .8cqh; }

/* MÃ HÀNG: chữ to, đậm, màu thương hiệu */
.page--order .otable.otable--order th.c-h, .page--order .otable.otable--order td.c { padding-left: .9cqh; padding-right: .2cqh; }
.otable--order td.c { font-size: 2.3cqh; letter-spacing: .015em; }

/* QUY CÁCH: ép gọn — chữ nhỏ, bỏ khoảng giãn chữ, thu khoảng trắng giữa số và đơn vị (50 mic × 46.5 mm × 100 yd → sát nhau),
   lề ô gần bằng 0 để nhường chỗ cho ảnh và mã hàng */
.page--order .otable.otable--order td.s { font-size: .8em; letter-spacing: -.012em; word-spacing: -.13em; padding: 0 .2cqh 0 .5cqh; }

/* ĐÓNG GÓI: dòng 1 = quy chuẩn thùng (cơ sở của phép quy đổi "thùng + cuộn" ở trang tổng hợp), dòng 2 mờ = cuộn/cây hoặc cuộn/lốc */
.page--order .otable.otable--order td.n, .page--order .otable.otable--order th.n-h { padding: 0 .9cqh 0 .2cqh; }
.otable--order td.n b { display: block; font-weight: 600; font-size: .8em; color: var(--ink); }
.otable--order td.n i { display: block; margin-top: .15cqh; font-style: normal; font-size: .66em; color: var(--ink-3); }

/* SL ĐẶT: nút +/− cỡ ngón tay, ô số to hơn nút một chút. Vùng chạm của nút (::after) rộng hơn hình vẽ, nằm gọn trong hàng
   nên không đè sang hàng khác; touch-action tắt độ trễ/zoom khi chạm hai lần liên tiếp để bấm nhanh +,+,+ */
.page--order .otable.otable--order td.qty, .page--order .otable.otable--order th.qty-h { width: auto; padding: 0 .4cqh; }
.otable--order .qty__row { gap: .5cqh; }
.otable--order .qty__btn {
  position: relative; width: var(--o-btn); height: var(--o-btn); min-width: 0; min-height: 0;
  font-size: 2.7cqh; font-weight: 700; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.otable--order .qty__btn::after { content: ""; position: absolute; inset: -.3cqh -.45cqh; }
.otable--order .qty__input {
  width: var(--o-in-w); min-width: 0; height: var(--o-in-h); padding: 0;
  font-size: 2cqh; line-height: 1; border-width: 1.5px; border-radius: .9cqh;
}
.otable--order .qty__input::placeholder { font-size: 1.8cqh; }
@media print { .otable--order .qty__input { width: 9cqh; } }                       /* in: không có nút nên ô số rộng ra, đủ chỗ viết tay */

/* Trang tổng hợp đơn hàng: rỗng theo mặc định (chưa ai điền số lượng) nên ẩn bảng, hiện dòng nhắc;
   JS (catalog.js, mục 8) đảo trạng thái khi có ít nhất một mã được điền. */
.summary-empty {
  padding: 3cqh 2.4cqh; border-radius: 1cqh; background: rgba(232, 240, 249, .6);
  border: 1px dashed rgba(10, 58, 115, .3); color: var(--ink-2); font-style: italic;
}
/* Bảng tổng hợp: cột cố định (không bao giờ tràn lề), cỡ chữ theo trang. Cột "Số lượng" ghi "1 thùng + 3 cuộn" (đậm)
   kèm tổng số cuộn mờ trong ngoặc; dòng dài thì phần ngoặc tự xuống hàng thay vì đẩy bảng rộng ra. */
.summary-table { table-layout: fixed; font-size: 1.12cqh; }
.summary-table col.ks-code { width: 13.4%; }
.summary-table col.ks-name { width: 23.4%; }
.summary-table col.ks-spec { width: 27.2%; }
.summary-table col.ks-qty  { width: 36%; }
.summary-table thead th { font-size: .95cqh; }
.summary-table td { white-space: normal; padding-top: .3cqh; padding-bottom: .3cqh; }            /* dài quá thì xuống dòng, không bao giờ cắt chữ */
.summary-table td.c { white-space: nowrap; }
.summary-table td:nth-child(3) { word-spacing: -.1em; }                                          /* quy cách: ép khoảng trắng giữa số và đơn vị như bảng mã */
.summary-table td.n { line-height: 1.2; }
.summary-table td.n b { font-weight: 700; color: var(--ink); }
.summary-table td.n small { display: inline-block; margin-left: .15em; font-size: .84em; font-weight: 400; color: var(--ink-3); white-space: nowrap; }
/* ---- Trang tổng hợp đơn hàng (23) -----------------------------------------------------------------------------
   Khung điều khiển .sum__top GHIM CỐ ĐỊNH (position: sticky) ở đầu trang: lời nhắc, 3 ô thông tin bắt buộc, thống kê,
   2 nút xuất ảnh, vùng báo lỗi. Danh sách đơn (.sum__list) cuộn bên dưới; vùng cuộn là chính .page__body.
   · Vùng cuộn KHÔNG có padding-top (sticky tính top theo lòng vùng cuộn, có padding thì để hở một dải cho hàng cuộn lòi lên). Khoảng cách
     ban đầu với đầu trang là margin-top của chính khung: chưa cuộn thì khung nằm cách đầu trang một khoảng, cuộn tới thì dính sát mép
     trên vùng cuộn; hàng cuộn qua nằm DƯỚI khung (z-index: 10, nền trắng đặc) và bị cắt ở mép trên nên không lòi ra phía trên khung.
   · Kích thước dùng cqh như các trang khác; riêng chữ/ô nhập có sàn px để bấm/gõ được khi trang bị thu nhỏ. */
.page.page--summary .page__body {
  display: block; overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: rgba(10, 58, 115, .4) transparent;
  padding: 0 var(--pad) 1.6cqh;
}
.sum__top {
  position: sticky; top: 0; z-index: 10; margin-top: 1.8cqh;
  padding: 1.3cqh 1.6cqh 1.3cqh;
  background: #fff; border: 1px solid rgba(10, 58, 115, .14); border-radius: .7cqh;       /* bo góc nhỏ: hàng cuộn dưới khung không lòi ra ở góc */
  box-shadow: 0 .9cqh 2.6cqh -1.4cqh rgba(7, 47, 92, .45);
}
.sum__intro { margin: 0 0 1cqh; font-size: var(--t-sm); line-height: 1.4; color: var(--ink-2); }

/* 3 ô thông tin: hàng 1 = đại diện (cả bề ngang); hàng 2 = địa chỉ (giãn) + số điện thoại. Thứ tự DOM = thứ tự nhìn = thứ tự trong thông báo/ảnh xuất */
.sum__form { display: grid; grid-template-columns: minmax(0, 1fr) 17cqh; gap: .9cqh 1.3cqh; }
.sum__field { display: grid; gap: .4cqh; min-width: 0; }
.sum__field--rep { grid-column: 1 / -1; }
.sum__label { font-size: var(--t-xs); font-weight: 700; letter-spacing: .01em; color: var(--ink-2); line-height: 1.2; }
.sum__label i { margin-left: .3em; font-style: normal; color: #d93025; }                      /* dấu * bắt buộc */
.sum__field input {
  box-sizing: border-box; width: 100%; min-width: 0; height: max(22px, 3.5cqh); padding: 0 1.1cqh;
  font-family: inherit; font-weight: 500; font-size: max(11px, 1.35cqh); line-height: 1; color: var(--ink);
  background: #fbfdff; border: 1px solid rgba(10, 58, 115, .3); border-radius: .8cqh; outline: none;
  transition: border-color .15s, box-shadow .15s, background-color .15s;
}
.sum__field input:hover { border-color: rgba(10, 58, 115, .55); }
.sum__field input:focus { background: #fff; border-color: var(--brand); box-shadow: 0 0 0 .4cqh rgba(13, 74, 141, .16); }
.sum__field input.is-invalid { background: #fff6f5; border-color: #d93025; box-shadow: 0 0 0 .4cqh rgba(217, 48, 37, .14); }
.sum__field:has(input.is-invalid) .sum__label { color: #b3261e; }

/* hàng thống kê + 2 nút: một dòng gọn (số đứng cạnh nhãn, không xếp chồng để khung ghim thấp); hẹp quá thì nút xuống dòng chứ không tràn */
.sum__bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1cqh 1.6cqh;
  margin-top: 1.2cqh; padding-top: 1.1cqh; border-top: .4cqh solid var(--signal);
}
.sum__top .summary-totals { margin: 0; padding: 0; border: 0; gap: 2cqh; align-items: center; }
.sum__top .stat { display: flex; align-items: baseline; gap: .8cqh; white-space: nowrap; }
.sum__top .stat b { font-size: max(14px, 3.4cqh); line-height: 1; color: var(--brand); }
.sum__top .stat span { font-size: var(--t-xs); line-height: 1.15; letter-spacing: .05em; color: var(--ink-2); }   /* bớt giãn chữ (mặc định .1em) cho vừa một hàng */
.summary-actions { display: flex; align-items: center; gap: 1cqh; }
.summary-btn {
  display: inline-flex; align-items: center; gap: .7cqh; padding: 1.05cqh 1.6cqh;
  font-family: inherit; font-weight: 700; font-size: max(9.5px, 1.3cqh); line-height: 1; color: #fff; background: var(--brand);
  border: none; border-radius: 999px; cursor: pointer; white-space: nowrap;
}
.summary-btn svg { width: 1.5cqh; height: 1.5cqh; min-width: 9px; min-height: 9px; font-size: 1.6cqh; }
.summary-btn:hover:not(:disabled) { background: var(--signal); }
.summary-btn:disabled { background: #c7d2de; cursor: not-allowed; }

/* thông báo NỔI ngay dưới khung ghim (position: absolute theo khung sticky) nên không làm khung cao thêm, không làm danh sách nhảy:
   lỗi thiếu thông tin (đỏ, tồn tại tới khi điền đủ) · trạng thái sao chép/tải (tự tắt sau vài giây) */
.sum__err, .summary-status {
  position: absolute; left: 0; right: 0; top: calc(100% + .8cqh); z-index: 11; margin: 0;
  padding: .9cqh 1.3cqh; border-radius: .8cqh; font-size: var(--t-sm); line-height: 1.4;
  box-shadow: 0 .8cqh 2.2cqh -.8cqh rgba(7, 47, 92, .45);
}
.sum__err { font-weight: 600; color: #8a1c14; background: #fdecea; border: 1px solid rgba(217, 48, 37, .35); border-left: .5cqh solid #d93025; }
.summary-status { display: block; color: var(--ink-2); font-style: italic; background: #fff; border: 1px solid rgba(10, 58, 115, .18); }
.summary-status:empty { display: none; }
.sum__list { margin-top: 2cqh; }

/* điện thoại / máy cảm ứng: chữ ô nhập ≥ 16px (iOS tự phóng to trang khi chạm vào ô nhỏ hơn thế), ô và nút đủ cao để bấm */
@media (pointer: coarse) {
  .sum__field input { font-size: max(16px, 1.35cqh); height: max(34px, 3.5cqh); }
  .summary-btn { min-height: 34px; }
}

@media print {                                              /* in: khung hết ghim, ô thông tin in ra giá trị đã điền (hoặc để trống cho viết tay); đơn dài thì trang dài ra sang tờ sau */
  /* .page.page--summary (độ ưu tiên cao hơn .page ở khối @media print cuối file, vốn ép height: 297mm) */
  .page.page--summary { container-type: normal; display: block; height: auto; min-height: 297mm; overflow: visible; break-inside: auto; }
  /* container-type: size + height: auto ⇒ khung cao 0 và mọi đơn vị cqh = 0 (chữ biến mất). Bỏ khung chứa: cqh tự lấy theo khổ giấy in (297mm) nên kích thước giữ nguyên */
  .page.page--summary .page__body { display: block; overflow: visible; padding-bottom: 24mm; }       /* chừa chỗ cho chân trang, nội dung không bao giờ chạm tới */
  .sum__top { position: static; box-shadow: none; break-inside: avoid; }
  /* ô nhập không tự xuống dòng nên địa chỉ dài sẽ bị cắt khi in: ẩn ô, in bản sao giá trị (data-v) trong khung viền, mỗi trường một hàng */
  .sum__form { grid-template-columns: minmax(0, 1fr); }
  .sum__field--rep { grid-column: auto; }
  .sum__field input { display: none; }
  .sum__field::after {
    content: attr(data-v); display: block; min-height: 3.5cqh; box-sizing: border-box; padding: .8cqh 1.1cqh;
    font-size: 1.35cqh; line-height: 1.35; font-weight: 500; color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere;
    background: #fff; border: 1px solid rgba(10, 58, 115, .4); border-radius: .8cqh;
  }
  .sum__err, .summary-status { display: none !important; }
  .page.page--summary .page__foot { position: absolute; left: 0; right: 0; bottom: 0; margin: 0 var(--pad); }   /* sát đáy tờ cuối của trang tổng hợp, dù ngắn hay dài */
  .summary-table tr { break-inside: avoid; }
}

/* ---- Trang hướng dẫn chọn ---- */
.page--guide .page__body { display: grid; grid-template-rows: auto auto 1fr; gap: 2.2cqh; padding-bottom: 1.8cqh; }
.page--guide .page__title { font-size: calc(var(--t-2xl) * 1.55); }
.notecards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.8cqh; }
.notecard {
  padding: 1.9cqh 2cqh; border-radius: 1cqh; background: #fff;
  border-top: .5cqh solid var(--signal);
  box-shadow: 0 2.2cqh 3.6cqh -2.2cqh rgba(4, 22, 41, .55);
}
.notecard b { display: block; font-family: var(--font-display); font-size: calc(var(--t-sm) * 1.4); font-weight: 700; letter-spacing: .02em; color: var(--ink); }
.notecard span { display: block; margin-top: .6cqh; font-size: min(max(7px, .95cqh), 1.2cqh); line-height: 1.45; color: var(--ink-2); }
.notecard i {
  display: block; margin-bottom: .9cqh; font-family: var(--font-display); font-style: normal; font-weight: 700;
  font-size: calc(var(--t-xl) * 1.3); line-height: 1; color: var(--signal);
}
.matrix {
  align-self: end; width: 100%; border-collapse: collapse; font-size: min(max(8px, 1.2cqh), 1.4cqh); line-height: 1.35;
  background: rgba(255, 255, 255, .8); box-shadow: 0 2.4cqh 4cqh -2.6cqh rgba(7, 47, 92, .45);
}
.matrix th, .matrix td { padding: .52cqh 1.4cqh; text-align: left; border-bottom: 1px solid rgba(14, 27, 42, .1); }
.matrix thead th { background: var(--brand-deep); color: #fff; font-size: var(--t-xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; border: 0; }
.matrix td:last-child { font-family: var(--font-display); font-size: 1.28em; color: var(--brand); font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: .02em; }


/* ==========================================================================
   10b. XEM ẢNH LỚN (lightbox)
   Khung phủ kín màn hình mở khi bấm vào ảnh sản phẩm hoặc tem mã trên trang hero.
   Logic ở catalog.js mục 6b; markup ở cuối index.html (#lightbox).
   ========================================================================== */
body.lb-open { overflow: hidden; }

.lb { position: fixed; inset: 0; z-index: 1000; color: var(--brand-deep, #0b2a52); font-family: var(--font); -webkit-font-smoothing: antialiased; }
.lb[hidden] { display: none; }

.lb__backdrop {
  position: absolute; inset: 0;
  background: #fff;                                          /* nền trắng hoà vào nền ảnh sản phẩm */
  animation: lb-fade .28s var(--ease-out) both;
}

/* Sân khấu phủ kín màn hình để ảnh phóng to được tràn ra hết cỡ; phần đệm chừa chỗ cho nút và chú thích */
.lb__stage {
  position: absolute; inset: 0; display: grid; place-items: center;
  grid-template: minmax(0, 1fr) / minmax(0, 1fr);            /* ô lưới có kích thước xác định để max-height:100% của ảnh có hiệu lực */
  padding: 3.4rem 5.6rem; overflow: hidden; touch-action: none; cursor: zoom-out;
}
.lb__img {
  display: block; width: auto; height: auto; max-width: 100%; max-height: 100%;
  background: #fff; border-radius: 0; box-shadow: none;
  user-select: none; -webkit-user-drag: none; touch-action: none; cursor: zoom-in;
  transform-origin: 50% 50%; transition: transform .24s var(--ease-out);
}
.lb__img.is-in { animation: lb-in .34s var(--ease-out) backwards; }
.lb.is-zoomed .lb__img { cursor: grab; }
.lb.is-dragging .lb__img { cursor: grabbing; transition: none; }

.lb__btn {
  position: absolute; z-index: 2; display: grid; place-items: center; width: 46px; height: 46px; padding: 0;
  border: 1px solid rgba(11, 42, 82, .22); border-radius: 50%;
  background: rgba(255, 255, 255, .92); color: var(--brand-deep, #0b2a52); cursor: pointer;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: background-color .2s, border-color .2s, transform .2s var(--ease-out);
}
.lb__btn svg { width: 20px; height: 20px; }
.lb__btn:focus-visible { outline: 3px solid var(--brand, #1d5fb8); outline-offset: 2px; }
@media (hover: hover) { .lb__btn:hover { background: var(--signal); border-color: var(--signal); color: #fff; transform: scale(1.07); } }
.lb__close { top: 18px; right: 18px; }
.lb__prev, .lb__next { top: 50%; margin-top: -23px; }
.lb__prev { left: 18px; }
.lb__next { right: 18px; }
.lb__zoom { position: absolute; z-index: 2; right: 18px; bottom: 18px; display: flex; gap: 10px; }
.lb__zoom .lb__btn { position: static; }
.lb.is-single .lb__prev, .lb.is-single .lb__next { display: none; }

.lb__cap {
  position: absolute; z-index: 2; left: 22px; bottom: 18px; display: grid; gap: 3px; max-width: min(46ch, calc(100% - 190px));
  padding: 10px 16px 11px; border-radius: 12px; pointer-events: none;
  background: rgba(255, 255, 255, .9); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.lb__code { font-family: var(--font-display); font-size: 2.1rem; font-weight: 700; line-height: 1; letter-spacing: .03em; }
.lb__name { font-size: .9375rem; font-weight: 700; color: var(--brand-deep, #0b2a52); }
.lb__spec { font-size: .8125rem; color: rgba(11, 42, 82, .68); }
.lb__code:empty, .lb__name:empty, .lb__spec:empty, .lb__count:empty { display: none; }

.lb__count {
  position: absolute; z-index: 2; top: 20px; left: 22px; margin: 0; padding: 6px 15px 5px; border-radius: 999px;
  background: rgba(11, 42, 82, .08); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  font-family: var(--font-display); font-size: 1.3rem; font-weight: 700; letter-spacing: .08em; color: var(--brand-deep, #0b2a52);
}
.lb__hint {
  position: absolute; z-index: 2; left: 50%; bottom: 22px; transform: translateX(-50%); margin: 0; padding: 7px 14px;
  border-radius: 999px; background: rgba(11, 42, 82, .08); font-size: .75rem; color: rgba(11, 42, 82, .8);
  white-space: nowrap; pointer-events: none; transition: opacity .6s;
}
.lb__hint.is-off { opacity: 0; }

@keyframes lb-fade { from { opacity: 0; } }
@keyframes lb-in   { from { opacity: 0; transform: scale(.955); } }

@media (max-width: 720px) {
  .lb__stage { padding: 4.2rem 12px 8.4rem; }
  .lb__cap { left: 12px; right: 12px; bottom: 76px; max-width: none; }
  .lb__code { font-size: 1.7rem; }
  .lb__count { top: 14px; left: 12px; }
  .lb__close { top: 12px; right: 12px; }
  .lb__prev, .lb__next { top: auto; bottom: 16px; margin-top: 0; }
  .lb__prev { left: 16px; }
  .lb__next { left: 72px; right: auto; }
  .lb__zoom { right: 16px; bottom: 16px; }
  .lb__hint { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .lb__backdrop, .lb__img.is-in { animation: none !important; }
  .lb__img, .lb__btn { transition: none !important; }
}


/* ==========================================================================
   11. ANIMATION XUẤT HIỆN
   Thêm class .anim cho phần tử cần chạy hiệu ứng khi trang được lật tới.
     --anim tên keyframes · --order thứ tự · --dur thời lượng
   Delay = --enter-delay + --order × --step
   ========================================================================== */
@keyframes a-reveal { from { clip-path: inset(100% 0 0 0); transform: scale(1.03); } to { clip-path: inset(0 0 0 0); } }
@keyframes a-head   { from { opacity: 0; transform: translateY(-1cqh); } }
@keyframes a-left   { from { opacity: 0; transform: translateX(-3.2cqh); } }
@keyframes a-rise   { from { opacity: 0; transform: translateY(1.8cqh); } }
@keyframes a-pop    { from { opacity: 0; transform: scale(.94); } }
@keyframes a-hero   { from { opacity: 0; transform: translate(3.2cqh, 2.4cqh) scale(.97); } }
@keyframes a-fade   { from { opacity: 0; } }
@keyframes a-swap   { from { opacity: 0; } }             /* ảnh có transform riêng (zoom, vị trí) nên chỉ đổi độ mờ */
@keyframes a-twinkle { 0%, 100% { opacity: 0; transform: scale(.4); } 50% { opacity: 1; transform: scale(1); } }

.anim { --order: 0; --dur: 600ms; }
.page__head.anim  { --anim: a-head;   --order: 0;   --dur: 620ms; }
.title.anim,
.page__title.anim,
.cover__title.anim { --anim: a-left;  --order: 2.2; --dur: 700ms; }
.slogan.anim,
.subtitle.anim,
.cover__sub.anim  { --anim: a-left;   --order: 3;   }
.vchips.anim      { --anim: a-rise;   --order: 3.8; }
.kw.anim          { --anim: a-rise;   --order: 4.4; }
.specs.anim,
.stats.anim,
.contact.anim,
.otable.anim,
.matrix.anim,
.toc.anim,
.cover__meta.anim,
.notecards.anim   { --anim: a-rise;   --order: 5;   }
.callout.anim     { --anim: a-fade;   --order: 5;   }
.pblock.anim      { --anim: a-rise;   --order: 1.6; }
.cover__disc.anim { --anim: a-pop; --order: .6; --dur: 900ms; }
.back__hero.anim  { --anim: a-hero; --order: 1; --dur: 1100ms; }

.grid > .anim:nth-child(2) { --order: 2.5; }
.grid > .anim:nth-child(3) { --order: 3.3; }
.kw.anim:nth-of-type(2) { --order: 5;   }
.kw.anim:nth-of-type(3) { --order: 5.6; }
.callout.anim:nth-of-type(2) { --order: 5.5; }
.callout.anim:nth-of-type(3) { --order: 6;   }
.callout.anim:nth-of-type(4) { --order: 6.5; }

.page.is-current .anim {
  animation: var(--anim) var(--dur) var(--ease-out) both;
  animation-delay: calc(var(--enter-delay) + var(--order) * var(--step));
}


/* ==========================================================================
   12. HOVER – chỉ cho thiết bị có chuột
   ========================================================================== */
@media (hover: hover) {
  .seg button:hover { color: var(--ink); }
  .tool-btn:hover { background: var(--brand); color: #fff; }
  .nav__dot:hover::before { background: var(--ink-2); transform: scale(1.3); }
  .nav__btn:hover:not(:disabled) { background: var(--brand); border-color: var(--brand); color: #fff; }

  .vchip:hover { border-color: var(--signal); transform: translateY(-.35cqh); }
  .vchip.is-pinned:hover { border-color: var(--ink); }

  .pblock--card:hover > .media img { transform: scale(calc(var(--zoom, 1) * 1.05)); }
  .pblock--card:hover .title { color: var(--tone-deep); }
  .callout:hover::after { transform: scale(1.35); }
  .toc__row:hover { background: rgba(255, 106, 26, .09); }
  .otable tbody tr:hover, .matrix tbody tr:hover { background: rgba(255, 106, 26, .08); }
  .page__head:hover::after { width: 12cqh; }
  .kw__list li:hover::before { transform: scale(1.35); }
}
.title, .callout b { transition: color .25s; }
.page__head::after { transition: width .35s var(--ease-out); }
.kw__list li::before { transition: transform .2s var(--ease-out); }


/* ==========================================================================
   13. RESPONSIVE – điện thoại luôn 1 trang dọc
   ========================================================================== */
@media (max-width: 720px) {
  :root { --fl-xs: 6.4px; --fl-sm: 7.2px; --fl-md: 8.2px; --fl-lg: 9.4px; --fl-xl: 12px; }
  .bar { padding: 8px 12px; }
  /* màn hình hẹp luôn xem 1 trang nên bỏ nút chọn chế độ để thanh trên không tràn */
  #view-seg { display: none; }
  .bar__brand small { display: none; }
  .bar__brand img { height: 22px; }
  .seg button { padding: 5px 9px; font-size: .75rem; }
  .tool-btn { height: 32px; padding: 0 10px; }
  .tool-btn span { display: none; }
  .stage { padding: 6px; }
  .nav { gap: 10px; padding: 6px 10px 12px; }
  .nav__btn { height: 40px; padding: 0 12px; }
  .nav__btn span { display: none; }
  .nav__dots { display: none; }
  .page { box-shadow: 0 10px 24px -16px rgba(16, 35, 63, .5); }
}
/* Trang bị thu nhỏ (điện thoại, cửa sổ nhỏ): cho hàng mã và thông số xuống dòng, bỏ slogan chân trang */
@container (max-height: 640px) {
  .vchips--dots, .vchips--grid { flex-wrap: wrap; }
  .vchips--dots li, .vchips--grid li { flex: 1 1 22%; }
  .specs--row { flex-wrap: wrap; row-gap: 1.2cqh; }
  .specs--row > div { padding: 0 2cqh 0 0; border-left: 0; }
  .specs--row > div + div { padding-left: 0; }
  .page__foot em { display: none; }
}

@media (max-width: 380px) { .nav__counter { min-width: 5.4em; font-size: .875rem; } }
@media (max-width: 420px) { .bar__brand img { height: 20px; } .seg button { padding: 5px 8px; } }

@media (prefers-reduced-motion: reduce) {
  :root { --turn: 1ms; --enter-delay: 0ms; --step: 0ms; }
  .page .anim, .media img, .hero__bg img { animation-duration: 1ms !important; animation-delay: 0ms !important; transition: none !important; }
  .cover__star { animation: none !important; opacity: .85; transform: none !important; }
}


/* ==========================================================================
   14. PRINT – mỗi trang một mặt A4
   Bản in giữ nguyên bố cục gốc: bỏ lớp sách và hiệu ứng, mọi .page trở lại
   thành khối giấy 210×297mm nối tiếp nhau. Mọi mã variant vẫn hiện đủ;
   ảnh và thông số in ra là của mã đang được ghim.
   Trang tràn viền: khi in PDF/in giấy, tờ A4 được phủ kín đến mép. Nếu đưa
   nhà in cắt xén, xuất PDF có bleed 3mm từ file thiết kế gốc, vì nội dung
   quan trọng đã nằm cách mép ≥ 18mm nên không bị cắt vào.
   ========================================================================== */
@media print {
  @page { size: A4 portrait; margin: 0; }

  html, body { height: auto; background: #fff; }
  .bar, .nav, .u-noprint { display: none !important; }

  .app { display: block; height: auto; overflow: visible; }
  .stage { display: block; padding: 0; container-type: normal; }
  .book { display: block; width: auto; height: auto; perspective: none; transform: none !important; }
  .book::after { display: none; }
  .sheet, .sheet__face { display: contents; }

  .page {
    position: relative !important; inset: auto !important;
    width: 210mm; height: 297mm;
    transform: none !important; visibility: visible !important; opacity: 1 !important;
    border-radius: 0; box-shadow: none;
    break-after: page; break-inside: avoid;
  }
  .sheet:last-child .sheet__face:last-child .page { break-after: auto; }
  .page .anim, .media img, .hero__bg img { animation: none !important; transition: none !important; clip-path: none !important; }
  .cover__star { animation: none !important; opacity: .85 !important; transform: none !important; }   /* ngôi sao: đứng yên, sáng rõ khi in thay vì chớp tắt */
  .vchip { break-inside: avoid; }
}