/* เด็กติว.com — สไตล์หลัก (ธีมรอบ 4: กระดาษสมุด ปากกาแดงตรวจ น้องยางลบ) */
:root {
  --accent: #1F6F5C;
  --accent-dark: #185A4A;
  --accent-soft: #E8F3EF;
  --navy: #14213D;
  --ink: #1F2A44;
  --ink-strong: #14213D;
  --muted: #4B5565;
  --muted-2: #6B7280;
  --line: #E4E7EC;
  --line-2: #EEF0F3;
  --bg: #FBFCFD;
  --card: #FFFFFF;
  --yellow: #FFD43B;
  --yellow-soft: #FFF3BF;
  --yellow-ink: #5C4500;
  --green: #1F6F5C;
  --green-ink: #185A4A;
  --green-soft: #E8F3EF;
  --orange: #E8590C;
  --orange-ink: #A1420A;
  --orange-soft: #FFF1E6;
  --danger: #D7263D;
  --pen: #D7263D;
  --radius: 14px;
  --shadow: 0 1px 2px rgba(20,33,61,.04), 0 18px 40px -28px rgba(20,33,61,.28);
  --font: 'IBM Plex Sans Thai', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-q: 'IBM Plex Sans Thai Looped', 'IBM Plex Sans Thai', sans-serif;
  --font-hand: 'Itim', cursive;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; font-family: var(--font); font-size: 17px; line-height: 1.6; color: var(--ink); background: var(--bg); }
img, svg { max-width: 100%; }
a { color: var(--accent); }
a:hover { color: var(--accent-dark); }
h1, h2, h3 { color: var(--navy); line-height: 1.25; margin: 0; }
p { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid #1F6F5C; outline-offset: 2px; border-radius: 6px; }
.skip { position: absolute; left: -999px; top: 8px; background: #fff; padding: 8px 14px; z-index: 100; }
.skip:focus { left: 8px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { max-width: 1240px; margin: 0 auto; padding-left: 24px; padding-right: 24px; }
.narrow { max-width: 860px; }
@media (max-width: 600px) { .wrap { padding-left: 16px; padding-right: 16px; } body { font-size: 16px; } }

/* header (รอบ 4) */
.site-header { position: sticky; top: 0; z-index: 30; background: rgba(255,255,255,.9); backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--line); }
.header-in { display: flex; align-items: center; gap: 24px; height: 72px; }
.logo { display: inline-flex; align-items: center; gap: 10px; color: var(--ink-strong); text-decoration: none; flex-shrink: 0; white-space: nowrap; }
.logo svg { transition: transform .4s cubic-bezier(.3,1.7,.5,1); }
.logo:hover svg { transform: rotate(10deg) translateY(-2px); }
.wm { display: inline-flex; align-items: baseline; gap: 1px; }
.wm-a { font-size: 25px; font-weight: 700; letter-spacing: -.4px; color: var(--ink-strong); }
.wm-b { font-size: 14px; font-weight: 600; color: var(--muted-2); }
.main-nav { display: flex; align-items: center; gap: 4px; flex: 1; min-width: 0; }
.main-nav .nv { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 12px; font-size: 16px; font-weight: 500; color: var(--ink-strong); text-decoration: none; white-space: nowrap; transition: background .15s ease; }
.main-nav .nv svg { transition: transform .3s cubic-bezier(.3,1.7,.5,1); flex: none; }
.main-nav .nv:hover { background: #F1F3F6; color: var(--ink-strong); }
.main-nav .nv:hover svg { transform: rotate(-8deg) scale(1.12); }
.main-nav .nv[aria-current="page"] { background: var(--accent-soft); color: var(--accent-dark); font-weight: 600; }
.main-nav .nv-m { display: none; }
.auth-slot { display: flex; align-items: center; gap: 10px; margin-left: auto; flex-shrink: 0; }
.auth-slot .btn { gap: 8px; min-height: 44px; }
.burger { display: none; width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--line); background: #fff; align-items: center; justify-content: center; flex-shrink: 0; cursor: pointer; }
@media (max-width: 1080px) {
  .burger { display: inline-flex; }
  .main-nav { display: none; position: absolute; left: 0; right: 0; top: 72px; background: #fff; border-bottom: 1px solid var(--line); flex-direction: column; align-items: stretch; padding: 10px 16px 16px; box-shadow: 0 18px 30px -24px rgba(20,33,61,.4); }
  .main-nav.open { display: flex; }
  .main-nav .nv-m { display: flex; }
  .auth-slot { margin-left: auto; }
}
@media (max-width: 480px) { .login-t { display: none; } .header-in { gap: 12px; } }
.streak-chip { display: inline-flex; align-items: center; gap: 4px; padding: 6px 10px; border-radius: 999px; background: var(--orange-soft); color: var(--orange-ink); font-weight: 700; font-size: 15px; text-decoration: none; }
.avatar { flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; text-decoration: none; }
.avatar.sm { width: 30px; height: 30px; font-size: 13px; }
.avatar.md { width: 38px; height: 38px; font-size: 15px; }
.avatar.lg { width: 112px; height: 112px; font-size: 44px; border: 5px solid #fff; box-shadow: 0 0 0 3px var(--yellow); }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 20px; border-radius: 10px; border: 1px solid transparent; font-weight: 700; font-size: 16px; text-decoration: none; cursor: pointer; transition: background .15s, transform .05s; line-height: 1.3; }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-dark); color: #fff; }
.btn-yellow { background: var(--yellow); color: var(--ink-strong); }
.btn-yellow:hover { background: #F5C82E; color: var(--ink-strong); }
.btn-ghost { background: #fff; border-color: #CBD2E1; color: var(--ink); }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }
.btn-white { background: #fff; color: var(--navy); }
.btn-danger { background: #fff; border-color: #F1B5AE; color: var(--danger); }
.btn-sm { min-height: 40px; padding: 8px 14px; font-size: 15px; }
.btn-lg { padding: 15px 28px; font-size: 18px; border-radius: 12px; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.link-btn { background: none; border: 0; color: var(--accent); font-weight: 600; cursor: pointer; padding: 4px 2px; }

/* cards & chips */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; }
.card.shadow { box-shadow: var(--shadow); border: 0; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); background: #fff; color: var(--muted); font-size: 14px; font-weight: 600; cursor: pointer; min-height: 36px; text-decoration: none; }
.chip[aria-pressed="true"], .chip.on { border-color: var(--accent); background: var(--accent-soft); color: var(--navy); }
.tag { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 6px; font-size: 12px; font-weight: 700; background: #F1F4FA; color: var(--muted); }
.tag.blue { background: var(--accent-soft); color: var(--navy); }
.tag.green { background: var(--green-soft); color: var(--green-ink); }
.tag.orange { background: var(--orange-soft); color: var(--orange-ink); }
.tag.yellow { background: var(--yellow-soft); color: var(--yellow-ink); }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 12px; border-radius: 999px; font-size: 14px; font-weight: 700; }
.badge-teacher { background: var(--green-soft); color: var(--green-ink); }
.badge-helper { background: var(--yellow-soft); color: var(--yellow-ink); }
.muted { color: var(--muted-2); }
.small { font-size: 14px; }
.row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.between { justify-content: space-between; }
.stack { display: flex; flex-direction: column; gap: 12px; }
.grid-auto { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
.section { padding-top: 64px; }
.section-title { font-size: clamp(26px, 3.4vw, 38px); }
.eyebrow { font-size: 18px; font-weight: 600; color: var(--muted-2); }
.tablist { display: inline-flex; flex-wrap: wrap; gap: 4px; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 4px; }
.tablist button { padding: 8px 18px; border-radius: 8px; border: 0; background: transparent; font-weight: 700; color: var(--muted); cursor: pointer; min-height: 40px; }
.tablist button[aria-selected="true"] { background: var(--accent); color: #fff; }
.empty { border: 1.5px dashed #CBD2E1; border-radius: var(--radius); padding: 36px; text-align: center; background: #fff; color: var(--muted-2); }
.skeleton { background: linear-gradient(90deg, #EEF1F6 25%, #F6F8FB 50%, #EEF1F6 75%); background-size: 200% 100%; animation: sk 1.2s infinite; border-radius: 12px; min-height: 80px; }
@keyframes sk { to { background-position: -200% 0; } }

/* forms */
label.field { display: flex; flex-direction: column; gap: 6px; font-weight: 600; font-size: 15px; }
.input, select.input, textarea.input { width: 100%; padding: 11px 14px; border-radius: 10px; border: 1px solid #CBD2E1; background: #fff; font-weight: 400; min-height: 44px; }
textarea.input { resize: vertical; min-height: 110px; }
.input:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px #D7E4FF; }
.switch { position: relative; display: inline-block; width: 42px; height: 24px; border-radius: 999px; background: #CBD2E1; transition: background .2s; flex-shrink: 0; }
.switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: left .2s; }
[aria-pressed="true"] .switch, [aria-checked="true"] .switch { background: var(--accent); }
[aria-pressed="true"] .switch::after, [aria-checked="true"] .switch::after { left: 21px; }

/* toast & modal */
.toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 120px); background: var(--ink-strong); color: #fff; padding: 12px 20px; border-radius: 12px; font-weight: 600; z-index: 200; transition: transform .25s, opacity .25s, visibility .25s; max-width: calc(100% - 32px); opacity: 0; visibility: hidden; }
.toast.show { transform: translate(-50%, 0); opacity: 1; visibility: visible; }
dialog.modal { border: 0; border-radius: 20px; padding: 0; width: min(560px, calc(100% - 32px)); box-shadow: 0 30px 80px rgba(0,0,0,.25); }
dialog.modal::backdrop { background: rgba(23, 32, 51, .45); }
.modal-body { padding: 26px; display: flex; flex-direction: column; gap: 14px; }
.modal-actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }

/* promo + hero */
.promo { background: var(--ink-strong); color: #fff; font-size: 15px; }
.promo .wrap { display: flex; justify-content: center; align-items: center; gap: 8px 16px; padding-top: 8px; padding-bottom: 8px; flex-wrap: wrap; text-align: center; }
.promo a { background: var(--yellow); color: var(--ink-strong); padding: 3px 14px; border-radius: 999px; font-weight: 700; font-size: 14px; text-decoration: none; }
.hero { background: radial-gradient(70% 90% at 50% 0%, #DCE7FF 0%, var(--bg) 72%); }
.hero-in { max-width: 900px; margin: 0 auto; padding: 64px 24px 56px; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.hero-lead { font-size: 24px; font-weight: 600; color: var(--muted-2); }
.hero h1 { font-size: clamp(38px, 6vw, 68px); min-height: 1.3em; line-height: 1.3; }
.caret { color: var(--accent); font-weight: 400; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.search-wrap { position: relative; width: 100%; max-width: 640px; margin-top: 46px; }
.mascot { position: absolute; right: 54px; top: -66px; z-index: 0; display: flex; align-items: flex-start; gap: 6px; }
.mascot .bubble { margin-top: 6px; background: #fff; border: 1.5px solid var(--ink-strong); border-radius: 12px 12px 2px 12px; padding: 3px 10px; font-size: 13px; font-weight: 700; color: var(--ink-strong); white-space: nowrap; }
.mascot svg { transition: transform .3s; }
.search-wrap:focus-within .mascot svg { transform: translateY(-8px) rotate(-4deg); }
.search { position: relative; z-index: 1; display: flex; align-items: center; gap: 10px; background: #fff; border: 1.5px solid #CBD2E1; border-radius: 999px; padding: 6px 8px 6px 22px; box-shadow: 0 10px 30px rgba(30, 102, 224, .12); }
.search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font-size: 17px; min-height: 44px; }
.search-results { position: absolute; z-index: 5; left: 0; right: 0; top: calc(100% + 8px); background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 16px 40px rgba(23,32,51,.14); text-align: left; overflow: hidden; }
.search-results a { display: flex; justify-content: space-between; gap: 10px; padding: 12px 18px; text-decoration: none; color: var(--ink); border-bottom: 1px solid var(--line-2); }
.search-results a:hover, .search-results a:focus { background: var(--accent-soft); }
.ai-toggle { flex-shrink: 0; display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 999px; border: 0; background: #F4F6FA; font-size: 14px; font-weight: 600; color: var(--muted); cursor: pointer; min-height: 44px; }
.ai-toggle[aria-pressed="true"] { background: var(--accent-soft); color: var(--navy); }
.popular { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 14px; font-size: 15px; }
.popular a { padding: 4px 12px; border-radius: 999px; background: #fff; border: 1px solid var(--line); color: var(--muted); text-decoration: none; }
@media (max-width: 600px) { .mascot { right: 18px; } .mascot .bubble { display: none; } .ai-toggle .lbl { display: none; } }

/* category tabs */
.cat-card { background: #fff; border-radius: 20px; box-shadow: var(--shadow); padding: 26px 26px 30px; display: flex; flex-direction: column; gap: 22px; }
.cat-tabs { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; }
.cat-tab { flex: 0 0 auto; width: 128px; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 10px 6px 0; border: 0; background: transparent; cursor: pointer; text-align: center; color: var(--muted); }
.cat-tab .ic { width: 58px; height: 58px; border-radius: 16px; display: flex; align-items: center; justify-content: center; background: #F4F6FA; color: #6B7590; transition: transform .2s; }
.cat-tab:hover .ic { transform: translateY(-3px); }
.cat-tab .nm { font-size: 15px; font-weight: 600; line-height: 1.35; }
.cat-tab .bar { margin-top: 4px; width: 80%; height: 4px; border-radius: 999px; background: transparent; }
.cat-tab[aria-selected="true"] { color: var(--navy); }
.cat-tab[aria-selected="true"] .ic { background: var(--accent-soft); color: var(--accent); }
.cat-tab[aria-selected="true"] .bar { background: var(--accent); }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.tile { min-height: 120px; border-radius: 14px; padding: 18px; display: flex; flex-direction: column; gap: 4px; text-decoration: none; transition: transform .15s, box-shadow .15s; }
.tile:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(23,32,51,.1); }
.tile .sub { font-size: 13px; font-weight: 600; opacity: .85; }
.tile .ttl { font-size: 19px; font-weight: 700; line-height: 1.35; }
.tile .go { margin-top: auto; font-size: 14px; font-weight: 600; }
.t0 { background: #E8F3EF; color: var(--navy); } .t1 { background: #FFF4CC; color: #5C4500; } .t2 { background: #E3F6EE; color: #0F5A40; } .t3 { background: #F0EAFF; color: #3F2A8A; }

/* banner */
.banner-row { display: flex; flex-wrap: wrap; gap: 20px; }
.banner { flex: 999 1 560px; min-width: 0; position: relative; overflow: hidden; border-radius: 20px; background: var(--accent); color: #fff; padding: 40px; display: flex; flex-wrap: wrap; gap: 24px; align-items: center; justify-content: space-between; min-height: 300px; }
.banner h2 { color: #fff; font-size: clamp(26px, 3.4vw, 40px); }
.banner p { color: #DDEFE8; }
.omr-card { flex: 0 1 230px; background: #fff; border-radius: 16px; padding: 18px; display: flex; flex-direction: column; gap: 10px; transform: rotate(3deg); box-shadow: 0 16px 36px rgba(0,0,0,.2); color: var(--muted); font-size: 13px; }
.omr-row { display: flex; gap: 10px; align-items: center; }
.omr-row i { width: 18px; height: 18px; border-radius: 50%; border: 2px solid #9AA6C0; display: inline-block; }
.omr-row i.f { background: var(--ink-strong); border-color: var(--ink-strong); }
.omr-row i.y { background: var(--yellow); border-color: #C9A21E; }
.countdown-card { flex: 1 1 320px; min-width: 0; background: #fff; border-radius: 20px; padding: 28px; display: flex; flex-direction: column; gap: 14px; box-shadow: var(--shadow); }
.cd-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; text-align: center; }
.cd-grid div { background: #EEF6F2; border-radius: 12px; padding: 10px 4px; }
.cd-grid b { display: block; font-size: 30px; color: var(--navy); line-height: 1.1; font-variant-numeric: tabular-nums; }
.cd-grid span { font-size: 13px; color: var(--muted); }

/* features / steps */
.feature .ic { width: 60px; height: 60px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); display: flex; align-items: center; justify-content: center; }
.step { display: flex; gap: 16px; }
.step .n { flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; background: var(--accent); color: #fff; font-weight: 700; display: flex; align-items: center; justify-content: center; }

/* set cards carousel */
.hscroll { display: flex; gap: 16px; overflow-x: auto; padding-bottom: 10px; scroll-snap-type: x proximity; }
.hscroll > * { scroll-snap-align: start; }
.set-card { flex: 0 0 260px; background: #fff; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; text-decoration: none; color: var(--ink); display: flex; flex-direction: column; transition: transform .15s, box-shadow .15s; }
.set-card:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(23,32,51,.1); color: var(--ink); }
.set-cover { height: 110px; padding: 16px; display: flex; flex-direction: column; justify-content: flex-end; color: #fff; }
.set-cover .sec { font-size: 13px; font-weight: 700; opacity: .9; }
.set-cover .subj { font-size: 22px; font-weight: 700; line-height: 1.2; }
.set-body { padding: 14px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.set-body .ttl { font-size: 16px; font-weight: 700; line-height: 1.4; }
.price-free { margin-top: auto; align-self: flex-end; font-weight: 700; color: var(--green-ink); }
.price-member { margin-top: auto; align-self: flex-end; font-weight: 700; color: var(--accent); }
.set-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.set-grid .set-card { flex: none; }

/* pricing */
.plan { position: relative; background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 30px; display: flex; flex-direction: column; gap: 14px; }
.plan.best { border: 2px solid var(--accent); }
.plan .flag { position: absolute; top: 18px; right: 18px; font-size: 13px; font-weight: 700; padding: 3px 12px; border-radius: 999px; background: var(--accent); color: #fff; }
.plan .art { height: 120px; border-radius: 14px; display: flex; align-items: center; justify-content: center; }
.plan ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; font-size: 15px; }
.plan li { display: flex; gap: 8px; }
.plan li::before { content: '✓'; color: var(--accent); font-weight: 700; }
.plan .btn { margin-top: auto; }

/* announcements */
.ann-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 16px; padding: 14px 0; border-top: 1px solid var(--line-2); }

/* footer */
.site-footer { background: #fff; border-top: 1px solid var(--line); margin-top: 72px; }
.footer-grid { padding-top: 48px; padding-bottom: 24px; display: grid; grid-template-columns: 2fr repeat(3, 1fr); gap: 28px; font-size: 15px; }
.footer-grid nav { display: flex; flex-direction: column; gap: 6px; }
.footer-grid nav b { color: var(--navy); }
.footer-grid nav a { color: var(--muted); text-decoration: none; }
.footer-grid nav a:hover { color: var(--accent); }
.footer-brand { display: flex; flex-direction: column; gap: 10px; color: var(--muted); }
.footer-note { padding-top: 16px; padding-bottom: 32px; border-top: 1px solid var(--line-2); font-size: 14px; color: var(--muted-2); }
@media (max-width: 800px) { .footer-grid { grid-template-columns: 1fr 1fr; } .footer-brand { grid-column: 1 / -1; } }

/* page header band */
.band { background: radial-gradient(70% 120% at 20% 0%, #DCE7FF 0%, var(--bg) 70%); }
.band-in { padding-top: 36px; padding-bottom: 24px; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; }
.band h1 { font-size: clamp(28px, 4vw, 44px); }
.band.dark { background: var(--navy); color: #fff; position: relative; overflow: hidden; }
.band.dark h1 { color: #fff; }
.band.dark p { color: #CFE3DB; }
.crumbs { font-size: 14px; color: var(--muted-2); display: flex; gap: 6px; flex-wrap: wrap; }
.crumbs a { color: var(--muted-2); }

/* layout two-col */
.two-col { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; padding-top: 16px; }
.two-col > .main { flex: 999 1 620px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.two-col > aside { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }

/* question UI */
.q-card { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 26px; display: flex; flex-direction: column; gap: 16px; }
.q-stem { font-family: var(--font-q); font-size: 19px; line-height: 1.75; font-weight: 500; white-space: pre-line; color: var(--ink-strong); }
.q-choices { display: flex; flex-direction: column; gap: 10px; font-family: var(--font-q); font-size: 17px; }
.choice { text-align: left; display: flex; gap: 14px; align-items: flex-start; padding: 13px 16px; border-radius: 14px; border: 2px solid #D5DAE6; background: #fff; cursor: pointer; min-height: 52px; color: var(--ink-strong); line-height: 1.6; transition: border-color .12s, background .12s; }
.choice:hover:not([disabled]) { border-color: #1F6F5C; }
.choice .b { flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; border: 2px solid #8A96B3; display: flex; align-items: center; justify-content: center; font-family: var(--font); font-size: 15px; font-weight: 700; margin-top: -1px; }
.choice[aria-pressed="true"] { border-color: var(--accent); background: #EEF6F2; }
.choice[aria-pressed="true"] .b { background: var(--accent); border-color: var(--accent); color: #fff; }
.choice.right { border-color: var(--green); background: #EAF7F1; }
.choice.right .b { background: var(--green); border-color: var(--green); color: #fff; }
.choice.wrong { border-color: #E07A3B; background: #FFF3EA; }
.choice.wrong .b { background: #E07A3B; border-color: #E07A3B; color: #fff; }
.choice[disabled] { cursor: default; }
.explain { border-radius: 14px; background: #F2FAF6; padding: 16px 18px; font-size: 16px; color: #24324D; display: flex; flex-direction: column; gap: 8px; }
.explain.bad { background: #FFF6EE; }
.explain h3 { font-size: 17px; color: var(--green-ink); }
.explain.bad h3 { color: var(--orange-ink); }
.hint-box { background: #FFF8DB; border: 1px solid #F2DC86; border-radius: 14px; padding: 14px 18px; color: #4A3A00; }
.open-card .answer-guide { background: #FBFCFD; border-radius: 12px; padding: 16px; white-space: pre-line; }

/* exam runner */
.exam-top { background: var(--ink-strong); color: #fff; position: sticky; top: 0; z-index: 40; }
body:has(.exam-top) .site-header { position: static; }
.exam-top .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 20px; padding-top: 10px; padding-bottom: 10px; }
.timer { display: flex; align-items: center; gap: 8px; background: #24304A; padding: 8px 14px; border-radius: 12px; font-variant-numeric: tabular-nums; font-size: 20px; font-weight: 700; }
.timer.low { background: #7A1E12; }
.navgrid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.navgrid button { height: 40px; border-radius: 10px; border: 1px solid #D5DAE6; background: #F1F3F8; color: var(--muted); font-weight: 600; cursor: pointer; font-size: 15px; padding: 0; }
.navgrid button.ans { background: var(--accent); border-color: var(--accent); color: #fff; }
.navgrid button.flag { border: 2.5px solid #E0A800; }
.navgrid button.cur { box-shadow: 0 0 0 3px var(--ink-strong); }
.progress { height: 6px; background: #E9ECF4; border-radius: 999px; overflow: hidden; }
.progress > div { height: 100%; background: var(--accent); transition: width .2s; }
.subj-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.subj-pills span { padding: 7px 14px; border-radius: 999px; background: #fff; border: 1px solid var(--line); font-size: 14px; color: var(--muted); }
.subj-pills span.on { background: var(--accent); color: #fff; border-color: var(--accent); }

/* result */
.meter { position: relative; padding-top: 22px; }
.meter .track { height: 14px; background: #E9ECF4; border-radius: 999px; overflow: hidden; }
.meter .fill { height: 100%; border-radius: 999px; }
.meter .line { position: absolute; left: 60%; top: 0; bottom: -4px; width: 2px; background: var(--ink-strong); }
.meter .lbl { position: absolute; left: 60%; top: -2px; transform: translateX(-50%); font-size: 13px; font-weight: 600; white-space: nowrap; }
.big-score { font-size: 48px; font-weight: 700; line-height: 1; color: var(--ink-strong); }
.kv { display: flex; justify-content: space-between; gap: 12px; }
.review-item { border-top: 1px solid var(--line-2); padding-top: 18px; }

/* board */
.thread { display: flex; gap: 14px; background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 16px 18px; }
.vote { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; cursor: pointer; border: 1px solid var(--line); background: var(--bg); color: var(--muted); }
.vote[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
.thread-title { font-size: 18px; font-weight: 700; color: var(--ink-strong); text-decoration: none; line-height: 1.4; }
.thread-title:hover { color: var(--accent); }
.ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.post { display: flex; gap: 12px; }
.post-body { white-space: pre-line; overflow-wrap: anywhere; }
.pinned { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; padding: 18px 20px; border-radius: 16px; background: var(--ink-strong); color: #fff; text-decoration: none; }
.pinned:hover { color: #fff; }
.dist-row { position: relative; overflow: hidden; border-radius: 10px; padding: 10px 14px; border: 1.5px solid var(--line); background: #fff; }
.dist-row .fill { position: absolute; inset: 0 auto 0 0; background: #F1F4FA; }
.dist-row.right { border-color: var(--green); }
.dist-row.right .fill { background: #DDF3E8; }
.dist-row > span { position: relative; display: flex; gap: 10px; align-items: center; }

/* leaderboard */
.podium { display: flex; justify-content: center; align-items: flex-end; gap: 14px; }
.podium .p { flex: 0 1 200px; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.podium .ped { margin-top: 6px; width: 100%; border-radius: 14px 14px 0 0; display: flex; justify-content: center; padding-top: 10px; font-size: 34px; font-weight: 700; }
.lb-row { display: flex; align-items: center; gap: 14px; padding: 12px 18px; border-bottom: 1px solid var(--line-2); }
.lb-row .rk { width: 32px; text-align: center; font-weight: 700; color: var(--muted-2); font-size: 17px; }
.me-bar { position: sticky; bottom: 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 14px 18px; border-radius: 16px; background: var(--ink-strong); color: #fff; box-shadow: 0 12px 30px rgba(23,32,51,.25); }
.league { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; text-align: center; font-size: 12px; font-weight: 600; color: var(--muted-2); }
.league span { display: block; margin: 0 auto 4px; width: 34px; height: 34px; border-radius: 50%; }
.league .on { color: var(--navy); }
.league .on span { outline: 3px solid var(--accent); outline-offset: 2px; }
.share-card { aspect-ratio: 1 / 1; border-radius: 16px; background: var(--navy); color: #fff; padding: 22px; display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden; }

/* profile */
.cover { height: 170px; background: var(--accent); position: relative; overflow: hidden; }
.profile-head { margin-top: -70px; position: relative; background: #fff; border-radius: 20px; padding: 24px 28px; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 18px 24px; box-shadow: 0 10px 30px rgba(23,32,51,.08); }
.stat-tile { border-radius: 16px; padding: 18px 20px; display: flex; align-items: center; gap: 14px; }
.stat-tile b { display: block; font-size: 28px; line-height: 1.1; }
.heat { display: grid; grid-template-rows: repeat(7, 14px); grid-auto-flow: column; grid-auto-columns: 14px; gap: 4px; }
.heat span { width: 14px; height: 14px; border-radius: 4px; background: #EEF1F6; }
.badge-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.badge-grid div { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; font-size: 12px; font-weight: 600; }
.badge-grid .c { width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.badge-grid .locked .c { background: #F4F6FA; color: #B3BCCD; border: 1.5px dashed #CBD2E1; }
.badge-grid .locked { color: var(--muted-2); }

/* admin */
.admin-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.table { width: 100%; border-collapse: collapse; font-size: 15px; }
.table th, .table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line-2); vertical-align: top; }
.table th { font-size: 13px; color: var(--muted-2); font-weight: 700; }
.table-wrap { overflow-x: auto; background: #fff; border: 1px solid var(--line); border-radius: 14px; }

/* prose */
.prose { display: flex; flex-direction: column; gap: 14px; }
.prose h2 { margin-top: 18px; font-size: 24px; }
.prose ul, .prose ol { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 6px; }
.prose table { border-collapse: collapse; width: 100%; background: #fff; }
.prose th, .prose td { border: 1px solid var(--line); padding: 10px 12px; text-align: left; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* ===== มินิเกมดวลความเร็ว ===== */
.game-lobby { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 20px; align-items: start; }
@media (max-width: 860px) { .game-lobby { grid-template-columns: 1fr; } }
.game-start { align-items: stretch; gap: 16px; }
.game-hero { display: flex; justify-content: center; }
.game-rules { margin: 0; padding-left: 20px; display: grid; gap: 6px; color: var(--ink); }
.seg { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.seg-btn { border: 2px solid var(--line); background: #fff; border-radius: 999px; padding: 8px 16px; font: inherit; font-weight: 600; cursor: pointer; color: var(--ink); }
.seg-btn[aria-pressed="true"] { border-color: var(--accent); background: #EEF6F2; color: var(--navy); }
.btn-lg { padding: 16px 28px; font-size: 20px; border-radius: 16px; }
.game-lb { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.game-lb li { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; background: #FBFCFD; }
.game-lb li:nth-child(1) { background: #FFF6D6; }
.game-lb .rk { font-weight: 700; color: var(--navy); text-align: center; }
.game-lb a { color: var(--ink-strong); text-decoration: none; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.game-count { min-height: 340px; display: flex; align-items: center; justify-content: center; }
.game-count span { font-size: 140px; font-weight: 800; color: var(--accent); animation: pop .7s ease-out infinite; }
@keyframes pop { 0% { transform: scale(.6); opacity: 0; } 30% { transform: scale(1.1); opacity: 1; } 100% { transform: scale(1); opacity: .9; } }
.game-play { max-width: 760px; margin: 0 auto; display: grid; gap: 14px; }
.game-hud { position: sticky; top: 8px; z-index: 5; display: flex; align-items: center; gap: 14px; background: var(--ink-strong); color: #fff; border-radius: 16px; padding: 12px 16px; }
.g-time { flex: 1; display: flex; align-items: center; gap: 10px; }
.g-time b { font-size: 26px; min-width: 34px; text-align: right; }
.g-bar { flex: 1; height: 12px; background: rgba(255,255,255,.18); border-radius: 999px; overflow: hidden; }
.g-bar span { display: block; height: 100%; width: 100%; background: #FFD54A; border-radius: 999px; transition: width .1s linear; }
.g-bar span.hot { background: #FF7A59; }
.g-score { display: flex; flex-direction: column; align-items: center; line-height: 1.1; }
.g-score .muted { color: #CFE3DB; }
.g-score b { font-size: 26px; }
.g-combo { background: #FFD54A; color: #172033; border-radius: 999px; padding: 6px 12px; font-weight: 700; animation: pop .35s ease-out; }
.game-card .q-stem { font-size: 20px; }
.game-choices .choice { min-height: 58px; font-size: 18px; }
.shake { animation: shake .35s; }
@keyframes shake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-8px); } 75% { transform: translateX(8px); } }
.g-float { position: absolute; transform: translate(-50%, 0); color: var(--green); font-weight: 800; font-size: 26px; pointer-events: none; animation: floatup .9s ease-out forwards; z-index: 50; }
@keyframes floatup { to { transform: translate(-50%, -60px); opacity: 0; } }
.game-end { align-items: stretch; text-align: center; gap: 16px; max-width: 640px; margin: 0 auto; }
.g-final { display: flex; flex-direction: column; align-items: center; }
.g-final b { font-size: 84px; line-height: 1; color: var(--navy); }
.stat-row { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }
.stat-row > div { background: #FBFCFD; border-radius: 14px; padding: 12px 18px; min-width: 104px; display: flex; flex-direction: column; }
.stat-row b { font-size: 26px; color: var(--ink-strong); }
.stat-row span { font-size: 13px; color: var(--muted); }
.explain { background: #F2F7FF; border-radius: 12px; padding: 12px 14px; line-height: 1.7; white-space: pre-line; }

/* ===== ภารกิจประจำวัน ===== */
.missions { display: grid; gap: 10px; }
.mission { display: grid; grid-template-columns: 28px 1fr auto; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 12px; background: #FBFCFD; text-decoration: none; color: var(--ink-strong); }
.mission .ck { width: 26px; height: 26px; border-radius: 50%; border: 2px solid #B9C3DA; display: flex; align-items: center; justify-content: center; font-size: 14px; color: #fff; }
.mission.done .ck { background: var(--green); border-color: var(--green); }
.mission.done .tt { text-decoration: line-through; color: var(--muted); }
.mission .pg { font-size: 13px; color: var(--muted); font-weight: 600; }
.mission-bar { height: 10px; background: #E9ECF4; border-radius: 999px; overflow: hidden; }
.mission-bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), #6EA8FF); border-radius: 999px; }
.home-play { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 20px; }
@media (max-width: 860px) { .home-play { grid-template-columns: 1fr; } }
.game-promo { position: relative; overflow: hidden; border-radius: 20px; padding: 28px; background: #172033; color: #fff; display: flex; flex-direction: column; gap: 12px; min-height: 240px; }
.game-promo h2 { color: #fff; font-size: clamp(24px, 3vw, 32px); }
.game-promo p { color: #CFE3DB; max-width: 440px; }
.game-promo .bolt { position: absolute; right: -10px; bottom: -20px; opacity: .9; }

/* confetti */
.confetti { position: fixed; top: -12px; width: 10px; height: 14px; z-index: 300; pointer-events: none; animation: fall linear forwards; }
@keyframes fall { to { transform: translateY(105vh) rotate(720deg); } }
@media (max-width: 640px) { .hide-sm { display: none !important; } }
.game-promo, .game-promo:hover { text-decoration: none; }
body.in-game .game-band { display: none; }
body.in-game .site-header { position: static; }

/* ===== ลูกเล่นหน้าทำข้อสอบ ===== */
.exam-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.exam-tools .tool { border: 1px solid var(--line); background: #fff; border-radius: 10px; padding: 6px 12px; font: inherit; font-weight: 600; font-size: 14px; color: var(--ink); cursor: pointer; }
.exam-tools .tool[aria-pressed="true"] { background: #EEF6F2; border-color: var(--accent); color: var(--navy); }
.tool-tip { flex-basis: 100%; }
#qcard { --qscale: 1; }
#qcard .q-stem { font-size: calc(19px * var(--qscale)); }
#qcard .q-choices { font-size: calc(17px * var(--qscale)); }
.choice-row { display: flex; gap: 8px; align-items: stretch; }
.choice-row .choice { flex: 1; }
.strike { flex: 0 0 40px; border: 1px dashed #C5CCDB; background: #fff; border-radius: 12px; color: #9AA4BC; cursor: pointer; font-size: 16px; }
.strike:hover { color: #E07A3B; border-color: #E07A3B; }
.choice-row.struck .choice { opacity: .45; }
.choice-row.struck .choice .ct { text-decoration: line-through; text-decoration-thickness: 2px; }
.choice-row.struck .strike { color: #E07A3B; border-style: solid; border-color: #E07A3B; }
.pace { font-size: 13px; font-weight: 700; padding: 6px 10px; border-radius: 999px; background: #24304A; color: #C9F2DD; }
.pace.slow { background: #7A1E12; color: #FFE1D6; }
.pace.fast { background: #12573F; color: #D7FBEA; }
.navgrid button { border-radius: 50%; aspect-ratio: 1; height: auto; position: relative; }
.navgrid button.unsure::after { content: ''; position: absolute; top: -2px; right: -2px; width: 10px; height: 10px; border-radius: 50%; background: #FF7A59; border: 2px solid #fff; }
.scratch { position: fixed; right: 16px; bottom: 16px; width: min(380px, calc(100vw - 32px)); background: #FFFBEA; border: 1px solid #F0DC8A; border-radius: 16px; box-shadow: 0 16px 40px rgba(23,32,51,.2); padding: 12px; z-index: 60; display: flex; flex-direction: column; gap: 8px; }
.scratch textarea { min-height: 200px; border: 0; background: repeating-linear-gradient(#FFFBEA 0 27px, #EADFAF 27px 28px); font: 16px/28px var(--font); resize: vertical; outline: none; padding: 0 4px; }
body.focus-mode .site-header, body.focus-mode .site-footer, body.focus-mode aside:not(.spad) { display: none !important; }
body.focus-mode .two-col { max-width: 860px; margin-left: auto; margin-right: auto; }

/* ===== วิเคราะห์ผล ===== */
.stat-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; }
.stat-cards .card { display: flex; flex-direction: column; gap: 2px; }
.stat-cards b { font-size: 30px; color: var(--navy); line-height: 1.2; }
.hbar { height: 10px; background: #E9ECF4; border-radius: 999px; overflow: hidden; }
.hbar span { display: block; height: 100%; border-radius: 999px; }
.topic-row { display: grid; grid-template-columns: minmax(0, 1fr) 90px 44px; gap: 10px; align-items: center; text-decoration: none; color: var(--ink-strong); padding: 6px 0; }
.topic-row .muted.small { display: none; }
.topic-row.wide { grid-template-columns: minmax(0, 1.4fr) minmax(60px, 1fr) 44px 110px 70px; }
.topic-row.wide .muted.small { display: inline; }
.topic-row .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topic-row .up { color: var(--green); } .topic-row .down { color: #C2410C; }
@media (max-width: 640px) { .topic-row.wide { grid-template-columns: minmax(0, 1fr) 70px 44px; } .topic-row.wide .small { display: none !important; } }
.hist { display: grid; gap: 6px; }
.hist-row { display: grid; grid-template-columns: 74px minmax(0, 1fr) auto auto auto; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 12px; background: #FBFCFD; text-decoration: none; color: var(--ink-strong); }
.hist-row .ht { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.hist-row .pill.ok { background: #E3F6EE; color: var(--green); } .hist-row .pill.no { background: #FFF0E6; color: #B4501A; }
@media (max-width: 640px) { .hist-row { grid-template-columns: 1fr auto; } .hist-row .hd, .hist-row .hp { display: none; } }
.trend { width: 100%; height: auto; margin-top: 8px; }
.subj-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.subj-card { background: #FBFCFD; border-radius: 14px; padding: 14px; display: flex; flex-direction: column; gap: 6px; }
.plan-step { display: grid; grid-template-columns: 30px 1fr; gap: 10px; }
.plan-step > b { width: 28px; height: 28px; border-radius: 50%; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; }
.locked-card { position: relative; overflow: hidden; min-height: 200px; margin-top: 20px; }
.two-col .locked-card, aside .locked-card { margin-top: 0; }
.lock-blur { filter: blur(5px); opacity: .5; }
.fake-bars { display: grid; gap: 14px; padding: 10px; }
.fake-bars i { display: block; height: 16px; border-radius: 999px; background: linear-gradient(90deg, #1F6F5C, #1F6F5C); }
.lock-msg { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; padding: 16px; background: rgba(255,255,255,.55); }
.lock-ic { font-size: 28px; }
.btn-line { background: #06C755; color: #fff; border: 0; }
.btn-line:hover { background: #05B04B; color: #fff; }
.share-box { display: flex; gap: 8px; }
.share-box .input { flex: 1; min-width: 0; }

/* ===== การ์ดจำ ===== */
.deck-pick { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.deck-stats { display: flex; gap: 16px; justify-content: center; margin-bottom: 12px; color: var(--muted); flex-wrap: wrap; }
.deck-stats b { color: var(--ink-strong); }
.flash { perspective: 1200px; cursor: pointer; outline: none; }
.flash-in { position: relative; min-height: 300px; transition: transform .5s; transform-style: preserve-3d; }
.flash.flipped .flash-in { transform: rotateY(180deg); }
.face { position: absolute; inset: 0; backface-visibility: hidden; border-radius: 20px; padding: 26px; display: flex; flex-direction: column; gap: 12px; justify-content: center; background: #fff; border: 1px solid var(--line); box-shadow: 0 12px 30px rgba(23,32,51,.08); overflow: auto; }
.face.back { transform: rotateY(180deg); background: #F2F7FF; border-color: #C9DAFB; }
.face .ans { font-size: 24px; font-weight: 700; color: var(--navy); }
.flash:focus-visible .face { box-shadow: 0 0 0 3px var(--accent); }
.flash-btns { justify-content: center; margin-top: 14px; }
.flash-btns .btn { min-width: 140px; }

/* ===== ด่านผจญภัย ===== */
.star-total { background: rgba(255,255,255,.1); border-radius: 16px; padding: 10px 16px; color: #fff; }
.star-total b { font-size: 26px; color: #FFD54A; }
.world { margin-bottom: 32px; }
.path { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px; }
.node { position: relative; border: 2px solid var(--line); background: #fff; border-radius: 18px; padding: 14px; display: flex; flex-direction: column; gap: 4px; align-items: center; text-align: center; font: inherit; color: var(--ink-strong); cursor: pointer; transition: transform .15s, box-shadow .15s; }
.node.open:hover { transform: translateY(-3px); box-shadow: 0 10px 22px rgba(23,32,51,.12); }
.node .num { width: 44px; height: 44px; border-radius: 50%; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 18px; }
.node.done .num { background: var(--green); }
.node.locked { opacity: .55; cursor: not-allowed; background: #F4F6FA; }
.node.locked .num { background: #B9C3DA; }
.node .nm { font-weight: 700; line-height: 1.35; }
.stars .st, .big-stars .st { color: #D5DAE6; font-size: 18px; }
.stars .st.on, .big-stars .st.on { color: #F5B800; }
.big-stars { text-align: center; } .big-stars .st { font-size: 54px; }
.quest-play { max-width: 760px; margin: 0 auto; display: grid; gap: 14px; }
.quest-dots { display: flex; gap: 6px; } .quest-dots i { width: 12px; height: 12px; border-radius: 50%; background: #D5DAE6; } .quest-dots i.past { background: var(--accent); } .quest-dots i.now { background: #FFD54A; box-shadow: 0 0 0 3px #FFF1B8; }
.quest-end { text-align: center; align-items: center; max-width: 620px; margin: 0 auto; }

/* ===== ห้องสอบสด ===== */
.live-clock { font-size: clamp(40px, 7vw, 64px); font-weight: 800; color: var(--navy); font-variant-numeric: tabular-nums; }
.live-on { align-self: center; background: #FFE4DB; color: #B4361A; animation: blink 1.4s infinite; }
@keyframes blink { 50% { opacity: .55; } }
.live-lb li { grid-template-columns: 34px 1fr auto 64px; }
.live-lb b small { color: var(--muted); font-weight: 600; }

/* ===== สนามฝึก ===== */
.play-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.play-card { border-radius: 20px; padding: 22px; min-height: 180px; display: flex; flex-direction: column; gap: 8px; text-decoration: none; color: var(--ink-strong); background: #fff; border: 1px solid var(--line); transition: transform .15s, box-shadow .15s; }
.play-card:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(23,32,51,.12); }
.play-card .pill { align-self: flex-start; }
.play-card h2 { font-size: 24px; }
.play-card p { color: var(--muted); }
.play-card.live { background: #1C1530; color: #fff; border: 0; } .play-card.live p { color: #D7CCF5; } .play-card.live h2 { color: #fff; }
.play-card.speed { background: #172033; border: 0; } .play-card.speed h2 { color: #fff; } .play-card.speed p { color: #CFE3DB; }

/* ===== ระดับ ===== */
.level-card { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; margin-top: 16px; padding: 16px 18px; border-radius: 18px; background: linear-gradient(120deg, #14213D, #1F6F5C); color: #fff; }
.level-card .small.muted { color: #CFE3DB; }
.level-card .btn-ghost { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.3); }
.lv-badge { width: 72px; height: 72px; border-radius: 22px; background: #FFD54A; color: #172033; display: flex; align-items: baseline; justify-content: center; padding-top: 14px; font-size: 32px; font-weight: 800; box-shadow: inset 0 -4px 0 rgba(0,0,0,.12); }
.lv-badge small { font-size: 14px; margin-right: 2px; }
.lv-bar { height: 10px; background: rgba(255,255,255,.2); border-radius: 999px; overflow: hidden; }
.lv-bar span { display: block; height: 100%; background: #FFD54A; border-radius: 999px; }

/* ===== แถบเมนูล่างบนมือถือ ===== */
.tabbar { display: none; }
@media (max-width: 760px) {
  .tabbar { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: rgba(255,255,255,.97); backdrop-filter: blur(8px); border-top: 1px solid var(--line); padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); }
  .tabbar a { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 11px; font-weight: 600; color: var(--muted); text-decoration: none; padding: 4px 0; border-radius: 10px; }
  .tabbar a[aria-current="page"] { color: var(--accent); background: #EEF6F2; }
  body { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
  body.in-game .tabbar, body:has(.exam-top) .tabbar { display: none; }
  body:has(.exam-top) { padding-bottom: 0; }
  .main-nav { overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .main-nav::-webkit-scrollbar { display: none; }
  .scratch { bottom: 12px; }
  .choice { min-height: 56px; }
  .btn { min-height: 44px; }
}

/* ---------- ห้องฝึกเจาะรายเรื่อง ---------- */
.drill-wrap { display: grid; grid-template-columns: 280px 1fr; gap: 24px; align-items: start; }
.drill-topics { position: sticky; top: 84px; display: flex; flex-direction: column; gap: 4px; max-height: calc(100vh - 110px); overflow: auto; }
.drill-select { display: none; }
.drill-topic { display: flex; justify-content: space-between; gap: 8px; width: 100%; text-align: left; padding: 9px 12px; border-radius: 10px; border: 0; background: transparent; color: var(--ink); font-weight: 600; cursor: pointer; min-height: 40px; }
.drill-topic:hover:not(:disabled) { background: var(--accent-soft); }
.drill-topic.on { background: var(--accent); color: #fff; }
.drill-topic.on .small { color: #DCE7FF; }
.drill-topic:disabled { cursor: default; color: var(--muted); }
.drill-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.drill-tile { position: relative; display: flex; flex-direction: column; gap: 4px; align-items: flex-start; text-align: left; padding: 16px; border-radius: 14px; border: 1px solid var(--line); background: #fff; cursor: pointer; transition: transform .15s, box-shadow .15s; min-height: 108px; }
.drill-tile:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(23,32,51,.09); }
.drill-tile .tile-no { font-size: 20px; font-weight: 700; color: var(--ink-strong); }
.drill-tile .tile-st { margin-top: auto; font-weight: 700; color: var(--accent); }
.drill-tile.pass { border-color: #9FD9BE; background: var(--green-soft); }
.drill-tile.pass .tile-st { color: var(--green-ink); }
.drill-tile.next { border: 2px solid var(--accent); }
.drill-tile.locked .tile-st { color: var(--muted); }
.tile-flag { position: absolute; top: -10px; right: 12px; background: var(--accent); color: #fff; font-size: 12px; font-weight: 700; padding: 2px 10px; border-radius: 999px; }
.lv-bar { display: flex; height: 10px; border-radius: 999px; overflow: hidden; background: var(--line-2); }
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: -1px; }
.lv-chip { display: inline-block; font-size: 13px; font-weight: 700; padding: 3px 10px; border-radius: 999px; margin-left: 6px; vertical-align: 2px; }
.lv-chip.l1 { background: #E3F6EE; color: #0F6B4B; }
.lv-chip.l2 { background: #FFF1D6; color: #8A5A00; }
.lv-chip.l3 { background: #FDE4E1; color: #A3271C; }
.drill-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; background: linear-gradient(120deg, #14213D, #1F6F5C); color: #fff; border: 0; margin-bottom: 20px; }
.drill-cta p { color: #DCE7FF; }
@media (max-width: 860px) {
  .drill-wrap { grid-template-columns: 1fr; }
  .drill-topics { position: static; max-height: none; }
  .drill-topic-list { display: none; }
  .drill-select { display: block; }
}

.consent { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 60; max-width: 720px; margin: 0 auto; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 12px 32px rgba(23,32,51,.16); padding: 14px 16px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; justify-content: space-between; }
.consent p { margin: 0; font-size: 14px; flex: 1 1 260px; }
@media (max-width: 720px) { .consent { bottom: 76px; } }

/* ---------- คลิปอธิบายแบบเคลื่อนไหว ---------- */
.xp { position: relative; overflow: hidden; border-radius: 20px; padding: 18px; margin-bottom: 20px; color: var(--ink-strong);
  background: radial-gradient(circle at 12% 18%, rgba(255,255,255,.55) 0 14px, transparent 15px), radial-gradient(circle at 88% 30%, rgba(255,255,255,.4) 0 22px, transparent 23px),
  repeating-linear-gradient(135deg, rgba(255,255,255,.18) 0 10px, transparent 10px 22px), linear-gradient(135deg, #E8F3EF, #FFF3D1 60%, #FFE3EA); border: 2px solid var(--ink-strong); box-shadow: 5px 5px 0 var(--ink-strong); }
.xp-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; font-size: 17px; }
.xp-badge { background: var(--ink-strong); color: #FFD54A; font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; }
.xp-stage { min-height: 150px; display: flex; flex-direction: column; justify-content: center; gap: 12px; background: rgba(255,255,255,.75); border: 2px dashed #9AA8C7; border-radius: 16px; padding: 16px; }
.xp-row { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; align-items: center; }
.xp-p { animation: xpPop .45s cubic-bezier(.2,1.6,.4,1) both; animation-delay: var(--d); }
@keyframes xpPop { from { opacity: 0; transform: translateY(12px) scale(.6); } to { opacity: 1; transform: none; } }
.xp-num, .xp-hi, .xp-ans, .xp-muted { font-size: 26px; font-weight: 700; min-width: 54px; text-align: center; padding: 8px 12px; border-radius: 14px; background: #fff; border: 2px solid var(--ink-strong); box-shadow: 3px 3px 0 var(--ink-strong); }
.xp-hi { background: #FFD54A; }
.xp-ans { background: #FF7A9A; color: #fff; animation: xpPop .45s cubic-bezier(.2,1.6,.4,1) both, xpWiggle 1.2s .6s ease-in-out 2; animation-delay: var(--d), calc(var(--d) + .6s); }
@keyframes xpWiggle { 0%,100% { transform: rotate(0); } 25% { transform: rotate(-4deg) scale(1.06); } 75% { transform: rotate(4deg) scale(1.06); } }
.xp-muted { opacity: .35; box-shadow: none; }
.xp-diff { font-weight: 700; color: #0F6B4B; background: #D8F5E8; border: 2px solid #3BB27F; border-radius: 999px; padding: 4px 12px; font-size: 16px; }
.xp-op { font-size: 26px; font-weight: 700; color: #5B6B8C; }
.xp-tag { font-weight: 700; background: #fff; border: 2px solid var(--ink-strong); border-radius: 12px; padding: 6px 12px; font-size: 16px; }
.xp-emoji { font-size: 38px; line-height: 1; }
.xp-bar { width: min(100%, 460px); height: 38px; background: #fff; border: 2px solid var(--ink-strong); border-radius: 12px; position: relative; overflow: hidden; }
.xp-bar span { position: absolute; inset: 0 auto 0 0; width: 0; animation: xpFill 1s .3s ease-out forwards; animation-delay: calc(var(--d) + .2s); }
.xp-bar b { position: relative; z-index: 1; display: block; line-height: 34px; padding-left: 12px; }
@keyframes xpFill { to { width: var(--w); } }
.xp-blocks { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.xp-blocks div { display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; max-width: 380px; }
.xp-blocks i { width: 26px; height: 26px; border-radius: 6px; border: 2px solid var(--ink-strong); animation: xpPop .35s cubic-bezier(.2,1.6,.4,1) both; animation-delay: calc(var(--d) + var(--k) * .07s); }
.xp-blocks small { font-weight: 700; }
.xp-bar.blue span, .xp-blocks.blue i { background: #8DB4FF; }
.xp-bar.green span, .xp-blocks.green i { background: #7FD8AE; }
.xp-bar.yellow span, .xp-blocks.yellow i { background: #FFD54A; }
.xp-bar.pink span, .xp-blocks.pink i { background: #FF9AAE; }
.xp-talk { display: flex; align-items: flex-end; gap: 10px; margin-top: 12px; }
.xp-bot { flex: 0 0 auto; transform-origin: bottom center; }
.xp-bot.hop { animation: xpHop .5s ease-out; }
@keyframes xpHop { 30% { transform: translateY(-10px) rotate(-6deg); } 60% { transform: translateY(0) rotate(4deg); } }
.xp-say { flex: 1; margin: 0; background: #fff; border: 2px solid var(--ink-strong); border-radius: 16px 16px 16px 4px; padding: 10px 14px; font-weight: 600; font-size: 16px; }
.xp-say.pop { animation: xpPop .35s ease-out both; }
.xp-ctrl { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.xp-btn { width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--ink-strong); background: #fff; font-weight: 700; cursor: pointer; font-size: 13px; }
.xp-play { background: #FFD54A; width: 48px; height: 48px; font-size: 16px; }
.xp-dots { display: flex; gap: 6px; margin-left: auto; }
.xp-dots span { width: 10px; height: 10px; border-radius: 50%; background: #fff; border: 2px solid var(--ink-strong); cursor: pointer; }
.xp-dots span.on { background: var(--ink-strong); }
@media (prefers-reduced-motion: reduce) { .xp *, .xp *::before { animation: none !important; } .xp-bar span { width: var(--w); } }

/* ---------- สรุปเนื้อหาแบบมีสีสัน ---------- */
.notes { border: 2px solid var(--ink-strong); box-shadow: 5px 5px 0 var(--ink-strong); border-radius: 20px; background: #fff; }
.notes .nb { border-radius: 14px; padding: 12px 14px 14px; margin-top: 12px; border-left: 6px solid; }
.notes .nb:nth-of-type(4n+1) { background: #EEF6F2; border-color: #5B8DEF; }
.notes .nb:nth-of-type(4n+2) { background: #FFF6D6; border-color: #F2B13A; }
.notes .nb:nth-of-type(4n+3) { background: #E8F8EF; border-color: #3BB27F; }
.notes .nb:nth-of-type(4n+4) { background: #FFEDF1; border-color: #FF7A9A; }
.notes .nb h3 { display: flex; gap: 8px; align-items: center; }
.notes .nb ul { list-style: none; padding-left: 0 !important; }
.notes .nb li { position: relative; padding-left: 26px; }
.notes .nb li::before { content: '✓'; position: absolute; left: 0; top: 0; width: 19px; height: 19px; border-radius: 50%; background: var(--ink-strong); color: #FFD54A; font-size: 12px; font-weight: 700; display: grid; place-items: center; }
.notes-head { display: flex; align-items: center; gap: 12px; }
.notes-head svg { flex: 0 0 auto; }

.admin-badge { position: absolute; top: -6px; right: -6px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: #E2574C; color: #fff; font-size: 12px; font-weight: 700; display: grid; place-items: center; }

/* ---------- กระดาษทดแบบเขียนด้วยปากกา ---------- */
.spad { --pa: #1F6F5C; position: fixed; z-index: 70; right: 12px; top: 84px; bottom: 12px; width: 400px; max-width: calc(100vw - 24px); display: flex; flex-direction: column; background: #fff; border: 1px solid #E4E7EC; border-radius: 20px; box-shadow: 0 24px 60px rgba(31,42,68,.18), 0 2px 6px rgba(31,42,68,.06); overflow: hidden; animation: spadIn .22s ease-out; }
@keyframes spadIn { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.spad.big { left: 12px; width: auto !important; top: 12px; height: auto !important; }
.spad-grip { position: absolute; left: 0; top: 0; bottom: 0; width: 14px; cursor: ew-resize; z-index: 2; touch-action: none; display: grid; place-items: center; }
.spad-grip span { width: 4px; height: 44px; border-radius: 4px; background: #CBD3E6; }
.spad-bar { display: flex; align-items: center; gap: 8px; padding: 10px 12px 10px 18px; background: linear-gradient(135deg, #F3F5FF, #EEF7F6); border-bottom: 1px solid #E3E8F4; }
.spad-title { flex: 1; font-size: 15px; color: #1F2A44; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.spad-page { font-weight: 600; color: var(--pa); }
.spad-tabs { display: flex; background: #E7EBF6; border-radius: 12px; padding: 3px; }
.spad-tabs button { border: 0; background: transparent; padding: 5px 10px; font-weight: 700; font-size: 13px; color: #55607A; border-radius: 9px; cursor: pointer; }
.spad-tabs button[aria-selected="true"] { background: #fff; color: #1F2A44; box-shadow: 0 1px 3px rgba(31,42,68,.15); }
.spad-ic { width: 34px; height: 34px; border-radius: 11px; border: 1px solid #E4E7EC; background: #fff; color: #55607A; font-weight: 700; cursor: pointer; }
.spad-tools { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 8px 12px 8px 18px; background: #FBFCFF; border-bottom: 1px solid #EEF1F8; }
.spad-t { min-width: 36px; height: 36px; border-radius: 11px; border: 1px solid #E1E6F2; background: #fff; cursor: pointer; font-size: 16px; color: #55607A; transition: background .15s, box-shadow .15s; }
.spad-t.on { background: #EEF6F2; border-color: var(--pa); box-shadow: inset 0 0 0 1px var(--pa); }
.spad-c { width: 26px; height: 26px; border-radius: 50%; border: 2px solid #fff; background: var(--c); box-shadow: 0 0 0 1px #E4E7EC; cursor: pointer; transition: transform .12s; }
.spad-c.on { transform: scale(1.12); box-shadow: 0 0 0 2px var(--c); }
.spad-sep { width: 1px; height: 22px; background: #E6EAF4; margin: 0 2px; }
.spad-size { display: flex; align-items: center; gap: 8px; padding: 0 8px; height: 36px; border: 1px solid #E1E6F2; border-radius: 11px; background: #fff; }
.spad-size input { width: 110px; accent-color: var(--pa); }
.spad-dot { display: inline-block; border-radius: 50%; border: 1px solid #C9D1E4; flex: 0 0 auto; }
.spad-num { font-size: 12px; color: #55607A; min-width: 22px; text-align: right; font-variant-numeric: tabular-nums; }
.spad-body { position: relative; flex: 1; min-height: 140px; background-color: #FFFFFF; }
.spad-body[data-paper="dots"] { background-image: radial-gradient(#C9D2E6 1.2px, transparent 1.3px); background-size: 22px 22px; }
.spad-body[data-paper="grid"] { background-image: linear-gradient(#EDF0F7 1px, transparent 1px), linear-gradient(90deg, #EDF0F7 1px, transparent 1px); background-size: 22px 22px; }
.spad-body[data-paper="lines"] { background-image: linear-gradient(transparent 27px, #E3E8F4 28px); background-size: 100% 28px; }
.spad-cv { position: absolute; inset: 0; touch-action: none; cursor: crosshair; }
.spad-text { position: absolute; inset: 0; width: 100%; border: 0; padding: 10px 14px 10px 18px; background: transparent; font: 17px/28px var(--font); color: #1F2A44; resize: none; outline: none; }
.spad-hint { padding: 6px 12px 6px 18px; color: #8390AA; background: #FBFCFF; border-top: 1px solid #EEF1F8; }
@media (min-width: 1200px) { body.spad-open main { padding-right: calc(var(--spad-w, 400px) + 24px); } }
@media (max-width: 900px) {
  .spad { top: auto; left: 8px; right: 8px; width: auto; max-width: none; height: 36vh; bottom: 8px; animation-name: spadUp; }
  .spad.big { top: 8px; }
  .spad-grip { left: 0; right: 0; top: 0; bottom: auto; width: auto; height: 16px; cursor: ns-resize; }
  .spad-grip span { width: 44px; height: 4px; }
  .spad-bar { padding-top: 16px; padding-left: 12px; }
  .spad-tools, .spad-hint { padding-left: 12px; }
  .spad-text { padding-left: 14px; }
  body.spad-open main { padding-bottom: calc(var(--spad-h, 36vh) + 24px); }
  @keyframes spadUp { from { transform: translateY(32px); opacity: 0; } to { transform: none; opacity: 1; } }
}

/* ---------- เขียนทับบนข้อสอบ ---------- */
.ink-host { position: relative; }
.ink-cv { position: absolute; left: 0; top: 0; width: 100%; pointer-events: none; z-index: 5; border-radius: inherit; }
.ink-cv.on { pointer-events: auto; touch-action: none; cursor: crosshair; }
body.ink-on .ink-host { outline: 2px dashed #9AA8F0; outline-offset: 4px; }
.ink-bar { position: fixed; z-index: 75; left: 50%; bottom: 16px; transform: translateX(-50%); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: center; max-width: calc(100vw - 24px); padding: 8px 10px; background: rgba(255,255,255,.96); backdrop-filter: blur(8px); border: 1px solid #E4E7EC; border-radius: 18px; box-shadow: 0 16px 40px rgba(31,42,68,.2); animation: inkUp .2s ease-out; }
.ink-t { min-width: 38px; height: 38px; border-radius: 12px; border: 1px solid #E1E6F2; background: #fff; font-size: 17px; cursor: pointer; }
.ink-t.on { background: #EEF6F2; border-color: #1F6F5C; box-shadow: inset 0 0 0 1px #1F6F5C; }
.ink-c { width: 26px; height: 26px; border-radius: 50%; border: 2px solid #fff; background: var(--c); box-shadow: 0 0 0 1px #E4E7EC; cursor: pointer; }
.ink-c.on { transform: scale(1.12); box-shadow: 0 0 0 2px var(--c); }
.ink-sep { width: 1px; height: 24px; background: #E6EAF4; }
.ink-size { display: flex; align-items: center; gap: 6px; height: 38px; padding: 0 8px; border: 1px solid #E1E6F2; border-radius: 12px; background: #fff; }
.ink-size input { width: 100px; accent-color: #1F6F5C; }
.ink-size b { font-size: 12px; color: #55607A; min-width: 22px; font-variant-numeric: tabular-nums; }
.ink-done { height: 38px; padding: 0 14px; border: 0; border-radius: 12px; background: #1F6F5C; color: #fff; font-weight: 700; cursor: pointer; }
body.ink-on main { padding-bottom: 110px; }
@keyframes inkUp { from { transform: translate(-50%, 24px); opacity: 0; } to { transform: translateX(-50%); opacity: 1; } }
.spad[hidden], .ink-bar[hidden] { display: none !important; }

/* ---------- ปุ่มเครื่องมือทำข้อสอบแบบเด่น ---------- */
.exam-tools .tool-big { position: relative; display: inline-flex; align-items: center; gap: 10px; padding: 9px 16px 9px 10px; border-radius: 14px; border: 1.5px solid transparent; text-align: left; box-shadow: 0 2px 8px rgba(31,42,68,.08); transition: transform .12s, box-shadow .12s; }
.exam-tools .tool-big:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(31,42,68,.12); }
.tool-big .ti { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; font-size: 19px; background: #fff; }
.tool-big .tx { display: flex; flex-direction: column; line-height: 1.2; }
.tool-big .tx b { font-size: 15px; }
.tool-big .tx small { font-size: 12px; font-weight: 500; opacity: .75; }
.tb-ink { background: #FFF1EE; color: #A3341F !important; border-color: #FFD3C8 !important; }
.tb-pad { background: #EEF6F2; color: #2A3EB1 !important; border-color: #D3DAFF !important; }
.tb-focus { background: #EAF7F2; color: #146B4D !important; border-color: #C5EBDC !important; }
.exam-tools .tool-big[aria-pressed="true"] { border-color: currentColor !important; box-shadow: 0 0 0 3px rgba(79,107,237,.15); }
.exam-tools .tool-big[aria-pressed="true"] .ti { background: currentColor; }
.exam-tools .tool-big[aria-pressed="true"] .ti { filter: none; color: #fff; }
.tool-big.is-new::after { content: 'ใหม่'; position: absolute; top: -8px; right: -6px; background: #E5484D; color: #fff; font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 999px; animation: newPulse 1.6s ease-in-out infinite; }
@keyframes newPulse { 50% { transform: scale(1.12); } }
.font-tools { display: inline-flex; gap: 6px; margin-left: auto; }
@media (max-width: 640px) { .exam-tools .tool-big { flex: 1 1 calc(50% - 8px); padding-right: 10px; } .tool-big .tx small { display: none; } .font-tools { margin-left: 0; } }
.focus-dock { display: none; position: fixed; z-index: 72; right: 16px; bottom: 16px; flex-direction: column; gap: 8px; }
body.focus-mode .focus-dock { display: flex; }
body.focus-mode.ink-on .focus-dock, body.focus-mode.spad-open .focus-dock { display: none; }
.focus-dock button { display: flex; align-items: center; gap: 8px; padding: 10px 16px 10px 10px; border-radius: 16px; border: 1px solid #E4E7EC; background: rgba(255,255,255,.97); box-shadow: 0 10px 28px rgba(31,42,68,.18); font: inherit; font-weight: 700; font-size: 14px; color: #1F2A44; cursor: pointer; }
.focus-dock button span { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; background: #EEF6F2; }
.focus-dock #fd-ink span { background: #FFF1EE; }
.focus-dock #fd-exit { font-weight: 600; color: #55607A; }
.ink-tip { flex-basis: 100%; text-align: center; font-size: 12.5px; color: #55607A; order: -1; }
body.ink-on, body.pen-drawing, .spad { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
body.ink-on .ink-host::before { content: 'โหมดเขียน · แตะตัวเลือกเพื่อตอบได้เลย'; position: absolute; top: -14px; left: 16px; z-index: 6; background: #1F6F5C; color: #fff; font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; }

/* ---------- ป้อบอัพสอนใช้งาน ---------- */
.coach { position: fixed; inset: 0; z-index: 120; background: rgba(23,32,51,.45); backdrop-filter: blur(3px); display: grid; place-items: center; padding: 16px; animation: coachFade .2s ease-out; }
@keyframes coachFade { from { opacity: 0; } }
.coach-card { width: min(440px, 100%); background: #fff; border-radius: 24px; overflow: hidden; box-shadow: 0 30px 80px rgba(23,32,51,.35); animation: coachPop .28s cubic-bezier(.2,.9,.3,1.2); }
@keyframes coachPop { from { transform: translateY(16px) scale(.96); opacity: 0; } }
.coach-stage { position: relative; height: 200px; background: linear-gradient(135deg, #EEF6F2, #EAF7F2); display: grid; place-items: center; overflow: hidden; }
.coach-body { padding: 18px 22px 20px; }
.coach-step { font-size: 12px; font-weight: 700; color: #1F6F5C; }
.coach-body h3 { margin: 4px 0 6px; font-size: 20px; color: #1F2A44; }
.coach-body p { margin: 0; color: #55607A; line-height: 1.6; font-size: 15px; }
.coach-dots { display: flex; gap: 6px; justify-content: center; margin: 14px 0 12px; }
.coach-dots i { width: 7px; height: 7px; border-radius: 99px; background: #D5DBEA; transition: width .2s; }
.coach-dots i.on { width: 22px; background: #1F6F5C; }
.coach-btns { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.coach-btns > div { display: flex; gap: 8px; }
.coach-btns button { font: inherit; font-weight: 700; border-radius: 12px; padding: 10px 16px; cursor: pointer; border: 1px solid #E4E7EC; background: #fff; color: #55607A; }
.coach-btns .coach-next { background: #1F6F5C; border-color: #1F6F5C; color: #fff; }
.coach-btns .coach-skip { border: 0; background: none; padding-left: 0; }
/* ฉากจำลอง */
.cs-card { width: 230px; padding: 14px; background: #fff; border-radius: 14px; box-shadow: 0 8px 24px rgba(31,42,68,.12); display: flex; flex-direction: column; gap: 7px; position: relative; }
.cs-l { display: block; height: 8px; border-radius: 4px; background: #CBD3E6; }
.cs-l.w80 { width: 80%; } .cs-l.w60 { width: 60%; }
.cs-ch { height: 24px; border: 1.5px solid #E4E7EC; border-radius: 8px; font-size: 12px; font-weight: 700; color: #8390AA; padding-left: 8px; display: flex; align-items: center; }
.cs-draw { position: absolute; left: 14px; top: 8px; width: 200px; height: 60px; fill: none; stroke: #E5484D; stroke-width: 3; stroke-linecap: round; }
.cs-draw path, .cs-draw ellipse { stroke-dasharray: 260; stroke-dashoffset: 260; animation: csDraw 3.2s ease-in-out infinite; }
.cs-draw ellipse { animation-delay: .9s; }
@keyframes csDraw { 0% { stroke-dashoffset: 260; } 45%, 85% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 0; opacity: 0; } }
.cs-pen { position: absolute; font-size: 26px; left: calc(50% - 100px); top: 54px; animation: csPen 3.2s ease-in-out infinite; }
@keyframes csPen { 0% { transform: translate(0,0); } 30% { transform: translate(130px,-4px); } 45% { transform: translate(40px,40px); } 70% { transform: translate(60px,48px); } 100% { transform: translate(0,0); } }
.cs-pick { animation: csPick 2.4s ease-in-out infinite; }
@keyframes csPick { 0%, 40% { background: #fff; border-color: #E4E7EC; color: #8390AA; } 50%, 90% { background: #EAF0FF; border-color: #2F6FED; color: #2F6FED; } 100% { background: #fff; } }
.cs-tap { position: absolute; width: 26px; height: 26px; border-radius: 50%; background: rgba(79,107,237,.35); border: 2px solid #1F6F5C; left: calc(50% + 10px); top: 104px; animation: csTap 2.4s ease-in-out infinite; }
@keyframes csTap { 0% { transform: translate(40px,40px) scale(1); opacity: 0; } 25% { opacity: 1; transform: translate(0,0) scale(1); } 40% { transform: scale(.7); } 50% { transform: scale(1.5); opacity: 0; } 100% { opacity: 0; } }
.cs-scroll { animation: csScroll 2.6s ease-in-out infinite; }
@keyframes csScroll { 0%, 20% { transform: translateY(20px); } 70%, 100% { transform: translateY(-30px); } }
.cs-two { position: absolute; left: calc(50% + 70px); top: 120px; display: flex; gap: 10px; animation: csTwo 2.6s ease-in-out infinite; }
.cs-two b { width: 24px; height: 24px; border-radius: 50%; background: rgba(229,72,77,.3); border: 2px solid #E5484D; }
@keyframes csTwo { 0%, 20% { transform: translateY(20px); opacity: .9; } 70% { transform: translateY(-40px); opacity: .9; } 100% { transform: translateY(-40px); opacity: 0; } }
.cs-bar { display: flex; align-items: center; gap: 6px; background: #fff; padding: 8px; border-radius: 14px; box-shadow: 0 8px 24px rgba(31,42,68,.14); }
.cs-bar span { width: 30px; height: 30px; border: 1px solid #E1E6F2; border-radius: 9px; display: grid; place-items: center; font-size: 15px; }
.cs-bar i { width: 18px; height: 18px; border-radius: 50%; background: var(--c); }
.cs-bar em { font-style: normal; font-size: 12px; font-weight: 700; color: #fff; background: #1F6F5C; border-radius: 9px; padding: 8px 10px; }
.cs-tap2 { left: calc(50% + 92px); top: 92px; }
.cs-page { width: 250px; height: 170px; background: #fff; border-radius: 14px; box-shadow: 0 8px 24px rgba(31,42,68,.12); position: relative; overflow: hidden; }
.cs-q { padding: 14px; display: flex; flex-direction: column; gap: 7px; }
.cs-pad { position: absolute; left: 6px; right: 6px; bottom: 6px; background: #FBFCFF; border: 1px solid #E4E7EC; border-radius: 12px; background-image: radial-gradient(#C9D2E6 1px, transparent 1.2px); background-size: 12px 12px; }
.cs-grow { animation: csGrow 2.8s ease-in-out infinite; }
@keyframes csGrow { 0%, 15% { height: 60px; } 55%, 85% { height: 120px; } 100% { height: 60px; } }
.cs-grip { position: absolute; top: 4px; left: 50%; width: 34px; height: 4px; margin-left: -17px; border-radius: 4px; background: #1F6F5C; box-shadow: 0 0 0 6px rgba(79,107,237,.18); }
.cs-pad svg { position: absolute; left: 10px; bottom: 6px; width: 200px; height: 40px; fill: none; stroke: #1F2A44; stroke-width: 2.5; stroke-linecap: round; }
.cs-slider { position: absolute; top: 42px; display: flex; align-items: center; gap: 10px; background: #fff; padding: 8px 12px; border-radius: 12px; box-shadow: 0 6px 18px rgba(31,42,68,.12); }
.cs-dot { width: 8px; height: 8px; border-radius: 50%; background: #1F2A44; animation: csDot 2.6s ease-in-out infinite; }
@keyframes csDot { 50% { width: 20px; height: 20px; } }
.cs-track { width: 130px; height: 6px; border-radius: 6px; background: #E4E7EC; position: relative; }
.cs-track b { position: absolute; top: -6px; width: 18px; height: 18px; border-radius: 50%; background: #1F6F5C; animation: csKnob 2.6s ease-in-out infinite; }
@keyframes csKnob { 0% { left: 4px; } 50% { left: 108px; } 100% { left: 4px; } }
.cs-thick { position: absolute; bottom: 36px; width: 200px; height: 40px; fill: none; stroke: #1F2A44; stroke-linecap: round; animation: csThick 2.6s ease-in-out infinite; }
@keyframes csThick { 0% { stroke-width: 2; } 50% { stroke-width: 9; } 100% { stroke-width: 2; } }
.cs-flip { position: relative; width: 170px; height: 130px; perspective: 600px; }
.cs-sheet { position: absolute; inset: 0; background: #fff; border-radius: 12px; box-shadow: 0 8px 24px rgba(31,42,68,.12); padding: 10px 12px; font-weight: 700; color: #1F6F5C; font-size: 14px; backface-visibility: hidden; }
.cs-sheet svg { display: block; width: 120px; height: 40px; margin-top: 18px; fill: none; stroke: #1F2A44; stroke-width: 2.5; stroke-linecap: round; }
.cs-sheet.a { animation: csFlipA 3.4s ease-in-out infinite; }
.cs-sheet.b { animation: csFlipB 3.4s ease-in-out infinite; }
@keyframes csFlipA { 0%, 30% { transform: rotateY(0); } 45%, 80% { transform: rotateY(-180deg); } 95%, 100% { transform: rotateY(0); } }
@keyframes csFlipB { 0%, 30% { transform: rotateY(180deg); } 45%, 80% { transform: rotateY(0); } 95%, 100% { transform: rotateY(180deg); } }
@media (prefers-reduced-motion: reduce) { .coach-stage * { animation: none !important; } .cs-draw path, .cs-draw ellipse { stroke-dashoffset: 0; } }

/* ระหว่างลากเส้น ไม่ให้นิ้ว/ฝ่ามือที่แตะเพิ่มทำให้จอเลื่อนหรือยกเลิกเส้นปากกา */
html:has(body.pen-drawing), body.pen-drawing, body.pen-drawing * { touch-action: none !important; }
body.ink-on .ink-cv.on, .spad-cv { touch-action: none; -webkit-user-select: none; user-select: none; }

/* ---------- รูปโปรไฟล์ + มงกุฎ ---------- */
.avatar { position: relative; }
.avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.avatar.crown::after { content: ''; position: absolute; top: -.62em; right: -.3em; width: max(15px, .9em); height: max(15px, .9em); background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20stroke%3D%22%232B3550%22%20stroke-width%3D%221.5%22%20stroke-linejoin%3D%22round%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M3%2018L2%207l5%204%205-7%205%207%205-4-1%2011z%22%20fill%3D%22%23FFD43B%22%2F%3E%3Cpath%20d%3D%22M3.5%2021h17%22%20fill%3D%22none%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2213%22%20r%3D%221.4%22%20fill%3D%22%23FF6B6B%22%2F%3E%3Ccircle%20cx%3D%227%22%20cy%3D%2214%22%20r%3D%221%22%20fill%3D%22%234D96FF%22%2F%3E%3Ccircle%20cx%3D%2217%22%20cy%3D%2214%22%20r%3D%221%22%20fill%3D%22%2351CF66%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; transform: rotate(16deg); filter: drop-shadow(0 1px 1px rgba(0,0,0,.2)); }
.avatar.crown.c2::after { filter: grayscale(1) brightness(1.25) drop-shadow(0 1px 1px rgba(0,0,0,.25)); }
.avatar.crown.c3::after { filter: sepia(1) saturate(2.2) hue-rotate(-18deg) brightness(.85) drop-shadow(0 1px 1px rgba(0,0,0,.25)); }
.avatar.lg.crown::after { font-size: 34px; top: -18px; right: 0; }
.team-ic { background: #EEF6F2 !important; color: #2A3EB1; }
/* ---------- สนามแข่ง ---------- */
.arena-tabs { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 8px; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
.arena-tabs button { flex: 0 0 auto; border: 1.5px solid var(--line); background: #fff; border-radius: 999px; padding: 9px 14px; font: inherit; font-weight: 700; font-size: 14px; color: var(--ink); cursor: pointer; white-space: nowrap; }
.arena-tabs button[aria-selected="true"] { background: var(--navy, #14213D); border-color: var(--navy, #14213D); color: #fff; box-shadow: 0 6px 16px rgba(18,53,122,.25); }
#sub-ctrl .sep { width: 1px; height: 24px; background: var(--line); }
.arena-intro { background: #F3F6FF; border: 1px solid #DCE4FB; border-radius: 14px; padding: 10px 14px; font-size: 14px; color: #3B4A6B; }
.lb-row.z-up { background: #F0FAF5; } .lb-row.z-down { background: #FFF4F2; }
.lb-row.is-me { box-shadow: inset 4px 0 0 var(--yellow, #FFD54A); background: #FFFBEA; }
.lg-line { padding: 6px 16px; font-size: 12.5px; font-weight: 700; border-top: 2px dashed; }
.lg-line.up { color: #1F9D6B; border-color: #9AD9BD; background: #F0FAF5; }
.lg-line.down { color: #D64545; border-color: #F3B4AE; background: #FFF4F2; }
.lg-tiers { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.lg-tier { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; font-size: 13px; font-weight: 700; color: #55607A; background: #F5F7FB; }
.lg-tier i { width: 14px; height: 14px; border-radius: 50%; background: var(--bg); border: 2px solid var(--bd); }
.lg-tier.on { background: var(--bg); color: #1F2A44; box-shadow: 0 0 0 2px var(--bd); }
.lg-arrow { color: #AAB3C6; }
.kings { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.king { display: flex; flex-direction: column; gap: 8px; text-align: left; cursor: pointer; font: inherit; border: 1.5px solid var(--line); transition: transform .12s, box-shadow .12s; }
.king:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(31,42,68,.1); }
.king-title { font-size: 17px; color: #B07A00; }
.hall { display: flex; flex-direction: column; gap: 10px; }
.hall-m { font-size: 16px; color: var(--navy); }
.hall-top { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.rank-card img { width: 100%; display: block; max-height: 52vh; object-fit: contain; background: #14213D; }

.av-wrap { position: relative; display: inline-block; flex-shrink: 0; }
.av-cam { position: absolute; right: 2px; bottom: 6px; width: 36px; height: 36px; border-radius: 50%; border: 2px solid #fff; background: #1F2A44; color: #fff; font-size: 16px; cursor: pointer; box-shadow: 0 4px 10px rgba(0,0,0,.2); }
.av-edit { display: flex; gap: 14px; align-items: center; padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: #FBFCFF; }
[hidden] { display: none !important; }
.rank-card { max-height: calc(100vh - 32px); overflow: auto !important; }

/* ---------- ติดต่อเรา ---------- */
.contact-topics { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.contact-topics button { display: grid; grid-template-columns: 34px 1fr; column-gap: 10px; align-items: start; text-align: left; padding: 12px; border: 1.5px solid var(--line); border-radius: 14px; background: #fff; font: inherit; cursor: pointer; transition: border-color .12s, box-shadow .12s; }
.contact-topics button span { grid-row: span 2; font-size: 24px; line-height: 1.2; }
.contact-topics button b { font-size: 14.5px; color: var(--ink-strong, #172033); }
.contact-topics button small { font-size: 12.5px; color: var(--muted); line-height: 1.45; }
.contact-topics button[aria-checked="true"] { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(30,102,224,.15); background: #F5F8FF; }
.hp-trap { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
details summary { cursor: pointer; padding: 6px 0; }

/* ---------- หน้าแรก: ปุ่มหลักใต้ช่องค้นหา + ปรับมือถือ ---------- */
.hero-cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 22px; }
.hero-cta .btn-white { border: 1.5px solid var(--line); }
.hero-proof { margin: 12px 0 0; font-size: 15px; color: var(--muted); }
.feat-link { text-decoration: none; color: inherit; transition: transform .15s, box-shadow .15s; }
.feat-link:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(31,42,68,.08); }
@media (max-width: 600px) {
  .hero-in { padding: 36px 16px 32px; }
  .hero-cta .btn { flex: 1 1 100%; }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .tile { min-height: 104px; padding: 14px; }
  .tile .ttl { font-size: 16px; }
  .tile .sub { font-size: 12px; }
  .plan { padding: 22px 18px; }
  .plan .art { display: none; }
}

/* ---------- แถบบนสุดตามช่วงรอบสอบ ---------- */
.promo-links { display: inline-flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.promo #promo-link2 { background: transparent; color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.7); }
.promo[data-phase="final"], .promo[data-phase="exam"] { background: #9A3412; }
.promo[data-phase="wait"] { background: #14213D; }
.promo[data-phase="next"] { background: #14532D; }
.promo[data-phase] #promo-text { font-weight: 600; }

/* ปุ่มท้ายการ์ดชุดข้อสอบ */
.set-cta { margin-top: auto; padding-top: 10px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cta-badge { font-size: 13px; font-weight: 700; color: var(--accent); }
.cta-badge.free { color: var(--green-ink); }
.cta-badge.lock { color: #6B7488; }
.cta-btn { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 999px; background: var(--accent); color: #fff; font-weight: 700; font-size: 15px; white-space: nowrap; transition: transform .15s, box-shadow .15s; }
.cta-btn.ghost { background: #fff; color: var(--accent); box-shadow: inset 0 0 0 1.5px currentColor; }
.set-card:hover .cta-btn, .set-card:focus-visible .cta-btn { transform: translateX(2px); box-shadow: 0 6px 16px rgba(30,102,224,.28); }
.drill-tile .tile-go { margin-top: 6px; align-self: flex-start; font-size: 13px; font-weight: 700; color: #fff; background: var(--accent); border-radius: 999px; padding: 4px 12px; }
.drill-tile.locked .tile-go { background: #EEF1F6; color: #55607A; }

/* หน้าปกการ์ดชุดข้อสอบแบบมีธีมวิชา: ลายไอคอนจาง ๆ + สติกเกอร์การ์ตูนประจำวิชา */
.set-cover.themed { position: relative; overflow: hidden; height: 124px; background-size: 56px 56px, cover; background-repeat: repeat, no-repeat; padding-right: 112px; }
.set-cover.themed::after { content: ""; position: absolute; right: -30px; top: -40px; width: 170px; height: 170px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.28), rgba(255,255,255,0) 70%); pointer-events: none; }
.set-cover.themed .sec, .set-cover.themed .subj { position: relative; z-index: 1; text-shadow: 0 1px 2px rgba(0,0,0,.18); }
.set-cover.themed .subj { font-size: 21px; }
.cover-sticker { position: absolute; right: 10px; bottom: 6px; z-index: 1; width: 100px; height: 100px; display: grid; place-items: center; transform: rotate(-6deg); transition: transform .25s cubic-bezier(.3,1.6,.5,1); filter: drop-shadow(0 4px 8px rgba(0,0,0,.18)); }
.cover-sticker::before { content: ""; position: absolute; inset: 4px; border-radius: 28px; background: rgba(255,255,255,.92); transform: rotate(4deg); }
.cover-sticker svg { position: relative; width: 82px; height: 82px; }
.set-card:hover .cover-sticker { transform: rotate(3deg) scale(1.08) translateY(-3px); }
.cover-chip { position: relative; z-index: 1; align-self: flex-start; width: 30px; height: 30px; border-radius: 9px; background: rgba(255,255,255,.2); border: 1px solid rgba(255,255,255,.35); display: grid; place-items: center; margin-bottom: auto; }
@media (prefers-reduced-motion: reduce) { .cover-sticker, .set-card:hover .cover-sticker { transition: none; transform: rotate(-6deg); } }

.set-cover.themed .subj { font-size: 19px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.topic-sticker { flex: 0 0 64px; width: 64px; height: 64px; border-radius: 18px; display: grid; place-items: center; box-shadow: 0 6px 14px rgba(23,32,51,.15); transform: rotate(-4deg); }
.topic-sticker svg { width: 50px; height: 50px; background: rgba(255,255,255,.92); border-radius: 14px; padding: 4px; box-sizing: content-box; }

/* ===== ภาพการ์ตูน: หน้าแรก (จุดเด่น) ===== */
.feature .ic.art { width: 84px; height: 84px; border-radius: 26px; background: linear-gradient(135deg, #EAF2FF, #F3EEFF); transform: rotate(-5deg); box-shadow: 0 8px 18px rgba(30,102,224,.12), inset 0 0 0 2px #fff; transition: transform .3s cubic-bezier(.3,1.6,.5,1); position: relative; }
.feature .ic.art::after { content: "✦"; position: absolute; right: -6px; top: -8px; font-size: 16px; color: #FFC93C; }
.feature .ic.art svg { width: 64px; height: 64px; }
.grid-auto > .feature:nth-child(2) .ic.art { background: linear-gradient(135deg, #E6FCF5, #EBFBEE); transform: rotate(4deg); }
.grid-auto > .feature:nth-child(3) .ic.art { background: linear-gradient(135deg, #FFF4E6, #FFF0F6); transform: rotate(-3deg); }
.feature:hover .ic.art { transform: rotate(6deg) scale(1.08); }
.feature { position: relative; }
.feat-link.feature { border-radius: 20px; padding: 18px; margin: -18px; }
/* ===== ภาพการ์ตูน: สนามฝึก ===== */
.play-card { position: relative; overflow: hidden; padding-right: 128px; isolation: isolate; }
.play-card::before { content: ""; position: absolute; right: -40px; top: -40px; width: 190px; height: 190px; border-radius: 50%; background: var(--blob, #EEF6F2); z-index: -1; transition: transform .35s; }
.play-card::after { content: ""; position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(circle, rgba(255,255,255,.0) 0, rgba(255,255,255,0) 1px), radial-gradient(circle, var(--dot, rgba(30,102,224,.10)) 1.4px, transparent 1.6px); background-size: 18px 18px, 18px 18px; -webkit-mask-image: linear-gradient(110deg, transparent 45%, #000 85%); mask-image: linear-gradient(110deg, transparent 45%, #000 85%); }
.play-art { position: absolute; right: 18px; top: 22px; width: 96px; height: 96px; transform: rotate(-6deg); filter: drop-shadow(0 6px 10px rgba(0,0,0,.15)); transition: transform .3s cubic-bezier(.3,1.6,.5,1); }
.play-art svg { width: 96px; height: 96px; }
.play-card:hover .play-art { transform: rotate(4deg) scale(1.1) translateY(-4px); }
.play-card:hover::before { transform: scale(1.12); }
.play-card.quest { --blob: #FFF3BF; --dot: rgba(245,159,0,.18); }
.play-card.cards { --blob: #F0EAFF; --dot: rgba(112,72,232,.16); }
.play-card.daily { --blob: #E3F6EE; --dot: rgba(18,128,92,.16); }
.play-card.duel { --blob: #E6FCE9; --dot: rgba(6,199,85,.16); }
.play-card.live { --blob: rgba(151,117,250,.28); --dot: rgba(255,255,255,.12); background: linear-gradient(135deg, #1C1530, #2D1B4E); }
.play-card.speed { --blob: rgba(255,212,59,.18); --dot: rgba(255,255,255,.10); background: linear-gradient(135deg, #172033, #1E2F55); }
@media (max-width: 560px) { .play-card { padding-right: 22px; padding-top: 110px; } .play-art { left: 20px; right: auto; top: 14px; width: 84px; height: 84px; } .play-art svg { width: 84px; height: 84px; } }
/* ===== โพเดียมอันดับ ===== */
.podium { position: relative; isolation: isolate; padding-top: 18px; }
.podium::before { content: ""; position: absolute; inset: -28px -20px 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(circle at 12% 18%, #FF6B6B 0 4px, transparent 5px), radial-gradient(circle at 22% 42%, #FFD43B 0 3px, transparent 4px),
    radial-gradient(circle at 84% 22%, #4D96FF 0 4px, transparent 5px), radial-gradient(circle at 92% 48%, #51CF66 0 3px, transparent 4px),
    radial-gradient(circle at 70% 10%, #F783AC 0 3px, transparent 4px), radial-gradient(circle at 32% 8%, #9775FA 0 3px, transparent 4px),
    radial-gradient(ellipse at 50% 0%, rgba(255,212,59,.35), transparent 60%); }
.podium .pod-av { position: relative; display: inline-block; }
.podium .pod-medal { position: absolute; right: -14px; bottom: -10px; filter: drop-shadow(0 3px 4px rgba(0,0,0,.18)); transform: rotate(10deg); }
.podium .pod-crown { animation: crownBob 2.4s ease-in-out infinite; filter: drop-shadow(0 3px 4px rgba(0,0,0,.15)); }
@keyframes crownBob { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-4px) rotate(4deg); } }
.podium .ped { position: relative; overflow: hidden; color: var(--pc); background: linear-gradient(180deg, var(--pb), #fff); box-shadow: inset 0 3px 0 rgba(255,255,255,.8), 0 -2px 0 var(--pc) inset; }
.podium .ped::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(135deg, rgba(255,255,255,.35) 0 10px, transparent 10px 20px); }
.podium .ped span { position: relative; width: 52px; height: 52px; border-radius: 50%; background: #fff; display: grid; place-items: center; box-shadow: 0 4px 10px rgba(0,0,0,.08); font-size: 28px; }
.podium .p1 .ped span { width: 60px; height: 60px; font-size: 32px; }
@media (prefers-reduced-motion: reduce) { .podium .pod-crown { animation: none; } .play-art, .feature .ic.art { transition: none; } }
.play-card { padding-right: 22px; }
.play-card .pill, .play-card h2 { margin-right: 86px; }
.play-art { width: 84px; height: 84px; right: 14px; top: 16px; }
.play-art svg { width: 84px; height: 84px; }
@media (max-width: 560px) { .play-card { padding-top: 22px; } .play-art { left: auto; right: 14px; top: 16px; } }

/* ===== ไอคอนการ์ตูนลายเส้นของเว็บ (ใช้แทนอีโมจิ) ===== */
.ci { display: inline-block; width: 1.25em; height: 1.25em; vertical-align: -.28em; background: center / contain no-repeat; flex: none; }
.ci-lock { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20stroke%3D%22%232B3550%22%20stroke-width%3D%221.5%22%20stroke-linejoin%3D%22round%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M8%2010V7a4%204%200%200%201%208%200v3%22%20fill%3D%22none%22%2F%3E%3Crect%20x%3D%224.5%22%20y%3D%2210%22%20width%3D%2215%22%20height%3D%2211%22%20rx%3D%223%22%20fill%3D%22%23FFD43B%22%2F%3E%3Ccircle%20cx%3D%2210.4%22%20cy%3D%2214.8%22%20r%3D%220.75%22%20fill%3D%22%232B3550%22%2F%3E%3Ccircle%20cx%3D%2213.6%22%20cy%3D%2214.8%22%20r%3D%220.75%22%20fill%3D%22%232B3550%22%2F%3E%3Cpath%20d%3D%22M11.1%2016.1q0.9%200.9%201.8%200%22%20fill%3D%22none%22%20stroke%3D%22%232B3550%22%20stroke-width%3D%220.8%22%2F%3E%3Ccircle%20cx%3D%229.4%22%20cy%3D%2216.2%22%20r%3D%220.7%22%20fill%3D%22%23FF8FA3%22%20stroke%3D%22none%22%2F%3E%3Ccircle%20cx%3D%2214.6%22%20cy%3D%2216.2%22%20r%3D%220.7%22%20fill%3D%22%23FF8FA3%22%20stroke%3D%22none%22%2F%3E%3C%2Fsvg%3E"); }
.ci-pencil { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20stroke%3D%22%232B3550%22%20stroke-width%3D%221.5%22%20stroke-linejoin%3D%22round%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M4%2020l1.2-4.6L15.5%205a2%202%200%200%201%202.8%200l.7.7a2%202%200%200%201%200%202.8L8.6%2018.8z%22%20fill%3D%22%23FFD43B%22%2F%3E%3Cpath%20d%3D%22M14%206.5l3.5%203.5%22%20fill%3D%22none%22%2F%3E%3Cpath%20d%3D%22M4%2020l1.2-4.6%203.4%203.4z%22%20fill%3D%22%23F5D6A8%22%2F%3E%3Cpath%20d%3D%22M15.5%205l1-1a2%202%200%200%201%202.8%200l.7.7a2%202%200%200%201%200%202.8l-1%201z%22%20fill%3D%22%23FF8FA3%22%2F%3E%3C%2Fsvg%3E"); }
.ci-highlighter { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20stroke%3D%22%232B3550%22%20stroke-width%3D%221.5%22%20stroke-linejoin%3D%22round%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M5%2021h7%22%20fill%3D%22none%22%20stroke%3D%22%23FFD43B%22%20stroke-width%3D%223%22%2F%3E%3Cpath%20d%3D%22M8%2017l-1.5%202.5%203%200L10%2018z%22%20fill%3D%22%23F59F00%22%2F%3E%3Cpath%20d%3D%22M8%2017l9-9%203%203-9%209z%22%20fill%3D%22%23FF922B%22%2F%3E%3Cpath%20d%3D%22M15%206l2-2%204%204-2%202z%22%20fill%3D%22%23FFC078%22%2F%3E%3C%2Fsvg%3E"); }
.ci-eraser { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20stroke%3D%22%232B3550%22%20stroke-width%3D%221.5%22%20stroke-linejoin%3D%22round%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M3.5%2015.5l9-9a2%202%200%200%201%202.8%200l4.2%204.2a2%202%200%200%201%200%202.8L13%2020H8z%22%20fill%3D%22%23FFA8C5%22%2F%3E%3Cpath%20d%3D%22M8%2011l6%206%22%20fill%3D%22none%22%2F%3E%3Cpath%20d%3D%22M3.5%2015.5L8%2020h5l-1.5-1.5%22%20fill%3D%22%23E7F5FF%22%2F%3E%3Cpath%20d%3D%22M14%2020h7%22%20fill%3D%22none%22%2F%3E%3C%2Fsvg%3E"); }
.ci-trash { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20stroke%3D%22%232B3550%22%20stroke-width%3D%221.5%22%20stroke-linejoin%3D%22round%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M4%207h16M9%207V4.5h6V7%22%20fill%3D%22none%22%2F%3E%3Cpath%20d%3D%22M6%207l1%2013h10l1-13z%22%20fill%3D%22%23A5D8FF%22%2F%3E%3Ccircle%20cx%3D%2210.4%22%20cy%3D%2213%22%20r%3D%220.75%22%20fill%3D%22%232B3550%22%2F%3E%3Ccircle%20cx%3D%2213.6%22%20cy%3D%2213%22%20r%3D%220.75%22%20fill%3D%22%232B3550%22%2F%3E%3Cpath%20d%3D%22M11.1%2014.3q0.9%200.9%201.8%200%22%20fill%3D%22none%22%20stroke%3D%22%232B3550%22%20stroke-width%3D%220.8%22%2F%3E%3Ccircle%20cx%3D%229.4%22%20cy%3D%2214.4%22%20r%3D%220.7%22%20fill%3D%22%23FF8FA3%22%20stroke%3D%22none%22%2F%3E%3Ccircle%20cx%3D%2214.6%22%20cy%3D%2214.4%22%20r%3D%220.7%22%20fill%3D%22%23FF8FA3%22%20stroke%3D%22none%22%2F%3E%3C%2Fsvg%3E"); }
.ci-camera { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20stroke%3D%22%232B3550%22%20stroke-width%3D%221.5%22%20stroke-linejoin%3D%22round%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M4%208h3l2-3h6l2%203h3v11H4z%22%20fill%3D%22%23B197FC%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2213%22%20r%3D%223.8%22%20fill%3D%22%23fff%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2213%22%20r%3D%221.6%22%20fill%3D%22%232B3550%22%20stroke%3D%22none%22%2F%3E%3Ccircle%20cx%3D%2217.5%22%20cy%3D%2210%22%20r%3D%22.9%22%20fill%3D%22%23FFD43B%22%20stroke%3D%22none%22%2F%3E%3C%2Fsvg%3E"); }
.ci-crown { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20stroke%3D%22%232B3550%22%20stroke-width%3D%221.5%22%20stroke-linejoin%3D%22round%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M3%2018L2%207l5%204%205-7%205%207%205-4-1%2011z%22%20fill%3D%22%23FFD43B%22%2F%3E%3Cpath%20d%3D%22M3.5%2021h17%22%20fill%3D%22none%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2213%22%20r%3D%221.4%22%20fill%3D%22%23FF6B6B%22%2F%3E%3Ccircle%20cx%3D%227%22%20cy%3D%2214%22%20r%3D%221%22%20fill%3D%22%234D96FF%22%2F%3E%3Ccircle%20cx%3D%2217%22%20cy%3D%2214%22%20r%3D%221%22%20fill%3D%22%2351CF66%22%2F%3E%3C%2Fsvg%3E"); }
.ci-cap { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20stroke%3D%22%232B3550%22%20stroke-width%3D%221.5%22%20stroke-linejoin%3D%22round%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M1.5%209L12%204l10.5%205L12%2014z%22%20fill%3D%22%234D96FF%22%2F%3E%3Cpath%20d%3D%22M6%2011v5c3%202.5%209%202.5%2012%200v-5l-6%203z%22%20fill%3D%22%2374C0FC%22%2F%3E%3Cpath%20d%3D%22M20%2010v6%22%20fill%3D%22none%22%2F%3E%3Ccircle%20cx%3D%2220%22%20cy%3D%2217%22%20r%3D%221.3%22%20fill%3D%22%23FFD43B%22%2F%3E%3C%2Fsvg%3E"); }
.ci-pin { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20stroke%3D%22%232B3550%22%20stroke-width%3D%221.5%22%20stroke-linejoin%3D%22round%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M12%2022s-7-6.5-7-12a7%207%200%200%201%2014%200c0%205.5-7%2012-7%2012z%22%20fill%3D%22%23FF6B6B%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2210%22%20r%3D%223.6%22%20fill%3D%22%23fff%22%2F%3E%3Ccircle%20cx%3D%2210.8%22%20cy%3D%229.8%22%20r%3D%220.5625%22%20fill%3D%22%232B3550%22%2F%3E%3Ccircle%20cx%3D%2213.2%22%20cy%3D%229.8%22%20r%3D%220.5625%22%20fill%3D%22%232B3550%22%2F%3E%3Cpath%20d%3D%22M11.325%2010.775q0.675%200.675%201.35%200%22%20fill%3D%22none%22%20stroke%3D%22%232B3550%22%20stroke-width%3D%220.6000000000000001%22%2F%3E%3Ccircle%20cx%3D%2210.05%22%20cy%3D%2210.850000000000001%22%20r%3D%220.5249999999999999%22%20fill%3D%22%23FF8FA3%22%20stroke%3D%22none%22%2F%3E%3Ccircle%20cx%3D%2213.95%22%20cy%3D%2210.850000000000001%22%20r%3D%220.5249999999999999%22%20fill%3D%22%23FF8FA3%22%20stroke%3D%22none%22%2F%3E%3C%2Fsvg%3E"); }
.ci-memo { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20stroke%3D%22%232B3550%22%20stroke-width%3D%221.5%22%20stroke-linejoin%3D%22round%22%20stroke-linecap%3D%22round%22%3E%3Crect%20x%3D%224%22%20y%3D%223%22%20width%3D%2213%22%20height%3D%2218%22%20rx%3D%222%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M7%208h7M7%2011.5h7M7%2015h4%22%20fill%3D%22none%22%20stroke%3D%22%23ADB5BD%22%2F%3E%3Cpath%20d%3D%22M14%2019l1-3.5%205.5-5.5%202.4%202.4L17.5%2018z%22%20fill%3D%22%23FFD43B%22%2F%3E%3C%2Fsvg%3E"); }
.ci-target { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20stroke%3D%22%232B3550%22%20stroke-width%3D%221.5%22%20stroke-linejoin%3D%22round%22%20stroke-linecap%3D%22round%22%3E%3Ccircle%20cx%3D%2211%22%20cy%3D%2213%22%20r%3D%228.5%22%20fill%3D%22%23FF6B6B%22%2F%3E%3Ccircle%20cx%3D%2211%22%20cy%3D%2213%22%20r%3D%225.5%22%20fill%3D%22%23fff%22%2F%3E%3Ccircle%20cx%3D%2211%22%20cy%3D%2213%22%20r%3D%222.4%22%20fill%3D%22%23FF6B6B%22%2F%3E%3Cpath%20d%3D%22M11%2013L21%203%22%20fill%3D%22none%22%2F%3E%3Cpath%20d%3D%22M18%202.5h3.5V6z%22%20fill%3D%22%23FFD43B%22%2F%3E%3C%2Fsvg%3E"); }
.ci-pen { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20stroke%3D%22%232B3550%22%20stroke-width%3D%221.5%22%20stroke-linejoin%3D%22round%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M3%2021c3-1%205-3%207-3s2%202%204%202%203-1%204-2%22%20fill%3D%22none%22%20stroke%3D%22%234D96FF%22%2F%3E%3Cpath%20d%3D%22M7%2015L17%205l2.5%202.5-10%2010L6%2018z%22%20fill%3D%22%239775FA%22%2F%3E%3Cpath%20d%3D%22M15.5%206.5l2.5%202.5%22%20fill%3D%22none%22%2F%3E%3C%2Fsvg%3E"); }
.ci-bolt { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20stroke%3D%22%232B3550%22%20stroke-width%3D%221.5%22%20stroke-linejoin%3D%22round%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M14%202L4%2014h7l-2%208%2011-13h-7z%22%20fill%3D%22%23FFD43B%22%2F%3E%3C%2Fsvg%3E"); }
.ci-hourglass { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20stroke%3D%22%232B3550%22%20stroke-width%3D%221.5%22%20stroke-linejoin%3D%22round%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M6%203h12M6%2021h12%22%20fill%3D%22none%22%2F%3E%3Cpath%20d%3D%22M7%203c0%205%205%206%205%209s-5%204-5%209h10c0-5-5-6-5-9s5-4%205-9z%22%20fill%3D%22%23E7F5FF%22%2F%3E%3Cpath%20d%3D%22M9%2019c1-2%202-3%203-3s2%201%203%203zM9.5%207.5h5L12%2010z%22%20fill%3D%22%23FFD43B%22%20stroke%3D%22none%22%2F%3E%3C%2Fsvg%3E"); }
.ci-medal1 { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20stroke%3D%22%232B3550%22%20stroke-width%3D%221.5%22%20stroke-linejoin%3D%22round%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M7%202h4l2%206H9zM17%202h-4l-2%206h4z%22%20fill%3D%22%234D96FF%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2215%22%20r%3D%226.5%22%20fill%3D%22%23FFD43B%22%2F%3E%3Cpath%20d%3D%22M11%2013l1.5-1v6%22%20fill%3D%22none%22%2F%3E%3C%2Fsvg%3E"); }
.ci-medal2 { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20stroke%3D%22%232B3550%22%20stroke-width%3D%221.5%22%20stroke-linejoin%3D%22round%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M7%202h4l2%206H9zM17%202h-4l-2%206h4z%22%20fill%3D%22%23FF6B6B%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2215%22%20r%3D%226.5%22%20fill%3D%22%23CED4DA%22%2F%3E%3Cpath%20d%3D%22M10%2013.2a2%202%200%200%201%203.8.6c0%201.3-3.8%202.6-3.8%204.2h4%22%20fill%3D%22none%22%2F%3E%3C%2Fsvg%3E"); }
.ci-medal3 { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20stroke%3D%22%232B3550%22%20stroke-width%3D%221.5%22%20stroke-linejoin%3D%22round%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M7%202h4l2%206H9zM17%202h-4l-2%206h4z%22%20fill%3D%22%2351CF66%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2215%22%20r%3D%226.5%22%20fill%3D%22%23E8A87C%22%2F%3E%3Cpath%20d%3D%22M10.2%2012.5h3.4l-1.8%202.2a1.8%201.8%200%201%201-1.8%202.6%22%20fill%3D%22none%22%2F%3E%3C%2Fsvg%3E"); }
.ci-megaphone { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20stroke%3D%22%232B3550%22%20stroke-width%3D%221.5%22%20stroke-linejoin%3D%22round%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M3%2010v4h3l9%205V5L6%2010z%22%20fill%3D%22%23FF922B%22%2F%3E%3Cpath%20d%3D%22M6%2014l1.5%206h2.5l-1-5.2%22%20fill%3D%22%23FFC078%22%2F%3E%3Cpath%20d%3D%22M18%209c1.2.8%201.2%205.2%200%206M20.5%207c2%202%202%208%200%2010%22%20fill%3D%22none%22%2F%3E%3C%2Fsvg%3E"); }
.ci-share { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20stroke%3D%22%232B3550%22%20stroke-width%3D%221.5%22%20stroke-linejoin%3D%22round%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M12%2015V3M8%207l4-4%204%204%22%20fill%3D%22none%22%2F%3E%3Cpath%20d%3D%22M5%2011h3M16%2011h3v10H5V11%22%20fill%3D%22%23A5D8FF%22%2F%3E%3C%2Fsvg%3E"); }
.ci-download { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20stroke%3D%22%232B3550%22%20stroke-width%3D%221.5%22%20stroke-linejoin%3D%22round%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M12%203v12M8%2011l4%204%204-4%22%20fill%3D%22none%22%2F%3E%3Cpath%20d%3D%22M4%2016v4h16v-4%22%20fill%3D%22%23B2F2BB%22%2F%3E%3C%2Fsvg%3E"); }
.ci-card { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20stroke%3D%22%232B3550%22%20stroke-width%3D%221.5%22%20stroke-linejoin%3D%22round%22%20stroke-linecap%3D%22round%22%3E%3Crect%20x%3D%222.5%22%20y%3D%225%22%20width%3D%2219%22%20height%3D%2214%22%20rx%3D%223%22%20fill%3D%22%2374C0FC%22%2F%3E%3Cpath%20d%3D%22M2.5%209.5h19%22%20fill%3D%22none%22%20stroke-width%3D%222.4%22%2F%3E%3Crect%20x%3D%225%22%20y%3D%2213.5%22%20width%3D%225%22%20height%3D%222.5%22%20rx%3D%221%22%20fill%3D%22%23FFD43B%22%2F%3E%3C%2Fsvg%3E"); }
.ci-tools { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20stroke%3D%22%232B3550%22%20stroke-width%3D%221.5%22%20stroke-linejoin%3D%22round%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M14.5%204.5a4%204%200%200%200-5%205L3.5%2015.5l2.8%202.8%206-6a4%204%200%200%200%205-5l-2.6%202.6-2.4-.4-.4-2.4z%22%20fill%3D%22%23ADB5BD%22%2F%3E%3Cpath%20d%3D%22M15%2015l5%205%22%20fill%3D%22none%22%20stroke-width%3D%222.6%22%2F%3E%3Cpath%20d%3D%22M13%2013l3-3%22%20fill%3D%22none%22%2F%3E%3C%2Fsvg%3E"); }
.ci-bulb { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20stroke%3D%22%232B3550%22%20stroke-width%3D%221.5%22%20stroke-linejoin%3D%22round%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M12%202.5a6.5%206.5%200%200%200-3.8%2011.8V17h7.6v-2.7A6.5%206.5%200%200%200%2012%202.5z%22%20fill%3D%22%23FFE066%22%2F%3E%3Crect%20x%3D%228.5%22%20y%3D%2217%22%20width%3D%227%22%20height%3D%222.5%22%20rx%3D%221%22%20fill%3D%22%23ADB5BD%22%2F%3E%3Cpath%20d%3D%22M10%2021.5h4%22%20fill%3D%22none%22%2F%3E%3Ccircle%20cx%3D%2210.719999999999999%22%20cy%3D%229%22%20r%3D%220.6000000000000001%22%20fill%3D%22%232B3550%22%2F%3E%3Ccircle%20cx%3D%2213.280000000000001%22%20cy%3D%229%22%20r%3D%220.6000000000000001%22%20fill%3D%22%232B3550%22%2F%3E%3Cpath%20d%3D%22M11.28%2010.04q0.7200000000000001%200.7200000000000001%201.4400000000000002%200%22%20fill%3D%22none%22%20stroke%3D%22%232B3550%22%20stroke-width%3D%220.6400000000000001%22%2F%3E%3Ccircle%20cx%3D%229.92%22%20cy%3D%2210.12%22%20r%3D%220.5599999999999999%22%20fill%3D%22%23FF8FA3%22%20stroke%3D%22none%22%2F%3E%3Ccircle%20cx%3D%2214.08%22%20cy%3D%2210.12%22%20r%3D%220.5599999999999999%22%20fill%3D%22%23FF8FA3%22%20stroke%3D%22none%22%2F%3E%3C%2Fsvg%3E"); }
.ci-friends { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20stroke%3D%22%232B3550%22%20stroke-width%3D%221.5%22%20stroke-linejoin%3D%22round%22%20stroke-linecap%3D%22round%22%3E%3Ccircle%20cx%3D%228%22%20cy%3D%229%22%20r%3D%224%22%20fill%3D%22%23FFC9C9%22%2F%3E%3Ccircle%20cx%3D%2216.5%22%20cy%3D%229.5%22%20r%3D%223.6%22%20fill%3D%22%23B2F2BB%22%2F%3E%3Cpath%20d%3D%22M2%2020c.5-4%203-5.5%206-5.5s5%201.5%205.5%205.5zM12.5%2020c.4-3.4%202-5%204-5s4%201.6%204.5%205z%22%20fill%3D%22%2374C0FC%22%2F%3E%3Ccircle%20cx%3D%227.04%22%20cy%3D%229%22%20r%3D%220.44999999999999996%22%20fill%3D%22%232B3550%22%2F%3E%3Ccircle%20cx%3D%228.96%22%20cy%3D%229%22%20r%3D%220.44999999999999996%22%20fill%3D%22%232B3550%22%2F%3E%3Cpath%20d%3D%22M7.46%209.78q0.54%200.54%201.08%200%22%20fill%3D%22none%22%20stroke%3D%22%232B3550%22%20stroke-width%3D%220.48%22%2F%3E%3Ccircle%20cx%3D%226.4399999999999995%22%20cy%3D%229.84%22%20r%3D%220.42%22%20fill%3D%22%23FF8FA3%22%20stroke%3D%22none%22%2F%3E%3Ccircle%20cx%3D%229.56%22%20cy%3D%229.84%22%20r%3D%220.42%22%20fill%3D%22%23FF8FA3%22%20stroke%3D%22none%22%2F%3E%3Ccircle%20cx%3D%2215.62%22%20cy%3D%229.5%22%20r%3D%220.41250000000000003%22%20fill%3D%22%232B3550%22%2F%3E%3Ccircle%20cx%3D%2217.38%22%20cy%3D%229.5%22%20r%3D%220.41250000000000003%22%20fill%3D%22%232B3550%22%2F%3E%3Cpath%20d%3D%22M16.005%2010.215q0.49500000000000005%200.49500000000000005%200.9900000000000001%200%22%20fill%3D%22none%22%20stroke%3D%22%232B3550%22%20stroke-width%3D%220.44000000000000006%22%2F%3E%3Ccircle%20cx%3D%2215.07%22%20cy%3D%2210.27%22%20r%3D%220.385%22%20fill%3D%22%23FF8FA3%22%20stroke%3D%22none%22%2F%3E%3Ccircle%20cx%3D%2217.93%22%20cy%3D%2210.27%22%20r%3D%220.385%22%20fill%3D%22%23FF8FA3%22%20stroke%3D%22none%22%2F%3E%3C%2Fsvg%3E"); }
.ci-school { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20stroke%3D%22%232B3550%22%20stroke-width%3D%221.5%22%20stroke-linejoin%3D%22round%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M12%202.5l9%205v2H3v-2z%22%20fill%3D%22%23FF8787%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%229.5%22%20width%3D%2216%22%20height%3D%2211%22%20fill%3D%22%23FFF3BF%22%2F%3E%3Crect%20x%3D%2210%22%20y%3D%2214.5%22%20width%3D%224%22%20height%3D%226%22%20fill%3D%22%2374C0FC%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%226.5%22%20r%3D%221.3%22%20fill%3D%22%23FFD43B%22%2F%3E%3Cpath%20d%3D%22M6.5%2012.5h2M15.5%2012.5h2%22%20fill%3D%22none%22%2F%3E%3C%2Fsvg%3E"); }
.ci-keylock { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20stroke%3D%22%232B3550%22%20stroke-width%3D%221.5%22%20stroke-linejoin%3D%22round%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M12%202.5l8%203v6c0%205-3.5%208.5-8%2010-4.5-1.5-8-5-8-10v-6z%22%20fill%3D%22%238CE99A%22%2F%3E%3Crect%20x%3D%229%22%20y%3D%2211%22%20width%3D%226%22%20height%3D%225%22%20rx%3D%221%22%20fill%3D%22%23FFD43B%22%2F%3E%3Cpath%20d%3D%22M10%2011V9.5a2%202%200%200%201%204%200V11%22%20fill%3D%22none%22%2F%3E%3C%2Fsvg%3E"); }
.ci-chat { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20stroke%3D%22%232B3550%22%20stroke-width%3D%221.5%22%20stroke-linejoin%3D%22round%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M3%206a3%203%200%200%201%203-3h12a3%203%200%200%201%203%203v8a3%203%200%200%201-3%203h-7l-5%204v-4a3%203%200%200%201-3-3z%22%20fill%3D%22%23A5D8FF%22%2F%3E%3Ccircle%20cx%3D%2210.64%22%20cy%3D%229.5%22%20r%3D%220.6375%22%20fill%3D%22%232B3550%22%2F%3E%3Ccircle%20cx%3D%2213.36%22%20cy%3D%229.5%22%20r%3D%220.6375%22%20fill%3D%22%232B3550%22%2F%3E%3Cpath%20d%3D%22M11.235%2010.605q0.765%200.765%201.53%200%22%20fill%3D%22none%22%20stroke%3D%22%232B3550%22%20stroke-width%3D%220.68%22%2F%3E%3Ccircle%20cx%3D%229.79%22%20cy%3D%2210.69%22%20r%3D%220.595%22%20fill%3D%22%23FF8FA3%22%20stroke%3D%22none%22%2F%3E%3Ccircle%20cx%3D%2214.21%22%20cy%3D%2210.69%22%20r%3D%220.595%22%20fill%3D%22%23FF8FA3%22%20stroke%3D%22none%22%2F%3E%3C%2Fsvg%3E"); }
.ci-check { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20stroke%3D%22%232B3550%22%20stroke-width%3D%221.5%22%20stroke-linejoin%3D%22round%22%20stroke-linecap%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229.5%22%20fill%3D%22%2369DB7C%22%2F%3E%3Cpath%20d%3D%22M7.5%2012.5l3%203%206-6.5%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%222.4%22%2F%3E%3C%2Fsvg%3E"); }
.ci-trophy { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20stroke%3D%22%232B3550%22%20stroke-width%3D%221.5%22%20stroke-linejoin%3D%22round%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M7%203h10v5a5%205%200%200%201-10%200z%22%20fill%3D%22%23FFD43B%22%2F%3E%3Cpath%20d%3D%22M7%204.5H3.5a3.5%203.5%200%200%200%203.8%204M17%204.5h3.5a3.5%203.5%200%200%201-3.8%204%22%20fill%3D%22none%22%2F%3E%3Cpath%20d%3D%22M10.5%2013h3v3.5h-3z%22%20fill%3D%22%23F59F00%22%2F%3E%3Crect%20x%3D%227%22%20y%3D%2216.5%22%20width%3D%2210%22%20height%3D%224.5%22%20rx%3D%221.2%22%20fill%3D%22%239775FA%22%2F%3E%3Ccircle%20cx%3D%2211.04%22%20cy%3D%226.6%22%20r%3D%220.44999999999999996%22%20fill%3D%22%232B3550%22%2F%3E%3Ccircle%20cx%3D%2212.96%22%20cy%3D%226.6%22%20r%3D%220.44999999999999996%22%20fill%3D%22%232B3550%22%2F%3E%3Cpath%20d%3D%22M11.46%207.38q0.54%200.54%201.08%200%22%20fill%3D%22none%22%20stroke%3D%22%232B3550%22%20stroke-width%3D%220.48%22%2F%3E%3Ccircle%20cx%3D%2210.44%22%20cy%3D%227.4399999999999995%22%20r%3D%220.42%22%20fill%3D%22%23FF8FA3%22%20stroke%3D%22none%22%2F%3E%3Ccircle%20cx%3D%2213.56%22%20cy%3D%227.4399999999999995%22%20r%3D%220.42%22%20fill%3D%22%23FF8FA3%22%20stroke%3D%22none%22%2F%3E%3C%2Fsvg%3E"); }
.ci-books { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20stroke%3D%22%232B3550%22%20stroke-width%3D%221.5%22%20stroke-linejoin%3D%22round%22%20stroke-linecap%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%224%22%20width%3D%225%22%20height%3D%2216%22%20rx%3D%221%22%20fill%3D%22%23FF8787%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%226%22%20width%3D%225%22%20height%3D%2214%22%20rx%3D%221%22%20fill%3D%22%2374C0FC%22%2F%3E%3Cpath%20d%3D%22M13.5%207.5l4.3-1.2%203.6%2013.2-4.3%201.2z%22%20fill%3D%22%238CE99A%22%2F%3E%3Cpath%20d%3D%22M4.5%208h2M9.5%2010h2%22%20fill%3D%22none%22%2F%3E%3C%2Fsvg%3E"); }
.ci-rocket { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20stroke%3D%22%232B3550%22%20stroke-width%3D%221.5%22%20stroke-linejoin%3D%22round%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M12%202c4%202.5%205.5%207%205%2012H7c-.5-5%201-9.5%205-12z%22%20fill%3D%22%23E7F5FF%22%2F%3E%3Cpath%20d%3D%22M7%2014l-3%204%203.5-.5M17%2014l3%204-3.5-.5%22%20fill%3D%22%23FF6B6B%22%2F%3E%3Cpath%20d%3D%22M10%2017.5h4l-2%204.5z%22%20fill%3D%22%23FFA94D%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%229%22%20r%3D%222.3%22%20fill%3D%22%2374C0FC%22%2F%3E%3C%2Fsvg%3E"); }
.ci-calendar { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20stroke%3D%22%232B3550%22%20stroke-width%3D%221.5%22%20stroke-linejoin%3D%22round%22%20stroke-linecap%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%225%22%20width%3D%2218%22%20height%3D%2216%22%20rx%3D%223%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M3%208a3%203%200%200%201%203-3h12a3%203%200%200%201%203%203v2H3z%22%20fill%3D%22%2351CF66%22%2F%3E%3Cpath%20d%3D%22M8%203v4M16%203v4%22%20fill%3D%22none%22%2F%3E%3Ccircle%20cx%3D%2210.64%22%20cy%3D%2215%22%20r%3D%220.6375%22%20fill%3D%22%232B3550%22%2F%3E%3Ccircle%20cx%3D%2213.36%22%20cy%3D%2215%22%20r%3D%220.6375%22%20fill%3D%22%232B3550%22%2F%3E%3Cpath%20d%3D%22M11.235%2016.105q0.765%200.765%201.53%200%22%20fill%3D%22none%22%20stroke%3D%22%232B3550%22%20stroke-width%3D%220.68%22%2F%3E%3Ccircle%20cx%3D%229.79%22%20cy%3D%2216.19%22%20r%3D%220.595%22%20fill%3D%22%23FF8FA3%22%20stroke%3D%22none%22%2F%3E%3Ccircle%20cx%3D%2214.21%22%20cy%3D%2216.19%22%20r%3D%220.595%22%20fill%3D%22%23FF8FA3%22%20stroke%3D%22none%22%2F%3E%3C%2Fsvg%3E"); }
.ci-hall { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20stroke%3D%22%232B3550%22%20stroke-width%3D%221.5%22%20stroke-linejoin%3D%22round%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M12%202.5l9.5%205H2.5z%22%20fill%3D%22%23FFD43B%22%2F%3E%3Cpath%20d%3D%22M5%209v9M9.7%209v9M14.3%209v9M19%209v9%22%20fill%3D%22none%22%20stroke-width%3D%222%22%2F%3E%3Crect%20x%3D%223%22%20y%3D%2218%22%20width%3D%2218%22%20height%3D%223%22%20rx%3D%221%22%20fill%3D%22%23E9ECEF%22%2F%3E%3Cpath%20d%3D%22M3%209h18%22%20fill%3D%22none%22%2F%3E%3C%2Fsvg%3E"); }
.ci-fire { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20stroke%3D%22%232B3550%22%20stroke-width%3D%221.5%22%20stroke-linejoin%3D%22round%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M12%2022c-4.4%200-7.5-3-7.5-7%200-4.5%204-6.5%204.5-11%203%202%204.5%204%204.5%206.5%201-1%201.5-2%201.5-3.5%202.5%202%203.5%205%203.5%208%200%204-2.6%207-6.5%207z%22%20fill%3D%22%23FF922B%22%2F%3E%3Cpath%20d%3D%22M12%2022c-2%200-3.5-1.4-3.5-3.5%200-2.4%202.3-3.4%202.8-5.5%202.6%201.6%204.2%203.2%204.2%205.5%200%202.1-1.5%203.5-3.5%203.5z%22%20fill%3D%22%23FFD43B%22%20stroke%3D%22none%22%2F%3E%3Ccircle%20cx%3D%2210.96%22%20cy%3D%2217.6%22%20r%3D%220.48750000000000004%22%20fill%3D%22%232B3550%22%2F%3E%3Ccircle%20cx%3D%2213.04%22%20cy%3D%2217.6%22%20r%3D%220.48750000000000004%22%20fill%3D%22%232B3550%22%2F%3E%3Cpath%20d%3D%22M11.415%2018.445q0.5850000000000001%200.5850000000000001%201.1700000000000002%200%22%20fill%3D%22none%22%20stroke%3D%22%232B3550%22%20stroke-width%3D%220.52%22%2F%3E%3Ccircle%20cx%3D%2210.31%22%20cy%3D%2218.51%22%20r%3D%220.45499999999999996%22%20fill%3D%22%23FF8FA3%22%20stroke%3D%22none%22%2F%3E%3Ccircle%20cx%3D%2213.69%22%20cy%3D%2218.51%22%20r%3D%220.45499999999999996%22%20fill%3D%22%23FF8FA3%22%20stroke%3D%22none%22%2F%3E%3C%2Fsvg%3E"); }
.ci-keyboard { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20stroke%3D%22%232B3550%22%20stroke-width%3D%221.5%22%20stroke-linejoin%3D%22round%22%20stroke-linecap%3D%22round%22%3E%3Crect%20x%3D%222%22%20y%3D%226%22%20width%3D%2220%22%20height%3D%2212%22%20rx%3D%222.5%22%20fill%3D%22%23E9ECEF%22%2F%3E%3Cpath%20d%3D%22M5.5%209.5h1M9%209.5h1M12.5%209.5h1M16%209.5h2.5M5.5%2012.5h1M9%2012.5h1M12.5%2012.5h1M16%2012.5h1M7.5%2015h9%22%20fill%3D%22none%22%2F%3E%3C%2Fsvg%3E"); }
.ci-brain { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20stroke%3D%22%232B3550%22%20stroke-width%3D%221.5%22%20stroke-linejoin%3D%22round%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M9.5%203.5A3%203%200%200%200%206.5%206a3%203%200%200%200-2%205%203%203%200%200%200%201.5%205%203%203%200%200%200%203.5%203.5%202.5%202.5%200%200%200%202.5-2V5.5a2.2%202.2%200%200%200-2.5-2zM14.5%203.5A3%203%200%200%201%2017.5%206a3%203%200%200%201%202%205%203%203%200%200%201-1.5%205%203%203%200%200%201-3.5%203.5%202.5%202.5%200%200%201-2.5-2%22%20fill%3D%22%23FFC9DE%22%2F%3E%3Cpath%20d%3D%22M8%209h1.5M14.5%2012.5H16M8%2014h1.5%22%20fill%3D%22none%22%2F%3E%3C%2Fsvg%3E"); }
.ci-pushpin { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20stroke%3D%22%232B3550%22%20stroke-width%3D%221.5%22%20stroke-linejoin%3D%22round%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M9%203h6l-1%206%203%203H7l3-3z%22%20fill%3D%22%23FF6B6B%22%2F%3E%3Cpath%20d%3D%22M12%2012v9%22%20fill%3D%22none%22%2F%3E%3C%2Fsvg%3E"); }
.ci-key { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20stroke%3D%22%232B3550%22%20stroke-width%3D%221.5%22%20stroke-linejoin%3D%22round%22%20stroke-linecap%3D%22round%22%3E%3Ccircle%20cx%3D%228%22%20cy%3D%2212%22%20r%3D%224.5%22%20fill%3D%22%23FFD43B%22%2F%3E%3Ccircle%20cx%3D%228%22%20cy%3D%2212%22%20r%3D%221.6%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M12.5%2012H21v3M18%2012v2.5%22%20fill%3D%22none%22%20stroke-width%3D%221.8%22%2F%3E%3C%2Fsvg%3E"); }
.ci-star { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20stroke%3D%22%232B3550%22%20stroke-width%3D%221.5%22%20stroke-linejoin%3D%22round%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M12%202.5l2.9%206%206.6.8-4.9%204.6%201.3%206.6L12%2017.3l-5.9%203.2%201.3-6.6-4.9-4.6%206.6-.8z%22%20fill%3D%22%23FFD43B%22%2F%3E%3C%2Fsvg%3E"); }
.ci-sparkle { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20stroke%3D%22%232B3550%22%20stroke-width%3D%221.5%22%20stroke-linejoin%3D%22round%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M12%202c.8%205%202%206.2%207%207-5%20.8-6.2%202-7%207-.8-5-2-6.2-7-7%205-.8%206.2-2%207-7z%22%20fill%3D%22%23FFD43B%22%2F%3E%3C%2Fsvg%3E"); }
.ink-t .ci, .spad-t .ci { width: 22px; height: 22px; vertical-align: middle; }
.tool-big .ti .ci { width: 28px; height: 28px; }
.lock-ic .ci { width: 40px; height: 40px; }
.team-ic .ci { width: 62%; height: 62%; }

/* ===== หน้าแรก: แท็บหมวดและการ์ดหัวข้อแบบการ์ตูน ===== */
.cat-tab .ic.art-ic { width: 64px; height: 64px; border-radius: 20px; background: #F4F6FA; filter: grayscale(.55); opacity: .8; transition: transform .25s cubic-bezier(.3,1.6,.5,1), filter .2s, opacity .2s, background .2s; }
.cat-tab .ic.art-ic svg { width: 46px; height: 46px; }
.cat-tab:hover .ic.art-ic { filter: none; opacity: 1; transform: translateY(-3px) rotate(-4deg); }
.cat-tab[aria-selected="true"] .ic.art-ic { filter: none; opacity: 1; background: linear-gradient(135deg, #EAF2FF, #F3EEFF); box-shadow: 0 8px 18px rgba(30,102,224,.16), inset 0 0 0 2px #fff; transform: rotate(-5deg) scale(1.06); }
.tile { position: relative; overflow: hidden; isolation: isolate; padding-right: 92px; min-height: 132px; border: 1px solid rgba(255,255,255,.6); }
.tile::before { content: ""; position: absolute; right: -36px; bottom: -44px; width: 150px; height: 150px; border-radius: 50%; background: rgba(255,255,255,.55); z-index: -1; transition: transform .35s; }
.tile::after { content: ""; position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(circle, rgba(23,32,51,.07) 1.2px, transparent 1.5px); background-size: 16px 16px; -webkit-mask-image: linear-gradient(120deg, transparent 40%, #000 90%); mask-image: linear-gradient(120deg, transparent 40%, #000 90%); }
.tile-art { position: absolute; right: 12px; bottom: 12px; width: 70px; height: 70px; transform: rotate(-7deg); filter: drop-shadow(0 4px 8px rgba(23,32,51,.14)); transition: transform .3s cubic-bezier(.3,1.6,.5,1); }
.tile-art svg { width: 70px; height: 70px; }
.tile:hover .tile-art { transform: rotate(5deg) scale(1.12) translateY(-3px); }
.tile:hover::before { transform: scale(1.15); }
.tile-foot { margin-top: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding-top: 8px; }
.tile .cnt { font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: rgba(255,255,255,.75); }
.tile .go { margin-top: 0; font-size: 13px; padding: 3px 11px; border-radius: 999px; border: 1.5px solid currentColor; transition: transform .2s; }
.tile:hover .go { transform: translateX(2px); }
@media (prefers-reduced-motion: reduce) { .tile-art, .cat-tab .ic.art-ic { transition: none; } }
@media (max-width: 640px) {
  .tile { padding: 14px 14px 14px; min-height: 128px; }
  .tile .sub { padding-right: 46px; font-size: 12px; }
  .tile .ttl { font-size: 16px; }
  .tile-art { width: 46px; height: 46px; right: 8px; top: 8px; bottom: auto; }
  .tile-art svg { width: 46px; height: 46px; }
  .tile::before { width: 110px; height: 110px; right: -40px; top: -40px; bottom: auto; }
  .tile .go { font-size: 12px; padding: 2px 9px; }
}

/* ===== แพ็กสมาชิก ===== */
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; align-items: stretch; padding-top: 14px; }
@media (max-width: 900px) { .plans { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; } }
.plans .plan { position: relative; background: #fff; border: 1px solid var(--line); border-radius: 24px; padding: 26px 26px 24px; display: flex; flex-direction: column; gap: 6px; text-align: left; transition: transform .2s, box-shadow .2s; isolation: isolate; overflow: visible; }
.plans .plan:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(23,32,51,.12); }
.plans .plan-art { position: relative; width: 84px; height: 84px; border-radius: 24px; display: grid; place-items: center; margin-bottom: 8px; transform: rotate(-6deg); box-shadow: inset 0 0 0 2px #fff, 0 8px 16px rgba(23,32,51,.08); }
.plans .plan-art svg { width: 64px; height: 64px; }
.plans .plan:hover .plan-art { transform: rotate(4deg) scale(1.06); transition: transform .3s cubic-bezier(.3,1.6,.5,1); }
.plans .plan-free .plan-art { background: linear-gradient(135deg, #EBFBEE, #F4FCE3); }
.plans .plan-30 .plan-art { background: linear-gradient(135deg, #E7F5FF, #EDF2FF); }
.plans .plan-best .plan-art { background: linear-gradient(135deg, #FFF9DB, #FFF0F6); }
.plans .plan-name { font-size: 15px; font-weight: 700; color: var(--muted); }
.plans .plan-price { display: flex; align-items: baseline; gap: 6px; color: var(--navy); line-height: 1.1; }
.plans .plan-price b { font-size: clamp(38px, 4vw, 48px); font-weight: 800; letter-spacing: -.02em; }
.plans .plan-price .cur { font-size: .55em; vertical-align: .55em; margin-right: 2px; }
.plans .plan-price .per { font-size: 15px; color: var(--muted); font-weight: 600; }
.plans .plan-base { font-size: 14px; color: var(--muted); } .plans .plan-base s { color: #E03131; }
.plans .plan-note { margin: 0 0 6px; font-size: 14px; color: var(--muted); }
.plans .plan-note.hot { color: #B35C00; font-weight: 700; }
.plans .plan ul { margin: 6px 0 18px; padding: 14px 0 0; border-top: 1px dashed var(--line); list-style: none; display: flex; flex-direction: column; gap: 10px; font-size: 15px; }
.plans .plan li { display: flex; gap: 10px; align-items: flex-start; } .plans .plan li::before { content: none; }
.plans .plan li .ci { margin-top: 1px; width: 20px; height: 20px; }
.plans .plan-btn { margin-top: auto; width: 100%; justify-content: center; padding: 14px; font-size: 17px; border-radius: 14px; }
.plans .flag { position: absolute; top: 18px; right: 18px; font-size: 13px; font-weight: 700; padding: 4px 12px; border-radius: 999px; background: var(--accent-soft); color: var(--navy); }
.plans .plan-30 .flag { background: #E7F5FF; color: #1864AB; }
/* แพ็กแนะนำ */
.plans .plan-best { border: 0; background: linear-gradient(#fff, #fff) padding-box, linear-gradient(135deg, #4D96FF, #9775FA 50%, #FFC93C) border-box; border: 3px solid transparent; box-shadow: 0 20px 44px rgba(91,61,245,.18); transform: translateY(-10px); }
.plans .plan-best:hover { transform: translateY(-14px); box-shadow: 0 26px 54px rgba(91,61,245,.24); }
.plans .plan-best::before { content: ""; position: absolute; inset: 0; border-radius: 21px; background: radial-gradient(circle at 85% 0%, rgba(255,201,60,.22), transparent 45%), radial-gradient(circle at 0% 100%, rgba(151,117,250,.12), transparent 50%); z-index: -1; }
.plans .plan-best .flag { background: linear-gradient(135deg, #FF6B6B, #F76707); color: #fff; box-shadow: 0 4px 10px rgba(247,103,7,.3); }
.plans .ribbon { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); background: linear-gradient(135deg, #5B3DF5, #1F6F5C); color: #fff; font-size: 13px; font-weight: 800; padding: 5px 16px; border-radius: 999px; letter-spacing: .02em; box-shadow: 0 6px 14px rgba(30,102,224,.3); white-space: nowrap; }
.plans .spark { position: absolute; width: 18px; height: 18px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2c.8 5 2 6.2 7 7-5 .8-6.2 2-7 7-.8-5-2-6.2-7-7 5-.8 6.2-2 7-7z' fill='%23FFD43B' stroke='%232B3550' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; animation: twinkle 2.2s ease-in-out infinite; }
.plans .spark.s1 { top: -8px; right: -10px; } .plans .spark.s2 { bottom: -4px; left: -10px; width: 12px; height: 12px; animation-delay: 1.1s; }
@keyframes twinkle { 0%, 100% { transform: scale(.7) rotate(0); opacity: .6; } 50% { transform: scale(1.1) rotate(20deg); opacity: 1; } }
.btn.shine { position: relative; overflow: hidden; background: linear-gradient(135deg, #FFD43B, #FAB005); box-shadow: 0 8px 18px rgba(250,176,5,.35); }
.btn.shine::after { content: ""; position: absolute; top: 0; left: -60%; width: 40%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.65), transparent); transform: skewX(-20deg); animation: shine 3.2s ease-in-out infinite; }
@keyframes shine { 0%, 60% { left: -60%; } 100% { left: 130%; } }
.plan-trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 22px; margin-top: 26px; font-size: 14px; color: var(--muted); font-weight: 600; }
.plan-trust span { display: inline-flex; align-items: center; gap: 6px; }
@media (max-width: 900px) { .plans .plan-best { transform: none; order: -1; } .plans .plan-best:hover { transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .plans .spark, .btn.shine::after { animation: none; } }

/* footer กระชับ */
.footer-grid { padding-top: 40px; padding-bottom: 20px; gap: 24px 32px; font-size: 14px; grid-template-columns: 1.6fr repeat(3, 1fr); }
.footer-grid nav { gap: 7px; }
.footer-grid nav b { font-size: 15px; margin-bottom: 2px; }
.foot-stack { display: flex; flex-direction: column; gap: 22px; }
.foot-more summary { cursor: pointer; color: var(--accent); font-weight: 600; list-style: none; padding: 2px 0; }
.foot-more summary::-webkit-details-marker { display: none; }
.foot-more summary::after { content: " ▾"; font-size: 12px; }
.foot-more[open] summary::after { content: " ▴"; }
.foot-more[open] { display: flex; flex-direction: column; gap: 7px; }
.foot-more[open] summary { order: 99; }
.foot-links { display: flex; flex-wrap: wrap; gap: 8px; }
.foot-links a { font-size: 13px; font-weight: 600; color: var(--navy); text-decoration: none; padding: 5px 12px; border-radius: 999px; background: var(--accent-soft); }
.foot-links a:hover { background: var(--accent); color: #fff; }
.footer-brand { max-width: 380px; }
@media (max-width: 800px) { .footer-grid { grid-template-columns: 1fr 1fr; } .footer-brand { grid-column: 1 / -1; max-width: none; } .foot-stack { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 24px 32px; } }

/* ===== แข่งกันทุกวัน (หน้าแรก ใต้ฮีโร่) ===== */
.race { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 20px; margin-top: 8px; margin-bottom: 28px; }
@media (max-width: 900px) { .race { grid-template-columns: 1fr; } }
.race-pitch { position: relative; overflow: hidden; isolation: isolate; border-radius: 24px; padding: 30px 30px 28px; color: #fff; background: radial-gradient(circle at 85% 20%, rgba(255,212,59,.35), transparent 40%), linear-gradient(135deg, #14213D, #1F6F5C 55%, #5B3DF5); display: flex; flex-direction: column; gap: 12px; box-shadow: 0 18px 40px rgba(30,102,224,.25); }
.race-pitch::after { content: ""; position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(circle, rgba(255,255,255,.12) 1.4px, transparent 1.6px); background-size: 20px 20px; -webkit-mask-image: linear-gradient(110deg, transparent 40%, #000 90%); mask-image: linear-gradient(110deg, transparent 40%, #000 90%); }
.race-pitch h2 { color: #fff; font-size: clamp(26px, 3vw, 36px); line-height: 1.25; max-width: 15em; }
.race-pitch p { color: #DCE6FF; max-width: 30em; margin: 0; } .race-pitch p b { color: #FFE066; }
.race-badge { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; background: #FFD43B; color: #172033; font-weight: 800; font-size: 14px; padding: 5px 12px 5px 8px; border-radius: 999px; }
.race-btns { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.race-btns .btn { padding: 13px 20px; }
.race-ghost { background: rgba(255,255,255,.14); color: #fff; border: 1.5px solid rgba(255,255,255,.45); }
.race-ghost:hover { background: rgba(255,255,255,.24); color: #fff; }
.race-art { position: absolute; right: 22px; top: 22px; width: 120px; height: 120px; transform: rotate(8deg); filter: drop-shadow(0 10px 18px rgba(0,0,0,.25)); z-index: -1; animation: raceBob 3.4s ease-in-out infinite; }
.race-art svg { width: 120px; height: 120px; }
@keyframes raceBob { 0%, 100% { transform: rotate(8deg) translateY(0); } 50% { transform: rotate(2deg) translateY(-8px); } }
@media (max-width: 640px) { .race-art { width: 74px; height: 74px; right: 14px; top: 14px; } .race-art svg { width: 74px; height: 74px; } .race-pitch { padding: 24px 20px; } .race-pitch h2 { padding-right: 70px; } }
.fb-card { background: #fff; border-radius: 24px; box-shadow: 0 14px 36px rgba(23,32,51,.12); border: 1px solid var(--line); overflow: hidden; }
.fb-hd { background: linear-gradient(135deg, #1F6F5C, #5B3DF5); color: #fff; padding: 14px 18px; display: flex; align-items: center; justify-content: space-between; }
.fb-hd b { display: flex; gap: 8px; align-items: center; font-size: 17px; } .fb-hd .ci { width: 24px; height: 24px; }
.race-live { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800; background: rgba(255,255,255,.18); padding: 3px 10px; border-radius: 999px; }
.race-live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #FF6B6B; animation: raceBlink 1.4s infinite; }
@keyframes raceBlink { 50% { opacity: .3; } }
.fb-bd { padding: 12px 18px 16px; display: flex; flex-direction: column; gap: 2px; }
.fb-tabs { display: flex; gap: 4px; background: #F1F4FA; border-radius: 999px; padding: 4px; margin-bottom: 6px; }
.fb-tabs button { flex: 1; border: 0; background: none; border-radius: 999px; padding: 7px 4px; font: inherit; font-size: 14px; font-weight: 700; color: var(--muted); cursor: pointer; white-space: nowrap; }
.fb-tabs button[aria-selected="true"] { background: #fff; color: var(--navy); box-shadow: 0 2px 6px rgba(0,0,0,.08); }
.fb-row { display: flex; align-items: center; gap: 10px; padding: 8px 6px; border-bottom: 1px dashed var(--line); border-radius: 10px; }
.fb-row.top { background: linear-gradient(90deg, #FFF9DB, transparent); border-bottom-color: transparent; }
.fb-row > .ci { width: 28px; height: 28px; } .fb-rk { width: 28px; text-align: center; color: var(--muted); }
.fb-nm { flex: 1; min-width: 0; font-weight: 600; } .fb-v { color: var(--navy); font-size: 14px; white-space: nowrap; }
.fb-team { width: 34px; height: 34px; display: inline-grid; place-items: center; border-radius: 50%; background: #E7F5FF; border: 2px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,.1); }
.fb-team .ci { width: 70%; height: 70%; }
.fb-empty { margin: 18px 0; text-align: center; color: var(--muted); font-size: 14px; }
.fb-cta { margin-top: 10px; padding: 11px 14px; border-radius: 14px; background: linear-gradient(135deg, #EAF2FF, #F3EEFF); display: flex; justify-content: space-between; gap: 8px; font-size: 14px; font-weight: 800; }
.fb-cta .fb-all { color: var(--muted); font-weight: 700; }
@media (prefers-reduced-motion: reduce) { .race-art, .race-live::before { animation: none; } }
.race[hidden] { display: none; }
/* แข่งกันทุกวัน: กระชับลง */
.race { gap: 16px; margin-top: 0; margin-bottom: 22px; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: stretch; }
.race-pitch { padding: 20px 22px; gap: 8px; border-radius: 20px; }
.race-pitch h2 { font-size: clamp(20px, 2vw, 25px); max-width: none; padding-right: 96px; }
.race-pitch h2 br { display: none; }
.race-pitch p { font-size: 14px; padding-right: 60px; }
.race-badge { font-size: 12px; padding: 3px 10px 3px 6px; } .race-badge .ci { width: 18px; height: 18px; }
.race-btns { margin-top: 2px; } .race-btns .btn { padding: 9px 16px; font-size: 15px; }
.race-art, .race-art svg { width: 82px; height: 82px; } .race-art { right: 18px; top: 16px; }
.race-board { border-radius: 20px; }
.race-board .fb-hd { padding: 9px 14px; } .race-board .fb-hd b { font-size: 15px; } .race-board .fb-hd .ci { width: 20px; height: 20px; }
.race-board .fb-bd { padding: 8px 12px 10px; }
.race-board .fb-tabs { margin-bottom: 2px; padding: 3px; } .race-board .fb-tabs button { padding: 4px; font-size: 13px; }
.race-board .fb-row { padding: 4px 6px; gap: 8px; } .race-board .fb-row > .ci, .race-board .fb-rk { width: 22px; height: 22px; }
.race-board .fb-row .avatar { width: 26px !important; height: 26px !important; font-size: 12px !important; }
.race-board .fb-nm { font-size: 14px; } .race-board .fb-v { font-size: 13px; }
.race-board .fb-cta { margin-top: 6px; padding: 7px 12px; font-size: 13px; border-radius: 10px; }
.race-board .fb-empty { margin: 10px 0; }
@media (max-width: 640px) { .race-pitch h2 { padding-right: 70px; font-size: 21px; } .race-pitch p { padding-right: 0; } .race-art, .race-art svg { width: 62px; height: 62px; } }
@media (max-width: 900px) { .race { grid-template-columns: 1fr; } }

/* ===== โปรราคาพิเศษ + นับถอยหลัง ===== */
.promo-deal{position:relative;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:18px 24px;margin:0 0 22px;padding:18px 24px;border-radius:22px;color:#fff;overflow:hidden;
  background:radial-gradient(circle at 92% 10%,rgba(255,213,74,.35),transparent 40%),linear-gradient(120deg,#E5484D 0%,#F0623A 45%,#FF8A3D 100%);box-shadow:0 14px 34px -14px rgba(229,72,77,.6)}
.promo-deal::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.18) 1.5px,transparent 1.6px);background-size:18px 18px;opacity:.5;pointer-events:none}
.promo-deal>*{position:relative}
.pd-tag{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:999px;background:#FFD54A;color:#7A2E0E;font-weight:700;font-size:15px;white-space:nowrap;box-shadow:0 3px 0 #C99A12}
.pd-tag .ci{width:18px;height:18px}
.pd-main{display:flex;flex-direction:column;gap:2px;min-width:0}
.pd-big{font-family:Anuphan,sans-serif;font-size:30px;line-height:1.15;letter-spacing:-.01em;text-shadow:0 2px 0 rgba(0,0,0,.12)}
.pd-sub{font-size:15.5px;opacity:.96}
.pd-sub b{font-size:17px;color:#FFE58A}
.pd-sub s{opacity:.75;margin-left:2px}
.pd-clock{display:flex;flex-direction:column;align-items:center;gap:4px}
.pd-cells{display:flex;gap:6px}
.pd-cells>span{display:flex;flex-direction:column;align-items:center;min-width:52px;padding:6px 4px 4px;border-radius:12px;background:rgba(255,255,255,.95);color:#B4232A;box-shadow:0 3px 0 rgba(0,0,0,.12)}
.pd-cells b{font-family:Anuphan,sans-serif;font-size:24px;line-height:1;font-variant-numeric:tabular-nums}
.pd-cells i{font-style:normal;font-size:11.5px;color:#7A3B3B;margin-top:2px}
.pd-l{font-size:12.5px;opacity:.95}
.promo-deal.ended{filter:grayscale(.6);opacity:.7}
.plan .flag.flag-hot{background:#E5484D;color:#fff;animation:pdPulse 1.8s ease-in-out infinite}
@keyframes pdPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}
@media (prefers-reduced-motion:reduce){.plan .flag.flag-hot{animation:none}}
@media (max-width:900px){.promo-deal{grid-template-columns:1fr;text-align:center;justify-items:center;padding:18px 16px}.pd-main{align-items:center}.pd-big{font-size:26px}}
@media (max-width:420px){.pd-cells>span{min-width:46px}.pd-cells b{font-size:21px}}
.pd-it{white-space:nowrap}
@media (max-width:520px){.pd-sub{display:flex;flex-direction:column;align-items:center}.pd-dot{display:none}}

/* ===== ข้อเสนอพิเศษเฉพาะคน (ป๊อปอัป + ชิป) ===== */
.offer-modal{position:fixed;inset:0;z-index:300;display:grid;place-items:center;padding:16px;background:rgba(11,18,34,.55);backdrop-filter:blur(3px);animation:omFade .25s ease}
.om-card{position:relative;width:min(420px,100%);padding:26px 24px 18px;border-radius:26px;text-align:center;background:radial-gradient(circle at 50% -10%,#FFF3C4 0,#fff 55%);box-shadow:0 30px 60px -20px rgba(18,53,122,.5);animation:omPop .35s cubic-bezier(.2,1.4,.4,1)}
.om-x{position:absolute;top:10px;right:12px;width:36px;height:36px;border:0;border-radius:50%;background:#F1F3F9;color:#4A5570;font-size:22px;line-height:1;cursor:pointer}
.om-art{position:relative;display:inline-grid;place-items:center;width:96px;height:96px;margin:-58px auto 6px;border-radius:28px;background:linear-gradient(135deg,#FFE7A0,#FFD0D6);box-shadow:0 10px 24px -10px rgba(229,72,77,.45);transform:rotate(-6deg)}
.om-art svg{width:78px;height:78px}
.om-tag{display:inline-block;padding:5px 12px;border-radius:999px;background:#E5484D;color:#fff;font-weight:700;font-size:13px}
.om-card h2{margin:10px 0 6px;font-size:24px;line-height:1.25;color:#14213D}
.om-why{margin:0 0 12px;color:#4A5570;font-size:15px}
.om-price{display:flex;align-items:baseline;justify-content:center;flex-wrap:wrap;gap:4px 10px;padding:12px;border-radius:18px;background:#F4F7FF;border:2px dashed #BFD0F5}
.om-plan{width:100%;font-weight:700;color:#14213D}
.om-price b{font-family:Anuphan,sans-serif;font-size:44px;line-height:1;color:#14213D}
.om-price s{color:#8A93A8;font-size:18px}
.om-off{padding:3px 10px;border-radius:999px;background:#FFD54A;color:#7A2E0E;font-weight:700;font-size:14px}
.om-per{margin:10px 0 8px;font-size:13.5px;color:#4A5570}
.om-clock{margin:4px 0 14px;color:#B4232A;font-weight:600}
.om-clock b{font-variant-numeric:tabular-nums;font-size:18px}
.om-go{width:100%;font-size:17px;padding:14px}
.om-later{margin-top:8px;border:0;background:none;color:#6B7590;font-size:14px;cursor:pointer;padding:6px 10px}
.offer-chip{position:fixed;left:16px;bottom:16px;z-index:120;display:flex;align-items:center;gap:10px;padding:8px 14px 8px 8px;border-radius:999px;background:#14213D;color:#fff;text-decoration:none;box-shadow:0 12px 26px -10px rgba(18,53,122,.6);animation:omPop .4s ease}
.offer-chip .oc-art{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:#FFD54A}
.offer-chip .oc-art svg{width:32px;height:32px}
.offer-chip b{display:block;font-size:14px}
.offer-chip small{font-size:12px;color:#FFE58A;font-variant-numeric:tabular-nums}
.offer-pay{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin-bottom:12px;padding:14px 16px;border-radius:18px;background:#FFF6D6;border:2px solid #FFD54A}
.offer-pay s{color:#8A93A8}
.offer-pay small{color:#B4232A;font-variant-numeric:tabular-nums}
@keyframes omFade{from{opacity:0}}
@keyframes omPop{from{opacity:0;transform:translateY(16px) scale(.96)}}
@media (max-width:900px){.offer-chip{bottom:76px;left:12px}}
@media (prefers-reduced-motion:reduce){.offer-modal,.om-card,.offer-chip{animation:none}}

/* ===== แพ็กติวคืนสุดท้าย 7 วัน ===== */
.rush-pack{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px 18px;margin:18px 0 6px;padding:14px 18px;border-radius:20px;background:linear-gradient(120deg,#EEF6F2,#FFF7DB);border:2px dashed #9DB8F2}
.rp-art{display:grid;place-items:center;width:58px;height:58px;border-radius:18px;background:#fff;box-shadow:0 6px 14px -8px rgba(18,53,122,.4)}
.rp-art svg{width:48px;height:48px}
.rp-txt{display:flex;flex-direction:column;gap:3px;min-width:0}
.rp-txt b{font-size:17px;color:#14213D}
.rp-txt span{font-size:14px;color:#4A5570}
.rp-price{display:inline-block;padding:1px 10px;border-radius:999px;background:#E5484D;color:#fff !important;font-size:15px !important}
.rp-go{white-space:nowrap}
@media (max-width:700px){.rush-pack{grid-template-columns:auto 1fr}.rp-go{grid-column:1/-1;width:100%}}

/* ===== แพ็กติวคืนสุดท้าย: แถบล่างในหน้าฝึก + การ์ดในหน้าสอบ/ผลสอบ ===== */
.rush-bar{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:110;display:flex;align-items:center;gap:12px;width:min(720px,calc(100% - 24px));padding:8px 8px 8px 10px;border-radius:20px;color:#fff;
  background:linear-gradient(110deg,#14213D 0%,#1E4FB8 60%,#3B2FB8 100%);box-shadow:0 16px 34px -14px rgba(18,53,122,.75);animation:rbIn .45s cubic-bezier(.2,1.3,.4,1)}
.rb-art{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:14px;background:#FFD54A}
.rb-art svg{width:36px;height:36px}
.rb-txt{display:flex;flex-direction:column;min-width:0;flex:1}
.rb-txt b{font-size:15.5px;line-height:1.3}
.rb-txt small{font-size:12.5px;color:#C9D6F5}
.rb-go{flex:none;display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:14px;background:#FFD54A;color:#5A2A06;font-weight:700;text-decoration:none;box-shadow:0 3px 0 #C99A12;white-space:nowrap}
.rb-go:hover{filter:brightness(1.05)}
.rb-p{padding:1px 8px;border-radius:999px;background:#E5484D;color:#fff;font-size:14px}
.rb-x{flex:none;width:30px;height:30px;border:0;border-radius:50%;background:rgba(255,255,255,.14);color:#fff;font-size:18px;line-height:1;cursor:pointer}
body.has-rush{padding-bottom:84px}
body.has-rush .offer-chip{bottom:92px}
body.in-game .rush-bar,body:has(.exam-top) .rush-bar{display:none}
@keyframes rbIn{from{opacity:0;transform:translate(-50%,24px)}}
@media (max-width:900px){.rush-bar{bottom:72px;gap:9px}body.has-rush{padding-bottom:150px}body.has-rush .offer-chip{bottom:148px}}
@media (max-width:480px){.rb-txt small{display:none}.rb-txt b{font-size:14px}.rb-go{padding:9px 11px;font-size:14px}}
@media (prefers-reduced-motion:reduce){.rush-bar{animation:none}}
.rush-card{margin-top:14px;padding:16px;border-radius:20px;background:linear-gradient(160deg,#FFF8DD,#FFFFFF 60%);border:2px solid #FFD54A;box-shadow:0 10px 24px -16px rgba(201,154,18,.8);display:flex;flex-direction:column;gap:10px}
.rc-tag{align-self:flex-start;padding:4px 11px;border-radius:999px;background:#E5484D;color:#fff;font-weight:700;font-size:12.5px}
.rc-row{display:flex;gap:12px;align-items:flex-start}
.rc-art{flex:none;display:grid;place-items:center;width:52px;height:52px;border-radius:16px;background:#EEF6F2}
.rc-art svg{width:44px;height:44px}
.rc-row b{display:block;font-size:16px;color:#14213D;margin-bottom:4px}
.rc-row ul{margin:0;padding-left:18px;font-size:13.5px;color:#4A5570;display:flex;flex-direction:column;gap:2px}
.rc-go{width:100%;font-size:16px}
.rc-note{text-align:center;color:#6B7590;font-size:12px}
.band .rush-card{max-width:520px}
#t-auto .auto-st{margin-left:4px;padding:1px 8px;border-radius:999px;background:#E3F6EC;color:#147A4B;font-size:12.5px}
#t-auto[aria-pressed="false"] .auto-st{background:#F1F3F9;color:#6B7590}

/* ===== แจ้งเตือนแอดมิน + หน้าผู้ใช้ ===== */
.admin-pop{position:fixed;right:16px;bottom:16px;z-index:400;width:min(360px,calc(100% - 32px));border-radius:22px;background:#fff;box-shadow:0 24px 50px -18px rgba(11,18,34,.45),0 0 0 2px #FFD54A;overflow:hidden;animation:omPop .35s ease}
.admin-pop.ap-bump{animation:apBump .6s ease}
@keyframes apBump{0%{transform:scale(1)}30%{transform:scale(1.04) rotate(-1deg)}60%{transform:scale(.99)}100%{transform:none}}
.ap-h{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;background:#14213D;color:#fff}
.ap-h b{font-size:16px}.ap-x{border:0;background:rgba(255,255,255,.15);color:#fff;width:28px;height:28px;border-radius:50%;font-size:18px;cursor:pointer}
.ap-sec{padding:12px 16px;border-bottom:1px solid #EEF1F7;display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.ap-sec.pend{background:#FFF8E1}
.ap-t{font-weight:700;font-size:16px;color:#14213D;display:flex;align-items:center;gap:8px}
.ap-n{display:inline-grid;place-items:center;min-width:30px;height:30px;padding:0 8px;border-radius:999px;background:#E5484D;color:#fff;font-size:15px}
.ap-n.blue{background:#1F6F5C}.ap-n.gray{background:#6B7590}
.ap-row{font-size:14px;color:#33415F}.ap-row small{color:#8A93A8;margin-left:4px}
.ap-f{display:flex;justify-content:space-between;align-items:center;padding:10px 16px}
.u-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:14px}
.u-stats div{padding:14px 16px;border-radius:16px;background:#fff;border:1px solid var(--line)}
.u-stats small{display:block;color:var(--muted);font-size:13px}.u-stats b{font-size:26px;color:#14213D}.u-stats b span{font-size:14px;color:#147A4B}
.u-stats .hl{background:#EEF6F2;border-color:#BFD0F5}.u-stats .ok{background:#E9F8F0;border-color:#A9DFC3}
.u-tabs{display:flex;flex-wrap:wrap;gap:8px}.u-tabs button{border:1px solid var(--line);background:#fff;border-radius:999px;padding:6px 14px;font:inherit;font-size:14px;cursor:pointer}
.u-tabs button.on{background:#14213D;color:#fff;border-color:#14213D}
.new-pill{display:inline-block;margin-top:2px;padding:1px 8px;border-radius:999px;background:#E5484D;color:#fff;font-size:12px;font-weight:700}
@media (max-width:700px){.u-stats{grid-template-columns:repeat(2,1fr)}}

/* ===== เว็บในเครือ ===== */
.foot-sister{display:flex;flex-direction:column;gap:8px;margin-top:16px}
.foot-sister>b{font-size:14px}
.foot-sister a{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:14px;background:rgba(255,255,255,.06);border:1px solid var(--line);text-decoration:none;color:inherit}
.foot-sister a:hover{border-color:#9DB8F2}
.foot-sister .fs-ic{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:11px;background:#EEF6F2}.foot-sister .fs-ic svg{width:32px;height:32px}
.foot-sister strong{display:block;font-size:14px}.foot-sister small{display:block;font-size:12.5px;color:var(--muted)}
.sister{display:grid;grid-template-columns:1fr 1.3fr 1.3fr;gap:18px;align-items:stretch}
.sister-head{display:flex;flex-direction:column;justify-content:center;gap:6px}
.sister-head .eyebrow{align-self:flex-start;padding:4px 12px;border-radius:999px;background:#FFD54A;color:#5A2A06;font-weight:700;font-size:13px}
.sister-head h2{font-size:clamp(22px,2.4vw,28px);line-height:1.3}
.sister-card{display:flex;gap:16px;align-items:flex-start;padding:20px;border-radius:22px;background:#fff;border:1px solid var(--line);text-decoration:none;color:inherit;box-shadow:0 12px 30px -22px rgba(18,53,122,.5);transition:transform .2s,box-shadow .2s}
.sister-card:hover{transform:translateY(-3px);box-shadow:0 20px 36px -22px rgba(18,53,122,.6)}
.sc-art{flex:none;display:grid;place-items:center;width:72px;height:72px;border-radius:20px}.sc-art svg{width:60px;height:60px}
.sc-type .sc-art{background:linear-gradient(135deg,#EDE7FF,#D9F5EE)}.sc-cert .sc-art{background:linear-gradient(135deg,#FFF3C4,#FFE0D0)}
.sc-body{display:flex;flex-direction:column;gap:6px}.sc-body b{font-size:19px;color:var(--ink-strong)}.sc-body>span{font-size:14.5px;color:var(--muted);line-height:1.55}
.sc-body em{font-style:normal;font-weight:700;color:#1F6F5C;font-size:15px}
@media (max-width:900px){.sister{grid-template-columns:1fr}}
#admin-tabs [data-tab]{position:relative}
.tab-badge{position:absolute;top:-6px;right:-6px;min-width:22px;height:22px;padding:0 6px;border-radius:999px;background:#E5484D;color:#fff;font-size:12.5px;font-weight:700;line-height:22px;text-align:center;box-shadow:0 0 0 2px #fff}
.blue-badge .tab-badge{background:#1F6F5C}
.tab-badge.pop{animation:tbPop .5s cubic-bezier(.2,1.6,.4,1)}
@keyframes tbPop{0%{transform:scale(.4)}100%{transform:scale(1)}}
.sc-hot{align-self:flex-start;padding:3px 10px;border-radius:999px;background:#E5484D;color:#fff !important;font-size:12.5px !important;font-weight:700}
.sc-body strong{color:#14213D}

/* กระดานว่าง: ช่องอันดับรอคนแรก */
.fb-open{display:flex;flex-direction:column;gap:6px}
.fo-h{display:flex;align-items:center;gap:10px;padding:8px 4px}
.fo-h .ci{width:34px;height:34px;flex:none;animation:foBob 2.2s ease-in-out infinite}
.fo-h b{display:block;font-size:16px;color:var(--ink-strong)}.fo-h small{display:block;font-size:13px;color:var(--muted)}
.fb-slot{text-decoration:none;color:inherit;border:2px dashed #CBD6EE;background:transparent !important}
.fb-slot.top{border-color:#F2C94C;background:linear-gradient(90deg,#FFF8DD,#FFFDF5) !important}
.fb-slot:hover{border-color:#1F6F5C}
.fb-q{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:#EEF1F7;color:#8A93A8;font-weight:700;font-size:14px}
.fb-slot .fb-nm{color:#8A93A8}.fb-slot.top .fb-nm{color:#7A5A00;font-weight:700}
.fb-slot.top .fb-v{color:#1F6F5C}
.fb-dot{display:inline-block;width:8px;height:8px;margin-left:6px;border-radius:50%;background:#E5484D;vertical-align:middle;animation:pdPulse 1.6s ease-in-out infinite}
@keyframes foBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@media (prefers-reduced-motion:reduce){.fo-h .ci,.fb-dot{animation:none}}
.sc-rank{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;white-space:nowrap;padding:4px 12px 4px 6px;border-radius:999px;background:linear-gradient(135deg,#FFE58A,#FFC928);color:#6A4300 !important;font-size:13px !important;font-weight:700;box-shadow:0 2px 0 #D9A514}
.sc-rank .ci{width:20px;height:20px}
.sc-search{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;max-width:100%;padding:5px 6px 5px 10px;border-radius:999px;background:#fff;border:1.5px solid #DCE3F1;box-shadow:0 4px 12px -8px rgba(18,53,122,.4)}
.ss-g{font-style:normal;font-weight:800;font-size:15px;background:linear-gradient(90deg,#4285F4,#EA4335,#FBBC05,#34A853);-webkit-background-clip:text;background-clip:text;color:transparent !important}
.ss-q{font-size:14px !important;color:#33415F !important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ss-n{flex:none;padding:2px 10px;border-radius:999px;background:#14213D;color:#FFD54A !important;font-size:13px !important;font-weight:800}

/* แถบใบประกอบวิชาชีพครูหน้าแรก */
.lic-strip{display:flex;align-items:center;gap:16px;padding:16px 20px;border-radius:20px;background:linear-gradient(120deg,#0F766E,#0EA5A4);color:#fff;text-decoration:none;box-shadow:0 10px 26px -14px #0F766E}
.lic-strip:hover{filter:brightness(1.05);text-decoration:none}
.lic-ic{flex:0 0 56px;width:56px;height:56px;background:#fff;border-radius:16px;display:grid;place-items:center}
.lic-ic svg{width:44px;height:44px}
.lic-tx{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
.lic-tx b{font-size:19px;line-height:1.3}.lic-tx small{opacity:.9;font-size:14px}
.lic-tx .pill{align-self:flex-start;background:#FFD54A;color:#172033;font-size:12px;padding:2px 10px}
.lic-go{flex:0 0 auto;background:#fff;color:#0F766E;font-weight:700;padding:10px 16px;border-radius:999px}
@media (max-width:560px){.lic-go{display:none}.lic-tx b{font-size:17px}}

/* เมนูหลัก: ปุ่มสนามสอบ 2 สี */
.main-nav { align-items: center; }
.nav-tracks { display: flex; gap: 8px; margin-right: 6px; }
.main-nav a.track { display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 9px; border-radius: 14px; border: 1.5px solid transparent; position: relative; line-height: 1.15; }
.track-tx { display: flex; flex-direction: column; }
.track-tx b { font-size: 15px; font-weight: 700; }
.track-tx small { font-size: 11px; font-weight: 600; opacity: .75; letter-spacing: .2px; }
.main-nav a.track-kp { background: #EAF1FF; color: #1E4FC2; border-color: #CFDDFB; }
.main-nav a.track-lic { background: #E3F6F3; color: #0F6B63; border-color: #BFE7E1; }
.main-nav a.track:hover { filter: brightness(.97); color: inherit; }
.main-nav a.track-kp:hover { color: #1E4FC2; } .main-nav a.track-lic:hover { color: #0F6B63; }
.main-nav a.track[aria-current="page"] { border-bottom-color: transparent; color: #fff; }
.main-nav a.track-kp[aria-current="page"] { background: #1F6F5C; border-color: #1F6F5C; box-shadow: 0 6px 16px -8px #1F6F5C; }
.main-nav a.track-lic[aria-current="page"] { background: #0F8F84; border-color: #0F8F84; box-shadow: 0 6px 16px -8px #0F8F84; }
.track-new { position: absolute; top: -7px; right: -6px; background: #FFD54A; color: #172033; font-style: normal; font-size: 10.5px; font-weight: 800; padding: 1px 7px; border-radius: 999px; box-shadow: 0 0 0 2px #fff; }
.main-nav { padding-top: 7px; }
@media (max-width: 1240px) { .main-nav { gap: 4px 16px; } .header-in { gap: 10px 18px; } }
@media (max-width: 800px) { .nav-tracks { gap: 6px; } .main-nav a.track { padding: 5px 10px 5px 8px; } }
/* หัวหน้าใบประกอบ */
.band.lic-band { background: linear-gradient(120deg, #E3F6F3, #F3FBF9 60%, #fff); }
.lic-band h1 { color: #0B4F49; }
.lic-kicker { display: inline-flex; align-items: center; gap: 6px; background: #0F8F84; color: #fff; font-weight: 700; font-size: 13px; padding: 3px 12px; border-radius: 999px; align-self: flex-start; }
.btn.btn-teal { background: #0F8F84; color: #fff; border-color: #0F8F84; }
.btn.btn-teal:hover { background: #0B766D; color: #fff; }
.lic-facts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.lic-facts span { background: #fff; border: 1px solid #BFE7E1; color: #0F6B63; border-radius: 999px; padding: 4px 12px; font-size: 14px; font-weight: 600; }
.lic-sec-h { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 26px 0 12px; }
.lic-sec-h h2 { font-size: 22px; color: #0B4F49; }
.lic-topics { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.lic-topic { display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid #D5EEEA; border-radius: 16px; padding: 12px 14px; text-decoration: none; color: var(--ink); transition: transform .15s, box-shadow .15s; }
.lic-topic:hover { transform: translateY(-2px); box-shadow: 0 10px 22px -14px #0F8F84; text-decoration: none; }
.lic-topic .ic { flex: 0 0 48px; height: 48px; border-radius: 14px; background: #E3F6F3; display: grid; place-items: center; }
.lic-topic .ic svg { width: 38px; height: 38px; }
.lic-topic b { display: block; font-size: 15.5px; line-height: 1.3; }
.lic-topic small { color: var(--muted); font-size: 13px; }
.track-switch { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: #F3FBF9; border: 1px dashed #9ED9D0; border-radius: 16px; padding: 12px 16px; margin-bottom: 18px; }
.track-switch b { color: #0B4F49; }

/* เด็กติว: กลุ่มวิชาในคลังข้อสอบ */
.dt-group { border-top: 1px solid var(--line-2); padding: 6px 0; }
.dt-group summary { cursor: pointer; font-weight: 600; padding: 8px 4px; list-style: none; display: flex; justify-content: space-between; align-items: center; color: var(--ink-strong); }
.dt-group summary::-webkit-details-marker { display: none; }
.dt-group summary::after { content: '+'; font-weight: 400; color: var(--muted-2); margin-left: 8px; }
.dt-group[open] summary::after { content: '−'; }
/* ลายเส้นสมุด (doodle) ในแถบหัวหน้า */
.doodle { position: relative; background-color: #FBFCFD; }
.doodle::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .07; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220' fill='none' stroke='%2314213D' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 30l10 10 18-22'/%3E%3Ccircle cx='160' cy='40' r='14'/%3E%3Cpath d='M150 40h20M160 30v20'/%3E%3Cpath d='M40 150q20-30 40 0t40 0'/%3E%3Cpath d='M170 150l14 24h-28z'/%3E%3Cpath d='M95 95h30M110 80v30'/%3E%3Cpath d='M30 200l8-8M38 200l-8-8'/%3E%3C/svg%3E"); }
.doodle > * { position: relative; }
.hand { font-family: var(--font-hand); color: var(--pen); }
.q-stem, .choice { font-family: var(--font-q); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* ===== หน้าแรกรอบ 4 ===== */
.h4-hero { border-bottom: 1px solid var(--line); overflow: hidden; }
.h4-trail, .h4-plane { position: absolute; left: 0; top: 0; pointer-events: none; }
.h4-plane { offset-path: path("M-40 360 C 220 300, 300 120, 520 140 S 820 330, 1000 210 S 1240 60, 1460 90"); offset-rotate: auto; animation: h4fly 5.5s cubic-bezier(.45,.05,.4,1) .4s both; }
@keyframes h4fly { from { offset-distance: 0%; } to { offset-distance: 100%; } }
.h4-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 56px; align-items: center; padding-top: 72px; padding-bottom: 80px; max-width: 1160px; }
.h4-seg { display: inline-flex; gap: 2px; background: #F1F3F6; border-radius: 10px; padding: 3px; margin-bottom: 28px; }
.h4-seg button { font: inherit; font-size: 15px; font-weight: 600; padding: 8px 18px; min-height: 40px; border: 0; border-radius: 8px; cursor: pointer; background: transparent; color: var(--muted-2); }
.h4-seg button[aria-selected="true"] { background: #fff; color: var(--ink-strong); box-shadow: 0 1px 3px rgba(20,33,61,.15); }
.h4-seg.sm { margin-bottom: 18px; } .h4-seg.sm button { font-size: 14px; padding: 6px 14px; min-height: 34px; }
.h4-h1 { font-size: 50px; font-weight: 700; line-height: 1.22; letter-spacing: -.8px; margin: 0 0 20px; color: var(--ink-strong); }
.h4-sub { font-size: 19px; line-height: 1.75; color: var(--muted); margin: 0 0 32px; max-width: 30em; }
.h4-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 36px; }
.h4-facts { display: flex; flex-wrap: wrap; gap: 28px; margin: 0; padding-top: 24px; border-top: 1px solid var(--line); }
.h4-facts dt { font-size: 14px; color: var(--muted-2); } .h4-facts dd { margin: 2px 0 0; font-weight: 600; color: var(--ink-strong); }
.h4-demo-wrap { min-width: 0; position: relative; padding-top: 104px; }
.h4-mascot { position: absolute; right: 18px; top: 12px; z-index: 2; }
.h4-say { position: absolute; right: 136px; top: 30px; z-index: 2; background: #fff; border: 1px solid var(--line); border-radius: 14px 14px 4px 14px; padding: 7px 12px; font-family: var(--font-hand); font-size: 18px; color: var(--ink-strong); box-shadow: 0 6px 16px -10px rgba(20,33,61,.4); }
.h4-paper { background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); overflow: hidden; }
.h4-paper-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 14px 22px; border-bottom: 1px solid var(--line-2); font-size: 14px; color: var(--muted-2); flex-wrap: wrap; }
.h4-subs { display: flex; gap: 4px; }
.h4-subs button { font: inherit; font-size: 14px; font-weight: 600; padding: 4px 10px; min-height: 32px; border: 0; border-radius: 7px; cursor: pointer; background: transparent; color: var(--muted-2); }
.h4-subs button[aria-selected="true"] { background: var(--ink-strong); color: #fff; }
.h4-lines { padding: 22px 22px 24px; background-image: repeating-linear-gradient(#fff 0 35px, #F3F5F8 35px 36px); }
.h4-stem { font-family: var(--font-q); font-size: 20px; line-height: 1.8; margin: 0 0 18px; color: var(--ink-strong); }
.h4-choices { display: flex; flex-direction: column; gap: 8px; }
.h4-ch { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; font: inherit; font-size: 18px; color: var(--ink-strong); padding: 12px 14px; min-height: 52px; border-radius: 10px; cursor: pointer; background: #fff; border: 0; box-shadow: inset 0 0 0 1px #DDE1E7; transition: background .15s, box-shadow .15s; }
.h4-ch:hover { background: #F6F7F9; }
.h4-ch.right { box-shadow: inset 0 0 0 1.5px var(--ink-strong); }
.h4-ch.wrong { box-shadow: inset 0 0 0 1.5px #E7A3AD; color: var(--muted-2); }
.h4-key { flex: 0 0 30px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 99px; font-size: 15px; font-weight: 600; box-shadow: inset 0 0 0 1.5px #C9CED8; color: var(--muted); }
.h4-ch.picked .h4-key { background: var(--ink-strong); color: #fff; box-shadow: none; }
.h4-tx { font-family: var(--font-q); position: relative; }
.h4-circle { position: absolute; left: -16px; top: -12px; width: calc(100% + 32px); height: 52px; overflow: visible; }
.h4-circle path { stroke-dasharray: 520; animation: h4draw .7s cubic-bezier(.6,0,.3,1) both; }
.h4-tick { margin-left: auto; } .h4-tick path { stroke-dasharray: 60; animation: h4draw .35s cubic-bezier(.6,0,.3,1) .55s both; }
@keyframes h4draw { from { stroke-dashoffset: 520; } to { stroke-dashoffset: 0; } }
.h4-x { margin-left: auto; font-size: 22px; }
.h4-noteRow { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 16px; margin: 18px 0 16px; padding-left: 4px; }
.h4-note { font-size: 22px; line-height: 1.5; margin: 0; animation: h4note .4s ease .8s both; transform-origin: left center; }
@keyframes h4note { from { opacity: 0; transform: translateY(4px) rotate(-1.2deg); } to { opacity: 1; transform: rotate(-1.2deg); } }
.h4-exp { background: #F6F7F9; border-radius: 12px; padding: 14px 16px; font-family: var(--font-q); font-size: 16px; line-height: 1.75; color: #374151; animation: h4exp .45s ease .9s both; }
.h4-exp b { font-family: var(--font); color: var(--ink-strong); }
@keyframes h4exp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.h4-wait { font-size: 14px; color: var(--muted-2); margin: 16px 0 0; }
.h4-bob { animation: h4bob 3.2s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes h4bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.h4-hop { animation: h4hop .55s cubic-bezier(.3,1.6,.5,1) 2; transform-origin: 50% 100%; }
@keyframes h4hop { 0%,100% { transform: translateY(0); } 45% { transform: translateY(-18px) rotate(-6deg); } }
.h4-wig { animation: h4wig .6s ease 1; transform-origin: 50% 100%; }
@keyframes h4wig { 20% { transform: rotate(-8deg); } 40% { transform: rotate(7deg); } 60% { transform: rotate(-5deg); } 80% { transform: rotate(3deg); } }
.h4-sec { max-width: 1160px; padding-top: 88px; padding-bottom: 24px; }
.h4-sec h2, .h4-band h2 { font-size: 34px; font-weight: 700; letter-spacing: -.4px; margin: 0 0 8px; }
.h4-h2s { font-size: 28px !important; margin-bottom: 18px !important; }
.h4-sec-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 28px; }
.h4-sec-head p, .h4-lead { color: var(--muted); font-size: 18px; line-height: 1.75; }
.h4-lead { margin: 0 0 18px; }
.h4-link { color: var(--ink-strong); text-decoration: none; font-weight: 600; background-image: linear-gradient(var(--accent), var(--accent)); background-size: 0% 2px; background-repeat: no-repeat; background-position: 0 100%; transition: background-size .25s ease; }
.h4-link:hover { background-size: 100% 2px; color: var(--ink-strong); }
.h4-table { border-top: 1.5px solid var(--ink-strong); }
.h4-tr { display: grid; grid-template-columns: minmax(0,1.3fr) minmax(0,1.4fr) 160px 150px; gap: 16px; align-items: center; padding: 20px 16px; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--ink-strong); }
.h4-th { padding: 12px 16px; font-size: 14px; color: var(--muted-2); }
.h4-row { transition: background .15s ease; } .h4-row:hover { background: #F6F7F9; color: var(--ink-strong); }
.h4-name { display: flex; align-items: center; gap: 12px; font-size: 20px; font-weight: 600; }
.h4-stk { display: inline-flex; width: 46px; height: 46px; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); align-items: center; justify-content: center; transform: rotate(-5deg); transition: transform .3s cubic-bezier(.3,1.6,.5,1); flex: none; }
.h4-stk svg { width: 34px; height: 34px; }
.h4-row:hover .h4-stk { transform: rotate(4deg) scale(1.08); }
.h4-n { font-size: 16px; color: var(--muted); }
.h4-go-t { display: inline-block; margin-left: 10px; font-size: 14px; font-weight: 600; color: var(--accent); opacity: 0; transform: translateX(-6px); transition: opacity .2s, transform .2s; }
.h4-row:hover .h4-go-t, .h4-row:focus-visible .h4-go-t { opacity: 1; transform: none; }
.h4-wide { max-width: 18em; margin-bottom: 40px !important; }
.h4-three { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 40px; }
.h4-three h3 { font-size: 20px; font-weight: 600; margin: 0 0 8px; }
.h4-three p { line-height: 1.75; color: var(--muted); }
.h4-box { height: 168px; border: 1px solid var(--line); border-radius: 14px; padding: 18px; margin-bottom: 20px; display: flex; flex-direction: column; gap: 10px; justify-content: center; }
.h4-meter { display: flex; justify-content: space-between; align-items: baseline; font-size: 14px; gap: 8px; }
.h4-meter b { color: var(--accent); font-weight: 600; } .h4-meter b.pen { color: var(--pen); }
.h4-bar { height: 6px; background: var(--line-2); border-radius: 9px; overflow: hidden; }
.h4-fill { display: block; height: 100%; background: var(--accent); border-radius: 9px; transform-origin: left; animation: h4fill 1.1s cubic-bezier(.3,1,.4,1) both; }
.h4-fill.red { background: var(--pen); }
@keyframes h4fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@supports (animation-timeline: view()) { .h4-bar .h4-fill { animation-timeline: view(); animation-range: entry 20% cover 40%; } }
.h4-clock { font-size: 26px !important; font-weight: 700 !important; color: var(--ink-strong) !important; font-variant-numeric: tabular-nums; }
.h4-dots { display: grid; grid-template-columns: repeat(10, minmax(0,1fr)); gap: 4px; }
.h4-dots span { height: 16px; border-radius: 4px; background: var(--line-2); }
.h4-dots .d { background: var(--accent); } .h4-dots .c { background: #fff; box-shadow: inset 0 0 0 2px var(--ink-strong); } .h4-dots .f { background: #F2C14E; }
.h4-hintbox { font-family: var(--font-q); font-size: 16px; line-height: 1.6; background: #FFF6D6; border-radius: 10px; padding: 10px 12px; }
.h4-tilt { font-size: 18px; transform: rotate(-2deg); align-self: flex-end; }
.h4-band { background: #F6F7F9; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-top: 88px; }
.h4-two { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 56px; align-items: center; }
.h4-band .h4-two { max-width: 1160px; padding-top: 88px; padding-bottom: 88px; }
.h4-sim { padding: 26px; border-radius: 16px; position: relative; }
.h4-range { width: 100%; accent-color: var(--accent); height: 28px; }
.h4-split { display: flex; height: 44px; border-radius: 10px; overflow: hidden; margin: 14px 0 10px; font-size: 15px; font-weight: 600; }
#h4-pay { background: var(--accent); color: #fff; display: flex; align-items: center; padding-left: 12px; transition: width .25s ease; white-space: nowrap; }
#h4-off { flex-grow: 1; background: repeating-linear-gradient(135deg, #F8D7DC 0 8px, #FCEBEE 8px 16px); color: #B0172E; display: flex; align-items: center; justify-content: flex-end; padding-right: 12px; white-space: nowrap; }
.h4-work { font-family: var(--font-q); background: #F6F7F9; border-radius: 12px; padding: 14px 16px; font-size: 17px; line-height: 1.8; font-variant-numeric: tabular-nums; margin-top: 8px; }
.h4-steps { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; font-size: 15px; font-weight: 600; }
.h4-steps > div { display: flex; align-items: center; gap: 10px; }
.h4-steps > div > span { width: 80px; color: var(--muted-2); font-weight: 500; flex: none; }
.h4-full { flex-grow: 1; height: 34px; background: var(--accent); color: #fff; border-radius: 8px; display: flex; align-items: center; padding-left: 12px; }
.h4-part { flex-grow: 1; height: 34px; display: flex; background: repeating-linear-gradient(135deg, #F8D7DC 0 8px, #FCEBEE 8px 16px); border-radius: 8px; overflow: hidden; }
.h4-part .h4-fill { color: #fff; display: flex; align-items: center; padding-left: 12px; border-radius: 8px 0 0 8px; }
.h4-ul { margin: 0; padding: 0 0 0 20px; line-height: 2; color: #374151; }
.h4-sample { padding: 26px; border-radius: 16px; position: relative; display: flex; flex-direction: column; gap: 10px; }
.h4-q { font-family: var(--font-q); font-size: 18px; line-height: 1.8; } .h4-q.sm { font-size: 16px; color: #374151; } .h4-q.xs { font-size: 15px; color: var(--muted-2); border-top: 1px dashed #D5D9E0; padding-top: 12px; }
.h4-flag { position: absolute; right: 22px; top: 18px; font-size: 20px; transform: rotate(4deg); }
.h4-cal { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.h4-cal > div { padding: 20px 22px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); margin: 0 -1px -1px 0; }
.h4-date { font-size: 22px; font-weight: 700; margin: 4px 0 2px; color: var(--ink-strong); }
.h4-left { font-size: 15px; color: var(--accent); font-weight: 600; }
.h4-parent { border-top: 1px solid var(--line); margin-top: 72px; padding: 72px 0; }
.h4-parent .wrap { max-width: 1160px; }
.h4-parent h3 { font-size: 18px; }
@media (max-width: 900px) {
  .h4-grid, .h4-two { grid-template-columns: minmax(0,1fr); gap: 36px; }
  .h4-grid { padding-top: 40px; padding-bottom: 48px; }
  .h4-three { grid-template-columns: minmax(0,1fr); gap: 28px; }
  .h4-tr { grid-template-columns: minmax(0,1fr) auto; }
  .h4-hide { display: none; }
  .h4-h1 { font-size: 34px; }
  .h4-sec h2, .h4-band h2 { font-size: 27px; }
  .h4-sec { padding-top: 56px; }
  .h4-band { margin-top: 56px; } .h4-band .h4-two { padding-top: 56px; padding-bottom: 56px; }
  .h4-go-t { display: none; }
}
@media (max-width: 480px) { .h4-say { right: 120px; font-size: 16px; } .h4-mascot svg { width: 92px; height: 84px; } .h4-paper-top { padding: 12px 14px; } .h4-lines { padding: 18px 14px; } .h4-ch { font-size: 17px; } }

/* ===== สื่อช่วยติว ===== */
.sim-group { font-size: 24px; margin: 28px 0 14px; }
.sim-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); gap: 20px; }
.sim { padding: 22px; display: flex; flex-direction: column; gap: 12px; border-radius: 16px; min-width: 0; }
.sim-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sim-head h3 { font-size: 19px; margin: 0; }
.sim-badge { font-size: 13px; font-weight: 600; color: var(--accent-dark); background: var(--accent-soft); border-radius: 999px; padding: 3px 10px; }
.sim-r { display: flex; flex-direction: column; gap: 2px; font-size: 15px; }
.sim-r span { display: flex; justify-content: space-between; color: var(--muted); }
.sim-r b { color: var(--ink-strong); font-variant-numeric: tabular-nums; }
.sim-r input { width: 100%; accent-color: var(--accent); height: 28px; }
.sim-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 16px; }
.sim-work { font-family: var(--font-q); background: #F6F7F9; border-radius: 12px; padding: 12px 14px; font-size: 16px; line-height: 1.8; font-variant-numeric: tabular-nums; }
.sim-bars { display: flex; flex-direction: column; gap: 8px; }
.sim-bar { height: 34px; border-radius: 8px; background: repeating-linear-gradient(135deg, #F8D7DC 0 8px, #FCEBEE 8px 16px); overflow: hidden; }
.sim-bar i { display: flex; align-items: center; height: 100%; padding-left: 12px; background: var(--accent); color: #fff; font-style: normal; font-weight: 600; font-size: 14px; white-space: nowrap; transition: width .25s ease; }
.sim-pies { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; text-align: center; }
.sim-pies > div { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.sim-vs { font-size: 34px; font-weight: 700; color: var(--pen); }
.sim-cups { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.sim-center { display: flex; justify-content: center; }
.sim-chain { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.sim-node { font: inherit; border: 0; cursor: pointer; background: var(--c); border-radius: 12px; padding: 8px 10px; display: flex; flex-direction: column; align-items: center; min-width: 74px; box-shadow: inset 0 0 0 1.5px #14213D; position: relative; transition: transform .2s, opacity .2s; }
.sim-node small { font-size: 11px; color: #374151; }
.sim-node.gone { opacity: .25; text-decoration: line-through; }
.sim-node.up { transform: scale(1.12); }
.sim-node.down { transform: scale(.88); opacity: .7; }
.sim-node .hand { position: absolute; top: -18px; font-size: 14px; white-space: nowrap; }
.sim-arrow { color: var(--muted-2); }
.sim-big { display: flex; align-items: baseline; gap: 16px; justify-content: center; padding: 6px 0; }
.sim-big span { font-family: var(--font-q); font-size: 54px; font-weight: 600; color: var(--ink-strong); }
.sim-big b { font-family: var(--font-hand); font-size: 26px; color: var(--pen); font-weight: 400; }
.sim .h4-seg { margin-bottom: 0; flex-wrap: wrap; }
.sim-links { color: var(--muted-2); }
@media (max-width: 480px) { .sim-2 { grid-template-columns: 1fr; } .sim { padding: 16px; } }
.hint2 { margin-top: 6px; } .hint2 > summary { list-style: none; display: inline-block; } .hint2 > summary::-webkit-details-marker { display: none; } .hint2 .hint-box { margin-top: 8px; }

/* ===== ปรับธีมรอบ 4 ทับของเดิม ===== */
.band { background: #FBFCFD; border-bottom: 1px solid var(--line); }
.band.dark { background: #FBFCFD; color: var(--ink); }
.notes { border: 1px solid var(--line); box-shadow: var(--shadow); border-radius: 16px; background: #fff repeating-linear-gradient(#fff 0 35px, #F3F5F8 35px 36px); }
.notes .nb { border-left: 0; background: transparent !important; padding: 8px 2px 4px; }
.notes .nb li::before { content: ''; width: 14px; height: 14px; top: 6px; background: none; border: 2px solid var(--accent); border-radius: 4px; }
.notes .nb:nth-of-type(2) h3 { color: var(--pen); font-family: var(--font-hand); font-weight: 400; font-size: 21px !important; }
.notes .nb:nth-of-type(2) li::before { border-color: var(--pen); border-radius: 50%; }
.notes .nb li { font-family: var(--font-q); }

/* ===== เมนูเลือกสนามสอบ ===== */
.nv-drop { position: relative; }
.nv-drop > summary { list-style: none; cursor: pointer; }
.nv-drop > summary::-webkit-details-marker { display: none; }
.nv-caret { transition: transform .2s; }
.nv-drop[open] .nv-caret { transform: rotate(180deg); }
.nv-panel { position: absolute; top: calc(100% + 10px); left: -8px; width: 560px; background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 24px 48px -20px rgba(20,33,61,.35); padding: 16px; z-index: 50; }
.nv-panel-h { font-size: 14px; color: var(--muted-2); margin: 0 0 10px; }
.nv-tracks { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.nv-track { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 12px; background: var(--soft); text-decoration: none; border-left: 5px solid var(--c1); transition: transform .15s; }
.nv-track:hover { transform: translateX(3px); }
.nv-track b { font-size: 18px; color: var(--c1); }
.nv-track span { font-size: 13px; color: var(--muted); }
.nv-all { display: block; margin-top: 10px; font-size: 14px; font-weight: 600; color: var(--accent); text-decoration: none; }
@media (max-width: 1080px) {
  .nv-panel { position: static; width: auto; box-shadow: none; border: 0; padding: 4px 0 8px 8px; }
}

/* ===== กริดเลือกคลังข้อสอบ (หน้าแรก) ===== */
.tk-sec { border-bottom: 1px solid var(--line); padding: 36px 0 44px; }
.tk-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 20px; margin-bottom: 20px; }
.tk-head h1 { font-size: 38px; letter-spacing: -.5px; margin: 0; }
.tk-head p { color: var(--muted); font-size: 17px; margin: 0; }
.tk-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.tk-card { display: flex; flex-direction: column; border-radius: 18px; overflow: hidden; text-decoration: none; background: #fff; box-shadow: 0 1px 0 var(--line), 0 14px 30px -22px rgba(20,33,61,.5); outline: 1.5px solid var(--line); transition: transform .2s cubic-bezier(.3,1.5,.5,1), box-shadow .2s; }
.tk-card:hover { transform: translateY(-4px); box-shadow: 0 22px 40px -22px rgba(20,33,61,.55); }
.tk-card:focus-visible { outline: 3px solid var(--c1); }
.tk-top { position: relative; display: flex; align-items: center; justify-content: space-between; padding: 20px 20px 18px; background: linear-gradient(135deg, var(--c1), var(--c2)); color: #fff; min-height: 96px; }
.tk-top::after { content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.18) 1.5px, transparent 1.6px); background-size: 14px 14px; pointer-events: none; }
.tk-name { font-size: 34px; font-weight: 700; letter-spacing: -.5px; line-height: 1.1; position: relative; z-index: 1; }
.tk-stk { width: 64px; height: 64px; background: #fff; border-radius: 18px; display: inline-flex; align-items: center; justify-content: center; transform: rotate(-6deg); position: relative; z-index: 1; flex: none; box-shadow: 0 6px 12px rgba(0,0,0,.15); transition: transform .3s cubic-bezier(.3,1.6,.5,1); }
.tk-stk svg { width: 48px; height: 48px; }
.tk-card:hover .tk-stk { transform: rotate(5deg) scale(1.08); }
.tk-body { display: flex; flex-direction: column; gap: 3px; padding: 14px 20px 18px; background: var(--soft); flex: 1; }
.tk-body b { font-size: 18px; color: var(--ink-strong); }
.tk-meta { font-size: 14px; color: var(--muted); }
.tk-go { margin-top: 8px; align-self: flex-start; font-weight: 700; color: #fff; background: var(--c1); border-radius: 999px; padding: 6px 16px; font-size: 15px; }
@media (max-width: 900px) { .tk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .tk-head h1 { font-size: 30px; } }
@media (max-width: 520px) {
  .tk-sec { padding: 24px 0 32px; }
  .tk-top { padding: 14px; min-height: 74px; }
  .tk-name { font-size: 24px; }
  .tk-stk { width: 44px; height: 44px; border-radius: 13px; } .tk-stk svg { width: 34px; height: 34px; }
  .tk-body { padding: 10px 14px 14px; } .tk-body b { font-size: 15px; } .tk-meta { font-size: 12.5px; }
  .tk-go { font-size: 13px; padding: 5px 12px; }
}

/* ===== หน้ารวมสนามสอบ ===== */
.tk-hero { background: var(--soft); border-bottom: 4px solid var(--c1); }
.tk-hero-in { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: 36px; padding-bottom: 36px; }
.tk-hero h1 { font-size: 46px; color: var(--c1); letter-spacing: -.6px; margin: 0; }
.tk-lead { font-size: 17px; line-height: 1.8; color: #374151; }
.tk-facts { display: flex; flex-wrap: wrap; gap: 8px; }
.tk-facts span { background: #fff; border-radius: 999px; padding: 6px 14px; font-size: 15px; box-shadow: inset 0 0 0 1px var(--line); }
.tk-facts b { color: var(--c1); }
.tk-btn { background: var(--c1); color: #fff; border: 0; }
.tk-btn:hover { filter: brightness(1.08); color: #fff; }
.tk-hero-stk { width: 150px; height: 150px; background: #fff; border-radius: 34px; display: inline-flex; align-items: center; justify-content: center; transform: rotate(-6deg); flex: none; box-shadow: 0 14px 30px -14px rgba(20,33,61,.4); }
.tk-hero-stk svg { width: 112px; height: 112px; }
.tk-h2 { font-size: 26px; margin: 28px 0 14px; }
.tk-sets { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 12px; }
.tk-set { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1.5px var(--line); text-decoration: none; color: var(--ink-strong); transition: box-shadow .15s, transform .15s; }
.tk-set:hover { box-shadow: inset 0 0 0 2px var(--accent); transform: translateY(-2px); color: var(--ink-strong); }
.tk-set-go { align-self: flex-start; margin-top: 6px; font-weight: 700; font-size: 14px; color: var(--accent); }
.tk-subj { margin-bottom: 22px; }
.tk-subj h3 { font-size: 19px; margin: 0 0 10px; padding-left: 10px; border-left: 4px solid var(--accent); }
.tk-topics { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr)); gap: 10px; }
.tk-topic { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); text-decoration: none; color: var(--ink-strong); transition: background .15s; }
.tk-topic:hover { background: #F6F7F9; color: var(--ink-strong); }
.tk-topic b { display: block; font-size: 16px; font-weight: 600; line-height: 1.4; }
.tk-tstk { width: 44px; height: 44px; flex: none; display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; background: #F6F7F9; transform: rotate(-5deg); }
.tk-tstk svg { width: 34px; height: 34px; }
@media (max-width: 700px) { .tk-hero h1 { font-size: 32px; } .tk-hero-stk { display: none; } .tk-hero-in { padding-top: 24px; padding-bottom: 24px; } }
.sim-read { font-family: var(--font-q); font-size: 72px; font-weight: 600; text-align: center; color: var(--ink-strong); padding: 18px 0; letter-spacing: 1px; }
.sim-text { font-family: var(--font-q); font-size: 24px; line-height: 2.1; }
.sim-w { font: inherit; border: 0; background: transparent; padding: 0 4px; border-radius: 8px; cursor: pointer; color: var(--ink-strong); }
.sim-w:disabled { cursor: default; color: var(--ink-strong); }
.sim-w.bad { background: #FCE4E8; color: var(--pen); text-decoration: underline wavy var(--pen); }
@media (max-width: 480px) { .sim-read { font-size: 56px; } .sim-text { font-size: 21px; } }
.tk-setgroup { margin-bottom: 18px; }
.tk-setgroup h3 { font-size: 18px; margin: 0 0 10px; padding-left: 10px; border-left: 4px solid var(--accent); }
.tk-setgroup .tk-sets { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.tk-set b { font-size: 18px; }
@media (max-width: 520px) {
  .tk-name { font-size: 21px; white-space: nowrap; }
  .tk-top { gap: 6px; }
  .tk-stk { width: 38px; height: 38px; border-radius: 11px; } .tk-stk svg { width: 29px; height: 29px; }
}

/* =====================================================================
   ธีมรอบ 5 (15 พ.ย. 2569): สมุดติว — กระดาษนวล แผงสีหมึก ปากกาแดง ปุ่มเหลืองนูน
   ชั้นนี้อยู่ท้ายไฟล์ ทับสไตล์เดิมทั้งเว็บ
   ===================================================================== */
:root {
  --paper: #F6F5F0; --paper-2: #EFEDE5; --night: #161D2E; --night-2: #222B40;
  --sun: #FFD43B; --sun-ledge: #D9A600; --pen: #E5484D;
  --ink: #1C2333; --ink-strong: #121826; --navy: #121826; --muted: #4F5666; --muted-2: #6B7180;
  --line: #E3E1D8; --line-2: #ECEAE2; --bg: var(--paper);
  --accent: #161D2E; --accent-dark: #000; --accent-soft: #FFF3BF;
  --radius: 22px;
  --shadow: 0 1px 0 rgba(18,24,38,.04), 0 22px 44px -30px rgba(18,24,38,.35);
  --font: 'Anuphan', 'IBM Plex Sans Thai', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --t-bio: #E3F1E4; --t-chem: #ECE8FB; --t-phy: #E2EEF8; --t-earth: #FBE7E0; --t-think: #FFF4CF;
}
body { background: var(--paper); background-image: radial-gradient(rgba(18,24,38,.07) 1px, transparent 1.2px); background-size: 22px 22px; color: var(--ink); letter-spacing: -.003em; }
h1, h2, h3 { font-family: var(--font); font-weight: 700; letter-spacing: -.015em; color: var(--ink-strong); }
a { color: var(--ink-strong); }
:focus-visible { outline: 3px solid #4D96FF; }
.doodle { background-color: transparent; }
.doodle::before { display: none; }

/* ปุ่ม: เม็ดยานูน กดแล้วยุบ */
.btn { border-radius: 999px; font-weight: 700; transition: transform .12s, box-shadow .12s, background .15s; }
.btn-primary { background: var(--night); color: #fff; box-shadow: 0 3px 0 #000, 0 12px 22px -14px rgba(0,0,0,.6); }
.btn-primary:hover { background: #000; color: #fff; }
.btn-primary:active, .btn-sun:active, .btn-yellow:active { transform: translateY(3px); box-shadow: 0 0 0 transparent; }
.btn-sun, .btn-yellow { background: var(--sun); color: var(--ink-strong); box-shadow: 0 4px 0 var(--sun-ledge), 0 14px 26px -14px rgba(217,166,0,.75); }
.btn-sun:hover, .btn-yellow:hover { background: #FFDB57; color: var(--ink-strong); }
.btn-ghost { background: #fff; border: 1.5px solid #D9D6CB; color: var(--ink-strong); box-shadow: 0 2px 0 #D9D6CB; }
.btn-ghost:hover { border-color: var(--ink-strong); color: var(--ink-strong); }
.btn-onnight { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,.35); }
.btn-onnight:hover { border-color: #fff; color: #fff; background: rgba(255,255,255,.06); }
.btn .go { width: 26px; height: 26px; border-radius: 50%; background: var(--night); color: var(--sun); display: inline-flex; align-items: center; justify-content: center; margin-right: -8px; }
.btn-primary .go { background: var(--sun); color: var(--night); }
.btn-lg { padding: 15px 28px; font-size: 18px; border-radius: 999px; }
.card { border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.empty { border-radius: var(--radius); }

/* แถบเมนูลอย */
.site-header { background: transparent; border-bottom: 0; backdrop-filter: none; -webkit-backdrop-filter: none; padding-top: 12px; pointer-events: none; }
.site-header .header-in { pointer-events: auto; background: rgba(255,255,255,.92); backdrop-filter: saturate(1.4) blur(12px); -webkit-backdrop-filter: saturate(1.4) blur(12px); border-radius: 999px; height: 66px; gap: 14px; padding-left: 18px; padding-right: 10px; box-shadow: 0 1px 0 rgba(18,24,38,.05), 0 0 0 1px var(--line), 0 16px 34px -24px rgba(18,24,38,.4); max-width: 1240px; }
.site-header .wrap.header-in { margin: 0 auto; width: calc(100% - 32px); }
.main-nav { gap: 4px; }
.main-nav .nv { border-radius: 999px; padding: 8px 14px 8px 8px; font-weight: 500; }
.main-nav .nv svg { background: #F3F1EA; border-radius: 50%; padding: 3px; width: 30px; height: 30px; }
.main-nav .nv:hover { background: #F3F1EA; }
.main-nav .nv[aria-current="page"], .nv-drop[open] > .nv { background: var(--sun); color: var(--ink-strong); font-weight: 700; box-shadow: 0 3px 0 var(--sun-ledge); }
.main-nav .nv[aria-current="page"] svg { background: #fff; }
.nv-dark-group { display: inline-flex; gap: 6px; margin-left: 8px; }
.nv-dark { display: inline-flex; align-items: center; gap: 7px; background: var(--night); color: #fff; text-decoration: none; font-weight: 700; font-size: 15px; border-radius: 999px; padding: 7px 14px 7px 8px; white-space: nowrap; box-shadow: 0 3px 0 #000; transition: transform .12s; }
.nv-dark svg { background: #fff; border-radius: 50%; padding: 2px; width: 26px; height: 26px; flex: none; }
.nv-dark:hover { color: var(--sun); transform: translateY(-1px); }
.nv-dark[aria-current="page"] { color: var(--sun); }
.auth-slot .btn { min-height: 46px; }
.auth-slot .btn-primary { padding: 8px 18px; }
@media (max-width: 1240px) { .nv-dark span { display: none; } .nv-dark { padding: 7px; } }
@media (max-width: 1080px) {
  .site-header .header-in { border-radius: 22px; }
  .main-nav { top: 76px; border-radius: 22px; border: 1px solid var(--line); margin: 0 8px; }
  .nv-dark-group { flex-direction: column; margin: 8px 0 0; }
  .nv-dark span { display: inline; } .nv-dark { padding: 9px 14px 9px 9px; }
}
@media (max-width: 600px) { .site-header { padding-top: 8px; } .site-header .header-in { height: 58px; width: calc(100% - 16px); padding-left: 12px; } }

/* ปากกาแดงวงคำสำคัญ */
.pen-mark { position: relative; display: inline-block; white-space: nowrap; z-index: 0; }
.pen-mark::after { content: ''; position: absolute; left: -6%; right: -6%; top: -12%; bottom: -18%; z-index: -1; pointer-events: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 100' preserveAspectRatio='none' fill='none' stroke='%23E5484D' stroke-width='5' stroke-linecap='round'%3E%3Cpath d='M40 84C10 70 6 30 60 16 120 2 230 4 272 26c30 16 26 50-14 60-60 14-170 12-226-6'/%3E%3C/svg%3E") center/100% 100% no-repeat; }
.pen-under { position: relative; white-space: nowrap; }
.pen-under::after { content: ''; position: absolute; left: 0; right: 0; bottom: -.12em; height: .32em; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 20' preserveAspectRatio='none' fill='none' stroke='%23E5484D' stroke-width='5' stroke-linecap='round'%3E%3Cpath d='M4 13C50 5 120 4 196 9'/%3E%3C/svg%3E") center/100% 100% no-repeat; }

/* แผงสีหมึก */
.night { position: relative; background: radial-gradient(55% 80% at 92% 0%, rgba(255,212,59,.26), transparent 60%), radial-gradient(45% 70% at 0% 100%, rgba(77,150,255,.22), transparent 62%), radial-gradient(35% 50% at 55% 110%, rgba(229,72,77,.16), transparent 60%), var(--night); color: #E9ECF3; border-radius: 32px; overflow: hidden; isolation: isolate; }
.night::before { content: ''; position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(rgba(255,255,255,.08) 1px, transparent 1.2px); background-size: 22px 22px; }
.night h1, .night h2, .night h3 { color: #fff; }
.chip-dot { display: inline-flex; align-items: center; gap: 8px; padding: 7px 16px; border-radius: 999px; font-size: 15px; font-weight: 600; background: rgba(255,255,255,.07); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); color: #fff; }
.chip-dot::before { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--sun); box-shadow: 0 0 0 4px rgba(255,212,59,.2); }
.chip-ink { display: inline-flex; align-items: center; padding: 6px 16px; border-radius: 999px; background: var(--night); color: var(--sun); font-weight: 700; font-size: 15px; }

/* หน้าแรก: hero */
.v5-hero { padding: 22px 0 8px; }
.v5-hero-in { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 36px; align-items: center; padding: 54px 56px; }
.v5-h1 { font-size: clamp(36px, 5.2vw, 64px); line-height: 1.12; margin: 18px 0 16px; letter-spacing: -.025em; }
.v5-h1 .pen-mark { color: #fff; }
.v5-lead { font-size: 18px; line-height: 1.75; color: #C9CFDB; max-width: 34em; }
.v5-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.v5-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 30px; max-width: 520px; }
.v5-stats div { background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); border-radius: 18px; padding: 12px 14px; }
.v5-stats b { display: block; font-size: 26px; color: #fff; line-height: 1.1; font-variant-numeric: tabular-nums; }
.v5-stats span { font-size: 13.5px; color: #AEB6C6; }
.v5-shot { position: relative; background: var(--paper); color: var(--ink); border-radius: 26px; padding: 18px; box-shadow: 0 30px 60px -30px rgba(0,0,0,.7), 0 0 0 6px rgba(255,255,255,.06); transform: rotate(1.2deg); }
.v5-shot-bar { display: flex; align-items: center; gap: 6px; margin-bottom: 12px; }
.v5-shot-bar i { width: 10px; height: 10px; border-radius: 50%; background: #E5484D; } .v5-shot-bar i:nth-child(2) { background: #FCC419; } .v5-shot-bar i:nth-child(3) { background: #51CF66; }
.v5-shot-bar span { margin-left: 8px; font-size: 12.5px; color: var(--muted-2); background: #fff; border-radius: 999px; padding: 2px 12px; }
.v5-shot-tag { position: absolute; top: -14px; right: 22px; background: var(--sun); color: var(--ink-strong); font-weight: 700; font-size: 13px; border-radius: 999px; padding: 4px 12px; box-shadow: 0 3px 0 var(--sun-ledge); transform: rotate(3deg); }
.v5-mini-map { width: 100%; height: auto; display: block; }
.v5-shot-foot { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.v5-shot-foot span { font-size: 12.5px; background: #fff; border-radius: 999px; padding: 3px 10px; box-shadow: inset 0 0 0 1px var(--line); }
@media (max-width: 960px) { .v5-hero-in { grid-template-columns: 1fr; padding: 36px 26px; } .v5-shot { transform: none; } }
@media (max-width: 520px) { .v5-hero { padding-top: 14px; } .v5-hero .wrap { padding-left: 10px; padding-right: 10px; } .v5-hero-in { padding: 30px 20px 22px; border-radius: 26px; gap: 26px; } .v5-lead { font-size: 16px; } .v5-stats b { font-size: 20px; } .v5-stats div { padding: 10px; } .v5-cta .btn { flex: 1 1 auto; } }

/* กริดคลังข้อสอบ แบบรอบ 5 */
.tk-sec { border-bottom: 0; padding: 44px 0 36px; }
.tk-head h1, .tk-head h2 { font-size: 36px; }
.tk-card { border-radius: 26px; outline: 0; box-shadow: 0 0 0 1px var(--line), 0 18px 36px -28px rgba(18,24,38,.45); background: #fff; }
.tk-card:hover { box-shadow: 0 0 0 1.5px var(--c1), 0 26px 44px -26px rgba(18,24,38,.5); }
.tk-top { background: var(--soft); color: var(--ink-strong); min-height: 108px; padding: 22px 22px 16px; }
.tk-top::after { background-image: radial-gradient(rgba(18,24,38,.09) 1.2px, transparent 1.4px); }
.tk-top::before { content: ''; position: absolute; right: -40px; bottom: -70px; width: 190px; height: 190px; border-radius: 50%; background: var(--c1); opacity: .12; }
.tk-name { font-size: 34px; color: var(--c1); }
.tk-stk { box-shadow: 0 0 0 1px rgba(18,24,38,.06), 0 8px 16px -6px rgba(18,24,38,.25); }
.tk-body { background: #fff; padding: 16px 22px 20px; gap: 4px; }
.tk-go { background: var(--night); color: #fff; padding: 8px 18px; box-shadow: 0 3px 0 #000; margin-top: 10px; }
.tk-card:hover .tk-go { background: var(--c1); box-shadow: 0 3px 0 rgba(0,0,0,.35); }

/* หัวข้อส่วน */
.v5-sec-h { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px 24px; margin-bottom: 22px; }
.v5-sec-h h2 { font-size: clamp(28px, 3.6vw, 44px); line-height: 1.2; }
.v5-sec-h p { color: var(--muted); max-width: 36em; }

/* footer / tabbar */
.site-footer { background: #fff; border-top: 0; border-radius: 32px 32px 0 0; box-shadow: 0 -1px 0 var(--line); }
.tabbar { border-radius: 22px 22px 0 0; }
.tabbar a[aria-current="page"] { color: var(--ink-strong); }
.tabbar a[aria-current="page"] svg { background: var(--sun); border-radius: 12px; box-shadow: 0 2px 0 var(--sun-ledge); }
@media (prefers-reduced-motion: reduce) { .btn, .nv-dark, .tk-card { transition: none; } }
.v5-shot, .v5-shot:hover { text-decoration: none; color: var(--ink); }
.main-nav .nv svg.nv-caret { background: none; padding: 0; width: 14px; height: 14px; }
.main-nav .nv { padding: 7px 12px 7px 7px; }
@media (max-width: 1400px) and (min-width: 1081px) { .nv-dark:nth-child(3) span { display: none; } .nv-dark:nth-child(3) { padding: 7px; } }
/* หน้าแรกส่วนล่าง ปรับเข้าธีมรอบ 5 */
.h4-hero { border-bottom: 0; }
.h4-h1 { font-size: 40px; }
.h4-paper { border-radius: 24px; }
.h4-three > div:nth-child(1) .h4-box { background: var(--t-bio); }
.h4-three > div:nth-child(2) .h4-box { background: var(--t-phy); }
.h4-three > div:nth-child(3) .h4-box { background: var(--t-think); }
.h4-box { border: 0 !important; border-radius: 24px !important; box-shadow: none !important; }
.h4-band { background: transparent !important; border: 0 !important; }
.h4-sim.card, .h4-band .card { border-radius: 26px; }
@media (max-width: 600px) { .h4-h1 { font-size: 30px; } }
/* ===== แผนที่ความรู้ /map ===== */
.mp-wrap { position: relative; }
.mp-top { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding-top: 18px; padding-bottom: 12px; position: relative; z-index: 3; }
.mp-title { padding: 16px 20px; flex: 0 1 330px; }
.mp-title h1 { font-size: 26px; }
.mp-legend { display: flex; gap: 12px; flex-wrap: wrap; font-size: 13px; color: var(--muted); margin-top: 6px; }
.mp-legend i { display: inline-block; width: 11px; height: 11px; border-radius: 50%; border: 3px solid; margin-right: 5px; vertical-align: -1px; }
.lg-good { border-color: #F2B705; } .lg-weak { border-color: #E5484D; } .lg-new { border-color: #C9C6BC; }
.mp-tracks, .mp-views { display: flex; flex-wrap: wrap; gap: 6px; background: #fff; padding: 6px; border-radius: 999px; box-shadow: 0 0 0 1px var(--line), var(--shadow); }
.mp-tracks button, .mp-views button { border: 0; background: transparent; border-radius: 999px; padding: 8px 14px; font-weight: 600; cursor: pointer; color: var(--muted); }
.mp-tracks button[aria-selected="true"] { background: var(--soft); color: var(--c); box-shadow: inset 0 0 0 2px var(--c); }
.mp-views { margin-left: auto; }
.mp-views button[aria-selected="true"] { background: var(--night); color: #fff; }
.mp-stage { position: relative; height: calc(100vh - 190px); min-height: 560px; margin: 0 16px; border-radius: 32px; background: radial-gradient(50% 50% at 50% 50%, rgba(255,212,59,.18), transparent 70%), #FBFAF6; box-shadow: 0 0 0 1px var(--line); overflow: hidden; }
.mp-svg { width: 100%; height: 100%; display: block; cursor: grab; touch-action: none; user-select: none; font-family: var(--font); }
.mp-svg:active { cursor: grabbing; }
.mp-node { cursor: pointer; transition: opacity .2s; }
.mp-node:hover > circle:nth-child(2), .mp-node:focus-visible > circle:nth-child(2) { stroke: #FFD43B; }
.mp-node:focus { outline: none; }
.mp-node.dim { opacity: .45; }
.mp-lab { paint-order: stroke; stroke: #FBFAF6; stroke-width: 5px; stroke-linejoin: round; }
.mp-leaf { animation: mpIn .35s cubic-bezier(.3,1.4,.5,1) both; }
@keyframes mpIn { from { opacity: 0; transform: translateY(6px); } }
.mp-zoom { position: absolute; right: 16px; bottom: 16px; display: flex; flex-direction: column; background: #fff; border-radius: 16px; box-shadow: 0 0 0 1px var(--line), var(--shadow); overflow: hidden; }
.mp-zoom button { width: 46px; height: 44px; border: 0; background: #fff; font-size: 22px; cursor: pointer; }
.mp-zoom button + button { border-top: 1px solid var(--line); }
.mp-tip { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); background: var(--night); color: #fff; font-size: 14px; font-weight: 600; padding: 9px 18px; border-radius: 999px; pointer-events: none; white-space: nowrap; }
.mp-stat { position: absolute; left: 16px; bottom: 16px; width: 300px; padding: 16px 18px; }
.mp-big { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.mp-big b { font-size: 40px; line-height: 1; }
.mp-big span { font-size: 14px; color: var(--muted); }
.mp-bar { display: grid; grid-template-columns: 96px 1fr 28px; align-items: center; gap: 8px; font-size: 13.5px; margin: 5px 0; }
.mp-bar i { height: 8px; border-radius: 99px; background: var(--bg); overflow: hidden; }
.mp-bar em { display: block; height: 100%; background: var(--c); border-radius: 99px; min-width: 6px; }
.mp-bar b { text-align: right; }
.mp-panel { position: fixed; right: 16px; top: 96px; bottom: 16px; width: 400px; z-index: 40; background: #fff; border-radius: 28px; box-shadow: 0 0 0 1px var(--line), 0 30px 60px -30px rgba(18,24,38,.45); display: flex; flex-direction: column; overflow: hidden; }
.mp-p-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 6px; }
.mp-p-tabs { display: flex; background: var(--paper); border-radius: 999px; padding: 4px; }
.mp-p-tabs button { border: 0; background: transparent; padding: 7px 16px; border-radius: 999px; font-weight: 600; cursor: pointer; color: var(--muted); }
.mp-p-tabs button[aria-selected="true"] { background: var(--sun); color: var(--ink-strong); box-shadow: 0 2px 0 var(--sun-ledge); }
.mp-x { border: 0; background: var(--paper); width: 38px; height: 38px; border-radius: 50%; cursor: pointer; font-size: 16px; }
.mp-p-body { padding: 8px 22px 16px; overflow: auto; flex: 1; }
.mp-crumb span { display: inline-block; font-size: 13px; font-weight: 700; border-radius: 999px; padding: 3px 12px; }
.mp-p-body h2 { font-size: 26px; line-height: 1.25; margin: 10px 0 10px; }
.mp-p-body h3 { font-size: 16px; margin: 18px 0 8px; }
.mp-p-lv { display: flex; align-items: center; gap: 10px; background: var(--paper); border-radius: 16px; padding: 10px 14px; }
.mp-p-lv b { font-size: 28px; line-height: 1; }
.mp-p-lv span { font-size: 14px; color: var(--muted); }
.lv-good b, b.lv-good, .ls-ring.lv-good { color: #B88A00; } .lv-weak b, b.lv-weak { color: #D9363C; } .lv-mid b, b.lv-mid { color: #2B3550; } .lv-new b, b.lv-new { color: #9C998F; }
.mp-keys { margin: 0; padding: 0; list-style: none; counter-reset: k; display: flex; flex-direction: column; gap: 8px; }
.mp-keys li { counter-increment: k; position: relative; padding: 2px 0 2px 38px; line-height: 1.6; }
.mp-keys li::before { content: counter(k); position: absolute; left: 0; top: 2px; width: 26px; height: 26px; border-radius: 9px; background: #FFF3BF; color: #8A6500; font-weight: 700; font-size: 14px; display: flex; align-items: center; justify-content: center; }
.mp-warn { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.mp-warn li { background: #FFF1F1; border-radius: 12px; padding: 8px 12px 8px 34px; position: relative; line-height: 1.55; font-size: 15px; }
.mp-warn li::before { content: '!'; position: absolute; left: 11px; top: 8px; width: 16px; height: 16px; border-radius: 50%; background: var(--pen); color: #fff; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.mp-intro { color: var(--muted); line-height: 1.7; }
.mp-qc { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mp-qc div { background: var(--paper); border-radius: 14px; padding: 10px; text-align: center; }
.mp-qc b { display: block; font-size: 22px; } .mp-qc span { font-size: 13px; color: var(--muted); }
.mp-p-foot { display: flex; gap: 8px; flex-wrap: wrap; padding: 14px 18px 18px; border-top: 1px solid var(--line-2); }
.mp-p-foot .btn { flex: 1 1 auto; }
body.mp-mapview .site-footer, body.mp-mapview .tabbar { }
/* ตามความพร้อม */
.mp-ready { padding-top: 8px; padding-bottom: 40px; }
.rd-top h2, .rd-empty h2 { font-size: 28px; margin-bottom: 14px; }
.rd-empty { padding: 26px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; margin-bottom: 18px; }
.rd-top { margin-bottom: 22px; }
.rd-top-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.rd-top-card { position: relative; display: flex; flex-direction: column; gap: 6px; background: #fff; border-radius: 24px; padding: 18px 20px; text-decoration: none; color: var(--ink); box-shadow: 0 0 0 1px var(--line), var(--shadow); }
.rd-top-card:first-child { background: #FFF4CF; }
.rd-top-card b { font-size: 21px; }
.rd-n { position: absolute; right: 18px; top: 8px; font-size: 54px; font-weight: 700; color: rgba(18,24,38,.07); line-height: 1; }
.rd-go { font-size: 14px; font-weight: 700; }
.rd-bar { display: block; height: 8px; background: rgba(18,24,38,.08); border-radius: 99px; overflow: hidden; }
.rd-bar em { display: block; height: 100%; border-radius: 99px; background: #C9C6BC; }
.rd-bar em.lv-good { background: #F2B705; } .rd-bar em.lv-mid { background: #2B3550; } .rd-bar em.lv-weak { background: #E5484D; }
.rd-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, .9fr); gap: 14px; align-items: start; }
.rd-col { border-radius: 26px; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.rd-col h3 { font-size: 18px; } .rd-col h3 small { font-weight: 500; color: var(--muted); font-size: 14px; }
.rd-new { background: #fff; box-shadow: 0 0 0 1px var(--line); }
.rd-card { text-align: left; border: 0; background: #fff; border-radius: 18px; padding: 12px 14px; display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; cursor: pointer; box-shadow: 0 1px 0 rgba(18,24,38,.05); font: inherit; color: var(--ink); }
.rd-card.on { box-shadow: 0 0 0 2.5px var(--night); }
.rd-sub { grid-column: 1; font-size: 12.5px; color: var(--muted); display: flex; align-items: center; gap: 6px; } .rd-sub i { width: 8px; height: 8px; border-radius: 50%; }
.rd-name { grid-column: 1; font-weight: 700; line-height: 1.35; }
.rd-pc { grid-column: 2; grid-row: 1 / 3; align-self: center; font-size: 26px; } .rd-pc small { font-size: 14px; }
.rd-card .rd-bar { grid-column: 1 / 3; margin-top: 6px; }
.rd-new .rd-card { background: var(--paper); }
/* รายการ */
.mp-list { padding-top: 6px; padding-bottom: 40px; display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; align-items: start; }
.ls-sub { background: #fff; border-radius: 26px; padding: 18px; box-shadow: 0 0 0 1px var(--line), var(--shadow); }
.ls-sub h2 { font-size: 20px; display: flex; align-items: center; gap: 8px; margin-bottom: 8px; } .ls-sub h2 i { width: 12px; height: 12px; border-radius: 50%; }
.ls-t { border-top: 1px solid var(--line-2); }
.ls-t summary { display: flex; align-items: center; gap: 10px; padding: 11px 2px; cursor: pointer; list-style: none; }
.ls-t summary::-webkit-details-marker { display: none; }
.ls-ring { width: 38px; height: 38px; border-radius: 50%; border: 4px solid #C9C6BC; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; flex: none; }
.ls-ring.lv-good { border-color: #F2B705; } .ls-ring.lv-weak { border-color: #E5484D; color: #D9363C; } .ls-ring.lv-mid { border-color: #2B3550; }
.ls-name { flex: 1; font-weight: 600; line-height: 1.35; }
.ls-lv { font-size: 12.5px; border-radius: 999px; padding: 2px 10px; background: var(--paper); color: var(--muted); white-space: nowrap; }
.ls-lv.lv-weak { background: #FFF1F1; color: #D9363C; } .ls-lv.lv-good { background: #FFF4CF; color: #8A6500; }
.ls-body { padding: 4px 0 14px; display: flex; flex-direction: column; gap: 10px; }
@media (max-width: 1100px) { .rd-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mp-panel { width: 360px; } }
@media (max-width: 760px) {
  .mp-title { flex: 1 1 100%; } .mp-views { margin-left: 0; }
  .mp-tracks { flex-wrap: nowrap; overflow-x: auto; max-width: 100%; border-radius: 22px; }
  .mp-tracks button { white-space: nowrap; }
  .mp-stage { margin: 0 8px; height: 66vh; border-radius: 24px; }
  .mp-stat { display: none; }
  .mp-tip { font-size: 12.5px; bottom: 12px; left: 12px; transform: none; white-space: normal; max-width: 60%; }
  .mp-panel { left: 0; right: 0; top: auto; bottom: 0; width: auto; max-height: 82vh; border-radius: 26px 26px 0 0; }
  .rd-top-grid, .rd-cols { grid-template-columns: 1fr; }
}

.mp-top { position: absolute; top: 16px; left: 32px; right: 32px; z-index: 3; padding: 0; pointer-events: none; align-items: flex-start; max-width: none; }
.mp-top > * { pointer-events: auto; }
.mp-title .mp-views { margin: 10px 0 0; box-shadow: none; background: var(--paper); padding: 4px; }
.mp-title .mp-views button { padding: 6px 12px; font-size: 14px; }
.mp-stage { height: calc(100vh - 96px); min-height: 600px; margin-top: 6px; }
.mp-wrap.is-other .mp-top { position: relative; top: 0; left: 0; right: 0; padding: 18px 16px 12px; }
@media (max-width: 760px) { .mp-top { position: relative; top: 0; left: 0; right: 0; padding: 12px 8px 10px; } .mp-stage { height: 64vh; min-height: 420px; } }
/* ===== พิมพ์ชุดฝึก /print ===== */
.pr-wrap { padding-top: 18px; padding-bottom: 40px; }
.pr-hero { padding: 34px 40px; margin-bottom: 16px; }
.pr-hero h1 { font-size: 40px; margin: 14px 0 8px; } .pr-hero p { color: #C9CFDB; max-width: 46em; line-height: 1.7; }
.pr-form { display: grid; grid-template-columns: 2fr 1fr 1fr auto; gap: 12px 16px; align-items: end; margin-bottom: 18px; }
.pr-form label { display: flex; flex-direction: column; gap: 6px; font-weight: 600; font-size: 15px; }
.pr-form select, .pr-check input { min-height: 46px; border-radius: 14px; border: 1.5px solid #D9D6CB; padding: 8px 12px; background: #fff; }
.pr-chk { flex-direction: row !important; align-items: center; gap: 8px !important; padding-bottom: 12px; }
.pr-actions { grid-column: 1 / -1; display: flex; gap: 10px; flex-wrap: wrap; }
.ps-toolbar { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; background: #fff; border-radius: 20px; padding: 12px 16px; box-shadow: 0 0 0 1px var(--line); margin-bottom: 14px; position: sticky; top: 86px; z-index: 5; }
.ps-toolbar b { margin-right: auto; }
.ps-page { background: #fff; color: #111; max-width: 820px; margin: 0 auto 18px; padding: 34px 40px; border-radius: 6px; box-shadow: 0 0 0 1px var(--line), 0 18px 40px -26px rgba(0,0,0,.35); font-size: 15px; }
.ps-head { display: flex; justify-content: space-between; gap: 16px; border-bottom: 2px solid #111; padding-bottom: 10px; margin-bottom: 14px; }
.ps-head > div:first-child { display: flex; flex-direction: column; } .ps-head b { font-size: 18px; }
.ps-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; font-size: 13.5px; }
.ps-meta code { font-size: 12px; background: #F3F1EA; padding: 1px 6px; border-radius: 4px; }
.ps-qs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.ps-q { break-inside: avoid; }
.ps-stem { white-space: pre-line; line-height: 1.6; font-family: var(--font-q); }
.ps-ch { list-style: none; margin: 6px 0 0 22px; padding: 0; display: grid; grid-template-columns: 1fr; gap: 3px; font-family: var(--font-q); }
.ps-ch.short { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ps-ch span { font-weight: 700; }
.ps-lines i { display: block; border-bottom: 1px dotted #888; height: 26px; margin-left: 22px; }
.ps-note { font-size: 13.5px; color: #444; margin: 6px 0 12px; }
.ps-sheet { position: relative; display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px 40px; padding: 26px 30px; border: 1.5px solid #111; border-radius: 6px; }
.ps-mk { position: absolute; width: 14px; height: 14px; background: #111; } .ps-mk.tl { left: 6px; top: 6px; } .ps-mk.tr { right: 6px; top: 6px; } .ps-mk.bl { left: 6px; bottom: 6px; } .ps-mk.br { right: 6px; bottom: 6px; }
.ps-row { display: flex; align-items: center; gap: 10px; break-inside: avoid; } .ps-row b { width: 26px; text-align: right; }
.ps-row i { width: 24px; height: 24px; border: 1.5px solid #111; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-style: normal; font-size: 12px; color: #666; }
.ps-open { font-size: 12.5px; color: #666; }
.ps-key { margin: 0; padding-left: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; font-size: 14px; line-height: 1.55; }
.pr-check h2 { font-size: 26px; margin-bottom: 4px; }
.pr-bub { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; }
.pr-brow { display: flex; align-items: center; gap: 6px; background: var(--paper); border-radius: 14px; padding: 6px 10px; }
.pr-brow b { width: 26px; }
.pr-brow button { width: 38px; height: 38px; border-radius: 50%; border: 1.5px solid #B8B5AA; background: #fff; font-weight: 700; cursor: pointer; }
.pr-brow button[aria-pressed="true"] { background: var(--night); color: #fff; border-color: var(--night); }
.pr-brow.ok { background: #E3F1E4; } .pr-brow.no { background: #FFF1F1; }
.pr-brow.no button.key { box-shadow: 0 0 0 3px #2F9E44; }
.pr-result { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 14px; background: #FFF4CF; border-radius: 18px; padding: 14px 18px; }
.pr-result b { font-size: 34px; }
@media (max-width: 760px) { .pr-form { grid-template-columns: 1fr 1fr; } .pr-form label:first-child { grid-column: 1 / -1; } .ps-page { padding: 20px 16px; } .ps-ch.short { grid-template-columns: repeat(2, 1fr); } .ps-sheet { grid-template-columns: 1fr; } .pr-hero { padding: 26px 22px; } .pr-hero h1 { font-size: 30px; } }
@media print {
  @page { size: A4; margin: 12mm; }
  body { background: #fff !important; }
  .site-header, .site-footer, .tabbar, .no-print, #toast { display: none !important; }
  .pr-wrap { padding: 0; max-width: none; }
  .ps-page { box-shadow: none; border-radius: 0; padding: 0; margin: 0; max-width: none; }
  .ps-break { break-before: page; }
}
/* ===== รอบ 5.1: แนว 3 มิติ มันเงา ===== */
.g3i { display: inline-flex; width: 34px; height: 34px; flex: none; filter: drop-shadow(0 2px 2px rgba(18,24,38,.18)); transition: transform .3s cubic-bezier(.3,1.7,.5,1); }
.g3i svg, .g3logo svg, [data-g3] svg { width: 100%; height: 100%; display: block; }
.main-nav .nv:hover .g3i, .nv-dark:hover .g3i { transform: translateY(-2px) rotate(-6deg) scale(1.1); }
.nv-dark .g3i { width: 28px; height: 28px; background: rgba(255,255,255,.1); border-radius: 50%; }
.main-nav .nv { padding-left: 6px; }
.g3logo { display: inline-flex; width: 46px; height: 46px; filter: drop-shadow(0 3px 3px rgba(18,24,38,.2)); }
.logo:hover .g3logo { transform: rotate(-6deg); transition: transform .3s; }
/* ปุ่มเงานูน */
.btn-sun, .btn-yellow { background: linear-gradient(180deg, #FFE36E 0%, #FFD43B 45%, #F7C21A 100%); box-shadow: inset 0 1.5px 0 rgba(255,255,255,.8), inset 0 -2px 0 rgba(170,120,0,.25), 0 4px 0 var(--sun-ledge), 0 14px 24px -12px rgba(217,166,0,.8); text-shadow: 0 1px 0 rgba(255,255,255,.5); }
.btn-primary, .tk-go, .nv-dark, .auth-slot .btn-primary { background: linear-gradient(180deg, #34405C 0%, #1B2338 55%, #121826 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 3px 0 #05070C, 0 12px 22px -12px rgba(0,0,0,.6); }
.btn-ghost { background: linear-gradient(180deg, #fff, #F6F4EE); box-shadow: inset 0 1px 0 #fff, 0 3px 0 #D9D6CB, 0 10px 18px -14px rgba(18,24,38,.35); }
.btn-onnight { background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.04)); box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 3px 0 rgba(0,0,0,.35); }
.btn .go { box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 2px 4px rgba(0,0,0,.25); }
/* การ์ดนูน */
.card, .tk-card, .mp-title, .mp-tracks, .rd-top-card, .ls-sub, .mp-panel { background-image: linear-gradient(180deg, #FFFFFF 0%, #FCFBF8 100%); box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgba(18,24,38,.07), 0 2px 0 rgba(18,24,38,.05), 0 24px 40px -28px rgba(18,24,38,.45); border-color: transparent; }
.tk-stk { background: transparent; box-shadow: none; width: 84px; height: 84px; transform: rotate(-4deg) translateY(4px); filter: drop-shadow(0 6px 8px rgba(18,24,38,.18)); }
.tk-stk svg { width: 84px; height: 84px; }
.tk-card:hover .tk-stk { transform: rotate(4deg) translateY(-2px) scale(1.08); }
.tk-top { background: linear-gradient(160deg, #fff 0%, var(--soft) 70%); }
.tk-hero-stk { background: transparent; box-shadow: none; width: 170px; height: 170px; filter: drop-shadow(0 16px 18px rgba(18,24,38,.25)); }
/* hero: วัตถุลอย */
.v5-hero-in { position: relative; }
.v5-float { position: absolute; pointer-events: none; filter: drop-shadow(0 14px 14px rgba(0,0,0,.35)); animation: v5Bob 5s ease-in-out infinite; }
.v5-float svg { width: 100%; height: 100%; display: block; }
.v5-f1 { width: 120px; height: 120px; right: 38%; bottom: 18px; animation-delay: -1s; }
.v5-f2 { width: 74px; height: 74px; right: 3%; top: 18px; animation-delay: -2.5s; }
.v5-f3 { width: 70px; height: 70px; right: 41%; top: 26px; animation-delay: -.5s; opacity: .95; }
.v5-mascot { position: absolute; width: 150px; height: 150px; right: 30px; bottom: -10px; filter: drop-shadow(0 18px 18px rgba(0,0,0,.4)); animation: v5Bob 4.2s ease-in-out infinite; z-index: 2; pointer-events: none; }
@keyframes v5Bob { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-10px) rotate(3deg); } }
@media (max-width: 960px) { .v5-f1, .v5-f3 { display: none; } .v5-mascot { width: 96px; height: 96px; right: 14px; bottom: auto; top: 20px; } }
@media (prefers-reduced-motion: reduce) { .v5-float, .v5-mascot { animation: none; } }
/* กรอบข้อความนูน (ป้าย/ชิป) */
.chip-dot { background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.04)); box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 0 0 1px rgba(255,255,255,.1), 0 6px 14px -8px rgba(0,0,0,.6); }
.v5-stats div { background: linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,.03)); box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 0 0 1px rgba(255,255,255,.08); }
.v5-shot { box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgba(255,255,255,.4), 0 6px 0 #C9C3B3, 0 40px 60px -30px rgba(0,0,0,.8); }
.v5-shot-tag { background: linear-gradient(180deg, #FFE36E, #F7C21A); box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 3px 0 var(--sun-ledge); }
.mp-tracks button[aria-selected="true"] { background: linear-gradient(180deg, #fff, var(--soft)); box-shadow: inset 0 0 0 2px var(--c), 0 3px 0 var(--c); }
.mp-views button[aria-selected="true"], .mp-title .mp-views button[aria-selected="true"] { background: linear-gradient(180deg, #34405C, #121826); box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 2px 0 #000; }
.night { box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 30px 60px -30px rgba(18,24,38,.7); }
.main-nav .nv .g3i svg { background: none; padding: 0; width: 100%; height: 100%; border-radius: 0; }
.main-nav .nv .g3i { width: 32px; height: 32px; background: linear-gradient(180deg, #fff, #F1EEE6); border-radius: 50%; box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(18,24,38,.15); padding: 3px; }
.main-nav .nv { font-size: 15.5px; gap: 7px; padding: 6px 11px 6px 5px; }
.nv-dark-group { gap: 5px; margin-left: 4px; }
.nv-dark { font-size: 14.5px; padding: 5px 12px 5px 5px; }
.site-header .header-in { gap: 10px; }
.main-nav .nv .g3i { background: none; box-shadow: none; padding: 0; width: 36px; height: 36px; }
.nv-dark .g3i { background: none; width: 30px; height: 30px; }
/* แถบความคืบหน้าแบบนูน */
.rd-bar, .mp-bar i, .progress, .h4-bar, .cl-miss { background: linear-gradient(180deg, #E4E0D6, #EFECE4) !important; box-shadow: inset 0 1px 2px rgba(18,24,38,.15); border-radius: 99px; }
.rd-bar em, .mp-bar em, .progress > div, .h4-fill, .cl-miss i { position: relative; border-radius: 99px; background-image: linear-gradient(180deg, rgba(255,255,255,.45), rgba(255,255,255,0) 55%, rgba(0,0,0,.12)) !important; box-shadow: 0 1px 2px rgba(18,24,38,.2); }
.rd-bar em.lv-good, .h4-fill { background-color: #F2B705; } .rd-bar em.lv-weak, .h4-fill.red, .cl-miss i { background-color: #E5484D; } .rd-bar em.lv-mid { background-color: #2B3550; } .rd-bar em.lv-new { background-color: #C9C6BC; }
.mp-bar em { background-color: var(--c); }
.progress > div { background-color: #F2B705; }
.rd-bar, .rd-card .rd-bar { height: 10px; }
.rd-pc { text-shadow: 0 1px 0 #fff; }
/* ===== ห้องเรียน /class และควิซสด /quiz ===== */
.cl-wrap, .qz-wrap { padding-top: 18px; padding-bottom: 44px; }
.cl-hero, .qz-hero { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 34px 40px; margin-bottom: 16px; }
.cl-hero h1, .qz-hero h1 { font-size: clamp(30px, 4vw, 44px); margin: 14px 0 8px; } .cl-hero p, .qz-hero p { color: #C9CFDB; max-width: 44em; line-height: 1.7; }
.cl-hero-art { width: 130px; height: 130px; flex: none; filter: drop-shadow(0 14px 16px rgba(0,0,0,.4)); }
.cl-tabs { display: inline-flex; gap: 6px; padding: 6px; background: #fff; border-radius: 999px; box-shadow: 0 0 0 1px var(--line), var(--shadow); margin-bottom: 16px; }
.cl-tabs button { display: inline-flex; align-items: center; gap: 8px; border: 0; background: transparent; padding: 6px 16px 6px 6px; border-radius: 999px; font-weight: 700; cursor: pointer; color: var(--muted); }
.cl-tabs button[aria-selected="true"] { background: linear-gradient(180deg, #FFE36E, #F7C21A); color: var(--ink-strong); box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 3px 0 var(--sun-ledge); }
.cl-grid { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: 16px; align-items: start; }
.cl-join, .qz-new, .qz-join { display: flex; flex-direction: column; gap: 12px; padding: 24px; }
.cl-join h2 { font-size: 24px; }
.cl-join label, .qz-new label, .qz-join label, .cl-form label { display: flex; flex-direction: column; gap: 6px; font-weight: 600; font-size: 15px; }
.cl-join input, .cl-form input, .cl-form select, .qz-new select, .qz-join input { min-height: 48px; border-radius: 14px; border: 1.5px solid #D9D6CB; padding: 8px 14px; background: #fff; box-shadow: inset 0 2px 3px rgba(18,24,38,.06); font-size: 17px; }
.cl-steps { margin: 0; padding-left: 20px; color: var(--muted); line-height: 1.8; font-size: 15px; }
.cl-class { padding: 18px; margin-bottom: 12px; }
.cl-class-h { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; } .cl-class-h .g3i { width: 44px; height: 44px; } .cl-class-h h3 { font-size: 20px; }
.cl-task { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 12px 14px; border-radius: 16px; background: var(--paper); text-decoration: none; color: var(--ink); margin-top: 8px; box-shadow: inset 0 1px 0 #fff, 0 2px 0 #E3DFD4; }
.cl-task span { font-size: 13.5px; color: var(--muted); } .cl-task em { grid-row: 1 / 3; grid-column: 2; align-self: center; font-style: normal; font-weight: 700; color: var(--pen); }
.cl-task.done em { color: #1E8C55; }
.cl-do { padding: 24px; } .cl-do-h h2 { font-size: 26px; margin: 4px 0; }
.cl-qs { list-style: none; padding: 0; margin: 18px 0; display: flex; flex-direction: column; gap: 18px; counter-reset: q; }
.cl-q { counter-increment: q; border-top: 1px solid var(--line-2); padding-top: 14px; } .cl-q > .q-stem::before { content: counter(q) '. '; font-weight: 700; }
.cl-ch { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.cl-ch .choice[aria-pressed="true"] { border-color: var(--night); background: #FFF8DB; }
.cl-login { padding: 32px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; max-width: 520px; margin: 0 auto; }
.cl-big-art { display: block; width: 110px; height: 110px; margin: 0 auto 4px; filter: drop-shadow(0 10px 12px rgba(18,24,38,.25)); }
.cl-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.cl-ccard { display: flex; flex-direction: column; gap: 4px; padding: 18px; text-decoration: none; color: var(--ink); } .cl-ccard .g3i { width: 50px; height: 50px; } .cl-ccard b { font-size: 20px; }
.cl-cnum em { font-style: normal; font-weight: 800; }
.cl-room { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 28px 34px; margin-bottom: 14px; flex-wrap: wrap; }
.cl-room h2 { font-size: 34px; margin: 6px 0 10px; } .cl-back { color: #AEB6C6; text-decoration: none; font-size: 14px; }
.cl-code { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: rgba(255,255,255,.07); box-shadow: inset 0 1px 0 rgba(255,255,255,.15); border-radius: 18px; padding: 8px 10px 8px 16px; }
.cl-code span { font-size: 13px; color: #AEB6C6; } .cl-code b { font-size: 24px; letter-spacing: .08em; color: var(--sun); }
.cl-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
.cl-stats > div { position: relative; border-radius: 24px; padding: 16px 18px; overflow: hidden; box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 2px 0 rgba(18,24,38,.06); }
.cl-stats .g3i { width: 46px; height: 46px; position: absolute; right: 12px; top: 12px; }
.cl-stats small { display: block; color: var(--muted); font-size: 14px; font-weight: 600; } .cl-stats b { display: block; font-size: 36px; line-height: 1.15; } .cl-stats em { font-style: normal; font-size: 13px; color: var(--muted); }
.cl-two { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.cl-two .card { padding: 20px; } .cl-two h3 { font-size: 19px; margin-bottom: 10px; }
.cl-form { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 10px; align-items: end; } .cl-form label:first-child { grid-column: 1 / -1; } .cl-form .btn { grid-column: 1 / -1; }
.cl-trow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 0; border-top: 1px solid var(--line-2); } .cl-trow > div { flex: 1 1 200px; display: flex; flex-direction: column; }
.cl-pill { font-size: 13px; font-weight: 700; border-radius: 999px; padding: 3px 10px; background: var(--paper); } .cl-pill.bad { background: #FFF1F1; color: #D9363C; }
.cl-weak { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--line-2); }
.cl-miss { grid-column: 1 / -1; height: 10px; display: block; overflow: hidden; } .cl-miss i { display: block; height: 100%; }
.cl-weak em { font-style: normal; font-size: 13px; color: var(--muted); grid-column: 1 / -1; }
.cl-mem { display: flex; flex-direction: column; } .cl-mem > div { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-top: 1px solid var(--line-2); } .cl-mem b { flex: 1; }
.cl-dot { font-size: 12.5px; border-radius: 999px; padding: 2px 10px; background: #FFF1F1; color: #D9363C; } .cl-dot.ok { background: #E3F1E4; color: #1E8C55; }
.qz-new { flex-direction: row; flex-wrap: wrap; align-items: end; } .qz-new label { flex: 1 1 200px; }
.qz-join { max-width: 440px; margin: 10px auto; text-align: center; } .qz-join h1 { font-size: 32px; } .qz-join input[name="pin"] { font-size: 30px; text-align: center; letter-spacing: .2em; font-weight: 800; }
.qz-host { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 14px; }
.qz-bar { grid-column: 1 / -1; display: flex; align-items: center; gap: 24px; padding: 20px 28px; flex-wrap: wrap; }
.qz-pin { font-size: 52px; font-weight: 800; letter-spacing: .08em; color: var(--sun); line-height: 1.1; text-shadow: 0 3px 0 rgba(0,0,0,.4); }
.qz-meta { flex: 1; display: flex; flex-direction: column; } .qz-meta b { font-size: 22px; color: #fff; } .qz-meta span { color: #AEB6C6; }
.qz-lobby { grid-column: 1 / -1; padding: 24px; } .qz-names { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.qz-names span { background: linear-gradient(180deg, #fff, #F3F0E8); box-shadow: inset 0 1px 0 #fff, 0 2px 0 #DDD8CB; border-radius: 999px; padding: 8px 16px; font-weight: 700; animation: mpIn .4s both; }
.qz-q, .qz-board { padding: 22px; }
.qz-qtop { display: flex; justify-content: space-between; align-items: center; color: var(--muted); margin-bottom: 8px; }
.qz-count { min-width: 56px; height: 56px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 24px; font-weight: 800; color: var(--ink-strong); background: radial-gradient(circle at 35% 30%, #FFF6BF, #F2A900); box-shadow: inset 0 -3px 0 rgba(0,0,0,.15), 0 4px 0 #C98A00; padding: 0 10px; }
.qz-stem { font-family: var(--font-q); font-size: 24px; line-height: 1.55; white-space: pre-line; margin: 6px 0 16px; font-weight: 600; }
.qz-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.qz-opt { position: relative; display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-radius: 20px; color: #fff; font-size: 20px; font-weight: 700; background: linear-gradient(180deg, color-mix(in srgb, var(--c) 82%, #fff), var(--c)); box-shadow: inset 0 1.5px 0 rgba(255,255,255,.4), 0 5px 0 color-mix(in srgb, var(--c) 70%, #000); overflow: hidden; }
.qz-opt i { position: absolute; left: 0; bottom: 0; height: 6px; background: rgba(255,255,255,.8); }
.qz-opt.dim { opacity: .4; } .qz-opt.right { outline: 4px solid #FFD43B; }
.qz-l { width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,.25); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.qz-t { flex: 1; } .qz-n { font-size: 26px; }
.qz-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line-2); } .qz-row b { flex: 1; } .qz-row em { font-style: normal; font-weight: 800; }
.qz-rk { width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; background: var(--paper); }
.qz-rk.r1 { background: radial-gradient(circle at 35% 30%, #FFF0A0, #E8A100); } .qz-rk.r2 { background: radial-gradient(circle at 35% 30%, #fff, #B9BFCC); } .qz-rk.r3 { background: radial-gradient(circle at 35% 30%, #FFD9B8, #C8762E); }
.qz-me { display: flex; justify-content: space-between; align-items: center; background: #fff; border-radius: 18px; padding: 10px 16px; box-shadow: 0 0 0 1px var(--line); margin-bottom: 12px; }
.qz-play { max-width: 640px; margin: 0 auto; }
.qz-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.qz-btns button { display: flex; align-items: center; gap: 10px; text-align: left; min-height: 92px; border: 0; border-radius: 22px; padding: 14px; color: #fff; font: inherit; font-size: 18px; font-weight: 700; cursor: pointer; background: linear-gradient(180deg, color-mix(in srgb, var(--c) 82%, #fff), var(--c)); box-shadow: inset 0 1.5px 0 rgba(255,255,255,.4), 0 6px 0 color-mix(in srgb, var(--c) 70%, #000); transition: transform .1s; }
.qz-btns button:active { transform: translateY(4px); box-shadow: 0 2px 0 color-mix(in srgb, var(--c) 70%, #000); }
.qz-btns button:disabled { opacity: .45; } .qz-btns button.on { opacity: 1; outline: 4px solid #FFD43B; }
.qz-sent { text-align: center; font-weight: 700; margin-top: 14px; }
.qz-wait, .qz-res { max-width: 520px; margin: 0 auto; text-align: center; padding: 30px; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.qz-res.ok { background: linear-gradient(180deg, #F2FBF4, #fff); } .qz-res.no { background: linear-gradient(180deg, #FFF5F5, #fff); }
@media (max-width: 900px) { .cl-grid, .cl-two, .qz-host { grid-template-columns: 1fr; } .cl-stats { grid-template-columns: repeat(2, 1fr); } .cl-hero-art { display: none; } }
@media (max-width: 600px) { .qz-opts, .qz-btns { grid-template-columns: 1fr; } .qz-pin { font-size: 40px; } .cl-room h2 { font-size: 26px; } .cl-hero, .qz-hero { padding: 26px 22px; } }
/* ===== ห้องแล็บ 3 มิติ /lab ===== */
.lab-wrap { padding-top: 18px; padding-bottom: 44px; }
.lab-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.lab-head h1 { font-size: clamp(30px, 4vw, 44px); margin: 10px 0 6px; } .lab-head p { max-width: 46em; }
.lab-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 14px; align-items: start; }
.lab-stage { position: relative; height: min(70vh, 640px); min-height: 440px; padding: 0; }
.lab-stage canvas { width: 100%; height: 100%; display: block; cursor: grab; touch-action: none; }
.lab-stage canvas:active { cursor: grabbing; }
.lab-cam { position: absolute; top: 14px; left: 14px; display: flex; gap: 6px; flex-wrap: wrap; }
.lab-cam button, .lab-jumps button { border: 0; border-radius: 999px; padding: 7px 14px; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.lab-cam button { background: rgba(255,255,255,.1); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.2); }
.lab-cam button:hover { background: rgba(255,255,255,.2); }
.lab-ctrl { position: absolute; left: 14px; right: 14px; bottom: 14px; display: flex; align-items: center; gap: 12px; background: rgba(10,14,24,.6); backdrop-filter: blur(8px); border-radius: 18px; padding: 10px 14px; color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.15); }
.lab-ctrl input { flex: 1; accent-color: #FFD43B; }
.lab-side { display: flex; flex-direction: column; gap: 12px; }
.lab-inset { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 18px; text-align: center; background: radial-gradient(80% 60% at 50% 35%, #2A3350, #121826) !important; color: #E9ECF3; }
.lab-inset h3 { color: #fff; font-size: 17px; } .lab-inset b { color: #fff; font-size: 18px; } .lab-inset .muted { color: #AEB6C6 !important; }
.lab-inset canvas { width: 180px; height: 180px; }
.lab-inset .chip-ink { background: var(--sun); color: var(--ink-strong); }
.lab-hide canvas, .lab-hide b, .lab-hide .chip-ink, .lab-hide .small { filter: blur(10px); }
.lab-ecl { background: rgba(229,72,77,.18); color: #FFD0D2; border-radius: 12px; padding: 8px 10px; font-size: 14px; }
.lab-jump, .lab-q { padding: 16px; } .lab-jump h3, .lab-q h3 { font-size: 16px; margin-bottom: 8px; }
.lab-jumps { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.lab-jumps button { background: linear-gradient(180deg, #fff, #F3F0E8); box-shadow: inset 0 1px 0 #fff, 0 2px 0 #DDD8CB; }
.lab-chk { display: flex; gap: 6px; align-items: flex-start; margin-top: 10px; color: var(--muted); }
.lm-opts { display: flex; flex-direction: column; gap: 6px; margin: 8px 0; }
.lm-opts button { text-align: left; border: 1.5px solid #D9D6CB; background: #fff; border-radius: 14px; padding: 9px 12px; font: inherit; cursor: pointer; }
.lm-opts button.ok { border-color: #1E8C55; background: #E3F1E4; } .lm-opts button.no { border-color: #E5484D; background: #FFF1F1; }
.lm-fb { font-size: 14px; min-height: 1.4em; }
.lab-more { margin-top: 26px; } .lab-more h2 { font-size: 24px; margin-bottom: 12px; }
.lab-rooms { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.lab-room { display: flex; flex-direction: column; gap: 6px; background: #fff; border-radius: 22px; padding: 16px; box-shadow: 0 0 0 1px var(--line); opacity: .85; }
.lab-room span { width: 56px; height: 56px; } .lab-room em { font-style: normal; font-size: 13px; color: var(--muted); }
@media (max-width: 900px) { .lab-grid { grid-template-columns: 1fr; } .lab-rooms { grid-template-columns: 1fr 1fr; } .lab-stage { height: 56vh; min-height: 360px; } }
/* หัวเว็บตอนเข้าสู่ระบบ: ซ่อนปุ่มสนามเล่นบนจอกลาง */
@media (max-width: 1400px) and (min-width: 1081px) { .nv-dark:nth-child(3) { display: none; } }
.tk-btn { background: linear-gradient(180deg, color-mix(in srgb, var(--c1) 80%, #fff), var(--c1)); box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 3px 0 color-mix(in srgb, var(--c1) 65%, #000), 0 12px 20px -12px var(--c1); }
.tk-hero { background: linear-gradient(160deg, #fff, var(--soft) 60%); }
/* แผนที่: หลายมุมมอง */
.mp-title .mp-views { flex-wrap: wrap; border-radius: 18px; }
.mp-title { flex-basis: 380px; }
.mp-wsub button[aria-selected="true"] { background: linear-gradient(180deg, #fff, var(--soft)); color: var(--c); box-shadow: inset 0 0 0 2px var(--c), 0 3px 0 var(--c); }
.mp-wsub[hidden] { display: none; }
.n3-spin { transform-box: fill-box; transform-origin: center; animation: n3spin 24s linear infinite; }
@keyframes n3spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .n3-spin { animation: none; } }
.mp-path { padding-top: 8px; padding-bottom: 40px; display: flex; flex-direction: column; gap: 14px; }
.pt-row { background: linear-gradient(180deg, #fff, #FCFBF8); border-radius: 26px; padding: 16px 18px 8px; box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgba(18,24,38,.07), 0 24px 40px -30px rgba(18,24,38,.45); }
.pt-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .pt-head h2 { font-size: 20px; }
.pt-dot { width: 12px; height: 12px; border-radius: 50%; }
.pt-scroll { overflow-x: auto; overscroll-behavior-x: contain; padding-bottom: 6px; scrollbar-width: thin; }
.pt-scroll svg { display: block; font-family: var(--font); }
.pt-scroll .mp-node { cursor: pointer; }
.pt-scroll .mp-node:hover { filter: brightness(1.04) drop-shadow(0 4px 6px rgba(18,24,38,.15)); }
.pt-scroll svg { max-width: none; }
.lab-gl { position: absolute; inset: 0; display: block; }
.lab-stage.is-3d #lm-cv { position: relative; z-index: 1; background: transparent; }
.lab-stage.is-3d { background: radial-gradient(70% 60% at 30% 50%, #10182C, #05080F); }
.lab-stage.is-3d::before { display: none; }
.lab-cam, .lab-ctrl { z-index: 2; }
/* หัวหน้าทุกหน้า (.band) แบบแผงสีหมึก + ไอคอน 3 มิติ */
.band, .band.dark { background: transparent !important; border-bottom: 0 !important; padding: 18px 0 6px; }
.band::before { display: none !important; }
.band > .band-in { position: relative; overflow: hidden; isolation: isolate; border-radius: 30px; padding: 34px 190px 30px 40px !important; color: #E9ECF3; max-width: calc(1240px - 48px); width: calc(100% - 32px); margin: 0 auto;
  background: radial-gradient(55% 90% at 95% 0%, rgba(255,212,59,.24), transparent 60%), radial-gradient(45% 80% at 0% 100%, rgba(77,150,255,.2), transparent 62%), var(--night);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 30px 60px -34px rgba(18,24,38,.7); align-items: center; }
.band > .band-in::before { content: ''; position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(rgba(255,255,255,.08) 1px, transparent 1.2px); background-size: 22px 22px; }
.band h1, .band.dark h1 { color: #fff; }
.band p, .band .muted, .band.dark p { color: #C3CADA !important; }
.band a:not(.btn) { color: #FFE08A; }
.band .btn-ghost { background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.04)); color: #fff; border-color: rgba(255,255,255,.3); box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 3px 0 rgba(0,0,0,.35); }
.band .crumbs, .band .crumbs a { color: #AEB6C6; }
.band-art { position: absolute; right: 34px; top: 50%; width: 132px; height: 132px; transform: translateY(-50%) rotate(-5deg); filter: drop-shadow(0 16px 16px rgba(0,0,0,.45)); pointer-events: none; }
.band .seg, .band [role="tablist"] { position: relative; z-index: 1; }
@media (max-width: 760px) { .band > .band-in { padding: 26px 22px 22px !important; border-radius: 24px; width: calc(100% - 16px); } .band-art { width: 70px; height: 70px; right: 14px; top: 18px; transform: rotate(-5deg); } .band h1 { padding-right: 70px; } }
.topic-sticker.g3s, .cover-sticker.g3s { background: none !important; box-shadow: none !important; border: 0 !important; filter: drop-shadow(0 8px 10px rgba(0,0,0,.25)); }
.topic-sticker.g3s svg, .cover-sticker.g3s svg { width: 100%; height: 100%; }
.set-cover.themed { background-blend-mode: soft-light; }
.rs-map { gap: 14px; }
.rs-weak { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.rs-weak .rd-top-card b { font-size: 18px; }
.rs-map .pt-scroll a { cursor: pointer; }
@media (max-width: 760px) { .rs-weak { grid-template-columns: 1fr; } }
/* ตัวเลือกคำตอบและกระดาษคำตอบแบบนูน */
.choice { border-radius: 18px !important; background: linear-gradient(180deg, #fff, #FBFAF6) !important; box-shadow: inset 0 1px 0 #fff, 0 2px 0 #E3DFD4; transition: transform .1s, box-shadow .1s; }
.choice:hover:not([disabled]) { transform: translateY(-1px); box-shadow: inset 0 1px 0 #fff, 0 4px 0 #D9D4C6; }
.choice[aria-pressed="true"], .choice.sel, .choice.selected { background: linear-gradient(180deg, #FFF8DB, #FFF1B8) !important; border-color: #E0B000 !important; box-shadow: inset 0 1px 0 #fff, 0 3px 0 #D9A600; }
.choice.right { background: linear-gradient(180deg, #F0FAF2, #DDF3E2) !important; box-shadow: inset 0 1px 0 #fff, 0 3px 0 #9FD5AE; }
.choice.wrong { background: linear-gradient(180deg, #FFF5F5, #FFE3E4) !important; box-shadow: inset 0 1px 0 #fff, 0 3px 0 #F0A8AA; }
.choice .b { background: radial-gradient(circle at 35% 30%, #fff, #ECE8DE); box-shadow: inset 0 -1px 0 rgba(0,0,0,.08); }
.sheet-grid button, .ans-grid button, .grid-q button { background: radial-gradient(circle at 35% 30%, #fff, #ECE8DE) !important; box-shadow: inset 0 -2px 0 rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.08); }
.big-score { font-size: 64px !important; text-shadow: 0 2px 0 #fff; }
.meter .track { background: linear-gradient(180deg, #E4E0D6, #EFECE4); box-shadow: inset 0 1px 2px rgba(18,24,38,.15); border-radius: 99px; }
.meter .fill { background-image: linear-gradient(180deg, rgba(255,255,255,.45), rgba(255,255,255,0) 55%, rgba(0,0,0,.12)) !important; border-radius: 99px; }
.meter .line { left: 50% !important; }
.meter .lbl { left: 50% !important; transform: translateX(-50%); }

/* =====================================================================
   ธีม 6 "ดินปั้นนุ่ม" (เลือก 15 พ.ย. 2569 15:21) ฟ้าอ่อน น้ำเงินสด พีช มิ้นต์ ม่วง ผิวด้าน ไม่มีพื้นดำ
   ===================================================================== */
:root {
  --bg: #EEF4FF; --paper: #EEF4FF; --ink: #1F2B4D; --ink-strong: #17213D; --navy: #17213D; --muted: #5D6787; --muted-2: #7A83A0;
  --line: #E1E8F7; --line-2: #EAF0FB; --card: #FFFFFF;
  --blue: #4F7CFF; --blue-d: #3A63E0; --blue-s: #DCE6FF; --peach: #FF8A5C; --peach-s: #FFE9E0; --mint: #2FB58C; --mint-s: #DDF6EE; --lav: #8B6CF0; --lav-s: #EEE8FF; --sun: #FFC857; --sun-ledge: #E8A92A; --pen: #F2604A;
  --accent: #4F7CFF; --accent-dark: #3A63E0; --accent-soft: #DCE6FF; --night: #4F7CFF;
  --shadow: 0 18px 36px -26px rgba(40,70,160,.45);
  --clay: inset 0 -5px 0 rgba(31,43,77,.06), 0 18px 36px -26px rgba(40,70,160,.5);
}
body { background: var(--bg) !important; background-image: none !important; color: var(--ink); }
a { color: var(--blue-d); }
/* หัวเว็บ: แถบขาวลอย มุมโค้ง */
.site-header { padding-top: 14px; background: transparent !important; border: 0 !important; }
.site-header .header-in { background: #fff !important; border-radius: 22px !important; box-shadow: 0 10px 30px -18px rgba(40,70,160,.4) !important; height: 66px; }
.main-nav .nv { color: var(--muted); font-weight: 600; border-radius: 14px; }
.main-nav .nv .g3i { width: 28px; height: 28px; }
.main-nav .nv:hover { background: #F2F6FF; }
.main-nav .nv[aria-current="page"], .nv-drop[open] > .nv { background: var(--blue-s) !important; color: var(--blue) !important; box-shadow: none !important; }
.nv-dark-group { border-left: 1px solid var(--line); padding-left: 6px; }
.nv-dark { background: transparent !important; color: var(--muted) !important; box-shadow: none !important; font-weight: 600; border-radius: 14px; padding: 6px 12px 6px 6px; }
.nv-dark .g3i { width: 28px; height: 28px; background: none !important; }
.nv-dark:hover { background: #F2F6FF !important; transform: none; }
.nv-dark[aria-current="page"] { background: var(--blue-s) !important; color: var(--blue) !important; }
@media (max-width: 1240px) { .nv-dark span { display: inline !important; } .nv-dark { padding: 6px 12px 6px 6px !important; } }
@media (max-width: 1400px) and (min-width: 1081px) { .nv-dark:nth-child(3) { display: none; } .main-nav .nv span { font-size: 14.5px; } }
/* ปุ่มดินปั้น */
.btn { border-radius: 16px !important; text-shadow: none !important; }
.btn-primary, .auth-slot .btn-primary, .tk-go, .btn.btn-teal { background: var(--blue) !important; color: #fff !important; border: 0 !important; box-shadow: inset 0 -4px 0 rgba(0,0,40,.18), 0 12px 22px -12px rgba(79,124,255,.9) !important; }
.btn-primary:hover { background: var(--blue-d) !important; }
.btn-sun, .btn-yellow, .btn.shine { background: var(--blue) !important; color: #fff !important; box-shadow: inset 0 -4px 0 rgba(0,0,40,.18), 0 12px 22px -12px rgba(79,124,255,.9) !important; }
.btn-sun .go, .btn-primary .go { background: rgba(255,255,255,.22) !important; color: #fff !important; box-shadow: none !important; }
.btn-ghost, .btn-onnight, .band .btn-ghost { background: #fff !important; color: var(--ink) !important; border: 0 !important; box-shadow: inset 0 -4px 0 #E3E9F7, 0 10px 20px -14px rgba(40,70,160,.5) !important; }
.btn-primary:active, .btn-sun:active, .btn-ghost:active { transform: translateY(2px); }
/* การ์ด */
.card, .tk-card, .mp-title, .mp-tracks, .rd-top-card, .ls-sub, .mp-panel, .pt-row, .ps-toolbar, .cl-tabs, .qz-me { background: #fff !important; background-image: none !important; border: 0 !important; border-radius: 26px; box-shadow: var(--clay) !important; }
/* แผงที่เคยดำ → พื้นไล่ขาวฟ้า */
.night:not(.lab-stage), .band > .band-in { background: linear-gradient(150deg, #FFFFFF, #E3ECFF) !important; color: var(--ink) !important; box-shadow: 0 30px 60px -40px rgba(40,70,160,.5) !important; }
.night:not(.lab-stage)::before, .band > .band-in::before { display: none !important; }
.night:not(.lab-stage) h1, .night:not(.lab-stage) h2, .night:not(.lab-stage) h3, .band h1, .band h2 { color: var(--ink-strong) !important; }
.night:not(.lab-stage) p, .band p, .band .muted, .v5-lead, .pr-hero p, .cl-hero p, .qz-hero p, .cl-room .cl-back, .qz-meta span { color: var(--muted) !important; }
.band a:not(.btn), .band .crumbs a { color: var(--blue-d) !important; } .band .crumbs { color: var(--muted) !important; }
.chip-dot { background: #fff !important; color: var(--ink) !important; box-shadow: 0 6px 14px -8px rgba(40,70,160,.4) !important; }
.chip-dot::before { background: var(--mint) !important; box-shadow: none !important; }
.chip-ink { background: var(--blue-s); color: var(--blue); }
.cl-code { background: #fff !important; box-shadow: var(--clay) !important; } .cl-code span { color: var(--muted); } .cl-code b { color: var(--blue); }
.qz-pin { color: var(--blue) !important; text-shadow: none !important; } .qz-meta b { color: var(--ink-strong) !important; }
/* หน้าแรก hero */
.v5-hero-in { padding: 46px 54px; border-radius: 36px; }
.v5-h1 .v5-em { color: var(--blue); }
.v5-stats div { background: #fff !important; box-shadow: inset 0 -3px 0 #E8EDF8 !important; } .v5-stats b { color: var(--ink-strong) !important; } .v5-stats span { color: var(--muted) !important; }
.v5-art { width: 100%; height: auto; display: block; }
/* กริดสนามสอบ แบบการ์ดดินปั้น */
.tk-card { display: grid !important; grid-template-columns: 1fr 96px; gap: 2px 12px; padding: 22px; box-shadow: inset 0 -5px 0 var(--soft), 0 18px 36px -26px rgba(40,70,160,.55) !important; outline: 0 !important; }
.tk-card:hover { transform: translateY(-3px); box-shadow: inset 0 -5px 0 var(--soft), 0 24px 40px -24px rgba(40,70,160,.6) !important; }
.tk-top, .tk-body { display: contents !important; }
.tk-top::before, .tk-top::after { display: none !important; }
.tk-name { grid-column: 1; font-size: 28px; color: var(--c1) !important; }
.tk-stk { grid-column: 2; grid-row: 1 / 5; width: 96px !important; height: 96px !important; transform: none !important; filter: none !important; }
.tk-stk svg { width: 96px !important; height: 96px !important; }
.tk-body b { grid-column: 1; font-size: 16.5px; } .tk-meta { grid-column: 1; }
.tk-go { grid-column: 1 / 3; margin-top: 12px; align-self: stretch; text-align: center; display: block; background: var(--soft) !important; color: var(--c1) !important; box-shadow: none !important; border-radius: 16px; padding: 11px; }
.tk-card:hover .tk-go { background: var(--c1) !important; color: #fff !important; }
.tk-hero { background: linear-gradient(150deg, #fff, var(--soft)) !important; border-bottom: 0 !important; border-radius: 0 0 36px 36px; }
.tk-btn { background: var(--c1) !important; box-shadow: inset 0 -4px 0 rgba(0,0,0,.15), 0 12px 22px -12px var(--c1) !important; }
.tk-hero-stk { filter: none !important; }
/* ไอคอน: ไม่ต้องมีเงาเพิ่ม */
.g3i, .tk-stk, .band-art, .v5-float, .v5-mascot, .cl-hero-art, .cl-big-art, .g3logo, .topic-sticker.g3s, .cover-sticker.g3s { filter: none !important; }
.band-art { transform: translateY(-50%) !important; }
/* แท็บ/เม็ดยาที่เลือก */
.mp-views button[aria-selected="true"], .mp-title .mp-views button[aria-selected="true"] { background: var(--blue) !important; color: #fff !important; box-shadow: inset 0 -3px 0 rgba(0,0,40,.18) !important; }
.mp-tracks button[aria-selected="true"], .mp-wsub button[aria-selected="true"] { background: var(--soft) !important; color: var(--c) !important; box-shadow: inset 0 -3px 0 rgba(31,43,77,.08) !important; }
.mp-p-tabs button[aria-selected="true"], .cl-tabs button[aria-selected="true"] { background: var(--blue) !important; color: #fff !important; box-shadow: inset 0 -3px 0 rgba(0,0,40,.18) !important; }
.seg button[aria-selected="true"], .seg .on, .tabs .on, [role="tab"][aria-selected="true"].pill { background: var(--blue) !important; color: #fff !important; }
.mp-stage { background: radial-gradient(50% 50% at 50% 50%, rgba(79,124,255,.10), transparent 70%), #F8FAFF !important; box-shadow: var(--clay) !important; }
.mp-tip { background: var(--blue) !important; }
.mp-p-lv, .mp-qc div, .pr-brow, .cl-task { background: #F2F6FF !important; }
.rd-top-card:first-child { background: var(--peach-s) !important; }
/* ตัวเลือกคำตอบ */
.choice { background: #fff !important; border: 2px solid #E3E9F7 !important; box-shadow: inset 0 -3px 0 #EEF2FA !important; }
.choice[aria-pressed="true"], .choice.sel, .choice.selected { background: var(--blue-s) !important; border-color: var(--blue) !important; box-shadow: inset 0 -3px 0 rgba(79,124,255,.25) !important; }
.choice.right { background: var(--mint-s) !important; border-color: var(--mint) !important; } .choice.wrong { background: #FFECEA !important; border-color: #F2604A !important; }
/* แถบความคืบหน้า */
.rd-bar, .mp-bar i, .progress, .h4-bar, .cl-miss, .meter .track { background: #E6ECF8 !important; box-shadow: none !important; }
.rd-bar em, .mp-bar em, .progress > div, .h4-fill, .cl-miss i, .meter .fill { background-image: none !important; box-shadow: none !important; }
.progress > div, .h4-fill, .rd-bar em.lv-good { background-color: var(--mint) !important; }
/* อื่น ๆ */
.site-footer { background: #fff !important; border-radius: 36px 36px 0 0; }
.tabbar { background: #fff; } .tabbar a[aria-current="page"] { color: var(--blue); } .tabbar a[aria-current="page"] svg { background: var(--blue-s) !important; box-shadow: none !important; border-radius: 12px; }
.pen-mark::after { display: none; } .pen-mark { color: var(--blue) !important; }
.lab-inset { background: radial-gradient(80% 60% at 50% 35%, #2A3A70, #17213D) !important; }
.qz-count { background: radial-gradient(circle at 35% 30%, #FFE3A1, #FFB938) !important; box-shadow: inset 0 -3px 0 rgba(0,0,0,.12) !important; }
.empty { border: 2px dashed #CAD6F2; background: #fff; }
.h4-paper { border: 0 !important; box-shadow: var(--clay) !important; }
.tk-sec { padding-top: 34px; }
.v6-map { padding-top: 10px; padding-bottom: 20px; }
.v6-map-in { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 24px; align-items: center; padding: 30px 34px !important; }
.v6-map-copy { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; } .v6-map-copy h2 { font-size: clamp(26px, 3vw, 36px); }
.v6-map-shot { position: relative; display: block; background: #F8FAFF; border-radius: 24px; padding: 10px; box-shadow: inset 0 -4px 0 #E3E9F7; }
.v6-map-shot .v5-shot-tag { background: var(--blue) !important; color: #fff !important; box-shadow: none !important; }
@media (max-width: 860px) { .v6-map-in { grid-template-columns: 1fr; padding: 22px !important; } }
/* ธีม 6 ปรับรอบ 2: hero มีชีวิตขึ้น */
.v5-hero-in { background: radial-gradient(40% 60% at 92% 10%, #DCE6FF, transparent 70%), radial-gradient(35% 55% at 6% 100%, #FFE9E0, transparent 70%), radial-gradient(30% 40% at 55% 105%, #DDF6EE, transparent 70%), #fff !important; overflow: hidden; }
.v5-h1 { font-size: clamp(38px, 5vw, 62px) !important; }
.v5-em { background: linear-gradient(90deg, #4F7CFF, #8B6CF0); -webkit-background-clip: text; background-clip: text; color: transparent !important; }
.v5-stats { max-width: 560px; }
.v5-stats div { position: relative; padding: 14px 14px 12px 62px !important; border-radius: 20px !important; }
.v5-stats .st1 { background: #EEF3FF !important; box-shadow: inset 0 -4px 0 #DCE6FF !important; } .v5-stats .st2 { background: #FFF6E3 !important; box-shadow: inset 0 -4px 0 #FFE9B8 !important; } .v5-stats .st3 { background: #E9F8F2 !important; box-shadow: inset 0 -4px 0 #CDEFE2 !important; }
.st-ic { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 46px; height: 46px; }
.st-ic svg { width: 100%; height: 100%; }
.btn-lg { padding: 16px 30px !important; font-size: 18px !important; border-radius: 18px !important; }
/* หัวหน้าภายใน: ลูกบอลสีจาง ๆ */
.band > .band-in { background: radial-gradient(30% 80% at 96% 20%, #DCE6FF, transparent 70%), radial-gradient(25% 70% at 70% 120%, #FFE9E0, transparent 70%), #fff !important; }
/* พื้นหลังทั้งเว็บ: ลูกบอลสีนุ่ม */
body { background: radial-gradient(900px 600px at 100% 0%, #E3ECFF, transparent 60%), radial-gradient(700px 500px at 0% 40%, #FFF1EA, transparent 60%), #F3F7FF !important; background-attachment: fixed !important; }
.tk-card { border-top: 0 !important; }
.tk-name { letter-spacing: -.01em; }
@media (max-width: 760px) { .v5-hero-in { padding: 28px 20px !important; } .v5-stats div { padding: 12px 8px 10px 46px !important; } .st-ic { width: 34px; height: 34px; left: 7px; } .v5-stats b { font-size: 19px !important; } }
@media (max-width: 760px) {
  .band-art { width: 54px !important; height: 54px !important; right: 14px !important; top: 16px !important; transform: none !important; }
  .band h1 { padding-right: 58px; }
  .v5-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .v5-stats div { padding: 46px 10px 10px !important; text-align: left; }
  .st-ic { top: 10px; left: 10px; transform: none; width: 32px; height: 32px; }
  .v5-stats span { display: block; font-size: 12.5px !important; line-height: 1.35; }
}
/* ===== คลังข้อสอบแบบเส้นทาง /drill ===== */
.dr-wrap { padding-top: 22px; padding-bottom: 48px; }
.dr-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.dr-head h1 { font-size: clamp(32px, 4vw, 44px); } .dr-head p { margin-top: 4px; }
.dr-grade { display: flex; gap: 6px; background: #fff; padding: 6px; border-radius: 20px; box-shadow: var(--clay); }
.dr-grade button { border: 0; background: transparent; padding: 10px 18px; border-radius: 14px; font: inherit; font-weight: 700; font-size: 17px; color: var(--muted); cursor: pointer; }
.dr-grade button[aria-selected="true"] { background: var(--blue); color: #fff; box-shadow: inset 0 -3px 0 rgba(0,0,40,.18); }
.dr-subs { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
.dr-sb { display: flex; align-items: center; gap: 12px; text-align: left; border: 0; font: inherit; color: var(--ink); background: #fff; border-radius: 26px; padding: 12px 16px 12px 10px; cursor: pointer; box-shadow: inset 0 -5px 0 var(--s), 0 16px 30px -24px rgba(40,70,160,.6); transition: transform .15s; }
.dr-sb:hover { transform: translateY(-2px); }
.dr-sb[aria-selected="true"] { outline: 3px solid var(--c); outline-offset: -3px; background: linear-gradient(150deg, #fff, var(--s)); }
.dr-sb b { display: block; font-size: 20px; } .dr-sb span span { color: var(--muted); font-size: 13.5px; }
.dr-cl { width: 72px; height: 72px; flex: none; } .dr-cl svg { width: 100%; height: 100%; }
.dr-main { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.dr-pathc { padding: 20px 20px 6px !important; } .dr-path-h h2 { font-size: 22px; }
.dr-svg { display: block; font-family: var(--font); max-width: 660px; margin: 0 auto; }
.dr-node { cursor: pointer; } .dr-node:hover > circle:nth-of-type(3), .dr-node:focus-visible > circle { filter: brightness(1.04); }
.dr-node:focus { outline: none; } .dr-node:focus-visible { outline: 3px solid var(--blue); }
.dr-node.off { opacity: .45; cursor: default; }
.dr-lab { paint-order: stroke; stroke: #fff; stroke-width: 5px; stroke-linejoin: round; }
.dr-side { position: sticky; top: 100px; display: flex; flex-direction: column; gap: 12px; scroll-margin-top: 90px; }
.dr-tc { padding: 22px !important; box-shadow: inset 0 -5px 0 #DCE6FF, 0 18px 36px -26px rgba(40,70,160,.5) !important; }
.dr-k { color: var(--blue); font-weight: 700; font-size: 14px; } .dr-tc h2 { font-size: 28px; margin: 4px 0 6px; } .dr-tc > p { color: var(--muted); line-height: 1.6; margin-bottom: 14px; }
.dr-lv { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 16px; }
.dr-lv button { border: 0; font: inherit; color: var(--ink); cursor: pointer; border-radius: 20px; padding: 10px 6px 8px; background: var(--s); box-shadow: inset 0 -4px 0 rgba(31,43,77,.07); display: flex; flex-direction: column; align-items: center; gap: 2px; }
.dr-lv button[aria-selected="true"] { outline: 3px solid var(--c); outline-offset: -3px; }
.dr-lv svg { width: 50px; height: 34px; } .dr-lv b { font-size: 16px; } .dr-lv span { font-size: 12.5px; color: var(--muted); }
.dr-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.dr-size { display: flex; gap: 4px; background: #F2F6FF; padding: 4px; border-radius: 14px; }
.dr-size button { border: 0; background: transparent; padding: 5px 10px; border-radius: 10px; font: inherit; font-size: 13.5px; font-weight: 700; color: var(--muted); cursor: pointer; }
.dr-size button[aria-selected="true"] { background: #fff; color: var(--blue); box-shadow: 0 1px 3px rgba(40,70,160,.2); }
.dr-stages { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0 16px; }
.dr-st { position: relative; width: 58px; height: 58px; border-radius: 50%; border: 0; font: inherit; font-weight: 800; font-size: 20px; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; color: var(--muted); background: radial-gradient(circle at 32% 28%, #fff, #E6ECFA); box-shadow: inset 0 -4px 0 rgba(31,43,77,.08); transition: transform .12s; }
.dr-st:hover { transform: translateY(-2px); }
.dr-st small { font-size: 10px; font-weight: 700; margin-top: 2px; }
.dr-st.done { background: radial-gradient(circle at 32% 28%, #A6EED6, #2FB58C); color: #fff; }
.dr-st.tried { background: radial-gradient(circle at 32% 28%, #FFE3A1, #FFB938); color: #5A3E00; }
.dr-st.now { background: radial-gradient(circle at 32% 28%, #A9C2FF, #4F7CFF); color: #fff; box-shadow: 0 0 0 6px #DCE6FF, inset 0 -4px 0 rgba(0,0,40,.15); }
.dr-st i { position: absolute; top: -9px; right: -10px; background: var(--peach); color: #fff; font-style: normal; font-size: 10.5px; font-weight: 700; border-radius: 999px; padding: 1px 7px; }
.dr-go { width: 100%; }
.dr-mini { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .dr-mini .btn { padding: 10px 6px; font-size: 14px; }
@media (max-width: 900px) { .dr-main { grid-template-columns: 1fr; } .dr-side { position: static; } .dr-subs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .dr-sb { flex-direction: column; text-align: center; padding: 12px 8px; } .dr-cl { width: 64px; height: 64px; } .dr-sb b { font-size: 17px; } .dr-lv { grid-template-columns: repeat(2, 1fr); } .dr-mini { grid-template-columns: 1fr; } .dr-grade button { padding: 9px 13px; } }
@media (max-width: 520px) { .dr-sb { flex-direction: row; text-align: left; padding: 10px 10px 10px 6px; gap: 6px; } .dr-cl { width: 50px; height: 50px; } .dr-sb b { font-size: 16px; } .dr-sb span span { font-size: 12px; } .dr-subs { gap: 8px; } }
/* ธีม 6: เก็บจุดที่ยังเข้ม */
.play-card.live { background: linear-gradient(150deg, #fff, #EEE8FF) !important; color: var(--ink) !important; } .play-card.live h2 { color: var(--ink-strong) !important; } .play-card.live p { color: var(--muted) !important; }
.play-card.speed { background: linear-gradient(150deg, #fff, #E2EAFF) !important; color: var(--ink) !important; } .play-card.speed h2 { color: var(--ink-strong) !important; } .play-card.speed p { color: var(--muted) !important; }
.play-card { border-radius: 26px !important; box-shadow: var(--clay) !important; border: 0 !important; }
.exam-top { background: #fff !important; color: var(--ink) !important; box-shadow: 0 10px 24px -18px rgba(40,70,160,.5); }
.exam-top * { color: inherit; } .exam-top .muted, .exam-top .small { color: var(--muted) !important; }
.exam-top .timer, .exam-top [class*="clock"] { background: var(--blue-s) !important; color: var(--blue) !important; }
.rs-next { background: linear-gradient(150deg, #fff, #E2EAFF) !important; } .rs-next h2 { color: var(--ink-strong) !important; } .rs-next p { color: var(--muted) !important; }
.set-cover.themed { background-image: none !important; background: linear-gradient(150deg, #fff, var(--blue-s)) !important; color: var(--ink) !important; }
.set-cover.themed .sec { color: var(--muted) !important; } .set-cover.themed .subj { color: var(--ink-strong) !important; text-shadow: none !important; }
.set-cover.themed::after { display: none; }
.lb-cta, .lb-join, .lb-podium + div[style*="ink"] { background: linear-gradient(150deg, #fff, #E2EAFF) !important; color: var(--ink) !important; }
.pace { background: var(--mint-s) !important; color: #1E8C66 !important; }
.me-bar { background: #fff !important; color: var(--ink) !important; box-shadow: var(--clay) !important; border: 0 !important; } .me-bar * { color: inherit; }
.arena-tabs [aria-selected="true"], .arena-tabs .on { background: var(--blue) !important; color: #fff !important; }
.toast { background: var(--ink-strong); }
.meter .lbl { top: -4px !important; transform: translateX(8px) !important; }

/* ===== ธีม 7 โครงสมุดการบ้านของเด็กติว (ต่างจากสอบครู: เมนูซ้ายแนวตั้ง หัวหน้าน้องยางลบพูด หน้าสอบแบบเกม) ===== */
body.has-rail { background-color: #F3F7FF; background-image: linear-gradient(rgba(79,124,255,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(79,124,255,.07) 1px, transparent 1px); background-size: 28px 28px; }
.rail { position: fixed; left: 0; top: 0; bottom: 0; width: 112px; z-index: 50; background: #fff; display: flex; flex-direction: column; align-items: stretch; padding: 14px 10px 14px 10px; overflow-y: auto; scrollbar-width: none;
  box-shadow: 10px 0 30px -26px rgba(40,70,160,.6); }
.rail::after { content: ''; position: absolute; top: 0; bottom: 0; right: -9px; width: 18px; pointer-events: none;
  background: radial-gradient(circle at 9px 14px, #F3F7FF 4px, #C9D6F5 4.5px, #C9D6F5 5.5px, transparent 6px) 0 0/18px 34px repeat-y; }
.rail-logo { display: flex; flex-direction: column; align-items: center; gap: 2px; text-decoration: none; padding: 4px 0 10px; }
.rail-logo .g3logo { width: 54px; height: 54px; display: block; } .rail-logo .g3logo svg { width: 100%; height: 100%; }
.rail-logo .wm-a { font-weight: 700; font-size: 17px; color: var(--ink); letter-spacing: -.2px; }
.rail-list { display: flex; flex-direction: column; gap: 4px; }
.rl { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 4px 9px; border-radius: 20px; text-decoration: none; color: var(--ink); font-size: 13px; font-weight: 600; line-height: 1.25; text-align: center; transition: background .15s, transform .15s; }
.rl-ic { width: 46px; height: 46px; display: block; transition: transform .2s cubic-bezier(.3,1.6,.5,1); } .rl-ic svg { width: 100%; height: 100%; display: block; }
.rl:hover { background: #EEF3FF; } .rl:hover .rl-ic { transform: rotate(-6deg) scale(1.08); }
.rl[aria-current="page"] { background: var(--blue-s); color: var(--blue-d); }
.rl[aria-current="page"]::before { content: ''; position: absolute; left: -10px; top: 14px; bottom: 14px; width: 6px; border-radius: 0 6px 6px 0; background: var(--peach); }
.rl:focus-visible { outline: 3px solid var(--blue); outline-offset: 1px; }
.rail-more { margin-top: auto; padding-top: 14px; display: flex; flex-direction: column; gap: 2px; border-top: 2px dashed #E1E8F8; }
.rail-more b { font-size: 11.5px; color: var(--muted); text-align: center; padding: 2px 0 4px; font-weight: 600; }
.rail-more a { font-size: 12.5px; color: var(--ink); text-decoration: none; text-align: center; padding: 5px 2px; border-radius: 10px; }
.rail-more a:hover { background: #EEF3FF; }
/* แถบบน: บนคอมเหลือแค่ปุ่มบัญชีมุมขวา */
.site-header.rail-top { position: relative; top: 0; left: 0; right: 0; z-index: 45; background: transparent !important; border: 0 !important; box-shadow: none !important; backdrop-filter: none; -webkit-backdrop-filter: none; pointer-events: none; }
.rt-in { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 14px 22px 0; }
.rt-in > * { pointer-events: auto; }
.rail-top .logo, .rail-top .burger { display: none; }
@media (min-width: 1081px) {
  body.has-rail { padding-left: 112px; }
  body.has-rail .site-footer { margin-left: 0; }
  .rail-top .wrap, body.has-rail main > section:first-child { margin-top: 0; }
}
@media (max-width: 1080px) {
  .site-header.rail-top { position: sticky; background: rgba(255,255,255,.94) !important; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 8px 20px -18px rgba(40,70,160,.6) !important; pointer-events: auto; }
  .rt-in { padding: 8px 12px; justify-content: flex-start; }
  .rail-top .logo { display: flex; margin-right: auto; } .rail-top .burger { display: inline-flex; border-radius: 14px; }
  .rail { transform: translateX(-120%); transition: transform .25s ease; width: 248px; padding: 16px 14px; box-shadow: 20px 0 60px -20px rgba(31,43,77,.45); }
  .rail.open { transform: none; }
  .rail::after { display: none; }
  .rail-list { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
  .rail-more { flex-direction: row; flex-wrap: wrap; justify-content: center; margin-top: 16px; } .rail-more b { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .rail, .rl, .rl-ic { transition: none; } }

/* หัวหน้าแต่ละหน้า: ชื่อหน้าตัวใหญ่ + น้องยางลบพูด (ไม่มีแผงหัว) */
.band, .band.dark { background: transparent !important; padding: 28px 0 4px !important; }
.band > .band-in { background: transparent !important; box-shadow: none !important; border-radius: 0 !important; padding: 26px 24px 8px !important; overflow: visible !important; align-items: flex-end; }
.band > .band-in > .band-art { display: none !important; }
.band h1 { font-size: clamp(32px, 4.6vw, 54px) !important; line-height: 1.12; letter-spacing: -.6px; font-weight: 700; color: var(--ink) !important; max-width: 16em; padding-right: 0 !important;
  text-decoration: underline; text-decoration-color: rgba(255,200,60,.55); text-decoration-thickness: .3em; text-underline-offset: -.14em; text-decoration-skip-ink: none; }
.band h1 + * { margin-top: 18px; }
.bh-talk { display: flex; align-items: flex-end; gap: 12px; max-width: 760px; position: relative; }
.bh-mascot { flex: 0 0 76px; width: 76px; height: 76px; animation: bh-bob 3.2s ease-in-out infinite; transform-origin: 50% 100%; }
.bh-mascot svg { width: 100%; height: 100%; display: block; }
@keyframes bh-bob { 0%,100% { transform: rotate(-4deg); } 50% { transform: rotate(3deg) translateY(-3px); } }
.bh-bubble { position: relative; background: #fff; border-radius: 22px 22px 22px 6px; padding: 14px 18px; box-shadow: var(--clay); margin-bottom: 18px; }
.bh-bubble::before { content: ''; position: absolute; left: -10px; bottom: 4px; width: 18px; height: 16px; background: #fff; clip-path: polygon(100% 0, 0 100%, 100% 70%); }
.bh-bubble p { margin: 0 !important; color: var(--ink) !important; font-size: 16.5px; line-height: 1.7; }
.bh-stamp { position: absolute; right: -96px; top: -40px; width: 78px; height: 78px; transform: rotate(8deg); opacity: .95; }
.bh-stamp svg { width: 100%; height: 100%; }
.bh-talk.solo { display: none; }
.band .tablist, .band [role="tablist"], .band .seg { background: #fff; border: 0; border-radius: 18px; box-shadow: var(--clay); }
@media (max-width: 1180px) { .bh-stamp { display: none; } }
@media (max-width: 760px) {
  .band > .band-in { padding: 14px 16px 4px !important; }
  .band h1 { font-size: 30px !important; }
  .bh-mascot { flex-basis: 54px; width: 54px; height: 54px; }
  .bh-bubble { padding: 11px 14px; margin-bottom: 12px; } .bh-bubble p { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) { .bh-mascot { animation: none; } }

/* หน้าทำข้อสอบแบบเกมตอบคำถาม: ทีละข้อ บล็อกสี 2x2 กระดาษคำตอบอยู่ในลิ้นชัก */
body:has(.qg-top) { padding-left: 0 !important; }
body:has(.qg-top) .rail, body:has(.qg-top) .site-header, body:has(.qg-top) .site-footer, body:has(.qg-top) .tabbar { display: none !important; }
.qg-top { position: sticky; top: 0; z-index: 40; background: #fff !important; box-shadow: 0 10px 26px -20px rgba(40,70,160,.6); }
.qg-top-in { display: flex; align-items: center; gap: 12px 16px; padding: 10px 18px; max-width: 1180px; margin: 0 auto; flex-wrap: wrap; }
.qg-exit { width: 42px; height: 42px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; background: #EEF3FF; color: var(--ink) !important; flex: none; }
.qg-title { display: flex; flex-direction: column; min-width: 0; flex: 0 1 240px; line-height: 1.3; }
.qg-title b { font-size: 15.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .qg-title span { font-size: 12.5px; color: var(--muted) !important; }
.qg-dots { flex: 1 1 200px; display: flex; gap: 6px; justify-content: center; align-items: center; min-width: 0; }
.qg-dots i { width: 11px; height: 11px; border-radius: 50%; background: #DCE4F7; flex: none; transition: transform .2s; }
.qg-dots i.ans { background: var(--blue); }
.qg-dots i.cur { width: 16px; height: 16px; background: #fff; box-shadow: 0 0 0 4px var(--peach); }
.qg-dots i.cur.ans { background: var(--blue); }
.qg-dots i.more { width: 5px; height: 5px; background: #B9C6E6; }
.qg-sheet-btn { background: #fff !important; color: var(--ink) !important; border: 2px solid #DCE4F7 !important; box-shadow: none !important; gap: 6px; }
.qg-wrap { max-width: 940px; margin: 0 auto; padding: 26px 18px 110px; display: flex; flex-direction: column; gap: 16px; }
.qg-wrap .subj-pills { justify-content: center; }
.qg-card { border: 0 !important; border-radius: 34px !important; padding: 30px 32px 26px !important; box-shadow: 0 30px 60px -42px rgba(40,70,160,.6), inset 0 -6px 0 #EEF2FA !important; }
.qg-card .q-stem { font-size: calc(22px * var(--qscale, 1)) !important; line-height: 1.7; text-align: center; padding: 6px 4px 8px; }
.qg-choices { display: grid !important; grid-template-columns: 1fr 1fr; gap: 14px; }
.qg-choices.qg-long { grid-template-columns: 1fr; }
.qg-choices .choice-row { position: relative; display: block; }
.qg-choices .choice { width: 100%; height: 100%; min-height: 96px; border: 0 !important; border-radius: 24px !important; padding: 16px 52px 18px 18px !important; align-items: center; color: #fff !important; font-size: calc(18px * var(--qscale, 1)); font-weight: 600; line-height: 1.5;
  background: var(--qc) !important; box-shadow: inset 0 -7px 0 rgba(0,0,0,.16), 0 14px 22px -16px var(--qc) !important; transition: transform .12s, box-shadow .12s, opacity .15s; }
.qg-c0 { --qc: #4F7CFF; } .qg-c1 { --qc: #FF8A5C; } .qg-c2 { --qc: #22A884; } .qg-c3 { --qc: #8B6CF0; } .qg-c4 { --qc: #E0579A; }
.qg-choices .choice:hover:not([disabled]) { transform: translateY(-2px); }
.qg-choices .choice:active { transform: translateY(3px); box-shadow: inset 0 -3px 0 rgba(0,0,0,.16) !important; }
.qg-choices .choice .b { width: 40px; height: 40px; flex: 0 0 40px; border: 0 !important; background: #fff !important; color: var(--qc) !important; font-size: 18px; font-weight: 800; box-shadow: inset 0 -3px 0 rgba(0,0,0,.08) !important; margin: 0; }
.qg-choices .choice .ct { color: #fff !important; }
.qg-choices .choice[aria-pressed="true"] { outline: 4px solid var(--ink); outline-offset: 3px; transform: translateY(-2px); }
.qg-choices .choice[aria-pressed="true"] .b { background: var(--ink) !important; color: #fff !important; }
.qg-choices:has(.choice[aria-pressed="true"]) .choice[aria-pressed="false"] { opacity: .5; }
.qg-choices .strike { position: absolute; right: 10px; top: 10px; width: 32px; height: 32px; border-radius: 50%; border: 0 !important; background: rgba(255,255,255,.28) !important; color: #fff !important; font-size: 13px; }
.qg-choices .strike:hover { background: rgba(255,255,255,.5) !important; }
.qg-choices .choice-row.struck .choice { opacity: .28; }
.qg-choices .choice:focus-visible { outline: 4px solid var(--ink); outline-offset: 3px; }
.qg-card > .row.between:first-child .muted { font-size: 15px; }
.qg-tools { justify-content: center; flex-wrap: wrap; }
.qg-saved { text-align: center; }
.sheet-scrim { position: fixed; inset: 0; background: rgba(31,43,77,.35); z-index: 70; }
.sheet-drawer { position: fixed; right: 0; top: 0; bottom: 0; width: min(390px, 94vw); z-index: 80; overflow-y: auto; background: #F3F7FF; padding: 14px; display: flex; flex-direction: column; gap: 12px; animation: sh-in .22s ease; box-shadow: -20px 0 50px -24px rgba(31,43,77,.5); }
.sheet-drawer[hidden], .sheet-scrim[hidden] { display: none !important; }
.sheet-drawer .card { border: 0; border-radius: 26px; box-shadow: var(--clay); }
.qg-x { width: 40px; height: 40px; border-radius: 12px; border: 0; background: #EEF3FF; cursor: pointer; font-size: 16px; color: var(--ink); }
@keyframes sh-in { from { transform: translateX(40px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .sheet-drawer { animation: none; } .qg-choices .choice { transition: none; } }
@media (max-width: 760px) {
  .qg-top-in { padding: 8px 10px; gap: 8px; }
  .qg-title { display: none; }
  .qg-dots { order: 9; flex: 1 0 100%; gap: 5px; } .qg-dots i { width: 9px; height: 9px; } .qg-dots i.cur { width: 13px; height: 13px; }
  .qg-top .pace { display: none; }
  .qg-wrap { padding: 14px 10px 100px; }
  .qg-card { padding: 20px 16px 18px !important; border-radius: 26px !important; }
  .qg-card .q-stem { font-size: calc(19px * var(--qscale, 1)) !important; }
  .qg-choices { gap: 10px; }
  .qg-choices .choice { min-height: 74px; padding: 12px 40px 14px 12px !important; font-size: calc(16px * var(--qscale, 1)); border-radius: 20px !important; gap: 10px; }
  .qg-choices .choice .b { width: 32px; height: 32px; flex-basis: 32px; font-size: 15px; }
  .qg-choices .strike { width: 26px; height: 26px; right: 7px; top: 7px; }
}

.rt-hi { margin: 0 auto 0 8px; font-weight: 600; color: var(--muted); font-size: 15px; }
@media (min-width: 1081px) { .rt-in { max-width: 1260px; margin: 0 auto; padding: 14px 24px 0; } }
@media (max-width: 1080px) { .rt-hi { display: none; } }
@media (max-width: 760px) {
  .qg-top .timer { padding: 6px 10px !important; font-size: 16px !important; min-height: 40px; }
  .qg-top .btn { padding: 8px 12px !important; min-height: 40px !important; font-size: 14px !important; }
  .qg-exit { width: 40px; height: 40px; }
  .qg-top-in { flex-wrap: wrap; justify-content: space-between; }
  .band .tablist { flex-wrap: nowrap; overflow-x: auto; max-width: 100%; scrollbar-width: none; }
  .band .tablist button { flex: none; }
}
@media (max-width: 760px) { .mp-tracks, .mp-views { max-width: calc(100vw - 32px) !important; flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none; } .mp-tracks button, .mp-views button { flex: none; white-space: nowrap; } }
@media (max-width: 760px) { .mp-title { flex: 1 1 100% !important; min-width: 0; max-width: 100%; box-sizing: border-box; } .mp-title .mp-views { max-width: 100% !important; } }