/* Vietlott home renewal ??HAVES */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@500;600;700;800&family=Noto+Sans+KR:wght@400;500;700;900&display=swap');

:root {
  --vl-ink: #121a26;
  --vl-ink-soft: #3a4554;
  --vl-muted: #445062;
  --vl-paper: #f6f3ee;
  --vl-surface: #fffdf9;
  --vl-line: rgba(42, 36, 28, 0.09);
  --vl-power: #d9773a;
  --vl-power-deep: #b4531a;
  --vl-mega: #1d6fd8;
  --vl-mega-deep: #0f3d7a;
  --vl-lotto535: #58b81a;
  --vl-lotto535-deep: #0d6b18;
  --vl-gold: #e0a21a;
  --vl-warm: #f3e7d4;
  --vl-accent: #1a5fb4;
  --vl-accent-deep: #0d3d7a;
  --vl-shadow: 0 16px 40px rgba(42, 36, 28, 0.08);
  --vl-radius: 22px;
  --vl-font-display: 'Outfit', 'Noto Sans KR', sans-serif;
  --vl-font-body: 'Noto Sans KR', sans-serif;
}

body {
  background-color: var(--vl-paper);
  background-image:
    radial-gradient(1100px 480px at 8% -8%, rgba(26, 95, 180, 0.12), transparent 55%),
    radial-gradient(900px 420px at 100% 0%, rgba(224, 162, 26, 0.14), transparent 48%),
    radial-gradient(700px 360px at 70% 100%, rgba(217, 119, 58, 0.07), transparent 50%),
    linear-gradient(180deg, #f8f5f0 0%, var(--vl-paper) 32%, #efe9e0 100%);
  color: var(--vl-ink);
  font-family: var(--vl-font-body);
  overflow-x: clip;
  max-width: 100%;
}

html {
  overflow-x: clip;
  max-width: 100%;
}

img,
svg,
video {
  max-width: 100%;
  height: auto;
}

/* offcanvas / ?ъ씠?쒕찓?닿? 媛€濡??ㅽ겕濡ㅼ쓣 留뚮뱾吏€ ?딅룄濡?*/
.my-side-menu,
.offcanvas {
  overscroll-behavior: contain;
}

main {
  max-width: 100%;
  overflow-x: clip;
}

@media (max-width: 767.98px) {
  .my-side-menu {
    display: none !important;
  }
}

/* ===== Header ===== */
.vl-site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  backdrop-filter: blur(14px);
  background: rgba(248, 245, 240, 0.92);
  border-bottom: 1px solid var(--vl-line);
}

.vl-site-header .vl-bar {
  max-width: 1140px;
  margin: 0 auto;
  padding: 14px 18px 10px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px 18px;
  align-items: center;
}

.vl-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  text-decoration: none;
  color: inherit;
  min-width: 0;
  width: max-content;
}

.vl-brand-logo {
  display: block;
  width: auto;
  height: clamp(34px, 5vw, 42px);
  max-width: min(210px, 58vw);
  object-fit: contain;
  object-position: left center;
  margin-bottom: -2px;
}

.vl-brand-mark {
  font-family: var(--vl-font-display);
  font-weight: 800;
  font-size: clamp(1.55rem, 3vw, 2rem);
  letter-spacing: 0.12em;
  line-height: 1.05;
  background: linear-gradient(120deg, #0d3d7a 0%, #1a5fb4 55%, #c2782a 130%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-transform: uppercase;
}

.vl-brand-sub {
  font-size: 0.72rem;
  color: var(--vl-ink-soft);
  font-weight: 700;
  letter-spacing: -0.01em;
  padding-left: 0;
  text-align: center;
  line-height: 1.05;
  margin-top: -2px;
  box-sizing: border-box;
  width: 0;
  min-width: 100%;
}

.vl-user-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
}

.vl-user-actions a {
  text-decoration: none;
  color: var(--vl-ink);
  font-size: 0.9rem;
  font-weight: 600;
  padding: 8px 12px;
  border-radius: 999px;
  transition: background .2s ease, color .2s ease, transform .2s ease;
}

.vl-user-actions a:hover {
  background: rgba(26, 95, 180, 0.1);
  transform: translateY(-1px);
}

.vl-user-actions a.vl-btn-solid {
  background: var(--vl-ink);
  color: #fff;
}

.vl-user-actions a.vl-btn-solid:hover {
  background: var(--vl-mega-deep);
  color: #fff;
}

.vl-nav {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: nowrap;
  gap: 10px 14px;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 6px;
  overflow: visible;
}

.vl-nav__links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
}

.vl-nav__links a,
.vl-nav__links .vl-nav-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  text-decoration: none;
  color: var(--vl-ink);
  font-weight: 800;
  font-size: 0.88rem;
  padding: 9px 14px;
  border-radius: 14px;
  background:
    linear-gradient(180deg, #ffffff 0%, #f7f4ef 100%);
  border: 1px solid rgba(42, 36, 28, 0.1);
  box-shadow: 0 4px 12px rgba(42, 36, 28, 0.04);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease, color .18s ease;
}

.vl-nav__links a i,
.vl-nav__links .vl-nav-link i {
  font-size: 1rem;
  line-height: 1;
  opacity: .92;
}

.vl-nav-logo {
  display: block;
  height: 22px;
  width: auto;
  max-width: 78px;
  object-fit: contain;
  object-position: left center;
  flex: 0 0 auto;
  filter: drop-shadow(0 2px 4px rgba(11, 26, 46, 0.12));
}

.vl-nav__links a:hover,
.vl-nav__links .vl-nav-link:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(11, 26, 46, 0.1);
  background: #fff;
}

.vl-nav-link--guide {
  border-color: rgba(13, 61, 122, 0.16);
  background: linear-gradient(180deg, #f7f5ff, #efecfb);
  color: #2a3f6d;
}
.vl-nav-link--guide i { color: #4a6bb5; }
.vl-nav-link--guide:hover {
  border-color: rgba(13, 61, 122, 0.28);
  color: #0d3d7a;
}

.vl-nav-link--charge {
  border-color: rgba(38, 161, 123, 0.22);
  background: linear-gradient(180deg, #f3fcf8, #e8f7f1);
  color: #0f6b4c;
}
.vl-nav-link--charge i { color: #26a17b; }

.vl-nav-link--pay {
  border-color: rgba(13, 61, 122, 0.18);
  background: linear-gradient(180deg, #f4f8ff, #eaf1fb);
  color: #0d3d7a;
}
.vl-nav-link--pay i { color: #1a5fb4; }

.vl-nav-dd {
  position: relative;
  flex: 0 0 auto;
}
.vl-nav-link--buy {
  border-color: rgba(217, 119, 58, 0.28);
  background: linear-gradient(135deg, #fff8f1 0%, #ffe8d4 100%);
  color: #8a4510;
  cursor: pointer;
  font: inherit;
}
.vl-nav-link--buy i { color: #d9773a; }
.vl-nav-dd.has-buy-open .vl-nav-link--buy {
  border-color: rgba(217, 119, 58, 0.55);
  box-shadow: 0 8px 20px rgba(217, 119, 58, 0.16);
}
.vl-nav-dd__caret {
  font-size: 0.78rem !important;
  opacity: 0.75;
  transition: transform .18s ease;
}
.vl-nav-dd.is-open .vl-nav-dd__caret {
  transform: rotate(180deg);
}
.vl-nav-dd__menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 10060;
  min-width: 260px;
  padding: 8px;
  border-radius: 16px;
  background: #fffdf9;
  border: 1px solid rgba(42, 36, 28, 0.1);
  box-shadow: 0 18px 40px rgba(42, 36, 28, 0.16);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.vl-nav-dd__menu[hidden] {
  display: none !important;
}
.vl-nav-dd__item {
  display: flex !important;
  align-items: center;
  gap: 10px;
  padding: 10px 12px !important;
  border-radius: 12px !important;
  text-decoration: none;
  border: 1px solid transparent;
  box-shadow: none !important;
  transform: none !important;
  background: #f7f4ef;
  color: var(--vl-ink);
}
.vl-nav-dd__item:hover {
  background: #fff !important;
  border-color: rgba(42, 36, 28, 0.12);
  transform: none !important;
}
.vl-nav-dd__item .vl-nav-logo {
  height: 22px;
  max-width: 72px;
}
.vl-nav-dd__copy {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.vl-nav-dd__copy strong {
  font-size: 0.9rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.vl-nav-dd__copy em {
  font-style: normal;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--vl-ink-soft);
}
.vl-nav-dd__item--power {
  background: linear-gradient(135deg, #fff5eb 0%, #ffe6d2 100%);
  color: #9a4a12;
}
.vl-nav-dd__item--mega {
  background: linear-gradient(135deg, #eef6ff 0%, #dcebff 100%);
  color: #0d3d7a;
}
.vl-nav-dd__item--lotto535 {
  background: linear-gradient(135deg, #f4fce9 0%, #e5f6d4 100%);
  color: #0d6b18;
}
.vl-nav-dd__item.is-buy-open {
  opacity: 1;
  box-shadow: 0 0 0 2px rgba(27, 138, 74, 0.18) !important;
}
.vl-nav-dd__item.is-buy-closed {
  opacity: 0.78;
  filter: saturate(0.88);
}

/* 구매 가능 시 메뉴 하이라이트 */
.vl-nav-link.is-buy-open {
  opacity: 1;
  font-weight: 900;
  transform: translateY(-1px);
  animation: vl-buy-glow 2.4s ease-in-out infinite;
}
.vl-nav-link--power.is-buy-open {
  border-color: rgba(217, 119, 58, 0.7);
  background: linear-gradient(135deg, #fff8f1 0%, #ffd7b0 55%, #ffc089 100%);
  box-shadow: 0 10px 28px rgba(217, 119, 58, 0.28), 0 0 0 2px rgba(217, 119, 58, 0.18);
}
.vl-nav-link--mega.is-buy-open {
  border-color: rgba(29, 111, 216, 0.7);
  background: linear-gradient(135deg, #f5f9ff 0%, #cfe2ff 55%, #b5d2ff 100%);
  box-shadow: 0 10px 28px rgba(29, 111, 216, 0.26), 0 0 0 2px rgba(29, 111, 216, 0.16);
}
.vl-nav-link--lotto535.is-buy-open {
  opacity: 1;
  border-color: rgba(88, 184, 26, 0.7);
  background: linear-gradient(135deg, #f7ffe9 0%, #d8f5b8 55%, #c3ec95 100%);
  box-shadow: 0 10px 28px rgba(88, 184, 26, 0.24), 0 0 0 2px rgba(88, 184, 26, 0.16);
}
.vl-nav-link.is-buy-closed {
  opacity: 0.72;
  filter: saturate(0.85);
}
.vl-chip--buy {
  background: #1b8a4a;
  color: #fff !important;
  border: 0;
  font-size: 0.68rem;
  letter-spacing: -0.02em;
  padding: 3px 8px;
  box-shadow: 0 2px 8px rgba(27, 138, 74, 0.35);
}
@keyframes vl-buy-glow {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.06); }
}
@media (prefers-reduced-motion: reduce) {
  .vl-nav-link.is-buy-open { animation: none; }
}

.vl-nav-link--result {
  border-color: rgba(224, 162, 26, 0.3);
  background: linear-gradient(135deg, #fff9eb 0%, #fff0cc 100%);
  color: #8a5a00;
}
.vl-nav-link--result i { color: #e0a21a; }
.vl-nav-link--result:hover {
  border-color: rgba(224, 162, 26, 0.5);
  box-shadow: 0 12px 26px rgba(224, 162, 26, 0.16);
}

.vl-ticker {
  display: inline-flex;
  align-items: stretch;
  flex: 0 0 auto;
  gap: 0;
  margin-left: 8px;
  padding: 5px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid rgba(13, 61, 122, 0.14);
  box-shadow: 0 10px 26px rgba(11, 26, 46, 0.08);
  z-index: 2;
}

.vl-ticker__item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  min-width: 112px;
  padding: 8px 14px;
}

.vl-ticker__item--bal {
  min-width: 132px;
  border-radius: 12px;
  background: #0d3d7a;
  color: #fff !important;
  text-decoration: none !important;
  transition: transform .15s ease, filter .15s ease;
}

a.vl-ticker__item--bal:hover {
  transform: translateY(-1px);
  filter: brightness(1.08);
  color: #fff !important;
}

.vl-ticker__item--bal .vl-ticker__label {
  color: rgba(255, 255, 255, 0.82) !important;
}

.vl-ticker__item--bal strong,
.vl-ticker__item--bal #vl-user-balance {
  color: #ffffff !important;
  font-size: 1.08rem !important;
  font-weight: 800 !important;
  -webkit-text-fill-color: #ffffff !important;
}

.vl-ticker__label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--vl-ink-soft);
}

.vl-ticker__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #26a17b;
  box-shadow: 0 0 0 0 rgba(38, 161, 123, 0.55);
  animation: vl-ticker-pulse 1.8s ease-out infinite;
}

@keyframes vl-ticker-pulse {
  0% { box-shadow: 0 0 0 0 rgba(38, 161, 123, 0.5); }
  70% { box-shadow: 0 0 0 8px rgba(38, 161, 123, 0); }
  100% { box-shadow: 0 0 0 0 rgba(38, 161, 123, 0); }
}

.vl-ticker strong {
  font-family: var(--vl-font-display), 'Noto Sans KR', sans-serif;
  font-size: 0.95rem;
  font-weight: 800;
  color: #0d3d7a;
  letter-spacing: -0.02em;
  line-height: 1.15;
  white-space: nowrap;
}

.vl-ticker__divider {
  width: 1px;
  margin: 6px 0;
  background: rgba(13, 61, 122, 0.12);
}

.vl-nav .vl-chip {
  font-family: var(--vl-font-display);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 999px;
  color: #fff;
}

.vl-nav .vl-chip--power { background: var(--vl-power); }
.vl-nav .vl-chip--mega { background: var(--vl-mega); }
.vl-nav .vl-chip--lotto535 { background: var(--vl-lotto535); }
.vl-nav-txt-short { display: none; }
.vl-nav-txt-full { display: inline; }

/* ===== Home layout ===== */
.vl-home {
  max-width: 1140px;
  margin: 0 auto;
  padding: 18px 16px 72px;
  width: 100%;
  max-width: min(1140px, 100%);
  box-sizing: border-box;
  overflow-x: visible;
}

.vl-hero {
  position: relative;
  overflow: hidden;
  border-radius: calc(var(--vl-radius) + 6px);
  padding: clamp(28px, 5vw, 48px);
  color: #fff !important;
  background-color: #0b3d91;
  box-shadow: var(--vl-shadow);
  min-height: 420px;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 18px;
  align-items: end;
  animation: vl-fade-up .7s ease both;
}

.vl-hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.vl-hero__bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.04);
  animation: vl-hero- ken 18s ease-in-out infinite alternate;
}

.vl-hero__glow {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(115deg, rgba(7, 24, 58, 0.82) 0%, rgba(13, 61, 122, 0.55) 46%, rgba(12, 34, 72, 0.35) 72%, rgba(7, 24, 58, 0.55) 100%),
    radial-gradient(ellipse 55% 45% at 82% 22%, rgba(224, 162, 26, 0.28), transparent 60%);
  pointer-events: none;
}

.vl-hero::before {
  content: none;
}

.vl-hero::after {
  content: 'HAVES';
  position: absolute;
  right: -2%;
  bottom: -8%;
  z-index: 0;
  font-family: var(--vl-font-display);
  font-weight: 800;
  font-size: clamp(6rem, 18vw, 12rem);
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.08);
  pointer-events: none;
  line-height: 1;
}

.vl-hero > *:not(.vl-hero__media) { position: relative; z-index: 1; color: inherit; }

.vl-hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.vl-hero__copy {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 12px;
}

.vl-hero__mark {
  width: min(220px, 70%);
  height: auto;
  filter: drop-shadow(0 10px 24px rgba(0,0,0,.28)) brightness(0) invert(1);
  margin-bottom: 2px;
  animation: vl-fade-up .7s ease .05s both;
}

.vl-hero__brands {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: stretch;
  justify-content: center;
}

.vl-hero-logo {
  width: 100%;
  max-width: 240px;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 12px 28px rgba(0,0,0,.28));
  animation: vl-float-soft 4.8s ease-in-out infinite;
  align-self: flex-end;
}

.vl-hero-logo--mega {
  animation-delay: 1.1s;
}

.vl-promo-strip {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  animation: vl-fade-up .7s ease .1s both;
}

.vl-promo-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 92px;
  min-width: 0;
  padding: 14px 16px;
  border-radius: 18px;
  overflow: hidden;
  text-decoration: none;
  color: var(--vl-ink);
  border: 1px solid var(--vl-line);
  background: var(--vl-surface);
  box-shadow: 0 10px 24px rgba(42, 36, 28, 0.07);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.vl-promo-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--vl-shadow);
}

.vl-promo-card > img {
  width: 46px;
  height: 46px;
  object-fit: contain;
  flex: 0 0 auto;
}

.vl-promo-card__logos {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}

.vl-promo-card__logos img {
  height: 42px;
  width: auto;
  max-width: 72px;
  object-fit: contain;
}

.vl-promo-card--charge {
  background: linear-gradient(135deg, #fff8f1 0%, #fffdf9 55%, #f7ebe0 100%);
  border-color: rgba(217, 119, 58, 0.18);
}

.vl-promo-card--pay {
  background: linear-gradient(135deg, #eef6ff 0%, #f7fbff 55%, #e4eefc 100%);
  border-color: rgba(29, 111, 216, 0.16);
}

.vl-promo-card--result {
  background: linear-gradient(135deg, #f8f5f0 0%, #fffdf9 50%, #f3e7d4 100%);
  border-color: rgba(224, 162, 26, 0.2);
}

.vl-promo-card__copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.vl-promo-card__copy strong {
  font-family: var(--vl-font-display);
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.vl-promo-card__copy span {
  font-size: .82rem;
  font-weight: 700;
  color: var(--vl-muted);
}

.vl-result-cta {
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  animation: vl-fade-up .7s ease .15s both;
}

.vl-result-cta__item {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 88px;
  padding: 12px 16px 12px 12px;
  border-radius: 18px;
  text-decoration: none;
  color: var(--vl-ink);
  border: 1px solid var(--vl-line);
  background: linear-gradient(135deg, #f4f8ff 0%, #ffffff 55%, #eef4fc 100%);
  box-shadow: 0 10px 24px rgba(42, 36, 28, 0.06);
  transition: transform .22s ease, box-shadow .22s ease;
}

.vl-result-cta__item:hover {
  transform: translateY(-2px);
  box-shadow: var(--vl-shadow);
}

.vl-result-cta__item--mega {
  background: linear-gradient(135deg, #fff7f2 0%, #ffffff 55%, #ffe9df 100%);
}

.vl-result-cta__item > img {
  width: auto;
  height: 64px;
  max-width: 86px;
  object-fit: contain;
  flex: 0 0 auto;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.14));
}

.vl-result-cta__copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1 1 auto;
}

.vl-result-cta__copy strong {
  font-family: var(--vl-font-display);
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #163a73;
}

.vl-result-cta__item--mega .vl-result-cta__copy strong {
  color: #8a2b12;
}

.vl-result-cta__copy span {
  font-size: .9rem;
  font-weight: 700;
  color: var(--vl-muted);
}

.vl-result-cta__item > em {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #fff;
  border: 1px solid rgba(22, 58, 115, 0.12);
  font-style: normal;
  font-weight: 800;
  color: #163a73;
  box-shadow: 0 4px 12px rgba(22, 58, 115, 0.08);
}

@keyframes vl-hero-ken {
  from { transform: scale(1.03) translate3d(0, 0, 0); }
  to { transform: scale(1.08) translate3d(-1.5%, -1%, 0); }
}

@keyframes vl-float-soft {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

.vl-game-showcase {
  margin-top: 16px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px;
  animation: vl-fade-up .7s ease .06s both;
  min-width: 0;
  width: 100%;
}

.vl-game-card {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
  min-height: 110px;
  padding: 16px 16px 16px 14px;
  border-radius: 20px;
  text-decoration: none;
  color: var(--vl-ink);
  border: 1px solid var(--vl-line);
  overflow: hidden;
  box-shadow: 0 12px 30px rgba(42, 36, 28, 0.07);
  transition: transform .22s ease, box-shadow .22s ease;
}

.vl-game-card--power {
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(255,248,239,.95), transparent 48%),
    linear-gradient(135deg, #fff8f1 0%, #fffdf9 45%, #f7ebe0 100%);
}

.vl-game-card--mega {
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(255,255,255,.92), transparent 48%),
    linear-gradient(135deg, #eef6ff 0%, #f7fbff 45%, #e4eefc 100%);
}

.vl-game-card--lotto535 {
  border-color: rgba(88,184,26,.28);
  background: linear-gradient(135deg, #f3fce8, #fff);
}

.vl-game-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--vl-shadow);
}

.vl-game-card img {
  width: clamp(96px, 18vw, 148px);
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 10px 18px rgba(11, 26, 46, 0.14));
}

.vl-game-card__copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.vl-game-card__copy strong {
  font-family: var(--vl-font-display);
  font-size: clamp(1.05rem, 2.4vw, 1.35rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.vl-game-card__copy span {
  color: var(--vl-muted);
  font-size: .9rem;
  font-weight: 700;
}

.vl-game-card__go {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  color: #314854;
  font-style: normal;
  font-weight: 800;
  box-shadow: 0 8px 18px rgba(11, 26, 46, 0.1);
}

.vl-game-card.is-buy-open {
  border-width: 2px;
  box-shadow: 0 16px 36px rgba(42, 36, 28, 0.12);
}
.vl-game-card--power.is-buy-open {
  border-color: rgba(217, 119, 58, 0.55);
  box-shadow: 0 16px 36px rgba(217, 119, 58, 0.22);
}
.vl-game-card--mega.is-buy-open {
  border-color: rgba(29, 111, 216, 0.55);
  box-shadow: 0 16px 36px rgba(29, 111, 216, 0.2);
}
.vl-game-card--lotto535.is-buy-open {
  border-color: rgba(88, 184, 26, 0.55);
  opacity: 1;
  box-shadow: 0 16px 36px rgba(88, 184, 26, 0.2);
}
.vl-game-card.is-buy-closed {
  opacity: 0.78;
  filter: saturate(0.88);
}
.vl-game-card.is-buy-open .vl-game-card__copy span {
  color: #1b8a4a;
  font-weight: 800;
}
.vl-game-card__live {
  position: absolute;
  top: 10px;
  right: 12px;
  z-index: 2;
  padding: 4px 9px;
  border-radius: 999px;
  background: #1b8a4a;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  box-shadow: 0 4px 12px rgba(27, 138, 74, 0.3);
}

.vl-game-banner {
  display: none;
}

.vl-hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 999px;
  color: #fff;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.22);
}

.vl-hero h1 {
  margin: 0;
  font-family: var(--vl-font-display);
  font-weight: 800;
  font-size: clamp(3.2rem, 9vw, 5.6rem);
  letter-spacing: 0.14em;
  line-height: 0.95;
  text-transform: uppercase;
  max-width: none;
  color: #fff !important;
}

.vl-hero p {
  margin: 0;
  max-width: 36ch;
  font-size: 1rem;
  opacity: 0.92;
  line-height: 1.55;
  color: #fff !important;
}

.vl-hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 6px;
}

.vl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  cursor: pointer;
  text-decoration: none;
  font-weight: 800;
  font-size: 0.92rem;
  padding: 12px 18px;
  border-radius: 14px;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}

.vl-btn:hover { transform: translateY(-2px); }

.vl-btn--light {
  background: #fff8ef;
  color: var(--vl-ink);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.16);
}

.vl-btn--ghost {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.28);
}

.vl-btn--power {
  background: linear-gradient(135deg, var(--vl-power), var(--vl-power-deep));
  color: #fff;
  box-shadow: 0 10px 22px rgba(217, 119, 58, 0.28);
}

.vl-btn--mega {
  background: linear-gradient(135deg, var(--vl-mega), var(--vl-mega-deep));
  color: #fff;
}

.vl-btn--lotto535 {
  background: linear-gradient(135deg, var(--vl-lotto535), var(--vl-lotto535-deep));
  color: #fff;
}

.vl-btn--soft {
  background: rgba(224, 162, 26, 0.12);
  color: var(--vl-ink);
}

/* Quick actions */
.vl-actions {
  margin-top: 22px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  animation: vl-fade-up .7s ease .08s both;
}

.vl-action {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--vl-ink);
  background: var(--vl-surface);
  border: 1px solid var(--vl-line);
  border-radius: 18px;
  padding: 16px 10px 14px;
  box-shadow: 0 8px 22px rgba(42, 36, 28, 0.05);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.vl-action:hover {
  transform: translateY(-4px);
  box-shadow: var(--vl-shadow);
  border-color: rgba(224, 162, 26, 0.35);
}

.vl-action img {
  width: 42px;
  height: 42px;
  object-fit: contain;
}

.vl-action span {
  font-size: 0.82rem;
  font-weight: 800;
  text-align: center;
}

/* Results */
.vl-section-head {
  margin: 36px 0 14px;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  animation: vl-fade-up .7s ease .12s both;
}

.vl-section-head h2 {
  margin: 0;
  font-family: var(--vl-font-display);
  font-size: clamp(1.35rem, 2.6vw, 1.8rem);
  letter-spacing: -0.03em;
}

.vl-section-head p {
  margin: 4px 0 0;
  color: var(--vl-ink-soft);
  font-size: 0.92rem;
}

.vl-link {
  display: inline-flex;
  align-items: center;
  font-size: .9rem;
  font-weight: 800;
  color: #1557a8;
  text-decoration: none;
  white-space: nowrap;
}
.vl-link:hover { text-decoration: underline; }

.vl-live {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  font-weight: 700;
  color: #8a5a12;
  background: rgba(224, 162, 26, 0.14);
  padding: 7px 12px;
  border-radius: 999px;
}

.vl-live i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #e0a21a;
  box-shadow: 0 0 0 0 rgba(224, 162, 26, 0.55);
  animation: vl-pulse 1.6s infinite;
}

/* Countdown ??Vietlott style */
.vl-countdown {
  margin-top: 12px;
  padding: 12px 12px 10px;
  border-radius: 16px;
  background: rgba(255, 248, 239, 0.72);
  border: 1px solid rgba(42, 36, 28, 0.08);
}

.vl-countdown--power {
  background: linear-gradient(180deg, rgba(255, 244, 232, 0.95), rgba(255, 250, 244, 0.88));
  border-color: rgba(217, 119, 58, 0.18);
}

.vl-countdown--mega {
  background: linear-gradient(180deg, rgba(236, 245, 255, 0.95), rgba(245, 249, 255, 0.88));
  border-color: rgba(29, 111, 216, 0.16);
}

.vl-countdown__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 0.86rem;
  font-weight: 800;
  color: #1f2a37;
}

.vl-countdown__head em {
  font-style: normal;
  font-family: var(--vl-font-display);
  color: var(--vl-ink);
  letter-spacing: -0.02em;
}

.vl-countdown__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

.vl-countdown__grid > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 54px;
  padding: 6px 4px;
  border-radius: 12px;
  background: rgba(255, 253, 249, 0.95);
  border: 1px solid rgba(42, 36, 28, 0.07);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
}

.vl-countdown__grid b {
  font-family: var(--vl-font-display);
  font-size: clamp(1.15rem, 3.2vw, 1.45rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--vl-ink);
  font-variant-numeric: tabular-nums;
}

.vl-countdown--power .vl-countdown__grid b { color: var(--vl-power-deep); }
.vl-countdown--mega .vl-countdown__grid b { color: var(--vl-mega-deep); }

.vl-countdown__grid span {
  font-size: 0.74rem;
  font-weight: 800;
  color: #2c3644;
}

.vl-countdown__meta {
  margin-top: 8px;
  font-size: 0.8rem;
  font-weight: 800;
  color: #2c3644;
  text-align: center;
}

.vl-countdown__live {
  margin-top: 8px;
  text-align: center;
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--vl-power-deep);
}

.vl-countdown.is-live .vl-countdown__grid { opacity: 0.45; }
.vl-countdown.is-live .vl-countdown__live { display: block; }

.vl-results {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  animation: vl-fade-up .7s ease .16s both;
  min-width: 0;
  width: 100%;
}

.vl-card {
  position: relative;
  background: var(--vl-surface);
  border: 1px solid var(--vl-line);
  border-radius: var(--vl-radius);
  overflow: hidden;
  box-shadow: var(--vl-shadow);
  display: flex;
  flex-direction: column;
  height: 100%;
  min-width: 0;
  max-width: 100%;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, filter .2s ease;
}

.vl-card.is-buy-open {
  border-width: 2px;
  transform: translateY(-2px);
  animation: vl-buy-glow 2.6s ease-in-out infinite;
  z-index: 1;
}
.vl-card--power.is-buy-open {
  border-color: rgba(217, 119, 58, 0.72);
  box-shadow: 0 22px 48px rgba(217, 119, 58, 0.28), 0 0 0 3px rgba(217, 119, 58, 0.14);
}
.vl-card--mega.is-buy-open {
  border-color: rgba(29, 111, 216, 0.72);
  box-shadow: 0 22px 48px rgba(29, 111, 216, 0.26), 0 0 0 3px rgba(29, 111, 216, 0.14);
}
.vl-card--lotto535.is-buy-open {
  border-color: rgba(88, 184, 26, 0.72);
  box-shadow: 0 22px 48px rgba(88, 184, 26, 0.24), 0 0 0 3px rgba(88, 184, 26, 0.14);
}
.vl-card.is-buy-closed {
  opacity: 0.78;
  filter: saturate(0.82);
}
.vl-card__buy-pill {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 3;
  padding: 6px 11px;
  border-radius: 999px;
  background: #1b8a4a;
  color: #fff;
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: -0.02em;
  box-shadow: 0 6px 16px rgba(27, 138, 74, 0.35);
}
.vl-card.is-buy-open .vl-card__top {
  padding-top: 42px;
}
.vl-btn.is-buy-cta {
  font-weight: 900;
  box-shadow: 0 10px 24px rgba(27, 138, 74, 0.28);
  animation: vl-cta-pulse 1.8s ease-in-out infinite;
}
.vl-btn--power.is-buy-cta {
  background: linear-gradient(135deg, #f08a3c, #c45a12);
}
.vl-btn--mega.is-buy-cta {
  background: linear-gradient(135deg, #3b8ef0, #1557b8);
}
.vl-btn--lotto535.is-buy-cta {
  background: linear-gradient(135deg, #7ed321, #3f9a12);
}
@keyframes vl-cta-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.03); }
}
@media (prefers-reduced-motion: reduce) {
  .vl-card.is-buy-open,
  .vl-btn.is-buy-cta { animation: none; }
}

.vl-btn.is-buy-open {
  box-shadow: 0 10px 26px rgba(27, 138, 74, 0.28);
  font-weight: 900;
}
.vl-action.is-buy-open {
  border-color: rgba(27, 138, 74, 0.45);
  box-shadow: 0 12px 28px rgba(27, 138, 74, 0.16);
  background: linear-gradient(180deg, #ffffff 0%, #f1fff4 100%);
}
.vl-action.is-buy-open span {
  color: #146c38;
  font-weight: 900;
}
.vl-action__pill {
  position: absolute;
  top: 8px;
  right: 8px;
  margin: 0;
  padding: 2px 7px;
  border-radius: 999px;
  background: #1b8a4a;
  color: #fff;
  font-size: 0.65rem;
  font-style: normal;
  font-weight: 900;
  letter-spacing: 0.04em;
}

.vl-card__top {
  padding: 18px 18px 12px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: start;
  color: #fff;
}

.vl-card__brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.vl-card__logo {
  width: auto;
  max-width: 118px;
  height: auto;
  max-height: 52px;
  object-fit: contain;
  object-position: left center;
  filter: drop-shadow(0 4px 10px rgba(11,31,42,.14));
  flex: 0 0 auto;
}

.vl-card__brand h3 {
  margin: 0;
}

.vl-card--power .vl-card__top {
  background: linear-gradient(135deg, #e08948, #b4531a);
}

.vl-card--mega .vl-card__top {
  background: linear-gradient(135deg, #2a7de0, #0d3d7a);
}

.vl-card__top h3 {
  margin: 0;
  font-family: var(--vl-font-display);
  font-size: 1.25rem;
  letter-spacing: -0.02em;
}

.vl-card__meta {
  margin-top: 6px;
  font-size: 0.86rem;
  opacity: 0.92;
}

.vl-card__badge {
  font-family: var(--vl-font-display);
  font-weight: 800;
  font-size: 0.95rem;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.25);
  padding: 8px 12px;
  border-radius: 12px;
  white-space: nowrap;
}

.vl-card__body {
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1 1 auto;
}

.vl-balls {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 10px;
  align-items: center;
  justify-content: center;
  min-height: 52px;
}

.vl-balls__row,
.vl-balls__bonus {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: center;
}
.vl-balls__bonus-label {
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: #6a5530;
  background: rgba(212, 160, 23, 0.16);
  border: 1px solid rgba(212, 160, 23, 0.28);
  border-radius: 999px;
  padding: 4px 10px;
  line-height: 1.2;
}

.vl-ball {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--vl-font-display);
  font-weight: 800;
  font-size: 0.98rem;
  color: #fff;
  -webkit-text-fill-color: #fff;
  box-shadow:
    inset 0 -3px 0 rgba(0, 0, 0, 0.12),
    0 6px 14px rgba(42, 36, 28, 0.14);
  flex: 0 0 auto;
}

.vl-ball--power { background: linear-gradient(160deg, #f08a4a, #c45c26); }
.vl-ball--mega { background: linear-gradient(160deg, #4da3ff, #1d6fd8); }
.vl-ball--bonus { background: linear-gradient(160deg, #f5cf5a, #d4a017); color: #2a1d00; -webkit-text-fill-color: #2a1d00; }
.vl-ball-sep {
  width: 2px;
  height: 28px;
  background: rgba(11, 26, 46, 0.18);
  margin: 0 2px;
  border-radius: 2px;
  flex: 0 0 auto;
}

.vl-jackpot {
  background: linear-gradient(180deg, #fbf6ee, #f4f0e8);
  border-radius: 16px;
  padding: 14px;
  display: grid;
  gap: 10px;
  border: 1px solid rgba(224, 162, 26, 0.12);
}

.vl-jackpot__row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: baseline;
  flex-wrap: nowrap;
  min-width: 0;
}

.vl-jackpot__row > span {
  flex: 0 0 auto;
  font-size: 0.9rem;
  font-weight: 800;
  color: #1f2a37;
  white-space: nowrap;
}

.vl-jackpot__row strong {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--vl-font-display);
  font-size: clamp(0.92rem, 1.7vw, 1.12rem);
  color: var(--vl-power-deep);
  letter-spacing: -0.03em;
  font-weight: 800;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-variant-numeric: tabular-nums;
}

.vl-card--mega .vl-jackpot__row strong { color: var(--vl-mega-deep); }

.vl-note {
  margin: 0;
  color: #5c6b7c;
  font-size: 0.9rem;
  line-height: 1.6;
  font-weight: 500;
  opacity: 1;
}

.vl-card__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: auto;
}

.vl-card__actions .vl-btn { width: 100%; padding: 11px 12px; }

/* Steps */
.vl-steps {
  margin-top: 22px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px;
  animation: vl-fade-up .7s ease .2s both;
}

.vl-step {
  text-decoration: none;
  color: var(--vl-ink);
  background: var(--vl-surface);
  border: 1px solid var(--vl-line);
  border-radius: 28px;
  padding: 28px 18px 24px;
  text-align: center;
  box-shadow: 0 14px 36px rgba(42, 36, 28, 0.07);
  transition: transform .22s ease, box-shadow .22s ease, background .22s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: calc((100% - 54px) / 4);
  max-width: 260px;
  min-width: 160px;
  box-sizing: border-box;
}

.vl-step:hover {
  transform: translateY(-6px);
  box-shadow: var(--vl-shadow);
  background: #fffaf3;
}

/* FAQ */
.vl-faq {
  margin: 36px 0 8px;
  animation: vl-fade-up .7s ease .25s both;
}
.vl-faq .vl-section-head {
  margin-bottom: 14px;
}
.vl-faq__list {
  display: grid;
  gap: 10px;
}
.vl-faq__item {
  background: var(--vl-surface, #fff);
  border: 1px solid var(--vl-line, rgba(42,36,28,.1));
  border-radius: 18px;
  box-shadow: 0 10px 28px rgba(42, 36, 28, 0.05);
  overflow: hidden;
}
.vl-faq__item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 18px;
  font-size: 1rem;
  font-weight: 800;
  color: #0d2438;
  line-height: 1.45;
  word-break: keep-all;
}
.vl-faq__item summary::-webkit-details-marker { display: none; }
.vl-faq__item summary::after {
  content: '+';
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #eef4fb;
  color: #1a5fb4;
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1;
}
.vl-faq__item[open] summary::after {
  content: '−';
  background: #0d2438;
  color: #fff;
}
.vl-faq__item[open] summary {
  border-bottom: 1px solid rgba(42,36,28,.08);
}
.vl-faq__body {
  padding: 4px 18px 16px;
}
.vl-faq__body p {
  margin: 0;
  font-size: .95rem;
  line-height: 1.75;
  color: #1f2a37;
  word-break: keep-all;
}
.vl-faq__body a {
  color: #1557a8;
  font-weight: 700;
  text-decoration: none;
}
.vl-faq__body a:hover { text-decoration: underline; }
@media (min-width: 901px) {
  .vl-faq__item summary { font-size: 1.05rem; padding: 18px 22px; }
  .vl-faq__body { padding: 6px 22px 20px; }
  .vl-faq__body p { font-size: 1rem; line-height: 1.8; }
}
@media (max-width: 640px) {
  .vl-faq { margin-top: 28px; }
  .vl-faq__item summary { font-size: .95rem; padding: 14px 14px; }
  .vl-faq__body { padding: 2px 14px 14px; }
  .vl-faq__body p { font-size: .9rem; }
}

.vl-step__visual {
  width: min(100%, 200px);
  aspect-ratio: 1 / 1;
  margin: 0 auto 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 32px;
  background:
    radial-gradient(circle at 30% 20%, rgba(224, 162, 26, 0.24), transparent 55%),
    linear-gradient(160deg, #fffdf9, #f3e7d4);
  border: 1px solid rgba(42, 36, 28, 0.07);
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
}

.vl-step img {
  width: 78%;
  height: 78%;
  object-fit: contain;
  object-position: center center;
  display: block;
  margin: 0 auto;
  image-rendering: -webkit-optimize-contrast;
}

.vl-step span {
  display: block;
  font-family: var(--vl-font-display);
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin-top: 4px;
}

.vl-step em {
  display: none;
}

/* Popup */
.vl-popup {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(8, 18, 22, 0.62);
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.vl-popup.is-open { display: flex; }

.vl-popup__panel {
  width: min(460px, 100%);
  max-height: 90vh;
  overflow: auto;
  background: #fff;
  border-radius: 20px;
  padding: 22px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.28);
  animation: vl-pop .25s ease;
}

.vl-popup__panel img {
  max-width: 160px;
  height: auto;
  margin-bottom: 10px;
}

.vl-popup table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 12px;
  font-size: 0.9rem;
}

.vl-popup th,
.vl-popup td {
  border: 1px solid #e7ece9;
  padding: 9px 8px;
  text-align: center;
}

.vl-popup th { background: #f3f6fb; }

.vl-jp-guide {
  margin: 4px 0 14px;
  padding: 12px;
  border-radius: 14px;
  background: linear-gradient(180deg, #fff8f0, #fff);
  border: 1px solid rgba(217,119,58,.18);
}
.vl-jp-guide__title {
  margin: 0 0 10px;
  font-family: var(--vl-font-display);
  font-size: .92rem;
  font-weight: 800;
  color: #8a5a00;
}
.vl-jp-guide__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.vl-jp-guide__card {
  padding: 10px;
  border-radius: 12px;
  background: rgba(255,255,255,.9);
  border: 1px solid rgba(42,36,28,.08);
}
.vl-jp-guide__card strong {
  display: block;
  margin-bottom: 6px;
  font-size: .84rem;
  font-weight: 800;
  color: var(--vl-ink);
}
.vl-jp-guide__card p {
  margin: 0;
  font-size: .76rem;
  font-weight: 600;
  color: var(--vl-ink-soft);
  line-height: 1.45;
}
.vl-jp-guide__card b { color: var(--vl-ink); }
.vl-jp-guide__note {
  margin: 10px 0 0;
  font-size: .74rem;
  font-weight: 600;
  color: #7a4e00;
  line-height: 1.4;
}
.vl-jp-rules {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 14px;
  background: #f7fafc;
  border: 1px solid rgba(13, 36, 56, .08);
}
.vl-jp-rules__title {
  font-size: .82rem;
  font-weight: 800;
  color: #0d2438;
  margin-bottom: 8px;
}
.vl-jp-rules ul {
  margin: 0;
  padding-left: 1.1em;
  list-style: disc;
}
.vl-jp-rules li {
  font-size: .8rem;
  line-height: 1.55;
  color: #2a3545;
  margin-bottom: 5px;
  word-break: keep-all;
}
.vl-jp-rules li b { color: #0d2438; }
@media (max-width: 560px) {
  .vl-jp-guide__grid { grid-template-columns: 1fr; }
}

@keyframes vl-fade-up {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes vl-pop {
  from { opacity: 0; transform: translateY(10px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes vl-pulse {
  0% { box-shadow: 0 0 0 0 rgba(224, 162, 26, 0.55); }
  70% { box-shadow: 0 0 0 10px rgba(224, 162, 26, 0); }
  100% { box-shadow: 0 0 0 0 rgba(224, 162, 26, 0); }
}

/* ===== Mobile bottom tabbar (제거) ===== */
.vl-mobile-tabbar,
.mobile-bottom-menu {
  display: none !important;
}

@media (max-width: 1100px) {
  .vl-steps {
    justify-content: center;
  }
  .vl-step {
    width: calc((100% - 36px) / 3);
  }
  .vl-step__visual {
    max-width: 190px;
  }
}

@media (max-width: 900px) {
  .vl-hero {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .vl-hero__brands {
    flex-direction: row;
  }
  .vl-hero-logo {
    max-width: 160px;
    width: 38%;
  }
  .vl-promo-strip {
    grid-template-columns: 1fr;
  }
  .vl-promo-card {
    min-height: 78px;
  }
  .vl-result-cta {
    grid-template-columns: 1fr;
  }
  .vl-result-cta__item > img {
    height: 56px;
  }
  .vl-game-showcase {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .vl-game-card {
    min-height: 96px;
    padding: 12px 10px;
    gap: 8px;
  }
  .vl-game-card img { width: clamp(64px, 20vw, 92px); }
  .vl-game-card__copy strong { font-size: .95rem; }
  .vl-game-card__copy span { font-size: .78rem; }
  .vl-game-card__go { width: 32px; height: 32px; }
  .vl-actions { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .vl-results { grid-template-columns: 1fr; }
  .vl-cart { position: static; }
  .vl-steps { gap: 14px; }
  .vl-step { padding: 22px 14px 18px; width: calc((100% - 14px) / 2); max-width: 280px; }
  .vl-step__visual { max-width: 180px; }
}

@media (max-width: 640px) {
  /* 모바일 헤더: 슬림 + 가로스크롤 메뉴 (본문 가림 최소화) */
  .vl-site-header {
    backdrop-filter: blur(10px);
    background: rgba(248, 245, 240, 0.96);
  }

  .vl-site-header .vl-bar {
    padding: 8px 10px 6px;
    grid-template-columns: 1fr auto;
    gap: 6px 8px;
  }

  .vl-brand-logo {
    height: 28px;
    max-width: min(150px, 46vw);
  }

  .vl-brand-mark {
    font-size: 1.2rem;
    letter-spacing: 0.06em;
  }

  .vl-brand-sub {
    display: none;
  }

  .vl-user-actions {
    gap: 4px;
  }

  .vl-user-actions a {
    padding: 6px 9px;
    font-size: 0.74rem;
    min-height: 34px;
  }

  .vl-user-actions a.vl-btn-solid {
    padding: 6px 10px;
  }

  .vl-nav {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    overflow: visible;
    margin: 0;
    padding: 0 0 6px;
  }

  /* 시세/머니: 한 줄 컴팩트 */
  .vl-ticker {
    width: 100%;
    margin-left: 0;
    order: -1;
    padding: 3px;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(11, 26, 46, 0.06);
  }

  .vl-ticker__item {
    flex: 1;
    min-width: 0;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 10px;
  }

  .vl-ticker__label {
    font-size: 0.62rem;
    letter-spacing: 0.02em;
    text-transform: none;
  }

  .vl-ticker strong {
    font-size: 0.84rem;
  }

  .vl-ticker__item--bal {
    min-width: 0;
    border-radius: 10px;
  }

  .vl-ticker__item--bal strong,
  .vl-ticker__item--bal #vl-user-balance {
    font-size: 0.9rem !important;
  }

  .vl-ticker__divider {
    margin: 4px 0;
  }

  .vl-ticker__dot {
    width: 6px;
    height: 6px;
  }

  /* 메뉴: 5등분 그리드 (스크롤 없이 한 줄) */
  .vl-nav__links {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 5px;
    overflow: visible;
    padding: 0;
    mask-image: none;
    -webkit-mask-image: none;
  }

  .vl-nav-dd {
    min-width: 0;
  }

  .vl-nav__links a,
  .vl-nav__links .vl-nav-link {
    flex: none;
    width: 100%;
    min-width: 0;
    min-height: 52px;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    gap: 3px;
    padding: 7px 2px 6px;
    font-size: 0.68rem;
    letter-spacing: -0.03em;
    white-space: nowrap;
    border-radius: 14px;
    box-sizing: border-box;
    box-shadow: none;
    transform: none !important;
  }

  .vl-nav__links a:hover,
  .vl-nav__links .vl-nav-link:hover {
    transform: none !important;
    box-shadow: none;
  }

  .vl-nav__links .vl-nav-link i {
    font-size: 1.05rem;
    line-height: 1;
  }

  .vl-nav-dd__btn .vl-nav-dd__caret {
    display: none;
  }

  .vl-nav-dd__btn .vl-chip--buy {
    position: absolute;
    top: 3px;
    right: 3px;
    font-size: 0.5rem !important;
    padding: 1px 4px !important;
    line-height: 1.2;
  }

  .vl-nav-dd__btn {
    position: relative;
  }

  .vl-nav-dd__menu {
    z-index: 10070;
    min-width: 0;
    width: auto;
    padding: 8px;
    border-radius: 16px;
    box-shadow: 0 16px 36px rgba(42, 36, 28, 0.2);
  }

  .vl-nav-dd__item {
    padding: 11px 12px !important;
    min-height: auto;
    flex-direction: row !important;
    justify-content: flex-start;
    gap: 10px;
    border-radius: 12px !important;
    font-size: 0.86rem;
  }

  .vl-nav-dd__item .vl-nav-logo {
    height: 22px;
    max-width: 70px;
  }

  .vl-nav-dd__copy strong {
    font-size: 0.86rem;
  }

  .vl-nav-dd__copy em {
    font-size: 0.68rem;
  }

  .vl-nav__links .vl-chip {
    font-size: 0.58rem;
    padding: 1px 5px;
    letter-spacing: -0.02em;
  }

  .vl-nav-txt-short { display: inline; }
  .vl-nav-txt-full { display: none; }

  .vl-home {
    padding: 10px 12px 88px;
    max-width: 100%;
    overflow-x: clip;
  }

  .vl-hero {
    min-height: 280px;
    padding: 18px 14px;
    border-radius: 18px;
  }

  .vl-hero__mark {
    width: min(180px, 72%);
  }

  .vl-promo-strip {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .vl-promo-card {
    min-height: 74px;
    padding: 12px 14px;
  }

  .vl-result-cta {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .vl-result-cta__item {
    min-height: 78px;
    padding: 10px 12px;
    gap: 10px;
  }

  .vl-result-cta__item > img {
    height: 52px;
    max-width: 72px;
  }

  .vl-result-cta__copy strong {
    font-size: .98rem;
  }

  .vl-result-cta__copy span {
    font-size: .84rem;
  }

  .vl-hero h1 {
    font-size: clamp(2.4rem, 14vw, 3.4rem);
    letter-spacing: 0.08em;
  }

  .vl-hero p {
    font-size: 0.92rem;
    max-width: none;
  }

  .vl-hero-cta {
    width: 100%;
  }

  .vl-hero-cta .vl-btn {
    flex: 1 1 calc(50% - 6px);
    padding: 11px 12px;
    font-size: 0.84rem;
  }

  .vl-hero__brands {
    justify-content: space-between;
  }

  .vl-game-showcase {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .vl-game-card {
    min-height: 88px;
    grid-template-columns: auto 1fr auto;
  }

  .vl-game-card__copy span { display: block; }

  .vl-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .vl-action {
    padding: 14px 8px 12px;
  }

  .vl-action span { font-size: 0.78rem; }

  .vl-section-head {
    margin: 28px 0 12px;
  }

  .vl-section-head h2 {
    font-size: 1.25rem;
  }

  .vl-card__logo { max-width: 96px; max-height: 42px; }
  .vl-card__actions { grid-template-columns: 1fr; }
  .vl-card__top {
    flex-wrap: wrap;
  }

  .vl-balls { gap: 6px; }
  .vl-ball {
    width: 36px;
    height: 36px;
    font-size: 0.85rem;
  }

  .vl-steps {
    gap: 10px;
  }

  .vl-step {
    padding: 16px 10px 14px;
    border-radius: 18px;
    width: calc((100% - 10px) / 2);
    max-width: none;
    min-width: 0;
  }

  .vl-step__visual {
    max-width: 100%;
    border-radius: 18px;
  }

  .vl-step img { width: 82%; height: 82%; }
  .vl-step span { font-size: 0.88rem; }

  .vl-popup { padding: 12px; align-items: flex-end; }
  .vl-popup__panel {
    width: 100%;
    max-height: 85vh;
    border-radius: 18px 18px 12px 12px;
  }

  /* ?섎떒 怨좎젙 硫붾돱 ?ъ쑀 */
  .footer {
    padding-bottom: 72px !important;
  }
}

@media (max-width: 380px) {
  .vl-user-actions a:not(.vl-btn-solid) {
    padding: 7px 8px;
  }
  .vl-hero-cta .vl-btn {
    flex: 1 1 100%;
  }
}

.vl-card--lotto535 .vl-card__top {
  background: linear-gradient(135deg, #3fa012, #0d6b18 55%, #084d12) !important;
  color: #fff !important;
}
.vl-card--lotto535 .vl-card__top h3,
.vl-card--lotto535 .vl-card__meta,
.vl-card--lotto535 .vl-card__badge {
  color: #fff !important;
}
.vl-ball--lotto535 { background: linear-gradient(160deg, #b8e832, #0d6b18); }
.vl-card--lotto535 .vl-jackpot__row strong { color: #0d6b18; }
.vl-hero-logo--lotto535 { animation-delay: 1.8s; }
.vl-result-cta__item--lotto535 {
  border-color: rgba(88,184,26,.22);
  background: linear-gradient(135deg, #f3fce8, #fff);
}
.vl-result-cta__item--lotto535 .vl-result-cta__copy strong { color: #0d6b18; }
.vl-countdown--lotto535 {
  background: #f3fce8;
  border: 1px solid rgba(88,184,26,.2);
}
.vl-countdown--lotto535 .vl-countdown__grid b { color: #0d6b18; }
.vl-game-card--lotto535 {
  border-color: rgba(88,184,26,.28);
}
.vl-game-showcase { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.vl-result-cta { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) {
  .vl-game-showcase,
  .vl-result-cta { grid-template-columns: 1fr; }
}
/* Go to top */
.vl-gotop,
#gotop.vl-gotop {
  position: fixed;
  right: 22px;
  bottom: 28px;
  z-index: 10050;
  width: 52px;
  height: 52px;
  padding: 0;
  border: 0;
  border-radius: 18px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  cursor: pointer;
  color: #fff;
  background:
    linear-gradient(160deg, #1a5fb4 0%, #0d3d7a 70%);
  box-shadow:
    0 10px 24px rgba(13, 61, 122, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
  transition: opacity .25s ease, transform .2s ease, box-shadow .2s ease, visibility .25s ease;
  visibility: hidden;
  pointer-events: none;
  -webkit-tap-highlight-color: transparent;
}
.vl-gotop.opacity-100,
#gotop.vl-gotop.opacity-100 {
  opacity: 1 !important;
  visibility: visible;
  pointer-events: auto;
}
.vl-gotop:hover,
#gotop.vl-gotop:hover {
  transform: translateY(-3px);
  box-shadow:
    0 14px 28px rgba(13, 61, 122, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
  color: #fff;
}
.vl-gotop:active,
#gotop.vl-gotop:active {
  transform: translateY(-1px) scale(0.96);
}
.vl-gotop i {
  font-size: 1.35rem;
  line-height: 1;
  margin-top: -2px;
}
.vl-gotop__txt {
  font-family: var(--vl-font-display), 'Noto Sans KR', sans-serif;
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  line-height: 1;
  margin-top: -2px;
  opacity: 0.92;
}

/* HAVES 2026-10 USD / live / news */
.vl-chip--soon{background:#f0b429;color:#1a1a1a!important}
.vl-game-card.is-soon{opacity:.72;filter:grayscale(.15)}
.vl-live-draw{
  margin:28px 0;
  width:100%;
  max-width:100%;
  min-width:0;
  box-sizing:border-box;
}
.vl-live-draw .vl-section-head{
  width:100%;
  max-width:100%;
  min-width:0;
}
.vl-live-draw .vl-section-head > div{
  min-width:0;
  flex:1 1 auto;
}
.vl-live-draw .vl-section-head p{
  max-width:100%;
  overflow-wrap:break-word;
  word-break:keep-all;
  line-height:1.45;
}

/* 그누보드 p{word-break:break-all} 보정 — 홈/카드 한글 줄바꿈 */
.vl-home,
.vl-home p,
.vl-home li,
.vl-home h1,
.vl-home h2,
.vl-home h3,
.vl-home strong,
.vl-home span,
.vl-home a,
.vl-home em,
.vl-section-head p,
.vl-card p,
.vl-action span,
.vl-step p {
  word-break: keep-all;
  overflow-wrap: break-word;
}
.vl-live-frame{
  position:relative;
  width:100%;
  max-width:100%;
  min-width:0;
  border-radius:18px;
  overflow:hidden;
  background:#0b1c2c;
  box-shadow:0 18px 40px rgba(10,30,50,.18);
  box-sizing:border-box;
  isolation:isolate;
  /* 기본: padding 트릭 (구형 브라우저) */
  height:0;
  padding-top:56.25%;
}
@supports (aspect-ratio: 16 / 9) {
  .vl-live-frame{
    height:auto;
    padding-top:0;
    aspect-ratio:16 / 9;
  }
}
.vl-live-frame iframe,
.vl-live-placeholder{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
  max-width:none;
}
.vl-live-placeholder{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  color:#dce8f5;
  padding:20px 16px;
  text-align:center;
  box-sizing:border-box;
  overflow:auto;
  -webkit-overflow-scrolling:touch;
}
.vl-live-placeholder strong{
  font-size:1.05rem;
}
.vl-live-placeholder span{
  font-size:.86rem;
  line-height:1.45;
  max-width:32ch;
}
.vl-live-placeholder--links span{max-width:42ch}
.vl-live-frame.is-live-links{
  /* 링크 안내는 16:9 iframe이 아님 — 내용 높이 */
}
.vl-live-frame.is-live-links .vl-live-placeholder--links{
  background:linear-gradient(160deg,#0b1c2c 0%,#12324a 55%,#0f2740 100%);
}
.vl-live-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:center;
  margin-top:12px;
}
.vl-live-actions--under{
  position:relative;
  z-index:2;
  margin:10px 0 4px;
  padding:0 8px 8px;
}
.vl-live-actions .vl-btn{
  min-height:42px;
  padding:0 16px;
  text-decoration:none;
}
.vl-live-schedule{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:10px;
}
.vl-live-schedule__chip{
  display:inline-flex;
  align-items:center;
  min-height:28px;
  padding:4px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:700;
  line-height:1.3;
  color:#fff;
}
.vl-live-schedule__chip--power{ background:rgba(217,119,58,.92); }
.vl-live-schedule__chip--mega{ background:rgba(29,111,216,.92); }
.vl-live-countdown{
  margin-top:10px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
}
.vl-live-countdown em{
  font-style:normal;
  font-family:var(--vl-font-display),sans-serif;
  font-size:clamp(1.25rem, 6.5vw, 1.6rem);
  font-weight:800;
  letter-spacing:.04em;
  color:#fff;
  font-variant-numeric:tabular-nums;
}
.vl-live-countdown small{opacity:.75;font-size:12px}

@media (max-width:767.98px){
  .vl-live-draw{
    /* 홈 패딩을 뚫고 가로 풀폭 — 옆이 잘린 느낌 제거 */
    width:calc(100% + 24px);
    max-width:calc(100% + 24px);
    margin:20px -12px;
  }
  .vl-live-draw .vl-section-head{
    padding:0 12px;
    margin:20px 0 12px;
    align-items:flex-start;
  }
  .vl-live-draw .vl-section-head p{
    padding-right:4px;
    font-size:.84rem;
  }
  .vl-live-frame{
    border-radius:0;
    box-shadow:none;
    /* 대기 화면: 16:9에 가두지 않고 내용만큼 높이 확보 */
    height:auto !important;
    padding-top:0 !important;
    aspect-ratio:unset;
    min-height:0;
  }
  .vl-live-placeholder{
    position:relative;
    inset:auto;
    width:100%;
    height:auto;
    min-height:280px;
    padding:28px 16px 32px;
    gap:10px;
    overflow:visible;
  }
  .vl-live-placeholder span{
    max-width:100%;
    font-size:.8rem;
  }
  /* 실제 방송(iframe)일 때만 16:9 고정 */
  .vl-live-frame.is-playing,
  .vl-live-frame:has(iframe){
    aspect-ratio:16 / 9;
    min-height:0;
  }
  .vl-live-frame.is-playing iframe,
  .vl-live-frame:has(iframe) iframe{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
  }
  .vl-live-frame.is-live-links{
    aspect-ratio:unset;
    height:auto !important;
    padding-top:0 !important;
  }
}
.vl-news{
  margin:0 0 8px;
  width:100%;
  max-width:none;
}
.vl-news .vl-section-head{
  width:100%;
  text-align:left;
  justify-content:flex-start;
  /* 이렇게 이용해요 와 동일 기준선 */
  margin-left:0;
  margin-right:0;
}
.vl-news-grid{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:12px;
  width:100%;
  max-width:920px;
  margin:0 auto;
}
.vl-news-card{
  background:#fff;
  border-radius:14px;
  overflow:hidden;
  border:1px solid rgba(20,50,80,.08);
  box-shadow:0 8px 18px rgba(11,26,46,.05);
  width:calc((100% - 36px) / 4);
  max-width:260px;
  min-width:180px;
  box-sizing:border-box;
}
.vl-news-card__frame{
  position:relative;
  width:100%;
  padding-top:56.25%; /* 16:9 */
  background:#111;
}
.vl-news-card__frame iframe{
  position:absolute;inset:0;width:100%;height:100%;border:0;
}
.vl-news-card h3{
  font-size:13px;
  line-height:1.4;
  margin:8px 10px 12px;
  font-weight:700;
  text-align:center;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  min-height:2.8em;
}
@media (max-width:900px){
  .vl-news-grid{max-width:100%}
  .vl-news-card{width:calc((100% - 12px) / 2);max-width:300px}
}
@media (max-width:640px){
  .vl-news{margin:0 0 4px}
  .vl-news-card{width:100%;max-width:360px;min-width:0}
  .vl-news-card h3{font-size:13px;min-height:0}
}

/* Contact FAB — PC: 3버튼 / 모바일: 고객센터 펼침 */
.ha-contact-fab {
  position: fixed;
  right: 16px;
  bottom: 96px;
  z-index: 1040;
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-end;
  gap: 8px;
  pointer-events: none;
}
.ha-contact-fab__toggle,
.ha-contact-fab__btn {
  pointer-events: auto;
}
.ha-contact-fab__toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, #1f2937, #111827);
  color: #fff;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.18);
  cursor: pointer;
  transition: transform .15s ease, background .15s ease;
}
.ha-contact-fab__toggle:hover {
  transform: translateY(-2px);
}
.ha-contact-fab__toggle[aria-expanded="true"] {
  background: linear-gradient(135deg, #374151, #1f2937);
}
.ha-contact-fab__toggle i {
  font-size: 1.35rem;
  line-height: 1;
}
.ha-contact-fab__list {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}
.ha-contact-fab__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 128px;
  padding: 10px 14px;
  border-radius: 999px;
  text-decoration: none !important;
  font-weight: 800;
  font-size: .86rem;
  color: #fff !important;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.16);
  transition: transform .15s ease, opacity .15s ease;
}
.ha-contact-fab__btn:hover {
  transform: translateY(-2px);
  color: #fff !important;
}
.ha-contact-fab__btn i {
  font-size: 1.1rem;
}
.ha-contact-fab__btn--tg {
  background: linear-gradient(135deg, #37aee2, #1e96c8);
}
.ha-contact-fab__btn--kk {
  background: linear-gradient(135deg, #fee500, #f5d000);
  color: #191919 !important;
}
.ha-contact-fab__btn--kk:hover {
  color: #191919 !important;
}
.ha-contact-fab__btn--live {
  background: linear-gradient(135deg, #22c55e, #15803d);
}
@media (max-width: 767.98px) {
  /* 위: 고객센터 → 아래: 최상단(TOP) */
  .ha-contact-fab {
    right: 14px;
    bottom: calc(78px + env(safe-area-inset-bottom, 0px));
  }
  .ha-contact-fab__toggle {
    display: inline-flex;
  }
  .ha-contact-fab__list {
    display: none;
    opacity: 0;
    transform: translateY(8px);
  }
  .ha-contact-fab.is-open .ha-contact-fab__list {
    display: flex;
    opacity: 1;
    transform: none;
  }
  .ha-contact-fab__btn {
    min-width: 118px;
    padding: 9px 12px;
    font-size: .8rem;
  }
  #gotop.vl-gotop,
  .vl-gotop {
    right: 14px !important;
    bottom: calc(18px + env(safe-area-inset-bottom, 0px)) !important;
    z-index: 1041;
  }
}

/* ===== HAVES Live Chat widget ===== */
.ha-lc{
  position:fixed; inset:0; z-index:1080; display:none;
  align-items:flex-end; justify-content:flex-end;
  padding:16px; padding-bottom:calc(16px + env(safe-area-inset-bottom,0px));
  background:rgba(13,36,56,.28); backdrop-filter:blur(2px);
}
.ha-lc.is-open{display:flex}
.ha-lc__panel{
  width:min(100%,380px); max-height:min(78vh,640px);
  display:flex; flex-direction:column; overflow:hidden;
  border-radius:22px;
  background:linear-gradient(180deg,#fffdf9 0%,#f6f3ee 100%);
  box-shadow:0 24px 60px rgba(13,36,56,.28);
  border:1px solid rgba(255,255,255,.35);
  animation:haLcIn .28s ease;
}
@keyframes haLcIn{
  from{opacity:0; transform:translateY(14px) scale(.98)}
  to{opacity:1; transform:none}
}
.ha-lc__head{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:14px 14px 12px;
  background:linear-gradient(135deg,#0d2438 0%,#163a5c 55%,#1a5fb4 140%);
  color:#eef3f8;
}
.ha-lc__brand{display:flex; align-items:center; gap:10px; min-width:0}
.ha-lc__logo{width:34px;height:34px;filter:brightness(0) invert(1);flex-shrink:0}
.ha-lc__brand strong{
  display:block; font-family:var(--vl-font-display),sans-serif;
  font-size:1rem; letter-spacing:-.02em; line-height:1.15;
}
.ha-lc__brand span{display:block; font-size:12px; opacity:.78; margin-top:2px}
.ha-lc__close{
  width:36px;height:36px;border:0;border-radius:12px;cursor:pointer;
  background:rgba(255,255,255,.12); color:#fff; display:inline-flex;
  align-items:center; justify-content:center;
}
.ha-lc__close:hover{background:rgba(255,255,255,.2)}
.ha-lc__body{display:flex; flex-direction:column; min-height:0; flex:1}
.ha-lc__start{padding:16px; display:flex; flex-direction:column; gap:12px}
.ha-lc__intro{margin:0; color:var(--vl-ink-soft); font-size:.9rem; line-height:1.45}
.ha-lc__field{display:flex; flex-direction:column; gap:6px}
.ha-lc__field span{font-size:12px; font-weight:700; color:var(--vl-muted)}
.ha-lc__field input,
.ha-lc__field textarea{
  width:100%; border:1px solid var(--vl-line); border-radius:14px;
  background:#fff; color:var(--vl-ink); padding:11px 12px; font:inherit;
}
.ha-lc__field textarea{resize:vertical; min-height:84px}
.ha-lc__sendbtn{
  border:0; border-radius:14px; min-height:46px; cursor:pointer;
  font-weight:800; color:#fff;
  background:linear-gradient(135deg,#1a5fb4,#0d3d7a);
  font-family:var(--vl-font-display),sans-serif;
}
.ha-lc__sendbtn:disabled{opacity:.55; cursor:wait}
.ha-lc__chat{display:flex; flex-direction:column; min-height:360px; flex:1}
.ha-lc__msgs{
  flex:1; overflow:auto; padding:14px; display:flex; flex-direction:column; gap:8px;
  background:
    radial-gradient(500px 180px at 0% 0%, rgba(26,95,180,.08), transparent 60%),
    linear-gradient(180deg,#f7f4ef,#eef3f8);
}
.ha-lc__bubble{
  max-width:82%; padding:10px 12px; border-radius:16px;
  font-size:.92rem; line-height:1.45; white-space:pre-wrap; word-break:break-word;
}
.ha-lc__bubble small{display:block; margin-top:4px; font-size:11px; opacity:.65}
.ha-lc__bubble--me{
  align-self:flex-end; color:#fff;
  background:linear-gradient(135deg,#1a5fb4,#0d3d7a);
  border-bottom-right-radius:6px;
}
.ha-lc__bubble--staff{
  align-self:flex-start; background:#fff; border:1px solid var(--vl-line);
  border-bottom-left-radius:6px; color:var(--vl-ink);
}
.ha-lc__bubble--system{
  align-self:center; background:transparent; color:var(--vl-muted);
  font-size:12px; padding:4px 8px; max-width:94%; text-align:center;
}
/* 입력바: [이모지] [입력] [전송] — 한 줄 정렬 */
.ha-lc__compose{
  position:relative;
  padding:10px 12px calc(12px + env(safe-area-inset-bottom,0px));
  border-top:1px solid var(--vl-line);
  background:#fff;
}
.ha-lc__compose-bar{
  display:flex;
  align-items:center;
  gap:8px;
}
.ha-lc__emoji-btn{
  width:42px; height:42px; flex:0 0 42px;
  margin:0; padding:0; border:0; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background:#eef2f6; color:#3a4556; font-size:1.35rem; line-height:1;
  cursor:pointer; appearance:none; -webkit-appearance:none;
  transition:background .15s ease, color .15s ease;
}
.ha-lc__emoji-btn i{display:block; line-height:1; color:inherit}
.ha-lc__emoji-btn:hover,
.ha-lc__emoji-btn:focus-visible{
  background:#e2e9f1; color:#0d3d7a; outline:none;
}
.ha-lc__emoji-btn.is-on{
  background:#d9e6f6; color:#0d3d7a;
}
.ha-lc__input-wrap{
  flex:1; min-width:0;
  display:flex; align-items:center;
  border:1px solid rgba(21,32,51,.12);
  border-radius:22px;
  background:#f4f6f8;
  padding:0 14px;
  min-height:42px;
  transition:border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.ha-lc__input-wrap:focus-within{
  background:#fff;
  border-color:rgba(26,95,180,.5);
  box-shadow:0 0 0 3px rgba(26,95,180,.12);
}
.ha-lc__compose .ha-lc__input-wrap textarea,
.ha-lc__compose textarea#ha-lc-input{
  display:block; width:100%; flex:1; min-width:0;
  min-height:24px; max-height:96px; height:auto;
  margin:0; padding:10px 0; border:0 !important; border-radius:0 !important;
  background:transparent !important; box-shadow:none !important;
  resize:none; outline:none; color:var(--vl-ink);
  font:inherit; line-height:1.4; overflow-y:auto;
}
.ha-lc__send-ico{
  width:42px; height:42px; flex:0 0 42px;
  margin:0; padding:0; border:0; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,#1a5fb4,#0d3d7a) !important;
  color:#fff !important; font-size:1.05rem; line-height:1;
  cursor:pointer; appearance:none; -webkit-appearance:none;
  box-shadow:0 6px 14px rgba(13,61,122,.28);
  transition:filter .15s ease, transform .12s ease;
}
.ha-lc__send-ico i{display:block; line-height:1; color:inherit; margin-left:2px}
.ha-lc__send-ico:hover,
.ha-lc__send-ico:focus-visible{
  filter:brightness(1.08); transform:translateY(-1px); outline:none; color:#fff !important;
}
.ha-lc__bubble--emo{
  font-size:30px; line-height:1.15; padding:6px 8px;
  background:transparent !important; border:0 !important; box-shadow:none !important;
}
.ha-lc__bubble--emo small{opacity:.5}
.ha-lc__hint{margin:0; color:#b4531a; font-size:12px; font-weight:700}
.ha-lc__blocked{padding:28px 18px; text-align:center; color:var(--vl-ink-soft); line-height:1.55}
.ha-lc__blocked p{margin:0}

/* 이모지 피커 */
.ha-emoji{
  position:absolute; left:12px; right:12px; bottom:calc(100% + 4px); z-index:40;
  background:#fff; border:1px solid rgba(21,32,51,.1); border-radius:18px;
  box-shadow:0 18px 40px rgba(13,36,56,.18); overflow:hidden;
  animation:haEmojiIn .16s ease;
}
@keyframes haEmojiIn{
  from{opacity:0; transform:translateY(6px)}
  to{opacity:1; transform:none}
}
.ha-emoji__head{
  padding:8px 10px 0; background:#f7f9fc;
  border-bottom:1px solid rgba(21,32,51,.06);
}
.ha-emoji__tabs{display:flex; gap:2px; padding-bottom:8px}
.ha-emoji__tab{
  flex:1; border:0; background:transparent; border-radius:12px;
  height:36px; font-size:18px; cursor:pointer; line-height:1;
  opacity:.55; transition:opacity .12s ease, background .12s ease;
}
.ha-emoji__tab:hover{opacity:.9; background:rgba(21,32,51,.04)}
.ha-emoji__tab.is-on{
  opacity:1; background:rgba(26,95,180,.1);
  box-shadow:inset 0 -2px 0 #1a5fb4;
}
.ha-emoji__grid{
  display:grid; grid-template-columns:repeat(8,minmax(0,1fr));
  gap:2px; padding:8px; max-height:188px; overflow:auto;
}
.ha-emoji__item{
  border:0; background:transparent; border-radius:12px;
  aspect-ratio:1; font-size:22px; cursor:pointer; line-height:1;
  display:inline-flex; align-items:center; justify-content:center;
  transition:background .12s ease, transform .12s ease;
}
.ha-emoji__item:hover{background:rgba(26,95,180,.1); transform:scale(1.08)}
.ha-emoji__item:active{transform:scale(.96)}
@media (max-width:767.98px){
  .ha-lc{padding:0; align-items:stretch}
  .ha-lc__panel{
    width:100%; max-height:none; height:100%;
    border-radius:0; animation:none;
  }
  .ha-lc__chat{min-height:0; flex:1}
}

/* ===== Site-wide PC crisp text (흐릿/옅은 글씨 보정) ===== */
@media (min-width: 901px) {
  :root {
    --vl-ink: #0e1520;
    --vl-ink-soft: #2c3644;
    --vl-muted: #334155;
  }
  html {
    font-size: 17px;
  }
  body,
  main,
  .vl-site-header,
  .vp-page {
    color: var(--vl-ink);
    line-height: 1.7;
    /* Windows에서 antialiased는 글씨가 얇고 흐릿해 보임 */
    -webkit-font-smoothing: auto;
    -moz-osx-font-smoothing: auto;
    text-rendering: auto;
  }
  body,
  p,
  li,
  span,
  a,
  label,
  td,
  th,
  summary,
  button,
  input,
  select,
  textarea {
    text-shadow: none;
  }
  .vl-nav__links .vl-nav-link {
    font-size: 0.98rem;
    font-weight: 700;
    color: #1a2433;
  }
  .vl-nav__links .vl-nav-link i {
    font-size: 1.08rem;
  }
  .vl-hero p {
    font-size: 1.1rem;
    line-height: 1.7;
    opacity: 1;
    color: #fff;
  }
  .vl-section-head h2 {
    font-size: clamp(1.5rem, 2.4vw, 2rem);
    color: #0e1520;
    font-weight: 800;
  }
  .vl-section-head p {
    font-size: 1.02rem;
    line-height: 1.65;
    color: #5c6b7c;
    max-width: 44rem;
    font-weight: 500;
    opacity: 1;
  }
  .vl-game-card__copy strong {
    font-size: clamp(1.15rem, 2.2vw, 1.42rem);
    color: #0e1520;
  }
  .vl-game-card__copy span {
    font-size: 0.95rem;
    line-height: 1.55;
    color: #5c6b7c;
    font-weight: 500;
    opacity: 1;
  }
  .vl-howto p,
  .vl-step p,
  .vl-step__copy p,
  .vl-news-card p,
  .vl-live-schedule,
  .vl-ticker,
  .vl-promo-strip,
  .vl-promo-strip p,
  .vl-howto__item p,
  .vl-note {
    font-size: 0.95rem !important;
    line-height: 1.65 !important;
    color: #5c6b7c !important;
    font-weight: 500 !important;
    opacity: 1 !important;
  }
  .vl-news-card h3 {
    font-size: 1.05rem !important;
    line-height: 1.45 !important;
    color: #0e1520 !important;
    font-weight: 800 !important;
    opacity: 1 !important;
  }
  /* 결과 카드 헤더는 컬러 배경 + 흰 글씨 유지 */
  .vl-card .vl-card__meta,
  .vl-card .vl-card__sub,
  .vl-card .vl-card__top h3,
  .vl-card .vl-card__badge {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    opacity: 1 !important;
  }
  .vl-card .vl-card__meta {
    font-size: 0.9rem !important;
    line-height: 1.45 !important;
  }
  .vl-ball {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
  }
  .vl-ball--bonus {
    color: #2a1d00 !important;
    -webkit-text-fill-color: #2a1d00 !important;
  }
  .vl-step__copy strong,
  .vl-howto__item strong {
    font-size: 1.1rem;
    color: #0e1520;
    font-weight: 800;
  }
  .vl-faq__item summary {
    font-size: 1.1rem;
    font-weight: 800;
    color: #0e1520;
  }
  .vl-faq__body p {
    font-size: 1rem;
    line-height: 1.75;
    color: #3a4656;
    font-weight: 500;
    opacity: 1;
  }
  .vl-site-header {
    backdrop-filter: saturate(1.05) blur(8px);
    background: rgba(248, 245, 240, 0.97);
  }
}