/* RT Studio · giao diện (sáng / tối) */
/* ================= GIAO DIỆN SÁNG ================= */
:root{
  --bg:#f5efe8; --surface:#fffdfa; --surface-2:#faf5ef; --surface-3:#f1e8de;
  --line:#ebe0d4; --line-2:#ddcdbd; --ink:#23151a; --ink-2:#4b3a37; --muted:#86726c;
  --brand:#8c0e1b; --brand-2:#b51d2e; --brand-ink:#8c0e1b; --brand-soft:#fbe8e9; --on-brand:#fff7f2;
  --gold:#c9a063; --gold-2:#9c7337; --gold-soft:#f6ead5;
  --ok:#15804a; --ok-soft:#e2f3e9; --warn:#a66300; --warn-soft:#fff0d9; --bad:#c0302f; --bad-soft:#fdeaea; --info:#2461c8; --info-soft:#e6eefc; --vio:#6a3db6; --vio-soft:#eee6fb;
  --sh:0 1px 2px rgba(60,20,20,.05), 0 10px 28px -18px rgba(70,12,18,.38);
  --sh-lg:0 40px 80px -36px rgba(70,12,18,.5);
  --glass:rgba(255,252,248,.8); --grid:rgba(120,40,40,.055); --glow1:rgba(200,40,60,.12); --glow2:rgba(201,160,99,.18);
  --ui:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif; --serif:"Cormorant Garamond",Georgia,serif;
  --sat:env(safe-area-inset-top,0px); --sab:env(safe-area-inset-bottom,0px);
  --r:20px; color-scheme:light;
}
/* ================= GIAO DIỆN TỐI ================= */
[data-theme=dark]{
  --bg:#0e0608; --surface:#180b0e; --surface-2:#1f0f13; --surface-3:#29151a;
  --line:rgba(255,228,218,.08); --line-2:rgba(255,228,218,.15); --ink:#f6ece6; --ink-2:#dbc8c0; --muted:#a48f88;
  --brand:#c9283b; --brand-2:#e3485a; --brand-ink:#ff8b98; --brand-soft:rgba(214,52,72,.16); --on-brand:#fff;
  --gold:#e0b56a; --gold-2:#e8c787; --gold-soft:rgba(224,181,106,.13);
  --ok:#40cf85; --ok-soft:rgba(64,207,133,.13); --warn:#f2a93b; --warn-soft:rgba(242,169,59,.13); --bad:#ff6b6b; --bad-soft:rgba(255,107,107,.13); --info:#6aa2ff; --info-soft:rgba(106,162,255,.13); --vio:#b694ff; --vio-soft:rgba(182,148,255,.14);
  --sh:inset 0 1px 0 rgba(255,255,255,.035), 0 12px 32px -20px rgba(0,0,0,.9);
  --sh-lg:0 40px 90px -30px rgba(0,0,0,.85);
  --glass:rgba(24,11,14,.74); --grid:rgba(255,220,210,.035); --glow1:rgba(214,52,72,.2); --glow2:rgba(224,181,106,.1);
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{background:var(--bg); -webkit-text-size-adjust:100%; text-size-adjust:100%}
body{margin:0; min-height:100vh; background:var(--bg); color:var(--ink); font:500 14.5px/1.55 var(--ui); -webkit-font-smoothing:antialiased; -webkit-tap-highlight-color:transparent; overflow-x:hidden}
/* nền: lưới mờ + vầng sáng (giống trosuite) */
body::before{content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background-image:linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px); background-size:34px 34px;
  -webkit-mask-image:radial-gradient(120% 90% at 50% 0%, #000 40%, transparent 85%); mask-image:radial-gradient(120% 90% at 50% 0%, #000 40%, transparent 85%)}
body::after{content:""; position:fixed; inset:-20%; z-index:-1; pointer-events:none;
  background:radial-gradient(40% 35% at 15% 10%, var(--glow1), transparent 70%), radial-gradient(35% 30% at 90% 20%, var(--glow2), transparent 70%);
  animation:aura 14s ease-in-out infinite alternate}
@keyframes aura{to{transform:translate3d(2%,3%,0) scale(1.06)}}
button,input,select,textarea{font:inherit; color:inherit}
button{cursor:pointer; background:none; border:0; padding:0}
a{color:inherit}
img{display:block; max-width:100%}
h1,h2,h3,h4,p{margin:0}
.ic{width:20px; height:20px; flex:none; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--gold); outline-offset:2px}

/* ================= NÚT, Ô NHẬP ================= */
.btn{position:relative; overflow:hidden; display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; padding:0 18px; border-radius:13px; font:700 14px/1 var(--ui); white-space:nowrap; text-decoration:none; transition:transform .15s, box-shadow .25s, background .25s, opacity .2s}
.btn:active{transform:scale(.97)}
.btn[disabled]{opacity:.55; pointer-events:none}
.btn .ic{width:18px; height:18px}
.btn-p{color:var(--on-brand); background:linear-gradient(180deg,var(--brand-2),var(--brand)); box-shadow:inset 0 1px 0 rgba(255,255,255,.25), inset 0 -1px 0 rgba(0,0,0,.12), 0 10px 22px -12px var(--brand)}
.btn-p:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 14px 28px -12px var(--brand)}
.btn-p::after,.btn-g::after,.btn-ok::after{content:""; position:absolute; top:0; bottom:0; left:-60%; width:45%; background:linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent); transform:skewX(-18deg); transition:left .7s ease}
.btn-p:hover::after,.btn-g:hover::after,.btn-ok:hover::after{left:120%}
.btn-g{color:#3a0407; background:linear-gradient(180deg,#f3dcaa,#c9a063); box-shadow:inset 0 1px 0 rgba(255,255,255,.5), 0 10px 22px -12px rgba(201,160,99,.9)}
.btn-o{background:var(--surface); color:var(--ink); box-shadow:inset 0 0 0 1px var(--line-2), var(--sh)}
.btn-o:hover{box-shadow:inset 0 0 0 1px var(--gold), var(--sh)}
.btn-ghost{color:var(--ink-2)} .btn-ghost:hover{background:var(--surface-3)}
.btn-ok{color:#fff; background:linear-gradient(180deg,#22a35f,#15804a); box-shadow:inset 0 1px 0 rgba(255,255,255,.22), 0 10px 22px -12px #15804a}
.btn-bad{background:var(--bad-soft); color:var(--bad)}
.btn-sm{min-height:36px; padding:0 13px; font-size:13px; border-radius:11px}
.btn-block{width:100%}
.f{display:flex; flex-direction:column; gap:7px; margin-bottom:14px}
.f>label,.lbl{font:700 12.5px/1.3 var(--ui); color:var(--ink-2)}
.hint{font:500 12px/1.45 var(--ui); color:var(--muted)}
.hint b{color:var(--brand-ink)}
.inp{width:100%; min-height:46px; padding:11px 14px; border-radius:13px; border:1px solid var(--line-2); background:var(--surface); color:var(--ink); font:500 15.5px/1.35 var(--ui); transition:border-color .2s, box-shadow .2s}
textarea.inp{min-height:84px; resize:vertical}
.inp::placeholder{color:var(--muted); opacity:.8}
.inp:focus{outline:none; border-color:var(--brand-2); box-shadow:0 0 0 4px var(--brand-soft)}
.pw{position:relative}
.pw .inp{padding-right:50px}
.pw button{position:absolute; right:5px; top:50%; transform:translateY(-50%); width:40px; height:40px; border-radius:11px; display:grid; place-items:center; color:var(--muted)}
.pw button:hover{background:var(--surface-3); color:var(--ink)}
.err{min-height:18px; margin:2px 0 10px; color:var(--bad); font:600 13px/1.4 var(--ui)}
.row2{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.money{position:relative}
.money .inp{padding-right:30px; text-align:right; font-variant-numeric:tabular-nums}
.money::after{content:"đ"; position:absolute; right:13px; top:50%; transform:translateY(-50%); color:var(--muted); font-weight:600}
.sw{position:relative; width:48px; height:28px; flex:none; border-radius:999px; background:var(--line-2); transition:background .25s}
.sw::after{content:""; position:absolute; top:3px; left:3px; width:22px; height:22px; border-radius:50%; background:#fff; box-shadow:0 2px 6px rgba(0,0,0,.3); transition:transform .3s cubic-bezier(.3,1.4,.5,1)}
.sw.on{background:var(--ok)} .sw.on::after{transform:translateX(20px)}
.chips{display:flex; flex-wrap:wrap; gap:8px}
.chip{display:inline-flex; align-items:center; gap:6px; min-height:36px; padding:0 14px; border-radius:999px; background:var(--surface); box-shadow:inset 0 0 0 1px var(--line-2); font:600 13px/1 var(--ui); color:var(--ink-2); white-space:nowrap; transition:all .2s}
.chip:hover{box-shadow:inset 0 0 0 1px var(--gold)}
.chip.on{background:var(--brand-soft); color:var(--brand-ink); box-shadow:inset 0 0 0 1.5px var(--brand-2)}
.chip .ic{width:15px; height:15px}
.seg{display:flex; gap:4px; padding:4px; border-radius:15px; background:var(--surface-3); overflow-x:auto; scrollbar-width:none}
.seg::-webkit-scrollbar{display:none}
.seg button{flex:1 0 auto; display:inline-flex; align-items:center; justify-content:center; gap:7px; min-height:40px; padding:0 16px; border-radius:11px; font:700 13.5px/1 var(--ui); color:var(--muted); white-space:nowrap; transition:all .25s}
.seg button .ic{width:17px; height:17px}
.seg button.on{background:var(--surface); color:var(--brand-ink); box-shadow:var(--sh)}
.seg b{display:inline-grid; place-items:center; min-width:20px; height:20px; padding:0 6px; border-radius:10px; background:var(--brand); color:#fff; font-size:11px}
.opts{display:flex; flex-wrap:wrap; gap:8px}
.opt{display:inline-flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:2px; min-height:44px; padding:6px 14px; border-radius:13px; background:var(--surface); box-shadow:inset 0 0 0 1px var(--line-2); font:700 13.5px/1.2 var(--ui); color:var(--ink-2); text-align:left; transition:all .2s}
.opt.on{background:var(--brand-soft); color:var(--brand-ink); box-shadow:inset 0 0 0 1.5px var(--brand-2)}
.opt small{font-weight:500; font-size:11.5px; color:var(--muted)}
/* ô chọn tự thiết kế (thay ô chọn mặc định của trình duyệt) */
.dd{position:relative}
.dd-btn{width:100%; min-height:46px; display:flex; align-items:center; gap:10px; padding:0 12px 0 14px; border-radius:13px; border:1px solid var(--line-2); background:var(--surface); text-align:left; font:600 14.5px/1.3 var(--ui); color:var(--ink); transition:border-color .2s, box-shadow .2s}
.dd-btn .dd-v{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.dd-btn .ic{width:18px; height:18px; color:var(--muted); transition:transform .25s}
.dd.open .dd-btn{border-color:var(--brand-2); box-shadow:0 0 0 4px var(--brand-soft)}
.dd.open .dd-btn .ic{transform:rotate(180deg)}
.dd-m{position:absolute; left:0; right:0; top:calc(100% + 6px); z-index:40; min-width:200px; max-height:280px; overflow:auto; padding:6px; border-radius:16px; background:var(--surface); box-shadow:inset 0 0 0 1px var(--line-2), var(--sh-lg); opacity:0; visibility:hidden; transform:translateY(-6px) scale(.98); transition:opacity .18s, transform .18s, visibility .18s; overscroll-behavior:contain}
.dd.open .dd-m{opacity:1; visibility:visible; transform:none}
.dd.up .dd-m{top:auto; bottom:calc(100% + 6px)}
.dd-i{width:100%; display:flex; flex-direction:column; align-items:flex-start; gap:2px; padding:10px 12px; border-radius:10px; text-align:left; font:600 14px/1.3 var(--ui); color:var(--ink)}
.dd-i small{font:500 12px/1.3 var(--ui); color:var(--muted)}
.dd-i:hover{background:var(--surface-3)}
.dd-i.on{background:var(--brand-soft); color:var(--brand-ink)}

/* ================= ĐĂNG NHẬP (kiểu trosuite) ================= */
.auth{min-height:100vh; display:grid; grid-template-columns:1fr}
.auth-brand{position:relative; overflow:hidden; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; padding:calc(34px + var(--sat)) 20px 64px; text-align:center; color:#f6e6d6;
  background:radial-gradient(60% 60% at 30% 20%, rgba(208,40,60,.55), transparent 70%), radial-gradient(50% 50% at 80% 80%, rgba(224,181,106,.28), transparent 70%), linear-gradient(160deg,#5a0910,#2a0306 60%,#140203)}
.auth-brand::before{content:""; position:absolute; inset:0; background-image:linear-gradient(rgba(255,230,210,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,230,210,.06) 1px, transparent 1px); background-size:34px 34px; -webkit-mask-image:radial-gradient(70% 70% at 50% 40%, #000, transparent); mask-image:radial-gradient(70% 70% at 50% 40%, #000, transparent)}
.auth-brand::after{content:""; position:absolute; width:520px; height:520px; left:50%; top:45%; transform:translate(-50%,-50%); border-radius:50%; background:radial-gradient(circle, rgba(255,180,150,.18), transparent 65%); animation:authGlow 6s ease-in-out infinite}
@keyframes authGlow{50%{opacity:.6; transform:translate(-50%,-50%) scale(1.08)}}
.orbit{position:relative; z-index:1; width:180px; height:180px; display:grid; place-items:center}
.orbit::before{content:""; position:absolute; inset:0; border-radius:50%; border:1px dashed rgba(234,211,166,.38); animation:spin 40s linear infinite}
.orbit i{position:absolute; top:50%; left:50%; width:8px; height:8px; margin:-4px 0 0 -4px; border-radius:50%; background:#ffd9a8; box-shadow:0 0 14px 3px rgba(255,200,140,.7); animation:orb 9s linear infinite; --rad:90px}
.orbit i:nth-child(2){animation-delay:-3s; background:#ff9aa8; box-shadow:0 0 12px 3px rgba(255,120,140,.6)}
.orbit i:nth-child(3){animation-delay:-6s; width:6px; height:6px; margin:-3px 0 0 -3px}
@keyframes orb{from{transform:rotate(0) translateX(var(--rad)) rotate(0)} to{transform:rotate(360deg) translateX(var(--rad)) rotate(-360deg)}}
@keyframes spin{to{transform:rotate(360deg)}}
.orbit img{position:relative; width:112px; height:112px; border-radius:30px; box-shadow:0 30px 60px -20px rgba(0,0,0,.8), 0 0 0 1px rgba(234,211,166,.35)}
.auth-brand .wm{position:relative; z-index:1; height:54px; width:auto}
.auth-brand p{position:relative; z-index:1; max-width:380px; font:500 14.5px/1.6 var(--ui); color:rgba(246,230,214,.8)}
.auth-side{position:relative; display:flex; flex-direction:column; align-items:center; padding:0 16px calc(28px + var(--sab)); margin-top:-34px}
.auth-card{position:relative; width:min(100%,440px); padding:26px 22px 22px; border-radius:26px; background:var(--surface); box-shadow:inset 0 0 0 1px var(--line), var(--sh-lg); animation:pop .5s cubic-bezier(.2,.8,.2,1)}
.auth-card h1{font:800 24px/1.25 var(--ui); letter-spacing:-.02em; margin-bottom:6px}
.auth-card .sub{color:var(--muted); font-size:14px; margin-bottom:20px}
.auth-foot{display:flex; gap:8px; align-items:flex-start; width:min(100%,440px); margin-top:16px; font-size:12.5px; color:var(--muted)}
.auth-foot .ic{width:15px; height:15px; margin-top:2px}
.auth-tools{position:absolute; top:calc(14px + var(--sat)); right:14px; z-index:3}
@media (min-width:980px){
  .auth{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)}
  .auth-brand{min-height:100vh; padding:40px}
  .orbit{width:230px; height:230px} .orbit i{--rad:115px} .orbit img{width:140px; height:140px; border-radius:36px}
  .auth-brand .wm{height:64px}
  .auth-side{justify-content:center; margin:0; padding:40px 32px}
}
@keyframes pop{from{opacity:0; transform:translateY(10px) scale(.985)}}

/* ================= KHUNG APP ================= */
.app{min-height:100vh; padding-bottom:calc(96px + var(--sab))}
.side{display:none}
.top{position:sticky; top:0; z-index:40; padding-top:var(--sat); background:var(--glass); -webkit-backdrop-filter:saturate(1.5) blur(18px); backdrop-filter:saturate(1.5) blur(18px); border-bottom:1px solid var(--line)}
.top-in{display:flex; align-items:center; gap:10px; min-height:62px; padding:0 max(14px,env(safe-area-inset-right)) 0 max(14px,env(safe-area-inset-left))}
.top .mark{width:36px; height:36px; border-radius:11px; box-shadow:0 6px 14px -8px rgba(0,0,0,.6)}
.top-t{flex:1; min-width:0}
.top-t h2{font:800 19px/1.2 var(--ui); letter-spacing:-.015em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.top-t small{display:block; font:500 12px/1.3 var(--ui); color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.pill{display:inline-flex; align-items:center; gap:8px; min-height:36px; padding:0 13px 0 11px; border-radius:999px; background:var(--surface); box-shadow:inset 0 0 0 1px var(--line-2); font:700 12.5px/1 var(--ui); color:var(--ink-2); white-space:nowrap}
.pill i{width:9px; height:9px; border-radius:50%; background:var(--ok); box-shadow:0 0 0 4px var(--ok-soft); animation:beat 2.4s ease-in-out infinite}
.pill.off i{background:var(--bad); box-shadow:0 0 0 4px var(--bad-soft)}
.pill .s{display:none}
@keyframes beat{50%{box-shadow:0 0 0 7px transparent}}
.ib{width:40px; height:40px; flex:none; border-radius:12px; display:grid; place-items:center; color:var(--ink-2); background:var(--surface); box-shadow:inset 0 0 0 1px var(--line-2)}
.ib:hover{color:var(--brand-ink)}
.ib .ic{width:19px; height:19px}
.top .wl{display:none}
.main{max-width:1180px; margin:0 auto; padding:18px max(14px,env(safe-area-inset-right)) 28px max(14px,env(safe-area-inset-left))}
/* thanh tab nổi (điện thoại) */
.nav{position:fixed; left:max(12px,env(safe-area-inset-left)); right:max(12px,env(safe-area-inset-right)); bottom:calc(12px + var(--sab)); z-index:45; display:grid; grid-template-columns:repeat(var(--n,5),1fr); gap:4px; padding:6px; border-radius:24px; background:var(--glass); -webkit-backdrop-filter:saturate(1.6) blur(20px); backdrop-filter:saturate(1.6) blur(20px); box-shadow:inset 0 0 0 1px var(--line-2), 0 20px 40px -18px rgba(0,0,0,.55)}
.tab{position:relative; height:56px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; border-radius:18px; font:700 10.5px/1 var(--ui); color:var(--muted); transition:color .25s, background .3s}
.tab .ic{width:22px; height:22px}
.tab.on{color:var(--brand-ink); background:var(--brand-soft)}
.tab.jel{animation:jelly .5s}
@keyframes jelly{0%{transform:scale(1)} 30%{transform:scale(1.14,.88)} 55%{transform:scale(.95,1.05)} 78%{transform:scale(1.02,.98)} 100%{transform:scale(1)}}
.dot{position:absolute; top:5px; left:calc(50% + 6px); min-width:18px; height:18px; padding:0 5px; border-radius:9px; background:var(--bad); color:#fff; font:800 10.5px/18px var(--ui); text-align:center; box-shadow:0 0 0 2px var(--surface)}
@media (min-width:980px){
  .app{padding:0 0 0 268px}
  .nav{display:none}
  .side{position:fixed; top:0; bottom:0; left:0; z-index:45; width:268px; display:flex; flex-direction:column; gap:6px; padding:calc(22px + var(--sat)) 16px 18px; background:var(--glass); -webkit-backdrop-filter:saturate(1.5) blur(18px); backdrop-filter:saturate(1.5) blur(18px); border-right:1px solid var(--line)}
  .side .wm{height:48px; width:auto; max-width:100%; margin:0 8px 22px; object-fit:contain; object-position:left}
  .side .wm-d{display:none}
  [data-theme=dark] .side .wm-l{display:none} [data-theme=dark] .side .wm-d{display:block}
  .side .tab{flex-direction:row; justify-content:flex-start; gap:12px; height:48px; padding:0 14px; font-size:14px; border-radius:14px}
  .side .tab:hover{background:var(--surface-3); color:var(--ink)}
  .side .tab.on{background:var(--brand-soft); color:var(--brand-ink)}
  .side .tab.on::before{content:""; position:absolute; left:-16px; top:12px; bottom:12px; width:4px; border-radius:0 4px 4px 0; background:linear-gradient(var(--brand-2),var(--gold))}
  .side .dot{position:static; margin-left:auto; box-shadow:none}
  .side .me-chip{margin-top:auto; display:flex; align-items:center; gap:10px; padding:10px; border-radius:16px; background:var(--surface); box-shadow:inset 0 0 0 1px var(--line); text-align:left}
  .side .me-chip .av{width:38px; height:38px; border-radius:12px; font-size:16px}
  .side .me-chip b{display:block; font:700 13.5px/1.2 var(--ui)} .side .me-chip small{font-size:12px; color:var(--muted)}
  .top .mark{display:none} .top .wl{display:inline-flex}
  .top-in{min-height:74px; padding:0 32px}
  .top-t h2{font-size:22px}
  .main{padding:26px 32px 48px}
}

/* ================= KHỐI CHUNG ================= */
.card{background:var(--surface); border-radius:var(--r); box-shadow:inset 0 0 0 1px var(--line), var(--sh)}
.pad{padding:18px}
.sec-t{display:flex; align-items:center; justify-content:space-between; gap:10px; margin:26px 2px 12px}
.sec-t h3{font:800 17px/1.25 var(--ui); letter-spacing:-.01em}
.sec-t>button,.sec-t>a{font:700 13px/1 var(--ui); color:var(--brand-ink); text-decoration:none}
.enter .stag{animation:pop .5s cubic-bezier(.2,.8,.2,1) both; animation-delay:calc(var(--i,0) * 35ms)}
.badge{display:inline-flex; align-items:center; gap:5px; padding:4px 10px; border-radius:999px; font:700 11.5px/1.1 var(--ui); white-space:nowrap}
.b-new{background:var(--info-soft); color:var(--info)} .b-acc{background:var(--warn-soft); color:var(--warn)} .b-ready{background:var(--vio-soft); color:var(--vio)}
.b-done{background:var(--ok-soft); color:var(--ok)} .b-cancel{background:var(--bad-soft); color:var(--bad)} .b-off{background:var(--surface-3); color:var(--muted)} .b-gold{background:var(--gold-soft); color:var(--gold-2)}
.empty{text-align:center; padding:42px 18px; color:var(--muted)}
.empty .em{width:64px; height:64px; margin:0 auto 14px; border-radius:20px; display:grid; place-items:center; background:var(--gold-soft); color:var(--gold-2)}
.empty .em .ic{width:30px; height:30px}
.empty b{display:block; font:800 17px/1.3 var(--ui); color:var(--ink); margin-bottom:4px}
.sk{border-radius:14px; background:linear-gradient(90deg, var(--surface-3) 25%, var(--surface-2) 50%, var(--surface-3) 75%); background-size:200% 100%; animation:shim 1.2s linear infinite}
@keyframes shim{to{background-position:-200% 0}}
.search{position:relative; margin-bottom:12px}
.search .ic{position:absolute; left:14px; top:50%; transform:translateY(-50%); color:var(--muted)}
.search .inp{padding-left:44px}
.hscroll{display:flex; gap:8px; overflow-x:auto; padding:2px 2px 12px; scrollbar-width:none}
.hscroll::-webkit-scrollbar{display:none}
.bar-row{display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end; margin-bottom:12px}
.fab{position:fixed; right:max(18px,env(safe-area-inset-right)); bottom:calc(92px + var(--sab)); z-index:44; min-height:52px; padding:0 22px 0 18px; border-radius:18px; font-size:14.5px}
@media (min-width:980px){ .fab{bottom:30px; right:34px} }

/* ================= TỔNG QUAN ================= */
.hello{display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:12px; margin-bottom:16px}
.hello h1{font:800 clamp(22px,3vw,28px)/1.25 var(--ui); letter-spacing:-.02em}
.hello h1 em{font:italic 700 1.18em/1 var(--serif); color:var(--brand-ink)}
.hello p{color:var(--muted); font-size:13.5px; margin-top:4px}
.status{position:relative; overflow:hidden; display:flex; align-items:center; gap:14px; padding:18px 20px; border-radius:22px; color:#fff;
  background:radial-gradient(80% 140% at 0% 0%, rgba(255,255,255,.18), transparent 60%), linear-gradient(135deg,#1c9a58,#0f6b3b); box-shadow:0 20px 40px -24px #0f6b3b}
.status.off{background:radial-gradient(80% 140% at 0% 0%, rgba(255,255,255,.16), transparent 60%), linear-gradient(135deg,#b3263a,#5c0a10); box-shadow:0 20px 40px -24px #5c0a10}
.status .si{width:46px; height:46px; flex:none; border-radius:15px; display:grid; place-items:center; background:rgba(255,255,255,.18)}
.status>div{flex:1; min-width:0}
.status b{display:block; font:800 18px/1.25 var(--ui)}
.status small{opacity:.9; font-size:13px}
.status .sw{background:rgba(255,255,255,.3)} .status .sw.on{background:rgba(255,255,255,.45)}
.status a{color:#fff}
.kpis{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-top:12px}
@media (min-width:760px){ .kpis{grid-template-columns:repeat(4,minmax(0,1fr))} }
.kpi{position:relative; overflow:hidden; padding:16px; border-radius:20px; background:var(--surface); box-shadow:inset 0 0 0 1px var(--line), var(--sh); text-align:left}
.kpi .ki{width:38px; height:38px; border-radius:12px; display:grid; place-items:center; margin-bottom:12px}
.kpi .ki .ic{width:20px; height:20px}
.kpi small{display:block; font:600 12.5px/1.3 var(--ui); color:var(--muted)}
.kpi b{display:block; margin-top:4px; font:800 24px/1.1 var(--ui); letter-spacing:-.02em; font-variant-numeric:tabular-nums; word-break:break-word}
@media (max-width:420px){ .kpi b{font-size:20px} }
.qa{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px}
@media (min-width:760px){ .qa{grid-template-columns:repeat(6,minmax(0,1fr))} }
.qa>button,.qa>a{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; min-height:94px; padding:12px 8px; border-radius:18px; background:var(--surface); box-shadow:inset 0 0 0 1px var(--line), var(--sh); text-decoration:none; text-align:center; font:700 12.5px/1.3 var(--ui); color:var(--ink-2); transition:transform .25s, box-shadow .25s}
.qa>button:hover,.qa>a:hover{transform:translateY(-3px); box-shadow:inset 0 0 0 1px var(--gold), var(--sh-lg)}
.qa .qi{width:42px; height:42px; border-radius:14px; display:grid; place-items:center; background:var(--brand-soft); color:var(--brand-ink)}
.qa .qi .ic{width:21px; height:21px}
.grid2{display:grid; gap:14px}
@media (min-width:980px){ .grid2{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); align-items:start} }
.mini{display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:12px; align-items:center; padding:12px 16px; border-bottom:1px solid var(--line); width:100%; text-align:left}
.mini:last-child{border-bottom:0}
.mini b{display:block; font:700 14px/1.3 var(--ui)} .mini small{display:block; font-size:12px; color:var(--muted)}
.mini img{width:42px; height:42px; border-radius:12px; object-fit:cover; background:var(--surface-3)}
.mini .oi{width:42px; height:42px; border-radius:12px; display:grid; place-items:center; background:var(--surface-3); color:var(--ink-2)}
.bars{display:flex; align-items:flex-end; gap:6px; height:160px; padding:12px 4px 0}
.bar{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:6px; height:100%; min-width:0}
.bar i{display:block; width:100%; max-width:34px; min-height:4px; border-radius:9px 9px 4px 4px; background:linear-gradient(180deg,var(--gold),var(--brand)); transform-origin:bottom; animation:grow .7s cubic-bezier(.2,.8,.2,1) both}
@keyframes grow{from{transform:scaleY(0)}}
.bar span{font:600 10.5px/1 var(--ui); color:var(--muted); white-space:nowrap}
.rank{list-style:none; margin:0; padding:0}
.rank li{display:grid; grid-template-columns:26px 42px minmax(0,1fr) auto; gap:10px; align-items:center; padding:10px 0; border-bottom:1px solid var(--line); font-size:13.5px}
.rank li:last-child{border-bottom:0}
.rank img{width:42px; height:42px; border-radius:12px; object-fit:cover; background:var(--surface-3)}
.rank em{font:italic 700 20px/1 var(--serif); color:var(--gold-2)}
.rank small{display:block; color:var(--muted); font-size:12px}

/* ================= ĐƠN HÀNG ================= */
.orders{display:grid; gap:14px; margin-top:14px}
@media (min-width:760px){ .orders{grid-template-columns:repeat(2,minmax(0,1fr))} }
.order{overflow:hidden}
.order.new{box-shadow:inset 0 0 0 1.5px var(--info), 0 0 0 4px var(--info-soft), var(--sh)}
.od-h{display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:15px 16px 11px; border-bottom:1px dashed var(--line-2)}
.od-h b{font:800 16px/1.2 var(--ui); letter-spacing:.01em}
.od-h time{margin-left:auto; font:600 12px/1 var(--ui); color:var(--muted)}
.od-b{padding:13px 16px}
.od-cust{display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-bottom:8px}
.od-cust b{flex:1 1 120px; min-width:0; font:700 15px/1.3 var(--ui)}
.od-cust a{display:inline-flex; align-items:center; gap:6px; min-height:34px; padding:0 12px; border-radius:999px; background:var(--ok-soft); color:var(--ok); font:700 13px/1 var(--ui); text-decoration:none; white-space:nowrap}
.od-cust a .ic{width:16px; height:16px}
.od-meta{display:flex; flex-direction:column; gap:4px; font-size:13px; color:var(--muted); margin-bottom:10px}
.od-meta span{display:flex; gap:7px; align-items:flex-start}
.od-meta .ic{width:16px; height:16px; margin-top:2px}
.od-items{list-style:none; margin:0; padding:0; display:grid; gap:9px}
.od-items li{display:grid; grid-template-columns:44px minmax(0,1fr) auto; gap:10px; align-items:center; font-size:13.5px}
.od-items img{width:44px; height:44px; border-radius:12px; object-fit:cover; background:var(--surface-3)}
.od-items b{font-weight:700} .od-items small{display:block; color:var(--muted); font-size:12px}
.od-note{margin-top:10px; padding:9px 12px; border-radius:12px; background:var(--warn-soft); color:var(--warn); font-size:13px}
.od-f{display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:12px 16px 15px; border-top:1px solid var(--line)}
.od-f .tot{margin-right:auto; font:800 17px/1.2 var(--ui); color:var(--brand-ink)}
.od-f .who{display:block; font:500 11.5px/1.3 var(--ui); color:var(--muted)}
.od-link{display:inline-flex; align-items:center; gap:5px; margin-top:12px; font:700 12.5px/1 var(--ui); color:var(--gold-2); text-decoration:none}
.od-link .ic{width:15px; height:15px}

/* ================= THỰC ĐƠN ================= */
.list{overflow:hidden; margin-bottom:84px}
.cat-h{display:flex; align-items:center; gap:10px; padding:12px 16px; background:var(--surface-2); border-bottom:1px solid var(--line); font:800 13px/1.2 var(--ui); color:var(--brand-ink)}
.cat-h span{margin-left:auto; font-weight:600; color:var(--muted); font-size:12px}
.item{display:grid; grid-template-columns:56px minmax(0,1fr) auto; gap:12px; align-items:center; padding:12px 16px; border-bottom:1px solid var(--line); transition:background .2s}
.item:hover{background:var(--surface-2)}
.item:last-child{border-bottom:0}
.item img{width:56px; height:56px; border-radius:14px; object-fit:cover; background:var(--surface-3)}
.item>button{width:100%; min-width:0; text-align:left}
.item b{display:block; font:700 14.5px/1.35 var(--ui)}
.item small{display:block; font-size:12.5px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.item .pr{font-weight:800; color:var(--brand-ink)}
.item.off b,.item.off .pr,.item.off img{opacity:.5}
.item .tg{display:flex; flex-direction:column; align-items:flex-end; gap:5px; font:700 10.5px/1 var(--ui); color:var(--muted)}
.item .num{font:italic 700 15px/1 var(--serif); color:var(--gold-2); margin-right:4px}
.mv{display:flex; gap:5px; align-items:center}
.mv button{width:36px; height:36px; border-radius:11px; display:grid; place-items:center; background:var(--surface); box-shadow:inset 0 0 0 1px var(--line-2); color:var(--ink-2)}
.mv button[disabled]{opacity:.35}
.mv .ic{width:16px; height:16px}
.toc{display:flex; gap:8px 20px; flex-wrap:wrap; padding:16px 18px; font:600 17px/1.3 var(--serif)}
.toc span{display:inline-flex; align-items:baseline; gap:6px; color:var(--ink-2)}
.toc em{font:italic 600 13px/1 var(--serif); color:var(--gold-2)}
.toc .off{opacity:.35; text-decoration:line-through}
@media (max-width:400px){
  .item{grid-template-columns:48px minmax(0,1fr) auto; gap:10px; padding:11px 12px}
  .item img{width:48px; height:48px}
  .main{padding-left:max(10px,env(safe-area-inset-left)); padding-right:max(10px,env(safe-area-inset-right))}
  .top-t h2{font-size:17px} .pill .l{display:none} .pill .s{display:inline}
  .od-f .tot{flex-basis:100%} .od-f .btn{flex:1}
  .qa{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ================= BẢNG NỔI (không nháy khi cập nhật nội dung) ================= */
.ovl{position:fixed; inset:0; z-index:90; display:flex; align-items:flex-end; justify-content:center}
.ovl-bg{position:absolute; inset:0; background:rgba(12,2,4,.5); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); animation:fade .25s ease}
@keyframes fade{from{opacity:0}}
.sheet{position:relative; width:100%; max-width:660px; max-height:94vh; display:flex; flex-direction:column; background:var(--bg); border-radius:28px 28px 0 0; box-shadow:var(--sh-lg), 0 220px 0 0 var(--bg); animation:sheetUp .42s cubic-bezier(.2,.9,.25,1)}
@keyframes sheetUp{from{transform:translateY(60px); opacity:.4}}
@media (min-width:760px){ .ovl{align-items:center} .sheet{border-radius:28px; max-height:90vh; box-shadow:inset 0 0 0 1px var(--line), var(--sh-lg); animation:sheetIn .35s cubic-bezier(.2,.9,.25,1)} }
@keyframes sheetIn{from{transform:translateY(16px) scale(.97); opacity:0}}
.grab{width:42px; height:5px; border-radius:3px; background:var(--line-2); margin:10px auto 0}
@media (min-width:760px){ .grab{display:none} }
.sh-h{display:flex; align-items:center; gap:10px; padding:12px 20px}
.sh-h h3{flex:1; min-width:0; font:800 19px/1.25 var(--ui); letter-spacing:-.015em}
.sh-b{flex:1; overflow:auto; -webkit-overflow-scrolling:touch; padding:4px 20px 18px; overscroll-behavior:contain}
.sh-f{display:flex; gap:10px; padding:12px 20px calc(14px + var(--sab)); border-top:1px solid var(--line); background:var(--surface)}
.sh-f .btn{flex:1}
@media (min-width:760px){ .sh-f{border-radius:0 0 28px 28px} }
.blk{background:var(--surface); border-radius:18px; box-shadow:inset 0 0 0 1px var(--line); padding:16px; margin-bottom:12px}
.blk>.lbl{display:block; margin-bottom:12px; font:800 13.5px/1.2 var(--ui); color:var(--ink)}
.img-pick{display:flex; flex-wrap:wrap; gap:14px; align-items:center}
.img-pick img{width:100px; height:100px; border-radius:18px; object-fit:cover; background:var(--surface-3); box-shadow:inset 0 0 0 1px var(--line)}
.img-pick .acts{display:grid; gap:8px}
@media (max-width:400px){ .img-pick img{width:84px; height:84px} }
.sizes{display:grid; gap:8px}
.size-r{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.2fr) 42px; gap:8px; align-items:center}
.rm{width:42px; height:42px; border-radius:12px; display:grid; place-items:center; color:var(--bad); background:var(--bad-soft)}
.rm .ic{width:18px; height:18px}
.toggle-r{display:flex; align-items:center; gap:12px; padding:11px 0; border-bottom:1px solid var(--line)}
.toggle-r:last-child{border-bottom:0}
.toggle-r>div{flex:1}
.toggle-r b{display:block; font:700 14px/1.3 var(--ui)}
.toggle-r small{font-size:12px; color:var(--muted)}
.check-list{max-height:280px; overflow:auto; display:grid; gap:2px; border-radius:14px; padding:6px; background:var(--surface-2); box-shadow:inset 0 0 0 1px var(--line)}
.ck{display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:10px; font:600 14px/1.3 var(--ui); cursor:pointer}
.ck:hover{background:var(--surface-3)}
.ck input{width:20px; height:20px; accent-color:var(--brand)}
.ck img{width:34px; height:34px; border-radius:9px; object-fit:cover}
details.adv summary{cursor:pointer; font:800 13.5px/1.2 var(--ui); color:var(--gold-2); list-style:none; padding:2px 0}
details.adv summary::-webkit-details-marker{display:none}
details.adv[open] summary{margin-bottom:12px}
.gallery{display:grid; grid-template-columns:repeat(auto-fill,minmax(78px,1fr)); gap:8px}
.gallery button{border-radius:14px; overflow:hidden; aspect-ratio:1; transition:box-shadow .2s}
.gallery button:hover{box-shadow:0 0 0 2px var(--brand-2)}
.gallery img{width:100%; height:100%; object-fit:cover}
.part{display:grid; grid-template-columns:minmax(0,1fr) 112px 64px 42px; gap:6px; align-items:center}
@media (max-width:520px){ .part{grid-template-columns:minmax(0,1fr) 64px 42px} .part .dd-size{grid-column:1/-1; order:3} }
.links{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px}

/* ================= CỬA HÀNG / TÀI KHOẢN ================= */
.me{position:relative; overflow:hidden; display:flex; align-items:center; gap:14px; padding:20px; border-radius:24px; color:#fff6ea; background:radial-gradient(60% 120% at 0% 0%, rgba(255,255,255,.15), transparent 60%), linear-gradient(140deg,#7a0d17,#2a0306)}
.me::after{content:""; position:absolute; right:-40px; bottom:-60px; width:200px; height:200px; border-radius:50%; border:1px dashed rgba(234,211,166,.3)}
.av{width:52px; height:52px; flex:none; border-radius:17px; display:grid; place-items:center; background:linear-gradient(135deg,#f3dcaa,#c9a063); color:#3a0407; font:800 22px/1 var(--ui)}
.me b{display:block; font:800 20px/1.2 var(--ui)} .me small{color:rgba(246,230,214,.8)}
.menu-l{overflow:hidden}
.menu-l>button,.menu-l>a{display:flex; align-items:center; gap:12px; width:100%; min-height:58px; padding:0 16px; border-bottom:1px solid var(--line); text-align:left; text-decoration:none; font:700 14.5px/1.3 var(--ui); transition:background .2s}
.menu-l>*:hover{background:var(--surface-2)}
.menu-l>*:last-child{border-bottom:0}
.menu-l .mi{width:36px; height:36px; flex:none; border-radius:11px; display:grid; place-items:center; background:var(--brand-soft); color:var(--brand-ink)}
.menu-l .mi .ic{width:18px; height:18px}
.menu-l span{flex:1}
.menu-l .chev{color:var(--muted); width:18px; height:18px}
.user-r{display:grid; grid-template-columns:42px minmax(0,1fr) auto; gap:12px; align-items:center; padding:12px 16px; border-bottom:1px solid var(--line); width:100%; text-align:left}
.user-r:last-child{border-bottom:0}
.user-r .av{width:42px; height:42px; border-radius:14px; font-size:17px}
.user-r b{display:block; font:700 14.5px/1.3 var(--ui)} .user-r small{font-size:12px; color:var(--muted)}
.log{list-style:none; margin:0; padding:0}
.log li{padding:12px 16px; border-bottom:1px solid var(--line); font-size:13.5px}
.log li:last-child{border-bottom:0}
.log b{font-weight:800}
.log small{display:block; color:var(--muted); font-size:12px}
.share-box{padding:14px; border-radius:14px; background:var(--surface-3); word-break:break-all; font:600 13px/1.5 var(--ui); margin:10px 0}
.role-cards{display:grid; gap:8px}
.role-c{display:flex; gap:12px; align-items:flex-start; padding:13px; border-radius:16px; background:var(--surface); box-shadow:inset 0 0 0 1px var(--line-2); text-align:left; transition:all .2s}
.role-c .ic{margin-top:2px; color:var(--brand-ink)}
.role-c.on{background:var(--brand-soft); box-shadow:inset 0 0 0 1.5px var(--brand-2)}
.role-c b{display:block; font:800 14.5px/1.3 var(--ui)} .role-c small{color:var(--muted); font-size:12.5px}
.toast{position:fixed; left:50%; bottom:calc(100px + var(--sab)); z-index:120; max-width:calc(100% - 32px); display:flex; align-items:center; gap:10px; padding:12px 18px; border-radius:16px; background:#23151a; color:#fff; font:600 14px/1.35 var(--ui); box-shadow:0 18px 40px -16px rgba(0,0,0,.7); transform:translate(-50%,24px); opacity:0; pointer-events:none; transition:opacity .3s, transform .4s cubic-bezier(.2,1.3,.4,1)}
[data-theme=dark] .toast{background:#f6ece6; color:#23151a}
.toast.on{opacity:1; transform:translate(-50%,0)}
.toast.bad{background:var(--bad); color:#fff}
@media (min-width:980px){ .toast{bottom:32px; left:calc(50% + 134px)} }
.loading{display:grid; place-items:center; min-height:70vh}
.spin{width:36px; height:36px; border-radius:50%; border:3px solid var(--line-2); border-top-color:var(--brand-2); animation:spin .9s linear infinite}
@media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation:none!important; transition:none!important} }