/* ==========================================================================
   BASE — reset, typography, layout primitives
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 16px);
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  font-weight: var(--w-regular);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, video, picture { display: block; max-width: 100%; }
img, video { height: auto; }

a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }

h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }

strong, b { font-weight: var(--w-semibold); }

::selection { background: var(--red); color: #fff; }

/* ---------------------------------------------------------------- Tiêu đề */
h1, h2, h3, h4, .h1, .h2, .h3, .h4 {
  color: var(--ink);
  font-weight: var(--w-black);
  letter-spacing: -.035em;
  line-height: var(--lh-tight);
  text-wrap: balance;
}

h1, .h1 { font-size: var(--t-h1); }
/* h2 giãn dòng hơn mặc định --lh-tight (1.05, dùng chung cho cả h1/h3/h4) —
   tiêu đề 2 dòng như "Vì sao doanh nghiệp quay lại..." trông sát dòng khó đọc.
   Dùng lại --lh-snug (1.25, vốn đã áp cho h3/h4) thay vì bịa số riêng, chỉ h2
   đổi — h1 (hero) và h3/h4 (tiêu đề thẻ) giữ nguyên 1.05 như trước. */
h2, .h2 { font-size: var(--t-h2); line-height: var(--lh-snug); }
h3, .h3 { font-size: var(--t-h3); letter-spacing: -.02em; line-height: var(--lh-snug); }
h4, .h4 { font-size: var(--t-h4); letter-spacing: -.015em; line-height: var(--lh-snug); }

.lead {
  font-size: var(--t-lead);
  color: var(--g600);
  line-height: 1.55;
  max-width: 58ch;
  text-wrap: pretty;
}

.muted { color: var(--muted); }
.small { font-size: var(--t-sm); }
.xs { font-size: var(--t-xs); }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- Bố cục */
.wrap {
  width: min(100% - (var(--page-pad) * 2), var(--maxw));
  margin-inline: auto;
}

.wrap-narrow {
  width: min(100% - (var(--page-pad) * 2), 900px);
  margin-inline: auto;
}

.section { padding-block: var(--section-y); }

/* Biến thể nền CHỈ đổi màu, KHÔNG đổi khoảng cách — mọi mục trên trang thở
   đúng một nhịp var(--section-y).

   Trước 29/08 nền tối và khối báo giá dùng khe rộng hơn (--section-y-lg) với ý
   "chuyển sang chương mới thì thở rộng hơn". Đo thật thì ý đó phản tác dụng:
   trên một trang có chỗ khe 87px, chỗ 131px — chênh 44px, mắt thấy ngay là chỗ
   thừa chỗ sát. Nay bỏ hết ghi đè, khe ở mọi chỗ bằng nhau. */
.section--tint { background: var(--paper-sub); }
.section--dark {
  background: var(--ink);
  color: rgba(255, 255, 255, .72);
}
.section--dark h2,
.section--dark h3 { color: #fff; }
.section--dark .lead { color: rgba(255, 255, 255, .66); }

.stack > * + * { margin-top: var(--s4); }

/* ---------------------------------------------------------------- Tiện ích */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 999;
}
.skip:focus {
  left: 12px; top: 12px;
  background: #fff; color: var(--ink);
  padding: 12px 18px;
  border: 2px solid var(--red);
  border-radius: var(--r-sm);
  font-weight: var(--w-semibold);
}

:where(a, button, summary, input, select, textarea):focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

.ico {
  width: 1.25em; height: 1.25em;
  flex: none;
  fill: currentColor;
}

/* ---------------------------------------------------------------- Motif in ấn */

/* Dải CMYK — thanh 4 màu như thang kiểm màu trên tờ in */
.cmyk-bar {
  display: flex;
  height: 4px;
  width: 72px;
  border-radius: 2px;
  overflow: hidden;
}
.cmyk-bar span { flex: 1; }
.cmyk-bar span:nth-child(1) { background: var(--c); }
.cmyk-bar span:nth-child(2) { background: var(--m); }
.cmyk-bar span:nth-child(3) { background: var(--y); }
.cmyk-bar span:nth-child(4) { background: var(--k); }

/* Nhãn đầu section: số thứ tự + tên */
.eyebrow {
  /* flex + fit-content thay vì inline-flex: inline-flex nằm trong một dòng
     chữ nên dưới nó luôn dư ~2px khoảng dòng, làm nhãn→tiêu đề đo ra 14px ở
     đầu mục lồng trong div nhưng 12px ở .section-head (grid đã khối hoá nó).
     Khối hoá hẳn thì chỗ nào cũng đúng 12px. Bề ngang vẫn ôm sát chữ. */
  display: flex;
  width: fit-content;
  align-items: center;
  gap: var(--s3);
  font-size: var(--t-label);
  font-weight: var(--w-bold);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--red);
}
.eyebrow .num {
  font-family: var(--mono);
  color: var(--g400);
  letter-spacing: .05em;
}
.section--dark .eyebrow { color: #FF8A93; }
.section--dark .eyebrow .num { color: rgba(255, 255, 255, .4); }

/* ---- Nhịp đầu mục, thống nhất TOÀN SITE ----
   Trước đây mỗi mục tự đặt khoảng cách một kiểu (grid gap ở mục này, margin
   trên h2 ở mục kia, mục khác không đặt gì) nên đo ra nhãn→tiêu đề chỗ 2px
   chỗ 16px chỗ 18px, tiêu đề→câu dẫn chỗ 12 chỗ 20. Gom về hai rule anh em
   bên dưới: ĐẶT MỘT LẦN, mọi đầu mục (kể cả đầu mục lồng trong div như
   .hs-head hay .section-head--split) tự ăn theo.
     nhãn 02  →  tiêu đề : 12px
     tiêu đề  →  câu dẫn : 12px
     đầu mục  →  nội dung: 24px  (margin-bottom của khối đầu mục)             */
.eyebrow + h1,
.eyebrow + h2 { margin-top: var(--s3); }
h1 + .lead,
h2 + .lead   { margin-top: var(--s3); }

/* Đầu section: eyebrow + h2 + mô tả.
   row-gap để 0 — khoảng cách giữa các dòng do hai rule trên lo, nếu còn gap
   thì cộng dồn thành 24-28px, lệch với đầu mục lồng trong div. */
.section-head {
  display: grid;
  row-gap: 0;
  margin-bottom: var(--s6);
  max-width: var(--maxw-text);
}
.section-head--split {
  max-width: none;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  align-items: end;
  column-gap: var(--s8);
}
@media (max-width: 860px) {
  /* Về một cột: câu dẫn nằm dưới cụm nhãn+tiêu đề, cách đúng 12px như mọi
     chỗ khác (câu dẫn ở đây không phải em ruột của h2 nên rule trên không với
     tới, phải đặt bằng row-gap). */
  .section-head--split { grid-template-columns: 1fr; align-items: start; row-gap: var(--s3); }
}

/* ---- Trích dẫn cạnh tiêu đề lớn ----
   Câu dẫn đứng bên phải tiêu đề của mọi mục lớn: chữ nghiêng, mở đầu bằng dấu
   ngoặc kép cỡ lớn màu đỏ. Trước 29/08 nó chỉ là một đoạn chữ xám trôi nổi cạnh
   tiêu đề, không có dấu hiệu gì cho biết đây là câu tóm ý — nay đọc ra ngay là
   một lời dẫn, và bảy trang xếp giống hệt nhau.

   Dấu ngoặc vẽ bằng ::before chứ không gõ thẳng vào nội dung: người sửa nội
   dung không phải nhớ thêm dấu, và trình đọc màn hình không đọc lên "dấu ngoặc
   kép" thừa. */
.lead--trich {
  position: relative;
  padding-left: var(--s7);
  font-style: italic;
  text-wrap: pretty;
}
.lead--trich::before {
  content: "\201C";   /* dấu ngoặc kép mở, kiểu chữ in */
  position: absolute;
  left: 0;
  top: -.28em;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 2.6em;
  line-height: 1;
  color: var(--red);
  /* Thuần trang trí: không cho chuột bôi trúng, không đẩy dòng chữ lệch đi. */
  pointer-events: none;
}
/* Một cột thì dấu ngoặc thu nhỏ lại cho khỏi lấn chữ. */
@media (max-width: 860px) {
  .lead--trich { padding-left: var(--s6); }
  .lead--trich::before { font-size: 2.1em; top: -.22em; }
}

/* Dấu xén (crop marks) ở 4 góc — motif nhà in */
.cropped { position: relative; }
.cropped::before,
.cropped::after {
  content: "";
  position: absolute;
  width: 14px; height: 14px;
  pointer-events: none;
}
.cropped::before {
  top: -1px; left: -1px;
  border-top: 2px solid var(--red);
  border-left: 2px solid var(--red);
}
.cropped::after {
  bottom: -1px; right: -1px;
  border-bottom: 2px solid var(--red);
  border-right: 2px solid var(--red);
}

/* Nền giấy có vân rất nhẹ */
.paper-grain {
  background-color: var(--paper-sub);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E");
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* Tên thương hiệu ở câu mở đầu Hero — làm nổi bằng độ đậm + màu chữ chính,
   KHÔNG tô đỏ. Chữ "NetPrint" xuất hiện 20-31 lần mỗi trang; tô đỏ hết sẽ
   rải điểm đỏ khắp nơi và làm loãng vai trò của màu đỏ vốn dành riêng cho
   nút bấm và điểm nhấn cần hành động. */
.brand {
  font-weight: var(--w-bold);
  color: var(--ink);
}