/* Trang giới thiệu / đăng ký — màu thương hiệu Tulia (xanh rêu, be tulip), cùng bộ token với ứng dụng */
:root{
  --bg:#F6F2EC;--surface:#FFFDF9;--surface-2:#EFE9E0;--line:#E2DACE;--line-strong:#CDC2B2;
  --fg:#1C1C1A;--fg-2:#4F4A42;--fg-3:#6E675C;
  --primary:#2E4739;--primary-2:#3D5C4A;--primary-ink:#fff;--primary-soft:#E2E9E2;
  --deep:#16261D;--deep-fg:#ECE7DF;--deep-fg-2:#B8C4BB;
  --gold:#8A6A47;--tulip:#F2D6AE;--bad:#B03A2A;--bad-soft:#F8E1DC;--ok:#3E7A57;--ok-soft:#E2F0E7;
  --shadow:0 1px 2px rgba(28,28,26,.05),0 8px 28px rgba(46,71,57,.08);
  --f-display:"Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-brand:"Cormorant Garamond",Georgia,serif;
  --r:14px;color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#121613;--surface:#1A201C;--surface-2:#212923;--line:#2C3630;--line-strong:#3B473F;
  --fg:#ECE7DF;--fg-2:#C2BAAE;--fg-3:#9A9387;--primary:#8DB89E;--primary-2:#A4C9B2;--primary-ink:#121613;--primary-soft:#22332A;
  --deep:#0B100D;--deep-fg:#ECE7DF;--deep-fg-2:#A9B6AD;--gold:#CDAE86;--bad:#EE8C7C;--bad-soft:#3B1D18;--ok:#78C496;--ok-soft:#1B3325;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 28px rgba(0,0,0,.3);color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#121613;--surface:#1A201C;--surface-2:#212923;--line:#2C3630;--line-strong:#3B473F;
  --fg:#ECE7DF;--fg-2:#C2BAAE;--fg-3:#9A9387;--primary:#8DB89E;--primary-2:#A4C9B2;--primary-ink:#121613;--primary-soft:#22332A;
  --deep:#0B100D;--deep-fg:#ECE7DF;--deep-fg-2:#A9B6AD;--gold:#CDAE86;--bad:#EE8C7C;--bad-soft:#3B1D18;--ok:#78C496;--ok-soft:#1B3325;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 28px rgba(0,0,0,.3);color-scheme:dark}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:80px}
body{margin:0;background:var(--bg);color:var(--fg);font:15px/1.6 var(--f-display);-webkit-font-smoothing:antialiased}
a{color:var(--primary)}
img{max-width:100%;display:block}
button,input,select,textarea{font:inherit;color:inherit}
button,[role=button],a.btn,label.opt,summary{cursor:pointer}
.wrap{width:min(1200px,100%);margin-inline:auto;padding-inline:16px}
svg.i{width:20px;height:20px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* thanh trên */
.top{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);padding-top:env(safe-area-inset-top)}
.top .wrap{display:flex;align-items:center;gap:14px;height:64px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--fg)}
.brand img{height:34px;width:auto}
.brand b{font-family:var(--f-brand);font-size:26px;font-weight:700;letter-spacing:.02em;line-height:1}
.brand small{display:block;font-size:11px;color:var(--fg-3);letter-spacing:.08em;text-transform:uppercase}
.nav{display:flex;gap:4px;margin-left:auto}
.nav a{padding:8px 12px;border-radius:9px;text-decoration:none;color:var(--fg-2);font-weight:600;font-size:14px}
.nav a:hover{background:var(--surface-2);color:var(--fg)}
.iconbtn{width:40px;height:40px;border-radius:10px;border:1px solid var(--line);background:var(--surface);display:grid;place-items:center;color:var(--fg-2)}
.iconbtn:hover{color:var(--fg);border-color:var(--line-strong)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 18px;border-radius:11px;border:1px solid var(--line-strong);background:var(--surface);color:var(--fg);font-weight:700;text-decoration:none;font-size:14.5px;white-space:nowrap}
.btn:hover{border-color:var(--fg-3)}
.btn.pri{background:var(--primary);border-color:var(--primary);color:var(--primary-ink)}
.btn.pri:hover{background:var(--primary-2);border-color:var(--primary-2)}
.btn.sm{height:38px;padding:0 14px;font-size:13.5px}
.btn:disabled{opacity:.6;cursor:not-allowed}
.top .btn{height:40px}

/* hero */
.hero{padding:56px 0 40px}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:40px;align-items:center}
.hero h1{font-family:var(--f-brand);font-weight:700;font-size:clamp(36px,5vw,60px);line-height:1.05;margin:0 0 16px;letter-spacing:-.01em}
.hero h1 em{font-style:italic;color:var(--primary)}
.hero p.lead{font-size:17px;color:var(--fg-2);margin:0 0 24px;max-width:58ch}
.cta{display:flex;gap:10px;flex-wrap:wrap}
.enter{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:22px;display:flex;flex-direction:column;gap:14px}
.enter h2{margin:0;font-size:18px}
.enter .muted{font-size:13.5px}
.field{display:flex;align-items:center;gap:8px;height:48px;padding:0 12px;border:1px solid var(--line-strong);border-radius:11px;background:var(--surface)}
.field:focus-within{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft)}
.field input,.field select{flex:1;min-width:0;border:0;outline:0;background:transparent;height:100%}
.field .pre{color:var(--fg-3);font-size:13.5px;white-space:nowrap}
.field svg.i{color:var(--fg-3)}
.muted{color:var(--fg-3)}
.err{color:var(--bad);font-size:13px;min-height:1em}
.trust{display:flex;gap:18px;flex-wrap:wrap;margin-top:22px;color:var(--fg-2);font-size:13.5px}
.trust span{display:flex;gap:6px;align-items:center}
.trust svg.i{color:var(--ok);width:18px;height:18px}

/* khối */
.sec{padding:56px 0}
.sec.alt{background:var(--surface)}
.sec h2.t{font-family:var(--f-brand);font-size:clamp(28px,3.4vw,40px);margin:0 0 8px;line-height:1.15}
.sec p.d{color:var(--fg-2);margin:0 0 28px;max-width:70ch}
.feat{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.feat .c{background:var(--bg);border:1px solid var(--line);border-radius:var(--r);padding:18px;display:flex;flex-direction:column;gap:8px}
.sec:not(.alt) .feat .c{background:var(--surface)}
.feat .ic{width:42px;height:42px;border-radius:12px;background:var(--primary-soft);color:var(--primary);display:grid;place-items:center}
.feat h3{margin:0;font-size:16px}
.feat ul{margin:0;padding-left:18px;color:var(--fg-2);font-size:14px}
.split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.split .c{border-radius:var(--r);padding:24px;border:1px solid var(--line);background:var(--surface)}
.split .c.dk{background:var(--deep);color:var(--deep-fg);border-color:var(--deep)}
.split .c.dk p,.split .c.dk li{color:var(--deep-fg-2)}
.split h3{margin:0 0 8px;font-size:20px}
.split ul{margin:10px 0 0;padding-left:18px}

/* bảng giá */
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.plan{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:22px;display:flex;flex-direction:column;gap:10px}
.plan.hl{border-color:var(--primary);box-shadow:0 0 0 2px var(--primary-soft)}
.plan h3{margin:0;font-size:17px}
.plan .p{font-family:var(--f-brand);font-size:38px;font-weight:700;line-height:1}
.plan .p small{font-family:var(--f-display);font-size:14px;font-weight:500;color:var(--fg-3)}
.plan ul{list-style:none;padding:0;margin:4px 0 8px;display:flex;flex-direction:column;gap:6px;color:var(--fg-2);font-size:14px}
.plan li{display:flex;gap:8px;align-items:flex-start}.plan li svg.i{color:var(--ok);width:18px;height:18px;margin-top:2px}
.plan .btn{margin-top:auto}

/* dải cuối + chân trang */
.band{background:var(--deep);color:var(--deep-fg);padding:48px 0}
.band .wrap{display:flex;gap:20px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.band h2{font-family:var(--f-brand);font-size:clamp(26px,3vw,36px);margin:0}
.band p{margin:6px 0 0;color:var(--deep-fg-2)}
.band .btn.pri{background:var(--tulip);border-color:var(--tulip);color:#16261D}
footer.ft{padding:28px 0 36px;color:var(--fg-3);font-size:13.5px;border-top:1px solid var(--line)}
footer.ft .wrap{display:flex;gap:12px;justify-content:space-between;flex-wrap:wrap}

/* form đăng ký */
.reg{padding:36px 0 56px}
.reg .wrap{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:32px;align-items:start}
.reg aside h1{font-family:var(--f-brand);font-size:clamp(32px,4vw,46px);line-height:1.1;margin:0 0 10px}
.reg aside ul{padding-left:18px;color:var(--fg-2)}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:24px}
.fg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 14px}
.fg .full{grid-column:1/-1}
.grp{grid-column:1/-1;font-weight:700;font-size:13px;color:var(--fg-2);padding-top:6px;border-top:1px solid var(--line);margin-top:4px}
.grp:first-child{border-top:0;padding-top:0;margin-top:0}
.fe{display:flex;flex-direction:column;gap:4px;min-width:0}
.fe .err{min-height:0}
.has-err .field{border-color:var(--bad)}
.opts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.opts.two{grid-template-columns:repeat(2,minmax(0,1fr))}
label.opt{display:flex;gap:10px;align-items:flex-start;padding:12px;border:1px solid var(--line-strong);border-radius:11px;background:var(--surface)}
label.opt:has(input:checked){border-color:var(--primary);background:var(--primary-soft)}
label.opt input{margin-top:4px;accent-color:var(--primary)}
label.opt b{display:block;font-size:14px}label.opt span{font-size:12.5px;color:var(--fg-3)}
.sw{display:flex;gap:12px;align-items:center;padding:12px;border:1px solid var(--line);border-radius:11px}
.sw input{position:absolute;opacity:0;width:1px;height:1px}
.sw .tr{width:42px;height:24px;border-radius:99px;background:var(--line-strong);position:relative;flex:0 0 auto;transition:background .15s}
.sw .tr::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.25);transition:transform .15s}
.sw input:checked+.tr{background:var(--primary)}.sw input:checked+.tr::after{transform:translateX(18px)}
.sw input:focus-visible+.tr{outline:2px solid var(--gold);outline-offset:2px}
.sw b{display:block;font-size:14px}.sw span.s{font-size:12.5px;color:var(--fg-3)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* thanh dưới điện thoại */
.bnav{display:none}
@media (max-width:860px){
  .nav,.top .hide-m{display:none}
  .hero{padding:28px 0 24px}.hero .wrap,.reg .wrap{grid-template-columns:minmax(0,1fr);gap:24px}
  .feat{grid-template-columns:repeat(2,minmax(0,1fr))}.split{grid-template-columns:minmax(0,1fr)}
  .sec{padding:40px 0}
  body{padding-bottom:calc(66px + env(safe-area-inset-bottom))}
  .bnav{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));position:fixed;left:0;right:0;bottom:0;z-index:50;background:var(--surface);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom);box-shadow:0 -4px 18px rgba(0,0,0,.06)}
  .bnav a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;height:62px;text-decoration:none;color:var(--fg-3);font-size:11px;font-weight:600}
  .bnav a.on{color:var(--primary)}.bnav a.on svg.i{stroke-width:2.3}
}
@media (max-width:560px){.feat{grid-template-columns:minmax(0,1fr)}.fg,.opts,.opts.two{grid-template-columns:minmax(0,1fr)}.card{padding:18px}.brand small{display:none}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}