/* ══════════════════════════════════════════════════════════════════════════════════════════════
 * 🎨 GIAO DIỆN MỚI — CHẠY SONG SONG VỚI GIAO DIỆN CŨ. Anh Thắng 29/09/2026: *"nếu chạy 2 giao diện
 * song được không, kế toán thì muốn giao diện cũ, anh thì muốn giao diện mới"* → *"ok, em làm đi"*.
 *
 * 🔴 MỌI LUẬT Ở ĐÂY PHẢI NẰM DƯỚI `body.gd-moi`. Tệp này tải cho MỌI người (kể cả người dùng giao
 *    diện cũ); một luật lọt ra ngoài phạm vi là giao diện cũ của kế toán đổi theo mà không ai
 *    bấm gì. Ngoại lệ duy nhất: `.gdNhom` / `.gd-chi-moi` / `.gdBrand` / `.gdGlNgan` — phần tử chỉ
 *    giao diện mới có, mặc định ẩn. Test `kiem-giao-dien-song-song.php` soát điều này.
 * ⚠️ Chọn giao diện theo TÀI KHOẢN (máy chủ `VHCP_Cfg::giao_dien_cua`), không theo máy: kế toán
 *    đăng nhập ở máy của anh vẫn ra giao diện cũ của họ.
 * ⚠️ Chỉ đổi ÁO (màu, khung, bố cục thanh tab). Không ẩn nút, không đổi quyền — cùng một trang,
 *    cùng một mã JS; hai giao diện lệch chức năng là hai app, và sớm muộn chỉ một cái được sửa.
 * Màu biểu đồ: bộ đã soát ở `scripts/validate_palette.js` — #2a78d6 #eb6834 #1baf7a #eda100
 *    #e87ba4 #008300 · trạng thái tốt #0ca30c · cảnh báo #fab219 · vượt #d03b3b.
 * ══════════════════════════════════════════════════════════════════════════════════════════════ */
.gdNhom, .gd-chi-moi, .gdBrand, .gdGlNgan{ display:none }

body.gd-moi{
  --nen:#f4f5f7; --the:#ffffff; --nen-2:#f1f3f6;
  --vien:#e3e4e8; --vien-dam:#d4d6dd;
  --chu:#1b1f2a; --chu-dam:#1e2a5e; --chu-mo:#6b7280;
  --nhan:#2a78d6; --nhan-dam:#1f5fae; --nhan-nhat:#e8f0fb;
  --bo-the:12px; --bo-nut:8px; --bo-o:8px;
  --bong:none;
  --gd-rong:224px;
  background:var(--nen);
}
body.gd-moi .gd-chi-moi{ display:block }

/* ── ĐẦU TRANG — anh Thắng 29/09/2026 (ảnh đầu trang): *"Đầu trang có gì đó vẫn đang rất xấu, xem trên github có các mẫu nào
   khác không. Thêm logo công ty vào nhé"*. Theo khuôn đầu trang của Tabler · shadcn-admin · TailAdmin: logo + tên app ở ĐẦU MENU
   TRÁI (`.gdBrand`); thanh trên mỏng = dòng dẫn nhỏ (tên app › nhóm · phiên bản) + tên trang to (`#gdTrang`, JS `gdTrangVe`);
   nút bên phải PHẲNG (không viền); người dùng là một viên thuốc. Dải giả lập vai trò gọn một dòng (`.gdGlNgan`) — VẪN nói
   giới hạn "chỉ đổi màn hình, không đổi quyền" (chốt 22/09 ở `#glBar`), bản đủ nằm ở chú thích rê chuột.
   ⚠️ `.top h1` (tên trang + phiên bản) CHỈ ẨN, không bỏ: JS vẫn điền vào đó, `gdTrangVe` đọc lại từ đó. */
body.gd-moi .top{ background:#fff; color:var(--chu); border-bottom:1px solid var(--vien); padding-top:9px; padding-bottom:9px; min-height:60px }
body.gd-moi .top h1, body.gd-moi .top .sub{ display:none }
body.gd-moi #gdTrang .gdDan{ font-size:12px; color:var(--chu-mo); font-weight:500; display:flex; align-items:center; gap:2px; flex-wrap:wrap }
body.gd-moi #gdTrang .gdDan i{ font-style:normal; margin:0 5px; color:#b6bcc8 }
body.gd-moi #gdTrang .gdDan em{ font-style:normal; font-size:11px; font-weight:600; background:#eef1f6; color:#5b6477; border-radius:20px; padding:1px 8px; margin-left:8px }
body.gd-moi #gdTrang .gdTen{ font-size:20px; font-weight:800; color:var(--chu-dam); line-height:1.25; letter-spacing:-.2px }
body.gd-moi .top .btn{ background:transparent; box-shadow:none; color:#4b5363; padding:7px 10px; border-radius:8px; font-weight:500 }
body.gd-moi .top .btn:hover{ background:#f1f3f6; color:var(--chu-dam) }
body.gd-moi .top #btnLogout{ color:#b42323 }
body.gd-moi .top #btnLogout:hover{ background:#fdecec }
body.gd-moi #userChip{ background:#f1f3f6; border-radius:20px; padding:5px 12px; color:#374151 !important; font-weight:600; font-size:12.5px !important }
/* dải giả lập vai trò: một dòng */
body.gd-moi #glBar{ background:#fffbeb !important; border-bottom:1px solid #fde68a !important; padding:6px 22px !important }
body.gd-moi #glBar > div:nth-child(2){ display:none }
body.gd-moi #glBar .gdGlNgan{ display:inline; font-size:11.5px; color:#92400e; font-weight:500 }

/* ── nút ───────────────────────────────────────────────────────────────────── */
body.gd-moi .b-p{ background:var(--nhan); color:#fff }
body.gd-moi .b-p:hover{ background:var(--nhan-dam) }
body.gd-moi .b-x{ background:#fff; color:var(--chu); box-shadow:inset 0 0 0 1px var(--vien) }
body.gd-moi .b-x:hover{ background:var(--nen-2) }
body.gd-moi .b-s{ background:var(--nhan-nhat); color:var(--nhan-dam) }
body.gd-moi select:focus, body.gd-moi input:focus, body.gd-moi textarea:focus{ border-color:var(--nhan); box-shadow:0 0 0 3px rgba(42,120,214,.15) }

/* ── thẻ, bảng ─────────────────────────────────────────────────────────────── */
body.gd-moi .card{ border-color:var(--vien); box-shadow:none }
body.gd-moi .ch{ border-bottom-color:var(--vien); padding:12px 16px }
body.gd-moi .ch h2{ font-size:14.5px; color:var(--chu-dam) }
body.gd-moi th{ color:var(--chu-mo); font-weight:600; font-size:12px; background:#fafbfc }
body.gd-moi td{ border-color:#eef0f3 }
body.gd-moi details > summary{ background:#fafbfc !important }

/* ── ô KPI đầu trang Tổng quan (`#gdKpi`, JS `gdKpiVe`) ─────────────────────── */
body.gd-moi #gdKpi{ margin-bottom:16px }
body.gd-moi #gdKpi:empty{ display:none }
body.gd-moi .gdKpi{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px }
body.gd-moi .gdO{ background:#fff; border:1px solid var(--vien); border-radius:12px; padding:14px 16px; min-width:0 }
body.gd-moi .gdO .gdT{ font-size:12px; color:var(--chu-mo); font-weight:600 }
body.gd-moi .gdO .gdS{ font-size:24px; font-weight:800; color:var(--chu-dam); margin-top:2px; font-variant-numeric:tabular-nums; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
body.gd-moi .gdO .gdP{ font-size:12px; color:var(--chu-mo); margin-top:2px }
body.gd-moi .gdChip{ display:inline-block; padding:1px 8px; border-radius:20px; font-size:11.5px; font-weight:700 }
body.gd-moi .gdChip.tot{ background:#e3f5e3; color:#0a7a0a }
body.gd-moi .gdChip.canh{ background:#fff4d6; color:#8a5a00 }
body.gd-moi .gdChip.vuot{ background:#fbe4e4; color:#b42323 }
body.gd-moi .gdDo{ height:8px; background:#eceef2; border-radius:4px; overflow:hidden; margin-top:8px }
body.gd-moi .gdDo > i{ display:block; height:100% }
@media (max-width:900px){ body.gd-moi .gdKpi{ grid-template-columns:repeat(2,minmax(0,1fr)) } }

/* ── MENU BÊN TRÁI (màn ≥ 900px) ──────────────────────────────────────────────
   `#tabbar` vẫn là đúng hàng nút cũ (cùng id, cùng JS ẩn/hiện) — chỉ dựng đứng lên thành cột.
   Máy hẹp giữ hàng cuộn ngang như cũ: cột 224px trên điện thoại là ăn mất nửa màn. */
@media (min-width:900px){
  body.gd-moi{ padding-left:var(--gd-rong) }
  body.gd-moi #tabbar{
    position:fixed; left:0; top:0; bottom:0; width:var(--gd-rong); z-index:50;
    flex-direction:column; flex-wrap:nowrap; align-items:stretch; gap:2px !important;
    padding:14px 12px 20px; overflow-y:auto; background:#1e2a5e; border:0;
  }
  /* logo K&H (biểu tượng cánh quạt, tách từ đúng tệp logo gốc — `esp32_ota_updater/logo_khh.h` → `assets/img/logo-khh-sang.png`) */
  body.gd-moi #tabbar .gdBrand{ display:flex; align-items:center; gap:10px; padding:4px 8px 16px; margin:0 0 6px; border-bottom:1px solid rgba(255,255,255,.1) }
  body.gd-moi #tabbar .gdBrand .gdLogo{ flex:0 0 auto; width:28px; height:40px; background:url(../img/logo-khh-sang.png) center/contain no-repeat }
  body.gd-moi #tabbar .gdBrand b{ display:block; color:#e2c05a; font:700 17px/1.1 Georgia,'Times New Roman',serif; letter-spacing:1.5px }
  body.gd-moi #tabbar .gdBrand span{ display:block; color:#aab4dc; font-size:11.5px; font-weight:600; margin-top:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:150px }
  body.gd-moi #tabbar .gdNhom{ display:block; color:#8f9bc7; font-size:10.5px; font-weight:700; letter-spacing:.6px; text-transform:uppercase; padding:12px 10px 4px }
  body.gd-moi #tabbar .gdNhom.rong{ display:none }
  body.gd-moi #tabbar .btn{ text-align:left; background:transparent; color:#d5dbf2; box-shadow:none; border-radius:8px; padding:8px 10px; font-size:13.5px }
  body.gd-moi #tabbar .btn:hover{ background:rgba(255,255,255,.08); color:#fff }
  body.gd-moi #tabbar .btn.b-p{ background:#fff; color:#1e2a5e; font-weight:700 }
  body.gd-moi #tabbar .tabMenu{ display:flex }
  body.gd-moi #tabbar .tabMenu > .btn{ flex:1; border-radius:8px 0 0 8px }
  body.gd-moi #tabbar .tabMenuNut{ background:transparent; color:#8f9bc7; border-radius:0 8px 8px 0 }
  body.gd-moi #tabbar .tabMenuNut:hover{ background:rgba(255,255,255,.08); color:#fff }
  body.gd-moi #tabbar .tabMenu > .btn.b-p + .tabMenuNut{ background:#fff; color:#1e2a5e }
  body.gd-moi .top, body.gd-moi .bar:not(#tabbar){ padding-left:22px; padding-right:22px }
}

/* ── BƯỚC 3: CÁC TRANG CÒN LẠI (Đơn chi phí · Duyệt · Quyết toán · Xuất MISA · Cấu hình) ─────────
   anh Thắng 29/09/2026 *"ok, em làm tiếp đi"*. Vẫn chỉ đổi áo — không ẩn nút, không đổi thứ tự. */
/* thanh trên: xem khối ĐẦU TRANG ở trên */
body.gd-moi #gdTrang:empty{ display:none }

/* thanh khối: nút dạng phân đoạn */
body.gd-moi #khoiBar{ background:#fff; border:1px solid var(--vien); border-radius:10px; padding:3px; gap:2px !important }
body.gd-moi #khoiBar .btn{ box-shadow:none; border-radius:7px }
body.gd-moi #khoiBar .btn:not(.b-p):not(.b-g){ background:transparent }
body.gd-moi #khoiBar .btn.b-g{ background:var(--nhan); color:#fff }

/* dải luồng làm việc: viền xám, bước có đơn nền xanh nhạt */
body.gd-moi .luongThe{ border-color:var(--vien) !important; border-radius:10px }
body.gd-moi .luongThe[data-co-don]{ border-color:var(--nhan) !important; background:#f3f8fe !important }
body.gd-moi .luongThe:not([disabled]):hover{ border-color:var(--nhan-dam) !important }
/* bước của TRANG ĐANG MỞ — tô đặc màu nhấn, chữ trắng (08/10/2026: "bấm tab tính năng, thanh trang trên không nhảy màu theo"); đứng SAU luật data-co-don để thắng nó */
body.gd-moi .luongThe[data-dang]{ background:var(--nhan) !important; border-color:var(--nhan-dam) !important; box-shadow:0 2px 8px rgba(42,120,214,.28) }
body.gd-moi .luongThe[data-dang] span{ color:#fff !important }
body.gd-moi .luongMuiTen{ color:#c3c7d0 }

/* bảng: hàng rê chuột, số canh cột, dải nhóm khối thôi đen kịt */
body.gd-moi tbody tr:hover > td{ background-color:#f8fafd }
body.gd-moi td.money{ font-variant-numeric:tabular-nums }
body.gd-moi tr.khoiNgan > td{ background:#eaf1fb !important; color:var(--chu-dam) !important; border-top:1px solid #d3e2f5 }
body.gd-moi tr.khoiNgan > td span{ color:var(--chu-mo) !important }

/* nút xoá vĩnh viễn của Admin: vẫn khác nút xoá thường, nhưng là viền đỏ chứ không khối đỏ sậm */
body.gd-moi .btn.b-d{ background:#fdecec; color:#b42323 }
body.gd-moi .btn.b-d[style*="7f1d1d"], body.gd-moi .btn.b-d[style*="127, 29, 29"]{ background:#fff !important; color:#b42323; box-shadow:inset 0 0 0 1.5px #d03b3b }

/* thẻ gập (Cấu hình, …): mũi tên to, canh giữa dòng */
body.gd-moi .card.xo > .ch h2::before{ content:'›'; width:18px; font-size:18px; line-height:1; color:var(--chu-mo); vertical-align:-1px; transform:rotate(90deg); text-align:center }
body.gd-moi .card.xo.dong > .ch h2::before{ transform:none }
body.gd-moi .card.xo > .ch:hover{ background:#fafbfc }

/* ô rỗng */
body.gd-moi .empty{ color:var(--chu-mo) }

/* tab khối trang Duyệt — màu nhấn giao diện mới */
body.gd-moi .duyetTabKhoi{ border-bottom-color:var(--vien) }
body.gd-moi .duyetTabKhoi .dvTab.dang{ color:var(--nhan) !important; border-color:var(--nhan) !important; border-bottom-color:#fff !important; background:#fff !important }