/* roulang page: index */
:root {
  --bg: #f3eee6;
  --bg-2: #e7e0d2;
  --paper: #fffcf8;
  --ink: #1b1713;
  --muted: #6d655c;
  --line: rgba(27, 23, 19, .12);
  --gold: #a6843d;
  --gold-2: #e4d2a4;
  --deep: #141311;
  --hud: #101714;
  --hud-2: #1b2823;
  --ember: #8c3d32;
  --ok: #2f6b4f;
  --radius: 22px;
  --radius-sm: 14px;
  --shadow: 0 18px 50px rgba(27, 23, 19, .08);
  --shadow-strong: 0 24px 60px rgba(12, 10, 8, .18);
  --container: 1180px;
  --space: clamp(68px, 8vw, 108px);
  --font: "Be Vietnam Pro", sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.7;
  font-size: 16px;
}
img { max-width: 100%; display: block; }
button, input, select, textarea { font-family: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { line-height: 1.12; letter-spacing: -.03em; font-weight: 600; overflow-wrap: break-word; }
::selection { background: #ead7a4; color: var(--ink); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.skip {
  position: absolute;
  left: 12px;
  top: -40px;
  background: #fff;
  color: var(--ink);
  padding: 8px 12px;
  border-radius: 999px;
  z-index: 80;
}
.skip:focus { top: 12px; }
.container { width: min(var(--container), calc(100% - 40px)); margin-inline: auto; }
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(243, 238, 230, .9);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line);
}
.header-bar {
  min-height: 78px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.logo { display: flex; flex-direction: column; line-height: 1.05; min-width: 0; }
.logo-mark { font-weight: 700; font-size: 1.28rem; letter-spacing: -.04em; }
.logo-sub { margin-top: 3px; font-size: 11px; color: var(--muted); letter-spacing: .02em; }
.nav-toggle {
  display: none;
  border: 1px solid var(--line);
  background: var(--paper);
  border-radius: 999px;
  padding: 10px 14px;
  gap: 8px;
  align-items: center;
  font-weight: 600;
}
.nav-list { display: flex; align-items: center; gap: 2px; list-style: none; }
.nav-list a, .mega-btn {
  display: inline-flex;
  align-items: center;
  border: 0;
  background: transparent;
  border-radius: 999px;
  padding: 8px 10px;
  font-size: 13.5px;
  font-weight: 550;
  font-weight: 500;
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
.nav-list a:hover, .mega-btn:hover { color: #7d6124; background: rgba(255,255,255,.7); }
.nav-list a.active {
  background: var(--deep);
  color: #f6f1e7;
}
.nav-list a.active:hover { color: #f6f1e7; }
.header-tools { display: flex; align-items: center; }
.mega-wrap { position: relative; }
.mega-btn { border: 1px solid var(--line); background: var(--paper); box-shadow: 0 8px 20px rgba(27,23,19,.04); }
.mega-btn i { margin-left: 6px; font-size: 11px; }
.mega-panel {
  display: none;
  position: absolute;
  right: 0;
  top: calc(100% + 12px);
  width: min(680px, 74vw);
  padding: 14px;
  background: rgba(255,252,248,.98);
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: var(--shadow-strong);
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.mega-wrap:hover .mega-panel, .mega-wrap:focus-within .mega-panel, .mega-wrap.is-open .mega-panel { display: grid; }
.mega-card {
  display: flex;
  flex-direction: column;
  min-height: 168px;
  border-radius: 16px;
  overflow: hidden;
  background: var(--deep);
  color: #f6f1e7;
  position: relative;
}
.mega-card img { width: 100%; height: 92px; object-fit: cover; }
.mega-card span { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 4px; }
.mega-card strong { font-size: 14px; }
.mega-card em { font-style: normal; color: rgba(246,241,231,.72); font-size: 12px; line-height: 1.45; }
.mega-card:hover { transform: translateY(-3px); transition: transform .2s ease; }
.band { padding: var(--space) 0; }
.band-tight { padding: 34px 0; }
.section-head { max-width: 760px; margin-bottom: 28px; }
.section-head .lede, .lede { color: var(--muted); margin-top: 12px; }
.rule { width: 42px; height: 2px; background: var(--gold); margin-bottom: 14px; }
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--gold-2);
  letter-spacing: .14em;
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 14px;
}
.hero {
  position: relative;
  color: #f7f1e6;
  background:
    linear-gradient(105deg, rgba(10,9,8,.92) 8%, rgba(10,9,8,.78) 46%, rgba(10,9,8,.38) 100%),
    url("/assets/images/9f0d54a3a2bdd14b.webp") center/cover no-repeat;
  overflow: hidden;
}
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(300px, .85fr);
  gap: 42px;
  align-items: center;
  padding: clamp(48px, 7vw, 92px) 0;
}
.hero h1 { font-size: clamp(2.3rem, 5vw, 4.5rem); max-width: 14ch; }
.hero .lede { color: rgba(247,241,230,.8); font-size: 1.02rem; max-width: 62ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 18px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-weight: 600;
  transition: transform .2s ease, background .2s ease, box-shadow .2s ease, color .2s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.98); }
.btn-gold { background: linear-gradient(180deg, #f0dfb4, #c6a25b); color: #231c10; box-shadow: 0 10px 24px rgba(166,132,61,.28); }
.btn-gold:hover { box-shadow: 0 16px 30px rgba(166,132,61,.36); }
.btn-ghost { background: transparent; color: #f7f1e6; border-color: rgba(247,241,230,.35); }
.btn-ghost:hover { background: rgba(255,255,255,.08); }
.btn-dark { background: var(--deep); color: #f6f1e7; }
.btn-line { background: transparent; border-color: var(--line); color: var(--ink); }
.hero-note { margin-top: 18px; color: rgba(247,241,230,.7); font-size: 14px; }
.pledge {
  background: rgba(16, 15, 13, .62);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 28px;
  padding: 18px;
  box-shadow: var(--shadow-strong);
  backdrop-filter: blur(8px);
}
.ring-wrap { display: grid; grid-template-columns: 148px 1fr; gap: 12px; align-items: center; padding: 6px 6px 14px; }
.ring { width: 148px; height: 148px; position: relative; }
.ring svg { width: 148px; height: 148px; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 10; }
.ring .track { stroke: rgba(255,255,255,.12); }
.ring .value { stroke: #e4d2a4; stroke-linecap: round; stroke-dasharray: 327; stroke-dashoffset: 72; transition: stroke-dashoffset 1s ease; }
.ring-copy { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; }
.ring-copy strong { font-size: 1.7rem; letter-spacing: -.04em; }
.ring-copy span { display: block; font-size: 12px; color: rgba(247,241,230,.7); }
.ring-side p { color: rgba(247,241,230,.76); font-size: 14px; }
.tiers { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.tier-mini {
  display: grid;
  grid-template-columns: 86px 1fr;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
}
.tier-mini b { color: var(--gold-2); font-size: 13px; }
.tier-mini span { display: block; color: rgba(247,241,230,.78); font-size: 13px; line-height: 1.45; }
.countdown { background: var(--hud); color: #f6f1e7; }
.countdown-row, .split, .tier-layout, .voice-grid, .news-grid, .register-grid, .safety-grid, .device-layout {
  display: grid;
  gap: 28px;
}
.countdown-row { grid-template-columns: 1.1fr .9fr; align-items: center; }
.is-dark .lede, .countdown .lede, .safety .lede, .metrics .lede, .register-band .lede { color: rgba(246,241,231,.76); }
.timer { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.timer div {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(228,210,164,.25);
  border-radius: 18px;
  padding: 16px 8px;
  text-align: center;
}
.timer strong { display: block; font-size: clamp(1.8rem, 3vw, 2.6rem); font-variant-numeric: tabular-nums; letter-spacing: -.04em; }
.timer span { color: var(--gold-2); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.bento { display: grid; grid-template-columns: 1.35fr .65fr; gap: 14px; }
.bento-main { grid-row: span 2; position: relative; min-height: 460px; border-radius: var(--radius); overflow: hidden; color: #fff; }
.bento-main img, .side-card img, .news-feature img, .voice-photo img, .frame img { width: 100%; height: 100%; object-fit: cover; }
.bento-main .cap, .side-card .cap {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 22px;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.78));
}
.side-card { position: relative; min-height: 223px; border-radius: var(--radius); overflow: hidden; color: white; background: var(--deep); }
.badge, .tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
}
.badge { background: rgba(228,210,164,.18); color: var(--gold-2); border: 1px solid rgba(228,210,164,.3); }
.tag { background: #f3e7cb; color: #6d5420; }
.band-sand { background: var(--bg-2); }
.tier-layout { grid-template-columns: .78fr 1.22fr; align-items: start; }
.tier-stack { display: flex; flex-direction: column; gap: 12px; }
.tier-row {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  padding: 18px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow);
}
.tier-row strong { display: block; font-size: 1.05rem; }
.tier-row p { color: var(--muted); font-size: 14.5px; }
.price { font-weight: 700; color: var(--ember); letter-spacing: -.03em; }
.tier-row.is-featured { background: var(--deep); color: #f6f1e7; border-color: transparent; }
.tier-row.is-featured p { color: rgba(246,241,231,.74); }
.tier-row.is-featured .price { color: var(--gold-2); }
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; position: relative; }
.steps::before {
  content: "";
  position: absolute;
  top: 27px;
  left: 8%;
  right: 8%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.step {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 18px 16px 20px;
  box-shadow: var(--shadow);
  position: relative;
}
.step i {
  width: 42px; height: 42px; display: grid; place-items: center;
  border-radius: 50%;
  background: var(--deep);
  color: var(--gold-2);
  margin-bottom: 14px;
}
.step h3 { font-size: 1.12rem; margin-bottom: 8px; }
.step p { color: var(--muted); font-size: 14.5px; }
.rail-wrap { position: relative; }
.reward-rail {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 8px;
}
.reward-card {
  min-width: min(300px, 82vw);
  scroll-snap-align: start;
  background: var(--paper);
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}
.reward-card img { height: 170px; width: 100%; object-fit: cover; }
.reward-card div { padding: 16px; }
.reward-card h3 { font-size: 1.08rem; margin: 8px 0; }
.reward-card p { color: var(--muted); font-size: 14.5px; }
.news-grid { grid-template-columns: 1.15fr .85fr; align-items: stretch; }
.news-feature { background: var(--paper); border-radius: 24px; overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow); }
.news-feature img { height: 280px; }
.news-feature div { padding: 18px 18px 22px; }
.news-list { display: flex; flex-direction: column; gap: 12px; }
.news-item {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 12px;
  padding: 12px;
  background: var(--paper);
  border-radius: 16px;
  border: 1px solid var(--line);
}
.news-item img { width: 92px; height: 78px; object-fit: cover; border-radius: 12px; }
.news-item time { color: var(--gold); font-size: 12px; font-weight: 600; }
.news-item h3 { font-size: 1rem; margin: 2px 0; }
.news-item p { color: var(--muted); font-size: 13.5px; }
.more-link { margin-top: 14px; display: inline-flex; align-items: center; gap: 8px; font-weight: 650; font-weight: 600; color: #7d6124; }
.more-link:hover { gap: 12px; }
.voice-grid { grid-template-columns: .7fr 1.1fr .9fr; align-items: stretch; }
.voice-photo { margin: 0; border-radius: 24px; overflow: hidden; min-height: 320px; }
.voice-photo img { height: 100%; min-height: 320px; }
.quote, .voice-stack blockquote {
  margin: 0;
  background: var(--paper);
  border-radius: 22px;
  padding: 22px;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}
.quote { display: flex; flex-direction: column; justify-content: space-between; }
.quote p, .voice-stack p { font-size: 1.05rem; }
.quote footer, .voice-stack footer { margin-top: 16px; color: var(--muted); font-size: 14px; }
.voice-stack { display: flex; flex-direction: column; gap: 12px; }
.mosaic { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 12px; }
.tile {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  min-height: 188px;
  padding: 16px;
  border-radius: 20px;
  overflow: hidden;
  color: white;
  box-shadow: var(--shadow);
}
.tile-lg { grid-row: span 2; min-height: 392px; }
.tile-wide { grid-column: span 2; }
.tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .45s ease; }
.tile::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.74));
}
.tile:hover img { transform: scale(1.06); }
.tile strong { display: block; font-size: 1.2rem; }
.tile em { display: block; margin-top: 4px; font-style: normal; color: rgba(255,255,255,.82); font-size: 13.5px; }
.safety {
  color: #f6f1e7;
  background:
    linear-gradient(180deg, rgba(16,23,20,.94), rgba(16,23,20,.92)),
    url("/assets/images/5c1f41e199487889.webp") center/cover;
}
.safety-grid { grid-template-columns: .8fr 1.2fr; }
.shields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.shield {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(228,210,164,.2);
  border-radius: 18px;
  padding: 16px;
}
.shield i { color: var(--gold-2); font-size: 18px; }
.shield h3 { margin: 8px 0; font-size: 1.05rem; }
.shield p { color: rgba(246,241,231,.74); font-size: 14.5px; }
.metrics { background: #0d0f0e; color: #f6f1e7; }
.metric-row { display: grid; grid-template-columns: 1.1fr repeat(4, 1fr); gap: 18px; align-items: center; }
.metric strong { display: block; font-size: clamp(1.6rem, 3vw, 2.3rem); letter-spacing: -.04em; color: var(--gold-2); }
.metric span { color: rgba(246,241,231,.72); font-size: 14px; }
.compare { display: grid; grid-template-columns: 1fr 1fr; border-radius: 24px; overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow); }
.compare article { padding: 28px; }
.compare .official { background: #16211c; color: #f6f1e7; }
.compare h3 { font-size: 1.4rem; margin-bottom: 8px; }
.compare ul { list-style: none; display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.compare li { display: flex; gap: 10px; align-items: flex-start; }
.compare .official li i { color: #b7d7c4; }
.compare .clone { background: var(--paper); }
.compare .clone li i { color: var(--ember); }
.spec-list { display: grid; grid-template-columns: 1fr 1fr; column-gap: 36px; }
.spec-list div {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}
.spec-list dt { font-weight: 600; }
.spec-list dd { margin: 0; color: var(--muted); text-align: right; }
.device-layout { grid-template-columns: .85fr 1.15fr; align-items: center; }
.device-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.device {
  background: var(--paper);
  border-radius: 18px;
  padding: 18px 14px;
  border: 1px solid var(--line);
  min-height: 180px;
}
.device i { font-size: 22px; color: var(--gold); }
.device h3 { margin: 10px 0 6px; font-size: 1.05rem; }
.device p { color: var(--muted); font-size: 14px; }
.marquee { overflow: hidden; }
.marquee-track { display: flex; gap: 12px; width: max-content; animation: slide 32s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.pill {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 12px 16px;
  font-weight: 600;
  box-shadow: var(--shadow);
}
@keyframes slide { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.register-band {
  color: #f6f1e7;
  background:
    linear-gradient(100deg, rgba(14,13,12,.94), rgba(14,13,12,.72)),
    url("/assets/images/e09951bf6cd98549.jpg") center/cover;
}
.register-grid { grid-template-columns: .9fr 1.1fr; align-items: center; }
.frame { margin-top: 18px; border-radius: 20px; overflow: hidden; height: 220px; border: 1px solid rgba(255,255,255,.15); }
.form {
  background: rgba(255,252,248,.96);
  color: var(--ink);
  border-radius: 24px;
  padding: 22px;
  box-shadow: var(--shadow-strong);
}
.form h3 { font-size: 1.3rem; margin-bottom: 6px; }
.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }
.fields label, .full { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; }
.full { grid-column: 1 / -1; }
input, select, textarea {
  width: 100%;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 12px;
  padding: 12px 12px;
  font-size: 15px;
}
textarea { min-height: 96px; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--gold); box-shadow: 0 0 0 4px rgba(166,132,61,.15); outline: none; }
.form .btn { width: 100%; margin-top: 8px; }
.form-note { min-height: 1.4em; margin-top: 10px; color: var(--ok); font-size: 14px; }
.fine { color: var(--muted); font-size: 12.5px; margin-top: 8px; }
.site-footer { background: #0e0d0c; color: #f3ecdf; padding: 48px 0 22px; }
.footer-grid { display: grid; grid-template-columns: 1.3fr .8fr .9fr; gap: 28px; }
.site-footer .logo-mark { color: white; }
.site-footer .logo-sub, .site-footer p, .site-footer li { color: rgba(243,236,223,.72); }
.footer-label { font-weight: 650; font-weight: 600; color: white; margin-bottom: 10px; }
.site-footer ul { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.site-footer a:hover { color: var(--gold-2); }
.footer-bottom { margin-top: 26px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.08); color: rgba(243,236,223,.62); font-size: 14px; }
@media (max-width: 1100px) {
  .nav-list a { padding: 8px 7px; font-size: 12.5px; }
  .metric-row { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 1024px) {
  .nav-toggle { display: inline-flex; }
  .header-bar { position: relative; }
  #site-nav {
    display: none;
    position: absolute;
    left: 0; right: 0; top: 100%;
    background: rgba(255,252,248,.98);
    border-bottom: 1px solid var(--line);
    padding: 8px 16px 16px;
    box-shadow: var(--shadow);
  }
  #site-nav.is-open { display: block; }
  .nav-list { flex-direction: column; align-items: stretch; }
  .nav-list a { padding: 12px; }
  .header-tools { margin-left: auto; }
  .mega-panel { position: static; width: auto; box-shadow: none; margin-top: 8px; }
  .mega-wrap:hover .mega-panel { display: none; }
  .mega-wrap.is-open .mega-panel, .mega-wrap:focus-within .mega-panel { display: grid; }
  .hero-grid, .countdown-row, .bento, .tier-layout, .news-grid, .voice-grid, .safety-grid, .device-layout, .register-grid, .footer-grid, .compare { grid-template-columns: 1fr; }
  .bento-main { grid-row: auto; min-height: 320px; }
  .steps { grid-template-columns: 1fr 1fr; }
  .steps::before { display: none; }
  .mosaic { grid-template-columns: 1fr 1fr; }
  .tile-lg, .tile-wide { grid-row: auto; grid-column: span 2; min-height: 240px; }
  .spec-list { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .ring-wrap, .fields, .shields, .device-row, .timer, .mega-panel { grid-template-columns: 1fr 1fr; }
  .voice-photo { min-height: 220px; }
  .metric-row { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
  .container { width: min(var(--container), calc(100% - 28px)); }
  .hero-actions, .fields, .timer, .steps, .shields, .device-row, .mega-panel, .metric-row, .mosaic { grid-template-columns: 1fr; }
  .tile-lg, .tile-wide { grid-column: auto; }
  .btn { width: 100%; }
  .tier-row, .news-item, .ring-wrap { grid-template-columns: 1fr; }
  .logo-mark { font-size: 1.05rem; }
  .news-feature img { height: 200px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* roulang page: category2 */
:root {
 --bg: #f3eee6;
 --bg-2: #e7e0d2;
 --paper: #fffcf8;
 --ink: #1b1713;
 --muted: #6d655c;
 --line: rgba(27, 23, 19, .12);
 --gold: #a6843d;
 --gold-2: #e4d2a4;
 --deep: #141311;
 --hud: #101714;
 --hud-2: #1b2823;
 --ember: #8c3d32;
 --ok: #2f6b4f;
 --radius: 22px;
 --radius-sm: 14px;
 --shadow: 0 18px 50px rgba(27, 23, 19, .08);
 --shadow-strong: 0 24px 60px rgba(12, 10, 8, .18);
 --container: 1180px;
 --space: clamp(68px, 8vw, 108px);
 --font: "Be Vietnam Pro", sans-serif;
}
/* roulang page: category2 */
html { scroll-behavior: smooth; }
*, *::before, *::after { box-sizing: border-box; }
body {
 margin: 0;
 font-family: var(--font);
 color: var(--ink);
 background: var(--bg);
 line-height: 1.7;
 font-size: 16px;
}
img { max-width: 100%; display: block; }
button, input, select, textarea { font-family: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
p { margin: 0; }
h1, h2, h3 { line-height: 1.15; letter-spacing: -.03em; margin: 0; }
ul { margin: 0; padding: 0; }
.container { width: min(var(--container), calc(100% - 40px)); margin-inline: auto; }
.site-header {
 position: sticky;
 top: 0;
 z-index: 50;
 background: rgba(243, 238, 230, .9);
 backdrop-filter: blur(16px);
 border-bottom: 1px solid var(--line);
}
.header-bar {
 min-height: 78px;
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 16px;
}
.logo { display: flex; flex-direction: column; line-height: 1.05; min-width: 0; }
.logo-mark { font-weight: 700; font-size: 1.28rem; letter-spacing: -.04em; }
.logo-sub { margin-top: 3px; font-size: 11px; color: var(--muted); letter-spacing: .02em; }
.nav-toggle {
 display: none;
 border: 1px solid var(--line);
 background: var(--paper);
 border-radius: 999px;
 padding: 10px 14px;
 gap: 8px;
 align-items: center;
 font-weight: 600;
}
.nav-list { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; }
.nav-list a, .mega-btn {
 display: inline-flex;
 align-items: center;
 border: 0;
 background: transparent;
 border-radius: 999px;
 padding: 8px 10px;
 font-size: 13.5px;
 font-weight: 500;
 transition: background .2s ease, color .2s ease, transform .2s ease;
}
.nav-list a:hover, .mega-btn:hover { color: #7d6124; background: rgba(255,255,255,.7); }
.nav-list a.active { background: var(--deep); color: #f6f1e7; }
.nav-list a.active:hover { color: #f6f1e7; }
.header-tools { display: flex; align-items: center; }
.mega-wrap { position: relative; }
.mega-btn { border: 1px solid var(--line); background: var(--paper); box-shadow: 0 8px 20px rgba(27,23,19,.04); }
.mega-btn i { margin-left: 6px; font-size: 11px; }
.mega-panel {
 display: none;
 position: absolute;
 right: 0;
 top: calc(100% + 12px);
 width: min(680px, 74vw);
 padding: 14px;
 background: rgba(255,252,248,.98);
 border: 1px solid var(--line);
 border-radius: 20px;
 box-shadow: var(--shadow-strong);
 grid-template-columns: repeat(3, 1fr);
 gap: 10px;
}
.mega-wrap:hover .mega-panel, .mega-wrap:focus-within .mega-panel, .mega-wrap.is-open .mega-panel { display: grid; }
.mega-card {
 display: flex;
 flex-direction: column;
 min-height: 168px;
 border-radius: 16px;
 overflow: hidden;
 background: var(--deep);
 color: #f6f1e7;
 position: relative;
}
.mega-card img { width: 100%; height: 92px; object-fit: cover; }
.mega-card span { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 4px; }
.mega-card strong { font-size: 14px; }
.mega-card em { font-style: normal; color: rgba(246,241,231,.72); font-size: 12px; line-height: 1.45; }
.mega-card:hover { transform: translateY(-3px); transition: transform .2s ease; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.section-head { max-width: 760px; margin-bottom: 28px; }
.section-head .lede, .lede { color: var(--muted); margin-top: 12px; }
.eyebrow {
 display: inline-flex;
 align-items: center;
 gap: 8px;
 color: #7d6124;
 letter-spacing: .14em;
 text-transform: uppercase;
 font-size: 12px;
 font-weight: 600;
 margin-bottom: 14px;
}
.eyebrow::before { content: ""; width: 18px; height: 1px; background: var(--gold); }
.btn {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 gap: 8px;
 min-height: 48px;
 padding: 0 18px;
 border-radius: 999px;
 border: 1px solid transparent;
 font-weight: 600;
 transition: transform .2s ease, background .2s ease, box-shadow .2s ease, color .2s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.98); }
.btn-gold { background: linear-gradient(180deg, #f0dfb4, #c6a25b); color: #231c10; box-shadow: 0 10px 24px rgba(166,132,61,.28); }
.btn-gold:hover { box-shadow: 0 16px 30px rgba(166,132,61,.36); }
.btn-ghost { background: transparent; color: #f7f1e6; border-color: rgba(247,241,230,.35); }
.btn-ghost:hover { background: rgba(255,255,255,.08); }
.btn-dark { background: var(--deep); color: #f6f1e7; }
.btn-dark:hover { box-shadow: 0 14px 28px rgba(20,19,17,.2); }
.btn-line { background: transparent; border-color: var(--line); color: var(--ink); }
.btn-line:hover { background: rgba(255,255,255,.65); }
.badge, .tag {
 display: inline-flex;
 align-items: center;
 gap: 6px;
 border-radius: 999px;
 padding: 4px 10px;
 font-size: 12px;
 font-weight: 600;
 letter-spacing: .04em;
 background: rgba(166, 132, 61, .12);
 color: #7d6124;
 border: 1px solid rgba(166, 132, 61, .28);
}
.tag-ok { background: rgba(47,107,79,.12); color: var(--ok); border-color: rgba(47,107,79,.25); }
.tag-hot { background: rgba(140,61,50,.12); color: var(--ember); border-color: rgba(140,61,50,.28); }
.site-footer { background: var(--deep); color: #f6f1e7; padding: 56px 0 28px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr .8fr 1fr; gap: 32px; }
.site-footer .logo-mark { color: #f6f1e7; }
.site-footer .logo-sub, .site-footer p { color: rgba(246,241,231,.72); }
.footer-label { letter-spacing: .12em; text-transform: uppercase; font-size: 12px; color: var(--gold-2); font-weight: 600; margin-bottom: 12px; }
.site-footer ul { list-style: none; }
.site-footer li { margin: 8px 0; }
.site-footer a { transition: color .2s ease; }
.site-footer a:hover { color: var(--gold-2); }
.footer-bottom { margin-top: 28px; padding-top: 16px; border-top: 1px solid rgba(246,241,231,.12); color: rgba(246,241,231,.6); font-size: 14px; }
.promo-stage { padding: clamp(36px, 6vw, 72px) 0 var(--space); }
.promo-layout { display: grid; grid-template-columns: minmax(280px, .82fr) minmax(0, 1.18fr); gap: 36px; align-items: center; }
.promo-poster { position: relative; margin: 0; min-height: 460px; border-radius: 28px; overflow: hidden; box-shadow: var(--shadow-strong); background: var(--deep); }
.promo-poster img { width: 100%; height: 100%; min-height: 460px; object-fit: cover; }
.promo-poster figcaption { position: absolute; left: 18px; bottom: 18px; right: 88px; color: #f7f1e6; font-weight: 600; text-shadow: 0 8px 24px rgba(0,0,0,.45); }
.burst {
 position: absolute;
 top: 18px;
 right: 16px;
 width: 104px;
 height: 104px;
 display: grid;
 place-items: center;
 text-align: center;
 padding: 18px;
 background: var(--ember);
 color: #fff8ef;
 font-weight: 700;
 font-size: 13px;
 line-height: 1.25;
 clip-path: polygon(50% 0%, 61% 18%, 82% 8%, 78% 32%, 100% 42%, 80% 54%, 92% 78%, 68% 70%, 50% 100%, 32% 70%, 8% 78%, 20% 54%, 0 42%, 22% 32%, 18% 8%, 39% 18%);
 animation: pulse-burst 3s ease-in-out infinite;
}
@keyframes pulse-burst { 50% { transform: scale(1.05); } }
.kicker-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.promo-copy h1 { font-size: clamp(2.1rem, 4.4vw, 3.7rem); max-width: 16ch; }
.limit-line { margin-top: 18px; display: flex; align-items: center; gap: 10px; font-weight: 600; }
.limit-line i { color: var(--ember); }
.promo-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.fine { margin-top: 14px; color: var(--muted); font-size: 14px; }
.offer-band { background: var(--bg-2); padding: var(--space) 0; }
.offer-head { display: flex; justify-content: space-between; gap: 24px; align-items: end; margin-bottom: 22px; }
.offer-head h2 { font-size: clamp(1.7rem, 3vw, 2.5rem); max-width: 16ch; }
.offer-list { display: flex; flex-direction: column; gap: 14px; }
.offer-row {
 display: grid;
 grid-template-columns: 168px minmax(0, 1fr) auto;
 gap: 18px;
 align-items: center;
 padding: 12px;
 background: var(--paper);
 border: 1px solid var(--line);
 border-radius: var(--radius);
 box-shadow: var(--shadow);
 transition: transform .2s ease, box-shadow .2s ease;
}
.offer-row:hover { transform: translateY(-3px); box-shadow: var(--shadow-strong); }
.offer-row img { width: 168px; height: 112px; object-fit: cover; border-radius: 16px; }
.offer-row h3 { font-size: 1.2rem; margin-bottom: 6px; }
.offer-row p { color: var(--muted); }
.offer-rate { min-width: 112px; text-align: right; }
.offer-rate strong { display: block; font-size: 1.55rem; letter-spacing: -.04em; }
.offer-rate span { color: var(--muted); font-size: 13px; }
.rebate-wrap { padding: var(--space) 0; }
.rebate-board { background: var(--hud); color: #f4efe6; border-radius: 28px; padding: clamp(22px, 4vw, 36px); box-shadow: var(--shadow-strong); }
.rebate-top { display: grid; grid-template-columns: 1.1fr .9fr; gap: 28px; margin-bottom: 26px; }
.rebate-board .lede { color: rgba(244,239,230,.72); }
.rebate-board .eyebrow { color: var(--gold-2); }
.tier-line { display: flex; flex-direction: column; gap: 10px; }
.tier-line article { display: grid; grid-template-columns: 92px 1fr; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid rgba(244,239,230,.12); }
.tier-line b { color: var(--gold-2); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; }
.rebate-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.rebate-col { background: var(--hud-2); border-radius: 18px; padding: 16px; border: 1px solid rgba(228,210,164,.16); }
.rebate-col header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.rebate-col h3 { font-size: 1.05rem; }
.rebate-col dl { margin: 0; }
.rebate-col div { display: flex; justify-content: space-between; gap: 8px; padding: 8px 0; border-top: 1px solid rgba(244,239,230,.1); font-size: 14px; }
.rebate-col dt { color: rgba(244,239,230,.62); }
.rebate-col dd { margin: 0; font-weight: 600; }
.cycle-band { padding: 0 0 var(--space); }
.cycle-track { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; position: relative; }
.cycle-track::before { content: ""; position: absolute; left: 6%; right: 6%; top: 28px; height: 1px; background: rgba(166,132,61,.45); }
.cycle-node { position: relative; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 16px 16px; box-shadow: var(--shadow); }
.cycle-node i { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: var(--deep); color: var(--gold-2); margin-bottom: 14px; position: relative; z-index: 1; }
.cycle-node strong { display: block; margin-bottom: 6px; }
.cycle-node p { color: var(--muted); font-size: 14px; }
.rule-band { padding-bottom: var(--space); }
.rule-split { display: grid; grid-template-columns: .9fr 1.1fr; gap: 28px; align-items: stretch; }
.rule-photo { margin: 0; border-radius: 28px; overflow: hidden; min-height: 420px; position: relative; box-shadow: var(--shadow); }
.rule-photo img { width: 100%; height: 100%; object-fit: cover; min-height: 420px; }
.rule-photo span { position: absolute; left: 16px; bottom: 16px; background: rgba(20,19,17,.78); color: #f6f1e7; border-radius: 999px; padding: 8px 12px; font-size: 13px; }
.rule-card { background: var(--paper); border-radius: 28px; border: 1px solid var(--line); padding: clamp(22px, 3vw, 36px); box-shadow: var(--shadow); }
.rule-list { list-style: none; display: flex; flex-direction: column; gap: 14px; margin-top: 18px; }
.rule-list li { display: grid; grid-template-columns: 28px 1fr; gap: 10px; align-items: start; }
.rule-list i { color: var(--ok); margin-top: 4px; }
.metric-band { padding-bottom: var(--space); }
.metric-board {
 background:
  linear-gradient(120deg, rgba(16,23,20,.94), rgba(16,23,20,.78)),
  url("/assets/images/5c1f41e199487889.webp") center/cover;
 color: #f6f1e7;
 border-radius: 28px;
 padding: clamp(22px, 4vw, 40px);
}
.metric-grid { display: grid; grid-template-columns: 1.1fr repeat(3, .7fr); gap: 14px; margin-top: 22px; }
.metric-lead p { color: rgba(246,241,231,.75); margin-top: 10px; }
.metric-tile { background: rgba(255,252,248,.06); border: 1px solid rgba(228,210,164,.2); border-radius: 18px; padding: 16px; backdrop-filter: blur(6px); }
.metric-tile b { display: block; font-size: clamp(1.6rem, 3vw, 2.3rem); letter-spacing: -.04em; color: var(--gold-2); }
.metric-tile span { color: rgba(246,241,231,.72); font-size: 14px; }
.note-band { padding-bottom: var(--space); }
.note-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 18px; }
.note-main, .note-side { background: var(--paper); border: 1px solid var(--line); border-radius: 28px; overflow: hidden; box-shadow: var(--shadow); }
.note-main { display: grid; grid-template-columns: 210px 1fr; }
.note-main img, .note-side img { width: 100%; height: 100%; object-fit: cover; min-height: 220px; }
.note-copy { padding: 22px; }
.note-copy h3 { font-size: 1.35rem; margin: 8px 0 10px; }
.note-copy p { color: var(--muted); }
.note-side { display: flex; flex-direction: column; }
.note-side .note-copy { padding-top: 16px; }
.lock-band { padding-bottom: var(--space); }
.lock-inner {
 display: grid;
 grid-template-columns: 1.4fr auto;
 gap: 22px;
 align-items: center;
 padding: clamp(26px, 4vw, 42px);
 border-radius: 28px;
 color: #f7f1e6;
 background:
  linear-gradient(100deg, rgba(20,19,17,.92), rgba(140,61,50,.78)),
  url("/assets/images/2c4061f8f53d2dcb.webp") center/cover;
 box-shadow: var(--shadow-strong);
}
.lock-inner h2 { font-size: clamp(1.8rem, 3vw, 2.7rem); max-width: 16ch; margin-bottom: 10px; }
.lock-inner p { color: rgba(247,241,230,.8); max-width: 58ch; }
.lock-actions { display: flex; flex-wrap: wrap; gap: 10px; }
@media (max-width: 1080px) {
 .nav-toggle { display: inline-flex; }
 .header-bar { flex-wrap: wrap; padding: 10px 0; }
 #site-nav { display: none; width: 100%; order: 4; padding-bottom: 12px; }
 #site-nav.is-open { display: block; }
 .nav-list { flex-direction: column; align-items: stretch; }
 .nav-list a { padding: 12px 14px; }
 .header-tools { width: 100%; order: 3; }
 .mega-panel { position: static; width: 100%; margin-top: 8px; }
 .promo-layout, .rebate-top, .rule-split, .note-grid, .lock-inner, .metric-grid { grid-template-columns: 1fr; }
 .cycle-track { grid-template-columns: 1fr 1fr; }
 .cycle-track::before { display: none; }
 .rebate-grid { grid-template-columns: 1fr 1fr; }
 .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
 .offer-head, .offer-row, .note-main { grid-template-columns: 1fr; }
 .offer-row img { width: 100%; height: 180px; }
 .offer-rate { text-align: left; }
 .cycle-track, .rebate-grid, .footer-grid { grid-template-columns: 1fr; }
 .promo-poster, .promo-poster img, .rule-photo, .rule-photo img { min-height: 280px; }
}
@media (max-width: 520px) {
 .container { width: min(var(--container), calc(100% - 28px)); }
 .promo-actions .btn, .lock-actions .btn { width: 100%; }
 .promo-copy h1 { font-size: 2rem; }
 .burst { width: 86px; height: 86px; font-size: 12px; }
 .tier-line article { grid-template-columns: 1fr; gap: 4px; }
}
@media (prefers-reduced-motion: reduce) {
 *, *::before, *::after { animation: none !important; transition: none !important; }
 html { scroll-behavior: auto; }
}

/* roulang page: category1 */
:root {
 --bg: #f3eee6;
 --bg-2: #e7e0d2;
 --paper: #fffcf8;
 --ink: #1b1713;
 --muted: #6d655c;
 --line: rgba(27, 23, 19, .12);
 --gold: #a6843d;
 --gold-2: #e4d2a4;
 --deep: #141311;
 --hud: #101714;
 --hud-2: #1b2823;
 --ember: #8c3d32;
 --ok: #2f6b4f;
 --radius: 22px;
 --radius-sm: 14px;
 --shadow: 0 18px 50px rgba(27, 23, 19, .08);
 --shadow-strong: 0 24px 60px rgba(12, 10, 8, .18);
 --container: 1180px;
 --space: clamp(68px, 8vw, 108px);
 --font: "Be Vietnam Pro", sans-serif;
}
/* roulang page: category-tro-choi */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
 margin: 0;
 font-family: var(--font);
 color: var(--ink);
 background:
  radial-gradient(1200px 420px at 90% -10%, rgba(166, 132, 61, .16), transparent 60%),
  var(--bg);
 line-height: 1.7;
 font-size: 16px;
}
img { max-width: 100%; display: block; }
button, input, select, textarea { font-family: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p { margin: 0; }
ul, ol { margin: 0; padding: 0; }
.container { width: min(var(--container), calc(100% - 40px)); margin-inline: auto; }
.site-header {
 position: sticky;
 top: 0;
 z-index: 50;
 background: rgba(243, 238, 230, .9);
 backdrop-filter: blur(16px);
 border-bottom: 1px solid var(--line);
}
.header-bar {
 min-height: 78px;
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 16px;
 position: relative;
}
.logo { display: flex; flex-direction: column; line-height: 1.05; min-width: 0; }
.logo-mark { font-weight: 700; font-size: 1.28rem; letter-spacing: -.04em; }
.logo-sub { margin-top: 3px; font-size: 11px; color: var(--muted); letter-spacing: .02em; }
.nav-toggle {
 display: none;
 border: 1px solid var(--line);
 background: var(--paper);
 border-radius: 999px;
 padding: 10px 14px;
 gap: 8px;
 align-items: center;
 font-weight: 600;
}
.nav-list { display: flex; align-items: center; gap: 2px; list-style: none; }
.nav-list a, .mega-btn {
 display: inline-flex;
 align-items: center;
 border: 0;
 background: transparent;
 border-radius: 999px;
 padding: 8px 10px;
 font-size: 13.5px;
 font-weight: 550;
 font-weight: 500;
 transition: background .2s ease, color .2s ease, transform .2s ease;
}
.nav-list a:hover, .mega-btn:hover { color: #7d6124; background: rgba(255,255,255,.7); }
.nav-list a.active {
 background: var(--deep);
 color: #f6f1e7;
}
.nav-list a.active:hover { color: #f6f1e7; }
.header-tools { display: flex; align-items: center; }
.mega-wrap { position: relative; }
.mega-btn { border: 1px solid var(--line); background: var(--paper); box-shadow: 0 8px 20px rgba(27,23,19,.04); }
.mega-btn i { margin-left: 6px; font-size: 11px; }
.mega-panel {
 display: none;
 position: absolute;
 right: 0;
 top: calc(100% + 12px);
 width: min(680px, 74vw);
 padding: 14px;
 background: rgba(255,252,248,.98);
 border: 1px solid var(--line);
 border-radius: 20px;
 box-shadow: var(--shadow-strong);
 grid-template-columns: repeat(3, 1fr);
 gap: 10px;
 z-index: 60;
}
.mega-wrap:hover .mega-panel, .mega-wrap:focus-within .mega-panel, .mega-wrap.is-open .mega-panel { display: grid; }
.mega-card {
 display: flex;
 flex-direction: column;
 min-height: 168px;
 border-radius: 16px;
 overflow: hidden;
 background: var(--deep);
 color: #f6f1e7;
 position: relative;
}
.mega-card img { width: 100%; height: 92px; object-fit: cover; }
.mega-card span { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 4px; }
.mega-card strong { font-size: 14px; }
.mega-card em { font-style: normal; color: rgba(246,241,231,.72); font-size: 12px; line-height: 1.45; }
.mega-card:hover { transform: translateY(-3px); transition: transform .2s ease; }
.section { padding: var(--space) 0; }
.section-head { max-width: 760px; margin-bottom: 28px; }
.section-head .lede, .lede { color: var(--muted); margin-top: 12px; }
.eyebrow {
 display: inline-flex;
 align-items: center;
 gap: 8px;
 color: #8d6a2a;
 letter-spacing: .14em;
 text-transform: uppercase;
 font-size: 12px;
 font-weight: 600;
 margin-bottom: 14px;
}
h1, h2, h3 { letter-spacing: -.03em; line-height: 1.18; }
h2 { font-size: clamp(1.7rem, 3vw, 2.55rem); }
h3 { font-size: 1.12rem; }
.play-hero {
 position: relative;
 color: #f7f1e6;
 background:
  linear-gradient(180deg, rgba(10,9,8,.78), rgba(10,9,8,.86)),
  url("/assets/images/2c4061f8f53d2dcb.webp") center/cover no-repeat;
 overflow: hidden;
}
.play-hero .eyebrow { color: var(--gold-2); }
.play-hero-inner {
 max-width: 860px;
 margin: 0 auto;
 text-align: center;
 padding: clamp(64px, 9vw, 112px) 0 clamp(56px, 7vw, 88px);
}
.play-hero h1 { font-size: clamp(2.2rem, 5vw, 4.15rem); line-height: 1.05; }
.play-hero .lede { color: rgba(247,241,230,.8); font-size: 1.05rem; max-width: 66ch; margin-inline: auto; }
.finder {
 margin: 28px auto 0;
 display: flex;
 align-items: center;
 gap: 8px;
 max-width: 640px;
 padding: 8px;
 background: rgba(255,252,248,.96);
 border-radius: 999px;
 box-shadow: var(--shadow-strong);
 color: var(--ink);
}
.finder input {
 flex: 1;
 min-width: 0;
 border: 0;
 background: transparent;
 min-height: 48px;
 padding: 0 16px;
 font-size: 16px;
 outline: none;
}
.quick-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 18px; }
.chip {
 display: inline-flex;
 align-items: center;
 gap: 8px;
 min-height: 40px;
 padding: 0 14px;
 border-radius: 999px;
 border: 1px solid rgba(247,241,230,.28);
 color: #f7f1e6;
 background: rgba(255,255,255,.06);
 font-size: 14px;
 font-weight: 600;
 transition: background .2s ease, transform .2s ease, border-color .2s ease;
}
.chip:hover, .chip:focus-visible { background: rgba(255,255,255,.14); transform: translateY(-2px); }
.chip i { color: var(--gold-2); }
.btn {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 gap: 8px;
 min-height: 48px;
 padding: 0 18px;
 border-radius: 999px;
 border: 1px solid transparent;
 font-weight: 600;
 transition: transform .2s ease, background .2s ease, box-shadow .2s ease, color .2s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.98); }
.btn-gold { background: linear-gradient(180deg, #f0dfb4, #c6a25b); color: #231c10; box-shadow: 0 10px 24px rgba(166,132,61,.28); }
.btn-gold:hover { box-shadow: 0 16px 30px rgba(166,132,61,.36); }
.btn-ghost { background: transparent; color: #f7f1e6; border-color: rgba(247,241,230,.35); }
.btn-ghost:hover { background: rgba(255,255,255,.08); }
.btn-dark { background: var(--deep); color: #f6f1e7; }
.btn-line { background: transparent; border-color: var(--line); color: var(--ink); }
.btn-line:hover { background: #fff; }
.badge, .tag {
 display: inline-flex;
 align-items: center;
 gap: 6px;
 border-radius: 999px;
 padding: 4px 10px;
 font-size: 12px;
 font-weight: 600;
 letter-spacing: .04em;
 background: rgba(166, 132, 61, .14);
 color: #7d6124;
 border: 1px solid rgba(166, 132, 61, .28);
}
.badge-light {
 background: rgba(255,255,255,.14);
 color: #f6f1e7;
 border-color: rgba(255,255,255,.22);
}
.hall-bento {
 display: grid;
 grid-template-columns: 1.35fr .8fr;
 grid-template-rows: 1fr 1fr;
 gap: 14px;
}
.bento-main { grid-row: span 2; position: relative; min-height: 520px; border-radius: var(--radius); overflow: hidden; color: #fff; box-shadow: var(--shadow); }
.bento-main img, .side-card img, .frame img { width: 100%; height: 100%; object-fit: cover; }
.bento-main .cap, .side-card .cap {
 position: absolute;
 left: 0; right: 0; bottom: 0;
 padding: 22px;
 background: linear-gradient(180deg, transparent, rgba(0,0,0,.78));
}
.side-card { position: relative; min-height: 250px; border-radius: var(--radius); overflow: hidden; color: white; background: var(--deep); box-shadow: var(--shadow); }
.cap h3 { font-size: 1.45rem; margin-bottom: 6px; }
.cap p { color: rgba(255,255,255,.82); max-width: 46ch; }
.stat-strip {
 margin-top: 14px;
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 border: 1px solid var(--line);
 border-radius: var(--radius);
 background: var(--paper);
 overflow: hidden;
}
.stat-strip div { padding: 18px 20px; }
.stat-strip div + div { border-left: 1px solid var(--line); }
.stat-strip strong { display: block; font-size: 1.55rem; letter-spacing: -.04em; }
.stat-strip span { color: var(--muted); font-size: 14px; }
.hud { background: radial-gradient(800px 280px at 10% 0%, rgba(166,132,61,.18), transparent 50%), var(--hud); color: #f6f1e7; }
.hud .eyebrow { color: var(--gold-2); }
.hud .lede { color: rgba(246,241,231,.72); }
.hud-layout { display: grid; grid-template-columns: .78fr 1.22fr; gap: 36px; align-items: center; }
.hud-note { margin-top: 18px; color: rgba(246,241,231,.7); font-size: 14px; }
.hud-board { background: rgba(255,255,255,.03); border: 1px solid rgba(228,210,164,.18); border-radius: 24px; overflow: hidden; }
.hud-row { display: grid; grid-template-columns: 1.1fr repeat(3, 1fr); gap: 8px; padding: 14px 16px; align-items: center; }
.hud-row + .hud-row { border-top: 1px solid rgba(255,255,255,.06); }
.hud-row.head { color: var(--gold-2); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }
.hud-row strong { font-weight: 600; }
.meter { height: 7px; border-radius: 999px; background: rgba(255,255,255,.08); overflow: hidden; margin-top: 6px; }
.meter span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #c6a25b, #f0dfb4); }
.shifts { background: linear-gradient(180deg, rgba(255,252,248,.4), rgba(231,224,210,.65)); }
.shift-line { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; position: relative; }
.shift-line::before {
 content: "";
 position: absolute;
 left: 6%;
 right: 6%;
 top: 28px;
 height: 1px;
 background: linear-gradient(90deg, transparent, rgba(166,132,61,.7), transparent);
}
.shift-line li { padding: 0 16px; }
.shift-no {
 width: 56px; height: 56px; border-radius: 50%;
 display: grid; place-items: center;
 background: var(--deep); color: var(--gold-2);
 font-weight: 700; position: relative; z-index: 1;
 box-shadow: 0 0 0 8px var(--bg-2);
}
.shift-line h3 { margin: 16px 0 8px; }
.shift-line p { color: var(--muted); }
.catalog-head { display: flex; justify-content: space-between; gap: 24px; align-items: flex-end; margin-bottom: 22px; }
.filter-line { display: flex; flex-wrap: wrap; gap: 8px; }
.filter-line button {
 border: 1px solid var(--line);
 background: var(--paper);
 border-radius: 999px;
 min-height: 40px;
 padding: 0 14px;
 font-weight: 600;
 transition: background .2s ease, color .2s ease, transform .2s ease;
}
.filter-line button.is-on, .filter-line button:hover { background: var(--deep); color: #f6f1e7; }
.game-list { display: flex; flex-direction: column; gap: 12px; }
.game-row {
 display: grid;
 grid-template-columns: 210px minmax(0, 1fr) auto;
 gap: 18px;
 align-items: center;
 padding: 12px;
 background: var(--paper);
 border: 1px solid var(--line);
 border-radius: 20px;
 box-shadow: var(--shadow);
 transition: transform .2s ease, box-shadow .2s ease;
}
.game-row:hover { transform: translateY(-3px); box-shadow: var(--shadow-strong); }
.game-row img { width: 100%; height: 126px; object-fit: cover; border-radius: 14px; }
.game-row h3 { font-size: 1.2rem; }
.meta-line { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.game-side { text-align: right; min-width: 140px; }
.game-side b { display: block; font-size: 1.15rem; }
.game-side span { color: var(--muted); font-size: 13px; }
.empty-note { margin-top: 14px; color: var(--muted); }
.more-link {
 margin-top: 18px;
 display: inline-flex;
 align-items: center;
 gap: 8px;
 font-weight: 700;
 color: #7d6124;
}
.more-link:hover { gap: 12px; }
.limits { padding-top: 0; }
.limit-layout {
 display: grid;
 grid-template-columns: .9fr 1.1fr;
 gap: 28px;
 align-items: stretch;
 background: var(--paper);
 border-radius: 28px;
 border: 1px solid var(--line);
 box-shadow: var(--shadow);
 overflow: hidden;
}
.frame { min-height: 100%; background: var(--deep); }
.frame img { min-height: 460px; }
.limit-copy { padding: clamp(22px, 3vw, 40px); }
.limit-list { margin-top: 20px; display: flex; flex-direction: column; gap: 12px; }
.limit-list article {
 display: grid;
 grid-template-columns: 92px 1fr;
 gap: 12px;
 padding-top: 12px;
 border-top: 1px solid var(--line);
}
.limit-list strong { color: #7d6124; }
.channels { background: var(--bg-2); }
.channel-list { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.channel-row {
 display: grid;
 grid-template-columns: 72px 1.1fr 1.6fr auto;
 gap: 16px;
 align-items: center;
 padding: 18px 4px;
 border-bottom: 1px solid var(--line);
 transition: background .2s ease, padding-left .2s ease;
}
.channel-row:hover { background: rgba(255,252,248,.7); padding-left: 10px; }
.channel-row em { font-style: normal; color: var(--gold); font-weight: 700; letter-spacing: .08em; }
.channel-row p { color: var(--muted); }
.channel-row .now { color: var(--ok); font-weight: 700; font-size: 13px; }
.faq-list { display: flex; flex-direction: column; gap: 10px; max-width: 860px; }
.faq-item { background: var(--paper); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; }
.faq-q {
 width: 100%;
 text-align: left;
 background: transparent;
 border: 0;
 padding: 18px 20px;
 display: flex;
 justify-content: space-between;
 gap: 16px;
 font-weight: 700;
 font-size: 1.02rem;
}
.faq-q i { color: var(--gold); transition: transform .2s ease; }
.faq-item.is-open .faq-q i { transform: rotate(45deg); }
.faq-a { display: none; padding: 0 20px 18px; color: var(--muted); }
.faq-item.is-open .faq-a { display: block; }
.close-band {
 position: relative;
 color: #f7f1e6;
 background:
  linear-gradient(100deg, rgba(12,11,9,.92), rgba(12,11,9,.72)),
  url("/assets/images/edbf6a742526d14d.webp") center/cover no-repeat;
}
.close-band .eyebrow { color: var(--gold-2); }
.close-inner { display: flex; justify-content: space-between; gap: 28px; align-items: flex-end; }
.close-inner h2 { max-width: 16ch; font-size: clamp(2rem, 4vw, 3.3rem); }
.close-inner p { max-width: 42ch; color: rgba(247,241,230,.78); margin: 12px 0 0; }
.close-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.site-footer { background: var(--deep); color: #f6f1e7; padding: 64px 0 28px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr .8fr 1fr; gap: 36px; }
.site-footer .logo-mark { color: #f6f1e7; }
.site-footer .logo-sub { color: rgba(246,241,231,.62); }
.site-footer p { color: rgba(246,241,231,.74); margin-top: 14px; }
.footer-label { letter-spacing: .14em; text-transform: uppercase; font-size: 12px; color: var(--gold-2); font-weight: 700; }
.site-footer ul { list-style: none; margin-top: 14px; }
.site-footer li + li { margin-top: 8px; }
.site-footer a { color: #f6f1e7; }
.site-footer a:hover { color: var(--gold-2); }
.footer-bottom { margin-top: 28px; padding-top: 18px; border-top: 1px solid rgba(246,241,231,.12); color: rgba(246,241,231,.62); font-size: 14px; }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
@media (max-width: 1024px) {
 .nav-toggle { display: inline-flex; }
 .header-bar { flex-wrap: wrap; }
 .header-tools { margin-left: auto; }
 #site-nav { display: none; width: 100%; order: 5; padding-bottom: 12px; }
 #site-nav.is-open { display: block; }
 .nav-list { flex-direction: column; align-items: flex-start; gap: 4px; }
 .hud-layout, .limit-layout, .close-inner, .footer-grid, .catalog-head { grid-template-columns: 1fr; display: grid; }
 .hall-bento { grid-template-columns: 1fr; }
 .bento-main { grid-row: auto; min-height: 360px; }
 .stat-strip, .shift-line { grid-template-columns: 1fr 1fr; }
 .shift-line::before { display: none; }
 .shift-line li { padding: 12px 0; }
 .game-row { grid-template-columns: 160px minmax(0, 1fr); }
 .game-side { grid-column: 2; text-align: left; }
 .channel-row { grid-template-columns: 48px 1fr; }
 .channel-row p, .channel-row .now { grid-column: 2; }
 .close-inner { align-items: flex-start; }
}
@media (max-width: 768px) {
 .mega-panel { grid-template-columns: 1fr; width: min(420px, calc(100vw - 28px)); }
 .stat-strip { grid-template-columns: 1fr; }
 .stat-strip div + div { border-left: 0; border-top: 1px solid var(--line); }
 .hud-row { grid-template-columns: 1fr 1fr; }
 .hud-row.head { display: none; }
 .shift-line { grid-template-columns: 1fr; }
 .game-row { grid-template-columns: 1fr; }
 .game-side { grid-column: auto; }
 .limit-list article { grid-template-columns: 1fr; }
 .frame img, .bento-main { min-height: 260px; }
}
@media (max-width: 520px) {
 .container { width: min(var(--container), calc(100% - 28px)); }
 .finder { flex-direction: column; border-radius: 22px; align-items: stretch; }
 .finder .btn, .close-actions .btn { width: 100%; }
 .play-hero h1 { font-size: 2.15rem; }
 .logo-mark { font-size: 1.1rem; }
 .nav-toggle { padding: 8px 12px; }
 .cap h3 { font-size: 1.2rem; }
}
@media (prefers-reduced-motion: reduce) {
 html { scroll-behavior: auto; }
 *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* roulang page: category4 */
:root {
 --bg: #f3eee6;
 --bg-2: #e7e0d2;
 --paper: #fffcf8;
 --ink: #1b1713;
 --muted: #6d655c;
 --line: rgba(27, 23, 19, .12);
 --gold: #a6843d;
 --gold-2: #e4d2a4;
 --deep: #141311;
 --hud: #101714;
 --hud-2: #1b2823;
 --ember: #8c3d32;
 --ok: #2f6b4f;
 --radius: 22px;
 --radius-sm: 14px;
 --shadow: 0 18px 50px rgba(27, 23, 19, .08);
 --shadow-strong: 0 24px 60px rgba(12, 10, 8, .18);
 --container: 1180px;
 --space: clamp(68px, 8vw, 108px);
 --font: "Be Vietnam Pro", sans-serif;
}
/* roulang page: casino */
:root {
 --bg: #f3eee6;
 --bg-2: #e7e0d2;
 --paper: #fffcf8;
 --ink: #1b1713;
 --muted: #6d655c;
 --line: rgba(27, 23, 19, .12);
 --gold: #a6843d;
 --gold-2: #e4d2a4;
 --deep: #141311;
 --hud: #101714;
 --hud-2: #1b2823;
 --ember: #8c3d32;
 --ok: #2f6b4f;
 --radius: 22px;
 --radius-sm: 14px;
 --shadow: 0 18px 50px rgba(27, 23, 19, .08);
 --shadow-strong: 0 24px 60px rgba(12, 10, 8, .18);
 --container: 1180px;
 --space: clamp(68px, 8vw, 108px);
 --font: "Be Vietnam Pro", sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
 margin: 0;
 font-family: var(--font);
 color: var(--ink);
 background:
  radial-gradient(900px 420px at 0% 0%, rgba(228, 210, 164, .35), transparent 60%),
  var(--bg);
 line-height: 1.7;
 font-size: 16px;
}
img { max-width: 100%; display: block; }
button, input, select, textarea { font-family: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible {
 outline: 2px solid var(--gold);
 outline-offset: 3px;
}
.container { width: min(var(--container), calc(100% - 40px)); margin-inline: auto; }
.site-header {
 position: sticky;
 top: 0;
 z-index: 50;
 background: rgba(243, 238, 230, .9);
 backdrop-filter: blur(16px);
 border-bottom: 1px solid var(--line);
}
.header-bar {
 min-height: 78px;
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 16px;
}
.logo { display: flex; flex-direction: column; line-height: 1.05; min-width: 0; }
.logo-mark { font-weight: 700; font-size: 1.28rem; letter-spacing: -.04em; }
.logo-sub { margin-top: 3px; font-size: 11px; color: var(--muted); letter-spacing: .02em; }
.nav-toggle {
 display: none;
 border: 1px solid var(--line);
 background: var(--paper);
 border-radius: 999px;
 padding: 10px 14px;
 gap: 8px;
 align-items: center;
 font-weight: 600;
}
.nav-list { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; }
.nav-list a, .mega-btn {
 display: inline-flex;
 align-items: center;
 border: 0;
 background: transparent;
 border-radius: 999px;
 padding: 8px 10px;
 font-size: 13.5px;
 font-weight: 500;
 transition: background .2s ease, color .2s ease, transform .2s ease;
}
.nav-list a:hover, .mega-btn:hover { color: #7d6124; background: rgba(255,255,255,.7); }
.nav-list a.active { background: var(--deep); color: #f6f1e7; }
.nav-list a.active:hover { color: #f6f1e7; }
.header-tools { display: flex; align-items: center; }
.mega-wrap { position: relative; }
.mega-btn { border: 1px solid var(--line); background: var(--paper); box-shadow: 0 8px 20px rgba(27,23,19,.04); }
.mega-btn i { margin-left: 6px; font-size: 11px; }
.mega-panel {
 display: none;
 position: absolute;
 right: 0;
 top: calc(100% + 12px);
 width: min(680px, 74vw);
 padding: 14px;
 background: rgba(255,252,248,.98);
 border: 1px solid var(--line);
 border-radius: 20px;
 box-shadow: var(--shadow-strong);
 grid-template-columns: repeat(3, 1fr);
 gap: 10px;
}
.mega-wrap:hover .mega-panel, .mega-wrap:focus-within .mega-panel, .mega-wrap.is-open .mega-panel { display: grid; }
.mega-card {
 display: flex;
 flex-direction: column;
 min-height: 168px;
 border-radius: 16px;
 overflow: hidden;
 background: var(--deep);
 color: #f6f1e7;
 position: relative;
}
.mega-card img { width: 100%; height: 92px; object-fit: cover; }
.mega-card span { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 4px; }
.mega-card strong { font-size: 14px; }
.mega-card em { font-style: normal; color: rgba(246,241,231,.72); font-size: 12px; line-height: 1.45; }
.mega-card:hover { transform: translateY(-3px); transition: transform .2s ease; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { line-height: 1.15; letter-spacing: -.03em; }
h1 { font-size: clamp(2.4rem, 5vw, 4.4rem); margin-bottom: 0; }
h2 { font-size: clamp(1.7rem, 3vw, 2.6rem); margin-bottom: 0; }
h3 { font-size: 1.15rem; margin-bottom: 6px; }
.section-head { max-width: 760px; margin-bottom: 28px; }
.section-head .lede, .lede { color: var(--muted); margin-top: 12px; }
.eyebrow {
 display: inline-flex;
 align-items: center;
 gap: 8px;
 color: var(--gold);
 letter-spacing: .14em;
 text-transform: uppercase;
 font-size: 12px;
 font-weight: 600;
 margin-bottom: 14px;
}
.eyebrow.light { color: var(--gold-2); }
.btn {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 gap: 8px;
 min-height: 48px;
 padding: 0 18px;
 border-radius: 999px;
 border: 1px solid transparent;
 font-weight: 600;
 transition: transform .2s ease, background .2s ease, box-shadow .2s ease, color .2s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.98); }
.btn-gold { background: linear-gradient(180deg, #f0dfb4, #c6a25b); color: #231c10; box-shadow: 0 10px 24px rgba(166,132,61,.28); }
.btn-gold:hover { box-shadow: 0 16px 30px rgba(166,132,61,.36); }
.btn-ghost { background: transparent; color: #f7f1e6; border-color: rgba(247,241,230,.35); }
.btn-ghost:hover { background: rgba(255,255,255,.08); }
.btn-dark { background: var(--deep); color: #f6f1e7; }
.btn-line { background: transparent; border-color: var(--line); color: var(--ink); }
.btn-line:hover { background: #fff; }
.badge, .tag {
 display: inline-flex;
 align-items: center;
 gap: 6px;
 border-radius: 999px;
 padding: 4px 10px;
 font-size: 12px;
 font-weight: 600;
 letter-spacing: .04em;
 background: rgba(166, 132, 61, .12);
 color: #7a5d28;
 border: 1px solid rgba(166, 132, 61, .22);
}
.tag-ok { background: rgba(47, 107, 79, .12); color: var(--ok); border-color: rgba(47, 107, 79, .2); }
.tag-live { background: rgba(140, 61, 50, .12); color: var(--ember); border-color: rgba(140, 61, 50, .22); }
main section { padding: var(--space) 0; }
.page-mast { padding-top: clamp(36px, 5vw, 64px); }
.mast-grid, .floor-grid, .catalog-grid, .rule-grid, .note-grid {
 display: grid;
 gap: 28px;
}
.mast-grid { grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr); align-items: end; }
.crumb { display: flex; gap: 8px; color: var(--muted); font-size: 13px; margin-bottom: 18px; }
.crumb span { color: var(--gold); }
.mast-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 28px; }
.stat {
 background: var(--paper);
 border: 1px solid var(--line);
 border-radius: var(--radius-sm);
 padding: 14px 16px;
 box-shadow: var(--shadow);
}
.stat b { display: block; font-size: 1.35rem; letter-spacing: -.03em; }
.stat span { color: var(--muted); font-size: 13px; }
.frame {
 position: relative;
 min-height: 460px;
 border-radius: 28px;
 overflow: hidden;
 box-shadow: var(--shadow-strong);
 background: var(--deep);
}
.frame img, .wide-card img, .mosaic img, .note-photo img { width: 100%; height: 100%; object-fit: cover; }
.frame figcaption {
 position: absolute;
 left: 16px;
 right: 16px;
 bottom: 16px;
 padding: 16px;
 border-radius: 18px;
 background: rgba(20, 19, 17, .72);
 color: #f6f1e7;
 backdrop-filter: blur(8px);
}
.frame figcaption strong { display: block; }
.frame figcaption span { color: rgba(246,241,231,.75); font-size: 13px; }
.floor-band { background: linear-gradient(180deg, rgba(255,252,248,.55), transparent 28%), var(--bg-2); }
.floor-grid { grid-template-columns: 1.25fr .75fr; align-items: stretch; }
.wide-card {
 position: relative;
 min-height: 520px;
 border-radius: var(--radius);
 overflow: hidden;
 color: #fff;
}
.wide-card .cap {
 position: absolute;
 inset: auto 0 0 0;
 padding: 28px;
 background: linear-gradient(180deg, transparent, rgba(0,0,0,.78));
}
.wide-card h2 { max-width: 16ch; }
.stack { display: flex; flex-direction: column; gap: 12px; }
.line-item {
 display: grid;
 grid-template-columns: auto 1fr auto;
 gap: 14px;
 align-items: center;
 background: var(--paper);
 border: 1px solid var(--line);
 border-radius: 18px;
 padding: 16px;
 box-shadow: var(--shadow);
 transition: transform .2s ease, box-shadow .2s ease;
}
.line-item:hover { transform: translateY(-3px); box-shadow: var(--shadow-strong); }
.idx {
 width: 42px;
 height: 42px;
 border-radius: 14px;
 display: grid;
 place-items: center;
 background: var(--deep);
 color: var(--gold-2);
 font-weight: 700;
}
.line-item p { margin: 0; color: var(--muted); font-size: 14px; }
.hud-section {
 color: #f6f1e7;
 background:
  linear-gradient(115deg, rgba(16, 23, 20, .94), rgba(16, 23, 20, .82)),
  url("/assets/images/edbf6a742526d14d.webp") center/cover no-repeat;
}
.hud-head { display: flex; justify-content: space-between; gap: 24px; align-items: end; margin-bottom: 26px; }
.hud-head p { color: rgba(246,241,231,.72); max-width: 46ch; margin: 0; }
.hud-list { display: grid; gap: 10px; }
.hud-row {
 display: grid;
 grid-template-columns: 1.3fr repeat(3, .7fr);
 gap: 12px;
 align-items: center;
 padding: 16px 18px;
 border-radius: 16px;
 background: rgba(255,252,248,.05);
 border: 1px solid rgba(228, 210, 164, .18);
}
.hud-row strong { font-size: 1.05rem; }
.hud-row span { color: rgba(246,241,231,.7); font-size: 13px; }
.hud-row b { display: block; color: var(--gold-2); font-size: 1.05rem; }
.shift-line { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.shift-line::before {
 content: "";
 position: absolute;
 left: 8%;
 right: 8%;
 top: 28px;
 height: 1px;
 background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.shift {
 background: var(--paper);
 border: 1px solid var(--line);
 border-radius: var(--radius);
 padding: 22px;
 box-shadow: var(--shadow);
 position: relative;
}
.shift i {
 width: 18px;
 height: 18px;
 border-radius: 50%;
 display: inline-block;
 background: var(--gold);
 box-shadow: 0 0 0 6px rgba(166,132,61,.15);
 margin-bottom: 18px;
}
.shift p { color: var(--muted); margin-bottom: 0; }
.catalog-grid { grid-template-columns: .9fr 1.1fr; align-items: center; }
.mosaic { display: grid; grid-template-columns: 1.2fr .8fr; grid-template-rows: 220px 220px; gap: 12px; }
.mosaic .tall { grid-row: span 2; border-radius: var(--radius); overflow: hidden; min-height: 452px; }
.mosaic .short { border-radius: var(--radius); overflow: hidden; }
.catalog-copy ul { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 12px; }
.catalog-copy li {
 display: flex;
 gap: 12px;
 align-items: flex-start;
 padding-bottom: 12px;
 border-bottom: 1px solid var(--line);
}
.catalog-copy i { color: var(--gold); margin-top: 4px; }
.rule-grid { grid-template-columns: 1fr 1fr; }
.rule-panel, .note-card {
 background: var(--paper);
 border: 1px solid var(--line);
 border-radius: var(--radius);
 padding: 28px;
 box-shadow: var(--shadow);
}
.rule-panel ol { margin: 0; padding-left: 18px; display: grid; gap: 12px; }
.rule-panel li::marker { color: var(--gold); font-weight: 700; }
.meter { margin-top: 22px; display: grid; gap: 12px; }
.meter div { display: grid; gap: 6px; }
.bar { height: 8px; border-radius: 999px; background: var(--bg-2); overflow: hidden; }
.bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--gold), #d8bf86); }
.note-grid { grid-template-columns: 1.1fr .9fr; }
.note-photo { min-height: 360px; border-radius: var(--radius); overflow: hidden; position: relative; }
.note-photo figcaption {
 position: absolute;
 left: 16px;
 bottom: 16px;
 color: #fff;
 background: rgba(20,19,17,.66);
 border-radius: 14px;
 padding: 10px 12px;
}
.quote { font-size: 1.35rem; line-height: 1.45; letter-spacing: -.02em; }
.note-card cite { display: block; margin-top: 18px; color: var(--muted); font-style: normal; font-size: 14px; }
.close-band {
 padding-bottom: clamp(48px, 7vw, 84px);
}
.close-inner {
 display: flex;
 justify-content: space-between;
 gap: 24px;
 align-items: center;
 padding: 32px;
 border-radius: 28px;
 color: #f6f1e7;
 background:
  linear-gradient(100deg, rgba(20,19,17,.92), rgba(20,19,17,.72)),
  url("/assets/images/5c1f41e199487889.webp") center/cover no-repeat;
 box-shadow: var(--shadow-strong);
}
.close-inner p { color: rgba(246,241,231,.76); max-width: 62ch; margin-bottom: 0; }
.site-footer {
 background: var(--deep);
 color: #f6f1e7;
 padding: 48px 0 22px;
}
.footer-grid { display: grid; grid-template-columns: 1.3fr .8fr 1fr; gap: 28px; }
.site-footer .logo-sub, .site-footer p { color: rgba(246,241,231,.72); }
.footer-label { color: var(--gold-2) !important; letter-spacing: .12em; text-transform: uppercase; font-size: 12px; font-weight: 700; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.site-footer a:hover { color: var(--gold-2); }
.footer-bottom {
 margin-top: 28px;
 padding-top: 16px;
 border-top: 1px solid rgba(246,241,231,.12);
 color: rgba(246,241,231,.6);
 font-size: 14px;
}
@media (max-width: 1024px) {
 .mast-grid, .floor-grid, .catalog-grid, .rule-grid, .note-grid, .footer-grid, .hud-head, .close-inner {
  grid-template-columns: 1fr;
 }
 .hud-row { grid-template-columns: 1fr 1fr; }
 .shift-line { grid-template-columns: 1fr; }
 .shift-line::before { display: none; }
 .mosaic { grid-template-rows: 240px 180px; }
 .frame, .wide-card { min-height: 380px; }
 .header-bar { flex-wrap: wrap; }
 .nav-toggle { display: inline-flex; }
 #site-nav {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  background: rgba(255,252,248,.98);
  border-bottom: 1px solid var(--line);
  padding: 8px 20px 16px;
 }
 #site-nav.is-open { display: block; }
 .nav-list { flex-direction: column; align-items: stretch; }
 .nav-list a { justify-content: space-between; }
 .site-header { position: sticky; }
 .header-tools { margin-left: auto; }
}
@media (max-width: 768px) {
 .stat-row, .mosaic { grid-template-columns: 1fr; }
 .mosaic .tall { grid-row: auto; min-height: 240px; }
 .mega-panel { width: min(92vw, 680px); grid-template-columns: 1fr; }
 .close-inner, .hud-head { align-items: flex-start; flex-direction: column; }
 .container { width: min(var(--container), calc(100% - 28px)); }
}
@media (max-width: 520px) {
 h1 { font-size: 2.15rem; }
 .stat-row, .hud-row { grid-template-columns: 1fr; }
 .line-item { grid-template-columns: auto 1fr; }
 .line-item .tag { grid-column: 2; }
 .mast-actions .btn, .close-inner .btn { width: 100%; }
 .frame { min-height: 320px; }
}

/* roulang page: category3 */
:root {
 --bg: #f3eee6;
 --bg-2: #e7e0d2;
 --paper: #fffcf8;
 --ink: #1b1713;
 --muted: #6d655c;
 --line: rgba(27, 23, 19, .12);
 --gold: #a6843d;
 --gold-2: #e4d2a4;
 --deep: #141311;
 --hud: #101714;
 --hud-2: #1b2823;
 --ember: #8c3d32;
 --ok: #2f6b4f;
 --radius: 22px;
 --radius-sm: 14px;
 --shadow: 0 18px 50px rgba(27, 23, 19, .08);
 --shadow-strong: 0 24px 60px rgba(12, 10, 8, .18);
 --container: 1180px;
 --space: clamp(68px, 8vw, 108px);
 --font: "Be Vietnam Pro", sans-serif;
}
/* roulang page: category3 */
:root {
 --bg: #f3eee6;
 --bg-2: #e7e0d2;
 --paper: #fffcf8;
 --ink: #1b1713;
 --muted: #6d655c;
 --line: rgba(27, 23, 19, .12);
 --gold: #a6843d;
 --gold-2: #e4d2a4;
 --deep: #141311;
 --hud: #101714;
 --hud-2: #1b2823;
 --ember: #8c3d32;
 --ok: #2f6b4f;
 --radius: 22px;
 --radius-sm: 14px;
 --shadow: 0 18px 50px rgba(27, 23, 19, .08);
 --shadow-strong: 0 24px 60px rgba(12, 10, 8, .18);
 --container: 1180px;
 --space: clamp(68px, 8vw, 108px);
 --font: "Be Vietnam Pro", sans-serif;
}
html { scroll-behavior: smooth; }
body {
 margin: 0;
 font-family: var(--font);
 color: var(--ink);
 background:
  radial-gradient(900px 420px at 100% -10%, rgba(166,132,61,.08), transparent 60%),
  var(--bg);
 line-height: 1.7;
 font-size: 16px;
}
img { max-width: 100%; display: block; }
button, input, select, textarea { font-family: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p { margin: 0; }
.container { width: min(var(--container), calc(100% - 40px)); margin-inline: auto; }
.site-header {
 position: sticky;
 top: 0;
 z-index: 50;
 background: rgba(243, 238, 230, .9);
 backdrop-filter: blur(16px);
 border-bottom: 1px solid var(--line);
}
.header-bar {
 min-height: 78px;
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 16px;
}
.logo { display: flex; flex-direction: column; line-height: 1.05; min-width: 0; }
.logo-mark { font-weight: 700; font-size: 1.28rem; letter-spacing: -.04em; }
.logo-sub { margin-top: 3px; font-size: 11px; color: var(--muted); letter-spacing: .02em; }
.nav-toggle {
 display: none;
 border: 1px solid var(--line);
 background: var(--paper);
 border-radius: 999px;
 padding: 10px 14px;
 gap: 8px;
 align-items: center;
 font-weight: 600;
}
.nav-list { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; }
.nav-list a, .mega-btn {
 display: inline-flex;
 align-items: center;
 border: 0;
 background: transparent;
 border-radius: 999px;
 padding: 8px 10px;
 font-size: 13.5px;
 font-weight: 500;
 transition: background .2s ease, color .2s ease, transform .2s ease;
}
.nav-list a:hover, .mega-btn:hover { color: #7d6124; background: rgba(255,255,255,.7); }
.nav-list a.active { background: var(--deep); color: #f6f1e7; }
.nav-list a.active:hover { color: #f6f1e7; }
.header-tools { display: flex; align-items: center; }
.mega-wrap { position: relative; }
.mega-btn { border: 1px solid var(--line); background: var(--paper); box-shadow: 0 8px 20px rgba(27,23,19,.04); }
.mega-btn i { margin-left: 6px; font-size: 11px; }
.mega-panel {
 display: none;
 position: absolute;
 right: 0;
 top: calc(100% + 12px);
 width: min(680px, 74vw);
 padding: 14px;
 background: rgba(255,252,248,.98);
 border: 1px solid var(--line);
 border-radius: 20px;
 box-shadow: var(--shadow-strong);
 grid-template-columns: repeat(3, 1fr);
 gap: 10px;
}
.mega-wrap:hover .mega-panel, .mega-wrap:focus-within .mega-panel, .mega-wrap.is-open .mega-panel { display: grid; }
.mega-card {
 display: flex;
 flex-direction: column;
 min-height: 168px;
 border-radius: 16px;
 overflow: hidden;
 background: var(--deep);
 color: #f6f1e7;
 position: relative;
}
.mega-card img { width: 100%; height: 92px; object-fit: cover; }
.mega-card span { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 4px; }
.mega-card strong { font-size: 14px; }
.mega-card em { font-style: normal; color: rgba(246,241,231,.72); font-size: 12px; line-height: 1.45; }
.mega-card:hover { transform: translateY(-3px); transition: transform .2s ease; }
.section-head { max-width: 760px; margin-bottom: 28px; }
.section-head .lede, .lede { color: var(--muted); margin-top: 12px; }
.eyebrow {
 display: inline-flex;
 align-items: center;
 gap: 8px;
 color: var(--gold);
 letter-spacing: .14em;
 text-transform: uppercase;
 font-size: 12px;
 font-weight: 600;
 margin-bottom: 14px;
}
.eyebrow::before {
 content: "";
 width: 18px;
 height: 1px;
 background: currentColor;
}
.hero {
 position: relative;
 color: #f7f1e6;
 background:
  linear-gradient(105deg, rgba(10,9,8,.92) 8%, rgba(10,9,8,.78) 46%, rgba(10,9,8,.38) 100%),
  url("/assets/images/9f0d54a3a2bdd14b.webp") center/cover no-repeat;
 overflow: hidden;
}
.hero-grid {
 display: grid;
 grid-template-columns: minmax(0, 1.15fr) minmax(300px, .85fr);
 gap: 42px;
 align-items: center;
 padding: clamp(48px, 7vw, 92px) 0;
}
.hero h1 { font-size: clamp(2.3rem, 5vw, 4.5rem); max-width: 14ch; }
.hero .lede { color: rgba(247,241,230,.8); font-size: 1.02rem; max-width: 62ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.btn {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 gap: 8px;
 min-height: 48px;
 padding: 0 18px;
 border-radius: 999px;
 border: 1px solid transparent;
 font-weight: 600;
 transition: transform .2s ease, background .2s ease, box-shadow .2s ease, color .2s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.98); }
.btn-gold { background: linear-gradient(180deg, #f0dfb4, #c6a25b); color: #231c10; box-shadow: 0 10px 24px rgba(166,132,61,.28); }
.btn-gold:hover { box-shadow: 0 16px 30px rgba(166,132,61,.36); }
.btn-ghost { background: transparent; color: #f7f1e6; border-color: rgba(247,241,230,.35); }
.btn-ghost:hover { background: rgba(255,255,255,.08); }
.btn-dark { background: var(--deep); color: #f6f1e7; }
.btn-line { background: transparent; border-color: var(--line); color: var(--ink); }
.btn-line:hover { background: #fff; }
.hero-note { margin-top: 18px; color: rgba(247,241,230,.7); font-size: 14px; }
.countdown-row, .split, .tier-layout, .voice-grid, .news-grid, .register-grid, .safety-grid, .device-layout {
 display: grid;
 gap: 28px;
}
.countdown-row { grid-template-columns: 1.1fr .9fr; align-items: center; }
.bento-main { grid-row: span 2; position: relative; min-height: 460px; border-radius: var(--radius); overflow: hidden; color: #fff; }
.bento-main img, .side-card img, .news-feature img, .voice-photo img, .frame img { width: 100%; height: 100%; object-fit: cover; }
.bento-main .cap, .side-card .cap {
 position: absolute;
 left: 0; right: 0; bottom: 0;
 padding: 22px;
 background: linear-gradient(180deg, transparent, rgba(0,0,0,.78));
}
.side-card { position: relative; min-height: 223px; border-radius: var(--radius); overflow: hidden; color: white; background: var(--deep); }
.badge, .tag {
 display: inline-flex;
 align-items: center;
 gap: 6px;
 border-radius: 999px;
 padding: 4px 10px;
 font-size: 12px;
 font-weight: 600;
 letter-spacing: .04em;
 background: rgba(166, 132, 61, .14);
 color: #6d5420;
}
.badge-light { background: rgba(255,252,248,.16); color: #f6f1e7; }
.badge-ok { background: rgba(47,107,79,.14); color: var(--ok); }
.badge-ember { background: rgba(140,61,50,.12); color: var(--ember); }
h1, h2 { letter-spacing: -.035em; line-height: 1.12; }
h2 { font-size: clamp(1.7rem, 3vw, 2.55rem); }
h3 { font-size: 1.12rem; line-height: 1.35; }
a:focus-visible, button:focus-visible, input:focus-visible, label:focus-within {
 outline: 2px solid var(--gold);
 outline-offset: 3px;
}
.block { padding: var(--space) 0; }
.band-paper { background: rgba(255,252,248,.72); border-block: 1px solid var(--line); }
.band-sand { background: linear-gradient(180deg, transparent, rgba(231,224,210,.55) 18%, transparent); }
.sport-hero {
 position: relative;
 color: #f7f1e6;
 background:
  linear-gradient(180deg, rgba(12,11,10,.9) 0%, rgba(12,11,10,.74) 42%, rgba(12,11,10,.9) 100%),
  url("/assets/images/5c1f41e199487889.webp") center/cover no-repeat;
 overflow: hidden;
}
.sport-hero .eyebrow { color: var(--gold-2); }
.sport-hero-inner { padding: clamp(52px, 7vw, 96px) 0 42px; }
.sport-hero h1 {
 font-size: clamp(2.4rem, 5.4vw, 4.7rem);
 max-width: 16ch;
}
.sport-hero .lede { color: rgba(247,241,230,.8); max-width: 68ch; font-size: 1.05rem; }
.slot-status {
 margin-top: 22px;
 color: var(--gold-2);
 font-weight: 600;
 font-size: 14px;
 letter-spacing: .02em;
}
.slot-rail {
 display: flex;
 gap: 12px;
 margin-top: 18px;
 overflow-x: auto;
 padding-bottom: 6px;
 scroll-snap-type: x mandatory;
}
.slot {
 position: relative;
 min-width: 168px;
 scroll-snap-align: start;
 border-radius: 18px;
 border: 1px solid rgba(247,241,230,.16);
 background: rgba(255,252,248,.06);
 padding: 14px 14px 12px;
 display: flex;
 flex-direction: column;
 gap: 4px;
 transition: border-color .2s ease, background .2s ease, transform .2s ease;
}
.slot input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.slot-time { font-size: 1.25rem; font-weight: 700; letter-spacing: -.03em; }
.slot-name { color: rgba(247,241,230,.68); font-size: 13px; }
.slot:hover { transform: translateY(-2px); border-color: rgba(228,210,164,.45); }
.slot:has(input:checked) {
 background: #f7f1e6;
 color: var(--ink);
 border-color: transparent;
 box-shadow: var(--shadow);
}
.slot:has(input:checked) .slot-name { color: var(--muted); }
.fact-strip {
 list-style: none;
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: 12px;
 margin: 28px 0 0;
 padding: 0;
}
.fact-strip li {
 display: flex;
 gap: 12px;
 align-items: flex-start;
 padding-top: 16px;
 border-top: 1px solid rgba(247,241,230,.16);
 font-size: 14px;
 color: rgba(247,241,230,.84);
}
.fact-strip i { color: var(--gold-2); margin-top: 3px; }
.pitch {
 display: grid;
 grid-template-columns: minmax(0, 1.05fr) minmax(320px, .95fr);
 gap: 22px;
 align-items: stretch;
}
.feature-shot {
 position: relative;
 min-height: 460px;
 border-radius: var(--radius);
 overflow: hidden;
 background: var(--deep);
 box-shadow: var(--shadow);
}
.feature-shot img { width: 100%; height: 100%; object-fit: cover; }
.feature-shot .cap {
 position: absolute;
 left: 0; right: 0; bottom: 0;
 padding: 22px;
 color: #f7f1e6;
 background: linear-gradient(180deg, transparent, rgba(0,0,0,.8));
}
.feature-shot .cap strong { display: block; font-size: 1.35rem; letter-spacing: -.03em; }
.feature-shot .cap span { display: block; margin-top: 6px; color: rgba(247,241,230,.78); }
.match-list {
 display: flex;
 flex-direction: column;
 gap: 10px;
}
.match-row {
 display: grid;
 grid-template-columns: 72px minmax(0, 1fr) auto;
 gap: 12px;
 align-items: center;
 padding: 14px;
 background: var(--paper);
 border: 1px solid var(--line);
 border-radius: var(--radius-sm);
 box-shadow: 0 10px 24px rgba(27,23,19,.03);
 transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.match-row:hover {
 transform: translateY(-2px);
 border-color: rgba(166,132,61,.35);
 box-shadow: var(--shadow);
}
.match-time { font-weight: 700; letter-spacing: -.03em; }
.match-meta small { display: block; color: var(--muted); font-size: 12px; }
.odds {
 display: flex;
 gap: 6px;
 flex-wrap: wrap;
 justify-content: flex-end;
}
.odds b {
 font-weight: 600;
 font-size: 12px;
 background: var(--bg-2);
 border-radius: 999px;
 padding: 5px 8px;
 font-variant-numeric: tabular-nums;
}
.hud-wrap {
 display: grid;
 grid-template-columns: .9fr 1.1fr;
 gap: 28px;
 align-items: center;
}
.hud-copy .lede { max-width: 46ch; }
.hud-board {
 display: grid;
 grid-template-columns: 1fr 1fr;
 background: linear-gradient(180deg, var(--hud-2), var(--hud));
 color: #f6f1e7;
 border-radius: 28px;
 overflow: hidden;
 box-shadow: var(--shadow-strong);
 border: 1px solid rgba(228,210,164,.16);
}
.hud-col { padding: 22px 20px 18px; }
.hud-col + .hud-col { border-left: 1px solid rgba(246,241,231,.1); }
.hud-col header {
 display: flex;
 justify-content: space-between;
 align-items: center;
 margin-bottom: 14px;
 font-size: 13px;
 letter-spacing: .08em;
 text-transform: uppercase;
 color: var(--gold-2);
}
.hud-line {
 display: flex;
 justify-content: space-between;
 gap: 12px;
 padding: 11px 0;
 border-top: 1px solid rgba(246,241,231,.08);
 font-variant-numeric: tabular-nums;
}
.hud-line span { color: rgba(246,241,231,.68); }
.hud-line strong { font-weight: 600; }
.mosaic {
 display: grid;
 grid-template-columns: 1.35fr 1fr 1fr;
 grid-template-rows: 220px 220px;
 gap: 14px;
}
.tile {
 position: relative;
 border-radius: var(--radius);
 overflow: hidden;
 background: var(--deep);
 color: #f7f1e6;
 min-height: 180px;
}
.tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.tile:hover img { transform: scale(1.05); }
.tile-lg { grid-row: 1 / span 2; }
.tile figcaption {
 position: absolute;
 inset: auto 0 0 0;
 padding: 18px;
 background: linear-gradient(180deg, transparent, rgba(0,0,0,.78));
}
.tile h3 { font-size: 1.35rem; }
.tile p { color: rgba(247,241,230,.78); font-size: 14px; margin-top: 4px; }
.path {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 gap: 0;
 position: relative;
}
.path::before {
 content: "";
 position: absolute;
 left: 6%;
 right: 6%;
 top: 22px;
 height: 1px;
 background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.path article {
 position: relative;
 padding: 0 16px;
}
.path .dot {
 width: 14px;
 height: 14px;
 border-radius: 50%;
 background: var(--paper);
 border: 2px solid var(--gold);
 margin-bottom: 18px;
 box-shadow: 0 0 0 6px rgba(166,132,61,.12);
}
.path h3 { margin-bottom: 8px; }
.path p { color: var(--muted); font-size: 14.5px; }
.stat-row {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 gap: 14px;
}
.stat {
 background: var(--paper);
 border: 1px solid var(--line);
 border-radius: var(--radius);
 padding: 22px 20px;
 box-shadow: var(--shadow);
}
.stat strong {
 display: block;
 font-size: clamp(1.8rem, 3vw, 2.6rem);
 letter-spacing: -.04em;
 line-height: 1;
}
.stat span { display: block; margin-top: 8px; color: var(--muted); }
.ledger {
 display: grid;
 grid-template-columns: minmax(0, .95fr) minmax(280px, 1.05fr);
 gap: 28px;
 align-items: center;
}
.check-list { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 10px; }
.check-list li {
 display: grid;
 grid-template-columns: 28px 1fr;
 gap: 10px;
 align-items: start;
 padding: 12px 12px;
 background: rgba(255,252,248,.7);
 border: 1px solid var(--line);
 border-radius: 16px;
}
.check-list i { color: var(--ok); margin-top: 3px; }
.ledger-photo {
 border-radius: 28px;
 overflow: hidden;
 min-height: 380px;
 position: relative;
 box-shadow: var(--shadow-strong);
}
.ledger-photo img { width: 100%; height: 100%; object-fit: cover; min-height: 380px; }
.ledger-photo .float-card {
 position: absolute;
 left: 16px;
 right: 16px;
 bottom: 16px;
 background: rgba(255,252,248,.94);
 border-radius: 18px;
 padding: 14px 16px;
 display: flex;
 justify-content: space-between;
 gap: 12px;
 backdrop-filter: blur(8px);
}
.ledger-photo small { color: var(--muted); display: block; }
.close-band {
 background:
  linear-gradient(105deg, rgba(16,23,20,.94), rgba(16,23,20,.72)),
  url("/assets/images/b0c096bcd579bb1a.webp") center/cover no-repeat;
 color: #f7f1e6;
}
.close-band .eyebrow { color: var(--gold-2); }
.close-inner {
 display: flex;
 justify-content: space-between;
 align-items: end;
 gap: 24px;
}
.close-band h2 { max-width: 14ch; }
.close-band .lede { color: rgba(247,241,230,.76); max-width: 46ch; }
.site-footer {
 background: var(--deep);
 color: #f3ecdf;
 padding: 48px 0 22px;
}
.site-footer .logo-sub { color: rgba(243,236,223,.62); }
.footer-grid {
 display: grid;
 grid-template-columns: 1.3fr .8fr 1fr;
 gap: 28px;
}
.footer-label {
 color: var(--gold-2);
 letter-spacing: .12em;
 text-transform: uppercase;
 font-size: 12px;
 font-weight: 600;
 margin-bottom: 12px;
}
.site-footer p { color: rgba(243,236,223,.74); }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.site-footer a { color: #f3ecdf; }
.site-footer a:hover { color: var(--gold-2); }
.footer-bottom {
 margin-top: 28px;
 padding-top: 16px;
 border-top: 1px solid rgba(243,236,223,.12);
 color: rgba(243,236,223,.55);
 font-size: 13px;
}
@media (max-width: 1100px) {
 .nav-toggle { display: inline-flex; }
 .header-bar { flex-wrap: wrap; padding: 12px 0; }
 .logo { order: 1; }
 .nav-toggle { order: 2; margin-left: auto; }
 .header-tools { order: 3; }
 #site-nav { display: none; order: 4; flex: 1 0 100%; padding-bottom: 8px; }
 #site-nav.is-open { display: block; }
 .nav-list { flex-direction: column; align-items: stretch; gap: 4px; }
 .nav-list a { padding: 10px 12px; }
 .mega-panel {
  position: fixed;
  left: 16px;
  right: 16px;
  top: 74px;
  width: auto;
  grid-template-columns: 1fr;
  max-height: min(70vh, 520px);
  overflow: auto;
 }
 .pitch, .hud-wrap, .ledger, .close-inner { grid-template-columns: 1fr; }
 .mosaic { grid-template-columns: 1fr 1fr; grid-template-rows: none; }
 .tile-lg { grid-row: auto; grid-column: 1 / -1; min-height: 280px; }
 .path { grid-template-columns: 1fr 1fr; gap: 22px; }
 .path::before { display: none; }
 .stat-row, .fact-strip { grid-template-columns: 1fr 1fr; }
 .hud-board { grid-template-columns: 1fr; }
 .hud-col + .hud-col { border-left: 0; border-top: 1px solid rgba(246,241,231,.1); }
}
@media (max-width: 768px) {
 .hero-grid, .countdown-row { grid-template-columns: 1fr; }
 .match-row { grid-template-columns: 64px 1fr; }
 .odds { grid-column: 1 / -1; justify-content: flex-start; }
 .footer-grid { grid-template-columns: 1fr; }
 .feature-shot, .ledger-photo, .ledger-photo img { min-height: 280px; }
 .close-inner { align-items: flex-start; }
}
@media (max-width: 520px) {
 .container { width: min(var(--container), calc(100% - 28px)); }
 .stat-row, .fact-strip, .path, .mosaic { grid-template-columns: 1fr; }
 .tile-lg { grid-column: auto; }
 .sport-hero h1 { max-width: none; }
 .hero-actions .btn, .close-band .btn { width: 100%; }
 .logo-mark { font-size: 1.12rem; }
 .float-card { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
 html { scroll-behavior: auto; }
 .btn, .match-row, .tile img, .slot, .mega-card { transition: none; }
}

/* roulang page: category5 */
:root {
 --bg: #f3eee6;
 --bg-2: #e7e0d2;
 --paper: #fffcf8;
 --ink: #1b1713;
 --muted: #6d655c;
 --line: rgba(27, 23, 19, .12);
 --gold: #a6843d;
 --gold-2: #e4d2a4;
 --deep: #141311;
 --hud: #101714;
 --hud-2: #1b2823;
 --ember: #8c3d32;
 --ok: #2f6b4f;
 --radius: 22px;
 --radius-sm: 14px;
 --shadow: 0 18px 50px rgba(27, 23, 19, .08);
 --shadow-strong: 0 24px 60px rgba(12, 10, 8, .18);
 --container: 1180px;
 --space: clamp(68px, 8vw, 108px);
 --font: "Be Vietnam Pro", sans-serif;
}
/* roulang page: category5 */
html { scroll-behavior: smooth; }
*, *::before, *::after { box-sizing: border-box; }
body {
 margin: 0;
 font-family: var(--font);
 color: var(--ink);
 background:
  radial-gradient(1200px 420px at 90% -10%, rgba(166,132,61,.16), transparent 60%),
  var(--bg);
 line-height: 1.7;
 font-size: 16px;
}
img { max-width: 100%; display: block; }
button, input, select, textarea { font-family: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
p { margin: 0; }
h1, h2, h3 { line-height: 1.15; letter-spacing: -.03em; margin: 0; }
ul, ol { margin: 0; padding: 0; }
.container { width: min(var(--container), calc(100% - 40px)); margin-inline: auto; }
.site-header {
 position: sticky;
 top: 0;
 z-index: 50;
 background: rgba(243, 238, 230, .9);
 backdrop-filter: blur(16px);
 border-bottom: 1px solid var(--line);
}
.header-bar {
 min-height: 78px;
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 16px;
}
.logo { display: flex; flex-direction: column; line-height: 1.05; min-width: 0; }
.logo-mark { font-weight: 700; font-size: 1.28rem; letter-spacing: -.04em; }
.logo-sub { margin-top: 3px; font-size: 11px; color: var(--muted); letter-spacing: .02em; }
.nav-toggle {
 display: none;
 border: 1px solid var(--line);
 background: var(--paper);
 border-radius: 999px;
 padding: 10px 14px;
 gap: 8px;
 align-items: center;
 font-weight: 600;
}
.nav-list { display: flex; align-items: center; gap: 2px; list-style: none; }
.nav-list a, .mega-btn {
 display: inline-flex;
 align-items: center;
 border: 0;
 background: transparent;
 border-radius: 999px;
 padding: 8px 10px;
 font-size: 13.5px;
 font-weight: 500;
 transition: background .2s ease, color .2s ease, transform .2s ease;
}
.nav-list a:hover, .mega-btn:hover { color: #7d6124; background: rgba(255,255,255,.7); }
.nav-list a:active, .mega-btn:active { transform: scale(.98); }
.nav-list a.active {
 background: var(--deep);
 color: #f6f1e7;
}
.nav-list a.active:hover { color: #f6f1e7; }
.header-tools { display: flex; align-items: center; }
.mega-wrap { position: relative; }
.mega-btn { border: 1px solid var(--line); background: var(--paper); box-shadow: 0 8px 20px rgba(27,23,19,.04); }
.mega-btn i { margin-left: 6px; font-size: 11px; }
.mega-panel {
 display: none;
 position: absolute;
 right: 0;
 top: calc(100% + 12px);
 width: min(680px, 74vw);
 padding: 14px;
 background: rgba(255,252,248,.98);
 border: 1px solid var(--line);
 border-radius: 20px;
 box-shadow: var(--shadow-strong);
 grid-template-columns: repeat(3, 1fr);
 gap: 10px;
}
.mega-wrap:hover .mega-panel, .mega-wrap:focus-within .mega-panel, .mega-wrap.is-open .mega-panel { display: grid; }
.mega-card {
 display: flex;
 flex-direction: column;
 min-height: 168px;
 border-radius: 16px;
 overflow: hidden;
 background: var(--deep);
 color: #f6f1e7;
 position: relative;
}
.mega-card img { width: 100%; height: 92px; object-fit: cover; }
.mega-card span { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 4px; }
.mega-card strong { font-size: 14px; }
.mega-card em { font-style: normal; color: rgba(246,241,231,.72); font-size: 12px; line-height: 1.45; }
.mega-card:hover { transform: translateY(-3px); transition: transform .2s ease; }
.section-head { max-width: 760px; margin-bottom: 28px; }
.section-head .lede, .lede { color: var(--muted); margin-top: 12px; }
.eyebrow {
 display: inline-flex;
 align-items: center;
 gap: 8px;
 color: var(--gold);
 letter-spacing: .14em;
 text-transform: uppercase;
 font-size: 12px;
 font-weight: 600;
 margin-bottom: 14px;
}
.hero .eyebrow, .band-deep .eyebrow, .cat-hero .eyebrow { color: var(--gold-2); }
.hero {
 position: relative;
 color: #f7f1e6;
 background:
  linear-gradient(105deg, rgba(10,9,8,.92) 8%, rgba(10,9,8,.78) 46%, rgba(10,9,8,.38) 100%),
  url("/assets/images/9f0d54a3a2bdd14b.webp") center/cover no-repeat;
 overflow: hidden;
}
.hero-grid {
 display: grid;
 grid-template-columns: minmax(0, 1.15fr) minmax(300px, .85fr);
 gap: 42px;
 align-items: center;
 padding: clamp(48px, 7vw, 92px) 0;
}
.hero h1 { font-size: clamp(2.3rem, 5vw, 4.5rem); max-width: 14ch; }
.hero .lede { color: rgba(247,241,230,.8); font-size: 1.02rem; max-width: 62ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.btn {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 gap: 8px;
 min-height: 48px;
 padding: 0 18px;
 border-radius: 999px;
 border: 1px solid transparent;
 font-weight: 600;
 transition: transform .2s ease, background .2s ease, box-shadow .2s ease, color .2s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.98); }
.btn-gold { background: linear-gradient(180deg, #f0dfb4, #c6a25b); color: #231c10; box-shadow: 0 10px 24px rgba(166,132,61,.28); }
.btn-gold:hover { box-shadow: 0 16px 30px rgba(166,132,61,.36); }
.btn-ghost { background: transparent; color: #f7f1e6; border-color: rgba(247,241,230,.35); }
.btn-ghost:hover { background: rgba(255,255,255,.08); }
.btn-dark { background: var(--deep); color: #f6f1e7; }
.btn-line { background: transparent; border-color: var(--line); color: var(--ink); }
.btn-line:hover { background: #fff; }
.hero-note { margin-top: 18px; color: rgba(247,241,230,.7); font-size: 14px; }
.countdown-row, .split, .tier-layout, .voice-grid, .news-grid, .register-grid, .safety-grid, .device-layout {
 display: grid;
 gap: 28px;
}
.countdown-row { grid-template-columns: 1.1fr .9fr; align-items: center; }
.bento-main { grid-row: span 2; position: relative; min-height: 460px; border-radius: var(--radius); overflow: hidden; color: #fff; }
.bento-main img, .side-card img, .news-feature img, .voice-photo img, .frame img { width: 100%; height: 100%; object-fit: cover; }
.bento-main .cap, .side-card .cap {
 position: absolute;
 left: 0; right: 0; bottom: 0;
 padding: 22px;
 background: linear-gradient(180deg, transparent, rgba(0,0,0,.78));
}
.side-card { position: relative; min-height: 223px; border-radius: var(--radius); overflow: hidden; color: white; background: var(--deep); }
.badge, .tag {
 display: inline-flex;
 align-items: center;
 gap: 6px;
 border-radius: 999px;
 padding: 4px 10px;
 font-size: 12px;
 font-weight: 600;
 letter-spacing: .04em;
 background: rgba(166,132,61,.14);
 color: #7d6124;
 border: 1px solid rgba(166,132,61,.28);
}
.badge-ok { background: rgba(47,107,79,.12); color: var(--ok); border-color: rgba(47,107,79,.25); }
.badge-light { background: rgba(255,252,248,.12); color: #f6f1e7; border-color: rgba(246,241,231,.24); }
a:focus-visible, button:focus-visible, summary:focus-visible {
 outline: 2px solid var(--gold);
 outline-offset: 3px;
}
.band { padding: var(--space) 0; }
.band-paper { background: rgba(255,252,248,.62); border-block: 1px solid var(--line); }
.band-deep { background: linear-gradient(180deg, var(--hud), var(--hud-2)); color: #f4efe6; }
.band-deep .lede { color: rgba(244,239,230,.72); }
.cat-hero {
 position: relative;
 color: #f7f1e6;
 min-height: 680px;
 display: flex;
 align-items: flex-end;
 background:
  linear-gradient(100deg, rgba(10,9,8,.9) 0%, rgba(10,9,8,.66) 46%, rgba(10,9,8,.28) 100%),
  url("/assets/images/6d0b7497ca409469.jpg") center/cover no-repeat;
 overflow: hidden;
}
.cat-hero::after {
 content: "";
 position: absolute;
 inset: auto 0 0 0;
 height: 120px;
 background: linear-gradient(180deg, transparent, rgba(20,19,17,.45));
 pointer-events: none;
}
.cat-hero-inner { position: relative; z-index: 1; width: 100%; padding: 86px 0 28px; }
.crumb { display: flex; gap: 8px; align-items: center; color: rgba(247,241,230,.7); font-size: 13px; margin-bottom: 18px; }
.crumb i { font-size: 9px; }
.cat-hero h1 { font-size: clamp(2.4rem, 5.4vw, 4.6rem); max-width: 16ch; }
.cat-hero .lede { color: rgba(247,241,230,.8); max-width: 62ch; font-size: 1.05rem; }
.series-rail {
 display: flex;
 gap: 10px;
 overflow-x: auto;
 margin-top: 28px;
 padding: 12px;
 background: rgba(16,15,13,.58);
 border: 1px solid rgba(228,210,164,.28);
 border-radius: 18px;
 backdrop-filter: blur(12px);
 scrollbar-width: thin;
}
.series-rail a {
 flex: 0 0 auto;
 display: inline-flex;
 align-items: center;
 gap: 8px;
 color: #f6f1e7;
 border: 1px solid rgba(246,241,231,.18);
 border-radius: 999px;
 padding: 10px 14px;
 font-size: 13.5px;
 font-weight: 600;
 background: rgba(255,255,255,.04);
 transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.series-rail a i { color: var(--gold-2); }
.series-rail a:hover, .series-rail a:focus-visible {
 background: rgba(228,210,164,.16);
 border-color: rgba(228,210,164,.5);
 color: #fff;
}
.ledger-split, .night-split, .verify-grid {
 display: grid;
 grid-template-columns: minmax(0, 1.05fr) minmax(280px, .95fr);
 gap: 42px;
 align-items: center;
}
.frame {
 position: relative;
 min-height: 380px;
 border-radius: var(--radius);
 overflow: hidden;
 box-shadow: var(--shadow-strong);
 background: var(--deep);
}
.frame img { width: 100%; height: 100%; min-height: 380px; object-fit: cover; }
.frame figcaption {
 position: absolute;
 left: 16px; right: 16px; bottom: 16px;
 padding: 14px 16px;
 border-radius: 16px;
 background: rgba(16,15,13,.72);
 color: #f6f1e7;
 backdrop-filter: blur(8px);
}
.frame figcaption strong { display: block; margin-bottom: 4px; }
.frame figcaption span { color: rgba(246,241,231,.74); font-size: 14px; }
.kicker-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 8px; }
.channel-list { display: flex; flex-direction: column; gap: 14px; }
.channel {
 display: grid;
 grid-template-columns: 92px minmax(0, 1fr) auto;
 gap: 18px;
 align-items: center;
 padding: 16px;
 background: var(--paper);
 border: 1px solid var(--line);
 border-radius: var(--radius);
 box-shadow: var(--shadow);
 transition: transform .2s ease, box-shadow .2s ease;
}
.channel:hover { transform: translateY(-3px); box-shadow: var(--shadow-strong); }
.channel img { width: 92px; height: 72px; object-fit: cover; border-radius: 12px; }
.channel h3 { font-size: 1.15rem; margin-bottom: 4px; }
.channel p { color: var(--muted); font-size: 14.5px; }
.channel .meta { text-align: right; min-width: 120px; }
.channel .meta b { display: block; font-size: 1.05rem; letter-spacing: -.03em; }
.channel .meta span { color: var(--muted); font-size: 12px; }
.hud-board {
 display: grid;
 grid-template-columns: 280px 1fr;
 gap: 28px;
 align-items: stretch;
}
.hud-side {
 border-right: 1px solid rgba(228,210,164,.2);
 padding-right: 18px;
}
.meter {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: 12px;
}
.meter article {
 background: rgba(255,252,248,.04);
 border: 1px solid rgba(228,210,164,.2);
 border-radius: 18px;
 padding: 18px 16px 16px;
 min-height: 210px;
 display: flex;
 flex-direction: column;
 gap: 8px;
 transition: border-color .2s ease, transform .2s ease;
}
.meter article:hover { transform: translateY(-3px); border-color: rgba(228,210,164,.55); }
.meter .idx { font-size: 12px; letter-spacing: .14em; color: var(--gold-2); }
.meter h3 { font-size: 1.25rem; }
.meter p { color: rgba(244,239,230,.72); font-size: 14.5px; }
.meter ul { list-style: none; margin-top: auto; }
.meter li {
 display: flex;
 justify-content: space-between;
 gap: 10px;
 padding-top: 8px;
 border-top: 1px solid rgba(246,241,231,.1);
 font-size: 13px;
 color: rgba(246,241,231,.86);
}
.path {
 list-style: none;
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 gap: 0;
 position: relative;
}
.path li {
 position: relative;
 padding: 0 22px 0 0;
}
.path li::before {
 content: "";
 position: absolute;
 top: 22px;
 left: 46px;
 right: 8px;
 height: 1px;
 background: linear-gradient(90deg, var(--gold), transparent);
}
.path li:last-child::before { display: none; }
.path span {
 width: 46px; height: 46px;
 display: grid; place-items: center;
 border-radius: 50%;
 background: var(--deep);
 color: var(--gold-2);
 font-weight: 700;
 margin-bottom: 14px;
 box-shadow: 0 10px 24px rgba(20,19,17,.12);
}
.path h3 { font-size: 1.12rem; margin-bottom: 8px; }
.path p { color: var(--muted); font-size: 14.5px; }
.limit-layout {
 display: grid;
 grid-template-columns: .9fr 1.1fr;
 gap: 36px;
 align-items: end;
}
.stat-stack { display: grid; grid-template-columns: 1.2fr .8fr; gap: 12px; }
.stat {
 background: var(--paper);
 border: 1px solid var(--line);
 border-radius: var(--radius);
 padding: 22px;
 box-shadow: var(--shadow);
}
.stat.wide { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 18px; align-items: flex-end; }
.stat b { display: block; font-size: clamp(2rem, 4vw, 3.4rem); letter-spacing: -.05em; line-height: 1; }
.stat em { font-style: normal; color: var(--muted); }
.stat small { color: var(--gold); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.night-copy h2 { font-size: clamp(2rem, 4vw, 3.2rem); max-width: 14ch; }
.check-list { list-style: none; display: grid; gap: 12px; margin-top: 18px; }
.check-list li {
 display: grid;
 grid-template-columns: 28px 1fr;
 gap: 10px;
 align-items: start;
}
.check-list i { color: var(--ok); margin-top: 4px; }
.verify-grid { align-items: stretch; }
.verify-card {
 background: var(--paper);
 border-radius: var(--radius);
 border: 1px solid var(--line);
 padding: 28px;
 box-shadow: var(--shadow);
}
.verify-card + .frame { min-height: 100%; }
.faq-list { display: grid; gap: 10px; }
.faq-list details {
 background: var(--paper);
 border: 1px solid var(--line);
 border-radius: 18px;
 padding: 0 18px;
 box-shadow: var(--shadow);
}
.faq-list summary {
 cursor: pointer;
 font-weight: 650;
 font-weight: 600;
 min-height: 64px;
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 16px;
 list-style: none;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
 content: "\f078";
 font-family: "Font Awesome 6 Free";
 font-weight: 900;
 font-size: 12px;
 color: var(--gold);
 transition: transform .2s ease;
}
.faq-list details[open] summary::after { transform: rotate(180deg); }
.faq-list details p { color: var(--muted); padding: 0 0 18px; max-width: 78ch; }
.site-footer {
 background: var(--deep);
 color: #f6f1e7;
 padding: 56px 0 0;
}
.footer-grid {
 display: grid;
 grid-template-columns: 1.3fr .8fr 1fr;
 gap: 32px;
 padding-bottom: 36px;
}
.site-footer .logo-mark { color: #f6f1e7; }
.site-footer .logo-sub, .site-footer p { color: rgba(246,241,231,.72); }
.footer-label {
 color: var(--gold-2);
 letter-spacing: .12em;
 text-transform: uppercase;
 font-size: 12px;
 font-weight: 600;
 margin-bottom: 12px;
}
.site-footer ul { list-style: none; }
.site-footer li { margin: 8px 0; }
.site-footer a { transition: color .2s ease; }
.site-footer a:hover { color: var(--gold-2); }
.footer-bottom {
 border-top: 1px solid rgba(246,241,231,.12);
 padding: 16px 0 22px;
 color: rgba(246,241,231,.62);
 font-size: 14px;
}
@media (max-width: 1024px) {
 .nav-toggle { display: inline-flex; }
 #site-nav {
  display: none;
  position: absolute;
  left: 0; right: 0; top: 78px;
  background: rgba(243,238,230,.98);
  border-bottom: 1px solid var(--line);
  padding: 10px 20px 16px;
 }
 #site-nav.is-open { display: block; }
 .nav-list { flex-direction: column; align-items: stretch; }
 .nav-list a { padding: 12px; }
 .mega-panel { position: fixed; left: 16px; right: 16px; width: auto; top: 132px; }
 .ledger-split, .night-split, .verify-grid, .hud-board, .limit-layout, .footer-grid { grid-template-columns: 1fr; }
 .hud-side { border-right: 0; padding-right: 0; border-bottom: 1px solid rgba(228,210,164,.2); padding-bottom: 18px; }
 .path { grid-template-columns: 1fr 1fr; gap: 22px; }
 .path li::before { display: none; }
 .meter { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
 .cat-hero { min-height: 0; }
 .cat-hero-inner { padding: 54px 0 22px; }
 .channel { grid-template-columns: 72px 1fr; }
 .channel .meta { grid-column: 2; text-align: left; }
 .stat.wide { flex-direction: column; align-items: flex-start; }
 .stat-stack { grid-template-columns: 1fr; }
 .frame, .frame img { min-height: 240px; }
 .footer-grid { gap: 22px; }
}
@media (max-width: 520px) {
 .container { width: min(var(--container), calc(100% - 28px)); }
 .nav-toggle span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
 .path { grid-template-columns: 1fr; }
 .cat-hero h1 { font-size: 2.15rem; }
 .hero-actions .btn, .btn { width: 100%; }
 .series-rail a { padding: 9px 12px; }
 .logo-mark { font-size: 1.12rem; }
}

/* roulang page: category6 */
:root {
 --bg: #f3eee6;
 --bg-2: #e7e0d2;
 --paper: #fffcf8;
 --ink: #1b1713;
 --muted: #6d655c;
 --line: rgba(27, 23, 19, .12);
 --gold: #a6843d;
 --gold-2: #e4d2a4;
 --deep: #141311;
 --hud: #101714;
 --hud-2: #1b2823;
 --ember: #8c3d32;
 --ok: #2f6b4f;
 --radius: 22px;
 --radius-sm: 14px;
 --shadow: 0 18px 50px rgba(27, 23, 19, .08);
 --shadow-strong: 0 24px 60px rgba(12, 10, 8, .18);
 --container: 1180px;
 --space: clamp(68px, 8vw, 108px);
 --font: "Be Vietnam Pro", sans-serif;
}
/* roulang page: category6 */
:root {
 --bg: #f3eee6;
 --bg-2: #e7e0d2;
 --paper: #fffcf8;
 --ink: #1b1713;
 --muted: #6d655c;
 --line: rgba(27, 23, 19, .12);
 --gold: #a6843d;
 --gold-2: #e4d2a4;
 --deep: #141311;
 --hud: #101714;
 --hud-2: #1b2823;
 --ember: #8c3d32;
 --ok: #2f6b4f;
 --radius: 22px;
 --radius-sm: 14px;
 --shadow: 0 18px 50px rgba(27, 23, 19, .08);
 --shadow-strong: 0 24px 60px rgba(12, 10, 8, .18);
 --container: 1180px;
 --space: clamp(68px, 8vw, 108px);
 --font: "Be Vietnam Pro", sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
 margin: 0;
 font-family: var(--font);
 color: var(--ink);
 background: var(--bg);
 line-height: 1.7;
 font-size: 16px;
 overflow-wrap: break-word;
}
img { max-width: 100%; display: block; }
button, input, select, textarea { font-family: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { line-height: 1.12; letter-spacing: -.035em; }
ul, ol { margin: 0; padding: 0; }
::selection { background: #e4d2a4; color: #1b1713; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.container { width: min(var(--container), calc(100% - 40px)); margin-inline: auto; }
.site-header {
 position: sticky;
 top: 0;
 z-index: 50;
 background: rgba(243, 238, 230, .9);
 backdrop-filter: blur(16px);
 border-bottom: 1px solid var(--line);
}
.header-bar {
 min-height: 78px;
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 16px;
}
.logo { display: flex; flex-direction: column; line-height: 1.05; min-width: 0; }
.logo-mark { font-weight: 700; font-size: 1.28rem; letter-spacing: -.04em; }
.logo-sub { margin-top: 3px; font-size: 11px; color: var(--muted); letter-spacing: .02em; }
.nav-toggle {
 display: none;
 border: 1px solid var(--line);
 background: var(--paper);
 border-radius: 999px;
 padding: 10px 14px;
 gap: 8px;
 align-items: center;
 font-weight: 600;
}
.nav-list { display: flex; align-items: center; gap: 2px; list-style: none; }
.nav-list a, .mega-btn {
 display: inline-flex;
 align-items: center;
 border: 0;
 background: transparent;
 border-radius: 999px;
 padding: 8px 10px;
 font-size: 13.5px;
 font-weight: 550;
 font-weight: 500;
 transition: background .2s ease, color .2s ease, transform .2s ease;
}
.nav-list a:hover, .mega-btn:hover { color: #7d6124; background: rgba(255,255,255,.7); }
.nav-list a.active {
 background: var(--deep);
 color: #f6f1e7;
}
.nav-list a.active:hover { color: #f6f1e7; }
.nav-list a:active, .mega-btn:active { transform: scale(.98); }
.header-tools { display: flex; align-items: center; }
.mega-wrap { position: relative; }
.mega-btn { border: 1px solid var(--line); background: var(--paper); box-shadow: 0 8px 20px rgba(27,23,19,.04); }
.mega-btn i { margin-left: 6px; font-size: 11px; }
.mega-panel {
 display: none;
 position: absolute;
 right: 0;
 top: calc(100% + 12px);
 width: min(680px, 74vw);
 padding: 14px;
 background: rgba(255,252,248,.98);
 border: 1px solid var(--line);
 border-radius: 20px;
 box-shadow: var(--shadow-strong);
 grid-template-columns: repeat(3, 1fr);
 gap: 10px;
}
.mega-wrap:hover .mega-panel, .mega-wrap:focus-within .mega-panel, .mega-wrap.is-open .mega-panel { display: grid; }
.mega-card {
 display: flex;
 flex-direction: column;
 min-height: 168px;
 border-radius: 16px;
 overflow: hidden;
 background: var(--deep);
 color: #f6f1e7;
 position: relative;
}
.mega-card img { width: 100%; height: 92px; object-fit: cover; }
.mega-card span { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 4px; }
.mega-card strong { font-size: 14px; }
.mega-card em { font-style: normal; color: rgba(246,241,231,.72); font-size: 12px; line-height: 1.45; }
.mega-card:hover { transform: translateY(-3px); transition: transform .2s ease; }
.section-head { max-width: 760px; margin-bottom: 28px; }
.section-head .lede, .lede { color: var(--muted); margin-top: 12px; }
.eyebrow {
 display: inline-flex;
 align-items: center;
 gap: 8px;
 color: var(--gold-2);
 letter-spacing: .14em;
 text-transform: uppercase;
 font-size: 12px;
 font-weight: 600;
 margin-bottom: 14px;
}
.kicker {
 display: inline-flex;
 align-items: center;
 gap: 10px;
 color: #7d6124;
 letter-spacing: .14em;
 text-transform: uppercase;
 font-size: 12px;
 font-weight: 600;
}
.kicker::before {
 content: "";
 width: 18px;
 height: 1px;
 background: var(--gold);
}
.hero {
 position: relative;
 color: #f7f1e6;
 background:
 linear-gradient(105deg, rgba(10,9,8,.92) 8%, rgba(10,9,8,.78) 46%, rgba(10,9,8,.38) 100%),
 url("/assets/images/9f0d54a3a2bdd14b.webp") center/cover no-repeat;
 overflow: hidden;
}
.hero-grid {
 display: grid;
 grid-template-columns: minmax(0, 1.15fr) minmax(300px, .85fr);
 gap: 42px;
 align-items: center;
 padding: clamp(48px, 7vw, 92px) 0;
}
.hero h1 { font-size: clamp(2.3rem, 5vw, 4.5rem); max-width: 14ch; }
.hero .lede { color: rgba(247,241,230,.8); font-size: 1.02rem; max-width: 62ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.btn {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 gap: 8px;
 min-height: 48px;
 padding: 0 18px;
 border-radius: 999px;
 border: 1px solid transparent;
 font-weight: 600;
 transition: transform .2s ease, background .2s ease, box-shadow .2s ease, color .2s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.98); }
.btn-gold { background: linear-gradient(180deg, #f0dfb4, #c6a25b); color: #231c10; box-shadow: 0 10px 24px rgba(166,132,61,.28); }
.btn-gold:hover { box-shadow: 0 16px 30px rgba(166,132,61,.36); }
.btn-ghost { background: transparent; color: #f7f1e6; border-color: rgba(247,241,230,.35); }
.btn-ghost:hover { background: rgba(255,255,255,.08); }
.btn-dark { background: var(--deep); color: #f6f1e7; }
.btn-dark:hover { background: #2a241c; }
.btn-line { background: transparent; border-color: var(--line); color: var(--ink); }
.btn-line:hover { background: rgba(255,255,255,.72); border-color: rgba(166,132,61,.45); }
.hero-note { margin-top: 18px; color: rgba(247,241,230,.7); font-size: 14px; }
.countdown-row, .split, .tier-layout, .voice-grid, .news-grid, .register-grid, .safety-grid, .device-layout {
 display: grid;
 gap: 28px;
}
.countdown-row { grid-template-columns: 1.1fr .9fr; align-items: center; }
.bento-main { grid-row: span 2; position: relative; min-height: 460px; border-radius: var(--radius); overflow: hidden; color: #fff; }
.bento-main img, .side-card img, .news-feature img, .voice-photo img, .frame img { width: 100%; height: 100%; object-fit: cover; }
.bento-main .cap, .side-card .cap {
 position: absolute;
 left: 0; right: 0; bottom: 0;
 padding: 22px;
 background: linear-gradient(180deg, transparent, rgba(0,0,0,.78));
}
.side-card { position: relative; min-height: 223px; border-radius: var(--radius); overflow: hidden; color: white; background: var(--deep); }
.badge, .tag {
 display: inline-flex;
 align-items: center;
 gap: 6px;
 border-radius: 999px;
 padding: 4px 10px;
 font-size: 12px;
 font-weight: 600;
 letter-spacing: .04em;
 background: rgba(166,132,61,.14);
 color: #7d6124;
 border: 1px solid rgba(166,132,61,.22);
}
.badge-light { background: rgba(255,252,248,.12); color: var(--gold-2); border-color: rgba(228,210,164,.28); }
.block { padding: var(--space) 0; }
.block-paper { background: var(--paper); }
.block-sand { background: linear-gradient(180deg, rgba(231,224,210,.55), rgba(243,238,230,0)); }
.page-hero {
 position: relative;
 background:
 linear-gradient(180deg, rgba(243,238,230,.94) 0%, rgba(243,238,230,.9) 58%, rgba(243,238,230,.96) 100%),
 url("/assets/images/cd18d8416f444e01.webp") center/cover no-repeat;
 padding: clamp(52px, 7vw, 96px) 0 64px;
}
.hero-layout {
 display: grid;
 grid-template-columns: minmax(0, 1.08fr) minmax(320px, .92fr);
 gap: 48px;
 align-items: center;
}
.page-hero h1 {
 font-size: clamp(2.4rem, 5vw, 4.35rem);
 max-width: 11ch;
 margin: 14px 0 18px;
}
.page-hero .lede { max-width: 58ch; font-size: 1.05rem; }
.point-list { list-style: none; display: grid; gap: 12px; margin-top: 22px; }
.point-list li {
 display: grid;
 grid-template-columns: 36px 1fr;
 gap: 12px;
 align-items: start;
}
.point-ico {
 width: 36px;
 height: 36px;
 border-radius: 12px;
 display: grid;
 place-items: center;
 background: var(--paper);
 border: 1px solid var(--line);
 color: #7d6124;
 box-shadow: 0 8px 18px rgba(27,23,19,.04);
}
.point-list strong { display: block; font-size: 15px; }
.point-list span { color: var(--muted); font-size: 14px; }
.slot-board {
 background: linear-gradient(180deg, var(--hud-2), var(--hud));
 color: #f6f1e7;
 border-radius: 28px;
 padding: 22px;
 box-shadow: var(--shadow-strong);
 border: 1px solid rgba(228,210,164,.16);
}
.slot-top { display: flex; justify-content: space-between; gap: 12px; align-items: center; margin-bottom: 16px; }
.slot-top p { color: rgba(246,241,231,.68); font-size: 13px; margin-top: 4px; }
.slot-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.slot {
 text-align: left;
 border-radius: 16px;
 border: 1px solid rgba(246,241,231,.12);
 background: rgba(255,255,255,.03);
 color: #f6f1e7;
 padding: 14px;
 min-height: 92px;
 transition: border-color .2s ease, transform .2s ease, background .2s ease;
}
.slot small { display: block; color: rgba(246,241,231,.62); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.slot b { display: block; margin-top: 6px; font-size: 1.15rem; letter-spacing: -.03em; }
.slot:hover { transform: translateY(-2px); border-color: rgba(228,210,164,.55); }
.slot.is-on {
 background: linear-gradient(180deg, rgba(240,223,180,.18), rgba(166,132,61,.16));
 border-color: var(--gold-2);
 box-shadow: inset 0 0 0 1px rgba(228,210,164,.35);
}
.slot-summary {
 margin-top: 14px;
 padding: 14px;
 border-radius: 16px;
 background: rgba(255,252,248,.06);
 border: 1px solid rgba(246,241,231,.08);
 display: flex;
 justify-content: space-between;
 gap: 12px;
 align-items: center;
}
.slot-summary strong { display: block; font-size: 1.05rem; }
.slot-summary span { color: rgba(246,241,231,.72); font-size: 13px; }
.tier-layout { grid-template-columns: minmax(260px, .78fr) minmax(0, 1.22fr); align-items: start; }
.tier-copy h2, .split-copy h2, .route-head h2, .guard-copy h2, .scene-head h2 {
 font-size: clamp(1.8rem, 3vw, 2.7rem);
 margin: 12px 0;
}
.tier-stack { display: grid; gap: 12px; }
.tier {
 border-radius: var(--radius);
 border: 1px solid var(--line);
 background: var(--paper);
 padding: 22px;
 box-shadow: var(--shadow);
 transition: transform .2s ease, box-shadow .2s ease;
}
.tier:hover { transform: translateY(-3px); box-shadow: var(--shadow-strong); }
.tier-feature {
 background:
 linear-gradient(145deg, rgba(20,19,17,.2), rgba(20,19,17,.72)),
 url("/assets/images/e03229c092c8b7ff.webp") center/cover;
 color: #f6f1e7;
 min-height: 230px;
 display: flex;
 flex-direction: column;
 justify-content: flex-end;
 border: 0;
}
.tier-feature p, .tier p { color: inherit; }
.tier-feature p { color: rgba(246,241,231,.78); max-width: 46ch; }
.tier-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tier h3 { font-size: 1.35rem; margin: 8px 0; }
.tier ul { list-style: none; display: grid; gap: 8px; margin-top: 12px; }
.tier li { display: flex; gap: 8px; align-items: flex-start; font-size: 14.5px; }
.tier li i { color: var(--gold); margin-top: 4px; }
.tier-feature li i { color: var(--gold-2); }
.meter {
 height: 4px;
 border-radius: 99px;
 background: rgba(27,23,19,.08);
 margin-top: 14px;
 overflow: hidden;
}
.meter span { display: block; height: 100%; background: linear-gradient(90deg, var(--gold), var(--gold-2)); }
.tier-feature .meter { background: rgba(255,255,255,.12); }
.split-media {
 display: grid;
 grid-template-columns: minmax(280px, .9fr) minmax(0, 1.1fr);
 gap: 36px;
 align-items: center;
}
.frame {
 border-radius: 28px;
 overflow: hidden;
 min-height: 460px;
 position: relative;
 box-shadow: var(--shadow-strong);
}
.frame img { width: 100%; height: 100%; object-fit: cover; min-height: 460px; }
.frame figcaption {
 position: absolute;
 left: 16px;
 bottom: 16px;
 background: rgba(20,19,17,.78);
 color: #f6f1e7;
 border-radius: 999px;
 padding: 8px 12px;
 font-size: 13px;
}
.perk-list { list-style: none; display: grid; gap: 10px; }
.perk-list li {
 display: grid;
 grid-template-columns: 46px 1fr;
 gap: 12px;
 padding: 14px;
 border-radius: 18px;
 background: var(--bg);
 border: 1px solid transparent;
 transition: transform .2s ease, border-color .2s ease, background .2s ease;
}
.perk-list li:hover { transform: translateX(4px); border-color: rgba(166,132,61,.35); background: #fff; }
.perk-list i {
 width: 46px;
 height: 46px;
 border-radius: 14px;
 display: grid;
 place-items: center;
 background: var(--deep);
 color: var(--gold-2);
}
.perk-list strong { display: block; }
.perk-list span { color: var(--muted); font-size: 14px; }
.route-head { display: flex; justify-content: space-between; gap: 24px; align-items: end; margin-bottom: 22px; }
.route-head p { max-width: 42ch; color: var(--muted); }
.route {
 list-style: none;
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 gap: 14px;
}
.route li {
 background: var(--paper);
 border: 1px solid var(--line);
 border-radius: var(--radius);
 padding: 20px;
 min-height: 220px;
 box-shadow: var(--shadow);
 position: relative;
 transition: transform .2s ease, box-shadow .2s ease;
}
.route li:hover { transform: translateY(-4px); box-shadow: var(--shadow-strong); }
.route em {
 font-style: normal;
 font-weight: 700;
 color: var(--gold);
 letter-spacing: .08em;
 font-size: 13px;
}
.route h3 { margin: 18px 0 8px; font-size: 1.2rem; }
.route p { color: var(--muted); font-size: 14.5px; }
.hud-wrap { padding-top: 0; }
.hud-panel {
 background:
 linear-gradient(120deg, rgba(16,23,20,.94), rgba(16,23,20,.82)),
 url("/assets/images/5c1f41e199487889.webp") center/cover;
 color: #f6f1e7;
 border-radius: 30px;
 padding: clamp(22px, 4vw, 36px);
 display: grid;
 grid-template-columns: 1.4fr .8fr;
 gap: 22px;
 box-shadow: var(--shadow-strong);
}
.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.stat {
 padding: 18px;
 border-radius: 18px;
 background: rgba(255,252,248,.05);
 border: 1px solid rgba(246,241,231,.08);
}
.stat b {
 display: block;
 font-size: clamp(1.8rem, 3vw, 2.6rem);
 letter-spacing: -.04em;
 color: var(--gold-2);
}
.stat span { color: rgba(246,241,231,.72); font-size: 14px; }
.hud-note {
 border-left: 1px solid rgba(228,210,164,.28);
 padding-left: 22px;
 display: flex;
 flex-direction: column;
 justify-content: center;
 gap: 12px;
}
.hud-note p { color: rgba(246,241,231,.78); }
.scene-head { margin-bottom: 22px; max-width: 680px; }
.scene-grid {
 display: grid;
 grid-template-columns: 1.35fr .85fr;
 grid-template-rows: 240px 240px;
 gap: 14px;
}
.scene {
 position: relative;
 border-radius: 24px;
 overflow: hidden;
 color: #fff;
 min-height: 220px;
}
.scene img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.scene:hover img { transform: scale(1.05); }
.scene-lg { grid-row: span 2; min-height: 100%; }
.scene div {
 position: absolute;
 inset: auto 0 0 0;
 padding: 18px;
 background: linear-gradient(180deg, transparent, rgba(0,0,0,.78));
}
.scene strong { display: block; font-size: 1.15rem; }
.scene span { color: rgba(255,255,255,.78); font-size: 14px; }
.guard-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 28px; align-items: start; }
.check-list { list-style: none; display: grid; gap: 10px; }
.check-list li {
 display: grid;
 grid-template-columns: 28px 1fr;
 gap: 10px;
 background: var(--paper);
 border: 1px solid var(--line);
 border-radius: 16px;
 padding: 14px 16px;
}
.check-list i { color: var(--ok); margin-top: 4px; }
.close-band {
 background:
 linear-gradient(100deg, rgba(16,23,20,.94), rgba(20,19,17,.86)),
 url("/assets/images/6d0b7497ca409469.jpg") center/cover;
 color: #f6f1e7;
 padding: clamp(52px, 7vw, 90px) 0;
}
.close-layout { display: flex; justify-content: space-between; align-items: end; gap: 28px; }
.close-layout h2 { font-size: clamp(2rem, 4vw, 3.2rem); max-width: 14ch; margin: 10px 0; }
.close-layout p { color: rgba(246,241,231,.75); max-width: 46ch; }
.close-side {
 min-width: min(320px, 100%);
 background: rgba(255,252,248,.06);
 border: 1px solid rgba(246,241,231,.12);
 border-radius: 22px;
 padding: 18px;
}
.close-side strong { display: block; font-size: 1.4rem; margin: 6px 0 14px; }
.site-footer {
 background: var(--deep);
 color: #f6f1e7;
 padding: 56px 0 0;
}
.footer-grid { display: grid; grid-template-columns: 1.3fr .8fr 1fr; gap: 32px; }
.site-footer .logo-mark { color: #fff; }
.site-footer .logo-sub, .site-footer p { color: rgba(246,241,231,.68); }
.footer-label {
 letter-spacing: .14em;
 text-transform: uppercase;
 font-size: 12px;
 font-weight: 600;
 color: var(--gold-2);
 margin-bottom: 12px;
}
.site-footer ul { list-style: none; }
.site-footer li { margin: 8px 0; }
.site-footer a { transition: color .2s ease; }
.site-footer a:hover { color: var(--gold-2); }
.footer-bottom {
 margin-top: 28px;
 border-top: 1px solid rgba(255,255,255,.08);
 padding: 16px 0 22px;
 color: rgba(246,241,231,.62);
 font-size: 14px;
}
@media (max-width: 1100px) {
 .nav-toggle { display: inline-flex; }
 .logo { order: 1; }
 .header-tools { order: 2; margin-left: auto; }
 .nav-toggle { order: 3; }
 #site-nav { display: none; order: 4; flex: 1 0 100%; }
 #site-nav.is-open { display: block; }
 .header-bar { flex-wrap: wrap; padding: 12px 0; }
 .nav-list { flex-direction: column; align-items: stretch; gap: 4px; padding: 8px 0 12px; }
 .nav-list a { padding: 12px 14px; }
 .mega-wrap.is-open .mega-panel, .mega-wrap:focus-within .mega-panel {
 position: fixed;
 left: 16px;
 right: 16px;
 top: 78px;
 width: auto;
 z-index: 70;
 max-height: min(70vh, 520px);
 overflow: auto;
 }
 .hero-layout, .tier-layout, .split-media, .hud-panel, .guard-grid, .footer-grid, .hero-grid, .countdown-row {
 grid-template-columns: 1fr;
 }
 .route { grid-template-columns: 1fr 1fr; }
 .hud-note { border-left: 0; padding-left: 0; border-top: 1px solid rgba(228,210,164,.28); padding-top: 16px; }
}
@media (max-width: 768px) {
 .scene-grid { grid-template-columns: 1fr; grid-template-rows: none; }
 .scene-lg { grid-row: auto; min-height: 320px; }
 .scene { min-height: 240px; }
 .tier-row, .slot-grid, .stat-grid, .route { grid-template-columns: 1fr; }
 .route-head, .close-layout, .slot-summary, .slot-top { flex-direction: column; align-items: flex-start; }
 .frame, .frame img { min-height: 280px; }
 .page-hero h1 { max-width: none; }
 .mega-panel { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
 .container { width: min(var(--container), calc(100% - 28px)); }
 .logo-mark { font-size: 1.1rem; }
 .nav-toggle { padding: 9px 12px; }
 .hero-actions .btn, .close-side .btn { width: 100%; }
 .slot { min-height: 0; }
 .tier-feature { min-height: 280px; }
 .page-hero { padding-top: 36px; }
 .footer-grid { gap: 22px; }
}

/* roulang page: category7 */
:root {
 --bg: #f3eee6;
 --bg-2: #e7e0d2;
 --paper: #fffcf8;
 --ink: #1b1713;
 --muted: #6d655c;
 --line: rgba(27, 23, 19, .12);
 --gold: #a6843d;
 --gold-2: #e4d2a4;
 --deep: #141311;
 --hud: #101714;
 --hud-2: #1b2823;
 --ember: #8c3d32;
 --ok: #2f6b4f;
 --radius: 22px;
 --radius-sm: 14px;
 --shadow: 0 18px 50px rgba(27, 23, 19, .08);
 --shadow-strong: 0 24px 60px rgba(12, 10, 8, .18);
 --container: 1180px;
 --space: clamp(68px, 8vw, 108px);
 --font: "Be Vietnam Pro", sans-serif;
}
/* roulang page: index */
:root {
 --bg: #f3eee6;
 --bg-2: #e7e0d2;
 --paper: #fffcf8;
 --ink: #1b1713;
 --muted: #6d655c;
 --line: rgba(27, 23, 19, .12);
 --gold: #a6843d;
 --gold-2: #e4d2a4;
 --deep: #141311;
 --hud: #101714;
 --hud-2: #1b2823;
 --ember: #8c3d32;
 --ok: #2f6b4f;
 --radius: 22px;
 --radius-sm: 14px;
 --shadow: 0 18px 50px rgba(27, 23, 19, .08);
 --shadow-strong: 0 24px 60px rgba(12, 10, 8, .18);
 --container: 1180px;
 --space: clamp(68px, 8vw, 108px);
 --font: "Be Vietnam Pro", sans-serif;
}
html { scroll-behavior: smooth; }
body {
 margin: 0;
 font-family: var(--font);
 color: var(--ink);
 background: var(--bg);
 line-height: 1.7;
 font-size: 16px;
}
img { max-width: 100%; display: block; }
button, input, select, textarea { font-family: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
.container { width: min(var(--container), calc(100% - 40px)); margin-inline: auto; }
.site-header {
 position: sticky;
 top: 0;
 z-index: 50;
 background: rgba(243, 238, 230, .9);
 backdrop-filter: blur(16px);
 border-bottom: 1px solid var(--line);
}
.header-bar {
 min-height: 78px;
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 16px;
}
.logo { display: flex; flex-direction: column; line-height: 1.05; min-width: 0; }
.logo-mark { font-weight: 700; font-size: 1.28rem; letter-spacing: -.04em; }
.logo-sub { margin-top: 3px; font-size: 11px; color: var(--muted); letter-spacing: .02em; }
.nav-toggle {
 display: none;
 border: 1px solid var(--line);
 background: var(--paper);
 border-radius: 999px;
 padding: 10px 14px;
 gap: 8px;
 align-items: center;
 font-weight: 600;
}
.nav-list { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; }
.nav-list a, .mega-btn {
 display: inline-flex;
 align-items: center;
 border: 0;
 background: transparent;
 border-radius: 999px;
 padding: 8px 10px;
 font-size: 13.5px;
 font-weight: 500;
 transition: background .2s ease, color .2s ease, transform .2s ease;
}
.nav-list a:hover, .mega-btn:hover { color: #7d6124; background: rgba(255,255,255,.7); }
.nav-list a.active {
 background: var(--deep);
 color: #f6f1e7;
}
.nav-list a.active:hover { color: #f6f1e7; }
.header-tools { display: flex; align-items: center; }
.mega-wrap { position: relative; }
.mega-btn { border: 1px solid var(--line); background: var(--paper); box-shadow: 0 8px 20px rgba(27,23,19,.04); }
.mega-btn i { margin-left: 6px; font-size: 11px; }
.mega-panel {
 display: none;
 position: absolute;
 right: 0;
 top: calc(100% + 12px);
 width: min(680px, 74vw);
 padding: 14px;
 background: rgba(255,252,248,.98);
 border: 1px solid var(--line);
 border-radius: 20px;
 box-shadow: var(--shadow-strong);
 grid-template-columns: repeat(3, 1fr);
 gap: 10px;
}
.mega-wrap:hover .mega-panel, .mega-wrap:focus-within .mega-panel, .mega-wrap.is-open .mega-panel { display: grid; }
.mega-card {
 display: flex;
 flex-direction: column;
 min-height: 168px;
 border-radius: 16px;
 overflow: hidden;
 background: var(--deep);
 color: #f6f1e7;
 position: relative;
}
.mega-card img { width: 100%; height: 92px; object-fit: cover; }
.mega-card span { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 4px; }
.mega-card strong { font-size: 14px; }
.mega-card em { font-style: normal; color: rgba(246,241,231,.72); font-size: 12px; line-height: 1.45; }
.mega-card:hover { transform: translateY(-3px); transition: transform .2s ease; }
.section-head { max-width: 760px; margin-bottom: 28px; }
.section-head .lede, .lede { color: var(--muted); margin-top: 12px; }
.eyebrow {
 display: inline-flex;
 align-items: center;
 gap: 8px;
 color: var(--gold);
 letter-spacing: .14em;
 text-transform: uppercase;
 font-size: 12px;
 font-weight: 600;
 margin-bottom: 14px;
}
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { line-height: 1.15; letter-spacing: -.03em; }
h2 { font-size: clamp(1.7rem, 3vw, 2.5rem); margin-bottom: 0; }
.hero {
 position: relative;
 color: #f7f1e6;
 background:
 linear-gradient(105deg, rgba(10,9,8,.92) 8%, rgba(10,9,8,.78) 46%, rgba(10,9,8,.38) 100%),
 url("/assets/images/9f0d54a3a2bdd14b.webp") center/cover no-repeat;
 overflow: hidden;
}
.hero-grid {
 display: grid;
 grid-template-columns: minmax(0, 1.15fr) minmax(300px, .85fr);
 gap: 42px;
 align-items: center;
 padding: clamp(48px, 7vw, 92px) 0;
}
.hero h1 { font-size: clamp(2.3rem, 5vw, 4.5rem); max-width: 14ch; }
.hero .lede { color: rgba(247,241,230,.8); font-size: 1.02rem; max-width: 62ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.btn {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 gap: 8px;
 min-height: 48px;
 padding: 0 18px;
 border-radius: 999px;
 border: 1px solid transparent;
 font-weight: 600;
 transition: transform .2s ease, background .2s ease, box-shadow .2s ease, color .2s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.98); }
.btn-gold { background: linear-gradient(180deg, #f0dfb4, #c6a25b); color: #231c10; box-shadow: 0 10px 24px rgba(166,132,61,.28); }
.btn-gold:hover { box-shadow: 0 16px 30px rgba(166,132,61,.36); }
.btn-ghost { background: transparent; color: #f7f1e6; border-color: rgba(247,241,230,.35); }
.btn-ghost:hover { background: rgba(255,255,255,.08); }
.btn-dark { background: var(--deep); color: #f6f1e7; }
.btn-line { background: transparent; border-color: var(--line); color: var(--ink); }
.hero-note { margin-top: 18px; color: rgba(247,241,230,.7); font-size: 14px; }
.countdown-row, .split, .tier-layout, .voice-grid, .news-grid, .register-grid, .safety-grid, .device-layout {
 display: grid;
 gap: 28px;
}
.countdown-row { grid-template-columns: 1.1fr .9fr; align-items: center; }
.bento-main { grid-row: span 2; position: relative; min-height: 460px; border-radius: var(--radius); overflow: hidden; color: #fff; }
.bento-main img, .side-card img, .news-feature img, .voice-photo img, .frame img { width: 100%; height: 100%; object-fit: cover; }
.bento-main .cap, .side-card .cap {
 position: absolute;
 left: 0; right: 0; bottom: 0;
 padding: 22px;
 background: linear-gradient(180deg, transparent, rgba(0,0,0,.78));
}
.side-card { position: relative; min-height: 223px; border-radius: var(--radius); overflow: hidden; color: white; background: var(--deep); }
.badge, .tag {
 display: inline-flex;
 align-items: center;
 gap: 6px;
 border-radius: 999px;
 padding: 4px 10px;
 font-size: 12px;
 font-weight: 600;
 letter-spacing: .04em;
 background: rgba(166, 132, 61, .14);
 color: #7a5d22;
}
.badge-live { background: rgba(140, 61, 50, .12); color: var(--ember); }
.badge-ok { background: rgba(47, 107, 79, .12); color: var(--ok); }
.badge-light { background: rgba(228, 210, 164, .16); color: var(--gold-2); }
a:focus-visible, button:focus-visible {
 outline: 2px solid var(--gold);
 outline-offset: 3px;
}
.site-footer {
 background: var(--deep);
 color: #f6f1e7;
 padding: 56px 0 22px;
}
.footer-grid {
 display: grid;
 grid-template-columns: 1.35fr .8fr 1fr;
 gap: 36px;
}
.site-footer .logo-mark { color: #f6f1e7; }
.site-footer .logo-sub, .site-footer p { color: rgba(246,241,231,.72); }
.footer-label {
 margin: 0 0 12px;
 letter-spacing: .14em;
 text-transform: uppercase;
 font-size: 12px;
 color: var(--gold-2);
 font-weight: 600;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin: 8px 0; }
.site-footer a { transition: color .2s ease; }
.site-footer a:hover { color: var(--gold-2); }
.footer-bottom {
 margin-top: 28px;
 padding-top: 18px;
 border-top: 1px solid rgba(246,241,231,.12);
 color: rgba(246,241,231,.55);
 font-size: 14px;
}
/* roulang page: category7 */
.page-mast { padding: clamp(42px, 6vw, 78px) 0 28px; }
.mast-grid {
 display: grid;
 grid-template-columns: minmax(0, 1.25fr) minmax(280px, .75fr);
 gap: 36px;
 align-items: end;
}
.page-mast h1 {
 font-size: clamp(2.4rem, 5.4vw, 4.6rem);
 max-width: 12ch;
 margin-bottom: 16px;
}
.page-mast .lede { max-width: 62ch; font-size: 1.05rem; }
.mast-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.hud-card {
 background: linear-gradient(180deg, var(--hud-2), var(--hud));
 color: #f6f1e7;
 border-radius: var(--radius);
 padding: 18px;
 box-shadow: var(--shadow-strong);
}
.hud-top {
 display: flex;
 justify-content: space-between;
 align-items: center;
 margin-bottom: 12px;
 font-size: 13px;
 color: rgba(246,241,231,.72);
}
.stat-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.stat {
 background: rgba(255,252,248,.05);
 border: 1px solid rgba(228,210,164,.16);
 border-radius: 16px;
 padding: 14px;
}
.stat b { display: block; font-size: 1.55rem; letter-spacing: -.04em; }
.stat span { color: rgba(246,241,231,.66); font-size: 12px; }
.lead-desk, .bulletin, .story-split, .shift-log, .member-note { padding: var(--space) 0; }
.lead-desk { background: var(--paper); border-block: 1px solid var(--line); }
.desk-grid {
 display: grid;
 grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr);
 gap: 22px;
}
.feature-story {
 position: relative;
 min-height: 520px;
 border-radius: var(--radius);
 overflow: hidden;
 color: #f7f1e6;
 background: var(--deep);
}
.feature-story img { width: 100%; height: 100%; object-fit: cover; min-height: 520px; }
.feature-copy {
 position: absolute;
 inset: auto 0 0 0;
 padding: 28px;
 background: linear-gradient(180deg, transparent, rgba(8,7,6,.88));
}
.feature-copy h2 { font-size: clamp(1.8rem, 3vw, 2.8rem); max-width: 16ch; }
.feature-copy p { color: rgba(247,241,230,.82); max-width: 52ch; }
.rank-board {
 background: var(--bg);
 border: 1px solid var(--line);
 border-radius: var(--radius);
 padding: 18px;
 display: flex;
 flex-direction: column;
 gap: 10px;
}
.rank-board h2 { font-size: 1.35rem; margin-bottom: 6px; }
.rank-item {
 display: grid;
 grid-template-columns: 52px 1fr auto;
 gap: 10px;
 align-items: center;
 padding: 12px;
 border-radius: 16px;
 background: var(--paper);
 border: 1px solid transparent;
 transition: border-color .2s ease, transform .2s ease;
}
.rank-item:hover { border-color: rgba(166,132,61,.45); transform: translateX(3px); }
.rank-item time { font-weight: 700; color: var(--gold); font-size: 13px; }
.rank-item strong { display: block; font-size: 14px; }
.rank-item em { font-style: normal; color: var(--muted); font-size: 12px; }
.pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--ember); box-shadow: 0 0 0 0 rgba(140,61,50,.6); animation: pulse 1.8s infinite; }
@keyframes pulse {
 70% { box-shadow: 0 0 0 8px rgba(140,61,50,0); }
 100% { box-shadow: 0 0 0 0 rgba(140,61,50,0); }
}
.stream { display: flex; flex-direction: column; }
.stream-row {
 display: grid;
 grid-template-columns: 110px minmax(0, 1fr) 140px;
 gap: 18px;
 align-items: center;
 padding: 22px 0;
 border-top: 1px solid var(--line);
}
.stream-row:last-child { border-bottom: 1px solid var(--line); }
.stream-row time { font-weight: 700; letter-spacing: -.03em; }
.stream-row h3 { font-size: 1.2rem; margin-bottom: 4px; }
.stream-row p { margin: 0; color: var(--muted); }
.story-layout {
 display: grid;
 grid-template-columns: 1.15fr .85fr;
 gap: 18px;
}
.story-card {
 background: var(--paper);
 border-radius: var(--radius);
 overflow: hidden;
 border: 1px solid var(--line);
 box-shadow: var(--shadow);
 display: grid;
 grid-template-rows: 240px auto;
 transition: transform .2s ease, box-shadow .2s ease;
}
.story-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-strong); }
.story-card img { width: 100%; height: 240px; object-fit: cover; }
.story-card div { padding: 22px; }
.story-card h3 { font-size: 1.45rem; margin-bottom: 8px; }
.story-card p { color: var(--muted); margin-bottom: 0; }
.story-card.tall { grid-row: span 1; }
.hud-news {
 position: relative;
 color: #f6f1e7;
 background:
 linear-gradient(100deg, rgba(16,23,20,.94), rgba(16,23,20,.8)),
 url("/assets/images/cd18d8416f444e01.webp") center/cover no-repeat;
 padding: var(--space) 0;
}
.hud-news .eyebrow, .close-news .eyebrow { color: var(--gold-2); }
.hud-news .lede { color: rgba(246,241,231,.74); }
.compare {
 display: grid;
 grid-template-columns: 1fr 1fr;
 border: 1px solid rgba(228,210,164,.2);
 border-radius: var(--radius);
 overflow: hidden;
}
.compare article { padding: 28px; }
.compare article + article { background: rgba(255,252,248,.04); border-left: 1px solid rgba(228,210,164,.2); }
.compare ul { list-style: none; margin: 18px 0 0; padding: 0; }
.compare li {
 display: flex;
 justify-content: space-between;
 gap: 12px;
 padding: 12px 0;
 border-top: 1px solid rgba(246,241,231,.1);
}
.compare b { font-size: 1.15rem; }
.meter {
 margin-top: 22px;
 height: 8px;
 border-radius: 999px;
 background: rgba(246,241,231,.12);
 overflow: hidden;
}
.meter span {
 display: block;
 height: 100%;
 width: 72%;
 background: linear-gradient(90deg, var(--gold), var(--gold-2));
}
.timeline { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.timeline li {
 display: grid;
 grid-template-columns: 120px 22px 1fr;
 gap: 16px;
}
.rail { position: relative; }
.rail::before {
 content: "";
 position: absolute;
 left: 8px;
 top: 8px;
 bottom: -8px;
 width: 1px;
 background: var(--line);
}
.timeline li:last-child .rail::before { display: none; }
.dot {
 width: 17px;
 height: 17px;
 border-radius: 50%;
 background: var(--paper);
 border: 3px solid var(--gold);
 margin-top: 4px;
}
.timeline h3 { margin-bottom: 4px; font-size: 1.2rem; }
.timeline p { margin: 0 0 22px; color: var(--muted); }
.note-grid {
 display: grid;
 grid-template-columns: .9fr 1.1fr;
 gap: 28px;
 align-items: center;
}
.quote-panel {
 background: var(--deep);
 color: #f6f1e7;
 border-radius: var(--radius);
 padding: 32px;
 min-height: 280px;
}
.quote-panel p { font-size: 1.35rem; line-height: 1.45; letter-spacing: -.02em; }
.quote-panel span { color: var(--gold-2); font-size: 14px; }
.level-list { display: flex; flex-direction: column; gap: 12px; }
.level {
 display: grid;
 grid-template-columns: 92px 1fr;
 gap: 14px;
 align-items: center;
 background: var(--paper);
 border: 1px solid var(--line);
 border-radius: 18px;
 padding: 14px 16px;
}
.level strong { display: block; }
.level em { font-style: normal; color: var(--muted); font-size: 14px; }
.mark {
 width: 92px;
 height: 64px;
 border-radius: 14px;
 display: grid;
 place-items: center;
 background: var(--bg-2);
 font-weight: 700;
}
.close-news {
 background:
 linear-gradient(100deg, rgba(20,19,17,.94), rgba(20,19,17,.78)),
 url("/assets/images/e09951bf6cd98549.jpg") center/cover no-repeat;
 color: #f6f1e7;
 padding: 54px 0;
}
.close-row {
 display: flex;
 justify-content: space-between;
 gap: 24px;
 align-items: end;
}
.close-news h2 { max-width: 14ch; font-size: clamp(2rem, 4vw, 3.3rem); }
.close-news p { color: rgba(246,241,231,.75); max-width: 46ch; }
.close-actions { display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 1024px) {
 .nav-toggle { display: inline-flex; }
 .header-bar { flex-wrap: wrap; padding: 12px 0; }
 #site-nav { display: none; width: 100%; order: 4; padding-bottom: 8px; }
 #site-nav.is-open { display: block; }
 .nav-list { flex-direction: column; align-items: stretch; }
 .header-tools { margin-left: auto; }
 .mega-panel { position: fixed; left: 20px; right: 20px; top: 78px; width: auto; }
 .mast-grid, .desk-grid, .story-layout, .note-grid, .footer-grid, .compare { grid-template-columns: 1fr; }
 .compare article + article { border-left: 0; border-top: 1px solid rgba(228,210,164,.2); }
 .feature-story, .feature-story img { min-height: 420px; }
}
@media (max-width: 768px) {
 .stream-row, .timeline li, .level { grid-template-columns: 1fr; }
 .rail { display: none; }
 .close-row { flex-direction: column; align-items: flex-start; }
 .mega-panel { grid-template-columns: 1fr; max-height: 70vh; overflow: auto; }
 .page-mast h1 { max-width: none; }
}
@media (max-width: 520px) {
 .container { width: min(var(--container), calc(100% - 28px)); }
 .stat-row { grid-template-columns: 1fr; }
 .mast-actions .btn, .close-actions .btn { width: 100%; }
 .logo-mark { font-size: 1.1rem; }
 .feature-copy { padding: 18px; }
 .quote-panel { padding: 22px; }
}