/* =========================================================
   DICHVU63.SHOP — Dark Glassmorphism / Neon Theme
   ========================================================= */

:root{
  --bg-0:#06070d;
  --bg-1:#0b0e19;
  --panel:rgba(255,255,255,0.045);
  --panel-strong:rgba(255,255,255,0.08);
  --border:rgba(255,255,255,0.09);
  --neon-violet:#8b5cf6;
  --neon-cyan:#22d3ee;
  --neon-pink:#f472b6;
  --text-0:#f5f6ff;
  --text-1:#aab0c6;
  --text-2:#6d7390;
  --success:#34d399;
  --danger:#fb7185;
  --warn:#fbbf24;
  --radius:18px;
  --radius-sm:12px;
  --font-display:'Sora', 'Segoe UI', sans-serif;
  --font-body:'Inter', 'Segoe UI', sans-serif;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}

body{
  background:
    radial-gradient(1100px 600px at 85% -10%, rgba(139,92,246,.22), transparent 60%),
    radial-gradient(900px 500px at -10% 15%, rgba(34,211,238,.16), transparent 55%),
    var(--bg-0);
  color:var(--text-0);
  font-family:var(--font-body);
  min-height:100vh;
  line-height:1.5;
}

h1,h2,h3,h4,.brand{font-family:var(--font-display); font-weight:700; letter-spacing:-.01em;}

a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}

.container{max-width:1180px; margin:0 auto; padding:0 20px;}

/* ---------- Glass panel base ---------- */
.glass{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--radius);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  box-shadow:0 10px 40px rgba(0,0,0,.35);
}

/* ---------- Light theme override ---------- */
body.theme-light{
  --bg-0:#f4f5fb;
  --bg-1:#ffffff;
  --panel:rgba(20,20,40,0.035);
  --panel-strong:rgba(20,20,40,0.06);
  --border:rgba(20,20,40,0.1);
  --text-0:#14162b;
  --text-1:#4a4e6b;
  --text-2:#8286a3;
}
body.theme-light{
  background:
    radial-gradient(1100px 600px at 85% -10%, rgba(139,92,246,.10), transparent 60%),
    radial-gradient(900px 500px at -10% 15%, rgba(34,211,238,.08), transparent 55%),
    var(--bg-0);
}
body.theme-light .navbar{background:rgba(244,245,251,.85);}
body.theme-light .glass{box-shadow:0 10px 30px rgba(20,20,40,.06);}
body.theme-light .key-box{background:rgba(20,20,40,.04); color:#7c3aed;}

/* ---------- Floating notice (popup GIF, khác thanh thông báo đầu trang) ---------- */
.float-notice{
  position:fixed; bottom:20px; right:20px; z-index:200;
  max-width:280px; border-radius:16px; overflow:hidden;
  background:var(--panel-strong); border:1px solid var(--border);
  backdrop-filter:blur(16px); box-shadow:0 16px 40px rgba(0,0,0,.4);
  animation:floatIn .4s ease;
}
@keyframes floatIn{from{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}
.float-notice img{width:100%; display:block;}
.float-notice .fn-body{padding:12px 14px 14px;}
.float-notice .fn-text{font-size:13px; color:var(--text-0); margin:0 0 10px; font-weight:500;}
.float-notice .fn-close{
  position:absolute; top:8px; right:8px; width:24px; height:24px; border-radius:50%;
  background:rgba(0,0,0,.55); color:#fff; border:none; cursor:pointer; font-size:14px;
  display:flex; align-items:center; justify-content:center; line-height:1;
}
@media(max-width:520px){ .float-notice{right:12px; left:12px; max-width:none;} }

/* ---------- Announcement bar ---------- */
.announce-bar{
  background:linear-gradient(90deg, rgba(139,92,246,.28), rgba(34,211,238,.2));
  border-bottom:1px solid var(--border);
  padding:9px 0;
}
.announce-inner{
  font-size:13px; font-weight:600; text-align:center; color:#f5f6ff;
  letter-spacing:.01em;
}

/* ---------- Navbar ---------- */
.navbar{
  position:sticky; top:0; z-index:50;
  background:rgba(6,7,13,.72);
  border-bottom:1px solid var(--border);
  backdrop-filter:blur(16px);
}
.navbar .inner{display:flex; align-items:center; justify-content:space-between; padding:14px 0;}
.brand{font-size:22px; display:flex; align-items:center; gap:8px;}
.brand .dot{width:9px;height:9px;border-radius:50%; background:linear-gradient(135deg,var(--neon-violet),var(--neon-cyan)); box-shadow:0 0 14px var(--neon-violet);}
.brand span.accent{background:linear-gradient(90deg,var(--neon-violet),var(--neon-cyan)); -webkit-background-clip:text; background-clip:text; color:transparent;}

.nav-links{display:flex; align-items:center; gap:22px;}
.nav-links a{color:var(--text-1); font-size:14.5px; font-weight:500; transition:.2s;}
.nav-links a:hover{color:var(--text-0);}

.balance-pill{
  display:flex; align-items:center; gap:8px;
  background:var(--panel-strong); border:1px solid var(--border);
  padding:7px 14px; border-radius:999px; font-size:13.5px; font-weight:600;
}
.balance-pill .amt{color:var(--neon-cyan);}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border:none; border-radius:12px; padding:11px 22px;
  font-family:var(--font-body); font-weight:600; font-size:14.5px;
  cursor:pointer; transition:.18s ease; text-align:center;
}
.btn-primary{
  background:linear-gradient(135deg,var(--neon-violet),#6d28d9);
  color:#fff; box-shadow:0 8px 24px rgba(139,92,246,.35);
}
.btn-primary:hover{transform:translateY(-1px); box-shadow:0 10px 30px rgba(139,92,246,.5);}
.btn-outline{background:transparent; border:1px solid var(--border); color:var(--text-0);}
.btn-outline:hover{border-color:var(--neon-cyan); color:var(--neon-cyan);}
.btn-sm{padding:7px 14px; font-size:13px; border-radius:9px;}
.btn-danger{background:rgba(251,113,133,.14); color:var(--danger); border:1px solid rgba(251,113,133,.35);}
.btn-block{width:100%;}
.btn:disabled{opacity:.5; cursor:not-allowed;}

/* ---------- Hero ---------- */
.hero{padding:78px 0 56px; position:relative; overflow:hidden;}
.hero-badge{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 14px; border-radius:999px; font-size:12.5px; font-weight:600;
  background:rgba(139,92,246,.12); border:1px solid rgba(139,92,246,.35); color:#c4b5fd;
  margin-bottom:22px;
}
.hero h1{font-size:46px; line-height:1.12; margin:0 0 18px; max-width:760px;}
.hero p{font-size:16.5px; color:var(--text-1); max-width:560px; margin:0 0 30px;}
.hero-actions{display:flex; gap:14px;}

.stat-row{display:flex; gap:34px; margin-top:52px; flex-wrap:wrap;}
.stat-row .stat b{font-size:26px; display:block; font-family:var(--font-display);}
.stat-row .stat span{color:var(--text-2); font-size:13px;}

/* ---------- Category chips ---------- */
.cat-row{display:flex; gap:12px; flex-wrap:wrap; margin:34px 0 6px;}
.cat-chip{
  padding:9px 18px; border-radius:999px; font-size:13.5px; font-weight:600;
  border:1px solid var(--border); color:var(--text-1); cursor:pointer; transition:.2s;
}
.cat-chip.active, .cat-chip:hover{
  border-color:var(--neon-violet); color:#fff;
  background:linear-gradient(135deg,rgba(139,92,246,.25),rgba(34,211,238,.12));
}

/* ---------- Product grid ---------- */
.section-title{display:flex; align-items:baseline; justify-content:space-between; margin:44px 0 22px;}
.section-title h2{font-size:26px; margin:0;}
.section-title p{color:var(--text-2); font-size:14px; margin:4px 0 0;}

.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); gap:20px;}

.card-product{
  padding:20px; position:relative; overflow:hidden; transition:.25s ease;
}
.product-ribbon{
  position:absolute; top:14px; right:-32px; transform:rotate(35deg);
  padding:4px 40px; font-size:11px; font-weight:800; letter-spacing:.03em; color:#fff; z-index:2;
  box-shadow:0 4px 12px rgba(0,0,0,.3);
}
.ribbon-sale{background:linear-gradient(90deg,#f43f5e,#fb7185);}
.ribbon-new{background:linear-gradient(90deg,#22d3ee,#8b5cf6);}
.ribbon-discount{background:linear-gradient(90deg,#fbbf24,#f59e0b); color:#1a1a1a;}
.card-product:hover{transform:translateY(-4px); border-color:rgba(139,92,246,.5); box-shadow:0 16px 40px rgba(139,92,246,.18);}
.card-product .thumb{
  height:130px; border-radius:12px; margin-bottom:16px;
  background:linear-gradient(135deg,rgba(139,92,246,.35),rgba(34,211,238,.2));
  display:flex; align-items:center; justify-content:center; font-size:38px;
}
.card-product .cat-tag{font-size:11.5px; color:var(--neon-cyan); font-weight:700; text-transform:uppercase; letter-spacing:.04em;}
.card-product h3{font-size:17px; margin:8px 0 6px;}
.card-product p.desc{color:var(--text-2); font-size:13px; margin:0 0 16px; min-height:34px;}

.price-tabs{display:flex; gap:6px; margin-bottom:14px;}
.price-tab{
  flex:1; text-align:center; padding:8px 4px; border-radius:9px; cursor:pointer;
  border:1px solid var(--border); font-size:12px; transition:.15s;
}
.price-tab b{display:block; font-size:13.5px; margin-top:2px; font-family:var(--font-display);}
.price-tab.active{border-color:var(--neon-violet); background:rgba(139,92,246,.16); color:#fff;}
.price-tab .old{text-decoration:line-through; color:var(--text-2); font-size:10.5px;}

/* ---------- Forms ---------- */
.auth-wrap{min-height:calc(100vh - 76px); display:flex; align-items:center; justify-content:center; padding:40px 20px;}
.auth-box{width:100%; max-width:420px; padding:36px 32px;}
.auth-box h2{font-size:24px; margin:0 0 6px;}
.auth-box .sub{color:var(--text-2); font-size:13.5px; margin-bottom:26px;}

.field{margin-bottom:16px;}
.field label{display:block; font-size:13px; color:var(--text-1); margin-bottom:7px; font-weight:600;}
.field input, .field select, .field textarea{
  width:100%; padding:12px 14px; border-radius:11px; font-size:14px;
  background:rgba(255,255,255,.04); border:1px solid var(--border); color:var(--text-0);
  font-family:var(--font-body); transition:.15s;
}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--neon-violet); background:rgba(139,92,246,.06);
}

.alert{padding:12px 16px; border-radius:11px; font-size:13.5px; margin-bottom:16px; border:1px solid;}
.alert-error{background:rgba(251,113,133,.1); border-color:rgba(251,113,133,.35); color:#fda4af;}
.alert-success{background:rgba(52,211,153,.1); border-color:rgba(52,211,153,.35); color:#6ee7b7;}
.alert-info{background:rgba(34,211,238,.1); border-color:rgba(34,211,238,.35); color:#67e8f9;}

/* ---------- Dashboard layout ---------- */
.dash-layout{display:grid; grid-template-columns:230px 1fr; gap:24px; padding:30px 0 60px;}
.dash-side{padding:18px; align-self:start; position:sticky; top:90px;}
.dash-side a{
  display:flex; align-items:center; gap:10px; padding:11px 14px; border-radius:11px;
  font-size:14px; color:var(--text-1); margin-bottom:4px; font-weight:500;
}
.dash-side a.active, .dash-side a:hover{background:var(--panel-strong); color:#fff;}
.dash-main{min-width:0;}

.kpi-row{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:16px; margin-bottom:26px;}
.kpi{padding:20px;}
.kpi .label{font-size:12.5px; color:var(--text-2); font-weight:600; text-transform:uppercase; letter-spacing:.03em;}
.kpi .value{font-size:26px; font-family:var(--font-display); margin-top:8px;}
.kpi .value.cyan{color:var(--neon-cyan);}
.kpi .value.violet{color:var(--neon-violet);}
.kpi .value.pink{color:var(--neon-pink);}

table{width:100%; border-collapse:collapse; font-size:13.5px;}
table th{text-align:left; padding:12px 14px; color:var(--text-2); font-weight:600; font-size:12px; text-transform:uppercase; letter-spacing:.03em; border-bottom:1px solid var(--border);}
table td{padding:13px 14px; border-bottom:1px solid rgba(255,255,255,.05); color:var(--text-1);}
table tr:hover td{background:rgba(255,255,255,.02);}

.badge{padding:4px 11px; border-radius:999px; font-size:11.5px; font-weight:700; display:inline-block;}
.badge-success{background:rgba(52,211,153,.14); color:var(--success);}
.badge-warn{background:rgba(251,191,36,.14); color:var(--warn);}
.badge-danger{background:rgba(251,113,133,.14); color:var(--danger);}
.badge-info{background:rgba(139,92,246,.14); color:#c4b5fd;}

.key-box{
  font-family:'JetBrains Mono', monospace; background:rgba(0,0,0,.35);
  border:1px dashed var(--border); border-radius:10px; padding:12px 14px;
  font-size:13.5px; letter-spacing:.03em; color:var(--neon-cyan); word-break:break-all;
}

/* ---------- Footer ---------- */
footer{border-top:1px solid var(--border); padding:40px 0; margin-top:70px; color:var(--text-2); font-size:13.5px;}
footer .foot-row{display:flex; justify-content:space-between; flex-wrap:wrap; gap:14px;}
footer .zalo-tag{color:var(--neon-cyan); font-weight:600;}

/* ---------- Utility ---------- */
.flex{display:flex;} .items-center{align-items:center;} .justify-between{justify-content:space-between;}
.gap-8{gap:8px;} .gap-12{gap:12px;} .mt-0{margin-top:0;} .text-center{text-align:center;}
.w-full{width:100%;}

@media(max-width:860px){
  .dash-layout{grid-template-columns:1fr;}
  .dash-side{position:static; display:flex; overflow-x:auto; gap:6px;}
  .hero h1{font-size:32px;}
  .nav-links{display:none;}
}