/* Trang chu v3 "Studio Sang" (chot 29/09/2026): header + hero + 4 san pham.
   Nap sau style goc; cac phan ben duoi giu nguyen. */
:root{--h3-ink:#0f172a;--h3-ink2:#475569;--h3-muted:#64748b;--h3-line:#e8ecf2;--h3-brand:#2f5bea;--h3-brand2:#274fd6;--h3-gold:#c89b3c;--h3-ok:#0f9d6b}

/* Header */
header nav{background:rgba(255,255,255,.92)!important;backdrop-filter:blur(12px);border-bottom:1px solid #eef1f5!important;box-shadow:none!important}
header .nav-inner{gap:26px}
header .lnk{color:#475569!important;font-weight:500!important;font-size:14px!important;background:transparent!important;box-shadow:none!important}
header .lnk:hover{color:var(--h3-ink)!important}
header .nav-login{border:0!important;background:transparent!important;box-shadow:none!important;color:#334155!important;font-weight:500!important}
header .nav-signup{background:var(--h3-brand)!important;border:0!important;border-radius:9px!important;box-shadow:0 1px 2px rgba(47,91,234,.3)!important;font-weight:600!important;color:#fff!important}
header .nav-signup:hover{background:var(--h3-brand2)!important}

/* Hero */
.h3-hero{display:grid;grid-template-columns:1.05fr 1fr;gap:48px;align-items:center;padding-top:64px;padding-bottom:40px;color:var(--h3-ink);font-family:"Be Vietnam Pro",system-ui,sans-serif}
.h3-pill{display:inline-flex;gap:8px;align-items:center;padding:4px 14px 4px 4px;border:1px solid #e2e8f0;border-radius:999px;background:#fff;font-size:13px;color:var(--h3-ink2);text-decoration:none}
.h3-pill b{padding:2px 9px;border-radius:999px;background:#eef2ff;color:var(--h3-brand);font-size:11.5px;font-weight:600}
.h3-pill:hover{border-color:#cbd5e1}
.h3-hero h1{margin:18px 0 16px;font-size:clamp(34px,4.2vw,50px);line-height:1.08;letter-spacing:-.035em;font-weight:800;color:var(--h3-ink)}
.h3-hero h1 span{color:var(--h3-brand);white-space:nowrap}
.h3-lead{margin:0 0 26px;max-width:500px;color:var(--h3-ink2);font-size:17px;line-height:1.6}
.h3-cta{display:flex;gap:10px;flex-wrap:wrap}
.h3-b{display:inline-flex;align-items:center;height:46px;padding:0 20px;border-radius:10px;border:1px solid #e2e8f0;background:#fff;color:var(--h3-ink);font-weight:600;font-size:15px;text-decoration:none;transition:background .15s,border-color .15s}
.h3-b:hover{border-color:#cbd5e1;background:#f8fafc}
.h3-b.p{background:var(--h3-brand);border-color:var(--h3-brand);color:#fff;box-shadow:0 1px 2px rgba(47,91,234,.3)}
.h3-b.p:hover{background:var(--h3-brand2)}
.h3-b:focus-visible,.h3-pill:focus-visible,.h3-prod:focus-visible,.h3-lesson:focus-visible{outline:0;box-shadow:0 0 0 3px rgba(47,91,234,.25)}
.h3-proof{display:flex;gap:32px;margin-top:30px;color:var(--h3-muted);font-size:13px}
.h3-proof b{display:block;color:var(--h3-ink);font-size:22px;font-weight:700;letter-spacing:-.02em}

.h3-card{border:1px solid var(--h3-line);border-radius:16px;background:#fff;box-shadow:0 1px 2px rgba(15,23,42,.04),0 20px 50px -30px rgba(15,23,42,.25)}
.h3-course{padding:18px}
.h3-thumb{display:block;height:160px;padding:20px;border-radius:12px;background:linear-gradient(135deg,#0f172a,#1e3a8a 60%,#2f5bea);color:#fff;text-decoration:none}
.h3-thumb small{color:var(--h3-gold);font-weight:700;letter-spacing:.08em;font-size:11px}
.h3-thumb strong{display:block;margin:6px 0 6px;font-size:24px;letter-spacing:-.02em}
.h3-thumb span{font-size:13px;opacity:.8}
.h3-lesson{display:flex;justify-content:space-between;gap:12px;padding:12px 4px;border-bottom:1px solid #f1f4f8;color:var(--h3-ink);font-size:14px;text-decoration:none}
.h3-lesson:last-child{border:0}
.h3-lesson:hover{color:var(--h3-brand)}
.h3-lesson em{font-style:normal;font-weight:600;font-size:12.5px;white-space:nowrap;color:var(--h3-ok)}
.h3-lesson em.lk{color:#94a3b8;font-weight:500}

.h3-prods{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;padding-bottom:56px}
.h3-prod{display:block;padding:20px;border:1px solid var(--h3-line);border-radius:14px;background:#fff;color:var(--h3-ink);text-decoration:none;transition:border-color .15s,box-shadow .15s}
.h3-prod:hover{border-color:#cdd6e4;box-shadow:0 10px 30px -18px rgba(15,23,42,.3)}
.h3-ic{display:grid;place-items:center;width:38px;height:38px;border-radius:10px;background:#f1f5ff;color:var(--h3-brand);font-weight:800;font-size:13px}
.h3-prod h3{margin:14px 0 6px;font-size:16px;font-weight:700;letter-spacing:-.01em}
.h3-prod p{margin:0;color:var(--h3-muted);font-size:13.5px;line-height:1.55}

@media(max-width:900px){.h3-hero{grid-template-columns:1fr;gap:32px;padding-top:40px;padding-bottom:28px}.h3-prods{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.h3-prods{grid-template-columns:1fr}.h3-proof{gap:22px}.h3-b{flex:1 1 auto;justify-content:center}}

@media(max-width:900px){.h3-hero,.h3-prods{padding-left:20px;padding-right:20px}}