:root { --bg:#fff; --fg:#1c2321; --muted:#566360; --line:#d6dcdb; --soft:#f0f4f3; --brand:#0f766e; --brand-bg:#e0f2f1; --on-brand:#fff; --warn:#b06000; }
@media (prefers-color-scheme: dark) { :root { --bg:#151b1a; --fg:#e6ecea; --muted:#9aaaa6; --line:#34403e; --soft:#1c2423; --brand:#5eead4; --brand-bg:#1f3b38; --on-brand:#0b1412; --warn:#f5c26b; } }
@font-face { font-family:"Be Vietnam Pro"; font-weight:400; font-display:swap; src:url("/fonts/be-vietnam-pro-latin-400-normal.woff2") format("woff2"); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122; }
@font-face { font-family:"Be Vietnam Pro"; font-weight:400; font-display:swap; src:url("/fonts/be-vietnam-pro-vietnamese-400-normal.woff2") format("woff2"); unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; }
@font-face { font-family:"Be Vietnam Pro"; font-weight:600; font-display:swap; src:url("/fonts/be-vietnam-pro-latin-600-normal.woff2") format("woff2"); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122; }
@font-face { font-family:"Be Vietnam Pro"; font-weight:600; font-display:swap; src:url("/fonts/be-vietnam-pro-vietnamese-600-normal.woff2") format("woff2"); unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; }
@font-face { font-family:"Be Vietnam Pro"; font-weight:700; font-display:swap; src:url("/fonts/be-vietnam-pro-latin-700-normal.woff2") format("woff2"); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122; }
@font-face { font-family:"Be Vietnam Pro"; font-weight:700; font-display:swap; src:url("/fonts/be-vietnam-pro-vietnamese-700-normal.woff2") format("woff2"); unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; }
body { margin:0; font-family:"Be Vietnam Pro","Segoe UI",Roboto,system-ui,sans-serif; background:var(--bg); color:var(--fg); line-height:1.6; font-size:16px; }
a { color:var(--brand); } img { max-width:100%; height:auto; }
.wrap { max-width:1040px; margin:0 auto; padding:0 16px; }
header.top { position:sticky; top:0; z-index:5; background:var(--bg); border-bottom:1px solid var(--line); }
header.top .wrap { display:flex; align-items:center; gap:12px; min-height:60px; flex-wrap:wrap; }
.logo { display:flex; align-items:center; gap:8px; font-weight:700; font-size:18px; color:var(--fg); text-decoration:none; } .logo img { width:30px; height:30px; border-radius:8px; }
nav.links { display:flex; gap:16px; margin-left:auto; align-items:center; flex-wrap:wrap; } nav.links a { color:var(--fg); text-decoration:none; font-size:14px; } nav.links a:hover { color:var(--brand); }
.btn { display:inline-block; background:var(--brand); color:var(--on-brand); text-decoration:none; font-weight:600; padding:12px 20px; border-radius:10px; border:0; cursor:pointer; font-size:15px; }
.btn.ghost { background:transparent; color:var(--brand); border:1px solid var(--brand); } .btn.small { padding:8px 14px; font-size:14px; }
.hero { padding-top:48px; padding-bottom:32px; display:grid; gap:28px; } .hero h1 { font-size:clamp(28px,6vw,44px); line-height:1.2; margin:0 0 12px; } .hero p.lead { font-size:18px; color:var(--muted); margin:0 0 20px; max-width:560px; }
.hero .cta { display:flex; gap:12px; flex-wrap:wrap; align-items:center; } .hero small { color:var(--muted); display:block; margin-top:10px; }
.mock { border:1px solid var(--line); border-radius:16px; background:var(--soft); padding:14px; max-width:420px; } .mock .row { display:grid; grid-template-columns:44px 1fr 1fr; gap:6px; margin-bottom:6px; font-size:11px; color:var(--muted); align-items:stretch; }
.mock .blk { border-radius:6px; padding:6px 8px; color:var(--on-brand); font-size:11px; font-weight:600; min-height:34px; } .b1 { background:var(--brand); } .b2 { background:#7c6fd6; } .b3 { background:#d9a441; color:#1c2321; } .b0 { background:transparent; border:1px dashed var(--line); }
section.s { padding:40px 0; border-top:1px solid var(--line); } section.s h2 { font-size:clamp(22px,4vw,30px); margin:0 0 8px; } section.s p.sub { color:var(--muted); margin:0 0 24px; max-width:640px; }
.grid { display:grid; gap:16px; } .grid.g2 { grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); } .grid.g3 { grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); }
.card { border:1px solid var(--line); border-radius:14px; padding:18px; background:var(--bg); } .card h3 { margin:0 0 6px; font-size:17px; } .card p { margin:0; color:var(--muted); font-size:15px; }
.steps { counter-reset:s; display:grid; gap:14px; padding:0; list-style:none; } .steps li { counter-increment:s; display:flex; gap:12px; align-items:flex-start; } .steps li::before { content:counter(s); background:var(--brand); color:var(--on-brand); width:28px; height:28px; border-radius:50%; display:grid; place-items:center; font-weight:700; flex:none; }
.price { display:flex; flex-direction:column; gap:10px; } .price .amt { font-size:32px; font-weight:700; } .price .amt small { font-size:14px; color:var(--muted); font-weight:400; } .price ul { margin:0; padding-left:18px; color:var(--muted); font-size:15px; } .price.hot { border:2px solid var(--brand); }
.tag { display:inline-block; font-size:12px; background:var(--brand-bg); color:var(--brand); padding:2px 10px; border-radius:99px; font-weight:600; } .tag.soon { background:var(--soft); color:var(--muted); }
details { border:1px solid var(--line); border-radius:12px; padding:12px 16px; margin-bottom:10px; } details summary { cursor:pointer; font-weight:600; } details p { color:var(--muted); margin:8px 0 0; }
.cta-band { background:var(--brand-bg); border-radius:16px; padding:28px 20px; text-align:center; } .cta-band h2 { margin:0 0 8px; }
footer.f { border-top:1px solid var(--line); padding:28px 0 40px; color:var(--muted); font-size:14px; } footer.f .wrap { display:grid; gap:12px; } footer.f a { color:var(--muted); margin-right:14px; }
.prose { max-width:760px; padding:32px 0 56px; } .prose h1 { font-size:30px; margin:0 0 6px; } .prose h2 { font-size:20px; margin:28px 0 6px; } .prose p, .prose li { color:var(--fg); } .note { background:var(--soft); border-left:4px solid var(--warn); padding:10px 14px; border-radius:6px; font-size:14px; }
@media (min-width:820px) { .hero { grid-template-columns:1.2fr 1fr; align-items:center; padding-top:64px; padding-bottom:40px; } }
a.card { text-decoration:none; color:var(--fg); } a.card:hover { border-color:var(--brand); }

.shots { gap:24px; } .shot { margin:0; display:flex; flex-direction:column; gap:12px; min-width:0; } .shot figcaption { color:var(--muted); font-size:15px; } .shot figcaption b { display:block; color:var(--fg); font-size:17px; margin-bottom:2px; }
.ui { border:1px solid var(--line); border-radius:14px; background:var(--soft); padding:14px; font-size:13px; flex:1; min-width:0; overflow:hidden; }
.ui .ui-h { margin-bottom:10px; } .ui .ui-h b { display:block; font-size:16px; } .ui .ui-h span { color:var(--brand); font-size:12px; }
.ui-row { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:7px 0; border-top:1px solid var(--line); } .ui-row span { display:flex; flex-direction:column; } .ui-row small { color:var(--muted); font-size:11px; }
.tick { display:grid; place-items:center; width:20px; height:20px; border-radius:50%; background:var(--brand); color:var(--on-brand); font-style:normal; font-size:12px; }
.chips, .slots { display:flex; flex-wrap:wrap; gap:6px; margin:8px 0; } .chips em, .slots em { font-style:normal; border:1px solid var(--line); border-radius:99px; padding:3px 10px; background:var(--bg); } .slots em { border-radius:8px; padding:5px 10px; }
.chips em.on, .slots em.on { background:var(--brand); border-color:var(--brand); color:var(--on-brand); font-weight:600; }
.ui-bar { display:flex; justify-content:space-between; align-items:center; background:var(--brand); color:var(--on-brand); border-radius:10px; padding:9px 12px; margin-top:6px; } .ui-bar span { font-weight:700; }
.cal-h, .cal-r { display:grid; grid-template-columns:42px repeat(3,1fr); gap:5px; margin-bottom:5px; } .cal-h b { text-align:center; font-size:12px; } .cal-r span { color:var(--muted); font-size:11px; padding-top:6px; }
.cal-r i { font-style:normal; border-radius:6px; padding:8px 6px; font-size:11px; font-weight:600; color:#fff; min-height:34px; } .c0 { background:transparent; border:1px dashed var(--line); } .c1 { background:#0f766e; } .c2 { background:#7c6fd6; } .c3 { background:#d9a441; color:#1c2321 !important; } .c4 { background:#d96b5c; }
.stats { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:10px; } .stats div { background:var(--bg); border:1px solid var(--line); border-radius:10px; padding:8px; min-width:0; } .stats small { display:block; color:var(--muted); font-size:11px; } .stats b { font-size:12.5px; white-space:nowrap; }
.bars2 { display:flex; align-items:flex-end; gap:8px; height:84px; margin:4px 0 8px; } .bars2 i { flex:1; background:var(--brand); border-radius:4px 4px 0 0; opacity:.85; }
.pay-r { display:grid; grid-template-columns:.8fr 1.1fr 1fr .8fr 1.1fr; gap:6px; padding:8px 0; border-top:1px solid var(--line); font-size:12px; } .pay-r.pay-h { border-top:0; color:var(--muted); font-size:11px; } .pay-r b { text-align:right; } .pay-r.pay-h b { font-weight:400; } .pay-r > * { min-width:0; }
@media (max-width:520px) { .pay-r { font-size:10.5px; gap:3px; } }
.grid.shots { grid-template-columns:1fr; } @media (min-width:700px) { .grid.shots { grid-template-columns:repeat(2,minmax(0,1fr)); } }