/* roulang page: index */
:root {
  --ink: #16130f;
  --ink-soft: #3a342c;
  --muted: #6f675c;
  --paper: #f4efe6;
  --paper-2: #fbf8f2;
  --white: #fffdf9;
  --line: #e5d9c8;
  --line-strong: #d3c3ab;
  --gold: #9a7432;
  --gold-2: #c6a15b;
  --gold-soft: #f3e6cc;
  --deep: #12100e;
  --deep-2: #1d1915;
  --cream: #f7f1e6;
  --good: #2d6248;
  --clay: #8a4e32;
  --silver: #c8c2ba;
  --bronze: #b pen;
  --radius: 22px;
  --radius-sm: 14px;
  --shadow: 0 18px 50px rgba(28, 22, 14, 0.08);
  --shadow-hover: 0 22px 46px rgba(28, 22, 14, 0.14);
  --space: 88px;
  --font: "Be Vietnam Pro", "Segoe UI", sans-serif;
  --max: 1180px;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.7;
  font-size: 16px;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input, textarea { font-family: inherit; }
button { cursor: pointer; }
h1, h2, h3, p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
::selection { background: #ead7b0; color: var(--ink); }
.skip {
  position: absolute;
  left: 16px;
  top: -40px;
  background: var(--gold);
  color: #fff;
  padding: 8px 12px;
  border-radius: 8px;
  z-index: 80;
}
.skip:focus { top: 12px; }
.container { width: min(var(--max), calc(100% - 40px)); margin: 0 auto; }
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(251, 248, 242, 0.92);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(211, 195, 171, 0.7);
}
.header-inner {
  min-height: 76px;
  display: flex;
  align-items: center;
  gap: 18px;
}
.logo { display: flex; align-items: center; gap: 10px; min-width: 0; }
.logo-mark {
  width: 42px;
  height: 42px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  background: var(--deep);
  color: var(--gold-2);
  font-weight: 800;
  letter-spacing: 0.04em;
  flex: 0 0 auto;
}
.logo-text { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.logo-text strong {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.logo-text small {
  color: var(--gold);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
}
.nav-links { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.nav-links a, .drawer-link {
  color: var(--ink-soft);
  font-size: 13.5px;
  font-weight: 600;
  padding: 8px 10px;
  border-radius: 999px;
  transition: background 0.2s ease, color 0.2s ease;
}
.nav-links a:hover, .drawer-link:hover { background: var(--gold-soft); color: var(--ink); }
.nav-links a:focus-visible, .drawer-link:focus-visible, .btn:focus-visible, .menu-toggle:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
.nav-links a.is-active, .drawer-link.is-active {
  background: var(--deep);
  color: var(--cream);
}
.header-tools { display: flex; align-items: center; gap: 8px; margin-left: 8px; }
.menu-toggle {
  display: none;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid var(--line-strong);
  background: var(--white);
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
}
.menu-toggle span {
  display: block;
  width: 16px;
  height: 1.5px;
  background: var(--ink);
}
.nav-drawer {
  display: none;
  border-top: 1px solid var(--line);
  padding: 10px 0 16px;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.nav-drawer.open { display: grid; }
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 999px;
  padding: 12px 18px;
  border: 1px solid transparent;
  font-weight: 700;
  letter-spacing: 0.01em;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn-gold {
  background: linear-gradient(180deg, #d7b56a, #9a7432);
  color: #22190d;
  box-shadow: 0 10px 24px rgba(154, 116, 50, 0.28);
}
.btn-gold:hover { box-shadow: 0 16px 30px rgba(154, 116, 50, 0.34); }
.btn-ghost {
  background: transparent;
  color: var(--cream);
  border-color: rgba(247, 241, 230, 0.35);
}
.btn-ghost:hover { background: rgba(247, 241, 230, 0.08); }
.btn-dark {
  background: var(--deep);
  color: var(--cream);
}
.btn-dark:hover { background: #2a241d; }
.hero {
  position: relative;
  color: var(--cream);
  background:
    linear-gradient(105deg, rgba(12, 10, 8, 0.92) 0%, rgba(12, 10, 8, 0.78) 46%, rgba(12, 10, 8, 0.5) 100%),
    url("/assets/images/96322d5e08c7da8f.webp") center/cover no-repeat;
  overflow: hidden;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  gap: 48px;
  align-items: center;
  padding: 72px 0 78px;
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--gold-2);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 16px;
}
.hero h1 {
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  line-height: 0.98;
  letter-spacing: -0.045em;
  font-weight: 800;
  max-width: 11ch;
}
.capability {
  margin-top: 18px;
  font-size: 1.12rem;
  color: #f0e4d0;
  max-width: 38ch;
}
.lead { margin-top: 18px; color: rgba(247, 241, 230, 0.84); max-width: 62ch; }
.lead + .lead { margin-top: 12px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.fact-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.fact {
  border: 1px solid rgba(247, 241, 230, 0.18);
  background: rgba(255, 255, 255, 0.04);
  border-radius: 999px;
  padding: 8px 12px;
  font-size: 13px;
  color: #f3eadc;
}
.terminal {
  background: #1a1714;
  border: 1px solid rgba(243, 230, 204, 0.16);
  border-radius: 22px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.28);
  overflow: hidden;
  animation: rise 0.7s ease 0.08s both;
}
.hero-copy { animation: rise 0.7s ease both; }
@keyframes rise {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}
.term-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  background: #241f1b;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.dots { display: flex; gap: 6px; }
.dots i { width: 9px; height: 9px; border-radius: 50%; display: block; }
.dots i:nth-child(1) { background: #c46a4a; }
.dots i:nth-child(2) { background: #d2b15a; }
.dots i:nth-child(3) { background: #7ea36a; }
.term-name { margin-left: 8px; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: #d9cbb6; }
.term-body {
  margin: 0;
  padding: 18px 18px 8px;
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  line-height: 1.75;
  color: #f4ecdf;
  overflow-x: auto;
}
.c-dim { color: #9c907f; }
.c-fn { color: #e4c27a; }
.c-key { color: #f1d7a4; }
.c-str { color: #d8c3a0; }
.term-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 14px;
  flex-wrap: wrap;
}
.status-dot { display: inline-flex; align-items: center; gap: 8px; color: #e7dccb; font-size: 13px; }
.status-dot::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #8fbf78;
  box-shadow: 0 0 0 4px rgba(143, 191, 120, 0.15);
}
.section { padding: var(--space) 0; }
.sand { background: #efe7da; }
.white { background: var(--paper-2); }
.ink { background: var(--deep); color: var(--cream); }
.section-head { margin-bottom: 28px; max-width: 760px; }
.section-head.row {
  max-width: none;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
}
.kicker {
  color: var(--gold);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.ink .kicker { color: var(--gold-2); }
h2 {
  font-size: clamp(1.7rem, 3vw, 2.45rem);
  line-height: 1.15;
  letter-spacing: -0.035em;
}
.lede { margin-top: 12px; color: var(--muted); }
.ink .lede { color: rgba(247, 241, 230, 0.76); }
.metric-bar {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
}
.metric {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 16px 14px;
  box-shadow: var(--shadow);
  min-height: 108px;
}
.metric span { display: block; color: var(--muted); font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; }
.metric b { display: block; margin-top: 8px; font-size: 1.15rem; letter-spacing: -0.03em; }
.bento {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  grid-auto-rows: minmax(150px, auto);
  gap: 14px;
}
.tile {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  min-height: 168px;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); border-color: #d7c09a; }
.tile.wide { grid-column: span 1; }
.tile.feature {
  background:
    linear-gradient(160deg, rgba(18, 16, 14, 0.2), rgba(18, 16, 14, 0.72)),
    url("/assets/images/66f8fa4d473e2e42.webp") center/cover no-repeat;
  color: var(--cream);
  grid-row: span 2;
}
.tile.feature p, .tile.feature .tile-kicker { color: rgba(247, 241, 230, 0.8); }
.tile-kicker { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); font-weight: 700; }
.tile h3 { margin: 10px 0; font-size: 1.25rem; letter-spacing: -0.03em; }
.tile p { color: var(--muted); flex: 1; }
.tile-go { margin-top: 16px; font-weight: 700; color: var(--gold); font-size: 14px; }
.tile.feature .tile-go { color: var(--gold-2); }
.feature-split {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 22px;
  align-items: stretch;
}
.feature-photo {
  position: relative;
  border-radius: 28px;
  overflow: hidden;
  min-height: 440px;
  box-shadow: var(--shadow);
}
.feature-photo img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.photo-badge {
  position: absolute;
  left: 16px;
  bottom: 16px;
  background: rgba(18, 16, 14, 0.82);
  color: var(--cream);
  border-radius: 999px;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 700;
}
.side-stack { display: grid; gap: 14px; }
.side-card, .scene, .eco, .partner, .compact-item, .quote, .podium-card, .rank-row, .news-item, .step, .g-item {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.side-card { padding: 22px; transition: transform 0.2s ease, box-shadow 0.2s ease; }
.side-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); }
.side-card h3, .scene h3, .quote h3 { letter-spacing: -0.03em; margin-bottom: 8px; }
.score-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--gold-soft);
  color: #6d5220;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 800;
  margin-bottom: 10px;
}
.news-list { display: grid; gap: 14px; }
.news-item {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 18px;
  padding: 12px;
  align-items: center;
}
.news-item:hover { border-color: #d7c09a; }
.news-photo { border-radius: 16px; overflow: hidden; height: 124px; }
.news-photo img { width: 100%; height: 100%; object-fit: cover; }
.news-copy small { color: var(--gold); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; font-size: 11px; }
.news-copy h3 { margin: 6px 0; font-size: 1.2rem; letter-spacing: -0.03em; }
.news-copy p { color: var(--muted); }
.more-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  color: var(--ink);
  border-bottom: 1px solid var(--gold-2);
  padding-bottom: 3px;
  white-space: nowrap;
}
.more-link:hover { color: var(--gold); }
.rank-list { display: grid; gap: 12px; }
.rank-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 18px 18px;
}
.rank-row:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); }
.medal {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 18px;
}
.m1 { background: linear-gradient(145deg, #f6e4b8, #b3873b); color: #2a2112; }
.m2 { background: linear-gradient(145deg, #f7f7f5, #bdb7ae); color: #2c2926; }
.m3 { background: linear-gradient(145deg, #f3d7c2, #a86b45); color: #2c1c15; }
.m4 { background: var(--deep); color: var(--cream); font-size: 14px; }
.rank-main h3 { font-size: clamp(1rem, 2vw, 1.18rem); line-height: 1.45; letter-spacing: -0.02em; }
.rank-main p { color: var(--muted); margin-top: 4px; }
.rank-side { text-align: right; min-width: 92px; }
.score-xl { font-size: 40px; font-weight: 800; letter-spacing: -0.05em; line-height: 1; color: #7c5b24; font-variant-numeric: tabular-nums; }
.stars { color: #c5922f; letter-spacing: 1px; font-size: 14px; display: inline-block; margin-top: 4px; }
.podium { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.podium-card { padding: 22px; position: relative; }
.podium-card.first { border-color: #e0c48a; box-shadow: 0 24px 50px rgba(154, 116, 50, 0.14); }
.card-top { display: flex; justify-content: space-between; gap: 12px; align-items: center; margin-bottom: 14px; }
.ring {
  --p: 100;
  width: 86px;
  height: 86px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: conic-gradient(#9a7432 calc(var(--p) * 1%), #ece3d4 0);
  flex: 0 0 auto;
}
.ring span {
  width: 66px;
  height: 66px;
  border-radius: 50%;
  background: var(--white);
  display: grid;
  place-items: center;
  font-weight: 800;
  letter-spacing: -0.04em;
}
.podium-card h3 { font-size: 1.05rem; line-height: 1.45; min-height: 4.4em; }
.param-list { margin: 14px 0; display: grid; gap: 8px; }
.param-list li {
  position: relative;
  padding-left: 18px;
  color: var(--ink-soft);
  font-size: 14.5px;
}
.param-list li::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold);
  position: absolute;
  left: 0;
  top: 0.55em;
}
.fitbox { display: grid; gap: 8px; }
.tag-yes, .tag-no {
  border-radius: 14px;
  padding: 10px 12px;
  font-size: 14px;
}
.tag-yes { background: #eef5ef; color: var(--good); }
.tag-no { background: #f8efe8; color: var(--clay); }
.compare { display: grid; gap: 8px; }
.compare-row {
  display: grid;
  grid-template-columns: 0.9fr 1fr 1fr 1fr;
  gap: 8px;
}
.compare-cell {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(247, 241, 230, 0.1);
  border-radius: 16px;
  padding: 14px;
  font-size: 14.5px;
}
.compare-row.head .compare-cell { background: rgba(198, 161, 91, 0.14); font-weight: 700; color: #f3e6cc; }
.compare-note {
  margin-top: 16px;
  padding: 16px 18px;
  border-left: 3px solid var(--gold-2);
  color: rgba(247, 241, 230, 0.86);
}
.compact-list { display: grid; gap: 10px; }
.compact-item { padding: 16px 18px; display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; }
.compact-item p { color: var(--muted); }
.evidence-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 18px; }
.quote-stack, .photo-stack { display: grid; gap: 12px; }
.quote { padding: 20px; }
.quote p { font-size: 1.05rem; letter-spacing: -0.02em; }
.who { margin-top: 10px; color: var(--muted); font-size: 14px; }
.photo-stack img { width: 100%; height: 210px; object-fit: cover; border-radius: 22px; }
.scene-grid, .eco-grid, .partner-wall, .steps, .guarantee {
  display: grid;
  gap: 14px;
}
.scene-grid { grid-template-columns: repeat(4, 1fr); }
.scene, .eco, .step, .g-item { padding: 18px; }
.scene i, .eco i, .g-item i, .step i { color: var(--gold); font-size: 18px; }
.scene h3, .eco h3, .step h3 { margin: 10px 0 6px; }
.scene p, .eco p, .step p, .g-item p, .partner span { color: var(--muted); }
.partner-wall { grid-template-columns: repeat(6, 1fr); }
.partner {
  min-height: 112px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  padding: 16px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 18px;
}
.partner b { font-size: 1.02rem; letter-spacing: -0.03em; }
.eco-grid { grid-template-columns: repeat(3, 1fr); }
.steps { grid-template-columns: repeat(4, 1fr); }
.step-no { font-size: 12px; font-weight: 800; letter-spacing: 0.14em; color: var(--gold); }
.guarantee { grid-template-columns: repeat(4, 1fr); }
.g-item { background: transparent; border-color: rgba(247, 241, 230, 0.14); color: var(--cream); box-shadow: none; }
.g-item p { color: rgba(247, 241, 230, 0.72); }
.close-band {
  background:
    linear-gradient(100deg, rgba(12, 10, 8, 0.9), rgba(12, 10, 8, 0.74)),
    url("/assets/images/6ac182c3d8a1037a.webp") center/cover no-repeat;
  color: var(--cream);
}
.close-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 28px; align-items: start; }
.open-form {
  background: var(--white);
  color: var(--ink);
  border-radius: 28px;
  padding: 22px;
  box-shadow: var(--shadow-hover);
}
.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; }
input, textarea {
  width: 100%;
  border: 1px solid var(--line-strong);
  background: #fff;
  border-radius: 12px;
  padding: 12px 13px;
  color: var(--ink);
  font-size: 15px;
}
textarea { min-height: 110px; resize: vertical; }
input:focus, textarea:focus { border-color: var(--gold); box-shadow: 0 0 0 4px rgba(154, 116, 50, 0.12); outline: none; }
.form-note {
  margin-top: 12px;
  background: #eef5ef;
  color: var(--good);
  border-radius: 12px;
  padding: 12px;
}
.fine { margin-top: 10px; color: var(--muted); font-size: 13px; }
.site-footer { background: #0e0c0a; color: #efe6d8; padding: 48px 0 28px; }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 24px; }
.foot-brand strong { display: block; font-size: 1.15rem; margin-bottom: 8px; }
.foot-brand p, .foot-col p { color: rgba(239, 230, 216, 0.72); }
.foot-col h3 { font-size: 14px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-2); margin-bottom: 8px; }
.legal {
  margin-top: 26px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(239, 230, 216, 0.62);
  font-size: 13px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
@media (max-width: 1100px) {
  .nav-links { display: none; }
  .header-tools { margin-left: auto; }
  .menu-toggle { display: inline-flex; }
  .metric-bar { grid-template-columns: repeat(3, 1fr); }
  .partner-wall { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1024px) {
  :root { --space: 68px; }
  .hero-grid, .feature-split, .evidence-grid, .close-grid, .foot-grid { grid-template-columns: 1fr; }
  .hero h1 { max-width: none; }
  .bento { grid-template-columns: 1fr 1fr; }
  .tile.feature { grid-row: auto; grid-column: span 2; min-height: 240px; }
  .podium, .scene-grid, .steps, .guarantee { grid-template-columns: 1fr 1fr; }
  .eco-grid { grid-template-columns: 1fr 1fr; }
  .compare-row { grid-template-columns: 1fr 1fr; }
  .feature-photo { min-height: 320px; }
  .feature-photo img { position: relative; height: 320px; }
}
@media (max-width: 768px) {
  .section-head.row { flex-direction: column; align-items: flex-start; }
  .news-item, .rank-row, .compact-item { grid-template-columns: 1fr; }
  .rank-side, .compact-item .rank-side { text-align: left; }
  .podium-card h3 { min-height: 0; }
  .metric-bar, .partner-wall { grid-template-columns: 1fr 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .hero-grid { padding: 48px 0 56px; }
  .term-foot { align-items: stretch; }
}
@media (max-width: 520px) {
  .container { width: min(var(--max), calc(100% - 28px)); }
  :root { --space: 48px; }
  .bento, .podium, .scene-grid, .steps, .guarantee, .eco-grid, .metric-bar, .partner-wall, .nav-drawer { grid-template-columns: 1fr; }
  .tile.feature { grid-column: auto; }
  .logo-text small { display: none; }
  .hero h1 { font-size: 2.35rem; }
  .btn { width: 100%; }
  .hero-actions .btn, .term-foot .btn { width: auto; }
  .header-tools .btn { width: auto; padding: 10px 12px; }
  .photo-stack img { height: 180px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* roulang page: category2 */
:root {
 --ink: #16130f;
 --ink-soft: #3a342c;
 --muted: #6f675c;
 --paper: #f4efe6;
 --paper-2: #fbf8f2;
 --white: #fffdf9;
 --line: #e5d9c8;
 --line-strong: #d3c3ab;
 --gold: #9a7432;
 --gold-2: #c6a15b;
 --gold-soft: #f3e6cc;
 --deep: #12100e;
 --deep-2: #1d1915;
 --cream: #f7f1e6;
 --good: #2d6248;
 --clay: #8a4e32;
 --silver: #c8c2ba;
 --bronze: #b pen;
 --radius: 22px;
 --radius-sm: 14px;
 --shadow: 0 18px 50px rgba(28, 22, 14, 0.08);
 --shadow-hover: 0 22px 46px rgba(28, 22, 14, 0.14);
 --space: 88px;
 --font: "Be Vietnam Pro", "Segoe UI", sans-serif;
 --max: 1180px;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
 margin: 0;
 font-family: var(--font);
 color: var(--ink);
 background:
  radial-gradient(1200px 420px at 100% -10%, rgba(198, 161, 91, 0.16), transparent 55%),
  var(--paper);
 line-height: 1.7;
 font-size: 16px;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input, textarea { font-family: inherit; }
button { cursor: pointer; }
p { margin: 0 0 12px; }
ul { margin: 0; padding: 0; }
.container { width: min(var(--max), calc(100% - 40px)); margin: 0 auto; }
.site-header {
 position: sticky;
 top: 0;
 z-index: 50;
 background: rgba(251, 248, 242, 0.92);
 backdrop-filter: blur(16px);
 border-bottom: 1px solid rgba(211, 195, 171, 0.7);
}
.header-inner {
 min-height: 76px;
 display: flex;
 align-items: center;
 gap: 18px;
}
.logo { display: flex; align-items: center; gap: 10px; min-width: 0; }
.logo-mark {
 width: 42px;
 height: 42px;
 border-radius: 13px;
 display: grid;
 place-items: center;
 background: var(--deep);
 color: var(--gold-2);
 font-weight: 800;
 letter-spacing: 0.04em;
 flex: 0 0 auto;
}
.logo-text { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.logo-text strong {
 font-size: 14px;
 font-weight: 700;
 letter-spacing: -0.01em;
}
.logo-text small {
 color: var(--gold);
 font-size: 11px;
 letter-spacing: 0.12em;
 text-transform: uppercase;
 font-weight: 600;
}
.nav-links { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.nav-links a, .drawer-link {
 color: var(--ink-soft);
 font-size: 13.5px;
 font-weight: 600;
 padding: 8px 10px;
 border-radius: 999px;
 transition: background 0.2s ease, color 0.2s ease;
}
.nav-links a:hover, .drawer-link:hover { background: var(--gold-soft); color: var(--ink); }
.nav-links a:focus-visible, .drawer-link:focus-visible, .btn:focus-visible, .menu-toggle:focus-visible, input:focus-visible, textarea:focus-visible {
 outline: 2px solid var(--gold);
 outline-offset: 2px;
}
.nav-links a.is-active, .drawer-link.is-active {
 background: var(--deep);
 color: var(--cream);
}
.header-tools { display: flex; align-items: center; gap: 8px; margin-left: 8px; }
.menu-toggle {
 display: none;
 width: 44px;
 height: 44px;
 border-radius: 12px;
 border: 1px solid var(--line-strong);
 background: var(--white);
 align-items: center;
 justify-content: center;
 flex-direction: column;
 gap: 5px;
}
.menu-toggle span {
 display: block;
 width: 16px;
 height: 1.5px;
 background: var(--ink);
}
.menu-toggle.is-open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.menu-toggle.is-open span:nth-child(2) { opacity: 0; }
.menu-toggle.is-open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
.menu-toggle span { transition: transform 0.2s ease, opacity 0.2s ease; }
.nav-drawer {
 display: none;
 border-top: 1px solid var(--line);
 padding: 10px 0 16px;
 grid-template-columns: 1fr 1fr;
 gap: 6px;
}
.nav-drawer.open { display: grid; }
.btn {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 gap: 8px;
 border-radius: 999px;
 padding: 12px 18px;
 border: 1px solid transparent;
 font-weight: 700;
 letter-spacing: 0.01em;
 transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn-gold {
 background: linear-gradient(180deg, #d7b56a, #9a7432);
 color: #22190d;
 box-shadow: 0 10px 24px rgba(154, 116, 50, 0.28);
}
.btn-gold:hover { box-shadow: 0 16px 30px rgba(154, 116, 50, 0.34); }
.btn-ghost {
 background: transparent;
 color: var(--cream);
 border-color: rgba(247, 241, 230, 0.35);
}
.btn-ghost:hover { background: rgba(247, 241, 230, 0.08); }
.btn-dark {
 background: var(--deep);
 color: var(--cream);
}
.btn-dark:hover { background: #2a241d; }
.btn-line {
 background: var(--white);
 color: var(--ink);
 border-color: var(--line-strong);
}
.btn-line:hover { border-color: var(--gold); background: var(--gold-soft); }
.section { padding: var(--space) 0; }
.section-head { margin-bottom: 28px; max-width: 760px; }
.section-head h2, .panel-copy h2, .close-copy h2 {
 font-size: clamp(1.7rem, 3vw, 2.45rem);
 line-height: 1.15;
 letter-spacing: -0.03em;
 margin: 0 0 10px;
}
.kicker {
 display: inline-flex;
 align-items: center;
 gap: 8px;
 color: var(--gold);
 letter-spacing: 0.14em;
 text-transform: uppercase;
 font-size: 12px;
 font-weight: 700;
 margin-bottom: 10px;
}
.muted { color: var(--muted); }
.page-hero {
 position: relative;
 color: var(--cream);
 background:
  linear-gradient(102deg, rgba(12, 10, 8, 0.94) 0%, rgba(12, 10, 8, 0.82) 48%, rgba(12, 10, 8, 0.55) 100%),
  url("/assets/images/6ac182c3d8a1037a.webp") center/cover no-repeat;
 overflow: hidden;
}
.page-hero::after {
 content: "";
 position: absolute;
 inset: auto 0 0 0;
 height: 72px;
 background: linear-gradient(to bottom, transparent, var(--paper));
 pointer-events: none;
}
.hero-wrap {
 display: grid;
 grid-template-columns: 1.15fr 0.85fr;
 gap: 36px;
 align-items: start;
 padding: 64px 0 88px;
 position: relative;
 z-index: 1;
}
.page-hero h1 {
 margin: 0;
 font-size: clamp(2.2rem, 4.4vw, 3.7rem);
 line-height: 1.02;
 letter-spacing: -0.04em;
 font-weight: 800;
 max-width: 16ch;
}
.hero-copy p { color: rgba(247, 241, 230, 0.86); max-width: 68ch; }
.hero-copy p + p { margin-top: 12px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 22px 0 8px; }
.trust-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.chip {
 display: inline-flex;
 align-items: center;
 gap: 8px;
 border: 1px solid rgba(247, 241, 230, 0.22);
 background: rgba(18, 16, 14, 0.35);
 color: var(--cream);
 border-radius: 999px;
 padding: 7px 12px;
 font-size: 13px;
 font-weight: 600;
}
.score-panel {
 background: rgba(255, 253, 249, 0.96);
 color: var(--ink);
 border-radius: 28px;
 padding: 18px;
 box-shadow: var(--shadow-hover);
 border: 1px solid rgba(255, 253, 249, 0.4);
}
.score-top {
 display: flex;
 justify-content: space-between;
 gap: 12px;
 align-items: center;
 margin-bottom: 12px;
}
.score-top strong { font-size: 15px; letter-spacing: -0.02em; }
.ring {
 width: 84px;
 height: 84px;
 border-radius: 50%;
 display: grid;
 place-items: center;
 background: conic-gradient(var(--gold) 0 100%, #efe4d2 0);
 box-shadow: inset 0 0 0 10px var(--white);
 flex: 0 0 auto;
}
.ring span { font-weight: 800; font-size: 22px; letter-spacing: -0.04em; }
.rank-line {
 display: grid;
 grid-template-columns: auto 1fr auto;
 gap: 10px;
 align-items: center;
 padding: 10px 0;
 border-top: 1px solid var(--line);
 font-size: 14px;
}
.rank-line b { font-weight: 700; }
.stars { color: #c6a15b; letter-spacing: 0.08em; font-size: 13px; white-space: nowrap; }
.band { background: var(--paper-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.dim-row {
 display: grid;
 grid-template-columns: repeat(6, 1fr);
 gap: 12px;
}
.dim {
 background: var(--white);
 border: 1px solid var(--line);
 border-radius: var(--radius-sm);
 padding: 14px 14px 12px;
 min-height: 112px;
 box-shadow: var(--shadow);
}
.dim i { color: var(--gold); font-size: 16px; }
.dim strong { display: block; margin: 8px 0 4px; font-size: 14px; letter-spacing: -0.02em; }
.dim span { color: var(--muted); font-size: 13px; line-height: 1.45; display: block; }
.board-list { display: flex; flex-direction: column; gap: 12px; }
.place {
 display: grid;
 grid-template-columns: 92px 1fr auto;
 gap: 16px;
 align-items: center;
 background: var(--white);
 border: 1px solid var(--line);
 border-radius: var(--radius);
 padding: 16px 18px;
 box-shadow: var(--shadow);
 transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.place:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); }
.medal {
 width: 92px;
 height: 72px;
 border-radius: 16px;
 display: grid;
 place-items: center;
 font-weight: 800;
 font-size: 28px;
 background: var(--deep);
 color: var(--gold-2);
}
.medal.silver { background: #2a2724; color: #e7e2da; }
.medal.bronze { background: #3a2418; color: #e7c2a4; }
.place-main h3 { margin: 0 0 4px; font-size: 1.05rem; letter-spacing: -0.02em; }
.place-main p { margin: 0; color: var(--muted); font-size: 14px; }
.place-score { text-align: right; }
.place-score .num {
 font-size: 1.8rem;
 font-weight: 800;
 letter-spacing: -0.04em;
 line-height: 1;
}
.place-score small { color: var(--muted); display: block; margin-top: 4px; }
.podium {
 display: grid;
 grid-template-columns: 1.15fr 0.85fr 0.85fr;
 gap: 16px;
}
.pod {
 background: var(--white);
 border: 1px solid var(--line);
 border-radius: 26px;
 overflow: hidden;
 box-shadow: var(--shadow);
 display: flex;
 flex-direction: column;
}
.pod.lead { background: var(--deep); color: var(--cream); border-color: #2a241d; }
.pod-photo { position: relative; height: 168px; }
.pod-photo img { width: 100%; height: 100%; object-fit: cover; }
.pod-photo .medal {
 position: absolute;
 left: 14px;
 bottom: -22px;
 width: 64px;
 height: 64px;
 font-size: 26px;
 box-shadow: var(--shadow);
}
.pod-body { padding: 34px 18px 18px; }
.pod h3 { margin: 0 0 8px; font-size: 1.25rem; letter-spacing: -0.03em; }
.score-inline { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.score-inline b { font-size: 2rem; letter-spacing: -0.04em; line-height: 1; }
.pod ul { list-style: none; display: grid; gap: 7px; margin: 12px 0; }
.pod li { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; }
.pod li i { color: var(--gold-2); margin-top: 4px; }
.fit {
 display: grid;
 gap: 8px;
 margin-top: auto;
}
.fit p {
 margin: 0;
 border-radius: 12px;
 padding: 10px 12px;
 font-size: 13.5px;
 background: var(--cream);
 color: var(--ink-soft);
}
.pod.lead .fit p { background: rgba(247, 241, 230, 0.08); color: rgba(247, 241, 230, 0.88); }
.fit strong { color: var(--gold); }
.pod.lead .fit strong { color: var(--gold-2); }
.compare {
 display: grid;
 grid-template-columns: 220px 1fr 1fr 1fr;
 border: 1px solid var(--line);
 border-radius: 24px;
 overflow: hidden;
 background: var(--white);
 box-shadow: var(--shadow);
}
.compare div {
 padding: 14px 16px;
 border-bottom: 1px solid var(--line);
 border-right: 1px solid var(--line);
 font-size: 14px;
}
.compare div:nth-child(4n) { border-right: 0; }
.compare .hd {
 background: var(--deep);
 color: var(--cream);
 font-weight: 700;
 border-bottom-color: #2c261f;
 border-right-color: #2c261f;
}
.compare .lab { color: var(--muted); font-weight: 600; background: #fbf7f0; }
.rest-grid, .reason-grid, .proof-grid {
 display: grid;
 gap: 16px;
}
.rest-grid { grid-template-columns: 1fr 1fr 1fr; }
.mini {
 background: var(--white);
 border: 1px solid var(--line);
 border-radius: var(--radius);
 padding: 16px;
 box-shadow: var(--shadow);
}
.mini .rowline {
 display: flex;
 justify-content: space-between;
 gap: 10px;
 align-items: baseline;
 font-weight: 700;
}
.mini p { color: var(--muted); font-size: 14px; margin: 8px 0 0; }
.proof-grid { grid-template-columns: 1.05fr 0.95fr; align-items: stretch; }
.proof-photo {
 position: relative;
 min-height: 420px;
 border-radius: 28px;
 overflow: hidden;
 box-shadow: var(--shadow);
}
.proof-photo img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.proof-note {
 position: absolute;
 left: 16px;
 right: 16px;
 bottom: 16px;
 background: rgba(18, 16, 14, 0.82);
 color: var(--cream);
 border-radius: 16px;
 padding: 14px 16px;
}
.proof-note strong { display: block; margin-bottom: 4px; }
.stack { display: grid; gap: 12px; }
.stack article {
 display: grid;
 grid-template-columns: 112px 1fr;
 gap: 12px;
 background: var(--white);
 border: 1px solid var(--line);
 border-radius: 18px;
 overflow: hidden;
 box-shadow: var(--shadow);
}
.stack img { width: 112px; height: 100%; object-fit: cover; min-height: 108px; }
.stack div { padding: 12px 14px 12px 0; }
.stack h3 { margin: 0 0 4px; font-size: 1rem; }
.stack p { margin: 0; color: var(--muted); font-size: 14px; }
.reason-grid { grid-template-columns: 1.2fr 0.8fr; }
.reason-list { list-style: none; display: grid; gap: 10px; }
.reason-list li {
 display: grid;
 grid-template-columns: 42px 1fr;
 gap: 12px;
 background: var(--white);
 border: 1px solid var(--line);
 border-radius: 16px;
 padding: 12px;
}
.markn {
 width: 42px;
 height: 42px;
 border-radius: 12px;
 display: grid;
 place-items: center;
 background: var(--gold-soft);
 color: var(--gold);
 font-weight: 800;
}
.side-card {
 background:
  linear-gradient(165deg, rgba(18, 16, 14, 0.2), rgba(18, 16, 14, 0.78)),
  url("/assets/images/36e2c05acb6bd0f7.webp") center/cover no-repeat;
 color: var(--cream);
 border-radius: 24px;
 padding: 22px;
 min-height: 100%;
 box-shadow: var(--shadow);
}
.side-card h3 { margin: 8px 0; font-size: 1.4rem; }
.side-card ul { list-style: none; display: grid; gap: 8px; margin-top: 12px; }
.side-card li { display: flex; gap: 8px; }
.close {
 background: var(--deep);
 color: var(--cream);
 border-radius: 0;
}
.close-grid {
 display: grid;
 grid-template-columns: 0.9fr 1.1fr;
 gap: 28px;
 align-items: start;
}
.close-copy p { color: rgba(247, 241, 230, 0.8); }
.form {
 background: var(--white);
 color: var(--ink);
 border-radius: 24px;
 padding: 18px;
 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; }
.field input, .field textarea {
 border: 1px solid var(--line-strong);
 background: var(--paper-2);
 border-radius: 12px;
 padding: 12px 12px;
 color: var(--ink);
 font-size: 15px;
}
.field textarea { min-height: 96px; resize: vertical; }
.form-note { grid-column: 1 / -1; color: var(--good); font-weight: 600; min-height: 1.4em; }
.site-footer {
 background: var(--deep-2);
 color: rgba(247, 241, 230, 0.82);
 padding: 42px 0 22px;
}
.foot-grid {
 display: grid;
 grid-template-columns: 1.4fr 0.8fr 0.8fr;
 gap: 24px;
}
.foot-brand strong { display: block; color: var(--cream); font-size: 1.05rem; margin-bottom: 8px; }
.foot-col h3 { margin: 0 0 8px; color: var(--gold-2); font-size: 0.95rem; }
.legal {
 display: flex;
 justify-content: space-between;
 gap: 12px;
 flex-wrap: wrap;
 margin-top: 22px;
 padding-top: 16px;
 border-top: 1px solid rgba(247, 241, 230, 0.12);
 font-size: 13px;
 color: rgba(247, 241, 230, 0.62);
}
@media (max-width: 1024px) {
 .hero-wrap, .podium, .proof-grid, .reason-grid, .close-grid, .foot-grid { grid-template-columns: 1fr 1fr; }
 .podium .lead { grid-column: 1 / -1; }
 .dim-row { grid-template-columns: repeat(3, 1fr); }
 .compare { grid-template-columns: 1fr 1fr; }
 .compare .lab { grid-column: 1 / -1; }
 .rest-grid { grid-template-columns: 1fr 1fr; }
 .nav-links a { padding: 8px 8px; font-size: 12.5px; }
}
@media (max-width: 768px) {
 .nav-links { display: none; }
 .menu-toggle { display: flex; }
 .header-inner { min-height: 68px; }
 .hero-wrap, .podium, .proof-grid, .reason-grid, .close-grid, .foot-grid, .rest-grid, .dim-row, .form {
  grid-template-columns: 1fr;
 }
 .place { grid-template-columns: 72px 1fr; }
 .place-score { grid-column: 2; text-align: left; }
 .medal { width: 72px; height: 64px; }
 .logo-text strong { font-size: 13px; }
 .page-hero h1 { max-width: none; }
}
@media (max-width: 520px) {
 .container { width: min(var(--max), calc(100% - 28px)); }
 .stack article { grid-template-columns: 1fr; }
 .stack img { width: 100%; height: 160px; }
 .stack div { padding: 0 14px 14px; }
 .hero-actions .btn, .header-tools .btn { width: 100%; }
 .header-tools { margin-left: auto; }
 .legal { flex-direction: column; }
 .score-top { align-items: flex-start; }
}

/* roulang page: category1 */
:root {
 --ink: #16130f;
 --ink-soft: #3a342c;
 --muted: #6f675c;
 --paper: #f4efe6;
 --paper-2: #fbf8f2;
 --white: #fffdf9;
 --line: #e5d9c8;
 --line-strong: #d3c3ab;
 --gold: #9a7432;
 --gold-2: #c6a15b;
 --gold-soft: #f3e6cc;
 --deep: #12100e;
 --deep-2: #1d1915;
 --cream: #f7f1e6;
 --good: #2d6248;
 --clay: #8a4e32;
 --silver: #c8c2ba;
 --bronze: #a97142;
 --radius: 22px;
 --radius-sm: 14px;
 --shadow: 0 18px 50px rgba(28, 22, 14, 0.08);
 --shadow-hover: 0 22px 46px rgba(28, 22, 14, 0.14);
 --space: 88px;
 --font: "Be Vietnam Pro", "Segoe UI", sans-serif;
 --max: 1180px;
}
:root { --space: 68px; }
:root { --space: 48px; }
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
 margin: 0;
 font-family: var(--font);
 color: var(--ink);
 background: var(--paper);
 line-height: 1.7;
 font-size: 16px;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input, textarea { font-family: inherit; }
button { cursor: pointer; }
.container { width: min(var(--max), calc(100% - 40px)); margin: 0 auto; }
.site-header {
 position: sticky;
 top: 0;
 z-index: 50;
 background: rgba(251, 248, 242, 0.92);
 backdrop-filter: blur(16px);
 border-bottom: 1px solid rgba(211, 195, 171, 0.7);
}
.header-inner {
 min-height: 76px;
 display: flex;
 align-items: center;
 gap: 18px;
}
.logo { display: flex; align-items: center; gap: 10px; min-width: 0; }
.logo-mark {
 width: 42px;
 height: 42px;
 border-radius: 13px;
 display: grid;
 place-items: center;
 background: var(--deep);
 color: var(--gold-2);
 font-weight: 800;
 letter-spacing: 0.04em;
 flex: 0 0 auto;
}
.logo-text { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.logo-text strong {
 font-size: 14px;
 font-weight: 700;
 letter-spacing: -0.01em;
}
.logo-text small {
 color: var(--gold);
 font-size: 11px;
 letter-spacing: 0.12em;
 text-transform: uppercase;
 font-weight: 600;
}
.nav-links { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.nav-links a, .drawer-link {
 color: var(--ink-soft);
 font-size: 13.5px;
 font-weight: 600;
 padding: 8px 10px;
 border-radius: 999px;
 transition: background 0.2s ease, color 0.2s ease;
}
.nav-links a:hover, .drawer-link:hover { background: var(--gold-soft); color: var(--ink); }
.nav-links a:focus-visible, .drawer-link:focus-visible, .btn:focus-visible, .menu-toggle:focus-visible, input:focus-visible, textarea:focus-visible {
 outline: 2px solid var(--gold);
 outline-offset: 2px;
}
.nav-links a.is-active, .drawer-link.is-active {
 background: var(--deep);
 color: var(--cream);
}
.header-tools { display: flex; align-items: center; gap: 8px; margin-left: 8px; }
.menu-toggle {
 display: none;
 width: 44px;
 height: 44px;
 border-radius: 12px;
 border: 1px solid var(--line-strong);
 background: var(--white);
 align-items: center;
 justify-content: center;
 flex-direction: column;
 gap: 5px;
}
.menu-toggle span {
 display: block;
 width: 16px;
 height: 1.5px;
 background: var(--ink);
}
.nav-drawer {
 display: none;
 border-top: 1px solid var(--line);
 padding: 10px 0 16px;
 grid-template-columns: 1fr 1fr;
 gap: 6px;
}
.nav-drawer.open { display: grid; }
.btn {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 gap: 8px;
 border-radius: 999px;
 padding: 12px 18px;
 border: 1px solid transparent;
 font-weight: 700;
 letter-spacing: 0.01em;
 transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn-gold {
 background: linear-gradient(180deg, #d7b56a, #9a7432);
 color: #22190d;
 box-shadow: 0 10px 24px rgba(154, 116, 50, 0.28);
}
.btn-gold:hover { box-shadow: 0 16px 30px rgba(154, 116, 50, 0.34); }
.btn-ghost {
 background: transparent;
 color: var(--cream);
 border-color: rgba(247, 241, 230, 0.35);
}
.btn-ghost:hover { background: rgba(247, 241, 230, 0.08); }
.btn-dark {
 background: var(--deep);
 color: var(--cream);
}
.btn-dark:hover { background: #2a241d; }
.btn-line {
 background: var(--white);
 color: var(--ink);
 border-color: var(--line-strong);
}
.btn-line:hover { border-color: var(--gold); color: var(--gold); }
.section { padding: var(--space) 0; }
.section-head { margin-bottom: 28px; max-width: 760px; }
.section-head h2, .band-copy h2, .podium-copy h2, .paper-copy h2 {
 margin: 0 0 10px;
 font-size: clamp(1.7rem, 3vw, 2.4rem);
 line-height: 1.15;
 letter-spacing: -0.035em;
}
.kicker {
 display: inline-flex;
 align-items: center;
 gap: 8px;
 color: var(--gold);
 letter-spacing: 0.14em;
 text-transform: uppercase;
 font-size: 12px;
 font-weight: 700;
 margin-bottom: 12px;
}
.muted { color: var(--muted); }
.page-hero {
 position: relative;
 background:
 linear-gradient(100deg, rgba(18, 16, 14, 0.94) 0%, rgba(18, 16, 14, 0.82) 48%, rgba(18, 16, 14, 0.55) 100%),
 url("/assets/images/d17f892301e5aaea.webp") center/cover no-repeat;
 color: var(--cream);
 overflow: hidden;
}
.page-hero::after {
 content: "";
 position: absolute;
 inset: auto 0 0 0;
 height: 90px;
 background: linear-gradient(180deg, transparent, rgba(244, 239, 230, 0.18));
 pointer-events: none;
}
.hero-layout {
 display: grid;
 grid-template-columns: 1.15fr 0.85fr;
 gap: 42px;
 align-items: end;
 padding: 58px 0 64px;
 position: relative;
 z-index: 1;
}
.crumbs { display: flex; gap: 8px; align-items: center; color: rgba(247, 241, 230, 0.7); font-size: 13px; margin-bottom: 18px; }
.crumbs a { border-bottom: 1px solid transparent; }
.crumbs a:hover { color: var(--gold-2); }
.page-hero h1 {
 margin: 0;
 font-size: clamp(2.3rem, 4.6vw, 4.1rem);
 line-height: 0.98;
 letter-spacing: -0.045em;
 font-weight: 800;
 max-width: 14ch;
}
.hero-copy p { margin: 14px 0 0; color: rgba(247, 241, 230, 0.84); max-width: 64ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.dossier-panel {
 background: rgba(255, 253, 249, 0.96);
 color: var(--ink);
 border-radius: 28px;
 overflow: hidden;
 box-shadow: var(--shadow-hover);
}
.dossier-panel img { width: 100%; height: 210px; object-fit: cover; }
.panel-body { padding: 18px 18px 20px; }
.panel-body strong { display: block; font-size: 1.05rem; letter-spacing: -0.02em; }
.score-line { display: flex; justify-content: space-between; gap: 12px; margin-top: 14px; }
.score-line span { display: block; color: var(--muted); font-size: 12px; }
.score-line b { font-size: 1.35rem; letter-spacing: -0.03em; }
.dim-section { background: var(--paper-2); border-bottom: 1px solid var(--line); }
.dim-row { display: grid; grid-template-columns: 280px 1fr; gap: 28px; align-items: center; }
.dim-pills { display: flex; flex-wrap: wrap; gap: 10px; }
.pill {
 background: var(--white);
 border: 1px solid var(--line);
 border-radius: 999px;
 padding: 10px 14px;
 display: inline-flex;
 align-items: center;
 gap: 8px;
 font-weight: 600;
 font-size: 14px;
 color: var(--ink-soft);
}
.pill i { color: var(--gold); }
.rank-section { background: var(--paper); }
.rank-list { display: grid; gap: 12px; }
.rank-row {
 display: grid;
 grid-template-columns: 72px 1fr auto;
 gap: 16px;
 align-items: center;
 background: var(--white);
 border: 1px solid var(--line);
 border-radius: var(--radius);
 padding: 16px 18px;
 box-shadow: var(--shadow);
 transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.rank-row:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); }
.medal {
 width: 64px;
 height: 64px;
 border-radius: 18px;
 display: grid;
 place-items: center;
 font-size: 28px;
 background: var(--gold-soft);
}
.rank-title { margin: 0; font-size: 1.05rem; letter-spacing: -0.02em; }
.rank-title span { font-weight: 500; color: var(--ink-soft); }
.stars { color: #c6a15b; letter-spacing: 0.08em; font-size: 14px; }
.rank-note { margin: 4px 0 0; color: var(--muted); font-size: 14px; }
.point {
 font-size: 1.8rem;
 font-weight: 800;
 letter-spacing: -0.04em;
 color: var(--deep);
}
.point small { display: block; font-size: 12px; font-weight: 600; color: var(--muted); letter-spacing: 0; }
.podium-section { background: linear-gradient(180deg, #fbf8f2, #f4efe6); }
.podium-grid { display: grid; grid-template-columns: 1.15fr 0.85fr 0.85fr; gap: 16px; }
.podium-card {
 background: var(--white);
 border: 1px solid var(--line);
 border-radius: 26px;
 padding: 22px;
 box-shadow: var(--shadow);
 position: relative;
}
.podium-card.lead-card {
 background:
 linear-gradient(180deg, rgba(18, 16, 14, 0.18), rgba(18, 16, 14, 0.82)),
 url("/assets/images/66f8fa4d473e2e42.webp") center/cover no-repeat;
 color: var(--cream);
 grid-row: span 1;
}
.podium-card.lead-card .fit, .podium-card.lead-card .rank-note { color: rgba(247, 241, 230, 0.82); }
.badge {
 display: inline-flex;
 align-items: center;
 gap: 6px;
 border-radius: 999px;
 padding: 6px 10px;
 background: var(--gold-soft);
 color: #5c4316;
 font-size: 12px;
 font-weight: 800;
 letter-spacing: 0.08em;
 text-transform: uppercase;
}
.lead-card .badge { background: rgba(247, 241, 230, 0.16); color: var(--gold-2); }
.ring {
 width: 92px;
 height: 92px;
 border-radius: 50%;
 display: grid;
 place-items: center;
 margin: 16px 0 8px;
 background: conic-gradient(var(--gold-2) 0 98%, rgba(255,255,255,0.2) 0);
}
.ring span {
 width: 70px;
 height: 70px;
 border-radius: 50%;
 display: grid;
 place-items: center;
 background: var(--deep);
 color: var(--cream);
 font-weight: 800;
 font-size: 1.3rem;
}
.plain-ring { background: conic-gradient(var(--gold) 0 94%, var(--line) 0); }
.plain-ring.third { background: conic-gradient(var(--bronze) 0 88%, var(--line) 0); }
.plain-ring span { background: var(--white); color: var(--ink); }
.fit { margin: 8px 0 0; font-size: 14.5px; }
.fit b { color: var(--good); }
.lead-card .fit b { color: #d7e7d8; }
.compare-section { padding-top: 10px; }
.compare-board {
 display: grid;
 grid-template-columns: 180px repeat(3, 1fr);
 border: 1px solid var(--line);
 border-radius: 24px;
 overflow: hidden;
 background: var(--white);
 box-shadow: var(--shadow);
}
.compare-board div { padding: 14px 16px; border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); }
.compare-board div:nth-child(4n) { border-right: 0; }
.compare-board .head-cell { background: var(--deep); color: var(--cream); font-weight: 700; }
.compare-board .label-cell { background: var(--cream); font-weight: 700; color: var(--ink-soft); }
.rest-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.slim-card {
 display: grid;
 grid-template-columns: 160px 1fr;
 background: var(--white);
 border-radius: 24px;
 overflow: hidden;
 border: 1px solid var(--line);
 box-shadow: var(--shadow);
 min-height: 210px;
}
.slim-card img { width: 100%; height: 100%; object-fit: cover; }
.slim-body { padding: 18px; }
.paper-section { background: var(--deep); color: var(--cream); }
.paper-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 28px; align-items: center; }
.paper-photo { border-radius: 28px; overflow: hidden; min-height: 360px; position: relative; }
.paper-photo img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.check-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.check-list li {
 display: grid;
 grid-template-columns: 36px 1fr;
 gap: 12px;
 align-items: start;
 background: rgba(255, 253, 249, 0.05);
 border: 1px solid rgba(247, 241, 230, 0.12);
 border-radius: 16px;
 padding: 12px 14px;
}
.check-list i { color: var(--gold-2); margin-top: 3px; }
.time-section { background: var(--paper-2); }
.time-line { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.time-step {
 background: var(--white);
 border-radius: 20px;
 border: 1px solid var(--line);
 padding: 18px 16px;
 box-shadow: var(--shadow);
 position: relative;
}
.time-step em {
 font-style: normal;
 color: var(--gold);
 font-weight: 800;
 font-size: 12px;
 letter-spacing: 0.12em;
}
.time-step h3 { margin: 8px 0; font-size: 1.05rem; letter-spacing: -0.02em; }
.time-step p { margin: 0; color: var(--muted); font-size: 14px; }
.close-band {
 background:
 linear-gradient(100deg, rgba(18, 16, 14, 0.92), rgba(18, 16, 14, 0.78)),
 url("/assets/images/6ac182c3d8a1037a.webp") center/cover no-repeat;
 color: var(--cream);
}
.close-grid { display: grid; grid-template-columns: 1fr 0.9fr; gap: 28px; align-items: start; }
.dossier-form {
 background: rgba(255, 253, 249, 0.96);
 color: var(--ink);
 border-radius: 24px;
 padding: 18px;
 display: grid;
 gap: 12px;
}
.dossier-form label { display: grid; gap: 6px; font-weight: 700; font-size: 13px; }
.dossier-form input, .dossier-form textarea {
 width: 100%;
 border: 1px solid var(--line-strong);
 background: var(--paper-2);
 border-radius: 12px;
 padding: 12px 12px;
 color: var(--ink);
 font-size: 15px;
}
.dossier-form textarea { min-height: 96px; resize: vertical; }
.site-footer { background: var(--deep-2); color: rgba(247, 241, 230, 0.82); padding: 42px 0 28px; }
.foot-grid { display: grid; grid-template-columns: 1.4fr 0.8fr 0.8fr; gap: 28px; }
.foot-brand strong { color: var(--cream); font-size: 1.05rem; }
.foot-col h3 { margin: 0 0 8px; color: var(--gold-2); font-size: 0.95rem; }
.legal { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 28px; padding-top: 16px; border-top: 1px solid rgba(247, 241, 230, 0.12); font-size: 13px; color: rgba(247, 241, 230, 0.62); }
@media (max-width: 1024px) {
 .nav-links { display: none; }
 .menu-toggle { display: flex; }
 .hero-layout, .dim-row, .podium-grid, .paper-grid, .close-grid, .foot-grid { grid-template-columns: 1fr; }
 .time-line { grid-template-columns: 1fr 1fr; }
 .compare-board { grid-template-columns: 1fr 1fr; }
 .compare-board .label-cell { display: none; }
 .slim-card { grid-template-columns: 120px 1fr; }
 .page-hero h1 { max-width: none; }
}
@media (max-width: 768px) {
 .header-inner { min-height: 68px; }
 .logo-text strong { font-size: 13px; }
 .rest-grid, .time-line, .nav-drawer.open { grid-template-columns: 1fr; }
 .rank-row { grid-template-columns: 56px 1fr; }
 .point { grid-column: 2; }
 .hero-layout { padding: 42px 0 48px; }
 .compare-board { grid-template-columns: 1fr; }
 .compare-board div { border-right: 0; }
}
@media (max-width: 520px) {
 .container { width: min(var(--max), calc(100% - 28px)); }
 .slim-card { grid-template-columns: 1fr; }
 .slim-card img { height: 160px; }
 .legal { flex-direction: column; }
 .btn { width: 100%; }
 .hero-actions .btn, .header-tools .btn { width: auto; }
 .header-tools .btn { padding: 10px 12px; font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
 html { scroll-behavior: auto; }
 .btn, .rank-row { transition: none; }
}

/* roulang page: category3 */
:root {
 --ink: #16130f;
 --ink-soft: #3a342c;
 --muted: #6f675c;
 --paper: #f4efe6;
 --paper-2: #fbf8f2;
 --white: #fffdf9;
 --line: #e5d9c8;
 --line-strong: #d3c3ab;
 --gold: #9a7432;
 --gold-2: #c6a15b;
 --gold-soft: #f3e6cc;
 --deep: #12100e;
 --deep-2: #1d1915;
 --cream: #f7f1e6;
 --good: #2d6248;
 --clay: #8a4e32;
 --silver: #c8c2ba;
 --bronze: #b pen;
 --radius: 22px;
 --radius-sm: 14px;
 --shadow: 0 18px 50px rgba(28, 22, 14, 0.08);
 --shadow-hover: 0 22px 46px rgba(28, 22, 14, 0.14);
 --space: 88px;
 --font: "Be Vietnam Pro", "Segoe UI", sans-serif;
 --max: 1180px;
}
:root { --space: 68px; }
:root { --space: 48px; }
:root {
 --ink: #16130f;
 --ink-soft: #3a342c;
 --muted: #6f675c;
 --paper: #f4efe6;
 --paper-2: #fbf8f2;
 --white: #fffdf9;
 --line: #e5d9c8;
 --line-strong: #d3c3ab;
 --gold: #9a7432;
 --gold-2: #c6a15b;
 --gold-soft: #f3e6cc;
 --deep: #12100e;
 --deep-2: #1d1915;
 --cream: #f7f1e6;
 --good: #2d6248;
 --clay: #8a4e32;
 --silver: #c8c2ba;
 --bronze: #b pen;
 --radius: 22px;
 --radius-sm: 14px;
 --shadow: 0 18px 50px rgba(28, 22, 14, 0.08);
 --shadow-hover: 0 22px 46px rgba(28, 22, 14, 0.14);
 --space: 88px;
 --font: "Be Vietnam Pro", "Segoe UI", sans-serif;
 --max: 1180px;
}
:root { --bronze: #a97142; --space: 76px; }
html { scroll-behavior: smooth; }
*, *::before, *::after { box-sizing: border-box; }
body {
 margin: 0;
 font-family: var(--font);
 color: var(--ink);
 background:
  radial-gradient(1200px 420px at 90% -10%, rgba(198, 161, 91, 0.16), transparent 50%),
  var(--paper);
 line-height: 1.7;
 font-size: 16px;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font-family: inherit; }
button { cursor: pointer; }
::selection { background: var(--gold-soft); color: var(--ink); }
.container { width: min(var(--max), calc(100% - 40px)); margin: 0 auto; }
.site-header {
 position: sticky;
 top: 0;
 z-index: 50;
 background: rgba(251, 248, 242, 0.92);
 backdrop-filter: blur(16px);
 border-bottom: 1px solid rgba(211, 195, 171, 0.7);
}
.header-inner {
 min-height: 76px;
 display: flex;
 align-items: center;
 gap: 18px;
}
.logo { display: flex; align-items: center; gap: 10px; min-width: 0; }
.logo-mark {
 width: 42px;
 height: 42px;
 border-radius: 13px;
 display: grid;
 place-items: center;
 background: var(--deep);
 color: var(--gold-2);
 font-weight: 800;
 letter-spacing: 0.04em;
 flex: 0 0 auto;
}
.logo-text { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.logo-text strong {
 font-size: 14px;
 font-weight: 700;
 letter-spacing: -0.01em;
 white-space: nowrap;
}
.logo-text small {
 color: var(--gold);
 font-size: 11px;
 letter-spacing: 0.12em;
 text-transform: uppercase;
 font-weight: 600;
}
.nav-links { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.nav-links a, .drawer-link {
 color: var(--ink-soft);
 font-size: 13.5px;
 font-weight: 600;
 padding: 8px 10px;
 border-radius: 999px;
 transition: background 0.2s ease, color 0.2s ease;
}
.nav-links a:hover, .drawer-link:hover { background: var(--gold-soft); color: var(--ink); }
.nav-links a:focus-visible, .drawer-link:focus-visible, .btn:focus-visible, .menu-toggle:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, summary:focus-visible {
 outline: 2px solid var(--gold);
 outline-offset: 2px;
}
.nav-links a.is-active, .drawer-link.is-active {
 background: var(--deep);
 color: var(--cream);
}
.header-tools { display: flex; align-items: center; gap: 8px; margin-left: 8px; }
.menu-toggle {
 display: none;
 width: 44px;
 height: 44px;
 border-radius: 12px;
 border: 1px solid var(--line-strong);
 background: var(--white);
 align-items: center;
 justify-content: center;
 flex-direction: column;
 gap: 5px;
}
.menu-toggle span {
 display: block;
 width: 16px;
 height: 1.5px;
 background: var(--ink);
}
.nav-drawer {
 display: none;
 width: min(var(--max), calc(100% - 40px));
 margin: 0 auto;
 border-top: 1px solid var(--line);
 padding: 10px 0 16px;
 grid-template-columns: 1fr 1fr;
 gap: 6px;
}
.nav-drawer.open { display: grid; }
.btn {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 gap: 8px;
 border-radius: 999px;
 padding: 12px 18px;
 border: 1px solid transparent;
 font-weight: 700;
 letter-spacing: 0.01em;
 transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn-gold {
 background: linear-gradient(180deg, #d7b56a, #9a7432);
 color: #22190d;
 box-shadow: 0 10px 24px rgba(154, 116, 50, 0.28);
}
.btn-gold:hover { box-shadow: 0 16px 30px rgba(154, 116, 50, 0.34); }
.btn-ghost {
 background: transparent;
 color: var(--cream);
 border-color: rgba(247, 241, 230, 0.35);
}
.btn-ghost:hover { background: rgba(247, 241, 230, 0.08); }
.btn-dark {
 background: var(--deep);
 color: var(--cream);
}
.btn-dark:hover { background: #2a241d; }
.btn-line {
 background: var(--white);
 color: var(--ink);
 border-color: var(--line-strong);
}
.btn-line:hover { background: var(--gold-soft); }
.eyebrow {
 display: inline-flex;
 align-items: center;
 gap: 8px;
 color: var(--gold-2);
 letter-spacing: 0.16em;
 text-transform: uppercase;
 font-size: 12px;
 font-weight: 700;
 margin-bottom: 16px;
}
.lead { margin-top: 18px; color: rgba(247, 241, 230, 0.84); max-width: 62ch; }
.lead + .lead { margin-top: 12px; }
.section { padding: var(--space) 0; }
.section-head { margin-bottom: 28px; max-width: 760px; }
.section-head h2, .block-title {
 margin: 0;
 font-size: clamp(1.7rem, 3vw, 2.55rem);
 line-height: 1.12;
 letter-spacing: -0.035em;
}
.section-head p, .ink-copy { color: var(--ink-soft); }
.section-head p { margin: 12px 0 0; }
.kicker {
 color: var(--gold);
 font-size: 12px;
 font-weight: 700;
 letter-spacing: 0.14em;
 text-transform: uppercase;
 margin: 0 0 8px;
}
.sec-hero {
 position: relative;
 color: var(--cream);
 background:
  linear-gradient(100deg, rgba(12, 10, 8, 0.94) 0%, rgba(12, 10, 8, 0.82) 48%, rgba(12, 10, 8, 0.58) 100%),
  url("/assets/images/6ac182c3d8a1037a.webp") center/cover no-repeat;
 overflow: hidden;
}
.sec-hero::after {
 content: "";
 position: absolute;
 inset: auto 0 0 0;
 height: 90px;
 background: linear-gradient(180deg, transparent, rgba(18, 16, 14, 0.35));
 pointer-events: none;
}
.hero-wrap { padding: 64px 0 28px; display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 36px; align-items: end; }
.sec-hero h1 {
 margin: 0;
 font-size: clamp(2.3rem, 4.6vw, 4.15rem);
 line-height: 0.98;
 letter-spacing: -0.045em;
 font-weight: 800;
 max-width: 14ch;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.fact-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.fact-row span, .pill {
 display: inline-flex;
 align-items: center;
 gap: 8px;
 border-radius: 999px;
 padding: 7px 12px;
 background: rgba(247, 241, 230, 0.08);
 border: 1px solid rgba(247, 241, 230, 0.16);
 color: var(--cream);
 font-size: 13px;
 font-weight: 600;
}
.hero-panel {
 background: rgba(18, 16, 14, 0.72);
 border: 1px solid rgba(247, 241, 230, 0.14);
 border-radius: 28px;
 overflow: hidden;
 box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
 backdrop-filter: blur(8px);
}
.shot { margin: 0; position: relative; min-height: 210px; }
.shot img { width: 100%; height: 230px; object-fit: cover; }
.shot figcaption {
 position: absolute;
 left: 14px;
 bottom: 14px;
 background: rgba(18, 16, 14, 0.78);
 color: var(--cream);
 border-radius: 999px;
 padding: 6px 12px;
 font-size: 12px;
 font-weight: 600;
}
.lock-list { list-style: none; margin: 0; padding: 8px 8px 14px; }
.lock-list li {
 display: grid;
 grid-template-columns: 36px 1fr auto;
 gap: 10px;
 align-items: center;
 padding: 11px 12px;
 border-radius: 14px;
}
.lock-list li + li { margin-top: 4px; }
.lock-list li:hover { background: rgba(247, 241, 230, 0.06); }
.lock-list i {
 width: 36px;
 height: 36px;
 border-radius: 12px;
 display: grid;
 place-items: center;
 background: rgba(198, 161, 91, 0.16);
 color: var(--gold-2);
}
.lock-list strong { display: block; font-size: 14px; }
.lock-list small { color: rgba(247, 241, 230, 0.66); }
.lock-list em { font-style: normal; color: var(--gold-2); font-size: 12px; font-weight: 700; }
.countbar {
 position: relative;
 z-index: 1;
 display: flex;
 justify-content: space-between;
 align-items: center;
 gap: 18px;
 margin: 8px auto 0;
 padding: 16px 18px 22px;
}
.countbar strong { display: block; font-size: 15px; }
.countbar p { margin: 2px 0 0; color: rgba(247, 241, 230, 0.7); font-size: 13px; }
.ticks { display: flex; align-items: flex-end; gap: 8px; }
.ticks b {
 min-width: 64px;
 text-align: center;
 background: rgba(247, 241, 230, 0.08);
 border: 1px solid rgba(198, 161, 91, 0.4);
 border-radius: 14px;
 padding: 8px 8px 6px;
 font-size: 28px;
 letter-spacing: -0.04em;
 line-height: 1;
}
.ticks em { font-style: normal; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold-2); margin: 0 8px 6px 0; }
.band { background: var(--paper-2); border-top: 1px solid transparent; }
.band-white { background: var(--white); }
.band-cream { background: var(--cream); }
.dim-scroll {
 display: grid;
 grid-auto-flow: column;
 grid-auto-columns: minmax(180px, 1fr);
 gap: 12px;
 overflow-x: auto;
 padding-bottom: 6px;
 scroll-snap-type: x mandatory;
}
.dim {
 scroll-snap-align: start;
 background: var(--white);
 border: 1px solid var(--line);
 border-radius: 18px;
 padding: 16px;
 min-height: 132px;
 box-shadow: var(--shadow);
}
.dim span { color: var(--gold); font-weight: 800; font-size: 12px; letter-spacing: 0.08em; }
.dim strong { display: block; margin: 10px 0 6px; font-size: 15px; letter-spacing: -0.02em; }
.dim em { font-style: normal; color: var(--muted); font-size: 13px; }
.rank-list { display: flex; flex-direction: column; gap: 12px; }
.rank-row {
 display: grid;
 grid-template-columns: auto 1fr auto auto;
 gap: 18px;
 align-items: center;
 background: var(--white);
 border: 1px solid var(--line);
 border-radius: var(--radius);
 padding: 16px 18px;
 box-shadow: var(--shadow);
 transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.rank-row:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); border-color: var(--gold-2); }
.medal {
 width: 54px;
 height: 54px;
 border-radius: 16px;
 display: grid;
 place-items: center;
 background: var(--deep);
 color: var(--cream);
 font-size: 24px;
}
.rank-line { margin: 0; font-size: clamp(1rem, 1.7vw, 1.22rem); letter-spacing: -0.02em; line-height: 1.35; }
.rank-row p { margin: 6px 0 0; color: var(--muted); font-size: 14px; }
.score-big { text-align: right; min-width: 84px; }
.score-big strong { display: block; font-size: 34px; line-height: 1; letter-spacing: -0.04em; color: var(--gold); }
.score-big span, .stars { color: var(--gold); font-weight: 700; font-size: 14px; }
.stars { letter-spacing: 0.08em; white-space: nowrap; }
.podium {
 display: grid;
 grid-template-columns: 1.25fr 0.75fr;
 gap: 16px;
}
.pod-card {
 background: var(--white);
 border: 1px solid var(--line);
 border-radius: 28px;
 padding: 22px;
 box-shadow: var(--shadow);
}
.pod-card.prime {
 grid-row: span 2;
 background:
  linear-gradient(180deg, rgba(18, 16, 14, 0.2), rgba(18, 16, 14, 0.88)),
  url("/assets/images/66f8fa4d473e2e42.webp") center/cover no-repeat;
 color: var(--cream);
 display: flex;
 flex-direction: column;
 justify-content: space-between;
 min-height: 560px;
}
.pod-top { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; }
.badge {
 display: inline-flex;
 align-items: center;
 gap: 6px;
 border-radius: 999px;
 padding: 6px 10px;
 background: var(--gold-soft);
 color: #5c4314;
 font-size: 12px;
 font-weight: 800;
 letter-spacing: 0.06em;
 text-transform: uppercase;
}
.prime .badge { background: rgba(198, 161, 91, 0.18); color: var(--gold-2); }
.ring {
 width: 92px;
 height: 92px;
 border-radius: 50%;
 display: grid;
 place-items: center;
 background: conic-gradient(var(--gold) calc(var(--p) * 1%), #eadcc6 0);
 flex: 0 0 auto;
}
.ring span {
 width: 70px;
 height: 70px;
 border-radius: 50%;
 display: grid;
 place-items: center;
 background: var(--white);
 color: var(--ink);
 font-weight: 800;
 font-size: 22px;
}
.prime .ring { background: conic-gradient(var(--gold-2) calc(var(--p) * 1%), rgba(247, 241, 230, 0.18) 0); }
.prime .ring span { background: var(--deep); color: var(--cream); }
.pod-card h3 { margin: 14px 0 8px; font-size: 1.45rem; letter-spacing: -0.03em; line-height: 1.2; }
.pod-card .rank-line { font-size: 1.05rem; }
.param { margin: 12px 0 0; padding: 0; list-style: none; }
.param li {
 display: flex;
 justify-content: space-between;
 gap: 12px;
 padding: 8px 0;
 border-top: 1px solid var(--line);
 font-size: 14px;
}
.prime .param li { border-top-color: rgba(247, 241, 230, 0.14); }
.param b { font-weight: 600; }
.param span { color: var(--muted); text-align: right; }
.prime .param span { color: rgba(247, 241, 230, 0.72); }
.fit-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
.fit-pair div { border-radius: 16px; padding: 12px; background: var(--paper); }
.prime .fit-pair div { background: rgba(247, 241, 230, 0.08); }
.fit-pair b { display: block; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 4px; }
.fit-pair p { margin: 0; font-size: 14px; }
.cross-note {
 margin-top: 16px;
 padding: 18px 20px;
 border-radius: 20px;
 background: var(--deep);
 color: var(--cream);
 display: grid;
 grid-template-columns: 180px 1fr;
 gap: 18px;
 align-items: center;
}
.cross-note strong { color: var(--gold-2); letter-spacing: 0.08em; text-transform: uppercase; font-size: 12px; }
.cross-note p { margin: 0; color: rgba(247, 241, 230, 0.84); }
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 22px; background: var(--white); box-shadow: var(--shadow); }
.compare-table { width: 100%; border-collapse: collapse; min-width: 720px; }
.compare-table th, .compare-table td { text-align: left; padding: 16px 18px; border-bottom: 1px solid var(--line); vertical-align: top; }
.compare-table th { background: var(--deep); color: var(--cream); font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; }
.compare-table tr:last-child td { border-bottom: 0; }
.compare-table td:first-child { font-weight: 700; }
.compare-table .mark { color: var(--gold); font-weight: 800; font-size: 18px; }
.slim { display: flex; flex-direction: column; gap: 14px; }
.slim-card {
 display: grid;
 grid-template-columns: 92px 1fr 120px;
 gap: 16px;
 align-items: center;
 background: var(--white);
 border-radius: 20px;
 border: 1px solid var(--line);
 padding: 14px;
 box-shadow: var(--shadow);
}
.slim-card img { width: 92px; height: 78px; object-fit: cover; border-radius: 14px; }
.slim-card h3 { margin: 0 0 6px; font-size: 1.02rem; letter-spacing: -0.02em; }
.slim-card p { margin: 0; color: var(--muted); font-size: 14px; }
.scene {
 display: grid;
 grid-template-columns: 0.9fr 1.1fr;
 gap: 28px;
 align-items: center;
}
.scene-photo { position: relative; border-radius: 28px; overflow: hidden; min-height: 420px; box-shadow: var(--shadow); }
.scene-photo img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.photo-badge {
 position: absolute;
 left: 16px;
 bottom: 16px;
 background: rgba(18, 16, 14, 0.82);
 color: var(--cream);
 border-radius: 16px;
 padding: 12px 14px;
 max-width: 260px;
}
.photo-badge strong { display: block; }
.photo-badge span { color: rgba(247, 241, 230, 0.74); font-size: 13px; }
.case { display: flex; flex-direction: column; gap: 12px; }
.case article {
 display: grid;
 grid-template-columns: 54px 1fr;
 gap: 12px;
 padding: 14px;
 border-radius: 18px;
 background: var(--white);
 border: 1px solid var(--line);
}
.case i {
 width: 54px;
 height: 54px;
 border-radius: 16px;
 display: grid;
 place-items: center;
 background: var(--gold-soft);
 color: var(--gold);
 font-size: 18px;
}
.case h3 { margin: 0 0 4px; font-size: 1.05rem; }
.case p { margin: 0; color: var(--ink-soft); font-size: 14.5px; }
.faq { display: flex; flex-direction: column; gap: 10px; }
.faq details {
 background: var(--white);
 border: 1px solid var(--line);
 border-radius: 18px;
 padding: 0 18px;
 box-shadow: var(--shadow);
}
.faq summary {
 cursor: pointer;
 font-weight: 700;
 padding: 16px 0;
 list-style: none;
 display: flex;
 justify-content: space-between;
 gap: 16px;
 align-items: center;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--gold); font-size: 22px; line-height: 1; }
.faq details[open] summary::after { content: "–"; }
.faq details p { margin: 0 0 16px; color: var(--ink-soft); }
.cta-band { background: var(--deep); color: var(--cream); }
.cta-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 28px; align-items: start; }
.cta-band .lead { max-width: 46ch; }
.cta-points { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.form {
 background: var(--white);
 color: var(--ink);
 border-radius: 28px;
 padding: 22px;
 box-shadow: var(--shadow-hover);
}
.form h3 { margin: 0 0 6px; letter-spacing: -0.03em; }
.form .hint { margin: 0 0 16px; color: var(--muted); font-size: 14px; }
.fields { 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; }
.field input, .field select, .field textarea {
 width: 100%;
 border-radius: 14px;
 border: 1px solid var(--line-strong);
 background: var(--paper-2);
 color: var(--ink);
 padding: 12px 12px;
 font-size: 15px;
}
.field textarea { min-height: 96px; resize: vertical; }
.form-note {
 display: none;
 margin-top: 12px;
 padding: 12px 14px;
 border-radius: 14px;
 background: #e7f3ec;
 color: var(--good);
 font-weight: 600;
}
.form-note.is-on { display: block; }
.site-footer { background: var(--deep); color: rgba(247, 241, 230, 0.78); padding: 56px 0 28px; }
.foot-grid { display: grid; grid-template-columns: 1.4fr 0.8fr 0.8fr; gap: 32px; }
.foot-brand strong { display: block; color: var(--cream); font-size: 18px; margin-bottom: 10px; }
.foot-brand p, .foot-col p { margin: 0; }
.foot-col h3 {
 color: var(--gold-2);
 font-size: 13px;
 letter-spacing: 0.12em;
 text-transform: uppercase;
 margin: 0 0 10px;
}
.legal {
 display: flex;
 justify-content: space-between;
 gap: 12px;
 flex-wrap: wrap;
 border-top: 1px solid rgba(247, 241, 230, 0.12);
 margin-top: 28px;
 padding-top: 16px;
 font-size: 13px;
 color: rgba(247, 241, 230, 0.62);
}
@media (max-width: 1024px) {
 .nav-links { display: none; }
 .menu-toggle { display: flex; }
 .hero-wrap, .podium, .scene, .cta-grid, .cross-note, .foot-grid { grid-template-columns: 1fr; }
 .pod-card.prime { grid-row: auto; min-height: 0; }
 .rank-row { grid-template-columns: auto 1fr; }
 .score-big, .stars { grid-column: 2; text-align: left; }
 .slim-card { grid-template-columns: 92px 1fr; }
 .slim-card .score-big { grid-column: auto; }
}
@media (max-width: 768px) {
 .section { padding: 52px 0; }
 .hero-wrap { padding-top: 42px; }
 .countbar, .ticks { flex-wrap: wrap; }
 .fields, .fit-pair, .nav-drawer { grid-template-columns: 1fr; }
 .header-tools .btn span { display: none; }
 .scene-photo { min-height: 280px; }
}
@media (max-width: 520px) {
 .container { width: min(var(--max), calc(100% - 28px)); }
 .logo-text small { display: none; }
 .logo-text strong { font-size: 12.5px; max-width: 46vw; overflow: hidden; text-overflow: ellipsis; }
 .sec-hero h1 { max-width: none; }
 .rank-line { font-size: 0.98rem; }
 .ticks b { min-width: 54px; font-size: 22px; }
 .slim-card { grid-template-columns: 1fr; }
 .legal { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
 html { scroll-behavior: auto; }
 .btn, .rank-row { transition: none; }
}

/* roulang page: category4 */
:root {
 --ink: #16130f;
 --ink-soft: #3a342c;
 --muted: #6f675c;
 --paper: #f4efe6;
 --paper-2: #fbf8f2;
 --white: #fffdf9;
 --line: #e5d9c8;
 --line-strong: #d3c3ab;
 --gold: #9a7432;
 --gold-2: #c6a15b;
 --gold-soft: #f3e6cc;
 --deep: #12100e;
 --deep-2: #1d1915;
 --cream: #f7f1e6;
 --good: #2d6248;
 --clay: #8a4e32;
 --silver: #c8c2ba;
 --bronze: #b08d57;
 --radius: 22px;
 --radius-sm: 14px;
 --shadow: 0 18px 50px rgba(28, 22, 14, 0.08);
 --shadow-hover: 0 22px 46px rgba(28, 22, 14, 0.14);
 --space: 88px;
 --font: "Be Vietnam Pro", "Segoe UI", sans-serif;
 --max: 1180px;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
 margin: 0;
 font-family: var(--font);
 color: var(--ink);
 background: var(--paper);
 line-height: 1.7;
 font-size: 16px;
}
img { max-width: 100%; display: block; height: auto; }
a { color: inherit; text-decoration: none; }
button, input, textarea { font-family: inherit; }
button { cursor: pointer; }
p { margin: 0 0 12px; }
h1, h2, h3 { margin: 0; letter-spacing: -0.03em; line-height: 1.15; }
ul { margin: 0; padding: 0; }
.container { width: min(var(--max), calc(100% - 40px)); margin: 0 auto; }
.site-header {
 position: sticky;
 top: 0;
 z-index: 50;
 background: rgba(251, 248, 242, 0.92);
 backdrop-filter: blur(16px);
 border-bottom: 1px solid rgba(211, 195, 171, 0.7);
}
.header-inner {
 min-height: 76px;
 display: flex;
 align-items: center;
 gap: 18px;
}
.logo { display: flex; align-items: center; gap: 10px; min-width: 0; }
.logo-mark {
 width: 42px;
 height: 42px;
 border-radius: 13px;
 display: grid;
 place-items: center;
 background: var(--deep);
 color: var(--gold-2);
 font-weight: 800;
 letter-spacing: 0.04em;
 flex: 0 0 auto;
}
.logo-text { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.logo-text strong {
 font-size: 13.5px;
 font-weight: 700;
 letter-spacing: -0.01em;
}
.logo-text small {
 color: var(--gold);
 font-size: 11px;
 letter-spacing: 0.12em;
 text-transform: uppercase;
 font-weight: 600;
}
.nav-links { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.nav-links a, .drawer-link {
 color: var(--ink-soft);
 font-size: 13.5px;
 font-weight: 600;
 padding: 8px 10px;
 border-radius: 999px;
 transition: background 0.2s ease, color 0.2s ease;
}
.nav-links a:hover, .drawer-link:hover { background: var(--gold-soft); color: var(--ink); }
.nav-links a:focus-visible, .drawer-link:focus-visible, .btn:focus-visible, .menu-toggle:focus-visible, input:focus-visible, textarea:focus-visible {
 outline: 2px solid var(--gold);
 outline-offset: 2px;
}
.nav-links a.is-active, .drawer-link.is-active {
 background: var(--deep);
 color: var(--cream);
}
.header-tools { display: flex; align-items: center; gap: 8px; margin-left: 8px; }
.header-cta { padding: 10px 14px; font-size: 13px; white-space: nowrap; }
.menu-toggle {
 display: none;
 width: 44px;
 height: 44px;
 border-radius: 12px;
 border: 1px solid var(--line-strong);
 background: var(--white);
 align-items: center;
 justify-content: center;
 flex-direction: column;
 gap: 5px;
}
.menu-toggle span { display: block; width: 16px; height: 1.5px; background: var(--ink); }
.menu-toggle[aria-expanded="true"] { background: var(--deep); }
.menu-toggle[aria-expanded="true"] span { background: var(--cream); }
.nav-drawer {
 display: none;
 border-top: 1px solid var(--line);
 padding: 10px 0 16px;
 grid-template-columns: 1fr 1fr;
 gap: 6px;
}
.nav-drawer.open { display: grid; }
.btn {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 gap: 8px;
 border-radius: 999px;
 padding: 12px 18px;
 border: 1px solid transparent;
 font-weight: 700;
 letter-spacing: 0.01em;
 transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease;
 text-decoration: none;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn-gold {
 background: linear-gradient(180deg, #d7b56a, #9a7432);
 color: #22190d;
 box-shadow: 0 10px 24px rgba(154, 116, 50, 0.28);
}
.btn-gold:hover { box-shadow: 0 16px 30px rgba(154, 116, 50, 0.34); color: #22190d; }
.btn-ghost {
 background: transparent;
 color: var(--cream);
 border-color: rgba(247, 241, 230, 0.35);
}
.btn-ghost:hover { background: rgba(247, 241, 230, 0.08); color: var(--cream); }
.btn-dark { background: var(--deep); color: var(--cream); }
.btn-dark:hover { background: #2a241d; color: var(--cream); }
.eyebrow {
 display: inline-flex;
 align-items: center;
 gap: 8px;
 color: var(--gold-2);
 letter-spacing: 0.16em;
 text-transform: uppercase;
 font-size: 12px;
 font-weight: 700;
 margin-bottom: 16px;
}
.section { padding: var(--space) 0; }
.section-head { margin-bottom: 28px; max-width: 760px; }
.section-head h2 { font-size: clamp(1.7rem, 3vw, 2.5rem); font-weight: 800; }
.section-head p { margin-top: 10px; color: var(--muted); }
.promo-hero {
 position: relative;
 color: var(--cream);
 background:
 linear-gradient(115deg, rgba(12, 10, 8, 0.94) 0%, rgba(12, 10, 8, 0.82) 48%, rgba(12, 10, 8, 0.55) 100%),
 url("/assets/images/d17f892301e5aaea.webp") center/cover no-repeat;
 overflow: hidden;
}
.promo-hero .container { position: relative; z-index: 1; padding-top: 64px; padding-bottom: 72px; }
.burst {
 position: absolute;
 top: 26px;
 right: 4%;
 width: 124px;
 height: 124px;
 display: grid;
 place-items: center;
 text-align: center;
 padding: 18px;
 background: radial-gradient(circle at 30% 30%, #f3dc9a, #c6a15b 42%, #9a7432 78%);
 color: #22190d;
 font-weight: 800;
 font-size: 14px;
 line-height: 1.15;
 letter-spacing: 0.04em;
 clip-path: polygon(50% 0%, 61% 16%, 82% 8%, 76% 29%, 100% 35%, 80% 50%, 96% 72%, 72% 68%, 64% 96%, 50% 76%, 36% 96%, 28% 68%, 4% 72%, 20% 50%, 0% 35%, 24% 29%, 18% 8%, 39% 16%);
 transform: rotate(8deg);
 box-shadow: 0 16px 30px rgba(0, 0, 0, 0.28);
 z-index: 2;
 animation: pulse 2.8s ease-in-out infinite;
}
.promo-hero h1 {
 font-size: clamp(2.3rem, 4.8vw, 4.35rem);
 line-height: 0.98;
 letter-spacing: -0.045em;
 font-weight: 800;
 max-width: 14ch;
}
.lead { margin-top: 16px; color: rgba(247, 241, 230, 0.84); max-width: 68ch; }
.lead + .lead { margin-top: 12px; }
.limit-line {
 display: inline-flex;
 align-items: center;
 gap: 8px;
 margin-top: 18px;
 padding: 7px 12px;
 border-radius: 999px;
 background: rgba(198, 161, 91, 0.16);
 border: 1px solid rgba(215, 181, 106, 0.45);
 color: #f0d48a;
 font-size: 13px;
 font-weight: 700;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.fact-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.fact-chip {
 padding: 7px 12px;
 border-radius: 999px;
 border: 1px solid rgba(247, 241, 230, 0.2);
 color: rgba(247, 241, 230, 0.86);
 font-size: 13px;
 font-weight: 600;
 background: rgba(255, 253, 249, 0.04);
}
.side-board {
 background: rgba(18, 16, 14, 0.72);
 border: 1px solid rgba(247, 241, 230, 0.14);
 border-radius: 28px;
 padding: 18px;
 box-shadow: 0 24px 50px rgba(0, 0, 0, 0.28);
 backdrop-filter: blur(8px);
}
.side-board img {
 width: 100%;
 height: 168px;
 object-fit: cover;
 border-radius: 16px;
 margin-bottom: 14px;
}
.side-kicker { color: var(--gold-2); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700; }
.side-board h2 { font-size: 1.35rem; margin: 6px 0 12px; color: var(--cream); }
.mini-rank {
 display: grid;
 grid-template-columns: auto 1fr auto;
 gap: 10px;
 align-items: center;
 padding: 10px 0;
 border-top: 1px solid rgba(247, 241, 230, 0.1);
}
.mini-rank b { font-size: 1.35rem; color: #f0d48a; letter-spacing: -0.04em; }
.mini-rank span { color: rgba(247, 241, 230, 0.88); font-weight: 600; font-size: 14px; }
.stars { color: #e2c27a; letter-spacing: 1px; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25); }
.dim-band { background: var(--deep); color: var(--cream); }
.dim-band .section-head p { color: rgba(247, 241, 230, 0.72); }
.dim-strip {
 display: grid;
 grid-template-columns: repeat(6, 1fr);
 border: 1px solid rgba(247, 241, 230, 0.12);
 border-radius: 24px;
 overflow: hidden;
}
.dim-item { padding: 18px 16px; border-right: 1px solid rgba(247, 241, 230, 0.1); }
.dim-item:last-child { border-right: 0; }
.dim-item small { display: block; color: var(--gold-2); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; font-size: 11px; margin-bottom: 6px; }
.dim-item strong { display: block; font-size: 1.05rem; font-weight: 700; }
.rank-board { background: var(--paper-2); }
.rank-line {
 display: block;
 padding: 18px 20px 16px;
 background: var(--white);
 border: 1px solid var(--line);
 border-radius: 20px;
 box-shadow: var(--shadow);
 margin-bottom: 12px;
 transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.rank-line:hover { transform: translateX(4px); box-shadow: var(--shadow-hover); border-color: var(--line-strong); }
.rank-title {
 display: flex;
 flex-wrap: wrap;
 align-items: baseline;
 gap: 0 2px;
 font-size: clamp(1.02rem, 2vw, 1.28rem);
 font-weight: 800;
}
.rank-meta { font-weight: 700; }
.rank-meta::before { content: " | "; color: var(--muted); font-weight: 600; }
.score-xl { font-size: 1.7rem; color: var(--gold); letter-spacing: -0.04em; font-weight: 800; }
.rank-note { margin: 8px 0 0; color: var(--ink-soft); }
.podium { background: linear-gradient(180deg, var(--paper) 0%, var(--cream) 100%); }
.podium-card {
 display: grid;
 grid-template-columns: 220px minmax(0, 1fr) 120px;
 gap: 0 22px;
 align-items: stretch;
 background: var(--white);
 border: 1px solid var(--line);
 border-radius: 28px;
 box-shadow: var(--shadow);
 overflow: hidden;
 margin-bottom: 18px;
 transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.podium-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); }
.podium-photo { position: relative; min-height: 100%; }
.podium-photo img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.medal {
 position: absolute;
 left: 12px;
 top: 12px;
 z-index: 1;
 display: inline-flex;
 align-items: center;
 gap: 6px;
 padding: 6px 10px;
 border-radius: 999px;
 font-weight: 800;
 font-size: 12px;
 letter-spacing: 0.06em;
}
.medal.m1 { background: linear-gradient(180deg, #f0d48a, #9a7432); color: #22190d; }
.medal.m2 { background: linear-gradient(180deg, #f7f4ef, #c8c2ba); color: #221e1a; }
.medal.m3 { background: linear-gradient(180deg, #efd0b8, #8a4e32); color: #2a160f; }
.podium-body { padding: 20px 4px 20px 0; }
.podium-body h3 { font-size: 1.15rem; margin-bottom: 8px; }
.param-list { list-style: none; }
.param-list li {
 display: flex;
 gap: 10px;
 align-items: flex-start;
 padding: 7px 0;
 border-bottom: 1px solid var(--line);
 color: var(--ink-soft);
 font-size: 14.5px;
}
.param-list i { color: var(--gold); margin-top: 4px; }
.fit-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.fit, .unfit {
 border-radius: 999px;
 padding: 6px 10px;
 font-size: 13px;
 font-weight: 700;
}
.fit { background: #e7f3ec; color: var(--good); }
.unfit { background: #f8ece6; color: var(--clay); }
.score-col {
 display: grid;
 place-items: center;
 padding: 16px;
 background: var(--paper-2);
 border-left: 1px solid var(--line);
}
.score-ring {
 --p: 98;
 width: 96px;
 height: 96px;
 border-radius: 50%;
 display: grid;
 place-items: center;
 background: conic-gradient(#c6a15b calc(var(--p) * 1%), #efe4d2 0);
}
.score-ring span {
 width: 74px;
 height: 74px;
 border-radius: 50%;
 background: var(--white);
 display: grid;
 place-items: center;
 font-weight: 800;
 font-size: 1.45rem;
 color: var(--ink);
 letter-spacing: -0.04em;
}
.cross-note {
 margin-top: 8px;
 padding: 22px 24px;
 border-radius: 24px;
 background: var(--deep);
 color: rgba(247, 241, 230, 0.88);
 display: grid;
 grid-template-columns: 180px 1fr;
 gap: 18px;
 align-items: start;
}
.cross-note strong { color: var(--gold-2); font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; }
.compare-wrap { background: var(--white); }
.compare-table {
 width: 100%;
 border-collapse: separate;
 border-spacing: 0;
 border: 1px solid var(--line);
 border-radius: 22px;
 overflow: hidden;
 background: var(--paper-2);
}
.compare-table th, .compare-table td {
 padding: 14px 16px;
 text-align: left;
 border-bottom: 1px solid var(--line);
 vertical-align: top;
}
.compare-table th { background: var(--deep); color: var(--cream); font-size: 14px; }
.compare-table tr:last-child td { border-bottom: 0; }
.compare-table tbody th { background: var(--gold-soft); color: var(--ink); width: 22%; }
.compare-table td { font-weight: 600; }
.rest-ranks { background: var(--paper); }
.slim-card {
 display: grid;
 grid-template-columns: 92px 1fr;
 gap: 16px;
 padding: 16px 18px;
 border-radius: 18px;
 background: var(--white);
 border: 1px solid var(--line);
 margin-bottom: 12px;
}
.slim-no {
 width: 92px;
 height: 72px;
 border-radius: 16px;
 display: grid;
 place-items: center;
 background: var(--deep);
 color: var(--gold-2);
 font-weight: 800;
 font-size: 1.4rem;
}
.slim-card p { margin: 6px 0 0; color: var(--ink-soft); }
.dossier { background: var(--cream); }
.dossier-photo {
 position: relative;
 border-radius: 28px;
 overflow: hidden;
 min-height: 420px;
 box-shadow: var(--shadow);
}
.dossier-photo img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.photo-badge {
 position: absolute;
 left: 16px;
 bottom: 16px;
 background: rgba(18, 16, 14, 0.82);
 color: var(--cream);
 border-radius: 14px;
 padding: 10px 12px;
 font-size: 13px;
 font-weight: 700;
 max-width: 80%;
}
.check-list { list-style: none; margin-top: 8px; }
.check-list li {
 display: flex;
 gap: 12px;
 padding: 12px 0;
 border-bottom: 1px solid var(--line);
 font-weight: 600;
}
.check-list i { color: var(--good); margin-top: 4px; }
.close-band {
 background:
 linear-gradient(100deg, rgba(18, 16, 14, 0.92), rgba(18, 16, 14, 0.78)),
 url("/assets/images/7e5184b5548d62d3.webp") center/cover no-repeat;
 color: var(--cream);
}
.close-band h2 { font-size: clamp(1.8rem, 3vw, 2.7rem); max-width: 16ch; }
.close-band p { color: rgba(247, 241, 230, 0.82); max-width: 62ch; }
.close-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
.site-footer { background: var(--deep); color: rgba(247, 241, 230, 0.82); padding: 56px 0 28px; }
.foot-grid { display: grid; grid-template-columns: 1.4fr 0.8fr 0.8fr; gap: 32px; }
.foot-brand strong { color: var(--cream); font-size: 18px; display: block; margin-bottom: 10px; }
.foot-col h3 { color: var(--gold-2); font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; margin: 0 0 10px; }
.legal {
 margin-top: 28px;
 padding-top: 18px;
 border-top: 1px solid rgba(247, 241, 230, 0.12);
 display: flex;
 justify-content: space-between;
 gap: 12px;
 flex-wrap: wrap;
 color: rgba(247, 241, 230, 0.62);
 font-size: 13px;
}
@keyframes rise {
 from { opacity: 0; transform: translateY(12px); }
 to { opacity: 1; transform: none; }
}
@keyframes pulse {
 0%, 100% { transform: rotate(8deg) scale(1); }
 50% { transform: rotate(8deg) scale(1.04); }
}
.hero-copy { animation: rise 0.7s ease both; }
@media (max-width: 1024px) {
 .nav-links { display: none; }
 .menu-toggle { display: flex; }
 .header-inner { min-height: 68px; }
 .dim-strip { grid-template-columns: repeat(3, 1fr); }
 .dim-item:nth-child(3) { border-right: 0; }
 .dim-item { border-bottom: 1px solid rgba(247, 241, 230, 0.1); }
 .podium-card { grid-template-columns: 180px minmax(0, 1fr); }
 .score-col { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--line); grid-auto-flow: column; justify-content: start; gap: 16px; }
 .cross-note { grid-template-columns: 1fr; }
 .foot-grid { grid-template-columns: 1fr 1fr; }
 .burst { width: 104px; height: 104px; font-size: 12px; }
}
@media (max-width: 768px) {
 :root { --space: 56px; }
 .promo-hero h1 { max-width: none; }
 .dim-strip { grid-template-columns: 1fr 1fr; }
 .dim-item:nth-child(3) { border-right: 1px solid rgba(247, 241, 230, 0.1); }
 .podium-card { grid-template-columns: 1fr; }
 .podium-photo { min-height: 200px; }
 .podium-photo img { position: relative; height: 200px; }
 .podium-body { padding: 16px 16px 8px; }
 .compare-table thead { display: none; }
 .compare-table, .compare-table tbody, .compare-table tr, .compare-table td, .compare-table th { display: block; width: 100%; }
 .compare-table tr { border-bottom: 1px solid var(--line); padding: 8px 0; }
 .compare-table td::before {
 content: attr(data-label);
 display: block;
 font-size: 12px;
 letter-spacing: 0.06em;
 text-transform: uppercase;
 color: var(--gold);
 font-weight: 700;
 }
 .slim-card { grid-template-columns: 1fr; }
 .foot-grid { grid-template-columns: 1fr; }
 .dossier-photo { min-height: 240px; }
}
@media (max-width: 520px) {
 :root { --space: 42px; }
 .container { width: min(var(--max), calc(100% - 28px)); }
 .logo-text small { display: none; }
 .header-cta span { display: none; }
 .nav-drawer { grid-template-columns: 1fr; }
 .burst { top: 12px; right: 8px; width: 86px; height: 86px; font-size: 11px; }
 .promo-hero .container { padding-top: 92px; }
 .hero-actions .btn, .close-actions .btn { width: 100%; }
 .rank-title { font-size: 1rem; }
 .score-xl { font-size: 1.35rem; }
 .legal { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
 *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* roulang page: category5 */
:root {
 --ink: #16130f;
 --ink-soft: #3a342c;
 --muted: #6f675c;
 --paper: #f4efe6;
 --paper-2: #fbf8f2;
 --white: #fffdf9;
 --line: #e5d9c8;
 --line-strong: #d3c3ab;
 --gold: #9a7432;
 --gold-2: #c6a15b;
 --gold-soft: #f3e6cc;
 --deep: #12100e;
 --deep-2: #1d1915;
 --cream: #f7f1e6;
 --good: #2d6248;
 --clay: #8a4e32;
 --silver: #c8c2ba;
 --bronze: #c4956a;
 --radius: 22px;
 --radius-sm: 14px;
 --shadow: 0 18px 50px rgba(28, 22, 14, 0.08);
 --shadow-hover: 0 22px 46px rgba(28, 22, 14, 0.14);
 --space: 80px;
 --font: "Be Vietnam Pro", "Segoe UI", sans-serif;
 --max: 1180px;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
 margin: 0;
 font-family: var(--font);
 color: var(--ink);
 background: var(--paper);
 line-height: 1.7;
 font-size: 16px;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input, textarea { font-family: inherit; }
button { cursor: pointer; }
p { margin: 0 0 12px; }
h1, h2, h3, h4 { margin: 0; line-height: 1.15; letter-spacing: -0.03em; }
ul, ol { margin: 0; padding: 0; }
.container { width: min(var(--max), calc(100% - 40px)); margin: 0 auto; }
.site-header {
 position: sticky;
 top: 0;
 z-index: 50;
 background: rgba(251, 248, 242, 0.92);
 backdrop-filter: blur(16px);
 border-bottom: 1px solid rgba(211, 195, 171, 0.7);
}
.header-inner {
 min-height: 76px;
 display: flex;
 align-items: center;
 gap: 18px;
}
.logo { display: flex; align-items: center; gap: 10px; min-width: 0; }
.logo-mark {
 width: 42px;
 height: 42px;
 border-radius: 13px;
 display: grid;
 place-items: center;
 background: var(--deep);
 color: var(--gold-2);
 font-weight: 800;
 letter-spacing: 0.04em;
 flex: 0 0 auto;
 font-size: 13px;
}
.logo-text { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.logo-text strong {
 font-size: 14px;
 font-weight: 700;
 letter-spacing: -0.01em;
}
.logo-text small {
 color: var(--gold);
 font-size: 11px;
 letter-spacing: 0.12em;
 text-transform: uppercase;
 font-weight: 600;
}
.nav-links { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.nav-links a, .drawer-link {
 color: var(--ink-soft);
 font-size: 13.5px;
 font-weight: 600;
 padding: 8px 10px;
 border-radius: 999px;
 transition: background 0.2s ease, color 0.2s ease;
}
.nav-links a:hover, .drawer-link:hover { background: var(--gold-soft); color: var(--ink); }
.nav-links a:focus-visible, .drawer-link:focus-visible, .btn:focus-visible, .menu-toggle:focus-visible, input:focus-visible, textarea:focus-visible {
 outline: 2px solid var(--gold);
 outline-offset: 2px;
}
.nav-links a.is-active, .drawer-link.is-active {
 background: var(--deep);
 color: var(--cream);
}
.header-tools { display: flex; align-items: center; gap: 8px; margin-left: 8px; }
.menu-toggle {
 display: none;
 width: 44px;
 height: 44px;
 border-radius: 12px;
 border: 1px solid var(--line-strong);
 background: var(--white);
 align-items: center;
 justify-content: center;
 flex-direction: column;
 gap: 5px;
}
.menu-toggle span {
 display: block;
 width: 16px;
 height: 1.5px;
 background: var(--ink);
}
.nav-drawer {
 display: none;
 border-top: 1px solid var(--line);
 padding: 10px 0 16px;
 grid-template-columns: 1fr 1fr;
 gap: 6px;
}
.nav-drawer.open { display: grid; }
.btn {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 gap: 8px;
 border-radius: 999px;
 padding: 12px 18px;
 border: 1px solid transparent;
 font-weight: 700;
 letter-spacing: 0.01em;
 transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn-gold {
 background: linear-gradient(180deg, #d7b56a, #9a7432);
 color: #22190d;
 box-shadow: 0 10px 24px rgba(154, 116, 50, 0.28);
}
.btn-gold:hover { box-shadow: 0 16px 30px rgba(154, 116, 50, 0.34); }
.btn-ghost {
 background: transparent;
 color: var(--cream);
 border-color: rgba(247, 241, 230, 0.35);
}
.btn-ghost:hover { background: rgba(247, 241, 230, 0.08); }
.btn-dark {
 background: var(--deep);
 color: var(--cream);
}
.btn-dark:hover { background: #2a241d; }
.btn-line {
 background: var(--white);
 color: var(--ink);
 border-color: var(--line-strong);
}
.btn-line:hover { border-color: var(--gold); color: var(--gold); }
.section { padding: var(--space) 0; }
.section-head { margin-bottom: 28px; max-width: 760px; }
.section-head h2 { font-size: clamp(1.7rem, 3vw, 2.5rem); font-weight: 800; }
.section-head p { margin-top: 10px; color: var(--muted); }
.kicker {
 display: inline-flex;
 align-items: center;
 gap: 8px;
 color: var(--gold);
 letter-spacing: 0.16em;
 text-transform: uppercase;
 font-size: 12px;
 font-weight: 700;
 margin-bottom: 12px;
}
.offer-hero {
 position: relative;
 color: var(--cream);
 background:
  linear-gradient(100deg, rgba(12, 10, 8, 0.94) 0%, rgba(12, 10, 8, 0.82) 48%, rgba(12, 10, 8, 0.55) 100%),
  url("/assets/images/d17f892301e5aaea.webp") center/cover no-repeat;
 overflow: hidden;
}
.offer-hero::after {
 content: "";
 position: absolute;
 inset: auto 0 0 0;
 height: 90px;
 background: linear-gradient(180deg, transparent, rgba(18, 16, 14, 0.35));
 pointer-events: none;
}
.hero-layout {
 position: relative;
 z-index: 1;
 display: grid;
 grid-template-columns: 1.25fr 0.75fr;
 gap: 42px;
 align-items: end;
 padding: 68px 0 62px;
}
.hero-copy { animation: rise 0.7s ease both; }
.offer-hero h1 {
 font-size: clamp(2.2rem, 4.4vw, 4rem);
 line-height: 1.02;
 letter-spacing: -0.045em;
 font-weight: 800;
 max-width: 16ch;
}
.lead { margin-top: 16px; color: rgba(247, 241, 230, 0.86); max-width: 68ch; font-size: 16.5px; }
.lead + .lead { margin-top: 12px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.fact-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.fact {
 border: 1px solid rgba(247, 241, 230, 0.18);
 background: rgba(255, 253, 249, 0.06);
 border-radius: 999px;
 padding: 7px 12px;
 font-size: 13px;
 font-weight: 600;
 color: var(--cream);
}
.score-panel {
 background: rgba(18, 16, 14, 0.62);
 border: 1px solid rgba(198, 161, 91, 0.35);
 border-radius: 28px;
 padding: 22px;
 box-shadow: 0 24px 50px rgba(0, 0, 0, 0.22);
 backdrop-filter: blur(8px);
}
.score-top { display: flex; justify-content: space-between; gap: 16px; align-items: center; }
.score-ring {
 width: 132px;
 height: 132px;
 border-radius: 50%;
 display: grid;
 place-items: center;
 background: conic-gradient(#d7b56a 0 100%, rgba(255, 253, 249, 0.14) 0);
 flex: 0 0 auto;
}
.score-ring span {
 width: 100px;
 height: 100px;
 border-radius: 50%;
 background: var(--deep);
 display: grid;
 place-items: center;
 font-size: 34px;
 font-weight: 800;
 color: var(--gold-2);
 letter-spacing: -0.04em;
}
.score-panel h2 { font-size: 1.35rem; max-width: 14ch; }
.score-panel p { color: rgba(247, 241, 230, 0.75); margin: 12px 0 0; font-size: 14.5px; }
.panel-meta {
 display: flex;
 justify-content: space-between;
 gap: 10px;
 margin-top: 18px;
 padding-top: 14px;
 border-top: 1px solid rgba(247, 241, 230, 0.12);
 font-size: 13px;
}
.panel-meta strong { display: block; color: var(--cream); font-size: 15px; }
.panel-meta span { color: rgba(247, 241, 230, 0.62); }
.dim-section { background: var(--paper-2); border-bottom: 1px solid var(--line); }
.dim-bar {
 list-style: none;
 display: grid;
 grid-template-columns: repeat(6, 1fr);
 border: 1px solid var(--line);
 border-radius: var(--radius);
 overflow: hidden;
 background: var(--white);
 box-shadow: var(--shadow);
}
.dim-bar li {
 padding: 18px 16px 16px;
 border-right: 1px solid var(--line);
 min-width: 0;
}
.dim-bar li:last-child { border-right: 0; }
.dim-bar i { color: var(--gold); font-size: 16px; }
.dim-bar strong { display: block; margin-top: 10px; font-size: 14.5px; letter-spacing: -0.02em; }
.dim-bar span { display: block; color: var(--muted); font-size: 13px; margin-top: 4px; }
.board-section { background: var(--paper); }
.rank-board { list-style: none; display: flex; flex-direction: column; gap: 14px; }
.rank-row {
 display: grid;
 grid-template-columns: 92px 1fr auto;
 gap: 18px;
 align-items: center;
 background: var(--white);
 border: 1px solid var(--line);
 border-radius: 20px;
 padding: 16px 18px;
 box-shadow: var(--shadow);
 transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.rank-row:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); border-color: var(--gold-2); }
.rank-no {
 width: 74px;
 height: 74px;
 border-radius: 18px;
 display: grid;
 place-items: center;
 font-size: 28px;
 background: var(--gold-soft);
}
.rank-no.silver { background: #ece8e2; }
.rank-no.bronze { background: #f3e4d4; }
.rank-no.plain { background: var(--cream); font-size: 22px; }
.rank-line { font-size: clamp(1rem, 1.6vw, 1.18rem); font-weight: 750; letter-spacing: -0.03em; }
.rank-line h3 { font-size: inherit; font-weight: 750; }
.stars { color: #c6a15b; letter-spacing: 0.04em; }
.rank-row p { margin: 6px 0 0; color: var(--muted); font-size: 14.5px; }
.score-lg {
 font-size: 40px;
 line-height: 1;
 font-weight: 800;
 color: var(--gold);
 letter-spacing: -0.05em;
 min-width: 72px;
 text-align: right;
}
.score-lg small { display: block; font-size: 12px; color: var(--muted); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.podium-section { background: linear-gradient(180deg, #fbf8f2 0%, #f4efe6 100%); }
.podium {
 display: grid;
 grid-template-columns: 1.15fr 0.85fr;
 gap: 18px;
 align-items: stretch;
}
.podium-side { display: grid; gap: 18px; }
.place-card {
 background: var(--white);
 border: 1px solid var(--line);
 border-radius: 28px;
 overflow: hidden;
 box-shadow: var(--shadow);
 display: flex;
 flex-direction: column;
 min-width: 0;
 transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.place-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); }
.place-card.lead-card { border-color: #e4c98a; background: linear-gradient(180deg, #fffdf9 0%, #fbf6ea 100%); }
.place-photo { position: relative; min-height: 210px; }
.place-photo img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.photo-badge {
 position: absolute;
 left: 14px;
 bottom: 14px;
 background: rgba(18, 16, 14, 0.82);
 color: var(--cream);
 border-radius: 999px;
 padding: 6px 12px;
 font-size: 12px;
 font-weight: 700;
 letter-spacing: 0.04em;
}
.place-body { padding: 20px 20px 22px; }
.medal-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; }
.badge {
 display: inline-flex;
 align-items: center;
 gap: 6px;
 border-radius: 999px;
 padding: 5px 10px;
 font-size: 12px;
 font-weight: 800;
 letter-spacing: 0.06em;
 text-transform: uppercase;
}
.badge-gold { background: #f3e6cc; color: #6d5018; }
.badge-silver { background: #ece8e2; color: #4d4943; }
.badge-bronze { background: #f6e6d6; color: #7a4b28; }
.place-score { font-size: 34px; font-weight: 800; color: var(--ink); letter-spacing: -0.05em; }
.place-score em { font-style: normal; color: var(--gold); font-size: 14px; margin-left: 4px; font-weight: 700; }
.place-body h3 { font-size: 1.2rem; margin-bottom: 8px; }
.param-list { list-style: none; margin: 12px 0; display: grid; gap: 8px; }
.param-list li {
 display: flex;
 justify-content: space-between;
 gap: 12px;
 padding-bottom: 8px;
 border-bottom: 1px dashed var(--line);
 font-size: 14px;
}
.param-list span { color: var(--muted); }
.fit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.fit {
 border-radius: 16px;
 padding: 12px;
 background: var(--cream);
 min-width: 0;
}
.fit strong { display: block; font-size: 13px; margin-bottom: 4px; }
.fit p { margin: 0; font-size: 13.5px; color: var(--ink-soft); }
.fit.no { background: #f8efe9; }
.fit.no strong { color: var(--clay); }
.fit.yes strong { color: var(--good); }
.compare-note {
 margin-top: 18px;
 padding: 16px 18px;
 border-left: 3px solid var(--gold-2);
 background: rgba(255, 253, 249, 0.7);
 border-radius: 0 16px 16px 0;
 color: var(--ink-soft);
}
.snapshot {
 background: var(--deep);
 color: var(--cream);
}
.snapshot .section-head p { color: rgba(247, 241, 230, 0.72); }
.snap-grid {
 display: grid;
 grid-template-columns: 0.9fr 1fr 1fr 1fr;
 border: 1px solid rgba(247, 241, 230, 0.12);
 border-radius: 24px;
 overflow: hidden;
}
.snap-grid div {
 padding: 16px 16px 18px;
 border-right: 1px solid rgba(247, 241, 230, 0.1);
 border-bottom: 1px solid rgba(247, 241, 230, 0.1);
 background: rgba(255, 253, 249, 0.03);
}
.snap-grid div:nth-child(4n) { border-right: 0; }
.snap-grid .label {
 color: var(--gold-2);
 font-size: 12px;
 letter-spacing: 0.12em;
 text-transform: uppercase;
 font-weight: 700;
 background: rgba(255, 253, 249, 0.05);
}
.snap-grid strong { display: block; font-size: 15px; margin-bottom: 4px; }
.snap-grid p { margin: 0; color: rgba(247, 241, 230, 0.72); font-size: 13.5px; }
.rest-section { background: var(--paper-2); }
.rest-list { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.rest-item {
 display: grid;
 grid-template-columns: 220px 1fr 120px;
 gap: 18px;
 align-items: center;
 background: var(--white);
 border-radius: 18px;
 border: 1px solid var(--line);
 padding: 14px;
}
.rest-item img {
 width: 100%;
 height: 92px;
 object-fit: cover;
 border-radius: 14px;
}
.rest-item h3 { font-size: 1.02rem; margin-bottom: 6px; }
.rest-item p { margin: 0; color: var(--muted); font-size: 14.5px; }
.mini-score { text-align: right; font-weight: 800; font-size: 28px; color: var(--ink); letter-spacing: -0.04em; }
.mini-score span { display: block; color: var(--gold); font-size: 13px; letter-spacing: 0.08em; }
.bind-section { background: var(--paper); }
.feature-split {
 display: grid;
 grid-template-columns: 1.05fr 0.95fr;
 gap: 28px;
 align-items: stretch;
}
.feature-photo {
 position: relative;
 border-radius: 28px;
 overflow: hidden;
 min-height: 460px;
 box-shadow: var(--shadow);
}
.feature-photo img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.bind-copy {
 background: var(--white);
 border-radius: 28px;
 border: 1px solid var(--line);
 padding: 28px;
 box-shadow: var(--shadow);
}
.bind-copy h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); margin-bottom: 12px; }
.rule-list { list-style: none; margin-top: 18px; display: grid; gap: 12px; }
.rule-list li {
 display: grid;
 grid-template-columns: 42px 1fr;
 gap: 12px;
 align-items: start;
}
.rule-ico {
 width: 42px;
 height: 42px;
 border-radius: 14px;
 background: var(--deep);
 color: var(--gold-2);
 display: grid;
 place-items: center;
}
.rule-list strong { display: block; }
.rule-list p { margin: 2px 0 0; color: var(--muted); font-size: 14.5px; }
.close-band {
 position: relative;
 color: var(--cream);
 background:
  linear-gradient(100deg, rgba(12, 10, 8, 0.92), rgba(12, 10, 8, 0.78)),
  url("/assets/images/6ac182c3d8a1037a.webp") center/cover no-repeat;
}
.close-grid {
 display: grid;
 grid-template-columns: 1.3fr 0.7fr;
 gap: 28px;
 align-items: center;
}
.close-band h2 { font-size: clamp(1.8rem, 3vw, 2.7rem); max-width: 16ch; }
.close-band p { color: rgba(247, 241, 230, 0.8); margin-top: 12px; max-width: 62ch; }
.close-card {
 background: rgba(255, 253, 249, 0.08);
 border: 1px solid rgba(247, 241, 230, 0.16);
 border-radius: 24px;
 padding: 20px;
}
.close-card strong { display: block; font-size: 1.15rem; margin-bottom: 6px; }
.close-card span { display: block; color: rgba(247, 241, 230, 0.72); font-size: 14.5px; margin-bottom: 16px; }
.site-footer {
 background: var(--deep);
 color: rgba(247, 241, 230, 0.78);
 padding: 48px 0 28px;
}
.foot-grid {
 display: grid;
 grid-template-columns: 1.4fr 0.8fr 0.8fr;
 gap: 28px;
}
.foot-brand strong { color: var(--cream); font-size: 1.05rem; }
.foot-brand p, .foot-col p { color: rgba(247, 241, 230, 0.68); font-size: 14.5px; }
.foot-col h3 { color: var(--gold-2); font-size: 0.95rem; margin-bottom: 8px; letter-spacing: 0; }
.legal {
 display: flex;
 justify-content: space-between;
 gap: 12px;
 flex-wrap: wrap;
 border-top: 1px solid rgba(247, 241, 230, 0.12);
 margin-top: 28px;
 padding-top: 16px;
 font-size: 13px;
 color: rgba(247, 241, 230, 0.62);
}
@keyframes rise {
 from { opacity: 0; transform: translateY(12px); }
 to { opacity: 1; transform: none; }
}
@media (max-width: 1080px) {
 .nav-links { display: none; }
 .menu-toggle { display: flex; }
 .hero-layout, .podium, .feature-split, .close-grid, .foot-grid { grid-template-columns: 1fr; }
 .dim-bar { grid-template-columns: repeat(3, 1fr); }
 .dim-bar li:nth-child(3) { border-right: 0; }
 .snap-grid { grid-template-columns: 1fr 1fr; }
 .snap-grid div:nth-child(4n) { border-right: 1px solid rgba(247, 241, 230, 0.1); }
 .snap-grid div:nth-child(2n) { border-right: 0; }
 .rest-item { grid-template-columns: 160px 1fr; }
 .mini-score { grid-column: 2; text-align: left; }
}
@media (max-width: 768px) {
 :root { --space: 58px; }
 .container { width: min(var(--max), calc(100% - 28px)); }
 .header-tools .btn { display: none; }
 .offer-hero h1 { max-width: none; }
 .rank-row { grid-template-columns: 64px 1fr; }
 .score-lg { grid-column: 2; text-align: left; font-size: 32px; }
 .fit-grid { grid-template-columns: 1fr; }
 .feature-photo { min-height: 280px; }
 .dim-bar { grid-template-columns: 1fr 1fr; }
 .dim-bar li { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
 .dim-bar li:nth-child(2n) { border-right: 0; }
 .rest-item { grid-template-columns: 1fr; }
 .rest-item img { height: 160px; }
 .mini-score { text-align: left; }
 .place-photo { min-height: 180px; }
}
@media (max-width: 520px) {
 .nav-drawer { grid-template-columns: 1fr; }
 .logo-text strong { font-size: 12.5px; }
 .hero-layout { padding: 42px 0 40px; }
 .score-top { flex-direction: column; align-items: flex-start; }
 .snap-grid, .dim-bar { grid-template-columns: 1fr; }
 .dim-bar li, .snap-grid div { border-right: 0; }
 .rank-line h3 { font-size: 1rem; }
 .hero-actions .btn, .close-card .btn { width: 100%; }
 .legal { flex-direction: column; }
}

/* roulang page: category6 */
:root {
 --ink: #16130f;
 --ink-soft: #3a342c;
 --muted: #6f675c;
 --paper: #f4efe6;
 --paper-2: #fbf8f2;
 --white: #fffdf9;
 --line: #e5d9c8;
 --line-strong: #d3c3ab;
 --gold: #9a7432;
 --gold-2: #c6a15b;
 --gold-soft: #f3e6cc;
 --deep: #12100e;
 --deep-2: #1d1915;
 --cream: #f7f1e6;
 --good: #2d6248;
 --clay: #8a4e32;
 --silver: #c8c2ba;
 --bronze: #a97142;
 --radius: 22px;
 --radius-sm: 14px;
 --shadow: 0 18px 50px rgba(28, 22, 14, 0.08);
 --shadow-hover: 0 22px 46px rgba(28, 22, 14, 0.14);
 --space: 88px;
 --font: "Be Vietnam Pro", "Segoe UI", sans-serif;
 --max: 1180px;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
 margin: 0;
 font-family: var(--font);
 color: var(--ink);
 background: var(--paper);
 line-height: 1.7;
 font-size: 16px;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input, textarea { font-family: inherit; }
button { cursor: pointer; }
h1, h2, h3, p { margin-top: 0; }
ul { margin: 0; padding: 0; list-style: none; }
.container { width: min(var(--max), calc(100% - 40px)); margin: 0 auto; }
.site-header {
 position: sticky;
 top: 0;
 z-index: 50;
 background: rgba(251, 248, 242, 0.92);
 backdrop-filter: blur(16px);
 border-bottom: 1px solid rgba(211, 195, 171, 0.7);
}
.header-inner {
 min-height: 76px;
 display: flex;
 align-items: center;
 gap: 18px;
}
.logo { display: flex; align-items: center; gap: 10px; min-width: 0; }
.logo-mark {
 width: 42px;
 height: 42px;
 border-radius: 13px;
 display: grid;
 place-items: center;
 background: var(--deep);
 color: var(--gold-2);
 font-weight: 800;
 letter-spacing: 0.04em;
 flex: 0 0 auto;
}
.logo-text { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.logo-text strong {
 font-size: 14px;
 font-weight: 700;
 letter-spacing: -0.01em;
}
.logo-text small {
 color: var(--gold);
 font-size: 11px;
 letter-spacing: 0.12em;
 text-transform: uppercase;
 font-weight: 600;
}
.nav-links { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.nav-links a, .drawer-link {
 color: var(--ink-soft);
 font-size: 13.5px;
 font-weight: 600;
 padding: 8px 10px;
 border-radius: 999px;
 transition: background 0.2s ease, color 0.2s ease;
}
.nav-links a:hover, .drawer-link:hover { background: var(--gold-soft); color: var(--ink); }
.nav-links a:focus-visible, .drawer-link:focus-visible, .btn:focus-visible, .menu-toggle:focus-visible, input:focus-visible, textarea:focus-visible {
 outline: 2px solid var(--gold);
 outline-offset: 2px;
}
.nav-links a.is-active, .drawer-link.is-active {
 background: var(--deep);
 color: var(--cream);
}
.header-tools { display: flex; align-items: center; gap: 8px; margin-left: 8px; }
.menu-toggle {
 display: none;
 width: 44px;
 height: 44px;
 border-radius: 12px;
 border: 1px solid var(--line-strong);
 background: var(--white);
 align-items: center;
 justify-content: center;
 flex-direction: column;
 gap: 5px;
}
.menu-toggle span {
 display: block;
 width: 16px;
 height: 1.5px;
 background: var(--ink);
}
.menu-toggle[aria-expanded="true"] { background: var(--deep); border-color: var(--deep); }
.menu-toggle[aria-expanded="true"] span { background: var(--cream); }
.nav-drawer {
 display: none;
 width: min(var(--max), calc(100% - 40px));
 margin: 0 auto;
 border-top: 1px solid var(--line);
 padding: 10px 0 16px;
 grid-template-columns: 1fr 1fr;
 gap: 6px;
}
.nav-drawer.open { display: grid; }
.btn {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 gap: 8px;
 border-radius: 999px;
 padding: 12px 18px;
 border: 1px solid transparent;
 font-weight: 700;
 letter-spacing: 0.01em;
 transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn-gold {
 background: linear-gradient(180deg, #d7b56a, #9a7432);
 color: #22190d;
 box-shadow: 0 10px 24px rgba(154, 116, 50, 0.28);
}
.btn-gold:hover { box-shadow: 0 16px 30px rgba(154, 116, 50, 0.34); }
.btn-ghost {
 background: transparent;
 color: var(--cream);
 border-color: rgba(247, 241, 230, 0.35);
}
.btn-ghost:hover { background: rgba(247, 241, 230, 0.08); }
.btn-dark {
 background: var(--deep);
 color: var(--cream);
}
.btn-dark:hover { background: #2a241d; }
.btn-line {
 background: transparent;
 color: var(--ink);
 border-color: var(--line-strong);
}
.btn-line:hover { background: var(--gold-soft); }
.section { padding: var(--space) 0; scroll-margin-top: 88px; }
.section-head { margin-bottom: 28px; max-width: 760px; }
.section-head.row {
 max-width: none;
 display: flex;
 justify-content: space-between;
 align-items: flex-end;
 gap: 24px;
}
.section-head h2 {
 margin: 0;
 font-size: clamp(1.7rem, 3vw, 2.45rem);
 line-height: 1.12;
 letter-spacing: -0.035em;
}
.section-head p { margin: 8px 0 0; color: var(--muted); }
.eyebrow {
 display: inline-flex;
 align-items: center;
 gap: 8px;
 color: var(--gold);
 letter-spacing: 0.16em;
 text-transform: uppercase;
 font-size: 12px;
 font-weight: 700;
 margin-bottom: 12px;
}
.kicker {
 margin: 0;
 color: var(--gold);
 font-size: 12px;
 font-weight: 700;
 letter-spacing: 0.14em;
 text-transform: uppercase;
}
.page-banner {
 background:
 linear-gradient(180deg, rgba(251, 248, 242, 0.94), rgba(244, 239, 230, 0.92)),
 url("/assets/images/7e5184b5548d62d3.webp") center/cover no-repeat;
 border-bottom: 1px solid var(--line);
 scroll-margin-top: 88px;
}
.banner-grid {
 display: grid;
 grid-template-columns: 1.12fr 0.88fr;
 gap: 36px;
 align-items: center;
 padding: 36px 0 42px;
}
.crumb { display: flex; gap: 8px; align-items: center; color: var(--muted); font-size: 13px; font-weight: 600; margin-bottom: 14px; }
.crumb a { border-bottom: 1px solid transparent; }
.crumb a:hover { color: var(--ink); border-bottom-color: var(--gold-2); }
.page-banner h1 {
 margin: 0;
 font-size: clamp(2.15rem, 4.4vw, 3.7rem);
 line-height: 0.98;
 letter-spacing: -0.045em;
 font-weight: 800;
 max-width: 14ch;
}
.deck { margin-top: 16px; max-width: 66ch; }
.deck p { margin: 0 0 12px; color: var(--ink-soft); }
.deck p:last-child { margin-bottom: 0; }
.banner-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.fact-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.fact {
 background: rgba(255, 253, 249, 0.86);
 border: 1px solid var(--line);
 border-radius: 999px;
 padding: 7px 12px;
 font-size: 13px;
 font-weight: 650;
 color: var(--ink-soft);
}
.banner-photo {
 position: relative;
 min-height: 300px;
 border-radius: 28px;
 overflow: hidden;
 box-shadow: var(--shadow);
}
.banner-photo img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.photo-badge {
 position: absolute;
 left: 16px;
 bottom: 16px;
 background: rgba(18, 16, 14, 0.82);
 color: var(--cream);
 border-radius: 999px;
 padding: 8px 12px;
 font-size: 12px;
 font-weight: 700;
 letter-spacing: 0.04em;
}
.band-white { background: var(--white); }
.band-paper { background: var(--paper); }
.band-cream { background: linear-gradient(180deg, #f7f1e6, #fbf8f2); }
.dim-bar {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 gap: 12px;
}
.dim-bar li {
 background: var(--paper-2);
 border: 1px solid var(--line);
 border-radius: var(--radius-sm);
 padding: 16px 16px 14px;
 min-height: 112px;
 display: flex;
 flex-direction: column;
 justify-content: space-between;
 transition: border-color 0.2s ease, transform 0.2s ease;
}
.dim-bar li:hover { border-color: var(--gold-2); transform: translateY(-2px); }
.dim-bar span { color: var(--muted); font-size: 13px; font-weight: 600; }
.dim-bar strong { display: block; margin-top: 10px; font-size: 1.02rem; letter-spacing: -0.02em; line-height: 1.35; }
.ledger { display: flex; flex-direction: column; gap: 12px; }
.rank-row {
 background: var(--white);
 border: 1px solid var(--line);
 border-radius: var(--radius);
 padding: 18px 18px 16px;
 box-shadow: var(--shadow);
 transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.rank-row:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); border-color: var(--line-strong); }
.rank-line {
 display: flex;
 flex-wrap: wrap;
 align-items: baseline;
 gap: 8px 12px;
}
.rank-line .medal { font-size: 1.25rem; line-height: 1; }
.rank-line .name { font-size: 1.08rem; letter-spacing: -0.02em; flex: 1 1 240px; }
.rank-line .pipe { color: var(--line-strong); font-weight: 500; }
.rank-line .score { color: var(--gold); font-size: 1.2rem; font-weight: 800; letter-spacing: -0.03em; }
.stars { color: #b8893d; letter-spacing: 0.12em; font-weight: 700; }
.rank-note { margin: 10px 0 0; color: var(--ink-soft); max-width: 78ch; }
.podium-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.podium-card {
 background: var(--white);
 border: 1px solid var(--line);
 border-radius: 28px;
 padding: 16px;
 box-shadow: var(--shadow);
 display: flex;
 flex-direction: column;
 gap: 14px;
 min-width: 0;
 transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.podium-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); }
.podium-card.gold { background: linear-gradient(180deg, #fffdf9, #f8f1e2); }
.shot { width: 100%; aspect-ratio: 16/10; object-fit: cover; border-radius: 16px; }
.card-top { display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.medal-badge {
 display: inline-flex;
 align-items: center;
 gap: 8px;
 background: var(--deep);
 color: var(--gold-2);
 border-radius: 999px;
 padding: 7px 11px;
 font-size: 13px;
 font-weight: 800;
}
.ring {
 width: 84px;
 height: 84px;
 border-radius: 50%;
 display: grid;
 place-items: center;
 background: conic-gradient(var(--gold) calc(var(--p) * 1%), #efe4d2 0);
 flex: 0 0 auto;
}
.ring span {
 width: 64px;
 height: 64px;
 border-radius: 50%;
 background: var(--white);
 display: grid;
 place-items: center;
 font-weight: 800;
 font-size: 1.25rem;
 letter-spacing: -0.04em;
}
.podium-card h3 { margin: 0; font-size: 1.25rem; letter-spacing: -0.03em; line-height: 1.25; }
.param-list li {
 position: relative;
 padding-left: 16px;
 margin: 7px 0;
 color: var(--ink-soft);
}
.param-list li::before {
 content: "";
 width: 6px;
 height: 6px;
 border-radius: 50%;
 background: var(--gold);
 position: absolute;
 left: 0;
 top: 0.62em;
}
.fit-grid { display: grid; gap: 8px; }
.fit, .unfit { border-radius: 14px; padding: 10px 12px; font-size: 14px; }
.fit { background: rgba(45, 98, 72, 0.08); border: 1px solid rgba(45, 98, 72, 0.18); }
.unfit { background: rgba(138, 78, 50, 0.08); border: 1px solid rgba(138, 78, 50, 0.18); }
.fit b, .unfit b { display: block; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 2px; }
.fit b { color: var(--good); }
.unfit b { color: var(--clay); }
.cross-band {
 margin-top: 18px;
 background: var(--deep);
 color: var(--cream);
 border-radius: 28px;
 padding: 22px;
}
.cross-band .kicker { color: var(--gold-2); }
.cross-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 14px; }
.cross-grid p { margin: 0; color: rgba(247, 241, 230, 0.84); }
.cross-grid strong { color: var(--cream); }
.compare-wrap { display: flex; flex-direction: column; gap: 8px; }
.compare-row {
 display: grid;
 grid-template-columns: 0.8fr 1fr 1fr 1fr;
 gap: 10px;
 align-items: stretch;
}
.compare-row span {
 background: var(--white);
 border: 1px solid var(--line);
 border-radius: 14px;
 padding: 12px 14px;
 color: var(--ink-soft);
}
.compare-row.head span {
 background: var(--deep);
 color: var(--cream);
 border-color: var(--deep);
 font-weight: 700;
}
.compare-row span:first-child { font-weight: 700; color: var(--ink); }
.compare-row.head span:first-child { color: var(--gold-2); }
.slim-list { display: flex; flex-direction: column; gap: 12px; }
.slim {
 display: grid;
 grid-template-columns: 168px 1fr;
 gap: 18px;
 align-items: center;
 background: var(--white);
 border: 1px solid var(--line);
 border-radius: var(--radius);
 padding: 14px;
 box-shadow: var(--shadow);
 transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.slim:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); }
.slim img { width: 100%; height: 112px; object-fit: cover; border-radius: 14px; }
.slim h3 { margin: 0 0 6px; font-size: 1.05rem; letter-spacing: -0.02em; }
.slim p { margin: 0; color: var(--ink-soft); }
.case-split { display: grid; grid-template-columns: 0.86fr 1.14fr; gap: 22px; align-items: stretch; }
.case-photo {
 position: relative;
 min-height: 460px;
 border-radius: 28px;
 overflow: hidden;
 box-shadow: var(--shadow);
}
.case-photo img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.case-list { display: flex; flex-direction: column; gap: 12px; }
.case-item {
 background: var(--paper-2);
 border: 1px solid var(--line);
 border-radius: 18px;
 padding: 14px 16px;
}
.case-item header { display: flex; justify-content: space-between; gap: 12px; align-items: center; margin-bottom: 6px; }
.case-item h3 { margin: 0; font-size: 1.02rem; }
.chip {
 border-radius: 999px;
 padding: 4px 10px;
 font-size: 12px;
 font-weight: 800;
 letter-spacing: 0.04em;
 background: var(--gold-soft);
 color: #6d4e16;
 white-space: nowrap;
}
.chip.wait { background: #ece7df; color: var(--ink-soft); }
.chip.warn { background: rgba(138, 78, 50, 0.12); color: var(--clay); }
.case-item p { margin: 0; color: var(--ink-soft); }
.close-band {
 position: relative;
 color: var(--cream);
 background:
 linear-gradient(105deg, rgba(18, 16, 14, 0.94), rgba(18, 16, 14, 0.78)),
 url("/assets/images/6ac182c3d8a1037a.webp") center/cover no-repeat;
}
.close-grid { display: grid; grid-template-columns: 0.92fr 1.08fr; gap: 28px; align-items: start; }
.close-band h2 { margin: 0 0 12px; font-size: clamp(1.8rem, 3vw, 2.6rem); letter-spacing: -0.04em; line-height: 1.1; color: var(--cream); }
.close-band .deck p { color: rgba(247, 241, 230, 0.84); }
.mail-line { margin-top: 18px; color: var(--gold-2); font-weight: 700; }
.ticket {
 background: rgba(255, 253, 249, 0.96);
 color: var(--ink);
 border-radius: 28px;
 padding: 18px;
 box-shadow: var(--shadow);
}
.ticket h3 { margin: 0 0 6px; font-size: 1.2rem; }
.ticket .hint { margin: 0 0 14px; color: var(--muted); }
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.field span { font-size: 13px; font-weight: 700; }
.field input, .field textarea {
 width: 100%;
 border: 1px solid var(--line-strong);
 background: var(--white);
 color: var(--ink);
 border-radius: 12px;
 padding: 12px 12px;
 font-size: 15px;
}
.field textarea { min-height: 110px; resize: vertical; }
.ticket .btn { width: 100%; }
.site-footer { background: var(--deep); color: rgba(247, 241, 230, 0.82); padding: 48px 0 28px; }
.foot-grid { display: grid; grid-template-columns: 1.4fr 0.8fr 0.8fr; gap: 28px; }
.foot-brand strong { color: var(--cream); font-size: 1.05rem; }
.foot-brand p, .foot-col p { margin: 8px 0 0; }
.foot-col h3 { margin: 0; font-size: 0.98rem; color: var(--gold-2); }
.legal {
 margin-top: 28px;
 padding-top: 16px;
 border-top: 1px solid rgba(247, 241, 230, 0.12);
 display: flex;
 justify-content: space-between;
 gap: 12px;
 color: rgba(247, 241, 230, 0.62);
 font-size: 0.92rem;
}
.sr-only {
 position: absolute;
 width: 1px;
 height: 1px;
 padding: 0;
 margin: -1px;
 overflow: hidden;
 clip: rect(0, 0, 0, 0);
 border: 0;
}
@media (max-width: 1024px) {
 .nav-links { display: none; }
 .menu-toggle { display: flex; }
 .header-tools { margin-left: auto; }
 .dim-bar { grid-template-columns: 1fr 1fr; }
 .podium-grid { grid-template-columns: 1fr 1fr; }
 .podium-card:last-child { grid-column: 1 / -1; }
 .cross-grid, .compare-row { grid-template-columns: 1fr 1fr; }
 .compare-row.head { display: none; }
 .banner-grid, .case-split, .close-grid, .foot-grid { grid-template-columns: 1fr; }
 .banner-photo, .case-photo { min-height: 280px; }
}
@media (max-width: 768px) {
 :root { --space: 64px; }
 .section-head.row, .slim, .legal { display: block; }
 .slim img { height: 180px; margin-bottom: 12px; }
 .podium-grid, .cross-grid, .dim-bar, .compare-row { grid-template-columns: 1fr; }
 .podium-card:last-child { grid-column: auto; }
 .legal span { display: block; margin-top: 6px; }
 .page-banner h1 { max-width: none; }
}
@media (max-width: 520px) {
 .container { width: min(var(--max), calc(100% - 28px)); }
 .logo-text small { display: none; }
 .header-cta { padding: 10px 12px; }
 .nav-drawer { grid-template-columns: 1fr; }
 .fact { width: 100%; border-radius: 14px; }
 .banner-actions .btn, .ticket .btn { width: 100%; }
 .rank-line .name { flex-basis: 100%; }
}
@media (prefers-reduced-motion: reduce) {
 html { scroll-behavior: auto; }
 *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* roulang page: category7 */
:root {
 --ink: #16130f;
 --ink-soft: #3a342c;
 --muted: #6f675c;
 --paper: #f4efe6;
 --paper-2: #fbf8f2;
 --white: #fffdf9;
 --line: #e5d9c8;
 --line-strong: #d3c3ab;
 --gold: #9a7432;
 --gold-2: #c6a15b;
 --gold-soft: #f3e6cc;
 --deep: #12100e;
 --deep-2: #1d1915;
 --cream: #f7f1e6;
 --good: #2d6248;
 --clay: #8a4e32;
 --silver: #c8c2ba;
 --bronze: #a97142;
 --radius: 22px;
 --radius-sm: 14px;
 --shadow: 0 18px 50px rgba(28, 22, 14, 0.08);
 --shadow-hover: 0 22px 46px rgba(28, 22, 14, 0.14);
 --space: 80px;
 --font: "Be Vietnam Pro", "Segoe UI", sans-serif;
 --max: 1180px;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
 margin: 0;
 font-family: var(--font);
 color: var(--ink);
 background: var(--paper);
 line-height: 1.7;
 font-size: 16px;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input, textarea { font-family: inherit; }
button { cursor: pointer; }
p { margin: 0 0 12px; }
h1, h2, h3, h4 { margin: 0; line-height: 1.15; letter-spacing: -0.03em; }
.container { width: min(var(--max), calc(100% - 40px)); margin: 0 auto; }
.site-header {
 position: sticky;
 top: 0;
 z-index: 50;
 background: rgba(251, 248, 242, 0.92);
 backdrop-filter: blur(16px);
 border-bottom: 1px solid rgba(211, 195, 171, 0.7);
}
.header-inner {
 min-height: 76px;
 display: flex;
 align-items: center;
 gap: 18px;
}
.logo { display: flex; align-items: center; gap: 10px; min-width: 0; }
.logo-mark {
 width: 42px;
 height: 42px;
 border-radius: 13px;
 display: grid;
 place-items: center;
 background: var(--deep);
 color: var(--gold-2);
 font-weight: 800;
 letter-spacing: 0.04em;
 flex: 0 0 auto;
}
.logo-text { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.logo-text strong {
 font-size: 14px;
 font-weight: 700;
 letter-spacing: -0.01em;
}
.logo-text small {
 color: var(--gold);
 font-size: 11px;
 letter-spacing: 0.12em;
 text-transform: uppercase;
 font-weight: 600;
}
.nav-links { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.nav-links a, .drawer-link {
 color: var(--ink-soft);
 font-size: 13.5px;
 font-weight: 600;
 padding: 8px 10px;
 border-radius: 999px;
 transition: background 0.2s ease, color 0.2s ease;
}
.nav-links a:hover, .drawer-link:hover { background: var(--gold-soft); color: var(--ink); }
.nav-links a:focus-visible, .drawer-link:focus-visible, .btn:focus-visible, .menu-toggle:focus-visible, input:focus-visible, textarea:focus-visible {
 outline: 2px solid var(--gold);
 outline-offset: 2px;
}
.nav-links a.is-active, .drawer-link.is-active {
 background: var(--deep);
 color: var(--cream);
}
.header-tools { display: flex; align-items: center; gap: 8px; margin-left: 8px; }
.menu-toggle {
 display: none;
 width: 44px;
 height: 44px;
 border-radius: 12px;
 border: 1px solid var(--line-strong);
 background: var(--white);
 align-items: center;
 justify-content: center;
 flex-direction: column;
 gap: 5px;
}
.menu-toggle span {
 display: block;
 width: 16px;
 height: 1.5px;
 background: var(--ink);
}
.menu-toggle[aria-expanded="true"] { background: var(--deep); }
.menu-toggle[aria-expanded="true"] span { background: var(--cream); }
.nav-drawer {
 display: none;
 border-top: 1px solid var(--line);
 padding: 10px 0 16px;
 grid-template-columns: 1fr 1fr;
 gap: 6px;
}
.nav-drawer.open { display: grid; }
.btn {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 gap: 8px;
 border-radius: 999px;
 padding: 12px 18px;
 border: 1px solid transparent;
 font-weight: 700;
 letter-spacing: 0.01em;
 transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn-gold {
 background: linear-gradient(180deg, #d7b56a, #9a7432);
 color: #22190d;
 box-shadow: 0 10px 24px rgba(154, 116, 50, 0.28);
}
.btn-gold:hover { box-shadow: 0 16px 30px rgba(154, 116, 50, 0.34); }
.btn-ghost {
 background: transparent;
 color: var(--cream);
 border-color: rgba(247, 241, 230, 0.35);
}
.btn-ghost:hover { background: rgba(247, 241, 230, 0.08); }
.btn-dark { background: var(--deep); color: var(--cream); }
.btn-dark:hover { background: #2a241d; }
.btn-line {
 background: var(--white);
 color: var(--ink);
 border-color: var(--line-strong);
}
.btn-line:hover { border-color: var(--gold); color: var(--gold); }
.page-hero {
 position: relative;
 color: var(--cream);
 background:
  linear-gradient(105deg, rgba(12, 10, 8, 0.93) 0%, rgba(12, 10, 8, 0.78) 48%, rgba(12, 10, 8, 0.55) 100%),
  url("/assets/images/7e5184b5548d62d3.webp") center/cover no-repeat;
 overflow: hidden;
}
.page-hero::after {
 content: "";
 position: absolute;
 inset: auto 0 0 0;
 height: 72px;
 background: linear-gradient(180deg, transparent, rgba(18, 16, 14, 0.35));
 pointer-events: none;
}
.hero-grid {
 display: grid;
 grid-template-columns: 1.12fr 0.88fr;
 gap: 42px;
 align-items: end;
 padding: 68px 0 74px;
 position: relative;
 z-index: 1;
}
.eyebrow {
 display: inline-flex;
 align-items: center;
 gap: 8px;
 color: var(--gold-2);
 letter-spacing: 0.16em;
 text-transform: uppercase;
 font-size: 12px;
 font-weight: 700;
 margin-bottom: 16px;
}
.page-hero h1 {
 font-size: clamp(2.35rem, 4.6vw, 4.15rem);
 line-height: 0.98;
 letter-spacing: -0.045em;
 font-weight: 800;
 max-width: 14ch;
}
.lead { margin-top: 16px; color: rgba(247, 241, 230, 0.86); max-width: 64ch; }
.lead + .lead { margin-top: 12px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.fact-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.chip {
 display: inline-flex;
 align-items: center;
 gap: 8px;
 padding: 7px 12px;
 border-radius: 999px;
 border: 1px solid rgba(247, 241, 230, 0.2);
 background: rgba(255, 253, 249, 0.06);
 color: var(--cream);
 font-size: 13px;
 font-weight: 600;
}
.doc-panel {
 background: rgba(18, 16, 14, 0.72);
 border: 1px solid rgba(198, 161, 91, 0.35);
 border-radius: 28px;
 box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
 overflow: hidden;
 backdrop-filter: blur(8px);
}
.doc-top {
 display: flex;
 justify-content: space-between;
 gap: 16px;
 align-items: center;
 padding: 18px 18px 0;
}
.doc-kicker { color: var(--gold-2); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700; }
.doc-top strong { display: block; margin-top: 4px; font-size: 18px; }
.ring {
 width: 86px;
 height: 86px;
 border-radius: 50%;
 display: grid;
 place-items: center;
 background: conic-gradient(#e4c98a calc(var(--p) * 1%), rgba(255, 253, 249, 0.12) 0);
 flex: 0 0 auto;
}
.ring b {
 width: 66px;
 height: 66px;
 border-radius: 50%;
 background: #16130f;
 display: grid;
 place-items: center;
 font-size: 20px;
 color: var(--cream);
}
.doc-lines { padding: 8px 10px 16px; }
.doc-line {
 display: grid;
 grid-template-columns: 64px 1fr;
 gap: 10px;
 padding: 11px 10px;
 border-top: 1px solid rgba(247, 241, 230, 0.1);
 font-size: 14px;
 color: rgba(247, 241, 230, 0.88);
}
.doc-line span { color: var(--gold-2); font-weight: 700; }
.section { padding: var(--space) 0; }
.section.alt { background: var(--paper-2); }
.section.cream { background: linear-gradient(180deg, #fbf8f2, #f3eadc); }
.section.ink { background: var(--deep); color: var(--cream); }
.section-head { margin-bottom: 26px; max-width: 760px; }
.section-head h2 { font-size: clamp(1.7rem, 3vw, 2.45rem); margin-bottom: 10px; }
.section-head p { color: var(--muted); margin: 0; }
.section.ink .section-head p { color: rgba(247, 241, 230, 0.72); }
.kicker {
 color: var(--gold);
 font-size: 12px;
 font-weight: 700;
 letter-spacing: 0.14em;
 text-transform: uppercase;
 margin-bottom: 8px;
}
.dim-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.dim-item {
 background: var(--white);
 border: 1px solid var(--line);
 border-radius: var(--radius-sm);
 padding: 16px 14px 14px;
 min-height: 132px;
 box-shadow: var(--shadow);
 transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.dim-item:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); }
.dim-item i {
 width: 36px;
 height: 36px;
 border-radius: 12px;
 display: grid;
 place-items: center;
 background: var(--gold-soft);
 color: var(--gold);
 margin-bottom: 12px;
}
.dim-item strong { display: block; font-size: 15px; margin-bottom: 4px; }
.dim-item span { color: var(--muted); font-size: 13px; }
.rank-list { display: flex; flex-direction: column; gap: 10px; }
.rank-line {
 background: var(--white);
 border: 1px solid var(--line);
 border-radius: 18px;
 padding: 16px 18px;
 box-shadow: var(--shadow);
 transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.rank-line:hover { transform: translateY(-2px); border-color: var(--gold-2); box-shadow: var(--shadow-hover); }
.rank-line.top { background: linear-gradient(90deg, #fffdf9, #f8f1e2); border-color: #e4d0aa; }
.rank-sentence {
 margin: 0;
 font-weight: 750;
 font-weight: 700;
 font-size: 17px;
 letter-spacing: -0.02em;
 display: flex;
 flex-wrap: wrap;
 gap: 8px 10px;
 align-items: center;
}
.medal { font-size: 22px; }
.sep { color: var(--line-strong); font-weight: 500; }
.pts { font-size: 22px; font-weight: 800; color: var(--ink); letter-spacing: -0.04em; }
.stars {
 background: #241c12;
 color: #f6deaa;
 border-radius: 999px;
 padding: 3px 9px;
 letter-spacing: 1px;
 font-size: 14px;
}
.podium-grid { display: grid; grid-template-columns: 1.08fr 0.96fr 0.96fr; gap: 16px; align-items: stretch; }
.pod {
 background: var(--white);
 border: 1px solid var(--line);
 border-radius: 26px;
 overflow: hidden;
 box-shadow: var(--shadow);
 display: flex;
 flex-direction: column;
 min-height: 100%;
 transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.pod:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); }
.pod-1 { border-color: #e3c98a; background: #fffdf9; }
.pod-photo { position: relative; height: 168px; }
.pod-photo img { width: 100%; height: 100%; object-fit: cover; }
.pod-photo .badge {
 position: absolute;
 left: 12px;
 top: 12px;
 background: var(--deep);
 color: var(--gold-2);
 border-radius: 999px;
 padding: 6px 10px;
 font-size: 12px;
 font-weight: 800;
 letter-spacing: 0.04em;
}
.pod-body { padding: 16px 16px 18px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.pod-head { display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.pod h3 { font-size: 1.25rem; }
.score-lg { font-size: 40px; font-weight: 800; letter-spacing: -0.05em; line-height: 1; }
.score-lg small { display: block; font-size: 12px; color: var(--muted); letter-spacing: 0.08em; font-weight: 700; }
.param { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 7px; }
.param li {
 display: flex;
 gap: 8px;
 align-items: flex-start;
 font-size: 14px;
 color: var(--ink-soft);
}
.param i { color: var(--gold); margin-top: 4px; }
.fit-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.fit, .unfit {
 border-radius: 14px;
 padding: 10px 12px;
 font-size: 13px;
}
.fit { background: #eef6f1; color: var(--good); }
.unfit { background: #f8efe9; color: var(--clay); }
.fit strong, .unfit strong { display: block; margin-bottom: 2px; }
.versus {
 margin-top: auto;
 border-top: 1px dashed var(--line-strong);
 padding-top: 10px;
 color: var(--ink-soft);
 font-size: 14px;
}
.compare-grid { display: grid; grid-template-columns: 180px 1fr 1fr 1fr; gap: 10px; }
.compare-grid div {
 background: rgba(255, 253, 249, 0.04);
 border: 1px solid rgba(247, 241, 230, 0.12);
 border-radius: 16px;
 padding: 14px;
}
.compare-grid .label {
 background: transparent;
 border: 0;
 color: var(--gold-2);
 font-size: 13px;
 font-weight: 700;
 letter-spacing: 0.08em;
 text-transform: uppercase;
 display: flex;
 align-items: flex-end;
}
.compare-grid strong { display: block; margin-bottom: 6px; font-size: 15px; }
.compare-grid p { margin: 0; color: rgba(247, 241, 230, 0.78); font-size: 14px; }
.rest-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mini {
 display: grid;
 grid-template-columns: 92px 1fr;
 gap: 14px;
 background: var(--white);
 border: 1px solid var(--line);
 border-radius: 20px;
 overflow: hidden;
 box-shadow: var(--shadow);
}
.mini img { width: 92px; height: 100%; object-fit: cover; min-height: 124px; }
.mini div { padding: 14px 14px 14px 0; }
.mini p { margin: 8px 0 0; color: var(--muted); font-size: 14px; }
.ledger {
 display: grid;
 grid-template-columns: 1.05fr 0.95fr;
 gap: 22px;
 align-items: stretch;
}
.time-list { display: flex; flex-direction: column; }
.time-item {
 display: grid;
 grid-template-columns: 74px 1fr;
 gap: 12px;
 padding: 14px 0;
 border-bottom: 1px solid var(--line);
}
.time-item time { color: var(--gold); font-weight: 800; }
.time-item strong { display: block; }
.time-item span { color: var(--muted); font-size: 14px; }
.ledger-photo {
 position: relative;
 border-radius: 28px;
 overflow: hidden;
 min-height: 420px;
 box-shadow: var(--shadow);
}
.ledger-photo img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.photo-cap {
 position: absolute;
 left: 16px;
 right: 16px;
 bottom: 16px;
 background: rgba(18, 16, 14, 0.78);
 color: var(--cream);
 border-radius: 16px;
 padding: 14px 16px;
}
.photo-cap strong { display: block; margin-bottom: 4px; }
.close-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 28px; align-items: center; }
.form-card {
 background: var(--white);
 color: var(--ink);
 border-radius: 26px;
 padding: 22px;
 box-shadow: var(--shadow-hover);
}
.form-card h3 { font-size: 1.35rem; margin-bottom: 6px; }
.form-card .hint { color: var(--muted); margin-bottom: 16px; }
.fields { display: grid; gap: 12px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field span { font-size: 13px; font-weight: 700; }
.field input, .field textarea {
 width: 100%;
 border: 1px solid var(--line-strong);
 background: var(--paper-2);
 border-radius: 14px;
 padding: 12px 14px;
 color: var(--ink);
 font-size: 15px;
}
.field textarea { min-height: 90px; resize: vertical; }
.form-card .btn { width: 100%; margin-top: 4px; }
.site-footer { background: var(--deep); color: rgba(247, 241, 230, 0.82); padding: 56px 0 28px; }
.foot-grid { display: grid; grid-template-columns: 1.4fr 0.8fr 0.8fr; gap: 28px; }
.foot-brand strong { color: var(--cream); font-size: 18px; display: block; margin-bottom: 10px; }
.foot-col h3 { color: var(--gold-2); font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 8px; }
.legal {
 margin-top: 28px;
 padding-top: 16px;
 border-top: 1px solid rgba(247, 241, 230, 0.12);
 display: flex;
 justify-content: space-between;
 gap: 12px;
 flex-wrap: wrap;
 color: rgba(247, 241, 230, 0.62);
 font-size: 13px;
}
@media (max-width: 1100px) {
 .nav-links { display: none; }
 .menu-toggle { display: flex; }
 .header-tools { margin-left: auto; }
}
@media (max-width: 1024px) {
 .hero-grid, .podium-grid, .ledger, .close-grid, .foot-grid { grid-template-columns: 1fr; }
 .dim-grid { grid-template-columns: repeat(3, 1fr); }
 .compare-grid { grid-template-columns: 1fr 1fr; }
 .compare-grid .label { display: none; }
 .ledger-photo { min-height: 280px; }
 .page-hero h1 { max-width: none; }
}
@media (max-width: 768px) {
 .section { padding: 56px 0; }
 .dim-grid, .rest-grid, .fit-row, .compare-grid { grid-template-columns: 1fr; }
 .hero-grid { padding: 48px 0 54px; }
 .mini { grid-template-columns: 78px 1fr; }
}
@media (max-width: 520px) {
 .container { width: min(var(--max), calc(100% - 28px)); }
 .logo-text small { display: none; }
 .logo-text strong { font-size: 11.5px; }
 .header-tools .btn { font-size: 12px; padding: 10px 12px; }
 .rank-sentence { font-size: 15px; }
 .doc-line { grid-template-columns: 56px 1fr; }
 .legal { flex-direction: column; }
 .nav-drawer { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
 html { scroll-behavior: auto; }
 .btn, .pod, .rank-line, .dim-item { transition: none; }
}