/* ═══════════════════════════════════════════════════════════════════════════
   erp-tcgd-tokens.css — TIÊU CHUẨN GIAO DIỆN STARDUCT, bản dùng trong ERP
   ───────────────────────────────────────────────────────────────────────────
   🔴 TỆP NÀY ĐƯỢC SINH RA. ĐỪNG SỬA BẰNG TAY.
      Nguồn : _dev/_tcgd.js  (khối HE)
      Sinh  : node _dev/gen_tcgd_tokens.js .
      Sinh lúc: 2026-09-15

   Sửa ở đây thì lần sinh sau mất sạch. Muốn đổi tiêu chuẩn ⇒ sửa _dev/_tcgd.js
   ⇒ chạy lại bộ sinh ⇒ chạy _tests/test_tcgd.js và _tests/test_xabang_tcgd.js.

   CÁCH DÙNG: đặt class "tcgd" lên gốc module. Không mang class thì module
   không nhận một biến nào — áp dần từng module, gỡ bằng cách xoá một class.

   Bỏ khỏi bản này: body · .khung · main · .ben · .muc · .top · .than · .dinh · .cay · .menu
   (vỏ của trang mockup đứng một mình; ERP đã có vỏ riêng — bê vào là hai lớp
   vỏ chồng nhau, đúng cái TCGD đã loại ở mục "Ba thứ CẤM đưa vào phần mềm")
   ═══════════════════════════════════════════════════════════════════════════ */

.tcgd{
  --nhan:#C2410C; --nhan-dam:#9A3412; --nhan-nhat:#FFF7ED; --nhan-vien:#FED7AA;
  --nhan-chu:#FFFFFF; --nhan-sang:#E8620F;
  --ok:#15803D; --ok-nen:#F0FDF4;
  --canh:#856600; --canh-nen:#FEFCE8;
  --chan:#BE123C; --chan-nen:#FFF1F2;
  --tin:#0369A1; --tin-nen:#F0F9FF;

  --nen:#F5F5F4; --the:#FFFFFF; --chim:#EFEEEC; --chim-2:#E7E5E4;
  --vien:#D8D5D2; --vien-dam:#C4C0BC;
  --chu:#1C1917; --chu-2:#44403C; --chu-3:#57534E; --chu-4:#78716C; --chu-5:#A8A29E;

  
  
  --mo:#FAFAF9;

  
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Text","Inter",system-ui,
         "Segoe UI",Roboto,sans-serif;
  --mono:ui-monospace,"SF Mono","JetBrains Mono","Cascadia Code",Consolas,monospace;

  
  --lo-xo:cubic-bezier(.32,.72,0,1);

  --bong:0 0 0 .5px rgba(28,25,23,.10), 0 1px 2px rgba(28,25,23,.05),
         0 8px 20px -10px rgba(28,25,23,.16);
  --bong-nho:0 0 0 .5px rgba(28,25,23,.12), 0 1px 1px rgba(28,25,23,.06);
}
:root[data-theme="dark"] .tcgd{
  --nhan:#FB923C; --nhan-dam:#FDBA74; --nhan-nhat:#2A1508; --nhan-vien:#4A240B;
  --nhan-chu:#1C1917; --nhan-sang:#FDBA74;
  --ok:#4ADE80; --ok-nen:#0D2617;
  --canh:#F2E75C; --canh-nen:#1F1C04;
  --chan:#FB7185; --chan-nen:#2A0D14;
  --tin:#7DD3FC; --tin-nen:#0A1F2E;

  --nen:#1C1917; --the:#292524; --chim:#332E2B; --chim-2:#44403C;
  --vien:#443E3A; --vien-dam:#56504B;
  --chu:#FAFAF9; --chu-2:#D6D3D1; --chu-3:#B5AFAA; --chu-4:#9A928C; --chu-5:#78716C;
  --mo:#232020;

  --bong:0 0 0 .5px rgba(0,0,0,.6), 0 1px 2px rgba(0,0,0,.4),
         0 8px 20px -10px rgba(0,0,0,.6);
  --bong-nho:0 0 0 .5px rgba(0,0,0,.6), 0 1px 1px rgba(0,0,0,.4);
}
.tcgd .t-nho{font-size:11px;line-height:14px;font-weight:500;letter-spacing:.06em}
.tcgd .t-phu{font-size:12px;line-height:16px;font-weight:400;color:var(--chu-4)}
.tcgd .t-thuong{font-size:13px;line-height:17px;font-weight:400}
.tcgd .t-nhan{font-size:13px;line-height:17px;font-weight:600}
.tcgd .t-muc{font-size:15px;line-height:20px;font-weight:600;letter-spacing:-.006em}
.tcgd .t-trang{font-size:22px;line-height:28px;font-weight:700;letter-spacing:-.021em}
.tcgd .t-so{font-size:22px;line-height:26px;font-weight:700;letter-spacing:-.021em;
          font-variant-numeric:tabular-nums}
.tcgd .t-nhan-nhom{font-size:11px;line-height:14px;font-weight:600;letter-spacing:.06em;
          text-transform:uppercase;color:var(--chu-5)}
.tcgd .mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.tcgd *{box-sizing:border-box}
.tcgd button,
.tcgd input,
.tcgd select,
.tcgd textarea{font-family:inherit}
.tcgd .the{background:var(--the);border-radius:10px;box-shadow:var(--bong);overflow:hidden}
.tcgd .the-d{padding:12px 16px 8px;display:flex;align-items:flex-start;gap:12px}
.tcgd .the-d .sp{flex:1;min-width:0}
.tcgd .the-n{padding:0 16px 16px}
.tcgd .chim{background:var(--chim);border-radius:8px}
.tcgd *::-webkit-scrollbar{width:12px;height:12px}
.tcgd *::-webkit-scrollbar-thumb{background:var(--vien-dam);border-radius:8px;
  border:4px solid transparent;background-clip:content-box}
.tcgd *::-webkit-scrollbar-thumb:hover{background:var(--chu-5);background-clip:content-box}
.tcgd *::-webkit-scrollbar-track{background:transparent}
.tcgd .nut{display:inline-flex;align-items:center;justify-content:center;gap:4px;height:28px;
  padding:0 12px;border:0;border-radius:6px;background:var(--the);color:var(--chu);
  font-size:13px;font-weight:500;line-height:17px;cursor:pointer;white-space:nowrap;
  box-shadow:var(--bong-nho);transition:background .2s var(--lo-xo),transform .2s var(--lo-xo)}
.tcgd .nut:hover{background:var(--chim)}
.tcgd .nut:active{transform:scale(.97)}
.tcgd .nut.chinh{background:linear-gradient(180deg,var(--nhan-sang),var(--nhan));
  color:var(--nhan-chu);
  box-shadow:0 1px 3px color-mix(in srgb,var(--nhan) 42%,transparent)}
.tcgd .nut.chinh:hover{background:linear-gradient(180deg,var(--nhan),var(--nhan-dam))}
.tcgd .nut.trong{background:transparent;box-shadow:none}
.tcgd .nut.trong:hover{background:var(--chim)}
.tcgd .nut.nho{height:24px;padding:0 8px;font-size:12px}
.tcgd .nut.lon{height:32px;padding:0 16px}
.tcgd .nut:focus-visible{outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--nhan) 45%,transparent)}
.tcgd .o{height:28px;padding:0 8px;border:0;border-radius:6px;background:var(--the);
  box-shadow:inset 0 0 0 .5px var(--vien-dam);
  font-size:13px;line-height:17px;color:var(--chu);outline:none;width:100%;
  transition:box-shadow .2s var(--lo-xo)}
.tcgd .o::placeholder{color:var(--chu-5)}
.tcgd .o:focus{box-shadow:inset 0 0 0 .5px var(--nhan),0 0 0 3px color-mix(in srgb,var(--nhan) 40%,transparent)}
.tcgd .o.cao{height:32px}
.tcgd textarea.o{height:auto;padding:6px 8px;resize:vertical;min-height:72px;line-height:17px}
.tcgd select.o{appearance:none;-webkit-appearance:none;padding-right:24px;cursor:pointer;
  
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='16' fill='none' stroke='%23ffffff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 6.5 5 3.5 8 6.5M2 9.5 5 12.5 8 9.5'/%3E%3C/svg%3E"),linear-gradient(var(--nhan),var(--nhan));
  background-repeat:no-repeat,no-repeat;
  background-position:right 5px center,right 0 center;
  background-size:10px 16px,20px 100%}
.tcgd .vien{display:inline-flex;align-items:center;gap:4px;height:18px;padding:0 6px;
  border-radius:4px;font-size:11px;font-weight:500;line-height:14px;white-space:nowrap;
  background:var(--chim);color:var(--chu-3)}
.tcgd .vien i{width:5px;height:5px;border-radius:4px;background:currentColor;flex:none}
.tcgd .vien.ok{background:var(--ok-nen);color:var(--ok)}
.tcgd .vien.canh{background:var(--canh-nen);color:var(--canh)}
.tcgd .vien.lam{background:var(--tin-nen);color:var(--tin)}
.tcgd .vien.chan{background:var(--chan-nen);color:var(--chan)}
.tcgd .vien.nhan{background:var(--nhan-nhat);color:var(--nhan)}
.tcgd .the-ma{display:inline-flex;align-items:center;height:18px;padding:0 6px;border-radius:4px;
  background:var(--nhan-nhat);color:var(--nhan);font-family:var(--mono);font-weight:700;
  font-size:11px;line-height:14px}
.tcgd table.b{width:100%;border-collapse:collapse;font-size:13px;line-height:17px}
.tcgd table.b th{height:30px;padding:0 8px;text-align:left;font-size:11px;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;color:var(--chu-5);
  box-shadow:inset 0 -.5px 0 var(--vien);white-space:nowrap;
  position:sticky;top:0;z-index:2;background:var(--the)}
.tcgd table.b td{padding:6px 8px;border:0;vertical-align:middle}
.tcgd table.b tbody tr{cursor:default;transition:background .15s var(--lo-xo)}
.tcgd table.b tbody tr{box-shadow:inset 0 -.5px 0 var(--vien)}
.tcgd table.b tbody tr:last-child{box-shadow:none}
.tcgd table.b tbody tr:hover{background:var(--chim)}
.tcgd table.b tbody tr[aria-selected="true"]{background:var(--nhan-nhat)}
.tcgd table.b tbody tr[aria-selected="true"] td:first-child{box-shadow:inset 3px 0 0 var(--nhan)}
.tcgd table.b .p{text-align:right;font-variant-numeric:tabular-nums}
.tcgd table.b .cat{max-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tcgd .dong{display:flex;flex-direction:column;border-radius:8px;overflow:hidden}
.tcgd .dong .d{display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:6px 8px;font-size:13px;line-height:17px}
.tcgd .dong .d:nth-child(odd){background:color-mix(in srgb,var(--chim) 50%,transparent)}
.tcgd .dong .d>b{font-weight:400;color:var(--chu-4)}
.tcgd .dong .d>span{text-align:right;font-variant-numeric:tabular-nums}
.tcgd .tab{display:inline-flex;padding:2px;background:var(--chim);border-radius:8px;gap:2px;
  flex-wrap:wrap;box-shadow:inset 0 0 0 .5px var(--vien)}
.tcgd .tab button{height:24px;padding:0 10px;border:0;border-radius:6px;background:transparent;
  font-size:12px;line-height:16px;font-weight:500;color:var(--chu-2);cursor:pointer;
  white-space:nowrap;transition:background .2s var(--lo-xo),color .2s var(--lo-xo)}
.tcgd .tab button:hover{color:var(--chu)}
.tcgd .tab button[aria-pressed="true"]{background:var(--the);color:var(--chu);
  box-shadow:0 0 0 .5px rgba(28,25,23,.10),0 1px 2px rgba(28,25,23,.12)}
.tcgd .k-danh-sach{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:12px;align-items:start}
.tcgd .k-ho-so{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:12px;align-items:start}
.tcgd .k-bieu-mau{max-width:600px;width:100%;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.tcgd .cot{display:flex;flex-direction:column;gap:12px;min-width:0}
.tcgd .oso{padding:12px 16px 16px;border-radius:10px;display:flex;flex-direction:column;gap:2px;
  background:var(--the);box-shadow:var(--bong-nho)}
.tcgd .oso-d{display:flex;align-items:center;gap:8px;margin-bottom:2px}
.tcgd .oso .t-phu{color:var(--chu-3)}
.tcgd .sq{width:30px;height:30px;flex:none;border-radius:8px;display:grid;place-items:center;
  background:var(--nhan-nhat);color:var(--nhan)}
.tcgd .truong{display:flex;flex-direction:column;gap:4px}
.tcgd .truong>label{font-size:12px;line-height:16px;color:var(--chu-4)}
.tcgd .truong .gt{font-size:11px;line-height:14px;color:var(--chu-5)}
.tcgd .nhom-truong{display:flex;flex-direction:column;gap:16px}
.tcgd .luoi-truong{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 12px}

@media (max-width:900px){
.tcgd .k-danh-sach,
.tcgd .k-ho-so,
.tcgd .luoi-truong{grid-template-columns:1fr}
}

@media (prefers-reduced-motion:reduce){
.tcgd *{transition:none!important}
}