body.public-checkout-page{background:#fffaf0}
.public-checkout-page .workspace{max-width:960px;margin:auto}
.public-checkout-page #main{padding:28px 24px 48px}
.public-checkout{max-width:820px;margin:auto;min-width:0}
.checkout-introduction h1{margin:8px 0;font-size:clamp(25px,4vw,36px);line-height:1.25}
.checkout-introduction p{color:#43564e}
.checkout-progress{display:flex;list-style:none;padding:0;margin:24px 0;gap:12px;counter-reset:checkout}
.checkout-progress li{counter-increment:checkout;flex:1;display:flex;gap:8px;align-items:center;font-weight:800;color:#43564e;font-size:14px}
.checkout-progress li::before{content:counter(checkout);display:grid;place-items:center;flex:none;width:30px;height:30px;border:1px solid #b9c8bf;border-radius:50%;background:white}
.checkout-progress [aria-current]::before{background:#117768;color:white;border-color:#117768}
.public-checkout .credit-checkout{background:white;padding:24px;border:1px solid #dce6df;border-radius:16px;box-shadow:0 8px 24px #243c3509}
.public-checkout .checkout-product-name{font-size:clamp(22px,3vw,30px);line-height:1.3;overflow-wrap:anywhere;margin:12px 0}
.public-checkout .checkout-coupon{margin:20px 0}
.public-checkout .checkout-coupon summary{cursor:pointer;min-height:44px;display:list-item;padding:10px 0;font-weight:800;color:#117768}
.public-checkout .checkout-coupon input{box-sizing:border-box;width:100%;max-width:360px}
.public-checkout .credit-checkout p,.public-checkout .credit-checkout dd{overflow-wrap:anywhere}
@media(max-width:600px){.public-checkout-page #main{padding:20px 12px 32px}.public-checkout .credit-checkout{padding:18px 14px}.checkout-progress{gap:6px}.checkout-progress li{gap:5px;font-size:12px}.checkout-progress li::before{width:26px;height:26px}}
.public-checkout .visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.guest-notice{margin:18px 0;padding:0;border:1px solid #dce6df;border-radius:12px;background:#fbfdfb}
.guest-notice summary{cursor:pointer;min-height:44px;box-sizing:border-box;display:flex;align-items:center;gap:10px;padding:0 14px;list-style:none;font-size:16px;font-weight:800;line-height:1.3;color:#117768}
.guest-notice summary::-webkit-details-marker{display:none}
.guest-notice summary::after{content:"";flex:none;margin-left:auto;width:9px;height:9px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .15s}
.guest-notice[open]>summary::after{transform:translateY(2px) rotate(-135deg)}
.guest-notice summary:focus-visible{outline:2px solid #117768;outline-offset:-2px;border-radius:12px}
@media(prefers-reduced-motion:reduce){.guest-notice summary::after{transition:none}}
.guest-notice-body{max-height:min(320px,45vh);overflow-y:auto;overscroll-behavior:contain;padding:2px 14px 12px;border-top:1px solid #dce6df;font-size:15px;line-height:1.6}
.guest-notice-body:focus-visible{outline:2px solid #117768;outline-offset:-2px}
.guest-notice-body h3{margin:14px 0 4px;font-size:16px;line-height:1.4}
.guest-notice-body p{margin:6px 0}
.guest-notice-body ul{margin:6px 0;padding-left:20px}
.guest-notice-body li{margin:4px 0}
.guest-checkout .guest-ack{display:flex;align-items:flex-start;gap:10px;margin:18px 0}
.guest-checkout .guest-ack input{width:22px;height:22px;flex:none;margin:0}
.cart-lines{list-style:none;margin:0 0 16px;padding:0;border-top:1px solid #dce6df}
.cart-lines li{display:grid;grid-template-columns:136px minmax(0,1fr) auto;grid-template-areas:"thumb name price" "thumb offer remove";gap:4px 16px;align-items:center;padding:14px 0;border-bottom:1px solid #dce6df}
.cart-lines .checkout-thumb{grid-area:thumb;align-self:start}
.cart-lines .cart-line-name{grid-area:name;font-weight:800;overflow-wrap:anywhere}
.cart-lines .cart-line-name a{color:inherit}
.cart-lines .cart-line-offer{grid-area:offer;color:#43564e;font-size:15px}
.cart-lines .cart-line-price{grid-area:price;font-weight:800;white-space:nowrap}
.cart-lines .btn{grid-area:remove;justify-self:end;min-height:44px}
.cart-lines li.is-gone .cart-line-name,.cart-lines li.is-gone .cart-line-price{text-decoration:line-through}
.cart-lines li.is-gone .checkout-thumb img{opacity:.45}
.cart-lines--order li{grid-template-areas:"thumb name price" "thumb offer ."}
/* Ảnh bìa của bài trong giỏ và ở trang thanh toán: khung 16:9 cố định nên trang không dịch khi ảnh về; ảnh không có hoặc hỏng thì hiện nhân vật. */
.checkout-thumb{display:block;width:100%;aspect-ratio:16/9;overflow:hidden;border:1px solid #dce6df;border-radius:10px;background:#fff4dc}
.checkout-thumb img{display:block;width:100%;height:100%;object-fit:cover}
.checkout-thumb.is-fallback img{object-fit:contain;padding:8%;box-sizing:border-box}
.checkout-product{display:grid;grid-template-columns:240px minmax(0,1fr);gap:20px;align-items:start;margin:12px 0}
.checkout-product .checkout-product-name{margin-top:0}
.checkout-product-text>:last-child{margin-bottom:0}
@media(max-width:600px){
 .cart-lines li{grid-template-columns:112px minmax(0,1fr);grid-template-areas:"thumb name" "thumb offer" "thumb price" "remove remove";gap:4px 12px}
 .cart-lines--order li{grid-template-areas:"thumb name" "thumb offer" "thumb price"}
 .cart-lines .cart-line-price{justify-self:start}
 .checkout-product{grid-template-columns:120px minmax(0,1fr);gap:12px}
 .public-checkout .checkout-product .checkout-product-name{font-size:20px}
}
@media(forced-colors:active){.checkout-thumb{border-color:CanvasText}}
