/* MK25 — màu theo spec 16.3: navy, vàng đồng, đỏ phượng, nền giấy */
:root {
  --navy: #102D54; --navy-2: #1b3d6b; --dong: #C89A43; --dong-nhat: #f3e8d2; --phuong: #B72830;
  --nen: #FAF7EF; --giay: #fff; --chu: #1d2a3a; --nhat: #5b6675; --vien: #e6dcc6;
  --xanh: #1f7a4d; --xanh-nen: #e6f3ec; --vang-nen: #fdf3dc; --do-nen: #fbe9ea;
  --bo: 10px;
}
* { box-sizing: border-box; margin: 0; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { background: var(--nen); color: var(--chu); font: 16px/1.65 "Be Vietnam Pro", system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
a { color: var(--navy); text-underline-offset: 2px; }
a:hover { color: var(--phuong); }
:focus-visible { outline: 3px solid var(--dong); outline-offset: 2px; border-radius: 4px; }
img { max-width: 100%; height: auto; }
code { font-size: .9em; background: var(--dong-nhat); padding: 1px 5px; border-radius: 4px; word-break: break-all; }
.bo-qua { position: absolute; left: -999px; top: 8px; background: var(--navy); color: #fff; padding: 8px 12px; z-index: 50; }
.bo-qua:focus { left: 8px; }
.so { font-variant-numeric: tabular-nums; }
.nho { font-size: 13px; }
.goi-y { font-size: 14px; color: var(--nhat); }
.cho { color: var(--nhat); font-style: italic; }
.khung { max-width: 920px; margin: 0 auto; padding: 0 20px; }
h1, h2 { color: var(--navy); }
h1 { font: 600 clamp(26px, 5vw, 36px)/1.2 Lora, Georgia, serif; margin-bottom: 12px; }
h2 { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--dong); margin: 36px 0 14px; }
p + p { margin-top: 10px; }

/* Nút */
.nut { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 10px 18px; border: 1.5px solid var(--navy); border-radius: 999px; background: var(--giay); color: var(--navy); font: 500 15px/1.2 inherit; font-family: inherit; text-decoration: none; cursor: pointer; }
.nut:hover { background: var(--dong-nhat); color: var(--navy); }
.nut-chinh { background: var(--phuong); border-color: var(--phuong); color: #fff; }
.nut-chinh:hover { background: #9d1f27; border-color: #9d1f27; color: #fff; }
.nut-lon { min-height: 54px; padding: 14px 32px; font-size: 17px; font-weight: 700; }
.nut-nho { min-height: 34px; padding: 6px 12px; font-size: 14px; }
.nut-nguy { border-color: var(--phuong); color: var(--phuong); }
.nut-nguy.dang-hoi { background: var(--phuong); color: #fff; }
.nut-rong { width: 100%; }
.nut[disabled] { opacity: .6; cursor: progress; }
.lien-ket { background: none; border: 0; padding: 0; color: var(--navy); text-decoration: underline; font: inherit; cursor: pointer; }
.hang-nut { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 20px; }

/* Thông báo */
.bao { padding: 12px 16px; border-radius: var(--bo); margin: 16px 0; border-left: 4px solid; }
.bao-ok { background: var(--xanh-nen); border-color: var(--xanh); }
.bao-canh { background: var(--vang-nen); border-color: var(--dong); }
.bao-loi { background: var(--do-nen); border-color: var(--phuong); }
.bao-btc { background: var(--navy); color: #fff; padding: 10px 20px; text-align: center; font-size: 15px; }

/* Nhãn trạng thái */
.nhan { display: inline-block; padding: 1px 9px; border-radius: 999px; font-size: 12.5px; font-weight: 500; background: #eef0f3; color: var(--nhat); white-space: nowrap; }
.nhan-lon { font-size: 14px; padding: 4px 12px; }
.nhan-yes, .nhan-verified { background: var(--xanh-nen); color: var(--xanh); }
.nhan-maybe, .nhan-pending { background: var(--vang-nen); color: #8a6214; }
.nhan-no, .nhan-cancelled { background: #eef0f3; color: var(--nhat); }
.nhan-needs_review, .nhan-rejected { background: var(--do-nen); color: var(--phuong); }
.nhan-nhap { background: transparent; border: 1px dashed var(--dong); color: #8a6214; }

/* ── Đầu trang công khai ── */
.dau-trang { background: var(--giay); border-bottom: 1px solid var(--vien); position: sticky; top: 0; z-index: 20; }
.dau-trong { max-width: 1100px; margin: 0 auto; padding: 8px 16px; display: flex; align-items: center; gap: 16px; }
.hieu { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--navy); font-weight: 700; line-height: 1.1; flex-shrink: 0; }
.hieu small { display: block; font-weight: 500; font-size: 12px; color: var(--nhat); }
.menu { display: flex; gap: 4px; overflow-x: auto; flex: 1; scrollbar-width: none; }
.menu::-webkit-scrollbar { display: none; }
.menu a { padding: 8px 12px; border-radius: 999px; text-decoration: none; color: var(--chu); font-size: 15px; white-space: nowrap; }
.menu a[aria-current="page"] { background: var(--dong-nhat); color: var(--navy); font-weight: 500; }
.nut-dau { min-height: 38px; padding: 8px 16px; }
@media (max-width: 760px) {
  .dau-trong { flex-wrap: wrap; gap: 4px 10px; padding: 8px 12px 0; }
  .menu { order: 3; flex-basis: 100%; margin: 0 -12px; padding: 0 8px 6px; }
  .nut-dau { margin-left: auto; }
}

/* ── Trang chủ ── */
.dau-hero { text-align: center; padding-top: 36px; }
.logo-hero { width: min(280px, 64vw); display: block; margin: 0 auto 24px; }
.tieu-de { font: 600 clamp(28px, 6vw, 46px)/1.15 Lora, Georgia, serif; letter-spacing: -.01em; }
.tieu-de em { font-style: italic; font-weight: 500; color: var(--phuong); }
.moc { margin-top: 12px; font-weight: 500; color: var(--navy); }
.moc span { display: block; font-weight: 400; color: var(--nhat); font-size: 15px; }
.hero-cta { margin-top: 26px; }
.ghi-chu { margin-top: 12px; font-size: 14px; color: var(--nhat); }

.dem { margin: 30px auto 0; max-width: 600px; }
.dem-nhan { font: 700 12px/1 "Be Vietnam Pro", sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--dong); }
.dem-o { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 14px; border-top: 2px solid var(--dong); border-bottom: 2px solid var(--dong); }
.dem-o div { padding: 16px 4px 14px; }
.dem-o div + div { border-left: 1px solid var(--vien); }
.dem-o b { display: block; font: 600 clamp(40px, 12vw, 84px)/1 Lora, Georgia, serif; color: var(--navy); font-variant-numeric: tabular-nums lining-nums; }
.dem-o div:first-child b { color: var(--phuong); }
.dem-o span { display: block; margin-top: 8px; font-size: clamp(12px, 3vw, 14px); font-weight: 500; color: var(--nhat); }
.dem-xong { margin-top: 14px; font: 600 clamp(24px, 5vw, 34px)/1.3 Lora, Georgia, serif; color: var(--phuong); }

.tien-do { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-top: 40px; background: var(--vien); border: 1px solid var(--vien); border-radius: var(--bo); overflow: hidden; }
.tien-do div { background: var(--giay); padding: 16px 12px; text-align: center; }
.tien-do b { display: block; font: 600 30px/1.1 Lora, Georgia, serif; color: var(--navy); }
.tien-do span { font-size: 13px; color: var(--nhat); }

.thu { margin-top: 44px; padding-top: 28px; border-top: 1px solid var(--vien); font: italic 500 18px/1.75 Lora, Georgia, serif; color: #2b3442; }
.ky { margin-top: 12px; text-align: right; font-weight: 500; font-size: 14px; color: var(--navy); }
.hai-cot { display: grid; gap: 8px 40px; margin-bottom: 48px; }
@media (min-width: 760px) { .hai-cot { grid-template-columns: 1fr 1fr; } }

.lich { list-style: none; padding: 0; border-left: 2px solid var(--vien); margin-left: 6px; }
.lich li { position: relative; display: flex; gap: 16px; padding: 7px 0 7px 22px; }
.lich li::before { content: ""; position: absolute; left: -7px; top: 15px; width: 12px; height: 12px; border-radius: 50%; background: var(--nen); border: 2px solid var(--dong); }
.lich li.chinh::before { background: var(--phuong); border-color: var(--phuong); }
.lich time { flex: 0 0 60px; font-weight: 700; color: var(--navy); font-variant-numeric: tabular-nums; }

.the-tin { background: var(--giay); border: 1px solid var(--vien); border-radius: var(--bo); padding: 18px 20px; }
.the-tin h2 { margin-top: 0; }
.the-tin dl, dl.the-tin { display: grid; grid-template-columns: max-content 1fr; gap: 8px 16px; }
.the-tin dt { color: var(--nhat); font-size: 14px; padding-top: 1px; }
.the-tin dd { font-weight: 500; }
.the-tin.nho { font-size: 14px; margin: 14px 0; }
.the-ck dd.so { font-size: 18px; letter-spacing: .02em; }
@media (max-width: 480px) { .the-tin dl, dl.the-tin { grid-template-columns: 1fr; gap: 0; } .the-tin dd { margin-bottom: 8px; } }

/* ── Trang nội dung ── */
.trang { padding-top: 32px; padding-bottom: 56px; }
.hep { max-width: 640px; }
.dan { font-size: 17px; color: #34404f; margin-bottom: 8px; }
.van-ban ul { padding-left: 20px; margin: 8px 0; }
.van-ban li + li { margin-top: 6px; }
.ds-gon { list-style: none; padding: 0; }

.bang { width: 100%; border-collapse: collapse; background: var(--giay); border: 1px solid var(--vien); border-radius: var(--bo); overflow: hidden; font-size: 15px; }
.bang th, .bang td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--vien); vertical-align: middle; }
.bang th { font-size: 12.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--nhat); font-weight: 500; background: #fbf9f4; }
.bang .so { text-align: right; }
.bang tr:last-child td { border-bottom: 0; }
.bang tr.la-toi td { background: var(--dong-nhat); }
.bang tr.mo td { opacity: .55; }
.cuon-ngang { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Mã đăng ký + link riêng */
.ma-dk { margin: 24px 0; padding: 20px; text-align: center; border: 2px dashed var(--dong); border-radius: var(--bo); background: var(--giay); }
.ma-dk span { display: block; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--dong); font-weight: 700; }
.ma-dk b { font: 600 clamp(30px, 8vw, 42px)/1.2 Lora, Georgia, serif; color: var(--navy); letter-spacing: .04em; }
.quan-trong { border-color: var(--dong); border-width: 2px; margin-bottom: 20px; }
.link-rieng { display: flex; gap: 8px; margin-top: 12px; }
.link-rieng input { flex: 1; min-width: 0; font-family: ui-monospace, Menlo, monospace; font-size: 14px; }

/* Lớp của tôi */
.ds-ban { list-style: none; padding: 0; display: grid; gap: 10px; margin-top: 18px; }
@media (min-width: 700px) { .ds-ban { grid-template-columns: 1fr 1fr; } }
.ds-ban li { background: var(--giay); border: 1px solid var(--vien); border-radius: var(--bo); padding: 14px 16px; }
.ds-ban li.la-toi { border-color: var(--dong); }
.ds-ban .ten { font-weight: 700; color: var(--navy); }
.ds-ban .ten span { font-weight: 400; color: var(--nhat); }
.ds-ban .phu { font-size: 14px; color: var(--nhat); margin-top: 4px; }
.loi-nhan { margin-top: 8px; font: italic 15px/1.6 Lora, Georgia, serif; color: #34404f; }

/* ── Biểu mẫu ── */
.o-nhap { margin-top: 16px; }
.o-nhap label, fieldset legend { display: block; font-weight: 500; margin-bottom: 6px; color: var(--navy); }
input:not([type=checkbox]):not([type=radio]), select, textarea {
  width: 100%; min-height: 46px; padding: 10px 12px; border: 1.5px solid #cfc6b3; border-radius: 8px; background: #fff; color: var(--chu); font: 16px/1.4 inherit; font-family: inherit;
}
textarea { min-height: 90px; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--navy); outline: 2px solid rgba(16, 45, 84, .15); }
[aria-invalid="true"], [aria-invalid="true"] input { border-color: var(--phuong) !important; }
.loi-o { color: var(--phuong); font-size: 14px; margin-top: 4px; font-weight: 500; }
.bb { color: var(--phuong); }
fieldset { border: 0; padding: 0; min-width: 0; }
.nhom-chon { margin-top: 18px; }
.chon { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; cursor: pointer; line-height: 1.45; }
.chon input { width: 20px; height: 20px; margin-top: 1px; flex-shrink: 0; accent-color: var(--phuong); }
.bay { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-dk .buoc { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--vien); }
.form-dk .buoc > legend { font: 600 21px/1.3 Lora, Georgia, serif; color: var(--navy); padding: 0; float: left; width: 100%; margin-bottom: 4px; }
.form-dk .buoc > legend + * { clear: both; }
.form-dk.wizard .buoc { border-top: 0; padding-top: 0; margin-top: 8px; }
.buoc-chi { display: flex; gap: 6px; list-style: none; padding: 0; margin: 20px 0 8px; counter-reset: b; }
.buoc-chi li { flex: 1; font-size: 12px; color: var(--nhat); text-align: center; padding-top: 10px; border-top: 4px solid var(--vien); counter-increment: b; }
.buoc-chi li.xong { border-color: var(--dong); }
.buoc-chi li.dang { border-color: var(--phuong); color: var(--navy); font-weight: 700; }
@media (max-width: 480px) { .buoc-chi li { font-size: 0; } .buoc-chi li.dang { font-size: 12px; flex: 2.5; } }
.vung-huy { margin-top: 40px; padding: 18px 20px; border: 1px solid #ecc9cb; border-radius: var(--bo); background: #fff; }
.vung-huy h2 { margin-top: 0; color: var(--phuong); }
.vung-huy p { margin-bottom: 12px; }
.tom-tat { margin: 16px 0 8px; }

/* Thanh đăng ký dính đáy trên điện thoại */
.cta-day { display: none; }
@media (max-width: 760px) {
  .cta-day { display: flex; position: fixed; left: 16px; right: 16px; bottom: max(16px, env(safe-area-inset-bottom)); z-index: 30; min-height: 52px; box-shadow: 0 6px 20px rgba(16, 45, 84, .25); }
  body.pub { padding-bottom: 84px; }
  .trang-chu .cta-day { display: none; }
  .trang-chu.qua-hero .cta-day { display: flex; }
}

.chan-trang { margin-top: 24px; padding: 24px 0 32px; border-top: 1px solid var(--vien); font-size: 14px; color: var(--nhat); text-align: center; }

/* ══ Quản trị ══ */
body.adm { background: #f5f3ee; }
.adm-dau { display: flex; align-items: center; gap: 12px 20px; flex-wrap: wrap; padding: 10px 20px; background: var(--navy); color: #fff; }
.adm-dau .hieu { color: #fff; }
.adm-menu { display: flex; gap: 2px; flex-wrap: wrap; flex: 1; }
.adm-menu a { color: #dfe6f0; text-decoration: none; padding: 7px 10px; border-radius: 999px; font-size: 14.5px; }
.adm-menu a[aria-current="page"], .adm-menu a:hover { background: rgba(255, 255, 255, .14); color: #fff; }
.adm-toi { display: flex; gap: 14px; align-items: center; font-size: 13px; color: #c6d1e0; flex-wrap: wrap; }
.adm-toi a, .adm-toi .lien-ket { color: #fff; font-size: 13px; }
.adm-than { max-width: 1200px; margin: 0 auto; padding: 24px 20px 64px; }
.adm h1 { font-family: "Be Vietnam Pro", sans-serif; font-weight: 700; font-size: 26px; }
.adm h2 { margin-top: 28px; }
.adm section { margin-top: 8px; }
.adm-tran .adm-than { max-width: 400px; padding-top: 10vh; }
.o-dang-nhap { background: #fff; border: 1px solid var(--vien); border-radius: 14px; padding: 28px 24px; text-align: center; }
.o-dang-nhap form { text-align: left; margin-top: 8px; }
.o-dang-nhap .nut { margin-top: 20px; }
.hep-rong { max-width: 760px; }
.vet { font-size: 14px; margin-bottom: 8px; }
.hang-tieu-de { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
.hang-tieu-de .hang-nut { margin-top: 0; }
.dem-nho { font-size: 16px; font-weight: 500; color: var(--nhat); background: #e9e5da; padding: 2px 10px; border-radius: 999px; vertical-align: middle; }
.o-so { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin: 18px 0 10px; }
.o-so div { background: #fff; border: 1px solid var(--vien); border-radius: var(--bo); padding: 14px; }
.o-so b { display: block; font-size: 30px; line-height: 1.1; color: var(--navy); font-variant-numeric: tabular-nums; }
.o-so span { font-size: 13px; color: var(--nhat); }
.o-so .so-chinh { border-color: var(--dong); border-width: 2px; }
.hai-cot-adm { display: grid; gap: 0 32px; }
@media (min-width: 900px) { .hai-cot-adm { grid-template-columns: 3fr 2fr; } }
.ds-moi, .ds-log { list-style: none; padding: 0; background: #fff; border: 1px solid var(--vien); border-radius: var(--bo); }
.ds-moi li, .ds-log li { padding: 9px 14px; border-bottom: 1px solid var(--vien); font-size: 15px; }
.ds-moi li:last-child, .ds-log li:last-child { border-bottom: 0; }
.loc { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 16px 0; }
.loc input { flex: 2 1 220px; width: auto; }
.loc select { flex: 1 1 140px; width: auto; }
.bang-dk td { white-space: nowrap; }
.bang-dk td:nth-child(2) { white-space: normal; min-width: 180px; }
.o-chon { width: 40px; }
.o-chon input { width: 20px; height: 20px; accent-color: var(--phuong); }
.thanh-chon { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 14px; padding: 10px 14px; margin-bottom: 10px; background: var(--navy); color: #fff; border-radius: var(--bo); }
.phan-trang { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 16px; }
.phan-trang a { padding: 6px 12px; border: 1px solid var(--vien); border-radius: 8px; background: #fff; text-decoration: none; }
.phan-trang a[aria-current="page"] { background: var(--navy); color: #fff; border-color: var(--navy); }
.luoi-2 { display: grid; gap: 0 16px; }
@media (min-width: 640px) { .luoi-2 { grid-template-columns: 1fr 1fr; } }
.luoi-lop { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 0 12px; }
.the-xac-minh { background: #fff; border: 2px solid var(--dong); border-radius: var(--bo); padding: 4px 20px 18px; margin: 16px 0; }
.the-xac-minh form input { flex: 1 1 220px; width: auto; }
.hang-sua { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.hang-sua input { width: auto; flex: 1 1 140px; min-height: 38px; padding: 6px 10px; }
.hang-sua .o-ma { flex: 0 1 110px; font-weight: 700; }
.hang-sua .o-thu-tu { flex: 0 1 80px; }
.hang-sua .chon { padding: 0; font-size: 14px; white-space: nowrap; }
.mk-tam { font-size: 18px; padding: 4px 10px; }

/* ── Lưu bút: MỘT cuốn sổ kẻ dòng có thanh cuộn, các bài nối nhau, mỗi bài mở đầu bằng tên + lớp (David 31/10) ── */
.lb-so { --ke: 30px; position: relative; max-height: min(72vh, 760px); overflow-y: auto; overscroll-behavior: contain; margin-top: 20px;
  padding: 6px 18px 6px 52px; background-color: #fffdf7; background-attachment: local, local;
  background-image: linear-gradient(to right, transparent 37px, rgba(183, 40, 48, .45) 37px, rgba(183, 40, 48, .45) 38px, transparent 38px),
    repeating-linear-gradient(to bottom, transparent 0, transparent calc(var(--ke) - 1px), #dfe6ef calc(var(--ke) - 1px), #dfe6ef var(--ke));
  border: 1px solid var(--vien); border-radius: 6px; box-shadow: inset 0 -12px 12px -12px rgba(16, 45, 84, .18); }
.lb-so-ngan { max-height: 440px; }
.lb-muc { padding: 0 0 var(--ke); }
.lb-muc + .lb-muc { border-top: 2px dashed #e3c9a3; padding-top: 2px; }
.lb-dau { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; line-height: var(--ke); padding-top: var(--ke); }
.lb-ten { font: 600 17px Lora, Georgia, serif; color: var(--navy); }
.lb-lop { display: inline-block; padding: 0 8px; border: 1px solid var(--dong); border-radius: 999px; font-size: 12px; line-height: 20px; color: #8a6214; background: #fffdf7; }
.lb-dau time { margin-left: auto; font-size: 12.5px; color: var(--nhat); }
.lb-gui { font: italic 500 16px/var(--ke) Lora, Georgia, serif; color: var(--phuong); }
.lb-than { font: italic 500 17px/var(--ke) Lora, Georgia, serif; color: #24324a; overflow-wrap: anywhere; }
.lb-cua-toi { text-align: right; font-size: 14px; line-height: var(--ke); }
.lb-form { background: #fffdf7; border: 1px solid var(--vien); border-radius: var(--bo); padding: 16px 18px; }
.lb-form label, .lb-form legend { font-size: 15px; }
.lb-viet { max-width: 640px; margin: 20px 0 8px; }
.lb-loc { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 24px; }
.lb-loc a { padding: 5px 12px; border: 1px solid var(--vien); border-radius: 999px; background: #fff; text-decoration: none; font-size: 14px; }
.lb-loc a[aria-current="page"] { background: var(--navy); color: #fff; border-color: var(--navy); }
.lb-trang-chu { margin-top: 44px; }
.lb-canh { margin-top: 0; }
@media (max-width: 480px) { .lb-so { padding-left: 40px; background-image: linear-gradient(to right, transparent 27px, rgba(183, 40, 48, .45) 27px, rgba(183, 40, 48, .45) 28px, transparent 28px), repeating-linear-gradient(to bottom, transparent 0, transparent calc(var(--ke) - 1px), #dfe6ef calc(var(--ke) - 1px), #dfe6ef var(--ke)); } }
.ds-lb-adm { list-style: none; padding: 0; display: grid; gap: 10px; }
.ds-lb-adm li { background: #fff; border: 1px solid var(--vien); border-radius: var(--bo); padding: 12px 16px; }
.ds-lb-adm li > p { margin-top: 6px; white-space: normal; }
.ds-lb-adm .hang-nut { margin-top: 10px; }
.ds-lb-adm input { flex: 1 1 200px; width: auto; min-height: 36px; }

/* Lớp của tôi: tên cả lớp */
.ds-ten { columns: 1; column-gap: 28px; padding-left: 28px; margin-top: 10px; }
@media (min-width: 600px) { .ds-ten { columns: 2; } }
@media (min-width: 900px) { .ds-ten { columns: 3; } }
.ds-ten li { break-inside: avoid; padding: 5px 0; border-bottom: 1px dotted var(--vien); }
.ds-ten li span { color: var(--nhat); }
.ds-ten li em { font-style: normal; font-size: 12.5px; color: var(--nhat); background: #eef0f3; padding: 0 7px; border-radius: 999px; margin-left: 4px; }
/* Admin: danh sách lớp */
.bang-ds-lop tr.chua-dk td { color: var(--nhat); }
.o-thao-tac { white-space: nowrap; }
.o-thao-tac form { display: inline; margin-left: 12px; }
.hang-ghep { margin-top: 6px; }
.hang-ghep select { width: auto; flex: 1 1 220px; min-height: 36px; }
/* Chức vụ trong lớp */
.nhan-cv { background: var(--dong-nhat); color: #7a5410; }
.bcs { margin-top: 6px; }
.bcs b { color: var(--navy); }
.gan-cv { margin: 12px 0 4px; }
.gan-cv select, .gan-cv input { width: auto; flex: 1 1 220px; min-height: 38px; }
/* Tưởng nhớ các bạn đã mất: trầm, không màu nhấn, viền đứt như dòng tên khắc */
.tuong-nho { margin-top: 36px; padding: 18px 22px; border-top: 1px solid #c9c4b8; border-bottom: 1px solid #c9c4b8; text-align: center; color: #4a4f57; }
.tuong-nho h2 { color: #6b6f76; margin-top: 0; }
.tuong-nho > p { font: italic 500 16px/1.7 Lora, Georgia, serif; }
.tuong-nho ul { list-style: none; padding: 0; margin-top: 12px; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 28px; }
.tuong-nho li { font: 600 17px/1.6 Lora, Georgia, serif; color: #3b4048; }
.tuong-nho li span { font-weight: 400; color: #6b6f76; }
.tuong-nho-adm { text-align: left; background: #fff; border: 1px solid var(--vien); border-radius: var(--bo); }
.tuong-nho-adm ul { justify-content: flex-start; flex-direction: column; gap: 6px; }
.tuong-nho-adm li { display: flex; gap: 14px; align-items: center; font-size: 16px; }
.tuong-nho-adm li span { color: #3b4048; font-weight: 600; }
.tuong-nho-adm li form { display: inline; }
/* Tài khoản thành viên */
.lan-dau { margin-top: 28px; }
.ai-day { font: 600 22px/1.3 Lora, Georgia, serif; color: var(--navy); margin: 4px 0 6px; }
.ai-day span { font-weight: 400; color: var(--nhat); }
.o-co-dinh { min-height: 46px; padding: 10px 12px; border: 1.5px dashed #cfc6b3; border-radius: 8px; background: #fbf9f4; font-weight: 500; }
input[readonly] { background: #fbf9f4; color: var(--nhat); }
.ds-ten li em.la-ban { background: var(--dong-nhat); color: #7a5410; }
.o-tuong-nho { align-self: end; }
.o-tuong-nho .chon { padding: 6px 0; }
.xac-nhan-tn { color: var(--phuong); font-weight: 500; }
/* Chuyển khoản: QR + thông tin tài khoản */
.ck { display: grid; gap: 18px; align-items: start; margin: 14px 0 16px; }
@media (min-width: 640px) { .ck { grid-template-columns: 240px 1fr; } }
.ck-qr { margin: 0; text-align: center; background: #fff; border: 1px solid var(--vien); border-radius: var(--bo); padding: 14px; }
.qr-o { width: 100%; max-width: 240px; margin: 0 auto; aspect-ratio: 1; }
.qr-o svg { width: 100%; height: auto; display: block; }
.ck-qr figcaption { font-size: 13px; color: var(--nhat); margin: 8px 0; }
.the-ck dd .nut-nho { min-height: 30px; padding: 3px 10px; margin-left: 6px; vertical-align: middle; }

/* ══ Kế hoạch BTC ══ */
.tab-ke-hoach { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 18px; padding-bottom: 10px; border-bottom: 1px solid var(--vien); }
.tab-ke-hoach a { padding: 7px 14px; border-radius: 999px; text-decoration: none; color: var(--chu); font-size: 15px; }
.tab-ke-hoach a[aria-current="page"] { background: var(--navy); color: #fff; }
.d-tru { font-size: 15px; color: var(--nhat); }
.d-tru b { font-size: 26px; color: var(--phuong); font-variant-numeric: tabular-nums; }
.chu-tre { color: var(--phuong); }
.nhan-tt-todo { background: #eef0f3; color: var(--nhat); }
.nhan-tt-doing { background: #e4ecf7; color: var(--navy); }
.nhan-tt-blocked { background: var(--do-nen); color: var(--phuong); }
.nhan-tt-done { background: var(--xanh-nen); color: var(--xanh); }
.ds-viec { list-style: none; padding: 0; background: #fff; border: 1px solid var(--vien); border-radius: var(--bo); }
.viec { display: flex; gap: 12px; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--vien); border-left: 4px solid transparent; }
.viec:last-child { border-bottom: 0; }
.viec.tt-doing { border-left-color: var(--navy); }
.viec.tt-blocked, .viec.tre { border-left-color: var(--phuong); }
.viec.tt-done .viec-ten { color: var(--nhat); text-decoration: line-through; }
.viec-chinh { flex: 1; min-width: 0; }
.viec-ten { font-weight: 500; text-decoration: none; }
.viec-phu { font-size: 13.5px; color: var(--nhat); margin-top: 2px; }
.viec-tt select { width: auto; min-height: 36px; padding: 4px 8px; font-size: 14px; }
.ds-ban-tien-do { list-style: none; padding: 0; display: grid; gap: 10px; }
.ds-ban-tien-do li { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; background: #fff; border: 1px solid var(--vien); border-radius: var(--bo); padding: 10px 14px; }
.ds-ban-tien-do a { font-weight: 600; text-decoration: none; }
.thanh { grid-column: 1 / -1; height: 8px; border-radius: 99px; background: #ece6d8; overflow: hidden; }
.thanh i { display: block; height: 100%; background: var(--dong); border-radius: 99px; }
.ds-ban-tien-do .so { grid-column: 2; grid-row: 1; }
.the-them { background: #fff; border: 1px dashed var(--dong); border-radius: var(--bo); padding: 12px 16px; margin: 12px 0 8px; }
.the-them summary { cursor: pointer; font-weight: 600; color: var(--navy); }
.bao-cao-text { font: 13.5px/1.55 ui-monospace, Menlo, monospace; white-space: pre-wrap; }
.cap-nhat { margin-top: 4px; }
.mo-ta { margin: 12px 0; }
.moc-ke-hoach { list-style: none; padding: 0; margin: 16px 0; border-left: 3px solid var(--vien); }
.moc-ke-hoach li { position: relative; display: grid; grid-template-columns: 96px 1fr; gap: 14px; padding: 10px 0 10px 18px; }
.moc-ke-hoach li::before { content: ""; position: absolute; left: -9px; top: 15px; width: 14px; height: 14px; border-radius: 50%; background: #f5f3ee; border: 3px solid var(--dong); }
.moc-ke-hoach li.xong::before { background: var(--xanh); border-color: var(--xanh); }
.moc-ke-hoach li.qua::before { border-color: var(--phuong); }
.moc-ke-hoach li.ngay-hoi::before { background: var(--phuong); border-color: var(--phuong); width: 18px; height: 18px; left: -11px; }
.moc-ngay b { display: block; font-size: 18px; color: var(--navy); }
.moc-ngay span { font-size: 13px; color: var(--nhat); }
.moc-ke-hoach li.qua .moc-ngay span { color: var(--phuong); }
.moc-ke-hoach details { margin-top: 6px; font-size: 14px; }
.bang-kich-ban td { vertical-align: top; white-space: normal; }
.bang-kich-ban .gio { white-space: nowrap; }
.luoi-ks { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; align-items: center; }
.luoi-ks input { min-height: 38px; padding: 6px 10px; }
.hang-sua select { width: auto; flex: 1 1 160px; min-height: 38px; }
@media print {
  .khong-in, .adm-dau, .tab-ke-hoach, .the-them { display: none !important; }
  body.adm, .bang { background: #fff; }
  .adm-tran .adm-than, .adm-than { max-width: none; padding: 0; }
  .bang th, .bang td { padding: 6px 8px; font-size: 12.5px; border: 1px solid #999; }
  .cuon-ngang { overflow: visible; }
}

/* ══ Tài chính ══ */
.o-so .so-thieu b { color: var(--phuong); }
.o-so .so-du b { color: var(--xanh); }
.thanh-lon { height: 12px; margin: 10px 0 4px; }
.dong-tong td { font-weight: 700; background: #fbf9f4; }
.nhan-tc-confirmed { background: var(--xanh-nen); color: var(--xanh); }
.nhan-tc-pending { background: var(--vang-nen); color: #8a6214; }
.nhan-tc-pledged { background: #e4ecf7; color: var(--navy); }
.nhan-tc-cancelled { background: #eef0f3; color: var(--nhat); text-decoration: line-through; }
.bang-thu tr.tc-cancelled td { opacity: .55; }
.bang-thu td, .bang-du-toan td { white-space: normal; }
.tc-so { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--vien); border: 1px solid var(--vien); border-radius: var(--bo); overflow: hidden; margin-top: 18px; }
.tc-so div { background: var(--giay); padding: 14px 12px; text-align: center; }
.tc-so span { display: block; font-size: 13px; color: var(--nhat); }
.tc-so b { font: 600 clamp(18px, 4.6vw, 26px)/1.2 Lora, Georgia, serif; color: var(--navy); font-variant-numeric: tabular-nums; }
.tc-so .tc-nhan b { color: var(--xanh); }
.tc-so .tc-thieu b { color: var(--phuong); }
.ds-tai-tro { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; }

/* ══ Các ban (thành viên) ══ */
.luoi-ban { display: grid; gap: 14px; margin-top: 20px; }
@media (min-width: 700px) { .luoi-ban { grid-template-columns: 1fr 1fr; } }
.the-ban { background: var(--giay); border: 1px solid var(--vien); border-radius: var(--bo); padding: 16px 18px; display: flex; flex-direction: column; gap: 8px; }
.the-ban h2 { margin: 0; font: 600 20px/1.3 Lora, Georgia, serif; color: var(--navy); letter-spacing: 0; text-transform: none; }
.viec-ban { padding-left: 20px; margin: 4px 0; }
.viec-ban li { margin: 3px 0; }
.viec-ban li.ghi-chu-nhap { list-style: none; margin-left: -20px; font-size: 13px; color: #8a6214; font-style: italic; }
.ban-luc { font-size: 14px; }
.xin-vao { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }
.xin-vao input { flex: 1 1 200px; min-height: 40px; }
.dong-nho { display: inline; font-size: 14px; }
.ban-cua-toi { margin-top: 26px; }
.ban-cua-toi h3 { font-size: 15px; margin: 18px 0 8px; color: var(--navy); }
.viec-cua-toi { background: #fff; border: 1px solid var(--vien); border-left: 4px solid var(--dong); border-radius: var(--bo); padding: 12px 14px; margin-bottom: 10px; }
.viec-cua-toi.tt-done { border-left-color: var(--xanh); }
.viec-cua-toi.tt-blocked { border-left-color: var(--phuong); }
.viec-cua-toi .hang-nut { margin-top: 10px; }
.viec-cua-toi select { width: auto; min-height: 40px; }
.viec-cua-toi input { flex: 1 1 200px; width: auto; min-height: 40px; }
.ds-don { list-style: none; padding: 0; display: grid; gap: 10px; }
.ds-don li { border-top: 1px solid var(--vien); padding-top: 10px; }
.ds-don li:first-child { border-top: 0; padding-top: 0; }