/* ══════════════════════════════════════════════════════════════════════════
   BỐ CỤC THEO MÀN — dùng cùng _common.css

   _common.css giữ token và component dùng chung (nút, ô nhập, thẻ, nhãn…).
   File này chỉ giữ phần bố cục riêng của từng màn: đầu trang chủ, ba khối
   nội dung, và màn Đăng nhập. Tách ra để _common.css không phình theo số màn.

   Mọi mã màu ở đây đều lấy từ token §2A–§2F. Không đặt mã màu mới.
   ══════════════════════════════════════════════════════════════════════════ */

/* ══ LOGO ════════════════════════════════════════════════════════════════
   MỘT bản dùng cho mọi nền: assets/logo-ait-ket-noi-tron.png — logo GỐC của
   KH, cắt theo tâm quang học rồi đặt trong một đĩa trắng tròn, góc ngoài
   trong suốt. Không tô lại màu, không bóp méo, không đổi tỷ lệ.

   Ba con số giữ cho logo cân:
   · vành xanh chiếm 88% đường kính đĩa → khoảng thở đều 6% mỗi bên;
   · logo và chữ đặt cạnh cách nhau 12px, bằng khoảng nửa chiều cao chữ;
   · cỡ nhỏ nhất là 40px — dưới ngưỡng đó ba hình người và chữ "AIT" dồn lại
     thành một đám rối. Chữ "KẾT NỐI" bên trong logo thì cỡ nào ở thanh điều
     hướng cũng không đọc nổi, nên phần đọc do chữ đặt cạnh đảm nhiệm.

   Vì đĩa trắng đã nằm sẵn trong file, KHÔNG thêm background/padding ở CSS —
   thêm nữa là sinh ra hai lớp trắng lệch nhau, nhìn ra ngay ở cỡ lớn.
   ⚑ Xin được file SVG chính chủ thì thay bản PNG này (nét sắc ở mọi cỡ).   */
.nav .brand img,
.foot .brand img,
.label-sign-dark img{border-radius:50%;background:none;padding:0;object-fit:contain}
.nav--dark .brand img{width:40px;height:40px}
.foot .brand img{width:52px;height:52px}
/* 19/09: bỏ viết hoa — trang chủ ghi "AIT Kết Nối", hai nơi phải một kiểu. */
.nav--dark .brand span{font-weight:700}
/* Thanh trong suốt nằm đè lên nền tối: thêm một vòng sáng RẤT mảnh để mép
   đĩa trắng không dính vào nền. Chỉ 1px, không quầng sáng — KH nhạy với loá. */
.nav--vacant .brand img{box-shadow:0 0 0 1px rgba(255,255,255,.22)}

/* ══ THANH ĐIỀU HƯỚNG ════════════════════════════════════════════════════ */
.nav--dark{background:var(--v6-night)}
/* biến thể trong suốt: nằm đè lên đầu trang tối của Trang chủ */
.nav--vacant{position:absolute;top:0;left:0;right:0;background:none;box-shadow:none}
.nav--vacant.has-bubble{box-shadow:none}
/* cuộn qua khỏi đầu trang thì hoá đặc và dính lại, để menu luôn đọc được */
.nav--vacant.nav--solid{position:fixed;background:var(--v6-night);
  box-shadow:0 2px 14px rgba(6,11,24,.5)}
/* Liên kết trắng như trang chủ (không còn xanh nhạt #C6D8F0 của bản navy). */
.nav--dark .nav-menu a{color:#fff}

/* Chân trang: 4 khối (giới thiệu + ba nhóm), nới lưới cho đủ một hàng. */
.foot .container{grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr))}
@container app (max-width:859px){
  .foot .container{grid-template-columns:1fr 1fr}
}
@container app (max-width:559px){
  .foot .container{grid-template-columns:1fr}
}

/* Ngăn trượt phải bám theo khung nhìn, không theo trang: mở ở giữa trang mà
   dùng position:absolute thì nó nằm tận đầu trang. */
.drawer-menu{position:fixed}

/* ══ MENU DƯỚI ẢNH ĐẠI DIỆN — chỉ thành viên mới có ═════════════════════
   Ba việc riêng của một thành viên: hồ sơ của mình, bài mình đã đăng, và
   lối ra. Không nhét chúng vào thanh ngang: đó là việc cá nhân, không phải
   mục nội dung, nên phải nằm dưới đúng ảnh đại diện của người đó.        */
/* Nhãn "Chờ duyệt" cạnh ảnh đại diện: cho người đang chờ biết mình đứng ở
   đâu trong quy trình, ngay tại chỗ họ nhìn vào đầu tiên. Dùng cặp màu cảnh
   báo của §2C, nhưng nền phải đủ sáng để nổi trên thanh điều hướng tối. */
.nav .pending-label{margin-left:2px;font-size:12px}
@container app (max-width:859px){.nav .pending-label{display:none}}
/* Menu tài khoản: kiểu nằm ở _common.css (một bộ cho mọi màn, 19/09). */

/* thông báo màn chưa dựng */
.alert-mockup{position:fixed;left:50%;bottom:calc(26px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:90;
  max-width:min(520px,92vw);padding:12px 20px;border-radius:var(--r-btn);
  background:var(--green-deep);color:#fff;font-size:14.5px;box-shadow:var(--shadow-box)}

/* ══════════════════════════════════════════════════════════════════════════
   TRANG CHỦ — ĐẦU TRANG
   Chỉ màn này có nền mạnh. Từ khối nội dung trở xuống là nền sáng, theo luật
   §2G-2: "không đặt hai mảng tối liền nhau".
   ══════════════════════════════════════════════════════════════════════════ */
/* ══ MÀN ĐẦU = ĐẦU TRANG + DẢI DOANH NGHIỆP, VỪA ĐÚNG MỘT MÀN HÌNH ═══════
   Trước đây đầu trang khoá min-height:clamp(620px,92vh,900px) rồi dải doanh
   nghiệp xếp tiếp phía dưới — nên trên màn cao 1080 thì dải bị đẩy khỏi tầm
   nhìn, phải cuộn mới thấy. Doanh nghiệp thành viên là chỗ người ta thấy tên
   mình; để nó rơi xuống "trang thứ hai" là hỏng đúng mục đích của nó.

   Cách làm: bọc cả hai vào một khối cao ĐÚNG một màn hình, xếp dọc. Đầu
   trang ăn hết phần còn lại (flex:1), dải doanh nghiệp giữ chiều cao thật
   của nó và luôn nằm sát đáy. Màn cao bao nhiêu cũng vậy.

   Dùng svh chứ không dùng vh: trên điện thoại, vh tính cả phần thanh địa chỉ
   sẽ thu lại, nên dải bị đẩy xuống dưới mép màn. svh là chiều cao lúc thanh
   địa chỉ ĐANG HIỆN — chọn mức an toàn. Có dòng vh đứng trước làm dự phòng
   cho trình duyệt cũ.

   Màn hình quá thấp (dưới ~700px) thì nội dung cao hơn một màn — khối tự
   giãn ra và cuộn bình thường, không cắt mất chữ.                        */
.screen-head{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;
  scroll-snap-align:start}
/* Gỡ SÀN chiều cao của đầu trang khi nó nằm trong .screen-head — còn sàn thì
   đầu trang không co lại được, và trên màn thấp nó đẩy dải rơi khỏi tầm nhìn. */
.screen-head>.head-page{flex:1 1 auto;min-height:0}

/* ── Co theo CHIỀU CAO màn ──────────────────────────────────────────────
   Điểm ngắt của dự án dùng @container app vì nó đo theo bề RỘNG .app. Chiều
   cao thì container query không đo được, nên chỗ này buộc phải dùng @media
   (max-height). Đây là ngoại lệ duy nhất, và nó không đụng tới luật bề rộng.
   Ba nấc: màn càng thấp thì đệm càng mỏng và chòm kết nối càng nhỏ, để phần
   chữ và dải doanh nghiệp luôn vừa một màn.                              */
@media (max-height:900px){
  .screen-head .head-page .body{padding-top:92px;padding-bottom:30px}
  .screen-head .head-page .constel{width:min(58%,700px)}
}
@media (max-height:760px){
  .screen-head .head-page .body{padding-top:84px;padding-bottom:22px;gap:24px}
  .screen-head .head-page h1{font-size:clamp(34px,4.4vw,56px)}
  .screen-head .head-page .hint{margin-top:16px;font-size:16.5px}
  .screen-head .head-page .search-page{margin-top:22px}
  .screen-head .head-page .btn-row{margin-top:16px}
  .screen-head .head-page .constel{width:min(52%,580px)}
  .screen-head .head-page .scroll{display:none}
}
@media (max-height:640px){
  /* Câu dẫn đầu trang dài ra thì màn đầu vỡ luật một-màn-hình. Siết thêm ở
     đây thay vì cắt câu — câu chữ là của KH, đệm là của mình. */
  .screen-head .head-page .hint{font-size:15px;line-height:1.55;max-width:46ch}
  .screen-head .head-page .search-page{margin-top:14px}
  .screen-head .band-run{padding-block:12px 14px}
  .screen-head .logo-band{margin-top:12px}
  .screen-head .band-run .label-tuong::before,.screen-head .band-run .label-tuong::after{width:30px}
  .screen-head .head-page .body{padding-top:70px;padding-bottom:12px}
  .screen-head .head-page h1{font-size:31px}
  .screen-head .head-page .hint{margin-top:10px;font-size:15.5px}
  .screen-head .head-page .search-page{margin-top:16px}
  .screen-head .head-page .btn-row{margin-top:12px}
  .screen-head .head-page .constel{opacity:.34}  /* màn rất thấp: lùi hẳn thành nền */
  .screen-head .band-run{padding-block:14px 16px}
  .screen-head .logo-band{margin-top:14px}
}
.screen-head>.band-run{flex:0 0 auto}

.head-page{position:relative;overflow:hidden;min-height:clamp(560px,64vh,760px);
  display:flex;flex-direction:column;
  background:
    radial-gradient(52% 62% at 74% 46%, rgba(95,170,255,.32) 0%, transparent 70%),
    radial-gradient(40% 50% at 20% 80%, rgba(226,63,184,.12) 0%, transparent 72%),
    linear-gradient(118deg,var(--dark-1) 0%,var(--dark-2) 30%,var(--dark-3) 56%,
                    var(--dark-4) 80%,var(--dark-5) 100%)}

/* lưới chấm — đậm ở hai mép, tan dần vào giữa để không chọi với chữ */
.head-page .dot{position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:radial-gradient(rgba(140,185,255,.42) 1px, transparent 1px);
  background-size:22px 22px;
  -webkit-mask-image:linear-gradient(90deg,#000 0%,transparent 34%,transparent 66%,#000 100%);
          mask-image:linear-gradient(90deg,#000 0%,transparent 34%,transparent 66%,#000 100%)}

/* cung màu — chỉ HAI cung, và che mờ vùng giữa.
   Bốn cung không che từng bị chê rối: chúng cắt ngang đúng khoảng trống
   giữa chữ và chòm kết nối. */
.head-page .arc{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;
  -webkit-mask-image:radial-gradient(76% 68% at 52% 52%, transparent 8%, rgba(0,0,0,.35) 52%, #000 86%);
          mask-image:radial-gradient(76% 68% at 52% 52%, transparent 8%, rgba(0,0,0,.35) 52%, #000 86%)}
.head-page .arc path{fill:none;stroke-width:1.2}
.head-page .arc circle{stroke-width:1.2;fill:var(--dark-1)}

.head-page .body{position:relative;z-index:5;flex:1;display:grid;
  grid-template-columns:minmax(0,1.14fr) minmax(0,.86fr);gap:36px;align-items:center;
  max-width:1760px;margin:0 auto;width:100%;
  padding:100px clamp(20px,2.6vw,44px) 46px}
.head-page .kicker{display:inline-flex;align-items:center;gap:11px;font-size:13px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--dark-label)}
.head-page .kicker i{width:26px;height:1px;background:currentColor;display:block;opacity:.7}
.head-page h1{margin-top:22px;font-size:clamp(38px,5.4vw,76px);line-height:1.0;
  letter-spacing:-.045em;font-weight:700;color:#fff}
/* một cụm chữ phát sáng chuyển sắc — điểm nhấn duy nhất của đầu trang */
.head-page h1 em{font-style:normal;
  background:linear-gradient(96deg,#F06BD4 0%,#7FB5FF 46%,#2FC4F5 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 16px rgba(226,63,184,.42)) drop-shadow(0 0 30px rgba(47,196,245,.24))}
/* 40ch cũ ép câu dẫn xuống ba dòng trong khi cột trái còn thừa chỗ.
   `balance` chia đều hai dòng nên ngắt rơi đúng vào dấu gạch ngang —
   hai vế của câu nằm trên hai dòng, không ngắt giữa cụm. */
.head-page .hint{margin-top:24px;font-size:18px;line-height:1.72;color:var(--dark-text);max-width:58ch;text-wrap:balance}
/* ══ Ô TÌM KIẾM TOÀN TRANG ════════════════════════════════════════════════
   Ba lần dựng hỏng trước đó, ghi lại để không lặp:
   ① đặt thành DẢI TRẮNG giữa vùng tối và vùng sáng → không thuộc về bên nào;
   ② đặt thành THẺ GÁC LÊN dải chữ chạy → chữ chạy chui sau thẻ, nhìn ra lỗi;
   ③ hiểu sai mục đích — dựng thành ô tra cứu DANH BẠ nên phải chặn đăng nhập,
      trong khi ô tìm kiếm ở trang chủ thì đương nhiên là TÌM TOÀN TRANG.

   Nay: ô tìm nằm hẳn TRONG đầu trang, ngay dưới câu dẫn. Nó là một phần của
   lời chào chứ không phải một dải riêng, nên không còn chuyện lệch tông.
   Phạm vi tìm là toàn bộ nội dung công khai — tin tức, sự kiện, khóa học,
   sản phẩm & dịch vụ — cộng thêm thành viên nếu người tìm đã được duyệt.
   KHÔNG chặn đăng nhập ở đây: chặn ở kết quả thuộc tầng thành viên thôi.

   Hình thức: một viên thuốc trắng trên nền tối, nút chính nằm luôn bên trong.
   Nền trắng đặc là thứ nổi nhất có thể trên nền navy, nên không cần thêm
   bóng mạnh hay quầng sáng — KH nhạy với loá.                            */
.head-page .search-page{margin-top:32px;max-width:600px;display:flex;align-items:center;gap:10px;
  background:var(--white);border-radius:999px;padding:7px 7px 7px 20px;
  box-shadow:0 10px 26px rgba(5,12,28,.26)}
.head-page .search-page svg{width:20px;height:20px;flex:0 0 20px;color:var(--gray-pale)}
.head-page .search-page input{flex:1 1 auto;min-width:0;height:46px;border:0;background:none;
  font:inherit;font-size:16px;color:var(--ink);outline:none}
.head-page .search-page input::placeholder{color:var(--gray-pale)}
.head-page .search-page input:focus-visible{outline:none}
.head-page .search-page .btn{height:46px;flex:0 0 auto;padding:0 24px;border-radius:999px;
  font-size:15px}

.head-page .btn-row{display:flex;gap:14px;margin-top:22px;flex-wrap:wrap}
.head-page .btn{height:52px;padding:0 30px;border-radius:999px;font-size:15.5px;font-weight:600}
/* Hai nút cùng kiểu viền mảnh; nút chính đậm viền hơn, nút phụ mờ hơn.
   Không dùng mảng vàng đặc ở đây: trên nền tối nó loá và tranh mất chỗ
   của cụm chữ chuyển sắc — vốn mới là điểm nhấn của đầu trang. */
.head-page .btn--main-dark{background:none;color:#fff;
  box-shadow:inset 0 0 0 1.4px rgba(160,205,255,.6)}
.head-page .btn--main-dark:hover{background:rgba(120,180,255,.1);
  box-shadow:inset 0 0 0 1.4px rgba(190,222,255,.9);transform:translateY(-2px)}
.head-page .btn--sub-dark{background:none;color:var(--dark-sub);
  box-shadow:inset 0 0 0 1.4px rgba(140,165,200,.3)}
.head-page .btn--sub-dark:hover{color:#fff;
  box-shadow:inset 0 0 0 1.4px rgba(160,205,255,.55);transform:translateY(-2px)}
.head-page .scroll{position:absolute;z-index:5;bottom:28px;display:flex;align-items:center;gap:12px;
  font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:rgba(196,217,244,.62)}
.head-page .scroll::before{content:'';width:9px;height:9px;border-radius:50%;flex:0 0 9px;
  box-shadow:inset 0 0 0 1px rgba(160,190,225,.7)}
.head-page .scroll i{width:60px;height:1px;display:block;
  background:linear-gradient(90deg,rgba(160,190,225,.55),transparent)}
.head-page .scroll-left{left:28px}

/* CHÒM KẾT NỐI — hình ảnh của chính chữ "kết nối".
   Chỉ nan hoa từ tâm ra: một trung tâm nối tới các thành viên đọc ra ngay;
   bản đan chéo vòng ngoài trước đây bị chê rối. */
/* ══ CHÒM KẾT NỐI ════════════════════════════════════════════════════════
   Trên trang chủ, chòm KHÔNG nằm trong ô lưới nữa mà tràn ra mép phải và
   cao gần hết đầu trang. Lý do: bản cũ nhốt chòm trong cột phải của lưới,
   nên nửa phải đầu trang thừa ra hai mảng xanh trống ở góc trên và góc dưới
   — đúng chỗ làm trang trông thưa và cũ. Cho hình chạm mép thì nửa phải có
   việc để làm, mà không phải thêm một chữ nào.

   Đây là NỀN TRANG TRÍ, không phải khối nội dung. Luật §4 "mọi khối nằm
   trong .container, không dựng khối tràn mép" nói về KHỐI NỘI DUNG — cái mà
   KH bác ngày 16/09 là dải tên doanh nghiệp (nội dung) chạy tràn mép. Lưới
   chấm và cung màu của đầu trang vốn đã tràn mép từ đầu, chòm nay cùng lớp
   với chúng.

   Chữ vẫn nằm trong cột trái của lưới (1.14fr ≈ 57% bề rộng) và nội dung
   thật chỉ chiếm tới ~45%, nên mép trái của chòm ở 46% không chạm vào chữ. */
.constel{position:relative;width:100%;aspect-ratio:1/.9}
.head-page .constel{position:absolute;z-index:2;top:50%;right:-6%;
  width:min(64%,900px);max-width:none;margin:0;aspect-ratio:600/470;
  transform:translateY(-50%)}
.constel svg{width:100%;height:100%}
.constel .place{fill:none;stroke:rgba(130,180,255,.34);stroke-width:1}
.constel .btn-c{fill:var(--dark-field);stroke-width:1.3}
.constel .name{fill:#D2E4FA;font-size:11px;font-weight:700;text-anchor:middle;
  dominant-baseline:central;font-family:var(--font-ui)}

/* ══ DẢI DOANH NGHIỆP THÀNH VIÊN ═════════════════════════════════════════
   Đây là chỗ một doanh nghiệp thấy TÊN MÌNH trong cộng đồng, nên nó phải vừa
   sống động vừa đọc được. Hai thứ đó tưởng chọi nhau, giải bằng ba luật:

   ① CHẠY, nhưng chạy bằng Ô LOGO chứ không phải chữ trơn. Chữ trơn trôi
      ngang thì ra băng tỉ giá; ô có viền, có chỗ đặt logo thì ra tấm biển
      ghi danh đang diễu qua.
   ② DỪNG KHI RÊ CHUỘT. Đây là điểm mấu chốt — hết lý do "chạy thì không ai
      kịp đọc": muốn đọc hoặc muốn bấm thì cứ rê vào, dải đứng lại.
   ③ MỜ DẦN HAI MÉP. Ô không bị cắt phựt ở rìa màn mà tan dần, nên chuyển
      động đọc ra là cố ý chứ không phải tràn khung.

   Tốc độ 46s cho một vòng — đủ chậm để mắt bắt được từng tên, không thành
   hiệu ứng chạy chữ quảng cáo. Ai bật "giảm chuyển động" thì dải đứng yên.

   ⚑ Ô vuông bên trái mỗi tên là CHỖ ĐẶT LOGO THẬT — hiện để chữ cái đầu vì
     chưa có logo. Có logo thì thay ảnh vào, giữ màu gốc, không xám hoá (§26).
   ⚑ §26 của chuẩn ghi "dải logo không tự chạy". KH chọn cho chạy — đã ghi
     ngoại lệ này vào DESIGN_WEB_STANDARDS.                                */
.band-run{background:var(--dark-1);border-block:1px solid rgba(140,190,255,.16);
  padding-block:26px 30px;overflow:hidden}
.band-run .label-tuong{display:flex;align-items:center;justify-content:center;gap:16px;
  font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(196,217,244,.72)}
.band-run .label-tuong::before,.band-run .label-tuong::after{content:'';height:1px;width:44px;
  background:rgba(160,200,255,.28)}

.logo-band{margin-top:20px;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%)}
/* ══ CHIỀU CHẠY: PHẢI → TRÁI (nội dung dịch sang trái, ô mới hiện ở mép phải)
   Đây là quyết định CÓ CHỦ Ý, đừng đảo lại:
   ① Tiếng Việt đọc trái → phải. Chữ dịch sang trái thì tên vừa đọc xong trôi
      đi, tên kế tiếp tiến tới từ bên phải — đúng hướng mắt vẫn đi khi đọc
      một dòng. Mắt gần như đứng yên, chữ tự chạy qua.
      Chạy ngược lại (trái → phải) thì ô đang đọc cứ trượt ra xa theo đúng
      hướng mắt định nhảy tới, thành ra vừa đọc vừa đuổi.
   ② Đây cũng là chiều của mọi dải chữ chạy người ta đã quen — bảng tin, bảng
      chứng khoán, dải logo đối tác. Quen thì không phải nghĩ.
   Ngoại lệ duy nhất là giao diện tiếng Ả Rập / Do Thái (đọc phải → trái) thì
   phải đảo. Dự án này không có.

   TỐC ĐỘ: 64s cho một vòng ≈ 24px mỗi giây. Đủ chậm để đọc trọn một tên
   doanh nghiệp mà không phải đưa mắt theo. Bản 46s trước đó nhanh gần gấp
   rưỡi, thành ra dải trông như đang trôi chứ không như đang mời đọc.        */
.logo-band .lan{display:flex;width:max-content;gap:14px;animation:run 64s linear infinite}
.logo-band:hover .lan,.logo-band:focus-within .lan{animation-play-state:paused}
@keyframes run{to{transform:translateX(calc(-50% - 7px))}}
@media (prefers-reduced-motion:reduce){.logo-band .lan{animation:none}}

.logo-band .fld-company{flex:0 0 auto;display:flex;align-items:center;gap:11px;
  padding:10px 20px 10px 10px;border-radius:14px;text-decoration:none;
  background:linear-gradient(180deg,rgba(255,255,255,.085),rgba(255,255,255,.04));
  border:1px solid rgba(160,200,255,.18);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07);
  transition:background var(--dur-btn) var(--ease-btn),
             border-color var(--dur-btn) var(--ease-btn),
             transform var(--dur-btn) var(--ease-btn)}
.logo-band .fld-company:hover{background:linear-gradient(180deg,rgba(255,255,255,.15),rgba(255,255,255,.07));
  border-color:rgba(175,215,255,.48);transform:translateY(-3px)}
.logo-band .sym{width:38px;height:38px;flex:0 0 38px;border-radius:11px;display:grid;
  place-items:center;font-size:13px;font-weight:700;color:#0A1528;letter-spacing:.02em;
  box-shadow:inset 0 -2px 0 rgba(10,21,40,.12)}
.logo-band .b1{background:#9CC6EE} .logo-band .b2{background:#9BD8EA}
.logo-band .b3{background:#AFC4F0} .logo-band .b4{background:#B6D2F2}
.logo-band .name-company{font-size:14.5px;font-weight:500;color:#DCE8F8;white-space:nowrap}

/* Cả thẻ là một liên kết -> bỏ gạch chân cho toàn khối; nhấn mạnh bằng
   đổi màu tiêu đề khi rê chuột, không bằng gạch chân. */
.featured,.info-hint,.info-list a,.block-head .view,.head-page .btn,.lib,.pin,
.signin-box .forgot,.signin-left .ticket,.signin-left .label-sign-dark{text-decoration:none}

/* ══ ĐẦU MỖI KHỐI ════════════════════════════════════════════════════════
   Tiêu đề bên trái, một liên kết "xem tất cả" bên phải, kẻ chỉ ngăn bên dưới.
   KHÔNG có dòng nhãn nhỏ phía trên tiêu đề: đó là chỗ dễ biến thành lời chú
   thích nội bộ ("do ai đăng", "lấy từ đâu"), mà người dùng cuối không cần
   biết. Tiêu đề phải tự nói được nó là gì.                                 */
/* ══ MỖI KHỐI VỪA MỘT MÀN HÌNH ═══════════════════════════════════════════
   min-height chứ không phải height: khối nào nội dung dài hơn một màn thì cứ
   dài ra, không cắt. Nội dung căn giữa theo chiều dọc nên khối ngắn không bị
   dồn lên đỉnh để lại một mảng trống dưới chân.

   Bắt cặp với scroll-snap PROXIMITY (không phải mandatory) ở cuối file: cuộn
   gần tới đầu khối thì trình duyệt kéo cho khít, còn cuộn giữa chừng thì để
   yên. Mandatory sẽ giành quyền cuộn của người dùng — với người đọc trên điện
   thoại, bị giật khỏi chỗ đang đọc là lỗi nặng hơn nhiều so với lợi ích. */
.block,.pin-block,.search-block,.lib-block{min-height:100svh;
  display:flex;flex-direction:column;justify-content:center;
  scroll-snap-align:start;scroll-snap-stop:normal}

/* BẮT BUỘC khi khối là flex: .container có margin-inline:auto, mà auto margin
   theo trục ngang của một flex item xếp dọc sẽ HUỶ stretch — khung co lại vừa
   đúng nội dung thay vì trải hết bề ngang. Đây chính là lỗi làm thân trang
   hẹp còn lề hai bên thừa mênh mông, KH bắt được ngay. */
.block>.container,.pin-block>.container,.search-block>.container,.lib-block>.container{width:100%}

.block{padding-block:112px}

/* Khối ② trước đây để trơ nền kem của cả trang — nằm giữa hai khối đều có nền
   riêng nên nó thành chỗ hụt. Cho một vệt sáng rất nhạt chạy chéo: đủ để khối
   có mặt, không đủ để chọi với chữ. */
.block:not(.block-light){position:relative;
  background-image:linear-gradient(168deg,rgba(255,255,255,.9) 0%,transparent 46%,
    rgba(107,168,255,.09) 100%)}
/* ⚠️ `.block` cố ý chỉ có đỉnh — các khối nối nhau thì một khoảng cách là đủ.
   Nhưng khối CUỐI trang thì không có khối nào ở dưới để tạo khe, nên nó dán
   thẳng vào chân trang tối. Lỗi này có ở MỌI màn dùng `.block` làm khối cuối
   (Sự kiện, Chi tiết, Quản lý, Tìm kiếm, Giới thiệu) — chữa một lần ở đây,
   đừng chữa lẻ từng màn. Trang chủ không dính vì khối cuối là `.lib-block`,
   vốn đã có `padding-block`.
   ⚠️ Chọn theo `.foot` chứ KHÔNG theo `[data-foot]`: `_shell.js` thay ô đặt
   chỗ bằng `outerHTML`, nên sau khi dựng xong thẻ `[data-foot]` không còn. */
.block:has(+.foot){padding-bottom:84px}
/* Gạch nhấn ngắn trên tên khối: cùng dải màu với cụm chữ phát sáng ở đầu
   trang, nên mỗi khối vẫn nhận ra là cùng một nhà. Đặt TRÊN tên chứ không
   dưới — dưới đã có kẻ chỉ hết bề ngang rồi, thêm một gạch nữa là hai vạch
   chồng nhau. Không thêm chữ nào: KH đã chê trang nhiều chữ. */
.block-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:end;
  padding-bottom:26px;border-bottom:1px solid var(--border)}
.block-head h2::before{content:'';display:block;width:46px;height:4px;margin-bottom:16px;
  border-radius:2px;
  background-image:linear-gradient(96deg,#E23FB8 0%,#6BA8FF 54%,#2FC4F5 100%)}

/* Gạch nhấn VUỐT RA khi khối tới lượt — dấu hiệu rõ nhất báo "sang khối mới".
   Chỉ một vạch động thôi, phần còn lại vẫn nổi lên êm: cho cả khối nhảy múa
   thì thành hội chợ, mà người đọc chính lại là người ngoài 40. */
@media (prefers-reduced-motion:no-preference){
  .fx .rise .block-head h2::before,
  .fx .block-head.rise h2::before,
  .fx .head-mid.rise h2::after{transform:scaleX(0);transform-origin:left center;
    transition:transform .7s var(--ease-btn) .18s}
  .fx .rise .block-head.shown h2::before,
  .fx .block-head.rise.shown h2::before,
  .fx .head-mid.rise.shown h2::after{transform:scaleX(1)}
}
.block-head h2{font-size:clamp(26px,2.9vw,36px);line-height:1.14;
  letter-spacing:-.034em;font-weight:700}
.block-head .view{font-size:15px;font-weight:500;color:var(--green);display:inline-flex;
  align-items:center;gap:9px;padding-bottom:5px;transition:gap var(--dur-btn)}
.block-head .view:hover{gap:14px}

/* ── Đầu khối CĂN GIỮA — chỉ cho khối điểm nhấn ──────────────────────────
   Gạch nhấn chuyển xuống DƯỚI tên và dài hơn: ở dạng căn giữa thì gạch nằm
   trên trông như cái mũ đội lệch, nằm dưới mới ra dáng chân đế.
   Bỏ kẻ chỉ hết bề ngang — khối này đã có nền riêng và hoạ tiết chìm để tự
   tách ra, thêm kẻ chỉ nữa là hai lớp ranh giới chồng nhau. */
.head-mid{grid-template-columns:1fr;justify-items:center;text-align:center;
  border-bottom:0;padding-bottom:36px}
.head-mid h2{font-size:clamp(30px,3.4vw,44px)}
.head-mid h2::before{display:none}
.head-mid h2::after{content:'';display:block;width:72px;height:4px;
  margin:20px auto 0;border-radius:2px;
  background-image:linear-gradient(96deg,#E23FB8 0%,#6BA8FF 54%,#2FC4F5 100%)}

/* ── Đầu khối ĐỨNG BÊN — cột trái của bố cục hai cột ─────────────────── */

.head-side .view{margin-top:20px}

/* ══ THẺ — nền chung cho cả ba lưới ══════════════════════════════════════
   Một kiểu thẻ duy nhất dùng lại ở bài ghim, thành viên, sản phẩm/dịch vụ.
   Nhờ vậy ba khối khác nhau về nội dung nhưng cùng một nhịp thị giác.
   Nhấn khi rê chuột bằng BÓNG SÂU DẦN + viền ngả lục NHẸ, hộp đứng yên.

   ⚠️ 25/09, người dùng báo lần ba: "di chuột vào item sự kiện cứ giật giật,
   hình như nó thêm border". Hai thứ gây ra, đã đo bằng CDP:
     1. Bản gốc nhấc thẻ `translateY(-3px)` — vòng lặp mất hover ở mép dưới
        (CLAUDE.md §5C, `_unify.css` §36). Luật gỡ §36 đã chặn, nhưng gỡ
        luôn ở ĐÂY: màn nào quên nạp `_unify.css` cuối là giật lại.
     2. Viền nhảy từ `--border #E0E8CB` sang `--green #15653D` trong 180ms —
        một khung chữ nhật lục ĐẬM bật sáng quanh cả thẻ. Lướt chuột qua lưới
        bốn cột là bốn khung thay nhau loé lên/tắt: mắt đọc ra đúng là "giật".
   Nên: viền chỉ ngả lục 35% (vẫn thấy được thẻ nào đang rê), bóng sâu dần
   làm dấu hiệu chính, thời gian 280ms để không có cú bật.                */
.card-base{background:var(--white);border:1px solid var(--border);border-radius:16px;
  transition:border-color 280ms var(--ease-btn),
             box-shadow 280ms var(--ease-btn)}
.card-base:hover{border-color:color-mix(in srgb,var(--green) 35%,var(--border));
  box-shadow:0 16px 34px -14px rgba(11,18,32,.22)}
/* Cùng bề mặt, KHÔNG nhấc khi rê chuột — dùng cho khối chỉ để ĐỌC, hoặc khối
   mà chỗ bấm nằm hẳn trong một cái nút bên trong. Nhấc cả khối ở những chỗ
   đó là hứa suông: chuột báo "cả mảng này bấm được" mà bấm vào khoảng trống
   thì không ra gì — đúng cái bẫy §8B cấm, chỉ khác là bẫy bằng chuyển động
   thay vì bằng con trỏ. */
.card-static{background:var(--white);border:1px solid var(--border);border-radius:16px}

/* ══ ① BÀI VIẾT TIÊU BIỂU ════════════════════════════════════════════════
   Slide kéo ngang, nhưng NẰM GỌN TRONG KHUNG NỘI DUNG: mép trái và mép phải của
   dải thẳng hàng với mọi khối khác. Ba thẻ vừa đúng một khung nên không có
   thẻ nào bị cắt dở — kéo tiếp thì sang bộ ba tiếp theo.
   Cuộn ngang có điểm dừng, KHÔNG tự chạy.                                  */
/* ══ NỀN TỪNG KHỐI ═══════════════════════════════════════════════════════
   Trước đây cả trang chỉ có hai sắc nền — kem #F5F8FC và trắng — lệch nhau
   quá ít, nên năm khối trôi vào nhau thành một dải dài không có nhịp. Nay
   mỗi khối có nền riêng, xen kẽ: [trắng→kem] · kem · trắng · kem · trắng.

   Vẫn TOÀN SẮC SÁNG. Luật §4 chốt nền tối chỉ ở đầu trang chủ và chân trang,
   nên không bê kiểu mảng ảnh tối xen giữa các khối của trang tham chiếu —
   thứ tạo nhịp ở đây là độ sáng và hoạ tiết chìm, không phải độ tối.        */
.pin-block{position:relative;overflow:hidden;padding-block:112px;
  background-image:linear-gradient(180deg,var(--white) 0%,var(--cream) 64%)}
.pin-block>.container{position:relative;z-index:1}

/* Hoạ tiết chìm: ba vòng đồng tâm — đúng hình chòm kết nối ở đầu trang thu
   nhỏ lại thành dấu chìm. Đặt lệch ra góc trên phải, nơi vốn trống. Rất mờ:
   nó phải đọc ra là NỀN, không phải là hình — KH nhạy với rối (§5). */
@media (prefers-reduced-motion:no-preference){
  /* 90 giây một vòng — chậm hơn cả kim phút. Không ai bắt được lúc nó quay,
     nhưng liếc lại sau một lúc thì thấy khác, đủ để nền "có sống". */
  .pin-block::before{animation:rotate-dot 90s linear infinite}
}
@keyframes rotate-dot{to{transform:rotate(360deg)}}
.pin-block::before{content:'';position:absolute;z-index:0;pointer-events:none;
  top:-14%;right:-6%;width:min(44%,560px);aspect-ratio:1;border-radius:50%;
  background:
    radial-gradient(closest-side,transparent 0 71%,rgba(18,87,196,.075) 71% 72%,transparent 72%),
    radial-gradient(closest-side,transparent 0 47%,rgba(18,87,196,.06) 47% 48%,transparent 48%),
    radial-gradient(closest-side,rgba(107,168,255,.10) 0 24%,transparent 24%)}
.pin-border{margin-top:30px;overflow:hidden}
.pin-band{display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;scroll-behavior:smooth;padding-bottom:6px}
.pin-band::-webkit-scrollbar{display:none}
.pin{flex:0 0 calc((100% - 48px)/3);scroll-snap-align:start;
  display:flex;flex-direction:column;overflow:hidden}
.pin .img{aspect-ratio:16/10;position:relative;flex:0 0 auto}
.pin .img::after{content:'';position:absolute;inset:0;opacity:.45;
  background-image:radial-gradient(rgba(255,255,255,.3) 1px,transparent 1px);
  background-size:20px 20px}
.pin .place{padding:20px 22px 22px;display:flex;flex-direction:column;flex:1}
.pin .pri{margin-top:10px;font-size:14.5px;color:var(--ok);font-weight:500}
.pin h3{margin-top:0;font-size:19.5px;line-height:1.34;letter-spacing:-.022em;
  font-weight:700;color:var(--ink);transition:color var(--dur-btn) var(--ease-btn)}
/* đẩy dòng tác giả xuống đáy thẻ để các thẻ trong một hàng thẳng chân nhau,
   dù tiêu đề dài ngắn khác nhau */
.pin .by{margin-top:auto;padding-top:16px;border-top:1px solid var(--border);
  display:flex;align-items:center;gap:10px;font-size:14px;color:var(--gray)}
.pin .by .date{margin-left:auto;font-size:13px;color:var(--gray-pale);white-space:nowrap}
.pin:hover h3{color:var(--green)}

/* Nay nằm DƯỚI dải chứ không cạnh tiêu đề (tiêu đề khối ① đã căn giữa).
   Đặt giữa, cách dải một quãng — đây là bộ lái, không phải nội dung. */
.clause-slide{display:flex;gap:10px;justify-content:center;margin-top:30px}
.clause-slide button{width:42px;height:42px;border-radius:50%;background:var(--white);
  border:1px solid var(--border-field);color:var(--ink);display:grid;place-items:center;
  font-size:17px;line-height:1;transition:border-color var(--dur-btn) var(--ease-btn),
  color var(--dur-btn) var(--ease-btn),opacity var(--dur-btn) var(--ease-btn)}
.clause-slide button:hover:not(:disabled){border-color:var(--green);color:var(--green)}
.clause-slide button:disabled{opacity:.34;border-color:var(--border);color:var(--gray-pale)}

/* ══ THÀNH VIÊN MỚI THAM GIA ═════════════════════════════════════════════
   Bản trước là danh sách kẻ chỉ hai cột — đọc nhanh, nhưng lạnh. Khối này
   nói về NGƯỜI, mà người thì phải thấy mặt mới thành người.

   Nay là THẺ NGƯỜI: ảnh đại diện to, đặt giữa, có vòng màu quanh. Bốn sắc
   nhấn xoay vòng — đây đúng là chỗ §2A cho phép dùng quá hai sắc, vì màu ở
   đây mang nghĩa phân biệt người này với người kia.

   Trật tự đọc trong thẻ: MẶT → TÊN → LÀM GÌ, Ở ĐÂU → tra cứu được theo gì.
   Ba chip cuối thẻ đúng ba tiêu chí lọc danh bạ (chương trình · lĩnh vực ·
   khu vực) — nhìn thẻ là biết tra được theo gì.
   ══════════════════════════════════════════════════════════════════════════ */
/* Vệt sáng đặt ngược phía so với khối [Nhu cầu hợp tác] — hai khối nền trắng
   cách nhau một khối kem, đổi phía thì không ra cảm giác lặp lại y hệt. */
/* ══ NỀN CHUYỂN ĐỘNG ─ thay cho video ════════════════════════════════════
   KH hỏi có nên chạy video nền. Không dùng video: nặng vài MB trên mạng di
   động, trình duyệt chặn tự phát khi chưa chạm màn, và dự án CHƯA CÓ cảnh
   quay thật (§10 — ảnh thật còn đang treo, video còn xa hơn). Thay bằng hai
   vầng sáng trôi rất chậm dựng bằng CSS: nặng 0 byte, không cần tải gì, và
   dừng hẳn khi máy đặt giảm chuyển động.
   40 giây một vòng — chậm tới mức không ai bắt được lúc nó đổi, chỉ thấy nền
   "có thở". Nhanh hơn là thành thứ gây mất tập trung khi đang đọc. */
.block-light{position:relative;overflow:hidden}
.block-light>.container{position:relative;z-index:1}
.block-light::before{content:'';position:absolute;inset:-20%;z-index:0;pointer-events:none;
  background:
    radial-gradient(38% 42% at 22% 30%,rgba(107,168,255,.20) 0%,transparent 68%),
    radial-gradient(34% 40% at 78% 72%,rgba(226,63,184,.11) 0%,transparent 68%)}
@media (prefers-reduced-motion:no-preference){
  .block-light::before{animation:breath-bg 40s ease-in-out infinite alternate}
}
@keyframes breath-bg{
  from{transform:translate3d(-3%,-2%,0) scale(1)}
  to  {transform:translate3d(3%,2%,0)   scale(1.12)}
}

.lib-block{margin-top:112px;padding-block:92px;
  background-color:var(--white);
  background-image:radial-gradient(60% 84% at 0% 100%,rgba(107,168,255,.11) 0%,transparent 60%);
  border-top:1px solid var(--border)}
.lib-block .block-head{border-bottom-color:var(--border)}
.lib-grid{margin-top:30px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px}
.lib{display:block;padding:18px 20px 16px;text-decoration:none;
  background:var(--cream);border:1px solid var(--border);border-radius:14px;
  transition:border-color var(--dur-btn) var(--ease-btn),background var(--dur-btn)}
.lib:hover{background:var(--white);border-color:var(--green)}

.lib .stick{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;
  align-items:center}
.lib .avatar{--c:48px;font-size:16.5px;font-weight:700;color:var(--ink)}
.lib-grid>.lib:nth-child(4n+1) .avatar{background:var(--s2)}
.lib-grid>.lib:nth-child(4n+2) .avatar{background:var(--s1)}
.lib-grid>.lib:nth-child(4n+3) .avatar{background:var(--s4)}
.lib-grid>.lib:nth-child(4n+4) .avatar{background:var(--s3)}
.lib .ho{display:block;min-width:0}
.lib .name{display:block;font-size:16.5px;font-weight:600;letter-spacing:-.018em;
  color:var(--ink);transition:color var(--dur-btn) var(--ease-btn)}
.lib .tix{display:block;margin-top:2px;font-size:13.5px;color:var(--gray-pale)}
/* 18/09 biên bản: doanh nghiệp là thông tin PHỤ đính kèm cá nhân → dòng nhẹ
   nhất thẻ (trước đậm 600, nặng ngang tên người). */
.lib .company{display:block;font-size:13px;font-weight:400;color:var(--gray-pale)}

.lib .facts{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px;padding-top:13px;
  border-top:1px solid var(--border)}
.lib .facts span{font-size:12px;line-height:1.5;color:var(--gray);
  background:var(--white);border:1px solid var(--border);border-radius:999px;
  padding:3px 10px}
.lib:hover .facts span{background:var(--cream)}
.lib .view{display:inline-flex;align-items:center;gap:8px;margin-top:12px;font-size:13.5px;
  font-weight:500;color:var(--green);transition:gap var(--dur-btn)}
.lib:hover .view{gap:13px}
.lib:hover .name{color:var(--green)}

/* ══ ③ ĐANG TÌM KIẾM ═════════════════════════════════════════════════════
   Đây là khối dễ đọc nhầm nhất, nên mỗi thẻ nói trọn một câu theo đúng thứ
   tự người ta nghĩ: AI → CẦN GÌ → LÀM GÌ TIẾP.
     hàng đầu   : tên doanh nghiệp kèm ảnh đại diện
     giữa       : nhãn "Đang tìm" rồi tới nhu cầu, cỡ chữ lớn nhất trong thẻ
     đáy        : một nút Liên hệ, không phải liên kết chữ mờ
   Dải nền TRẮNG ngược với nền trang, thẻ nền ngả — đảo tông để khối này
   tách hẳn ra mà không cần thêm đường viền hay bóng.                       */
.search-block{margin-top:112px;padding-block:92px;
  background-color:var(--white);
  background-image:radial-gradient(64% 86% at 100% 0%,rgba(107,168,255,.11) 0%,transparent 62%);
  border-block:1px solid var(--border)}
.search-block .block-head{border-bottom-color:var(--border)}
/* BA cột, không phải hai. Khối ④ ngay dưới cũng là hàng rộng; hai khối liền
   nhau cùng một bóng dáng thì lặp. Ba cột làm thẻ ngắn lại, khác hẳn hàng có
   ảnh của ④ đứng ngay sau. */
.search-grid{margin-top:34px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20px}
/* Thẻ dựng thành HÀNG: dòng doanh nghiệp ở trên, rồi nhu cầu bên trái và nút
   liên hệ bên phải cùng một hàng. Bản cũ xếp dọc ba tầng nên thẻ cao và hẹp,
   trông y hệt thẻ người ở khối ⑤. Xếp ngang thì thẻ thấp, rộng, đọc ra là
   BẢNG RAO — đúng việc của khối này. */
.search-card{background:var(--cream);border:1px solid var(--border);border-radius:16px;
  padding:22px 24px;display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:14px 24px;align-items:center;
  transition:border-color var(--dur-btn) var(--ease-btn),
             background var(--dur-btn) var(--ease-btn)}
.search-card:hover{background:var(--white);border-color:var(--green)}
.search-card .company{grid-column:1/-1;display:flex;align-items:center;gap:11px;min-width:0;
  font-size:15px;font-weight:600;color:var(--ink);line-height:1.4}
/* KHÔNG đặt tên lớp là .label — _common.css đã có component .label (nhãn
   trạng thái) kèm chấm tròn ::before, trùng tên là dính cái chấm đó. */
.search-card .label-search{font-size:12.5px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--gray-pale)}
.search-card .want{margin-top:6px;font-size:17px;line-height:1.5;font-weight:500;
  color:var(--ink)}
.search-card .mid{flex:1}
/* Nút sang cột phải cùng hàng với nhu cầu — thẻ thành một HÀNG RAO thấp và
   rộng, khác hẳn thẻ dọc ba tầng của khối ⑤. */
.search-card .btn{justify-self:end;align-self:center}

/* ══ TIN MỚI NHẤT VÀ SỰ KIỆN SẮP TỚI ═════════════════════════════════════
   Bản trước bị chê "nhiều text quá". Đếm ra thì đúng: bảy dòng chữ xếp đều
   nhau, không dòng nào to hơn dòng nào, không có chỗ nào cho mắt dừng lại.

   Ba cách chữa, không cách nào là "thu nhỏ chữ":
   ① BỚT SỐ MỤC. Tin từ bốn xuống ba. Mục thứ tư không thêm thông tin, chỉ
      thêm chữ.
   ② BỚT CHỮ LẶP. Mọi tin đều do Nhóm Admin đăng — lặp tên đó bốn lần là bốn
      lần không nói thêm gì. Nay chỉ còn ngày.
   ③ THÊM MỘT ĐIỂM NEO. Sự kiện gần nhất dựng thành THẺ CÓ ẢNH và có nút
      đăng ký, hai sự kiện sau mới là dòng gọn. Mắt có chỗ rơi vào, và thứ
      sắp diễn ra nhất cũng là thứ đáng bấm nhất.
   Ảnh tin cũng to lên (96 → 116px) để mỗi dòng có một mảng nhìn, không phải
   một khối chữ.
   ══════════════════════════════════════════════════════════════════════════ */
.ts-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 48px;
  padding-top:28px}
.ts-ev{border-left:1px solid var(--border);padding-left:48px}

/* ── cột trái: tin ── */
.info-row{display:grid;grid-template-columns:96px minmax(0,1fr);gap:16px;align-items:center;
  padding:18px 0;border-bottom:1px solid var(--border);text-decoration:none;
  transition:padding-left var(--dur-btn) var(--ease-btn)}
.info-row:hover{padding-left:8px}
.info-row .img{display:block;aspect-ratio:4/3;border-radius:12px;position:relative;overflow:hidden}
.info-row .name{display:block;font-size:17px;line-height:1.4;letter-spacing:-.018em;
  font-weight:600;color:var(--ink);transition:color var(--dur-btn) var(--ease-btn)}
.info-row .facts{display:block;margin-top:7px;font-size:13px;color:var(--gray-pale)}
.info-row:hover .name{color:var(--green)}

/* ── cột phải: BA DÒNG SỰ KIỆN CÙNG MỘT DẠNG ──────────────────────────────
   `.sk-noi` (thẻ nổi có ảnh cho sự kiện gần nhất) đã bỏ: sự kiện không phải
   lúc nào cũng có, tháng chỉ có một sự kiện thì thẻ đó đứng trơ, tháng không
   có thì cả cột trống. Lý do đầy đủ ghi trong index.html ngay trên khối.

   Hàng sự kiện cố ý để CÙNG NHỊP với hàng tin bên trái: cùng chiều cao ô dẫn
   đầu, cùng đệm dọc, cùng kẻ chỉ dưới. Khác nhau đúng một chỗ — bên trái dẫn
   bằng ẢNH, bên phải dẫn bằng NGÀY — vì tin thì người ta nhìn ảnh, sự kiện
   thì người ta nhìn ngày.                                                 */
.ev-row{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;align-items:center;
  padding:18px 0;border-bottom:1px solid var(--border);text-decoration:none;
  transition:padding-left var(--dur-btn) var(--ease-btn)}
.ev-row:hover{padding-left:8px}
/* Khối ngày cao 72px = đúng chiều cao ô ảnh của hàng tin bên trái (96×3/4),
   nên hai cột ra cùng một nhịp mà không phải chỉnh tay từng cái. */
.ev-row .date-fld{width:72px;height:72px;display:grid;align-content:center;
  border-radius:12px;background:var(--green-pale);text-align:center;line-height:1.02}
.ev-row .date-fld b{display:block;font-size:25px;font-weight:700;letter-spacing:-.03em;
  color:var(--green)}
.ev-row .date-fld span{display:block;margin-top:3px;font-size:10.5px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;color:var(--green)}
.ev-row>span:last-child{display:block;min-width:0}
.ev-row .name{display:block;font-size:17px;line-height:1.4;letter-spacing:-.018em;
  font-weight:600;color:var(--ink);transition:color var(--dur-btn) var(--ease-btn)}
.ev-row .facts{display:block;margin-top:6px;font-size:13px;color:var(--gray-pale)}
.ev-row:hover .name{color:var(--green)}

/* Hai cột dài ngắn khác nhau (cột phải có thẻ sự kiện to). Cho cả hai thành
   cột dọc rồi đẩy lối "xem tất cả" xuống đáy: hai lối ra thẳng hàng nhau, và
   khoảng trống dôi ra nằm GIỮA nội dung với lối ra chứ không nằm lơ lửng dưới. */
.ts-info,.ts-ev{display:flex;flex-direction:column}
.ts-info .view,.ts-ev .view{align-self:flex-start;display:inline-flex;align-items:center;gap:9px;margin-top:auto;padding-top:20px;
  font-size:14.5px;font-weight:500;color:var(--green);text-decoration:none;
  transition:gap var(--dur-btn)}
.ts-info .view:hover,.ts-ev .view:hover{gap:14px}

/* ══ ⑤ SẢN PHẨM VÀ DỊCH VỤ NỔI BẬT ═══════════════════════════════════════
   Đây là bài do THÀNH VIÊN chào hàng, Admin ghim tối đa 3. Trước đây dựng
   thành ba thẻ ảnh dọc — trùng hệt hình dáng với khối Bài viết tiêu biểu ở
   đầu trang, nên người xem thấy "cùng một thứ hiện hai lần".

   Nay đổi sang BA HÀNG NGANG, ảnh bên trái, nút ở cuối hàng: vẫn giữ được
   ảnh (đây là bài bán hàng, bỏ ảnh là mất sức), nhưng bóng dáng khác hẳn
   khối bên trên nên không lẫn. Nút nằm cuối hàng cũng nói rõ đây là chỗ
   để HÀNH ĐỘNG, không phải chỗ để đọc.                                     */
/* HAI CỘT, sáu mục. Bản cũ là ba hàng trải hết 1760px: tiêu đề và dòng doanh
   nghiệp chỉ chiếm chừng một phần ba bề ngang, phần còn lại thành một mảng
   trắng lớn giữa chữ và cái nút. Nới khung rộng ra mà không dựng lại nội dung
   thì chính là tự tạo lỗi mới — đây là chỗ đã mắc.
   Hai cột vừa khít bề ngang, mà sáu mục cũng vừa kín chiều cao một màn hình. */
.feat-list{margin-top:34px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px}
.featured{display:grid;grid-template-columns:152px minmax(0,1fr) auto;gap:18px;
  align-items:center;padding:16px;text-decoration:none}
.featured .img{aspect-ratio:4/3;border-radius:10px;position:relative;overflow:hidden}
.featured .img::after{content:"";position:absolute;inset:0;opacity:.45;
  background-image:radial-gradient(rgba(255,255,255,.3) 1px,transparent 1px);
  background-size:20px 20px}
.featured h3{font-size:17.5px;line-height:1.36;letter-spacing:-.022em;font-weight:700;
  color:var(--ink);transition:color var(--dur-btn) var(--ease-btn)}
.featured .by{margin-top:8px;display:flex;align-items:center;gap:10px;
  font-size:14px;color:var(--gray)}
/* dòng ưu đãi — dùng màu cảnh báo §2C, là thứ người ta quét mắt tìm */
.featured .pri{margin-top:8px;font-size:14px;font-weight:500;color:var(--warn)}
.featured .btn{flex:0 0 auto}
.featured:hover h3{color:var(--green)}

/* ══════════════════════════════════════════════════════════════════════════
   MÀN ĐĂNG NHẬP
   Hai cột CÂN NHAU (1:1). Trước đây cột tối rộng hơn (1.05fr) mà lại là cột
   nặng màu, nên cả màn nghiêng hẳn sang trái.

   Ba việc làm cho hai bên hoà nhau chứ không chọi nhau:
   ① HAI MÉP TRONG GẶP NHAU Ở GIỮA — mỗi cột có một cột-con căn giữa cùng cỡ
      (31rem trái · 27.5rem phải). Logo, lời dẫn và liên kết "Về trang chủ"
      bên trái nay THẲNG MỘT ĐƯỜNG với nhau, không còn dính mép màn hình.
   ② BÊN PHẢI KHÔNG CÒN LÀ MẢNG TRẮNG PHẲNG — nền chuyển rất nhạt từ xám-xanh
      lên trắng, kèm lưới chấm mờ và một quầng xanh thương hiệu ở góc trên.
      Cùng ngôn ngữ với cột trái, chỉ khác độ sáng. Biểu mẫu vẫn là NỀN TRẮNG
      chữ tối (§2G-5) vì nó nằm trong THẺ trắng đặt trên nền đó.
   ③ THẺ BIỂU MẪU CÓ KHỐI LƯỢNG — viền, bo 18px, bóng đổ sâu, và một dải
      chuyển sắc 3px trên đỉnh dùng ĐÚNG dải của chữ "Cùng phát triển" bên
      trái. Đó là chi tiết nối hai cột lại thành một màn.

   Chòm kết nối đổi vai: từ một ô nhỏ nằm trong dòng (trông như hình minh hoạ
   bị bỏ quên ở góc) thành lớp NỀN lớn phía sau, mờ, tràn ra khỏi mép — nó
   lấp khoảng tối rỗng bên phải cột trái, đúng chỗ trước đây trống hoác.

   Màn này cố tình KHÔNG có chân trang và KHÔNG có menu: đang đăng nhập thì
   không nên mời người dùng đi chỗ khác.
   ══════════════════════════════════════════════════════════════════════════ */
/* Việc chính của màn này nằm ở cột PHẢI, nên cột phải rộng hơn. Chia đôi
   đều nhau thì mảng tối bên trái — vốn đã nặng màu — át mất chỗ thao tác. */
.signin{min-height:100vh;min-height:100svh;display:grid;
  grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
  /* ── CO THEO CHIỀU CAO MÀN (21/09) ───────────────────────────────────
     Người dùng mở trên màn HD: thẻ biểu mẫu cao 825px trong khi khung nhìn
     chỉ ~672px, nên dòng "Chưa là thành viên?" và câu chờ duyệt bị cắt dưới
     mép — phải cuộn mới thấy, trên một màn lẽ ra chỉ có đúng MỘT việc.

     Vì sao là DẢI LIÊN TỤC chứ không phải ba nấc @media như .screen-head:
     nấc chỉ đúng ở đáy mỗi khoảng. Ngay TRÊN ngưỡng — ví dụ khung nhìn
     761px với nấc 760 — thẻ vẫn nguyên cỡ lớn và vẫn tràn vài chục pixel.
     Dải tính thẳng theo svh thì mọi chiều cao đều vừa, không có khe hở.
     (Chiều cao thì @container app không đo được — nó đo bề RỘNG .app — nên
     đây vẫn nằm trong ngoại lệ đã ghi ở đầu file, không đụng luật bề rộng.)

     Mỗi dải chạy từ cỡ THIẾT KẾ ở khung nhìn ≥960px xuống cỡ SÀN ở ≤620px:
     màn 1080 (khung nhìn ~984) giữ đúng bản đã duyệt, HD thì co lại vừa.
     Sàn của ô nhập và nút là 44px — mức tối thiểu cho ngón tay, không hạ
     thêm dù màn có thấp tới đâu.                                          */
  --signin-pad-col:clamp(14px,calc(10svh - 48px),48px);      /* đệm trên/dưới cột phải  48→14 */
  --signin-pad-top:clamp(20px,calc(6.5svh - 20px),42px);    /* đệm trên thẻ            42→20 */
  --signin-pad-bottom:clamp(16px,calc(5.3svh - 17px),34px);    /* đệm dưới thẻ            34→16 */
  --signin-height-field:clamp(44px,calc(2.35svh + 29px),52px);      /* cao ô nhập và nút       52→44 */
  --signin-gap-cluster:clamp(10px,calc(3.5svh - 12px),22px);     /* khe giữa hai cụm        22→10 */
  --signin-gap-field:clamp(8px,calc(2.35svh - 6.6px),16px);      /* khe giữa hai ô          16→8  */
  --signin-gap-form:clamp(10px,calc(2.94svh - 8px),20px);    /* khe trên biểu mẫu       20→10 */
  --signin-rule-gap:clamp(10px,calc(4.1svh - 15.6px),24px);  /* khe trên vạch chân thẻ  24→10 */
  /* cột trái co theo cùng một nhịp — thẻ bên phải nhỏ lại mà mảng thương
     hiệu giữ nguyên thì hai cột lệch hẳn nhau ở màn thấp */
  --signin-left-top:clamp(22px,calc(5.3svh - 10.8px),40px);
  --signin-left-bottom:clamp(20px,calc(4.7svh - 9.2px),36px);
  --signin-left-mid:clamp(16px,calc(5.9svh - 20.5px),36px)}

/* ── CỘT TRÁI · mảng thương hiệu ───────────────────────────────────────── */
.signin-left{position:relative;overflow:hidden;display:flex;
  padding:var(--signin-left-top) clamp(28px,4vw,64px) var(--signin-left-bottom);
  /* 19/09: nền = nền màn đầu trang chủ (đỉnh --v6-night → chàm, quầng blurple). */
  background:
    radial-gradient(ellipse 70% 55% at 62% 40%,color-mix(in srgb,var(--v6-blurple) 50%,var(--v6-dot)) 0%,transparent 70%),
    linear-gradient(180deg,var(--v6-night) 0%,var(--v6-dot) 70%,var(--v6-violet-blue) 100%)}
.signin-left .dot{position:absolute;inset:0;pointer-events:none;opacity:.42;
  background-image:radial-gradient(rgba(140,185,255,.42) 1px, transparent 1px);
  background-size:22px 22px;
  -webkit-mask-image:linear-gradient(160deg,#000,transparent 72%);
          mask-image:linear-gradient(160deg,#000,transparent 72%)}
/* Chòm kết nối đổi vai: lớp NỀN lớn, mờ, tràn mép — không còn là ô hình nhỏ
   nằm trong dòng. Nó lấp đúng khoảng tối rỗng bên phải cột trái.            */
.signin-left .constel{position:absolute;z-index:1;right:-6%;bottom:0;
  width:min(540px,72%);max-width:none;margin:0;opacity:.3;pointer-events:none;
  -webkit-mask-image:radial-gradient(58% 58% at 54% 44%,#000 18%,transparent 96%);
          mask-image:radial-gradient(58% 58% at 54% 44%,#000 18%,transparent 96%)}
/* Mép giữa hai cột trước đây là một vạch cắt phăng từ navy sang trắng. Dải
   sáng mảnh này làm cột tối nhạt dần về phía mép, nên hai nửa nối vào nhau
   thay vì dán cạnh nhau. Không phải quầng sáng — chỉ 10% ở mép ngoài cùng. */
.signin-left::after{content:"";position:absolute;z-index:1;top:0;bottom:0;right:0;
  width:clamp(90px,12%,180px);pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(130,185,255,.12))}

/* Cột-con: mọi thứ bên trái nằm trong đây nên thẳng hàng với nhau. */
.left-vacant{position:relative;z-index:2;flex:1;width:100%;max-width:29rem;
  margin-inline:auto;display:flex;flex-direction:column}
.signin-left .label-sign-dark{display:flex;align-items:center;gap:12px;align-self:flex-start}
.signin-left .label-sign-dark img{width:40px;height:40px}
.signin-left .label-sign-dark b{color:#fff;font-size:15px;font-weight:700}
.signin-left .mid{margin:auto 0;padding-block:var(--signin-left-mid)}
/* Hạ từ 46px xuống 42px: 46 chọi hẳn với chữ 27px của biểu mẫu bên kia. */
/* Chữ như tiêu đề trang chủ: Montserrat 800 in hoa, TRẮNG. Bỏ chữ chuyển
   sắc hồng–xanh của bản navy (mã màu ngoài danh sách, lệch tông trang chủ). */
.signin-left h1{font-family:var(--font-title);font-size:clamp(28px,2.7vw,40px);line-height:1.1;
  letter-spacing:-.01em;font-weight:800;text-transform:uppercase;color:#fff}
.signin-left h1 em{font-style:normal}
.signin-left .book{margin-top:clamp(12px,calc(1.2svh + 4.7px),16px);font-size:16.5px;line-height:1.7;color:var(--dark-text);max-width:36ch}
/* Ba ý này KHÔNG phải trang trí: chúng nói cho người đang đứng ngoài biết
   đăng nhập xong thì thấy gì. Cũng là thứ cho cột trái đủ "dày" để cân với
   biểu mẫu bên phải — trước đây bên trái chỉ có một tiêu đề và một câu. */
.signin-y{margin-top:clamp(14px,calc(3.5svh - 7.9px),26px);padding:0;list-style:none;
  display:flex;flex-direction:column;gap:clamp(9px,calc(1.2svh + 1.7px),13px)}
.signin-y li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:13px;align-items:start;
  font-size:15px;line-height:1.6;color:var(--dark-text)}
/* Trước đây ba chấm ba màu nhấn khác nhau — vừa phạm luật "một màn tối đa hai
   sắc nhấn", vừa làm ba dòng cùng loại trông như ba loại khác nhau. Nay cùng
   một dấu tích trong đĩa xanh mờ: ba dòng đọc ra là MỘT danh sách.           */
.signin-y i{margin-top:2px;width:22px;height:22px;border-radius:50%;display:grid;
  place-items:center;background:rgba(130,185,255,.16);
  box-shadow:inset 0 0 0 1px rgba(160,205,255,.28)}
.signin-y i::before{content:"";width:9px;height:5px;margin-top:-2px;
  border-left:1.8px solid var(--dark-label);border-bottom:1.8px solid var(--dark-label);
  transform:rotate(-45deg)}
.signin-left .ticket{font-size:14px;color:var(--dark-text);text-decoration:none;
  display:inline-flex;align-items:center;gap:8px;align-self:flex-start;
  transition:color var(--dur-btn) var(--ease-btn),gap var(--dur-btn) var(--ease-btn)}
.signin-left .ticket:hover{color:#fff;gap:11px}

/* ── CỘT PHẢI · nền sáng CÓ TÔNG, thẻ biểu mẫu nổi lên trên ─────────────── */
.signin-right{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;
  padding:var(--signin-pad-col) clamp(20px,3.2vw,56px);
  background:
    /* nửa sáng NHẬN ánh sáng từ cột tối bên cạnh — quầng này bám mép trái */
    radial-gradient(54% 48% at 4% 44%, rgba(95,170,255,.17) 0%, transparent 74%),
    radial-gradient(52% 44% at 94% 2%, rgba(18,87,196,.11) 0%, transparent 74%),
    radial-gradient(46% 40% at 86% 98%, rgba(226,63,184,.07) 0%, transparent 76%),
    linear-gradient(180deg,var(--tron-2) 0%,var(--kem) 46%,var(--trang) 100%)}
.signin-right .dot{position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:radial-gradient(rgba(18,87,196,.15) 1px, transparent 1px);
  background-size:22px 22px;
  -webkit-mask-image:linear-gradient(200deg,#000,transparent 58%);
          mask-image:linear-gradient(200deg,#000,transparent 58%)}
/* Quầng sáng nhoè NGAY SAU thẻ. Thẻ trắng đặt trên nền gần trắng thì trông
   như dán lên giấy; có quầng thì nó nổi lên trên một thứ gì đó. Nhoè 70px và
   chỉ 40% nên không thành vệt loá — KH nhạy với loá.                        */
.signin-right .halo{position:absolute;z-index:1;top:50%;left:50%;
  width:min(1020px,116%);aspect-ratio:1/.78;transform:translate(-50%,-50%);
  pointer-events:none;opacity:.55;filter:blur(80px);border-radius:50%;
  /* màu dồn ra VÀNH ngoài — giữa là chỗ thẻ đứng nên tô đậm ở đó cũng không
     thấy, mà lại làm chữ trong thẻ bị ám màu qua mép */
  background:
    radial-gradient(34% 34% at 14% 26%, rgba(226,63,184,.55) 0%, transparent 72%),
    radial-gradient(34% 34% at 88% 22%, rgba(47,196,245,.5) 0%, transparent 72%),
    radial-gradient(38% 36% at 80% 88%, rgba(18,87,196,.5) 0%, transparent 74%),
    radial-gradient(34% 34% at 12% 84%, rgba(95,170,255,.45) 0%, transparent 74%)}

.signin-box{position:relative;z-index:2;width:100%;max-width:34rem;overflow:hidden;
  background:var(--white);border:1px solid var(--border);border-radius:20px;
  padding:var(--signin-pad-top) clamp(26px,3vw,48px) var(--signin-pad-bottom);
  /* ba tầng bóng chồng nhau thay cho một bóng to: mép thẻ mềm dần chứ không
     có một vành tối rõ rệt quanh thẻ */
  box-shadow:0 1px 2px rgba(10,23,48,.04),
             0 8px 20px rgba(10,23,48,.06),
             0 34px 74px rgba(10,23,48,.11)}
/* Dải chuyển sắc trên đỉnh thẻ — cùng một dải với chữ "Cùng phát triển".
   Hai đầu tan vào trong suốt để dải không cắt ngang thành một gạch cứng. */
.signin-box::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(96deg,rgba(240,107,212,0) 0%,#F06BD4 14%,
             #7FB5FF 50%,#2FC4F5 86%,rgba(47,196,245,0) 100%)}
.signin-box h2{font-size:clamp(23px,calc(1.76svh + 12.1px),29px);letter-spacing:-.03em;font-weight:700}
.signin-box .sub{margin-top:7px;font-size:15px;line-height:1.6;color:var(--gray)}

/* Nguyên tắc ④: khách bị chuyển tới đây thì phải biết VÌ SAO, một câu. */
.signin-alert{display:flex;gap:10px;align-items:flex-start;margin-top:18px;padding:12px 14px;
  border-radius:10px;background:var(--info-bg);color:var(--green-dark);
  font-size:14.5px;line-height:1.55}
.signin-alert svg{flex:0 0 18px;width:18px;height:18px;margin-top:2px}

/* ── Đăng nhập bằng Zalo ────────────────────────────────────────────────
   KH chốt HAI hình thức song song, người dùng tự chọn, không ép một loại.
   Nên Zalo KHÔNG phải "đăng nhập phụ" nấp dưới biểu mẫu: nó đứng trên, cùng
   cỡ với nút Đăng nhập, rồi mới tới vạch "hoặc dùng email / số điện thoại".
   Nút để nền trắng kèm viền, không tô kín màu Zalo: tô kín thì hai nút chính
   chọi nhau, và cách dùng nhận diện của Zalo cũng không phải việc mình tự
   quyết. ⚑ Cần tài khoản Zalo Business trước khi dựng thật.                */
.signin-box .zalo{width:100%;height:var(--signin-height-field);gap:11px;margin-top:var(--signin-gap-cluster);border-radius:10px;
  font-size:15.5px;font-weight:600;
  background:var(--white);border:1px solid var(--border-field);color:var(--ink)}
.signin-box .zalo:hover{border-color:#0068FF;color:#0068FF;background:var(--round-2);
  transform:translateY(-2px);box-shadow:0 10px 22px rgba(0,104,255,.16)}
/* Dấu xanh chỉ là chỗ ĐẶT TRƯỚC cho biểu tượng Zalo — khi có bộ nhận diện
   chính thức từ tài khoản Zalo Business thì thay bằng đúng biểu tượng đó. */
.signin-box .zalo .head{width:27px;height:27px;border-radius:8px;background:#0068FF;color:#fff;
  display:grid;place-items:center;font-size:15px;font-weight:700;line-height:1;flex:0 0 27px}
/* Hai kẻ chỉ hai bên chữ "hoặc" tan dần về phía mép thẻ — kẻ đặc suốt chiều
   ngang cắt thẻ làm đôi, mà đây chỉ là chỗ ngắt nhịp chứ không phải ranh giới. */
.signin-box .or{display:flex;align-items:center;gap:14px;margin-top:var(--signin-gap-cluster);
  font-size:13.5px;color:var(--gray-pale)}
.signin-box .or::before,.signin-box .or::after{content:"";height:1px;flex:1}
.signin-box .or::before{background:linear-gradient(90deg,transparent,var(--border))}
.signin-box .or::after{background:linear-gradient(90deg,var(--border),transparent)}

.signin-box form{margin-top:var(--signin-gap-form);display:flex;flex-direction:column;gap:var(--signin-gap-field)}
/* Ô nhập có biểu tượng dẫn ở đầu và ruột hơi lõm. Ô trắng phẳng viền xám là
   thứ làm biểu mẫu trông như bản vẽ nháp; lõm nhẹ thì mắt đọc ra "chỗ để
   điền" ngay, và khi đặt con trỏ vào thì ô SÁNG LÊN thành trắng. */
.signin-fld{position:relative;display:flex;align-items:center}
.signin-fld>svg{position:absolute;left:15px;width:19px;height:19px;color:var(--gray-pale);
  pointer-events:none;transition:color var(--dur-btn) var(--ease-btn)}
.signin-fld .fld-input{height:var(--signin-height-field);padding-left:45px;border-radius:10px;background:var(--bird);
  box-shadow:inset 0 1px 2px rgba(11,18,32,.045);
  transition:border-color var(--dur-layer) var(--ease-btn),
             box-shadow var(--dur-layer) var(--ease-btn),
             background-color var(--dur-layer) var(--ease-btn)}
.signin-fld .fld-input:focus{background:var(--white)}
.signin-fld:focus-within>svg{color:var(--green)}
.signin-fld--pwd .fld-input{padding-right:52px}
/* "Hiện/ẩn mật khẩu" — bảng danh mục màn §08 có ghi. Người ngoài 40 gõ mật
   khẩu trên điện thoại rất hay sai; bắt gõ mù là lý do bỏ cuộc phổ biến. */
.show-pwd{position:absolute;right:6px;width:40px;height:40px;border:0;border-radius:8px;
  background:none;display:grid;place-items:center;color:var(--gray-pale);
  transition:background-color var(--dur-btn),color var(--dur-btn)}
.show-pwd:hover{background:var(--round-2);color:var(--ink)}
.show-pwd svg{width:20px;height:20px}
.signin-box .row-sub{display:flex;align-items:center;justify-content:space-between;gap:16px;
  font-size:14.5px;flex-wrap:wrap}
.signin-box .remember{display:inline-flex;align-items:center;gap:9px;color:var(--gray)}
.signin-box .remember input{width:17px;height:17px;accent-color:var(--green)}
.signin-box .forgot{color:var(--green);font-weight:500;text-decoration:none}
.signin-box .forgot:hover{text-decoration:underline}
/* Nút chính cao bằng ô nhập (52px) để cả cột thành một nhịp đều. Nền chuyển
   sắc trong hệ xanh thương hiệu; chặng sáng nhất #1C63D4 vẫn đạt 5.5:1 với
   chữ trắng nên chữ đọc được ở mọi điểm của dải. */
.signin-box .btn-in{width:100%;height:var(--signin-height-field);border-radius:10px;font-size:16px;font-weight:600;
  color:#fff;background:linear-gradient(180deg,var(--green) 0%,var(--green-dark) 100%);
  box-shadow:0 10px 22px rgba(18,87,196,.24)}
.signin-box .btn-in:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(18,87,196,.30)}
.signin-box .btn-in:disabled{background:var(--neutral-bg);color:var(--gray);box-shadow:none}
.signin-box .rule{margin-top:var(--signin-rule-gap);padding-top:var(--signin-gap-form);border-top:1px solid var(--border);
  font-size:15px;color:var(--gray)}
/* Nói rõ ngay tại đây: gửi đơn xong CHƯA vào được danh bạ, còn chờ Admin duyệt. */
.signin-box .pending{margin-top:9px;font-size:13.5px;line-height:1.6;color:var(--gray-pale)}
/* Màu + gạch chân do component `.link-text` lo (xem _common.css); ở đây chỉ
   còn độ đậm riêng của dòng chân hộp đăng nhập. */
.signin-box .rule a{font-weight:500}
/* ô báo lỗi của biểu mẫu — dùng cặp màu chức năng §2C */
.signin-box .err-form{display:flex;gap:10px;align-items:flex-start;margin-top:18px;
  padding:12px 14px;border-radius:10px;
  background:var(--err-bg);color:var(--err);font-size:14.5px;line-height:1.55}

/* ══ VÀO MÀN ═════════════════════════════════════════════════════════════
   Một nhịp duy nhất khi màn hiện ra: nổi lên 14px kèm hiện dần. Cột trái vào
   trước theo thứ tự đọc (logo → lời dẫn → lối ra), thẻ biểu mẫu vào cùng lúc
   với lời dẫn vì đó mới là chỗ mắt dừng lại. Không có gì trượt ngang, không
   có gì nảy — KH nhạy với "rối". Tắt hẳn khi người dùng đặt giảm chuyển động. */
@keyframes up-soft{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes show-layer{from{opacity:0}to{opacity:1}}
.signin-box{animation:up-soft var(--dur-in) var(--ease-in) 80ms both}
.left-vacant>*{animation:up-soft var(--dur-in) var(--ease-in) both}
.left-vacant>:nth-child(2){animation-delay:80ms}
.left-vacant>:nth-child(3){animation-delay:160ms}
@media (prefers-reduced-motion:reduce){
  .signin-box,.left-vacant>*,.layer-zalo,.layer-zalo .box-z{animation:none}
}

/* ══ LỚP CHUYỂN SANG ZALO ════════════════════════════════════════════════
   Bấm "Tiếp tục với Zalo" thì KHÔNG nhảy thẳng. Ở giữa có một lớp nói rõ
   ba việc, vì đây là chỗ người dùng sắp trao quyền cho một bên thứ ba:
   · sắp rời khỏi trang này để sang Zalo;
   · Zalo sẽ chia sẻ NHỮNG GÌ (tên, ảnh đại diện, mã định danh) — liệt kê
     thẳng, không giấu trong một dòng chữ mờ;
   · vẫn huỷ được.
   Hai bước: bước "hỏi" có nút Huỷ, bước "chờ" thì khoá thao tác và quay
   vòng. Người ngoài 40 hay bấm lại vì tưởng máy treo — nên phải có chữ
   nói rõ đang chờ cái gì.
   ⚑ Màn cho phép THẬT là của Zalo, mình không dựng lại được. Lớp này chỉ
     mô phỏng đoạn trước và sau nó.                                        */
.layer-zalo{position:fixed;inset:0;z-index:100;display:grid;place-items:center;
  padding:24px;background:rgba(10,21,40,.58);backdrop-filter:blur(4px);
  animation:show-layer var(--dur-layer) var(--ease-in) both}
/* Hộp này cao 665px, khổ HD khung nhìn 672px — sát tới mức chỉ cần một câu
   dài thêm là tràn, mà tràn thì nút "Mở Zalo" rơi khỏi mép dưới. Trần +
   cuộn trong hộp. (21/09) */
.layer-zalo .box-z{width:100%;max-width:30rem;background:var(--white);
  max-height:calc(100vh - 48px);max-height:calc(100svh - 48px);overflow-y:auto;overscroll-behavior:contain;
  border-radius:20px;padding:36px 34px 28px;text-align:center;
  box-shadow:0 2px 6px rgba(10,23,48,.10),0 40px 90px rgba(10,23,48,.34);
  animation:up-soft var(--dur-nav) var(--ease-in) both}
/* cầu nối hai đầu: đĩa logo AIT — mũi tên — dấu Zalo */
.layer-zalo .place-z{display:flex;align-items:center;justify-content:center;gap:16px}
.layer-zalo .place-z img{width:52px;height:52px}
.layer-zalo .place-z .arrow{color:var(--gray-pale);font-size:19px;line-height:1}
.layer-zalo .place-z .head{width:52px;height:52px;border-radius:16px;background:#0068FF;
  color:#fff;display:grid;place-items:center;font-size:25px;font-weight:700;line-height:1;
  box-shadow:0 8px 20px rgba(0,104,255,.28)}
.layer-zalo h3{margin-top:20px;font-size:22px;letter-spacing:-.02em;font-weight:700}
.layer-zalo .sub-z{margin-top:9px;font-size:15px;line-height:1.6;color:var(--gray)}
/* Liệt kê thẳng thứ Zalo chia sẻ — không gói vào một câu chung chung. */
.layer-zalo .access{margin:20px 0 0;padding:16px 18px;list-style:none;text-align:left;
  background:var(--bird);border:1px solid var(--border);border-radius:12px;
  display:flex;flex-direction:column;gap:11px;font-size:15px;color:var(--ink)}
.layer-zalo .access li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:11px;
  align-items:start;line-height:1.5}
.layer-zalo .access svg{width:18px;height:18px;margin-top:3px;color:var(--ok)}
.layer-zalo .btn-row-z{display:flex;gap:12px;margin-top:22px}
.layer-zalo .btn-row-z .btn{flex:1;height:50px;border-radius:12px;font-size:15.5px;font-weight:600}
.layer-zalo .btn-z{background:#0068FF;color:#fff}
.layer-zalo .btn-z:hover{filter:brightness(.92);transform:translateY(-2px);
  box-shadow:0 10px 22px rgba(0,104,255,.26)}
.layer-zalo .rec-z{margin-top:14px;font-size:13px;line-height:1.55;color:var(--gray-pale)}
/* bước 2 — đang chờ Zalo trả lời */
.layer-zalo .turn{width:34px;height:34px;margin:22px auto 0;border-radius:50%;
  border:3px solid var(--border);border-top-color:#0068FF;animation:rotate 820ms linear infinite}
@keyframes rotate{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.layer-zalo .turn{animation-duration:2600ms}}

/* ══════════════════════════════════════════════════════════════════════════
   MÀN ĐĂNG KÝ THAM GIA CỘNG ĐỒNG — lần 6, 19/09/2026 ⚑ KH
   Lý do + bảng mapping với Hồ sơ của tôi / Duyệt thành viên ghi ở đầu
   mockup/register.html. Lần 5 cất ở Archieved/2026-09-19-dang-ky-mot-khoi-lan-5/.

        AIT Kết Nối                                        ← Về trang chủ
                      ĐĂNG KÝ THAM GIA CỘNG ĐỒNG
        ╔════════════════════════════════════════════════════════════════╗
        ║ (✓) Cá nhân ─── (2) Học tập ─── (3) Công việc ─── (4) … (5) …  ║ dải nhạt
        ║ các ô của bước — bám ngay dưới thanh bước                      ║
        ║                                     chỗ thừa dồn xuống đáy ────╫─→
        ║ ← Quay lại                      [Bỏ qua bước này] [Tiếp tục →] ║
        ╚════════════════════════════════════════════════════════════════╝

   · Khối 1080px, cao bằng BƯỚC CAO NHẤT (tối đa bằng khung nhìn) và GIỮ
     NGUYÊN qua cả năm bước — bấm "Tiếp tục" thì hàng nút ở đáy đứng yên
     (21/09, xem "CHIỀU CAO ỔN ĐỊNH" ở .reg-body bên dưới). Nội dung vẫn bám
     ngay dưới thanh bước, chỗ thừa rơi xuống đáy: bản cao cố định + CĂN GIỮA
     DỌC bị chê "khoảng cách giữa timeline và body quá xa, quá nhiều khoảng
     trắng" (19/09 tối) là chê chỗ trống nằm TRÊN, không phải chỗ trống dưới.
   · Đầu màn chỉ một dòng tiêu đề — viên "◷ Phản hồi trong 3 ngày làm việc"
     đã bỏ 21/09 (lý do ghi trong register.html).
   · Thanh bước MỘT HÀNG: đĩa số + tên một từ, nối bằng vạch 2px. Bản lưới 5
     cột có dòng mô tả bị chê "dài dòng, nhiều text rối mắt".
   · Bước ⑤: trái là thẻ danh bạ .dir-card (đúng component của Hồ sơ của tôi
     và Danh bạ), phải lưới 2×2 bốn nhóm + chú giải một hàng; ô đồng ý là
     một dải trải hết bề ngang bên dưới.
   · Tiền tố `dky-` cho mọi lớp con (§8: `.dk` trần là bẫy đã ghi).
   ══════════════════════════════════════════════════════════════════════════ */
.reg [hidden]{display:none!important}

/* ── NỀN · cùng bộ với màn đầu trang chủ ──────────────────────────────── */
.reg{position:relative;overflow:hidden;height:100vh;height:100svh;display:flex;flex-direction:column;
  background:
    radial-gradient(56% 52% at 50% 60%,color-mix(in srgb,var(--v6-blurple) 42%,transparent) 0%,transparent 72%),
    linear-gradient(180deg,var(--v6-night) 0%,var(--v6-dot) 58%,var(--v6-violet-blue) 100%)}
.reg .dp-constel{top:auto;bottom:-16%;left:-7%;right:auto;translate:none;width:min(560px,40vw);opacity:.55}
.reg>*:not(.dp-bg){position:relative;z-index:2}

.reg-stick{display:flex;align-items:center;justify-content:space-between;gap:16px;
  /* mép phải chừa chỗ cho nút VI · EN nổi (.lng-place, _common.css) — màn không
     có thanh điều hướng nên nút đó đứng cố định ở góc phải trên */
  padding:18px max(clamp(20px,3vw,48px),118px) 18px clamp(20px,3vw,48px)}
.reg-sign{display:flex;align-items:center;gap:12px;text-decoration:none}
.reg-sign img{width:40px;height:40px}
.reg-sign b{color:#fff;font-size:15px;font-weight:700}
.reg-ticket{font-size:14.5px;color:var(--dark-text);text-decoration:none;transition:color var(--dur-btn) var(--ease-btn)}
.reg-ticket:hover{color:#fff}

.reg-mid{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;
  padding:0 clamp(16px,3vw,48px) clamp(18px,3.5vh,40px)}
/* Một dòng tiêu đề, không viên phụ nào bên cạnh (bỏ "◷ Phản hồi trong 3 ngày
   làm việc" ngày 21/09 — xem chú thích trong register.html). */
.reg-title{margin-bottom:clamp(16px,2.6vh,26px);text-align:center}
.reg-title h1{font-family:var(--font-title);font-weight:800;text-transform:uppercase;
  font-size:clamp(24px,2.2vw,34px);line-height:1.12;letter-spacing:-.01em;color:#fff}

/* ── KHỐI TRỌNG TÂM · khung kính 8px như tấm kính trang chủ ─────────────── */
.reg-box{width:100%;max-width:1080px;flex:0 1 auto;min-height:0;display:flex;flex-direction:column;
  background:var(--white);border-radius:24px;overflow:hidden;
  box-shadow:0 0 0 8px rgba(255,255,255,.08),0 0 0 9px rgba(255,255,255,.14),
             0 40px 100px rgba(4,10,4,.5)}

/* ── THANH BƯỚC · một hàng trên dải nhạt ──────────────────────────────── */
.reg-step{margin:0;padding:14px 32px;list-style:none;display:flex;align-items:center;
  background:var(--bird);border-bottom:1px solid var(--border)}
.reg-step li{display:flex;align-items:center;flex:1 1 0;min-width:0}
.reg-step li:last-child{flex:0 0 auto}
.reg-step li:not(:last-child)::after{content:"";flex:1 1 auto;min-width:16px;height:2px;margin:0 10px;border-radius:2px;
  background:var(--border);transition:background-color var(--dur-nav) var(--ease-btn)}
.reg-step li[data-st="done"]::after{background:var(--v6-blurple)}
.reg-step button{display:flex;align-items:center;gap:10px;padding:5px 12px 5px 5px;border:0;border-radius:999px;
  background:none;color:inherit;white-space:nowrap;transition:background-color var(--dur-btn) var(--ease-btn)}
.reg-step-num{flex:0 0 30px;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  font-size:13.5px;font-weight:700;line-height:1;color:var(--gray);background:var(--white);box-shadow:inset 0 0 0 2px var(--border);
  transition:background-color var(--dur-nav) var(--ease-btn),color var(--dur-nav) var(--ease-btn),box-shadow var(--dur-nav) var(--ease-btn)}
.reg-step-num em{font-style:normal}
.reg-step-num svg{display:none;width:15px;height:15px}
.reg-step-text{font-size:15px;font-weight:600;color:var(--gray)}
.reg-step li[data-st="active"] .reg-step-num{background:var(--v6-blurple);color:#fff;box-shadow:0 0 0 4px var(--green-pale)}
.reg-step li[data-st="active"] .reg-step-text{color:var(--ink);font-weight:700}
.reg-step li[data-st="done"] .reg-step-num{background:var(--green);color:#fff;box-shadow:none}
.reg-step li[data-st="done"] .reg-step-num em{display:none}
.reg-step li[data-st="done"] .reg-step-num svg{display:block}
.reg-step li[data-st="done"] .reg-step-text,.reg-step li[data-st="was-dark"] .reg-step-text{color:var(--ink)}
.reg-step button:not(:disabled):hover{background:var(--round-1)}

/* ── THÂN ─────────────────────────────────────────────────────────────── */
.reg-form{flex:1;min-height:0;display:flex;flex-direction:column}
/* ⚠️ CHIỀU CAO ỔN ĐỊNH — bấm "Tiếp tục" thì khối KHÔNG được đổi cao.
   Mỗi bước hỏi ít nhiều khác nhau: bước ① ba ô, bước ⑤ cả thẻ danh bạ — đo ở
   1920×1080 ra 443 → 706px. Để khối tự co theo nội dung thì hàng nút ở đáy
   nhảy lên nhảy xuống gần 270px mỗi lần bấm, mắt phải đi tìm lại đúng cái nút
   vừa bấm (người dùng 21/09: "đừng nhảy màn hình như thế, khó chịu lắm").
   Nên thân khối giữ MỘT chiều cao cho cả năm bước: JS đo bước cao nhất rồi
   đặt vào --reg-height-body (khối "CHIỀU CAO ỔN ĐỊNH" cuối register.html), chặn
   trên là chỗ còn trống của khung nhìn nên màn thấp không sinh thêm cuộn.
   Chỗ thừa rơi xuống ĐÁY thân, KHÔNG phải khoảng trống giữa thanh bước và
   nội dung — thứ đã bị chê 19/09 là do căn giữa dọc, ở đây nội dung vẫn bám
   ngay dưới thanh bước.
   Không có JS thì var rỗng → min-height:0, khối co theo nội dung như cũ. */
.reg-body{--reg-pad:40px;flex:1 1 auto;min-height:var(--reg-height-body,0px);
  position:relative;overflow:auto;padding:24px var(--reg-pad) 28px}
/* ⚠️ ĐANG ĐO (vài mili giây, JS bật rồi tắt ngay trong cùng một lượt) — luật
   này CHỈ đụng tới những bước ĐANG ẨN: dựng chúng ra, đặt tuyệt đối chồng
   lên nhau trong thân để đọc chiều cao. BƯỚC ĐANG HIỆN KHÔNG BỊ ĐỤNG TỚI
   MỘT THUỘC TÍNH NÀO.
   Bản đầu (21/09) xếp CẢ bước đang hiện vào một lưới và cho visibility:hidden
   trong lúc đo — người dùng thấy "nháy màn hình 1 cái" mỗi lần bấm chọn một
   mục. Đo mà chạm vào thứ đang trước mắt thì sớm muộn cũng lòi ra một khung
   hình trắng; cách chắc chắn là ĐỪNG CHẠM.
   left/right bám --reg-pad để bản đo rộng đúng bằng lúc nằm trong dòng chảy
   (khối tuyệt đối tính theo HỘP ĐỆM của thân, không trừ padding). */
.reg-body.reg-red>.reg-fld[hidden]{display:block!important;position:absolute;top:0;
  left:var(--reg-pad);right:var(--reg-pad);visibility:hidden;animation:none!important}
.reg-box.moved .reg-fld:not([hidden]){animation:reg-in .4s var(--ease-in) both}
@keyframes reg-in{from{opacity:0;translate:16px 0}}
/* tên bước trong thân: máy tính ẩn (thanh bước đã nói), điện thoại hiện vì
   thanh bước ở khổ đó chỉ còn đĩa số. Không dùng .sr-only: lớp đó khoá
   position bằng !important nên không bật lên được ở điểm ngắt. */
.reg-fld-ttl{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.reg-fld-hint{font-size:16px;line-height:1.6;color:var(--gray);max-width:70ch}

.reg-grid{margin-top:22px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 22px;align-items:start}
.reg-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
/* Bước ②: hàng ô bên dưới ăn theo ĐÚNG lưới của hàng nút chọn chương trình
   phía trên — bốn cột, khe 12px (.reg-det). Mép trái mỗi ô vì thế trùng mép
   trái một nút, mép phải hàng thẳng mép phải hàng nút.
     chưa chọn "khác":  [ Năm 1 cột ][ Mã học viên 3 cột            ]
     chọn "khác":       [ Tên chương trình 2 cột ][ Năm 1 ][ Mã 1 ]
   Hai bản trước đều lệch: lưới 3 cột trong khi trên là 4 nút, khe 22px trong
   khi trên là 12px → ô "Mã học viên" bắt đầu lửng giữa hai nút (người dùng
   21/09: "vẫn bị lệch field… cần căn trái field cho cân đối"). Khe phải khai
   lại cho khớp, không thì bốn cột vẫn ra bốn chỗ khác.
   ⚠️ PHẢI khoanh trong @container min-width: ở khổ hẹp lưới chỉ còn MỘT cột,
   span N sẽ đẻ ra cột ngầm — cả bước ② vỡ thành hai cột chồng lên nhau (đã
   dính đúng thế lúc 21/09, luật gỡ ở khối điện thoại thua đặc trưng). */
@container app (min-width:768px){
  .reg-grid--3{grid-template-columns:repeat(4,minmax(0,1fr));column-gap:12px}
  .reg-grid--3 #fld-det-other{grid-column:span 2}
  .reg-grid--3:has(#fld-det-other[hidden]) .field:has(#code-student){grid-column:span 3}
}
.reg-empty{grid-column:1/-1}
.reg .field{gap:7px}
.reg .field>label,.reg .field>.label-field{font-size:15px;font-weight:600}
.reg .fld-input{height:52px;border-radius:12px;padding:0 16px;font-size:16px}
.reg .fld-input:focus{border-color:var(--green);box-shadow:0 0 0 4px var(--green-pale)}
.reg .fld-input[aria-invalid="true"]{border-color:var(--err);box-shadow:0 0 0 4px var(--err-bg)}
.reg .err-fld{font-size:14px}
.reg-tuy{margin-left:6px;padding:2px 9px;border-radius:999px;background:var(--cream);
  font-size:12px;font-weight:600;color:var(--gray);vertical-align:1px}
.reg-ai{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;color:var(--gray)}
.reg-ai svg{width:15px;height:15px}
.reg-dup{padding:10px 13px;border-radius:10px;background:var(--warn-bg);color:var(--warn);font-size:14px;line-height:1.55}
/* Chữ trong hộp cảnh báo là màu hổ phách, nhưng liên kết vẫn phải XANH:
   trùng màu với chữ quanh nó thì không còn là liên kết. `.link-text` lo màu. */
.reg-dup a{font-weight:700}

/* ② chương trình học: bốn ô chọn một hàng */
.reg-det{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.reg-det label{display:flex;align-items:center;gap:10px;min-width:0;min-height:58px;padding:8px 16px;
  border:1.5px solid var(--border);border-radius:12px;font-size:16px;font-weight:600;line-height:1.3;color:var(--ink);
  transition:border-color var(--dur-btn) var(--ease-btn),background-color var(--dur-btn) var(--ease-btn)}
.reg-det input{width:19px;height:19px;margin:0;flex:0 0 19px;accent-color:var(--green)}
.reg-det label:hover{border-color:var(--green-light)}
.reg-det label:has(input:checked){border-color:var(--green);background:var(--green-pale)}
.reg-det label:focus-within{outline:2px solid var(--green);outline-offset:2px}
.reg-det[aria-invalid="true"] label{border-color:var(--err)}

/* ③ vị trí công tác */
/* Số cột khai ở SECTION chứ không ở .reg-tix, để hàng "Khu vực · Quốc gia"
   bên dưới dùng chung đúng bộ cột đó — hai hàng thẳng nhau từ trên xuống. */
.reg-tix{margin-top:22px}
/* Cột "Vị trí chính" để RỘNG CỐ ĐỊNH chứ không auto: auto thì ở hàng Khu
   vực (không có viên nào) nó co về 0, hai cột đầu nở ra và hai hàng lệch
   nhau ngay — đúng thứ vừa sửa. Cố định thì mọi hàng cùng một bộ cột. */
.reg-fld:has(.reg-tix){--reg-tix-col:minmax(0,1fr) minmax(0,1.3fr) 150px 40px}
.reg-fld:has(.reg-tix[data-num="1"]){--reg-tix-col:minmax(0,1fr) minmax(0,1.3fr)}
.reg-tix-head{display:grid;grid-template-columns:var(--reg-tix-col);gap:12px;margin-bottom:7px;
  font-size:15px;font-weight:600;color:var(--ink)}
.reg-tix-head b{color:var(--err);font-weight:500}
.reg-tix[data-num="1"] .reg-tix-head>span:nth-child(n+3){display:none}
.reg-tix-list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
.reg-tix-row{display:grid;grid-template-columns:var(--reg-tix-col);gap:12px;align-items:start}
.reg-tix[data-num="1"] .reg-tix-main,.reg-tix[data-num="1"] .reg-tix-del{display:none}
.reg-hide-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.reg-tix-main{display:flex;align-items:center;gap:8px;height:52px;padding:0 13px;
  border:1.5px solid var(--border);border-radius:12px;font-size:14px;font-weight:600;color:var(--gray);white-space:nowrap}
.reg-tix-main input{width:18px;height:18px;margin:0;accent-color:var(--green)}
.reg-tix-main:has(input:checked){border-color:var(--green);background:var(--green-pale);color:var(--green-dark)}
.reg-tix-main:focus-within{outline:2px solid var(--green);outline-offset:2px}
.reg-tix-del{width:40px;height:40px;margin-top:6px;display:grid;place-items:center;border:0;border-radius:10px;
  background:none;color:var(--gray);transition:background-color var(--dur-btn) var(--ease-btn),color var(--dur-btn) var(--ease-btn)}
.reg-tix-del svg{width:18px;height:18px}
.reg-tix-del:hover{background:var(--err-bg);color:var(--err)}
.reg-tix-add{margin-top:8px;padding:6px 2px;border:0;background:none;color:var(--green);font-size:15px;font-weight:600}
.reg-tix-add:hover{text-decoration:underline}
/* Khu vực đứng đúng cột "Chức danh", Quốc gia đúng cột "Đơn vị" — trước đây
   hàng này chia đôi đều nên hai hàng trên dưới lệch cạnh nhau. */
.reg-grid--area{margin-top:18px;grid-template-columns:var(--reg-tix-col);column-gap:12px}
.reg-area .fld-input{padding-left:46px}
.reg-area-glass{position:absolute;left:15px;top:16px;width:20px;height:20px;color:var(--gray);pointer-events:none}
.reg-area .fld-suggest-list small{display:block;margin-top:1px;font-size:12.5px;color:var(--gray)}
.reg-area.reg-area--up .fld-suggest-list{top:auto;bottom:calc(100% + 6px)}

/* ④ nhu cầu kết nối */
.reg-count{float:right;font-size:13px;font-weight:500;color:var(--gray)}
.reg .reg-about{height:auto;min-height:96px;padding:12px 16px;line-height:1.55;resize:vertical}
.reg-tag .fld-suggest-box{min-height:52px;border-radius:12px;padding:8px 12px}
.reg-quick{margin-top:9px;display:flex;flex-wrap:wrap;gap:7px}
.reg-quick button{height:32px;padding:0 13px;border-radius:999px;border:1px dashed var(--border-field);background:var(--white);
  font-size:13.5px;font-weight:600;color:var(--green-dark);
  transition:background-color var(--dur-btn) var(--ease-btn),border-color var(--dur-btn) var(--ease-btn)}
.reg-quick button:hover{background:var(--green-pale);border-color:var(--green);border-style:solid}

/* ⑤ xem lại: thẻ hồ sơ trái · lưới 2×2 phải */
.reg-proc{display:grid;grid-template-columns:300px minmax(0,1fr);gap:20px;align-items:stretch}
.reg-proc-card{align-self:start}
/* thẻ .dir-card lấy nguyên dáng Danh bạ; chỉ gỡ con trỏ vì ở đây nó là ảnh xem trước */
.reg-proc-card .dir-card{box-shadow:0 10px 30px rgba(10,23,48,.08)}
.reg-proc-card .btn{pointer-events:none}
.reg-proc-right{min-width:0;display:flex;flex-direction:column;gap:12px}
/* ô đồng ý dồn xuống đáy cột phải → đáy hai cột thẳng một đường */
.reg-proc-right .reg-agree{margin-top:auto}
.reg-proc-group{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.reg-proc-group section{padding:13px 15px;border:1px solid var(--border);border-radius:14px}
.reg-proc-group header{display:flex;align-items:center;gap:10px}
.reg-proc-ic{flex:0 0 30px;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:var(--green-pale);color:var(--green)}
.reg-proc-ic svg{width:17px;height:17px}
.reg-proc-group h3{flex:1;font-size:14.5px;font-weight:700;color:var(--ink)}
.reg-proc-edit{padding:2px 0;border:0;background:none;font-size:13.5px;font-weight:600;color:var(--green)}
.reg-proc-edit:hover{text-decoration:underline}
/* cột nhãn rộng đúng bằng nhãn dài nhất của nhóm (div display:contents) —
   nhãn không bao giờ bị ngắt dòng, giá trị thẳng một cột */
.reg-proc-group dl{margin:10px 0 0;display:grid;grid-template-columns:max-content minmax(0,1fr);gap:6px 12px;align-items:start}
.reg-proc-group dl div{display:contents}
.reg-proc-group dt{display:flex;align-items:center;gap:6px;white-space:nowrap;font-size:13px;line-height:1.5;color:var(--gray)}
.reg-proc-group dt svg{flex:0 0 14px;width:14px;height:14px}
.reg-ai-face{color:var(--green)} .reg-ai-lock{color:var(--warn)} .reg-ai-shield{color:var(--gray)}
.reg-proc-group dd{margin:0;font-size:14px;line-height:1.5;font-weight:600;color:var(--ink);overflow-wrap:anywhere}
.reg-proc-group dd i{font-style:normal;font-weight:500;color:var(--gray)}
.reg-legend{display:flex;flex-wrap:wrap;gap:6px 20px;font-size:13px;color:var(--gray)}
.reg-legend span{display:flex;align-items:center;gap:7px}
.reg-legend svg{width:15px;height:15px}
.reg-legend span:nth-child(1) svg{color:var(--green)}
.reg-legend span:nth-child(2) svg{color:var(--warn)}
/* ô đồng ý: dải ngang toàn bề rộng, ô tích và chữ căn giữa dọc */
.reg-agree{padding:14px 18px;border:1.5px solid var(--border);border-radius:14px;background:var(--bird)}
.reg-agree:has(input:checked){border-color:var(--green);background:var(--green-pale)}
.reg-agree .box-sel{align-items:center;gap:12px;min-height:24px;font-size:15px}
.reg-agree a{color:var(--green);font-weight:600}
.reg-agree .err-fld{margin:8px 0 0 32px}

/* đã nhận đơn */
.reg-done{text-align:center}
.reg-done-head{width:68px;height:68px;margin:0 auto;border-radius:50%;display:grid;place-items:center;
  color:#fff;background:var(--ok);box-shadow:0 0 0 8px var(--ok-bg)}
.reg-done-head svg{width:32px;height:32px}
.reg.finished .reg-done-head{animation:reg-this .6s var(--ease-bounce) both}
@keyframes reg-this{from{scale:.6;opacity:0}}
.reg-done h2{margin-top:20px;font-size:clamp(24px,2vw,28px);letter-spacing:-.025em;font-weight:700}
.reg-done-dark{margin-top:6px;font-size:16px;color:var(--gray)}
.reg-done-dark b{color:var(--ink)}
.reg-done-mark{margin:22px auto 0;max-width:860px;padding:0;list-style:none;counter-reset:mark;display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;text-align:left}
.reg-done-mark li{counter-increment:mark;padding:16px;border-radius:14px;background:var(--cream)}
.reg-done-mark b{display:block;font-size:15px;color:var(--ink)}
.reg-done-mark b::before{content:counter(mark) ". ";color:var(--green)}
.reg-done-mark span{display:block;margin-top:4px;font-size:13.5px;line-height:1.55;color:var(--gray)}
.reg-done-btn{margin-top:22px;display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.reg-done-btn .btn{height:50px;border-radius:12px;font-size:15.5px;font-weight:600}
.reg-done-trash{margin-top:14px;font-size:14px;color:var(--gray)}
.reg-done-trash a{color:var(--green);font-weight:500}
.reg.finished .reg-foot{display:none}

/* ── ĐÁY · hàng nút ───────────────────────────────────────────────────── */
.reg-foot{display:flex;align-items:center;gap:14px;padding:16px 40px;border-top:1px solid var(--border);background:var(--bird)}
.reg-backward{font-size:15.5px}
.reg-sent{font-size:14.5px;color:var(--gray)}
.reg-sent a{font-weight:600}
.reg-alert{margin-left:auto;font-size:14.5px;font-weight:600;color:var(--err)}
.reg-skip{height:52px;border-radius:12px;font-size:15.5px}
.reg-btn-main{height:52px;padding:0 30px;border-radius:12px;font-size:16px;font-weight:600;color:#fff;text-decoration:none;
  background:var(--v6-blurple);box-shadow:0 10px 24px color-mix(in srgb,var(--v6-blurple) 28%,transparent)}
.reg-btn-main:hover{background:var(--v6-blurple-deep);transform:translateY(-2px)}
#btn-next::after{content:"→";font-size:18px;line-height:1;transition:translate var(--dur-btn) var(--ease-btn)}
#btn-next:hover::after{translate:4px 0}
.reg-btn-main:disabled{background:var(--neutral-bg);color:var(--gray);box-shadow:none;transform:none}
.reg-btn-main:disabled::after{display:none}

/* ── Màn thấp (≤ 800: phủ 1366×768, 1280×720) — @media vì đo CHIỀU CAO ── */
@media (max-height:900px){
  .reg-body{padding-block:18px 20px}
}
@media (max-height:800px){
  /* thẻ danh bạ ở bước ⑤ là thứ cao nhất màn: màn thấp bỏ đoạn giới thiệu
     trong thẻ (vẫn xem/sửa được ở bước ④) để ô đồng ý không bị đẩy khỏi màn */
  .reg-proc-card .dir-card-about{display:none}
  .reg-stick{padding-block:12px}
  .reg-title{margin-bottom:14px}
  .reg-title h1{font-size:clamp(22px,2vw,28px)}
  .reg-step{padding-block:10px}
  .reg-body{padding-block:16px 20px}
  .reg-grid,.reg-tix{margin-top:16px}
  .reg-foot{padding-block:12px}
  .reg-agree{padding-block:11px}
  .reg .reg-about{min-height:80px}
  .reg-proc-group section{padding:10px 14px}
  .reg-proc-group dl{margin-top:7px;row-gap:4px}
  /* bước ③ đủ 3 vị trí / bước ⑤: câu dẫn nhường chỗ cho các ô */
  .reg-fld:has(.reg-tix[data-num="3"]) .reg-fld-hint{display:none}
}
@media (max-height:740px){
  .reg-stick{padding-block:8px}
  .reg-title{margin-bottom:10px}
  .reg-mid{padding-bottom:12px}
}

/* ── Khổ hẹp ──────────────────────────────────────────────────────────── */
@container app (max-width:1023px){
  /* máy tính bảng: tên bước chỉ giữ ở bước đang làm */
  .reg-step li:not([aria-current]) .reg-step-text{display:none}
  .reg-proc{grid-template-columns:minmax(0,1fr)}
  .reg-proc-card{display:none}
}
@container app (max-width:767px){
  .reg{height:auto;min-height:100svh;overflow:visible}
  .reg .dp-constel{display:none}
  .reg-mid{padding:0 12px 16px}
  .reg-title h1{font-size:22px}
  .reg-box{flex:none;overflow:visible;border-radius:18px;box-shadow:0 0 0 5px rgba(255,255,255,.08),0 30px 60px rgba(4,10,4,.45)}
  /* thanh bước: chỉ còn năm đĩa số + vạch; tên bước hiện thành tiêu đề ngay
     trong thân (h2 vốn ẩn cho máy đọc màn hình, ở khổ này bật lên) */
  .reg-step{padding:10px 14px}
  .reg-step li:not(:last-child)::after{margin:0 4px}
  .reg-step button{padding:4px}
  .reg-step-text{display:none}
  .reg-ticket{display:none}
  .reg-stick{padding-block:12px}
  .reg-fld-ttl{position:static;width:auto;height:auto;margin:0 0 6px;overflow:visible;clip:auto;
    white-space:normal;font-size:22px;font-weight:700;letter-spacing:-.02em;color:var(--ink)}
  /* Điện thoại: KHÔNG giữ chiều cao chung. Ở đây cả trang cuộn, mép trên
     khối đứng yên sẵn — giữ cao theo bước cao nhất chỉ tổ đẻ ra một mảng
     trống dài bằng nửa màn ở bước ① (§5B: khối phải sống được cả lúc ít). */
  .reg-body{--reg-pad:18px;overflow:visible;padding:18px;min-height:0}
  .reg-fld-hint{font-size:15px}
  .reg-grid,.reg-grid--3,.reg-proc-group{grid-template-columns:minmax(0,1fr)}
  .reg-det{grid-template-columns:repeat(2,minmax(0,1fr))}
  .reg-tix-head{display:none}
  .reg-tix-row,.reg-tix[data-num="1"] .reg-tix-row{grid-template-columns:minmax(0,1fr) 40px;gap:10px}
  .reg-tix-row>.field,.reg-tix-main{grid-column:1}
  .reg-tix-del{grid-column:2;grid-row:1}
  .reg-tix:not([data-num="1"]) .reg-tix-row{padding:14px;border:1px solid var(--border);border-radius:14px}
  .reg-tix[data-num="1"] .reg-tix-row{grid-template-columns:minmax(0,1fr)}
  .reg-hide-label{position:static;width:auto;height:auto;overflow:visible;clip:auto;font-size:15px;font-weight:600;color:var(--ink)}
  .reg-tix-main{height:44px;justify-self:start}
  .reg-done-mark{grid-template-columns:minmax(0,1fr)}
  .reg-foot{position:sticky;bottom:0;z-index:5;flex-wrap:wrap;gap:8px 12px;padding:12px 18px;border-radius:0 0 18px 18px}
  .reg-alert{order:-1;flex:1 0 100%;margin:0;text-align:right}
  .reg-alert:empty{display:none}
  .reg-sent{flex:1 0 100%;order:2;text-align:center}
  .reg-skip{order:3;flex:1 0 100%}
  .reg-btn-main{flex:1;padding:0 20px}
  .reg-done-btn .btn{width:100%}
}
@media (prefers-reduced-motion:reduce){
  .reg-box.moved .reg-fld:not([hidden]),.reg.finished .reg-done-head{animation:none}
}

/* ══════════════════════════════════════════════════════════════════════════
   ĐẦU TRANG PHỤ — dùng cho mọi màn KHÔNG phải trang chủ (dựng lại 19/09)
   Người dùng 19/09: menu màn trong "lệch khác hoàn toàn Homepage", đầu các
   màn "xấu, ko có điểm nhấn". Bản navy cũ (lưới chấm + ba vệt xéo) đã bỏ.
   Nay đầu màn là MỘT MẢNH của màn đầu trang chủ:
     · Nền: đỉnh --v6-night (trùng màu thanh điều hướng → thanh và đầu màn
       liền một mảng như trang chủ) xuống chàm --v6-dot, quầng blurple bên
       phải, trời sao, một vầng fuchsia trôi chậm 40s (như .v6-gold).
     · ĐIỂM NHẤN: chòm quỹ đạo bên phải — tâm sáng + ba vòng mảnh xoay chậm,
       mỗi vòng một đốm sáng kéo vệt. Trừu tượng, không mang chữ.
     · Mép đáy: một đường chân trời sáng mảnh (blurple → fuchsia, tan hai đầu)
       — ranh giới giữa mảng tối và thân sáng có chủ ý, không cắt phăng.
     · Chữ: nhãn mục thành viên kính (pill), tiêu đề Montserrat 800 in hoa,
       câu dẫn --dark-text. Cột chữ ≤ 62% bề ngang ở máy tính để chòm không
       bao giờ nằm dưới chữ.
   §5 (loá): quầng mềm, đốm sáng nhỏ 8–10px, vòng chỉ 1px trắng 10–16%.
   §5C: đầu màn KHÔNG hiện dần; reduced-motion → mọi thứ đứng yên.
   Nền trang trí do _shell.js chèn (trangTriDauTrang) — không viết tay.
   ══════════════════════════════════════════════════════════════════════════ */
.head-sub{position:relative;overflow:hidden;isolation:isolate;
  --dp-height-nav:0px;
  /* 19/09 lượt 3: người dùng — đầu màn "hơi cao ko cần thiết, thấp hơn, gọn
     hơn". Đệm từ 84/92 xuống 44/48 ở khổ lớn; tiêu đề nhỏ lại, cột chữ rộng ra
     để tiêu đề thường nằm một dòng. Đầu màn ~300px ở 1440 (trước ~480px). */
  padding-block:calc(var(--dp-height-nav) + clamp(22px,2.6vw,44px)) clamp(28px,3vw,48px);
  background:
    radial-gradient(ellipse 40% 85% at 80% 50%,color-mix(in srgb,var(--v6-blurple) 42%,transparent) 0%,transparent 70%),
    linear-gradient(180deg,var(--v6-night) 0%,var(--v6-dot) 100%)}
.head-sub::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;z-index:1;opacity:.75;
  background:linear-gradient(90deg,transparent 0%,var(--v6-blurple-pale) 35%,var(--v6-fuchsia) 72%,transparent 100%)}
/* Thanh điều hướng TRONG SUỐT nằm đè lên đầu màn — y trang chủ. Đầu màn
   kéo lên dưới thanh đúng bằng chiều cao thanh (64px; 60px dưới 1024) và bù
   lại vào đệm trên, nên quầng sáng chạy liền từ mép trên màn hình, không có
   đường nối giữa thanh và đầu màn (lỗi thấy trên ảnh chụp 19/09). Cuộn qua
   thì thanh thành kính mờ tối (.has-bubble, lớp theme cuối _common.css).     */
.app:has(> .head-sub) .nav:not(.has-bubble){background:transparent}
/* 08/10: thanh có đệm 12px trên + dưới y trang chủ (_unify.css §thanh) nên
   kéo lên 64+24 = 88px (60+24 = 84px dưới 1024). */
.nav ~ .head-sub{--dp-height-nav:88px;margin-top:-88px}
@container app (max-width:1023px){.nav ~ .head-sub{--dp-height-nav:84px;margin-top:-84px}}
.head-sub .container{position:relative;z-index:2}
@container app (min-width:1024px){
  .head-sub .container>*{max-width:min(980px,70%)}
}
/* Nhãn mục: viên kính + chấm sáng — cùng chất liệu ô tìm trang chủ. */
.head-sub .kicker{display:inline-flex;align-items:center;gap:10px;padding:7px 15px 7px 12px;
  border-radius:999px;font-size:12.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:#fff;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.head-sub .kicker i{width:8px;height:8px;border-radius:50%;display:block;background:var(--v6-blurple-pale);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--v6-blurple-pale) 28%,transparent)}
.head-sub h1{margin-top:14px;font-family:var(--font-title);font-weight:800;text-transform:uppercase;
  font-size:clamp(26px,2.6cqi,42px);line-height:1.1;letter-spacing:-.01em;color:#fff;text-wrap:balance}
.head-sub .hint{margin-top:10px;font-size:16.5px;line-height:1.7;color:var(--dark-text);
  max-width:60ch;text-wrap:pretty}

/* ── Nền trang trí (chèn bằng _shell.js) ─────────────────────────────── */
.dp-bg{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.dp-star{position:absolute;inset:0;opacity:.8;
  background-image:
    radial-gradient(1.5px 1.5px at 7% 22%,#fff 50%,transparent 51%),
    radial-gradient(1px 1px at 18% 70%,#fff 50%,transparent 51%),
    radial-gradient(1.5px 1.5px at 31% 14%,#fff 50%,transparent 51%),
    radial-gradient(1px 1px at 42% 86%,#fff 50%,transparent 51%),
    radial-gradient(1.5px 1.5px at 51% 34%,#fff 50%,transparent 51%),
    radial-gradient(1px 1px at 58% 10%,#fff 50%,transparent 51%),
    radial-gradient(2px 2px at 64% 78%,var(--v6-blurple-pale) 50%,transparent 51%),
    radial-gradient(1px 1px at 88% 12%,#fff 50%,transparent 51%),
    radial-gradient(1.5px 1.5px at 94% 84%,#fff 50%,transparent 51%),
    radial-gradient(1px 1px at 97% 40%,#fff 50%,transparent 51%)}
.dp-halo{position:absolute;width:32%;aspect-ratio:1;right:2%;top:-40%;border-radius:50%;
  background:var(--v6-fuchsia);opacity:.14;filter:blur(90px);animation:dp-drift 40s ease-in-out infinite}
@keyframes dp-drift{0%,100%{translate:0 0}50%{translate:-8% 14%}}

/* Chòm quỹ đạo — kích thước theo bề rộng khung (cqi), canh giữa theo dọc. */
/* Canh giữa phần NỘI DUNG (dưới thanh điều hướng), không giữa cả khối. */
.dp-constel{position:absolute;right:clamp(12px,6cqi,130px);top:calc(50% + var(--dp-height-nav) / 2);translate:0 -50%;
  width:clamp(190px,19cqi,310px);aspect-ratio:1}
.dp-core{position:absolute;inset:37%;border-radius:50%;
  background:radial-gradient(circle at 34% 30%,var(--v6-blurple-pale) 0%,var(--v6-blurple) 42%,var(--v6-dot) 100%);
  box-shadow:0 0 56px color-mix(in srgb,var(--v6-blurple) 55%,transparent),inset 0 0 0 1px rgba(255,255,255,.28)}
.dp-ring{position:absolute;border-radius:50%;border:1px solid rgba(255,255,255,.16);
  animation:dp-turn linear infinite}
.dp-ring--1{inset:24%;animation-duration:16s}
.dp-ring--2{inset:10%;animation-duration:28s;animation-direction:reverse;animation-delay:-9s}
.dp-ring--3{inset:-6%;animation-duration:44s;animation-delay:-20s;border-color:rgba(255,255,255,.1)}
/* Vệt sáng kéo sau đốm: cung conic trên đúng đường vòng (mask chừa viền 1px).
   Vòng quay thuận → vệt nằm TRƯỚC 0°; vòng quay ngược → vệt nằm SAU 0°. */
.dp-ring::before{content:"";position:absolute;inset:-1px;border-radius:50%;padding:1px;
  background:conic-gradient(from 0deg,transparent 0 72%,var(--v6-blurple-pale) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude}
.dp-ring--2::before{background:conic-gradient(from 0deg,var(--v6-fuchsia) 0%,transparent 28% 100%)}
.dp-ring i{position:absolute;top:-4px;left:50%;width:8px;height:8px;margin-left:-4px;border-radius:50%;
  background:#fff;box-shadow:0 0 10px 2px color-mix(in srgb,var(--v6-blurple-pale) 80%,transparent)}
.dp-ring--2 i{width:10px;height:10px;top:-5px;margin-left:-5px;
  box-shadow:0 0 12px 2px color-mix(in srgb,var(--v6-fuchsia) 70%,transparent)}
@keyframes dp-turn{to{rotate:360deg}}

/* Khổ hẹp: chòm lùi ra mép phải, mờ đi, bỏ tâm sáng — chữ lúc này chạy hết
   bề ngang nên phần nằm dưới chữ chỉ còn vòng mảnh. */
@container app (max-width:1023px){
  .dp-constel{width:clamp(200px,42cqi,320px);right:-12%;opacity:.6}
}
@container app (max-width:639px){
  .dp-constel{right:-34%;top:30%;opacity:.45}
  .dp-core{display:none}
}
@media (prefers-reduced-motion:reduce){
  .dp-ring,.dp-halo{animation:none}
}
/* Cột trái màn Đăng nhập dùng cùng bộ nền: chòm đặt góc dưới phải cột. */
.signin-left .dp-constel{top:auto;bottom:-10%;right:-14%;translate:none;width:min(440px,74%);opacity:.75}

/* ── HÀNG DỮ KIỆN TRONG ĐẦU TRANG ───────────────────────────────────────
   Cũng học từ trang KH gửi: ngày và nơi chốn nằm NGAY TRONG banner, dạng
   viên bo tròn. Hai cái lợi: ① người mở đường dẫn được chia sẻ biết ngay
   "khi nào, ở đâu" mà không phải cuộn; ② màn chi tiết bỏ được thanh dữ kiện
   riêng bên dưới ảnh bìa — trước đây nó nói đúng những thứ này, tức là tả
   một thứ hai lần, đúng cái bệnh đã bị bác.
   Chỉ dùng ở màn CÓ dữ kiện (chi tiết sự kiện). Màn khác không khai. */
.head-sub .border{margin-top:20px;display:flex;flex-wrap:wrap;gap:10px}
.head-sub .border span{display:inline-flex;align-items:center;gap:9px;
  padding:9px 16px;border-radius:12px;font-size:14.5px;font-weight:500;color:#fff;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.head-sub .border .ic{width:17px;height:17px;flex:0 0 17px;color:var(--dark-label)}

/* ══ MÀN KẾT QUẢ TÌM KIẾM ════════════════════════════════════════════════
   Ô tìm lặp lại ngay đầu màn — người ta gõ sai một chữ là sửa tại chỗ, không
   phải quay về trang chủ. Hàng chip chuyên mục là BỘ LỌC chứ không phải tab
   điều hướng: bấm vào thì thu hẹp kết quả, không rời màn.                 */
.acct-fld{margin-top:24px;max-width:620px;display:flex;align-items:center;gap:10px;
  background:var(--white);border-radius:999px;padding:6px 6px 6px 18px;
  box-shadow:0 10px 26px rgba(5,12,28,.26)}
.acct-fld svg{width:19px;height:19px;flex:0 0 19px;color:var(--gray-pale)}
.acct-fld input{flex:1 1 auto;min-width:0;height:44px;border:0;background:none;font:inherit;
  font-size:15.5px;color:var(--ink);outline:none}
.acct-fld .btn{height:44px;flex:0 0 auto;border-radius:999px;padding:0 22px}

.acct-filter{display:flex;gap:8px;flex-wrap:wrap;padding-bottom:22px;border-bottom:1px solid var(--border)}
/* Chip lọc dựng bằng <button> — cần đặt lại phông và nền, vì nút không thừa
   kế phông của trang như thẻ <a>. */
.acct-filter button{height:36px;padding:0 15px;border-radius:999px;border:1px solid var(--border);
  background:var(--white);font:inherit;font-size:14px;color:var(--gray);
  display:inline-flex;align-items:center;
  transition:border-color var(--dur-btn) var(--ease-btn),
  color var(--dur-btn) var(--ease-btn),background var(--dur-btn) var(--ease-btn)}
.acct-filter button:hover{border-color:var(--green);color:var(--green)}
.acct-filter button.active{background:var(--green);border-color:var(--green);color:#fff}
.acct-count{padding-top:20px;font-size:15px;color:var(--gray)}
.acct-count b{color:var(--ink);font-weight:600}

.result-list{display:flex;flex-direction:column;margin-top:6px}
.result{display:grid;grid-template-columns:112px minmax(0,1fr);gap:20px;align-items:start;
  padding:20px 0;border-bottom:1px solid var(--border);text-decoration:none;
  transition:padding-left var(--dur-btn) var(--ease-btn)}
.result:hover{padding-left:8px}
.result .img{aspect-ratio:4/3;border-radius:10px}
.result .fld-person{aspect-ratio:4/3;display:grid;place-items:center}
.result .body{min-width:0;display:block}
.result .name{display:block;margin-top:9px;font-size:18px;line-height:1.36;letter-spacing:-.02em;
  font-weight:600;color:var(--ink);transition:color var(--dur-btn) var(--ease-btn)}
.result .muted{display:block;margin-top:6px;font-size:14.5px;line-height:1.62;color:var(--gray)}
.result .facts{display:block;margin-top:8px;font-size:13px;color:var(--gray-pale)}
.result:hover .name{color:var(--green)}
.result-add{margin-top:28px;display:flex;justify-content:center}


/* ══ MÀN GIỚI THIỆU ══════════════════════════════════════════════════════ */
.about-article{max-width:64ch}
.about-article p{margin-top:16px;font-size:17px;line-height:1.78;color:var(--gray)}
.three-col{margin-top:30px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.three-col .fld{padding:26px 24px}
.three-col .num{font-size:12.5px;font-weight:700;letter-spacing:.14em;color:var(--green)}
.three-col h3{margin-top:10px;font-size:19px;font-weight:700;letter-spacing:-.022em}
.three-col p{margin-top:9px;font-size:15px;line-height:1.68;color:var(--gray)}
.coordination{margin-top:28px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.coordination .fld{padding:28px 20px 24px;text-align:center;transition:transform .4s cubic-bezier(.16,1,.3,1),border-color .3s}
.coordination .fld:hover{transform:translateY(-4px);border-color:var(--green-light)}
.coordination h4{margin-top:20px;font-size:16.5px;font-weight:600;letter-spacing:-.016em}
.coordination p{margin-top:4px;font-size:14px;color:var(--gray)}
/* ⚠️ `.new-pkg` ĐÃ CHUYỂN XUỐNG khối "MÀN GIỚI THIỆU — dựng lại 16/09/2026"
   ở cuối file, và đổi sang NỀN SÁNG. Bản cũ ở đây là mảng tối đặt ngay trên
   chân trang cũng tối — hai mảng tối liền nhau, trái CLAUDE.md §4. Đừng dựng
   lại bản tối ở chỗ này: hai luật cùng tên trong một file là bom hẹn giờ,
   đúng thứ README đã cảnh báo sau vụ hai phiên cùng sửa `_screens.css`. */

/* ══════════════════════════════════════════════════════════════════════════
   MÀN SỰ KIỆN — danh sách   ·   BẢN 2, dựng lại 16/09/2026

   ⚠️ BẢN 1 BỊ BÁC: "design quá xấu". Mổ ra thì hỏng bốn chỗ, ghi lại cả bốn
      vì đều là lỗi dễ lặp:

      ① SÁU CÁI HỘP TRẮNG GIỐNG HỆT NHAU. Cả trang chỉ có một hình dáng —
         thẻ trắng, viền 1px, bo 16. Sự kiện lớn nhất trong năm và một buổi
         chia sẻ hai tiếng trông ngang hàng nhau. Không có phân cấp thì mắt
         không biết nhìn vào đâu trước, và cái đó đọc ra là "chưa thiết kế".
      ② THANG CHỮ PHẲNG. To nhất trong thân trang là 24px, nhỏ nhất 14.5px —
         chênh chưa tới hai lần. Chính bộ khung được KH duyệt sống nhờ
         "thang chữ chênh lớn"; ở đây thì không có gì để chênh.
      ③ BẢNG CHƯƠNG TRÌNH ĐỌC RA LÀ BẢNG TÍNH. Ba ô đều nhau ngăn bằng kẻ
         chỉ, mỗi ô ba dòng chữ. Đúng dữ liệu, nhưng không nói được rằng ba
         thứ đó NỐI TIẾP NHAU trong một ngày.
      ④ THỪA CHỖ MÀ KHÔNG DÙNG. Khung rộng 1460px, chữ chỉ chạy tới 60% rồi
         xuống dòng, nửa phải thẻ bỏ trống. Chỗ trống không có chủ ý thì
         không đọc ra là khoảng thở, đọc ra là quên chưa làm.

   ★ BẢN 2 — hai hình dáng khác hẳn nhau, đó chính là phân cấp:

      SỰ KIỆN LỚN  → khối BIÊN TẬP, không viền không thẻ. Kẹp trên dưới bằng
                     kẻ chỉ (trên 2px đậm, dưới 1px nhạt), ngày viết bằng số
                     cỡ ~84px màu xanh, tiêu đề tới 40px, chương trình nằm
                     trong một panel riêng bên phải.
      SỰ KIỆN LẺ   → HÀNG kẻ chỉ, không phải thẻ. Bốn cột dùng hết bề ngang:
                     ngày · tên và mô tả · giờ và nơi chốn · trạng thái và nút.

      Tách "giờ · nơi chốn" ra thành CỘT RIÊNG là thứ chữa được cả ④ lẫn tính
      quét mắt: cả danh sách xếp thành bảng, muốn so giờ thì đọc dọc một cột,
      không phải nhặt trong từng đoạn văn.

      Bỏ thẻ, dùng kẻ chỉ — đúng luật §4 của dự án ("phân khối bằng kẻ chỉ và
      khoảng trống, không phải bằng bóng đổ ở khắp nơi") và nhờ bỏ đệm ngang
      của thẻ mà mọi dòng thẳng đúng mép khung, không lệch một pixel nào.

   ★ VẪN GIỮ: khối ngày xanh đặc ở danh sách (DS bắt buộc, và sáu khối xanh
     dọc mép trái là thứ duy nhất cho trang này màu sắc). Sự kiện lớn thì
     đổi sang ngày kiểu chữ số lớn — khác hình dáng nên đọc ra ngay là khác cấp.
   ══════════════════════════════════════════════════════════════════════════ */
/* ── THANH CÔNG CỤ: hai mặt · ô tìm · lọc nhanh · số đếm ─────────────────
   KH hỏi màn này có nên có tìm kiếm và bộ lọc không. Cân nhắc:
     · mặt "Sắp diễn ra" thường chỉ có dăm bảy sự kiện — với ngần ấy thì bộ
       điều khiển gần bằng dữ liệu, thêm vào là làm nặng một màn vừa mới gọt
       cho nhẹ;
     · nhưng mặt "Đã qua" thì CHỈ CÓ TĂNG, năm sau đã vài chục. Tìm lại "buổi
       tọa đàm xuất khẩu năm ngoái" mà không có ô tìm thì phải cuộn hết.
   Vì hai mặt dùng chung một màn, làm một thanh công cụ dùng chung là hợp lý
   và rẻ. Giữ ĐÚNG MỘT HÀNG, không dựng thành bảng lọc nhiều nhóm.

   Lọc nhanh chọn MỘT, không cộng dồn: với vài chục mục thì lọc chồng nhau
   chỉ làm người ta lạc. Ba tiêu chí lấy đúng trường EBMS có sẵn — hình thức
   (Offline/Online) và vé.
   ⚑ CHƯA CÓ: lọc theo KHU VỰC (Hà Nội · TP.HCM). Đây là bộ lọc hữu ích nhất
     với cộng đồng có thành viên hai miền — người ở TP.HCM không quan tâm sự
     kiện Hà Nội. Nhưng EBMS chỉ có ô "Địa điểm" dạng chữ tự do, không có
     trường khu vực, nên chưa lọc được. Cần chốt với anh Sơn.               */
/* Khoảng hở NGANG 28px cố ý rộng hơn hở dọc: thanh này có BỐN nhóm việc khác
   nhau (chọn mặt · tìm · lọc · đếm) nằm chung một hàng. Hở 18px cũ hẹp gần
   bằng hở giữa các chip trong cùng một nhóm, nên bốn nhóm dính thành một dãy
   nút liền — mắt không tách được đâu là ranh giới. */
.ev-tools{display:flex;align-items:center;gap:16px 28px;flex-wrap:wrap;padding-bottom:26px}

/* Ô tìm nở tới 34rem thay vì dừng ở 21rem: ở khổ rộng, phần thừa trước đây
   dồn hết vào khoảng trống trước số đếm ở mép phải, nên nửa trái chật cứng
   còn nửa phải bỏ không. Cho ô tìm ăn bớt chỗ thừa đó — nó cũng là ô người
   ta gõ vào, rộng thì đọc lại từ khoá vừa gõ dễ hơn. */
.ev-search{position:relative;display:flex;align-items:center;flex:1 1 20rem;max-width:34rem}
.ev-search .ic{position:absolute;left:15px;color:var(--gray-pale);pointer-events:none;margin:0}
.ev-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)}
.ev-search input::placeholder{color:var(--gray-pale)}
.ev-search input:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px var(--green-pale)}

.ev-filter{display:flex;gap:8px;flex-wrap:wrap}
.ev-filter 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)}
.ev-filter button:hover{border-color:var(--green);color:var(--green)}
.ev-filter button[aria-pressed="true"]{background:var(--green);border-color:var(--green);color:#fff}

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

/* ── Ô ẢNH CHỜ ────────────────────────────────────────────────────────────
   Chưa có ảnh thật (open item §14-10). Bốn mảng chuyển sắc DỰNG TỪ TOKEN,
   không đặt mã màu mới — khác với các màn cũ đang dán hex thẳng vào HTML.
   Chỉ mượn HAI sắc nhấn (cyan `--s2`, hồng `--s1`), đúng trần "một màn tối
   đa hai sắc" của §3; hai mảng còn lại đi bằng dải xanh nền tối.
   Lưới chấm phủ lên trên để ô ảnh đọc ra là CHỖ ĐẶT ẢNH chứ không phải một
   mảng màu trang trí.                                                      */
/* ── ẢNH THẬT TRONG Ô ẢNH ───────────────────────────────────────────────
   Mọi ô ảnh (thẻ sự kiện, ảnh bìa, lưới tổng kết, ô bản đồ) đều là một khối
   `position:relative` có sẵn tỉ lệ; ảnh chỉ việc phủ kín nó.
   ⚑ File trong `assets/img/` là ảnh VẼ tạm — xem `assets/img/README.txt`.
     Có ảnh thật thì ghi đè đúng tên file, KHÔNG phải sửa HTML.            */
.photo{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block}

/* ── Ô ẢNH KHÔNG CÓ ẢNH ─────────────────────────────────────────────────
   KH yêu cầu để lại một thẻ KHÔNG ảnh để xem thực tế ra sao. Nói thẳng là
   "chưa có ảnh" chứ không lấy mảng chuyển sắc giả làm ảnh: người vận hành
   nhìn danh sách phải phân biệt được thẻ đã có ảnh với thẻ ban tổ chức còn
   quên chưa tải lên. Mảng chuyển sắc đẹp quá thì không ai đi bổ sung ảnh. */
.no-img{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:9px;
  background:var(--round-2);color:var(--gray-pale);
  background-image:repeating-linear-gradient(135deg,rgba(102,117,141,.07) 0 10px,transparent 10px 20px)}
.no-img .ic{width:26px;height:26px}
.no-img span{font-size:12.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase}

.img-g1{background:linear-gradient(142deg,var(--green-sub),var(--dark-1))}
.img-g2{background:linear-gradient(142deg,var(--dark-5),var(--dark-1))}
.img-g3{background:linear-gradient(142deg,var(--s2),var(--dark-2))}
.img-g4{background:linear-gradient(142deg,var(--s1),var(--dark-3))}
.dot-img::after{content:'';position:absolute;inset:0;opacity:.42;
  background-image:radial-gradient(rgba(255,255,255,.3) 1px,transparent 1px);
  background-size:20px 20px}

/* ── KHỐI THÔNG TIN SỰ KIỆN — HAI TẦNG, KHÔNG PHẢI MỘT DANH SÁCH ─────────
   Bản trước đổ bảy dòng chữ dài bằng nhau, cùng cỡ, cùng màu, cùng một biểu
   tượng xanh. KH: *"chỗ này có phải quá nhiều thông tin text không"*. Đúng, và
   biểu tượng không cứu được — lỗi không nằm ở thiếu biểu tượng mà ở chỗ MỌI
   LOẠI THÔNG TIN ĐƯỢC CHO CÙNG MỘT TRỌNG SỐ. Bảy thứ ngang nhau thì không có
   thứ nào nổi, và mắt buộc phải đọc lần lượt từ trên xuống.

   Nay chia hai tầng theo đúng thứ người xem cần trước:

     TẦNG 1 — `.ev-facts`, hai DÒNG ĐẦY ĐỦ: ngày + giờ, và nơi chốn.
       Đây là hai câu hỏi ai cũng hỏi, và là hai thứ dài (có thứ, có ngày, có
       khoảng giờ, có địa chỉ) nên cần cả dòng. Ngày in đậm màu chữ chính.

     TẦNG 2 — `.ev-chip`, các VIÊN NGẮN xếp ngang: còn chỗ · vé · hạn · số
       hoạt động. Bốn thứ này đều là GIÁ TRỊ NGẮN, không phải câu — cho chúng
       mỗi thứ một dòng đầy là phí bốn dòng để nói bốn từ. Xếp thành viên thì
       bốn thứ nằm gọn trong một hai dòng, và vì viên có nền nên chúng đọc ra
       là THUỘC TÍNH chứ không phải lời kể.

   Kết quả: bảy dòng → hai dòng + một hàng viên. Riêng viên "còn chỗ" đổi màu
   theo §2D nên nó là thứ duy nhất có màu trong khối — mắt rơi vào đúng chỗ.

   ⚠️ ĐÃ BỎ KHỎI THẺ: "cần ban tổ chức duyệt" và "có khảo sát khi đăng ký".
     Hai thứ đó là ĐIỀU KIỆN LÚC ĐIỀN ĐƠN, không phải thứ dùng để quyết định
     có xem tiếp hay không — đọc ở màn chi tiết, ngay cạnh nút đăng ký, mới
     đúng lúc. Để trên thẻ thì chúng chiếm hai dòng dài nhất mà lại là hai
     dòng ít người cần nhất.
   ⚠️ Biểu tượng LUÔN đi kèm chữ, không bao giờ đứng một mình làm nghĩa. */
.ic{width:18px;height:18px;flex:0 0 18px;color:var(--green-sub);margin-top:1px}

.ev-st{margin-top:16px;padding:15px 0;
  border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.ev-facts{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
/* Trên THẺ, khối thông tin chỉ có ba dòng nên không cần lớp bọc riêng —
   kẻ chỉ đặt thẳng lên danh sách. Hộp tóm tắt màn chi tiết thì có thêm hàng
   viên bên dưới nên vẫn dùng `.ev-st` bọc cả hai. */
.ev-card .ev-facts{margin:16px 0 0;padding:15px 0;
  border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.ev-facts li{display:grid;grid-template-columns:18px minmax(0,1fr);gap:11px;align-items:start;
  font-size:14.5px;line-height:1.45;color:var(--gray)}
.ev-facts b{font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}

.ev-chip{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:7px}
.ev-chip li{display:inline-flex;align-items:center;gap:6px;min-height:28px;padding:3px 11px;
  border-radius:999px;background:var(--neutral-bg);color:var(--neutral);
  font-size:13px;font-weight:500;line-height:1.35;font-variant-numeric:tabular-nums}
.ev-chip .ic{width:15px;height:15px;flex:0 0 15px;color:currentColor;margin:0;opacity:.8}
/* Chỉ viên TRẠNG THÁI CHỖ có màu, theo §2D — nó là thứ duy nhất trả lời câu
   "còn kịp không". Cho cả hàng cùng có màu thì lại về đúng bệnh cũ: mọi thứ
   nổi như nhau nên không thứ nào nổi. Màu chỉ là lớp thứ hai, chữ vẫn nói đủ
   nghĩa nếu người xem không phân biệt được màu (WCAG 1.4.1). */
.ev-chip .st-ok{background:var(--ok-bg);color:var(--ok)}
.ev-chip .st-warn{background:var(--warn-bg);color:var(--warn)}
.ev-chip .st-err{background:var(--err-bg);color:var(--err)}
.ev-chip .st-ok,.ev-chip .st-warn,.ev-chip .st-err{font-weight:600}

/* ── LƯỚI THẺ SỰ KIỆN — MỌI SỰ KIỆN MỘT KIỂU THẺ ─────────────────────────
   Đường đi của màn này, ghi lại vì ba lần sai ba kiểu khác nhau:
     bản 1 — sáu thẻ trắng giống hệt, toàn chữ → "design quá xấu";
     bản 2 — chữa bằng kẻ chỉ và thang chữ chênh lớn, thêm một khối "sự kiện
             lớn" khác hẳn phần còn lại → vẫn TOÀN CHỮ, KH nói "khó nhìn quá";
     bản 3 — thêm ảnh bìa, nhưng vẫn giữ khối lớn → KH bác thẳng: "sao lại có
             1 sự kiện to đùng, át, style khác biệt so với toàn bộ sự kiện
             khác thế? không cần thiết thì đừng làm thế";
     bản 4 — MỌI SỰ KIỆN MỘT KIỂU THẺ, không có ngoại lệ nào.

   ★ BÀI HỌC, ghi để không lặp: ở một trang DANH SÁCH, phân cấp thị giác phải
     đến từ DỮ LIỆU (ngày gần hơn thì đứng trước, hết chỗ thì báo đỏ), không
     đến từ việc dựng riêng một hình dáng cho một mục. Một mục mặc áo khác cả
     danh sách thì người xem đọc ra là "chỗ này quảng cáo", và mọi mục còn lại
     tự nhiên bị đọc thành hạng hai — kể cả khi chúng vẫn đáng đi.
     Ngày hội 10/10 vẫn được phân biệt, nhưng bằng NỘI DUNG: một dòng "Ba hoạt
     động trong ngày" trong khối thông tin, và nút dẫn sang màn chi tiết để
     chọn hoạt động. Đủ để hiểu, không cần to hơn ai.

   ★ THỨ TỰ TRONG THẺ, theo đúng thứ tự người xem hỏi:
     ảnh (cái gì, ở đâu, có vẻ thế nào) → tên → KHỐI DỮ LIỆU có biểu tượng
     (hôm nào · ở đâu · còn chỗ không · mất tiền không) → mô tả → một nút.   */
.ev-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}

/* Mốc tháng: chiếm trọn một hàng lưới, chữ nhỏ in hoa + kẻ chỉ kéo hết bề
   ngang. Cố ý NHẠT hơn tên sự kiện — đây là biển chỉ đường, không phải nội
   dung; đọc đậm hơn thẻ thì nó cướp mất thứ tự đọc. */
.ev-list .ev-month{grid-column:1/-1;display:flex;align-items:center;gap:14px;
  font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--gray-pale)}
.ev-list .ev-month::after{content:'';flex:1;height:1px;background:var(--border)}

.ev-card{position:relative;display:flex;flex-direction:column;overflow:hidden}
/* ⚠️ Tỉ lệ ô ảnh là 16/10 (25/09, theo người dùng: "thumbnail ở grid sự kiện cho
   aspect-ratio 16/10 thay vì 21/9"). Lịch sử: 16/9 → 21/9 ngày 21/09 vì "thumbnail
   để hơi lớn" khi lưới còn BA cột (ảnh 242px trên thẻ 583px). Nay lưới BỐN cột,
   thẻ hẹp lại còn ~325px ở khổ 1440 nên 21/9 chỉ còn dải ảnh ~139px — mỏng quá,
   không nhận ra bối cảnh. 16/10 cho ~203px. Đừng quay lại 21/9 nếu chưa hỏi.
   Hai nhãn góc (hình thức · tình trạng chỗ) cao 30px đặt cách mép 14px, tổng 58px
   — còn thừa chỗ, không đè lên nhau. Ảnh vẽ trong `assets/img/` là khung 16:9 nên
   `object-fit:cover` cắt bớt mỗi mép ngang ~5%; chủ thể của các file này đều nằm
   giữa khung nên cắt không mất nghĩa. Có ảnh thật thì kiểm lại đúng chỗ này.   */
.ev-img{position:relative;aspect-ratio:16/10;flex:0 0 auto;overflow:hidden;
  background:var(--round-2)}
/* Nhãn hình thức góc trên trái, đúng chỗ thẻ EBMS đặt "Offline". Không bắt
   chuột: nó chỉ để nhìn, còn cả thẻ là một liên kết — bắt chuột thì rê vào
   đúng góc đó lại không bấm được. */
/* ── NHÃN TÌNH TRẠNG CHỖ — LUÔN CÓ trên mọi thẻ ─────────────────────────
   Bản trước chỉ hiện nhãn khi có gì phải vội, còn lại để trống. KH: *"còn chỗ
   thì hiển thị như thế nào, tôi nghĩ nên đồng nhất, hoặc đưa rule hiển thị
   cho đồng nhất"*. Đúng — chỗ trống lúc có lúc không thì đọc ra là LỖI chứ
   không ra quyết định, và người xem không có cách nào đoán được luật.

   LUẬT, một dòng: **nhãn LUÔN có, và luôn nói về CHỖ.**
     còn nhiều      "Còn 42 chỗ"          ok        xanh
     sắp hết        "Còn 8 chỗ"           cảnh báo  vàng   (≤ 20% hoặc ≤ 5)
     hết            "Hết chỗ"             lỗi       đỏ
     không giới hạn "Không giới hạn chỗ"  trung tính xám
     đã qua         "31 người đã dự"      trung tính xám

   Việc phân biệt gấp hay không gấp do MÀU lo, không do có mặt hay vắng mặt.
   Cách này vừa đồng nhất vừa giữ được sức cảnh báo: mắt bắt màu trước khi
   đọc chữ, nên vàng và đỏ vẫn nhảy ra khỏi một trang toàn xanh và xám.

   Vì sao nằm trên ảnh chứ không trong khối chữ: khối chữ nhờ đó LUÔN đúng ba
   dòng, mọi thẻ cao bằng nhau, và tình trạng chỗ thì thấy được từ xa mà không
   phải đọc.
   ⚑ HẠN ĐĂNG KÝ không dùng chỗ này: một ô chỉ được mang MỘT nghĩa. Hạn đăng
     ký nằm ở màn chi tiết, ngay trên bảng chọn hoạt động.                   */
.ev-img .ev-scene{position:absolute;right:14px;top:14px;z-index:2;pointer-events:none}

.ev-format{position:absolute;left:14px;top:14px;z-index:2;pointer-events:none;
  display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 13px;
  border-radius:999px;background:rgba(11,18,32,.74);color:#fff;
  font-size:12.5px;font-weight:500;line-height:1}
.ev-format .ic{width:15px;height:15px;flex:0 0 15px;color:#fff;margin:0}

.ev-card .body{padding:18px 20px 20px;display:flex;flex-direction:column;flex:1}
/* ⚠️ `min-height` HAI DÒNG, không phải chỉ line-clamp. Tên sự kiện dài ngắn
   khác nhau: thẻ một dòng thì hàng ngày/nơi/vé của nó tụt LÊN cao hơn thẻ hai
   dòng bên cạnh, cả dải đọc ra là so le dù thẻ cao bằng nhau. Khoá sàn hai
   dòng thì bốn tầng thông tin của mọi thẻ nằm cùng một đường ngang. */
.ev-card h3{font-size:18.5px;line-height:1.36;letter-spacing:-.022em;font-weight:700;
  min-height:calc(2 * 1.36em);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* Cả thẻ là một liên kết, phủ bằng ::after trên tiêu đề. Bắt buộc gỡ gạch
   chân cho lớp thẻ này — `_common.css` chỉ đặt `a{color:inherit}` nên không
   gỡ thì gạch chân chạy khắp khối (bẫy đã ghi ở CLAUDE.md §8). */
.ev-card h3 a{color:var(--ink);text-decoration:none;
  transition:color var(--dur-btn) var(--ease-btn)}
.ev-card h3 a::after{content:'';position:absolute;inset:0;z-index:1}
.ev-card:hover h3 a{color:var(--green)}
.ev-card .muted{margin-top:16px;font-size:14.5px;line-height:1.6;color:var(--gray);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* ── CHÂN THẺ: HAI NÚT ──────────────────────────────────────────────────
   Nút CHÍNH đổi theo trạng thái (Đăng ký tham dự · Chọn hoạt động · Đã hết
   chỗ · Xem bài tổng kết), nút PHỤ luôn là "Xem chi tiết".

   Vì sao hai chứ không một: một nút "Xem chi tiết" cho mọi thẻ thì an toàn
   nhưng bắt người đã quyết định phải đi thêm một chặng; còn một nút "Đăng ký"
   duy nhất thì với thẻ hết chỗ hoặc thẻ chuỗi lại nói sai. Hai nút giải được
   cả hai: việc CHÍNH của từng ca nằm ở nút chính, còn lối đọc thêm thì luôn
   có sẵn và luôn ở cùng một chỗ.
   Nhờ có nút phụ mà nút "Đã hết chỗ" được phép vô hiệu — nó không còn là ngõ
   cụt, người ta vẫn còn đường vào đọc chương trình hoặc hỏi ban tổ chức.

   Hai nút chia đôi đều bề ngang. Dưới 559px xếp dọc: ở khổ 390 mỗi nút chỉ
   còn ~150px, chữ "Đăng ký tham dự" vỡ dòng mà nút thì khoá cao 40px.       */
.ev-card .actions{position:relative;z-index:2;margin-top:auto;padding:0 20px 20px;
  display:flex;gap:10px}
.ev-card .actions .btn{flex:1 1 0;min-width:0;padding-inline:12px}

/* Sự kiện đã qua: ảnh xám đi. Cả danh sách nhìn một cái là biết phần nào còn
   đi được, phần nào chỉ để đọc lại. Không làm mờ phần chữ — bài tổng kết và
   ảnh vẫn là nội dung đáng đọc. */
.ev-card--past .ev-img{filter:grayscale(1);opacity:.6}


/* ══════════════════════════════════════════════════════════════════════════
   MÀN CHI TIẾT SỰ KIỆN — BẢN 2, dựng lại 16/09/2026

   ⚠️ BẢN 1 BỊ BÁC: *"design xấu tệ, quá nhiều text, layout không cân đối"*.
      Ba bệnh, đều nằm ở BỐ CỤC chứ không ở chi tiết:

      ① MẤT CÂN VÌ CỘT PHẢI NGẮN. Bản 1 chia hai cột 1fr / 22rem, cột phải là
         hộp tóm tắt chỉ cao ~600px trong khi cột trái dài hơn 2000px. Từ
         khoảng hai phần ba trang trở xuống, nửa phải màn hình TRỐNG TRƠN.
         Đó chính là "layout không cân đối", và không có cách nào chữa bằng
         cách nhồi thêm vào cột phải — thứ đáng nhồi thì đã ở cột trái rồi.
         → Nay MỘT CỘT, mỗi mục chiếm hết bề ngang khung. Không còn nửa màn
           bỏ trống, và mỗi mục được cắt theo hình dáng riêng của nó.

      ② QUÁ NHIỀU CHỮ vì mỗi hoạt động là một đoạn văn xếp dọc. Ba đoạn văn
         nối nhau thì phải đọc hết mới biết trong ngày có gì.
         → Nay chương trình là BA CỘT NGANG = ba buổi. Nhìn một cái thấy cả
           ngày, không phải đọc.

      ③ HAI CHỖ ĐĂNG KÝ. Nút đăng ký vừa nằm trong từng hoạt động, vừa có nút
         "Chọn hoạt động" ở hộp bên phải — hai lối cho cùng một việc.
         → Nay tách hẳn: phần CHƯƠNG TRÌNH chỉ để ĐỌC, phần CÁCH THAM GIA chỉ
           để LÀM. Một chỗ đọc, một chỗ bấm.

   ★ THỨ TỰ MỤC, theo đúng thứ tự người xem hỏi:
       ảnh bìa → thanh dữ kiện (hôm nào · giờ · ở đâu · còn chỗ)
       → về sự kiện (ngắn) → chương trình trong ngày → cách tham gia
       → tài trợ và đồng hành → địa điểm
   ══════════════════════════════════════════════════════════════════════════ */
.det{display:block}
/* Ảnh bìa dạng DẢI NGANG có trần chiều cao: ô 16:9 ở bề ngang cả khung thì
   cao hơn 800px, chưa có ảnh thật mà chiếm ngần ấy là nuốt cả màn hình. */
/* ⚠️ KHÔNG dùng `aspect-ratio` kèm `max-height`: gặp trần chiều cao thì trình
   duyệt giữ tỉ lệ bằng cách THU BỀ NGANG lại, nên ảnh co thành một khối hẹp
   nằm lệch bên trái thay vì trải hết khung. Khoá thẳng chiều cao. */
/* 380px ở khổ 1440 là quá cao khi ô ảnh vẫn là mảng chuyển sắc: nửa màn đầu
   thành một mảng xanh trống. Hạ trần xuống 320 và cộng thêm 52px thanh dữ
   kiện gác lên là vừa một màn ảnh 13 inch. */
.det-img{position:relative;width:100%;height:clamp(200px,22vw,320px);
  border-radius:var(--r-card);overflow:hidden}

/* ── BỐ CỤC HAI CỘT CÓ CỘT PHẢI DÍNH ────────────────────────────────────
   ⚠️ ĐỌC KỸ TRƯỚC KHI ĐỔI. Bản đầu của màn này ĐÃ dùng hai cột và bị bác:
     *"layout không cân đối"* — cột phải cao ~600px, cột trái dài hơn 2000px,
     nên hai phần ba trang dưới bỏ trống nửa phải.
   Bản đó sai ở CÁCH DÙNG, không phải ở hai cột. Hai thứ chữa nó:
     ① `position:sticky` — cột phải ĐI THEO người đọc, nên không còn khoảng
        trống nào bị bỏ lại phía sau. Khối đăng ký luôn trong tầm mắt, cuộn
        tới đâu cũng bấm được, không phải cuộn ngược lên;
     ② nội dung cột phải KHÁC hẳn cột trái, không phải bản tóm tắt của nó.
        Cột trái = chương trình để ĐỌC và TÍCH. Cột phải = giỏ đã chọn +
        tổng tiền + nút. Đây là lý do bản cũ hỏng: hộp bên phải khi đó chép
        lại danh sách ba hoạt động, thành tả một thứ hai lần.
   ⚠️ `top` của cột dính phải trừ chiều cao thanh điều hướng dính (64px) cộng
   một khe thở, nếu không thẻ chui xuống dưới thanh.                        */
.det-grid{margin-top:26px;display:grid;grid-template-columns:minmax(0,1fr) 26rem;
  gap:40px;align-items:start}
.det-right{position:sticky;top:108px;display:flex;flex-direction:column;gap:16px;
  /* ── VỪA CHIỀU CAO MÀN (21/09) ────────────────────────────────────────
     Cột này cao 1258px. Khổ HD khung nhìn chỉ 672px, mà cột lại DÍNH ở
     top:84 — nên "Lưu ý khi tham dự" và "Tài liệu" nằm dưới mép màn gần
     như suốt bài: cuộn xuống thì cột vẫn ghim nguyên chỗ, tới cuối bài
     mới nhô lên. Trần chiều cao + cuộn trong cột giữ được cả hai việc:
     nút Đăng ký vẫn theo chân người đọc, phần dưới vẫn tới được.
     Thanh cuộn mảnh và chỉ hiện khi thiếu chỗ (auto) — màn cao thì không
     thấy gì khác trước. Đệm ngang 4px bù bằng margin âm: thẻ con có bóng
     đổ, không chừa chỗ thì khung cuộn xén mất vành bóng hai bên.        */
  max-height:calc(100svh - 100px);overflow-y:auto;overscroll-behavior:contain;
  padding-inline:4px;margin-inline:-4px;scrollbar-width:thin}
/* ⚠️ Cột này là khung flex: có trần chiều cao thì thẻ con BỊ CO trước khi
   khung sinh thanh cuộn (flex-shrink mặc định 1). Thẻ có overflow:hidden co
   gần về 0 mà không báo lỗi gì — đã dính đúng thế với khối "Đăng ký tham dự"
   (536px → 3px). Khoá co, để phần thừa thành chỗ cuộn. */
.det-right>*{flex:0 0 auto}
/* Sự kiện đã qua: khối đăng ký ẩn, cột phải chỉ còn thẻ số liệu — vẫn dính. */

/* ── KHỐI ĐĂNG KÝ (cột phải) ────────────────────────────────────────────
   RÀ LẠI XEM CỘT NÀY CẦN GÌ. Người mở trang chi tiết sự kiện hỏi đúng sáu
   câu, theo thứ tự, và cột phải phải trả lời đủ sáu:
     ① Còn kịp không?      → vạch chỗ + số ngày còn nhận đăng ký
     ② Tôi đang đăng ký gì? → danh sách hoạt động đã tích
     ③ Hết bao nhiêu tiền?  → tổng cộng
     ④ Giờ làm gì?          → MỘT nút chính
     ⑤ Bấm xong thì sao?    → cần duyệt, xác nhận qua email
     ⑥ Hỏi ai nếu có việc?  → liên hệ ban tổ chức
   Ba câu đầu bản trước có, ba câu sau THIẾU. ⑥ là chỗ thiếu đáng kể nhất:
   EBMS có sẵn trường "Liên hệ hỏi đáp" mà trang không hiện ở đâu cả.
   Thêm hai việc người dự sự kiện thật sự hay làm: LƯU VÀO LỊCH (sự kiện có
   ngày giờ cố định, không lưu là quên) và CHIA SẺ (đây là sự kiện cộng đồng,
   người ta rủ nhau đi). Hai việc đó không đủ quan trọng để làm nút lớn —
   xếp thành một hàng ba việc phụ dưới đường kẻ.
   ⚠️ Cột nới từ 23rem lên 26rem: ở 23rem tên hoạt động dài như "Giải
   Pickleball" cộng cột giá đã phải vỡ dòng.                               */
/* ⚠️ LÀM NỔI BẬT TRONG GIỚI HẠN NÀO. Cách dễ nhất — cho đầu thẻ một mảng
   tối — là SAI luật: §4 "các trang trong không có mảng tối nào ngoài chân
   trang". Cách dễ thứ hai — quầng sáng sau nút — cũng sai: §5 KH nhạy loá.
   Còn lại bốn thứ hợp lệ, dùng cả bốn:
     ① VIỀN TRÊN 3px màu `--green` — một nét nhấn, không phải mảng màu;
     ② nền đầu thẻ đậm thêm một bậc (`--round-1` thay `--round-2`);
     ③ bóng sâu hơn và bo góc lớn hơn — đây là lớp NỔI thật (thẻ dính đi
        theo người đọc), bóng ở đây có nghĩa chứ không phải trang trí;
     ④ viền `--text-faint` thay `--border`: đậm hơn nửa bậc, đủ để thẻ tách khỏi
        nền trang mà vẫn không thành khung đen.
   Bốn thứ cộng lại đủ để đây đọc ra là CHỖ ĐỂ LÀM VIỆC của cả trang.      */
.det-book{overflow:hidden;background:var(--white);
  border:1px solid var(--text-faint);border-top:3px solid var(--green);
  border-radius:18px;
  box-shadow:0 18px 44px rgba(11,18,32,.13)}
/* Đầu thẻ có nền riêng: tách phần "tình hình chỗ" khỏi phần "bạn chọn gì",
   hai thứ khác loại. */
.det-book .stick{padding:20px 22px 18px;background:var(--round-1);
  border-bottom:1px solid var(--text-faint)}
.det-book h2{font-size:19px;line-height:1.25;letter-spacing:-.024em;font-weight:700}
.det-book .slot{margin-top:12px;display:flex;align-items:baseline;justify-content:space-between;
  gap:10px;font-size:14px;color:var(--gray)}
.det-book .slot b{font-size:15px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
/* VẠCH CHỖ — trả lời "còn kịp không" bằng HÌNH, đọc nhanh hơn đọc số.
   ⚠️ Vạch KHÔNG đứng một mình: con số ngay trên nó vẫn nói đủ nghĩa
   (WCAG 1.4.1 — màu và hình không bao giờ là dấu hiệu duy nhất). */
/* ⚠️ `display:block` bắt buộc: thẻ này là <span>, mà thẻ inline thì BỎ QUA
   `height` — vạch dựng xong không hiện, im lặng không báo lỗi gì. */
.det-book .rule{display:block;margin-top:9px;height:7px;border-radius:999px;
  overflow:hidden;background:var(--text-faint)}
.det-book .rule i{display:block;height:100%;border-radius:999px;background:var(--green)}
.det-book .due{margin-top:12px;display:flex;align-items:center;gap:8px;
  font-size:13.5px;color:var(--gray)}
.det-book .due .ic{width:16px;height:16px;flex:0 0 16px;color:var(--gray-pale)}

.det-book .inner{padding:18px 22px 22px}
/* Giỏ đã chọn. ⚠️ Dòng rỗng phải THOÁT khỏi lưới hai cột của `li`, nếu không
   chữ trong <b> bị đẩy sang cột giá và câu vỡ làm ba mảnh. */
.det-book .time{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.det-book .time li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;
  align-items:baseline;font-size:14.5px;line-height:1.45;color:var(--ink)}
.det-book .time .money{font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.det-book .time li.vacant{display:block;font-size:14px;line-height:1.6;color:var(--gray)}
.det-book .time li.vacant b{font-weight:600;color:var(--ink)}
.det-book .total{margin-top:16px;padding-top:15px;border-top:1px solid var(--border);
  display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.det-book .total span{font-size:14.5px;color:var(--gray)}
.det-book .total b{font-size:23px;font-weight:700;letter-spacing:-.028em;
  font-variant-numeric:tabular-nums;color:var(--ink)}
.det-book .blue{margin-top:16px;display:flex;flex-direction:column;gap:9px}
.det-book .blue .btn{width:100%;justify-content:center}
.det-book .condition{list-style:none;margin:16px 0 0;padding:0;
  display:flex;flex-direction:column;gap:9px}
.det-book .condition li{display:grid;grid-template-columns:16px minmax(0,1fr);gap:9px;
  align-items:start;font-size:13.5px;line-height:1.5;color:var(--gray)}
.det-book .condition .ic{width:16px;height:16px;flex:0 0 16px;color:var(--gray-pale);margin-top:1px}
/* ⚠️ MỘT lối ra, không phải ba. Bản trước chia đều ba ô (lưu lịch · chia sẻ ·
   hỏi) — hai trong ba không đọc được từ trường nào của EBMS nên đã bỏ; xem
   chú thích trong HTML. Còn một thì để một hàng ngang bình thường, đừng giữ
   lưới ba cột rồi để trống hai ô. */
.det-book .task{margin-top:18px;padding-top:15px;border-top:1px solid var(--border)}
.det-book .task a{display:inline-flex;align-items:center;gap:9px;
  font-size:14px;font-weight:600;color:var(--green-dark);text-decoration:none;
  transition:color var(--dur-btn) var(--ease-btn)}
.det-book .task a:hover{color:var(--green)}
.det-book .task .ic{width:18px;height:18px;flex:0 0 18px}

/* Thẻ số liệu của cột phải khi sự kiện ĐÃ QUA — thay chỗ khối đăng ký. */
.det-num{padding:22px;background:var(--white);
  border:1px solid var(--border);border-radius:var(--r-card);
  box-shadow:0 12px 34px rgba(11,18,32,.09)}
.det-num h2{font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--green-dark)}
.det-num ul{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-direction:column;gap:16px}
.det-num li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:baseline}
.det-num .num{font-size:28px;font-weight:700;letter-spacing:-.03em;color:var(--green);
  font-variant-numeric:tabular-nums}
.det-num .bnk{font-size:14px;line-height:1.45;color:var(--gray)}

/* ── VỀ SỰ KIỆN — văn xuôi, KHÔNG phải một khối chữ chạy hết bề ngang ────
   ⚠️ Bản trước BỎ HẲN mục mô tả vì nó nhắc lại chương trình. Bỏ hẳn là sai:
     màn chi tiết sự kiện thì BẮT BUỘC có chỗ cho mô tả — EBMS có sẵn trường
     "Mô tả" tới 8000 ký tự, không có chỗ hiện thì trường đó vứt đi. Việc đúng
     là làm cho mô tả KHÔNG nhắc lại chương trình, chứ không phải xoá nó.
   Bản trước lại chia mục này làm hai cột để lấp chỗ trống bên phải. Nay cả
   TRANG đã có cột phải rồi, nên mục này chỉ còn một cột — và "Lưu ý khi tham
   dự" dọn sang cột phải, đúng chỗ của nó: cạnh khối đăng ký, là thứ người ta
   đọc ngay trước khi bấm. Phông bài viết (Noto Serif) tách hẳn văn xuôi khỏi
   phần giao diện.

   ⚠️ KHÔNG ĐẶT LẠI `max-width` Ở ĐÂY. Bản trước khoá 72ch; trong cột trái
   rộng ~1200px thì chữ dừng ở khoảng nửa cột rồi bỏ trắng phần còn lại — KH
   khoanh đỏ đúng chỗ đó: *"viết full body đi, đừng wrap ngắn thế"*. Cột phải
   đã ăn hết phần bên kia rồi, nên ở đây không còn lý do gì để khoá thêm.
   Đây là NGOẠI LỆ CÓ CHỦ Ý so với §3B của bộ chuẩn (thân bài 60–75 ký tự):
   luật đó viết cho khung bài một cột rộng ~680px, còn đây là mô tả ngắn ba
   đoạn trong bố cục hai cột. Bù lại bằng hai thứ để dòng dài vẫn bám được:
   giãn dòng nới 1.85 → 1.95, và `text-wrap:pretty` để không rơi chữ mồ côi.
   Muốn đổi thì đổi cả hai vế cùng lúc, đừng khoá lại bề rộng một mình.     */
.det-about{margin-top:24px;font-family:var(--font-article);
  font-size:17px;line-height:1.95;color:var(--gray);text-wrap:pretty}
.det-about p+p{margin-top:16px}
.det-save{padding:24px 26px 26px;background:var(--round-2);border-radius:var(--r-card)}
.det-save h3{font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--green-dark)}
.det-save ul{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-direction:column;gap:12px}
.det-save li{position:relative;padding-left:20px;font-size:14.5px;line-height:1.6;color:var(--ink)}
.det-save li::before{content:'';position:absolute;left:0;top:9px;width:6px;height:6px;
  border-radius:50%;background:var(--green)}

/* ── ĐỊA ĐIỂM — hai cột có ô bản đồ ─────────────────────────────────────
   Bản trước là một hàng mỏng: địa chỉ bên trái, nút bên phải, cao 90px. Mục
   cuối trang mà mỏng như vậy thì trang kết thúc bằng một tiếng hụt. Ô bản đồ
   vừa cho mục này sức nặng vừa là thứ người ta thật sự cần trước khi đi.    */
.det-dd{margin-top:24px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
  gap:0;align-items:stretch;overflow:hidden;
  background:var(--white);border:1px solid var(--border);border-radius:var(--r-card)}
.det-dd .place{padding:28px 30px;display:flex;flex-direction:column;gap:10px}
.det-dd .name{font-size:20px;font-weight:700;letter-spacing:-.022em}
.det-dd .address{font-size:15px;line-height:1.66;color:var(--gray)}
.det-dd .btn{margin-top:auto;align-self:flex-start}
.det-dd .map{position:relative;min-height:220px}


/* Tiêu đề mục = KẺ CHỈ ĐẬM RỒI MỚI TỚI CHỮ, cùng ngôn ngữ với màn danh sách. */
.det-topic{margin-top:56px;padding-top:24px;border-top:2px solid var(--ink);
  font-size:clamp(22px,2.2vw,28px);line-height:1.2;letter-spacing:-.03em;font-weight:700}
/* ⚠️ 62ch là trần QUÁ CHẶT cho tiếng Việt: một câu 80 ký tự đã vỡ hai dòng
   ngay giữa khung 1400px, nửa phải bỏ trống — đọc ra là hụt chứ không ra
   khoảng thở. Nới lên 86ch (vẫn dưới trần ~90 ký tự của §3) VÀ câu dẫn phải
   viết đủ ngắn để nằm gọn MỘT dòng. Hai vế phải làm cùng nhau. */
.det-topic+.hint-item{margin-top:10px;font-size:16px;line-height:1.7;color:var(--gray);
  max-width:86ch;text-wrap:pretty}

/* ── CHƯƠNG TRÌNH = TRỤC THỜI GIAN DỌC ──────────────────────────────────
   RÀ LẠI XEM MỘT BUỔI CẦN HIỆN GÌ. Người đang cân nhắc dự buổi nào hỏi:
     · mấy giờ, kéo dài bao lâu   → băng giờ bên trái, giờ bắt đầu cỡ lớn
     · buổi này LÀ GÌ              → tên + một câu mô tả
     · ở đâu TRONG khu vực đó      → sân sau hay hội trường hay sảnh tiệc.
       ⚠️ Đây là thứ bản trước THIẾU. Địa chỉ chung có ở cuối trang rồi,
       nhưng người đi cả ngày cần biết chuyển từ khu nào sang khu nào.
     · có phải chuẩn bị gì không   → khảo sát khi đăng ký, trang phục.
       Bản trước nhét hết vào hộp "Lưu ý" chung, nên đọc buổi sáng không
       biết là đơn của nó có phần khảo sát.
     · bao nhiêu tiền, còn chỗ không → cột phải của khối
     · tích hay không               → ô tích, cùng cột phải
   Ba tầng chữ cũ (tên · mô tả · giá) nay thành BỐN: thêm hàng viên thông
   tin. Không dài thêm bao nhiêu vì viên xếp ngang, mà trả lời thêm hai câu.

   Đường đi của mục này, ghi lại vì mỗi bản sai một kiểu:
     A — ba cột chỉ để ĐỌC + ba thẻ riêng để ĐĂNG KÝ → tả hai lần.
     B — một BẢNG dòng ngang → hết trùng lặp, nhưng thành ba hàng chữ dài.
     C — ba KHỐI cạnh nhau, băng giờ trên đầu.
     D — xếp DỌC, băng giờ sang mép trái (vì trang nay có cột phải, cột trái
         chỉ còn ~900px, ba khối cạnh nhau thì mỗi khối ~290px).
   Xếp dọc mà vẫn đọc ra timeline là nhờ băng giờ nằm thành MỘT CỘT THẲNG
   HÀNG ở mép trái — ba mảng xanh xếp dọc chính là cái trục thời gian.
   Cả khối là <label> nên bấm đâu cũng tích được.
   ⚠️ KHÔNG đặt <h3> trong <label> — lồng thẻ sai. Dùng <span class="ten">. */
.det-slotp{margin-top:22px;display:flex;flex-direction:column;gap:14px}
.det-actions{position:relative;display:grid;
  grid-template-columns:10.5rem minmax(0,1fr) 11.5rem;
  align-items:stretch;overflow:hidden;cursor:pointer;
  background:var(--white);border:1px solid var(--border);border-radius:var(--r-card);
  transition:border-color var(--dur-btn) var(--ease-btn),
             box-shadow var(--dur-btn) var(--ease-btn),
             transform var(--dur-btn) var(--ease-btn)}
.det-actions:hover{border-color:var(--border-field);transform:translateY(-2px);
  box-shadow:0 10px 26px rgba(11,18,32,.08)}
.det-actions:has(input:checked){border-color:var(--green);box-shadow:0 0 0 1px var(--green)}
.det-actions:focus-within{outline:2px solid var(--green);outline-offset:2px}
/* Dải hoạt động CHỈ ĐỂ ĐỌC (sự kiện một hoạt động, 20/09): không có cột thứ
   ba nên khai lại grid hai cột — để nguyên ba cột thì cột rỗng vẫn ăn 11.5rem.
   Phần con trỏ và hover ở khối "MAPPING VỚI TRÌNH BIÊN TẬP" cuối file. */
.det-actions--view{grid-template-columns:10.5rem minmax(0,1fr)}

/* Băng giờ: chuyển sắc trong dải xanh của bộ chuẩn, giờ BẮT ĐẦU cỡ lớn vì
   đó là mốc người ta nhớ; giờ kết thúc nhỏ hơn một bậc, nằm dưới. */
.det-actions .table{display:flex;flex-direction:column;justify-content:center;
  padding:20px 22px;color:#fff;
  background:linear-gradient(150deg,var(--green-sub) 0%,var(--green) 55%,var(--green-dark) 100%)}
.det-actions .slotp{display:block;font-size:10.5px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--text-faint)}
.det-actions .time{display:block;margin-top:6px;font-size:26px;font-weight:700;
  letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1}
.det-actions .out{display:block;margin-top:5px;font-size:13px;font-weight:500;
  color:var(--text-faint);font-variant-numeric:tabular-nums}

.det-actions .body{display:flex;flex-direction:column;justify-content:center;
  padding:20px 24px;gap:9px}
.det-actions .name{display:block;font-size:20px;line-height:1.28;letter-spacing:-.026em;
  font-weight:700;color:var(--ink)}
.det-actions .muted{display:block;font-size:14.5px;line-height:1.6;color:var(--gray)}
/* Hàng viên thông tin: nơi chốn trong khuôn viên + việc phải chuẩn bị.
   Viên chứ không phải dòng — chúng là GIÁ TRỊ NGẮN, cho mỗi thứ một dòng
   đầy là phí cả dòng để nói ba chữ. */
.det-actions .border{display:flex;flex-wrap:wrap;gap:7px 8px;margin-top:2px}
.det-actions .border span{display:inline-flex;align-items:center;gap:6px;
  padding:5px 11px;border-radius:999px;font-size:12.5px;font-weight:500;
  color:var(--gray);background:var(--bird);border:1px solid var(--border)}
.det-actions .border .ic{width:14px;height:14px;flex:0 0 14px;color:var(--gray-pale)}

/* Cột phải của khối: giá lớn, tình trạng chỗ, rồi ô tích. Gom ba thứ "quyết
   định" vào một cột thì mắt quét dọc một lần là so được cả ba buổi. */
.det-actions .sel{display:flex;flex-direction:column;align-items:flex-start;
  justify-content:center;gap:9px;padding:20px;
  border-left:1px solid var(--border);background:var(--bird)}
.det-actions .money{font-size:17px;font-weight:700;letter-spacing:-.02em;color:var(--ink);
  font-variant-numeric:tabular-nums}
.det-actions .tick{display:flex;align-items:center;gap:10px;margin-top:2px;
  font-size:14px;font-weight:600;color:var(--green-dark)}
.det-actions input{width:21px;height:21px;margin:0;accent-color:var(--green);flex:0 0 21px}
.det-actions:has(input:checked) .sel{background:var(--green-pale)}

/* ── TỔNG KẾT SAU SỰ KIỆN ────────────────────────────────────────────────
   Biên bản: "bài tổng kết sự kiện cần gallery linh hoạt"; KH nhắc lại:
   *"với sự kiện đã qua phải có chỗ hiển thị ảnh, video, kết quả"*.
   Ba phần, đúng thứ tự người ta muốn xem lại:
     ① KẾT QUẢ — con số, vì đó là thứ nói được ngay buổi đó ra sao
     ② ẢNH     — lưới KHẢM: ô đầu chiếm 2×2, các ô sau nhỏ dần. Lưới đều nhau
                 thì mọi khoảnh khắc ngang giá; khảm thì có ảnh chính, có ảnh
                 phụ, đọc ra là một bài chứ không phải một thư mục.
     ③ VIDEO   — một ô 16:9 có nút phát ở giữa
   ⚑ Biên bản nói người viết bài được CHỌN BỐ CỤC trình bày. Lưới khảm này là
     một phương án; màn soạn bài (chưa dựng) cần cho chọn ít nhất hai kiểu.  */
/* ⚠️ Ba ô số kết quả đã CHUYỂN sang cột phải (`.det-num`) khi màn đổi sang bố
   cục hai cột: cột phải lúc sự kiện đã qua thì trống chỗ khối đăng ký, mà số
   liệu là thứ đáng dính theo mắt trong suốt lúc xem ảnh. `.tk-kq` vì vậy
   không còn ai dùng — đã gỡ, đừng dựng lại ở cột trái. */

/* ⚠️ BA cột, không phải bốn. Cột trái nay chỉ còn ~950px; bốn cột thì mỗi ô
   rộng ~225px, nhỏ hơn cả ảnh thẻ ở màn danh sách.
   ⚠️ SỐ Ô PHẢI LẤP KÍN LƯỚI: với ô đầu chiếm 2×2 thì lưới 3 cột cần ĐÚNG
   6 ô (hàng 1: ô1+ô2 · hàng 2: ô1+ô3 · hàng 3: ô4 ô5 ô6). Bảy ô là hở một
   góc — nhìn ra là thiếu ảnh chứ không ra bố cục. */
.acct-img{margin-top:22px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  grid-auto-rows:148px;gap:12px}
.acct-img>div{position:relative;border-radius:var(--r-inner);overflow:hidden}
.acct-img>div:first-child{grid-column:span 2;grid-row:span 2}
.acct-add{margin-top:14px;font-size:15px;font-weight:600}
.acct-add a{color:var(--green-dark)}

.acct-video{margin-top:22px;position:relative;width:100%;height:clamp(200px,34vw,460px);
  border-radius:var(--r-card);overflow:hidden;display:grid;place-items:center}
.acct-video .play{position:relative;z-index:2;display:flex;flex-direction:column;
  align-items:center;gap:10px;color:#fff}
.acct-video .play svg{width:60px;height:60px}
.acct-video .play span{font-size:14.5px;font-weight:500}

/* ── TÀI TRỢ VÀ ĐỒNG HÀNH — khối MỜI GỌI, không phải khối thông báo ──────
   KH nói rõ buổi chiều "cần có chức năng mời gọi nhà tài trợ", và đơn tài trợ
   có HAI CHIỀU: tài trợ cho hạng mục nào × bằng hình thức nào. Dựng đúng hai
   chiều đó thì doanh nghiệp đọc là thấy ngay chỗ của mình — người bán quà
   tặng nhận ra mình ở ô "vật phẩm cho hoạt động", người có vật phẩm quý nhận
   ra mình ở ô "vật phẩm đấu giá".
   Bốn ô ngăn bằng khe 1px trên nền `--border`, nền ô `--bird` — cùng thủ pháp
   với băng giờ ở chương trình, nên hai mục đọc ra là cùng một hệ.          */
.det-aid{margin-top:26px;padding:28px;background:var(--white);
  border:1px solid var(--border);border-radius:var(--r-card)}
/* ⚠️ HAI cột, không phải bốn. Khối tài trợ nay nằm trong cột trái rộng
   ~950px; bốn ô cạnh nhau thì mỗi ô ~230px, tiêu đề "Vật phẩm cho hoạt
   động" đã vỡ hai dòng còn ô bên cạnh chỉ một — hàng đọc ra là so le. */
.det-aid-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;
  background:var(--border);border:1px solid var(--border);border-radius:var(--r-inner);
  overflow:hidden}
.det-aid-grid>div{background:var(--bird);padding:18px 20px 20px}
.det-aid-grid h3{font-size:16px;line-height:1.35;letter-spacing:-.018em;font-weight:700}
.det-aid-grid p{margin-top:8px;font-size:14px;line-height:1.58;color:var(--gray)}
.det-aid .row-item{margin-top:22px;display:flex;align-items:center;gap:10px 14px;flex-wrap:wrap;
  font-size:14.5px;color:var(--gray)}
.det-aid .row-item b{font-weight:600;color:var(--ink)}
.det-aid .bottom{margin-top:24px;display:flex;align-items:center;gap:14px 22px;flex-wrap:wrap}
.det-aid .bottom .add{font-size:14px;line-height:1.55;color:var(--gray-pale);max-width:46ch}

/* ── ĐIỀU KIỆN ĐĂNG KÝ ──────────────────────────────────────────────────
   Đặt NGAY TRƯỚC phần cách tham gia, không phải trên thẻ ở màn danh sách:
   đây là lời dặn trước khi điền đơn, đọc đúng lúc sắp bấm mới có tác dụng. */
.det-condition{margin-top:18px;display:flex;flex-wrap:wrap;gap:8px 22px}
.det-condition li{display:grid;grid-template-columns:16px minmax(0,1fr);gap:9px;align-items:start;
  font-size:13.5px;line-height:1.5;color:var(--gray-pale)}
.det-condition .ic{width:16px;height:16px;flex:0 0 16px;color:var(--gray-pale);margin-top:1px}


/* Lối về danh sách, đặt TRÊN mão. `display:flex` chứ không `inline-flex`:
   inline thì nó nằm chung dòng với cái mão ngay dưới. */
.det-ticket{display:flex;align-items:center;gap:8px;width:max-content;margin-bottom:18px;
  font-size:14.5px;color:var(--dark-label);text-decoration:none;
  transition:color var(--dur-btn) var(--ease-btn)}
.det-ticket:hover{color:#fff}
.head-sub .status{margin-top:16px}

/* ══════════════════════════════════════════════════════════════════════════
   MÀN QUẢN TRỊ · SỰ KIỆN — chỗ duy nhất được nói thẳng chữ "EBMS"

   Vì sao màn này tồn tại, trong khi toàn bộ việc tạo và vận hành sự kiện đã
   nằm bên EBMS: nhóm điều phối cần MỘT chỗ nhìn thấy cả hai phía cùng lúc —
   sự kiện nào đang hiện trên trang cộng đồng, và bên EBMS nó đang ở trạng
   thái nào, đã có bao nhiêu người đăng ký. Không có màn này thì họ phải mở
   hai tab và tự đối chiếu bằng mắt.

   Màn KHÔNG dựng lại việc của EBMS: không có form tạo, không có sơ đồ chỗ
   ngồi, không có màn check-in. Mọi nút dẫn việc đều đi sang EBMS.

   ⚑ Đang mặc khung trang thường (đầu trang phụ + khung nội dung) chứ chưa
     mặc khung quản trị có thanh bên như §5C mô tả, vì "KH có cần mockup
     trang quản trị không" vẫn là open item §14-11. Chốt xong thì đổi vỏ,
     phần ruột dưới đây giữ nguyên.
   ══════════════════════════════════════════════════════════════════════════ */
.ats-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px 32px;
  flex-wrap:wrap;padding-bottom:26px;border-bottom:1px solid var(--border)}
.ats-head .callout{flex:1 1 30rem}
.ats-sync{margin-top:22px;display:flex;align-items:center;gap:12px 16px;flex-wrap:wrap;
  font-size:14px;color:var(--gray-pale)}

.ats-list{margin-top:14px;display:flex;flex-direction:column;gap:14px}
/* Chuỗi: thẻ cha bọc ngoài, hoạt động con thụt vào trong bằng một dải nền
   nhạt. Thụt bằng NỀN chứ không bằng lề — lề thì trên điện thoại ăn mất bề
   rộng vốn đã hẹp, mà quan hệ cha-con vẫn phải đọc ra được ở khổ 390. */
.ats-chain{padding:0;overflow:hidden}
.ats-chain>.ats-row{border-bottom:1px solid var(--border)}
/* Nền `--bird` một mình KHÔNG đủ để đọc ra quan hệ cha–con: chênh với trắng
   chưa tới một bậc, nhìn ảnh chụp ra bảy dòng ngang hàng nhau. Cần ba dấu
   hiệu chồng lên nhau — nền đậm hơn một bậc, một VẠCH DỌC xanh chạy suốt
   khối con, và phần thụt vào bên trái. Vạch dọc làm bằng bóng trong nên
   không chiếm chỗ của lưới. */
.ats-child{background:var(--round-2);box-shadow:inset 3px 0 0 var(--green);padding:4px 0}
.ats-child .ats-row{padding-left:38px;border-bottom:1px solid var(--border)}
.ats-child .ats-row:last-child{border-bottom:0}

.ats-row{display:grid;grid-template-columns:minmax(0,1fr) 9rem 11rem auto;gap:20px;
  align-items:center;padding:18px 22px}
.ats-row .name{font-size:16.5px;line-height:1.38;letter-spacing:-.016em;font-weight:600;
  color:var(--ink)}
.ats-row .name b{font-weight:700}
/* Mã sự kiện là thứ dán qua dán lại giữa hai hệ thống, nên để phông đều
   chữ số cho dễ đối chiếu bằng mắt. */
.ats-row .code{margin-top:6px;display:flex;align-items:center;gap:8px 12px;flex-wrap:wrap;
  font-size:13px;color:var(--gray-pale)}
.ats-row .code code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:12.5px;letter-spacing:.04em;color:var(--gray);
  background:var(--neutral-bg);border-radius:4px;padding:2px 7px}
.ats-num{display:flex;gap:22px}
.ats-num div{min-width:0}
.ats-num dt{font-size:12.5px;color:var(--gray-pale);white-space:nowrap}
.ats-num dd{margin:3px 0 0;font-size:19px;font-weight:700;letter-spacing:-.02em;color:var(--ink);
  font-variant-numeric:tabular-nums}
.ats-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}


/* ══════════════════════════════════════════════════════════════════════════
   BA MÀN CHUYÊN MỤC BÀI VIẾT — Tin tức · Dịch vụ · Khóa học   (16/09/2026)

   ★ MỘT LUẬT CHUNG CHO CẢ BA, đọc trước khi sửa bất kỳ màn nào trong nhóm
   Overview §3 chốt: "Toàn bộ nội dung trên trang đều là bài viết, chỉ khác
   nhau ở chuyên mục". Nên ba màn này KHÔNG phải ba sản phẩm khác nhau —
   chúng là một màn danh sách bài, xem qua ba lăng kính. Vì vậy:

     · dùng CHUNG đầu trang `.head-sub`, thanh công cụ `.filter-bar` và mã lọc
       `_filter.js` — không màn nào tự chế bản riêng;
     · chỉ HÌNH DÁNG THẺ khác nhau, và chỉ khác ở chỗ DỮ LIỆU khác nhau thật.

   ★ VÌ SAO THẺ KHÁC NHAU — lý do từng màn, không phải để cho đỡ chán
   Đây là chỗ dễ sai nhất. KH đã chê trang chủ "các session đơn điệu", mà
   cách chữa SAI là cho mỗi màn một kiểu trang trí. Cách chữa đúng là để
   hình dáng thẻ đi theo CÂU HỎI người đọc mang vào màn:

     TIN TỨC   người ta LƯỚT THEO NGÀY, đọc tiêu đề rồi quyết định bấm.
               → thẻ dọc, ảnh 16:9 trên đầu, tiêu đề là phần lớn nhất.
               Lưới bốn cột: tin ngắn, thẻ hẹp vẫn đọc trọn tiêu đề, mà bốn
               cột thì một màn hình chứa được hai hàng — đủ để so sánh.

     DỊCH VỤ   người ta hỏi "AI chào cái gì". Doanh nghiệp đăng bài là nửa
               câu trả lời, nên nó phải đứng ngang hàng với tiêu đề chứ
               không phải một dòng chú thích nhỏ ở cuối.
               → thẻ HÀNG NGANG, ảnh trái · chữ giữa · nút phải. Đây đúng
               dạng `.featured` của khối ④ trang chủ: bấm "Xem tất cả" từ đó
               sang đây thì thấy tiếp cùng một thứ, không phải học lại.

     KHÓA HỌC  người ta hỏi "BAO GIỜ khai giảng, học ở đâu, hết bao nhiêu".
               Bốn dữ kiện ngắn, không có cái nào là câu văn.
               → thẻ dọc KHÔNG ẢNH, bốn dòng dữ kiện xếp thành bảng. Ảnh bìa
               của một khoá học gần như luôn là ảnh kho hoặc ảnh chữ — mà
               §10 cấm ảnh kho, nên chỗ đó để dành cho dữ kiện thì hơn.
               Vạch màu trên đầu thẻ thay ảnh làm dấu nhận.

   ⚑ CHƯA CÓ ẢNH THẬT (open item §14-10). Ô ảnh dùng bốn lớp `.img-g1..g4`
     đã dựng sẵn từ token ở phần màn Sự kiện — KHÔNG đặt mã màu mới, và
     KHÔNG dán hex thẳng vào HTML như mấy màn cũ.
   ══════════════════════════════════════════════════════════════════════════ */

/* Khoảng cách giữa thanh công cụ và lưới. Đặt ở đây một lần cho cả ba màn:
   `.filter-bar` đã có `padding-bottom`, nên lưới chỉ cần một kẻ chỉ ngăn để
   thanh công cụ đọc ra là một tầng riêng, không dính vào danh sách. */
.cat-grid{border-top:1px solid var(--border);padding-top:30px}

/* ── TIN TỨC ───────────────────────────────────────────────────────────── */
.st-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.st-list>*{min-width:0}
/* Cả thẻ là một liên kết → BẮT BUỘC tắt gạch chân: `_common.css` chỉ đặt
   `a{color:inherit}` nên nếu quên, cả khối bị gạch chân (bẫy CLAUDE.md §8). */
.st-card{display:flex;flex-direction:column;text-decoration:none;overflow:hidden}
.st-card .img{position:relative;aspect-ratio:16/9;overflow:hidden}
.st-card .body{flex:1;display:flex;flex-direction:column;padding:16px 18px 18px}
.st-card h3{font-size:18px;line-height:1.4;letter-spacing:-.022em;font-weight:700;color:var(--ink);
  transition:color var(--dur-btn) var(--ease-btn)}
.st-card:hover h3{color:var(--green)}
.st-card .sum{margin-top:9px;font-size:14.5px;line-height:1.62;color:var(--gray);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
/* `margin-top:auto` đẩy dòng tác giả xuống đáy: tiêu đề dài ngắn khác nhau
   nhưng dòng cuối của mọi thẻ trong một hàng vẫn thẳng nhau. */
.st-card .by{margin-top:auto;padding-top:14px;display:flex;align-items:center;gap:10px;
  font-size:13.5px;color:var(--gray);min-width:0}
/* `min-width:0` BẮT BUỘC: mặc định một flex item không co nhỏ hơn nội dung
   của nó, nên `text-overflow:ellipsis` không bao giờ có cơ hội chạy — tên
   dài sẽ đẩy ngày tháng văng ra khỏi thẻ thay vì bị cắt gọn. */
.st-card .by b{min-width:0;font-weight:600;color:var(--ink);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.st-card .by .date{margin-left:auto;color:var(--gray-pale);white-space:nowrap;
  font-variant-numeric:tabular-nums}

/* ── DỊCH VỤ ───────────────────────────────────────────────────────────── */
.svc-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.svc-list>*{min-width:0}
.svc-card{display:grid;grid-template-columns:152px minmax(0,1fr) auto;gap:18px;
  align-items:center;padding:16px;text-decoration:none}
.svc-card .img{position:relative;aspect-ratio:4/3;border-radius:10px;overflow:hidden}
.svc-card .place{min-width:0}
.svc-card h3{font-size:17.5px;line-height:1.36;letter-spacing:-.022em;font-weight:700;
  color:var(--ink);transition:color var(--dur-btn) var(--ease-btn)}
.svc-card:hover h3{color:var(--green)}
.svc-card .by{margin-top:8px;display:flex;align-items:center;gap:10px;font-size:14px;
  color:var(--gray);min-width:0}
.svc-card .by .date{color:var(--gray-pale);font-variant-numeric:tabular-nums}
/* Dòng ưu đãi dùng màu cảnh báo §2C — đây là thứ mắt quét tìm trên màn này,
   và nó là chữ trên NỀN SÁNG nên không được dùng vàng (§3). */
.svc-card .pri{margin-top:8px;font-size:14px;font-weight:500;color:var(--warn)}
.svc-card .btn{flex:0 0 auto}

/* ── KHÓA HỌC ──────────────────────────────────────────────────────────── */
.crs-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.crs-list>*{min-width:0}
.crs-card{display:flex;flex-direction:column;padding:0;overflow:hidden}
/* VẠCH MÀU TRÊN ĐẦU THẺ theo HÌNH THỨC HỌC — thay chỗ của ảnh bìa.
   §3 cho phép quá hai sắc nhấn ở "danh sách chuyên mục, nơi màu mang nghĩa
   phân loại"; đây đúng trường hợp đó — ba vạch là ba hình thức có thật, đọc
   một lần là nhớ. Vạch chứ không phải chữ, nên `--s3` vàng cũng dùng được
   (§3: "vàng không bao giờ làm CHỮ trên nền sáng"). */
.crs-card::before{content:'';display:block;height:4px;background:var(--green)}
.crs-card--track::before{background:var(--s2)}
.crs-card--combo::before{background:var(--s4)}
.crs-card .body{flex:1;display:flex;flex-direction:column;padding:18px 20px 20px}
.crs-card .unit{font-size:12.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--gray-pale)}
.crs-card h3{margin-top:9px;font-size:18px;line-height:1.38;letter-spacing:-.022em;
  font-weight:700;color:var(--ink);transition:color var(--dur-btn) var(--ease-btn)}
/* Tiêu đề là liên kết → tắt gạch chân, vì `_common.css` chỉ đặt `a{color:
   inherit}`. Quên chỗ này là cả tiêu đề bị gạch chân (bẫy CLAUDE.md §8). */
.crs-card h3 a{text-decoration:none;color:inherit}
.crs-card:hover h3{color:var(--green)}
/* BỐN DÒNG DỮ KIỆN. Cùng cỡ chữ nhưng nhãn và giá trị khác trọng số, nên
   đọc ra là một BẢNG chứ không phải bốn câu — đây là chỗ màn Sự kiện đã
   sai một lần (bảy dòng cùng trọng số, KH chê "quá nhiều text"). */
.crs-list-kien{margin-top:16px;padding-top:14px;border-top:1px solid var(--border);
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:9px 12px;margin-bottom:0}
.crs-list-kien dt{display:flex;align-items:center;color:var(--gray-pale)}
.crs-list-kien dt .ic{width:18px;height:18px}
.crs-list-kien dd{margin:0;font-size:14.5px;line-height:1.5;color:var(--ink)}
.crs-list-kien dd b{font-weight:600}
/* Dòng học phí nằm cuối bảng, tô đậm hơn: đây là dữ kiện quyết định. */
.crs-list-kien .fee{font-weight:600}
.crs-list-kien .fee-pri{color:var(--warn);font-weight:600}
.crs-card .foot-crs{margin-top:auto;padding-top:18px;display:flex;flex-direction:column;gap:9px;
  align-items:flex-start}
/* ĐĂNG KÝ NẰM NGOÀI HỆ THỐNG — biên bản: "chỉ là bài viết đăng thông tin,
   có link đăng ký ngoài hệ thống; không phải module học online". Nói thẳng
   ngay trên thẻ, đừng để người ta bấm "Đăng ký" rồi mới phát hiện bị đưa
   sang một trang lạ. */
.crs-outer{display:flex;align-items:center;gap:7px;font-size:13px;line-height:1.5;
  color:var(--gray-pale)}
.crs-outer .ic{width:15px;height:15px;flex:0 0 15px}


/* ══════════════════════════════════════════════════════════════════════════
   MÀN GIỚI THIỆU — dựng lại 16/09/2026
   Ba chỗ sửa so với bản đầu, đều là lỗi thật chứ không phải đổi cho khác:
   ① LỜI MỜI CUỐI TRANG TỪNG LÀ MẢNG TỐI, đặt ngay trên chân trang cũng tối
      → hai mảng tối liền nhau, đúng thứ CLAUDE.md §4 cấm. Nay là thẻ SÁNG
      có vạch màu; nút vàng vẫn giữ nguyên sức mời.
   ② KHỐI "THÀNH VIÊN ĐƯỢC GÌ" từng mượn thẻ `.search-card` của khối Đang tìm
      kiếm, nên sáu thẻ lặp lại nhãn "Quyền của thành viên" sáu lần. Lặp một
      nhãn sáu lần là dấu hiệu nhãn đó đáng làm TIÊU ĐỀ NHÓM. Nay hai nhóm,
      mỗi nhóm một tiêu đề — cũng là cách nói thẳng mô hình hai tầng của nền
      tảng mà không phải giải thích bằng một đoạn văn.
   ③ THÊM "THAM GIA BẰNG CÁCH NÀO". Người đọc màn này đang cân nhắc gia nhập;
      bản cũ trả lời "được gì" nhưng không trả lời "rồi sao nữa". Ba bước lấy
      NGUYÊN VĂN từ màn đã nhận đơn của `register.html` — không viết câu mới,
      và hai màn nói giống nhau thì người ta không thấy mâu thuẫn.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── TẦM NHÌN + BA CÂU HỎI + HÌNH MẠNG LƯỚI (bản 5, 19/09) ─────────────────
   Bản 4 (tuyên ngôn chữ + đoạn văn) bị chê "hời hợt, quá nhiều text".
   Trái: câu tầm nhìn + ba câu hỏi của Handbook KH, mỗi câu một ô biểu tượng
   (chữ gọn, có nhịp). Phải: mạng lưới thành viên quanh logo — hình mang
   đúng nghĩa câu tầm nhìn. Nan hoa chỉ từ tâm ra (§5 "Rối"). */
.about-vision{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:40px clamp(40px,5vw,110px);align-items:center}
.about-vision-kicker{display:inline-flex;align-items:center;gap:12px;font-size:13px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--green)}
/* 25/09 · HÀI HOÀ: gạch nhấn dùng ĐÚNG dải nhấn duy nhất của site (lục bảo →
   chanh → hổ phách, _unify.css §15) như gạch trên tên mọi khối khác. Bản trước
   là hồng sen → lục, sót từ theme Discord — cùng một màn mà hai kiểu gạch. */
.about-vision-kicker::before{content:'';width:36px;height:3px;border-radius:3px;
  background-image:linear-gradient(96deg,#1F8F4A 0%,#8FE04A 54%,#E9A81C 100%)}
.about-vision-h{margin-top:18px;font-family:var(--font-title);font-weight:800;
  font-size:clamp(28px,2.7vw,48px);line-height:1.16;letter-spacing:-.03em;color:var(--ink)}
/* 25/09: bỏ đuôi hồng sen (--s1). Chữ nhấn đi trọn trong họ lục — người dùng
   thấy màn "lôm côm" chính vì hồng/lơ của bản Discord còn rải rác khắp màn,
   lẫn vào tông lục. Cả hai đầu đều đạt AA với chữ thường trên trắng. */
.about-vision-h em{font-style:normal;color:var(--green);
  background-image:linear-gradient(96deg,var(--green) 0%,var(--green-sub) 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.about-ch-label{margin-top:clamp(28px,3vw,44px);padding-top:22px;border-top:1px solid var(--border);
  font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--gray)}
.about-ch{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:6px}
.about-ch li{display:grid;grid-template-columns:52px minmax(0,1fr);gap:18px;align-items:start;
  margin-inline:-18px;padding:16px 18px;border-radius:18px;border:1px solid transparent;
  transition:background-color .3s,border-color .3s,transform .45s cubic-bezier(.16,1,.3,1)}
.about-ch li:hover{background-color:var(--white);border-color:var(--border);transform:translateX(6px)}
/* 25/09 · MỘT HỆ Ô BIỂU TƯỢNG cho cả màn, thay cho ba kiểu cũ (lục đặc · hồng
   đặc · lơ đặc ở đây, lục đặc và lam nhạt ở "Thành viên được gì"):
     · Ô NHẠT (nền --green-pale, nét --green) — mục để ĐỌC: ba câu hỏi, phần
       công khai.
     · Ô ĐẶC (lục đậm, nét trắng) — mục mang trọng lượng: quyền thành viên,
       ba nguyên tắc trên tấm tối.
   Ba câu hỏi là ba câu ngang hàng nên ba ô giống nhau; tô mỗi ô một sắc thì
   mắt đi tìm nghĩa của màu mà không có nghĩa nào để tìm. */
.about-ch-ic{width:52px;height:52px;border-radius:15px;display:grid;place-items:center;
  background:var(--green-pale);color:var(--green)}
.about-ch-ic svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.about-ch h3{font-size:19px;font-weight:700;letter-spacing:-.02em;color:var(--ink)}
.about-ch p{margin-top:4px;font-size:15.5px;line-height:1.6;color:var(--gray)}

.about-net{margin:0;width:100%;max-width:640px;justify-self:center}
.about-net svg{display:block;width:100%;height:auto;overflow:visible}
.about-net .gm-ring{fill:none;stroke:var(--border);stroke-width:1.5}
.about-net .gm-dashed{fill:none;stroke:var(--green-light);stroke-width:1.5;stroke-dasharray:3 9;stroke-linecap:round}
/* 25/09: hai chấm quỹ đạo về họ lục (trước là hồng sen + lơ — hai chấm màu lạ
   duy nhất trong hình, kéo mắt khỏi logo ở tâm). */
.about-net .gm-star--1{fill:var(--green-sub)} .about-net .gm-star--2{fill:var(--green-light)}
.about-net .gm-spoke path{fill:none;stroke:var(--green-light);stroke-width:1.5;opacity:.75}
.about-net .gm-info path{fill:none;stroke:none}
.about-net .gm-border{fill:var(--white);stroke:var(--border);stroke-width:1.5}
.about-net .gm-core{fill:var(--white);stroke:var(--border);stroke-width:1.5}
.about-net .gm-wave{fill:none;stroke:none}
.about-net .gm-regs{transform-box:view-box;transform-origin:280px 270px}

/* Chuyển động (§5C): chỉ khi không giảm chuyển động. Ba lớp, đều CHẬM:
   tín hiệu chạy từ tâm ra dọc nan · chân dung lơ lửng lệch pha · sóng lan
   từ logo. Vòng đứt nét xoay 90s một vòng. Ba câu hỏi trượt vào lần lượt. */
@media (prefers-reduced-motion:no-preference){
  .about-net .gm-info path{stroke:var(--green-sub);stroke-width:3;stroke-linecap:round;
    stroke-dasharray:16 420;stroke-dashoffset:16;animation:gm-info 3.6s cubic-bezier(.45,0,.2,1) infinite}
  .about-net .gm-info path:nth-child(2){animation-delay:.6s}
  .about-net .gm-info path:nth-child(3){animation-delay:1.2s}
  .about-net .gm-info path:nth-child(4){animation-delay:1.8s}
  .about-net .gm-info path:nth-child(5){animation-delay:2.4s}
  .about-net .gm-info path:nth-child(6){animation-delay:3s}
  .about-net .gm-p{animation:gm-drift 6s ease-in-out infinite alternate}
  .about-net .gm-person>g:nth-child(2n) .gm-p{animation-delay:-3s}
  .about-net .gm-person>g:nth-child(3n) .gm-p{animation-delay:-1.5s}
  .about-net .gm-wave{stroke:var(--green-sub);stroke-width:2;transform-box:fill-box;transform-origin:center;
    animation:gm-wave 3.6s ease-out infinite}
  .about-net .gm-wave--2{animation-delay:1.8s}
  .about-net .gm-regs{animation:gm-rotate 90s linear infinite}
  .fx .about-vision.rise .about-ch li{opacity:0;translate:-22px 0;
    transition:translate .9s cubic-bezier(.16,1,.3,1) var(--delay,0s),opacity .7s ease-out var(--delay,0s),
      background-color .3s,border-color .3s,transform .45s cubic-bezier(.16,1,.3,1)}
  .fx .about-vision.rise .about-ch li:nth-child(1){--delay:.25s}
  .fx .about-vision.rise .about-ch li:nth-child(2){--delay:.4s}
  .fx .about-vision.rise .about-ch li:nth-child(3){--delay:.55s}
  .fx .about-vision.shown .about-ch li{opacity:1;translate:none}
}
@keyframes gm-info{0%{stroke-dashoffset:16}70%,100%{stroke-dashoffset:-236}}
@keyframes gm-drift{to{translate:0 -7px}}
@keyframes gm-wave{0%{scale:1;opacity:.55}100%{scale:1.7;opacity:0}}
@keyframes gm-rotate{to{rotate:360deg}}

/* ── NGUYÊN TẮC HOẠT ĐỘNG — tấm nền chàm, ba thẻ kính (mới 19/09) ────────
   Người dùng 19/09: "khoanh layout… phối thêm background màu… thêm hiệu
   ứng". Tấm bo lớn nằm TRONG .container (không tràn mép, §4), cùng họ tấm
   kính trang chủ. Quầng sáng đặt ở góc, đo điểm sáng nhất (#2C339D) vẫn tối
   hơn --dark-5 → chữ --dark-text đạt (§3 đo ở chặng sáng nhất).
   ⚑ KH: ngoại lệ luật "thân màn trong nền sáng" (§4), theo yêu cầu người dùng. */
.about-nt{position:relative;overflow:hidden;isolation:isolate;
  border-radius:clamp(22px,2.4vw,36px);padding:clamp(36px,4.4vw,72px) clamp(20px,3.6vw,64px);
  background:
    radial-gradient(60% 70% at 10% 0%,rgba(74,124,58,.38),transparent 70%),
    radial-gradient(50% 60% at 96% 100%,rgba(226,63,184,.22),transparent 70%),
    linear-gradient(160deg,var(--dark-2),var(--dark-3) 55%,var(--dark-4))}
/* Lưới kẻ mảnh mờ dần từ đỉnh — chất "bản vẽ kỹ thuật", không phải hoạ tiết vui. */
.about-nt::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(ellipse 70% 80% at 50% 0%,#000 20%,transparent 75%);
  mask-image:radial-gradient(ellipse 70% 80% at 50% 0%,#000 20%,transparent 75%)}
/* Vòng quỹ đạo góc dưới phải — cùng ngôn ngữ "chòm" của đầu màn. */
.about-nt::after{content:'';position:absolute;z-index:-1;right:-240px;bottom:-380px;
  width:620px;height:620px;border-radius:50%;border:1px solid rgba(255,255,255,.08);
  box-shadow:0 0 0 90px transparent,0 0 0 91px rgba(255,255,255,.05);pointer-events:none}
/* 25/09 · ĐẦU KHỐI CÙNG DÁNG `.block-head`: căn trái, gạch nhấn Ở TRÊN tên,
   kẻ chỉ hết bề ngang ở dưới, cùng cỡ chữ. Bản trước căn giữa, chữ 44px, gạch
   nằm DƯỚI — là khối duy nhất trên màn có đầu khác, nên đọc ra như dán từ
   trang khác vào. Tấm tối đã đủ làm điểm nhấn; đầu khối không cần khác thêm. */
.about-nt-head{padding-bottom:26px;border-bottom:1px solid rgba(255,255,255,.16)}
.about-nt-head h2{font-family:var(--font-title);font-weight:800;text-transform:uppercase;
  font-size:clamp(26px,2.9vw,36px);line-height:1.14;letter-spacing:-.01em;color:#fff}
.about-nt-head h2::before{content:'';display:block;width:46px;height:4px;margin-bottom:16px;border-radius:2px;
  background-image:linear-gradient(96deg,#1F8F4A 0%,#8FE04A 54%,#E9A81C 100%)}
.about-nt-grid{margin-top:clamp(28px,3vw,44px);display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,1.6vw,24px)}
.about-nt-card{position:relative;overflow:hidden;min-width:0;
  padding:clamp(26px,2.4vw,40px);border-radius:22px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);
  transition:transform .5s cubic-bezier(.16,1,.3,1),border-color .3s,background-color .3s}
/* Đèn rọi theo con trỏ (biến --mx/--my do script cuối trang đặt) + vạch màu
   chạy ra ở đáy khi rê. Máy cảm ứng không có rê — thẻ vẫn đọc trọn vẹn. */
.about-nt-card::before{content:'';position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .35s;
  background:radial-gradient(360px circle at var(--mx,50%) var(--my,0%),rgba(143,190,48,.22),transparent 65%)}
.about-nt-card::after{content:'';position:absolute;left:0;right:0;bottom:0;height:3px;
  transform:scaleX(0);transform-origin:left;transition:transform .6s cubic-bezier(.16,1,.3,1);
  background-image:linear-gradient(90deg,#1F8F4A 0%,#8FE04A 54%,#E9A81C 100%)}
.about-nt-card:hover{transform:translateY(-6px);border-color:rgba(255,255,255,.3);background-color:rgba(255,255,255,.085)}
.about-nt-card:hover::before{opacity:1}
.about-nt-card:hover::after{transform:scaleX(1)}
/* 25/09 · BỎ SỐ 01·02·03 rỗng ruột. Ba nguyên tắc ngang hàng, không phải một
   trình tự — đánh số là gợi ra thứ bậc không có. Tệ hơn, hai khối dưới
   "Tham gia bằng cách nào" cũng đánh 01·02·03 bằng kiểu số KHÁC, nên cùng một
   màn có hai bộ số lệch nhau. Số chỉ còn ở chỗ thật sự là các bước.
   Ba ô biểu tượng cùng một mặt lục (trước là ba chuyển sắc, ô thứ ba ngả hồng). */
.about-nt-top{position:relative;display:flex;align-items:flex-start}
.about-nt-ic{width:56px;height:56px;border-radius:16px;display:grid;place-items:center;
  background-image:linear-gradient(135deg,var(--green-sub),var(--green));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 10px 24px -8px rgba(4,10,4,.6)}
.about-nt-ic svg{width:26px;height:26px;fill:none;stroke:#fff;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.about-nt-card h3{position:relative;margin-top:24px;font-family:var(--font-title);font-weight:800;
  font-size:clamp(22px,1.8vw,28px);letter-spacing:-.015em;color:#fff}
.about-nt-card p{position:relative;margin-top:12px;font-size:16.5px;line-height:1.7;color:var(--dark-text)}

/* Vào sân: ba thẻ lên lần lượt. Dùng `translate` (không phải `transform`)
   để không đè hiệu ứng rê chuột — bẫy CLAUDE.md §8. */
@media (prefers-reduced-motion:no-preference){
  .fx .about-nt.rise .about-nt-card{opacity:0;translate:0 26px;
    transition:translate 1s cubic-bezier(.16,1,.3,1) var(--delay,0s),opacity .8s ease-out var(--delay,0s),
      transform .5s cubic-bezier(.16,1,.3,1),border-color .3s,background-color .3s}
  .fx .about-nt.rise .about-nt-card:nth-child(1){--delay:.2s}
  .fx .about-nt.rise .about-nt-card:nth-child(2){--delay:.34s}
  .fx .about-nt.rise .about-nt-card:nth-child(3){--delay:.48s}
  .fx .about-nt.shown .about-nt-card{opacity:1;translate:none}
}
@media (prefers-reduced-motion:reduce){.about-nt-card,.about-nt-card::after{transition:none}.about-nt-card:hover{transform:none}}

/* ── Thành viên được gì — HAI NHÓM QUYỀN ───────────────────────────────── */
.about-access{margin-top:30px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.about-access>*{min-width:0}
.about-group{padding:clamp(26px,2.4vw,40px)}
/* Bản 3 (19/09): nhóm "thành viên" là lý do để gửi đơn → thẻ NỔI: viền
   chuyển sắc chàm → fuchsia và bóng mềm; nhóm công khai giữ thẻ phẳng.
   Hai thẻ cạnh nhau mà một nổi một chìm thì mắt tự biết đọc thẻ nào trước. */
.about-access .about-group:not(.about-group--open){border:1.5px solid transparent;
  background:linear-gradient(var(--white),var(--white)) padding-box,
    linear-gradient(135deg,var(--green-sub),var(--green-light)) border-box;
  box-shadow:0 28px 56px -32px rgba(62,100,48,.45)}
/* 25/09: viền đổi lục → chanh (trước lục → hồng sen: góc dưới phải thẻ ra
   một vệt hồng lạc tông). Thẻ vẫn NỔI hơn thẻ bên cạnh nhờ viền màu + bóng. */
/* Nhãn nhóm mang một chấm màu để hai nhóm tách nhau bằng MÀU chứ không chỉ
   bằng chữ — nhìn lướt là thấy hai tầng. Đúng hai sắc, theo trần §3. */
.about-group .kicker-group{display:flex;align-items:center;gap:10px;font-size:12.5px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--gray)}
.about-group .kicker-group::before{content:'';width:9px;height:9px;border-radius:50%;
  background:var(--green);flex:0 0 9px}
/* 25/09: chấm nhóm công khai lục chanh thay lơ (--s2) — hai nhóm vẫn tách
   bằng màu (đậm / nhạt của cùng một họ), không kéo thêm sắc lạ vào màn. */
.about-group--open .kicker-group::before{background:var(--green-light)}
.about-group h3{margin-top:12px;font-size:21px;line-height:1.3;letter-spacing:-.026em;font-weight:700}
.about-group .hint-group{margin-top:8px;font-size:15px;line-height:1.65;color:var(--gray)}
.about-group ul{list-style:none;margin:20px 0 0;padding:0;display:flex;flex-direction:column}
/* Mỗi dòng là một liên kết thật khi màn đích đã dựng, nên phải tắt gạch chân
   cho cả dòng và chỉ nhấn ở tên mục. */
.about-group li a,.about-group li>span{display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:14px;align-items:start;padding:14px 0;border-top:1px solid var(--border);
  text-decoration:none;color:inherit;min-height:44px}
.about-group li:first-child a,.about-group li:first-child>span{border-top:0;padding-top:0}
.about-group .fld-ic{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;
  background-image:linear-gradient(135deg,var(--green-sub),var(--green));color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25)}
/* 25/09: ô NHẠT của hệ biểu tượng chung (xem .about-ch-ic) thay cho ô lam
   chuyên mục "Chia sẻ" (--cm1) — màu chuyên mục mang nghĩa phân loại (§3),
   mượn nó ở đây là nói sai nghĩa. */
.about-group--open .fld-ic{background:var(--green-pale);color:var(--green);box-shadow:none}
/* color:inherit — lớp chung .ic tô --green-sub, nên trên ô ĐẶC lục biểu tượng
   lục chìm hẳn vào nền (ba ô quyền thành viên trông như ô trống). Lấy màu
   của ô: trắng trên ô đặc, lục trên ô nhạt. */
.about-group .fld-ic .ic{width:21px;height:21px;color:inherit}
/* `display:block` BẮT BUỘC: cả khối nằm trong thẻ <a>, mà bên trong <a> thì
   chỉ dùng được thẻ inline — hai span này không tự xuống dòng nếu để mặc
   định, tên mục và mô tả sẽ dính thành một dòng dài. */
.about-group .name-q{display:block;font-size:16.5px;font-weight:600;letter-spacing:-.016em;
  color:var(--ink);transition:color var(--dur-btn) var(--ease-btn)}
.about-group li a:hover .name-q{color:var(--green)}
.about-group .open-q{display:block;margin-top:4px;font-size:14.5px;line-height:1.6;color:var(--gray)}

/* ── Tham gia bằng cách nào — DẢI BA CHẶNG LIỀN KHỐI (bản 4, 19/09) ──────
   Bản 3 là nút số nối vạch đứt, chữ khoá 46ch — người dùng bắt: "dư thừa
   khoảng trống bên phải, mất cân đối" (chặng cuối không có vạch nên mép phải
   hụt hẳn). Nay ba chặng nằm chung MỘT tấm, chia bằng kẻ dọc, chữ trải hết
   bề ngang chặng; nút mũi tên đặt đúng trên kẻ chia nên dòng chảy vẫn đọc ra
   mà hai mép tấm luôn thẳng. Vạch chuyển sắc ở mép trên nối ba chặng. */
.about-step{position:relative;margin-top:clamp(28px,3vw,44px);list-style:none;padding:0;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));counter-reset:b;
  background:var(--white);border:1px solid var(--border);border-radius:24px}
/* 25/09: vạch mép trên đổi sang dải nhấn chung của site (trước lục → hồng → lơ). */
.about-step::before{content:'';position:absolute;left:28px;right:28px;top:-1.5px;height:3px;border-radius:3px;
  background-image:linear-gradient(90deg,#1F8F4A 0%,#8FE04A 54%,#E9A81C 100%)}
.about-step li{position:relative;min-width:0;padding:clamp(28px,2.8vw,48px)}
.about-step li+li{border-left:1px solid var(--border)}
/* Số chặng — nay là bộ số DUY NHẤT trên màn (25/09 đã bỏ số ở thẻ nguyên tắc).
   Mực lục đặc, không chuyển sắc sang hồng; cỡ hạ một nấc cho cân với tên chặng
   ngay dưới — 56px đặt cạnh tiêu đề 20px thì số lấn át chữ. */
.about-step li::before{counter-increment:b;content:counter(b,decimal-leading-zero);display:block;
  font-family:var(--font-title);font-weight:800;font-size:clamp(36px,2.8vw,46px);line-height:1;
  color:var(--green);font-variant-numeric:tabular-nums}
.about-step li:not(:last-child)::after{content:'→';position:absolute;z-index:1;right:-20px;top:50%;
  translate:0 -50%;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
  background:var(--white);border:1px solid var(--border);color:var(--green);font-size:18px;font-weight:600;
  box-shadow:0 8px 18px -10px rgba(11,26,9,.35)}
.about-step h3{margin-top:22px;font-size:20px;letter-spacing:-.022em;font-weight:700}
.about-step p{margin-top:10px;font-size:15.5px;line-height:1.7;color:var(--gray)}

/* ── NHÓM ĐIỀU PHỐI — THẺ CHÂN DUNG + THẺ NỔI KHI RÊ (bản 5, 19/09) ──────
   Góp ý người dùng: ảnh mặc định thay chữ "Chưa có ảnh"; rê chuột hiện thẻ
   nổi kiểu hồ sơ diễn giả (có "Xem hồ sơ"); trạng thái thường bỏ nút.
   ⚠️ Thẻ KHÔNG `overflow:hidden` — thẻ nổi phải thò lên trên thẻ. Thẻ đang
   rê nâng `z-index` để thẻ nổi không bị hàng/cột bên cạnh vẽ đè (§8). */
.about-dp{list-style:none;margin:clamp(28px,3vw,44px) 0 0;padding:0;display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,1.6vw,24px)}
.about-dp-card{position:relative;min-width:0;display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:clamp(56px,4vw,64px) 22px 30px;background:var(--white);border:1px solid var(--border);border-radius:24px;
  transition:transform .5s cubic-bezier(.16,1,.3,1),box-shadow .5s,border-color .3s}
.about-dp-card::before{content:'';position:absolute;left:0;right:0;top:0;height:46%;border-radius:24px 24px 0 0;
  background-image:linear-gradient(180deg,var(--green-pale),transparent);pointer-events:none}
.about-dp-card:hover,.about-dp-card:focus-within{z-index:5;transform:translateY(-6px);border-color:var(--green-light);
  box-shadow:0 30px 60px -32px rgba(62,100,48,.4)}
.about-dp-role{position:absolute;top:18px;left:18px;padding:5px 11px;border-radius:99px;
  background:var(--white);border:1px solid var(--border);
  font-size:12px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--green)}
.about-dp-img{position:relative;width:140px;height:140px;border-radius:50%;padding:4px;
  background-image:conic-gradient(from 200deg,var(--green-sub),var(--green-light),var(--green-sub))}
/* 25/09: vòng quanh ảnh chỉ còn lục → chanh (trước có hồng + lơ: bốn vòng bốn
   mảng sắc lạ đứng cạnh nhau, chính là chỗ màn trông "lôm côm" nhất). */
.about-dp-img img{width:100%;height:100%;border-radius:50%;border:4px solid var(--white);object-fit:cover}
.about-dp-card h3{margin-top:22px;font-family:var(--font-title);
  font-size:20px;font-weight:800;letter-spacing:-.015em;color:var(--ink)}
/* Tên là liên kết tới hồ sơ; vùng bấm phủ cả thẻ — lối vào hồ sơ trên
   điện thoại (không có rê chuột nên không có thẻ nổi). */
.about-dp-name{text-decoration:none;color:inherit;transition:color .2s}
.about-dp-name::after{content:'';position:absolute;inset:0;border-radius:24px}
.about-dp-card:hover .about-dp-name{color:var(--green)}
.about-dp-cv{margin-top:8px;font-size:14.5px;line-height:1.55;color:var(--gray)}
.about-dp-det{margin-top:14px;display:inline-flex;align-items:center;gap:7px;padding:5px 12px;border-radius:99px;
  background:var(--green-pale);color:var(--green);font-size:13px;font-weight:600}
.about-dp-det .ic{width:15px;height:15px}

/* Thẻ nổi — nền chàm đêm, chữ trắng / --dark-text (đạt trên --dark-2). */
.about-dp-st{position:absolute;z-index:3;left:50%;bottom:calc(100% - 50px);width:min(340px,calc(100% + 48px));
  padding:18px 18px 14px;border-radius:18px;text-align:left;background:var(--dark-2);color:#fff;
  box-shadow:0 24px 48px -16px rgba(4,10,4,.55);
  opacity:0;visibility:hidden;pointer-events:none;translate:-50% 10px;
  transition:opacity .25s ease-out,translate .4s cubic-bezier(.16,1,.3,1),visibility .25s}
.about-dp-st::after{content:'';position:absolute;left:50%;bottom:-7px;width:14px;height:14px;
  translate:-50% 0;rotate:45deg;background:var(--dark-2);border-radius:0 0 3px 0}
.about-dp-card:hover .about-dp-st,.about-dp-card:focus-within .about-dp-st{opacity:1;visibility:visible;pointer-events:auto;translate:-50% 0}
.about-dp-st-head{display:flex;gap:12px;align-items:center}
.about-dp-st-head img{flex:none;width:48px;height:48px;border-radius:50%}
.about-dp-st-head b{display:block;font-size:15.5px;font-weight:700;color:#fff}
.about-dp-st-head span{display:block;margin-top:2px;font-size:13px;line-height:1.45;color:var(--dark-text)}
.about-dp-st p{margin-top:12px;font-size:14px;line-height:1.6;color:var(--dark-text);
  display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.about-dp-st a{display:block;margin-top:12px;padding-top:12px;border-top:1px solid rgba(255,255,255,.14);
  font-size:14px;font-weight:600;color:var(--dark-label);text-decoration:none}
.about-dp-st a:hover{color:#fff}
@media (prefers-reduced-motion:reduce){.about-dp-card,.about-dp-st{transition:none}.about-dp-card:hover,.about-dp-card:focus-within{transform:none}}

/* ── LỜI MỜI CUỐI TRANG `.about-end` (bản 4, 19/09) ──────────────────────────
   Riêng màn này — KHÔNG sửa `.new-pkg` vì màn Dịch vụ còn dùng.
   Nền sáng (đứng trên chân trang đen, §4); hai vầng màu nhạt ở hai góc và
   lưới chấm mờ ở giữa cho tấm có chiều sâu mà không tối đi. */
.about-end{position:relative;overflow:hidden;isolation:isolate;text-align:center;
  padding:clamp(48px,6vw,104px) clamp(20px,4vw,64px);border-radius:clamp(22px,2.4vw,36px);
  border:1px solid var(--border);
  background:radial-gradient(55% 90% at 0% 0%,var(--green-pale),transparent 70%),
    radial-gradient(55% 90% at 100% 100%,var(--green-pale),transparent 70%),var(--white)}
/* 25/09: vầng góc dưới phải lục nhạt như góc trên trái (trước là hồng chuyên
   mục "Cố vấn" --cm3-n — tấm mời gọi hai góc hai tông). */
.about-end::before{content:'';position:absolute;inset:0;z-index:-1;
  background:radial-gradient(var(--border) 1.3px,transparent 1.4px) 0 0/24px 24px;
  -webkit-mask-image:radial-gradient(ellipse 60% 70% at 50% 50%,#000,transparent 75%);
  mask-image:radial-gradient(ellipse 60% 70% at 50% 50%,#000,transparent 75%)}
.about-end-logo{width:72px;height:72px;margin-inline:auto}
.about-end h2{margin-top:22px;font-family:var(--font-title);font-weight:800;
  font-size:clamp(32px,4vw,60px);line-height:1.08;letter-spacing:-.025em;color:var(--ink)}
.about-end h2 em{font-style:normal;color:var(--green);
  background-image:linear-gradient(96deg,var(--green) 0%,var(--green-sub) 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.about-end p{margin:18px auto 0;max-width:52ch;font-size:17px;line-height:1.7;color:var(--gray)}
.about-end-btn{margin-top:32px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* ── NHỊP KHỐI CỦA MÀN GIỚI THIỆU (25/09) ────────────────────────────────
   Người dùng 25/09: màn "lôm côm", cần "hài hòa, cân đối". Đo ra ba cái
   lệch nhịp ở tầng KHỐI (ngoài chuyện màu đã sửa ở từng component phía trên):
     · Mỗi khối là một tấm bo góc 16px (`_unify.css` bo mọi `.block`) mang một
       vệt nền riêng — khối thường ngả LAM (vệt chéo của `.block`), khối
       `.block-light` có vầng LAM + HỒNG. Sáu khối liền nhau thành sáu mảnh
       vá ghép, mép cong lộ ra ở hai bên trang.
     · Đệm 112px trên + dưới mọi khối, cộng khe giữa hai tấm: giữa hai tiêu đề
       khối có chỗ trống ~250px, nhiều hơn cả nội dung của khối "Tham gia".
     · Không theo nhịp nào: khối nhạt, khối đậm đứng lộn xộn.
   Sửa: nhịp SẮC · TRẮNG như trang chủ (CLAUDE.md §2B) — dải trơn hết bề ngang,
   không bo, xen kẽ nền kem của trang và một sắc lục rất nhạt; đệm một dải
   co giãn chung cho mọi khối. Chỉ màn này (lớp `.about-block`) — `.block` là
   lớp dùng chung của mọi màn, đổi ở gốc là đụng cả site.
   ⚠ `.block.about-block` (0,2,0) đặt SAU `.block:not(.block-light)` (0,2,0)
     nên thắng; `_unify.css` chỉ bo góc bằng `.block` (0,1,0) nên cũng thua.
   Màu dải sắc: pha --green-pale với trắng bằng color-mix — không thêm mã màu
   mới (§3), chỉ nhạt bớt một token có sẵn; chữ --gray/--ink trên đó vẫn là
   chữ tối trên nền gần trắng. */
.block.about-block{padding-block:clamp(56px,6vw,96px);border-radius:0;background:none}
.block.about-block--first{padding-top:clamp(36px,3.4vw,56px)}
/* Hai khối CÙNG NỀN liền nhau (Tầm nhìn → Nguyên tắc) thì đệm dưới khối trên
   đã là khe — cộng thêm đệm trên khối dưới thành ~190px trống, lệch hẳn với
   khe giữa các khối khác nền. Bỏ đệm trên của khối dưới. */
.block.about-block:not(.about-block--tint)+.block.about-block:not(.about-block--tint){padding-top:0}
.block.about-block--tint{background:color-mix(in srgb,var(--green-pale) 55%,var(--white))}
/* Vầng sáng "thở" (§5C) giữ nguyên chuyển động, chỉ đổi sắc: lam + hồng sót
   từ bản Discord → chanh + lục, rất nhạt. */
.about-block.block-light::before{background:
  radial-gradient(38% 42% at 22% 30%,rgba(143,224,74,.16) 0%,transparent 68%),
  radial-gradient(34% 40% at 78% 72%,rgba(31,143,74,.07) 0%,transparent 68%)}
/* Câu dẫn đặt TRONG đầu khối (trên kẻ chỉ), không lơ lửng dưới kẻ như trước —
   đoạn văn nằm dưới kẻ chỉ đọc ra như một khối con mồ côi. */
.about-head-lead{margin-top:12px;max-width:64ch;font-size:16.5px;line-height:1.7;color:var(--gray)}

/* ── InviteBanner `.new-pkg` — DÙNG CHUNG, không riêng màn Giới thiệu ─────
   Đang dùng ở cuối màn Giới thiệu và cuối màn Dịch vụ. Vì vậy tên KHÔNG mang
   tiền tố `gt-` nữa: lớp mang tiền tố của một màn mà lại dùng ở màn khác là
   mầm nhầm lẫn — người sửa màn Giới thiệu sau này sẽ không ngờ mình đang đổi
   cả màn Dịch vụ. Đăng ký ở COMMON_COMPONENTS §5.12.

   NỀN SÁNG là ràng buộc, không phải lựa chọn thẩm mỹ: khối này luôn đứng
   cuối trang, tức luôn đứng ngay trên chân trang tối. Tô tối nó là đặt hai
   mảng tối liền nhau — CLAUDE.md §4 cấm. Sức mời dồn vào cái nút, không dồn
   vào độ tối của nền. */
.new-pkg{margin-top:44px;padding:30px 30px 30px 34px;border-radius:16px;
  background:var(--white);border:1px solid var(--border);position:relative;overflow:hidden;
  display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
/* Vạch màu bám mép trái — cùng dải chuyển sắc với gạch nhấn đầu mỗi khối,
   nên khối này vẫn đọc ra là cùng một nhà mà không cần tô tối cả mảng. */
.new-pkg::before{content:'';position:absolute;left:0;top:0;bottom:0;width:5px;
  background-image:linear-gradient(180deg,#E23FB8 0%,#6BA8FF 54%,#2FC4F5 100%)}
.new-pkg h3{font-size:22px;letter-spacing:-.026em;font-weight:700;color:var(--ink)}
.new-pkg p{margin-top:8px;font-size:15.5px;line-height:1.65;color:var(--gray);max-width:56ch}

/* ══ ĐIỂM NGẮT ═══════════════════════════════════════════════════════════
   Ba lưới đều đi cùng một đường: 3 cột → 2 cột → 1 cột. Dải bài ghim cũng
   vậy, luôn là số thẻ NGUYÊN trong một khung để hai mép còn thẳng hàng.    */
/* Ba màn chuyên mục: lưới bốn cột chỉ giữ được ở khổ rộng. Dưới 1280 (nấc
   "đầy đủ" theo §5 bảng điểm ngắt) thẻ tin chỉ còn ~250px — tiêu đề vỡ thành
   năm dòng mà ảnh 16:9 thì bé lại thành một vệt. Về ba cột. */
@container app (max-width:1279px){
  .st-list,.crs-list{grid-template-columns:repeat(3,minmax(0,1fr))}
  /* Sự kiện: 4 thẻ/hàng ở khổ rộng (người dùng xin 23/09), xuống 3 từ đây —
     dưới 1280 mà giữ 4 thì mỗi thẻ chỉ còn ~290px, tiêu đề vỡ bốn dòng. */
  .ev-list{grid-template-columns:repeat(3,minmax(0,1fr))}
}

@container app (max-width:1023px){
  /* Ba màn chuyên mục ở khổ máy tính bảng */
  .st-list,.crs-list{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* Thẻ dịch vụ là HÀNG NGANG — ở khổ này hai hàng ngang cạnh nhau thì mỗi
     hàng chỉ còn ~480px cho cả ảnh, chữ và nút. Về một cột, hàng trải hết
     bề ngang: đây là dạng thẻ chịu được khổ rộng, không phải chịu khổ hẹp. */
  .svc-list{grid-template-columns:minmax(0,1fr)}
  .about-access{grid-template-columns:minmax(0,1fr)}
  /* Giới thiệu: bỏ hẳn hai cột. Cột văn ở khổ này tụt xuống dưới 40 ký tự
     một dòng — hẹp hơn cả khổ điện thoại, chữ vỡ thành ba từ mỗi dòng.
     Xếp dọc thì ba nguyên tắc trả lại dạng ba cột ngang vốn có của nó. */
  .about-vision{grid-template-columns:minmax(0,1fr)}
  .about-net{max-width:480px}
  .about-dp{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* Nguyên tắc: ba thẻ ngang ở khổ này chỉ còn ~230px — tiêu đề và số rỗng
     ruột chen nhau. Về một cột; thẻ rộng ra thì đọc như danh sách. */
  .about-nt-grid{grid-template-columns:minmax(0,1fr)}
  /* Chi tiết sự kiện: lưới tài trợ 4→2. */
  /* ⚠️ BỎ HẲN hai cột dưới 1023px, không thu hẹp cột phải. Cột 23rem ở khổ
     này ăn hơn 1/3 bề rộng, cột trái tụt xuống dưới 50 ký tự — hẹp hơn cả
     khổ điện thoại. Xếp dọc thì khối đăng ký nằm NGAY dưới ảnh bìa, vẫn là
     thứ đọc được sớm; `position:sticky` phải gỡ, nếu không nó dính giữa
     trang và che mất phần chương trình. */
  .det-grid{grid-template-columns:minmax(0,1fr);gap:26px}
  .det-right{position:static;flex-direction:row;flex-wrap:wrap;align-items:flex-start}
  .det-right>*{flex:1 1 300px}
  .det-actions{grid-template-columns:8.5rem minmax(0,1fr) 12rem}
  .det-actions--view{grid-template-columns:8.5rem minmax(0,1fr)}
  /* Bố cục xếp dọc: chòm kết nối tụt xuống DƯỚI phần chữ và chiếm thêm
     ~400px chiều cao — đúng phần làm dải doanh nghiệp rơi khỏi màn đầu.
     Ở khổ này bỏ chòm khỏi màn đầu; nó vẫn còn nguyên trên máy tính, nơi
     nó nằm CẠNH phần chữ nên không tốn thêm chiều cao nào. */
  /* Chòm KHÔNG bị bỏ, chỉ thôi chiếm chỗ: chuyển thành nền đặt tuyệt đối ở
     góc dưới phải, nơi vốn trống. Nhờ vậy màn đầu vẫn vừa một màn hình mà
     không mất chi tiết nhận diện của sản phẩm. Để mờ và đặt lệch khỏi vùng
     chữ — KH nhạy với rối, nên nó phải đọc ra là nền, không phải là hình. */
  .screen-head .head-page .constel{position:absolute;right:-6%;bottom:4%;top:auto;
    width:74%;max-width:470px;transform:none;
    opacity:.42;pointer-events:none;z-index:1;margin:0}
  .screen-head .head-page .body{grid-template-columns:1fr;gap:0}
  .coordination{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pin{flex:0 0 calc((100% - 24px)/2)}
  .search-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .feat-list{grid-template-columns:1fr}
  .lib-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ts-grid{grid-template-columns:1fr;gap:40px}
  .ts-ev{border-left:0;padding-left:0}
  .lib-list{grid-template-columns:1fr;gap:0}
  .featured{grid-template-columns:180px minmax(0,1fr);gap:20px}
  .featured .btn{grid-column:2;justify-self:start;margin-top:12px}
  .info{grid-template-columns:1fr;gap:36px}
  .head-page .body{grid-template-columns:1fr;gap:40px;padding-top:110px}
  .constel{max-width:420px}
  /* Đăng nhập xuống MỘT cột: cột trái co lại thành băng đầu gọn (logo + lời
     dẫn), thẻ biểu mẫu nằm ngay dưới. Ba ý "đăng nhập xong thấy gì" cắt đi —
     trên điện thoại thứ cần thấy trước là chỗ để điền, không phải lời mời. */
  /* hàng 1 cao bằng nội dung, hàng 2 ăn hết phần còn lại — nếu để hai hàng
     tự giãn thì mảng tối kéo dài thêm một khoảng trống dưới "Về trang chủ" */
  .signin{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr)}
  .signin-left{min-height:auto;padding:26px 24px 30px}
  .signin-left .constel{display:none}
  /* mép giữa hai cột nay nằm NGANG, dải sáng dọc không còn nghĩa gì */
  .signin-left::after{display:none}
  .signin-left h1{font-size:29px}
  /* bỏ căn giữa theo chiều dọc: một cột thì băng đầu chỉ cao bằng nội dung,
     không kéo ra một khoảng trống giữa lời dẫn và liên kết "Về trang chủ" */
  .signin-left .mid{margin:0;padding-block:18px 26px}
  .left-vacant{max-width:34rem}
  .signin-y{display:none}
  .signin-right{padding:32px 24px 52px}
  /* Chi tiết sự kiện xuống MỘT cột. Hộp tóm tắt nhảy lên TRƯỚC phần giới
     thiệu (`order:-1`) chứ không rơi xuống đáy: nó chứa ngày, chỗ và lối
     đăng ký — ba thứ người ta hỏi đầu tiên. Đẩy xuống cuối thì phải đọc hết
     chương trình mới biết hôm nào. Hết cột thì cũng hết chuyện dính. */
  .det{grid-template-columns:minmax(0,1fr);gap:36px}
  /* Ba thẻ một hàng thì mỗi thẻ chỉ còn ~310px — tiêu đề vỡ làm bốn dòng.
     Xuống hai thẻ. */
  .ev-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}

  /* Bảng quản trị: hai dòng. Trên là tên + trạng thái, dưới là số liệu rồi
     tới các nút — giữ đúng thứ tự đọc "cái gì · ra sao · làm gì". */
  .ats-row{grid-template-columns:minmax(0,1fr) auto;gap:14px 20px}
  .ats-row .body{grid-column:1}
  .ats-row .status{grid-column:2;justify-self:end}
  .ats-num{grid-column:1/-1}
  .ats-actions{grid-column:1/-1;justify-content:flex-start}
}
@container app (max-width:859px){
  /* Ba màn chuyên mục: thanh công cụ hết xếp một hàng — số đếm về đầu dòng
     thay vì bám mép phải, nếu không nó nhảy xuống một dòng riêng và trông
     như bị rơi ra khỏi thanh. */
  .filter-count{margin-left:0}
  /* Dải ba chặng dựng đứng: kẻ chia nằm ngang, mũi tên quay xuống. */
  .about-step{grid-template-columns:minmax(0,1fr)}
  .about-step li+li{border-left:0;border-top:1px solid var(--border)}
  .about-step li:not(:last-child)::after{content:"↓";right:auto;left:50%;top:auto;bottom:-20px;translate:-50% 0}
  /* Điện thoại: ba buổi và ba cách tham gia xếp dọc, thanh dữ kiện một cột. */
  /* Khối hoạt động xếp dọc: băng giờ thành một DẢI NGANG trên đầu khối, ô
     tích xuống chân. Giữ nguyên ba tầng, chỉ đổi chiều. */
  .det-actions{grid-template-columns:1fr}
  .det-actions .table{flex-direction:row;align-items:baseline;gap:12px;padding:13px 18px}
  .det-actions .time{margin-top:0}
  .det-actions .sel{border-left:0;border-top:1px solid var(--border);padding:14px 18px}
  /* Điện thoại: hai cột, ô đầu vẫn 2×2 → 6 ô lấp kín đúng 4 hàng. */
  .acct-img{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:120px}
  .det-aid{padding:20px}
  .det-aid-grid{grid-template-columns:1fr}
  /* Xếp dọc: chữ trước, bản đồ sau — thứ tự đọc quan trọng hơn hình. Ô bản
     đồ hạ còn 170px để không chiếm gần một màn hình điện thoại. */
  .det-dd{grid-template-columns:1fr;align-items:start}
  .det-dd .map{min-height:170px;order:2}
  .det-save{padding:20px 22px 22px}
  .det-topic{margin-top:44px;padding-top:20px}
  .det-img{height:clamp(180px,42vw,240px)}
  /* Điện thoại: dải vẫn chạy, chỉ thu nhỏ lại. Luật điểm ngắt của một
     component phải nằm ở khối cuối file — đặt ở khối đầu file thì nó đứng
     TRƯỚC định nghĩa gốc nên bị đè, im lặng không tác dụng. */
  .band-run{padding-block:22px 24px}
  .logo-band .lan{animation-duration:48s}
  .logo-band .name-company{font-size:14px}
  /* Đầu khối: máy tính là tiêu đề trái / liên kết phải. Màn hẹp mà giữ hai
     cột thì cột trái bị bóp, tiêu đề vỡ dòng xấu. Cho xuống dòng hẳn. */
  .block-head{grid-template-columns:1fr;align-items:start;gap:12px}
  .pin{flex:0 0 100%}
  .clause-slide{display:none}          /* điện thoại thì vuốt, không cần nút */
  .search-grid{grid-template-columns:1fr;gap:16px}
  .lib-grid{grid-template-columns:1fr;gap:16px}
  .ts-grid{gap:34px}
  .info-row{grid-template-columns:76px minmax(0,1fr);gap:14px}
  .featured{grid-template-columns:1fr;gap:16px;padding:16px}
  .featured .img{aspect-ratio:16/9}
  .featured .btn{grid-column:1;margin-top:0}
  .search-block{margin-top:64px;padding-block:52px}
  .info-hint h3{font-size:24px}
  .block,.lib-block,.pin-block{padding-top:64px}
  .head-page{min-height:0;padding-bottom:40px}
  .head-page .body{padding:96px clamp(20px,3.2vw,48px) 40px}
  .head-page .scroll{display:none}
  /* Điện thoại: một thẻ một hàng. Ảnh giữ 16:9 — ở 350px thì cao 197px, đủ
     để nhìn ra là ảnh mà không đẩy phần chữ xuống quá sâu. */
  .ev-list{grid-template-columns:1fr;gap:18px}
  .det-topic{margin-top:42px;font-size:21px}
}
@container app (max-width:559px){
  .about-dp{grid-template-columns:minmax(0,1fr)}
  /* ── BA MÀN CHUYÊN MỤC Ở KHỔ 390 ─────────────────────────────────────
     Mọi lưới về MỘT cột. Riêng thẻ Dịch vụ phải đổi HÌNH: ba cột ngang
     (ảnh · chữ · nút) trên 390px thì ảnh còn ~90px và nút bị ép vỡ chữ.
     Xếp lại thành ảnh trên — chữ giữa — nút dưới, nút trải hết bề ngang
     để đạt ngưỡng vùng bấm 44px. */
  .st-list,.crs-list{grid-template-columns:minmax(0,1fr)}
  /* ⚠️ LỖI CÓ SẴN, chữa nhân thể: `.three-col` chưa bao giờ có điểm ngắt, nên
     ở khổ 390 ba nguyên tắc vẫn chia ba cột — mỗi cột chừng 110px, chữ vỡ
     thành hai từ một dòng. Script soát tràn ngang KHÔNG bắt được lỗi này
     (không tràn, chỉ chật), đây là chỗ phải nhìn ảnh mới thấy. */
  .three-col{grid-template-columns:minmax(0,1fr)}
  .svc-card{grid-template-columns:minmax(0,1fr);align-items:stretch;gap:14px}
  .svc-card .img{aspect-ratio:16/9}
  .svc-card .btn{width:100%}
  /* 390px: hai nút cạnh nhau chỉ còn ~150px mỗi cái, chữ vỡ dòng mà nút thì
     khoá cao 40px. Xếp dọc, nút chính lên trên. */
  .ev-card .actions{flex-direction:column}
  /* điện thoại hẹp: nút "Tìm kiếm" thu thành biểu tượng kính lúp cho vừa hàng */
  .head-page .search-page{padding-left:16px;gap:8px}
  .head-page .search-page .btn{padding:0 18px}
  .head-page h1{font-size:36px}
  .signin-right{padding:26px 16px 44px}
  .signin-box{padding:26px 20px 22px;border-radius:14px}
  .signin-box h2{font-size:24px}
  .btn-round label{flex:1 1 100%}
  /* 390px: hai lựa chọn "Sắp diễn ra / Đã qua" chia đôi bề rộng màn, không
     để chúng co lại thành hai viên nhỏ lệch về một bên. */
  .ev-tools{gap:14px}
  .tab-para{display:flex;width:100%}
  .tab-para button{flex:1 1 0;padding:0 8px}
  .ats-row{padding:16px 18px}
  .ats-child .ats-row{padding-left:26px}   /* 390px: vạch dọc đã đủ, bớt thụt */
  .ats-num{gap:18px}
  .ats-actions .btn{flex:1 1 auto}
}

/* ══ MÀN TRONG KHÔNG PHẢI MỘT BỘ SLIDE ═══════════════════════════════════
   ⚠️ LỖI ĐÃ DÍNH, ghi lại vì rất khó lần ra. `.block` được cho `min-height:100svh`
   + `justify-content:center` + `scroll-snap-align:start` để TRANG CHỦ cuộn
   khít từng khối. Nhưng `.block` là lớp dùng chung của MỌI màn, nên các màn
   trong cũng bị kéo theo. Hậu quả trên màn Sự kiện:
     · mở trang ra là nó TỰ NHẢY xuống 322px, đầu trang biến mất — vì trình
       duyệt chọn điểm khít gần nhất ngay lúc tải;
     · khối nội dung bị ép cao tối thiểu một màn hình rồi căn giữa dọc, nên
       danh sách ngắn thì trôi lửng giữa trang.
   Màn trong là chỗ người ta VÀO ĐỂ LÀM VIỆC, không phải bộ slide để lướt.
   Phân biệt bằng `.screen-head`: chỉ trang chủ mới có màn đầu toàn hình.
   ⚑ Đây là luật của màn trong; nếu trang chủ đổi cách dựng thì xem lại chỗ này. */
.app:not(:has(.screen-head)) .block,
.app:not(:has(.screen-head)) .search-block,
.app:not(:has(.screen-head)) .pin-block{
  min-height:0;display:block;justify-content:normal;
  scroll-snap-align:none;scroll-snap-stop:normal}

/* ══════════════════════════════════════════════════════════════════════════
   BIỂU MẪU ĐĂNG KÝ SỰ KIỆN  ·  event-registration.html · sponsor-registration.html

   Vì sao hai màn này tồn tại — Overview §8.2, mục "Việc nào ở đâu":
     AIT CONNECTION LÀM: trang sự kiện, **biểu mẫu đăng ký, điền sẵn hồ sơ
       thành viên**, bài tổng kết.
     EBMS LÀM: giữ dữ liệu đăng ký và vé, sinh mã vé, gửi thư xác nhận kèm
       mã QR, check-in, thống kê.
   Tức là người dùng KHÔNG rời trang AIT ở chặng đăng ký. §8.2 nói rõ: *"Điền
   biểu mẫu ngay trên trang AIT, không nhảy sang trang khác"*, và *"Trình duyệt
   không hề biết EBMS ở đâu cả"* — máy chủ AIT mới là bên gọi sang EBMS.
   ⚠️ Hướng này THAY hướng cũ "bấm nút là sang thẳng EBMS". Overview ghi rõ
   đổi lại thì phần phải dựng bên AIT nhiều hơn hẳn.

   MỘT ĐƠN ĐĂNG KÝ GỒM HAI PHẦN (Overview §8.2, sơ đồ "chặng đăng ký"):
     · phần lấy từ AIT — họ tên · email · điện thoại · doanh nghiệp · chức
       danh · MÃ THÀNH VIÊN. Điền sẵn nếu đã đăng nhập.
     · phần riêng của sự kiện — do người khai sự kiện đặt ra, khác nhau theo
       từng hoạt động.
   Hai phần đó là hai KHỐI khác nhau trên màn, không trộn vào một danh sách ô.
   ══════════════════════════════════════════════════════════════════════════ */

/* Khối biểu mẫu. KHÔNG dùng lại `.dk-hop` của màn Đăng ký thành viên: khối đó
   có dải chuyển sắc hồng–cyan làm dấu nhận dạng riêng cho luồng gia nhập.
   Ở đây nền là màn sự kiện, giữ trong dải xanh (§3: một màn tối đa hai sắc). */
.fm-box{background:var(--white);border:1px solid var(--border);
  border-radius:var(--r-card);padding:26px clamp(20px,2.2vw,30px) 28px}
.fm-box+.fm-box{margin-top:18px}
.fm-head{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:start}
.fm-num{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  background:var(--green);color:#fff;font-size:14px;font-weight:700;
  font-variant-numeric:tabular-nums}
.fm-head h2{font-size:19px;line-height:1.3;letter-spacing:-.024em;font-weight:700}
.fm-head .sub{margin-top:5px;font-size:14px;line-height:1.6;color:var(--gray)}
.fm-fld{margin-top:20px;display:flex;flex-direction:column;gap:18px}
.fm-level{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}

/* Dải báo "đã điền sẵn từ hồ sơ". Đây là lợi ích lớn nhất của việc giữ biểu
   mẫu bên AIT, nên phải NÓI RA, đừng để người dùng tự nhận ra. */
.fm-base{display:flex;align-items:flex-start;gap:11px;margin-top:16px;
  padding:13px 16px;border-radius:var(--r-inner);
  background:var(--ok-bg);color:var(--ok);font-size:14px;line-height:1.55}
.fm-base .ic{width:18px;height:18px;flex:0 0 18px;margin-top:1px}
.fm-base b{font-weight:600}
/* Bản cho KHÁCH chưa đăng nhập — cùng khuôn, khác màu và khác việc. */
.fm-base--guest{background:var(--info-bg);color:var(--info)}
/* Màu + gạch chân theo component `.link-text` (_common.css); trước đây liên kết
   lấy `color:inherit` nên trùng hệt màu chữ của dải báo — không ra liên kết. */
.fm-base--guest a{font-weight:600}

/* ── ĐƠN TÀI TRỢ: BIỂU MẪU CÓ NHÁNH ─────────────────────────────────────
   Overview §8.2: *"Mỗi hình thức lại hỏi tiếp một bộ câu hỏi khác nhau —
   chọn 'vật phẩm đấu giá' thì phải hiện ô mô tả và ô tải ảnh. Một biểu mẫu
   TĨNH không làm được việc này."*
   ⚑ CÒN TREO: gộp một đơn có nhánh hay tách bốn đơn riêng? Biểu mẫu của EBMS
     hiện là danh sách câu hỏi PHẲNG, chưa thấy khả năng hiện câu hỏi theo lựa
     chọn trước đó. Mockup dựng theo cách KH kể (một đơn, có nhánh) vì đó là
     hình người tài trợ mong đợi; nếu EBMS không làm được nhánh thì tách bốn
     đơn là cách duy nhất chạy ngay, đổi lại người tài trợ phải tự tìm đúng
     đơn. Xem open item §14-20.                                              */
/* ★ BẢN 17/09 — DỰNG LẠI VÌ KH NÓI "NHIỀU CHỮ QUÁ, KHÓ THAO TÁC".
   Hai lớp cũ đã RÚT (chỉ màn này từng dùng, grep sạch trước khi bỏ):
     `.bm-the`   thẻ tích hai cột, mỗi thẻ một câu mô tả
     `.fm-quick` hộp hỏi thêm RỜI, nằm dưới thẻ nhưng có viền riêng
   Vì sao rút: tầng hạng mục và tầng hình thức khi đó dùng CHUNG một dạng
   thẻ, hai khối liền nhau y hệt nhau (CLAUDE.md §4). Và hộp hỏi thêm rời
   khỏi thẻ nên nhìn ra tám khung xếp chồng, không đọc được hộp nào thuộc
   thẻ nào — phải viết thêm câu "Chọn hình thức nào thì phần hỏi thêm của
   hình thức đó mở ra." để vá bằng chữ cái thứ lẽ ra hình phải tự nói.
   Thay bằng hai bộ KHÁC BÓNG DÁNG nhau:
     `.spn-hm`  thẻ ĐỨNG, bốn cái một hàng    — tầng chọn hạng mục
     `.spn-dlg`  đàn xếp HÀNG NGANG liền khối  — tầng chọn hình thức        */

/* Nhãn nhỏ cạnh tiêu đề bước, thay cho một dòng câu dẫn riêng:
   "Chọn một hoặc nhiều hạng mục." → "chọn nhiều được".
   Đặt TRONG thẻ h2 nên nó đi theo tiêu đề khi xuống dòng, không trôi ra
   đứng một mình ở đầu dòng mới. */
.spn-tag{display:inline-block;margin-left:9px;vertical-align:2px;
  padding:3px 10px;border-radius:999px;background:var(--round-2);
  font-size:12px;font-weight:600;line-height:1.5;letter-spacing:0;
  color:var(--gray);white-space:nowrap}

/* ── TẦNG 2 · HẠNG MỤC — THẺ ĐỨNG ───────────────────────────────────────
   Đây là chỗ người tài trợ SO SÁNH bốn hạng mục với nhau, nên bày ngang một
   hàng: so bằng mắt được. Xếp dọc thì phải nhớ cái vừa đọc.
   `auto-fit`+`minmax(11rem,1fr)`: số cột tự theo bề rộng CỘT TRÁI chứ không
   theo bề rộng cửa sổ — khỏi cần điểm ngắt, và ở khổ 1880 bốn thẻ giãn đều
   hết hàng thay vì để mảng trắng nở ra ở giữa (CLAUDE.md §4). */
.spn-hm{margin-top:20px;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));gap:12px}
.spn-hm>label{display:flex;flex-direction:column;padding:15px 16px 17px;
  background:var(--white);border:1px solid var(--border);border-radius:var(--r-inner);
  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)}
.spn-hm>label:hover{border-color:var(--ink)}
/* Mục đang chọn báo giống hệt `.btn-round` của _common.css — viền xanh, nền
   xanh nhạt, vành 1px. KHÔNG tô kín nền xanh đặc (§5 — KH nhạy với loá). */
.spn-hm>label:has(input:checked){border-color:var(--green);background:var(--green-pale);
  box-shadow:inset 0 0 0 1px var(--green)}
.spn-hm>label:focus-within{outline:2px solid var(--green);outline-offset:2px}
.spn-hm input{width:20px;height:20px;margin:0;flex:0 0 20px;accent-color:var(--green)}
/* Tách "Buổi sáng · Thể thao" làm hai tầng chữ, không thêm chữ nào mới:
   buổi là thứ để XẾP thời gian, tên hoạt động là thứ để CHỌN. Tên hoạt động
   vì vậy to và đậm hơn hẳn, nhãn buổi lùi về làm nhãn nhỏ. */
.spn-hm .spn-slotp{display:flex;align-items:center;gap:10px;
  font-size:11.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--gray)}
.spn-hm>label:has(input:checked) .spn-slotp{color:var(--green-dark)}
.spn-hm .spn-name{margin-top:11px;font-size:17px;font-weight:700;letter-spacing:-.022em;
  line-height:1.24;color:var(--ink)}
/* Câu mô tả cắt thành chuỗi TỪ KHOÁ ngăn bằng dấu chấm giữa — vẫn nguyên từ
   của KH, chỉ bỏ phần ngữ pháp nối. Quét bằng mắt được, không phải đọc. */
.spn-hm .spn-y{margin-top:7px;font-size:13px;line-height:1.55;color:var(--gray)}

/* ── TẦNG 3 · HÌNH THỨC — ĐÀN XẾP ───────────────────────────────────────
   MỘT khung, bốn dòng ngăn bằng kẻ chỉ. Dòng nào tích thì cả dòng đổi nền
   và mọc vạch dọc xanh, phần hỏi thêm nằm LUÔN TRONG dòng đó. Quan hệ
   "phần hỏi thêm của ô này" đọc ra bằng hình, khỏi cần câu giải thích.
   ⚠️ Vạch dọc đặt trên `.spn-dlg-item` (CẢ dòng), không đặt riêng trên phần
     hỏi thêm — đặt riêng thì vạch đứt quãng ở chỗ giáp giữa đầu dòng và
     thân dòng, nhìn ra lỗi hiển thị chứ không ra chủ ý. */
.spn-dlg{margin-top:20px;background:var(--white);
  border:1px solid var(--border);border-radius:var(--r-inner);overflow:hidden}
.spn-dlg-item{transition:background-color var(--dur-layer) var(--ease-btn)}
.spn-dlg-item+.spn-dlg-item{border-top:1px solid var(--border)}
.spn-dlg-item:has(input:checked){background:var(--bird);box-shadow:inset 3px 0 0 var(--green)}
.spn-dlg-head{display:grid;grid-template-columns:20px minmax(0,1fr);gap:14px;
  align-items:start;padding:16px 18px}
.spn-dlg-head:hover{background:var(--round-2)}
/* Vành focus vẽ HƯỚNG VÀO TRONG (`outline-offset` âm): khung ngoài có
   `overflow:hidden` nên vành vẽ ra ngoài bị cắt mất ở dòng đầu và dòng cuối. */
.spn-dlg-head:has(input:focus-visible){outline:2px solid var(--green);outline-offset:-3px}
.spn-dlg-head input{width:20px;height:20px;margin:2px 0 0;accent-color:var(--green)}
.spn-dlg .spn-name{font-size:16px;font-weight:600;line-height:1.35;color:var(--ink)}
.spn-dlg .spn-y{display:block;margin-top:3px;font-size:13.5px;line-height:1.5;color:var(--gray)}
/* Thân thụt vào đúng bằng cột ô tích cộng khe (18+20+14) để chữ trong phần
   hỏi thêm thẳng hàng với tên hình thức ở trên nó. */
.spn-dlg-body{padding:0 18px 20px 52px}
.spn-dlg-body .fm-fld{margin-top:2px}

/* Ô nhiều dòng. `.fld-input` khai `height:44px` cho ô một dòng, textarea phải
   gỡ ra — trước đây mỗi textarea tự vá bằng `style=` ngay trên thẻ. */
.spn-van{height:auto;padding:12px 14px;line-height:1.6;resize:vertical}
/* Ô hẹp: số tiền, số lượng. Kéo hết bề ngang thì ô 12 ký tự dài 700px, đọc
   ra là "chỗ này điền nhiều" — sai hẳn ý. */
.spn-narrow{max-width:21rem}

/* ── CỘT PHẢI CỦA ĐƠN TÀI TRỢ — GIỎ ĐÃ CHỌN ─────────────────────────────
   Dùng lại khuôn `.det-book` của khối đăng ký ở màn chi tiết sự kiện; khác ở
   ruột. Cột này trả lời đúng ba câu: tôi đã chọn gì · tôi đồng ý gì · giờ
   bấm đâu. Nút gửi nằm ở đây vì cột dính theo người đọc: tích tới đâu gửi
   được tới đó, không phải cuộn xuống đáy tìm nút. */
/* Đầu hộp — nhãn sự kiện, lời mở, rồi TÊN. Sửa 17/09: bản trước chỉ có
   "Đơn của bạn" nên cuộn qua đầu trang là không còn gì nói đây là hồ sơ của
   ai, cho sự kiện nào. Tên doanh nghiệp là dòng chính vì nhà tài trợ là
   DOANH NGHIỆP; tên người liên hệ là dòng phụ, chỉ hiện khi đã gõ. */
.spn-book .spn-kicker{font-size:11.5px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--green-dark)}
.spn-book .stick h2{margin-top:7px}
.spn-book .spn-signin{margin-top:10px;font-size:16px;font-weight:700;line-height:1.35;
  letter-spacing:-.018em;color:var(--ink);overflow-wrap:anywhere}
/* Chưa gõ gì: chữ mờ và nhẹ, để đọc ra là CHỖ SẼ HIỆN TÊN chứ không phải
   một doanh nghiệp tên là "Doanh nghiệp của bạn". */
.spn-book .spn-signin.unset{font-weight:400;font-size:15px;color:var(--gray-pale)}
.spn-book .spn-person{margin-top:3px;font-size:14px;line-height:1.45;color:var(--gray);
  overflow-wrap:anywhere}

.spn-chip{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.spn-chip+.spn-chip{margin-top:10px}
.spn-chip li{padding:6px 12px;border-radius:999px;
  background:var(--green-pale);border:1px solid var(--round-1);
  font-size:13.5px;font-weight:600;line-height:1.35;color:var(--green-dark)}
/* Nhóm hình thức tô tông xám: hai nhóm hai tông thì liếc một cái biết ngay
   nhóm nào là nhóm nào — rẻ hơn hai dòng tiêu đề nhóm. */
.spn-chip--dlg li{background:var(--round-2);border-color:var(--border);color:var(--ink)}
/* Rỗng thì là MỘT DÒNG CHỮ THƯỜNG, không dựng thành chip — chip rỗng đọc ra
   là đã chọn một thứ tên là "Chưa chọn…" (CLAUDE.md §5B). */
.spn-chip li.vacant{width:100%;padding:0;background:none;border:0;
  font-size:14px;font-weight:400;color:var(--gray)}
.spn-term{margin-top:18px;padding-top:16px;border-top:1px solid var(--border);
  display:flex;flex-direction:column;gap:14px}
/* Câu đồng ý dài hai dòng, ô tích phải neo lên dòng đầu chứ không căn giữa
   theo cả khối chữ — căn giữa thì ô trôi xuống giữa hai dòng. */
.spn-term .box-sel{align-items:flex-start;gap:10px;font-size:14.5px;line-height:1.5}
.spn-term .box-sel input{margin-top:2px}

/* ── TIỀN THU NGOÀI HỆ THỐNG ────────────────────────────────────────────
   Overview §8.1: *"EBMS KHÔNG NHẬN TIỀN. Hệ thống chỉ ghi tình trạng thanh
   toán trên từng đăng ký và có mục biên lai, còn việc thu tiền diễn ra bên
   ngoài. Vé gala và phí gian hàng vì vậy vẫn phải có người đối soát tay."*
   ⚠️ Vì vậy biểu mẫu này TUYỆT ĐỐI không được dựng bước thanh toán, không
   có ô thẻ, không có nút "Thanh toán". Nói thật: chuyển khoản, đối soát tay. */
.fm-money{margin-top:18px;padding:16px 18px;border-radius:var(--r-inner);
  background:var(--neutral-bg);border:1px solid var(--border)}
.fm-money h3{display:flex;align-items:center;gap:9px;font-size:14.5px;font-weight:700}
.fm-money h3 .ic{width:17px;height:17px;flex:0 0 17px;color:var(--gray-pale)}
.fm-money p{margin-top:8px;font-size:14px;line-height:1.65;color:var(--gray)}
.fm-money dl{margin:12px 0 0;display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:6px 14px;font-size:14px;line-height:1.5}
.fm-money dt{color:var(--gray)}
.fm-money dd{margin:0;font-weight:600;color:var(--ink)}

/* Hàng nút cuối biểu mẫu. */
.fm-send{margin-top:22px;display:flex;align-items:center;gap:14px 18px;flex-wrap:wrap}
.fm-send .sub{font-size:13.5px;line-height:1.55;color:var(--gray-pale)}

/* ── TRẠNG THÁI ĐÃ GỬI ──────────────────────────────────────────────────
   Nói đúng những gì hệ thống LÀM THẬT sau khi gửi, theo Overview §8.2 chặng
   4: EBMS ghi nhận · giữ chỗ · sinh mã vé · gửi thư xác nhận kèm mã QR.
   ⚠️ Không hứa gì hơn thế.                                                */
/* `margin-inline:auto` — thẻ trần 44rem mà không căn giữa thì ở khổ 1440 nó
   nằm dán mép trái, nửa phải trống trơn. Chữ bên trong đã căn giữa nên cái
   thẻ lệch trái đọc ra là lỗi bố cục. Sửa 17/09, áp cho cả hai màn đơn. */
.fm-done{max-width:44rem;margin-inline:auto;padding:34px clamp(22px,2.6vw,38px) 32px;text-align:center;
  background:var(--white);border:1px solid var(--border);border-radius:var(--r-card)}
.fm-done .head{width:60px;height:60px;margin:0 auto;border-radius:50%;
  display:grid;place-items:center;background:var(--ok-bg);color:var(--ok)}
.fm-done .head svg{width:28px;height:28px}
.fm-done h2{margin-top:18px;font-size:25px;letter-spacing:-.028em;font-weight:700}
.fm-done .upcoming{margin-top:10px;font-size:16px;line-height:1.7;color:var(--gray)}
.fm-done .code{display:inline-flex;align-items:baseline;gap:10px;margin-top:18px;
  padding:11px 18px;border-radius:999px;background:var(--round-2);
  font-size:15px;color:var(--gray)}
.fm-done .code b{font-size:18px;font-weight:700;letter-spacing:.06em;color:var(--ink);
  font-variant-numeric:tabular-nums}
.fm-done ol{margin:22px auto 0;padding:0;max-width:32rem;list-style:none;text-align:left;
  display:flex;flex-direction:column;gap:13px}
.fm-done ol li{display:grid;grid-template-columns:24px minmax(0,1fr);gap:12px;
  align-items:start;font-size:15px;line-height:1.6;color:var(--ink)}
.fm-done ol .ic{width:18px;height:18px;margin-top:3px;color:var(--green)}
.fm-done .blue{margin-top:26px;display:flex;justify-content:center;gap:12px;flex-wrap:wrap}

@container app (max-width:859px){
  .fm-level{grid-template-columns:1fr}
  .fm-box{padding:22px 18px 24px}
}
@container app (max-width:559px){
  /* Thân nhánh thụt 52px ở khổ điện thoại thì ô nhập chỉ còn ~250px — ô mô tả
     vật phẩm xuống năm dòng. Bớt thụt còn 34px: vẫn đọc ra là phần con của
     dòng phía trên (vạch dọc xanh mới là dấu chính), mà ô lấy lại bề ngang. */
  .spn-dlg-body{padding-left:34px;padding-right:16px}
  .spn-dlg-head{padding-inline:16px}
}

/* ══════════════════════════════════════════════════════════════════════════
   ĐĂNG KÝ SỰ KIỆN — BẢN BA BƯỚC  ·  event-registration.html
   Thêm 17/09/2026. Lý do dựng lại: KH xem bản một-trang-dài và nói
   *"nhiều text quá"*, kèm yêu cầu làm cho *"thu hút, dễ thao tác"*.

   BỐN THỨ ĐÃ ĐỔI, và vì sao — đọc trước khi sửa tiếp

   ① MỘT TRANG DÀI → BA BƯỚC. Bản cũ xếp năm khối chồng lên nhau: ở khổ 390
     là hơn tám màn cuộn, mà màn nào cũng có tiêu đề + câu dẫn + ô nhập. Người
     dùng chính ngoài 40 tuổi đọc trên điện thoại — cuộn tám màn để biết mình
     còn bao nhiêu việc nữa là chỗ người ta bỏ dở. Ba bước mỗi bước gọn trong
     một tới hai màn, và THANH BƯỚC luôn nói còn mấy chặng.
     ⚠️ Ba bước, không phải bốn hay năm. Mỗi bước thêm vào là thêm một lần
     bấm "Tiếp tục"; chia nhỏ quá thì đổi mệt-vì-dài lấy mệt-vì-lắt-nhắt.

   ② CÂU DẪN DƯỚI MỖI TIÊU ĐỀ KHỐI — BỎ HẲN. Năm câu kiểu "Ban tổ chức dùng
     phần này để chia bảng và chuẩn bị áo thi đấu" nói lại đúng thứ nhãn ô đã
     nói. Nhãn ô là chỗ đọc, câu dẫn chỉ là chỗ đọc thêm — bỏ câu dẫn thì mặt
     trang ngắn đi chừng một phần ba mà không mất thông tin nào.

   ③ SELECT → Ô BẤM CẢ KHUNG (`.btn-round` có sẵn). COMMON_COMPONENTS §6 vốn đã
     ghi "3–7 mục thì dùng Radio trong form, Select chỉ ở thanh công cụ" —
     bản cũ dùng bốn Select là SAI SẴN so với luật, chứ không phải đổi cho đẹp.
     Cỡ áo, trình độ, số suất, yêu cầu ăn uống nay bấm một nhát là xong, không
     phải mở danh sách rồi rê tìm.

   ④ ĐÃ ĐĂNG NHẬP THÌ KHÔNG BÀY RA NĂM Ô TRỐNG NỮA. Năm ô đã điền sẵn xếp dọc
     đọc ra là "còn phải làm", trong khi thật ra không phải làm gì. Nay là MỘT
     THẺ HỒ SƠ gọn, muốn sửa thì bấm "Sửa" mới mở ô ra. Overview §8.2 gọi việc
     điền sẵn là lợi ích chính của việc giữ biểu mẫu bên AIT — thẻ hồ sơ làm
     lợi ích đó nhìn thấy được ngay, bày ô trống thì không.

   Giữ nguyên, KHÔNG đổi: `.fm-box` `.fm-fld` `.fm-level` `.fm-base` `.fm-money`
   `.fm-done` — `sponsor-registration.html` dùng chung. Mọi thứ dưới đây là lớp MỚI.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── THANH BƯỚC ─────────────────────────────────────────────────────────
   Trả lời hai câu người đang điền form luôn hỏi: "tôi đang ở đâu" và "còn
   mấy chặng nữa". Bước đã qua BẤM ĐƯỢC để quay lại sửa — bước chưa tới thì
   không, vì nhảy cóc qua ô bắt buộc chỉ để lát nữa bị đẩy ngược về.
   Ở khổ hẹp chỉ hiện chữ của bước ĐANG LÀM; ba nhãn cạnh nhau ở 390 là ba
   cụm chữ vỡ dòng, đọc còn khó hơn không có nhãn.                        */
.fm-step{list-style:none;margin:0 0 20px;padding:0;display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.fm-step li{display:flex;align-items:center;gap:10px;min-width:0}
/* Vạch nối là PHẦN TỬ CO GIÃN nằm SAU nhãn, không phải một vạch định vị tuyệt
   đối kéo ngược sang trái. Bản đầu làm kiểu kéo ngược và vạch chạy đè lên
   chữ của mục trước — ở khổ 1440 nhìn ra là gạch ngang xoá chữ.
   Cách này vạch tự lấy đúng chỗ trống còn lại của cột, dài ngắn bao nhiêu
   cũng không bao giờ chạm vào chữ. */
.fm-step li:not(:last-child)::after{content:"";flex:1 1 auto;min-width:12px;
  height:2px;border-radius:2px;background:var(--border)}
.fm-step li.done::after{background:var(--green)}
.fm-step b{width:30px;height:30px;flex:0 0 30px;border-radius:50%;display:grid;
  place-items:center;background:var(--white);border:2px solid var(--border);
  color:var(--gray-pale);font-size:14px;font-weight:700;font-variant-numeric:tabular-nums;
  transition:background-color var(--dur-layer) var(--ease-btn),
             border-color var(--dur-layer) var(--ease-btn),color var(--dur-layer) var(--ease-btn)}
.fm-step b svg{width:16px;height:16px}
.fm-step span{font-size:14.5px;font-weight:500;color:var(--gray-pale);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fm-step .done b{background:var(--green);border-color:var(--green);color:#fff}
.fm-step .done span{color:var(--ink)}
.fm-step [aria-current="step"] b{border-color:var(--green);color:var(--green);
  box-shadow:0 0 0 4px var(--green-pale)}
.fm-step [aria-current="step"] span{color:var(--ink);font-weight:600}
/* Bước đã qua là <button> để bấm quay lại; bước chưa tới là <span> trơ.
   display:contents để cái nút không dựng thêm một hộp nữa giữa li và ruột. */
.fm-step button{display:contents;border:0;background:none;padding:0;text-align:left}
.fm-step button:hover b{border-color:var(--green)}
.fm-step button:focus-visible{outline:none}
.fm-step button:focus-visible b{outline:2px solid var(--green);outline-offset:2px}

/* ── KHOÁ BỀ RỘNG PHẦN Ô NHẬP ──────────────────────────────────────────
   Ở khổ 1880, cột biểu mẫu nở tới hơn 1100px. Một ô email dài 1100px đọc ra
   là ô HỎNG chứ không ra ô rộng rãi, và mắt phải chạy hết chiều ngang màn
   hình để đọc một dòng nhãn.
   Khoá ở 54rem, và KHOÁ Ở PHẦN Ô chứ không khoá ở thẻ: làm vậy thì khoảng
   trống thừa rơi vào TRONG thẻ trắng — ở đó nó đọc ra là lề. Khoá ở thẻ thì
   khoảng trống rơi ra giữa thẻ và cột phải, thành đúng thứ KH đã bắt lỗi
   ngày 16/09: *"phần center trắng rất nhiều"* (CLAUDE.md §4).
   ⚠️ Luật này áp cho CẢ `sponsor-registration.html` — hai màn dùng chung `.fm-fld`
   và mắc cùng một chứng ở cùng một khổ.                                   */
.fm-fld,.fm-sum,.fm-base,.fm-profile,.fm-money{max-width:54rem}

/* ── LỰA CHỌN NGẮN ─────────────────────────────────────────────────────
   `.btn-round` mặc định đặt `min-width:8.5rem`, và ở khổ hẹp còn có luật
   `flex:1 1 100%` (dựng cho màn Đăng ký thành viên, nơi mỗi lựa chọn là cả
   một câu). Với "S · M · L · XL · XXL" thì luật đó cho ra NĂM hàng, mỗi
   hàng một chữ cái — tốn năm lần chiều cao để nói một thứ đọc hết bằng một
   cái liếc. Lớp này dành riêng cho lựa chọn ngắn: xếp được bốn cái một hàng
   ở khổ 390.
   ⚠️ Chỉ dùng khi nhãn ngắn hơn chừng tám ký tự. Nhãn dài mà ép vào 4.2rem
   thì chữ vỡ dòng bên trong ô — tệ hơn hẳn năm hàng ngay ngắn.           */
.btn-round--drawer label{flex:1 1 4.2rem;min-width:4.2rem}

/* ── THẺ HỒ SƠ ĐÃ ĐIỀN SẴN ──────────────────────────────────────────────
   Thay năm ô trống bằng một thẻ đọc-được-ngay. Nút "Sửa" mở phần ô nhập ra
   (JS chỉ gỡ thuộc tính hidden), nên không ai bị khoá khỏi việc sửa.        */
.fm-profile{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;
  align-items:center;padding:16px 18px;border-radius:var(--r-inner);
  background:var(--bird);border:1px solid var(--border)}
.fm-profile .name{font-size:16.5px;font-weight:600;line-height:1.3}
.fm-profile .meta{margin-top:3px;font-size:14px;line-height:1.55;color:var(--gray);
  overflow-wrap:anywhere}
.fm-profile .meta i{font-style:normal;color:var(--border-field);padding:0 6px}

/* ── ĐẦU KHỐI HOẠT ĐỘNG ────────────────────────────────────────────────
   Khối ở bước 2 KHÔNG đánh số nữa: số bước nay nằm ở thanh bước, đánh số lần
   nữa trong thân form là hai hệ đếm chạy song song. Thay số bằng NHÃN GIỜ —
   thứ người ta thật sự cần để nhớ mình đăng ký buổi nào.                   */
.fm-actions{display:flex;align-items:center;gap:10px 14px;flex-wrap:wrap}
.fm-actions h2{font-size:19px;line-height:1.3;letter-spacing:-.024em;font-weight:700}
.fm-actions .label{flex:0 0 auto}

/* ── PHẦN KHÔNG BẮT BUỘC, GẤP LẠI ──────────────────────────────────────
   Ba ô tự-do (ghép cặp · câu hỏi diễn giả · ngồi cùng bàn) đều không bắt
   buộc và đều là ô chữ dài — để mở sẵn thì mặt trang dài thêm mà phần lớn
   người dùng lướt qua. Gấp lại, và NÓI THẲNG trong nhãn là không bắt buộc,
   để người bỏ qua biết mình không bỏ sót gì.
   ⚠️ Chỉ gấp thứ KHÔNG BẮT BUỘC. Gấp ô bắt buộc là giấu việc phải làm.     */
.fm-add{margin-top:16px;border-top:1px solid var(--border);padding-top:14px}
.fm-add>summary{display:flex;align-items:center;gap:9px;list-style:none;
  min-height:32px;font-size:14.5px;font-weight:500;color:var(--green)}
.fm-add>summary::-webkit-details-marker{display:none}
.fm-add>summary::before{content:"";width:9px;height:9px;flex:0 0 9px;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(-45deg);margin-left:3px;
  transition:transform var(--dur-layer) var(--ease-btn)}
.fm-add[open]>summary::before{transform:rotate(45deg)}
.fm-add>summary:hover{color:var(--green-dark)}
.fm-add .fm-fld{margin-top:16px}

/* ── TÓM TẮT Ở BƯỚC 3 ──────────────────────────────────────────────────
   Đọc lại đúng thứ vừa điền, mỗi dòng có lối sửa. Không dựng lại ô nhập ở
   đây — hai chỗ sửa cho một giá trị là hai chỗ để lệch nhau.               */
.fm-sum{margin:20px 0 0;display:flex;flex-direction:column}
.fm-sum>div{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 14px;
  align-items:baseline;padding:13px 0;border-top:1px solid var(--border)}
.fm-sum>div:first-child{border-top:0;padding-top:0}
.fm-sum dt{font-size:13.5px;font-weight:600;letter-spacing:.04em;
  text-transform:uppercase;color:var(--gray-pale)}
.fm-sum dd{grid-column:1;margin:4px 0 0;font-size:15.5px;line-height:1.6;color:var(--ink)}
.fm-sum dd em{font-style:normal;color:var(--gray-pale)}
.fm-sum .edit{grid-row:1/3;grid-column:2;align-self:center;font-size:14.5px;
  font-weight:500;color:var(--green)}

/* ── HÀNG NÚT ĐIỀU HƯỚNG GIỮA CÁC BƯỚC ─────────────────────────────────
   Ở khổ hẹp hàng này DÍNH ĐÁY: người đang điền không phải cuộn xuống cuối
   mới bấm được "Tiếp tục", và nút chính luôn nằm trong tầm ngón cái.
   Dùng position:sticky chứ KHÔNG dùng fixed — fixed là lớp phủ nằm ngoài
   `.container`, phá luật căn đều hai mép (CLAUDE.md §4).                    */
.fm-clause{margin-top:22px;display:flex;align-items:center;gap:12px 16px;flex-wrap:wrap}
.fm-clause .money{margin-left:auto;display:flex;align-items:baseline;gap:8px;
  font-size:14px;color:var(--gray)}
.fm-clause .money b{font-size:18px;font-weight:700;color:var(--ink);
  font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.fm-clause .sub{flex:1 1 100%;font-size:13.5px;line-height:1.55;color:var(--gray-pale)}

@container app (max-width:859px){
  /* Khổ hẹp: bỏ lưới ba cột đều nhau — ba nhãn cạnh nhau ở 390 là ba cụm chữ
     vỡ dòng. Chỉ bước ĐANG LÀM giữ nhãn và được co giãn; hai bước kia còn
     mỗi vòng tròn, vạch nối rút về bề rộng cố định. */
  .fm-step{display:flex;align-items:center;gap:10px}
  .fm-step li{flex:0 0 auto}
  .fm-step li[aria-current="step"]{flex:1 1 auto;min-width:0}
  .fm-step li:not(:last-child)::after{flex:0 0 18px;min-width:18px}
  .fm-step span{display:none}
  .fm-step [aria-current="step"] span{display:block}
  .fm-profile{grid-template-columns:auto minmax(0,1fr);gap:12px 14px}
  .fm-profile>.btn{grid-column:1/-1;justify-content:center}
  .fm-clause{position:sticky;bottom:0;z-index:3;
    margin-left:calc(-1 * clamp(20px,2.6vw,44px));
    margin-right:calc(-1 * clamp(20px,2.6vw,44px));
    padding:14px clamp(20px,2.6vw,44px) calc(14px + env(safe-area-inset-bottom));
    background:var(--cream);box-shadow:0 -10px 20px -12px rgba(11,18,32,.22)}
  .fm-clause .btn{flex:1 1 auto;justify-content:center}
  .fm-clause .money{flex:1 1 100%;margin-left:0;justify-content:space-between}
  .fm-clause .sub{display:none}
}

/* ══════════════════════════════════════════════════════════════════════════
   VÉ CỦA TÔI — my-tickets.html · dựng lại lần 2, 19/09/2026
   + khối "Vé của bạn" (.mytix) ở event-detail.html + trình xem vé (_tickets.js)
   ★ MỖI SỰ KIỆN MỘT VÉ, MỘT MÃ QR; hoạt động là LỰA CHỌN trên vé (.tix-actions).
   ★ Không có tiền, không có trạng thái thanh toán — nằm ngoài hệ thống.
   ★ CẢ KHỐI LÀ MỘT TẤM VÉ: ảnh bìa | thông tin | răng cưa | cuống QR —
     ba phần cao theo nội dung, không còn mảng trắng (góp ý 19/09).
   ⚠️ Không dựng màn quét mã / danh sách có mặt — nằm bên hệ thống vé.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Hàng tóm tắt trong đầu màn (viên kính, cùng chất liệu .kicker) ─────────── */
.tix-total{margin-top:22px;display:flex;flex-wrap:wrap;gap:10px}
.tix-total a{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:7px 17px 7px 8px;
  border-radius:999px;font-size:14.5px;font-weight:500;color:#fff;text-decoration:none;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  transition:background var(--dur-btn) var(--ease-btn),border-color var(--dur-btn) var(--ease-btn)}
.tix-total a:hover{background:rgba(255,255,255,.15);border-color:rgba(255,255,255,.38)}
.tix-total a[hidden]{display:none}
.tix-total b{min-width:30px;height:30px;padding:0 9px;border-radius:999px;display:grid;place-items:center;
  font-family:var(--font-title);font-size:15px;font-weight:800;background:var(--white);color:var(--green-deep)}
/* Chấm vàng nhỏ 30px, không phải mảng vàng (CLAUDE §5). --brown/--gold-light ≈ 9:1 */
.tix-total--slot b{background:var(--gold-light);color:var(--brown)}

/* ── Bố cục thân: danh sách | cột điểm danh (dính) ────────────────────── */
.tix-block{padding-block:36px 96px}
.tix-set{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:clamp(24px,2.4vw,40px);align-items:start}
.tix-tools{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.tix-num{min-width:24px;height:22px;margin-left:6px;padding:0 7px;border-radius:999px;display:inline-grid;
  place-items:center;font-size:12.5px;font-weight:700;background:var(--green-pale);color:var(--green-dark)}
.tix-list{margin-top:20px;display:grid;gap:20px}

/* ── KHỐI = MỘT TẤM VÉ ──────────────────────────────────────────────────── */
.tix-ev{display:grid;grid-template-columns:240px minmax(0,1fr) 196px;overflow:hidden;
  background:var(--white);border:1px solid var(--border);border-radius:22px;
  box-shadow:0 1px 2px color-mix(in srgb,var(--ink) 4%,transparent),0 18px 40px -26px color-mix(in srgb,var(--green-deep) 40%,transparent);
  transition:translate var(--dur-btn) var(--ease-btn),box-shadow var(--dur-btn) var(--ease-btn)}
.tix-ev:hover{translate:0 -3px;
  box-shadow:0 1px 2px color-mix(in srgb,var(--ink) 4%,transparent),0 24px 48px -24px color-mix(in srgb,var(--green) 45%,transparent)}

/* Ảnh bìa: đếm ngược trên, BẢNG NGÀY lớn dưới — ngày là thứ người ta cần
   nhớ nhất, in to như tờ lịch thì liếc là thấy. Phủ tối đặc dần xuống đáy
   nên chữ trắng luôn trên nền ≥ 85% --dark-2 (> 12:1), ảnh sáng mấy cũng đạt. */
.tix-ev-cover{position:relative;isolation:isolate;display:flex;flex-direction:column;justify-content:space-between;
  align-items:flex-start;gap:16px;min-height:220px;padding:18px 20px 20px;color:#fff;background:var(--dark-3)}
.tix-ev-cover>img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;
  transition:scale var(--dur-img) var(--ease-in)}
.tix-ev:hover .tix-ev-cover>img{scale:1.05}
.tix-ev-cover::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,
    color-mix(in srgb,var(--dark-1) 25%,transparent) 0%,
    color-mix(in srgb,var(--dark-2) 60%,transparent) 45%,
    color-mix(in srgb,var(--dark-2) 92%,transparent) 100%)}
.tix-count{display:inline-flex;align-items:baseline;gap:6px;padding:6px 14px;border-radius:999px;
  font-size:13px;font-weight:600;color:#fff;
  background:color-mix(in srgb,var(--dark-1) 58%,transparent);border:1px solid rgba(255,255,255,.24);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.tix-count b{font-family:var(--font-title);font-size:19px;font-weight:800;line-height:1}
.tix-date{display:flex;flex-direction:column;line-height:1}
.tix-date span{font-size:12.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase}
.tix-date b{margin:6px 0 8px;font-family:var(--font-title);font-size:64px;font-weight:800;letter-spacing:-.03em}

.tix-ev-body{min-width:0;padding:20px 24px 20px;display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.tix-order{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;font-size:14px;color:var(--gray)}
.tix-order .label{font-weight:600}
.tix-order-code{font-family:ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;font-weight:700;
  letter-spacing:.04em;color:var(--ink)}
.tix-ev-body h2{font-size:21px;line-height:1.3;font-weight:700;letter-spacing:-.02em;text-wrap:balance}
.tix-ev-body h2 a{color:var(--ink);text-decoration:none;
  background:linear-gradient(currentColor,currentColor) 0 100%/0 1.5px no-repeat;
  transition:background-size var(--dur-dash) var(--ease-btn),color var(--dur-btn) var(--ease-btn)}
.tix-ev-body h2 a:hover{color:var(--green);background-size:100% 1.5px}
.tix-ev-facts{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 22px;font-size:14.5px;
  line-height:1.5;color:var(--gray)}
.tix-ev-facts li{display:flex;align-items:flex-start;gap:8px}
.tix-ev-facts .ic{width:17px;height:17px;flex:0 0 17px;margin-top:2px;color:var(--green)}
.tix-ev-facts b{font-weight:600;color:var(--ink)}

/* Lựa chọn trên vé: giờ trong viên chàm đặc + tên + số bàn (nếu có). */
.tix-actions{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.tix-actions li{display:inline-flex;align-items:center;gap:9px;padding:4px 12px 4px 4px;border-radius:12px;
  font-size:14px;font-weight:600;color:var(--ink);background:var(--round-2);border:1px solid var(--border)}
.tix-actions b{padding:5px 8px;border-radius:8px;font-family:var(--font-title);font-size:13px;font-weight:800;
  line-height:1.1;color:#fff;background:linear-gradient(160deg,var(--green-sub),var(--green-deep))}
.tix-actions small{padding:1px 8px;border-radius:6px;font-size:12px;font-weight:600;
  background:var(--green-pale);color:var(--green-dark)}
.tix-ev--past .tix-actions b{background:linear-gradient(160deg,var(--gray-pale),var(--neutral))}

.tix-ev-blue{margin-top:auto;padding-top:4px;display:flex;flex-wrap:wrap;gap:8px}
.tix-ev-blue a,.tix-ev-blue button{display:inline-flex;align-items:center;gap:7px;min-height:42px;padding:0 16px;
  border-radius:999px;font:inherit;font-size:13.5px;font-weight:600;color:var(--green-dark);text-decoration:none;
  background:var(--white);border:1px solid var(--border);
  transition:background var(--dur-btn) var(--ease-btn),border-color var(--dur-btn) var(--ease-btn),color var(--dur-btn) var(--ease-btn)}
.tix-ev-blue a:hover,.tix-ev-blue button:hover{border-color:var(--green);background:var(--green-pale)}
.tix-ev-blue svg{width:17px;height:17px;flex:0 0 17px}
.tix-ev-blue .tix-blue-main{color:#fff;background:var(--green);border-color:var(--green)}
.tix-ev-blue .tix-blue-main:hover{color:#fff;background:var(--green-deep);border-color:var(--green-deep)}

/* Cuống vé. Răng cưa = viền trái nét đứt + hai KHUYẾT tròn trên/dưới cùng
   màu nền trang (bị overflow của khối cắt đôi). Đã phát hành: <button> mở
   mã toàn màn — lối nhanh ở cửa. Chưa phát hành / đã qua: <div>. */
.tix-stub{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  padding:18px 16px;border:0;border-left:2px dashed var(--border);background:var(--bird);
  font:inherit;color:var(--green);text-align:center;transition:background var(--dur-btn) var(--ease-btn)}
.tix-stub::before,.tix-stub::after{content:"";position:absolute;left:-12px;width:22px;height:22px;
  border-radius:50%;background:var(--cream);border:1px solid var(--border)}
.tix-stub::before{top:-12px}
.tix-stub::after{bottom:-12px}
button.tix-stub:hover{background:var(--green-pale)}
.tix-qr{width:112px;height:112px;padding:8px;display:block;border-radius:12px;color:var(--ink);
  background:var(--white);border:1px solid var(--border)}
.tix-qr svg,.tix-qr-large svg{width:100%;height:100%;display:block}
.tix-stub-text{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:700}
.tix-stub-text .ic{width:16px;height:16px}
.tix-stub-ai{font-size:12.5px;font-weight:500;line-height:1.45;color:var(--gray)}
.tix-stub-head{width:34px;height:34px}
.tix-stub--lock{color:var(--warn);background:var(--warn-bg)}
.tix-stub--head{color:var(--ok);background:var(--ok-bg)}
.tix-stub--gold{color:var(--gray);background:var(--neutral-bg)}
.tix-ev--past .tix-ev-cover>img{filter:saturate(.5)}

/* ── Cột BA CÁCH ĐIỂM DANH ─────────────────────────────────────────────── */
.tix-sub{position:sticky;top:112px;padding:22px 22px 10px;border-radius:22px;background:var(--white);
  border:1px solid var(--border)}
.tix-sub h2{font-family:var(--font-title);font-size:15px;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink)}
.tix-way{list-style:none;margin:14px 0 0;padding:0}
.tix-way li{display:flex;gap:14px;padding:14px 0}
/* Vạch "hoặc" giữa hai cách — nói "chọn một" bằng hình, không đánh số. */
.tix-way li+li{position:relative;border-top:1px solid var(--border)}
.tix-way li+li::before{content:"hoặc";position:absolute;top:0;left:50%;translate:-50% -50%;padding:0 10px;
  font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--gray);background:var(--white)}
:lang(en) .tix-way li+li::before{content:"or"}
.tix-way-head{width:44px;height:44px;flex:0 0 44px;border-radius:14px;display:grid;place-items:center;
  color:#fff;background:linear-gradient(150deg,var(--green-sub),var(--green-deep))}
.tix-way-head svg{width:22px;height:22px}
.tix-way h3{font-size:15.5px;line-height:1.35;font-weight:700}
.tix-way p{margin-top:4px;font-size:14px;line-height:1.55;color:var(--gray)}

/* ── Rỗng ──────────────────────────────────────────────────────────────── */
.tix-empty{margin-top:20px;padding:56px 24px;border-radius:22px;text-align:center;background:var(--white);
  border:1px dashed var(--border-field)}
.tix-empty-head{width:72px;height:72px;margin:0 auto;border-radius:22px;display:grid;place-items:center;
  color:var(--green);background:var(--green-pale)}
.tix-empty-head svg{width:38px;height:38px}
.tix-empty h2{margin-top:18px;font-size:20px;font-weight:700}
.tix-empty p{margin:8px auto 0;max-width:44ch;font-size:15px;line-height:1.6;color:var(--gray)}
.tix-empty .btn{margin-top:20px}

/* ── Khối "VÉ CỦA BẠN" ở màn chi tiết sự kiện (.mytix) ───────────────────────
   Thay khối Đăng ký khi người xem đã có vé (mở từ Vé của tôi, ?ve=…).
   Đầu vé chàm + ruột trắng có răng cưa — cùng hình với trình xem toàn màn,
   nên người ta nhận ra đó là CÙNG một tấm vé. */
.mytix{overflow:hidden;border-radius:22px;background:var(--white);border:1px solid var(--border);
  box-shadow:0 18px 40px -26px color-mix(in srgb,var(--green-deep) 45%,transparent)}
.mytix-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 20px;color:#fff;
  background:
    radial-gradient(ellipse 70% 130% at 100% 0%,color-mix(in srgb,var(--v6-fuchsia) 30%,transparent),transparent 60%),
    linear-gradient(160deg,var(--green) 0%,var(--green-deep) 100%)}
/* .mytix .mytix-head h2 — hai lớp để thắng luật tiêu đề chung của cột phải màn chi tiết */
.mytix .mytix-head h2{margin:0;font-family:var(--font-title);font-size:16px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#fff}
.mytix-inner{position:relative;padding:22px 20px 20px;text-align:center}
.mytix-inner::before{content:"";position:absolute;top:0;left:16px;right:16px;border-top:2px dashed var(--border)}
.mytix-qr{display:block;margin:0 auto;padding:0;border:0;background:none;border-radius:14px}
.mytix .tix-qr{width:196px;height:196px;padding:12px;border-radius:14px}
.mytix-code{margin-top:14px;font-family:ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;font-size:20px;
  font-weight:700;letter-spacing:.08em;color:var(--ink)}
.mytix-ai{margin-top:2px;font-size:14.5px;color:var(--gray)}
.mytix .tix-actions{margin-top:16px;flex-direction:column;align-items:stretch;text-align:left}
.mytix-blue{margin-top:16px;display:grid;gap:8px}
.mytix-blue .btn{justify-content:center}
.mytix .tix-pay{margin-top:14px;justify-content:center}
.mytix-head-ticket{display:grid;place-items:center;gap:8px;padding:10px 0 4px;font-weight:700}
.mytix-head-ticket svg{width:40px;height:40px}
.mytix-head-ticket p{max-width:30ch;font-size:14px;font-weight:500;line-height:1.55;color:var(--gray)}
.mytix--lock .mytix-head-ticket{color:var(--warn)}
.mytix--done .mytix-head-ticket{color:var(--ok)}
.mytix--gold .mytix-head-ticket{color:var(--gray)}

/* ── Hàng "Check-in" trên thân vé: các cách sự kiện này bật (EBMS) ─────── */
.tix-pay{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;font-size:13.5px;color:var(--gray)}
.tix-pay>span{margin-right:2px;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.tix-pay i{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;font-style:normal;
  font-weight:600;color:var(--green-dark);background:var(--green-pale)}
.tix-pay svg{width:15px;height:15px}

/* ── Cuống theo cách check-in ─────────────────────────────────────────────
   --self  : chỉ Tự check-in → cuống là <a> mở màn tự check-in (chàm nhạt).
   --manual : chỉ thủ công    → không có QR; MÃ ĐẶT CHỖ in to, người dự đọc
           mã này cho nhân sự. Phông đều chữ số như mã ở mọi nơi khác. */
a.tix-stub{text-decoration:none}
.tix-stub--self{color:var(--green);background:var(--green-pale)}
button.tix-stub--self:hover{background:var(--round-1)}
.tix-stub--manual{color:var(--green-dark)}
.tix-stub-code{font-family:ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;font-size:19px;font-weight:700;
  letter-spacing:.06em;color:var(--ink)}
/* Có check-out: hai dòng giờ vào / giờ ra */
.tix-stub-time{display:flex;align-items:baseline;gap:8px;font-size:13px;color:var(--gray)}
.tix-stub-time b{font-family:var(--font-title);font-size:17px;font-weight:800;color:var(--ok)}

/* ── Trình xem vé toàn màn (dựng bởi _tickets.js) ─────────────────────────────
   Vé NGANG hai nửa, rộng 820px, cao theo nội dung (~440px) → mở ra không
   có thanh cuộn ở mọi màn máy tính (người dùng 19/09). Khung hẹp: xếp dọc. */
.tix-view{width:min(820px,calc(100% - 32px));max-width:none;max-height:calc(100dvh - 32px);margin:auto;padding:0;
  border:0;border-radius:26px;background:none;color:var(--ink);overflow:auto;scrollbar-width:none}
.tix-view::backdrop{background:color-mix(in srgb,var(--dark-1) 88%,transparent);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.tix-view-card{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);overflow:hidden;border-radius:26px;
  background:var(--white)}
.tix-view-head{position:relative;display:flex;flex-direction:column;gap:10px;padding:32px 30px;color:#fff;
  background:
    radial-gradient(ellipse 80% 70% at 100% 0%,color-mix(in srgb,var(--v6-fuchsia) 32%,transparent),transparent 62%),
    linear-gradient(160deg,var(--green) 0%,var(--green-deep) 100%)}
.tix-view-type{font-size:12.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase}
.tix-view-ev{font-family:var(--font-title);font-size:23px;font-weight:800;line-height:1.22;text-wrap:balance}
.tix-view-facts{font-size:14.5px;font-weight:500;line-height:1.5}
.tix-view-actions{list-style:none;margin:auto 0 0;padding:14px 0 0;display:grid;gap:8px;
  border-top:1px dashed rgba(255,255,255,.35)}
.tix-view-actions li{display:flex;align-items:center;gap:10px;font-size:14.5px;font-weight:600}
.tix-view-actions b{padding:3px 8px;border-radius:7px;font-family:var(--font-title);font-size:12.5px;font-weight:800;
  color:var(--green-deep);background:var(--white)}
.tix-view-actions small{padding:1px 8px;border-radius:6px;font-size:12px;background:rgba(255,255,255,.18)}
/* Ruột trắng: răng cưa DỌC ở mép trái + hai khuyết trên/dưới */
.tix-view-inner{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:30px 28px 24px;text-align:center;border-left:2px dashed var(--border)}
.tix-view-inner::before,.tix-view-inner::after{content:"";position:absolute;left:-13px;width:24px;height:24px;border-radius:50%;
  background:color-mix(in srgb,var(--dark-1) 88%,var(--white))}
.tix-view-inner::before{top:-12px}
.tix-view-inner::after{bottom:-12px}
.tix-qr-large{width:min(248px,100%);aspect-ratio:1;padding:12px;border-radius:16px;background:var(--white);
  border:1px solid var(--border);color:var(--ink)}
.tix-view-code{margin-top:16px;font-family:ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;
  font-size:24px;font-weight:700;letter-spacing:.08em}
.tix-view-ai{margin-top:2px;font-size:15.5px;font-weight:500;color:var(--gray)}
.tix-view-suggest{margin-top:14px;font-size:13px;color:var(--gray)}
.tix-view-line{position:absolute;top:14px;right:14px;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  color:var(--ink);background:var(--round-2);border:1px solid var(--border);transition:background var(--dur-btn) var(--ease-btn)}
.tix-view-line:hover{background:var(--green-pale)}
.tix-view-line svg{width:20px;height:20px}
.tix-view[open]{animation:tix-in .42s var(--ease-in) both}
@keyframes tix-in{from{opacity:0;translate:0 26px;scale:.97}}

/* ── Tấm vé chung (lần 3b): nhãn trạng thái · cách check-in · các mặt ─────
   Mọi nút mở vé tên "Xem vé" (người dùng 19/09: "phải làm cho đồng nhất").
   Cuống vé ở ví: nhãn "Xem vé" ở đáy cuống, gạch chân như một liên kết để
   nhìn ảnh tĩnh vẫn đoán ra bấm được (CLAUDE §6B). */
.tix-stub-view{margin-top:2px;font-size:13.5px;font-weight:700;color:var(--green);
  text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1.5px}
.tix-stub--lock .tix-stub-view{color:var(--warn)}
.tix-stub--head .tix-stub-view{color:var(--ok)}
.tix-stub--gold .tix-stub-view{color:var(--gray)}
button.tix-stub--lock:hover,button.tix-stub--head:hover,button.tix-stub--gold:hover{filter:brightness(.97)}

/* Khoá chiều cao tối thiểu: đổi mặt (vé → quét → thành công) mà vé co
   giãn là trông như nhảy. 480px vừa mặt cao nhất (QR + nút Tự check-in). */
.tix-view-card{min-height:480px}
.tix-view-head-stick{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.tix-view-head-stick .label{font-weight:600}
.tix-view-actions em{margin-left:auto;display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:999px;
  font-style:normal;font-size:12.5px;font-weight:700;color:var(--ok);background:var(--ok-bg)}
.tix-view-actions em svg{width:13px;height:13px}
.tix-view-pay{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:12.5px}
.tix-view-pay>span{margin-right:2px;font-weight:600;letter-spacing:.1em;text-transform:uppercase}
.tix-view-pay i{padding:2px 9px;border-radius:999px;font-style:normal;font-weight:600;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28)}
.tix-view-face{width:100%;display:flex;flex-direction:column;align-items:center;text-align:center}
.tix-view-face[hidden]{display:none}
.tix-view-sym{width:76px;height:76px;border-radius:24px;display:grid;place-items:center;color:var(--green);
  background:var(--green-pale)}
.tix-view-sym svg{width:40px;height:40px}
.tix-view-sym--warn{color:var(--warn);background:var(--warn-bg)}
.tix-view-sym--ok{color:var(--ok);background:var(--ok-bg)}
.tix-view-sym--st{color:var(--gray);background:var(--neutral-bg)}
.tix-view-heading{margin-top:14px;font-size:19px;font-weight:700}
.tix-view-face .tix-view-suggest{max-width:32ch;line-height:1.55}
.tix-view-code--big{margin-top:14px;font-size:30px}
.tix-view-time-vr{margin:12px 0 4px;display:flex;gap:26px}
.tix-view-time-vr dt{font-size:12.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--gray)}
.tix-view-time-vr dd{margin:2px 0 0;font-family:var(--font-title);font-size:18px;font-weight:800;color:var(--ok)}
.tix-view-btn{margin-top:16px;gap:8px}
.tix-view-btn svg{width:18px;height:18px}

/* ── Tự check-in trong tấm vé ────────────────────────────────────────────
   Khung camera GIẢ: nền đêm, bốn góc ngắm, vạch quét chạy lên xuống, một
   mã mờ ở giữa gợi ý "đưa mã vào đây". ⚑ Bản thật là luồng camera. */
.tix-self-topic{font-size:19px;font-weight:700}
.tix-self-orange{position:relative;width:min(236px,100%);aspect-ratio:1;margin-top:14px;border-radius:20px;overflow:hidden;
  background:
    radial-gradient(ellipse 60% 60% at 50% 45%,color-mix(in srgb,var(--dark-5) 70%,transparent),transparent 70%),
    var(--dark-1)}
.tix-self-corner{position:absolute;inset:18px;
  background:
    linear-gradient(#fff,#fff) 0 0/28px 3px,linear-gradient(#fff,#fff) 0 0/3px 28px,
    linear-gradient(#fff,#fff) 100% 0/28px 3px,linear-gradient(#fff,#fff) 100% 0/3px 28px,
    linear-gradient(#fff,#fff) 0 100%/28px 3px,linear-gradient(#fff,#fff) 0 100%/3px 28px,
    linear-gradient(#fff,#fff) 100% 100%/28px 3px,linear-gradient(#fff,#fff) 100% 100%/3px 28px;
  background-repeat:no-repeat}
.tix-self-rule{position:absolute;left:22px;right:22px;top:22px;height:2px;border-radius:2px;
  background:var(--v6-leaf);box-shadow:0 0 12px 2px color-mix(in srgb,var(--v6-leaf) 55%,transparent);
  animation:tix-scan 1.8s ease-in-out infinite alternate}
@keyframes tix-scan{to{top:calc(100% - 24px)}}
.tix-self-code-price{position:absolute;inset:62px;color:#fff;opacity:.28}
.tix-self-code-price svg{width:100%;height:100%}
.tix-self-blue{margin-top:18px;display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.tix-self-field{width:100%;max-width:300px;margin-top:16px;text-align:left}
.tix-self-err{margin-top:8px;font-size:13.5px;font-weight:600;color:var(--err)}
.tix-self-ok{width:84px;height:84px;border-radius:50%;display:grid;place-items:center;color:#fff;background:var(--ok);
  box-shadow:0 0 0 10px var(--ok-bg);animation:tix-ok .5s var(--ease-bounce) both}
.tix-self-ok svg{width:44px;height:44px}
@keyframes tix-ok{from{scale:.4;opacity:0}}
.tix-self-hello{margin-top:22px;font-size:21px;font-weight:700;text-wrap:balance}
.tix-self-sub{margin-top:4px;font-size:15px;color:var(--gray)}
.tix-self-part{margin-top:14px;padding:6px 14px;border-radius:999px;font-size:14.5px;font-weight:700;
  color:var(--ok);background:var(--ok-bg)}
.tix-self-seat{margin-top:10px;font-size:14.5px;color:var(--gray)}
.tix-self-seat b{margin-left:4px;font-size:17px;color:var(--ink)}
@media (prefers-reduced-motion:reduce){
  .tix-self-rule,.tix-self-ok{animation:none}
  .tix-self-rule{top:50%}
}
@container app (max-width:719px){
  .tix-view-card{grid-template-columns:1fr;min-height:0}
  .tix-view-head{padding:22px 22px 18px;gap:6px}
  .tix-view-ev{font-size:19px}
  .tix-view-actions{margin-top:8px;padding-top:10px;display:flex;flex-wrap:wrap;gap:6px 12px}
  .tix-view-actions li{font-size:13.5px}
  .tix-view-inner{padding:22px 20px 18px;border-left:0;border-top:2px dashed var(--border)}
  .tix-view-inner::before,.tix-view-inner::after{top:-13px;bottom:auto}
  .tix-view-inner::before{left:-12px}
  .tix-view-inner::after{left:auto;right:-12px}
  .tix-qr-large{width:min(220px,100%)}
  .tix-view-code{font-size:21px;margin-top:12px}
  .tix-view-line{top:10px;right:10px}
}

@media (prefers-reduced-motion:reduce){
  .tix-view[open]{animation:none}
  .tix-ev,.tix-ev-cover>img{transition:none}
  .tix-ev:hover{translate:none}
  .tix-ev:hover .tix-ev-cover>img{scale:none}
}

/* ── Điểm ngắt ────────────────────────────────────────────────────────── */
@container app (min-width:1560px){
  .tix-ev{grid-template-columns:280px minmax(0,1fr) 210px}
  .tix-ev-body{padding:22px 28px}
  .tix-ev-body h2{font-size:23px}
}
@container app (max-width:1279px){
  .tix-set{grid-template-columns:1fr}
  .tix-sub{position:static}
  .tix-way{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
  .tix-way li,.tix-way li+li{border-top:0;padding:4px 0 14px}
  .tix-way li+li::before{display:none}
}
/* Khung hẹp: vé dựng ĐỨNG — ảnh bìa thành dải trên (ngày trái, đếm ngược
   phải), cuống xuống hàng dưới, răng cưa nằm ngang, khuyết ở hai mép. */
@container app (max-width:979px){
  .tix-ev{grid-template-columns:1fr}
  .tix-ev-cover{min-height:0;flex-direction:row-reverse;align-items:flex-end;padding:16px 18px}
  .tix-date b{font-size:48px;margin:4px 0 6px}
  .tix-stub{display:grid;grid-template-columns:auto minmax(0,1fr);justify-items:start;align-items:center;
    gap:2px 16px;padding:16px 20px;border-left:0;border-top:2px dashed var(--border);text-align:left}
  .tix-stub>:first-child{grid-row:span 2}
  .tix-stub::before,.tix-stub::after{top:-12px;bottom:auto}
  .tix-stub::before{left:-12px}
  .tix-stub::after{left:auto;right:-12px}
  .tix-qr{width:76px;height:76px;padding:6px}
  .tix-stub-head{width:30px;height:30px}
}
@container app (max-width:859px){
  .tix-way{grid-template-columns:1fr;gap:0}
  .tix-way li+li{border-top:1px solid var(--border);padding-top:14px}
}
@container app (max-width:559px){
  .tix-block{padding-block:24px 64px}
  /* Viên tóm tắt thành ô: số trên, nhãn dưới — hai viên trên một hàng. */
  .tix-total{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:8px}
  .tix-total a{flex-direction:column;align-items:flex-start;gap:8px;padding:10px 12px;border-radius:16px;
    font-size:13px;line-height:1.35}
  .tix-ev{border-radius:18px}
  .tix-ev-body{padding:16px 16px 18px}
  .tix-ev-body h2{font-size:19px}
  .tix-ev-facts{flex-direction:column}
  .tix-ev-blue{width:100%}
  .tix-ev-blue .tix-blue-main{flex:1 1 100%;justify-content:center}
  .tix-sub{padding:18px 16px 6px}
}

/* ══════════════════════════════════════════════════════════════════════════
   BỔ SUNG 18/09/2026 — theo biên bản góp ý mockup 18/09
   Hai phần cho hai màn: DIỄN GIẢ (event-detail.html) và ĐĂNG KÝ NHIỀU
   NGƯỜI (event-registration.html). Đặt thành khối riêng CUỐI FILE — sau mọi
   điểm ngắt cũ — để không luật cũ nào nằm sau mà đè ngược (CLAUDE.md §8).
   ══════════════════════════════════════════════════════════════════════════ */

/* Khối .ct-dg-* cũ đã gỡ 19/09 — thay bằng .ctdg-* ở cuối file. */

/* ── ĐĂNG KÝ NHIỀU NGƯỜI ────────────────────────────────────────────────
   Biên bản 18/09 "Luồng đăng ký nhiều người". Chú thích đầy đủ trong HTML.
   `.fm-num-person` — chọn số người, nằm dưới thẻ hồ sơ trong cùng hộp "Người
     đăng ký". Kẻ một nét ngăn: trên là "tôi là ai", dưới là "đi mấy người".
   `.fm-person-hint` — dòng dẫn NGAY dưới tiêu đề hộp "Người đi cùng". Đây là
     ngoại lệ có chủ ý so với luật "bỏ câu dẫn" của bản ba bước: câu này
     không nhắc lại nhãn ô, nó nói điều nhãn ô không nói được — để trống là
     HỢP LỆ và để trống thì chuyện gì xảy ra. Không có nó người ta sẽ tưởng
     ô trống là mình còn nợ việc.
   `.fm-person` — một cụm cho mỗi người đi cùng, ngăn bằng kẻ chỉ, không đóng
     khung lồng khung (hộp trong hộp là ba lớp viền chồng nhau).            */
.fm-num-person{margin-top:22px;padding-top:20px;border-top:1px solid var(--border)}
.fm-person-hint{margin-top:8px;max-width:54rem;font-size:14.5px;line-height:1.6;color:var(--gray)}
.fm-person{max-width:54rem;margin-top:20px;padding-top:18px;border-top:1px solid var(--border)}
.fm-person-topic{font-size:15.5px;line-height:1.35;font-weight:600;color:var(--ink)}
.fm-person .fm-fld{margin-top:14px}

/* ══════════════════════════════════════════════════════════════════════════
   TRANG CHỦ — CÁC KHỐI DỰNG LẠI THEO BIÊN BẢN GÓP Ý 18/09/2026
   Nguồn: 08-Meeting/2026-09-18-bien-ban-gop-y-mockup.md. Lý do từng khối ghi
   ở comment trong index.html. Mọi lớp mang tiền tố .tc- (bẫy tên trần,
   CLAUDE.md §8). Chỉ token, không mã màu mới.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Lối "Xem tất cả" ở đầu khối: NÚT viền tròn, chỉ trên trang chủ ────────
   Biên bản chê "Xem chi tiết dạng chữ nhỏ… xấu và không hợp lý". Khoanh vào
   trang chủ bằng :has(.screen-head) — .block-head .view còn dùng ở các màn trong,
   đổi chung là đổi cả những màn KH chưa góp ý. */
.app:has(.screen-head) .block-head .view{height:42px;padding:0 20px;border-radius:999px;
  border:1px solid var(--border-field);background:var(--white);color:var(--ink);font-weight:600;
  transition:border-color var(--dur-btn),color var(--dur-btn),gap var(--dur-btn)}
.app:has(.screen-head) .block-head .view:hover{border-color:var(--green);color:var(--green)}

/* ── Nhãn phân loại + dòng người tạo — dùng chung cho mọi khối ────────────
   Biên bản: mọi nội dung có "tag hoặc category" và "thông tin người tạo
   (cá nhân)". .hm-label: nền --green-pale chữ --green-dark, chấm màu đứng trước
   — chấm mang sắc nhóm cho loại tin (§3: danh sách chuyên mục), các loại
   khác chấm --green. Chấm chỉ là lớp thứ hai, chữ đủ nghĩa. */
.hm-label{display:inline-flex;align-items:center;gap:7px;align-self:flex-start;padding:2px 11px 2px 9px;
  border-radius:999px;background:var(--green-pale);font-size:12.5px;font-weight:600;line-height:1.6;
  color:var(--green-dark);white-space:nowrap}
.hm-label::before{content:"";width:7px;height:7px;flex:0 0 7px;border-radius:50%;background:var(--dot,var(--green))}
.hm-label--notice{--dot:var(--s2)}
.hm-label--activity{--dot:var(--s4)}
.hm-label--share{--dot:var(--s1)}
/* Tin trả phí/ghim: nền mực chữ trắng — khác hẳn nhãn loại tin để không ai
   lẫn bài trả phí với tin của cộng đồng. ⚑ Chữ nhãn cần KH chốt. */
.hm-pin{display:inline-flex;align-items:center;padding:2px 9px;border-radius:5px;background:var(--green-deep);
  font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;line-height:1.6;color:#fff}
.hm-urgent{display:inline-flex;align-items:center;padding:2px 10px;border-radius:999px;background:var(--warn-bg);
  font-size:12.5px;font-weight:700;line-height:1.6;color:var(--warn)}
/* NGƯỜI trước, doanh nghiệp sau: tên đậm, doanh nghiệp/ngày nhỏ nhạt. */
.hm-ai{display:flex;align-items:center;gap:10px;min-width:0}
.hm-ai .avatar{font-weight:700}
.hm-ai>span:last-child{display:flex;flex-direction:column;min-width:0;line-height:1.35}
.hm-ai b{font-size:14.5px;font-weight:700;color:var(--ink)}
.hm-ai small{font-size:13px;color:var(--gray-pale)}

/* ── ② TIN TỨC — bài dẫn 7 phần + cột phụ 5 phần ──────────────────────── */
.hm-alert{margin-top:34px;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,2.6vw,44px);align-items:start}
.hm-alert:not(:has(.hm-alert-sub li)){grid-template-columns:1fr}
.hm-alert a{text-decoration:none;color:var(--ink)}
.hm-img{display:block;overflow:hidden;border-radius:16px;background:var(--green-deep)}
.hm-img img{width:100%;height:100%;object-fit:cover;transition:transform var(--dur-img) var(--ease-in)}
.hm-alert a:hover .hm-img img{transform:scale(1.04)}
.hm-alert-body{display:flex;flex-direction:column;gap:10px;min-width:0}
.hm-alert-name{font-weight:700;color:var(--ink);letter-spacing:-.018em;transition:color var(--dur-btn)}
.hm-alert a:hover .hm-alert-name{color:var(--green)}
.hm-alert-hint{display:flex;flex-direction:column;gap:20px}
.hm-alert-hint .hm-img{aspect-ratio:16/9}
.hm-alert-hint .hm-alert-name{font-size:clamp(23px,2vw,32px);line-height:1.22;letter-spacing:-.028em}
.hm-alert-sum{max-width:70ch;font-size:16px;line-height:1.6;color:var(--gray);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hm-alert-sub{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.hm-alert-sub li+li{border-top:1px solid var(--border)}
.hm-alert-sub li:first-child .hm-alert-line{padding-top:0}
.hm-alert-line{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:20px;align-items:start;padding-block:22px}
.hm-alert-line .hm-img{aspect-ratio:4/3;border-radius:12px}
.hm-alert-label{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.hm-alert-line .hm-alert-name{font-size:clamp(16.5px,1.2vw,19px);line-height:1.38;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

/* ── ③ SỰ KIỆN — thẻ ảnh lớn đứng ─────────────────────────────────────── */
.hm-cal{list-style:none;margin:34px 0 0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:clamp(16px,1.6vw,26px)}
.hm-cal li{display:flex}
.hm-cal-card{flex:1;display:flex;flex-direction:column;overflow:hidden;border-radius:18px;background:var(--white);
  border:1px solid var(--border);text-decoration:none;color:var(--ink);
  transition:transform var(--dur-btn) var(--ease-btn),box-shadow var(--dur-btn),border-color var(--dur-btn)}
.hm-cal-card:hover{transform:translateY(-4px);border-color:var(--green);box-shadow:var(--shadow-float)}
.hm-cal-img{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;background:var(--green-deep)}
.hm-cal-img img{width:100%;height:100%;object-fit:cover;transition:transform var(--dur-img) var(--ease-in)}
.hm-cal-card:hover .hm-cal-img img{transform:scale(1.04)}
/* Ô ngày: nền trắng, số lớn xanh — ngày là thứ người ta nhìn trước ở sự kiện. */
.hm-cal-date{position:absolute;left:16px;top:16px;width:66px;height:70px;border-radius:14px;background:var(--white);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  font-size:13px;font-weight:600;letter-spacing:.04em;line-height:1.1;color:var(--gray);box-shadow:var(--shadow-float)}
.hm-cal-date b{font-size:27px;font-weight:800;letter-spacing:-.02em;color:var(--green)}
/* Nhãn "Sắp diễn ra": nền --ok-bg chữ --ok — nền đặc vì đặt trên ảnh. */
.hm-cal-st{position:absolute;right:16px;top:16px;padding:5px 13px;border-radius:999px;background:var(--ok-bg);
  font-size:13px;font-weight:700;color:var(--ok)}
.hm-cal-body{flex:1;display:flex;flex-direction:column;gap:11px;padding:20px 22px 22px}
.hm-cal-name{font-size:clamp(18.5px,1.35vw,22px);line-height:1.32;font-weight:700;letter-spacing:-.02em;color:var(--ink);
  transition:color var(--dur-btn)}
.hm-cal-card:hover .hm-cal-name{color:var(--green)}
.hm-cal-meta{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:14.5px;color:var(--gray)}
.hm-cal-meta>span{display:inline-flex;align-items:center;gap:7px}
.hm-cal-last{margin-top:auto;padding-top:16px;border-top:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;gap:12px}
.hm-cal-last .btn{flex:0 0 auto}
/* Bốn cột thì thẻ hẹp: doanh nghiệp là dòng phụ, cắt "…" chứ không xuống dòng. */
.hm-cal-last .hm-ai small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* ĐANG DIỄN RA — nhãn nền --green chữ trắng (6.0): nổi nhất trong ba trạng
   thái vì là thứ đang xảy ra. Thêm 18/09 chiều khi khối đổi thành "Sự kiện
   nổi bật" trộn cả ba trạng thái. */
.hm-cal-st--active{background:var(--green);color:#fff}
/* ĐÃ DIỄN RA — dạng khác: nền kem, ảnh phủ mờ, nhãn trạng thái xám, nút viền. */
.hm-cal-card--past{background:var(--cream)}
.hm-cal-card--past .hm-cal-img::after{content:"";position:absolute;inset:0;background:rgba(10,23,48,.38)}
.hm-cal-card--past .hm-cal-st{z-index:1;background:var(--neutral-bg);color:var(--neutral)}
.hm-cal-card--past .hm-cal-date{z-index:1}
.hm-cal-card--past .hm-cal-date b{color:var(--gray)}
/* MỘT thẻ: trải ngang. :only-child không dùng được vì thẻ đã-qua
   vẫn nằm trong DOM, chỉ bị [hidden]. */
.hm-cal:not(:has(> li:not([hidden]) ~ li:not([hidden]))){grid-template-columns:1fr}
.hm-cal:not(:has(> li:not([hidden]) ~ li:not([hidden]))) .hm-cal-card{flex-direction:row}
.hm-cal:not(:has(> li:not([hidden]) ~ li:not([hidden]))) .hm-cal-img{flex:0 0 52%;aspect-ratio:16/10}
.hm-cal:not(:has(> li:not([hidden]) ~ li:not([hidden]))) .hm-cal-body{padding:clamp(24px,3vw,48px);justify-content:center}
.hm-cal:not(:has(> li:not([hidden]) ~ li:not([hidden]))) .hm-cal-name{font-size:clamp(24px,2.2vw,34px)}
.hm-cal:not(:has(> li:not([hidden]) ~ li:not([hidden]))) .hm-cal-last{margin-top:12px}

/* ── ④ SẢN PHẨM, DỊCH VỤ THÀNH VIÊN CUNG CẤP — 2 × 3 ─────────────────── */
.hm-svc{list-style:none;margin:30px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.hm-svc li{display:flex}
.hm-svc-card{flex:1;display:flex;gap:18px;padding:20px;border-radius:16px;background:var(--white);
  border:1px solid var(--border);text-decoration:none;color:var(--ink);
  transition:border-color var(--dur-btn),box-shadow var(--dur-btn),transform var(--dur-btn) var(--ease-btn)}
.hm-svc-card:hover{border-color:var(--green);box-shadow:var(--shadow-float);transform:translateY(-3px)}
/* Ô logo: bốn sắc nhấn xoay vòng, nhạt bằng color-mix để chữ mực ≥ 7:1 —
   màu phân biệt doanh nghiệp này với doanh nghiệp kia (§3). */
.hm-svc-logo{flex:0 0 clamp(72px,5.6vw,96px);align-self:flex-start;aspect-ratio:1;border-radius:14px;display:grid;place-items:center;
  background:color-mix(in srgb,var(--v) 32%,var(--white));font-size:clamp(22px,1.7vw,30px);font-weight:800;
  letter-spacing:-.03em;color:var(--green-deep)}
.hm-svc li:nth-child(4n+1) .hm-svc-logo{--v:var(--s2)}
.hm-svc li:nth-child(4n+2) .hm-svc-logo{--v:var(--s1)}
.hm-svc li:nth-child(4n+3) .hm-svc-logo{--v:var(--s4)}
.hm-svc li:nth-child(4n+4) .hm-svc-logo{--v:var(--s3)}
.hm-svc-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:9px}
.hm-svc-name{font-size:17.5px;line-height:1.38;font-weight:700;color:var(--ink);letter-spacing:-.018em;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;transition:color var(--dur-btn)}
.hm-svc-card:hover .hm-svc-name{color:var(--green)}
.hm-svc-pri{font-size:14px;font-weight:500;color:var(--ok)}
.hm-svc-btn{margin-top:auto;align-self:flex-start}
.hm-svc-body .hm-ai+.hm-svc-btn{margin-top:14px}
.hm-svc-card:hover .hm-svc-btn{border-color:var(--green);color:var(--green)}
.hm-view-add{display:flex;justify-content:center;margin-top:34px}

/* ── ⑤ NHU CẦU HỢP TÁC — hai cột thẻ thoáng, tên người ở chân thẻ ──────── */
.hm-want{list-style:none;margin:34px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.hm-want li{display:flex;flex-direction:column;gap:20px;padding:28px;border-radius:18px;background:var(--cream);
  border:1px solid var(--border);transition:border-color var(--dur-btn),background var(--dur-btn)}
.hm-want li:hover{background:var(--white);border-color:var(--green)}
.hm-want-place{display:flex;flex-direction:column;gap:10px}
.hm-want-label{display:flex;flex-wrap:wrap;gap:8px}
.hm-want h3{font-size:clamp(19px,1.4vw,21px);line-height:1.34;font-weight:700;letter-spacing:-.018em;color:var(--ink)}
/* Mô tả CẮT Ở HAI DÒNG bất kể độ dài (biên bản). Ngắn thì thẻ tự thấp. */
.hm-want-open{font-size:15.5px;line-height:1.6;color:var(--gray);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hm-want-ai{margin-top:auto;padding-top:18px;border-top:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;gap:14px}
.hm-want-ai .hm-ai b{font-size:16px}
.hm-want-ai .btn{flex:0 0 auto}


/* ── Điểm ngắt ─────────────────────────────────────────────────────────── */
@container app (max-width:1199px){
  .hm-svc{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@container app (max-width:1023px){
  .hm-alert{grid-template-columns:1fr}
  .hm-alert-line{grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr)}
  .hm-want{grid-template-columns:minmax(0,1fr)}
}
@container app (max-width:859px){
  .hm-svc{grid-template-columns:1fr}
  .hm-cal:not(:has(> li:not([hidden]) ~ li:not([hidden]))) .hm-cal-card{flex-direction:column}
}
@container app (max-width:559px){
  .app:has(.screen-head) .block-head .view{height:38px;padding:0 14px;font-size:14px}
  .hm-alert-line{grid-template-columns:112px minmax(0,1fr);gap:14px;padding-block:18px}
  .hm-cal-body{padding:18px 18px 20px}
  .hm-cal-last{flex-wrap:wrap}
  .hm-svc-card{flex-direction:column}
  .hm-svc-logo{flex-basis:auto;width:60px;font-size:20px}
  .hm-want li{padding:22px 20px}
  .hm-want-ai{flex-wrap:wrap}
}
@media (prefers-reduced-motion:reduce){
  .hm-img img,.hm-cal-card,.hm-cal-img img,.hm-svc-card{transition:none}
  .hm-alert a:hover .hm-img img,.hm-cal-card:hover,
  .hm-cal-card:hover .hm-cal-img img,.hm-svc-card:hover{transform:none}
}

/* ═══════════════════════════════════════════════════════════════════════
   CHI TIẾT SỰ KIỆN — DIỄN GIẢ · ĐỊA ĐIỂM · KẾT QUẢ  (dựng lại 19/09/2026)
   Người dùng: diễn giả "thu hút, trân trọng", rê chuột hiện thêm thông tin
   (tham khảo innovation.gov.vn); bản đồ "chuyên nghiệp, hiện đại, có ảnh
   map mẫu"; thống kê "smooth, thu hút, rõ ràng, ít text". Chú thích nghiệp
   vụ nằm trong HTML; ở đây ghi phần hình. Mọi màu là token.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── DIỄN GIẢ ── tấm nền chàm nhạt = "khung danh dự"; nền SÁNG vì thân màn
   trong luôn sáng (CLAUDE.md §4). Mục tự làm container để số cột theo bề
   rộng của CHÍNH nó (cột trái co giãn theo bố cục). */
.detrv{container:detrv/inline-size;margin-top:56px;padding:40px clamp(18px,3vw,44px) 46px;text-align:center;
  border:1px solid var(--border);border-radius:24px;
  background:radial-gradient(120% 90% at 50% 0%,var(--green-pale) 0%,var(--round-2) 48%,var(--white) 100%)}
.detrv-head{display:flex;flex-direction:column;align-items:center;gap:6px}
.detrv-kicker{display:inline-flex;align-items:center;gap:12px;font-size:12px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--green)}
.detrv-kicker::before,.detrv-kicker::after{content:"";width:28px;height:1px;background:currentColor;opacity:.5}
.detrv .det-topic{margin:0;padding:0;border:0;font-size:clamp(26px,3cqi,34px)}
/* Flex căn giữa: 1–4 người đều nằm giữa tấm nền, không để cột trống cuối
   hàng (§5B). Thẻ cao bằng nhau nhờ mặt thẻ chỉ có dòng NGẮN. */
.detrv-grid{list-style:none;margin:30px 0 0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:20px}
.detrv-fld{position:relative;flex:1 1 210px;max-width:270px;display:flex}
.detrv-fld:hover,.detrv-fld:focus-within,.detrv-fld--open{z-index:6}
.detrv-card{width:100%;display:flex;flex-direction:column;align-items:center;padding:28px 18px 18px;
  font:inherit;color:inherit;text-align:center;background:var(--white);border:1px solid var(--border);border-radius:20px;
  transition:transform .45s cubic-bezier(.16,1,.3,1),box-shadow .45s cubic-bezier(.16,1,.3,1),border-color .3s}
.detrv-card:hover,.detrv-fld--open .detrv-card{transform:translateY(-6px);border-color:var(--green-light);
  box-shadow:0 22px 40px -22px color-mix(in srgb,var(--green) 55%,transparent)}
.detrv-card:focus-visible{outline:3px solid var(--green);outline-offset:3px}
/* Ảnh: vành chuyển sắc 4px + vòng trắng — vành "huy chương" là thứ nói
   "người được mời" rõ nhất mà không cần một chữ nào. */
.detrv-img{width:112px;height:112px;padding:4px;border-radius:50%;flex:0 0 auto;
  background:conic-gradient(from 210deg,var(--green),var(--green-sub),var(--green-light),var(--green));
  transition:transform .45s cubic-bezier(.16,1,.3,1)}
.detrv-img>span,.detrv-img>img{display:grid;place-items:center;width:100%;height:100%;border-radius:50%;border:4px solid var(--white);
  background:linear-gradient(145deg,var(--dark-3),var(--green));color:#fff;object-fit:cover;
  font-family:var(--font-title);font-size:32px;font-weight:800;letter-spacing:.02em}
.detrv-card:hover .detrv-img{transform:scale(1.04)}
.detrv-name{margin-top:18px;font-size:18px;line-height:1.3;font-weight:700;letter-spacing:-.015em;color:var(--ink)}
.detrv-cd{margin-top:4px;font-size:14.5px;line-height:1.4;color:var(--gray)}
.detrv-svc{margin-top:2px;font-size:13px;line-height:1.4;color:var(--gray-pale)}
.detrv-session{margin-top:14px;padding:4px 12px;border-radius:999px;font-size:12.5px;font-weight:600;background:var(--neutral-bg);color:var(--neutral)}
.detrv-session--ntf{background:var(--info-bg);color:var(--info)}
/* Dấu hiệu bấm được nhìn thấy được — điện thoại không có rê chuột (§6B). */

/* Thẻ nổi — học .vid-speaker-tip của innovation.gov.vn: nền tối, đầu có
   ảnh nhỏ + tên + chức danh, tiểu sử cắt 5 dòng. Nền --dark-2, chữ TRẮNG
   (CLAUDE.md §8: không chữ xám trên nền màu). */
.detrv-place{position:absolute;left:50%;bottom:calc(100% + 12px);width:300px;padding:16px;text-align:left;
  background:var(--dark-2);color:#fff;border-radius:16px;box-shadow:var(--shadow-box);
  opacity:0;visibility:hidden;transform:translate(-50%,8px);pointer-events:none;
  transition:opacity .25s ease,transform .35s cubic-bezier(.16,1,.3,1),visibility .25s}
.detrv-place::before{content:"";position:absolute;left:0;right:0;bottom:-16px;height:16px}
.detrv-place::after{content:"";position:absolute;left:50%;bottom:-7px;margin-left:-7px;border:7px solid transparent;border-bottom:0;border-top-color:var(--dark-2)}
.detrv-fld:hover .detrv-place,.detrv-card:focus-visible+.detrv-place,.detrv-fld--open .detrv-place{opacity:1;visibility:visible;transform:translate(-50%,0);pointer-events:auto}
.detrv-place-head{display:flex;align-items:center;gap:10px}
.detrv-place-img{width:40px;height:40px;flex:0 0 40px;border-radius:50%;display:grid;place-items:center;font-size:13px;font-weight:700;
  background:color-mix(in srgb,#fff 14%,transparent)}
.detrv-place-head b{display:block;font-size:15px;line-height:1.3}
.detrv-place-head small{display:block;margin-top:2px;font-size:12.5px;line-height:1.4;color:var(--dark-text)}
.detrv-place p{margin-top:12px;font-size:13.5px;line-height:1.6;color:#fff;
  display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
.detrv-place-session{display:block;margin-top:12px;padding-top:10px;border-top:1px solid color-mix(in srgb,#fff 16%,transparent);
  font-size:12.5px;font-weight:600;color:var(--dark-label)}

/* ── ĐỊA ĐIỂM ── bản đồ phủ cả khối, thẻ thông tin đè mép trái. */
.detloc{container:detloc/inline-size;position:relative;margin-top:24px;min-height:440px;display:flex;align-items:center;
  border:1px solid var(--border);border-radius:24px;overflow:hidden;background:var(--neutral-bg)}
.detloc-desk{position:absolute;inset:0}
/* object-position 62% 46% = đúng toạ độ điểm đến trong ảnh: với object-fit
   cover, điểm p% của ảnh luôn trùng p% của khung → ghim đặt 62%/46% là khớp. */
.detloc-img{width:100%;height:100%;object-fit:cover;object-position:62% 46%;display:block}
.detloc-pin{position:absolute;left:62%;top:46%;display:flex;align-items:center}
.detloc-pin i{position:relative;width:36px;height:36px;margin:-36px 0 0 -18px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);
  background:var(--green);border:3px solid var(--white);box-shadow:0 10px 22px -6px color-mix(in srgb,var(--green-deep) 70%,transparent)}
.detloc-pin i::after{content:"";position:absolute;inset:8px;border-radius:50%;background:var(--white)}
.detloc-pin::before{content:"";position:absolute;left:-18px;top:-8px;width:36px;height:16px;border-radius:50%;
  background:color-mix(in srgb,var(--green) 35%,transparent);animation:detloc-lan 2.4s ease-out infinite}
.detloc-pin b{margin:-38px 0 0 12px;padding:6px 12px;border-radius:999px;background:var(--white);font-size:13px;font-weight:700;
  color:var(--ink);white-space:nowrap;box-shadow:var(--shadow-float)}
@keyframes detloc-lan{0%{transform:scale(.6);opacity:.9}100%{transform:scale(2.6);opacity:0}}
.detloc-card{position:relative;z-index:2;margin:28px;width:min(390px,calc(100% - 56px));padding:24px;
  background:var(--white);border-radius:18px;box-shadow:var(--shadow-box)}
.detloc-kicker{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--green)}
.detloc-kicker .ic{width:15px;height:15px;flex:0 0 15px;margin:0;color:currentColor}
.detloc-name{margin-top:8px;font-size:22px;line-height:1.25;font-weight:800;letter-spacing:-.02em;color:var(--ink)}
.detloc-bkg{margin-top:6px;font-size:15px;line-height:1.55;color:var(--gray)}
.detloc-zone{list-style:none;margin:18px 0 0;padding:0;border-top:1px solid var(--border)}
.detloc-zone li{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--border)}
.detloc-zone-num{width:28px;height:28px;flex:0 0 28px;border-radius:50%;display:grid;place-items:center;font-size:13px;font-weight:800;
  background:var(--green-pale);color:var(--green-dark)}
.detloc-zone b{display:block;font-size:14.5px;color:var(--ink)}
.detloc-zone small{display:block;font-size:13px;color:var(--gray)}
.detloc-btn{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.detloc-btn .ic{width:16px;height:16px;flex:0 0 16px;margin:0;color:currentColor}

/* ── KẾT QUẢ ── vòng tỉ lệ (phần hình còn lại ở khối "bản hai" cuối file). */
.detst-ring{position:relative}
.detst-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.detst-ring circle{fill:none;stroke-width:10}
.detst-ring-bg{stroke:var(--neutral-bg)}
.detst-ring-strip{stroke:var(--green);stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:calc(100 - var(--p));
  transition:stroke-dashoffset 1.4s cubic-bezier(.16,1,.3,1)}
.detst--slot .detst-ring-strip{stroke-dashoffset:100}
.detst-ring-num{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}

@media (prefers-reduced-motion:reduce){
  .detrv-card,.detrv-img,.detrv-place,.detst-ring-strip{transition:none}
  .detrv-card:hover,.detrv-fld--open .detrv-card,.detrv-card:hover .detrv-img{transform:none}
  .detloc-pin::before{animation:none;opacity:0}
}

/* ── Điểm ngắt ba khối — cuối file, sau mọi luật gốc ── */
@container detrv (max-width:560px){
  .detrv-grid{gap:12px}
  .detrv-fld{flex:1 1 calc(50% - 6px);max-width:none;flex-direction:column}
  .detrv-card{padding:22px 12px 14px}
  .detrv-img{width:88px;height:88px}
  .detrv-img>span{font-size:25px}
  .detrv-name{font-size:16px}
  /* Khổ hẹp: thẻ nổi không bay lên che thẻ khác — CHẠM thì mở NGAY DƯỚI
     thẻ, trải hết bề ngang lưới. Rê chuột không có nghĩa trên điện thoại. */
  .detrv-fld:hover .detrv-place{opacity:0;visibility:hidden}
  .detrv-place{position:static;width:auto;margin-top:8px;transform:none;display:none}
  .detrv-place::after{display:none}
  .detrv-fld--open{flex-basis:100%;order:0}
  .detrv-fld--open .detrv-place,.detrv-fld--open:hover .detrv-place{display:block;opacity:1;visibility:visible;transform:none}
  .detrv-fld--open .detrv-card{flex-direction:row;text-align:left;align-items:center;gap:0 14px;flex-wrap:wrap}
}
@container detloc (max-width:620px){
  .detloc{display:block;min-height:0}
  .detloc-desk{position:relative;height:240px}
  .detloc-card{margin:0;width:auto;border-radius:0;box-shadow:none;padding:20px}
  .detloc-pin b{display:none}
}

/* ── DANH SÁCH SỰ KIỆN · THANH LỌC (dựng lại 19/09/2026) ──────────────────
   Mỗi loại tiêu chí một kiểu điều khiển (xem chú thích trong HTML):
   `.ev-dlg` ô chọn có nhãn đứng trong khung — hình dáng "ô", không phải chip;
   `.ev-mp` công tắc — hình dáng "bật/tắt". Hai hình khác hẳn hàng tab thời
   gian nên không ai đọc nhầm ba thứ là cùng một loại. */
.ev-dlg{position:relative;display:inline-flex;align-items:center;height:44px;padding:0 38px 0 14px;gap:8px;
  border:1px solid var(--border-field);border-radius:12px;background:var(--white)}
.ev-dlg>span{font-size:13px;font-weight:600;color:var(--gray);white-space:nowrap}
.ev-dlg>span::after{content:":"}
.ev-dlg::after{content:"";position:absolute;right:14px;top:50%;width:8px;height:8px;margin-top:-6px;
  border-right:2px solid var(--gray);border-bottom:2px solid var(--gray);transform:rotate(45deg);pointer-events:none}
/* Cả khung là vùng bấm: select phủ kín khung, trong suốt. */
.ev-dlg select{position:absolute;inset:0;opacity:0;width:100%}
.ev-dlg:has(select:focus-visible){outline:2px solid var(--green);outline-offset:2px}
.ev-dlg:hover{border-color:var(--green)}
/* Chữ hiện giá trị đang chọn — do JS chép từ select (select đã trong suốt). */
.ev-dlg b{font-size:15px;font-weight:600;color:var(--ink);white-space:nowrap}

.ev-mp{display:inline-flex;align-items:center;gap:10px;min-height:44px;font-size:15px;font-weight:500;color:var(--ink)}
.ev-mp input{position:absolute;opacity:0;width:1px;height:1px}
.ev-mp-plus{position:relative;width:42px;height:24px;flex:0 0 42px;border-radius:999px;background:var(--border-field);
  transition:background .2s}
.ev-mp-plus::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;
  box-shadow:0 1px 3px rgba(11,18,32,.25);transition:transform .25s cubic-bezier(.16,1,.3,1)}
.ev-mp input:checked+.ev-mp-plus{background:var(--green)}
.ev-mp input:checked+.ev-mp-plus::after{transform:translateX(18px)}
.ev-mp input:focus-visible+.ev-mp-plus{outline:2px solid var(--green);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.ev-mp-plus,.ev-mp-plus::after{transition:none}}

/* ── KẾT QUẢ NGÀY HỘI — bản hai 19/09 — bỏ tiền gây quỹ, thêm lưới bốn ô ──────────────────── */
.detst{padding:0;overflow:hidden;text-align:center;border-radius:20px}
.detst-head{padding:22px 20px 24px;color:#fff;
  background:radial-gradient(90% 70% at 50% 0%,var(--green-sub) 0%,var(--green) 70%,var(--green-dark) 100%)}
.detst-kicker{font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#fff}
.detst-ring{width:168px;height:168px;margin:16px auto 0}
.detst-ring-bg{stroke:color-mix(in srgb,#fff 22%,transparent)}
.detst-ring-strip{stroke:#fff}
.detst-ring-num b{color:#fff;font-size:48px;line-height:1;font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.detst-ring-num small{margin-top:4px;font-size:13px;color:#fff;opacity:.9}
.detst-ring-label{margin-top:6px;font-size:16px;font-weight:700;color:#fff}
.detst-fld{list-style:none;margin:0;padding:14px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;background:var(--white)}
.detst-fld>li{min-width:0}
.detst-fld>li,.detst-link{display:flex;flex-direction:column;align-items:center;gap:2px;padding:16px 8px 14px;border-radius:14px;
  background:var(--round-2);border:1px solid transparent}
.detst-fld>li:has(.detst-link){padding:0;background:none;align-items:stretch}
.detst-link{width:100%}
.detst-link{height:100%;text-decoration:none;color:inherit;background:var(--green-pale);
  transition:transform .35s cubic-bezier(.16,1,.3,1),border-color .25s}
.detst-link:hover{transform:translateY(-3px);border-color:var(--green-light)}
.detst-link:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.detst-ic{width:36px;height:36px;margin-bottom:6px;border-radius:50%;display:grid;place-items:center;background:var(--white);color:var(--green)}
.detst-ic svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.detst-fld b{font-size:30px;line-height:1.05;font-weight:800;letter-spacing:-.03em;color:var(--green-deep);font-variant-numeric:tabular-nums}
.detst-fld>li>span:not(.detst-ic),.detst-link>span:not(.detst-ic){font-size:13px;line-height:1.35;color:var(--gray)}
.detst-cup{margin-top:6px;padding:2px 8px;border-radius:999px;font-size:11px;font-weight:700;line-height:1.5;background:var(--warn-bg);color:var(--warn)}
.detst-view{margin-top:6px;font-size:12.5px;font-weight:700;color:var(--green)}
@media (prefers-reduced-motion:reduce){.detst-link{transition:none}.detst-link:hover{transform:none}}
.detrv-place-link{display:inline-block;margin-top:10px;font-size:13px;font-weight:700;color:#fff;text-decoration:none;
  border-bottom:1px solid color-mix(in srgb,#fff 45%,transparent)}
.detrv-place-link:hover{border-bottom-color:#fff}
.detrv-place-link:focus-visible{outline:2px solid #fff;outline-offset:3px;border-radius:2px}

/* ══ CHI TIẾT SỰ KIỆN · MAPPING VỚI TRÌNH BIÊN TẬP (20/09/2026) ═══════════
   Ba luật dưới đây sinh ra khi các khối của màn này chuyển sang DỰNG TỪ DỮ
   LIỆU thay vì viết cứng cho một sự kiện: cùng một khối nay phải đứng được cả
   khi có ba mục, một mục, hay không mục nào (§5B). */

/* ── Dải hoạt động CHỈ ĐỂ ĐỌC ────────────────────────────────────────────
   Sự kiện chỉ có MỘT hoạt động thì không có gì để chọn giữa: bỏ ô tích, bỏ
   luôn cột giá (thẻ đăng ký bên phải đã nói giá và số chỗ). Còn hai cột nên
   khai lại grid — để nguyên ba cột thì cột thứ ba rỗng ăn 11.5rem bề ngang.
   ⚠️ Và phải GỠ con trỏ bàn tay mà .det-actions đặt sẵn: dải này không bấm được,
   bàn tay ở đây là hứa suông (§6B). Bỏ luôn cái nhấc lên khi rê chuột — nó
   cũng là một lời hứa "bấm được". */
.det-actions--view{cursor:auto}
.det-actions--view:hover{transform:none;box-shadow:none;border-color:var(--border)}
/* Số cột của dải chỉ-để-đọc khai CẠNH luật gốc (§8: luật chèn sau thì đè,
   nên luật khổ hẹp phải nằm sau nó, không phải trước). */

/* ── Lưới ảnh tổng kết khi CHƯA ĐỦ SÁU ẢNH ───────────────────────────────
   Lưới khảm (ô đầu chiếm 2×2) chỉ lấp kín với đúng sáu ô. Bốn ảnh trong lưới
   ba cột thì hàng cuối hở hai phần ba — nhìn ra là THIẾU ẢNH chứ không ra bố
   cục. Cách chữa là ĐỔI SỐ CỘT cho hàng cuối vẫn đầy, đúng luật §4, chứ không
   phải giãn ảnh ra cho kín. Script đặt --col và --empty theo số ảnh:
     1 → 1 cột (ô cao hơn, vì một dải 148px ngang cả cột trái là cái khe)
     2 → 2 cột · 3 → 3 cột · 4 → 2 cột (2×2) · 5 → 3 cột, ô đầu rộng 2 (2+3) */
.acct-img--even{grid-template-columns:repeat(var(--col,3),minmax(0,1fr))}
.acct-img--even>div:first-child{grid-column:span var(--empty,1);grid-row:auto}
.acct-img--one{grid-auto-rows:clamp(200px,24vw,310px)}

/* ── Số ô chỉ số LẺ ──────────────────────────────────────────────────────
   Bảng chỉ số bên quản trị tắt được từng hàng, nên số ô còn lại có thể lẻ.
   Lưới hai cột mà ô cuối đứng một mình thì nửa hàng bỏ trống — cho nó nằm
   hết bề ngang. */
.detst-fld>li:last-child:nth-child(odd){grid-column:span 2}

/* ── TÀI LIỆU (cột phải) ─────────────────────────────────────────────────
   Chỗ hiện của ô "Tài liệu đính kèm" (EBMS bước 7). Nền trắng, mỗi tệp một
   hàng có gạch chỉ — khác thẻ nền màu của "Lưu ý khi tham dự" ngay trên và
   khác thẻ chuyển sắc của "Kết quả" (§4: hai khối liền nhau không cùng bóng
   dáng). Định dạng và dung lượng đứng riêng bên phải: người đọc trên 4G cần
   biết mình sắp tải cái gì. */
.detdoc{padding:20px 22px 12px;background:var(--white);border:1px solid var(--border);border-radius:var(--r-card)}
.detdoc[hidden]{display:none}
.detdoc h3{font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gray)}
.detdoc-list{list-style:none;margin:8px 0 0;padding:0}
.detdoc-list>li+li{border-top:1px solid var(--border)}
.detdoc-fld{display:grid;grid-template-columns:18px minmax(0,1fr);gap:4px 11px;align-items:center;
  padding:12px 0;text-decoration:none;color:inherit}
.detdoc-fld .ic{width:18px;height:18px;grid-row:span 2;color:var(--green);align-self:start;margin-top:2px}
.detdoc-name{font-size:14.5px;line-height:1.45;font-weight:600;color:var(--ink)}
.detdoc-fld:hover .detdoc-name{color:var(--green-dark);text-decoration:underline}
.detdoc-fld:focus-visible{outline:2px solid var(--green);outline-offset:2px;border-radius:6px}
.detdoc-has{font-size:12.5px;color:var(--gray-pale);font-variant-numeric:tabular-nums}

/* ── ĐƠN VỊ ĐỒNG HÀNH ────────────────────────────────────────────────────
   Ô "Nhà tài trợ" ở tab Cài đặt của trình biên tập trước đây không có chỗ nào
   hiện ra. Dải huy hiệu ngang: khác tấm chàm nhạt thẻ đứng của Diễn giả ngay
   trên, khác lưới bốn ô trắng của Tài trợ ngay dưới (§4).
   max-width để một đơn vị duy nhất không kéo thành cái ống dài hết bề ngang
   — ca "chỉ có một" của §5B. */
.detsp-list{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:12px}
.detsp-list>li{flex:1 1 280px;max-width:460px;min-width:0;display:flex;align-items:center;gap:14px;
  padding:12px 20px 12px 12px;background:var(--white);border:1px solid var(--border);border-radius:999px}
.detsp-term{width:46px;height:46px;flex:0 0 46px;border-radius:50%;display:grid;place-items:center;
  font-size:15px;font-weight:800;letter-spacing:.02em;color:#fff;
  background:linear-gradient(150deg,var(--green-sub) 0%,var(--green) 60%,var(--green-dark) 100%)}
.detsp-term>img{width:100%;height:100%;border-radius:50%;object-fit:cover}
.detsp-text{min-width:0}
.detsp-text b{display:block;font-size:15.5px;line-height:1.3;font-weight:700;letter-spacing:-.012em;color:var(--ink)}
.detsp-text small{display:block;margin-top:3px;font-size:13px;line-height:1.4;color:var(--gray)}

/* ══════════ GỘP TỪ _tam-tv-a.css (19/09/2026) ══════════ */
/* ══════════════════════════════════════════════════════════════════════════
   NHÓM TV-A — KHU THÀNH VIÊN: DANH BẠ + HỒ SƠ THÀNH VIÊN (dựng 19/09/2026)
   File tạm, nạp SAU _screens.css. Trưởng nhóm gộp vào _screens.css sau.

   Hai màn:
     directory.html            tiền tố db-     Danh bạ, tìm và lọc (màn 10)
     member-profile.html   tiền tố hstv-   Hồ sơ chi tiết thành viên (màn 11)
   Dùng chung cả nhóm:       tiền tố tva-    biểu tượng, cổng quyền, liên hệ

   Nguyên tắc: dùng lại tối đa component của _common.css — MemberCard `.card-mem`,
   ContactActions `.cnt-wrap/.lh-bang/.kenh`, FilterPanel `.filters`, `.box-sel`,
   `.chip-filter`, `.chip-svc`, `.empty/.loi-tai`, `.down`, `.pagination`,
   `.violet-arc`, `.list-about`, `.label`, `.cat`. File này chỉ chứa phần BỐ CỤC và
   những chỗ component chung còn thiếu (ResultCount `.count-result`, SortSelect
   `.sap-xep` — CC §5.5 đã đặt tên nhưng chưa có CSS).
   Không mã màu mới — chỉ token (CLAUDE.md §3). Không viết `cursor` (§6B).
   Đã grep db- · hstv- · tva- · dem-kq · sap-xep với _chung/_man/_tam-qt-a:
   không trùng. Lớp con luôn mang tiền tố khối cha (bẫy §8).
   ══════════════════════════════════════════════════════════════════════════ */


/* ══ DÙNG CHUNG CẢ NHÓM ════════════════════════════════════════════════════ */

/* Biểu tượng dẫn dòng (Phosphor Regular, khai `<symbol id="tva-…">` đầu mỗi
   màn). ⚑ Trưởng nhóm chuyển các symbol này vào BIEU_TUONG của _shell.js. */
.tva-ic{width:18px;height:18px;flex:0 0 18px;display:block}

/* Thân màn trong: bỏ nhịp "mỗi khối một màn" của trang chủ đã có luật chung
   (_screens.css "MÀN TRONG KHÔNG PHẢI MỘT BỘ SLIDE"); ở đây chỉ chỉnh đệm trên
   cho sát đầu màn như các màn danh sách khác (Dịch vụ dùng 38px). */
.tva-body{padding-top:36px}

/* ── CỔNG QUYỀN TRÊN MÀN (PermissionGate dạng khối) ──────────────────────
   DESIGN_WEB_STANDARDS tầng B ④: khách mở trang cần đăng nhập thì được DẪN
   ĐƯỜNG, không bị chặn cụt — và KHÔNG làm mờ danh bạ phía sau lớp khoá.
   Nên thân màn thay hẳn bằng một khối mời, dựng trên vỏ EmptyState `.empty`
   (biến thể "chưa đủ quyền", CC §5.5). Chữ lấy đúng câu của hộp thoại
   PermissionGate trong _shell.js để hai lối vào nói cùng một giọng.
   Nền trắng viền đứt của `.empty` giữ nguyên — đổi sang viền liền cho khỏi
   đọc ra "trống", vì đây là chỗ có việc để làm chứ không phải chỗ rỗng. */
.tva-plus{border-style:solid;padding:56px 24px 48px;gap:14px}
.tva-plus .tva-plus-ic{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;
  background:var(--green-pale);color:var(--green)}
.tva-plus .tva-plus-ic .tva-ic{width:24px;height:24px;flex-basis:24px}
.tva-plus .tva-plus-kicker{font-size:12.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--green)}
.tva-plus h2{font-size:clamp(21px,2cqi,26px);line-height:1.3;letter-spacing:-.02em;font-weight:700}
.tva-plus p{color:var(--gray);font-size:15.5px;line-height:1.65}
.tva-plus .tva-plus-btn{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:6px}
.tva-plus .tva-addon{font-size:14.5px}
.tva-plus .tva-addon a{font-weight:500}

/* ── ContactActions trên thẻ: bảng nhỏ có biểu tượng dẫn dòng ─────────────
   `.cnt-table` của _common.css đã lo khung + dòng; chỉ thêm màu biểu tượng. */
.cnt-table .tva-ic{color:var(--gray)}
.cnt-table a:hover .tva-ic,.cnt-table button:hover .tva-ic{color:var(--green)}


/* ══ DANH-BA — tiền tố db- ═════════════════════════════════════════════════
   DỰNG LẠI 19/09 lượt 2 — người dùng: "design quá basic, ko thu hút gì cả".
   Bản trước đúng luật nhưng phẳng: ô tìm nằm lọt thỏm giữa thân trang, bộ lọc
   là cột ô tích trần, thẻ người là khối chữ xám đều nhau — nhìn không ra đâu
   là việc chính. Bản này đổi ba chỗ, giữ nguyên dữ liệu, luật lọc và JS liên hệ:

   ① Ô TÌM LÊN ĐẦU MÀN, to, nền trắng trên dải chàm — đầu màn thành chỗ LÀM
     việc chứ không chỉ để đọc tiêu đề (kiểu thanh tìm lớn của trang chủ v6).
     Dưới ô tìm là ba viên lối tắt EMBA · DBA · MPM, đồng bộ hai chiều với ô tích
     trong bộ lọc — người đi từ trang chủ vào bấm một lần là lọc, không phải
     tìm cột lọc. Câu dẫn `.hint` cũ bỏ: ô tìm + nhãn viên đã nói đúng việc đó
     (câu cũ vốn ⚑ chưa qua KH).
   ② BỘ LỌC LÀ MỘT TẤM THẺ (lượt 3: lựa chọn thành DÒNG mềm — xem mục ② bên dưới)
     — lượt 2 là VIÊN BẤM (vẫn là checkbox thật, chỉ đổi
     vỏ): bấm vào đổi nền chàm + dấu tích — nhìn ảnh tĩnh biết ngay đang lọc gì.
     Viên chương trình có chấm màu, CÙNG màu với dải bìa trên thẻ người.
   ③ THẺ NGƯỜI CÓ DẢI BÌA: dải chàm tối (cùng chất liệu đầu màn) + quầng màu
     theo CHƯƠNG TRÌNH (EMBA lam · DBA hồng · MPM lá · khác vàng — bốn sắc nhấn
     --s1..--s4, dùng làm MẢNG, không làm chữ; danh sách thành viên là chỗ
     CLAUDE.md §3 cho quá hai sắc vì màu mang nghĩa phân loại). Ảnh đại diện to
     72px nằm vắt qua mép bìa, có vòng màu chương trình. Lĩnh vực · khu vực
     thành hai viên có biểu tượng thay cho dòng "a · b · c" xám.
     Nút "Liên hệ" thành nút CHÍNH (việc chính của màn này là liên hệ).

   Chữ trên dải bìa chỉ có viên chương trình: chữ TRẮNG trên nền kính tối
   rgba(4,10,4,.45) — đạt dù quầng màu dưới nó sáng tới đâu (§2B: chữ trên nền
   màu luôn trắng).

   Bố cục: cột lọc trái (FilterPanel, CC §5.5 "dính khi cuộn") + vùng kết quả.
   Dưới 1024px cột lọc gập thành một bảng mở tại chỗ bằng nút "Bộ lọc (n)".
   ⚑ CC ghi ngăn trượt từ dưới lên. Mockup dựng bảng mở tại chỗ vì `.app` là
     container nên `position:fixed` bên trong bám theo `.app` chứ không theo
     màn hình. Đội code dựng ngăn thật được. */

/* Màu phân loại theo chương trình — một biến, mọi chỗ (viên lọc, viên lối
   tắt, dải bìa, vòng ảnh) đọc cùng một nguồn. */
.dir-hue-emba{--dir-hue:var(--s2)}
.dir-hue-dba{--dir-hue:var(--s1)}
.dir-hue-mpm{--dir-hue:var(--s4)}
.dir-hue-other{--dir-hue:var(--s3)}

/* ── ① ĐẦU MÀN: ô tìm lớn + viên lối tắt ──────────────────────────────── */
.dir-head .dir-search{margin-top:22px;display:flex;align-items:center;gap:6px;padding:6px;
  max-width:46rem;background:var(--white);border-radius:18px;
  box-shadow:0 20px 48px rgba(4,10,4,.38),0 0 0 1px rgba(255,255,255,.12);
  transition:box-shadow 220ms var(--ease-btn)}
.dir-head .dir-search:focus-within{box-shadow:0 20px 48px rgba(4,10,4,.38),0 0 0 4px var(--green-light)}
.dir-search-fld{position:relative;flex:1;min-width:0;display:flex;align-items:center}
.dir-search-fld .ic{position:absolute;left:16px;width:21px;height:21px;color:var(--green);pointer-events:none}
.dir-search-fld input{width:100%;height:54px;border:0;background:none;border-radius:12px;
  padding:0 12px 0 48px;font:inherit;font-size:16.5px;color:var(--ink)}
.dir-search-fld input::placeholder{color:var(--gray-pale)}
/* Viền focus đã nằm trên cả hộp (:focus-within) — đường viền thứ hai quanh
   ô bên trong là thừa. */
.dir-search-fld input:focus{outline:none}
.dir-search-btn{height:54px;padding:0 28px;border-radius:13px;font-size:16px;font-weight:600}
.dir-search-btn .ic{display:none;width:20px;height:20px}

.dir-quick{margin-top:16px;display:flex;align-items:center;flex-wrap:wrap;gap:8px 10px}
.dir-quick-label{font-size:14px;color:var(--dark-text);margin-right:4px}
.dir-quick button{display:inline-flex;align-items:center;gap:9px;height:38px;padding:0 17px 0 14px;
  border-radius:999px;border:1px solid rgba(255,255,255,.24);background:rgba(255,255,255,.07);
  color:#fff;font:inherit;font-size:14.5px;font-weight:600;letter-spacing:.03em;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  transition:background 200ms,border-color 200ms,color 200ms,transform 200ms var(--ease-bounce)}
.dir-quick button i{width:9px;height:9px;border-radius:50%;background:var(--dir-hue);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--dir-hue) 25%,transparent)}
.dir-quick button:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.45);transform:translateY(-2px)}
.dir-quick button[aria-pressed="true"]{background:var(--white);border-color:var(--white);color:var(--green-deep)}
.dir-quick button:focus-visible{outline-color:var(--white)}

/* ── Khung hai cột ─────────────────────────────────────────────────────── */
.dir-set{display:grid;grid-template-columns:17.5rem minmax(0,1fr);gap:clamp(24px,2.6vw,44px);align-items:start}
.dir-set>*{min-width:0}

/* ── ② BỘ LỌC — lượt 3 (19/09): danh sách mềm thay cho viên viền ─────────
   Người dùng: bản viên có viền "hơi thô". Lý do thật: mười hai viên viền xám
   đậm (--border-field) xếp so le theo độ dài chữ — nhiều đường viền, không hàng lối.
   Bản này bỏ hết viền quanh lựa chọn: mỗi lựa chọn là MỘT DÒNG thẳng hàng
   (ô tích bo tròn · tên · số người khớp), rê chuột thì nền dịu, chọn thì cả
   dòng sáng lên nền --green-pale. Mỗi nhóm là một ngăn gập được (details) —
   mở sẵn cả ba, gập chỉ để ai muốn gọn thì gọn; ngăn trượt êm (interpolate-
   size, trình duyệt cũ thì mở/đóng tức thì — vẫn đúng).
   Số bên phải mỗi dòng = số người thuộc lựa chọn đó, tính theo từ khoá + các
   nhóm KHÁC đang chọn (kiểu "facet") — biết trước khi bấm, khỏi lọc ra rỗng.
   Dòng về 0 thì mờ đi nhưng vẫn bấm được. Đây là số đếm chức năng như
   "16 thành viên", không phải số liệu giới thiệu (§2). */
.dir-filter{position:sticky;top:112px;display:flex;flex-direction:column;
  padding:8px;background:var(--white);border:1px solid var(--border);border-radius:20px;
  interpolate-size:allow-keywords;
  /* Màn Giải pháp mở đủ nhóm lọc thì cột này cao 943px — khổ HD còn 584px
     kể từ mép dính, nên mấy nhóm cuối không bao giờ tới được. Cuộn trong
     cột, thanh mảnh, chỉ hiện khi thiếu chỗ. (21/09)                    */
  max-height:calc(100svh - 104px);overflow-y:auto;overscroll-behavior:contain;
  scrollbar-width:thin}
.dir-filter>*{flex:0 0 auto}
.dir-filter-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 10px 12px}
.dir-filter-head h2{display:flex;align-items:center;gap:10px;font-size:17px;font-weight:700;letter-spacing:-.01em}
.dir-filter-head h2 span{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;
  background:var(--green-deep);color:#fff}
.dir-filter-head h2 .tva-ic{width:17px;height:17px;flex-basis:17px}
.dir-filter-del{border:0;background:none;padding:6px 8px;border-radius:8px;font-size:14px;font-weight:600;color:var(--green)}
.dir-filter-del:hover{background:var(--green-pale)}
.dir-filter-del[hidden]{display:none}

.dir-filter .filters{display:flex;flex-direction:column}
.dir-group{border-top:1px solid var(--border);padding:6px 0}
.dir-group summary{list-style:none;display:flex;align-items:center;gap:9px;min-height:48px;padding:6px 8px;
  border-radius:12px;font-size:14.5px;font-weight:600;color:var(--ink);transition:background 180ms}
.dir-group summary::-webkit-details-marker{display:none}
.dir-group summary:hover{background:var(--cream)}
.dir-group-ic{position:relative;width:28px;height:28px;flex:0 0 28px;border-radius:9px;display:grid;place-items:center;
  background:var(--green-pale);color:var(--green)}
.dir-group-ic .ic{width:17px;height:17px}
.dir-group-name{flex:1;min-width:0}
/* Số lựa chọn đang bật trong nhóm — nhóm đã gập vẫn biết đang lọc gì. */
/* Nằm ở góc biểu tượng nhóm (kiểu chấm báo) chứ không chiếm chỗ trên hàng —
   để tên nhóm dài nhất ("Chương trình học tại AIT") vẫn nằm một dòng. */
.dir-group-num{position:absolute;top:-7px;right:-9px;min-width:19px;height:19px;padding:0 5px;border-radius:999px;display:grid;place-items:center;
  background:var(--green);color:#fff;font-size:11px;font-weight:700;font-variant-numeric:tabular-nums;box-shadow:0 0 0 2px var(--white)}
.dir-group-num[hidden]{display:none}
.dir-group-arrow{width:8px;height:8px;flex:0 0 8px;margin:0 3px 3px 0;border:solid var(--gray);border-width:0 2px 2px 0;
  rotate:45deg;transition:rotate 280ms var(--ease-in)}
.dir-group[open] .dir-group-arrow{rotate:-135deg;margin-bottom:-3px}
.dir-group::details-content{block-size:0;overflow:clip;
  transition:block-size 320ms var(--ease-in),content-visibility 320ms allow-discrete}
.dir-group[open]::details-content{block-size:auto}
.dir-group fieldset{border:0;margin:0;padding:4px 0 4px;min-width:0;display:flex;flex-direction:column;gap:2px}

/* Dòng lựa chọn: checkbox THẬT trong suốt phủ kín dòng — bàn phím, trình đọc
   màn hình, con trỏ đều theo checkbox; phần nhìn thấy là các span kế sau. */
.dir-box{position:relative;display:flex;align-items:center;gap:12px;min-height:42px;padding:0 10px 0 12px;
  border-radius:12px;font-size:15px;color:var(--ink);transition:background 180ms,color 180ms}
.dir-box input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;z-index:1}
.dir-box:hover{background:var(--cream)}
.dir-box-fld{position:relative;width:20px;height:20px;flex:0 0 20px;border-radius:6px;
  border:1.5px solid var(--border-field);background:var(--white);
  transition:background 180ms,border-color 180ms,scale 260ms var(--ease-bounce)}
.dir-box-fld::after{content:"";position:absolute;left:5.5px;top:2px;width:5px;height:10px;
  border:solid #fff;border-width:0 2px 2px 0;rotate:45deg;scale:0;transition:scale 220ms var(--ease-bounce)}
.dir-box-name{flex:1;min-width:0;display:flex;align-items:center;gap:8px;line-height:1.35}
.dir-box-name i{width:9px;height:9px;flex:0 0 9px;border-radius:50%;background:var(--dir-hue)}
.dir-box-count{min-width:28px;height:22px;padding:0 8px;border-radius:999px;display:grid;place-items:center;
  background:var(--cream);font-size:12.5px;font-weight:600;color:var(--gray);font-variant-numeric:tabular-nums;
  transition:background 180ms,color 180ms}
.dir-box:has(input:checked){background:var(--green-pale);color:var(--green);font-weight:600}
.dir-box input:checked~.dir-box-fld{background:var(--green);border-color:var(--green);scale:1.06}
.dir-box input:checked~.dir-box-fld::after{scale:1}
.dir-box input:checked~.dir-box-count{background:var(--white);color:var(--green)}
.dir-box:hover input:not(:checked)~.dir-box-fld{border-color:var(--green)}
.dir-box input:focus-visible~.dir-box-fld{outline:2px solid var(--green);outline-offset:2px}
/* Tích thêm dòng này là ra 0 người — mờ đi để khỏi bấm nhầm, nhưng vẫn bấm
   được (người ta có thể đang định bỏ tích nhóm khác ngay sau đó). */
.dir-box.dir-box--empty:not(:has(input:checked)) .dir-box-name,
.dir-box.dir-box--empty:not(:has(input:checked)) .dir-box-count{opacity:.5}
@media (prefers-reduced-motion:reduce){
  .dir-group::details-content,.dir-group-arrow,.dir-box,.dir-box-fld,.dir-box-fld::after{transition:none}
}
/* Chân bảng lọc chỉ dùng ở khổ hẹp (xem điểm ngắt). */
.dir-filter-last{display:none}

/* ── Thanh kết quả: số người · nút bộ lọc (khổ hẹp) · sắp xếp ──────────── */
.dir-tools{display:flex;align-items:center;flex-wrap:wrap;gap:12px 16px;min-height:48px}
/* ResultCount `.count-result` (CC §5.5) — aria-live nằm trên thẻ HTML. */
.count-result{font-size:15.5px;color:var(--gray);display:flex;align-items:baseline;gap:8px}
.count-result b{font-family:var(--font-title);font-size:28px;font-weight:800;color:var(--ink);
  font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.dir-open-filter{display:none}
.dir-open-filter .tva-ic{width:17px;height:17px}

/* SortSelect `.sap-xep` (CC §5.5) dựng thành NÚT HAI MẶT thay cho ô chọn thả:
   chỉ có hai cách xếp, bày sẵn cả hai thì thấy ngay đang xếp theo gì — cùng
   lý lẽ với nút VI·EN (CLAUDE.md §5D). Không "Nổi bật" (tầng B ⑥). */
.dir-sort{margin:0 0 0 auto;padding:4px;border:1px solid var(--border);border-radius:14px;
  background:var(--white);display:inline-flex;align-items:center;gap:2px;min-width:0}
.dir-sort legend{float:left;padding:0 8px 0 10px;font-size:14px;color:var(--gray);white-space:nowrap}
.dir-sort label{position:relative;display:inline-flex}
.dir-sort input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;z-index:1}
.dir-sort span{display:grid;place-items:center;height:38px;padding:0 16px;border-radius:10px;
  font-size:14.5px;font-weight:500;color:var(--gray);white-space:nowrap;transition:background 200ms,color 200ms}
.dir-sort label:hover input:not(:checked)+span{color:var(--green)}
.dir-sort input:checked+span{background:var(--green-deep);color:#fff;font-weight:600}
.dir-sort input:focus-visible+span{outline:2px solid var(--green);outline-offset:2px}

/* Chip bộ lọc đang bật — hàng này tự ẩn khi không có chip nào (§5B: không
   để trơ một khoảng trống). */
.dir-sum{display:flex;align-items:center;flex-wrap:wrap;gap:8px 10px;margin-top:14px}
.dir-sum:not(:has(.chip-filter)){display:none}
.dir-chip{display:contents}
.dir-chip .chip-filter{border-color:var(--green);color:var(--green);font-weight:500;background:var(--green-pale)}
.dir-chip .chip-filter button{color:var(--green)}
.dir-chip .chip-filter button .tva-ic{width:14px;height:14px;flex-basis:14px}

/* ── Lưới thẻ. 21rem tối thiểu: khổ 1440 ra 3 cột (~340px), khổ 1880 vẫn 3
   cột rộng (~440px) — 4 cột thì chân thẻ gãy hàng. Thẻ tự thu nút "Xem hồ
   sơ" về mũi tên khi hẹp (truy vấn container `card`), nên 340px vẫn một hàng. */
.dir-grid{margin-top:20px;display:grid;gap:20px;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,20.5rem),1fr))}
.dir-grid>*{min-width:0}
.dir-grid[hidden]{display:none}

/* ── ③ THẺ NGƯỜI (MemberCard biến thể danh bạ) ─────────────────────────── */
.dir-card{position:relative;display:flex;flex-direction:column;background:var(--white);
  border:1px solid var(--border);border-radius:20px;container:card/inline-size;
  transition:transform 360ms var(--ease-in),box-shadow 360ms var(--ease-in),border-color 200ms}
.dir-card:hover{transform:translateY(-5px);border-color:color-mix(in srgb,var(--green) 40%,var(--border));
  box-shadow:0 22px 44px rgba(11,26,9,.13)}
/* ⚑ THẺ ĐANG MỞ BẢNG LIÊN HỆ PHẢI NẰM TRÊN CÁC THẺ SAU NÓ.
   `container:card/inline-size` ở trên kéo theo `contain:layout`, mà `contain:layout`
   DỰNG MỘT NGỮ CẢNH XẾP LỚP. Nên `z-index:30` của `.cnt-table` chỉ có nghĩa BÊN
   TRONG thẻ của nó; ra ngoài, cả thẻ vẫn là `z-index:auto` và xếp theo thứ tự cây.
   Bảng liên hệ đổ xuống quá mép thẻ ~185px, nên thẻ ở hàng dưới (đứng sau trong cây)
   phủ lên đúng chỗ có nút "Gửi email": bấm vào là mở hồ sơ người khác.
   Đo 28/09 trên staging — `elementFromPoint` giữa nút "Gửi email" trả về
   `a.sub-link` của thẻ kế tiếp. Nâng cả thẻ lên là đủ, và chỉ lúc bảng đang mở. */
.dir-card:has(.cnt-table:not([hidden])){z-index:5}
/* Cả thẻ bấm được: liên kết phủ trên tên; nút ở chân thẻ nằm TRÊN lớp phủ. */
.dir-card .sub-link{text-decoration:none;color:inherit}
.dir-card .sub-link::after{content:"";position:absolute;inset:0;border-radius:20px}

/* Dải bìa: chàm tối như đầu màn + quầng màu chương trình ở góc dưới phải +
   hai vòng quỹ đạo mảnh (họ hàng với chòm quỹ đạo đầu màn). Trang trí thuần —
   aria-hidden, không mang chữ. */
.dir-card-cover{position:relative;height:88px;border-radius:19px 19px 0 0;overflow:hidden;
  background:
    radial-gradient(75% 150% at 100% 115%,color-mix(in srgb,var(--dir-hue) 85%,transparent) 0%,transparent 60%),
    radial-gradient(60% 120% at 0% 0%,color-mix(in srgb,var(--green-sub) 45%,transparent) 0%,transparent 70%),
    linear-gradient(125deg,var(--dark-3) 0%,var(--dark-5) 100%)}
.dir-card-cover::before,.dir-card-cover::after{content:"";position:absolute;border-radius:50%;
  border:1px solid rgba(255,255,255,.16);transition:transform 700ms var(--ease-in)}
.dir-card-cover::before{width:220px;height:220px;right:-70px;top:-120px}
.dir-card-cover::after{width:120px;height:120px;right:-20px;top:-70px;border-color:rgba(255,255,255,.22)}
.dir-card:hover .dir-card-cover::before{transform:scale(1.14) rotate(8deg)}
.dir-card:hover .dir-card-cover::after{transform:scale(1.22)}

/* Viên chương trình trên dải bìa — chữ trắng trên kính tối. */
.dir-card-det{position:absolute;top:14px;right:14px;display:inline-flex;align-items:center;gap:7px;
  height:28px;padding:0 12px 0 10px;border-radius:999px;
  background:rgba(4,10,4,.45);border:1px solid rgba(255,255,255,.2);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  color:#fff;font-size:13px;font-weight:600;letter-spacing:.02em;white-space:nowrap}
.dir-card-det .ic{width:15px;height:15px;flex:0 0 15px}

.dir-card-body{display:flex;flex-direction:column;padding:0 20px 18px;flex:1}
/* position:relative — dải bìa phía trên là phần tử định vị (overflow:hidden),
   ảnh không định vị thì bị bìa vẽ ĐÈ lên, chỉ lộ nửa dưới. */
.dir-card-img{position:relative;z-index:1;--c:76px;margin-top:-38px;margin-bottom:12px;font-size:25px;font-weight:700;
  border:4px solid var(--white);box-shadow:0 0 0 2px var(--dir-hue),0 8px 18px rgba(11,26,9,.16);
  transition:scale 420ms var(--ease-bounce)}
.dir-card:hover .dir-card-img{scale:1.05}
.dir-card-name{font-size:18.5px;font-weight:700;line-height:1.3;letter-spacing:-.015em;color:var(--ink)}
.dir-card:hover .dir-card-name{color:var(--green)}
.dir-card-cd{margin-top:3px;font-size:14.5px;color:var(--gray);line-height:1.45}
.dir-card-company{margin-top:1px;font-size:15px;font-weight:600;color:var(--ink);line-height:1.45}

/* Giới thiệu ngắn (trường nâng cao bắt buộc — Open item 5) — người dùng
   19/09: "hiển thị thêm thông tin mô tả tổng quan thành viên… để PR". Đặt
   ngay dưới doanh nghiệp, trước hai viên lĩnh vực/khu vực: đọc tên → vai trò
   → người này làm gì. Vạch trái mang màu chương trình (mảng, không phải chữ)
   cho đoạn này ra dáng lời tự giới thiệu. Cắt ở 3 dòng để các thẻ trong một
   hàng không lệch nhau quá; đọc đủ ở hồ sơ. Thiếu giới thiệu → bỏ hẳn đoạn. */
.dir-card-about{margin-top:12px;padding-left:12px;border-left:3px solid var(--dir-hue);
  font-size:14.5px;line-height:1.6;color:var(--gray);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

/* Kênh liên hệ dùng LOGO THƯƠNG HIỆU (người dùng 19/09: "các icon zalo… có
   icon đặc trưng, sao ko dùng"). Logo tự là một mảng màu nhận ra ngay, nên
   bỏ viền hộp quanh nó — chỉ còn ô bấm 38px, rê chuột thì logo nhấc lên.
   Màu lấy từ token --zalo / --facebook / --linkedin (DESIGN_WEB_STANDARDS
   §2A·8) — là màu nhận diện của hãng, chỉ dùng cho logo, không làm chữ. */
.dir-card-foot .channel{width:38px;height:38px;border:0;border-radius:10px;background:none;
  transition:translate 220ms var(--ease-bounce),background 180ms}
.dir-card-foot .channel:hover{translate:0 -2px;background:var(--cream)}
.dir-card-foot .channel .dir-logo{width:28px;height:28px;display:block}

.dir-card-meta{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.dir-card-meta li{display:inline-flex;align-items:center;gap:6px;min-height:30px;padding:3px 11px 3px 9px;
  border-radius:9px;background:var(--cream);font-size:13.5px;font-weight:500;color:var(--gray);line-height:1.35}
.dir-card-meta .ic{width:15px;height:15px;flex:0 0 15px;color:var(--green)}

.dir-card-svc{margin-top:16px;padding-top:14px;border-top:1px dashed var(--border)}
.dir-card-svc-label{font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--gray);margin-bottom:8px}
.dir-card-svc .chip-svc{max-width:100%;overflow:hidden;text-overflow:ellipsis}

.dir-card-foot{position:relative;z-index:1;display:flex;align-items:center;gap:6px;
  padding:14px 20px 18px;border-top:1px solid var(--border)}
.dir-card-foot .btn--main .tva-ic{width:16px;height:16px;flex-basis:16px}
.dir-card-foot .cnt-wrap .btn{padding:0 15px}
.dir-card-view{margin-left:auto;display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 6px 0 10px;
  border-radius:10px;color:var(--green);font-size:14.5px;font-weight:600;text-decoration:none;white-space:nowrap}
.dir-card-view:hover{background:var(--green-pale)}
.dir-card-view .tva-ic{width:18px;height:18px;flex-basis:18px;scale:-1 1;transition:translate 240ms var(--ease-btn)}
.dir-card:hover .dir-card-view .tva-ic{translate:3px 0}
/* Thẻ hẹp: "Xem hồ sơ" thu về nút mũi tên (vẫn có tên đọc được qua
   aria-label). Cả thẻ vẫn bấm được, nên mất chữ ở đây không mất lối. */
@container card (max-width:379px){
  .dir-card-view{width:36px;padding:0;justify-content:center;background:var(--green-pale)}
  .dir-card-view span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}
@container card (max-width:339px){
  .dir-card-body{padding:0 16px 16px}
  .dir-card-foot{padding:12px 16px 16px}
  .dir-card-foot .cnt-wrap .btn{padding:0 12px}
}

/* Vào sân: thẻ nhô lên lần lượt mỗi lần dựng lại lưới (tải trang, lọc, sang
   trang) — lọc xong thấy ngay kết quả MỚI. Dùng thuộc tính `translate` riêng,
   còn rê chuột dùng `transform` — tránh bẫy §8 "animation both đè hover".
   Chỉ khi JS đã chạy (.fx); giảm chuyển động thì bỏ hẳn (§5C). */
@keyframes dir-in{from{opacity:0;translate:0 18px}to{opacity:1;translate:0 0}}
.fx .dir-card{animation:dir-in 560ms var(--ease-in) both;animation-delay:calc(var(--i,0) * 50ms)}
@media (prefers-reduced-motion:reduce){
  .fx .dir-card{animation:none}
  .dir-card,.dir-card *,.dir-card-cover::before,.dir-card-cover::after,.dir-quick button{transition:none}
  .dir-card:hover{transform:none}
}

/* Mảnh xương (SkeletonCard) khớp đúng hình thẻ thật: bìa · tròn · dòng. */
.dir-down{pointer-events:none}
.dir-down:hover{transform:none;box-shadow:none;border-color:var(--border)}
.dir-down .dir-down-cover{display:block;height:88px;border-radius:19px 19px 0 0}
.dir-down .dir-down-body{display:flex;flex-direction:column;gap:10px;padding:0 20px 22px}
.dir-down .dir-down-round{width:76px;height:76px;border-radius:50%;margin-top:-38px;border:4px solid var(--white)}
.dir-down .dir-down-line{height:14px}

/* Trạng thái rỗng / lỗi nằm dưới thanh công cụ, không thay cả màn — người
   dùng vẫn phải sửa được từ khoá và bộ lọc ngay tại chỗ. */
.dir-status{margin-top:20px}

/* Phân trang: máy tính số trang, điện thoại "Trước · 1/2 · Sau" (CC §5.5). */
.dir-page{margin-top:36px}
.dir-page .dir-page-compact{display:none}
.dir-page a[aria-disabled="true"]{color:var(--gray-pale);pointer-events:none}

@container app (max-width:1023px){
  .dir-set{display:flex;flex-direction:column;align-items:stretch;gap:0}
  .dir-result{display:contents}
  .dir-tools{order:1}
  .dir-filter{order:2}
  .dir-sum{order:3}
  .dir-grid,.dir-status{order:4}
  .dir-page{order:5}
  .dir-open-filter{display:inline-flex;margin-left:auto}
  .dir-sort{margin-left:0}
  /* Chỉ gập khi JS đã chạy (lớp do JS gắn) — tắt JS thì bộ lọc vẫn hiện. */
  .dir-filter.dir-collapse{display:none}
  .dir-filter{position:static;margin-top:14px}
  .dir-filter .filters{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 16px}
  .dir-filter-last{display:flex;gap:10px;flex-wrap:wrap;padding:14px 10px 6px;border-top:1px solid var(--border)}
}
@container app (max-width:639px){
  .dir-head .dir-search{padding:5px;border-radius:16px}
  .dir-search-fld input{height:48px;padding-left:44px;font-size:16px}
  .dir-search-fld .ic{left:14px}
  .dir-search-btn{height:48px;padding:0 18px}
  .dir-quick-label{flex-basis:100%}
  .dir-filter .filters{grid-template-columns:1fr}
  .dir-tools{gap:10px}
  .dir-open-filter{flex:1 1 auto}
  .dir-sort{flex:1 1 100%;order:3}
  .dir-sort legend{display:none}
  .dir-sort label{flex:1}
  .dir-sort span{width:100%;height:40px}
  .dir-filter-last .btn{flex:1 1 auto}
  .dir-box{min-height:46px}
  .dir-card-foot .channel{width:44px;height:44px}
  .dir-page .dir-page-num{display:none}
  .dir-page .dir-page-compact{display:grid}
}

/* ══ HO-SO-THANH-VIEN — tiền tố hstv- ═════════════════════════════════════
   DỰNG LẠI 19/09 (⚑ KH) — người dùng: "quá khó nhìn… chia tab hay block cho
   thu hút, đừng viết hổ lốn… ký hiệu zalo cũng quy chuẩn style đi".
   Bản trước rải đều năm mục chữ trên nền trống, dữ kiện nằm thành bảng xám,
   ba nút mạng xã hội ba kiểu. Bản này:
   ① ĐẦU MÀN LÀ DANH THIẾP: ảnh to có vòng màu chương trình (cùng mã màu thẻ ở
     Danh bạ), tên, chức danh · doanh nghiệp, và bốn dữ kiện ngắn thành viên
     kính (trước là bảng xám cột trái — nay không lặp lại ở đâu nữa).
   ② CỘT TRÁI chỉ còn THẺ LIÊN HỆ (dính khi cuộn) — khối xương sống của hồ sơ.
     Mạng xã hội thành MỘT kiểu dòng: logo hãng · tên · mũi tên đi ra.
   ③ CỘT PHẢI CHIA TAB: Tổng quan (giới thiệu · cung/tìm · thông tin khác) ·
     Doanh nghiệp · Bài viết. Mỗi mục là một KHỐI trắng có đầu khối biểu tượng
     — cùng một ngữ pháp, nhìn là biết đâu là đâu.
   Tab chứ không cuộn dài: Doanh nghiệp là thông tin PHỤ (biên bản 18/09) và
   Bài viết là lối đi tiếp — đẩy chúng sang tab để Tổng quan gọn trong một
   màn, trọng tâm cung/tìm lên sát đầu. Tab chỉ bật khi JS chạy. */

/* Đầu màn: lối về Danh bạ là viên kính `.kicker` + mũi tên (§6B). */
.head-sub a.kicker{text-decoration:none;transition:background var(--dur-btn) var(--ease-btn)}
.head-sub a.kicker:hover{background:color-mix(in srgb,var(--white) 16%,transparent)}
.mpf-ticket .tva-ic{width:15px;height:15px;flex-basis:15px;color:var(--dark-label)}
.head-sub.mpf-head{padding-bottom:clamp(28px,2.8vw,44px)}

/* ── ① Danh thiếp ──────────────────────────────────────────────────────── */
.mpf-person{margin-top:22px;display:flex;align-items:center;gap:clamp(18px,2.2cqi,32px)}
.mpf-person-text{min-width:0}
.mpf-img{--c:120px;font-size:40px;font-weight:700;
  border:4px solid var(--dark-3);box-shadow:0 0 0 3px var(--dir-hue,var(--green-sub)),0 16px 36px rgba(4,10,4,.45)}
.head-sub .mpf-person h1{margin-top:0}
.head-sub .mpf-person .hint{margin-top:8px;font-size:17px;color:var(--dark-text)}
.head-sub .mpf-person .hint b{color:#fff;font-weight:600}
.mpf-border{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.mpf-border li{display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:4px 15px 4px 12px;
  border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  color:#fff;font-size:14.5px;font-weight:500;line-height:1.3}
.mpf-border .ic{width:17px;height:17px;flex:0 0 17px;color:var(--dark-label)}

.mpf-set{display:grid;grid-template-columns:21rem minmax(0,1fr);gap:clamp(24px,2.8vw,48px);align-items:start}
.mpf-set>*{min-width:0}

/* ── ② Thẻ liên hệ ─────────────────────────────────────────────────────── */
.mpf-left{position:sticky;top:112px}
.mpf-cnt{background:var(--white);border:1px solid var(--border);border-radius:20px;
  padding:22px;display:flex;flex-direction:column;gap:12px}
.mpf-cnt h2{display:flex;align-items:center;gap:10px;font-size:18px;font-weight:700;letter-spacing:-.01em;margin-bottom:4px}
.mpf-cnt-ic{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;background:var(--green-deep);color:#fff}
.mpf-cnt-ic .tva-ic{width:18px;height:18px}
.mpf-cnt .btn .tva-ic{width:17px;height:17px}
/* Số điện thoại chỉ hiện SAU khi bấm (tầng B ②) — hàng số + sao chép. */
.mpf-num{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
  padding:10px 12px;border-radius:12px;background:var(--green-pale)}
.mpf-num[hidden]{display:none}
.mpf-num a{font-size:18px;font-weight:700;color:var(--green-dark);text-decoration:none;
  font-variant-numeric:tabular-nums;letter-spacing:.01em}
.mpf-num a:hover{text-decoration:underline}

.mpf-social{display:flex;flex-direction:column;gap:8px;margin-top:6px}
.mpf-social[hidden]{display:none}
.mpf-social-label{display:flex;align-items:center;gap:10px;font-size:12px;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;color:var(--gray);margin-bottom:2px}
.mpf-social-label::after{content:"";flex:1;height:1px;background:var(--border)}
/* Một kiểu dòng cho MỌI kênh: cùng cao, cùng lề, cùng vị trí logo và mũi tên. */
.mpf-social-item{display:flex;align-items:center;gap:12px;min-height:52px;padding:0 14px 0 12px;
  border:1px solid var(--border);border-radius:14px;background:var(--white);
  font-size:15.5px;font-weight:600;color:var(--ink);text-decoration:none;
  transition:border-color 180ms,background 180ms,translate 220ms var(--ease-bounce)}
.mpf-social-item:hover{border-color:var(--green);background:var(--bird);translate:0 -1px}
.mpf-logo{width:30px;height:30px;flex:0 0 30px;display:block}
.mpf-social-item .ic{width:16px;height:16px;flex:0 0 16px;margin-left:auto;color:var(--gray);transition:translate 220ms var(--ease-btn)}
.mpf-social-item:hover .ic{color:var(--green);translate:2px -2px}
.mpf-rec{font-size:13px;line-height:1.5;color:var(--gray);padding-top:12px;margin-top:4px;border-top:1px solid var(--border)}

/* ── ③ Tab ──────────────────────────────────────────────────────────────
   Nút hai–ba mặt cùng kiểu với nút sắp xếp ở Danh bạ (`.dir-sort`): mặt đang
   chọn nền chàm đậm chữ trắng. Dính dưới thanh điều hướng khi cuộn. */
.mpf-right{display:flex;flex-direction:column;gap:20px}
.mpf-tab{position:sticky;top:76px;z-index:5;display:flex;gap:4px;padding:5px;
  background:var(--white);border:1px solid var(--border);border-radius:16px;
  box-shadow:0 6px 18px rgba(11,26,9,.06)}
.mpf-tab[hidden]{display:none}
.mpf-tab [role="tab"]{flex:1 1 0;min-width:0;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:46px;padding:0 16px;border:0;border-radius:12px;background:none;
  font:inherit;font-size:15.5px;font-weight:600;color:var(--gray);white-space:nowrap;
  transition:background 200ms,color 200ms}
.mpf-tab [role="tab"]:hover{color:var(--green);background:var(--cream)}
.mpf-tab [role="tab"][aria-selected="true"]{background:var(--green-deep);color:#fff}
.mpf-tab [role="tab"][hidden]{display:none}
.mpf-tab-num{min-width:22px;height:22px;padding:0 7px;border-radius:999px;display:grid;place-items:center;
  background:var(--green-pale);color:var(--green);font-size:12.5px;font-weight:700;font-variant-numeric:tabular-nums}
.mpf-tab-num:empty{display:none}
.mpf-tab [aria-selected="true"] .mpf-tab-num{background:rgba(255,255,255,.18);color:#fff}

.mpf-p{display:flex;flex-direction:column;gap:20px}
.mpf-p[hidden]{display:none}
@keyframes mpf-in{from{opacity:0;translate:0 12px}to{opacity:1;translate:0 0}}
.mpf-has-tab .mpf-p:not([hidden]){animation:mpf-in 420ms var(--ease-in) both}
@media (prefers-reduced-motion:reduce){.mpf-has-tab .mpf-p:not([hidden]){animation:none}
  .mpf-social-item,.mpf-social-item .ic{transition:none}}

/* Khối: thẻ trắng + đầu khối có biểu tượng — MỘT ngữ pháp cho mọi mục. */
.mpf-block{background:var(--white);border:1px solid var(--border);border-radius:20px;padding:24px 26px}
.mpf-block[hidden]{display:none}
.mpf-block-head{display:flex;align-items:center;gap:12px;font-size:19px;font-weight:700;letter-spacing:-.015em;
  line-height:1.3;margin-bottom:16px}
.mpf-block-ic{width:38px;height:38px;flex:0 0 38px;border-radius:12px;display:grid;place-items:center;
  background:var(--green-pale);color:var(--green)}
.mpf-block-ic .ic{width:19px;height:19px}

.mpf-about p{font-size:16.5px;line-height:1.8;color:var(--ink);max-width:72ch}
.mpf-about p+p{margin-top:12px}

/* Đang cung cấp / Đang tìm kiếm: hai khối cạnh nhau, mỗi khối một sắc nền
   nhạt ở đầu (chàm cho cung · vàng nhạt cho tìm — vàng chỉ làm NỀN, chữ
   dùng --warn, §3). Một bên trống thì bên kia trải cả hàng (§5B). */
.mpf-det{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.mpf-det:has(>.mpf-block:only-child){grid-template-columns:1fr}
.mpf-det[hidden]{display:none}
.mpf-det-card{position:relative;overflow:hidden}
.mpf-det-card::before{content:"";position:absolute;inset:0 0 auto;height:4px}
.mpf-det-card--arc::before{background:var(--green)}
.mpf-det-card--search::before{background:var(--gold)}
.mpf-det-card--search .mpf-block-ic{background:var(--warn-bg);color:var(--warn)}
.mpf-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.mpf-list li{position:relative;padding:11px 14px 11px 40px;border-radius:12px;background:var(--cream);
  font-size:15.5px;font-weight:500;line-height:1.5;color:var(--ink)}
/* Dấu dẫn: tích tròn — vẽ bằng nền + viền, không cần biểu tượng thêm. */
.mpf-list li::before{content:"";position:absolute;left:13px;top:14px;width:18px;height:18px;border-radius:50%;background:var(--green)}
.mpf-list li::after{content:"";position:absolute;left:19.5px;top:17.5px;width:4px;height:8px;
  border:solid #fff;border-width:0 2px 2px 0;rotate:45deg}
.mpf-det-card--search .mpf-list li{background:var(--warn-bg)}
.mpf-det-card--search .mpf-list li::before{background:var(--warn)}

/* Ô nhãn–giá trị (thông tin khác, doanh nghiệp): lưới ô nền kem. */
.mpf-fld{margin:0;display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr))}
.mpf-fld>div{padding:14px 16px;border-radius:14px;background:var(--cream)}
.mpf-fld dt{font-size:13px;font-weight:600;letter-spacing:.02em;color:var(--gray);line-height:1.4}
.mpf-fld dd{margin:6px 0 0;font-size:16px;font-weight:600;color:var(--ink);line-height:1.45}
.mpf-fld .row-chip{gap:6px}
.mpf-fld .chip-svc{background:var(--white);font-size:13.5px}
.mpf-hm-label{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}

/* Doanh nghiệp. */
.mpf-signin-head{display:flex;align-items:center;gap:16px;margin-bottom:18px}
.mpf-signin-text{min-width:0}
.mpf-signin-logo{width:68px;height:68px;flex:0 0 68px;border-radius:16px;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--dark-3),var(--dark-5));color:#fff;font-weight:800;font-size:22px;
  font-family:var(--font-title)}
.mpf-signin-name{font-size:21px;font-weight:700;line-height:1.3;letter-spacing:-.015em}
.mpf-signin-web{display:inline-flex;align-items:center;gap:6px;margin-top:6px;height:32px;padding:0 12px;
  border-radius:999px;background:var(--green-pale);font-size:14.5px;font-weight:600;color:var(--green);text-decoration:none}
.mpf-signin-web:hover{background:var(--green);color:#fff}
.mpf-signin-web .tva-ic{width:14px;height:14px;flex-basis:14px}

/* Bài viết — auto-fit: hai bài thì hai thẻ trải hết hàng (§4). */
.mpf-article{list-style:none;margin:0;padding:0;display:grid;gap:14px;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr))}
.mpf-article a{display:flex;flex-direction:column;gap:10px;height:100%;padding:18px 20px;
  background:var(--cream);border:1px solid transparent;border-radius:16px;
  text-decoration:none;color:inherit;transition:border-color 180ms,background 180ms,translate 220ms var(--ease-bounce)}
.mpf-article a:hover{border-color:var(--green);background:var(--white);translate:0 -2px}
.mpf-article .cat{align-self:flex-start}
.mpf-article-name{font-size:16.5px;font-weight:600;line-height:1.45;letter-spacing:-.01em}
.mpf-article a:hover .mpf-article-name{color:var(--green)}
.mpf-article-date{margin-top:auto;font-size:13.5px;color:var(--gray);font-variant-numeric:tabular-nums}

/* Hồ sơ mới ở mức cơ bản — một câu thay cho các mục nâng cao. */
.mpf-basic{font-size:15.5px;color:var(--gray);line-height:1.65;padding:20px 22px;
  border:1px dashed var(--border-field);border-radius:20px;background:var(--white)}

@container app (max-width:1279px){
  .mpf-det{grid-template-columns:1fr}
}
/* Khổ rộng (đo ở 1880): Giới thiệu một mình một hàng thì chữ khoá ~72 ký tự,
   nửa phải khối bỏ trống (CLAUDE.md §4). Chữa bằng SỐ CỘT: Giới thiệu và
   Thông tin khác đứng cạnh nhau, cung/tìm trải hàng dưới. */
@container app (min-width:1500px){
  .mpf-p--ovw:not([hidden]){display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);
    grid-template-areas:"about hm" "det det" "warn warn";align-items:stretch}
  .mpf-p--ovw .mpf-about{grid-area:about}
  .mpf-p--ovw .mpf-hm{grid-area:hm}
  .mpf-p--ovw .mpf-det{grid-area:det}
  .mpf-p--ovw .mpf-basic{grid-area:warn}
  .mpf-p--ovw .mpf-hm .mpf-fld{grid-template-columns:1fr}
}
@container app (max-width:1023px){
  .mpf-set{grid-template-columns:1fr;gap:24px}
  .mpf-left{position:static}
  .mpf-social{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,12rem),1fr))}
  .mpf-social-label{grid-column:1/-1}
  .mpf-tab{top:68px}
}
@container app (max-width:639px){
  .mpf-person{flex-direction:column;align-items:flex-start;gap:14px}
  .mpf-img{--c:88px;font-size:30px}
  .head-sub .mpf-person .hint{font-size:15.5px}
  .mpf-border li{font-size:13.5px;min-height:32px;padding:3px 12px 3px 10px}
  .mpf-cnt{padding:18px}
  .mpf-block{padding:20px 18px}
  .mpf-block-head{font-size:17.5px}
  .mpf-tab [role="tab"]{padding:0 8px;font-size:14.5px;height:44px}
}

/* ══════════ GỘP TỪ _tam-tv-b.css (19/09/2026) ══════════ */
/* ══════════════════════════════════════════════════════════════════════════
   KHU THÀNH VIÊN — NHÓM tv-b (19/09/2026)
   Ba màn mở từ menu dưới ảnh đại diện (MENU_TK của _shell.js):
     my-profile.html · write-post.html · my-posts.html
   Nạp SAU _screens.css. Trưởng nhóm gộp vào _screens.css sau — viết như thể đã nằm
   trong file chung: mỗi mục một tiêu đề khối, chú thích nói VÌ SAO.

   Tiền tố lớp (đã grep _common.css · _screens.css · _admin.css · _home.css
   · _ebms.css, không trùng — CLAUDE.md §8 bẫy tên trần):
     .tvb-  dùng chung cả ba màn (khung thân, lưới hai cột, cột bên, dòng "ai thấy")
     .hst-  Hồ sơ của tôi
     .vb-   (đã gỡ 19/09 — Đăng bài dùng .dgb- ở _page-post-editor.css)
     .bct-  Bài của tôi
   Chỉ dùng token (CLAUDE.md §3) — không có mã màu nào trong file này.
   ══════════════════════════════════════════════════════════════════════════ */


/* ══ THÂN MÀN — KHÔNG dùng `.block` ══════════════════════════════════════════
   `.block` mang min-height:100svh + căn giữa dọc + scroll-snap — luật của trang
   chủ (mỗi khối một màn). Ba màn này là MỘT khối làm việc dài, không phải một
   chuỗi khối trình diễn: dùng `.block` thì biểu mẫu ngắn trôi lửng giữa màn,
   và cuộn gần đầu khối là bị kéo khít — đúng bẫy "Gắn min-height:100svh lên
   .block" ở CLAUDE.md §8. Nên dựng một lớp thân riêng, chỉ có đệm.
   Đệm dưới 84px = bằng `.block:has(+.foot)` để khe trước chân trang đen giống
   các màn khác.                                                            */
.wr-body{padding-block:34px 84px}
@container app (max-width:559px){.wr-body{padding-block:22px 64px}}

/* ══ LƯỚI HAI CỘT: VIỆC CHÍNH TRÁI · CỘT BÊN PHẢI ═══════════════════════════
   Cùng tỉ lệ với `.det-grid` của màn Chi tiết sự kiện (nội dung co giãn, cột
   bên cố định) để người đi qua lại giữa các màn không phải học lại bố cục.
   Cột bên DÍNH khi cuộn: ở Hồ sơ nó mang thanh hoàn thiện (thấy số tăng ngay
   khi điền), ở Viết bài nó mang nút Gửi duyệt (bấm được ở bất cứ đâu trong
   bài dài).
   Vì sao KHÔNG khoá bề rộng biểu mẫu cho hẹp lại: khung rộng tới 1760px, biểu
   mẫu 52rem căn giữa là để thừa hơn 400px mỗi bên — KH đã bác đúng lỗi này ba
   lần (CLAUDE.md §4). Phần thừa được trả cho cột bên và cho LƯỚI Ô tự thêm cột
   (`.pft-fld`), không phải cho khoảng trắng.
   Dưới 1024px xếp một cột; cột bên lên TRƯỚC hay SAU là quyết định của từng
   màn (xem `.pft-grid` và `.dgb-luoi`).                                        */
.wr-grid{display:grid;grid-template-columns:minmax(0,1fr) 23rem;gap:28px 32px;align-items:start}
.wr-side{position:sticky;top:108px;display:flex;flex-direction:column;gap:16px;min-width:0}
@container app (min-width:1600px){.wr-grid{grid-template-columns:minmax(0,1fr) 26rem}}
@container app (max-width:1023px){
  .wr-grid{grid-template-columns:minmax(0,1fr)}
  .wr-side{position:static}
}

/* Mặt thẻ tĩnh — cùng bề mặt `.card-static` (_screens.css) nhưng có đệm sẵn. Không
   nhấc khi rê chuột: khối để ĐỌC và ĐIỀN, chỗ bấm nằm ở nút bên trong. */
.wr-card{background:var(--white);border:1px solid var(--border);border-radius:16px;padding:20px 22px}
@container app (max-width:559px){.wr-card{padding:18px 16px}}
.wr-card>h2{font-size:16px;font-weight:700;letter-spacing:-.01em}

/* ── Dòng "AI THẤY" ─────────────────────────────────────────────────────
   DESIGN_WEB_STANDARDS §10 là luật; đặt NGAY DƯỚI tên nhóm trường chứ không
   gom vào một hộp riêng, vì câu hỏi "ai thấy cái này" nảy ra đúng lúc đang
   điền ô đó. Một dòng xám nhỏ có biểu tượng người — đủ để đọc, không đủ để
   giành mắt khỏi ô nhập.                                                   */
.wr-ai{display:flex;align-items:flex-start;gap:8px;font-size:13.5px;line-height:1.5;color:var(--gray)}
.wr-ai .ic{width:16px;height:16px;flex:0 0 16px;color:var(--gray-pale);margin-top:2px}
.wr-ai b{font-weight:600;color:var(--ink)}

/* ── Thông báo nhanh (Toast · CC §5.7) ───────────────────────────────────
   `.toast` của _common.css chỉ vẽ mặt, không định vị. Ghim dưới giữa màn như
   CC ghi; `left:50%` + translate thay vì chiếm hết bề ngang để không che hai
   nút ở mép.                                                              */
.wr-toast{position:fixed;left:50%;bottom:calc(22px + env(safe-area-inset-bottom,0px));z-index:90;translate:-50% 0;
  width:max-content;max-width:calc(100% - 32px)}


/* ══════════════════════════════════════════════════════════════════════════
   HỒ SƠ CỦA TÔI  (my-profile.html · màn 12)
   ══════════════════════════════════════════════════════════════════════════ */

/* Băng trạng thái (`.table-st`, CC §5.4) nằm TRÊN CÙNG, hết bề ngang — CC ghi
   "luôn trên cùng màn 12". Biểu tượng là svg của bộ `bt-` nên đặt cỡ tại đây;
   màu lấy theo màu chữ của băng (currentColor), không theo `.ic` xanh chung. */
.pft-table{margin-bottom:24px}
.pft-table .table-st>.ic{width:26px;height:26px;flex:0 0 26px;color:currentColor;margin:0}
.pft-table .table-st .btn{flex:0 0 auto}

/* Điện thoại: cột bên (thanh hoàn thiện + việc còn thiếu) lên TRƯỚC biểu mẫu
   — đó là câu trả lời cho "tôi còn phải làm gì", phải thấy trước khi cuộn qua
   hai chục ô. Máy tính thì nó đứng cột phải, dính theo khi cuộn. */
@container app (max-width:1023px){.pft-grid .wr-side{order:-1}}

.pft-form{display:flex;flex-direction:column;gap:20px;min-width:0}

/* Mỗi nhóm trường là một `.item-pf` (CC §5.4 ProfileSection). Đầu nhóm thêm
   dòng "ai thấy" và nhãn đủ/thiếu — chỉnh ở đây vì `.head-item` gốc chỉ có một
   hàng tiêu đề. */
.pft-form .item-pf{scroll-margin-top:108px}
.pft-form .head-item{padding:16px 22px 14px;row-gap:6px}
.pft-form .head-item h2{font-size:18px;font-weight:700;letter-spacing:-.015em}
.pft-form .head-item .wr-ai{flex:1 0 100%}
.pft-form .body-item{padding:20px 22px 24px}
@container app (max-width:559px){
  .pft-form .head-item,.pft-form .body-item{padding-inline:16px}
}

/* ── LƯỚI Ô TỰ THÊM CỘT ─────────────────────────────────────────────────
   auto-fill theo 17rem: 390 → 1 cột · ~900 → 2 · 1440 → 3 · 1880 → 4.
   Đây là chỗ trả phần bề ngang dư ở khổ rộng (CLAUDE.md §4 — đổi số cột chứ
   không giãn ô). Ô nào cần cả hàng (ô tròn, đoạn văn, ô chip) gắn `.pft-all`. */
.pft-fld{display:grid;grid-template-columns:repeat(auto-fill,minmax(17rem,1fr));gap:20px 22px}
.pft-fld>*{min-width:0}
.pft-fld .pft-all{grid-column:1/-1}
.pft-fld .field{scroll-margin-top:96px}
/* YearInput: 4 chữ số, rộng ~6 ký tự (CC §4.5) — ô dài cả cột thì người ta
   tưởng phải gõ nhiều hơn. */
.pft-year{max-width:9rem}

/* Ô tròn hai lựa chọn (Có / Không) không cần trải 4 cột. */
.pft-fld .btn-round.pft-two{max-width:24rem}

/* Kẻ ngăn trước nhóm trường do Admin thêm. KHÔNG có chữ trên kẻ: với thành
   viên chỉ hiện TÊN TRƯỜNG (DESIGN_WEB_STANDARDS §9A — chữ "trường tùy chỉnh"
   chỉ dùng trong quản trị). Kẻ đứt để đọc ra là "cùng nhóm, khác lứa". */
.pft-detach{grid-column:1/-1;height:0;border-top:1px dashed var(--border)}

/* Cặp Dịch vụ đang cung cấp · Đang tìm kiếm — luôn HAI cột bằng nhau, không
   theo lưới 3–4 cột bên ngoài (hai ô chip trong lưới 3 cột để hở một ô trống
   cuối hàng). Điện thoại xếp dọc. */
.pft-level{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 22px}
@container app (max-width:559px){.pft-level{grid-template-columns:minmax(0,1fr)}}

/* Nhóm ô tích (DynamicField "nhiều lựa chọn") — fieldset bỏ khung mặc định
   của trình duyệt; tiêu đề nhóm vẽ giống nhãn ô thường để cả lưới một nhịp.
   Ô tích tự xếp cột như lưới ô ngoài. */
.pft-group{border:0;margin:0;padding:0;min-width:0}
.pft-group legend{padding:0;margin-bottom:4px;font-size:14px;font-weight:500;color:var(--ink)}
.pft-sel{display:grid;grid-template-columns:repeat(auto-fill,minmax(13rem,1fr));gap:0 22px}

/* Đếm ký tự ô Giới thiệu ngắn — bám mép phải ngay dưới ô. */
.pft-count{align-self:flex-end;font-size:13px;color:var(--gray-pale);font-variant-numeric:tabular-nums}

/* LogoUpload (CC §4.12) — cùng khuôn `.load-img` của ảnh đại diện nhưng ô
   xem trước VUÔNG bo nhẹ: logo doanh nghiệp không phải mặt người, cắt tròn
   là xén mất góc chữ của logo. Nền nhạt chứ không nền xanh đặc như ảnh đại
   diện, vì logo thật phần lớn là chữ tối trên nền trong suốt. */
.load-img.pft-logo .view{border-radius:12px;background:var(--round-1);color:var(--green);
  border:1px dashed var(--border-field);font-size:12px;font-weight:600;letter-spacing:.04em}

/* Hàng lưu cuối biểu mẫu — nút chính TRÁI (DESIGN_WEB_STANDARDS §5D), cuộn
   cùng trang, không ghim đáy. Dòng trạng thái "Đã lưu lúc…" đứng ngay cạnh
   nút để người bấm thấy kết quả ở đúng chỗ mắt đang nhìn. */
.pft-save{display:flex;align-items:center;gap:12px 18px;flex-wrap:wrap;padding-top:4px}
.pft-save-st{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--ok)}
.pft-save-st .ic{width:16px;height:16px;flex:0 0 16px;color:currentColor;margin:0}
@container app (max-width:559px){.pft-save .btn{width:100%}}

/* ── Cột bên: hoàn thiện + việc còn thiếu + lối tắt ──────────────────── */
.pft-completion .complete{margin-top:4px}
.pft-completion .bar i{transition:width .5s var(--ease-btn)}
/* Danh sách thiếu (`.list-missing`, CC §5.4) trong cột hẹp chỉ một cột. */
.wr-side .list-missing{grid-template-columns:1fr;margin-top:6px}
.wr-side .list-missing .ic{width:16px;height:16px;flex:0 0 16px;color:var(--gray-pale);margin:0}
.wr-side .list-missing li a:hover .ic{color:var(--green)}
/* Nhóm "Không bắt buộc" tách riêng (CC §5.4) để người ta biết bỏ qua được. */
.pft-missing-group{margin-top:16px;font-size:12px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--gray)}
.pft-missing-out{margin-top:8px;font-size:14.5px;color:var(--ok);display:flex;gap:8px;align-items:center}
.pft-missing-out .ic{width:16px;height:16px;flex:0 0 16px;color:currentColor;margin:0}

/* Lối tắt: nút xếp dọc trải hết cột — một cột hẹp mà xếp ngang thì nút
   xuống dòng lởm chởm. */
.pft-task{display:flex;flex-direction:column;gap:10px}
.pft-task .btn{width:100%}
.pft-task .pft-sub{display:flex;flex-wrap:wrap;gap:4px 18px;margin-top:4px;font-size:14px}
.pft-task .pft-sub a{color:var(--green);font-weight:500}


/* ══════════════════════════════════════════════════════════════════════════
   VIẾT BÀI — 19/09 màn dựng lại thành "Đăng bài", CSS chuyển sang
   _page-post-editor.css (tiền tố .dgb-). Khối .vb-* cũ đã gỡ; bản cũ nằm ở
   Archieved/2026-09-19-viet-bai-ban-cu/_tam-tv-b.css.
   Hai luật dưới (.wr-body .empty) VẪN DÙNG cho khối "chưa đủ quyền".
   ══════════════════════════════════════════════════════════════════════════ */

/* Chưa đủ quyền (vai khách / chờ duyệt mở thẳng địa chỉ) — dùng `.empty`
   (EmptyState, biến thể "chưa đủ quyền", CC §5.5). Biểu tượng svg cỡ lớn. */
.wr-body .empty>.ic{width:40px;height:40px;flex:0 0 40px;color:var(--green-light);margin:0}
.wr-body .empty h2{font-size:20px;font-weight:700}


/* ══════════════════════════════════════════════════════════════════════════
   BÀI CỦA TÔI  (my-posts.html)
   ══════════════════════════════════════════════════════════════════════════ */

/* Thanh công cụ: chip trạng thái (chọn một — cùng `.filter-chip` ba màn chuyên
   mục) · nút Viết bài mới bám mép phải cùng hàng (§5D: nút chính cùng hàng
   tiêu đề, phải). Số đếm nằm TRONG chip vì ở đây câu hỏi là "mục nào còn
   việc", không phải "có bao nhiêu kết quả". */
.bct-tools{display:flex;align-items:center;gap:14px 24px;flex-wrap:wrap;padding-bottom:22px}
.bct-tools .filter-chip{flex:1 1 auto}
.bct-tools .filter-chip button{display:inline-flex;align-items:center;gap:8px}
.bct-num{min-width:22px;height:22px;padding:0 7px;border-radius:999px;display:inline-grid;place-items:center;
  font-size:12.5px;font-weight:600;font-variant-numeric:tabular-nums;background:var(--neutral-bg);color:var(--ink)}
.filter-chip button[aria-pressed="true"] .bct-num{background:var(--white);color:var(--green)}
@container app (max-width:559px){
  .bct-tools .btn{width:100%}
  .bct-tools .filter-chip{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
  .bct-tools .filter-chip button{flex:0 0 auto}
}

/* ── DANH SÁCH DẠNG HÀNG ────────────────────────────────────────────────
   Hàng ngang chứ không lưới thẻ: người mở màn này đến để LÀM VIỆC với từng
   bài (sửa, rút, xoá), không phải để lướt ảnh. Mỗi hàng: ảnh nhỏ · chữ ·
   hành động bám phải — mắt đi một đường thẳng từ tên bài sang nút.
   Ở khổ 1880 hàng dài ra nhưng phần giãn là phần chữ, không để khoảng trắng
   giữa hàng (CLAUDE.md §4): hành động bám mép phải, chữ ăn hết phần giữa.  */
.bct-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.bct-row{display:grid;grid-template-columns:9.5rem minmax(0,1fr) auto;gap:14px 20px;align-items:center;
  background:var(--white);border:1px solid var(--border);border-radius:16px;padding:14px 18px 14px 14px;
  transition:border-color var(--dur-btn) var(--ease-btn)}
.bct-row:hover{border-color:var(--green-light)}
/* Bị trả lại: vạch trái đỏ — hàng DUY NHẤT cần người viết ra tay, nên nó
   phải là thứ mắt bắt trước tiên khi mở màn. Không tô nền đỏ cả hàng: §5
   "loá", và đỏ phủ một mảng thì đọc ra là lỗi hệ thống. */
.bct-row[data-st="returned"]{box-shadow:inset 3px 0 0 var(--err)}
.bct-img{position:relative;aspect-ratio:16/9;border-radius:10px;overflow:hidden}
.bct-img .no-img span{font-size:10.5px}
.bct-img .no-img .ic{width:20px;height:20px}
.bct-body{min-width:0;display:flex;flex-direction:column;gap:5px}
.bct-line{display:flex;align-items:center;gap:6px 12px;flex-wrap:wrap}
.bct-cat{font-size:12.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--gray)}
.bct-body h3{font-size:17px;line-height:1.4;font-weight:600;overflow-wrap:anywhere}
.bct-when{font-size:13.5px;color:var(--gray-pale)}
/* Lý do trả lại — nguyên văn nhóm Admin ghi, đặt ngay dưới tên bài. Kẻ trái
   + nền nhạt; chữ lý do màu mực để đọc được, chỉ nhãn là màu lỗi. */
.bct-reason{margin-top:6px;padding:10px 14px;border-radius:0 10px 10px 0;border-left:3px solid var(--err);
  background:var(--err-bg);font-size:14px;line-height:1.55;color:var(--ink)}
.bct-reason b{color:var(--err);font-weight:600}
.bct-blue{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap}
@container app (max-width:859px){
  .bct-row{grid-template-columns:7rem minmax(0,1fr);align-items:start}
  .bct-blue{grid-column:1/-1;justify-content:flex-start;padding-top:10px;border-top:1px solid var(--border)}
}
@container app (max-width:559px){
  .bct-row{grid-template-columns:5.5rem minmax(0,1fr);gap:12px 14px;padding:12px}
  .bct-body h3{font-size:16px}
  .bct-blue .btn{flex:1 1 auto}
}


/* ══ GIẢI PHÁP — tiền tố gp- (services.html) · gpct- (service-detail.html) ══
   DỰNG LẠI 19/09/2026 (⚑ KH). Phân tích đầy đủ ở đầu services.html; bản cũ ở
   Archieved/2026-09-19-giai-phap-ban-cu/.
   · Bộ lọc MƯỢN NGUYÊN khuôn Danh bạ (`.dir-head .dir-search .dir-quick .dir-set
     .dir-filter .dir-group .dir-box .dir-tools .dir-sort .dir-sum .count-result`) — người
     dùng học một lần cho hai màn danh sách. Ở đây chỉ thêm phần RIÊNG: công
     tắc ưu đãi, ô tìm trong ngăn lĩnh vực, nút "Xem thêm", lưới + thẻ.
   · Thẻ `.sol-card` dùng ở BA nơi: danh sách · khối "Sản phẩm, dịch vụ khác" ở
     chi tiết · tab Xem trước của màn Đăng bài. Sửa một chỗ là đủ.
   · Màu ưu đãi là cặp --warn-bg / --warn (5.33:1) — nâu vàng đậm, KHÔNG phải
     vàng thương hiệu làm chữ (§3). Hạn gấp dùng --err nền đặc chữ trắng.   */

.sol-ic{width:18px;height:18px;flex:0 0 18px;display:block}
.dir-box[hidden],.new-pkg[hidden]{display:none}

/* ── Lối tắt đầu màn: viên "Có ưu đãi" có biểu tượng quà. Biểu tượng vàng
   sáng trên kính tối (đạt 5.11 — §3), bật lên nền trắng thì đổi sang --warn. */
.sol-quick .sol-ic{width:17px;height:17px;flex-basis:17px;color:var(--gold-light)}
.sol-quick button[aria-pressed="true"] .sol-ic{color:var(--warn)}

/* ── Công tắc ưu đãi ở đầu cột lọc ─────────────────────────────────────── */
.sol-filter-pri{display:flex;align-items:center;gap:12px;margin:0 2px 8px;padding:12px;border-radius:14px;
  background:var(--warn-bg);border:1px dashed color-mix(in srgb,var(--warn) 38%,transparent);
  transition:border-color 200ms,box-shadow 200ms}
.sol-filter-pri:hover{border-color:var(--warn)}
.sol-filter-pri:has(input:checked){border-style:solid;border-color:var(--warn);box-shadow:0 0 0 3px color-mix(in srgb,var(--warn) 14%,transparent)}
.sol-filter-pri-ic{width:34px;height:34px;flex:0 0 34px;border-radius:10px;display:grid;place-items:center;background:var(--white);color:var(--warn)}
.sol-filter-pri-text{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.35}
.sol-filter-pri-text b{font-size:14.5px;font-weight:600;color:var(--ink)}
.sol-filter-pri-text small{font-size:12.5px;font-weight:500;color:var(--warn)}
/* Công tắc: checkbox thật (role=switch), chỉ đổi vỏ. */
.sol-toggle{appearance:none;-webkit-appearance:none;position:relative;flex:0 0 44px;width:44px;height:26px;margin:0;
  border-radius:999px;background:var(--border-field);transition:background 200ms}
.sol-toggle::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;
  background:var(--white);box-shadow:0 1px 3px rgba(4,10,4,.3);transition:translate 260ms var(--ease-bounce)}
.sol-toggle:checked{background:var(--green)}
.sol-toggle:checked::after{translate:18px 0}
.sol-toggle:focus-visible{outline:2px solid var(--green);outline-offset:2px}

/* ── Ngăn Lĩnh vực: ô tìm (chỉ khi ≥ 10 mục) · danh sách · "Xem thêm" ─── */
.sol-group-search{position:relative;display:flex;align-items:center;margin:2px 2px 6px}
.sol-group-search[hidden]{display:none}
.sol-group-search .ic{position:absolute;left:12px;width:16px;height:16px;flex-basis:16px;margin:0;color:var(--gray-pale);pointer-events:none}
.sol-group-search input{width:100%;height:40px;padding:0 12px 0 36px;border:1px solid var(--border-field);border-radius:10px;
  background:var(--white);font:inherit;font-size:14.5px;color:var(--ink)}
.sol-group-search input::placeholder{color:var(--gray-pale)}
.sol-group-search input:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px var(--green-pale)}
#sol-sector-list{display:flex;flex-direction:column;gap:2px}
.sol-sector-empty{padding:8px 12px;font-size:14px;color:var(--gray)}
.sol-sector-empty[hidden]{display:none}
.sol-add{align-self:flex-start;margin:4px 0 0 4px;padding:8px;border:0;border-radius:8px;background:none;
  font:inherit;font-size:14px;font-weight:600;color:var(--green)}
.sol-add:hover{background:var(--green-pale)}
.sol-add[hidden]{display:none}

/* ── Lưới thẻ. 18.5rem tối thiểu → 1880: 4 cột · 1440: 3 · 860: 2 · 390: 1.
   auto-fill (không phải auto-fit): chỉ có MỘT bài thì thẻ giữ bề rộng một
   cột, không phình hết hàng thành một tấm ảnh khổng lồ (§5B). */
.sol-grid{margin-top:20px;display:grid;gap:20px;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,18.5rem),1fr))}
.sol-grid>*{min-width:0}
.sol-grid[hidden]{display:none}

/* ── THẺ SẢN PHẨM, DỊCH VỤ (MemberOfferCard, thay `.svc-card`) ───────────── */
.sol-card{position:relative;display:flex;flex-direction:column;background:var(--white);
  border:1px solid var(--border);border-radius:20px;
  transition:transform 360ms var(--ease-in),box-shadow 360ms var(--ease-in),border-color 200ms}
.sol-card:hover{transform:translateY(-5px);border-color:color-mix(in srgb,var(--green) 40%,var(--border));
  box-shadow:0 22px 44px rgba(11,26,9,.13)}
.sol-card-img{position:relative;aspect-ratio:16/9;border-radius:19px 19px 0 0;overflow:hidden;background:var(--cream)}
.sol-card-img img,.sol-img-core{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  transition:scale 700ms var(--ease-in)}
.sol-card:hover .sol-card-img img,.sol-card:hover .sol-img-core{scale:1.05}
/* Lĩnh vực: viên trắng trên ảnh — đọc được trên MỌI ảnh (nền trắng đặc, chữ
   mực), không phụ thuộc ảnh sáng hay tối. */
.sol-card-top{position:absolute;left:12px;right:12px;top:12px;display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.sol-card-sector{min-width:0;padding:5px 11px;border-radius:999px;
  background:rgba(255,255,255,.95);color:var(--ink);font-size:12.5px;font-weight:600;line-height:1.3;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-shadow:0 2px 10px rgba(4,10,4,.2)}
/* Huy hiệu ƯU ĐÃI góc phải ảnh (19/09 lượt 2): nền vàng đặc NHỎ, chữ nâu đậm
   (--brown trên --gold ≈ 9:1) — vàng là NỀN, không làm chữ trên nền sáng (§3). */
.sol-card-pri{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;padding:5px 11px 5px 9px;border-radius:999px;
  background:var(--gold);color:var(--brown);font-size:12.5px;font-weight:700;line-height:1.3;box-shadow:0 4px 14px rgba(4,10,4,.28)}
.sol-card-pri .sol-ic{width:15px;height:15px;flex-basis:15px}
.sol-card-body{flex:1;display:flex;flex-direction:column;gap:8px;padding:16px 18px 0}
.sol-card-ttl{font-size:17px;line-height:1.38;font-weight:700;letter-spacing:-.015em;color:var(--ink);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;transition:color 200ms}
.sol-card:hover .sol-card-ttl{color:var(--green)}
/* Cả thẻ bấm được: liên kết phủ kín thẻ (CLAUDE.md §8 — thẻ-là-liên-kết thì
   bỏ gạch chân). Viền focus vẽ trên CẢ thẻ, không trên riêng dòng tên. */
.sol-card-link{color:inherit;text-decoration:none}
.sol-card-link::after{content:"";position:absolute;inset:0;border-radius:20px;z-index:1}
.sol-card-link:focus-visible{outline:none}
.sol-card:has(.sol-card-link:focus-visible){outline:2px solid var(--green);outline-offset:3px}
.sol-card-open{font-size:14.5px;line-height:1.6;color:var(--gray);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* Dải ưu đãi: dạng PHIẾU (viền đứt) — cùng chất liệu công tắc ưu đãi ở cột
   lọc và khối ưu đãi ở chi tiết. */
.sol-pri{margin-top:4px;display:flex;align-items:center;gap:9px;padding:8px 10px 8px 11px;border-radius:12px;
  background:var(--warn-bg);border:1px dashed color-mix(in srgb,var(--warn) 38%,transparent);
  color:var(--warn);font-size:14px;font-weight:600;line-height:1.35}
.sol-pri .sol-ic{width:17px;height:17px;flex-basis:17px}
.sol-pri-ctn{flex:1;min-width:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sol-pri small{flex:0 0 auto;padding:2px 8px;border-radius:999px;background:var(--white);
  font-size:12.5px;font-weight:600;color:var(--warn);white-space:nowrap}
.sol-pri--urgent small{background:var(--err);color:var(--white)}
/* Chân thẻ: NGƯỜI trước, doanh nghiệp dòng phụ (biên bản 18/09) + nút. */
.sol-card-foot{display:flex;align-items:center;gap:12px;margin-top:16px;padding:14px 18px 16px;border-top:1px solid var(--border)}
.sol-ai{flex:1;min-width:0;display:flex;align-items:center;gap:10px}
.sol-dd{width:36px;height:36px;flex:0 0 36px;border-radius:50%;object-fit:cover;background:var(--cream)}
.sol-ai-text{min-width:0;display:flex;flex-direction:column;line-height:1.3}
.sol-ai-text b,.sol-ai-text small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sol-ai-text b{font-size:14px;font-weight:600;color:var(--ink)}
.sol-ai-text small{font-size:13px;color:var(--gray)}
.sol-card-btn{flex:0 0 auto}
.sol-card:hover .sol-card-btn{border-color:var(--green);color:var(--green)}
@media (prefers-reduced-motion:reduce){
  .sol-card,.sol-card-img img,.sol-img-core,.sol-toggle,.sol-toggle::after{transition:none}
  .sol-card:hover{transform:none}
  .sol-card:hover .sol-card-img img,.sol-card:hover .sol-img-core{scale:none}
}
/* Khung xương (?tt=dang-tai) — khớp hình thẻ thật (CC §5.5 SkeletonCard). */
.sol-down{pointer-events:none}
.sol-down .sol-card-img{background:var(--neutral-bg)}
.sol-down .sol-card-body{padding-bottom:22px;gap:10px}
.sol-down i{display:block;height:14px;border-radius:7px}
.sol-down i:nth-child(1){height:18px;width:88%}
.sol-down i:nth-child(3){width:60%}
.sol-empty-out{margin-top:0}

/* ══ CHI TIẾT — gpct- · LƯỢT 3 (19/09 tối) ═════════════════════════════════
   Người dùng: "thiết kế giống màn Chi tiết tin tức, đừng phức tạp hóa".
   Bố cục nay là khuôn `tct-*` của _page-news-detail.css. Ở đây CHỈ còn:
   ① thẻ NGƯỜI `.sold-person` — dùng chung cho Chi tiết tin tức ("Về người
     đăng") và Giải pháp chi tiết ("Người giới thiệu");
   ② ba thứ riêng bài chào hàng: ô quà của thẻ ưu đãi trong bài, nút mạng xã
     hội, ảnh tạm trong "Cùng lĩnh vực". Tấm đầu hai cột / phiếu ưu đãi to của
     lượt 2 đã gỡ. */

/* ── Thẻ người (dùng chung hai màn chi tiết) ───────────────────────────── */
.sold-person{display:flex;flex-direction:column;gap:14px;padding:22px;background:var(--white);
  border:1px solid var(--border);border-radius:22px}
.sold-person-label{font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--gray)}
.sold-person-head{display:flex;align-items:center;gap:14px}
.sold-person-head>div{min-width:0}
.sold-dd{width:64px;height:64px;flex:0 0 64px;border-radius:50%;object-fit:cover;background:var(--cream);
  box-shadow:0 0 0 3px var(--white),0 0 0 5px var(--green-pale)}
.sold-name{font-size:18px;line-height:1.3;font-weight:700;letter-spacing:-.01em;color:var(--ink);text-decoration:none}
.sold-name:hover{color:var(--green);text-decoration:underline}
.sold-cd{margin-top:2px;font-size:14px;line-height:1.4;color:var(--gray)}
.sold-company{font-size:14.5px;line-height:1.4;font-weight:500;color:var(--ink)}
.sold-det{align-self:flex-start;display:inline-flex;align-items:center;gap:7px;padding:5px 12px 5px 10px;border-radius:999px;
  background:var(--cream);font-size:13.5px;font-weight:600;color:var(--ink)}
.sold-det .ic{width:16px;height:16px;flex-basis:16px;margin:0;color:var(--green)}
.sold-intro-text{font-size:14.5px;line-height:1.65;color:var(--ink)}
.sold-cnt{display:flex;flex-direction:column;gap:8px;padding-top:14px;border-top:1px solid var(--border)}
.sold-cnt .tva-ic{width:18px;height:18px;flex-basis:18px}
/* Mạng xã hội — từ 25/09 chân thẻ Người giới thiệu dùng .dir-card-foot
   (.channel + .dir-logo), không còn hàng nút riêng ở đây. */
.sold-pf{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;font-size:14.5px;font-weight:600;color:var(--green);text-decoration:none}
.sold-pf:hover{text-decoration:underline}
.sold-pf .tva-ic{width:15px;height:15px;flex-basis:15px;rotate:180deg}
/* 25/09 — thẻ người = .dir-card (cùng Danh bạ / Hồ sơ thành viên). Nhãn cột
   đứng ngoài thẻ; phần Liên hệ nối dưới, cùng đệm với .dir-card-foot. Thẻ
   không bấm cả khối được (chỉ tên là liên kết) → gỡ hiệu ứng nhấc thẻ. */
.sold-person-card{display:grid;gap:10px}
.sold-person-card .sold-person-label{padding-left:4px}
.sold-card.dir-card{box-shadow:0 10px 30px rgba(11,26,9,.06)}
.sold-card.dir-card:hover{transform:none;box-shadow:0 10px 30px rgba(11,26,9,.06);border-color:var(--border)}
.sold-card.dir-card:hover .dir-card-img{scale:1}
.sold-card.dir-card:hover .dir-card-cover::before,.sold-card.dir-card:hover .dir-card-cover::after{transform:none}
.sold-card .dir-card-img img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.sold-card .dir-card-name .sold-name{font-size:inherit;color:inherit}
/* Bảng liên hệ mở LÊN: cột phải dính + có trần chiều cao, mở xuống ở đáy
   thẻ thì bảng bị cắt (cùng lý do .pfv-foot ở _page-profile.css). */
.sold-foot .cnt-table{top:auto;bottom:calc(100% + 6px)}

/* ── Thẻ ưu đãi gắn trong bài (tự đủ kiểu — không dựa vào lớp của màn tin tức,
   vì màn đó đổi độc lập) ───────────────────────────────────────────────── */
.sold-pri-article{margin-top:28px;display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px 18px;align-items:center;
  padding:18px 20px;border-radius:20px;background:var(--warn-bg);border:1.5px dashed color-mix(in srgb,var(--warn) 40%,transparent);
  font-family:var(--font-ui)}
.sold-pri-fld{width:64px;height:68px;border-radius:16px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  background:var(--gold);color:var(--brown)}
.sold-pri-fld .sol-ic{width:26px;height:26px;flex-basis:26px}
.sold-pri-fld small{font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.newsd-place .sold-pri-name{margin-top:0;font-size:18px;line-height:1.4;font-weight:700;color:var(--ink)}
.newsd-place .sold-pri-open{margin-top:4px;font-size:14.5px;line-height:1.6;color:var(--gray)}
.sold-pri-urgent{display:inline-block;margin-left:4px;padding:0 9px;border-radius:999px;background:var(--err);
  color:var(--white);font-size:12.5px;font-weight:600;line-height:1.7}
/* Ảnh tạm (mảng chuyển sắc) trong danh sách "Cùng lĩnh vực" — cùng khung ảnh
   `.newsd-arc-item img`. */
.sold-arc-img{display:block;position:relative;width:100%;aspect-ratio:16/10;border-radius:10px;overflow:hidden}

/* ── Lưới "Sản phẩm, dịch vụ khác" trong khung khối `.newsd-new` ──────────── */
.newsd-new .sol-grid{margin-top:0}

@container app (max-width:1023px){
  .sol-grid{order:4}
}
@container app (max-width:639px){
  .sol-card-body{padding:14px 16px 0}
  .sol-card-foot{padding:12px 16px 14px}
  .sold-person{padding:18px}
}


/* ══ GIẢI PHÁP · THANH LOẠI + MỐC NHU CẦU (19/09 tối) ══════════════════════
   Gộp Nhu cầu hợp tác vào màn Giải pháp — lý do ở đầu services.html mục 6.
   Thanh loại = SegmentedTabs (.tab-para) đặt trên đầu màn tối: nền kính
   mờ, mặt đang chọn trắng — cùng chất liệu ô tìm ngay trên nó. Cuộn ngang
   ở khổ hẹp thay vì xuống dòng (bốn mặt, một hàng). */
.sol-type{margin-top:16px;max-width:100%;overflow-x:auto;scrollbar-width:none;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18)}
.sol-type::-webkit-scrollbar{display:none}
.sol-type button{flex:0 0 auto;color:var(--dark-text);display:inline-flex;align-items:center;gap:8px}
.sol-type button:hover{color:#fff}
.sol-type button[aria-selected="true"]{color:var(--ink)}
.sol-type button span{min-width:22px;height:22px;padding:0 7px;border-radius:999px;display:inline-grid;place-items:center;
  font-size:12px;font-weight:700;background:rgba(255,255,255,.14);color:inherit}
.sol-type button[aria-selected="true"] span{background:var(--green-pale);color:var(--green)}
.sol-type button span:empty{display:none}
.sol-part[hidden]{display:none}
.sol-part+.sol-part{margin-top:34px}
.sol-part-ttl{display:flex;align-items:center;gap:12px;margin:0 0 16px;font-size:12.5px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--gray)}
.sol-part-ttl::after{content:"";flex:1;height:1px;background:var(--border)}
.sol-part-ttl[hidden]{display:none}
.sol-filter-urgent .sol-filter-pri-ic{color:var(--err)}
.sol-filter-urgent:hover,.sol-filter-urgent:has(input:checked){border-color:var(--err)}
.sol-filter-urgent:has(input:checked){box-shadow:0 0 0 3px color-mix(in srgb,var(--err) 14%,transparent)}
.sol-filter-pri[hidden]{display:none}


/* ══ GIẢI PHÁP · NHU CẦU TRÊN THẺ + MÀN CHI TIẾT CHUNG (19/09 tối) ════════
   Nhu cầu dùng CÙNG thẻ .sol-card và CÙNG màn service-detail.html. Chỗ
   khác: huy hiệu "Cần gấp" (đỏ, vị trí huy hiệu Ưu đãi) · nhãn loại nhỏ
   trên tiêu đề · dải HẠN NHẬN LIÊN HỆ (vị trí dải ưu đãi) · khối "Đang tìm"
   ở chi tiết (vị trí thẻ ưu đãi). Màu đỏ dùng cặp --err / --err-bg có sẵn. */
.sol-card-urgent{display:inline-flex;align-items:center;padding:4px 10px;border-radius:999px;
  font-size:12px;font-weight:700;background:var(--err);color:#fff}
.sol-card-type{margin:0 0 4px;font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--green)}
.sol-due{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px;
  padding:8px 12px;border-radius:10px;font-size:13px;font-weight:600;color:var(--green-dark);
  background:var(--green-pale);border:1px dashed color-mix(in srgb,var(--green) 40%,transparent)}
.sol-due small{flex:0 0 auto;padding:2px 8px;border-radius:999px;font-size:11.5px;font-weight:700;background:var(--err);color:#fff}
.sol-due--urgent{background:var(--err-bg);color:var(--err);border-color:color-mix(in srgb,var(--err) 40%,transparent)}
.sold-want{display:flex;gap:16px;align-items:flex-start;margin:22px 0;padding:16px 18px;border-radius:14px;
  background:var(--green-pale);border:1px solid color-mix(in srgb,var(--green) 25%,transparent)}
.sold-want-fld{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:4px;margin:0;color:var(--green)}
.sold-want-fld .ic{width:26px;height:26px}
.sold-want-fld small{font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.sold-want-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;font-family:var(--font-ui);font-size:15px;color:var(--ink)}
.sold-want-list li{display:flex;align-items:center;gap:8px}
.sold-want-list .ic{width:17px;height:17px;flex:0 0 17px;color:var(--green)}
.sold-want-urgent{display:inline-block;padding:2px 10px;border-radius:999px;font-size:12.5px;background:var(--err);color:#fff}

/* ── Chi tiết · sự kiện trực tuyến: khối "Tham dự trực tuyến" thay bản đồ (19/09) ── */
.detloc-st{margin-top:24px;display:flex;gap:18px;align-items:flex-start;padding:24px;border-radius:20px;
  border:1px solid var(--border);background:linear-gradient(135deg,var(--green-pale),var(--round-2))}
.detloc-st-ic{width:52px;height:52px;flex:0 0 52px;border-radius:14px;display:grid;place-items:center;background:var(--green);color:#fff}
.detloc-st-ic .ic{width:24px;height:24px;color:#fff;margin:0}
.detloc-st b{display:block;font-size:18px;color:var(--ink)}
.detloc-st p{margin-top:4px;font-size:15px;line-height:1.6;color:var(--gray)}
/* Sự kiện một buổi: không có giỏ phía trên nên dòng giá đứng đầu ruột thẻ —
   bỏ kẻ chỉ + khoảng đệm trên, không thì ra một vạch trơ phía trên giá. */
.det-book .total.total--head{margin-top:0;padding-top:0;border-top:0}
/* ══════════════════════════════════════════════════════════════════════════
   TÁM MÀN CHÂN TRANG — BẢN 2 (20/09/2026, dựng lại sau khi bị bác)

   NGƯỜI DÙNG BÁC BẢN 1: *"Design hiện tại quá xấu, quá nhiều text, quá khó
   nhìn."* Rà lại thì ba lời chê đó là BA lỗi khác nhau, phải chữa khác nhau:

   ① "QUÁ NHIỀU TEXT" — lỗi NỘI DUNG, không phải lỗi CSS.
      Bản 1 viết đủ ý nhưng viết dài: điều nào cũng ba bốn dòng, câu nào cũng
      có mệnh đề giải thích. Chữa bằng cách VIẾT LẠI NGẮN — mỗi điều gói
      trong hai dòng, bỏ mệnh đề phụ, bỏ câu nhắc lại ý vừa nói. Không chữa
      bằng cách thu cỡ chữ hay cắt bớt mục: người dùng chính ngoài 40 tuổi
      đọc trên điện thoại, chữ nhỏ là đổi một lỗi lấy một lỗi nặng hơn.
   ② "QUÁ KHÓ NHÌN" — lỗi NHỊP. Một cột đoạn văn đều tăm tắp không cho mắt
      chỗ bám. Chữa bằng cấu trúc nhìn thấy được: số mục cỡ lớn, một dòng
      tóm tắt dưới mỗi tiêu đề, từng điều tách hàng với số ở cột trái.
   ③ "QUÁ XẤU" — lỗi thiếu ĐIỂM VÀO. Trang mở ra là chữ ngay. Chữa bằng khối
      TÓM LƯỢC ba ô ở đầu mỗi văn bản (`.excerpt`, _common.css) — mười giây
      là nắm được, ai cần chi tiết mới đọc tiếp.

   Ba thứ riêng của ba màn còn lại nằm dưới đây: đàn xếp hỏi–đáp (nay là THẺ
   rời), thang bước của Hướng dẫn (nay là ĐƯỜNG DỌC nối các bước), và cột
   kênh liên hệ. Biểu mẫu vẫn dùng nguyên bộ `.bm-*` của đơn đăng ký sự kiện,
   thêm đúng một thứ: `.btn-round--card` (ô chọn có biểu tượng) thay cho Select
   chủ đề — bốn sáu lựa chọn bày sẵn thì bấm một lần, Select thì bấm hai.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Đàn xếp hỏi–đáp ─────────────────────────────────────────────────────
   Bản 1 nhét 22 câu vào MỘT khung có kẻ chỉ ngăn — nhìn ra một cái bảng dày
   đặc, đúng thứ người dùng chê. Nay mỗi câu là một THẺ rời, cách nhau 10px:
   cùng số chữ nhưng có khoảng thở, và câu đang mở nổi hẳn lên.
   Vẫn dùng `<details>` thật: tắt JS vẫn mở được, Ctrl+F của trình duyệt vẫn
   tìm ra chữ trong câu đang đóng (Chrome tự mở). Mở NHIỀU câu cùng lúc —
   không dùng `name=` để ép mỗi lần một câu: người so hai câu cạnh nhau là
   chuyện thường, mà đóng sập câu đang đọc thì đọc ra là lỗi.
   ⚠️ `.prose ul` có `padding-left` — phải viết đủ `.prose .ask-list` mới
   đè được (luật kia 0-1-1, viết trần `.ask-list` là 0-1-0 nên thua, bẫy §8). */
.prose .ask-list{list-style:none;margin:20px 0 0;padding:0;
  display:flex;flex-direction:column;gap:10px}
.prose .ask-list>li{padding-left:0;margin-top:0}
.qa{border:1px solid var(--border);border-radius:16px;background:var(--white);
  transition:border-color var(--dur-btn) var(--ease-btn),box-shadow var(--dur-btn) var(--ease-btn)}
.qa:hover{border-color:var(--green-light)}
/* Câu đang mở: viền xanh + bóng nhẹ. Hai dấu hiệu, không chỉ một — nhìn ảnh
   tĩnh vẫn biết câu nào đang mở (§6B·1). */
.qa[open]{border-color:var(--green);box-shadow:0 6px 22px rgba(62,100,48,.08)}
.qa>summary{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px;align-items:center;
  padding:18px 20px;font-size:17px;font-weight:600;line-height:1.4;color:var(--ink);list-style:none}
.qa>summary::-webkit-details-marker{display:none}
.qa>summary:focus-visible{outline:2px solid var(--green);outline-offset:-3px;border-radius:16px}
/* Dấu cộng → trừ trong một vòng tròn: to hơn mũi chevron mảnh của bản 1
   (32px so với 11px) nên trên điện thoại ngón tay nhắm được, và trạng thái
   đóng/mở đọc ra ngay cả khi chỉ liếc qua. Vẽ bằng hai vạch, vạch dọc biến
   mất khi mở — không dùng ký tự + vì phông khác nhau canh khác nhau. */
.qa-arrow{position:relative;width:32px;height:32px;border-radius:50%;flex:0 0 32px;
  background:var(--cream);transition:background-color var(--dur-btn) var(--ease-btn)}
.qa-arrow::before,.qa-arrow::after{content:"";position:absolute;inset:50% 9px auto;
  height:2px;border-radius:2px;background:var(--green);transform:translateY(-1px)}
.qa-arrow::after{transform:translateY(-1px) rotate(90deg);
  transition:transform var(--dur-layer) var(--ease-btn),opacity var(--dur-layer) var(--ease-btn)}
.qa[open] .qa-arrow{background:var(--green)}
.qa[open] .qa-arrow::before,.qa[open] .qa-arrow::after{background:#fff}
.qa[open] .qa-arrow::after{transform:translateY(-1px) rotate(0);opacity:0}
.ask-tl{padding:0 20px 20px;font-size:16px;line-height:1.7;color:var(--gray);
  max-width:66ch}
.ask-tl p+p{margin-top:10px}
/* Lối đi trong câu trả lời là VIÊN BẤM, không phải chữ gạch chân lẫn trong
   đoạn: câu trả lời nào cũng kết bằng "làm việc đó ở đâu", nên nó là hành
   động chứ không phải chú thích. */
.prose .ask-go{margin-top:14px;display:inline-flex;align-items:center;gap:8px;text-decoration:none;
  height:38px;padding:0 16px;border-radius:999px;background:var(--green-pale);
  font-size:14.5px;font-weight:600;color:var(--green);text-decoration:none;
  transition:background-color var(--dur-btn) var(--ease-btn)}
.prose .ask-go:hover{background:var(--round-1);color:var(--green-dark)}
.prose .ask-go .ic{width:16px;height:16px;flex:0 0 16px;color:currentColor;margin:0}
/* Nhóm hết câu sau khi lọc thì tự ẩn — không để trơ tiêu đề trống (§5B). */
.ask-group[hidden]{display:none}
.ask-empty{margin-top:24px}
@container app (max-width:559px){
  .qa>summary{padding:15px 16px;font-size:16px;gap:12px}
  .ask-tl{padding:0 16px 16px}
}

/* ── Hướng dẫn: thang bước dọc ───────────────────────────────────────────
   Bản 1 xếp bốn THẺ CÓ VIỀN chồng lên nhau — bốn cái hộp giống hệt nhau,
   đọc ra là danh sách chứ không ra TRÌNH TỰ, mà viền thì cộng thêm nhiễu.
   Nay bỏ viền, thay bằng một ĐƯỜNG DỌC nối các số: nhìn là biết bước này
   tiếp bước kia, và mảng trắng thở ra hẳn.                                */
.prose .guide-list{list-style:none;margin:20px 0 0;padding:0}
.prose .guide-list>li{position:relative;padding:0 0 26px 66px;margin-top:0}
.prose .guide-list>li:last-child{padding-bottom:0}
/* Đường nối chạy từ dưới viên số tới hết bước — bước cuối không có. */
.prose .guide-list>li::before{content:"";position:absolute;left:22px;top:52px;bottom:6px;
  width:2px;border-radius:2px;background:var(--border)}
.prose .guide-list>li:last-child::before{display:none}
.guide-num{position:absolute;left:0;top:0;width:46px;height:46px;border-radius:50%;
  display:grid;place-items:center;background:var(--green);color:#fff;
  font-size:17px;font-weight:700;font-variant-numeric:tabular-nums}
.guide-card{display:block;padding-top:9px}
.guide-card b{display:block;font-size:17px;font-weight:600;line-height:1.35;color:var(--ink)}
.guide-card p{margin-top:6px;font-size:16px;line-height:1.65;color:var(--gray);max-width:62ch}
.prose .guide-go{margin-top:12px;display:inline-flex;align-items:center;gap:8px;text-decoration:none;
  height:38px;padding:0 16px;border-radius:999px;background:var(--green-pale);
  font-size:14.5px;font-weight:600;color:var(--green);text-decoration:none;
  transition:background-color var(--dur-btn) var(--ease-btn)}
.prose .guide-go:hover{background:var(--round-1);color:var(--green-dark)}
/* Mẹo xen giữa các bước — nền kem, không phải `.callout`: §5.7 cho tối đa
   MỘT callout mỗi trang, mà màn hướng dẫn có năm nhóm. */
.guide-save{margin-top:18px;display:grid;grid-template-columns:20px minmax(0,1fr);gap:12px;
  padding:14px 18px;border-radius:14px;background:var(--cream);
  font-size:15px;line-height:1.6;color:var(--gray)}
.guide-save .ic{width:20px;height:20px;color:var(--green);margin-top:2px}
@container app (max-width:559px){
  .prose .guide-list>li{padding-left:52px;padding-bottom:22px}
  .prose .guide-list>li::before{left:17px;top:44px}
  .guide-num{width:36px;height:36px;font-size:15px}
  .guide-card{padding-top:5px}
}

/* ── Ô CHỌN CÓ BIỂU TƯỢNG (`.btn-round--card`) ─────────────────────────────
   Biến thể lưới của `.btn-round` (_common.css). Dùng cho "Chủ đề" ở màn Liên
   hệ và "Loại góp ý" ở màn Góp ý — bản 1 để hai chỗ đó là Select.
   Vì sao đổi: Select giấu lựa chọn sau một cú bấm, mà đây là ô QUYẾT ĐỊNH
   cả lá thư đi về đâu; CC §6 cũng nói từ 7 mục trở xuống thì bày hết ra.
   Bày sẵn còn giúp người chưa biết mình cần gì — đọc sáu nhãn là tự nhận ra
   việc của mình thuộc loại nào.                                          */
.btn-round--card{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr))}
.btn-round--card label{flex:initial;min-width:0;display:grid;grid-template-columns:38px minmax(0,1fr);
  gap:12px;align-items:center;min-height:62px;padding:10px 14px;border-radius:14px}
/* Ô tròn thật ẩn đi — cả thẻ đã là vùng bấm, thêm một chấm tròn nữa thì
   thừa. Trạng thái chọn đọc bằng viền + nền + biểu tượng đổi màu. Ô vẫn
   nhận tiêu điểm bàn phím nên vành focus của `.btn-round label:focus-within`
   vẫn chạy. */
.btn-round--card input{position:absolute;opacity:0;width:0;height:0;margin:0}
.btn-round--card .det-ic{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;
  background:var(--cream);transition:background-color var(--dur-btn) var(--ease-btn)}
.btn-round--card .det-ic .ic{width:19px;height:19px;color:var(--gray);margin:0;
  transition:color var(--dur-btn) var(--ease-btn)}
.btn-round--card label:has(input:checked) .det-ic{background:var(--green)}
.btn-round--card label:has(input:checked) .det-ic .ic{color:#fff}
.btn-round--card b{display:block;font-size:15px;font-weight:600;line-height:1.3;color:var(--ink)}
.btn-round--card small{display:block;margin-top:2px;font-size:13px;line-height:1.35;color:var(--gray)}

/* ── Cột kênh liên hệ (màn Liên hệ · màn Góp ý) ──────────────────────────
   Biểu mẫu là việc chính nên nằm cột TRÁI rộng; cột phải là lối tắt cho
   người không muốn điền gì, và DÍNH theo người đọc.
   Bản 1 nhồi BA hộp vào cột phải, hộp nào cũng có câu dẫn hai dòng — cột
   phải dài hơn cả biểu mẫu. Nay còn HAI hộp, câu dẫn cắt còn một dòng hoặc
   bỏ hẳn: cột phụ mà dài hơn cột chính là tự nói rằng việc chính không quan
   trọng.
   ⚑ Email và hotline công khai còn TRỐNG bên "Cấu hình hệ thống › Liên hệ"
     — chưa có số thật thì không dựng thẻ đó (§2: không điền dữ liệu giả).
     Thẻ Facebook · Zalo dựng được vì hai đường dẫn đó admin đã khai thật. */
.cpg-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:clamp(24px,3vw,44px);align-items:start;
  max-width:1200px;margin-inline:auto}
@container app (max-width:1023px){.cpg-grid{grid-template-columns:minmax(0,1fr)}}
/* Màn hình thấp (1280x720, khung nhìn 624px) thì cột này cao hơn chỗ còn lại
   kể từ mép dính — khối cuối nằm ngoài mép dưới. Cuộn trong cột, thanh mảnh,
   chỉ hiện khi thiếu chỗ. Đệm ngang bù bằng margin âm cho khỏi xén viền thẻ.
   (21/09) */
.cpg-side{position:sticky;top:112px;display:flex;flex-direction:column;gap:14px;
  max-height:calc(100svh - 104px);overflow-y:auto;overscroll-behavior:contain;
  padding-inline:2px;margin-inline:-2px;scrollbar-width:thin}
.cpg-side>*{flex:0 0 auto}
@container app (max-width:1023px){.cpg-side{position:static}}
.cpg-box{padding:20px;border:1px solid var(--border);border-radius:18px;background:var(--white)}
.cpg-box h2{font-size:16.5px;font-weight:700;letter-spacing:-.02em;color:var(--ink)}
.cpg-box>p{margin-top:6px;font-size:14.5px;line-height:1.55;color:var(--gray)}
/* Lối tắt sang các màn trả lời sẵn: phần lớn thư gửi nhóm Admin là câu đã
   có trong Câu hỏi thường gặp. Đặt TRƯỚC biểu mẫu thì đỡ một lượt thư. */
.cpg-prev{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:2px}
.cpg-prev a{display:flex;align-items:center;gap:10px;min-height:40px;font-size:15px;
  color:var(--green);text-decoration:none}
.cpg-prev a:hover{text-decoration:underline;text-underline-offset:3px}
.cpg-prev .ic{width:17px;height:17px;flex:0 0 17px;margin:0}

/* Ô đồng ý cuối biểu mẫu: câu dài nhiều dòng trên điện thoại, mà `.box-sel`
   dùng chung căn GIỮA theo cả khối chữ — ô tích trôi xuống giữa đoạn, đọc ra
   là lỗi. Neo lên dòng đầu, đúng cách đã sửa cho `.spn-term .box-sel`. */
.fm-fld>.box-sel{align-items:flex-start;gap:10px;line-height:1.55}
.fm-fld>.box-sel input{margin-top:2px}


/* ══════════════════════════════════════════════════════════════════════════
   VÁ 22/09 · khối Nguyên tắc hoạt động (Giới thiệu) — nhạt hơn
   Nền cũ đi từ --dark-2 đến --dark-4, tức ba chặng ĐÁY của dải tối; đặt giữa
   một trang nền sáng thì thành mảng gần đen. Nhấc lên ba chặng trên.
   Chữ trắng trên chặng nhạt nhất #4A7C3A = 4.96 — vẫn đạt.
   ⚠ Phải đặt ở _screens.css chứ KHÔNG phải _common.css: _screens.css nạp sau nên
   luật gốc .about-nt ở đây sẽ đè mọi luật cùng độ đặc trưng viết ở _common.css.
   ══════════════════════════════════════════════════════════════════════════ */
.about-nt{background:
  radial-gradient(60% 70% at 10% 0%,rgba(143,190,48,.30),transparent 70%),
  radial-gradient(50% 60% at 96% 100%,rgba(242,180,23,.18),transparent 70%),
  linear-gradient(160deg,var(--dark-4),var(--dark-5) 52%,#4A7C3A)}
.about-nt-card{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.22)}
.about-nt-card:hover{border-color:rgba(255,255,255,.42);background-color:rgba(255,255,255,.16)}