@import "https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap";*,:before,:after{box-sizing:border-box;margin:0;padding:0}body{color:#333;background:#f0f2f5;font-family:Roboto,system-ui,sans-serif;font-size:14px}.xtk-co{background:#f0f2f5;min-height:100vh;padding:24px 16px 40px}.xtk-co__inner{grid-template-columns:1fr 1fr;gap:20px;max-width:960px;margin:0 auto;display:grid}.xtk-co__left,.xtk-co__right{background:#fff;border-radius:12px;padding:24px;box-shadow:0 2px 12px #00000014}.xtk-co__section-title{color:#222;margin-bottom:16px;font-size:15px;font-weight:700}.xtk-co__method-grid{grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:12px;display:grid}.xtk-co__method-btn{cursor:pointer;color:#444;background:#fafafa;border:2px solid #e0e0e0;border-radius:10px;flex-direction:column;justify-content:center;align-items:center;gap:6px;padding:12px 8px;font-size:13px;font-weight:600;transition:all .18s;display:flex}.xtk-co__method-btn:hover:not(:disabled){border-color:var(--method-color);background:var(--method-bg);color:var(--method-color);transform:translateY(-1px)}.xtk-co__method-btn--active{border-color:var(--method-color)!important;background:var(--method-bg)!important;color:var(--method-color)!important}.xtk-co__method-btn:disabled{opacity:.55;cursor:not-allowed}.xtk-co__method-label{font-size:12px}.xtk-co__bank-btn{color:#333;cursor:pointer;background:#fafafa;border:2px solid #e0e0e0;border-radius:10px;justify-content:center;align-items:center;gap:10px;width:100%;margin-bottom:16px;padding:13px 20px;font-size:14px;font-weight:600;transition:all .18s;display:flex}.xtk-co__bank-btn:hover:not(:disabled){color:#1a237e;background:#e8eaf6;border-color:#1a237e}.xtk-co__bank-btn--active{color:#1a237e!important;background:#e8eaf6!important;border-color:#1a237e!important}.xtk-co__bank-btn:disabled{opacity:.55;cursor:not-allowed}.xtk-co__divider{border:none;border-top:1px solid #eee;margin:16px 0}.xtk-co__qr-area{margin-bottom:20px}.xtk-co__bank-info{flex-direction:column;gap:12px;display:flex}.xtk-co__bank-logo{font-size:28px}.xtk-co__bank-details{flex-direction:column;gap:5px;display:flex}.xtk-co__bank-name{color:#1a237e;font-size:16px;font-weight:700}.xtk-co__bank-branch{color:#888;font-size:12px}.xtk-co__bank-account,.xtk-co__bank-holder,.xtk-co__bank-amount{color:#333;font-size:14px}.xtk-co__bank-account-label{color:#888;margin-right:6px}.xtk-co__bank-account-number{letter-spacing:2px;color:#1a237e;font-size:18px}.xtk-co__price-highlight{color:#e66000;font-size:16px;font-weight:700}.xtk-co__qr-wrapper{flex-direction:column;align-items:center;gap:8px;margin-top:8px;display:flex}.xtk-co__qr-img{object-fit:contain;border:1px solid #eee;border-radius:8px;width:180px;height:180px}.xtk-co__qr-label{color:#555;letter-spacing:.5px;text-align:center;font-size:12px;font-weight:700}.xtk-co__app-qr{flex-direction:column;align-items:center;gap:10px;display:flex}.xtk-co__qr-amount{color:#e66000;font-size:18px;font-weight:700}.xtk-co__confirm-btn{color:#fff;cursor:pointer;background:linear-gradient(135deg,#e66000,#ff8c00);border:none;border-radius:10px;width:100%;padding:14px;font-size:15px;font-weight:700;transition:opacity .2s,transform .1s;box-shadow:0 4px 14px #e6600059}.xtk-co__confirm-btn:hover{opacity:.9;transform:translateY(-1px)}.xtk-co__waiting{color:#e65100;background:#fff3e0;border:1px solid #ffcc80;border-radius:10px;align-items:center;gap:12px;padding:14px 16px;font-weight:500;display:flex}.xtk-co__success-badge{color:#2e7d32;text-align:center;background:#e8f5e9;border:1px solid #a5d6a7;border-radius:10px;padding:14px 16px;font-weight:600}.xtk-co__spinner{border:3px solid #0000001a;border-top-color:#e66000;border-radius:50%;flex-shrink:0;width:22px;height:22px;animation:.7s linear infinite xtk-spin}.xtk-co__spinner--sm{border-width:2px;border-top-color:#fff;width:16px;height:16px}@keyframes xtk-spin{to{transform:rotate(360deg)}}.xtk-co__loading,.xtk-co__error{color:#888;flex-direction:column;justify-content:center;align-items:center;gap:16px;min-height:60vh;display:flex}.xtk-co__error-box{text-align:center;background:#fff;border-radius:12px;padding:32px;line-height:2;box-shadow:0 2px 12px #00000014}.xtk-co__error-box a{color:#e66000;text-decoration:underline}.xtk-co__product-row{align-items:flex-start;gap:14px;margin-bottom:4px;display:flex}.xtk-co__dual-thumbs{flex-shrink:0;gap:8px;display:flex}.xtk-co__thumb-card{flex-direction:column;align-items:center;gap:4px;display:flex}.xtk-co__thumb-tag{color:#e66000;white-space:nowrap;background:#fff7ed;border:1px solid #fed7aa;border-radius:4px;padding:1px 6px;font-size:10px;font-weight:700}.xtk-co__product-thumb{object-fit:cover;-webkit-user-select:none;user-select:none;-webkit-user-drag:none;border:1px solid #e2e8f0;border-radius:8px;flex-shrink:0;width:70px;height:70px;transition:transform .15s}.xtk-co__product-thumb:hover{transform:scale(1.05)}.xtk-co__product-info{flex:1;min-width:0}.xtk-co__product-name{color:#222;white-space:nowrap;text-overflow:ellipsis;margin-bottom:4px;font-size:14px;font-weight:600;overflow:hidden}.xtk-co__product-format{color:#999;font-size:12px}.xtk-co__product-price{color:#222;white-space:nowrap;font-size:15px;font-weight:700}.xtk-co__total-row{justify-content:space-between;align-items:center;padding:6px 0;font-size:15px;font-weight:500;display:flex}.xtk-co__format-box{background:#f8fafc;border:1px solid #e2e8f0;border-radius:10px;margin:16px 0;padding:12px 14px}.xtk-co__format-header{justify-content:space-between;align-items:center;margin-bottom:10px;display:flex}.xtk-co__format-title{color:#334155;font-size:13px;font-weight:700}.xtk-co__format-current{color:#fff;text-transform:uppercase;letter-spacing:.5px;background:#e66000;border-radius:12px;padding:2px 8px;font-size:11px;font-weight:700}.xtk-co__format-grid{grid-template-columns:repeat(2,1fr);gap:8px;display:grid}.xtk-co__format-item{cursor:pointer;text-align:left;background:#fff;border:1.5px solid #cbd5e1;border-radius:8px;flex-direction:column;align-items:flex-start;padding:8px 10px;font-family:inherit;transition:all .18s;display:flex}.xtk-co__format-item:hover:not(:disabled){background:#fffaf5;border-color:#e66000;transform:translateY(-1px)}.xtk-co__format-item--active{box-shadow:0 0 0 2px #e6600033;background:#fff7ed!important;border-color:#e66000!important}.xtk-co__format-item--full{grid-column:span 2}.xtk-co__format-item-top{align-items:center;gap:6px;width:100%;margin-bottom:2px;display:flex}.xtk-co__format-badge{letter-spacing:.5px;border-radius:4px;padding:1px 5px;font-size:9px;font-weight:800}.xtk-co__format-name{color:#1e293b;font-size:13px;font-weight:700}.xtk-co__format-desc{color:#64748b;font-size:11px;line-height:1.3}.xtk-co__action-btns{grid-template-columns:1fr 1fr;gap:12px;margin:20px 0 12px;display:grid}.xtk-co__download-btn{color:#fff;cursor:pointer;background:linear-gradient(135deg,#e66000,#ff8c00);border:none;border-radius:9px;justify-content:center;align-items:center;gap:6px;padding:13px 10px;font-size:14px;font-weight:700;transition:opacity .2s,transform .1s;display:flex;box-shadow:0 4px 14px #e660004d}.xtk-co__download-btn:hover:not(:disabled){opacity:.88;transform:translateY(-1px)}.xtk-co__download-btn--disabled{box-shadow:none!important;cursor:not-allowed!important;color:#999!important;background:#ccc!important}.xtk-co__download-btn--disabled:hover{opacity:1!important;transform:none!important}.xtk-co__print-btn{color:#fff;cursor:pointer;background:linear-gradient(135deg,#e66000,#ff8c00);border:none;border-radius:9px;justify-content:center;align-items:center;gap:6px;padding:13px 10px;font-size:14px;font-weight:700;transition:opacity .2s,transform .1s;display:flex;box-shadow:0 4px 14px #e660004d}.xtk-co__print-btn:hover{opacity:.88;transform:translateY(-1px)}.xtk-co__download-hint{color:#999;text-align:center;font-size:12px;line-height:1.6}.xtk-co__back-link{text-align:center;margin-top:20px}.xtk-co__back-link a{color:#e66000;font-size:13px;text-decoration:none}.xtk-co__back-link a:hover{text-decoration:underline}@media (width<=680px){.xtk-co{padding:12px 10px 32px}.xtk-co__inner{grid-template-columns:1fr}.xtk-co__method-grid{grid-template-columns:repeat(3,1fr)}.xtk-co__qr-img{width:150px;height:150px}.xtk-co__action-btns{grid-template-columns:1fr 1fr}}
