:root{
  --xanh-dam:#0C5A3A; --xanh-la:#15935F; --xanh-nhat:#E9F6EF; --rung:#08402A;
  --do:#D21324; --chu:#0C5A3A; --chu-phu:#3E5A4C; --vien:#CFE6D9;
}
*{box-sizing:border-box}
body{margin:0;background:linear-gradient(170deg,var(--xanh-nhat),#fff 60%);min-height:100vh;color:#1D2B24;font-family:"Times New Roman",Times,serif;font-size:19px;line-height:1.55}
img{max-width:100%;height:auto;display:block}
h1,h2,h3{color:var(--chu);line-height:1.2;margin:0 0 .5em}
h1{font-size:clamp(32px,5vw,50px)}
h2{font-size:clamp(26px,4vw,36px)}
p{margin:0 0 1em}
.dau{background:#fff;border-bottom:1px solid var(--vien)}
.dau .khung{display:flex;align-items:center;justify-content:space-between;gap:12px;height:62px}
.dau img{height:38px;width:auto}
.dau a{color:var(--xanh-dam);font-weight:bold;text-decoration:none;white-space:nowrap}
.khung{max-width:760px;margin:0 auto;padding:0 16px}
.rong{max-width:1040px}
main{padding:40px 0 64px}
.gach{width:64px;height:4px;background:var(--do);border:0;margin:0 0 18px}
.phu{color:var(--chu-phu)}
.nut{display:inline-block;background:var(--xanh-dam);color:#fff;text-decoration:none;font-weight:bold;font-size:21px;padding:17px 32px;border-radius:12px;border:0;cursor:pointer;font-family:inherit;text-align:center}
.nut:hover{background:var(--rung)}
.nut:disabled{opacity:.5;cursor:default}
.nut-phu{background:#fff;color:var(--xanh-dam);border:2px solid var(--xanh-dam)}
.nut-phu:hover{background:var(--xanh-nhat)}
.hop{background:#fff;border:1px solid var(--vien);border-radius:20px;padding:28px;box-shadow:0 12px 40px rgba(12,90,58,.10)}
.buoc-chu{font-size:15px;font-weight:bold;letter-spacing:.1em;text-transform:uppercase;color:var(--xanh-la);margin-bottom:10px}
.chan{color:var(--chu-phu);font-size:15px;text-align:center;padding:24px 16px 32px}
.chan a{color:var(--xanh-dam)}

/* Trang mở đầu */
.mo-dau{display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:center}
.mo-dau .anh{border-radius:20px;overflow:hidden;box-shadow:0 12px 40px rgba(12,90,58,.18)}
.dau-tich{list-style:none;padding:0;margin:0 0 26px}
.dau-tich li{padding-left:34px;position:relative;margin-bottom:10px}
.dau-tich li::before{content:"✓";position:absolute;left:0;top:0;width:24px;height:24px;border-radius:50%;background:var(--xanh-la);color:#fff;font-size:15px;display:grid;place-items:center;font-weight:bold}
.nho-ghi{font-size:16px;color:var(--chu-phu);margin-top:12px}

/* Trang câu hỏi */
.thanh-tien{height:10px;background:var(--xanh-nhat);border-radius:10px;overflow:hidden;margin:6px 0 24px}
.thanh-tien div{height:100%;background:var(--xanh-la);width:0;transition:width .3s}
.lua-chon{display:grid;gap:12px;margin:20px 0 8px}
.lua-chon button{text-align:left;font:inherit;font-size:20px;background:#fff;border:2px solid var(--vien);border-radius:14px;padding:16px 18px;cursor:pointer;color:#1D2B24;display:flex;gap:14px;align-items:center}
.lua-chon button:hover{border-color:var(--xanh-la);background:var(--xanh-nhat)}
.lua-chon button.chon{border-color:var(--xanh-dam);background:var(--xanh-nhat)}
.lua-chon .cham{flex:none;width:22px;height:22px;border-radius:50%;border:2px solid #A9CBB8}
.lua-chon button.chon .cham{border:7px solid var(--xanh-dam)}
.quay{background:none;border:0;font:inherit;color:var(--chu-phu);cursor:pointer;text-decoration:underline;padding:8px 0}

/* Trang kết quả */
.ket-qua{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:start}
.the-kq{background:var(--xanh-dam);color:#fff;border-radius:20px;padding:26px}
.the-kq h2{color:#fff}
.the-kq .nhan{display:inline-block;background:#fff;color:var(--xanh-dam);border-radius:20px;padding:3px 14px;font-size:15px;font-weight:bold;margin-bottom:12px}
.the-kq ul{padding-left:20px;margin:0 0 14px}
.the-kq li{margin-bottom:6px;color:#E3F1E9}
.the-kq .anh{border-radius:14px;overflow:hidden;margin:14px 0}
.the-kq .anh img{width:100%;aspect-ratio:16/9;object-fit:cover}
.the-kq small{color:#BFD9CB;font-size:15px}
.form label{display:block;font-weight:bold;color:var(--chu);font-size:17px;margin:12px 0 4px}
.form input{width:100%;font:inherit;font-size:19px;padding:13px;border:1px solid #A9CBB8;border-radius:10px;background:#fff;color:#1D2B24}
.form .nut{width:100%;margin-top:18px}
.form .sao{color:var(--do)}
.an{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.bao{margin-top:14px;padding:14px;border-radius:10px;display:none;font-size:18px}
.bao.loi{display:block;background:#FDECEE;color:#8E0D18}

/* Trang cảm ơn */
.tich-lon{width:84px;height:84px;border-radius:50%;background:var(--xanh-la);color:#fff;display:grid;place-items:center;font-size:46px;margin:0 auto 18px}
.giua{text-align:center}
.ma-yc{display:inline-block;background:var(--xanh-nhat);color:var(--xanh-dam);font-weight:bold;border-radius:10px;padding:6px 16px;margin:4px 0 20px}
.cac-buoc{list-style:none;padding:0;margin:24px 0;display:grid;gap:14px;text-align:left}
.cac-buoc li{display:flex;gap:16px;background:#fff;border:1px solid var(--vien);border-radius:16px;padding:18px}
.cac-buoc .so{flex:none;width:40px;height:40px;border-radius:50%;background:var(--xanh-dam);color:#fff;display:grid;place-items:center;font-weight:bold;font-size:20px}
.cac-buoc li>span>b{display:block;color:var(--chu);font-size:20px}
.cac-buoc li>span>span{color:var(--chu-phu);font-size:17px}
.cac-buoc li>span>span b{color:var(--chu)}

@media (max-width:760px){
  body{font-size:18px}
  main{padding:28px 0 48px}
  .mo-dau,.ket-qua{grid-template-columns:1fr;gap:24px}
  .mo-dau .anh{max-width:360px;margin:0 auto}
  .hop{padding:20px}
  .nut{width:100%}
}