:root{--xanh:#0b4a86;--xanh2:#0e5fa8;--vang:#ffd54a;--nen:#eef3f9;--chu:#14213d;--phu:#5b6b82}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--nen:#0d1726;--chu:#e8eef7;--phu:#9fb0c6}}
:root[data-theme="dark"]{--nen:#0d1726;--chu:#e8eef7;--phu:#9fb0c6}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;height:100%;background:var(--nen);color:var(--chu);font:15px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif}
#app{position:fixed;inset:0;width:100%;height:100%;border:0;opacity:0;transition:opacity .25s;background:var(--nen)}
body.on #app{opacity:1}
#splash{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:24px;text-align:center;
 background:radial-gradient(120% 80% at 50% 0%,var(--xanh2),var(--xanh) 60%,#072f57);color:#fff;z-index:2}
body.on #splash{display:none}
#splash img{border-radius:22px;box-shadow:0 8px 28px rgba(0,0,0,.35);background:#fff}
#splash h1{margin:6px 0 0;font-size:20px;letter-spacing:.5px;font-weight:700;line-height:1.25}
#splash h1 span{color:var(--vang);font-style:italic;font-size:30px;letter-spacing:2px}
#splash p{margin:4px 0 0;opacity:.9;max-width:420px}
#splash button{margin-top:6px;padding:9px 18px;font:inherit;font-weight:600;border:0;border-radius:999px;background:var(--vang);color:#1b2a40;cursor:pointer}
#splash footer{position:absolute;bottom:max(14px,env(safe-area-inset-bottom));left:16px;right:16px;font-size:12px;opacity:.75}
#bar{position:fixed;left:50%;transform:translateX(-50%);bottom:max(10px,env(safe-area-inset-bottom));z-index:3;display:flex;gap:6px;align-items:center;
 background:#fff;color:#14213d;border:1px solid #c9d6e6;border-radius:999px;padding:4px 6px 4px 8px;box-shadow:0 6px 18px rgba(0,0,0,.18);font-size:13px;max-width:calc(100vw - 32px)}
#bar button,#bar a{font:inherit;border:0;background:none;color:inherit;cursor:pointer;padding:5px 8px;border-radius:999px;text-decoration:none;white-space:nowrap}
#bar #inst{background:var(--xanh);color:#fff;font-weight:600}
#bar a{color:var(--xanh)}
#bar #hide{opacity:.6;padding:5px 7px}
@media print{#bar,#splash{display:none}}