/* Style dùng chung cho mọi trang.
   Thứ tự nạp bắt buộc: base.css TRƯỚC landing.css/docs.css để override còn thắng.

   HƯỚNG THIẾT KẾ: editorial tối. Ba vai chữ (serif display · sans body · mono số liệu),
   phân cấp bằng đường kẻ mảnh thay vì hộp có viền, và màu nhấn dùng theo NGHĨA:
     --grad  chỉ cho nút tải           --live  chỉ cho trạng thái đang ghi
     --ready chỉ cho quyền/sẵn sàng    --indigo cho liên kết và focus
   Thêm màu trang trí ở chỗ khác là phá hệ thống. */

/* ---------- chữ display: Newsreader 500, self-host, 3 subset ---------- */
/* Chỉ một weight và một optical size (72 = cỡ tiêu đề) để giữ 23.7kb cho khách
   đọc tiếng Anh. Khách tiếng Việt tải thêm 5.1kb. Không dùng font này dưới ~1.5rem
   vì opsz 72 có nét mảnh, cỡ nhỏ sẽ mờ. */
@font-face{font-family:Newsreader;font-style:normal;font-weight:500;font-display:swap;
  src:url("font/nr-latin.woff2?v=0.2.18-4106307890") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Newsreader;font-style:normal;font-weight:500;font-display:swap;
  src:url("font/nr-vi.woff2?v=0.2.18-4106307890") 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:Newsreader;font-style:normal;font-weight:500;font-display:swap;
  src:url("font/nr-latin-ext.woff2?v=0.2.18-4106307890") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ---------- tokens ---------- */
:root{
  /* nền: sâu hơn bản cũ để ảnh sản phẩm sáng nổi hẳn lên */
  --bg:#0B0B0E; --bg-2:#141418;
  --surface:#1A1A1F; --surface-hi:#26262C;
  /* đường kẻ là đơn vị cấu trúc chính của hướng editorial, không phải viền hộp */
  --border:rgba(255,255,255,.09); --border-hi:rgba(255,255,255,.16);
  --text:#F5F5F7; --text-2:#9C9CA6; --text-3:#7C7C86;

  --indigo:#6B5CFA; --violet:#AE51F0;
  /* Tím dùng cho CHỮ NHỎ phải sáng hơn --indigo: 6.06:1 so với 4.25:1 (AA cần
     4.5:1). --indigo giữ nguyên cho gradient, viền và outline focus. */
  --accent-text:#8B7DFF;
  --live:#FF453A; --ready:#30D158;
  --red:var(--live); --green:var(--ready);   /* tên cũ, docs.css còn dùng */
  --grad:linear-gradient(135deg,var(--indigo),var(--violet));

  --font:-apple-system,BlinkMacSystemFont,"SF Pro Text",Inter,system-ui,sans-serif;
  --display:Newsreader,"Iowan Old Style","Palatino Linotype",Georgia,serif;
  --mono:"SF Mono",ui-monospace,Menlo,Consolas,monospace;

  /* thang chữ 5 bậc, khoảng cách giữa các bậc đủ lớn để mắt thấy phân cấp */
  --t-display:clamp(2.5rem,1.1rem + 4.3vw,4.5rem);
  --t-chapter:clamp(1.85rem,.95rem + 2.6vw,3.25rem);
  --t-lead:clamp(1.05rem,.98rem + .42vw,1.3rem);
  --t-spec:.96rem;
  --t-micro:11.5px;

  --r-lg:20px; --r-md:14px; --r-sm:8px;
  /* nhịp dọc KHÔNG đều: chương rộng, khối trong chương hẹp */
  --space:clamp(4rem,3rem + 5vw,8rem);
  --space-chapter:clamp(4.5rem,2.5rem + 5.5vw,7rem);
  --space-tight:clamp(1.5rem,1rem + 2vw,2.75rem);
  --ease:cubic-bezier(.16,1,.3,1);
  /* Lề ngoài của .wrap. Media tràn mép dùng -1 * giá trị này để mép phải/trái của
     khung nằm ĐÚNG cạnh khung nhìn. Không dùng calc(50% - 50vw): trong grid, 50%
     tính theo ô grid chứ không theo .wrap nên khung chạy lố ra ngoài viewport. */
  --gutter:calc((100vw - min(1180px,92vw)) / 2);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font);line-height:1.55;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
img{max-width:100%;display:block}
.wrap{width:min(1180px,92vw);margin:0 auto}
[hidden]{display:none!important}

/* ---------- atmosphere ---------- */
/* Glow nhẹ hơn bản cũ: ảnh sản phẩm giờ là thứ sáng nhất trên trang, không phải nền. */
.glow{position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(58vw 38vw at 12% -12%,rgba(107,92,250,.20),transparent 62%),
    radial-gradient(46vw 32vw at 96% 6%,rgba(174,81,240,.13),transparent 62%),
    radial-gradient(40vw 30vw at 50% 112%,rgba(107,92,250,.09),transparent 62%)}
.grain{position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.055;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
main,header,footer{position:relative;z-index:1}

/* ---------- top bar ---------- */
.top{display:flex;align-items:center;justify-content:space-between;padding:22px 0;
  gap:16px}
.brand{display:flex;align-items:center;gap:10px;font-weight:650;letter-spacing:-.01em;
  text-decoration:none;font-size:15px}
.brand img{width:26px;height:26px;border-radius:7px}
.menu{display:flex;gap:2px;flex-wrap:wrap}
.menu a{font-size:13.5px;font-weight:500;color:var(--text-2);text-decoration:none;
  padding:8px 11px;border-radius:9px;transition:color .2s,background .2s}
.menu a:hover{color:var(--text);background:rgba(255,255,255,.05)}
.menu a:focus-visible{outline:2px solid var(--indigo);outline-offset:2px}
.menu a[aria-current="page"]{color:var(--text);background:var(--surface-hi)}
.lang{display:inline-flex;border:1px solid var(--border);border-radius:999px;padding:3px;
  background:rgba(255,255,255,.03)}
.lang a{font:600 11.5px/1 var(--mono);letter-spacing:.06em;padding:7px 11px;border-radius:999px;
  color:var(--text-3);text-decoration:none;transition:background .2s,color .2s}
.lang a[aria-current="true"]{background:var(--surface-hi);color:var(--text)}
.lang a:hover{color:var(--text)}
.lang a:focus-visible{outline:2px solid var(--indigo);outline-offset:2px}
@media (max-width:820px){
  .top{flex-wrap:wrap;gap:10px}
  .menu{order:3;flex-basis:100%}
}

/* ---------- nút tải: nơi DUY NHẤT dùng --grad ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font-weight:650;
  font-size:1rem;padding:16px 26px;border-radius:13px;background:var(--grad);color:#fff;
  box-shadow:0 12px 34px -12px rgba(107,92,250,.75),inset 0 1px 0 rgba(255,255,255,.28);
  transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.btn:hover{transform:translateY(-2px);
  box-shadow:0 20px 44px -14px rgba(107,92,250,.9),inset 0 1px 0 rgba(255,255,255,.28)}
.btn:active{transform:translateY(0)}
.btn:focus-visible{outline:2px solid #fff;outline-offset:3px}
.btn svg{width:18px;height:18px}

/* nút phụ: chỉ đường kẻ, không nền — để --grad giữ được sức nặng */
.btn-ghost{display:inline-flex;align-items:center;gap:8px;text-decoration:none;font-weight:550;
  font-size:.95rem;padding:15px 20px;border-radius:13px;color:var(--text);
  border:1px solid var(--border);transition:border-color .25s,background .25s,transform .25s var(--ease)}
.btn-ghost:hover{border-color:var(--border-hi);background:rgba(255,255,255,.04);transform:translateY(-2px)}
.btn-ghost:focus-visible{outline:2px solid var(--indigo);outline-offset:3px}

/* ---------- chữ ---------- */
section{padding:var(--space) 0}
h1,h2{font-family:var(--display);font-weight:500;letter-spacing:-.022em;
  font-feature-settings:"liga" 1,"kern" 1}
h2{font-size:var(--t-chapter);line-height:1.04;margin:0 0 14px}
.kicker{font:600 var(--t-micro)/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-3);margin-bottom:14px}
.sub{color:var(--text-2);max-width:58ch;margin:0 0 42px;font-size:var(--t-lead)}
kbd{font:600 11.5px/1 var(--mono);color:var(--text);background:var(--surface-hi);
  border:1px solid var(--border);border-bottom-width:2px;border-radius:6px;padding:7px 9px;
  white-space:nowrap}

/* ---------- reveal: class .in do site.js gắn khi vào khung nhìn ---------- */
/* Bản cũ dùng .reveal:nth-child(2..4) nên chỉ 4 phần tử đầu trang có hiệu ứng và
   mọi section phía dưới không bao giờ được reveal. */
@media (prefers-reduced-motion:no-preference){
  html.js [data-reveal]{opacity:0;transform:translateY(18px);
    transition:opacity .7s var(--ease),transform .7s var(--ease);
    transition-delay:calc(var(--i,0) * 70ms)}
  html.js [data-reveal].in{opacity:1;transform:none}
}

/* ---------- danh sách editorial (trang chủ + trang hub) ---------- */
/* Thay cho lưới thẻ có viền: hàng phân cách bằng kẻ mảnh, số thứ tự mono,
   tiêu đề serif. Dùng ở cả landing và hub nên phải nằm ở base.css. */
.guidelist{border-top:1px solid var(--border);margin-top:clamp(2rem,4vw,3rem)}
.guidelist a{display:grid;grid-template-columns:2.4rem 1fr auto;gap:0 14px;align-items:start;
  padding:24px 0;border-bottom:1px solid var(--border);text-decoration:none;
  transition:padding-left .3s var(--ease)}
.guidelist a:hover{padding-left:8px}
.guidelist i{font:600 11px/1 var(--mono);color:var(--text-3);font-style:normal;
  letter-spacing:.06em;padding-top:.5em;transition:color .3s}
.guidelist a:hover i{color:var(--accent-text)}
.guidelist h2,.guidelist h3{font-family:var(--display);font-weight:500;font-size:1.3rem;letter-spacing:-.015em;
  margin:0 0 5px}
.guidelist p{margin:0;color:var(--text-2);font-size:.93rem;max-width:62ch}
.guidelist .arw{align-self:center;width:20px;height:20px;stroke:var(--text-3);fill:none;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;transition:stroke .3s,transform .3s var(--ease)}
.guidelist a:hover .arw{stroke:var(--text);transform:translateX(5px)}
.guidelist a:focus-visible{outline:2px solid var(--indigo);outline-offset:4px;border-radius:6px}

@media (max-width:720px){
  .guidelist a{grid-template-columns:2rem 1fr;padding:20px 0}
  .guidelist .arw{display:none}
}

/* ---------- footer ---------- */
footer{padding:44px 0 64px;color:var(--text-3);font-size:13px;display:flex;
  justify-content:space-between;gap:12px;flex-wrap:wrap;border-top:1px solid var(--border)}
footer .note{flex-basis:100%;font-size:12px;opacity:.7}
.fnav{flex-basis:100%;display:flex;gap:16px;flex-wrap:wrap;padding-bottom:18px;
  margin-bottom:6px;border-bottom:1px solid var(--border)}
.fnav a{color:var(--text-2);text-decoration:none;font-size:13px}
.fnav a:hover{color:var(--text)}