/* ===== google-account-sync.css ===== */
/* V48 · Google Account + per-user realtime sync. Không thay đổi công thức/bảng dữ liệu. */
#cloudPanel,.v44LoginOverlay{display:none!important}
.g48AuthOverlay{position:fixed;inset:0;z-index:2147483646;display:none;align-items:center;justify-content:center;padding:20px;background:rgba(15,23,42,.46);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.g48AuthOverlay.show{display:flex!important}
.g48AuthCard{width:min(430px,calc(100vw - 28px));padding:26px;border:1px solid rgba(226,232,240,.95);border-radius:24px;background:linear-gradient(180deg,#fff,#f8fbff);box-shadow:0 30px 90px rgba(15,23,42,.28);color:#0f172a}
html[data-theme="dark"] .g48AuthCard{background:linear-gradient(180deg,#111c31,#0f172a);border-color:#334155;color:#e5edf8}
.g48AuthLogo{width:54px;height:54px;margin:0 auto 13px;border-radius:17px;display:grid;place-items:center;background:#fff;border:1px solid #e2e8f0;box-shadow:0 12px 25px rgba(15,23,42,.1);font-size:24px;font-weight:950;color:#4285f4}
.g48AuthCard h2{margin:0;text-align:center;font-size:23px;letter-spacing:-.025em;font-weight:950}
.g48AuthCard p{margin:8px auto 18px;max-width:345px;text-align:center;color:#64748b;line-height:1.55;font-size:13px}
html[data-theme="dark"] .g48AuthCard p{color:#94a3b8}
.g48GoogleBtn{width:100%;height:48px;border:1px solid #dbe3ef;border-radius:14px;background:#fff;color:#172033;font:850 14px Inter,system-ui,sans-serif;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:11px;box-shadow:0 8px 18px rgba(15,23,42,.06)}
.g48GoogleBtn:hover{border-color:#93c5fd;box-shadow:0 0 0 4px rgba(37,99,235,.09)}
.g48GoogleBtn:disabled{opacity:.6;cursor:wait}.g48GoogleG{font-size:19px;font-weight:950;color:#4285f4}
.g48AuthHint{margin-top:12px;padding:10px 11px;border:1px solid #dbeafe;border-radius:12px;background:#eff6ff;color:#1d4ed8;font-size:11.5px;line-height:1.45}
html[data-theme="dark"] .g48AuthHint{background:#12233f;border-color:#244a78;color:#93c5fd}
.g48AuthError{display:none;margin-top:10px;padding:9px 10px;border-radius:11px;background:#fff1f2;color:#be123c;font-size:12px;line-height:1.45}.g48AuthError.show{display:block}
.g48AccountPanel{position:fixed;inset:0;z-index:2147483645;display:none;align-items:flex-start;justify-content:flex-end;padding:64px 14px 14px;background:rgba(15,23,42,.18)}
.g48AccountPanel.show{display:flex!important}
.g48AccountCard{width:min(360px,calc(100vw - 24px));padding:15px;border:1px solid var(--line,#e5eaf2);border-radius:17px;background:var(--card,#fff);box-shadow:0 22px 65px rgba(15,23,42,.22);color:var(--text,#14213d)}
.g48Profile{display:grid;grid-template-columns:44px minmax(0,1fr);gap:11px;align-items:center;padding-bottom:12px;border-bottom:1px solid var(--line,#e5eaf2)}
.g48Avatar{width:44px;height:44px;border-radius:50%;object-fit:cover;border:1px solid var(--line,#e5eaf2);background:var(--card2,#f8fbff)}
.g48AvatarFallback{display:grid;place-items:center;font-weight:950;color:#2563eb}.g48Name{font-weight:950;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.g48Email{font-size:11px;color:var(--muted,#667085);margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.g48SyncState{display:flex;align-items:center;gap:7px;padding:11px 2px;color:var(--muted,#667085);font-size:11.5px}.g48LiveDot{width:8px;height:8px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 4px rgba(34,197,94,.12)}
.g48PanelActions{display:flex;gap:7px}.g48PanelActions button{flex:1;height:34px;border-radius:10px;border:1px solid var(--line,#e5eaf2);background:var(--card2,#f8fbff);color:var(--text,#14213d);font-weight:850;cursor:pointer}.g48PanelActions .danger{color:#e11d48;background:#fff1f3}
#cloudBtn.g48AccountBtn{max-width:230px;display:flex!important;align-items:center!important;gap:6px!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}
#cloudBtn.g48AccountBtn .g48MiniAvatar{width:20px;height:20px;border-radius:50%;object-fit:cover;border:1px solid rgba(148,163,184,.35)}
#cloudBtn.g48AccountBtn .g48MiniFallback{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;background:#dbeafe;color:#2563eb;font-size:9px;font-weight:950}
@media(max-width:640px){.g48AuthCard{padding:22px 18px}.g48AccountPanel{padding:56px 8px 8px}.g48AccountCard{width:100%}#cloudBtn.g48AccountBtn{max-width:155px}.g48AccountBtn .g48AccountText{max-width:105px;overflow:hidden;text-overflow:ellipsis}}

/* ===== pancake-sync.css ===== */
.pksOpenBtn{display:inline-flex;align-items:center;gap:7px;border:1px solid #f0b54d;background:linear-gradient(180deg,#fffaf0,#fff3d6);color:#8a5300;border-radius:12px;padding:8px 11px;font-weight:800;cursor:pointer;white-space:nowrap}
.pksOpenBtn:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(180,112,0,.14)}
.pksOpenBtn[data-sync-state="loading"]{opacity:.78;cursor:progress}
.pksOpenBtn[data-sync-state="ok"]{border-color:#86efac;background:#ecfdf3;color:#166534}
.pksOpenBtn[data-sync-state="error"]{border-color:#fda4af;background:#fff1f3;color:#be123c}
.pksIcon{display:grid;place-items:center;width:22px;height:22px;border-radius:7px;background:#f59e0b;color:#fff;font-size:12px;font-weight:950}
.pksModal{position:fixed;inset:0;z-index:2147483200;display:none;align-items:center;justify-content:center;padding:20px;background:rgba(15,23,42,.55);backdrop-filter:blur(8px)}
.pksModal.show{display:flex}.pksCard{width:min(720px,100%);max-height:min(92vh,900px);overflow:auto;background:#fff;color:#172033;border:1px solid #e5e7eb;border-radius:22px;box-shadow:0 30px 90px rgba(15,23,42,.28);padding:22px}
.pksHead{display:flex;gap:18px;justify-content:space-between;align-items:flex-start}.pksHead h2{margin:2px 0 5px;font-size:24px}.pksHead p{margin:0;color:#64748b;font-size:13px}.pksEyebrow{font-size:10px;letter-spacing:.14em;color:#a16207;font-weight:900}.pksClose{width:36px;height:36px;border:0;border-radius:11px;background:#f1f5f9;color:#475569;font-size:24px;cursor:pointer}
.pksAccount{margin:16px 0;padding:11px 13px;border:1px solid #e2e8f0;background:#f8fafc;border-radius:14px;display:flex;align-items:center;gap:10px}.pksAccount>div{display:flex;flex-direction:column;min-width:0}.pksAccount b,.pksAccount small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pksAccount small{color:#64748b}.pksDot{width:9px;height:9px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 4px #dcfce7}.pksAccountScope{margin-left:auto;font-size:11px;font-weight:800;color:#166534;background:#dcfce7;padding:5px 8px;border-radius:999px}
.pksGrid{display:grid;grid-template-columns:1fr 1fr;gap:13px}.pksGrid label{display:flex;flex-direction:column;gap:6px}.pksGrid label>span{font-size:12px;font-weight:800;color:#334155}.pksGrid input{width:100%;min-height:42px;border:1px solid #cbd5e1;border-radius:11px;padding:9px 11px;background:#fff;color:#0f172a;outline:none}.pksGrid input:focus{border-color:#f59e0b;box-shadow:0 0 0 3px rgba(245,158,11,.13)}.pksWide{grid-column:1/-1}.pksWide small{color:#64748b;line-height:1.45}
.pksTokenRow{display:flex;align-items:center;gap:8px}.pksTokenRow input{flex:1}.pksBadge{font-size:11px;font-weight:850;padding:7px 9px;border-radius:999px;white-space:nowrap}.pksBadge.ok{background:#dcfce7;color:#166534}.pksBadge.warn{background:#fef3c7;color:#92400e}
.pksDivider{height:1px;background:#e5e7eb;margin:17px 0}.pksDates{margin-bottom:12px}.pksCheck{display:flex;align-items:flex-start;gap:9px;padding:10px 0;font-size:13px;color:#334155}.pksCheck input{margin-top:2px}
.pksStatus{min-height:0;margin:8px 0 0;padding:0;border-radius:12px;font-size:12px;line-height:1.5;white-space:pre-wrap}.pksStatus:not(:empty){padding:10px 12px}.pksStatus.loading{background:#eff6ff;color:#1d4ed8}.pksStatus.ok{background:#ecfdf5;color:#166534}.pksStatus.warn{background:#fffbeb;color:#92400e}.pksStatus.error{background:#fff1f2;color:#be123c}
.pksActions{display:flex;justify-content:flex-end;gap:9px;margin-top:16px;flex-wrap:wrap}.pksBtn{border:1px solid #cbd5e1;background:#fff;color:#334155;border-radius:11px;padding:10px 13px;font-weight:800;cursor:pointer}.pksBtn:hover:not(:disabled){background:#f8fafc}.pksBtn.primary{border-color:#d97706;background:linear-gradient(135deg,#f59e0b,#d97706);color:#fff}.pksBtn.ghost{margin-right:auto}.pksBtn:disabled{opacity:.55;cursor:wait}.pksFoot{margin-top:14px;border-top:1px dashed #e2e8f0;padding-top:11px;color:#64748b;font-size:11px;line-height:1.5}
html[data-theme="dark"] .pksCard,body.dark .pksCard{background:#111827;color:#e5e7eb;border-color:#334155}html[data-theme="dark"] .pksGrid input,body.dark .pksGrid input{background:#0f172a;color:#e5e7eb;border-color:#475569}html[data-theme="dark"] .pksAccount,body.dark .pksAccount{background:#0f172a;border-color:#334155}
@media(max-width:650px){.pksModal{padding:0;align-items:flex-end}.pksCard{border-radius:20px 20px 0 0;max-height:95vh;padding:18px}.pksGrid{grid-template-columns:1fr}.pksWide{grid-column:auto}.pksTokenRow{align-items:stretch;flex-direction:column}.pksBadge{align-self:flex-start}.pksActions{display:grid;grid-template-columns:1fr 1fr}.pksBtn{width:100%}.pksBtn.primary{grid-column:1/-1}.pksBtn.ghost{margin:0}.pksOpenBtn span:last-child{display:none}}

.pksStatusMapWrap:not(:empty){margin:8px 0 12px;padding:12px;border:1px solid #f4c56a;background:#fffbeb;border-radius:13px}.pksMapTitle{display:flex;flex-direction:column;gap:3px;margin-bottom:9px;color:#92400e}.pksMapTitle small{font-size:11px;line-height:1.4;font-weight:500}.pksStatusMapWrap label{display:grid;grid-template-columns:minmax(100px,160px) 1fr;gap:9px;align-items:center;margin-top:7px}.pksStatusMapWrap label>span{font-size:12px;font-weight:800;color:#78350f}.pksStatusMapWrap label>span small{font-weight:500;color:#a16207}.pksStatusMapWrap select{min-height:38px;border:1px solid #e8b44f;border-radius:10px;padding:7px 9px;background:#fff;color:#422006;outline:none}
@media(max-width:650px){.pksStatusMapWrap label{grid-template-columns:1fr}}


/* V2: trang người dùng chỉ đồng bộ; cài đặt API chuyển hoàn toàn sang Admin */
.pksUserCard{width:min(720px,100%)}
.pksConfigNotice{display:grid;gap:4px;padding:12px 13px;border-radius:12px;border:1px solid var(--line,#e5eaf2);background:var(--card2,#f8fbff);margin:10px 0 0}
.pksConfigNotice b{font-size:13px}.pksConfigNotice span{font-size:12px;color:var(--muted,#667085);line-height:1.5}
.pksConfigNotice.ok{border-color:#86efac;background:var(--greenBg,#ecfdf3)}
.pksConfigNotice.warn{border-color:#fdba74;background:var(--orangeBg,#fff7ed)}

/* ===== ui-v50.css ===== */
/* V50 UI ONLY — không thay đổi công thức / xử lý dữ liệu / Firebase */

/* ===== KHU VỰC UPLOAD + CHỌN THÁNG ===== */
.layout.compactTop{
  grid-template-columns:minmax(0,1fr) 410px!important;
  align-items:start!important;
  gap:10px!important;
  margin-bottom:7px!important;
}

/* Upload nhỏ gọn hơn */
.compactTop .upload{
  padding:6px 8px!important;
  min-height:0!important;
}
.uploadGrid.compactUpload{
  grid-template-columns:132px minmax(0,1fr)!important;
  gap:8px!important;
  align-items:start!important;
}
.compactTop .upload .title{
  font-size:11.5px!important;
  margin:0 0 4px!important;
}
.miniDrop{
  height:34px!important;
  min-height:34px!important;
  padding:0 7px!important;
  border-radius:9px!important;
}
.miniDrop b{font-size:11px!important}
.uploadRight{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  grid-template-rows:auto auto!important;
  column-gap:7px!important;
  row-gap:4px!important;
  align-items:start!important;
}
.fileTitleRow{
  grid-column:1 / -1!important;
  margin:0!important;
  min-height:25px!important;
}
.fileTitleRow .title{font-size:11.5px!important}
.compactFileList{
  grid-column:1!important;
  min-height:27px!important;
  max-height:31px!important;
  margin:0!important;
  gap:4px!important;
  overflow:auto!important;
}
.compactFileList > div[style]{padding:5px 6px!important;font-size:10.5px!important}
.filePill{
  min-width:126px!important;
  max-width:195px!important;
  min-height:24px!important;
  padding:3px 22px 3px 7px!important;
  font-size:10.5px!important;
  border-radius:8px!important;
}
.filePill button{top:2px!important;right:3px!important;width:18px!important;height:18px!important}
.uploadActions{
  grid-column:2!important;
  grid-row:2!important;
  margin:0!important;
  display:flex!important;
  flex-wrap:nowrap!important;
  gap:4px!important;
  align-items:start!important;
}
.uploadActions .btn,.fileTitleRow .btn{
  height:25px!important;
  min-height:25px!important;
  padding:0 7px!important;
  font-size:10.5px!important;
  white-space:nowrap!important;
}

/* Khu vực tháng to, dễ nhìn/easy click hơn */
.compactSide{
  padding:9px 10px!important;
  min-height:0!important;
  border-radius:14px!important;
}
.sideTitleRow{
  margin-bottom:7px!important;
}
.sideTitleRow .title{
  font-size:13.5px!important;
  margin:0!important;
}
.sideTitleRow .smBtn{
  width:30px!important;
  height:30px!important;
  min-height:30px!important;
  font-size:14px!important;
}
.compactMonthBox{
  max-height:132px!important;
  gap:7px!important;
  overflow:auto!important;
  padding-right:2px!important;
}
.monthItem{
  height:42px!important;
  min-height:42px!important;
  padding:0 7px 0 10px!important;
  border-radius:11px!important;
  gap:8px!important;
  border:1px solid #cfe0f8!important;
  background:linear-gradient(180deg,var(--input),rgba(248,251,255,.88))!important;
  box-shadow:0 2px 7px rgba(15,23,42,.035)!important;
}
.monthItem:hover{
  border-color:#93c5fd!important;
  background:var(--blueBg)!important;
}
.monthItem.active{
  border-color:#82b3ff!important;
  box-shadow:0 0 0 3px rgba(37,99,235,.10)!important;
}
.monthItem input{
  width:17px!important;
  height:17px!important;
  flex:0 0 auto!important;
}
.monthItem .dot{
  width:11px!important;
  height:11px!important;
  flex:0 0 auto!important;
}
.monthName{
  max-width:none!important;
  flex:1 1 auto!important;
  font-size:13px!important;
  font-weight:950!important;
  letter-spacing:.01em!important;
}
.monthCount{
  min-width:30px!important;
  font-size:11.5px!important;
  font-weight:800!important;
}
.monthActions{
  gap:3px!important;
  margin-left:2px!important;
}
.iconBtn,.editMonth,.deleteMonth,.uploadMonth{
  width:28px!important;
  height:28px!important;
  min-width:28px!important;
  border-radius:8px!important;
  font-size:13px!important;
}
.sideActions{
  margin-top:7px!important;
}
.sideActions .btn{
  height:31px!important;
  min-height:31px!important;
  padding:0 11px!important;
  font-size:11.5px!important;
}

/* ===== BẢNG SO SÁNH — CHỈ THAY UI ===== */
.table{
  min-width:1688px!important;
}
.table col.metric{
  width:72px!important;
}
.col1,.sticky1{width:40px!important}
.col2,.sticky2{width:118px!important}
.col3,.sticky3{width:220px!important}
.sticky2{left:40px!important}
.sticky3{left:158px!important}
.table thead tr:first-child th{
  height:30px!important;
}
.table thead tr:nth-child(2) th{
  top:30px!important;
  height:38px!important;
  padding:4px 3px!important;
  white-space:normal!important;
  overflow:visible!important;
  text-overflow:clip!important;
  overflow-wrap:normal!important;
  word-break:keep-all!important;
  line-height:1.08!important;
  font-size:10.5px!important;
  font-weight:900!important;
}
.monthHead1,.monthHead2{
  font-size:15px!important;
  font-weight:950!important;
  letter-spacing:.015em!important;
}
.totalRow td{
  top:68px!important;
}
.table td{
  white-space:nowrap!important;
}
.table .left,.table td.sticky3{
  white-space:normal!important;
}

/* Tooltip trực quan cho các tên cột rút gọn */
.table thead tr:nth-child(2) th[data-v50-short]{
  cursor:help!important;
}

/* Dark mode */
html[data-theme="dark"] .monthItem{
  background:linear-gradient(180deg,#101827,#0f172a)!important;
  border-color:#2a3a55!important;
}
html[data-theme="dark"] .monthItem:hover,
html[data-theme="dark"] .monthItem.active{
  background:#12233f!important;
  border-color:#3b82f6!important;
}

@media(max-width:1200px){
  .layout.compactTop{grid-template-columns:minmax(0,1fr) 370px!important}
  .uploadGrid.compactUpload{grid-template-columns:120px minmax(0,1fr)!important}
}
@media(max-width:900px){
  .layout.compactTop{grid-template-columns:1fr!important}
  .uploadGrid.compactUpload{grid-template-columns:110px minmax(0,1fr)!important}
  .compactMonthBox{max-height:180px!important}
  .monthItem{height:40px!important;min-height:40px!important}
}
@media(max-width:640px){
  .uploadGrid.compactUpload{grid-template-columns:1fr!important}
  .uploadRight{grid-template-columns:1fr!important}
  .fileTitleRow,.compactFileList,.uploadActions{grid-column:1!important}
  .uploadActions{grid-row:auto!important;flex-wrap:wrap!important}
  .layout.compactTop{gap:7px!important}
}

/* ===== ui-v51.css ===== */
/* V51 UI ONLY — chỉ làm lại khu vực Upload + Chọn tháng.
   Không thay đổi công thức, dữ liệu, sự kiện, Firebase, Google Login hoặc bảng. */

/* ===== TOP CONTROL AREA ===== */
.layout.compactTop{
  grid-template-columns:minmax(0,1fr) 430px!important;
  gap:12px!important;
  align-items:stretch!important;
  margin-bottom:9px!important;
}

.compactTop > .card{
  position:relative!important;
  overflow:hidden!important;
  border:1px solid #dce7f5!important;
  border-radius:16px!important;
  background:linear-gradient(145deg,rgba(255,255,255,.98),rgba(248,251,255,.96))!important;
  box-shadow:0 8px 24px rgba(15,23,42,.055)!important;
}
.compactTop > .card::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:2px;
  background:linear-gradient(90deg,#2563eb 0%,#38bdf8 48%,#22c55e 100%);
  opacity:.72;
  pointer-events:none;
}

/* ===== UPLOAD CARD ===== */
.compactTop .upload{
  min-height:112px!important;
  padding:11px 12px!important;
}
.uploadGrid.compactUpload{
  grid-template-columns:190px minmax(0,1fr)!important;
  gap:13px!important;
  align-items:stretch!important;
}
.compactTop .uploadLeft{
  display:flex!important;
  flex-direction:column!important;
  min-width:0!important;
}
.compactTop .upload .title,
.compactTop .side .title{
  font-size:13px!important;
  line-height:1.1!important;
  font-weight:950!important;
  letter-spacing:-.01em!important;
  margin:0 0 7px!important;
}

/* Dropzone rõ ràng hơn nhưng vẫn nhỏ gọn */
.compactTop .miniDrop{
  height:62px!important;
  min-height:62px!important;
  border:1.5px dashed #8eb8ff!important;
  border-radius:12px!important;
  background:linear-gradient(135deg,#f8fbff 0%,#eef6ff 100%)!important;
  color:#64748b!important;
  padding:0 10px!important;
  transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease,background .18s ease!important;
}
.compactTop .miniDrop:hover,
.compactTop .miniDrop.drag{
  border-color:#2563eb!important;
  background:linear-gradient(135deg,#f5f9ff 0%,#e8f2ff 100%)!important;
  box-shadow:0 0 0 4px rgba(37,99,235,.09)!important;
  transform:translateY(-1px)!important;
}
.compactTop .miniDrop > div{
  display:grid!important;
  grid-template-columns:30px 1fr!important;
  grid-template-rows:auto auto!important;
  align-items:center!important;
  column-gap:8px!important;
  text-align:left!important;
}
.compactTop .miniDrop > div::before{
  content:"↑";
  grid-row:1 / span 2;
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  border-radius:9px;
  background:#2563eb;
  color:#fff;
  font-size:17px;
  line-height:1;
  font-weight:950;
  box-shadow:0 7px 15px rgba(37,99,235,.18);
}
.compactTop .miniDrop b{
  font-size:12px!important;
  color:#1d4ed8!important;
  line-height:1.1!important;
}
.compactTop .miniDrop small{
  display:block!important;
  margin-top:2px!important;
  font-size:9.5px!important;
  color:#8492a6!important;
  line-height:1.15!important;
}

/* Phần file bên phải: header -> file list -> actions */
.compactTop .uploadRight{
  min-width:0!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  grid-template-rows:25px minmax(34px,auto) 27px!important;
  column-gap:9px!important;
  row-gap:5px!important;
  align-content:start!important;
}
.compactTop .fileTitleRow{
  grid-column:1 / -1!important;
  grid-row:1!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:10px!important;
  margin:0!important;
  min-width:0!important;
}
.compactTop .fileTitleRow .title{
  margin:0!important;
  white-space:nowrap!important;
}
.compactTop #fileCount{
  display:inline-flex!important;
  align-items:center!important;
  min-height:20px!important;
  margin-left:4px!important;
  padding:0 7px!important;
  border-radius:999px!important;
  background:#eef4ff!important;
  color:#54709c!important;
  font-size:10px!important;
  font-weight:900!important;
}
.compactTop .fileTitleRow .btn.primary{
  height:27px!important;
  min-height:27px!important;
  padding:0 10px!important;
  border-radius:9px!important;
  font-size:10.5px!important;
  box-shadow:0 5px 12px rgba(37,99,235,.14)!important;
}
.compactTop .compactFileList{
  grid-column:1 / -1!important;
  grid-row:2!important;
  display:flex!important;
  align-items:center!important;
  align-content:center!important;
  gap:6px!important;
  min-height:34px!important;
  max-height:40px!important;
  margin:0!important;
  padding:1px 1px 2px!important;
  overflow:auto hidden!important;
  flex-wrap:nowrap!important;
  scrollbar-width:thin!important;
}
.compactTop .compactFileList > div[style]{
  width:100%!important;
  min-height:32px!important;
  display:flex!important;
  align-items:center!important;
  padding:0 10px!important;
  border:1px dashed #d5dfed!important;
  border-radius:9px!important;
  background:#fbfdff!important;
  color:#8190a6!important;
  font-size:10.5px!important;
}
.compactTop .filePill{
  flex:0 0 auto!important;
  min-width:145px!important;
  max-width:260px!important;
  min-height:31px!important;
  height:31px!important;
  display:flex!important;
  align-items:center!important;
  padding:0 27px 0 9px!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  border:1px solid #bfd8ff!important;
  border-radius:9px!important;
  background:linear-gradient(180deg,#f3f8ff,#ebf4ff)!important;
  color:#1e63d9!important;
  font-size:10.5px!important;
  font-weight:900!important;
  box-shadow:none!important;
}
.compactTop .filePill small{display:none!important}
.compactTop .filePill button{
  top:5px!important;
  right:5px!important;
  width:20px!important;
  height:20px!important;
  display:grid!important;
  place-items:center!important;
  border-radius:6px!important;
  font-size:15px!important;
  line-height:1!important;
}
.compactTop .filePill button:hover{background:#dbeafe!important}
.compactTop .uploadActions{
  grid-column:1 / -1!important;
  grid-row:3!important;
  display:flex!important;
  justify-content:flex-end!important;
  align-items:center!important;
  gap:5px!important;
  margin:0!important;
  min-width:0!important;
}
.compactTop .uploadActions .btn{
  height:27px!important;
  min-height:27px!important;
  padding:0 9px!important;
  border-radius:8px!important;
  font-size:10px!important;
  background:#fff!important;
  box-shadow:none!important;
}
.compactTop .uploadActions .btn:hover{
  background:#f7faff!important;
  border-color:#bfd4f2!important;
}

/* ===== MONTH CARD ===== */
.compactTop .compactSide{
  min-height:112px!important;
  padding:11px 12px!important;
  display:flex!important;
  flex-direction:column!important;
}
.compactTop .sideTitleRow{
  height:28px!important;
  min-height:28px!important;
  margin:0 0 7px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:8px!important;
}
.compactTop .sideTitleRow .title{
  margin:0!important;
  font-size:14px!important;
}
.compactTop .sideTitleRow .smBtn{
  width:30px!important;
  min-width:30px!important;
  height:30px!important;
  min-height:30px!important;
  padding:0!important;
  border-radius:9px!important;
  background:#f7faff!important;
  color:#46566d!important;
  border-color:#dbe6f5!important;
  box-shadow:none!important;
  font-size:14px!important;
}
.compactTop .sideTitleRow .smBtn:hover{
  color:#2563eb!important;
  border-color:#bdd5fb!important;
  background:#eef5ff!important;
}
.compactTop .compactMonthBox{
  flex:1 1 auto!important;
  display:grid!important;
  gap:6px!important;
  max-height:101px!important;
  min-height:42px!important;
  overflow:auto!important;
  padding:1px 2px 1px 0!important;
  scrollbar-width:thin!important;
}
.compactTop .monthItem{
  width:100%!important;
  height:43px!important;
  min-height:43px!important;
  padding:0 7px 0 10px!important;
  gap:8px!important;
  overflow:hidden!important;
  border:1px solid #d8e3f2!important;
  border-radius:11px!important;
  background:#fff!important;
  box-shadow:0 2px 7px rgba(15,23,42,.025)!important;
  transition:border-color .15s ease,background .15s ease,box-shadow .15s ease,transform .15s ease!important;
}
.compactTop .monthItem:hover{
  border-color:#9fc2fb!important;
  background:#f8fbff!important;
  transform:translateY(-1px)!important;
}
.compactTop .monthItem.active{
  border-color:#6ea5ff!important;
  background:linear-gradient(90deg,#eff6ff,#f9fcff)!important;
  box-shadow:0 0 0 3px rgba(37,99,235,.08)!important;
}
.compactTop .monthItem input{
  width:16px!important;
  height:16px!important;
  margin:0!important;
  flex:0 0 auto!important;
  accent-color:#2563eb!important;
}
.compactTop .monthItem .dot{
  width:10px!important;
  height:10px!important;
  flex:0 0 auto!important;
  box-shadow:0 0 0 3px rgba(37,99,235,.08)!important;
}
.compactTop .monthName{
  flex:1 1 auto!important;
  min-width:0!important;
  max-width:none!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  font-size:13px!important;
  line-height:1!important;
  font-weight:950!important;
  letter-spacing:.005em!important;
}
.compactTop .monthCount{
  flex:0 0 auto!important;
  min-width:30px!important;
  height:22px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:0 7px!important;
  border-radius:999px!important;
  background:#f1f5f9!important;
  color:#64748b!important;
  font-size:10px!important;
  font-weight:900!important;
}
.compactTop .monthActions{
  flex:0 0 auto!important;
  display:inline-flex!important;
  align-items:center!important;
  gap:2px!important;
  margin-left:0!important;
}
.compactTop .iconBtn,
.compactTop .editMonth,
.compactTop .deleteMonth,
.compactTop .uploadMonth{
  width:27px!important;
  min-width:27px!important;
  height:27px!important;
  min-height:27px!important;
  border-radius:8px!important;
  font-size:12px!important;
  opacity:.72!important;
  transition:opacity .15s ease,background .15s ease,border-color .15s ease!important;
}
.compactTop .monthItem:hover .iconBtn{opacity:1!important}
.compactTop .compactMonthBox > div[style]{
  min-height:43px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:7px!important;
  padding:0 12px!important;
  border:1px dashed #cedbec!important;
  border-radius:11px!important;
  background:#fbfdff!important;
  color:#8190a6!important;
  font-size:11px!important;
  font-weight:750!important;
}
.compactTop .compactMonthBox > div[style]::before{
  content:"◷";
  font-size:15px;
  color:#7da7e7;
}
.compactTop .sideActions{
  display:flex!important;
  margin-top:7px!important;
  gap:6px!important;
}
.compactTop .sideActions .btn{
  width:100%!important;
  height:32px!important;
  min-height:32px!important;
  border-radius:9px!important;
  font-size:10.5px!important;
  font-weight:900!important;
  box-shadow:0 6px 13px rgba(37,99,235,.13)!important;
}

/* ===== DARK MODE ===== */
html[data-theme="dark"] .compactTop > .card{
  background:linear-gradient(145deg,#101827,#0f172a)!important;
  border-color:#26364e!important;
}
html[data-theme="dark"] .compactTop .miniDrop{
  background:linear-gradient(135deg,#101b2e,#101827)!important;
  border-color:#355581!important;
}
html[data-theme="dark"] .compactTop .miniDrop:hover{
  background:#12233f!important;
  border-color:#60a5fa!important;
}
html[data-theme="dark"] .compactTop #fileCount,
html[data-theme="dark"] .compactTop .monthCount{
  background:#17243a!important;
  color:#9fb1ca!important;
}
html[data-theme="dark"] .compactTop .compactFileList > div[style],
html[data-theme="dark"] .compactTop .compactMonthBox > div[style]{
  background:#0d1625!important;
  border-color:#2b3b53!important;
  color:#8fa0b8!important;
}
html[data-theme="dark"] .compactTop .filePill{
  background:#12233f!important;
  border-color:#315b92!important;
  color:#8bc1ff!important;
}
html[data-theme="dark"] .compactTop .uploadActions .btn,
html[data-theme="dark"] .compactTop .sideTitleRow .smBtn,
html[data-theme="dark"] .compactTop .monthItem{
  background:#101827!important;
  border-color:#2a3a52!important;
}
html[data-theme="dark"] .compactTop .monthItem:hover,
html[data-theme="dark"] .compactTop .monthItem.active{
  background:#12233f!important;
  border-color:#4b84d8!important;
}

/* ===== RESPONSIVE ===== */
@media(max-width:1280px){
  .layout.compactTop{grid-template-columns:minmax(0,1fr) 390px!important}
  .uploadGrid.compactUpload{grid-template-columns:170px minmax(0,1fr)!important}
}
@media(max-width:1020px){
  .layout.compactTop{grid-template-columns:1fr!important}
  .compactTop .compactMonthBox{max-height:150px!important}
  .compactTop .compactSide{min-height:auto!important}
}
@media(max-width:720px){
  .uploadGrid.compactUpload{grid-template-columns:1fr!important}
  .compactTop .uploadRight{grid-template-columns:1fr!important;grid-template-rows:auto auto auto!important}
  .compactTop .fileTitleRow,.compactTop .compactFileList,.compactTop .uploadActions{grid-column:1!important}
  .compactTop .uploadActions{justify-content:flex-start!important;flex-wrap:wrap!important}
  .compactTop .miniDrop{height:58px!important;min-height:58px!important}
  .compactTop .monthActions{gap:1px!important}
  .compactTop .iconBtn,.compactTop .editMonth,.compactTop .deleteMonth,.compactTop .uploadMonth{width:25px!important;min-width:25px!important;height:25px!important;min-height:25px!important}
}

/* ===== ui-v52.css ===== */
/* V52 UI ONLY
   Mục tiêu: thu nhỏ tối đa khu vực tải file + mở rộng tối đa khu vực chọn tháng.
   Không thay đổi công thức, dữ liệu, event handler, Excel, Firebase, Google Login hay Admin. */

/* =========================================================
   1) TOP LAYOUT — UPLOAD NHỎ / CHỌN THÁNG CHIẾM PHẦN LỚN
   ========================================================= */
.layout.compactTop{
  grid-template-columns:330px minmax(0,1fr)!important;
  gap:12px!important;
  align-items:start!important;
  margin-bottom:10px!important;
}

.compactTop > .card{
  border-radius:17px!important;
  border:1px solid rgba(202,216,236,.92)!important;
  background:linear-gradient(145deg,rgba(255,255,255,.98),rgba(247,250,255,.96))!important;
  box-shadow:0 8px 24px rgba(15,23,42,.055)!important;
  isolation:isolate!important;
}
.compactTop > .card::before{
  height:2px!important;
  background:linear-gradient(90deg,#2563eb,#38bdf8,#22c55e,#2563eb)!important;
  background-size:240% 100%!important;
  opacity:.8!important;
  animation:v52Accent 8s linear infinite!important;
}
@keyframes v52Accent{to{background-position:240% 0}}

/* =========================================================
   2) UPLOAD — COMPACT UTILITY CARD
   ========================================================= */
.compactTop .upload{
  min-height:0!important;
  height:auto!important;
  padding:7px 8px!important;
}
.uploadGrid.compactUpload{
  grid-template-columns:92px minmax(0,1fr)!important;
  gap:8px!important;
  align-items:start!important;
}
.compactTop .uploadLeft{
  min-width:0!important;
  gap:3px!important;
}
.compactTop .upload .title{
  margin:0!important;
  font-size:10.5px!important;
  line-height:1!important;
  font-weight:950!important;
  letter-spacing:-.01em!important;
  white-space:nowrap!important;
}

/* Dropzone rất nhỏ nhưng vẫn giữ nguyên click + drag/drop */
.compactTop .miniDrop{
  position:relative!important;
  height:47px!important;
  min-height:47px!important;
  padding:0 5px!important;
  border:1.5px dashed #8fb8fb!important;
  border-radius:11px!important;
  background:linear-gradient(145deg,#f8fbff,#edf5ff)!important;
  overflow:hidden!important;
  cursor:pointer!important;
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease,background .18s ease!important;
}
.compactTop .miniDrop::after{
  content:"";
  position:absolute;
  width:34px;
  height:34px;
  right:-15px;
  top:-16px;
  border-radius:50%;
  background:rgba(37,99,235,.09);
  transition:transform .3s ease!important;
  pointer-events:none;
}
.compactTop .miniDrop:hover,
.compactTop .miniDrop.drag{
  border-color:#2563eb!important;
  background:linear-gradient(145deg,#f4f9ff,#e7f1ff)!important;
  box-shadow:0 0 0 3px rgba(37,99,235,.08),0 6px 16px rgba(37,99,235,.09)!important;
  transform:translateY(-1px)!important;
}
.compactTop .miniDrop:hover::after,
.compactTop .miniDrop.drag::after{transform:scale(1.45)!important}
.compactTop .miniDrop > div{
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:2px!important;
  height:100%!important;
  text-align:center!important;
}
.compactTop .miniDrop > div::before{
  content:"↑"!important;
  width:20px!important;
  height:20px!important;
  display:grid!important;
  place-items:center!important;
  border-radius:7px!important;
  background:#2563eb!important;
  color:#fff!important;
  font-size:12px!important;
  font-weight:950!important;
  line-height:1!important;
  box-shadow:0 4px 10px rgba(37,99,235,.20)!important;
  animation:v52UploadFloat 2.8s ease-in-out infinite!important;
}
@keyframes v52UploadFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
.compactTop .miniDrop b{
  max-width:100%!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  color:#2563eb!important;
  font-size:9.5px!important;
  line-height:1!important;
}
.compactTop .miniDrop small{display:none!important}

.compactTop .uploadRight{
  min-width:0!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  grid-template-rows:22px 28px 23px!important;
  gap:3px 5px!important;
  align-content:start!important;
}
.compactTop .fileTitleRow{
  grid-column:1 / -1!important;
  grid-row:1!important;
  min-height:22px!important;
  margin:0!important;
  gap:4px!important;
}
.compactTop .fileTitleRow .title{
  margin:0!important;
  font-size:10.5px!important;
  white-space:nowrap!important;
}
.compactTop #fileCount{
  min-height:17px!important;
  height:17px!important;
  padding:0 5px!important;
  margin-left:2px!important;
  font-size:8.5px!important;
  border-radius:999px!important;
}
.compactTop .fileTitleRow .btn.primary{
  height:22px!important;
  min-height:22px!important;
  padding:0 7px!important;
  border-radius:8px!important;
  font-size:8.5px!important;
  font-weight:900!important;
  box-shadow:0 4px 9px rgba(37,99,235,.12)!important;
  transition:transform .15s ease,box-shadow .15s ease!important;
}
.compactTop .fileTitleRow .btn.primary:hover{
  transform:translateY(-1px)!important;
  box-shadow:0 6px 12px rgba(37,99,235,.17)!important;
}
.compactTop .compactFileList{
  grid-column:1 / -1!important;
  grid-row:2!important;
  min-height:28px!important;
  height:28px!important;
  max-height:28px!important;
  margin:0!important;
  padding:0!important;
  gap:4px!important;
  overflow:auto hidden!important;
  flex-wrap:nowrap!important;
  scrollbar-width:none!important;
}
.compactTop .compactFileList::-webkit-scrollbar{display:none!important}
.compactTop .compactFileList > div[style]{
  min-height:26px!important;
  height:26px!important;
  padding:0 7px!important;
  border-radius:8px!important;
  font-size:8.5px!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
.compactTop .filePill{
  flex:0 0 auto!important;
  min-width:105px!important;
  max-width:185px!important;
  height:26px!important;
  min-height:26px!important;
  padding:0 23px 0 7px!important;
  border-radius:8px!important;
  font-size:8.8px!important;
  line-height:26px!important;
  animation:v52ChipIn .22s ease-out both!important;
}
@keyframes v52ChipIn{from{opacity:0;transform:translateY(4px) scale(.98)}to{opacity:1;transform:none}}
.compactTop .filePill button{
  top:4px!important;
  right:4px!important;
  width:18px!important;
  height:18px!important;
  border-radius:6px!important;
  font-size:13px!important;
}
.compactTop .uploadActions{
  grid-column:1 / -1!important;
  grid-row:3!important;
  display:flex!important;
  justify-content:flex-end!important;
  gap:3px!important;
  margin:0!important;
}
.compactTop .uploadActions .btn{
  height:23px!important;
  min-height:23px!important;
  padding:0 6px!important;
  border-radius:7px!important;
  font-size:8.2px!important;
  font-weight:850!important;
  white-space:nowrap!important;
  box-shadow:none!important;
  transition:background .15s ease,border-color .15s ease,transform .15s ease!important;
}
.compactTop .uploadActions .btn:hover{transform:translateY(-1px)!important}

/* =========================================================
   3) CHỌN THÁNG — LARGE FOCUS AREA
   ========================================================= */
.compactTop .compactSide{
  min-height:138px!important;
  padding:10px 11px 9px!important;
  display:grid!important;
  grid-template-rows:31px minmax(62px,1fr) 32px!important;
  gap:7px!important;
}
.compactTop .sideTitleRow{
  height:31px!important;
  min-height:31px!important;
  margin:0!important;
}
.compactTop .sideTitleRow .title{
  margin:0!important;
  font-size:15px!important;
  font-weight:950!important;
  letter-spacing:-.015em!important;
}
.compactTop .sideTitleRow .smBtn{
  width:31px!important;
  min-width:31px!important;
  height:31px!important;
  min-height:31px!important;
  padding:0!important;
  border-radius:10px!important;
  font-size:14px!important;
  transition:transform .18s ease,background .18s ease,border-color .18s ease!important;
}
.compactTop .sideTitleRow .smBtn:hover{transform:rotate(-10deg) scale(1.05)!important}

/* Các tháng bung rộng theo toàn bộ chiều ngang còn lại */
.compactTop .compactMonthBox{
  min-height:62px!important;
  max-height:132px!important;
  display:grid!important;
  grid-template-columns:repeat(auto-fit,minmax(235px,1fr))!important;
  grid-auto-rows:58px!important;
  gap:8px!important;
  padding:1px 2px 2px!important;
  overflow:auto!important;
  align-content:start!important;
  scrollbar-width:thin!important;
}
.compactTop .monthItem{
  position:relative!important;
  width:100%!important;
  height:58px!important;
  min-height:58px!important;
  padding:0 10px 0 12px!important;
  gap:10px!important;
  border:1px solid #d5e0ef!important;
  border-radius:14px!important;
  background:linear-gradient(145deg,#fff,#f8fbff)!important;
  box-shadow:0 4px 12px rgba(15,23,42,.045)!important;
  overflow:hidden!important;
  isolation:isolate!important;
  animation:v52MonthIn .26s cubic-bezier(.2,.8,.2,1) both!important;
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease,background .18s ease!important;
}
@keyframes v52MonthIn{from{opacity:0;transform:translateY(6px) scale(.985)}to{opacity:1;transform:none}}
.compactTop .monthItem::before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:3px;
  border-radius:14px 0 0 14px;
  background:var(--month-color,#2563eb);
  opacity:.55;
  transition:width .18s ease,opacity .18s ease!important;
  z-index:-1;
}
.compactTop .monthItem:hover{
  transform:translateY(-2px)!important;
  border-color:#91b9f5!important;
  background:linear-gradient(145deg,#fff,#f2f7ff)!important;
  box-shadow:0 9px 20px rgba(37,99,235,.09)!important;
}
.compactTop .monthItem:hover::before{width:5px;opacity:.9}
.compactTop .monthItem.active{
  border-color:#70a5f7!important;
  background:linear-gradient(145deg,#eef5ff,#fbfdff)!important;
  box-shadow:0 0 0 3px rgba(37,99,235,.08),0 8px 20px rgba(37,99,235,.08)!important;
}
.compactTop .monthItem.active::after{
  content:"";
  position:absolute;
  right:-20px;
  top:-22px;
  width:65px;
  height:65px;
  border-radius:50%;
  border:1px solid rgba(37,99,235,.13);
  animation:v52MonthPulse 2.8s ease-in-out infinite!important;
  pointer-events:none;
}
@keyframes v52MonthPulse{0%,100%{transform:scale(.9);opacity:.35}50%{transform:scale(1.18);opacity:.8}}
.compactTop .monthItem input{
  width:18px!important;
  height:18px!important;
  min-width:18px!important;
  margin:0!important;
  accent-color:#2563eb!important;
}
.compactTop .monthItem .dot{
  width:12px!important;
  height:12px!important;
  min-width:12px!important;
  box-shadow:0 0 0 4px rgba(37,99,235,.07)!important;
  transition:transform .18s ease!important;
}
.compactTop .monthItem:hover .dot{transform:scale(1.12)!important}
.compactTop .monthName{
  flex:1 1 auto!important;
  min-width:0!important;
  max-width:none!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  font-size:14px!important;
  line-height:1!important;
  font-weight:950!important;
  letter-spacing:.01em!important;
}
.compactTop .monthCount{
  flex:0 0 auto!important;
  min-width:36px!important;
  height:25px!important;
  padding:0 9px!important;
  border-radius:999px!important;
  background:#eef3fa!important;
  color:#5f6f86!important;
  font-size:10.5px!important;
  font-weight:900!important;
}
.compactTop .monthActions{
  flex:0 0 auto!important;
  display:inline-flex!important;
  align-items:center!important;
  gap:3px!important;
  margin-left:2px!important;
}
.compactTop .iconBtn,
.compactTop .editMonth,
.compactTop .deleteMonth,
.compactTop .uploadMonth{
  width:30px!important;
  min-width:30px!important;
  height:30px!important;
  min-height:30px!important;
  border-radius:9px!important;
  font-size:12px!important;
  opacity:.68!important;
  transform:translateY(0)!important;
  transition:opacity .15s ease,transform .15s ease,background .15s ease,border-color .15s ease!important;
}
.compactTop .monthItem:hover .iconBtn,
.compactTop .monthItem:hover .editMonth,
.compactTop .monthItem:hover .deleteMonth,
.compactTop .monthItem:hover .uploadMonth{opacity:1!important}
.compactTop .iconBtn:hover,
.compactTop .editMonth:hover,
.compactTop .deleteMonth:hover,
.compactTop .uploadMonth:hover{transform:translateY(-1px) scale(1.04)!important}

/* Empty state bung rộng toàn vùng chọn tháng */
.compactTop .compactMonthBox > div[style]{
  grid-column:1 / -1!important;
  min-height:58px!important;
  height:58px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:8px!important;
  padding:0 14px!important;
  border:1px dashed #bfd0e6!important;
  border-radius:14px!important;
  background:linear-gradient(145deg,#fbfdff,#f5f9ff)!important;
  color:#78889e!important;
  font-size:11px!important;
  font-weight:800!important;
}
.compactTop .compactMonthBox > div[style]::before{
  content:"◷"!important;
  display:grid!important;
  place-items:center!important;
  width:25px!important;
  height:25px!important;
  border-radius:8px!important;
  background:#edf4ff!important;
  color:#4d83d8!important;
  font-size:14px!important;
  animation:v52EmptyPulse 2.2s ease-in-out infinite!important;
}
@keyframes v52EmptyPulse{0%,100%{opacity:.65}50%{opacity:1}}

.compactTop .sideActions{
  display:flex!important;
  align-items:center!important;
  margin:0!important;
  gap:7px!important;
}
.compactTop .sideActions .btn{
  width:auto!important;
  min-width:170px!important;
  height:32px!important;
  min-height:32px!important;
  padding:0 15px!important;
  border-radius:10px!important;
  font-size:10.5px!important;
  font-weight:950!important;
  box-shadow:0 6px 14px rgba(37,99,235,.13)!important;
  transition:transform .16s ease,box-shadow .16s ease!important;
}
.compactTop .sideActions .btn:hover{
  transform:translateY(-1px)!important;
  box-shadow:0 9px 18px rgba(37,99,235,.18)!important;
}

/* =========================================================
   4) DARK MODE
   ========================================================= */
html[data-theme="dark"] .compactTop > .card{
  background:linear-gradient(145deg,#101827,#0e1726)!important;
  border-color:#26364e!important;
}
html[data-theme="dark"] .compactTop .miniDrop{
  background:linear-gradient(145deg,#101b2e,#111b2b)!important;
  border-color:#355581!important;
}
html[data-theme="dark"] .compactTop .miniDrop:hover,
html[data-theme="dark"] .compactTop .miniDrop.drag{
  background:#12233f!important;
  border-color:#60a5fa!important;
}
html[data-theme="dark"] .compactTop .monthItem{
  background:linear-gradient(145deg,#101827,#111b2b)!important;
  border-color:#2a3a52!important;
}
html[data-theme="dark"] .compactTop .monthItem:hover,
html[data-theme="dark"] .compactTop .monthItem.active{
  background:linear-gradient(145deg,#12233f,#111c30)!important;
  border-color:#4b84d8!important;
}
html[data-theme="dark"] .compactTop .compactMonthBox > div[style]{
  background:#0d1625!important;
  border-color:#2b3b53!important;
  color:#8fa0b8!important;
}
html[data-theme="dark"] .compactTop .compactMonthBox > div[style]::before{
  background:#17243a!important;
  color:#7fb2ff!important;
}

/* =========================================================
   5) RESPONSIVE
   ========================================================= */
@media(min-width:1700px){
  .layout.compactTop{grid-template-columns:310px minmax(0,1fr)!important}
  .compactTop .compactMonthBox{grid-template-columns:repeat(auto-fit,minmax(270px,1fr))!important}
}
@media(max-width:1280px){
  .layout.compactTop{grid-template-columns:300px minmax(0,1fr)!important;gap:9px!important}
  .uploadGrid.compactUpload{grid-template-columns:80px minmax(0,1fr)!important;gap:6px!important}
  .compactTop .compactMonthBox{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))!important}
  .compactTop .monthActions{gap:1px!important}
  .compactTop .iconBtn,.compactTop .editMonth,.compactTop .deleteMonth,.compactTop .uploadMonth{width:27px!important;min-width:27px!important;height:27px!important;min-height:27px!important}
}
@media(max-width:980px){
  .layout.compactTop{grid-template-columns:1fr!important}
  .compactTop .upload{max-width:none!important}
  .uploadGrid.compactUpload{grid-template-columns:110px minmax(0,1fr)!important}
  .compactTop .compactSide{min-height:150px!important}
  .compactTop .compactMonthBox{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))!important;max-height:200px!important}
}
@media(max-width:640px){
  .uploadGrid.compactUpload{grid-template-columns:74px minmax(0,1fr)!important}
  .compactTop .upload{padding:6px!important}
  .compactTop .miniDrop{height:45px!important;min-height:45px!important}
  .compactTop .uploadActions{overflow:auto hidden!important;justify-content:flex-start!important}
  .compactTop .compactSide{padding:9px!important;grid-template-rows:31px auto 32px!important}
  .compactTop .compactMonthBox{grid-template-columns:1fr!important;grid-auto-rows:54px!important;max-height:245px!important}
  .compactTop .monthItem{height:54px!important;min-height:54px!important;padding-left:9px!important;gap:7px!important}
  .compactTop .monthName{font-size:12.5px!important}
  .compactTop .monthCount{min-width:31px!important;padding:0 6px!important}
  .compactTop .sideActions .btn{width:100%!important;min-width:0!important}
}

/* Tôn trọng cài đặt giảm chuyển động của hệ điều hành */
@media(prefers-reduced-motion:reduce){
  .compactTop *,
  .compactTop *::before,
  .compactTop *::after{
    animation:none!important;
    transition:none!important;
    scroll-behavior:auto!important;
  }
}

/* ===== ui-v53.css ===== */
/* V53 — UI ONLY
   Chỉ sửa giao diện khu Tải file Excel + Chọn tháng.
   Không thay đổi công thức, dữ liệu, xử lý Excel, event handler,
   Google Login, Firebase realtime, bộ lọc, biểu đồ, ghi chú hay Admin. */

/* =========================================================
   1. KHUNG TRÊN: upload gọn, chọn tháng chiếm tối đa diện tích
   ========================================================= */
.layout.compactTop{
  grid-template-columns:320px minmax(0,1fr)!important;
  gap:10px!important;
  align-items:stretch!important;
  margin-bottom:10px!important;
}
.compactTop > .card{
  min-width:0!important;
  height:112px!important;
  min-height:112px!important;
  border:1px solid #d8e4f3!important;
  border-radius:16px!important;
  background:rgba(255,255,255,.97)!important;
  box-shadow:0 7px 22px rgba(15,23,42,.055)!important;
  overflow:hidden!important;
}
.compactTop > .card::before{
  height:2px!important;
  opacity:.72!important;
  animation:none!important;
  background:linear-gradient(90deg,#2563eb,#58a6ff,#38c6d9)!important;
}

/* =========================================================
   2. TẢI FILE — nhỏ nhưng không bị bó chữ / chật nút
   ========================================================= */
.compactTop .upload{
  padding:8px!important;
  height:112px!important;
  min-height:112px!important;
}
.uploadGrid.compactUpload{
  height:100%!important;
  display:grid!important;
  grid-template-columns:86px minmax(0,1fr)!important;
  gap:8px!important;
  align-items:stretch!important;
}
.compactTop .uploadLeft{
  display:grid!important;
  grid-template-rows:18px minmax(0,1fr)!important;
  gap:5px!important;
  min-width:0!important;
}
.compactTop .upload .title{
  margin:0!important;
  font-size:10.5px!important;
  line-height:18px!important;
  font-weight:950!important;
  letter-spacing:-.015em!important;
  white-space:nowrap!important;
}
.compactTop .miniDrop{
  width:86px!important;
  height:73px!important;
  min-height:73px!important;
  padding:0 5px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  border:1.5px dashed #8db7f8!important;
  border-radius:12px!important;
  background:linear-gradient(145deg,#f8fbff,#edf5ff)!important;
  box-shadow:none!important;
  overflow:hidden!important;
  transition:border-color .16s ease,background .16s ease,box-shadow .16s ease,transform .16s ease!important;
}
.compactTop .miniDrop:hover,
.compactTop .miniDrop.drag{
  transform:translateY(-1px)!important;
  border-color:#2563eb!important;
  background:#edf5ff!important;
  box-shadow:0 0 0 3px rgba(37,99,235,.07)!important;
}
.compactTop .miniDrop::after{display:none!important}
.compactTop .miniDrop > div{
  height:auto!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:5px!important;
  text-align:center!important;
}
.compactTop .miniDrop > div::before{
  content:"↑"!important;
  width:25px!important;
  height:25px!important;
  display:grid!important;
  place-items:center!important;
  border-radius:8px!important;
  background:linear-gradient(145deg,#2563eb,#3b82f6)!important;
  color:#fff!important;
  font-size:14px!important;
  line-height:1!important;
  font-weight:950!important;
  box-shadow:0 5px 12px rgba(37,99,235,.18)!important;
  animation:none!important;
}
.compactTop .miniDrop b{
  max-width:74px!important;
  color:#2563eb!important;
  font-size:9px!important;
  line-height:1.15!important;
  font-weight:900!important;
  white-space:normal!important;
}
.compactTop .miniDrop small{display:none!important}

.compactTop .uploadRight{
  min-width:0!important;
  height:100%!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  grid-template-rows:22px 31px 27px!important;
  gap:4px!important;
  align-content:start!important;
}
.compactTop .fileTitleRow{
  grid-column:1/-1!important;
  grid-row:1!important;
  min-height:22px!important;
  height:22px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:5px!important;
  margin:0!important;
}
.compactTop .fileTitleRow .title{
  font-size:10px!important;
  line-height:1!important;
  margin:0!important;
}
.compactTop #fileCount{
  height:18px!important;
  min-height:18px!important;
  padding:0 6px!important;
  margin-left:3px!important;
  border-radius:999px!important;
  font-size:8.5px!important;
  background:#edf4ff!important;
  color:#52709e!important;
}
.compactTop .fileTitleRow .btn.primary{
  height:22px!important;
  min-height:22px!important;
  padding:0 7px!important;
  border-radius:8px!important;
  font-size:8.5px!important;
  line-height:1!important;
  box-shadow:none!important;
}
.compactTop .compactFileList{
  grid-column:1/-1!important;
  grid-row:2!important;
  min-width:0!important;
  min-height:31px!important;
  height:31px!important;
  max-height:31px!important;
  display:flex!important;
  align-items:center!important;
  gap:4px!important;
  margin:0!important;
  padding:0!important;
  overflow:auto hidden!important;
  flex-wrap:nowrap!important;
  scrollbar-width:none!important;
}
.compactTop .compactFileList::-webkit-scrollbar{display:none!important}
.compactTop .compactFileList > div[style]{
  width:100%!important;
  min-height:29px!important;
  height:29px!important;
  display:flex!important;
  align-items:center!important;
  padding:0 8px!important;
  border:1px dashed #d5e0ee!important;
  border-radius:8px!important;
  background:#fafcff!important;
  color:#8a97aa!important;
  font-size:9px!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
.compactTop .filePill{
  flex:0 0 auto!important;
  min-width:0!important;
  max-width:100%!important;
  height:29px!important;
  min-height:29px!important;
  padding:0 24px 0 8px!important;
  border:1px solid #bfd8ff!important;
  border-radius:8px!important;
  background:#eff6ff!important;
  color:#1f63d6!important;
  font-size:9px!important;
  line-height:29px!important;
  font-weight:900!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  animation:none!important;
}
.compactTop .filePill button{
  top:5px!important;
  right:4px!important;
  width:19px!important;
  height:19px!important;
  border-radius:6px!important;
  font-size:13px!important;
}
.compactTop .uploadActions{
  grid-column:1/-1!important;
  grid-row:3!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:4px!important;
  margin:0!important;
  white-space:nowrap!important;
}
.compactTop .uploadActions .btn{
  height:27px!important;
  min-height:27px!important;
  padding:0 7px!important;
  border-radius:8px!important;
  font-size:8.5px!important;
  font-weight:850!important;
  box-shadow:none!important;
}

/* =========================================================
   3. CHỌN THÁNG — lớn, ngang, không còn khoảng trống vô ích
   ========================================================= */
.compactTop .compactSide{
  position:relative!important;
  height:112px!important;
  min-height:112px!important;
  padding:8px 10px!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  grid-template-rows:28px minmax(0,1fr)!important;
  column-gap:10px!important;
  row-gap:6px!important;
}
.compactTop .sideTitleRow{
  grid-column:1/-1!important;
  grid-row:1!important;
  height:28px!important;
  min-height:28px!important;
  margin:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
}
.compactTop .sideTitleRow .title{
  margin:0!important;
  font-size:15px!important;
  line-height:28px!important;
  font-weight:950!important;
  letter-spacing:-.02em!important;
}
.compactTop .sideTitleRow .smBtn{
  width:28px!important;
  min-width:28px!important;
  height:28px!important;
  min-height:28px!important;
  padding:0!important;
  border-radius:9px!important;
  font-size:13px!important;
  box-shadow:none!important;
  transition:transform .16s ease,background .16s ease,border-color .16s ease!important;
}
.compactTop .sideTitleRow .smBtn:hover{
  transform:rotate(-8deg)!important;
  background:#edf5ff!important;
  border-color:#bfd5f7!important;
}

/* Một hàng tháng lớn, cuộn ngang khi có nhiều tháng */
.compactTop .compactMonthBox{
  grid-column:1!important;
  grid-row:2!important;
  min-width:0!important;
  min-height:58px!important;
  height:58px!important;
  max-height:58px!important;
  display:flex!important;
  align-items:stretch!important;
  gap:7px!important;
  padding:0!important;
  overflow-x:auto!important;
  overflow-y:hidden!important;
  scroll-snap-type:x proximity!important;
  scrollbar-width:thin!important;
  scrollbar-color:#c7d8ef transparent!important;
}
.compactTop .compactMonthBox::-webkit-scrollbar{height:4px!important}
.compactTop .compactMonthBox::-webkit-scrollbar-thumb{background:#c7d8ef!important;border-radius:999px!important}
.compactTop .monthItem{
  position:relative!important;
  flex:0 0 clamp(220px,19vw,285px)!important;
  width:auto!important;
  height:58px!important;
  min-height:58px!important;
  padding:0 8px 0 11px!important;
  gap:8px!important;
  border:1px solid #d4e0ef!important;
  border-radius:12px!important;
  background:linear-gradient(145deg,#fff,#f8fbff)!important;
  box-shadow:0 2px 8px rgba(15,23,42,.035)!important;
  scroll-snap-align:start!important;
  overflow:hidden!important;
  animation:none!important;
  transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease,background .16s ease!important;
}
.compactTop .monthItem::before{
  width:3px!important;
  opacity:.72!important;
}
.compactTop .monthItem::after{display:none!important}
.compactTop .monthItem:hover{
  transform:translateY(-1px)!important;
  border-color:#9dbff4!important;
  box-shadow:0 7px 16px rgba(37,99,235,.07)!important;
}
.compactTop .monthItem.active{
  border-color:#73a6f4!important;
  background:linear-gradient(145deg,#eef5ff,#fbfdff)!important;
  box-shadow:0 0 0 2px rgba(37,99,235,.07),0 5px 13px rgba(37,99,235,.06)!important;
}
.compactTop .monthItem input{
  width:17px!important;
  min-width:17px!important;
  height:17px!important;
  margin:0!important;
}
.compactTop .monthItem .dot{
  width:10px!important;
  min-width:10px!important;
  height:10px!important;
  box-shadow:0 0 0 3px rgba(37,99,235,.06)!important;
}
.compactTop .monthName{
  flex:1 1 auto!important;
  min-width:64px!important;
  max-width:none!important;
  font-size:13px!important;
  line-height:1!important;
  font-weight:950!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
.compactTop .monthCount{
  flex:0 0 auto!important;
  min-width:34px!important;
  height:23px!important;
  padding:0 7px!important;
  border-radius:999px!important;
  background:#edf2f8!important;
  color:#617188!important;
  font-size:9.5px!important;
  font-weight:900!important;
}
.compactTop .monthActions{
  flex:0 0 auto!important;
  display:inline-flex!important;
  align-items:center!important;
  gap:2px!important;
  margin-left:0!important;
}
.compactTop .iconBtn,
.compactTop .editMonth,
.compactTop .deleteMonth,
.compactTop .uploadMonth{
  width:26px!important;
  min-width:26px!important;
  height:26px!important;
  min-height:26px!important;
  border-radius:8px!important;
  font-size:11px!important;
  opacity:.72!important;
}
.compactTop .monthItem:hover .iconBtn,
.compactTop .monthItem:hover .editMonth,
.compactTop .monthItem:hover .deleteMonth,
.compactTop .monthItem:hover .uploadMonth{opacity:1!important}

/* Empty state nhỏ, sạch — không còn khung dashed khổng lồ */
.compactTop .compactMonthBox > div[style]{
  flex:1 1 auto!important;
  width:auto!important;
  min-width:180px!important;
  min-height:58px!important;
  height:58px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:8px!important;
  padding:0 13px!important;
  border:1px solid #e0e8f3!important;
  border-radius:11px!important;
  background:linear-gradient(145deg,#fafcff,#f6f9fd)!important;
  color:#8190a5!important;
  font-size:10.5px!important;
  font-weight:800!important;
}
.compactTop .compactMonthBox > div[style]::before{
  content:"◷"!important;
  flex:0 0 auto!important;
  width:25px!important;
  height:25px!important;
  display:grid!important;
  place-items:center!important;
  border-radius:8px!important;
  background:#edf4ff!important;
  color:#4d83d8!important;
  font-size:13px!important;
  animation:none!important;
}

/* Nút chọn 2 tháng nằm cùng hàng với danh sách tháng */
.compactTop .sideActions{
  grid-column:2!important;
  grid-row:2!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  margin:0!important;
  gap:0!important;
}
.compactTop .sideActions .btn{
  width:148px!important;
  min-width:148px!important;
  height:38px!important;
  min-height:38px!important;
  padding:0 12px!important;
  border-radius:10px!important;
  font-size:10px!important;
  line-height:1!important;
  font-weight:950!important;
  box-shadow:0 5px 13px rgba(37,99,235,.12)!important;
  transition:transform .15s ease,box-shadow .15s ease!important;
}
.compactTop .sideActions .btn:hover{
  transform:translateY(-1px)!important;
  box-shadow:0 8px 17px rgba(37,99,235,.16)!important;
}

/* =========================================================
   4. DARK MODE
   ========================================================= */
html[data-theme="dark"] .compactTop > .card{
  background:#101827!important;
  border-color:#26364e!important;
}
html[data-theme="dark"] .compactTop .miniDrop{
  background:#101d30!important;
  border-color:#355581!important;
}
html[data-theme="dark"] .compactTop .compactFileList > div[style],
html[data-theme="dark"] .compactTop .compactMonthBox > div[style]{
  background:#0e1828!important;
  border-color:#2b3b53!important;
  color:#8ea0b8!important;
}
html[data-theme="dark"] .compactTop .monthItem{
  background:#111b2b!important;
  border-color:#2a3a52!important;
}
html[data-theme="dark"] .compactTop .monthItem:hover,
html[data-theme="dark"] .compactTop .monthItem.active{
  background:#12233f!important;
  border-color:#4b84d8!important;
}

/* =========================================================
   5. RESPONSIVE
   ========================================================= */
@media(min-width:1700px){
  .layout.compactTop{grid-template-columns:300px minmax(0,1fr)!important}
  .compactTop .monthItem{flex-basis:270px!important}
}
@media(max-width:1250px){
  .layout.compactTop{grid-template-columns:300px minmax(0,1fr)!important;gap:8px!important}
  .compactTop .sideActions .btn{width:132px!important;min-width:132px!important;padding:0 9px!important}
  .compactTop .monthItem{flex-basis:210px!important}
}
@media(max-width:900px){
  .layout.compactTop{grid-template-columns:1fr!important}
  .compactTop > .card{height:auto!important;min-height:112px!important}
  .compactTop .upload{height:112px!important}
  .compactTop .compactSide{height:112px!important}
}
@media(max-width:640px){
  .compactTop .upload{height:auto!important;min-height:120px!important}
  .uploadGrid.compactUpload{grid-template-columns:78px minmax(0,1fr)!important}
  .compactTop .miniDrop{width:78px!important}
  .compactTop .compactSide{
    height:auto!important;
    min-height:154px!important;
    grid-template-columns:1fr!important;
    grid-template-rows:28px 58px 38px!important;
    row-gap:6px!important;
  }
  .compactTop .compactMonthBox{grid-column:1!important;grid-row:2!important}
  .compactTop .sideActions{grid-column:1!important;grid-row:3!important;justify-content:stretch!important}
  .compactTop .sideActions .btn{width:100%!important;min-width:0!important}
  .compactTop .monthItem{flex-basis:205px!important}
}

@media(prefers-reduced-motion:reduce){
  .compactTop *,
  .compactTop *::before,
  .compactTop *::after{
    transition:none!important;
    animation:none!important;
  }
}

/* ===== ui-v54.css ===== */
/* V54 — UI ONLY
   Chỉ làm lại UI khu Tải file Excel + Chọn tháng with animation.
   Giữ nguyên 100% chức năng, dữ liệu, công thức và event handler.
*/

:root{
  --v54-blue:#2563eb;
  --v54-blue-2:#4f8cff;
  --v54-cyan:#2ec5d3;
  --v54-line:#d9e6f6;
  --v54-soft:#f7fbff;
  --v54-shadow:0 12px 36px rgba(37,99,235,.08);
}

/* ===== animation ===== */
@keyframes v54FadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes v54Pulse{0%,100%{box-shadow:0 0 0 0 rgba(37,99,235,.14)}50%{box-shadow:0 0 0 8px rgba(37,99,235,0)}}
@keyframes v54Float{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
@keyframes v54Sweep{from{transform:translateX(-120%)}to{transform:translateX(140%)}}

/* ===== top layout ===== */
.layout.compactTop{
  grid-template-columns:360px minmax(0,1fr)!important;
  gap:14px!important;
  align-items:stretch!important;
}
.layout.compactTop > .card{
  position:relative!important;
  overflow:hidden!important;
  border-radius:22px!important;
  border:1px solid var(--v54-line)!important;
  background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(247,251,255,.96))!important;
  box-shadow:var(--v54-shadow)!important;
  animation:v54FadeUp .38s ease both!important;
}
.layout.compactTop > .card::before{
  content:""!important;
  position:absolute!important;left:0;right:0;top:0;height:3px!important;
  background:linear-gradient(90deg,var(--v54-blue),var(--v54-blue-2),var(--v54-cyan))!important;
  opacity:.9!important;
}
.layout.compactTop > .card::after{
  content:""!important;
  position:absolute!important;top:0;left:0;width:22%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent)!important;
  transform:translateX(-150%);
  animation:v54Sweep 5s ease-in-out infinite!important;
  pointer-events:none!important;
}

/* ===== upload ===== */
.compactTop .upload{
  padding:14px!important;
  min-height:140px!important;
  height:140px!important;
}
.uploadGrid.compactUpload{
  grid-template-columns:108px minmax(0,1fr)!important;
  gap:14px!important;
  align-items:stretch!important;
  height:100%!important;
}
.compactTop .uploadLeft{
  display:grid!important;
  grid-template-rows:24px minmax(0,1fr)!important;
  gap:8px!important;
}
.compactTop .upload .title,
.compactTop .sideTitleRow .title{
  display:flex!important;align-items:center!important;gap:8px!important;
  margin:0!important;
  color:#132544!important;
  font-size:16px!important;
  font-weight:950!important;
  line-height:1.1!important;
  letter-spacing:-.02em!important;
}
.compactTop .miniDrop{
  width:108px!important;
  min-height:92px!important;
  height:92px!important;
  border:1.5px dashed #8db7f8!important;
  border-radius:18px!important;
  background:linear-gradient(180deg,#fcfeff,#edf5ff)!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.7),0 8px 20px rgba(37,99,235,.08)!important;
  transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease,background .2s ease!important;
}
.compactTop .miniDrop:hover,
.compactTop .miniDrop.drag{
  transform:translateY(-2px)!important;
  border-color:var(--v54-blue)!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.8),0 14px 24px rgba(37,99,235,.12)!important;
  background:linear-gradient(180deg,#fafdff,#eaf3ff)!important;
}
.compactTop .miniDrop > div{gap:8px!important}
.compactTop .miniDrop > div::before{
  content:"⬆"!important;
  width:34px!important;height:34px!important;border-radius:12px!important;
  display:grid!important;place-items:center!important;
  background:linear-gradient(145deg,var(--v54-blue),var(--v54-blue-2))!important;
  color:#fff!important;font-size:18px!important;font-weight:900!important;
  box-shadow:0 10px 18px rgba(37,99,235,.20)!important;
  animation:v54Float 1.8s ease-in-out infinite!important;
}
.compactTop .miniDrop b{
  max-width:90px!important;
  color:var(--v54-blue)!important;
  font-size:13px!important;
  line-height:1.15!important;
  font-weight:900!important;
}
.compactTop .miniDrop small{display:none!important}

.compactTop .uploadRight{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  grid-template-rows:28px 42px auto!important;
  gap:8px!important;
  height:100%!important;
  min-width:0!important;
}
.compactTop .fileTitleRow{
  grid-column:1/-1!important;
  height:28px!important;
  display:flex!important;align-items:center!important;justify-content:space-between!important;gap:8px!important;
}
.compactTop .fileTitleRow .title{
  font-size:15px!important;
}
.compactTop #fileCount{
  height:24px!important;min-height:24px!important;padding:0 10px!important;border-radius:999px!important;
  background:#eaf2ff!important;color:#54709c!important;font-size:11px!important;font-weight:900!important;
}
.compactTop .fileTitleRow .btn.primary{
  height:32px!important;min-height:32px!important;padding:0 14px!important;border-radius:12px!important;
  font-size:12px!important;font-weight:900!important;box-shadow:0 8px 16px rgba(37,99,235,.16)!important;
  transition:transform .16s ease,box-shadow .16s ease!important;
}
.compactTop .fileTitleRow .btn.primary:hover{transform:translateY(-1px)!important;box-shadow:0 12px 20px rgba(37,99,235,.2)!important}
.compactTop .compactFileList{
  grid-column:1/-1!important;
  min-height:42px!important;max-height:42px!important;height:42px!important;
  display:flex!important;align-items:center!important;gap:8px!important;overflow:auto hidden!important;flex-wrap:nowrap!important;
  scrollbar-width:none!important;
}
.compactTop .compactFileList::-webkit-scrollbar{display:none!important}
.compactTop .compactFileList > div[style]{
  width:100%!important;height:40px!important;display:flex!important;align-items:center!important;
  padding:0 14px!important;border:1px dashed #d7e4f4!important;border-radius:14px!important;
  background:linear-gradient(180deg,#fbfdff,#f5f9ff)!important;color:#8090a8!important;
  font-size:13px!important;font-weight:700!important;
}
.compactTop .filePill{
  position:relative!important;
  height:40px!important;line-height:40px!important;min-height:40px!important;
  padding:0 34px 0 14px!important;border-radius:14px!important;border:1px solid #bed6ff!important;
  background:linear-gradient(180deg,#f2f7ff,#e8f0ff)!important;color:#1d5fd2!important;
  font-size:13px!important;font-weight:900!important;box-shadow:0 6px 16px rgba(37,99,235,.08)!important;
  animation:v54FadeUp .28s ease both!important;
}
.compactTop .filePill button{
  top:8px!important;right:8px!important;width:22px!important;height:22px!important;border-radius:8px!important;
  font-size:14px!important;background:#fff!important;border:1px solid #d8e5fa!important;
}
.compactTop .uploadActions{
  grid-column:1/-1!important;display:flex!important;justify-content:flex-end!important;gap:8px!important;
}
.compactTop .uploadActions .btn{
  height:34px!important;min-height:34px!important;padding:0 12px!important;border-radius:12px!important;
  font-size:12px!important;font-weight:850!important;background:#fff!important;
  transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease!important;
}
.compactTop .uploadActions .btn:hover{transform:translateY(-1px)!important;box-shadow:0 8px 16px rgba(15,23,42,.06)!important}

/* ===== month side ===== */
.compactTop .compactSide{
  padding:14px!important;
  height:140px!important;min-height:140px!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  grid-template-rows:28px minmax(0,1fr)!important;
  gap:10px 14px!important;
}
.compactTop .sideTitleRow{
  grid-column:1/-1!important;height:28px!important;display:flex!important;align-items:center!important;justify-content:space-between!important;
}
.compactTop .sideTitleRow .smBtn{
  width:34px!important;height:34px!important;min-width:34px!important;border-radius:12px!important;
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease!important;
}
.compactTop .sideTitleRow .smBtn:hover{
  transform:rotate(-12deg) scale(1.03)!important;
  box-shadow:0 8px 18px rgba(37,99,235,.10)!important;
}
.compactTop .compactMonthBox{
  grid-column:1!important;grid-row:2!important;min-width:0!important;
  display:flex!important;align-items:stretch!important;gap:12px!important;
  overflow:auto hidden!important;padding:2px 2px 10px 2px!important;
  scrollbar-width:thin!important;scrollbar-color:#c9d8ee transparent!important;
}
.compactTop .compactMonthBox::-webkit-scrollbar{height:8px!important}
.compactTop .compactMonthBox::-webkit-scrollbar-thumb{background:#cad9ef!important;border-radius:999px!important}
.compactTop .monthItem,
.compactTop .compactMonthBox > div[style]{
  flex:0 0 clamp(240px,18vw,300px)!important;
  min-height:72px!important;height:72px!important;border-radius:18px!important;
}
.compactTop .monthItem{
  position:relative!important;display:flex!important;align-items:center!important;gap:10px!important;
  padding:0 14px!important;border:1px solid #d4e1f2!important;
  background:linear-gradient(180deg,#ffffff,#f7fbff)!important;
  box-shadow:0 10px 24px rgba(15,23,42,.045)!important;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease,background .18s ease!important;
  animation:v54FadeUp .35s ease both!important;
}
.compactTop .monthItem::before{
  content:""!important;position:absolute!important;left:0;top:12px;bottom:12px;width:4px!important;border-radius:999px!important;
  background:linear-gradient(180deg,var(--v54-blue),var(--v54-cyan))!important;opacity:.82!important;
}
.compactTop .monthItem:hover{
  transform:translateY(-2px)!important;box-shadow:0 16px 28px rgba(37,99,235,.08)!important;border-color:#a6c7fb!important;
}
.compactTop .monthItem.active{
  border-color:#6ea4f7!important;background:linear-gradient(180deg,#eef5ff,#fcfdff)!important;
  box-shadow:0 0 0 2px rgba(37,99,235,.09),0 16px 30px rgba(37,99,235,.09)!important;
  animation:v54FadeUp .35s ease both, v54Pulse 2s ease-in-out infinite!important;
}
.compactTop .monthItem input{width:18px!important;height:18px!important;min-width:18px!important;margin-left:2px!important}
.compactTop .monthItem .dot{width:12px!important;height:12px!important;min-width:12px!important;box-shadow:0 0 0 5px rgba(37,99,235,.06)!important}
.compactTop .monthName{font-size:14px!important;font-weight:950!important;color:#1a2740!important;letter-spacing:-.015em!important;min-width:70px!important}
.compactTop .monthCount{
  min-width:38px!important;height:28px!important;padding:0 10px!important;border-radius:999px!important;
  background:#edf3fb!important;color:#607188!important;font-size:11px!important;font-weight:900!important;
}
.compactTop .monthActions{display:inline-flex!important;align-items:center!important;gap:4px!important;margin-left:auto!important}
.compactTop .iconBtn,
.compactTop .editMonth,
.compactTop .deleteMonth,
.compactTop .uploadMonth{
  width:28px!important;height:28px!important;min-width:28px!important;border-radius:10px!important;
  font-size:12px!important;opacity:.78!important;
  transition:transform .16s ease,opacity .16s ease,box-shadow .16s ease!important;
}
.compactTop .monthItem:hover .iconBtn,
.compactTop .monthItem:hover .editMonth,
.compactTop .monthItem:hover .deleteMonth,
.compactTop .monthItem:hover .uploadMonth{opacity:1!important;transform:translateY(-1px)!important;box-shadow:0 6px 10px rgba(15,23,42,.05)!important}

.compactTop .compactMonthBox > div[style]{
  display:flex!important;align-items:center!important;justify-content:center!important;gap:10px!important;padding:0 18px!important;
  border:1px dashed #d7e4f4!important;background:linear-gradient(180deg,#fbfdff,#f5f9ff)!important;
  color:#7b8da6!important;font-size:13px!important;font-weight:800!important;
  animation:v54FadeUp .3s ease both!important;
}
.compactTop .compactMonthBox > div[style]::before{
  content:"◷"!important;
  width:30px!important;height:30px!important;border-radius:10px!important;display:grid!important;place-items:center!important;
  background:#edf4ff!important;color:#4d83d8!important;font-size:15px!important;
  animation:v54Float 2s ease-in-out infinite!important;
}
.compactTop .sideActions{
  grid-column:2!important;grid-row:2!important;display:flex!important;align-items:center!important;justify-content:flex-end!important;
}
.compactTop .sideActions .btn{
  min-width:168px!important;height:44px!important;padding:0 18px!important;border-radius:14px!important;
  font-size:13px!important;font-weight:950!important;box-shadow:0 12px 22px rgba(37,99,235,.16)!important;
  transition:transform .18s ease,box-shadow .18s ease,filter .18s ease!important;
}
.compactTop .sideActions .btn:hover{transform:translateY(-2px)!important;filter:saturate(1.05)!important;box-shadow:0 18px 30px rgba(37,99,235,.2)!important}

/* ===== dark ===== */
html[data-theme="dark"] .layout.compactTop > .card{
  background:linear-gradient(180deg,rgba(17,24,39,.98),rgba(13,23,38,.98))!important;
  border-color:#23364f!important;
  box-shadow:0 18px 36px rgba(0,0,0,.24)!important;
}
html[data-theme="dark"] .compactTop .upload .title,
html[data-theme="dark"] .compactTop .sideTitleRow .title,
html[data-theme="dark"] .compactTop .monthName{color:#ecf3ff!important}
html[data-theme="dark"] .compactTop .miniDrop{background:linear-gradient(180deg,#101d30,#12243a)!important;border-color:#355581!important}
html[data-theme="dark"] .compactTop .compactFileList > div[style],
html[data-theme="dark"] .compactTop .compactMonthBox > div[style]{background:linear-gradient(180deg,#0f1a2b,#0f1c30)!important;border-color:#2b3b53!important;color:#8ea0b8!important}
html[data-theme="dark"] .compactTop .filePill{background:linear-gradient(180deg,#11284f,#102340)!important;border-color:#2b5fb5!important;color:#d5e7ff!important}
html[data-theme="dark"] .compactTop .monthItem{background:linear-gradient(180deg,#111b2b,#101a2a)!important;border-color:#2a3a52!important;box-shadow:0 12px 24px rgba(0,0,0,.18)!important}
html[data-theme="dark"] .compactTop .monthItem.active{background:linear-gradient(180deg,#102849,#0f203a)!important;border-color:#4b84d8!important}
html[data-theme="dark"] .compactTop .monthCount{background:#20314a!important;color:#bed2ef!important}

/* reduce motion */
@media (prefers-reduced-motion: reduce){
  .layout.compactTop > .card,
  .compactTop .miniDrop > div::before,
  .compactTop .monthItem,
  .compactTop .monthItem.active,
  .compactTop .compactMonthBox > div[style]::before,
  .layout.compactTop > .card::after{
    animation:none!important;
  }
  .compactTop .miniDrop,
  .compactTop .monthItem,
  .compactTop .sideActions .btn,
  .compactTop .fileTitleRow .btn.primary,
  .compactTop .uploadActions .btn,
  .compactTop .sideTitleRow .smBtn{
    transition:none!important;
  }
}

/* responsive */
@media (max-width:1450px){
  .layout.compactTop{grid-template-columns:340px minmax(0,1fr)!important}
  .compactTop .sideActions .btn{min-width:152px!important}
  .compactTop .monthItem,.compactTop .compactMonthBox > div[style]{flex-basis:260px!important}
}
@media (max-width:1100px){
  .layout.compactTop{grid-template-columns:1fr!important}
  .compactTop .upload,.compactTop .compactSide{height:auto!important;min-height:140px!important}
}
@media (max-width:720px){
  .compactTop .upload{min-height:auto!important;height:auto!important}
  .uploadGrid.compactUpload{grid-template-columns:94px minmax(0,1fr)!important;gap:10px!important}
  .compactTop .miniDrop{width:94px!important;min-height:88px!important;height:88px!important}
  .compactTop .compactSide{grid-template-columns:1fr!important;grid-template-rows:28px auto auto!important}
  .compactTop .compactMonthBox{grid-column:1!important;grid-row:2!important}
  .compactTop .sideActions{grid-column:1!important;grid-row:3!important;justify-content:stretch!important}
  .compactTop .sideActions .btn{width:100%!important;min-width:0!important}
  .compactTop .monthItem,.compactTop .compactMonthBox > div[style]{flex-basis:240px!important}
}

/* ===== ui-v55.css ===== */
/* V55 — Glassmorphism UI ONLY
   Giữ nguyên 100% chức năng, công thức, dữ liệu, xử lý Excel, Google Login,
   Firebase realtime, bộ lọc, ghi chú, biểu đồ và Admin.
   Chỉ tinh chỉnh giao diện khu Tải file + Chọn tháng theo phong cách Glassmorphism.
*/

:root{
  --v55-glass-bg: rgba(255,255,255,.52);
  --v55-glass-bg-2: rgba(255,255,255,.36);
  --v55-glass-line: rgba(255,255,255,.58);
  --v55-glass-shadow: 0 18px 40px rgba(37,99,235,.10), 0 8px 20px rgba(15,23,42,.06);
  --v55-blue: #2563eb;
  --v55-blue-2:#4f8cff;
  --v55-cyan:#2ec5d3;
  --v55-text:#1b2a44;
  --v55-text-soft:#6b7a90;
  --v55-danger:#ef476f;
  --v55-warn:#f59e0b;
  --v55-green:#16a34a;
}

@keyframes v55FadeUp{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}
@keyframes v55Glow{0%,100%{box-shadow:0 0 0 0 rgba(37,99,235,.12)}50%{box-shadow:0 0 0 10px rgba(37,99,235,0)}}
@keyframes v55Float{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
@keyframes v55Sheen{0%{transform:translateX(-140%)}50%,100%{transform:translateX(160%)}}

/* ===== Glass cards ===== */
.layout.compactTop{
  grid-template-columns: 380px minmax(0,1fr)!important;
  gap:16px!important;
  align-items:stretch!important;
}
.layout.compactTop > .card{
  position:relative!important;
  overflow:hidden!important;
  background:linear-gradient(180deg,var(--v55-glass-bg),var(--v55-glass-bg-2))!important;
  backdrop-filter: blur(18px) saturate(1.2)!important;
  -webkit-backdrop-filter: blur(18px) saturate(1.2)!important;
  border:1px solid rgba(189,216,255,.65)!important;
  border-top:1px solid rgba(255,255,255,.78)!important;
  border-radius:24px!important;
  box-shadow:var(--v55-glass-shadow)!important;
  animation:v55FadeUp .35s ease both!important;
}
.layout.compactTop > .card::before{
  content:""!important;
  position:absolute!important;left:0;right:0;top:0;height:3px!important;
  background:linear-gradient(90deg,var(--v55-blue),var(--v55-blue-2),var(--v55-cyan))!important;
  opacity:.95!important;
}
.layout.compactTop > .card::after{
  content:""!important;
  position:absolute!important;top:-10%;left:0;width:24%;height:120%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.34),transparent)!important;
  transform:translateX(-140%);
  animation:v55Sheen 7s ease-in-out infinite!important;
  pointer-events:none!important;
}

/* ===== Upload block ===== */
.compactTop .upload{
  padding:14px!important;
  height:148px!important;
  min-height:148px!important;
}
.uploadGrid.compactUpload{
  display:grid!important;
  grid-template-columns:112px minmax(0,1fr)!important;
  gap:14px!important;
  height:100%!important;
  align-items:stretch!important;
}
.compactTop .uploadLeft{
  display:grid!important;
  grid-template-rows:26px minmax(0,1fr)!important;
  gap:8px!important;
}
.compactTop .upload .title,
.compactTop .sideTitleRow .title{
  margin:0!important;
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
  color:var(--v55-text)!important;
  font-size:17px!important;
  font-weight:950!important;
  letter-spacing:-.03em!important;
}
.compactTop .miniDrop{
  position:relative!important;
  width:112px!important;
  min-height:94px!important;
  height:94px!important;
  border:1.5px dashed rgba(77,131,216,.48)!important;
  border-radius:22px!important;
  background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(239,246,255,.72))!important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.65), 0 10px 18px rgba(37,99,235,.08)!important;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease!important;
}
.compactTop .miniDrop:hover,
.compactTop .miniDrop.drag{
  transform:translateY(-2px)!important;
  border-color:rgba(37,99,235,.75)!important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.82), 0 14px 22px rgba(37,99,235,.12)!important;
  background:linear-gradient(180deg,rgba(255,255,255,.72),rgba(233,244,255,.88))!important;
}
.compactTop .miniDrop > div{gap:8px!important}
.compactTop .miniDrop > div::before{
  content:"⬆"!important;
  width:36px!important;height:36px!important;
  display:grid!important;place-items:center!important;
  border-radius:14px!important;
  background:linear-gradient(145deg,var(--v55-blue),var(--v55-blue-2))!important;
  color:#fff!important;font-size:18px!important;font-weight:900!important;
  box-shadow:0 10px 20px rgba(37,99,235,.20)!important;
  animation:v55Float 1.8s ease-in-out infinite!important;
}
.compactTop .miniDrop b{
  max-width:92px!important;
  color:var(--v55-blue)!important;
  font-size:12px!important;
  line-height:1.15!important;
  font-weight:900!important;
}
.compactTop .miniDrop small{display:none!important}

.compactTop .uploadRight{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  grid-template-rows:30px 42px auto!important;
  gap:9px!important;
  min-width:0!important;
  height:100%!important;
}
.compactTop .fileTitleRow{
  grid-column:1/-1!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:8px!important;
  min-height:30px!important;
}
.compactTop .fileTitleRow .title{font-size:15px!important}
.compactTop #fileCount{
  height:24px!important;min-height:24px!important;padding:0 10px!important;
  border-radius:999px!important;border:1px solid rgba(255,255,255,.55)!important;
  background:rgba(232,240,255,.82)!important;color:#5c76a1!important;
  font-size:11px!important;font-weight:900!important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7)!important;
}
.compactTop .fileTitleRow .btn.primary{
  height:38px!important;min-height:38px!important;padding:0 14px!important;border-radius:14px!important;
  font-size:13px!important;font-weight:900!important;line-height:1!important;
  background:linear-gradient(145deg,var(--v55-blue),var(--v55-blue-2))!important;
  color:#fff!important;border:none!important;
  box-shadow:0 12px 22px rgba(37,99,235,.18)!important;
  transition:transform .16s ease,box-shadow .16s ease,filter .16s ease!important;
}
.compactTop .fileTitleRow .btn.primary:hover{transform:translateY(-2px)!important;filter:saturate(1.05)!important;box-shadow:0 18px 28px rgba(37,99,235,.22)!important}

.compactTop .compactFileList{
  grid-column:1/-1!important;
  display:flex!important;align-items:center!important;gap:8px!important;
  min-height:42px!important;max-height:42px!important;height:42px!important;
  overflow:auto hidden!important;flex-wrap:nowrap!important;scrollbar-width:none!important;
}
.compactTop .compactFileList::-webkit-scrollbar{display:none!important}
.compactTop .compactFileList > div[style]{
  width:100%!important;height:42px!important;padding:0 14px!important;
  display:flex!important;align-items:center!important;
  border-radius:16px!important;
  border:1px solid rgba(194,216,248,.72)!important;
  background:rgba(255,255,255,.46)!important;
  color:var(--v55-text-soft)!important;font-size:13px!important;font-weight:750!important;
  backdrop-filter: blur(10px)!important;
}
.compactTop .filePill{
  position:relative!important;flex:0 0 auto!important;
  height:42px!important;line-height:42px!important;min-height:42px!important;
  padding:0 36px 0 14px!important;border-radius:16px!important;
  border:1px solid rgba(176,209,255,.88)!important;
  background:linear-gradient(180deg,rgba(239,246,255,.94),rgba(229,239,255,.92))!important;
  color:#1d5fd2!important;font-size:13px!important;font-weight:900!important;
  box-shadow:0 10px 18px rgba(37,99,235,.07)!important;
  animation:v55FadeUp .26s ease both!important;
}
.compactTop .filePill button{
  top:9px!important;right:9px!important;width:22px!important;height:22px!important;
  border-radius:8px!important;font-size:14px!important;border:1px solid rgba(203,217,240,.9)!important;
  background:rgba(255,255,255,.9)!important;color:#56759f!important;
}
.compactTop .uploadActions{
  grid-column:1/-1!important;display:flex!important;justify-content:flex-end!important;gap:8px!important;
}
.compactTop .uploadActions .btn{
  height:36px!important;min-height:36px!important;padding:0 13px!important;border-radius:14px!important;
  border:1px solid rgba(203,217,240,.92)!important;
  background:rgba(255,255,255,.60)!important;color:#233a61!important;
  box-shadow:0 8px 16px rgba(15,23,42,.04)!important;
  backdrop-filter: blur(10px)!important;
  font-size:12px!important;font-weight:850!important;
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease!important;
}
.compactTop .uploadActions .btn:hover{transform:translateY(-1px)!important;box-shadow:0 12px 18px rgba(15,23,42,.06)!important;border-color:#b8d4ff!important}

/* ===== Month block ===== */
.compactTop .compactSide{
  padding:14px!important;
  min-height:148px!important;height:148px!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  grid-template-rows:30px minmax(0,1fr)!important;
  gap:10px 14px!important;
}
.compactTop .sideTitleRow{
  grid-column:1/-1!important;
  min-height:30px!important;
  display:flex!important;align-items:center!important;justify-content:space-between!important;
}
.compactTop .sideTitleRow .smBtn{
  width:36px!important;height:36px!important;min-width:36px!important;
  border-radius:14px!important;
  background:rgba(255,255,255,.54)!important;
  border:1px solid rgba(195,214,243,.85)!important;
  box-shadow:0 10px 18px rgba(37,99,235,.06)!important;
  backdrop-filter:blur(10px)!important;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease!important;
}
.compactTop .sideTitleRow .smBtn:hover{
  transform:rotate(-10deg) translateY(-1px)!important;
  box-shadow:0 14px 22px rgba(37,99,235,.10)!important;
  border-color:#b4d2ff!important;
}

.compactTop .compactMonthBox{
  grid-column:1!important;grid-row:2!important;
  min-width:0!important;display:flex!important;align-items:stretch!important;gap:14px!important;
  overflow:auto hidden!important;padding:2px 2px 10px 2px!important;
  scrollbar-width:thin!important;scrollbar-color:#c9d8ee transparent!important;
}
.compactTop .compactMonthBox::-webkit-scrollbar{height:8px!important}
.compactTop .compactMonthBox::-webkit-scrollbar-thumb{background:#c9d8ee!important;border-radius:999px!important}
.compactTop .monthItem,
.compactTop .compactMonthBox > div[style]{
  flex:0 0 clamp(260px,18vw,320px)!important;
  min-height:78px!important;height:78px!important;
  border-radius:22px!important;
}
.compactTop .monthItem{
  position:relative!important;
  display:flex!important;align-items:center!important;gap:10px!important;
  padding:0 14px!important;
  border:1px solid rgba(172,204,250,.88)!important;
  background:linear-gradient(180deg,rgba(255,255,255,.62),rgba(242,247,255,.66))!important;
  backdrop-filter: blur(14px) saturate(1.15)!important;
  -webkit-backdrop-filter: blur(14px) saturate(1.15)!important;
  box-shadow:0 12px 28px rgba(15,23,42,.05)!important;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease!important;
  animation:v55FadeUp .33s ease both!important;
}
.compactTop .monthItem::before{
  content:""!important;position:absolute!important;left:0;top:12px;bottom:12px;width:4px!important;border-radius:999px!important;
  background:linear-gradient(180deg,var(--v55-blue),var(--v55-cyan))!important;opacity:.9!important;
}
.compactTop .monthItem:hover{
  transform:translateY(-2px)!important;
  border-color:#94befb!important;
  box-shadow:0 18px 30px rgba(37,99,235,.09)!important;
}
.compactTop .monthItem.active{
  border-color:#6ea4f7!important;
  background:linear-gradient(180deg,rgba(239,246,255,.82),rgba(251,253,255,.74))!important;
  box-shadow:0 0 0 2px rgba(37,99,235,.09),0 18px 32px rgba(37,99,235,.10)!important;
  animation:v55FadeUp .33s ease both, v55Glow 2s ease-in-out infinite!important;
}
.compactTop .monthItem input{width:18px!important;height:18px!important;min-width:18px!important;margin-left:2px!important}
.compactTop .monthItem .dot{width:13px!important;height:13px!important;min-width:13px!important;box-shadow:0 0 0 6px rgba(37,99,235,.06)!important}
.compactTop .monthName{font-size:14px!important;font-weight:950!important;color:var(--v55-text)!important;letter-spacing:-.015em!important;min-width:72px!important}
.compactTop .monthCount{
  min-width:38px!important;height:28px!important;padding:0 10px!important;border-radius:999px!important;
  border:1px solid rgba(255,255,255,.6)!important;
  background:rgba(236,242,251,.84)!important;color:#607188!important;font-size:11px!important;font-weight:900!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7)!important;
}

/* highlight edit buttons */
.compactTop .monthActions{
  display:inline-flex!important;align-items:center!important;gap:6px!important;margin-left:auto!important;
}
.compactTop .iconBtn,
.compactTop .editMonth,
.compactTop .deleteMonth,
.compactTop .uploadMonth{
  width:30px!important;height:30px!important;min-width:30px!important;
  border-radius:11px!important;
  font-size:13px!important;
  opacity:1!important;
  border:1px solid rgba(255,255,255,.62)!important;
  backdrop-filter:blur(10px)!important;
  -webkit-backdrop-filter:blur(10px)!important;
  box-shadow:0 8px 14px rgba(15,23,42,.06)!important;
  transition:transform .16s ease, box-shadow .16s ease, filter .16s ease, border-color .16s ease!important;
}
.compactTop .uploadMonth,
.compactTop .iconBtn{
  background:linear-gradient(180deg,rgba(236,244,255,.95),rgba(224,237,255,.88))!important;
  color:var(--v55-blue)!important;
  border-color:rgba(176,209,255,.95)!important;
}
.compactTop .editMonth{
  background:linear-gradient(180deg,rgba(255,246,228,.95),rgba(255,238,201,.88))!important;
  color:#b66b00!important;
  border-color:rgba(250,207,120,.92)!important;
}
.compactTop .deleteMonth{
  background:linear-gradient(180deg,rgba(255,236,241,.95),rgba(255,223,230,.90))!important;
  color:#db2857!important;
  border-color:rgba(255,166,191,.95)!important;
}
.compactTop .monthItem:hover .iconBtn,
.compactTop .monthItem:hover .editMonth,
.compactTop .monthItem:hover .deleteMonth,
.compactTop .monthItem:hover .uploadMonth{
  transform:translateY(-2px) scale(1.02)!important;
  box-shadow:0 12px 18px rgba(15,23,42,.09)!important;
  filter:saturate(1.06)!important;
}

.compactTop .compactMonthBox > div[style]{
  display:flex!important;align-items:center!important;justify-content:center!important;gap:10px!important;padding:0 18px!important;
  border:1px dashed rgba(194,216,248,.88)!important;
  background:linear-gradient(180deg,rgba(255,255,255,.44),rgba(244,249,255,.62))!important;
  backdrop-filter: blur(12px)!important;
  color:#7b8da6!important;font-size:13px!important;font-weight:800!important;
}
.compactTop .compactMonthBox > div[style]::before{
  content:"◷"!important;
  width:30px!important;height:30px!important;border-radius:12px!important;display:grid!important;place-items:center!important;
  background:rgba(233,242,255,.92)!important;color:#4d83d8!important;font-size:15px!important;
  box-shadow:0 8px 16px rgba(37,99,235,.08)!important;
  animation:v55Float 2s ease-in-out infinite!important;
}

.compactTop .sideActions{
  grid-column:2!important;grid-row:2!important;display:flex!important;align-items:center!important;justify-content:flex-end!important;
}
.compactTop .sideActions .btn{
  min-width:174px!important;height:48px!important;padding:0 18px!important;border-radius:16px!important;
  font-size:14px!important;font-weight:950!important;
  background:linear-gradient(145deg,var(--v55-blue),var(--v55-blue-2))!important;
  color:#fff!important;border:none!important;
  box-shadow:0 14px 28px rgba(37,99,235,.18)!important;
  transition:transform .18s ease, box-shadow .18s ease, filter .18s ease!important;
}
.compactTop .sideActions .btn:hover{transform:translateY(-2px)!important;filter:saturate(1.05)!important;box-shadow:0 20px 34px rgba(37,99,235,.22)!important}

/* ===== Dark mode ===== */
html[data-theme="dark"] .layout.compactTop > .card{
  background:linear-gradient(180deg,rgba(14,22,36,.72),rgba(13,21,35,.60))!important;
  border-color:rgba(71,101,147,.42)!important;
  border-top-color:rgba(255,255,255,.10)!important;
  box-shadow:0 20px 40px rgba(0,0,0,.26)!important;
}
html[data-theme="dark"] .compactTop .upload .title,
html[data-theme="dark"] .compactTop .sideTitleRow .title,
html[data-theme="dark"] .compactTop .monthName{color:#ecf3ff!important}
html[data-theme="dark"] .compactTop .miniDrop{
  background:linear-gradient(180deg,rgba(18,31,51,.66),rgba(17,29,48,.74))!important;
  border-color:rgba(86,128,188,.55)!important;
}
html[data-theme="dark"] .compactTop .compactFileList > div[style],
html[data-theme="dark"] .compactTop .compactMonthBox > div[style]{
  background:linear-gradient(180deg,rgba(16,27,43,.64),rgba(14,24,40,.72))!important;
  border-color:rgba(63,88,122,.64)!important;
  color:#97a9c0!important;
}
html[data-theme="dark"] .compactTop .filePill{
  background:linear-gradient(180deg,rgba(19,40,76,.88),rgba(17,34,64,.90))!important;
  border-color:rgba(60,111,196,.95)!important;
  color:#d5e7ff!important;
}
html[data-theme="dark"] .compactTop .uploadActions .btn,
html[data-theme="dark"] .compactTop .sideTitleRow .smBtn{
  background:rgba(18,31,51,.70)!important;
  border-color:rgba(63,88,122,.72)!important;
  color:#d9e7fa!important;
}
html[data-theme="dark"] .compactTop .monthItem{
  background:linear-gradient(180deg,rgba(18,30,47,.72),rgba(17,28,45,.80))!important;
  border-color:rgba(68,94,132,.72)!important;
  box-shadow:0 12px 28px rgba(0,0,0,.18)!important;
}
html[data-theme="dark"] .compactTop .monthItem.active{
  background:linear-gradient(180deg,rgba(17,41,74,.82),rgba(15,32,57,.84))!important;
  border-color:#4b84d8!important;
}
html[data-theme="dark"] .compactTop .monthCount{
  background:rgba(34,49,74,.85)!important;color:#bed2ef!important;border-color:rgba(255,255,255,.08)!important;
}
html[data-theme="dark"] .compactTop .uploadMonth,
html[data-theme="dark"] .compactTop .iconBtn{background:linear-gradient(180deg,rgba(25,47,80,.90),rgba(20,39,66,.92))!important;color:#a8cbff!important;border-color:rgba(76,121,186,.92)!important}
html[data-theme="dark"] .compactTop .editMonth{background:linear-gradient(180deg,rgba(76,56,19,.90),rgba(63,45,14,.92))!important;color:#ffd17d!important;border-color:rgba(180,126,36,.85)!important}
html[data-theme="dark"] .compactTop .deleteMonth{background:linear-gradient(180deg,rgba(86,26,42,.92),rgba(68,18,32,.94))!important;color:#ff9db8!important;border-color:rgba(173,66,97,.88)!important}

/* ===== Reduced motion ===== */
@media (prefers-reduced-motion: reduce){
  .layout.compactTop > .card,
  .layout.compactTop > .card::after,
  .compactTop .miniDrop > div::before,
  .compactTop .monthItem,
  .compactTop .monthItem.active,
  .compactTop .compactMonthBox > div[style]::before{animation:none!important}
  .compactTop .miniDrop,
  .compactTop .fileTitleRow .btn.primary,
  .compactTop .uploadActions .btn,
  .compactTop .monthItem,
  .compactTop .iconBtn,
  .compactTop .editMonth,
  .compactTop .deleteMonth,
  .compactTop .uploadMonth,
  .compactTop .sideActions .btn,
  .compactTop .sideTitleRow .smBtn{transition:none!important}
}

/* ===== Responsive ===== */
@media (max-width:1500px){
  .layout.compactTop{grid-template-columns:360px minmax(0,1fr)!important}
  .compactTop .monthItem,.compactTop .compactMonthBox > div[style]{flex-basis:280px!important}
}
@media (max-width:1180px){
  .layout.compactTop{grid-template-columns:1fr!important}
  .compactTop .upload,.compactTop .compactSide{height:auto!important;min-height:148px!important}
}
@media (max-width:760px){
  .compactTop .upload{height:auto!important;min-height:auto!important}
  .uploadGrid.compactUpload{grid-template-columns:98px minmax(0,1fr)!important;gap:10px!important}
  .compactTop .miniDrop{width:98px!important;height:90px!important;min-height:90px!important}
  .compactTop .compactSide{grid-template-columns:1fr!important;grid-template-rows:30px auto auto!important}
  .compactTop .compactMonthBox{grid-column:1!important;grid-row:2!important}
  .compactTop .sideActions{grid-column:1!important;grid-row:3!important;justify-content:stretch!important}
  .compactTop .sideActions .btn{width:100%!important;min-width:0!important}
  .compactTop .monthItem,.compactTop .compactMonthBox > div[style]{flex-basis:248px!important}
}

/* ===== ui-v56.css ===== */
/* V56 — UI ONLY
   Giữ nguyên toàn bộ chức năng gốc.
   Chỉ tinh chỉnh lại UI khu Tải file + Chọn tháng:
   - Bo viền card tháng đầy đủ và mềm hơn
   - Sửa cảm giác bị cắt viền / mất góc ở khu month
   - Tối ưu animation cho hover / active / chọn / nút thao tác
   - Không thay đổi dữ liệu, công thức, logic, event, Google Login, Firebase, Admin.
*/

:root{
  --v56-blue:#2563eb;
  --v56-blue2:#4f8cff;
  --v56-cyan:#2ec5d3;
  --v56-line:rgba(178,208,248,.92);
  --v56-glass:rgba(255,255,255,.58);
  --v56-glass2:rgba(250,252,255,.72);
  --v56-shadow:0 18px 36px rgba(37,99,235,.08), 0 8px 18px rgba(15,23,42,.05);
  --v56-text:#1c2a44;
}

@keyframes v56CardIn{from{opacity:0;transform:translateY(8px) scale(.988)}to{opacity:1;transform:none}}
@keyframes v56PulseSoft{0%,100%{box-shadow:0 0 0 0 rgba(37,99,235,.10)}50%{box-shadow:0 0 0 9px rgba(37,99,235,0)}}
@keyframes v56IconPop{0%{transform:scale(.92)}100%{transform:scale(1)}}

/* ===== overall compact top ===== */
.layout.compactTop{
  gap:16px!important;
}
.layout.compactTop > .card{
  border-radius:24px!important;
}

/* ===== Upload panel refinements ===== */
.compactTop .upload{
  min-height:150px!important;
  height:150px!important;
}
.uploadGrid.compactUpload{
  grid-template-columns:116px minmax(0,1fr)!important;
  gap:14px!important;
}
.compactTop .miniDrop{
  width:116px!important;
  min-height:96px!important;
  height:96px!important;
  border-radius:24px!important;
  transition:transform .24s cubic-bezier(.2,.8,.2,1), box-shadow .24s cubic-bezier(.2,.8,.2,1), border-color .22s ease, background .22s ease!important;
}
.compactTop .miniDrop:hover,
.compactTop .miniDrop.drag{
  transform:translateY(-3px) scale(1.01)!important;
}
.compactTop .miniDrop > div::before{
  animation-duration:2.2s!important;
}
.compactTop .fileTitleRow .btn.primary,
.compactTop .uploadActions .btn,
.compactTop .sideActions .btn,
.compactTop .sideTitleRow .smBtn{
  transition:transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .2s cubic-bezier(.2,.8,.2,1), filter .2s ease, border-color .2s ease, background .2s ease!important;
}
.compactTop .uploadActions .btn:active,
.compactTop .fileTitleRow .btn.primary:active,
.compactTop .sideActions .btn:active,
.compactTop .sideTitleRow .smBtn:active{
  transform:translateY(0) scale(.98)!important;
}
.compactTop .filePill{
  border-radius:18px!important;
}
.compactTop .filePill button{
  transition:transform .18s ease, background .18s ease, box-shadow .18s ease!important;
}
.compactTop .filePill button:hover{
  transform:scale(1.06)!important;
}

/* ===== Month area: fix full rounded borders ===== */
.compactTop .compactSide{
  min-height:150px!important;
  height:150px!important;
}
.compactTop .compactMonthBox{
  gap:16px!important;
  padding:4px 4px 12px 4px!important;
  align-items:stretch!important;
}
.compactTop .monthItem,
.compactTop .compactMonthBox > div[style]{
  flex:0 0 clamp(270px,18vw,328px)!important;
  min-height:82px!important;
  height:82px!important;
  border-radius:24px!important;
  overflow:hidden!important;
}
.compactTop .monthItem{
  position:relative!important;
  padding:0 16px!important;
  border:1px solid var(--v56-line)!important;
  border-radius:24px!important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.68),rgba(245,249,255,.76)) padding-box,
    linear-gradient(180deg,rgba(255,255,255,.62),rgba(186,214,252,.55)) border-box!important;
  box-shadow:var(--v56-shadow)!important;
  backdrop-filter:blur(14px) saturate(1.1)!important;
  -webkit-backdrop-filter:blur(14px) saturate(1.1)!important;
  transition:
    transform .24s cubic-bezier(.2,.8,.2,1),
    box-shadow .24s cubic-bezier(.2,.8,.2,1),
    border-color .22s ease,
    background .22s ease!important;
  animation:v56CardIn .32s cubic-bezier(.2,.8,.2,1) both!important;
  isolation:isolate!important;
}
.compactTop .monthItem::before{
  content:""!important;
  position:absolute!important;
  left:0!important;
  top:12px!important;
  bottom:12px!important;
  width:4px!important;
  border-radius:999px!important;
  background:linear-gradient(180deg,var(--v56-blue),var(--v56-cyan))!important;
  opacity:.95!important;
}
.compactTop .monthItem::after{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  border-radius:24px!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.56)!important;
  pointer-events:none!important;
  z-index:0!important;
}
.compactTop .monthItem > *{
  position:relative!important;
  z-index:1!important;
}
.compactTop .monthItem:hover{
  transform:translateY(-3px)!important;
  border-color:rgba(126,174,247,.98)!important;
  box-shadow:0 20px 34px rgba(37,99,235,.10), 0 10px 20px rgba(15,23,42,.06)!important;
}
.compactTop .monthItem.active{
  border-color:rgba(88,145,239,.98)!important;
  box-shadow:0 0 0 2px rgba(37,99,235,.08), 0 20px 36px rgba(37,99,235,.12)!important;
  animation:v56CardIn .32s cubic-bezier(.2,.8,.2,1) both, v56PulseSoft 2.3s ease-in-out infinite!important;
}
.compactTop .monthItem input{
  width:20px!important;
  height:20px!important;
  min-width:20px!important;
  margin-left:2px!important;
}
.compactTop .monthItem .dot{
  width:13px!important;
  height:13px!important;
  min-width:13px!important;
  box-shadow:0 0 0 6px rgba(37,99,235,.06)!important;
  transition:transform .22s cubic-bezier(.2,.8,.2,1)!important;
}
.compactTop .monthItem:hover .dot,
.compactTop .monthItem.active .dot{
  transform:scale(1.08)!important;
}
.compactTop .monthName{
  font-size:15px!important;
  font-weight:950!important;
  color:var(--v56-text)!important;
  letter-spacing:-.02em!important;
}
.compactTop .monthCount{
  min-width:40px!important;
  height:30px!important;
  padding:0 10px!important;
  border-radius:999px!important;
}

/* Highlight edit controls better */
.compactTop .monthActions{
  gap:7px!important;
  margin-left:auto!important;
}
.compactTop .iconBtn,
.compactTop .editMonth,
.compactTop .deleteMonth,
.compactTop .uploadMonth{
  width:32px!important;
  height:32px!important;
  min-width:32px!important;
  border-radius:12px!important;
  font-size:13px!important;
  animation:v56IconPop .18s ease both!important;
  transition:
    transform .2s cubic-bezier(.2,.8,.2,1),
    box-shadow .2s cubic-bezier(.2,.8,.2,1),
    filter .2s ease,
    background .2s ease,
    border-color .2s ease!important;
}
.compactTop .monthItem:hover .iconBtn,
.compactTop .monthItem:hover .editMonth,
.compactTop .monthItem:hover .deleteMonth,
.compactTop .monthItem:hover .uploadMonth{
  transform:translateY(-2px)!important;
}
.compactTop .iconBtn:hover,
.compactTop .uploadMonth:hover,
.compactTop .editMonth:hover,
.compactTop .deleteMonth:hover{
  transform:translateY(-2px) scale(1.05)!important;
  box-shadow:0 12px 18px rgba(15,23,42,.10)!important;
  filter:saturate(1.08)!important;
}
.compactTop .iconBtn:active,
.compactTop .uploadMonth:active,
.compactTop .editMonth:active,
.compactTop .deleteMonth:active{
  transform:translateY(0) scale(.96)!important;
}

/* Empty month state */
.compactTop .compactMonthBox > div[style]{
  border-radius:24px!important;
  backdrop-filter:blur(12px)!important;
  -webkit-backdrop-filter:blur(12px)!important;
}

/* Buttons on month area */
.compactTop .sideActions .btn{
  min-width:178px!important;
  height:50px!important;
  border-radius:18px!important;
}
.compactTop .sideActions .btn:hover{
  transform:translateY(-2px)!important;
}

/* dark mode refinements */
html[data-theme="dark"] .compactTop .monthItem{
  background:
    linear-gradient(180deg,rgba(18,30,47,.76),rgba(16,27,43,.84)) padding-box,
    linear-gradient(180deg,rgba(74,105,152,.48),rgba(52,76,113,.34)) border-box!important;
  border-color:rgba(68,94,132,.76)!important;
}
html[data-theme="dark"] .compactTop .monthItem::after{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05)!important;
}
html[data-theme="dark"] .compactTop .monthItem:hover{
  border-color:rgba(92,134,201,.92)!important;
  box-shadow:0 18px 30px rgba(0,0,0,.22),0 10px 22px rgba(37,99,235,.10)!important;
}
html[data-theme="dark"] .compactTop .monthItem.active{
  border-color:#4b84d8!important;
}

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  .compactTop .monthItem,
  .compactTop .monthItem.active,
  .compactTop .iconBtn,
  .compactTop .editMonth,
  .compactTop .deleteMonth,
  .compactTop .uploadMonth,
  .compactTop .miniDrop,
  .compactTop .sideActions .btn,
  .compactTop .fileTitleRow .btn.primary,
  .compactTop .uploadActions .btn,
  .compactTop .sideTitleRow .smBtn{
    animation:none!important;
    transition:none!important;
  }
}

/* responsive */
@media (max-width:1500px){
  .compactTop .monthItem,
  .compactTop .compactMonthBox > div[style]{
    flex-basis:290px!important;
  }
}
@media (max-width:1180px){
  .compactTop .upload,
  .compactTop .compactSide{
    height:auto!important;
    min-height:150px!important;
  }
}
@media (max-width:760px){
  .uploadGrid.compactUpload{
    grid-template-columns:100px minmax(0,1fr)!important;
  }
  .compactTop .miniDrop{
    width:100px!important;
    height:92px!important;
    min-height:92px!important;
  }
  .compactTop .monthItem,
  .compactTop .compactMonthBox > div[style]{
    flex-basis:250px!important;
    min-height:80px!important;
    height:80px!important;
  }
  .compactTop .sideActions .btn{
    width:100%!important;
    min-width:0!important;
  }
}

/* ===== ui-v66.css ===== */
/* V66 — UI ONLY
   Base: V56 + fix xoá tháng.
   Khôi phục giao diện sáng/cũ của website.
   Chỉ thay bố cục hai khối Tải file Excel + Chọn tháng theo ảnh mẫu.
   Không thay đổi công thức, dữ liệu, sự kiện, Google Login, Firebase hoặc Admin.
*/

/* ===== TOP LAYOUT: compact horizontal ===== */
.layout.compactTop{
  grid-template-columns:minmax(430px, .98fr) minmax(620px, 1.02fr)!important;
  gap:10px!important;
  align-items:stretch!important;
  margin-bottom:9px!important;
}
.layout.compactTop > .card{
  border-radius:14px!important;
  border:1px solid #d8e3f2!important;
  background:linear-gradient(145deg,#ffffff,#f8fbff)!important;
  box-shadow:0 8px 22px rgba(15,23,42,.05)!important;
  overflow:hidden!important;
}
.layout.compactTop > .card::before{
  display:block!important;
  content:""!important;
  position:absolute!important;
  inset:0 0 auto 0!important;
  height:2px!important;
  background:linear-gradient(90deg,#2563eb,#38bdf8,#22c55e,#8b5cf6)!important;
  opacity:.62!important;
  pointer-events:none!important;
}
.layout.compactTop > .card::after{display:none!important}

/* ===== UPLOAD ===== */
.compactTop .upload{
  height:98px!important;
  min-height:98px!important;
  padding:8px 9px!important;
}
.uploadGrid.compactUpload{
  display:grid!important;
  grid-template-columns:minmax(200px,.95fr) minmax(220px,1.05fr)!important;
  gap:9px!important;
  align-items:stretch!important;
  height:100%!important;
}
.compactTop .uploadLeft{
  display:grid!important;
  grid-template-rows:20px minmax(0,1fr)!important;
  gap:5px!important;
  min-width:0!important;
}
.compactTop .upload .title{
  margin:0!important;
  display:flex!important;
  align-items:center!important;
  gap:5px!important;
  height:20px!important;
  line-height:20px!important;
  font-size:11px!important;
  font-weight:950!important;
  color:#1f2f4c!important;
}
.compactTop .upload .title::before{
  width:15px!important;
  height:15px!important;
  min-width:15px!important;
  display:grid!important;
  place-items:center!important;
  border-radius:999px!important;
  background:#e8eef7!important;
  color:#53657d!important;
  box-shadow:none!important;
  font-size:8px!important;
}
.compactTop .miniDrop{
  width:100%!important;
  height:56px!important;
  min-height:56px!important;
  padding:0 8px!important;
  border:1.5px dashed #a9bfdc!important;
  border-radius:9px!important;
  background:linear-gradient(135deg,#f9fbfe,#edf5fc)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8)!important;
  transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease!important;
}
.compactTop .miniDrop:hover,
.compactTop .miniDrop.drag{
  transform:translateY(-1px)!important;
  border-color:#6ba8e8!important;
  box-shadow:0 0 0 3px rgba(37,99,235,.06)!important;
}
.compactTop .miniDrop > div{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:7px!important;
  text-align:center!important;
}
.compactTop .miniDrop > div::before{
  content:"⇧"!important;
  width:24px!important;
  height:24px!important;
  min-width:24px!important;
  display:grid!important;
  place-items:center!important;
  border-radius:8px!important;
  background:transparent!important;
  color:#607b98!important;
  box-shadow:none!important;
  font-size:19px!important;
  font-weight:800!important;
  animation:none!important;
}
.compactTop .miniDrop b{
  max-width:none!important;
  font-size:10px!important;
  line-height:1.1!important;
  color:#344963!important;
  font-weight:850!important;
}
.compactTop .miniDrop b::after{display:none!important;content:none!important}
.compactTop .miniDrop small{display:none!important}

.compactTop .uploadRight{
  min-width:0!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  grid-template-rows:23px 28px 23px!important;
  gap:4px 6px!important;
  align-content:start!important;
}
.compactTop .fileTitleRow{
  grid-column:1/-1!important;
  grid-row:1!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:6px!important;
  height:23px!important;
  min-height:23px!important;
  margin:0!important;
}
.compactTop .fileTitleRow .title{
  margin:0!important;
  font-size:10.5px!important;
  line-height:1!important;
  font-weight:900!important;
  color:#26374f!important;
  white-space:nowrap!important;
}
.compactTop #fileCount{
  height:19px!important;
  min-height:19px!important;
  padding:0 6px!important;
  border-radius:999px!important;
  background:#edf3fa!important;
  color:#64748b!important;
  font-size:9px!important;
  font-weight:900!important;
}
.compactTop .fileTitleRow .btn.primary{
  height:23px!important;
  min-height:23px!important;
  padding:0 8px!important;
  border-radius:8px!important;
  font-size:9px!important;
  font-weight:900!important;
  box-shadow:0 4px 10px rgba(37,99,235,.12)!important;
}
.compactTop .compactFileList{
  grid-column:1/-1!important;
  grid-row:2!important;
  display:flex!important;
  align-items:center!important;
  flex-wrap:nowrap!important;
  gap:4px!important;
  height:28px!important;
  min-height:28px!important;
  max-height:28px!important;
  padding:0!important;
  overflow:auto hidden!important;
  scrollbar-width:none!important;
}
.compactTop .compactFileList::-webkit-scrollbar{display:none!important}
.compactTop .compactFileList > div[style]{
  width:100%!important;
  height:26px!important;
  min-height:26px!important;
  display:flex!important;
  align-items:center!important;
  padding:0 8px!important;
  border:1px solid #dce6f1!important;
  border-radius:8px!important;
  background:#f8fafc!important;
  color:#8493a6!important;
  font-size:9px!important;
}
.compactTop .filePill{
  flex:0 0 auto!important;
  min-width:80px!important;
  max-width:145px!important;
  height:23px!important;
  min-height:23px!important;
  line-height:21px!important;
  padding:0 20px 0 7px!important;
  border-radius:999px!important;
  border:1px solid #cbd9ea!important;
  background:#fff!important;
  color:#344963!important;
  font-size:8.5px!important;
  font-weight:750!important;
  box-shadow:none!important;
}
.compactTop .filePill small{display:none!important}
.compactTop .filePill button{
  top:3px!important;
  right:3px!important;
  width:16px!important;
  height:16px!important;
  min-width:16px!important;
  border-radius:999px!important;
  background:#eef2f7!important;
  color:#65758b!important;
  border:none!important;
  font-size:11px!important;
}
.compactTop .uploadActions{
  grid-column:1/-1!important;
  grid-row:3!important;
  display:flex!important;
  justify-content:flex-end!important;
  align-items:center!important;
  gap:4px!important;
  margin:0!important;
}
.compactTop .uploadActions .btn{
  height:22px!important;
  min-height:22px!important;
  padding:0 7px!important;
  border-radius:7px!important;
  border:1px solid #d9e3ef!important;
  background:#fff!important;
  color:#394b61!important;
  font-size:8.5px!important;
  font-weight:750!important;
  box-shadow:none!important;
}

/* ===== MONTH ===== */
.compactTop .compactSide{
  height:98px!important;
  min-height:98px!important;
  padding:8px 9px!important;
  display:grid!important;
  grid-template-columns:18px minmax(0,1fr) auto!important;
  grid-template-rows:20px 56px!important;
  gap:5px 6px!important;
  align-items:center!important;
}
.compactTop .sideTitleRow{
  grid-column:1/-1!important;
  grid-row:1!important;
  height:20px!important;
  min-height:20px!important;
  margin:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:6px!important;
}
.compactTop .sideTitleRow .title{
  margin:0!important;
  font-size:11px!important;
  line-height:1!important;
  font-weight:950!important;
  color:#1f2f4c!important;
}
.compactTop .sideTitleRow .title::before{
  width:15px!important;
  height:15px!important;
  min-width:15px!important;
  border-radius:999px!important;
  background:#e8eef7!important;
  color:#53657d!important;
  box-shadow:none!important;
  font-size:8px!important;
}
.compactTop .sideTitleRow .smBtn{
  width:23px!important;
  min-width:23px!important;
  height:23px!important;
  min-height:23px!important;
  padding:0!important;
  border-radius:8px!important;
  border:1px solid #d8e3ef!important;
  background:#f8fafc!important;
  color:#56677d!important;
  box-shadow:none!important;
  font-size:11px!important;
}
.compactTop .compactMonthBox{
  grid-column:2!important;
  grid-row:2!important;
  min-width:0!important;
  height:56px!important;
  min-height:56px!important;
  max-height:56px!important;
  display:flex!important;
  flex-wrap:nowrap!important;
  align-items:stretch!important;
  gap:6px!important;
  padding:0!important;
  overflow:auto hidden!important;
  scrollbar-width:none!important;
}
.compactTop .compactMonthBox::-webkit-scrollbar{display:none!important}
.compactTop .monthItem{
  flex:0 0 122px!important;
  width:122px!important;
  min-width:122px!important;
  height:56px!important;
  min-height:56px!important;
  padding:5px 6px!important;
  border:1px solid #cddbeb!important;
  border-radius:10px!important;
  background:linear-gradient(180deg,#ffffff,#f7fafc)!important;
  box-shadow:0 2px 6px rgba(15,23,42,.03)!important;
  display:grid!important;
  grid-template-columns:14px 8px minmax(0,1fr) auto!important;
  grid-template-rows:18px 1fr 20px!important;
  gap:2px 4px!important;
  overflow:hidden!important;
  animation:none!important;
  transform:none!important;
}
.compactTop .monthItem::before,
.compactTop .monthItem::after{display:none!important;content:none!important}
.compactTop .monthItem:hover{
  transform:translateY(-1px)!important;
  border-color:#99bde9!important;
  box-shadow:0 5px 10px rgba(37,99,235,.06)!important;
}
.compactTop .monthItem.active{
  border-color:#4f8cff!important;
  background:linear-gradient(180deg,#f4f8ff,#f8fbff)!important;
  box-shadow:0 0 0 1px rgba(37,99,235,.08),0 4px 9px rgba(37,99,235,.07)!important;
  animation:none!important;
}
.compactTop .monthItem input{
  grid-column:1!important;
  grid-row:1!important;
  width:13px!important;
  height:13px!important;
  min-width:13px!important;
  margin:0!important;
  accent-color:#2563eb!important;
}
.compactTop .monthItem .dot{
  grid-column:2!important;
  grid-row:2!important;
  align-self:center!important;
  width:8px!important;
  height:8px!important;
  min-width:8px!important;
  box-shadow:none!important;
}
.compactTop .monthName{
  grid-column:3!important;
  grid-row:2!important;
  align-self:center!important;
  min-width:0!important;
  max-width:none!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  font-size:9.5px!important;
  line-height:1!important;
  font-weight:900!important;
  color:#26374f!important;
}
.compactTop .monthCount{
  grid-column:4!important;
  grid-row:2!important;
  align-self:center!important;
  min-width:24px!important;
  height:17px!important;
  padding:0 5px!important;
  border-radius:999px!important;
  background:#eef2f7!important;
  color:#64748b!important;
  font-size:8px!important;
  font-weight:900!important;
}
.compactTop .monthActions{
  grid-column:1/-1!important;
  grid-row:3!important;
  display:grid!important;
  grid-template-columns:repeat(3,1fr)!important;
  gap:3px!important;
  width:100%!important;
  margin:0!important;
  padding:0!important;
  border:none!important;
}
.compactTop .iconBtn,
.compactTop .uploadMonth,
.compactTop .editMonth,
.compactTop .deleteMonth{
  width:100%!important;
  min-width:0!important;
  height:18px!important;
  min-height:18px!important;
  padding:0!important;
  border-radius:6px!important;
  border:1px solid #d4dfeb!important;
  background:#fff!important;
  box-shadow:none!important;
  font-size:9px!important;
  opacity:1!important;
  animation:none!important;
  transform:none!important;
}
.compactTop .uploadMonth,
.compactTop .iconBtn{color:#3b82f6!important;background:#f7faff!important}
.compactTop .editMonth{color:#c98b20!important;background:#fffaf0!important;border-color:#ecd5a6!important}
.compactTop .deleteMonth{color:#ef476f!important;background:#fff7f8!important;border-color:#f0c7cf!important}
.compactTop .compactMonthBox > div[style]{
  flex:0 0 118px!important;
  width:118px!important;
  min-width:118px!important;
  height:56px!important;
  min-height:56px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  border:1px dashed #cddbeb!important;
  border-radius:10px!important;
  background:#fafcff!important;
  color:#7d8da2!important;
  font-size:9px!important;
  font-weight:750!important;
}
.compactTop .compactMonthBox > div[style]::before{display:none!important;content:none!important}
.compactTop .sideActions{
  grid-column:3!important;
  grid-row:2!important;
  align-self:center!important;
  display:flex!important;
  margin:0!important;
  padding:0!important;
  gap:0!important;
  border:none!important;
  background:transparent!important;
}
.compactTop .sideActions::before{display:none!important;content:none!important}
.compactTop .sideActions .btn{
  width:auto!important;
  min-width:128px!important;
  height:28px!important;
  min-height:28px!important;
  padding:0 9px!important;
  border-radius:8px!important;
  font-size:9px!important;
  font-weight:900!important;
  box-shadow:0 5px 10px rgba(37,99,235,.12)!important;
}

/* preserve original dark mode — only compact top gets dark equivalents */
html[data-theme="dark"] .layout.compactTop > .card{
  background:linear-gradient(145deg,#101827,#0f172a)!important;
  border-color:#26364e!important;
}
html[data-theme="dark"] .compactTop .upload .title,
html[data-theme="dark"] .compactTop .sideTitleRow .title,
html[data-theme="dark"] .compactTop .fileTitleRow .title,
html[data-theme="dark"] .compactTop .monthName{color:#e6eefb!important}
html[data-theme="dark"] .compactTop .miniDrop,
html[data-theme="dark"] .compactTop .monthItem,
html[data-theme="dark"] .compactTop .compactFileList > div[style],
html[data-theme="dark"] .compactTop .compactMonthBox > div[style],
html[data-theme="dark"] .compactTop .uploadActions .btn,
html[data-theme="dark"] .compactTop .sideTitleRow .smBtn{
  background:#0d1625!important;
  border-color:#2b3b53!important;
  color:#c7d4e6!important;
}
html[data-theme="dark"] .compactTop .filePill{background:#132238!important;border-color:#31547e!important;color:#b9d7ff!important}
html[data-theme="dark"] .compactTop .monthItem.active{background:#12233b!important;border-color:#4e82ca!important}

@media (max-width:1180px){
  .layout.compactTop{grid-template-columns:1fr!important}
  .compactTop .upload,
  .compactTop .compactSide{height:auto!important;min-height:98px!important}
}
@media (max-width:720px){
  .uploadGrid.compactUpload{grid-template-columns:1fr!important}
  .compactTop .upload{height:auto!important}
  .compactTop .miniDrop{height:54px!important;min-height:54px!important}
  .compactTop .compactSide{
    grid-template-columns:1fr!important;
    grid-template-rows:20px auto auto!important;
    height:auto!important;
  }
  .compactTop .sideTitleRow{grid-column:1!important;grid-row:1!important}
  .compactTop .compactMonthBox{grid-column:1!important;grid-row:2!important}
  .compactTop .sideActions{grid-column:1!important;grid-row:3!important;justify-content:stretch!important;margin-top:4px!important}
  .compactTop .sideActions .btn{width:100%!important}
}

/* ===== ui-v67.css ===== */
/* V67 — UI ONLY
   Base: V66.
   Giữ nguyên toàn bộ chức năng gốc.
   Chỉ fix lại bố cục và UI khu Tải file Excel + Chọn tháng:
   - rõ ràng hơn
   - không che mất thông tin
   - thêm hiệu ứng hover nhẹ
*/

@keyframes v67FadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ===== TOP WRAPPER ===== */
.layout.compactTop{
  grid-template-columns:minmax(460px, 1fr) minmax(700px, 1.05fr)!important;
  gap:14px!important;
  align-items:start!important;
  margin-bottom:12px!important;
}
.layout.compactTop > .card{
  border-radius:16px!important;
  box-shadow:0 10px 24px rgba(15,23,42,.06)!important;
}

/* ===== UPLOAD PANEL ===== */
.compactTop .upload{
  height:auto!important;
  min-height:138px!important;
  padding:12px!important;
}
.uploadGrid.compactUpload{
  display:grid!important;
  grid-template-columns:minmax(260px, .96fr) minmax(280px, 1.04fr)!important;
  gap:12px!important;
  align-items:start!important;
  height:auto!important;
}
.compactTop .uploadLeft{
  grid-template-rows:22px minmax(0,1fr)!important;
  gap:8px!important;
}
.compactTop .upload .title{
  height:22px!important;
  line-height:22px!important;
  font-size:13px!important;
  letter-spacing:0!important;
}
.compactTop .upload .title::before{
  width:17px!important;
  height:17px!important;
  min-width:17px!important;
  font-size:9px!important;
}
.compactTop .miniDrop{
  height:74px!important;
  min-height:74px!important;
  border-radius:12px!important;
  padding:0 12px!important;
  transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease, background .2s ease!important;
}
.compactTop .miniDrop > div{
  gap:9px!important;
}
.compactTop .miniDrop > div::before{
  width:28px!important;
  height:28px!important;
  min-width:28px!important;
  font-size:21px!important;
  color:#567492!important;
}
.compactTop .miniDrop b{
  font-size:12.5px!important;
  line-height:1.2!important;
  font-weight:850!important;
}
.compactTop .uploadRight{
  min-width:0!important;
  display:grid!important;
  grid-template-columns:1fr auto!important;
  grid-template-rows:28px auto auto!important;
  gap:8px 8px!important;
  align-content:start!important;
}
.compactTop .fileTitleRow{
  height:28px!important;
  min-height:28px!important;
  align-items:center!important;
}
.compactTop .fileTitleRow .title{
  font-size:12.5px!important;
}
.compactTop #fileCount{
  height:22px!important;
  min-height:22px!important;
  padding:0 8px!important;
  font-size:10px!important;
}
.compactTop .fileTitleRow .btn.primary{
  height:30px!important;
  min-height:30px!important;
  padding:0 12px!important;
  border-radius:9px!important;
  font-size:10px!important;
  transition:transform .18s ease, box-shadow .18s ease, filter .18s ease!important;
}
.compactTop .fileTitleRow .btn.primary:hover{
  transform:translateY(-1px)!important;
  box-shadow:0 8px 16px rgba(37,99,235,.18)!important;
}
.compactTop .compactFileList{
  grid-column:1/-1!important;
  grid-row:2!important;
  display:flex!important;
  align-items:flex-start!important;
  align-content:flex-start!important;
  flex-wrap:wrap!important;
  gap:6px!important;
  min-height:34px!important;
  max-height:none!important;
  height:auto!important;
  overflow:visible!important;
  padding:2px 0!important;
}
.compactTop .compactFileList > div[style]{
  height:36px!important;
  min-height:36px!important;
  padding:0 10px!important;
  border-radius:10px!important;
  font-size:10px!important;
}
.compactTop .filePill{
  max-width:210px!important;
  min-width:90px!important;
  height:28px!important;
  min-height:28px!important;
  line-height:26px!important;
  padding:0 24px 0 10px!important;
  font-size:10px!important;
  font-weight:800!important;
  transition:transform .16s ease, border-color .16s ease, box-shadow .16s ease!important;
}
.compactTop .filePill:hover{
  transform:translateY(-1px)!important;
  border-color:#adc4df!important;
  box-shadow:0 4px 10px rgba(15,23,42,.06)!important;
}
.compactTop .filePill button{
  top:5px!important;
  right:5px!important;
  width:17px!important;
  height:17px!important;
  min-width:17px!important;
}
.compactTop .uploadActions{
  grid-column:1/-1!important;
  grid-row:3!important;
  justify-content:flex-end!important;
  flex-wrap:wrap!important;
  gap:6px!important;
}
.compactTop .uploadActions .btn{
  height:28px!important;
  min-height:28px!important;
  padding:0 10px!important;
  border-radius:8px!important;
  font-size:10px!important;
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease!important;
}
.compactTop .uploadActions .btn:hover{
  transform:translateY(-1px)!important;
  border-color:#bfd0e4!important;
  box-shadow:0 5px 10px rgba(15,23,42,.05)!important;
}

/* ===== MONTH PANEL ===== */
.compactTop .compactSide{
  height:auto!important;
  min-height:138px!important;
  padding:12px!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  grid-template-rows:24px auto auto!important;
  gap:10px 10px!important;
  align-items:start!important;
}
.compactTop .sideTitleRow{
  grid-column:1/-1!important;
  grid-row:1!important;
  height:24px!important;
  min-height:24px!important;
}
.compactTop .sideTitleRow .title{
  font-size:13px!important;
}
.compactTop .sideTitleRow .title::before{
  width:17px!important;
  height:17px!important;
  min-width:17px!important;
  font-size:9px!important;
}
.compactTop .sideTitleRow .smBtn{
  width:28px!important;
  min-width:28px!important;
  height:28px!important;
  min-height:28px!important;
  border-radius:9px!important;
  transition:transform .16s ease, box-shadow .16s ease!important;
}
.compactTop .sideTitleRow .smBtn:hover{
  transform:rotate(20deg)!important;
  box-shadow:0 5px 10px rgba(15,23,42,.06)!important;
}
.compactTop .compactMonthBox{
  grid-column:1!important;
  grid-row:2!important;
  min-width:0!important;
  min-height:78px!important;
  height:auto!important;
  max-height:none!important;
  gap:10px!important;
  padding:2px 0 4px!important;
  overflow:auto hidden!important;
}
.compactTop .monthItem{
  flex:0 0 148px!important;
  width:148px!important;
  min-width:148px!important;
  height:78px!important;
  min-height:78px!important;
  padding:7px 8px!important;
  border-radius:12px!important;
  grid-template-columns:16px 10px minmax(0,1fr) auto!important;
  grid-template-rows:18px 1fr 24px!important;
  gap:4px 5px!important;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease!important;
  animation:v67FadeIn .22s ease both!important;
}
.compactTop .monthItem:hover{
  transform:translateY(-2px)!important;
  box-shadow:0 8px 16px rgba(37,99,235,.08)!important;
}
.compactTop .monthItem input{
  width:14px!important;
  height:14px!important;
  min-width:14px!important;
}
.compactTop .monthItem .dot{
  width:10px!important;
  height:10px!important;
  min-width:10px!important;
}
.compactTop .monthName{
  font-size:11px!important;
}
.compactTop .monthCount{
  min-width:26px!important;
  height:18px!important;
  font-size:9px!important;
}
.compactTop .monthActions{
  gap:4px!important;
}
.compactTop .iconBtn,
.compactTop .uploadMonth,
.compactTop .editMonth,
.compactTop .deleteMonth{
  height:22px!important;
  min-height:22px!important;
  border-radius:7px!important;
  font-size:10px!important;
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease!important;
}
.compactTop .iconBtn:hover,
.compactTop .uploadMonth:hover,
.compactTop .editMonth:hover,
.compactTop .deleteMonth:hover{
  transform:translateY(-1px)!important;
  box-shadow:0 4px 8px rgba(15,23,42,.06)!important;
}
.compactTop .compactMonthBox > div[style]{
  flex:0 0 136px!important;
  width:136px!important;
  min-width:136px!important;
  height:78px!important;
  min-height:78px!important;
  border-radius:12px!important;
  font-size:10px!important;
}
.compactTop .sideActions{
  grid-column:2!important;
  grid-row:2!important;
  align-self:start!important;
  display:flex!important;
  justify-content:flex-end!important;
}
.compactTop .sideActions .btn{
  min-width:156px!important;
  height:34px!important;
  min-height:34px!important;
  padding:0 12px!important;
  border-radius:10px!important;
  font-size:10px!important;
  white-space:nowrap!important;
  transition:transform .18s ease, box-shadow .18s ease, filter .18s ease!important;
}
.compactTop .sideActions .btn:hover{
  transform:translateY(-1px)!important;
  box-shadow:0 8px 16px rgba(37,99,235,.16)!important;
}

/* keep summary/other info visible below if any */
.compactTop .compactSide > :not(.sideTitleRow):not(.compactMonthBox):not(.sideActions){
  grid-column:1/-1!important;
}

/* ===== RESPONSIVE ===== */
@media (max-width:1280px){
  .layout.compactTop{
    grid-template-columns:minmax(420px, .98fr) minmax(0, 1.02fr)!important;
  }
}
@media (max-width:1180px){
  .layout.compactTop{grid-template-columns:1fr!important}
}
@media (max-width:760px){
  .uploadGrid.compactUpload{grid-template-columns:1fr!important}
  .compactTop .compactSide{
    grid-template-columns:1fr!important;
    grid-template-rows:24px auto auto!important;
  }
  .compactTop .compactMonthBox{grid-column:1!important;grid-row:2!important}
  .compactTop .sideActions{grid-column:1!important;grid-row:3!important;justify-content:stretch!important}
  .compactTop .sideActions .btn{width:100%!important}
}

/* ===== ui-v68.css ===== */
/* V68 — UI ONLY
   Base: V67
   Giữ nguyên toàn bộ chức năng gốc.
   Chỉ tăng hiệu ứng glassmorphism + animation cho khu Tải file Excel và Chọn tháng.
*/

:root{
  --v68-glass-bg: linear-gradient(180deg, rgba(255,255,255,.80), rgba(247,250,255,.74));
  --v68-glass-panel: rgba(255,255,255,.55);
  --v68-glass-panel-2: rgba(255,255,255,.68);
  --v68-glass-line: rgba(147,197,253,.45);
  --v68-glass-line-strong: rgba(96,165,250,.75);
  --v68-glass-shadow: 0 14px 30px rgba(15,23,42,.08), 0 2px 8px rgba(37,99,235,.06);
  --v68-btn-shadow: 0 10px 18px rgba(37,99,235,.16);
}

@keyframes v68CardIn {
  from { opacity: 0; transform: translateY(8px) scale(.985); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes v68FloatGlow {
  0%,100% { box-shadow:0 0 0 rgba(0,0,0,0); }
  50% { box-shadow:0 10px 22px rgba(37,99,235,.08); }
}
@keyframes v68PulseBorder {
  0%,100% { border-color: rgba(96,165,250,.48); }
  50% { border-color: rgba(56,189,248,.72); }
}

/* Main wrapper */
.layout.compactTop{
  gap:16px!important;
}
.layout.compactTop > .card{
  position:relative!important;
  overflow:hidden!important;
  border-radius:18px!important;
  border:1px solid rgba(191,219,254,.78)!important;
  background:var(--v68-glass-bg)!important;
  box-shadow:var(--v68-glass-shadow)!important;
  backdrop-filter: blur(14px) saturate(1.15)!important;
  -webkit-backdrop-filter: blur(14px) saturate(1.15)!important;
  animation:v68CardIn .28s ease both!important;
}
.layout.compactTop > .card::before{
  height:3px!important;
  background:linear-gradient(90deg,#3b82f6,#60a5fa,#22c55e,#8b5cf6)!important;
  opacity:.8!important;
}
.layout.compactTop > .card::after{
  display:block!important;
  content:""!important;
  position:absolute!important;
  inset:auto auto -20px -20px!important;
  width:120px!important;
  height:120px!important;
  border-radius:999px!important;
  background:radial-gradient(circle, rgba(96,165,250,.16), transparent 70%)!important;
  pointer-events:none!important;
}

/* Titles */
.compactTop .upload .title,
.compactTop .sideTitleRow .title,
.compactTop .fileTitleRow .title{
  color:#1e2f4d!important;
  text-shadow:0 1px 0 rgba(255,255,255,.5)!important;
}
.compactTop .upload .title::before,
.compactTop .sideTitleRow .title::before{
  background:linear-gradient(180deg, rgba(255,255,255,.9), rgba(226,236,248,.95))!important;
  color:#4a6283!important;
  border:1px solid rgba(191,219,254,.7)!important;
}

/* Upload glass box */
.compactTop .miniDrop{
  border:1.5px dashed rgba(96,165,250,.55)!important;
  background:linear-gradient(180deg, rgba(255,255,255,.62), rgba(241,247,255,.75))!important;
  backdrop-filter: blur(10px)!important;
  -webkit-backdrop-filter: blur(10px)!important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85), 0 8px 18px rgba(37,99,235,.05)!important;
  animation:v68FloatGlow 4s ease-in-out infinite!important;
}
.compactTop .miniDrop:hover,
.compactTop .miniDrop.drag{
  background:linear-gradient(180deg, rgba(255,255,255,.75), rgba(236,245,255,.92))!important;
  border-color:rgba(59,130,246,.8)!important;
  box-shadow:0 0 0 4px rgba(59,130,246,.08), 0 12px 22px rgba(37,99,235,.10)!important;
}
.compactTop .miniDrop > div::before{
  color:#52759a!important;
  text-shadow:0 2px 10px rgba(37,99,235,.12)!important;
}
.compactTop .miniDrop b{
  color:#2e4564!important;
}

/* File list area */
.compactTop .compactFileList > div[style],
.compactTop .filePill{
  background:linear-gradient(180deg, rgba(255,255,255,.78), rgba(244,248,255,.86))!important;
  border-color:rgba(201,215,235,.95)!important;
  box-shadow:0 4px 12px rgba(15,23,42,.04)!important;
}
.compactTop .filePill{
  backdrop-filter: blur(8px)!important;
  -webkit-backdrop-filter: blur(8px)!important;
}
.compactTop .filePill button{
  background:linear-gradient(180deg,#f7f9fd,#e9eff7)!important;
  box-shadow:0 2px 5px rgba(15,23,42,.05)!important;
  transition:transform .16s ease, background .16s ease!important;
}
.compactTop .filePill button:hover{
  transform:scale(1.06)!important;
  background:linear-gradient(180deg,#eef4fb,#e1ebf7)!important;
}

/* Action buttons */
.compactTop .fileTitleRow .btn.primary,
.compactTop .sideActions .btn{
  background:linear-gradient(135deg,#3478f6,#5a94ff)!important;
  box-shadow:var(--v68-btn-shadow)!important;
}
.compactTop .fileTitleRow .btn.primary:hover,
.compactTop .sideActions .btn:hover{
  filter:brightness(1.03)!important;
  transform:translateY(-1px)!important;
}
.compactTop .uploadActions .btn,
.compactTop .sideTitleRow .smBtn,
.compactTop .iconBtn,
.compactTop .uploadMonth,
.compactTop .editMonth,
.compactTop .deleteMonth{
  background:linear-gradient(180deg, rgba(255,255,255,.82), rgba(245,248,255,.95))!important;
  backdrop-filter: blur(7px)!important;
  -webkit-backdrop-filter: blur(7px)!important;
  box-shadow:0 4px 10px rgba(15,23,42,.04)!important;
}
.compactTop .uploadActions .btn:hover,
.compactTop .sideTitleRow .smBtn:hover,
.compactTop .iconBtn:hover,
.compactTop .uploadMonth:hover,
.compactTop .editMonth:hover,
.compactTop .deleteMonth:hover{
  filter:brightness(1.02)!important;
}

/* Month cards */
.compactTop .monthItem,
.compactTop .compactMonthBox > div[style]{
  background:linear-gradient(180deg, rgba(255,255,255,.72), rgba(246,250,255,.90))!important;
  border:1px solid rgba(191,219,254,.9)!important;
  backdrop-filter: blur(12px) saturate(1.08)!important;
  -webkit-backdrop-filter: blur(12px) saturate(1.08)!important;
  box-shadow:0 10px 20px rgba(15,23,42,.05)!important;
}
.compactTop .monthItem{
  animation:v68CardIn .24s ease both!important;
}
.compactTop .monthItem.active{
  background:linear-gradient(180deg, rgba(240,247,255,.95), rgba(248,251,255,.96))!important;
  border-color:rgba(59,130,246,.85)!important;
  box-shadow:0 0 0 1px rgba(59,130,246,.10), 0 12px 22px rgba(37,99,235,.10)!important;
  animation:v68PulseBorder 2.4s ease-in-out infinite!important;
}
.compactTop .monthItem:hover{
  background:linear-gradient(180deg, rgba(255,255,255,.88), rgba(244,248,255,.95))!important;
}
.compactTop .monthCount,
.compactTop #fileCount{
  background:linear-gradient(180deg, rgba(243,246,252,.95), rgba(234,241,249,.95))!important;
  border:1px solid rgba(219,228,239,.9)!important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8)!important;
}
.compactTop .monthName{
  letter-spacing:.2px!important;
}

/* Placeholder add month box */
.compactTop .compactMonthBox > div[style]{
  color:#687d98!important;
  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease!important;
}
.compactTop .compactMonthBox > div[style]:hover{
  transform:translateY(-1px)!important;
  border-color:rgba(96,165,250,.8)!important;
  box-shadow:0 10px 18px rgba(37,99,235,.08)!important;
}

/* Dark mode compatibility for only top cards */
html[data-theme="dark"] .layout.compactTop > .card{
  background:linear-gradient(180deg, rgba(15,23,42,.82), rgba(17,24,39,.78))!important;
  border-color:rgba(71,85,105,.9)!important;
  box-shadow:0 14px 30px rgba(0,0,0,.28)!important;
}
html[data-theme="dark"] .compactTop .upload .title,
html[data-theme="dark"] .compactTop .sideTitleRow .title,
html[data-theme="dark"] .compactTop .fileTitleRow .title,
html[data-theme="dark"] .compactTop .monthName{color:#ecf4ff!important;text-shadow:none!important}
html[data-theme="dark"] .compactTop .miniDrop,
html[data-theme="dark"] .compactTop .monthItem,
html[data-theme="dark"] .compactTop .compactMonthBox > div[style],
html[data-theme="dark"] .compactTop .uploadActions .btn,
html[data-theme="dark"] .compactTop .sideTitleRow .smBtn,
html[data-theme="dark"] .compactTop .filePill,
html[data-theme="dark"] .compactTop .compactFileList > div[style]{
  background:linear-gradient(180deg, rgba(22,32,50,.78), rgba(15,23,42,.86))!important;
  border-color:rgba(71,85,105,.95)!important;
  color:#cfe2ff!important;
  box-shadow:0 10px 22px rgba(0,0,0,.18)!important;
}
html[data-theme="dark"] .compactTop .monthItem.active{
  border-color:rgba(96,165,250,.9)!important;
  background:linear-gradient(180deg, rgba(18,31,52,.92), rgba(20,34,58,.88))!important;
}
html[data-theme="dark"] .compactTop .monthCount,
html[data-theme="dark"] .compactTop #fileCount{
  background:linear-gradient(180deg, rgba(30,41,59,.88), rgba(22,32,50,.92))!important;
  border-color:rgba(71,85,105,.9)!important;
  color:#d9e6fb!important;
}
html[data-theme="dark"] .compactTop .miniDrop b{color:#d7e8ff!important}
html[data-theme="dark"] .compactTop .miniDrop > div::before{color:#cfe3ff!important}

/* ===== ui-v69.css ===== */
/* V69 — UI ONLY
   Base: V68
   Giữ nguyên toàn bộ chức năng gốc.
   Tinh chỉnh lại giao diện khu Tải file và Chọn tháng:
   - bố cục cân đối hơn
   - rõ ràng hơn
   - tránh che / chồng thông tin
*/

:root{
  --v69-card-radius:18px;
  --v69-inner-radius:14px;
  --v69-border:#dbe7f5;
  --v69-border-strong:#b8cdf3;
  --v69-blue:#3b82f6;
  --v69-blue-2:#5c97ff;
  --v69-text:#243754;
  --v69-muted:#7286a3;
  --v69-soft:#f8fbff;
}

/* overall top layout */
.layout.compactTop{
  grid-template-columns:minmax(490px, 1fr) minmax(620px, 1fr)!important;
  gap:16px!important;
  align-items:start!important;
}
.layout.compactTop > .card{
  border-radius:var(--v69-card-radius)!important;
}
.compactTop .upload,
.compactTop .compactSide{
  min-height:156px!important;
  padding:14px!important;
}

/* titles */
.compactTop .upload .title,
.compactTop .sideTitleRow .title,
.compactTop .fileTitleRow .title{
  color:var(--v69-text)!important;
}

/* upload area */
.uploadGrid.compactUpload{
  grid-template-columns:minmax(270px, .98fr) minmax(300px, 1.02fr)!important;
  gap:14px!important;
  align-items:start!important;
}
.compactTop .uploadLeft{gap:10px!important}
.compactTop .miniDrop{
  min-height:88px!important;
  height:88px!important;
  border-radius:var(--v69-inner-radius)!important;
  border:1.5px dashed #b8d1f2!important;
  background:linear-gradient(180deg, rgba(255,255,255,.78), rgba(245,249,255,.92))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.92), 0 8px 20px rgba(15,23,42,.05)!important;
}
.compactTop .miniDrop:hover,
.compactTop .miniDrop.drag{
  border-color:#8eb5f8!important;
  box-shadow:0 0 0 4px rgba(59,130,246,.08), 0 12px 24px rgba(37,99,235,.08)!important;
}
.compactTop .miniDrop > div{gap:10px!important}
.compactTop .miniDrop > div::before{font-size:24px!important;color:#5a78a0!important}
.compactTop .miniDrop b{font-size:13px!important;font-weight:850!important;color:#2e4564!important}

.compactTop .uploadRight{
  display:grid!important;
  grid-template-columns:1fr auto!important;
  grid-template-rows:auto auto auto!important;
  gap:10px 10px!important;
  align-content:start!important;
  min-width:0!important;
}
.compactTop .fileTitleRow{
  grid-column:1/-1!important;
  justify-content:space-between!important;
  gap:8px!important;
}
.compactTop .fileTitleRow .title{font-size:13px!important}
.compactTop #fileCount{
  height:24px!important;
  min-height:24px!important;
  padding:0 10px!important;
  font-size:10px!important;
}
.compactTop .fileTitleRow .btn.primary{
  height:36px!important;
  min-height:36px!important;
  padding:0 14px!important;
  border-radius:11px!important;
  font-size:11px!important;
}
.compactTop .compactFileList{
  grid-column:1/-1!important;
  min-height:44px!important;
  padding:4px 0!important;
  gap:8px!important;
  overflow:visible!important;
  align-items:center!important;
}
.compactTop .compactFileList > div[style]{
  width:100%!important;
  min-height:44px!important;
  border-radius:12px!important;
  padding:0 14px!important;
  color:#8497b1!important;
  font-size:12px!important;
  font-weight:700!important;
}
.compactTop .filePill{
  max-width:240px!important;
  height:30px!important;
  min-height:30px!important;
  line-height:28px!important;
  padding:0 28px 0 12px!important;
  border-radius:999px!important;
  font-size:11px!important;
}
.compactTop .filePill button{
  top:6px!important;
  right:6px!important;
  width:18px!important;
  height:18px!important;
}
.compactTop .uploadActions{
  grid-column:1/-1!important;
  justify-content:flex-end!important;
  gap:8px!important;
  flex-wrap:wrap!important;
}
.compactTop .uploadActions .btn{
  height:32px!important;
  min-height:32px!important;
  padding:0 12px!important;
  border-radius:10px!important;
  font-size:11px!important;
}

/* month panel */
.compactTop .compactSide{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  grid-template-rows:auto auto!important;
  gap:12px 14px!important;
}
.compactTop .sideTitleRow{
  grid-column:1/-1!important;
  align-items:center!important;
  min-height:26px!important;
}
.compactTop .sideTitleRow .smBtn{
  width:36px!important;
  min-width:36px!important;
  height:36px!important;
  min-height:36px!important;
  border-radius:12px!important;
}
.compactTop .compactMonthBox{
  grid-column:1!important;
  min-height:94px!important;
  gap:12px!important;
  padding:2px 0 6px!important;
  overflow:auto hidden!important;
}
.compactTop .monthItem,
.compactTop .compactMonthBox > div[style]{
  flex:0 0 168px!important;
  width:168px!important;
  min-width:168px!important;
  height:94px!important;
  min-height:94px!important;
  border-radius:14px!important;
}
.compactTop .monthItem{
  padding:8px 9px!important;
  grid-template-columns:18px 11px minmax(0,1fr) auto!important;
  grid-template-rows:20px 1fr 28px!important;
  gap:5px 6px!important;
  background:linear-gradient(180deg, rgba(255,255,255,.76), rgba(247,250,255,.94))!important;
}
.compactTop .monthItem:hover{
  transform:translateY(-2px)!important;
}
.compactTop .monthItem input{
  width:15px!important;
  height:15px!important;
}
.compactTop .monthItem .dot{
  width:11px!important;
  height:11px!important;
  min-width:11px!important;
}
.compactTop .monthName{font-size:12px!important;font-weight:900!important}
.compactTop .monthCount{
  min-width:28px!important;
  height:20px!important;
  font-size:10px!important;
}
.compactTop .monthActions{
  grid-template-columns:repeat(3,1fr)!important;
  gap:6px!important;
  padding-top:6px!important;
}
.compactTop .iconBtn,
.compactTop .uploadMonth,
.compactTop .editMonth,
.compactTop .deleteMonth{
  height:24px!important;
  min-height:24px!important;
  border-radius:8px!important;
  font-size:11px!important;
}

/* button area right */
.compactTop .sideActions{
  grid-column:2!important;
  align-self:start!important;
  display:flex!important;
  justify-content:flex-end!important;
  padding-top:24px!important;
}
.compactTop .sideActions .btn{
  min-width:190px!important;
  height:40px!important;
  min-height:40px!important;
  padding:0 16px!important;
  border-radius:12px!important;
  font-size:12px!important;
  box-shadow:0 10px 22px rgba(37,99,235,.16)!important;
}

/* glassmorphism enhancement but subtle */
.layout.compactTop > .card,
.compactTop .miniDrop,
.compactTop .compactFileList > div[style],
.compactTop .filePill,
.compactTop .monthItem,
.compactTop .compactMonthBox > div[style],
.compactTop .uploadActions .btn,
.compactTop .sideTitleRow .smBtn,
.compactTop .iconBtn,
.compactTop .uploadMonth,
.compactTop .editMonth,
.compactTop .deleteMonth{
  backdrop-filter:blur(10px) saturate(1.08)!important;
  -webkit-backdrop-filter:blur(10px) saturate(1.08)!important;
}

/* responsive */
@media (max-width:1220px){
  .layout.compactTop{grid-template-columns:1fr!important}
  .compactTop .compactSide{grid-template-columns:1fr!important;grid-template-rows:auto auto auto!important}
  .compactTop .sideActions{grid-column:1!important;padding-top:0!important;justify-content:flex-end!important}
}
@media (max-width:760px){
  .uploadGrid.compactUpload{grid-template-columns:1fr!important}
  .compactTop .fileTitleRow{justify-content:flex-start!important;flex-wrap:wrap!important}
  .compactTop .sideActions .btn{width:100%!important;min-width:0!important}
}

/* ===== ui-v70.css ===== */
/* V70 — UI ONLY
   Base: V69
   Giữ nguyên toàn bộ chức năng gốc.
   Mục tiêu: cân lại bố cục khu Tải file + Chọn tháng, cho 2 ô chính bằng nhau hơn.
*/

:root{
  --v70-panel-radius: 18px;
  --v70-inner-radius: 14px;
}

/* 2 panel top equal width */
.layout.compactTop{
  grid-template-columns:repeat(2, minmax(0, 1fr))!important;
  gap:18px!important;
  align-items:stretch!important;
}
.layout.compactTop > .card{
  min-height:188px!important;
  border-radius:var(--v70-panel-radius)!important;
}
.compactTop .upload,
.compactTop .compactSide{
  min-height:188px!important;
  height:100%!important;
  padding:14px!important;
}

/* left panel */
.uploadGrid.compactUpload{
  grid-template-columns:minmax(0, 1fr) minmax(0, 1fr)!important;
  gap:14px!important;
  align-items:start!important;
}
.compactTop .uploadLeft,
.compactTop .uploadRight{
  min-width:0!important;
}
.compactTop .miniDrop{
  width:100%!important;
  min-height:96px!important;
  height:96px!important;
  border-radius:var(--v70-inner-radius)!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
}
.compactTop .compactFileList{
  min-height:52px!important;
}
.compactTop .compactFileList > div[style]{
  min-height:52px!important;
  display:flex!important;
  align-items:center!important;
}
.compactTop .uploadActions{
  gap:10px!important;
}
.compactTop .uploadActions .btn,
.compactTop .fileTitleRow .btn.primary{
  height:34px!important;
  min-height:34px!important;
}

/* right panel */
.compactTop .compactSide{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  grid-template-rows:auto 1fr!important;
  gap:14px 16px!important;
  align-items:start!important;
}
.compactTop .sideTitleRow{
  grid-column:1/-1!important;
}
.compactTop .compactMonthBox{
  grid-column:1!important;
  min-height:96px!important;
  align-items:stretch!important;
  gap:12px!important;
  padding:0!important;
}
.compactTop .monthItem,
.compactTop .compactMonthBox > div[style]{
  height:96px!important;
  min-height:96px!important;
  border-radius:var(--v70-inner-radius)!important;
}

/* If only placeholder exists, make it visually match upload box size */
.compactTop .compactMonthBox > div[style]:only-child{
  flex:0 0 calc(50% - 6px)!important;
  width:calc(50% - 6px)!important;
  min-width:240px!important;
  max-width:420px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
  padding:0 18px!important;
  border:1.5px solid #c9daf4!important;
  background:linear-gradient(180deg, rgba(255,255,255,.78), rgba(245,249,255,.92))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.92), 0 8px 20px rgba(15,23,42,.05)!important;
  color:#7a8fae!important;
  font-weight:700!important;
}
.compactTop .monthItem{
  flex:0 0 170px!important;
  width:170px!important;
  min-width:170px!important;
}
.compactTop .sideActions{
  grid-column:2!important;
  grid-row:2!important;
  align-self:center!important;
  padding-top:0!important;
}
.compactTop .sideActions .btn{
  min-width:196px!important;
  height:46px!important;
  min-height:46px!important;
  border-radius:14px!important;
}

/* light glass touch */
.layout.compactTop > .card,
.compactTop .miniDrop,
.compactTop .compactFileList > div[style],
.compactTop .filePill,
.compactTop .monthItem,
.compactTop .compactMonthBox > div[style],
.compactTop .uploadActions .btn,
.compactTop .fileTitleRow .btn.primary,
.compactTop .sideTitleRow .smBtn,
.compactTop .iconBtn,
.compactTop .uploadMonth,
.compactTop .editMonth,
.compactTop .deleteMonth{
  backdrop-filter:blur(10px) saturate(1.08)!important;
  -webkit-backdrop-filter:blur(10px) saturate(1.08)!important;
}

/* smoother spacing to avoid content clipping */
.compactTop .fileTitleRow,
.compactTop .sideTitleRow{
  margin-bottom:2px!important;
}
.compactTop .monthActions{gap:6px!important}

/* responsive */
@media (max-width:1240px){
  .layout.compactTop{grid-template-columns:1fr!important}
  .compactTop .compactSide{grid-template-columns:minmax(0,1fr)!important;grid-template-rows:auto auto auto!important}
  .compactTop .sideActions{grid-column:1!important;grid-row:3!important;justify-content:flex-end!important}
  .compactTop .compactMonthBox > div[style]:only-child{
    width:100%!important;max-width:none!important;min-width:0!important;flex:1 1 auto!important;
  }
}
@media (max-width:760px){
  .uploadGrid.compactUpload{grid-template-columns:1fr!important}
  .compactTop .sideActions .btn{width:100%!important;min-width:0!important}
}

/* ===== Firebase production UX polish ===== */
:root{
  --fbx-focus:#2563eb;
  --fbx-ring:rgba(37,99,235,.18);
}
button,input,select,textarea{font-family:inherit}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{
  outline:3px solid var(--fbx-ring)!important;
  outline-offset:2px;
}
button{touch-action:manipulation}
.pksOpenBtn,.g48AccountBtn{transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}
.pksOpenBtn:hover,.g48AccountBtn:hover{transform:translateY(-1px)}
.pksCard{max-height:min(88vh,760px);overflow:auto}
.pksStatus.loading:before{content:"";display:inline-block;width:13px;height:13px;margin-right:8px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;vertical-align:-2px;animation:fbxSpin .8s linear infinite}
@keyframes fbxSpin{to{transform:rotate(360deg)}}
.pksConfigNotice b{letter-spacing:-.01em}
.pksActions{position:sticky;bottom:-1px;z-index:5;padding-top:10px;background:linear-gradient(180deg,transparent,rgba(255,255,255,.96) 22%)}
html[data-theme="dark"] .pksActions{background:linear-gradient(180deg,transparent,rgba(15,23,42,.96) 22%)}
.g48AuthCard{animation:fbxPop .22s ease-out both}
@keyframes fbxPop{from{opacity:0;transform:translateY(8px) scale(.985)}to{opacity:1;transform:none}}
.fbxServerBadge{display:inline-flex;align-items:center;gap:7px;padding:6px 9px;border-radius:999px;font-size:11px;font-weight:800;background:#ecfdf3;color:#15803d;border:1px solid #bbf7d0}
.fbxServerBadge:before{content:"";width:7px;height:7px;border-radius:50%;background:#22c55e}
@media (max-width:760px){
  .pksModal{padding:0!important;align-items:flex-end!important}
  .pksCard{width:100%!important;max-width:none!important;max-height:94vh!important;border-radius:20px 20px 0 0!important;padding-bottom:max(14px,env(safe-area-inset-bottom))}
  .pksHead{position:sticky;top:0;z-index:6;background:inherit;padding-top:4px}
  .pksGrid.pksDates{grid-template-columns:1fr!important}
  .pksGrid .pksWide{grid-column:auto!important}
  .pksActions{display:grid!important;grid-template-columns:1fr!important}
  .pksBtn{min-height:44px}
  .g48AuthCard{margin:12px}
}
@media (prefers-reduced-motion:reduce){
  *,*:before,*:after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}