/* Dashboard Kế toán Lizen — giao diện tối: nền tím đêm ánh hồng, chữ kem, điểm nhấn cam (theo ảnh mẫu) */
[hidden]{display:none!important}
:root{
  --bg:#110e17; --bg2:#16121d; --surface:#1b1723; --surface2:#231e2d; --surface3:#2c2639;
  --line:#352e43; --line2:#463d58;
  --ink:#f4ebdd; --ink2:#d9cfc1; --mute:#a99fb5; --mute2:#857b92;
  --accent:#f2703a; --accent2:#ff8a55; --accentbg:rgba(242,112,58,.14);
  --amber:#fbb021; --glow:#7a2160;
  --ok:#5bd08a; --okbg:rgba(91,208,138,.13);
  --warn:#fbb021; --warnbg:rgba(251,176,33,.14);
  --bad:#ff6b6b; --badbg:rgba(255,107,107,.14);
  --info:#7cc4ff; --infobg:rgba(124,196,255,.13);
  --r:14px; --r2:10px; --r3:8px;
  --font:"Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,"SFMono-Regular",Consolas,monospace;
  --t:180ms cubic-bezier(.2,.7,.2,1);
  --side:248px;
}
*{box-sizing:border-box}
html{color-scheme:dark;-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;background:var(--bg);color:var(--ink);font:400 15px/1.5 var(--font);-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(900px 560px at 18% -8%,rgba(150,40,115,.40),transparent 62%),
             radial-gradient(700px 520px at 92% 112%,rgba(242,112,58,.10),transparent 60%)}
a{color:var(--accent2)}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent2);outline-offset:2px;border-radius:6px}
.mono{font-family:var(--mono)}
.num{font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.muted{color:var(--mute)}.small{font-size:13px}.nowrap{white-space:nowrap}
.pos{color:var(--ok)}.neg{color:var(--bad)}
svg.i{width:18px;height:18px;flex:none;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ---------- khung ---------- */
.shell{position:relative;z-index:1;display:grid;grid-template-columns:var(--side) 1fr;min-height:100vh}
.side{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;background:rgba(17,14,23,.72);backdrop-filter:blur(10px);border-right:1px solid var(--line);padding:18px 12px 12px;overflow-y:auto}
.brand{display:flex;flex-direction:column;gap:6px;padding:4px 10px 18px}
.brand img{width:150px;height:auto;display:block}
.brand .eyebrow{font-size:10.5px}
.nav{display:flex;flex-direction:column;gap:2px;flex:1}
.nav .grp{font:500 10.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mute2);padding:16px 12px 6px}
.nav button{display:flex;align-items:center;gap:11px;width:100%;min-height:42px;padding:9px 12px;border:0;border-radius:10px;background:none;color:var(--ink2);font-weight:500;font-size:14.5px;text-align:left;cursor:pointer;transition:background var(--t),color var(--t)}
.nav button:hover{background:var(--surface2);color:var(--ink)}
.nav button.on{background:var(--accentbg);color:var(--ink);box-shadow:inset 3px 0 0 var(--accent)}
.nav button.on svg{color:var(--accent)}
.nav .cnt{margin-left:auto;min-width:22px;padding:1px 7px;border-radius:999px;background:var(--bad);color:#1a0d0d;font:700 11.5px/1.5 var(--mono);text-align:center}
.me{margin-top:14px;padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.me b{display:block;font-size:14px}.me span{display:block;color:var(--mute);font-size:12.5px}
.me .row{display:flex;gap:6px;margin-top:10px}
.top{display:none}
main{min-width:0;padding:28px 32px 80px;max-width:1500px;width:100%}

/* ---------- tiêu đề trang (giống ảnh mẫu: dòng nhãn mono cam + tiêu đề lớn chữ kem) ---------- */
.eyebrow{font:500 12px/1.3 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.phead{display:flex;flex-wrap:wrap;align-items:flex-end;gap:16px 24px;margin-bottom:22px}
.phead .t{flex:1 1 380px;min-width:0}
.phead h1{margin:8px 0 4px;font-weight:800;font-size:clamp(28px,3.2vw,40px);line-height:1.08;letter-spacing:-.02em;color:var(--ink)}
.phead p{margin:0;color:var(--mute);max-width:72ch}
.phead .act{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.hl{background:linear-gradient(100deg,#ffb36b,#f2703a 45%,#e0569a);-webkit-background-clip:text;background-clip:text;color:transparent}
h2{font-size:17px;font-weight:700;margin:0;letter-spacing:-.01em}
.sec{margin-top:26px}
.sech{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:12px}
.sech .sp{flex:1}

/* ---------- thẻ ---------- */
.card{background:linear-gradient(180deg,rgba(255,255,255,.025),transparent 40%),var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:18px;min-width:0}
.card.pad0{padding:0;overflow:hidden}
.card h2+.sub{margin-top:2px}
.card .sub{color:var(--mute);font-size:13px}
.grid{display:grid;gap:14px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.kpis{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.kpis.k6{grid-template-columns:repeat(6,minmax(0,1fr))}
@media (max-width:1360px){.kpis.k6{grid-template-columns:repeat(3,minmax(0,1fr))}}
.kpi{position:relative;padding:16px 16px 14px;border-radius:var(--r);background:var(--surface);border:1px solid var(--line);overflow:hidden}
.kpi::after{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--line2)}
.kpi.a::after{background:var(--accent)}.kpi.g::after{background:var(--ok)}.kpi.r::after{background:var(--bad)}.kpi.y::after{background:var(--amber)}
.kpi .l{font:500 11px/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.kpi .v{margin-top:10px;font-weight:800;font-size:26px;line-height:1.1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.kpi .v small{font-size:14px;font-weight:600;color:var(--mute);margin-left:4px}
.kpi .s{margin-top:4px;color:var(--mute);font-size:12.5px}
.kpi button.lnk{position:absolute;inset:0;background:none;border:0;cursor:pointer;border-radius:var(--r)}
.kpi button.lnk:hover{background:rgba(255,255,255,.03)}

/* ---------- nút ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:8px 15px;border-radius:10px;border:1px solid var(--line2);background:var(--surface2);color:var(--ink);font-weight:600;font-size:14px;cursor:pointer;transition:background var(--t),border-color var(--t),transform var(--t);white-space:nowrap;text-decoration:none}
.btn:hover{background:var(--surface3);border-color:var(--mute2)}
.btn:active{transform:translateY(1px)}
.btn.pri{background:var(--accent);border-color:var(--accent);color:#1d0f08}
.btn.pri:hover{background:var(--accent2);border-color:var(--accent2)}
.btn.ghost{background:transparent;border-color:transparent;color:var(--ink2)}
.btn.ghost:hover{background:var(--surface2)}
.btn.danger{color:var(--bad);border-color:rgba(255,107,107,.35);background:transparent}
.btn.sm{min-height:32px;padding:4px 10px;font-size:13px;border-radius:8px}
.btn.ic{min-width:36px;padding:6px}
.btn[disabled]{opacity:.45;cursor:not-allowed;transform:none}
.btns{display:inline-flex;gap:6px;flex-wrap:wrap}

/* ---------- nhãn trạng thái (luôn có chữ, không chỉ màu) ---------- */
.pill{display:inline-flex;align-items:center;gap:6px;padding:2px 10px;border-radius:999px;font-size:12.5px;font-weight:600;white-space:nowrap;border:1px solid transparent;line-height:1.6}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.pill.ok{color:var(--ok);background:var(--okbg)}
.pill.bad{color:var(--bad);background:var(--badbg)}
.pill.warn{color:var(--warn);background:var(--warnbg)}
.pill.info{color:var(--info);background:var(--infobg)}
.pill.mute{color:var(--mute);background:rgba(169,159,181,.12)}
.pill.acc{color:var(--accent2);background:var(--accentbg)}
.tag{display:inline-block;padding:1px 8px;border-radius:6px;background:var(--surface3);color:var(--ink2);font:500 12px/1.6 var(--mono);white-space:nowrap}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:5px 12px;border-radius:999px;border:1px solid var(--line2);background:transparent;color:var(--ink2);font-size:13.5px;font-weight:500;cursor:pointer;transition:all var(--t)}
.chip:hover{border-color:var(--mute2);color:var(--ink)}
.chip.on{background:var(--ink);border-color:var(--ink);color:#1a1520}
.chip b{font-family:var(--mono);font-weight:600}

/* ---------- bảng ---------- */
.tw{overflow:auto;max-width:100%;border-radius:var(--r2);-webkit-overflow-scrolling:touch}
.card>.tw{margin:0 -18px -18px;border-radius:0 0 var(--r) var(--r)}
.card.pad0>.tw{margin:0}
table{border-collapse:separate;border-spacing:0;width:100%;font-size:14px}
th,td{padding:9px 12px;border-bottom:1px solid var(--line);vertical-align:middle;text-align:left}
th{position:sticky;top:0;z-index:1;background:var(--surface2);color:var(--mute);font:600 11.5px/1.3 var(--mono);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
tbody tr{transition:background var(--t)}
tbody tr:hover{background:rgba(255,255,255,.025)}
tbody tr.late td:first-child{box-shadow:inset 3px 0 0 var(--bad)}
tbody tr.soon td:first-child{box-shadow:inset 3px 0 0 var(--amber)}
tr.tot td{font-weight:700;background:rgba(255,255,255,.03);border-top:1px solid var(--line2)}
tr.sub td{background:rgba(242,112,58,.05)}
td.act{white-space:nowrap;text-align:right}
td.act .btns{flex-wrap:nowrap}
tr.click{cursor:pointer}
#bg{min-width:1320px}
#bg td.acn{min-width:200px;max-width:240px;position:sticky;left:0;z-index:1;background:var(--surface)}
#bg tr.sub td.acn{background:#211a26}
#bg th:first-child{left:0;z-index:2}
#bg td{padding:6px 8px}
td.okc{white-space:nowrap}
.empty{padding:36px 18px;text-align:center;color:var(--mute)}
.empty b{display:block;color:var(--ink2);font-size:15px;margin-bottom:4px}

/* ---------- ô nhập ---------- */
label.f{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--ink2);font-weight:500;min-width:0}
label.f .h{color:var(--mute);font-weight:400;font-size:12px}
.inp,select.inp,textarea.inp{width:100%;min-height:42px;padding:9px 12px;border-radius:10px;border:1px solid var(--line2);background:var(--bg2);color:var(--ink);font-size:15px;transition:border-color var(--t),box-shadow var(--t)}
.inp:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(242,112,58,.22)}
textarea.inp{min-height:84px;resize:vertical}
select.inp{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--mute) 50%),linear-gradient(135deg,var(--mute) 50%,transparent 50%);background-position:calc(100% - 18px) 55%,calc(100% - 13px) 55%;background-size:5px 5px;background-repeat:no-repeat;padding-right:34px}
.inp.n{text-align:right;font-variant-numeric:tabular-nums}
.inp.sm{min-height:34px;padding:5px 9px;font-size:14px;border-radius:8px}
.inp.cell{min-height:34px;padding:5px 8px;font-size:14px;border-radius:7px;min-width:142px;background:transparent;border-color:transparent}
.inp.cell:hover{border-color:var(--line2)}
.inp.cell:focus{background:var(--bg2)}
.inp.cell.dirty{border-color:var(--amber);background:rgba(251,176,33,.07)}
.inp[readonly]{color:var(--mute)}
.form{display:grid;gap:14px;grid-template-columns:repeat(2,minmax(0,1fr))}
.form .full{grid-column:1/-1}
.check{display:inline-flex;align-items:center;gap:8px;min-height:36px;cursor:pointer;font-size:14px}
.check input{width:18px;height:18px;accent-color:var(--accent)}
.bar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:14px}
.bar .grow{flex:1}
.search{position:relative;flex:1 1 220px;max-width:340px}
.search svg{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--mute);width:16px;height:16px}
.search .inp{padding-left:34px;min-height:38px}
.err{color:var(--bad);font-size:13px}

/* ---------- hộp thoại ---------- */
dialog{border:1px solid var(--line2);border-radius:18px;background:var(--surface);color:var(--ink);padding:0;width:min(640px,calc(100vw - 24px));max-height:calc(100vh - 32px);box-shadow:0 30px 80px rgba(0,0,0,.55)}
dialog.wide{width:min(1100px,calc(100vw - 24px))}
dialog::backdrop{background:rgba(8,6,12,.72);backdrop-filter:blur(3px)}
.dh{display:flex;align-items:flex-start;gap:12px;padding:20px 22px 6px}
.dh h3{margin:6px 0 0;font-size:21px;font-weight:800;letter-spacing:-.01em}
.dh .x{margin-left:auto}
.db{padding:14px 22px;overflow:auto;max-height:calc(100vh - 210px)}
.df{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end;padding:14px 22px 20px;border-top:1px solid var(--line)}
.df .msg{margin-right:auto;align-self:center}

/* ---------- thông báo nhanh ---------- */
#toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:100;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none;width:min(560px,calc(100vw - 24px))}
.toast{pointer-events:auto;padding:11px 16px;border-radius:12px;background:var(--ink);color:#1a1520;font-weight:600;font-size:14px;box-shadow:0 10px 30px rgba(0,0,0,.4);animation:tin .2s ease-out}
.toast.bad{background:var(--bad);color:#200}
@keyframes tin{from{opacity:0;transform:translateY(8px)}}

/* ---------- luồng hồ sơ ---------- */
.pipe{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px}
.pipe .st{flex:1 0 150px;padding:12px 14px;border-radius:12px;border:1px solid var(--line);background:var(--surface);position:relative}
.pipe .st .n{font:800 24px/1.1 var(--font);margin-top:6px}
.pipe .st .l{font-size:12.5px;color:var(--ink2);line-height:1.35;min-height:34px}
.pipe .st .o{font-size:12px;color:var(--bad);margin-top:2px}
.dots{display:inline-flex;gap:4px;align-items:center}
.dots i{width:9px;height:9px;border-radius:50%;background:var(--line2)}
.dots i.d{background:var(--ok)}.dots i.c{background:var(--accent);box-shadow:0 0 0 3px rgba(242,112,58,.25)}
.timeline{list-style:none;margin:0;padding:0}
.timeline li{position:relative;padding:0 0 16px 22px;border-left:2px solid var(--line2);margin-left:6px}
.timeline li::before{content:"";position:absolute;left:-7px;top:3px;width:12px;height:12px;border-radius:50%;background:var(--surface);border:2px solid var(--accent)}
.timeline li.ret::before{border-color:var(--bad)}.timeline li.note::before{border-color:var(--info)}
.timeline li:last-child{border-left-color:transparent}
.timeline .w{font-size:12.5px;color:var(--mute)}

/* ---------- lịch khóa sổ ---------- */
.ms{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.ms .m{padding:16px;border-radius:var(--r);background:var(--surface);border:1px solid var(--line)}
.ms .m .d{font:800 22px/1.1 var(--font);margin:6px 0 2px}
.ms .who{display:block;padding:10px 0;border-top:1px solid var(--line);font-size:14px}
.ms .who>div:last-child{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:8px;text-align:left!important}
.ms .who>div:last-child>div{margin-top:0!important}
.ms .who:first-of-type{margin-top:10px}

/* ---------- đối chiếu ---------- */
.ck{border:1px solid var(--line);border-radius:12px;background:var(--surface);margin-bottom:8px;overflow:hidden}
.ck>summary{display:flex;align-items:center;gap:12px;padding:12px 16px;cursor:pointer;list-style:none;min-height:52px}
.ck>summary::-webkit-details-marker{display:none}
.ck>summary .lb{flex:1;min-width:0}
.ck>summary .lb b{display:block;font-weight:600}
.ck>summary .lb span{font-size:12.5px;color:var(--mute)}
.ck>summary .chev{transition:transform var(--t);color:var(--mute)}
.ck[open]>summary .chev{transform:rotate(90deg)}
.ck .in{border-top:1px solid var(--line);padding:12px 16px 16px}
.lockbar{display:flex;flex-wrap:wrap;gap:12px;align-items:center;padding:14px 18px;border-radius:var(--r);border:1px solid var(--line);background:var(--surface);margin-bottom:18px}
.lockbar .grow{flex:1;min-width:220px}

.drop{border:1.5px dashed var(--line2);border-radius:var(--r);padding:26px;text-align:center;color:var(--mute);cursor:pointer;transition:all var(--t)}
.drop:hover,.drop.over{border-color:var(--accent);color:var(--ink);background:var(--accentbg)}
.drop b{color:var(--ink)}
.chart{position:relative;height:320px}
.note{padding:12px 14px;border-radius:12px;background:var(--infobg);color:var(--ink2);font-size:13.5px;border:1px solid rgba(124,196,255,.2)}
.note.w{background:var(--warnbg);border-color:rgba(251,176,33,.25)}
.note.b{background:var(--badbg);border-color:rgba(255,107,107,.25)}
.list{margin:0;padding-left:18px}.list li{margin:3px 0}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:16px;overflow-x:auto}
.tabs button{border:0;background:none;padding:10px 14px;color:var(--mute);font-weight:600;cursor:pointer;border-bottom:2px solid transparent;white-space:nowrap;min-height:44px}
.tabs button.on{color:var(--ink);border-bottom-color:var(--accent)}
.pcard{cursor:pointer;transition:border-color var(--t),transform var(--t)}
.pcard:hover{border-color:var(--mute2)}
.pcard .kv{display:grid;grid-template-columns:1fr auto;gap:4px 12px;margin-top:12px;font-size:13.5px}
.pcard .kv span{color:var(--mute)}
.pcard .kv b{font-variant-numeric:tabular-nums;font-weight:600;text-align:right}

/* ---------- di động ---------- */
@media (max-width:1100px){.g3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:1023px){
  .shell{grid-template-columns:1fr}
  .side{position:fixed;inset:0 auto 0 0;width:min(300px,86vw);z-index:50;transform:translateX(-102%);transition:transform .22s ease;background:var(--bg2)}
  .shell.open .side{transform:none;box-shadow:20px 0 60px rgba(0,0,0,.5)}
  .scrim{position:fixed;inset:0;z-index:40;background:rgba(8,6,12,.6)}
  .top{display:flex;position:sticky;top:0;z-index:30;align-items:center;gap:10px;padding:10px 16px;background:rgba(17,14,23,.88);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
  .top img{height:24px}
  .top .sp{flex:1}
  main{padding:20px 16px 72px}
}
@media (max-width:760px){
  .g2,.g3,.form{grid-template-columns:1fr}
  .phead h1{font-size:28px}
  .kpis,.kpis.k6{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kpi .v{font-size:21px}
  .card{padding:14px}.card>.tw{margin:0 -14px -14px}
  th,td{padding:8px 10px}
  .dh,.db,.df{padding-left:16px;padding-right:16px}
  .hide-m{display:none}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}


/* =====================================================================
   AERO — kính mờ, ánh sáng cực quang tím – hồng – cam (Windows Aero / glassmorphism)
   ===================================================================== */
:root{--r:18px;--r2:14px;
  --glass:linear-gradient(160deg,rgba(255,255,255,.085),rgba(255,255,255,.025) 55%,rgba(255,255,255,.04));
  --glass-line:rgba(255,255,255,.11);--glass-hi:inset 0 1px 0 rgba(255,255,255,.14),inset 0 0 0 1px rgba(255,255,255,.02);
  --glass-sh:0 24px 60px -24px rgba(0,0,0,.75),0 2px 6px rgba(0,0,0,.25)}
body{background:#0d0a13}
body::before{background:
  radial-gradient(42vw 38vw at 8% -6%,rgba(176,52,140,.55),transparent 62%),
  radial-gradient(36vw 32vw at 96% 4%,rgba(98,64,200,.38),transparent 64%),
  radial-gradient(40vw 34vw at 78% 104%,rgba(242,112,58,.30),transparent 62%),
  radial-gradient(30vw 30vw at 22% 92%,rgba(40,150,170,.16),transparent 64%)}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.35;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:56px 56px;
  mask-image:radial-gradient(ellipse at 50% 0%,#000 10%,transparent 70%)}
.card,.kpi,.ck,.ms .m,.pipe .st,.lockbar,.me,.note{background:var(--glass);border:1px solid var(--glass-line);box-shadow:var(--glass-hi),var(--glass-sh);
  backdrop-filter:blur(20px) saturate(1.5);-webkit-backdrop-filter:blur(20px) saturate(1.5)}
.card,.kpi,.ck,.ms .m,.lockbar{border-radius:var(--r)}
.kpi{transition:transform var(--t),box-shadow var(--t)}
.kpi:hover{transform:translateY(-2px);box-shadow:var(--glass-hi),0 30px 70px -26px rgba(0,0,0,.85)}
.kpi::after{width:100%;height:3px;bottom:auto;border-radius:var(--r) var(--r) 0 0;opacity:.9}
.kpi.a::after{background:linear-gradient(90deg,var(--accent),var(--amber))}
.kpi.g::after{background:linear-gradient(90deg,#3fbf7f,#8ee6b5)}.kpi.r::after{background:linear-gradient(90deg,#ff5f6d,#ffb199)}.kpi.y::after{background:linear-gradient(90deg,#fbb021,#ffe08a)}
.kpi .v{background:linear-gradient(180deg,#fff,#e9dccb);-webkit-background-clip:text;background-clip:text;color:transparent}
.side{background:linear-gradient(180deg,rgba(30,22,40,.55),rgba(16,12,22,.55));backdrop-filter:blur(26px) saturate(1.6);-webkit-backdrop-filter:blur(26px) saturate(1.6);border-right:1px solid var(--glass-line);box-shadow:inset -1px 0 0 rgba(255,255,255,.04)}
.nav button{border-radius:12px}
.nav button.on{background:linear-gradient(135deg,rgba(242,112,58,.28),rgba(176,52,140,.22));box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 8px 20px -10px rgba(242,112,58,.6)}
.me{border-radius:16px}
.top{background:rgba(18,13,24,.6);backdrop-filter:blur(20px) saturate(1.5);-webkit-backdrop-filter:blur(20px) saturate(1.5)}
th{background:rgba(32,26,42,.78);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom-color:var(--glass-line)}
td{border-bottom-color:rgba(255,255,255,.06)}
tbody tr:hover{background:rgba(255,255,255,.04)}
#bg td.acn{background:#1b1524}#bg tr.sub td.acn{background:#22192a}
.btn{border-radius:12px;background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.04));border-color:rgba(255,255,255,.14);box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 6px 16px -10px rgba(0,0,0,.7)}
.btn:hover{background:linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,.07));border-color:rgba(255,255,255,.24)}
.btn.pri{background:linear-gradient(135deg,#ff8a4c,#f2703a 45%,#d9502a);border-color:rgba(255,190,150,.45);color:#200d04;box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 10px 26px -10px rgba(242,112,58,.85)}
.btn.pri:hover{filter:brightness(1.07);background:linear-gradient(135deg,#ff9a60,#f47b45 45%,#e05a30)}
.btn.ghost{background:transparent;border-color:transparent;box-shadow:none}
.btn.ghost:hover{background:rgba(255,255,255,.07)}
.btn.danger{background:rgba(255,107,107,.06);box-shadow:none}
.inp,select.inp,textarea.inp{background:rgba(8,6,12,.45);border-color:rgba(255,255,255,.13);border-radius:12px;box-shadow:inset 0 1px 2px rgba(0,0,0,.35)}
.inp.cell{background:transparent;box-shadow:none}
.chip{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.14);backdrop-filter:blur(8px)}
.chip.on{background:linear-gradient(180deg,#fff7ee,#eadccb);color:#1a1520;border-color:#fff}
.tag{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.08)}

.phead h1{text-shadow:0 2px 30px rgba(176,52,140,.35)}
dialog{background:linear-gradient(160deg,rgba(44,34,58,.88),rgba(22,17,30,.92));border:1px solid rgba(255,255,255,.14);border-radius:22px;
  backdrop-filter:blur(28px) saturate(1.6);-webkit-backdrop-filter:blur(28px) saturate(1.6);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 40px 100px rgba(0,0,0,.6)}
.tabs button.on{border-bottom-color:transparent;background:linear-gradient(180deg,transparent 60%,rgba(242,112,58,.18));box-shadow:inset 0 -2px 0 var(--accent);border-radius:10px 10px 0 0}
.pill{backdrop-filter:blur(6px)}
.boot{position:relative;z-index:1;min-height:100vh;display:grid;place-content:center;justify-items:center;gap:14px}.boot img{width:180px}

/* ---------- Đăng nhập: khung kính 2 nửa, tranh núi đêm, cú mèo & đèn pin ---------- */
:root{--sc-sky1:#160d22;--sc-sky2:#2a1638;--sc-orb:#f6e7d2;--sc-orb-glow:rgba(246,200,150,.38);--sc-m1:#3a2350;--sc-m2:#2a1a3c;--sc-m3:#1d1229;--sc-tree:#120b1a;--sc-mist:rgba(242,112,58,.07)}
.sc-m1{fill:var(--sc-m1)}.sc-m2{fill:var(--sc-m2)}.sc-m3{fill:var(--sc-m3)}.sc-tree{fill:var(--sc-tree)}
.sc-orb{fill:var(--sc-orb)}.sc-glow{fill:var(--sc-orb-glow);filter:blur(28px)}.sc-mist{fill:var(--sc-mist)}
.sc-star{fill:#fff}.sc-crater{fill:#c9b7a2;opacity:.35}
.sc-tw{animation:twinkle 3.2s ease-in-out infinite}.sc-tw:nth-child(3n){animation-delay:1.1s}.sc-tw:nth-child(4n){animation-delay:2s}
@keyframes twinkle{50%{opacity:.25}}
.login{position:relative;z-index:1;min-height:100vh;display:grid;place-items:center;padding:24px;overflow:hidden;background:linear-gradient(180deg,var(--sc-sky1),var(--sc-sky2))}
.login-bg{position:absolute;inset:0;opacity:.55;filter:blur(2px)}
.login-bg svg,.login-art-scene svg{width:100%;height:100%;display:block}
.login-shell{position:relative;z-index:1;width:min(980px,100%);display:grid;grid-template-columns:1fr 1.1fr;border-radius:30px;padding:14px;overflow:clip;
  background:linear-gradient(160deg,rgba(255,255,255,.1),rgba(255,255,255,.03));border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(22px) saturate(1.5);-webkit-backdrop-filter:blur(22px) saturate(1.5);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 40px 90px -30px rgba(0,0,0,.85)}
.login-art{position:relative;border-radius:22px;overflow:hidden;min-height:480px;border:1px solid rgba(255,255,255,.1);background:linear-gradient(180deg,var(--sc-sky1),var(--sc-sky2));display:flex;align-items:flex-end}
.login-art-scene{position:absolute;inset:0}
.login-art-text{position:relative;z-index:1;width:100%;text-align:center;padding:26px 26px 30px;background:linear-gradient(transparent,rgba(29,18,41,.9) 45%)}
.la-logo{width:150px;margin:0 auto 12px;display:block}
.login-art-text h2{margin:8px 0 8px;font-size:23px;letter-spacing:-.01em}
.login-art-text p{margin:0;color:var(--ink2);font-size:14px;line-height:1.6}
.login-form{position:relative;padding:112px 44px 30px;display:flex;flex-direction:column;gap:13px;justify-content:center}
.login-form h1{margin:0 0 4px;font-size:28px;text-align:center;letter-spacing:-.01em}
.login-form .sub{text-align:center;color:var(--mute);font-size:13.5px;margin:-2px 0 6px}
.login-input{width:100%;height:52px;border-radius:16px;border:1px solid rgba(255,255,255,.14);background:rgba(8,6,12,.45);padding:0 56px 0 18px;font-size:16px;color:var(--ink);outline:none;transition:.2s}
.login-input:focus{border-color:var(--accent);box-shadow:0 0 0 4px rgba(242,112,58,.22)}
.pw-wrap{position:relative}
.torch{position:absolute;right:10px;top:50%;transform:translateY(-50%);width:38px;height:38px;border:0;border-radius:12px;background:transparent;color:#e8c27a;cursor:pointer;display:grid;place-items:center;z-index:2}
.torch:hover{background:rgba(255,255,255,.07)}
.beam{position:absolute;right:30px;top:50%;width:460px;height:190px;transform-origin:right center;transform:translateY(-50%) rotate(27deg);pointer-events:none;z-index:1;
  background:linear-gradient(to left,rgba(240,205,135,.6),rgba(240,205,135,.16) 55%,rgba(240,205,135,0));clip-path:polygon(100% 46%,100% 54%,0 100%,0 0);filter:blur(3px)}
.login-btn{height:52px;border-radius:16px;font-size:15.5px;background:linear-gradient(135deg,#ff8a4c,#f2703a 45%,#c2402a);border:0;color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 14px 32px -12px rgba(242,112,58,.9)}
.login-btn:hover{filter:brightness(1.07);background:linear-gradient(135deg,#ff8a4c,#f2703a 45%,#c2402a)}
.login-foot{text-align:center;font-size:12.5px;color:var(--mute)}
.login-row{display:flex;justify-content:flex-end;margin:-4px 2px 0;font-size:13.5px}
.login-row.center{justify-content:center;margin:0}
.login-row a{color:var(--accent2);font-weight:600;text-decoration:none}.login-row a:hover{text-decoration:underline}
.login-note{display:flex;gap:10px;align-items:flex-start;font-size:12.8px;line-height:1.55;color:var(--ink2);padding:10px 12px;border-radius:14px;background:rgba(242,112,58,.09);border:1px solid rgba(242,112,58,.24)}
.login-note svg{flex:none;color:var(--accent);margin-top:2px}
.login-note code,.status-line code{font-size:12px;padding:1px 5px;border-radius:6px;background:rgba(255,255,255,.08)}
.status-line{display:flex;gap:8px;align-items:flex-start;font-size:13px;line-height:1.5}.status-line.err{color:#ff9b9b}.status-line svg{flex:none;margin-top:2px}
.pw-meter{display:flex;align-items:center;gap:10px;margin:-4px 4px 0;font-size:12px;color:var(--mute)}
.pw-meter i{flex:0 0 96px;height:5px;border-radius:9px;background:rgba(255,255,255,.12);overflow:hidden}
.pw-meter b{display:block;height:100%;width:0;border-radius:9px;background:var(--mute);transition:width .25s,background .25s}
.pw-meter[data-level=weak] b{background:var(--bad)}.pw-meter[data-level=weak] span{color:var(--bad)}
.pw-meter[data-level=mid] b{background:var(--amber)}
.pw-meter[data-level=strong] b{background:var(--ok)}.pw-meter[data-level=strong] span{color:var(--ok)}
.login-form[data-mode=setup],.login-form[data-mode=reset]{gap:11px;padding-top:104px}
.login-form[data-mode=setup] .login-input,.login-form[data-mode=reset] .login-input{height:48px}
.owl{position:absolute;top:18px;left:50%;margin-left:-37px;width:74px;height:80px;transition:opacity .35s,filter .35s;opacity:.28;filter:brightness(.45)}
.owl.in-light{opacity:1;filter:brightness(1.12) drop-shadow(0 0 16px rgba(240,205,135,.5))}
.owl.in-light svg{animation:owlHop .45s cubic-bezier(.3,1.6,.5,1)}
@keyframes owlHop{0%{transform:translateY(0) scale(1)}35%{transform:translateY(-7px) scale(1.06)}100%{transform:none}}
.owl svg{width:100%;height:100%;overflow:visible}
.owl .lid{transform-box:fill-box;transform-origin:center top;transform:scaleY(1);transition:transform .18s}
.owl.in-light .lid,.owl.awake .lid{transform:scaleY(0)}
.owl.shy .lid{transform:scaleY(1)}
.owl.in-light.shy .lid{transform:scaleY(0)}
.owl .pupil{transition:transform .25s;transform-box:fill-box;transform-origin:center}.owl.wide .pupil{transform:scale(1.35)}
.owl .body{fill:#6b5a7c}.owl .belly{fill:#9d8aa6}.owl .lid,.owl .ear{fill:#58496a}
@media(max-width:820px){.login-shell{grid-template-columns:1fr}.login-art{min-height:210px}.login-art-text h2,.login-art-text p{display:none}
  .login-form,.login-form[data-mode=setup],.login-form[data-mode=reset]{padding:100px 18px 22px}.beam{width:300px}}
@media (prefers-reduced-motion:reduce){.sc-tw{animation:none}}

/* =====================================================================
   BAN NGÀY (06:00–18:00 giờ VN): trời xanh, mặt trời, Aero sáng
   ===================================================================== */
:root[data-theme=light]{color-scheme:light;
  --bg:#f3f6fb;--bg2:#ffffff;--surface:#ffffff;--surface2:#f1f4f9;--surface3:#e6ebf3;--line:#dde3ec;--line2:#c9d2df;
  --ink:#1b2333;--ink2:#3a4558;--mute:#5d6a80;--mute2:#7b879b;
  --accent:#e2602a;--accent2:#c94f1c;--accentbg:rgba(242,112,58,.12);
  --ok:#17834a;--okbg:rgba(23,131,74,.1);--warn:#a86200;--warnbg:rgba(251,176,33,.18);--bad:#c62f2f;--badbg:rgba(220,60,60,.1);--info:#1f6fb8;--infobg:rgba(31,111,184,.1);
  --glass:linear-gradient(160deg,rgba(255,255,255,.82),rgba(255,255,255,.55));--glass-line:rgba(255,255,255,.9);
  --glass-hi:inset 0 1px 0 #fff,inset 0 0 0 1px rgba(255,255,255,.4);--glass-sh:0 22px 50px -26px rgba(40,70,120,.35),0 2px 6px rgba(40,70,120,.08);
  --sc-sky1:#8fd0ff;--sc-sky2:#e6f6ff;--sc-orb:#ffd34d;--sc-orb-glow:rgba(255,214,90,.75);--sc-m1:#9cc7e8;--sc-m2:#6fae6a;--sc-m3:#3f8a4c;--sc-tree:#2d6b3a;--sc-mist:rgba(255,255,255,.55)}
:root[data-theme=light] body{background:#eef4fb}
:root[data-theme=light] body::before{background:
  radial-gradient(42vw 38vw at 8% -6%,rgba(120,190,255,.55),transparent 62%),
  radial-gradient(36vw 32vw at 96% 4%,rgba(255,214,120,.5),transparent 64%),
  radial-gradient(40vw 34vw at 78% 104%,rgba(255,150,110,.30),transparent 62%),
  radial-gradient(30vw 30vw at 22% 92%,rgba(120,220,200,.28),transparent 64%)}
:root[data-theme=light] body::after{background-image:linear-gradient(rgba(30,60,110,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(30,60,110,.05) 1px,transparent 1px)}
:root[data-theme=light] .side{background:linear-gradient(180deg,rgba(255,255,255,.75),rgba(240,246,255,.6));border-right-color:rgba(255,255,255,.9);box-shadow:8px 0 30px -20px rgba(40,70,120,.3)}
:root[data-theme=light] .top{background:rgba(255,255,255,.75)}
:root[data-theme=light] .nav button.on{background:linear-gradient(135deg,rgba(242,112,58,.18),rgba(80,160,255,.14));box-shadow:inset 0 1px 0 #fff,0 8px 20px -12px rgba(242,112,58,.6)}
:root[data-theme=light] .kpi .v{background:linear-gradient(180deg,#1b2333,#3a4a66);-webkit-background-clip:text;background-clip:text}
:root[data-theme=light] th{background:rgba(236,242,250,.92);color:var(--mute)}
:root[data-theme=light] td{border-bottom-color:rgba(30,60,110,.08)}
:root[data-theme=light] tbody tr:hover{background:rgba(80,140,220,.06)}
:root[data-theme=light] #bg td.acn{background:#fff}:root[data-theme=light] #bg tr.sub td.acn{background:#fbf3ee}
:root[data-theme=light] tr.sub td{background:rgba(242,112,58,.05)}
:root[data-theme=light] .btn{background:linear-gradient(180deg,#fff,#eef3f9);border-color:#cfd8e5;color:var(--ink);box-shadow:inset 0 1px 0 #fff,0 4px 12px -8px rgba(40,70,120,.4)}
:root[data-theme=light] .btn:hover{background:linear-gradient(180deg,#fff,#e4ecf6)}
:root[data-theme=light] .btn.pri{color:#fff;text-shadow:0 1px 0 rgba(0,0,0,.15)}
:root[data-theme=light] .btn.ghost{background:transparent;border-color:transparent;box-shadow:none}
:root[data-theme=light] .inp,:root[data-theme=light] select.inp,:root[data-theme=light] textarea.inp{background:rgba(255,255,255,.85);border-color:#cdd6e3;box-shadow:inset 0 1px 2px rgba(30,60,110,.08)}
:root[data-theme=light] .inp.cell{background:transparent;box-shadow:none}
:root[data-theme=light] .chip{background:rgba(255,255,255,.7);border-color:#cfd8e5}
:root[data-theme=light] .chip.on{background:linear-gradient(180deg,#2a3448,#1b2333);color:#fff;border-color:#1b2333}
:root[data-theme=light] .tag{background:rgba(30,60,110,.07);border-color:rgba(30,60,110,.08);color:var(--ink2)}
:root[data-theme=light] .phead h1{text-shadow:none}
:root[data-theme=light] .hl{background:linear-gradient(100deg,#f08a2c,#e2602a 45%,#c43d7a);-webkit-background-clip:text;background-clip:text}
:root[data-theme=light] dialog{background:linear-gradient(160deg,rgba(255,255,255,.95),rgba(243,247,252,.95));border-color:#fff;box-shadow:0 40px 100px rgba(30,50,90,.35)}
:root[data-theme=light] dialog::backdrop{background:rgba(30,45,75,.35)}
:root[data-theme=light] .toast{background:#1b2333;color:#fff}
:root[data-theme=light] .nav .cnt{color:#fff}
:root[data-theme=light] .chip.on b{color:#fff}
/* trang đăng nhập ban ngày */
:root[data-theme=light] .sc-star,:root[data-theme=light] .sc-crater{display:none}
:root[data-theme=light] .login-shell{background:linear-gradient(160deg,rgba(255,255,255,.6),rgba(255,255,255,.3));border-color:rgba(255,255,255,.85);box-shadow:inset 0 1px 0 #fff,0 40px 90px -30px rgba(30,70,120,.45)}
:root[data-theme=light] .login-art-text{background:linear-gradient(transparent,rgba(255,255,255,.88) 45%)}
:root[data-theme=light] .login-input{background:rgba(255,255,255,.8);border-color:#cdd6e3;color:var(--ink)}
:root[data-theme=light] .beam{background:linear-gradient(to left,rgba(255,200,80,.55),rgba(255,200,80,.14) 55%,rgba(255,200,80,0))}
:root[data-theme=light] .owl{opacity:.9;filter:none}
:root[data-theme=light] .owl .body{fill:#8a6a4a}:root[data-theme=light] .owl .belly{fill:#d9bf98}:root[data-theme=light] .owl .lid,:root[data-theme=light] .owl .ear{fill:#6f5238}
:root[data-theme=light] .login-note{color:var(--ink2)}
:root[data-theme=light] .status-line.err{color:#b42323}
:root[data-theme=light] .la-logo,:root[data-theme=light] .brand img,:root[data-theme=light] .top img{content:url(logo-light.png)}
.theme-btn{position:fixed;right:16px;bottom:16px;z-index:60}
.login-foot a{color:var(--mute);text-decoration:none;border-bottom:1px dashed currentColor}
:root[data-theme=light] .login-art-text p{color:var(--ink2)}
:root[data-theme=light] .btn.pri,:root[data-theme=light] .login-btn{background:linear-gradient(135deg,#ff8a4c,#f2703a 45%,#d9502a);border-color:rgba(255,160,110,.6);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 10px 24px -10px rgba(242,112,58,.8)}
:root[data-theme=light] .btn.pri:hover,:root[data-theme=light] .login-btn:hover{filter:brightness(1.06);background:linear-gradient(135deg,#ff8a4c,#f2703a 45%,#d9502a)}

/* ---------- cảnh đăng nhập: bộ màu đêm / ngày ---------- */
.s-sky0{stop-color:#0f0a1a}.s-sky1{stop-color:#21122f}.s-sky2{stop-color:#3a1e4a}
.s-m1a{stop-color:#4a2c66}.s-m1b{stop-color:#2e1d42}.s-m2a{stop-color:#2f1d44}.s-m2b{stop-color:#1f1430}.s-m3a{stop-color:#1d1229}.s-m3b{stop-color:#140c1d}
.login svg .day{display:none}
:root[data-theme=light] .login svg .day{display:inline}:root[data-theme=light] .login svg .night{display:none}
:root[data-theme=light] .s-sky0{stop-color:#4fa3e8}:root[data-theme=light] .s-sky1{stop-color:#a9d8f5}:root[data-theme=light] .s-sky2{stop-color:#ffe2bf}
:root[data-theme=light] .s-m1a{stop-color:#a5b6dc}:root[data-theme=light] .s-m1b{stop-color:#c9cfe6}
:root[data-theme=light] .s-m2a{stop-color:#5f9f8a}:root[data-theme=light] .s-m2b{stop-color:#8cbf9a}
:root[data-theme=light] .s-m3a{stop-color:#2f7a52}:root[data-theme=light] .s-m3b{stop-color:#3f8f5c}
:root[data-theme=light] .sc-tree{fill:#1f5a3a}
:root[data-theme=light] .sc-mist{fill:rgba(255,248,236,.55)}
.snow{fill:rgba(255,255,255,.85)}
.rays path{fill:rgba(255,236,170,.13)}
.rays-spin{animation:spin 90s linear infinite;transform-origin:0 0}
@keyframes spin{to{transform:rotate(360deg)}}
.sun{filter:drop-shadow(0 0 30px rgba(255,210,100,.9))}
.flare{fill:rgba(255,240,200,.22)}.flare.f2{fill:rgba(255,190,150,.14)}
.cloud ellipse{fill:#fff}.cloud{opacity:.92;filter:drop-shadow(0 8px 10px rgba(80,120,170,.18))}
.cloud.c1{animation:drift 70s linear infinite}.cloud.c2{animation:drift 95s linear infinite;opacity:.8}.cloud.c3{animation:drift 80s linear infinite reverse}.cloud.c4{animation:drift 110s linear infinite;opacity:.75}
@keyframes drift{0%{translate:0 0}50%{translate:60px 0}100%{translate:0 0}}
.bird{fill:none;stroke:#3a4a63;stroke-width:2.2;stroke-linecap:round;animation:flap 1.2s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes flap{50%{scale:1 .55}}
.login-bg,.login-art{background:none}
:root[data-theme=light] .login{background:linear-gradient(180deg,#4fa3e8,#ffe2bf)}
:root[data-theme=light] .login-bg{opacity:.7;filter:blur(3px) saturate(1.1)}
:root[data-theme=light] .login-shell{background:linear-gradient(160deg,rgba(255,255,255,.55),rgba(255,255,255,.22));border-color:rgba(255,255,255,.9);box-shadow:inset 0 1px 0 #fff,0 50px 100px -30px rgba(40,80,140,.5)}
:root[data-theme=light] .login-art-text{background:linear-gradient(transparent,rgba(255,250,242,.92) 42%)}
:root[data-theme=light] .login-form{background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,.35));border-radius:22px;margin-left:12px;box-shadow:inset 0 1px 0 #fff}
:root[data-theme=light] .login-form h1{color:#1b2333}
@media(max-width:820px){:root[data-theme=light] .login-form{margin:12px 0 0}}
@media (prefers-reduced-motion:reduce){.rays-spin,.cloud,.bird{animation:none}}
:root[data-theme=light] .login-art-text{background:linear-gradient(transparent,rgba(255,250,242,.55) 30%,rgba(255,250,242,.94) 62%)}
/* trang trong ban ngày: nền trời buổi sáng thay cho nền trắng phẳng */
:root[data-theme=light] body{background:linear-gradient(180deg,#cfe7fb 0%,#e9f3fb 38%,#fff3e6 100%) fixed}
:root[data-theme=light] body::before{background:
  radial-gradient(38vw 30vw at 92% -8%,rgba(255,214,110,.75),transparent 62%),
  radial-gradient(46vw 36vw at 0% 0%,rgba(90,170,245,.45),transparent 64%),
  radial-gradient(44vw 34vw at 80% 110%,rgba(255,150,110,.32),transparent 62%),
  radial-gradient(36vw 30vw at 15% 100%,rgba(110,205,170,.30),transparent 64%)}
:root[data-theme=light] .card,:root[data-theme=light] .kpi,:root[data-theme=light] .ck,:root[data-theme=light] .ms .m,:root[data-theme=light] .lockbar,:root[data-theme=light] .pipe .st{background:linear-gradient(160deg,rgba(255,255,255,.88),rgba(255,255,255,.62));border-color:rgba(255,255,255,.95)}

/* ===== Cảnh đồng cỏ – núi tuyết (thay cảnh cũ) ===== */
.s-sky0{stop-color:#241a6b}.s-sky1{stop-color:#3a2fa0}.s-sky2{stop-color:#5b3faa}
.s-h1a{stop-color:#2a3a52}.s-h1b{stop-color:#1c2a3c}.s-h2a{stop-color:#2f4a3c}.s-h2b{stop-color:#1b2e26}.s-h3a{stop-color:#2c4a2a}.s-h3b{stop-color:#142414}
.login svg .swirl path{fill:none;stroke:rgba(190,200,255,.16);stroke-width:1.6;stroke-linecap:round}
.login svg .spark{fill:#fff;filter:drop-shadow(0 0 3px rgba(255,255,255,.9))}
.login svg .spark.tw{animation:twinkle 2.6s ease-in-out infinite}
.login svg .dot{fill:#fff;opacity:.75}
.login svg .glows{opacity:.18}
.login svg .moon{fill:#f2ecff;filter:drop-shadow(0 0 14px rgba(230,220,255,.9))}
.login svg .moon-glow{fill:rgba(200,190,255,.16);filter:blur(18px)}
.login svg .mtn{fill:#6a5ab0}.login svg .snow{fill:#e9e6ff}.login svg .ridge{fill:#3c3383}
.login svg .haze{fill:rgba(170,150,255,.18);filter:blur(6px)}
.login svg .path{fill:none;stroke:rgba(190,205,255,.35);stroke-width:5;stroke-linecap:round}
.login svg .night{display:inline}
:root[data-theme=light] .login svg .night{display:none}
:root[data-theme=light] .s-sky0{stop-color:#5b6fd0}:root[data-theme=light] .s-sky1{stop-color:#9fb0ee}:root[data-theme=light] .s-sky2{stop-color:#eef1ff}
:root[data-theme=light] .login svg .swirl path{stroke:rgba(255,255,255,.28)}
:root[data-theme=light] .login svg .glows{opacity:.7}
:root[data-theme=light] .login svg .dot{opacity:.6}
:root[data-theme=light] .login svg .mtn{fill:#e8f0ff}:root[data-theme=light] .login svg .snow{fill:#fff}
:root[data-theme=light] .login svg .ridge{fill:#9fc06a}
:root[data-theme=light] .login svg .haze{fill:rgba(255,255,255,.7)}
:root[data-theme=light] .s-h1a{stop-color:#a7cc4a}:root[data-theme=light] .s-h1b{stop-color:#7fb03a}
:root[data-theme=light] .s-h2a{stop-color:#c4dc4e}:root[data-theme=light] .s-h2b{stop-color:#8fbf2e}
:root[data-theme=light] .s-h3a{stop-color:#b6d93e}:root[data-theme=light] .s-h3b{stop-color:#6fa024}
:root[data-theme=light] .login svg .path{stroke:rgba(255,255,255,.0)}
:root[data-theme=light] .login{background:linear-gradient(180deg,#5b6fd0,#eef1ff)}
.login{background:linear-gradient(180deg,#241a6b,#5b3faa)}
:root[data-theme=light] .login-art-text{background:linear-gradient(transparent,rgba(255,255,255,.5) 30%,rgba(250,252,255,.94) 62%)}
.login-art-text{background:linear-gradient(transparent,rgba(30,22,80,.6) 30%,rgba(24,18,60,.94) 62%)}
.login-shell{background:linear-gradient(160deg,rgba(255,255,255,.12),rgba(255,255,255,.04))}
/* chữ giới thiệu lên trên, để lộ núi tuyết và đồng cỏ phía dưới */
.login-art{align-items:flex-start}
.login-art-text{padding:30px 26px 60px;background:linear-gradient(180deg,rgba(24,18,70,.78),rgba(24,18,70,.35) 65%,transparent)}
:root[data-theme=light] .login-art-text{background:linear-gradient(180deg,rgba(255,255,255,.82),rgba(255,255,255,.4) 65%,transparent)}
.login svg .swirl path{stroke-width:1.1;stroke:rgba(200,210,255,.12)}
:root[data-theme=light] .login svg .swirl path{stroke:rgba(255,255,255,.22)}

/* ===== 4 khung giờ trên trang đăng nhập (theo vòng 24 giờ) ===== */
.login svg .clouds ellipse{fill:#fff}.login svg .clouds{opacity:0;filter:drop-shadow(0 10px 12px rgba(60,40,90,.18))}
:root[data-sky=dawn] .login svg .clouds,:root[data-sky=day] .login svg .clouds,:root[data-sky=dusk] .login svg .clouds{opacity:.92}
:root[data-sky=dawn] .login svg .clouds ellipse{fill:#fff6e6}:root[data-sky=dusk] .login svg .clouds ellipse{fill:#c98aa4}
:root[data-sky=dusk] .login svg .clouds{filter:drop-shadow(0 -3px 0 rgba(255,214,160,.85))}
:root[data-sky=day] .login svg .stars,:root[data-sky=dusk] .login svg .stars{opacity:.25}
:root[data-sky=dawn] .login svg .stars{opacity:.15}
/* bình minh: xanh ngọc nhạt → vàng kem → cam đào */
:root[data-sky=dawn] .s-sky0{stop-color:#bfe3dc}:root[data-sky=dawn] .s-sky1{stop-color:#f6ecc0}:root[data-sky=dawn] .s-sky2{stop-color:#f7c08e}
:root[data-sky=dawn] .login{background:linear-gradient(180deg,#bfe3dc,#f7c08e)}
:root[data-sky=dawn] .login svg .mtn{fill:#e9d8e8}:root[data-sky=dawn] .login svg .ridge{fill:#b9c98a}:root[data-sky=dawn] .login svg .haze{fill:rgba(255,226,180,.6)}
/* ban ngày: xanh trời trong */
:root[data-sky=day] .s-sky0{stop-color:#4fa6dc}:root[data-sky=day] .s-sky1{stop-color:#8fcbee}:root[data-sky=day] .s-sky2{stop-color:#d9f0fb}
:root[data-sky=day] .login{background:linear-gradient(180deg,#4fa6dc,#d9f0fb)}
:root[data-sky=day] .login svg .swirl path{stroke:rgba(255,255,255,.18)}
/* hoàng hôn: tím oải hương → hồng → cam vàng */
:root[data-sky=dusk] .s-sky0{stop-color:#8a8fc9}:root[data-sky=dusk] .s-sky1{stop-color:#d7a0b8}:root[data-sky=dusk] .s-sky2{stop-color:#f5c48c}
:root[data-sky=dusk] .login{background:linear-gradient(180deg,#8a8fc9,#f5c48c)}
:root[data-sky=dusk] .login svg .mtn{fill:#8a6a8e}:root[data-sky=dusk] .login svg .snow{fill:#ffe3cf}:root[data-sky=dusk] .login svg .ridge{fill:#5a4a6e}
:root[data-sky=dusk] .s-h1a{stop-color:#7a8a4a}:root[data-sky=dusk] .s-h1b{stop-color:#5a6e38}:root[data-sky=dusk] .s-h2a{stop-color:#8a9a46}:root[data-sky=dusk] .s-h2b{stop-color:#5f7a2e}:root[data-sky=dusk] .s-h3a{stop-color:#6f8a34}:root[data-sky=dusk] .s-h3b{stop-color:#43601e}
:root[data-sky=dusk] .login svg .haze{fill:rgba(255,190,160,.45)}
/* ban đêm giữ bản tím xanh + trăng khuyết (mặc định) */
/* nền trang trong theo khung giờ */
:root[data-sky=dawn] body{background:linear-gradient(180deg,#d8efe9 0%,#fbf3d8 45%,#fde2c8 100%) fixed}
:root[data-sky=dusk] body{background:linear-gradient(180deg,#dcdcf3 0%,#f6dbe5 50%,#fde3c6 100%) fixed}
:root[data-sky=dusk] body::before{background:radial-gradient(40vw 30vw at 90% -6%,rgba(240,150,180,.55),transparent 62%),radial-gradient(46vw 36vw at 0% 0%,rgba(140,140,220,.45),transparent 64%),radial-gradient(44vw 34vw at 80% 110%,rgba(255,170,100,.4),transparent 62%)}
:root[data-sky=dawn] body::before{background:radial-gradient(40vw 30vw at 90% -6%,rgba(255,225,140,.7),transparent 62%),radial-gradient(46vw 36vw at 0% 0%,rgba(140,215,200,.5),transparent 64%),radial-gradient(44vw 34vw at 80% 110%,rgba(255,170,120,.4),transparent 62%)}
/* ban đêm toàn app: tím chàm như cảnh trăng khuyết */
:root[data-sky=night] body{background:linear-gradient(180deg,#140f3a 0%,#1d1650 50%,#2a1d63 100%) fixed}
:root[data-sky=night] body::before{background:radial-gradient(40vw 30vw at 90% -6%,rgba(160,140,255,.32),transparent 62%),radial-gradient(46vw 36vw at 0% 0%,rgba(90,70,200,.4),transparent 64%),radial-gradient(44vw 34vw at 80% 110%,rgba(242,112,58,.18),transparent 62%)}
:root[data-sky=night] .side{background:linear-gradient(180deg,rgba(30,24,80,.6),rgba(18,14,50,.6))}
:root[data-sky=night] th{background:rgba(36,30,90,.85)}
:root[data-sky=night] #bg td.acn{background:#1e1854}
:root[data-sky=night] .login-input{background:rgba(18,12,48,.62)}
/* ban ngày toàn app: trời xanh trong */
:root[data-sky=day] body{background:linear-gradient(180deg,#bfe2f6 0%,#e4f3fb 45%,#f6fbfe 100%) fixed}
:root[data-sky=day] body::before{background:radial-gradient(38vw 30vw at 92% -8%,rgba(255,236,150,.6),transparent 62%),radial-gradient(46vw 36vw at 0% 0%,rgba(80,166,220,.45),transparent 64%),radial-gradient(36vw 30vw at 15% 100%,rgba(150,205,90,.25),transparent 64%)}
/* cú mèo & luồng đèn pin chỉ có ban đêm; ban ngày nút đèn pin chỉ để hiện/ẩn mật khẩu */
:root:not([data-sky=night]) .beam{display:none}
:root:not([data-sky=night]) .owl{opacity:1;filter:drop-shadow(0 6px 10px rgba(60,40,20,.25))}
:root:not([data-sky=night]) .owl .lid{transform:scaleY(0)}
:root:not([data-sky=night]) .owl.shy .lid{transform:scaleY(1)}
.login-foot{display:none!important}

/* ===== Cảnh 4 mùa (cây cô độc trên đồi) — thay cảnh cũ ===== */
.login svg .stars,.login svg .rainbow,.login svg .poppies,.login svg .leaves,.login svg .flowers,.login svg .petals,.login svg .snowfall,.login svg .crown,.login svg .streaks{display:none}
.login svg .clouds ellipse{fill:#fff}.login svg .clouds{opacity:.95;filter:drop-shadow(0 12px 16px rgba(60,80,120,.25))}
.login svg .trunk{fill:none;stroke:#4a3527;stroke-width:9;stroke-linecap:round}
.login svg .tint{fill:transparent;pointer-events:none}
/* xuân */
:root[data-season=spring] .login svg .spring,:root[data-season=spring] .login svg .flowers,:root[data-season=spring] .login svg .petals{display:inline}
:root[data-season=spring] .k0{stop-color:#5b7fc8}:root[data-season=spring] .k1{stop-color:#c9d6f0}:root[data-season=spring] .k2{stop-color:#eef2fb}
:root[data-season=spring] .g0{stop-color:#7fbf3a}:root[data-season=spring] .g1{stop-color:#4f9a2a}
.login svg .b1{fill:#f5b8cf}.login svg .b2{fill:#fde3ec}.login svg .fl{fill:#fff7c2}.login svg .petal{fill:#f8c6d8;animation:fall 9s linear infinite}
/* hè */
:root[data-season=summer] .login svg .summer,:root[data-season=summer] .login svg .rainbow,:root[data-season=summer] .login svg .poppies{display:inline}
:root[data-season=summer] .login svg .clouds{opacity:.55}
:root[data-season=summer] .k0{stop-color:#9aa8c8}:root[data-season=summer] .k1{stop-color:#d9c6d4}:root[data-season=summer] .k2{stop-color:#f2e6e8}
:root[data-season=summer] .g0{stop-color:#6c9a3a}:root[data-season=summer] .g1{stop-color:#3f6e24}
.login svg .s1{fill:#2f5a2a}.login svg .s2{fill:#3f7434}.login svg .poppy{fill:#e2312b;filter:drop-shadow(0 1px 0 rgba(0,0,0,.25))}
/* thu */
:root[data-season=autumn] .login svg .leaves,:root[data-season=autumn] .login svg .streaks{display:inline}
:root[data-season=autumn] .login svg .clouds{display:none}
:root[data-season=autumn] .k0{stop-color:#2f7fd8}:root[data-season=autumn] .k1{stop-color:#7fb8ee}:root[data-season=autumn] .k2{stop-color:#cfe6fa}
:root[data-season=autumn] .g0{stop-color:#c9682a}:root[data-season=autumn] .g1{stop-color:#8e3e18}
.login svg .leaf{fill:#e08a3a}.login svg .leaf:nth-child(3n){fill:#c4501e}.login svg .leaf:nth-child(4n){fill:#f2b44a}
.login svg .streaks path{fill:none;stroke:rgba(255,255,255,.35);stroke-width:26;filter:blur(10px)}
:root[data-season=autumn] .login svg .trunk{stroke:#3c3550;stroke-width:7}
/* đông */
:root[data-season=winter] .login svg .winter,:root[data-season=winter] .login svg .snowfall{display:inline}
:root[data-season=winter] .login svg .clouds{display:none}
:root[data-season=winter] .k0{stop-color:#8fb6cf}:root[data-season=winter] .k1{stop-color:#b8d3e2}:root[data-season=winter] .k2{stop-color:#e4eff5}
:root[data-season=winter] .g0{stop-color:#f4f8fb}:root[data-season=winter] .g1{stop-color:#d8e4ec}
.login svg .w1{fill:#f4f6f8}.login svg .w2{fill:#dfe6ec}.login svg .flake{fill:#fff;animation:snowf 9s linear infinite}
:root[data-season=winter] .login svg .trunk{stroke:#5a4a40}
@keyframes fall{from{transform:translate(0,-200px) rotate(0)}to{transform:translate(-160px,320px) rotate(360deg)}}
@keyframes snowf{from{transform:translate(0,-520px)}to{transform:translate(-60px,40px)}}
/* lớp màu theo giờ */
:root[data-sky=dawn] .login svg .tint{fill:rgba(255,190,120,.22)}
:root[data-sky=dusk] .login svg .tint{fill:rgba(200,90,140,.28)}
:root[data-sky=night] .login svg .tint{fill:rgba(14,14,50,.72)}
:root[data-sky=night] .login svg .stars{display:inline}.login svg .star{fill:#fff}
:root[data-sky=night] .login svg .rainbow{display:none}
.login{background:#7fa3c8}.login-bg{opacity:.75;filter:blur(3px)}
.login-art-text{background:linear-gradient(180deg,rgba(255,255,255,.85),rgba(255,255,255,.45) 62%,transparent)!important}
:root[data-sky=night] .login-art-text{background:linear-gradient(180deg,rgba(18,16,48,.85),rgba(18,16,48,.4) 62%,transparent)!important}
@media (prefers-reduced-motion:reduce){.login svg .petal,.login svg .flake{animation:none}}
/* ===== Ảnh chụp 4 mùa (đặt file vào public/mua/): xuan.jpg, ha.jpg, thu.jpg, dong.jpg — có ảnh thì thay hình vẽ ===== */
:root[data-season=spring]{--mua:url(mua/xuan.jpg)}:root[data-season=summer]{--mua:url(mua/ha.jpg)}
:root[data-season=autumn]{--mua:url(mua/thu.jpg)}:root[data-season=winter]{--mua:url(mua/dong.jpg)}
.login-art,.login{background-image:var(--mua)!important;background-size:cover!important;background-position:center bottom!important}
.login-art.has-photo .login-art-scene,.login.has-photo>.login-bg svg{display:none}
.login.has-photo>.login-bg{background:var(--mua) center/cover;opacity:1;filter:blur(14px) brightness(.9);transform:scale(1.08)}
:root[data-sky=night] .login.has-photo>.login-bg,:root[data-sky=night] .login-art.has-photo{filter:brightness(.45) saturate(.8)}
:root[data-sky=night] .login-art.has-photo{filter:none;box-shadow:inset 0 0 0 999px rgba(14,14,50,.55)}
:root[data-sky=dusk] .login-art.has-photo{box-shadow:inset 0 0 0 999px rgba(200,90,140,.22)}
.torch svg{transition:transform .08s linear;transform-origin:50% 50%}
.login-art-text h2,.login-art-text p{display:none!important}
.la-logo{width:180px!important;image-rendering:auto}