/* roulang page: index */
:root {
  --bg: #0b1220;
  --bg-2: #10192b;
  --bg-3: #182338;
  --card: #162033;
  --ink: #071018;
  --text: #f6f3ec;
  --muted: #b7c3d4;
  --gold: #f0b429;
  --gold-2: #ffd978;
  --heat: #ff5a3c;
  --mint: #3ee0a2;
  --line: rgba(246, 243, 236, .12);
  --shadow: 0 18px 50px rgba(0, 0, 0, .35);
  --radius: 22px;
  --radius-sm: 14px;
  --space: clamp(52px, 7vw, 92px);
  --max: 1180px;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Be Vietnam Pro", sans-serif;
  font-size: 16px;
  line-height: 1.65;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; height: auto; }
button, input, select, textarea { font-family: inherit; }
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid rgba(240, 180, 41, .75);
  outline-offset: 3px;
}
::selection { background: var(--gold); color: #1a1203; }
.container { width: min(var(--max), calc(100% - 32px)); margin: 0 auto; }
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(7, 12, 22, .88);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line);
}
.nav-wrap {
  min-height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.logo {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 180px;
}
.logo strong {
  font-size: 15px;
  letter-spacing: .01em;
  line-height: 1.2;
}
.logo span {
  color: var(--gold);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.nav-toggle {
  display: none;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: #121b2d;
  color: var(--text);
}
.nav-menu {
  display: flex;
  align-items: center;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-menu a {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 10px;
  border-radius: 999px;
  color: var(--muted);
  font-size: 13.5px;
  font-weight: 600;
}
.nav-menu a:hover { color: var(--text); background: rgba(255,255,255,.05); }
.nav-menu a.active, .nav-menu a:active {
  color: #1a1203;
  background: var(--gold);
}
.nav-tools { display: flex; align-items: center; gap: 10px; }
.lang-switch {
  display: inline-flex;
  padding: 4px;
  border-radius: 999px;
  background: #0e1726;
  border: 1px solid var(--line);
}
.lang-switch button {
  border: 0;
  background: transparent;
  color: var(--muted);
  border-radius: 999px;
  min-width: 42px;
  height: 32px;
  font-weight: 800;
  font-size: 12px;
}
.lang-switch button.on, .lang-switch button[aria-pressed="true"] {
  background: var(--text);
  color: #111;
}
.btn-nav, .btn-gold, .btn-ghost, .play-btn, .btn-line {
  border: 0;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
}
.btn-nav, .btn-gold {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 16px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--gold-2), var(--gold));
  color: #1a1203;
  font-weight: 800;
  box-shadow: 0 8px 20px rgba(240, 180, 41, .25);
}
.btn-nav:hover, .btn-gold:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(240, 180, 41, .35); }
.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 18px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  color: var(--text);
  border: 1px solid var(--line);
  font-weight: 700;
}
.btn-ghost:hover { background: rgba(255,255,255,.16); }
.hero-video {
  position: relative;
  min-height: 88vh;
  background:
    linear-gradient(180deg, rgba(6,10,18,.2) 0%, rgba(6,10,18,.72) 55%, rgba(7,12,22,1) 100%),
    url("/assets/images/c55b26848637ef10.jpg") center 30% / cover no-repeat;
  display: flex;
  align-items: flex-end;
}
.hero-video::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 120px;
  background: linear-gradient(180deg, transparent, var(--bg));
  pointer-events: none;
}
.hero-layout {
  position: relative;
  z-index: 1;
  padding: 120px 0 54px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 28px 36px;
  align-items: end;
}
.play-btn {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: var(--heat);
  color: white;
  font-size: 28px;
  box-shadow: 0 0 0 12px rgba(255, 90, 60, .18);
  position: relative;
}
.play-btn::before {
  content: "";
  position: absolute;
  inset: -14px;
  border-radius: 50%;
  border: 1px solid rgba(255, 90, 60, .7);
  animation: pulse 1.8s ease-out infinite;
}
.play-btn:hover { transform: scale(1.05); }
@keyframes pulse {
  from { transform: scale(.86); opacity: .8; }
  to { transform: scale(1.18); opacity: 0; }
}
.kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--gold-2);
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 12px;
  margin-bottom: 10px;
}
h1 {
  font-size: clamp(34px, 5vw, 64px);
  line-height: 1.08;
  letter-spacing: -.03em;
  margin: 0 0 14px;
  max-width: 16ch;
}
.hero-lead { max-width: 68ch; color: #e7edf6; margin: 0 0 18px; font-size: 17px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 18px; }
.film-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.chip, .heat, .badge-soft {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
}
.chip { background: rgba(8, 12, 20, .62); border: 1px solid var(--line); }
.heat { background: rgba(255, 90, 60, .16); color: #ffb1a3; }
.badge-soft { background: rgba(62, 224, 162, .12); color: var(--mint); }
main { display: block; }
.band { padding: var(--space) 0; }
.band-alt { background: linear-gradient(180deg, rgba(255,255,255,.025), transparent 28%), var(--bg-2); }
.band-ink { background: #0e1626; }
.section-head { max-width: 760px; margin-bottom: 28px; }
.section-head h2, .split-copy h2, .brand-copy h2, .cta-copy h2 {
  font-size: clamp(28px, 3vw, 42px);
  line-height: 1.15;
  letter-spacing: -.03em;
  margin: 0 0 10px;
}
.section-lead { color: var(--muted); margin: 0; }
.bento {
  display: grid;
  grid-template-columns: 1.35fr 1fr 1fr;
  grid-auto-rows: 210px;
  gap: 14px;
}
.tile {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  min-height: 210px;
  background: #10192a;
  box-shadow: var(--shadow);
}
.tile:first-child { grid-row: span 2; min-height: 434px; }
.tile img { width: 100%; height: 100%; object-fit: cover; }
.tile-mask {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(7,12,22,.05), rgba(7,12,22,.88));
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.tile:hover { transform: translateY(-3px); transition: transform .2s ease; }
.tile h3 { margin: 8px 0 4px; font-size: 22px; }
.tile p { margin: 0; color: #d5deea; font-size: 14px; }
.timeline {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 28px;
  align-items: start;
}
.time-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.time-list li {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 14px;
  padding: 16px;
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,.03);
  border: 1px solid var(--line);
}
.time-list strong { color: var(--gold-2); font-size: 13px; }
.time-list h3 { margin: 0 0 4px; font-size: 18px; }
.time-list p { margin: 0; color: var(--muted); }
.poster {
  position: sticky;
  top: 96px;
  border-radius: 28px;
  overflow: hidden;
  min-height: 460px;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}
.poster img { width: 100%; height: 100%; object-fit: cover; min-height: 460px; }
.poster figcaption {
  position: absolute;
  left: 16px; right: 16px; bottom: 16px;
  background: rgba(8,12,20,.78);
  border-radius: 16px;
  padding: 12px 14px;
}
.feature-split, .news-layout, .app-grid, .case-grid, .brand-grid, .cta-grid {
  display: grid;
  gap: 22px;
}
.feature-split { grid-template-columns: 1.15fr .85fr; }
.spot {
  position: relative;
  border-radius: 28px;
  overflow: hidden;
  min-height: 420px;
  border: 1px solid var(--line);
}
.spot img { width: 100%; height: 100%; object-fit: cover; min-height: 420px; }
.spot div {
  position: absolute;
  inset: auto 14px 14px 14px;
  background: rgba(8,12,20,.8);
  border-radius: 18px;
  padding: 16px;
}
.channel-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.channel-list a {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 14px;
  border-radius: 16px;
  background: #121b2c;
  border: 1px solid var(--line);
}
.channel-list a:hover { border-color: rgba(240,180,41,.5); }
.idx { color: var(--gold); font-weight: 800; }
.news-layout { grid-template-columns: 1.2fr .8fr; }
.news-main, .news-side article, .log-item, .price-card, .bubble, .rank-item, .feature-row, .scene, .shot figcaption {
  background: #121b2c;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.news-main { overflow: hidden; }
.news-main img { width: 100%; height: 280px; object-fit: cover; }
.news-main div, .news-side article { padding: 16px 18px 18px; }
.news-side { display: grid; gap: 12px; }
.news-side article { display: grid; grid-template-columns: 92px 1fr; gap: 12px; align-items: center; }
.news-side img { width: 92px; height: 92px; object-fit: cover; border-radius: 14px; }
.more-link { margin-top: 14px; color: var(--gold-2); font-weight: 800; }
.log-list, .feature-stack, .scene-grid, .price-grid, .bubble-list, .rank-list { display: grid; gap: 12px; }
.log-item, .feature-row { display: grid; grid-template-columns: 140px 1fr auto; gap: 12px; align-items: center; padding: 16px 18px; }
.log-item b { color: var(--gold-2); }
.app-grid { grid-template-columns: .9fr 1.1fr; align-items: center; }
.app-visual {
  border-radius: 30px;
  min-height: 460px;
  background:
    linear-gradient(180deg, rgba(7,12,22,.15), rgba(7,12,22,.78)),
    url("/assets/images/6e4b155d48f5c09c.webp") center / cover no-repeat;
  border: 1px solid var(--line);
  position: relative;
}
.app-card {
  position: absolute;
  right: 18px;
  bottom: 18px;
  width: min(280px, calc(100% - 36px));
  background: rgba(8,12,20,.84);
  border-radius: 18px;
  padding: 14px;
}
.device-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.device-row span { padding: 8px 12px; border-radius: 12px; background: #10192b; border: 1px solid var(--line); font-weight: 700; }
.accordion-item { background: #121b2c; border: 1px solid var(--line) !important; border-radius: 16px !important; overflow: hidden; margin-bottom: 10px; }
.accordion-button {
  background: #121b2c;
  color: var(--text);
  font-weight: 800;
  box-shadow: none;
}
.accordion-button:not(.collapsed) { background: #1b2740; color: var(--gold-2); }
.accordion-button::after { filter: invert(1); }
.accordion-body { color: var(--muted); }
.feature-row i, .scene i { color: var(--gold); font-size: 20px; }
.scene-grid { grid-template-columns: 1fr 1fr; }
.scene { padding: 18px; display: grid; grid-template-columns: auto 1fr; gap: 12px; }
.scene h3, .price-card h3, .bubble h3, .rank-item h3 { margin: 0 0 4px; font-size: 18px; }
.scene p, .price-card p, .bubble p, .rank-item p { margin: 0; color: var(--muted); }
.shot-rail { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; }
.shot { flex: 0 0 240px; scroll-snap-align: start; }
.shot img { height: 340px; width: 100%; object-fit: cover; border-radius: 24px; border: 1px solid var(--line); }
.shot figcaption { margin-top: 8px; padding: 10px 12px; }
.case-grid { grid-template-columns: .9fr 1.1fr; align-items: center; }
.case-grid img { border-radius: 28px; height: 420px; width: 100%; object-fit: cover; border: 1px solid var(--line); }
.metric-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 16px; }
.metric-row div { background: #10192b; border-radius: 16px; padding: 12px; border: 1px solid var(--line); }
.metric-row b { display: block; font-size: 26px; color: var(--gold-2); }
.price-grid { grid-template-columns: repeat(3, 1fr); }
.price-card { padding: 20px; position: relative; }
.price-card.hot { outline: 2px solid rgba(240,180,41,.7); transform: translateY(-6px); }
.price-card ul { margin: 12px 0 0; padding-left: 18px; color: var(--muted); }
.masonry { columns: 3; gap: 12px; }
.review {
  break-inside: avoid;
  margin-bottom: 12px;
  background: #121b2c;
  border: 1px solid var(--line);
  border-radius: 22px;
  overflow: hidden;
}
.review img { width: 100%; height: 180px; object-fit: cover; }
.review div { padding: 14px; }
.review h3 { margin: 0 0 6px; font-size: 16px; }
.stars { color: var(--gold); letter-spacing: 2px; font-size: 12px; }
.bubble-list { max-width: 820px; }
.bubble { padding: 14px 16px; width: min(100%, 640px); }
.bubble:nth-child(even) { margin-left: auto; background: #1a2436; }
.rank-item { display: grid; grid-template-columns: 52px 1fr auto; gap: 12px; align-items: center; padding: 14px; }
.rank-no { font-size: 22px; font-weight: 800; color: var(--heat); }
.bar { height: 8px; width: 120px; border-radius: 99px; background: #0d1524; overflow: hidden; }
.bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--heat), var(--gold)); }
.brand-grid {
  grid-template-columns: 1.1fr .9fr;
  align-items: center;
  background:
    linear-gradient(90deg, rgba(7,12,22,.88), rgba(7,12,22,.55)),
    url("/assets/images/dd42be46a3c38c9a.webp") center / cover no-repeat;
  border-radius: 32px;
  padding: 36px;
  border: 1px solid var(--line);
  min-height: 380px;
}
.cta-band {
  background:
    linear-gradient(180deg, rgba(7,12,22,.78), rgba(7,12,22,.9)),
    url("/assets/images/ec95e46acf487dc5.webp") center / cover no-repeat;
}
.cta-grid { grid-template-columns: .9fr 1.1fr; align-items: center; }
.keep-form { display: grid; gap: 12px; background: rgba(10,16,28,.86); border: 1px solid var(--line); border-radius: 24px; padding: 18px; }
.keep-form label { font-weight: 700; font-size: 14px; }
.keep-form input, .keep-form select, .keep-form textarea {
  width: 100%;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: #0e1726;
  color: var(--text);
  padding: 12px 12px;
}
.form-note { color: var(--mint); font-weight: 700; }
.site-footer { padding: 36px 0 28px; border-top: 1px solid var(--line); background: #080d18; }
.foot-grid { display: grid; grid-template-columns: 1.3fr .7fr; gap: 20px; }
.foot-links { display: flex; flex-wrap: wrap; gap: 10px 16px; align-content: start; justify-content: flex-end; }
.foot-links a:hover { color: var(--gold-2); }
.copy { color: var(--muted); margin-top: 18px; font-size: 14px; }
.modal-content { background: #121b2c; color: var(--text); border-radius: 24px; border: 1px solid var(--line); }
.modal-header, .modal-footer { border-color: var(--line); }
.clip-still { border-radius: 18px; min-height: 240px; background: url("/assets/images/da306b69291a5bba.webp") center / cover no-repeat; position: relative; }
.clip-still span { position: absolute; left: 12px; bottom: 12px; background: rgba(0,0,0,.7); border-radius: 999px; padding: 6px 10px; font-weight: 800; }
@media (max-width: 1100px) {
  .nav-toggle { display: inline-flex; align-items: center; justify-content: center; }
  #mainNav { display: none; width: 100%; }
  #mainNav.show { display: flex !important; flex-direction: column; align-items: stretch; gap: 12px; padding-bottom: 14px; }
  .nav-wrap { flex-wrap: wrap; padding: 10px 0; }
  .nav-menu { flex-direction: column; align-items: stretch; }
  .nav-tools { justify-content: space-between; }
  .bento, .timeline, .feature-split, .news-layout, .app-grid, .case-grid, .price-grid, .brand-grid, .cta-grid, .foot-grid { grid-template-columns: 1fr; }
  .tile:first-child { grid-row: auto; min-height: 280px; }
  .bento { grid-auto-rows: 230px; }
  .poster { position: static; }
  .masonry { columns: 2; }
  .price-card.hot { transform: none; }
  .foot-links { justify-content: flex-start; }
}
@media (max-width: 768px) {
  .hero-layout { grid-template-columns: 1fr; padding-top: 96px; }
  .play-btn { width: 74px; height: 74px; }
  h1 { max-width: none; }
  .log-item, .feature-row, .time-list li, .rank-item, .news-side article { grid-template-columns: 1fr; }
  .scene-grid, .metric-row { grid-template-columns: 1fr; }
  .masonry { columns: 1; }
  .bar { width: 88px; }
  .brand-grid, .cta-grid { padding: 0; }
  .brand-grid { padding: 22px; }
}
@media (max-width: 520px) {
  .container { width: min(var(--max), calc(100% - 20px)); }
  .logo strong { font-size: 13px; }
  .hero-video { min-height: 92vh; }
  .chip, .heat, .badge-soft { font-size: 11px; }
  .shot { flex-basis: 78vw; }
  .btn-gold, .btn-ghost { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* roulang page: category2 */
:root {
 --bg: #0b1220;
 --bg-2: #10192b;
 --bg-3: #182338;
 --card: #162033;
 --ink: #071018;
 --text: #f6f3ec;
 --muted: #b7c3d4;
 --gold: #f0b429;
 --gold-2: #ffd978;
 --heat: #ff5a3c;
 --mint: #3ee0a2;
 --line: rgba(246, 243, 236, .12);
 --shadow: 0 18px 50px rgba(0, 0, 0, .35);
 --radius: 22px;
 --radius-sm: 14px;
 --space: clamp(52px, 7vw, 92px);
 --max: 1180px;
}
html { scroll-behavior: smooth; }
body {
 margin: 0;
 background: var(--bg);
 color: var(--text);
 font-family: "Be Vietnam Pro", sans-serif;
 font-size: 16px;
 line-height: 1.65;
 text-rendering: optimizeLegibility;
 padding-bottom: 84px;
}
img { max-width: 100%; display: block; height: auto; }
button, input, select, textarea { font-family: inherit; }
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
 outline: 3px solid rgba(240, 180, 41, .75);
 outline-offset: 3px;
}
.container { width: min(var(--max), calc(100% - 32px)); margin: 0 auto; }
.site-header {
 position: sticky;
 top: 0;
 z-index: 50;
 background: rgba(7, 12, 22, .88);
 backdrop-filter: blur(16px);
 border-bottom: 1px solid var(--line);
}
.nav-wrap {
 min-height: 76px;
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 16px;
}
.logo {
 display: flex;
 flex-direction: column;
 gap: 0;
 min-width: 180px;
}
.logo strong {
 font-size: 15px;
 letter-spacing: .01em;
 line-height: 1.2;
}
.logo span {
 color: var(--gold);
 font-size: 11px;
 font-weight: 700;
 letter-spacing: .14em;
 text-transform: uppercase;
}
.nav-toggle {
 display: none;
 width: 46px;
 height: 46px;
 border-radius: 14px;
 border: 1px solid var(--line);
 background: #121b2d;
 color: var(--text);
 align-items: center;
 justify-content: center;
}
.nav-menu {
 display: flex;
 align-items: center;
 gap: 6px;
 list-style: none;
 margin: 0;
 padding: 0;
}
.nav-menu a {
 display: inline-flex;
 align-items: center;
 min-height: 38px;
 padding: 0 10px;
 border-radius: 999px;
 color: var(--muted);
 font-size: 13.5px;
 font-weight: 600;
}
.nav-menu a:hover { color: var(--text); background: rgba(255,255,255,.05); }
.nav-menu a.active, .nav-menu a:active {
 color: #1a1203;
 background: var(--gold);
}
.nav-tools { display: flex; align-items: center; gap: 10px; }
.lang-switch {
 display: flex;
 padding: 4px;
 border-radius: 999px;
 background: #121b2d;
 border: 1px solid var(--line);
}
.lang-switch button {
 border: 0;
 background: transparent;
 color: var(--muted);
 border-radius: 999px;
 min-width: 42px;
 height: 32px;
 font-weight: 800;
 font-size: 12px;
}
.lang-switch button.on, .lang-switch button[aria-pressed="true"] {
 background: var(--text);
 color: #111;
}
.btn-nav, .btn-gold, .btn-ghost, .play-btn, .btn-line {
 border: 0;
 cursor: pointer;
 transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
}
.btn-nav, .btn-gold {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 gap: 8px;
 min-height: 42px;
 padding: 0 16px;
 border-radius: 999px;
 background: linear-gradient(180deg, var(--gold-2), var(--gold));
 color: #1a1203;
 font-weight: 800;
 box-shadow: 0 8px 20px rgba(240, 180, 41, .25);
}
.btn-nav:hover, .btn-gold:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(240, 180, 41, .35); }
.btn-ghost {
 display: inline-flex;
 align-items: center;
 gap: 8px;
 min-height: 48px;
 padding: 0 18px;
 border-radius: 999px;
 background: rgba(255,255,255,.08);
 color: var(--text);
 border: 1px solid var(--line);
 font-weight: 700;
}
.btn-ghost:hover { background: rgba(255,255,255,.16); }
.chip, .heat, .badge-soft {
 display: inline-flex;
 align-items: center;
 gap: 6px;
 min-height: 30px;
 padding: 0 10px;
 border-radius: 999px;
 font-size: 12px;
 font-weight: 800;
}
.chip { background: rgba(8, 12, 20, .62); border: 1px solid var(--line); }
.badge-soft { background: rgba(62, 224, 162, .12); color: var(--mint); }
.heat { background: rgba(255, 90, 60, .16); color: #ffb1a3; }
.heat.gold { background: rgba(240, 180, 41, .16); color: var(--gold-2); }
.heat.mint { background: rgba(62, 224, 162, .14); color: var(--mint); }
main { display: block; }
.section-head { max-width: 760px; margin-bottom: 28px; }
.section-head h2, .split-copy h2, .brand-copy h2, .cta-copy h2 {
 font-size: clamp(28px, 3vw, 42px);
 line-height: 1.15;
 letter-spacing: -.03em;
 margin: 0 0 10px;
}
.section-lead { color: var(--muted); margin: 0; }
.eyebrow {
 margin: 0 0 10px;
 color: var(--gold-2);
 font-size: 12px;
 font-weight: 800;
 letter-spacing: .14em;
 text-transform: uppercase;
}
.route-hero {
 position: relative;
 min-height: 78vh;
 background:
  linear-gradient(100deg, rgba(7,12,22,.92) 8%, rgba(7,12,22,.72) 48%, rgba(7,12,22,.45) 100%),
  url("/assets/images/ec95e46acf487dc5.webp") center 40% / cover no-repeat;
 display: flex;
 align-items: flex-end;
 padding: 46px 0 42px;
}
.route-hero-grid {
 display: grid;
 grid-template-columns: 1.15fr .85fr;
 gap: 28px;
 align-items: end;
}
.route-hero h1 {
 margin: 0 0 14px;
 font-size: clamp(36px, 5vw, 64px);
 line-height: 1.05;
 letter-spacing: -.04em;
 max-width: 14ch;
}
.hero-lead { max-width: 62ch; color: #e7edf6; margin: 0 0 18px; font-size: 17px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 18px; }
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.live-panel {
 background: rgba(12, 18, 32, .82);
 border: 1px solid var(--line);
 border-radius: var(--radius);
 box-shadow: var(--shadow);
 padding: 18px;
 backdrop-filter: blur(10px);
}
.live-top {
 display: flex;
 justify-content: space-between;
 align-items: center;
 gap: 12px;
 margin-bottom: 12px;
}
.live-top h2 { margin: 0; font-size: 20px; }
.pulse-dot {
 width: 9px;
 height: 9px;
 border-radius: 50%;
 background: var(--mint);
 box-shadow: 0 0 0 6px rgba(62, 224, 162, .15);
 display: inline-block;
}
.live-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.live-list li {
 display: grid;
 grid-template-columns: 1fr auto;
 gap: 8px 12px;
 padding: 12px;
 border-radius: 16px;
 background: #121b2c;
 border: 1px solid var(--line);
}
.live-list strong { display: block; font-size: 15px; }
.live-list span { color: var(--muted); font-size: 13px; }
.heat-rail {
 padding: 22px 0;
 background: var(--bg-2);
 border-top: 1px solid var(--line);
 border-bottom: 1px solid var(--line);
}
.heat-row {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 gap: 14px;
}
.heat-stat {
 padding: 16px 18px;
 border-radius: var(--radius-sm);
 background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
 border: 1px solid var(--line);
}
.heat-stat b {
 display: block;
 font-size: clamp(26px, 3vw, 34px);
 letter-spacing: -.04em;
 line-height: 1;
 margin-bottom: 6px;
}
.heat-stat span { color: var(--muted); font-size: 13px; }
.rank-board, .cover-flow, .check-split, .lane-board, .pulse-wall, .log-list, .keep-band {
 padding: var(--space) 0;
}
.rank-board { background: var(--bg); }
.rank-layout {
 display: grid;
 grid-template-columns: 280px 1fr;
 gap: 28px;
 align-items: start;
}
.rank-side {
 position: sticky;
 top: 96px;
}
.rank-side p { color: var(--muted); }
.rank-ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.rank-ol li {
 display: grid;
 grid-template-columns: 54px 1fr auto;
 gap: 14px;
 align-items: center;
 padding: 14px;
 border-radius: 18px;
 background: var(--card);
 border: 1px solid var(--line);
 transition: transform .2s ease, border-color .2s ease;
}
.rank-ol li:hover { transform: translateX(4px); border-color: rgba(240, 180, 41, .45); }
.rank-no {
 width: 54px;
 height: 54px;
 border-radius: 16px;
 display: grid;
 place-items: center;
 background: #10192b;
 color: var(--gold-2);
 font-weight: 800;
}
.rank-ol h3 { margin: 0 0 2px; font-size: 18px; }
.rank-ol p { margin: 0; color: var(--muted); font-size: 14px; }
.ms { font-weight: 800; color: var(--text); }
.cover-flow { background: var(--bg-2); }
.masonry {
 columns: 3 240px;
 column-gap: 16px;
}
.cover-card {
 break-inside: avoid;
 margin: 0 0 16px;
 border-radius: 20px;
 overflow: hidden;
 position: relative;
 border: 1px solid var(--line);
 background: var(--card);
 box-shadow: var(--shadow);
}
.cover-card img { width: 100%; object-fit: cover; }
.cover-card:nth-child(3n+1) img { height: 340px; }
.cover-card:nth-child(3n+2) img { height: 260px; }
.cover-card:nth-child(3n) img { height: 300px; }
.cover-card figcaption {
 position: absolute;
 left: 0;
 right: 0;
 bottom: 0;
 padding: 48px 14px 14px;
 background: linear-gradient(180deg, transparent, rgba(6,10,18,.92));
}
.cover-card h3 { margin: 6px 0 0; font-size: 18px; }
.cover-card p { margin: 4px 0 0; color: #d5deea; font-size: 13px; }
.check-split { background: var(--bg); }
.check-grid {
 display: grid;
 grid-template-columns: .9fr 1.1fr;
 gap: 22px;
 align-items: stretch;
}
.shot {
 border-radius: var(--radius);
 overflow: hidden;
 min-height: 460px;
 border: 1px solid var(--line);
 position: relative;
}
.shot img { width: 100%; height: 100%; object-fit: cover; min-height: 460px; }
.shot-tag {
 position: absolute;
 left: 16px;
 top: 16px;
}
.time-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.time-list li {
 display: grid;
 grid-template-columns: 92px 1fr;
 gap: 14px;
 padding: 16px;
 border-radius: var(--radius-sm);
 background: rgba(255,255,255,.03);
 border: 1px solid var(--line);
}
.time-list strong { color: var(--gold-2); font-size: 13px; }
.time-list h3 { margin: 0 0 4px; font-size: 18px; }
.time-list p { margin: 0; color: var(--muted); }
.lane-board { background: radial-gradient(900px 280px at 10% 0%, rgba(240,180,41,.12), transparent 60%), var(--bg-3); }
.lane-grid {
 display: grid;
 grid-template-columns: 1.1fr .9fr .9fr;
 gap: 16px;
}
.lane {
 border-radius: var(--radius);
 padding: 22px;
 border: 1px solid var(--line);
 background: rgba(8, 12, 22, .45);
 min-height: 280px;
}
.lane.tall { background: #121b2c; }
.lane h3 { margin: 10px 0; font-size: 24px; }
.lane ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.lane li {
 display: flex;
 justify-content: space-between;
 gap: 10px;
 padding-bottom: 10px;
 border-bottom: 1px solid var(--line);
 color: var(--muted);
}
.lane li b { color: var(--text); }
.pulse-wall { background: var(--bg); }
.quote-grid {
 display: grid;
 grid-template-columns: 1.2fr .8fr;
 gap: 16px;
}
.quote {
 margin: 0;
 padding: 22px;
 border-radius: var(--radius);
 background: var(--card);
 border: 1px solid var(--line);
}
.quote p { margin: 0 0 14px; font-size: 18px; line-height: 1.5; }
.quote cite { color: var(--gold-2); font-style: normal; font-weight: 700; font-size: 14px; }
.quote.slim { display: flex; flex-direction: column; justify-content: space-between; background: linear-gradient(180deg, #1b2740, #121b2c); }
.log-list { background: var(--bg-2); }
.log-head {
 display: flex;
 justify-content: space-between;
 align-items: flex-end;
 gap: 16px;
 margin-bottom: 18px;
}
.log-rows { display: grid; gap: 12px; }
.log-rows a {
 display: grid;
 grid-template-columns: 112px 1fr auto;
 gap: 14px;
 align-items: center;
 padding: 10px;
 border-radius: 18px;
 background: #121b2c;
 border: 1px solid var(--line);
}
.log-rows a:hover { border-color: rgba(240, 180, 41, .5); transform: translateY(-2px); }
.log-rows img { width: 112px; height: 78px; object-fit: cover; border-radius: 12px; }
.log-rows h3 { margin: 0 0 4px; font-size: 17px; }
.log-rows p { margin: 0; color: var(--muted); font-size: 14px; }
.more-link { color: var(--gold-2); font-weight: 800; white-space: nowrap; }
.keep-band {
 background:
  linear-gradient(100deg, rgba(7,12,22,.88), rgba(7,12,22,.62)),
  url("/assets/images/6e4b155d48f5c09c.webp") center / cover no-repeat;
}
.keep-grid {
 display: grid;
 grid-template-columns: 1.1fr .9fr;
 gap: 24px;
 align-items: center;
}
.keep-form {
 display: grid;
 gap: 10px;
 padding: 18px;
 border-radius: var(--radius);
 background: rgba(10, 16, 28, .86);
 border: 1px solid var(--line);
}
.keep-form label { font-weight: 700; }
.keep-form input, .keep-form select {
 width: 100%;
 min-height: 48px;
 border-radius: 14px;
 border: 1px solid var(--line);
 background: #0d1524;
 color: var(--text);
 padding: 0 14px;
}
.form-note { min-height: 24px; margin: 0; color: var(--mint); font-weight: 600; }
.site-footer {
 background: #070c16;
 border-top: 1px solid var(--line);
 padding: 36px 0 22px;
}
.foot-grid {
 display: flex;
 justify-content: space-between;
 gap: 24px;
 align-items: flex-start;
 padding-bottom: 18px;
}
.foot-links { display: flex; flex-wrap: wrap; gap: 14px 18px; }
.foot-links a { color: var(--muted); font-weight: 700; }
.foot-links a:hover { color: var(--gold-2); }
.copy { color: var(--muted); margin: 8px 0 0; }
.float-bar {
 position: fixed;
 left: 50%;
 bottom: 16px;
 transform: translateX(-50%);
 z-index: 40;
 display: flex;
 gap: 8px;
 padding: 8px;
 border-radius: 999px;
 background: rgba(8, 12, 20, .9);
 border: 1px solid var(--line);
 box-shadow: var(--shadow);
 backdrop-filter: blur(12px);
}
.float-bar a {
 min-height: 40px;
 padding: 0 14px;
 border-radius: 999px;
 display: inline-flex;
 align-items: center;
 gap: 8px;
 font-weight: 800;
 font-size: 13px;
 color: var(--text);
}
.float-bar a:hover, .float-bar a:focus-visible { background: rgba(255,255,255,.08); }
.float-bar a.hot { background: var(--heat); color: white; }
@media (min-width: 1025px) {
 #mainNav.collapse { display: flex !important; align-items: center; gap: 12px; height: auto !important; visibility: visible; }
}
@media (max-width: 1024px) {
 .nav-toggle { display: inline-flex; }
 #mainNav.collapse { display: none; }
 #mainNav.collapse.show {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  position: absolute;
  left: 0;
  right: 0;
  top: 76px;
  background: rgba(7,12,22,.97);
  padding: 12px 16px 18px;
  border-bottom: 1px solid var(--line);
  gap: 12px;
 }
 .nav-menu { flex-direction: column; align-items: stretch; }
 .nav-menu a { width: 100%; }
 .nav-tools { justify-content: space-between; }
 .route-hero-grid, .rank-layout, .check-grid, .lane-grid, .quote-grid, .keep-grid { grid-template-columns: 1fr; }
 .rank-side { position: static; }
 .heat-row { grid-template-columns: 1fr 1fr; }
 .route-hero h1 { max-width: none; }
}
@media (max-width: 768px) {
 .masonry { columns: 2 160px; }
 .log-rows a, .rank-ol li, .time-list li { grid-template-columns: 1fr; }
 .log-rows img { width: 100%; height: 160px; }
 .foot-grid { flex-direction: column; }
 .shot, .shot img { min-height: 280px; }
}
@media (max-width: 520px) {
 .logo { min-width: 0; }
 .logo strong { font-size: 13px; }
 .heat-row, .masonry { grid-template-columns: 1fr; columns: 1; }
 .hero-actions, .float-bar { width: calc(100% - 20px); }
 .float-bar { left: 10px; right: 10px; transform: none; justify-content: space-between; }
 .float-bar a { padding: 0 10px; font-size: 12px; }
 .route-hero { min-height: auto; padding-top: 28px; }
}

/* roulang page: category1 */
:root {
 --bg: #0b1220;
 --bg-2: #10192b;
 --bg-3: #182338;
 --card: #162033;
 --ink: #071018;
 --text: #f6f3ec;
 --muted: #b7c3d4;
 --gold: #f0b429;
 --gold-2: #ffd978;
 --heat: #ff5a3c;
 --mint: #3ee0a2;
 --line: rgba(246, 243, 236, .12);
 --shadow: 0 18px 50px rgba(0, 0, 0, .35);
 --radius: 22px;
 --radius-sm: 14px;
 --space: clamp(52px, 7vw, 92px);
 --max: 1180px;
}
/* roulang page: category1 mien du phong */
html { scroll-behavior: smooth; }
*, *::before, *::after { box-sizing: border-box; }
body {
 margin: 0;
 background: var(--bg);
 color: var(--text);
 font-family: "Be Vietnam Pro", sans-serif;
 font-size: 16px;
 line-height: 1.65;
 text-rendering: optimizeLegibility;
 padding-bottom: 88px;
}
img { max-width: 100%; display: block; height: auto; }
button, input, select, textarea { font-family: inherit; }
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
 outline: 3px solid rgba(240, 180, 41, .75);
 outline-offset: 3px;
}
.container {
 width: min(var(--max), calc(100% - 32px)) !important;
 max-width: var(--max) !important;
 margin: 0 auto !important;
 padding-left: 0 !important;
 padding-right: 0 !important;
}
.site-header {
 position: sticky;
 top: 0;
 z-index: 50;
 background: rgba(7, 12, 22, .88);
 backdrop-filter: blur(16px);
 border-bottom: 1px solid var(--line);
}
.nav-wrap {
 min-height: 76px;
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 16px;
}
.logo {
 display: flex;
 flex-direction: column;
 gap: 0;
 min-width: 180px;
}
.logo strong {
 font-size: 15px;
 letter-spacing: .01em;
 line-height: 1.2;
 color: var(--text);
}
.logo span {
 color: var(--gold);
 font-size: 11px;
 font-weight: 700;
 letter-spacing: .14em;
 text-transform: uppercase;
}
.nav-toggle {
 display: none;
 width: 46px;
 height: 46px;
 border-radius: 14px;
 border: 1px solid var(--line);
 background: #121b2d;
 color: var(--text);
 align-items: center;
 justify-content: center;
}
.nav-menu {
 display: flex;
 align-items: center;
 gap: 6px;
 list-style: none;
 margin: 0;
 padding: 0;
}
.nav-menu a {
 display: inline-flex;
 align-items: center;
 min-height: 38px;
 padding: 0 10px;
 border-radius: 999px;
 color: var(--muted);
 font-size: 13.5px;
 font-weight: 600;
}
.nav-menu a:hover { color: var(--text); background: rgba(255,255,255,.05); }
.nav-menu a.active, .nav-menu a:active {
 color: #1a1203;
 background: var(--gold);
}
.nav-tools { display: flex; align-items: center; gap: 10px; }
.lang-switch {
 display: inline-flex;
 padding: 3px;
 border-radius: 999px;
 background: #121b2d;
 border: 1px solid var(--line);
}
.lang-switch button {
 border: 0;
 background: transparent;
 color: var(--muted);
 border-radius: 999px;
 min-width: 42px;
 height: 32px;
 font-weight: 800;
 font-size: 12px;
 cursor: pointer;
}
.lang-switch button.on, .lang-switch button[aria-pressed="true"] {
 background: var(--text);
 color: #111;
}
.btn-nav, .btn-gold, .btn-ghost, .play-btn, .btn-line {
 border: 0;
 cursor: pointer;
 transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
}
.btn-nav, .btn-gold {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 gap: 8px;
 min-height: 42px;
 padding: 0 16px;
 border-radius: 999px;
 background: linear-gradient(180deg, var(--gold-2), var(--gold));
 color: #1a1203;
 font-weight: 800;
 box-shadow: 0 8px 20px rgba(240, 180, 41, .25);
}
.btn-nav:hover, .btn-gold:hover, .btn-nav:focus-visible, .btn-gold:focus-visible {
 transform: translateY(-2px);
 box-shadow: 0 12px 26px rgba(240, 180, 41, .35);
 color: #1a1203;
}
.btn-gold:active, .btn-nav:active { transform: translateY(0); }
.btn-ghost {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 gap: 8px;
 min-height: 48px;
 padding: 0 18px;
 border-radius: 999px;
 background: rgba(255,255,255,.08);
 color: var(--text);
 border: 1px solid var(--line);
 font-weight: 700;
}
.btn-ghost:hover, .btn-ghost:focus-visible { background: rgba(255,255,255,.16); color: var(--text); }
.btn-ghost:active { transform: translateY(1px); }
.chip, .heat, .badge-soft, .badge-wait {
 display: inline-flex;
 align-items: center;
 gap: 6px;
 min-height: 30px;
 padding: 0 10px;
 border-radius: 999px;
 font-size: 12px;
 font-weight: 800;
}
.chip { background: rgba(8, 12, 20, .62); border: 1px solid var(--line); color: var(--text); }
.badge-soft { background: rgba(62, 224, 162, .12); color: var(--mint); }
.heat { background: rgba(255, 90, 60, .16); color: #ffb1a2; }
.badge-wait { background: rgba(240, 180, 41, .14); color: var(--gold-2); }
main { display: block; }
.section-lead { color: var(--muted); margin: 0; }
h1, h2, h3, p { overflow-wrap: anywhere; }
.console-hero {
 position: relative;
 background:
 linear-gradient(100deg, rgba(7,12,22,.94) 0%, rgba(7,12,22,.82) 46%, rgba(7,12,22,.62) 100%),
 url("/assets/images/ec95e46acf487dc5.webp") center 40% / cover no-repeat;
 padding: 34px 0 64px;
}
.crumb {
 display: flex;
 gap: 8px;
 align-items: center;
 color: var(--muted);
 font-size: 13px;
 font-weight: 600;
 margin-bottom: 22px;
}
.crumb a:hover { color: var(--gold-2); }
.hero-grid {
 display: grid;
 grid-template-columns: 1.08fr .92fr;
 gap: 34px;
 align-items: end;
}
.kicker {
 display: inline-flex;
 align-items: center;
 gap: 8px;
 color: var(--gold-2);
 font-size: 12px;
 font-weight: 800;
 letter-spacing: .12em;
 text-transform: uppercase;
 margin-bottom: 12px;
}
.kicker i { color: var(--heat); }
.console-hero h1 {
 margin: 0 0 14px;
 font-size: clamp(34px, 4.6vw, 62px);
 line-height: 1.05;
 letter-spacing: -.04em;
 max-width: 14ch;
}
.hero-lead { max-width: 62ch; color: #e7edf6; margin: 0 0 18px; font-size: 17px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 18px; }
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.code-panel {
 background: #070d18;
 border: 1px solid var(--line);
 border-radius: var(--radius);
 box-shadow: var(--shadow);
 overflow: hidden;
}
.code-bar {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 12px;
 padding: 12px 14px;
 background: #121b2d;
 border-bottom: 1px solid var(--line);
 color: var(--muted);
 font-size: 12px;
 font-weight: 700;
}
.dots { display: flex; gap: 6px; }
.dots i {
 width: 9px;
 height: 9px;
 border-radius: 50%;
 display: block;
 background: #314158;
}
.dots i:first-child { background: var(--heat); }
.dots i:nth-child(2) { background: var(--gold); }
.dots i:nth-child(3) { background: var(--mint); }
.code-panel pre {
 margin: 0;
 padding: 18px 18px 8px;
 color: #d7e2f1;
 font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
 font-size: 13px;
 line-height: 1.7;
 overflow: auto;
}
.tok-k { color: var(--gold-2); }
.tok-s { color: var(--mint); }
.tok-n { color: #ff8b72; }
.code-foot {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 12px;
 padding: 14px;
 border-top: 1px solid var(--line);
}
.live-dot {
 display: inline-flex;
 align-items: center;
 gap: 8px;
 color: var(--mint);
 font-size: 13px;
 font-weight: 700;
}
.live-dot::before {
 content: "";
 width: 8px;
 height: 8px;
 border-radius: 50%;
 background: var(--mint);
 box-shadow: 0 0 0 6px rgba(62, 224, 162, .15);
}
.pulse { background: var(--bg-2); padding: 0 0 8px; }
.pulse-bar {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 margin-top: -28px;
 background: rgba(22, 32, 51, .92);
 border: 1px solid var(--line);
 border-radius: var(--radius);
 box-shadow: var(--shadow);
 overflow: hidden;
}
.pulse-item {
 padding: 18px 18px 16px;
 border-right: 1px solid var(--line);
}
.pulse-item:last-child { border-right: 0; }
.pulse-item span {
 display: block;
 color: var(--muted);
 font-size: 12px;
 font-weight: 700;
 letter-spacing: .04em;
 text-transform: uppercase;
}
.pulse-item strong {
 display: block;
 margin-top: 4px;
 font-size: clamp(26px, 3vw, 36px);
 letter-spacing: -.04em;
 line-height: 1.1;
}
.pulse-item em {
 font-style: normal;
 color: var(--gold-2);
 font-size: 13px;
 font-weight: 700;
}
.rank-sec { padding: var(--space) 0; background: var(--bg); }
.rank-head, .fall-head, .log-head {
 display: flex;
 justify-content: space-between;
 align-items: flex-end;
 gap: 18px;
 margin-bottom: 22px;
}
.rank-head h2, .fall-head h2, .log-head h2, .shift-copy h2, .voice-copy h2, .cta-copy h2, .scene-copy h2 {
 font-size: clamp(28px, 3vw, 42px);
 line-height: 1.15;
 letter-spacing: -.03em;
 margin: 0 0 8px;
}
.rank {
 list-style: none;
 margin: 0;
 padding: 0;
 display: grid;
 gap: 10px;
}
.rank li {
 display: grid;
 grid-template-columns: 46px 74px 1fr auto;
 gap: 14px;
 align-items: center;
 padding: 10px;
 border-radius: 18px;
 background: var(--card);
 border: 1px solid var(--line);
 transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.rank li:hover {
 transform: translateY(-2px);
 border-color: rgba(240, 180, 41, .45);
 box-shadow: var(--shadow);
}
.pos {
 font-weight: 800;
 color: var(--gold-2);
 font-size: 18px;
 text-align: center;
}
.rank img {
 width: 74px;
 height: 74px;
 object-fit: cover;
 border-radius: 14px;
}
.rank h3 { margin: 0 0 2px; font-size: 18px; }
.rank p { margin: 0; color: var(--muted); font-size: 14px; }
.shift { background: var(--bg-3); padding: var(--space) 0; }
.shift-grid, .cta-grid {
 display: grid;
 grid-template-columns: 1.05fr .95fr;
 gap: 28px;
 align-items: center;
}
.shot {
 margin: 0;
 position: relative;
 border-radius: var(--radius);
 overflow: hidden;
 min-height: 460px;
 border: 1px solid var(--line);
 box-shadow: var(--shadow);
}
.shot img { width: 100%; height: 100%; object-fit: cover; min-height: 460px; }
.shot figcaption {
 position: absolute;
 left: 14px;
 bottom: 14px;
 padding: 8px 12px;
 border-radius: 999px;
 background: rgba(7, 12, 22, .78);
 border: 1px solid var(--line);
 font-size: 13px;
 font-weight: 700;
}
.time-list { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 12px; }
.time-list li {
 display: grid;
 grid-template-columns: 78px 1fr;
 gap: 14px;
 padding: 14px;
 border-radius: var(--radius-sm);
 background: rgba(255,255,255,.03);
 border: 1px solid var(--line);
}
.time-list strong { color: var(--gold-2); font-size: 13px; }
.time-list h3 { margin: 0 0 4px; font-size: 17px; }
.time-list p { margin: 0; color: var(--muted); }
.fall-sec { padding: var(--space) 0; background: var(--bg); }
.fall {
 columns: 3;
 column-gap: 16px;
}
.cover-card {
 break-inside: avoid;
 margin: 0 0 16px;
 border-radius: 20px;
 overflow: hidden;
 background: var(--card);
 border: 1px solid var(--line);
 position: relative;
}
.cover-card img { width: 100%; object-fit: cover; }
.cover-card.tall img { height: 430px; }
.cover-card.mid img { height: 300px; }
.cover-card.short img { height: 220px; }
.cover-card:hover img { transform: scale(1.04); }
.cover-card img { transition: transform .45s ease; }
.cover-body {
 position: absolute;
 inset: auto 0 0 0;
 padding: 48px 14px 14px;
 background: linear-gradient(180deg, transparent, rgba(6,10,18,.92));
}
.cover-body h3 { margin: 8px 0 4px; font-size: 20px; }
.cover-body p { margin: 0; color: #d5deea; font-size: 14px; }
.scenes {
 padding: var(--space) 0;
 background:
 linear-gradient(180deg, rgba(8,12,20,.88), rgba(8,12,20,.9)),
 url("/assets/images/6e4b155d48f5c09c.webp") center / cover no-repeat;
}
.scene-stack { display: grid; gap: 12px; margin-top: 22px; }
.scene-row {
 display: grid;
 grid-template-columns: 64px 1.1fr .9fr;
 gap: 16px;
 align-items: center;
 padding: 16px 18px;
 border-radius: 18px;
 background: rgba(12, 18, 32, .78);
 border: 1px solid var(--line);
}
.scene-row:hover { border-color: rgba(255, 90, 60, .45); }
.scene-ico {
 width: 64px;
 height: 64px;
 border-radius: 18px;
 display: grid;
 place-items: center;
 background: rgba(255, 90, 60, .14);
 color: #ffb1a2;
 font-size: 22px;
}
.scene-row h3 { margin: 0 0 4px; font-size: 18px; }
.scene-row p { margin: 0; color: var(--muted); }
.scene-meta { color: var(--gold-2); font-weight: 800; font-size: 14px; text-align: right; }
.voices { background: var(--bg-2); padding: var(--space) 0; }
.voice-grid {
 display: grid;
 grid-template-columns: 1.25fr .75fr;
 gap: 16px;
}
.quote {
 margin: 0;
 padding: 22px;
 border-radius: var(--radius);
 background: var(--card);
 border: 1px solid var(--line);
}
.quote-lg {
 background:
 linear-gradient(160deg, rgba(240,180,41,.16), rgba(22,32,51,.2)),
 var(--card);
 min-height: 100%;
}
.quote p { margin: 0 0 16px; font-size: 18px; line-height: 1.45; }
.quote-lg p { font-size: clamp(24px, 2.4vw, 32px); letter-spacing: -.03em; }
.quote footer { color: var(--muted); font-size: 13px; font-weight: 700; }
.side-quotes { display: grid; gap: 16px; }
.logs { padding: var(--space) 0; background: var(--bg); }
.log-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--line); }
.log-list li {
 display: grid;
 grid-template-columns: 92px 1.2fr .8fr auto;
 gap: 16px;
 align-items: center;
 padding: 16px 4px;
 border-bottom: 1px solid var(--line);
}
.log-list li:hover { background: rgba(255,255,255,.03); }
.log-time { color: var(--gold-2); font-weight: 800; }
.log-list h3 { margin: 0; font-size: 17px; }
.log-list p { margin: 0; color: var(--muted); }
.close-cta { padding: 0 0 var(--space); background: var(--bg); }
.cta-panel {
 display: grid;
 grid-template-columns: 1.15fr .85fr;
 gap: 22px;
 padding: 22px;
 border-radius: 28px;
 background:
 linear-gradient(120deg, rgba(7,12,22,.2), rgba(7,12,22,.72)),
 url("/assets/images/da306b69291a5bba.webp") center / cover no-repeat;
 border: 1px solid var(--line);
 box-shadow: var(--shadow);
}
.cta-copy { padding: 18px; }
.cta-side {
 display: grid;
 align-content: end;
 gap: 12px;
 padding: 18px;
 border-radius: 20px;
 background: rgba(7, 12, 22, .78);
 border: 1px solid var(--line);
}
.cta-side strong { font-size: 28px; letter-spacing: -.03em; }
.dock {
 position: fixed;
 left: 50%;
 bottom: 16px;
 transform: translateX(-50%);
 z-index: 40;
 display: flex;
 gap: 12px;
 align-items: center;
 padding: 8px 8px 8px 14px;
 border-radius: 999px;
 background: rgba(8, 12, 20, .92);
 border: 1px solid var(--line);
 box-shadow: var(--shadow);
 backdrop-filter: blur(12px);
}
.dock span { font-size: 13px; font-weight: 800; white-space: nowrap; }
.site-footer {
 background: #070d18;
 border-top: 1px solid var(--line);
 padding: 36px 0 22px;
}
.foot-grid {
 display: flex;
 justify-content: space-between;
 gap: 24px;
 align-items: flex-start;
 padding-bottom: 18px;
}
.foot-links { display: flex; flex-wrap: wrap; gap: 10px 16px; }
.foot-links a { color: var(--muted); font-weight: 600; font-size: 14px; }
.foot-links a:hover { color: var(--gold-2); }
.copy { color: var(--muted); margin: 8px 0 0; font-size: 13px; }
@media (min-width: 1100px) {
 .nav-toggle { display: none; }
 #mainNav.collapse {
  display: flex !important;
  height: auto !important;
  visibility: visible;
  flex: 1;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
 }
}
@media (max-width: 1099.98px) {
 .nav-toggle { display: inline-flex; }
 .nav-wrap { flex-wrap: wrap; padding: 10px 0; }
 #mainNav.collapse:not(.show) { display: none !important; }
 #mainNav.collapse.show {
  display: flex !important;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  gap: 12px;
  padding: 8px 0 16px;
 }
 .nav-menu { flex-direction: column; align-items: stretch; }
 .nav-menu a { width: 100%; }
 .nav-tools { justify-content: space-between; }
}
@media (max-width: 1024px) {
 .hero-grid, .shift-grid, .cta-panel, .voice-grid { grid-template-columns: 1fr; }
 .console-hero h1 { max-width: none; }
 .fall { columns: 2; }
 .shot, .shot img { min-height: 320px; }
 .log-list li { grid-template-columns: 72px 1fr; }
 .log-list p, .log-list .chip { grid-column: 2; }
}
@media (max-width: 768px) {
 .pulse-bar, .scene-row { grid-template-columns: 1fr 1fr; }
 .pulse-item { border-right: 0; border-bottom: 1px solid var(--line); }
 .scene-row { grid-template-columns: 54px 1fr; }
 .scene-meta { grid-column: 2; text-align: left; }
 .rank-head, .fall-head, .log-head, .foot-grid { flex-direction: column; align-items: flex-start; }
 .fall { columns: 1; }
 .cover-card.tall img, .cover-card.mid img, .cover-card.short img { height: 280px; }
}
@media (max-width: 520px) {
 .container { width: min(var(--max), calc(100% - 20px)) !important; }
 .hero-actions { flex-direction: column; }
 .btn-gold, .btn-ghost { width: 100%; }
 .pulse-bar { grid-template-columns: 1fr; }
 .rank li { grid-template-columns: 32px 56px 1fr; }
 .rank img { width: 56px; height: 56px; }
 .rank .heat, .rank .badge-soft, .rank .badge-wait { grid-column: 3; justify-self: start; }
 .time-list li { grid-template-columns: 1fr; gap: 4px; }
 .code-foot { flex-direction: column; align-items: stretch; }
 .dock { width: calc(100% - 16px); justify-content: space-between; }
 .logo { min-width: 0; }
 .logo strong { font-size: 13px; }
}

/* roulang page: category4 */
:root {
  --bg: #0b1220;
  --bg-2: #10192b;
  --bg-3: #182338;
  --card: #162033;
  --ink: #071018;
  --text: #f6f3ec;
  --muted: #b7c3d4;
  --gold: #f0b429;
  --gold-2: #ffd978;
  --heat: #ff5a3c;
  --mint: #3ee0a2;
  --line: rgba(246, 243, 236, .12);
  --shadow: 0 18px 50px rgba(0, 0, 0, .35);
  --radius: 22px;
  --radius-sm: 14px;
  --space: clamp(52px, 7vw, 92px);
  --max: 1180px;
}
/* roulang page: category4 */
html { scroll-behavior: smooth; }
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  background:
    radial-gradient(900px 420px at 90% -10%, rgba(255, 90, 60, .16), transparent 55%),
    var(--bg);
  color: var(--text);
  font-family: "Be Vietnam Pro", sans-serif;
  font-size: 16px;
  line-height: 1.65;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; height: auto; }
button, input, select, textarea { font-family: inherit; }
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 3px solid rgba(240, 180, 41, .75);
  outline-offset: 3px;
}
::selection { background: var(--gold); color: #1a1203; }
h1, h2, h3, h4, p { margin-top: 0; }
.container {
  width: min(var(--max), calc(100% - 32px));
  max-width: var(--max);
  margin: 0 auto;
  padding-left: 0;
  padding-right: 0;
}
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(7, 12, 22, .88);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line);
}
.nav-wrap {
  min-height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.logo {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 180px;
}
.logo strong {
  font-size: 15px;
  letter-spacing: .01em;
  line-height: 1.2;
  color: var(--text);
}
.logo span {
  color: var(--gold);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.nav-toggle {
  display: none;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: #121b2d;
  color: var(--text);
  align-items: center;
  justify-content: center;
}
.nav-menu {
  display: flex;
  align-items: center;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-menu a {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 10px;
  border-radius: 999px;
  color: var(--muted);
  font-size: 13.5px;
  font-weight: 600;
}
.nav-menu a:hover { color: var(--text); background: rgba(255,255,255,.05); }
.nav-menu a.active, .nav-menu a:active {
  color: #1a1203;
  background: var(--gold);
}
.nav-tools { display: flex; align-items: center; gap: 10px; }
.lang-switch {
  display: inline-flex;
  padding: 3px;
  border-radius: 999px;
  background: #10192b;
  border: 1px solid var(--line);
}
.lang-switch button {
  border: 0;
  background: transparent;
  color: var(--muted);
  border-radius: 999px;
  min-width: 42px;
  height: 32px;
  font-weight: 800;
  font-size: 12px;
}
.lang-switch button.on, .lang-switch button[aria-pressed="true"] {
  background: var(--text);
  color: #111;
}
.btn-nav, .btn-gold, .btn-ghost, .btn-line {
  border: 0;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
}
.btn-nav, .btn-gold {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 16px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--gold-2), var(--gold));
  color: #1a1203;
  font-weight: 800;
  box-shadow: 0 8px 20px rgba(240, 180, 41, .25);
}
.btn-nav:hover, .btn-gold:hover, .btn-gold:focus-visible { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(240, 180, 41, .35); }
.btn-gold:active, .btn-nav:active { transform: translateY(0); }
.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 18px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  color: var(--text);
  border: 1px solid var(--line);
  font-weight: 700;
}
.btn-ghost:hover { background: rgba(255,255,255,.16); }
.btn-line {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--gold-2);
  background: transparent;
  font-weight: 800;
  padding: 0;
}
.btn-line:hover { color: white; }
.chip, .heat, .badge-soft {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
}
.chip { background: rgba(8, 12, 20, .62); border: 1px solid var(--line); }
.badge-soft { background: rgba(62, 224, 162, .12); color: var(--mint); }
.heat { background: var(--heat); color: white; }
main { display: block; }
.section-head { max-width: 760px; margin-bottom: 28px; }
.section-head h2, .split-copy h2, .keep-copy h2 {
  font-size: clamp(28px, 3vw, 42px);
  line-height: 1.15;
  letter-spacing: -.03em;
  margin: 0 0 10px;
}
.section-lead { color: var(--muted); margin: 0; }
.kicker {
  color: var(--gold-2);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.page-mast {
  position: relative;
  padding: 34px 0 28px;
  background:
    linear-gradient(100deg, rgba(7,12,22,.94) 0%, rgba(7,12,22,.78) 48%, rgba(7,12,22,.42) 100%),
    url("/assets/images/6e4b155d48f5c09c.webp") center 40% / cover no-repeat;
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.mast-grid {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 28px;
  align-items: end;
}
.crumb {
  display: flex;
  gap: 8px;
  align-items: center;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 18px;
}
.crumb a:hover { color: var(--gold-2); }
.crumb span[aria-hidden] { opacity: .5; }
h1 {
  font-size: clamp(36px, 5vw, 62px);
  line-height: 1.02;
  letter-spacing: -.045em;
  font-weight: 800;
  margin-bottom: 14px;
  max-width: 14ch;
}
.mast-lead { color: #e7edf6; font-size: 17px; max-width: 58ch; margin-bottom: 16px; }
.mast-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.mast-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.poster-card {
  position: relative;
  border-radius: 28px;
  overflow: hidden;
  min-height: 460px;
  box-shadow: var(--shadow);
  border: 1px solid var(--line);
  background: #10192b;
}
.poster-card img { width: 100%; height: 100%; object-fit: cover; min-height: 460px; }
.poster-card figcaption {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 14px;
  padding: 14px;
  border-radius: 16px;
  background: rgba(7,12,22,.78);
  border: 1px solid var(--line);
  backdrop-filter: blur(8px);
}
.poster-card strong { display: block; }
.poster-card p { margin: 4px 0 0; color: var(--muted); font-size: 14px; }
.burst {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 98px;
  height: 98px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #ffd2c6, var(--heat) 58%);
  color: white;
  display: grid;
  place-items: center;
  text-align: center;
  font-weight: 800;
  line-height: 1.15;
  transform: rotate(-8deg);
  box-shadow: 0 12px 30px rgba(255, 90, 60, .4);
  z-index: 2;
}
.burst small { display: block; font-size: 11px; letter-spacing: .08em; }
.pulse { padding: 22px 0; background: #070c16; border-bottom: 1px solid var(--line); }
.pulse-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
  background: linear-gradient(90deg, rgba(240,180,41,.08), transparent 30%, rgba(62,224,162,.06));
}
.pulse-bar article {
  padding: 16px 18px;
  border-right: 1px solid var(--line);
}
.pulse-bar article:last-child { border-right: 0; }
.pulse-bar b { display: block; font-size: 28px; letter-spacing: -.04em; color: var(--gold-2); }
.pulse-bar span { color: var(--muted); font-size: 13px; font-weight: 600; }
.band { padding: var(--space) 0; }
.band-alt { background: var(--bg-2); }
.band-deep { background: linear-gradient(180deg, #0d1526, #121c31); }
.split-copy p { color: var(--muted); }
.lock-stack { display: grid; gap: 12px; }
.lock-item {
  display: grid;
  grid-template-columns: 54px 1fr;
  gap: 12px;
  padding: 14px;
  border-radius: 18px;
  background: rgba(255,255,255,.03);
  border: 1px solid var(--line);
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
}
.lock-item:hover { transform: translateX(4px); border-color: rgba(240,180,41,.45); background: rgba(240,180,41,.06); }
.lock-ico {
  width: 54px;
  height: 54px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: #1c283d;
  color: var(--gold-2);
  font-size: 18px;
}
.lock-item h3 { margin: 0 0 4px; font-size: 18px; }
.lock-item p { margin: 0; color: var(--muted); }
.rank-board { display: grid; gap: 10px; }
.rank-row {
  display: grid;
  grid-template-columns: 72px 1.3fr .9fr auto;
  gap: 14px;
  align-items: center;
  padding: 14px 16px;
  border-radius: 18px;
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: 0 10px 24px rgba(0,0,0,.16);
}
.rank-row:hover { border-color: rgba(255,90,60,.45); }
.rank-no {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  font-weight: 800;
  background: #10192b;
  color: var(--gold-2);
}
.rank-row h3 { margin: 0; font-size: 18px; }
.rank-row p { margin: 2px 0 0; color: var(--muted); font-size: 14px; }
.heat-track {
  height: 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  overflow: hidden;
}
.heat-track span {
  display: block;
  height: 100%;
  width: var(--w);
  border-radius: inherit;
  background: linear-gradient(90deg, var(--gold), var(--heat));
}
.rank-side { text-align: right; font-weight: 800; }
.rank-side small { display: block; color: var(--muted); font-weight: 600; }
.fall-grid { columns: 3 240px; column-gap: 16px; }
.fall-card {
  break-inside: avoid;
  margin: 0 0 16px;
  border-radius: 20px;
  overflow: hidden;
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}
.fall-card img { width: 100%; object-fit: cover; }
.fall-card.tall img { height: 360px; }
.fall-card.mid img { height: 250px; }
.fall-card.short img { height: 190px; }
.fall-card div { padding: 14px 14px 16px; }
.fall-card h3 { margin: 0 0 6px; font-size: 18px; }
.fall-card p { margin: 0; color: var(--muted); font-size: 14px; }
.head-row {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: end;
  margin-bottom: 22px;
}
.head-row .section-head { margin: 0; }
.cycle {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  counter-reset: step;
}
.cycle article {
  position: relative;
  padding: 18px;
  border-radius: var(--radius);
  background: #121b2c;
  border: 1px solid var(--line);
  min-height: 210px;
}
.cycle article::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  display: block;
  color: var(--heat);
  font-weight: 800;
  letter-spacing: .08em;
  margin-bottom: 18px;
}
.cycle h3 { font-size: 20px; margin-bottom: 8px; }
.cycle p { color: var(--muted); margin: 0; }
.voice-grid { display: grid; grid-template-columns: 1.3fr .7fr; gap: 16px; }
.quote-main, .quote-side article {
  border-radius: 24px;
  border: 1px solid var(--line);
  background: var(--card);
  padding: 22px;
}
.quote-main {
  background:
    linear-gradient(180deg, rgba(7,12,22,.2), rgba(7,12,22,.78)),
    url("/assets/images/ec95e46acf487dc5.webp") center / cover no-repeat;
  min-height: 320px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  box-shadow: var(--shadow);
}
.quote-main p { font-size: 26px; line-height: 1.35; font-weight: 700; letter-spacing: -.03em; margin-bottom: 12px; }
.quote-side { display: grid; gap: 16px; }
.who { color: var(--gold-2); font-weight: 800; font-size: 14px; }
.note-list { display: grid; gap: 12px; }
.note-item {
  display: grid;
  grid-template-columns: 148px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 10px;
  border-radius: 18px;
  background: rgba(255,255,255,.03);
  border: 1px solid var(--line);
}
.note-item img { width: 148px; height: 96px; object-fit: cover; border-radius: 12px; }
.note-item h3 { margin: 0 0 4px; font-size: 18px; }
.note-item p { margin: 0; color: var(--muted); }
.note-time { color: var(--gold-2); font-size: 13px; font-weight: 800; white-space: nowrap; }
.more-row { display: flex; justify-content: flex-end; margin-top: 14px; }
.faq-list { display: grid; gap: 10px; }
.faq-item {
  border-radius: 16px;
  border: 1px solid var(--line);
  background: #121b2c;
  padding: 0 16px;
}
.faq-item summary {
  cursor: pointer;
  list-style: none;
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-weight: 800;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; color: var(--gold); font-size: 22px; }
.faq-item[open] summary::after { content: "–"; }
.faq-item[open] { border-color: rgba(240,180,41,.45); }
.faq-item p { color: var(--muted); margin: 0 0 16px; }
.keep-band {
  position: relative;
  padding: var(--space) 0;
  background:
    linear-gradient(100deg, rgba(7,12,22,.92), rgba(7,12,22,.72)),
    url("/assets/images/da306b69291a5bba.webp") center / cover no-repeat;
}
.keep-grid { display: grid; grid-template-columns: 1fr .9fr; gap: 28px; align-items: center; }
.keep-copy p { color: #e7edf6; }
.keep-form {
  display: grid;
  gap: 12px;
  padding: 18px;
  border-radius: 24px;
  background: rgba(11,18,32,.88);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}
.field { display: grid; gap: 6px; }
.field span { font-size: 13px; font-weight: 700; color: var(--gold-2); }
.field input, .field textarea {
  width: 100%;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: #0e1626;
  color: var(--text);
  min-height: 48px;
  padding: 12px 14px;
}
.field textarea { min-height: 90px; resize: vertical; }
.field input:focus, .field textarea:focus { border-color: rgba(240,180,41,.7); }
.form-note { margin: 0; color: var(--mint); font-weight: 700; }
.live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--mint);
  box-shadow: 0 0 0 0 rgba(62,224,162,.6);
  animation: blink 1.6s infinite;
}
@keyframes blink {
  70% { box-shadow: 0 0 0 8px rgba(62,224,162,0); }
  100% { box-shadow: 0 0 0 0 rgba(62,224,162,0); }
}
.site-footer {
  background: #070c16;
  border-top: 1px solid var(--line);
  padding: 42px 0 28px;
}
.foot-grid {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: flex-start;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 18px;
}
.foot-links { display: flex; flex-wrap: wrap; gap: 10px 16px; justify-content: flex-end; }
.foot-links a { color: var(--muted); font-weight: 600; font-size: 14px; }
.foot-links a:hover { color: var(--gold-2); }
.copy { color: var(--muted); margin: 8px 0 0; font-size: 14px; }
.float-bar {
  display: none;
}
@media (min-width: 1025px) {
  #mainNav.collapse {
    display: flex !important;
    align-items: center;
    gap: 12px;
    height: auto !important;
    visibility: visible !important;
  }
}
@media (max-width: 1024px) {
  .nav-wrap { flex-wrap: wrap; padding: 10px 0; }
  .nav-toggle { display: inline-flex; margin-left: auto; }
  #mainNav.collapse.show {
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    width: 100%;
    padding: 4px 0 14px;
  }
  .nav-menu { flex-direction: column; align-items: stretch; }
  .nav-menu a { width: 100%; }
  .nav-tools { justify-content: space-between; }
  .mast-grid, .voice-grid, .keep-grid, .cycle { grid-template-columns: 1fr 1fr; }
  .mast-grid { grid-template-columns: 1fr; }
  h1 { max-width: none; }
  .poster-card, .poster-card img { min-height: 320px; }
  .rank-row { grid-template-columns: 64px 1fr; }
  .heat-track, .rank-side { grid-column: 2; }
  .note-item { grid-template-columns: 120px 1fr; }
  .note-time { grid-column: 2; }
}
@media (max-width: 768px) {
  .pulse-bar, .cycle, .voice-grid, .keep-grid { grid-template-columns: 1fr; }
  .pulse-bar article { border-right: 0; border-bottom: 1px solid var(--line); }
  .fall-grid { columns: 2 150px; }
  .head-row { flex-direction: column; align-items: flex-start; }
  .quote-main p { font-size: 22px; }
  .float-bar {
    display: flex;
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: 12px;
    z-index: 40;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 10px 10px 14px;
    border-radius: 999px;
    background: rgba(7,12,22,.92);
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
    backdrop-filter: blur(12px);
  }
  body { padding-bottom: 84px; }
}
@media (max-width: 520px) {
  .logo { min-width: 0; }
  .logo strong { font-size: 13px; }
  .fall-grid { columns: 1; }
  .note-item { grid-template-columns: 1fr; }
  .note-item img { width: 100%; height: 160px; }
  .note-time { grid-column: auto; }
  .mast-actions .btn-gold, .mast-actions .btn-ghost, .float-bar .btn-gold { width: 100%; }
  .float-bar { border-radius: 20px; flex-direction: column; align-items: stretch; }
  .rank-row { grid-template-columns: 52px 1fr; }
}

/* roulang page: category3 */
:root {
 --bg: #0b1220;
 --bg-2: #10192b;
 --bg-3: #182338;
 --card: #162033;
 --ink: #071018;
 --text: #f6f3ec;
 --muted: #b7c3d4;
 --gold: #f0b429;
 --gold-2: #ffd978;
 --heat: #ff5a3c;
 --mint: #3ee0a2;
 --line: rgba(246, 243, 236, .12);
 --shadow: 0 18px 50px rgba(0, 0, 0, .35);
 --radius: 22px;
 --radius-sm: 14px;
 --space: clamp(52px, 7vw, 92px);
 --max: 1180px;
}
/* roulang page: category3 */
:root {
 --bg: #0b1220;
 --bg-2: #10192b;
 --bg-3: #182338;
 --card: #162033;
 --ink: #071018;
 --text: #f6f3ec;
 --muted: #b7c3d4;
 --gold: #f0b429;
 --gold-2: #ffd978;
 --heat: #ff5a3c;
 --mint: #3ee0a2;
 --line: rgba(246, 243, 236, .12);
 --shadow: 0 18px 50px rgba(0, 0, 0, .35);
 --radius: 22px;
 --radius-sm: 14px;
 --space: clamp(52px, 7vw, 92px);
 --max: 1180px;
}
html { scroll-behavior: smooth; }
body {
 margin: 0;
 background: var(--bg);
 color: var(--text);
 font-family: "Be Vietnam Pro", sans-serif;
 font-size: 16px;
 line-height: 1.65;
 text-rendering: optimizeLegibility;
 padding-bottom: 92px;
}
img { max-width: 100%; display: block; height: auto; }
button, input, select, textarea { font-family: inherit; }
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
 outline: 3px solid rgba(240, 180, 41, .75);
 outline-offset: 3px;
}
.container { width: min(var(--max), calc(100% - 32px)); margin: 0 auto; }
.site-header {
 position: sticky;
 top: 0;
 z-index: 50;
 background: rgba(7, 12, 22, .88);
 backdrop-filter: blur(16px);
 border-bottom: 1px solid var(--line);
}
.nav-wrap {
 min-height: 76px;
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 16px;
}
.logo {
 display: flex;
 flex-direction: column;
 gap: 0;
 min-width: 180px;
}
.logo strong {
 font-size: 15px;
 letter-spacing: .01em;
 line-height: 1.2;
}
.logo span {
 color: var(--gold);
 font-size: 11px;
 font-weight: 700;
 letter-spacing: .14em;
 text-transform: uppercase;
}
.nav-toggle {
 display: none;
 width: 46px;
 height: 46px;
 border-radius: 14px;
 border: 1px solid var(--line);
 background: #121b2d;
 color: var(--text);
 align-items: center;
 justify-content: center;
}
.nav-menu {
 display: flex;
 align-items: center;
 gap: 6px;
 list-style: none;
 margin: 0;
 padding: 0;
}
.nav-menu a {
 display: inline-flex;
 align-items: center;
 min-height: 38px;
 padding: 0 10px;
 border-radius: 999px;
 color: var(--muted);
 font-size: 13.5px;
 font-weight: 600;
}
.nav-menu a:hover { color: var(--text); background: rgba(255,255,255,.05); }
.nav-menu a.active, .nav-menu a:active {
 color: #1a1203;
 background: var(--gold);
}
.nav-tools { display: flex; align-items: center; gap: 10px; }
.lang-switch {
 display: flex;
 padding: 4px;
 border-radius: 999px;
 background: #121b2d;
 border: 1px solid var(--line);
}
.lang-switch button {
 border: 0;
 background: transparent;
 color: var(--muted);
 border-radius: 999px;
 min-width: 42px;
 height: 32px;
 font-weight: 800;
 font-size: 12px;
}
.lang-switch button.on, .lang-switch button[aria-pressed="true"] {
 background: var(--text);
 color: #111;
}
.btn-nav, .btn-gold, .btn-ghost, .play-btn, .btn-line, .slot-btn, .media-dot {
 border: 0;
 cursor: pointer;
 transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
.btn-nav, .btn-gold {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 gap: 8px;
 min-height: 42px;
 padding: 0 16px;
 border-radius: 999px;
 background: linear-gradient(180deg, var(--gold-2), var(--gold));
 color: #1a1203;
 font-weight: 800;
 box-shadow: 0 8px 20px rgba(240, 180, 41, .25);
}
.btn-nav:hover, .btn-gold:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(240, 180, 41, .35); }
.btn-gold:active, .btn-nav:active { transform: translateY(0); }
.btn-ghost {
 display: inline-flex;
 align-items: center;
 gap: 8px;
 min-height: 48px;
 padding: 0 18px;
 border-radius: 999px;
 background: rgba(255,255,255,.08);
 color: var(--text);
 border: 1px solid var(--line);
 font-weight: 700;
}
.btn-ghost:hover { background: rgba(255,255,255,.16); }
.btn-line {
 display: inline-flex;
 align-items: center;
 gap: 8px;
 min-height: 42px;
 padding: 0 14px;
 border-radius: 999px;
 background: transparent;
 color: var(--gold-2);
 border: 1px solid rgba(240,180,41,.4);
 font-weight: 700;
}
.btn-line:hover { background: rgba(240,180,41,.12); }
.hero-video {
 position: relative;
 min-height: 88vh;
 background:
  linear-gradient(180deg, rgba(6,10,18,.2) 0%, rgba(6,10,18,.72) 55%, rgba(7,12,22,1) 100%),
  url("/assets/images/c55b26848637ef10.jpg") center 30% / cover no-repeat;
 display: flex;
 align-items: flex-end;
}
.play-btn {
 width: 96px;
 height: 96px;
 border-radius: 50%;
 background: var(--heat);
 color: white;
 font-size: 28px;
 box-shadow: 0 0 0 12px rgba(255, 90, 60, .18);
}
.chip, .heat, .badge-soft {
 display: inline-flex;
 align-items: center;
 gap: 6px;
 min-height: 30px;
 padding: 0 10px;
 border-radius: 999px;
 font-size: 12px;
 font-weight: 800;
}
.chip { background: rgba(8, 12, 20, .62); border: 1px solid var(--line); }
.badge-soft { background: rgba(62, 224, 162, .12); color: var(--mint); }
.heat { background: rgba(255, 90, 60, .16); color: #ffb2a4; }
main { display: block; }
.section-head { max-width: 760px; margin-bottom: 28px; }
.section-head h2, .split-copy h2, .brand-copy h2, .cta-copy h2, .offer-copy h2, .join-copy h2 {
 font-size: clamp(28px, 3vw, 42px);
 line-height: 1.15;
 letter-spacing: -.03em;
 margin: 0 0 10px;
}
.section-lead { color: var(--muted); margin: 0; }
.kicker {
 display: inline-flex;
 align-items: center;
 gap: 8px;
 color: var(--gold-2);
 font-size: 12px;
 font-weight: 800;
 letter-spacing: .12em;
 text-transform: uppercase;
 margin-bottom: 12px;
}
.kicker i { color: var(--heat); }
.time-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.time-list li {
 display: grid;
 grid-template-columns: 92px 1fr;
 gap: 14px;
 padding: 16px;
 border-radius: var(--radius-sm);
 background: rgba(255,255,255,.03);
 border: 1px solid var(--line);
}
.time-list strong { color: var(--gold-2); font-size: 13px; }
.time-list h3 { margin: 0 0 4px; font-size: 18px; }
.time-list p { margin: 0; color: var(--muted); }
.feature-split, .news-layout, .app-grid, .case-grid, .brand-grid, .cta-grid {
 display: grid;
 gap: 22px;
}
.channel-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.channel-list a {
 display: grid;
 grid-template-columns: auto 1fr auto;
 gap: 12px;
 align-items: center;
 padding: 14px;
 border-radius: 16px;
 background: #121b2c;
 border: 1px solid var(--line);
}
.channel-list a:hover { border-color: rgba(240,180,41,.55); background: #18263c; }
.site-footer {
 background: #080e1a;
 border-top: 1px solid var(--line);
 padding: 36px 0 28px;
}
.foot-grid {
 display: flex;
 align-items: flex-start;
 justify-content: space-between;
 gap: 24px;
 margin-bottom: 18px;
}
.foot-links { display: flex; flex-wrap: wrap; gap: 10px 16px; }
.foot-links a { color: var(--muted); font-weight: 600; }
.foot-links a:hover { color: var(--gold-2); }
.copy { color: var(--muted); margin: 8px 0 0; }
.band { padding: var(--space) 0; }
.band + .band { border-top: 1px solid transparent; }
.rank-band { background: linear-gradient(180deg, var(--bg-2), var(--bg)); }
.flow-band { background: var(--bg); }
.clock-band { background: var(--bg-3); }
.hall-band { background: var(--bg); }
.rule-band { background: #0d1526; }
.voice-band { background: var(--bg-2); }
.news-band { background: var(--bg); }
.offer-hero {
 position: relative;
 background:
  linear-gradient(100deg, rgba(7,12,22,.94) 0%, rgba(7,12,22,.82) 48%, rgba(7,12,22,.58) 100%),
  url("/assets/images/ec95e46acf487dc5.webp") center 40% / cover no-repeat;
 padding: 46px 0 62px;
}
.offer-hero-grid {
 display: grid;
 grid-template-columns: 1.15fr .85fr;
 gap: 28px;
 align-items: center;
}
.offer-copy h1 {
 margin: 0 0 14px;
 font-size: clamp(34px, 5vw, 62px);
 line-height: 1.05;
 letter-spacing: -.04em;
 max-width: 14ch;
}
.hero-lead { max-width: 62ch; color: #e7edf6; margin: 0 0 18px; font-size: 17px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 18px; }
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; max-width: 520px; }
.stat-box {
 padding: 14px 14px 12px;
 border-radius: 16px;
 background: rgba(8,12,20,.55);
 border: 1px solid var(--line);
}
.stat-box b { display: block; font-size: 24px; letter-spacing: -.03em; color: var(--gold-2); }
.stat-box span { color: var(--muted); font-size: 13px; }
.slot-panel {
 background: rgba(10, 16, 30, .86);
 border: 1px solid var(--line);
 border-radius: 28px;
 box-shadow: var(--shadow);
 padding: 18px;
 backdrop-filter: blur(10px);
}
.slot-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 14px; }
.slot-head h2 { margin: 0; font-size: 22px; letter-spacing: -.03em; }
.slot-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.slot-btn {
 text-align: left;
 border-radius: 16px;
 padding: 12px;
 background: #121b2c;
 color: var(--text);
 border: 1px solid var(--line);
}
.slot-btn small { display: block; color: var(--muted); font-weight: 600; }
.slot-btn strong { display: block; font-size: 18px; }
.slot-btn.is-on, .slot-btn[aria-pressed="true"] {
 background: linear-gradient(180deg, rgba(240,180,41,.2), rgba(240,180,41,.08));
 border-color: rgba(240,180,41,.7);
 color: var(--gold-2);
}
.slot-btn:hover { transform: translateY(-2px); }
.slot-note {
 margin: 14px 0 0;
 padding: 14px;
 border-radius: 16px;
 background: #10192b;
 border: 1px solid var(--line);
 color: #e7edf6;
}
.slot-cover {
 margin-top: 12px;
 border-radius: 18px;
 overflow: hidden;
 position: relative;
 min-height: 180px;
}
.slot-cover img { width: 100%; height: 210px; object-fit: cover; }
.slot-cover span {
 position: absolute;
 left: 12px;
 bottom: 12px;
}
.rank-list { display: grid; gap: 12px; }
.rank-row {
 display: grid;
 grid-template-columns: 72px 1.5fr .9fr .8fr 140px;
 gap: 12px;
 align-items: center;
 padding: 14px;
 border-radius: 18px;
 background: var(--card);
 border: 1px solid var(--line);
}
.rank-row:hover { border-color: rgba(240,180,41,.45); transform: translateY(-2px); transition: .2s ease; }
.rank-no {
 width: 52px;
 height: 52px;
 border-radius: 16px;
 display: grid;
 place-items: center;
 background: #10192b;
 color: var(--gold-2);
 font-weight: 800;
 font-size: 20px;
}
.rank-row h3 { margin: 0 0 2px; font-size: 18px; }
.rank-row p { margin: 0; color: var(--muted); font-size: 14px; }
.meter { height: 8px; border-radius: 999px; background: #0d1524; overflow: hidden; }
.meter span { display: block; height: 100%; background: linear-gradient(90deg, var(--heat), var(--gold)); }
.masonry { columns: 3; column-gap: 16px; }
.cover-card {
 break-inside: avoid;
 margin: 0 0 16px;
 position: relative;
 border-radius: 24px;
 overflow: hidden;
 background: var(--card);
 border: 1px solid var(--line);
 box-shadow: var(--shadow);
}
.cover-card img { width: 100%; object-fit: cover; transition: transform .45s ease; }
.cover-card.tall img { height: 460px; }
.cover-card.mid img { height: 340px; }
.cover-card.short img { height: 250px; }
.cover-card:hover img { transform: scale(1.05); }
.cover-shade {
 position: absolute;
 inset: 0;
 background: linear-gradient(180deg, rgba(0,0,0,.05) 20%, rgba(6,10,18,.88) 100%);
}
.cover-body { position: absolute; left: 14px; right: 14px; bottom: 14px; }
.cover-body h3 { margin: 8px 0 4px; font-size: 22px; }
.cover-body p { margin: 0; color: #e6edf7; font-size: 14px; }
.media-dot {
 position: absolute;
 top: 14px;
 right: 14px;
 width: 46px;
 height: 46px;
 border-radius: 50%;
 background: var(--heat);
 color: white;
 box-shadow: 0 0 0 8px rgba(255,90,60,.18);
}
.clock-grid, .hall-grid, .join-grid { display: grid; gap: 22px; }
.clock-grid { grid-template-columns: .8fr 1.2fr; align-items: start; }
.clock-side {
 position: sticky;
 top: 96px;
 padding: 8px 8px 0 0;
}
.clock-photo {
 margin-top: 18px;
 border-radius: 24px;
 overflow: hidden;
 border: 1px solid var(--line);
 min-height: 220px;
}
.clock-photo img { width: 100%; height: 280px; object-fit: cover; }
.hall-grid { grid-template-columns: .9fr 1.1fr; align-items: stretch; }
.hall-photo {
 border-radius: 28px;
 overflow: hidden;
 min-height: 100%;
 position: relative;
 border: 1px solid var(--line);
}
.hall-photo img { width: 100%; height: 100%; min-height: 520px; object-fit: cover; }
.hall-photo figcaption {
 position: absolute;
 left: 16px;
 right: 16px;
 bottom: 16px;
 padding: 14px;
 border-radius: 16px;
 background: rgba(7,12,22,.78);
}
.hall-rows { display: grid; gap: 12px; }
.hall-row {
 display: grid;
 grid-template-columns: 92px 1fr auto;
 gap: 14px;
 align-items: center;
 padding: 16px;
 border-radius: 18px;
 background: var(--card);
 border: 1px solid var(--line);
}
.hall-row:hover { border-color: rgba(62,224,162,.45); }
.hall-row h3 { margin: 0 0 4px; font-size: 18px; }
.hall-row p { margin: 0; color: var(--muted); }
.rule-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.rule-item {
 display: grid;
 grid-template-columns: auto 1fr;
 gap: 14px;
 padding: 18px;
 border-radius: 20px;
 background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
 border: 1px solid var(--line);
}
.rule-item b {
 width: 46px;
 height: 46px;
 border-radius: 14px;
 display: grid;
 place-items: center;
 background: rgba(240,180,41,.14);
 color: var(--gold-2);
}
.rule-item h3 { margin: 0 0 4px; font-size: 18px; }
.rule-item p { margin: 0; color: var(--muted); }
.voice-rail {
 display: grid;
 grid-auto-flow: column;
 grid-auto-columns: minmax(280px, 34%);
 gap: 14px;
 overflow-x: auto;
 padding-bottom: 10px;
 scroll-snap-type: x mandatory;
}
.quote-card {
 scroll-snap-align: start;
 padding: 18px;
 border-radius: 22px;
 background: #121b2d;
 border: 1px solid var(--line);
 min-height: 230px;
}
.quote-card header { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.quote-card img { width: 54px; height: 54px; border-radius: 16px; object-fit: cover; }
.quote-card h3 { margin: 0; font-size: 16px; }
.quote-card p { margin: 0; color: #e7edf6; }
.stars { color: var(--gold); letter-spacing: .08em; font-size: 12px; }
.news-list { display: grid; gap: 12px; }
.news-item {
 display: grid;
 grid-template-columns: 168px 1fr auto;
 gap: 16px;
 align-items: center;
 padding: 10px;
 border-radius: 20px;
 background: var(--card);
 border: 1px solid var(--line);
}
.news-item img { width: 168px; height: 112px; object-fit: cover; border-radius: 14px; }
.news-item h3 { margin: 0 0 4px; font-size: 18px; }
.news-item p { margin: 0; color: var(--muted); }
.join-band {
 background:
  linear-gradient(90deg, rgba(7,12,22,.92), rgba(7,12,22,.72)),
  url("/assets/images/dd42be46a3c38c9a.webp") center / cover no-repeat;
}
.join-grid { grid-template-columns: 1.05fr .95fr; align-items: center; }
.join-form {
 background: rgba(12,18,32,.9);
 border: 1px solid var(--line);
 border-radius: 28px;
 padding: 18px;
 box-shadow: var(--shadow);
}
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field.full { grid-column: 1 / -1; }
.field span { font-size: 13px; font-weight: 700; color: var(--gold-2); }
.field input, .field select {
 width: 100%;
 min-height: 48px;
 border-radius: 14px;
 border: 1px solid var(--line);
 background: #0e1728;
 color: var(--text);
 padding: 0 14px;
}
.field input:focus, .field select:focus { border-color: var(--gold); }
.form-note {
 margin-top: 12px;
 padding: 12px 14px;
 border-radius: 14px;
 background: rgba(62,224,162,.12);
 color: var(--mint);
 font-weight: 700;
}
.float-bar {
 position: fixed;
 left: 50%;
 bottom: 16px;
 transform: translateX(-50%);
 z-index: 40;
 width: min(720px, calc(100% - 20px));
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 12px;
 padding: 10px 10px 10px 16px;
 border-radius: 999px;
 background: rgba(8, 12, 22, .92);
 border: 1px solid var(--line);
 box-shadow: var(--shadow);
 backdrop-filter: blur(14px);
}
.float-bar strong { display: block; font-size: 14px; }
.float-bar p { margin: 0; color: var(--muted); font-size: 13px; }
@media (min-width: 1200px) {
 #mainNav.collapse { display: flex !important; align-items: center; gap: 10px; visibility: visible; }
}
@media (max-width: 1199.98px) {
 .nav-wrap { flex-wrap: wrap; padding: 10px 0; }
 .nav-toggle { display: inline-flex; margin-left: auto; }
 #mainNav.collapse { width: 100%; }
 #mainNav.collapse.show { display: block; }
 .nav-menu { flex-direction: column; align-items: stretch; padding: 8px 0 12px; }
 .nav-menu a { justify-content: flex-start; }
 .nav-tools { padding-bottom: 12px; }
}
@media (max-width: 1024px) {
 .offer-hero-grid, .clock-grid, .hall-grid, .join-grid, .rule-grid { grid-template-columns: 1fr; }
 .clock-side { position: static; }
 .masonry { columns: 2; }
 .rank-row { grid-template-columns: 64px 1fr auto; }
 .rank-row .hide-md { display: none; }
 .hall-photo img { min-height: 320px; }
 .news-item { grid-template-columns: 140px 1fr; }
 .news-item .hide-md { display: none; }
}
@media (max-width: 768px) {
 .stat-row, .form-grid, .slot-grid { grid-template-columns: 1fr; }
 .rank-row, .hall-row, .news-item, .time-list li { grid-template-columns: 1fr; }
 .news-item img { width: 100%; height: 180px; }
 .foot-grid { flex-direction: column; }
 .offer-copy h1 { max-width: none; }
 .masonry { columns: 1; }
 .cover-card.tall img, .cover-card.mid img, .cover-card.short img { height: 360px; }
}
@media (max-width: 520px) {
 .container { width: min(var(--max), calc(100% - 20px)); }
 .logo { min-width: 0; }
 .logo strong { font-size: 13px; }
 .float-bar { border-radius: 20px; align-items: flex-start; flex-direction: column; }
 .hero-actions .btn-gold, .hero-actions .btn-ghost, .float-bar .btn-gold { width: 100%; }
 .slot-cover img { height: 180px; }
}
@media (prefers-reduced-motion: reduce) {
 html { scroll-behavior: auto; }
 .cover-card img, .btn-gold, .rank-row, .slot-btn { transition: none; }
}

/* roulang page: category5 */
:root {
  --bg: #0b1220;
  --bg-2: #10192b;
  --bg-3: #182338;
  --card: #162033;
  --ink: #071018;
  --text: #f6f3ec;
  --muted: #b7c3d4;
  --gold: #f0b429;
  --gold-2: #ffd978;
  --heat: #ff5a3c;
  --mint: #3ee0a2;
  --line: rgba(246, 243, 236, .12);
  --shadow: 0 18px 50px rgba(0, 0, 0, .35);
  --radius: 22px;
  --radius-sm: 14px;
  --space: clamp(52px, 7vw, 92px);
  --max: 1180px;
}
/* roulang page: category5 */
html { scroll-behavior: smooth; }
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  background:
    radial-gradient(900px 420px at 90% -10%, rgba(240, 180, 41, .12), transparent 55%),
    var(--bg);
  color: var(--text);
  font-family: "Be Vietnam Pro", sans-serif;
  font-size: 16px;
  line-height: 1.65;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; height: auto; }
button, input, select, textarea { font-family: inherit; }
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid rgba(240, 180, 41, .75);
  outline-offset: 3px;
}
.container { width: min(var(--max), calc(100% - 32px)); margin: 0 auto; }
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(7, 12, 22, .88);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line);
}
.nav-wrap {
  min-height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.logo {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 180px;
}
.logo strong {
  font-size: 15px;
  letter-spacing: .01em;
  line-height: 1.2;
}
.logo span {
  color: var(--gold);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.nav-toggle {
  display: none;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: #121b2d;
  color: var(--text);
  align-items: center;
  justify-content: center;
}
#mainNav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  flex: 1;
}
.nav-menu {
  display: flex;
  align-items: center;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.nav-menu a {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 10px;
  border-radius: 999px;
  color: var(--muted);
  font-size: 13.5px;
  font-weight: 600;
}
.nav-menu a:hover { color: var(--text); background: rgba(255,255,255,.05); }
.nav-menu a.active, .nav-menu a:active {
  color: #1a1203;
  background: var(--gold);
}
.nav-tools { display: flex; align-items: center; gap: 10px; }
.lang-switch {
  display: inline-flex;
  padding: 3px;
  border-radius: 999px;
  background: #121b2d;
  border: 1px solid var(--line);
}
.lang-switch button {
  border: 0;
  background: transparent;
  color: var(--muted);
  border-radius: 999px;
  min-width: 42px;
  height: 32px;
  font-weight: 800;
  font-size: 12px;
  cursor: pointer;
}
.lang-switch button.on, .lang-switch button[aria-pressed="true"] {
  background: var(--text);
  color: #111;
}
.btn-nav, .btn-gold, .btn-ghost, .play-btn, .btn-line, .media-btn {
  border: 0;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
}
.btn-nav, .btn-gold, .media-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 16px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--gold-2), var(--gold));
  color: #1a1203;
  font-weight: 800;
  box-shadow: 0 8px 20px rgba(240, 180, 41, .25);
}
.btn-nav:hover, .btn-gold:hover, .media-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(240, 180, 41, .35); }
.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 18px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  color: var(--text);
  border: 1px solid var(--line);
  font-weight: 700;
}
.btn-ghost:hover, .btn-ghost:active { background: rgba(255,255,255,.16); }
.btn-line {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 14px;
  border-radius: 999px;
  background: transparent;
  color: var(--gold-2);
  border: 1px solid rgba(240, 180, 41, .4);
  font-weight: 700;
}
.btn-line:hover { background: rgba(240, 180, 41, .12); }
.hero-video {
  position: relative;
  min-height: 88vh;
  background:
    linear-gradient(180deg, rgba(6,10,18,.2) 0%, rgba(6,10,18,.72) 55%, rgba(7,12,22,1) 100%),
    url("/assets/images/c55b26848637ef10.jpg") center 30% / cover no-repeat;
  display: flex;
  align-items: flex-end;
}
.chip, .heat, .badge-soft {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
}
.chip { background: rgba(8, 12, 20, .62); border: 1px solid var(--line); }
.badge-soft { background: rgba(62, 224, 162, .12); color: var(--mint); }
.heat { background: rgba(255, 90, 60, .16); color: #ffc2b6; }
.heat.hot { background: var(--heat); color: #fff; }
main { display: block; }
.section-head { max-width: 760px; margin-bottom: 28px; }
.section-head h2, .split-copy h2, .brand-copy h2, .cta-copy h2 {
  font-size: clamp(28px, 3vw, 42px);
  line-height: 1.15;
  letter-spacing: -.03em;
  margin: 0 0 10px;
}
.section-lead { color: var(--muted); margin: 0; }
.kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--gold-2);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.time-list, .channel-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.channel-list a {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 14px;
  border-radius: 16px;
  background: #121b2c;
  border: 1px solid var(--line);
}
.channel-list a:hover { border-color: rgba(240, 180, 41, .55); transform: translateX(3px); }
.feature-split, .news-layout, .app-grid, .case-grid, .brand-grid, .cta-grid {
  display: grid;
  gap: 22px;
}
.app-mast {
  padding: 28px 0 var(--space);
}
.mast-grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 22px;
  align-items: stretch;
}
.mast-copy, .panel, .plan-card, .voice-card, .log-item, .func-row, .rank-board, .close-band {
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.mast-copy { padding: 32px; display: flex; flex-direction: column; justify-content: center; }
.mast-copy h1 {
  margin: 0 0 12px;
  font-size: clamp(34px, 4.4vw, 58px);
  line-height: 1.05;
  letter-spacing: -.04em;
}
.mast-copy p { color: var(--muted); margin: 0 0 18px; font-size: 17px; }
.chip-row, .hero-actions, .media-row { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
.stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.stat-row div {
  padding: 12px;
  border-radius: 16px;
  background: #10192b;
  border: 1px solid var(--line);
}
.stat-row strong { display: block; font-size: 22px; color: var(--gold-2); line-height: 1.1; }
.stat-row span { color: var(--muted); font-size: 12px; font-weight: 700; }
.mast-cover {
  position: relative;
  min-height: 520px;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  background:
    linear-gradient(180deg, rgba(7,12,22,.05), rgba(7,12,22,.78)),
    url("/assets/images/ec95e46acf487dc5.webp") center / cover no-repeat;
  box-shadow: var(--shadow);
}
.mast-cover img { width: 100%; height: 100%; object-fit: cover; min-height: 520px; }
.cover-note {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 16px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-end;
  padding: 14px;
  border-radius: 18px;
  background: rgba(7, 12, 22, .72);
  border: 1px solid var(--line);
  backdrop-filter: blur(10px);
}
.cover-note h2 { margin: 0 0 4px; font-size: 20px; }
.cover-note p { margin: 0; color: var(--muted); font-size: 13px; }
.app-func, .app-scenes, .app-posters, .app-rank, .app-plans, .app-voices, .app-log, .app-close {
  padding: 0 0 var(--space);
}
.func-layout {
  display: grid;
  grid-template-columns: .72fr 1.28fr;
  gap: 22px;
  align-items: start;
}
.func-stack { display: grid; gap: 12px; }
.func-row {
  display: grid;
  grid-template-columns: 58px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 16px 18px;
}
.func-row:hover { border-color: rgba(240, 180, 41, .45); transform: translateY(-2px); }
.func-ico {
  width: 58px;
  height: 58px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  background: rgba(240, 180, 41, .12);
  color: var(--gold-2);
  font-size: 20px;
}
.func-row h3 { margin: 0 0 4px; font-size: 18px; }
.func-row p { margin: 0; color: var(--muted); }
.scene-stack { display: grid; gap: 14px; }
.scene-wide, .scene-split { display: grid; gap: 14px; }
.scene-split { grid-template-columns: 1.35fr .65fr; }
.scene-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  min-height: 240px;
  border: 1px solid var(--line);
}
.scene-card img { width: 100%; height: 100%; object-fit: cover; min-height: 240px; }
.scene-card figcaption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 18px;
  background: linear-gradient(180deg, transparent, rgba(7,12,22,.92));
}
.scene-card h3 { margin: 0 0 4px; font-size: 22px; }
.scene-card p { margin: 0; color: #e7edf6; max-width: 62ch; }
.poster-masonry { columns: 3 220px; column-gap: 14px; }
.poster-card {
  break-inside: avoid;
  margin: 0 0 14px;
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--card);
}
.poster-card img { width: 100%; object-fit: cover; }
.poster-card.tall img { aspect-ratio: 3/4.3; }
.poster-card.mid img { aspect-ratio: 3/3.6; }
.poster-card.short img { aspect-ratio: 4/3.2; }
.poster-card:hover img { transform: scale(1.04); }
.poster-card img { transition: transform .35s ease; }
.poster-meta {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
}
.poster-meta strong { font-size: 14px; text-shadow: 0 8px 18px rgba(0,0,0,.6); }
.rank-board { padding: 8px; }
.rank-item {
  display: grid;
  grid-template-columns: 64px 1.2fr .8fr auto;
  gap: 12px;
  align-items: center;
  padding: 14px;
  border-radius: 16px;
}
.rank-item:hover { background: rgba(255,255,255,.04); }
.rank-no {
  width: 48px;
  height: 48px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: #10192b;
  color: var(--gold-2);
  font-weight: 800;
}
.rank-item h3 { margin: 0; font-size: 17px; }
.rank-item p { margin: 0; color: var(--muted); font-size: 13px; }
.meter { height: 8px; border-radius: 999px; background: #0d1524; overflow: hidden; }
.meter span { display: block; height: 100%; background: linear-gradient(90deg, var(--heat), var(--gold)); }
.plan-grid { display: grid; grid-template-columns: 1fr 1.08fr 1fr; gap: 16px; align-items: stretch; }
.plan-card { padding: 22px; display: flex; flex-direction: column; gap: 12px; }
.plan-card.featured {
  background:
    linear-gradient(180deg, rgba(240,180,41,.16), rgba(22,32,51,.92)),
    var(--card);
  border-color: rgba(240, 180, 41, .5);
}
.plan-card h3 { margin: 0; font-size: 24px; }
.plan-card .price { font-size: 32px; font-weight: 800; letter-spacing: -.03em; }
.plan-card ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; color: var(--muted); }
.plan-card li i { color: var(--mint); margin-right: 8px; }
.voice-wall { display: grid; grid-template-columns: 1.15fr .85fr; gap: 14px; }
.voice-col { display: grid; gap: 14px; }
.voice-card { padding: 20px; }
.voice-card.large { min-height: 100%; background:
  linear-gradient(180deg, rgba(7,12,22,.2), rgba(7,12,22,.78)),
  url("/assets/images/26a3a503016874a2.webp") center / cover no-repeat; }
.voice-card h3 { margin: 8px 0; font-size: 26px; line-height: 1.25; }
.voice-card p { margin: 0; color: #e8eef7; }
.who { margin-top: 14px; color: var(--gold-2); font-weight: 700; font-size: 14px; }
.log-list { display: grid; gap: 12px; }
.log-item {
  display: grid;
  grid-template-columns: 110px 92px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 16px 18px;
}
.log-item time { color: var(--gold-2); font-weight: 800; }
.log-item h3 { margin: 0 0 4px; font-size: 18px; }
.log-item p { margin: 0; color: var(--muted); }
.close-band {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 22px;
  padding: 22px;
  background:
    linear-gradient(100deg, rgba(7,12,22,.88), rgba(7,12,22,.72)),
    url("/assets/images/da306b69291a5bba.webp") center / cover no-repeat;
}
.cta-copy p { color: #e7edf6; }
.keep-form { display: grid; gap: 10px; }
.keep-form label { font-size: 13px; font-weight: 700; color: var(--gold-2); }
.keep-form input, .keep-form select {
  width: 100%;
  min-height: 48px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(8, 12, 20, .72);
  color: var(--text);
  padding: 0 14px;
}
.float-bar {
  position: fixed;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  z-index: 40;
  display: flex;
  gap: 8px;
  padding: 8px;
  border-radius: 999px;
  background: rgba(7, 12, 22, .88);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  backdrop-filter: blur(12px);
}
.float-bar a {
  min-height: 40px;
  padding: 0 14px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 800;
  font-size: 13px;
  color: var(--text);
}
.float-bar a:hover { background: rgba(255,255,255,.08); }
.float-bar .float-cta { background: linear-gradient(180deg, var(--gold-2), var(--gold)); color: #1a1203; }
.site-footer {
  background: #070c16;
  border-top: 1px solid var(--line);
  padding: 42px 0 92px;
}
.foot-grid {
  display: grid;
  grid-template-columns: 1.4fr .8fr;
  gap: 24px;
  margin-bottom: 18px;
  align-items: start;
}
.foot-links { display: flex; flex-wrap: wrap; gap: 10px 16px; justify-content: flex-end; }
.foot-links a { color: var(--muted); font-weight: 700; }
.foot-links a:hover { color: var(--gold-2); }
.copy { color: var(--muted); margin: 8px 0 0; }
@media (max-width: 1024px) {
  .nav-toggle { display: inline-flex; }
  #mainNav {
    display: none;
    position: absolute;
    left: 16px;
    right: 16px;
    top: 76px;
    flex-direction: column;
    align-items: stretch;
    padding: 12px;
    border-radius: 18px;
    background: #10192b;
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
  }
  #mainNav.show { display: flex; }
  .nav-menu { flex-direction: column; align-items: stretch; }
  .nav-tools { justify-content: space-between; }
  .mast-grid, .func-layout, .scene-split, .voice-wall, .close-band, .plan-grid, .foot-grid {
    grid-template-columns: 1fr;
  }
  .plan-card.featured { transform: none; }
  .rank-item, .log-item { grid-template-columns: 56px 1fr; }
  .rank-item .meter, .log-item .heat { grid-column: 2; }
}
@media (max-width: 768px) {
  .mast-copy { padding: 22px; }
  .mast-cover, .mast-cover img { min-height: 380px; }
  .stat-row { grid-template-columns: 1fr; }
  .func-row { grid-template-columns: 48px 1fr; }
  .func-row .heat { display: none; }
  .cover-note { flex-direction: column; align-items: flex-start; }
  .poster-masonry { columns: 2 140px; }
  .foot-links { justify-content: flex-start; }
}
@media (max-width: 520px) {
  .container { width: min(var(--max), calc(100% - 20px)); }
  .logo strong { font-size: 13px; }
  .mast-copy h1 { font-size: 34px; }
  .poster-masonry { columns: 1; }
  .float-bar { width: calc(100% - 20px); justify-content: space-between; }
  .hero-actions .btn-ghost, .hero-actions .btn-gold { width: 100%; }
}

/* roulang page: category6 */
:root {
 --bg: #0b1220;
 --bg-2: #10192b;
 --bg-3: #182338;
 --card: #162033;
 --ink: #071018;
 --text: #f6f3ec;
 --muted: #b7c3d4;
 --gold: #f0b429;
 --gold-2: #ffd978;
 --heat: #ff5a3c;
 --mint: #3ee0a2;
 --line: rgba(246, 243, 236, .12);
 --shadow: 0 18px 50px rgba(0, 0, 0, .35);
 --radius: 22px;
 --radius-sm: 14px;
 --space: clamp(52px, 7vw, 92px);
 --max: 1180px;
}
/* roulang page: index */
:root {
 --bg: #0b1220;
 --bg-2: #10192b;
 --bg-3: #182338;
 --card: #162033;
 --ink: #071018;
 --text: #f6f3ec;
 --muted: #b7c3d4;
 --gold: #f0b429;
 --gold-2: #ffd978;
 --heat: #ff5a3c;
 --mint: #3ee0a2;
 --line: rgba(246, 243, 236, .12);
 --shadow: 0 18px 50px rgba(0, 0, 0, .35);
 --radius: 22px;
 --radius-sm: 14px;
 --space: clamp(52px, 7vw, 92px);
 --max: 1180px;
}
html { scroll-behavior: smooth; }
body {
 margin: 0;
 background: var(--bg);
 color: var(--text);
 font-family: "Be Vietnam Pro", sans-serif;
 font-size: 16px;
 line-height: 1.65;
 text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; height: auto; }
button, input, select, textarea { font-family: inherit; }
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
 outline: 3px solid rgba(240, 180, 41, .75);
 outline-offset: 3px;
}
.container { width: min(var(--max), calc(100% - 32px)); margin: 0 auto; max-width: none; padding: 0; }
.site-header {
 position: sticky;
 top: 0;
 z-index: 50;
 background: rgba(7, 12, 22, .88);
 backdrop-filter: blur(16px);
 border-bottom: 1px solid var(--line);
}
.nav-wrap {
 min-height: 76px;
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 16px;
}
.logo {
 display: flex;
 flex-direction: column;
 gap: 0;
 min-width: 180px;
}
.logo strong {
 font-size: 15px;
 letter-spacing: .01em;
 line-height: 1.2;
}
.logo span {
 color: var(--gold);
 font-size: 11px;
 font-weight: 700;
 letter-spacing: .14em;
 text-transform: uppercase;
}
.nav-toggle {
 display: none;
 width: 46px;
 height: 46px;
 border-radius: 14px;
 border: 1px solid var(--line);
 background: #121b2d;
 color: var(--text);
 align-items: center;
 justify-content: center;
}
.nav-menu {
 display: flex;
 align-items: center;
 gap: 6px;
 list-style: none;
 margin: 0;
 padding: 0;
}
.nav-menu a {
 display: inline-flex;
 align-items: center;
 min-height: 38px;
 padding: 0 10px;
 border-radius: 999px;
 color: var(--muted);
 font-size: 13.5px;
 font-weight: 600;
}
.nav-menu a:hover { color: var(--text); background: rgba(255,255,255,.05); }
.nav-menu a.active, .nav-menu a:active {
 color: #1a1203;
 background: var(--gold);
}
.nav-tools { display: flex; align-items: center; gap: 10px; }
.lang-switch {
 display: inline-flex;
 padding: 4px;
 border-radius: 999px;
 background: #121b2d;
 border: 1px solid var(--line);
}
.lang-switch button {
 border: 0;
 background: transparent;
 color: var(--muted);
 border-radius: 999px;
 min-width: 42px;
 height: 32px;
 font-weight: 800;
 font-size: 12px;
}
.lang-switch button.on, .lang-switch button[aria-pressed="true"] {
 background: var(--text);
 color: #111;
}
.btn-nav, .btn-gold, .btn-ghost, .play-btn, .btn-line {
 border: 0;
 cursor: pointer;
 transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
}
.btn-nav, .btn-gold {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 gap: 8px;
 min-height: 42px;
 padding: 0 16px;
 border-radius: 999px;
 background: linear-gradient(180deg, var(--gold-2), var(--gold));
 color: #1a1203;
 font-weight: 800;
 box-shadow: 0 8px 20px rgba(240, 180, 41, .25);
}
.btn-nav:hover, .btn-gold:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(240, 180, 41, .35); }
.btn-gold:active, .btn-nav:active { transform: translateY(0); }
.btn-ghost {
 display: inline-flex;
 align-items: center;
 gap: 8px;
 min-height: 48px;
 padding: 0 18px;
 border-radius: 999px;
 background: rgba(255,255,255,.08);
 color: var(--text);
 border: 1px solid var(--line);
 font-weight: 700;
}
.btn-ghost:hover { background: rgba(255,255,255,.16); }
.hero-video {
 position: relative;
 min-height: 88vh;
 background:
 linear-gradient(180deg, rgba(6,10,18,.2) 0%, rgba(6,10,18,.72) 55%, rgba(7,12,22,1) 100%),
 url("/assets/images/c55b26848637ef10.jpg") center 30% / cover no-repeat;
 display: flex;
 align-items: flex-end;
}
.hero-video::after {
 content: "";
 position: absolute;
 inset: auto 0 0 0;
 height: 120px;
 background: linear-gradient(180deg, transparent, var(--bg));
 pointer-events: none;
}
.hero-layout {
 position: relative;
 z-index: 1;
 padding: 120px 0 54px;
 display: grid;
 grid-template-columns: auto 1fr;
 gap: 28px 36px;
 align-items: end;
}
.play-btn {
 width: 96px;
 height: 96px;
 border-radius: 50%;
 background: var(--heat);
 color: white;
 font-size: 28px;
 box-shadow: 0 0 0 12px rgba(255, 90, 60, .18);
 position: relative;
}
.play-btn::before {
 content: "";
 position: absolute;
 inset: -14px;
 border-radius: 50%;
 border: 1px solid rgba(255, 90, 60, .7);
 animation: pulse 1.8s ease-out infinite;
}
.play-btn:hover { transform: scale(1.05); }
.hero-lead { max-width: 68ch; color: #e7edf6; margin: 0 0 18px; font-size: 17px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 18px; }
.chip, .heat, .badge-soft {
 display: inline-flex;
 align-items: center;
 gap: 6px;
 min-height: 30px;
 padding: 0 10px;
 border-radius: 999px;
 font-size: 12px;
 font-weight: 800;
}
.chip { background: rgba(8, 12, 20, .62); border: 1px solid var(--line); }
.badge-soft { background: rgba(62, 224, 162, .12); color: var(--mint); }
.heat { background: rgba(255, 90, 60, .16); color: #ffb2a4; }
main { display: block; }
.section-head { max-width: 760px; margin-bottom: 28px; }
.section-head h2, .split-copy h2, .brand-copy h2, .cta-copy h2 {
 font-size: clamp(28px, 3vw, 42px);
 line-height: 1.15;
 letter-spacing: -.03em;
 margin: 0 0 10px;
}
.section-lead { color: var(--muted); margin: 0; }
.tile img { width: 100%; height: 100%; object-fit: cover; }
.time-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.time-list li {
 display: grid;
 grid-template-columns: 92px 1fr;
 gap: 14px;
 padding: 16px;
 border-radius: var(--radius-sm);
 background: rgba(255,255,255,.03);
 border: 1px solid var(--line);
}
.time-list strong { color: var(--gold-2); font-size: 13px; }
.time-list h3 { margin: 0 0 4px; font-size: 18px; }
.time-list p { margin: 0; color: var(--muted); }
.poster img { width: 100%; height: 100%; object-fit: cover; min-height: 460px; }
.feature-split, .news-layout, .app-grid, .case-grid, .brand-grid, .cta-grid {
 display: grid;
 gap: 22px;
}
.feature-split { grid-template-columns: 1.15fr .85fr; }
.spot img { width: 100%; height: 100%; object-fit: cover; min-height: 420px; }
.channel-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.channel-list a {
 display: grid;
 grid-template-columns: auto 1fr auto;
 gap: 12px;
 align-items: center;
 padding: 14px;
 border-radius: 16px;
 background: #121b2c;
 border: 1px solid var(--line);
}
.channel-list a:hover { border-color: rgba(240, 180, 41, .55); transform: translateY(-2px); }
.kicker {
 color: var(--gold);
 font-size: 12px;
 font-weight: 800;
 letter-spacing: .14em;
 text-transform: uppercase;
 margin: 0 0 10px;
}
h1 {
 font-size: clamp(36px, 5vw, 64px);
 line-height: 1.05;
 letter-spacing: -.04em;
 margin: 0 0 14px;
}
.site-footer {
 background: #070c16;
 border-top: 1px solid var(--line);
 padding: 42px 0 28px;
}
.foot-grid {
 display: flex;
 justify-content: space-between;
 gap: 24px;
 align-items: flex-start;
 padding-bottom: 18px;
}
.foot-links { display: flex; gap: 18px; flex-wrap: wrap; align-items: center; }
.foot-links a { color: var(--muted); font-weight: 700; }
.foot-links a:hover { color: var(--gold-2); }
.copy { color: var(--muted); margin: 8px 0 0; font-size: 14px; }
/* roulang page: category6 */
.log-hero {
 position: relative;
 padding: 54px 0 28px;
 background:
 linear-gradient(100deg, rgba(7,12,22,.92) 0%, rgba(7,12,22,.78) 48%, rgba(7,12,22,.55) 100%),
 url("/assets/images/ec95e46acf487dc5.webp") center 40% / cover no-repeat;
}
.log-hero::after {
 content: "";
 position: absolute;
 left: 0; right: 0; bottom: 0;
 height: 70px;
 background: linear-gradient(180deg, transparent, var(--bg));
 pointer-events: none;
}
.log-hero .container { position: relative; z-index: 1; }
.crumb { display: flex; gap: 8px; align-items: center; color: var(--muted); font-size: 13px; font-weight: 600; margin-bottom: 18px; }
.crumb a:hover { color: var(--gold-2); }
.hero-copy { max-width: 820px; }
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0; }
.workbench {
 display: grid;
 grid-template-columns: 1.05fr .95fr;
 gap: 22px;
 margin-top: 8px;
}
.panel {
 background: rgba(12, 18, 32, .86);
 border: 1px solid var(--line);
 border-radius: var(--radius);
 box-shadow: var(--shadow);
 padding: 22px;
}
.panel h2 { font-size: 22px; margin: 0 0 6px; letter-spacing: -.02em; }
.q-list { display: grid; gap: 14px; margin-top: 16px; }
.q-list fieldset { border: 1px solid var(--line); border-radius: 16px; margin: 0; padding: 12px; }
.q-list legend { font-size: 13px; font-weight: 800; padding: 0 6px; }
.choice-row { display: flex; flex-wrap: wrap; gap: 8px; }
.choice-row button {
 border: 1px solid var(--line);
 background: #121b2d;
 color: var(--text);
 border-radius: 999px;
 min-height: 36px;
 padding: 0 12px;
 font-weight: 700;
 font-size: 13px;
}
.choice-row button.on, .choice-row button[aria-pressed="true"] {
 background: var(--gold);
 color: #1a1203;
 border-color: transparent;
}
.choice-row button:hover { border-color: rgba(240,180,41,.5); }
.panel-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.result-card { display: grid; gap: 14px; }
.result-top { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.result-photo {
 border-radius: 16px;
 overflow: hidden;
 min-height: 180px;
 border: 1px solid var(--line);
}
.result-photo img { width: 100%; height: 210px; object-fit: cover; }
.result-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.result-meta div {
 background: rgba(255,255,255,.04);
 border: 1px solid var(--line);
 border-radius: 14px;
 padding: 10px 12px;
}
.result-meta span { display: block; color: var(--muted); font-size: 12px; font-weight: 700; }
.result-meta strong { font-size: 15px; }
.stat-band { padding: 10px 0 0; }
.stat-row {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 border: 1px solid var(--line);
 border-radius: var(--radius);
 overflow: hidden;
 background: var(--bg-2);
}
.stat-row article { padding: 22px 20px; border-right: 1px solid var(--line); }
.stat-row article:last-child { border-right: 0; }
.stat-row b { display: block; font-size: clamp(28px, 3vw, 40px); letter-spacing: -.04em; color: var(--gold-2); line-height: 1; }
.stat-row span { color: var(--muted); font-weight: 600; }
.band { padding: var(--space) 0; }
.band-alt { background: linear-gradient(180deg, rgba(16,25,43,.65), rgba(11,18,32,0)); }
.band-deep { background: var(--bg-2); }
.timeline { display: grid; gap: 0; position: relative; }
.timeline::before {
 content: "";
 position: absolute;
 left: 108px;
 top: 8px;
 bottom: 8px;
 width: 1px;
 background: rgba(240,180,41,.35);
}
.t-item {
 display: grid;
 grid-template-columns: 92px 32px 1fr;
 gap: 14px;
 align-items: start;
 padding: 8px 0 18px;
}
.t-time { color: var(--gold-2); font-weight: 800; font-size: 14px; padding-top: 12px; }
.t-dot {
 width: 14px;
 height: 14px;
 border-radius: 50%;
 background: var(--gold);
 margin: 16px auto 0;
 box-shadow: 0 0 0 6px rgba(240,180,41,.15);
}
.t-body {
 background: var(--card);
 border: 1px solid var(--line);
 border-radius: 18px;
 padding: 16px 18px;
}
.t-body h3 { margin: 0 0 6px; font-size: 18px; }
.t-body p { margin: 0; color: var(--muted); }
.t-tags { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.filter-bar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.filter-bar button {
 border: 1px solid var(--line);
 background: transparent;
 color: var(--muted);
 border-radius: 999px;
 min-height: 36px;
 padding: 0 14px;
 font-weight: 800;
 font-size: 13px;
}
.filter-bar button.on { background: var(--text); color: #111; border-color: transparent; }
.rank-list { display: grid; gap: 12px; }
.rank-row {
 display: grid;
 grid-template-columns: 52px 1.3fr .9fr 120px;
 gap: 14px;
 align-items: center;
 padding: 14px;
 border-radius: 18px;
 background: #121b2c;
 border: 1px solid var(--line);
}
.rank-row:hover { border-color: rgba(240,180,41,.45); transform: translateY(-2px); transition: .2s ease; }
.rank-no {
 width: 42px;
 height: 42px;
 border-radius: 14px;
 display: grid;
 place-items: center;
 background: rgba(240,180,41,.14);
 color: var(--gold-2);
 font-weight: 800;
}
.rank-row h3 { margin: 0; font-size: 17px; }
.rank-row p { margin: 0; color: var(--muted); font-size: 13px; }
.meter { height: 8px; border-radius: 99px; background: rgba(255,255,255,.08); overflow: hidden; }
.meter i { display: block; height: 100%; background: linear-gradient(90deg, var(--gold), var(--heat)); border-radius: inherit; }
.rank-score { text-align: right; font-weight: 800; color: var(--gold-2); }
.verify-grid, .app-grid {
 display: grid;
 grid-template-columns: .92fr 1.08fr;
 gap: 28px;
 align-items: center;
}
.frame {
 border-radius: 26px;
 overflow: hidden;
 min-height: 360px;
 border: 1px solid var(--line);
 box-shadow: var(--shadow);
 position: relative;
}
.frame img { width: 100%; height: 100%; min-height: 360px; object-fit: cover; }
.frame figcaption {
 position: absolute;
 left: 14px; right: 14px; bottom: 14px;
 background: rgba(7,12,22,.78);
 border-radius: 14px;
 padding: 10px 12px;
 font-size: 13px;
}
.note-stack { display: grid; gap: 12px; margin-top: 16px; }
.note-stack article {
 display: grid;
 grid-template-columns: 46px 1fr;
 gap: 12px;
 align-items: start;
 padding: 12px;
 border-radius: 16px;
 background: rgba(255,255,255,.03);
 border: 1px solid var(--line);
}
.note-stack i {
 width: 46px;
 height: 46px;
 border-radius: 14px;
 display: grid;
 place-items: center;
 background: rgba(240,180,41,.12);
 color: var(--gold-2);
}
.note-stack h3 { margin: 0 0 4px; font-size: 16px; }
.note-stack p { margin: 0; color: var(--muted); font-size: 14px; }
.shift-rail { display: grid; grid-template-columns: 1.2fr .8fr; gap: 22px; }
.shift-line { display: grid; gap: 0; }
.shift-stop {
 display: grid;
 grid-template-columns: 120px 1fr;
 gap: 16px;
 padding: 18px 0;
 border-top: 1px solid var(--line);
}
.shift-stop:first-child { border-top: 0; padding-top: 0; }
.shift-stop b { color: var(--gold-2); }
.shift-stop h3 { margin: 0 0 4px; font-size: 20px; }
.shift-stop p { margin: 0; color: var(--muted); }
.side-note {
 background:
 linear-gradient(180deg, rgba(11,18,32,.2), rgba(11,18,32,.78)),
 url("/assets/images/da306b69291a5bba.webp") center / cover no-repeat;
 border-radius: var(--radius);
 min-height: 100%;
 padding: 22px;
 border: 1px solid var(--line);
 display: flex;
 flex-direction: column;
 justify-content: flex-end;
}
.side-note h3 { margin: 8px 0; font-size: 28px; letter-spacing: -.03em; }
.app-grid { grid-template-columns: 1.05fr .95fr; }
.app-points { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 10px; }
.app-points li {
 display: flex;
 gap: 10px;
 align-items: flex-start;
 padding: 12px 14px;
 border-radius: 16px;
 background: #121b2c;
 border: 1px solid var(--line);
}
.app-points i { color: var(--mint); margin-top: 3px; }
.feed-layout { display: grid; grid-template-columns: 1.25fr .75fr; gap: 18px; }
.lead-story {
 position: relative;
 min-height: 420px;
 border-radius: 26px;
 overflow: hidden;
 border: 1px solid var(--line);
}
.lead-story img { width: 100%; height: 100%; object-fit: cover; min-height: 420px; }
.lead-story div {
 position: absolute;
 inset: auto 0 0 0;
 padding: 22px;
 background: linear-gradient(180deg, transparent, rgba(6,10,18,.92));
}
.lead-story h3 { margin: 8px 0; font-size: 28px; letter-spacing: -.03em; }
.story-list { display: grid; gap: 12px; }
.story-item {
 display: grid;
 grid-template-columns: 108px 1fr;
 gap: 12px;
 padding: 10px;
 border-radius: 18px;
 background: var(--card);
 border: 1px solid var(--line);
}
.story-item img { width: 108px; height: 92px; object-fit: cover; border-radius: 12px; }
.story-item h3 { margin: 0 0 4px; font-size: 16px; }
.story-item p { margin: 0; color: var(--muted); font-size: 13px; }
.log-faq .accordion-item {
 background: transparent;
 color: var(--text);
 border: 1px solid var(--line) !important;
 border-radius: 16px !important;
 overflow: hidden;
 margin-bottom: 12px;
}
.log-faq .accordion-button {
 background: #121b2c;
 color: var(--text);
 font-weight: 750;
 font-weight: 700;
 box-shadow: none;
 padding: 16px 18px;
}
.log-faq .accordion-button:not(.collapsed) {
 background: #1c283d;
 color: var(--gold-2);
}
.log-faq .accordion-button:focus { box-shadow: none; }
.log-faq .accordion-button::after { filter: invert(1) grayscale(1) brightness(2); }
.log-faq .accordion-body { background: #10192b; color: var(--muted); }
.cta-band {
 position: relative;
 padding: var(--space) 0;
 background:
 linear-gradient(90deg, rgba(7,12,22,.92), rgba(7,12,22,.72)),
 url("/assets/images/6e4b155d48f5c09c.webp") center / cover no-repeat;
}
.cta-grid { grid-template-columns: 1.1fr .9fr; align-items: center; }
.watch-form { display: grid; gap: 12px; }
.watch-form label { display: grid; gap: 6px; font-size: 13px; font-weight: 700; color: var(--muted); }
.watch-form input, .watch-form select {
 width: 100%;
 min-height: 48px;
 border-radius: 14px;
 border: 1px solid var(--line);
 background: rgba(8,12,20,.72);
 color: var(--text);
 padding: 0 14px;
}
.form-note {
 margin: 0;
 padding: 12px 14px;
 border-radius: 14px;
 background: rgba(62,224,162,.12);
 color: var(--mint);
 font-weight: 700;
}
@media (max-width: 1100px) {
 .nav-toggle { display: inline-flex; }
 .nav-wrap { flex-wrap: wrap; padding: 12px 0; }
 #mainNav.collapse.show { display: block; width: 100%; padding-bottom: 12px; }
 .nav-menu { flex-direction: column; align-items: stretch; gap: 4px; }
 .nav-menu a { justify-content: space-between; }
 .nav-tools { margin-top: 10px; justify-content: space-between; }
}
@media (min-width: 1101px) {
 #mainNav.collapse { display: flex !important; align-items: center; gap: 12px; height: auto !important; }
 .nav-menu { flex: 1; justify-content: flex-end; }
}
@media (max-width: 1024px) {
 .workbench, .verify-grid, .app-grid, .shift-rail, .feed-layout, .cta-grid, .feature-split { grid-template-columns: 1fr; }
 .timeline::before { left: 18px; }
 .t-item { grid-template-columns: 72px 1fr; }
 .t-dot { display: none; }
 .rank-row { grid-template-columns: 46px 1fr auto; }
 .rank-row .meter { display: none; }
 .stat-row { grid-template-columns: 1fr 1fr; }
 .stat-row article:nth-child(odd) { border-right: 1px solid var(--line); }
 .stat-row article:nth-child(2) { border-right: 0; }
 .lead-story, .lead-story img, .frame, .frame img { min-height: 280px; }
}
@media (max-width: 768px) {
 .foot-grid { flex-direction: column; }
 .hero-actions, .panel-actions { align-items: stretch; }
 .btn-gold, .btn-ghost { width: 100%; }
 .result-meta, .shift-stop, .story-item { grid-template-columns: 1fr; }
 .story-item img { width: 100%; height: 160px; }
 .rank-row { grid-template-columns: 42px 1fr; }
 .rank-score { grid-column: 2; text-align: left; }
 h1 { font-size: 34px; }
}
@media (max-width: 520px) {
 .container { width: min(var(--max), calc(100% - 20px)); }
 .logo { min-width: 0; max-width: calc(100% - 64px); }
 .logo strong { font-size: 13px; }
 .stat-row { grid-template-columns: 1fr; }
 .stat-row article { border-right: 0; border-bottom: 1px solid var(--line); }
 .t-item { grid-template-columns: 64px 1fr; gap: 8px; }
 .panel { padding: 16px; }
 .chip { font-size: 11px; }
}
@keyframes pulse {
 from { transform: scale(.92); opacity: .8; }
 to { transform: scale(1.08); opacity: 0; }
}

/* roulang page: category7 */
:root {
 --bg: #0b1220;
 --bg-2: #10192b;
 --bg-3: #182338;
 --card: #162033;
 --ink: #071018;
 --text: #f6f3ec;
 --muted: #b7c3d4;
 --gold: #f0b429;
 --gold-2: #ffd978;
 --heat: #ff5a3c;
 --mint: #3ee0a2;
 --line: rgba(246, 243, 236, .12);
 --shadow: 0 18px 50px rgba(0, 0, 0, .35);
 --radius: 22px;
 --radius-sm: 14px;
 --space: clamp(52px, 7vw, 92px);
 --max: 1180px;
}
/* roulang page: category7 */
:root {
 --bg: #0b1220;
 --bg-2: #10192b;
 --bg-3: #182338;
 --card: #162033;
 --ink: #071018;
 --text: #f6f3ec;
 --muted: #b7c3d4;
 --gold: #f0b429;
 --gold-2: #ffd978;
 --heat: #ff5a3c;
 --mint: #3ee0a2;
 --line: rgba(246, 243, 236, .12);
 --shadow: 0 18px 50px rgba(0, 0, 0, .35);
 --radius: 22px;
 --radius-sm: 14px;
 --space: clamp(52px, 7vw, 92px);
 --max: 1180px;
}
html { scroll-behavior: smooth; }
body {
 margin: 0;
 background: var(--bg);
 color: var(--text);
 font-family: "Be Vietnam Pro", sans-serif;
 font-size: 16px;
 line-height: 1.65;
 text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; height: auto; }
button, input, select, textarea { font-family: inherit; }
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
 outline: 3px solid rgba(240, 180, 41, .75);
 outline-offset: 3px;
}
::selection { background: var(--gold); color: #1a1203; }
.container { width: min(var(--max), calc(100% - 32px)); margin: 0 auto; }
.site-header {
 position: sticky;
 top: 0;
 z-index: 50;
 background: rgba(7, 12, 22, .88);
 backdrop-filter: blur(16px);
 border-bottom: 1px solid var(--line);
}
.nav-wrap {
 min-height: 76px;
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 16px;
}
.logo {
 display: flex;
 flex-direction: column;
 gap: 0;
 min-width: 180px;
}
.logo strong {
 font-size: 15px;
 letter-spacing: .01em;
 line-height: 1.2;
}
.logo span {
 color: var(--gold);
 font-size: 11px;
 font-weight: 700;
 letter-spacing: .14em;
 text-transform: uppercase;
}
.nav-toggle {
 display: none;
 width: 46px;
 height: 46px;
 border-radius: 14px;
 border: 1px solid var(--line);
 background: #121b2d;
 color: var(--text);
 align-items: center;
 justify-content: center;
}
#mainNav.collapse {
 display: flex;
 align-items: center;
 justify-content: flex-end;
 gap: 16px;
 flex: 1;
 height: auto;
 visibility: visible;
}
.nav-menu {
 display: flex;
 align-items: center;
 gap: 6px;
 list-style: none;
 margin: 0;
 padding: 0;
 flex-wrap: wrap;
 justify-content: flex-end;
}
.nav-menu a {
 display: inline-flex;
 align-items: center;
 min-height: 38px;
 padding: 0 10px;
 border-radius: 999px;
 color: var(--muted);
 font-size: 13.5px;
 font-weight: 600;
}
.nav-menu a:hover { color: var(--text); background: rgba(255,255,255,.05); }
.nav-menu a.active, .nav-menu a:active {
 color: #1a1203;
 background: var(--gold);
}
.nav-tools { display: flex; align-items: center; gap: 10px; }
.lang-switch {
 display: flex;
 padding: 4px;
 border-radius: 999px;
 background: #121b2d;
 border: 1px solid var(--line);
}
.lang-switch button {
 border: 0;
 background: transparent;
 color: var(--muted);
 border-radius: 999px;
 min-width: 42px;
 height: 32px;
 font-weight: 800;
 font-size: 12px;
 cursor: pointer;
}
.lang-switch button.on, .lang-switch button[aria-pressed="true"] {
 background: var(--text);
 color: #111;
}
.btn-nav, .btn-gold, .btn-ghost, .play-btn, .btn-line {
 border: 0;
 cursor: pointer;
 transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
}
.btn-nav, .btn-gold {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 gap: 8px;
 min-height: 42px;
 padding: 0 16px;
 border-radius: 999px;
 background: linear-gradient(180deg, var(--gold-2), var(--gold));
 color: #1a1203;
 font-weight: 800;
 box-shadow: 0 8px 20px rgba(240, 180, 41, .25);
}
.btn-nav:hover, .btn-gold:hover, .btn-nav:focus-visible, .btn-gold:focus-visible { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(240, 180, 41, .35); }
.btn-nav:active, .btn-gold:active { transform: translateY(0); }
.btn-ghost {
 display: inline-flex;
 align-items: center;
 gap: 8px;
 min-height: 48px;
 padding: 0 18px;
 border-radius: 999px;
 background: rgba(255,255,255,.08);
 color: var(--text);
 border: 1px solid var(--line);
 font-weight: 700;
}
.btn-ghost:hover, .btn-ghost:focus-visible { background: rgba(255,255,255,.16); }
.btn-ghost:active { transform: translateY(1px); }
.btn-line {
 display: inline-flex;
 align-items: center;
 gap: 8px;
 color: var(--gold-2);
 font-weight: 700;
 background: transparent;
 padding: 0;
}
.btn-line:hover { color: var(--text); }
.hero-video {
 position: relative;
 min-height: 88vh;
 background:
 linear-gradient(180deg, rgba(6,10,18,.2) 0%, rgba(6,10,18,.72) 55%, rgba(7,12,22,1) 100%),
 url("/assets/images/c55b26848637ef10.jpg") center 30% / cover no-repeat;
 display: flex;
 align-items: flex-end;
}
.hero-video::after {
 content: "";
 position: absolute;
 inset: auto 0 0 0;
 height: 120px;
 background: linear-gradient(180deg, transparent, var(--bg));
 pointer-events: none;
}
.hero-layout {
 position: relative;
 z-index: 1;
 padding: 120px 0 54px;
 display: grid;
 grid-template-columns: auto 1fr;
 gap: 28px 36px;
 align-items: end;
}
.play-btn {
 width: 96px;
 height: 96px;
 border-radius: 50%;
 background: var(--heat);
 color: white;
 font-size: 28px;
 box-shadow: 0 0 0 12px rgba(255, 90, 60, .18);
 position: relative;
}
.play-btn::before {
 content: "";
 position: absolute;
 inset: -14px;
 border-radius: 50%;
 border: 1px solid rgba(255, 90, 60, .7);
 animation: pulse 1.8s ease-out infinite;
}
.play-btn:hover { transform: scale(1.05); }
@keyframes pulse {
 from { transform: scale(.86); opacity: .9; }
 to { transform: scale(1.18); opacity: 0; }
}
.hero-lead { max-width: 68ch; color: #e7edf6; margin: 0 0 18px; font-size: 17px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 18px; }
.chip, .heat, .badge-soft {
 display: inline-flex;
 align-items: center;
 gap: 6px;
 min-height: 30px;
 padding: 0 10px;
 border-radius: 999px;
 font-size: 12px;
 font-weight: 800;
}
.chip { background: rgba(8, 12, 20, .62); border: 1px solid var(--line); }
.badge-soft { background: rgba(62, 224, 162, .12); color: var(--mint); }
.heat { background: rgba(255, 90, 60, .16); color: #ffb2a4; }
main { display: block; }
.section-head { max-width: 760px; margin-bottom: 28px; }
.section-head h2, .split-copy h2, .brand-copy h2, .cta-copy h2, .issue-copy h2, .ticket-copy h2 {
 font-size: clamp(28px, 3vw, 42px);
 line-height: 1.15;
 letter-spacing: -.03em;
 margin: 0 0 10px;
}
.section-lead { color: var(--muted); margin: 0; }
.kicker {
 display: inline-flex;
 align-items: center;
 gap: 8px;
 color: var(--gold-2);
 font-size: 12px;
 font-weight: 800;
 letter-spacing: .12em;
 text-transform: uppercase;
 margin-bottom: 10px;
}
.tile img, .spot img, .poster img { width: 100%; height: 100%; object-fit: cover; }
.poster img { min-height: 460px; }
.spot img { min-height: 420px; }
.time-list, .channel-list, .rank-list, .duty-list, .log-list, .faq-list { list-style: none; margin: 0; padding: 0; }
.time-list { display: grid; gap: 14px; }
.time-list li {
 display: grid;
 grid-template-columns: 92px 1fr;
 gap: 14px;
 padding: 16px;
 border-radius: var(--radius-sm);
 background: rgba(255,255,255,.03);
 border: 1px solid var(--line);
}
.time-list strong { color: var(--gold-2); font-size: 13px; }
.time-list h3, .channel-list h3, .rank-list h3, .fall-body h3, .duty-list h3 { margin: 0 0 4px; font-size: 18px; }
.time-list p, .channel-list p, .rank-list p { margin: 0; color: var(--muted); }
.feature-split, .news-layout, .app-grid, .case-grid, .brand-grid, .cta-grid, .issue-split, .priority-grid, .voice-grid, .ticket-grid {
 display: grid;
 gap: 22px;
}
.feature-split { grid-template-columns: 1.15fr .85fr; }
.channel-list { display: grid; gap: 10px; }
.channel-list a {
 display: grid;
 grid-template-columns: auto 1fr auto;
 gap: 12px;
 align-items: center;
 padding: 14px;
 border-radius: 16px;
 background: #121b2c;
 border: 1px solid var(--line);
}
.channel-list a:hover { border-color: rgba(240, 180, 41, .7); transform: translateY(-2px); }
.site-footer {
 background: #070c16;
 border-top: 1px solid var(--line);
 padding: 42px 0 28px;
}
.foot-grid {
 display: flex;
 justify-content: space-between;
 gap: 24px;
 align-items: flex-start;
 margin-bottom: 22px;
}
.foot-links { display: flex; flex-wrap: wrap; gap: 10px 16px; }
.foot-links a {
 color: var(--muted);
 font-weight: 700;
 min-height: 36px;
 display: inline-flex;
 align-items: center;
}
.foot-links a:hover { color: var(--gold-2); }
.copy { color: var(--muted); margin: 8px 0 0; }
.support-hero {
 position: relative;
 background:
 linear-gradient(100deg, rgba(7,12,22,.92) 8%, rgba(7,12,22,.72) 48%, rgba(7,12,22,.42) 100%),
 url("/assets/images/ec95e46acf487dc5.webp") center 40% / cover no-repeat;
}
.support-hero .hero-grid {
 display: grid;
 grid-template-columns: 1.15fr .85fr;
 gap: 28px;
 align-items: end;
 padding: 78px 0 64px;
}
.support-hero h1 {
 margin: 0 0 14px;
 font-size: clamp(36px, 5vw, 64px);
 line-height: 1.05;
 letter-spacing: -.04em;
 max-width: 14ch;
}
.squad {
 display: flex;
 flex-wrap: wrap;
 gap: 8px;
 margin-top: 8px;
}
.load-panel, .panel, .fall-card, .quote-card, .log-card, .ticket-form, .faq-list details {
 background: rgba(16, 25, 43, .88);
 border: 1px solid var(--line);
 border-radius: var(--radius);
 box-shadow: var(--shadow);
}
.load-panel { padding: 18px; backdrop-filter: blur(10px); }
.load-panel header, .panel header, .log-card header {
 display: flex;
 justify-content: space-between;
 gap: 12px;
 align-items: center;
 margin-bottom: 14px;
}
.load-panel strong, .panel strong { font-size: 18px; }
.load-row { margin-bottom: 14px; }
.load-row span { display: flex; justify-content: space-between; font-size: 13px; color: var(--muted); margin-bottom: 6px; }
.meter { height: 8px; border-radius: 99px; background: rgba(255,255,255,.08); overflow: hidden; }
.meter i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--heat), var(--gold)); }
.m86 { width: 86%; }
.m41 { width: 41%; }
.m23 { width: 23%; }
.m64 { width: 64%; }
.band { padding: var(--space) 0; }
.band-alt { background: var(--bg-2); }
.band-deep {
 background:
 linear-gradient(180deg, rgba(11,18,32,.88), rgba(11,18,32,.94)),
 url("/assets/images/da306b69291a5bba.webp") center / cover no-repeat;
}
.rank-list { display: grid; gap: 12px; }
.rank-list li, .duty-list li, .log-list li {
 display: grid;
 grid-template-columns: 72px 1fr auto;
 gap: 14px;
 align-items: center;
 padding: 16px 18px;
 border-radius: 18px;
 background: var(--card);
 border: 1px solid var(--line);
}
.rank-list li:hover, .duty-list li:hover, .fall-card:hover, .quote-card:hover {
 transform: translateY(-3px);
 border-color: rgba(240, 180, 41, .45);
 box-shadow: var(--shadow);
}
.rank-no {
 width: 56px;
 height: 56px;
 border-radius: 16px;
 display: grid;
 place-items: center;
 background: #10192b;
 color: var(--gold-2);
 font-weight: 800;
}
.rank-meta, .duty-meta { color: var(--muted); font-size: 14px; }
.issue-split { grid-template-columns: .9fr 1.1fr; align-items: center; }
.issue-photo {
 border-radius: var(--radius);
 overflow: hidden;
 min-height: 460px;
 border: 1px solid var(--line);
 box-shadow: var(--shadow);
 position: relative;
}
.issue-photo img { width: 100%; height: 100%; object-fit: cover; min-height: 460px; }
.issue-photo figcaption {
 position: absolute;
 left: 14px;
 bottom: 14px;
 right: 14px;
 padding: 12px 14px;
 border-radius: 16px;
 background: rgba(7,12,22,.78);
 border: 1px solid var(--line);
}
.issue-rows { display: grid; gap: 12px; margin-top: 18px; }
.issue-rows article {
 display: grid;
 grid-template-columns: auto 1fr;
 gap: 12px;
 padding: 14px;
 border-radius: 16px;
 background: rgba(255,255,255,.03);
 border: 1px solid var(--line);
}
.issue-rows i {
 width: 42px;
 height: 42px;
 border-radius: 12px;
 display: grid;
 place-items: center;
 background: rgba(240,180,41,.12);
 color: var(--gold-2);
}
.issue-rows h3 { margin: 0 0 4px; font-size: 17px; }
.issue-rows p { margin: 0; color: var(--muted); }
.sla-track {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 gap: 14px;
}
.sla-item {
 padding: 18px;
 border-radius: var(--radius);
 background: var(--card);
 border: 1px solid var(--line);
 min-height: 210px;
 position: relative;
}
.sla-item::after {
 content: "";
 position: absolute;
 top: 34px;
 right: -14px;
 width: 14px;
 height: 2px;
 background: rgba(240,180,41,.45);
}
.sla-item:last-child::after { display: none; }
.sla-item b { display: block; color: var(--gold-2); font-size: 28px; letter-spacing: -.04em; }
.sla-item h3 { margin: 10px 0 6px; font-size: 18px; }
.sla-item p { margin: 0; color: var(--muted); }
.fall-grid { columns: 2; column-gap: 18px; }
.fall-card {
 break-inside: avoid;
 margin: 0 0 18px;
 overflow: hidden;
 transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.fall-card img { width: 100%; object-fit: cover; }
.tall img { height: 460px; }
.mid img { height: 320px; }
.short img { height: 240px; }
.fall-body { padding: 16px 16px 18px; }
.fall-body p { margin: 0; color: var(--muted); }
.priority-grid { grid-template-columns: 1fr 1fr; }
.panel { padding: 18px; }
.duty-list { display: grid; gap: 10px; }
.duty-list li { grid-template-columns: 1fr auto; background: #10192b; }
.voice-grid { grid-template-columns: 1.15fr .85fr; align-items: start; }
.quote-card { padding: 22px; margin-bottom: 14px; }
.quote-card p { margin: 0 0 12px; font-size: 18px; line-height: 1.5; }
.quote-card cite { color: var(--gold-2); font-style: normal; font-weight: 700; font-size: 14px; }
.log-card { padding: 18px; }
.log-list { display: grid; gap: 10px; }
.log-list li { grid-template-columns: 64px 1fr; background: #10192b; padding: 12px; }
.log-list time { color: var(--gold-2); font-weight: 800; font-size: 13px; }
.faq-list { display: grid; gap: 10px; }
.faq-list details { padding: 0 18px; }
.faq-list summary {
 cursor: pointer;
 min-height: 62px;
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 12px;
 font-weight: 800;
 list-style: none;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; color: var(--gold); font-size: 22px; }
.faq-list details[open] summary::after { content: "–"; }
.faq-list details p { margin: 0 0 16px; color: var(--muted); }
.ticket-grid { grid-template-columns: .9fr 1.1fr; align-items: stretch; }
.ticket-copy p { color: var(--muted); }
.ticket-form { padding: 18px; display: grid; gap: 12px; }
.field { display: grid; gap: 6px; }
.field span { font-size: 13px; font-weight: 700; color: var(--muted); }
.field input, .field select, .field textarea {
 width: 100%;
 border-radius: 14px;
 border: 1px solid var(--line);
 background: #0e1728;
 color: var(--text);
 min-height: 48px;
 padding: 10px 12px;
}
.field textarea { min-height: 120px; resize: vertical; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: rgba(240,180,41,.45); }
.notice {
 min-height: 24px;
 margin: 0;
 color: var(--mint);
 font-weight: 700;
}
.notice.warn { color: #ffb2a4; }
.float-bar {
 position: fixed;
 right: 16px;
 top: 42%;
 z-index: 45;
 display: flex;
 flex-direction: column;
 gap: 8px;
}
.float-bar a {
 width: 52px;
 height: 52px;
 border-radius: 18px;
 display: grid;
 place-items: center;
 background: #121b2d;
 color: var(--text);
 border: 1px solid var(--line);
 box-shadow: var(--shadow);
}
.float-bar a.gold { background: linear-gradient(180deg, var(--gold-2), var(--gold)); color: #1a1203; }
.float-bar a:hover { transform: translateY(-2px); }
@media (max-width: 1200px) {
 .nav-toggle { display: inline-flex; }
 #mainNav.collapse { display: none; flex: none; }
 #mainNav.collapse.show {
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  background: rgba(7, 12, 22, .98);
  border-bottom: 1px solid var(--line);
  padding: 8px 16px 16px;
  z-index: 60;
 }
 .nav-menu { flex-direction: column; align-items: stretch; }
 .nav-menu a { width: 100%; }
 .nav-tools { margin-top: 12px; justify-content: space-between; }
 .logo { min-width: 0; }
}
@media (max-width: 1024px) {
 .support-hero .hero-grid, .issue-split, .priority-grid, .voice-grid, .ticket-grid, .feature-split, .hero-layout { grid-template-columns: 1fr; }
 .sla-track { grid-template-columns: 1fr 1fr; }
 .sla-item::after { display: none; }
 .issue-photo, .issue-photo img, .poster img, .spot img { min-height: 280px; }
 .support-hero h1 { max-width: none; }
}
@media (max-width: 768px) {
 .fall-grid { columns: 1; }
 .rank-list li { grid-template-columns: 56px 1fr; }
 .rank-list .heat, .rank-list .badge-soft { grid-column: 2; justify-self: start; }
 .foot-grid { flex-direction: column; }
 .float-bar {
  top: auto;
  right: 12px;
  left: 12px;
  bottom: 12px;
  flex-direction: row;
 }
 .float-bar a { flex: 1; width: auto; height: 48px; }
 body { padding-bottom: 78px; }
 .tall img, .mid img { height: 280px; }
}
@media (max-width: 520px) {
 .container { width: min(var(--max), calc(100% - 20px)); }
 .sla-track, .time-list li { grid-template-columns: 1fr; }
 .hero-actions, .nav-tools { align-items: stretch; }
 .btn-gold, .btn-ghost, .btn-nav { width: 100%; }
 .nav-tools .btn-nav { width: auto; }
 .support-hero .hero-grid { padding: 42px 0 36px; }
 .logo strong { font-size: 13px; }
 .rank-no { width: 46px; height: 46px; }
}
@media (prefers-reduced-motion: reduce) {
 * { animation: none !important; transition: none !important; }
}