/* ════════════════════════════════════════════════════════════
   home-moi.css — lớp giao diện mới cho trang chủ.
   Chỉ đổi cách trình bày, KHÔNG đụng chức năng: mọi id/class
   của home.html giữ nguyên. Bỏ file này là về giao diện cũ.
   ════════════════════════════════════════════════════════════ */
:root{
  --sidebar-w:236px;
  --header-h:64px;
  --bg:#08121c;
  --surface:#0f1d2b;
  --surface2:#13263a;
  --panel:rgba(10,20,31,.82);
  --border:rgba(255,255,255,.075);
  --text:#e6edf4;
  --muted:#8aa0b5;
  --dim:#557089;
  --hm-glow:rgba(var(--blue-rgb),.16);
  --hm-shadow:0 18px 40px -26px rgba(0,0,0,.75);
  --hm-r:20px;
}
:root[data-mode="light"]{
  --bg:#f3f6fb;
  --surface:#ffffff;
  --surface2:#f6f8fc;
  --panel:rgba(255,255,255,.85);
  --border:rgba(12,30,52,.09);
  --text:#14212e;
  --muted:#5d6f82;
  --dim:#94a3b5;
  --hm-glow:rgba(var(--blue-rgb),.10);
  --hm-shadow:0 14px 34px -22px rgba(12,30,52,.30);
}

body{font-family:'Be Vietnam Pro','Segoe UI',Arial,sans-serif;}

/* ── THANH TRÊN: kính mờ ── */
.hdr{
  background:var(--panel);
  backdrop-filter:blur(16px) saturate(140%);-webkit-backdrop-filter:blur(16px) saturate(140%);
  padding:0 20px;
}
.hdr-icon{width:40px;height:40px;border-radius:12px;background:#fff;padding:3px;border:none;box-shadow:0 6px 16px -8px rgba(var(--blue-rgb),.9);}
.hdr-name{font-size:15.5px;font-weight:900;letter-spacing:-.1px;}
.hdr-sub{font-size:9.5px;letter-spacing:1.2px;white-space:nowrap;}
.hdr-ticker{border:none;}
.ticker-txt{
  display:inline-block;max-width:100%;padding:7px 16px;border-radius:99px;
  background:rgba(var(--blue-rgb),.08);border:1px solid rgba(var(--blue-rgb),.18);
  color:var(--text);font-weight:600;font-size:12px;
}
.hdr-clock{padding:7px 12px;border-radius:12px;background:var(--surface);border:1px solid var(--border);}
.hdr-clock .time{font-variant-numeric:tabular-nums;}
.hdr-gia{padding:8px 12px;border-radius:12px;background:var(--surface);border:1px solid var(--border);transition:.15s;}
.hdr-gia:hover{border-color:rgba(var(--blue-rgb),.4);}
.hdr-theme{width:38px;height:38px;justify-content:center;border-radius:12px;background:var(--surface);border:1px solid var(--border);}
.hdr-user{padding:5px 10px 5px 5px;border-radius:14px;background:var(--surface);border:1px solid var(--border);}
.hdr-avatar{width:32px;height:32px;border-radius:10px;}
.gia-dropdown,.theme-dropdown,.user-dropdown{border-radius:16px;background:var(--surface);box-shadow:0 30px 60px -20px rgba(0,0,0,.6);}
.gia-dropdown{top:46px;}
.theme-dropdown{top:46px;}
.gia-update-btn,.btn-send,.lbtn-ok{border-radius:12px;background:linear-gradient(135deg,var(--blue),var(--blue2));font-weight:700;}

/* ── MENU TRÁI ── */
.sidebar{background:var(--panel);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);padding:6px 4px 0;}
.sb-section{padding:12px 10px 2px;}
.sb-section-title{font-size:10px;letter-spacing:1.4px;color:var(--dim);margin-bottom:6px;}
.sb-item{padding:10px 12px;border-radius:12px;font-size:13.5px;margin-bottom:3px;}
.sb-item .sb-icon{width:30px;height:30px;border-radius:9px;display:inline-flex;align-items:center;justify-content:center;background:var(--surface2);font-size:15px;transition:.18s;}
.sb-item:hover .sb-icon{transform:scale(1.08);}
.sb-item.active{background:linear-gradient(135deg,rgba(var(--blue-rgb),.22),rgba(var(--blue-rgb),.06));color:var(--text);box-shadow:inset 0 0 0 1px rgba(var(--blue-rgb),.25);}
.sb-item.active::before{display:none;}
.sb-item.active .sb-icon{background:linear-gradient(135deg,var(--blue),var(--blue2));box-shadow:0 6px 14px -6px rgba(var(--blue-rgb),.9);}
.sb-divider{margin:6px 14px;}
.sb-support{margin:12px 10px 14px;padding:14px;border-radius:16px;border:1px solid var(--border);background:linear-gradient(160deg,rgba(var(--blue-rgb),.10),transparent);}

/* ── KHU NỘI DUNG ── */
.content{padding:22px 24px 26px;gap:18px;background:transparent;}

/* ── LỜI CHÀO (do home-moi.js thêm vào) ── */
.hm-hero{
  position:relative;overflow:hidden;border-radius:26px;padding:26px 28px;
  background:
    radial-gradient(600px 260px at 100% 0%,rgba(var(--blue-rgb),.35),transparent 65%),
    radial-gradient(500px 240px at 0% 100%,rgba(255,138,31,.16),transparent 60%),
    linear-gradient(135deg,var(--surface2),var(--surface));
  border:1px solid var(--border);box-shadow:var(--hm-shadow);
  display:grid;grid-template-columns:1fr auto;gap:22px;align-items:center;
  animation:hmRise .5s cubic-bezier(.2,.7,.2,1) both;
}
.hm-hero::after{content:"⛽";position:absolute;right:-18px;bottom:-48px;font-size:190px;opacity:.06;transform:rotate(-12deg);pointer-events:none;}
.hm-hi{font-size:13px;font-weight:700;color:var(--blue);display:flex;align-items:center;gap:8px;}
.hm-hi i{width:8px;height:8px;border-radius:50%;background:#2fcf86;box-shadow:0 0 0 4px rgba(47,207,134,.2);font-style:normal;}
.hm-title{font-size:clamp(22px,2.6vw,32px);font-weight:900;letter-spacing:-.8px;color:var(--text);margin:6px 0 6px;line-height:1.15;}
.hm-sub{font-size:13.5px;color:var(--muted);}
.hm-cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px;}
.hm-btn{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 18px;border-radius:13px;font-weight:800;font-size:13.5px;text-decoration:none;transition:transform .15s,filter .15s,border-color .15s;}
.hm-btn.pri{background:linear-gradient(135deg,var(--blue),var(--blue2));color:#fff;box-shadow:0 14px 26px -14px rgba(var(--blue-rgb),.95);}
.hm-btn.pri:hover{transform:translateY(-2px);filter:brightness(1.08);}
.hm-btn.sec{background:var(--surface);border:1px solid var(--border);color:var(--text);}
.hm-btn.sec:hover{transform:translateY(-2px);border-color:rgba(var(--blue-rgb),.4);}
.hm-btn.fire{background:linear-gradient(135deg,#ff4d3d,#d62d1f);color:#fff;box-shadow:0 14px 26px -14px rgba(255,77,61,.95);}
.hm-btn.fire:hover{transform:translateY(-2px);filter:brightness(1.08);}
.hm-side{display:flex;flex-direction:column;gap:10px;min-width:280px;position:relative;z-index:1;}
.hm-clock{font-size:42px;font-weight:900;letter-spacing:-1.5px;color:var(--text);font-variant-numeric:tabular-nums;line-height:1;text-align:right;}
.hm-date{font-size:12.5px;color:var(--muted);text-align:right;}
.hm-prices{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:6px;}
.hm-price{padding:10px 12px;border-radius:14px;background:var(--surface);border:1px solid var(--border);cursor:pointer;transition:.15s;}
.hm-price:hover{border-color:rgba(var(--blue-rgb),.4);transform:translateY(-1px);}
.hm-price span{display:block;font-size:10.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px;}
.hm-price b{font-size:16px;font-weight:800;color:var(--text);font-variant-numeric:tabular-nums;}
.hm-price b small{font-size:10.5px;font-weight:600;color:var(--dim);margin-left:3px;}
@keyframes hmRise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ── Ô TRUY CẬP NHANH ── */
.quick-grid{gap:12px;}
.quick-grid + .quick-grid{margin-top:0 !important;}
.qa-card{
  position:relative;overflow:hidden;border-radius:18px;padding:16px;gap:14px;
  background:var(--surface);border:1px solid var(--border);box-shadow:var(--hm-shadow);
  animation:hmRise .45s cubic-bezier(.2,.7,.2,1) both;
}
.qa-card::before{content:"";position:absolute;inset:0;background:radial-gradient(240px 120px at 0% 0%,var(--hm-glow),transparent 70%);opacity:0;transition:opacity .25s;}
.qa-card:hover{transform:translateY(-3px);border-color:rgba(var(--blue-rgb),.35);background:var(--surface);box-shadow:0 22px 40px -24px rgba(var(--blue-rgb),.7);}
.qa-card:hover::before{opacity:1;}
.qa-card>*{position:relative;}
.qa-icon{width:48px;height:48px;border-radius:14px;font-size:23px;transition:transform .25s;}
.qa-card:hover .qa-icon{transform:scale(1.1) rotate(-6deg);}
.qa-icon.blue{background:linear-gradient(135deg,rgba(42,127,255,.30),rgba(42,127,255,.10));}
.qa-icon.green{background:linear-gradient(135deg,rgba(0,200,100,.28),rgba(0,200,100,.08));}
.qa-icon.orange{background:linear-gradient(135deg,rgba(245,166,35,.30),rgba(245,166,35,.08));}
.qa-icon.purple{background:linear-gradient(135deg,rgba(160,90,255,.30),rgba(160,90,255,.08));}
.qa-label{font-size:14.5px;font-weight:800;}
.qa-sub{font-size:11.5px;}
.quick-grid .qa-card:nth-child(2){animation-delay:.03s}.quick-grid .qa-card:nth-child(3){animation-delay:.06s}
.quick-grid .qa-card:nth-child(4){animation-delay:.09s}.quick-grid .qa-card:nth-child(5){animation-delay:.12s}

/* ── CÁC THẺ (sản lượng, video, thông báo, góp ý, thống kê, form) ── */
.info-card,.video-card,.stat-card-big,.status-card,.form-card,.sl-card{
  border-radius:var(--hm-r);background:var(--surface);border:1px solid var(--border);box-shadow:var(--hm-shadow);
  animation:hmRise .5s cubic-bezier(.2,.7,.2,1) both;
}
.card-head{padding:15px 18px;}
.card-title{font-size:14px;font-weight:800;}
.card-link{font-size:12px;font-weight:700;padding:5px 10px;border-radius:99px;background:rgba(var(--blue-rgb),.10);}
.card-link:hover{text-decoration:none;background:rgba(var(--blue-rgb),.18);}
.card-body{padding:14px 16px;}

/* sản lượng */
.sl-controls{padding:14px 18px;}
.sl-controls select{border-radius:11px;padding:8px 12px;font-weight:600;}
.sl-tabs{border-radius:11px;padding:3px;}
.sl-tab{border-radius:8px;padding:7px 13px;}
.sl-tab.active{background:linear-gradient(135deg,var(--blue),var(--blue2));box-shadow:0 6px 14px -6px rgba(var(--blue-rgb),.9);}
.sl-btn{border-radius:10px;padding:7px 12px;}
.sl-table tbody tr:nth-child(2n) td,.sl-table tbody tr:nth-child(2n) td:first-child{background:var(--surface2);}
:root[data-mode="light"] .sl-table tbody tr:nth-child(2n) td,
:root[data-mode="light"] .sl-table tbody tr:nth-child(2n) td:first-child{background:#f7f9fc;}
.sl-charts{padding:18px;}

/* video */
.video-wrap video{border-radius:0 0 var(--hm-r) var(--hm-r);}
.quote-overlay .qt{font-size:19px;font-weight:800;letter-spacing:-.2px;}

/* thông báo + góp ý */
.tb-item,.gy-item,.gopy-item{border-radius:13px;padding:12px 14px;margin-bottom:9px;border-left-width:3px;transition:transform .15s,background .15s;}
.tb-item:hover,.gy-item:hover,.gopy-item:hover{transform:translateX(3px);}
.tb-title{font-size:13px;}
.gopy-item{display:block;background:rgba(var(--blue-rgb),.06);border-left:3px solid var(--blue);}
.gopy-item b{display:block;font-size:13px;color:var(--text);}
.gopy-item span{display:block;font-size:12px;color:var(--muted);margin-top:2px;}

/* thống kê nhanh */
.stat-item{padding:20px 14px;}
.si-icon{width:46px;height:46px;margin:0 auto 10px;border-radius:14px;display:flex;align-items:center;justify-content:center;background:var(--surface2);font-size:22px;}
.si-val{font-size:28px;font-weight:900;letter-spacing:-.5px;}
.si-label{font-weight:700;}

/* trạng thái */
.st-item{border-radius:14px;}

/* form góp ý */
.form-body{padding:16px 18px 18px;}
.fi{border-radius:12px;padding:11px 14px;font-size:13px;}
.fi:focus{box-shadow:0 0 0 4px rgba(var(--blue-rgb),.14);}
.btn-send{padding:11px 22px;font-size:13px;}
.btn-view{border-radius:12px;padding:11px 18px;font-size:13px;}

/* chân trang + thời tiết */
.footer{background:transparent;border-top:1px solid var(--border);}
.w-chip{border-radius:99px;background:var(--surface);backdrop-filter:blur(10px);}

/* ── MÀN HÌNH NHỎ ── */
@media(max-width:1100px){
  .hm-hero{grid-template-columns:1fr;}
  .hm-side{min-width:0;}
  .hm-clock,.hm-date{text-align:left;}
}
@media(max-width:800px){
  .content{padding:14px 12px 20px;}
  .hm-hero{padding:20px;border-radius:22px;}
  .hm-clock{font-size:34px;}
  .quick-grid{grid-template-columns:repeat(2,1fr);gap:10px;}
  .qa-card{padding:13px;gap:10px;}
  .qa-icon{width:40px;height:40px;font-size:19px;}
  .hm-prices{grid-template-columns:1fr 1fr;}
}
@media (prefers-reduced-motion:reduce){
  .hm-hero,.qa-card,.info-card,.video-card,.stat-card-big,.status-card,.form-card,.sl-card{animation:none;}
}