/* ============================================================================
   Trợ lý chủ xe — Web UI (bản web; Android/iOS thiết kế riêng sau)
   Thiết kế: mobile-first, khung app 520px, light + dark tự động + toggle.
   ========================================================================== */

/* ── Design tokens ────────────────────────────────────────────────────────── */
:root{
  --bg:#eef1f5; --bg-grad-1:#e7ecf2; --bg-grad-2:#f4f6f9;
  --surface:#ffffff; --surface-2:#f7f9fb; --surface-3:#eef2f6;
  --ink:#0f172a; --ink-2:#5b6472; --ink-3:#8a93a3;
  --line:#e6eaf0; --line-2:#dfe4ec;

  --brand:#0d9488; --brand-2:#0f766e; --brand-3:#0b5952;
  --brand-ink:#ffffff; --brand-weak:#e6f4f1; --brand-weak-ink:#0b5952;
  --brand-glow:rgba(13,148,136,.28);

  --gold:#f59e0b; --gold-2:#d97706; --gold-ink:#3b2a06; --gold-weak:#fdf3e0;

  --danger:#e11d48; --danger-weak:#fdeaef;
  --warn:#d97706;   --warn-weak:#fdf1e1;
  --ok:#059669;     --ok-weak:#e4f6ef;
  --info:#2563eb;   --info-weak:#e8f0fe;

  --sh-1:0 1px 2px rgba(16,24,40,.05), 0 1px 3px rgba(16,24,40,.05);
  --sh-2:0 6px 16px -6px rgba(16,24,40,.14), 0 2px 6px -2px rgba(16,24,40,.08);
  --sh-3:0 22px 48px -12px rgba(16,24,40,.28);
  --sh-brand:0 10px 26px -8px var(--brand-glow);

  --r-xs:8px; --r-sm:12px; --r:16px; --r-lg:22px; --r-full:999px;
  --tab-h:66px;
  --ease:cubic-bezier(.22,.61,.36,1);
}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){
  --bg:#0a0f1a; --bg-grad-1:#0c1424; --bg-grad-2:#0a0f1a;
  --surface:#131c2b; --surface-2:#0f1826; --surface-3:#1b2637;
  --ink:#e8edf4; --ink-2:#9aa6b8; --ink-3:#6b7688;
  --line:#22304a; --line-2:#293954;
  --brand:#2dd4bf; --brand-2:#14b8a6; --brand-3:#0d9488;
  --brand-ink:#04211d; --brand-weak:#123330; --brand-weak-ink:#5eead4;
  --brand-glow:rgba(45,212,191,.22);
  --gold:#fbbf24; --gold-weak:#2a2410;
  --danger:#fb7185; --danger-weak:#3a1622;
  --warn:#fbbf24; --warn-weak:#33260f;
  --ok:#34d399; --ok-weak:#0f2c25;
  --info:#60a5fa; --info-weak:#122036;
  --sh-1:0 1px 2px rgba(0,0,0,.4);
  --sh-2:0 8px 20px -8px rgba(0,0,0,.55);
  --sh-3:0 24px 50px -12px rgba(0,0,0,.7);
}}
:root[data-theme="dark"]{
  --bg:#0a0f1a; --bg-grad-1:#0c1424; --bg-grad-2:#0a0f1a;
  --surface:#131c2b; --surface-2:#0f1826; --surface-3:#1b2637;
  --ink:#e8edf4; --ink-2:#9aa6b8; --ink-3:#6b7688;
  --line:#22304a; --line-2:#293954;
  --brand:#2dd4bf; --brand-2:#14b8a6; --brand-3:#0d9488;
  --brand-ink:#04211d; --brand-weak:#123330; --brand-weak-ink:#5eead4;
  --brand-glow:rgba(45,212,191,.22);
  --gold:#fbbf24; --gold-weak:#2a2410;
  --danger:#fb7185; --danger-weak:#3a1622;
  --warn:#fbbf24; --warn-weak:#33260f;
  --ok:#34d399; --ok-weak:#0f2c25;
  --info:#60a5fa; --info-weak:#122036;
  --sh-1:0 1px 2px rgba(0,0,0,.4);
  --sh-2:0 8px 20px -8px rgba(0,0,0,.55);
  --sh-3:0 24px 50px -12px rgba(0,0,0,.7);
}

*{box-sizing:border-box}
html,body{margin:0}
body{
  font-family:"Segoe UI",system-ui,-apple-system,Roboto,"Helvetica Neue",sans-serif;
  color:var(--ink);
  background:
    radial-gradient(120% 60% at 50% -10%, var(--bg-grad-1), transparent 60%),
    var(--bg-grad-2);
  background-attachment:fixed;
  -webkit-tap-highlight-color:transparent; -webkit-font-smoothing:antialiased;
  line-height:1.5;
}
/* Khung app — mobile: cột 520px; desktop: sidebar + nội dung (xem @media dưới) */
#app,.app-shell{max-width:520px;margin:0 auto;min-height:100dvh;position:relative;background:var(--bg)}
@media (min-width:541px) and (max-width:919px){ #app{box-shadow:0 0 0 1px var(--line), var(--sh-3)} }
.sidebar{display:none}                 /* ẩn trên mobile */
.only-mobile{display:flex}
#btnAddVehicle2{display:none}           /* nút thêm xe ở section-head chỉ dùng desktop */
main{padding:18px 16px calc(var(--tab-h) + 22px)}
.ocr-grid{display:block}
h2{font-size:19px;font-weight:800;letter-spacing:-.01em;margin:2px 0 14px}
h3{margin:0}
.muted{color:var(--ink-2);font-size:13px;line-height:1.55}
.hidden{display:none!important}
a{color:var(--brand-2)}
::selection{background:var(--brand-weak);color:var(--brand-weak-ink)}

/* ── Topbar ───────────────────────────────────────────────────────────────── */
.topbar{
  position:sticky;top:0;z-index:15;padding:14px 16px 15px;color:#fff;
  background:
    radial-gradient(120% 130% at 85% -20%, rgba(255,255,255,.18), transparent 55%),
    linear-gradient(135deg,var(--brand-2),var(--brand-3) 88%);
  border-radius:0 0 var(--r-lg) var(--r-lg);
  box-shadow:var(--sh-2);
}
.topbar .row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.brand{display:flex;align-items:center;gap:9px;font-weight:800;font-size:17px;letter-spacing:-.01em}
.brand .logo{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;
  background:rgba(255,255,255,.16);backdrop-filter:blur(6px)}
.brand .logo svg{width:19px;height:19px}
.topbar .tools{display:flex;align-items:center;gap:8px}
.icon-btn{width:36px;height:36px;border:0;border-radius:var(--r-full);cursor:pointer;
  display:grid;place-items:center;color:#fff;background:rgba(255,255,255,.14);
  transition:background .15s,transform .1s}
.icon-btn:active{transform:scale(.92)}
.icon-btn svg{width:19px;height:19px}
.crown{border:0;border-radius:var(--r-full);padding:8px 14px;font-size:13px;font-weight:800;
  cursor:pointer;color:var(--gold-ink);display:flex;align-items:center;gap:6px;
  background:linear-gradient(135deg,#fde68a,var(--gold));box-shadow:0 4px 12px rgba(245,158,11,.45)}
.crown:active{transform:scale(.95)}
.crown svg{width:15px;height:15px}
.greeting{margin-top:12px;font-size:13.5px;color:rgba(255,255,255,.9)}
.greeting b{font-weight:800}
.banner{margin-top:11px;background:rgba(255,255,255,.16);backdrop-filter:blur(6px);
  padding:9px 13px;border-radius:var(--r-sm);font-size:13px;font-weight:500;
  border:1px solid rgba(255,255,255,.18)}

/* ── Tabs (nội dung) ──────────────────────────────────────────────────────── */
.tab{display:none;animation:fade .3s var(--ease)}
.tab.active{display:block}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.section-head h2{margin:0}

/* ── Cards & list ─────────────────────────────────────────────────────────── */
.list{display:flex;flex-direction:column;gap:12px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:16px;box-shadow:var(--sh-1);transition:transform .12s var(--ease),box-shadow .2s}
.card:active{transform:scale(.995)}
.card h3{font-size:15.5px;font-weight:700;letter-spacing:-.01em}
.card .sub{color:var(--ink-2);font-size:13px;margin-top:3px}
.row{display:flex;gap:10px;align-items:center;justify-content:space-between}

/* Thẻ nhắc hạn có icon + vạch màu theo độ khẩn */
.dl-card{display:flex;gap:13px;align-items:flex-start;position:relative;overflow:hidden}
.dl-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--u-color,var(--brand))}
.dl-ic{flex:0 0 auto;width:44px;height:44px;border-radius:13px;display:grid;place-items:center;
  background:var(--u-weak,var(--brand-weak));color:var(--u-color,var(--brand))}
.dl-ic svg{width:22px;height:22px}
.dl-main{flex:1;min-width:0}
.dl-main h3{font-size:15px}
.dl-actions{display:flex;gap:8px;margin-top:11px}

/* ── Pills ────────────────────────────────────────────────────────────────── */
.pill{display:inline-flex;align-items:center;gap:5px;padding:3px 11px;border-radius:var(--r-full);
  font-size:12px;font-weight:700;white-space:nowrap}
.pill.red{background:var(--danger-weak);color:var(--danger)}
.pill.amber{background:var(--warn-weak);color:var(--warn)}
.pill.green{background:var(--ok-weak);color:var(--ok)}
.pill.gray{background:var(--surface-3);color:var(--ink-2)}
.pill.brand{background:var(--brand-weak);color:var(--brand-weak-ink)}

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;
  background:linear-gradient(135deg,var(--brand),var(--brand-2));color:var(--brand-ink);
  border:0;border-radius:var(--r-sm);padding:13px 16px;font-size:15px;font-weight:700;
  cursor:pointer;margin-top:14px;box-shadow:var(--sh-brand);transition:transform .1s,filter .15s}
.btn:active{transform:translateY(1px) scale(.99);filter:brightness(.96)}
.btn svg{width:18px;height:18px}
.btn.ghost{background:var(--brand-weak);color:var(--brand-weak-ink);box-shadow:none}
.btn.soft{background:var(--surface-3);color:var(--ink);box-shadow:none}
.btn.small{width:auto;padding:8px 13px;font-size:13px;margin:0;border-radius:var(--r-full)}
.btn:disabled{opacity:.6;cursor:default}
.fab-row{display:flex;gap:10px}

/* ── Form fields ──────────────────────────────────────────────────────────── */
.field{display:block;margin:12px 0;font-size:12.5px;font-weight:600;color:var(--ink-2)}
.field select,.field input,.modal input,.modal select{
  display:block;width:100%;margin-top:6px;padding:12px 13px;font-size:15px;color:var(--ink);
  background:var(--surface);border:1.5px solid var(--line-2);border-radius:var(--r-sm);
  transition:border-color .15s,box-shadow .15s;font-family:inherit}
.field select:focus,.field input:focus,.modal input:focus,.modal select:focus{
  outline:0;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-glow)}
input[type=file].field{padding:10px;font-size:13px;color:var(--ink-2)}

/* ── Dashboard summary (tab Nhắc hạn) ─────────────────────────────────────── */
.hero-dl{position:relative;overflow:hidden;color:#fff;border-radius:var(--r-lg);padding:18px 18px 20px;
  margin-bottom:18px;box-shadow:var(--sh-2);
  background:radial-gradient(130% 130% at 90% 0%, rgba(255,255,255,.16), transparent 55%),
    linear-gradient(140deg,var(--brand),var(--brand-3))}
.hero-dl .lbl{font-size:12.5px;color:rgba(255,255,255,.85);font-weight:600}
.hero-dl .big{display:flex;align-items:baseline;gap:8px;margin-top:3px}
.hero-dl .big b{font-size:34px;font-weight:800;letter-spacing:-.02em;line-height:1}
.hero-dl .big span{font-size:14px;color:rgba(255,255,255,.9)}
.hero-dl .next{margin-top:14px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.2);
  backdrop-filter:blur(6px);border-radius:var(--r-sm);padding:11px 13px;font-size:13px}
.hero-dl .next b{font-weight:800}
.hero-stats{display:flex;gap:9px;margin-bottom:18px}
.stat{flex:1;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:13px;text-align:center;box-shadow:var(--sh-1)}
.stat b{display:block;font-size:22px;font-weight:800;letter-spacing:-.02em}
.stat small{color:var(--ink-2);font-size:11.5px;font-weight:600}
.stat.red b{color:var(--danger)} .stat.amber b{color:var(--warn)} .stat.green b{color:var(--ok)}

/* ── Empty state ──────────────────────────────────────────────────────────── */
.empty{text-align:center;padding:34px 20px;color:var(--ink-2)}
.empty svg{width:64px;height:64px;color:var(--brand);opacity:.85;margin-bottom:12px}
.empty h3{font-size:16px;color:var(--ink);margin-bottom:6px}
.empty p{font-size:13.5px;max-width:280px;margin:0 auto}

/* ── OCR result ───────────────────────────────────────────────────────────── */
.ocr-result{margin-top:16px}
.kv{display:flex;justify-content:space-between;gap:12px;padding:10px 0;
  border-bottom:1px solid var(--line);font-size:14px}
.kv:last-child{border-bottom:0}
.kv b{font-weight:700;text-align:right}
.hint-card{display:flex;gap:11px;align-items:center;background:var(--brand-weak);
  color:var(--brand-weak-ink);border-radius:var(--r-sm);padding:11px 13px;font-size:12.5px;margin-top:12px}
.hint-card svg{width:20px;height:20px;flex:0 0 auto}

/* ── Chat ─────────────────────────────────────────────────────────────────── */
.chat-log{display:flex;flex-direction:column;gap:11px;min-height:46vh;margin-bottom:10px}
.msg{max-width:84%;padding:11px 14px;font-size:14px;line-height:1.55;white-space:pre-wrap;
  border-radius:18px;box-shadow:var(--sh-1);animation:pop .22s var(--ease)}
@keyframes pop{from{opacity:0;transform:translateY(6px) scale(.98)}to{opacity:1;transform:none}}
.msg.user{align-self:flex-end;background:linear-gradient(135deg,var(--brand),var(--brand-2));
  color:var(--brand-ink);border-bottom-right-radius:6px}
.msg.bot{align-self:flex-start;background:var(--surface);border:1px solid var(--line);
  border-bottom-left-radius:6px}
.msg .tag{display:inline-block;font-size:10.5px;font-weight:800;letter-spacing:.03em;
  text-transform:uppercase;opacity:.75;margin-bottom:4px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px}
.chip{border:1px solid var(--line-2);background:var(--surface);color:var(--ink);
  border-radius:var(--r-full);padding:8px 13px;font-size:12.5px;font-weight:600;cursor:pointer;
  transition:background .15s,border-color .15s}
.chip:active{background:var(--brand-weak);border-color:var(--brand)}
.chat-input{position:sticky;bottom:calc(var(--tab-h) + 8px);display:flex;gap:9px;
  padding:9px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-full);
  box-shadow:var(--sh-2)}
.chat-input input{flex:1;border:0;background:none;padding:6px 10px;font-size:15px;color:var(--ink);outline:0}
.chat-input .btn{width:44px;height:44px;padding:0;margin:0;border-radius:var(--r-full);flex:0 0 auto}

/* ── Fuel ─────────────────────────────────────────────────────────────────── */
.forecast{background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--brand);
  border-radius:var(--r);padding:15px;margin-bottom:16px;box-shadow:var(--sh-1)}
.forecast.up{border-left-color:var(--danger)}
.forecast.down{border-left-color:var(--ok)}
.forecast .fhead{display:flex;align-items:center;gap:8px;font-weight:800;font-size:15px;margin-bottom:6px}
.forecast .fhead .dir{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;flex:0 0 auto}
.forecast.up .dir{background:var(--danger-weak);color:var(--danger)}
.forecast.down .dir{background:var(--ok-weak);color:var(--ok)}
.forecast .dir svg{width:16px;height:16px}
.fuel-card{display:flex;align-items:center;justify-content:space-between;padding:15px 16px}
.fuel-card .fl{display:flex;align-items:center;gap:11px;font-weight:600}
.fuel-card .fi{width:38px;height:38px;border-radius:11px;background:var(--brand-weak);color:var(--brand);
  display:grid;place-items:center}
.fuel-card .fi svg{width:20px;height:20px}
.fuel-card .price{font-weight:800;font-size:16px;display:flex;align-items:center;gap:8px}

/* ── Biểu đồ phân tích giá xăng ───────────────────────────────────────────── */
.fuel-chart{margin-bottom:16px}
.viz{--c-s1:#2a78d6;--c-s2:#1baf7a;--c-s3:#eda100;--c-s4:#008300;--c-grid:var(--line);--c-axis:var(--ink-3)}
:root[data-theme="dark"] .viz{--c-s1:#3987e5;--c-s2:#199e70;--c-s3:#c98500;--c-s4:#008300}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .viz{--c-s1:#3987e5;--c-s2:#199e70;--c-s3:#c98500;--c-s4:#008300} }
.chart-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.chart-head h3{font-size:15px;font-weight:800}
.legend{display:flex;gap:12px;flex-wrap:wrap}
.legend span{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:var(--ink-2)}
.legend i{width:11px;height:11px;border-radius:3px;flex:0 0 auto}
.chart-wrap{position:relative}
.viz svg{width:100%;height:auto;display:block;overflow:visible}
.viz .grid{stroke:var(--c-grid);stroke-width:1}
.viz .axis-lbl{fill:var(--c-axis);font-size:9.5px;font-weight:600;font-variant-numeric:tabular-nums}
.viz .s-lbl{font-size:10px;font-weight:800}
.viz .dot{stroke:var(--surface);stroke-width:2}
.viz .fdot{fill:var(--surface);stroke-width:2}
.viz-crosshair{stroke:var(--ink-3);stroke-width:1;stroke-dasharray:3 3;opacity:0;pointer-events:none}
.viz-hit{fill:transparent;cursor:crosshair}
.viz-tip{position:absolute;pointer-events:none;opacity:0;transform:translate(-50%,-108%);
  background:var(--ink);color:var(--surface);padding:7px 10px;border-radius:10px;font-size:11.5px;
  font-weight:600;white-space:nowrap;box-shadow:var(--sh-2);transition:opacity .12s;z-index:3;line-height:1.5}
.viz-tip .tt-d{opacity:.7;font-weight:700;font-size:10.5px;margin-bottom:2px}
.viz-tip b{font-variant-numeric:tabular-nums}
.analysis{display:flex;flex-direction:column;gap:8px;margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.analysis .arow{display:flex;align-items:center;gap:9px;font-size:13px}
.analysis .arow .ai{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;flex:0 0 auto}
.analysis .arow .ai svg{width:16px;height:16px}
.analysis .arow b{font-weight:800}

/* ── Bottom tabbar ────────────────────────────────────────────────────────── */
.tabbar{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:520px;
  height:var(--tab-h);display:flex;z-index:15;padding:6px 8px calc(6px + env(safe-area-inset-bottom));
  background:color-mix(in srgb, var(--surface) 86%, transparent);
  backdrop-filter:blur(14px) saturate(1.4);border-top:1px solid var(--line)}
.tabbar button{flex:1;border:0;background:none;cursor:pointer;color:var(--ink-3);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  font-size:10.5px;font-weight:700;border-radius:14px;transition:color .18s,background .18s}
.tabbar button svg{width:23px;height:23px;transition:transform .2s var(--ease)}
.tabbar button.active{color:var(--brand)}
.tabbar button.active svg{transform:translateY(-2px)}
.tabbar button.active{background:var(--brand-weak)}

/* ── Modal (bottom sheet) ─────────────────────────────────────────────────── */
.modal{position:fixed;inset:0;z-index:30;display:flex;align-items:flex-end;
  background:rgba(8,12,20,.5);backdrop-filter:blur(2px);animation:fade .2s}
.modal-body{background:var(--surface);width:100%;max-width:520px;margin:0 auto;
  border-radius:var(--r-lg) var(--r-lg) 0 0;padding:22px 18px calc(20px + env(safe-area-inset-bottom));
  max-height:90vh;overflow:auto;box-shadow:var(--sh-3);animation:sheet .3s var(--ease)}
@keyframes sheet{from{transform:translateY(100%)}to{transform:none}}
.modal-body::before{content:"";display:block;width:40px;height:4px;border-radius:99px;
  background:var(--line-2);margin:-6px auto 14px}
.modal-body h2{margin-top:0}

.spin{display:inline-block;width:16px;height:16px;border:2px solid rgba(255,255,255,.35);
  border-top-color:#fff;border-radius:50%;animation:sp .7s linear infinite;vertical-align:-3px}
.btn.ghost .spin,.btn.soft .spin{border-color:var(--line-2);border-top-color:var(--brand)}
@keyframes sp{to{transform:rotate(360deg)}}

/* ── VIP Pro ──────────────────────────────────────────────────────────────── */
.vip{position:fixed;inset:0;z-index:40;overflow-y:auto;max-width:520px;margin:0 auto;
  background:var(--bg);animation:vipin .3s var(--ease)}
@keyframes vipin{from{transform:translateY(18px);opacity:0}to{transform:none;opacity:1}}
.vip-close{position:sticky;top:12px;float:right;margin:12px 14px 0 0;z-index:2;width:38px;height:38px;
  border-radius:50%;border:0;background:var(--surface);color:var(--ink);font-size:17px;cursor:pointer;
  box-shadow:var(--sh-2)}
.vip-hero{color:#fff;padding:40px 22px 34px;text-align:center;border-radius:0 0 28px 28px;
  background:radial-gradient(130% 120% at 50% -5%, #14b8a6 0%, #0d5f57 52%, #062a27 100%)}
.vip-badge{display:inline-flex;align-items:center;gap:6px;background:linear-gradient(135deg,#fde68a,var(--gold));
  color:var(--gold-ink);font-weight:800;font-size:12px;letter-spacing:.08em;
  padding:6px 15px;border-radius:var(--r-full);margin-bottom:16px;box-shadow:0 6px 16px rgba(245,158,11,.4)}
.vip-badge svg{width:15px;height:15px}
.vip-hero h1{font-size:27px;line-height:1.22;margin:0 0 9px;font-weight:800;letter-spacing:-.02em}
.vip-sub{color:#9ff0dd;font-size:14.5px;margin:0}
.vip-status{margin-top:16px;background:rgba(251,191,36,.16);border:1px solid rgba(251,191,36,.42);
  color:#fde68a;font-size:13px;font-weight:600;padding:9px 14px;border-radius:var(--r-sm);display:inline-block}

.vip-plans{display:flex;flex-direction:column;gap:12px;padding:22px 16px 6px}
.plan{position:relative;background:var(--surface);border:2px solid var(--line);border-radius:var(--r);
  padding:16px;cursor:pointer;transition:border-color .16s,box-shadow .16s,transform .1s}
.plan:active{transform:scale(.99)}
.plan.sel{border-color:var(--gold);box-shadow:0 10px 26px -10px rgba(245,158,11,.5)}
.plan .row{align-items:center}
.plan-l{display:flex;align-items:center;gap:12px;min-width:0}
.plan-name{font-weight:800;font-size:16px}
.plan-desc{color:var(--ink-2);font-size:12.5px;margin-top:2px}
.plan-price{font-weight:800;font-size:21px;text-align:right;white-space:nowrap;letter-spacing:-.01em}
.plan-price small{display:block;font-size:11px;color:var(--ink-2);font-weight:600}
.plan-old{color:var(--ink-3);text-decoration:line-through;font-size:12px;font-weight:600;margin-right:2px}
.plan-tag{position:absolute;top:-11px;right:16px;background:linear-gradient(135deg,#fde68a,var(--gold));
  color:var(--gold-ink);font-size:10.5px;font-weight:800;letter-spacing:.03em;padding:4px 11px;border-radius:var(--r-full);
  box-shadow:0 4px 10px rgba(245,158,11,.4)}
.plan .radio{width:22px;height:22px;border-radius:50%;border:2px solid var(--line-2);flex:0 0 auto;position:relative}
.plan.sel .radio{border-color:var(--gold)}
.plan.sel .radio::after{content:"";position:absolute;inset:4px;border-radius:50%;
  background:linear-gradient(135deg,var(--gold),var(--gold-2))}

.vip-compare{padding:24px 16px 6px}
.vip-compare h2{font-size:17px;margin:0 0 13px}
.cmp{width:100%;border-collapse:separate;border-spacing:0;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;font-size:13.5px;box-shadow:var(--sh-1)}
.cmp th,.cmp td{padding:12px;text-align:left;border-bottom:1px solid var(--line)}
.cmp th{background:var(--surface-2);font-size:12px;color:var(--ink-2);font-weight:800}
.cmp th.pro,.cmp td.pro{background:var(--gold-weak);color:var(--brand-3);font-weight:800;text-align:center}
:root[data-theme="dark"] .cmp td.pro,@media(prefers-color-scheme:dark){.cmp td.pro{color:var(--brand)}}
.cmp td:nth-child(2){text-align:center;color:var(--ink-2)}
.cmp tr:last-child td{border-bottom:0}
.cmp .ok{color:var(--ok);font-weight:800}
.cmp .no{color:var(--ink-3)}

.vip-faq{padding:22px 16px 6px;display:flex;flex-direction:column;gap:9px}
.vip-faq details{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:13px 15px;box-shadow:var(--sh-1)}
.vip-faq summary{font-weight:700;font-size:14px;cursor:pointer;list-style:none;display:flex;
  justify-content:space-between;align-items:center}
.vip-faq summary::-webkit-details-marker{display:none}
.vip-faq summary::after{content:"+";color:var(--brand);font-size:20px;font-weight:400;line-height:1}
.vip-faq details[open] summary::after{content:"–"}
.vip-faq p{margin:9px 0 0;color:var(--ink-2);font-size:13px;line-height:1.55}

.vip-footer{position:sticky;bottom:0;padding:16px calc(16px) calc(18px + env(safe-area-inset-bottom));
  background:linear-gradient(to top,var(--bg) 68%,transparent)}
.vip-buy{background:linear-gradient(135deg,var(--gold),var(--gold-2));color:#fff;margin:0;font-size:16px;
  box-shadow:0 10px 24px -8px rgba(217,119,6,.55)}
.vip-fine{text-align:center;color:var(--ink-2);font-size:11px;margin:11px 0 0;line-height:1.55}
body.vip-open{overflow:hidden}

/* ── Hồ sơ ở sidebar (desktop) ────────────────────────────────────────────── */
.s-profile{display:flex;align-items:center;gap:11px;width:100%;border:0;background:none;cursor:pointer;
  padding:10px;border-radius:13px;color:var(--ink);transition:background .15s;text-align:left}
.s-profile:hover{background:var(--surface-3)}
.s-profile .avatar{width:34px;height:34px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;
  background:var(--brand-weak);color:var(--brand);font-weight:800;font-size:14px;overflow:hidden}
.s-profile .avatar svg{width:19px;height:19px}
.s-pname{font-weight:700;font-size:14px}
.s-foot-btns{display:flex;flex-direction:column;gap:10px;margin-top:6px}

/* ── Màn tài khoản / thành viên ───────────────────────────────────────────── */
.acc{position:fixed;inset:0;z-index:40;overflow-y:auto;max-width:520px;margin:0 auto;
  background:var(--bg);animation:vipin .3s var(--ease)}
.acc-hero{position:relative;color:#fff;padding:46px 22px 26px;text-align:center;border-radius:0 0 28px 28px;
  background:radial-gradient(130% 120% at 50% -10%, var(--brand), var(--brand-3) 72%)}
.acc-close{position:absolute;top:14px;right:14px;width:36px;height:36px;border-radius:50%;border:0;
  background:rgba(255,255,255,.18);color:#fff;font-size:16px;cursor:pointer}
.acc-avatar{width:78px;height:78px;border-radius:50%;margin:0 auto 12px;display:grid;place-items:center;
  font-size:30px;font-weight:800;color:var(--brand-3);background:#fff;box-shadow:var(--sh-2)}
.acc-name{font-size:20px;font-weight:800;letter-spacing:-.01em}
.acc-email{font-size:13px;color:rgba(255,255,255,.85);margin-top:3px;min-height:16px}
.acc-badge{display:inline-block;margin-top:13px;padding:5px 15px;border-radius:999px;font-size:12px;font-weight:800;
  letter-spacing:.03em;background:rgba(255,255,255,.2)}
.acc-badge.vip{background:linear-gradient(135deg,#fde68a,var(--gold));color:var(--gold-ink);box-shadow:0 4px 12px rgba(245,158,11,.4)}
.acc-body{padding:18px 16px calc(26px + env(safe-area-inset-bottom))}

.acc-mem{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.acc-mem .m-ic{width:46px;height:46px;border-radius:13px;flex:0 0 auto;display:grid;place-items:center}
.acc-mem .m-ic svg{width:24px;height:24px}
.acc-mem.free .m-ic{background:var(--surface-3);color:var(--ink-2)}
.acc-mem.vip .m-ic{background:var(--gold-weak);color:var(--gold-2)}
.acc-mem .m-main{flex:1;min-width:0}
.acc-mem .m-main h3{font-size:15px;font-weight:800}
.acc-mem .m-main .m-sub{font-size:12.5px;color:var(--ink-2);margin-top:2px}

.acc-sec{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:2px 16px;margin-bottom:14px;box-shadow:var(--sh-1)}
.acc-sec > h3{font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-3);
  font-weight:800;margin:13px 2px 2px}
.acc-row{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;
  padding:14px 2px;border:0;background:none;font-size:14.5px;color:var(--ink);cursor:pointer;
  border-top:1px solid var(--line);text-align:left;text-decoration:none;font-family:inherit}
.acc-sec > .acc-row:first-of-type,.acc-sec > h3 + .acc-row{border-top:0}
.acc-row em{color:var(--ink-3);font-style:normal;font-size:19px;line-height:1}
.acc-row b{font-weight:700;color:var(--ink-2)}

.sw{position:relative;width:46px;height:27px;flex:0 0 auto}
.sw input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer;z-index:2}
.sw i{position:absolute;inset:0;border-radius:999px;background:var(--line-2);transition:background .2s}
.sw i::after{content:"";position:absolute;top:3px;left:3px;width:21px;height:21px;border-radius:50%;
  background:#fff;transition:transform .2s;box-shadow:0 1px 3px rgba(0,0,0,.3)}
.sw input:checked + i{background:var(--brand)}
.sw input:checked + i::after{transform:translateX(19px)}

.acc-actions{border:0;background:none;box-shadow:none;padding:0;display:flex;flex-direction:column;gap:10px}
.acc-actions .btn{margin:0}
.acc-del{width:100%;padding:13px;border:1.5px solid var(--danger);background:none;color:var(--danger);
  border-radius:var(--r-sm);font-weight:700;font-size:15px;cursor:pointer;font-family:inherit}
.acc-del:active{background:var(--danger-weak)}
body.acc-open{overflow:hidden}

/* ══════════════════════════════════════════════════════════════════════════
   DESKTOP (≥ 920px): sidebar dọc + nội dung rộng, lưới 2 cột
   ══════════════════════════════════════════════════════════════════════════ */
@media (min-width:920px){
  body{background-attachment:fixed}
  #app,.app-shell{max-width:1180px;min-height:auto;margin:26px auto;
    display:grid;grid-template-columns:252px minmax(0,1fr);
    background:var(--surface);border:1px solid var(--line);border-radius:26px;
    overflow:hidden;box-shadow:var(--sh-3);min-height:calc(100dvh - 52px)}

  /* Sidebar */
  .sidebar{display:flex;flex-direction:column;gap:6px;padding:22px 16px;
    background:var(--surface-2);border-right:1px solid var(--line)}
  .s-brand{display:flex;align-items:center;gap:11px;padding:6px 10px 18px;font-weight:800;font-size:16.5px;letter-spacing:-.01em}
  .s-brand .logo{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;
    color:#fff;background:linear-gradient(135deg,var(--brand),var(--brand-3));box-shadow:var(--sh-brand)}
  .s-brand .logo svg{width:22px;height:22px}
  .side-nav{display:flex;flex-direction:column;gap:4px;flex:1}
  .navitem{display:flex;align-items:center;gap:13px;width:100%;border:0;cursor:pointer;
    background:none;color:var(--ink-2);font-size:14.5px;font-weight:700;text-align:left;
    padding:12px 13px;border-radius:13px;transition:background .16s,color .16s}
  .navitem svg{width:21px;height:21px;flex:0 0 auto}
  .navitem:hover{background:var(--surface-3);color:var(--ink)}
  .navitem.active{background:var(--brand-weak);color:var(--brand-weak-ink)}
  .s-foot{display:flex;flex-direction:column;gap:10px;padding-top:14px;border-top:1px solid var(--line)}
  .s-foot .icon-btn{background:var(--surface-3);color:var(--ink);width:100%;height:42px;border-radius:13px}
  .s-foot .crown{width:100%;justify-content:center;padding:12px}

  /* Content */
  .tabbar{display:none}
  .bar-mobile{display:none}
  .content{display:flex;flex-direction:column;min-width:0}
  .topbar{position:sticky;top:0;background:color-mix(in srgb,var(--surface) 88%,transparent);
    backdrop-filter:blur(12px);color:var(--ink);border-radius:0;box-shadow:none;
    border-bottom:1px solid var(--line);padding:20px 34px 16px;z-index:8}
  .greeting{margin-top:0;color:var(--ink-2);font-size:15px}
  .banner{background:var(--brand-weak);color:var(--brand-weak-ink);border:1px solid var(--line)}
  main{padding:24px 34px 44px;max-width:980px;width:100%;margin:0 auto}
  h2{font-size:21px}

  /* Lưới 2 cột cho các danh sách thẻ */
  #deadlineList,#vehicleList,#fuelPrices{display:grid;grid-template-columns:1fr 1fr;gap:14px}
  .empty{grid-column:1/-1}
  #btnAddVehicle2{display:inline-flex}
  .only-mobile{display:none}
  .btn.only-mobile{display:none}

  /* Hero + stats cân đối trên desktop */
  .hero-dl{padding:24px 26px}
  .hero-dl .big b{font-size:40px}

  /* OCR: form trái + kết quả phải */
  .ocr-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start;margin-top:14px}
  .ocr-result{margin-top:0}

  /* Chat gọn giữa, thanh nhập bám đáy content */
  #tab-chat{max-width:760px;margin:0 auto}
  .chat-log{min-height:52vh}
  .chat-input{bottom:16px}

  /* Modal → hộp thoại căn giữa */
  .modal{align-items:center;padding:20px}
  .modal-body{max-width:460px;margin:auto;border-radius:var(--r-lg);
    padding:24px 22px;max-height:86vh;animation:pop .2s var(--ease)}
  .modal-body::before{display:none}

  /* VIP + Tài khoản → panel căn giữa + nền mờ xung quanh */
  .vip,.acc{max-width:640px;margin:0 auto;border-radius:0;
    box-shadow:0 0 0 100vmax rgba(3,8,14,.62)}
  .vip-hero{border-radius:0}
  .acc-hero{border-radius:0 0 28px 28px}
}

/* Màn rất rộng: giới hạn khung, canh giữa đẹp hơn */
@media (min-width:1240px){ #app,.app-shell{margin:34px auto} }