:root{--ink:#1B2530;--muted:#4A5560;--line:#EADFD3;--bg:#FFFFFF;--panel:#fff;--accent:#E8553F;--accent2:#C93B3B;--soft:#FFE3DC;--yellow:#FFD84D;--sky:#D9F0FF;--dark:#1B2530}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;font-family:"Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;color:var(--ink);background:var(--bg);line-height:1.55}
h1,h2,.price,.brand-serif{font-family:"Fraunces",Georgia,"Times New Roman",serif;font-weight:500;letter-spacing:-.01em}
a{color:var(--accent)}
.top{padding:10px 16px;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5}
.brand{font-weight:700;text-decoration:none;color:var(--ink);font-size:17px;display:flex;align-items:center;gap:8px}
.logo{height:93px;width:250px;display:block;object-fit:contain}
.brand-hero{font-family:"Fraunces",Georgia,serif;font-size:40px;font-weight:600;letter-spacing:-.01em;color:var(--ink);line-height:1.1;margin:0 0 14px}.brand-hero span{font-weight:400;color:var(--muted);font-size:.7em}
.brand-sub{font-weight:400;color:var(--muted)}
.top nav a{margin-left:0;text-decoration:none;color:var(--muted);font-size:14px}
.top nav a.btn{color:#fff}.top nav a.btn.ghost{color:#fff;border-color:#2B8A3E;background:#2B8A3E}
.wrap{max-width:1080px;margin:0 auto;padding:56px 24px}
.narrow{max-width:720px}
h1{font-size:clamp(28px,4.5vw,44px);line-height:1.15;margin:.3em 0}
h1 em{color:var(--accent);font-style:normal}
h2{font-size:clamp(22px,3vw,30px);margin:0 0 20px}
h3{margin:.2em 0}
.eyebrow{display:inline-block;background:var(--yellow);color:var(--ink);border-radius:999px;padding:6px 14px;font-size:13px;font-weight:700}
.lead{font-size:18px;color:var(--muted)}
.hero{display:grid;grid-template-columns:1.1fr 1fr;gap:40px;align-items:center;padding-top:40px}
.hero-img img{width:100%;border-radius:22px;box-shadow:0 30px 60px -30px rgba(27,37,48,.35)}
.btn{display:inline-block;background:var(--accent);color:#fff;border:1.5px solid var(--accent);border-radius:999px;padding:9px 16px;text-decoration:none;font-weight:600;cursor:pointer;font-size:15px}
.btn:hover{filter:brightness(1.08)}
.btn.big{padding:14px 26px;font-size:17px}
.btn.small{padding:5px 10px;font-size:13px}
.btn.ghost{background:transparent;color:var(--ink);border-color:#D8D2C6}.btn.dark{background:var(--dark);border-color:var(--dark);color:#fff}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;margin:22px 0}
.ticks{list-style:none;padding:0;margin:0;color:var(--muted)}
.ticks li{padding:4px 0 4px 26px;position:relative}
.ticks li:before{content:"✓";position:absolute;left:0;color:var(--accent);font-weight:700}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:24px}
.feat .card{background:var(--soft)}.feat .card:nth-child(2){background:#FFF3BF}.feat .card:nth-child(3){background:var(--sky)}.feat .card .ph{background:#fff;border:0}
.ico{width:44px;height:44px;border-radius:12px;background:#fff;display:flex;align-items:center;justify-content:center;margin-bottom:12px}
.trust{display:flex;gap:28px;align-items:center;flex-wrap:wrap;color:var(--muted);font-size:13px;letter-spacing:.08em;text-transform:uppercase;padding:0 0 12px}.trust b{letter-spacing:0;text-transform:none;font-size:15px;color:var(--ink)}
.band{background:var(--dark);color:#fff;border-radius:26px;padding:48px;display:grid;grid-template-columns:1.1fr 1fr;gap:40px;align-items:center}.band h2{color:#fff;margin:0 0 12px}.band p{color:#C9D3DA;font-size:17px}.band .stats{display:flex;gap:28px;margin-top:12px}.band .stats b{display:block;font-family:"Fraunces",Georgia,serif;font-size:32px;font-weight:500}.band .stats small{color:#9FB4BA}.band .ph{border-color:#4A5B66;background:transparent;color:#9FB4BA}
.pill{display:inline-block;padding:7px 12px;border-radius:999px;font-size:13px;font-weight:700;color:var(--ink);margin:4px 6px 0 0}
.card b{display:block;font-size:16px;margin-bottom:6px}
.card p{margin:0;color:var(--muted)}
.icons .card img{width:100%;border-radius:10px;margin-bottom:12px}
.feat{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-bottom:28px}
.feat p{color:var(--muted)}
.steps{counter-reset:s;list-style:none;padding:0;display:grid;gap:14px}
.steps li{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:16px 16px 16px 64px;position:relative;counter-increment:s}
.steps li:before{content:counter(s);position:absolute;left:16px;top:14px;width:34px;height:34px;border-radius:50%;background:var(--dark);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700}
code{background:var(--soft);padding:1px 6px;border-radius:6px;font-size:.95em}
.code{font-size:1.1em;letter-spacing:1px}
.note{font-size:13px;color:var(--muted)}
.pricing{text-align:center}
.price-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:900px;margin:0 auto}
.price-card{background:var(--panel);border:2px solid var(--line);border-radius:20px;padding:32px;text-align:left}
.price-card.featured{border-color:var(--ink);box-shadow:10px 10px 0 var(--accent)}
.price-card.student{border-color:var(--line);background:var(--sky)}
.plan{font-weight:700;font-size:15px;color:var(--muted);margin-bottom:6px}
@media (max-width:820px){.price-grid{grid-template-columns:1fr}}
.price{font-size:48px;color:var(--ink)}
.price span{font-size:20px}
.once{color:var(--muted);margin-bottom:14px}
.price-card .btn{width:100%;text-align:center;margin-top:16px}
.form{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:24px;max-width:560px;display:grid;gap:14px;position:relative}
.form label{display:grid;gap:6px;font-weight:600;font-size:14px}
.form input{border:1px solid var(--line);border-radius:10px;padding:12px;font:inherit}
.form input:focus,.form select:focus{outline:2px solid var(--accent);border-color:transparent}.form select{border:1px solid var(--line);border-radius:10px;padding:12px;font:inherit;background:#fff}.phoneRow{display:grid;grid-template-columns:150px 1fr;gap:8px}.auth-tabs{display:flex;gap:8px;margin-bottom:14px}.auth-tabs a{padding:8px 14px;border-radius:999px;border:1.5px solid var(--line);text-decoration:none;color:var(--ink);font-weight:600}.auth-tabs a.on{background:var(--dark);color:#fff;border-color:var(--dark)}.gbtn{display:flex;gap:10px;align-items:center;justify-content:center;border:1.5px solid var(--line);background:#fff;border-radius:999px;padding:12px;font:inherit;font-weight:600;cursor:pointer;width:100%}
.err{color:var(--accent2);font-size:13px;font-weight:400}
.faq details{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px 18px;margin-bottom:10px}
.faq summary{cursor:pointer;font-weight:600}
.faq p{color:var(--muted);margin:10px 0 0}
footer{text-align:center;color:var(--muted);font-size:13px;padding:30px 16px;border-top:1px solid var(--line)}
.zalo-float{position:fixed;right:18px;bottom:18px;background:#0068FF;color:#fff;text-decoration:none;font-weight:700;padding:10px 16px;border-radius:30px;display:flex;align-items:center;gap:8px;box-shadow:0 8px 24px rgba(0,104,255,.35);z-index:9}
.zalo-float img{width:26px;height:26px;border-radius:6px}
/* pay */
.qr-box{display:grid;grid-template-columns:auto 1fr;gap:24px;background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:24px;align-items:center}
.qr-box img{border-radius:10px;border:1px solid var(--line)}
.amt{font-size:32px;font-weight:800;color:var(--accent)}
.qr-info table{border-collapse:collapse;margin:8px 0}
.qr-info td{padding:4px 10px 4px 0;color:var(--muted)}
.status{background:#FFF6DB;border:1px solid #F1D48A;border-radius:12px;padding:12px 16px;margin:18px 0}
.pay .btn{width:100%;text-align:center}
/* download */
.dl{text-align:center}
.okmark{font-size:64px}
.dl .btn{margin:14px 0 24px}
.steps-mini,.zalo-card{text-align:left;margin-top:14px}
.steps-mini ol{margin:8px 0 0 18px;padding:0}
.zalo-card{display:flex;gap:14px;align-items:center}
/* admin */
.tbl{border-collapse:collapse;width:100%;background:var(--panel);font-size:14px}
.tbl th,.tbl td{border-bottom:1px solid var(--line);padding:8px;text-align:left}
.tbl tr.st-Reported td{background:#FFF6DB}
.tbl tr.st-Paid td{background:#EAF7EF}
@media (max-width:820px){.hero,.grid3,.feat,.qr-box{grid-template-columns:1fr}.top nav a:not(.btn){display:none}.wrap{padding:40px 18px}}

.lic-choice{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.lic-choice .radio{display:block;border:1px solid var(--line);border-radius:10px;padding:10px 12px;cursor:pointer;font-weight:400}
.lic-choice .radio:has(input:checked){border-color:var(--accent);background:var(--soft)}
.lic-choice small{color:var(--muted)}
@media (max-width:600px){.lic-choice{grid-template-columns:1fr}}

/* gallery + lightbox */
.shots{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.shots figure{margin:0;cursor:zoom-in;background:var(--panel);border:1px solid var(--line);border-radius:14px;overflow:hidden;transition:transform .15s,box-shadow .15s}
.shots figure:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(14,111,128,.18)}
.shots img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}
.shots figcaption{padding:10px 12px;font-size:13px;color:var(--muted)}
.lightbox{position:fixed;inset:0;background:rgba(10,16,22,.92);display:none;align-items:center;justify-content:center;z-index:50;flex-direction:column;padding:24px}
.lightbox.on{display:flex}
.lightbox img{max-width:min(96vw,1920px);max-height:82vh;border-radius:8px;box-shadow:0 20px 60px rgba(0,0,0,.6);cursor:zoom-out}
.lightbox .lb-cap{color:#fff;margin-top:12px;font-size:14px;text-align:center}
.lightbox button{position:absolute;background:rgba(255,255,255,.12);color:#fff;border:0;border-radius:50%;width:44px;height:44px;font-size:24px;cursor:pointer}
.lightbox button:hover{background:rgba(255,255,255,.25)}
.lb-x{top:18px;right:18px}.lb-prev{left:18px;top:50%;transform:translateY(-50%)}.lb-next{right:18px;top:50%;transform:translateY(-50%)}
@media (max-width:820px){.shots{grid-template-columns:1fr 1fr}.lb-prev,.lb-next{display:none}}

.top nav .lang{margin-left:18px;display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden;vertical-align:middle}.top nav .lang a{display:inline-flex;align-items:center;gap:5px;margin:0;padding:4px 8px;font-size:12px;color:var(--muted)}.top nav .lang a.on{background:var(--soft);color:var(--accent);font-weight:600}
@media (max-width:820px){.top nav select.lang{display:inline-block;margin-left:6px}}

.paytabs{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0}.paytabs button{border:1.5px solid var(--line);background:#fff;border-radius:10px;padding:10px 14px;cursor:pointer;font:inherit;font-weight:600}.paytabs button.on{border-color:var(--accent);background:var(--soft);color:var(--accent)}
.pp-holder{max-width:420px;margin:12px 0}
.ph{display:flex;align-items:center;justify-content:center;border:2px dashed #C9D3DA;border-radius:12px;background:#F7F9FA;color:#8A96A2;font-size:13px;text-align:center;padding:10px}
.hero-img .ph{aspect-ratio:4/3;width:100%}.card .ph{width:56px;height:56px;border-radius:12px;margin-bottom:10px;font-size:11px;padding:4px}.shots figure .ph{aspect-ratio:16/10;width:100%}

@media (max-width:820px){.band{grid-template-columns:1fr;padding:28px}.phoneRow{grid-template-columns:120px 1fr}}

.who .card img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:12px;margin-bottom:12px}.hero .lead+.lead{margin-top:-6px}

.lightbox:fullscreen{background:#000}.lightbox:fullscreen img{max-width:100vw;max-height:calc(100vh - 60px)}



/* ===== Header: 1 hàng, khung 1000px căn giữa, logo trái – menu phải ===== */
.top{padding:10px 16px}
.topin{display:table;width:1000px;max-width:100%;margin:0 auto}
.topin .brand{display:table-cell;vertical-align:middle;text-align:left;width:260px;padding:0}
.topin nav{display:table-cell;vertical-align:middle;text-align:right;white-space:nowrap}
.top nav a{display:inline-block;vertical-align:middle;margin-left:14px}
.top nav .lang{margin-left:14px}
.logo{height:93px;width:250px;display:block;object-fit:contain}
@media (max-width:820px){.topin,.topin .brand,.topin nav{display:block;text-align:center;width:auto}.top nav{white-space:normal;margin-top:6px}.top nav a{margin:4px 6px}.logo{height:56px;width:150px;margin:0 auto}.brand-hero{font-size:28px}}

/* ===== Bằng chứng + video (bản E) ===== */
.hero-video .vwrap{position:relative;aspect-ratio:16/9;background:#F3EEE4;border:1px solid var(--line);border-radius:20px;overflow:hidden;box-shadow:0 30px 60px -30px rgba(27,37,48,.35)}
.hero-video .vwrap video,.hero-video .vwrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:#000}
.hero-video .vwrap .ph{height:100%;border:0;border-radius:0}
.cta-row .btn svg{vertical-align:-3px;margin-right:4px}
.proof{background:#fff;border:1px solid var(--line);border-radius:18px;padding:22px 28px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.proof .logos{display:flex;gap:22px;align-items:center;flex-wrap:wrap}.proof .logos b{font-size:15px;color:var(--ink);opacity:.85}.proof .lbl{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.proof .stats{display:flex;gap:28px}.proof .stats b{display:block;font-family:"Fraunces",Georgia,serif;font-size:26px;font-weight:500;color:var(--ink)}.proof .stats small{font-size:12px;color:var(--muted)}
.band .quotes{display:grid;grid-template-columns:1fr 1fr;gap:14px}.band .q{padding:16px;background:rgba(255,255,255,.07);border-radius:14px}.band .q .stars{color:#F59E0B;font-size:15px}.band .q p{margin:6px 0 8px;font-size:14px;line-height:1.55;color:#fff}.band .q small{font-size:12px;color:#9FB4BA}
@media (max-width:820px){.proof{flex-direction:column;align-items:flex-start}.band .quotes{grid-template-columns:1fr}}

/* video modal */
.vmodal{position:fixed;inset:0;background:rgba(10,16,22,.82);display:none;align-items:center;justify-content:center;z-index:100;padding:24px}.vmodal.on{display:flex}
.vbox{position:relative;width:min(1100px,96vw);background:#000;border-radius:16px;padding:10px;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.vbox .hero-video .vwrap{border-radius:10px;box-shadow:none;border:0;background:#000}
.vclose{position:absolute;top:-14px;right:-14px;width:40px;height:40px;border-radius:50%;border:0;background:#fff;color:#1B2530;font-size:18px;cursor:pointer;box-shadow:0 6px 16px rgba(0,0,0,.35)}
.vtools{display:flex;justify-content:flex-end;padding:8px 0 0}.vtools .btn{background:#fff;color:#1B2530;border-color:#fff;padding:8px 14px;font-size:13px}
.vbox:fullscreen{width:100vw;height:100vh;border-radius:0;padding:0;display:flex;flex-direction:column}.vbox:fullscreen .hero-video{flex:1}.vbox:fullscreen .vwrap{height:100%;aspect-ratio:auto;border-radius:0}.vbox:fullscreen .vclose,.vbox:fullscreen .vtools{display:none}
.hero-img img{background:#fff}

/* hero slider 4:5 */
.hero-slider{position:relative;aspect-ratio:4/5;max-height:640px;border-radius:22px;overflow:hidden;box-shadow:0 30px 60px -30px rgba(27,37,48,.35);background:#F3EEE4}
.hero-slider .hs{position:absolute;inset:0;margin:0;opacity:0;transition:opacity .8s ease}.hero-slider .hs.on{opacity:1}
.hero-slider .hs img{width:100%;height:100%;object-fit:cover;display:block}
.hero-slider figcaption{position:absolute;left:0;right:0;bottom:0;padding:22px 20px 44px;background:linear-gradient(to top,rgba(16,24,32,.85),rgba(16,24,32,0));color:#fff}
.hero-slider figcaption b{display:block;font-family:"Fraunces",Georgia,serif;font-size:24px;font-weight:500;line-height:1.2;transform:translateY(8px);opacity:0;transition:all .6s .2s}.hero-slider figcaption span{display:block;font-size:14px;color:#E6ECF0;margin-top:4px;transform:translateY(8px);opacity:0;transition:all .6s .35s}
.hero-slider .hs.on figcaption b,.hero-slider .hs.on figcaption span{transform:none;opacity:1}
.hdots{position:absolute;left:20px;bottom:16px;display:flex;gap:6px;z-index:2}.hdots button{width:8px;height:8px;border-radius:50%;border:0;background:rgba(255,255,255,.45);cursor:pointer;padding:0;transition:width .3s}.hdots button.on{width:24px;border-radius:4px;background:#fff}
@media (prefers-reduced-motion:reduce){.hero-slider .hs,.hero-slider figcaption b,.hero-slider figcaption span{transition:none}}
@media (max-width:820px){.hero-slider{max-height:420px;aspect-ratio:4/3}}

body.embed .top,body.embed footer,body.embed .zalo-float{display:none}body.embed .wrap{padding-top:14px}