#gkBar{margin:10px auto;max-width:1100px;padding:8px 12px;border:1px solid var(--bd);border-radius:12px;background:var(--card);color:var(--fg);font-size:14px}
#gkBar .gkrow{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
#gkBar .gkst{font-weight:700}#gkBar .gkst.ok{color:var(--ok)}#gkBar .gkst.no{color:var(--warn)}
#gkBar input[type=password]{flex:1 1 240px;min-width:180px;background:var(--card2);color:var(--fg);border:1px solid var(--bd);border-radius:10px;padding:9px;font:14px Consolas,'Segoe UI',monospace}
#gkBar label{display:flex;gap:6px;align-items:center;font-size:13px;color:var(--mut)}
#gkBar a{color:var(--cy)}#gkBar #gkMsg{width:100%;font-size:13px;color:var(--mut)}
:root{--bg:#0b1220;--card:#131c2e;--card2:#0f1626;--bd:#25324d;--fg:#e6ebf5;--mut:#93a0ba;--a1:#4f5bf0;--a2:#a02ee0;--cy:#38bdf8;--ok:#34d399;--warn:#fb923c;--bad:#f87171}
*{box-sizing:border-box}
body{margin:0;padding:14px;background:var(--bg);color:var(--fg);font-family:'Segoe UI',Roboto,Arial,sans-serif;min-height:100vh}
.app{max-width:1200px;margin:0 auto}
.hero{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;gap:clamp(12px,2.4vw,26px);text-align:left;padding:clamp(14px,2.4vw,24px) clamp(14px,3vw,32px);border-radius:18px;
 background:linear-gradient(120deg,#4f5bf0,#a02ee0,#ec4899,#f59e0b,#10b981,#06b6d4,#4f5bf0);background-size:400% 400%;animation:heroFlow 14s ease-in-out infinite;
 box-shadow:0 12px 30px -12px rgba(120,60,240,.6)}
.hero::before{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.22) 50%,transparent 65%);background-size:250% 100%;animation:heroShine 6s linear infinite;pointer-events:none}
.hero::after{content:"";position:absolute;inset:0;background:rgba(10,14,40,.22);pointer-events:none}
.hero>*{position:relative;z-index:1}
.hero .logo{flex:0 0 auto;width:clamp(64px,9vw,104px);height:clamp(64px,9vw,104px);padding:3px;background:#fff;border-radius:6px;box-shadow:0 6px 18px -6px rgba(0,0,0,.55);animation:logoFloat 4.5s ease-in-out infinite}
.hero .logo img{display:block;width:100%;height:100%;object-fit:contain}
.hero .htxt{min-width:0;text-align:center}
.hero h1{margin:0;font-size:clamp(18px,3.4vw,32px);letter-spacing:.3px;text-transform:uppercase;text-shadow:0 2px 8px rgba(0,0,0,.35)}
.hero .school{margin:0 0 4px;font-size:clamp(11px,1.7vw,14px);font-weight:700;letter-spacing:1.6px;text-transform:uppercase;color:#fff8d6;text-shadow:0 1px 4px rgba(0,0,0,.4)}
.hero p.sub{margin:8px 0 0;color:rgba(255,255,255,.95);font-size:clamp(12px,1.8vw,15px);text-shadow:0 1px 4px rgba(0,0,0,.35)}
.hero .stars{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:clamp(10px,2.2vw,22px);margin:8px 0 0;min-height:32px}
.hero .stars i{display:inline-block;font-style:normal;font-size:var(--s);line-height:1;color:#fff6c2;text-shadow:0 0 6px #fff,0 0 14px #ffd54f;animation:starTwinkle var(--t) ease-in-out var(--d) infinite}
.hero .stars i:nth-child(3n){color:#fff}
.hero .stars i:nth-child(4n){color:#ffe082}
@keyframes starTwinkle{0%,100%{opacity:.15;transform:scale(.55) rotate(0deg)}50%{opacity:1;transform:scale(1.2) rotate(20deg)}}
@media (prefers-reduced-motion:reduce){.hero .stars i{animation:none;opacity:.9}}
@keyframes heroFlow{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@keyframes heroShine{0%{background-position:150% 0}100%{background-position:-150% 0}}
@keyframes logoFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@media (max-width:560px){.hero{flex-direction:column;text-align:center}}
@media (prefers-reduced-motion:reduce){.hero,.hero::before,.hero .logo{animation:none}}
.tabs{display:flex;gap:6px;margin:14px 0;padding:6px;background:var(--card);border:1px solid var(--bd);border-radius:14px}
.tab{flex:1 1 0;min-width:0;background:transparent;color:var(--mut);border:0;border-radius:10px;padding:11px 6px;font:600 clamp(11px,1.8vw,15px) inherit;font-family:inherit;cursor:pointer;box-shadow:none}
.tab.on{background:var(--a1);color:#fff}
.tab:hover:not(.on){background:#1b2740;color:#fff}
.panel{display:none;background:var(--card);border:1px solid var(--bd);border-radius:16px;padding:16px}
.panel.on{display:block}
h2{margin:0 0 12px;font-size:18px;color:var(--cy)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:800px){.grid2{grid-template-columns:1fr}}
button{background:linear-gradient(135deg,var(--a1),var(--a2));color:#fff;border:0;padding:10px 16px;border-radius:10px;font:600 14px 'Segoe UI',Arial,sans-serif;cursor:pointer;transition:transform .12s,filter .12s}
button:hover:not(:disabled){transform:translateY(-1px);filter:brightness(1.1)}
button:disabled{opacity:.5;cursor:not-allowed}
button.ghost{background:transparent;border:1.5px solid var(--a1);color:#aab3ff}
button.sec{background:#22304d;color:var(--fg)}
button.red{background:#ef4444}button.green{background:#10b981}button.orange{background:#f97316}
button.sm{padding:6px 10px;font-size:13px}
.bar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:10px 0}
textarea,input[type=text],input[type=number]{background:var(--card2);color:var(--fg);border:1px solid var(--bd);border-radius:10px;padding:9px;font:14px Consolas,'Segoe UI',monospace;width:100%}
textarea{resize:vertical;min-height:120px}
textarea:focus,input:focus{outline:2px solid var(--a1);outline-offset:0}
.status{font-size:13px;min-height:18px;margin-top:6px}.status.ok{color:var(--ok)}.status.err{color:var(--bad)}.status.info{color:var(--mut)}
.note{font-size:12px;color:var(--mut);margin-top:8px;line-height:1.5}
.modebadge{display:inline-block;font-size:11px;padding:3px 10px;border-radius:99px;background:#26325a;color:#b9c2ff;margin-left:6px}
#preview{min-height:200px;max-height:480px;overflow:auto;background:var(--card2);border:1px solid var(--bd);border-radius:10px;padding:12px;font-size:14px;line-height:1.7}
#preview p{margin:0 0 8px}#preview table{border-collapse:collapse;width:100%;font-size:13px}#preview td{border:1px solid var(--bd);padding:6px;vertical-align:top}
.eqinline{color:#a5b4fc;font-style:italic;padding:0 2px}.eqdisplay{display:block;text-align:center;margin:8px 0;color:#a5b4fc;font-style:italic}
/* Vòng quay */
.wheelbox{display:flex;flex-direction:column;align-items:center;gap:10px}
.wwrap{position:relative;width:min(100%,460px);aspect-ratio:1}
#wheel{width:100%;height:100%;display:block}
.ptr{position:absolute;left:50%;top:-4px;transform:translateX(-50%);width:0;height:0;border-left:15px solid transparent;border-right:15px solid transparent;border-top:32px solid #fbbf24;filter:drop-shadow(0 2px 3px #000)}
#hist{margin:0;padding-left:22px;max-height:170px;overflow:auto;font-size:14px;color:var(--fg)}
.ov{position:fixed;inset:0;background:rgba(3,7,18,.86);display:none;align-items:center;justify-content:center;z-index:50;padding:16px}
.ov.on{display:flex}
.ovbox{background:linear-gradient(135deg,#4f5bf0,#a02ee0);border-radius:24px;padding:clamp(20px,5vw,54px);text-align:center;max-width:96vw;box-shadow:0 20px 60px #000}
.ovbox .s{font-size:clamp(18px,3.5vw,38px);opacity:.92}
.ovbox .n{font-size:clamp(34px,9vw,110px);font-weight:800;line-height:1.15;margin:10px 0;word-break:break-word}
/* Bảng điểm */
.tw{overflow-x:auto;border:1px solid var(--bd);border-radius:10px}
table.g{border-collapse:collapse;width:100%;min-width:1040px}
table.g th,table.g td{border-bottom:1px solid var(--bd);padding:5px 6px;text-align:center;font-size:14px}
table.g th{background:#1a2640;color:var(--cy)}
table.g td input{padding:6px;text-align:center;font-family:inherit;min-width:54px}
table.g td.nm input{text-align:left;min-width:150px}
input.bad{outline:2px solid var(--bad);background:#3a1620}
.cl-G{color:var(--ok);font-weight:700}.cl-K{color:var(--warn);font-weight:700}.cl-T{color:#facc15;font-weight:700}.cl-Y{color:var(--bad);font-weight:700}
.cfg{display:flex;gap:10px;flex-wrap:wrap;align-items:end;margin:8px 0}
.cfg label{font-size:12px;color:var(--mut);display:block}.cfg input{width:72px}
.mb.on{background:var(--a1)}
table.g th{border-right:1px solid var(--bd)}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:8px;margin:12px 0}
.stat{background:var(--card2);border:1px solid var(--bd);border-radius:10px;padding:8px;text-align:center}
.stat b{display:block;font-size:20px}.stat span{font-size:12px;color:var(--mut)}
/* Đồ thị */
.fr{display:flex;gap:6px;align-items:center;margin-bottom:6px}
.fr i{width:14px;height:14px;border-radius:50%;flex:none}
#gcv{width:100%;height:min(62vh,520px);display:block;background:#0a101d;border:1px solid var(--bd);border-radius:10px;touch-action:none;cursor:grab}
#gres{font-size:13px;line-height:1.7;margin-top:8px}

select{background:var(--card2);color:var(--fg);border:1px solid var(--bd);border-radius:10px;padding:8px;font:14px 'Segoe UI',Arial,sans-serif}
#fileList{display:flex;flex-direction:column;gap:4px;max-height:170px;overflow:auto;margin:6px 0}
.frow{display:flex;align-items:center;gap:8px;background:var(--card2);border:1px solid var(--bd);border-radius:8px;padding:4px 8px;font-size:13px}
.frow .fnm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.frow .fsz{color:var(--mut);font-size:12px}
.frow .fx{padding:2px 8px;font-size:12px}
.fhead{font-weight:700;font-size:13px;background:#26325a;color:#dbe1ff;border-radius:6px;padding:4px 8px;margin:10px 0 6px;font-family:'Segoe UI',Arial,sans-serif}.fhead.err{background:#5a2626;color:#ffd0d0}
/* Bản xem trước & PDF: giấy trắng, chữ đen, công thức dựng bằng HTML/CSS */
.doc{font-family:'Times New Roman',Times,'Noto Serif',serif;font-size:13pt;line-height:1.5;color:#000}
#preview.paper{background:#fff;color:#000;font-size:13pt;line-height:1.5}
.doc .pp{white-space:pre-wrap;word-wrap:break-word}
.doc table.dt{border-collapse:collapse;width:100%;table-layout:fixed;font-size:inherit}
.doc table.dt td{border:1px solid #000;padding:3px 6px;vertical-align:top;word-wrap:break-word}
.doc .eqd{text-align:center;margin:4px 0;font-size:1.05em}
.doc .eqi{display:inline;font-size:1.02em}
.doc .eqd i,.doc .eqi i{font-style:italic}
.doc .mf{display:inline-flex;flex-direction:column;vertical-align:middle;text-align:center;margin:0 2px;line-height:1.25}
.doc .mfn{border-bottom:1px solid #000;padding:0 3px}.doc .mfd{padding:0 3px}.doc .mf.nobar .mfn{border-bottom:0}
.doc sup.ms,.doc sub.ms{font-size:.72em;line-height:0}
.doc .mss{display:inline-flex;flex-direction:column;vertical-align:middle;font-size:.72em;line-height:1.15;margin-left:1px}
.doc .msq{display:inline-flex;align-items:stretch;vertical-align:middle;white-space:nowrap}
.doc .msr{font-size:1.1em;line-height:1;display:flex;align-items:flex-end}.doc .msr.tall{font-size:1.9em}
.doc .msc{border-top:1px solid #000;padding:0 2px;margin-left:-1px}
.doc .mix{align-self:flex-start;margin-right:-2px}
.doc .mn{display:inline-flex;flex-direction:column;align-items:center;vertical-align:middle;line-height:1.1;margin:0 2px}
.doc .mns{font-size:.72em}.doc .mnb{font-size:1.5em;line-height:1;vertical-align:middle}.doc .mnb.int{font-size:1.8em}
.doc .mdl{display:inline-block;vertical-align:middle;line-height:1;transform-origin:center;margin:0 1px}
.doc .mmw{display:inline-flex;align-items:center;vertical-align:middle}
.doc table.mt{border-collapse:collapse;display:inline-table}.doc table.mt td{padding:1px 6px;text-align:center;border:0}
.doc table.mt.cases td{text-align:left}.doc table.mt.aligned td{padding:1px 2px}
.doc table.mt.aligned td:nth-child(odd){text-align:right}.doc table.mt.aligned td:nth-child(even){text-align:left}
.doc .mbar{border-top:1px solid #000}.doc .mund{border-bottom:1px solid #000}.doc .mbox{border:1px solid #000;padding:0 3px}
.doc .mac{position:relative;display:inline-block}
.doc .mam{position:absolute;left:0;right:0;top:-.7em;text-align:center;font-size:.75em;line-height:1}
.doc .mgb{display:inline-flex;flex-direction:column;align-items:center;vertical-align:middle;line-height:1.1}
table.g.notx .tx,table.g.notx tr.txsub{display:none}
table.g.notx{min-width:560px}
table.g.m1 .h1x{display:none}
table.g.m1{min-width:820px}
table.g:not(.imp) .ix{display:none}
table.g.imp{min-width:1320px}
table.g.imp.notx{min-width:760px}
table.g td.ix input{min-width:84px}
table.g td.ix:last-of-type input{min-width:56px}
select{background:var(--card2);color:var(--fg);border:1px solid var(--bd);border-radius:10px;padding:9px;font:14px 'Segoe UI',Arial,sans-serif}
.mt{display:none}.mt.on{display:block}
.wtool{display:none}.wtool.on{display:block}
.ut{display:none}.ut.on{display:block}
.qchip{display:inline-flex;gap:4px;align-items:center;background:var(--card2);border:1px solid var(--bd);border-radius:99px;padding:5px 10px;font-size:13px}
/* ===== MÀN CHÀO (#t0) ===== */
#t0{padding:10px;overflow:hidden}
.lp-stage{position:relative;width:100%;height:clamp(215px,62vw,300px);border-radius:14px;overflow:hidden;background:#2b1b6b}
.lp-stage>svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.lp-sym{position:absolute;left:var(--x);top:var(--y);font:700 clamp(18px,3.4vw,30px) Georgia,'Times New Roman',serif;color:rgba(255,244,205,.8);text-shadow:0 0 10px rgba(255,200,90,.7);pointer-events:none;animation:lpFloat var(--t,6s) ease-in-out var(--d,0s) infinite}
.lp-tw{animation:lpTw var(--t,2.4s) ease-in-out var(--d,0s) infinite}
.lp-sun{transform-box:fill-box;transform-origin:center;animation:lpPulse 7s ease-in-out infinite}
.lp-ch{animation:lpIn 1.1s ease-out var(--d,0s) both}
.lp-txt{text-align:center;padding:16px 8px 6px}
.lp-txt h2{margin:0;font-size:clamp(22px,4.6vw,38px);color:#fff8d6;letter-spacing:.3px;text-shadow:0 2px 14px rgba(236,72,153,.45)}
.lp-txt p{margin:8px auto 0;max-width:640px;color:var(--mut);font-size:clamp(13px,2vw,16px);line-height:1.55}
.lp-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin:14px 0 4px}
button.lp-card{display:flex;flex-direction:column;align-items:center;gap:4px;width:100%;margin:0;padding:14px 10px;text-align:center;background:linear-gradient(160deg,var(--card2),#1a2240);color:var(--fg);border:1px solid var(--bd);border-radius:14px;font:inherit;box-shadow:none;filter:none;transition:transform .18s,border-color .18s,box-shadow .18s;animation:lpIn .6s ease-out calc(.15s*var(--i,0)) both}
button.lp-card:hover:not(:disabled){transform:translateY(-4px);filter:none;border-color:#f59e0b;box-shadow:0 10px 24px -12px rgba(245,158,11,.6)}
button.lp-card:focus-visible{outline:2px solid var(--cy);outline-offset:2px}
.lp-card .ic{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;font-size:24px;background:linear-gradient(135deg,rgba(79,91,240,.45),rgba(245,158,11,.4))}
.lp-card b{font-size:14px}.lp-card small{font-size:12px;font-weight:400;color:var(--mut);line-height:1.4}
.lp-note{margin:12px 0 2px;text-align:center;font-size:12px;color:var(--mut)}
.hero .logo,.hero h1{cursor:pointer}
@keyframes lpFloat{0%,100%{transform:translateY(0) rotate(-4deg);opacity:.55}50%{transform:translateY(-12px) rotate(5deg);opacity:1}}
@keyframes lpTw{0%,100%{opacity:.2}50%{opacity:1}}
@keyframes lpPulse{0%,100%{transform:scale(1);opacity:.85}50%{transform:scale(1.08);opacity:1}}
@keyframes lpIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){#t0 *{animation:none!important;transition:none!important}.lp-sym{opacity:.7}}
/* ===== CON TRỎ CHUỘT + TRÁI TIM NHỎ GẮN KÈM (chỉ chuột thật; tắt/bật bằng nút ♥ góc phải dưới) ===== */
@media (hover:hover) and (pointer:fine){
html.hc,html.hc body{cursor:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='34'%20height='34'%20viewBox='0%200%2034%2034'%3E%3Cpath%20d='M2.5%201.5V19.5L7%2015.4%209.9%2022%2012.9%2020.7%2010%2014.2%2016%2013.8Z'%20fill='%23fff'%20stroke='%23111'%20stroke-width='1.4'%20stroke-linejoin='round'/%3E%3Cpath%20transform='translate(24.5%2024.5)%20scale(0.95)'%20d='M0%20-4.6C-1.6-9.6-8-7.6-8-2.6c0%203.6%205%206.6%208%209.2%203-2.6%208-5.6%208-9.2%200-5-6.4-7-8-2z'%20fill='%23ff3d7f'%20stroke='%23fff'%20stroke-width='1.6'%20paint-order='stroke'/%3E%3C/svg%3E") 3 2,auto}
html.hc button,html.hc a,html.hc .tab,html.hc summary,html.hc select,html.hc label,html.hc [role=button]{cursor:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='34'%20height='34'%20viewBox='0%200%2034%2034'%3E%3Cpath%20d='M8.6%202.4a1.5%201.5%200%200%201%203%200V10h.6V8.6a1.4%201.4%200%200%201%202.8%200V10h.5V9.3a1.3%201.3%200%200%201%202.6%200V10h.4a1.2%201.2%200%200%201%202.4%200v6c0%203.6-2.2%206.4-5.6%206.4h-2.4c-1.8%200-3.2-.9-4.1-2.3L3.6%2014.6a1.5%201.5%200%200%201%202.4-1.8L8.6%2015.4Z'%20fill='%23fff'%20stroke='%23111'%20stroke-width='1.3'%20stroke-linejoin='round'/%3E%3Cpath%20transform='translate(26%2025.5)%20scale(0.95)'%20d='M0%20-4.6C-1.6-9.6-8-7.6-8-2.6c0%203.6%205%206.6%208%209.2%203-2.6%208-5.6%208-9.2%200-5-6.4-7-8-2z'%20fill='%23ff3d7f'%20stroke='%23fff'%20stroke-width='1.6'%20paint-order='stroke'/%3E%3C/svg%3E") 10 2,pointer}
html.hc input,html.hc textarea{cursor:text}
}
.hc-h{position:fixed;pointer-events:none;z-index:9999;font-size:var(--s,14px);line-height:1;color:var(--c,#ff4d8d);text-shadow:0 0 6px rgba(255,120,170,.7);animation:hcUp var(--t,900ms) ease-out forwards}
@keyframes hcUp{0%{opacity:.95;transform:translate(-50%,-50%) scale(.6)}100%{opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-50% - var(--dy))) scale(1.2) rotate(var(--r))}}
button#hcBtn{position:fixed;right:14px;bottom:14px;z-index:9998;width:40px;height:40px;padding:0;border-radius:50%;font-size:20px;line-height:1;background:#2a1a3d;color:#ff4d8d;border:1.5px solid #ff4d8d;box-shadow:0 4px 14px -4px rgba(255,77,141,.6)}
html:not(.hc) button#hcBtn{color:var(--mut);border-color:var(--bd);box-shadow:none;opacity:.7}
@media (prefers-reduced-motion:reduce){.hc-h{display:none}}
/* ----- Sao băng (chỉ CSS; JS nhỏ chỉ đổi vị trí mỗi khi một vòng kết thúc) ----- */
.lp-ss{position:absolute;left:var(--x);top:var(--y);width:var(--l,120px);height:2px;border-radius:2px;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.95));opacity:0;pointer-events:none;transform:rotate(var(--a)) translateX(0);animation:lpShoot var(--c,8s) linear var(--d,0s) infinite}
.lp-ss::after{content:"";position:absolute;right:-2px;top:50%;width:5px;height:5px;margin-top:-2.5px;border-radius:50%;background:#fff;box-shadow:0 0 8px 3px rgba(255,236,170,.95),0 0 18px 6px rgba(255,170,90,.45)}
.lp-ss.big{height:3px;background:linear-gradient(90deg,rgba(255,214,120,0),rgba(255,244,200,.98))}
.lp-ss.big::after{width:8px;height:8px;margin-top:-4px;box-shadow:0 0 12px 5px rgba(255,236,170,.95),0 0 28px 10px rgba(255,150,90,.5)}
@keyframes lpShoot{0%{opacity:0;transform:rotate(var(--a)) translateX(0)}3%{opacity:1}14%{opacity:0;transform:rotate(var(--a)) translateX(var(--k,240px))}100%{opacity:0;transform:rotate(var(--a)) translateX(var(--k,240px))}}
@media (prefers-reduced-motion:reduce){.lp-ss{display:none}}
/* ----- Tối ưu điện thoại ----- */
@media (max-width:639px){
.tabs{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px}
.tab{grid-column:span 2;padding:10px 4px;font-size:13px;line-height:1.3}
.tab:nth-child(n+4){grid-column:span 3}
.lp-cards{grid-template-columns:1fr 1fr}
.lp-sym[style*="--x:16%"],.lp-sym[style*="--x:70%"]{display:none}  /* tránh ký hiệu đè lên bảng khi khung hẹp */
.lp-card:last-child{grid-column:1/-1}
}
@media (min-width:640px){.lp-stage{height:auto;aspect-ratio:8/3}}
/* ===== TỐI ƯU ĐA THIẾT BỊ (PC + điện thoại) & TIM BAY KHI CHẠM ===== */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;-webkit-tap-highlight-color:transparent}
body{padding:max(clamp(8px,2vw,20px),env(safe-area-inset-top)) max(clamp(8px,2vw,20px),env(safe-area-inset-right)) max(clamp(8px,2vw,20px),env(safe-area-inset-bottom)) max(clamp(8px,2vw,20px),env(safe-area-inset-left));overflow-x:hidden}
img,canvas,svg,video{max-width:100%}
button,.tab,.lp-card,select,label{touch-action:manipulation}
.panel{padding:clamp(12px,2vw,20px)}
#t0{padding:clamp(8px,1.4vw,14px)}
.tw{-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
.wwrap{width:min(100%,460px,78vh)}
.bar input[style*="width"],.bar select{max-width:100%}
input[type=file]{max-width:100%}
@media (min-width:1400px){.app{max-width:1320px}}
/* Màn chào: 640–819px chia 3+2, từ 820px đủ 5 thẻ một hàng (tránh thẻ mồ côi) */
@media (min-width:640px) and (max-width:819px){
.lp-cards{grid-template-columns:repeat(6,minmax(0,1fr))}
.lp-card{grid-column:span 2}
.lp-card:nth-child(n+4){grid-column:span 3}
}
@media (min-width:820px){
.lp-cards{grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
button.lp-card{padding:18px 12px}
}
/* Máy tính bảng dọc / điện thoại */
@media (max-width:639px){
.hero{gap:8px;padding:12px}
.hero .logo{width:60px;height:60px}
.hero .stars{margin-top:4px;min-height:24px}
.tabs{margin:10px 0}
.tab{min-height:44px;display:flex;align-items:center;justify-content:center}
.lp-txt{padding:12px 4px 4px}
.lp-cards{gap:8px}
button.lp-card{padding:12px 8px}
.lp-card .ic{width:40px;height:40px;font-size:21px}
textarea,input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]):not([type=color]),select{font-size:16px!important}
.bar{gap:6px}
.bar button{flex:1 1 auto}
.cfg{gap:8px}
#preview{max-height:60vh}
#gcv{height:min(58vh,440px)}
table.g td input{min-width:48px}
table.g td.nm input{min-width:130px}
.ovbox{padding:20px 14px}
.stats{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* Điện thoại xoay ngang */
@media (max-height:480px) and (orientation:landscape){
.lp-stage{height:auto;max-height:52vh;aspect-ratio:8/3}
.hero{flex-direction:row;padding:8px 14px}
.hero .logo{width:48px;height:48px}
.hero .stars{display:none}
#gcv{height:min(70vh,360px)}
}
/* Cảm ứng: nút đủ lớn để chạm, không bị "kẹt" hiệu ứng hover */
@media (pointer:coarse){
button{min-height:42px}
button.sm{min-height:38px}
button#hcBtn{min-height:0}
}
@media (hover:none){
button:hover:not(:disabled),button.lp-card:hover:not(:disabled){transform:none;filter:none;box-shadow:none}
button.lp-card:hover:not(:disabled){border-color:var(--bd)}
.tab:hover:not(.on){background:transparent;color:var(--mut)}
.lp-touch{display:block}
}
.lp-touch{display:none}
button#hcBtn{right:max(14px,env(safe-area-inset-right));bottom:max(14px,env(safe-area-inset-bottom))}
@media (max-width:639px){button#hcBtn{width:38px;height:38px;font-size:18px;opacity:.85}}
/* Tim bay lên khi chạm (cảm ứng/bút): bay lượn nhẹ sang hai bên rồi mờ dần */
.hc-h.th{animation:hcFloat var(--t,1800ms) cubic-bezier(.25,.6,.3,1) var(--dl,0ms) both;will-change:transform,opacity;text-shadow:0 0 8px rgba(255,120,170,.75),0 0 2px rgba(255,255,255,.6)}
@keyframes hcFloat{
0%{opacity:0;transform:translate(-50%,-50%) scale(.3) rotate(0deg)}
10%{opacity:1;transform:translate(-50%,-50%) scale(1.15) rotate(calc(var(--r)*.3))}
35%{transform:translate(calc(-50% + var(--sx)),calc(-50% - var(--dy)*.35)) scale(1) rotate(calc(var(--r)*.6))}
65%{opacity:.9;transform:translate(calc(-50% - var(--sx)*.7),calc(-50% - var(--dy)*.68)) scale(.95) rotate(calc(var(--r)*-.4))}
100%{opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-50% - var(--dy))) scale(.7) rotate(var(--r))}}
@media (prefers-reduced-motion:reduce){.hc-h.th{display:none}}
@media (max-width:639px){.tab:nth-child(4):last-child{grid-column:1/-1}}
#wFx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;display:block}
.ovbox{position:relative;z-index:1}