/* ===== Auto98SG - Toy Car Garage Theme ===== */

:root{
  --toy-red:#ff3b3b;
  --toy-orange:#ff8a00;
  --toy-yellow:#ffc300;
  --toy-green:#20c997;
  --toy-blue:#3a86ff;
  --toy-purple:#8b5cf6;
  --toy-navy:#1b1f3b;
  --toy-navy2:#2b2f57;
  --toy-bg:#eef2fb;
  --toy-ink:#20244a;
  --toy-muted:#7b82a8;
  --shadow-sm:0 6px 16px rgba(27,31,59,.07);
  --shadow-md:0 14px 34px rgba(27,31,59,.12);
  --radius:1.15rem;

  /* ===== theme tokens ===== */
  --brand-a:var(--toy-navy);
  --brand-b:var(--toy-navy2);
  --nav-underline:repeating-linear-gradient(90deg,var(--toy-red) 0 28px,var(--toy-yellow) 28px 56px,var(--toy-blue) 56px 84px,var(--toy-green) 84px 112px);
  --nav-active:linear-gradient(135deg,var(--toy-blue),var(--toy-purple));
  --nav-active-glow:rgba(58,134,255,.45);
  --btn-grad:linear-gradient(135deg,var(--toy-red),var(--toy-orange));
  --btn-glow:rgba(255,59,59,.35);
  --btn-glow-h:rgba(255,59,59,.45);
  --link-a:var(--toy-blue);
  --link-b:var(--toy-purple);
  --pageicon:linear-gradient(135deg,var(--toy-blue),var(--toy-purple));
  --pageicon-glow:rgba(58,134,255,.35);
  --avatar:linear-gradient(135deg,var(--toy-green),var(--toy-blue));
  /* bien neon thanh pho (an theo giao dien) */
  --sign-line:var(--link-a);
  --sign-glow:var(--pageicon-glow);
  --sign-text:#ffffff;
  /* mau thanh pho nen (blend theo giao dien) */
  --city-tint-1:#4a76d6;
  --city-tint-2:#8b5cf6;
  --thead-bg:#f7f9ff;
  --thead-ink:var(--toy-navy);
  --thead-border:#e6ebfa;
  --row-hover:#fff7ee;
  --card-bg:#fff;
  --card-head-bg:#fff;
  --card-sep:#e5e9f5;
  --card-border:rgba(27,31,59,.05);
  --form-border:#e3e8f7;
  --form-focus:var(--toy-blue);
  --form-focus-glow:rgba(58,134,255,.15);
  --form-bg:#fff;
  --form-ink:inherit;
  --label-ink:var(--toy-navy);
  --outline-ink:var(--toy-navy);
  --footer-border:#e0e6f6;
  --float-ink:#1b1f3b;
  --geo-line:rgba(27,31,59,.05);
  --geo-line-dark:rgba(255,255,255,.06);
  --road-strip:repeating-linear-gradient(90deg,rgba(255,59,59,.28) 0 30px,rgba(255,195,0,.28) 30px 60px);
  --login-bg:linear-gradient(135deg,#1b1f3b,#2b2f57 55%,#3a2f5a);
  --hero-bg:linear-gradient(160deg,#1b1f3b 0%,#2b2f57 48%,#3a2f5a 100%);
  --hero-th-b:radial-gradient(120% 95% at 88% 100%,rgba(28,150,120,.45) 0%,transparent 55%),linear-gradient(160deg,#12394a 0%,#14566b 50%,#1f3552 100%);
  --hero-th-c:radial-gradient(120% 95% at 88% 100%,rgba(196,52,80,.42) 0%,transparent 55%),linear-gradient(160deg,#2a1220 0%,#501a2f 50%,#312a52 100%);
  --hero-th-d:radial-gradient(120% 95% at 88% 100%,rgba(86,120,176,.35) 0%,transparent 55%),linear-gradient(160deg,#0f1422 0%,#1c2540 50%,#2a3356 100%);
  --car-f-b:hue-rotate(150deg) saturate(1.25) brightness(1.02);
  --car-f-c:hue-rotate(315deg) saturate(1.4) brightness(1.05);
  --car-f-d:saturate(.7) brightness(.9);
}

*{box-sizing:border-box}
html{
  background:
    radial-gradient(1200px 500px at 10% -10%, #fff6e6 0%, transparent 55%),
    radial-gradient(1000px 500px at 100% 0%, #e6f0ff 0%, transparent 50%),
    var(--toy-bg);
  background-attachment:fixed;
}
body{
  font-family:'Nunito',system-ui,sans-serif;
  color:var(--toy-ink);
  background:transparent;
  min-height:100vh;
}
h1,h2,h3,h4,h5,.navbar-brand,.brand-text,.fs-3{
  font-family:'Baloo 2',cursive;
  letter-spacing:.2px;
}

/* ---------- Navbar ---------- */
.app-navbar{
  background:linear-gradient(120deg,var(--brand-a) 0%, var(--brand-b) 100%);
  box-shadow:var(--shadow-md);
  padding-top:.55rem;padding-bottom:.55rem;
}
.app-navbar::after{
  content:"";display:block;position:absolute;left:0;right:0;bottom:0;height:4px;
  background:var(--nav-underline);
}
.navbar-brand{display:flex;align-items:center;gap:.6rem;color:#fff!important;font-weight:800;font-size:1.3rem}
.brand-badge{
  flex:0 0 auto;
  display:grid;place-items:center;background:transparent;
  transition:transform .25s;
}
.navbar-brand:hover .brand-badge{transform:translateY(-2px) rotate(-3deg)}
.brand-logo{display:block;width:auto;max-width:100%;object-fit:contain}
.brand-text{display:flex;flex-direction:column;line-height:1}
.brand-text small{font-size:.62rem;letter-spacing:1px;color:var(--toy-yellow);font-family:'Nunito';font-weight:700;white-space:nowrap}
.app-navbar .nav-link{
  color:rgba(255,255,255,.82)!important;font-weight:700;border-radius:999px;
  padding:.45rem .95rem!important;margin:.15rem .1rem;transition:.2s;display:flex;align-items:center;gap:.4rem;
}
.app-navbar .nav-link > i{flex:0 0 auto;width:1.15rem;text-align:center;font-size:1.05rem;line-height:1;opacity:.95}
.app-navbar .nav-link:hover > i,.app-navbar .nav-link.active > i{opacity:1}
.app-navbar .nav-link:hover{background:rgba(255,255,255,.12);color:#fff!important;transform:translateY(-1px)}
.app-navbar .nav-link.active{
  color:#fff!important;
  background:var(--nav-active);
  box-shadow:0 8px 18px var(--nav-active-glow);
}
.user-chip{
  display:flex;align-items:center;gap:.5rem;color:#fff;font-weight:700;
  background:rgba(255,255,255,.12);border-radius:999px;padding:.35rem 1rem .35rem .35rem;
}
.user-chip .avatar{
  width:32px;height:32px;border-radius:50%;display:grid;place-items:center;
  background:var(--avatar);color:#fff;
}

/* ---------- Cards ---------- */
.card{border:0;border-radius:var(--radius);box-shadow:var(--shadow-sm);overflow:hidden;background:var(--card-bg)}
.stat-card{transition:.22s;border:1px solid var(--card-border)}
.stat-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.card-header{background:var(--card-head-bg)!important;border-bottom:2px dashed var(--card-sep);font-weight:800}

/* icon chip */
.icon-chip{
  width:58px;height:58px;border-radius:1rem;display:grid;place-items:center;
  font-size:1.7rem;color:#fff;flex:0 0 auto;
  box-shadow:inset 0 -4px 0 rgba(0,0,0,.14);
}
.ic-red{background:linear-gradient(135deg,#ff6b6b,var(--toy-red))}
.ic-blue{background:linear-gradient(135deg,#6aa8ff,var(--toy-blue))}
.ic-green{background:linear-gradient(135deg,#4fd6b0,var(--toy-green))}
.ic-yellow{background:linear-gradient(135deg,#ffd95e,var(--toy-yellow))}
.ic-orange{background:linear-gradient(135deg,#ffa94d,var(--toy-orange))}
.ic-purple{background:linear-gradient(135deg,#a78bfa,var(--toy-purple))}

.stat-value{font-family:'Baloo 2';font-weight:800;font-size:1.9rem;line-height:1}
.stat-label{color:var(--toy-muted);font-weight:700;font-size:.82rem;text-transform:uppercase;letter-spacing:.5px}

/* ---------- Buttons ---------- */
.btn{border-radius:999px;font-weight:800;padding:.5rem 1.1rem;transition:.18s}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--btn-grad);border:0;box-shadow:0 8px 18px var(--btn-glow)}
.btn-primary:hover{filter:brightness(1.06);box-shadow:0 10px 22px var(--btn-glow-h)}
.btn-outline-primary{color:var(--toy-red);border:2px solid var(--toy-red)}
.btn-outline-primary:hover{background:var(--toy-red);border-color:var(--toy-red)}
.btn-outline-secondary{color:var(--outline-ink);border:2px solid var(--card-sep)}
.btn-outline-secondary:hover{background:var(--brand-a);border-color:var(--brand-a);color:#fff}
.btn-outline-danger{border-width:2px}
.btn-sm{border-radius:999px}

/* ---------- Tables ---------- */
.table{--bs-table-bg:transparent}
.table thead th{
  background:var(--thead-bg)!important;color:var(--thead-ink);font-weight:800;
  text-transform:uppercase;font-size:.76rem;letter-spacing:.6px;border-bottom:2px solid var(--thead-border)!important;
}
.table-hover tbody tr:hover{background:var(--row-hover)}
.table td,.table th{vertical-align:middle}
a{color:var(--link-a);text-decoration:none;font-weight:700}
a:hover{color:var(--link-b)}

/* ---------- Forms ---------- */
.form-control,.form-select{border-radius:.85rem;border:2px solid var(--form-border);padding:.55rem .9rem;font-weight:600;background-color:var(--form-bg);color:var(--form-ink)}
.form-control:focus,.form-select:focus{border-color:var(--form-focus);box-shadow:0 0 0 .2rem var(--form-focus-glow)}
.form-control::placeholder{color:var(--toy-muted)}
.form-label{font-weight:800;color:var(--label-ink);font-size:.85rem}
.input-group-text{border-radius:.85rem}
.input-group-text.bg-white{background-color:var(--form-bg)!important;color:var(--form-ink)}
.text-muted{color:var(--toy-muted)!important}

/* ---------- Badges ---------- */
.badge{border-radius:999px;font-weight:800;padding:.4em .8em}
.badge-soft{font-weight:700}

/* ---------- Login ---------- */
.login-page{
  min-height:100vh;display:grid;place-items:center;padding:1rem;
  background:var(--login-bg);
  position:relative;overflow:hidden;
}
.login-page::before{
  content:"";position:absolute;inset:auto -10% -30px -10%;height:60%;
  background:
    repeating-linear-gradient(90deg,transparent 0 60px,rgba(255,255,255,.05) 60px 120px);
  transform:skewY(-6deg);
}
.login-card{
  width:100%;max-width:900px;border-radius:1.5rem;overflow:hidden;z-index:1;
  box-shadow:0 30px 70px rgba(0,0,0,.45);background:var(--card-bg);
}
.login-hero{
  background:var(--hero-bg)!important;
  color:#fff;padding:2.6rem 2rem;display:flex;flex-direction:column;justify-content:center;
  position:relative;overflow:hidden;
}
.login-hero .hero-content{position:relative;z-index:2}
.login-hero .hero-content h2 .hero-tagline{font-size:.55em;font-style:italic;font-weight:600;letter-spacing:.8px;opacity:.92}
.login-hero .hero-content .hero-sub{padding-left:76px}
.login-hero .geo-pattern{
  position:absolute;inset:0;z-index:0;opacity:.6;
  background-image:linear-gradient(rgba(255,255,255,.06)1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06)1px,transparent 1px);
  background-size:28px 28px;
  -webkit-mask-image:radial-gradient(circle at 50% 40%,#000 0%,transparent 80%);
          mask-image:radial-gradient(circle at 50% 40%,#000 0%,transparent 80%)
}
.login-hero .hero-lambo{
  position:absolute;right:-30px;bottom:0;z-index:1;pointer-events:none;
  width:100%;max-width:560px;filter:drop-shadow(0 18px 30px rgba(0,0,0,.35));
}
.login-hero .hero-lambo img{width:100%;height:auto;display:block;opacity:.55;transform:scaleX(-1);transition:filter 1.2s ease}
/* --- Login hero rotating background themes --- */
.login-hero .theme-bg{position:absolute;inset:0;z-index:0;opacity:0;transition:opacity 1.2s ease;pointer-events:none}
.login-hero .theme-bg.th-a{background:var(--hero-bg)}
.login-hero .theme-bg.th-b{background:var(--hero-th-b)}
.login-hero .theme-bg.th-c{background:var(--hero-th-c)}
.login-hero .theme-bg.th-d{background:var(--hero-th-d)}
.login-hero.th-a .theme-bg.th-a,
.login-hero.th-b .theme-bg.th-b,
.login-hero.th-c .theme-bg.th-c,
.login-hero.th-d .theme-bg.th-d{opacity:1}
.login-hero.th-b .hero-lambo img{filter:var(--car-f-b)}
.login-hero.th-c .hero-lambo img{filter:var(--car-f-c)}
.login-hero.th-d .hero-lambo img{filter:var(--car-f-d)}
.login-hero .hero-blossoms{position:absolute;inset:0;z-index:1}
.login-hero .hero-blossoms .blossom{color:rgba(255,255,255,.5);opacity:.22}
.login-hero .hero-blossoms .blossom.b-tr{top:6%;right:16%}
.login-hero .hero-blossoms .blossom.b-bl{bottom:12%;left:6%}
.login-hero h2{font-weight:800;font-size:2rem;position:relative;z-index:2}
.login-hero p{position:relative;z-index:2}
.login-hero .dots{position:absolute;right:-40px;top:-40px;width:180px;height:180px;border-radius:50%;background:rgba(255,255,255,.14);z-index:0}
.login-hero .dots.two{left:-30px;bottom:-50px;right:auto;top:auto;width:140px;height:140px;background:rgba(255,255,255,.1);z-index:0}
.login-form{padding:2.6rem 2.2rem}
.login-form .form-control{border-radius:.9rem}
.brand-badge-lg{
  display:grid;place-items:center;flex:0 0 auto;
  background:transparent;
}

/* ---------- Footer ---------- */
.app-footer{
  margin-top:2.5rem;padding:1.2rem;text-align:center;color:var(--toy-muted);font-weight:700;
  border-top:2px dashed var(--footer-border);
}
.app-footer .mini-car{color:var(--toy-red)}

/* ---------- misc ---------- */
.page-title{display:flex;align-items:center;gap:.6rem;font-weight:800}
.page-title .page-icon{
  width:44px;height:44px;border-radius:12px;display:grid;place-items:center;color:#fff;font-size:1.3rem;
  background:var(--pageicon);box-shadow:0 8px 16px var(--pageicon-glow);
}
.alert{border:0;border-radius:1rem;font-weight:700}
.alert-success{background:#e5fbf4;color:#0b7a5b}
.alert-danger{background:#ffe9e9;color:#b32121}
.empty-state{color:var(--toy-muted);font-weight:700}
@media(max-width:768px){.login-hero{display:none}}

/* ---------- Nen chuyen dong ---------- */
.bg-scene{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.login-page .bg-scene{position:absolute;z-index:0}
.bg-sky,.bg-floats,.bg-road,.bg-cars{position:absolute;inset:0}

/* may bay */
.cloud{position:absolute;left:0;width:120px;height:38px;border-radius:999px;
  background:rgba(255,255,255,.6);color:rgba(255,255,255,.6);
  box-shadow:34px -14px 0 -6px currentColor, -30px -10px 0 -8px currentColor;
  animation:cloud-drift linear infinite}
.cloud.c1{top:9%;animation-duration:75s}
.cloud.c2{top:24%;width:150px;height:46px;opacity:.5;animation-duration:100s;animation-delay:-35s}
.cloud.c3{top:4%;width:96px;height:30px;opacity:.42;animation-duration:120s;animation-delay:-75s}
@keyframes cloud-drift{from{transform:translateX(-35vw)}to{transform:translateX(125vw)}}

/* van luoi hinh hoc manh */
.geo-pattern{position:absolute;inset:0;pointer-events:none;opacity:.55;
  background-image:
    linear-gradient(var(--geo-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--geo-line) 1px, transparent 1px);
  background-size:30px 30px;
  -webkit-mask-image:radial-gradient(circle at 50% 40%, #000 0%, transparent 78%);
          mask-image:radial-gradient(circle at 50% 40%, #000 0%, transparent 78%)}

/* hoa line-art manh o cac goc */
.blossom{position:absolute;color:#8b93b8;opacity:.16;transform-origin:center}
.blossom .brand-flower{display:block}
.blossom.b-tr{top:5%;right:4%;animation:bloom-sway 16s ease-in-out infinite}
.blossom.b-bl{bottom:15%;left:3%;animation:bloom-sway 20s ease-in-out infinite .5s}
.blossom.b-mr{top:56%;right:9%;opacity:.12;animation:bloom-spin 30s linear infinite}
@keyframes bloom-sway{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(5deg)}}
@keyframes bloom-spin{to{transform:rotate(360deg)}}

/* vat the bay luon (mong, tinh te) */
.bg-floats span{position:absolute;display:grid;place-items:center;opacity:.14;color:var(--float-ink);font-size:2rem}
.bg-floats .f1{top:16%;right:8%;color:#8b93b8;font-size:2.4rem;animation:spin-slow 22s linear infinite}
.bg-floats .f2{top:32%;left:6%;color:#c9b27a;animation:bobble 6.5s ease-in-out infinite}
.bg-floats .f3{top:64%;right:12%;color:#8ea6d6;animation:bobble 8s ease-in-out infinite .5s}
.bg-floats .f6{top:22%;left:72%;color:#8fcbbf;font-size:1.4rem;animation:bobble 7s ease-in-out infinite .3s}
@keyframes spin-slow{to{transform:rotate(360deg)}}
@keyframes bobble{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@keyframes rock{0%,100%{transform:rotate(-12deg)}50%{transform:rotate(12deg)}}

/* -------- Mat duong pho that (asphalt) -------- */
.bg-road{top:auto;bottom:0;height:88px;
  background:linear-gradient(180deg,#3c414a 0%,#272b31 55%,#121417 100%)}
.bg-road::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.4;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='0.7'/></svg>")}
.bg-road::after{content:"";position:absolute;left:0;right:0;top:0;height:2px;pointer-events:none;
  background:linear-gradient(90deg,rgba(255,255,255,.4),rgba(255,255,255,.12) 75%,transparent)}
.bg-road-line{position:absolute;left:-50px;right:-50px;top:46%;height:4px;border-radius:4px;pointer-events:none;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.45) 0 24px,transparent 24px 64px);
  animation:road-move 2.6s linear infinite}
@keyframes road-move{from{transform:translateX(0)}to{transform:translateX(-64px)}}

/* -------- Duong pho: thanh pho silhouette truot ngang -------- */
.bg-city{position:absolute;left:0;right:0;bottom:88px;height:150px;overflow:hidden;pointer-events:none;
  opacity:.92;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 6%,#000 100%);
          mask-image:linear-gradient(180deg,transparent 0,#000 6%,#000 100%)}
.city-layer{position:absolute;left:0;bottom:0;height:100%;width:200%;
  background-image:linear-gradient(180deg,var(--city-tint-1),var(--city-tint-2)),url("img/city.svg");
  background-size:100% 100%,50% 100%;
  background-repeat:no-repeat,repeat-x;
  background-position:left bottom,left bottom;
  background-blend-mode:color;
  animation:city-move 90s linear infinite;will-change:transform}
@keyframes city-move{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* -------- Bien neon "Auto98SG" gan tren noc toa nha (troi cung thanh pho, theo giao dien) -------- */
.city-layer .bg-sign{position:absolute;bottom:68.5%;left:25.6%;
  display:flex;align-items:center;padding:6px 13px;border-radius:9px;pointer-events:none;
  background:linear-gradient(180deg,var(--brand-b),var(--brand-a));
  border:2px solid var(--sign-line);
  box-shadow:0 0 0 2px rgba(0,0,0,.45),0 6px 16px rgba(0,0,0,.5),0 0 16px var(--sign-glow);
  animation:sign-glow 2.4s ease-in-out infinite}
.city-layer .bg-sign.s2{left:75.6%}
.city-layer .bg-sign .sign-text{font-family:'Nunito',system-ui,sans-serif;font-weight:900;letter-spacing:1.5px;
  font-size:1.05rem;line-height:1;color:var(--sign-text);
  text-shadow:0 0 6px var(--sign-line),0 0 14px var(--sign-glow)}
.city-layer .bg-sign::before,.city-layer .bg-sign::after{content:"";position:absolute;left:9px;right:9px;height:6px;
  background-image:radial-gradient(circle at 50% 50%,#fff 45%,var(--sign-line) 58%,transparent 66%);
  background-size:14px 6px;background-repeat:repeat-x;opacity:.95;
  animation:bulb-run .7s linear infinite}
.city-layer .bg-sign::before{top:2px}
.city-layer .bg-sign::after{bottom:2px;animation-delay:.35s}
@keyframes bulb-run{from{background-position-x:0}to{background-position-x:14px}}
@keyframes sign-glow{
  0%,100%{box-shadow:0 0 0 2px rgba(0,0,0,.45),0 6px 16px rgba(0,0,0,.5),0 0 13px var(--sign-glow)}
  50%{box-shadow:0 0 0 2px rgba(0,0,0,.45),0 6px 16px rgba(0,0,0,.5),0 0 30px var(--sign-glow)}
}

/* nen toi cho trang dang nhap */
.bg-scene.on-dark .cloud{background:rgba(255,255,255,.12);color:rgba(255,255,255,.12)}
.bg-scene.on-dark .geo-pattern{background-image:
    linear-gradient(var(--geo-line-dark) 1px, transparent 1px),
    linear-gradient(90deg, var(--geo-line-dark) 1px, transparent 1px)}
.bg-scene.on-dark .blossom{color:rgba(255,255,255,.5);opacity:.22}
.bg-scene.on-dark .bg-floats span{color:rgba(255,255,255,.4);opacity:.4}

@media(max-width:768px){
  .bg-floats .f6{display:none}
  .bg-city{height:110px}
  .city-layer .bg-sign{display:none}
  .blossom.b-mr{display:none}
}

/* ---------- Logo chuyen dong ---------- */
.brand-logo .bl-car{transform-box:fill-box;transform-origin:center;animation:bl-bob 2.4s ease-in-out infinite}
.brand-logo .bl-wheel{transform-box:fill-box;transform-origin:center;animation:bl-spin 1s linear infinite}
.brand-logo .bl-wheel.w2{animation-delay:-.5s}
.brand-logo .bl-dash{animation:bl-dash 1.1s linear infinite}
.brand-logo .bl-spark{transform-box:fill-box;transform-origin:center;animation:bl-twinkle 2.2s ease-in-out infinite}
.brand-logo .bl-spark.s2{animation-delay:-1.1s}
.brand-logo .bl-head{animation:bl-glow 1.6s ease-in-out infinite}
.brand-logo .bl-head.h2{animation-delay:-.8s}
@keyframes bl-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-1.6px)}}
@keyframes bl-spin{to{transform:rotate(360deg)}}
@keyframes bl-dash{from{stroke-dashoffset:0}to{stroke-dashoffset:-22}}
@keyframes bl-twinkle{0%,100%{transform:scale(.6);opacity:.35}50%{transform:scale(1);opacity:1}}
@keyframes bl-glow{0%,100%{opacity:.5}50%{opacity:1}}

/* ---------- Chuyen dong giao dien ---------- */
@keyframes fade-up{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@keyframes fade-in{from{opacity:0}to{opacity:1}}
@keyframes pop-in{0%{opacity:0;transform:scale(.9)}60%{transform:scale(1.03)}100%{opacity:1;transform:scale(1)}}
@keyframes slide-down{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}
@keyframes ring-pulse{0%{box-shadow:0 0 0 0 rgba(255,59,59,.45)}70%{box-shadow:0 0 0 12px rgba(255,59,59,0)}100%{box-shadow:0 0 0 0 rgba(255,59,59,0)}}

/* noi dung trang troi len */
main{animation:fade-up .45s ease both}

/* card xuat hien lan luot */
.card{animation:fade-up .5s ease both}
.row .card:nth-child(2){animation-delay:.06s}
.row .card:nth-child(3){animation-delay:.12s}
.row .card:nth-child(4){animation-delay:.18s}
.row .card:nth-child(5){animation-delay:.24s}
.row .card:nth-child(6){animation-delay:.3s}

/* icon chip + page icon nhun khi hover */
.icon-chip{transition:transform .25s}
.card:hover .icon-chip{transform:rotate(-6deg) scale(1.08)}
.page-title .page-icon{animation:pop-in .5s ease both}

/* bang: dong hien dan (chi dong dau de nhe) */
.table tbody tr{animation:fade-in .35s ease both}
.table tbody tr:nth-child(1){animation-delay:.03s}
.table tbody tr:nth-child(2){animation-delay:.06s}
.table tbody tr:nth-child(3){animation-delay:.09s}
.table tbody tr:nth-child(4){animation-delay:.12s}
.table tbody tr:nth-child(5){animation-delay:.15s}
.table tbody tr:nth-child(n+6){animation-delay:.18s}

/* thong bao truot xuong */
.alert{animation:slide-down .4s ease both}

/* stat value + nut bam duoc nhan manh */
.stat-card:hover .stat-value{animation:pop-in .4s ease}
.btn-primary{position:relative;overflow:hidden}

/* thanh navbar xuong tu tren */
.app-navbar{animation:slide-down .4s ease both}

/* login card xuat hien */
.login-card{animation:pop-in .5s ease both}
.login-hero .car-art{display:none !important}

/* cac cham trang tri o login quay nhe */
.login-hero .dots{animation:fade-in 1s ease both}

/* accessibility: tat chuyen dong neu nguoi dung yeu cau */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
}

/* ---------- Giao diện độ xe (car culture themes) ---------- */
/* <html data-theme="..."> đặt bởi JS, lưu localStorage. */

:root[data-theme="racetrack"]{
  --toy-bg:#17181c;
  --toy-ink:#f2f4f8;
  --toy-muted:#9aa3bb;
  --brand-a:#23242a; --brand-b:#15161b;
  --nav-underline:repeating-linear-gradient(90deg,#fff 0 22px,#101114 22px 44px);
  --nav-active:linear-gradient(135deg,#e62226,#a5141a);
  --nav-active-glow:rgba(230,34,38,.5);
  --btn-grad:linear-gradient(135deg,#ff5a5c,#e62226);
  --btn-glow:rgba(230,34,38,.45);
  --btn-glow-h:rgba(230,34,38,.55);
  --link-a:#ff9092; --link-b:#f6c453;
  --pageicon:linear-gradient(135deg,#e62226,#f6c453);
  --pageicon-glow:rgba(230,34,38,.45);
  --avatar:linear-gradient(135deg,#f6c453,#e62226);
  --thead-bg:#22242c; --thead-ink:#fff; --thead-border:#3a3d47;
  --row-hover:#2b2d35;
  --card-bg:#23242a; --card-head-bg:#26272e; --card-sep:#34363f;
  --card-border:rgba(255,255,255,.07);
  --form-border:#3a3d47; --form-focus:#ff5a5c; --form-focus-glow:rgba(255,90,92,.25);
  --form-bg:#1c1d23; --form-ink:#f2f4f8;
  --label-ink:#fff;
  --outline-ink:#f2f4f8;
  --footer-border:#34363f;
  --float-ink:rgba(255,255,255,.55);
  --geo-line:rgba(255,255,255,.06);
  --road-strip:repeating-linear-gradient(90deg,rgba(255,255,255,.35) 0 30px,rgba(230,34,38,.35) 30px 60px);
  --login-bg:linear-gradient(135deg,#17181c,#212228 55%,#2a2a31);
  --hero-bg:linear-gradient(160deg,#15161b 0%,#23252c 48%,#35363d 100%);
  --hero-th-b:radial-gradient(120% 95% at 88% 100%,rgba(120,140,180,.35) 0%,transparent 55%),linear-gradient(160deg,#17181d 0%,#25272e 50%,#343640 100%);
  --hero-th-c:radial-gradient(120% 95% at 88% 100%,rgba(230,34,38,.4) 0%,transparent 55%),linear-gradient(160deg,#1d1415 0%,#2a1b1c 50%,#352b2a 100%);
  --hero-th-d:radial-gradient(120% 95% at 88% 100%,rgba(150,160,190,.3) 0%,transparent 55%),linear-gradient(160deg,#101114 0%,#1c1e24 50%,#282a31 100%);
  --car-f-b:saturate(.5) brightness(1.02);
  --car-f-c:saturate(.8) hue-rotate(-10deg) brightness(1.1);
  --car-f-d:saturate(.4) brightness(.95);
  --city-tint-1:#e62226; --city-tint-2:#f6c453;
}

:root[data-theme="tuner"]{
  --toy-bg:#141627;
  --toy-ink:#eef0ff;
  --toy-muted:#9aa0c9;
  --brand-a:#231753; --brand-b:#120f2e;
  --nav-underline:repeating-linear-gradient(90deg,#22d3ee 0 28px,#a855f7 28px 56px,#6366f1 56px 84px,#22d3ee 84px 112px);
  --nav-active:linear-gradient(135deg,#6366f1,#a855f7);
  --nav-active-glow:rgba(99,102,241,.5);
  --btn-grad:linear-gradient(135deg,#22d3ee,#8b5cf6);
  --btn-glow:rgba(139,92,246,.45);
  --btn-glow-h:rgba(168,85,247,.55);
  --link-a:#6ee7ff; --link-b:#c084fc;
  --pageicon:linear-gradient(135deg,#22d3ee,#a855f7);
  --pageicon-glow:rgba(34,211,238,.4);
  --avatar:linear-gradient(135deg,#a855f7,#22d3ee);
  --thead-bg:#1c1f3a; --thead-ink:#fff; --thead-border:#34395f;
  --row-hover:#232746;
  --card-bg:#1a1c38; --card-head-bg:#1c1f3a; --card-sep:#30345a;
  --card-border:rgba(255,255,255,.07);
  --form-border:#3a4066; --form-focus:#22d3ee; --form-focus-glow:rgba(34,211,238,.25);
  --form-bg:#14162b; --form-ink:#eef0ff;
  --label-ink:#fff;
  --outline-ink:#eef0ff;
  --footer-border:#34395f;
  --float-ink:rgba(255,255,255,.55);
  --geo-line:rgba(255,255,255,.06);
  --road-strip:repeating-linear-gradient(90deg,rgba(34,211,238,.35) 0 30px,rgba(168,85,247,.35) 30px 60px);
  --login-bg:linear-gradient(135deg,#141627,#1d1f3f 55%,#2a1f4d);
  --hero-bg:linear-gradient(160deg,#141627 0%,#1d1f3f 48%,#2a1f4d 100%);
  --hero-th-b:radial-gradient(120% 95% at 88% 100%,rgba(34,211,238,.4) 0%,transparent 55%),linear-gradient(160deg,#141627 0%,#19314a 50%,#23355b 100%);
  --hero-th-c:radial-gradient(120% 95% at 88% 100%,rgba(168,85,247,.4) 0%,transparent 55%),linear-gradient(160deg,#1d1230 0%,#2f1c52 50%,#3c245a 100%);
  --hero-th-d:radial-gradient(120% 95% at 88% 100%,rgba(99,102,241,.35) 0%,transparent 55%),linear-gradient(160deg,#10122b 0%,#1c1f45 50%,#2c2d5c 100%);
  --car-f-b:hue-rotate(170deg) saturate(1.3);
  --car-f-c:hue-rotate(290deg) saturate(1.5);
  --car-f-d:hue-rotate(220deg) saturate(.9);
  --city-tint-1:#22d3ee; --city-tint-2:#a855f7;
}

:root[data-theme="offroad"]{
  --toy-bg:#efe9db;
  --toy-ink:#2d2b26;
  --toy-muted:#847d6c;
  --brand-a:#3f4a2f; --brand-b:#2b3320;
  --nav-underline:repeating-linear-gradient(90deg,#8c6d3f 0 28px,#5c6e3a 28px 56px,#a8824a 56px 84px,#8c6d3f 84px 112px);
  --nav-active:linear-gradient(135deg,#6b7a45,#8c6d3f);
  --nav-active-glow:rgba(107,122,69,.45);
  --btn-grad:linear-gradient(135deg,#6b7a45,#4c5a2e);
  --btn-glow:rgba(107,122,69,.4);
  --btn-glow-h:rgba(107,122,69,.5);
  --link-a:#5c6e3a; --link-b:#a8824a;
  --pageicon:linear-gradient(135deg,#6b7a45,#a8824a);
  --pageicon-glow:rgba(107,122,69,.4);
  --avatar:linear-gradient(135deg,#a8824a,#6b7a45);
  --thead-bg:#efe7d4; --thead-ink:#3b3a2d; --thead-border:#e0d5bb;
  --row-hover:#f6f0e2;
  --card-bg:#fffdf7; --card-head-bg:#fffdf7; --card-sep:#ece2c8;
  --card-border:rgba(90,75,40,.1);
  --form-border:#d8cdb4; --form-focus:#6b7a45; --form-focus-glow:rgba(107,122,69,.2);
  --form-bg:#fff; --form-ink:#2d2b26;
  --label-ink:#3b3a2d;
  --outline-ink:#3b3a2d;
  --footer-border:#e0d5bb;
  --float-ink:#6b5d3f;
  --geo-line:rgba(90,75,40,.08);
  --road-strip:repeating-linear-gradient(90deg,rgba(255,213,150,.5) 0 30px,rgba(168,130,74,.45) 30px 60px);
  --login-bg:linear-gradient(135deg,#28321e,#3f4a2f 55%,#20261a);
  --hero-bg:linear-gradient(160deg,#20261a 0%,#38432c 48%,#4c4f38 100%);
  --hero-th-b:radial-gradient(120% 95% at 88% 100%,rgba(168,130,74,.4) 0%,transparent 55%),linear-gradient(160deg,#222a19 0%,#39452e 50%,#4a5238 100%);
  --hero-th-c:radial-gradient(120% 95% at 88% 100%,rgba(140,80,50,.45) 0%,transparent 55%),linear-gradient(160deg,#261c14 0%,#43321f 50%,#4c462e 100%);
  --hero-th-d:radial-gradient(120% 95% at 88% 100%,rgba(110,135,90,.3) 0%,transparent 55%),linear-gradient(160deg,#1a2014 0%,#2c3820 50%,#3e4a2c 100%);
  --car-f-b:sepia(.4) saturate(1.1);
  --car-f-c:sepia(.6) hue-rotate(-15deg);
  --car-f-d:sepia(.3) brightness(.95);
  --city-tint-1:#7d8c4a; --city-tint-2:#a8824a;
}

:root[data-theme="hyper"]{
  --toy-bg:#101014;
  --toy-ink:#f1f0f4;
  --toy-muted:#9b999f;
  --brand-a:#1a1a20; --brand-b:#0e0e12;
  --nav-underline:repeating-linear-gradient(90deg,#f59f00 0 28px,#e02d2d 28px 56px,#f59f00 56px 84px,#2c2c36 84px 112px);
  --nav-active:linear-gradient(135deg,#f59f00,#e02d2d);
  --nav-active-glow:rgba(245,159,0,.45);
  --btn-grad:linear-gradient(135deg,#f59f00,#e02d2d);
  --btn-glow:rgba(224,45,45,.45);
  --btn-glow-h:rgba(224,45,45,.55);
  --link-a:#fbbf24; --link-b:#ff5a5a;
  --pageicon:linear-gradient(135deg,#f59f00,#e02d2d);
  --pageicon-glow:rgba(245,159,0,.4);
  --avatar:linear-gradient(135deg,#f59f00,#e02d2d);
  --thead-bg:#191920; --thead-ink:#fff; --thead-border:#2c2c36;
  --row-hover:#22222b;
  --card-bg:#1a1a21; --card-head-bg:#1d1d25; --card-sep:#2c2c36;
  --card-border:rgba(255,255,255,.07);
  --form-border:#33333e; --form-focus:#f59f00; --form-focus-glow:rgba(245,159,0,.25);
  --form-bg:#121217; --form-ink:#f1f0f4;
  --label-ink:#fff;
  --outline-ink:#f1f0f4;
  --footer-border:#2c2c36;
  --float-ink:rgba(255,255,255,.5);
  --geo-line:rgba(255,255,255,.06);
  --road-strip:repeating-linear-gradient(90deg,rgba(245,159,0,.4) 0 30px,rgba(224,45,45,.4) 30px 60px);
  --login-bg:linear-gradient(135deg,#0e0e12,#181820 55%,#1d1a18);
  --hero-bg:linear-gradient(160deg,#0e0e13 0%,#1b1b23 48%,#2a2418 100%);
  --hero-th-b:radial-gradient(120% 95% at 88% 100%,rgba(226,148,10,.4) 0%,transparent 55%),linear-gradient(160deg,#121115 0%,#221f1a 50%,#332a1c 100%);
  --hero-th-c:radial-gradient(120% 95% at 88% 100%,rgba(224,45,45,.4) 0%,transparent 55%),linear-gradient(160deg,#1a0f0f 0%,#2a1616 50%,#332a1c 100%);
  --hero-th-d:radial-gradient(120% 95% at 88% 100%,rgba(120,125,140,.3) 0%,transparent 55%),linear-gradient(160deg,#0d0d11 0%,#191a20 50%,#262830 100%);
  --car-f-b:hue-rotate(40deg) saturate(1.1) brightness(1.05);
  --car-f-c:hue-rotate(-15deg) saturate(1.35) brightness(1.1);
  --car-f-d:saturate(.6) brightness(.92);
  --city-tint-1:#f59f00; --city-tint-2:#e02d2d;
}

/* ===== Nút chọn giao diện ===== */
.theme-switch-btn{
  color:rgba(255,255,255,.82)!important;font-weight:800;border-radius:999px;
  display:flex;align-items:center;gap:.45rem;border:0;background:rgba(255,255,255,.12);
  padding:.45rem .95rem!important;margin:.15rem .1rem;transition:.2s;
}
.theme-switch-btn:hover{background:rgba(255,255,255,.2);color:#fff!important;transform:translateY(-1px)}
.theme-switch-menu{min-width:230px;border-radius:1rem;box-shadow:var(--shadow-md);border:0;padding:.5rem}
.theme-switch-menu .dropdown-item{border-radius:.75rem;font-weight:700;padding:.5rem .7rem}
.theme-switch-menu .dropdown-item:hover{background:var(--row-hover)}
.theme-switch-menu .dropdown-item.active{background:var(--nav-active)!important;color:#fff}
.theme-swatch{width:18px;height:18px;border-radius:6px;flex:0 0 auto;box-shadow:inset 0 0 0 1px rgba(255,255,255,.35)}
.login-theme-wrap{
  position:fixed;top:1rem;right:1rem;z-index:20;
}
.login-theme-wrap .btn{border-radius:999px;box-shadow:0 10px 24px rgba(0,0,0,.35);border:0}
.login-theme-wrap .theme-switch-menu{position:absolute;right:0;top:calc(100% + 8px);z-index:30;display:none}
.login-theme-wrap.open .theme-switch-menu{display:block}

/* ---------- In an ---------- */
@media print{
  .app-navbar,.no-print,.bg-scene{ display:none !important; }
  main{ padding:0 !important; }
  .card{ border:1px solid #ccc !important; box-shadow:none !important; }
  body{ background:#fff !important; }
}