/* ====================================================================
   Nhân Kiệt HR — Design System  (light, đỏ #e53e3e, hiện đại)
   ==================================================================== */
:root{
  --r:#e53e3e; --rd:#c53030; --r-deep:#9b2c2c; --ra:#fc8181;
  --rl:#fff5f5; --rm:#fed7d7;
  --grad:linear-gradient(135deg,#f56565 0%,#e53e3e 45%,#c53030 100%);
  --grad-soft:linear-gradient(135deg,#fff5f5 0%,#ffe9e9 100%);
  --ink:#1f2937; --ink2:#374151; --mut:#6b7280; --mut2:#9ca3af;
  --line:#eef0f4; --bg:#f4f6fb; --card:#ffffff;
  --shadow-sm:0 1px 2px rgba(17,24,39,.05);
  --shadow:0 6px 22px rgba(17,24,39,.08);
  --shadow-lg:0 16px 40px rgba(17,24,39,.14);
  --shadow-red:0 10px 26px rgba(229,62,62,.34);
  --radius:20px; --radius-lg:28px; --radius-sm:14px;
  --safe-b:env(safe-area-inset-bottom,0px);
  --safe-t:env(safe-area-inset-top,0px);
  --max-w:440px;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  font-family:'Be Vietnam Pro',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  color:var(--ink);background:#e9ecf5;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;letter-spacing:-.01em;
}
.hide{display:none!important}
img{display:block;max-width:100%}

/* ===== Phone shell ===== */
#app-shell{
  max-width:var(--max-w);margin:0 auto;min-height:100vh;min-height:100dvh;
  background:var(--bg);position:relative;display:flex;flex-direction:column;
}
.app-main{
  flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:18px 18px calc(96px + var(--safe-b));scroll-behavior:smooth;
}
.app-main.no-tab{padding-bottom:calc(28px + var(--safe-b))}

/* ===== Status bar ===== */
.status-bar{
  display:flex;align-items:center;justify-content:space-between;
  padding:max(10px,var(--safe-t)) 20px 8px;font-size:12px;font-weight:600;color:var(--mut);
  background:#fff;border-bottom:1px solid var(--line);flex-shrink:0;
}
.status-bar .time{color:var(--ink);font-weight:700}
.status-bar .brand-mini{display:flex;align-items:center;gap:6px;color:var(--r);font-weight:800}
.status-bar .brand-mini img{height:15px;width:auto}

/* ===== Splash ===== */
#splash{
  position:fixed;inset:0;z-index:1000;background:var(--grad);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;
  transition:opacity .5s ease,visibility .5s ease;
}
#splash.gone{opacity:0;visibility:hidden}
.splash-logo{
  width:120px;height:120px;border-radius:40px;background:#fff;
  display:flex;align-items:center;justify-content:center;padding:20px;
  box-shadow:0 20px 50px rgba(0,0,0,.25);animation:pop .6s cubic-bezier(.16,1,.3,1);
}
.splash-logo img{width:100%;height:auto}
.splash-ring{position:absolute;width:120px;height:120px;border-radius:40px;animation:ring 1.8s ease-out infinite}
@keyframes ring{0%{box-shadow:0 0 0 0 rgba(255,255,255,.5)}100%{box-shadow:0 0 0 36px rgba(255,255,255,0)}}
.splash-txt{color:#fff;font-weight:800;font-size:20px;letter-spacing:.02em;text-shadow:0 2px 8px rgba(0,0,0,.15)}
.splash-sub{color:rgba(255,255,255,.85);font-size:12.5px;margin-top:-12px}
.splash-bar{width:140px;height:4px;border-radius:4px;background:rgba(255,255,255,.3);overflow:hidden}
.splash-bar i{display:block;height:100%;width:40%;background:#fff;border-radius:4px;animation:load 1.4s ease-in-out infinite}
@keyframes load{0%{transform:translateX(-120%)}100%{transform:translateX(360%)}}
@keyframes pop{from{transform:scale(.6);opacity:0}to{transform:scale(1);opacity:1}}

/* ===== Brand hero (auth) ===== */
.brand-hero{text-align:center;padding:30px 20px 18px;animation:fadeUp .5s ease}
.brand-logo{
  width:96px;height:96px;border-radius:36px;background:#fff;margin:0 auto 16px;
  display:flex;align-items:center;justify-content:center;padding:16px;
  box-shadow:var(--shadow);position:relative;
}
.brand-logo img{width:100%;height:auto}
.brand-hero h1{font-size:23px;font-weight:800;letter-spacing:-.02em}
.brand-hero p{font-size:13.5px;color:var(--mut);line-height:1.5;margin-top:6px}

/* ===== Cards ===== */
.card{
  background:var(--card);border-radius:var(--radius-lg);box-shadow:var(--shadow);
  padding:20px;margin-bottom:14px;animation:fadeUp .4s ease;
}
.card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.card-title{font-size:15.5px;font-weight:800;display:flex;align-items:center;gap:8px}
.card-title .dot{width:7px;height:7px;border-radius:50%;background:var(--r)}

/* ===== Inputs ===== */
.inp-group{margin-bottom:15px}
.inp-lbl{font-size:12.5px;font-weight:700;color:var(--ink2);margin-bottom:7px;display:block}
.inp{
  width:100%;padding:13px 15px;border:1.6px solid #e6e8ee;border-radius:16px;
  font-size:15px;font-family:inherit;color:var(--ink);background:#fafbfc;outline:none;
  transition:border-color .18s,box-shadow .18s,background .18s;
}
.inp::placeholder{color:var(--mut2)}
.inp:focus{border-color:var(--r);background:#fff;box-shadow:0 0 0 4px rgba(229,62,62,.1)}
select.inp{appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%239ca3af' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
  background-repeat:no-repeat;background-position:right 14px center;background-size:14px;padding-right:38px}

/* ===== PIN boxes ===== */
.pin-boxes{display:flex;gap:9px;justify-content:space-between}
.pin-box{
  flex:1;min-width:0;height:47px;text-align:center;font-size:26px;font-weight:800;color:var(--ink);
  border:1.8px solid #e3e6ee;border-radius:18px;background:#fafbfc;outline:none;font-family:inherit;
  transition:all .16s cubic-bezier(.16,1,.3,1);
}
.pin-box:focus{border-color:var(--r);background:#fff;box-shadow:0 0 0 4px rgba(229,62,62,.12);transform:translateY(-2px)}
.pin-box.filled{border-color:var(--ra);background:var(--rl);color:var(--rd);animation:pinpop .18s ease}
@keyframes pinpop{50%{transform:scale(1.12)}}

/* ===== Buttons ===== */
.btn{
  width:100%;border:none;border-radius:18px;padding:14px 18px;font-size:15px;font-weight:700;
  font-family:inherit;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:9px;
  transition:transform .12s,box-shadow .2s,opacity .2s;position:relative;overflow:hidden;
}
.btn:active{transform:scale(.975)}
.btn:disabled{opacity:.55;pointer-events:none}
.btn-primary{background:var(--grad);color:#fff;box-shadow:var(--shadow-red)}
.btn-primary:active{box-shadow:0 4px 14px rgba(229,62,62,.3)}
.btn-outline{background:#fff;color:var(--r);border:1.8px solid var(--rm)}
.btn-outline:active{background:var(--rl)}
.btn-ghost{background:transparent;color:var(--mut);width:auto;font-weight:600;font-size:14px;padding:11px}
.btn-ghost:active{color:var(--r)}
.btn-sm{width:auto;padding:8px 14px;font-size:12.5px;border-radius:10px}
.btn-block-2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
/* ripple */
.btn::after{content:'';position:absolute;inset:0;background:radial-gradient(circle at center,rgba(255,255,255,.45),transparent 60%);opacity:0;transition:opacity .4s}
.btn:active::after{opacity:1;transition:none}

/* ===== App header (gradient) ===== */
.app-header{
  position:relative;background:var(--grad);padding:max(16px,var(--safe-t)) 18px 18px;
  display:flex;align-items:center;gap:13px;overflow:hidden;flex-shrink:0;
  box-shadow:0 6px 20px rgba(197,48,48,.28);
}
.app-header::before{content:'';position:absolute;top:-40px;right:-30px;width:150px;height:150px;border-radius:50%;background:rgba(255,255,255,.1)}
.app-header::after{content:'';position:absolute;bottom:-50px;left:20px;width:120px;height:120px;border-radius:50%;background:rgba(255,255,255,.07)}
.hdr-logo{width:46px;height:46px;border-radius:18px;background:#fff;display:flex;align-items:center;justify-content:center;padding:7px;flex-shrink:0;box-shadow:0 4px 12px rgba(0,0,0,.15);z-index:1}
.hdr-logo img{width:100%;height:auto}
.hdr-text{flex:1;min-width:0;z-index:1}
.hdr-text h2{color:#fff;font-size:16px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hdr-text p{color:rgba(255,255,255,.85);font-size:12px;margin-top:2px}

/* ===== Pages ===== */
.page{display:none;animation:fadeUp .35s ease}
.page.active{display:block}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}

/* ===== Profile avatar ===== */
.profile-top{text-align:center;margin:6px 0 18px;animation:fadeUp .4s ease}
.avatar-circle{
  width:92px;height:92px;border-radius:50%;margin:0 auto 12px;cursor:pointer;position:relative;
  background:var(--grad);color:#fff;display:flex;align-items:center;justify-content:center;
  font-size:34px;font-weight:800;box-shadow:var(--shadow-red);
}
.avatar-circle .avatar-overlay{
  position:absolute;inset:0;border-radius:50%;background:rgba(0,0,0,.42);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:20px;opacity:0;transition:opacity .2s;
}
.avatar-circle:active .avatar-overlay{opacity:1}
.avatar-img{width:100%;height:100%;border-radius:50%;object-fit:cover}
.profile-top h2{font-size:19px;font-weight:800}
.profile-top .sub{font-size:13px;color:var(--mut);margin-top:3px}
.file-hidden{display:none}

/* ===== Info rows ===== */
.info-row{display:flex;align-items:center;gap:13px;padding:13px 0;border-bottom:1px solid var(--line)}
.info-row:last-child{border-bottom:none}
.info-icon{width:42px;height:42px;border-radius:16px;background:var(--grad-soft);color:var(--r);display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0}
.info-content{flex:1;min-width:0}
.info-label{font-size:11px;color:var(--mut);font-weight:600;text-transform:uppercase;letter-spacing:.4px;margin-bottom:2px}
.info-value{font-size:14.5px;font-weight:700;color:var(--ink);word-break:break-word}
.info-row .chev{color:var(--mut2);font-size:18px}

/* ===== Badges ===== */
.badge{display:inline-flex;align-items:center;gap:5px;padding:5px 11px;border-radius:24px;font-size:12px;font-weight:700}
.badge::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor}
.b-ok,.badge-approved{background:#dcfce7;color:#15803d}
.b-wait,.badge-pending{background:#fef3c7;color:#b45309}
.b-no,.badge-rejected{background:#fee2e2;color:#b91c1c}
.badge-inactive{background:#f1f5f9;color:#64748b}

/* ===== Quick actions (roadmap) ===== */
.quick-actions{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.quick-action{
  background:var(--card);border:none;border-radius:var(--radius);box-shadow:var(--shadow-sm);
  padding:18px 12px;text-align:center;cursor:pointer;font-family:inherit;position:relative;
  transition:transform .15s,box-shadow .2s;overflow:hidden;
}
.quick-action:active{transform:scale(.96)}
.quick-action::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--grad);opacity:.85}
.qa-icon{width:50px;height:50px;border-radius:20px;background:var(--grad-soft);display:flex;align-items:center;justify-content:center;font-size:24px;margin:4px auto 9px}
.qa-label{font-size:13px;font-weight:700;color:var(--ink)}
.qa-sub{font-size:10px;color:var(--mut2);margin-top:3px;font-weight:600}
.qa-soon{position:absolute;top:8px;right:8px;font-size:8.5px;font-weight:800;background:#fef3c7;color:#b45309;padding:2px 7px;border-radius:12px}

/* ===== Bottom tab bar ===== */
.tab-bar{
  position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:var(--max-w);
  background:rgba(255,255,255,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-top:1px solid var(--line);display:flex;padding:8px 10px calc(8px + var(--safe-b));z-index:90;
  box-shadow:0 -4px 24px rgba(0,0,0,.06);
}
.tab-item{
  flex:1;border:none;background:none;font-family:inherit;cursor:pointer;color:var(--mut2);
  display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 0 4px;position:relative;
  font-size:10.5px;font-weight:700;transition:color .2s;
}
.tab-item .tab-icon{font-size:21px;transition:transform .2s}
.tab-item.active{color:var(--r)}
.tab-item.active .tab-icon{transform:translateY(-2px) scale(1.08)}
.tab-item.active::before{content:'';position:absolute;top:-8px;width:26px;height:3px;border-radius:3px;background:var(--grad)}

/* ===== Top tabs (admin) ===== */
.tab-bar-top{display:flex;gap:5px;padding:5px;background:#eceef4;border-radius:18px;margin-bottom:15px;overflow-x:auto;flex-shrink:0}
.tab-pill{padding:9px 15px;border:none;border-radius:15px;font-size:13px;font-weight:700;font-family:inherit;cursor:pointer;white-space:nowrap;background:transparent;color:var(--mut);transition:all .2s}
.tab-pill.active{background:#fff;color:var(--r);box-shadow:var(--shadow-sm)}

/* ===== Stats (admin) ===== */
.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:14px}
.stat-card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px 14px;position:relative;overflow:hidden;animation:fadeUp .4s ease}
.stat-card::after{content:'';position:absolute;top:-18px;right:-18px;width:64px;height:64px;border-radius:50%;background:var(--grad-soft)}
.stat-value{font-size:28px;font-weight:800;color:var(--r);line-height:1;position:relative}
.stat-label{font-size:11px;color:var(--mut);font-weight:600;margin-top:6px;text-transform:uppercase;letter-spacing:.4px;position:relative}

/* ===== Table ===== */
table{width:100%;border-collapse:collapse;font-size:13.5px}
th{background:#f7f8fb;padding:11px 12px;text-align:left;font-size:11px;font-weight:700;color:var(--mut);text-transform:uppercase;letter-spacing:.4px;white-space:nowrap}
td{padding:11px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
tr:last-child td{border-bottom:none}

/* ===== Search ===== */
.search-box{position:relative;margin-bottom:12px}
.search-box .inp{padding-left:42px;background:#fff}
.search-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);font-size:16px;color:var(--mut2);pointer-events:none}

/* ===== Modal / sheet ===== */
.modal-overlay{position:fixed;inset:0;background:rgba(17,24,39,.55);z-index:300;display:flex;align-items:flex-end;justify-content:center;animation:fade .2s;backdrop-filter:blur(3px)}
.modal-sheet{width:100%;max-width:var(--max-w);background:#fff;border-radius:30px 30px 0 0;padding:22px 20px calc(24px + var(--safe-b));animation:up .3s cubic-bezier(.16,1,.3,1);max-height:92vh;overflow-y:auto}
@media(min-width:480px){.modal-overlay{align-items:center}.modal-sheet{border-radius:30px}}
.modal-handle{width:42px;height:4px;border-radius:3px;background:#d8dce5;margin:0 auto 18px}
.modal-title{font-size:17px;font-weight:800;text-align:center;margin-bottom:18px}
@keyframes up{from{transform:translateY(100%)}to{transform:translateY(0)}}
@keyframes fade{from{opacity:0}to{opacity:1}}

/* ===== Toast ===== */
.toast{position:fixed;top:18px;left:50%;transform:translateX(-50%) translateY(-12px);background:#1f2937;color:#fff;padding:12px 22px;border-radius:36px;font-size:13.5px;font-weight:600;z-index:9999;opacity:0;transition:opacity .25s,transform .25s;max-width:88vw;text-align:center;box-shadow:var(--shadow-lg);pointer-events:none}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast.ok{background:linear-gradient(135deg,#16a34a,#15803d)}
.toast.err{background:linear-gradient(135deg,#ef4444,#c53030)}

/* ===== Steps indicator ===== */
.steps{display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:18px}
.step{display:flex;align-items:center;gap:8px}
.step-num{width:28px;height:28px;border-radius:50%;background:#e6e8ee;color:var(--mut);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;transition:all .3s}
.step-num.on{background:var(--grad);color:#fff;box-shadow:var(--shadow-red)}
.step-line{width:40px;height:2.5px;border-radius:2px;background:#e6e8ee}
.step-line.on{background:var(--r)}

.muted{color:var(--mut);font-size:12.5px;line-height:1.6}
.empty{text-align:center;padding:30px 16px;color:var(--mut2);font-size:13.5px}

/* ===== Chấm công ===== */
.att-hero{background:var(--grad);color:#fff;border-radius:var(--radius-lg);padding:18px;position:relative;overflow:hidden;box-shadow:var(--shadow-red);margin-bottom:14px}
.att-hero::after{content:'';position:absolute;top:-30px;right:-20px;width:120px;height:120px;border-radius:50%;background:rgba(255,255,255,.1)}
.att-date{font-size:12.5px;opacity:.9;position:relative}
.att-status{font-size:17px;font-weight:800;margin:3px 0 14px;position:relative}
.att-times{display:grid;grid-template-columns:1fr 1fr;gap:10px;position:relative}
.att-time{background:rgba(255,255,255,.16);border-radius:14px;padding:12px;text-align:center}
.att-time .lb{font-size:10.5px;opacity:.85;font-weight:700;letter-spacing:.4px}
.att-time .vl{font-size:22px;font-weight:800;margin-top:3px;font-variant-numeric:tabular-nums}
.att-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.btn-dark{background:linear-gradient(135deg,#2d3748,#1a202c);color:#fff;box-shadow:0 6px 18px rgba(45,55,72,.3)}
.btn-hero{width:100%;margin-top:16px;background:#fff;color:var(--rd);font-size:18px;font-weight:800;padding:17px;border-radius:18px;box-shadow:0 8px 22px rgba(0,0,0,.22);border:none;font-family:inherit;cursor:pointer;letter-spacing:.3px}
.btn-hero:active{transform:scale(.98)}
.btn-hero:disabled{background:rgba(255,255,255,.22);color:#fff;box-shadow:none;cursor:default}
.cta-row{width:100%;display:flex;align-items:center;gap:14px;background:#fff;border:none;border-radius:var(--radius-lg);box-shadow:var(--shadow);padding:16px 18px;margin-bottom:14px;cursor:pointer;font-family:inherit;text-align:left}
.cta-row:active{transform:scale(.99)}
.cta-ic{width:50px;height:50px;border-radius:18px;background:var(--grad-soft);display:flex;align-items:center;justify-content:center;font-size:25px;flex-shrink:0}
.cta-main{flex:1;min-width:0}
.cta-t{font-size:16px;font-weight:800;color:var(--ink)}
.cta-s{font-size:12.5px;color:var(--mut);margin-top:2px}
.att-status{font-size:18px}
.stat-row3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px}
.mini-stat{background:#fff;border-radius:14px;padding:13px 8px;text-align:center;box-shadow:var(--shadow-sm)}
.mini-stat .n{font-size:20px;font-weight:800;color:var(--r);line-height:1}
.mini-stat .l{font-size:10px;color:var(--mut);font-weight:600;margin-top:3px}

/* camera */
.cam-box{position:relative;background:#000;border-radius:16px;overflow:hidden;aspect-ratio:3/4;margin-bottom:12px}
.cam-box.cam-full{aspect-ratio:auto;height:min(62vh,600px)} /* camera lớn, không khung oval */
.cam-box video,.cam-box img{width:100%;height:100%;object-fit:cover}
.cam-oval{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none}
.cam-oval::before{content:'';width:66%;height:78%;border:3px solid rgba(255,255,255,.7);border-radius:50%;box-shadow:0 0 0 9999px rgba(0,0,0,.35)}
.cam-tip{position:absolute;bottom:10px;left:0;right:0;text-align:center;color:#fff;font-size:12px;font-weight:600;background:rgba(0,0,0,.4);padding:6px}
.gps-chip{display:flex;align-items:center;gap:8px;background:#f0fff4;border:1.5px solid #9ae6b4;border-radius:12px;padding:10px 12px;margin-bottom:12px;font-size:12.5px;color:#276749;font-weight:600}
.gps-chip.err{background:var(--rl);border-color:var(--ra);color:var(--rd)}
.hour-inputs{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin:12px 0}
.hour-inputs .inp{padding:11px 8px;text-align:center;font-weight:700}
.hour-inputs .inp-lbl{font-size:10.5px}

/* calendar */
.cal-nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.cal-month{font-size:15px;font-weight:800}
.cal-arr{width:34px;height:34px;border-radius:10px;border:none;background:var(--rl);color:var(--r);font-size:16px;cursor:pointer}
.cal-head,.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.cal-head span{text-align:center;font-size:10px;font-weight:700;color:var(--mut2);padding-bottom:4px}
.cal-cell{aspect-ratio:1;display:flex;align-items:center;justify-content:center;border-radius:10px;font-size:12.5px;font-weight:600;color:var(--ink2);position:relative}
.cal-cell.other{color:#d8dce5}
.cal-cell.sun{color:var(--r)}
.cal-cell.today{border:2px solid var(--r);font-weight:800}
.cal-cell.done{background:var(--r);color:#fff!important}
.cal-cell.half{background:#fbd38d;color:#7b341e!important}
.cal-cell.pending{background:#bee3f8;border:1.5px solid #4299e1;box-sizing:border-box;color:#2b6cb0!important}
.cal-cell.leave{background:#e9d8fd;border:1.5px solid #9f7aea;box-sizing:border-box;color:#553c9a!important}
.cal-cell.nopunch,.cal-cell.missed{background:#fff3cd;border:1.5px dashed #f0b429;box-sizing:border-box;color:#8a6d00!important}
.cal-cell{cursor:pointer}
.cal-cell.other{cursor:default}
.day-sec{font-size:12px;font-weight:800;color:var(--mut);margin:14px 0 6px;text-transform:uppercase;letter-spacing:.3px}
.cal-legend{display:flex;flex-wrap:wrap;gap:12px;margin-top:12px;font-size:11px;color:var(--mut)}
.cal-legend i{display:inline-block;width:11px;height:11px;border-radius:3px;margin-right:5px;vertical-align:-1px}

/* list rows */
.row-item{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.row-item:last-child{border-bottom:none}
.row-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0;background:var(--r)}
.row-main{flex:1;min-width:0}
.row-t{font-size:13.5px;font-weight:700}
.row-s{font-size:11.5px;color:var(--mut);margin-top:1px}
.row-r{text-align:right;font-size:12.5px;font-weight:700}

/* segmented */
.seg{display:flex;background:#eceef4;border-radius:12px;padding:4px;margin-bottom:14px}
.seg button{flex:1;border:none;background:none;padding:8px;border-radius:9px;font-family:inherit;font-weight:700;font-size:12.5px;color:var(--mut);cursor:pointer}
.seg button.on{background:#fff;color:var(--r);box-shadow:var(--shadow-sm)}

/* ===== Desktop: bright frame (chỉ áp cho app NLĐ, KHÔNG áp cho admin) ===== */
@media(min-width:480px){
  body:not(.admin-ui){display:flex;align-items:center;justify-content:center;padding:24px 0;
    background:radial-gradient(1200px 600px at 50% -10%,#ffe2e2,transparent),#eef1f8}
  body:not(.admin-ui) #app-shell{
    width:var(--max-w);flex-shrink:0;border-radius:40px;
    min-height:min(100vh - 48px,920px);max-height:min(100vh - 48px,920px);
    overflow:hidden;box-shadow:0 40px 80px rgba(31,41,55,.22),0 0 0 10px rgba(255,255,255,.6)}
  .tab-bar{border-radius:0 0 40px 40px}
}
.app-main::-webkit-scrollbar{width:0}

/* ====================================================================
   ADMIN CONSOLE — layout dashboard chuyên nghiệp (sidebar + topbar)
   Kích hoạt bằng <body class="admin-ui">. Tách hẳn khỏi khung điện thoại NLĐ.
   ==================================================================== */
body.admin-ui{background:var(--bg)}
@media(min-width:1000px){
  body.admin-ui{display:block;align-items:initial;justify-content:initial;padding:0;background:var(--bg)}
}
.admin-ui .admin-root{min-height:100vh;min-height:100dvh}

/* --- Đăng nhập admin --- */
.admin-ui .login-wrap{min-height:100vh;min-height:100dvh;display:flex;align-items:center;justify-content:center;
  padding:24px;background:radial-gradient(900px 480px at 50% -8%,#ffe2e2,transparent),var(--bg)}
.admin-ui .login-card{width:100%;max-width:400px;background:var(--card);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);padding:30px 26px;animation:fadeUp .4s ease}

/* --- Khung tổng: sidebar + main --- */
.admin-layout{display:flex;min-height:100vh;min-height:100dvh}
.ad-side{
  width:248px;flex-shrink:0;background:#fff;border-right:1px solid var(--line);
  display:flex;flex-direction:column;position:sticky;top:0;height:100vh;height:100dvh;z-index:60;
}
.ad-brand{display:flex;align-items:center;gap:11px;padding:20px 20px 16px;border-bottom:1px solid var(--line)}
.ad-brand img{width:38px;height:38px;border-radius:12px;background:var(--grad-soft);padding:5px}
.ad-brand b{font-size:15px;font-weight:800;line-height:1.15;display:block}
.ad-brand small{font-size:11px;color:var(--mut);font-weight:600}
.ad-nav{flex:1;overflow-y:auto;padding:12px 12px 8px;display:flex;flex-direction:column;gap:3px}
.ad-nav .tab-pill{
  display:flex;align-items:center;gap:11px;width:100%;text-align:left;justify-content:flex-start;
  padding:11px 13px;border:none;border-radius:13px;background:transparent;color:var(--ink2);
  font-family:inherit;font-size:13.5px;font-weight:600;cursor:pointer;white-space:nowrap;transition:background .15s,color .15s}
.ad-nav .tab-pill .ic{font-size:17px;width:22px;text-align:center;flex-shrink:0}
.ad-nav .tab-pill:hover{background:var(--bg)}
.ad-nav .tab-pill.active{background:var(--grad-soft);color:var(--rd);font-weight:800;box-shadow:none}
.ad-user{display:flex;align-items:center;gap:10px;padding:13px 16px;border-top:1px solid var(--line)}
.ad-avatar{width:38px;height:38px;border-radius:50%;background:var(--grad);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:15px;flex-shrink:0}
.ad-uinfo{flex:1;min-width:0}
.ad-uinfo b{font-size:13px;font-weight:700;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ad-uinfo span{font-size:11px;color:var(--mut)}
.ad-logout{width:34px;height:34px;border-radius:10px;border:1.5px solid var(--line);background:#fff;color:var(--mut);cursor:pointer;font-size:15px;flex-shrink:0;transition:all .15s}
.ad-logout:hover{border-color:var(--rm);color:var(--r);background:var(--rl)}

/* --- Main --- */
.ad-main{flex:1;min-width:0;display:flex;flex-direction:column}
.ad-top{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:12px;
  background:rgba(255,255,255,.86);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);padding:14px 24px;min-height:60px}
.ad-burger{display:none;width:38px;height:38px;border-radius:11px;border:1.5px solid var(--line);background:#fff;font-size:17px;cursor:pointer;color:var(--ink)}
.ad-top h1{font-size:18px;font-weight:800;letter-spacing:-.02em}
.ad-top .ad-top-sub{font-size:12px;color:var(--mut);font-weight:600;margin-left:auto}
.ad-content{flex:1;padding:22px 24px 40px;max-width:1280px;width:100%}

/* Trên desktop: ô thống kê 4 cột, bảng thoáng hơn */
@media(min-width:1000px){
  .admin-ui .stat-grid{grid-template-columns:repeat(4,1fr)}
  .admin-ui .seg{max-width:520px}
  .admin-ui table{font-size:13.5px}
  .admin-ui th,.admin-ui td{padding:12px 14px}
  .admin-ui .card{padding:22px}
}

/* Mobile/tablet: sidebar thành ngăn kéo trượt */
@media(max-width:999px){
  .ad-side{position:fixed;left:0;top:0;transform:translateX(-100%);transition:transform .26s cubic-bezier(.16,1,.3,1);
    box-shadow:var(--shadow-lg);width:270px}
  .admin-layout.nav-open .ad-side{transform:translateX(0)}
  .ad-burger{display:inline-flex;align-items:center;justify-content:center}
  .ad-scrim{position:fixed;inset:0;background:rgba(17,24,39,.45);z-index:55;opacity:0;visibility:hidden;transition:.26s}
  .admin-layout.nav-open .ad-scrim{opacity:1;visibility:visible}
  .ad-content{padding:16px 14px 40px}
  .ad-top{padding:12px 14px}
}
@media(min-width:1000px){.ad-scrim{display:none}}