/* ===================================================================
   SỔ TAY ĐIỀU HÀNH — BỘ GIAO DIỆN DÙNG CHUNG  (phong cách sáng)
   -------------------------------------------------------------------
   Mọi màn hình phải dùng lại các lớp trong file này.
   Không tự đặt màu, không tự đặt cỡ chữ rời rạc trong từng trang.

   PHÂN CẤP THỊ GIÁC DỰNG THEO 3 TRỤC:
     Trục 1 — ĐỘ ĐẬM NỀN   : nền trang trắng, phân tầng bằng VIỀN MẢNH
                             chứ không bằng nền đậm hay đổ bóng nặng
     Trục 2 — CỠ & ĐẬM CHỮ : --cho-11 … --cho-30 kèm 4 mức đậm
     Trục 3 — ĐỘ BÃO HOÀ   : xám cho mọi thứ thường trực,
                             màu bão hoà CHỈ dành cho thứ cần chú ý

   Xem toàn bộ component tại: /bo-component.html
   =================================================================== */

/* ---------- TOKEN ---------- */
:root{
  /* Trục 1 — nền & viền */
  --nen-app:#FFFFFF;      /* vùng nội dung          */
  --nen-ben:#FCFCFD;      /* thanh bên (sáng)       */
  --nen-the:#FFFFFF;      /* mặt thẻ                */
  --nen-chim:#F9FAFB;     /* vùng chìm, đầu bảng    */
  --nen-chon:#F2F4F7;     /* mục đang chọn          */
  --vien:#EAECF0;
  --vien-dam:#D0D5DD;

  /* Trục 2 — chữ */
  --chu-1:#101828;        /* chính */
  --chu-2:#475467;        /* phụ   */
  --chu-3:#98A2B3;        /* mờ    */

  --cho-11:11.5px; --cho-12:12px;  --cho-13:13px;  --cho-14:14px;
  --cho-15:15px;   --cho-16:16px;  --cho-20:20px;  --cho-30:30px;

  /* Trục 3 — bão hoà: 1 màu đậm + 1 nền nhạt + 1 viền cho mỗi sắc thái */
  --nhan:#0E7490;   --nhan-nen:#ECFDFF;  --nhan-vien:#A5F0FC;
  --ok:#067647;     --ok-nen:#ECFDF3;    --ok-vien:#ABEFC6;
  --canh:#B42318;   --canh-nen:#FEF3F2;  --canh-vien:#FECDCA;
  --tre:#B54708;    --tre-nen:#FFFAEB;   --tre-vien:#FEDF89;
  --cho:#6941C6;    --cho-nen:#F4F3FF;   --cho-vien:#D9D6FE;

  --k1:4px; --k2:8px; --k3:12px; --k4:16px; --k5:20px; --k6:24px; --k8:32px;
  --bo-1:6px; --bo-2:8px; --bo-3:10px; --bo-tron:999px;
  --bong-1:0 1px 2px rgba(16,24,40,.05);
  --bong-2:0 1px 3px rgba(16,24,40,.10), 0 1px 2px rgba(16,24,40,.06);
  --bong-3:0 20px 48px rgba(16,24,40,.18);

  --rong-ben:248px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--nen-app); color:var(--chu-1);
  font-family:"Segoe UI",system-ui,-apple-system,"Helvetica Neue",sans-serif;
  font-size:var(--cho-14); line-height:1.5; -webkit-font-smoothing:antialiased;
}
.bt{width:17px; height:17px; flex:none; stroke:currentColor; fill:none;
    stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round}

/* ===================================================================
   1. KHUNG TRANG
   =================================================================== */
.khung{display:flex; min-height:100vh}

.ben{
  width:var(--rong-ben); flex:none; background:var(--nen-ben);
  border-right:1px solid var(--vien);
  display:flex; flex-direction:column; position:sticky; top:0; height:100vh; overflow-y:auto;
}
.ben__hieu{display:flex; align-items:center; gap:var(--k2); padding:var(--k5) var(--k4) var(--k3)}
.hieu-o{width:30px; height:30px; border-radius:var(--bo-2); background:var(--chu-1);
        display:grid; place-items:center; flex:none}
.hieu-o span{width:11px; height:11px; border-radius:50%; background:#fff; display:block}
.ben__hieu h1{margin:0; font-size:var(--cho-16); font-weight:700; letter-spacing:-.02em; flex:1}
.ben__tim{padding:0 var(--k3) var(--k3)}
.ben__than{flex:1; padding:0 var(--k2) var(--k3)}
.ben__chan{padding:var(--k3); border-top:1px solid var(--vien)}

.ben__nhom{
  font-size:var(--cho-11); font-weight:600; text-transform:uppercase; letter-spacing:.05em;
  color:var(--chu-3); padding:var(--k4) var(--k3) var(--k1);
}
.muc{
  display:flex; align-items:center; gap:10px; width:100%; text-align:left;
  padding:8px 10px; border-radius:var(--bo-2); border:none; background:none;
  color:var(--chu-2); font:inherit; font-size:var(--cho-14); font-weight:500;
  cursor:pointer; margin-bottom:1px; text-decoration:none;
}
.muc:hover{background:var(--nen-chon)}
.muc--chon, .muc--chon:hover{background:var(--nen-chon); color:var(--chu-1); font-weight:600}
.muc__ten{flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.muc__dem{font-size:var(--cho-12); font-weight:600; color:var(--chu-2);
          background:var(--nen-app); border:1px solid var(--vien);
          border-radius:var(--bo-1); padding:0 6px; min-width:22px; text-align:center}
.muc .bt{color:var(--chu-3)}
.muc--chon .bt{color:var(--nhan)}

.vung{flex:1; min-width:0; display:flex; flex-direction:column; background:var(--nen-app)}
.thanh{
  border-bottom:1px solid var(--vien); background:var(--nen-app);
  padding:var(--k5) var(--k6); display:flex; align-items:center; gap:var(--k3); flex-wrap:wrap;
  position:sticky; top:0; z-index:5;
}
.thanh__day{flex:1; min-width:180px}
.thanh h2{margin:0; font-size:var(--cho-30); font-weight:700; letter-spacing:-.025em; line-height:1.2}
.thanh p{margin:3px 0 0; font-size:var(--cho-13); color:var(--chu-3)}
.than{padding:var(--k6); max-width:1120px; width:100%}

/* ===================================================================
   2. NÚT
   =================================================================== */
.nut{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  font:inherit; font-size:var(--cho-14); font-weight:600; cursor:pointer;
  padding:9px 14px; border-radius:var(--bo-2); border:1px solid transparent;
  background:none; color:var(--chu-2); white-space:nowrap;
}
.nut:disabled{opacity:.5; cursor:not-allowed}
.nut--chinh{background:var(--nhan); color:#fff; box-shadow:var(--bong-1)}
.nut--chinh:hover:not(:disabled){filter:brightness(1.08)}
.nut--phu{background:var(--nen-the); border-color:var(--vien-dam); color:var(--chu-2); box-shadow:var(--bong-1)}
.nut--phu:hover:not(:disabled){background:var(--nen-chim); color:var(--chu-1)}
.nut--nhe{color:var(--chu-2)}
.nut--nhe:hover:not(:disabled){background:var(--nen-chim); color:var(--chu-1)}
.nut--nguy{background:var(--nen-the); border-color:var(--canh-vien); color:var(--canh); box-shadow:var(--bong-1)}
.nut--nguy:hover:not(:disabled){background:var(--canh-nen)}
.nut--lien{color:var(--nhan); font-weight:600; padding:6px 8px}
.nut--lien:hover:not(:disabled){background:var(--nhan-nen)}
.nut--nho{padding:6px 10px; font-size:var(--cho-13)}
.nut--bieu-tuong{padding:5px; color:var(--chu-3); border-radius:var(--bo-1)}
.nut--bieu-tuong:hover:not(:disabled){color:var(--canh); background:var(--canh-nen)}

/* ===================================================================
   3. Ô NHẬP & TRƯỜNG
   =================================================================== */
.o-nhap{
  font:inherit; font-size:var(--cho-14); width:100%;
  border:1px solid var(--vien-dam); border-radius:var(--bo-2); padding:9px 12px;
  background:var(--nen-the); color:var(--chu-1); box-shadow:var(--bong-1);
}
.o-nhap::placeholder{color:var(--chu-3)}
.o-nhap:focus{outline:3px solid var(--nhan-nen); outline-offset:0; border-color:var(--nhan)}
.o-nhap:disabled{background:var(--nen-chim); color:var(--chu-3); cursor:not-allowed; box-shadow:none}
textarea.o-nhap{resize:vertical; min-height:66px}

/* Ô tìm kiếm có icon */
.o-tim{position:relative; display:flex; align-items:center}
.o-tim .bt{position:absolute; left:11px; color:var(--chu-3)}
.o-tim .o-nhap{padding-left:34px}

.truong{margin-bottom:var(--k4)}
.truong__nhan{display:block; font-size:var(--cho-13); font-weight:600; color:var(--chu-2); margin-bottom:6px}
.truong__giup{font-size:var(--cho-12); color:var(--chu-3); margin:6px 0 0}
.hang-truong{display:grid; grid-template-columns:repeat(auto-fit,minmax(158px,1fr)); gap:var(--k3)}

/* ===================================================================
   4. NHÃN TRẠNG THÁI & CHIP
   =================================================================== */
.the{
  display:inline-flex; align-items:center; gap:5px;
  font-size:var(--cho-12); font-weight:600; padding:2px 9px; border-radius:var(--bo-tron);
  background:var(--nen-chim); color:var(--chu-2); border:1px solid var(--vien); white-space:nowrap;
}
.the--nhan{background:var(--nhan-nen); color:var(--nhan); border-color:var(--nhan-vien)}
.the--ok  {background:var(--ok-nen);   color:var(--ok);   border-color:var(--ok-vien)}
.the--canh{background:var(--canh-nen); color:var(--canh); border-color:var(--canh-vien)}
.the--tre {background:var(--tre-nen);  color:var(--tre);  border-color:var(--tre-vien)}
.the--cho {background:var(--cho-nen);  color:var(--cho);  border-color:var(--cho-vien)}
.the--mo  {background:transparent; color:var(--chu-3)}
.the__cham{width:6px; height:6px; border-radius:50%; background:currentColor; flex:none}

.chip{
  font:inherit; font-size:var(--cho-13); font-weight:500; cursor:pointer;
  padding:6px 13px; border-radius:var(--bo-2);
  border:1px solid transparent; background:transparent; color:var(--chu-2);
}
.chip:hover{background:var(--nen-chim); color:var(--chu-1)}
.chip--chon, .chip--chon:hover{background:var(--nen-the); border-color:var(--vien);
  color:var(--chu-1); font-weight:600; box-shadow:var(--bong-1)}

/* ===================================================================
   5. DẢI CHỈ SỐ (vừa xem số liệu, vừa bấm để lọc)
   =================================================================== */
.dai-so{display:flex; align-items:center; flex-wrap:wrap; gap:2px; margin-bottom:var(--k4)}
.so-loc{
  display:inline-flex; align-items:baseline; gap:6px; font:inherit; cursor:pointer;
  border:1px solid transparent; background:none; color:var(--chu-2);
  padding:6px 12px; border-radius:var(--bo-2);
}
.so-loc:hover{background:var(--nen-chim)}
.so-loc__so{font-size:var(--cho-16); font-weight:700; line-height:1; letter-spacing:-.01em; color:var(--chu-2)}
.so-loc__ten{font-size:var(--cho-13); font-weight:500}
.so-loc--nhan .so-loc__so{color:var(--nhan)}
.so-loc--cho  .so-loc__so{color:var(--cho)}
.so-loc--canh .so-loc__so{color:var(--canh)}
/* Bằng 0 thì xám hẳn — không có gì đáng chú ý thì đừng tô màu */
.so-loc--khong .so-loc__so{color:var(--chu-3)}
/* Đang chọn phải thắng cả :hover, nếu không sẽ thành chữ trắng trên nền trắng */
.so-loc--chon, .so-loc--chon:hover{background:var(--nen-the); border-color:var(--vien);
  box-shadow:var(--bong-1); color:var(--chu-1); font-weight:600}

.bao-tre{
  display:inline-flex; align-items:center; gap:6px; margin-left:auto; cursor:pointer;
  background:var(--tre-nen); border:1px solid var(--tre-vien); color:var(--tre);
  border-radius:var(--bo-2); padding:6px 12px; font:inherit; font-size:var(--cho-13); font-weight:600;
}
.bao-tre:hover{filter:brightness(.98)}

/* ===================================================================
   6. THẺ & KHỐI
   =================================================================== */
.the-bai{
  background:var(--nen-the); border:1px solid var(--vien);
  border-radius:var(--bo-3); box-shadow:var(--bong-1); overflow:hidden;
}
.the-bai__dau{display:flex; align-items:flex-start; gap:var(--k3); padding:var(--k5) var(--k5) var(--k4)}
.the-bai__ten{margin:0; font-size:var(--cho-16); font-weight:600; letter-spacing:-.01em}
.the-bai__phu{margin:2px 0 0; font-size:var(--cho-13); color:var(--chu-3)}
.the-bai__chim{background:var(--nen-chim); border-top:1px solid var(--vien); padding:var(--k5)}

/* ===================================================================
   7. BẢNG DỮ LIỆU
   =================================================================== */
.bang{width:100%; border-collapse:collapse; font-size:var(--cho-14)}
.bang thead th{
  background:var(--nen-chim); border-bottom:1px solid var(--vien);
  text-align:left; font-size:var(--cho-12); font-weight:600; color:var(--chu-2);
  padding:10px var(--k4); white-space:nowrap;
}
.bang tbody td{border-bottom:1px solid var(--vien); padding:12px var(--k4); vertical-align:middle}
.bang tbody tr:last-child td{border-bottom:none}
.bang tbody tr.co-the:hover{background:var(--nen-chim); cursor:pointer}
.bang tbody tr.mo-ra > td{border-bottom:none}
.bang__ten{font-weight:500; color:var(--chu-1)}
.bang__mo{color:var(--chu-3)}
.bang td.chi-tiet{padding:0; background:var(--nen-chim); border-bottom:1px solid var(--vien)}
.bang td.chi-tiet > div{padding:var(--k5)}
.o-tich{width:16px; height:16px; accent-color:var(--nhan); cursor:pointer}
.o-tich:disabled{cursor:not-allowed}

/* Mũi tên ưu tiên — đọc nhanh bằng hình dạng, không chỉ bằng màu */
.uu-tien{display:inline-flex; align-items:center; gap:6px; font-weight:500; white-space:nowrap}
.uu-tien--gap {color:var(--canh)}
.uu-tien--cao {color:var(--tre)}
.uu-tien--thuong{color:var(--chu-2)}
.uu-tien--thap{color:var(--chu-3)}

/* ===================================================================
   7b. LỊCH THÁNG
   =================================================================== */
.lich{border:1px solid var(--vien); border-radius:var(--bo-3); overflow:hidden; background:var(--nen-the); box-shadow:var(--bong-1)}
.lich__thu{display:grid; grid-template-columns:repeat(7,1fr); background:var(--nen-chim); border-bottom:1px solid var(--vien)}
.lich__thu > div{padding:9px 6px; text-align:center; font-size:var(--cho-12); font-weight:600; color:var(--chu-2)}
.lich__luoi{display:grid; grid-template-columns:repeat(7,1fr)}
.o-ngay{min-height:98px; border-right:1px solid var(--vien); border-bottom:1px solid var(--vien);
        padding:6px; display:flex; flex-direction:column; gap:3px; overflow:hidden}
.o-ngay:nth-child(7n){border-right:none}
.o-ngay--ngoai{background:var(--nen-chim)}
.o-ngay--ngoai .o-ngay__so{color:var(--chu-3)}
.o-ngay--nay{background:var(--nhan-nen)}
.o-ngay--nay .o-ngay__so{color:var(--nhan); font-weight:700}
.o-ngay__so{font-size:var(--cho-12); font-weight:600; color:var(--chu-2)}
.viec-lich{font-size:var(--cho-11); font-weight:500; padding:2px 6px; border-radius:var(--bo-1);
  background:var(--nen-chim); border:1px solid var(--vien); color:var(--chu-2); cursor:pointer;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:left; font-family:inherit}
.viec-lich:hover{filter:brightness(.96)}
.viec-lich--gap {background:var(--canh-nen); border-color:var(--canh-vien); color:var(--canh)}
.viec-lich--tre {background:var(--tre-nen);  border-color:var(--tre-vien);  color:var(--tre)}
.viec-lich--xong{background:var(--ok-nen);   border-color:var(--ok-vien);   color:var(--ok); text-decoration:line-through}

/* ===================================================================
   7c. GHI CHÚ
   =================================================================== */
.ghi-nhanh{display:flex; gap:var(--k2); align-items:flex-start; margin-bottom:var(--k5)}
.ghi-nhanh textarea{min-height:44px}
.the-ghi{background:var(--nen-the); border:1px solid var(--vien); border-radius:var(--bo-3);
         padding:var(--k4); margin-bottom:var(--k2); box-shadow:var(--bong-1)}
.the-ghi--ghim{border-left:3px solid var(--nhan)}
.the-ghi--bo{opacity:.5}
.the-ghi__noi{white-space:pre-wrap; word-break:break-word; margin:0 0 var(--k3); font-size:var(--cho-14)}
.the-ghi__chan{display:flex; align-items:center; gap:var(--k2); flex-wrap:wrap}

/* ===================================================================
   8. DÒNG DANH SÁCH
   =================================================================== */
.dong{
  display:flex; align-items:center; gap:var(--k3);
  background:var(--nen-the); border:1px solid var(--vien);
  border-radius:var(--bo-2); padding:9px var(--k3); margin-bottom:6px;
}
.dong__day{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.dong a{color:var(--nhan); font-weight:600; text-decoration:none}
.dong a:hover{text-decoration:underline}

/* ===================================================================
   9. THÔNG BÁO & TRẠNG THÁI RỖNG
   =================================================================== */
.canh-bao{
  border-radius:var(--bo-2); padding:11px var(--k4); margin-bottom:var(--k4);
  font-size:var(--cho-13); font-weight:500;
  background:var(--canh-nen); color:var(--canh); border:1px solid var(--canh-vien);
}
.canh-bao--nhac{background:var(--nen-the); color:var(--chu-3); border:1px dashed var(--vien-dam)}
.canh-bao.an{display:none}

.rong{text-align:center; padding:60px var(--k5); color:var(--chu-3)}
.rong__to{font-size:var(--cho-16); font-weight:600; color:var(--chu-2); margin-bottom:var(--k1)}

.nhan-muc{
  font-size:var(--cho-11); font-weight:600; text-transform:uppercase; letter-spacing:.05em;
  color:var(--chu-3); margin:0 0 8px;
}

/* ===================================================================
   10. HỘP THOẠI
   =================================================================== */
dialog{border:none; border-radius:var(--bo-3); padding:0; width:min(580px,92vw); box-shadow:var(--bong-3)}
dialog::backdrop{background:rgba(16,24,40,.5)}
.hop{padding:var(--k6)}
.hop__ten{margin:0 0 var(--k1); font-size:var(--cho-20); font-weight:700; letter-spacing:-.02em}
.hop__phu{margin:0 0 var(--k5); font-size:var(--cho-13); color:var(--chu-3)}
.hop__chan{display:flex; gap:var(--k2); justify-content:flex-end; margin-top:var(--k5); flex-wrap:wrap}
.hop__chan--trai{justify-content:space-between; align-items:center}

/* ===================================================================
   11. TIỆN ÍCH
   =================================================================== */
.day{flex:1}
.hang-ngang{display:flex; align-items:center; gap:var(--k2); flex-wrap:wrap}
.chu-phu{font-size:var(--cho-12); color:var(--chu-3)}
.chu-phu b{color:var(--chu-2); font-weight:600}

/* ===================================================================
   12. MÀN HÌNH HẸP
   =================================================================== */
@media(max-width:900px){
  .khung{flex-direction:column}
  .ben{width:100%; height:auto; position:static; border-right:none; border-bottom:1px solid var(--vien)}
  .ben__tim,.ben__nhom,.ben__chan{display:none}
  .ben__than{display:flex; gap:var(--k1); padding:var(--k2); overflow-x:auto}
  .muc{width:auto; white-space:nowrap}
  .thanh,.than{padding:var(--k4)}
  .thanh h2{font-size:var(--cho-20)}
  .bang thead{display:none}
}