/* ===== WEB Nội Bộ Thành Phát · giao diện dùng chung =====
   Hệ thiết kế theo playstation/DESIGN.md.

   Cách áp cho một app nhập liệu (khác trang tiếp thị của PlayStation):
     · PlayStation có 3 chế độ nền: ĐEN (kể chuyện sản phẩm) · TRẮNG (trang tiện
       ích: hỗ trợ, danh sách game) · XANH PS (khoảnh khắc hành động).
       App này là trang tiện ích → dùng CHẾ ĐỘ NỀN SÁNG cho vùng dữ liệu,
       để dành nền ĐEN cho thanh đầu trang và nền XANH PS cho nút chính.
     · Bo góc theo nhịp 0 / 4 / 8 / viên thuốc:
         0px  bề mặt cấu trúc (bảng, thanh công cụ, dải)
         4px  ô nhập
         8px  thẻ
         tròn hết cỡ: mọi nút bấm
     · Chữ: tiêu đề lớn nét MẢNH 300 + giãn chữ dương; nút nét ĐẬM 700.
       Đây là tương phản đặc trưng của PlayStation.
     · Cam thương mại #d53b00 chỉ dành cho hành động không hoàn tác được.

   ⚠️ Muốn quay lại giao diện Miro: cp ../_backup_giaodien/chung.css.miro chung.css
                                    rồi chạy ./deploy.command                    */

/* PlayStation SST là font riêng, không dùng được. playstation/DESIGN.md chỉ định
   sẵn bản thay thế: Roboto Light 300 cho tiêu đề, Inter 400/500/600 cho phần còn
   lại. Nạp Roboto vì Arial/Helvetica KHÔNG có nét 300 — thiếu nó là mất hẳn chất
   "thoáng, biên tập" vốn là đặc trưng của hệ này. */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');

:root{
  /* --- xanh PlayStation: nút chính, liên kết, dải hành động --- */
  --ps:#0070d1;          --ps-nhan:#0064b7;     --ps-dam:#004d8d;
  --ps-sang:#53b1ff;     --ps-nen:#e8f2fc;
  /* --- cam thương mại: CHỈ cho việc không hoàn tác được --- */
  --cam:#d53b00;         --cam-nhan:#aa2f00;    --cam-nen:#fdeee9;
  /* --- nhấn khác --- */
  --vang-d:#ffce21;      --vang-g:#f5a623;      --vang-c:#ee8e00;
  --canh-bao:#c81b3a;    --canh-bao-nen:#fdecef;

  /* --- bề mặt sáng --- */
  --giay:#ffffff;        --nen:#f3f3f3;         --the-nen:#f5f7fa;
  --loc-nen:rgba(245,247,250,.55);
  /* --- bề mặt tối (thanh đầu trang, dải nhấn) --- */
  --den:#000000;         --den-cao:#121314;     --den-the:#181818;

  /* --- chữ --- */
  --muc:#000000;         --muc-sau:#121314;     --than:#1f2024;
  --than-nhat:rgba(0,0,0,.6);
  --xam:#6b6b6b;         --thep:#6b6b6b;        --da:#cccccc;   --nhat:#cccccc;
  --tren-den:#ffffff;    --tren-den-mo:#cccccc;

  /* --- đường kẻ --- */
  --vien:#e2e2e2;        --vien-mo:#f3f3f3;     --vien-dam:#cccccc;

  /* --- bóng đổ: hệ này chạy PHẲNG, gần như không dùng --- */
  --bong-1:0 1px 2px rgba(0,0,0,.05);
  --bong-2:0 2px 8px rgba(0,0,0,.07);
  --bong-3:0 8px 24px rgba(0,0,0,.10);
  --bong-4:0 16px 48px rgba(0,0,0,.22);

  /* --- bo góc: 0 / 4 / 8 / viên thuốc --- */
  --bo-xs:4px; --bo-sm:4px; --bo-md:4px; --bo-lg:8px; --bo-xl:8px; --bo-xxl:8px;
  --bo-the:8px; --bo-tron:9999px; --bo-phang:0;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:"PlayStation SST",sst,Roboto,Inter,"Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size:16px;line-height:1.5;font-weight:400;color:var(--muc);background:var(--nen);
  -webkit-font-smoothing:antialiased;
}
a{color:var(--ps-nhan)}
a:hover{text-decoration:underline}
/* Tiêu đề nét MẢNH 300 + giãn chữ dương — chữ ký của hệ PlayStation */
h1,h2,h3{margin:0 0 .5rem;font-weight:300;line-height:1.25}
h1{font-size:2.25rem;letter-spacing:.1px}
h2{font-size:1.5rem;letter-spacing:.1px}
h3{font-size:1.25rem;letter-spacing:.1px}

/* ---- thanh đầu trang: dải ĐEN toàn chiều ngang, bo góc 0 ---- */
.dau{
  background:var(--den);color:var(--tren-den);
  padding:0 1.5rem;min-height:64px;
  display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap;
  border-radius:var(--bo-phang);position:sticky;top:0;z-index:50;
}
.dau .ten{
  font-weight:500;font-size:1.125rem;letter-spacing:.4px;
  display:inline-flex;align-items:center;gap:.6rem;
}
.dau .ten::before{
  content:"📦";display:grid;place-items:center;
  width:34px;height:34px;border-radius:var(--bo-lg);
  background:var(--ps);font-size:17px;
}
.dau a{color:var(--tren-den-mo);font-size:1rem;font-weight:500;letter-spacing:.4px}
.dau a:hover{color:var(--tren-den);text-decoration:none}
.dau .day{margin-left:auto;display:flex;align-items:center;gap:1rem;font-size:.875rem}
.dau .toi{color:var(--tren-den-mo)}
/* Nút trên dải đen phải đổi sang biến thể "secondary-dark" của DESIGN.md,
   nếu không thì chữ đen nằm trên nền đen -> vô hình. */
.dau button{color:var(--tren-den);border-color:rgba(229,229,229,.35);background:transparent}
.dau button:hover:not(:disabled){background:rgba(255,255,255,.14);border-color:var(--tren-den)}

.boc{max-width:1500px;margin:0 auto;padding:1.5rem}

/* ---- thẻ: nền xanh-xám lạnh, bo 8px, không viền ---- */
.the{
  background:var(--the-nen);border:0;border-radius:var(--bo-the);
  padding:1.5rem;margin-bottom:1.25rem;
}
.the.mong{padding:1rem 1.25rem}

/* ---- nút: viên thuốc, chữ ĐẬM 700, giãn chữ ---- */
button,.nut{
  font:inherit;font-size:.875rem;font-weight:700;line-height:1.25;letter-spacing:.324px;
  border:1px solid var(--vien-dam);border-radius:var(--bo-tron);
  padding:.65rem 1.25rem;cursor:pointer;
  background:transparent;color:var(--muc);
  transition:background .12s,color .12s,border-color .12s;white-space:nowrap;
}
button:hover:not(:disabled){background:rgba(0,0,0,.04)}
button:active:not(:disabled){background:rgba(0,0,0,.08)}
button:disabled{background:var(--nen);color:var(--da);border-color:transparent;cursor:not-allowed}

/* Nút chính: XANH PLAYSTATION — dùng cho mọi hành động chính */
.n-chinh{background:var(--ps);color:#fff;border-color:var(--ps)}
.n-chinh:hover:not(:disabled){background:var(--ps-nhan);border-color:var(--ps-nhan)}
.n-chinh:active:not(:disabled){background:var(--ps-dam);border-color:var(--ps-dam)}

/* Nút cam thương mại: CHỈ cho hành động không hoàn tác được */
.n-cam{background:var(--cam);color:#fff;border-color:var(--cam)}
.n-cam:hover:not(:disabled){background:var(--cam-nhan);border-color:var(--cam-nhan)}

.n-den{background:var(--den);color:#fff;border-color:var(--den)}
.n-den:hover:not(:disabled){background:var(--than)}

.n-xanh{background:var(--ps);color:#fff;border-color:var(--ps)}
.n-xanh:hover:not(:disabled){background:var(--ps-nhan);border-color:var(--ps-nhan)}

.n-do{background:transparent;color:var(--cam);border-color:var(--cam)}
.n-do:hover:not(:disabled){background:var(--cam);color:#fff}

.n-vang{background:linear-gradient(90deg,var(--vang-d),var(--vang-c));color:var(--muc);border:0}

.n-nho{padding:.3rem .75rem;font-size:.75rem;letter-spacing:.3px}

/* ---- biểu mẫu: ô nhập cao 48px, bo 4px, focus viền xanh PS 2px ---- */
label{display:block;font-size:.875rem;font-weight:500;color:var(--than-nhat);margin-bottom:.35rem;letter-spacing:.1px}
input,select,textarea{
  font:inherit;font-size:1rem;width:100%;
  padding:.75rem 1rem;min-height:48px;
  border:1px solid var(--vien-dam);border-radius:var(--bo-sm);
  background:var(--giay);color:var(--muc);
}
input::placeholder,textarea::placeholder{color:var(--xam)}
input:focus,select:focus,textarea:focus{
  outline:none;border:2px solid var(--ps);padding:calc(.75rem - 1px) calc(1rem - 1px);
}
textarea{min-height:96px;resize:vertical;line-height:1.5}
input[type=checkbox]{width:auto;min-height:0;margin-right:.45rem;accent-color:var(--ps)}
input:disabled,select:disabled,textarea:disabled{background:var(--nen);color:var(--xam)}

.luoi{display:grid;gap:1rem}
.c2{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.c3{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.c4{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}

fieldset{border:1px solid var(--vien);border-radius:var(--bo-lg);padding:1.25rem;margin:0 0 1.25rem}
legend{font-size:.75rem;font-weight:500;letter-spacing:.3px;color:var(--xam);padding:0 .5rem}

/* ---- THANH CÔNG CỤ ---- */
.thanh-cc{display:flex;align-items:center;gap:.45rem;flex-wrap:wrap}
.thanh-cc .o-tim{flex:1 1 0;min-width:140px;position:relative}
.thanh-cc .o-tim input{padding-left:2.4rem;border-radius:var(--bo-tron)}
.thanh-cc .o-tim::before{
  content:"🔍";position:absolute;left:.9rem;top:50%;transform:translateY(-50%);
  font-size:.9rem;opacity:.5;pointer-events:none;
}
.thanh-cc .loc{flex:0 1 128px;min-width:104px}
.thanh-cc .vach-doc{width:1px;align-self:stretch;background:var(--vien);margin:.15rem .35rem}
.thanh-cc .nhom-nut{display:flex;align-items:center;gap:.5rem;flex-wrap:nowrap}
.thanh-cc .nhom-nut button{padding-left:.9rem;padding-right:.9rem}
@media (max-width:820px){
  .thanh-cc .vach-doc{display:none}
  .thanh-cc .nhom-nut{width:100%;justify-content:flex-end;flex-wrap:wrap}
}

/* ---- THẺ SỐ LIỆU: thẻ tối kiểu game-tile, vạch màu trên đầu ---- */
.tk{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:1rem;margin-bottom:1.25rem}
.tk .o{
  position:relative;background:var(--den-the);color:var(--tren-den);
  border-radius:var(--bo-lg);padding:1.4rem 1.25rem 1.15rem;overflow:hidden;
}
/* vạch màu ngang trên đầu — như dải gradient của banner PS Plus */
.tk .o::before{
  content:"";position:absolute;inset:0 0 auto 0;height:4px;background:var(--v,#0070d1);
}
.tk .o .bt{position:absolute;top:1.1rem;right:1.1rem;font-size:1.05rem;line-height:1;opacity:.5}
.tk .o .s{font-size:2.5rem;font-weight:300;line-height:1.25;letter-spacing:-.1px}
.tk .o .n{
  font-size:.75rem;color:var(--tren-den-mo);font-weight:500;letter-spacing:.3px;
  margin-top:.3rem;padding-right:1.25rem;
}

/* ---- bảng: bề mặt cấu trúc → BO GÓC 0 ---- */
.cuon{overflow-x:auto;border-radius:var(--bo-phang);background:var(--giay);border-top:1px solid var(--vien)}
table{border-collapse:collapse;width:100%;font-size:.875rem}
th,td{padding:.9rem 1.25rem;text-align:left;border-bottom:1px solid var(--vien-mo);vertical-align:top}
th{
  background:var(--giay);font-size:.75rem;font-weight:500;letter-spacing:.3px;
  color:var(--xam);white-space:nowrap;position:sticky;top:0;
  border-bottom:1px solid var(--vien-dam);
}
tbody tr{transition:background .1s}
tbody tr:hover{background:var(--ps-nen);box-shadow:inset 3px 0 0 var(--ps)}
tbody tr:last-child td{border-bottom:0}
td.so{text-align:right;font-variant-numeric:tabular-nums}

/* ---- cột THAO TÁC ---- */
th.tt,td.tt{width:1%;white-space:nowrap;text-align:right}
.o-thao-tac{display:inline-flex;gap:.25rem;justify-content:flex-end}
.nut-tt{
  width:34px;height:34px;padding:0;display:grid;place-items:center;
  border-radius:var(--bo-tron);border:1px solid transparent;background:transparent;
  font-size:.95rem;line-height:1;opacity:.45;
  transition:opacity .1s,background .1s,border-color .1s;
}
tbody tr:hover .nut-tt{opacity:1}
.nut-tt:hover:not(:disabled){background:var(--giay);border-color:var(--vien-dam);opacity:1}
.nut-tt.xoa:hover:not(:disabled){background:var(--cam-nen);border-color:var(--cam)}
.nut-tt:disabled{opacity:.18}

/* ---- chân bảng ---- */
.chan-bang{
  display:flex;align-items:center;gap:1rem;flex-wrap:wrap;
  padding:.85rem 1.25rem;border-top:1px solid var(--vien-dam);
  background:var(--the-nen);font-size:.875rem;color:var(--than-nhat);
}
.chan-bang .trai{flex:1 1 auto;min-width:140px}
.chan-bang .phai{display:flex;align-items:center;gap:.35rem;flex-wrap:wrap}
.chan-bang select{width:auto;min-height:34px;padding:.2rem 1.6rem .2rem .6rem;font-size:.8125rem}
.nut-trang{
  min-width:34px;height:34px;padding:0 .55rem;
  border-radius:var(--bo-tron);border:1px solid var(--vien-dam);
  background:var(--giay);font-size:.8125rem;font-weight:700;color:var(--muc);letter-spacing:.3px;
}
.nut-trang:hover:not(:disabled){background:var(--nen)}
.nut-trang.dang{background:var(--ps);border-color:var(--ps);color:#fff}
.nut-trang:disabled{opacity:.3;cursor:not-allowed}
.chan-bang .ba-cham{padding:0 .15rem;color:var(--da)}

/* ---- nhãn: viên thuốc, chữ nhỏ 12px/500 ---- */
.nhan{
  display:inline-block;padding:.25rem .625rem;border-radius:var(--bo-tron);
  font-size:.75rem;font-weight:500;line-height:1.5;white-space:nowrap;letter-spacing:.2px;
}
.nh-xanh{background:var(--ps);color:#fff}
.nh-vang{background:linear-gradient(90deg,var(--vang-d),var(--vang-c));color:#000}
.nh-lam {background:var(--ps-nen);color:var(--ps-dam)}
.nh-xam {background:var(--nen);color:var(--xam)}
.nh-do  {background:var(--cam);color:#fff}
/* Nhãn MỜ — khi trạng thái lặp lại nhiều nên không còn mang thông tin */
.nhan.mo-nhat{
  background:transparent !important;color:var(--xam) !important;
  box-shadow:inset 0 0 0 1px var(--vien-dam);font-weight:400;
}

/* ---- cắt bớt nội dung dài ---- */
.cat1,.cat2,.cat3{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;word-break:break-word}
.cat1{-webkit-line-clamp:1} .cat2{-webkit-line-clamp:2} .cat3{-webkit-line-clamp:3}
.co-them{cursor:help;border-bottom:1px dashed var(--vien-dam)}

/* ---- chú thích nổi ---- */
.chu-thich{
  position:fixed;z-index:300;max-width:420px;
  background:var(--den-cao);color:#fff;
  padding:.85rem 1rem;border-radius:var(--bo-lg);
  font-size:.875rem;line-height:1.5;white-space:pre-wrap;
  box-shadow:var(--bong-4);pointer-events:none;opacity:0;transition:opacity .12s;
}
.chu-thich.hien{opacity:1}

/* ---- menu chọn cột ---- */
.menu-cot{
  position:absolute;z-index:120;margin-top:.4rem;min-width:240px;
  background:var(--giay);border:1px solid var(--vien);border-radius:var(--bo-lg);
  box-shadow:var(--bong-4);padding:.5rem;
}
.menu-cot .muc{
  display:flex;align-items:center;gap:.55rem;
  padding:.5rem .6rem;border-radius:var(--bo-sm);
  font-size:.875rem;cursor:pointer;user-select:none;
}
.menu-cot .muc:hover{background:var(--nen)}
.menu-cot .muc.khoa{opacity:.4;cursor:not-allowed}
.menu-cot .vach{height:1px;background:var(--vien);margin:.4rem .3rem}
.menu-cot .day-nut{display:flex;gap:.4rem;padding:.25rem .3rem 0}
.menu-cot .day-nut button{flex:1;padding:.4rem .5rem;font-size:.75rem}
.boc-menu{position:relative;display:inline-block}

/* ---- ô "Khách hàng" ---- */
.o-kh{min-width:190px}
.o-kh .ten{font-weight:500;color:var(--muc);line-height:1.3;letter-spacing:.1px}
.o-kh .duoi{
  display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;
  margin-top:.25rem;font-size:.8125rem;color:var(--xam);
}
.ma-chip{
  font-variant-numeric:tabular-nums;font-weight:700;font-size:.6875rem;letter-spacing:.3px;
  background:var(--nen);color:var(--than);padding:.15rem .45rem;border-radius:var(--bo-xs);
}
.o-kh .lh{display:inline-flex;align-items:center;gap:.25rem}

/* ---- linh tinh ---- */
.mo{color:var(--than-nhat);font-size:.875rem}
.an{display:none !important}
.hang{display:flex;gap:.75rem;align-items:center;flex-wrap:wrap}
.day-ra{margin-left:auto}
.trong{text-align:center;padding:3.5rem 1rem;color:var(--xam)}

/* ---- lớp phủ & hộp thoại ---- */
.phu{
  position:fixed;inset:0;background:rgba(0,0,0,.7);
  display:flex;align-items:flex-start;justify-content:center;
  padding:3rem 1rem;z-index:100;overflow-y:auto;
}
.hop{
  background:var(--giay);border-radius:var(--bo-lg);max-width:980px;width:100%;
  box-shadow:var(--bong-4);padding:2rem;
}
.hop .dinh{display:flex;align-items:center;margin-bottom:1.25rem}

/* ---- thông báo ---- */
.bao{
  position:fixed;bottom:1.5rem;left:50%;
  transform:translateX(-50%) translateY(1rem);
  background:var(--den-cao);color:#fff;padding:.85rem 1.5rem;
  border-radius:var(--bo-tron);box-shadow:var(--bong-4);
  opacity:0;pointer-events:none;transition:.2s;z-index:200;
  font-size:.875rem;font-weight:500;letter-spacing:.2px;max-width:90vw;text-align:center;
}
.bao.hien{opacity:1;transform:translateX(-50%) translateY(0)}
.bao.loi{background:var(--canh-bao)}

/* ---- trang đăng nhập: dải ĐEN toàn màn (hero-band-dark), thẻ tối ---- */
.dn{
  background:var(--den);min-height:100vh;
  padding:12vh 1.25rem 4rem;
  display:flex;justify-content:center;align-items:flex-start;
}
.dn .the{
  background:var(--den-the);color:var(--tren-den);
  padding:2.5rem 2rem;border-radius:var(--bo-lg);
  max-width:440px;width:100%;margin:0;
}
.dn .the .mo{color:var(--tren-den-mo)}
.dn .loi-dn{color:#ff7a8f}          /* đỏ cảnh báo, chỉnh sáng lên để đọc được trên nền tối */
.dn h1{text-align:center;font-size:2rem;font-weight:300;letter-spacing:.1px;color:#fff}
.dn p.mo{text-align:center;margin:-.25rem 0 1.75rem;color:var(--tren-den-mo)}
.dn label{margin-top:1rem;color:var(--tren-den-mo)}
.dn input{background:var(--giay);color:var(--muc)}

/* ---- ô lịch công tác ---- */
.o-lich{min-height:96px;cursor:pointer;transition:background .12s}
.o-lich:hover{background:var(--ps-nen)}
.o-lich .noi{font-size:.875rem;white-space:pre-wrap;word-break:break-word;line-height:1.45}

@media print{
  .dau,.khong-in,button{display:none !important}
  body{background:#fff;font-size:10.5pt}
  .the,.cuon{box-shadow:none}
  .tk .o{background:#fff !important;color:#000 !important;border:1px solid #999}
  .tk .o .n{color:#333 !important}
  .boc{max-width:none;padding:0}
}
@media (max-width:640px){
  .boc{padding:1rem}
  th,td{padding:.7rem .8rem}
  .the{padding:1.25rem}
  .hop{padding:1.25rem}
  h1{font-size:1.75rem}
}