/* =========================================================
   Theme tối dùng chung cho các màn sản phẩm dạng bảng điều khiển
   (Mega 6/45, Max 3D…): header, footer, select + danh sách lựa chọn,
   bảng chọn số (sheet), thanh mua trên điện thoại.
   Áp dụng khi script trang gắn .dash-on cho <body>; màu nhấn đổi qua --md-accent.
   ========================================================= */
body.dash-on {
  --md-bg: #0a1a42;
  --md-bg-2: #0c2156;
  --md-panel: rgba(16, 36, 92, 0.72);
  --md-line: rgba(120, 160, 255, 0.22);
  --md-ink: #0f1d4a;
  --md-ink-2: #5b6785;
  --md-mut: #8fa2cc;
  --md-red: #e5132f;
  --md-red-2: #ff3b50;
  --md-blue: #1f6fe5;
  --md-gold: #ffd25e;
  --md-card: #fff;
  --md-cline: #e3e8f2;
  background:
    radial-gradient(900px 340px at 72% 0, rgba(229, 19, 47, 0.32), transparent 70%),
    radial-gradient(700px 420px at 0 30%, rgba(40, 90, 220, 0.25), transparent 70%),
    linear-gradient(180deg, var(--md-bg), var(--md-bg-2));
  background-color: var(--md-bg-2);
  color: #fff;
}

/* ---------- HEADER / FOOTER theo theme ---------- */
body.dash-on .site-header {
  background: rgba(9, 22, 58, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--md-line);
  box-shadow: none;
}
body.dash-on .site-header .logo {
  display: inline-flex;
  align-items: center;
  padding: 6px 16px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}
body.dash-on .site-header .logo .brand-img {
  height: 34px;
}
body.dash-on .nav-i > a,
body.dash-on .nav-i > button {
  color: #dfe7fb;
}
body.dash-on .nav-i.active > a,
body.dash-on .nav-i.active > button,
body.dash-on .nav-i > a:hover,
body.dash-on .nav-i > button:hover {
  color: #fff;
}
body.dash-on .nav-i > a::after,
body.dash-on .nav-i > button::after {
  background: var(--md-accent-2, var(--md-red-2));
  height: 3px;
}
body.dash-on .nav .caret {
  border-color: #dfe7fb;
}
body.dash-on .drop {
  background: #0f2459;
  border: 1px solid var(--md-line);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
}
body.dash-on .drop a {
  color: #e4ebfb;
}
body.dash-on .drop a small {
  color: var(--md-mut);
}
body.dash-on .drop a:hover {
  background: rgba(255, 255, 255, 0.08);
}
body.dash-on .hright .lang-sel,
body.dash-on .hright .nsel.lang-sel,
body.dash-on .tier-chip,
body.dash-on .hicon,
body.dash-on .cart-btn {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--md-line);
  color: #e4ebfb;
}
body.dash-on .tier-chip small,
body.dash-on .tier-chip strong {
  color: #e4ebfb;
}
body.dash-on .tier-menu {
  background: #0f2459;
  color: #e4ebfb;
  border-color: var(--md-line);
}
body.dash-on .hright .btn-line {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.35);
  color: #fff;
}
body.dash-on .burger span,
body.dash-on .burger span::before,
body.dash-on .burger span::after {
  background: #fff;
}
body.dash-on .drawer {
  background: #0c1f50;
  color: #e4ebfb;
}
body.dash-on .drawer a {
  color: #e4ebfb;
}
body.dash-on .drawer .grp {
  color: var(--md-mut);
}
body.dash-on .drawer-head {
  border-color: var(--md-line);
}
body.dash-on .drawer-close {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
}
body.dash-on .site-footer {
  background: #071433;
  color: #9fb0d6;
  border-top: 1px solid var(--md-line);
  margin-top: 0;
}
body.dash-on .site-footer h4 {
  color: #fff;
}
body.dash-on .site-footer a {
  color: #b8c6e6;
}
body.dash-on .site-footer a:hover {
  color: #fff;
}
body.dash-on .site-footer .logo {
  display: inline-flex;
  padding: 6px 14px;
  border-radius: 12px;
  background: #fff;
}
body.dash-on .site-footer .social a {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}
body.dash-on .site-footer .fgrid,
body.dash-on .site-footer .fbottom {
  border-color: var(--md-line);
  color: #9fb0d6;
}
body.dash-on .site-footer .b18 {
  border-color: #9fb0d6;
  color: #9fb0d6;
}
body.dash-on .site-footer .app-foot {
  color: #9fb0d6;
}
@media (min-width: 1101px) {
  html body.dash-on .site-header .nav {
    display: flex !important;
  }
  html body.dash-on .site-header .burger {
    display: none;
  }
  /* menu theo thiết kế: Trang chủ · Mua vé · Vé của tôi · Kết quả */
  body.dash-on .nav-i:has(> a[href='than-tai-hoc']),
  body.dash-on .nav-i:has(> a[href='bo-suu-tap']) {
    display: none;
  }
  body.dash-on .hicon {
    display: inline-flex;
    align-items: center;
    width: auto;
    padding: 0 12px;
    border-radius: 999px;
    gap: 6px;
  }
  body.dash-on .hicon svg {
    width: 18px;
    height: 18px;
  }
  body.dash-on .hicon::after {
    content: 'Trợ giúp';
    font-size: 14px;
    font-weight: 600;
  }
  html body.dash-on .hright .auth-btns {
    display: flex !important;
  }
}

/* ---------- SELECT + danh sách lựa chọn ---------- */
body.dash-on select option {
  background: #0f2459;
  color: #fff;
}
body.dash-on .nsel-pop {
  background: #0f2459;
  border-color: var(--md-line);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.5);
}
body.dash-on .nsel-o {
  color: #e4ebfb;
}
body.dash-on .nsel-o:hover,
body.dash-on .nsel-o.act {
  background: rgba(255, 255, 255, 0.08);
}
body.dash-on .nsel-o.on,
body.dash-on .nsel-o.on.act {
  background: rgba(229, 19, 47, 0.22);
  color: #fff;
}
body.dash-on .nsel-o.dis {
  color: #5d6d93;
}
body.dash-on .nsel-sb {
  border-color: var(--md-line);
}
body.dash-on .nsel-s {
  background: #0a1a42;
  border-color: var(--md-line);
  color: #fff;
}

/* ---------- phần gốc còn lại ---------- */
body.dash-on .gp2 {
  padding: 0;
}
body.dash-on .gp2-demo {
  display: none;
}
html body.dash-on .gp2 .gp2-sel {
  display: none;
}
body.dash-on #info {
  display: none;
}
@media (min-width: 1101px) {
  body.dash-on .gp2-top {
    display: none;
  }
  body.dash-on #mbar {
    display: none;
  }
  body.dash-on {
    padding-bottom: 0;
  }
}
/* bảng chọn số (sheet) và thanh mua trên điện thoại theo theme */
body.dash-on .sheet {
  background: #0f2459;
  color: #fff;
}
body.dash-on .sh-h {
  border-color: var(--md-line);
}
body.dash-on .sh-c {
  color: var(--md-mut);
}
body.dash-on .sh-x {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
}
body.dash-on .sheet .n {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--md-line);
  color: #fff;
}
body.dash-on .sheet .n.on {
  background: var(--md-accent, var(--md-red));
  border-color: var(--md-accent, var(--md-red));
}
body.dash-on .sheet .n.dis {
  opacity: 0.4;
}
body.dash-on .sh-f {
  border-color: var(--md-line);
  background: #0c1f50;
}
body.dash-on .sheet .dn {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--md-line);
  color: #fff;
}
body.dash-on .sheet .dn.on {
  background: var(--md-accent, var(--md-red));
  border-color: var(--md-accent, var(--md-red));
  color: #fff;
}
body.dash-on .sheet .chip {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--md-line);
  color: #fff;
}
body.dash-on .sheet .chip.on {
  background: var(--md-accent, var(--md-red));
  border-color: var(--md-accent, var(--md-red));
}
body.dash-on .sheet .sh-lbl {
  color: #cfd9f2;
}
body.dash-on .sheet .btn-line {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.35);
}
html body.dash-on .mbar.app {
  background: #0c1f50;
  border-top: 1px solid var(--md-line);
  box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.4);
}
html body.dash-on .mbar.app .mb-t small,
html body.dash-on .mbar.app .mb-t #mMeta {
  color: #cfd9f2;
}
html body.dash-on .mbar.app .mb-t b {
  color: #ff5a6a;
}
html body.dash-on .mbar.app #mAdd {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.3);
  color: #fff;
}

@media (max-width: 1100px) {
  body.dash-on .gp2-top {
    background: transparent;
    border-color: var(--md-line);
  }
  html body.dash-on .gp2-top h1,
  html body.dash-on .gp2-top .back,
  html body.dash-on .gp2-top .ic {
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
  }
  html body.dash-on .gp2-top .back {
    background: none;
  }
}