:root {
  --nen: #f6f7f9; --the: #fff; --chu: #1c2733; --chu-phu: #5b6775; --vien: #d5dbe3;
  --chinh: #1a5fb4; --chinh-dam: #144a8c; --nhan: #e8c766; --xanh: #1b7f3b; --do: #b3261e; --vang: #fff4d6; --vang-vien: #e8c766;
  --xanh-nhat: #e6f4ea; --do-nhat: #fdeceb;
}
* { box-sizing: border-box; }
body { margin: 0; font: 18px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; background: var(--nen); color: var(--chu); }
h1 { font-size: 1.6rem; margin: 0 0 .4rem; border-left: 6px solid var(--nhan); padding-left: 10px; }
h2 { font-size: 1.25rem; margin: 1.4rem 0 .5rem; }
h3 { font-size: 1.05rem; margin: 1rem 0 .3rem; }
p { margin: .4rem 0; }
.phu { color: var(--chu-phu); font-size: .92rem; }
.tren { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: linear-gradient(90deg, var(--chinh-dam), var(--chinh)); color: #fff; padding: 10px 18px; border-bottom: 4px solid var(--nhan); }
.tren .logo { height: 44px; width: auto; border-radius: 6px; }
.logo-lon { display: block; height: 96px; width: auto; margin: 0 auto 12px; border-radius: 10px; }
.tren .ten { font-weight: 700; font-size: 1.1rem; margin-right: auto; }
.tren a, .tren button { color: #fff; }
nav.menu { display: flex; gap: 6px; flex-wrap: wrap; padding: 10px 14px; background: var(--the); border-bottom: 1px solid var(--vien); }
nav.menu a { padding: 10px 14px; border-radius: 10px; text-decoration: none; color: var(--chu); font-weight: 600; }
nav.menu a.dang { background: var(--chinh); color: #fff; }
main { max-width: 1080px; margin: 0 auto; padding: 18px; }
.the { background: var(--the); border: 1px solid var(--vien); border-radius: 14px; padding: 16px 18px; margin: 12px 0; }
.the.nhan { border-color: var(--vang-vien); background: var(--vang); }
.luoi { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
label { display: block; font-weight: 600; margin: 12px 0 4px; }
input, select, textarea { width: 100%; font: inherit; padding: 12px 14px; border: 2px solid var(--vien); border-radius: 10px; background: #fff; color: var(--chu); }
input:focus, select:focus, textarea:focus, button:focus-visible, a:focus-visible { outline: 3px solid #7fb0f0; outline-offset: 1px; }
button, .nut { font: inherit; font-weight: 700; padding: 12px 20px; border-radius: 10px; border: 2px solid var(--chinh); background: var(--chinh); color: #fff; cursor: pointer; text-decoration: none; display: inline-block; }
button:hover, .nut:hover { background: var(--chinh-dam); }
button.phu-nut, .nut.phu-nut { background: #fff; color: var(--chinh); }
button.nguy, .nut.nguy { background: #fff; color: var(--do); border-color: var(--do); }
button.nho { padding: 6px 12px; font-size: .9rem; }
button:disabled { opacity: .5; cursor: not-allowed; }
.tren button { background: transparent; border-color: #fff; }
.hang { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 14px; }
.lua-chon { display: block; text-align: left; width: 100%; background: #fff; color: var(--chu); border: 2px solid var(--vien); border-radius: 12px; padding: 14px 16px; margin: 8px 0; font-weight: 600; }
.lua-chon:hover { background: #f0f5fc; }
.lua-chon.chon { border-color: var(--chinh); background: #eaf2fd; }
.lua-chon small { display: block; font-weight: 400; color: var(--chu-phu); margin-top: 4px; }
.the-khuyen { display: inline-block; background: var(--xanh); color: #fff; font-size: .8rem; padding: 2px 8px; border-radius: 99px; margin-left: 8px; font-weight: 700; }
.ly-do { background: var(--xanh-nhat); border-left: 5px solid var(--xanh); padding: 8px 12px; border-radius: 6px; font-size: .95rem; margin: 6px 0 10px; }
.loi { background: var(--do-nhat); border-left: 5px solid var(--do); padding: 10px 14px; border-radius: 6px; margin: 10px 0; color: #7a1712; }
.thanh-cong { background: var(--xanh-nhat); border-left: 5px solid var(--xanh); padding: 10px 14px; border-radius: 6px; margin: 10px 0; }
.buoc-so { color: var(--chu-phu); font-weight: 700; }
.tien { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.am { color: var(--do); font-weight: 700; }
.duong { color: var(--xanh); font-weight: 700; }
.cuon { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; background: #fff; }
th, td { border-bottom: 1px solid var(--vien); padding: 9px 10px; text-align: left; vertical-align: top; }
th { background: #eef2f7; font-size: .9rem; }
td.tien, th.tien { text-align: right; }
tr.tong td { font-weight: 800; background: #f4f7fb; }
.huy-hieu { display: inline-block; padding: 2px 10px; border-radius: 99px; font-size: .85rem; font-weight: 700; }
.huy-hieu.kh { background: var(--vang); border: 1px solid var(--vang-vien); }
.huy-hieu.tt { background: var(--xanh-nhat); border: 1px solid var(--xanh); }
.tien-xem { color: var(--xanh); font-weight: 700; min-height: 1.5em; }
details.huong-dan { background: var(--vang); border: 1px solid var(--vang-vien); border-radius: 12px; padding: 10px 16px; margin: 10px 0; }
details.huong-dan summary { cursor: pointer; font-weight: 700; }
details.huong-dan ol { margin: 8px 0 4px 1.2rem; padding: 0; }
details.huong-dan li { margin: 4px 0; }
.buoc-lam { display: flex; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--vien); }
.buoc-lam:last-child { border-bottom: 0; }
.dau { width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--vien); display: grid; place-items: center; flex: none; font-weight: 800; }
.dau.xong { background: var(--xanh); border-color: var(--xanh); color: #fff; }
.buoc-lam .noi-dung { flex: 1; }
.thanh { height: 12px; background: var(--vien); border-radius: 99px; overflow: hidden; margin: 8px 0; }
.thanh > div { height: 100%; background: var(--xanh); }
.thanh > div.p0 { width: 0 } .thanh > div.p20 { width: 20% } .thanh > div.p25 { width: 25% } .thanh > div.p33 { width: 33% } .thanh > div.p40 { width: 40% }
.thanh > div.p50 { width: 50% } .thanh > div.p60 { width: 60% } .thanh > div.p67 { width: 67% } .thanh > div.p75 { width: 75% } .thanh > div.p80 { width: 80% } .thanh > div.p100 { width: 100% }
.hop-nho { max-width: 520px; margin: 40px auto; padding: 0 16px; }
@media (max-width: 640px) { body { font-size: 17px; } main { padding: 12px; } }

.thanh > div.p5 { width: 5% }
.thanh > div.p10 { width: 10% }
.thanh > div.p15 { width: 15% }
.thanh > div.p20 { width: 20% }
.thanh > div.p25 { width: 25% }
.thanh > div.p30 { width: 30% }
.thanh > div.p35 { width: 35% }
.thanh > div.p40 { width: 40% }
.thanh > div.p45 { width: 45% }
.thanh > div.p50 { width: 50% }
.thanh > div.p55 { width: 55% }
.thanh > div.p60 { width: 60% }
.thanh > div.p65 { width: 65% }
.thanh > div.p70 { width: 70% }
.thanh > div.p75 { width: 75% }
.thanh > div.p80 { width: 80% }
.thanh > div.p85 { width: 85% }
.thanh > div.p90 { width: 90% }
.thanh > div.p95 { width: 95% }

.nho-trai { text-align: left; }
.nhom-nut { display: flex; gap: 6px; flex-wrap: wrap; }
.nhom-nut button { padding: 8px 14px; background: #fff; color: var(--chu); border-color: var(--vien); }
.nhom-nut button.chon.hoan_thien { background: var(--xanh); border-color: var(--xanh); color: #fff; }
.nhom-nut button.chon.dang_ht { background: var(--vang); border-color: var(--vang-vien); color: var(--chu); }
.nhom-nut button.chon.chua_co { background: var(--do-nhat); border-color: var(--do); color: var(--do); }
.the-nho { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.in-chu-ky { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 40px; text-align: center; }
.in-chu-ky div { min-height: 120px; }
@media print {
  .tren, nav.menu, nav.menu-chinh, .khong-in, details.huong-dan { display: none !important; }
  body { background: #fff; font-size: 12pt; }
  main { max-width: none; padding: 0; }
  .the { border: 0; padding: 0; break-inside: avoid; }
  h2 { break-after: avoid; }
}
input[type=checkbox] { width: auto; margin-right: 8px; transform: scale(1.3); }

.nhom-menu { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; padding: 2px 0; }
.ten-nhom { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--chu-phu); min-width: 130px; font-weight: 700; }
nav.menu { flex-direction: column; gap: 2px; display: none; }
nav.menu.mo { display: flex; }
nav.menu-chinh { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; padding: 8px 14px; background: var(--the); border-bottom: 1px solid var(--vien); }
nav.menu-chinh a { padding: 10px 16px; border-radius: 10px; text-decoration: none; color: var(--chu); font-weight: 700; font-size: 1.02rem; }
nav.menu-chinh a.dang { background: var(--chinh); color: #fff; }
nav.menu-chinh .ten-trang { color: var(--chu-phu); }
nav.menu a { padding: 7px 12px; }
.luoi-theo-doi { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; margin: 12px 0; }
.the-td { display: block; background: var(--the); border: 1px solid var(--vien); border-radius: 14px; padding: 14px 16px; text-decoration: none; color: var(--chu); }
.the-td:hover { border-color: var(--chinh); background: #f0f5fc; }
.the-td .so { font-size: 1.5rem; font-weight: 800; }
.the-td .nhan-td { font-size: .85rem; color: var(--chu-phu); font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.the-td.canh-bao { border-color: var(--vang-vien); background: var(--vang); }
.bac { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin: 10px 0; }
.vi-tri { flex: 1 1 220px; max-width: 320px; background: #fff; border: 2px solid var(--vien); border-radius: 12px; padding: 10px 12px; }
.vi-tri.trong { border-color: var(--vang-vien); background: var(--vang); }
.vi-tri .ten-vt { font-size: .85rem; font-weight: 700; color: var(--chu-phu); }
.ban-tin { white-space: pre-wrap; background: #fff; border: 1px dashed var(--vien); border-radius: 10px; padding: 12px; font-size: .95rem; }
.xem-truoc td, .xem-truoc th { font-size: .85rem; padding: 6px 8px; }

.bang-goi { background: var(--vang); border-bottom: 2px solid var(--vang-vien); padding: 10px 18px; display: flex; gap: 12px; flex-wrap: wrap; align-items: center; font-weight: 600; }
.bang-goi.het { background: var(--do-nhat); border-color: var(--do); color: #7a1712; }
.khoa-otp { font-family: ui-monospace, Menlo, monospace; font-size: 1.3rem; letter-spacing: .08em; background: #fff; border: 2px dashed var(--vien); padding: 10px 14px; border-radius: 10px; word-break: break-all; }
@media print { .bang-goi { display: none !important; } }

.thanh.mong { height: 8px; margin: 2px 0 6px; min-width: 120px; }
.thanh.kh > div { background: #e0b030; }
.thanh.chi > div { background: var(--do); }

.buoc-lam.dang-lam { background: #eaf2fd; border-radius: 10px; padding-left: 8px; padding-right: 8px; }

ul.khau { list-style: none; padding: 0; margin: 8px 0; }
ul.khau li { border-left: 3px solid var(--vien); padding: 4px 0 4px 10px; margin: 6px 0; }

.tim-nhanh input { width: 270px; padding: 8px 12px; border-radius: 99px; border: 0; }
.thanh-menu { display: none; align-items: center; gap: 12px; padding: 8px 14px; background: var(--the); border-bottom: 1px solid var(--vien); }
.nut-menu { padding: 8px 16px; }
.ten-trang { font-weight: 700; }
details.khung-gap > summary { cursor: pointer; font-weight: 800; font-size: 1.1rem; }
.dau.dot-do { background: var(--do); border-color: var(--do); color: #fff; }
.dau.dot-vang { background: #f2b83a; border-color: #d19a1d; color: #3b2a00; }
.dau.dot-xanh { background: var(--xanh); border-color: var(--xanh); color: #fff; }
@media (max-width: 720px) {
  .thanh-menu { display: flex; }
  nav.menu-chinh { display: none; }
  .tim-nhanh { width: 100%; order: 5; }
  .tim-nhanh input { width: 100%; }
  .tren { gap: 6px 12px; padding: 8px 12px; }
  .tren .ten { font-size: 1rem; flex-basis: 100%; }
}
@media print { .thanh-menu, .tim-nhanh { display: none !important; } }

.xuong-dong { white-space: pre-wrap; overflow-wrap: anywhere; }

.mau-chon { display: flex; align-items: center; gap: 10px; margin: 6px 0; }
.mau-chon input[type=color] { width: 56px; height: 44px; padding: 2px; }
.mau-mau { display: inline-block; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--vien); vertical-align: middle; }

/* ---- Bố cục menu bên trái ---- */
.bo-cuc { display: flex; min-height: 100vh; }
.ben-trai { flex: 0 0 272px; width: 272px; background: linear-gradient(180deg, var(--chinh-dam), var(--chinh)); color: #fff; position: sticky; top: 0; align-self: flex-start; height: 100vh; overflow-y: auto; border-right: 4px solid var(--nhan); }
.ben-trai .banner { display: block; width: 100%; height: auto; }
.ben-trai .thuong-hieu { padding: 18px 14px; text-align: center; font-weight: 800; font-size: 1.1rem; }
.ben-trai .thuong-hieu .logo-lon { height: 80px; margin-bottom: 8px; }
.ben-trai nav.menu-chinh { display: flex; flex-direction: column; align-items: stretch; gap: 4px; padding: 12px; background: transparent; border: 0; }
.ben-trai nav.menu-chinh a { color: #fff; padding: 12px 14px; border-radius: 10px; font-size: 1.05rem; text-decoration: none; font-weight: 700; }
.ben-trai nav.menu-chinh a:hover, .ben-trai nav.menu a:hover { background: rgba(255, 255, 255, .14); }
.ben-trai a.dang { background: rgba(255, 255, 255, .22) !important; color: #fff !important; box-shadow: inset 5px 0 0 var(--nhan); }
.ben-trai nav.menu-chinh button { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .75); margin-top: 6px; }
.ben-trai nav.menu { background: transparent; border: 0; padding: 0 12px 20px; }
.ben-trai nav.menu a { color: #fff; padding: 8px 12px; font-size: .96rem; }
.ben-trai .nhom-menu { flex-direction: column; align-items: stretch; gap: 2px; margin-top: 10px; }
.ben-trai .ten-nhom { color: rgba(255, 255, 255, .72); min-width: 0; padding: 4px 12px; }
.phan-phai { flex: 1; min-width: 0; }
.bo-cuc .tren { background: var(--the); color: var(--chu); border-bottom: 1px solid var(--vien); }
.bo-cuc .tren a { color: var(--chinh); }
.bo-cuc .tren button { background: #fff; color: var(--chinh); border-color: var(--chinh); }
.bo-cuc .tren .logo, .bo-cuc .tren .ten { display: none; }
.bo-cuc .tren .tim-nhanh { margin-right: auto; }
.bo-cuc .tren .tim-nhanh input { border: 1px solid var(--vien); }
nav.menu.menu-di-dong { display: none !important; }
.banner-dang-nhap { display: block; width: 100%; max-width: 460px; height: auto; margin: 0 auto 14px; border-radius: 14px; }
.banner-xem { display: block; max-width: 320px; width: 100%; height: auto; border-radius: 10px; margin: 8px 0; }
@media (max-width: 720px) {
  .bo-cuc { display: block; }
  .ben-trai { display: none; }
  .bo-cuc .tren { background: linear-gradient(90deg, var(--chinh-dam), var(--chinh)); color: #fff; border-bottom: 4px solid var(--nhan); }
  .bo-cuc .tren a { color: #fff; }
  .bo-cuc .tren button { background: transparent; color: #fff; border-color: #fff; }
  .bo-cuc .tren .logo, .bo-cuc .tren .ten { display: block; }
  nav.menu.menu-di-dong.mo { display: flex !important; }
}
@media print { .ben-trai { display: none !important; } .bo-cuc { display: block; } }

/* ---- Màu khu vực làm việc, bản tương phản cao: chữ đậm rõ, bảng tiêu đề đậm, điểm cần chú ý nổi bật ---- */
:root {
  --nen: #eef1f6;
  --vien: #bcc7d8;
  --chu: #0f1729; --chu-phu: #3b475c;
  --xanh: #15803d; --do: #c81e1e; --do-dam: #991b1b;
  --xanh-nhat: #dcf5e4; --do-nhat: #fde4e4;
  --vang: #fff1bf; --vang-vien: #e2a900;
  --nhat: color-mix(in srgb, var(--chinh) 10%, #fff);
  --nhat-2: color-mix(in srgb, var(--chinh) 5%, #fff);
  --bong: 0 1px 3px rgba(15, 23, 41, .12), 0 6px 16px rgba(15, 23, 41, .07);
}
body { font-size: 19px; }
a { color: var(--chinh); font-weight: 600; }
h1 { font-size: 1.85rem; font-weight: 800; color: var(--chinh-dam); }
h2 { font-size: 1.35rem; font-weight: 800; color: var(--chinh-dam); padding-bottom: 6px; border-bottom: 3px solid var(--nhan); display: inline-block; }
h3 { font-size: 1.12rem; font-weight: 800; color: var(--chu); }
.phu { color: var(--chu-phu); font-size: .95rem; }
.the, .the-td, .vi-tri { background: #fff; border: 1px solid var(--vien); box-shadow: var(--bong); }
.the h2:first-child, .the h3:first-child { margin-top: .2rem; }
label { font-weight: 700; color: var(--chu); }
input, select, textarea { border: 2px solid #9fb0c8; background: #fff; }
input:focus, select:focus, textarea:focus { border-color: var(--chinh); }
input:focus, select:focus, textarea:focus, button:focus-visible, a:focus-visible { outline: 3px solid color-mix(in srgb, var(--nhan) 80%, #fff); outline-offset: 1px; }
button, .nut { box-shadow: 0 2px 4px rgba(15, 23, 41, .22); }
button:hover, .nut:hover { box-shadow: 0 3px 8px rgba(15, 23, 41, .3); }
button.phu-nut, .nut.phu-nut { background: #fff; color: var(--chinh-dam); border-color: var(--chinh); box-shadow: none; }
button.phu-nut:hover, .nut.phu-nut:hover { background: var(--nhat); }
button.nguy, .nut.nguy { background: #fff; color: var(--do-dam); border-color: var(--do); box-shadow: none; }
button.nguy:hover, .nut.nguy:hover { background: var(--do-nhat); }
.lua-chon { border: 2px solid #9fb0c8; box-shadow: none; }
.lua-chon:hover { background: var(--nhat-2); }
.lua-chon.chon { background: var(--nhat); border-color: var(--chinh); box-shadow: inset 6px 0 0 var(--chinh); }

/* Bảng gọn: tiêu đề chữ nhỏ đậm có gạch dưới, chỉ kẻ ngang mảnh, không tô sọc, số tiền thẳng hàng bên phải */
table { border: 0; background: transparent; border-radius: 0; }
th { background: transparent; color: var(--chu-phu); font-weight: 800; font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; border-bottom: 2px solid var(--chinh-dam); padding: 10px 10px; }
td { border-bottom: 1px solid #e3e8f0; padding: 12px 10px; }
tbody tr:nth-child(even) td { background: transparent; }
tbody tr:hover td { background: var(--nhat-2); }
tr.tong td { background: var(--nhat) !important; color: var(--chu); font-weight: 800; border-top: 2px solid var(--chinh-dam); }
td.tien, th.tien { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
td.tien { font-weight: 700; }
td.cot-ten { white-space: nowrap; }
td.cot-ten .phu { font-weight: 600; }
.don-vi { margin: 0 0 6px; font-size: .85rem; font-style: italic; }

/* Điểm cần chú ý: nổi hẳn lên */
.the.nhan { background: #fff6d6; border: 2px solid var(--vang-vien); border-left: 10px solid var(--vang-vien); box-shadow: var(--bong); }
.the.nhan h2 { color: #7a4b00; border-bottom-color: var(--vang-vien); }
.the.nhan .buoc-lam .noi-dung { font-weight: 700; }
.the.nhan .nut:not(.phu-nut) { background: var(--do); border-color: var(--do); }
.the.nhan .nut:not(.phu-nut):hover { background: var(--do-dam); }
.am { color: var(--do-dam); font-weight: 800; }
.duong { color: var(--xanh); font-weight: 800; }
.loi { background: var(--do-nhat); border: 1px solid var(--do); border-left: 8px solid var(--do); color: #7f1d1d; font-weight: 600; }
.thanh-cong { background: var(--xanh-nhat); border: 1px solid var(--xanh); border-left: 8px solid var(--xanh); font-weight: 600; }
.ly-do { background: var(--xanh-nhat); border-left: 6px solid var(--xanh); }

/* Thẻ số liệu: số to, đậm; thẻ cảnh báo đỏ/vàng rõ */
.the-td { border-top: 5px solid var(--chinh); }
.the-td .nhan-td { color: var(--chu-phu); font-weight: 800; }
.luoi-theo-doi { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.the-td .so { font-size: 1.65rem; font-weight: 800; color: var(--chinh-dam); line-height: 1.2; white-space: nowrap; }
.the-td:hover { background: var(--nhat-2); border-color: var(--chinh); }
.the-td.canh-bao { background: #fff1c9; border: 2px solid var(--vang-vien); border-top: 5px solid var(--do); }
.the-td.canh-bao .so { color: var(--do-dam); }

/* Nhãn, nút trạng thái */
.huy-hieu { font-weight: 800; }
.huy-hieu.kh { background: #fff1bf; border: 1px solid var(--vang-vien); color: #5c3b00; }
.huy-hieu.tt { background: var(--chinh); border: 1px solid var(--chinh); color: #fff; }
.the-khuyen { background: var(--xanh); }
.nhom-nut button { background: #fff; color: var(--chu); border: 2px solid #9fb0c8; box-shadow: none; }
.nhom-nut button:hover { background: var(--nhat); }
.nhom-nut button.chon.hoan_thien { background: var(--xanh); border-color: var(--xanh); color: #fff; }
.nhom-nut button.chon.dang_ht { background: #f5b301; border-color: #b78103; color: #1f1500; }
.nhom-nut button.chon.chua_co { background: var(--do); border-color: var(--do-dam); color: #fff; }
.dau { border-color: var(--chinh); color: var(--chinh-dam); font-weight: 800; background: #fff; }
.dau.xong { background: var(--xanh); border-color: var(--xanh); color: #fff; }
.dau.dot-do { background: var(--do); border-color: var(--do-dam); color: #fff; }
.dau.dot-vang { background: #f5b301; border-color: #b78103; color: #1f1500; }
.dau.dot-xanh { background: var(--xanh); border-color: var(--xanh); color: #fff; }
.buoc-lam { border-bottom: 1px solid #d3dbe8; }
.buoc-lam.dang-lam { background: var(--nhat); }

/* Thanh tiến độ dày, rõ */
.thanh { height: 16px; background: #d3dbe8; border: 1px solid #b4c0d3; }
.thanh > div { background: var(--chinh); }
.thanh.kh > div { background: #e0a800; }
.thanh.chi > div { background: var(--do); }

details.huong-dan { background: var(--nhat); border: 2px solid color-mix(in srgb, var(--chinh) 35%, #fff); }
details.huong-dan summary { color: var(--chinh-dam); font-weight: 800; }
details.khung-gap > summary { color: var(--chinh-dam); }
.bo-cuc .tren { background: #fff; border-bottom: 2px solid var(--vien); box-shadow: 0 2px 6px rgba(15, 23, 41, .08); }
.bo-cuc .tren a { color: var(--chinh-dam); font-weight: 700; }
.tim-nhanh input { border: 2px solid #9fb0c8; }

/* Menu bên trái: mục đang xem sáng hẳn bằng màu nhấn */
.ben-trai nav.menu-chinh a { font-weight: 700; }
.ben-trai a.dang { background: var(--nhan) !important; color: var(--tren-nhan, #0f1729) !important; box-shadow: none; }
.ben-trai nav.menu a { font-weight: 600; }
.ben-trai .ten-nhom { color: #fff; opacity: .85; font-weight: 800; }
main { padding-top: 22px; }
td:has(> button.nho) { white-space: nowrap; }
td:has(> button.nho) button.nho + button.nho { margin-left: 4px; }

/* ---- Menu nhỏ gọn hơn; tiêu đề bảng nổi bật ---- */
.ben-trai { flex: 0 0 216px; width: 216px; border-right-width: 3px; }
.ben-trai nav.menu-chinh { padding: 8px; gap: 2px; }
.ben-trai nav.menu-chinh a { padding: 8px 12px; font-size: .95rem; border-radius: 8px; }
.ben-trai nav.menu-chinh button { padding: 5px 10px; font-size: .85rem; margin-top: 4px; }
.ben-trai nav.menu { padding: 0 8px 14px; }
.ben-trai nav.menu a { padding: 5px 10px; font-size: .85rem; }
.ben-trai .nhom-menu { margin-top: 6px; gap: 0; }
.ben-trai .ten-nhom { font-size: .7rem; padding: 3px 10px; }
.ben-trai .thuong-hieu { padding: 12px 10px; font-size: .95rem; }
.ben-trai .thuong-hieu .logo-lon { height: 60px; }
table { border: 1px solid var(--chinh-dam); border-radius: 8px; overflow: hidden; }
th { background: var(--chinh-dam); color: #fff; font-size: .92rem; font-weight: 800; text-transform: none; letter-spacing: 0; border-bottom: 3px solid var(--nhan); padding: 12px 10px; }
th.tien { text-align: right; }
td:first-child { white-space: nowrap; }

/* Menu đầy đủ: nhóm gập mở, mỗi nhóm có tên to và một dòng mô tả */
nav.menu details.nhom-menu { display: block; padding: 0; margin: 6px 0 0; border: 1px solid rgba(255, 255, 255, .25); border-radius: 10px; overflow: hidden; }
nav.menu details.nhom-menu > summary { cursor: pointer; list-style: none; padding: 8px 12px; display: flex; flex-direction: column; background: rgba(255, 255, 255, .1); }
nav.menu details.nhom-menu > summary::-webkit-details-marker { display: none; }
nav.menu details.nhom-menu > summary::after { content: '▾'; position: absolute; right: 10px; }
nav.menu details.nhom-menu > summary { position: relative; }
nav.menu details[open].nhom-menu > summary::after { content: '▴'; }
nav.menu .ten-nhom { font-size: .9rem; font-weight: 800; text-transform: none; letter-spacing: 0; padding: 0; opacity: 1; }
nav.menu .mo-ta-nhom { font-size: .74rem; opacity: .8; font-weight: 400; }
nav.menu details.nhom-menu > a { display: block; margin: 0; padding: 7px 14px 7px 18px; font-size: .9rem; }
.ben-trai nav.menu details.nhom-menu > a { color: #fff; }
nav.menu.menu-di-dong details.nhom-menu { border-color: var(--vien); }
nav.menu.menu-di-dong details.nhom-menu > summary { background: var(--nhat); }
nav.menu.menu-di-dong .ten-nhom { color: var(--chinh-dam); }
nav.menu.menu-di-dong .mo-ta-nhom { color: var(--chu-phu); }
nav.menu.menu-di-dong details.nhom-menu > a { color: var(--chu); }
nav.menu.menu-di-dong a.dang { background: var(--chinh); color: #fff; }

/* Khi mở “Tất cả mục”, ẩn 7 mục chính phía trên vì danh sách nhóm đã có đủ */
.ben-trai.mo-het nav.menu-chinh a { display: none; }

/* Điện thoại: thanh đầu trang nền trắng, chữ và nút xanh đậm (ghi đè các quy tắc màu trước đó) */
@media (max-width: 720px) {
  .bo-cuc .tren { background: #fff; color: var(--chu); border-bottom: 4px solid var(--nhan); }
  .bo-cuc .tren a { color: var(--chinh-dam); }
  .bo-cuc .tren button { background: #fff; color: var(--chinh-dam); border-color: var(--chinh); }
  .bo-cuc .tren .ten { color: var(--chinh-dam); }
}

.huy-hieu { white-space: nowrap; }
th { padding: 10px 8px; }
td { padding: 10px 8px; }
.hanh-dong { display: flex; flex-direction: column; gap: 4px; align-items: stretch; }
.hanh-dong button { white-space: nowrap; }
details.khung-gap-nho { margin: 12px 0; border: 1px dashed var(--vien); border-radius: 10px; padding: 8px 12px; background: #fff; }
details.khung-gap-nho > summary { cursor: pointer; font-weight: 700; color: var(--chinh-dam); }
details.khung-gap > form { margin-top: 12px; }
/* Ô nhãn ở đầu mỗi dòng (bảng kiểm tra lần cuối, bàn giao): nhạt, không dùng nền tiêu đề đậm */
tbody th { background: var(--nhat); color: var(--chu); font-weight: 700; border-bottom: 1px solid #d3dbe8; text-align: left; width: 34%; }

/* Chữ trong bảng nhỏ lại cho cân đối, dễ nhìn */
table { font-size: .86rem; }
th { font-size: .8rem; padding: 9px 8px; }
td { padding: 8px 8px; }
td.cot-ten strong { font-size: .92rem; }
td .phu, td.cot-ten .phu { font-size: .76rem; }
td.tien { font-size: .86rem; }
table button.nho { font-size: .78rem; padding: 4px 10px; }
table .huy-hieu { font-size: .72rem; padding: 1px 8px; }

/* ---- Thanh đầu trang màu xanh; ô tìm kiếm nổi bật ---- */
.bo-cuc .tren, .bo-cuc .tren { background: linear-gradient(90deg, var(--chinh-dam), var(--chinh)); color: #fff; border-bottom: 4px solid var(--nhan); box-shadow: 0 2px 8px rgba(15, 23, 41, .25); padding: 12px 18px; }
.bo-cuc .tren a { color: #fff; font-weight: 700; }
.bo-cuc .tren button { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .85); box-shadow: none; }
.bo-cuc .tren button:hover { background: rgba(255, 255, 255, .16); }
.bo-cuc .tren .ten { color: #fff; }
.bo-cuc .tren .tim-nhanh { flex: 1 1 420px; max-width: 560px; margin-right: auto; }
.bo-cuc .tren .tim-nhanh input { width: 100%; padding: 13px 20px; font-size: 1.05rem; border-radius: 99px; background: #fff; color: var(--chu); border: 3px solid var(--nhan); box-shadow: 0 0 0 4px rgba(255, 255, 255, .18), 0 4px 12px rgba(15, 23, 41, .3); }
.bo-cuc .tren .tim-nhanh input::placeholder { color: #4b5870; opacity: 1; font-weight: 600; }
.bo-cuc .tren .tim-nhanh input:focus { outline: 3px solid #fff; box-shadow: 0 0 0 6px var(--nhan), 0 4px 14px rgba(15, 23, 41, .35); }
@media (max-width: 720px) {
  .bo-cuc .tren { background: linear-gradient(90deg, var(--chinh-dam), var(--chinh)); color: #fff; }
  .bo-cuc .tren a, .bo-cuc .tren .ten { color: #fff; }
  .bo-cuc .tren button { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .85); }
  .bo-cuc .tren .tim-nhanh { flex: 1 1 100%; max-width: none; order: 5; }
}

/* Ô tìm kiếm vừa phải, cân đối với thanh đầu trang (vẫn nổi bật nhờ viền vàng) */
.bo-cuc .tren { padding: 8px 18px; }
.bo-cuc .tren .tim-nhanh { flex: 0 1 320px; max-width: 320px; }
.bo-cuc .tren .tim-nhanh input { padding: 8px 16px; font-size: .92rem; border-width: 2px; box-shadow: 0 0 0 3px rgba(255, 255, 255, .15), 0 2px 8px rgba(15, 23, 41, .25); }
.bo-cuc .tren .tim-nhanh input:focus { box-shadow: 0 0 0 4px var(--nhan), 0 2px 10px rgba(15, 23, 41, .3); }
.bo-cuc .tren button.nho { padding: 5px 12px; }
@media (max-width: 720px) { .bo-cuc .tren .tim-nhanh { flex: 1 1 100%; max-width: none; } }

.the-td .so.so-dai { font-size: 1.15rem; white-space: normal; }
@media (max-width: 720px) {
  .buoc-lam { flex-wrap: wrap; }
  .buoc-lam .noi-dung { flex: 1 1 100%; }
  .the.nhan .buoc-lam .nut { align-self: flex-start; }
}

/* Bảng nhiều cột (báo cáo chi phí và tồn quỹ): ép chặt để cột Tồn quỹ không bị đẩy ra ngoài màn hình */
table.bang-chat th, table.bang-chat td { padding: 8px 6px; font-size: 13px; }
table.bang-chat th:first-child, table.bang-chat td:first-child { padding-left: 10px; }
table.bang-chat th { text-transform: none; letter-spacing: 0; font-size: 12.5px; white-space: normal; vertical-align: bottom; }
table.bang-chat td.tien { font-size: 12.5px; }

/* Mã QR của xác thực 2 lớp */
canvas.ma-qr { display: block; width: 240px; max-width: 100%; height: auto; margin: 8px 0 14px; border: 1px solid var(--vien); border-radius: 10px; background: #fff; image-rendering: pixelated; }