/* ==========================================================================
   DIGI PIPE — BASE
   Reset + chữ + bố cục + các thành phần dùng lại (nút, nhãn mono, tiêu đề
   section, lưới kỹ thuật, hiệu ứng hiện dần).
   File này gần như không phải sửa lại sau khi dựng xong.

   MỤC LỤC
   01. Reset
   02. Chữ
   03. Bố cục & container
   04. Lưới kỹ thuật (hoạ tiết nền)
   05. Nhãn mono — "tem kiểm định"
   06. Tiêu đề section
   07. Nút
   08. Thẻ & hairline
   09. Danh sách tick / cross
   10. Placeholder ảnh
   11. Hiệu ứng hiện dần khi cuộn
   12. Tiện ích
   ========================================================================== */

/* 01. RESET ---------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  /* KHÔNG đặt overflow-x: hidden ở đây.
     Nó không sửa lỗi tràn — nó CHE lỗi đi: nội dung vẫn bị cắt cụt trên màn hẹp
     mà công cụ đo lại báo "không tràn". Để nguyên cho lỗi lộ ra rồi sửa tận gốc. */
}

/* Mọi ô trong lưới/flex phải co được. Mặc định min-width của grid item là auto
   → một phần tử dài (nút, chuỗi không ngắt) sẽ đẩy phình cả cột và gây tràn. */
.hero__inner > *,
.wt > *,
.lead__grid > *,
.tree__wrap > *,
.diff__grid > *,
.fit__grid > *,
.ppanel > *,
.jpanel > * {
  min-width: 0;
}

h1,
h2,
h3,
h4,
h5,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

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

img,
video {
  height: auto;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
}

a {
  color: var(--accent);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

table {
  border-collapse: collapse;
  width: 100%;
}

:focus-visible {
  outline: 2px solid var(--blue-600);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection {
  background: var(--blue-100);
  color: var(--ink-900);
}

/* Nhảy tới nội dung — cho người dùng bàn phím */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: var(--z-modal);
  background: var(--ink-900);
  color: #fff;
  padding: var(--sp-3) var(--sp-5);
  border-radius: 0 0 var(--r-sm) 0;
}
.skip-link:focus {
  left: 0;
}

/* 02. CHỮ ------------------------------------------------------------------ */
h1,
.h1 {
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  font-weight: 700;
}

h2,
.h2 {
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-heading);
  font-weight: 600;
}

h3,
.h3 {
  font-size: var(--fs-h3);
  line-height: 1.32;
  letter-spacing: var(--ls-heading);
  font-weight: 600;
}

h4,
.h4 {
  font-size: var(--fs-h4);
  line-height: 1.4;
  font-weight: 600;
}

.display {
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  font-weight: 700;
}

.lead {
  font-size: var(--fs-lead);
  line-height: var(--lh-relaxed);
  color: var(--text-muted);
}

.text-muted {
  color: var(--text-muted);
}
.text-sm {
  font-size: var(--fs-sm);
}
.text-xs {
  font-size: var(--fs-xs);
}

/* Câu tuyên ngôn — dùng cho các câu chủ đạo rải dọc trang */
.statement {
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.42;
  letter-spacing: var(--ls-heading);
  color: var(--ink-900);
}

/* 03. BỐ CỤC --------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--narrow {
  max-width: calc(var(--container-narrow) + var(--gutter) * 2);
}

.container--wide {
  max-width: calc(var(--container-wide) + var(--gutter) * 2);
}

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

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

.section--dark {
  background: var(--bg-dark);
  color: var(--text-on-dark);
}

.section--dark h1,
.section--dark h2,
.section--dark h3,
.section--dark h4,
.section--dark .statement {
  color: #fff;
}

.section--dark .text-muted,
.section--dark .lead {
  color: var(--text-on-dark-muted);
}

.section--soft {
  background: var(--bg-soft);
}

/* Đường kẻ mảnh phân cách section — như đường gấp của tờ biên bản */
.section--ruled {
  border-top: 1px solid var(--border);
}

/* 04. LƯỚI KỸ THUẬT -------------------------------------------------------- */
.grid-bg {
  position: relative;
  isolation: isolate;
}

.grid-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: var(--grid-size) var(--grid-size);
  /* Mờ dần ở mép để lưới không "cắt cụt" thô */
  -webkit-mask-image: radial-gradient(
    ellipse 90% 70% at 50% 40%,
    #000 30%,
    transparent 100%
  );
  mask-image: radial-gradient(
    ellipse 90% 70% at 50% 40%,
    #000 30%,
    transparent 100%
  );
  pointer-events: none;
}

.section--dark .grid-bg::before,
.grid-bg--dark::before {
  background-image: linear-gradient(var(--grid-line-dark) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line-dark) 1px, transparent 1px);
}

/* 05. NHÃN MONO — "tem kiểm định" ------------------------------------------ */
.tag {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-mono);
  font-size: var(--fs-mono-label);
  font-weight: 500;
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--slate-500);
}

.tag::before {
  content: "";
  width: 18px;
  height: 1px;
  background: var(--slate-300);
  flex: none;
}

.tag--plain::before {
  display: none;
}

.tag--accent {
  color: var(--blue-600);
}
.tag--accent::before {
  background: var(--blue-500);
}

.section--dark .tag {
  color: var(--blue-300);
}
.section--dark .tag::before {
  background: var(--brand-blue);
}

/* Tem viền — dùng cho mã bước, số thứ tự */
.stamp {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-mono);
  font-size: var(--fs-mono-label);
  font-weight: 600;
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--slate-600);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  padding: 5px 12px;
  background: var(--paper);
}

.stamp--accent {
  color: var(--blue-700);
  border-color: var(--blue-100);
  background: var(--blue-50);
}

.stamp--confirm {
  color: var(--green-700);
  border-color: var(--green-100);
  background: var(--green-100);
}

.section--dark .stamp {
  color: var(--blue-300);
  border-color: rgba(113, 194, 242, 0.34);
  background: rgba(36, 156, 216, 0.10);
}

/* 06. TIÊU ĐỀ SECTION ------------------------------------------------------ */
.section-head {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  max-width: 780px;
  margin-bottom: var(--sp-12);
}

.section-head--center {
  align-items: center;
  text-align: center;
  margin-inline: auto;
}

.section-head__title {
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-heading);
  font-weight: 700;
  text-wrap: balance;
}

.section-head__sub {
  font-size: var(--fs-lead);
  line-height: var(--lh-relaxed);
  color: var(--text-muted);
  text-wrap: pretty;
}

/* 07. NÚT ------------------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  font-weight: 600;
  font-size: var(--fs-sm);
  line-height: 1;
  padding: 15px 24px;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  transition: background var(--t-fast) var(--ease-out),
    border-color var(--t-fast) var(--ease-out),
    color var(--t-fast) var(--ease-out),
    transform var(--t-fast) var(--ease-out),
    box-shadow var(--t-fast) var(--ease-out);
  text-align: center;
  /* KHÔNG dùng white-space: nowrap.
     Nút tiếng Việt hay dài ("Đăng ký Digi Pipe + nhận xét nghiệm nước"), nowrap
     làm nút tràn khỏi màn hẹp và bị cắt cụt chữ. Cho phép xuống dòng,
     max-width chặn không cho đẩy rộng cột cha. */
  max-width: 100%;
  text-wrap: balance;
  line-height: 1.35;
}

.btn:hover {
  text-decoration: none;
}

.btn:active {
  transform: translateY(1px);
}

.btn svg {
  flex: none;
}

.btn--primary {
  background: var(--blue-600);
  color: #fff;
  box-shadow: var(--shadow-sm);
}
.btn--primary:hover {
  background: var(--blue-700);
  box-shadow: var(--shadow-md);
}

.btn--secondary {
  background: var(--paper);
  color: var(--ink-800);
  border-color: var(--line-strong);
}
.btn--secondary:hover {
  border-color: var(--slate-400);
  background: var(--paper-2);
}

.btn--ghost {
  background: transparent;
  color: var(--blue-600);
  border-color: transparent;
  padding-inline: 4px;
}
.btn--ghost:hover {
  color: var(--blue-700);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.btn--onDark {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.22);
  color: #fff;
}
.btn--onDark:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.38);
}

.btn--lg {
  font-size: var(--fs-body);
  padding: 18px 30px;
}

.btn--block {
  width: 100%;
}

/* Microcopy dưới CTA — luôn đi kèm để hạ áp lực cam kết */
.cta-note {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  line-height: 1.55;
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  align-items: center;
}

/* 08. THẺ & HAIRLINE ------------------------------------------------------- */
.card {
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-6);
}

.card--pad-lg {
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
}

.card--dark {
  background: var(--ink-850);
  border-color: rgba(255, 255, 255, 0.09);
  color: var(--text-on-dark);
}

.hairline {
  height: 1px;
  background: var(--border);
  border: 0;
  margin: 0;
}

/* 09. DANH SÁCH TICK / CROSS ----------------------------------------------- */
.ticklist {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.ticklist li {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: var(--sp-3);
  align-items: start;
  line-height: 1.55;
}

/* Tick MẶC ĐỊNH là dấu phẳng, không có viên tròn nền.
   Lý do: trang có 24 danh sách tick; nếu mỗi dòng là một viên tròn xanh thì
   cả trang lốm đốm màu và không còn chỗ nào nổi bật. Viên tròn đậm chỉ dành
   cho .ticklist--strong (bảng giá) — nơi dấu xác nhận thật sự phải nổi. */
.ticklist li::before {
  content: "";
  width: 20px;
  height: 20px;
  margin-top: 2px;
  border-radius: 50%;
  background: transparent
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23206b33' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 10.5l3.2 3.2L15 7'/%3E%3C/svg%3E")
    center / 15px no-repeat;
  flex: none;
}

.ticklist--strong li::before {
  background-color: var(--green-100);
}

.ticklist--cross li::before {
  background: transparent
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%235a6e80' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6.5 6.5l7 7M13.5 6.5l-7 7'/%3E%3C/svg%3E")
    center / 15px no-repeat;
}

.ticklist--neutral li::before {
  background: transparent
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%235a6e80' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 10h8'/%3E%3C/svg%3E")
    center / 15px no-repeat;
}

.section--dark .ticklist li::before {
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%237dd18b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 10.5l3.2 3.2L15 7'/%3E%3C/svg%3E");
}

/* 10. PLACEHOLDER ẢNH ------------------------------------------------------
   Mỗi khung ghi rõ: chụp cái gì, góc nào, tên file cần đặt.
   Khi có ảnh thật → thay bằng <img>, xoá khung này.
   -------------------------------------------------------------------------- */
.ph {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--sp-2);
  padding: var(--sp-5);
  border-radius: var(--r-md);
  border: 1px dashed var(--line-strong);
  background: repeating-linear-gradient(
      135deg,
      rgba(35, 71, 100, 0.028) 0 10px,
      transparent 10px 20px
    ),
    var(--paper-2);
  color: var(--slate-500);
  min-height: 220px;
  overflow: hidden;
}

.ph--dark {
  border-color: rgba(255, 255, 255, 0.18);
  background: repeating-linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.03) 0 10px,
      transparent 10px 20px
    ),
    rgba(255, 255, 255, 0.02);
  color: var(--text-on-dark-muted);
}

.ph__kind {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-label);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--slate-500);
}

.ph--dark .ph__kind {
  color: var(--slate-500);
}

.ph__brief {
  font-size: var(--fs-sm);
  line-height: 1.5;
  font-weight: 500;
  color: var(--slate-600);
}

.ph--dark .ph__brief {
  color: var(--text-on-dark-muted);
}

.ph__file {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--slate-500);
  word-break: break-all;
}

.ph--ratio-16x9 {
  aspect-ratio: 16 / 9;
  min-height: 0;
}
.ph--ratio-4x3 {
  aspect-ratio: 4 / 3;
  min-height: 0;
}
.ph--ratio-1x1 {
  aspect-ratio: 1 / 1;
  min-height: 0;
}
.ph--ratio-3x4 {
  aspect-ratio: 3 / 4;
  min-height: 0;
}

/* 11. HIỆN DẦN KHI CUỘN ----------------------------------------------------
   QUAN TRỌNG: chỉ ẩn khi JavaScript CHẠY ĐƯỢC (class .js do script inline
   trong <head> gắn vào <html>). JS hỏng hoặc bị chặn → nội dung vẫn hiện
   đầy đủ, không bao giờ có chuyện trang trắng.
   -------------------------------------------------------------------------- */
.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 620ms var(--ease-out), transform 620ms var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}

.js .reveal.is-in {
  opacity: 1;
  transform: none;
}

/* Người dùng tắt hiệu ứng → hiện thẳng, không animation */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .js .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* 12. TIỆN ÍCH ------------------------------------------------------------- */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

[hidden] {
  display: none !important;
}

.stack {
  display: flex;
  flex-direction: column;
}
.stack-2 {
  gap: var(--sp-2);
}
.stack-3 {
  gap: var(--sp-3);
}
.stack-4 {
  gap: var(--sp-4);
}
.stack-6 {
  gap: var(--sp-6);
}
.stack-8 {
  gap: var(--sp-8);
}

.mt-4 {
  margin-top: var(--sp-4);
}
.mt-6 {
  margin-top: var(--sp-6);
}
.mt-8 {
  margin-top: var(--sp-8);
}
.mt-10 {
  margin-top: var(--sp-10);
}
.mt-12 {
  margin-top: var(--sp-12);
}

.text-center {
  text-align: center;
}
.text-balance {
  text-wrap: balance;
}
.text-pretty {
  text-wrap: pretty;
}
.mono {
  font-family: var(--font-mono);
}
.nowrap {
  white-space: nowrap;
}

/* Giá trị bơm từ config.js — highlight nhẹ khi còn là placeholder */
[data-cfg].is-placeholder {
  background: var(--amber-100);
  color: var(--amber-600);
  border-radius: 4px;
  padding-inline: 5px;
  font-family: var(--font-mono);
  font-size: 0.92em;
  font-weight: 600;
}

.section--dark [data-cfg].is-placeholder {
  background: rgba(180, 83, 9, 0.24);
  color: #fbd9a5;
}