:root{--blue:#1764d6;--ink:#183153;--muted:#71839b;--line:#dce6f2;--radius:16px;color-scheme:light}
body,body.public-page{font-family:"Segoe UI",Arial,sans-serif;color:var(--ink);background:radial-gradient(ellipse at 12% 12%,#c9e5ff 0,transparent 48%),radial-gradient(ellipse at 92% 85%,#dbe9ff 0,transparent 45%),#f3f7fc;min-height:100svh;padding:36px 20px}
body::before{content:"";position:fixed;inset:0;pointer-events:none;background-image:radial-gradient(#94afd926 .8px,transparent .8px);background-size:24px 24px;z-index:-1}
.card,.public-page .card{position:relative;width:min(460px,100%);padding:38px 32px 30px;background:#ffffffed;border:1px solid #fff;border-radius:26px;box-shadow:0 24px 65px #1d4e8a16,0 3px 12px #1d4e8a06;animation:arrive .35s ease-out}
.card::before{content:"";position:absolute;top:0;left:30px;right:30px;height:3px;border-radius:0 0 5px 5px;background:linear-gradient(90deg,transparent,#3986ec,transparent)}
.logo,.public-page .card .logo,#resultDialog .logo{font-family:"Arial Black","Segoe UI Black",Arial,sans-serif;font-size:clamp(42px,12vw,64px);font-weight:900;font-style:normal;line-height:1.05;letter-spacing:-3px;color:#20c2ad;text-shadow:none;overflow-wrap:anywhere;margin-bottom:20px}
h1,.public-page .card h1{font-size:25px;line-height:1.3;letter-spacing:.3px;color:#194d91;margin:0 0 8px;font-weight:800}
.public-page .form-time{display:table;margin:0 auto 28px;padding:8px 12px;border-radius:9px;background:#f0f6ff;color:#66809e;font-size:13px;font-variant-numeric:tabular-nums}
label,.public-page label{font-size:14px;font-weight:600;color:#304968;margin:22px 0 9px}
input,textarea,.public-page input{background:#f9fbfe;border:1px solid var(--line);border-radius:12px;padding:14px 15px;font-size:16px;color:var(--ink);font-family:inherit;line-height:1.4;transition:border-color .18s,box-shadow .18s,background .18s}
input::placeholder,textarea::placeholder{color:#8b9bb0}
input:hover,textarea:hover{border-color:#b3c9e5}
input:focus,textarea:focus{outline:0;background:#fff;border-color:#4389e9;box-shadow:0 0 0 4px #4389e91a}
input[readonly]{background:#edf3fc;color:#49698e}
textarea{min-height:118px;line-height:1.8}
button{font-family:inherit;transition:background .18s,box-shadow .18s,transform .18s}
.primary,.public-page .card .primary,#closeButton{background:linear-gradient(110deg,#287de3,#175ac7);border:1px solid #1963cd;border-radius:13px;color:#fff;font-size:16px;padding:15px;margin-top:24px;box-shadow:0 7px 17px #1764d625;text-shadow:none;letter-spacing:.4px}
.primary:hover,.public-page .card .primary:hover,#closeButton:hover{background:linear-gradient(110deg,#1d70d6,#114eaf);box-shadow:0 9px 22px #1764d635;transform:translateY(-1px)}
button:active{transform:translateY(1px)}
button:disabled,button:disabled:hover{cursor:wait;opacity:.8;transform:none;box-shadow:none}
.processing::before{content:"";display:inline-block;width:16px;height:16px;margin-right:10px;border:2px solid #ffffff60;border-top-color:#fff;border-radius:50%;vertical-align:-3px;animation:spin .7s linear infinite}
.processing-status{text-align:center;font-size:13px;color:#607994;margin:14px 0 0}
#processingDialog{width:min(360px,calc(100% - 32px));padding:36px 26px;border:1px solid #fff;border-radius:24px;background:#fff;text-align:center;box-shadow:0 25px 80px #18345635}
#processingDialog[open]{animation:arrive .2s ease-out}
#processingDialog::backdrop{background:#18345665;backdrop-filter:blur(7px)}
.processing-spinner{width:54px;height:54px;margin:0 auto 24px;border:5px solid #e5effc;border-top-color:#20c2ad;border-radius:50%;animation:spin .75s linear infinite}
#processingTitle{font-size:22px;margin:0 0 12px}
#processingMessage{font-size:14px;color:#71839b;line-height:1.6;margin:0}
@keyframes spin{to{transform:rotate(360deg)}}
button:focus-visible,a:focus-visible{outline:3px solid #86b9ff;outline-offset:4px}
.note{color:var(--muted);font-size:12px;margin:22px 0 0}
body.admin-page .card{width:min(560px,100%)}
.admin-page .card h1{font-size:23px}
#childAccountLinks:empty{display:none}
#childAccountLinks{display:grid;gap:8px;margin-top:12px}
#childAccountLinks a{display:block!important;margin:0!important;padding:12px 14px;background:#f0f6ff;border:1px solid #dfebfa;border-radius:10px;font-size:13px;text-decoration:none;line-height:1.5}
#childAccountLinks a:hover{background:#e5efff}
.admin-page main>a{display:table!important;margin:22px auto 0!important;text-decoration:none;font-size:14px;font-weight:600;padding:9px 16px;border-radius:10px;background:#eef5ff}
#resultDialog{width:min(430px,calc(100% - 32px));padding:32px 28px 26px;border-radius:25px;background:linear-gradient(145deg,#fff,#f6f9ff);border:1px solid #fff;box-shadow:0 30px 100px #122e5c38;max-height:calc(100svh - 32px);overflow:auto}
#resultDialog[open]{animation:arrive .25s ease-out}
#resultDialog::backdrop{background:#18345665;backdrop-filter:blur(7px)}
#resultTitle{margin:4px 0 10px;font-size:25px;color:#194d91;text-shadow:none}
#resultDialog .time{color:#71839b;font-size:13px;margin-bottom:24px;font-variant-numeric:tabular-nums}
#resultDetails{background:#f0f5fc;border:1px solid #e2eaf5;border-radius:15px;padding:0 16px}
#resultDialog .row{padding:18px 0;min-height:65px;font-size:14px;border-color:#dfe8f3;color:#61758f}
#resultDialog .row:last-child{border:0}
#resultDialog .row strong{color:#233e60;font-size:15px}
#resultDialog .row .points{font-size:24px;color:#1764d6}
#resultDialog .wish{color:#607994;font-size:14px;margin:24px 0 20px}
#closeButton{margin-top:0;font-size:17px}
@keyframes arrive{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:480px){body,body.public-page{padding:20px 14px}.card,.public-page .card{padding:30px 22px 24px;border-radius:22px}#resultDialog{padding:28px 22px 22px}#resultTitle{font-size:22px}.public-page .card h1{font-size:24px}}
@media(prefers-reduced-motion:reduce){*,*::before{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* Giao diện trắng đen tối giản. */
:root{--ink:#171717;--muted:#707070;--line:#dedede}
body,body.public-page{color:#171717;background:#fff}
body::before,.card::before{display:none}
.card,.public-page .card{background:#fff;border:1px solid #e8e8e8;border-radius:20px;box-shadow:0 8px 28px #00000006}
.logo,.public-page .card .logo,#resultDialog .logo{color:#171717;text-shadow:none}
h1,.public-page .card h1,#resultTitle{color:#171717;letter-spacing:0;text-shadow:none}
label,.public-page label{color:#252525}
input,textarea,.public-page input{background:#fff;color:#171717;border-color:#dedede}
input::placeholder,textarea::placeholder{color:#999}
input:hover,textarea:hover{border-color:#b5b5b5}
input:focus,textarea:focus{background:#fff;border-color:#555;box-shadow:0 0 0 3px #00000008}
input[readonly]{background:#f7f7f7;color:#555}
.public-page .form-time{background:#f6f6f6;color:#707070}
.primary,.public-page .card .primary,#closeButton{background:#1c1c1c;border-color:#1c1c1c;box-shadow:none;color:#fff}
.primary:hover,.public-page .card .primary:hover,#closeButton:hover{background:#353535;box-shadow:none;transform:none}
button:focus-visible,a:focus-visible{outline-color:#888}
.note,.processing-status,#processingMessage{color:#707070}
#childAccountLinks a{background:#fafafa;border-color:#e8e8e8;color:#333!important}
#childAccountLinks a:hover{background:#f2f2f2}
.admin-page main>a{background:#f5f5f5;color:#333!important}
#resultDialog,#processingDialog{background:#fff;border-color:#e8e8e8;box-shadow:0 20px 60px #00000018}
#resultDialog::backdrop,#processingDialog::backdrop{background:#00000030;backdrop-filter:blur(3px)}
#resultDialog .time,#resultDialog .wish{color:#707070}
#resultDetails{background:#fafafa;border-color:#e8e8e8}
#resultDialog .row{border-color:#e6e6e6;color:#666}
#resultDialog .row strong,#resultDialog .row .points{color:#171717}
.processing-spinner{border-color:#ededed;border-top-color:#222}
#editButton{color:#555!important}

/* Form chuyển tiền theo bố cục mẫu. */
.public-page .card{padding:30px 26px 26px;background:linear-gradient(145deg,#fff,#f3f6fa);border-radius:18px}
.public-page .card .logo{color:#175bbb;font-style:italic;font-family:"Arial Black",Arial,sans-serif;font-size:46px;margin-bottom:12px;letter-spacing:-2px}
.entry-intro{text-align:center;font-size:14px;color:#737b85;margin:0 0 22px}
.entry-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);align-items:center;gap:12px;min-height:76px;border-bottom:1px solid #e5e9ef}
.public-page .entry-row label{margin:0;font-size:14px;font-weight:400;color:#5e6875}
.public-page .entry-row input{width:100%;min-width:0;text-align:right;padding:10px 8px;border:1px solid transparent;border-radius:7px;background:transparent;font-weight:700;color:#242d38}
.public-page .entry-row input:hover{border-color:#cfdaeb;background:#ffffff80}
.public-page .entry-row input:focus{border-color:#86abe1;background:#fff;box-shadow:0 0 0 3px #1764d610}
.public-page .entry-row input[readonly]{background:transparent;color:#242d38}
.public-page .entry-row #amount{font-size:20px;color:#175bbb}
.public-page .card .primary{margin-top:28px;background:linear-gradient(110deg,#3488e2,#2452c2);border:1px solid #3876c8;border-radius:13px;padding:16px;font-size:18px;box-shadow:0 4px 10px #2465c51a}
.public-page .card .primary:hover{background:linear-gradient(110deg,#2578d3,#1945af)}
@media(max-width:380px){.public-page .card{padding:26px 18px 22px}.entry-row{gap:8px}.public-page .entry-row label{font-size:13px}.public-page .entry-row input{font-size:14px}}
.logo,.public-page .card .logo,#resultDialog .logo{color:#20c2ad;text-shadow:none}
#resultDialog .logo{display:none}
.live-clock{text-align:center;margin:0 0 12px;color:#657582;font-size:14px;line-height:1.5;font-variant-numeric:tabular-nums}
#resultDialog{position:fixed;isolation:isolate}
#resultDialog::before{content:"";position:absolute;z-index:-1;pointer-events:none;left:50%;top:50%;width:240px;height:240px;transform:translate(-50%,-50%);opacity:.1;background:center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Ccircle cx='100' cy='100' r='92' fill='%231bae36'/%3E%3Cpath d='M55 100l30 30 62-65' fill='none' stroke='white' stroke-width='20' stroke-linecap='square' stroke-linejoin='miter'/%3E%3C/svg%3E")}
#resultDetails{background:#fafafa85}
#resultDialog.failed::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Ccircle cx='100' cy='100' r='92' fill='%23dc3030'/%3E%3Cpath d='M65 65l70 70M135 65l-70 70' fill='none' stroke='white' stroke-width='20' stroke-linecap='square'/%3E%3C/svg%3E")}
#resultDialog.failed #resultTitle{color:#bd2929}
#resultDialog.failed .wish{color:#a83232}
.telegram-support{margin:-8px 0 22px;text-align:center;font-size:14px;font-weight:600;color:#333;overflow-wrap:anywhere;padding:10px 12px;background:#f5f5f5;border-radius:9px}
.save-notice{text-align:center;color:#248349;font-size:14px;margin:12px 0 0}
.saved-toast{position:fixed;top:24px;left:50%;transform:translateX(-50%);z-index:1000;padding:16px 28px;max-width:calc(100% - 32px);background:#fff;color:#248349;border:1px solid #cce6d4;border-radius:14px;box-shadow:0 8px 30px #00000015;font-size:16px;font-weight:700;text-align:center;pointer-events:none}
.logout-button{display:block;margin:18px auto 0;padding:8px 14px;background:#f5f5f5;color:#555;font-size:13px}