/* ============================================================
   style.css  -  Toan bo giao dien QLVT
   ============================================================ */

/* ---------- Bien mau: doi o day la doi ca app ---------- */
:root {
  --nen:        #f4f6f9;
  --the:        #ffffff;
  --vien:       #e3e8ef;
  --chu:        #1c2430;
  --chu-nhat:   #64748b;

  --chinh:      #1d4ed8;   /* xanh duong - mau chu dao */
  --chinh-nhat: #eff5ff;

  --xanh:       #059669;   /* tot / da du */
  --xanh-nhat:  #ecfdf5;
  --vang:       #b45309;   /* canh bao / thieu */
  --vang-nhat:  #fffbeb;
  --do:         #dc2626;   /* nguy / cham / qua han */
  --do-nhat:    #fef2f2;
  --tim:        #7c3aed;
  --tim-nhat:   #f5f3ff;

  --bo-goc: 10px;
  --bong: 0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.1);
  --bong-cao: 0 10px 30px rgba(16,24,40,.12);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Segoe UI', system-ui, -apple-system, Roboto, Arial, sans-serif;
  background: var(--nen);
  color: var(--chu);
  font-size: 14px;
  line-height: 1.5;
}

/* ============================================================
   MAN HINH DANG NHAP
   ============================================================ */
#man-dang-nhap {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #1e3a8a 0%, #1d4ed8 55%, #3b82f6 100%);
  padding: 20px;
}
.hop-dang-nhap {
  background: #fff; padding: 40px; border-radius: 16px;
  box-shadow: var(--bong-cao); width: 100%; max-width: 400px;
}
.hop-dang-nhap h1 { font-size: 24px; margin-bottom: 4px; }
.hop-dang-nhap .logo-dn { display: block; width: 100%; max-width: 300px; height: auto; margin: 0 auto 10px; }
.hop-dang-nhap .phu {
  color: var(--chu-nhat); margin-bottom: 28px; font-size: 13px;
  text-align: center; text-transform: uppercase; font-weight: 700; letter-spacing: .5px;
}

/* ============================================================
   BO CUC CHINH: thanh ben trai + noi dung ben phai
   ============================================================ */
#man-chinh { display: none; min-height: 100vh; }
#man-chinh.hien { display: flex; }

.thanh-ben {
  width: 250px; flex-shrink: 0;
  background: #0f172a; color: #cbd5e1;
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh;
}
.thanh-ben .dau {
  padding: 16px 16px; border-bottom: 1px solid #1e293b;
}
/* Logo cong ty dat tren the trang bo goc de mau navy/xanh hien ro tren nen toi */
.thanh-ben .dau .logo-hop {
  background: #fff; border-radius: 10px; padding: 10px 12px;
  display: flex; align-items: center; justify-content: center;
}
.thanh-ben .dau .logo-img { width: 100%; height: auto; display: block; }
.thanh-ben .dau .phu-app {
  display: block; margin-top: 10px; text-align: center;
  font-size: 11px; color: #94a3b8; letter-spacing: 1.5px; font-weight: 600;
}
/* Giu tuong thich neu con dung markup cu (b + span) */
.thanh-ben .dau b { color: #fff; font-size: 17px; display: block; }
.thanh-ben .dau span:not(.phu-app) { font-size: 11px; color: #64748b; letter-spacing: .5px; }

.thanh-ben nav { padding: 12px 10px; flex: 1; overflow-y: auto; }
.thanh-ben .nhom-tieu-de {
  font-size: 10px; text-transform: uppercase; letter-spacing: 1px;
  color: #475569; padding: 14px 10px 6px; font-weight: 700;
}
.thanh-ben a {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 8px;
  color: #cbd5e1; text-decoration: none; font-size: 14px;
  margin-bottom: 2px; cursor: pointer;
}
.thanh-ben a:hover { background: #1e293b; color: #fff; }
.thanh-ben a.dang-chon { background: var(--chinh); color: #fff; font-weight: 600; }
.thanh-ben a .bieu-tuong { font-size: 16px; width: 20px; text-align: center; }

.thanh-ben .chan {
  padding: 14px 18px; border-top: 1px solid #1e293b; font-size: 12px;
}
.thanh-ben .chan .ten { color: #fff; font-weight: 600; }
.thanh-ben .chan .vai { color: #64748b; }
.thanh-ben .chan button {
  margin-top: 10px; width: 100%; background: #1e293b; color: #cbd5e1;
  border: none; padding: 8px; border-radius: 6px; cursor: pointer; font-size: 12px;
}
.thanh-ben .chan button:hover { background: #334155; color: #fff; }

.noi-dung { flex: 1; padding: 26px 32px; overflow-x: auto; min-width: 0; }

.dau-trang { display: flex; justify-content: space-between; align-items: flex-start;
             gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }

.dau-trang h2 { font-size: 22px; }
.dau-trang p  { color: var(--chu-nhat); font-size: 13px; margin-top: 2px; }

/* Dong TONG cua bang san luong: noi bat len de doc nhanh con so cuoi cung. */
.bang-san-luong tfoot .hang-tong td {
  background: var(--chinh-nhat);
  border-top: 2px solid var(--chinh);
  font-size: 15px;
  font-weight: 700;
  color: var(--chu);
  padding-top: 13px; padding-bottom: 13px;
}
.bang-san-luong tfoot .hang-tong .nhan-tong {
  display: inline-block; background: var(--chinh); color: #fff;
  font-size: 12px; font-weight: 700; letter-spacing: .5px;
  padding: 2px 9px; border-radius: 999px; margin-right: 6px;
}
.bang-san-luong tfoot .hang-tong .mo-nhat { font-weight: 400; font-size: 13px; }

/* ============================================================
   THANH PHAN CHUNG
   ============================================================ */
.the {
  background: var(--the); border: 1px solid var(--vien);
  border-radius: var(--bo-goc); box-shadow: var(--bong);
}
.the-dem { padding: 18px; }

label { display: block; font-weight: 600; font-size: 12.5px; margin-bottom: 5px; color: #334155; }

input, select, textarea {
  width: 100%; padding: 9px 11px; font-size: 14px; font-family: inherit;
  border: 1px solid #cbd5e1; border-radius: 7px; background: #fff; color: var(--chu);
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--chinh); box-shadow: 0 0 0 3px rgba(29,78,216,.12);
}
input[type=checkbox] { width: auto; }
.o-nhap { margin-bottom: 14px; }

/* ---------- O chon go-de-tim (combobox) ---------- */
.combo-tim { position: relative; }
.combo-o {
  width: 100%; padding: 9px 11px; font-size: 14px; font-family: inherit;
  border: 1px solid #cbd5e1; border-radius: 7px; background: #fff; color: var(--chu);
}
.combo-o:focus { outline: none; border-color: var(--chinh); box-shadow: 0 0 0 3px rgba(29,78,216,.12); }
.combo-dd {
  position: absolute; z-index: 200; left: 0; right: 0; top: calc(100% + 3px);
  max-height: 240px; overflow-y: auto; background: #fff;
  border: 1px solid var(--vien); border-radius: 8px; box-shadow: 0 8px 24px rgba(15,23,42,.14);
}
/* Khung gon: chi vua ~3 muc, cuon cho phan con lai (data-tim-gon tren the <select>) */
.combo-dd.gon { max-height: 104px; }
.combo-it { padding: 8px 11px; font-size: 13.5px; cursor: pointer; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.combo-it:hover { background: var(--chinh-nhat); }
.combo-it.chon { background: var(--chinh-nhat); font-weight: 600; color: var(--chinh); }
.combo-trong { padding: 8px 11px; font-size: 13px; color: var(--chu-nhat); }
.hang-nhap { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }

button, .nut {
  padding: 9px 16px; font-size: 14px; font-weight: 600; font-family: inherit;
  border: 1px solid transparent; border-radius: 7px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
}
.nut-chinh  { background: var(--chinh); color: #fff; }
.nut-chinh:hover  { background: #1e40af; }
.nut-phu    { background: #fff; color: var(--chu); border-color: #cbd5e1; }
.nut-phu:hover    { background: #f8fafc; }
.nut-nguy   { background: var(--do); color: #fff; }
.nut-nho    { padding: 5px 10px; font-size: 12px; }
button:disabled { opacity: .5; cursor: not-allowed; }
.nut-rong   { width: 100%; justify-content: center; }

/* ---------- The so lieu (dashboard) ---------- */
.khoi-so-lieu { margin-bottom: 24px; }
.khoi-so-lieu > h3 {
  font-size: 13px; text-transform: uppercase; letter-spacing: .8px;
  color: var(--chu-nhat); margin-bottom: 10px; font-weight: 700;
}
.luoi-the { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; }

.the-so {
  background: #fff; border: 1px solid var(--vien); border-left: 4px solid var(--chinh);
  border-radius: var(--bo-goc); padding: 16px 18px; box-shadow: var(--bong);
}
.the-so .nhan  { font-size: 12px; color: var(--chu-nhat); font-weight: 600; margin-bottom: 6px; }
.the-so .so    { font-size: 28px; font-weight: 700; line-height: 1.1; }
.the-so .duoi  { font-size: 11px; color: var(--chu-nhat); margin-top: 4px; }
.the-so.xanh { border-left-color: var(--xanh); } .the-so.xanh .so { color: var(--xanh); }
.the-so.vang { border-left-color: var(--vang); } .the-so.vang .so { color: var(--vang); }
.the-so.do   { border-left-color: var(--do);   } .the-so.do   .so { color: var(--do); }
.the-so.tim  { border-left-color: var(--tim);  } .the-so.tim  .so { color: var(--tim); }

/* ---------- Bang ---------- */
/* Bang tu cuon BEN TRONG khung (khong de ca trang cuon) -> dong tieu de dinh
   lai tren cung, va bo loc + phan trang luon nam trong tam mat.
   max-height tru di phan dau trang/bo loc/phan trang ben ngoai. */
.bao-bang {
  /* Khong dat min-height: bang it dong thi khung co lai vua khit,
     khong de lai mang trang tro tren man hinh. */
  overflow: auto; max-height: calc(100vh - 260px);
  border-radius: var(--bo-goc); border: 1px solid var(--vien); background: #fff;
}
table { width: 100%; border-collapse: collapse; font-size: 13px; }
thead th {
  background: #f8fafc; text-align: left; padding: 11px 12px;
  font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px;
  color: #475569; white-space: nowrap;
  /* Dinh tieu de khi cuon */
  position: sticky; top: 0; z-index: 3;
  /* Dung box-shadow thay border-bottom: voi border-collapse:collapse, duong ke
     cua o tieu de bi "troi" theo noi dung khi sticky, con box-shadow thi dinh
     lien voi o nen luon o dung cho. */
  box-shadow: inset 0 -1px 0 var(--vien);
}
/* Bang nam trong popup: than popup da tu cuon roi, cho khung bang thap hon
   de khong sinh ra hai thanh cuon long nhau qua sau. */
.cua-so .bao-bang { max-height: 46vh; }
tbody td { padding: 10px 12px; border-bottom: 1px solid #f1f5f9; vertical-align: middle; }
tbody tr:hover { background: #f8fafc; }
tbody tr:last-child td { border-bottom: none; }
.canh-phai { text-align: right; }
.canh-giua { text-align: center; }
.mo-nhat   { color: var(--chu-nhat); }
.dam       { font-weight: 600; }
.ma-so     { font-family: 'Consolas', monospace; font-size: 12px; }

.hang-cha  { background: #fbfcfe; }
.hang-cha td { border-top: 2px solid var(--vien); }
.hang-con td { background: #fdfdfe; }
.hang-con .thut { padding-left: 34px; position: relative; }
.hang-con .thut::before {
  content: '↳'; position: absolute; left: 16px; color: #94a3b8;
}

/* ---------- Nhan trang thai ---------- */
.nhan {
  display: inline-block; padding: 3px 9px; border-radius: 20px;
  font-size: 11px; font-weight: 700; white-space: nowrap;
}
.nhan.xanh { background: var(--xanh-nhat); color: var(--xanh); }
.nhan.vang { background: var(--vang-nhat); color: var(--vang); }
.nhan.do   { background: var(--do-nhat);   color: var(--do); }
.nhan.xam  { background: #f1f5f9;          color: var(--chu-nhat); }
.nhan.lam  { background: var(--chinh-nhat); color: var(--chinh); }
.nhan.tim  { background: var(--tim-nhat);  color: var(--tim); }

/* ---------- Bang o tich phan quyen (man hinh Tai khoan) ---------- */
.bang-quyen { border: 1px solid var(--vien); border-radius: 7px; overflow: hidden; }
.bang-quyen .hang-quyen {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 12px; border-bottom: 1px solid var(--vien);
}
.bang-quyen .hang-quyen:last-child { border-bottom: 0; }
.bang-quyen .hang-quyen:nth-child(odd) { background: #fafbfc; }
.bang-quyen .ten-phan { flex: 1; font-size: 13px; font-weight: 600; }
.bang-quyen .o-muc {
  display: flex; align-items: center; gap: 5px; margin: 0; cursor: pointer;
  font-weight: 400; font-size: 13px; min-width: 62px;
}
/* Muc dang chon thi to dam len cho de nhin luot */
.bang-quyen .o-muc:has(input:checked) { font-weight: 700; color: var(--chinh); }

@media (max-width: 560px) {
  .bang-quyen .hang-quyen { flex-wrap: wrap; }
  .bang-quyen .ten-phan { flex: 1 0 100%; margin-bottom: 4px; }
}

/* Chuoi 5 o vuong the hien 5 cap phe duyet */
.chuoi-duyet { display: inline-flex; gap: 3px; }
.chuoi-duyet i {
  width: 16px; height: 16px; border-radius: 4px; font-style: normal;
  font-size: 9px; font-weight: 700; display: flex; align-items: center; justify-content: center;
  background: #e2e8f0; color: #94a3b8;
}
.chuoi-duyet i.ky { background: var(--xanh); color: #fff; }

/* Thanh tien do */
.thanh-td { height: 6px; background: #e2e8f0; border-radius: 3px; overflow: hidden; min-width: 60px; }
.thanh-td > span { display: block; height: 100%; background: var(--xanh); }
.thanh-td.thieu > span { background: var(--vang); }

/* ---------- Bo loc ---------- */
.bo-loc {
  background: #fff; border: 1px solid var(--vien); border-radius: var(--bo-goc);
  padding: 14px 16px; margin-bottom: 16px; display: flex; gap: 12px;
  align-items: flex-end; flex-wrap: wrap;
  /* Nang ca thanh loc len TREN bang ben duoi: dropdown go-de-tim so xuong
     phia duoi, phai noi len tren bang khong thi bi bang de mat. */
  position: relative; z-index: 30;
}
.bo-loc .o-nhap { margin-bottom: 0; flex: 1; min-width: 150px; }

/* O tim kiem: khong co nhan phia tren nen phai cao bang cac o khac trong hang.
   type=search de dien thoai hien nut xoa (x) san co. */
.o-tim input { width: 100%; }
.o-tim input::-webkit-search-cancel-button { cursor: pointer; }

/* ---------- Cua so bat len (modal) ---------- */
.nen-mo {
  position: fixed; inset: 0; background: rgba(15,23,42,.55);
  display: none; align-items: flex-start; justify-content: center;
  padding: 40px 20px; z-index: 100; overflow-y: auto;
}
.nen-mo.hien { display: flex; }
.cua-so {
  background: #fff; border-radius: 14px; width: 100%; max-width: 620px;
  box-shadow: var(--bong-cao); animation: hienLen .18s ease;
}
.cua-so.rong { max-width: 900px; }
.cua-so.rong-hon { max-width: 1170px; }  /* rong + 30%, cho bang nhieu cot (vd Xu huong ton dong) */
@keyframes hienLen { from { opacity: 0; transform: translateY(-12px); } }
.cua-so .dau-cs {
  padding: 18px 22px; border-bottom: 1px solid var(--vien);
  display: flex; justify-content: space-between; align-items: center;
}
.cua-so .dau-cs h3 { font-size: 17px; }
.cua-so .dong-cs { background: none; border: none; font-size: 22px; color: #94a3b8; padding: 0 6px; }
.cua-so .than-cs { padding: 22px; max-height: 65vh; overflow-y: auto; }
.cua-so .chan-cs {
  padding: 14px 22px; border-top: 1px solid var(--vien);
  display: flex; justify-content: flex-end; gap: 10px; background: #f8fafc;
  border-radius: 0 0 14px 14px;
}

/* ---------- Thong bao ---------- */
#khay-thong-bao { position: fixed; top: 20px; right: 20px; z-index: 200; display: flex; flex-direction: column; gap: 8px; }
.thong-bao {
  background: #fff; border-left: 4px solid var(--chinh); border-radius: 8px;
  padding: 12px 18px; box-shadow: var(--bong-cao); min-width: 260px; max-width: 420px;
  font-size: 13.5px; animation: hienLen .2s ease;
}
.thong-bao.ok  { border-left-color: var(--xanh); }
.thong-bao.loi { border-left-color: var(--do); }

/* ---------- Linh tinh ---------- */
.trong { text-align: center; padding: 48px 20px; color: var(--chu-nhat); }
.trong .to { font-size: 40px; margin-bottom: 10px; opacity: .5; }
.dang-tai { text-align: center; padding: 40px; color: var(--chu-nhat); }
.canh-bao {
  background: var(--vang-nhat); border: 1px solid #fde68a; color: #92400e;
  padding: 10px 14px; border-radius: 8px; font-size: 13px; margin-bottom: 14px;
}
.phan-trang { display: flex; justify-content: space-between; align-items: center; padding: 12px 4px; font-size: 13px; }
.phan-trang .cac-nut { display: flex; gap: 6px; }
.chi-xem { background: #f1f5f9; color: var(--chu-nhat); padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; }

/* Thanh tren cung + man che: MAC DINH AN, chi hien tren dien thoai */
.thanh-mobile { display: none; }
.man-che { display: none; }

/* ============================================================
   HIEU UNG KHI CUON TRANG
   ------------------------------------------------------------
   Cac khoi noi dung ban dau mo va thut xuong mot chut.
   Khi cuon toi noi, chung hien ro dan va truot len -> mat de theo doi.

   .hien-dan       = trang thai ban dau (chua thay)
   .hien-dan.da-hien = da cuon toi, hien ra
   ============================================================ */
.hien-dan {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .5s cubic-bezier(.2,.6,.2,1),
              transform .5s cubic-bezier(.2,.6,.2,1);
  will-change: opacity, transform;
}
.hien-dan.da-hien {
  opacity: 1;
  transform: none;
}

/* Cac the so lieu hien lan luot nhau, moi cai cham hon cai truoc mot chut */
.luoi-the > .the-so:nth-child(1) { transition-delay: 0s; }
.luoi-the > .the-so:nth-child(2) { transition-delay: .07s; }
.luoi-the > .the-so:nth-child(3) { transition-delay: .14s; }
.luoi-the > .the-so:nth-child(4) { transition-delay: .21s; }

/* Cac dong trong bang cung hien lan luot */
tbody tr.hien-dan { transition-duration: .35s; }

/* TON TRONG NGUOI DUNG:
   Ai bat "giam chuyen dong" trong cai dat he thong (vi chong mat, dau dau)
   thi TAT HET hieu ung. Day khong phai tuy chon - la phep lich su bat buoc. */
@media (prefers-reduced-motion: reduce) {
  .hien-dan, .hien-dan.da-hien {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ============================================================
   ĐIỆN THOẠI  (màn hình hẹp hơn 820px)
   ------------------------------------------------------------
   Ba thay đổi lớn:
     1. Thanh bên trái  -> ẩn đi, trượt ra khi bấm nút ☰
     2. Bảng nhiều cột  -> mỗi dòng thành MỘT THẺ DỌC, không cuốn ngang
     3. Nút & ô nhập    -> to hơn, đủ rộng cho ngón tay bấm
   ============================================================ */
@media (max-width: 820px) {

  /* --- 1. Thanh trên cùng --- */
  .thanh-mobile {
    display: flex; align-items: center; gap: 12px;
    position: fixed; top: 0; left: 0; right: 0; height: 54px;
    background: #0f172a; color: #fff; padding: 0 14px; z-index: 60;
    box-shadow: 0 2px 8px rgba(0,0,0,.2);
  }
  .thanh-mobile button {
    background: none; border: none; color: #fff; font-size: 22px;
    padding: 6px 4px; line-height: 1;
  }
  .thanh-mobile b { font-size: 17px; }
  .thanh-mobile span { margin-left: auto; font-size: 12px; color: #94a3b8; }

  /* --- Thanh bên: trượt ra từ trái --- */
  .thanh-ben {
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 80;
    width: 268px; height: 100vh;
    transform: translateX(-100%);
    transition: transform .22s ease;
  }
  .thanh-ben.mo { transform: translateX(0); }

  .man-che {
    display: block; position: fixed; inset: 0; z-index: 70;
    background: rgba(15,23,42,.5);
    opacity: 0; pointer-events: none; transition: opacity .22s ease;
  }
  .man-che.hien { opacity: 1; pointer-events: auto; }

  .noi-dung { padding: 70px 14px 30px; }
  .dau-trang h2 { font-size: 19px; }
  .dau-trang { gap: 12px; }
  .dau-trang > div:last-child { display: flex; gap: 8px; flex-wrap: wrap; width: 100%; }

  /* --- 2. Bảng -> thẻ dọc --- */
  /* Ẩn dòng tiêu đề, mỗi ô tự hiện tên cột của nó qua data-nhan */
  /* max-height: none - tren dien thoai bang thanh the doc, khong duoc nhot
     danh sach trong mot khung cuon nho. Tieu de da an (thead display:none)
     nen khong con gi de dinh. */
  .bao-bang { border: none; background: none; overflow: visible; max-height: none; }
  .cua-so .bao-bang { max-height: none; }
  .bao-bang table, .bao-bang thead, .bao-bang tbody, .bao-bang tfoot,
  .bao-bang tr, .bao-bang th, .bao-bang td { display: block; width: auto; }

  .bao-bang thead { display: none; }

  /* tbody VA tfoot (dong TONG) deu thanh THE doc tren mobile */
  .bao-bang tbody tr, .bao-bang tfoot tr {
    background: #fff; border: 1px solid var(--vien);
    border-radius: var(--bo-goc); box-shadow: var(--bong);
    margin-bottom: 12px; padding: 12px 14px;
  }
  .bao-bang tbody tr:hover { background: #fff; }
  /* Dong TONG noi bat hon cac dong thuong */
  .bao-bang tfoot tr { border-color: var(--chinh); background: var(--chinh-nhat); }

  .bao-bang tbody td, .bao-bang tfoot td {
    border: none; padding: 5px 0;
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
    text-align: left;
  }
  .bao-bang tbody td.canh-phai, .bao-bang tbody td.canh-giua,
  .bao-bang tfoot td.canh-phai, .bao-bang tfoot td.canh-giua { text-align: left; }

  /* Tên cột hiện bên trái mỗi ô */
  .bao-bang tbody td[data-nhan]::before,
  .bao-bang tfoot td[data-nhan]::before {
    content: attr(data-nhan);
    font-size: 11.5px; font-weight: 700; color: var(--chu-nhat);
    text-transform: uppercase; letter-spacing: .3px;
    flex-shrink: 0;
  }
  /* Ô trống thì giấu luôn cho gọn */
  .bao-bang tbody td:empty, .bao-bang tfoot td:empty { display: none; }

  /* Dòng con (kế hoạch) thụt vào, viền trái xanh cho dễ nhận */
  .bao-bang tbody tr.hang-con {
    margin-left: 16px; border-left: 3px solid var(--chinh); background: #fbfcfe;
  }
  .hang-con .thut { padding-left: 0; }
  .hang-con .thut::before { content: none; }
  .hang-cha td { border-top: none; }

  /* --- 3. Bộ lọc: xếp dọc --- */
  .bo-loc { flex-direction: column; align-items: stretch; padding: 14px; }
  .bo-loc .o-nhap { min-width: 0; width: 100%; }
  .bo-loc button { width: 100%; justify-content: center; }

  .hang-nhap { grid-template-columns: 1fr; }

  /* --- Thẻ số liệu: 2 cột --- */
  .luoi-the { grid-template-columns: 1fr 1fr; gap: 10px; }
  .the-so { padding: 12px 14px; }
  .the-so .so { font-size: 22px; }
  .the-so .nhan { font-size: 11px; }
  .the-so .duoi { font-size: 10px; }

  /* --- Cửa sổ bật lên: gần như toàn màn hình --- */
  .nen-mo { padding: 0; align-items: flex-end; }
  .cua-so, .cua-so.rong, .cua-so.rong-hon {
    max-width: 100%; border-radius: 16px 16px 0 0; max-height: 94vh;
    display: flex; flex-direction: column;
  }
  .cua-so .than-cs { max-height: none; flex: 1; }
  .cua-so .chan-cs { border-radius: 0; flex-wrap: wrap; }
  .cua-so .chan-cs button { flex: 1; justify-content: center; min-width: 100px; }

  /* --- Ngón tay bấm được: ô nhập & nút to hơn --- */
  input, select, textarea { padding: 11px 12px; font-size: 16px; }  /* 16px: iPhone khong tu phong to */
  button, .nut { padding: 11px 16px; }
  .nut-nho { padding: 7px 12px; font-size: 12.5px; }

  #khay-thong-bao { top: auto; bottom: 14px; left: 14px; right: 14px; }
  .thong-bao { min-width: 0; max-width: none; }

  .phan-trang { flex-direction: column; gap: 10px; }
}

/* Màn hình rất hẹp (điện thoại nhỏ) */
@media (max-width: 400px) {
  .luoi-the { grid-template-columns: 1fr; }
}