/* sweet-portal.css – giao diện ngọt ngào cho trang chủ (cùng bảng màu với sweet.css, token theo portal.css). */
/* ---- bảng màu (sinh tự động) ---- */
html[data-palette="rose"]{color-scheme:light;--brand:#C2416B;--brand-dark:#9C2C52;--accent:#C9967A;--on-brand:#FFFFFF;--bg:#FFF5F8;--card:#FFFFFF;--text:#3A1A2D;--muted:#7A5468;--line:#F2CBD8;--soft:#FDE3EB;--sunk:#FDEAF0;--ok:#17714A;--ok-soft:#DDF3E8;--warn-soft:#FAE8DE;--on:#6A4FC0;--on-s:#EDE7FB;--off:#8A5638;--off-s:#FAE8DE;--gold:#C9967A;--hero-gold:#FFE0C8;--navy:#5E1B45;--sky:#F7A8C0;--aqua:#C8A8F0;--mid:#8E2A5C;--end:#D4507A;--chn:#C93C65;--eng:#5B6FD1;--ssa:#25796F;--enp:#7A55C0;--ecr:#B4523E;--shadow:0 10px 30px rgba(194,65,107,.13);--shadow-lg:0 24px 60px rgba(94,27,69,.30)}
@media (prefers-color-scheme:dark){html[data-palette="rose"]:not([data-theme="light"]){color-scheme:dark;--brand:#FF8FB1;--brand-dark:#FFB8CF;--accent:#E6B8A0;--on-brand:#3B0A20;--bg:#1B0F1E;--card:#27152B;--text:#FBEAF2;--muted:#D3AABF;--line:#4B2B54;--soft:#3A1830;--sunk:#321A38;--ok:#6BD6A0;--ok-soft:#10301F;--warn-soft:#3E2A22;--on:#C4B5FF;--on-s:#2A2150;--off:#F0CDB8;--off-s:#3E2A22;--gold:#E6B8A0;--hero-gold:#FFD9BF;--navy:#3A1240;--sky:#F7A8C0;--aqua:#C8A8F0;--mid:#6E2552;--end:#A83A6E;--chn:#FF8FA8;--eng:#9FB0FF;--ssa:#6EDBC9;--enp:#BFA2FF;--ecr:#FF9E88;--shadow:0 10px 30px rgba(0,0,0,.40);--shadow-lg:0 24px 60px rgba(0,0,0,.55)}}
html[data-palette="rose"][data-theme="dark"]{color-scheme:dark;--brand:#FF8FB1;--brand-dark:#FFB8CF;--accent:#E6B8A0;--on-brand:#3B0A20;--bg:#1B0F1E;--card:#27152B;--text:#FBEAF2;--muted:#D3AABF;--line:#4B2B54;--soft:#3A1830;--sunk:#321A38;--ok:#6BD6A0;--ok-soft:#10301F;--warn-soft:#3E2A22;--on:#C4B5FF;--on-s:#2A2150;--off:#F0CDB8;--off-s:#3E2A22;--gold:#E6B8A0;--hero-gold:#FFD9BF;--navy:#3A1240;--sky:#F7A8C0;--aqua:#C8A8F0;--mid:#6E2552;--end:#A83A6E;--chn:#FF8FA8;--eng:#9FB0FF;--ssa:#6EDBC9;--enp:#BFA2FF;--ecr:#FF9E88;--shadow:0 10px 30px rgba(0,0,0,.40);--shadow-lg:0 24px 60px rgba(0,0,0,.55)}
html[data-palette="lav"]{color-scheme:light;--brand:#7A55C0;--brand-dark:#5B3A9E;--accent:#C9A66B;--on-brand:#FFFFFF;--bg:#F8F5FF;--card:#FFFFFF;--text:#2A1F47;--muted:#62578A;--line:#DCD0F3;--soft:#EDE6FA;--sunk:#EFE9FC;--ok:#17714A;--ok-soft:#DDF3E8;--warn-soft:#F6EBD2;--on:#4556B5;--on-s:#E6EAFB;--off:#7E6128;--off-s:#F6EBD2;--gold:#C9A66B;--hero-gold:#F3E3BC;--navy:#2F1D63;--sky:#C9B5F5;--aqua:#F2A9C8;--mid:#4E2F96;--end:#8F68DA;--chn:#C93C65;--eng:#5B6FD1;--ssa:#25796F;--enp:#7A55C0;--ecr:#B4523E;--shadow:0 10px 30px rgba(122,85,192,.14);--shadow-lg:0 24px 60px rgba(47,29,99,.30)}
@media (prefers-color-scheme:dark){html[data-palette="lav"]:not([data-theme="light"]){color-scheme:dark;--brand:#B79CFF;--brand-dark:#D2C2FF;--accent:#E0C48C;--on-brand:#1E1040;--bg:#14102A;--card:#1E1840;--text:#EFEAFF;--muted:#BDB2E6;--line:#3E3478;--soft:#2A2052;--sunk:#292152;--ok:#6BD6A0;--ok-soft:#10301F;--warn-soft:#3A3020;--on:#9FB0FF;--on-s:#1F2550;--off:#EDD9AE;--off-s:#3A3020;--gold:#E0C48C;--hero-gold:#F3E3BC;--navy:#241552;--sky:#C9B5F5;--aqua:#F2A9C8;--mid:#4A2D90;--end:#6A45B8;--chn:#FF8FA8;--eng:#9FB0FF;--ssa:#6EDBC9;--enp:#BFA2FF;--ecr:#FF9E88;--shadow:0 10px 30px rgba(0,0,0,.40);--shadow-lg:0 24px 60px rgba(0,0,0,.55)}}
html[data-palette="lav"][data-theme="dark"]{color-scheme:dark;--brand:#B79CFF;--brand-dark:#D2C2FF;--accent:#E0C48C;--on-brand:#1E1040;--bg:#14102A;--card:#1E1840;--text:#EFEAFF;--muted:#BDB2E6;--line:#3E3478;--soft:#2A2052;--sunk:#292152;--ok:#6BD6A0;--ok-soft:#10301F;--warn-soft:#3A3020;--on:#9FB0FF;--on-s:#1F2550;--off:#EDD9AE;--off-s:#3A3020;--gold:#E0C48C;--hero-gold:#F3E3BC;--navy:#241552;--sky:#C9B5F5;--aqua:#F2A9C8;--mid:#4A2D90;--end:#6A45B8;--chn:#FF8FA8;--eng:#9FB0FF;--ssa:#6EDBC9;--enp:#BFA2FF;--ecr:#FF9E88;--shadow:0 10px 30px rgba(0,0,0,.40);--shadow-lg:0 24px 60px rgba(0,0,0,.55)}

/* ---------- chi tiết ngọt ngào (dùng chung) ---------- */
html{--script:"Dancing Script","Be Vietnam Pro",cursive}
/* nút đổi bảng màu 🎨 + bảng chọn */
.sw-pal{position:relative;display:inline-flex}
.sw-pal-btn{font:inherit;cursor:pointer}
.sw-menu{position:absolute;z-index:9000;right:0;top:calc(100% + 8px);min-width:236px;padding:10px;border-radius:18px;background:var(--card);color:var(--ink,var(--text));border:1px solid var(--border,var(--line));box-shadow:0 18px 44px rgba(60,20,50,.28);display:grid;gap:4px}
.sw-menu[hidden]{display:none}
.sw-menu h6{margin:2px 6px 4px;font:700 11.5px/1.2 system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.sw-menu button{font:600 14px/1.2 var(--ui,system-ui);display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:10px 12px;border-radius:12px;border:1px solid transparent;background:transparent;color:inherit;cursor:pointer}
.sw-menu button:hover{background:var(--accent-soft,var(--soft))}
.sw-menu button[aria-pressed="true"]{border-color:var(--accent,var(--brand));background:var(--accent-soft,var(--soft))}
.sw-menu .sw-sw{width:18px;height:18px;border-radius:50%;flex:none;box-shadow:inset 0 0 0 2px rgba(255,255,255,.6)}
.sw-menu .sw-sep{height:1px;background:var(--border,var(--line));margin:4px 4px}
.sw-menu .vi,.sw-menu .en{display:inline}
.sw-menu .en{display:none}html[data-lang="en"] .sw-menu .vi{display:none}html[data-lang="en"] .sw-menu .en{display:inline}
html[data-lang="bi"] .sw-menu .en{display:inline;margin-left:4px;font-weight:500;opacity:.75}html[data-lang="bi"] .sw-menu .en::before{content:"/ "}
/* lời động viên nổi lên khi làm bài */
.sw-toast{position:fixed;z-index:9500;left:50%;bottom:26px;transform:translate(-50%,20px);opacity:0;padding:12px 20px;border-radius:999px;background:linear-gradient(135deg,var(--accent,var(--brand)),var(--accent-dark,var(--brand-dark)));color:var(--on-accent,#fff);font:700 15px/1.3 var(--ui,system-ui);box-shadow:0 14px 34px rgba(80,20,60,.38);pointer-events:none;transition:opacity .25s,transform .25s;max-width:min(92vw,460px);text-align:center}
.sw-toast.on{opacity:1;transform:translate(-50%,0)}
.sw-toast small{display:block;font-weight:500;opacity:.85;font-size:12.5px;margin-top:2px}
.sw-fx{position:fixed;inset:0;width:100%;height:100%;z-index:9400;pointer-events:none}
@media (prefers-reduced-motion:reduce){.sw-toast{transition:none}}
/* mềm mại hơn cho hai bảng màu ngọt ngào (hồng phấn, oải hương); bảng "Đại dương" giữ nguyên */
:is(html[data-palette="rose"],html[data-palette="lav"]) .btn{border-radius:999px}
:is(html[data-palette="rose"],html[data-palette="lav"]) .chip,:is(html[data-palette="rose"],html[data-palette="lav"]) .tag{border-radius:999px}
:is(html[data-palette="rose"],html[data-palette="lav"]) .card{border-radius:26px}
:is(html[data-palette="rose"],html[data-palette="lav"]) ::selection{background:color-mix(in srgb,var(--accent,var(--brand)) 26%,transparent)}
:is(html[data-palette="rose"],html[data-palette="lav"]) body{background:
  radial-gradient(900px 480px at 92% -6%,color-mix(in srgb,var(--sky) 38%,transparent),transparent 62%),
  radial-gradient(800px 520px at -8% 6%,color-mix(in srgb,var(--aqua) 24%,transparent),transparent 62%),
  radial-gradient(700px 420px at 50% 108%,color-mix(in srgb,var(--sky) 20%,transparent),transparent 60%),var(--bg)}
/* trang chủ: các dải gradient từng viết cứng màu xanh → dùng token (navy → mid → end) */
:is(html[data-palette="rose"],html[data-palette="lav"]) .gradebar{background:linear-gradient(125deg,var(--navy),var(--mid) 70%,var(--end));box-shadow:inset 0 -1px 0 color-mix(in srgb,var(--hero-gold) 40%,transparent)}
:is(html[data-palette="rose"],html[data-palette="lav"]) .hero{background:linear-gradient(125deg,var(--navy) 0%,var(--mid) 62%,var(--end) 140%)}
:is(html[data-palette="rose"],html[data-palette="lav"]) footer{background:linear-gradient(125deg,var(--navy),var(--mid));color:#f6dfea}
:is(html[data-palette="rose"],html[data-palette="lav"]) .btn{border-radius:999px}
/* lời chào hôm nay */
.sw-greet{display:flex;align-items:center;gap:18px;padding:16px 22px;margin:0 0 var(--gap,16px);border-radius:26px;background:linear-gradient(120deg,var(--card),color-mix(in srgb,var(--soft) 70%,var(--card)));border:1px solid var(--line);box-shadow:var(--shadow);position:relative;overflow:hidden}
.sw-greet:before{content:"";position:absolute;right:-30px;top:-40px;width:200px;height:200px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--sky) 45%,transparent),transparent 70%);pointer-events:none}
.sw-bloom{flex:none;width:58px;height:58px;border-radius:50%;display:grid;place-items:center;font-size:30px;background:linear-gradient(145deg,var(--soft),var(--card));box-shadow:0 6px 16px color-mix(in srgb,var(--brand) 22%,transparent),inset 0 0 0 2px color-mix(in srgb,var(--brand) 22%,transparent)}
.sw-gt{min-width:0;flex:1}
.sw-hi{margin:0;font-family:var(--script);font-weight:700;font-size:clamp(26px,3.6vw,34px);line-height:1.15;color:var(--brand-dark)}
.sw-msg{margin:4px 0 0;color:var(--muted);font-size:14.5px;line-height:1.5}
.sw-date{margin:6px 0 0;font-size:12.5px;color:var(--muted);letter-spacing:.04em}
.sw-greet .btn{flex:none;position:relative}
.sw-greet .en{display:none}html[data-lang="en"] .sw-greet .vi{display:none}html[data-lang="en"] .sw-greet .en{display:inline}
html[data-lang="bi"] .sw-greet .en{display:block;font-size:.88em;opacity:.8;margin-top:1px}
@media (max-width:640px){.sw-greet{flex-wrap:wrap;padding:16px}.sw-greet .btn{width:100%;text-align:center}}
/* vườn hoa tiến độ */
.sw-garden-sec{margin:26px 0 8px}
.sw-garden{position:relative;border-radius:28px;overflow:hidden;border:1px solid color-mix(in srgb,var(--gold) 55%,var(--line));box-shadow:var(--shadow-lg);background:#1b0b2e}
.sw-garden canvas{display:block;width:100%;cursor:pointer}
.sw-garden .gtip{position:absolute;max-width:min(300px,86%);padding:10px 14px;border-radius:14px;background:rgba(30,10,40,.95);color:#fbeaf2;border:1px solid rgba(255,255,255,.2);font:13px/1.45 system-ui,sans-serif;pointer-events:none;z-index:2;box-shadow:0 8px 24px rgba(0,0,0,.4)}
.sw-garden .gtip b{font-size:14px}.sw-garden .gtip small{display:block;color:#e4bfd2;margin-top:3px;font-size:12px}
.sw-garden .vi,.sw-garden .en{display:inline}.sw-garden .en{display:none}
html[data-lang="en"] .sw-garden .vi{display:none}html[data-lang="en"] .sw-garden .en{display:inline}
html[data-lang="bi"] .sw-garden .en{display:inline}html[data-lang="bi"] .sw-garden .en::before{content:" / "}
.sw-garden .ghint{position:absolute;left:0;right:0;bottom:8px;text-align:center;font:12.5px system-ui,sans-serif;color:#e4bfd2;pointer-events:none;padding:0 12px}