/* Routine Short shared styles (landing + checkout) · "Đài quan sát" theme */
[hidden]{display:none!important}
:root{color-scheme:dark;
  --paper:oklch(15% 0.016 265); --paper-2:oklch(19% 0.018 265); --paper-3:oklch(24% 0.02 265);
  --well:oklch(12% 0.014 265); --rule:oklch(29% 0.018 265); --rule-2:oklch(40% 0.02 265);
  --ink:oklch(95% 0.012 85); --ink-2:oklch(80% 0.012 85); --ink-3:oklch(66% 0.014 265);
  --accent:oklch(74% 0.16 48); --accent-hi:oklch(80% 0.14 52); --accent-ink:oklch(20% 0.04 48); --accent-soft:oklch(74% 0.16 48 / .14);
  --ok:oklch(76% 0.15 150); --danger:oklch(67% 0.19 25);
  --t-history:oklch(80% 0.14 75); --t-science:oklch(80% 0.12 200); --t-space:oklch(76% 0.15 295); --t-news:oklch(70% 0.19 25);
  --font-display:"Newsreader",Georgia,serif; --font-body:"Be Vietnam Pro",-apple-system,"Segoe UI",sans-serif; --font-mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
  --r-sm:6px; --r-md:10px; --r-lg:16px; --pill:999px; --ease:cubic-bezier(.2,.8,.2,1); --wrap:1160px}
*{box-sizing:border-box} html{scroll-behavior:smooth;scroll-padding-top:72px} html,body{overflow-x:clip}
body{margin:0;font:16px/1.6 var(--font-body);color:var(--ink);background:var(--paper)}
h1,h2,h3{margin:0;font-family:var(--font-display);font-weight:600;letter-spacing:-.015em;text-wrap:balance}
p{margin:0} img{display:block;max-width:100%} a{color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.mono{font-family:var(--font-mono);font-size:12px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}html{scroll-behavior:auto}}

/* buttons, chips */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:var(--pill);padding:13px 24px;font:600 15px/1.2 var(--font-body);cursor:pointer;
  background:var(--accent);color:var(--accent-ink);text-decoration:none;white-space:nowrap;transition:background .14s var(--ease),transform .14s var(--ease)}
.btn:hover{background:var(--accent-hi)} .btn:active{transform:translateY(1px)}
.btn.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--rule-2)} .btn.ghost:hover{background:var(--paper-3)}
.btn.sm{padding:8px 16px;font-size:13px}
.topic{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;padding:3px 9px;border-radius:4px;color:var(--c);background:oklch(10% 0.02 265/.72);backdrop-filter:blur(6px);letter-spacing:.02em}
.topic::before{content:"";width:7px;height:7px;border-radius:2px;background:currentColor}
.h{--c:var(--t-history)} .sc{--c:var(--t-science)} .sp{--c:var(--t-space)} .nw{--c:var(--t-news)}
.kicker{font:600 12px var(--font-body);letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}

/* nav */
.nav{position:sticky;top:0;z-index:20;background:oklch(15% 0.016 265/.82);backdrop-filter:blur(12px);border-bottom:1px solid var(--rule)}
.nav .wrap{display:flex;align-items:center;gap:28px;height:64px}
.brand{display:flex;align-items:baseline;gap:6px;font:700 22px/1 var(--font-display);text-decoration:none}
.brand i{font-style:italic;font-weight:500;color:var(--accent)}
.nav nav{display:flex;gap:22px;margin-left:auto;font-size:14px;color:var(--ink-2)}
.nav nav a{text-decoration:none} .nav nav a:hover{color:var(--ink)}
@media (max-width:860px){.nav nav{display:none}.nav .btn{margin-left:auto}}

/* price: struck list price + sale badge */
.was{text-decoration:line-through;text-decoration-color:var(--danger);text-decoration-thickness:2px;opacity:.7;font-weight:500;margin-right:6px} .btn .was{text-decoration-color:currentColor;opacity:.55}
.sale{display:inline-flex;align-items:center;gap:8px;font:700 14px/1 var(--font-body);color:var(--accent-ink);background:linear-gradient(135deg,var(--accent-hi),var(--accent));border-radius:var(--pill);padding:8px 14px;box-shadow:0 8px 24px -8px oklch(74% 0.16 48/.7);animation:pop 2.4s var(--ease) infinite}
.sale b{font-size:18px} @keyframes pop{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}

footer{border-top:1px solid var(--rule);padding:30px 0 40px;font-size:13px;color:var(--ink-3)}
footer .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}