/* Bảng màu chủ đạo, khai một chỗ duy nhất.
   Giữ ba số kênh màu chứ không phải mã #hex, vì Tailwind dựng lớp theo dạng
   `rgb(var(--brand-600) / <alpha-value>)` và cần chỗ chèn độ trong.
   Đổi bảng màu trong Cài đặt là ghi đè mấy biến này ngay trên thẻ <html>. */
:root{
  --brand-50:249 241 255;
  --brand-100:243 235 250;
  --brand-200:230 216 247;
  --brand-300:205 178 239;
  --brand-500:124 58 237;
  --brand-600:99 14 212;
  --brand-700:90 0 198;
  --brand-cham:79 70 229;   /* sắc thứ hai của mọi dải chuyển màu */
}

  *{font-family:'Inter',sans-serif}
  body{background:#f9fafb;color:#111827}
  .ms{font-family:'Material Symbols Outlined';font-weight:normal;font-style:normal;line-height:1;vertical-align:middle;font-size:20px;-webkit-font-feature-settings:'liga';}
  .grad{background:linear-gradient(135deg,rgb(var(--brand-500)) 0%,rgb(var(--brand-cham)) 100%)}
  .grad-text{background:linear-gradient(135deg,rgb(var(--brand-500)),rgb(var(--brand-cham)));-webkit-background-clip:text;background-clip:text;color:transparent}
  .nav-item{transition:all .15s}
  .nav-item:hover{background:rgb(var(--brand-100))}
  .nav-active{background:rgb(var(--brand-100));color:rgb(var(--brand-600));font-weight:600;position:relative}
  .nav-active::before{content:'';position:absolute;right:0;top:8px;bottom:8px;width:4px;border-radius:9px;background:linear-gradient(180deg,rgb(var(--brand-500)),rgb(var(--brand-cham)))}
  .tab-btn{position:relative;padding:10px 4px;color:#6b7280;font-size:14px;font-weight:500;white-space:nowrap}
  .tab-btn.active{color:rgb(var(--brand-600))}
  .tab-btn.active::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:2px;background:rgb(var(--brand-600));border-radius:9px}
  table tbody tr:hover{background:#f9fafb}
  ::-webkit-scrollbar{width:8px;height:8px}
  ::-webkit-scrollbar-thumb{background:#e5e7eb;border-radius:9px}
  .fade-in{animation:fi .25s ease}
  @keyframes fi{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
  .pop-in{animation:pi .22s cubic-bezier(.16,1,.3,1)}
  @keyframes pi{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
  #modalBox{will-change:transform,opacity;transform-origin:50% 42%}
  #modalBox.m-in{animation:mIn .42s cubic-bezier(.34,1.28,.42,1)}
  #modalBox.m-out{animation:mOut .19s cubic-bezier(.4,0,1,1) forwards}
  @keyframes mIn{0%{opacity:0;transform:translateY(22px) scale(.9)}60%{opacity:1}100%{opacity:1;transform:translateY(0) scale(1)}}
  @keyframes mOut{0%{opacity:1;transform:translateY(0) scale(1)}100%{opacity:0;transform:translateY(6px) scale(.955)}}
  #mBackdrop{will-change:opacity}
  #mBackdrop.b-in{animation:bIn .32s ease}
  #mBackdrop.b-out{animation:bOut .2s ease forwards}
  @keyframes bIn{from{opacity:0}to{opacity:1}}
  @keyframes bOut{from{opacity:1}to{opacity:0}}
  .bill-reveal{display:grid;grid-template-rows:0fr;opacity:0;transform:translateY(-10px) scale(.985);transition:grid-template-rows .34s cubic-bezier(.16,1,.3,1),opacity .24s ease,transform .34s cubic-bezier(.16,1,.3,1);pointer-events:none}
  .bill-reveal.show{grid-template-rows:1fr;opacity:1;transform:none;pointer-events:auto}
  .bill-reveal>div{min-height:0;overflow:hidden}
  .bill-glow{position:relative;overflow:hidden}
  .bill-glow:before{content:'';position:absolute;inset:-1px;border-radius:18px;padding:1px;background:linear-gradient(135deg,rgba(124,58,237,.45),rgba(16,185,129,.34),rgba(79,70,229,.32));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;opacity:.9}
  .bill-apply-ok{animation:billOk .52s cubic-bezier(.16,1,.3,1)}
  @keyframes billOk{0%{transform:scale(.86);opacity:.25}55%{transform:scale(1.12);opacity:1}100%{transform:scale(1);opacity:1}}
  .skel{background:linear-gradient(90deg,#f3f4f6 25%,#eceef1 37%,#f3f4f6 63%);background-size:400% 100%;animation:sk 1.2s ease infinite;border-radius:8px}
  @keyframes sk{0%{background-position:100% 50%}100%{background-position:0 50%}}
  input,select,textarea{outline:none}
  .fld{width:100%;padding:11px 14px;border:1px solid #e5e7eb !important;border-radius:12px !important;font-size:14px;background:#fff;color:#111827;transition:border .15s, box-shadow .15s;line-height:1.4}
  .fld::placeholder{color:#9ca3af}
  .fld:focus{border-color:rgb(var(--brand-500)) !important;box-shadow:0 0 0 3px rgba(124,58,237,.14)}
  .fld:hover:not(:focus):not(:disabled){border-color:#d1c4ea !important}
  .fld:disabled{background:#f9fafb;color:#6b7280}
  select.fld{-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%236b7280'%3E%3Cpath d='M5 8l5 5 5-5z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:16px;padding-right:38px}
  [data-tip]{cursor:help;transition:color .15s}
  [data-tip]:hover{color:rgb(var(--brand-500))}
  #nxTooltip{position:fixed;z-index:9999;max-width:300px;background:#111827;color:#fff;font-size:11.5px;font-weight:400;line-height:1.65;padding:11px 13px;border-radius:12px;box-shadow:0 12px 34px rgba(0,0,0,.28);opacity:0;visibility:hidden;transition:opacity .12s;pointer-events:none;white-space:pre-line;text-align:left}
  #nxTooltip b{color:#c4b5fd}
  .note-tip{position:relative;display:inline-flex;align-items:center;gap:6px;max-width:220px}
  .note-tip .note-preview{display:inline-block;max-width:170px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .note-tip .note-pop{position:absolute;left:0;top:calc(100% + 8px);width:280px;max-width:60vw;white-space:pre-line;line-height:1.45;background:#111827;color:#fff;border-radius:12px;padding:10px 12px;box-shadow:0 18px 40px rgba(17,24,39,.22);font-size:12px;font-weight:500;z-index:80;opacity:0;transform:translateY(-4px);pointer-events:none;transition:opacity .14s ease,transform .14s ease;text-align:left;text-transform:none;letter-spacing:0}
  .note-tip:hover .note-pop{opacity:1;transform:translateY(0)}
  .note-tip .note-pop:before{content:'';position:absolute;left:14px;top:-5px;border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:6px solid #111827}
  .note-editor{position:relative;display:inline-flex;max-width:230px}
  .note-pill{height:30px;max-width:150px;border:1px solid #eee7ff;background:#faf7ff;color:#5b21b6;border-radius:999px;padding:0 9px;display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;transition:background .12s,border .12s,box-shadow .12s}
  .note-pill:hover{background:rgb(var(--brand-100));border-color:#d8c9ff;box-shadow:0 8px 22px rgba(124,58,237,.12)}
  .note-pill.empty{background:#fff;border-color:#e5e7eb;color:#9ca3af}
  .note-editor-pop{position:fixed;left:12px;top:12px;width:330px;max-width:72vw;background:#111827;color:#fff;border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:12px;box-shadow:0 22px 52px rgba(17,24,39,.34);z-index:120;opacity:0;visibility:hidden;transform:translateY(-3px) scale(.985);transition:opacity .1s ease,transform .12s ease,visibility .1s;pointer-events:none;text-align:left}
  .note-editor:hover .note-editor-pop,.note-editor:focus-within .note-editor-pop{opacity:1;visibility:visible;transform:translateY(0) scale(1);pointer-events:auto}
  .note-editor-pop:before{content:'';position:absolute;left:18px;top:-6px;border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:7px solid #111827}
  .note-editor textarea{width:100%;min-height:92px;resize:vertical;border:1px solid rgba(255,255,255,.12);background:#0b1220;color:#fff;border-radius:12px;padding:10px 11px;font-size:12.5px;line-height:1.55;outline:none}
  .note-editor textarea:focus{border-color:#a78bfa;box-shadow:0 0 0 3px rgba(167,139,250,.18)}
  .suggest-card{width:100%;display:flex;align-items:center;gap:12px;text-align:left;padding:11px 12px;border-bottom:1px solid #f3f4f6;background:#fff}
  .suggest-card:hover{background:#f9fafb}
  /* Lưới nhập Excel kiểu Google Sheet */
  .imp-drop{min-height:180px;border:2px dashed #c4b5fd;border-radius:16px;background:linear-gradient(180deg,#faf7ff,#fff);display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;transition:border .15s,background .15s;text-align:center;padding:22px;outline:none}
  .imp-drop:hover,.imp-drop:focus,.imp-drop.drag{border-color:rgb(var(--brand-500));background:#f5f3ff}
  .imp-wrap{max-height:60vh;overflow:auto;border:1px solid #e5e7eb;border-radius:12px;background:#fff;outline:none}
  .imp-table{border-collapse:separate;border-spacing:0;width:max-content;min-width:100%;font-size:13px;user-select:none;-webkit-user-select:none}
  .imp-th{position:sticky;top:0;background:#f8fafc;z-index:2;border-bottom:1px solid #e5e7eb;border-right:1px solid #eef0f3;padding:6px;text-align:left;vertical-align:top}
  .imp-map{width:100%;min-width:118px;border:1px solid #e5e7eb;border-radius:8px;padding:5px 6px;font-size:12px;font-weight:600;background:#fff;color:#5b21b6;cursor:pointer}
  .imp-map.imp-unset{color:#9ca3af;background:#f9fafb}
  .imp-src{font-size:10px;color:#8b5cf6;margin-top:3px;max-width:170px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;padding:1px 3px;border-radius:5px}
  .imp-src:hover{background:#ede9fe}
  .imp-td{border-bottom:1px solid #f1f5f9;border-right:1px solid #f5f6f8;padding:0}
  .imp-cell{min-width:120px;max-width:280px;padding:7px 9px;font-size:13px;color:#111827;min-height:33px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:cell}
  .imp-input{width:100%;min-width:120px;max-width:280px;border:0;padding:6px 8px;font-size:13px;background:#fff;outline:2px solid rgb(var(--brand-500));outline-offset:-2px;color:#111827}
  .imp-td.imp-selected .imp-cell{background:rgba(124,58,237,.10)}
  .imp-td.imp-active .imp-cell{background:#fff;box-shadow:inset 0 0 0 2px rgb(var(--brand-500))}
  .imp-rownum{background:#f8fafc;color:#9ca3af;font-size:11px;text-align:center;min-width:40px;position:sticky;left:0;z-index:1;cursor:pointer}
  .imp-rownum:hover{background:#f1f0fb}
  .imp-th.imp-rownum,.imp-th.imp-corner{z-index:3}
  .imp-corner{min-width:40px;position:sticky;left:0;cursor:pointer;background:#f8fafc}
  .imp-hsel{background:#ddd6fe !important;color:#5b21b6 !important}
  .imp-del{min-width:36px;text-align:center;padding:0 2px}
  .imp-del button{width:24px;height:24px;border-radius:7px;color:#cbd5e1;font-size:16px;line-height:1}
  .imp-del button:hover{background:#fee2e2;color:#ef4444}
  tr.imp-bad .imp-rownum{background:#fef2f2;color:#ef4444}
  tr.imp-bad .imp-cell{background:#fff5f5}
  tr.imp-dup .imp-rownum{background:#fffbeb;color:#d97706}
  tr.imp-dup .imp-cell{background:#fffdf5}
  .imp-help{position:relative;display:inline-flex;align-items:center;color:#9ca3af;cursor:help}
  .imp-help:hover{color:rgb(var(--brand-500))}
  .imp-help-pop{position:absolute;left:0;top:calc(100% + 8px);width:360px;max-width:78vw;background:#111827;color:#e5e7eb;border-radius:12px;padding:12px 14px;font-size:12px;line-height:1.75;box-shadow:0 18px 40px rgba(17,24,39,.3);opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity .14s,transform .14s;z-index:80;text-align:left;pointer-events:none}
  .imp-help-pop b{color:#c4b5fd}
  .imp-help:hover .imp-help-pop{opacity:1;visibility:visible;transform:translateY(0)}
  .imp-menu{position:fixed;z-index:130;background:#fff;border:1px solid #e5e7eb;border-radius:12px;box-shadow:0 18px 44px rgba(17,24,39,.2);padding:6px;min-width:212px}
  .imp-menu-item{display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;border-radius:8px;font-size:13px;color:#374151;text-align:left}
  .imp-menu-item:hover{background:#f5f3ff;color:#5b21b6}
  .imp-menu-item.imp-danger:hover{background:#fef2f2;color:#dc2626}
  .imp-menu-sep{height:1px;background:#eef0f3;margin:5px 6px}
  /* Thanh "Lưu thay đổi" nổi ở trang Cài đặt */
  #setSaveBar{position:fixed;left:50%;bottom:22px;transform:translateX(-50%) translateY(170%);opacity:0;z-index:70;transition:transform .34s cubic-bezier(.16,1,.3,1),opacity .28s;pointer-events:none}
  #setSaveBar.show{transform:translateX(-50%) translateY(0);opacity:1;pointer-events:auto}
  #setSaveBar>div{backdrop-filter:saturate(1.1)}
  .imp-chip{font-size:12px;font-weight:600;color:#5b21b6;background:rgb(var(--brand-100));border:1px solid #e5d8f7;border-radius:999px;padding:3px 10px;transition:background .12s,border .12s}
  .imp-chip:before{content:'+ '}
  .imp-chip:hover{background:#e9d9fb;border-color:#c4b5fd}
  /* Thanh xóa hàng loạt nổi dưới màn hình */
  #bulkBar{position:fixed;left:50%;bottom:22px;transform:translateX(-50%) translateY(170%);opacity:0;z-index:75;transition:transform .34s cubic-bezier(.16,1,.3,1),opacity .28s;pointer-events:none}
  #bulkBar.show{transform:translateX(-50%) translateY(0);opacity:1;pointer-events:auto}

  /* Ô chọn bảng màu trong Cài đặt. Viền đổi theo chính bảng màu đang chọn, nên nhìn là biết
     ngay ô nào đang áp dụng mà không phải đọc chữ. */
  .bm-o{position:relative;display:flex;flex-direction:column;gap:8px;padding:10px;border-radius:14px;border:1px solid #e5e7eb;background:#fff;text-align:left;transition:border-color .15s,box-shadow .15s,transform .15s;cursor:pointer}
  .bm-o:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(17,24,39,.06)}
  .bm-o .bm-dai{display:block;height:34px;border-radius:10px}
  .bm-o .bm-ten{font-size:12.5px;font-weight:600;color:#111827;line-height:1.2}
  .bm-o .bm-tick{position:absolute;top:6px;right:6px;font-size:18px;color:#fff;opacity:0;transition:opacity .15s}
  .bm-o.dang-chon{border-color:rgb(var(--brand-500));box-shadow:0 0 0 3px rgb(var(--brand-500) / .18)}
  .bm-o.dang-chon .bm-tick{opacity:1}
  @keyframes spin{to{transform:rotate(360deg)}}