/* ============================================================
   HUB 4.0 — "MỰC & ĐỒNG"
   Xanh mực tàu · Vàng đồng · Kem ngà · Dấu mộc
   Cấu trúc và mô-típ dấu mộc lấy từ mẫu mau.html; bảng màu và bộ chữ
   lấy theo ảnh tham chiếu (nền xanh navy, điểm nhấn vàng đồng).

   Ghi chú kiến trúc
   -----------------
   1. Bảng màu gốc là --navy / --brass / --steel / --eggshell.
   2. Các biến CŨ (--lacquer, --seal, --gold, --surface, --brand, --ink…) vẫn
      giữ nguyên TÊN nhưng ánh xạ sang bảng màu mới. Nhờ vậy mọi style nội
      tuyến trong 25 trang HTML và mọi markup do JS sinh ra tự đổi da, không vỡ.
   3. Nền mặc định là xanh mực tối. Đặt lớp `.light` lên một <section> để có
      dải nền kem: các biến màu được định nghĩa lại trong phạm vi đó nên card,
      bảng, ô nhập… tự lật sang phiên bản sáng, không cần luật CSS riêng cho
      từng thành phần. Chữ đặt trên nền vàng đồng dùng --on-brass để luôn đủ
      tương phản ở cả hai phía.
   4. Font tải từ Google Fonts, luôn có font hệ thống dự phòng để trang vẫn
      chạy được khi mở bằng file:// hoặc khi không có mạng.
   ============================================================ */

:root {
  /* ----- Xanh mực tàu (nền tối) ----- */
  --navy:         #14283A;
  --navy-2:       #1B3349;
  --navy-3:       #23405A;
  --navy-4:       #2C4E6B;

  /* Tên cũ giữ lại làm bí danh: nhiều style nội tuyến trong các trang
     vẫn gọi --lacquer*, không cần sửa từng chỗ. */
  --lacquer:      var(--navy);
  --lacquer-2:    var(--navy-2);
  --lacquer-3:    var(--navy-3);
  --lacquer-4:    var(--navy-4);

  /* ----- Vàng đồng (điểm nhấn & con dấu) ----- */
  --brass:        #C08B4B;
  --brass-2:      #DCB176;
  --brass-deep:   #9A6C31;
  --seal:         var(--brass);       /* dấu mộc & hành động chính */
  --seal-deep:    var(--brass-deep);
  --seal-soft:    rgba(192, 139, 75, .16);

  --gold:         var(--brass);
  --gold-2:       var(--brass-2);
  --gold-soft:    rgba(192, 139, 75, .38);
  --gold-faint:   rgba(192, 139, 75, .16);
  /* Màu chữ đặt TRÊN nền vàng đồng. Nền tối: vàng sáng → chữ xanh mực.
     Trong dải .light vàng đậm lại nên chữ phải sáng. */
  --on-brass:     var(--navy);

  /* ----- Kem & ngà ----- */
  --steel:        #7E9BB2;            /* xanh xám: kết cấu, đường chỉ */
  --eggshell:     #F3F0E8;
  --eggshell-2:   #E9E4D6;
  --ivory:        #F0F5F9;
  --ivory-dim:    rgba(240, 245, 249, .68);
  --ivory-faint:  rgba(240, 245, 249, .42);

  /* ----- Men lam & trạng thái (đã hoà sắc với nền xanh mực) ----- */
  --jade:         #86A97F;
  --jade-deep:    #4E7A57;
  --azure:        #8CA9BE;
  --azure-deep:   #3F6079;

  /* ============ Ánh xạ tương thích ngược ============
     Giữ nguyên tên biến của phiên bản trước để không phải sửa
     hàng trăm style nội tuyến rải khắp các trang. */
  --paper:        var(--lacquer);
  --surface:      var(--lacquer-2);
  --surface-2:    var(--lacquer-3);
  --surface-3:    var(--lacquer-4);

  --ink:          var(--ivory);            /* chữ chính trên nền hiện hành */
  --ink-2:        rgba(240, 245, 249, .72);
  --ink-3:        rgba(240, 245, 249, .46);

  --brand:        var(--brass);            /* hành động chính */
  --brand-2:      var(--brass-2);          /* liên kết & điểm nhấn */
  --brand-soft:   rgba(192, 139, 75, .16);
  --brass-soft:   rgba(192, 139, 75, .13);

  --green:        var(--jade);
  --green-soft:   rgba(134, 169, 127, .14);
  --amber:        var(--brass-2);
  --amber-soft:   rgba(192, 139, 75, .14);
  --red:          #D9705A;
  --red-soft:     rgba(217, 112, 90, .16);
  --info:         var(--azure);
  --info-soft:    rgba(140, 169, 190, .14);

  /* Đường chỉ lấy sắc xanh xám của nền, không lấy vàng — vàng để dành
     cho điểm nhấn. Đây là điểm khác biệt chính so với bản sơn mài. */
  --line:         rgba(126, 155, 178, .20);
  --line-2:       rgba(126, 155, 178, .36);

  /* ----- Hình khối: dứt khoát, không bo tròn ----- */
  --radius:       2px;
  --radius-sm:    2px;
  --radius-lg:    3px;
  --shadow:       0 1px 0 rgba(126, 155, 178, .06), 0 18px 40px -26px rgba(0, 0, 0, .55);
  --shadow-lg:    0 2px 0 rgba(126, 155, 178, .07), 0 34px 70px -30px rgba(0, 0, 0, .6);

  /* ----- Chữ ----- */
  /* Một bộ chữ duy nhất cho cả tiêu đề lẫn nội dung — Inter dựng dấu
     tiếng Việt (ế, ữ, ộ, ỹ) cân và sạch, không bị bẹp như font serif hiển thị.
     Tên biến --serif giữ nguyên vì hàng chục style nội tuyến đang gọi nó. */
  --sans:   'Inter', 'Be Vietnam Pro', 'Segoe UI', 'Noto Sans', Arial, sans-serif;
  --serif:  var(--sans);
  --mono:   ui-monospace, 'Cascadia Mono', Consolas, 'Liberation Mono', monospace;

  /* ----- Nhịp ----- */
  --maxw:       1200px;
  --header-h:   72px;
  /* Đệm ngang của .wrap ở màn hẹp. Bảng tràn lề (.table-wrap) trừ đúng
     bằng biến này, nên hai bên không bao giờ lệch nhau nữa. */
  --pad-x:      16px;
  --ease-out:   cubic-bezier(.19, .72, .22, 1);
  --ease-stamp: cubic-bezier(.34, 1.46, .44, 1);
}

/* ---- Global reset ---- */
*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: hidden; }

/* ============================================================
   DẢI NỀN SÁNG — định nghĩa lại biến trong phạm vi .light
   Mọi thành phần bên trong tự lật màu vì chúng chỉ dùng biến.
   ============================================================ */
.light {
  --surface:      #FCFAF4;
  --surface-2:    #EEEADD;
  --surface-3:    #E2DCCA;

  --ink:          #14283A;
  --ink-2:        rgba(20, 40, 58, .72);
  --ink-3:        rgba(20, 40, 58, .50);

  --brass:        #8A6428;
  --brass-2:      #A67B36;
  --brass-deep:   #6E4E1C;
  --gold:         #8A6428;
  --gold-2:       #A67B36;
  --gold-soft:    rgba(138, 100, 40, .32);
  --gold-faint:   rgba(138, 100, 40, .15);
  --on-brass:     #FCFAF4;

  --seal:         #8A6428;
  --seal-deep:    #6E4E1C;
  --brand:        #8A6428;
  --brand-2:      #6E4E1C;
  --brand-soft:   rgba(138, 100, 40, .14);
  --brass-soft:   rgba(138, 100, 40, .12);

  --green:        var(--jade-deep);
  --green-soft:   rgba(78, 122, 87, .13);
  --amber:        #8A6428;
  --amber-soft:   rgba(138, 100, 40, .14);
  --red:          #A5442C;
  --red-soft:     rgba(165, 68, 44, .12);
  --info:         var(--azure-deep);
  --info-soft:    rgba(63, 96, 121, .12);

  --line:         rgba(20, 40, 58, .14);
  --line-2:       rgba(20, 40, 58, .26);
  --shadow:       0 1px 2px rgba(20, 40, 58, .05), 0 16px 38px -28px rgba(20, 40, 58, .45);
  --shadow-lg:    0 2px 6px rgba(20, 40, 58, .07), 0 34px 70px -32px rgba(20, 40, 58, .5);

  background: var(--eggshell);
  color: var(--ink);
}
.dark {
  background: var(--navy);
  color: var(--ivory);
}

/* Panel TỐI nằm trong dải SÁNG: phải lật token về lại phiên bản tối, nếu
   không chữ màu mực xanh sẽ nằm trên nền xanh mực và biến mất. */
.light .form-card,
.light .about-aside,
.light .hero-panel {
  --surface:   var(--navy-2);
  --surface-2: var(--navy-3);
  --ink:       var(--ivory);
  --ink-2:     rgba(240, 245, 249, .72);
  --ink-3:     rgba(240, 245, 249, .46);
  --brass:     #C08B4B;
  --brass-2:   #DCB176;
  --gold:      #C08B4B;
  --gold-2:    #DCB176;
  --seal:      #C08B4B;
  --brand:     #C08B4B;
  --brand-2:   #DCB176;
  --on-brass:  var(--navy);
  --line:      rgba(126, 155, 178, .20);
  --line-2:    rgba(126, 155, 178, .36);
}

/* ============================================================
   RESET & NỀN TẢNG
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 18px);
}
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.7;
  color: var(--ivory);
  background: var(--navy);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
::selection { background: var(--seal); color: var(--ivory); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--lacquer); }
::-webkit-scrollbar-thumb { background: var(--lacquer-3); border-radius: 0; }
::-webkit-scrollbar-thumb:hover { background: var(--gold-soft); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

img, svg { max-width: 100%; display: block; }
a { color: var(--brand-2); text-decoration: none; transition: color .3s var(--ease-out); }
a:hover { color: var(--gold-2); text-decoration: none; }
.light a:hover { color: var(--seal); }
button, input, select, textarea { font: inherit; color: inherit; }

h1, h2, h3, h4, h5 {
  font-family: var(--sans);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.022em;
  margin: 0 0 .45em;
  color: var(--ink);
}
h1 { font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem); }
h2 { font-size: clamp(1.5rem, 1.15rem + 1.4vw, 2.1rem); }
h3 { font-size: 1.25rem; }
h4 { font-size: 1.05rem; }
/* Từ nhấn: đổi màu chứ không nghiêng. Chữ nghiêng tổng hợp làm dấu tiếng
   Việt xô lệch — đúng thứ trông thiếu chuyên nghiệp. */
h1 em, h2 em, h3 em { font-style: normal; font-weight: 700; color: var(--brass); }
.light h1 em, .light h2 em, .light h3 em { color: var(--brass); }
p  { margin: 0 0 1em; }
strong, b { font-weight: 600; }
hr { border: 0; border-top: 1px solid var(--line); margin: 2rem 0; }
code, pre, kbd { font-family: var(--mono); font-size: .88em; }
mark { background: rgba(192, 139, 75, .24); color: inherit; padding: 0 3px; border-radius: 0; }
.light mark { background: rgba(192, 139, 75, .16); }

/* ---------- Vân sơn mài ---------- */
.grain { position: relative; }
.grain::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .035; z-index: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
}
.grain > * { position: relative; z-index: 1; }

/* ---------- Hiện dần khi cuộn ----------
   Thuộc tính data-reveal do ui.js gắn vào, và chỉ khi trình duyệt hỗ trợ.
   Lớp .js-reveal trên <html> bảo đảm: JS hỏng → không có gì bị ẩn. */
.js-reveal [data-reveal] {
  opacity: 0; transform: translateY(30px);
  transition: opacity .9s var(--ease-out), transform .9s var(--ease-out);
  transition-delay: var(--d, 0s);
}
.js-reveal [data-reveal].in { opacity: 1; transform: none; }

/* ============================================================
   BỐ CỤC
   ============================================================ */
.wrap, .container { width: min(var(--maxw), 92%); margin-inline: auto; }
.section { padding: 92px 0; position: relative; }
.section--tight { padding: 46px 0; }
.section--flush { padding: 0; }
.grid { display: grid; gap: 22px; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(212px, 1fr)); }
.split { display: grid; grid-template-columns: minmax(0, 1fr); gap: 26px; }
@media (min-width: 900px) { .split { grid-template-columns: 280px minmax(0, 1fr); } }
@media (min-width: 900px) { .split--right { grid-template-columns: minmax(0, 1fr) 320px; } }
.row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.row--between { justify-content: space-between; }
.stack > * + * { margin-top: 12px; }
.center { text-align: center; }
.muted { color: var(--ink-3); }
.small { font-size: .9rem; }
.tiny { font-size: .8rem; }
.mt0 { margin-top: 0 } .mb0 { margin-bottom: 0 }

/* ---------- Nhãn phụ & đường chỉ ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 12px; margin-bottom: 16px;
  font-family: var(--sans); font-size: 11px; font-weight: 500;
  letter-spacing: .22em; text-transform: uppercase; line-height: 1.4;
  color: var(--gold); background: none; padding: 0; border-radius: 0;
}
.eyebrow::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--seal); flex: none;
}
.light .eyebrow { color: var(--seal-deep); }
.hairline { height: 1px; border: 0; background: linear-gradient(90deg, transparent, var(--gold-soft), transparent); margin: 0; }
.lede { font-size: 1.03rem; color: var(--ink-2); max-width: 58ch; }

/* ---------- Đầu mục ---------- */
.section-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 20px; flex-wrap: wrap; margin-bottom: 40px;
}
.section-head h2 { margin-bottom: 6px; }
.section-head p { margin: 0; color: var(--ink-3); max-width: 62ch; }
.section-head--stack { display: block; max-width: 660px; }

/* ---------- Đầu trang (dải tiêu đề của mỗi trang) ----------
   Header là sticky nên đã chiếm chỗ sẵn; ở đây chỉ cần khoảng thở. */
.page-head { position: relative; padding: 72px 0 56px; overflow: hidden; }
.page-head h1 { margin-bottom: 10px; }
.page-head .lede, .page-head > .wrap > p { color: var(--ink-2); max-width: 66ch; }
.page-head::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, var(--gold-soft), transparent 72%);
}

/* ============================================================
   HEADER
   ============================================================ */
.site-header {
  position: sticky; top: 0; z-index: 90;
  background: rgba(20, 40, 58, .92);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 var(--gold-faint);
}
/* Thanh trên cùng chứa nhiều thứ hơn phần thân trang (8 mục điều hướng +
   ô tìm + giỏ + tài khoản) nên được phép rộng hơn --maxw một chút. */
.site-header .wrap { width: min(1380px, 96%); }
.header-inner { display: flex; align-items: center; gap: 16px; height: var(--header-h); }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ivory); flex: none; }
.brand:hover { color: var(--ivory); }
.brand-seal { width: 38px; height: 38px; color: var(--gold); flex: none; transition: color .4s var(--ease-out); }
.brand:hover .brand-seal { color: var(--gold-2); }
.brand-mark {  /* dự phòng cho markup cũ chưa có SVG con dấu */
  width: 38px; height: 38px; flex: none; border: 1px solid var(--gold-soft); border-radius: 50%;
  color: var(--gold); display: grid; place-items: center;
  font-family: var(--sans); font-weight: 700; font-size: 14px; background: transparent;
}
.brand-text { display: flex; flex-direction: column; line-height: 1.12; }
.brand-name {
  font-family: var(--sans); font-weight: 700; font-size: 1.16rem;
  letter-spacing: -.015em; text-transform: none; color: var(--ivory);
}
.brand-sub {
  font-size: .58rem; letter-spacing: .3em; text-transform: uppercase;
  color: var(--ivory-faint); font-weight: 400;
}

.nav { display: none; gap: 18px; margin-left: 10px; flex: 1 1 auto; min-width: 0; }
@media (min-width: 1220px) { .nav { display: flex; } }
.nav a {
  position: relative; padding: 8px 0; white-space: nowrap;
  font-size: .7rem; font-weight: 400; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ivory-dim); text-decoration: none; background: none; border-radius: 0;
}
.nav a::after {
  content: ""; position: absolute; left: 0; bottom: 2px; height: 1px; width: 100%;
  background: var(--gold); transform: scaleX(0); transform-origin: left;
  transition: transform .45s var(--ease-out);
}
.nav a:hover { color: var(--ivory); background: none; }
.nav a:hover::after { transform: scaleX(1); }
.nav a.is-active { color: var(--gold); font-weight: 500; background: none; }
.nav a.is-active::after { transform: scaleX(1); }

.header-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; flex: none; }

.searchbox { position: relative; display: none; }
/* Chỉ hiện khi còn chỗ thật sự — hẹp hơn thì đã có ô tìm trong từng trang. */
@media (min-width: 1480px) { .searchbox { display: block; width: 200px; } }
.searchbox input {
  width: 100%; padding: 8px 10px 8px 28px; border-radius: 0;
  border: 0; border-bottom: 1px solid var(--line-2);
  background: transparent; font-size: .84rem; font-weight: 300; color: var(--ivory);
  transition: border-color .4s var(--ease-out);
}
.searchbox input::placeholder { color: var(--ivory-faint); }
.searchbox input:focus { outline: none; border-bottom-color: var(--gold); }
.searchbox::before {
  content: "⌕"; position: absolute; left: 4px; top: 50%; transform: translateY(-54%);
  color: var(--gold); font-size: 1.05rem; pointer-events: none;
}
.search-results {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 95;
  background: var(--lacquer-2); border: 1px solid var(--gold-faint);
  box-shadow: var(--shadow-lg); max-height: 60dvh; overflow: auto; padding: 6px;
}
.search-results:empty { display: none; }
.search-results a { display: block; padding: 9px 11px; color: var(--ivory); text-decoration: none; }
.search-results a:hover { background: var(--lacquer-3); color: var(--gold); }

.menu-toggle {
  display: inline-grid; place-items: center; width: 40px; height: 40px;
  border: 1px solid var(--line-2); background: transparent; color: var(--ivory);
  cursor: pointer; font-size: 1rem; border-radius: 0;
  transition: border-color .35s var(--ease-out), color .35s var(--ease-out);
}
.menu-toggle:hover { border-color: var(--gold); color: var(--gold); }
@media (min-width: 1220px) { .menu-toggle { display: none; } }

.mobile-nav {
  display: none; border-top: 1px solid var(--gold-faint);
  background: rgba(20, 40, 58, .98); padding: 12px 0 20px;
}
.mobile-nav.is-open { display: block; }
.mobile-nav a {
  display: block; padding: 11px min(4vw, 32px);
  font-size: .82rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ivory-dim); text-decoration: none;
}
.mobile-nav a:hover, .mobile-nav a.is-active { background: var(--lacquer-2); color: var(--gold); }

/* ============================================================
   NÚT
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px 28px; border-radius: 2px; border: 1px solid transparent;
  font-family: var(--sans); font-size: .74rem; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase; line-height: 1.2;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background .4s var(--ease-out), color .4s var(--ease-out),
              border-color .4s var(--ease-out), box-shadow .4s var(--ease-out);
}
.btn .arrow { transition: transform .45s var(--ease-out); }
.btn:hover .arrow { transform: translateX(5px); }
.btn:active { transform: translateY(1px); }

.btn-primary, .btn-seal {
  background: linear-gradient(135deg, var(--brass-2), var(--brass));
  color: var(--on-brass); border-color: var(--brass);
}
.btn-primary:hover, .btn-seal:hover {
  background: var(--brass-2); border-color: var(--brass-2); color: var(--on-brass);
  box-shadow: 0 14px 34px -14px rgba(192, 139, 75, .55);
}
.btn-brass { background: var(--brass); color: var(--on-brass); border-color: var(--brass); }
.btn-brass:hover { background: var(--brass-2); border-color: var(--brass-2); color: var(--on-brass); }
.btn-ghost { background: transparent; border-color: var(--gold-soft); color: var(--ink); }
.btn-ghost:hover { border-color: var(--gold); color: var(--gold); background: transparent; }
.light .btn-ghost:hover { border-color: var(--seal); color: var(--seal-deep); }
.btn-soft { background: transparent; border-color: var(--gold-soft); color: var(--gold); }
.btn-soft:hover { background: rgba(192, 139, 75, .1); border-color: var(--gold); color: var(--gold); }
.light .btn-soft { color: var(--seal-deep); border-color: rgba(138, 100, 40, .35); }
.light .btn-soft:hover { background: rgba(138, 100, 40, .07); border-color: var(--seal-deep); }
.btn-sm { padding: 9px 16px; font-size: .68rem; letter-spacing: .08em; }
.btn-lg { padding: 17px 34px; font-size: .78rem; }
.btn-block { width: 100%; }
.btn[disabled], .btn.is-disabled { opacity: .45; pointer-events: none; }

/* ============================================================
   THẺ
   ============================================================ */
.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 26px 24px; position: relative;
}
.card--flat { box-shadow: none; }
.card--pad-sm { padding: 16px 16px; }
.card h3 { margin-top: 0; }
.card-title { font-family: var(--sans); font-size: 1.14rem; font-weight: 600; line-height: 1.3; margin: 0 0 8px; color: var(--ink); }
.card-link {
  display: block; color: inherit; text-decoration: none; overflow: hidden;
  transition: transform .55s var(--ease-out), border-color .55s var(--ease-out), box-shadow .55s var(--ease-out);
}
.card-link::before {
  content: ""; position: absolute; top: 16px; right: 16px; width: 7px; height: 7px;
  border-radius: 50%; background: var(--seal); opacity: 0; transform: scale(.4);
  transition: all .5s var(--ease-out);
}
.card-link:hover {
  transform: translateY(-6px); border-color: var(--gold-soft);
  box-shadow: 0 26px 54px -26px rgba(0, 0, 0, .65); color: inherit;
}
.card-link:hover::before { opacity: 1; transform: scale(1); }
.light .card-link:hover { box-shadow: 0 26px 54px -30px rgba(20, 40, 58, .45); }

/* ============================================================
   NHÃN & CHIP
   ============================================================ */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 11px; border-radius: 2px;
  font-size: .66rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase;
  background: transparent; color: var(--ink-2); border: 1px solid var(--line-2);
}
.badge-green { color: var(--green); border-color: rgba(134, 169, 127, .45); background: var(--green-soft); }
.badge-amber { color: var(--amber); border-color: var(--gold-soft); background: var(--amber-soft); }
.badge-red   { color: var(--red);   border-color: rgba(192, 139, 75, .5); background: var(--red-soft); }
.badge-info  { color: var(--info);  border-color: rgba(140, 169, 190, .4); background: var(--info-soft); }
.badge-brass { color: var(--gold);  border-color: var(--gold-soft); background: var(--brass-soft); }
.light .badge-green { border-color: rgba(78, 122, 87, .4); }
.light .badge-info  { border-color: rgba(63, 96, 121, .35); }
.light .badge-red   { border-color: rgba(138, 100, 40, .35); }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  padding: 7px 15px; border-radius: 2px; border: 1px solid var(--line);
  background: transparent; font-size: .78rem; font-weight: 400; letter-spacing: .02em;
  cursor: pointer; color: var(--ink-2);
  transition: border-color .35s var(--ease-out), color .35s var(--ease-out), background .35s var(--ease-out);
}
.chip:hover { border-color: var(--gold); color: var(--gold); }
.light .chip:hover { border-color: var(--seal); color: var(--seal-deep); }
.chip.is-active { background: var(--brass); border-color: var(--brass); color: var(--on-brass); font-weight: 500; }
.chip.is-active:hover { color: var(--on-brass); }

/* ============================================================
   BIỂU MẪU
   ============================================================ */
.field { display: block; margin-bottom: 20px; }
.field > label, .label {
  display: block; margin-bottom: 8px;
  font-size: .66rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold);
}
.light .field > label, .light .label { color: var(--seal-deep); }
.input, .select, .textarea {
  width: 100%; padding: 11px 2px; border-radius: 0;
  border: 0; border-bottom: 1px solid var(--line-2);
  background: transparent; color: var(--ink);
  font-family: var(--sans); font-weight: 300; font-size: .97rem;
  transition: border-color .4s var(--ease-out);
}
.input::placeholder, .textarea::placeholder { color: var(--ink-3); }
.input:focus, .select:focus, .textarea:focus { outline: none; border-bottom-color: var(--gold); }
.light .input:focus, .light .select:focus, .light .textarea:focus { border-bottom-color: var(--seal); }
.select {
  cursor: pointer; appearance: none; -webkit-appearance: none; padding-right: 26px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23C08B4B' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 2px center;
}
.light .select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%238A6428' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
}
.select option { background: var(--lacquer-2); color: var(--ivory); }
.light .select option { background: #FCFAF4; color: var(--ink); }
.textarea { min-height: 120px; resize: vertical; line-height: 1.65; padding: 11px 2px; }
/* Ô soạn dài (dán toàn văn hợp đồng) cần thấy rõ vùng thả, nên dùng khung
   đủ bốn cạnh thay vì chỉ một gạch chân như các ô nhập ngắn. */
.textarea--code {
  font-family: var(--mono); font-size: .84rem; min-height: 260px;
  border: 1px solid var(--line); padding: 16px 18px; background: rgba(0, 0, 0, .16);
}
.textarea--code:focus { border-color: var(--gold); border-bottom-color: var(--gold); }
.light .textarea--code { background: rgba(255, 255, 255, .5); }
.check { display: flex; align-items: flex-start; gap: 10px; font-size: .92rem; padding: 5px 0; }
.check input { margin-top: 5px; flex: none; width: 15px; height: 15px; accent-color: var(--seal); }
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--ink);
  -webkit-box-shadow: 0 0 0 1000px var(--surface) inset;
  caret-color: var(--ink);
}

/* ============================================================
   BẢNG
   ============================================================ */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
table.tbl { width: 100%; border-collapse: collapse; font-size: .92rem; min-width: 520px; }
table.tbl th, table.tbl td {
  padding: 15px 18px; text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--line);
}
table.tbl thead th {
  background: transparent; color: var(--gold);
  font-family: var(--sans); font-weight: 500; font-size: .66rem;
  letter-spacing: .16em; text-transform: uppercase;
  border-bottom: 1px solid var(--line-2);
}
.light table.tbl thead th { color: var(--seal-deep); }
table.tbl tbody tr:last-child td { border-bottom: 0; }
table.tbl tbody tr { transition: background .35s var(--ease-out); }
table.tbl tbody tr:hover { background: rgba(192, 139, 75, .05); }
.light table.tbl tbody tr:hover { background: rgba(255, 255, 255, .55); }

/* ============================================================
   HERO
   ============================================================ */
/* Nền hero: lưới kẻ mảnh rất nhạt (như bản tham chiếu) + hai vầng sáng,
   một vàng đồng ở góc trên phải, một xanh thép ở góc dưới trái. */
.hero {
  position: relative; overflow: hidden;
  background:
    linear-gradient(rgba(126, 155, 178, .055) 1px, transparent 1px) 0 0 / 100% 64px,
    linear-gradient(90deg, rgba(126, 155, 178, .055) 1px, transparent 1px) 0 0 / 64px 100%,
    radial-gradient(1100px 700px at 84% 4%, rgba(192, 139, 75, .13), transparent 62%),
    radial-gradient(900px 640px at 4% 96%, rgba(126, 155, 178, .12), transparent 62%),
    var(--navy);
  border-bottom: 1px solid var(--gold-faint);
}
.hero-inner { padding: 84px 0 74px; display: grid; gap: 44px; align-items: center; }
@media (min-width: 940px) { .hero-inner { grid-template-columns: 1.12fr .88fr; padding: 116px 0 96px; } }
.hero h1 {
  font-family: var(--sans); font-weight: 700; color: var(--ivory);
  font-size: clamp(2.3rem, 1.4rem + 3.4vw, 3.7rem); line-height: 1.16;
  letter-spacing: -.032em; margin-bottom: .35em; max-width: 17ch;
}
.hero h1 .accent { font-weight: 700; color: var(--brass); }
.hero-lead { font-size: 1.05rem; color: var(--ivory-dim); max-width: 54ch; }
.hero .line { display: block; overflow: hidden; }
.hero .line-inner { display: block; transform: translateY(112%); animation: riseUp 1.1s var(--ease-out) forwards; }
.hero .line:nth-child(2) .line-inner { animation-delay: .14s; }
.hero .line:nth-child(3) .line-inner { animation-delay: .26s; }
@keyframes riseUp { to { transform: translateY(0) } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(22px) } to { opacity: 1; transform: none } }
.hero-fade { opacity: 0; animation: fadeUp 1.1s var(--ease-out) .5s forwards; }
.hero-fade--late { animation-delay: .72s; }

.hero-vertical {
  position: absolute; right: 34px; top: 50%; transform: translateY(-50%);
  writing-mode: vertical-rl;
  font-size: 10px; letter-spacing: .5em; text-transform: uppercase; color: var(--ivory-faint);
  display: flex; align-items: center; gap: 18px;
}
.hero-vertical::before { content: ""; width: 1px; height: 70px; background: var(--gold-soft); }
@media (max-width: 1180px) { .hero-vertical { display: none; } }

/* ---------- Con dấu đóng xuống ----------
   Đúng ý bản mẫu: con dấu phóng to, xoay nghiêng rồi "đóng" xuống trang.
   Mặc định là dấu THẬT (rõ nét); thêm .hero-seal--ghost khi chỉ muốn một
   vệt mờ làm nền. */
.hero-seal {
  position: absolute; top: 16px; right: 1%;
  width: clamp(128px, 12.5vw, 172px); height: auto; color: var(--brass);
  transform: scale(1.7) rotate(-16deg); opacity: 0;
  animation: stamp .8s var(--ease-stamp) .9s forwards;
  filter: drop-shadow(0 16px 36px rgba(20, 40, 58, .5));
  pointer-events: none; z-index: 2;
}
@keyframes stamp {
  0%   { transform: scale(1.7) rotate(-16deg); opacity: 0 }
  62%  { opacity: 1 }
  100% { transform: scale(1) rotate(-8deg); opacity: .92 }
}
.hero-seal--ghost { animation-name: stampGhost; z-index: 0; }
@keyframes stampGhost {
  0%   { transform: scale(1.7) rotate(-16deg); opacity: 0 }
  62%  { opacity: .55 }
  100% { transform: scale(1) rotate(-8deg); opacity: .16 }
}
/* Chừa chỗ cho con dấu ở góc trên bên phải của hero hai cột. */
@media (min-width: 940px) { .hero-panel--stamped { margin-top: 58px; } }
.seal-ring-text { font-family: var(--sans); font-size: 11.5px; letter-spacing: 2.6px; font-weight: 500; text-transform: uppercase; }
.seal-mono { font-family: var(--sans); font-weight: 700; }

.hero-panel {
  background: var(--lacquer-2); border: 1px solid var(--gold-faint);
  border-radius: var(--radius); padding: 28px 26px; position: relative; overflow: hidden;
  box-shadow: 0 42px 90px -44px rgba(0, 0, 0, .8);
}
.hero-panel::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--seal), var(--gold));
}

/* Dải số liệu */
.hero-stats {
  margin-top: 56px; padding-top: 38px; position: relative;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px;
}
.hero-stats::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, var(--gold-soft), transparent 78%);
}
.stat-num {
  font-family: var(--sans); font-weight: 700; color: var(--ivory);
  font-size: clamp(1.9rem, 1.3rem + 1.8vw, 2.8rem); line-height: 1; letter-spacing: -.03em;
}
.stat-num sup { font-size: .5em; color: var(--gold); top: -.55em; }

/* ============================================================
   Ô SỐ LIỆU
   ============================================================ */
.stat { background: transparent; border: 0; border-top: 1px solid var(--line); border-radius: 0; padding: 18px 0 4px; }
.stat-value {
  font-family: var(--sans); font-size: 1.95rem; font-weight: 700; line-height: 1.1; letter-spacing: -.03em;
  color: var(--ink);
}
.stat-label {
  font-size: .7rem; letter-spacing: .13em; text-transform: uppercase;
  color: var(--ink-3); margin-top: 8px;
}
.kpi-row { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }

/* ============================================================
   ĐÈN GIAO THÔNG · THANH TIẾN ĐỘ · DÒNG THỜI GIAN
   ============================================================ */
.tl { display: inline-flex; align-items: center; gap: 8px; font-size: .74rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; }
.tl-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.tl-green { color: var(--green); } .tl-green .tl-dot { background: var(--green); }
.tl-amber { color: var(--amber); } .tl-amber .tl-dot { background: var(--amber); }
.tl-red   { color: var(--red);   } .tl-red   .tl-dot { background: var(--red); animation: pulse 1.6s ease-in-out infinite; }
.tl-done  { color: var(--ink-3); } .tl-done  .tl-dot { background: var(--ink-3); }
@keyframes pulse { 0%, 100% { opacity: 1 } 50% { opacity: .4 } }

.bar { height: 3px; border-radius: 0; background: var(--line); overflow: hidden; }
.bar > i { display: block; height: 100%; background: var(--gold); transition: width .5s var(--ease-out); }
.bar.is-green > i { background: var(--green); }
.bar.is-amber > i { background: var(--amber); }
.bar.is-red   > i { background: var(--red); }

.timeline { list-style: none; margin: 0; padding: 0 0 0 28px; position: relative; }
.timeline::before { content: ""; position: absolute; left: 5px; top: 8px; bottom: 8px; width: 1px; background: var(--line-2); }
.timeline li { position: relative; padding: 0 0 22px; }
.timeline li::before {
  content: ""; position: absolute; left: -27px; top: 8px; width: 11px; height: 11px;
  border-radius: 50%; background: var(--surface); border: 1px solid var(--line-2);
}
.timeline li.is-done::before { background: var(--green); border-color: var(--green); }
.timeline li.is-current::before { background: var(--seal); border-color: var(--seal); box-shadow: 0 0 0 4px var(--seal-soft); }
.timeline-date { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.timeline-title { font-weight: 500; }

.checklist { list-style: none; margin: 0; padding: 0; }
.checklist li { display: flex; gap: 11px; align-items: flex-start; padding: 11px 0; border-bottom: 1px solid var(--line); }
.checklist li:last-child { border-bottom: 0; }
.checklist input { margin-top: 5px; width: 15px; height: 15px; accent-color: var(--jade); flex: none; }
.checklist .done { text-decoration: line-through; color: var(--ink-3); }

/* ============================================================
   WIDGET CHAT
   ============================================================ */
.chat-fab {
  position: fixed; right: 20px; bottom: 20px; z-index: 80;
  width: 56px; height: 56px; border-radius: 50%; cursor: pointer;
  background: var(--brass); border: 1px solid var(--gold-soft); color: var(--on-brass);
  font-size: 1.35rem; box-shadow: 0 18px 40px -14px rgba(192, 139, 75, .6);
  display: grid; place-items: center;
  transition: background .4s var(--ease-out), transform .4s var(--ease-out);
}
.chat-fab:hover { background: var(--brass-2); transform: translateY(-3px); }
.chat-panel {
  position: fixed; right: 20px; bottom: 88px; z-index: 80;
  width: min(384px, calc(100vw - 40px)); height: min(566px, calc(100dvh - 140px));
  background: var(--lacquer-2); border: 1px solid var(--gold-faint); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); display: none; flex-direction: column; overflow: hidden;
}
.chat-panel::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--seal), var(--gold)); z-index: 2;
}
.chat-panel.is-open { display: flex; }
.chat-head {
  padding: 15px 16px; border-bottom: 1px solid var(--gold-faint);
  background: var(--lacquer-3); display: flex; align-items: center; gap: 11px;
}
.chat-head strong { font-family: var(--sans); font-size: 1rem; font-weight: 600; color: var(--ivory); }
.chat-body { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 12px; background: var(--lacquer-2); }
.msg { max-width: 88%; padding: 12px 14px; border-radius: 2px; font-size: .9rem; line-height: 1.65; white-space: pre-wrap; }
.msg-bot { background: var(--lacquer-3); border: 1px solid var(--line); border-left: 2px solid var(--gold-soft); align-self: flex-start; color: var(--ivory); }
.msg-user { background: var(--brass); color: var(--on-brass); align-self: flex-end; }
.msg-cite { display: block; margin-top: 9px; padding-top: 9px; border-top: 1px solid var(--line); font-size: .76rem; color: var(--ink-3); }
.msg-cite a { color: var(--gold); }
.chat-foot { border-top: 1px solid var(--gold-faint); padding: 12px; display: flex; gap: 10px; background: var(--lacquer-3); }
.chat-foot input {
  flex: 1; padding: 9px 4px; border: 0; border-bottom: 1px solid var(--line-2);
  background: transparent; color: var(--ivory); font-weight: 300;
}
.chat-foot input:focus { outline: none; border-bottom-color: var(--gold); }
.chat-quick { display: flex; gap: 7px; flex-wrap: wrap; padding: 0 14px 12px; background: var(--lacquer-2); }
.chat-quick button {
  font-size: .68rem; letter-spacing: .06em; padding: 5px 11px; border-radius: 2px;
  border: 1px solid var(--line); background: transparent; cursor: pointer; color: var(--ink-2);
  transition: border-color .35s, color .35s;
}
.chat-quick button:hover { border-color: var(--gold); color: var(--gold); }
.typing span { display: inline-block; width: 5px; height: 5px; margin-right: 4px; border-radius: 50%; background: var(--gold); animation: blink 1.2s infinite; }
.typing span:nth-child(2) { animation-delay: .2s } .typing span:nth-child(3) { animation-delay: .4s }
@keyframes blink { 0%, 80%, 100% { opacity: .25 } 40% { opacity: 1 } }

/* ============================================================
   TAB
   ============================================================ */
.tabs { display: flex; gap: 30px; border-bottom: 1px solid var(--line); margin-bottom: 28px; overflow-x: auto; }
.tabs button {
  padding: 12px 0; border: 0; background: transparent; cursor: pointer; white-space: nowrap;
  font-size: .74rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-3); border-bottom: 1px solid transparent; margin-bottom: -1px;
  transition: color .35s var(--ease-out), border-color .35s var(--ease-out);
}
.tabs button:hover { color: var(--ink); }
.tabs button.is-active { color: var(--gold); border-bottom-color: var(--gold); }
.light .tabs button.is-active { color: var(--seal-deep); border-bottom-color: var(--seal); }
.tab-panel { display: none; }
.tab-panel.is-active { display: block; }

/* ============================================================
   BẢNG GIÁ
   ============================================================ */
.price-card { position: relative; display: flex; flex-direction: column; }
.price-card.is-featured { border-color: var(--gold-soft); box-shadow: 0 30px 70px -34px rgba(0, 0, 0, .8); }
.price-card.is-featured::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--seal), var(--gold));
}
.price-flag {
  position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
  background: var(--brass); color: var(--on-brass); font-size: .62rem; font-weight: 500;
  padding: 4px 14px; border-radius: 2px; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap;
}
.price-amount {
  font-family: var(--sans); font-size: 2.05rem; font-weight: 700;
  color: var(--ink); line-height: 1.25; letter-spacing: -.03em;
  display: flex; flex-wrap: wrap; align-items: baseline;
}
.price-amount .price-min,
.price-amount .price-max { white-space: nowrap; }
.price-amount .price-range-end { white-space: nowrap; }
.price-amount .price-dash {
  display: inline-block; width: 1.6em; text-align: center; font-weight: 400;
}
.price-amount .price-unit-inline { font-size: .54em; font-weight: 400; letter-spacing: .04em; color: var(--ink-3); }
.price-unit { font-size: .78rem; color: var(--ink-3); font-family: var(--sans); font-weight: 300; letter-spacing: .06em; }
.feature-list { list-style: none; margin: 18px 0; padding: 0; flex: 1; }
.feature-list li { padding: 8px 0 8px 24px; position: relative; font-size: .9rem; border-bottom: 1px solid var(--line); }
.feature-list li:last-child { border-bottom: 0; }
.feature-list li::before { content: "✦"; position: absolute; left: 0; top: 8px; color: var(--gold); font-size: .8em; }
.feature-list li.no { color: var(--ink-3); }
.feature-list li.no::before { content: "—"; color: var(--ink-3); }

/* ============================================================
   TRANG ĐỌC VĂN BẢN
   ============================================================ */
.doc-article {
  background: var(--surface); border: 1px solid var(--line); border-left: 2px solid var(--line-2);
  border-radius: var(--radius); padding: 22px 26px; margin-bottom: 16px;
  scroll-margin-top: calc(var(--header-h) + var(--sa-t, 0px) + 20px);
}
.doc-article h4 { font-size: 1.15rem; margin-bottom: 10px; color: var(--gold); }
.light .doc-article h4 { color: var(--seal-deep); }
.doc-article p { margin-bottom: .7em; }
.doc-article:target { border-left-color: var(--seal); background: var(--lacquer-3); }
.light .doc-article:target { background: #FFFDF7; }
.toc { position: sticky; top: calc(var(--header-h) + var(--sa-t, 0px) + 14px); }
.toc a {
  display: block; padding: 6px 12px; font-size: .84rem; color: var(--ink-2);
  text-decoration: none; border-left: 1px solid transparent;
}
.toc a:hover { border-left-color: var(--gold); color: var(--gold); background: rgba(192, 139, 75, .06); }

/* ---------- So sánh (diff) ---------- */
.diff { font-size: .93rem; line-height: 1.85; }
.diff ins { background: var(--green-soft); color: var(--green); text-decoration: none; padding: 1px 4px; font-weight: 500; }
.diff del { background: var(--red-soft); color: var(--red); padding: 1px 4px; }

/* ---------- Phát hiện rủi ro ---------- */
.finding {
  border: 1px solid var(--line); border-left: 3px solid var(--line-2);
  background: var(--surface); border-radius: 0 var(--radius) var(--radius) 0;
  padding: 18px 20px; margin-bottom: 14px;
}
.finding.sev-cao { border-left-color: var(--red); }
.finding.sev-trung { border-left-color: var(--gold); }
.finding.sev-thap { border-left-color: var(--info); }
.finding-head { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-bottom: 8px; }
.finding-quote {
  font-family: var(--mono); font-size: .8rem; background: rgba(0, 0, 0, .22);
  border-left: 1px solid var(--gold-soft); padding: 10px 12px; margin: 10px 0;
  white-space: pre-wrap; word-break: break-word; color: var(--ink-2);
}
.light .finding-quote { background: rgba(20, 40, 58, .05); }
.finding-fix { font-size: .88rem; background: var(--green-soft); border-left: 1px solid var(--green); padding: 11px 13px; }

/* ============================================================
   TRỐNG · ĐANG TẢI · THÔNG BÁO NỔI
   ============================================================ */
.empty { text-align: center; padding: 56px 20px; color: var(--ink-3); }
.empty-icon { font-size: 2.2rem; opacity: .4; margin-bottom: 10px; color: var(--gold); }
.spinner {
  display: inline-block; width: 15px; height: 15px; vertical-align: -3px;
  border: 1px solid var(--line-2); border-top-color: var(--gold); border-radius: 50%;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg) } }

.toast-host {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 120;
  display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none;
}
.toast {
  background: var(--lacquer-3); color: var(--ivory); border: 1px solid var(--gold-soft);
  padding: 12px 22px; border-radius: 2px; font-size: .8rem; letter-spacing: .06em;
  box-shadow: var(--shadow-lg); animation: rise .3s var(--ease-out);
}
@keyframes rise { from { opacity: 0; transform: translateY(12px) } }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  background: #0E1F2D; border-top: 1px solid var(--gold-faint);
  padding: 78px 0 40px; margin-top: 0; color: var(--ivory);
  position: relative;
}
.footer-grid { display: grid; gap: 44px; grid-template-columns: 1.5fr 1fr 1fr 1fr; margin-bottom: 56px; }
.site-footer .brand-seal { width: 48px; height: 48px; }
.footer-grid h4, .site-footer h5 {
  font-family: var(--sans); font-size: .64rem; font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase; color: var(--gold); margin-bottom: 20px;
}
.footer-grid ul { list-style: none; margin: 0; padding: 0; }
.footer-grid li { padding: 0 0 11px; }
.footer-grid a, .footer-grid .small, .footer-grid .muted { font-size: .87rem; color: var(--ivory-dim); }
.footer-grid a:hover { color: var(--gold); }
.footer-about { font-size: .87rem; color: var(--ivory-faint); max-width: 40ch; margin-top: 20px; line-height: 1.75; }
.footer-bottom {
  margin-top: 0; padding-top: 28px; border-top: 1px solid rgba(240, 245, 249, .08);
  display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  font-size: .76rem; color: var(--ivory-faint);
}

/* ============================================================
   TIỆN ÍCH
   ============================================================ */
.hidden { display: none !important; }
.nowrap { white-space: nowrap; }
.divider { height: 1px; background: var(--line); margin: 22px 0; }
.avatar {
  width: 34px; height: 34px; border-radius: 50%; flex: none;
  background: transparent; border: 1px solid var(--gold-soft); color: var(--gold);
  display: grid; place-items: center;
  font-family: var(--sans); font-weight: 700; font-size: .78rem;
}
.notice {
  border-left: 2px solid var(--gold); background: var(--brass-soft);
  padding: 14px 16px; border-radius: 0 var(--radius) var(--radius) 0; font-size: .89rem;
}
.notice-info { border-left-color: var(--info); background: var(--info-soft); }
.notice-red { border-left-color: var(--red); background: var(--red-soft); }
.list-plain { list-style: none; margin: 0; padding: 0; }
.item-row { display: flex; gap: 14px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.item-row:last-child { border-bottom: 0; }
.item-row .grow { flex: 1; min-width: 0; }
.item-controls { display: flex; gap: 12px; align-items: center; flex-wrap: nowrap; }
.item-price { min-width: 110px; text-align: right; font-weight: 600; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ============================================================
   THÀNH PHẦN THEO MẪU "DẤU SON"
   (trích dẫn, quy trình, đội ngũ, thương vụ, biểu mẫu liên hệ)
   ============================================================ */

/* ---------- Trích dẫn lớn ---------- */
.pullquote { border-left: 2px solid var(--seal); padding: 6px 0 6px 28px; margin: 34px 0 10px; }
.pullquote p { font-family: var(--sans); font-size: 1.28rem; font-weight: 500; line-height: 1.5; color: var(--ink); margin: 0; }
.quote-wrap { max-width: 880px; margin: 0 auto; text-align: center; position: relative; }
.quote-mark { width: 48px; height: 48px; color: var(--seal); margin: 0 auto 30px; opacity: .9; }
.quote-text { font-family: var(--sans); font-weight: 600; font-size: clamp(1.35rem, 1rem + 1.6vw, 2rem); line-height: 1.45; letter-spacing: -.022em; color: var(--ink); }
.quote-text .hl { color: var(--gold); }
.quote-cite { margin-top: 34px; font-size: .74rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3); }
.quote-cite strong { display: block; font-size: .8rem; color: var(--ink); letter-spacing: .14em; font-weight: 500; margin-bottom: 5px; }

/* ---------- Thẻ lĩnh vực ---------- */
.practice-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.practice-card {
  background: var(--lacquer-2); border: 1px solid rgba(192, 139, 75, .15); border-radius: 2px;
  padding: 40px 34px 36px; position: relative; overflow: hidden; text-decoration: none; display: block;
  transition: transform .55s var(--ease-out), border-color .55s, box-shadow .55s;
}
.light .practice-card { background: var(--surface); border-color: var(--line); }
.practice-card::before {
  content: ""; position: absolute; top: 22px; right: 22px; width: 8px; height: 8px; border-radius: 50%;
  background: var(--seal); opacity: 0; transform: scale(.4); transition: all .5s var(--ease-out);
}
.practice-card:hover { transform: translateY(-7px); border-color: var(--gold-soft); box-shadow: 0 26px 54px -26px rgba(0, 0, 0, .6); }
.practice-card:hover::before { opacity: 1; transform: scale(1); }
.practice-icon { width: 32px; height: 32px; color: var(--gold); margin-bottom: 24px; }
.practice-card h3 { font-family: var(--sans); font-size: 1.2rem; font-weight: 600; line-height: 1.25; margin-bottom: 12px; color: var(--ink); }
.practice-card p { font-size: .92rem; color: var(--ink-2); line-height: 1.7; margin-bottom: 0; }
.practice-more {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 20px;
  font-size: .68rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--gold);
  opacity: 0; transform: translateY(6px); transition: all .5s var(--ease-out); text-decoration: none;
}
.practice-card:hover .practice-more { opacity: 1; transform: none; }

/* ---------- Dòng thương vụ / hồ sơ ---------- */
.matters { border-top: 1px solid var(--line); }
.matter-row {
  display: grid; grid-template-columns: 90px 1fr auto; gap: 32px; align-items: center;
  padding: 30px 20px; border-bottom: 1px solid var(--line);
  position: relative; transition: background .45s var(--ease-out); text-decoration: none; color: inherit;
}
.matter-row::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--seal);
  transform: scaleY(0); transform-origin: top; transition: transform .5s var(--ease-out);
}
.matter-row:hover { background: rgba(192, 139, 75, .05); color: inherit; }
.light .matter-row:hover { background: rgba(255, 255, 255, .5); }
.matter-row:hover::before { transform: scaleY(1); }
.matter-year { font-family: var(--sans); font-size: 1.05rem; font-weight: 600; color: var(--gold); }
.light .matter-year { color: var(--seal-deep); }
.matter-title { font-size: 1.02rem; font-weight: 400; color: var(--ink); line-height: 1.5; }
.matter-tag { font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); margin-top: 7px; display: block; }
.matter-value { font-family: var(--sans); font-size: clamp(1.2rem, 1rem + .8vw, 1.6rem); font-weight: 700; color: var(--ink); text-align: right; white-space: nowrap; }
.matter-value span { display: block; font-family: var(--sans); font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); margin-top: 4px; }

/* ---------- Quy trình ---------- */
.process-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; position: relative; }
.process-grid::before {
  content: ""; position: absolute; top: 30px; left: 4%; right: 4%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-2) 12%, var(--line-2) 88%, transparent);
}
.step { padding: 0 28px 0 0; position: relative; }
.step-num {
  font-family: var(--sans); font-size: 2.7rem; font-weight: 700; line-height: 1; letter-spacing: -.04em;
  color: transparent; -webkit-text-stroke: 1px var(--seal); background: var(--lacquer);
  display: inline-block; padding-right: 16px; position: relative; z-index: 1;
}
.light .step-num { background: var(--eggshell); }
.step h3 { font-family: var(--sans); font-size: .82rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); margin: 20px 0 12px; }
.step p { font-size: .92rem; color: var(--ink-2); line-height: 1.7; }

/* ---------- Đội ngũ ---------- */
.team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.lawyer { position: relative; }
.lawyer-portrait {
  aspect-ratio: 3 / 3.8; border-radius: 2px; position: relative; overflow: hidden;
  background:
    radial-gradient(300px 220px at 30% 0%, rgba(192, 139, 75, .16), transparent 62%),
    linear-gradient(168deg, var(--lacquer-3), var(--lacquer-2) 58%, #102336);
  border: 1px solid rgba(192, 139, 75, .16);
  display: flex; align-items: center; justify-content: center;
  transition: border-color .5s, transform .55s var(--ease-out);
}
.lawyer:hover .lawyer-portrait { border-color: var(--gold-soft); transform: translateY(-6px); }
.lawyer-mono {
  font-family: var(--sans); font-weight: 700; font-size: clamp(3rem, 4.4vw, 4.4rem);
  color: transparent; -webkit-text-stroke: 1px var(--gold-soft);
  transition: color .6s var(--ease-out); letter-spacing: .02em;
}
.lawyer:hover .lawyer-mono { color: rgba(192, 139, 75, .16); }
.lawyer-portrait::after {
  content: ""; position: absolute; bottom: 16px; left: 22px; right: 22px; height: 1px;
  background: linear-gradient(90deg, var(--gold-soft), transparent);
}
.lawyer-info { padding: 20px 2px 0; }
.lawyer-name { font-family: var(--sans); font-size: 1.14rem; font-weight: 600; color: var(--ink); }
.lawyer-role { font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); margin-top: 6px; }
.light .lawyer-role { color: var(--seal-deep); }
.lawyer-cred { font-size: .82rem; color: var(--ink-3); margin-top: 10px; line-height: 1.6; }

/* ---------- Khối giá trị / nguyên tắc ---------- */
.about-aside { position: relative; padding: 46px 40px; background: var(--lacquer); color: var(--ivory); border-radius: 2px; overflow: hidden; }
.about-aside::after {
  content: ""; position: absolute; top: -46px; right: -46px; width: 190px; height: 190px;
  border-radius: 50%; border: 1px solid var(--gold-faint);
}
.about-aside h3 { font-family: var(--sans); font-size: 1.24rem; font-weight: 600; margin-bottom: 26px; color: var(--gold); }
.value-item { padding: 18px 0; border-bottom: 1px solid rgba(240, 245, 249, .09); }
.value-item:last-child { border-bottom: none; }
.value-item h4 { font-family: var(--sans); font-size: .8rem; font-weight: 500; letter-spacing: .07em; text-transform: uppercase; margin-bottom: 6px; color: var(--ivory); }
.value-item p { font-size: .87rem; color: var(--ivory-dim); line-height: 1.65; margin: 0; }

/* ---------- Thẻ biểu mẫu nổi (liên hệ / đăng nhập) ---------- */
.form-card {
  background: var(--lacquer); border: 1px solid var(--gold-faint); border-radius: 2px;
  padding: 46px 42px; position: relative; overflow: hidden; color: var(--ivory);
  box-shadow: 0 42px 90px -40px rgba(0, 0, 0, .8);
}
.form-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--seal), var(--gold)); }
.form-card h3 { font-family: var(--sans); font-size: 1.42rem; font-weight: 700; color: var(--ivory); margin-bottom: 8px; }
.form-card .form-sub { font-size: .88rem; color: var(--ivory-dim); margin-bottom: 30px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.form-note { display: flex; gap: 10px; align-items: flex-start; font-size: .78rem; color: var(--ivory-faint); margin: 6px 0 26px; line-height: 1.6; }
.form-note svg { flex: none; width: 15px; height: 15px; color: var(--gold); margin-top: 3px; }

/* ---------- Lưới hai cột kiểu bản mẫu ---------- */
.about-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 72px; align-items: start; }
.contact-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: 72px; align-items: start; }
.about-body p { color: var(--ink-2); font-size: 1rem; margin-bottom: 20px; }
.about-body strong { font-weight: 500; color: var(--ink); }
.matters-note { font-size: .82rem; color: var(--ink-3); margin-top: 24px; font-style: italic; }
@media (max-width: 900px) { .about-grid, .contact-grid { grid-template-columns: 1fr; gap: 48px; } }

/* ---------- Trạng thái gửi thành công ---------- */
.form-success { text-align: center; padding: 56px 10px; display: none; }
.form-success.is-on { display: block; }
.form-success .seal-ok { width: 72px; height: 72px; color: var(--seal); margin: 0 auto 24px; }
.form-success h4 { font-family: var(--sans); font-size: 1.34rem; font-weight: 700; color: var(--ivory); margin-bottom: 10px; }
.form-success p { font-size: .92rem; color: var(--ivory-dim); }

/* ---------- Văn phòng & dòng liên hệ ---------- */
.office { padding: 24px 0; border-bottom: 1px solid var(--line); }
.office h4 { font-family: var(--sans); font-size: 1.14rem; font-weight: 600; color: var(--ink); margin-bottom: 8px; }
.office p { font-size: .9rem; color: var(--ink-2); line-height: 1.75; margin: 0; }
.contact-line { display: flex; gap: 14px; align-items: baseline; margin-top: 26px; font-size: .95rem; color: var(--ink); }
.contact-line .k { font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); width: 92px; flex: none; }

/* ============================================================
   GÓI DỊCH VỤ · QUOTA · PAYWALL · PHÒNG PHÁP CHẾ SỐ
   ============================================================ */
.quota-bar { display: flex; align-items: center; gap: 11px; font-size: .74rem; letter-spacing: .06em; color: var(--ink-3); }
.quota-bar .track { flex: 1; height: 2px; background: var(--line); overflow: hidden; min-width: 80px; }
.quota-bar .track i { display: block; height: 100%; background: var(--gold); transition: width .4s var(--ease-out); }
.quota-bar.is-low .track i { background: var(--amber); }
.quota-bar.is-out .track i { background: var(--red); }

.paywall {
  border: 1px solid var(--gold-soft); border-radius: var(--radius); padding: 24px 20px; text-align: center;
  background: linear-gradient(180deg, transparent, rgba(192, 139, 75, .08));
}
.paywall h3 { font-family: var(--sans); font-size: 1.1rem; font-weight: 600; margin: 0 0 8px; }
.paywall p { font-size: .88rem; color: var(--ink-2); max-width: 52ch; margin: 0 auto 16px; }
.paywall .row { justify-content: center; }

.menu-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(224px, 1fr)); }
.menu-tile {
  position: relative; text-align: left; width: 100%; border: 1px solid var(--line);
  background: var(--surface); border-radius: var(--radius); padding: 20px 18px;
  cursor: pointer; font: inherit; color: inherit;
  transition: border-color .4s var(--ease-out), transform .4s var(--ease-out);
}
.menu-tile:hover { border-color: var(--gold-soft); transform: translateY(-2px); }
.menu-tile .t { font-family: var(--sans); font-size: 1rem; font-weight: 600; margin-bottom: 5px; }
.menu-tile .d { font-size: .8rem; color: var(--ink-3); }
.menu-tile .state { position: absolute; top: 14px; right: 14px; font-size: .7rem; }
.menu-tile.is-open { border-left: 2px solid var(--jade); }
.menu-tile.is-locked { border-left: 2px solid var(--line-2); background: transparent; }
.menu-tile.is-locked .t { color: var(--ink-2); }
.menu-tile.is-locked::after { content: "🔒"; position: absolute; top: 14px; right: 14px; opacity: .5; font-size: .8rem; }
.menu-tile.is-payg { border-left-color: var(--gold); }

.qr-box { display: grid; place-items: center; gap: 12px; padding: 22px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); }
.qr-code { width: 168px; height: 168px; background: var(--eggshell); padding: 8px; border: 1px solid var(--gold-soft); }
.qr-code svg { display: block; width: 100%; height: 100%; }

/* Bản xem trước văn bản: cố tình giữ nền giấy trắng cho giống bản in */
.docprev {
  background: #FCFAF4; color: #1F1A15; border: 1px solid var(--gold-soft); border-radius: var(--radius-sm);
  padding: 44px 54px; font-family: 'Times New Roman', Times, serif; font-size: 1.08rem; line-height: 1.7;
  min-height: 750px; max-height: 90dvh; overflow: auto;
}
.docprev p { margin: 0 0 8px; text-align: justify; }
.docprev h1 { font-size: 1.15rem; text-align: center; margin: 18px 0 14px; white-space: pre-line; color: #1F1A15; }
.docprev .c { text-align: center; } .docprev .b { font-weight: 700; }
.docprev .u { text-decoration: underline; } .docprev .i { font-style: italic; }
.docprev .tiny { font-size: .82rem; }
.docprev .fill { letter-spacing: 1px; color: #8A7F6E; }
.docprev table.sig { width: 100%; margin-top: 20px; border-collapse: collapse; }
.docprev table.sig td { width: 50%; vertical-align: top; }
.docprev .space { height: 46px; }

.play-row { display: flex; gap: 16px; align-items: flex-start; padding: 15px 0; border-bottom: 1px solid var(--line); }
.play-row:last-child { border-bottom: 0; }
.play-day {
  flex: none; width: 66px; text-align: center; font-size: .68rem; font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase; color: var(--gold);
  border: 1px solid var(--line-2); border-radius: 2px; padding: 7px 0;
}
.play-row.is-due .play-day { color: var(--amber); border-color: var(--gold-soft); }
.play-row.is-done .play-day { color: var(--green); border-color: rgba(134, 169, 127, .4); }

.tier-card { border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; background: var(--surface); }
.tier-card.is-active { border-color: var(--gold-soft); box-shadow: 0 20px 44px -28px rgba(0, 0, 0, .7); }
.tier-card .lvl { font-size: .64rem; text-transform: uppercase; letter-spacing: .16em; color: var(--gold); }

/* ============================================================
   RESPONSIVE TINH CHUẨN TOÀN BỘ DỰ ÁN & THIẾT BỊ (STRICT DESCENDING ORDER)
   ============================================================ */

/* ----- 1. 1440px+: Màn hình Desktop 2K/4K Retina, iMac, TV ----- */
@media (min-width: 1440px) {
  html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
  .site-header .wrap { width: min(1380px, 94%); }
}

/* ----- 2. 1281px - 1439px: MacBook Air 13", MacBook Pro 14", Surface Laptop ----- */
@media (max-width: 1439px) and (min-width: 1221px) {
  .site-header .wrap { width: 95%; }
  .nav { gap: 14px; }
  .nav a { font-size: .68rem; }
}

/* ----- 3. 1220px: Laptop nhỏ & Màn hình vừa ----- */
@media (max-width: 1220px) {
  .site-header .wrap { width: 95%; }
  .header-inner { gap: 12px; }
}

/* ----- 4. 1060px: iPad Pro ngang, Chromebook, Laptop 11"-13" ----- */
@media (max-width: 1060px) {
  .practice-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; }
  .team-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .process-grid { grid-template-columns: repeat(2, 1fr); row-gap: 40px; }
  .process-grid::before { display: none; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 36px; }
}

/* ----- 5. 900px: iPad Dọc, Galaxy Tab & Màn hình hẹp vừa ----- */
@media (max-width: 900px) {
  .section { padding: 60px 0; }
  .section--tight { padding: 32px 0; }
  .page-head { padding: 48px 0 32px; }
  .hero-inner { grid-template-columns: 1fr; gap: 32px; padding: 60px 0 48px; }
  .hero-stats { grid-template-columns: repeat(2, 1fr); gap: 24px 20px; margin-top: 40px; padding-top: 28px; }
  .hero-seal { top: auto; bottom: 2%; right: -20px; width: 160px; animation-name: stampGhost; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .matter-row { grid-template-columns: 1fr; gap: 8px; padding: 22px 12px; }
  .matter-value { text-align: left; margin-top: 4px; }
  .about-aside { padding: 32px 24px; }
  .about-grid, .contact-grid { grid-template-columns: 1fr; gap: 40px; }
  .docprev { padding: 30px 28px; min-height: auto; }
  .toc { position: static; margin-bottom: 24px; }
  .doc-article { padding: 16px 18px; }
  .doc-article h4 { font-size: 1.05rem; }
}

/* ----- 6. 768px: iPad Mini, Phablet & Màn hình ngang nhỏ ----- */
@media (max-width: 768px) {
  .wrap, .container { width: 100%; padding-inline: var(--pad-x); }
  .section-head { flex-direction: column; align-items: flex-start; gap: 12px; margin-bottom: 28px; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; gap: 16px; }
  .split, .split--right { grid-template-columns: 1fr; gap: 20px; }

  .page-head { padding: 42px 0 28px; }
  .page-head h1 { font-size: clamp(1.6rem, 1.2rem + 2vw, 2.4rem); }
  .paywall { padding: 18px 14px; }
  .paywall p { font-size: .84rem; }
  .stat-value { font-size: 1.6rem; }
  .stat-label { font-size: .64rem; }
  .notice { padding: 12px 14px; font-size: .84rem; }
  
  /* Tabs vuốt mượt cảm ứng */
  .tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 18px;
    padding-bottom: 2px;
  }
  .tabs::-webkit-scrollbar { display: none; }

  /* Bảng dữ liệu hỗ trợ cuộn mượt. Kiểu tràn hết lề CHỈ dành cho bảng
     nằm thẳng trong .wrap — bảng lồng trong thẻ .card mà tràn lề thì nó
     chọc ra ngoài viền thẻ (thấy rõ ở bang-gia.html khung 360px). */
  .table-wrap { -webkit-overflow-scrolling: touch; }
  .wrap > .table-wrap, .container > .table-wrap, .section > .wrap > .table-wrap {
    margin-inline: calc(-1 * var(--pad-x));
    width: calc(100% + var(--pad-x) * 2);
    border-radius: 0;
    border-left: 0; border-right: 0;
  }
  table.tbl th, table.tbl td { padding: 12px 14px; font-size: .86rem; }

  .footer-grid { grid-template-columns: 1fr; gap: 28px; margin-bottom: 36px; }
  .footer-bottom { flex-direction: column; gap: 12px; align-items: flex-start; }
}

/* ----- 7. 600px: Điện thoại thông minh chuẩn ----- */
@media (max-width: 600px) {
  .practice-grid { grid-template-columns: 1fr; }
  .team-grid { grid-template-columns: 1fr 1fr; gap: 14px; }
  .process-grid { grid-template-columns: 1fr; }
  .field-row { grid-template-columns: 1fr; gap: 0; }
  .form-card { padding: 28px 18px; }
  .card { padding: 20px 16px; }
  .btn { padding: 12px 20px; font-size: .72rem; min-height: 44px; }
  .btn-lg { padding: 14px 26px; }
  .hero h1 { font-size: clamp(1.8rem, 1.3rem + 2.8vw, 2.5rem); }
  .hero-lead { font-size: .95rem; }
  .stat-num { font-size: 1.8rem; }
  .kpi-row { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  
  .lawyer-portrait { aspect-ratio: 3 / 3.2; }
  .lawyer-name { font-size: 1.02rem; }

  .docprev { padding: 20px 14px; font-size: .92rem; line-height: 1.6; }
  .docprev table.sig { margin-top: 16px; }
  .docprev table.sig td { display: block; width: 100%; margin-bottom: 18px; }

  .price-card { padding: 24px 18px; }
  .price-amount { font-size: 1.75rem; }
  .feature-list li { font-size: .84rem; padding-left: 20px; }
  .qr-box { padding: 16px 12px; }
  .qr-code { width: 140px; height: 140px; }

  /* Giỏ hàng: chuyển sang bố cục xếp chồng trên màn hẹp */
  .item-row {
    gap: 8px 12px;
  }
  .item-row .grow {
    flex: 1 1 100%;
  }
  .item-controls {
    flex: 1 1 100%;
    justify-content: space-between;
  }
  .item-price {
    min-width: 0;
    flex: 1;
    text-align: right;
  }

  .office h4 { font-size: 1.05rem; }
  .contact-line { flex-direction: column; gap: 4px; align-items: flex-start; }
  .contact-line .k { width: auto; }
}

/* ----- 8. 480px: Điện thoại phablet tiêu chuẩn ----- */
@media (max-width: 480px) {
  :root { --pad-x: 14px; }
  .site-header .wrap { width: 100%; padding-inline: 12px; }
  .brand-seal, .brand-mark { width: 34px; height: 34px; }
  .brand-name { font-size: 1.02rem; }
  .brand-sub { display: none; }
  .header-actions { gap: 6px; }

  .hero-stats { grid-template-columns: repeat(2, 1fr); gap: 16px 12px; }
  .stat-num { font-size: 1.5rem; }
  .stat-label { font-size: .62rem; letter-spacing: .08em; }

  .hero-seal { display: none; }

  /* Khung trợ lý AI dùng chung khối “tấm trượt toàn màn hình ≤600px” ở cuối tệp. */

  .team-grid { grid-template-columns: 1fr; }
  .kpi-row { grid-template-columns: 1fr; }
  .quote-text { font-size: 1.18rem; }
  .pullquote { padding-left: 16px; margin: 22px 0 10px; }
  .pullquote p { font-size: 1.05rem; }
}

/* ----- 9. 430px (Khung hình 430 * 873: iPhone 14/15/16 Pro Max) ----- */
@media (max-width: 430px) {
  :root { --pad-x: 14px; }
  .header-actions { gap: 5px; }
  .btn-sm { padding: 8px 12px; font-size: .66rem; }
  .menu-toggle { width: 36px; height: 36px; }
  .hero h1 { font-size: 2.15rem; }
  .hero-panel { padding: 22px 18px; }
  .stat-num { font-size: 1.55rem; }
  .form-card { padding: 24px 16px; }
  .btn { padding: 12px 18px; font-size: .72rem; }
}

/* ----- 10. 412px (Khung hình 412 * 891: Samsung Galaxy S Plus / Pixel Pro) ----- */
@media (max-width: 412px) {
  :root { --pad-x: 13px; }
  .header-actions { gap: 4px; }
  .btn-sm { padding: 7px 10px; font-size: .64rem; }
  .menu-toggle { width: 34px; height: 34px; font-size: .9rem; }
  .hero h1 { font-size: 2.05rem; }
  .stat-num { font-size: 1.48rem; }
  .form-card { padding: 22px 15px; }
  .card { padding: 18px 14px; }
  .btn-lg { padding: 13px 22px; font-size: .74rem; }
}

/* ----- 11. 390px (Khung hình 390 * 797: iPhone 12/13/14/15/16 Pro & Standard) ----- */
@media (max-width: 390px) {
  :root { --pad-x: 12px; }
  /* Đặt qua --header-h chứ KHÔNG khoá height: mọi mốc dính (thanh tab
     trợ lý AI, .toc, scroll-padding) đều tính từ biến này. Khoá height
     mà quên biến thì thanh tab tụt xuống đè lên nội dung. */
  :root { --header-h: 64px; }
  .site-header .wrap { padding-inline: 10px; }
  .header-inner { gap: 8px; }
  .header-actions { gap: 4px; }
  .btn-sm { padding: 7px 9px; font-size: .62rem; }
  .menu-toggle { width: 34px; height: 34px; font-size: .9rem; }
  .brand-name { font-size: .98rem; }
  .brand-seal, .brand-mark { width: 30px; height: 30px; }
  .hero h1 { font-size: 1.95rem; }
  .hero-lead { font-size: .92rem; }
  .stat-num { font-size: 1.4rem; }
  .stat-label { font-size: .6rem; }
  .lawyer-name { font-size: .98rem; }
  .btn { padding: 11px 16px; font-size: .7rem; }
  .form-card { padding: 20px 14px; }
  .chat-panel { right: 4px; bottom: 64px; width: calc(100vw - 8px); height: calc(100dvh - 84px); }
}

/* ----- 12. 360px (Khung hình 360 * 776: Samsung Galaxy S / Android phổ thông) ----- */
@media (max-width: 360px) {
  :root { --pad-x: 10px; }
  :root { --header-h: 60px; }
  .header-inner { gap: 8px; }
  .brand-name { font-size: .92rem; }
  .brand-seal, .brand-mark { width: 28px; height: 28px; }
  .btn-sm { padding: 6px 9px; font-size: .62rem; }
  .btn { padding: 10px 14px; font-size: .66rem; min-height: 40px; }
  .hero h1 { font-size: 1.7rem; }
  .hero-lead { font-size: .88rem; }
  .hero-stats { grid-template-columns: repeat(2, 1fr); gap: 12px 8px; }
  .stat-num { font-size: 1.3rem; }
  .form-card { padding: 18px 12px; }
  .card { padding: 14px 10px; }
  .docprev { padding: 14px 10px; font-size: .88rem; }
}

/* ============================================================
   CHE QUYỀN — thẻ mang data-quyen / data-vai-tro
   ------------------------------------------------------------
   Quy tắc này nằm trong tệp CSS được nạp ở <head> của MỌI trang, còn
   assets/js/auth.js thì nạp ở cuối <body>. Đặt ở đây nghĩa là thẻ bị
   ẩn ngay từ lượt vẽ ĐẦU TIÊN — không có khoảnh khắc nào nút quản trị
   loé lên rồi biến mất trước mắt tài khoản Khách hàng.

   FAIL-CLOSED: mặc định là ẩn. Lớp 'quyen-ok' do Auth.apDungQuyen()
   gắn vào sau khi đã đối chiếu vai trò. JS hỏng, JS bị tắt, hay
   /api/auth/me trả lỗi — cả ba đều dẫn tới ẨN.

   Đây là lớp GIAO DIỆN. Chốt thật nằm ở QUYEN_ENDPOINT trong
   server/server.js.
   ============================================================ */
[data-quyen]:not(.quyen-ok),
[data-vai-tro]:not(.quyen-ok) { display: none !important; }

@media print {
  .site-header, .site-footer, .chat-fab, .chat-panel, .chat-backdrop, .btn, .hero-seal { display: none !important; }
  body { background: #fff; color: #111; }
  .card, .table-wrap { border-color: #ccc; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-delay: 0s !important;
    animation-iteration-count: 1 !important; transition-duration: .01ms !important;
  }
  html { scroll-behavior: auto; }
  .js-reveal [data-reveal] { opacity: 1; transform: none; }
  .hero .line-inner { transform: none; }
  .hero-fade { opacity: 1; }
  .hero-seal { opacity: .92; transform: rotate(-8deg); }
  .hero-seal--ghost { opacity: .16; }
}


/* ============================================================
   HIỆU CHỈNH THEO KHUNG HÌNH THIẾT BỊ THẬT
   iOS (iPhone/iPad) · Android · Laptop Windows · MacBook / iMac

   Khối này nằm CUỐI tệp nên là lớp chốt hạ: mọi luật ở đây thắng các
   khối phía trên khi cùng độ đặc hiệu. Ba nhóm vấn đề được xử lý:
     A. Vùng an toàn iOS (tai thỏ, Dynamic Island, thanh Home).
     B. Thói quen riêng của trình duyệt cảm ứng (tự phóng to ô nhập,
        hover dính, vùng chạm quá nhỏ).
     C. Điện thoại xoay ngang.
     D. Màn rộng — MacBook Pro 16", iMac, Studio Display.
     E. Laptop màn thấp (1366x768, MacBook Air 13").
     F. Màn siêu hẹp — máy gập, Android 320px.
     G. Chống tràn ngang.
   ============================================================ */

/* ------------------------------------------------------------
   A. VÙNG AN TOÀN — iPhone X trở lên, Android có lỗ khoét
   Chỉ có tác dụng khi thẻ viewport khai báo viewport-fit=cover; cả 32
   trang đã được bổ sung. Trên máy màn hình vuông vức, mọi giá trị trả
   về 0px nên không đổi gì so với trước.
   ------------------------------------------------------------ */
:root {
  --sa-t: env(safe-area-inset-top, 0px);
  --sa-r: env(safe-area-inset-right, 0px);
  --sa-b: env(safe-area-inset-bottom, 0px);
  --sa-l: env(safe-area-inset-left, 0px);
}
html { scroll-padding-top: calc(var(--header-h) + var(--sa-t) + 18px); }

/* Thanh trên cùng chui xuống dưới thanh trạng thái khi chạy dạng ứng
   dụng toàn màn hình — chừa đúng phần khuyết ra. */
.site-header { padding-top: var(--sa-t); }

/* Chân trang và các phần tử neo đáy phải tránh thanh Home. */
.site-footer { padding-bottom: calc(40px + var(--sa-b)); }
/* Dùng margin chứ KHÔNG ghi đè right/bottom: các bậc màn hẹp phía trên
   đã tinh chỉnh right/bottom riêng cho từng khung hình, ghi đè ở đây sẽ
   xoá mất. Margin cộng dồn vào vị trí sẵn có nên hợp ở mọi bậc. */
.chat-fab { margin-right: var(--sa-r); margin-bottom: var(--sa-b); }
.chat-panel { margin-bottom: var(--sa-b); }

/* Ngăn kéo điều hướng: tự cuộn được, không đẩy cuộn sang trang nền,
   và chừa thanh Home ở đáy. */
.mobile-nav {
  max-height: calc(100dvh - var(--header-h) - var(--sa-t));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding-bottom: calc(20px + var(--sa-b));
}

/* Xoay ngang: lỗ khoét nằm ở cạnh trái/phải, nuốt mất chữ đầu dòng. */
@media (orientation: landscape) and (max-width: 940px) {
  .wrap, .container {
    padding-left: max(16px, var(--sa-l));
    padding-right: max(16px, var(--sa-r));
  }
  /* Ngăn kéo menu nằm NGOÀI .wrap nên phải chừa lỗ khoét riêng. */
  .mobile-nav a {
    padding-left: max(min(4vw, 32px), var(--sa-l));
    padding-right: max(min(4vw, 32px), var(--sa-r));
  }
}

/* ------------------------------------------------------------
   B. NỀN TẢNG CẢM ỨNG
   ------------------------------------------------------------ */

/* Chuỗi dài không có dấu cách (URL, mã hồ sơ, email) là thủ phạm số một
   gây tràn ngang trên màn hẹp. */
body { overflow-wrap: break-word; }
.table-wrap, pre, code { overflow-wrap: normal; }

@media (pointer: coarse) {
  /* Bỏ vệt xám khi chạm và độ trễ 300ms của trình duyệt di động. */
  a, button, .btn, .icon-btn, .menu-toggle, .tab, .mobile-tab-btn {
    -webkit-tap-highlight-color: rgba(192, 139, 75, .18);
    touch-action: manipulation;
  }
}

/* iOS Safari TỰ PHÓNG TO cả trang khi chạm vào ô nhập có cỡ chữ dưới
   16px. Ô nhập của dự án đang là .97rem (~15.5px) nên trang bị giật và
   lệch mỗi lần gõ. Ép đúng 16px trên thiết bị cảm ứng là cách duy nhất
   chặn được mà không phải khoá zoom — khoá zoom hỏng khả năng tiếp cận. */
@media (pointer: coarse) and (max-width: 1024px) {
  .input, .select, .textarea,
  input[type="text"], input[type="email"], input[type="password"],
  input[type="search"], input[type="tel"], input[type="url"],
  input[type="number"], input[type="date"], input[type="time"],
  input[type="datetime-local"], select, textarea {
    font-size: 16px;
  }
  .textarea--code { font-size: 16px; line-height: 1.55; }
  .searchbox input { font-size: 16px; }
}

/* Vùng chạm tối thiểu 44x44 (Apple HIG) — cũng đạt 48dp của Material.
   Các bậc màn hẹp phía trên từng thu nút xuống 34px; trả lại tại đây. */
@media (pointer: coarse) {
  .menu-toggle { min-width: 44px; min-height: 44px; }
  .btn, .btn-sm { min-height: 44px; }
  .nav a, .mobile-nav a { min-height: 44px; display: flex; align-items: center; }
  .icon-btn { min-width: 40px; min-height: 40px; }
  .check input { width: 20px; height: 20px; margin-top: 3px; }
}

/* Máy cảm ứng không có con trỏ: hiệu ứng hover bị dính lại sau khi
   chạm, trông như nút bị kẹt. Vô hiệu phần dịch chuyển. */
@media (hover: none) {
  .btn:hover, .card:hover, .chat-fab:hover,
  .price-card:hover, .practice-card:hover, .menu-tile:hover {
    transform: none;
  }
}

/* Vùng cuộn con không kéo theo trang nền. */
.chat-body, .ai-pane-body, .table-wrap, .search-results, .acct-menu {
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* ------------------------------------------------------------
   C. ĐIỆN THOẠI XOAY NGANG
   iPhone 15 Pro Max nằm ngang chỉ còn 430px chiều cao; header 72px cộng
   hero 84px chiếm gần hết màn. Nén lại theo chiều đứng.
   ------------------------------------------------------------ */
@media (orientation: landscape) and (max-height: 500px) {
  :root { --header-h: 52px; }
  .site-header .wrap { padding-inline: max(12px, var(--sa-l)) max(12px, var(--sa-r)); }
  .brand-sub { display: none; }
  .brand-seal, .brand-mark { width: 30px; height: 30px; }

  .section { padding: 36px 0; }
  .section--tight { padding: 22px 0; }
  .page-head { padding: 26px 0 18px; }
  .hero-inner { padding: 32px 0 28px; gap: 22px; }
  .hero h1 { font-size: clamp(1.5rem, 1rem + 3vw, 2.1rem); }
  .hero-lead { font-size: .9rem; }
  .hero-stats { grid-template-columns: repeat(4, 1fr); margin-top: 22px; padding-top: 18px; }
  .hero-seal, .hero-vertical { display: none; }

  /* Bàn phím ảo khi xoay ngang chiếm quá nửa màn — khung chat phải bám sát. */
  .chat-panel {
    right: max(8px, var(--sa-r)); bottom: calc(8px + var(--sa-b));
    width: min(420px, calc(100% - 16px));
    height: calc(100dvh - 16px - var(--sa-b));
    max-height: none;
  }
  .chat-fab { width: 44px; height: 44px; font-size: 1.05rem; }
  .mobile-nav { max-height: calc(100dvh - 52px); }
}

/* ------------------------------------------------------------
   D. MÀN RỘNG — MacBook Pro 16", iMac 24", Studio Display
   Bề ngang nội dung đang khoá ở 1200px. Trên màn 1728px trở lên, lề hai
   bên rộng tới 260px mỗi bên, trang trông như bị thu nhỏ. Nới có chừng
   mực, vẫn giữ nhịp đọc của bản thiết kế.
   ------------------------------------------------------------ */
@media (min-width: 1600px) {
  :root { --maxw: 1320px; }
  .site-header .wrap { width: min(1480px, 94%); }
  .hero-inner { padding: 128px 0 104px; }
}
@media (min-width: 1920px) {
  :root { --maxw: 1400px; }
  .site-header .wrap { width: min(1560px, 92%); }
}
/* iMac 27"/5K và màn 4K: chặn trần để dòng chữ không vượt quá khoảng 75
   ký tự — quá ngưỡng đó mắt bị lạc dòng khi xuống hàng. */
@media (min-width: 2400px) {
  :root { --maxw: 1480px; }
  .site-header .wrap { width: min(1640px, 88%); }
}

/* ------------------------------------------------------------
   E. LAPTOP MÀN THẤP (đặt sau khối màn rộng có chủ ý:
      cửa sổ vừa rộng vừa thấp — 1920x800 chẳng hạn — phải theo
      ràng buộc chiều cao, nên luật này phải nằm sau để thắng)
   Dòng 1366x768 (laptop Windows phổ thông) và MacBook Air 13" 1440x900
   chỉ còn khoảng 640-780px chiều cao sau khi trừ thanh trình duyệt.
   Hero 116px trên và 96px dưới ăn hết màn đầu tiên.
   ------------------------------------------------------------ */
@media (min-width: 1025px) and (max-height: 820px) {
  .hero-inner { padding: 64px 0 56px; gap: 34px; }
  .hero h1 { font-size: clamp(2rem, 1.2rem + 2.4vw, 2.9rem); }
  .hero-panel--stamped { margin-top: 34px; }
  .hero-seal { width: clamp(112px, 10vw, 140px); }
  .section { padding: 68px 0; }
  .section--tight { padding: 36px 0; }
  .page-head { padding: 52px 0 34px; }
  .toc { max-height: calc(100dvh - var(--header-h) - 40px); overflow-y: auto; }
}

/* Laptop rất thấp: 1280x720, hoặc cửa sổ chia đôi màn theo chiều ngang. */
@media (min-width: 1025px) and (max-height: 700px) {
  .hero-inner { padding: 48px 0 42px; }
  .section { padding: 54px 0; }
}

/* Màn Retina/HiDPI: nét chữ mảnh của bộ chữ này cần khử răng cưa xám. */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
}

/* ------------------------------------------------------------
   F. MÀN SIÊU HẸP — Galaxy Z Fold màn ngoài (344x882), iPhone SE đời
   đầu (320x568), Android giá rẻ 320px.
   ------------------------------------------------------------ */
@media (max-width: 344px) {
  :root { --header-h: 56px; }
  :root { --pad-x: 8px; }
  .header-inner { gap: 6px; }
  .brand-name { font-size: .86rem; }
  .brand-seal, .brand-mark { width: 26px; height: 26px; }
  .btn-sm { padding: 6px 8px; font-size: .58rem; }
  .btn { padding: 10px 12px; font-size: .64rem; }
  .hero h1 { font-size: 1.55rem; }
  .hero-stats { grid-template-columns: 1fr 1fr; gap: 10px 6px; }
  .stat-num { font-size: 1.2rem; }
  .stat-label { font-size: .56rem; letter-spacing: .06em; }
  .card, .form-card { padding: 14px 10px; }
  .price-amount { font-size: 1.5rem; }
  table.tbl { min-width: 460px; }
  .chat-panel { right: 0; left: 0; width: 100%; border-radius: 0; }
}

/* ------------------------------------------------------------
   G. CHỐNG TRÀN NGANG — luật chốt
   Một phần tử duy nhất rộng quá màn là đủ làm cả trang trượt ngang trên
   điện thoại. Ba thủ phạm quen mặt: bảng, ảnh và khối mã.
   ------------------------------------------------------------ */
@media (max-width: 768px) {
  img, svg, video, iframe, canvas { max-width: 100%; height: auto; }
  pre, .turn-content pre { max-width: 100%; overflow-x: auto; }
  .table-wrap { max-width: 100%; }
}

/* ------------------------------------------------------------
   H. CHẶN Ô LƯỚI PHÌNH TO VÌ NỘI DUNG RỘNG
   Ô của grid/flex mặc định có min-width: auto, nghĩa là không bao giờ
   hẹp hơn nội dung bên trong. Một bảng đặt min-width: 520px nằm trong
   thẻ .card sẽ kéo cả thẻ rộng 510px trên màn 360px — thẻ chọc ra ngoài
   màn, chỉ là bị body { overflow-x: hidden } che đi nên không thấy thanh
   cuộn, mà nội dung thì mất thật. Đặt lại min-width: 0 để ô lưới co được
   và phần rộng dư nằm trong vùng cuộn của chính .table-wrap.
   ------------------------------------------------------------ */
.grid > *, .grid-2 > *, .grid-3 > *, .grid-4 > *,
.split > *, .split--right > *,
.practice-grid > *, .team-grid > *, .process-grid > *,
.footer-grid > *, .kpi-row > *, .about-grid > *, .contact-grid > * {
  min-width: 0;
}
.table-wrap { max-width: 100%; }
.card > .table-wrap, .tier-card > .table-wrap, .form-card > .table-wrap {
  margin-inline: 0; width: 100%;
}


/* ============================================================
   CHUYỂN TRANG MƯỢT (View Transitions)
   ------------------------------------------------------------
   Trang này là site nhiều tệp HTML: mỗi lần bấm liên kết là một lần tải
   trang mới nên mặc định màn hình "giật" trắng một nhịp. Hai lớp xử lý:

   1. Trình duyệt có View Transitions liên trang (Chrome/Edge/Safari mới):
      @view-transition dưới đây bật hiệu ứng ở tầng trình duyệt — trang cũ
      mờ đi, trang mới trôi lên. Thanh đầu trang và nút chat được đặt tên
      riêng nên đứng yên tuyệt đối, không nhấp nháy theo phần thân.
   2. Trình duyệt chưa hỗ trợ (Firefox…): khối @supports chỉ làm mờ dần
      thân trang — kết hợp với lớp .pt-leaving do ui.js gắn lên <html> khi
      bấm liên kết, ta vẫn có một nhịp mờ ra rồi mờ vào.

   Ai đã tắt hiệu ứng chuyển động trong hệ điều hành thì khối
   prefers-reduced-motion ở cuối trả trang về đổi thẳng như cũ.
   ============================================================ */

@view-transition { navigation: auto; }

@keyframes pt-fade-out { to   { opacity: 0; } }
@keyframes pt-fade-in  { from { opacity: 0; } }
@keyframes pt-rise-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* Thân trang: cũ mờ nhanh, mới trôi lên chậm hơn một nhịp. */
::view-transition-old(root) { animation: pt-fade-out .18s var(--ease-out) both; }
::view-transition-new(root) { animation: pt-rise-in  .34s var(--ease-out) both; }

/* Khung cố định: giữ nguyên tại chỗ giữa hai trang. */
.site-header { view-transition-name: pt-header; }
.chat-fab    { view-transition-name: pt-fab; }

/* Header hai trang gần như giống hệt nhau — đổi thẳng, không cross-fade,
   nếu không sẽ thấy chữ chồng bóng trong lúc chuyển. */
::view-transition-old(pt-header) { animation: none; opacity: 0; }
::view-transition-new(pt-header) { animation: none; opacity: 1; }

/* Nút chat vắng mặt ở vài trang (tro-ly-ai) nên cho mờ ra / mờ vào. */
::view-transition-old(pt-fab) { animation: pt-fade-out .2s var(--ease-out) both; }
::view-transition-new(pt-fab) { animation: pt-fade-in  .2s var(--ease-out) both; }

/* ---- Dự phòng cho trình duyệt chưa có View Transitions ----
   Chỉ đổi opacity, tuyệt đối không dùng transform trên <body>: transform sẽ
   biến body thành khối chứa của mọi thành phần position:fixed (nút chat,
   khung chat) khiến chúng nhảy chỗ trong lúc chạy hiệu ứng. */
@supports not (view-transition-name: none) {
  body { animation: pt-fade-in .32s var(--ease-out) both; }
  html.pt-leaving body { animation: pt-fade-out .2s var(--ease-out) both; }
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
  body, html.pt-leaving body { animation: none !important; }
}


/* ============================================================
   TRỢ LÝ AI TRÊN ĐIỆN THOẠI — HỘP THOẠI TRƯỢT TỪ ĐÁY
   ------------------------------------------------------------
   Trên máy tính khung chat là một ô nổi ở góc phải. Bê nguyên ô đó xuống
   điện thoại thì hỏng: hộp nhỏ lọt thỏm giữa màn hình còn chừa viền thừa
   hai bên, nút ↺ ✕ bé hơn đầu ngón tay, ô nhập chữ dưới 16px khiến iOS tự
   phóng to cả trang khi bấm vào, và dải chip câu hỏi nhanh xuống dòng ăn
   mất hai hàng màn hình.

   Nhưng đây vẫn chỉ là MỘT HỘP THOẠI, không phải một trang: dưới 600px
   (và chỉ khi màn còn đủ cao — xoay ngang đã có khối C lo) khung chat trượt
   lên từ đáy, cao nhiều nhất 78% màn hình và luôn chừa một dải trang nền
   nhìn thấy được ở phía trên. Nền sau được phủ lớp mờ .chat-backdrop; chạm
   vào đó là đóng, đúng thói quen của mọi hộp thoại trên điện thoại.

   ui.js gắn .chat-open lên <html> khi mở để khoá cuộn trang nền và đặt
   aria-expanded lên nút nổi để CSS giấu nút đi.

   Lề vùng an toàn vẫn do khối A phía trên cộng bằng margin — ở đây không
   ghi đè margin, chỉ trừ đúng phần đó ra khỏi chiều cao.
   ============================================================ */

.chat-icon-btn {
  display: grid; place-items: center;
  min-width: 34px; min-height: 34px; padding: 0; flex: none;
  font-size: .95rem; line-height: 1;
}

/* Lớp phủ chỉ tồn tại ở bậc điện thoại. Trên máy tính khung chat là ô nổi
   cạnh nội dung, người dùng vẫn đọc và thao tác với trang — phủ mờ ở đó là
   sai. */
.chat-backdrop {
  display: none;
  position: fixed; inset: 0; z-index: 79;
  background: rgba(9, 18, 27, .55);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}

@media (max-width: 600px) and (min-height: 520px) {
  .chat-fab {
    right: 14px; bottom: 14px;
    width: 54px; height: 54px; font-size: 1.3rem;
    box-shadow: 0 12px 28px -10px rgba(192, 139, 75, .65);
  }
  /* Hộp thoại đang mở thì nút nổi nằm khuất dưới nó — giấu hẳn đi cho sạch. */
  .chat-fab[aria-expanded="true"] {
    opacity: 0; transform: scale(.7); pointer-events: none;
  }

  .chat-backdrop:not([hidden]) { display: block; animation: chat-fade-in .2s var(--ease-out) both; }

  .chat-panel {
    inset: auto 0 0 0;
    width: 100%;
    /* Cao vừa phải và luôn chừa ít nhất 72px trang nền phía trên: người dùng
       nhìn thấy mình vẫn đang ở trang cũ, chỉ là có hộp thoại mở lên. */
    height: min(78dvh, 620px);
    max-height: calc(100dvh - 72px - var(--sa-b));
    border: 0; border-top: 1px solid var(--gold-faint);
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -18px 44px -18px rgba(0, 0, 0, .55);
  }
  .chat-panel.is-open { animation: chat-sheet-up .26s var(--ease-out) both; }
  /* Bo góc trên nên vệt gradient ở mép cũng phải bo theo, không thì thò ra
     hai bên thành hai chấm vuông. */
  .chat-panel::before { border-radius: 18px 18px 0 0; }

  /* Thanh vuốt nhỏ — dấu hiệu quen thuộc "đây là hộp thoại kéo lên từ đáy". */
  .chat-head {
    position: relative;
    padding: 18px 12px 12px;
    gap: 10px;
  }
  .chat-head::before {
    content: ""; position: absolute; top: 7px; left: 50%; transform: translateX(-50%);
    width: 38px; height: 4px; border-radius: 2px; background: var(--line-2);
  }
  .chat-head strong { font-size: .95rem; }
  .chat-head .tiny { font-size: .68rem; }

  .chat-body { padding: 14px 12px; gap: 10px; }
  .msg { max-width: 92%; font-size: .92rem; padding: 11px 13px; }

  /* Chip gợi ý chạy ngang một hàng thay vì xuống dòng ăn mất nửa hộp thoại. */
  .chat-quick {
    flex-wrap: nowrap; overflow-x: auto; padding: 0 12px 10px;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .chat-quick::-webkit-scrollbar { display: none; }
  .chat-quick button { flex: none; white-space: nowrap; padding: 7px 12px; }

  .chat-foot { padding: 10px 12px; gap: 8px; align-items: center; }
  /* 16px là ngưỡng iOS Safari ngừng tự phóng to trang khi ô nhập nhận con
     trỏ. Nhỏ hơn một chút thôi là cả trang bị zoom rồi kẹt luôn ở đó. */
  .chat-foot input { font-size: 16px; padding: 10px 4px; }
  .chat-foot .btn { flex: none; min-height: 40px; }

  /* Khoá cuộn trang nền: vuốt trong hộp thoại không kéo trang phía sau. */
  html.chat-open, html.chat-open body { overflow: hidden; }
}

@keyframes chat-sheet-up {
  from { transform: translateY(24px); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
@keyframes chat-fade-in { from { opacity: 0; } to { opacity: 1; } }