/* ============================================================
   APSA — Theme "Futuristic Lime"  /theme.css  (v7)
   Bảng màu: Đen var(--bg) · Xám var(--bg4) · Trắng var(--text) · Xanh chanh var(--accent)
   Font: Orbitron (số/Latin) + Oxanium (chữ Việt)
   v4: nền texture cát đen-xám chuyển động nhẹ + bộ icon 2D
   ============================================================ */

:root{
  /* APSA1852: menu xo cua select/date theo nen toi */
  color-scheme: dark;
  --bg:#000000; --bg2:#0b0b0b; --bg3:#141414; --bg4:#2b2b2b;
  --border:rgba(255,255,255,.10);
  --border-hover:rgba(var(--neon-rgb),.55);
  --text:#ffffff; --text2:#9a9a9a; --text3:#5e5e5e;
  --accent:#dff20d; --accent2:#c9dd00; --accent-glow:rgba(var(--neon-rgb),.22);
  --green:#dff20d; --cyan:#ffffff; --pink:#c9dd00; --yellow:#dff20d;
  --orange:#ffffff; --red:#ff4d4d;
  --radius:4px;
  --font-display:'Orbitron','Oxanium',sans-serif;
  --font-body:'Oxanium',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-title:'Oxanium',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;  /* APSA1996 */
}

/* ══ NỀN: TEXTURE CÁT ĐEN – XÁM, TRÔI NHẸ ═════════════════ */
body{
  background:var(--bg) !important;
  font-family:var(--font-body) !important;
  letter-spacing:.01em;
  -webkit-font-smoothing:antialiased;
}

/* lớp cát thô */
html::before{
  content:'';
  position:fixed; inset:-320px; z-index:0; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27300%27%20height%3D%27300%27%3E%3Cfilter%20id%3D%27n%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.32%27%20numOctaves%3D%273%27%20stitchTiles%3D%27stitch%27%2F%3E%3CfeColorMatrix%20type%3D%27matrix%27%20values%3D%270%200%200%200%201%20%200%200%200%200%201%20%200%200%200%200%201%20%200%200%200%201%200%27%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%27100%25%27%20height%3D%27100%25%27%20filter%3D%27url%28%2523n%29%27%2F%3E%3C%2Fsvg%3E");
  background-repeat:repeat;
  background-size:300px 300px;
  opacity:.15;
  will-change:transform;
  animation:apsaSandA 90s linear infinite;
}
/* lớp hạt mịn (ghi đè lớp noise cũ của từng trang) */
body::before{
  content:'' !important;
  position:fixed !important; inset:-320px !important;
  width:auto !important; height:auto !important;
  z-index:0 !important; pointer-events:none !important;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27160%27%20height%3D%27160%27%3E%3Cfilter%20id%3D%27n%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.9%27%20numOctaves%3D%274%27%20stitchTiles%3D%27stitch%27%2F%3E%3CfeColorMatrix%20type%3D%27matrix%27%20values%3D%270%200%200%200%201%20%200%200%200%200%201%20%200%200%200%200%201%20%200%200%200%201%200%27%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%27100%25%27%20height%3D%27100%25%27%20filter%3D%27url%28%2523n%29%27%2F%3E%3C%2Fsvg%3E") !important;
  background-repeat:repeat !important;
  background-size:160px 160px !important;
  opacity:.085 !important;
  will-change:transform;
  animation:apsaSandB 55s linear infinite;
}
/* quầng sáng + vignette */
body::after{
  content:'';
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(120% 75% at 50% -12%, rgba(var(--a-rgb),.075) 0%, transparent 58%),
    radial-gradient(115% 105% at 50% 45%, transparent 62%, rgba(0,0,0,.42) 100%);
}
@keyframes apsaSandA{
  from{ transform:translate3d(0,0,0); }
  to  { transform:translate3d(-300px,-300px,0); }
}
@keyframes apsaSandB{
  from{ transform:translate3d(0,0,0); }
  to  { transform:translate3d(160px,-160px,0); }
}
@media (prefers-reduced-motion: reduce){
  html::before, body::before{ animation:none !important; }
}

/* ══ CHỮ ══════════════════════════════════════════════════ */
h1,h2,h3,.page-title,.sec-title,.modal h2,.fb-title,.card-title,.cat-name,.title{
  font-family:var(--font-body) !important;
  font-weight:800 !important;
  letter-spacing:.055em !important;
  text-transform:uppercase;
  line-height:1.18;
}
h1{ font-size:clamp(26px,3.4vw,40px) !important; }
h2{ font-size:clamp(19px,2.2vw,26px) !important; }
.modal h2{ font-size:22px !important; }
.page-title{ font-size:15px !important; letter-spacing:.12em !important; }
.card-title{ font-size:15px !important; letter-spacing:.06em !important; }
.fb-title{ font-size:15px !important; letter-spacing:.10em !important; }

.fg label,.stat .lbl,.calc-field label,thead th,.divider-label,.ph,.card-cat,.card-tag{
  text-transform:uppercase; letter-spacing:.16em !important; font-weight:700 !important;
}

/* Orbitron: chỉ cho số & Latin không dấu */
/* Orbitron: chỉ cho CHỮ SỐ CỠ LỚN & chữ cái Latin — số nhỏ dùng Oxanium
   (số 0 của Orbitron ở cỡ nhỏ bị bít, đọc thành ô vuông) */
.stat .val,.avatar,.logo-mark,.calc-result b,.big-num,.kpi{
  font-family:var(--font-display) !important;
  font-variant-numeric:tabular-nums;
}
.stat .val{ font-size:32px !important; font-weight:600 !important; letter-spacing:.01em !important; }
.num,.count,.pill .n,.tab .n,.price-cell,.card-arrow,.fb-dot,td .num,.chip{
  font-variant-numeric:tabular-nums;
}
.num,.price-cell{ font-family:var(--font-body) !important; font-weight:700 !important; letter-spacing:.02em; }
.count,.pill .n,.tab .n{ font-family:var(--font-body) !important; font-weight:700 !important; }

/* ══ BỘ ICON 2D ═══════════════════════════════════════════ */
.card-icon{
  width:46px !important; height:46px !important;
  border-radius:4px !important;
  background:#0f0f0f !important;
  border:1px solid var(--w10);
  display:flex !important; align-items:center; justify-content:center;
  transition:border-color .2s, box-shadow .2s;
}
.card-icon .ico{ width:27px; height:27px; display:block; }
.card:hover .card-icon{
  border-color:var(--a55);
  box-shadow:0 0 18px rgba(var(--a-rgb),.16);
}
.ico-emoji{ font-size:20px; line-height:1; }
.ttl-ico{ width:19px; height:19px; vertical-align:-4px; flex-shrink:0; }
h1 .ttl-ico{ width:30px; height:30px; vertical-align:-6px; }
.title .ttl-ico{ width:22px; height:22px; vertical-align:-5px; }
.fb-svg{ width:20px; height:20px; vertical-align:-4px; }
.pill-ico{ width:15px; height:15px; vertical-align:-3px; margin-right:3px; flex-shrink:0; }
/* ── Icon 2D trong nút / chip / trang trống — xem [[apsa-bo-icon]] ── */
.empty .ico > svg{ width:46px; height:46px; }
.chip .pill-ico{ width:12px; height:12px; vertical-align:-2px; margin-right:2px; }
/* Nút/chip nền lime → lót nền tối sau icon để không bị chìm
   (danh sách chọn khớp với khối "NÚT NỀN CHANH" bên dưới) */
.btn:not(.ghost):not(.danger) .pill-ico,
.btn-primary .pill-ico,.btn-accent .pill-ico,.btn-add .pill-ico,.btn-p .pill-ico,
.btn-green .pill-ico,.btn.green .pill-ico,.btn-view .pill-ico,
.filter-pill.active .pill-ico,.pill.active .pill-ico,.tab.active .pill-ico,
.hbtn.primary .pill-ico,.hbtn.green-b .pill-ico{
  background:var(--bg-card); border-radius:5px; padding:1.5px; box-sizing:content-box;
}
.filter-pill{ display:inline-flex !important; align-items:center; gap:2px; }
.fb-icon{ display:inline-flex; align-items:center; }

/* ══ KHỐI / VIỀN ══════════════════════════════════════════ */
.card,.stat,.modal,.tbl-wrap,.calc-box,.banner-inner,.recap,.paybox,
.fg input,.fg textarea,.fg select,.search-input,.hsel,.btn,.hbtn,.pill,.tab,
.filter-pill,.act,.chip,.badge,.btn-primary,.btn-accent,.btn-add{
  border-radius:var(--radius) !important;
}
.avatar,.logo-mark{ border-radius:50% !important; }
.search-input,.hsel{ border-radius:2px !important; }

.card,.stat,.modal,.tbl-wrap{
  background:rgba(var(--card-rgb),.86) !important;
  backdrop-filter:blur(2px);
  border:1px solid var(--w09) !important;
  box-shadow:none !important;
}
.card:hover,.stat:hover{
  border-color:rgba(var(--a-rgb),.45) !important;
  box-shadow:0 0 0 1px rgba(var(--a-rgb),.12), 0 0 34px rgba(var(--a-rgb),.07) !important;
}
header{
  background:rgba(var(--bar-rgb),.88) !important;
  border-bottom:1px solid var(--w09) !important;
}

/* ══ NÚT NỀN CHANH → CHỮ ĐEN ══════════════════════════════ */
.btn:not(.ghost):not(.danger),
.btn-primary,.btn-accent,.btn-add,.btn-p,.btn-green,.btn.green,.btn-view,
.btn-new-empty,.history-empty .btn-new-empty,.badge-new,.fb-btn,
.filter-pill.active,.pill.active,.tab.active,.cat-code,
.hbtn.primary,.avatar,.logo-mark,.btn-dl:hover,.act:hover,.quick button:hover,
.card:hover .card-arrow{
  background:var(--accent) !important;
  background-image:none !important;
  color:var(--bg) !important;
  border-color:var(--accent) !important;
  font-weight:700 !important;
  text-shadow:none !important;
  box-shadow:0 0 22px rgba(var(--a-rgb),.20) !important;
}
.btn:not(.ghost):not(.danger):hover,
.btn-primary:hover,.hbtn.primary:hover,.fb-btn:hover{
  background:var(--btn-hover, #eaff4a) !important;  /* APSA1894 */
  box-shadow:0 0 30px rgba(var(--a-rgb),.34) !important;
  transform:translateY(-1px);
}
.btn.ghost,.btn.danger{ background:transparent !important; background-image:none !important; }

/* ══ Ô NHẬP ═══════════════════════════════════════════════ */
.fg input,.fg textarea,.fg select,.search-input,.hsel,input[type=text],
input[type=date],input[type=number],input[type=password],select,textarea{
  background:var(--bg3) !important;
  border:1px solid var(--w12) !important;
  color:var(--text) !important;
  font-family:var(--font-body) !important;
}
.fg input:focus,.fg textarea:focus,.fg select:focus,.search-input:focus,
input:focus,select:focus,textarea:focus{
  border-color:var(--accent) !important;
  box-shadow:0 0 0 2px rgba(var(--a-rgb),.16) !important;
  outline:none !important;
}

/* ══ BẢNG ═════════════════════════════════════════════════ */
table thead th{
  background:var(--bg) !important; color:var(--text3) !important;
  border-bottom:1px solid rgba(var(--a-rgb),.22) !important;
}
table tbody td{ background:rgba(var(--card-rgb),.88) !important; border-bottom:1px solid var(--w07) !important; }
table tbody tr:hover td{ background:var(--bg3) !important; }

/* ══ CHI TIẾT ═════════════════════════════════════════════ */
a{ text-decoration:none; }
::selection{ background:var(--accent); color:var(--bg); }
*::-webkit-scrollbar{ width:9px; height:9px; }
*::-webkit-scrollbar-track{ background:var(--bg); }
*::-webkit-scrollbar-thumb{ background:var(--bg4); }
*::-webkit-scrollbar-thumb:hover{ background:var(--accent); }
footer{ border-top:1px solid var(--wash2) !important; letter-spacing:.06em; }

@media(max-width:900px){
  h1{ font-size:26px !important; }
  .stat .val{ font-size:24px !important; }
}

/* ══════════ CỠ CHỮ THEO USER (apsa-ui.js) ══════════ */
:root{ --fs:12.5px; --fs-sm:11.5px; --fs-xs:10.5px; --fs-lg:14px; }

/* Bề mặt dữ liệu — chỉ phóng chữ, không đụng tiêu đề/nhãn */
table td, table th,
table input, table select, table textarea,
.fg input, .fg select, .fg textarea,
.tbl-wrap table, .task-cell, .who-cell .nm, .desc-cell, .item-cell,
.notes-cell, .unit-cell, .price-cell, .profit-cell{
  font-size:var(--fs) !important;
}
table th, .who-cell .meta, .psub, .pmeta, .due-cell .soon{
  font-size:var(--fs-xs) !important;
}
.pos-pill, .type-pill, .status-pill, .sttp, .fl-tag, .noteam{
  font-size:var(--fs-xs) !important;
}

/* ══════════ MENU CÀI ĐẶT Ở CHIP TÊN USER ══════════ */
.who.has-menu{ position:relative; cursor:pointer; transition:.2s; }
.who.has-menu:hover{ color:var(--text); border-color:var(--border-hover); background:var(--bg3); }
.umenu{
  display:none; position:absolute; top:calc(100% + 8px); right:0; z-index:300;
  min-width:212px; padding:7px; border-radius:14px; cursor:default;
  background:var(--bg2); border:1px solid var(--wash3);
  box-shadow:0 18px 44px var(--scrim6);
}
.umenu.open{ display:block; }
.umhead{
  font-size:10px; font-weight:800; letter-spacing:.7px; text-transform:uppercase;
  color:var(--text3); padding:7px 10px 6px;
}
.umenu .fsopt{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:12px;
  background:transparent; border:1px solid transparent; color:var(--text2); cursor:pointer;
  font-family:inherit; font-size:12.5px; font-weight:600; text-align:left;
  padding:8px 10px; border-radius:9px; transition:.15s;
}
.umenu .fsopt em{ font-style:normal; font-size:10.5px; color:var(--text3); font-weight:700; }
.umenu .fsopt:hover{ background:var(--bg3); color:var(--text); }
.umenu .fsopt.on{ background:var(--a14); border-color:rgba(var(--a-rgb),.45); color:var(--accent); }
.umenu .fsopt.on em{ color:var(--accent); opacity:.8; }
.umsep{ height:1px; background:var(--w09); margin:7px 4px; }
.umenu .umlog{ display:flex; align-items:center; gap:8px; width:100%; text-align:left;
  padding:8px 10px; border-radius:9px; border:1px solid transparent; background:transparent;
  color:var(--text2); font-family:inherit; font-size:12.5px; font-weight:600; cursor:pointer; transition:.15s; }
.umenu .umlog:hover{ background:var(--bg3); color:var(--text); }
.umenu .umlog em{ margin-left:auto; font-style:normal; font-family:'Orbitron',sans-serif;
  font-size:10px; font-weight:800; color:var(--bg); background:var(--accent); border-radius:20px; padding:2px 7px; }
.umenu .umout{
  width:100%; background:transparent; border:none; color:var(--text2); cursor:pointer;
  font-family:inherit; font-size:12.5px; font-weight:600; text-align:left;
  padding:8px 10px; border-radius:9px; transition:.15s;
}
.umenu .umout:hover{ background:var(--r12); color:var(--red-soft2); }

/* ══════════ ACTION BUTTONS TRÊN NAVIGATION ══════════ */
header .hact{ display:flex; align-items:center; gap:8px; min-width:0; }
header .hact[hidden]{ display:none !important; }
header .hgrow{ flex:1 1 auto; min-width:8px; }
header .hscroll{
  display:flex; align-items:center; gap:8px; min-width:0;
  overflow-x:auto; overflow-y:hidden; scrollbar-width:none; padding:2px 0;
}
header .hscroll::-webkit-scrollbar{ display:none; }
header .hsep{ width:1px; height:22px; background:var(--border); flex-shrink:0; }
.hmeta{
  display:flex; align-items:center; gap:8px; min-width:0; flex-shrink:1;
  font-size:11.5px; color:var(--text3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
/* Chip hiển thị tự gắn cho trang chưa có chip user */
header .who{
  display:flex; align-items:center; gap:7px; font-size:12px; color:var(--text2);
  padding:5px 10px; border-radius:20px; border:1px solid var(--border);
  white-space:nowrap; flex-shrink:0;
}
header .who .ulabel{ font-weight:600; }
#apsaUserBadge.has-menu{ position:relative; cursor:pointer; }

/* Nút trong nav gọn hơn để đủ chỗ mọi thao tác */
header .hscroll .hbtn{ padding:7px 11px; gap:5px; }
header .hact .hbtn.primary{ padding:7px 15px; }

/* Menu ⋯ thao tác khác trên navigation */
header .hmore{ position:relative; flex-shrink:0; }
header #btnMore{ padding:7px 12px; font-size:15px; line-height:1; letter-spacing:1px; }
header .hmenu{
  display:none; position:absolute; top:calc(100% + 8px); right:0; z-index:300;
  min-width:206px; padding:7px; border-radius:14px;
  background:var(--bg2); border:1px solid var(--wash3);
  box-shadow:0 18px 44px var(--scrim6);
}
header .hmenu.open{ display:block; }
header .hmenu button{
  width:100%; display:flex; align-items:center; gap:9px;
  background:transparent; border:none; color:var(--text2); cursor:pointer;
  font-family:inherit; font-size:12.5px; font-weight:600; text-align:left;
  padding:9px 10px; border-radius:9px; transition:.15s; white-space:nowrap;
}
header .hmenu button:hover{ background:var(--bg3); color:var(--text); }

/* ── APSA v1.2.11 — tan dung ~90% be ngang man hinh laptop ───────────── */
@media (min-width: 1180px) {
  .wrap,
  .container,
  .filter-bar,
  .personal-bar { max-width: min(90vw, 1920px) !important; }
}

/* ── APSA v1.2.14 — dong bo dropdown voi o nhap lieu ──────────────────
   Safari bo qua padding cua <select> khi con appearance mac dinh nen
   dropdown thap hon text field. Tat appearance va tu ve mui ten. */
select:not([class*="stt"]):not([multiple]):not([size]) {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding-right: 30px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239a9a9a' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 10px center !important;
  background-size: 12px !important;
  line-height: 1.26;
}
select:not([class*="stt"]):not([multiple]):not([size])::-ms-expand { display: none; }

/* -- APSA v1.2.15 - dropdown phang, bo hieu ung neon phat sang -----------
   Cung tone voi chip Loai bao gia: nen mo, vien mo, chu sang. */
html body select[class*="stt"],
html body select[class*="stt"]:hover,
html body select[class*="stt"]:focus,
html body select#fStatus,
html body select#fStatus:hover,
html body select#fStatus:focus {
  box-shadow: none !important;
  text-shadow: none !important;
  transform: none !important;
  filter: none !important;
  outline: none !important;
  border-width: 1px !important;
  border-style: solid !important;
  background-color: color-mix(in srgb, var(--neon) 15%, transparent) !important;
  border-color: color-mix(in srgb, var(--neon) 40%, transparent) !important;
  color: color-mix(in srgb, var(--neon) 78%, var(--text)) !important;
}
html body select[class*="stt"]:hover,
html body select#fStatus:hover {
  background-color: color-mix(in srgb, var(--neon) 25%, transparent) !important;
  border-color: color-mix(in srgb, var(--neon) 60%, transparent) !important;
}

/* ── APSA v1.2.16 — bộ khung chung cho pop-up nhập liệu ────────────────
   Đồng bộ mọi hộp thoại về đúng kiểu "SỬA CÔNG TY": nền tối bo góc lớn,
   tiêu đề Orbitron in hoa, nhãn nhỏ in hoa, ô nhập bo tròn, nút chính
   màu neon. Chỉ chỉnh phần nhìn — không đụng vào cấu trúc HTML của trang. */
@media screen {

  /* ── Tấm nền ─────────────────────────────────────────────────── */
  .modal, .mbox, .dlg, .sheet, .popup-box {
    border-radius: 18px !important;
    border: 1px solid var(--w10) !important;
    background: #131313 !important;
    box-shadow: 0 34px 90px rgba(0,0,0,.72) !important;
    padding: 30px !important;
  }

  /* ── Tiêu đề ─────────────────────────────────────────────────── */
  .modal > h2, .modal > form > h2, .mbox > h2, .dlg > h2,
  .modal > h3, .mbox > h3 {
    font-family: "Orbitron", sans-serif !important;
    font-weight: 800 !important;
    font-size: 19px !important;
    letter-spacing: 1.4px !important;
    text-transform: uppercase !important;
    color: var(--text) !important;
    margin: 0 0 20px !important;
  }
  .modal > .mh-sub, .modal .modal-sub, .mbox > .mh-sub {
    font-size: 13px !important;
    color: var(--ink3) !important;
    margin: -14px 0 22px !important;
    line-height: 1.5 !important;
  }

  /* ── Nhãn ────────────────────────────────────────────────────── */
  .modal label, .mbox label, .dlg label,
  .modal .fg > label, .mbox .fg > label {
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: 1.1px !important;
    text-transform: uppercase !important;
    color: var(--text3) !important;
  }
  .modal label.ck, .mbox label.ck, .modal .ck, .mbox .ck {
    font-size: 13px !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    color: var(--text2) !important;
  }

  /* ── Ô nhập ──────────────────────────────────────────────────── */
  .modal input[type="text"], .modal input[type="date"], .modal input[type="number"],
  .modal input[type="email"], .modal input[type="tel"], .modal input[type="password"],
  .modal input:not([type]), .modal select, .modal textarea,
  .mbox input[type="text"], .mbox input[type="date"], .mbox input[type="number"],
  .mbox input:not([type]), .mbox select, .mbox textarea {
    border-radius: 10px !important;
    padding-top: 11px !important;
    padding-bottom: 11px !important;
    background: var(--bg2) !important;
    border: 1px solid rgba(var(--w-rgb),.11) !important;
    color: var(--text) !important;
    font-size: 13.5px !important;
  }
  .modal input:focus, .modal select:focus, .modal textarea:focus,
  .mbox input:focus, .mbox select:focus, .mbox textarea:focus {
    border-color: var(--accent-fill) !important;
    box-shadow: 0 0 0 1px rgba(var(--a-rgb),.35) !important;
    outline: none !important;
  }
  .modal input::placeholder, .modal textarea::placeholder,
  .mbox input::placeholder, .mbox textarea::placeholder { color: #5a5a5a !important; }

  /* ── Nút chính ───────────────────────────────────────────────── */
  .modal .btn.primary, .modal .btn-add, .modal button[type="submit"],
  .mbox .btn.primary, .mbox .btn-add, .mbox button[type="submit"] {
    border-radius: 10px !important;
    padding: 0 20px !important;  /* APSA1904: bo padding doc de nut vua 28px */
    font-size: 14px !important;
    font-weight: 800 !important;
    background: var(--accent-fill) !important;
    border: 1px solid var(--accent) !important;
    color: var(--bg) !important;
    box-shadow: 0 0 26px rgba(var(--a-rgb),.30) !important;
  }
  .modal .btn.primary:hover, .modal .btn-add:hover, .modal button[type="submit"]:hover,
  .mbox .btn.primary:hover, .mbox .btn-add:hover, .mbox button[type="submit"]:hover {
    background: var(--btn-hover, #eaff45) !important;
    border-color: var(--btn-hover, #eaff45) !important;
  }

  /* ── Nút phụ (Huỷ / Đóng) ────────────────────────────────────── */
  .modal .btn-cancel, .modal .btn:not(.primary):not(.btn-add):not(.danger):not(.dg),
  .mbox .btn-cancel, .mbox .btn:not(.primary):not(.btn-add):not(.danger):not(.dg) {
    border-radius: 10px !important;
    padding: 0 20px !important;  /* APSA1904: bo padding doc de nut vua 28px */
    font-size: 13.5px !important;
    font-weight: 700 !important;
  }

  /* ── Hàng nút ────────────────────────────────────────────────── */
  .modal .modal-acts, .modal .modal-actions, .mbox .modal-acts, .mbox .modal-actions {
    margin-top: 26px !important;
    gap: 10px !important;
  }
}

/* ── Icon lịch trong ô ngày: đổi sang xám sáng cho dễ nhìn trên nền tối ── */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="month"]::-webkit-calendar-picker-indicator,
input[type="week"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator {
  filter: none;
  opacity: .78;
  cursor: pointer;
  transition: opacity .15s;
}
input[type="date"]:hover::-webkit-calendar-picker-indicator,
input[type="datetime-local"]:hover::-webkit-calendar-picker-indicator,
input[type="month"]:hover::-webkit-calendar-picker-indicator,
input[type="week"]:hover::-webkit-calendar-picker-indicator,
input[type="time"]:hover::-webkit-calendar-picker-indicator { opacity: 1; }
input[type="date"], input[type="datetime-local"], input[type="month"],
input[type="week"], input[type="time"] { color-scheme: dark; }

/* APSA1852: tien ich an phan tu dung chung toan app */
.hidden{ display:none !important; }

/* APSA1855: chuan hoa chieu cao moi dropdown toan he thong */
:root{ --sel-h: 28px; }
select{
  height: var(--sel-h) !important;
  min-height: var(--sel-h) !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  line-height: 26px !important;
}
select[multiple], select[size]{
  height: auto !important; min-height: 0 !important; line-height: normal !important;
  padding-top: 6px !important; padding-bottom: 6px !important;
}

/* APSA1867: moi <select> trong he thong deu cao 28px - ke ca dropdown dang pill
   (Trang thai du an, cot Trang thai o danh sach bao gia). Bo padding doc rieng
   cua pill de chu khong bi cat, giu nguyen padding ngang cho mui ten. */
html select[class*='stt'],
html select#fStatus {
  height: var(--sel-h) !important;
  min-height: var(--sel-h) !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  line-height: 26px !important;
}

/* =====================================================================
   APSA1879 - NEN SANG (light mode)
   Cac token bo sung: dung cho nhung ma mau truoc day viet cung trong trang.
   Gia tri o :root la mau TOI hien tai -> khong doi gi khi chua bat light.
   ===================================================================== */
:root{
  --bg-card:      #0d0d0d;   /* nen the / hang bang */
  --panel:        #1c1c1c;   /* nen khoi noi bat */
  --panel2:       #2b3138;   /* nen khoi phu */
  --wash1:        rgba(255,255,255,.06);
  --wash2:        rgba(255,255,255,.08);
  --wash3:        rgba(255,255,255,.14);
  --accent-fill:  #dff20d;   /* nen nut vang neon - GIU NGUYEN o ca 2 che do */
  --accent-on:    #000000;   /* chu dat tren nen vang */
  --red-soft:     #ff6b6b;
  --red-soft2:    #ff8f8f;
  --red-wash:     rgba(255,77,77,.14);
  --shadow:       rgba(0,0,0,.55);
}

html[data-theme="light"]{
  color-scheme: light;

  --bg:#f7f7f5; --bg2:#ffffff; --bg3:#f1f1ee; --bg4:#e8e8e4;
  --bg-card:#ffffff; --panel:#f7f8f4; --panel2:#eceee7;

  --border:rgba(0,0,0,.16);
  --border-hover:rgba(43,46,51,.55);

  --text:#14140f; --text2:#4a4d42; --text3:#6b6e62;

  /* Vang neon khong doc duoc tren nen trang -> chu/vien dung tong o liu dam,
     con nen nut van giu dung vang neon thuong hieu. */
  --accent:#2b2e33; --accent2:#363a40;
  --accent-glow:rgba(43,46,51,.15);
  --accent-fill:#2b2e33;
  --accent-on:#ffffff;

  --green:#2f7a45; --cyan:#14140f; --pink:#363a40; --yellow:#2b2e33;
  --orange:#2b2e33; --red:#c92a2a;
  --red-soft:#c92a2a; --red-soft2:#e03131; --red-wash:rgba(201,42,42,.10);

  --wash1:rgba(0,0,0,.04);
  --wash2:rgba(0,0,0,.06);
  --wash3:rgba(0,0,0,.11);
  --shadow:rgba(0,0,0,.14);
}

html[data-theme="light"] body{ background:var(--bg); color:var(--text); }

/* APSA1879 - lop 2: cac muc alpha va mau chip trang thai */
:root{
  --w07:rgba(255,255,255,.07); --w09:rgba(255,255,255,.09);
  --w10:rgba(255,255,255,.10); --w12:rgba(255,255,255,.12);
  --w18:rgba(255,255,255,.18);
  --a05:rgba(var(--neon-rgb),.05);  --a09:rgba(var(--neon-rgb),.09);
  --a14:rgba(var(--neon-rgb),.14);  --a50:rgba(var(--neon-rgb),.5);
  --a55:rgba(var(--neon-rgb),.55);
  --r10:rgba(255,77,77,.10); --r12:rgba(255,77,77,.12);
  --r15:rgba(255,77,77,.15); --r40:rgba(255,77,77,.4);
  --scrim6:rgba(0,0,0,.6); --scrim7:rgba(0,0,0,.7); --scrim75:rgba(0,0,0,.75);
  --ink1:#1f1f1f; --ink2:#2a2a2a; --ink3:#8d8d8d; --ink4:#f2f2f2;
  --accent-soft:#eaff6b;
  --ok:#7ee787; --ok2:#4ade80; --ok3:#39ff88;
  --info:#7fd7ff; --warn:#ffc357; --warn2:#ffd54a; --warn3:#ff9f0a;
  --rose:#ff4d6d; --blue-wash:rgba(90,160,255,.055);
}
html[data-theme="light"]{
  --w07:rgba(0,0,0,.05); --w09:rgba(0,0,0,.06);
  --w10:rgba(0,0,0,.08); --w12:rgba(0,0,0,.09);
  --w18:rgba(0,0,0,.14);
  --a05:rgba(43,46,51,.07); --a09:rgba(43,46,51,.11);
  --a14:rgba(43,46,51,.16); --a50:rgba(43,46,51,.5);
  --a55:rgba(43,46,51,.55);
  --r10:rgba(201,42,42,.08); --r12:rgba(201,42,42,.10);
  --r15:rgba(201,42,42,.12); --r40:rgba(201,42,42,.35);
  --scrim6:rgba(0,0,0,.42); --scrim7:rgba(0,0,0,.5); --scrim75:rgba(0,0,0,.55);
  --ink1:#eceee7; --ink2:#e2e4dc; --ink3:#71736a; --ink4:#2a2b24;
  --accent-soft:#363a40;
  --ok:#2f7a45; --ok2:#2f7a45; --ok3:#2b7a40;
  --info:#1f6f9c; --warn:#9a6b00; --warn2:#8a5f00; --warn3:#a35a00;
  --rose:#c2255c; --blue-wash:rgba(31,111,156,.06);
}

/* APSA1879 - lop 3: tach phan RGB ra bien de MOI muc alpha tu doi theo nen,
   khong phai khai bao rieng tung muc .05 .08 .12 ... */
:root{
  --w-rgb:255,255,255;   /* mau phu trang tren nen toi */
  --a-rgb:223,242,13;    /* vang thuong hieu */
  --r-rgb:255,77,77;     /* do canh bao */
  --card-rgb:11,11,11;   /* nen o bang dinh (sticky) */
  --bar-rgb:0,0,0;       /* thanh tren cung */
}
html[data-theme="light"]{
  --w-rgb:0,0,0;
  --a-rgb:194,84,47;
  --r-rgb:201,42,42;
  --card-rgb:255,255,255;
  --bar-rgb:255,255,255;
}
:root{ --lime:#7cff9e; }
html[data-theme="light"]{ --lime:#1f7a3d; }

/* APSA1879 - lop 4: cac mau nhat con lai, nen sang phai dam lai moi doc duoc */
:root{
  --slate:#9aa3b2; --slate2:#c8cbd0; --blue:#7c9cff;
  --gold:#ffd23f; --violet:#c77dff;
}
html[data-theme="light"]{
  --slate:#5b626e; --slate2:#6e7178; --blue:#3355cc;
  --gold:#8a6a00; --violet:#7b3fb8;
}

/* =====================================================================
   APSA1880 - NEN SANG ban chot: nen TRANG that, bo het mau la,
   he mau chi con XAM - DEN - CAM. Khoi nay dat cuoi file nen de len
   moi gia tri light phia tren (cung do uu tien, khai bao sau thang).
   ===================================================================== */
html[data-theme="light"]{
  /* --- nen: trang that, phan tach bang VIEN chu khong bang sac do --- */
  --bg:#ffffff; --bg2:#ffffff; --bg3:#f6f6f5; --bg4:#ededeb;
  --bg-card:#ffffff; --panel:#fafaf9; --panel2:#f1f1ef;
  --border:rgba(0,0,0,.14); --border-hover:rgba(43,46,51,.55);

  /* --- chu --- */
  --text:#3a3a34; --text2:#57574f; --text3:#6e6e66;

  /* --- cam: mau nhan duy nhat --- */
  --accent:#2b2e33; --accent2:#363a40; --accent-soft:#363a40;
  --accent-fill:#2b2e33; --accent-on:#ffffff;
  --accent-glow:rgba(43,46,51,.14);

  /* --- bo xanh la / xanh duong / tim / hong -> xam hoac cam --- */
  --green:#2f2f2b; --lime:#2f2f2b; --cyan:#141412;
  --pink:#2b2e33; --yellow:#2b2e33; --orange:#2b2e33;
  --ok:#4a4a44; --ok2:#4a4a44; --ok3:#3b3b36;
  --info:#2b2e33; --warn:#363a40; --warn2:#363a40; --warn3:#2b2e33;
  --blue:#2b2e33; --gold:#363a40; --violet:#57574f;
  --slate:#57574f; --slate2:#6e6e66;
  --blue-wash:rgba(43,46,51,.06);

  /* --- canh bao giu mau do gach: cung ho am voi cam nhung van nhan ra ngay --- */
  --red:#b3261e; --red-soft:#b3261e; --red-soft2:#c9422f;
  --red-wash:rgba(179,38,30,.09);
  --r10:rgba(179,38,30,.07); --r12:rgba(179,38,30,.09);
  --r15:rgba(179,38,30,.11); --r40:rgba(179,38,30,.32);
  --r-rgb:179,38,30;

  /* --- cac lop alpha --- */
  --w-rgb:0,0,0; --a-rgb:194,84,47; --card-rgb:255,255,255; --bar-rgb:255,255,255;
  --w07:rgba(0,0,0,.045); --w09:rgba(0,0,0,.055);
  --w10:rgba(0,0,0,.07);  --w12:rgba(0,0,0,.085);
  --w18:rgba(0,0,0,.13);
  --a05:rgba(43,46,51,.06); --a09:rgba(43,46,51,.10);
  --a14:rgba(43,46,51,.14); --a50:rgba(43,46,51,.5);
  --a55:rgba(43,46,51,.55);

  --ink1:#f1f1ef; --ink2:#e8e8e6; --ink3:#6e6e66; --ink4:#3a3a34;
  --scrim6:rgba(0,0,0,.4); --scrim7:rgba(0,0,0,.48); --scrim75:rgba(0,0,0,.52);
  --shadow:rgba(0,0,0,.10);
}
html[data-theme="light"] body{ background:var(--bg); color:var(--text); }

/* APSA1880 - chip trang thai o nen sang: bo mau sac, phan biet bang DO DAM.
   Cang ve cuoi quy trinh cang dam; giai doan dang chay dung cam de noi bat. */
html[data-theme="light"] .stt{
  border:1px solid rgba(0,0,0,.14) !important;
  font-weight:700 !important;
}
html[data-theme="light"] .stt-request{   background:#fbfbfa !important; color:#6e6e66 !important; }
html[data-theme="light"] .stt-quote{     background:#f2f2f0 !important; color:#4a4a44 !important; }
html[data-theme="light"] .stt-confirmed{ background:rgba(43,46,51,.10) !important; color:#4d5c00 !important;
                                         border-color:rgba(43,46,51,.38) !important; }
html[data-theme="light"] .stt-running{   background:#2b2e33 !important; color:#ffffff !important;
                                         border-color:#2b2e33 !important; }
html[data-theme="light"] .stt-service_done,
html[data-theme="light"] .stt-liq_sent{  background:#57574f !important; color:#ffffff !important;
                                         border-color:#45453f !important; }
html[data-theme="light"] .stt-done,
html[data-theme="light"] .stt-dong_du_an,
html[data-theme="light"] .stt-paid{      background:#2f2f2b !important; color:#ffffff !important;
                                         border-color:#2f2f2b !important; }
html[data-theme="light"] .stt-lost{      background:rgba(179,38,30,.10) !important; color:#b3261e !important;
                                         border-color:rgba(179,38,30,.4) !important; }

/* =====================================================================
   APSA1881 - XANH LA DAM cho nhom DUYET / HOAN THANH.
   He mau nen sang chot lai 4 nghia: xam-den (cau truc), cam (dang chay),
   xanh la dam (duyet & hoan thanh), do gach (qua han).
   ===================================================================== */
:root{
  --appr-bg:rgba(59,201,255,.16);   /* nen toi: giu xanh duong nhu cu */
  --appr-fg:#3bc9ff;
  --done-fill:#2f2f2b; --done-fg:#ffffff;
}
html[data-theme="light"]{
  --appr-bg:rgba(21,122,61,.13);
  --appr-fg:#12693a;
  --done-fill:#157a3d; --done-fg:#ffffff;
  /* moi thu mang nghia "hoan thanh" deu keo ve xanh la dam */
  --green:#157a3d; --lime:#157a3d;
  --ok:#157a3d; --ok2:#157a3d; --ok3:#12693a;
}
/* Chip trang thai: 3 buoc hoan thanh -> xanh la dam.
   Gui nghiem thu KHONG tinh la hoan thanh (moi gui ho so, tien chua ve) -> giu xam. */
html[data-theme="light"] .stt-service_done,
html[data-theme="light"] .stt-done,
html[data-theme="light"] .stt-dong_du_an,
html[data-theme="light"] .stt-paid{
  background:var(--done-fill) !important;
  color:var(--done-fg) !important;
  border-color:#11602f !important;
}
html[data-theme="light"] .stt-liq_sent{
  background:#57574f !important; color:#ffffff !important; border-color:#45453f !important;
}

/* APSA1882 - nen dong nhom hang muc (truoc day la mau toi viet cung) */
:root{
  --grp1:#25290f; --grp2:#161d2b; --grp3:#2b2113; --grp-h:#282828;
  --secbtn:#241c0c; --secbtn-h:#2e2410; --secbtn-bd:#4a3a12;
}
html[data-theme="light"]{
  --grp1:#f6f1e6; --grp2:#eef1f6; --grp3:#f7f0e8; --grp-h:#f0f0ee;
  --secbtn:#f9f2e8; --secbtn-h:#f1e7d8; --secbtn-bd:#e0cfb4;
}

/* APSA1883 - nen sang: xam nhat hon, them gradient va grain cho do sau */
html[data-theme="light"] body{
  background-color:#ffffff !important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.42'/%3E%3C/svg%3E"), linear-gradient(180deg,#ffffff 0%,#fdfdfc 45%,#f6f6f4 100%) !important;
  background-repeat:repeat, no-repeat !important;
  background-size:180px 180px, 100% 100% !important;
  background-attachment:fixed, fixed !important;
  background-blend-mode:soft-light, normal !important;
}
html[data-theme="light"]{
  --w07:rgba(0,0,0,.028); --w09:rgba(0,0,0,.035);
  --w10:rgba(0,0,0,.045); --w12:rgba(0,0,0,.055);
  --w18:rgba(0,0,0,.09);
  --bg3:#fafaf9; --bg4:#f2f2f0; --panel:#fcfcfb; --panel2:#f6f6f4;
}

/* APSA1884 - nut doi nen: cong tac gat thay vi muc menu thuong */
#apsaTheme{ display:flex; align-items:center; }
#apsaTheme .as-sw{
  margin-left:auto; flex:0 0 32px; width:32px; height:18px; border-radius:999px;
  background:var(--w18); border:1px solid var(--border); position:relative;
  transition:background .18s ease, border-color .18s ease;
}
#apsaTheme .as-sw .kn{
  position:absolute; top:2px; left:2px; width:12px; height:12px; border-radius:50%;
  background:var(--text2); display:block;
  transition:transform .18s ease, background .18s ease;
}
html[data-theme="light"] #apsaTheme .as-sw{
  background:var(--accent-fill); border-color:var(--accent);
}
html[data-theme="light"] #apsaTheme .as-sw .kn{
  transform:translateX(14px); background:#ffffff;
}
/* thanh ben thu gon thi an cong tac, giong nhu nhan chu */
#apsaSide .as-sw{ opacity:0; transition:opacity .13s ease; }
#apsaSide:hover .as-sw, body.as-pin #apsaSide .as-sw{ opacity:1; }

/* APSA1886 - bo vien / khung quanh nut doi nen (ca khi dang focus) */
#apsaTheme,
#apsaTheme:hover,
#apsaTheme:focus,
#apsaTheme:focus-visible,
#apsaTheme:active{
  border:0 !important;
  outline:0 !important;
  box-shadow:none !important;
  -webkit-tap-highlight-color:transparent;
}
#apsaTheme .as-sw{ border:0 !important; }
html[data-theme="light"] #apsaTheme .as-sw{ border:0 !important; }

/* ---- APSA1888 — LIGHT MODE: khung pop-up nền trắng, viền cam ----
   Ghi de lai block "APSA v1.2.16" o tren (dang ep #131313 !important). */
html[data-theme="light"] .modal,
html[data-theme="light"] .mbox,
html[data-theme="light"] .dlg,
html[data-theme="light"] .sheet,
html[data-theme="light"] .popup-box {
  background: #ffffff !important;
  border: 1px solid var(--accent-fill) !important;
  box-shadow: 0 28px 70px rgba(0, 0, 0, .16) !important;
}
html[data-theme="light"] .modal > h2,
html[data-theme="light"] .modal > form > h2,
html[data-theme="light"] .mbox > h2,
html[data-theme="light"] .dlg > h2,
html[data-theme="light"] .modal > h3,
html[data-theme="light"] .mbox > h3,
html[data-theme="light"] .dlg > h3 {
  color: var(--accent2) !important;
}

/* ---- APSA1889 — LIGHT MODE: nen o icon / nut den -> xam dam ---- */
html[data-theme="light"] .card-icon { background: #3a3a34 !important; }
html[data-theme="light"] .card-star { background: rgba(58, 58, 52, .62) !important; }
html[data-theme="light"] #apsaHam { background: rgba(58, 58, 52, .95) !important; }

/* ---- APSA1890 — Chuan hoa chieu cao moi nut = 28px (toan he thong) ----
   Chi ep chieu cao + padding doc + line-height. KHONG dung toi display/width
   nen nut block hay nut vuong icon deu giu nguyen bo cuc. */
.btn,
button.btn,
a.btn,
.hbtn,
.back-btn,
.btn-primary,
.btn-add,
.iconbtn,
.icon-btn,
.axbtn,
.zipbtn,
.zbtn,
.fbtn,
.pbtn,
.rowbtn,
.openbtn,
.type-btn,
.qv-btn,
.s1-btn,
.h-card-btn {
  height: 28px !important;
  min-height: 28px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  line-height: 26px !important;
  box-sizing: border-box !important;
}

/* ---- APSA1891 — Moi trang thai checklist mot mau rieng ----
   todo = xam, doing = xanh duong, review = vang cam dam, done = xanh la dam. */
:root{
  --as-todo:#9aa3b2;  --as-todo-bg:rgba(255,255,255,.06);  --as-todo-bd:rgba(255,255,255,.16);
  --as-doing:#7c9cff; --as-doing-bg:rgba(124,156,255,.15); --as-doing-bd:rgba(124,156,255,.45);
  --as-rev:#ffb020;   --as-rev-bg:rgba(255,176,32,.15);    --as-rev-bd:rgba(255,176,32,.45);
  --as-done:#4ade80;  --as-done-bg:rgba(74,222,128,.15);   --as-done-bd:rgba(74,222,128,.45);
}
html[data-theme="light"]{
  --as-todo:#6e6e66;  --as-todo-bg:#f2f2f0;               --as-todo-bd:rgba(0,0,0,.16);
  --as-doing:#2f5fd0; --as-doing-bg:rgba(47,95,208,.10);  --as-doing-bd:rgba(47,95,208,.40);
  --as-rev:#a86500;   --as-rev-bg:rgba(168,101,0,.11);    --as-rev-bd:rgba(168,101,0,.40);
  --as-done:#157a3d;  --as-done-bg:rgba(21,122,61,.12);   --as-done-bd:rgba(21,122,61,.42);
}
select.asgst{ font-weight:600 !important; }
select.asgst-todo  { color:var(--as-todo) !important;  background-color:var(--as-todo-bg) !important;  border-color:var(--as-todo-bd) !important; }
select.asgst-doing { color:var(--as-doing) !important; background-color:var(--as-doing-bg) !important; border-color:var(--as-doing-bd) !important; }
select.asgst-review{ color:var(--as-rev) !important;   background-color:var(--as-rev-bg) !important;   border-color:var(--as-rev-bd) !important; }
select.asgst-done  { color:var(--as-done) !important;  background-color:var(--as-done-bg) !important;  border-color:var(--as-done-bd) !important; }
select.asgst option{ color:var(--text); background:var(--bg-card,var(--bg2)); font-weight:500; }

/* ---- APSA1892 — Dao mau tren nhung o nen xam dam (light mode) ----
   Sprite icon ve bang var(--text)/var(--text2)/var(--text3); tren nen xam dam
   phai dao thanh xam sang, neu khong se trung mau voi nen. */
html[data-theme="light"] .card-icon,
html[data-theme="light"] .card-star,
html[data-theme="light"] #apsaHam {
  --text: #f2f2f0;
  --text2: #dcdcd8;
  --text3: #aeaea6;
  --ink3: #dcdcd8;
  --ink4: #f2f2f0;
  color: #f2f2f0 !important;
}
html[data-theme="light"] #apsaHam:hover { color: #ffffff !important; }
/* So dem trong huy hieu tron: chu xam sang cho noi tren nen cam/do */
html[data-theme="light"] #apsaHam .hdot,
html[data-theme="light"] #apsaSide .as-bell .as-dot {
  color: #f6f6f4 !important;
}

/* ---- APSA1891b — Dong tre han / sap den han: van giu mau theo trang thai ----
   Nen de trong suot cho thay mau canh bao cua ca dong, chi chu + vien theo trang thai.
   Can "html body" de thang do uu tien so voi rule .chktbl trong quotation.html. */
html body table.chktbl tr.it.late select.asgst-todo,
html body table.chktbl tr.it.soon select.asgst-todo   { color:var(--as-todo) !important;  border-color:var(--as-todo-bd) !important; }
html body table.chktbl tr.it.late select.asgst-doing,
html body table.chktbl tr.it.soon select.asgst-doing  { color:var(--as-doing) !important; border-color:var(--as-doing-bd) !important; }
html body table.chktbl tr.it.late select.asgst-review,
html body table.chktbl tr.it.soon select.asgst-review { color:var(--as-rev) !important;   border-color:var(--as-rev-bd) !important; }
html body table.chktbl tr.it.late select.asgst-done,
html body table.chktbl tr.it.soon select.asgst-done   { color:var(--as-done) !important;  border-color:var(--as-done-bd) !important; }

/* ---- APSA1894 — Mau hover cua nut chinh ----
   Truoc day hard-code #eaff4a (vang neon). O nen sang, chu van la trang nen
   hover xong khong doc duoc. Tach thanh token rieng cho tung theme. */
:root{ --btn-hover:#eaff4a; }
html[data-theme="light"]{ --btn-hover:#363a40; }
html[data-theme="light"] .btn:not(.ghost):not(.danger):hover,
html[data-theme="light"] .btn-primary:hover,
html[data-theme="light"] .hbtn.primary:hover,
html[data-theme="light"] .fb-btn:hover{
  color:#ffffff !important;
  border-color:var(--btn-hover) !important;
}
html[data-theme="light"] .modal .btn.primary:hover,
html[data-theme="light"] .modal .btn-add:hover,
html[data-theme="light"] .modal button[type="submit"]:hover,
html[data-theme="light"] .mbox .btn.primary:hover,
html[data-theme="light"] .mbox .btn-add:hover,
html[data-theme="light"] .mbox button[type="submit"]:hover{
  color:#ffffff !important;
}

/* ---- APSA1899 — light mode cho CSS do file .js chen vao ---- */
html[data-theme="light"] #adAsk button.pri{ background:#2b2e33 !important; color:#ffffff !important; }
html[data-theme="light"] .apsa-nt{ background:#fafaf9 !important; }
html[data-theme="light"] .apsa-nt .ti{ background:#f2f2f0 !important; }
html[data-theme="light"] .apsa-cb-list{ background:#fafaf9 !important; }
html[data-theme="light"] tbody tr.grp td{ background:#fafaf9 !important; }
html[data-theme="light"] tbody tr.grp:hover td{ background:#fafaf9 !important; }
html[data-theme="light"] .chev:hover{ color:#3a3a34 !important; }
html[data-theme="light"] .pac{ background:#fafaf9 !important; }
html[data-theme="light"] .pac-i{ color:#3a3a34 !important; }
html[data-theme="light"] .exp-ac{ background:#fafaf9 !important; }
html[data-theme="light"] .exp-ac-i{ color:#3a3a34 !important; }
html[data-theme="light"] .exp-ac-new{ background:#fafaf9 !important; }
html[data-theme="light"] .exp-np{ background:#fafaf9 !important; }
html[data-theme="light"] .exp-np-f{ background:#fafaf9 !important; }
html[data-theme="light"] .exp-np-msg{ color:#b3261e !important; }
html[data-theme="light"] .pydue.due-red{ color:#b3261e !important; }
html[data-theme="light"] .pydue.due-orange{ color:#4d5c00 !important; }
html[data-theme="light"] #statDue .v{ color:#4d5c00 !important; }
html[data-theme="light"] #statDue.late .v{ color:#b3261e !important; }
html[data-theme="light"] #statDue .sub b{ color:#b3261e !important; }
html[data-theme="light"] .expmemo-bx{ background:#fafaf9 !important; }
html[data-theme="light"] .expmemo-ta{ background:#fafaf9 !important; }
html[data-theme="light"] .expmemo-err{ color:#b3261e !important; }
html[data-theme="light"] .pysm:hover{ color:#3a3a34 !important; }
html[data-theme="light"] .pysm.go{ color:#4d5c00 !important; }
html[data-theme="light"] .pysm.up,
html[data-theme="light"] .pysm.ok{ color:#157a3d !important; }
html[data-theme="light"] .pbtn.req{ color:#4d5c00 !important; }
html[data-theme="light"] .pydlg{ background:#fafaf9 !important; }
html[data-theme="light"] .pydlg .s{ color:#3a3a34 !important; }
html[data-theme="light"] .pydrop{ color:#3a3a34 !important; }
html[data-theme="light"] .pyfile{ color:#4d5c00 !important; }
html[data-theme="light"] .pyb{ background:#fafaf9 !important; color:#3a3a34 !important; }
html[data-theme="light"] .pyb.p{ background:#2b2e33 !important; color:#ffffff !important; }
html[data-theme="light"] .exp-payee-sel option,
html[data-theme="light"] .exp-payee-sel optgroup{ background:#fafaf9 !important; color:#3a3a34 !important; }
html[data-theme="light"] .expqr-l select option{ background:#fafaf9 !important; color:#3a3a34 !important; }
html[data-theme="light"] .unc-box{ background:#fafaf9 !important; color:#3a3a34 !important; }
html[data-theme="light"] .unc-b{ background:#f2f2f0 !important; color:#3a3a34 !important; }
html[data-theme="light"] .unc-b:hover{ background:#f2f2f0 !important; }
html[data-theme="light"] .unc-b.danger{ color:#b3261e !important; }
html[data-theme="light"] #pgDeny{ background:#fafaf9 !important; color:#3a3a34 !important; }
html[data-theme="light"] #pgDeny a{ color:#3a3a34 !important; }
html[data-theme="light"] .pmcf{ background:#fafaf9 !important; }
html[data-theme="light"] .pmcf b{ color:#4d5c00 !important; }
html[data-theme="light"] #p-perm .pmtag{ color:#4d5c00 !important; }
html[data-theme="light"] #p-perm .btn.dg{ background:#b3261e !important; color:#ffffff !important; }
html[data-theme="light"] #p-perm .btn.dg:hover{ background:#b3261e !important; color:#ffffff !important; }
html[data-theme="light"] .shbtn.dg{ color:#b3261e !important; }
html[data-theme="light"] .supt .xr:hover{ color:#b3261e !important; }

/* ---- APSA1900 — token cho mau neon + SVG dung thuoc tinh fill/stroke ---- */
:root{ --neon:#dff20d; --neon-rgb:223,242,13; }
html[data-theme="light"]{ --neon:#2b2e33; --neon-rgb:194,84,47; }
html[data-theme="light"] [fill="#dff20d"], html[data-theme="light"] [fill="#DFF20D"],
html[data-theme="light"] [fill="#c9dd00"], html[data-theme="light"] [fill="#eaff4a"]{ fill:#2b2e33 !important; }
html[data-theme="light"] [stroke="#dff20d"], html[data-theme="light"] [stroke="#DFF20D"],
html[data-theme="light"] [stroke="#c9dd00"], html[data-theme="light"] [stroke="#eaff4a"]{ stroke:#2b2e33 !important; }

/* ---- APSA1904b — bao dam chieu cao 28px thang moi rule padding co san ----
   Lap lai ten lop de nang do uu tien cho hon cac rule :not() trong khoi modal. */
html body .btn.btn.btn.btn.btn,
html body .hbtn.hbtn.hbtn.hbtn.hbtn,
html body .btn-primary.btn-primary.btn-primary.btn-primary.btn-primary,
html body .modal .btn.btn.btn.btn.btn,
html body .mbox .btn.btn.btn.btn.btn,
html body .dlg .btn.btn.btn.btn.btn,
html body .modal button.btn.btn.btn.btn,
html body .mbox button.btn.btn.btn.btn,
html body .dlg button.btn.btn.btn.btn {
  height: 28px !important;
  min-height: 28px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  line-height: 26px !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

/* ---- APSA1909 — bo vien mac dinh cua <button> trong sidebar (ap cho moi .as-item, ke ca #apsaSwitch) ---- */
#apsaSide .as-item,
#apsaSide .as-item:hover,
#apsaSide .as-item:focus,
#apsaSide .as-item:focus-visible,
#apsaSide .as-item:active {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  -webkit-tap-highlight-color: transparent;
}

/* APSA1978: select trong hop thoai (modal/overlay/sheet) thuong duoc trang cho
   them padding doc rieng. Khi do chieu cao cung 28px o tren se cat mat chu, nhin
   vao thay o trong tron du da chon dung gia tri. Nhung cho nay de cao tu gian
   theo noi dung, con ngoai hop thoai van giu nguyen 28px nhu cu. */
html .modal select,
html .modal-sub select,
html .sheet select,
html .ov select,
html .qov select,
html .whov select,
html .spov select,
html .fa-ov select,
html .sl-ov select,
html .sl-modal select,
html .overlay select,
html .modal-overlay select,
html [class*="modal"] select,
html dialog select {
    height: auto !important;
    min-height: var(--sel-h) !important;
    line-height: normal !important;
}

/* ===== APSA1991: o chon ngan hang (go chu de tim) ===== */
.bkp{ position:relative }
.bkp input{ width:100% }
.bkp input.bkp-bad{ border-color:rgba(255,170,80,.6) !important }
.bkp-pop{
  display:none; position:absolute; left:0; right:0; top:calc(100% + 4px); z-index:400;
  max-height:280px; overflow:auto; background:var(--bg2, #14171d);
  border:1px solid rgba(255,255,255,.14); border-radius:10px;
  box-shadow:0 12px 30px rgba(0,0,0,.5); padding:4px;
}
.bkp-pop.on{ display:block }
.bkp-it{ padding:7px 9px; border-radius:7px; cursor:pointer; line-height:1.25 }
.bkp-it:hover, .bkp-it.hi{ background:rgba(215,242,5,.12) }
.bkp-it b{ font-size:13px }
.bkp-it .bkp-c{ font-size:11px; opacity:.55; margin-left:7px; letter-spacing:.4px }
.bkp-it .bkp-f{ font-size:11.5px; opacity:.6; margin-top:1px }
.bkp-no{ padding:10px; font-size:12.5px; opacity:.6 }
html[data-theme="light"] .bkp-pop{ background:#fff; border-color:rgba(0,0,0,.14) }
html[data-theme="light"] .bkp-it:hover, html[data-theme="light"] .bkp-it.hi{ background:rgba(0,0,0,.06) }

/* ===== APSA1996: font APTOS (bat trong Cai dat he thong > Chung) ===== */
@font-face{ font-family:"AptosAPSA"; src:url("/fonts-app/Aptos-Regular.ttf") format("truetype"); font-weight:400; font-style:normal; font-display:swap; }
@font-face{ font-family:"AptosAPSA"; src:url("/fonts-app/Aptos-Italic.ttf") format("truetype"); font-weight:400; font-style:italic; font-display:swap; }
@font-face{ font-family:"AptosAPSA"; src:url("/fonts-app/Aptos-SemiBold.ttf") format("truetype"); font-weight:600; font-style:normal; font-display:swap; }
@font-face{ font-family:"AptosAPSA"; src:url("/fonts-app/Aptos-SemiBoldItalic.ttf") format("truetype"); font-weight:600; font-style:italic; font-display:swap; }
@font-face{ font-family:"AptosAPSA"; src:url("/fonts-app/Aptos-Bold.ttf") format("truetype"); font-weight:700; font-style:normal; font-display:swap; }
@font-face{ font-family:"AptosAPSA"; src:url("/fonts-app/Aptos-BoldItalic.ttf") format("truetype"); font-weight:700; font-style:italic; font-display:swap; }
@font-face{ font-family:"AptosAPSA"; src:url("/fonts-app/Aptos-Black.ttf") format("truetype"); font-weight:900; font-style:normal; font-display:swap; }
@font-face{ font-family:"AptosAPSA"; src:url("/fonts-app/Aptos-BlackItalic.ttf") format("truetype"); font-weight:900; font-style:italic; font-display:swap; }

html[data-uifont="aptos"]{
  --font-body:'AptosAPSA',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}
html[data-uifont="aptos"] body,
html[data-uifont="aptos"] body *{ font-family:var(--font-body) !important; }
/* giu nguyen font cho tieu de lon */
html[data-uifont="aptos"] h1,
html[data-uifont="aptos"] h2,
html[data-uifont="aptos"] h3,
html[data-uifont="aptos"] .page-title,
html[data-uifont="aptos"] .sec-title,
html[data-uifont="aptos"] .modal h2,
html[data-uifont="aptos"] .fb-title,
html[data-uifont="aptos"] .card-title,
html[data-uifont="aptos"] .cat-name,
html[data-uifont="aptos"] .title,
html[data-uifont="aptos"] .page-head h1,
html[data-uifont="aptos"] .page-head h2{
  font-family:var(--font-title) !important;
}
/* giu nguyen font cho so lieu / logo */
html[data-uifont="aptos"] .stat .val,
html[data-uifont="aptos"] .avatar,
html[data-uifont="aptos"] .logo-mark,
html[data-uifont="aptos"] .calc-result b,
html[data-uifont="aptos"] .big-num,
html[data-uifont="aptos"] .kpi,
html[data-uifont="aptos"] .apsaLogoV,
html[data-uifont="aptos"] .apsaLogoV *{
  font-family:var(--font-display) !important;
}
html[data-uifont="aptos"] code,
html[data-uifont="aptos"] pre,
html[data-uifont="aptos"] .mono,
html[data-uifont="aptos"] .st-key{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace !important;
}