/* thichvenha.com — trang chủ /home, /sanpham, /sanpham/<sp>, /huongdan, /huongdan/tag: cùng giao diện với trang đăng nhập (src/pages.js, kiểu ERP thienoi.vn):
   nền xanh đen + lưới 60 px mờ + quầng tối viền + chòm sao (galaxy.js), viền xanh lơ mờ, nút viên thuốc. Màu đồng #c19378 = chữ "về" của logo.
   2 chế độ: TỐI (mặc định) · SÁNG (html[data-theme="light"], nút mặt trời / mặt trăng trên thanh trên — theme.js + site.js, nhớ ở localStorage tvn_theme).
   Mọi màu đi qua biến dưới đây; chế độ sáng dùng lại đúng các màu của chế độ tối (xanh lơ, đồng, xanh đen) chỉ đổi độ sáng.
   .top / .dark-scope / .foot / .demo: luôn giữ màu tối kể cả ở chế độ sáng (thanh trên cho logo nổi, chân trang, khung xem mẫu 3D, khung hình thử…). */
:root, .top, .dark-scope, .foot, .demo, .hero, .sp-hero, .plan.hot, .cta-band, .side-card {
  --bg:#020617; --page:#03081f;
  /* khối tối có chủ đích — học cách NamO: nền gần đen, 2 quầng sáng mờ ở 2 góc (xanh lơ trên trái, đồng dưới phải) + lưới 60 px;
     thẻ nhỏ chuyển sắc rất nhẹ giữa 2 tông tối (đồng nâu → xanh đen), không có tông sáng nào chạm vào */
  --band:
    radial-gradient(ellipse 60% 75% at 0% 0%, rgba(34,211,238,.20), transparent 70%),
    radial-gradient(ellipse 55% 70% at 100% 100%, rgba(193,147,120,.18), transparent 70%),
    linear-gradient(rgba(56,189,248,.07) 1px, transparent 1px) 0 0 / 60px 60px,
    linear-gradient(90deg, rgba(56,189,248,.07) 1px, transparent 1px) 0 0 / 60px 60px,
    #050f28;
  --g-warm:
    radial-gradient(ellipse 65% 55% at 100% 0%, rgba(193,147,120,.30), transparent 70%),
    linear-gradient(150deg, #2b1d17 0%, #0a1230 100%);
  --g-cool: linear-gradient(140deg, #0c1a36 0%, #050b1c 100%);
  --page-grad: linear-gradient(180deg, #03081f 0%, #05102a 30%, #07132e 50%, #05102a 70%, #03081f 100%);
  --vignette: radial-gradient(ellipse 80% 70% at 50% 40%, transparent 0%, #020617 100%);
  --accent:#22d3ee; --cu:#c19378; --on-cu:#03081f;
  --text:#e2e8f0; --strong:#fff; --muted:#94a3b8;
  --line:rgba(34,211,238,.12); --line2:rgba(34,211,238,.30);
  --card-bg:transparent; --card-img: radial-gradient(ellipse at center, rgba(10,18,40,.55), rgba(2,6,23,.75));
  --solid:#050d24; --thumb:#06122b; --head:rgba(3,8,31,.72); --overlay:rgba(3,8,31,.8);
  --hover:rgba(34,211,238,.08); --hover2:rgba(34,211,238,.12);
  --pri-bg:rgba(34,211,238,.14); --pri-bd:rgba(34,211,238,.38); --pri-fg:#fff; --pri-hover:rgba(34,211,238,.22); --pri-shadow:none;
  --glow:0 8px 30px rgba(34,211,238,.15); --shadow:none;
  --field:rgba(2,6,23,.6); --field-bd:rgba(148,163,184,.22); --err-fg:#fca5a5;
  --galaxy:.4; --grid:.04; --grid-c:rgba(56,189,248,.4);
  color-scheme: dark;
}
/* chế độ sáng (5/11/2026, học theo namoacademy.studio): nền trắng ngà, chữ gần đen, viền xám ấm 1 px, thẻ trắng bóng rất nhẹ,
   nút chính đen đặc. Thanh trên sáng trong mờ. Khối tối có chủ đích (đầu trang chủ, đầu trang sản phẩm, gói mua, khối kêu gọi
   cuối trang .cta-band) = nền xanh đen + lưới 60 px của chính site (--band, giống chế độ tối), chân trang xanh đen. Phần thêm cho chế độ sáng ở cuối file ("Chế độ sáng — chi tiết"). */
:root[data-theme="light"], :root[data-theme="light"] .top {
  --bg:#fafaf9; --page:#fafaf9;
  --page-grad: none;
  --vignette: none;
  --accent:#0e7490; --cu:#9c6a4f; --on-cu:#fff;
  --text:#3f3f46; --strong:#0a0a0a; --muted:#636366;
  --line:#e7e5e4; --line2:#cfcac6;
  --card-bg:#fff; --card-img:none;
  --solid:#fff; --thumb:#f4f4f3; --head:rgba(250,250,249,.8); --overlay:rgba(255,255,255,.92);
  --hover:rgba(10,10,10,.045); --hover2:rgba(10,10,10,.065);
  --pri-bg:#0a0a0a; --pri-bd:#0a0a0a; --pri-fg:#fff; --pri-hover:#2a2a2e;
  --pri-shadow:0 1px 2px rgba(0,0,0,.14), 0 8px 18px -8px rgba(0,0,0,.45);
  --glow:0 28px 56px -28px rgba(24,20,40,.30); --shadow:0 1px 2px rgba(24,20,40,.04);
  --field:#fff; --field-bd:#d6d3d1; --err-fg:#b91c1c;
  --galaxy:.3; --grid:.06; --grid-c:rgba(8,145,178,.45);
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display:none !important; }                /* .btn (inline-flex) không được đè thuộc tính hidden */
html { background:var(--page); scroll-behavior:smooth; }
body { margin:0; min-height:100vh; color:var(--text); font: 16px/1.65 "Be Vietnam Pro", Inter, "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  background: var(--page-grad) fixed; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
body::after { content:''; position:fixed; inset:0; z-index:0; pointer-events:none; background: var(--vignette); }
#galaxy-canvas { position:fixed; inset:0; width:100%; height:100%; pointer-events:none; z-index:0; opacity:var(--galaxy); }
.grid-overlay { position:fixed; inset:0; opacity:var(--grid); pointer-events:none; z-index:0; background-size:60px 60px;
  background-image: linear-gradient(var(--grid-c) 1px, transparent 1px), linear-gradient(90deg, var(--grid-c) 1px, transparent 1px); }
a { color:inherit; }
img { max-width:100%; }
.page { position:relative; z-index:1; }
.in { width:min(100% - 32px, 1120px); margin:0 auto; }
/* logo (chữ xám sáng + "về" màu đồng, nền trong): logo lớn giữa trang nằm trên dải tối nên không đảo;
   logo trên thanh trên đảo sáng / tối ở chế độ sáng (thanh trên sáng), giữ nguyên tông màu. */
:root[data-theme="light"] .top .brand img { filter: invert(1) hue-rotate(180deg) brightness(.62) contrast(1.6); }

/* ---------- thanh trên cùng (tối ở chế độ tối · sáng trong mờ ở chế độ sáng) ---------- */
.top { position:sticky; top:0; z-index:20; background:var(--head); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-bottom:1px solid var(--line); }
:root[data-theme="light"] .top { backdrop-filter:blur(16px) saturate(1.4); -webkit-backdrop-filter:blur(16px) saturate(1.4); }
.top .in { display:flex; align-items:center; gap:18px; height:64px; }
.brand { display:flex; align-items:center; flex:none; }
.brand img { height:30px; width:auto; display:block; }
.nav { display:flex; gap:4px; margin-right:auto; }
.nav a { padding:8px 12px; border-radius:999px; color:var(--muted); text-decoration:none; font-size:14.5px; font-weight:500; }
.nav a:hover, .nav a[aria-current="page"] { color:var(--strong); background:var(--hover); }
.auth { display:flex; align-items:center; gap:8px; min-height:40px; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:10px; height:40px; padding:0 18px; border-radius:999px; border:1px solid var(--line);
  background:transparent; color:var(--text); font-family:inherit; font-size:14px; font-weight:600; line-height:1; text-decoration:none; cursor:pointer; white-space:nowrap; transition:all .25s ease; }
.btn:hover { background:var(--hover2); border-color:var(--line2); box-shadow:var(--glow); }
.btn.pri { background:var(--pri-bg); border-color:var(--pri-bd); color:var(--pri-fg); box-shadow:var(--pri-shadow); }
.btn.pri:hover { background:var(--pri-hover); }
.btn.big { height:50px; padding:0 26px; font-size:15px; }
.btn[disabled] { opacity:.5; cursor:not-allowed; box-shadow:none; background:transparent; }
.btn:focus-visible, .nav a:focus-visible, .ib:focus-visible, .card-sp:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.ib { width:40px; height:40px; display:grid; place-items:center; border-radius:999px; border:1px solid var(--line); background:transparent; color:var(--muted); cursor:pointer; text-decoration:none; }
.ib:hover { color:var(--strong); border-color:var(--line2); background:var(--hover); }
.ib svg { width:18px; height:18px; }
/* đã đăng nhập: tên (không ảnh đại diện) → /app */
.me { display:flex; align-items:center; gap:8px; height:40px; padding:0 14px 0 6px; border-radius:999px; border:1px solid var(--line); text-decoration:none; }
.me:hover { border-color:var(--line2); background:var(--hover); }
.me .av { width:28px; height:28px; border-radius:50%; display:grid; place-items:center; background:rgba(193,147,120,.22); color:var(--cu); }
.me .av svg { width:16px; height:16px; }
.me span { font-size:14px; max-width:160px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--text); }
/* nút chế độ sáng / tối: đang tối hiện mặt trời (bấm → sáng), đang sáng hiện mặt trăng (bấm → tối) */
.theme-t svg { display:none; }
:root:not([data-theme="light"]) .theme-t .sun, :root[data-theme="light"] .theme-t .moon { display:block; }

/* ---------- khối chung ---------- */
section { padding:72px 0; }
.eyebrow { display:inline-block; font-size:12px; letter-spacing:.22em; text-transform:uppercase; color:var(--cu); font-weight:600; margin-bottom:12px; }
h1, h2, h3 { color:var(--strong); line-height:1.2; margin:0; }
h1 { font-size:clamp(32px, 5vw, 54px); font-weight:800; letter-spacing:-.02em; }
h2 { font-size:clamp(26px, 3.4vw, 36px); font-weight:750; letter-spacing:-.01em; margin-bottom:12px; }
h3 { font-size:18px; font-weight:700; margin-bottom:6px; }
.lead { font-size:clamp(16px, 1.6vw, 19px); color:var(--muted); max-width:640px; margin:16px 0 0; }
.muted { color:var(--muted); }
.cta { display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }
.center { text-align:center; } .center .lead { margin-left:auto; margin-right:auto; } .center .cta { justify-content:center; }
.box { border:1px solid var(--line); border-radius:16px; background-color:var(--card-bg); background-image:var(--card-img); box-shadow:var(--shadow); }
.grid { display:grid; gap:16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.feat { padding:22px; }
.feat svg { width:30px; height:30px; color:var(--accent); margin-bottom:12px; }
.feat p { margin:0; color:var(--muted); font-size:14.5px; }
.cu { color:var(--cu); }

/* trang chủ */
.hero { padding:96px 0 64px; }
.hero .logo { width:min(78vw, 360px); height:auto; display:block; margin:0 auto 28px; }

/* gallery sản phẩm */
.gal { display:grid; gap:20px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); margin-top:32px; }
.card-sp { display:flex; flex-direction:column; overflow:hidden; text-decoration:none; transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
.card-sp:hover { transform:translateY(-3px); border-color:var(--line2); box-shadow:var(--glow); }
.card-sp .th { aspect-ratio:16/10; background:var(--thumb); border-bottom:1px solid var(--line); }
.card-sp .th img { width:100%; height:100%; object-fit:cover; display:block; }
.card-sp .bd { padding:18px 20px 20px; display:flex; flex-direction:column; gap:6px; flex:1; }
.card-sp .bd p { margin:0; color:var(--muted); font-size:14.5px; }
.card-sp .pr { margin-top:auto; padding-top:10px; font-size:14px; color:var(--text); display:flex; justify-content:space-between; align-items:center; }
.card-sp .pr b { color:var(--cu); font-weight:700; }
.tag { font-size:11.5px; padding:3px 10px; border-radius:999px; border:1px solid var(--line2); color:var(--accent); }
.card-sp.soon { border-style:dashed; justify-content:center; align-items:center; min-height:220px; color:var(--muted); font-size:14.5px; }

/* trang sản phẩm */
.sp-hero { display:grid; gap:40px; align-items:center; grid-template-columns: 1.05fr 1fr; padding:80px 0 48px; }
.sp-hero .shot { aspect-ratio:16/10; overflow:hidden; }
.sp-hero .shot img { width:100%; height:100%; object-fit:cover; display:block; }
.demo { aspect-ratio:16/9; overflow:hidden; display:grid; place-items:center; position:relative; background-color:var(--solid); color:var(--text); }   /* khung xem mẫu 3D: luôn tối */
.demo iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
.steps { counter-reset:st; }
.steps .feat { position:relative; padding-top:54px; }
.steps .feat::before { counter-increment:st; content:counter(st); position:absolute; top:18px; left:22px; width:28px; height:28px; border-radius:50%;
  display:grid; place-items:center; font-size:14px; font-weight:700; color:var(--on-cu); background:var(--cu); }
.price { display:grid; gap:20px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); margin-top:28px; }
.plan { padding:28px; display:flex; flex-direction:column; }
.plan.hot { border-color:rgba(193,147,120,.45); box-shadow:0 0 0 1px rgba(193,147,120,.15) inset, var(--shadow); }
.plan .amt { font-size:38px; font-weight:800; color:var(--strong); letter-spacing:-.02em; margin:6px 0 2px; }
.plan .amt small { font-size:15px; font-weight:500; color:var(--muted); letter-spacing:0; }
.plan ul { list-style:none; margin:16px 0 24px; padding:0; display:grid; gap:9px; }
.plan li { display:flex; gap:10px; font-size:15px; }
.plan li::before { content:''; flex:none; width:18px; height:18px; margin-top:3px; border-radius:50%; background:var(--hover2);
  box-shadow: inset 0 0 0 1px var(--line2); }
.plan .btn { margin-top:auto; width:100%; }

/* khối kêu gọi cuối trang: khối tối bo góc, nền xanh đen + lưới 60 px (cả 2 chế độ) */
.cta-band { position:relative; overflow:hidden; border-radius:24px; padding:64px 28px; border:1px solid var(--line);
  background:var(--band); }
.cta-band h2 { margin-bottom:0; }
.cta-band .lead { margin-top:14px; }
.cta-band .cta { margin-top:26px; }

/* trang sản phẩm 2 cột: nội dung bên trái, hộp mua bên phải DÍNH theo cuộn trang (như NamO) */
.sp-cols { display:grid; grid-template-columns:minmax(0,1fr) 360px; gap:36px; align-items:start; }
.sp-cols .in { width:auto; margin:0; }
.sp-main section { padding:40px 0; }
.sp-main > section:first-child { padding-top:24px; }
.sp-main .steps { grid-template-columns:1fr; }          /* cột trái hẹp: 3 bước xếp dọc, không rớt 2+1 */
.sp-side { position:sticky; top:88px; display:flex; flex-direction:column; gap:16px; margin-top:40px; }
.side-card { position:relative; overflow:hidden; border-radius:20px; padding:26px; border:1px solid rgba(255,255,255,.09); color:var(--text); }
.side-card.buy { background:var(--g-warm); }
.side-card.help { background:var(--g-cool); }
.side-card h3 { margin-bottom:4px; }
.side-card p { margin:0 0 16px; font-size:14.5px; }
.side-card .eyebrow { margin-bottom:8px; }
.side-card .amt { font:700 34px/1.1 "JetBrains Mono", "Cascadia Mono", Consolas, ui-monospace, monospace; letter-spacing:-.04em; color:#fff; margin:8px 0 2px; }
.side-card ul { list-style:none; margin:16px 0 20px; padding:0; display:grid; gap:8px; font-size:14.5px; }
.side-card li { display:flex; gap:10px; }
.side-card li::before { content:''; flex:none; width:16px; height:16px; margin-top:3px; border-radius:50%; background:rgba(193,147,120,.25); box-shadow:inset 0 0 0 1px rgba(193,147,120,.6); }
.side-card .btn { width:100%; }
.side-more { display:block; margin-top:14px; font-size:13.5px; text-align:center; color:rgba(255,255,255,.6); text-decoration:none; }
.side-more:hover { color:#fff; }
@media (max-width: 960px) {
  .sp-cols { grid-template-columns:minmax(0,1fr); gap:0; }
  .sp-side { position:static; margin-top:0; padding-bottom:24px; }
  .sp-main section { padding:32px 0; }
}

/* chân trang — luôn nền tối (cả chế độ sáng: dải tối như thanh bên của bảng điều khiển) */
.foot { border-top:1px solid var(--line); padding:28px 0 36px; font-size:13px; color:rgba(255,255,255,.35); }
.foot .in { display:flex; flex-wrap:wrap; gap:10px 22px; align-items:center; }
.foot a { color:rgba(255,255,255,.5); text-decoration:none; }
.foot a:hover { color:var(--accent); }
.foot .sp { margin-right:auto; }
:root[data-theme="light"] .foot { background:#03081f; border-top-color:transparent; margin-top:40px; padding:40px 0 44px; }

/* ---------- hộp nổi (form của admin, khung phát video) ---------- */
.dlg { border:0; padding:0; background:transparent; color:var(--text); max-width:calc(100vw - 32px); overflow:visible; }
.dlg::backdrop { background:rgba(2,6,23,.72); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
:root[data-theme="light"] .dlg::backdrop { background:rgba(15,23,42,.42); }
.dlg[open] { animation:pop .22s ease both; }
@keyframes pop { from { opacity:0; transform:translateY(8px) scale(.98); } to { opacity:1; transform:none; } }
.dlg .lc { position:relative; width:min(100vw - 32px, 380px); min-height:340px; border-radius:16px; border:1px solid var(--line); background-color:var(--solid);
  background-image:var(--card-img); box-shadow:var(--shadow); display:grid; place-items:center; padding:28px 24px; }
.dlg .x { position:absolute; top:10px; right:10px; }

@media (max-width: 860px) {
  .sp-hero { grid-template-columns: 1fr; padding-top:48px; }
  section { padding:56px 0; }
}
@media (max-width: 560px) {
  .top .in { gap:8px; }
  .nav a { padding:8px 8px; }
  .me span { display:none; }
  .me { padding:0 6px; }
  .auth .btn { padding:0 12px; font-size:13.5px; }
  .brand img { height:24px; }
  .hide-sm { display:none; }
  .ib.theme-t { width:36px; height:36px; }
}
@media (max-width: 400px) { .brand img { height:20px; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } .card-sp, .btn { transition:none; } .dlg[open] { animation:none; } }

/* ---------- admin: nút sửa / xoá trên thẻ + form ---------- */
.sp-w { position:relative; display:flex; }
.sp-w > .card-sp { flex:1; }
.adm { position:absolute; top:10px; right:10px; display:flex; gap:6px; z-index:2; }
.adm .ib { width:34px; height:34px; background:var(--overlay); backdrop-filter:blur(6px); }
.adm .ib svg { width:16px; height:16px; }
.adm .ib.sure { color:#fff; background:rgba(220,53,69,.75); border-color:rgba(252,165,165,.6); }
.badge-h { position:absolute; top:10px; left:10px; z-index:2; font-size:11.5px; padding:3px 10px; border-radius:999px; background:rgba(245,158,11,.2); color:#fcd34d; border:1px solid rgba(245,158,11,.4); }
:root[data-theme="light"] .badge-h { background:#fef3c7; color:#92400e; border-color:#fcd34d; }
.card-sp.add { border-style:dashed; justify-content:center; align-items:center; min-height:220px; color:var(--accent); font-weight:600; cursor:pointer; background:transparent; font:inherit; }
.card-sp.add svg { width:30px; height:30px; margin-bottom:8px; }
.toolbar { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-top:24px; }
.chip { height:36px; padding:0 16px; border-radius:999px; border:1px solid var(--line); background:transparent; color:var(--muted); font-family:inherit; font-size:14px; font-weight:500; line-height:1; cursor:pointer; }
.chip:hover { color:var(--strong); border-color:var(--line2); }
.chip[aria-pressed="true"] { color:var(--strong); border-color:var(--line2); background:var(--hover2); }
.toolbar .btn { margin-left:auto; }
.dlg .frm { display:flex; flex-wrap:wrap; gap:14px 12px; align-content:start; text-align:left; width:min(100vw - 32px, 560px); max-height:calc(100vh - 48px); overflow:hidden auto; padding:26px 24px 22px; place-items:initial; }
.frm h3 { width:100%; margin:0 0 2px; font-size:19px; }
.frm label, .frm .fld { display:flex; flex-direction:column; gap:6px; width:100%; font-size:13px; color:var(--muted); }
.frm label.half { width:calc(50% - 6px); }
.frm input[type=text], .frm input[type=number], .frm textarea, .frm select { width:100%; padding:10px 12px; border-radius:10px; border:1px solid var(--field-bd);
  background:var(--field); color:var(--strong); font-family:inherit; font-size:15px; line-height:1.5; }
.frm textarea { resize:vertical; }
.frm input:focus, .frm textarea:focus, .frm select:focus { outline:none; border-color:var(--line2); box-shadow:0 0 0 3px var(--hover2); }
.frm .chk { flex-direction:row; align-items:center; gap:10px; color:var(--text); font-size:14px; }
.frm .chk input { width:18px; height:18px; accent-color:var(--accent); }
.frm .up { display:flex; gap:10px; align-items:center; }
.frm .up img { width:80px; height:50px; object-fit:cover; border-radius:8px; border:1px solid var(--line); flex:none; }
.frm .up input[type=text] { flex:1; min-width:0; }
.frm .up label.btn { flex:none; width:auto; height:42px; flex-direction:row; gap:0; color:var(--text); font-size:14px; }
.frm .up img[hidden] { display:none; }
.frm .err { width:100%; margin:0; padding:9px 12px; border-radius:10px; background:rgba(220,53,69,.14); border:1px solid rgba(220,53,69,.3); color:var(--err-fg); font-size:13.5px; }
.frm .row { width:100%; display:flex; justify-content:flex-end; gap:10px; margin-top:4px; }
@media (max-width: 560px) { .frm label.half { width:100%; } }

/* ---------- video hướng dẫn ---------- */
.vids { display:grid; gap:20px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); margin-top:24px; }
.vid { display:flex; flex-direction:column; overflow:hidden; text-align:left; padding:0; cursor:pointer; color:inherit; font:inherit; transition:transform .25s ease, border-color .25s ease; }
.vid:hover { transform:translateY(-3px); border-color:var(--line2); }
.vid .th { position:relative; aspect-ratio:16/9; background:var(--thumb); overflow:hidden; border-bottom:1px solid var(--line); }
.vid .th img { width:100%; height:100%; object-fit:cover; display:block; }
.vid .th.tt { display:grid; place-items:center; background: radial-gradient(circle at 30% 30%, rgba(37,244,238,.25), transparent 55%), radial-gradient(circle at 70% 70%, rgba(254,44,85,.25), transparent 55%), #050d24; }
.vid .th.tt svg { width:44px; height:44px; color:#fff; opacity:.9; }
.vid .play { position:absolute; inset:0; display:grid; place-items:center; }
.vid .play i { width:54px; height:54px; border-radius:50%; display:grid; place-items:center; background:rgba(3,8,31,.65); border:1px solid rgba(255,255,255,.35); backdrop-filter:blur(4px); }
.vid .play svg { width:20px; height:20px; margin-left:3px; color:#fff; }
.vid .bd { padding:14px 16px 16px; display:flex; flex-direction:column; gap:6px; }
.vid .bd b { color:var(--strong); font-size:15.5px; line-height:1.4; }
.vid .bd small { color:var(--muted); font-size:13px; }
.player .lc { width:min(100vw - 32px, 960px); min-height:0; padding:0; overflow:hidden; display:block; background:#050d24; }
.player .lc.v { width:min(100vw - 32px, 420px); }
.player .fr { position:relative; aspect-ratio:16/9; }
.player .lc.v .fr { aspect-ratio:9/16; max-height:calc(100vh - 80px); margin:0 auto; }
.player iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
.player .x { z-index:2; background:rgba(3,8,31,.8); color:#e2e8f0; }
.empty { margin-top:24px; padding:48px 20px; text-align:center; color:var(--muted); border:1px dashed var(--line2); border-radius:16px; }

/* trang sản phẩm tự tạo (/sanpham/xem?id=) */
.sp-body p { margin:0 0 14px; color:var(--text); }
.sp-body { max-width:760px; }

.vh { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.small { font-size:13.5px; }
.plan { text-align:left; }
.plan h3 { font-size:17px; }
/* điện thoại: menu xuống hàng dưới, không giấu */
@media (max-width: 560px) {
  .top .in { flex-wrap:wrap; height:auto; padding:10px 0 4px; row-gap:4px; }
  .nav { order:3; width:100%; margin:0 -8px; }
  .theme-t { margin-left:auto; }
}

/* ================= Chế độ sáng — chi tiết (5/11/2026, học theo namoacademy.studio) =================
   Chỉ áp cho html[data-theme="light"]; chế độ tối giữ nguyên như cũ.
   Nút bo 10 px (không còn viên thuốc), thẻ bo 20 px viền 1 px, ảnh trong thẻ có lề 10 px + bo riêng,
   tiêu đề đậm khít chữ, nhãn nhỏ (.eyebrow) thành viên có chấm đồng, giá bằng chữ số đều (mono). */
:root[data-theme="light"] body { background:var(--page); }
:root[data-theme="light"] h1 { letter-spacing:-.035em; }
:root[data-theme="light"] h2 { letter-spacing:-.028em; font-weight:800; }
:root[data-theme="light"] h3 { letter-spacing:-.012em; }

/* thanh trên */
:root[data-theme="light"] .top .in { height:68px; }
:root[data-theme="light"] .nav a { border-radius:10px; color:#52525b; }
:root[data-theme="light"] .nav a:hover { background:var(--hover); color:var(--strong); }
:root[data-theme="light"] .nav a[aria-current="page"] { background:transparent; color:var(--strong); font-weight:650;
  box-shadow:inset 0 -2px 0 var(--cu); border-radius:10px 10px 0 0; }
:root[data-theme="light"] .ib, :root[data-theme="light"] .me { background:#fff; border-color:var(--line); border-radius:10px; box-shadow:var(--shadow); }
:root[data-theme="light"] .me .av { border-radius:8px; }

/* nút */
:root[data-theme="light"] .btn { border-radius:10px; background:#fff; border-color:var(--line); color:var(--strong); box-shadow:var(--shadow); }
:root[data-theme="light"] .btn:hover { background:#f5f5f4; border-color:var(--line2); box-shadow:var(--shadow); }
:root[data-theme="light"] .btn.pri { background:var(--pri-bg); border-color:var(--pri-bd); color:var(--pri-fg); box-shadow:var(--pri-shadow); }
:root[data-theme="light"] .btn.pri:hover { background:var(--pri-hover); transform:translateY(-1px); }
:root[data-theme="light"] .btn.big { height:48px; }
:root[data-theme="light"] .btn[disabled] { background:#f5f5f4; transform:none; }
:root[data-theme="light"] .btn:focus-visible, :root[data-theme="light"] .card-sp:focus-visible { outline-color:var(--strong); }

/* nhãn nhỏ trên tiêu đề */
:root[data-theme="light"] .eyebrow { display:inline-flex; align-items:center; gap:8px; padding:5px 12px 5px 10px; border-radius:999px;
  border:1px solid var(--line); background:#fff; color:#57534e; font-size:11.5px; letter-spacing:.14em; margin-bottom:16px; box-shadow:var(--shadow); }
:root[data-theme="light"] .eyebrow::before { content:""; width:6px; height:6px; border-radius:50%; background:var(--cu); }

/* thẻ */
:root[data-theme="light"] .box { border-radius:20px; }
:root[data-theme="light"] .card-sp { padding:10px; }
:root[data-theme="light"] .card-sp .th { border-radius:14px; overflow:hidden; border:1px solid var(--line); }
:root[data-theme="light"] .card-sp .bd { padding:16px 10px 8px; }
:root[data-theme="light"] .card-sp .pr { border-top:1px dashed var(--line); padding-top:12px; }
:root[data-theme="light"] .card-sp .pr .muted { color:var(--strong); font-weight:600; }
:root[data-theme="light"] .card-sp:hover, :root[data-theme="light"] .vid:hover { border-color:var(--line2); box-shadow:var(--glow); transform:translateY(-4px); }
:root[data-theme="light"] .card-sp.soon, :root[data-theme="light"] .card-sp.add { background:transparent; box-shadow:none; border-color:var(--line2); }
:root[data-theme="light"] .tag { background:#f5f5f4; border-color:var(--line); color:#44403c; font-weight:600; vertical-align:middle; }
:root[data-theme="light"] .vid { padding:10px; }
:root[data-theme="light"] .vid .th { border-radius:14px; border:1px solid var(--line); }
:root[data-theme="light"] .vid .bd { padding:14px 8px 6px; }
:root[data-theme="light"] .empty { border-color:var(--line2); background:#fff; border-radius:20px; }

/* khối nền xen kẽ: section.band-soft = dải xám ấm trung tính (thẻ trắng / thẻ màu nổi lên trên), section thường = nền ngà.
   Không dùng nền xanh: thẻ cyan hoà vào nền, thẻ đồng / hổ phách bị chọi màu (anh chê 6/11). */
:root[data-theme="light"] .band-soft { background:#f0eeea; border-block:1px solid #e2dfd9; }
:root[data-theme="light"] .band-soft .eyebrow { background:#fff; }
:root[data-theme="light"] .sp-main > .band-soft { border:1px solid #e2dfd9; border-radius:24px; padding:36px 32px; margin:16px 0; }   /* trong cột trái: dải thành khối bo góc */
:root[data-theme="light"] .side-card.buy { box-shadow:0 30px 60px -30px rgba(3,8,31,.55); }

/* tính năng / các bước: thẻ TRẮNG phẳng (như nút "Mua gói"), màu chỉ nằm ở ô biểu tượng / số bước (cyan · đồng · xanh lá · hổ phách).
   Anh chốt 6/11: nền thẻ ngả màu trên nền nâu xám không ổn → thẻ trắng. */
:root[data-theme="light"] .feat { --c:#0e7490; --ci:#d7ebf1;
  padding:24px; background:#fff; border-color:var(--line); box-shadow:var(--shadow); }
:root[data-theme="light"] .feat:nth-child(4n+2) { --c:#9c6a4f; --ci:#f1e1d6; }
:root[data-theme="light"] .feat:nth-child(4n+3) { --c:#047857; --ci:#d5eee2; }
:root[data-theme="light"] .feat:nth-child(4n+4) { --c:#b45309; --ci:#f8e6c3; }
:root[data-theme="light"] .feat svg { box-sizing:content-box; width:22px; height:22px; padding:11px; border-radius:12px; color:var(--c);
  background:var(--ci); border:0; margin-bottom:16px; }
:root[data-theme="light"] .feat h3 { font-size:17px; }
:root[data-theme="light"] .steps .feat { padding-top:70px; }
:root[data-theme="light"] .steps .feat::before { top:24px; left:24px; width:32px; height:32px; border-radius:10px; color:#fff; background:var(--c);
  font-family:"JetBrains Mono", "Cascadia Mono", Consolas, ui-monospace, monospace; }

/* dải tối điểm nhấn: đầu trang chủ (rộng hết màn hình), đầu trang sản phẩm (khối bo góc) */
:root[data-theme="light"] .hero { background:var(--band); color:var(--text); padding:104px 0 96px; }
:root[data-theme="light"] .sp-hero { background:var(--band); color:var(--text); border-radius:28px; margin:28px auto 0; padding:64px 56px;
  box-shadow:0 40px 80px -40px rgba(3,8,31,.5); }
:root[data-theme="light"] :is(.hero, .sp-hero, .plan.hot, .cta-band, .side-card) .eyebrow { background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.14); color:#e7d3c6; box-shadow:none; }
:root[data-theme="light"] :is(.hero, .sp-hero, .plan.hot, .cta-band, .side-card) .eyebrow::before { background:#c19378; }
:root[data-theme="light"] :is(.hero, .sp-hero, .plan.hot, .cta-band, .side-card) .lead { color:rgba(255,255,255,.72); }
:root[data-theme="light"] :is(.hero, .sp-hero, .plan.hot, .cta-band, .side-card) .muted { color:rgba(255,255,255,.55); }
:root[data-theme="light"] :is(.hero, .sp-hero, .plan.hot, .cta-band, .side-card) .btn { background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.16); color:#fff; box-shadow:none; }
:root[data-theme="light"] :is(.hero, .sp-hero, .plan.hot, .cta-band, .side-card) .btn:hover { background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.3); }
:root[data-theme="light"] :is(.hero, .sp-hero, .plan.hot, .cta-band, .side-card) .btn.pri { background:#fff; border-color:#fff; color:#0a0a0a; box-shadow:none; }
:root[data-theme="light"] :is(.hero, .sp-hero, .plan.hot, .cta-band, .side-card) .btn.pri:hover { background:#f1ece8; }
:root[data-theme="light"] .sp-hero .shot { border-radius:20px; border-color:rgba(255,255,255,.14); background:rgba(255,255,255,.04); box-shadow:0 24px 60px -24px rgba(0,0,0,.8); }
:root[data-theme="light"] .demo { border-radius:24px; border:1px solid var(--line); box-shadow:var(--glow); }

/* bảng giá: gói mua = thẻ tối như hộp mua của NamO */
:root[data-theme="light"] .plan { padding:30px; }
:root[data-theme="light"] .plan .amt { font-family:"JetBrains Mono", "Cascadia Mono", Consolas, ui-monospace, monospace; font-weight:700; letter-spacing:-.04em; }
:root[data-theme="light"] .plan li::before { background:#f5f5f4; box-shadow:inset 0 0 0 1px var(--line2); }
:root[data-theme="light"] .plan.hot { background:var(--g-warm); color:var(--text); border-color:rgba(34,211,238,.22); box-shadow:0 40px 80px -40px rgba(3,8,31,.55); }
:root[data-theme="light"] .plan.hot li::before { background:rgba(193,147,120,.25); box-shadow:inset 0 0 0 1px rgba(193,147,120,.6); }

/* nút lọc + hộp nổi */
:root[data-theme="light"] .chip { background:#fff; border-color:var(--line); color:#52525b; }
:root[data-theme="light"] .chip[aria-pressed="true"] { background:var(--strong); border-color:var(--strong); color:#fff; }
:root[data-theme="light"] .dlg .lc { border-radius:20px; box-shadow:0 40px 90px -30px rgba(3,8,31,.4); }

@media (max-width: 860px) {
  :root[data-theme="light"] .sp-hero { padding:40px 22px; border-radius:22px; margin-top:16px; }
  :root[data-theme="light"] .hero { padding:72px 0 64px; }
}
@media (max-width: 560px) {
  :root[data-theme="light"] .top .in { height:auto; }
  :root[data-theme="light"] .nav a[aria-current="page"] { box-shadow:none; background:var(--hover); border-radius:10px; }
}