/* ══════════════════════════════════════════════════════════════════════════
   _unify.css — LỚP ĐỒNG NHẤT STYLE THEO TRANG CHỦ  (bản 3, 22/09/2026)

   ★ THỨ TỰ NẠP — ĐỌC TRƯỚC KHI SỬA
     File này phải là LINK CSS NỘI BỘ CUỐI CÙNG của mỗi màn:
        _common.css → (_screens.css | _admin.css | _ebms.css | _tam-*.css) → _unify.css
     Ngoại lệ DUY NHẤT là index.html: ở đó nó nằm TRƯỚC _home.css, vì
     Trang chủ là BẢN GỐC — lớp này chép theo nó chứ không được đè lên nó.

     Bản trước (22/09 sáng) nạp file này ở vị trí thứ HAI, ngay sau _common.css.
     Hậu quả: gần như mọi luật ở đây đều THUA _screens.css / _admin.css nạp sau,
     nên nhìn bề ngoài "đã có lớp đồng nhất" mà màn hình không đổi gì. Đúng cái
     bẫy CLAUDE.md §8 đã ghi: *chèn luật mới phía trên luật gốc thì luật gốc đè
     ngược lại*. Hai lỗi người dùng báo 22/09 đều từ đó mà ra:
       ① "header các page khác đang bị lỗi hết rồi" — _screens.css có
          `.nav--dark .nav-menu a{color:#fff}` mà _shell.js gắn `nav--dark` cho MỌI
          màn, nên liên kết menu trắng nằm trên nền sáng: đo được 1.08:1.
       ② "Event … Text trắng, background xanh nhạt ko nhìn thấy gì cả" — nền
          .head-sub đã kéo sang sáng được (nhờ !important) nhưng MÀU CHỮ thì
          không, nên tiêu đề trắng nằm trên nền kem: 1.16:1.
     Nay file nạp cuối nên KHÔNG CÒN CẦN !important. Chỗ nào còn dùng thì có
     ghi lý do ngay tại chỗ.

   Bảng màu (đã khai ở _common.css §2): lục bảo #1F8F4A · lục đậm #15653D ·
   lục rừng #0C3B26 · chanh #8FE04A · hổ phách #E9A81C · bạc hà #EFF9E9.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 0 · TOKEN RIÊNG CỦA LỚP NÀY ────────────────────────────────────────
   --green-btn: mặt ĐẶC màu lục có CHỮ TRẮNG đè lên (nút chính, viên VI/EN
   đang chọn, mục menu đang mở). Vì sao không dùng thẳng #1F8F4A: đo ra
   4.13:1 với chữ trắng — KHÔNG đạt AA cho chữ thường (cần 4.5). #1A8245 đo
   được 4.86:1, tối hơn đúng một nấc nên nhìn vẫn là lục bảo của Trang chủ.
   #1F8F4A GIỮ NGUYÊN cho mảng trang trí, viền, gạch chân — chỗ không có chữ
   trắng đè lên thì tỉ lệ đó không áp dụng. */
:root{
  --green-btn:#1A8245;        /* mặt đặc có chữ trắng · 4.86:1 */
  --green-btn-hover:#146237;     /* khi rê chuột          · 7.68:1 */
}

/* ── 1 · NỀN TRANG ──────────────────────────────────────────────────────── */
body{background:#F7FBF2}

/* ── 2 · NÚT — ba hình thức khác nhau rõ ràng ───────────────────────────
   Trang chủ đã chốt: nút CHÍNH nền đặc, nút PHỤ trắng có viền, và TIÊU ĐIỂM
   là vòng hổ phách (khác hẳn hai cái trên, không thể nhầm là nút).          */
.btn{border-radius:12px;font-weight:600;transition:background-color .18s ease,
  border-color .18s ease,color .18s ease}
.btn--gold,.btn--main{background:var(--green-btn);color:#FFFFFF;border:1.5px solid var(--green-btn);box-shadow:none}
.btn--gold:hover,.btn--main:hover{background:var(--green-btn-hover);border-color:var(--green-btn-hover);color:#FFFFFF;box-shadow:none}
.btn--outline-white,.btn--sub,.btn--border{background:#FFFFFF;color:#0F4D31;border:1.5px solid #9FC7AC}
.btn--outline-white:hover,.btn--sub:hover,.btn--border:hover{background:#F1F9EC;border-color:#1F8F4A;color:#0C3B26}
.btn--danger,.btn--del{background:#FFFFFF;color:#B42318;border:1.5px solid #F3C4B6}
.btn--danger:hover,.btn--del:hover{background:#B42318;color:#FFFFFF;border-color:#B42318}

/* ── 3 · TIÊU ĐIỂM BÀN PHÍM — vòng hổ phách, lệch 3px ─────────────────── */
:focus-visible{outline:3px solid #E9A81C;outline-offset:3px}
.btn:focus-visible,a:focus-visible,button:focus-visible{outline:3px solid #E9A81C;outline-offset:3px}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #E9A81C;outline-offset:2px}

/* ══ 4 · THANH ĐIỀU HƯỚNG ══════════════════════════════════════════════
   Chép NGUYÊN hình thức thanh của Trang chủ (_home.css khối cuối), vì
   CLAUDE.md §4 bắt "thanh điều hướng MỌI màn phải y hệt trang chủ".

   Phải viết ĐỦ CẤP để thắng ba luật của _screens.css:
     .nav--dark{background:var(--v6-night)}        → mảng lục gần đen
     .nav--dark .nav-menu a{color:#fff}           → chữ trắng
     .nav--vacant.dh--dac{background:var(--v6-night)}
   _shell.js gắn `nav--dark` cho MỌI thanh, nên ba luật đó ăn khắp site.      */
.nav,.nav--dark{background:rgba(255,255,255,.72);border-bottom:1px solid rgba(12,59,38,.10);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
/* 08/10: người dùng — "header bị lệch, cách top không đều". Trang chủ có
   `.v6 .nav{padding-block:12px}` (_home.css vòng 21) mà các màn khác không,
   nên logo/menu ở đó cách đỉnh 24px, ở đây 12px. Lấy trang chủ làm chuẩn.
   Đổi đệm này thì đổi theo: `.nav ~ .head-sub` (_screens.css, đang 88/84px)
   và các cột `position:sticky` top 108/112px trong _screens.css. */
.nav,.nav--dark{padding-block:12px}
.nav,.nav a,.nav b,.nav--dark,.nav--dark a,.nav--dark b{color:#0C3B26}
.nav.has-bubble,.nav--dark.has-bubble,.nav--vacant.nav--solid{background:rgba(255,255,255,.90);
  border-bottom:1px solid rgba(12,59,38,.12);
  box-shadow:0 8px 28px -20px rgba(8,40,26,.34)}
/* Màn CÓ dải đầu (.head-sub): thanh trong suốt đè lên dải, y Trang chủ — nếu
   để nền trắng mờ thì hiện một đường nối ngang giữa thanh và dải. */
.app:has(>.head-sub) .nav:not(.has-bubble),
.app:has(>.head-sub) .nav--dark:not(.has-bubble){background:transparent;border-bottom-color:transparent}

.nav-menu{display:flex;align-items:center;gap:4px;padding:5px;border-radius:999px;
  background:rgba(255,255,255,.62);border:1px solid rgba(12,59,38,.08);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.nav-menu a,.nav--dark .nav-menu a{position:relative;display:inline-flex;align-items:center;
  height:36px;padding:0 16px;border-radius:999px;font-size:15px;font-weight:600;color:#25412F;
  transition:background-color .22s ease,color .22s ease,transform .22s ease}
.nav-menu a:hover,.nav--dark .nav-menu a:hover{background:#FFFFFF;color:#15653D;transform:translateY(-1px)}
.nav-menu a[aria-current],.nav-menu a.active,
.nav--dark .nav-menu a[aria-current],.nav--dark .nav-menu a.active{
  background:var(--green-btn);color:#FFFFFF;font-weight:700;
  box-shadow:0 8px 18px -10px rgba(26,130,69,.85)}
/* Trang chủ bỏ hẳn gạch chân khi mục đang mở đã là viên đặc — hai dấu hiệu
   chồng nhau đọc ra rối. */
.nav-menu a[aria-current]::after,.nav-menu a.active::after{display:none}

.nav-btn{display:flex;align-items:center;gap:10px;margin-left:18px;padding-left:18px;
  border-left:1px solid rgba(12,59,38,.14);max-width:100%}
/* ⚠ KHÔNG khai `display` ở đây. `.btn` đã là inline-flex sẵn (_common.css §nút),
   nên khai lại chỉ thừa — mà lại đúng bằng đặc trưng với `.nav .hide-mobile{display:none}`
   (luật ẩn trên điện thoại, _common.css). File này nạp SAU nên nó thắng, và nút
   "Đăng nhập" + cụm VI/EN KHÔNG còn ẩn được ở khổ hẹp: ở 390 thanh điều hướng
   Trang chủ dài 437px, nút "Menu" bị cắt mất — trên điện thoại là mất sạch lối
   đi, mà phần lớn thành viên đọc trên điện thoại. */
.nav .btn--outline-white,.nav .btn--gold{
  height:40px;padding:0 20px;border-radius:12px;font-size:14.5px;font-weight:700;line-height:1;white-space:nowrap}
.nav .btn--gold{background:var(--green-btn);color:#FFFFFF;border:1.5px solid var(--green-btn);
  box-shadow:0 10px 22px -12px rgba(26,130,69,.70)}
.nav .btn--gold:hover{background:var(--green-btn-hover);border-color:var(--green-btn-hover);color:#FFFFFF}
.nav .btn--outline-white{background:#FFFFFF;color:#0F4D31;border:1.5px solid #9FC7AC}
.nav .btn--outline-white:hover{background:#F1F9EC;border-color:#1F8F4A;color:#0C3B26}
.nav .team{display:inline-flex;align-items:center;gap:2px;height:40px;padding:0 4px;
  border-radius:999px;background:#FFFFFF;border:1px solid rgba(12,59,38,.12)}
.nav .team button{display:inline-flex;align-items:center;justify-content:center;height:28px;
  min-width:38px;padding:0 10px;border:0;border-radius:999px;background:transparent;
  color:#3C5648;font-size:13px;font-weight:700;line-height:1}
.nav .team button:hover{background:#F1F9EC;color:#15653D}
.nav .team button[aria-pressed="true"]{background:var(--green-btn);color:#FFFFFF}
.nav .acct{background:#FFFFFF;border:1px solid rgba(12,59,38,.14);color:#0C3B26}
.nav .brand span,.nav .brand b{color:#0C3B26;font-weight:700}
/* Ngăn trượt trên điện thoại: cùng mặt sáng, không còn mảng lục gần đen. */
.drawer-menu,.nav-drawer{background:#FFFFFF;color:#0C3B26}
.drawer-menu a,.nav-drawer a{color:#25412F}

/* ── 5 · THẺ, KHỐI, BẢNG — bo góc và bóng mềm như Trang chủ ─────────────── */
.card,.block,.box,.fld-page,.adm-box,.adm-card,.adm-block{border-radius:16px}
.card,.box,.adm-box,.adm-card{border:1px solid rgba(12,59,38,.10);
  box-shadow:0 6px 20px -14px rgba(8,40,26,.28)}
.card:hover,.adm-card:hover{box-shadow:0 18px 40px -22px rgba(8,40,26,.38)}

/* ── 6 · NHÃN / VIÊN CHỮ — một hệ bạc hà ────────────────────────────────── */
.label,.chip,.card-label,.adm-label{background:#EFF9E9;color:#15653D;
  border:1px solid rgba(31,143,74,.16);border-radius:999px;font-weight:600}
.label--ok,.adm-label--ok{background:#E4F6EB;color:#1B7A46}
.label--warn,.adm-label--warn{background:#FDF2DC;color:#8A5A05}
.label--err,.adm-label--err,.adm-label--danger{background:#FFE7DE;color:#B42318}

/* ── 7 · Ô NHẬP ─────────────────────────────────────────────────────────── */
input,select,textarea{border-radius:12px}
input:not([type="checkbox"]):not([type="radio"]),select,textarea{
  border:1.5px solid #CFE3D6;background:#FFFFFF}
input:focus,select:focus,textarea:focus{border-color:#1F8F4A}

/* ── 8 · TIÊU ĐỀ MÀN — gạch chân chuyển sắc như tiêu đề khối Trang chủ ─── */
.head-screen h1::after,.adm-head h1::after{content:"";display:block;width:56px;height:4px;
  margin-top:10px;border-radius:99px;background:linear-gradient(90deg,#1F8F4A,#8FE04A)}

/* ══ 9 · DẢI ĐẦU MÀN TRONG (.head-sub) — NỀN SÁNG, MỰC ĐẬM, GỌN LẠI ══════
   Ba việc cùng lúc:

   ① NỀN sáng như hero Trang chủ (trước là mảng lục gần đen).
   ② MỰC đậm. Bản trước chỉ đổi được nền nên chữ trắng nằm trên nền kem —
      đây đúng là lỗi người dùng chụp lại ở màn Sự kiện. Mọi màu chữ trong
      dải phải khai lại ở đây, kể cả .kicker và .hint (chúng lấy --dark-text).
   ③ THẤP LẠI. Người dùng 22/09: "Theme bên Event cũng cho nhỏ hơn, cân đối
      với các màn hình, layout". Đo trước khi sửa: dải cao 327–536px tuỳ màn
      (Đặt chỗ 536, Sự kiện 445). Cắt đệm và cỡ tiêu đề xuống còn ~230–330px
      để dải là một BĂNG GIỚI THIỆU, không phải một màn riêng.
      Giữ nguyên cách co giãn bằng clamp/cqi — không khoá cứng theo nấc.   */
.head-sub,.signin-left,.reg{
  background:
    radial-gradient(58% 60% at 84% 16%,rgba(31,143,74,.22) 0%,transparent 68%),
    radial-gradient(44% 48% at 6% 86%,rgba(233,168,28,.18) 0%,transparent 70%),
    radial-gradient(38% 42% at 46% 100%,rgba(47,169,224,.14) 0%,transparent 72%),
    linear-gradient(168deg,#DFF2CF 0%,#EFF9E5 48%,#F7FCF3 100%);
  color:#0B2016}
/* Đệm trên đã cộng sẵn chiều cao thanh điều hướng qua --dp-height-nav (_screens.css);
   giữ đúng phép cộng đó, chỉ hạ hằng số. */
.head-sub{padding-block:calc(var(--dp-height-nav) + clamp(14px,1.7vw,26px)) clamp(18px,2vw,32px)}
.head-sub h1,.signin-left h1,.reg h1,.head-sub h2,.head-sub b,.head-sub strong{color:#0B2016}
.head-sub h1{margin-top:10px;font-size:clamp(22px,2.05cqi,33px)}
.head-sub p,.signin-left p,.reg p,.head-sub label,.head-sub small,.head-sub li,.head-sub .hint{color:#33513F}
.head-sub .hint{margin-top:8px;font-size:15.5px;line-height:1.6;max-width:62ch}
.head-sub .kicker,.signin-left .kicker,.reg .kicker{padding:5px 13px 5px 10px;font-size:11.5px;
  background:#FFFFFF;color:#15653D;border:1px solid rgba(31,143,74,.22);
  -webkit-backdrop-filter:none;backdrop-filter:none}
.head-sub .kicker i{background:#1F8F4A;box-shadow:0 0 0 3px rgba(31,143,74,.20)}
.head-sub a:not(.btn),.signin-left a:not(.btn){color:#15653D}
/* Đường kẻ chân dải: bản cũ pha hồng sen (--v6-fuchsia) của theme chàm. */
.head-sub::after{background:linear-gradient(90deg,transparent 0%,#1F8F4A 35%,#E9A81C 72%,transparent 100%);
  opacity:.55}
/* Viên lối tắt (Khu vực…) trên dải: trắng, mực lục, viền mảnh. */
.head-sub .dir-quick a,.head-sub .dir-quick button,.head-sub .border-filter,.head-sub .quick a{
  background:#FFFFFF;color:#15653D;border:1px solid #9FC7AC}
.head-sub .dir-quick a:hover,.head-sub .quick a:hover{background:#F1F9EC;border-color:#1F8F4A}
/* .head-sub .border span — hàng "thông số" dưới tiêu đề, trước là chữ sáng. */
.head-sub .border span{background:rgba(255,255,255,.76);color:#25412F;border:1px solid rgba(12,59,38,.12)}
.head-sub .border .ic{color:#15653D}
/* ── 9B · CHÒM QUỸ ĐẠO Ở DẢI ĐẦU MÀN — ĐỔI MÀU, KHÔNG HẠ ĐỘ MỜ ─────────
   Lượt trước tôi chữa bằng cách hạ độ mờ (.dp-bg .45 · .dp-star .25). SAI
   HƯỚNG: cả chòm vẽ bằng mực TRẮNG cho nền tối (vòng
   `rgba(255,255,255,.16)`, đốm chạy `#fff`, hạt sáng `#fff`) — trắng nằm
   trên nền sáng thì để độ mờ bao nhiêu cũng mất hút, hạ xuống chỉ làm nó
   nhạt thêm. Người dùng 23/09: "hiệu ứng animation chỗ này quá nhạt".

   Cách đúng: trả độ mờ về 1 và ĐỔI MỰC sang lục bảo / hổ phách — cùng dải
   nhấn với chân trang và gạch dưới tiêu đề khối. Dùng token có sẵn ở §2,
   không đặt mã màu mới.                                                    */
.head-sub .dp-bg,.signin-left .dp-bg,.reg .dp-bg{opacity:1}
/* Hạt sáng: chấm trắng → chấm lục, một chấm hổ phách cho đỡ đều đều. */
.head-sub .dp-star,.signin-left .dp-star,.reg .dp-star{opacity:.9;
  background-image:
    radial-gradient(1.5px 1.5px at 7% 22%,rgba(31,143,74,.55) 50%,transparent 51%),
    radial-gradient(1px 1px at 18% 70%,rgba(31,143,74,.45) 50%,transparent 51%),
    radial-gradient(1.5px 1.5px at 31% 14%,rgba(31,143,74,.50) 50%,transparent 51%),
    radial-gradient(1px 1px at 42% 86%,rgba(31,143,74,.40) 50%,transparent 51%),
    radial-gradient(1.5px 1.5px at 51% 34%,rgba(31,143,74,.50) 50%,transparent 51%),
    radial-gradient(1px 1px at 58% 10%,rgba(31,143,74,.40) 50%,transparent 51%),
    radial-gradient(2.5px 2.5px at 64% 78%,rgba(233,168,28,.75) 50%,transparent 51%),
    radial-gradient(1px 1px at 88% 12%,rgba(31,143,74,.45) 50%,transparent 51%),
    radial-gradient(1.5px 1.5px at 94% 84%,rgba(31,143,74,.50) 50%,transparent 51%),
    radial-gradient(1px 1px at 97% 40%,rgba(31,143,74,.40) 50%,transparent 51%)}
/* Quầng nhoè sau chòm: hổ phách ấm, đủ thấy mà không loá (§5). */
.head-sub .dp-halo,.signin-left .dp-halo,.reg .dp-halo{background:#E9A81C;opacity:.20}
/* Vòng quỹ đạo: nét lục thay nét trắng. */
.head-sub .dp-ring,.signin-left .dp-ring,.reg .dp-ring{border-color:rgba(31,143,74,.34)}
.head-sub .dp-ring--3,.signin-left .dp-ring--3,.reg .dp-ring--3{border-color:rgba(31,143,74,.22)}
/* Vệt sáng kéo sau đốm — vòng 1 lục, vòng 2 hổ phách. */
.head-sub .dp-ring::before,.signin-left .dp-ring::before,.reg .dp-ring::before{
  background:conic-gradient(from 0deg,transparent 0 68%,#1F8F4A 100%)}
.head-sub .dp-ring--2::before,.signin-left .dp-ring--2::before,.reg .dp-ring--2::before{
  background:conic-gradient(from 0deg,#E9A81C 0%,transparent 30% 100%)}
/* Đốm chạy: trắng → đặc màu, to hơn một nấc cho thấy rõ chuyển động. */
.head-sub .dp-ring i,.signin-left .dp-ring i,.reg .dp-ring i{
  width:10px;height:10px;top:-5px;margin-left:-5px;background:#1F8F4A;
  box-shadow:0 0 0 3px rgba(31,143,74,.18)}
.head-sub .dp-ring--2 i,.signin-left .dp-ring--2 i,.reg .dp-ring--2 i{
  width:12px;height:12px;top:-6px;margin-left:-6px;background:#E9A81C;
  box-shadow:0 0 0 3px rgba(233,168,28,.22)}
/* Tâm chòm: giữ quả cầu lục, thêm vành trắng mảnh cho tách khỏi nền sáng. */
.head-sub .dp-core,.signin-left .dp-core,.reg .dp-core{
  box-shadow:0 0 44px rgba(31,143,74,.34),inset 0 0 0 1px rgba(255,255,255,.55)}
.head-sub .decor,.signin-left .decor{opacity:.85}

/* ══ 10 · TRANG QUẢN TRỊ ═══════════════════════════════════════════════
   Thanh bên (.adm-side) GIỮ NỀN TỐI — đó là khung ứng dụng, đúng lối
   CLAUDE.md §2B ("khối mô phỏng giao diện giữ nền tối") và cũng là điểm neo
   giúp phân biệt tầng quản trị với tầng công khai. Chỉ chỉnh chữ phụ trong
   thanh: hai cỡ 11–12px đo được 2.75:1, dưới AA. Nâng lên mực sáng hơn.  */
.adm-app{background:#F7FBF2}
.adm-app .adm-body{background:transparent}
.adm-side .adm-group,.adm-side-logo small{color:#CFE6B4}      /* 11–12px · 4.71:1 trên đáy thanh */
.adm-side .adm-role{color:#EAF5D8}
.adm-app .adm-table-scroll{border-color:rgba(12,59,38,.12);border-radius:16px}
.adm-app .adm-table-scroll .adm-table th{background:#EFF9E9;color:#15653D}
.adm-app .adm-table-scroll .adm-table td{border-color:rgba(12,59,38,.10)}
.adm-app .adm-table tbody tr:hover td{background:#FBFDF8}
.adm-app .adm-btn{border-radius:11px}
.adm-app .adm-btn--green,.adm-app .adm-btn--deep{background:var(--green-btn);color:#FFFFFF;border:1.5px solid var(--green-btn)}
.adm-app .adm-btn--green:hover,.adm-app .adm-btn--deep:hover{background:var(--green-btn-hover);border-color:var(--green-btn-hover)}
.adm-app .adm-btn--border{background:#FFFFFF;border:1.5px solid #9FC7AC;color:#0F4D31}
.adm-app .adm-btn--border:hover{background:#F1F9EC;border-color:#1F8F4A;color:#0C3B26}
.adm-app .adm-btn--danger{background:#FFFFFF;border:1.5px solid #F3C4B6;color:#B42318}
.adm-app .adm-btn--danger:hover{background:#B42318;border-color:#B42318;color:#FFFFFF}
.adm-app .adm-btn--text{color:#15653D}
.adm-app .adm-card{border-radius:16px;border:1px solid rgba(12,59,38,.10);
  box-shadow:0 6px 20px -14px rgba(8,40,26,.26)}
.adm-app .adm-fld,.adm-app .adm-fld-search input,.adm-app input,.adm-app select,.adm-app textarea{border-radius:11px}
.adm-app :focus-visible{outline:3px solid #E9A81C;outline-offset:3px}
.adm-app .adm-bar-save{background:rgba(255,255,255,.94);border-top:1px solid rgba(12,59,38,.12);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
/* Màn quản trị không có .head-sub nên thanh trên cùng của nó là mặt sáng. */
.adm-app .adm-stick{background:rgba(255,255,255,.92);border-bottom:1px solid rgba(12,59,38,.10)}

/* ── 11 · HỘP THOẠI — mặt trắng, mực đậm (Trang chủ đã chốt) ─────────────
   Khai lại token ngay trên hộp: hộp được chèn vào giữa các khối có --white
   bị đổi nghĩa, nếu không khai lại thì thân hộp ra màu mực.                 */
.dialog,.dialog *{--white:#FFFFFF;--ink:#0B2016;--gray:#3C5648;
  --green:#15653D;--green-sub:#1F8F4A;--green-deep:#0C3B26;--cream:#F1F9EC;--border:#DCE9D6}
.dialog{background:rgba(6,24,15,.58)}
.dialog .body-dlg{background:#FFFFFF;border-radius:20px;
  box-shadow:0 44px 96px -28px rgba(3,18,10,.62)}
.dialog h2{color:#0B2016}
.dialog .dlg-line{background:#F1F9EC;color:#0B2016}
.dialog .dlg-line:hover{background:#DCE9D6}

/* ── 12 · CHÂN TRANG — gọn, cùng họ lục bảo (khớp Trang chủ) ─────────────── */
.foot{position:relative;background:#0C3B26;padding-block:26px 12px}
.foot::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,#1F8F4A,#8FE04A 52%,#E9A81C)}
.foot-top{padding-bottom:16px;gap:clamp(18px,2.6cqi,32px)}
.foot a{color:#D9EBDF}
.foot a:hover{color:#FFFFFF}
.foot-col h4,.foot-col h2{color:#8FE04A;font-size:12.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;margin-bottom:10px}
.foot-col ul{display:flex;flex-direction:column;gap:6px}
.foot-col li{line-height:1.25}
.foot-col a{font-size:14.5px}
.foot p{color:#C6DCCD}
.col-head p{font-size:14px;line-height:1.5;margin-block:8px 12px;max-width:34ch}
.foot-social{gap:8px}
.foot-social-link{padding:6px 13px;border-radius:999px;border:1px solid rgba(217,235,223,.28);font-size:13.5px}
.foot-social-link:hover{background:rgba(255,255,255,.10)}
.foot-bottom{margin-top:12px;padding-top:12px;border-top:1px solid rgba(217,235,223,.16);font-size:12.5px}
.foot-bottom p,.foot-legal a{color:#B9D2C1}
.foot-legal ul{gap:16px}

/* ── 13 · TRUNG TÍNH VỀ CÙNG HỌ LỤC-XÁM NHƯ TRANG CHỦ ───────────────────
   --gray / --gray-pale / --border-field / --neutral / --neutral-bg vẫn là họ xám-lam của bản
   cũ nên các màn trong lệch nhiệt độ màu so với Trang chủ (viên "Sắp diễn ra"
   ra tím nhạt, viền ô chọn ra xanh lam cạnh ô đã đổi sang lục-xám).          */
:root{
  --gray:#3C5648; --gray-pale:#5A7466; --border-field:#9FC7AC;
  --neutral:#3C5648; --neutral-bg:#EFF9E9;
}

/* ── 14 · HAI LỖI DO LỚP ĐỒNG NHẤT (22/09) ─────────────────────────────
   ① Từ 860→1023px hiện CẢ thanh ngang lẫn nút "Menu": luật ẩn nút Menu nằm
      trong @container app của _common.css, còn §4 lại bật .nav-menu vô điều
      kiện. Khai lại cặp ẩn/hiện theo ĐÚNG ngưỡng 1023px, không kèm .v6
      (lớp .v6 chỉ có ở Trang chủ nên các màn trong không bao giờ nhận).
   ② Cụm nút bên phải tràn khỏi khung: bỏ vạch chỉ + lề khi dưới 1200px và
      cho cụm co lại được.                                                  */
@container app (min-width:1024px){
  .nav .open-menu{display:none!important}
  .nav-menu{display:flex!important}
}
@container app (max-width:1023px){
  .nav-menu{display:none!important}
  .nav .open-menu{display:inline-flex!important}
}
@container app (max-width:1199px){
  .nav-btn{margin-left:10px;padding-left:0;border-left:0;gap:8px;flex-wrap:nowrap;min-width:0}
  .nav .btn--outline-white,.nav .btn--gold{padding:0 14px;font-size:14px}
}

/* ══ 15 · GẠCH NHẤN VÀ QUẦNG MÀU CÒN SÓT CỦA THEME CHÀM ════════════════
   Bảng màu đã đổi sang lục 22/09 nhưng các vệt TRANG TRÍ thì chưa: gạch dưới
   tiêu đề khối, dải trên thẻ Đăng nhập, vạch trái khối mời gọi vẫn là dải
   hồng sen → lam → lơ của bản Discord. Trên nền lục chúng đọc ra như lỗi in.

   Một dải nhấn DUY NHẤT cho cả site: lục bảo → chanh → hổ phách. Cùng dải
   với vạch trên chân trang (§12) và gạch dưới tiêu đề màn (§8), nên ba chỗ
   nhấn trên một trang là một họ chứ không phải ba ý khác nhau.

   ⚠ KHÔNG đụng --s1..--s4 và --cm1..--cm6: bốn sắc nhấn và màu chuyên mục
   MANG NGHĨA PHÂN LOẠI (CLAUDE.md §3) — đổi là vỡ bản đồ trạng thái.       */
.block-head h2::before,.head-mid h2::after,.about-nt-head h2::before,
.new-pkg::before,.signin-box::before{
  background-image:linear-gradient(96deg,#1F8F4A 0%,#8FE04A 54%,#E9A81C 100%)}
.new-pkg::before{background-image:linear-gradient(180deg,#1F8F4A 0%,#8FE04A 54%,#E9A81C 100%)}
.signin-box::before{background:linear-gradient(96deg,rgba(31,143,74,0) 0%,#1F8F4A 14%,
  #8FE04A 50%,#E9A81C 86%,rgba(233,168,28,0) 100%)}
.signin-box .btn-in{box-shadow:0 10px 22px rgba(26,130,69,.24)}
.signin-box .btn-in:hover{box-shadow:0 14px 30px rgba(26,130,69,.30)}

/* ══ 16 · MÀN ĐĂNG NHẬP · ĐĂNG KÝ ══════════════════════════════════════
   §9 đã kéo nền cột trái sang sáng, nhưng chữ trong cột thì vẫn là bộ màu
   dành cho nền tối (--dark-text #E2EEC6) nên câu dẫn và ba gạch đầu dòng chìm
   hẳn: đo bằng điểm ảnh thật được 1.10–1.12:1. Khai lại toàn bộ mực của cột.
   Cột phải cũng đổi: ba quầng hồng/lam thành lục · chanh · hổ phách.        */
.signin-left .label-sign-dark b,.reg-sign b{color:#0B2016}
.signin-left .book,.signin-left .ticket,.reg-ticket{color:#33513F}
.signin-left .ticket:hover,.reg-ticket:hover{color:#0B2016}
.signin-y li{color:#33513F}
.signin-y i{background:#1F8F4A;border-color:#1F8F4A}
.signin-y i::before{border-color:#FFFFFF}
.signin-left .dot{background-image:radial-gradient(rgba(31,143,74,.16) 1px,transparent 1px)}
.signin-right{background:
  radial-gradient(54% 48% at 4% 44%,rgba(31,143,74,.14) 0%,transparent 74%),
  radial-gradient(52% 44% at 94% 2%,rgba(143,224,74,.14) 0%,transparent 74%),
  radial-gradient(46% 40% at 86% 98%,rgba(233,168,28,.10) 0%,transparent 76%),
  linear-gradient(180deg,#F1F9EC 0%,#FBFDF6 46%,#FFFFFF 100%)}
.signin-right .dot{background-image:radial-gradient(rgba(31,143,74,.14) 1px,transparent 1px)}
.signin-right .halo{background:
  radial-gradient(34% 34% at 14% 26%,rgba(143,224,74,.42) 0%,transparent 72%),
  radial-gradient(34% 34% at 88% 22%,rgba(31,143,74,.40) 0%,transparent 72%),
  radial-gradient(38% 36% at 80% 88%,rgba(233,168,28,.34) 0%,transparent 74%),
  radial-gradient(34% 34% at 12% 84%,rgba(31,143,74,.30) 0%,transparent 74%)}
/* Màn Đăng ký: tiêu đề giữa màn và các bước. Nền đã sáng nên mực phải đậm. */
.reg-title h1{color:#0B2016}
.reg-title p{color:#33513F}

/* ══ 17 · ĐƯỜNG DẪN (breadcrumb) TRÊN DẢI ĐẦU SÁNG ═════════════════════
   .breadcrumb dùng --dark-label / --white: bộ màu cho nền tối. Dải đầu nay
   sáng nên cả hàng chìm — 8 màn tĩnh dính, đo được 1.19:1.                 */
.head-sub .breadcrumb a,.breadcrumb a{color:#33513F}
.head-sub .breadcrumb a:hover,.breadcrumb a:hover{color:#15653D}
.head-sub .breadcrumb [aria-current],.breadcrumb [aria-current]{color:#0B2016;font-weight:600}
.head-sub .breadcrumb li+li::before,.breadcrumb li+li::before{color:#7C9686}

/* ══ 18 · KHỐI "NGUYÊN TẮC HOẠT ĐỘNG" (Giới thiệu) ═════════════════════
   Đây là tấm TỐI cố ý (ngoại lệ đã ghi trong _screens.css). Nhưng sau khi đổi
   tông, dải nền chạy tới #4A7C3A ở góc dưới phải cộng quầng chanh 30% nên
   nửa phải sáng lên: thẻ thứ ba đo được 2.22:1 — chữ mờ hẳn đi so với hai
   thẻ bên trái. Kéo cả dải về ba chặng TỐI và hạ quầng chanh xuống. */
.about-nt{background:
  radial-gradient(60% 70% at 10% 0%,rgba(143,224,74,.16),transparent 70%),
  radial-gradient(50% 60% at 96% 100%,rgba(233,168,28,.10),transparent 70%),
  linear-gradient(160deg,#0B3623 0%,#0F4D31 52%,#13653F 100%)}
.about-nt-card{background:rgba(255,255,255,.085);border-color:rgba(255,255,255,.20)}
/* 25/09: bỏ luật .about-nt-ic--3 — ba ô biểu tượng nguyên tắc nay cùng một mặt lục
   (_screens.css, khối Nguyên tắc), không còn biến thể theo thứ tự. */

/* ══ 19 · BA TOKEN CHỮ "DÀNH CHO NỀN TỐI" BÊN TRONG DẢI ĐẦU SÁNG ═══════
   --dark-text / --dark-label / --dark-sub là bộ mực cho NỀN TỐI. Dải đầu màn nay
   là nền SÁNG, nên mọi thành phần còn lấy ba token đó đều chìm: viên đếm
   "4 · 10" ở Giải pháp đo 1.02:1, dòng "· Công ty Cổ phần ABC" ở Hồ sơ 1.10:1.

   Sửa từng thành phần thì lần nào thêm chữ mới cũng sót một chỗ. Thay vào đó
   KHAI LẠI ba token ngay trên dải: bên trong dải chúng mang nghĩa "mực trên
   nền sáng". Component không phải sửa gì, và chữ thêm sau này tự đúng.
   Chỉ đổi ba token CHỮ — KHÔNG đụng --white, vì trong dải còn những viên nền
   trắng lấy --white làm MÀU NỀN; đổi nó là lật ngược cả hai.                */
.head-sub,.signin-left,.reg{--dark-text:#33513F;--dark-label:#2A4636;--dark-sub:#33513F}

/* ── 20 · CHỮ PHỤ ĐẠT AA TRÊN CẢ NỀN NGẢ MÀU ──────────────────────────
   --gray-pale #5A7466 đạt 5.09 trên trắng nhưng chỉ 4.40 trên các mặt ngả
   lục/lam nhạt (#E8F0F0) — trượt AA ở ba màn. #55705F đo được 4.70 trên
   chính mặt đó và 5.44 trên trắng.                                        */
:root{--gray-pale:#55705F}

/* ══ 21 · CỘT BÊN DÍNH CAO HƠN KHUNG NHÌN — ĐÁY NGOÀI TẦM VỚI ══════════
   Đúng cái bẫy CLAUDE.md §8 đã ghi và nay dính lại ở nhiều màn: cột phải
   `position:sticky` cao hơn phần còn lại kể từ mép dính, nên cuộn kiểu gì
   đáy cột cũng không lên tới. Ở Chi tiết sự kiện, khối "Tài liệu" (ba tệp
   PDF) nằm dưới đáy cột — cuộn hết trang vẫn KHÔNG ĐỌC ĐƯỢC, phần đó bị
   chân trang che. Màn 1080 thì vừa nên trước giờ không ai thấy.

   Cách chữa theo đúng §8: đặt TRẦN chiều cao bằng chỗ còn lại kể từ mép
   dính, rồi cho cuộn TRONG cột.

   ⚠ Kèm `>*{flex:0 0 auto}` — bẫy thứ hai ở §8: cột là flex dọc, đặt trần
   mà không khoá co thì THẺ CON bị ép co trước và cột KHÔNG hề sinh thanh
   cuộn (flex-shrink mặc định là 1); thẻ có overflow:hidden co gần về 0.

   Chỉ áp từ 1024px — dưới ngưỡng đó lưới đã xếp một cột, cột bên thành khối
   thường chạy hết bề ngang; đặt trần ở đó là tự tạo một khung cuộn lồng.   */
@container app (min-width:1024px){
  .det-right,.wr-side,
  .tix-sub,.dir-filter,.mpf-left,.cpg-side,.mypf-menu,.pfv-side,.toc,
  .newsd-side-stick{
    max-height:calc(100svh - var(--stick-col,88px) - 16px);
    overflow-y:auto;overscroll-behavior:contain;
    scrollbar-width:thin;scrollbar-color:#B7D2BF transparent}
  .det-right,.wr-side{--stick-col:84px}
  .newsd-side-stick{--stick-col:96px}
  .det-right>*,.wr-side>*,.tix-sub>*,.dir-filter>*,.mpf-left>*,.cpg-side>*,
  .mypf-menu>*,.pfv-side>*,.toc>*,.newsd-side-stick>*{flex:0 0 auto}
}

/* ── 22 · VÀI CHỖ TRƯỢT AA SÁT NGƯỠNG ─────────────────────────────────── */
.det-actions .slotp{color:#EAF5D8}   /* 10.5px trên #1F8F4A · 4.34 → 5.02. Phải viết đủ cấp
                                .det-actions .slotp — luật gốc ở _screens.css đặc trưng hơn .slotp trần. */
/* Viên đếm trên tab quản trị đang mở: nền trắng 22% trên #15653D ra #508868,
   chữ trắng còn 4.15. Hạ xuống 14% → nền #317754, chữ trắng đạt 5.36. */
.adm-fld-tab [role=tab][aria-selected="true"] b{background:color-mix(in srgb,#fff 14%,transparent)}

/* ══ 23 · BẢNG QUẢN TRỊ LÀM CẢ TRANG CUỘN NGANG ════════════════════════
   Ở khổ 1024 (và hẹp hơn), bốn màn quản trị có bảng rộng làm CẢ TRANG cuộn
   ngang 179px: thanh bên và dải đầu trôi sang trái khi người dùng lỡ vuốt.
   Bảng vốn đã nằm trong .adm-table-scroll{overflow-x:auto} — đáng lẽ chỉ bảng
   cuộn trong khung của nó.

   Đã đo từng cách chữa, chỉ MỘT cách ăn (scrollWidth của trang, khổ 1024):
     .adm-table-scroll{max-width:100%}        → 1203  (không đổi)
     .adm-content{overflow-x:clip}        → 1203
     .app{overflow-x:clip}                → 1203
     .adm-card{overflow:hidden}             → 1203
     .adm-table{table-layout:fixed}         → 1238  (tệ hơn)
     .adm-table-scroll{contain:paint}         → 1024  ✔
   Lý do: phần tràn của bảng vẫn được tính vào vùng cuộn của TRANG dù thẻ cha
   đã overflow:auto; `contain:paint` cắt hẳn quan hệ đó. Đã kiểm lại: bảng vẫn
   cuộn ngang trong khung được (scrollLeft ăn 300px), trang thì hết cuộn ngang.

   ⚠ Lỗi này CÓ TRƯỚC lớp đồng nhất (tắt _unify.css vẫn 1203) — không
   phải do đổi tông; ghi ở đây vì đây là chỗ soát bố cục chung của cả site. */
.adm-table-scroll{contain:paint}

/* ── 24 · TAB HAI MẶT: rê chuột phải thấy được ─────────────────────────
   .tab-para button:hover chỉ đổi MÀU CHỮ (--gray → --ink). Trên nền bạc hà
   nhạt, đổi mực suông gần như không nhận ra — người dùng chính ngoài 40 tuổi.
   Thêm nền trắng khi rê, đúng cách viên menu ở thanh điều hướng đã làm, nên
   hai chỗ "chọn một trong mấy mặt" phản hồi giống hệt nhau.
   Chỉ áp cho mặt CHƯA chọn: mặt đang chọn vốn đã là nền trắng đặc.        */
.tab-para button:not([aria-selected="true"]):hover{background:#FFFFFF;color:#15653D}

/* ══ 25 · BỎ HẲN GẠCH CHÂN TRÊN MỤC MENU ═══════════════════════════════
   `_common.css` có `.nav-menu a::after` là một vạch 2px chạy ra khi rê hoặc
   khi mục đang mở. Thanh điều hướng nay theo lối Trang chủ: mục đang mở là
   VIÊN ĐẶC màu lục, rê chuột là VIÊN TRẮNG. Gạch chân chồng lên viên thành
   hai dấu hiệu cho cùng một trạng thái — và trên viên lục nó đọc ra như một
   vạch gạch ngang giữa chữ. Người dùng 23/09: "khi focus rồi bỏ cái hiệu
   ứng gạch chân dưới này đi".
   Bỏ hẳn ở MỌI trạng thái (nghỉ · rê · focus · đang mở) cho dứt điểm.      */
.nav-menu a::after,
.nav-menu a:hover::after,
.nav-menu a:focus::after,
.nav-menu a:focus-visible::after,
.nav-menu a[aria-current]::after,
.nav-menu a[aria-current="page"]::after,
.nav-menu a.active::after{display:none}

/* ══ 26 · CỤM TÀI KHOẢN TRÊN THANH ĐIỀU HƯỚNG ══════════════════════════
   Hai lỗi người dùng chụp lại 23/09:

   ① "Layout chỗ acc này bị lệch" — viên tài khoản cao 44px trong khi nút
      "Đăng bài" và cụm VI/EN cao 40px, nên ba thứ trên một hàng lệch nhau;
      thêm nữa `.acct-role` ("Nhóm Admin") vẫn là chữ TRẮNG của bản nền tối nên
      trên viên trắng nó tàng hình mà VẪN CHIẾM một dòng — tên bị đẩy lên,
      nhìn ra như tràn khỏi viên.
   ② "Tooltip hiển thị thông tin bị chìm text, hiện tại ko nhìn thấy gì" —
      đây là hộp menu tài khoản `.acct-bin`. Nền nó là `--v6-black` (tối) với
      chữ trắng; nhưng §4 của file này có `.nav a{color:#0C3B26}` ĐÚNG BẰNG
      đặc trưng với `.acct-bin a{color:#fff}` và nạp SAU → mọi dòng trong
      hộp thành lục đậm nằm trên nền tối. Đúng lỗi tôi gây ra.

   Chữa cả hai theo một hướng: hộp menu về MẶT SÁNG như phần còn lại của
   thanh điều hướng, thay vì vá màu chữ trắng cho một hộp tối lạc tông.     */
.nav .acct{height:40px;padding:0 12px 0 4px;background:#FFFFFF;
  border:1px solid rgba(12,59,38,.16);color:#0C3B26}
.nav .acct:hover,.nav .acct[aria-expanded="true"]{background:#F1F9EC;border-color:#1F8F4A}
.nav .acct .avatar{--c:32px;font-size:11.5px;color:#FFFFFF;
  box-shadow:0 0 0 2px #FFFFFF,0 0 0 3.5px #1F8F4A}
.nav .acct-text{justify-content:center;gap:1px}
.nav .acct-text .name-acct{font-size:13.5px;line-height:1.15;color:#0C3B26}
.nav .acct-role{font-size:11px;line-height:1.15;color:#4A6B58}
.nav .acct-role--slot{color:#8A5A05}
.nav .acct-arrow{color:#3C5648;opacity:1}

/* Hộp menu tài khoản — mặt trắng, mực đậm */
.acct-bin{background:#FFFFFF;color:#0B2016;border:1px solid rgba(12,59,38,.12);
  box-shadow:0 26px 54px -18px rgba(8,40,26,.34)}
.acct-bin::before{background:#FFFFFF;border-left:1px solid rgba(12,59,38,.12);
  border-top:1px solid rgba(12,59,38,.12)}
.nav .acct-bin a,.acct-bin a{color:#183E2B}
.acct-bin a:hover{background:#F1F9EC;color:#0B2016}
.acct-bin a:focus-visible{outline:3px solid #E9A81C;outline-offset:-2px}
.acct-head{border-bottom:1px solid rgba(12,59,38,.10)}
.acct-head b{color:#0B2016}
.acct-head small{color:#4A6B58}
.acct-head .avatar{color:#FFFFFF}
/* Ảnh đại diện chữ cái ở nút tài khoản + đầu menu: dùng ĐÚNG bảng sắc đậm của
   Trang chủ (_home.css, `.v6 .avatar.aN`). 25/09 người dùng bắt: màn trong còn
   bảng sắc NHẠT gốc (_common.css, a1 #A8DFC0) mà hai luật trên đã đổi chữ sang
   TRẮNG → chữ "NA" chìm (đo 1.6). Bốn sắc dưới đã đo với chữ trắng ở _home.css:
   a1 7.17 · a2 5.05 · a3 6.90 · a4 5.93. */
.nav .acct .avatar.a1,.acct-head .avatar.a1{background:#17703A}
.nav .acct .avatar.a2,.acct-head .avatar.a2{background:#0E7C9B}
.nav .acct .avatar.a3,.acct-head .avatar.a3{background:#9C1C7A}
.nav .acct .avatar.a4,.acct-head .avatar.a4{background:#8A5A05}
.acct-group{border-top-color:rgba(12,59,38,.10)}
.acct-group-name{color:#5A7466}
.acct-ic{color:#4A6B58}
.acct-bin a:hover .acct-ic{color:#15653D}
.acct-group--logout a{color:#B42318}
.acct-group--logout a:hover{background:#FFE7DE;color:#8C1C13}
.acct-group--logout .acct-ic{color:#B42318}

/* ══ 27 · BỐN MẢNG CHUYỂN SẮC THAY ẢNH (.img-g1…g4) ════════════════════
   Đây là ô ảnh tạm của thẻ Giải pháp · Tin tức · Khoá học. Bảng cũ:
     .img-g1  lục    → --dark-1 (gần đen)
     .img-g2  --dark-5 → --dark-1
     .img-g3  --s2 LƠ  → --dark-2
     .img-g4  --s1 HỒNG SEN → --dark-3
   Trên trang nền sáng tông lục, thẻ đầu của màn Giải pháp ra một mảng HỒNG
   SEN và thẻ khác ra mảng LƠ — lệch hẳn khỏi bảng màu, nhìn ra như lỗi. Ba
   mảng còn lại thì tối gần đen, cùng kiểu "lệch tone" người dùng đã nhắc ở
   băng thẻ Trang chủ.

   Kéo cả bốn về dải lục vừa của bộ ảnh sự kiện đã nhạt hoá 22/09, giữ bốn
   sắc KHÁC NHAU để còn phân biệt được thẻ (lục · lục sáng · lục ngọc · ô
   liu ngả hổ phách). Cố ý để mức VỪA chứ không nhạt hẳn: trên ô ảnh có viên
   nhãn trắng và viên "Ưu đãi" hổ phách đè lên, nền nhạt quá thì hai viên đó
   mất chân.

   ⚠ KHÔNG đụng --s1..--s4: bốn sắc đó vẫn giữ nghĩa phân loại ở chấm chuyên
     mục và vòng ảnh đại diện (CLAUDE.md §3). Ở đây chỉ thôi dùng chúng làm
     MẢNG LỚN.                                                              */
.img-g1{background:linear-gradient(142deg,#6CBD77 0%,#2F8A52 100%)}
.img-g2{background:linear-gradient(142deg,#9AD2A1 0%,#3E9A5F 100%)}
.img-g3{background:linear-gradient(142deg,#8CC9BE 0%,#2F8A6A 100%)}
.img-g4{background:linear-gradient(142deg,#D8C48A 0%,#7E9A3E 100%)}

/* ══ 28 · QUẢN TRỊ — XEM TRƯỚC PHẢI GIỐNG HỆT TRANG CÔNG KHAI ═══════════
   Người dùng 23/09: "các ảnh thumbnail dưới Admin cũng cần phải điều chỉnh
   lại cho giống thumbnail hiển thị trên Client".

   Ô "xem trước đầu trang" và sáu hình phác khối đều dựng theo bản NỀN TỐI
   của theme chàm: `.ahome-view-head` là dải --v6-night → --v6-dot với chữ trắng,
   `.ahome-sketch` là dải --dark-3 → --dark-5, và hai chỗ còn pha --v6-fuchsia
   (ô "Tin tức" ra màu CÁ HỒI, chấm ở "Nhu cầu hợp tác" ra hồng).

   Cả ô xem trước lẫn hình phác là LỜI HỨA về trang thật. Trang thật nay nền
   sáng mực đậm, nên xem trước cũng phải vậy — không thì người vận hành sửa
   chữ ở đây rồi mở trang ra thấy khác hẳn. Chép đúng nền hero của §9.      */
.ahome-view-head{color:#0B2016;
  background:
    radial-gradient(58% 62% at 86% 16%,rgba(31,143,74,.24) 0%,transparent 68%),
    radial-gradient(44% 50% at 8% 96%,rgba(233,168,28,.20) 0%,transparent 70%),
    linear-gradient(168deg,#DFF2CF 0%,#EFF9E5 52%,#F7FCF3 100%)}
.ahome-view-h1{color:#0B2016}
.ahome-view-h1 em{color:#1F8F4A}
.ahome-view-hint{color:#33513F}
.ahome-view-search{background:#FFFFFF;color:#4A6B58;box-shadow:0 1px 0 rgba(12,59,38,.10),0 6px 18px -12px rgba(8,40,26,.34)}
.ahome-view-search i{background:var(--green-btn);color:#FFFFFF}
/* Hai nút: trắng có viền + lục đặc — đúng cặp "Tìm hiểu thêm · Tham gia". */
.ahome-view-btn span{background:#FFFFFF;color:#0F4D31;box-shadow:inset 0 0 0 1.5px #9FC7AC}
.ahome-view-btn span+span{background:var(--green-btn);color:#FFFFFF;box-shadow:none}

/* Hình phác khối: nền tối → mặt lục nhạt, thanh phác lục đặc. Đảo vai sáng
   tối (trước: thanh SÁNG trên nền TỐI) chứ không chỉ đổi nền, không thì
   thanh trắng nằm trên nền nhạt là mất hút. */
.ahome-sketch{background:
  radial-gradient(70% 80% at 100% 0%,rgba(143,224,74,.30),transparent 70%),
  linear-gradient(150deg,#E4F4D9 0%,#CFE9D6 100%)}
.ahome-sketch i{background:rgba(31,143,74,.62)}
.ahome-sketch i.ahome-vacant{background:none;border:1.5px dashed rgba(21,101,61,.45)}
.ahome-sketch--head i:nth-child(1),.ahome-sketch--head i:nth-child(4){background:rgba(31,143,74,.34)}
.ahome-sketch--head i:nth-child(3){background:#4E9E3C}
.ahome-sketch--info .ahome-sketch-large{background:#E9A81C}       /* trước là cá hồi --v6-fuchsia */
.ahome-sketch--need i{background:radial-gradient(circle at 9px 50%,#E9A81C 0 5px,transparent 5.5px),rgba(31,143,74,.62)}
.ahome-sketch--mem i{background:radial-gradient(circle at 9px 50%,#1F8F4A 0 5px,transparent 5.5px),rgba(31,143,74,.62)}
.ahome-sketch--need i.ahome-vacant,.ahome-sketch--mem i.ahome-vacant{background:none}
.ahome-sketch--small i.ahome-vacant{border-width:1px}

/* ══ 29 · THANH BÊN QUẢN TRỊ — CÙNG BẬC SÁNG VỚI TRANG CÔNG KHAI ════════
   Người dùng 23/09: "Tone màu dưới Admin cũng điều chỉnh lại cho cân đối
   với Client".

   Thanh bên đang là dải gần đen (--v6-night → --v6-dot) — dựng cho theme tối.
   Cạnh một thân trang nền sáng, nó nặng hơn hẳn một bậc.

   GIỮ thanh bên là mặt ĐẬM NHẤT của màn (nó là khung ứng dụng, và là thứ
   phân biệt tầng quản trị với tầng công khai — CLAUDE.md §2B), nhưng nhấc
   lên đúng sắc #1C5A3C mà khối mô phỏng ở Trang chủ vừa đổi sang. Hai chỗ
   "khung ứng dụng" của hai tầng nay là CÙNG MỘT MÀU.
   Chữ trắng trên #1C5A3C đo 8.15 : 1; trên chặng đáy #14442D còn cao hơn.  */
.adm-side{background:
  radial-gradient(120% 34% at 0% 0%,rgba(143,224,74,.16) 0%,transparent 70%),
  radial-gradient(90% 30% at 100% 100%,rgba(233,168,28,.10) 0%,transparent 70%),
  linear-gradient(180deg,#1C5A3C 0%,#185030 55%,#14442D 100%)}
.adm-side .adm-group,.adm-side-logo small{color:#CFE6B4}
.adm-side .adm-role{color:#EAF5D8;background:rgba(255,255,255,.10)}
.adm-menu a{color:#E4F2D6}
.adm-menu a:hover{background:rgba(255,255,255,.10);color:#FFFFFF}
.adm-menu a[aria-current="page"]{background:rgba(255,255,255,.16);color:#FFFFFF}

/* ══ 30 · Ô NHẬP NẰM TRONG "VIÊN GỘP" — ĐỪNG VẼ THÊM KHUNG ══════════════
   Người dùng 23/09: "design lại layout box search này, cảm giác như 2
   layout chồng nhau ko ổn".

   Đúng, và là lỗi của §7 file này. §7 đặt
       input:not([type=checkbox]):not([type=radio]){border:1.5px solid …;background:#FFF}
   đặc trưng (0,3,1) — cao hơn `.v6-search input{border:0;background:none}`
   (0,1,1) của Trang chủ. Nên ô nhập tự vẽ MỘT KHUNG TRẮNG CÓ VIỀN nằm gọn
   BÊN TRONG viên tìm kiếm: người xem thấy hai hình chữ nhật bo góc lồng
   nhau, cộng thêm vòng tiêu điểm hổ phách của viên ngoài là ba lớp.

   Ba chỗ dùng lối "viên gộp" (ô nhập + nút nằm chung một viên, viền do VIÊN
   vẽ chứ không phải ô nhập): .v6-search (tìm ở đầu Trang chủ) · .clk-date ·
   .alist-card-cls. Trả ô nhập trong đó về trong suốt, và để DUY NHẤT vòng
   :focus-within của viên làm dấu hiệu tiêu điểm — một ô nhập, một vòng.   */
/* ⚠ Phải viết ĐỦ hai `:not()` như §7. Mỗi `:not([type=…])` tính đặc trưng
   ngang một class, nên §7 là (0,2,1); viết `.v6-search input` trơn chỉ (0,1,1)
   — thua, và ô nhập vẫn còn khung. Kèm lại hai `:not()` thành (0,3,1). */
.v6-search input:not([type="checkbox"]):not([type="radio"]),
.clk-date input:not([type="checkbox"]):not([type="radio"]),
.alist-card-cls input:not([type="checkbox"]):not([type="radio"]){
  border:0;background:none;border-radius:0}
.v6-search input:focus,.clk-date input:focus,.alist-card-cls input:focus,
.v6-search input:focus-visible,.clk-date input:focus-visible,.alist-card-cls input:focus-visible{
  outline:0;border:0;box-shadow:none}
/* Viên ngoài giữ vòng hổ phách — cùng kiểu tiêu điểm với cả site (§3). */
.clk-date:focus-within,.alist-card-cls:focus-within{outline:3px solid #E9A81C;outline-offset:3px}

/* ══ 31 · RÀ NỐT CÁC Ô XEM TRƯỚC CÒN LẠI BÊN QUẢN TRỊ ══════════════════
   Người dùng 23/09: "cần rà soát toàn bộ thumbnail dưới Admin update style
   cho đồng nhất style Client. Ví dụ màn hình này vẫn chưa update"
   (admin-directory.html).

   §28 mới sửa `.ahome-view-head` của màn Trang chủ. Rà lại bằng cách liệt kê MỌI
   lớp `*-xem-dau` trong _admin.css thì còn HAI khối nữa cũng dựng theo
   bản nền tối:
       .adir-view-head   — Danh bạ
       .alist-view-head   — Trang nội dung (và .amod-view-head kế thừa)
   Hai khối kia (.mod-view-head · .ainbox-view-head) vốn đã nền sáng, không đụng.

   Cả ba ô này đều là LỜI HỨA về màn công khai tương ứng; màn thật nay nền
   sáng mực đậm nên xem trước phải vậy. Chép đúng nền hero của §9.          */
.adir-view-head,.alist-view-head{
  color:#0B2016;
  background:
    radial-gradient(58% 62% at 86% 16%,rgba(31,143,74,.24) 0%,transparent 68%),
    radial-gradient(44% 50% at 8% 96%,rgba(233,168,28,.20) 0%,transparent 70%),
    linear-gradient(168deg,#DFF2CF 0%,#EFF9E5 52%,#F7FCF3 100%)}
.alist-view-head::after{background:linear-gradient(90deg,transparent 0%,#1F8F4A 35%,#E9A81C 72%,transparent 100%)}
/* Viên nhãn đầu khối — trắng, mực lục (trước là kính mờ trên nền tối). */
.adir-view-kicker,.alist-view-head-kicker{background:#FFFFFF;color:#15653D;
  border:1px solid rgba(31,143,74,.22)}
.adir-view-kicker i,.alist-view-head-kicker i{background:#1F8F4A}
.adir-view-h1{color:#0B2016}
/* Ô tìm giả lập: mặt trắng có viền + nút lục đặc, y ô tìm thật. */
.adir-view-search{background:#FFFFFF;color:#4A6B58;
  box-shadow:0 1px 0 rgba(12,59,38,.10),0 6px 18px -12px rgba(8,40,26,.34)}
.adir-view-search .adm-ic{color:#4A6B58}
.adir-view-search i{background:var(--green-btn);color:#FFFFFF}
/* Hàng lối tắt "Chương trình học tại AIT": viên trắng, mực đậm.
   Giữ nguyên bốn chấm --s1..--s4 — đó là màu PHÂN LOẠI chương trình (§3). */
.adir-view-quick{color:#33513F}
.adir-view-quick span{background:#FFFFFF;color:#25412F;border:1px solid rgba(12,59,38,.16)}

/* ══ 32 · RÀ MÁY TOÀN BỘ MẢNG TỐI CÒN SÓT BÊN QUẢN TRỊ ═════════════════
   Soi mắt thì sót, nên quét bằng script: duyệt mọi phần tử trong
   `.adm-content` của 23 màn quản trị (đã loại thanh bên vốn CỐ Ý tối), tính
   độ sáng nền thật (gồm gradient), báo mảng vừa TỐI (L < 0.30) vừa TO
   (≥ 6000px²). Kết quả: phần lớn là NÚT lục đặc — đúng, không đụng. Còn lại
   bốn nhóm là thumbnail thật sự chưa đổi tông, sửa dưới đây.

   ⚠ GIỮ NGUYÊN `.acfg-logo-view`: đó là ô thử logo TRÊN NỀN TỐI ở màn Cấu hình
     — tối là chủ ý, để người vận hành xem logo đứng được trên cả hai nền
     (CLAUDE.md §6). Không phải lỗi.
   ══════════════════════════════════════════════════════════════════════════ */

/* ① Ảnh bìa thẻ Giải pháp bên quản trị — bản sao của .img-g1…g4 bên công
      khai. Bên đó đã nhạt hoá ở §27, bên này còn nguyên dải cũ: g3 ra LƠ
      (29,125,140) và g4 ra TÍM (121,70,117). Dùng ĐÚNG bốn dải của §27 thì
      cùng một thẻ nhìn ở hai tầng mới ra một màu.                          */
.asol-img--g1{background:linear-gradient(142deg,#6CBD77 0%,#2F8A52 100%)}
.asol-img--g2{background:linear-gradient(142deg,#9AD2A1 0%,#3E9A5F 100%)}
.asol-img--g3{background:linear-gradient(142deg,#8CC9BE 0%,#2F8A6A 100%)}
.asol-img--g4{background:linear-gradient(142deg,#D8C48A 0%,#7E9A3E 100%)}

/* ② Dải chào ở Bảng điều khiển — mảng tối NẶNG NHẤT của cả tầng quản trị
      (244.000px², L=0.048, gần đen). Kéo về đúng #1C5A3C mà thanh bên và
      khung mô phỏng bên Trang chủ đang dùng, nên cả tầng quản trị chỉ còn
      MỘT sắc đậm duy nhất. Chữ trắng trên #1C5A3C đo 8.15 : 1.             */
.dash-head{background:
  radial-gradient(60% 120% at 100% 0%,rgba(143,224,74,.18) 0%,transparent 60%),
  radial-gradient(40% 90% at 0% 100%,rgba(233,168,28,.12) 0%,transparent 70%),
  linear-gradient(135deg,#1C5A3C 0%,#185030 48%,#14442D 100%)}

/* ③ Ảnh bìa thẻ thành viên trong ô xem trước Danh bạ — bên công khai bìa là
      dải lục bảo → chanh (.v6-spn-cover). Chép đúng nó.                        */
.adir-card-cover{background:
  radial-gradient(75% 150% at 100% 115%,color-mix(in srgb,var(--hue) 55%,transparent) 0%,transparent 60%),
  linear-gradient(120deg,#1F8F4A 0%,#8FE04A 100%)}

/* ④ Ô xem trước tệp ở Thư viện media: video dải lục gần đen, audio dải chàm
      (--v6-dot) sót lại. Về cùng họ với bìa thẻ, vẫn phân biệt được hai
      loại tệp bằng sắc.                                                     */
.amedia-view--video{background:linear-gradient(135deg,#2F8A52,#6CBD77)}
.amedia-view--audio{background:linear-gradient(135deg,#2F8A6A,#8CC9BE)}

/* Ô xem trước tệp media: nhạt nền thì PHẢI đổi mực ─────────────────────────
   §32④ kéo nền ô video/audio sang dải lục nhạt nhưng `.amedia-view--file` vẫn
   `color:#fff`, thành chữ trắng trên nền sáng: "MP4" đo 3.24, "MP3" 2.83.
   Lỗi tôi vừa gây ra. Đổi mực sang lục rừng — trên hai dải này đo 7.4 và 6.9,
   và giữ được vẻ tươi sáng thay vì kéo ngược nền về tối.                   */
.amedia-view--video,.amedia-view--audio{color:#0B2016}
.amedia-view--video .label,.amedia-view--audio .label{background:rgba(255,255,255,.82);color:#0B2016}

/* ══ 33 · MỘT Ô — MỘT DẤU HIỆU TIÊU ĐIỂM ══════════════════════════════
   Người dùng bắt ở ô tìm Trang chủ: viên bọc vẽ một vòng, ô nhập bên trong
   vẽ thêm một vòng nữa → hai (có khi ba) đường viền lồng nhau. Đã chữa riêng
   ô đó ở cuối _home.css; đây là chữa cho CẢ HỌ.

   Cách tìm: grep mọi luật `:focus-within` có outline / box-shadow / border-
   color trong toàn bộ CSS ra 16 thẻ bọc, rồi bấm CHUỘT THẬT vào phần tử con
   của từng thẻ trên cả 54 màn. (Phải click thật — `el.focus()` bằng lệnh
   KHÔNG bật `:focus-visible`, nên mấy lượt đo đầu tôi kết luận nhầm là đã
   sạch.) Script bắt thêm 2 chỗ ở .asol-fld-due.

   Luật dưới đây tắt vòng của phần tử CON trong mọi thẻ bọc đã tự vẽ vòng —
   kể cả chỗ script chưa với tới được (nằm dưới màn, trong panel đang đóng).
   Thẻ bọc giữ nguyên vòng của nó, nên bàn phím vẫn thấy rõ đang ở đâu.    */
.asol-fld-due input:focus,.asol-fld-due input:focus-visible,
.ahome-num input:focus,.ahome-num input:focus-visible,
.dir-search input:focus,.dir-search input:focus-visible,
.det-actions input:focus,.det-actions input:focus-visible,
.reg-tix-main input:focus,.reg-tix-main input:focus-visible,
.reg-det label input:focus,.reg-det label input:focus-visible,
.spn-hm>label input:focus,.spn-hm>label input:focus-visible,
.btn-round label input:focus,.btn-round label input:focus-visible,
.post-drop-small input:focus,.post-drop-small input:focus-visible,
.mypf-img-change input:focus,.mypf-img-change input:focus-visible{
  outline:none;box-shadow:none}

/* ══ 34 · THANH ĐIỀU HƯỚNG GIẬT KHI RÊ CHUỘT ═══════════════════════════
   Người dùng 23/09: "fix lỗi bị giật giật Menu khi thao tác hover ở session
   thành viên… có bạn cũng feedback khi thao tác cái Menu thi thoảng cứ giật".

   ⚠ KHÔNG tái hiện được trên Chrome headless (đã thử giữ con trỏ ở mép dưới
     mục menu và rê lần lượt qua cả hàng — không thấy mất/được hover, không
     thấy mục dịch chỗ). Nên đây là sửa theo NGUYÊN NHÂN CẤU TRÚC tìm được,
     không phải sửa theo lỗi đã dựng lại được. Nếu máy thật vẫn giật thì báo
     lại, chỗ tiếp theo cần soi là hoạt ảnh của khối đang chạy PHÍA SAU thanh.

   Hai thứ chồng nhau, cái nào cũng đủ gây giật:

   ① BACKDROP-FILTER LỒNG NHAU. `.nav` đã `blur(16px)`, mà `.nav-menu` nằm bên
      trong lại `blur(12px)` nữa. Mỗi khung hình Chrome phải lấy mẫu nền hai
      lần chồng lên nhau; ở mục "Thành viên mới" phía sau thanh có băng thẻ
      chạy liên tục nên nền đổi từng khung — đúng chỗ người dùng thấy giật
      rõ nhất. Lớp blur thứ hai gần như không thêm gì về mặt nhìn (nền dưới
      nó ĐÃ mờ sẵn), nên bỏ và bù bằng nền đặc hơn một nấc.

   ② `transform:translateY(-1px)` khi rê. Nó dịch CHÍNH VÙNG BẤM lên 1px:
      con trỏ nằm sát mép thì rơi ra ngoài → mất hover → tụt về → lại vào.
      Dù không phải lúc nào cũng lặp, rê ngang qua năm mục vẫn là năm cú nhảy
      1px liên tiếp — đọc ra là "giật". Nền và mực đổi là đã đủ báo đang trỏ
      vào đâu (§5C: chuyển động phải ÊM, biên độ nhỏ).                      */
.nav-menu{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(255,255,255,.88)}
.nav-menu a:hover,.nav--dark .nav-menu a:hover{transform:none}
.nav-menu a{transition:background-color .2s ease,color .2s ease}

/* ══ 35 · CHÂN HỘP THOẠI: NÚT CHÍNH LUÔN Ở BÊN PHẢI ════════════════════
   Người dùng chốt 23/09: "các button Huỷ, Lưu phải để bên phải chứ. Chỉ có
   button nào ít thao tác như Delete hay gì đó mới chuyển sang trái thôi."

   Đó cũng là quy ước chung: hành động chính nằm ở góc dưới phải — nơi mắt
   kết thúc một biểu mẫu và nơi ngón tay cái với tới trên điện thoại. Hành
   động PHÁ HUỶ (Xoá) tách hẳn sang trái để không bấm nhầm khi đang nhắm vào
   nút Lưu.

   Rà bằng script trên cả 54 màn, thấy 4 hàng chân còn dồn trái:
       .mypf-box-foot        (Hồ sơ của tôi — 4 hộp thoại)
       .atbl-drawer-foot       (Chuyên mục bài viết)
       .aprof-drawer-foot-right  (Thành viên)
       .btn-dlg              (Kiểm duyệt)
   ⚠ Script bản đầu đo bằng "khoảng thừa bên phải" và báo 0 lỗi trong khi ảnh
     chụp cho thấy rõ nút dồn trái — đã đổi sang đo thẳng `justify-content`.  */
.mypf-box-foot,.atbl-drawer-foot,.aprof-drawer-foot-right,.btn-dlg{justify-content:flex-end}
/* Nút phá huỷ tách sang trái */
.mypf-box-foot .mypf-box-del,
.mypf-box-foot .btn--danger,.mypf-box-foot .adm-btn--danger,
.atbl-drawer-foot .btn--danger,.atbl-drawer-foot .adm-btn--danger,
.aprof-drawer-foot-right .btn--danger,.btn-dlg .btn--danger{margin-right:auto}


/* ═══ §36 · RÊ CHUỘT KHÔNG LÀM PHẦN TỬ TỰ DỊCH CHỖ  ·  23/09 ═══════════════
   Người dùng báo hai lần: "Menu thi thoảng cứ giật giật", rồi "hover vào icon
   cứ bị giật giật" (nút × đóng hộp thoại ở ho-so-cua-toi).

   CƠ CHẾ. `X:hover{transform:translateY(-2px)}` dịch chính VÙNG BẤM của X lên
   2px. Con trỏ đang nằm trong dải 2px sát mép DƯỚI thì sau khi dịch nó rơi ra
   ngoài → mất :hover → phần tử tụt về → con trỏ vào lại → dịch lên… lặp vô
   hạn ở tốc độ khung hình. Dải giật rộng đúng bằng quãng dịch, nên thẻ cao
   300px thì "thi thoảng" mới dính, còn nút tròn 36px thì dính liên tục — đúng
   thứ tự hai lần người dùng báo.

   CHỪA RA — `scale` lớn hơn 1 thì hộp NỞ ra mọi phía, con trỏ vẫn nằm trong,
   không sinh vòng lặp. Ba luật này giữ nguyên chuyển động:
     .v6-sl-arrow:hover{scale:1.08}  .asol-star:hover{scale(1.06)}
     .mypf-img-change:hover{scale(1.1)}
   Chúng cũng là ba chỗ DUY NHẤT không có dấu hiệu rê chuột nào khác — gỡ đi
   là mất hẳn phản hồi. May là không cần gỡ.

   Phản hồi thay thế: 51/53 luật dưới đây vốn đã đổi nền · viền · bóng khi rê,
   nên gỡ phần dịch chỗ là còn đủ dấu hiệu (đã soát từng luật một). Hai cái
   không còn gì thì xử lý riêng ở cuối khối.

   ĐỪNG chữa bằng cách nới vùng bấm ra bằng `::after` trong suốt: phần lớn
   thẻ ở đây đã dùng ::after cho việc khác, và nếu chỉ khai ::after lúc :hover
   thì nó mất ngay khi hover mất — không đỡ được gì. */
.btn--main:hover,
.btn--sub:hover,
.btn--gold:hover,
button.smap-seat:hover:not(:disabled),
.smap-unit:hover:not(:disabled),
.head-page .btn--main-dark:hover,
.head-page .btn--sub-dark:hover,
.logo-band .fld-company:hover,
.card-base:hover,
.signin-box .zalo:hover,
.signin-box .btn-in:hover,
.layer-zalo .btn-z:hover,
.reg-btn-main:hover,
.coordination .fld:hover,
.det-actions:hover,
.about-ch li:hover,
.about-nt-card:hover,
.about-dp-card:hover,
.tix-ev:hover,
.hm-cal-card:hover,
.hm-svc-card:hover,
.detrv-card:hover,
.detst-link:hover,
.dir-quick button:hover,
.dir-card:hover,
.dir-card-foot .channel:hover,
.mpf-social-item:hover,
.mpf-article a:hover,
.sol-card:hover,
.adm-metric [role=tab]:hover,
.dash-num a:hover,
.asol-card:hover,
.amedia-card:hover,
.atax-type button:hover,
.ahome-map a:hover,
.aevt-card:hover,
.post-btn-input:hover,
.mypf-vi:hover,
.mypf-task:hover,
.mypost-btn-red:hover,
.nav-menu a:hover,
.nav--dark .nav-menu a:hover{
  transform:none;translate:none}
.btn.v6-btn-main:hover,
.btn.v6-btn-white:hover,
.v6-ev-card:hover,
.v6-sl-card:hover,
.v6-chat-bubble:hover,
.v6-mem-line:hover,
.v6-st-line:hover,
.v6 .nav .btn--gold:hover,
.v6 .nav-menu a:hover{
  transform:none;translate:none}

/* Ảnh đại diện xếp chồng: gỡ phần NHẤC 6px, GIỮ phần phóng to — phóng to là
   dấu hiệu mạnh mà không làm mất hover. */
.strip-img .avatar:hover{transform:scale(1.08)}

/* Bài viết trong Hồ sơ: thẻ trắng, không viền, chuyển động là dấu hiệu duy
   nhất. Thay bằng bóng SÂU HƠN — đọc ra như "nhấc lên" mà hộp không đổi chỗ. */
.pfv-article a{transition:box-shadow var(--dur-btn) var(--ease-btn),background-color var(--dur-btn)}
.pfv-article a:hover{transform:none;box-shadow:0 14px 30px -16px rgba(27,46,18,.42);background-color:#F7FBF4}

/* .smap-seat đổi màu viền khi rê nhưng transition gốc chỉ khai transform + nền */
.smap-seat{transition:background var(--dur-btn) var(--ease-btn),border-color var(--dur-btn) var(--ease-btn)}

/* Trả lại phản hồi lúc BẤM.
   Bấm chuột thì phần tử vừa :hover vừa :active, nên luật gỡ §36 ở trên đè
   luôn cú lún `.btn:active{transform:scale(.98)}` của _common.css. Đo được:
   hover+active cho transform:none — nút bấm vào không nhúc nhích.

   Khai lại `.btn:active` suông KHÔNG ăn: nó là (0,2,0) còn luật §36 nặng nhất
   tới (0,4,0) (`.v6 .nav .btn--gold:hover`). Phải viết `:hover:active` để cộng
   thêm một lớp, và lặp thêm bậc `.nav` cho nút trong thanh điều hướng.

   Lún 2% là phóng NHỎ đi nên về lý cũng có thể hụt hover ở mép, nhưng :active
   chỉ sinh ra từ một cú nhấn giữ — mất rồi không tự vào lại, không có vòng lặp
   như §36. */
.btn:hover:active,
.nav .btn:hover:active{transform:scale(.98)}

/* ══ 37 · VIÊN LỌC NHANH — MỘT KHUÔN CHO MỌI MÀN (25/09) ═════════════════
   Người dùng: "cần đồng nhất style, hiệu ứng, click khi thao tác các vùng
   filter này trên các page". Cùng một việc (lọc nhanh dưới ô tìm) mà đang
   có BỐN component, bốn cách hiện "đang chọn":
     · .dir-quick   Tin tức · Sự kiện · Danh bạ · Bài của tôi — viên trắng;
                    luật `.head-sub .dir-quick button` (§ dải đầu, phía trên)
                    CÙNG đặc trưng và nạp SAU `[aria-pressed="true"]` nên nuốt
                    mất trạng thái chọn: "Tất cả" đang bật mà nhìn y như viên khác.
     · .sol-type    Giải pháp — thanh phân đoạn (.tab-para), mặt chọn nền trắng.
     · .filter-chip Khóa học — chọn = nền lục đặc.
     · .acct-filter Tìm kiếm — chọn bằng lớp .active, nền lục đặc.
   Chốt theo cách ĐỌC RA NHANH NHẤT (Khóa học/Tìm kiếm): mặc định trắng viền
   mảnh chữ lục · rê = nền lục nhạt + viền đậm (KHÔNG dịch chỗ — §36) · chọn
   = nền lục đặc chữ trắng · nhấn = tối thêm một nấc. Viên đếm và chấm màu
   theo cùng một luật. Chỉ đổi HÌNH, không đổi JS: trạng thái vẫn đọc từ
   aria-pressed / aria-selected / .active như từng màn đang ghi.
   Đặc trưng: `.app :is(…) button` = (0,2,1), nạp cuối → thắng mọi luật cũ
   cùng cấp; trạng thái chọn (0,3,1) thắng luật hover. */
.app :is(.dir-quick,.sol-type,.filter-chip,.acct-filter){display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px}
/* Giải pháp: gỡ vỏ thanh phân đoạn — bốn mặt thành bốn viên rời như màn khác. */
.app .sol-type{padding:0;border:0;border-radius:0;background:none;overflow:visible;max-width:none}
.app :is(.dir-quick,.sol-type,.filter-chip,.acct-filter) button{
  display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 16px;flex:0 0 auto;
  border:1px solid color-mix(in srgb,var(--green) 30%,var(--border));border-radius:999px;
  background:var(--white);color:var(--green-dark);
  font:inherit;font-size:14.5px;font-weight:600;letter-spacing:0;line-height:1;
  -webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none;transform:none;
  transition:background-color var(--dur-btn) var(--ease-btn),border-color var(--dur-btn) var(--ease-btn),
    color var(--dur-btn) var(--ease-btn),box-shadow var(--dur-btn) var(--ease-btn)}
.app :is(.dir-quick,.sol-type,.filter-chip,.acct-filter) button:hover{
  background:var(--green-pale);border-color:var(--green);color:var(--green-dark);transform:none}
.app :is(.dir-quick,.sol-type,.filter-chip,.acct-filter) :is(button[aria-pressed="true"],button[aria-selected="true"],button.active){
  background:var(--green);border-color:var(--green);color:var(--white);
  box-shadow:0 6px 14px -8px color-mix(in srgb,var(--green) 70%,transparent)}
.app :is(.dir-quick,.sol-type,.filter-chip,.acct-filter) button:active{
  background:color-mix(in srgb,var(--green) 85%,#000);border-color:color-mix(in srgb,var(--green) 85%,#000);color:var(--white)}
.app :is(.dir-quick,.sol-type,.filter-chip,.acct-filter) button:focus-visible{outline:2px solid var(--green);outline-offset:2px}
/* Chấm màu phân loại (Danh bạ, Tin tức, Bài của tôi): viền trắng khi viên đặc
   để chấm vẫn tách khỏi nền lục. */
.app :is(.dir-quick,.sol-type,.filter-chip,.acct-filter) button i{width:9px;height:9px;flex:0 0 9px;border-radius:50%;
  background:var(--dir-hue);box-shadow:0 0 0 2px var(--white)}
/* Viên đếm (Giải pháp, bảng của tôi): một kiểu, đảo màu khi viên được chọn. */
.app :is(.dir-quick,.sol-type,.filter-chip,.acct-filter) button :is(span,.bct-num):not(:empty){
  min-width:22px;height:22px;padding:0 7px;border-radius:999px;display:inline-grid;place-items:center;
  font-size:12px;font-weight:700;background:var(--green-pale);color:var(--green-dark)}
.app :is(.dir-quick,.sol-type,.filter-chip,.acct-filter) :is(button[aria-pressed="true"],button[aria-selected="true"],button.active) :is(span,.bct-num):not(:empty){
  background:rgba(255,255,255,.22);color:var(--white)}
.app :is(.dir-quick,.sol-type,.filter-chip,.acct-filter) button span:empty{display:none}
.app .dir-quick-label{color:var(--gray);font-size:14px;font-weight:500}
@media (prefers-reduced-motion:reduce){
  .app :is(.dir-quick,.sol-type,.filter-chip,.acct-filter) button{transition:none}
}

/* ══ 38 · MÀN ĐĂNG KÝ SỰ KIỆN (/events/booking) — HAI VẾT CỦA CHÍNH FILE NÀY ══
   Người dùng 29/09, ảnh màn `?sk=thu-ebms-tai-tro`: "datetime địa điểm... bị ui
   đăng ký tham dự che mất" và "input trong Đăng ký tham dự đang không có padding
   bên trong". Hai lỗi khác chỗ nhưng cùng MỘT nguyên nhân: luật của `_ebms.css`
   bị luật CÙNG CẤP ở file này nuốt, vì file này nạp sau.

   ── a · Thẻ đơn cắt mất hàng thông số của dải đầu ──────────────────────
   `_ebms.css` cố ý cho thẻ đơn đè lên mép dưới dải đầu — `.rsv{margin-top:-72px}`
   — và chừa sẵn chỗ cho cú kéo ấy bằng `.rsv-head{padding-bottom:96px}`:
   72 kéo lên + 24 hở. Nhưng §9 phía trên viết `.head-sub{padding-block:… clamp(18px,2vw,32px)}`,
   CÙNG một class (0,1,0) và nạp sau, nên đệm dưới tụt 96 → 32. Thẻ ăn lẹm đúng
   40px vào dải đầu, vừa đủ nuốt trọn hàng ngày · giờ · địa điểm (đo trên
   staging: `.rsv-border` đáy 285px, `.rsv-card` đỉnh 245px).
   Lặp hai class (0,2,0) để trả lại con số `_ebms.css` đã tính, và ghi thẳng
   phép cộng ra đây: ai sửa -72px thì thấy ngay là phải sửa cả cặp.

   ── b · Ô nhập: nửa gạch chân, nửa cái hộp ─────────────────────────────
   Đúng vết §30. `_ebms.css` vẽ ô kiểu GẠCH CHÂN như Innovation:
   `border:0;border-bottom:1.5px;border-radius:0;padding:9px 2px` — 2px hai bên là
   đủ khi KHÔNG có khung. §7 lại đặt `input:not([type=checkbox]):not([type=radio])
   {border:1.5px solid}` (0,2,1) > `.rsv-fld input` (0,1,1), nên khung mọc lại đủ
   bốn cạnh; còn `padding` với `border-radius` thì §7 không đụng tới nên vẫn giữ
   của gạch chân. Kết quả: cái hộp VUÔNG GÓC có chữ dính sát mép trái.
   Chốt theo HỘP chứ không kéo ngược về gạch chân — hộp là hình thức chung §7 của
   cả site, và ngay trong đơn này textarea (đệm 10px 12px, bo 12px), `.rsv-sel label`
   (cao 46px, đệm 16px), `.rsv-file` (cao 46px, đệm 12px) đều đã là hộp; trả riêng
   ô nhập về gạch chân mới là cái lạc lõng. Không đặt lại màu viền: cứ để §7 cấp
   #CFE3D6 cho khỏi lệch khỏi hệ bạc hà.
   ⚠ Kèm ĐỦ hai `:not()` như §30 đã dặn → (0,3,1), thắng cả §7 lẫn `_ebms.css`.

   Tiêu điểm đổi theo hình: `box-shadow:0 2px 0` là gạch dưới của ô gạch chân,
   nằm dưới đáy một cái hộp thì thành cái đuôi thừa — dùng quầng nhạt như textarea
   cùng đơn. Tiện trả lại luôn vòng hổ phách §3 cho bàn phím: `.rsv-fld input:focus
   {outline:none}` là (0,2,1), cao hơn `input:focus-visible` (0,1,1) ở §3, nên cả
   đơn này đang không có dấu tiêu điểm nào cho người dùng bàn phím. */
.head-sub.rsv-head{padding-bottom:96px}
@container app (max-width:767px){
  .head-sub.rsv-head{padding-bottom:84px}
}
.rsv-fld input:not([type="checkbox"]):not([type="radio"]){
  height:46px;padding:0 14px;border-radius:12px}
.rsv-fld input:not([type="checkbox"]):not([type="radio"]):focus{
  border-color:var(--green);box-shadow:0 0 0 3px var(--green-pale)}
.rsv-fld input:not([type="checkbox"]):not([type="radio"]):focus-visible{
  outline:3px solid #E9A81C;outline-offset:2px}

/* ══════════════════════════════════════════════════════════════════════════
   SỬA THEO KHÁCH KIỂM LẠI 08/10 (ghi 09/10) — vùng bấm, tràn khung, trợ năng.
   Khách nêu từng chỗ trong báo cáo "Lỗi còn phải sửa"; mỗi luật dưới đây chỉ
   nới đúng chỗ được nêu, không đổi màu hay bố cục khác của bản duyệt.
   ══════════════════════════════════════════════════════════════════════════ */

/* BUG-158 · nút VI · EN trên thanh menu máy tính: 28px → 32px (mức sàn dự án). */
.nav .team button{height:32px}

/* BUG-163 · ô "Looking for" của nhu cầu (bản EN, điện thoại): danh sách co được
   trong khung và nhãn xuống dòng, không đẩy viên "7 days left" ra mép phải. */
.sold-want-list{flex:1 1 auto;min-width:0}
.sold-want-list li{flex-wrap:wrap}
.sold-pri-urgent{white-space:nowrap}

/* BUG-72 · link "Bỏ qua tới nội dung chính": ẩn tới khi người dùng bàn phím
   bấm Tab lần đầu, rồi hiện ở góc trên trái, trên mọi lớp. */
.skip-link{position:absolute;left:-9999px;top:12px;z-index:1000;padding:10px 16px;border-radius:10px;
  background:var(--green-btn,#15653D);color:#fff;font-weight:700;text-decoration:none}
.skip-link:focus{left:16px;outline:3px solid #E9A81C;outline-offset:2px}

@container app (max-width:559px){
  /* BUG-79 · nút "Đăng ký tham dự" / "Xem chi tiết" trên thẻ sự kiện: khi xếp
     dọc, `flex:1 1 0` ép chiều cao về 0 → nút bẹp còn 16px. Trả về cao 40px. */
  .ev-card .actions .btn{flex:0 0 auto;min-height:40px}
}

@media (max-width:559px){
  /* BUG-76 · Đăng nhập · Quên mật khẩu: các liên kết nhỏ có vùng bấm 44px. */
  .signin-box .forgot,.signin-left .ticket,.signin-box a{display:inline-flex;align-items:center;min-height:44px}
}

@container app (max-width:767px){
  /* BUG-133 · Bảng điều khiển: nhãn trạng thái sự kiện không bị bóp nhiều dòng. */
  .dash-ev .nhan{white-space:nowrap}
  /* BUG-133 · nút ▲▼ đổi thứ tự (Chuyên mục, Cấu hình Trang chủ, Giới thiệu). */
  .atbl-updown button{width:36px;height:32px}
  /* BUG-151 · ô tích chọn đơn (Thành viên) và công tắc "Bật trường" (Trường hồ sơ). */
  .amem-sel{width:32px;height:32px;flex-basis:32px}
  .adm-toggle{width:56px;height:32px;flex-basis:56px}
  .adm-toggle::after{width:26px;height:26px}
  .adm-toggle:checked::after{transform:translateX(24px)}
}

/* BUG-173 (khách 09/10) · dải "Thông báo hệ thống" trên đầu mọi trang công khai.
   Bản duyệt có công tắc ở Cấu hình hệ thống nhưng chưa vẽ dải; dùng đúng sắc
   chính của thanh điều hướng để không thêm màu mới. */
.site-notice{position:relative;z-index:30;padding:9px 16px;background:var(--green-btn,#15653D);color:#fff;
  font-size:14px;font-weight:600;line-height:1.45;text-align:center}

/* BUG-58 · Trang chủ khi KHÔNG có sự kiện sắp tới: luật `:not(:has(.hp-next))`
   của bản duyệt (3 cột) nặng hơn hai truy vấn khổ hẹp nên điện thoại bị ép ba
   cột, ô "Hợp tác" bị đẩy khuất. Trả về đúng bậc 2 cột · 1 cột như khi có ô.
   Lặp lớp để nặng hơn: ở Trang chủ tệp này nạp TRƯỚC `_home.css`. */
@container app (max-width:1023px){
  .hp-values-card.hp-values-card:not(:has(.hp-next)){grid-template-columns:1fr 1fr}
}
@container app (max-width:639px){
  .hp-values-card.hp-values-card:not(:has(.hp-next)){grid-template-columns:1fr}
}

/* BUG-187 (khách 11/10) · Đặt chỗ: lỗi ngay dưới từng ô + hộp tóm tắt bấm được.
   `[aria-invalid]` nặng hơn luật khung ô của lớp đồng nhất ở trên. */
.rsv-fld input[aria-invalid="true"],.rsv-fld input[aria-invalid="true"]:focus{border-color:var(--err,#B42318);box-shadow:0 2px 0 var(--err,#B42318)}
.rsv-fld-err{color:var(--err,#B42318);font-size:13px;line-height:1.45}
.rsv-agree input[aria-invalid="true"]{outline:2px solid var(--err,#B42318);outline-offset:2px}
.rsv-err p{margin:0}
.rsv-err p+p,.rsv-err p+.rsv-err-list{margin-top:6px}
.rsv-err-list{margin:6px 0 0;padding-left:18px;display:grid;gap:4px}
.rsv-err-go{padding:0;border:0;background:none;color:inherit;font:inherit;text-align:left;text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.rsv-err-go:hover{text-decoration-thickness:2px}

/* BUG-182 (khách 11/10) · bấm "Chọn hoạt động" trong hộp nhắc: danh sách hoạt
   động nháy viền xanh ~2 giây để mắt tìm thấy ngay. */
.det-slotp[data-nhac]{border-radius:14px;animation:nhac-chon 1s ease-in-out 2}
@keyframes nhac-chon{0%,100%{box-shadow:0 0 0 0 rgba(26,130,69,0)}50%{box-shadow:0 0 0 4px rgba(26,130,69,.45)}}
@media (prefers-reduced-motion:reduce){.det-slotp[data-nhac]{animation:none;box-shadow:0 0 0 3px rgba(26,130,69,.45)}}

/* BUG-183 (khách 11/10) · Chi tiết Giải pháp, khối Người giới thiệu: hàng cuối
   gồm biểu tượng kênh (cỡ như thẻ Danh bạ) và "Xem hồ sơ →" ở cuối hàng. SVG
   `.dir-logo` trước đây không có cỡ ngoài thẻ Danh bạ → bung 300×150. */
.sold-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.sold-kenh{display:flex;align-items:center;gap:6px}
.sold-kenh .channel{width:38px;height:38px;border:0;border-radius:10px;background:none}
.sold-kenh .channel:hover{background:var(--cream)}
.sold-kenh .channel .dir-logo{width:28px;height:28px;display:block}
.sold-foot .sold-pf{margin-left:auto}

/* BUG-194 (khách 11/10) · Danh sách sự kiện quản trị: tiêu đề là liên kết tới
   trình biên tập — rê chuột gạch chân + xanh để nhìn biết bấm được. */
.atbl-ten-lk{color:inherit;text-decoration:none}
.atbl-ten-lk:hover b,.atbl-ten-lk:focus-visible b{color:var(--green);text-decoration:underline;text-underline-offset:3px}

/* BUG-189 (khách 11/10) · dòng "Hạn đăng ký" trên thẻ sự kiện: còn ≤ 3 ngày /
   hết hôm nay thì đậm + màu cảnh báo; đã quá hạn thì xám. */
.ev-facts li[data-han="gap"] span{font-weight:700;color:var(--warn,#8A5A05)}
.ev-facts li[data-han="het"] span{color:var(--gray-pale,#8A9A90)}
.hp-ev-line[data-han="gap"],p.border>span[data-han="gap"]{font-weight:700;color:var(--warn,#8A5A05)}
.hp-ev-line[data-han="het"],p.border>span[data-han="het"]{color:var(--gray-pale,#8A9A90)}

/* BUG-184 (khách 11/10) · Trang chủ › Tin tức: nền của dòng đang chọn / rê chuột
   nằm GỌN trong dòng — không tràn hai bên (margin âm của bản duyệt), không đổ
   bóng đè lên dòng bên dưới; bấm vào (:active) không đổi gì. */
.hp-news-row{margin-inline:0;border-radius:12px}
.hp-news-row.is-on{box-shadow:inset 0 1px 0 #fff}

/* BUG-208 (khách 11/10) · NHÃN Ô BIỂU MẪU không phải viên chữ. Mục 6 phía trên
   tô nền bạc hà cho mọi `.adm-label` — đúng với viên trạng thái, nhưng lớp này
   CÒN là nhãn của ô (`.adm-field>.adm-label`): "NỘI DUNG BÀI VIẾT", "AI XEM
   ĐƯỢC", "DIỄN GIẢ"… thành dải nền chạm mép. Trả về đúng kiểu nhãn của `label`. */
.adm-field>.adm-label,.adm-ds-head>.adm-label,legend.adm-label{background:none;border:0;border-radius:0;padding:0}

/* BUG-190 · 203 · 204 · danh sách thêm/xoá dòng dùng chung (`danh-sach-dong.tsx`). */
.adm-ds-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.adm-ds-head>.adm-label{font-size:11.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink)}
.adm-ds-head .adm-btn{flex:0 0 auto;margin-left:auto}
.adm-ds-rong{margin:2px 0 0;font-size:13.5px;color:var(--gray-pale,#8A9A90)}
.adm-ds-list{display:grid;gap:10px}
.adm-ds-dong{display:flex;align-items:center;gap:8px}
.adm-ds-dong--khoi{padding:12px;border:1px solid var(--border,#E0E8CB);border-radius:12px;background:#FCFDF8}
.adm-ds-o{flex:1 1 auto;min-width:0}
.adm-ds-o>.adm-fld{width:100%}
.adm-ds-luoi{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px}
.adm-ds-luoi .adm-ds-rong-het{grid-column:1/-1}
.adm-ds-xoa{flex:0 0 38px;width:38px;height:38px;display:grid;place-items:center;border:0;border-radius:10px;
  background:none;color:var(--gray,#3C5648);font-size:20px;line-height:1;cursor:pointer}
.adm-ds-xoa:hover,.adm-ds-xoa:focus-visible{background:#FFE7DE;color:#B42318}

/* BUG-205 · ô ảnh: ô đường dẫn + nút "Chọn từ thư viện" cùng hàng, nút cao bằng ô. */
.adm-o-nut{display:flex;align-items:stretch;gap:8px}
.adm-o-nut>.adm-fld{flex:1 1 auto;min-width:0}
.adm-o-nut>.adm-btn{flex:0 0 auto;height:auto;min-height:40px}
.adm-anh-xem{display:flex;align-items:flex-end;gap:10px}
.adm-anh-xem img{width:200px;max-width:60%;aspect-ratio:16/9;object-fit:cover;border-radius:10px;border:1px solid var(--border,#E0E8CB)}
@container app (max-width:559px){
  .adm-o-nut{flex-wrap:wrap;justify-content:flex-end}
  .adm-o-nut>.adm-fld{flex-basis:100%}
}

/* BUG-209 (khách 11/10) · Đăng bài: vùng gõ cao như trình soạn ở quản trị —
   tối thiểu 360px (điện thoại 240px), gõ dài thì tự cao thêm; chữ gợi ý khi
   trống. Thanh công cụ dài hơn khổ thì cuộn ngang trong hàng, không xuống dòng. */
.post-compose .dgb-noi{min-height:360px}
.post-compose .dgb-noi p.is-editor-empty:first-child::before{content:attr(data-placeholder);float:left;height:0;pointer-events:none;color:var(--gray-pale,#8A9A90)}
@container app (max-width:559px){
  .post-compose .dgb-noi{min-height:240px}
  .post-compose .post-tools{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:thin}
}

/* BUG-210 · cột phải màn Đăng bài: bản trang khai `overflow:hidden` (để bo góc)
   đè mất `overflow-y:auto` của `.edit-side` — cột dính có trần chiều cao nên
   thẻ người đăng bị cắt. Trả lại cuộn bên trong cột; hai nút vẫn bấm được. */
.post-shell .edit-side.post-side{overflow-y:auto}
/* BUG-211 · Đăng bài: nút "Tải ảnh lên" cao bằng ô đường dẫn; điện thoại ≥ 44px. */
.adm-o-nut>.adm-btn--small{height:auto;min-height:40px}
@container app (max-width:559px){.adm-o-nut>.adm-btn{min-height:44px}}
.adm-anh-xem>.post-load-view{flex:0 0 240px}

/* BUG-202 (khách 11/10) · dòng sự kiện vừa lưu ở trình biên tập: nền nhạt vài giây. */
.atbl-vua-luu>td{animation:vua-luu 4s ease-out}
@keyframes vua-luu{0%,60%{background:#E7F5EA}100%{background:transparent}}

/* BUG-207 (khách 11/10) · hộp "Chọn bài cho vị trí N" của khối Nổi bật Giải pháp. */
.dialog .asol-ghim-dlg{width:min(560px,100%)}
.asol-ghim-tim{margin-top:14px;width:100%}
.asol-ghim-ds{list-style:none;margin:12px 0 14px;padding:0;display:grid;gap:6px;max-height:320px;overflow-y:auto}
.asol-ghim-ds button{width:100%;display:grid;grid-template-columns:72px minmax(0,1fr) auto;align-items:center;gap:12px;padding:8px;
  border:1px solid var(--border,#E0E8CB);border-radius:12px;background:#fff;text-align:left;cursor:pointer}
.asol-ghim-ds button:hover{border-color:var(--green,#15653D)}
.asol-ghim-ds button[aria-selected="true"]{border-color:var(--green,#15653D);background:#E7F5EA}
.asol-ghim-ds img{width:72px;aspect-ratio:16/9;object-fit:cover;border-radius:8px}
.asol-ghim-ds b{display:block;font-size:14px;line-height:1.4;color:var(--ink)}
.asol-ghim-ds small{display:block;margin-top:2px;font-size:12.5px;color:var(--gray)}
.asol-ghim-rong{padding:10px;font-size:13.5px;color:var(--gray-pale,#8A9A90)}

/* BUG-192 (khách 11/10) · tab Thành viên đăng ký: Tìm (rộng nhất) · Sự kiện · Trạng thái
   trên một hàng; khổ hẹp thì xuống hàng, ô tìm chiếm cả hàng. */
.adm-filter--dk{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.adm-filter--dk .adm-dk-tim{flex:2 1 320px;min-width:0}
.adm-filter--dk .adm-dk-sk{flex:1 1 220px;min-width:0;max-width:360px}
@container app (max-width:767px){.adm-filter--dk .adm-dk-tim{flex-basis:100%}}

/* BUG-243 · BUG-133 (khách 11/10) · vùng bấm nút phụ ở khu quản trị ≥ 32px ở MỌI khổ —
   trước chỉ ép ở khổ < 768px, khổ rộng còn 28×22 / 28×28 / 30px.
   ① ▲▼ đổi thứ tự (Chuyên mục, Cấu hình Trang chủ, Cấu hình Giới thiệu);
   ② Giải pháp › khối Nổi bật: Bỏ ghim / Lên / Xuống;
   ③ thanh công cụ trình soạn (Tin tức · Sự kiện) và thanh công cụ màn Đăng bài. */
.atbl-updown button{min-width:32px;min-height:32px}
.asol-fld-btn button{min-width:32px;min-height:32px}
.rich-text-editor .rich-text-editor__btn{min-width:32px;height:32px}
.adm-compose-plus button,.adm-compose-plus select{height:32px;min-width:32px}

/* BUG-235 · BUG-239 (khách 11/10) · Quản trị › Trường hồ sơ: khối gấp "Đã lưu trữ" dưới
   bảng (mỗi trường một hàng, nút Khôi phục bám phải) và lỗi máy chủ in ngay trong ngăn Sửa,
   sát hàng nút — không chỉ thoáng qua ở lời nhắc góc màn. */
.pfield-luu-tru{margin-top:16px;padding:12px 18px}
.pfield-luu-tru-nut{font-weight:700}
.pfield-luu-tru-ds{list-style:none;margin:10px 0 4px;padding:0;display:grid;gap:6px}
.pfield-luu-tru-ds li{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;
  border:1px solid var(--border);border-radius:12px;background:var(--bird)}
.pfield-luu-tru-ds small{font-size:12.5px;color:var(--gray)}
.pfield-loi-may{margin:0 22px 12px}
.pfield-kind-fld .adm-alert,.pfield-kind-fld .err-fld{margin-top:10px}

/* BUG-213 (khách 11/10, chủ dự án chốt 12/10) · khối Địa điểm dùng BẢN ĐỒ THẬT
   (Google Maps nhúng theo địa chỉ sự kiện) thay ảnh minh hoạ `map-tpl.svg`.
   `.detloc-img` vẫn lo cỡ khung (100% × 100%); khung nhúng có viền mặc định.
   Khổ rộng: thẻ thông tin đè mép trái khối, mà Google đặt ghim ở GIỮA khung —
   nên khung bản đồ bắt đầu sau thẻ (28 + rộng thẻ + 28), ghim không bị che.
   Khổ hẹp (≤620) thì bản đồ xếp trên thẻ, giữ nguyên luật cũ. */
.detloc-map{border:0}
@container detloc (min-width:621px){
  .detloc-desk:has(.detloc-map){left:calc(min(390px,100% - 56px) + 56px)}
}

/* BUG-85 (khách 03/10 → 11/10) · trang Ngày hội xô lệch khi tải trên điện thoại
   (CLS 0,43). Phông Google nạp `display=swap`: trong lúc chờ, chữ vẽ bằng phông
   máy (Arial · Times) HẸP hơn hẳn Montserrat / Noto Serif, tới khi phông thật về
   thì tiêu đề dài của Ngày hội ("Ngày hội cộng đồng: Pickleball, tọa đàm và Gala
   Dinner", 3–4 dòng ở khổ 390) dài thêm dòng và đẩy cả màn đầu xuống.
   Chữa: phông dự phòng ĐÃ CHỈNH CỠ theo đúng số đo của phông thật — cùng cách
   `next/font` làm, cùng con số (`calculateSizeAdjustValues` của Next, từ bảng
   capsize). Chữ dự phòng chiếm đúng chỗ của chữ thật, đổi phông không xô dòng.
   Ba biến phông chép lại từ `_common.css`, chỉ chèn tên phông dự phòng ngay sau
   phông thật. Máy không có Arial/Times (Android) thì `local()` không khớp, trình
   duyệt đi tiếp xuống danh sách như cũ. */
@font-face{font-family:'Inter Fallback';src:local('Arial');
  ascent-override:90.44%;descent-override:22.52%;line-gap-override:0%;size-adjust:107.12%}
/* Montserrat chỉ dùng cho tiêu đề IN HOA: số 112.83% của Next đo trên chữ thường, với chữ in
   hoa có dấu thì Arial rộng hơn 3–5% → tiêu đề dài thêm một dòng lúc chờ phông (đo 12/10). */
@font-face{font-family:'Montserrat Fallback';src:local('Arial');
  ascent-override:85.79%;descent-override:22.25%;line-gap-override:0%;size-adjust:108.5%}
@font-face{font-family:'Noto Serif Fallback';src:local('Times New Roman');
  ascent-override:90.29%;descent-override:24.75%;line-gap-override:0%;size-adjust:118.40%}
:root{
  --font-ui:'Inter','Inter Fallback','Be Vietnam Pro','Segoe UI',-apple-system,Roboto,sans-serif;
  --font-title:'Montserrat','Montserrat Fallback','Inter','Segoe UI',sans-serif;
  --font-article:'Noto Serif','Noto Serif Fallback',Georgia,'Times New Roman',serif}

/* BUG-158 (kiểm lại 11/10) · nút VI · EN thanh menu máy tính vẫn 38×28: luật 32px ở trên
   thua `.v6 .nav .team button{height:28px}` của _home.css (nặng hơn, lại nạp SAU _unify ở
   Trang chủ). Thêm `[type]` để nặng hơn cả hai. Khung `.team` cao 40px, viền 1px hai mép
   → lòng 38px: nút 36px vừa khít, bố cục thanh menu không đổi. */
.nav .team button[type],.v6 .nav .team button[type]{height:36px;min-width:40px}

/* BUG-223 · BUG-241 · BUG-225 · BUG-229 (khách 11/10) · màn Đặt chỗ + trang vé /tickets/<mã>.
   ① Ô QR chuyển khoản là ẢNH VietQR thật (`.rsv-qr--that`) — bỏ nền bàn cờ CSS của bản
      duyệt; ảnh `compact2` cao hơn rộng nên ô theo chiều cao ảnh.
   ② Chưa cấu hình tài khoản: khối chỉ còn câu "ban tổ chức sẽ gửi hướng dẫn" — một cột.
   ③ Câu hỏi riêng của vé trong khối người tham dự; `select` cùng dáng ô nhập của đơn.
   ④ Danh sách vé ở trang vé: mã QR thật của từng vé + người cầm + trạng thái. */
.rsv-qr.rsv-qr--that{height:auto;min-height:168px;background:var(--white);display:grid;place-items:center;overflow:hidden}
.rsv-qr--that img{display:block;width:100%;height:auto}
.rsv-xfer.rsv-xfer--chua{grid-template-columns:minmax(0,1fr)}
.rsv-xfer--chua .rsv-suggest{margin-top:8px;line-height:1.6}
.rsv-hoi{display:grid;gap:16px;margin-top:18px;padding-top:16px;border-top:1px dashed var(--border)}
.rsv-hoi .rsv-group{margin:0}
.rsv-hoi .rsv-group[aria-invalid="true"] .rsv-sel label{border-color:var(--err,#B42318)}
.rsv-hoi-goi{display:block;margin-top:6px;font-size:13px;line-height:1.5;color:var(--gray)}
.rsv-fld select{width:100%;height:46px;padding:0 14px;border:1.5px solid var(--border-field);border-radius:12px;background:var(--white);
  font:inherit;font-size:15px;color:var(--ink)}
.rsv-fld select:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px var(--green-pale)}
.rsv-fld select:focus-visible{outline:3px solid #E9A81C;outline-offset:2px}
.rsv-fld select[aria-invalid="true"],.rsv-fld textarea[aria-invalid="true"]{border-color:var(--err,#B42318)}
.rsv-ve{list-style:none;margin:24px clamp(16px,4vw,48px) 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:14px}
.rsv-ve-the{display:flex;gap:16px;align-items:center;padding:16px;border:1px solid var(--border);border-radius:16px;background:var(--white)}
.rsv-ve-qr{flex:0 0 120px;width:120px;height:120px;border-radius:10px;background:var(--white);color:var(--ink);box-shadow:inset 0 0 0 1px var(--border)}
.rsv-ve-qr path{fill:currentColor}
.rsv-ve-qr--cho{display:block;background:repeating-linear-gradient(45deg,var(--bird) 0 8px,var(--white) 8px 16px)}
.rsv-ve-text{display:flex;flex-direction:column;gap:4px;min-width:0}
.rsv-ve-text small{font-size:13px;color:var(--gray)}
.rsv-ve-text b{font-size:16px;line-height:1.35;color:var(--ink);overflow-wrap:anywhere}
.rsv-ve-text .rsv-code{font-size:15px;overflow-wrap:anywhere}
.rsv-ve-text .label{align-self:flex-start}
@container app (max-width:559px){
  .rsv-ve-qr{flex-basis:96px;width:96px;height:96px}
}

/* BUG-206 (khách 11/10) · tab Xem trước của trình biên tập Tin tức. §9 đã đổi
   .alist-view-head sang nền SÁNG nhưng các nét chữ của .amod-view-head vẫn là bản
   nền tối (tiêu đề trắng, hàng viên trắng, `.alist-view-head b` biến cả tên người
   đăng thành chữ hoa 26px) → chữ trắng trên nền lục nhạt. Chép mực của trang Tin
   chi tiết công khai. */
.amod-view-head b{color:#0B2016}
.alist-view-head .amod-view-path{color:#4A6B58}
.amod-view-path span{color:#15653D}
.amod-view-border>span{background:#FFFFFF;border-color:rgba(31,143,74,.22);color:#0B2016}
.amod-view-border .adm-ic{color:#15653D}
.amod-view-ng b{display:inline;margin:0;font-family:inherit;font-size:12.5px;font-weight:700;text-transform:none;line-height:inherit;color:#0B2016}
.amod-view-ng i{background:#E7F5EA;color:#15653D}
.amod-view-ng small{color:#4A6B58}

/* BUG-70 (12/10): nút "✕ Đóng" của ngăn Menu điện thoại — 44px vẫn trông nhỏ vì mang
   cỡ `btn--small` (chữ 14px, rộng 85px) cạnh các mục menu chữ 18px, cao 52px. Nâng lên
   cỡ ngang hàng mục menu: cao 48px, chữ 16px, rộng tối thiểu 112px. */
.drawer-menu .body-drawer .line-drawer{height:48px;min-height:48px;min-width:112px;padding:0 20px;font-size:16px;font-weight:600;gap:8px;border-radius:12px;margin-bottom:6px}

/* Hộp menu tài khoản không tràn mép màn (12/10): bề rộng không quá màn trừ hai lề
   12px; vị trí do `MenuTaiKhoan` đo và đẩy vào trong, mũi nhọn dời theo `--acct-mui`. */
.acct-bin{width:min(330px,calc(100vw - 24px))}
.acct-bin::before{right:var(--acct-mui,26px)}

/* BUG-85 (đo lại 12/10, Lighthouse khổ 412) · CLS 0,14 còn lại ở trang Ngày hội: hàng chip
   "ngày · giờ · địa điểm · hạn" ở đầu trang là flex-wrap, và ở khổ 412 chip ngày (204px) +
   chip giờ (154px) + khoảng 10px vừa khít 372px với phông thật — phông dự phòng rộng hơn
   2px/chip nên chip giờ rơi xuống dòng, phông thật về thì nhảy lên, kéo cả trang lên 54px.
   Sát mép thế thì không chỉnh cỡ phông nào cứu nổi. Trên điện thoại mỗi chip một dòng —
   đúng bố cục khổ 390 vẫn thấy — để số dòng không còn phụ thuộc bề rộng chữ. */
@container app (max-width:559px){
  .head-sub .border{flex-direction:column;align-items:flex-start}
}

/* BUG-254 (13/10): chân trang bỏ dải "Facebook · Nhóm Zalo cộng đồng" — cột thương hiệu
   chỉ còn logo + câu giới thiệu, câu đó là phần tử cuối nên bỏ lề dưới 12px vốn để
   chừa chỗ cho dải nút, khỏi để một khoảng trống dưới chữ. */
.foot .col-head p:last-child{margin-bottom:0}

/* BUG-258 (13/10) · Hồ sơ thành viên, tab Tổng quan: MỘT lưới 3 cột cho cả tab.
   Hàng 1 Giới thiệu và hàng 3 Thông tin khác trọn hàng (khối đứng riêng trong
   `.mypf-kl`, cao theo nội dung); hàng 2 là `.hsx-tq-hang` — mỗi khối một cột bằng
   nhau, có ba khối thì đúng 1/3, thiếu khối thì các khối còn lại chia đều (không ô
   trống).
   Ba khối hàng 2 "cùng dáng": mỗi khối là subgrid 3 hàng (đầu khối · nội dung ·
   liên kết) của lưới cha, nên vạch dưới tiêu đề thẳng nhau cả khi một tiêu đề xuống
   dòng ("Lĩnh vực và khu vực" ở khổ 1280), và "Xem … →" cùng nằm sát đáy. Hàng
   chip bám đỉnh (không giãn theo hàng lưới); Lĩnh vực không có liên kết nên phần
   nội dung trải qua cả hàng thứ ba, khỏi thừa một khe dưới đáy.
   Trường của Thông tin khác thẳng mép CHỮ với ba khối hàng 2: khối có viền 1px + lề
   trong 24px, nên khe giữa hai cột bên trong = khe lưới 18px + 2 × 25px = 68px — khi
   đó mỗi cột trong rộng đúng bằng phần chữ của một khối hàng 2.
   Máy tính bảng (app < 1180px — cột nội dung dưới ~760px, ba cột thì chip vỡ chữ):
   Lĩnh vực và khu vực trọn hàng (hai nhóm chip thành hai cột, thẳng với hai khối
   dưới) + Đang cung cấp · Đang tìm kiếm chia đôi; Thông tin khác hai cột.
   Điện thoại (< 560px): một cột, đúng thứ tự trên. */
.hsx-tq-hang{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);column-gap:18px;row-gap:0}
.hsx-tq-hang>.mypf-k{display:grid;grid-row:span 3;grid-template-rows:subgrid;row-gap:16px;align-content:start}
.hsx-tq-hang>.mypf-k>:not(.mypf-k-head){align-self:start}
.hsx-tq-hang>.mypf-k>.pfv-k-link{align-self:end;justify-self:start;margin-top:0}
.hsx-tq-lv>.pfv-fld{grid-row:2/4}
.hsx-tq-lv .pfv-fld,.pfv-set .hsx-tq-khac .pfv-fld{column-gap:68px}
.hsx-tq-lv .pfv-fld{grid-template-columns:minmax(0,1fr)}
.pfv-set .hsx-tq-khac .pfv-fld{grid-template-columns:repeat(3,minmax(0,1fr))}
@container app (max-width:1179px){
  .hsx-tq-hang{grid-auto-flow:row;grid-template-columns:repeat(2,minmax(0,1fr));row-gap:18px}
  .hsx-tq-hang>.hsx-tq-lv,.hsx-tq-hang>:only-child,.hsx-tq-lv+:last-child{grid-column:1/-1}
  .hsx-tq-lv .pfv-fld,.pfv-set .hsx-tq-khac .pfv-fld{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@container app (max-width:559px){
  .hsx-tq-hang,.hsx-tq-lv .pfv-fld,.pfv-set .hsx-tq-khac .pfv-fld{grid-template-columns:minmax(0,1fr)}
}
/* BUG-252 (khách 13/10) · Đăng ký thành viên: gửi đơn bị từ chối thì nói rõ từng
   chỗ. Hộp tóm tắt đầu thân form — cùng hình hộp lỗi của Đặt chỗ (`.rsv-err`,
   BUG-187): nền đỏ nhạt, chữ đỏ, mỗi chỗ một nút "Sửa ở bước …" gạch chân. */
.reg-sum{margin:0 0 18px;padding:12px 14px;border-radius:12px;background:var(--err-bg);color:var(--err);font-size:14.5px;line-height:1.5}
.reg-sum[hidden]{display:none}
.reg-sum p{margin:0}
.reg-sum p+p,.reg-sum p+.reg-sum-list{margin-top:6px}
.reg-sum-list{margin:6px 0 0;padding-left:18px;display:grid;gap:4px}
.reg-sum-go{padding:0;border:0;background:none;color:inherit;font:inherit;font-weight:700;text-align:left;text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.reg-sum-go:hover{text-decoration-thickness:2px}
/* Hai lối đi tiếp gắn sau câu "Email này đã được đăng ký…" dưới ô email. */
.reg .err-fld a{color:inherit;font-weight:700;text-decoration:underline;text-underline-offset:2px}
/* Ô đồng ý chưa tích: viền đỏ như ô đồng ý của Đặt chỗ. */
.reg-agree input[aria-invalid="true"]{outline:2px solid var(--err);outline-offset:2px}

/* BUG-253 (khách 13/10) · thanh bước: bước còn chỗ sai của lượt gửi trước KHÔNG
   tích xanh — đĩa đỏ giữ số bước, tên bước chữ đỏ. */
.reg-step li[data-st="err"] .reg-step-num{background:var(--err);color:#fff;box-shadow:0 0 0 4px var(--err-bg)}
.reg-step li[data-st="err"] .reg-step-text{color:var(--err);font-weight:700}
/* BUG-256 · BUG-257 · BUG-261 (khách 13/10) · NHÃN TRẠNG THÁI CHỖ — một kiểu cho
   mọi nơi hiện sự kiện: góc ảnh thẻ /events, góc ảnh thẻ khối Sự kiện Trang chủ,
   đầu màn chi tiết, cột chọn hoạt động khối Chương trình. Component dùng chung:
   `components/cong-khai/su-kien/nhan-trang-thai-cho.tsx`, kiểu ở `data-cho`.
   Trước đây §6 tô MỌI `.label` thành viên bạc hà chữ xanh, nên "Đã đóng đăng ký"
   (label--neutral) và "Sắp hết" (label--warning) trông y hệt "Còn N chỗ" — lướt
   nhanh tưởng sự kiện còn mở. Màu lấy trong bảng sẵn có (khách đề xuất):
     con        giữ như cũ — viên trắng, chấm + chữ xanh lục
     sap-het    nền --warn-bg #FDF2DC, chữ + chấm --warn #8A5A05 (≈ 5,6:1)
     dong · het nền đặc --neutral #4A5568, chữ trắng (≈ 7,5:1), ổ khoá thay chấm —
                nền đặc khác hẳn viên trắng nên nhận ra ngay trên ảnh bìa xanh.
   Bộ chọn mang `.label.nhan-cho[data-cho]` (0,3,0) để thắng §6 và `_home.css`
   (nạp sau ở Trang chủ). */
.label.nhan-cho[data-cho="sap-het"]{background:#FDF2DC;color:#8A5A05;border-color:rgba(138,90,5,.26)}
.label.nhan-cho[data-cho="dong"],.label.nhan-cho[data-cho="het"]{background:#4A5568;color:#FFFFFF;border-color:#4A5568}
.label.nhan-cho[data-cho="dong"]::before,.label.nhan-cho[data-cho="het"]::before{display:none}
.label.nhan-cho[data-cho] .ic{width:13px;height:13px;flex:0 0 13px;margin:0;color:currentColor}
/* Trên ẢNH BÌA: bóng nhẹ như viên hình thức bên trái, để viên đứng tách khỏi ảnh. */
.ev-img .label.nhan-cho,.hp-ev-img .label.nhan-cho{box-shadow:0 6px 16px -8px rgba(0,0,0,.35)}
/* Trang chủ (BUG-257): cùng vị trí với `.ev-scene` của /events — góc trên phải
   ảnh, ngang viên "Sắp diễn ra" bên trái; cỡ chữ theo viên ấy. Thẻ bốn cột HẸP
   (khổ ~1100, thẻ < 320px) thì hai viên không vừa một hàng: viên chỗ xuống ngay
   dưới viên trạng thái, mép trái — vẫn một dòng, không đè, không gãy chữ. */
.hp-ev .hp-ev-img{container:hp-ev-anh/inline-size}
.hp-ev .hp-ev-img .label.nhan-cho{position:absolute;right:14px;top:14px;z-index:1;
  max-width:calc(100% - 28px);padding:3px 10px;font-size:12.5px}
@container hp-ev-anh (max-width:319px){
  .hp-ev .hp-ev-img .label.nhan-cho{right:auto;left:14px;top:48px}
}
/* Dòng "Đã hết hạn đăng ký (dd/mm/yyyy)": chữ xám đậm + ổ khoá, đồng bộ với nhãn
   (BUG-256). Trước là xám nhạt #8A9A90 — đọc như chữ phụ, không như trạng thái. */
.ev-facts li[data-han="het"] span,.ev-facts li[data-han="het"] .ic{color:#4A5568}
.hp-ev .hp-ev-line[data-han="het"],.hp-ev .hp-ev-line[data-han="het"] .ic{color:#4A5568}
.head-sub p.border>span[data-han="het"],.head-sub p.border>span[data-han="het"] .ic{color:#4A5568}
/* BUG-261 · buổi KHOÁ (đã đóng đăng ký / hết chỗ) trong khối Chương trình: không
   tích được thì không được trông như tích được — bỏ mọi hiệu ứng rê chuột (nền,
   viền, bóng, nhấc), con trỏ "không thao tác được" trên cả khối. Ô tích tắt và ẩn
   (`.sr-only`), nhãn khoá xám đậm đứng thay. */
.det-slotp .det-actions.det-actions--khoa{cursor:not-allowed}
.det-slotp .det-actions.det-actions--khoa:hover{transform:none;translate:none;box-shadow:none;border-color:var(--border,#E0E8CB);background:var(--white,#FFFFFF)}
.det-slotp .det-actions.det-actions--khoa .sel,.det-slotp .det-actions.det-actions--khoa:hover .sel{background:var(--bird,#FCFDF2)}
.det-slotp .det-actions.det-actions--khoa input{cursor:not-allowed}
/* BUG-259 (13/10): bảng lỗi CHỈ ĐƯỜNG dưới trình dựng EBMS — tên bước + tên mục, mỗi dòng
   một nút đưa tới đúng chỗ. Nút chữ đi liền dòng, không bẻ khối đỏ thành hàng nút to. */
.eb-loi{margin-top:14px}
.eb-loi>div{display:flex;flex-direction:column;gap:6px;min-width:0}
.eb-loi p,.eb-loi ul{margin:0}
.eb-loi ul{padding-left:18px;display:flex;flex-direction:column;gap:2px}
.eb-loi .adm-btn--text{display:inline;padding:0;min-height:0;height:auto;color:inherit;font-weight:600;text-decoration:underline;text-align:left;white-space:normal}

/* BUG-262 (13/10): hàng "Hạn đóng đăng ký · Giờ đóng" ở thẻ Thiết lập đăng ký, ngay trên
   trình dựng EBMS (bước 2 của trình dựng không có hạn đóng). */
.sk-han-dong{margin-bottom:6px}
.sk-han-dong-chu{margin:0 0 16px}

/* BUG-269 (13/10) · chữ báo lỗi dưới ô phải ĐỎ ở mọi form, như form Liên hệ.
   `.err-fld{color:var(--err)}` của _common.css chỉ (0,1,0); §9 file này tô
   `.head-sub p,.signin-left p,.reg p{color:#33513F}` (0,1,1) nên ở Đăng ký thành
   viên (và mọi `<p class="err-fld">` nằm trong dải `.head-sub`) chữ lỗi thành xám
   xanh, lẫn với chữ gợi ý — trong khi viền ô vẫn đỏ. Hai class → (0,2,0) thắng §9. */
.head-sub .err-fld,.signin-left .err-fld,.reg .err-fld{color:var(--err)}

/* BUG-270 (13/10) · ô từ khoá bước ④ Nhu cầu (Lĩnh vực · Đang tìm kiếm · Dịch vụ):
   MỘT khung. Khung là `.fld-suggest-box`; ô gõ bên trong phải trong suốt — đúng vết
   §30: §7 `input:not(…):not(…)` (0,2,1) vẽ lại viền + nền trắng + bo 12px cho
   `.fld-suggest-fld` (`border:0` của _common.css chỉ (0,1,0)), thành hai khung lồng.
   Kèm đủ hai `:not()` → (0,4,1). Tiêu điểm: chỉ vòng `:focus-within` của khung. */
.reg-tag .fld-suggest-fld:not([type="checkbox"]):not([type="radio"]){
  border:0;background:none;border-radius:0;box-shadow:none}
.reg-tag .fld-suggest-fld:focus,.reg-tag .fld-suggest-fld:focus-visible{outline:0;border:0;box-shadow:none}

/* BUG-271 (13/10) · bước ⑤ Xem lại: thẻ danh bạ xem trước phải ĐÚNG màu thẻ Danh bạ.
   §9 `.reg p{color:#33513F}` (0,1,1) đè các `<p>` của `.dir-card` (0,1,0): nhãn
   "DBA 2022" thành chữ xanh tối trên kính tối, gần như tàng hình. Trả lại màu
   của _screens.css (thẻ Danh bạ): chữ trắng trên viên tối, chức danh/giới thiệu
   xám, doanh nghiệp mực. */
.reg .dir-card .dir-card-det{color:#fff}
.reg .dir-card .dir-card-cd,.reg .dir-card .dir-card-about,.reg .dir-card .dir-card-svc-label{color:var(--gray)}
.reg .dir-card .dir-card-company{color:var(--ink)}
/* BUG-278 (13/10): đầu cột xếp được ở bảng Sự kiện (Ngày diễn ra · Cập nhật). Nút
   mang nguyên chữ của <th> (cỡ, hoa, giãn chữ, màu) — chỉ thêm mũi tên chiều xếp;
   cột đang xếp đậm màu hơn. */
.adm-table th .atbl-xep{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:6px;
  font:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit;white-space:nowrap}
.adm-table th .atbl-xep span{font-size:12px;opacity:.55}
.adm-table th .atbl-xep[data-dang] span{opacity:1}
.adm-table th .atbl-xep:hover{text-decoration:underline;text-underline-offset:3px}
.adm-table th .atbl-xep:focus-visible{outline:2px solid currentColor;outline-offset:3px;border-radius:4px}
/* BUG-274 (13/10) · thân bài trộn hai phông: đoạn dẫn `.newsd-sapo` là Inter, từ đoạn hai
   trở đi (và khối "Về sự kiện" `.det-about`) là Noto Serif có chân. Bộ phông của dự án chỉ
   có Inter + Montserrat — khách chọn MỘT phông cho thân bài: Inter. Đổi ở biến, nên mọi chỗ
   đọc `--font-article` (thân tin, "Về sự kiện", khung xem trước của trình Đăng bài) cùng
   về Inter. Muốn phông có chân cho bài dài thì đổi lại biến này cho CẢ bài, và ghi vào
   chuẩn thiết kế — phải chốt với khách trước. */
:root{--font-article:var(--font-ui)}

/* BUG-277 (13/10) · Liên hệ nhóm Admin · Câu hỏi thường gặp · Hướng dẫn sử dụng.
   ① Thân trang cắt ở 1200px rồi căn giữa → trên màn rộng nội dung bắt đầu ở x≈112 trong
      khi logo và tiêu đề đầu trang ở x≈37. Dùng thẳng khung `.container` của đầu trang
      cho thẳng mép trái – phải; cột chữ `.prose` vẫn giữ bề rộng đọc riêng của nó.
   ② `.block{padding-block:112px}` của _screens.css nạp SAU `.block--doc` của _common.css
      nên luật siết đệm của màn văn bản không bao giờ chạy — ~110px trắng giữa dải đầu
      trang và biểu mẫu. Tăng độ nặng để luật đó thắng.
   ③ Biểu mẫu một bước không đánh số nữa (man-hop-thu.tsx): đầu hộp về một cột. */
.block.block--doc{padding-block:clamp(36px,4vw,56px) clamp(56px,6vw,88px)}
.block--doc .cpg-grid,.block--doc .page-doc,.block--doc .excerpt{max-width:none;margin-inline:0}
.fm-box>.fm-head:not(:has(>.fm-num)){grid-template-columns:minmax(0,1fr)}