/* ══════════════════════════════════════════════════════════════════
   AIT KẾT NỐI — CSS DÙNG CHUNG (token + component)
   Nguồn luật: 03-Design/DESIGN_WEB_STANDARDS.md · COMMON_COMPONENTS.md
   Dùng bởi: 03-Design/design-system.html và 03-Design/mockup/*.html

   Sửa ở đây là sửa cho MỌI trang. Không chép khối này vào file HTML —
   hai bản sao sẽ trôi khỏi nhau.

   Điểm ngắt dùng @container app (không dùng @media) để khung "Điện thoại"
   của mockup co giãn đúng như máy thật. Phần tử bọc ngoài phải có class
   .app (container-type:inline-size).
   ══════════════════════════════════════════════════════════════════ */

:root{
  /* ⚑ 19/09/2026: TOÀN SITE ĐỔI SANG TÔNG TRANG CHỦ (theme Discord). Giá trị
     các token dưới đây đã đổi từ navy sang chàm / blurple — TÊN GIỮ NGUYÊN để
     mọi component tự đổi theo. Bảng cũ → mới và tỉ lệ đo: DESIGN_WEB_STANDARDS
     §2 (mục "Đổi tông 19/09"). */
  /* 2A · thương hiệu — hệ navy, theo trang chủ đã chốt.
     Tên biến giữ nguyên để không phải sửa component; chỉ giá trị đổi. */
  --green:#15653D; --green-sub:#1F8F4A; --green-light:#8FE04A; --green-pale:#E4FBE9;
  --gold:#E9A81C; --gold-light:#F2B417; --brown:#2A1D02;
  --cream:#FBFCEF; --white:#FFFFFF;
  /* 2B · chữ, viền */
  --ink:#0B1220; --gray:#4A5568; --gray-pale:#66758D;
  --border:#E0E8CB; --border-field:#7F90AA; --green-deep:#08281A;

  /* ── DẢI NỀN TỐI CỦA ĐẦU TRANG — phương án "Sáng xanh", chốt 16/09/2026 ──
     Năm chặng đi từ đáy lên đầu sáng, đầu sáng đúng hướng xanh thương hiệu
     #1257C4. So với bản trước, đáy kéo từ #05070E (gần như đen tuyền) lên
     #0A1528: đầu trang vẫn tối, nhưng tối RA MÀU XANH chứ không ra màu đen.
     Ba màu chữ đi kèm đã đo lại: đều đạt AA trên CẢ NĂM chặng, kể cả chặng
     sáng nhất #2059B8 — nên dù chữ rơi vào vùng nào của dải cũng đọc được.
     Đầu trang chủ và cột trái màn Đăng nhập DÙNG CHUNG dải này.            */
  --dark-1:#062015; --dark-2:#0B3623; --dark-3:#0F4D31; --dark-4:#13653F; --dark-5:#1A7F4E;
  --dark-text:#E2EEC6;    /* câu dẫn, chữ thân trên nền tối · 4.58 ở chặng sáng nhất */
  --dark-label:#D8E8B4;   /* nhãn chuyên mục, chữ nhấn   · 4.67 ở chặng sáng nhất */
  --dark-sub:#E2EEC6;    /* chữ nút phụ                 · 4.63 ở chặng sáng nhất */
  --dark-field:#0B1A09;      /* ruột vòng tròn trong chòm kết nối */
  /* 2A·2 · bốn sắc nhấn — dùng cho chấm chuyên mục, vòng avatar, cung nền.
     Bốn sắc này là thứ giữ trang khỏi rơi vào một tone xanh phủ kín. */
  --s1:#E23FB8; --s2:#2FC4F5; --s3:#F2B417; --s4:#5CD97E;
  /* ⚑ Đề xuất 17/09/2026 — khách (qua Zalo) chê đầu trang "hơi chán", xin thử
     màu nõn chuối. Dùng làm SẮC THỨ NĂM — chỉ cho mảng trang trí/chữ lớn ở
     đầu trang, không đưa vào bảng chuyên mục §2E (đã đủ bốn, đổi là vỡ toàn
     bộ bản đồ trạng thái). Đo trên --dark-5 (chặng sáng nhất): 4.99:1 — đạt
     cả chữ thường trên nền tối. Trên nền trắng chỉ 1.32:1 — không bao giờ
     làm chữ trên nền sáng. CẦN KH DUYỆT đúng sắc trước khi khoá cứng. */
  --banana-base:#DCE87E;
  /* ⚑ 2A·4 · BỘ NÕN CHUỐI — đề xuất 18/09/2026 cho trang-chu-v3.html.
     KH nhắn (Zalo): màu đang chọn "xấu quá thì thay đổi cũng được. Cho nó
     sinh động vào… thử lấy cái màu nõn chuối". v3 đưa nõn chuối từ vai phụ ở
     đầu trang tối lên làm MẢNG MÀU CHÍNH trên nền sáng; navy lùi về làm màu
     mực (chữ, nút đặc, chân trang) để còn ăn với vành xanh của logo.
     Chỉ trang-chu-v3 dùng bốn token này — màn khác chưa đổi cho tới khi KH
     chọn bản. Tỉ lệ đã đo ở DESIGN_WEB_STANDARDS §2A·4.                    */
  --banana-bg:#F7F8EC;   /* nền trang — kem ngả nõn chuối, thay --cream ngả lam */
  --banana-pale:#EDF3C4;  /* mảng nhạt: khung khối, nền thẻ xen kẽ */
  --banana-deep:#A9BE2E;   /* vạch, chấm, viền nhấn — KHÔNG làm chữ (2.08 trên trắng) */
  --banana-text:#4B5A0A;   /* chữ mang sắc nõn chuối trên nền sáng · 7.6 trên trắng */
  /* ⚑ 2A·5 · HAI MẶT NỀN CỦA trang-chu-v4 (đề xuất 18/09/2026). Lấy lối "đá ấm"
     của các hệ thiết kế hiện đại (tham khảo styles.refero.design · Caldera):
     phân lớp bằng MÀU MẶT, không bằng viền hay bóng đổ. Nền trang tối hơn
     mặt thẻ một nấc. ⚠ --gray-pale (3.82) và --ok (4.38) KHÔNG đạt trên
     --v4-skin — hai màu này chỉ đặt trên --v4-face hoặc trắng. */
  --v4-skin:#E8E9E0;    /* nền trang v4 · mực 14.57 · --gray 6.15 · --green 5.39 */
  --v4-face:#F6F6F0;   /* mặt thẻ v4  · mực 16.43 · --gray 6.94 · --ok 4.94   */
  /* ⚑ 2A·6 · BẢNG MÀU DISCORD CHO index.html (18/09/2026).
     Người dùng: "dùng luôn style layout file DESIGN.md… dùng luôn màu tím đó…
     tóm lại dùng y nguyên đi". Mã màu chép NGUYÊN từ 03-Design/Archieved/2026-09-19-don-03-design/DESIGN.md
     (riêng Fuchsia DESIGN.md ghi thiếu một số "#eb459" — mã đúng của Discord
     là #EB459E). Hiện chỉ màn Trang chủ dùng — màn khác vẫn navy. Đo ở DESIGN_WEB_STANDARDS §2A·6.
     ⚠ Fog / Greyple KHÔNG đặt trên mảng tím–hồng (Fog trên #8B31A0 chỉ 3.71).
     ⚠ Chữ trắng trên --v6-pink chỉ 3.88 — chữ đặt ở đầu TÍM của dải.       */
  --v6-bg:#FFFFFF;         /* Cosmic Page — nền trang · trắng 18.67 · Fog 10.03 */
  --v6-blurple:#1F8F4A;     /* nút chính · chữ trắng 4.61                      */
  --v6-blurple-deep:#17703A; /* nút chính khi rê · trắng 7.17                   */
  --v6-blurple-pale:#8FE04A;/* Hover Blurple — chữ nhấn, viền focus · 6.56 trên nền */
  --v6-leaf:#3FCB6E;          /* Spring Green — trạng thái "đang diễn ra" · 9.26 trên --v6-charcoal */
  --v6-fuchsia:#FF7A4D;     /* Fuchsia — mảng nhấn                             */
  --v6-blue:#1FA9E0;         /* Vivid Cerulean — trạng thái "sắp diễn ra" · 5.45 trên --v6-charcoal */
  --v6-orange:#FFC53D;         /* Ember Orange — mảng nhấn                        */
  --v6-red:#CF2030;          /* Ekko Red — "cần gấp" · trắng 4.60               */
  --v6-black:#10231A;         /* Not Quite Black — khung ứng dụng, chân trang · trắng 15.05 */
  --v6-charcoal:#173325;        /* Dark Charcoal — mặt ứng dụng · trắng 13.45 · Fog 7.23 */
  --v6-mist:#BABCD9;       /* Fog — chữ thân trên nền tối · 10.03 trên --v6-bg */
  --v6-gray:#99AAB5;         /* Greyple — chữ phụ, siêu dữ liệu · 5.62 trên --v6-charcoal */
  --v6-gray-dark:#50555F;     /* Dim Grey — nút phụ trong ứng dụng, viền · chữ trắng 7.4 */
  --v6-light:#F6F6F6;        /* Off White — nút trắng khi rê                    */
  --v6-purple:#12704A;         /* thẻ tím–hồng (DESIGN.md mẫu "Feature Card") · trắng 6.90 */
  --v6-pink:#FF9166;        /* đầu hồng của dải tím–hồng · trắng 3.88 (chỉ chữ lớn) */
  /* ── 2A·6b · MÀU ĐO TỪ discord.com (18/09/2026 tối) ────────────────────
     Người dùng chê bản dựng theo chữ của DESIGN.md: "màu sắc, theme, layout
     ko giống… text mờ tịt, lẫn vào nhau". DESIGN.md mô tả nền #0E0F2D gần
     đen, nhưng trang Discord THẬT sáng hơn nhiều: đo điểm ảnh ảnh chụp
     discord.com khổ 1440 được các màu dưới. Trang chủ dùng bộ này.
     Chữ trên đó luôn TRẮNG (không Fog/Greyple) — đó là lý do chữ Discord
     sắc nét còn bản trước mờ.                                              */
  --v6-night:#0C3B26;         /* đỉnh đầu trang · trắng 20.43                   */
  --v6-dot:#15653D;        /* giữa–đáy đầu trang · trắng 13.88               */
  --v6-violet-blue:#1A7F4E;     /* nền thân trang · trắng 9.49                    */
  --v6-depth:#0C3B26;         /* đáy trang, trước chân trang · trắng 18.24      */
  --v6-glass-light:#FFFFFF;   /* mép trên tấm kính · trắng 4.15 — KHÔNG đặt chữ */
  --v6-glass-mid:#FFFFFF;   /* thân tấm kính · trắng 6.78                     */
  --v6-glass-dark:#FBFCEF;    /* đáy tấm kính · trắng 9.43                      */
  --v6-scene-pink:#FFF3E2;   /* cảnh hồng: đỉnh · trắng 13.95                  */
  --v6-scene-pink-2:#FFC98A; /* cảnh hồng: đáy · trắng 5.60                    */
  --v6-scene-leaf:#E4FBE9;     /* cảnh lá: đỉnh · trắng 15.33                    */
  --v6-scene-leaf-2:#A8EFC0;   /* cảnh lá: đáy — trang trí, KHÔNG đặt chữ (1.83) */
  --v6-scene-screen:#DFF5FF;    /* cảnh mận · trắng 10.35                         */
  --v6-scene-purple:#BFF0D2;    /* cảnh tím · trắng 4.74                          */
  --v6-void:#08281A;        /* Void — chân trang                              */
  /* 2F · phái sinh (danh sách đóng) */
  --bird:#FCFDF2; --green-dark:#0F4D31; --text-faint:#CFE0A8; --round-1:#EEF4D8; --round-2:#F5F8E6;
  /* 2A·8 · màu nhận diện hãng — CHỈ cho logo kênh liên hệ, không làm chữ, không làm
     mảng trang trí. Đồ hoạ trên nền trắng cần 3:1 — cả ba đạt (xem DESIGN_WEB_STANDARDS §2A·8). */
  --zalo:#0068FF; --facebook:#1877F2; --linkedin:#0A66C2;
  /* 2C · chức năng */
  --ok:#1B7A46; --ok-bg:#E4F6EB;
  --warn:#8A5A05; --warn-bg:#FDF2DC;
  --err:#B42318; --err-bg:#FDECEA;
  --info:#15653D; --info-bg:#E4FBE9;
  --neutral:#4A5568; --neutral-bg:#EDF1F7;
  /* 2E · chuyên mục blog: chấm · chữ nhãn · nền nhãn — mỗi mục một sắc nhấn */
  --cm1:#2FC4F5; --cm1-c:#0E6C93; --cm1-n:#E2F4FC;   /* Chia sẻ  */
  --cm2:#5CD97E; --cm2-c:#1B7A46; --cm2-n:#E4F6EB;   /* Sản phẩm */
  --cm3:#E23FB8; --cm3-c:#9C1C7A; --cm3-n:#FBE7F5;   /* Cố vấn   */
  --cm4:#F2B417; --cm4-c:#8A5A05; --cm4-n:#FDF2DC;   /* Dịch vụ  */
  /* 3 · chữ */
  --font-ui:'Inter','Be Vietnam Pro','Segoe UI',-apple-system,Roboto,sans-serif;
  --font-title:'Montserrat','Inter','Segoe UI',sans-serif;   /* tiêu đề lớn — theme Discord 19/09 */
  --font-article:'Noto Serif',Georgia,'Times New Roman',serif;
  /* 4 · bo góc, bóng */
  --r-btn:12px; --r-inner:8px; --r-card:16px;
  --shadow-float:0 8px 24px rgba(11,18,32,.10);
  --shadow-box:0 20px 48px rgba(11,18,32,.16);
  /* 8 · chuyển động (DS) */
  --ease-in:cubic-bezier(.2,.6,.2,1); --ease-btn:cubic-bezier(.4,0,.2,1); --ease-bounce:cubic-bezier(.34,1.4,.64,1);
  --dur-btn:180ms; --dur-avatar:220ms; --dur-dash:280ms; --dur-nav:300ms; --dur-img:550ms; --dur-in:700ms; --dur-layer:200ms;
}

*{box-sizing:border-box}
html,body{margin:0}
body{font-family:var(--font-ui);font-size:16px;line-height:1.7;color:var(--ink);background:var(--cream);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{margin:0;font-weight:600;color:var(--ink)}
p{margin:0}
a{color:inherit}
img{max-width:100%;display:block}
button,input,select,textarea{font:inherit;color:inherit}

/* ═══ CHẠM TRÊN ĐIỆN THOẠI (19/09) ════════════════════════════════════════
   Thành viên phần lớn đọc trên máy 390px (§4 — dựng cho điện thoại trước), mà
   cả bộ CSS trước nay không khai một dòng nào về chạm. Ba việc, làm cùng lúc
   vì bỏ một cái thì hai cái kia thành lỗi mới:

   ① `touch-action:manipulation` bỏ cử chỉ chạm-hai-lần-để-phóng RIÊNG trên
      thứ bấm được. Không có nó, trình duyệt phải CHỜ ~300ms xem có nhịp chạm
      thứ hai hay không rồi mới kích hoạt — mỗi lần bấm trễ nửa nhịp. Người
      dùng đọc ra là "máy lag", không ai đoán là thiếu một dòng CSS.
      CỐ Ý không đặt lên `body`: chạm-hai-lần-để-phóng là cách phóng to quen
      thuộc của người ngoài 40 tuổi — giữ nguyên ở phần chữ.

   ② Quầng chạm mặc định của iOS/Android là một HÌNH CHỮ NHẬT xám, vẽ theo hộp
      bao chứ không theo bo góc — trên tấm kính trang chủ bo tới 120px thì nó
      lòi ra bốn góc vuông. Tắt đi.

   ③ Tắt quầng mà không trả lại gì thì màn hình cảm ứng mất sạch phản hồi —
      đúng cái §6B cấm ("con trỏ không bao giờ là dấu hiệu duy nhất"; điện
      thoại còn không có con trỏ). Nên bù bằng `:active` thật, chỉ khai trong
      `@media (hover:none)` vì máy có chuột đã có trạng thái rê rồi. Dùng
      `opacity` (hợp bộ tổng hợp ảnh, không gây vẽ lại) và CHỪA `.btn` ra —
      nút đã có `scale(.98)` riêng ở dưới, chồng thêm là nhấp nháy hai lớp. */
a,button,label,summary,input,select,textarea,
[role="button"],[role="tab"],[role="option"]{touch-action:manipulation}
a,button,label,summary,[role="button"],[role="tab"]{-webkit-tap-highlight-color:transparent}
@media (hover:none){
  a:not(.btn):active,summary:active,
  [role="button"]:not(.btn):active,[role="tab"]:active{opacity:.6}
}
[hidden]{display:none!important}
.num{font-variant-numeric:tabular-nums}
.sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* Bộ biểu tượng dùng chung (_shell.js) cũng mang lớp .sr-only. Màn nào đặt
   <script src="_shell.js"> ở CUỐI body — Đăng nhập — thì nó nằm sau khối cao
   đúng một màn hình, và dù chỉ 1px nó vẫn tính vào vùng cuộn: trang vừa khít
   vẫn mọc thanh cuộn. Ghim lên góc trên là hết, nó vốn không có gì để nhìn. */
svg.sr-only{top:0;left:0}
.ph{font-size:20px;line-height:1;flex:0 0 auto}

/* focus — xanh trên nền sáng, vàng sáng trên nền xanh (§7) */
:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.bg-green :focus-visible,.btn--gold:focus-visible{outline-color:var(--gold-light)}

/* ═══ CON TRỎ CHUỘT (§8B) ═════════════════════════════════════════════════
   Chuẩn: CSS UI Level 4 §8.1 (cursor). Mỗi giá trị mang MỘT NGHĨA, không phải
   thứ để trang trí. Đặt sai nghĩa còn tệ hơn không đặt.

   ⚠ LUẬT CAO NHẤT: con trỏ KHÔNG BAO GIỜ là dấu hiệu duy nhất cho biết bấm
   được. Điện thoại không có con trỏ, bàn phím cũng không — mà phần lớn thành
   viên đọc trên điện thoại. Thứ bấm được phải tự nhận ra bằng hình dạng, màu,
   gạch chân hoặc viền focus; con trỏ chỉ là lớp xác nhận thêm cho chuột.

   ⚑ MỘT NGOẠI LỆ CÓ CHỦ Ý: chuẩn CSS dành riêng "pointer" cho LIÊN KẾT, và
   hướng dẫn của hệ điều hành nói nút bấm để "default" (Tailwind v4 đã đổi về
   "default" cho đúng chuẩn). Dự án này CỐ Ý dùng "pointer" cho cả nút.
   Lý do: người dùng là chủ doanh nghiệp 40+, đã quen "bàn tay = bấm được";
   để mũi tên trên nút thì họ đọc ra là nút hỏng. Khi hai quy ước cùng tồn tại,
   thứ quan trọng nhất là NHẤT QUÁN trong một trang — đã chọn thì áp cho cả
   site, không nửa nọ nửa kia.                                               */

/* ĐI TỚI CHỖ KHÁC — nghĩa gốc của "pointer" theo chuẩn */
a[href]{cursor:pointer}

/* THỰC HIỆN MỘT HÀNH ĐỘNG — xem ngoại lệ có chủ ý ở trên.
   `[role="option"]` thêm 17/09: một mục trong danh sách gợi ý của ô tìm–chọn
   (`.fld-suggest`) bấm vào là CHỌN — đúng nghĩa "thực hiện một hành động" của
   chuẩn. Nó là thẻ `li` nên không tự có con trỏ nào; khai ở đây một lần thay
   vì để từng màn tự gắn. */
button,[role="button"],[role="option"],label,summary,select,
input[type=checkbox],input[type=radio],input[type=file],
input[type=submit],input[type=reset],input[type=button]{cursor:pointer}

/* CHỮ NHẬP ĐƯỢC — I-beam. Dùng :where() để độ ưu tiên bằng 0, nhờ vậy các
   luật trạng thái bên dưới (:disabled, [aria-busy]) luôn thắng được. */
input:where(:not([type=checkbox],[type=radio],[type=file],[type=submit],[type=reset],[type=button])),
textarea{cursor:text}

/* KHÔNG THAO TÁC ĐƯỢC */
:disabled,[aria-disabled="true"]{cursor:not-allowed}

/* ĐANG BẬN nhưng phần còn lại của trang vẫn dùng được -> progress.
   "wait" nghĩa là KHÓA CẢ TRANG, gần như không bao giờ đúng trên web. */
[aria-busy="true"]{cursor:progress}

/* KÉO THẢ */
[draggable="true"],.draggable{cursor:grab}
[draggable="true"]:active,.draggable:active,.active-drag{cursor:grabbing}

/* CÓ GIẢI THÍCH THÊM KHI RÊ CHUỘT */
abbr[title],[data-explain]{cursor:help}

/* PHÓNG TO ẢNH · KÉO ĐỔI BỀ RỘNG CỘT */
.zoom{cursor:zoom-in}
.drag-col{cursor:col-resize}

/* KHÔNG đặt cursor:pointer lên thẻ không bấm được (div, span, p, thẻ trang
   trí). Đó là hứa suông: chuột báo bấm được mà bấm không ra gì. Cả khối bấm
   được thì bọc bằng thẻ a hoặc button, đừng gắn pointer lên div.
   Con trỏ tự chế bằng url(): chuẩn BẮT BUỘC có từ khoá dự phòng ở cuối, ví dụ
   cursor:url(x.png) 4 4, pointer — và nên giữ ảnh trong 32x32, lớn hơn thì
   trình duyệt bỏ qua. Dự án này chưa dùng con trỏ tự chế. */

.app{container-type:inline-size;container-name:app}
/* Khung nội dung CO GIÃN, không khoá cứng một con số.
   Trước đây khoá 1180px: trên màn Full HD thừa hơn 300px trống mỗi bên.
   Nay ba tầng:
   · trần 1560px — trên 1920 vẫn chừa lề ~180px mỗi bên, đủ để trang không
     dính mép màn hình mà cũng không bỏ phí nửa màn;
   · lề trong giãn theo bề ngang màn (clamp 20 → 3.2vw → 48px), nên máy tính
     to thì thoáng, điện thoại thì sát mép vừa phải;
   · KHÔNG cho rộng quá 1560 vì dòng chữ dài hơn ~90 ký tự là mắt bắt đầu
     lạc dòng — thân bài vẫn tự khoá thêm theo ch ở từng khối.
   Vì mọi khối, thanh điều hướng và chân trang đều dùng lớp này, đổi ở đây
   là cả trang đổi theo, hai mép vẫn thẳng một đường.                       */
/* 1560 → 1760. Ở màn 1900px trở lên, 1560 để thừa hơn 170px mỗi bên — KH đã
   phàn nàn hai lần về đúng chỗ này. Đệm hai bên cũng thu lại một chút ở khổ
   rất rộng, vì lúc đó bản thân lề trắng ngoài khung đã đủ làm nhiệm vụ nghỉ
   mắt, không cần đệm trong dày thêm.
   Không bỏ hẳn trần: dòng chữ dài quá 90 ký tự thì mắt trượt dòng khi xuống
   hàng — đó là lý do có trần, không phải vì thẩm mỹ. */
/* Lề ngang CO GIÃN (§4) — clamp giữ nguyên, `max()` chỉ nhấc thêm khi máy báo
   có vùng khuyết ở cạnh đó. Máy thường env(...)=0 nên trả về đúng clamp cũ;
   iPhone tai thỏ nằm NGANG thì lề bên đó nở vừa đủ để chữ không chui xuống
   dưới phần khuyết. Vẫn không khoá cứng con số nào. */
.container{max-width:1760px;margin:0 auto;
  padding-left:max(clamp(20px,2.6vw,44px),env(safe-area-inset-left,0px));
  padding-right:max(clamp(20px,2.6vw,44px),env(safe-area-inset-right,0px))}

/* ═══ NÚT (DS 06) ═══ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 22px;
  border-radius:var(--r-btn);border:1px solid transparent;font-size:14px;font-weight:500;line-height:1;
  text-decoration:none;white-space:nowrap;background:none;
  transition:transform var(--dur-btn) var(--ease-btn),box-shadow var(--dur-btn),background-color var(--dur-btn),border-color var(--dur-btn),color var(--dur-btn)}
.btn:active{transform:scale(.98)}
/* 19/09: nút chính = Blurple của trang chủ (chữ trắng 4.61), rê chuột sang
   Dark Blurple (7.17) — trước đó màn trong dùng --green nên nút hai bên lệch màu. */
.btn--main{background:var(--v6-blurple);color:#fff}
.btn--main:hover{background:var(--v6-blurple-deep);transform:translateY(-2px);box-shadow:0 8px 20px color-mix(in srgb,var(--v6-blurple) 30%,transparent)}
.btn--sub{background:var(--white);border-color:var(--border-field);color:var(--ink)}
.btn--sub:hover{border-color:var(--green);color:var(--green);transform:translateY(-2px)}
.btn--text{height:auto;padding:4px 0;color:var(--green);font-weight:500}
.btn--text .ph{transition:transform 220ms}
.btn--text:hover .ph{transform:translateX(3px)}
.btn--gold{background:var(--gold);color:var(--brown);font-weight:600}
.btn--gold:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(233,168,28,.3)}
.btn--outline-white{border-color:rgba(255,255,255,.6);color:#fff}
.btn--outline-white:hover{background:rgba(255,255,255,.08);border-color:#fff}
.btn--danger{background:var(--white);border-color:var(--err);color:var(--err)}
.btn--danger:hover{background:var(--err-bg)}
.btn--small{height:34px;padding:0 16px}
.btn--large{height:48px;padding:0 28px;font-size:16px}
.btn--empty{width:100%}
.btn--icon{width:40px;padding:0}
.btn:disabled,.btn[aria-disabled="true"]{background:var(--neutral-bg);border-color:transparent;color:var(--gray);transform:none;box-shadow:none}
@container app (max-width:559px){.btn--small{height:44px}}

/* ═══ TRƯỜNG NHẬP ═══ */
.field{display:flex;flex-direction:column;gap:4px;min-width:0}
.field>label,.field>.label-field{font-size:14px;font-weight:500;color:var(--ink)}
.required{color:var(--err)}
.suggest{font-size:14px;color:var(--gray);line-height:1.5}
.fld-input,.fld-sel{width:100%;height:44px;padding:0 14px;border:1px solid var(--border-field);border-radius:var(--r-btn);
  background:var(--white);font-size:16px;color:var(--ink);transition:border-color 120ms,box-shadow 120ms}
.fld-input::placeholder{color:var(--gray-pale)}
.fld-input:hover,.fld-sel:hover{border-color:var(--ink)}
.fld-input:focus,.fld-sel:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px var(--green-pale)}
.fld-input[aria-invalid="true"]{border-color:var(--err);box-shadow:0 0 0 3px var(--err-bg)}
.fld-input:disabled{background:var(--neutral-bg);border-color:var(--border);color:var(--gray)}
.fld-input[readonly]{background:var(--bird);border-color:var(--border)}
textarea.fld-input{height:auto;min-height:120px;padding:10px 14px;line-height:1.6;resize:vertical}
.fld-sel{appearance:none;padding-right:38px;background:var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 256 256'%3E%3Cpath fill='%23232821' d='M213.7 101.7l-80 80a8 8 0 0 1-11.4 0l-80-80a8 8 0 0 1 11.4-11.4L128 164.7l74.3-74.4a8 8 0 0 1 11.4 11.4Z'/%3E%3C/svg%3E") no-repeat right 12px center}
.err-fld{display:flex;gap:6px;align-items:flex-start;font-size:14px;color:var(--err);line-height:1.5}
.err-fld .ph{font-size:18px;margin-top:1px}
@container app (max-width:559px){.fld-input,.fld-sel{height:48px}}

.box-sel{display:flex;align-items:center;gap:10px;min-height:36px;font-size:15px;color:var(--ink);line-height:1.4}
.box-sel input{width:20px;height:20px;margin:0;accent-color:var(--green);flex:0 0 20px}
.box-sel .count{margin-left:auto;font-size:13px;color:var(--gray)}
@container app (max-width:859px){.box-sel{min-height:44px}}

/* ═══ CHỌN MỘT TRONG NHIỀU (RadioGroup · CC §3) ═══
   CC ghi rõ: chọn một, từ 7 mục trở xuống thì dùng ô tròn chứ không dùng
   Select — trong biểu mẫu, thứ đọc được hết bằng mắt thì đừng giấu sau một
   cú bấm. Mỗi lựa chọn là một Ô BẤM CẢ KHUNG (không chỉ cái chấm tròn): trên
   điện thoại ngón tay không nhắm được một chấm 20px.                       */
.btn-round{display:flex;flex-wrap:wrap;gap:10px}
.btn-round label{flex:1 1 auto;min-width:8.5rem;display:flex;align-items:center;gap:10px;
  min-height:48px;padding:0 15px;border:1px solid var(--border-field);border-radius:var(--r-inner);
  background:var(--white);font-size:15px;line-height:1.35;
  transition:border-color var(--dur-layer) var(--ease-btn),
             background-color var(--dur-layer) var(--ease-btn),
             box-shadow var(--dur-layer) var(--ease-btn)}
.btn-round input{width:20px;height:20px;margin:0;accent-color:var(--green);flex:0 0 20px}
.btn-round label:hover{border-color:var(--ink)}
/* Mục đang chọn: viền xanh + vành 2px. KHÔNG tô kín nền xanh — chữ trên nền
   xanh đặc phải đổi sang trắng, mà một mục trắng giữa các mục đen thì đọc ra
   là "đang khoá" chứ không ra "đang chọn". */
.btn-round label:has(input:checked){border-color:var(--green);background:var(--green-pale);
  box-shadow:inset 0 0 0 1px var(--green)}
.btn-round label:focus-within{outline:2px solid var(--green);outline-offset:2px}

/* ═══ Ô TÌM–CHỌN NHIỀU (Autocomplete · CC §4.10 IndustryInput) ═══
   Thêm 17/09. CC §6: từ 8 mục trở lên, hoặc danh mục SẼ DÀI RA, thì dùng
   Autocomplete chứ không bày hết. Ngành kinh doanh đúng cả hai: danh mục do
   nhóm Admin cấu hình (CC §10) và chắc chắn dài thêm theo thành viên mới.
   Chọn NHIỀU — mỗi mục đã chọn thành một chip có nút xoá.

   ⚠️ KHÔNG dùng `<select multiple>`. Trên máy tính nó bắt giữ Ctrl mới chọn
     được mục thứ hai; trên cảm ứng — nơi phần lớn thành viên đọc — gần như
     không thao tác được. Đây là lý do kỹ thuật, không phải thẩm mỹ.
   ⚠️ Lớp con đều mang tiền tố `o-goi-y-`. `.suggest` TRẦN đã là lớp toàn cục
     (dòng chữ gợi ý dưới ô nhập, ngay trên đây) — đặt trùng là ăn nguyên bộ
     style của nó, im lặng, không lỗi nào báo ra (CLAUDE.md §8).
   ⚠️ Chữ gợi ý trong ô phải LIỆT KÊ ví dụ có thật, không dùng dấu ba chấm
     (DESIGN_WEB_STANDARDS §5, luật "chữ gợi ý ô tìm").                      */
.fld-suggest{position:relative}
/* Hộp ngoài vẽ GIỐNG HỆT `.fld-input`: cùng viền, cùng bo góc, cùng cách báo
   focus — để hai loại ô đứng cạnh nhau trong một biểu mẫu không lệch nhau.
   Riêng chiều cao thả tự do, vì chip xuống dòng làm hộp cao lên. */
.fld-suggest-box{display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  min-height:44px;padding:6px 10px;background:var(--white);
  border:1px solid var(--border-field);border-radius:var(--r-btn);
  transition:border-color var(--dur-layer) var(--ease-btn),
             box-shadow var(--dur-layer) var(--ease-btn)}
.fld-suggest-box:hover{border-color:var(--ink)}
.fld-suggest:focus-within .fld-suggest-box{border-color:var(--green);
  box-shadow:0 0 0 3px var(--green-pale)}
/* `display:contents` cho thẻ ul: chip là con trực tiếp của hộp flex, nhờ vậy
   chip và ô gõ nằm CHUNG một dòng và cùng xuống dòng với nhau. */
.fld-suggest-chip{list-style:none;margin:0;padding:0;display:contents}
.fld-suggest-chip li{display:inline-flex;align-items:center;gap:5px;
  padding:4px 4px 4px 11px;border-radius:999px;
  background:var(--green-pale);color:var(--green-dark);
  font-size:14px;font-weight:600;line-height:1.35}
/* Nút xoá là `<button>` thật, không phải một dấu × vẽ bằng span: chip phải
   xoá được bằng bàn phím, và vùng bấm phải đủ to cho ngón tay. */
.fld-suggest-chip button{width:22px;height:22px;flex:0 0 22px;display:grid;
  place-items:center;border:0;border-radius:50%;background:none;color:inherit;
  font-size:16px;line-height:1;
  transition:background-color var(--dur-layer) var(--ease-btn)}
.fld-suggest-chip button:hover{background:var(--round-1)}
.fld-suggest-chip button:focus-visible{outline:2px solid var(--green);outline-offset:1px}
.fld-suggest-fld{flex:1 1 9rem;min-width:9rem;height:30px;padding:0;border:0;
  background:none;font:inherit;font-size:15px;color:var(--ink)}
.fld-suggest-fld:focus{outline:none}
.fld-suggest-fld::placeholder{color:var(--gray-pale)}
/* Danh sách gợi ý đặt TUYỆT ĐỐI và phủ lên trên: để nó chiếm chỗ thật thì
   mỗi lần gõ cả biểu mẫu bên dưới lại nhảy xuống rồi nhảy lên. */
.fld-suggest-list{position:absolute;z-index:20;top:calc(100% + 6px);left:0;right:0;
  max-height:15rem;overflow:auto;list-style:none;margin:0;padding:6px;
  background:var(--white);border:1px solid var(--border);
  border-radius:var(--r-inner);box-shadow:var(--shadow-float)}
.fld-suggest-list li{padding:10px 12px;border-radius:var(--r-btn);
  font-size:15px;line-height:1.4;color:var(--ink)}
.fld-suggest-list li:hover,.fld-suggest-list li[aria-selected="true"]{background:var(--round-2)}
/* Không tìm thấy gì thì NÓI RA, đừng đóng danh sách lại — danh sách biến mất
   đọc ra là ô hỏng, không ra "không có mục nào khớp". */
.fld-suggest-list li.fld-suggest-vacant{background:none;color:var(--gray);font-size:14px}
/* Đã đủ hạn mức thì GỠ HẲN ô gõ, không để đó rồi gõ mãi không ra gì. */
.fld-suggest.strip .fld-suggest-fld{display:none}

/* ═══ TÓM TẮT LỖI ĐẦU FORM (ErrorSummary · CC §5.7) ═══
   Bấm gửi mà hỏng thì đừng bắt người ta cuộn đi tìm: kể đủ số chỗ hỏng và
   cho bấm nhảy thẳng tới từng ô. Focus nhảy vào khối này để trình đọc màn
   hình đọc được ngay.                                                       */
.summary-err{border:1px solid var(--err);border-left-width:4px;border-radius:var(--r-inner);
  background:var(--err-bg);padding:14px 16px}
.summary-err b{display:block;font-size:15.5px;color:var(--err)}
.summary-err ul{margin:8px 0 0;padding-left:20px;display:flex;flex-direction:column;gap:4px;
  font-size:14.5px;color:var(--ink)}
.summary-err a{color:var(--err);font-weight:500}
.summary-err:focus-visible{outline:2px solid var(--err);outline-offset:2px}

/* ═══ TẢI ẢNH ĐẠI DIỆN (AvatarUpload · CC §4.12) ═══
   Nói ĐỊNH DẠNG và DUNG LƯỢNG trước khi người dùng mở hộp chọn tệp, không
   đợi họ chọn xong rồi mới báo sai. Luôn có nút bấm thật bên cạnh vùng kéo
   thả (WCAG 2.5.7) — trên điện thoại chỉ còn cái nút.
   Chưa có ảnh thì ô xem trước là CHỮ CÁI ĐẦU trên nền xanh, theo DS mục 05;
   không dùng hình người xám.                                               */
.load-img{display:flex;align-items:center;gap:16px}
.load-img .view{width:72px;height:72px;flex:0 0 72px;border-radius:50%;display:grid;
  place-items:center;background:var(--green);color:#fff;font-size:22px;font-weight:600;
  letter-spacing:.02em;overflow:hidden}
.load-img .view img{width:100%;height:100%;object-fit:cover}
.load-img .right{min-width:0;display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.load-img .suggest{font-size:13.5px}

.fld-search{position:relative;display:flex;align-items:center}
.fld-search>.ph{position:absolute;left:14px;color:var(--gray);pointer-events:none}
.fld-search .fld-input{padding-left:44px;padding-right:44px;height:52px;font-size:16px}
.fld-search .del{position:absolute;right:6px;width:40px;height:40px;border:0;background:none;border-radius:var(--r-btn);color:var(--gray);display:grid;place-items:center}
.fld-search .del:hover{background:var(--bird);color:var(--ink)}

/* ═══ NHÃN ═══ */
.label{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:2px 10px;font-size:13px;font-weight:500;line-height:1.6;white-space:nowrap}
.label::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:0 0 6px}
.label--round::before{display:none}
.label--ok{background:var(--ok-bg);color:var(--ok)}
.label--warning{background:var(--warn-bg);color:var(--warn)}
.label--err{background:var(--err-bg);color:var(--err)}
.label--info{background:var(--info-bg);color:var(--info)}
.label--neutral{background:var(--neutral-bg);color:var(--neutral)}

.cat{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:1px 10px;font-size:12px;font-weight:500;line-height:1.7;white-space:nowrap}
.cat::before{content:"";width:6px;height:6px;border-radius:50%;flex:0 0 6px}
.cat--share{background:var(--cm1-n);color:var(--cm1-c)} .cat--share::before{background:var(--cm1)}
.cat--product{background:var(--cm2-n);color:var(--cm2-c)} .cat--product::before{background:var(--cm2)}
.cat--advisor{background:var(--cm3-n);color:var(--cm3-c)} .cat--advisor::before{background:var(--cm3)}
.cat--service{background:var(--cm4-n);color:var(--cm4-c)} .cat--service::before{background:var(--cm4)}

.chip-svc{display:inline-flex;align-items:center;border-radius:999px;padding:2px 10px;font-size:13px;font-weight:500;line-height:1.6;
  background:var(--green-pale);color:var(--green);white-space:nowrap}
.chip-svc--search{background:var(--warn-bg);color:var(--warn)}
.chip-svc--add{background:var(--white);border:1px solid var(--border);color:var(--gray)}
.row-chip{display:flex;flex-wrap:wrap;gap:6px}

.label-small{font-size:11px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--gray)}

/* ═══ ẢNH ĐẠI DIỆN (DS 05) ═══ */
.avatar{--c:40px;width:var(--c);height:var(--c);flex:0 0 var(--c);border-radius:50%;display:grid;place-items:center;
  font-weight:600;font-size:calc(var(--c) * .36);color:var(--ink);background:var(--green-light);overflow:hidden;letter-spacing:.01em}
.avatar--32{--c:32px} .avatar--56{--c:56px} .avatar--96{--c:96px}
.avatar.a1{background:#A8DFC0} .avatar.a2{background:#CFEBA8} .avatar.a3{background:#A9D8E8} .avatar.a4{background:#F4D79A}
.strip-img{display:flex}
.strip-img .avatar{border:2px solid var(--cream);transition:transform var(--dur-avatar) var(--ease-bounce)}
.strip-img .avatar+.avatar{margin-left:-10px}
.strip-img .avatar:hover{transform:translateY(-6px) scale(1.08);position:relative;z-index:2}
.strip-img .avatar.add{background:var(--green-sub);color:#fff;font-size:13px}

.person{display:flex;align-items:center;gap:12px;min-width:0}
.person .name{font-size:15px;font-weight:600;line-height:1.35;color:var(--ink)}
.person .sub{font-size:14px;color:var(--gray);line-height:1.45}

/* ═══ THẺ (DS 07) ═══ */
.card{position:relative;background:var(--white);border:1px solid var(--border);border-radius:var(--r-card);padding:16px;
  transition:border-color 200ms}
.card:hover{border-color:var(--green)}
.card .sub-link::after{content:"";position:absolute;inset:0;border-radius:var(--r-card)}
.card .sub-link{text-decoration:none}
.card .place{position:relative;z-index:1}
@container app (max-width:559px){.card{padding:12px}}
.frame-img{position:relative;overflow:hidden;background:var(--green-pale);border-radius:var(--r-inner);display:grid;place-items:center;color:var(--green);font-size:13px}
.frame-img--169{aspect-ratio:16/9} .frame-img--32{aspect-ratio:3/2} .frame-img--11{aspect-ratio:1/1}
.frame-img .rec{display:flex;flex-direction:column;align-items:center;gap:4px;opacity:.85;text-align:center;padding:8px}
.frame-img .rec .ph{font-size:26px}
.frame-img>*{transition:transform var(--dur-img) var(--ease-in)}
.card:hover .frame-img>*{transform:scale(1.07)}

/* thẻ thành viên */
.card-mem{display:flex;flex-direction:column;gap:12px}
.card-mem .head{display:flex;gap:12px;align-items:flex-start}
.card-mem .name{font-size:16px;font-weight:600;line-height:1.35;color:var(--ink)}
.card-mem .cd{font-size:14px;color:var(--gray);line-height:1.45}
.card-mem .svc-company{font-size:14px;color:var(--ink);line-height:1.45}
.card-mem .meta{font-size:14px;color:var(--gray);line-height:1.5}
.card-mem .foot-card{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding-top:12px;border-top:1px solid var(--border);margin-top:auto}
.card-mem .view{margin-left:auto;font-size:14px}

/* kênh liên hệ */
.channel{width:36px;height:36px;border-radius:var(--r-btn);border:1px solid var(--border);background:var(--white);display:grid;place-items:center;color:var(--ink);text-decoration:none}
.channel:hover{border-color:var(--green);color:var(--green)}
.channel .ph{font-size:18px}
.channel--text{width:auto;padding:0 10px;font-size:13px;font-weight:600;gap:4px;display:inline-flex;align-items:center}
@container app (max-width:559px){.channel{width:44px;height:44px}}
.cnt-table{position:absolute;z-index:30;top:calc(100% + 6px);left:0;width:280px;max-width:calc(100cqw - 40px);background:var(--white);
  border:1px solid var(--border);border-radius:var(--r-card);box-shadow:var(--shadow-float);padding:6px}
.cnt-table button,.cnt-table a{display:flex;align-items:center;gap:10px;width:100%;min-height:44px;padding:8px 12px;border:0;background:none;border-radius:var(--r-inner);text-align:left;text-decoration:none;font-size:15px;color:var(--ink)}
.cnt-table button:hover,.cnt-table a:hover{background:var(--bird)}
.cnt-table .phone-no{font-weight:600;font-variant-numeric:tabular-nums}
.cnt-table .ack{font-size:13px;color:var(--gray);padding:6px 12px 4px;border-top:1px solid var(--border);margin-top:4px;line-height:1.45}
.cnt-wrap{position:relative}

/* thẻ bài viết */
.card-article{display:flex;flex-direction:column;gap:10px;padding:0;overflow:hidden}
.card-article .frame-img{border-radius:0}
.card-article .body{display:flex;flex-direction:column;gap:10px;padding:0 16px 16px}
.card-article h3{font-size:17px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.card-article .person .avatar{--c:32px}
.card-article .person .name{font-size:14px}
.card-article .person .sub{font-size:13px}
@container app (max-width:559px){.card-article .body{padding:0 12px 12px}}

/* thẻ sự kiện — khối ngày luôn xanh (DS) */
.card-ev{display:flex;gap:16px;align-items:flex-start}
.card-ev .date{flex:0 0 64px;height:72px;border-radius:var(--r-inner);background:var(--green);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1}
.card-ev .date b{font-size:26px;font-weight:600;font-variant-numeric:tabular-nums}
.card-ev .date span{font-size:11px;font-weight:500;letter-spacing:.06em;margin-top:6px;color:var(--text-faint)}
.card-ev .body{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.card-ev h3{font-size:17px;line-height:1.4}
.card-ev .time{display:flex;gap:6px 14px;flex-wrap:wrap;font-size:14px;color:var(--gray)}
.card-ev .time span{display:inline-flex;align-items:center;gap:6px}
.card-ev .time .ph{font-size:16px}
.card-ev .action{display:flex;gap:10px 16px;align-items:center;flex-wrap:wrap;margin-top:6px}

/* ══ EventSeriesCard `.chuoi` — MỘT NGÀY, NHIỀU HOẠT ĐỘNG ════════════════
   Vì sao phải có thẻ riêng chứ không dùng `.card-ev` ba lần: ngày hội không
   phải ba sự kiện, mà là MỘT ngày gồm ba hoạt động ở cùng một chỗ, mỗi hoạt
   động một đường đăng ký riêng. Đổ thành ba dòng ngang hàng với các sự kiện
   lẻ thì người xem đọc ra ba thứ rời nhau — mà "cả ngày ở cùng một chỗ" mới
   là lý do người ta thu xếp để đi, và cũng là lý do bên EBMS phải gom chúng
   vào một chuỗi (một đầu mối quản lý, một lá thư xác nhận).

   Thẻ vì vậy chia HAI TẦNG, ngăn bằng kẻ chỉ:
     tầng trên  = cái NGÀY  — khối ngày xanh, tên, nơi chốn, trạng thái
     tầng dưới  = các HOẠT ĐỘNG trong ngày, mỗi cái một cột
   Tầng dưới cố ý KHÔNG bấm được ở màn danh sách: mỗi hoạt động có đường
   đăng ký riêng, đặt lối vào ở đây thì một thẻ mọc ra bốn đích đến khác
   nhau. Ở danh sách chỉ có đúng một lối — vào màn chi tiết, nơi từng hoạt
   động mới có nút đăng ký của nó.                                          */

/* thẻ dịch vụ — vạch màu đầu thẻ theo loại (DS) */
.card-svc{border-top:4px solid var(--green);display:flex;flex-direction:column;gap:6px}
.card-svc--course{border-top-color:var(--info)} .card-svc--pkg{border-top-color:var(--gold)}
.card-svc h3{font-size:17px;line-height:1.4}
.card-svc .unit{font-size:14px;color:var(--gray)}
.card-svc .offer{font-size:14px;color:var(--ink)}

/* ═══ HỒ SƠ ═══ */
.table-st{display:flex;align-items:center;gap:14px;flex-wrap:wrap;border-radius:var(--r-card);padding:14px 16px;border:1px solid transparent}
.table-st>.ph{font-size:24px}
.table-st .text{flex:1 1 260px;min-width:0}
.table-st .text b{display:block;font-weight:600;line-height:1.4}
.table-st .text span{font-size:14px;line-height:1.5}
.table-st--warning{background:var(--warn-bg);color:var(--warn);border-color:transparent}
.table-st--info{background:var(--info-bg);color:var(--info);border-color:transparent}
.table-st--ok{background:var(--ok-bg);color:var(--ok);border-color:transparent}
.table-st--err{background:var(--err-bg);color:var(--err);border-color:transparent}
.table-st .text span{color:var(--ink)}

.complete{display:flex;flex-direction:column;gap:8px}
.complete .line{display:flex;justify-content:space-between;gap:12px;font-size:14px;color:var(--gray)}
.complete .line b{font-size:16px;color:var(--ink);font-weight:600}
.bar{height:8px;border-radius:999px;background:var(--green-pale);overflow:hidden}
.bar i{display:block;height:100%;background:var(--green);border-radius:999px}

.item-pf{background:var(--white);border:1px solid var(--border);border-radius:var(--r-card)}
.item-pf .head-item{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--border);flex-wrap:wrap}
.item-pf .head-item h2{font-size:17px;flex:1 1 auto}
.item-pf .head-item .ph{font-size:22px}
.item-pf .body-item{padding:16px}
.list-about{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 24px;margin:0}
.list-about div{min-width:0}
.list-about dt{font-size:14px;color:var(--gray);line-height:1.4}
.list-about dd{margin:2px 0 0;font-size:16px;color:var(--ink);line-height:1.5;overflow-wrap:anywhere}
@container app (max-width:559px){.list-about{grid-template-columns:1fr}}
.list-missing{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 24px}
.list-missing li a{display:flex;align-items:center;gap:10px;min-height:44px;text-decoration:none;color:var(--ink);font-size:15px;border-bottom:1px dashed var(--border)}
.list-missing li a:hover{color:var(--green)}
.list-missing .ph{color:var(--gray-pale);font-size:18px}
.list-missing li a:hover .ph{color:var(--green)}
@container app (max-width:559px){.list-missing{grid-template-columns:1fr}}

.violet-arc{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.violet-arc>div{border-radius:var(--r-inner);padding:14px 16px;display:flex;flex-direction:column;gap:10px}
.violet-arc .arc{background:var(--round-2);border:1px solid var(--border)}
.violet-arc .search{background:var(--bird);border:1px solid var(--border)}
.violet-arc h3{font-size:15px;display:flex;align-items:center;gap:8px}
@container app (max-width:559px){.violet-arc{grid-template-columns:1fr}}

/* ═══ DANH SÁCH · LỌC · TRẠNG THÁI ═══ */
.grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.grid>*{min-width:0}
.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
@container app (max-width:859px){.grid--3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@container app (max-width:559px){.grid,.grid--3{grid-template-columns:1fr}}

.filters{display:flex;flex-direction:column;gap:20px}
.filters fieldset{border:0;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.filters legend{font-size:14px;font-weight:600;color:var(--ink);margin-bottom:6px;padding:0}
.filters .custom{padding-top:16px;border-top:1px dashed var(--border)}

.chip-filter{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 6px 0 12px;border-radius:999px;border:1px solid var(--border-field);background:var(--white);font-size:14px;color:var(--ink)}
.chip-filter button{width:24px;height:24px;border:0;border-radius:50%;background:none;display:grid;place-items:center;color:var(--gray)}
.chip-filter button:hover{background:var(--neutral-bg);color:var(--ink)}
.chip-filter button .ph{font-size:14px}

.down{position:relative;overflow:hidden;background:var(--neutral-bg);border-radius:var(--r-inner)}
.down::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);transform:translateX(-100%);animation:down 1.5s ease-in-out infinite}
@keyframes down{to{transform:translateX(100%)}}

.empty,.err-load{display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;padding:48px 24px;background:var(--white);border:1px dashed var(--border);border-radius:var(--r-card)}
.empty>.ph,.err-load>.ph{font-size:40px;color:var(--green-light)}
.err-load>.ph{color:var(--err)}
.empty p,.err-load p{max-width:44ch;color:var(--ink)}

.pagination{display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap}
.pagination a,.pagination span{min-width:40px;height:40px;padding:0 10px;border-radius:var(--r-btn);display:grid;place-items:center;text-decoration:none;font-size:15px;color:var(--ink);font-variant-numeric:tabular-nums}
.pagination a:hover{background:var(--white);box-shadow:inset 0 0 0 1px var(--border)}
.pagination [aria-current="page"]{background:var(--green);color:#fff;font-weight:600}
.pagination .muted{color:var(--gray-pale)}

.band-cat{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none}
.band-cat::-webkit-scrollbar{display:none}
.band-cat button{flex:0 0 auto;display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 16px;border-radius:999px;border:1px solid var(--border);background:var(--white);font-size:14px;font-weight:500;color:var(--ink)}
.band-cat button:hover{border-color:var(--green)}
.band-cat button[aria-pressed="true"]{background:var(--green);border-color:var(--green);color:#fff}
.band-cat i.dot{width:8px;height:8px;border-radius:50%}

/* ── SegmentedTabs `.tab-para` (CC §5.5) — 2–4 lựa chọn LOẠI TRỪ nhau ─────
   Khác hẳn `.band-cat` ở trên: `.band-cat` là chip chuyên mục, chọn được nhiều
   cái và cuộn ngang được. `.tab-para` là HAI MẶT CỦA CÙNG MỘT DANH SÁCH —
   luôn có đúng một mặt đang bật. Nên nó dựng thành một rãnh liền có con
   trượt trắng, không dựng thành các chip rời: nhìn cái rãnh là biết hai
   lựa chọn này loại trừ nhau, không phải hai bộ lọc cộng dồn.
   Con trượt phân biệt bằng NỀN TRẮNG + viền trong, không bằng bóng đổ —
   khách nhạy với loá, mà một mảng trắng trên nền xám đã đủ nổi.
   Nút cao 44px: đây là thao tác chính của màn Sự kiện trên điện thoại,
   phải đạt ngưỡng vùng bấm §A1.                                           */
.tab-para{display:inline-flex;gap:4px;padding:4px;border-radius:999px;
  background:var(--neutral-bg);border:1px solid var(--border)}
.tab-para button{height:44px;padding:0 22px;border:0;border-radius:999px;background:none;
  font:inherit;font-size:14.5px;font-weight:500;color:var(--gray);white-space:nowrap;
  transition:background var(--dur-btn) var(--ease-btn),color var(--dur-btn) var(--ease-btn)}
.tab-para button:hover{color:var(--ink)}
.tab-para button[aria-selected="true"]{background:var(--white);color:var(--ink);font-weight:600;
  box-shadow:inset 0 0 0 1px var(--border)}

/* ── CategoryToolbar `.filter-bar` (CC §5.12) ─────────────────────────────
   MỘT hàng: ô tìm · chip lọc · số đếm. Dùng chung cho mọi màn chuyên mục
   bài viết (Tin tức · Dịch vụ · Khóa học). Mã chạy ở `_filter.js`.

   Vì sao tách ra khỏi `.ev-tools` của màn Sự kiện thay vì đổi tên nó:
   thanh bên đó có thêm `.tab-para` (Sắp diễn ra / Đã qua) — hai MẶT của một
   danh sách, thứ chỉ màn Sự kiện có. Gộp làm một thì mỗi màn chuyên mục
   phải mang theo một bộ tab rỗng. Ba màn chuyên mục dùng chung thanh này;
   màn Sự kiện giữ thanh riêng của nó.

   Hở NGANG 28px rộng hơn hở dọc, cùng lý do đã ghi ở `.ev-tools`: ba nhóm
   việc khác nhau (tìm · lọc · đếm) nằm chung một hàng, hở hẹp thì chúng dính
   thành một dãy nút liền và mắt không tách được ranh giới.                */
.filter-bar{display:flex;align-items:center;gap:16px 28px;flex-wrap:wrap;padding-bottom:26px}

/* Ô tìm nở tới 34rem — ở khổ rộng, phần thừa nếu không cho ô tìm ăn thì dồn
   hết vào khoảng trống trước số đếm ở mép phải: nửa trái chật, nửa phải bỏ
   không. Đây là bài học đã ghi khi nới thanh công cụ màn Sự kiện. */
.filter-search{position:relative;display:flex;align-items:center;flex:1 1 20rem;max-width:34rem}
.filter-search .ic{position:absolute;left:15px;width:19px;height:19px;color:var(--gray-pale);
  pointer-events:none}
.filter-search input{width:100%;height:44px;padding:0 16px 0 44px;border:1px solid var(--border-field);
  border-radius:999px;background:var(--white);font:inherit;font-size:15px;color:var(--ink)}
.filter-search input::placeholder{color:var(--gray-pale)}
.filter-search input:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px var(--green-pale)}

.filter-chip{display:flex;gap:8px;flex-wrap:wrap}
.filter-chip button{height:38px;padding:0 16px;border-radius:999px;border:1px solid var(--border);
  background:var(--white);font:inherit;font-size:14px;color:var(--gray);
  transition:border-color var(--dur-btn) var(--ease-btn),color var(--dur-btn) var(--ease-btn)}
.filter-chip button:hover{border-color:var(--green);color:var(--green)}
/* Chip đang chọn: chàm đậm (chữ trắng 7.17) thay đen — cùng họ màu trang chủ. */
.filter-chip button[aria-pressed="true"]{background:var(--green);border-color:var(--green);color:#fff}

.filter-count{margin-left:auto;font-size:14.5px;color:var(--gray-pale);white-space:nowrap}
.filter-count b{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}

/* ═══ PHẢN HỒI ═══ */
.callout{display:flex;gap:12px;align-items:flex-start;border-radius:var(--r-inner);padding:12px 16px;font-size:15px;line-height:1.55}
.callout>.ph{font-size:20px;margin-top:1px}
.callout--info{background:var(--info-bg);color:var(--info)} .callout--info span{color:var(--ink)}
.callout--ok{background:var(--ok-bg);color:var(--ok)} .callout--ok span{color:var(--ink)}
.callout--warning{background:var(--warn-bg);color:var(--warn)} .callout--warning span{color:var(--ink)}
.callout--err{background:var(--err-bg);color:var(--err)} .callout--err span{color:var(--ink)}

.toast{display:flex;align-items:center;gap:12px;background:var(--ink);color:#fff;border-radius:var(--r-inner);padding:10px 10px 10px 16px;font-size:15px;box-shadow:var(--shadow-box);min-height:48px}
.toast .ph{color:var(--text-faint)}
.toast button{border:0;background:none;color:var(--gold-light);font-weight:600;padding:8px 10px;border-radius:var(--r-btn)}
.toast button:hover{background:rgba(255,255,255,.08)}
.toast :focus-visible{outline-color:var(--gold-light)}

/* ═══ ĐIỀU HƯỚNG SITE (§5A §5B) ═══ */
.nav{position:sticky;top:0;z-index:40;background:var(--green);color:#fff;transition:box-shadow var(--dur-nav)}
.nav.has-bubble{box-shadow:0 2px 14px rgba(0,0,0,.16)}
.nav .container{display:flex;align-items:center;gap:20px;height:64px}
.nav .brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:#fff;flex:0 0 auto}
.nav .brand img{width:40px;height:40px;border-radius:50%;background:#fff;object-fit:cover}
.nav .brand span{font-size:15px;font-weight:700;letter-spacing:0}
/* 19/09: liên kết nằm GIỮA như trang chủ (logo trái · liên kết giữa · nút
   phải — bố cục Discord). Người dùng bắt lỗi màn trong dạt menu sang phải:
   "Menu đang lệch khác hoàn toàn Homepage". */
.nav-menu{display:flex;align-items:center;gap:22px;margin-inline:auto}
.nav-menu a{position:relative;color:#fff;text-decoration:none;font-size:15px;font-weight:600;padding:6px 0;white-space:nowrap;transition:color 200ms,opacity 200ms}
.nav-menu a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:#fff;transform:scaleX(0);transition:transform var(--dur-dash) var(--ease-btn)}
.nav-menu a:hover,.nav-menu a[aria-current="page"]{color:#fff}
.nav-menu a:hover::after,.nav-menu a[aria-current="page"]::after{transform:scaleX(1)}
.nav-btn{display:flex;align-items:center;gap:10px}

/* ── Bộ chuyển ngôn ngữ ──────────────────────────────────────────────────
   Mặt đang dùng TÔ ĐẶC, mặt kia để trống: đây là thứ người ta liếc chứ không
   đọc kỹ, nên khác biệt phải là mảng màu, không phải chữ đậm hơn.
   Đặt ở CUỐI hàng nút — việc phụ, không được chen trước việc chính là gia
   nhập hay đăng bài. */
.team{display:flex;align-items:center;gap:2px;padding:3px;
  border:1px solid rgba(255,255,255,.22);border-radius:999px}
.team button{min-width:36px;height:26px;padding:0 9px;border:0;border-radius:999px;
  background:none;font:inherit;font-size:12px;font-weight:600;letter-spacing:.04em;
  color:var(--dark-sub);
  transition:background var(--dur-btn) var(--ease-btn),color var(--dur-btn) var(--ease-btn)}
.team button:hover{color:#fff}
.team button[aria-pressed="true"]{background:#fff;color:var(--ink)}

/* trong ngăn trượt: tách khỏi danh sách liên kết bằng kẻ chỉ và khoảng trống */
.drawer-menu .lng-drawer{margin-top:14px;padding-top:16px;
  border-top:1px solid rgba(255,255,255,.18)}
.drawer-menu .team{width:max-content}
.drawer-menu .team button{height:36px;min-width:52px;font-size:14px}
/* Màn KHÔNG có thanh điều hướng (Đăng nhập, Đăng ký, Check-in, Luồng sự kiện)
   — bộ chuyển nổi góc trên phải do _shell.js chèn. Nền tối đặc riêng cho nó
   để đọc được trên cả nền sáng lẫn nền tối của các màn đó. */
.lng-place{position:fixed;top:calc(12px + env(safe-area-inset-top,0px));
  right:calc(12px + env(safe-area-inset-right,0px));z-index:60}
.lng-place .team{background:var(--green-deep);border-color:transparent;box-shadow:0 4px 14px rgba(11,26,9,.25)}
/* ══ MENU TÀI KHOẢN — MỘT bộ kiểu cho MỌI màn (19/09) ═════════════════════
   Trước đây hộp menu có ba bộ kiểu (_chung · _man · _trang-chu .v6) nên mỗi
   màn một kiểu — trái luật "thanh điều hướng mọi màn y hệt" (CLAUDE.md §4).
   Nay chỉ ở đây; hai bản kia đã gỡ.
   Hộp menu nền --v6-black (giao diện ứng dụng tối kiểu Discord) — chữ trắng
   15.6 : 1; nhãn nhóm xám nhạt chỉ dùng trong hộp tối này (§2B cho phép). */
.nav .menu-acct{position:relative;margin-left:4px}
.nav .acct{display:flex;align-items:center;gap:10px;height:44px;padding:0 12px 0 5px;border-radius:999px;
  border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.06);color:#fff;text-align:left;
  transition:background-color .2s,border-color .2s}
.nav .acct:hover,.nav .acct[aria-expanded="true"]{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.5)}
.nav .acct:focus-visible{outline:2px solid #fff;outline-offset:2px}
.nav .acct .avatar{--c:34px;font-size:12px;font-weight:700;color:var(--v6-black);box-shadow:0 0 0 2px var(--v6-night),0 0 0 3.5px var(--v6-leaf)}
.acct-text{display:flex;flex-direction:column;line-height:1.2}
.acct-text .name-acct{font-size:14px;font-weight:600;white-space:nowrap}
.acct-role{font-size:11.5px;font-weight:500;color:rgba(255,255,255,.75)}
.acct-role--slot{color:var(--gold-light)}                               /* 5.11 trên nền tối */
.acct-arrow{width:14px;height:14px;flex:0 0 14px;opacity:.8;transition:rotate .25s var(--ease-btn)}
.nav .acct[aria-expanded="true"] .acct-arrow{rotate:180deg}

.acct-bin{position:absolute;right:0;top:calc(100% + 12px);z-index:60;width:min(330px,92vw);padding:8px;
  display:flex;flex-direction:column;border-radius:16px;background:var(--v6-black);color:#fff;
  border:1px solid rgba(255,255,255,.08);box-shadow:0 24px 48px -12px rgba(0,0,0,.6);
  transition:opacity .18s ease,translate .18s ease}
/* Mở ra: trượt nhẹ xuống + hiện dần 0.18s (@starting-style — trình duyệt cũ
   thì hiện luôn, không hỏng gì). */
@starting-style{.acct-bin{opacity:0;translate:0 -6px}}
/* Mũi nhọn chỉ lên đúng nút */
.acct-bin::before{content:"";position:absolute;right:26px;top:-6px;width:12px;height:12px;rotate:45deg;
  background:var(--v6-black);border-left:1px solid rgba(255,255,255,.08);border-top:1px solid rgba(255,255,255,.08)}
.acct-head{display:flex;align-items:center;gap:12px;padding:8px 10px 14px}
.acct-head .avatar{--c:44px;font-size:15px;font-weight:700;color:var(--v6-black)}
.acct-head>span:last-child{display:flex;flex-direction:column;min-width:0;line-height:1.3}
.acct-head b{font-size:15px}
.acct-head small{font-size:12.5px;color:rgba(255,255,255,.72);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.acct-group{display:flex;flex-direction:column;padding:6px 0;border-top:1px solid rgba(255,255,255,.08)}
.acct-group-name{margin:0;padding:6px 12px 4px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:rgba(255,255,255,.55)}
.acct-bin a{display:flex;align-items:center;gap:12px;min-height:42px;padding:0 12px;border-radius:10px;
  font-size:14.5px;color:#fff;text-decoration:none;transition:background-color .15s}
.acct-bin a:hover{background:var(--v6-charcoal)}
.acct-bin a:focus-visible{outline:2px solid #fff;outline-offset:-2px}
.acct-ic{width:18px;height:18px;flex:0 0 18px;color:rgba(255,255,255,.7)}
.acct-bin a:hover .acct-ic{color:#fff}
.acct-group--logout .acct-ic{color:var(--v6-red)}                          /* biểu tượng, không phải chữ */
@media (prefers-reduced-motion:reduce){.acct-bin,.acct-arrow{transition:none}}
.nav .open-menu{display:none}
/* Menu ngang gấp thành nút ☰ từ khổ 1023 trở xuống (trước là 859).
   18/09: mục "Dịch vụ" đổi thành "Dịch vụ thành viên" theo biên bản họp —
   dài thêm ~75px, ở khổ 860 hàng menu tràn ra ngoài khung gần 100px
   (kiem-man bắt được). Bóp khoảng cách hay cỡ chữ để nhét vừa thì mục menu
   dính vào nhau, khó bấm trên máy tính bảng — gấp sớm hơn là cách sạch.
   Khổ 1024+ đo vẫn vừa kể cả vai admin (nhiều nút nhất). */
@container app (max-width:1199px){.nav-menu{gap:16px}.nav .brand span{display:none}}
@container app (max-width:1023px){
  .nav .container{height:60px;gap:10px}
  .nav-menu,.nav .hide-mobile{display:none}
  .nav-btn{margin-left:auto}
  .nav .open-menu{display:inline-flex}
  .nav .acct .acct-text,.nav .acct .acct-arrow{display:none}
  .nav .acct{padding:0 4px;height:44px}
}

/* ══ HỘP THOẠI ═══════════════════════════════════════════════════════════
   Dùng cho mọi chỗ cần HỎI trước khi làm. Luật quan trọng nhất của component
   này nằm ở chỗ nó KHÔNG được dùng để đổi nhãn nút: nhãn nút phải luôn nói
   đúng việc nó dẫn tới ("Xem hồ sơ", "Liên hệ"), còn chuyện thiếu quyền thì
   hỏi lúc bấm. Đổi nhãn thành "Đăng nhập" là vừa giấu mất đích đến, vừa lặp
   một chữ trên khắp trang.
   Đóng được bằng ba lối: nút Hủy, bấm ra ngoài, phím Esc.                 */
.dialog{position:fixed;inset:0;z-index:95;display:grid;place-items:center;
  padding:max(20px,env(safe-area-inset-top,0px)) max(20px,env(safe-area-inset-right,0px))
          max(20px,env(safe-area-inset-bottom,0px)) max(20px,env(safe-area-inset-left,0px));
  background:rgba(6,11,24,.58)}
/* position:relative — NEO cho nút ✕ (.dlg-line) ở góc trên phải. Thiếu dòng
   này thì .dlg-line neo vào .dialog (vỏ phủ toàn màn hình, position:fixed)
   và cái ✕ bay ra góc MÀN HÌNH chứ không nằm trên thẻ. Bản --access đã tự khai
   relative từ trước; nay đưa lên luật gốc để mọi hộp thoại đều gắn ✕ được. */
/* ⚠️ TRẦN CHIỀU CAO (21/09). Hộp thoại căn giữa trong một vỏ position:fixed:
   nội dung cao hơn khung nhìn thì nó tràn ra CẢ HAI ĐẦU và không cuộn tới
   được — hàng nút ở đáy hộp biến mất, người dùng kẹt lại trong hộp. Ở màn
   1080 hộp nào cũng vừa nên không ai thấy; ở khổ HD hoặc cửa sổ thấp thì
   một hộp hơi dài là đủ dính. Trần + cuộn trong hộp, đặt ngay ở VỎ CHUNG
   để mọi hộp thoại của mọi màn đều được che, khỏi phải nhớ từng chỗ.     */
.dialog .body-dlg{position:relative;width:min(440px,100%);background:var(--white);border-radius:16px;
  box-shadow:var(--shadow-box);padding:26px 26px 24px;
  max-height:calc(100vh - 40px);max-height:calc(100svh - 40px);overflow-y:auto;overscroll-behavior:contain}
.dialog .kicker-dlg{font-size:12.5px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--green)}
.dialog h2{margin-top:8px;font-size:21px;line-height:1.3;letter-spacing:-.022em;
  font-weight:700;color:var(--ink)}
.dialog p{margin-top:10px;font-size:15.5px;line-height:1.65;color:var(--gray)}
.dialog .btn-dlg{margin-top:22px;display:flex;gap:10px;flex-wrap:wrap}
.dialog .add-dlg{margin-top:18px;padding-top:15px;border-top:1px solid var(--border);
  font-size:14.5px;line-height:1.6;color:var(--gray)}
.dialog .add-dlg a{color:var(--green);font-weight:500}

/* ── HỘP "CẦN ĐĂNG NHẬP" (cổng quyền) — dựng lại 19/09 lượt 2 ─────────────
   Vỏ .dialog phía trên vẫn là vỏ chung của mọi hộp xác nhận (quản trị,
   bài của tôi…) — KHÔNG đổi. Riêng cổng quyền mang thêm .dialog--access.
   Một kiểu cho MỌI màn (bản tím toàn khối riêng của trang chủ đã gỡ — người
   dùng: "đừng để full background tím, trông đau mắt").
   Màu: dải trái chuyển sắc --green-sub → --green-deep, chữ trắng ≥ 5.4 : 1;
   phần chữ nền trắng, chữ --ink / --gray như mọi biểu mẫu (§4 biểu mẫu nền
   sáng). */
.dialog--access{background:rgba(4,10,4,.55);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.dialog--access .body-dlg{position:relative;display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  width:min(780px,100%);max-height:calc(100vh - 40px);max-height:calc(100svh - 40px);overflow:auto;padding:0;
  border-radius:22px;background:var(--white);box-shadow:0 40px 90px -24px rgba(0,0,0,.6);
  animation:dlg-in .4s cubic-bezier(.16,1,.3,1)}
@keyframes dlg-in{from{opacity:0;translate:0 18px;scale:.97}}
.dlg-pic{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:18px;padding:36px 28px;color:#fff;
  background:radial-gradient(120% 90% at 0% 0%,var(--green-sub),var(--green) 55%,var(--green-deep))}
/* Hai vòng mảnh góc dưới — trang trí nhẹ, không loá (§5). */
.dlg-pic::after{content:"";position:absolute;right:-70px;bottom:-70px;width:200px;height:200px;border-radius:50%;
  border:1.5px solid rgba(255,255,255,.18);box-shadow:0 0 0 28px rgba(255,255,255,.04);pointer-events:none}
.dlg-lock{width:56px;height:56px;border-radius:16px;display:grid;place-items:center;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.3)}
.dlg-lock svg{width:28px;height:28px;fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
/* Phải kèm .dialog--access: luật vỏ ".dialog p{color:xám}" (0,1,1) mạnh hơn
   ".dlg-pic-heading" (0,1,0) → chữ thành xám đậm trên nền tím, gần như tàng hình. */
.dialog--access .dlg-pic-heading{margin:0;font-size:12.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.88)}
.dlg-err{position:relative;z-index:1;list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.dlg-err li{display:flex;align-items:flex-start;gap:10px;padding:8px 10px;border-radius:12px;font-size:14.5px;line-height:1.45;color:#fff}
.dlg-err svg{flex:0 0 20px;width:20px;height:20px;padding:3px;border-radius:50%;background:rgba(255,255,255,.2);
  fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
/* Mục đang bấm — đứng đầu, nền sáng hơn, chữ đậm: người xem thấy ngay việc
   mình vừa định làm nằm trong quyền của thành viên. */
.dlg-err li.dlg-err--active{background:rgba(255,255,255,.14);font-weight:700}
.dlg-err li.dlg-err--active svg{background:#fff;stroke:var(--green)}
.dlg-text{display:flex;flex-direction:column;padding:40px 34px 30px}
.dialog--access .kicker-dlg{display:inline-flex;align-items:center;gap:8px;color:var(--green)}
.dialog--access .kicker-dlg::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--green-sub)}
.dialog--access h2{margin-top:10px;font-family:var(--font-title);font-weight:800;text-transform:uppercase;
  font-size:22px;line-height:1.2;letter-spacing:-.005em;color:var(--ink)}
.dialog--access .dlg-text>p:not(.kicker-dlg):not(.add-dlg){margin-top:12px;font-size:15.5px;line-height:1.65;color:var(--gray)}
.dialog--access .btn-dlg{margin-top:auto;padding-top:24px;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.dialog--access .btn{height:48px;border-radius:12px;font-size:15px;font-weight:600;padding:0 16px}
.dialog--access .btn--sub{gap:8px}
.dlg-zalo{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round}
.dialog--access .add-dlg{margin-top:18px;padding-top:16px;font-size:14.5px}
.dlg-line{position:absolute;right:14px;top:14px;z-index:2;width:38px;height:38px;border:0;border-radius:50%;display:grid;place-items:center;
  background:var(--cream);color:var(--gray);transition:background-color .2s,color .2s}
.dlg-line:hover{background:var(--border);color:var(--ink)}
.dlg-line svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
@container app (max-width:679px){
  .dialog--access .body-dlg{grid-template-columns:1fr}
  .dlg-pic{padding:22px 22px 18px;gap:12px}
  .dlg-lock{width:44px;height:44px;border-radius:12px}
  .dlg-lock svg{width:22px;height:22px}
  /* Điện thoại: chỉ giữ quyền lợi đang bấm — ba dòng đẩy nút xuống quá sâu. */
  .dlg-err li:not(.dlg-err--active){display:none}
  .dlg-text{padding:24px 22px 22px}
  .dlg-line{background:rgba(255,255,255,.18);color:#fff}
  .dialog--access .btn-dlg{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){.dialog--access .body-dlg{animation:none}}

.drawer-menu{position:absolute;inset:0;z-index:80;display:flex;justify-content:flex-end;background:rgba(6,11,24,.5)}
.drawer-menu .body-drawer{width:min(340px,88%);height:100%;background:var(--green);color:#fff;padding:16px 20px 24px;display:flex;flex-direction:column;gap:6px;overflow:auto;box-shadow:var(--shadow-box)}
.drawer-menu .body-drawer a{display:flex;align-items:center;min-height:52px;color:#fff;text-decoration:none;font-size:18px;border-bottom:1px solid rgba(255,255,255,.1)}
.drawer-menu .line-drawer{align-self:flex-end}

.drawer-filter{position:absolute;inset:0;z-index:80;display:flex;align-items:flex-end;background:rgba(6,11,24,.5)}
.drawer-filter .body-drawer{width:100%;max-height:85%;background:var(--white);border-radius:var(--r-card) var(--r-card) 0 0;display:flex;flex-direction:column;box-shadow:var(--shadow-box)}
.drawer-filter .head-drawer{display:flex;align-items:center;justify-content:space-between;padding:12px 16px 12px 20px;border-bottom:1px solid var(--border)}
.drawer-filter .head-drawer h2{font-size:18px}
.drawer-filter .mid{overflow:auto;padding:16px 20px}
.drawer-filter .last{display:flex;gap:10px;padding:12px 20px 16px;border-top:1px solid var(--border)}

/* ═══ HIỆN DẦN KHI CUỘN TỚI ═══════════════════════════════════════════════
   Khối chưa tới lượt thì lùi xuống 18px và trong suốt; cuộn tới thì nổi lên.

   Ba điều kiện an toàn, thiếu một là hỏng nặng:
   ① CHỈ ẩn khi JS đã chạy (`.app.hieu-ung`). Máy tắt JS hoặc script lỗi thì
      mọi thứ hiện bình thường — chứ không phải người ta nhận một trang trắng.
   ② `prefers-reduced-motion` thì bỏ hẳn hiệu ứng. Người bật thiết lập đó
      thường là người thật sự say chuyển động, không phải người thích ít.
   ③ ĐẦU TRANG không hiện dần (JS bỏ qua .screen-head). Đó là thứ đầu tiên người
      ta thấy; làm nó nhấp nháy lúc tải là mất thiện cảm ngay giây đầu.

   Dịch 18px thôi, không phải 40px: người dùng chính ngoài 40 tuổi đọc trên
   điện thoại, chuyển động lớn ở mỗi khối gây mệt chứ không gây thích. */
@media (prefers-reduced-motion:no-preference){
  .fx .rise{opacity:0;transform:translateY(26px);
    transition:opacity .72s var(--ease-btn),transform .72s var(--ease-btn)}
  .fx .rise.shown{opacity:1;transform:none}

  /* Cuộn gần tới đầu khối thì kéo cho khít — PROXIMITY, không phải mandatory.
     Mandatory giành quyền cuộn của người dùng; bị giật khỏi chỗ đang đọc là
     lỗi nặng hơn nhiều so với cái lợi "khối nào cũng khít mép". */
  html{scroll-snap-type:y proximity}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
}

/* ═══ CHÂN TRANG ═══ */
/* Ba tầng: TRÊN (thương hiệu + 3 cột) · DƯỚI (© + chính sách). Lý do và
   căn cứ pháp lý: ghi chú bảng CHAN trong _shell.js. Lớp con mang tiền tố
   chan- (bẫy tên trần, CLAUDE.md §8). */
.foot{background:var(--green-deep);color:var(--text-faint);padding-block:56px 28px;font-size:14.5px}
.foot-top{display:grid;grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr));gap:36px 40px}
.foot .brand{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.foot .brand img{width:48px;height:48px;border-radius:50%;background:#fff;object-fit:cover}
.foot .brand b{color:#fff;font-size:17px;letter-spacing:.02em;font-weight:700}
.foot .col-head p{max-width:36ch;line-height:1.6}
.foot-social{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.foot .foot-social-link{min-height:38px;padding:0 16px;border-radius:999px;border:1px solid rgba(255,255,255,.28);color:#fff}
.foot .foot-social-link:hover{background:rgba(255,255,255,.1);text-decoration:none}
.foot h4,.foot h2{color:#fff;font-size:14.5px;font-weight:600;margin-bottom:12px}
.foot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.foot a{color:var(--text-faint);text-decoration:none;display:inline-flex;align-items:center;min-height:32px;gap:8px}
.foot a:hover{color:#fff;text-decoration:underline}
.foot :focus-visible{outline-color:var(--gold-light)}
.foot-bottom{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 28px;
  margin-top:44px;padding-top:20px;border-top:1px solid rgba(255,255,255,.12);font-size:13px}
.foot .copyright{margin:0}
.foot-legal ul{flex-direction:row;flex-wrap:wrap;gap:0 22px}
@container app (max-width:1023px){.foot-top{grid-template-columns:repeat(3,minmax(0,1fr))}.foot .col-head{grid-column:1/-1}}
@container app (max-width:559px){.foot-top{grid-template-columns:1fr}.foot a{min-height:44px}
  .foot-bottom{flex-direction:column;align-items:flex-start}}

/* ═══ THƯƠNG HIỆU (DS 05) ═══ */
.block-round{position:absolute;border-radius:50%;pointer-events:none;z-index:0}
.curve{position:absolute;left:0;right:0;bottom:-1px;line-height:0;z-index:1}
.curve svg{width:100%;height:58px;display:block}
@container app (max-width:559px){.curve svg{height:40px}}

.band-slogan{background:var(--green);color:#fff;position:relative;overflow:hidden;text-align:center;padding-block:64px}
.band-slogan .slogan{font-size:40px;font-weight:600;line-height:1.3;color:#fff}
.band-slogan .slogan em{font-style:normal;color:var(--gold-light)}
.band-slogan .dash{width:54px;height:3px;border-radius:2px;background:var(--gold);margin:24px auto 0}
.band-slogan .three-col{display:flex;justify-content:center;flex-wrap:wrap;margin-top:24px}
.band-slogan .three-col span{position:relative;padding:0 32px;font-size:20px;font-weight:500;color:#fff}
.band-slogan .three-col span+span::before{content:"";position:absolute;left:0;top:50%;width:5px;height:5px;border-radius:50%;background:var(--gold);transform:translateY(-50%)}
@container app (max-width:559px){
  .band-slogan{padding-block:48px}
  .band-slogan .slogan{font-size:28px}
  .band-slogan .three-col span{font-size:17px;padding:0 16px}
}

.shown{opacity:0;transform:translateY(18px)}
.shown.in{opacity:1;transform:none;transition:opacity var(--dur-in) var(--ease-in),transform var(--dur-in) var(--ease-in)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .shown{opacity:1;transform:none}
}

/* ══ SƠ ĐỒ CHỖ NGỒI — .smap (20/09/2026) ═══════════════════════════════════
   Component DÙNG CHUNG cho hai màn, nên nằm ở đây chứ không ở _screens.css:
     · booking.html   — người dự CHỌN ghế (ghế là <button>)
     · admin-event-edit.html bước 4 — admin XEM sơ đồ đã dựng (ghế là
       <span>, không bấm được, nên không dính luật con trỏ §6B)
   Cùng một bộ lớp, khác đúng thẻ bọc — sửa một chỗ là hai màn cùng đổi.

   ★ BA TRẠNG THÁI GHẾ phải phân biệt được KHI IN ĐEN TRẮNG, không chỉ bằng
     màu (WCAG 1.4.1): còn trống = viền đậm nền trắng · đã có người = nền xám
     ĐẶC không viền · bạn chọn = nền xanh đặc + dấu tích. Ba hình khác nhau,
     không phải ba màu của cùng một hình.
   ★ Ghế đã có người KHÔNG chỉ mờ đi — dùng aria-disabled/disabled để bàn phím
     và trình đọc màn hình cũng biết, và con trỏ ra not-allowed (đã khai sẵn
     trong bảng §8B ở trên).
   ★ Sơ đồ rộng hơn khung thì CHO CUỘN NGANG, không thu nhỏ ghế: ghế dưới
     ~28px thì ngón tay người đọc điện thoại bấm trượt sang ghế bên cạnh —
     mà phần lớn thành viên đọc trên điện thoại.
   ⚠️ Đừng đặt padding-left cho .smap-scroll (bẫy §8: khối cuộn ngang nuốt mất
     phần đệm) — lề trái do chính .smap lo. */
.smap{--seat:34px;display:flex;flex-direction:column;align-items:center;gap:4px;
  padding:20px clamp(12px,3vw,22px) 22px;background:var(--bird);
  border:1px solid var(--border);border-radius:var(--r-card)}
/* `safe center` chứ không phải `margin:auto`: sơ đồ rộng hơn khung thì auto
   margin CẮT MẤT mép trái và không cuộn tới được nữa (cùng họ với bẫy auto
   margin của .container trong flex, §8). `safe` tự lùi về căn trái khi tràn. */
.smap-scroll{width:100%;overflow-x:auto;overscroll-behavior-x:contain;
  display:flex;justify-content:safe center}
.smap-vacant{display:flex;flex-direction:column;align-items:center;gap:4px;
  min-width:max-content;padding-bottom:2px}
/* Cuộn được thì PHẢI NÓI RA. Trên khổ điện thoại sơ đồ 10 ghế không vừa bề
   ngang; không có dấu hiệu thì người đọc tưởng hội trường chỉ có 5 ghế mỗi
   hàng. Hai lớp dấu hiệu: vệt mờ ở mép phải (nhìn) + một dòng chữ (đọc được
   cả khi in ra hoặc khi nhìn ảnh tĩnh — §6B·1). */
.smap{position:relative}
.smap--over .smap-scroll{mask-image:linear-gradient(90deg,#000 88%,transparent)}
.smap-over{margin-top:10px;display:flex;align-items:center;gap:7px;
  font-size:12.5px;font-weight:600;color:var(--green-dark)}
.smap-over::before{content:"↔";font-size:15px}
.smap-over[hidden]{display:none}

/* Băng sân khấu: hình thang nhẹ để biết ngay đầu nào là trước. */
.smap-base{width:min(100%,420px);margin-bottom:14px;padding:7px 0;text-align:center;
  font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:#fff;background:linear-gradient(150deg,var(--green-sub),var(--green-dark));
  clip-path:polygon(7% 0,93% 0,100% 100%,0 100%);border-radius:3px}

.smap-row{display:flex;align-items:center;gap:5px}
.smap-row-label{width:22px;flex:0 0 22px;text-align:center;
  font-size:12px;font-weight:700;color:var(--gray-pale);font-variant-numeric:tabular-nums}
.smap-err{width:calc(var(--seat) * .6);flex:0 0 auto}

/* Ghế: cùng một bộ luật cho <button> và <span>. */
.smap-seat{width:var(--seat);height:var(--seat);flex:0 0 var(--seat);
  display:grid;place-items:center;padding:0;border-radius:9px 9px 5px 5px;
  font:600 11.5px/1 inherit;font-variant-numeric:tabular-nums;
  background:var(--white);border:1.5px solid var(--border-field);color:var(--ink);
  transition:transform var(--dur-btn) var(--ease-btn),background var(--dur-btn) var(--ease-btn)}
button.smap-seat:hover:not(:disabled){transform:translateY(-2px);border-color:var(--green)}
button.smap-seat:focus-visible{outline:3px solid var(--green);outline-offset:2px}
/* Đã có người: nền ĐẶC màu trung tính, KHÔNG viền — khác hẳn hình cái ghế
   trống (viền đậm, ruột trắng). Bản đầu dùng --border #E1E2F2 thì gần như
   trắng, nhìn cả sơ đồ không ra chỗ nào đã kín — phải đủ đậm mới đọc được
   "khu này đã đầy" từ xa. --ink trên --border-field đo được 5.77. */
.smap-seat--desk{background:var(--border-field);border-color:transparent;color:var(--ink)}
/* Bạn chọn: nền xanh đặc + dấu tích đè lên số ghế. */
.smap-seat--sel{background:var(--green);border-color:var(--green);color:#fff}
.smap-seat--sel::after{content:"✓";position:absolute;font-size:13px}
.smap-seat--sel{position:relative;color:transparent}

/* Chú giải: ba mẫu ghế thật, không phải ba chấm màu. */
.smap-text{display:flex;flex-wrap:wrap;justify-content:center;gap:9px 18px;
  margin-top:16px;padding-top:14px;border-top:1px solid var(--border);width:100%}
.smap-text>span{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--gray)}
.smap-text i{width:20px;height:20px;flex:0 0 20px;border-radius:6px 6px 3px 3px;
  background:var(--white);border:1.5px solid var(--border-field)}
.smap-text .desk{background:var(--border-field);border-color:transparent}
.smap-text .sel{background:var(--green);border-color:var(--green)}

/* Dòng tổng dưới sơ đồ. */
.smap-total{margin-top:12px;font-size:14px;color:var(--gray);text-align:center}
.smap-total b{color:var(--ink);font-weight:700;font-variant-numeric:tabular-nums}

/* ── NHIỀU SƠ ĐỒ TRONG MỘT ĐƠN (20/09) ───────────────────────────────────
   Một sự kiện có thể có vé ngồi hội trường đánh số ghế, vé ngồi bàn tiệc, và
   vé không xếp chỗ — cả ba cùng lúc (Ngày hội 10/10). Mỗi sơ đồ một THẺ riêng,
   xếp dọc chứ không làm tab: tab giấu mất việc còn dở ở buổi kia, mà đây là
   biểu mẫu có nút Gửi — thứ còn thiếu phải NHÌN THẤY, không phải bấm ra mới thấy.
   Đầu thẻ ghi tên buổi + khu + tiến độ "1 / 2", đủ để liếc qua biết còn nợ gì. */
.smap-card+.smap-card{margin-top:16px}
.smap-card[hidden]{display:none}
.smap-head{display:flex;align-items:center;justify-content:space-between;gap:12px 16px;
  flex-wrap:wrap;margin-bottom:10px}
.smap-head b{display:block;font-size:15.5px;font-weight:700;letter-spacing:-.012em;color:var(--ink)}
.smap-head small{display:block;margin-top:2px;font-size:13px;color:var(--gray)}
.smap-money{flex:0 0 auto;padding:4px 12px;border-radius:999px;font-size:13px;font-weight:700;
  font-variant-numeric:tabular-nums;background:var(--warn-bg);color:var(--warn)}
.smap-money--full{background:var(--ok-bg);color:var(--ok)}

/* ── SƠ ĐỒ BÀN TIỆC ──────────────────────────────────────────────────────
   Khác hàng ghế cả hình lẫn cách chọn: mỗi bàn một nút TRÒN, và chọn MỘT bàn
   cho cả nhóm chứ không chọn từng ghế — đi tiệc mà hệ thống xé nhóm ra ngồi
   bốn bàn khác nhau thì hỏng buổi tiệc.
   ★ In SỐ CHỖ CÒN, không in số đã ngồi: người đặt cần biết bàn này còn chứa
     được nhóm mình không, chứ không cần biết đã có mấy người.
   ★ Bàn không đủ chỗ cho cả nhóm cũng bị khoá — JS đặt disabled, con trỏ ra
     not-allowed theo bảng §8B. */
.smap--desk{--seat:auto}
.smap-desk{display:grid;grid-template-columns:repeat(auto-fit,minmax(88px,1fr));gap:12px;
  width:100%;min-width:min(100%,360px);padding-bottom:2px}
.smap-unit{aspect-ratio:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  padding:6px;border-radius:50%;background:var(--white);border:1.5px solid var(--border-field);color:var(--ink);
  transition:transform var(--dur-btn) var(--ease-btn),background var(--dur-btn) var(--ease-btn)}
.smap-unit:hover:not(:disabled){transform:translateY(-2px);border-color:var(--green)}
.smap-unit:focus-visible{outline:3px solid var(--green);outline-offset:2px}
.smap-unit-name{font-size:19px;font-weight:800;letter-spacing:-.02em;line-height:1;font-variant-numeric:tabular-nums}
.smap-unit-name::before{content:"Bàn ";font-size:10.5px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;display:block;margin-bottom:3px;color:var(--gray-pale)}
.smap-unit-child{font-size:11.5px;font-weight:600;color:var(--gray)}
.smap-unit--desk{background:var(--border-field);border-color:transparent;color:var(--ink)}
.smap-unit--desk .smap-unit-name::before,.smap-unit--desk .smap-unit-child{color:var(--ink);opacity:.75}
.smap-unit--sel{background:var(--green);border-color:var(--green);color:#fff}
.smap-unit--sel .smap-unit-name::before,.smap-unit--sel .smap-unit-child{color:#fff;opacity:.9}
@media (prefers-reduced-motion:reduce){.smap-unit{transition:none}.smap-unit:hover{transform:none}}

/* Ghế / bàn CÒN TRỐNG nhưng TẠM KHOÁ — đã chọn đủ số, hoặc bàn không đủ
   chỗ cho cả nhóm. Phải khác cả ghế chọn được LẪN ghế đã có người: mờ đi là
   "lúc này không dùng được", còn nền đặc là "người khác ngồi rồi". Không có
   dấu hiệu thì người ta bấm hoài không ăn mà không hiểu vì sao — con trỏ
   not-allowed (§8B) chỉ nói được với người dùng chuột. */
.smap-seat:disabled:not(.smap-seat--desk),.smap-unit:disabled:not(.smap-unit--desk){opacity:.4}

@container app (max-width:559px){ .smap{--seat:30px} }
@media (prefers-reduced-motion:reduce){ .smap-seat{transition:none} button.smap-seat:hover{transform:none} }

/* ══ THEME SITE THEO TRANG CHỦ (19/09/2026) ═══════════════════════════════
   Người dùng: "update 1 loạt các màn hình khác cho đồng nhất tone, style…
   bên Homepage". Lớp này áp cho MỌI màn; trang chủ có lớp .v6 riêng (nạp
   sau, đè lại những chỗ khác). Màu đã đổi ở token phía trên — ở đây chỉ còn
   phông, thanh điều hướng, chân trang, tiêu đề đầu trang và nút.          */
body{font-family:var(--font-ui);letter-spacing:.005em}
/* Tiêu đề đầu màn: Montserrat 800 VIẾT HOA như trang chủ; dãn 1.1 cho dấu
   chồng hai tầng (Ể, Ổ). */
.head-sub h1,.block-head h2{font-family:var(--font-title);font-weight:800;text-transform:uppercase;letter-spacing:-.01em;line-height:1.1}
/* Thanh điều hướng: dải đêm như đầu trang chủ; nút "Tham gia" trắng bo 16
   (kiểu "Log In" của Discord) thay nút vàng. */
/* Nền thanh = đúng màu đỉnh của đầu màn (--v6-night) nên hai thứ liền một
   mảng như trang chủ; cuộn xuống thì thành kính mờ tối — y trang chủ. */
.nav{background:var(--green-sub)}   /* 22/09: tách khỏi --v6-night — token đó nay là chặng đậm nhất của DẢI ĐẦU MÀN, không phải màu thanh điều hướng. §4: thanh điều hướng mọi màn y hệt trang chủ. */
.nav.has-bubble{background:color-mix(in srgb,var(--green-sub) 92%,transparent);box-shadow:none;
  border-bottom:1px solid rgba(255,255,255,.08);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.nav .btn--outline-white{border-color:rgba(255,255,255,.7);color:#fff}
.nav .btn--gold{background:#fff;color:var(--v6-black);border-radius:16px;font-weight:600}
.nav .btn--gold:hover{background:var(--v6-light);box-shadow:none}
.nav .btn--outline-white{border-radius:12px}
.drawer-menu .body-drawer{background:var(--dark-2)}
/* Chân trang nền đen — như trang chủ và Discord. */
.foot{background:var(--v6-void);color:rgba(255,255,255,.8)}
.foot a{color:rgba(255,255,255,.85)}
/* Đầu màn trong: luật nằm ở _screens.css mục "ĐẦU TRANG PHỤ" (bản 19/09 lượt 2).
   Bản trước đặt nền ở đây nhưng _screens.css nạp SAU nên đè mất — bẫy §8. */


/* ══ TRANG VĂN BẢN — khung dùng chung cho mọi màn "đọc" (20/09/2026) ═══════
   Sáu màn dùng chung khung này: Quy chế hoạt động · Điều khoản sử dụng ·
   Chính sách bảo mật · Chính sách cookie · Câu hỏi thường gặp · Hướng dẫn
   sử dụng. Tất cả đều là chân trang cột "Hỗ trợ" và tầng chính sách, tức là
   người ta tới đây khi ĐANG CẦN MỘT CÂU TRẢ LỜI, không phải để lướt.

   Vì sao gom thành MỘT khung chứ không mỗi màn một kiểu:
   · Sáu màn cùng một việc (đọc một văn bản dài có đánh mục). Sáu bản bố cục
     khác nhau là đúng bẫy "nhiều bản lệch nhau" đã ghi ở đầu _shell.js —
     sửa một chỗ thành ra phải sửa sáu nơi.
   · Người đọc sang màn thứ hai đã biết mục lục nằm đâu, không phải học lại.
   · COMMON_COMPONENTS §5.8 đã khai sẵn hai component này (`.breadcrumb`,
     `.toc`) nhưng chưa ai dựng; đây là bản dựng đầu tiên.

   ⚠️ Cột mục lục KHÔNG phải "cột trống để phân biệt khối" mà §4 cấm — nó
   mang nội dung điều hướng thật và dính khi cuộn; văn bản dài không có mục
   lục thì người ta phải cuộn mò.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Đường dẫn (breadcrumb) ──────────────────────────────────────────────
   Nằm TRONG đầu màn tối, ngay trên tiêu đề. Bản gốc là `.newsd-breadcrumb` của
   news-detail.html (19/09); chú thích ở đó đã ghi "khi gộp vào
   _common.css thì đổi về .breadcrumb" — nay gộp thật, màn tin tức dùng chung
   luôn, không còn hai bản.
   Chữ liên kết `--dark-label` (4.67 ở chặng sáng nhất của dải tối), mục đang
   xem màu trắng + aria-current. Dấu › là trang trí: `/ ""` để trình đọc màn
   hình không đọc thành chữ.                                              */
/* 25/09: KHÔNG viết thẻ này tay nữa — _shell.js (dungDuongDan) dựng cho mọi
   màn có .head-sub. Chặng giữa khai bằng <a data-crumb>, xem chú thích ở đó. */
.breadcrumb{margin-bottom:18px}
.breadcrumb ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;
  row-gap:2px;font-size:14.5px;line-height:1.5}
.breadcrumb li{display:flex;align-items:center;min-width:0}
.breadcrumb li+li::before{content:"›" / "";margin:0 10px;color:var(--dark-label)}
.breadcrumb a{padding-block:6px;color:var(--dark-label);text-decoration:none;
  transition:color var(--dur-btn) var(--ease-btn)}
.breadcrumb a:hover{color:var(--white);text-decoration:underline}
/* Tên trang có thể rất dài: cắt một dòng. Tên đầy đủ nằm ngay ở tiêu đề dưới. */
.breadcrumb [aria-current]{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  color:var(--white);font-weight:500}
.breadcrumb li:last-child{flex:0 1 auto;max-width:100%}
@container app (max-width:559px){
  /* Điện thoại: bỏ mục đang xem — nó lặp đúng tiêu đề nằm ngay bên dưới,
     mà chiều ngang thì đang thiếu. Giữ lại phần LỐI VỀ, thứ thật sự cần. */
  .breadcrumb li:last-child{display:none}
}

/* ── Khung hai cột: mục lục dính + thân văn bản ─────────────────────────
   260px cho mục lục là đủ cho mục dài nhất ("Quy định liên hệ giữa thành
   viên") xuống tối đa hai dòng. Thân văn bản giới hạn 74ch — dài hơn thì
   mắt trượt dòng, mà khung nội dung tới 1760px nên không giới hạn là ra
   một dòng chữ chạy suốt màn hình.
   Phần trống bên phải ở khổ rộng KHÔNG phải mảng trắng lỗi (§4): đây là văn
   bản một cột, nới rộng chỉ làm khó đọc hơn. Khối "Liên quan" cuối trang ăn
   hết bề ngang nên trang không kết thúc bằng một cột hẹp lửng.            */
/* max-width + căn giữa: KHÔNG phải để "cho đẹp". Khung nội dung rộng tới
   1760px, mà thân văn bản buộc phải hẹp (74ch) để còn đọc được — nên ở khổ
   1880 phần thừa dồn hết sang PHẢI thành một mảng trắng 650px, đúng thứ
   khách đã bắt lỗi 16/09 ("phần center trắng rất nhiều"). Căn giữa thì phần
   thừa chia đều hai bên và đọc ra là LỀ, không ra lỗi.
   §4 nói cách chữa là "đổi số cột hoặc thêm mục, không phải giãn chữ ra cho
   đầy" — ở đây không thêm cột được (văn bản một cột là đúng), nên chữa bằng
   cách chia lại phần thừa. Khối "Xem thêm" cuối trang vẫn ăn hết bề ngang
   khung này nên trang không kết thúc bằng một cột hẹp lửng. */
.page-doc{display:grid;grid-template-columns:260px minmax(0,1fr);gap:clamp(32px,4vw,64px);align-items:start;
  max-width:1200px;margin-inline:auto}
@container app (max-width:1023px){.page-doc{grid-template-columns:minmax(0,1fr);gap:24px}}

.toc{position:sticky;top:88px}
.toc-name{font-size:12.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gray-pale)}
/* Ruột mục lục do _static-page.js đổ vào `[data-toc]`. Luật viết theo
   THUỘC TÍNH chứ không theo lớp `.toc` vì có HAI chỗ đặt mục lục (cột
   dính ở máy tính, hộp gập ở điện thoại) và cả hai cùng đổ từ một nguồn. */
[data-toc] ol{list-style:none;margin:12px 0 0;padding:0;border-left:2px solid var(--border)}
[data-toc] li{min-width:0}
[data-toc] a{display:block;padding:9px 0 9px 16px;margin-left:-2px;border-left:2px solid transparent;
  font-size:14.5px;line-height:1.45;color:var(--gray);text-decoration:none;
  transition:color var(--dur-btn) var(--ease-btn),border-color var(--dur-btn) var(--ease-btn)}
[data-toc] a:hover{color:var(--ink)}
/* Mục đang đọc: đổi MÀU + ĐẬM + vạch bên trái, ba dấu hiệu chứ không chỉ
   màu — người khó phân biệt màu vẫn thấy vạch và nét đậm (§7 chuẩn thiết kế). */
[data-toc] a[aria-current="true"]{color:var(--green);border-left-color:var(--green);font-weight:600}
.toc-num{color:var(--gray-pale);margin-right:6px}
[data-toc] a[aria-current="true"] .toc-num{color:var(--green)}
/* Hai chỗ đặt, mỗi khổ hiện một chỗ. Điện thoại: hộp gập đặt TRÊN thân bài,
   KHÔNG dính — thanh dính trên màn hẹp ăn mất phần màn hình đang đọc. */
.toc-urgent{display:none}
@container app (max-width:1023px){
  .page-doc>.toc{display:none}
  .toc-urgent{display:block;margin-bottom:22px}
}
.toc-urgent{border:1px solid var(--border);border-radius:var(--r-card);background:var(--white);padding:0 16px}
.toc-urgent>summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 0;font-weight:600;font-size:15px;color:var(--ink)}
.toc-urgent>summary::-webkit-details-marker{display:none}
.toc-urgent>summary::after{content:"";width:9px;height:9px;flex:0 0 9px;border-right:2px solid var(--gray);
  border-bottom:2px solid var(--gray);transform:rotate(45deg) translateY(-2px);
  transition:transform var(--dur-btn) var(--ease-btn)}
.toc-urgent[open]>summary::after{transform:rotate(-135deg) translateY(-2px)}
.toc-urgent ol{margin-top:0;padding-bottom:10px}

/* ── Thân văn bản ────────────────────────────────────────────────────────
   Phông Inter (không phải Noto Serif của bài viết): đây là văn bản TRA CỨU,
   người ta quét tìm một mục rồi đọc đúng mục đó. Serif hợp bài đọc liền
   mạch; ở đây nét sans và số đứng rõ hơn khi nhảy giữa các mục đánh số.
   Cỡ 16.5/1.75 — người dùng chính ngoài 40 tuổi đọc trên điện thoại.     */
.prose{max-width:74ch;font-size:16.5px;line-height:1.75;color:var(--ink)}

/* ── MỤC của văn bản — dựng lại 20/09 (lượt 2) ───────────────────────────
   Người dùng bác bản đầu: *"Design hiện tại quá xấu, quá nhiều text, quá khó
   nhìn"*. Bản đầu là một cột đoạn văn 16.5px đều tăm tắp, mục nào cũng mở
   bằng "2.1 · 2.2 · 2.3" in đậm giữa dòng — không có gì cho mắt bám vào, và
   người đọc chỉ muốn biết MỘT điều thì phải đọc cả trang.
   Bản này đổi ba thứ, theo đúng thứ tự người ta thật sự đọc một văn bản:
     ① MỖI MỤC CÓ SỐ LỚN + MỘT DÒNG TÓM TẮT. Đọc riêng dòng tóm tắt của sáu
       mục là đã nắm được cả văn bản — thứ mà bản đầu không cho.
     ② TỪNG ĐIỀU TÁCH THÀNH HÀNG RIÊNG, số nằm ở CỘT TRÁI cố định. Số thành
       một cái thang dọc để mắt trượt xuống, thay vì lẫn vào chữ.
     ③ CHỮ NGẮN LẠI. Mỗi điều gói trong hai dòng; câu nào dài hơn là viết
       lại, không phải thu cỡ chữ.
   ⚠️ Không đổi cỡ chữ thân xuống dưới 16.5px để "cho gọn" — người dùng chính
     ngoài 40 tuổi đọc trên điện thoại (CLAUDE.md §5C). Gọn bằng ÍT CHỮ, không
     bằng chữ nhỏ.
   scroll-margin-top: mục lục nhảy tới thì đầu mục không chui xuống dưới
   thanh điều hướng dính (64px).                                          */
.doc-item{margin-top:52px;scroll-margin-top:88px}
.doc-item:first-child{margin-top:0}
.doc-item-head{display:grid;grid-template-columns:auto minmax(0,1fr);gap:18px;align-items:start;
  padding-bottom:16px;border-bottom:1px solid var(--border)}
/* Số mục: viên vuông bo, KHÔNG tròn — tròn đọc ra là bước trong quy trình
   (đã dùng cho màn Hướng dẫn), vuông bo đọc ra là số hiệu của một mục. */
.doc-item-num{display:grid;place-items:center;width:46px;height:46px;border-radius:14px;
  background:var(--green-pale);color:var(--green);font-family:var(--font-title);font-weight:800;
  font-size:17px;font-variant-numeric:tabular-nums}
/* Cùng viên đó nhưng đựng BIỂU TƯỢNG — dùng cho nhóm câu hỏi và nhóm việc,
   nơi đánh số 01/02 là vô nghĩa (nhóm câu hỏi không có thứ tự bắt buộc). */
.doc-item-num .ic{width:22px;height:22px;color:var(--green);margin:0}
.prose h2{font-family:var(--font-title);font-weight:800;
  font-size:clamp(19px,1.9cqi,23px);line-height:1.22;letter-spacing:-.01em;color:var(--ink);text-wrap:balance}
/* Tiêu đề mục KHÔNG viết hoa toàn bộ, khác tiêu đề đầu màn: một văn bản
   dài mà mục nào cũng in hoa thì đọc nặng, mà mục ở đây có tới sáu bảy cái. */
.doc-item-sum{margin-top:5px;font-size:16px;line-height:1.5;color:var(--gray);text-wrap:pretty}

/* Từng điều: cột số cố định 46px + chữ. Không kẻ chỉ giữa các điều — chính
   cột số đã là cái thang dọc; thêm kẻ ngang nữa thì ra bảng biểu, nặng. */
/* Viết đủ `.prose .clause-list` (0-2-0) chứ không viết trần: luật chung
   `.prose ul,.prose ol` (0-1-1) nằm SAU trong file và có độ ưu tiên cao
   hơn, nên bản trần thua cả hai đường — `padding-left:24px` của nó đẩy cả
   cột số lệch 24px so với viên số của đầu mục. Đúng bẫy §8 CLAUDE.md. */
.prose .clause-list{list-style:none;margin:18px 0 0;padding:0}
/* Cột số rộng đúng bằng viên số của đầu mục (46px) và cùng khe (18px) để
   chữ của điều thẳng hàng với tiêu đề mục — lệch vài pixel là cái thang
   dọc gãy, mắt nhận ra ngay dù không chỉ được ra lỗi gì. */
.prose .clause-list>li{padding-left:0;margin-top:0}
.clause{display:grid;grid-template-columns:46px minmax(0,1fr);gap:18px;padding:10px 0;align-items:start}
.clause-num{font-size:14.5px;font-weight:700;color:var(--green);font-variant-numeric:tabular-nums;
  line-height:1.9}
.clause>div>b:first-child{color:var(--ink)}
@container app (max-width:559px){
  /* Điện thoại: 46px cột số ăn mất 12% bề ngang mà chỉ để in "2.1". Xếp số
     lên trên thành một nhãn nhỏ, chữ chiếm trọn bề ngang. */
  .clause{grid-template-columns:minmax(0,1fr);gap:2px;padding:9px 0}
  .clause-num{line-height:1.4}
}

.prose h3{margin-top:28px;font-size:17.5px;font-weight:600;line-height:1.4;color:var(--ink)}
.prose p{margin-top:14px;text-wrap:pretty}
/* Danh sách giữ `display:list-item` mặc định, KHÔNG dựng bằng flex: dấu đầu
   dòng và số thứ tự của `::marker` là thứ duy nhất cho biết đây là danh sách
   có thứ tự — mà một quy chế thì mục "3.2" phải đọc ra được số. */
.prose ul,.prose ol{margin-top:14px;padding-left:24px}
.prose li{padding-left:4px}
.prose li+li{margin-top:8px}
.prose li::marker{color:var(--green)}
/* ── LIÊN KẾT TRONG CHỮ `.link-text` (21/09) ──────────────────────────────
   Luật nền `a{color:inherit}` ở đầu file CỐ Ý bỏ màu cho MỌI liên kết: phần
   lớn liên kết ở site này là cả một tấm thẻ hoặc một mục điều hướng, tô xanh
   gạch chân nguyên thẻ là hỏng (§8 — "cả thẻ là một liên kết").
   Nhưng liên kết NẰM GIỮA MỘT CÂU thì mất luôn dấu hiệu. Người dùng bắt lỗi
   21/09 ở ô đồng ý màn Liên hệ: "Chính sách bảo mật" trông y hệt chữ thường,
   không ai đoán ra bấm được — mà đó lại là chỗ bắt buộc đọc trước khi tích.

   Gạch chân đi KÈM màu, không thay bằng màu không: người mù màu (khoảng 8%
   nam giới — mà thành viên phần lớn là chủ doanh nghiệp nam ngoài 40) chỉ
   còn gạch chân để nhận ra; §6B cũng đòi "nhìn ảnh tĩnh, không có chuột, vẫn
   đoán ra chỗ bấm".
   Màu: `--green` 7.17:1 trên nền trắng, 6.55:1 trên `--cream`, thấp nhất 5.88:1
   trên dải báo `--info-bg` — đạt cả, mà không thêm mã màu mới (§3). Rê chuột đổi sang `--green-dark` (≥ 7.48:1 ở mọi nền) và dày nét
   thêm; KHÔNG dùng `--green-sub` như bản cũ — nó chỉ 4.19:1 trên `--cream`, tức
   rê chuột vào lại LÀM TỆ ĐI thứ vừa đang đọc được.

   Danh sách dưới là những khối CHỮ CHẠY VĂN XUÔI. Thêm khối mới có liên kết
   giữa câu thì thêm chọn tử vào ĐÂY, đừng khai màu riêng trong file màn —
   khai lẻ là mỗi nơi một kiểu gạch chân, đúng cái bẫy đã dính với thanh
   điều hướng. Một chỗ lẻ loi thì gắn thẳng lớp `.link-text` lên thẻ `a`. */
.link-text,
.prose a,
.box-sel a:not(.btn),
.adm-alert a:not(.btn),
.adm-suggest a:not(.btn),
.adm-compose-body a:not(.btn),
.amod-view-ctn a:not(.btn),
.fm-base a,
.reg-dup a,
.reg-sent a,
.signin-box .rule a,
.tva-addon a,
.post-qc-foot a{
  color:var(--green);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1.5px}
.link-text:hover,
.prose a:hover,
.box-sel a:not(.btn):hover,
.adm-alert a:not(.btn):hover,
.adm-suggest a:not(.btn):hover,
.adm-compose-body a:not(.btn):hover,
.amod-view-ctn a:not(.btn):hover,
.fm-base a:hover,
.reg-dup a:hover,
.reg-sent a:hover,
.signin-box .rule a:hover,
.tva-addon a:hover,
.post-qc-foot a:hover{color:var(--green-dark);text-decoration-thickness:2px}
.prose strong,.prose b{font-weight:600}
/* Đoạn dẫn đầu mỗi mục lớn — đậm hơn thân, nhạt hơn tiêu đề. */
.prose-hint{margin-top:12px;font-size:17px;color:var(--gray)}

/* ── TÓM LƯỢC — ba ô đầu mỗi văn bản (thêm 20/09 lượt 2) ─────────────────
   Đây là phần chữa cốt lõi cho lời chê "quá nhiều text". Người mở Chính sách
   bảo mật gần như không bao giờ đọc hết tám mục; họ muốn biết ba điều: các
   anh thu gì, có bán không, tôi xoá được không. Ba ô này trả lời đúng ba
   điều đó trong mười giây, rồi ai cần chi tiết mới đọc xuống.
   ⚠️ TÓM LƯỢC KHÔNG THAY VĂN BẢN. Nó là lối vào, không phải bản rút gọn có
     giá trị pháp lý — nên mỗi ô chỉ nói một ý đã có nguyên văn ở dưới,
     không được thêm cam kết mới.
   MÀU: cả ba ô dùng CHUNG một tông xanh thương hiệu, phân biệt bằng BIỂU
   TƯỢNG. Đã thử ba sắc nhấn --s1/--s2/--s4 cho ba ô: mảng nền nhạt thì đạt,
   nhưng biểu tượng trên nền đó chỉ 1.9–2.4 (§3 — sắc nhấn là MẢNG MÀU,
   không phải chữ, mà biểu tượng thì tính như chữ). Ba ô ba màu cũng đọc ra
   là ba mức độ quan trọng khác nhau, trong khi chúng ngang nhau.        */
/* Nằm TRONG cùng một `.block` với thân văn bản (không phải khối riêng) và cắt
   ở 1200px cho thẳng mép với lưới mục lục + thân bên dưới. Hai khối rời nhau
   thì ăn thêm 112px đệm của `.block` mà chẳng thêm nghĩa gì. */
.excerpt{max-width:1200px;margin:0 auto clamp(36px,4vw,52px);
  display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr))}
/* Màn văn bản siết đệm trên: đầu màn tối đã cao ~300px, thêm 112px trắng nữa
   thì cuộn một vòng mới thấy chữ. Cùng nhịp với `.newsd-block` của màn tin tức. */
.block--doc{padding-block:clamp(36px,4vw,56px) clamp(56px,6vw,88px)}
.sum-card{padding:20px;border:1px solid var(--border);border-radius:18px;background:var(--white)}
.sum-card-ic{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;
  background:var(--green-pale);margin-bottom:14px}
.sum-card-ic .ic{width:22px;height:22px;color:var(--green);margin:0}
.sum-card b{display:block;font-size:16.5px;font-weight:700;line-height:1.3;color:var(--ink);
  text-wrap:balance}
.sum-card p{margin-top:6px;font-size:15px;line-height:1.55;color:var(--gray);text-wrap:pretty}
/* Khối trích nguyên văn quy định (mục 3 Quy chế là chữ của khách). */
.prose-quote{margin-top:18px;padding:16px 20px;border-left:3px solid var(--green);
  border-radius:0 var(--r-inner) var(--r-inner) 0;background:var(--green-pale)}
.prose-quote p{margin-top:8px}
.prose-quote p:first-child{margin-top:0}
/* Bảng trong văn bản (loại cookie, loại dữ liệu). Cuộn ngang trên điện
   thoại bằng chính ô bọc, không ép bảng co lại thành chữ chồng lên nhau. */
.prose-table{margin-top:18px;overflow-x:auto;border:1px solid var(--border);border-radius:var(--r-card)}
.prose-table table{width:100%;border-collapse:collapse;font-size:15px;min-width:520px}
.prose-table th,.prose-table td{padding:12px 16px;text-align:left;vertical-align:top;
  border-bottom:1px solid var(--border)}
.prose-table th{background:var(--cream);font-weight:600;font-size:13.5px;letter-spacing:.02em;color:var(--gray)}
.prose-table tr:last-child td{border-bottom:0}

/* Dòng thông tin dưới tiêu đề đầu màn: ngày cập nhật, thời gian đọc ước
   lượng thì KHÔNG (COMMON_COMPONENTS §5.5 — tự tính, sai thường xuyên). */
.doc-info{margin-top:14px;display:flex;flex-wrap:wrap;gap:8px 20px;font-size:14.5px;color:var(--dark-label)}
.doc-info span{display:inline-flex;align-items:center;gap:8px}
.doc-info .ic{width:17px;height:17px;flex:0 0 17px;color:var(--dark-label)}

/* ── Khối "Liên quan" cuối trang văn bản — ĐÃ BỎ (20/09, lượt 3) ───────
   Người dùng: *"Bỏ mấy cái này đi, vì ngay footer có rồi nên ko cần thiết."*
   Đúng: người đọc xuống tới cuối văn bản là CHÂN TRANG ngay bên dưới, mà
   chân trang đã có đủ cả sáu trang nội dung lẫn bốn liên kết pháp lý. Lý do
   dựng nó ban đầu ("quay lên chân trang thì phải cuộn hết một văn bản dài")
   sai từ đầu — cuối bài KHÔNG phải đầu bài.
   Gỡ cả CSS lẫn hàm dựng trong _static-page.js: để lại code chết thì lần sau
   có người tưởng khối đó còn dùng và khai thêm mục vào bảng TRANG.        */

/* Khối được nhảy tới bằng neo (#…) phải chừa chỗ cho thanh điều hướng dính,
   không thì tiêu đề khối chui xuống dưới thanh và người ta tưởng nhảy sai.
   Khai chung cho MỌI section có id — hiện dùng cho "Nhóm điều phối" ở màn
   Giới thiệu (chân trang trỏ vào), sau này thêm neo ở đâu cũng đúng sẵn. */
section[id]{scroll-margin-top:80px}
/* Dấu mũi tên chéo của liên kết ra ngoài (lk() trong _shell.js). Nhỏ hơn
   chữ một bậc và mờ hơn: nó là GHI CHÚ về đích đến, không phải một nút.
   Không đặt margin: chỗ dùng duy nhất hiện nay là chân trang, mà `.foot a`
   đã là inline-flex có gap:8px — thêm margin nữa thành khe 13px lệch hẳn
   với các mục cùng cột.
   `color:currentColor` là BẮT BUỘC, không phải thừa: `.ic` dùng chung đặt
   `color:var(--green-sub)`, mà chân trang nền đen — để nguyên thì mũi tên ra
   màu chàm trên nền đen, gần như không thấy. Lấy đúng màu chữ của liên kết. */
.ic-outer{width:14px;height:14px;flex:0 0 14px;color:currentColor;opacity:.65}

/* ══ Ô CHỌN TỆP (FilePicker) — 20/09/2026 ════════════════════════════════
   `<input type="file">` trần vẽ ra nút của TRÌNH DUYỆT: trên máy này là
   "Choose Files · No file chosen" — chữ tiếng Anh giữa một màn tiếng Việt,
   và nó không nhận được kiểu nút của dự án (§1: chữ hiển thị là tiếng Việt;
   đây là mockup cho end-client xem, không phải bản thử kỹ thuật).
   Cách chữa chuẩn: giấu ô thật, bấm bằng <label>, và tự viết dòng "đã chọn
   gì". KHÔNG dùng `.sr-only` cho ô thật — lớp đó cắt còn 1px nên vành focus
   vẽ ra một chấm; ở đây để ô phủ đúng cái nhãn rồi cho trong suốt, vành
   focus vì vậy bao quanh đúng nút mà người dùng bàn phím đang đứng.       */
.fld-file{display:flex;align-items:center;gap:14px;flex-wrap:wrap;position:relative}
.fld-file input[type=file]{position:absolute;inset:0;width:100%;height:100%;opacity:0;
  /* Không đặt pointer-events:none — ô vẫn phải nhận được tiêu điểm bàn phím. */
  z-index:-1}
.fld-file label{margin:0}
.fld-file input[type=file]:focus-visible+label{outline:2px solid var(--green);outline-offset:2px}
.fld-file-name{font-size:14.5px;line-height:1.5;color:var(--gray);min-width:0;overflow-wrap:anywhere}
.fld-file-name:empty::before{content:"Chưa chọn tệp nào";color:var(--gray-pale)}
:lang(en) .fld-file-name:empty::before{content:"No file selected"}


/* ══════════════════════════════════════════════════════════════════════════
   VÁ 22/09 lượt 2 — trạng thái rê chuột · phân trang · khối Nguyên tắc.
   Đặt CUỐI file theo §8: chèn thêm thì đặt SAU luật gốc.
   ══════════════════════════════════════════════════════════════════════════ */


/* ── ④ PHÂN TRANG ───────────────────────────────────────────────────────
   Bản cũ: ô vuông bo nhẹ, trang đang xem tô đặc, các trang khác không viền —
   nhìn ra một hàng số trôi nổi, không đọc ra là bộ điều khiển. Bản này:
     · mỗi trang là một viên có mép rõ → đọc ra là bấm được (§6B: nhìn ảnh
       tĩnh, không có chuột, phải đoán ra chỗ bấm)
     · trang đang xem tô đặc + nhấc nhẹ, KHÔNG chỉ đổi màu chữ
     · "Trước/Sau" có mũi tên, và khi hết trang thì mờ + not-allowed (§6B)
     · cỡ chạm tối thiểu 44px — người đọc chính ngoài 40 tuổi, dùng điện thoại */
/* ⚠ PHẢI GỒM `button`. Tin tức và Danh bạ sinh phân trang bằng <button>
   (xem news.html, hàm ve()), trong khi luật gốc chỉ nhắm `a` và `span` —
   nên các nút số không nhận kiểu nào cả, chỉ mỗi trang đang xem có nền vì
   nó dùng bộ chọn thuộc tính [aria-current]. Nhìn ra là một hàng số trôi
   nổi. Đây là lý do phải liệt kê cả ba loại thẻ ở mọi luật dưới đây. */
.pagination{gap:8px;margin-top:36px}
.pagination a,.pagination button,.pagination span{
  min-width:44px;height:44px;padding:0 14px;border-radius:999px;
  font:600 15px/1 var(--font-ui);color:var(--ink);
  font-variant-numeric:tabular-nums;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--border);background:var(--white);
  transition:background-color var(--dur-btn) var(--ease-btn),
             border-color var(--dur-btn) var(--ease-btn),
             color var(--dur-btn) var(--ease-btn),
             translate var(--dur-btn) var(--ease-btn)}
.pagination a:hover,.pagination button:hover{background:var(--green-pale);
  border-color:var(--green);color:var(--green-dark);box-shadow:none}
.pagination a:active,.pagination button:active{translate:0 1px}
.pagination [aria-current="page"]{background:var(--green);border-color:var(--green);
  color:#fff;font-weight:700;translate:0 -1px;
  box-shadow:0 6px 16px -6px color-mix(in srgb,var(--green) 55%,transparent)}
/* Dấu … giữa các quãng: không phải nút, nên không viền, không nền. */
.pagination .muted{border:0;background:none;min-width:24px;padding:0;color:var(--gray-pale)}
/* Trước/Sau không có lớp riêng — chúng là <button> mang chữ nên tự rộng hơn
   nhờ padding. Chỉ cần nới đệm ngang cho nút có nhiều hơn hai ký tự. */
.pagination button{padding-inline:18px}
.pagination [aria-disabled="true"],.pagination [disabled]{
  opacity:.45;cursor:not-allowed;pointer-events:none}
@container app (max-width:519px){
  .pagination a,.pagination button,.pagination span{
    min-width:40px;height:40px;padding-inline:12px;font-size:14px}
}