/* V16.24 — THE LEGENDS Metallic Luxury Theme
   Ánh kim sáng bóng cho frontend: shop, member, member-register, livestream. */
:root{
  --metal-black:#020806;
  --metal-emerald-900:#03130e;
  --metal-emerald-800:#052019;
  --metal-emerald-700:#0a3328;
  --metal-gold-50:#fff8d7;
  --metal-gold-100:#fff0b8;
  --metal-gold-200:#f7d889;
  --metal-gold-300:#e7bd5d;
  --metal-gold-500:#c88f2e;
  --metal-gold-700:#80551a;
  --metal-platinum:#f8f1df;
  --metal-glass:rgba(8,34,27,.72);
  --metal-glass-strong:rgba(3,17,13,.88);
  --metal-line:rgba(255,224,150,.32);
  --metal-line-strong:rgba(255,231,172,.58);
  --metal-shadow:0 28px 90px rgba(0,0,0,.45),0 0 0 1px rgba(255,230,154,.06) inset;
  --metal-glow:0 0 28px rgba(244,213,138,.22),0 0 80px rgba(33,120,93,.18);
}
html,body,button,input,textarea,select,a,p,span,small,b,strong,li,td,th,label,h1,h2,h3,h4,h5,h6{
  font-family:'Be Vietnam Pro','Noto Sans Vietnamese','Noto Sans','Segoe UI',Roboto,Arial,sans-serif!important;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
body{
  background:
    radial-gradient(circle at 78% 7%,rgba(255,229,164,.20),transparent 23%),
    radial-gradient(circle at 10% 18%,rgba(28,120,88,.34),transparent 31%),
    radial-gradient(circle at 52% 112%,rgba(198,137,43,.16),transparent 34%),
    linear-gradient(180deg,var(--metal-black),var(--metal-emerald-900) 48%,#010403 100%)!important;
  color:var(--text-light,var(--text,#fff7df));
}
body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    linear-gradient(115deg,transparent 0 38%,rgba(255,246,198,.035) 42%,transparent 46% 100%),
    linear-gradient(rgba(255,228,157,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,228,157,.035) 1px,transparent 1px);
  background-size:100% 100%,54px 54px,54px 54px;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.72),transparent 92%);
}
.font-serif,.section-title,.hero-content h1,.footer-banner-content h4,.brand-mark strong,.portal-header h1,.gate-card h1,.hero h2,.form h2{
  font-family:'Be Vietnam Pro','Noto Sans Vietnamese','Noto Sans','Segoe UI',Arial,sans-serif!important;
  font-weight:900!important;
}
header,.live-topbar,.mobile-member-topbar,.member-sidebar,.portal-header,.top{
  background:
    linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.012)),
    linear-gradient(135deg,rgba(10,47,36,.92),rgba(2,12,9,.92))!important;
  border-color:var(--metal-line)!important;
  box-shadow:0 18px 60px rgba(0,0,0,.36),0 1px 0 rgba(255,240,190,.12) inset;
  backdrop-filter:blur(18px) saturate(150%);
}
#render-logo-name,.brand h1,.live-brand,.brand-mark strong,.section-title,.mini-label,.eyebrow,.live-section-title h2,.portal-header h1,.gate-card h1{
  background:linear-gradient(90deg,#fff8dc 0%,#f8d77e 26%,#b98125 52%,#fff1b8 72%,#d99f3f 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent!important;
  text-shadow:0 0 24px rgba(255,219,127,.15);
}
.search-bar input,.live-search input,.lux-input,.dark-input,.field input,input,textarea,select{
  background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(0,0,0,.16))!important;
  border:1px solid var(--metal-line)!important;
  color:var(--metal-platinum)!important;
  box-shadow:0 1px 0 rgba(255,255,255,.09) inset,0 12px 32px rgba(0,0,0,.18);
}
.search-bar input:focus,.live-search input:focus,.lux-input:focus,.dark-input:focus,.field input:focus,input:focus,textarea:focus,select:focus{
  border-color:var(--metal-gold-100)!important;
  box-shadow:0 0 0 4px rgba(247,216,137,.12),0 0 28px rgba(247,216,137,.18)!important;
  outline:none!important;
}
.btn-gold,.gold-btn,.btn.gold,.live-gold-btn,.live-gold-cta,.lp-btn,.std-btn.primary,button.primary,
.live-product-actions button:last-child,.gate-actions .gold-btn:first-child{
  position:relative;
  overflow:hidden;
  border:1px solid rgba(255,240,184,.68)!important;
  background:
    linear-gradient(135deg,#fff8d7 0%,#f2cf78 19%,#b77923 42%,#ffe9a5 63%,#9b681f 82%,#f8d883 100%)!important;
  color:#150d04!important;
  box-shadow:0 14px 36px rgba(208,151,48,.25),0 1px 0 rgba(255,255,255,.45) inset,0 -1px 0 rgba(92,54,9,.55) inset!important;
  text-shadow:0 1px 0 rgba(255,255,255,.45);
}
.btn-gold::after,.gold-btn::after,.btn.gold::after,.live-gold-btn::after,.live-gold-cta::after,.lp-btn::after,.std-btn.primary::after,button.primary::after{
  content:"";
  position:absolute;
  top:-80%;
  bottom:-80%;
  left:-45%;
  width:38%;
  transform:rotate(18deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.58),transparent);
  animation:metalSweep 4.8s ease-in-out infinite;
  pointer-events:none;
}
@keyframes metalSweep{0%,62%{left:-50%;opacity:0}70%{opacity:.7}100%{left:125%;opacity:0}}
.btn-outline,.ghost-btn,.soft-link,.live-outline-btn,.header-icon,.mini-btn,.topnav .btn:not(.gold),.secondary-register{
  border:1px solid var(--metal-line)!important;
  background:linear-gradient(180deg,rgba(255,246,205,.07),rgba(255,255,255,.015))!important;
  color:var(--metal-gold-100)!important;
  box-shadow:0 1px 0 rgba(255,255,255,.08) inset,0 12px 30px rgba(0,0,0,.16);
}
.hero-wrapper,.col-card,.prd-card,.footer-banner-box,.vvip-box,.modal,.lux-panel,.progress-card,.notice-card,.digital-card,.checkin-card,.wallet-mini-card,.reward-projection-panel,.member-product-card,.card,.step,.plan,
.live-video-card,.live-chat-card,.live-pinned-card,.live-product-card,.live-deal-card,.live-schedule-card,.live-benefit-card,.live-review-card,.live-cart-panel{
  border:1px solid var(--metal-line)!important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.018)),
    radial-gradient(circle at 82% 0%,rgba(255,221,138,.14),transparent 34%),
    linear-gradient(145deg,rgba(8,37,29,.88),rgba(2,10,8,.94))!important;
  box-shadow:var(--metal-shadow)!important;
  backdrop-filter:blur(14px) saturate(140%);
}
.hero-wrapper::before,.prd-card::before,.col-card::before,.live-video-card::before,.live-pinned-card::before,.live-product-card::before,.digital-card::before,.reward-projection-panel::before,.card::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:inherit;
  background:linear-gradient(120deg,transparent 0 22%,rgba(255,255,255,.07) 32%,transparent 45% 100%);
  opacity:.75;
}
.prd-card,.col-card,.live-product-card,.member-product-card,.card{position:relative;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;}
.prd-card:hover,.col-card:hover,.live-product-card:hover,.member-product-card:hover,.card:hover{
  transform:translateY(-5px);
  border-color:var(--metal-line-strong)!important;
  box-shadow:0 28px 80px rgba(0,0,0,.42),var(--metal-glow)!important;
}
.badge,.std-badge,.live-badge,.member-product-img b,.live-badge-sale{
  background:linear-gradient(135deg,var(--metal-gold-50),var(--metal-gold-300),var(--metal-gold-700))!important;
  color:#160e05!important;
  border:1px solid rgba(255,243,196,.55)!important;
  box-shadow:0 8px 22px rgba(207,148,43,.22),0 1px 0 rgba(255,255,255,.45) inset;
}
.section-title,.live-section-title h2,.portal-header h1,.reward-panel-main h3,.checkin-card h3,.wallet-mini-card h3,.member-product-info h3,.hero h2,.form h2{
  letter-spacing:.06em;
}
.section-header::after,.features-bar::before,.lp-divider,.footer-info::before{
  content:"";
  display:block;
  height:1px;
  background:linear-gradient(90deg,transparent,var(--metal-gold-100),var(--metal-gold-700),transparent);
  box-shadow:0 0 18px rgba(246,211,130,.2);
}
img{
  image-rendering:auto;
}
.prd-card img,.col-card img,.live-product-card img,.member-product-img img,.footer-banner-box img,.hero-slide img{
  filter:saturate(1.05) contrast(1.04);
}
.live-member-float,.live-login-float,.live-login-card{
  border:1px solid var(--metal-line-strong)!important;
  background:linear-gradient(135deg,rgba(255,243,196,.12),rgba(2,11,8,.92))!important;
  box-shadow:0 20px 70px rgba(0,0,0,.44),0 0 36px rgba(247,216,137,.18)!important;
}
.table-scroll,.std-table-wrap,.live-chat-list,.live-cart-items{scrollbar-color:rgba(247,216,137,.55) rgba(255,255,255,.05);}
@media(max-width:860px){
  header,.live-topbar,.portal-header{backdrop-filter:blur(16px) saturate(145%)}
  .hero-wrapper,.live-video-card,.live-pinned-card{box-shadow:0 18px 54px rgba(0,0,0,.35)!important}
}
@media(prefers-reduced-motion:reduce){.btn-gold::after,.gold-btn::after,.btn.gold::after,.live-gold-btn::after,.live-gold-cta::after,.lp-btn::after,.std-btn.primary::after,button.primary::after{animation:none!important}}