/* roulang page: index */
:root {
  --blue-950: #0c2744;
  --blue-800: #15487a;
  --blue-700: #1d6cb8;
  --blue-500: #3c8fe0;
  --blue-100: #e7f2fc;
  --blue-050: #f5f9fd;
  --ink: #173049;
  --muted: #5d7084;
  --line: #d5e3f0;
  --white: #ffffff;
  --bg: #eef4fa;
  --ok: #1f8a62;
  --warn: #b86a14;
  --radius: 22px;
  --shadow: 0 18px 46px rgba(21, 72, 122, .1);
  --shadow-soft: 0 8px 24px rgba(21, 72, 122, .06);
  --space: clamp(56px, 7vw, 92px);
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: "Be Vietnam Pro", sans-serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.7;
  font-size: 16px;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--blue-800); text-decoration: none; }
a:hover { color: var(--blue-700); }
button, input { font-family: inherit; }
:focus-visible { outline: 3px solid rgba(60, 143, 224, .45); outline-offset: 3px; }
.container { width: min(1140px, calc(100% - 32px)); margin: 0 auto; }
.site-header { position: sticky; top: 14px; z-index: 40; margin-bottom: 8px; }
.nav-shell {
  background: rgba(255,255,255,.94);
  border: 1px solid rgba(213,227,240,.95);
  border-radius: 26px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px);
  padding: 12px 16px 10px;
}
.nav-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--blue-950); font-weight: 800; letter-spacing: -.02em; }
.brand-mark {
  width: 42px; height: 42px; border-radius: 14px;
  display: grid; place-items: center; color: #fff;
  background: linear-gradient(145deg, #1d6cb8, #0c2744);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.2);
}
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-text strong { font-size: 16px; }
.brand-text span { font-size: 12px; font-weight: 600; color: var(--muted); }
.nav-tools { display: flex; align-items: center; gap: 10px; }
.version-pill {
  background: var(--blue-100); color: var(--blue-800);
  border-radius: 999px; padding: 6px 12px; font-size: 12px; font-weight: 700;
}
.nav-toggle {
  display: none; border: 1px solid var(--line); background: #fff; color: var(--blue-950);
  width: 44px; height: 44px; border-radius: 14px; cursor: pointer;
}
.main-nav { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 10px; }
.main-nav a {
  color: var(--ink); font-weight: 600; font-size: 14px;
  padding: 8px 12px; border-radius: 999px;
}
.main-nav a:hover, .main-nav a:focus-visible { background: var(--blue-100); color: var(--blue-800); }
.main-nav a.active { background: var(--blue-950); color: #fff; }
.hero { padding: 18px 0 10px; }
.hero-panel {
  position: relative; overflow: hidden; border-radius: 32px;
  min-height: 620px; display: grid; place-items: center;
  background: #0c2744 url("/assets/images/e49498c3fb80210e.webp") center/cover no-repeat;
  box-shadow: var(--shadow); color: #fff; text-align: center;
}
.hero-panel::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(8,28,52,.72), rgba(12,39,68,.82));
}
.hero-inner { position: relative; z-index: 1; width: min(860px, calc(100% - 36px)); padding: 64px 0; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.24);
  border-radius: 999px; padding: 6px 12px; font-size: 13px; font-weight: 600;
}
h1 { font-size: clamp(32px, 5vw, 54px); line-height: 1.18; letter-spacing: -.03em; margin: 16px 0 14px; font-weight: 800; }
.hero p.lead-copy { color: rgba(255,255,255,.9); font-size: 17px; margin: 0 auto 22px; }
.search-box {
  display: flex; gap: 8px; background: #fff; border-radius: 18px; padding: 8px;
  box-shadow: var(--shadow); text-align: left;
}
.search-box input {
  flex: 1; border: 0; padding: 12px 14px; font-size: 15px; color: var(--ink); background: transparent;
}
.search-box input:focus { outline: none; }
.search-box button, .btn-main, .btn-ghost, .btn-line {
  border: 0; cursor: pointer; border-radius: 14px; font-weight: 700; transition: .2s ease;
}
.search-box button, .btn-main {
  background: var(--blue-700); color: #fff; padding: 12px 18px;
}
.btn-main:hover, .search-box button:hover { background: var(--blue-800); transform: translateY(-1px); }
.btn-ghost {
  background: rgba(255,255,255,.14); color: #fff; border: 1px solid rgba(255,255,255,.3); padding: 12px 18px;
}
.btn-ghost:hover { background: #fff; color: var(--blue-950); }
.btn-line {
  background: #fff; color: var(--blue-800); border: 1px solid var(--line); padding: 10px 14px;
}
.btn-line:hover { border-color: var(--blue-500); color: var(--blue-950); }
.hero-actions { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.chip-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 18px; }
.chip, .badge {
  display: inline-flex; align-items: center; gap: 6px;
  border-radius: 999px; padding: 7px 12px; font-size: 13px; font-weight: 650;
  background: var(--blue-100); color: var(--blue-800);
}
.chip { background: rgba(255,255,255,.16); color: #fff; border: 1px solid rgba(255,255,255,.2); }
.chip:hover { background: #fff; color: var(--blue-950); }
main section { padding: var(--space) 0; }
.section-head { max-width: 760px; margin-bottom: 28px; }
.section-head h2 { font-size: clamp(28px, 3vw, 40px); line-height: 1.22; letter-spacing: -.03em; margin: 8px 0 12px; }
.section-head p, .prose { color: var(--muted); }
.kicker { color: var(--blue-700); font-weight: 700; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; }
.band { background: #fff; }
.band-soft { background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.2)); }
.entry-rail { display: grid; grid-template-columns: 1.2fr .8fr; gap: 22px; align-items: stretch; }
.panel {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-soft);
}
.entry-list { display: grid; gap: 12px; }
.entry-item, .check-item, .rank-item, .profile-item, .audience-item, .qa-item, .news-row {
  border: 1px solid var(--line); border-radius: 18px; background: #fff; transition: .2s ease;
}
.entry-item { display: grid; grid-template-columns: 54px 1fr; gap: 12px; padding: 14px; }
.entry-item:hover, .check-item:hover, .rank-item:hover, .profile-item:hover, .qa-item:hover, .news-row:hover {
  transform: translateY(-2px); box-shadow: var(--shadow); border-color: #bcd6ee;
}
.ico {
  width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center;
  background: var(--blue-100); color: var(--blue-800); font-size: 18px;
}
.entry-item h3, .check-item h3, .resource-copy h3, .quote h3, .news-copy h3, .profile-item h3, .audience-item h3, .qa-item h3 {
  font-size: 18px; margin: 0 0 6px; letter-spacing: -.02em;
}
.entry-side {
  padding: 22px; background: var(--blue-950) url("/assets/images/37fbfc77dd7298b0.webp") center/cover no-repeat;
  color: #fff; position: relative; overflow: hidden;
}
.entry-side::before { content: ""; position: absolute; inset: 0; background: rgba(12,39,68,.78); }
.entry-side > * { position: relative; z-index: 1; }
.qa-layout { display: grid; grid-template-columns: 280px 1fr; gap: 22px; }
.qa-index { padding: 18px; position: sticky; top: 110px; height: fit-content; }
.qa-index a { display: block; padding: 10px 0; border-bottom: 1px solid var(--line); color: var(--ink); font-weight: 600; }
.qa-list { display: grid; gap: 12px; }
.qa-item { padding: 18px 18px 16px; }
.qa-item p { margin: 0; color: var(--muted); }
.pain-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.pain-card { padding: 26px; min-height: 100%; }
.pain-card.warn { background: #fff8f1; border-color: #f0d7bb; }
.pain-card.ok { background: #f3fbf7; border-color: #c9eadc; }
.pain-card ul { margin: 12px 0 0; padding-left: 18px; color: var(--ink); }
.bento { display: grid; grid-template-columns: 1.3fr 1fr 1fr; grid-auto-rows: 1fr; gap: 14px; }
.bento a {
  display: flex; flex-direction: column; justify-content: flex-end; min-height: 190px;
  padding: 18px; border-radius: 22px; color: #fff; position: relative; overflow: hidden;
  background: #15487a center/cover no-repeat; box-shadow: var(--shadow-soft);
}
.bento a::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(12,39,68,.1), rgba(12,39,68,.82)); }
.bento a > * { position: relative; z-index: 1; }
.bento a strong { font-size: 20px; }
.bento a span { color: rgba(255,255,255,.88); font-size: 14px; }
.bento a:hover { transform: translateY(-3px); color: #fff; }
.wide { grid-row: span 2; min-height: 394px; }
.split { display: grid; grid-template-columns: .9fr 1.1fr; gap: 28px; align-items: center; }
.shot { border-radius: 28px; overflow: hidden; box-shadow: var(--shadow); border: 1px solid var(--line); }
.shot img { width: 100%; height: 460px; object-fit: cover; }
.check-list { display: grid; gap: 10px; }
.check-item { display: grid; grid-template-columns: 42px 1fr; gap: 12px; padding: 14px 16px; }
.num {
  width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center;
  background: var(--blue-950); color: #fff; font-weight: 800;
}
.steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.step { padding: 18px; background: #fff; border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow-soft); min-height: 220px; }
.step em { display: block; color: var(--blue-700); font-style: normal; font-weight: 800; font-size: 13px; }
.timeline { display: grid; gap: 0; position: relative; }
.time-item { display: grid; grid-template-columns: 140px 24px 1fr; gap: 14px; }
.rail { width: 14px; height: 14px; border-radius: 50%; background: var(--blue-500); margin-top: 8px; box-shadow: 0 0 0 6px var(--blue-100); }
.time-item p { margin-top: 0; }
.rank-list { display: grid; gap: 10px; }
.rank-item { display: grid; grid-template-columns: 64px 1fr auto; gap: 12px; align-items: center; padding: 14px 16px; }
.rank-no { font-size: 28px; font-weight: 800; color: var(--blue-700); }
.score { font-weight: 800; color: var(--blue-950); }
.stat-band { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.stat { padding: 22px; background: #fff; border-radius: 22px; border: 1px solid var(--line); box-shadow: var(--shadow-soft); }
.stat b { display: block; font-size: 34px; letter-spacing: -.04em; color: var(--blue-800); }
.resource-list { display: grid; gap: 16px; }
.resource-item { display: grid; grid-template-columns: 220px 1fr; gap: 16px; padding: 12px; }
.resource-item img { width: 100%; height: 150px; object-fit: cover; border-radius: 16px; }
.quote-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 14px; }
.quote { padding: 22px; background: #fff; border-radius: 24px; border: 1px solid var(--line); box-shadow: var(--shadow-soft); }
.quote.dark {
  background: #12375d url("/assets/images/5e7a730000b9a52f.webp") center/cover no-repeat; color: #fff; position: relative; overflow: hidden;
}
.quote.dark::before { content: ""; position: absolute; inset: 0; background: rgba(10,32,56,.78); }
.quote.dark > * { position: relative; z-index: 1; }
.who { display: flex; align-items: center; gap: 10px; margin-top: 16px; font-weight: 700; }
.who img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; }
.news-layout { display: grid; grid-template-columns: 1.15fr .85fr; gap: 16px; }
.feature-news { position: relative; overflow: hidden; border-radius: 26px; min-height: 420px; color: #fff; box-shadow: var(--shadow); }
.feature-news img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.feature-news div { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px; background: linear-gradient(transparent, rgba(8,24,42,.88)); }
.news-side { display: grid; gap: 10px; }
.news-row { display: grid; grid-template-columns: 92px 1fr; gap: 10px; padding: 10px; }
.news-row img { width: 92px; height: 76px; object-fit: cover; border-radius: 12px; }
.more-link { display: inline-flex; margin-top: 8px; font-weight: 800; }
.audience-list, .profile-list { display: grid; gap: 10px; }
.audience-item, .profile-item { display: grid; grid-template-columns: 64px 1fr auto; gap: 12px; align-items: center; padding: 14px; }
.bars { display: grid; gap: 16px; }
.bar-row span { display: flex; justify-content: space-between; font-weight: 700; }
.track { height: 12px; background: #dce8f4; border-radius: 999px; overflow: hidden; }
.track i { display: block; height: 100%; background: linear-gradient(90deg, #1d6cb8, #69b0ef); border-radius: inherit; }
.cta-band {
  border-radius: 30px; overflow: hidden; position: relative; color: #fff; text-align: center;
  background: #0c2744 url("/assets/images/7158755106b10557.webp") center/cover no-repeat;
  padding: 56px 20px; box-shadow: var(--shadow);
}
.cta-band::before { content: ""; position: absolute; inset: 0; background: rgba(10,32,56,.78); }
.cta-band .inner { position: relative; z-index: 1; width: min(760px, 100%); margin: 0 auto; }
.site-footer { padding: 28px 0 42px; color: var(--muted); }
.footer-card { padding: 22px; display: grid; grid-template-columns: 1.4fr .8fr; gap: 18px; }
.footer-links { display: flex; flex-wrap: wrap; gap: 10px 16px; }
.footer-links a { color: var(--ink); font-weight: 650; }
.fine { font-size: 13px; }
.search-status { min-height: 24px; font-weight: 700; color: var(--blue-800); }
.hide { display: none; }
@media (max-width: 1024px) {
  .steps, .stat-band, .bento { grid-template-columns: 1fr 1fr; }
  .wide { grid-row: auto; min-height: 220px; }
  .qa-layout, .split, .entry-rail, .quote-grid, .news-layout, .pain-grid, .footer-card { grid-template-columns: 1fr; }
  .qa-index { position: static; }
  .shot img { height: 320px; }
}
@media (max-width: 768px) {
  .nav-toggle { display: inline-grid; place-items: center; }
  .main-nav { display: none; flex-direction: column; padding-bottom: 8px; }
  .main-nav.open { display: flex; }
  .version-pill { display: none; }
  .time-item, .rank-item, .resource-item, .audience-item, .profile-item { grid-template-columns: 1fr; }
  .steps, .stat-band, .bento { grid-template-columns: 1fr; }
  .hero-panel { min-height: 0; }
  .search-box { flex-direction: column; }
}
@media (max-width: 520px) {
  .container { width: min(100% - 20px, 1140px); }
  h1 { font-size: 30px; }
  .hero-inner { padding: 42px 0; }
  .entry-item, .news-row { grid-template-columns: 1fr; }
  .brand-text span { max-width: 180px; }
}

/* roulang page: category2 */
:root {
 --blue-950: #0c2744;
 --blue-800: #15487a;
 --blue-700: #1d6cb8;
 --blue-500: #3c8fe0;
 --blue-100: #e7f2fc;
 --blue-050: #f5f9fd;
 --ink: #173049;
 --muted: #5d7084;
 --line: #d5e3f0;
 --white: #ffffff;
 --bg: #eef4fa;
 --ok: #1f8a62;
 --warn: #b86a14;
 --radius: 22px;
 --shadow: 0 18px 46px rgba(21, 72, 122, .1);
 --shadow-soft: 0 8px 24px rgba(21, 72, 122, .06);
 --space: clamp(56px, 7vw, 92px);
}
/* roulang page: category2 */
html { scroll-behavior: smooth; }
*, *::before, *::after { box-sizing: border-box; }
body {
 margin: 0;
 font-family: "Be Vietnam Pro", sans-serif;
 color: var(--ink);
 background: var(--bg);
 line-height: 1.7;
 font-size: 16px;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--blue-800); text-decoration: none; }
a:hover { color: var(--blue-700); }
button, input, select { font-family: inherit; }
:focus-visible { outline: 3px solid rgba(60, 143, 224, .45); outline-offset: 2px; }
.container { width: min(1140px, calc(100% - 32px)); max-width: none; margin: 0 auto; padding: 0; }
.site-header { position: sticky; top: 14px; z-index: 40; margin-bottom: 8px; }
.nav-shell {
 background: rgba(255,255,255,.94);
 border: 1px solid rgba(213,227,240,.95);
 border-radius: 26px;
 box-shadow: var(--shadow);
 backdrop-filter: blur(14px);
 padding: 12px 16px 10px;
}
.nav-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--blue-950); font-weight: 800; letter-spacing: -.02em; }
.brand-mark {
 width: 42px; height: 42px; border-radius: 14px;
 display: grid; place-items: center; color: #fff; flex: 0 0 42px;
 background: linear-gradient(145deg, #1d6cb8, #0c2744);
 box-shadow: inset 0 0 0 1px rgba(255,255,255,.2);
}
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-text strong { font-size: 16px; }
.brand-text span { font-size: 12px; font-weight: 600; color: var(--muted); }
.nav-tools { display: flex; align-items: center; gap: 10px; }
.version-pill {
 background: var(--blue-100); color: var(--blue-800);
 border-radius: 999px; padding: 6px 12px; font-size: 12px; font-weight: 700;
}
.nav-toggle {
 display: none; border: 1px solid var(--line); background: #fff; color: var(--blue-950);
 width: 44px; height: 44px; border-radius: 14px; cursor: pointer;
}
.nav-toggle:active { background: var(--blue-100); }
.main-nav { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 10px; }
.main-nav a {
 color: var(--ink); font-weight: 600; font-size: 14px;
 padding: 8px 12px; border-radius: 999px;
}
.main-nav a:hover, .main-nav a:focus-visible { background: var(--blue-100); color: var(--blue-800); }
.main-nav a.active { background: var(--blue-950); color: #fff; }
.eyebrow {
 display: inline-flex; align-items: center; gap: 8px;
 background: var(--blue-100); border: 1px solid transparent;
 border-radius: 999px; padding: 6px 12px; font-size: 13px; font-weight: 600; color: var(--blue-800);
}
.search-box {
 display: flex; gap: 8px; background: #fff; border-radius: 18px; padding: 8px;
 box-shadow: var(--shadow); text-align: left;
}
.search-box input {
 flex: 1; border: 0; padding: 12px 14px; font-size: 15px; color: var(--ink); background: transparent;
}
.search-box input:focus { outline: none; }
.search-box button, .btn-main, .btn-ghost, .btn-line {
 border: 0; cursor: pointer; border-radius: 14px; font-weight: 700; transition: .2s ease;
 display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none;
}
.search-box button, .btn-main { background: var(--blue-700); color: #fff; padding: 12px 18px; }
.btn-main:hover, .search-box button:hover { background: var(--blue-800); color: #fff; transform: translateY(-1px); }
.btn-main:active { transform: translateY(0); }
.btn-ghost {
 background: rgba(255,255,255,.14); color: #fff; border: 1px solid rgba(255,255,255,.3); padding: 12px 18px;
}
.btn-ghost:hover { background: #fff; color: var(--blue-950); }
.btn-line {
 background: #fff; color: var(--blue-800); border: 1px solid var(--line); padding: 10px 14px;
}
.btn-line:hover { border-color: var(--blue-500); color: var(--blue-950); }
.chip, .badge {
 display: inline-flex; align-items: center; gap: 6px;
 border-radius: 999px; padding: 7px 12px; font-size: 13px; font-weight: 650;
 background: var(--blue-100); color: var(--blue-800);
}
main section { padding: var(--space) 0; }
.section-head { max-width: 760px; margin-bottom: 28px; }
.section-head h2, .split-copy h2, .band-copy h2 {
 font-size: clamp(28px, 3vw, 40px); line-height: 1.22; letter-spacing: -.03em; margin: 8px 0 12px;
}
.section-head p, .prose, .split-copy p, .band-copy p { color: var(--muted); }
.entry-item, .check-item, .rank-item, .profile-item, .audience-item, .qa-item, .news-row, .panel, .soft-card {
 border: 1px solid var(--line); border-radius: 18px; background: #fff; transition: .2s ease;
}
.entry-item { display: grid; grid-template-columns: 54px 1fr; gap: 12px; padding: 14px; }
.entry-item:hover, .check-item:hover, .rank-item:hover, .profile-item:hover, .qa-item:hover, .news-row:hover, .audience-item:hover {
 transform: translateY(-2px); box-shadow: var(--shadow); border-color: #bcd6ee;
}
.entry-item h3, .check-item h3, .resource-copy h3, .quote h3, .news-copy h3, .profile-item h3, .audience-item h3, .qa-item h3 {
 font-size: 18px; margin: 0 0 6px; letter-spacing: -.02em;
}
.qa-layout { display: grid; grid-template-columns: 280px 1fr; gap: 22px; }
.qa-index { padding: 18px; position: sticky; top: 110px; height: fit-content; }
.qa-index a { display: block; padding: 10px 0; border-bottom: 1px solid var(--line); color: var(--ink); font-weight: 600; }
.qa-list { display: grid; gap: 12px; }
.qa-item { padding: 18px 18px 16px; }
.qa-item p { margin: 0; color: var(--muted); }
.pain-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.pain-card { padding: 26px; min-height: 100%; }
.pain-card.warn { background: #fff8f1; border-color: #f3d7b8; }
.check-item { display: grid; grid-template-columns: 42px 1fr; gap: 12px; padding: 16px 16px 14px; align-items: start; }
.check-item p, .news-copy p, .audience-item p, .profile-item p { margin: 0; color: var(--muted); }
.mark {
 width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center;
 background: var(--blue-100); color: var(--blue-800); font-weight: 800;
}
.news-row { display: grid; grid-template-columns: 92px 1fr auto; gap: 16px; padding: 16px 18px; align-items: center; }
.rank-item, .profile-item, .audience-item { padding: 16px; }
.site-footer { padding: 10px 0 36px; }
.footer-card {
 display: flex; justify-content: space-between; gap: 28px; align-items: flex-start;
 background: #fff; border: 1px solid var(--line); border-radius: 28px;
 box-shadow: var(--shadow-soft); padding: 28px;
}
.footer-links { display: grid; gap: 8px; min-width: 180px; }
.footer-links a { font-weight: 700; color: var(--ink); }
.footer-links a:hover { color: var(--blue-700); }
.fine { color: var(--muted); margin: 8px 0 0; font-size: 14px; }
.cat-hero { padding: 18px 0 8px; }
.hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 28px; align-items: center; }
.cat-hero h1 { font-size: clamp(34px, 4.4vw, 56px); line-height: 1.12; letter-spacing: -.045em; margin: 12px 0 14px; color: var(--blue-950); }
.lead-copy { font-size: 17px; color: var(--muted); margin: 0 0 18px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.shot { border-radius: 28px; overflow: hidden; border: 1px solid var(--line); background: #fff; box-shadow: var(--shadow); position: relative; }
.shot img { width: 100%; height: 460px; object-fit: cover; }
.shot-note {
 position: absolute; left: 14px; right: 14px; bottom: 14px;
 background: rgba(255,255,255,.94); border-radius: 16px; padding: 12px 14px;
 display: flex; justify-content: space-between; gap: 10px; align-items: center;
 box-shadow: var(--shadow-soft);
}
.shot-note strong { display: block; font-size: 14px; }
.shot-note span { color: var(--muted); font-size: 12px; }
.stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 22px; }
.stat {
 background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 14px 16px; box-shadow: var(--shadow-soft);
}
.stat b { display: block; font-size: 26px; letter-spacing: -.04em; color: var(--blue-950); line-height: 1.1; }
.stat span { color: var(--muted); font-size: 13px; font-weight: 600; }
.band { background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0)); }
.alt { background: #fff; border-top: 1px solid rgba(213,227,240,.8); border-bottom: 1px solid rgba(213,227,240,.8); }
.split { display: grid; grid-template-columns: .78fr 1.22fr; gap: 34px; align-items: start; }
.stack { display: grid; gap: 12px; }
.step-line { display: grid; gap: 0; position: relative; }
.step-line::before {
 content: ""; position: absolute; left: 21px; top: 18px; bottom: 18px; width: 2px; background: #d5e6f6;
}
.step {
 display: grid; grid-template-columns: 44px 1fr; gap: 14px; padding: 8px 0 18px; position: relative;
}
.step .mark { position: relative; z-index: 1; background: #fff; border: 1px solid var(--line); }
.cert-panel {
 display: grid; grid-template-columns: .9fr 1.1fr; gap: 0; overflow: hidden;
 border-radius: 30px; background: var(--blue-950) url("/assets/images/7158755106b10557.webp") center/cover no-repeat;
 box-shadow: var(--shadow); color: #fff; min-height: 460px;
}
.cert-visual { min-height: 280px; position: relative; }
.cert-visual img { width: 100%; height: 100%; object-fit: cover; min-height: 460px; }
.cert-copy { padding: 36px 34px; background: linear-gradient(180deg, rgba(12,39,68,.88), rgba(12,39,68,.94)); }
.cert-copy h2 { color: #fff; }
.cert-copy p { color: rgba(255,255,255,.86); }
.cert-list { display: grid; gap: 10px; margin-top: 18px; }
.cert-list div {
 display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,.16);
}
.cert-list span { color: rgba(255,255,255,.7); }
.perm-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 18px; }
.side-note { padding: 22px; background: var(--blue-050); }
.side-note h3 { margin-top: 0; }
.ok { color: var(--ok); font-weight: 700; }
.warn-text { color: var(--warn); font-weight: 700; }
.device-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 18px; }
.device-list { display: grid; gap: 12px; }
.audience-item { display: grid; grid-template-columns: 92px 1fr; gap: 14px; align-items: center; }
.audience-item img { width: 92px; height: 78px; object-fit: cover; border-radius: 14px; }
.confirm-box {
 display: grid; grid-template-columns: 1fr .9fr; gap: 28px; align-items: center;
 background: #fff; border: 1px solid var(--line); border-radius: 30px; box-shadow: var(--shadow); padding: 28px;
}
.ios-form { display: grid; gap: 12px; }
.field { display: grid; gap: 6px; }
.field span { font-size: 13px; font-weight: 700; color: var(--blue-950); }
.field input, .field select {
 border: 1px solid var(--line); background: var(--blue-050); border-radius: 14px; padding: 12px 14px; color: var(--ink); font-size: 15px;
}
.field input:focus, .field select:focus { border-color: var(--blue-500); background: #fff; outline: none; box-shadow: 0 0 0 4px rgba(60,143,224,.15); }
.form-note { min-height: 24px; margin: 0; color: var(--ok); font-weight: 650; }
@media (max-width: 1024px) {
 .hero-grid, .split, .cert-panel, .perm-grid, .device-grid, .confirm-box, .qa-layout, .pain-grid { grid-template-columns: 1fr; }
 .cert-visual img { min-height: 280px; }
 .news-row { grid-template-columns: 80px 1fr; }
 .news-row .badge { grid-column: 2; justify-self: start; }
}
@media (max-width: 768px) {
 .nav-toggle { display: grid; place-items: center; }
 .main-nav { display: none; flex-direction: column; align-items: stretch; padding-top: 8px; }
 .main-nav.open { display: flex; }
 .main-nav a { padding: 12px; }
 .shot img { height: 300px; }
 .stat-row { grid-template-columns: 1fr; }
 .footer-card { flex-direction: column; }
 .audience-item { grid-template-columns: 74px 1fr; }
 .cat-hero h1 { font-size: 34px; }
}
@media (max-width: 520px) {
 .container { width: min(1140px, calc(100% - 20px)); }
 .brand-text strong { font-size: 13px; }
 .brand-text span, .version-pill { display: none; }
 .nav-shell { border-radius: 20px; padding: 10px; }
 .hero-actions, .hero-actions .btn-main, .hero-actions .btn-line { width: 100%; }
 .news-row, .check-item, .entry-item { grid-template-columns: 1fr; }
 .step-line::before { left: 20px; }
 .cert-copy, .confirm-box, .footer-card { padding: 18px; }
 .shot-note { flex-direction: column; align-items: flex-start; }
}

/* roulang page: category1 */
:root {
  --blue-950: #0c2744;
  --blue-800: #15487a;
  --blue-700: #1d6cb8;
  --blue-500: #3c8fe0;
  --blue-100: #e7f2fc;
  --blue-050: #f5f9fd;
  --ink: #173049;
  --muted: #5d7084;
  --line: #d5e3f0;
  --white: #ffffff;
  --bg: #eef4fa;
  --ok: #1f8a62;
  --warn: #b86a14;
  --radius: 22px;
  --shadow: 0 18px 46px rgba(21, 72, 122, .1);
  --shadow-soft: 0 8px 24px rgba(21, 72, 122, .06);
  --space: clamp(56px, 7vw, 92px);
}
/* roulang page: android */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: "Be Vietnam Pro", sans-serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.7;
  font-size: 16px;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--blue-800); text-decoration: none; }
a:hover { color: var(--blue-700); }
button, input { font-family: inherit; }
:focus-visible { outline: 3px solid rgba(60, 143, 224, .45); outline-offset: 2px; }
body .container { width: min(1140px, calc(100% - 32px)); max-width: 1140px; margin: 0 auto; padding: 0; }
.site-header { position: sticky; top: 14px; z-index: 40; margin-bottom: 8px; }
.nav-shell {
  background: rgba(255,255,255,.94);
  border: 1px solid rgba(213,227,240,.95);
  border-radius: 26px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px);
  padding: 12px 16px 10px;
}
.nav-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--blue-950); font-weight: 800; letter-spacing: -.02em; }
.brand-mark {
  width: 42px; height: 42px; border-radius: 14px;
  display: grid; place-items: center; color: #fff; flex: 0 0 auto;
  background: linear-gradient(145deg, #1d6cb8, #0c2744);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.2);
}
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-text strong { font-size: 16px; }
.brand-text span { font-size: 12px; font-weight: 600; color: var(--muted); }
.nav-tools { display: flex; align-items: center; gap: 10px; }
.version-pill {
  background: var(--blue-100); color: var(--blue-800);
  border-radius: 999px; padding: 6px 12px; font-size: 12px; font-weight: 700;
}
.nav-toggle {
  display: none; border: 1px solid var(--line); background: #fff; color: var(--blue-950);
  width: 44px; height: 44px; border-radius: 14px; cursor: pointer;
}
.nav-toggle:hover, .nav-toggle:active { background: var(--blue-100); }
.main-nav { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 10px; }
.main-nav a {
  color: var(--ink); font-weight: 600; font-size: 14px;
  padding: 8px 12px; border-radius: 999px;
}
.main-nav a:hover, .main-nav a:focus-visible { background: var(--blue-100); color: var(--blue-800); }
.main-nav a.active { background: var(--blue-950); color: #fff; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--blue-100); color: var(--blue-800);
  border: 1px solid transparent;
  border-radius: 999px; padding: 6px 12px; font-size: 13px; font-weight: 700;
}
h1 { font-size: clamp(34px, 4.4vw, 54px); line-height: 1.12; letter-spacing: -.04em; margin: 12px 0 14px; color: var(--blue-950); }
.section-head h2, .block-title { font-size: clamp(28px, 3vw, 40px); line-height: 1.22; letter-spacing: -.03em; margin: 8px 0 12px; color: var(--blue-950); }
.section-head { max-width: 760px; margin-bottom: 28px; }
.section-head p, .prose, .lead-copy { color: var(--muted); }
.lead-copy { font-size: 17px; margin: 0 0 18px; }
main section { padding: var(--space) 0; }
.section-tint { background: #f8fbfe; }
.panel {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
}
.btn-main, .btn-ghost, .btn-line {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 0; cursor: pointer; border-radius: 14px; font-weight: 700; transition: .2s ease;
  text-decoration: none; line-height: 1.2;
}
.btn-main { background: var(--blue-700); color: #fff; padding: 12px 18px; }
a.btn-main, a.btn-main:hover { color: #fff; }
.btn-main:hover { background: var(--blue-800); transform: translateY(-1px); }
.btn-main:active { transform: translateY(0); }
.btn-line { background: #fff; color: var(--blue-800); border: 1px solid var(--line); padding: 12px 16px; }
a.btn-line { color: var(--blue-800); }
.btn-line:hover { border-color: var(--blue-500); color: var(--blue-950); transform: translateY(-1px); }
.btn-ghost { background: rgba(255,255,255,.14); color: #fff; border: 1px solid rgba(255,255,255,.3); padding: 12px 18px; }
.chip, .badge {
  display: inline-flex; align-items: center; gap: 6px;
  border-radius: 999px; padding: 7px 12px; font-size: 13px; font-weight: 650;
  background: var(--blue-100); color: var(--blue-800);
}
.badge.ok { background: #e5f6ef; color: var(--ok); }
.badge.warn { background: #fff4e8; color: var(--warn); }
.lead-grid { display: grid; grid-template-columns: 1.12fr .88fr; gap: 34px; align-items: center; }
.crumb { display: flex; gap: 8px; align-items: center; color: var(--muted); font-size: 13px; font-weight: 600; margin-bottom: 8px; }
.crumb a { color: var(--blue-800); }
.action-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.code-card {
  background: #0c2744;
  color: #e7f2fc;
  border-radius: 28px;
  padding: 20px;
  box-shadow: var(--shadow);
}
.code-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; color: #b7d0e8; font-size: 13px; font-weight: 700; }
.dots { display: flex; gap: 6px; }
.dots i { width: 9px; height: 9px; border-radius: 50%; display: block; background: #3c8fe0; }
.dots i:nth-child(2) { background: #8fbff0; }
.dots i:nth-child(3) { background: #d5e3f0; }
.code-card pre {
  margin: 0;
  white-space: pre-wrap;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13.5px;
  line-height: 1.75;
  color: #f4f8fc;
}
.code-card .console-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.pain-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 18px; }
.pain-card { padding: 28px; min-height: 100%; background: #fff; }
.pain-card.warn { background: #fff8f1; border-color: #f3d7b5; }
.pain-card h2, .pain-card h3 { margin-top: 0; }
.icon-bubble {
  width: 48px; height: 48px; border-radius: 16px; display: grid; place-items: center;
  background: var(--blue-100); color: var(--blue-800); margin-bottom: 14px; font-size: 18px;
}
.pain-card.warn .icon-bubble { background: #ffe8cc; color: var(--warn); }
.mini-list { display: grid; gap: 10px; margin-top: 16px; }
.mini-list span {
  display: flex; gap: 10px; align-items: flex-start;
  background: rgba(255,255,255,.72); border-radius: 14px; padding: 10px 12px; color: var(--ink); font-weight: 600;
}
.split { display: grid; grid-template-columns: .92fr 1.08fr; gap: 28px; align-items: center; }
.shot { border-radius: 28px; overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow); background: #fff; }
.shot img { width: 100%; height: 100%; object-fit: cover; min-height: 320px; }
.spec-list { display: grid; gap: 10px; margin-top: 16px; }
.spec-row, .check-item, .news-row, .device-line {
  border: 1px solid var(--line); border-radius: 18px; background: #fff; transition: .2s ease;
}
.spec-row { display: flex; justify-content: space-between; gap: 16px; padding: 12px 14px; }
.spec-row span { color: var(--muted); font-weight: 600; }
.spec-row strong { color: var(--blue-950); font-weight: 750; text-align: right; }
.spec-row:hover, .check-item:hover, .news-row:hover, .device-line:hover {
  transform: translateY(-2px); box-shadow: var(--shadow); border-color: #bcd6ee;
}
.rail { display: grid; gap: 0; position: relative; }
.rail-item { display: grid; grid-template-columns: 74px 1fr; gap: 8px; }
.rail-index {
  width: 54px; height: 54px; border-radius: 18px; display: grid; place-items: center;
  background: var(--blue-950); color: #fff; font-weight: 800; position: relative; z-index: 1;
}
.rail-item:not(:last-child) .rail-index::after {
  content: ""; position: absolute; top: 58px; left: 25px; width: 2px; height: calc(100% - 8px);
  background: #c5dbef;
}
.rail-body { padding: 4px 0 22px; }
.rail-body h3 { margin: 0 0 6px; font-size: 20px; letter-spacing: -.02em; }
.rail-body p { margin: 0; color: var(--muted); }
.metric-band {
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: #fff; border: 1px solid var(--line); border-radius: 28px;
  box-shadow: var(--shadow); overflow: hidden;
}
.metric-band article { padding: 28px 22px; border-right: 1px solid var(--line); }
.metric-band article:last-child { border-right: 0; }
.metric-band strong { display: block; font-size: clamp(30px, 3vw, 40px); letter-spacing: -.04em; color: var(--blue-800); line-height: 1; margin-bottom: 8px; }
.metric-band span { color: var(--muted); font-weight: 600; }
.stack { display: grid; gap: 14px; }
.device-line { display: grid; grid-template-columns: 230px 1fr; gap: 18px; padding: 12px; align-items: center; }
.device-line img { width: 100%; height: 148px; object-fit: cover; border-radius: 16px; }
.device-line h3 { margin: 0 0 6px; font-size: 20px; }
.device-line p { margin: 0; color: var(--muted); }
.news-row { display: grid; grid-template-columns: 132px 1fr auto; gap: 16px; padding: 12px; align-items: center; }
.news-row img { width: 132px; height: 92px; object-fit: cover; border-radius: 14px; }
.news-row h3 { margin: 0 0 4px; font-size: 18px; }
.news-row p { margin: 0; color: var(--muted); }
.cta-panel {
  position: relative; overflow: hidden; border-radius: 32px; min-height: 280px;
  padding: 48px 42px;
  background: #0c2744 url("/assets/images/87ae24d61816cd3e.jpg") center/cover no-repeat;
  color: #fff; box-shadow: var(--shadow);
}
.cta-panel::before { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(8,28,52,.9), rgba(12,39,68,.55)); }
.cta-inner { position: relative; z-index: 1; max-width: 700px; }
.cta-panel h2 { color: #fff; margin: 10px 0 12px; font-size: clamp(30px, 4vw, 46px); letter-spacing: -.03em; }
.cta-panel p { color: rgba(255,255,255,.9); margin-bottom: 18px; }
.site-footer { padding: 10px 0 36px; }
.footer-card { display: flex; justify-content: space-between; gap: 28px; padding: 28px; }
.footer-links { display: grid; align-content: start; gap: 8px; min-width: 180px; }
.footer-links a { font-weight: 700; color: var(--blue-950); }
.footer-links a:hover { color: var(--blue-700); }
.fine { color: var(--muted); margin: 8px 0 0; font-size: 14px; }
.entry-item, .profile-item, .audience-item, .qa-item, .rank-item { border: 1px solid var(--line); border-radius: 18px; background: #fff; }
.qa-layout { display: grid; grid-template-columns: 280px 1fr; gap: 22px; }
.qa-item { padding: 18px; }
.qa-item p { margin: 0; color: var(--muted); }
@media (max-width: 1024px) {
  .lead-grid, .split, .pain-grid { grid-template-columns: 1fr; }
  .metric-band { grid-template-columns: 1fr 1fr; }
  .metric-band article:nth-child(odd) { border-right: 1px solid var(--line); }
  .metric-band article:nth-child(1), .metric-band article:nth-child(2) { border-bottom: 1px solid var(--line); }
  .shot img { min-height: 240px; }
}
@media (max-width: 768px) {
  .site-header { top: 8px; }
  .nav-toggle { display: inline-grid; place-items: center; }
  .version-pill { display: none; }
  .main-nav { display: none; }
  .main-nav.is-open { display: flex; flex-direction: column; }
  .footer-card, .device-line, .news-row { display: grid; grid-template-columns: 1fr; }
  .news-row img, .device-line img { width: 100%; height: 180px; }
  .qa-layout { grid-template-columns: 1fr; }
  .cta-panel { padding: 32px 22px; }
}
@media (max-width: 520px) {
  body .container { width: min(1140px, calc(100% - 20px)); }
  .brand-text strong { font-size: 13.5px; }
  .metric-band { grid-template-columns: 1fr; }
  .metric-band article { border-right: 0 !important; border-bottom: 1px solid var(--line); }
  .action-row, .code-card .console-actions { flex-direction: column; }
  .btn-main, .btn-line, .btn-ghost { width: 100%; }
  .spec-row { flex-direction: column; gap: 4px; }
  .spec-row strong { text-align: left; }
  h1 { font-size: 32px; }
}

/* roulang page: category4 */
:root {
  --blue-950: #0c2744;
  --blue-800: #15487a;
  --blue-700: #1d6cb8;
  --blue-500: #3c8fe0;
  --blue-100: #e7f2fc;
  --blue-050: #f5f9fd;
  --ink: #173049;
  --muted: #5d7084;
  --line: #d5e3f0;
  --white: #ffffff;
  --bg: #eef4fa;
  --ok: #1f8a62;
  --warn: #b86a14;
  --radius: 22px;
  --shadow: 0 18px 46px rgba(21, 72, 122, .1);
  --shadow-soft: 0 8px 24px rgba(21, 72, 122, .06);
  --space: clamp(56px, 7vw, 92px);
}
/* roulang page: category4 */
html { scroll-behavior: smooth; }
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  font-family: "Be Vietnam Pro", sans-serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.7;
  font-size: 16px;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--blue-800); text-decoration: none; }
a:hover { color: var(--blue-700); }
button, input, textarea { font-family: inherit; }
:focus-visible { outline: 3px solid rgba(60, 143, 224, .45); outline-offset: 2px; }
.container { width: min(1140px, calc(100% - 32px)) !important; max-width: 1140px; margin: 0 auto; padding: 0; }
.site-header { position: sticky; top: 14px; z-index: 40; margin-bottom: 8px; }
.nav-shell {
  background: rgba(255,255,255,.94);
  border: 1px solid rgba(213,227,240,.95);
  border-radius: 26px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px);
  padding: 12px 16px 10px;
}
.nav-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--blue-950); font-weight: 800; letter-spacing: -.02em; }
.brand-mark {
  width: 42px; height: 42px; border-radius: 14px;
  display: grid; place-items: center; color: #fff; flex: 0 0 42px;
  background: linear-gradient(145deg, #1d6cb8, #0c2744);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.2);
}
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-text strong { font-size: 16px; }
.brand-text span { font-size: 12px; font-weight: 600; color: var(--muted); }
.nav-tools { display: flex; align-items: center; gap: 10px; }
.version-pill {
  background: var(--blue-100); color: var(--blue-800);
  border-radius: 999px; padding: 6px 12px; font-size: 12px; font-weight: 700;
}
.nav-toggle {
  display: none; border: 1px solid var(--line); background: #fff; color: var(--blue-950);
  width: 44px; height: 44px; border-radius: 14px; cursor: pointer;
}
.nav-toggle:hover, .nav-toggle:active { background: var(--blue-100); }
.main-nav { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 10px; }
.main-nav a {
  color: var(--ink); font-weight: 600; font-size: 14px;
  padding: 8px 12px; border-radius: 999px;
}
.main-nav a:hover, .main-nav a:focus-visible { background: var(--blue-100); color: var(--blue-800); }
.main-nav a.active { background: var(--blue-950); color: #fff; }
.main-nav a.active:hover { color: #fff; }
main section { padding: var(--space) 0; }
.page-hero { padding: 22px 0 8px; }
.hero-grid { display: grid; grid-template-columns: 1.08fr .92fr; gap: 28px; align-items: center; }
.crumb { display: flex; gap: 8px; align-items: center; color: var(--muted); font-size: 13px; font-weight: 600; margin-bottom: 14px; }
.crumb a { color: var(--blue-800); }
.eyebrow, .kicker {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--blue-100); color: var(--blue-800);
  border-radius: 999px; padding: 6px 12px; font-size: 13px; font-weight: 700;
}
h1 { font-size: clamp(34px, 4vw, 52px); line-height: 1.12; letter-spacing: -.04em; margin: 14px 0 12px; color: var(--blue-950); }
.lead-copy { color: var(--muted); font-size: 17px; margin: 0 0 18px; max-width: 640px; }
.hero-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.btn-main, .btn-ghost, .btn-line, .search-box button {
  border: 0; cursor: pointer; border-radius: 14px; font-weight: 700; transition: .2s ease;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.btn-main, .search-box button { background: var(--blue-700); color: #fff; padding: 12px 18px; }
.btn-main:hover, .search-box button:hover { background: var(--blue-800); color: #fff; transform: translateY(-1px); }
.btn-main:active { transform: translateY(1px); }
.btn-line { background: #fff; color: var(--blue-800); border: 1px solid var(--line); padding: 12px 16px; }
.btn-line:hover { border-color: var(--blue-500); color: var(--blue-950); }
.btn-ghost { background: rgba(255,255,255,.14); color: #fff; border: 1px solid rgba(255,255,255,.3); padding: 12px 18px; }
.hero-visual { position: relative; min-height: 460px; }
.hero-photo {
  height: 460px; border-radius: 32px; overflow: hidden;
  box-shadow: var(--shadow); border: 1px solid var(--line);
}
.hero-photo img { width: 100%; height: 100%; object-fit: cover; }
.param-float {
  position: absolute; left: 18px; right: 18px; bottom: 18px;
  background: rgba(255,255,255,.94); border-radius: 20px; padding: 16px 18px;
  box-shadow: var(--shadow); border: 1px solid rgba(213,227,240,.9);
}
.param-float span { display: block; font-size: 12px; font-weight: 800; letter-spacing: .08em; color: var(--blue-700); }
.param-float strong { display: block; font-size: 20px; letter-spacing: -.03em; color: var(--blue-950); }
.param-float em { color: var(--muted); font-style: normal; font-size: 14px; }
.metric-rail {
  margin-top: 22px;
  display: grid;
  grid-template-columns: 1.4fr repeat(4, 1fr);
  gap: 12px;
  align-items: stretch;
}
.metric-note, .metric-item, .panel, .risk-row, .cert-copy, .step-item, .stat-card, .fit-item, .log-row, .ask-wrap {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
}
.metric-note { padding: 18px 20px; display: flex; flex-direction: column; justify-content: center; }
.metric-note b { color: var(--blue-950); font-size: 16px; }
.metric-note span { color: var(--muted); font-size: 14px; }
.metric-item { padding: 16px 14px; }
.metric-item strong { display: block; font-size: 28px; letter-spacing: -.04em; color: var(--blue-800); line-height: 1; }
.metric-item span { display: block; margin-top: 6px; color: var(--muted); font-size: 13px; font-weight: 600; }
.section-head { max-width: 760px; margin-bottom: 28px; }
.section-head h2, .ask-copy h2 { font-size: clamp(28px, 3vw, 40px); line-height: 1.22; letter-spacing: -.03em; margin: 8px 0 12px; color: var(--blue-950); }
.section-head p, .prose, .risk-copy p, .cert-copy p, .step-item p, .fit-item p, .log-copy p, .ask-copy p { color: var(--muted); }
.risk-band { background: linear-gradient(180deg, transparent, rgba(255,255,255,.65) 12%, rgba(255,255,255,.65) 88%, transparent); }
.risk-stack { display: grid; gap: 16px; }
.risk-row { display: grid; grid-template-columns: 280px 1fr; gap: 22px; padding: 14px; align-items: center; transition: .2s ease; }
.risk-row:hover, .step-item:hover, .log-row:hover, .fit-item:hover, .stat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: #bcd6ee; }
.risk-row.reverse { grid-template-columns: 1fr 280px; }
.risk-row.reverse .media-frame { order: 2; }
.media-frame { border-radius: 18px; overflow: hidden; min-height: 180px; background: var(--blue-100); }
.media-frame img, .fit-photo img { width: 100%; height: 100%; object-fit: cover; min-height: 180px; }
.risk-copy { padding: 10px 12px 10px 4px; }
.risk-copy h3, .cert-copy h2, .step-item h3, .fit-item h3, .log-copy h3 { margin: 0 0 6px; letter-spacing: -.02em; color: var(--blue-950); }
.badge, .chip {
  display: inline-flex; align-items: center; gap: 6px;
  border-radius: 999px; padding: 7px 12px; font-size: 13px; font-weight: 700;
  background: var(--blue-100); color: var(--blue-800);
}
.badge.warn { background: #fff3e6; color: var(--warn); }
.badge.ok { background: #e7f7f1; color: var(--ok); }
.cert-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 22px; align-items: center; }
.cert-photo { border-radius: 28px; overflow: hidden; min-height: 420px; box-shadow: var(--shadow); border: 1px solid var(--line); }
.cert-photo img { width: 100%; height: 100%; object-fit: cover; min-height: 420px; }
.cert-copy { padding: 28px; }
.check-list { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 10px; }
.check-list li {
  display: grid; grid-template-columns: 28px 1fr; gap: 10px; align-items: start;
  padding: 12px; border-radius: 16px; background: var(--blue-050); border: 1px solid var(--line);
}
.check-list i { color: var(--ok); margin-top: 3px; }
.step-rail { display: grid; gap: 12px; position: relative; }
.step-item { display: grid; grid-template-columns: 92px 1fr; gap: 8px; padding: 18px 18px 16px; transition: .2s ease; }
.step-no {
  width: 68px; height: 68px; border-radius: 20px;
  display: grid; place-items: center; background: var(--blue-950); color: #fff;
  font-weight: 800; letter-spacing: -.03em;
}
.stat-grid { display: grid; grid-template-columns: 1.3fr repeat(3, 1fr); gap: 14px; }
.stat-card { padding: 22px; min-height: 180px; transition: .2s ease; }
.stat-card.wide { background: var(--blue-950) url("/assets/images/37fbfc77dd7298b0.webp") center/cover no-repeat; color: #fff; position: relative; overflow: hidden; }
.stat-card.wide::before { content: ""; position: absolute; inset: 0; background: linear-gradient(160deg, rgba(12,39,68,.88), rgba(21,72,122,.78)); }
.stat-card.wide > * { position: relative; z-index: 1; }
.stat-card strong { display: block; font-size: 40px; letter-spacing: -.05em; line-height: 1; color: var(--blue-800); }
.stat-card.wide strong, .stat-card.wide p { color: #fff; }
.stat-card span { display: block; margin-top: 10px; font-weight: 700; }
.fit-grid { display: grid; grid-template-columns: 360px 1fr; gap: 22px; }
.fit-photo { border-radius: 28px; overflow: hidden; min-height: 100%; box-shadow: var(--shadow); border: 1px solid var(--line); }
.fit-photo img { min-height: 460px; }
.fit-list { display: grid; gap: 12px; }
.fit-item { display: grid; grid-template-columns: 54px 1fr; gap: 12px; padding: 16px; transition: .2s ease; }
.fit-ico {
  width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center;
  background: var(--blue-100); color: var(--blue-800); font-size: 20px;
}
.log-list { display: grid; gap: 12px; }
.log-row { display: grid; grid-template-columns: 148px 1fr auto; gap: 16px; align-items: center; padding: 10px; transition: .2s ease; }
.log-row img { width: 148px; height: 104px; object-fit: cover; border-radius: 16px; }
.log-copy h3 { font-size: 18px; }
.log-meta { color: var(--blue-700); font-size: 13px; font-weight: 700; }
.ask-band { padding-top: 10px; }
.ask-wrap { display: grid; grid-template-columns: .86fr 1.14fr; gap: 22px; padding: 22px; box-shadow: var(--shadow); }
.ask-copy { padding: 12px; }
.ask-form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field.full { grid-column: 1 / -1; }
.field label { font-size: 13px; font-weight: 700; color: var(--blue-950); }
.field input, .field textarea {
  border: 1px solid var(--line); background: var(--blue-050); color: var(--ink);
  border-radius: 14px; padding: 12px 14px; font-size: 15px;
}
.field input:focus, .field textarea:focus { outline: none; border-color: var(--blue-500); background: #fff; box-shadow: 0 0 0 4px rgba(60,143,224,.15); }
.form-note { grid-column: 1 / -1; color: var(--muted); font-size: 13px; margin: 0; }
.form-status { display: none; grid-column: 1 / -1; background: #e7f7f1; color: var(--ok); border-radius: 14px; padding: 12px 14px; font-weight: 700; }
.form-status.show { display: block; }
.site-footer { padding: 10px 0 36px; }
.footer-card { display: flex; justify-content: space-between; gap: 28px; padding: 28px; }
.footer-links { display: grid; gap: 8px; min-width: 190px; align-content: start; }
.footer-links a { font-weight: 700; color: var(--ink); padding: 4px 0; }
.footer-links a:hover { color: var(--blue-700); }
.fine { color: var(--muted); font-size: 14px; margin: 8px 0 0; }
@media (max-width: 1024px) {
  .hero-grid, .cert-grid, .fit-grid, .ask-wrap, .metric-rail, .stat-grid { grid-template-columns: 1fr 1fr; }
  .metric-note, .stat-card.wide { grid-column: 1 / -1; }
  .hero-photo, .hero-visual { min-height: 380px; height: auto; }
  .hero-photo { height: 380px; }
}
@media (max-width: 768px) {
  .nav-toggle { display: inline-grid; place-items: center; }
  .main-nav { display: none; flex-direction: column; align-items: stretch; }
  .main-nav.open { display: flex; }
  .main-nav a { border-radius: 14px; }
  .hero-grid, .cert-grid, .fit-grid, .ask-wrap, .metric-rail, .stat-grid, .risk-row, .risk-row.reverse, .log-row, .step-item, .footer-card, .ask-form {
    grid-template-columns: 1fr;
  }
  .risk-row.reverse .media-frame { order: 0; }
  .log-row img { width: 100%; height: 180px; }
  .version-pill { display: none; }
  .cert-photo, .cert-photo img, .fit-photo img { min-height: 240px; }
  h1 { font-size: 34px; }
}
@media (max-width: 520px) {
  .container { width: min(1140px, calc(100% - 20px)) !important; }
  .site-header { top: 8px; }
  .nav-shell { border-radius: 20px; padding: 10px; }
  .brand-text strong { font-size: 14px; }
  .hero-actions, .hero-actions .btn-main, .hero-actions .btn-line { width: 100%; }
  .param-float strong { font-size: 17px; }
  .metric-item strong, .stat-card strong { font-size: 28px; }
  .footer-card { padding: 18px; }
  .step-no { width: 54px; height: 54px; }
}

/* roulang page: category3 */
:root {
 --blue-950: #0c2744;
 --blue-800: #15487a;
 --blue-700: #1d6cb8;
 --blue-500: #3c8fe0;
 --blue-100: #e7f2fc;
 --blue-050: #f5f9fd;
 --ink: #173049;
 --muted: #5d7084;
 --line: #d5e3f0;
 --white: #ffffff;
 --bg: #eef4fa;
 --ok: #1f8a62;
 --warn: #b86a14;
 --radius: 22px;
 --shadow: 0 18px 46px rgba(21, 72, 122, .1);
 --shadow-soft: 0 8px 24px rgba(21, 72, 122, .06);
 --space: clamp(56px, 7vw, 92px);
}
/* roulang page: category3 */
html { scroll-behavior: smooth; }
*, *::before, *::after { box-sizing: border-box; }
body {
 margin: 0;
 font-family: "Be Vietnam Pro", sans-serif;
 color: var(--ink);
 background: var(--bg);
 line-height: 1.7;
 font-size: 16px;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--blue-800); text-decoration: none; }
a:hover { color: var(--blue-700); }
button, input, select, textarea { font-family: inherit; }
h1, h2, h3, p { margin-top: 0; }
.container { width: min(1140px, calc(100% - 32px)); margin: 0 auto; max-width: none; padding: 0; }
.site-header { position: sticky; top: 14px; z-index: 40; margin-bottom: 8px; }
.nav-shell {
 background: rgba(255,255,255,.94);
 border: 1px solid rgba(213,227,240,.95);
 border-radius: 26px;
 box-shadow: var(--shadow);
 backdrop-filter: blur(14px);
 padding: 12px 16px 10px;
}
.nav-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--blue-950); font-weight: 800; letter-spacing: -.02em; }
.brand-mark {
 width: 42px; height: 42px; border-radius: 14px;
 display: grid; place-items: center; color: #fff; flex: 0 0 auto;
 background: linear-gradient(145deg, #1d6cb8, #0c2744);
 box-shadow: inset 0 0 0 1px rgba(255,255,255,.2);
}
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-text strong { font-size: 16px; }
.brand-text span { font-size: 12px; font-weight: 600; color: var(--muted); }
.nav-tools { display: flex; align-items: center; gap: 10px; }
.version-pill {
 background: var(--blue-100); color: var(--blue-800);
 border-radius: 999px; padding: 6px 12px; font-size: 12px; font-weight: 700;
}
.nav-toggle {
 display: none; border: 1px solid var(--line); background: #fff; color: var(--blue-950);
 width: 44px; height: 44px; border-radius: 14px; cursor: pointer;
}
.nav-toggle:hover, .nav-toggle:focus-visible { border-color: var(--blue-500); outline: none; box-shadow: 0 0 0 4px rgba(60,143,224,.18); }
.main-nav { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 10px; }
.main-nav a {
 color: var(--ink); font-weight: 600; font-size: 14px;
 padding: 8px 12px; border-radius: 999px;
}
.main-nav a:hover, .main-nav a:focus-visible { background: var(--blue-100); color: var(--blue-800); outline: none; }
.main-nav a.active { background: var(--blue-950); color: #fff; }
.btn-main, .btn-ghost, .btn-line {
 border: 0; cursor: pointer; border-radius: 14px; font-weight: 700; transition: .2s ease;
 display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.btn-main { background: var(--blue-700); color: #fff; padding: 12px 18px; }
.btn-main:hover, .btn-main:focus-visible { background: var(--blue-800); color: #fff; transform: translateY(-1px); outline: none; }
.btn-line { background: #fff; color: var(--blue-800); border: 1px solid var(--line); padding: 10px 14px; }
.btn-line:hover, .btn-line:focus-visible { border-color: var(--blue-500); color: var(--blue-950); outline: none; }
.badge, .chip {
 display: inline-flex; align-items: center; gap: 6px;
 border-radius: 999px; padding: 7px 12px; font-size: 13px; font-weight: 650;
 background: var(--blue-100); color: var(--blue-800);
}
.badge.ok { background: #e5f6ef; color: var(--ok); }
.badge.warn { background: #fff1e2; color: var(--warn); }
.badge.hold { background: #eef2f6; color: var(--blue-950); }
main section { padding: var(--space) 0; }
.section-head { max-width: 760px; margin-bottom: 28px; }
.section-head h2, .block-title { font-size: clamp(28px, 3vw, 40px); line-height: 1.22; letter-spacing: -.03em; margin: 8px 0 12px; color: var(--blue-950); }
.section-head p, .prose, .muted { color: var(--muted); }
.kicker {
 display: inline-flex; align-items: center; gap: 8px;
 background: var(--blue-100); color: var(--blue-800);
 border-radius: 999px; padding: 6px 12px; font-size: 13px; font-weight: 700;
}
.panel { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-soft); }
.page-hero { padding: 22px 0 8px; }
.hero-card { padding: clamp(22px, 4vw, 42px); border-radius: 32px; }
.hero-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 28px; align-items: center; }
h1 { font-size: clamp(34px, 4.4vw, 54px); line-height: 1.12; letter-spacing: -.04em; margin: 12px 0 14px; color: var(--blue-950); font-weight: 800; }
.lead-copy { color: var(--muted); font-size: 17px; margin-bottom: 18px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.icon-matrix { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.icon-tile {
 background: var(--blue-050); border: 1px solid var(--line); border-radius: 20px; padding: 16px;
 min-height: 124px; transition: .2s ease;
}
.icon-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: #bcd6ee; }
.icon-tile i { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: #fff; color: var(--blue-700); margin-bottom: 10px; }
.icon-tile strong { display: block; font-size: 15px; }
.icon-tile span { color: var(--muted); font-size: 13px; }
.status-bar {
 margin-top: 22px; display: flex; flex-wrap: wrap; gap: 8px 18px;
 padding: 12px 14px; border-radius: 16px; background: var(--blue-050); border: 1px dashed #c5daf0;
 color: var(--blue-800); font-weight: 650; font-size: 14px;
}
.status-bar span { display: inline-flex; align-items: center; gap: 8px; }
.pain-layout { display: grid; grid-template-columns: .82fr 1.18fr; gap: 28px; align-items: start; }
.alert-stack { display: grid; gap: 12px; }
.alert-row {
 display: grid; grid-template-columns: 46px 1fr; gap: 12px; align-items: start;
 padding: 16px 16px 14px; background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--warn);
 border-radius: 18px; box-shadow: var(--shadow-soft);
}
.alert-row i { color: var(--warn); margin-top: 3px; }
.alert-row h3 { font-size: 17px; margin: 0 0 4px; }
.alert-row p { margin: 0; color: var(--muted); }
.ledger { display: grid; gap: 14px; }
.ledger-row {
 display: grid; grid-template-columns: 118px 1fr auto; gap: 18px; align-items: center;
 padding: 18px; background: #fff; border: 1px solid var(--line); border-radius: 22px;
 box-shadow: var(--shadow-soft); transition: .2s ease;
}
.ledger-row:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: #bcd6ee; }
.code-pill { font-size: 26px; font-weight: 800; letter-spacing: -.04em; color: var(--blue-800); line-height: 1; }
.ledger-row h3 { font-size: 20px; margin: 0 0 6px; }
.ledger-row p { margin: 0 0 8px; color: var(--muted); }
.meta-list { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0; list-style: none; }
.meta-list li { background: var(--blue-050); border-radius: 999px; padding: 4px 10px; font-size: 13px; color: var(--blue-800); font-weight: 650; }
.step-rail { display: grid; gap: 0; position: relative; }
.step-item { display: grid; grid-template-columns: 72px 1fr; gap: 8px; }
.step-item .rail { display: flex; flex-direction: column; align-items: center; }
.step-num {
 width: 46px; height: 46px; border-radius: 16px; display: grid; place-items: center;
 background: var(--blue-950); color: #fff; font-weight: 800;
}
.step-line { width: 2px; flex: 1; background: linear-gradient(#c5daf0, transparent); min-height: 28px; }
.step-body { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 16px 18px; margin-bottom: 12px; box-shadow: var(--shadow-soft); }
.step-body h3 { margin: 0 0 6px; font-size: 18px; }
.step-body p { margin: 0; color: var(--muted); }
.metric-band {
 position: relative; overflow: hidden; border-radius: 32px; color: #fff; min-height: 280px;
 background: #0c2744 url("/assets/images/87ae24d61816cd3e.jpg") center/cover no-repeat;
 box-shadow: var(--shadow);
}
.metric-band::before { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, rgba(8,28,52,.92), rgba(21,72,122,.72)); }
.metric-inner { position: relative; z-index: 1; padding: clamp(28px, 4vw, 48px); }
.metric-grid { display: grid; grid-template-columns: 1.1fr repeat(4, .7fr); gap: 14px; align-items: stretch; }
.metric-grid h2 { color: #fff; font-size: clamp(28px, 3vw, 38px); letter-spacing: -.03em; margin: 8px 0 10px; }
.metric-grid p { color: rgba(255,255,255,.86); }
.stat { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); border-radius: 18px; padding: 16px; }
.stat b { display: block; font-size: 32px; letter-spacing: -.04em; line-height: 1.1; }
.stat span { display: block; color: rgba(255,255,255,.82); font-size: 14px; margin-top: 6px; }
.voice-grid { display: grid; grid-template-columns: 1.35fr .8fr; gap: 16px; }
.quote, .quote-side article {
 background: #fff; border: 1px solid var(--line); border-radius: 24px; box-shadow: var(--shadow-soft); padding: 22px;
}
.quote { min-height: 100%; background: linear-gradient(180deg, #fff, #f5f9fd); }
.quote i { color: var(--blue-500); font-size: 22px; }
.quote p, .quote-side p { font-size: 18px; color: var(--ink); margin: 10px 0; }
.quote-side { display: grid; gap: 16px; }
.who { color: var(--muted); font-weight: 700; font-size: 14px; }
.audience-list { display: grid; gap: 12px; }
.audience-item {
 display: grid; grid-template-columns: 64px 1fr auto; gap: 14px; align-items: center;
 padding: 14px; background: #fff; border: 1px solid var(--line); border-radius: 18px;
}
.audience-item i { width: 64px; height: 64px; border-radius: 18px; display: grid; place-items: center; background: var(--blue-100); color: var(--blue-800); font-size: 20px; }
.audience-item h3 { margin: 0 0 4px; font-size: 18px; }
.audience-item p { margin: 0; color: var(--muted); }
.log-list { display: grid; gap: 16px; }
.log-row {
 display: grid; grid-template-columns: 210px 1fr; gap: 16px; align-items: center;
 background: #fff; border: 1px solid var(--line); border-radius: 22px; overflow: hidden;
 box-shadow: var(--shadow-soft); transition: .2s ease;
}
.log-row:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.log-row img { width: 100%; height: 150px; object-fit: cover; }
.log-copy { padding: 8px 16px 8px 0; }
.log-copy h3 { margin: 6px 0; font-size: 20px; }
.log-copy p { margin: 0; color: var(--muted); }
.date-tag { font-size: 13px; font-weight: 700; color: var(--blue-700); }
.cta-grid { display: grid; grid-template-columns: 1fr .9fr; gap: 22px; align-items: center; padding: clamp(20px, 3vw, 32px); }
.cta-grid img { border-radius: 18px; height: 100%; max-height: 320px; width: 100%; object-fit: cover; }
.form-note { min-height: 52px; margin: 12px 0 0; font-weight: 650; color: var(--blue-800); }
.form-control, .form-select {
 border-radius: 14px; border: 1px solid var(--line); min-height: 48px; color: var(--ink); background: #fff;
}
.form-control:focus, .form-select:focus { border-color: var(--blue-500); box-shadow: 0 0 0 4px rgba(60,143,224,.16); }
.form-label { font-weight: 700; color: var(--blue-950); font-size: 14px; }
.site-footer { padding: 8px 0 36px; }
.footer-card { display: flex; justify-content: space-between; gap: 28px; padding: 28px; }
.footer-links { display: grid; align-content: start; gap: 8px; min-width: 200px; }
.footer-links a { font-weight: 700; padding: 6px 0; }
.footer-links a:hover { color: var(--blue-700); }
.fine { color: var(--muted); margin: 8px 0 0; font-size: 14px; }
:focus-visible { outline: 3px solid rgba(60,143,224,.45); outline-offset: 2px; }
@media (max-width: 1024px) {
 .hero-grid, .pain-layout, .metric-grid, .voice-grid, .cta-grid { grid-template-columns: 1fr; }
 .metric-grid { grid-template-columns: 1fr 1fr; }
 .log-row { grid-template-columns: 180px 1fr; }
}
@media (max-width: 768px) {
 .nav-toggle { display: inline-grid; place-items: center; }
 .main-nav { display: none; }
 .main-nav.is-open { display: flex; flex-direction: column; }
 .ledger-row, .audience-item, .log-row, .footer-card { grid-template-columns: 1fr; display: grid; }
 .log-copy { padding: 0 16px 16px; }
 .log-row img { height: 190px; }
 .audience-item i { width: 48px; height: 48px; }
 .code-pill { font-size: 22px; }
 .metric-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
 .brand-text span, .version-pill { display: none; }
 .brand-text strong { font-size: 13px; }
 .container { width: min(1140px, calc(100% - 20px)); }
 .icon-matrix, .metric-grid { grid-template-columns: 1fr; }
 .hero-card, .metric-inner, .cta-grid { padding: 16px; }
 .hero-actions .btn-main, .hero-actions .btn-line { width: 100%; }
 .status-bar { font-size: 13px; }
 h1 { font-size: 32px; }
}

/* roulang page: category5 */
:root {
  --blue-950: #0c2744;
  --blue-800: #15487a;
  --blue-700: #1d6cb8;
  --blue-500: #3c8fe0;
  --blue-100: #e7f2fc;
  --blue-050: #f5f9fd;
  --ink: #173049;
  --muted: #5d7084;
  --line: #d5e3f0;
  --white: #ffffff;
  --bg: #eef4fa;
  --ok: #1f8a62;
  --warn: #b86a14;
  --radius: 22px;
  --shadow: 0 18px 46px rgba(21, 72, 122, .1);
  --shadow-soft: 0 8px 24px rgba(21, 72, 122, .06);
  --space: clamp(56px, 7vw, 92px);
}
/* roulang page: category5 sua loi */
html { scroll-behavior: smooth; }
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  font-family: "Be Vietnam Pro", sans-serif;
  color: var(--ink);
  background:
    radial-gradient(900px 420px at 100% -10%, rgba(60, 143, 224, .16), transparent 60%),
    var(--bg);
  line-height: 1.7;
  font-size: 16px;
  padding-top: 18px;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--blue-800); text-decoration: none; }
a:hover { color: var(--blue-700); }
button, input, select { font-family: inherit; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible {
  outline: 3px solid rgba(60, 143, 224, .45);
  outline-offset: 2px;
}
.container { width: min(1140px, calc(100% - 32px)) !important; max-width: 1140px; margin: 0 auto; padding: 0; }
.site-header { position: sticky; top: 14px; z-index: 40; margin-bottom: 8px; }
.nav-shell {
  background: rgba(255,255,255,.94);
  border: 1px solid rgba(213,227,240,.95);
  border-radius: 26px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px);
  padding: 12px 16px 10px;
}
.nav-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--blue-950); font-weight: 800; letter-spacing: -.02em; }
.brand-mark {
  width: 42px; height: 42px; border-radius: 14px;
  display: grid; place-items: center; color: #fff; flex: 0 0 auto;
  background: linear-gradient(145deg, #1d6cb8, #0c2744);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.2);
}
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-text strong { font-size: 16px; }
.brand-text span { font-size: 12px; font-weight: 600; color: var(--muted); }
.nav-tools { display: flex; align-items: center; gap: 10px; }
.version-pill {
  background: var(--blue-100); color: var(--blue-800);
  border-radius: 999px; padding: 6px 12px; font-size: 12px; font-weight: 700;
}
.nav-toggle {
  display: none; border: 1px solid var(--line); background: #fff; color: var(--blue-950);
  width: 44px; height: 44px; border-radius: 14px; cursor: pointer;
}
.nav-toggle:hover, .nav-toggle:active { background: var(--blue-100); }
.main-nav { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 10px; }
.main-nav a {
  color: var(--ink); font-weight: 600; font-size: 14px;
  padding: 8px 12px; border-radius: 999px;
}
.main-nav a:hover, .main-nav a:focus-visible { background: var(--blue-100); color: var(--blue-800); }
.main-nav a.active { background: var(--blue-950); color: #fff; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.24);
  border-radius: 999px; padding: 6px 12px; font-size: 13px; font-weight: 600;
}
.btn-main, .btn-ghost, .btn-line {
  border: 0; cursor: pointer; border-radius: 14px; font-weight: 700; transition: .2s ease;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.btn-main { background: var(--blue-700); color: #fff; padding: 12px 18px; }
.btn-main:hover { background: var(--blue-800); color: #fff; transform: translateY(-1px); }
.btn-main:active { transform: translateY(0); }
.btn-ghost {
  background: rgba(255,255,255,.14); color: #fff; border: 1px solid rgba(255,255,255,.3); padding: 12px 18px;
}
.btn-ghost:hover { background: #fff; color: var(--blue-950); }
.btn-line {
  background: #fff; color: var(--blue-800); border: 1px solid var(--line); padding: 10px 14px;
}
.btn-line:hover { border-color: var(--blue-500); color: var(--blue-950); }
.badge, .chip {
  display: inline-flex; align-items: center; gap: 6px;
  border-radius: 999px; padding: 7px 12px; font-size: 13px; font-weight: 650;
  background: var(--blue-100); color: var(--blue-800);
}
.chip { background: rgba(255,255,255,.16); color: #fff; border: 1px solid rgba(255,255,255,.2); }
main section { padding: var(--space) 0; }
.section-head { max-width: 760px; margin-bottom: 28px; }
.section-head h2, .block-title {
  font-size: clamp(28px, 3vw, 40px); line-height: 1.22; letter-spacing: -.03em; margin: 8px 0 12px; color: var(--blue-950);
}
.section-head p, .prose, .muted { color: var(--muted); }
.kicker { color: var(--blue-700); font-weight: 700; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; margin: 0; }
.panel {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
}
.repair-hero { padding-top: 18px; }
.hero-split {
  position: relative; overflow: hidden; border-radius: 32px;
  min-height: 560px; display: grid; grid-template-columns: 1.05fr .95fr; gap: 28px;
  align-items: center; padding: 42px;
  background: #0c2744 url("/assets/images/7158755106b10557.webp") center/cover no-repeat;
  box-shadow: var(--shadow); color: #fff;
}
.hero-split::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(8,28,52,.88) 0%, rgba(12,39,68,.78) 48%, rgba(12,39,68,.55) 100%);
}
.hero-copy, .ticket-wall { position: relative; z-index: 1; }
.hero-copy h1 {
  font-size: clamp(34px, 4vw, 52px); line-height: 1.12; letter-spacing: -.035em;
  margin: 14px 0 14px; font-weight: 800;
}
.hero-copy .lead-copy { color: rgba(255,255,255,.9); font-size: 17px; margin: 0 0 18px; max-width: 560px; }
.hero-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.ticket-wall { display: grid; gap: 12px; }
.ticket-main {
  background: #fff; color: var(--ink); border-radius: 26px; padding: 22px 22px 18px;
  box-shadow: var(--shadow); position: relative; overflow: hidden;
}
.ticket-main::before, .ticket-main::after {
  content: ""; position: absolute; width: 28px; height: 28px; background: rgba(12,39,68,.55);
  border-radius: 50%; top: 58%;
}
.ticket-main::before { left: -14px; }
.ticket-main::after { right: -14px; }
.ticket-top { display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.ticket-main h2 { font-size: 26px; letter-spacing: -.03em; margin: 10px 0 6px; color: var(--blue-950); }
.ticket-main p { color: var(--muted); margin: 0 0 14px; }
.ticket-code {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  border-top: 1px dashed #c5d8ea; margin-top: 8px; padding-top: 14px;
}
.ticket-code strong { font-size: 22px; letter-spacing: .04em; color: var(--blue-800); }
.ticket-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.mini-ticket {
  background: rgba(255,255,255,.94); color: var(--ink); border-radius: 18px; padding: 12px;
  border: 1px dashed rgba(255,255,255,.4); min-height: 108px;
}
.mini-ticket b { display: block; color: var(--blue-800); font-size: 14px; }
.mini-ticket span { display: block; color: var(--muted); font-size: 13px; line-height: 1.45; margin-top: 4px; }
.symptom-layout { display: grid; grid-template-columns: .9fr 1.1fr; gap: 28px; align-items: center; }
.shot {
  border-radius: 28px; overflow: hidden; min-height: 420px; position: relative;
  box-shadow: var(--shadow); border: 1px solid var(--line);
}
.shot img { width: 100%; height: 100%; object-fit: cover; min-height: 420px; }
.shot figcaption {
  position: absolute; left: 16px; right: 16px; bottom: 16px;
  background: rgba(255,255,255,.94); border-radius: 16px; padding: 12px 14px;
  color: var(--ink); font-weight: 650;
}
.symptom-list { display: grid; gap: 12px; }
.symptom-item {
  display: grid; grid-template-columns: 52px 1fr auto; gap: 12px; align-items: center;
  background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 14px 16px;
  box-shadow: var(--shadow-soft); transition: .2s ease;
}
.symptom-item:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: #bcd6ee; }
.symptom-item h3 { font-size: 17px; margin: 0 0 4px; letter-spacing: -.02em; }
.symptom-item p { margin: 0; color: var(--muted); font-size: 14px; }
.ico {
  width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center;
  background: var(--blue-100); color: var(--blue-800); font-size: 20px;
}
.ico.warn { background: #fff3e4; color: var(--warn); }
.ico.ok { background: #e7f7f1; color: var(--ok); }
.code-board { display: grid; gap: 10px; }
.code-row {
  display: grid; grid-template-columns: 120px 1fr 180px; gap: 16px; align-items: center;
  background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 16px 18px;
  box-shadow: var(--shadow-soft); transition: .2s ease;
}
.code-row:hover { border-color: #bcd6ee; box-shadow: var(--shadow); }
.code-row strong { color: var(--blue-800); font-size: 18px; }
.code-row h3 { margin: 0 0 4px; font-size: 17px; }
.code-row p { margin: 0; color: var(--muted); font-size: 14px; }
.state { justify-self: end; font-size: 12px; font-weight: 800; border-radius: 999px; padding: 6px 10px; }
.state.wait { background: #fff3e4; color: var(--warn); }
.state.done { background: #e7f7f1; color: var(--ok); }
.step-rail { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; position: relative; }
.step-rail::before {
  content: ""; position: absolute; left: 6%; right: 6%; top: 28px; height: 2px; background: #d5e6f5;
}
.step-card { position: relative; background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 18px; box-shadow: var(--shadow-soft); }
.step-no {
  width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center;
  background: var(--blue-950); color: #fff; font-weight: 800; margin-bottom: 12px; position: relative; z-index: 1;
}
.step-card h3 { font-size: 18px; margin: 0 0 6px; }
.step-card p { margin: 0; color: var(--muted); font-size: 14px; }
.stat-band {
  border-radius: 32px; color: #fff; padding: 36px;
  background: #0c2744 url("/assets/images/37fbfc77dd7298b0.webp") center/cover no-repeat;
  position: relative; overflow: hidden; box-shadow: var(--shadow);
}
.stat-band::before { content: ""; position: absolute; inset: 0; background: rgba(8, 28, 52, .82); }
.stat-inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1.1fr repeat(3, 1fr); gap: 18px; align-items: center; }
.stat-inner h2 { font-size: clamp(28px, 3vw, 38px); letter-spacing: -.03em; margin: 8px 0; }
.stat-inner p { color: rgba(255,255,255,.86); margin: 0; }
.stat-num b { display: block; font-size: 40px; letter-spacing: -.04em; line-height: 1; }
.stat-num span { display: block; color: rgba(255,255,255,.8); margin-top: 6px; font-size: 14px; }
.quote-layout { display: grid; grid-template-columns: 1.25fr .75fr; gap: 18px; }
.quote-main, .quote-side article {
  background: #fff; border: 1px solid var(--line); border-radius: 24px; box-shadow: var(--shadow-soft); overflow: hidden;
}
.quote-main { display: grid; grid-template-columns: 220px 1fr; }
.quote-main img { width: 100%; height: 100%; object-fit: cover; min-height: 260px; }
.quote-body { padding: 24px; }
.quote-body h3, .quote-side h3 { font-size: 20px; margin: 8px 0; letter-spacing: -.02em; }
.quote-body p, .quote-side p { color: var(--muted); margin: 0; }
.quote-side { display: grid; gap: 12px; }
.quote-side article { padding: 18px; }
.who { color: var(--blue-800); font-weight: 700; font-size: 13px; }
.audience-wrap { display: grid; grid-template-columns: 280px 1fr; gap: 22px; align-items: stretch; }
.audience-photo { border-radius: 28px; overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow); min-height: 100%; }
.audience-photo img { width: 100%; height: 100%; object-fit: cover; min-height: 360px; }
.audience-list { display: grid; gap: 12px; }
.audience-item {
  display: grid; grid-template-columns: 54px 1fr; gap: 12px; align-items: center;
  background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 14px 16px;
}
.audience-item h3 { margin: 0 0 4px; font-size: 17px; }
.audience-item p { margin: 0; color: var(--muted); font-size: 14px; }
.note-list { display: grid; gap: 12px; }
.news-row {
  display: grid; grid-template-columns: 168px 1fr auto; gap: 16px; align-items: center;
  border: 1px solid var(--line); border-radius: 18px; background: #fff; padding: 10px;
  transition: .2s ease;
}
.news-row:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: #bcd6ee; }
.news-row img { width: 168px; height: 108px; object-fit: cover; border-radius: 14px; }
.news-row h3 { margin: 0 0 6px; font-size: 18px; }
.news-row p { margin: 0; color: var(--muted); font-size: 14px; }
.metric-line {
  display: grid; grid-template-columns: repeat(3, 1fr); background: #fff;
  border: 1px solid var(--line); border-radius: 24px; box-shadow: var(--shadow-soft); overflow: hidden;
}
.metric-line article { padding: 26px 24px; }
.metric-line article + article { border-left: 1px solid var(--line); }
.metric-line b { display: block; font-size: 32px; color: var(--blue-800); letter-spacing: -.03em; }
.metric-line span { color: var(--muted); }
.cta-band {
  display: grid; grid-template-columns: 1fr .9fr; gap: 22px; align-items: center;
  background: #fff; border: 1px solid var(--line); border-radius: 32px; box-shadow: var(--shadow); overflow: hidden;
}
.cta-copy {
  padding: 36px; min-height: 360px;
  background: linear-gradient(160deg, rgba(12,39,68,.2), rgba(12,39,68,.72)), url("/assets/images/6a17b9aad8928273.jpg") center/cover no-repeat;
  color: #fff;
}
.cta-copy h2 { font-size: clamp(30px, 3vw, 42px); letter-spacing: -.03em; margin: 10px 0; }
.cta-copy p { color: rgba(255,255,255,.9); }
.cta-form { padding: 28px; }
.field { margin-bottom: 12px; }
.field label { display: block; font-weight: 700; font-size: 14px; margin-bottom: 6px; }
.field input, .field select {
  width: 100%; border: 1px solid var(--line); background: var(--blue-050); color: var(--ink);
  border-radius: 14px; padding: 12px 14px; font-size: 15px;
}
.field input:focus, .field select:focus { border-color: var(--blue-500); background: #fff; outline: none; box-shadow: 0 0 0 4px rgba(60,143,224,.15); }
.form-note { min-height: 24px; color: var(--ok); font-weight: 650; margin: 10px 0 0; }
.site-footer { padding: 10px 0 36px; }
.footer-card { display: grid; grid-template-columns: 1.4fr .8fr; gap: 24px; padding: 26px; }
.fine { color: var(--muted); margin: 8px 0 0; font-size: 14px; }
.footer-links { display: grid; align-content: center; gap: 8px; }
.footer-links a { font-weight: 700; padding: 6px 0; border-bottom: 1px solid var(--line); }
.footer-links a:hover { color: var(--blue-700); }
.modal-content.ticket-modal { border: 0; border-radius: 24px; box-shadow: var(--shadow); }
.ticket-modal .modal-header { border-bottom: 1px dashed var(--line); padding: 18px 20px; }
.ticket-modal .modal-body { padding: 20px; color: var(--muted); }
.ticket-modal .modal-title { color: var(--blue-950); font-weight: 800; }
.soft { background: var(--blue-050); }
@media (max-width: 1024px) {
  .hero-split, .symptom-layout, .quote-main, .quote-layout, .audience-wrap, .cta-band, .stat-inner, .footer-card {
    grid-template-columns: 1fr;
  }
  .step-rail { grid-template-columns: 1fr 1fr; }
  .step-rail::before { display: none; }
  .code-row { grid-template-columns: 90px 1fr; }
  .state { grid-column: 2; justify-self: start; }
  .quote-main img, .shot img, .audience-photo img { min-height: 240px; }
}
@media (max-width: 768px) {
  .nav-toggle { display: grid; place-items: center; }
  .main-nav { display: none; flex-direction: column; align-items: stretch; }
  .main-nav.open { display: flex; }
  .main-nav a { border-radius: 14px; }
  .version-pill { display: none; }
  .hero-split { padding: 24px; min-height: 0; }
  .ticket-row, .metric-line, .step-rail { grid-template-columns: 1fr; }
  .metric-line article + article { border-left: 0; border-top: 1px solid var(--line); }
  .news-row, .symptom-item { grid-template-columns: 1fr; }
  .news-row img { width: 100%; height: 180px; }
  .code-row { grid-template-columns: 1fr; }
  .brand-text strong { font-size: 14px; }
}
@media (max-width: 520px) {
  .container { width: min(1140px, calc(100% - 20px)) !important; }
  .hero-copy h1 { font-size: 32px; }
  .hero-actions, .ticket-code { flex-direction: column; align-items: stretch; }
  .cta-copy, .cta-form, .stat-band { padding: 20px; }
  .ticket-main h2 { font-size: 22px; }
}

/* roulang page: category6 */
:root {
  --blue-950: #0c2744;
  --blue-800: #15487a;
  --blue-700: #1d6cb8;
  --blue-500: #3c8fe0;
  --blue-100: #e7f2fc;
  --blue-050: #f5f9fd;
  --ink: #173049;
  --muted: #5d7084;
  --line: #d5e3f0;
  --white: #ffffff;
  --bg: #eef4fa;
  --ok: #1f8a62;
  --warn: #b86a14;
  --radius: 22px;
  --shadow: 0 18px 46px rgba(21, 72, 122, .1);
  --shadow-soft: 0 8px 24px rgba(21, 72, 122, .06);
  --space: clamp(56px, 7vw, 92px);
}
/* roulang page: category6 */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: "Be Vietnam Pro", sans-serif;
  color: var(--ink);
  background:
    radial-gradient(900px 420px at 100% -10%, rgba(60, 143, 224, .16), transparent 60%),
    var(--bg);
  line-height: 1.7;
  font-size: 16px;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--blue-800); text-decoration: none; }
a:hover { color: var(--blue-700); }
button, input { font-family: inherit; }
:focus-visible { outline: 3px solid rgba(60, 143, 224, .45); outline-offset: 2px; }
.container { width: min(1140px, calc(100% - 32px)); max-width: 1140px; margin: 0 auto; padding-left: 0; padding-right: 0; }
.site-header { position: sticky; top: 14px; z-index: 40; margin-bottom: 8px; }
.nav-shell {
  background: rgba(255,255,255,.94);
  border: 1px solid rgba(213,227,240,.95);
  border-radius: 26px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px);
  padding: 12px 16px 10px;
}
.nav-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--blue-950); font-weight: 800; letter-spacing: -.02em; }
.brand-mark {
  width: 42px; height: 42px; border-radius: 14px; flex: 0 0 42px;
  display: grid; place-items: center; color: #fff;
  background: linear-gradient(145deg, #1d6cb8, #0c2744);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.2);
}
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-text strong { font-size: 16px; }
.brand-text span { font-size: 12px; font-weight: 600; color: var(--muted); }
.nav-tools { display: flex; align-items: center; gap: 10px; }
.version-pill {
  background: var(--blue-100); color: var(--blue-800);
  border-radius: 999px; padding: 6px 12px; font-size: 12px; font-weight: 700;
}
.nav-toggle {
  display: none; border: 1px solid var(--line); background: #fff; color: var(--blue-950);
  width: 44px; height: 44px; border-radius: 14px; cursor: pointer;
}
.nav-toggle:hover { border-color: var(--blue-500); background: var(--blue-050); }
.main-nav { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 10px; }
.main-nav a {
  color: var(--ink); font-weight: 600; font-size: 14px;
  padding: 8px 12px; border-radius: 999px;
}
.main-nav a:hover, .main-nav a:focus-visible { background: var(--blue-100); color: var(--blue-800); }
.main-nav a.active { background: var(--blue-950); color: #fff; }
.kicker, .badge, .chip {
  display: inline-flex; align-items: center; gap: 6px;
  border-radius: 999px; padding: 7px 12px; font-size: 13px; font-weight: 650;
}
.kicker { background: var(--blue-100); color: var(--blue-800); font-weight: 700; }
.badge { background: var(--blue-100); color: var(--blue-800); }
.badge-ok { background: #e5f6ef; color: var(--ok); }
.badge-warn { background: #fff1e2; color: var(--warn); }
.badge-muted { background: #eef3f8; color: var(--muted); }
.btn-main, .btn-line, .btn-ghost {
  border: 0; cursor: pointer; border-radius: 14px; font-weight: 700;
  transition: .2s ease; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.btn-main { background: var(--blue-700); color: #fff; padding: 12px 18px; }
.btn-main:hover, .btn-main:focus-visible { background: var(--blue-800); color: #fff; transform: translateY(-1px); }
.btn-main:active { transform: translateY(0); }
.btn-line { background: #fff; color: var(--blue-800); border: 1px solid var(--line); padding: 10px 14px; }
.btn-line:hover, .btn-line:focus-visible { border-color: var(--blue-500); color: var(--blue-950); background: var(--blue-050); }
.btn-ghost { background: rgba(255,255,255,.16); color: #fff; border: 1px solid rgba(255,255,255,.35); padding: 12px 18px; }
.btn-ghost:hover { background: #fff; color: var(--blue-950); }
main section { padding: var(--space) 0; }
.section-head { max-width: 720px; margin-bottom: 28px; }
.section-head h2, .hero-copy h1 {
  font-size: clamp(28px, 3vw, 42px); line-height: 1.22; letter-spacing: -.03em; margin: 10px 0 12px; color: var(--blue-950);
}
.section-head p, .prose, .lead-copy { color: var(--muted); }
.panel {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
}
.crumb { display: flex; gap: 8px; align-items: center; color: var(--muted); font-size: 13px; font-weight: 600; margin-bottom: 14px; }
.crumb a { color: var(--blue-800); }
.page-hero { padding: 22px 0 8px; }
.hero-grid {
  display: grid; grid-template-columns: 1.15fr .85fr; gap: 22px; align-items: stretch;
}
.hero-copy {
  background: linear-gradient(180deg, #fff, #f7fbff);
  border: 1px solid var(--line); border-radius: 32px; padding: 36px 34px;
  box-shadow: var(--shadow);
}
.lead-copy { font-size: 17px; margin-bottom: 18px; }
.hero-actions, .chip-row { display: flex; flex-wrap: wrap; gap: 10px; }
.chip-row { margin-top: 18px; }
.chip { background: var(--blue-050); color: var(--blue-800); border: 1px solid var(--line); }
.slot-card { padding: 22px; display: flex; flex-direction: column; gap: 16px; }
.ring-row { display: grid; grid-template-columns: 148px 1fr; gap: 12px; align-items: center; }
.ring-wrap { position: relative; width: 148px; height: 148px; }
.ring-wrap svg { width: 148px; height: 148px; }
.ring-track, .ring-value { fill: none; stroke-width: 10; }
.ring-track { stroke: #e4eef8; }
.ring-value {
  stroke: #1d6cb8; stroke-linecap: round;
  stroke-dasharray: 339.292; stroke-dashoffset: 84.8;
  transform: rotate(-90deg); transform-origin: 70px 70px;
}
.ring-label {
  position: absolute; inset: 0; display: grid; place-items: center; text-align: center; line-height: 1.15;
}
.ring-label strong { display: block; font-size: 28px; color: var(--blue-950); letter-spacing: -.03em; }
.ring-label span { font-size: 12px; color: var(--muted); font-weight: 700; }
.slot-note h2 { font-size: 22px; margin: 0 0 6px; letter-spacing: -.02em; }
.slot-note p { margin: 0; color: var(--muted); font-size: 14px; }
.tier-list { display: grid; gap: 8px; }
.tier {
  display: flex; justify-content: space-between; gap: 10px; align-items: center;
  border: 1px solid var(--line); border-radius: 16px; padding: 12px 12px;
  background: var(--blue-050);
}
.tier strong { display: block; font-size: 15px; }
.tier span { color: var(--muted); font-size: 13px; }
.tier:hover { border-color: #bcd6ee; background: #fff; }
.pain-layout { display: grid; grid-template-columns: .78fr 1.22fr; gap: 28px; align-items: start; }
.pain-list { display: grid; gap: 12px; }
.pain-item {
  display: grid; grid-template-columns: 72px 1fr; gap: 14px; align-items: center;
  padding: 16px; background: #fff; border: 1px solid var(--line); border-radius: 18px;
  transition: .2s ease;
}
.pain-item:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: #bcd6ee; }
.pain-index {
  width: 72px; height: 72px; border-radius: 18px; display: grid; place-items: center;
  background: var(--blue-100); color: var(--blue-800); font-weight: 800; font-size: 20px;
}
.pain-item h3 { margin: 0 0 4px; font-size: 18px; letter-spacing: -.02em; }
.pain-item p { margin: 0; color: var(--muted); }
.split { display: grid; grid-template-columns: .92fr 1.08fr; gap: 22px; align-items: center; }
.media-frame {
  border-radius: 28px; overflow: hidden; border: 1px solid var(--line);
  box-shadow: var(--shadow); min-height: 320px; background: #d7e6f5;
}
.media-frame img { width: 100%; height: 100%; object-fit: cover; min-height: 320px; }
.check-list { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 10px; }
.check-list li {
  display: grid; grid-template-columns: 28px 1fr; gap: 10px; align-items: start;
  background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 12px 14px;
}
.check-list i { color: var(--ok); margin-top: 3px; }
.step-rail { display: grid; gap: 0; position: relative; }
.step {
  display: grid; grid-template-columns: 86px 1fr; gap: 16px;
  padding: 8px 0 22px;
}
.step-mark {
  width: 64px; height: 64px; border-radius: 20px; display: grid; place-items: center;
  background: var(--blue-950); color: #fff; font-weight: 800; position: relative; z-index: 1;
}
.step:not(:last-child) .step-mark::after {
  content: ""; position: absolute; top: 68px; bottom: -30px; left: 50%; width: 2px;
  background: linear-gradient(#9ec4e6, #d5e3f0); transform: translateX(-50%); z-index: -1;
}
.step-body { background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 18px 18px 16px; box-shadow: var(--shadow-soft); }
.step-body h3 { margin: 0 0 6px; font-size: 18px; }
.step-body p { margin: 0; color: var(--muted); }
.metric-band {
  background: var(--blue-950) url("/assets/images/5e7a730000b9a52f.webp") center/cover no-repeat;
  border-radius: 32px; color: #fff; padding: 28px; position: relative; overflow: hidden;
  box-shadow: var(--shadow);
}
.metric-band::before { content: ""; position: absolute; inset: 0; background: rgba(12, 39, 68, .86); }
.metric-band .inner { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.metric { padding: 8px 8px 4px; }
.metric strong { display: block; font-size: clamp(32px, 4vw, 46px); letter-spacing: -.04em; line-height: 1; }
.metric span { display: block; margin-top: 8px; color: rgba(255,255,255,.82); font-size: 14px; }
.bento { display: grid; grid-template-columns: 1.25fr .75fr; gap: 16px; }
.bento-side { display: grid; gap: 16px; }
.device-card { overflow: hidden; background: #fff; border: 1px solid var(--line); border-radius: 24px; box-shadow: var(--shadow-soft); }
.device-card img { width: 100%; height: 210px; object-fit: cover; }
.device-card.tall img { height: 280px; }
.device-copy { padding: 18px 18px 20px; }
.device-copy h3 { margin: 8px 0; font-size: 22px; letter-spacing: -.02em; }
.device-copy p { margin: 0; color: var(--muted); }
.quote-grid { display: grid; grid-template-columns: 1.3fr .7fr; gap: 16px; }
.quote { padding: 22px; background: #fff; border: 1px solid var(--line); border-radius: 24px; box-shadow: var(--shadow-soft); }
.quote-main { background: linear-gradient(180deg, #fff, #f3f8fd); }
.quote p { font-size: 18px; color: var(--ink); margin: 12px 0; }
.quote-side { display: grid; gap: 16px; }
.who { display: flex; gap: 10px; align-items: center; }
.who img { width: 52px; height: 52px; border-radius: 16px; object-fit: cover; }
.who strong { display: block; font-size: 15px; }
.who span { color: var(--muted); font-size: 13px; }
.log-list { display: grid; gap: 12px; }
.log-row {
  display: grid; grid-template-columns: 112px 1fr auto; gap: 14px; align-items: center;
  background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 10px;
  transition: .2s ease;
}
.log-row:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: #bcd6ee; }
.log-row img { width: 112px; height: 78px; object-fit: cover; border-radius: 12px; }
.log-row h3 { margin: 0 0 4px; font-size: 17px; }
.log-row p { margin: 0; color: var(--muted); font-size: 14px; }
.cta-band {
  position: relative; overflow: hidden; border-radius: 32px; color: #fff;
  background: #0c2744 url("/assets/images/87ae24d61816cd3e.jpg") center/cover no-repeat;
  box-shadow: var(--shadow); min-height: 280px;
}
.cta-band::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8,28,52,.88), rgba(12,39,68,.55)); }
.cta-inner { position: relative; z-index: 1; padding: 42px 36px; max-width: 680px; }
.cta-inner h2 { font-size: clamp(28px, 3vw, 40px); letter-spacing: -.03em; margin: 8px 0 10px; }
.cta-inner p { color: rgba(255,255,255,.88); }
.site-footer { padding: 10px 0 36px; }
.footer-card { display: flex; justify-content: space-between; gap: 24px; padding: 22px; }
.fine { color: var(--muted); margin: 8px 0 0; font-size: 14px; }
.footer-links { display: flex; flex-wrap: wrap; gap: 8px 14px; align-content: flex-start; justify-content: flex-end; }
.footer-links a { font-weight: 700; color: var(--blue-800); }
.footer-links a:hover { color: var(--blue-950); }
@media (max-width: 1024px) {
  .hero-grid, .pain-layout, .split, .bento, .quote-grid { grid-template-columns: 1fr; }
  .metric-band .inner { grid-template-columns: 1fr 1fr; }
  .device-card.tall img, .device-card img { height: 220px; }
}
@media (max-width: 768px) {
  .nav-toggle { display: grid; place-items: center; }
  .main-nav { display: none; flex-direction: column; align-items: stretch; }
  .main-nav.open { display: flex; }
  .main-nav a { border-radius: 14px; }
  .hero-copy, .cta-inner { padding: 26px 20px; }
  .ring-row, .pain-item, .step, .log-row, .footer-card { grid-template-columns: 1fr; display: grid; }
  .log-row img { width: 100%; height: 160px; }
  .footer-links { justify-content: flex-start; }
  .step:not(:last-child) .step-mark::after { display: none; }
}
@media (max-width: 520px) {
  .version-pill { display: none; }
  .brand-text strong { font-size: 13px; }
  .metric-band .inner { grid-template-columns: 1fr; }
  .hero-actions .btn-main, .hero-actions .btn-line, .cta-inner .btn-main, .cta-inner .btn-ghost { width: 100%; }
  .container { width: min(1140px, calc(100% - 20px)); }
}

/* roulang page: category7 */
:root {
 --blue-950: #0c2744;
 --blue-800: #15487a;
 --blue-700: #1d6cb8;
 --blue-500: #3c8fe0;
 --blue-100: #e7f2fc;
 --blue-050: #f5f9fd;
 --ink: #173049;
 --muted: #5d7084;
 --line: #d5e3f0;
 --white: #ffffff;
 --bg: #eef4fa;
 --ok: #1f8a62;
 --warn: #b86a14;
 --radius: 22px;
 --shadow: 0 18px 46px rgba(21, 72, 122, .1);
 --shadow-soft: 0 8px 24px rgba(21, 72, 122, .06);
 --space: clamp(56px, 7vw, 92px);
}
html { scroll-behavior: smooth; }
body {
 margin: 0;
 font-family: "Be Vietnam Pro", sans-serif;
 color: var(--ink);
 background: var(--bg);
 line-height: 1.7;
 font-size: 16px;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--blue-800); text-decoration: none; }
a:hover { color: var(--blue-700); }
button, input { font-family: inherit; }
:focus-visible { outline: 3px solid rgba(60, 143, 224, .45); outline-offset: 2px; }
.container { width: min(1140px, calc(100% - 32px)); margin: 0 auto; }
.site-header { position: sticky; top: 14px; z-index: 40; margin-bottom: 8px; }
.nav-shell {
 background: rgba(255,255,255,.94);
 border: 1px solid rgba(213,227,240,.95);
 border-radius: 26px;
 box-shadow: var(--shadow);
 backdrop-filter: blur(14px);
 padding: 12px 16px 10px;
}
.nav-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--blue-950); font-weight: 800; letter-spacing: -.02em; }
.brand-mark {
 width: 42px; height: 42px; border-radius: 14px;
 display: grid; place-items: center; color: #fff;
 background: linear-gradient(145deg, #1d6cb8, #0c2744);
 box-shadow: inset 0 0 0 1px rgba(255,255,255,.2);
}
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-text strong { font-size: 16px; }
.brand-text span { font-size: 12px; font-weight: 600; color: var(--muted); }
.nav-tools { display: flex; align-items: center; gap: 10px; }
.version-pill {
 background: var(--blue-100); color: var(--blue-800);
 border-radius: 999px; padding: 6px 12px; font-size: 12px; font-weight: 700;
}
.nav-toggle {
 display: none; border: 1px solid var(--line); background: #fff; color: var(--blue-950);
 width: 44px; height: 44px; border-radius: 14px; cursor: pointer;
}
.nav-toggle:hover, .nav-toggle:active { background: var(--blue-100); }
.main-nav { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 10px; }
.main-nav a {
 color: var(--ink); font-weight: 600; font-size: 14px;
 padding: 8px 12px; border-radius: 999px;
}
.main-nav a:hover, .main-nav a:focus-visible { background: var(--blue-100); color: var(--blue-800); }
.main-nav a.active { background: var(--blue-950); color: #fff; }
.btn-main, .btn-ghost, .btn-line {
 border: 0; cursor: pointer; border-radius: 14px; font-weight: 700; transition: .2s ease;
 display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.btn-main { background: var(--blue-700); color: #fff; padding: 12px 18px; }
.btn-main:hover { background: var(--blue-800); color: #fff; transform: translateY(-1px); }
.btn-line {
 background: #fff; color: var(--blue-800); border: 1px solid var(--line); padding: 10px 14px;
}
.btn-line:hover, .btn-line:active { border-color: var(--blue-500); color: var(--blue-950); }
.btn-ghost {
 background: rgba(255,255,255,.14); color: #fff; border: 1px solid rgba(255,255,255,.3); padding: 12px 18px;
}
.btn-ghost:hover { background: #fff; color: var(--blue-950); }
.badge, .tag {
 display: inline-flex; align-items: center; gap: 6px;
 border-radius: 999px; padding: 7px 12px; font-size: 13px; font-weight: 650;
 background: var(--blue-100); color: var(--blue-800);
}
.kicker {
 display: inline-flex; align-items: center; gap: 8px;
 background: var(--blue-100); color: var(--blue-800);
 border-radius: 999px; padding: 6px 12px; font-size: 13px; font-weight: 700;
}
main section { padding: var(--space) 0; }
.section-head { max-width: 760px; margin-bottom: 28px; }
.section-head h2, .res-hero h1, .ink-copy h2 {
 font-size: clamp(28px, 3vw, 40px); line-height: 1.22; letter-spacing: -.03em; margin: 8px 0 12px;
}
.section-head p, .prose, .muted { color: var(--muted); }
.res-hero { padding-top: 22px; }
.res-hero-card {
 display: grid; grid-template-columns: 1.08fr .92fr; gap: 28px;
 background: #fff; border: 1px solid var(--line); border-radius: 32px;
 box-shadow: var(--shadow); padding: 28px; align-items: center;
}
.crumb { display: flex; gap: 8px; align-items: center; color: var(--muted); font-size: 13px; font-weight: 600; margin-bottom: 12px; }
.crumb span { color: var(--blue-800); }
.lead-copy { color: var(--muted); font-size: 17px; margin: 0 0 16px; }
.point-list { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 10px; }
.point-list li {
 display: grid; grid-template-columns: 28px 1fr; gap: 10px; align-items: start;
 background: var(--blue-050); border: 1px solid var(--line); border-radius: 16px; padding: 10px 12px;
}
.point-list i { color: var(--ok); margin-top: 3px; }
.action-row { display: flex; flex-wrap: wrap; gap: 10px; }
.hero-figure { position: relative; }
.hero-figure img {
 width: 100%; height: 420px; object-fit: cover; border-radius: 24px;
}
.float-note {
 position: absolute; left: 16px; bottom: 16px; right: 16px;
 background: rgba(255,255,255,.94); border-radius: 18px; padding: 12px 14px;
 box-shadow: var(--shadow-soft); display: flex; justify-content: space-between; gap: 12px;
}
.float-note strong { display: block; font-size: 14px; }
.float-note span { color: var(--muted); font-size: 12px; }
.pack-tools {
 display: flex; gap: 10px; align-items: center; justify-content: space-between; margin-bottom: 16px; flex-wrap: wrap;
}
.pack-search {
 display: flex; gap: 8px; background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 8px; min-width: min(100%, 420px);
 box-shadow: var(--shadow-soft);
}
.pack-search input {
 flex: 1; border: 0; background: transparent; padding: 10px 12px; color: var(--ink); min-width: 0;
}
.pack-search input:focus { outline: none; }
.filter-row { display: flex; flex-wrap: wrap; gap: 8px; }
.filter-row button {
 border: 1px solid var(--line); background: #fff; color: var(--ink);
 border-radius: 999px; padding: 8px 12px; font-weight: 700; cursor: pointer;
}
.filter-row button.active, .filter-row button:hover { background: var(--blue-950); color: #fff; border-color: var(--blue-950); }
.res-list { display: grid; gap: 14px; }
.res-row {
 display: grid; grid-template-columns: 148px 1fr auto; gap: 16px; align-items: center;
 background: #fff; border: 1px solid var(--line); border-radius: 22px; padding: 12px;
 box-shadow: var(--shadow-soft); transition: .2s ease;
}
.res-row:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: #bcd6ee; }
.res-row img { width: 148px; height: 108px; object-fit: cover; border-radius: 16px; }
.res-row h3 { margin: 6px 0; font-size: 18px; letter-spacing: -.02em; }
.res-row p { margin: 0; color: var(--muted); }
.res-meta { text-align: right; min-width: 150px; }
.res-meta b { display: block; color: var(--blue-950); }
.res-meta span { color: var(--muted); font-size: 13px; }
.empty-note { display: none; padding: 18px; border-radius: 18px; background: #fff; border: 1px dashed var(--line); color: var(--muted); }
.ink-band {
 position: relative; overflow: hidden; border-radius: 32px; color: #fff;
 background: #0c2744 url("/assets/images/6a17b9aad8928273.jpg") center/cover no-repeat;
 box-shadow: var(--shadow);
}
.ink-band::before {
 content: ""; position: absolute; inset: 0;
 background: linear-gradient(100deg, rgba(8,28,52,.92) 0%, rgba(12,39,68,.78) 58%, rgba(12,39,68,.55) 100%);
}
.ink-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.1fr .9fr; gap: 24px; padding: 36px; align-items: center; }
.ink-copy p { color: rgba(255,255,255,.88); }
.file-stack { display: grid; gap: 10px; }
.file-stack article {
 background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2);
 border-radius: 18px; padding: 14px 16px; backdrop-filter: blur(8px);
}
.file-stack h3 { margin: 0 0 4px; font-size: 17px; }
.file-stack p { margin: 0; color: rgba(255,255,255,.84); font-size: 14px; }
.step-layout { display: grid; grid-template-columns: .78fr 1.22fr; gap: 28px; align-items: start; }
.step-list { display: grid; gap: 12px; }
.step-item {
 display: grid; grid-template-columns: 54px 1fr; gap: 12px;
 background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 14px;
 box-shadow: var(--shadow-soft);
}
.step-no {
 width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center;
 background: var(--blue-100); color: var(--blue-800); font-weight: 800;
}
.step-item h3 { margin: 0 0 4px; font-size: 17px; }
.step-item p { margin: 0; color: var(--muted); }
.side-photo { border-radius: 28px; overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow); background: #fff; }
.side-photo img { width: 100%; height: 100%; min-height: 460px; object-fit: cover; }
.metric-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.metric {
 background: #fff; border: 1px solid var(--line); border-radius: 22px; padding: 20px;
 box-shadow: var(--shadow-soft);
}
.metric b { display: block; font-size: 34px; letter-spacing: -.04em; color: var(--blue-800); line-height: 1; }
.metric span { display: block; margin-top: 8px; color: var(--muted); }
.time-list { display: grid; gap: 0; position: relative; }
.time-list::before {
 content: ""; position: absolute; left: 92px; top: 8px; bottom: 8px; width: 2px; background: #d5e3f0;
}
.time-item {
 display: grid; grid-template-columns: 92px 22px 1fr; gap: 14px; align-items: start; padding: 8px 0 18px;
}
.time-item time { font-weight: 800; color: var(--blue-800); font-size: 14px; padding-top: 12px; }
.dot {
 width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 5px solid var(--blue-500);
 margin-top: 14px; position: relative; z-index: 1;
}
.time-card { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 16px 18px; box-shadow: var(--shadow-soft); }
.time-card h3 { margin: 0 0 6px; font-size: 18px; }
.time-card p { margin: 0; color: var(--muted); }
.device-list { display: grid; gap: 16px; }
.device-item {
 display: grid; grid-template-columns: 280px 1fr; gap: 18px; align-items: center;
 background: #fff; border: 1px solid var(--line); border-radius: 24px; overflow: hidden;
 box-shadow: var(--shadow-soft);
}
.device-item:nth-child(even) { grid-template-columns: 1fr 280px; }
.device-item:nth-child(even) img { order: 2; }
.device-item img { width: 100%; height: 190px; object-fit: cover; }
.device-copy { padding: 18px 18px 18px 0; }
.device-item:nth-child(even) .device-copy { padding: 18px 0 18px 18px; }
.device-copy h3 { margin: 6px 0; font-size: 22px; letter-spacing: -.02em; }
.device-copy p { margin: 0; color: var(--muted); }
.faq-list { display: grid; gap: 12px; }
.faq-item {
 background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 6px 16px;
 box-shadow: var(--shadow-soft);
}
.faq-item summary { cursor: pointer; font-weight: 750; padding: 12px 0; list-style: none; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; float: right; color: var(--blue-700); font-weight: 800; }
.faq-item[open] summary::after { content: "–"; }
.faq-item p { margin: 0 0 14px; color: var(--muted); }
.site-footer { padding: 8px 0 36px; }
.panel { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-soft); }
.footer-card { display: flex; justify-content: space-between; gap: 28px; padding: 28px; }
.footer-links { display: flex; flex-direction: column; gap: 8px; min-width: 210px; }
.footer-links a { font-weight: 700; }
.footer-links a:hover { color: var(--blue-950); }
.fine { color: var(--muted); font-size: 14px; margin: 10px 0 0; }
.band-white { background: #fff; border-top: 1px solid rgba(213,227,240,.7); border-bottom: 1px solid rgba(213,227,240,.7); }
@media (max-width: 1024px) {
 .res-hero-card, .ink-grid, .step-layout { grid-template-columns: 1fr; }
 .metric-grid { grid-template-columns: 1fr 1fr; }
 .side-photo img { min-height: 280px; }
 .time-list::before { left: 78px; }
 .time-item { grid-template-columns: 78px 22px 1fr; }
 .hero-figure img { height: 320px; }
}
@media (max-width: 768px) {
 .nav-toggle { display: grid; place-items: center; }
 .version-pill { display: none; }
 .main-nav { display: none; padding-bottom: 6px; }
 .main-nav.open { display: flex; flex-direction: column; }
 .brand-text strong { font-size: 14px; }
 .res-row, .device-item, .device-item:nth-child(even) { grid-template-columns: 1fr; }
 .device-item:nth-child(even) img, .device-item img { order: 0; height: 200px; }
 .device-copy, .device-item:nth-child(even) .device-copy { padding: 0 16px 16px; }
 .res-row img { width: 100%; height: 180px; }
 .res-meta { text-align: left; }
 .footer-card { flex-direction: column; }
 .float-note { position: static; margin-top: 10px; }
 .ink-grid { padding: 22px; }
}
@media (max-width: 520px) {
 .container { width: min(1140px, calc(100% - 20px)); }
 .res-hero-card { padding: 16px; border-radius: 22px; }
 .metric-grid { grid-template-columns: 1fr; }
 .action-row, .pack-search { width: 100%; }
 .btn-main, .btn-line { width: 100%; }
 .time-item { grid-template-columns: 22px 1fr; }
 .time-item time { grid-column: 2; padding-top: 0; }
 .time-list::before { left: 10px; }
 .step-item { grid-template-columns: 44px 1fr; }
 .step-no { width: 44px; height: 44px; }
}