.bank-mark.bank-mark-logo{background:var(--bank,#2964c8);padding:7px;box-sizing:border-box}.bank-mark-logo img{display:block;width:100%;height:100%;object-fit:contain}.bank-card.bank-ttb{--bank:#0050a4}
.payment-hero{padding:64px 0;background:linear-gradient(135deg,#f5f9ff 0%,#e9f2ff 55%,#f7fbff 100%);border-bottom:1px solid var(--line)}
.payment-hero-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(300px,.65fr);gap:56px;align-items:center}.payment-hero h1{font-size:clamp(2.25rem,5vw,4rem);line-height:1.12;letter-spacing:-.035em;margin:0 0 16px}.payment-lead{max-width:730px;margin:0 0 28px;color:var(--muted);font-size:1.12rem}.payment-primary-action{gap:12px}.payment-primary-action span{font-size:1.35rem}.payment-safety{display:flex;gap:16px;padding:24px;border:1px solid #bdd8ff;border-radius:22px;background:rgba(255,255,255,.9);box-shadow:0 18px 42px rgba(23,76,145,.1)}.payment-safety-icon{display:grid;place-items:center;width:44px;height:44px;flex:0 0 44px;border-radius:50%;background:#e6f7ed;color:#08783e;font-size:1.25rem;font-weight:900}.payment-safety strong{font-size:1.08rem}.payment-safety p{margin:5px 0 0;color:var(--muted);font-size:.92rem;line-height:1.65}
.payment-section{background:#fff}.payment-layout{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(330px,.8fr);gap:42px;align-items:start}.payment-heading h2,.payment-steps h2{margin:0;font-size:clamp(1.6rem,3vw,2.15rem);line-height:1.3}.payment-heading>p:last-child{margin:10px 0 24px;color:var(--muted)}.payment-heading>p strong{color:var(--ink);font-size:1.08rem}.bank-list{display:grid;gap:12px}.bank-card{position:relative;display:flex;align-items:center;gap:16px;padding:18px 20px;border:1px solid var(--line);border-left:5px solid var(--bank,#2964c8);border-radius:16px;background:#fff;box-shadow:0 7px 20px rgba(20,51,89,.055)}.bank-mark{display:grid;place-items:center;width:48px;height:48px;flex:0 0 48px;border-radius:14px;background:color-mix(in srgb,var(--bank,#2964c8) 12%,white);color:var(--bank,#2964c8);font-size:1.15rem;font-weight:900}.bank-details{display:grid;grid-template-columns:minmax(120px,1fr) auto;align-items:center;column-gap:20px;width:100%}.bank-details h3{grid-row:1/3;margin:0;font-size:1.08rem}.bank-details small{color:var(--muted);text-align:right}.bank-details>strong{font-size:1.16rem;letter-spacing:.035em;text-align:right}.bank-kbank{--bank:#159447}.bank-krungthai{--bank:#1595d3}.bank-bangkok{--bank:#243d92}.bank-scb{--bank:#6f2c91}.bank-ttb{--bank:#f05a28}.payment-check-note{margin:18px 0 0;padding:16px 18px;border-radius:14px;background:#fff8e8;border:1px solid #f0db9e;color:#6e5310;font-size:.92rem}
.payment-steps{position:sticky;top:112px;padding:28px;border:1px solid var(--line);border-radius:22px;background:#f8fbff;box-shadow:var(--shadow)}.payment-steps ol{display:grid;gap:2px;margin:22px 0;padding:0;list-style:none}.payment-steps li{display:flex;gap:13px;padding:12px 0;border-bottom:1px solid #dfe8f4}.payment-steps li:last-child{border-bottom:0}.payment-steps li>span{display:grid;place-items:center;width:30px;height:30px;flex:0 0 30px;border-radius:50%;background:var(--blue);color:#fff;font-weight:900}.payment-steps li strong{font-size:.98rem}.payment-steps li p{margin:2px 0 0;color:var(--muted);font-size:.88rem}.payment-step-button{width:100%}.line-contact{display:flex;align-items:center;gap:14px;margin-top:20px;padding-top:20px;border-top:1px solid var(--line)}.line-contact img{width:70px;height:70px;object-fit:contain;border-radius:12px}.line-contact p{margin:2px 0;color:var(--muted);font-size:.86rem}.line-contact a{color:var(--blue);font-weight:900;text-decoration:none}
@media(max-width:850px){.payment-hero{padding:46px 0}.payment-hero-grid,.payment-layout{grid-template-columns:1fr;gap:28px}.payment-safety{max-width:620px}.payment-steps{position:static}.payment-layout{width:min(680px,calc(100% - 32px))}}
@media(max-width:520px){.payment-hero h1{font-size:2.25rem}.payment-lead{font-size:1rem}.payment-safety,.payment-steps{padding:20px}.bank-card{padding:15px}.bank-mark{width:42px;height:42px;flex-basis:42px}.bank-details{grid-template-columns:1fr;gap:1px}.bank-details h3{grid-row:auto}.bank-details small,.bank-details>strong{text-align:left}.bank-details>strong{font-size:1.05rem}.payment-primary-action{width:100%}}
@media(prefers-color-scheme:dark){html[data-theme="dark"] .payment-hero{background:linear-gradient(135deg,#101b2d,#162b48)}html[data-theme="dark"] .payment-safety,html[data-theme="dark"] .bank-card,html[data-theme="dark"] .payment-steps{background:#16243a;border-color:#34445e}html[data-theme="dark"] .payment-section{background:#0f1a2b}html[data-theme="dark"] .payment-check-note{background:#332b18;border-color:#665529;color:#f5dda0}}