:root{
--bg:#F3F3F1; --surf:#FFFFFF; --surf2:#FAFAF9;
--ink:#17191B; --ink2:#5C6266; --ink3:#93999D; --line:#E3E3DF; --line2:#D2D3CE;
--go:#146450; --go-bg:#E4F0EB; --go-line:#B6D6C9;
--due:#A8500E; --due-bg:#FAEDE0; --due-line:#E8CBAA;
/* Màu NHẬN DIỆN riêng của zone Lễ tốt nghiệp (19/9). Ngô Phú Cường xin cho
zone này "khác với giao diện hàng ngày một chút".
Chàm chứ không phải một sắc xanh lá hay cam đậm hơn, và lý do là ngữ
nghĩa chứ không phải thẩm mỹ: trong sản phẩm này --go (xanh) có ĐÚNG một
nghĩa (xong / người thu đã nhận) và --due (cam) có đúng một nghĩa (còn
phải làm gì đó). Mượn một trong hai làm màu nhận diện là làm hỏng cả hai.
Chàm là hướng duy nhất còn trống, và nó tách xa cả hai trên trục XANH
LAM — trục mà người mù màu đỏ-lục vẫn phân biệt được, khác hẳn cặp
xanh-lá ↔ cam vốn đã sát nhau (ΔE 7.7 protan, xem khối biểu đồ bên dưới).
LUẬT: --le CHỈ dùng cho khung sườn (băng đầu trang, huy hiệu bước, viền
khối đang mở). TUYỆT ĐỐI không dùng nó để nói một trạng thái — trạng thái
vẫn chỉ có ba màu cũ: xanh xong, cam còn nợ, xám chưa tới. */
--le:#403A72; --le2:#57508F; --le-bg:#EEEDF6; --le-line:#CBC8E4;
--r:14px; --r2:10px; --wrap:520px;
--sh:0 1px 2px rgba(23,25,27,.05), 0 4px 14px rgba(23,25,27,.045);
--sh2:0 2px 6px rgba(23,25,27,.07), 0 12px 32px rgba(23,25,27,.1);
--num:'Space Grotesk',ui-monospace,monospace;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--ink);font-family:'Be Vietnam Pro',system-ui,sans-serif;
font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased;
padding-bottom:calc(84px + env(safe-area-inset-bottom))}
body.noapp{padding-bottom:0}
/* ─── CẢM GIÁC ỨNG DỤNG, KHÔNG PHẢI TRANG WEB ───────────────────────────────
Bốn thứ dưới đây là bốn dấu hiệu "đây là trình duyệt" mà người dùng nhận ra
ngay cả khi không gọi tên được. Sửa 5/9 sau khi Ngô Phú Cường chụp màn hình
đầu trang chồng lên đồng hồ hệ thống.
1. CHẠM HAI LẦN KHÔNG PHÓNG NỮA. `touch-action:manipulation` bỏ cử chỉ
chạm-hai-lần-để-phóng, và bỏ luôn 300ms trình duyệt phải CHỜ xem có cú
chạm thứ hai không — nút bấm nhạy hẳn lên, đây là thứ cảm nhận được rõ
nhất. Chạy trên CẢ iOS, khác `user-scalable=no` chỉ chạy trên Android.
2. KHÔNG KÉO CĂNG MÉP MÀN HÌNH. `overscroll-behavior-y:none` bỏ cú nảy cao
su ở đầu/cuối trang và bỏ "kéo xuống để tải lại" của Chrome Android —
thứ mà kéo nhầm một cái là mất nguyên trạng thái màn đang mở.
3. CHẠM GIỮ KHÔNG BÔI ĐEN CHỮ. Bôi đen nhãn nút rồi hiện bảng "Sao chép /
Tra cứu" là dấu hiệu trang web rõ nhất. CHỈ tắt ở phần khung sườn
(đầu trang, thanh dưới, nút) — nội dung như số điện thoại, email, ghi
chú tư liệu PHẢI copy được, nên tuyệt đối không đặt lên `body`.
4. KHÔNG TRƯỢT NGANG. Một phần tử lỡ rộng quá là cả trang lắc ngang được,
cảm giác long lẻo. */
html{touch-action:manipulation;overscroll-behavior-y:none}
body{overscroll-behavior-y:none;overflow-x:hidden}
header,nav,button,label.f,.eb,.raillb,.grab,.seg{
-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.av,.nb .g{-webkit-user-drag:none;user-drag:none}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 16px}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none;padding:0}
.num{font-family:var(--num);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
:focus-visible{outline:2px solid var(--go);outline-offset:2px}
::selection{background:var(--go-bg)}
/* ─── ĐẦU TRANG ─── */
/* `padding-top:env(safe-area-inset-top)` là thứ CHỪA CHỖ cho đồng hồ, cột sóng
và pin của hệ điều hành. Thiếu đúng một dòng này thì khi cài lên màn hình
chính, đầu trang vẽ đè lên thanh trạng thái — Ngô Phú Cường chụp được ngày
5/9: "Nhóm 6" nằm chồng lên "16:57", "21 ngày đến bảo vệ" chồng lên cột sóng.
Lề DƯỚI đã chừa từ đầu (thanh điều hướng, sheet, toast đều có
safe-area-inset-bottom) — chỉ riêng lề TRÊN bị bỏ quên.
Đặt trên `header` chứ không phải `body`: header dán dính (sticky) nên phần
đệm này phải đi theo nó, để lúc cuộn thì nội dung trôi qua BÊN DƯỚI vùng mờ
chứ không lòi lên trên thanh trạng thái. */
header{position:sticky;top:0;z-index:40;background:rgba(243,243,241,.88);
backdrop-filter:saturate(1.6) blur(14px);border-bottom:1px solid var(--line);
padding-top:env(safe-area-inset-top)}
.hd{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 0 11px}
.hl{display:flex;align-items:baseline;gap:9px;min-width:0}
.hl .g{font-family:var(--num);font-weight:700;font-size:17px;letter-spacing:-.02em}
.hl .s{font-size:11.5px;color:var(--ink3);white-space:nowrap}
.cd{display:flex;align-items:baseline;gap:4px;flex:0 0 auto}
.cd .n{font-family:var(--num);font-weight:700;font-size:19px;letter-spacing:-.03em;color:var(--due)}
.cd .u{font-size:10.5px;color:var(--ink3)}
.av{width:34px;height:34px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;
font-family:var(--num);font-weight:600;font-size:12px;color:#fff;letter-spacing:.02em;
box-shadow:inset 0 -1px 2px rgba(0,0,0,.12)}
.avbtn{transition:transform .16s}
.avbtn:active{transform:scale(.93)}
/* thanh 8 đoạn */
.rail{display:flex;gap:3px;padding:0 0 4px}
.seg{flex:1;height:6px;border-radius:99px;background:var(--line2);overflow:hidden;position:relative;
transition:height .18s}
.seg i{position:absolute;inset:0 auto 0 0;background:var(--go);border-radius:99px;
transition:width .7s cubic-bezier(.22,1,.36,1)}
.seg.zero{background:var(--due-line)}
.seg:active{height:9px}
.raillb{display:flex;justify-content:space-between;padding:0 0 12px;font-size:10.5px;color:var(--ink3)}
.raillb b{font-family:var(--num);color:var(--ink);font-weight:600}
/* ─── KHUNG ─── */
main{padding-top:18px}
.view{display:none}
.view.on{display:block;animation:in .34s cubic-bezier(.22,1,.36,1)}
@keyframes in{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
.eb{display:flex;align-items:center;gap:9px;margin:0 0 11px;font-size:11px;font-weight:600;
letter-spacing:.09em;text-transform:uppercase;color:var(--ink3)}
.eb .c{font-family:var(--num);background:var(--line);color:var(--ink);padding:1px 6px;
border-radius:99px;font-size:10.5px;letter-spacing:0}
.eb::after{content:'';flex:1;height:1px;background:var(--line)}
.sect{margin-bottom:30px}
.card{background:var(--surf);border-radius:var(--r);box-shadow:var(--sh);margin-bottom:10px;overflow:hidden}
.cb{padding:15px 16px}
.mut{color:var(--ink2);font-size:13.5px;line-height:1.5}
.foot{font-size:11.5px;color:var(--ink3);line-height:1.65;padding:14px 2px 36px}
/* ─── VIỆC CỦA BẠN ─── */
.hero{background:var(--surf);border-radius:18px;box-shadow:var(--sh2);padding:18px;margin-bottom:22px;
position:relative;overflow:hidden}
.hero::before{content:'';position:absolute;inset:0 0 auto 0;height:3px;
background:linear-gradient(90deg,var(--due),var(--go))}
.hero .lb{font-size:11px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--ink3);margin-bottom:9px}
.hero h2{font-size:19px;font-weight:700;line-height:1.32;letter-spacing:-.015em;margin:0 0 7px}
.hero p{margin:0 0 15px;color:var(--ink2);font-size:14px;line-height:1.5}
.cta{display:inline-flex;align-items:center;gap:8px;background:var(--ink);color:#fff;
padding:11px 18px;border-radius:99px;font-size:14px;font-weight:600;transition:transform .16s,opacity .16s}
.cta:active{transform:scale(.97)}
.cta.done{background:var(--go-bg);color:var(--go);box-shadow:inset 0 0 0 1px var(--go-line)}
/* ─── DÒNG HOẠT ĐỘNG ─── */
.fd{display:flex;gap:12px;padding:11px 0;border-bottom:1px solid var(--line)}
.fd:last-child{border-bottom:0}
.fd .av{width:28px;height:28px;font-size:10.5px}
.fd .x{flex:1;font-size:13.5px;color:var(--ink2);line-height:1.45;padding-top:3px}
.fd .x b{color:var(--ink);font-weight:600}
.fd .t{font-family:var(--num);font-size:11px;color:var(--ink3);flex:0 0 auto;padding-top:5px}
/* ─── CƠ CẤU ─── */
.of{display:flex;align-items:center;gap:13px;padding:13px 16px;border-bottom:1px solid var(--line)}
.of:last-child{border-bottom:0}
.of .rl{font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
color:var(--ink3);flex:0 0 74px}
.of .nm{font-weight:600;font-size:15px}
.of .co{font-size:12.5px;color:var(--ink2);margin-top:1px;line-height:1.35}
.of .src{font-size:11px;color:var(--ink3);margin-top:4px}
.of.void .nm{color:var(--due);font-weight:500}
.ico{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;flex:0 0 auto;
background:var(--line);color:var(--ink2);font-size:14px;transition:.16s}
.ico:hover{background:var(--ink);color:#fff}
/* ─── THÀNH VIÊN ─── */
.mrow{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line);width:100%;text-align:left}
.mrow:last-of-type{border-bottom:0}
.mrow .b{flex:1;min-width:0}
.mrow .nm{font-weight:600;font-size:14.5px;display:flex;align-items:center;gap:6px}
.mrow .co{font-size:12.5px;color:var(--ink2);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ring{width:26px;height:26px;flex:0 0 auto;border-radius:50%;display:grid;place-items:center;
font-family:var(--num);font-size:9.5px;font-weight:600}
.ring.full{background:var(--go-bg);color:var(--go)}
.ring.part{background:var(--due-bg);color:var(--due)}
.pan{background:var(--surf2);border-top:1px solid var(--line);padding:0 16px;
max-height:0;overflow:hidden;transition:max-height .38s cubic-bezier(.22,1,.36,1)}
.pan.on{max-height:620px;padding:15px 16px}
.fi{margin-bottom:12px}
.fi .k{font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink3);margin-bottom:3px}
.fi .v{font-size:14px;line-height:1.45}
.fi .v.blank{color:var(--ink3);font-style:italic}
.fi .was{font-size:11.5px;color:var(--ink3);margin-top:2px}
.fi .was s{opacity:.7}
.tagrow{display:flex;gap:6px;flex-wrap:wrap;margin-top:2px}
.tg{font-size:11.5px;padding:3px 9px;border-radius:99px;background:var(--line);color:var(--ink2);white-space:nowrap}
.tg.go{background:var(--go-bg);color:var(--go)}
.tg.due{background:var(--due-bg);color:var(--due)}
/* ─── KHO ─── */
.fl{display:flex;gap:7px;overflow-x:auto;padding-bottom:14px;scrollbar-width:none;
margin:0 -16px;padding-left:16px;padding-right:16px}
.fl::-webkit-scrollbar{display:none}
/* Trong bảng trượt lên thì hàng chip KHÔNG cuộn ngang được: lề âm -16px của
.fl bị mép bảng cắt mất, chip cuối cùng lòi ra ngoài và không ai kéo tới
được. Cho xuống dòng thay vì cuộn — bốn con số phải nhìn thấy cùng lúc thì
người thu mới biết còn bao nhiêu người chưa khai. */
.fl.cuon{flex-wrap:wrap;overflow:visible;margin:0;padding-left:0;padding-right:0;row-gap:7px}
/* Và chip trong hàng XUỐNG DÒNG được phép tự xuống dòng BÊN TRONG nó.
.fc có white-space:nowrap, đúng cho hàng CUỘN NGANG — ở đó chip dài thì kéo
tới được. Hàng .cuon thì không cuộn, nên nowrap chỉ đẩy chữ ra ngoài mép
màn hình: nhãn lĩnh vực KHKD dài nhất ("Nông nghiệp - Lâm nghiệp - Thuỷ sản
(trồng trọt & chăn nuôi)") đo được 416px ở khổ 390px, tức TRÀN NGANG cả
trang và kéo theo mọi thứ khác lệch đi 42px.
Không phép kiểm chuỗi nào thấy, và ngay cả phép đo tràn ngang cũng không
thấy nếu nó đo lúc khối chứa hàng chip đang GẬP — đúng chỗ đã sót. */
.fl.cuon .fc{white-space:normal;max-width:100%;text-align:left;line-height:1.35}
/* ─── Biểu đồ tiến độ thu ───
Cột chồng ba trạng thái. Ba điều KHÔNG phải trang trí:
1. Vân chéo trên ô cam. Đo bằng trình kiểm màu: xanh --go và cam --due cách
nhau ΔE 7,7 với người mù màu đỏ-lục ở nền sáng — nằm trong dải sàn 6–8,
chỉ hợp lệ khi có mã hoá thứ hai. Vân chéo là mã hoá ấy; bỏ nó đi là hai
ô nhìn như một với một phần người đọc.
2. Khe 2px giữa các ô, để mắt tách được ranh giới mà không cần màu.
3. Số in thẳng dưới mỗi cột. Ô xám tương phản 1,47 với nền trắng, dưới 3:1
nên bắt buộc phải có nhãn chữ đi kèm. */
.tk{display:grid;gap:14px}
.tk-r{display:grid;gap:6px}
.tk-nh{display:flex;align-items:baseline;gap:8px;font-size:13.5px;font-weight:600}
.tk-nh .p{margin-left:auto;font-family:var(--num);font-size:12.5px;color:var(--ink3);font-weight:600}
.tk-t{display:flex;gap:2px;height:14px;border-radius:7px;overflow:hidden;background:var(--surf);
box-shadow:inset 0 0 0 1px var(--line)}
.tk-t i{display:block;min-width:0}
.tk-a{background:var(--go)}
.tk-b{background:var(--due);
background-image:repeating-linear-gradient(45deg,transparent 0 3px,rgba(255,255,255,.5) 3px 6px)}
.tk-c{background:var(--line2)}
.tk-s{font-size:11.5px;color:var(--ink2);line-height:1.5}
.tk-s b{font-family:var(--num);color:var(--ink)}
.tk-con{padding-left:14px;border-left:2px solid var(--line);display:grid;gap:11px;margin-top:2px}
/* Chú giải: ô màu + CHỮ, không bao giờ chỉ có màu. */
.tk-cg{display:flex;flex-wrap:wrap;gap:12px;font-size:11.5px;color:var(--ink2);margin-bottom:4px}
.tk-cg span{display:inline-flex;align-items:center;gap:6px}
.tk-cg i{width:11px;height:11px;border-radius:3px;display:block;flex:0 0 auto}
.fc{font-size:12.5px;white-space:nowrap;border-radius:99px;padding:7px 14px;background:var(--surf);
color:var(--ink2);box-shadow:var(--sh);transition:.16s}
.fc.on{background:var(--ink);color:#fff}
.rs{display:flex;gap:12px;padding:13px 16px;border-bottom:1px solid var(--line);align-items:center;
text-decoration:none;color:inherit;width:100%;text-align:left}
.rs:last-child{border-bottom:0}
/* Nút ✎ nằm cạnh dòng tư liệu, KHÔNG nằm trong thẻ — nhét button vào
trong là HTML sai và bấm vào nút sẽ mở luôn đường dẫn. */
.rsw{display:flex;align-items:stretch;border-bottom:1px solid var(--line)}
.rsw:last-child{border-bottom:0}
.rsw .rs{flex:1;min-width:0;border-bottom:0}
.rsw .ico{flex:0 0 auto;display:flex;align-items:center;padding:0 14px;color:var(--ink3)}
.rsw .ico:hover{color:var(--ink)}
.ext{font-family:var(--num);font-size:9px;font-weight:600;letter-spacing:.06em;padding:5px 6px;
border-radius:6px;background:var(--line);color:var(--ink2);flex:0 0 auto}
.rs .b{flex:1;min-width:0}
.rs .t{font-weight:600;font-size:14px;line-height:1.35}
.rs .m{font-size:11.5px;color:var(--ink3);margin-top:3px}
/* ─── PHẦN BÀI ─── */
.pt{display:flex;gap:13px;padding:14px 16px;border-bottom:1px solid var(--line);width:100%;text-align:left;
transition:background .16s}
.pt:last-child{border-bottom:0}
.pt:active{background:var(--surf2)}
.pnum{font-family:var(--num);font-weight:700;font-size:13px;color:var(--ink3);flex:0 0 20px;padding-top:2px}
.pt.zero .pnum{color:var(--due)}
.pbd{flex:1;min-width:0}
.pbd h4{margin:0 0 4px;font-size:15px;font-weight:600;line-height:1.3;letter-spacing:-.005em}
.pbd .rq{font-size:12.5px;color:var(--ink2);line-height:1.45;margin-bottom:8px}
.own{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--ink2)}
.own .av{width:20px;height:20px;font-size:8.5px}
.hint{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--go);
background:var(--go-bg);padding:4px 10px;border-radius:99px;box-shadow:inset 0 0 0 1px var(--go-line)}
.pbar{height:4px;background:var(--line);border-radius:99px;margin-top:9px;overflow:hidden}
.pbar i{display:block;height:100%;background:var(--go);border-radius:99px;
transition:width .7s cubic-bezier(.22,1,.36,1)}
.pt.zero .pbar i{background:var(--due)}
.pct{font-family:var(--num);font-size:12px;font-weight:600;color:var(--ink3);flex:0 0 auto;padding-top:2px}
/* Xong thì nói bằng hình chứ đừng bắt đọc con số: "100%" và "80%" trông na ná
nhau khi lướt, còn dấu ✓ trên nền xanh thì nhận ra ngay không cần đọc.
Dùng đúng cặp màu --go/--go-bg của vòng tròn hồ sơ đã điền đủ, để "xong" ở
chỗ nào trong ứng dụng cũng là một màu ấy. */
.pct.xong{font-size:13px;color:var(--go);background:var(--go-bg);
border-radius:999px;width:22px;height:22px;display:grid;place-items:center;padding:0}
.eb .c.xong{background:var(--go-bg);color:var(--go)}
/* Buổi HÔM NAY tách thành khối riêng ở đầu tab Hôm nay.
Viền xanh chứ không chỉ đổi nền — nền nhạt lướt qua là không thấy, đúng bài
học đã ghi trong public/lich/lich.css. Cùng cặp màu --go/--go-bg với mọi chỗ
khác nói "xong / đang là", để "hôm nay" ở màn nào cũng một màu. */
.eb .c.nay{background:var(--go-bg);color:var(--go);text-transform:none;letter-spacing:.01em}
.card.naycard{box-shadow:0 0 0 1.5px var(--go),var(--sh)}
.fd.buoinay .x b{color:var(--go)}
/* Đầu mục buổi học trong tab Tư liệu — cấp dưới của .eb, nên nhỏ và nhạt hơn,
và cần lề trên vì nó đứng sau một .card chứ không phải đầu mục lớn. */
.eb.ebbuoi{margin-top:18px;font-size:10.5px;color:var(--ink3);text-transform:none;letter-spacing:.02em}
.eb.ebbuoi:first-of-type{margin-top:0}
/* Danh bạ lớp.
Nhãn Ban cán sự lớp dùng cặp màu --go giống mọi chỗ khác nói "có vai, đang
giữ việc". KHÔNG dùng --due: cam trong sản phẩm này luôn nghĩa là "còn phải
làm gì đó", mà giữ chức thì không phải việc còn nợ. N7: chuỗi hiển thị viết
đủ "Ban cán sự lớp", không viết tắt — nhãn lấy thẳng từ máy chủ.
Thông tin đã che in bằng phông số cho các dấu * thẳng hàng, và nhạt hơn để
nhìn là biết ngay đây không phải số bấm gọi được. */
.tg.bcs{background:var(--go-bg);color:var(--go);font-size:10px;padding:1px 7px}
.v .che{font-family:var(--num);color:var(--ink3);letter-spacing:.02em}
#dbTim{margin-top:2px}
/* Trong danh bạ lớp, dòng chức vụ/đơn vị được xuống HAI dòng thay vì cắt cụt.
Ở thẻ Nhóm thì cắt một dòng là đủ — mười bốn người quen mặt nhau, tên là đã
nhận ra. Ở thẻ Cả lớp thì không: lớp này có hàng chục người cùng làm ở
"Công ty Cổ phần Hữu Nghị…", nên cắt tại chỗ ấy là năm dòng liền giống hệt
nhau và danh bạ mất đúng cái việc nó sinh ra để làm. Đo bằng ảnh chụp, không
phải đoán. */
.dblop .mrow .co{white-space:normal;overflow:visible;text-overflow:clip;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.35}
/* Nhãn "đã thu đủ" trên đầu thẻ đợt thu — cùng cặp màu với mọi dấu ✓ khác. */
.xongchip{background:var(--go-bg);color:var(--go);border-radius:999px;
padding:2px 8px;margin-left:6px;letter-spacing:.04em;white-space:nowrap}
/* "Cả nhóm đã khai" — mốc thật nhưng CHƯA phải quỹ xong. Màu cam của "đã tự
khai", không bao giờ xanh: xanh trong ứng dụng này chỉ có một nghĩa duy
nhất là người thu đã soi sao kê và nhận được tiền. */
.khaichip{background:var(--due-bg);color:var(--due);border-radius:999px;
padding:2px 8px;margin-left:6px;letter-spacing:.04em;white-space:nowrap}
/* Báo có bản mới. Nổi trên thanh điều hướng, không che nút nào, và không tự
tải lại — người ta có thể đang gõ dở một ô. */
.banmoi{position:fixed;left:50%;transform:translateX(-50%);
bottom:calc(96px + env(safe-area-inset-bottom));z-index:60;
background:var(--ink);color:#fff;border-radius:999px;
padding:11px 20px;font-size:13.5px;font-weight:600;box-shadow:var(--sh2)}
@media (prefers-reduced-motion:no-preference){
.banmoi{animation:banlen .22s ease-out}
@keyframes banlen{from{opacity:0;transform:translate(-50%,10px)}to{opacity:1;transform:translate(-50%,0)}}
}
/* ─── RUBRIC ─── */
.rub{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:20px}
.rc{background:var(--surf);border-radius:var(--r);box-shadow:var(--sh);padding:14px 15px}
.rc .p{font-family:var(--num);font-weight:700;font-size:26px;letter-spacing:-.03em;line-height:1}
.rc .l{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink3);margin-top:4px}
.rc ul{margin:9px 0 0;padding-left:15px;font-size:12.5px;color:var(--ink2);line-height:1.5}
/* ─── TÂM ĐẮC ─── */
.q{background:var(--surf);border-radius:var(--r);box-shadow:var(--sh);padding:15px 16px;margin-bottom:10px}
.q blockquote{margin:0 0 11px;font-size:15px;line-height:1.52}
.qf{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12px;color:var(--ink3)}
.qf .w{color:var(--ink);font-weight:600}
.lnk{font-size:12px;color:var(--due);text-decoration:underline;margin-left:auto}
/* chỉ đọc (không có quyền sửa) */
.ro{background:var(--surf);box-shadow:inset 0 0 0 1px var(--line2);border-radius:10px;
padding:12px 13px;font-size:14px;margin-bottom:14px}
/* nút phụ, viền mảnh */
.wide.ghost{background:transparent;color:var(--ink2);box-shadow:inset 0 0 0 1px var(--line2)}
/* ─── QUỸ ─── */
.amt{font-family:var(--num);font-weight:700;font-size:34px;letter-spacing:-.035em;line-height:1}
.amt small{font-family:'Be Vietnam Pro';font-size:14px;font-weight:500;color:var(--ink3);letter-spacing:0}
.qrw{padding:20px 16px;text-align:center;background:var(--surf2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.qrw img,.qrw .ph{width:196px;max-width:100%;border-radius:12px;background:#fff;margin:0 auto;display:block}
.qrw .ph{height:auto;min-height:120px;display:grid;place-items:center;box-shadow:inset 0 0 0 1px var(--line2);
font-size:12px;color:var(--ink3);padding:22px;line-height:1.55}
.qrw .cap{font-size:12.5px;color:var(--ink2);margin-top:13px;line-height:1.6}
.copy{display:inline-flex;align-items:center;gap:7px;font-family:var(--num);font-size:13px;font-weight:600;
background:var(--surf);box-shadow:var(--sh);padding:8px 13px;border-radius:99px;margin-top:9px;transition:.16s;
max-width:100%;overflow-wrap:anywhere}
.copy:active{transform:scale(.96)}
/* Hai nút chép xếp dọc, canh giữa trong .qrw. Số tài khoản có nút RIÊNG từ
19/9: nhánh dự phòng lúc mã QR hỏng bảo người ta "chuyển khoản tay theo số
tài khoản bên dưới", mà số ấy trước nay là chữ thường 12.5px không chép
được — tức đường lui chính thức bắt người 50 tuổi đọc tay một dãy 10-14
chữ số rồi gõ lại vào app ngân hàng. Gõ sai một số là tiền đi nhầm người. */
.qrw .chep{display:flex;flex-direction:column;align-items:center;gap:7px;margin-top:11px}
.qrw .chep .copy{margin-top:0}
/* Nhãn phụ phải rơi về phông CHỮ, không dùng var(--num): Space Grotesk thiếu
glyph tiếng Việt nên "chép" rụng dấu và đứng lệch hẳn — đúng lỗi đã trả giá
với tiêu đề trang /giao-thuong. */
.copy .nh{font-family:'Be Vietnam Pro',system-ui,sans-serif;font-size:11px;
font-weight:500;color:var(--ink3);letter-spacing:0}
.dots{display:flex;gap:5px;flex-wrap:wrap;margin-top:12px}
.dots i{width:12px;height:12px;border-radius:4px;background:var(--line2);transition:background .4s}
.dots i.d{background:var(--due)}
.dots i[data-v]{background:var(--go)}
.wide.ok{background:var(--go-bg);color:var(--go);box-shadow:inset 0 0 0 1px var(--go-line);
display:block;text-align:center;padding:14px;border-radius:12px;font-weight:600;font-size:15px}
.wide:disabled{opacity:.5}
/* .wide vốn viết cho