/* ==========================================================================
   MEP TOOL — Design System
   Phong cách: Technical Dashboard (Autodesk Docs / Linear / GitHub)

   TYPOGRAPHY
     IBM Plex Sans — giao diện, tiêu đề, văn bản
     IBM Plex Mono — lệnh Lisp, mã tiêu chuẩn, đuôi file, số trong bảng
     Cả hai nạp từ Google Fonts. Stack dự phòng phía sau là font Windows ĐÃ
     KIỂM đủ dấu tiếng Việt (Corbel, Consolas) — nếu mạng công ty chặn CDN thì
     trang vẫn đọc được, không vỡ chữ. KHÔNG đưa Georgia / Rockwell /
     Franklin Gothic vào stack: ba font đó thiếu ế ữ ợ ẳ ỵ đ.

   MÀU
     Sáng là mặc định. Tối bật bằng [data-theme="dark"].
   ========================================================================== */

:root {
  /* --- Bề mặt --- */
  --bg:         #F8FAFC;
  --surface:    #FFFFFF;
  --surface-2:  #F1F5F9;
  --surface-3:  #E8EEF5;
  --border:     #E2E8F0;
  --border-2:   #CBD5E1;

  /* --- Chữ: xám đậm, tránh đen tuyệt đối --- */
  --text:       #1E293B;
  --text-2:     #334155;
  --muted:      #64748B;

  /* --- Nhấn: xanh kỹ thuật --- */
  --accent:      #0284C7;   /* viền, nét vẽ, vòng focus — phần KHÔNG phải chữ */
  /* #0284C7 chỉ đạt 3,57:1 khi làm chữ và 4,10:1 khi làm nền cho chữ trắng —
     dưới chuẩn AA. Mọi chỗ là CHỮ hoặc NỀN ĐẶC sau chữ trắng phải dùng token
     này: 5,17:1 / 5,93:1 / 5,67:1. */
  --accent-ink:  #0369A1;
  --accent-h:    #075985;
  --accent-soft: #E0F2FE;
  --on-accent:   #FFFFFF;

  /* --- Trạng thái --- */
  --ok:      #059669;  --ok-soft:     #D1FAE5;
  --warn:    #B45309;  --warn-soft:   #FEF3C7;
  --danger:  #DC2626;  --danger-soft: #FEE2E2;
  --info:    #2563EB;  --info-soft:   #DBEAFE;

  /* --- Nhãn phân loại --- */
  /* Nhãn là chữ in hoa 11px nên phải đạt 4,5:1. Hai giá trị đầu tiên tôi chọn
     (#0891B2 = 3,29 và #0284C7 = 3,57) trượt chuẩn — đã đổi sang sắc đậm hơn. */
  --tag-cad:   #0E7490;  --tag-cad-bg:   #CFFAFE;   /* 4,79:1 */
  --tag-revit: #C2410C;  --tag-revit-bg: #FFEDD5;
  --tag-hvac:  #0369A1;  --tag-hvac-bg:  #E0F2FE;   /* 5,17:1 */
  --tag-elec:  #A16207;  --tag-elec-bg:  #FEF9C3;
  --tag-lisp:  #7C3AED;  --tag-lisp-bg:  #EDE9FE;
  --tag-data:  #047857;  --tag-data-bg:  #D1FAE5;

  /* --- Kính & chiều sâu --- */
  --glass:       rgba(255, 255, 255, .72);
  --glass-line:  rgba(255, 255, 255, .9);
  --glare:       rgba(255, 255, 255, .55);
  --shadow-1: 0 1px 2px rgba(15, 23, 42, .06), 0 1px 3px rgba(15, 23, 42, .1);
  --shadow-2: 0 4px 6px rgba(15, 23, 42, .05), 0 10px 24px rgba(15, 23, 42, .09);
  --shadow-3: 0 12px 20px rgba(15, 23, 42, .08), 0 24px 48px rgba(15, 23, 42, .14);

  /* --- Font --- */
  --f-sans: "IBM Plex Sans", Corbel, "Segoe UI", sans-serif;
  --f-mono: "IBM Plex Mono", Consolas, "Cascadia Mono", monospace;

  /* --- Hình học --- */
  --r-sm: 4px;
  --r:    8px;
  --r-lg: 12px;
  --wrap: 1200px;
  --tilt: 6deg;          /* giới hạn góc nghiêng — xem mục 3D bên dưới */
}

/* ==========================================================================
   SÁU BỘ MÀU — đúng tinh thần ThemeManager của phần mềm
   Bộ mặc định (:root) là Light Technical. Năm bộ còn lại lấy mã màu gốc từ
   02_NANG_CAP\10500\HtgNet\Theming\BuiltInThemes.cs, dịch sang hệ token của
   website. Khách xem trước ngay trên web đúng thứ sẽ thấy trong AutoCAD.

   --accent   : viền, nét vẽ, vòng focus — phần KHÔNG phải chữ, chuẩn đòi 3:1
   --accent-ink: chữ và nền đặc sau chữ  — chuẩn đòi 4,5:1
   Nền tối thì hai giá trị thường trùng nhau vì đã đủ tương phản.
   ========================================================================== */

/* --- Nhóm nền tối: dùng chung bảng nhãn và bóng đổ ----------------------- */
[data-theme="slate"], [data-theme="amber"], [data-theme="midnight"] {
  --tag-cad:   #67E8F9;  --tag-cad-bg:   #093A44;
  --tag-revit: #FDBA74;  --tag-revit-bg: #43220B;
  --tag-hvac:  #7DD3FC;  --tag-hvac-bg:  #0B2E45;
  --tag-elec:  #FDE047;  --tag-elec-bg:  #3A3208;
  --tag-lisp:  #C4B5FD;  --tag-lisp-bg:  #2A1F52;
  --tag-data:  #6EE7B7;  --tag-data-bg:  #06331F;

  --glass:      rgba(255, 255, 255, .05);
  --glass-line: rgba(255, 255, 255, .12);
  --glare:      rgba(255, 255, 255, .16);
  --shadow-1: 0 1px 2px rgba(0,0,0,.3), 0 1px 3px rgba(0,0,0,.35);
  --shadow-2: 0 4px 6px rgba(0,0,0,.3), 0 10px 24px rgba(0,0,0,.4);
  --shadow-3: 0 12px 20px rgba(0,0,0,.35), 0 24px 48px rgba(0,0,0,.5);

  --ok:      #34D399;  --ok-soft:     #06301F;
  --warn:    #FBBF24;  --warn-soft:   #362507;
  --danger:  #F87171;  --danger-soft: #3A1315;
  --info:    #60A5FA;  --info-soft:   #10254A;
}

/* 1 — Midnight Blue · xanh mực đêm, điểm nhấn cyan */
[data-theme="midnight"] {
  --bg:#0B1220; --surface:#111A2B; --surface-2:#16223A; --surface-3:#1B2B47;
  --border:#1F2E4A; --border-2:#2C4066;
  --text:#E8EEF8; --text-2:#CBD5E1; --muted:#94A3B8;
  --accent:#38BDF8; --accent-ink:#38BDF8; --accent-h:#7DD3FC;
  --accent-soft:#0C2A42; --on-accent:#04202F;
}

/* 2 — Slate Mono · xám đá phiến, điểm nhấn xanh lá (bộ mặc định của tool) */
[data-theme="slate"] {
  --bg:#0F1115; --surface:#171A20; --surface-2:#1F232B; --surface-3:#262B34;
  --border:#2A2F38; --border-2:#3A4150;
  --text:#EDEFF2; --text-2:#C4CAD4; --muted:#8B93A1;
  --accent:#34D399; --accent-ink:#34D399; --accent-h:#6EE7B7;
  --accent-soft:#0C2C22; --on-accent:#05271C;
}

/* 3 — Graphite Amber · than chì ấm, điểm nhấn hổ phách, hợp làm đêm */
[data-theme="amber"] {
  --bg:#121212; --surface:#1B1A18; --surface-2:#232120; --surface-3:#2E2A26;
  --border:#33302D; --border-2:#4A443E;
  --text:#F0EBE4; --text-2:#D5CCC0; --muted:#9A9187;
  --accent:#F0A93B; --accent-ink:#F0A93B; --accent-h:#FBC66E;
  --accent-soft:#33240C; --on-accent:#1A1206;
}

/* 4 — Light Paper · nền giấy in, hợp khi nền bản vẽ màu trắng */
[data-theme="paper"] {
  --bg:#EDEFF3; --surface:#FFFFFF; --surface-2:#F4F6F9; --surface-3:#E8EDF4;
  --border:#CBD2DC; --border-2:#AAB4C2;
  --text:#1B1F27; --text-2:#39414F; --muted:#5E6875;
  --accent:#0F766E; --accent-ink:#0F766E; --accent-h:#115E56;
  --accent-soft:#CDE9E3; --on-accent:#FFFFFF;
  --ok:#15803D; --ok-soft:#DCFCE7;
  --warn:#B45309; --warn-soft:#FEF3C7;
  --danger:#B91C1C; --danger-soft:#FEE2E2;
  --info:#1D4ED8; --info-soft:#DBEAFE;
  --glass: rgba(255,255,255,.72); --glass-line: rgba(255,255,255,.9);
  --glare: rgba(255,255,255,.6);
}

/* 5 — High Contrast · đen tuyền / vàng, cho màn ngoài công trường hoặc mắt kém.
       Bộ này CỐ Ý bỏ kính, bỏ mờ, bỏ bóng và bỏ nghiêng — hiệu ứng làm hỏng
       đúng công dụng của nó. */
[data-theme="contrast"] {
  --bg:#000000; --surface:#0D0D0D; --surface-2:#1A1A1A; --surface-3:#2B2B2B;
  --border:#7A7A7A; --border-2:#A0A0A0;
  --text:#FFFFFF; --text-2:#FFFFFF; --muted:#D4D4D4;
  --accent:#FFD400; --accent-ink:#FFD400; --accent-h:#FFE566;
  --accent-soft:#3A3208; --on-accent:#000000;
  --ok:#3CE86B; --ok-soft:#052D12;
  --warn:#FFD400; --warn-soft:#3A3208;
  --danger:#FF6B6B; --danger-soft:#3A0D0D;
  --info:#66D9FF; --info-soft:#08303D;
  --tag-cad:#66D9FF;   --tag-cad-bg:#08303D;
  --tag-revit:#FFB870; --tag-revit-bg:#3A2408;
  --tag-hvac:#66D9FF;  --tag-hvac-bg:#08303D;
  --tag-elec:#FFD400;  --tag-elec-bg:#3A3208;
  --tag-lisp:#D9B8FF;  --tag-lisp-bg:#2A1550;
  --tag-data:#3CE86B;  --tag-data-bg:#052D12;
  --glass:#0D0D0D; --glass-line:#7A7A7A; --glare:transparent;
  --shadow-1: none; --shadow-2: none; --shadow-3: none;
}

/* ==========================================================================
   NỀN
   ========================================================================== */

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

html {
  scroll-behavior: smooth;
  color-scheme: light;
  -webkit-tap-highlight-color: transparent;
}
/* Báo đúng sắc thái cho thanh cuộn và ô nhập của hệ điều hành */
[data-theme="slate"], [data-theme="amber"],
[data-theme="midnight"], [data-theme="contrast"] { color-scheme: dark; }
[data-theme="paper"] { color-scheme: light; }

body {
  margin: 0;
  font-family: var(--f-sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-2);
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
  touch-action: manipulation;
  overflow-x: hidden;
  font-feature-settings: "cv02", "cv03", "cv04";   /* chữ số và chữ cái dễ phân biệt */
}

[id] { scroll-margin-top: 5rem; }

a { color: var(--accent-ink); text-decoration: none; }
a:hover { color: var(--accent-h); text-decoration: underline; text-underline-offset: 3px; }

p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

/* --- Phân cấp tiêu đề theo đúng thang đã chốt ---------------------------- */

h1, h2, h3, h4 { font-family: var(--f-sans); color: var(--text); margin: 0; text-wrap: balance; }
h1 { font-size: 2rem;    font-weight: 700; line-height: 1.25; letter-spacing: -.02em; }  /* 32px */
h2 { font-size: 1.5rem;  font-weight: 600; line-height: 1.3;  letter-spacing: -.01em; }  /* 24px */
h3 { font-size: 1.25rem; font-weight: 600; line-height: 1.35; }                          /* 20px */
h4 { font-size: 1rem;    font-weight: 600; line-height: 1.4; }

@media (max-width: 640px) {
  h1 { font-size: 1.75rem; }   /* 28px */
  h2 { font-size: 1.375rem; }  /* 22px */
  h3 { font-size: 1.125rem; }  /* 18px */
}

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 1.5rem; }
.muted { color: var(--muted); }
.small { font-size: .875rem; }
.center { text-align: center; }

/* Nhãn kỹ thuật in hoa nhỏ — dùng cho eyebrow, tiêu đề cột, chú thích */
.tag {
  font-family: var(--f-mono); font-size: .6875rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
}

/* ==========================================================================
   MÃ LỆNH & DỮ LIỆU — luôn dùng font mono
   ========================================================================== */

code, kbd, samp { font-family: var(--f-mono); font-size: .9em; }

code {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--r-sm); padding: .1em .4em; color: var(--text);
}

/* Ô lệnh AutoCAD/Lisp */
.cmd {
  display: inline-block; font-family: var(--f-mono);
  font-size: .875em; font-weight: 600;
  background: var(--accent-soft); color: var(--accent-ink);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  border-radius: var(--r-sm); padding: .1em .5em;
  white-space: nowrap;
}

pre {
  background: var(--surface-2); border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--r); padding: 1rem 1.15rem; overflow-x: auto; margin: 1.25rem 0;
}
pre code { background: none; border: none; padding: 0; font-size: .875rem; }

/* ==========================================================================
   NHÃN PHÂN LOẠI (Badge)
   ========================================================================== */

.badge {
  display: inline-flex; align-items: center; gap: .3rem;
  font-family: var(--f-mono); font-size: .6875rem; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase;
  padding: .2rem .5rem; border-radius: var(--r-sm);
  background: var(--surface-2); color: var(--muted);
  border: 1px solid var(--border);
  white-space: nowrap;
}
.badge-cad   { background: var(--tag-cad-bg);   color: var(--tag-cad);   border-color: transparent; }
.badge-revit { background: var(--tag-revit-bg); color: var(--tag-revit); border-color: transparent; }
.badge-hvac  { background: var(--tag-hvac-bg);  color: var(--tag-hvac);  border-color: transparent; }
.badge-elec  { background: var(--tag-elec-bg);  color: var(--tag-elec);  border-color: transparent; }
.badge-lisp  { background: var(--tag-lisp-bg);  color: var(--tag-lisp);  border-color: transparent; }
.badge-data  { background: var(--tag-data-bg);  color: var(--tag-data);  border-color: transparent; }

.badge-row { display: flex; flex-wrap: wrap; gap: .4rem; }

/* ==========================================================================
   NÚT
   ========================================================================== */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: var(--f-sans); font-size: .9375rem; font-weight: 600;
  padding: .625rem 1.125rem; border-radius: var(--r);
  border: 1px solid var(--border-2); background: var(--surface); color: var(--text);
  cursor: pointer; text-decoration: none;
  transition: background-color .15s, border-color .15s, box-shadow .15s, transform .1s;
}
.btn:hover { background: var(--surface-2); border-color: var(--muted);
             color: var(--text); text-decoration: none; box-shadow: var(--shadow-1); }
.btn:active { transform: translateY(1px); }

.btn-main { background: var(--accent-ink); color: var(--on-accent); border-color: var(--accent-ink); }
.btn-main:hover { background: var(--accent-h); border-color: var(--accent-h); color: var(--on-accent); }

.btn-sm { font-size: .8125rem; padding: .375rem .75rem; }
.btn svg { width: 1em; height: 1em; flex: 0 0 auto; }
.btn-row { display: flex; gap: .625rem; flex-wrap: wrap; margin-top: 1.5rem; }

/* Nút đã chép — phản hồi ngay tại chỗ, không cần toast */
.btn.da-xong { background: var(--ok-soft); border-color: var(--ok); color: var(--ok); }

/* ==========================================================================
   HERO — bản vẽ MEP phủ kín, thương hiệu là tín hiệu lớn nhất
   ========================================================================== */

.hero {
  position: relative;
  min-height: 78svh;
  display: grid; grid-template-columns: 1fr; align-items: center;
  padding: 4.5rem 0 4rem;
  overflow: hidden; isolation: isolate;
  border-bottom: 1px solid var(--border);
}
/* Grid item có lề auto thì THÔI co giãn — bề rộng rơi về fit-content và
   margin:0 auto hết chỗ căn giữa, hero sẽ lệch trục so với các mục bên dưới. */
.hero > .wrap { width: 100%; }
.hero-in { max-width: 44rem; }

/* Thương hiệu: không phải tiêu đề nội dung nên không theo thang H1 */
.hero h1 {
  font-size: clamp(3rem, 8vw, 5.5rem);
  font-weight: 700; line-height: .95; letter-spacing: -.035em;
  margin: .75rem 0 0; color: var(--text);
}
.hero-sub {
  font-size: 1.0625rem; color: var(--muted); max-width: 34rem;
  margin: 1.25rem 0 0; padding-left: .875rem;
  border-left: 3px solid var(--accent);
}

/* --- Bản vẽ nền: nét lấy màu từ token nên đổi theme là đổi theo ---------- */

.hero-ve { position: absolute; inset: 0; z-index: -2; pointer-events: none; }
.hero-ve svg { width: 100%; height: 100%; display: block; }

.hv-luoi { fill: none; stroke: var(--accent); stroke-width: 1;   opacity: .12; }
.hv-day  { fill: none; stroke: var(--text);   stroke-width: 3.2; opacity: .16; stroke-linecap: round; stroke-linejoin: round; }
.hv-net  { fill: none; stroke: var(--accent); stroke-width: 2.2; opacity: .34; stroke-linecap: round; stroke-linejoin: round; }
.hv-phu  { fill: none; stroke: var(--tag-revit); stroke-width: 2.6; opacity: .3; stroke-linecap: round; stroke-linejoin: round; }
.hv-ok   { fill: none; stroke: var(--ok);     stroke-width: 2.2; opacity: .3;  stroke-linecap: round; stroke-linejoin: round; }
.hv-kt   { fill: none; stroke: var(--muted);  stroke-width: 1.2; opacity: .45; }
.hv-chu  { fill: var(--muted); font-family: var(--f-mono); font-size: 13px; opacity: .5; letter-spacing: .06em; }
.hv-khoi { fill: none; stroke: var(--accent); stroke-width: 1.8; opacity: .3; }
.hv-nut  { fill: var(--bg); stroke: var(--text); stroke-width: 2.6; opacity: .35; }

/* Phủ dần về phía chữ. Vùng chữ gần như đặc: để lọt vài phần trăm bản vẽ là
   tương phản tụt xuống dưới ngưỡng 4,5:1. */
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(100deg,
      color-mix(in srgb, var(--bg) 97%, transparent) 0%,
      color-mix(in srgb, var(--bg) 88%, transparent) 42%,
      color-mix(in srgb, var(--bg) 24%, transparent) 78%,
      transparent 100%);
}

.hero-ve [data-ve] {
  stroke-dasharray: var(--dai, 2600); stroke-dashoffset: var(--dai, 2600);
  animation: hv-ve 2.4s cubic-bezier(.25,.6,.3,1) forwards; animation-delay: var(--tre, 0s);
}
@keyframes hv-ve { to { stroke-dashoffset: 0; } }
.hero-ve [data-hien] { opacity: 0; animation: hv-hien .7s ease forwards; animation-delay: var(--tre, 1.4s); }
@keyframes hv-hien { to { opacity: 1; } }

/* ==========================================================================
   3D — LĂNG TRỤ KHÚC XẠ
   Góc nghiêng chặn ở ±6°. Nghiêng mạnh hơn thì chữ thông số bị méo phối cảnh
   và khó đọc — với bảng số kỹ thuật thì đó là lỗi, không phải hiệu ứng.
   ========================================================================== */

.san-3d { perspective: 1000px; perspective-origin: 50% 50%; }

.vat-3d {
  --ry: 0deg; --rx: 0deg;
  position: relative;
  transform: rotateY(var(--ry)) rotateX(var(--rx));
  transform-style: preserve-3d;
  /* KHÔNG đặt transition cho transform. site.js tự nội suy góc theo từng khung
     hình; thêm transition vào đây là hai cơ chế đánh nhau — mỗi lần chuột nhúc
     nhích transition lại khởi động lại từ đầu, đường cong không bao giờ chạy
     hết nên vừa trễ vừa giật. Chỉ để transition cho bóng đổ. */
  transition: box-shadow .35s ease;
  will-change: transform;
}

/* Lớp sáng lướt qua mặt kính khi hover */
.vat-3d::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  pointer-events: none; opacity: 0; transform: translateZ(1px);
  background: linear-gradient(105deg, transparent 30%, var(--glare) 50%, transparent 70%);
  background-size: 250% 100%; background-position: 120% 0;
  /* Ánh sáng lướt chậm hơn nhịp nghiêng một chút để hai chuyển động không
     chạy song song y hệt nhau — nhìn có lớp lang hơn. */
  transition: opacity .4s ease, background-position 1.1s cubic-bezier(.25,.6,.25,1);
}
.san-3d:hover .vat-3d::after { opacity: 1; background-position: -30% 0; }

/* Phần tử nổi lên trong không gian trục đo */
.noi-3d { transform: translateZ(20px); transform-style: preserve-3d; }
.noi-3d-sm { transform: translateZ(10px); }

/* ==========================================================================
   THẺ CÔNG CỤ / DỮ LIỆU
   ========================================================================== */

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 1.25rem;
  box-shadow: var(--shadow-1);
  transition: border-color .18s, box-shadow .18s;
}
.card:hover { border-color: var(--border-2); box-shadow: var(--shadow-2); }
.card h3 { margin-bottom: .4rem; }
.card p { color: var(--muted); font-size: .9375rem; }

/* Thẻ kính có nghiêng 3D — dùng cho danh sách tool */
.card-3d {
  background: var(--glass);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 1.25rem;
  box-shadow: var(--shadow-1);
  overflow: hidden;
}
.san-3d:hover .card-3d { box-shadow: var(--shadow-3); border-color: var(--accent); }

.card-3d .dau { display: flex; align-items: flex-start; gap: .75rem; margin-bottom: .75rem; }
.card-3d .ico {
  width: 2.5rem; height: 2.5rem; flex: 0 0 auto;
  display: grid; place-items: center; border-radius: var(--r);
  background: var(--accent-soft); color: var(--accent-ink);
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
}
.card-3d .ico svg { width: 1.25rem; height: 1.25rem; }
.card-3d h3 { font-size: 1.125rem; margin: 0 0 .15rem; }   /* 18px — sàn của thang H3 */
.card-3d .mo { color: var(--muted); font-size: .9375rem; margin: 0 0 1rem; min-height: 2.9em; }
.card-3d .chan { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }

.luoi-tool { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); }

.grid { display: grid; gap: 1.25rem; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

/* ==========================================================================
   BẢNG DỮ LIỆU
   ========================================================================== */

.table-scroll {
  overflow-x: auto; margin: 1.5rem 0;
  border: 1px solid var(--border); border-radius: var(--r-lg);
  background: var(--surface);
}
table { border-collapse: collapse; width: 100%; font-size: .9375rem; }

th {
  background: var(--surface-2); color: var(--text);
  font-family: var(--f-sans); font-size: .8125rem; font-weight: 600;
  text-align: left; white-space: nowrap;
  padding: .75rem 1rem; border-bottom: 1px solid var(--border-2);
  position: sticky; top: 0; z-index: 1;
}
td { padding: .75rem 1rem; border-bottom: 1px solid var(--border); color: var(--text-2); vertical-align: top; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr { transition: background-color .12s; }
tbody tr:hover { background: var(--surface-2); }

/* Cột số liệu: mono + tabular để chữ số thẳng cột, căn phải */
td.so, th.so { font-family: var(--f-mono); font-variant-numeric: tabular-nums; text-align: right; }
td.ma, th.ma { font-family: var(--f-mono); }

/* ==========================================================================
   NHÃN MỤC & KHỐI BỐ CỤC
   ========================================================================== */

.block { padding: 4rem 0; }
.block + .block { border-top: 1px solid var(--border); }

.viewlabel { display: flex; align-items: center; gap: .875rem; margin-bottom: 1.5rem; }
.viewlabel .box {
  font-family: var(--f-mono); font-size: .6875rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--accent-ink);
  background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
  border-radius: 999px; padding: .2rem .7rem; flex: 0 0 auto;
}
.viewlabel .rule { flex: 1; height: 1px; background: var(--border); }

.split { display: grid; gap: 2.5rem; grid-template-columns: 1fr 1.5fr; align-items: start; }
.split .lead { font-size: 1.0625rem; color: var(--muted); }

.dim { display: flex; align-items: center; gap: .75rem; margin: 0 0 .5rem; }
.dim::before, .dim::after { content: ""; height: 8px; width: 1px; background: var(--border-2); flex: 0 0 auto; }
.dim i { flex: 1; height: 1px; background: var(--border); }
.dim span { font-family: var(--f-mono); font-size: .6875rem; font-weight: 600;
            letter-spacing: .1em; text-transform: uppercase; color: var(--muted); flex: 0 0 auto; }

/* ==========================================================================
   THANH ĐIỀU HƯỚNG
   ========================================================================== */

.nav {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 85%, transparent);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.nav-in {
  max-width: var(--wrap); margin: 0 auto; padding: .625rem 1.5rem;
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
}
.nav-logo {
  display: flex; align-items: center; gap: .5rem; color: var(--text);
  font-weight: 700; font-size: 1rem; letter-spacing: -.01em;
}
.nav-logo:hover { text-decoration: none; color: var(--text); }
.nav-logo img { width: 26px; height: 26px; }
.nav-links { display: flex; gap: 1.25rem; margin-left: auto; flex-wrap: wrap; align-items: center; }
.nav-links a { color: var(--muted); font-size: .875rem; font-weight: 500; }
.nav-links a:hover { color: var(--text); text-decoration: none; }
.nav-links a.on { color: var(--accent-ink); font-weight: 600; }

/* ---------- Bộ chọn bộ màu, kiểu hộp cấu hình của phần mềm --------------- */

.theme-pick { position: relative; }

.theme-nut {
  display: inline-flex; align-items: center; gap: .4rem;
  height: 32px; padding: 0 .6rem; cursor: pointer;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r);
  color: var(--muted); font-family: var(--f-mono); font-size: .6875rem; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase;
  transition: color .15s, border-color .15s, background-color .15s;
}
.theme-nut:hover { color: var(--text); border-color: var(--border-2); background: var(--surface-2); }
.theme-nut .o {
  width: 12px; height: 12px; border-radius: 3px; flex: 0 0 auto;
  background: var(--accent); border: 1px solid var(--border-2);
}
.theme-nut svg { width: 11px; height: 11px; opacity: .7; }

.theme-menu {
  position: absolute; top: calc(100% + .4rem); right: 0; z-index: 60;
  min-width: 15rem; padding: .35rem;
  background: var(--surface); border: 1px solid var(--border-2);
  border-radius: var(--r-lg); box-shadow: var(--shadow-3);
}
.theme-menu[hidden] { display: none; }

.theme-item {
  display: flex; align-items: center; gap: .6rem; width: 100%;
  padding: .5rem .6rem; border: 0; border-radius: var(--r); cursor: pointer;
  background: transparent; color: var(--text); text-align: left;
  font-family: var(--f-sans); font-size: .875rem;
  transition: background-color .12s;
}
.theme-item:hover { background: var(--surface-2); }
.theme-item[aria-checked="true"] { background: var(--accent-soft); color: var(--accent-ink); font-weight: 600; }
.theme-item .dai { display: flex; flex: 0 0 auto; border-radius: 3px; overflow: hidden;
                   border: 1px solid var(--border-2); }
.theme-item .dai span { width: 9px; height: 18px; display: block; }
.theme-item .mo { display: block; font-size: .75rem; color: var(--muted); font-weight: 400; margin-top: .1rem; }
.theme-item[aria-checked="true"] .mo { color: var(--accent-ink); opacity: .8; }

/* ==========================================================================
   HỘP LƯU Ý
   ========================================================================== */

.note {
  border: 1px solid var(--border); border-left: 3px solid var(--info);
  background: var(--surface); border-radius: var(--r);
  padding: 1rem 1.25rem; margin: 1.5rem 0;
}
.note.warn { border-left-color: var(--warn); background: var(--warn-soft); border-color: color-mix(in srgb, var(--warn) 25%, transparent); }
.note.bad  { border-left-color: var(--danger); background: var(--danger-soft); border-color: color-mix(in srgb, var(--danger) 25%, transparent); }
.note.ok   { border-left-color: var(--ok); background: var(--ok-soft); border-color: color-mix(in srgb, var(--ok) 25%, transparent); }
.note :first-child { margin-top: 0; }
.note :last-child { margin-bottom: 0; }

/* ==========================================================================
   KHUNG TÊN BẢN VẼ
   ========================================================================== */

.titleblock {
  display: grid; grid-template-columns: repeat(5, 1fr);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-1);
}
.tb-cell { padding: .875rem 1.125rem 1rem; min-width: 0; border-right: 1px solid var(--border); }
.tb-cell:last-child { border-right: 0; }
.tb-key { display: block; font-family: var(--f-mono); font-size: .625rem; font-weight: 600;
          letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: .3rem; }
.tb-val { display: block; font-family: var(--f-mono); font-size: 1.0625rem; font-weight: 600;
          color: var(--text); line-height: 1.25; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }

/* ==========================================================================
   BẢNG THỐNG KÊ CÔNG CỤ
   ========================================================================== */

.schedule { list-style: none; margin: 0; padding: 0;
            border: 1px solid var(--border); border-radius: var(--r-lg);
            overflow: hidden; background: var(--surface); }
.sch {
  display: grid; align-items: center; gap: 0 1.25rem;
  grid-template-columns: 3rem 2rem minmax(7rem, 12rem) 1fr;
  padding: 1rem 1.25rem; border-bottom: 1px solid var(--border);
  transition: background-color .14s;
}
.sch:last-child { border-bottom: 0; }
.sch:hover { background: var(--surface-2); }
.sch-mark { font-family: var(--f-mono); font-size: .875rem; font-weight: 600;
            color: var(--muted); font-variant-numeric: tabular-nums; }
.sch:hover .sch-mark { color: var(--accent-ink); }
.sch-icon { font-size: 1.125rem; }
.sch-name { font-weight: 600; color: var(--text); font-size: .9375rem; }
.sch-desc { color: var(--muted); font-size: .9375rem; }

/* ==========================================================================
   MÔ PHỎNG PALETTE
   ========================================================================== */

.palette {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-2);
  font-size: .8125rem; user-select: none;
}
.palette-head { display: flex; align-items: center; gap: .5rem; padding: .625rem .75rem;
                border-bottom: 1px solid var(--border); background: var(--surface-2); }
.palette-head img { width: 22px; height: 22px; }
.palette-title { font-weight: 700; font-size: .875rem; line-height: 1.15; color: var(--text); }
.palette-ver { color: var(--accent-ink); font-family: var(--f-mono); font-size: .625rem; }
.palette-mini { margin-left: auto; display: flex; gap: .25rem; }
.palette-mini span { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm);
                     padding: .1rem .4rem; font-family: var(--f-mono); font-size: .625rem; color: var(--muted); }

.palette-tabs { display: grid; grid-template-columns: repeat(7, 1fr); background: var(--surface-2);
                border-bottom: 1px solid var(--border); }
.palette-tab { padding: .25rem .1rem .35rem; cursor: pointer; background: transparent; border: 0;
               color: var(--muted); font-family: inherit;
               display: flex; flex-direction: column; align-items: center; gap: .1rem;
               transition: background-color .14s, color .14s; }
.palette-tab i { display: block; height: 2px; width: calc(100% - 10px); margin: 0 5px 3px;
                 border-radius: 2px; background: transparent; }
.palette-tab em { font-style: normal; font-size: .9rem; line-height: 1.2; }
.palette-tab b { font-family: var(--f-mono); font-weight: 600; font-size: .5625rem; }
.palette-tab:hover { background: var(--surface-3); color: var(--text); }
.palette-tab[aria-selected="true"] { background: var(--surface); color: var(--accent-ink); }
.palette-tab[aria-selected="true"] i { background: var(--accent); }

.palette-body { padding: .75rem; display: grid; gap: .5rem; background: var(--surface); }
/* display:grid ở trên đè mất display:none mặc định của [hidden] — không có
   dòng này thì cả 7 tab hiện cùng lúc. */
.palette-body[hidden] { display: none; }
.palette-row { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.palette-label { color: var(--muted); font-family: var(--f-mono); font-size: .5625rem;
                 letter-spacing: .06em; text-transform: uppercase; margin-bottom: .2rem; display: block; }
.palette-field { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-sm);
                 padding: .3rem .5rem; font-size: .75rem; color: var(--text-2);
                 display: flex; justify-content: space-between; align-items: center; }
.palette-field::after { content: "⌄"; color: var(--muted); font-size: .65rem; }
.palette-field.plain::after { content: ""; }
.palette-btn { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-sm);
               padding: .45rem; text-align: center; font-weight: 600; font-size: .75rem; color: var(--text); }
.palette-btn.pri { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.palette-foot { border-top: 1px solid var(--border); padding: .4rem .75rem; color: var(--muted);
                font-family: var(--f-mono); font-size: .5625rem; background: var(--surface-2);
                display: flex; justify-content: space-between; gap: .5rem; }

/* ==========================================================================
   KHỐI TẢI VỀ · MÃ HASH · LỊCH SỬ
   ========================================================================== */

.dl { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
      padding: 1.5rem; box-shadow: var(--shadow-1); }
.dl + .dl { margin-top: 1rem; }
.dl-head { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; margin-bottom: .35rem; }
.dl-head h3 { margin: 0; }
.dl-tag { font-family: var(--f-mono); font-size: .625rem; font-weight: 600;
          letter-spacing: .08em; text-transform: uppercase; border-radius: var(--r-sm);
          padding: .2rem .5rem; background: var(--accent-ink); color: var(--on-accent); }
.dl-tag.alt { background: var(--surface-2); color: var(--muted); border: 1px solid var(--border); }
.dl-meta { color: var(--muted); font-family: var(--f-mono); font-size: .8125rem; margin: 0 0 .875rem;
           font-variant-numeric: tabular-nums; }

.hash { font-family: var(--f-mono); font-size: .75rem; word-break: break-all; line-height: 1.7;
        background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r);
        padding: .625rem .75rem; margin-top: 1rem; color: var(--muted); }
.hash b { color: var(--text); font-weight: 600; }
.hash [data-mep$="-sha256"] { color: var(--accent-ink); }

.ver { border-left: 2px solid var(--border); padding: 0 0 2rem 1.5rem; position: relative; }
.ver:last-child { padding-bottom: 0; }
.ver::before { content: ""; position: absolute; left: -5px; top: .6rem;
               width: 8px; height: 8px; border-radius: 50%; background: var(--border-2); }
.ver.now::before { background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.ver h3 { margin-bottom: .1rem; }
.ver .when { color: var(--muted); font-family: var(--f-mono); font-size: .75rem; margin: 0 0 .625rem; }
.ver ul { margin: 0; padding-left: 1.1rem; color: var(--muted); }
.ver li { margin-bottom: .35rem; }
.ver li b { color: var(--text); }

.code-404 { font-size: clamp(4rem, 14vw, 8rem); font-weight: 700; line-height: 1;
            margin: 0 0 .5rem; color: var(--accent-ink); letter-spacing: -.04em; }

/* ==========================================================================
   CHÂN TRANG
   ========================================================================== */

.foot { border-top: 1px solid var(--border); background: var(--surface);
        padding: 3rem 0 1.5rem; margin-top: 4rem; color: var(--muted); font-size: .9375rem; }
.foot a { color: var(--text-2); }
.foot a:hover { color: var(--accent); }
.foot .cols { display: grid; gap: 2rem; grid-template-columns: 1.6fr 1fr 1fr 1fr; }
.foot h4 { font-family: var(--f-mono); font-size: .6875rem; font-weight: 600; letter-spacing: .1em;
           text-transform: uppercase; color: var(--muted); margin: 0 0 .75rem; }
.foot ul { list-style: none; margin: 0; padding: 0; }
.foot li { margin-bottom: .35rem; }
.foot .bottom { margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid var(--border);
                display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
                font-family: var(--f-mono); font-size: .75rem; }

/* ==========================================================================
   HỖ TRỢ CHUNG
   ========================================================================== */

/* ==========================================================================
   LĂNG KÍNH — áp cho toàn bộ bề mặt nổi, không riêng thẻ công cụ

   Ba lớp: nền kính mờ · viền chuyển màu mỏng · ánh sáng lướt khi hover.
   Viền chuyển màu dựng bằng hai lớp background (padding-box + border-box)
   thay vì border-image, để giữ được bo góc.

   NGHIÊNG 3D thì KHÔNG áp đại trà: chỉ những khối nằm trong .san-3d mới
   nghiêng. Nghiêng cả bảng số liệu và đoạn văn dài làm chữ méo phối cảnh,
   với tài liệu kỹ thuật đó là lỗi chứ không phải hiệu ứng.
   ========================================================================== */

.card, .card-3d, .dl, .note, .titleblock, .palette,
.table-scroll, .schedule, .theme-menu, .doc section {
  position: relative;
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    linear-gradient(135deg,
        var(--glass-line) 0%, transparent 38%,
        transparent 62%, var(--glass-line) 100%) border-box;
  border: 1px solid transparent;
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
}

/* Ánh sáng lướt qua mặt kính */
.card::after, .dl::after, .titleblock::after,
.palette::after, .schedule::after, .doc section::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  pointer-events: none; opacity: 0;
  background: linear-gradient(105deg, transparent 32%, var(--glare) 50%, transparent 68%);
  background-size: 250% 100%; background-position: 120% 0;
  transition: opacity .25s ease, background-position .6s ease;
}
.card:hover::after, .dl:hover::after, .titleblock:hover::after,
.palette:hover::after, .schedule:hover::after, .doc section:hover::after {
  opacity: 1; background-position: -30% 0;
}

/* Bộ tương phản cao và người tắt trong suốt: bỏ hết kính, trả nền đặc */
[data-theme="contrast"] .card, [data-theme="contrast"] .card-3d,
[data-theme="contrast"] .dl, [data-theme="contrast"] .note,
[data-theme="contrast"] .titleblock, [data-theme="contrast"] .palette,
[data-theme="contrast"] .table-scroll, [data-theme="contrast"] .schedule,
[data-theme="contrast"] .theme-menu, [data-theme="contrast"] .doc section {
  background: var(--surface); border: 1px solid var(--border);
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
[data-theme="contrast"] .card::after, [data-theme="contrast"] .dl::after,
[data-theme="contrast"] .titleblock::after, [data-theme="contrast"] .palette::after,
[data-theme="contrast"] .schedule::after, [data-theme="contrast"] .doc section::after,
[data-theme="contrast"] .vat-3d::after { display: none; }
[data-theme="contrast"] .vat-3d { transform: none !important; }

/* ==========================================================================
   TÀI LIỆU NHẬP TỪ NGOÀI (.doc)

   huong-dan.html và tai-lieu.html là hai file rời gửi kèm cho khách. Bản trên
   web do CapNhatWeb.ps1 bóc phần thân ra rồi bọc vào khung của site.

   Lớp .doc là BẮT BUỘC: markup gốc dùng các tên lớp trùng với site
   (.wrap, .hero, .btn, .note...) nhưng ý nghĩa khác hẳn — .btn của họ là con
   chữ nhỏ mô tả nút bấm, .btn của site là nút thật. Bọc trong .doc rồi ghi đè
   có phạm vi thì hai bên không giẫm lên nhau.
   ========================================================================== */

.doc { font-size: 1rem; line-height: 1.7; color: var(--text-2); }
.doc .wrap { max-width: none; margin: 0; padding: 0; }

/* ---------------------------------------------------------------------------
   BỘ TÊN LỚP CỦA HƯỚNG DẪN CÀI ĐẶT (to · khungten · kt · ghi · cuon · lenh…)
   Tài liệu gốc là một tờ giấy can có bìa và khung tên riêng. Trên web nó là
   NỘI DUNG của trang, nên bìa và nền giấy bỏ đi, còn khung tên thì giữ vì
   chứa thông tin thật — chuyển sang đúng dáng .titleblock của site.
   --------------------------------------------------------------------------- */

.doc .to      { background: none; border: 0; box-shadow: none; padding: 0; margin: 0; max-width: none; }
.doc .trong   { padding: 0; margin: 0; max-width: none; }
.doc .vung    { display: none; }          /* dấu định vị góc tờ giấy, web không cần */

/* Khung tên → dải ô số liệu như .titleblock.
   .o-ten TỰ nó là lưới, không dùng display:contents — nếu đẩy các ô lên lưới
   cha thì số cột do cha quyết định (auto-fit ra 6) trong khi chỉ có 4 ô, hai
   cột cuối bỏ trống trông như thiếu dữ liệu. */
.doc .khungten { border: 1px solid var(--border); border-radius: var(--r-lg);
                 background: var(--surface); box-shadow: var(--shadow-1);
                 overflow: hidden; margin: 0 0 2rem; }
.doc .khungten .ten { padding: 1.25rem 1.25rem 1rem; border-bottom: 1px solid var(--border); }
.doc .khungten .ten b, .doc .khungten .ten strong { font-size: 1.5rem; }
.doc .o-ten   { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); }
.doc .o-ten > * { padding: .875rem 1.125rem 1rem; border-right: 1px solid var(--border);
                  border-top: 1px solid var(--border); min-width: 0; margin-top: -1px; }
.doc .o-ten > *:last-child { border-right: 0; }
.doc .phu     { display: block; font-family: var(--f-mono); font-size: .625rem; font-weight: 600;
                letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: .3rem; }

/* Tiêu đề mục: số + chữ + đường kẻ chạy hết dòng */
.doc .kt      { display: flex; align-items: center; gap: .875rem; margin: 2.5rem 0 1rem; }
.doc .kt h2   { margin: 0; flex: 0 0 auto; }
.doc .bong    { flex: 0 0 auto; width: 1.9rem; height: 1.9rem; border-radius: var(--r-sm);
                display: inline-flex; align-items: center; justify-content: center;
                background: var(--accent-soft); color: var(--accent-ink);
                font-family: var(--f-mono); font-size: .8125rem; font-weight: 600;
                border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent); }
.doc .duong   { flex: 1; height: 1px; background: var(--border); }

/* Ba loại hộp lưu ý của tài liệu cài đặt */
.doc .ghi     { border: 1px solid var(--border); border-left: 3px solid var(--info);
                background: var(--surface); border-radius: var(--r);
                padding: 1rem 1.25rem; margin: 1.25rem 0; }
.doc .ghi.duoc { border-left-color: var(--ok); background: var(--ok-soft);
                 border-color: color-mix(in srgb, var(--ok) 22%, transparent); }
.doc .ghi.canh { border-left-color: var(--warn); background: var(--warn-soft);
                 border-color: color-mix(in srgb, var(--warn) 22%, transparent); }
.doc .ghi.dung { border-left-color: var(--accent); background: var(--accent-soft);
                 border-color: color-mix(in srgb, var(--accent) 22%, transparent); }
.doc .ghi > :first-child { margin-top: 0; }
.doc .ghi > :last-child  { margin-bottom: 0; }

/* Bảng cuộn ngang */
.doc .cuon    { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--r-lg);
                background: var(--surface); margin: 1.25rem 0; }
.doc .cuon table { margin: 0; }

/* Ô lệnh và nhãn nút bấm */
.doc .lenh    { display: inline-block; font-family: var(--f-mono); font-size: .875em; font-weight: 600;
                background: var(--accent-soft); color: var(--accent-ink);
                border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
                border-radius: var(--r-sm); padding: .1em .5em; white-space: nowrap; }
.doc .nut     { display: inline-block; font-family: var(--f-mono); font-size: .8125em; font-weight: 600;
                background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-sm);
                padding: .1em .45em; color: var(--text); cursor: default; }
.doc .nut.chinh { background: var(--accent-soft); color: var(--accent-ink);
                  border-color: color-mix(in srgb, var(--accent) 30%, transparent); }

.doc .nho, .doc .rev { font-size: .875rem; color: var(--muted); }
.doc .khoi    { border: 1px solid var(--border); border-radius: var(--r); padding: 1rem 1.25rem;
                background: var(--surface-2); margin: 1.25rem 0; }
.doc .chan, .doc .duoi { color: var(--muted); font-size: .875rem; margin-top: 2rem; }

/* Danh sách bước có số tròn */
.doc ol { counter-reset: none; padding-left: 1.35rem; }
.doc ol > li { margin: .55rem 0; }

/* ---------------------------------------------------------------------------
   BỘ TÊN LỚP CỦA HƯỚNG DẪN SỬ DỤNG (hero · toc · sec · n · scroll · btn…)
   --------------------------------------------------------------------------- */

.doc h1, .doc h2, .doc h3 { font-family: var(--f-sans); color: var(--text); }
.doc h1 { font-size: 2rem; font-weight: 700; line-height: 1.25; margin: 0 0 .5rem; }
.doc h2, .doc h2.sec { font-size: 1.5rem; font-weight: 600; line-height: 1.3;
                       margin: 2.5rem 0 1rem; display: flex; align-items: center; gap: .75rem; }
.doc h3 { font-size: 1.25rem; font-weight: 600; margin: 1.75rem 0 .5rem; }

/* Số thứ tự mục trong tài liệu gốc */
.doc .n {
  flex: 0 0 auto; width: 1.9rem; height: 1.9rem; border-radius: var(--r-sm);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent-soft); color: var(--accent-ink);
  font-family: var(--f-mono); font-size: .8125rem; font-weight: 600;
  border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
}

/* Đầu trang của tài liệu gốc — hạ xuống thành khối bình thường, không phải hero */
.doc header.hero { background: none; padding: 0; margin: 0 0 2rem; min-height: 0;
                   display: block; border: 0; overflow: visible; }
.doc header.hero::after { display: none; }
.doc header.hero p { color: var(--muted); margin: .35rem 0 0; }

/* Dải nhãn ở đầu tài liệu → badge của site */
.doc .badges { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 1rem; }
.doc .badges span {
  font-family: var(--f-mono); font-size: .6875rem; font-weight: 600;
  letter-spacing: .04em; padding: .2rem .5rem; border-radius: var(--r-sm);
  background: var(--surface-2); color: var(--muted); border: 1px solid var(--border);
}

/* Mục lục */
.doc nav.toc { background: var(--surface-2); border: 1px solid var(--border);
               border-radius: var(--r-lg); padding: 1.25rem 1.5rem; margin: 0 0 2rem; }
.doc nav.toc h2 { font-size: .6875rem; font-family: var(--f-mono); letter-spacing: .1em;
                  text-transform: uppercase; color: var(--muted); margin: 0 0 .75rem; display: block; }
.doc nav.toc ol { margin: 0; padding-left: 1.2rem; columns: 2; column-gap: 2rem; }
.doc nav.toc li { margin: .25rem 0; }
.doc nav.toc a { color: var(--text-2); font-size: .9375rem; }
.doc nav.toc a:hover { color: var(--accent-ink); }

/* Mỗi section của tài liệu thành một tấm kính */
.doc section { border-radius: var(--r-lg); padding: 1.5rem 1.75rem; margin: 0 0 1.25rem; }
.doc section > :first-child { margin-top: 0; }

.doc table { width: 100%; border-collapse: collapse; font-size: .9375rem; margin: 1rem 0; }
.doc th { background: var(--surface-2); color: var(--text); font-family: var(--f-sans);
          font-size: .8125rem; font-weight: 600; text-align: left;
          padding: .7rem .9rem; border-bottom: 1px solid var(--border-2); }
.doc td { padding: .7rem .9rem; border-bottom: 1px solid var(--border); color: var(--text-2); vertical-align: top; }
.doc tr:last-child td { border-bottom: 0; }
.doc .scroll { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--r);
               margin: 1rem 0; background: var(--surface); }
.doc .scroll table { margin: 0; }

/* .btn trong tài liệu gốc là NHÃN mô tả nút bấm, không phải nút thật */
.doc .btn {
  display: inline-block; font-family: var(--f-mono); font-size: .8125em; font-weight: 600;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-sm);
  padding: .1em .45em; color: var(--text); cursor: default;
  box-shadow: none; transform: none;
}
.doc .btn.pri { background: var(--accent-soft); color: var(--accent-ink);
                border-color: color-mix(in srgb, var(--accent) 25%, transparent); }

.doc .cmd { display: inline-block; font-family: var(--f-mono); font-size: .875em; font-weight: 600;
            background: var(--accent-soft); color: var(--accent-ink);
            border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
            border-radius: var(--r-sm); padding: .1em .5em; }
.doc code { font-family: var(--f-mono); font-size: .9em; background: var(--surface-2);
            border: 1px solid var(--border); border-radius: var(--r-sm); padding: .1em .4em; color: var(--text); }

.doc .note, .doc .ok, .doc .bad {
  border: 1px solid var(--border); border-left: 3px solid var(--info);
  border-radius: var(--r); padding: .9rem 1.15rem; margin: 1.1rem 0; background: var(--surface-2);
}
.doc .note { border-left-color: var(--warn); background: var(--warn-soft);
             border-color: color-mix(in srgb, var(--warn) 22%, transparent); }
.doc .ok   { border-left-color: var(--ok); background: var(--ok-soft);
             border-color: color-mix(in srgb, var(--ok) 22%, transparent); }
.doc .bad  { border-left-color: var(--danger); background: var(--danger-soft);
             border-color: color-mix(in srgb, var(--danger) 22%, transparent); }
.doc .note b, .doc .ok b, .doc .bad b { color: var(--text); }

.doc .muted { color: var(--muted); font-size: .9375rem; }
.doc .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.doc ol.steps { padding-left: 1.25rem; }
.doc ol.steps > li { margin: .5rem 0; }
.doc ul { margin: .5rem 0; padding-left: 1.35rem; }
.doc li { margin: .25rem 0; }

/* Hình minh hoạ SVG trong tài liệu */
.doc .fig { margin: 1.25rem 0; border: 1px solid var(--border); border-radius: var(--r-lg);
            overflow: hidden; background: var(--surface-2); }
.doc .fig svg { display: block; width: 100%; height: auto; }
.doc .fig .cap { background: var(--surface-3); color: var(--muted); font-size: .8125rem;
                 padding: .5rem .9rem; border-top: 1px solid var(--border); }

.doc > footer { text-align: center; color: var(--muted); font-size: .875rem; margin-top: 2rem; }

@media (max-width: 760px) {
  .doc .grid2 { grid-template-columns: 1fr; }
  .doc nav.toc ol { columns: 1; }
  .doc section { padding: 1.15rem 1.15rem; }
}

/* ========================================================================== */

.skip { position: absolute; left: -9999px; background: var(--accent-ink); color: var(--on-accent); padding: .625rem 1rem; }
.skip:focus { left: 0; top: 0; z-index: 100; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-sm); }

.sheet { position: relative; }

/* --- Khổ hẹp --------------------------------------------------------------- */

@media (max-width: 1000px) {
  .split { grid-template-columns: 1fr; gap: 1.5rem; }
  .titleblock { grid-template-columns: repeat(2, 1fr); }
  .tb-cell:nth-child(2n) { border-right: 0; }
  .tb-cell { border-bottom: 1px solid var(--border); }
  .foot .cols { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
  .nav-in { gap: .625rem; }
  .nav-links { width: 100%; margin-left: 0; gap: 1rem; }
  .hero { padding: 2.5rem 0 2.25rem; min-height: auto; }
  .block { padding: 2.5rem 0; }
  .titleblock { grid-template-columns: 1fr; }
  .tb-cell { border-right: 0; }
  .sch { grid-template-columns: 2.25rem 1.5rem 1fr; gap: 0 .75rem; }
  .sch-desc { grid-column: 2 / -1; margin-top: .3rem; }
  .foot .cols { grid-template-columns: 1fr; }
  .luoi-tool { grid-template-columns: 1fr; }
}

/* Tắt nghiêng 3D trên thiết bị cảm ứng và màn hẹp — nghiêng theo ngón tay
   vừa vô nghĩa vừa làm khó đọc thông số. */
@media (max-width: 1024px), (hover: none), (pointer: coarse) {
  .vat-3d { transform: none !important; }
  .vat-3d::after { display: none; }
  .noi-3d, .noi-3d-sm { transform: none; }
  .san-3d { perspective: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
  /* Tắt animation thì nét vẽ kẹt ở trạng thái ẩn — phải trả về hiện đủ. */
  .hero-ve [data-ve]   { stroke-dashoffset: 0 !important; }
  .hero-ve [data-hien] { opacity: 1 !important; }
  .vat-3d { transform: none !important; }
  .vat-3d::after { display: none; }
}

@media (prefers-reduced-transparency: reduce) {
  .card-3d, .nav { backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
                   background: var(--surface) !important; }
  .hero-ve { display: none; }
}

@media print {
  .nav, .foot, .btn-row, .theme-toggle { display: none; }
  body { background: #fff; color: #000; }
  .hero-ve, .hero::after { display: none; }
  .card, .card-3d, .dl, .palette, .titleblock { box-shadow: none; backdrop-filter: none; }
}