/* roulang page: index */
:root {
  --ink: #14171c;
  --ink-2: #22272f;
  --gold: #a68456;
  --gold-2: #e7d6bc;
  --gold-deep: #7c6238;
  --paper: #f3f0ea;
  --paper-2: #e7e1d6;
  --white: #fffcf8;
  --text: #171a1f;
  --muted: #5d646e;
  --line: rgba(20, 23, 28, .12);
  --line-strong: rgba(20, 23, 28, .22);
  --shadow: 0 22px 50px rgba(20, 23, 28, .08);
  --shadow-soft: 0 10px 28px rgba(20, 23, 28, .06);
  --radius: 22px;
  --navw: 232px;
  --sans: "Be Vietnam Pro", "Segoe UI", sans-serif;
  --serif: "Cormorant Garamond", Georgia, serif;
  --space: 84px;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--text);
  background: var(--paper);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.7;
  text-rendering: optimizeLegibility;
}
body.nav-lock { overflow: hidden; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
::selection { background: #e7d6bc; color: var(--ink); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.skip {
  position: absolute;
  left: 12px;
  top: -40px;
  background: #fff;
  padding: 8px 12px;
  z-index: 80;
}
.skip:focus { top: 12px; }
.app { min-height: 100vh; }
.nav {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--navw);
  background: var(--ink);
  color: #f6f1e8;
  z-index: 50;
  display: flex;
  flex-direction: column;
  padding: 28px 18px 22px;
  border-right: 1px solid rgba(231, 214, 188, .12);
}
.logo {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 28px;
}
.logo-mark {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  border: 1px solid var(--gold-2);
  border-radius: 14px;
  display: grid;
  place-items: center;
  font-family: var(--serif);
  font-size: 26px;
  color: var(--gold-2);
}
.logo-text {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: .01em;
}
.nav-links { display: flex; flex-direction: column; gap: 4px; }
.nav-links a {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 8px 10px;
  border-radius: 12px;
  color: rgba(246, 241, 232, .78);
  font-size: 14px;
  font-weight: 500;
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
.nav-links a i { width: 16px; color: var(--gold-2); font-size: 12px; }
.nav-links a:hover { background: rgba(255,255,255,.05); color: #fff; transform: translateX(2px); }
.nav-links a.is-active {
  background: rgba(166, 132, 86, .2);
  color: #f8efe2;
}
.nav-foot {
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,.08);
  color: rgba(246, 241, 232, .62);
  font-size: 12px;
  line-height: 1.55;
}
.close-nav {
  display: none;
  margin-left: auto;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.16);
  background: transparent;
  color: #fff;
}
.mainwrap { margin-left: var(--navw); min-width: 0; }
.topbar {
  display: none;
  position: sticky;
  top: 0;
  z-index: 40;
  height: 64px;
  padding: 0 16px;
  align-items: center;
  justify-content: space-between;
  background: rgba(20, 23, 28, .94);
  color: #f6f1e8;
  backdrop-filter: blur(12px);
}
.top-logo { font-weight: 650; font-size: 14px; letter-spacing: .01em; }
.icon-btn {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.16);
  background: transparent;
  color: #fff;
}
.container { width: min(1140px, calc(100% - 48px)); margin: 0 auto; }
.hero { position: relative; color: #f7f4ee; overflow: hidden; background: #0e1116; }
.hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-mask {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(8,10,14,.42) 0%, rgba(8,10,14,.18) 34%, rgba(8,10,14,.78) 100%);
}
.hero-inner {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 28px 0 68px;
}
.countbar {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: center;
  padding: 14px 16px 14px 18px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.2);
  background: rgba(12, 14, 18, .46);
  backdrop-filter: blur(12px);
}
.count-copy { max-width: 460px; }
.count-copy strong { display: block; font-size: 15px; font-weight: 600; letter-spacing: .01em; }
.count-copy span { display: block; margin-top: 2px; color: rgba(247,244,238,.76); font-size: 13px; }
.ticks { display: flex; gap: 8px; }
.tick {
  min-width: 68px;
  text-align: center;
  padding: 8px 6px 7px;
  border-radius: 14px;
  background: rgba(255,255,255,.08);
}
.tick b {
  display: block;
  font-family: var(--serif);
  font-size: 34px;
  font-weight: 600;
  line-height: 1;
}
.tick small { color: rgba(247,244,238,.7); font-size: 11px; letter-spacing: .08em; }
.hero-copy { max-width: 760px; animation: rise .7s ease both; }
.kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--gold-2);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em;
}
.kicker::before {
  content: "";
  width: 18px;
  height: 1px;
  background: var(--gold-2);
}
h1 {
  margin: 12px 0 18px;
  font-family: var(--serif);
  font-size: clamp(52px, 7vw, 96px);
  font-weight: 500;
  line-height: .92;
  letter-spacing: -.03em;
}
.hero-lead { max-width: 640px; color: rgba(247,244,238,.88); font-size: 16.5px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 50px;
  padding: 0 20px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-weight: 600;
  font-size: 14.5px;
  transition: transform .2s ease, background .2s ease, box-shadow .2s ease, color .2s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn-gold { background: var(--gold-2); color: var(--ink); }
.btn-gold:hover { background: #fff; box-shadow: 0 12px 30px rgba(0,0,0,.18); }
.btn-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.4); }
.btn-ghost:hover { background: rgba(255,255,255,.08); }
.btn-ink { background: var(--ink); color: #f6f1e8; }
.btn-ink:hover { background: #000; box-shadow: var(--shadow); }
.btn-line { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn-line:hover { border-color: var(--ink); }
.facts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.facts span {
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.2);
  background: rgba(255,255,255,.06);
  font-size: 13px;
}
.block { padding: var(--space) 0; }
.block-white { background: var(--white); }
.block-sand { background: #ebe4d8; }
.block-ink { background: var(--ink); color: #f6f1e8; position: relative; overflow: hidden; }
.block-head { max-width: 720px; margin-bottom: 34px; }
.head-row {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 32px;
  align-items: end;
  margin-bottom: 34px;
}
h2 {
  font-family: var(--serif);
  font-weight: 550;
  font-size: clamp(34px, 4vw, 58px);
  line-height: .98;
  letter-spacing: -.03em;
}
.rule { width: 46px; height: 1px; background: var(--gold); margin: 16px 0; }
.lead { color: var(--muted); font-size: 16px; max-width: 66ch; }
.block-ink .lead { color: rgba(246,241,232,.74); }
.block-ink .kicker { color: var(--gold-2); }
.entry-grid {
  display: grid;
  grid-template-columns: 1.35fr 1fr 1fr;
  gap: 14px;
}
.entry {
  position: relative;
  overflow: hidden;
  min-height: 176px;
  border-radius: var(--radius);
  color: #fff;
  display: flex;
  align-items: flex-end;
  isolation: isolate;
  box-shadow: var(--shadow-soft);
}
.entry-lg { grid-row: span 3; min-height: 100%; }
.entry img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s ease;
}
.entry .shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10,12,16,.05), rgba(10,12,16,.82));
}
.entry-body { position: relative; z-index: 1; padding: 18px; }
.entry-body small { display: block; color: var(--gold-2); font-size: 12px; letter-spacing: .12em; }
.entry-body strong { display: block; margin: 6px 0 6px; font-size: 22px; line-height: 1.2; font-weight: 600; }
.entry-body p { color: rgba(255,255,255,.86); font-size: 14px; line-height: 1.5; }
.entry:hover img { transform: scale(1.06); }
.entry:hover { box-shadow: var(--shadow); }
.feature {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 28px;
  align-items: stretch;
}
.feature-visual {
  position: relative;
  min-height: 520px;
  border-radius: 28px;
  overflow: hidden;
  box-shadow: var(--shadow);
}
.feature-visual img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.feature-caption {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 18px;
  padding: 16px 16px 14px;
  border-radius: 16px;
  background: rgba(255,252,248,.92);
  color: var(--ink);
}
.feature-caption span { color: var(--gold-deep); font-size: 12px; font-weight: 650; letter-spacing: .08em; }
.feature-caption strong { display: block; margin-top: 4px; font-size: 20px; line-height: 1.3; }
.pick { display: flex; flex-direction: column; gap: 14px; }
.pick article {
  padding: 18px 18px 16px;
  border-radius: 18px;
  background: var(--paper);
  border: 1px solid transparent;
  transition: border-color .2s ease, transform .2s ease, background .2s ease;
}
.pick article:hover { transform: translateX(4px); background: #fff; border-color: rgba(166,132,86,.45); }
.pick .idx { font-family: var(--serif); color: var(--gold-deep); font-size: 28px; line-height: 1; }
.pick h3 { margin: 6px 0; font-size: 18px; line-height: 1.35; }
.pick p { color: var(--muted); font-size: 14.5px; }
.bento {
  display: grid;
  grid-template-columns: 1.35fr 1fr 1fr;
  grid-template-rows: 230px 230px;
  gap: 14px;
}
.shot { position: relative; overflow: hidden; border-radius: 24px; min-height: 220px; }
.shot:first-child { grid-row: 1 / span 2; }
.shot img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; transition: transform .6s ease; }
.shot:hover img { transform: scale(1.05); }
.shot figcaption {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 14px;
  color: #fff;
  z-index: 1;
  text-shadow: 0 8px 18px rgba(0,0,0,.35);
}
.shot figcaption b { display: block; font-size: 18px; font-weight: 600; }
.shot figcaption span { font-size: 13px; color: rgba(255,255,255,.88); }
.shot::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(8,10,14,.78));
}
.news { display: flex; flex-direction: column; }
.news li {
  display: grid;
  grid-template-columns: 110px 1fr 132px;
  gap: 22px;
  align-items: center;
  padding: 18px 0;
  border-top: 1px solid var(--line);
}
.news li:last-child { border-bottom: 1px solid var(--line); }
.news time { color: var(--gold-deep); font-weight: 650; font-size: 14px; }
.news h3 { font-size: 20px; line-height: 1.35; margin-bottom: 4px; }
.news p { color: var(--muted); font-size: 14.5px; }
.news img { width: 132px; height: 84px; object-fit: cover; border-radius: 14px; }
.text-link {
  display: inline-flex;
  margin-top: 18px;
  color: var(--gold-deep);
  font-weight: 650;
  border-bottom: 1px solid rgba(124, 98, 56, .4);
  padding-bottom: 2px;
}
.text-link:hover { color: var(--ink); border-color: var(--ink); }
.ranks { display: flex; flex-direction: column; gap: 16px; }
.rank {
  display: grid;
  grid-template-columns: 52px 1fr auto;
  gap: 14px;
  align-items: center;
}
.rank b {
  font-family: var(--serif);
  font-size: 32px;
  color: var(--gold-deep);
  line-height: 1;
}
.bar { height: 3px; background: rgba(20,23,28,.1); border-radius: 99px; margin-top: 8px; overflow: hidden; }
.bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--gold), #d7b98a); border-radius: inherit; }
.rank em { font-style: normal; font-weight: 700; font-variant-numeric: tabular-nums; }
.rank p { color: var(--muted); font-size: 14px; }
.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line);
}
.steps li { padding: 26px 22px 0 0; border-right: 1px solid var(--line); min-height: 180px; }
.steps li:last-child { border-right: 0; padding-right: 0; }
.steps .n { font-family: var(--serif); font-size: 42px; color: var(--gold); line-height: 1; }
.steps h3 { margin: 10px 0 8px; font-size: 20px; }
.steps p { color: var(--muted); font-size: 14.5px; }
.log {
  display: grid;
  grid-template-columns: .78fr 1.22fr;
  gap: 40px;
}
.log-item {
  display: grid;
  grid-template-columns: 16px 1fr;
  gap: 16px;
  padding-bottom: 22px;
}
.dotcol { position: relative; }
.dotcol::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 8px;
  bottom: -22px;
  width: 1px;
  background: var(--line-strong);
}
.log-item:last-child .dotcol::before { display: none; }
.dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 6px rgba(166,132,86,.15);
  position: relative;
  z-index: 1;
}
.log-item h3 { font-size: 20px; margin-bottom: 4px; }
.log-item p { color: var(--muted); font-size: 14.5px; }
.tag {
  display: inline-flex;
  margin-bottom: 8px;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(166,132,86,.14);
  color: var(--gold-deep);
  font-size: 12px;
  font-weight: 700;
}
.plans {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  align-items: stretch;
}
.plan {
  position: relative;
  background: var(--paper);
  border-radius: 26px;
  padding: 26px 22px 22px;
  border: 1px solid transparent;
  box-shadow: var(--shadow-soft);
  display: flex;
  flex-direction: column;
  min-height: 390px;
  transition: transform .2s ease, box-shadow .2s ease;
}
.plan:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.plan.is-hot {
  background: var(--ink);
  color: #f6f1e8;
  transform: translateY(-10px);
}
.plan.is-hot:hover { transform: translateY(-14px); }
.plan .badge {
  position: absolute;
  top: 16px;
  right: 16px;
  background: var(--gold-2);
  color: var(--ink);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 700;
}
.plan h3 { font-family: var(--serif); font-size: 34px; font-weight: 550; line-height: 1; }
.price { margin: 14px 0 6px; font-size: 28px; font-weight: 680; letter-spacing: -.03em; }
.price small { font-size: 14px; font-weight: 500; color: var(--muted); }
.plan.is-hot .price small, .plan.is-hot li { color: rgba(246,241,232,.76); }
.plan ul { margin: 12px 0 22px; display: grid; gap: 8px; }
.plan li { color: var(--muted); font-size: 14.5px; padding-left: 18px; position: relative; }
.plan li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); position: absolute; left: 0; top: 8px; }
.plan .btn { margin-top: auto; }
.quotes {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: 22px;
}
.quote-photo { position: relative; min-height: 420px; border-radius: 28px; overflow: hidden; }
.quote-photo img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.quote-list { display: grid; gap: 12px; }
.quote {
  background: var(--white);
  border-radius: 20px;
  padding: 18px 18px 16px;
  box-shadow: var(--shadow-soft);
}
.quote p { font-size: 16px; line-height: 1.55; }
.quote cite { display: block; margin-top: 10px; font-style: normal; color: var(--gold-deep); font-size: 13px; font-weight: 650; }
.kpi-bg, .form-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .28;
}
.block-ink .container { position: relative; z-index: 1; }
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.kpi {
  padding: 20px 8px 8px 0;
  border-top: 1px solid rgba(255,255,255,.16);
}
.kpi strong {
  display: block;
  font-family: var(--serif);
  font-size: clamp(40px, 4vw, 62px);
  line-height: .9;
  font-weight: 550;
}
.kpi span { display: block; margin-top: 8px; color: rgba(246,241,232,.74); font-size: 14px; }
.partners { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.partner {
  min-height: 92px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: var(--white);
  display: grid;
  place-items: center;
  text-align: center;
  padding: 10px;
  font-weight: 680;
  letter-spacing: .02em;
  transition: border-color .2s ease, transform .2s ease;
}
.partner:hover { transform: translateY(-3px); border-color: var(--gold); }
.partner small { display: block; font-weight: 500; color: var(--muted); letter-spacing: 0; font-size: 12px; }
.guards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.guard {
  padding-right: 12px;
}
.guard i {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(166,132,86,.45);
  color: var(--gold-deep);
  margin-bottom: 12px;
}
.guard h3 { font-size: 18px; margin-bottom: 6px; }
.guard p { color: var(--muted); font-size: 14.5px; }
.benefit {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 28px;
  align-items: center;
}
.benefit-photo { border-radius: 28px; overflow: hidden; min-height: 420px; position: relative; box-shadow: var(--shadow); }
.benefit-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.checks { display: grid; gap: 12px; margin-top: 18px; }
.checks li {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 10px;
  align-items: start;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.checks i { color: var(--gold-deep); margin-top: 4px; }
.checks p { color: var(--muted); font-size: 14.5px; }
.claim {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 36px;
  align-items: start;
}
.form-card {
  background: rgba(12, 14, 18, .72);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 28px;
  padding: 22px;
  backdrop-filter: blur(8px);
  box-shadow: var(--shadow);
}
.field { margin-bottom: 12px; }
.field label { display: block; font-size: 13px; font-weight: 630; margin-bottom: 6px; }
.field input, .field select {
  width: 100%;
  height: 50px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
  color: #fff;
  padding: 0 14px;
}
.field input::placeholder { color: rgba(255,255,255,.45); }
.field select option { color: #14171c; }
.form-card .btn { width: 100%; margin-top: 6px; }
.done {
  min-height: 220px;
  display: grid;
  align-content: center;
  gap: 8px;
}
.done strong { font-family: var(--serif); font-size: 40px; font-weight: 550; line-height: 1; }
.reassure { margin-top: 18px; display: grid; gap: 8px; }
.reassure li { padding-left: 16px; position: relative; color: rgba(246,241,232,.8); font-size: 14.5px; }
.reassure li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--gold-2); position: absolute; left: 0; top: 9px; }
.footer {
  background: #0e1116;
  color: rgba(246,241,232,.78);
  padding: 42px 0 28px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.3fr .7fr;
  gap: 24px;
  padding-bottom: 22px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.footer .logo-text { font-size: 18px; }
.footer p { max-width: 520px; margin-top: 12px; font-size: 14px; }
.footer-links { display: flex; flex-wrap: wrap; gap: 10px 16px; align-content: end; justify-content: flex-end; }
.footer-links a { border-bottom: 1px solid transparent; font-size: 14px; }
.footer-links a:hover { color: #fff; border-color: var(--gold-2); }
.copy { padding-top: 16px; font-size: 12.5px; color: rgba(246,241,232,.55); }
@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
@media (max-width: 1024px) {
  .nav {
    transform: translateX(-105%);
    transition: transform .28s ease;
    width: min(86vw, 320px);
    box-shadow: var(--shadow);
  }
  .nav.is-open { transform: none; }
  .close-nav { display: grid; place-items: center; }
  .logo { width: 100%; }
  .mainwrap { margin-left: 0; }
  .topbar { display: flex; }
  .plans { grid-template-columns: 1fr; }
  .plan.is-hot { transform: none; }
  .partners { grid-template-columns: repeat(3, 1fr); }
  .kpis, .guards, .steps { grid-template-columns: 1fr 1fr; }
  .steps li { border-right: 0; border-bottom: 1px solid var(--line); min-height: 0; padding-bottom: 18px; }
}
@media (max-width: 768px) {
  :root { --space: 64px; }
  .container { width: min(1140px, calc(100% - 32px)); }
  .head-row, .feature, .log, .quotes, .benefit, .claim, .footer-grid { grid-template-columns: 1fr; }
  .entry-grid { grid-template-columns: 1fr 1fr; }
  .entry-lg { grid-column: 1 / -1; grid-row: auto; min-height: 280px; }
  .bento { grid-template-columns: 1fr 1fr; grid-template-rows: none; }
  .shot:first-child { grid-row: auto; min-height: 280px; }
  .news li { grid-template-columns: 78px 1fr; }
  .news img { display: none; }
  .feature-visual, .quote-photo, .benefit-photo { min-height: 280px; }
  .footer-links { justify-content: flex-start; }
  .countbar { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 520px) {
  h1 { font-size: 46px; }
  .entry-grid, .bento, .kpis, .guards, .steps, .partners { grid-template-columns: 1fr; }
  .ticks { width: 100%; }
  .tick { flex: 1; min-width: 0; }
  .hero-actions .btn { width: 100%; }
  .rank { grid-template-columns: 40px 1fr; }
  .rank em { grid-column: 2; }
  .news li { grid-template-columns: 1fr; gap: 6px; }
}

/* roulang page: category1 */
:root {
 --ink: #14171c;
 --ink-2: #22272f;
 --gold: #a68456;
 --gold-2: #e7d6bc;
 --gold-deep: #7c6238;
 --paper: #f3f0ea;
 --paper-2: #e7e1d6;
 --white: #fffcf8;
 --text: #171a1f;
 --muted: #5d646e;
 --line: rgba(20, 23, 28, .12);
 --line-strong: rgba(20, 23, 28, .22);
 --shadow: 0 22px 50px rgba(20, 23, 28, .08);
 --shadow-soft: 0 10px 28px rgba(20, 23, 28, .06);
 --radius: 22px;
 --navw: 232px;
 --sans: "Be Vietnam Pro", "Segoe UI", sans-serif;
 --serif: "Cormorant Garamond", Georgia, serif;
 --space: 84px;
}
html { scroll-behavior: smooth; }
*, *::before, *::after { box-sizing: border-box; }
body {
 margin: 0;
 color: var(--text);
 background: var(--paper);
 font-family: var(--sans);
 font-size: 16px;
 line-height: 1.7;
 text-rendering: optimizeLegibility;
}
body.nav-lock { overflow: hidden; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3 { font-family: var(--serif); font-weight: 600; letter-spacing: -.02em; }
p { margin: 0; }
::selection { background: var(--gold-2); color: var(--ink); }
a:focus-visible, button:focus-visible {
 outline: 2px solid var(--gold);
 outline-offset: 3px;
}
.nav {
 position: fixed;
 inset: 0 auto 0 0;
 width: var(--navw);
 background: var(--ink);
 color: #f6f1e8;
 z-index: 50;
 display: flex;
 flex-direction: column;
 padding: 28px 18px 22px;
 border-right: 1px solid rgba(231, 214, 188, .12);
}
.nav-top { display: flex; align-items: flex-start; gap: 8px; }
.logo {
 display: flex;
 gap: 12px;
 align-items: center;
 margin-bottom: 28px;
}
.nav-top .logo { flex: 1; margin-bottom: 22px; }
.logo-mark {
 width: 42px;
 height: 42px;
 flex: 0 0 42px;
 border: 1px solid var(--gold-2);
 border-radius: 14px;
 display: grid;
 place-items: center;
 font-family: var(--serif);
 font-size: 26px;
 color: var(--gold-2);
}
.logo-text {
 font-size: 14px;
 font-weight: 600;
 line-height: 1.35;
 letter-spacing: .01em;
}
.nav-links { display: flex; flex-direction: column; gap: 4px; }
.nav-links a {
 display: flex;
 align-items: center;
 gap: 10px;
 min-height: 42px;
 padding: 8px 10px;
 border-radius: 12px;
 color: rgba(246, 241, 232, .78);
 font-size: 14px;
 font-weight: 500;
 transition: background .2s ease, color .2s ease, transform .2s ease;
}
.nav-links a i { width: 16px; color: var(--gold-2); font-size: 12px; }
.nav-links a:hover { background: rgba(255,255,255,.05); color: #fff; transform: translateX(2px); }
.nav-links a.is-active {
 background: rgba(166, 132, 86, .2);
 color: #f8efe2;
}
.nav-foot {
 margin-top: auto;
 padding-top: 18px;
 border-top: 1px solid rgba(255,255,255,.08);
 color: rgba(246, 241, 232, .62);
 font-size: 12px;
 line-height: 1.55;
}
.close-nav {
 display: none;
 margin-left: auto;
 width: 38px;
 height: 38px;
 border-radius: 12px;
 border: 1px solid rgba(255,255,255,.16);
 background: transparent;
 color: #fff;
}
.nav-backdrop { display: none; }
.mainwrap { margin-left: var(--navw); min-width: 0; }
.topbar {
 display: none;
 position: sticky;
 top: 0;
 z-index: 40;
 height: 64px;
 padding: 0 16px;
 align-items: center;
 justify-content: space-between;
 background: rgba(20, 23, 28, .94);
 color: #f6f1e8;
 backdrop-filter: blur(12px);
}
.top-logo { font-weight: 650; font-size: 14px; letter-spacing: .01em; }
.icon-btn {
 width: 42px;
 height: 42px;
 border-radius: 12px;
 border: 1px solid rgba(255,255,255,.16);
 background: transparent;
 color: #fff;
 display: grid;
 place-items: center;
}
.icon-btn:hover { background: rgba(255,255,255,.06); }
.container { width: min(1140px, calc(100% - 48px)); margin: 0 auto; }
.hero { position: relative; color: #f7f4ee; overflow: hidden; background: #0e1116; }
.hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-mask {
 position: absolute;
 inset: 0;
 background: linear-gradient(180deg, rgba(8,10,14,.42) 0%, rgba(8,10,14,.18) 34%, rgba(8,10,14,.78) 100%);
}
.hero-inner {
 position: relative;
 z-index: 1;
 min-height: 100vh;
 min-height: 100svh;
 display: flex;
 flex-direction: column;
 justify-content: space-between;
 padding: 28px 0 68px;
}
.hero-copy { max-width: 760px; animation: rise .7s ease both; }
.hero-lead { max-width: 640px; color: rgba(247,244,238,.88); font-size: 16.5px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.btn {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 gap: 8px;
 min-height: 50px;
 padding: 0 20px;
 border-radius: 999px;
 border: 1px solid transparent;
 font-weight: 600;
 font-size: 14.5px;
 transition: transform .2s ease, background .2s ease, box-shadow .2s ease, color .2s ease, border-color .2s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn-gold { background: var(--gold-2); color: var(--ink); }
.btn-gold:hover { background: #fff; box-shadow: 0 12px 30px rgba(0,0,0,.18); }
.btn-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.4); }
.btn-ghost:hover { background: rgba(255,255,255,.08); }
.btn-ink { background: var(--ink); color: #f6f1e8; }
.btn-ink:hover { background: #000; box-shadow: var(--shadow); }
.btn-line { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn-line:hover { border-color: var(--ink); }
.head-row {
 display: grid;
 grid-template-columns: .9fr 1.1fr;
 gap: 32px;
 align-items: end;
 margin-bottom: 34px;
}
.lead { color: var(--muted); font-size: 16px; max-width: 66ch; }
.block-ink .lead, .band-ink .lead { color: rgba(246,241,232,.74); }
.entry-grid { display: grid; grid-template-columns: 1.35fr 1fr 1fr; gap: 14px; }
.entry { position: relative; min-height: 280px; border-radius: var(--radius); overflow: hidden; color: #fff; display: block; }
.entry img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.entry-body { position: relative; z-index: 1; padding: 18px; }
.entry-body small { display: block; color: var(--gold-2); font-size: 12px; letter-spacing: .12em; }
.entry-body strong { display: block; margin: 6px 0 6px; font-size: 22px; line-height: 1.2; font-weight: 600; }
.entry-body p { color: rgba(255,255,255,.86); font-size: 14px; line-height: 1.5; }
.entry:hover img { transform: scale(1.06); }
.feature { display: grid; grid-template-columns: 1.15fr .85fr; gap: 28px; align-items: stretch; }
.feature-visual { position: relative; min-height: 520px; border-radius: 28px; overflow: hidden; box-shadow: var(--shadow); }
.feature-visual img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.feature-caption {
 position: absolute;
 left: 18px;
 right: 18px;
 bottom: 18px;
 padding: 16px 16px 14px;
 border-radius: 16px;
 background: rgba(255,252,248,.92);
 color: var(--ink);
}
.feature-caption span { color: var(--gold-deep); font-size: 12px; font-weight: 650; letter-spacing: .08em; }
.band { padding: var(--space) 0; }
.band-white { background: var(--white); }
.band-sand { background: var(--paper-2); }
.band-ink { background: var(--ink); color: #f6f1e8; }
.eyebrow {
 display: inline-flex;
 align-items: center;
 gap: 8px;
 margin: 0 0 14px;
 color: var(--gold-deep);
 font-size: 12px;
 font-weight: 650;
 letter-spacing: .14em;
 text-transform: uppercase;
}
.band-ink .eyebrow, .band-mark .eyebrow { color: var(--gold-2); }
.crumb { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 18px; color: var(--muted); font-size: 13px; }
.crumb a { border-bottom: 1px solid transparent; }
.crumb a:hover { color: var(--ink); border-bottom-color: var(--gold); }
.crumb i { font-size: 9px; color: var(--gold); }
h1 { font-size: clamp(46px, 6vw, 76px); line-height: .94; margin: 0 0 8px; }
h2 { font-size: clamp(34px, 4vw, 52px); line-height: 1.02; margin: 0; }
h3 { font-size: 28px; line-height: 1.15; margin: 0 0 8px; }
.rule { width: 72px; height: 1px; margin: 18px 0 18px; border: 0; background: var(--gold); }
.mast { padding: 54px 0 28px; }
.mast-grid {
 display: grid;
 grid-template-columns: minmax(0, 1.05fr) minmax(280px, .95fr);
 gap: 42px;
 align-items: end;
}
.mast-visual {
 position: relative;
 min-height: 520px;
 border-radius: 28px;
 overflow: hidden;
 box-shadow: var(--shadow);
 background: var(--ink);
}
.mast-visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mast-visual figcaption {
 position: absolute;
 left: 16px;
 right: 16px;
 bottom: 16px;
 padding: 14px 16px;
 border-radius: 16px;
 background: rgba(255,252,248,.92);
 color: var(--ink);
}
.mast-visual strong { display: block; font-size: 16px; }
.mast-visual span { color: var(--gold-deep); font-size: 12px; font-weight: 650; letter-spacing: .08em; }
.stat-row {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 border-top: 1px solid rgba(231,214,188,.22);
}
.stat { padding: 26px 18px 8px 0; }
.stat + .stat { padding-left: 22px; border-left: 1px solid rgba(231,214,188,.16); }
.stat b {
 display: block;
 font-family: var(--serif);
 font-size: clamp(34px, 3vw, 46px);
 font-weight: 600;
 line-height: 1;
 color: var(--gold-2);
}
.stat span { display: block; margin-top: 8px; color: rgba(246,241,232,.78); font-size: 14px; }
.pack-grid { display: grid; grid-template-columns: .92fr 1.08fr; gap: 18px; align-items: stretch; }
.pack {
 background: var(--paper);
 border: 1px solid var(--line);
 border-radius: 28px;
 padding: 28px 26px 24px;
 box-shadow: var(--shadow-soft);
 transition: transform .2s ease, box-shadow .2s ease;
}
.pack:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.pack.is-featured {
 background: var(--ink);
 color: #f6f1e8;
 border-color: rgba(231,214,188,.28);
}
.badge {
 display: inline-flex;
 align-items: center;
 min-height: 28px;
 padding: 0 10px;
 border-radius: 999px;
 border: 1px solid var(--line-strong);
 background: rgba(255,252,248,.7);
 font-size: 12px;
 font-weight: 650;
 letter-spacing: .04em;
}
.pack.is-featured .badge { color: var(--ink); background: var(--gold-2); border-color: transparent; }
.pack ul, .ticks { list-style: none; margin: 18px 0 0; padding: 0; }
.pack li, .ticks li {
 display: flex;
 gap: 10px;
 align-items: flex-start;
 padding: 10px 0;
 border-top: 1px solid var(--line);
 font-size: 15px;
}
.pack.is-featured li { border-top-color: rgba(255,255,255,.1); }
.pack li i, .ticks li i { color: var(--gold-deep); margin-top: 4px; }
.pack.is-featured li i { color: var(--gold-2); }
.pack .note { margin-top: 16px; color: var(--muted); font-size: 14px; }
.pack.is-featured .note { color: rgba(246,241,232,.7); }
.parts-grid { display: grid; grid-template-columns: .86fr 1.14fr; gap: 28px; align-items: center; }
.shot {
 position: relative;
 min-height: 460px;
 border-radius: 28px;
 overflow: hidden;
 box-shadow: var(--shadow);
}
.shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.shot:hover img { transform: scale(1.04); }
.ticks li { border-top-color: rgba(20,23,28,.12); }
.ticks strong { display: block; font-weight: 650; }
.ticks span { display: block; color: var(--muted); font-size: 14px; }
.steps {
 list-style: none;
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 gap: 22px;
 margin: 8px 0 0;
 padding: 0;
}
.steps li {
 padding-top: 16px;
 border-top: 1px solid var(--ink);
}
.steps em {
 display: block;
 margin-bottom: 10px;
 font-style: normal;
 font-family: var(--serif);
 font-size: 28px;
 color: var(--gold-deep);
}
.steps h3 { font-family: var(--sans); font-size: 18px; font-weight: 650; letter-spacing: 0; }
.steps p { color: var(--muted); font-size: 14.5px; }
.plat-list { display: flex; flex-direction: column; }
.plat {
 display: grid;
 grid-template-columns: 180px 1fr auto;
 gap: 22px;
 align-items: center;
 padding: 22px 0;
 border-top: 1px solid var(--line);
}
.plat:last-child { border-bottom: 1px solid var(--line); }
.plat b { font-size: 18px; }
.plat p { color: var(--muted); }
.tag {
 justify-self: end;
 min-height: 32px;
 padding: 0 12px;
 display: inline-flex;
 align-items: center;
 border-radius: 999px;
 background: var(--paper-2);
 color: var(--gold-deep);
 font-size: 12px;
 font-weight: 700;
 letter-spacing: .06em;
}
.band-mark { position: relative; color: #f7f4ee; background: #0e1116; overflow: hidden; }
.band-mark .bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.band-mark .veil {
 position: absolute;
 inset: 0;
 background: linear-gradient(90deg, rgba(8,10,14,.9) 0%, rgba(8,10,14,.72) 48%, rgba(8,10,14,.42) 100%);
}
.mark-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr .8fr; gap: 28px; align-items: center; }
.mark-grid .lead { color: rgba(247,244,238,.8); }
.mark-points { display: grid; gap: 12px; }
.mark-points article {
 padding: 16px 16px 14px;
 border-radius: 16px;
 background: rgba(255,252,248,.08);
 border: 1px solid rgba(231,214,188,.18);
 backdrop-filter: blur(8px);
}
.mark-points strong { display: block; color: var(--gold-2); font-size: 14px; }
.mark-points p { color: rgba(247,244,238,.82); font-size: 14.5px; }
.receive-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 28px; align-items: center; }
.receive-card {
 background: var(--white);
 border-radius: 28px;
 padding: 28px;
 border: 1px solid var(--line);
 box-shadow: var(--shadow-soft);
}
.receive-card p { color: var(--muted); margin-bottom: 18px; }
.mail {
 display: inline-flex;
 margin-top: 14px;
 color: var(--gold-deep);
 font-weight: 650;
 border-bottom: 1px solid rgba(124,98,56,.35);
}
.mail:hover { color: var(--ink); }
.footer {
 background: var(--ink);
 color: #f6f1e8;
 padding: 48px 0 28px;
}
.footer-grid { display: grid; grid-template-columns: 1.4fr .8fr; gap: 28px; align-items: start; }
.footer .logo-text { color: #f6f1e8; }
.footer p { color: rgba(246,241,232,.72); max-width: 46ch; }
.footer-links { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.footer-links a { color: var(--gold-2); border-bottom: 1px solid transparent; transition: color .2s ease, border-color .2s ease; }
.footer-links a:hover { color: #fff; border-bottom-color: rgba(255,255,255,.4); }
.copy {
 margin-top: 28px;
 padding-top: 16px;
 border-top: 1px solid rgba(255,255,255,.08);
 color: rgba(246,241,232,.55);
 font-size: 13px;
}
@keyframes rise {
 from { opacity: 0; transform: translateY(12px); }
 to { opacity: 1; transform: none; }
}
.mast-copy { animation: rise .7s ease both; }
@media (prefers-reduced-motion: reduce) {
 html { scroll-behavior: auto; }
 .mast-copy, .hero-copy { animation: none; }
 .btn:hover, .pack:hover, .nav-links a:hover, .shot:hover img, .entry:hover img { transform: none; }
}
@media (max-width: 1024px) {
 .nav {
 transform: translateX(-105%);
 transition: transform .25s ease;
 width: min(86vw, 320px);
 box-shadow: var(--shadow);
 }
 .nav.is-open { transform: translateX(0); }
 .close-nav { display: grid; place-items: center; }
 .topbar { display: flex; }
 .mainwrap { margin-left: 0; }
 .nav-backdrop.is-on { display: block; position: fixed; inset: 0; background: rgba(8,10,14,.46); z-index: 45; }
 .mast { padding-top: 34px; }
 .head-row, .mark-grid, .receive-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
 :root { --space: 64px; }
 .mast-grid, .pack-grid, .parts-grid, .footer-grid { grid-template-columns: 1fr; }
 .mast-visual, .shot { min-height: 340px; }
 .stat-row, .steps { grid-template-columns: 1fr 1fr; }
 .stat + .stat { border-left: 0; padding-left: 0; }
 .stat:nth-child(2), .stat:nth-child(4) { padding-left: 18px; border-left: 1px solid rgba(231,214,188,.16); }
 .plat { grid-template-columns: 1fr; gap: 6px; }
 .tag { justify-self: start; }
 h1 { font-size: 46px; }
}
@media (max-width: 520px) {
 .container { width: min(1140px, calc(100% - 32px)); }
 .stat-row, .steps { grid-template-columns: 1fr; }
 .stat:nth-child(2), .stat:nth-child(4) { padding-left: 0; border-left: 0; }
 .hero-actions, .btn { width: 100%; }
 .mast-visual, .shot { min-height: 260px; }
 .pack, .receive-card { padding: 22px 18px; }
 .top-logo { font-size: 13px; }
}

/* roulang page: category2 */
:root {
 --ink: #14171c;
 --ink-2: #22272f;
 --gold: #a68456;
 --gold-2: #e7d6bc;
 --gold-deep: #7c6238;
 --paper: #f3f0ea;
 --paper-2: #e7e1d6;
 --white: #fffcf8;
 --text: #171a1f;
 --muted: #5d646e;
 --line: rgba(20, 23, 28, .12);
 --line-strong: rgba(20, 23, 28, .22);
 --shadow: 0 22px 50px rgba(20, 23, 28, .08);
 --shadow-soft: 0 10px 28px rgba(20, 23, 28, .06);
 --radius: 22px;
 --navw: 232px;
 --sans: "Be Vietnam Pro", "Segoe UI", sans-serif;
 --serif: "Cormorant Garamond", Georgia, serif;
 --space: 84px;
}
/* roulang page: phien-ban */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
 margin: 0;
 color: var(--text);
 background: var(--paper);
 font-family: var(--sans);
 font-size: 16px;
 line-height: 1.7;
 text-rendering: optimizeLegibility;
}
body.nav-lock { overflow: hidden; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
p { margin: 0 0 12px; }
h1, h2, h3 { margin: 0; }
ul, ol { margin: 0; padding: 0; }
::selection { background: var(--gold-2); color: var(--ink); }
a:focus-visible, button:focus-visible {
 outline: 2px solid var(--gold);
 outline-offset: 3px;
}
.nav {
 position: fixed;
 inset: 0 auto 0 0;
 width: var(--navw);
 background: var(--ink);
 color: #f6f1e8;
 z-index: 50;
 display: flex;
 flex-direction: column;
 padding: 28px 18px 22px;
 border-right: 1px solid rgba(231, 214, 188, .12);
}
.nav-head { display: flex; align-items: flex-start; gap: 8px; }
.logo {
 display: flex;
 gap: 12px;
 align-items: center;
 margin-bottom: 28px;
}
.nav-head .logo { flex: 1; margin-bottom: 22px; }
.logo-mark {
 width: 42px;
 height: 42px;
 flex: 0 0 42px;
 border: 1px solid var(--gold-2);
 border-radius: 14px;
 display: grid;
 place-items: center;
 font-family: var(--serif);
 font-size: 26px;
 color: var(--gold-2);
}
.logo-text {
 font-size: 14px;
 font-weight: 600;
 line-height: 1.35;
 letter-spacing: .01em;
}
.nav-links { display: flex; flex-direction: column; gap: 4px; }
.nav-links a {
 display: flex;
 align-items: center;
 gap: 10px;
 min-height: 42px;
 padding: 8px 10px;
 border-radius: 12px;
 color: rgba(246, 241, 232, .78);
 font-size: 14px;
 font-weight: 500;
 transition: background .2s ease, color .2s ease, transform .2s ease;
}
.nav-links a i { width: 16px; color: var(--gold-2); font-size: 12px; }
.nav-links a:hover { background: rgba(255,255,255,.05); color: #fff; transform: translateX(2px); }
.nav-links a:active { background: rgba(166, 132, 86, .28); }
.nav-links a.is-active {
 background: rgba(166, 132, 86, .2);
 color: #f8efe2;
}
.nav-foot {
 margin-top: auto;
 padding-top: 18px;
 border-top: 1px solid rgba(255,255,255,.08);
 color: rgba(246, 241, 232, .62);
 font-size: 12px;
 line-height: 1.55;
}
.close-nav {
 display: none;
 width: 38px;
 height: 38px;
 flex: 0 0 38px;
 border-radius: 12px;
 border: 1px solid rgba(255,255,255,.16);
 background: transparent;
 color: #fff;
}
.mainwrap { margin-left: var(--navw); min-width: 0; }
.topbar {
 display: none;
 position: sticky;
 top: 0;
 z-index: 40;
 height: 64px;
 padding: 0 16px;
 align-items: center;
 justify-content: space-between;
 background: rgba(20, 23, 28, .94);
 color: #f6f1e8;
 backdrop-filter: blur(12px);
}
.top-logo { font-weight: 650; font-size: 14px; letter-spacing: .01em; line-height: 1.3; max-width: 72%; }
.icon-btn {
 width: 42px;
 height: 42px;
 border-radius: 12px;
 border: 1px solid rgba(255,255,255,.16);
 background: transparent;
 color: #fff;
}
.icon-btn:hover, .close-nav:hover { background: rgba(255,255,255,.08); }
.container { width: min(1140px, calc(100% - 48px)); margin: 0 auto; }
.hero { position: relative; color: #f7f4ee; overflow: hidden; background: #0e1116; }
.hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-mask {
 position: absolute;
 inset: 0;
 background: linear-gradient(180deg, rgba(8,10,14,.42) 0%, rgba(8,10,14,.18) 34%, rgba(8,10,14,.78) 100%);
}
.hero-inner {
 position: relative;
 z-index: 1;
 min-height: 100vh;
 min-height: 100svh;
 display: flex;
 flex-direction: column;
 justify-content: space-between;
 padding: 28px 0 68px;
}
.hero-copy { max-width: 760px; animation: rise .7s ease both; }
.hero-lead { max-width: 640px; color: rgba(247,244,238,.88); font-size: 16.5px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.btn {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 gap: 8px;
 min-height: 50px;
 padding: 0 20px;
 border-radius: 999px;
 border: 1px solid transparent;
 font-weight: 600;
 font-size: 14.5px;
 transition: transform .2s ease, background .2s ease, box-shadow .2s ease, color .2s ease, border-color .2s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn-gold { background: var(--gold-2); color: var(--ink); }
.btn-gold:hover { background: #fff; box-shadow: 0 12px 30px rgba(0,0,0,.18); }
.btn-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.4); }
.btn-ghost:hover { background: rgba(255,255,255,.08); }
.btn-ink { background: var(--ink); color: #f6f1e8; }
.btn-ink:hover { background: #000; box-shadow: var(--shadow); }
.btn-line { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn-line:hover { border-color: var(--ink); background: rgba(20,23,28,.03); }
.head-row {
 display: grid;
 grid-template-columns: .9fr 1.1fr;
 gap: 32px;
 align-items: end;
 margin-bottom: 34px;
}
.lead { color: var(--muted); font-size: 16px; max-width: 66ch; }
.block-ink .lead, .section-ink .lead { color: rgba(246,241,232,.74); }
.entry-grid { display: grid; grid-template-columns: 1.35fr 1fr 1fr; gap: 14px; }
.entry {
 position: relative;
 min-height: 280px;
 border-radius: var(--radius);
 overflow: hidden;
 color: #fff;
 isolation: isolate;
 display: block;
}
.entry img {
 position: absolute;
 inset: 0;
 width: 100%;
 height: 100%;
 object-fit: cover;
 transition: transform .6s ease;
}
.entry::after {
 content: "";
 position: absolute;
 inset: 0;
 background: linear-gradient(180deg, rgba(10,12,16,.08), rgba(10,12,16,.74));
}
.entry-body { position: relative; z-index: 1; padding: 18px; }
.entry-body small { display: block; color: var(--gold-2); font-size: 12px; letter-spacing: .12em; }
.entry-body strong { display: block; margin: 6px 0 6px; font-size: 22px; line-height: 1.2; font-weight: 600; }
.entry-body p { color: rgba(255,255,255,.86); font-size: 14px; line-height: 1.5; }
.entry:hover img { transform: scale(1.06); }
.feature { display: grid; grid-template-columns: 1.15fr .85fr; gap: 28px; align-items: stretch; }
.feature-visual {
 position: relative;
 min-height: 520px;
 border-radius: 28px;
 overflow: hidden;
 box-shadow: var(--shadow);
}
.feature-visual img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.feature-caption {
 position: absolute;
 left: 18px;
 right: 18px;
 bottom: 18px;
 padding: 16px 16px 14px;
 border-radius: 16px;
 background: rgba(255,252,248,.92);
 color: var(--ink);
}
.feature-caption span { color: var(--gold-deep); font-size: 12px; font-weight: 650; letter-spacing: .08em; }
.feature-caption strong { display: block; margin-top: 4px; font-size: 20px; line-height: 1.3; }
.kicker {
 margin: 0 0 12px;
 font-size: 12px;
 font-weight: 650;
 letter-spacing: .16em;
 text-transform: uppercase;
 color: var(--gold-deep);
}
.kicker.light { color: var(--gold-2); }
h1, h2 { font-family: var(--serif); font-weight: 600; letter-spacing: -.025em; }
h1 { font-size: clamp(46px, 5.5vw, 78px); line-height: .96; }
h2 { font-size: clamp(34px, 4vw, 54px); line-height: 1.02; margin-bottom: 12px; }
h3 { font-family: var(--sans); font-size: 24px; line-height: 1.28; font-weight: 600; margin-bottom: 8px; }
.section { padding: var(--space) 0; }
.section-white { background: var(--white); }
.section-sand { background: var(--paper-2); }
.section-ink { background: var(--ink); color: #f6f1e8; }
.page-hero { position: relative; color: #f7f4ee; background: #0e1116; overflow: hidden; }
.page-hero .hero-mask {
 background: linear-gradient(100deg, rgba(8,10,14,.88) 0%, rgba(8,10,14,.72) 46%, rgba(8,10,14,.42) 100%);
}
.page-hero-inner {
 position: relative;
 z-index: 1;
 display: grid;
 grid-template-columns: 1.05fr .95fr;
 gap: 42px;
 align-items: end;
 padding: 72px 0 64px;
}
.page-hero .hero-lead { margin-top: 18px; }
.stat-row { display: flex; flex-wrap: wrap; gap: 22px; margin-top: 28px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.16); }
.stat-row strong { display: block; font-family: var(--serif); font-size: 34px; line-height: 1; font-weight: 600; }
.stat-row span { display: block; margin-top: 4px; color: rgba(247,244,238,.72); font-size: 13px; }
.console {
 background: rgba(12,14,18,.78);
 border: 1px solid rgba(231,214,188,.2);
 border-radius: 24px;
 box-shadow: 0 24px 60px rgba(0,0,0,.28);
 backdrop-filter: blur(8px);
 overflow: hidden;
}
.console-bar {
 display: flex;
 align-items: center;
 gap: 7px;
 padding: 14px 16px;
 border-bottom: 1px solid rgba(255,255,255,.08);
}
.console-bar i {
 width: 9px;
 height: 9px;
 border-radius: 50%;
 background: rgba(231,214,188,.45);
 display: block;
}
.console-bar em {
 margin-left: 8px;
 font-style: normal;
 color: rgba(246,241,232,.62);
 font-size: 12px;
 letter-spacing: .08em;
}
.manifest {
 margin: 0;
 padding: 18px 18px 8px;
 color: #f6f1e8;
 font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
 font-size: 13.5px;
 line-height: 1.85;
 overflow: auto;
}
.manifest b { color: var(--gold-2); font-weight: 600; }
.console-foot {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 12px;
 padding: 14px 16px 16px;
}
.console-foot span { color: rgba(246,241,232,.7); font-size: 13px; }
.track {
 display: grid;
 grid-template-columns: 1.15fr .85fr;
 gap: 18px;
}
.track-card {
 background: var(--white);
 border: 1px solid var(--line);
 border-radius: 28px;
 padding: 28px;
 box-shadow: var(--shadow-soft);
 transition: transform .25s ease, box-shadow .25s ease;
}
.track-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.track-card.is-new { background: var(--ink); color: #f6f1e8; border-color: transparent; }
.track-card.is-new p { color: rgba(246,241,232,.74); }
.badge {
 display: inline-flex;
 align-items: center;
 min-height: 28px;
 padding: 0 10px;
 border-radius: 999px;
 background: rgba(166,132,86,.12);
 color: var(--gold-deep);
 font-size: 12px;
 font-weight: 650;
 letter-spacing: .06em;
 margin-bottom: 16px;
}
.is-new .badge { background: rgba(231,214,188,.14); color: var(--gold-2); }
.spec-list { list-style: none; margin: 18px 0 22px; }
.spec-list li {
 display: flex;
 justify-content: space-between;
 gap: 16px;
 padding: 10px 0;
 border-top: 1px solid var(--line);
 font-size: 14.5px;
}
.is-new .spec-list li { border-top-color: rgba(255,255,255,.1); }
.spec-list span { color: var(--muted); }
.is-new .spec-list span { color: rgba(246,241,232,.62); }
.ledger { border-top: 1px solid var(--line); }
.ledger-row {
 display: grid;
 grid-template-columns: 1.15fr 1fr 1fr;
 gap: 18px;
 align-items: center;
 padding: 18px 0;
 border-bottom: 1px solid var(--line);
}
.ledger-head { color: var(--muted); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; font-weight: 650; }
.ledger-key { font-weight: 650; }
.ledger-row small { display: none; }
.ledger-row strong { font-weight: 600; }
.log-layout { display: grid; grid-template-columns: .78fr 1.22fr; gap: 40px; align-items: start; }
.timeline { list-style: none; }
.timeline li {
 display: grid;
 grid-template-columns: 92px 1fr;
 gap: 18px;
 padding: 0 0 22px;
}
.timeline li:last-child { padding-bottom: 0; }
.timeline span {
 color: var(--gold-2);
 font-family: var(--serif);
 font-size: 28px;
 line-height: 1;
}
.timeline div { border-top: 1px solid rgba(255,255,255,.12); padding-top: 12px; }
.timeline p { color: rgba(246,241,232,.72); margin: 0; }
.fit { display: grid; grid-template-columns: .95fr 1.05fr; gap: 28px; align-items: center; }
.fit-visual {
 position: relative;
 min-height: 460px;
 border-radius: 28px;
 overflow: hidden;
 box-shadow: var(--shadow);
}
.fit-visual img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.fit-visual figcaption {
 position: absolute;
 left: 16px;
 right: 16px;
 bottom: 16px;
 padding: 14px 16px;
 border-radius: 16px;
 background: rgba(255,252,248,.92);
 color: var(--ink);
 font-size: 14px;
}
.plain-list { list-style: none; margin-top: 18px; }
.plain-list li {
 display: grid;
 grid-template-columns: 18px 1fr;
 gap: 10px;
 padding: 12px 0;
 border-top: 1px solid var(--line);
}
.plain-list i { color: var(--gold-deep); margin-top: 5px; font-size: 13px; }
.checks { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.check {
 display: flex;
 gap: 12px;
 align-items: flex-start;
 padding: 18px;
 background: var(--paper);
 border: 1px solid var(--line);
 border-radius: 18px;
 transition: border-color .2s ease, transform .2s ease;
}
.check:hover { border-color: var(--gold); transform: translateY(-2px); }
.check i {
 width: 28px;
 height: 28px;
 flex: 0 0 28px;
 display: grid;
 place-items: center;
 border-radius: 9px;
 background: rgba(166,132,86,.14);
 color: var(--gold-deep);
 font-size: 12px;
}
.check strong { display: block; font-size: 15.5px; }
.check p { margin: 2px 0 0; color: var(--muted); font-size: 14px; }
.note {
 display: grid;
 grid-template-columns: .86fr 1.14fr;
 gap: 28px;
 align-items: center;
 padding: 22px 0;
}
.note + .note { border-top: 1px solid var(--line); }
.note.reverse .note-visual { order: 2; }
.note-visual {
 min-height: 280px;
 border-radius: 24px;
 overflow: hidden;
 position: relative;
}
.note-visual img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; transition: transform .55s ease; }
.note:hover img { transform: scale(1.05); }
.band { position: relative; color: #f7f4ee; overflow: hidden; background: #0e1116; }
.band .hero-mask { background: linear-gradient(90deg, rgba(8,10,14,.9), rgba(8,10,14,.72)); }
.band-grid {
 position: relative;
 z-index: 1;
 display: flex;
 justify-content: space-between;
 align-items: end;
 gap: 28px;
}
.band .lead { color: rgba(247,244,238,.78); }
.footer { background: var(--ink); color: #f6f1e8; padding: 48px 0 28px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr .8fr; gap: 28px; align-items: start; }
.footer .logo { margin-bottom: 14px; }
.footer p { color: rgba(246,241,232,.72); max-width: 52ch; }
.footer-links { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; padding-top: 8px; }
.footer-links a {
 color: var(--gold-2);
 border-bottom: 1px solid transparent;
 transition: color .2s ease, border-color .2s ease;
}
.footer-links a:hover { color: #fff; border-bottom-color: var(--gold-2); }
.copy {
 margin-top: 28px;
 padding-top: 16px;
 border-top: 1px solid rgba(255,255,255,.08);
 color: rgba(246,241,232,.55);
 font-size: 13px;
}
@keyframes rise {
 from { opacity: 0; transform: translateY(12px); }
 to { opacity: 1; transform: none; }
}
@media (max-width: 1024px) {
 .nav {
 transform: translateX(-105%);
 transition: transform .28s ease;
 width: min(286px, 86vw);
 }
 .nav.is-open { transform: translateX(0); }
 .close-nav { display: grid; place-items: center; }
 .mainwrap { margin-left: 0; }
 .topbar { display: flex; }
 .page-hero-inner, .head-row, .track, .log-layout, .fit, .note, .note.reverse, .footer-grid, .feature, .entry-grid {
 grid-template-columns: 1fr;
 }
 .note.reverse .note-visual { order: 0; }
 .fit-visual, .feature-visual { min-height: 340px; position: relative; }
 .fit-visual img, .feature-visual img { position: absolute; }
 .page-hero-inner { padding: 48px 0 42px; }
 :root { --space: 64px; }
}
@media (min-width: 1025px) {
 .nav { transform: none !important; }
 body.nav-lock { overflow: auto; }
}
@media (max-width: 768px) {
 .checks, .ledger-row { grid-template-columns: 1fr; }
 .ledger-head { display: none; }
 .ledger-row { gap: 8px; }
 .ledger-row small { display: block; color: var(--muted); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
 .timeline li { grid-template-columns: 72px 1fr; }
 .band-grid, .console-foot { align-items: flex-start; flex-direction: column; }
 h1 { font-size: 44px; }
}
@media (max-width: 520px) {
 .container { width: min(1140px, calc(100% - 32px)); }
 :root { --space: 48px; }
 .hero-actions .btn, .console-foot .btn, .track-card .btn, .band .btn { width: 100%; }
 .stat-row { gap: 16px; }
 .stat-row div { min-width: 42%; }
 .track-card { padding: 20px; }
 .timeline li { grid-template-columns: 1fr; gap: 4px; }
 .note-visual { min-height: 220px; }
}
@media (prefers-reduced-motion: reduce) {
 *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* roulang page: category3 */
:root {
 --ink: #14171c;
 --ink-2: #22272f;
 --gold: #a68456;
 --gold-2: #e7d6bc;
 --gold-deep: #7c6238;
 --paper: #f3f0ea;
 --paper-2: #e7e1d6;
 --white: #fffcf8;
 --text: #171a1f;
 --muted: #5d646e;
 --line: rgba(20, 23, 28, .12);
 --line-strong: rgba(20, 23, 28, .22);
 --shadow: 0 22px 50px rgba(20, 23, 28, .08);
 --shadow-soft: 0 10px 28px rgba(20, 23, 28, .06);
 --radius: 22px;
 --navw: 232px;
 --sans: "Be Vietnam Pro", "Segoe UI", sans-serif;
 --serif: "Cormorant Garamond", Georgia, serif;
 --space: 84px;
}
:root { --space: 64px; }
/* roulang page: index */
:root {
 --ink: #14171c;
 --ink-2: #22272f;
 --gold: #a68456;
 --gold-2: #e7d6bc;
 --gold-deep: #7c6238;
 --paper: #f3f0ea;
 --paper-2: #e7e1d6;
 --white: #fffcf8;
 --text: #171a1f;
 --muted: #5d646e;
 --line: rgba(20, 23, 28, .12);
 --line-strong: rgba(20, 23, 28, .22);
 --shadow: 0 22px 50px rgba(20, 23, 28, .08);
 --shadow-soft: 0 10px 28px rgba(20, 23, 28, .06);
 --radius: 22px;
 --navw: 232px;
 --sans: "Be Vietnam Pro", "Segoe UI", sans-serif;
 --serif: "Cormorant Garamond", Georgia, serif;
 --space: 84px;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
 margin: 0;
 color: var(--text);
 background: var(--paper);
 font-family: var(--sans);
 font-size: 16px;
 line-height: 1.7;
 text-rendering: optimizeLegibility;
}
body.nav-lock { overflow: hidden; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
.nav {
 position: fixed;
 inset: 0 auto 0 0;
 width: var(--navw);
 background: var(--ink);
 color: #f6f1e8;
 z-index: 50;
 display: flex;
 flex-direction: column;
 padding: 28px 18px 22px;
 border-right: 1px solid rgba(231, 214, 188, .12);
}
.logo {
 display: flex;
 gap: 12px;
 align-items: center;
 margin-bottom: 28px;
}
.logo-mark {
 width: 42px;
 height: 42px;
 flex: 0 0 42px;
 border: 1px solid var(--gold-2);
 border-radius: 14px;
 display: grid;
 place-items: center;
 font-family: var(--serif), var(--sans);
 font-size: 26px;
 color: var(--gold-2);
}
.logo-text {
 font-size: 14px;
 font-weight: 600;
 line-height: 1.35;
 letter-spacing: .01em;
}
.nav-links { display: flex; flex-direction: column; gap: 4px; }
.nav-links a {
 display: flex;
 align-items: center;
 gap: 10px;
 min-height: 42px;
 padding: 8px 10px;
 border-radius: 12px;
 color: rgba(246, 241, 232, .78);
 font-size: 14px;
 font-weight: 500;
 transition: background .2s ease, color .2s ease, transform .2s ease;
}
.nav-links a i { width: 16px; color: var(--gold-2); font-size: 12px; }
.nav-links a:hover { background: rgba(255,255,255,.05); color: #fff; transform: translateX(2px); }
.nav-links a.is-active {
 background: rgba(166, 132, 86, .2);
 color: #f8efe2;
}
.nav-links a:focus-visible, .btn:focus-visible, .icon-btn:focus-visible, .close-nav:focus-visible, summary:focus-visible {
 outline: 2px solid var(--gold-2);
 outline-offset: 3px;
}
.nav-foot {
 margin-top: auto;
 padding-top: 18px;
 border-top: 1px solid rgba(255,255,255,.08);
 color: rgba(246, 241, 232, .62);
 font-size: 12px;
 line-height: 1.55;
}
.close-nav {
 display: none;
 margin-left: auto;
 width: 38px;
 height: 38px;
 border-radius: 12px;
 border: 1px solid rgba(255,255,255,.16);
 background: transparent;
 color: #fff;
}
.mainwrap { margin-left: var(--navw); min-width: 0; }
.topbar {
 display: none;
 position: sticky;
 top: 0;
 z-index: 40;
 height: 64px;
 padding: 0 16px;
 align-items: center;
 justify-content: space-between;
 background: rgba(20, 23, 28, .94);
 color: #f6f1e8;
 backdrop-filter: blur(12px);
}
.top-logo { font-weight: 650; font-size: 14px; letter-spacing: .01em; }
.icon-btn {
 width: 42px;
 height: 42px;
 border-radius: 12px;
 border: 1px solid rgba(255,255,255,.16);
 background: transparent;
 color: #fff;
}
.nav-backdrop {
 display: none;
 position: fixed;
 inset: 0;
 z-index: 45;
 border: 0;
 background: rgba(8, 10, 14, .46);
}
.container { width: min(1140px, calc(100% - 48px)); margin: 0 auto; }
.hero { position: relative; color: #f7f4ee; overflow: hidden; background: #0e1116; }
.hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-mask {
 position: absolute;
 inset: 0;
 background:
 linear-gradient(180deg, rgba(8,10,14,.42) 0%, rgba(8,10,14,.18) 34%, rgba(8,10,14,.78) 100%);
}
.hero-inner {
 position: relative;
 z-index: 1;
 min-height: 100vh;
 min-height: 100svh;
 display: flex;
 flex-direction: column;
 justify-content: space-between;
 padding: 28px 0 68px;
}
.hero-copy { max-width: 760px; animation: rise .7s ease both; }
.hero-lead { max-width: 640px; color: rgba(247,244,238,.88); font-size: 16.5px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.btn {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 gap: 8px;
 min-height: 50px;
 padding: 0 20px;
 border-radius: 999px;
 border: 1px solid transparent;
 font-weight: 600;
 font-size: 14.5px;
 transition: transform .2s ease, background .2s ease, box-shadow .2s ease, color .2s ease, border-color .2s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn-gold { background: var(--gold-2); color: var(--ink); }
.btn-gold:hover { background: #fff; box-shadow: 0 12px 30px rgba(0,0,0,.18); }
.btn-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.4); }
.btn-ghost:hover { background: rgba(255,255,255,.08); }
.btn-ink { background: var(--ink); color: #f6f1e8; }
.btn-ink:hover { background: #000; box-shadow: var(--shadow); }
.btn-line { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn-line:hover { border-color: var(--ink); }
.head-row {
 display: grid;
 grid-template-columns: .9fr 1.1fr;
 gap: 32px;
 align-items: end;
 margin-bottom: 34px;
}
.lead { color: var(--muted); font-size: 16px; max-width: 66ch; }
.block-ink .lead { color: rgba(246,241,232,.74); }
.entry-grid {
 display: grid;
 grid-template-columns: 1.35fr 1fr 1fr;
 gap: 14px;
}
.entry { position: relative; min-height: 280px; border-radius: var(--radius); overflow: hidden; color: #fff; }
.entry img {
 position: absolute;
 inset: 0;
 width: 100%;
 height: 100%;
 object-fit: cover;
 transition: transform .6s ease;
}
.entry-body { position: relative; z-index: 1; padding: 18px; }
.entry-body small { display: block; color: var(--gold-2); font-size: 12px; letter-spacing: .12em; }
.entry-body strong { display: block; margin: 6px 0 6px; font-size: 22px; line-height: 1.2; font-weight: 600; }
.entry-body p { color: rgba(255,255,255,.86); font-size: 14px; line-height: 1.5; }
.entry:hover img { transform: scale(1.06); }
.feature {
 display: grid;
 grid-template-columns: 1.15fr .85fr;
 gap: 28px;
 align-items: stretch;
}
.feature-visual {
 position: relative;
 min-height: 520px;
 border-radius: 28px;
 overflow: hidden;
 box-shadow: var(--shadow);
}
.feature-visual img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.feature-caption {
 position: absolute;
 left: 18px;
 right: 18px;
 bottom: 18px;
 padding: 16px 16px 14px;
 border-radius: 16px;
 background: rgba(255,252,248,.92);
 color: var(--ink);
}
.feature-caption span { color: var(--gold-deep); font-size: 12px; font-weight: 650; letter-spacing: .08em; }
.footer {
 background: var(--ink);
 color: #f6f1e8;
 padding: 52px 0 28px;
}
.footer .logo { margin-bottom: 14px; }
.footer p { margin: 0; color: rgba(246,241,232,.72); max-width: 46ch; }
.footer-grid { display: grid; grid-template-columns: 1.4fr .7fr; gap: 32px; align-items: start; }
.footer-links { display: flex; flex-direction: column; gap: 12px; padding-top: 8px; }
.footer-links a {
 color: var(--gold-2);
 font-weight: 500;
 border-bottom: 1px solid transparent;
 width: fit-content;
 transition: border-color .2s ease, color .2s ease;
}
.footer-links a:hover { color: #fff; border-color: rgba(231,214,188,.7); }
.copy {
 margin-top: 28px;
 padding-top: 16px;
 border-top: 1px solid rgba(255,255,255,.08);
 color: rgba(246,241,232,.55);
 font-size: 13px;
}
main { display: block; }
section { padding: var(--space) 0; }
.kicker {
 display: inline-flex;
 align-items: center;
 gap: 8px;
 margin-bottom: 14px;
 color: var(--gold-deep);
 font-size: 12px;
 font-weight: 650;
 letter-spacing: .14em;
 text-transform: uppercase;
}
.kicker i { font-size: 11px; }
h1, h2, h3 { font-family: var(--serif), var(--sans); font-weight: 560; letter-spacing: -.02em; }
h1 { margin: 0; font-size: clamp(46px, 6vw, 84px); line-height: .92; color: var(--ink); }
h2 { margin: 0 0 12px; font-size: clamp(34px, 4vw, 52px); line-height: 1; }
h3 { margin: 0; font-size: 28px; line-height: 1.15; }
.member-mast { position: relative; padding: 72px 0 28px; overflow: hidden; }
.mast-index {
 position: absolute;
 right: 4vw;
 top: 18px;
 font-family: var(--serif), var(--sans);
 font-size: 180px;
 line-height: .8;
 color: rgba(166, 132, 86, .16);
 pointer-events: none;
}
.mast-grid {
 display: grid;
 grid-template-columns: 1.05fr .95fr;
 gap: 42px;
 align-items: end;
}
.mast-copy .lead { margin: 18px 0 0; font-size: 17.5px; }
.mast-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.stat-row {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: 10px;
 margin-top: 34px;
}
.stat {
 padding: 14px 14px 12px;
 border-radius: 16px;
 background: rgba(255,252,248,.72);
 border: 1px solid var(--line);
}
.stat b {
 display: block;
 font-family: var(--serif), var(--sans);
 font-size: 28px;
 font-weight: 600;
 line-height: 1;
}
.stat span { display: block; margin-top: 6px; color: var(--muted); font-size: 13px; }
.photo-card {
 position: relative;
 margin: 0;
 min-height: 460px;
 border-radius: 28px;
 overflow: hidden;
 box-shadow: var(--shadow);
}
.photo-card img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; transition: transform .6s ease; }
.photo-card:hover img { transform: scale(1.04); }
.photo-card figcaption {
 position: absolute;
 left: 16px;
 right: 16px;
 bottom: 16px;
 padding: 14px 16px;
 border-radius: 16px;
 background: rgba(255,252,248,.92);
 color: var(--ink);
}
.photo-card figcaption span { display: block; color: var(--gold-deep); font-size: 12px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; }
.photo-card figcaption strong { display: block; margin-top: 4px; font-size: 18px; }
.band-white { background: var(--white); }
.band-sand { background: linear-gradient(180deg, rgba(231,225,214,.55), rgba(243,240,234,0)); }
.sec-head { max-width: 680px; margin-bottom: 28px; }
.sec-head p { margin: 0; color: var(--muted); }
.tier-board {
 display: grid;
 grid-template-columns: 1.15fr .9fr .9fr;
 gap: 14px;
 align-items: stretch;
}
.tier {
 display: flex;
 flex-direction: column;
 padding: 22px 22px 20px;
 border-radius: 26px;
 background: var(--paper);
 border: 1px solid var(--line);
 box-shadow: var(--shadow-soft);
 transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.tier:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: rgba(166,132,86,.45); }
.tier.is-lead {
 background: var(--ink);
 color: #f6f1e8;
 border-color: transparent;
}
.tier.is-lead .price small, .tier.is-lead .spec span { color: rgba(246,241,232,.62); }
.tier-top { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.badge {
 display: inline-flex;
 align-items: center;
 min-height: 28px;
 padding: 0 10px;
 border-radius: 999px;
 background: var(--gold-2);
 color: var(--ink);
 font-size: 12px;
 font-weight: 650;
 letter-spacing: .04em;
}
.badge-line {
 background: transparent;
 color: var(--gold-deep);
 border: 1px solid rgba(166,132,86,.45);
}
.tier.is-lead .badge { background: var(--gold); color: #fff; }
.price { margin: 22px 0 8px; font-family: var(--serif), var(--sans); font-size: 54px; line-height: .9; font-weight: 600; }
.price small { display: block; margin-top: 8px; font-family: var(--sans); font-size: 13px; font-weight: 500; color: var(--muted); letter-spacing: 0; }
.tier p { margin: 0 0 16px; color: var(--muted); }
.tier.is-lead p { color: rgba(246,241,232,.76); }
.spec { list-style: none; margin: 0 0 18px; padding: 0; }
.spec li {
 display: flex;
 justify-content: space-between;
 gap: 12px;
 padding: 10px 0;
 border-top: 1px solid var(--line);
 font-size: 14px;
}
.tier.is-lead .spec li { border-top-color: rgba(255,255,255,.1); }
.spec span { color: var(--muted); }
.spec b { font-weight: 600; text-align: right; }
.tier .btn { margin-top: auto; }
.rights-grid {
 display: grid;
 grid-template-columns: .8fr 1.2fr;
 gap: 28px;
 align-items: start;
}
.right-list { display: grid; gap: 0; }
.right-item {
 display: grid;
 grid-template-columns: 64px 1fr;
 gap: 8px;
 padding: 18px 0;
 border-top: 1px solid var(--line);
}
.right-item:last-child { border-bottom: 1px solid var(--line); }
.num {
 font-family: var(--serif), var(--sans);
 font-size: 28px;
 color: var(--gold-deep);
 line-height: 1;
}
.right-item h3 { font-family: var(--sans); font-size: 18px; font-weight: 640; letter-spacing: 0; margin-bottom: 4px; }
.right-item p { margin: 0; color: var(--muted); }
.story {
 display: grid;
 grid-template-columns: .9fr 1.1fr;
 gap: 28px;
 align-items: center;
}
.story-copy p { color: var(--muted); }
.note-list { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 10px; }
.note-list li {
 display: flex;
 gap: 10px;
 align-items: flex-start;
 padding: 12px 14px;
 border-radius: 14px;
 background: var(--white);
 border: 1px solid var(--line);
}
.note-list i { color: var(--gold-deep); margin-top: 4px; }
.rail-head {
 display: flex;
 justify-content: space-between;
 gap: 24px;
 align-items: end;
 margin-bottom: 22px;
}
.rail {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 gap: 12px;
}
.rail-item {
 position: relative;
 min-height: 220px;
 padding: 18px;
 border-radius: 22px;
 background: var(--paper);
 border: 1px solid var(--line);
 overflow: hidden;
}
.rail-item::after {
 content: "";
 position: absolute;
 left: 18px;
 right: 18px;
 bottom: 0;
 height: 2px;
 background: var(--gold);
 transform: scaleX(.35);
 transform-origin: left;
 transition: transform .25s ease;
}
.rail-item:hover::after { transform: scaleX(1); }
.rail-item em {
 display: block;
 font-style: normal;
 font-family: var(--serif), var(--sans);
 font-size: 40px;
 line-height: 1;
 color: var(--gold);
}
.rail-item h3 { margin: 18px 0 8px; font-family: var(--sans); font-size: 18px; font-weight: 650; letter-spacing: 0; }
.rail-item p { margin: 0; color: var(--muted); font-size: 14.5px; }
.bound {
 display: grid;
 grid-template-columns: .85fr 1.15fr;
 gap: 28px;
 padding: 28px;
 border-radius: 30px;
 background:
 linear-gradient(145deg, rgba(20,23,28,.2), rgba(20,23,28,.55)),
 url("/assets/images/6f3479c659cf4fdb.webp") center/cover;
 color: #f7f4ee;
 box-shadow: var(--shadow);
}
.bound h2 { color: #fff; }
.bound .lead { color: rgba(247,244,238,.78); }
.bound-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.bound-col {
 padding: 18px;
 border-radius: 18px;
 background: rgba(255,252,248,.94);
 color: var(--ink);
}
.bound-col h3 { font-family: var(--sans); font-size: 16px; font-weight: 680; letter-spacing: 0; margin-bottom: 10px; }
.bound-col ul { margin: 0; padding-left: 18px; color: var(--muted); }
.bound-col li + li { margin-top: 8px; }
.voice {
 display: grid;
 grid-template-columns: 1.05fr .95fr;
 gap: 18px;
}
.voice-photo {
 position: relative;
 min-height: 420px;
 border-radius: 28px;
 overflow: hidden;
}
.voice-photo img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.quote-stack { display: grid; gap: 12px; }
.quote {
 margin: 0;
 padding: 22px;
 border-radius: 22px;
 background: var(--white);
 border: 1px solid var(--line);
 box-shadow: var(--shadow-soft);
}
.quote p { margin: 0 0 14px; font-size: 17px; line-height: 1.6; }
.quote footer { color: var(--muted); font-size: 13px; }
.faq-list { display: grid; gap: 10px; max-width: 860px; }
.faq-list details {
 border-radius: 18px;
 background: var(--paper);
 border: 1px solid var(--line);
 overflow: hidden;
}
.faq-list summary {
 display: flex;
 justify-content: space-between;
 gap: 16px;
 align-items: center;
 padding: 16px 18px;
 cursor: pointer;
 font-weight: 630;
 list-style: none;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
 content: "+";
 font-family: var(--serif), var(--sans);
 font-size: 28px;
 color: var(--gold-deep);
 line-height: 1;
}
.faq-list details[open] summary::after { content: "–"; }
.faq-list details[open] { background: var(--white); box-shadow: var(--shadow-soft); }
.faq-list details p { margin: 0; padding: 0 18px 16px; color: var(--muted); }
.closer {
 display: grid;
 grid-template-columns: 1.3fr .7fr;
 gap: 20px;
 align-items: center;
 padding: 28px;
 border-radius: 30px;
 background: var(--gold-2);
}
.closer p { margin: 8px 0 0; max-width: 52ch; }
.closer-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }
@keyframes rise {
 from { opacity: 0; transform: translateY(12px); }
 to { opacity: 1; transform: none; }
}
.mast-copy { animation: rise .7s ease both; }
@media (max-width: 1024px) {
 .nav {
 transform: translateX(-105%);
 transition: transform .25s ease;
 width: min(300px, 86vw);
 box-shadow: var(--shadow);
 }
 .nav.is-open { transform: none; }
 .close-nav { display: grid; place-items: center; }
 .mainwrap { margin-left: 0; }
 .topbar { display: flex; }
 .nav-backdrop.is-on { display: block; }
 .mast-grid, .rights-grid, .story, .voice, .tier-board, .footer-grid, .bound, .closer, .head-row, .feature, .entry-grid {
 grid-template-columns: 1fr;
 }
 .rail { grid-template-columns: 1fr 1fr; }
 .mast-index { font-size: 120px; }
 .photo-card, .voice-photo { min-height: 320px; }
 .closer-actions { justify-content: flex-start; }
}
@media (max-width: 768px) {
 :root { --space: 56px; }
 .stat-row, .bound-cols, .rail { grid-template-columns: 1fr; }
 .member-mast { padding-top: 36px; }
 h1 { font-size: 46px; }
 .price { font-size: 46px; }
 .container { width: min(1140px, calc(100% - 32px)); }
}
@media (max-width: 520px) {
 .mast-actions .btn, .closer-actions .btn, .tier .btn { width: 100%; }
 .right-item { grid-template-columns: 42px 1fr; }
 .bound, .closer { padding: 18px; }
 .stat-row { gap: 8px; }
 .photo-card figcaption strong { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
 html { scroll-behavior: auto; }
 .mast-copy { animation: none; }
 .btn, .tier, .entry img, .photo-card img, .nav { transition: none; }
}

/* roulang page: category4 */
:root {
 --ink: #14171c;
 --ink-2: #22272f;
 --gold: #a68456;
 --gold-2: #e7d6bc;
 --gold-deep: #7c6238;
 --paper: #f3f0ea;
 --paper-2: #e7e1d6;
 --white: #fffcf8;
 --text: #171a1f;
 --muted: #5d646e;
 --line: rgba(20, 23, 28, .12);
 --line-strong: rgba(20, 23, 28, .22);
 --shadow: 0 22px 50px rgba(20, 23, 28, .08);
 --shadow-soft: 0 10px 28px rgba(20, 23, 28, .06);
 --radius: 22px;
 --navw: 232px;
 --sans: "Be Vietnam Pro", "Segoe UI", sans-serif;
 --serif: "Cormorant Garamond", Georgia, serif;
 --space: 84px;
}
:root { --space: 64px; }
/* roulang page: u-i */
:root {
 --ink: #14171c;
 --ink-2: #22272f;
 --gold: #a68456;
 --gold-2: #e7d6bc;
 --gold-deep: #7c6238;
 --paper: #f3f0ea;
 --paper-2: #e7e1d6;
 --white: #fffcf8;
 --text: #171a1f;
 --muted: #5d646e;
 --line: rgba(20, 23, 28, .12);
 --line-strong: rgba(20, 23, 28, .22);
 --shadow: 0 22px 50px rgba(20, 23, 28, .08);
 --shadow-soft: 0 10px 28px rgba(20, 23, 28, .06);
 --radius: 22px;
 --navw: 232px;
 --sans: "Be Vietnam Pro", "Segoe UI", sans-serif;
 --serif: "Cormorant Garamond", Georgia, serif;
 --space: 84px;
}
html { scroll-behavior: smooth; }
body {
 margin: 0;
 color: var(--text);
 background: var(--paper);
 font-family: var(--sans);
 font-size: 16px;
 line-height: 1.7;
 text-rendering: optimizeLegibility;
}
body.nav-lock { overflow: hidden; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
.nav {
 position: fixed;
 inset: 0 auto 0 0;
 width: var(--navw);
 background: var(--ink);
 color: #f6f1e8;
 z-index: 50;
 display: flex;
 flex-direction: column;
 padding: 28px 18px 22px;
 border-right: 1px solid rgba(231, 214, 188, .12);
}
.logo {
 display: flex;
 gap: 12px;
 align-items: center;
 margin-bottom: 28px;
}
.logo-mark {
 width: 42px;
 height: 42px;
 flex: 0 0 42px;
 border: 1px solid var(--gold-2);
 border-radius: 14px;
 display: grid;
 place-items: center;
 font-family: var(--serif);
 font-size: 26px;
 color: var(--gold-2);
}
.logo-text {
 font-size: 14px;
 font-weight: 600;
 line-height: 1.35;
 letter-spacing: .01em;
}
.nav-links { display: flex; flex-direction: column; gap: 4px; }
.nav-links a {
 display: flex;
 align-items: center;
 gap: 10px;
 min-height: 42px;
 padding: 8px 10px;
 border-radius: 12px;
 color: rgba(246, 241, 232, .78);
 font-size: 14px;
 font-weight: 500;
 transition: background .2s ease, color .2s ease, transform .2s ease;
}
.nav-links a i { width: 16px; color: var(--gold-2); font-size: 12px; }
.nav-links a:hover { background: rgba(255,255,255,.05); color: #fff; transform: translateX(2px); }
.nav-links a:active { background: rgba(166, 132, 86, .28); }
.nav-links a.is-active {
 background: rgba(166, 132, 86, .2);
 color: #f8efe2;
}
.nav-foot {
 margin-top: auto;
 padding-top: 18px;
 border-top: 1px solid rgba(255,255,255,.08);
 color: rgba(246, 241, 232, .62);
 font-size: 12px;
 line-height: 1.55;
}
.close-nav {
 display: none;
 margin-left: auto;
 width: 38px;
 height: 38px;
 border-radius: 12px;
 border: 1px solid rgba(255,255,255,.16);
 background: transparent;
 color: #fff;
}
.mainwrap { margin-left: var(--navw); min-width: 0; }
.topbar {
 display: none;
 position: sticky;
 top: 0;
 z-index: 40;
 height: 64px;
 padding: 0 16px;
 align-items: center;
 justify-content: space-between;
 background: rgba(20, 23, 28, .94);
 color: #f6f1e8;
 backdrop-filter: blur(12px);
}
.top-logo { font-weight: 650; font-size: 14px; letter-spacing: .01em; }
.icon-btn {
 width: 42px;
 height: 42px;
 border-radius: 12px;
 border: 1px solid rgba(255,255,255,.16);
 background: transparent;
 color: #fff;
}
.container { width: min(1140px, calc(100% - 48px)); margin: 0 auto; }
.hero { position: relative; color: #f7f4ee; overflow: hidden; background: #0e1116; }
.hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-mask {
 position: absolute;
 inset: 0;
 background:
 linear-gradient(180deg, rgba(8,10,14,.42) 0%, rgba(8,10,14,.18) 34%, rgba(8,10,14,.78) 100%);
}
.hero-inner {
 position: relative;
 z-index: 1;
 min-height: 100vh;
 min-height: 100svh;
 display: flex;
 flex-direction: column;
 justify-content: space-between;
 padding: 28px 0 68px;
}
.hero-copy { max-width: 760px; animation: rise .7s ease both; }
.hero-lead { max-width: 640px; color: rgba(247,244,238,.88); font-size: 16.5px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.btn {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 gap: 8px;
 min-height: 50px;
 padding: 0 20px;
 border-radius: 999px;
 border: 1px solid transparent;
 font-weight: 600;
 font-size: 14.5px;
 transition: transform .2s ease, background .2s ease, box-shadow .2s ease, color .2s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn-gold { background: var(--gold-2); color: var(--ink); }
.btn-gold:hover { background: #fff; box-shadow: 0 12px 30px rgba(0,0,0,.18); }
.btn-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.4); }
.btn-ghost:hover { background: rgba(255,255,255,.08); }
.btn-ink { background: var(--ink); color: #f6f1e8; }
.btn-ink:hover { background: #000; box-shadow: var(--shadow); }
.btn-line { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn-line:hover { border-color: var(--ink); }
.head-row {
 display: grid;
 grid-template-columns: .9fr 1.1fr;
 gap: 32px;
 align-items: end;
 margin-bottom: 34px;
}
.lead { color: var(--muted); font-size: 16px; max-width: 66ch; }
.block-ink .lead { color: rgba(246,241,232,.74); }
.entry-grid {
 display: grid;
 grid-template-columns: 1.35fr 1fr 1fr;
 gap: 14px;
}
.entry {
 position: relative;
 min-height: 280px;
 border-radius: 24px;
 overflow: hidden;
 color: #fff;
 isolation: isolate;
}
.entry img {
 position: absolute;
 inset: 0;
 width: 100%;
 height: 100%;
 object-fit: cover;
 transition: transform .6s ease;
}
.entry::after {
 content: "";
 position: absolute;
 inset: 0;
 background: linear-gradient(180deg, rgba(8,10,14,.08), rgba(8,10,14,.74));
}
.entry-body { position: relative; z-index: 1; padding: 18px; }
.entry-body small { display: block; color: var(--gold-2); font-size: 12px; letter-spacing: .12em; }
.entry-body strong { display: block; margin: 6px 0 6px; font-size: 22px; line-height: 1.2; font-weight: 600; }
.entry-body p { color: rgba(255,255,255,.86); font-size: 14px; line-height: 1.5; }
.entry:hover img { transform: scale(1.06); }
.feature {
 display: grid;
 grid-template-columns: 1.15fr .85fr;
 gap: 28px;
 align-items: stretch;
}
.feature-visual {
 position: relative;
 min-height: 520px;
 border-radius: 28px;
 overflow: hidden;
 box-shadow: var(--shadow);
}
.feature-visual img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.feature-caption {
 position: absolute;
 left: 18px;
 right: 18px;
 bottom: 18px;
 padding: 16px 16px 14px;
 border-radius: 16px;
 background: rgba(255,252,248,.92);
 color: var(--ink);
}
.feature-caption span { color: var(--gold-deep); font-size: 12px; font-weight: 650; letter-spacing: .08em; }
.feature-caption strong { display: block; margin-top: 4px; font-size: 20px; line-height: 1.25; }
h1, h2, h3 { font-family: var(--serif); font-weight: 600; letter-spacing: -.02em; }
h1 { font-size: clamp(46px, 6vw, 82px); line-height: .94; margin: 0 0 18px; }
h2 { font-size: clamp(34px, 4vw, 56px); line-height: 1; margin: 0; }
h3 { font-family: var(--sans); font-size: 18px; line-height: 1.35; margin: 0; letter-spacing: 0; font-weight: 650; }
p { margin: 0; }
.kicker {
 display: flex;
 align-items: center;
 gap: 10px;
 margin: 0 0 14px;
 color: var(--gold-deep);
 font-size: 12px;
 font-weight: 700;
 letter-spacing: .14em;
 text-transform: uppercase;
}
.kicker::before { content: ""; width: 26px; height: 1px; background: var(--gold); }
.badge {
 display: inline-flex;
 align-items: center;
 gap: 6px;
 min-height: 28px;
 padding: 0 10px;
 border-radius: 999px;
 border: 1px solid rgba(166,132,86,.45);
 background: rgba(231,214,188,.38);
 color: var(--gold-deep);
 font-size: 12px;
 font-weight: 650;
}
.band { padding: var(--space) 0; }
.band-white { background: var(--white); }
.band-sand { background: var(--paper-2); }
.offer-hero { padding: 42px 0 28px; }
.offer-grid {
 display: grid;
 grid-template-columns: 1.15fr .85fr;
 gap: 28px;
 align-items: stretch;
}
.brand-line { margin: 0 0 18px; font-size: 13px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: var(--gold-deep); }
.offer-copy .lead { margin-bottom: 18px; }
.point-list { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 12px; }
.point-list li {
 display: grid;
 grid-template-columns: 28px 1fr;
 gap: 10px;
 align-items: start;
 padding-bottom: 12px;
 border-bottom: 1px solid var(--line);
}
.point-list i { color: var(--gold-deep); margin-top: 4px; }
.hero-actions { margin-top: 26px; }
.clock-card {
 background: var(--ink);
 color: #f6f1e8;
 border-radius: 28px;
 padding: 26px 24px 22px;
 box-shadow: var(--shadow);
 position: relative;
 overflow: hidden;
}
.clock-card::after {
 content: "";
 position: absolute;
 width: 220px;
 height: 220px;
 right: -80px;
 top: -90px;
 border-radius: 50%;
 background: radial-gradient(circle, rgba(231,214,188,.22), transparent 68%);
}
.clock-card h2 { font-size: clamp(32px, 3vw, 44px); position: relative; }
.clock-note { position: relative; color: rgba(246,241,232,.72); margin: 10px 0 22px; font-size: 14.5px; }
.rings { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.ring {
 --p: 40;
 aspect-ratio: 1;
 border-radius: 50%;
 display: grid;
 place-items: center;
 background: conic-gradient(var(--gold-2) calc(var(--p) * 1%), rgba(255,255,255,.12) 0);
 position: relative;
}
.ring::before {
 content: "";
 position: absolute;
 inset: 7px;
 border-radius: 50%;
 background: #171b21;
}
.ring strong, .ring span { position: relative; z-index: 1; text-align: center; }
.ring strong { font-family: var(--serif); font-size: 26px; line-height: 1; }
.ring span { display: block; font-size: 11px; color: rgba(246,241,232,.62); }
.clock-foot { position: relative; display: flex; justify-content: space-between; gap: 12px; margin-top: 18px; font-size: 13px; color: var(--gold-2); }
.section-intro { max-width: 640px; margin-bottom: 28px; }
.section-intro .lead { margin-top: 12px; }
.ledger {
 display: grid;
 grid-template-columns: 1.25fr .75fr;
 gap: 14px;
}
.pack-main {
 position: relative;
 min-height: 460px;
 border-radius: 28px;
 overflow: hidden;
 color: #fff;
 box-shadow: var(--shadow);
}
.pack-main img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pack-main .shade {
 position: absolute;
 inset: 0;
 background: linear-gradient(180deg, rgba(10,12,16,.15) 10%, rgba(10,12,16,.82) 100%);
}
.pack-body { position: relative; z-index: 1; height: 100%; min-height: 460px; display: flex; flex-direction: column; justify-content: flex-end; padding: 24px; }
.pack-body .price { font-family: var(--serif); font-size: 64px; line-height: .9; margin: 8px 0; }
.pack-body p { color: rgba(255,255,255,.86); max-width: 46ch; }
.stack { display: grid; gap: 14px; }
.mini {
 background: var(--white);
 border: 1px solid var(--line);
 border-radius: 24px;
 padding: 20px 20px 18px;
 box-shadow: var(--shadow-soft);
 transition: transform .2s ease, box-shadow .2s ease;
}
.mini:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.mini .price { font-family: var(--serif); font-size: 40px; line-height: 1; margin: 8px 0; }
.mini p { color: var(--muted); font-size: 14.5px; }
.timeline { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.step { padding: 8px 22px 0 0; position: relative; }
.step::before {
 content: "";
 position: absolute;
 left: 0;
 right: 18px;
 top: 31px;
 height: 1px;
 background: var(--line-strong);
}
.step b {
 position: relative;
 z-index: 1;
 width: 46px;
 height: 46px;
 border-radius: 50%;
 display: grid;
 place-items: center;
 background: var(--ink);
 color: var(--gold-2);
 font-family: var(--serif);
 font-size: 22px;
 margin-bottom: 16px;
}
.step h3 { margin-bottom: 8px; }
.step p { color: var(--muted); font-size: 14.5px; }
.feature-copy { display: flex; flex-direction: column; justify-content: center; }
.check { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 14px; }
.check li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start; }
.check i { color: var(--gold-deep); margin-top: 4px; }
.tier-row {
 display: grid;
 grid-template-columns: 220px 150px 1fr;
 gap: 18px;
 align-items: center;
 padding: 22px 0;
 border-top: 1px solid var(--line);
}
.tier-row:last-child { border-bottom: 1px solid var(--line); }
.tier-row strong { display: block; font-size: 18px; }
.tier-row em { font-style: normal; font-family: var(--serif); font-size: 34px; line-height: 1; }
.tier-row span { color: var(--muted); }
.proof { position: relative; color: #f7f4ee; overflow: hidden; }
.proof-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.proof-mask { position: absolute; inset: 0; background: linear-gradient(100deg, rgba(10,12,16,.88), rgba(10,12,16,.62)); }
.proof .container { position: relative; z-index: 1; padding: 72px 0; }
.proof-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 28px; align-items: end; }
.stat-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.stat {
 padding: 18px 18px 16px;
 border-radius: 18px;
 background: rgba(255,252,248,.08);
 border: 1px solid rgba(255,255,255,.12);
 backdrop-filter: blur(8px);
}
.stat b { display: block; font-family: var(--serif); font-size: 40px; line-height: 1; color: var(--gold-2); }
.stat span { display: block; margin-top: 6px; color: rgba(247,244,238,.78); font-size: 14px; }
.faq-grid, .reserve-grid { display: grid; grid-template-columns: .82fr 1.18fr; gap: 36px; align-items: start; }
.faq-list { display: grid; gap: 10px; }
details {
 background: var(--white);
 border: 1px solid var(--line);
 border-radius: 18px;
 box-shadow: var(--shadow-soft);
 overflow: hidden;
}
summary {
 list-style: none;
 cursor: pointer;
 padding: 16px 18px;
 font-weight: 650;
 display: flex;
 justify-content: space-between;
 gap: 16px;
 align-items: center;
}
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; font-family: var(--serif); font-size: 28px; color: var(--gold-deep); line-height: 1; }
details[open] summary::after { content: "–"; }
details p { padding: 0 18px 16px; color: var(--muted); }
details[open] { border-color: rgba(166,132,86,.45); }
.reserve-card {
 background: var(--white);
 border-radius: 28px;
 padding: 22px;
 border: 1px solid var(--line);
 box-shadow: var(--shadow);
}
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field.full { grid-column: 1 / -1; }
.field span { font-size: 13px; font-weight: 650; }
input, select, textarea {
 width: 100%;
 box-sizing: border-box;
 border: 1px solid var(--line-strong);
 background: var(--paper);
 border-radius: 14px;
 min-height: 48px;
 padding: 10px 12px;
 outline: none;
 transition: border-color .2s ease, box-shadow .2s ease;
}
textarea { min-height: 110px; resize: vertical; }
input:hover, select:hover, textarea:hover { border-color: var(--gold); }
input:focus, select:focus, textarea:focus { border-color: var(--ink); box-shadow: 0 0 0 4px rgba(166,132,86,.18); }
.form-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 14px; }
.form-note {
 margin-top: 12px;
 padding: 12px 14px;
 border-radius: 14px;
 background: rgba(166,132,86,.12);
 color: var(--ink);
}
.side-photo { margin-top: 22px; border-radius: 22px; overflow: hidden; min-height: 180px; position: relative; }
.side-photo img { width: 100%; height: 220px; object-fit: cover; }
.footer { background: var(--ink); color: rgba(246,241,232,.78); padding: 48px 0 28px; }
.footer .logo { margin-bottom: 14px; }
.footer .logo-text { color: #f6f1e8; }
.footer p { max-width: 46ch; font-size: 14.5px; }
.footer-grid { display: flex; justify-content: space-between; gap: 32px; align-items: flex-start; }
.footer-links { display: flex; flex-direction: column; gap: 10px; align-items: flex-end; }
.footer-links a { transition: color .2s ease; }
.footer-links a:hover { color: var(--gold-2); }
.copy { margin-top: 28px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.08); font-size: 12px; color: rgba(246,241,232,.55); }
.nav-backdrop { position: fixed; inset: 0; background: rgba(8,10,14,.46); z-index: 45; }
.btn:focus-visible, .nav-links a:focus-visible, .icon-btn:focus-visible, .close-nav:focus-visible, summary:focus-visible, .footer-links a:focus-visible {
 outline: 2px solid var(--gold-2);
 outline-offset: 3px;
}
@keyframes rise {
 from { opacity: 0; transform: translateY(12px); }
 to { opacity: 1; transform: none; }
}
@media (max-width: 1024px) {
 .nav { transform: translateX(-105%); transition: transform .25s ease; width: min(86vw, 320px); }
 .nav.is-open { transform: none; }
 .close-nav { display: grid; place-items: center; position: absolute; top: 16px; right: 16px; }
 .logo { padding-right: 46px; }
 .mainwrap { margin-left: 0; }
 .topbar { display: flex; }
 .offer-grid, .ledger, .feature, .proof-grid, .faq-grid, .reserve-grid, .head-row { grid-template-columns: 1fr; }
 .timeline { grid-template-columns: 1fr 1fr; gap: 22px; }
 .step::before { display: none; }
 .feature-visual, .pack-body, .pack-main { min-height: 380px; }
}
@media (max-width: 768px) {
 :root { --space: 64px; }
 .container { width: min(1140px, calc(100% - 32px)); }
 .rings { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
 .ring strong { font-size: 20px; }
 .tier-row, .form-grid, .stat-row, .footer-grid { grid-template-columns: 1fr; }
 .footer-links { align-items: flex-start; }
 h1 { font-size: 46px; }
 .pack-body .price { font-size: 52px; }
}
@media (max-width: 520px) {
 .hero-actions .btn, .form-actions .btn { width: 100%; }
 .timeline, .rings { grid-template-columns: 1fr 1fr; }
 .clock-foot { flex-direction: column; }
 .offer-hero { padding-top: 28px; }
 .nav-links a { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
 html { scroll-behavior: auto; }
 *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* roulang page: category5 */
:root {
 --ink: #14171c;
 --ink-2: #22272f;
 --gold: #a68456;
 --gold-2: #e7d6bc;
 --gold-deep: #7c6238;
 --paper: #f3f0ea;
 --paper-2: #e7e1d6;
 --white: #fffcf8;
 --text: #171a1f;
 --muted: #5d646e;
 --line: rgba(20, 23, 28, .12);
 --line-strong: rgba(20, 23, 28, .22);
 --shadow: 0 22px 50px rgba(20, 23, 28, .08);
 --shadow-soft: 0 10px 28px rgba(20, 23, 28, .06);
 --radius: 22px;
 --navw: 232px;
 --sans: "Be Vietnam Pro", "Segoe UI", sans-serif;
 --serif: "Cormorant Garamond", Georgia, serif;
 --space: 84px;
}
html { scroll-behavior: smooth; }
*, *::before, *::after { box-sizing: border-box; }
body {
 margin: 0;
 color: var(--text);
 background: var(--paper);
 font-family: var(--sans);
 font-size: 16px;
 line-height: 1.7;
 text-rendering: optimizeLegibility;
}
body.nav-lock { overflow: hidden; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, p, ul, ol { margin: 0; }
ul, ol { padding: 0; }
h1 {
 font-family: var(--serif);
 font-weight: 600;
 font-size: clamp(46px, 6vw, 82px);
 line-height: .94;
 letter-spacing: -.03em;
}
h2 {
 font-family: var(--serif);
 font-weight: 600;
 font-size: clamp(34px, 4.4vw, 58px);
 line-height: .98;
 letter-spacing: -.025em;
}
h3 { font-size: 22px; line-height: 1.3; font-weight: 600; }
:focus-visible {
 outline: 2px solid var(--gold);
 outline-offset: 3px;
}
.nav {
 position: fixed;
 inset: 0 auto 0 0;
 width: var(--navw);
 background: var(--ink);
 color: #f6f1e8;
 z-index: 50;
 display: flex;
 flex-direction: column;
 padding: 28px 18px 22px;
 border-right: 1px solid rgba(231, 214, 188, .12);
}
.nav-head { display: flex; align-items: flex-start; gap: 8px; }
.logo {
 display: flex;
 gap: 12px;
 align-items: center;
 margin-bottom: 28px;
}
.nav-head .logo { flex: 1; min-width: 0; }
.logo-mark {
 width: 42px;
 height: 42px;
 flex: 0 0 42px;
 border: 1px solid var(--gold-2);
 border-radius: 14px;
 display: grid;
 place-items: center;
 font-family: var(--serif);
 font-size: 26px;
 color: var(--gold-2);
}
.logo-text {
 font-size: 14px;
 font-weight: 600;
 line-height: 1.35;
 letter-spacing: .01em;
}
.nav-links { display: flex; flex-direction: column; gap: 4px; }
.nav-links a {
 display: flex;
 align-items: center;
 gap: 10px;
 min-height: 42px;
 padding: 8px 10px;
 border-radius: 12px;
 color: rgba(246, 241, 232, .78);
 font-size: 14px;
 font-weight: 500;
 transition: background .2s ease, color .2s ease, transform .2s ease;
}
.nav-links a i { width: 16px; color: var(--gold-2); font-size: 12px; }
.nav-links a:hover { background: rgba(255,255,255,.05); color: #fff; transform: translateX(2px); }
.nav-links a:active { background: rgba(166, 132, 86, .28); }
.nav-links a.is-active {
 background: rgba(166, 132, 86, .2);
 color: #f8efe2;
}
.nav-foot {
 margin-top: auto;
 padding-top: 18px;
 border-top: 1px solid rgba(255,255,255,.08);
 color: rgba(246, 241, 232, .62);
 font-size: 12px;
 line-height: 1.55;
}
.close-nav {
 display: none;
 margin-left: auto;
 width: 38px;
 height: 38px;
 border-radius: 12px;
 border: 1px solid rgba(255,255,255,.16);
 background: transparent;
 color: #fff;
 flex: 0 0 38px;
}
.close-nav:hover { background: rgba(255,255,255,.08); }
.mainwrap { margin-left: var(--navw); min-width: 0; }
.topbar {
 display: none;
 position: sticky;
 top: 0;
 z-index: 40;
 height: 64px;
 padding: 0 16px;
 align-items: center;
 justify-content: space-between;
 background: rgba(20, 23, 28, .94);
 color: #f6f1e8;
 backdrop-filter: blur(12px);
}
.top-logo { font-weight: 650; font-size: 14px; letter-spacing: .01em; }
.icon-btn {
 width: 42px;
 height: 42px;
 border-radius: 12px;
 border: 1px solid rgba(255,255,255,.16);
 background: transparent;
 color: #fff;
 transition: background .2s ease, transform .2s ease;
}
.icon-btn:hover { background: rgba(255,255,255,.08); transform: translateY(-1px); }
.icon-btn:active { transform: translateY(0); }
.container { width: min(1140px, calc(100% - 48px)); margin: 0 auto; }
.btn {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 gap: 8px;
 min-height: 50px;
 padding: 0 20px;
 border-radius: 999px;
 border: 1px solid transparent;
 font-weight: 600;
 font-size: 14.5px;
 transition: transform .2s ease, background .2s ease, box-shadow .2s ease, color .2s ease, border-color .2s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn-gold { background: var(--gold-2); color: var(--ink); }
.btn-gold:hover { background: #fff; box-shadow: 0 12px 30px rgba(0,0,0,.18); }
.btn-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.4); }
.btn-ghost:hover { background: rgba(255,255,255,.08); }
.btn-ink { background: var(--ink); color: #f6f1e8; }
.btn-ink:hover { background: #000; box-shadow: var(--shadow); }
.btn-line { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn-line:hover { border-color: var(--ink); background: rgba(255,255,255,.45); }
.head-row {
 display: grid;
 grid-template-columns: .9fr 1.1fr;
 gap: 32px;
 align-items: end;
 margin-bottom: 34px;
}
.lead { color: var(--muted); font-size: 16px; max-width: 66ch; }
.block-ink .lead { color: rgba(246,241,232,.74); }
.kicker {
 display: inline-flex;
 align-items: center;
 gap: 10px;
 color: var(--gold-deep);
 font-size: 12px;
 font-weight: 700;
 letter-spacing: .16em;
 text-transform: uppercase;
}
.kicker::before {
 content: "";
 width: 28px;
 height: 1px;
 background: var(--gold);
}
.block-ink .kicker { color: var(--gold-2); }
.block { padding: var(--space) 0; }
.block-white { background: var(--white); }
.block-ink { background: var(--ink); color: #f6f1e8; position: relative; overflow: hidden; }
.crumb {
 display: flex;
 flex-wrap: wrap;
 gap: 8px;
 align-items: center;
 color: var(--muted);
 font-size: 13px;
 margin-bottom: 22px;
}
.crumb a { border-bottom: 1px solid transparent; }
.crumb a:hover { color: var(--ink); border-bottom-color: var(--gold); }
.crumb i { font-size: 9px; color: var(--gold-deep); }
.promo-line {
 display: flex;
 justify-content: space-between;
 gap: 18px;
 align-items: center;
 padding: 14px 18px;
 border: 1px solid var(--line);
 border-radius: 999px;
 background: rgba(255,252,248,.72);
 margin-bottom: 34px;
}
.promo-line strong { font-size: 14px; font-weight: 650; }
.promo-line span { color: var(--muted); font-size: 13.5px; }
.stamp {
 display: inline-flex;
 align-items: center;
 gap: 8px;
 min-height: 32px;
 padding: 0 12px;
 border-radius: 999px;
 background: var(--ink);
 color: var(--gold-2);
 font-size: 12px;
 font-weight: 700;
 letter-spacing: .08em;
 text-transform: uppercase;
}
.mast-grid {
 display: grid;
 grid-template-columns: 1.12fr .88fr;
 gap: 42px;
 align-items: end;
}
.mast-copy { animation: rise .7s ease both; }
.mast-copy h1 { margin: 14px 0 18px; max-width: 11ch; }
.hero-actions, .actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.factline {
 list-style: none;
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: 0;
 margin-top: 34px;
 border-top: 1px solid var(--line);
}
.factline li {
 padding: 16px 16px 0 0;
}
.factline li + li { padding-left: 16px; border-left: 1px solid var(--line); }
.factline b {
 display: block;
 font-family: var(--serif);
 font-size: 32px;
 font-weight: 600;
 line-height: 1;
 color: var(--ink);
}
.factline span { display: block; margin-top: 6px; color: var(--muted); font-size: 13.5px; }
.mast-visual {
 position: relative;
 min-height: 560px;
 border-radius: 28px;
 overflow: hidden;
 box-shadow: var(--shadow);
}
.mast-visual img, .feature-visual img, .pledge-bg img, .shot img {
 width: 100%;
 height: 100%;
 object-fit: cover;
}
.mast-visual img { position: absolute; inset: 0; transition: transform .7s ease; }
.mast-visual:hover img { transform: scale(1.05); }
.ribbon {
 position: absolute;
 top: 18px;
 right: 18px;
 z-index: 2;
 background: var(--gold-2);
 color: var(--ink);
 border-radius: 999px;
 padding: 8px 12px;
 font-size: 12px;
 font-weight: 700;
 letter-spacing: .08em;
 text-transform: uppercase;
 box-shadow: var(--shadow-soft);
}
.visual-note {
 position: absolute;
 left: 16px;
 right: 16px;
 bottom: 16px;
 z-index: 2;
 padding: 16px;
 border-radius: 16px;
 background: rgba(255,252,248,.93);
 color: var(--ink);
}
.visual-note small {
 display: block;
 color: var(--gold-deep);
 font-size: 12px;
 font-weight: 700;
 letter-spacing: .08em;
 text-transform: uppercase;
}
.visual-note strong { display: block; margin-top: 4px; font-size: 18px; line-height: 1.35; }
.layer { border-top: 1px solid var(--line); }
.layer-row {
 display: grid;
 grid-template-columns: 92px 1fr 1.15fr;
 gap: 22px;
 align-items: start;
 padding: 28px 0;
 border-bottom: 1px solid var(--line);
 transition: background .2s ease;
}
.layer-row:hover { background: rgba(255,252,248,.55); }
.idx {
 font-family: var(--serif);
 font-size: 42px;
 line-height: .8;
 color: var(--gold-deep);
}
.layer-row p { color: var(--muted); max-width: 62ch; }
.feature {
 display: grid;
 grid-template-columns: 1.05fr .95fr;
 gap: 28px;
 align-items: stretch;
}
.feature-visual {
 position: relative;
 min-height: 520px;
 border-radius: 28px;
 overflow: hidden;
 box-shadow: var(--shadow);
}
.feature-visual img { position: absolute; inset: 0; transition: transform .7s ease; }
.feature-visual:hover img { transform: scale(1.05); }
.feature-caption {
 position: absolute;
 left: 18px;
 right: 18px;
 bottom: 18px;
 padding: 16px 16px 14px;
 border-radius: 16px;
 background: rgba(255,252,248,.92);
 color: var(--ink);
}
.feature-caption span { color: var(--gold-deep); font-size: 12px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; }
.feature-caption strong { display: block; margin-top: 4px; font-size: 20px; line-height: 1.3; }
.check {
 list-style: none;
 display: flex;
 flex-direction: column;
 gap: 14px;
 margin-top: 22px;
}
.check li {
 display: grid;
 grid-template-columns: 28px 1fr;
 gap: 12px;
 align-items: start;
 padding-bottom: 14px;
 border-bottom: 1px solid var(--line);
}
.check i {
 width: 28px;
 height: 28px;
 border-radius: 50%;
 display: grid;
 place-items: center;
 background: var(--ink);
 color: var(--gold-2);
 font-size: 11px;
}
.compare {
 display: grid;
 grid-template-columns: 1fr 1fr;
 border-radius: 28px;
 overflow: hidden;
 border: 1px solid var(--line-strong);
 box-shadow: var(--shadow-soft);
}
.compare article { padding: 32px 28px 28px; min-height: 100%; }
.compare .in { background: var(--ink); color: #f6f1e8; }
.compare .out { background: var(--paper-2); }
.compare .tag {
 display: inline-flex;
 min-height: 28px;
 align-items: center;
 padding: 0 10px;
 border-radius: 999px;
 font-size: 12px;
 font-weight: 700;
 letter-spacing: .08em;
 text-transform: uppercase;
 margin-bottom: 16px;
}
.compare .in .tag { background: rgba(231,214,188,.16); color: var(--gold-2); }
.compare .out .tag { background: rgba(20,23,28,.06); color: var(--gold-deep); }
.compare h3 { font-family: var(--serif); font-size: 40px; font-weight: 600; line-height: 1; margin-bottom: 18px; }
.compare ul { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.compare li { display: flex; gap: 10px; align-items: flex-start; }
.compare li i { margin-top: 5px; color: var(--gold-2); }
.compare .out li i { color: var(--gold-deep); }
.rail { list-style: none; display: flex; flex-direction: column; }
.rail li {
 display: grid;
 grid-template-columns: 150px 28px 1fr;
 gap: 18px;
 padding: 8px 0 26px;
}
.rail time { color: var(--gold-deep); font-weight: 700; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; padding-top: 2px; }
.dotcol { position: relative; }
.dotcol::before {
 content: "";
 position: absolute;
 left: 50%;
 top: 8px;
 bottom: -34px;
 width: 1px;
 background: var(--line-strong);
}
.rail li:last-child .dotcol::before { display: none; }
.dot {
 width: 13px;
 height: 13px;
 border-radius: 50%;
 border: 2px solid var(--gold-deep);
 background: var(--white);
 position: relative;
 z-index: 1;
 margin: 4px auto 0;
}
.rail h3 { font-size: 22px; margin-bottom: 4px; }
.rail p { color: var(--muted); max-width: 68ch; }
.news { display: flex; flex-direction: column; }
.news article {
 display: grid;
 grid-template-columns: 168px 1fr auto;
 gap: 18px;
 align-items: center;
 padding: 16px 0;
 border-top: 1px solid var(--line);
 transition: background .2s ease;
}
.news article:last-child { border-bottom: 1px solid var(--line); }
.news article:hover { background: rgba(255,252,248,.7); }
.shot {
 width: 168px;
 height: 112px;
 border-radius: 16px;
 overflow: hidden;
 background: var(--paper-2);
}
.shot img { transition: transform .5s ease; }
.news article:hover img { transform: scale(1.06); }
.meta { color: var(--gold-deep); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.news h3 { font-size: 22px; margin: 4px 0; }
.news p { color: var(--muted); font-size: 14.5px; }
.more {
 justify-self: end;
 min-width: 132px;
 text-align: right;
 font-weight: 650;
 font-size: 14px;
 color: var(--ink);
}
.more i { margin-left: 6px; transition: transform .2s ease; }
.news-foot { display: flex; justify-content: flex-end; padding-top: 18px; }
.news-foot a {
 display: inline-flex;
 align-items: center;
 gap: 8px;
 font-weight: 650;
 border-bottom: 1px solid var(--gold);
 padding-bottom: 2px;
}
.news-foot a:hover { color: var(--gold-deep); }
.pledge-bg { position: absolute; inset: 0; }
.pledge-bg img { filter: saturate(.7); }
.pledge-mask {
 position: absolute;
 inset: 0;
 background: linear-gradient(100deg, rgba(14,16,20,.94) 0%, rgba(14,16,20,.86) 48%, rgba(14,16,20,.72) 100%);
}
.pledge-inner { position: relative; z-index: 1; }
.metrics {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 gap: 12px;
 margin: 28px 0 8px;
}
.metric {
 padding: 18px 16px 16px;
 border-radius: 18px;
 border: 1px solid rgba(231,214,188,.2);
 background: rgba(255,252,248,.04);
}
.metric b {
 display: block;
 font-family: var(--serif);
 font-size: 42px;
 line-height: .9;
 font-weight: 600;
 color: var(--gold-2);
}
.metric span { display: block; margin-top: 8px; color: rgba(246,241,232,.74); font-size: 14px; }
.pledge-grid {
 display: grid;
 grid-template-columns: .9fr 1.1fr;
 gap: 28px;
 align-items: start;
 margin-top: 28px;
}
.pledge-list { list-style: none; }
.pledge-list li {
 display: grid;
 grid-template-columns: 22px 1fr;
 gap: 12px;
 padding: 14px 0;
 border-top: 1px solid rgba(255,255,255,.1);
}
.pledge-list i { color: var(--gold-2); margin-top: 5px; }
.qa-grid {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 0 28px;
}
.qa-grid article {
 padding: 22px 0 8px;
 border-top: 1px solid var(--line);
}
.qa-grid h3 { font-size: 20px; margin: 8px 0 8px; }
.qa-grid p { color: var(--muted); }
.q-index { font-family: var(--serif); color: var(--gold-deep); font-size: 28px; line-height: 1; }
.closeout {
 margin-top: 36px;
 display: flex;
 justify-content: space-between;
 gap: 20px;
 align-items: center;
 padding: 22px;
 border-radius: 24px;
 background: var(--ink);
 color: #f6f1e8;
}
.closeout p { color: rgba(246,241,232,.74); max-width: 62ch; }
.footer {
 background: var(--ink);
 color: #f6f1e8;
 padding: 56px 0 28px;
 border-top: 1px solid rgba(231,214,188,.12);
}
.footer-grid {
 display: grid;
 grid-template-columns: 1.4fr .8fr;
 gap: 28px;
 align-items: start;
}
.footer .logo { margin-bottom: 14px; }
.footer p { color: rgba(246,241,232,.72); max-width: 52ch; }
.footer-links { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; padding-top: 8px; }
.footer-links a {
 color: var(--gold-2);
 border-bottom: 1px solid transparent;
 transition: border-color .2s ease, color .2s ease;
}
.footer-links a:hover { color: #fff; border-bottom-color: var(--gold-2); }
.copy {
 margin-top: 28px;
 padding-top: 16px;
 border-top: 1px solid rgba(255,255,255,.08);
 color: rgba(246,241,232,.55);
 font-size: 13px;
}
.backdrop {
 display: none;
 position: fixed;
 inset: 0;
 background: rgba(8,10,14,.46);
 z-index: 45;
}
body.nav-lock .backdrop { display: block; }
@keyframes rise {
 from { opacity: 0; transform: translateY(16px); }
 to { opacity: 1; transform: none; }
}
@media (max-width: 1024px) {
 :root { --space: 68px; }
 .nav {
 transform: translateX(-105%);
 transition: transform .28s ease;
 width: min(300px, 88vw);
 box-shadow: var(--shadow);
 }
 .nav.is-open { transform: translateX(0); }
 .close-nav { display: grid; place-items: center; }
 .mainwrap { margin-left: 0; }
 .topbar { display: flex; }
 .mast-grid, .feature, .head-row, .pledge-grid, .footer-grid { grid-template-columns: 1fr; }
 .mast-visual, .feature-visual { min-height: 420px; }
 .mast-copy h1 { max-width: none; }
}
@media (max-width: 768px) {
 :root { --space: 56px; }
 .container { width: min(1140px, calc(100% - 32px)); }
 .promo-line, .closeout, .compare, .qa-grid, .metrics, .factline { grid-template-columns: 1fr; }
 .promo-line, .closeout { display: grid; border-radius: 22px; }
 .factline li + li { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); padding-top: 14px; margin-top: 14px; }
 .layer-row, .rail li, .news article { grid-template-columns: 1fr; gap: 8px; }
 .dotcol { display: none; }
 .shot { width: 100%; height: 180px; }
 .more, .news-foot { justify-self: start; text-align: left; }
 .compare h3 { font-size: 34px; }
}
@media (max-width: 520px) {
 h1 { font-size: 42px; }
 h2 { font-size: 34px; }
 .btn { width: 100%; }
 .actions, .hero-actions { display: grid; }
 .mast-visual, .feature-visual { min-height: 340px; border-radius: 20px; }
 .visual-note, .feature-caption { left: 10px; right: 10px; bottom: 10px; }
 .ribbon { top: 10px; right: 10px; }
 .metric b { font-size: 36px; }
 .logo-text, .top-logo { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
 html { scroll-behavior: auto; }
 *, *::before, *::after {
 animation: none !important;
 transition: none !important;
 }
}

/* roulang page: category6 */
:root {
 --ink: #14171c;
 --ink-2: #22272f;
 --gold: #a68456;
 --gold-2: #e7d6bc;
 --gold-deep: #7c6238;
 --paper: #f3f0ea;
 --paper-2: #e7e1d6;
 --white: #fffcf8;
 --text: #171a1f;
 --muted: #5d646e;
 --line: rgba(20, 23, 28, .12);
 --line-strong: rgba(20, 23, 28, .22);
 --shadow: 0 22px 50px rgba(20, 23, 28, .08);
 --shadow-soft: 0 10px 28px rgba(20, 23, 28, .06);
 --radius: 22px;
 --navw: 232px;
 --sans: "Be Vietnam Pro", "Segoe UI", sans-serif;
 --serif: "Cormorant Garamond", Georgia, serif;
 --space: 84px;
}
:root { --space: 64px; }
/* roulang page: category6 */
:root {
 --ink: #14171c;
 --ink-2: #22272f;
 --gold: #a68456;
 --gold-2: #e7d6bc;
 --gold-deep: #7c6238;
 --paper: #f3f0ea;
 --paper-2: #e7e1d6;
 --white: #fffcf8;
 --text: #171a1f;
 --muted: #5d646e;
 --line: rgba(20, 23, 28, .12);
 --line-strong: rgba(20, 23, 28, .22);
 --shadow: 0 22px 50px rgba(20, 23, 28, .08);
 --shadow-soft: 0 10px 28px rgba(20, 23, 28, .06);
 --radius: 22px;
 --navw: 232px;
 --sans: "Be Vietnam Pro", "Segoe UI", sans-serif;
 --serif: "Cormorant Garamond", Georgia, serif;
 --space: 84px;
}
html { scroll-behavior: smooth; }
body {
 margin: 0;
 color: var(--text);
 background: var(--paper);
 font-family: var(--sans);
 font-size: 16px;
 line-height: 1.7;
 text-rendering: optimizeLegibility;
}
body.nav-lock { overflow: hidden; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
.nav {
 position: fixed;
 inset: 0 auto 0 0;
 width: var(--navw);
 background: var(--ink);
 color: #f6f1e8;
 z-index: 50;
 display: flex;
 flex-direction: column;
 padding: 28px 18px 22px;
 border-right: 1px solid rgba(231, 214, 188, .12);
}
.logo {
 display: flex;
 gap: 12px;
 align-items: center;
 margin-bottom: 28px;
}
.logo-mark {
 width: 42px;
 height: 42px;
 flex: 0 0 42px;
 border: 1px solid var(--gold-2);
 border-radius: 14px;
 display: grid;
 place-items: center;
 font-family: var(--serif);
 font-size: 26px;
 color: var(--gold-2);
}
.logo-text {
 font-size: 14px;
 font-weight: 600;
 line-height: 1.35;
 letter-spacing: .01em;
}
.nav-links { display: flex; flex-direction: column; gap: 4px; }
.nav-links a {
 display: flex;
 align-items: center;
 gap: 10px;
 min-height: 42px;
 padding: 8px 10px;
 border-radius: 12px;
 color: rgba(246, 241, 232, .78);
 font-size: 14px;
 font-weight: 500;
 transition: background .2s ease, color .2s ease, transform .2s ease;
}
.nav-links a i { width: 16px; color: var(--gold-2); font-size: 12px; }
.nav-links a:hover { background: rgba(255,255,255,.05); color: #fff; transform: translateX(2px); }
.nav-links a.is-active {
 background: rgba(166, 132, 86, .2);
 color: #f8efe2;
}
.nav-links a:focus-visible,
.btn:focus-visible,
.icon-btn:focus-visible,
.close-nav:focus-visible,
.footer-links a:focus-visible,
.logo:focus-visible {
 outline: 2px solid var(--gold-2);
 outline-offset: 3px;
}
.nav-foot {
 margin-top: auto;
 padding-top: 18px;
 border-top: 1px solid rgba(255,255,255,.08);
 color: rgba(246, 241, 232, .62);
 font-size: 12px;
 line-height: 1.55;
}
.close-nav {
 display: none;
 position: absolute;
 top: 16px;
 right: 14px;
 width: 38px;
 height: 38px;
 border-radius: 12px;
 border: 1px solid rgba(255,255,255,.16);
 background: transparent;
 color: #fff;
}
.mainwrap { margin-left: var(--navw); min-width: 0; }
.topbar {
 display: none;
 position: sticky;
 top: 0;
 z-index: 40;
 height: 64px;
 padding: 0 16px;
 align-items: center;
 justify-content: space-between;
 background: rgba(20, 23, 28, .94);
 color: #f6f1e8;
 backdrop-filter: blur(12px);
}
.top-logo { font-weight: 650; font-size: 14px; letter-spacing: .01em; }
.icon-btn {
 width: 42px;
 height: 42px;
 border-radius: 12px;
 border: 1px solid rgba(255,255,255,.16);
 background: transparent;
 color: #fff;
}
.container { width: min(1140px, calc(100% - 48px)); margin: 0 auto; }
.hero { position: relative; color: #f7f4ee; overflow: hidden; background: #0e1116; }
.hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-mask {
 position: absolute;
 inset: 0;
 background:
 linear-gradient(180deg, rgba(8,10,14,.42) 0%, rgba(8,10,14,.18) 34%, rgba(8,10,14,.78) 100%);
}
.hero-inner {
 position: relative;
 z-index: 1;
 min-height: 100vh;
 min-height: 100svh;
 display: flex;
 flex-direction: column;
 justify-content: space-between;
 padding: 28px 0 68px;
}
.hero-copy { max-width: 760px; animation: rise .7s ease both; }
.hero-lead { max-width: 640px; color: rgba(247,244,238,.88); font-size: 16.5px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.btn {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 gap: 8px;
 min-height: 50px;
 padding: 0 20px;
 border-radius: 999px;
 border: 1px solid transparent;
 font-weight: 600;
 font-size: 14.5px;
 transition: transform .2s ease, background .2s ease, box-shadow .2s ease, color .2s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn-gold { background: var(--gold-2); color: var(--ink); }
.btn-gold:hover { background: #fff; box-shadow: 0 12px 30px rgba(0,0,0,.18); }
.btn-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.4); }
.btn-ghost:hover { background: rgba(255,255,255,.08); }
.btn-ink { background: var(--ink); color: #f6f1e8; }
.btn-ink:hover { background: #000; box-shadow: var(--shadow); }
.btn-line { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn-line:hover { border-color: var(--ink); }
.head-row {
 display: grid;
 grid-template-columns: .9fr 1.1fr;
 gap: 32px;
 align-items: end;
 margin-bottom: 34px;
}
.lead { color: var(--muted); font-size: 16px; max-width: 66ch; }
.block-ink .lead { color: rgba(246,241,232,.74); }
.entry-grid {
 display: grid;
 grid-template-columns: 1.35fr 1fr 1fr;
 gap: 14px;
}
.entry img {
 position: absolute;
 inset: 0;
 width: 100%;
 height: 100%;
 object-fit: cover;
 transition: transform .6s ease;
}
.entry-body { position: relative; z-index: 1; padding: 18px; }
.entry-body small { display: block; color: var(--gold-2); font-size: 12px; letter-spacing: .12em; }
.entry-body strong { display: block; margin: 6px 0 6px; font-size: 22px; line-height: 1.2; font-weight: 600; }
.entry-body p { color: rgba(255,255,255,.86); font-size: 14px; line-height: 1.5; }
.entry:hover img { transform: scale(1.06); }
.feature {
 display: grid;
 grid-template-columns: 1.15fr .85fr;
 gap: 28px;
 align-items: stretch;
}
.feature-visual {
 position: relative;
 min-height: 520px;
 border-radius: 28px;
 overflow: hidden;
 box-shadow: var(--shadow);
}
.feature-visual img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.feature-caption {
 position: absolute;
 left: 18px;
 right: 18px;
 bottom: 18px;
 padding: 16px 16px 14px;
 border-radius: 16px;
 background: rgba(255,252,248,.92);
 color: var(--ink);
}
.feature-caption span { color: var(--gold-deep); font-size: 12px; font-weight: 650; letter-spacing: .08em; }
h1, h2, h3, .serif {
 font-family: var(--serif);
 font-weight: 600;
 letter-spacing: -.02em;
 line-height: 1.12;
 margin: 0;
}
h1 { font-size: clamp(46px, 6vw, 78px); }
h2 { font-size: clamp(34px, 4vw, 54px); }
h3 { font-size: 28px; }
p { margin: 0 0 14px; }
.kicker {
 display: inline-flex;
 align-items: center;
 gap: 8px;
 margin: 0 0 12px;
 color: var(--gold-deep);
 font-size: 12px;
 font-weight: 650;
 letter-spacing: .16em;
 text-transform: uppercase;
}
.kicker.light { color: var(--gold-2); }
.badge {
 display: inline-flex;
 align-items: center;
 gap: 8px;
 min-height: 32px;
 padding: 0 12px;
 border-radius: 999px;
 border: 1px solid rgba(231, 214, 188, .45);
 background: rgba(20, 23, 28, .35);
 color: #f6f1e8;
 font-size: 12px;
 font-weight: 600;
 letter-spacing: .04em;
}
.badge-ink {
 background: rgba(166, 132, 86, .12);
 border-color: rgba(124, 98, 56, .28);
 color: var(--gold-deep);
}
.section { padding: var(--space) 0; }
.section-white { background: var(--white); }
.section-sand { background: linear-gradient(180deg, rgba(231,225,214,.55), rgba(243,240,234,0)); }
.mast {
 position: relative;
 min-height: 640px;
 color: #f7f4ee;
 overflow: hidden;
 background: #0e1116;
 display: flex;
 align-items: flex-end;
}
.mast-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mast-mask {
 position: absolute;
 inset: 0;
 background:
 linear-gradient(100deg, rgba(8,10,14,.78) 0%, rgba(8,10,14,.46) 48%, rgba(8,10,14,.22) 100%);
}
.mast-inner {
 position: relative;
 z-index: 1;
 padding: 88px 0 54px;
 display: grid;
 grid-template-columns: 1.35fr .65fr;
 gap: 28px;
 align-items: end;
}
.mast-copy { max-width: 760px; animation: rise .7s ease both; }
.mast-copy .hero-lead { margin-top: 16px; }
.mast-side {
 padding: 18px 18px 8px;
 border-radius: 20px;
 background: rgba(20, 23, 28, .46);
 border: 1px solid rgba(231, 214, 188, .28);
 backdrop-filter: blur(8px);
}
.fact {
 display: flex;
 justify-content: space-between;
 gap: 16px;
 padding: 12px 0;
 border-top: 1px solid rgba(255,255,255,.12);
 font-size: 14px;
}
.fact b { font-weight: 600; color: var(--gold-2); }
.story-copy h2 { margin-bottom: 14px; }
.pull {
 margin: 18px 0;
 padding-left: 16px;
 border-left: 2px solid var(--gold);
 font-family: var(--serif);
 font-size: 28px;
 line-height: 1.25;
 color: var(--ink-2);
}
.ledger { border-top: 1px solid var(--line-strong); }
.ledger-item {
 display: grid;
 grid-template-columns: 150px 1fr;
 gap: 24px;
 padding: 22px 0;
 border-bottom: 1px solid var(--line);
 transition: background .2s ease;
}
.ledger-item:hover { background: rgba(255,252,248,.55); }
.ledger-item time {
 color: var(--gold-deep);
 font-weight: 650;
 font-size: 14px;
 letter-spacing: .04em;
}
.ledger-item h3 { font-size: 30px; margin-bottom: 6px; }
.ledger-item p { margin: 0; color: var(--muted); max-width: 68ch; }
.band {
 position: relative;
 min-height: 460px;
 color: #f7f4ee;
 display: flex;
 align-items: flex-end;
 overflow: hidden;
}
.band img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.band-mask {
 position: absolute;
 inset: 0;
 background: linear-gradient(90deg, rgba(8,10,14,.82), rgba(8,10,14,.28));
}
.band-inner { position: relative; z-index: 1; padding: 54px 0; max-width: 720px; }
.band-inner p { color: rgba(247,244,238,.86); font-size: 17px; }
.notes {
 display: grid;
 grid-template-columns: 1.15fr .85fr;
 gap: 36px;
 align-items: start;
}
.note-rail {
 background: var(--white);
 border: 1px solid var(--line);
 border-radius: 28px;
 box-shadow: var(--shadow-soft);
 overflow: hidden;
}
.note-rail article {
 padding: 20px 22px 18px;
 border-top: 1px solid var(--line);
}
.note-rail article:first-child { border-top: 0; }
.note-rail h3 { font-size: 26px; margin: 6px 0 8px; }
.note-rail p { margin: 0; color: var(--muted); font-size: 14.5px; }
.member-panel {
 display: grid;
 grid-template-columns: .9fr 1.1fr;
 background: var(--white);
 border-radius: 28px;
 overflow: hidden;
 border: 1px solid var(--line);
 box-shadow: var(--shadow);
}
.member-photo { position: relative; min-height: 420px; }
.member-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.member-body { padding: 36px 34px; }
.stat-row {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: 12px;
 margin-top: 22px;
}
.stat {
 padding: 14px 12px 12px;
 border-radius: 16px;
 background: var(--paper);
 border: 1px solid var(--line);
}
.stat b {
 display: block;
 font-family: var(--serif);
 font-size: 34px;
 font-weight: 600;
 line-height: 1;
 color: var(--ink);
}
.stat span { display: block; margin-top: 6px; color: var(--muted); font-size: 13px; }
.secure-sec { background: var(--ink); color: #f6f1e8; }
.secure-grid {
 display: grid;
 grid-template-columns: .8fr 1.2fr;
 gap: 36px;
 align-items: start;
}
.checks { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.check {
 display: flex;
 gap: 12px;
 align-items: flex-start;
 padding: 16px;
 border-radius: 16px;
 background: rgba(255,255,255,.04);
 border: 1px solid rgba(231,214,188,.16);
 transition: transform .2s ease, background .2s ease;
}
.check:hover { transform: translateY(-2px); background: rgba(255,255,255,.07); }
.check i { color: var(--gold-2); margin-top: 4px; }
.check strong { display: block; font-size: 15px; }
.check p { margin: 4px 0 0; color: rgba(246,241,232,.7); font-size: 13.5px; }
.archive-list { display: flex; flex-direction: column; gap: 14px; }
.archive-item {
 display: grid;
 grid-template-columns: 188px 1fr auto;
 gap: 18px;
 align-items: center;
 padding: 12px;
 background: var(--white);
 border: 1px solid var(--line);
 border-radius: var(--radius);
 box-shadow: var(--shadow-soft);
 transition: transform .2s ease, box-shadow .2s ease;
}
.archive-item:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.archive-item img {
 width: 188px;
 height: 124px;
 object-fit: cover;
 border-radius: 16px;
}
.archive-item h3 { font-size: 28px; margin-bottom: 6px; }
.archive-item p { margin: 0; color: var(--muted); font-size: 14.5px; }
.archive-meta { color: var(--gold-deep); font-size: 13px; font-weight: 650; white-space: nowrap; }
.footer {
 background: var(--ink);
 color: #f6f1e8;
 padding: 48px 0 28px;
}
.footer-grid {
 display: flex;
 justify-content: space-between;
 gap: 28px;
 align-items: end;
}
.footer .logo { margin-bottom: 14px; }
.footer p { color: rgba(246,241,232,.72); max-width: 46ch; }
.footer-links { display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }
.footer-links a { color: var(--gold-2); font-size: 14px; transition: color .2s ease; }
.footer-links a:hover { color: #fff; }
.copy {
 margin-top: 28px;
 padding-top: 16px;
 border-top: 1px solid rgba(255,255,255,.08);
 color: rgba(246,241,232,.55);
 font-size: 13px;
}
@keyframes rise {
 from { opacity: 0; transform: translateY(12px); }
 to { opacity: 1; transform: none; }
}
@media (max-width: 1024px) {
 .nav { transform: translateX(-105%); transition: transform .25s ease; }
 .nav.is-open { transform: none; box-shadow: 20px 0 50px rgba(0,0,0,.28); }
 .close-nav { display: grid; place-items: center; }
 .mainwrap { margin-left: 0; }
 .topbar { display: flex; }
 .mast-inner, .feature, .notes, .member-panel, .secure-grid, .head-row {
 grid-template-columns: 1fr;
 }
 .feature-visual, .member-photo { min-height: 380px; }
 .checks { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
 :root { --space: 56px; }
 .mast { min-height: 560px; }
 .stat-row, .checks, .archive-item, .ledger-item { grid-template-columns: 1fr; }
 .archive-item img { width: 100%; height: 190px; }
 .archive-meta { white-space: normal; }
 .footer-grid { flex-direction: column; align-items: flex-start; }
 .footer-links { align-items: flex-start; }
 h1 { font-size: 44px; }
}
@media (max-width: 520px) {
 .container { width: min(1140px, calc(100% - 28px)); }
 .mast { min-height: 0; }
 .mast-inner { padding: 42px 0 32px; }
 .hero-actions .btn { width: 100%; }
 .feature-visual, .member-photo { min-height: 260px; }
 .member-body { padding: 24px 18px 22px; }
 .pull { font-size: 24px; }
 .band { min-height: 380px; }
}
@media (prefers-reduced-motion: reduce) {
 html { scroll-behavior: auto; }
 .mast-copy, .btn, .archive-item, .check, .nav-links a { animation: none; transition: none; }
}

/* roulang page: category7 */
:root {
  --ink: #14171c;
  --ink-2: #22272f;
  --gold: #a68456;
  --gold-2: #e7d6bc;
  --gold-deep: #7c6238;
  --paper: #f3f0ea;
  --paper-2: #e7e1d6;
  --white: #fffcf8;
  --text: #171a1f;
  --muted: #5d646e;
  --line: rgba(20, 23, 28, .12);
  --line-strong: rgba(20, 23, 28, .22);
  --shadow: 0 22px 50px rgba(20, 23, 28, .08);
  --shadow-soft: 0 10px 28px rgba(20, 23, 28, .06);
  --radius: 22px;
  --navw: 232px;
  --sans: "Be Vietnam Pro", "Segoe UI", sans-serif;
  --serif: "Cormorant Garamond", Georgia, serif;
  --space: 84px;
}
/* roulang page: ho-tro */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--text);
  background: var(--paper);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.7;
  text-rendering: optimizeLegibility;
}
body.nav-lock { overflow: hidden; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, .serif { font-family: var(--serif); font-weight: 600; letter-spacing: -.02em; }
h1 { margin-bottom: 14px; font-size: clamp(46px, 6vw, 78px); line-height: .94; }
h2 { margin-bottom: 12px; font-size: clamp(34px, 4vw, 54px); line-height: 1.02; color: var(--ink); }
h3 { margin: 0 0 6px; font-size: 20px; line-height: 1.3; font-weight: 600; }
p { margin-bottom: 0; }
::selection { background: var(--gold-2); color: var(--ink); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.nav {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--navw);
  background: var(--ink);
  color: #f6f1e8;
  z-index: 50;
  display: flex;
  flex-direction: column;
  padding: 28px 18px 22px;
  border-right: 1px solid rgba(231, 214, 188, .12);
  overflow-y: auto;
}
.nav-top { display: flex; align-items: flex-start; gap: 8px; }
.logo {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 28px;
}
.logo-mark {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  border: 1px solid var(--gold-2);
  border-radius: 14px;
  display: grid;
  place-items: center;
  font-family: var(--serif);
  font-size: 26px;
  color: var(--gold-2);
}
.logo-text {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: .01em;
}
.nav-links { display: flex; flex-direction: column; gap: 4px; }
.nav-links a {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 8px 10px;
  border-radius: 12px;
  color: rgba(246, 241, 232, .78);
  font-size: 14px;
  font-weight: 500;
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
.nav-links a i { width: 16px; color: var(--gold-2); font-size: 12px; }
.nav-links a:hover { background: rgba(255,255,255,.05); color: #fff; transform: translateX(2px); }
.nav-links a.is-active { background: rgba(166, 132, 86, .2); color: #f8efe2; }
.nav-foot {
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,.08);
  color: rgba(246, 241, 232, .62);
  font-size: 12px;
  line-height: 1.55;
}
.close-nav {
  display: none;
  margin-left: auto;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.16);
  background: transparent;
  color: #fff;
}
.mainwrap { margin-left: var(--navw); min-width: 0; }
.topbar {
  display: none;
  position: sticky;
  top: 0;
  z-index: 40;
  height: 64px;
  padding: 0 16px;
  align-items: center;
  justify-content: space-between;
  background: rgba(20, 23, 28, .94);
  color: #f6f1e8;
  backdrop-filter: blur(12px);
}
.top-logo { font-weight: 650; font-size: 14px; letter-spacing: .01em; }
.icon-btn {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.16);
  background: transparent;
  color: #fff;
  display: grid;
  place-items: center;
  transition: background .2s ease, transform .2s ease;
}
.icon-btn:hover { background: rgba(255,255,255,.06); transform: translateY(-1px); }
.container { width: min(1140px, calc(100% - 48px)); margin: 0 auto; }
.hero { position: relative; color: #f7f4ee; overflow: hidden; background: #0e1116; }
.hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-mask {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(8,10,14,.42) 0%, rgba(8,10,14,.18) 34%, rgba(8,10,14,.78) 100%);
}
.hero-inner {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 28px 0 68px;
}
.hero-copy { max-width: 760px; animation: rise .7s ease both; }
.hero-lead { max-width: 640px; color: rgba(247,244,238,.88); font-size: 16.5px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 50px;
  padding: 0 20px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-weight: 600;
  font-size: 14.5px;
  transition: transform .2s ease, background .2s ease, box-shadow .2s ease, color .2s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn-gold { background: var(--gold-2); color: var(--ink); }
.btn-gold:hover { background: #fff; box-shadow: 0 12px 30px rgba(0,0,0,.18); }
.btn-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.4); }
.btn-ghost:hover { background: rgba(255,255,255,.08); }
.btn-ink { background: var(--ink); color: #f6f1e8; }
.btn-ink:hover { background: #000; box-shadow: var(--shadow); }
.btn-line { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn-line:hover { border-color: var(--ink); }
.head-row {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 32px;
  align-items: end;
  margin-bottom: 34px;
}
.lead { color: var(--muted); font-size: 16px; max-width: 66ch; }
.block-ink .lead { color: rgba(246,241,232,.74); }
.entry-grid { display: grid; grid-template-columns: 1.35fr 1fr 1fr; gap: 14px; }
.entry img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s ease;
}
.entry-body { position: relative; z-index: 1; padding: 18px; }
.entry-body small { display: block; color: var(--gold-2); font-size: 12px; letter-spacing: .12em; }
.entry-body strong { display: block; margin: 6px 0 6px; font-size: 22px; line-height: 1.2; font-weight: 600; }
.entry-body p { color: rgba(255,255,255,.86); font-size: 14px; line-height: 1.5; }
.entry:hover img { transform: scale(1.06); }
.feature { display: grid; grid-template-columns: 1.15fr .85fr; gap: 28px; align-items: stretch; }
.feature-visual {
  position: relative;
  min-height: 520px;
  border-radius: 28px;
  overflow: hidden;
  box-shadow: var(--shadow);
}
.feature-visual img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.feature-caption {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 18px;
  padding: 16px 16px 14px;
  border-radius: 16px;
  background: rgba(255,252,248,.92);
  color: var(--ink);
}
.feature-caption span { color: var(--gold-deep); font-size: 12px; font-weight: 650; letter-spacing: .08em; }
.footer {
  background: var(--ink);
  color: rgba(246,241,232,.78);
  padding: 48px 0 28px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr .8fr;
  gap: 28px;
  align-items: start;
}
.footer .logo { margin-bottom: 14px; }
.footer .logo-text { color: #f6f1e8; }
.footer p { max-width: 46ch; color: rgba(246,241,232,.68); }
.footer-links { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; padding-top: 8px; }
.footer-links a {
  color: var(--gold-2);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease, color .2s ease;
}
.footer-links a:hover { color: #fff; border-bottom-color: var(--gold-2); }
.copy {
  margin-top: 28px;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,.08);
  color: rgba(246,241,232,.5);
  font-size: 13px;
}
.kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  color: var(--gold-2);
  font-size: 12px;
  font-weight: 650;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.kicker.ink { color: var(--gold-deep); }
.badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(231,214,188,.5);
  color: var(--gold-2);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
}
.badge i { font-size: 11px; }
.desk-hero { position: relative; color: #f7f4ee; background: #0e1116; overflow: hidden; }
.desk-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.desk-hero-mask {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg, rgba(8,10,14,.88) 0%, rgba(8,10,14,.62) 46%, rgba(8,10,14,.28) 100%);
}
.desk-hero .container { position: relative; z-index: 1; }
.desk-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr);
  gap: 36px;
  align-items: end;
  min-height: 680px;
  padding: 58px 0 52px;
}
.desk-copy { max-width: 680px; animation: rise .7s ease both; }
.desk-copy .hero-lead { font-size: 17px; }
.ticket {
  background: rgba(255,252,248,.94);
  color: var(--ink);
  border-radius: 26px;
  padding: 22px;
  box-shadow: var(--shadow);
  animation: rise .8s ease .08s both;
}
.ticket-top { display: flex; justify-content: space-between; gap: 12px; align-items: center; margin-bottom: 16px; }
.ticket-top strong { font-family: var(--serif); font-size: 32px; line-height: 1; font-weight: 600; }
.live {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--gold-deep);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.live i { font-size: 8px; }
.rank-line {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  padding: 13px 0;
  border-top: 1px solid var(--line);
  font-size: 14.5px;
}
.rank-line b { font-weight: 600; }
.rank-line span { color: var(--muted); }
.board { padding: var(--space) 0; background: var(--paper); }
.board-grid { display: grid; grid-template-columns: minmax(220px, 320px) minmax(0, 1fr); gap: 42px; align-items: start; }
.ledger { list-style: none; margin: 0; padding: 0; }
.ledger li {
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr) auto;
  gap: 16px;
  align-items: start;
  padding: 22px 10px;
  border-top: 1px solid var(--line);
  transition: background .2s ease, transform .2s ease;
}
.ledger li:last-child { border-bottom: 1px solid var(--line); }
.ledger li:hover { background: rgba(255,252,248,.76); transform: translateX(3px); }
.ledger em { font-style: normal; color: var(--gold-deep); font-size: 13px; font-weight: 650; white-space: nowrap; padding-top: 4px; }
.num { font-family: var(--serif); font-size: 34px; line-height: 1; color: var(--gold); }
.dossier { padding: 0 0 var(--space); }
.dossier-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 28px; align-items: stretch; }
.dossier-visual { position: relative; min-height: 540px; border-radius: 28px; overflow: hidden; box-shadow: var(--shadow); }
.dossier-visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dossier-visual figcaption {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 16px;
  padding: 16px;
  border-radius: 16px;
  background: rgba(255,252,248,.92);
  color: var(--ink);
}
.dossier-visual figcaption span { display: block; color: var(--gold-deep); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.dossier-copy {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 28px;
  padding: 32px 30px;
  box-shadow: var(--shadow-soft);
}
.marks { list-style: none; margin: 22px 0 0; padding: 0; }
.marks li {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 12px;
  padding: 15px 0;
  border-top: 1px solid var(--line);
  align-items: start;
}
.marks i { color: var(--gold-deep); margin-top: 4px; }
.sla { background: var(--ink); color: #f6f1e8; padding: 54px 0; }
.sla h2 { color: #f6f1e8; font-size: clamp(28px, 3vw, 40px); }
.sla-top { display: flex; justify-content: space-between; gap: 24px; align-items: end; margin-bottom: 28px; }
.sla-top p { max-width: 42ch; color: rgba(246,241,232,.7); }
.stat-row { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid rgba(231,214,188,.22); }
.stat { padding: 22px 22px 6px 0; border-right: 1px solid rgba(231,214,188,.16); }
.stat:last-child { border-right: 0; }
.stat b { display: block; font-family: var(--serif); font-size: clamp(36px, 4vw, 54px); font-weight: 600; line-height: .95; color: var(--gold-2); }
.stat span { display: block; margin-top: 8px; color: rgba(246,241,232,.72); font-size: 14.5px; }
.tiers { padding: var(--space) 0; background: linear-gradient(180deg, var(--paper) 0%, var(--paper-2) 100%); }
.split-head { display: grid; grid-template-columns: .9fr 1.1fr; gap: 28px; align-items: end; margin-bottom: 28px; }
.tier-layout { display: grid; grid-template-columns: 1.12fr .88fr; gap: 14px; align-items: stretch; }
.tier-stack { display: grid; gap: 14px; }
.tier {
  position: relative;
  border-radius: 26px;
  border: 1px solid var(--line);
  background: var(--white);
  padding: 26px;
  box-shadow: var(--shadow-soft);
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease;
}
.tier:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.tier-dark { color: #f6f1e8; background: #101318; border-color: transparent; min-height: 100%; }
.tier-dark img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .38; }
.tier-dark .tier-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10,12,16,.2), rgba(10,12,16,.82));
}
.tier-body { position: relative; z-index: 1; }
.tier-kicker { color: var(--gold-2); font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.tier h3 { font-family: var(--serif); font-size: 42px; font-weight: 600; margin: 8px 0 10px; }
.tier-dark ul, .mini-list { list-style: none; margin: 18px 0 0; padding: 0; }
.tier-dark li, .mini-list li {
  padding: 10px 0;
  border-top: 1px solid rgba(255,255,255,.12);
  color: rgba(246,241,232,.86);
}
.mini-list li { border-top-color: var(--line); color: var(--text); }
.soft-tag {
  display: inline-flex;
  margin-top: 18px;
  min-height: 34px;
  align-items: center;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(166,132,86,.16);
  color: var(--gold-deep);
  font-size: 13px;
  font-weight: 650;
}
.tier-dark .soft-tag { background: rgba(231,214,188,.16); color: var(--gold-2); }
.shifts { padding: 20px 0 var(--space); }
.timeline { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line-strong); }
.timeline article { padding: 26px 22px 8px 0; border-right: 1px solid var(--line); min-width: 0; }
.timeline article:last-child { border-right: 0; padding-right: 0; }
.timeline time { display: block; color: var(--gold-deep); font-weight: 700; font-size: 13px; letter-spacing: .04em; }
.timeline h3 { margin-top: 10px; font-family: var(--serif); font-size: 32px; font-weight: 600; }
.timeline p { color: var(--muted); }
.faq-sec { padding: 10px 0 var(--space); }
.faq-grid { display: grid; grid-template-columns: 1.25fr .75fr; gap: 28px; align-items: start; }
.qa {
  border-top: 1px solid var(--line-strong);
  background: transparent;
}
.qa:last-of-type { border-bottom: 1px solid var(--line-strong); }
.qa summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: center;
  padding: 18px 0;
  font-weight: 600;
  font-size: 18px;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary:hover { color: var(--gold-deep); }
.qa summary i { color: var(--gold); transition: transform .2s ease; }
.qa[open] summary i { transform: rotate(45deg); }
.qa p { color: var(--muted); padding: 0 0 18px; max-width: 68ch; }
.side-note {
  background: var(--ink);
  color: #f6f1e8;
  border-radius: 26px;
  padding: 26px;
  box-shadow: var(--shadow);
}
.side-note a { color: var(--gold-2); border-bottom: 1px solid rgba(231,214,188,.4); }
.side-note a:hover { color: #fff; }
.side-note p + p { margin-top: 12px; color: rgba(246,241,232,.74); }
.ask { background: var(--ink-2); color: #f6f1e8; padding: var(--space) 0; }
.ask h2 { color: #f6f1e8; }
.ask-grid { display: grid; grid-template-columns: .82fr 1.18fr; gap: 28px; align-items: stretch; }
.ask-visual { position: relative; min-height: 460px; border-radius: 28px; overflow: hidden; }
.ask-visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ask-visual div {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 16px;
  padding: 16px;
  border-radius: 16px;
  background: rgba(14,17,22,.78);
  backdrop-filter: blur(8px);
}
.ask-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 16px;
}
.field { display: flex; flex-direction: column; gap: 8px; }
.field.wide { grid-column: 1 / -1; }
.field span { font-size: 13px; font-weight: 600; color: rgba(246,241,232,.86); }
.field input, .field select, .field textarea {
  width: 100%;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.04);
  color: #fff;
  padding: 12px 14px;
  min-height: 50px;
  transition: border-color .2s ease, background .2s ease;
}
.field textarea { min-height: 130px; resize: vertical; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: rgba(231,214,188,.55); }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--gold-2);
  background: rgba(255,255,255,.07);
  outline: 2px solid var(--gold);
  outline-offset: 1px;
}
.field option { color: var(--ink); }
.form-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.form-actions small { color: rgba(246,241,232,.62); }
@keyframes rise {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
@media (max-width: 1024px) {
  .nav {
    width: min(320px, 88vw);
    transform: translateX(-105%);
    transition: transform .28s ease;
    box-shadow: none;
  }
  .nav.is-open { transform: translateX(0); box-shadow: 24px 0 60px rgba(0,0,0,.28); }
  .close-nav { display: grid; place-items: center; }
  .mainwrap { margin-left: 0; }
  .topbar { display: flex; }
  .desk-grid, .board-grid, .dossier-grid, .split-head, .tier-layout, .faq-grid, .ask-grid, .footer-grid, .head-row, .feature, .entry-grid {
    grid-template-columns: 1fr;
  }
  .desk-grid { min-height: 0; padding-top: 36px; }
  .stat-row, .timeline { grid-template-columns: 1fr 1fr; }
  .stat:nth-child(2) { border-right: 0; }
  .timeline article:nth-child(2) { border-right: 0; }
  .dossier-visual, .ask-visual { min-height: 360px; }
}
@media (max-width: 768px) {
  :root { --space: 64px; }
  .container { width: min(1140px, calc(100% - 32px)); }
  .ledger li { grid-template-columns: 52px minmax(0, 1fr); }
  .ledger em { grid-column: 2; white-space: normal; }
  .sla-top { display: block; }
  .sla-top p { margin-top: 8px; }
  .ask-form { grid-template-columns: 1fr; }
  h1 { font-size: 44px; }
}
@media (max-width: 520px) {
  .stat-row, .timeline { grid-template-columns: 1fr; }
  .stat, .timeline article { border-right: 0; padding-right: 0; border-bottom: 1px solid rgba(231,214,188,.16); }
  .timeline article { border-bottom-color: var(--line); }
  .hero-actions, .form-actions { align-items: stretch; }
  .hero-actions .btn, .form-actions .btn { width: 100%; }
  .ticket-top { align-items: flex-start; flex-direction: column; }
  .rank-line { grid-template-columns: 1fr; gap: 2px; }
  .qa summary { font-size: 16px; }
}