:root{--bg:#F6F3EF;--paper:#fff;--navy:#12354A;--accent:#C67C4E;--accent-soft:#F3E5D9;--ink:#1D2939;--muted:#667085;--line:rgba(18,53,74,.12);--green:#2E7655;--red:#B64242;--shadow:0 22px 70px rgba(18,53,74,.1)}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{font-family:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;background:var(--bg);color:var(--ink);line-height:1.65;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}button,input{font:inherit}svg{display:block;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.shell{width:min(1080px,calc(100% - 40px));margin:0 auto}
.checkout-header{height:72px;background:var(--navy);color:#fff}
.checkout-header .shell{height:100%;display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand{font:600 19px/1 'Playfair Display',serif}
.back-link{display:flex;align-items:center;gap:8px;color:rgba(255,255,255,.7);font-size:13px;font-weight:600}
.back-link:hover{color:#fff}.back-link svg{width:18px;height:18px}
.checkout-hero{padding:72px 0 68px;background:var(--navy);color:#fff;text-align:center}
.kicker,.small-label{display:block;color:#E8AA7E;font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.checkout-hero h1{max-width:780px;margin:14px auto 0;font:600 clamp(40px,6vw,65px)/1.05 'Playfair Display',serif;letter-spacing:-.03em}
.checkout-hero h1 em{color:#F1B88F;font-weight:500}
.checkout-hero p{max-width:660px;margin:20px auto 0;color:rgba(255,255,255,.65);font-size:16px;line-height:1.75}
.checkout-section{padding:70px 0 96px}
.checkout-grid{display:grid;grid-template-columns:.82fr 1.18fr;gap:40px;align-items:start}
.summary-card,.payment-card{border-radius:22px;background:var(--paper);box-shadow:var(--shadow)}
.summary-card{padding:31px}
.summary-card h2{margin-top:9px;font:600 28px/1.2 'Playfair Display',serif;color:var(--navy)}
.summary-card ul{list-style:none;display:grid;gap:14px;margin-top:25px}
.summary-card li{display:grid;grid-template-columns:22px 1fr;gap:11px;align-items:start;color:#475467;font-size:14px}
.summary-card li svg{width:20px;height:20px;color:var(--green)}
.price-line{display:flex;align-items:baseline;justify-content:space-between;gap:20px;margin-top:28px;padding-top:22px;border-top:1px solid var(--line)}
.price-line span{color:var(--muted);font-size:13px}.price-line b{font:600 28px/1 'Playfair Display',serif;color:var(--accent)}
.clarity-card{display:grid;grid-template-columns:26px 1fr;gap:13px;margin-top:18px;padding:20px;border-radius:16px;background:#ECEFEE;color:#4F645C}
.clarity-card>svg{width:23px;height:23px}.clarity-card b{display:block;color:var(--navy);font-size:13px}.clarity-card p{margin-top:4px;font-size:12px;line-height:1.65}
.trust-row{display:flex;gap:17px;flex-wrap:wrap;margin-top:20px;color:var(--muted);font-size:11px}
.trust-row span{display:flex;align-items:center;gap:7px}.trust-row svg{width:17px;height:17px;color:var(--green)}
.payment-card{padding:38px}
.form-heading{text-align:center}.form-heading h2,.state-panel h2{margin-top:9px;font:600 31px/1.2 'Playfair Display',serif;color:var(--navy)}.form-heading p,.state-panel>p{max-width:490px;margin:9px auto 0;color:var(--muted);font-size:13px;line-height:1.7}
.person-card{margin-top:27px;border-radius:14px;background:#F8F6F3;overflow:hidden}
.person-card>div{display:flex;justify-content:space-between;gap:22px;padding:12px 15px;border-bottom:1px solid var(--line);font-size:13px}.person-card>div:last-child{border-bottom:0}.person-card span{color:var(--muted)}.person-card b{text-align:right;color:var(--navy);word-break:break-word}
.payment-consent{display:grid;grid-template-columns:18px 1fr;gap:10px;align-items:start;margin-top:22px;color:var(--muted);font-size:12px;line-height:1.55;cursor:pointer}.payment-consent input{width:17px;height:17px;margin-top:1px;accent-color:var(--accent)}
.primary-button,.secondary-button{width:100%;display:flex;align-items:center;justify-content:center;gap:10px;margin-top:20px;border:0;border-radius:11px;padding:15px 20px;font-weight:800;cursor:pointer;transition:opacity .2s,transform .2s}.primary-button{background:var(--accent);color:#fff;box-shadow:0 13px 30px rgba(198,124,78,.27)}.primary-button:hover{transform:translateY(-1px)}.primary-button:disabled{opacity:.55;cursor:wait;transform:none}.primary-button svg{width:19px;height:19px}.secondary-button{background:#EEF1F0;color:var(--navy);box-shadow:inset 0 0 0 1px var(--line)}
.payment-fineprint{margin-top:12px;color:#8B8178;font-size:10.5px;line-height:1.6;text-align:center}.error-text{min-height:18px;margin-top:7px;color:var(--red);font-size:11px;text-align:center}
.state-panel{text-align:center}.state-panel[hidden]{display:none}.state-icon{width:66px;height:66px;display:flex;align-items:center;justify-content:center;margin:0 auto 22px;border-radius:50%;background:#E8F4ED;color:var(--green)}.state-icon.muted{background:#EEF0F0;color:#65746E}.state-icon svg{width:36px;height:36px}
.state-panel>.primary-button{margin-top:25px}
.qr-frame{width:min(280px,80%);aspect-ratio:1;margin:24px auto 18px;padding:10px;border-radius:18px;background:#fff;box-shadow:0 0 0 1px var(--line),0 18px 42px rgba(18,53,74,.08)}.qr-frame img{width:100%;height:100%;object-fit:contain;border-radius:10px}
.order-details{border-radius:14px;background:#F8F6F3;overflow:hidden;text-align:left}.order-details>div{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:12px 15px;border-bottom:1px solid var(--line);font-size:12px}.order-details>div:last-child{border-bottom:0}.order-details span{color:var(--muted)}.order-details button{display:flex;align-items:center;gap:7px;border:0;background:transparent;color:var(--navy);cursor:pointer}.order-details button svg{width:16px;height:16px}.order-details .amount{color:var(--accent);font-size:18px}
.waiting{display:flex;align-items:center;justify-content:center;gap:9px;margin-top:17px;color:#A16A24;font-size:12px;font-weight:700}.waiting span{width:8px;height:8px;border-radius:50%;background:#D49A49;box-shadow:0 0 0 5px rgba(212,154,73,.14)}.waiting.success{color:var(--green)}.waiting.success span{background:var(--green);box-shadow:0 0 0 5px rgba(46,118,85,.14)}
.support-note{margin-top:14px;color:var(--muted);font-size:11px}.support-note a{color:var(--accent);font-weight:700}
.success-order{margin:22px 0 0;padding:13px;border-radius:12px;background:#F8F6F3;color:var(--muted);font-size:12px}.success-order b{color:var(--navy)}
footer{padding:25px 0;background:var(--navy);color:rgba(255,255,255,.46);font-size:11px}.footer-wrap{display:flex;align-items:center;justify-content:space-between;gap:20px}.footer-wrap nav{display:flex;gap:18px;flex-wrap:wrap}.footer-wrap a:hover{color:#fff}
@media(max-width:820px){.checkout-grid{grid-template-columns:1fr}.summary-column{order:2}.payment-card{order:1}}
@media(max-width:560px){.shell{width:min(100% - 28px,1080px)}.checkout-header{height:64px}.brand{font-size:17px}.back-link{font-size:0}.back-link::after{content:"Quay lại";font-size:12px}.checkout-hero{padding:52px 0}.checkout-hero h1{font-size:42px}.checkout-section{padding:38px 0 65px}.payment-card{padding:27px 19px}.summary-card{padding:25px 21px}.footer-wrap{align-items:flex-start;flex-direction:column}.footer-wrap nav{flex-direction:column;gap:8px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important;animation:none!important}}