*, *::before, *::after { box-sizing:border-box; }
:root {
  --primary:#1E2D26; --fg:#1E2D26; --fg-strong:#14201A; --lead-fg:#33433B; --muted-fg:#4F5E56;
  --accent:#1F6593; --accent-hover:#195176; --on-accent:#FFFFFF; --ring:#2882BD;
  --sky:#D7EFFF; --bg:#FFFFFF; --band:#F0EEE9; --card:#FFFFFF; --muted:#EEF2EF; --sage:#A8B8AD;
  --border:#E4E0D5; --border-strong:#6F8276; --danger:#9B2C2C;
  --font:'Nunito','Be Vietnam Pro',system-ui,sans-serif;
  --ease-out:cubic-bezier(.16,1,.3,1);
  color-scheme:light; accent-color:var(--accent);
}
html { scroll-behavior:smooth; }
body { margin:0; background:var(--bg); color:var(--fg); font-family:var(--font); font-size:18px; line-height:1.6; letter-spacing:.006em; -webkit-font-smoothing:antialiased; }
a { color:var(--accent); text-underline-offset:.2em; text-decoration-thickness:2px; }
:focus-visible { outline:3px solid var(--ring); outline-offset:3px; border-radius:6px; }
.container { max-width:1120px; margin:0 auto; padding:0 20px; }
@media (min-width:768px){ .container{ padding:0 48px; } }
h1, h2, h3 { text-wrap:balance; color:var(--fg-strong); }
h1 { font-weight:900; font-size:clamp(34px,4.6vw,54px); line-height:1.08; letter-spacing:-.02em; margin:0 0 12px; }
h2 { font-weight:900; font-size:24px; line-height:1.2; margin:0 0 12px; }
.lead { color:var(--lead-fg); font-weight:600; font-size:20px; max-width:46ch; margin:0; }
.note { font-size:14px; color:var(--muted-fg); margin:10px 0 0; letter-spacing:.03em; }
.sr-only { position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; padding:0; }

.site-nav { position:sticky; top:0; z-index:20; background:#fff; border-bottom:1px solid var(--border); }
.nav { display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:64px; }
.logo { min-height:48px; display:flex; align-items:center; gap:10px; font-weight:900; font-size:22px; letter-spacing:-.01em; color:var(--fg-strong); text-decoration:none; }
.logo img { width:40px; height:40px; display:block; flex:none; }
.nav-links { display:flex; align-items:center; gap:8px; }
.nav-link { font-weight:800; font-size:16px; color:var(--fg-strong); text-decoration:none; display:inline-flex; align-items:center; gap:6px; min-height:48px; padding:0 10px; border-radius:999px; }
.nav-link:hover { color:var(--accent); }
.cart-link { position:relative; }
.cart-link .count { min-width:22px; height:22px; padding:0 6px; border-radius:999px; background:var(--accent); color:#fff; font-size:13px; font-weight:900; display:inline-grid; place-items:center; }
.cart-link .count[hidden] { display:none; }

.btn { font:800 19px/1.2 var(--font); min-height:56px; padding:15px 28px; border-radius:999px; border:2px solid transparent; background:var(--accent); color:var(--on-accent); cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; justify-content:center; gap:10px; box-shadow:0 6px 16px color-mix(in srgb, var(--accent) 30%, transparent); transition:transform 200ms var(--ease-out), background 200ms var(--ease-out); }
.btn:hover { background:var(--accent-hover); transform:translateY(-2px); }
.btn:active { transform:scale(.98); }
.btn[disabled], .btn[aria-disabled="true"] { opacity:.55; cursor:not-allowed; transform:none; }
.btn.ghost { background:var(--card); color:var(--fg-strong); border-color:var(--fg-strong); box-shadow:none; }
.btn.ghost:hover { background:var(--muted); }
.btn.block { width:100%; }
.btn.sm { min-height:48px; padding:10px 20px; font-size:16px; }
.textbtn { background:none; border:0; font:800 16px var(--font); color:var(--muted-fg); text-decoration:underline; cursor:pointer; min-height:48px; padding:0 8px; }
.textbtn:hover { color:var(--danger); }

.page-head { padding:40px 0 28px; background:linear-gradient(180deg,#DCEEFB 0%,#EEF7FD 100%); border-bottom:1px solid #CFE3F1; }
main { min-height:60vh; }
.section { padding:40px 0 80px; }

/* toggle chu ky */
.cycle { display:inline-flex; gap:4px; padding:4px; border:1.5px solid var(--border-strong); border-radius:999px; background:#fff; margin-bottom:28px; }
.cycle button { font:800 16px var(--font); min-height:48px; padding:0 22px; border:0; border-radius:999px; background:transparent; color:var(--fg-strong); cursor:pointer; }
.cycle button[aria-pressed="true"] { background:var(--primary); color:#fff; }
.cycle .save { font-size:13px; font-weight:800; margin-left:6px; color:var(--accent); }
.cycle button[aria-pressed="true"] .save { color:#C9D4CD; }

.plans { display:grid; grid-template-columns:1fr; gap:16px; }
@media (min-width:860px){ .plans{ grid-template-columns:1fr 1fr; gap:24px; } }
.plan { border:1px solid var(--border); border-radius:24px; padding:28px; background:var(--card); display:flex; flex-direction:column; gap:10px; }
.plan.feature { background:var(--sky); border-color:var(--sky); }
.plan h2 { margin:0; font-size:26px; }
.plan .price { font-weight:900; font-size:40px; line-height:1.1; color:var(--fg-strong); letter-spacing:-.02em; }
.plan .price small { font-size:17px; font-weight:700; color:var(--muted-fg); letter-spacing:0; }
.plan ul { margin:6px 0 10px; padding:0; list-style:none; display:grid; gap:8px; color:var(--lead-fg); }
.plan li { display:flex; gap:10px; align-items:flex-start; }
.plan li i { color:var(--accent); font-size:20px; margin-top:4px; flex:none; }
.plan .qtyrow { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:auto; }
.plan .actions { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }

.qty { display:inline-flex; align-items:center; border:1.5px solid var(--border-strong); border-radius:999px; background:#fff; }
.qty button { width:48px; height:48px; border:0; background:none; font:800 22px var(--font); cursor:pointer; border-radius:999px; color:var(--fg-strong); }
.qty button:hover { background:var(--muted); }
.qty button:disabled { opacity:.35; cursor:not-allowed; }
.qty output { min-width:32px; text-align:center; font-weight:800; }

/* layout gio hang / thanh toan */
.cols { display:grid; grid-template-columns:1fr; gap:28px; align-items:start; }
@media (min-width:900px){ .cols{ grid-template-columns:1.5fr 1fr; gap:48px; } }
.card { border:1px solid var(--border); border-radius:24px; padding:24px; background:var(--card); }
.summary { background:var(--band); border-color:transparent; position:sticky; top:84px; }
.line { display:grid; grid-template-columns:1fr auto; gap:6px 16px; padding:18px 0; border-bottom:1px solid var(--border); }
.line:first-child { padding-top:0; }
.line:last-child { border-bottom:0; padding-bottom:0; }
.line .name { font-weight:800; color:var(--fg-strong); }
.line .meta { font-size:15px; color:var(--muted-fg); }
.line .sum { font-weight:900; text-align:right; white-space:nowrap; }
.line .ctrl { grid-column:1 / -1; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.row { display:flex; justify-content:space-between; gap:16px; padding:6px 0; }
.row.total { border-top:1.5px solid var(--border-strong); margin-top:10px; padding-top:14px; font-weight:900; font-size:22px; color:var(--fg-strong); }
.empty { text-align:center; padding:56px 20px; }
.empty i { font-size:48px; color:var(--border-strong); }

/* form */
.grid2 { display:grid; grid-template-columns:1fr; gap:16px; }
@media (min-width:640px){ .grid2{ grid-template-columns:1fr 1fr; } .span2{ grid-column:1 / -1; } }
.field label { display:block; font-weight:800; font-size:15px; color:var(--fg-strong); margin-bottom:6px; letter-spacing:.02em; }
.field label .opt { font-weight:600; color:var(--muted-fg); }
.field input, .field textarea { width:100%; font:400 18px var(--font); min-height:52px; padding:12px 16px; border:1.5px solid var(--border-strong); border-radius:12px; background:#fff; color:var(--fg); }
.field textarea { min-height:96px; resize:vertical; }
.field input:focus, .field textarea:focus { outline:3px solid var(--ring); outline-offset:1px; border-color:var(--primary); }
.field .hint { font-size:14px; color:var(--muted-fg); margin-top:6px; }
.field .err { font-size:14px; font-weight:700; color:var(--danger); margin-top:6px; display:none; }
.field.invalid input, .field.invalid textarea { border-color:var(--danger); }
.field.invalid .err { display:block; }
.check { display:flex; gap:12px; align-items:flex-start; font-size:16px; color:var(--lead-fg); }
.check input { width:24px; height:24px; margin-top:3px; flex:none; }
.check.invalid { color:var(--danger); font-weight:700; }
.hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.alert { border-radius:12px; padding:14px 16px; font-weight:700; background:var(--band); color:var(--danger); margin:0 0 16px; display:none; }
.alert.show { display:block; }

/* tra tien */
.pay { display:grid; grid-template-columns:1fr; gap:28px; align-items:start; }
@media (min-width:760px){ .pay{ grid-template-columns:320px 1fr; } }
.qr { width:100%; max-width:320px; height:auto; border-radius:16px; border:1px solid var(--border); background:#fff; display:block; margin:0 auto; }
.bank { display:grid; gap:2px; margin:0; }
.bank dt { font-size:14px; font-weight:800; color:var(--muted-fg); letter-spacing:.03em; margin-top:12px; }
.bank dd { margin:0; font-weight:800; font-size:20px; color:var(--fg-strong); display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.copy { font:800 14px var(--font); min-height:44px; padding:0 14px; border:1.5px solid var(--border-strong); border-radius:999px; background:#fff; color:var(--fg-strong); cursor:pointer; }
.copy:hover { border-color:var(--accent); }
.badge { display:inline-flex; align-items:center; gap:8px; font-weight:900; padding:6px 14px; border-radius:999px; font-size:15px; }
.badge.pending { background:var(--band); color:var(--fg-strong); }
.badge.paid { background:var(--primary); color:var(--bg); }
.badge.cancelled { background:var(--muted); color:var(--muted-fg); }

footer { padding:28px 0 48px; color:var(--muted-fg); font-size:15px; border-top:1px solid var(--border); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.001ms !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}