:root{
  --tim-nhat:#d0c8ff; --tim-rat-nhat:#f0ecff; --tim-dam:#6c5ce7; --muc:#1e1b3a; --xam:#5b5875; --trang:#fff; --hong:#ff8fb1;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:'Montserrat',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;color:var(--muc);background:linear-gradient(180deg,var(--tim-nhat) 0,var(--tim-rat-nhat) 340px,var(--tim-rat-nhat) 100%);min-height:100vh;line-height:1.55}
.wrap{max-width:520px;margin:0 auto;padding:20px 16px 48px}
.the{background:var(--trang);border-radius:28px;padding:28px 20px 24px;box-shadow:0 10px 30px rgba(30,27,58,.12);text-align:center;position:relative}
.avatar{width:168px;height:168px;margin:-76px auto 6px;display:block;border-radius:50%;object-fit:cover;border:5px solid #fff;box-shadow:0 6px 18px rgba(108,92,231,.3);animation:troi 4s ease-in-out infinite}
.mat{transform-box:fill-box;transform-origin:center;animation:chop 5s infinite}
.sao{transform-box:fill-box;transform-origin:center;animation:lapla 2.4s ease-in-out infinite}
.sao.b{animation-delay:.8s}.sao.c{animation-delay:1.6s}
@keyframes troi{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes chop{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.08)}}
@keyframes lapla{0%,100%{opacity:.3;transform:scale(.7)}50%{opacity:1;transform:scale(1.1)}}
@media (prefers-reduced-motion:reduce){.avatar,.mat,.sao{animation:none}}
h1{font-size:25px;font-weight:800;line-height:1.2;margin-top:6px}
.vai{display:inline-block;margin-top:10px;background:var(--tim-nhat);padding:6px 14px;border-radius:999px;font-weight:700;font-size:13px}
.gt{margin-top:14px;color:var(--xam);font-size:14.5px}
.nut{display:grid;gap:10px;margin-top:20px}
.nut a,.nut button{font:inherit;font-weight:700;font-size:15px;border:0;cursor:pointer;text-decoration:none;display:flex;align-items:center;justify-content:center;gap:8px;min-height:50px;border-radius:16px;padding:0 16px}
.zalo{background:var(--muc);color:#fff}
.goi{background:var(--tim-dam);color:#fff}
.phu{background:var(--tim-rat-nhat);color:var(--muc)}
.hai{display:grid;grid-template-columns:1fr 1fr;gap:10px}
a:focus-visible,button:focus-visible{outline:3px solid var(--tim-dam);outline-offset:2px}
section{background:var(--trang);border-radius:24px;padding:22px 20px;margin-top:16px;box-shadow:0 6px 18px rgba(30,27,58,.08)}
h2{font-size:17px;font-weight:800;display:flex;align-items:center;gap:8px;margin-bottom:12px}
h2::after{content:"";flex:1;height:2px;background:var(--tim-nhat);border-radius:2px}
.diem{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}
.diem .o{background:var(--muc);color:#fff;border-radius:18px;padding:16px 10px;text-align:center}
.diem .n{font-size:26px;font-weight:800;line-height:1.1;color:var(--tim-nhat)}
.diem .t{margin-bottom:6px;font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.cc{gap:0}
.cc li{padding:13px 0 13px 34px;font-size:15px;font-weight:500;border-top:1.5px solid var(--tim-rat-nhat)}
.cc li:first-child{border-top:0}
.cc li::before{top:12px;width:22px;height:22px;font-size:13px}
.cc b{font-weight:800;color:var(--tim-dam)}
.dv{display:grid;gap:12px}
.the-dv{border:2px solid var(--tim-nhat);border-radius:18px;padding:14px 16px}
.the-dv h3{font-size:15px;font-weight:800}
.the-dv p{font-size:13.5px;color:var(--xam);margin-top:2px}
.gia{margin-top:8px;font-weight:800;color:var(--tim-dam);font-size:17px}
.gia small{font-weight:600;color:var(--xam);font-size:12.5px}
.uudai{margin-top:14px;display:grid;gap:8px}
.uudai div{background:var(--tim-rat-nhat);border-radius:14px;padding:10px 14px;font-size:14px;font-weight:600}
ul{list-style:none;display:grid;gap:10px}
li{font-size:14.5px;padding-left:28px;position:relative}
li::before{content:"✓";position:absolute;left:0;top:1px;width:20px;height:20px;border-radius:50%;background:var(--tim-nhat);font-size:12px;font-weight:800;display:grid;place-items:center}
.nho{font-size:12.5px;color:var(--xam);margin-top:10px}
html{scroll-behavior:smooth}
.datlich{background:linear-gradient(135deg,var(--tim-dam),#8f7bff);color:#fff;grid-column:1/-1;box-shadow:0 6px 16px rgba(108,92,231,.35)}
.tabs{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px}
.tabs button{font:inherit;font-weight:700;font-size:14px;border:2px solid var(--tim-nhat);background:#fff;color:var(--muc);border-radius:14px;padding:10px 8px;cursor:pointer;min-height:56px;line-height:1.25}
.tabs button small{display:block;font-weight:600;font-size:12px;color:var(--xam)}
.tabs button.on{background:var(--muc);border-color:var(--muc);color:#fff}
.tabs button.on small{color:var(--tim-nhat)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.chips button{font:inherit;font-weight:700;font-size:14px;border:2px solid var(--tim-nhat);background:var(--tim-rat-nhat);color:var(--muc);border-radius:12px;padding:10px 12px;cursor:pointer;min-height:44px}
.chips button.on{background:var(--tim-dam);border-color:var(--tim-dam);color:#fff}
#gio button{min-width:72px}
#frm,#frm-hp{margin-top:16px;display:grid;gap:12px}
#frm label,#frm-hp label{font-size:13.5px;font-weight:700;display:grid;gap:5px}
#frm em,#frm-hp em{font-weight:500;font-style:normal;color:var(--xam)}
#frm input,#frm textarea,#frm-hp input,#frm-hp textarea{font:inherit;font-size:16px;font-weight:500;border:2px solid var(--tim-nhat);border-radius:12px;padding:11px 12px;width:100%;color:var(--muc);background:#fff}
#frm input:focus,#frm textarea:focus,#frm-hp input:focus,#frm-hp textarea:focus{outline:3px solid rgba(108,92,231,.35);border-color:var(--tim-dam)}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;opacity:0}
.chon{background:var(--tim-rat-nhat);border-radius:14px;padding:12px 14px;font-weight:700;font-size:14.5px}
.xn{width:100%}
#xn-hp{width:100%}
.xn[disabled]{opacity:.6;cursor:wait}
#loi,#loi-hp{color:#c0344f;font-weight:600;font-size:14px}
#xong{margin-top:14px;text-align:center}
#xong h3{font-size:18px;font-weight:800;color:var(--tim-dam)}
#xong p{margin-top:6px;font-size:14.5px}
#xong .nut{margin-top:12px}
.nho a{color:var(--tim-dam);font-weight:700}
footer{text-align:center;color:var(--xam);font-size:12.5px;margin-top:22px}
@media (min-width:420px){.nut{grid-template-columns:1fr 1fr}.nut .zalo{grid-column:1/-1}}
/* ---- Thanh toán ---- */
.tt-chon{border:0;padding:0;margin:0;display:grid;gap:8px}
.tt-chon legend{font-size:13.5px;font-weight:700;margin-bottom:6px;padding:0}
.tt-tieude{font-size:13px;font-weight:800;margin-top:6px;color:var(--xam)}
#goi{display:grid;gap:8px}
.rd{display:flex!important;flex-direction:row;gap:10px;align-items:flex-start;border:2px solid var(--tim-nhat);border-radius:14px;padding:12px;cursor:pointer;font-size:14px;font-weight:700;background:#fff}
.rd em{font-weight:500;font-size:12.5px;color:var(--xam)}
#frm .rd input,#frm-hp .rd input,.rd input{width:20px;height:20px;padding:0;margin:1px 0 0;flex:none;accent-color:var(--tim-dam);border-radius:50%}
.rd:has(input:checked){border-color:var(--tim-dam);background:var(--tim-rat-nhat)}
.tt-qr{background:#fff;border:2px solid var(--tim-nhat);border-radius:18px;padding:10px;width:min(100%,280px);margin:12px auto 6px}
.tt-qr svg{display:block;width:100%;height:auto}
.tt-bang{margin-top:10px;border:2px solid var(--tim-nhat);border-radius:16px;text-align:left;overflow:hidden}
.tt-dong{display:flex;align-items:center;gap:6px;padding:10px 10px;font-size:14px;border-top:1.5px solid var(--tim-rat-nhat)}
.tt-dong:first-child{border-top:0}
.tt-nhan{color:var(--xam);font-weight:600;flex:0 0 86px;font-size:12.5px}
.tt-gt{flex:1;min-width:0;font-size:13.5px;overflow-wrap:anywhere}
.tt-chep{font:inherit;font-size:12.5px;font-weight:700;border:0;background:var(--tim-nhat);color:var(--muc);border-radius:10px;padding:7px 10px;cursor:pointer;min-height:34px}
.tt-dem{margin-top:10px;font-weight:800;color:#c0344f}
.tt-tt{margin-top:6px;font-size:13.5px;color:var(--xam)}
.tt-trang header,.tt-trang .tt-dau{text-align:center}

/* ---- Tiêu đề các bước ---- */
.buoc{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;font-weight:800;font-size:15px;margin:14px 0 8px}
.buoc span{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--tim-dam);color:#fff;font-size:13px;flex:none}
.sao{color:#c0344f}
.bb{font-style:normal;font-weight:600;font-size:12.5px;color:var(--xam);flex-basis:100%;padding-left:32px;margin-top:-2px}
.lb{display:block}

/* ---- Ba lựa chọn đặt lịch / thanh toán ---- */
.tabs .rong{grid-column:1/-1}
.buoc.mo{opacity:.65}

/* phần tử đang ẩn không được hiện ra */
[hidden]{display:none!important}

/* ---- Nút gửi biểu mẫu ---- */
button.xn,button.zalo{font:inherit;font-weight:700;font-size:15px;border:0;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;min-height:52px;border-radius:16px;padding:0 16px;width:100%;line-height:1.3}
button.xn:disabled{opacity:.65;cursor:wait}