/* Thuộc tính hidden luôn thắng các lớp đặt display (ví dụ .nut). */
[hidden] { display: none !important; }

/* Bố cục đã chọn (phương án A): menu trái xanh đậm, vùng giữa sáng, trợ lý bên phải.
   Xanh lá = hành động, cam = cảnh báo. Màu nhóm sản phẩm theo Excel I!I13:I15. */
:root {
  --nen: #f4f6f9;
  --mat: #ffffff;
  --chu: #1b2430;
  --mo: #5b6675;
  --vien: #d9dee6;
  --menu: #12304f;
  --menu-chu: #dbe6f3;
  --menu-dang: #1f4b78;
  --hanh-dong: #1f7a3f;
  --hanh-dong-dam: #186332;
  --canh-bao: #b45309;
  --canh-bao-nen: #fff4e5;
  --loi: #b42318;
  --loi-nen: #fdecea;
  --tot-nen: #e8f5ec;
  --nhom-dan: #f2c94c;
  --nhom-dan-nen: #fff8db;
  --nhom-dong-tien: #2f80ed;
  --nhom-dong-tien-nen: #e6f0fd;
  --nhom-loi-nhuan: #d64545;
  --nhom-loi-nhuan-nen: #fdeaea;
  --bo: 10px;
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--nen); color: var(--chu); font: 16px/1.5 "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif; }
h1 { font-size: 1.5rem; margin: 0 0 .75rem; }
h2 { font-size: 1.15rem; margin: 1.25rem 0 .5rem; }
h3 { font-size: 1rem; margin: 0 0 .4rem; }
a { color: #1857a4; }
code { background: #eef1f5; padding: 0 .3em; border-radius: 4px; font-size: .9em; }
.an { display: none !important; }
.mo { color: var(--mo); }
.nho { font-size: .85rem; }
.dam { font-weight: 600; }

/* ---------------- Đầu trang */
.dau { display: flex; align-items: center; gap: 1rem; padding: .6rem 1rem; background: var(--mat); border-bottom: 1px solid var(--vien); position: sticky; top: 0; z-index: 5; flex-wrap: wrap; }
.ten-app { font-weight: 700; font-size: 1.1rem; }
.phu-app { font-size: .8rem; color: var(--mo); }
.nhan-gia-lap { background: var(--canh-bao); color: #fff; font-weight: 700; font-size: .8rem; padding: .15rem .6rem; border-radius: 999px; letter-spacing: .05em; }
.chua-luu { color: var(--canh-bao); font-size: .9rem; font-weight: 600; }
.dau-nut { margin-left: auto; display: flex; gap: .5rem; align-items: center; }
.bang-gia-lap { margin: 0; padding: .35rem 1rem; background: var(--canh-bao-nen); color: #7a3b06; font-size: .85rem; border-bottom: 1px solid #f5d7ae; }

/* ---------------- Khung 3 cột */
.khung { display: grid; grid-template-columns: 230px minmax(0, 1fr) 320px; min-height: calc(100vh - 90px); }
.menu { background: var(--menu); color: var(--menu-chu); padding: 1rem 0; }
.menu ul { list-style: none; margin: 0; padding: 0; }
.menu a { color: var(--menu-chu); text-decoration: none; display: flex; align-items: center; gap: .5rem; padding: .45rem 1rem; }
.menu a:hover { background: var(--menu-dang); }
.menu .muc > a { font-weight: 600; }
.menu .dang > a, .menu .muc-con.dang a { background: var(--menu-dang); color: #fff; border-left: 4px solid #7fd29b; }
.menu .tieu-de-nhom { display: block; padding: .8rem 1rem .25rem; font-weight: 700; font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: #9fb6cf; }
.menu .muc-con a { padding-left: 1.25rem; font-size: .95rem; }
.menu .khoa { padding: .55rem 1rem; color: #7f93ab; display: flex; flex-direction: column; cursor: not-allowed; }
.menu .khoa .nho { font-size: .75rem; }
.giua { padding: 1.25rem 1.5rem 3rem; outline: none; min-width: 0; }
.tro-ly { background: var(--mat); border-left: 1px solid var(--vien); padding: 1rem; }
.tro-ly-dau h2 { margin: 0; }
.tro-ly-loi-khuyen { background: #eef6ff; border-left: 4px solid #2f80ed; padding: .6rem .75rem; border-radius: 6px; }

/* ---------------- Thẻ, nút */
.the { background: var(--mat); border: 1px solid var(--vien); border-radius: var(--bo); padding: 1rem; margin: .75rem 0; }
.the.canh-bao { background: var(--canh-bao-nen); border-color: #f5d7ae; }
.the.loi { background: var(--loi-nen); border-color: #f3c2bd; color: var(--loi); }
.the.xong { background: var(--tot-nen); border-color: #b9dfc5; }
.nut { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; border-radius: 8px; border: 1px solid transparent; padding: .55rem 1rem; font: inherit; font-weight: 600; cursor: pointer; text-decoration: none; min-height: 44px; }
.nut.chinh { background: var(--hanh-dong); color: #fff; }
.nut.chinh:hover { background: var(--hanh-dong-dam); }
.nut.phu { background: var(--mat); color: var(--chu); border-color: var(--vien); }
.nut.phu:hover { border-color: #9aa6b5; }
.nut.nho { min-height: 36px; padding: .35rem .75rem; font-size: .9rem; }
.nut:disabled { opacity: .5; cursor: not-allowed; }
.nut-chu { background: none; border: none; color: #1857a4; font: inherit; cursor: pointer; text-decoration: underline; padding: .3rem; }
.nut-chu.nguy { color: var(--loi); }
.nut-xem { background: none; border: 1px solid var(--vien); border-radius: 999px; width: 1.6rem; height: 1.6rem; margin-left: .35rem; cursor: pointer; color: #1857a4; font-size: .85rem; line-height: 1; }
.nut-xem:hover { background: #eef6ff; }
.nut-vi-sao { background: #eef6ff; border: 1px solid #c7dcf7; color: #1857a4; border-radius: 999px; padding: .25rem .75rem; cursor: pointer; font: inherit; font-size: .9rem; }
.hang-nut { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; margin-top: 1rem; }
.hang-o { display: flex; gap: 1rem; flex-wrap: wrap; align-items: flex-end; margin: .75rem 0; }
.hang-o label { display: flex; flex-direction: column; gap: .25rem; font-size: .9rem; }
:focus-visible { outline: 3px solid #7fb2f0; outline-offset: 2px; }

/* ---------------- Ô nhập */
.o-chu, .o-so, select, textarea { font: inherit; border: 1px solid #b9c2ce; border-radius: 8px; padding: .5rem .6rem; background: #fff; min-height: 44px; color: var(--chu); }
.o-chu.hep { width: 7rem; }
.o-chu.rong { flex: 1; min-width: 14rem; }
.o-so { width: 12rem; text-align: right; }
.o-so.nho { width: 10rem; }
.o-so.sai, .o-chu.sai { border-color: var(--loi); background: var(--loi-nen); }
.o-so-boc { display: flex; flex-direction: column; }
.phu-o { font-size: .78rem; color: var(--mo); text-align: right; min-height: 1em; }
.loi-o { color: var(--loi); font-size: .82rem; min-height: 0; }
.canh-bao-chu { color: var(--canh-bao) !important; }
textarea { width: 100%; resize: vertical; }

/* ---------------- Bảng */
.cuon-ngang { overflow-x: auto; }
.bang { border-collapse: collapse; width: 100%; background: var(--mat); border: 1px solid var(--vien); border-radius: var(--bo); margin: .5rem 0; }
.bang th, .bang td { padding: .5rem .65rem; border-bottom: 1px solid #edf0f4; text-align: left; vertical-align: top; }
.bang thead th { background: #f0f3f7; font-size: .85rem; color: #39465a; }
.bang .so { text-align: right; white-space: nowrap; }
.bang tfoot th, .bang tfoot td, .bang tr.tong th, .bang tr.tong td { font-weight: 700; background: #f7f9fb; }
.bang tr.dang td { background: #eef6ff; }
.bang-nhap td { vertical-align: top; }
.bang-nhap .hep input { width: 6rem; }
.hep-bang { max-width: 34rem; }
.chuoi { max-width: 36rem; }
.chuoi th { font-weight: 500; }
.so-sanh tr.doi td { background: #fffbe6; }
.so-sanh .chenh { color: var(--canh-bao); font-weight: 700; }

/* ---------------- Kết quả tính */
.ket-qua { display: inline-flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: .15rem .3rem; }
.ket-qua .rut-gon { width: 100%; text-align: right; font-size: .78rem; color: var(--mo); }
.ket-qua .thieu, .thieu { color: var(--canh-bao); font-weight: 600; font-size: .9rem; }
.canh-bao-nho { color: var(--canh-bao); font-size: .78rem; }
.nhan-ke-hoach { display: inline-block; background: #12304f; color: #fff; font-weight: 700; font-size: .78rem; padding: .1rem .55rem; border-radius: 4px; letter-spacing: .06em; }
.nhan-nhap { background: #eef1f5; padding: .05rem .45rem; border-radius: 4px; }
.phien-ban { font-size: .85rem; color: var(--mo); margin-bottom: .5rem; }
.nguon-DE_XUAT { color: var(--canh-bao); font-weight: 600; }

/* ---------------- Nhóm sản phẩm (màu theo Excel) */
.nhan-nhom { padding: .1rem .55rem; border-radius: 999px; font-weight: 600; font-size: .9rem; border: 2px solid; }
.nhom-dan { background: var(--nhom-dan-nen); border-color: var(--nhom-dan); }
.nhom-dong_tien { background: var(--nhom-dong-tien-nen); border-color: var(--nhom-dong-tien); }
.nhom-loi_nhuan { background: var(--nhom-loi-nhuan-nen); border-color: var(--nhom-loi-nhuan); }
.ba-nhom, .bon-nhom, .ba-so { display: grid; gap: .75rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bon-nhom { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.nhom-the { border-width: 0 0 0 6px; border-style: solid; }
.nho-the { margin: 0; }
.so-lon { font-size: 1.4rem; font-weight: 700; }

/* ---------------- Câu hỏi trắc nghiệm */
.loi-chao { background: #eef6ff; padding: .75rem 1rem; border-radius: var(--bo); }
.the-cau-hoi { background: var(--mat); border: 1px solid var(--vien); border-radius: var(--bo); padding: 1.25rem; margin: 1rem 0; }
.the-cau-hoi.gon { padding: .75rem; }
.cau-hoi { margin-top: 0; font-size: 1.2rem; }
.gon .cau-hoi { font-size: 1rem; }
.phuong-an { display: grid; gap: .5rem; margin: .75rem 0; }
.pa { display: flex; align-items: center; justify-content: space-between; gap: .75rem; text-align: left; font: inherit; background: #fff; border: 2px solid var(--vien); border-radius: 8px; padding: .7rem .9rem; cursor: pointer; min-height: 48px; }
.pa:hover { border-color: #9aa6b5; }
.pa.da-chon { border-color: var(--hanh-dong); background: var(--tot-nen); }
.pa.de-xuat .pa-nhan { background: var(--hanh-dong); color: #fff; font-size: .75rem; font-weight: 700; padding: .1rem .5rem; border-radius: 999px; white-space: nowrap; }
.ly-do-de-xuat { background: #f3faf5; border-left: 4px solid var(--hanh-dong); padding: .5rem .75rem; border-radius: 6px; font-size: .92rem; }
.ghi-chu-pa { background: var(--canh-bao-nen); padding: .5rem .75rem; border-radius: 6px; font-size: .92rem; margin: .5rem 0; }
.nhan-y-kien { display: flex; flex-direction: column; gap: .3rem; font-size: .9rem; margin-top: .75rem; }
.tien-do-cau { display: flex; gap: .4rem; flex-wrap: wrap; margin: .5rem 0; }
.cham-cau { width: 2.2rem; height: 2.2rem; border-radius: 999px; border: 2px solid var(--vien); background: #fff; font: inherit; font-weight: 600; cursor: pointer; }
.cham-cau.xong { background: var(--tot-nen); border-color: #7fc497; }
.cham-cau.dang { border-color: var(--menu); background: var(--menu); color: #fff; }
.tom-tat dl { margin: 0; }
.tt-dong { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .5rem; padding: .4rem 0; border-bottom: 1px solid #edf0f4; }
.tt-dong dt { color: var(--mo); }
.tt-dong dd { margin: 0; }

/* ---------------- Chi phí: 4 câu nhận diện */
.khoan-cp.da-xac-nhan { background: #f7fbf8; }
.cau-nd { display: flex; justify-content: space-between; gap: 1rem; align-items: center; padding: .35rem 0; border-bottom: 1px dashed #e6eaf0; flex-wrap: wrap; }
.cau-nd-chu { flex: 1; min-width: 14rem; }
.nut-nho-nhom { display: inline-flex; gap: .35rem; flex-wrap: wrap; }
.pa-nho { font: inherit; font-size: .9rem; border: 2px solid var(--vien); background: #fff; border-radius: 999px; padding: .3rem .8rem; cursor: pointer; min-height: 38px; }
.pa-nho.da-chon { border-color: var(--hanh-dong); background: var(--tot-nen); font-weight: 600; }
.pa-nho:disabled { cursor: default; }
.goi-y { background: #f3faf5; padding: .5rem .75rem; border-radius: 6px; }

/* ---------------- Hướng dẫn các bước */
.ds-buoc { list-style: none; padding: 0; margin: 0; }
.buoc { display: grid; grid-template-columns: 1.2rem minmax(0, 1fr) auto auto; gap: .75rem; align-items: center; background: var(--mat); border: 1px solid var(--vien); border-radius: var(--bo); padding: .75rem 1rem; margin: .5rem 0; }
.cham { display: inline-block; width: .8rem; height: .8rem; border-radius: 999px; background: #c3cad4; flex: none; }
.cham-xong { background: #3fb36b; }
.cham-cho_bo_sung { background: #f2a33a; }
.cham-chua_lam { background: #c3cad4; }
.cham-trong { background: transparent; }
.nhan-tt { font-size: .8rem; font-weight: 600; padding: .1rem .5rem; border-radius: 999px; background: #eef1f5; white-space: nowrap; }
.tt-xong { background: var(--tot-nen); color: #186332; }
.tt-cho_bo_sung { background: var(--canh-bao-nen); color: #7a3b06; }
.viec-tiep { border-left: 4px solid var(--hanh-dong); }
.hai-the { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.the-lon { display: block; text-align: left; font: inherit; color: inherit; text-decoration: none; cursor: pointer; border-width: 2px; }
.the-lon:hover { border-color: var(--hanh-dong); }

/* ---------------- Kế hoạch */
.thanh-thang { display: flex; gap: .3rem; align-items: center; flex-wrap: wrap; margin: .5rem 0 1rem; }
.o-thang { display: inline-flex; width: 2.4rem; height: 2.4rem; align-items: center; justify-content: center; border-radius: 8px; border: 1px dashed #b9c2ce; color: var(--mo); text-decoration: none; }
.o-thang.da-lap { border-style: solid; color: var(--chu); background: #fff; }
.o-thang.dang { background: var(--menu); color: #fff; border-color: var(--menu); }
.luoi-thang { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; }
.o-thang-lon { margin: 0; display: flex; flex-direction: column; gap: .4rem; }
.o-thang-lon.da-lap { border-color: #7fc497; }
.ten-dong { min-width: 10rem; align-self: center; }
.thu { border: 2px dashed #9fb6cf; }

/* ---------------- Dữ liệu kế toán */
.nguon-the { display: flex; flex-direction: column; gap: .5rem; margin: 0; }
.nguon-dung { border: 2px solid var(--hanh-dong); }
.nguon-cho { background: #f7f8fa; }
.thanh-buoc { list-style: none; display: flex; gap: .4rem; flex-wrap: wrap; padding: 0; margin: .75rem 0 1rem; }
.thanh-buoc li { display: flex; align-items: center; gap: .35rem; padding: .3rem .7rem .3rem .3rem; border-radius: 999px; background: #eef1f5; color: var(--mo); font-size: .9rem; }
.thanh-buoc li.xong { background: var(--tot-nen); color: #186332; }
.thanh-buoc li.dang { background: var(--menu); color: #fff; font-weight: 600; }
.so-buoc { display: inline-flex; width: 1.6rem; height: 1.6rem; border-radius: 999px; background: rgba(255,255,255,.7); color: var(--chu); align-items: center; justify-content: center; font-weight: 700; font-size: .85rem; }
.vung-tha { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .4rem; min-height: 9rem; border: 2px dashed #9fb6cf; border-radius: var(--bo); background: #fff; cursor: pointer; text-align: center; padding: 1rem; }
.vung-tha.dang-keo, .vung-tha:hover { border-color: var(--hanh-dong); background: var(--tot-nen); }
.xem-truoc td, .xem-truoc th { white-space: nowrap; font-size: .85rem; padding: .3rem .5rem; }
.xem-truoc tr.dong-tieu-de td { background: #eef6ff; font-weight: 700; }
.xem-truoc tr.mo td { color: #9aa3ae; }
.ghep select { max-width: 16rem; }
.ghep tr.dong-thieu td { background: var(--loi-nen); }
.nhan-muc { display: inline-block; font-size: .72rem; font-weight: 700; padding: .05rem .4rem; border-radius: 4px; margin: 0 .25rem 0 0; vertical-align: middle; }
.muc-chan { background: var(--loi-nen); color: var(--loi); }
.muc-cach_ly { background: var(--canh-bao-nen); color: #7a3b06; }
.muc-canh_bao { background: #eef6ff; color: #1857a4; }
.do-tin-cay { font-size: .8rem; font-weight: 600; padding: .1rem .5rem; border-radius: 999px; }
.dtc-cao, .dtc-nguoi_chon { background: var(--tot-nen); color: #186332; }
.dtc-trung_binh { background: #eef6ff; color: #1857a4; }
.dtc-thap { background: var(--canh-bao-nen); color: #7a3b06; }
.so-the.tot { border-color: #7fc497; }
.so-the.vang { border-color: #f2c27a; }
.ds-van { margin: 0; padding-left: 1rem; font-size: .9rem; }
.tt-dong-cach_ly, .tt-dong-xung_dot { background: var(--canh-bao-nen); color: #7a3b06; }
.tt-dong-moi, .tt-dong-phien_ban_moi { background: var(--tot-nen); color: #186332; }

/* ---------------- Báo cáo, bàn điều hành */
.luoi-bao-cao { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
.luoi-bao-cao .the { margin: 0; }
.bang.bao-cao td, .bang.bao-cao th { white-space: nowrap; font-size: .9rem; }
.bang.bao-cao tr.dong-tong td { font-weight: 700; background: #f7f9fb; }
.bang.bao-cao tr.dong-hq td { background: #fbfcfe; border-bottom: 2px solid #e3e8ef; }
.bang.bao-cao tr.dong-phu td { color: var(--mo); font-size: .85rem; }
.bang.bao-cao th.nhom-sp { background: #eef3f9; text-align: left; font-weight: 700; }
.so.tang { color: #b42318; }
.so.giam { color: #186332; }
.ghi-chu-bc { font-size: .88rem; color: var(--mo); padding-left: 1.1rem; }
.thanh-cong-cu { align-items: center; }
.the-chi-so { margin: 0; }
.hai-cot { display: flex; gap: 1rem; flex-wrap: wrap; }
.nhan-thuc-te { display: inline-block; background: #1f7a3f; color: #fff; font-weight: 700; font-size: .72rem; padding: .05rem .5rem; border-radius: 4px; letter-spacing: .05em; }
.ds-canh-bao { padding-left: 1.1rem; margin: 0; }
.canh-bao-dong { margin: .35rem 0; }
.khong-le { margin: 0; }
.ban-dieu-hanh { margin-bottom: 1.5rem; }
details.chung-tu summary { cursor: pointer; font-weight: 600; margin: .5rem 0; }

/* ---------------- Duyệt */
.vai-tro { display: inline-flex; align-items: center; gap: .4rem; background: #eef6ff; border: 1px solid #c7dcf7; border-radius: 8px; padding: .2rem .5rem; flex-wrap: wrap; max-width: 100%; }
.vai-tro select { min-height: 34px; padding: .2rem .4rem; }
.tt-duyet-nhap, .tt-duyet-tam_tinh { background: #eef1f5; color: #39465a; }
.tt-duyet-cho_duyet, .tt-duyet-da_doi_chieu { background: #eef6ff; color: #1857a4; }
.tt-duyet-da_ban_hanh, .tt-duyet-da_phe_duyet { background: var(--tot-nen); color: #186332; }
.tt-duyet-tu_choi, .tt-duyet-bi_tra_lai { background: var(--loi-nen); color: var(--loi); }
.tt-duyet-yeu_cau_bo_sung { background: var(--canh-bao-nen); color: #7a3b06; }
.lich-su-duyet { font-size: .88rem; color: var(--mo); padding-left: 1.2rem; margin: .5rem 0 0; }
.khung-duyet { margin-top: .5rem; }
.van-ban h2 { font-size: 1.05rem; }
.nhan-de-xuat { color: var(--canh-bao); font-weight: 600; }

/* ---------------- Sửa chữa (giai đoạn 5) */
.tt-sc-du_thao, .tt-buoc-chua_den, .tt-buoc-khong_can { background: #eef1f5; color: #39465a; }
.tt-sc-cho_duyet_xiv, .tt-sc-cho_duyet_xv, .tt-sc-cho_duyet_dong, .tt-buoc-dang_lam { background: #eef6ff; color: #1857a4; }
.tt-sc-cho_giai_trinh, .tt-sc-dang_thuc_hien, .tt-buoc-den_han { background: var(--canh-bao-nen); color: #7a3b06; }
.tt-sc-da_dong, .tt-buoc-xong { background: var(--tot-nen); color: #186332; }
.tt-sc-chuyen_cap, .tt-sc-dong_khong_dat, .tt-buoc-qua_han { background: var(--loi-nen); color: var(--loi); }
.tt-buoc-chua_lam_duoc { background: #f4eefc; color: #5b3b8c; }
.nhom-chon { border: 1px solid var(--vien); border-radius: 8px; padding: .5rem .75rem; margin: .6rem 0; }
.nhom-chon legend { font-weight: 600; padding: 0 .3rem; }
.lua-chon { display: flex; align-items: center; gap: .35rem; min-height: 40px; cursor: pointer; }
.lua-chon input { width: 20px; height: 20px; }
.nhan-o { display: flex; flex-direction: column; gap: .25rem; margin: .5rem 0; font-weight: 500; }
.nhan-o textarea, .nhan-o input { font-weight: 400; }
.thieu-o { border-left: 4px solid var(--loi); padding-left: .5rem; }
.thieu-o::after { content: "Còn thiếu"; color: var(--loi); font-size: .8rem; font-weight: 400; }
.the-con { border: 1px solid var(--vien); border-radius: 8px; padding: .75rem; margin: .75rem 0; background: #fbfcfd; }
.the-con.canh-bao { background: var(--canh-bao-nen); }
.the-con h3 { margin: 0 0 .4rem; font-size: 1rem; }
.luoi-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 0 .75rem; }
.giua-chu { text-align: center; }
.gia-tri-o { font-weight: 400; background: #f6f8fa; border-radius: 6px; padding: .4rem .6rem; white-space: pre-wrap; }
.viec-cua-anh { border-left: 4px solid var(--hanh-dong); background: #f3faf5; }
.van-ban h3 { font-size: .98rem; margin: .8rem 0 .3rem; }

/* ---------------- Hướng dẫn, sao lưu (giai đoạn 6) */
.buoc-huong-dan li { margin: .45rem 0; line-height: 1.5; }
.buoc-huong-dan a { white-space: nowrap; }
code { background: #f1f3f6; border-radius: 4px; padding: .1rem .35rem; word-break: break-all; }

/* ---------------- Đăng nhập */
body.chua-dang-nhap #menu, body.chua-dang-nhap #tro-ly, body.chua-dang-nhap .dau-nut, body.chua-dang-nhap #vai-tro { display: none; }
body.chua-dang-nhap .khung { grid-template-columns: 1fr; }
.khung-dang-nhap { max-width: 30rem; margin: 2rem auto; }
.khung-dang-nhap .o-chu { width: 100%; box-sizing: border-box; }
.vai-tro .nguoi-dang-nhap { white-space: nowrap; }
.chon-cong-ty { max-width: 14rem; font-weight: 600; }
.vai-tro a, .vai-tro .nut-chu { white-space: nowrap; }

/* ---------------- In / lưu PDF */
.chi-in { display: none; }
@media print {
  @page { size: A4 landscape; margin: 12mm; }
  body { background: #fff !important; color: #000; }
  #menu, #tro-ly, .dau, .thanh-cong-cu, .vung-thong-bao, .hang-nut, .khung-duyet textarea, .khung-duyet button, .nut, .nut-chu,
  .vung-man > p:has(> a), .vung-man > a, .vung-man > section:last-of-type:has(.lich-su-duyet) { display: none !important; }
  .khung { display: block !important; }
  .giua { padding: 0 !important; max-width: none !important; }
  .chi-in { display: block !important; }
  /* Không in ô nhập, nút bấm, khung thao tác (trạng thái và người xác nhận đã có ở đầu trang và khối ký) */
  button, textarea, input, select, .khong-in, .nut-vi-sao { display: none !important; }
  .bang th, .bang td { padding: .6mm 1mm !important; white-space: normal !important; }
  .bang th { font-size: 6.5pt !important; }
  .bang td.so, .bang .so { white-space: nowrap !important; }
  .bang { width: 100% !important; font-size: 7pt !important; }
  .bang * { font-size: 7pt !important; }
  .bang .ket-qua { white-space: normal !important; }
  .khong-xuong-dong { white-space: normal !important; }
  .dau-in { border-bottom: 2px solid #000; margin-bottom: 8mm; padding-bottom: 2mm; }
  .tieu-de-in { font-size: 16pt; font-weight: 700; margin: 2mm 0; }
  .vung-man > h1 { display: none; }
  .cuon-ngang { overflow: visible !important; }
  table { font-size: 9pt; page-break-inside: auto; } tr { page-break-inside: avoid; }
  .the { border: 1px solid #999; box-shadow: none; break-inside: avoid; }
  .khoi-ky { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 10mm; margin-top: 12mm; text-align: center; break-inside: avoid; }
  .o-ky { min-height: 28mm; }
  a { color: #000; text-decoration: none; }
  .bang-gia-lap { display: block !important; border: 1px solid #000; }
}

/* ---------------- Hộp thoại, thông báo */
.hop { border: none; border-radius: 12px; padding: 1.25rem; max-width: min(640px, calc(100vw - 32px)); width: 100%; box-shadow: 0 20px 60px rgba(0,0,0,.25); }
.hop::backdrop { background: rgba(18, 48, 79, .45); }
.giai-trinh h2 { margin-top: 0; }
.gt-ket-qua { font-size: 1.4rem; font-weight: 700; margin-bottom: .5rem; }
.gt-ket-qua .ket-qua { justify-content: flex-start; }
.gt-ket-qua .rut-gon { text-align: left; }
.gt-dong { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: .75rem; padding: .45rem 0; border-top: 1px solid #edf0f4; }
.gt-nhan { color: var(--mo); font-size: .9rem; }
.gt-noi ul { margin: 0; padding-left: 1.1rem; }
.gt-ly-do { background: var(--canh-bao-nen); padding: .5rem .75rem; border-radius: 6px; }
.vung-thong-bao { position: fixed; bottom: 1rem; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: .5rem; z-index: 20; }
.thong-bao { background: #1b2430; color: #fff; padding: .7rem 1.1rem; border-radius: 8px; box-shadow: 0 6px 20px rgba(0,0,0,.2); }
.thong-bao.loi { background: var(--loi); }
.trong { color: var(--mo); font-style: italic; }

/* ---------------- Màn hình hẹp */
@media (max-width: 1100px) {
  .khung { grid-template-columns: 200px minmax(0, 1fr); }
  .tro-ly { grid-column: 1 / -1; border-left: none; border-top: 1px solid var(--vien); }
}
@media (max-width: 760px) {
  .khung { grid-template-columns: minmax(0, 1fr); }
  .menu { padding: .25rem 0; }
  .menu > ul { display: flex; flex-wrap: wrap; }
  .giua { padding: 1rem; }
  .ba-nhom, .bon-nhom, .ba-so, .hai-the, .luoi-thang { grid-template-columns: minmax(0, 1fr); }
  .buoc { grid-template-columns: 1.2rem minmax(0, 1fr); }
  .buoc .nhan-tt, .buoc .nut { grid-column: 2; justify-self: start; }
  .tt-dong { grid-template-columns: minmax(0, 1fr); }
  .gt-dong { grid-template-columns: minmax(0, 1fr); }
  .o-so, .o-so.nho { width: 100%; }
  .dau-nut { margin-left: 0; }
}

.khong-xuong-dong th, .khong-xuong-dong td { white-space: nowrap; }
.gt-noi code, .phien-ban code { word-break: break-all; }
td.khong-xuong-dong, th.khong-xuong-dong { white-space: nowrap; }