:root {
  --shell-bg: #080303;
  --shell-panel: rgba(22, 6, 5, .88);
  --shell-red: #e52d24;
  --shell-gold: #ffc85b;
  --shell-cream: #fff3d2;
  --shell-muted: #bfaea6;
  --shell-line: rgba(255, 184, 69, .24);
  --shell-max: 1320px;
  --shell-header: 96px;
}

.global-header.site-header {
  height: 104px;
  padding: 12px 0;
  position: fixed;
  inset: 0 0 auto;
  z-index: 40;
  border: 0;
  background: transparent;
  backdrop-filter: none;
  pointer-events: none;
}

.global-header .header-shell {
  width: min(calc(100% - 34px), 1400px);
  height: 100%;
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: 14px;
  pointer-events: auto;
}

.global-header .brand-logo {
  width: 104px;
  height: 104px;
  flex: 0 0 104px;
  position: relative;
  z-index: 5;
  display: grid;
  place-items: center;
}

.global-header .brand-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 12px 24px rgba(0, 0, 0, .55)) drop-shadow(0 0 16px rgba(255, 85, 25, .18));
}

.global-header .nav-glass {
  min-width: 0;
  height: 64px;
  flex: 1;
  padding: 8px 10px 8px 18px;
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  border: 1px solid rgba(255, 224, 176, .18);
  border-radius: 999px;
  background: linear-gradient(115deg, rgba(255, 255, 255, .12), rgba(64, 16, 13, .38) 36%, rgba(10, 4, 4, .55) 78%);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .26), inset 0 -1px 0 rgba(255, 69, 34, .16);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
}

.global-header .nav-glass::before {
  content: "";
  position: absolute;
  inset: 1px 14% auto;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .65), transparent);
}

.global-header .main-nav {
  min-width: 0;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
}

.global-header .main-nav > a,
.global-header .nav-root {
  min-height: 42px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 0;
  border-radius: 999px;
  color: #eaded8;
  background: transparent;
  cursor: pointer;
  font: 600 .72rem/1 "Be Vietnam Pro", system-ui, sans-serif;
  white-space: nowrap;
  transition: color .2s, background .2s, box-shadow .2s;
}

.global-header .main-nav > a:hover,
.global-header .nav-root:hover,
.global-header .main-nav > a.active,
.global-header .nav-group.active > .nav-root {
  color: #fff;
  background: linear-gradient(135deg, rgba(131, 21, 17, .9), rgba(226, 48, 35, .84));
  box-shadow: inset 0 0 0 1px rgba(255, 196, 70, .27), 0 7px 20px rgba(203, 34, 24, .18);
}

.global-header .nav-group { position: relative; }
.global-header .nav-caret { color: var(--shell-gold); font-size: .62rem; }

.global-header .mega-panel {
  width: 680px;
  padding: 18px;
  position: absolute;
  left: 50%;
  top: calc(100% + 15px);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  border: 1px solid rgba(255, 184, 69, .27);
  border-radius: 20px;
  background: linear-gradient(145deg, rgba(27, 7, 5, .97), rgba(8, 2, 2, .98));
  box-shadow: 0 28px 70px rgba(0, 0, 0, .62), inset 0 1px 0 rgba(255, 255, 255, .08);
  backdrop-filter: blur(24px);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 8px);
  transition: opacity .2s, transform .2s, visibility .2s;
}

.global-header .nav-group:hover .mega-panel,
.global-header .nav-group.open .mega-panel,
.global-header .nav-group:focus-within .mega-panel {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

.global-header .mega-panel a {
  padding: 12px 13px;
  display: block;
  border: 1px solid transparent;
  border-radius: 12px;
  color: #f4e9e3;
  background: rgba(255, 255, 255, .018);
  font-size: .72rem;
  line-height: 1.35;
  transition: .2s;
}

.global-header .mega-panel a:hover,
.global-header .mega-panel a.active {
  border-color: rgba(255, 188, 69, .25);
  color: var(--shell-gold);
  background: rgba(131, 24, 16, .28);
}

.global-header .mega-panel small {
  margin-top: 4px;
  display: block;
  color: #9d8d86;
  font-size: .58rem;
  font-weight: 400;
}

.global-header .nav-actions { display: flex; align-items: center; gap: 7px; }
.global-header .nav-actions a,
.global-header .nav-actions button { flex: 0 0 auto; }
.global-header .icon-btn {
  width: 38px;
  height: 38px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 1px solid var(--shell-line);
  border-radius: 50%;
  color: #fff;
  background: rgba(12, 3, 3, .52);
  cursor: pointer;
}
.global-header .language { padding: 8px 5px; color: #fff; background: transparent; border: 0; font-size: .68rem; cursor: pointer; }
.global-header .verify-link { padding: 9px 11px; color: var(--shell-cream); font-size: .64rem; font-weight: 700; white-space: nowrap; }
.global-header .support {
  min-height: 38px;
  padding: 0 16px;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid rgba(255, 198, 83, .42);
  border-radius: 999px;
  color: #fff0cf;
  background: linear-gradient(145deg, rgba(118, 28, 17, .72), rgba(24, 6, 5, .62));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 10px 28px rgba(0,0,0,.24);
  backdrop-filter: blur(14px) saturate(145%);
  font-size: .67rem;
  font-weight: 800;
  white-space: nowrap;
  transition: border-color .2s, color .2s, transform .2s, box-shadow .2s;
}
.global-header .support::before {
  content: "";
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #ffc14a;
  box-shadow: 0 0 0 4px rgba(255,193,74,.09), 0 0 13px rgba(255,193,74,.78);
  animation: shellSupportPulse 2.1s ease-in-out infinite;
}
.global-header .support:hover {
  border-color: rgba(255, 211, 113, .72);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 12px 30px rgba(136,25,14,.28);
}
@keyframes shellSupportPulse { 50% { opacity: .58; transform: scale(.76); } }

.global-header .menu-toggle {
  width: 42px;
  height: 42px;
  padding: 0;
  display: none;
  place-content: center;
  gap: 7px;
  border: 1px solid var(--shell-line);
  border-radius: 50%;
  color: #fff;
  background: rgba(24, 6, 4, .8);
  cursor: pointer;
}
.global-header .menu-toggle span { width: 18px; height: 1px; display: block; background: currentColor; transition: .2s; }
.global-header .menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
.global-header .menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }

.global-footer {
  padding: 0;
  position: relative;
  overflow: hidden;
  border-top: 1px solid rgba(255, 177, 42, .28);
  color: #fff;
  background: radial-gradient(circle at 15% 15%, rgba(111, 20, 12, .2), transparent 34%), #070202;
}

.global-footer .compliance-marquee {
  height: 62px;
  overflow: hidden;
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgba(255, 184, 69, .2);
  background: linear-gradient(90deg, rgba(75, 11, 8, .56), rgba(13, 3, 3, .88), rgba(75, 11, 8, .56));
}
.global-footer .compliance-track { width: max-content; display: flex; align-items: center; animation: complianceRun 34s linear infinite; }
.global-footer .compliance-set { display: flex; align-items: center; gap: 32px; padding-right: 32px; white-space: nowrap; }
.global-footer .compliance-set span { color: #d9cac2; font: 500 .71rem/1.2 "Be Vietnam Pro", system-ui, sans-serif; }
.global-footer .compliance-set strong { color: var(--shell-gold); font-weight: 700; }
.global-footer .compliance-set i { color: #d9932c; font-style: normal; }
@keyframes complianceRun { to { transform: translateX(-50%); } }

.global-footer .footer-main {
  width: min(calc(100% - 40px), var(--shell-max));
  margin-inline: auto;
  padding: 56px 0 40px;
  display: grid;
  grid-template-columns: 1.45fr repeat(4, minmax(130px, 1fr));
  gap: 38px;
}
.global-footer .footer-intro { min-width: 0; }
.global-footer .footer-brand { width: 126px; margin: -20px 0 12px; display: block; }
.global-footer .footer-brand img { width: 100%; height: auto; filter: drop-shadow(0 12px 20px rgba(0, 0, 0, .55)); }
.global-footer .footer-intro strong { display: block; color: var(--shell-cream); font-size: .82rem; }
.global-footer .footer-intro p { max-width: 330px; margin: 9px 0 0; color: #9d8d86; font-size: .68rem; line-height: 1.7; }
.global-footer .footer-column h3 { margin: 0 0 14px; color: var(--shell-gold); font-size: .72rem; }
.global-footer .footer-column a { margin: 9px 0; display: block; color: #a99a93; font-size: .66rem; line-height: 1.35; transition: color .2s; }
.global-footer .footer-column a:hover { color: #fff; }

.global-footer .entity-line {
  width: min(calc(100% - 40px), var(--shell-max));
  margin-inline: auto;
  padding: 23px 0;
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: center;
  gap: 22px;
  border-top: 1px solid rgba(255, 184, 69, .22);
  border-bottom: 1px solid rgba(255, 184, 69, .16);
}
.global-footer .entity-line span { color: #9f8f88; font-size: .62rem; }
.global-footer .entity-line strong { margin-top: 3px; display: block; color: var(--shell-cream); font-size: .76rem; }
.global-footer .entity-arrow { color: var(--shell-gold); font-size: 1.2rem; }

.global-footer .footer-legal {
  width: min(calc(100% - 40px), var(--shell-max));
  margin-inline: auto;
  padding: 22px 0 26px;
  display: flex;
  justify-content: space-between;
  gap: 24px;
  color: #7e706b;
  font-size: .58rem;
  line-height: 1.65;
}
.global-footer .footer-legal-copy { max-width: 860px; }
.global-footer .footer-legal-links { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 14px; }
.global-footer .footer-legal a { color: #a99a93; }
.global-footer .age-mark { width: 37px; height: 37px; display: inline-grid; place-items: center; border: 2px solid #d8362d; border-radius: 50%; color: #fff; font-size: .68rem; font-weight: 800; }

@media (max-width: 1180px) {
  .global-header .main-nav > a,
  .global-header .nav-root { padding-inline: 9px; font-size: .66rem; }
  .global-header .verify-link { display: none; }
  .global-footer .footer-main { grid-template-columns: 1.4fr repeat(2, 1fr); }
}

@media (max-width: 920px) {
  :root { --shell-header: 82px; }
  .global-header { padding-top: 5px; }
  .global-header .header-shell { width: calc(100% - 20px); }
  .global-header .brand-logo { width: 82px; height: 82px; flex-basis: 82px; }
  .global-header .brand-logo img { width: 82px; max-height: 78px; }
  .global-header .nav-glass { height: 56px; justify-content: flex-end; padding: 6px 8px; }
  .global-header .menu-toggle { display: grid; }
  .global-header .main-nav {
    max-height: calc(100vh - 100px);
    padding: 14px;
    position: fixed;
    inset: 78px 10px auto;
    display: block;
    overflow-y: auto;
    border: 1px solid rgba(255, 184, 69, .25);
    border-radius: 19px;
    background: rgba(10, 3, 3, .98);
    box-shadow: 0 30px 70px rgba(0, 0, 0, .64);
    transform: translateY(-125%);
    opacity: 0;
    transition: transform .28s, opacity .2s;
  }
  .global-header .main-nav.open { transform: translateY(0); opacity: 1; }
  .global-header .main-nav > a,
  .global-header .nav-root { width: 100%; min-height: 46px; justify-content: space-between; padding-inline: 14px; }
  .global-header .nav-group { width: 100%; }
  .global-header .mega-panel {
    width: auto;
    padding: 5px 7px 10px;
    position: static;
    display: none;
    grid-template-columns: 1fr;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
  }
  .global-header .nav-group.open .mega-panel { display: grid; transform: none; }
  .global-header .mega-panel a { padding: 10px 15px; }
  .global-header .nav-actions .language { display: none; }
  .global-header .support { padding: 10px 12px; }
  .global-footer .footer-main { grid-template-columns: 1fr 1fr; }
  .global-footer .footer-intro { grid-column: 1 / -1; }
  .global-footer .entity-line { grid-template-columns: 1fr; gap: 12px; }
  .global-footer .entity-arrow { transform: rotate(90deg); }
  .global-footer .footer-legal { flex-direction: column; }
  .global-footer .footer-legal-links { justify-content: flex-start; }
}

@media (max-width: 560px) {
  .global-header .icon-btn { display: none; }
  .global-header .support { font-size: 0; }
  .global-header .support::after { content: "Hỗ trợ"; font-size: .64rem; }
  .global-footer .compliance-marquee { height: 54px; }
  .global-footer .footer-main { grid-template-columns: 1fr; gap: 25px; padding-top: 44px; }
  .global-footer .footer-intro { grid-column: auto; }
  .global-footer .entity-line,
  .global-footer .footer-legal { width: calc(100% - 28px); }
}

@media (prefers-reduced-motion: reduce) {
  .global-footer .compliance-track { animation: none; }
}
