@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;500;600;700;800;900&display=swap');

*, *::before, *::after {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased; 
  -moz-osx-font-smoothing: grayscale; 
}

:root {
  --hs-bg: #080b12;
  --hs-surface: rgba(12, 16, 27, .92);
  --hs-surface-2: rgba(18, 24, 39, .86);
  --hs-border: rgba(255,255,255,.1);
  --hs-border-strong: rgba(250,204,21,.24);
  --hs-text: #f8fafc;
  --hs-muted: #94a3b8;
  --hs-gold: #facc15;
  --hs-amber: #f59e0b;
  --hs-blue: #60a5fa;
  --hs-green: #34d399;
  --hs-red: #fb7185;
  --hs-radius: 14px;
  --hs-header-h: 72px;
}

.ev-shell-modern,
.pm-shell,
.gc-shell,
.result,
#bxh-wrap,
.bxh-shell,
.boss-shell {
  position: relative;
  overflow: hidden;
  border-radius: 20px !important;
  background: linear-gradient(175deg,#08091a 0%,#04060f 100%) !important;
  border: 1px solid rgba(255,215,0,.15) !important;
  box-shadow: 0 20px 60px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,215,0,.08) !important;
}

.pm-shell,
.gc-shell,
.result,
#bxh-wrap,
.bxh-shell,
.boss-shell {
  isolation: isolate;
}

.pm-shell::after,
.gc-shell::after,
.result::after,
#bxh-wrap::after,
.bxh-shell::after,
.boss-shell::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 3px;
  pointer-events: none;
  z-index: 2;
  background: linear-gradient(90deg, transparent, rgba(250,204,21,.9), rgba(255,255,255,.7), rgba(250,204,21,.9), transparent);
  background-size: 260% 100%;
  animation: hsShellLine 4.8s ease-in-out infinite;
}

@keyframes hsShellLine {
  from { background-position: 260% 0; }
  to { background-position: -260% 0; }
}

.pm-page-hd,
.gc-banner,
.tn-banner,
.bxh-hd,
.duatop-hd,
.boss-hd {
  background: linear-gradient(135deg, rgba(250,204,21,.07), rgba(245,158,11,.03)) !important;
  border-bottom: 1px solid rgba(255,255,255,.07) !important;
}

.pm-page-hd-title,
.gc-banner-title,
.bxh-hd-title,
.bxh-hd-txt h2,
.duatop-title,
.boss-hd-title {
  letter-spacing: 0 !important;
}

.ev-cards,
.gift-grid,
.gc-codes-grid,
.tn-grid,
.duatop-notes {
  align-items: stretch;
}

.pm-page-hd-icon,
.gc-banner-icon,
.bxh-hd-icon,
.log-hd-icon,
.duatop-icon,
.boss-hd-icon {
  width: 52px !important;
  height: 52px !important;
  border-radius: 15px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: linear-gradient(135deg,#1c0f00,#3a1e00) !important;
  border: 1px solid rgba(255,215,0,.38) !important;
  color: var(--hs-gold) !important;
  box-shadow: 0 0 14px rgba(255,165,0,.24) !important;
  animation: hsIconFloat 5.5s ease-in-out infinite !important;
  filter: none !important;
}

.pm-page-hd-icon i,
.gc-banner-icon i,
.bxh-hd-icon i,
.log-hd-icon i,
.duatop-icon i,
.boss-hd-icon i {
  color: var(--hs-gold) !important;
  font-size: 22px;
  text-shadow: 0 0 18px rgba(255,215,0,.72);
}

@keyframes hsIconFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

.pm-page-hd-title,
.gc-banner-title,
.bxh-hd-title,
.bxh-hd-txt h2,
.duatop-title,
.boss-hd-title,
.coin-preview-val,
.gc-code-value,
.td-rank,
.rank-1,
.rank-2,
.rank-3 {
  font-family: 'Boogaloo', cursive !important;
  color: var(--hs-gold) !important;
  background: linear-gradient(90deg,#facc15 0%,#fde68a 24%,#fff 42%,#f59e0b 68%,#facc15 100%) !important;
  background-size: 240% auto !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  animation: hsTitleFlame 5.8s ease-in-out infinite, hsTextWave 7s linear infinite !important;
}

@keyframes hsTitleFlame {
  0%, 100% { opacity: .96; }
  50% { opacity: 1; }
}

@keyframes hsTextWave {
  to { background-position: 240% center; }
}

.pm-tag,
.sc,
.gc-code-exp,
.bxh-cd-val,
#countdown-timer,
#countdown_task,
.duatop-rank {
  border-radius: 999px !important;
  border: 1px solid rgba(255,215,0,.22) !important;
  background: rgba(255,215,0,.08) !important;
  color: #fde68a !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 0 18px rgba(255,215,0,.1) !important;
}

.pm-main-tab-icon,
.net-icon,
.pmb-icon,
.gc-label .lbl-icon,
.gc-code-icon,
.tab-icon,
.bxh-tab-icon,
.bxh-alert-icon,
.hs-inline-icon,
.wi,
.boss-tag i,
.boss-label i,
.boss-sec i,
.boss-hp-label i,
.boss-nap-badge i {
  width: 34px !important;
  height: 34px !important;
  border-radius: 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(255,255,255,.05) !important;
  border: 1px solid rgba(255,255,255,.09) !important;
  color: var(--hs-gold) !important;
  box-shadow: 0 0 12px rgba(255,215,0,.08);
}

.pm-main-tab-icon i,
.net-icon i,
.pmb-icon i,
.gc-label .lbl-icon i,
.gc-code-icon i,
.tab-icon i,
.bxh-tab-icon i,
.bxh-alert-icon i,
.hs-inline-icon i,
.wi i,
.boss-tag i,
.boss-label i,
.boss-sec i,
.boss-hp-label i,
.boss-nap-badge i {
  color: var(--hs-gold) !important;
  font-size: 15px;
  line-height: 1;
}

.pkg-card,
.gc-code-card,
.mg-btn,
.net-item,
.pay-method-btn,
.bxh-outer,
.boss-gif-card,
.boss-hp-wrap,
.boss-nap-badge,
.boss-tbl-wrap,
.duatop-note,
.gift-card,
.cart-item {
  position: relative;
  overflow: hidden;
  border-radius: 16px !important;
  background: linear-gradient(160deg,rgba(255,255,255,.052) 0%,rgba(0,0,0,.5) 100%) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  box-shadow: 0 10px 28px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.045) !important;
}

.gc-code-card::after,
.mg-btn::after,
.net-item::after,
.pay-method-btn::after,
.boss-gif-card::after,
.boss-hp-wrap::after,
.boss-tbl-wrap::after,
.duatop-note::after,
.gift-card::after,
.cart-item::after {
  content: '';
  position: absolute;
  top: 0;
  left: -60%;
  width: 60%;
  height: 100%;
  pointer-events: none;
  background: linear-gradient(105deg,transparent 30%,rgba(255,255,255,.055) 50%,transparent 70%);
  animation: hsCardShimmer 7s ease-in-out infinite;
  will-change: transform;
}

@keyframes hsCardShimmer {
  0%, 35% { transform: translateX(0); }
  60%, 100% { transform: translateX(300%); }
}

.pm-submit,
.gc-btn-submit,
.gc-btn-copy,
.btn-napngay,
.btn-fight,
.btn-preview,
.btn-sm-view,
.btn-claimable,
.btn-view-prize,
.btn-claim-bxh,
.btn-success,
.bxh-reload-btn {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg,#facc15,#f59e0b) !important;
  color: #111827 !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  box-shadow: 0 4px 16px rgba(245,158,11,.24) !important;
  transition: transform .2s cubic-bezier(.34,1.56,.64,1), box-shadow .2s ease, filter .2s ease !important;
}

.pm-submit::before,
.gc-btn-submit::before,
.gc-btn-copy::before,
.btn-napngay::before,
.btn-fight::before,
.btn-preview::before,
.btn-sm-view::before,
.btn-claimable::before,
.btn-view-prize::before,
.btn-claim-bxh::before,
.btn-success::before,
.bxh-reload-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -60%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);
  animation: hsButtonShimmer 4.8s ease-in-out infinite;
  will-change: transform;
}

.pm-submit:hover,
.gc-btn-submit:hover,
.gc-btn-copy:hover,
.btn-napngay:hover,
.btn-fight:hover,
.btn-preview:hover,
.btn-sm-view:hover,
.btn-claimable:hover,
.btn-view-prize:hover,
.btn-claim-bxh:hover,
.btn-success:hover,
.bxh-reload-btn:hover {
  transform: translateY(-2px) !important;
  filter: brightness(1.05);
  box-shadow: 0 8px 28px rgba(245,158,11,.5), 0 0 36px rgba(250,204,21,.2) !important;
}

@keyframes hsButtonShimmer {
  0%, 40% { transform: translateX(0); }
  70%, 100% { transform: translateX(350%); }
}

.btn-locked,
.btn-claimed,
.btn-done-bxh,
.btn-sm-claim.locked,
.btn-sm-claim.done,
.btn-secondary {
  background: rgba(255,255,255,.055) !important;
  color: #94a3b8 !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  box-shadow: none !important;
}

html.melior {
  overflow-y: scroll;
}

html.melior body {
  background-color: #080b12 !important;
  background-image:
    linear-gradient(180deg, rgba(5,7,13,.28) 0%, rgba(7,10,18,.58) 46%, rgba(8,11,18,.88) 100%),
    url('/ui/site/melior/assets/images/bg/header_bg.jpg') !important;
  background-position: center top, center top !important;
  background-repeat: no-repeat, no-repeat !important;
  background-size: 100% 100%, cover !important;
  background-attachment: fixed, fixed !important;
  color: var(--hs-text) !important;
  font-family: 'Be Vietnam Pro', 'Muli', Arial, sans-serif;
  overflow-x: hidden;
}

@media (max-width: 768px) {
  html.melior body {
    background-position: center top, center top !important;
    background-size: 100% 100%, auto 100vh !important;
    background-attachment: scroll, scroll !important;
  }
}

#page-container,
#main-container {
  background: transparent !important;
  min-height: 100vh;
}

#page-header {
  position: sticky;
  top: 0;
  z-index: 1050;
  min-height: var(--hs-header-h);
  background: rgba(8, 11, 18, .86) !important;
  border-bottom: 1px solid var(--hs-border);
  box-shadow: 0 14px 40px rgba(0,0,0,.32);
  backdrop-filter: blur(10px);
}

#page-header .content-header {
  min-height: var(--hs-header-h);
}

#sidebar {
  background: rgba(8, 11, 18, .96) !important;
  border-right: 1px solid var(--hs-border);
}

.sidebar-content,
.content-header-fullrow,
.content-side {
  background: transparent !important;
}

.content-header-item .link-effect span,
.font-size-xl.text-dual-primary-dark {
  color: var(--hs-text) !important;
  letter-spacing: .02em;
}

.hs-icon-menu,
.nav-main-header.hs-icon-menu,
.nav-main.hs-icon-menu {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav-main.hs-icon-menu {
  justify-content: flex-start;
  flex-direction: column;
  align-items: center;
  padding: 12px 8px;
}

.hs-icon-menu li {
  margin: 0 !important;
  padding: 0 !important;
}

/* ── CẤU HÌNH MENU CHÍNH (ICON TRÊN, TEXT DƯỚI) ── */
.hs-menu-link,
.melior .nav-main-header .hs-menu-link,
.melior .nav-main .hs-menu-link {
  min-width: 50px;
  min-height: 52px;
  height: auto;
  padding: 6px 10px !important;
  border-radius: 12px !important;
  display: inline-flex !important;
  flex-direction: column; /* Đưa text xuống dưới icon */
  align-items: center;
  justify-content: center;
  gap: 3px; /* Khoảng cách icon và text */
  color: var(--hs-text) !important;
  background: rgba(255,255,255,.055) !important;
  border: 1px solid var(--hs-border) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
  transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
  text-decoration: none !important;
}

.nav-main.hs-icon-menu .hs-menu-link {
  width: 100%;
  justify-content: flex-start;
  flex-direction: row; /* Ở thanh sidebar ẩn thì xếp ngang lại */
  gap: 10px;
  padding: 8px 12px !important;
}

.hs-menu-link i {
  color: var(--hs-gold) !important;
  font-size: 18px;
  line-height: 1;
  margin: 0 !important;
}

.hs-menu-label {
  font-size: 10px; /* Thu nhỏ text menu */
  font-weight: 700;
  color: var(--hs-text);
  line-height: 1;
  text-align: center;
}

/* ── NÚT HOME (WEBSITE/LOGO) LUÔN GIỮ NẰM NGANG ── */
.hs-menu-home {
  flex-direction: row !important;
  padding: 0 !important;
  min-height: auto;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
.hs-menu-home i {
  width: 28px;
  height: 28px;
  border-radius: 10px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  font-size: 21px !important;
  background: rgba(250,204,21,.12);
  border: 1px solid rgba(250,204,21,.24);
  box-shadow: 0 0 18px rgba(250,204,21,.22);
}

.hs-menu-brand {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1.05;
}

.hs-menu-game {
  font-family: 'Boogaloo', cursive;
  font-size: 15px;
  color: #fde68a;
  text-shadow: 0 0 12px rgba(250,204,21,.35);
  white-space: nowrap;
}

.hs-menu-home .hs-menu-label {
  font-size: 9px;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: .06em;
  text-align: left;
}

.nav-main-header .hs-menu-label,
.nav-main .hs-menu-label {
  position: static;
  width: auto;
  height: auto;
  padding: 0;
  margin: 0;
  overflow: visible;
  clip: auto;
  border: 0;
}

.hs-menu-link:hover,
.hs-menu-link.active,
.hs-menu-link:focus {
  transform: translateY(-2px);
  color: #111827 !important;
  background: linear-gradient(135deg, var(--hs-gold), var(--hs-amber)) !important;
  border-color: rgba(255,255,255,.2) !important;
  box-shadow: 0 12px 30px rgba(245,158,11,.24);
}

.hs-menu-link:hover i,
.hs-menu-link.active i,
.hs-menu-link:focus i {
  color: #111827 !important;
}

.hs-menu-home:hover .hs-menu-game,
.hs-menu-home:focus .hs-menu-game {
  color: #111827;
  text-shadow: none;
}

.hs-menu-user {
  color: var(--hs-text);
  font-size: 12px;
  font-weight: 800;
  max-width: 160px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.05);
  border: 1px solid var(--hs-border);
}

#main-container {
  padding-top: 0;
}

.content.content-full,
.container.pt-3,
.site-wrapper {
  max-width: 1240px;
}

.invisible[data-toggle="appear"] {
  visibility: visible !important;
  opacity: 1 !important;
  transform: none !important;
}

.site-wrapper {
  padding-top: 18px !important;
}

.site-row {
  align-items: flex-start !important;
}

.site-sidebar,
.hs-leftbar-host {
  position: relative !important;
  top: auto !important;
  align-self: flex-start !important;
  z-index: 5;
}

.site-sidebar > .lb,
.hs-leftbar-host > .lb {
  position: sticky !important;
  top: calc(var(--hs-header-h) + 14px) !important;
}

.lb {
  border-radius: 14px !important;
  min-height: 420px;
  width: 260px;
  max-width: 100%;
  transform: translateZ(0);
}

#xu {
  display: inline-block;
  min-width: 92px;
}

.lb-title,
.lb-item-sub,
.hr-card-sub {
  display: none !important;
}

.lb-menu {
  padding: 10px !important;
  gap: 8px !important;
}

.lb-item {
  min-height: 52px;
  border-radius: 13px !important;
  background: rgba(255,255,255,.045) !important;
  border: 1px solid rgba(255,255,255,.07);
}

.lb-item-icon,
.hr-card-icon,
.btn-icon,
.nav-link i,
.btn i,
button i {
  flex: 0 0 auto;
}

.lb-item-name,
.hr-card-name {
  letter-spacing: 0 !important;
}

.block,
.card,
.result,
.tab-pane,
.modal-content,
.table,
.alert,
.content.content-full[style] {
  border-radius: var(--hs-radius) !important;
}

.block,
.card,
.result,
.tab-content,
.modal-content,
.content.content-full[style] {
  background: var(--hs-surface) !important;
  border: 1px solid var(--hs-border) !important;
  box-shadow: 0 20px 55px rgba(0,0,0,.32) !important;
  color: var(--hs-text) !important;
}

.content.content-full[style] {
  border-color: var(--hs-border-strong) !important;
  padding: 16px !important;
}

.alert {
  background: rgba(96,165,250,.09) !important;
  border: 1px solid rgba(96,165,250,.22) !important;
  color: #dbeafe !important;
  text-align: left !important;
}

.nav-tabs {
  gap: 8px;
  border-bottom: 0 !important;
  flex-wrap: wrap;
}

.nav-tabs .nav-link,
.nav-pills .nav-link,
.bxh-tab-btn,
.btn-period {
  min-height: 40px;
  border-radius: 12px !important;
  border: 1px solid var(--hs-border) !important;
  background: rgba(255,255,255,.055) !important;
  color: var(--hs-text) !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0 !important;
  padding: 8px 12px !important;
}

.nav-tabs .nav-link.active,
.nav-pills .nav-link.active,
.bxh-tab-btn.active,
.btn-period.active,
.nav-tabs .nav-link:hover,
.nav-pills .nav-link:hover {
  background: linear-gradient(135deg, rgba(250,204,21,.95), rgba(245,158,11,.95)) !important;
  color: #111827 !important;
  border-color: rgba(255,255,255,.2) !important;
  box-shadow: 0 12px 30px rgba(245,158,11,.18);
}

.btn,
button,
.btn-view-prize,
.btn-sm-claim,
.btn-sm-view,
.btn-claimable,
.btn-locked,
.btn-claimed,
.articleAccess {
  border-radius: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
}

.btn-primary,
.btn-success,
.btn-info,
.btn-warning,
.btn-danger,
.btn-dual-secondary:not(.hs-menu-link),
.articleAccess {
  border: 1px solid rgba(255,255,255,.14) !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.24);
}

.table,
.table-striped,
.table-responsive table {
  overflow: hidden;
  color: var(--hs-text) !important;
  background: rgba(255,255,255,.025) !important;
}

.table thead th,
.table th {
  background: rgba(250,204,21,.1) !important;
  color: #fde68a !important;
  border-color: rgba(250,204,21,.16) !important;
  font-size: 12px !important;
  text-transform: uppercase;
}

.table td,
.table th {
  border-color: rgba(255,255,255,.08) !important;
  vertical-align: middle !important;
}

.table-striped tbody tr:nth-of-type(odd),
.table tbody tr:hover {
  background: rgba(255,255,255,.035) !important;
}

.image-container img,
.articleAccess img,
.table img {
  border-radius: 10px !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  background: rgba(255,255,255,.08) !important;
  padding: 4px;
}

.footer-basic,
.home-footer,
.site-footer {
  display: none !important;
}

.hs-page-note-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.hs-mini-icon {
  width: 30px;
  height: 30px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(250,204,21,.1);
  border: 1px solid rgba(250,204,21,.22);
  color: #fde68a;
}

.swal2-container,
.swal2-container.hs-swal-container {
  z-index: 300000 !important;
}

.hs-swal-popup {
  position: relative !important;
  overflow: hidden !important;
  border-radius: 18px !important;
  border: 1px solid rgba(250,204,21,.28) !important;
  background: linear-gradient(175deg, rgba(10,13,20,.99), rgba(5,7,13,.98)) !important;
  color: var(--hs-text) !important;
  box-shadow: 0 24px 80px rgba(0,0,0,.82), 0 0 34px rgba(250,204,21,.16), inset 0 1px 0 rgba(255,255,255,.06) !important;
}

.hs-swal-popup::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, transparent, rgba(250,204,21,.95), rgba(255,255,255,.85), rgba(245,158,11,.95), transparent);
  background-size: 260% 100%;
  animation: hsShellLine 2.4s ease-in-out infinite;
}

.hs-swal-title {
  font-family: 'Boogaloo', cursive !important;
  color: var(--hs-gold) !important;
  font-size: 28px !important;
  letter-spacing: 0 !important;
  text-shadow: 0 0 22px rgba(250,204,21,.35) !important;
}

.hs-swal-html {
  color: #dbe4f0 !important;
  font-family: 'Be Vietnam Pro', sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.55 !important;
}

.hs-swal-confirm {
  position: relative !important;
  overflow: hidden !important;
  min-height: 42px !important;
  padding: 0 22px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  background: linear-gradient(135deg,#facc15,#f59e0b) !important;
  color: #111827 !important;
  font-family: 'Be Vietnam Pro', sans-serif !important;
  font-weight: 900 !important;
  box-shadow: 0 8px 26px rgba(245,158,11,.36), 0 0 24px rgba(250,204,21,.14) !important;
}

.hs-swal-confirm:focus {
  box-shadow: 0 0 0 3px rgba(250,204,21,.18), 0 8px 26px rgba(245,158,11,.36) !important;
}

/* ── ĐIỀU CHỈNH GIAO DIỆN MOBILE ── */
@media (max-width: 991px) {
  :root { --hs-header-h: 64px; }
  
  #page-header .content-header {
    padding: 0 10px !important;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    width: 100%;
  }

  /* Khung giữa chứa menu vuốt ngang */
  .hs-mobile-scroll {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; 
  }
  .hs-mobile-scroll::-webkit-scrollbar { 
    display: none; 
  }

  .nav-main-header.hs-icon-menu {
    display: flex;
    flex-wrap: nowrap !important;
    justify-content: flex-start;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0;
  }
  
  .nav-main-header.hs-icon-menu li {
    flex: 0 0 auto;
  }

  /* ĐẢM BẢO USER LUÔN HIỂN THỊ TRÊN MỌI MÀN HÌNH */
  .hs-menu-user {
    display: block !important;
    max-width: 130px;
    font-size: 11px;
    padding: 6px 12px;
    margin-right: 0 !important;
  }
  
  /* Cấu hình lại leftbar cho bản Mobile */
  .site-sidebar,
  .hs-leftbar-host {
    position: static !important;
    width: 100% !important;
  }
  .site-sidebar > .lb,
  .hs-leftbar-host > .lb {
    position: relative !important;
    top: auto !important;
  }
  .lb {
    min-height: 0;
    width: 100%;
    max-width: 100%;
  }
  .lb-menu {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
    padding: 10px !important;
    overflow: hidden !important;
  }
  .lb-item {
    min-height: 68px;
    min-width: 0;
    width: auto !important; 
    align-self: stretch; 
    flex: 1 1 auto;
    padding: 10px 12px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    text-align: left;
    gap: 10px !important;
  }
  .lb-item::before,
  .lb-badge {
    display: none !important;
  }
  .lb-item-text {
    display: block !important;
    flex: 1 1 auto;
    min-width: 0;
  }
  .lb-item-name,
  .lb-item-sub {
    display: block !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    line-height: 1.25 !important;
  }
  .lb-item-icon {
    width: 42px !important;
    height: 42px !important;
    font-size: 18px !important;
  }
}

/* ── MÀN HÌNH ĐIỆN THOẠI NHỎ (CHỈ HIỆN ICON MENU) ── */
@media (max-width: 575px) {
  :root { --hs-header-h: 56px; }
  
  /* Ẩn hoàn toàn chữ trong các nút Menu, CHỈ giữ lại Icon */
  .hs-menu-link:not(.hs-menu-home) .hs-menu-label {
    display: none !important;
  }

  /* Scale lại nút thành hình vuông cân đối chứa icon */
  .hs-menu-link:not(.hs-menu-home) {
    flex-direction: row !important;
    min-width: 38px;
    height: 38px;
    min-height: 38px;
    padding: 0 !important;
    border-radius: 11px !important;
  }
  
  .hs-menu-link:not(.hs-menu-home) i { 
    font-size: 16px !important; 
  }

  /* Xử lý riêng logo/nút Home ở góc trái cho gọn */
  .hs-menu-home i {
    width: 26px;
    height: 26px;
    font-size: 15px !important;
  }
  .hs-menu-game { font-size: 13px; }
  .hs-menu-home .hs-menu-label { display: none !important; } /* Ẩn chữ "Website" */
  
  /* ĐẢM BẢO KHU VỰC USER VẪN HIỂN THỊ TỐT */
  .hs-menu-user {
    max-width: 90px;
    font-size: 10px;
    padding: 5px 8px;
  }

  .lb-menu {
    gap: 6px !important;
    padding: 8px !important;
  }
  .lb-item {
    min-width: 0;
    flex-basis: auto;
  }
  .table td,
  .table th {
    font-size: 11px !important;
    padding: 8px !important;
  }
}