@font-face{font-family:'MORA Tech';src:url(fonts/MoraTech-Regular.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'MORA Tech';src:url(fonts/MoraTech-Bold.woff2) format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'MORA Tech';src:url(fonts/MoraTech-ExtraBold.woff2) format('woff2');font-weight:800;font-display:swap}

:root{--blue:#0077B2;--blue2:#00669A;--navy:#0B1220;--ink:#1F2328;--mute:#5B6478;--bg:#F6F8FC;--line:#E5E7EB;--hong:#E8638B;--hong-nhat:#FDEEF3}
*{box-sizing:border-box}
html,body{margin:0}
body{min-height:100vh;display:flex;flex-direction:column;background:var(--bg);color:var(--ink);
  font:400 16px/1.55 'MORA Tech','Plus Jakarta Sans',Helvetica,Arial,sans-serif;font-feature-settings:"liga" 1,"calt" 1}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(48rem 32rem at 85% -10%,rgba(232,99,139,.16),transparent 70%),
             radial-gradient(40rem 30rem at -10% 110%,rgba(0,119,178,.14),transparent 70%)}

.khung{flex:1;width:100%;max-width:760px;margin:0 auto;padding:clamp(40px,10vh,104px) 16px 40px;text-align:center}
.logo{margin:0 0 clamp(32px,7vh,64px);font-weight:800;font-size:clamp(28px,5vw,36px);line-height:1;color:var(--navy);letter-spacing:-.01em}
.logo span{color:var(--hong)}
h1{margin:0 auto 14px;max-width:16em;font-weight:800;font-size:clamp(30px,6.2vw,52px);line-height:1.16;letter-spacing:-.012em;color:var(--navy)}
.mo-ta{margin:0 auto;max-width:30em;color:var(--mute);font-size:clamp(16px,2.2vw,19px)}

.dem{margin:clamp(32px,6vh,52px) auto 0;padding:24px 16px 26px;max-width:520px;background:#fff;border:1px solid var(--line);
  border-radius:20px;box-shadow:0 18px 40px rgba(11,18,32,.07)}
.han{margin:0;color:var(--mute);font-size:15px}
.han strong{color:var(--navy);font-weight:700}
.o-dem{display:flex;justify-content:center;gap:clamp(10px,3vw,20px);margin-top:18px}
.o-dem[hidden],.xong[hidden]{display:none}
.o-dem div{min-width:clamp(76px,22vw,104px);padding:14px 6px 10px;border-radius:14px;background:var(--hong-nhat)}
.o-dem b{display:block;font-weight:800;font-size:clamp(32px,8vw,44px);line-height:1;color:var(--navy);font-variant-numeric:tabular-nums}
.o-dem span{display:block;margin-top:6px;font-size:13px;color:var(--mute)}
.xong{margin:14px 0 0;font-weight:700;color:var(--blue2)}

.tinh-nang{list-style:none;margin:clamp(28px,5vh,44px) 0 0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.tinh-nang li{padding:8px 16px;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.7);font-size:14px;color:var(--ink)}

footer{padding:20px 16px 28px;text-align:center;font-size:13px;color:var(--mute)}
footer a{color:var(--blue2);text-decoration:none}
footer a:hover{text-decoration:underline}