/* ระบบจองคิว งานทุนการศึกษา — โทนเดียวกับระบบสารสนเทศทุน (ส้ม มทส. + พื้นเทาเย็น) และเว็บหลัก (ครีม-ทอง) */
@font-face { font-family: "Plex Thai"; font-weight: 400; font-display: swap; src: url("../fonts/ibm-plex-sans-thai-thai-400-normal.woff2") format("woff2"); unicode-range: U+0E01-0E5B, U+200C-200D, U+25CC; }
@font-face { font-family: "Plex Thai"; font-weight: 500; font-display: swap; src: url("../fonts/ibm-plex-sans-thai-thai-500-normal.woff2") format("woff2"); unicode-range: U+0E01-0E5B, U+200C-200D, U+25CC; }
@font-face { font-family: "Plex Thai"; font-weight: 600; font-display: swap; src: url("../fonts/ibm-plex-sans-thai-thai-600-normal.woff2") format("woff2"); unicode-range: U+0E01-0E5B, U+200C-200D, U+25CC; }
@font-face { font-family: "Plex Thai"; font-weight: 700; font-display: swap; src: url("../fonts/ibm-plex-sans-thai-thai-700-normal.woff2") format("woff2"); unicode-range: U+0E01-0E5B, U+200C-200D, U+25CC; }
@font-face { font-family: "Plex Thai"; font-weight: 400; font-display: swap; src: url("../fonts/ibm-plex-sans-thai-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2122; }
@font-face { font-family: "Plex Thai"; font-weight: 500; font-display: swap; src: url("../fonts/ibm-plex-sans-thai-latin-500-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2122; }
@font-face { font-family: "Plex Thai"; font-weight: 600; font-display: swap; src: url("../fonts/ibm-plex-sans-thai-latin-600-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2122; }
@font-face { font-family: "Plex Thai"; font-weight: 700; font-display: swap; src: url("../fonts/ibm-plex-sans-thai-latin-700-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2122; }

:root {
  --ink: #1E2532; --ink-2: #3A4354; --muted: #667085; --line: #E2E5EA; --line-2: #EEF0F3;
  --bg: #F4F5F7; --panel: #fff; --cream: #FFF8EE; --gold: #C99A06;
  --orange: #E8731A; --orange-ink: #A9500C; --orange-soft: #FDF0E4; --orange-line: #F6CFAB;
  --teal: #0E8A8C; --teal-soft: #E3F3F3; --danger: #B93A26; --danger-soft: #FBEAE6;
  --ok: #2F7D4F; --ok-soft: #E6F3EB; --warn: #8A6100; --warn-soft: #FFF6DB;
  --radius: 12px; --shadow: 0 1px 2px rgba(30,37,50,.06), 0 4px 16px rgba(30,37,50,.04);
  --sidebar: 240px;
  --font: "Plex Thai", "Sarabun", "Leelawadee UI", Tahoma, system-ui, sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font); font-size: 15px; line-height: 1.6; color: var(--ink); background: var(--bg); }
img { max-width: 100%; }
a { color: var(--orange-ink); text-underline-offset: 2px; }
a:hover { color: var(--orange); }
h1, h2, h3 { line-height: 1.3; margin: 0 0 .5em; font-weight: 600; }
h1 { font-size: 1.5rem; } h2 { font-size: 1.15rem; } h3 { font-size: 1rem; }
p { margin: 0 0 .7em; }
.small, small { font-size: .85rem; }
.muted { color: var(--muted); }
.center { text-align: center; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.nowrap { white-space: nowrap; }
.hidden { display: none !important; }
.mt { margin-top: 10px; }
.text-danger { color: var(--danger); }
.ico { flex: none; vertical-align: -3px; }
:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--ink); color: #fff; padding: 6px 12px; border-radius: 6px; z-index: 100; }
.skip:focus { left: 8px; }
hr { border: 0; border-top: 1px solid var(--line); margin: 16px 0; }
code { background: var(--line-2); padding: 1px 5px; border-radius: 4px; font-size: .88em; }

/* ---------- ส่วนประกอบ ---------- */
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; box-shadow: var(--shadow); margin-bottom: 16px; }
.card-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.card-head h2 { margin: 0; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 38px; padding: 0 14px; border-radius: 8px; border: 1px solid var(--line); background: #fff; color: var(--ink-2); font: inherit; font-size: .93rem; cursor: pointer; text-decoration: none; white-space: nowrap; }
.btn:hover { border-color: #C9CED6; color: var(--ink); background: #FAFBFC; }
.btn-primary { background: var(--orange); border-color: var(--orange); color: #fff; font-weight: 600; }
.btn-primary:hover { background: #D5650F; border-color: #D5650F; color: #fff; }
.btn-danger { color: var(--danger); border-color: #EBC3BA; }
.btn-danger:hover { background: var(--danger-soft); color: var(--danger); border-color: var(--danger); }
.btn-sm { height: 32px; padding: 0 11px; font-size: .85rem; }
.btn-lg { height: 46px; padding: 0 22px; font-size: 1rem; }
.btn-block { width: 100%; }
.btn-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.btn-row form { margin: 0; }
.linkbtn { background: none; border: 0; font: inherit; color: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; padding: 0; }
form.inline, .inline { display: inline; margin: 0; }
.inline-form { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin: 0; }

.field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.field > span { font-size: .87rem; color: var(--ink-2); font-weight: 500; }
input, select, textarea { font: inherit; color: var(--ink); border: 1px solid #D0D5DD; border-radius: 8px; padding: 0 11px; height: 40px; background: #fff; min-width: 0; }
textarea { height: auto; padding: 9px 11px; resize: vertical; }
input[type=checkbox], input[type=radio] { height: auto; accent-color: var(--orange); }
input[type=file] { padding: 7px 8px; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--orange); box-shadow: 0 0 0 3px rgba(232,115,26,.15); }
.input-xl { height: 58px; font-size: 1.4rem; letter-spacing: .04em; text-transform: uppercase; }
.check { display: flex; gap: 9px; align-items: flex-start; margin: 6px 0; cursor: pointer; }
.check input { margin-top: 5px; }
.check.sub { padding-left: 22px; }
.chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px; cursor: pointer; background: #fff; }
.chip:has(input:checked) { border-color: var(--orange); background: var(--orange-soft); color: var(--orange-ink); }
.w-80 { width: 80px; } .w-160 { width: 160px; } .w-260 { width: 260px; max-width: 100%; }
.row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.row-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 12px; }
.form-grid { display: block; }
.form-actions { position: sticky; bottom: 0; padding: 12px 0; background: linear-gradient(transparent, var(--bg) 35%); }
.filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.filters input[type=search] { flex: 1 1 220px; }
.checklist { max-height: 300px; overflow: auto; border: 1px solid var(--line); border-radius: 8px; padding: 6px 12px; margin-top: 6px; }
.filter { margin-top: 2px; }

.alert { border-radius: 10px; padding: 11px 14px; margin-bottom: 14px; border: 1px solid; font-size: .94rem; }
.alert-ok { background: var(--ok-soft); border-color: #BFDDC9; color: #1F5A37; }
.alert-err { background: var(--danger-soft); border-color: #EBC3BA; color: #8A2A1A; }
.alert-warn { background: var(--warn-soft); border-color: #F0DC9B; color: #6B4C00; }
.alert-info { background: var(--teal-soft); border-color: #B9DEDF; color: #0B5F60; }

.badge { display: inline-block; padding: 1px 9px; border-radius: 999px; font-size: .8rem; font-weight: 500; line-height: 1.7; white-space: nowrap; vertical-align: 1px; }
.b-ok { background: var(--ok-soft); color: var(--ok); }
.b-info { background: var(--teal-soft); color: var(--teal); }
.b-warn { background: var(--warn-soft); color: var(--warn); }
.b-danger { background: var(--danger-soft); color: var(--danger); }
.b-muted { background: var(--line-2); color: var(--muted); }

.meter { height: 8px; background: var(--line-2); border-radius: 99px; overflow: hidden; flex: 1; min-width: 60px; }
.meter i { display: block; height: 100%; background: linear-gradient(90deg, #F5A524, var(--orange)); border-radius: 99px; }
.full .meter i { background: var(--danger); }

.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.table th { text-align: left; font-weight: 500; color: var(--muted); font-size: .82rem; border-bottom: 1px solid var(--line); padding: 8px 10px; white-space: nowrap; }
.table td { border-bottom: 1px solid var(--line-2); padding: 9px 10px; vertical-align: top; }
.table-tight td { padding: 6px 8px; vertical-align: middle; }
.table tr.off td { opacity: .5; }
.table details.move { display: inline-block; }
.table details.move[open] form { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 6px; }
details summary { cursor: pointer; }
details.move summary { list-style: none; }

.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 16px; overflow-x: auto; }
.tab { padding: 9px 14px; color: var(--ink-2); text-decoration: none; border-bottom: 2px solid transparent; white-space: nowrap; }
.tab.active { color: var(--orange-ink); border-color: var(--orange); font-weight: 600; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 16px; }
.kpi { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 16px; display: flex; flex-direction: column; text-decoration: none; color: var(--ink); }
.kpi small { color: var(--muted); }
.kpi b { font-size: 1.6rem; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.3; }
.kpi-act { justify-content: center; }
.kpi-on { border-color: var(--orange); background: var(--orange-soft); }
.empty { text-align: center; padding: 26px; }
.empty-mascot { width: 92px; display: block; margin: 0 auto 8px; }

/* ---------- หน้านักศึกษา ---------- */
body.pub { background: linear-gradient(180deg, var(--cream) 0, var(--bg) 420px); }
.wrap { max-width: 980px; margin: 0 auto; padding: 0 16px; }
.pub-top { background: rgba(255,255,255,.9); backdrop-filter: blur(6px); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 20; }
.pub-top-in { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 62px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.brand:hover { color: var(--ink); }
.brand-logo { height: 42px; width: auto; }
.brand-text { display: flex; flex-direction: column; line-height: 1.25; }
.brand-text b { font-size: .98rem; }
.brand-text small { color: var(--muted); font-size: .74rem; }
.pub-nav { display: flex; gap: 16px; align-items: center; font-size: .9rem; }
.pub-nav a, .pub-nav .linkbtn { color: var(--ink-2); text-decoration: none; display: inline-flex; gap: 6px; align-items: center; }
.pub-nav a:hover, .pub-nav .linkbtn:hover { color: var(--orange-ink); }
main.wrap { padding-top: 22px; padding-bottom: 30px; }
.hero { display: grid; grid-template-columns: 1.1fr .9fr; gap: 28px; align-items: center; margin: 14px 0 30px; }
.eyebrow { color: var(--orange-ink); font-weight: 600; letter-spacing: .02em; margin-bottom: 4px; }
.hero h1 { font-size: 2.2rem; line-height: 1.25; margin-bottom: 12px; }
.hero-steps { display: flex; gap: 8px; padding: 0; list-style: none; counter-reset: s; flex-wrap: wrap; margin: 16px 0 0; }
.hero-steps li { counter-increment: s; background: #fff; border: 1px solid var(--orange-line); border-radius: 999px; padding: 4px 12px 4px 6px; font-size: .88rem; }
.hero-steps li::before { content: counter(s); display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--orange); color: #fff; font-size: .78rem; font-weight: 700; margin-right: 6px; }
.login-card { position: relative; padding-top: 26px; }
.login-mascot { position: absolute; right: 14px; top: -52px; width: 78px; filter: drop-shadow(0 4px 6px rgba(0,0,0,.08)); }
.sec-title { margin-top: 6px; }
.camp-card h3 { font-size: 1.05rem; margin: 6px 0; }
.camp-card-top { display: flex; justify-content: space-between; align-items: center; }
.camp-card .meter { margin: 8px 0 4px; }
.page-title { display: flex; align-items: center; gap: 8px; }

.profile { display: flex; gap: 16px; align-items: center; background: linear-gradient(120deg, #fff 60%, var(--orange-soft)); }
.profile-mascot { width: 74px; flex: none; }
.profile-main { flex: 1; min-width: 0; }
.profile h1 { margin: 0 0 4px; font-size: 1.35rem; }
.profile-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; color: var(--ink-2); font-size: .9rem; margin-bottom: 6px; }
.profile-act { align-self: flex-start; }
.camp { border-top: 4px solid var(--orange); }
.camp-top h2 { font-size: 1.2rem; margin-bottom: 4px; }
.camp-desc { background: var(--cream); border-radius: 10px; padding: 10px 14px; margin: 8px 0 12px; font-size: .94rem; }
.ok-line { color: var(--ok); }
.ticket { display: grid; grid-template-columns: 1fr auto; gap: 0; border: 2px dashed var(--orange-line); border-radius: 14px; background: var(--cream); margin: 10px 0 12px; overflow: hidden; }
.ticket-main { padding: 14px 18px; }
.ticket-when { font-size: 1.05rem; margin-bottom: 4px; }
.ticket-when b { font-size: 1.5rem; color: var(--orange-ink); }
.ticket-ref { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 14px 18px; background: #fff; border-left: 2px dashed var(--orange-line); }
.ticket-ref b { font-size: 1.45rem; letter-spacing: .08em; font-variant-numeric: tabular-nums; }
.pick { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.day { border: 0; padding: 0; margin: 0 0 12px; }
.day legend { font-weight: 600; margin-bottom: 6px; padding: 0; }
.slot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 8px; }
.slot { position: relative; display: flex; flex-direction: column; align-items: center; border: 1px solid var(--line); border-radius: 10px; padding: 9px 6px; cursor: pointer; background: #fff; transition: border-color .15s, background .15s; }
.slot input { position: absolute; opacity: 0; pointer-events: none; }
.slot b { font-variant-numeric: tabular-nums; }
.slot small { color: var(--ok); }
.slot:hover { border-color: var(--orange-line); }
.slot:has(input:checked) { border-color: var(--orange); background: var(--orange-soft); box-shadow: 0 0 0 2px rgba(232,115,26,.25); }
.slot:has(input:focus-visible) { outline: 2px solid var(--orange); outline-offset: 2px; }
.slot.full { background: var(--line-2); cursor: not-allowed; }
.slot.full b, .slot.full small { color: var(--muted); }
.slot.mine { border-color: var(--teal); background: var(--teal-soft); cursor: default; }
.slot.mine small { color: var(--teal); }
.pick-foot { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; position: sticky; bottom: 0; background: linear-gradient(transparent, #fff 30%); padding: 14px 0 4px; }
.field-inline { margin: 0; }
.docs { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.track { display: flex; list-style: none; padding: 0; margin: 4px 0 12px; }
.track li { flex: 1; position: relative; text-align: center; font-size: .82rem; color: var(--muted); padding-top: 22px; }
.track li span { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 16px; height: 16px; border-radius: 50%; background: var(--line); border: 3px solid #fff; box-shadow: 0 0 0 1px var(--line); z-index: 1; }
.track li::before { content: ""; position: absolute; top: 7px; left: -50%; right: 50%; height: 2px; background: var(--line); }
.track li:first-child::before { display: none; }
.track li.done { color: var(--ok); font-weight: 500; }
.track li.done span { background: var(--ok); box-shadow: 0 0 0 1px var(--ok); }
.track li.done::before { background: var(--ok); }
.track li.warn { color: var(--danger); }
.track li.warn span { background: var(--danger); }
.doclist { margin: 8px 0 0; padding-left: 22px; }
.avail { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; margin: 12px 0; }
.avail-day { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.avail-head { display: flex; justify-content: space-between; margin-bottom: 6px; }
.avail-row, .bar-row { display: flex; align-items: center; gap: 10px; padding: 3px 0; font-size: .9rem; font-variant-numeric: tabular-nums; }
.avail-row span { width: 92px; } .avail-row small { width: 48px; text-align: right; }
.bar-row span { width: 150px; } .bar-row small { width: 70px; }
.pub-foot { border-top: 1px solid var(--line); background: #fff; padding: 18px 0; font-size: .9rem; margin-top: 20px; }
.countdown { font-weight: 600; }

/* ---------- หลังบ้าน ---------- */
.sidebar { position: fixed; inset: 0 auto 0 0; width: var(--sidebar); background: linear-gradient(180deg, #fff 0, #fff 70%, #FFF8F1 100%); border-right: 1px solid var(--line); display: flex; flex-direction: column; z-index: 40; overflow-y: auto; }
.sidebar .brand { padding: 16px 16px 12px; }
.nav { padding: 4px 10px 16px; flex: 1; }
.nav-link { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 8px; color: var(--ink-2); text-decoration: none; font-size: .95rem; }
.nav-link:hover { background: var(--bg); color: var(--ink); }
.nav-link.active { background: var(--orange-soft); color: var(--orange-ink); font-weight: 600; }
.sidebar-mascot { display: flex; align-items: center; gap: 8px; margin: 0 14px 8px; padding: 8px 10px; border-radius: 12px; background: var(--orange-soft); border: 1px solid var(--orange-line); color: var(--orange-ink); font-size: .8rem; line-height: 1.3; }
.sm-mascot { width: 34px; }
.sidebar-foot { border-top: 1px solid var(--line); padding: 8px 10px; }
.sidebar-foot a { display: flex; gap: 10px; align-items: center; padding: 8px 10px; color: var(--muted); text-decoration: none; border-radius: 8px; font-size: .88rem; }
.sidebar-foot a:hover { background: var(--bg); color: var(--ink); }
.shell { margin-left: var(--sidebar); min-height: 100vh; display: flex; flex-direction: column; }
.topbar { display: flex; align-items: center; gap: 12px; padding: 12px 24px; background: #fff; border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 30; }
.topbar h1 { font-size: 1.15rem; margin: 0; flex: 1; }
.nav-toggle { display: none; }
.content { padding: 20px 24px; flex: 1; max-width: 1280px; width: 100%; }
.adm-foot { padding: 12px 24px; }
.camp-head { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 10px; }
.camp-head h2 { margin: 0 0 2px; font-size: 1.2rem; }
.camp-tile { display: flex; flex-direction: column; gap: 4px; border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; text-decoration: none; color: var(--ink); background: #fff; }
.camp-tile:hover { border-color: var(--orange-line); color: var(--ink); background: #FFFCF8; }
.camp-tile .badge { align-self: flex-start; }
.slot-day { border: 1px solid var(--line); border-radius: 10px; margin-bottom: 10px; overflow: hidden; }
.slot-day-head { display: flex; gap: 12px; align-items: center; background: var(--bg); padding: 8px 12px; }
.slot-day-head form { margin-left: auto; }
.checkin-form .field > span { font-size: .95rem; }
.ci-card { display: flex; justify-content: space-between; gap: 16px; align-items: center; border: 1px solid var(--line); border-radius: 12px; padding: 14px 18px; margin-top: 12px; }
.ci-card.today { border-color: var(--ok); background: #F6FBF8; }
.ci-card h2 { font-size: 1.4rem; margin: 0 0 2px; }
.ci-act { display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }
body.login-page { background: linear-gradient(160deg, var(--cream), var(--bg)); min-height: 100vh; }
.login-wrap { max-width: 420px; margin: 0 auto; padding: 90px 16px 40px; }
.login-wrap h1 { font-size: 1.25rem; margin-bottom: 2px; }

/* ---------- พิมพ์ ---------- */
body.print-page { background: #fff; }
.ticket-print { max-width: 620px; margin: 24px auto; padding: 24px; border: 2px dashed var(--orange-line); border-radius: 16px; }
.tp-head { display: flex; gap: 12px; align-items: center; margin-bottom: 14px; }
.tp-ref { text-align: center; background: var(--cream); border-radius: 12px; padding: 12px; margin-bottom: 12px; }
.tp-ref small { display: block; color: var(--muted); }
.tp-ref b { font-size: 2.2rem; letter-spacing: .12em; }
.tp-table { width: 100%; border-collapse: collapse; margin-bottom: 12px; }
.tp-table th { text-align: left; width: 34%; color: var(--muted); font-weight: 500; padding: 6px 0; vertical-align: top; }
.tp-table td { padding: 6px 0; border-bottom: 1px solid var(--line-2); }
.print-list { padding: 20px; }
.print-list .table td { border-bottom: 1px solid #ccc; }
@media print {
  .no-print { display: none !important; }
  .ticket-print { border-color: #999; margin: 0 auto; }
  .print-list { padding: 0; }
  body { font-size: 12.5px; }
}

/* ---------- จอเล็ก ---------- */
@media (max-width: 900px) {
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .row-4 { grid-template-columns: repeat(2, 1fr); }
  .sidebar { transform: translateX(-100%); transition: transform .2s; box-shadow: 0 0 30px rgba(0,0,0,.15); }
  .sidebar.open { transform: none; }
  .shell { margin-left: 0; }
  .nav-toggle { display: inline-flex; }
  .content { padding: 16px; }
  .topbar { padding: 10px 16px; }
  .topbar-user { display: none; }
}
@media (max-width: 720px) {
  .hero { grid-template-columns: 1fr; gap: 50px; }
  .hero h1 { font-size: 1.75rem; }
  .grid-2, .grid-3, .row-2 { grid-template-columns: 1fr; }
  .pub-nav span { display: none; }
  .brand-text small { display: none; }
  .ticket { grid-template-columns: 1fr; }
  .ticket-ref { border-left: 0; border-top: 2px dashed var(--orange-line); }
  .profile { display: block; position: relative; }
  .profile-mascot { position: absolute; right: 12px; top: 12px; width: 50px; }
  .profile h1, .profile-main > p:first-child { padding-right: 58px; }
  .profile-act { margin-top: 8px; }
  .ci-card { flex-direction: column; align-items: stretch; }
  .ci-act { align-items: stretch; }
  .card { padding: 16px; }
  .bar-row span { width: 110px; }
}

/* =====================================================================
   หน้านักศึกษา (หลังเข้าสู่ระบบ) — โทนน้องมีทุน: แถบซ้ายน้ำตาลเข้ม + ส้มทอง + พื้นครีม
   ===================================================================== */
:root { --brown: #2A1D15; --brown-2: #3A281C; --brown-line: rgba(255,255,255,.08); --sand: #FFF4E6; --grad: linear-gradient(135deg, #F7931E 0%, #E8731A 55%, #D9531E 100%); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
body.portal { background: radial-gradient(1200px 500px at 85% -10%, #FFE7C9 0, transparent 60%), linear-gradient(180deg, #FFF8EF, #F6F1EA); min-height: 100vh; }
.pt { display: grid; grid-template-columns: 272px minmax(0, 1fr); min-height: 100vh; }
.pt-side { position: sticky; top: 0; height: 100vh; overflow-y: auto; background: linear-gradient(180deg, var(--brown) 0, #24180F 100%); color: #E9DCCD; display: flex; flex-direction: column; padding: 14px 12px; gap: 12px; z-index: 40; }
.pt-brand { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; padding: 4px 6px; }
.pt-brand:hover { color: #fff; }
.pt-brand b { display: block; font-size: .98rem; line-height: 1.25; }
.pt-brand small { display: block; font-size: .68rem; color: #B9A794; }
.pt-logo { width: 42px; height: 42px; border-radius: 50%; background: #fff; display: grid; place-items: center; flex: none; box-shadow: 0 0 0 3px rgba(247,147,30,.35); }
.pt-logo img { width: 28px; height: auto; }
.pt-me { background: linear-gradient(160deg, var(--brown-2), #2E2017); border: 1px solid var(--brown-line); border-radius: 16px; padding: 14px; }
.pt-me-top { display: flex; gap: 10px; align-items: center; margin-bottom: 10px; }
.pt-avatar { width: 50px; height: 50px; flex: none; border-radius: 50%; background: var(--grad); display: grid; place-items: end center; overflow: hidden; box-shadow: 0 6px 14px rgba(232,115,26,.35); }
.pt-avatar img { width: 42px; margin-bottom: -6px; }
.pt-avatar.sm { width: 40px; height: 40px; } .pt-avatar.sm img { width: 34px; }
.pt-name { display: block; color: #fff; font-size: 1rem; line-height: 1.3; }
.pt-code { display: inline-block; margin-top: 3px; font-size: .78rem; letter-spacing: .04em; background: rgba(255,255,255,.08); color: #F6C38A; padding: 1px 8px; border-radius: 99px; font-variant-numeric: tabular-nums; }
.pt-info { margin: 0; display: grid; gap: 6px; font-size: .82rem; }
.pt-info div { display: grid; grid-template-columns: 62px 1fr; gap: 6px; }
.pt-info dt { color: #A8957F; } .pt-info dd { margin: 0; color: #EDE2D5; }
.pt-status { display: inline-block; background: rgba(76,175,80,.18); color: #9BE0A5; padding: 0 8px; border-radius: 99px; font-size: .78rem; }
.pt-status.warn { background: rgba(255,193,7,.16); color: #FFD27A; }
.pt-loan { margin-top: 12px; border-radius: 12px; padding: 10px 12px; background: linear-gradient(135deg, rgba(247,147,30,.22), rgba(217,83,30,.12)); border: 1px solid rgba(247,147,30,.45); }
.pt-loan small { display: block; color: #F1C9A0; font-size: .74rem; line-height: 1.35; }
.pt-loan b { display: block; color: #fff; font-size: 1.45rem; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.pt-nav { display: flex; flex-direction: column; gap: 2px; }
.pt-nav-h { font-size: .7rem; color: #8F7C68; letter-spacing: .08em; padding: 4px 10px; }
.pt-link { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border-radius: 11px; color: #D9C8B5; text-decoration: none; font: inherit; font-size: .93rem; background: none; border: 1px solid transparent; cursor: pointer; text-align: left; transition: background .15s, color .15s, transform .15s; }
.pt-link:hover { background: rgba(255,255,255,.06); color: #fff; transform: translateX(2px); }
.pt-link.on { background: linear-gradient(90deg, rgba(247,147,30,.28), rgba(247,147,30,.08)); border-color: rgba(247,147,30,.5); color: #fff; font-weight: 600; }
.pt-link.on .ico { color: #F7A23C; }
.pt-link span { flex: 1; }
.pt-dot { width: 9px; height: 9px; border-radius: 50%; background: #8F7C68; box-shadow: 0 0 0 3px rgba(255,255,255,.06); }
.pt-dot.s-received, .pt-dot.s-checking { background: #4FC3F7; } .pt-dot.s-fix { background: #FF7043; animation: pulse 1.6s infinite; } .pt-dot.s-approved, .pt-dot.s-transfer { background: #66BB6A; }
.pt-side-foot { margin-top: auto; border-top: 1px solid var(--brown-line); padding-top: 8px; }
.pt-side-foot form { margin: 0; }
.pt-asof { font-size: .7rem; color: #8F7C68; padding: 6px 12px 0; margin: 0; }
.pt-main { min-width: 0; display: flex; flex-direction: column; }
.pt-top { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 12px; padding: 12px 28px; background: rgba(255,250,244,.82); backdrop-filter: blur(10px); border-bottom: 1px solid #F0E4D6; }
.pt-top h1 { font-size: 1.08rem; margin: 0; flex: 1; display: flex; align-items: center; gap: 8px; }
.pt-top h1 .ico { color: var(--orange); }
.pt-menu { display: none; }
.pt-camp select { max-width: 340px; border-color: #EAD9C6; }
.pt-content { padding: 22px 28px 40px; max-width: 1180px; width: 100%; }
.pt-foot { padding: 14px 28px 90px; font-size: .82rem; color: var(--muted); }
.pt-mini { display: none; }

.pt-hero { position: relative; display: flex; align-items: center; gap: 20px; border-radius: 22px; padding: 24px 28px; margin-bottom: 18px; overflow: hidden;
  background: linear-gradient(120deg, #FFF0DC 0%, #FFE3C2 55%, #FFD3A3 100%); border: 1px solid #F8D3A6; }
.pt-hero::before, .pt-hero::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; }
.pt-hero::before { width: 260px; height: 260px; right: -60px; top: -90px; background: radial-gradient(circle, rgba(255,255,255,.75), transparent 65%); }
.pt-hero::after { width: 14px; height: 14px; right: 210px; top: 26px; background: #F7931E; opacity: .5; box-shadow: 60px 70px 0 -3px #F7931E, -40px 110px 0 -5px #D9531E, 120px 10px 0 -6px #fff; animation: drift 9s ease-in-out infinite; }
.pt-hero-txt { flex: 1; position: relative; z-index: 1; }
.pt-hero h2 { font-size: 1.5rem; color: #8A3A08; margin: 4px 0 6px; }
.pt-hero p { margin: 0 0 6px; color: #6A4A30; }
.pt-eyebrow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: .85rem; font-weight: 600; color: #B35A12 !important; }
.pt-meta { font-size: .86rem; display: flex; gap: 6px 14px; flex-wrap: wrap; align-items: center; }
.pt-hero-art { position: relative; width: 150px; flex: none; display: flex; justify-content: center; z-index: 1; }
.pt-hero-art img { width: 118px; filter: drop-shadow(0 10px 14px rgba(160,80,10,.25)); }
.pt-hero.sm .pt-hero-art img { width: 96px; }
.bubble { position: absolute; right: 110px; top: -4px; white-space: nowrap; background: #fff; border-radius: 14px; padding: 6px 12px; font-size: .82rem; font-weight: 600; color: #8A3A08; box-shadow: 0 6px 16px rgba(160,80,10,.15); transition: opacity .3s; }
.bubble::after { content: ""; position: absolute; right: -6px; top: 14px; border: 7px solid transparent; border-left-color: #fff; border-right: 0; }
.float { animation: float 4.5s ease-in-out infinite; }

.pt-state { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: #fff; border: 1px solid #F0E4D6; border-radius: 16px; padding: 14px 18px; margin-bottom: 18px; }
.pt-state .ico { color: var(--orange); } .pt-state span { color: var(--muted); font-size: .9rem; } .pt-state b { color: var(--orange-ink); font-size: 1.05rem; }
.pt-alert { display: flex; gap: 14px; align-items: center; border-radius: 16px; padding: 14px 18px; margin-bottom: 16px; border: 1px solid; }
.pt-alert img { width: 56px; flex: none; }
.pt-alert p { margin: 2px 0; } .pt-alert small { color: var(--muted); }
.pt-alert.warn { background: #FFF7E0; border-color: #F3DB97; } .pt-alert.info { background: #EAF6F6; border-color: #BFE1E2; }
.pt-alert.ok { background: var(--ok-soft); border-color: #BFDDC9; }

/* บัตรคิว */
.qticket { display: grid; grid-template-columns: 1fr 270px; border-radius: 22px; overflow: hidden; margin-bottom: 12px; box-shadow: 0 14px 34px rgba(160,80,10,.18); background: #fff; position: relative; }
.qt-main { background: var(--grad); color: #fff; padding: 22px 26px; position: relative; overflow: hidden; }
.qt-main::after { content: ""; position: absolute; right: -40px; bottom: -60px; width: 200px; height: 200px; border-radius: 50%; background: rgba(255,255,255,.12); }
.qt-label { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; background: rgba(255,255,255,.2); padding: 2px 10px; border-radius: 99px; }
.qt-day { margin: 10px 0 0; font-size: 1.05rem; opacity: .95; }
.qt-time { margin: 0; font-size: 2.6rem; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.qt-time small { font-size: 1.1rem; font-weight: 500; opacity: .9; }
.qt-sub { margin: 6px 0 0; font-size: .9rem; opacity: .95; }
.qt-sub .badge { background: rgba(255,255,255,.25); color: #fff; }
.qt-stub { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 18px; border-left: 2px dashed #F3CFA7; position: relative; text-align: center; }
.qt-stub::before, .qt-stub::after { content: ""; position: absolute; left: -12px; width: 22px; height: 22px; border-radius: 50%; background: #F8F1E8; }
.qt-stub::before { top: -11px; } .qt-stub::after { bottom: -11px; }
.qt-stub small { color: var(--muted); }
.qt-ref { font-size: 1.6rem; letter-spacing: .1em; color: var(--ink); font-variant-numeric: tabular-nums; }
.qt-ref.sm { font-size: .95rem; letter-spacing: .06em; background: var(--orange-soft); color: var(--orange-ink); padding: 2px 10px; border-radius: 8px; }
.qt-stub .btn { width: 100%; }
.qt-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 20px; }
.qt-actions form { margin: 0; }
.btn-ghost { background: transparent; border-color: #EAD9C6; color: var(--orange-ink); }
.qticket.pop { animation: pop .7s cubic-bezier(.2,1.4,.4,1) both; }

/* ตัวเลือกวันเวลา */
.picker { background: #fff; border: 1px solid #F0E4D6; border-radius: 22px; padding: 20px 22px 0; margin-bottom: 20px; box-shadow: 0 6px 24px rgba(120,70,20,.06); }
.pk-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.pk-head h3 { margin: 0; font-size: 1.1rem; }
.pk-legend { display: flex; gap: 6px 12px; align-items: center; font-size: .78rem; color: var(--muted); flex-wrap: wrap; }
.pk-legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; margin-right: -6px; }
.lv-hi i, i.lv-hi { background: #43A047; } i.lv-mid { background: #F9A825; } i.lv-full { background: #C9C2BA; }
.pk-days { display: flex; gap: 10px; overflow-x: auto; padding: 4px 2px 14px; scroll-snap-type: x mandatory; scrollbar-width: thin; }
.pk-day { scroll-snap-align: start; flex: 0 0 auto; width: 84px; display: flex; flex-direction: column; align-items: center; gap: 0; padding: 10px 6px 8px; border-radius: 16px; border: 1.5px solid #EFE3D5; background: #FFFCF8; cursor: pointer; font: inherit; color: var(--ink); position: relative; transition: transform .18s, box-shadow .18s, border-color .18s; }
.pk-day small { font-size: .72rem; color: var(--muted); }
.pk-day b { font-size: 1.6rem; line-height: 1.15; font-variant-numeric: tabular-nums; }
.pk-day span { font-size: .75rem; color: var(--ink-2); }
.pk-day em { font-style: normal; font-size: .7rem; font-weight: 600; margin-top: 5px; padding: 1px 8px; border-radius: 99px; background: #E8F5E9; color: #2E7D32; }
.pk-day.lv-mid em { background: #FFF3CD; color: #8A6100; }
.pk-day.lv-full { opacity: .55; } .pk-day.lv-full em { background: #EEE; color: #777; }
.pk-day:hover { transform: translateY(-3px); box-shadow: 0 8px 18px rgba(160,80,10,.12); }
.pk-day.on { background: var(--grad); border-color: transparent; color: #fff; box-shadow: 0 10px 22px rgba(232,115,26,.35); transform: translateY(-3px); }
.pk-day.on small, .pk-day.on span { color: rgba(255,255,255,.9); }
.pk-day.on em { background: rgba(255,255,255,.25); color: #fff; }
.pk-panel { display: none; animation: fadeUp .35s ease both; }
.pk-panel.on { display: block; }
.no-js .pk-panel { display: block; }
.pk-date { font-weight: 600; font-size: 1.02rem; color: #8A3A08; margin: 4px 0 10px; }
.pk-part { margin-bottom: 14px; }
.pk-part-h { display: inline-flex; align-items: center; gap: 6px; font-size: .85rem; font-weight: 600; color: var(--ink-2); margin-bottom: 8px; }
.pk-part-h .ico { color: var(--orange); }
.pk-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
.pk-slot { position: relative; display: grid; grid-template-columns: auto 1fr auto; grid-template-rows: auto auto; gap: 4px 12px; align-items: center; padding: 12px 14px; border-radius: 14px; border: 1.5px solid #EFE3D5; background: #fff; cursor: pointer; transition: border-color .15s, background .15s, transform .15s, box-shadow .15s; }
.pk-slot input { position: absolute; opacity: 0; pointer-events: none; }
.pk-time { grid-row: span 2; font-size: 1.2rem; font-weight: 700; font-variant-numeric: tabular-nums; min-width: 92px; }
.pk-time small { font-size: .82rem; font-weight: 500; color: var(--muted); }
.pk-bar { display: block; height: 7px; border-radius: 99px; background: #F1E9DF; overflow: hidden; }
.pk-bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #66BB6A, #43A047); transition: width .8s cubic-bezier(.2,.8,.2,1); }
.pk-slot.lv-mid .pk-bar i { background: linear-gradient(90deg, #FFCA28, #F9A825); }
.pk-slot.lv-full .pk-bar i { background: #C9C2BA; }
.pk-left { font-size: .8rem; color: #2E7D32; font-weight: 600; grid-column: 2; }
.pk-slot.lv-mid .pk-left { color: #8A6100; }
.pk-tick { grid-row: 1 / span 2; grid-column: 3; width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid #E2D4C4; display: grid; place-items: center; color: transparent; transition: all .2s; }
.pk-slot:hover { border-color: #F6C08A; transform: translateY(-2px); box-shadow: 0 8px 18px rgba(160,80,10,.08); }
.pk-slot:has(input:checked) { border-color: var(--orange); background: #FFF6EC; box-shadow: 0 0 0 3px rgba(232,115,26,.18); }
.pk-slot:has(input:checked) .pk-tick { background: var(--orange); border-color: var(--orange); color: #fff; transform: scale(1.1); }
.pk-slot:has(input:focus-visible) { outline: 2px solid var(--orange); outline-offset: 2px; }
.pk-slot.lv-full { cursor: not-allowed; background: #FAF7F3; }
.pk-slot.lv-full .pk-time, .pk-slot.lv-full .pk-left { color: #A79C90; }
.pk-slot.lv-full:hover { transform: none; box-shadow: none; border-color: #EFE3D5; }
.pk-slot.mine { border-color: var(--teal); background: var(--teal-soft); cursor: default; }
.pk-slot.mine .pk-left { color: var(--teal); }
.pk-confirm { position: sticky; bottom: 0; display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap; margin: 6px -22px 0; padding: 14px 22px; background: rgba(255,255,255,.94); backdrop-filter: blur(8px); border-top: 1px solid #F0E4D6; border-radius: 0 0 22px 22px; }
.pk-chosen { flex: 1; min-width: 180px; }
.pk-chosen small { display: block; color: var(--muted); font-size: .78rem; }
.pk-chosen b { color: var(--orange-ink); }
.pk-phone { display: flex; flex-direction: column; gap: 2px; font-size: .8rem; color: var(--ink-2); }
.pk-phone input { width: 170px; }
.btn[disabled] { opacity: .5; cursor: not-allowed; filter: grayscale(.3); }

/* การ์ดทั่วไป + เอกสาร */
.pt-card { background: #fff; border: 1px solid #F0E4D6; border-radius: 20px; padding: 18px 22px; margin-bottom: 16px; box-shadow: 0 6px 24px rgba(120,70,20,.05); }
.pt-card-h { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.pt-card-h h3 { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 1.05rem; }
.pt-card-h .ico { color: var(--orange); }
.pt-card.mini { display: flex; align-items: center; gap: 14px; }
.pt-card.mini > .ico { color: var(--orange); width: 26px; height: 26px; }
.pt-card.mini div { flex: 1; } .pt-card.mini small { display: block; color: var(--muted); }
.doc-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.doc-item label { display: flex; gap: 14px; align-items: flex-start; padding: 14px 16px; border-radius: 16px; background: #FFFAF4; border: 1px solid #F3E6D6; cursor: pointer; transition: background .2s, border-color .2s; }
.doc-item input { position: absolute; opacity: 0; }
.doc-no { width: 34px; height: 34px; flex: none; border-radius: 50%; background: var(--grad); color: #fff; font-weight: 700; display: grid; place-items: center; box-shadow: 0 4px 10px rgba(232,115,26,.3); }
.doc-body { flex: 1; } .doc-body b { display: block; line-height: 1.45; } .doc-body small { display: block; color: var(--muted); margin-top: 3px; line-height: 1.5; }
.doc-check { width: 28px; height: 28px; flex: none; border-radius: 9px; border: 1.5px solid #E2D4C4; display: grid; place-items: center; color: transparent; background: #fff; transition: all .2s; }
.doc-item label:has(input:checked) { background: #F1F8F2; border-color: #BFDDC9; }
.doc-item label:has(input:checked) .doc-check { background: var(--ok); border-color: var(--ok); color: #fff; }
.doc-item label:has(input:checked) .doc-no { background: var(--ok); box-shadow: none; }
.doc-item label:has(input:focus-visible) { outline: 2px solid var(--orange); outline-offset: 2px; }
.doc-progress { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.doc-progress .pk-bar { flex: 1; height: 9px; }
.pt-note { border-radius: 20px; padding: 18px 22px; margin-bottom: 16px; background: linear-gradient(120deg, #FFF6EA, #FFEEDB); border: 1px solid #F6D7B2; }
.pt-note.warn { background: linear-gradient(120deg, #FFF8E5, #FFF0CC); border-color: #F1D78E; }
.pt-note h3 { color: #A9500C; font-size: 1.05rem; display: flex; gap: 8px; align-items: center; }
.pt-note ol { margin: 0; padding-left: 22px; display: grid; gap: 6px; }
.pt-note li { color: #5A4330; line-height: 1.6; }
.pt-note li::marker { color: var(--orange); font-weight: 700; }
.pt-empty { text-align: center; padding: 40px 20px; background: #fff; border-radius: 22px; border: 1px dashed #EAD9C6; }
.pt-empty.sm { padding: 20px; margin-bottom: 18px; }
.pt-empty-img { width: 110px; }

/* ติดตามสถานะ */
.trk-hero { display: flex; align-items: center; gap: 22px; border-radius: 22px; padding: 22px 26px; margin-bottom: 16px; position: relative; overflow: hidden; color: #fff; background: linear-gradient(120deg, #2E8C8E, #1F6E8C); }
.trk-hero.tone-warn { background: linear-gradient(120deg, #F57C00, #D84315); }
.trk-hero.tone-ok { background: linear-gradient(120deg, #43A047, #2E7D32); }
.trk-hero h2 { font-size: 1.6rem; margin: 2px 0 4px; }
.trk-hero p { margin: 0 0 4px; opacity: .95; }
.trk-hero small, .trk-hero .muted { color: rgba(255,255,255,.8) !important; }
.trk-txt { flex: 1; position: relative; z-index: 1; }
.trk-mascot { width: 120px; position: relative; z-index: 1; filter: drop-shadow(0 10px 16px rgba(0,0,0,.2)); }
.trk-hero::after { content: ""; position: absolute; right: -80px; top: -80px; width: 280px; height: 280px; border-radius: 50%; background: rgba(255,255,255,.1); }
.trk-ring { position: relative; width: 112px; height: 112px; flex: none; z-index: 1; }
.trk-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.trk-ring circle { fill: none; stroke: rgba(255,255,255,.22); stroke-width: 10; }
.trk-ring .trk-ring-fg { stroke: #fff; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; animation: ring 1.4s .2s cubic-bezier(.2,.8,.2,1) forwards; }
.trk-ring b { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; font-variant-numeric: tabular-nums; }
.trk-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; position: relative; }
.trk-steps li { position: relative; text-align: center; padding: 0 6px; }
.trk-steps li::before { content: ""; position: absolute; top: 25px; left: -50%; right: 50%; height: 4px; background: #EFE5D9; border-radius: 4px; z-index: 0; }
.trk-steps li:first-child::before { display: none; }
.trk-steps li.st-done::before, .trk-steps li.st-now::before, .trk-steps li.st-warn::before { background: linear-gradient(90deg, #43A047, #66BB6A); }
.trk-dot { position: relative; z-index: 1; width: 54px; height: 54px; margin: 0 auto 10px; border-radius: 50%; display: grid; place-items: center; background: #F6F0E8; color: #B5A797; border: 3px solid #fff; box-shadow: 0 0 0 1px #EFE5D9; }
.trk-dot .ico { width: 22px; height: 22px; }
.trk-steps b { display: block; font-size: .92rem; line-height: 1.35; }
.trk-steps small { display: block; color: var(--muted); font-size: .78rem; line-height: 1.4; margin-top: 2px; }
.trk-steps em { display: inline-block; font-style: normal; font-size: .72rem; margin-top: 6px; padding: 1px 8px; border-radius: 99px; background: #F6F0E8; color: var(--muted); }
.trk-steps em.now { background: var(--orange-soft); color: var(--orange-ink); }
.st-done .trk-dot { background: linear-gradient(135deg, #66BB6A, #2E7D32); color: #fff; box-shadow: 0 6px 14px rgba(46,125,50,.3); }
.st-now .trk-dot { background: var(--grad); color: #fff; box-shadow: 0 0 0 6px rgba(232,115,26,.18); animation: pulse 2s infinite; }
.st-warn .trk-dot { background: linear-gradient(135deg, #FF8A65, #D84315); color: #fff; animation: pulse 1.6s infinite; }
.st-warn b { color: #C2410C; }
.st-todo b, .st-next b { color: #9A8D80; }

.pt-tabs { display: none; }

/* โหลดหน้า / motion */
.rv { opacity: 0; transform: translateY(14px); transition: opacity .55s ease, transform .55s cubic-bezier(.2,.8,.2,1); transition-delay: calc(var(--i, 0) * 70ms); }
.rv.in, .no-js .rv { opacity: 1; transform: none; }
.hero-bubble { margin-top: 16px; display: inline-block; background: #fff; border: 1px solid var(--orange-line); color: var(--orange-ink); font-weight: 600; font-size: .9rem; padding: 6px 14px; border-radius: 14px 14px 14px 4px; box-shadow: 0 6px 14px rgba(160,80,10,.08); }
.login-mascot { animation: float 4.5s ease-in-out infinite; }
.confetti { position: fixed; inset: 0; pointer-events: none; z-index: 200; }
.toast { position: fixed; left: 50%; bottom: 90px; transform: translateX(-50%) translateY(20px); background: var(--ink); color: #fff; padding: 8px 16px; border-radius: 99px; font-size: .88rem; opacity: 0; transition: all .3s; z-index: 210; }
.toast.on { opacity: 1; transform: translateX(-50%); }
@keyframes float { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(-8px) } }
@keyframes drift { 0%, 100% { transform: translate(0, 0) } 50% { transform: translate(-12px, 8px) } }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(232,115,26,.35) } 70% { box-shadow: 0 0 0 12px rgba(232,115,26,0) } 100% { box-shadow: 0 0 0 0 rgba(232,115,26,0) } }
@keyframes pop { 0% { transform: scale(.92); opacity: 0 } 100% { transform: scale(1); opacity: 1 } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(8px) } to { opacity: 1; transform: none } }
@keyframes ring { to { stroke-dashoffset: calc(100 - var(--p)) } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .rv { opacity: 1; transform: none; }
  .trk-ring .trk-ring-fg { stroke-dashoffset: calc(100 - var(--p)); }
}

@media (max-width: 960px) {
  .pt { grid-template-columns: 1fr; }
  .pt-side { position: fixed; left: 0; top: 0; bottom: 0; width: 280px; transform: translateX(-102%); visibility: hidden; transition: transform .25s ease, visibility .25s; }
  .pt-side.open { transform: none; visibility: visible; box-shadow: 10px 0 40px rgba(0,0,0,.25); }
  .pt-menu { display: inline-flex; }
  .pt-top { padding: 10px 16px; }
  .pt-content { padding: 16px 16px 30px; }
  .pt-foot { padding: 10px 16px 96px; }
  .pt-mini { display: flex; gap: 10px; align-items: center; background: linear-gradient(135deg, var(--brown), var(--brown-2)); color: #fff; border-radius: 18px; padding: 10px 14px; margin-bottom: 14px; }
  .pt-mini div { flex: 1; min-width: 0; } .pt-mini b { display: block; font-size: .95rem; } .pt-mini small { display: block; color: #CDBBA7; font-size: .75rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pt-mini .pt-mini-loan { flex: none; text-align: right; } .pt-mini-loan b { color: #F7B35C; font-variant-numeric: tabular-nums; }
  .pt-tabs { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; background: rgba(42,29,21,.97); backdrop-filter: blur(8px); padding: 6px 6px calc(6px + env(safe-area-inset-bottom)); }
  .pt-tabs a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; color: #BFAE9B; text-decoration: none; font-size: .7rem; padding: 6px 2px; border-radius: 12px; }
  .pt-tabs a.on { color: #fff; background: rgba(247,147,30,.25); }
  .pt-tabs a.on .ico { color: #F7A23C; }
  .pt-camp { width: 100%; order: 3; } .pt-camp select { max-width: none; width: 100%; }
  .pt-top { flex-wrap: wrap; }
}
@media (max-width: 640px) {
  .pt-hero { padding: 18px; gap: 10px; }
  .pt-hero h2 { font-size: 1.2rem; }
  .pt-hero-art { width: 84px; } .pt-hero-art img, .pt-hero.sm .pt-hero-art img { width: 78px; }
  .bubble { display: none; }
  .qticket { grid-template-columns: 1fr; }
  .qt-stub { border-left: 0; border-top: 2px dashed #F3CFA7; flex-direction: row; flex-wrap: wrap; }
  .qt-stub::before { left: -11px; top: -12px; } .qt-stub::after { left: auto; right: -11px; top: -12px; bottom: auto; }
  .qt-stub small { width: 100%; } .qt-stub .btn { width: auto; flex: 1; }
  .qt-time { font-size: 2.1rem; }
  .picker { padding: 16px 14px 0; border-radius: 18px; }
  .pk-confirm { margin: 6px -14px 0; padding: 12px 14px; }
  .pk-confirm .btn { width: 100%; } .pk-phone, .pk-phone input { width: 100%; }
  .pk-slots { grid-template-columns: 1fr; }
  .pk-day { width: 72px; }
  .trk-hero { flex-wrap: wrap; padding: 18px; gap: 14px; }
  .trk-ring { width: 86px; height: 86px; } .trk-ring b { font-size: 1.15rem; }
  .trk-mascot { position: absolute; right: 10px; top: 10px; width: 70px; opacity: .9; }
  .trk-txt { flex-basis: 100%; }
  .trk-hero h2 { font-size: 1.25rem; padding-right: 70px; }
  .trk-steps { grid-template-columns: 1fr; gap: 0; }
  .trk-steps li { display: flex; gap: 14px; text-align: left; padding: 0 0 18px; }
  .trk-steps li::before { left: 25px; right: auto; top: -18px; width: 4px; height: 18px; }
  .trk-dot { margin: 0; width: 50px; height: 50px; flex: none; }
  .pt-alert img { width: 44px; }
}
@media (min-width: 961px) { .pt { background: linear-gradient(90deg, #24180F 272px, transparent 272px); } }
.trk-mascot { width: auto; max-width: 130px; max-height: 150px; }
.pt-alert img { width: auto; max-width: 56px; max-height: 70px; }
.nav-sub { display: block; margin: 10px 10px 2px; font-size: .74rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-link.nav-in { padding-left: 22px; }
.pager-bar { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.pager { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; }

/* ---------- ตารางคิวว่าง ---------- */
.wrap-wide { max-width: 1180px; }
body.pub .pt-hero { margin-top: 4px; }
.av-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.av-kpi { display: flex; gap: 12px; align-items: center; background: #fff; border: 1px solid #F0E4D6; border-radius: 18px; padding: 14px 16px; box-shadow: 0 6px 20px rgba(120,70,20,.05); }
.av-kpi > span { width: 42px; height: 42px; flex: none; border-radius: 13px; display: grid; place-items: center; background: var(--orange-soft); color: var(--orange); }
.av-kpi small { display: block; color: var(--muted); font-size: .8rem; }
.av-kpi b { font-size: 1.5rem; line-height: 1.25; font-variant-numeric: tabular-nums; }
.av-kpi b.sm { font-size: 1rem; }
.av-kpi em { font-style: normal; font-size: .82rem; font-weight: 500; color: var(--muted); }
.av-kpi.hi { background: linear-gradient(135deg, #F1F8F2, #E3F2E6); border-color: #C7E3CD; }
.av-kpi.hi > span { background: #fff; color: #2E7D32; }
.av-grid-wrap { overflow-x: auto; border-radius: 14px; border: 1px solid #F0E4D6; }
.av-grid { border-collapse: separate; border-spacing: 4px; min-width: 100%; font-variant-numeric: tabular-nums; }
.av-grid th, .av-grid td { text-align: center; padding: 0; }
.av-corner, .av-th { position: sticky; left: 0; z-index: 2; background: #fff; font-size: .8rem; color: var(--muted); font-weight: 500; padding: 4px 8px !important; white-space: nowrap; text-align: right !important; }
.av-th { color: var(--ink); font-weight: 600; }
.av-th small { color: var(--muted); font-weight: 400; }
.av-dh a { display: flex; flex-direction: column; align-items: center; min-width: 54px; padding: 6px 4px; border-radius: 12px; text-decoration: none; color: var(--ink); background: #FFFAF4; border: 1px solid #F3E6D6; line-height: 1.15; transition: transform .15s, box-shadow .15s; }
.av-dh a:hover { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(160,80,10,.12); color: var(--ink); }
.av-dh small { font-size: .68rem; color: var(--muted); } .av-dh b { font-size: 1.15rem; } .av-dh span { font-size: .68rem; color: var(--ink-2); }
.av-dh.lv-hi a { border-color: #BFE0C5; } .av-dh.lv-full a { opacity: .55; }
.av-c span { display: grid; place-items: center; min-width: 54px; height: 38px; border-radius: 10px; font-size: .88rem; font-weight: 700; transition: transform .15s; }
.av-c:hover span { transform: scale(1.06); }
.av-c.lv-hi span { background: #E3F2E6; color: #1E6B30; }
.av-c.lv-mid span { background: #FFF1C9; color: #8A6100; }
.av-c.lv-full span { background: #F1ECE6; color: #A79C90; font-weight: 500; font-size: .76rem; }
.av-na { color: #D8CEC3; }
.av-dayhead { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.av-daymeter { display: flex; align-items: center; gap: 10px; min-width: 220px; }
.av-daymeter .pk-bar { flex: 1; width: 140px; }
.av-slot { cursor: default; }
.av-slot:hover { transform: none; box-shadow: none; }
.av-pill { grid-row: 1 / span 2; grid-column: 3; font-size: .74rem; font-weight: 600; padding: 2px 10px; border-radius: 99px; background: #E8F5E9; color: #2E7D32; white-space: nowrap; }
.av-slot.lv-mid .av-pill { background: #FFF3CD; color: #8A6100; }
.av-slot.lv-full .av-pill { background: #EEE; color: #888; }
.av-cta { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; border-radius: 22px; padding: 16px 22px; margin: 6px 0 20px; background: linear-gradient(120deg, var(--brown), var(--brown-2)); color: #fff; }
.av-cta img { width: 64px; animation: float 4.5s ease-in-out infinite; }
.av-cta div { flex: 1; min-width: 200px; } .av-cta p { margin: 2px 0 0; color: #D9C8B5; font-size: .92rem; }
@media (max-width: 900px) { .av-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .av-kpi { padding: 12px; } .av-kpi > span { display: none; } .av-kpi b { font-size: 1.2rem; } .av-cta .btn { width: 100%; } }
.qt-bar { width: 100%; height: 58px; border-radius: 6px; }
.tp-bar { display: block; width: 280px; max-width: 100%; height: 70px; margin: 6px auto 4px; }
@media (max-width: 640px) { .qt-bar { max-width: none; height: 60px; } }
.ci-mode { margin: -4px 0 8px; } .ci-mode .check { font-size: .9rem; }

/* ---------- ตรวจสอบคิว ---------- */
.qc-form { display: flex; gap: 10px; align-items: center; position: relative; flex-wrap: wrap; }
.qc-form input { flex: 1 1 260px; height: 52px; padding-left: 46px; font-size: 1.05rem; border-radius: 14px; border-color: #EAD9C6; text-transform: uppercase; }
.qc-form input::placeholder { text-transform: none; }
.qc-ico { position: absolute; left: 16px; top: 15px; color: var(--orange); pointer-events: none; }
.qc-hit { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; margin-top: 14px; padding: 14px 16px; border-radius: 18px; background: linear-gradient(120deg, #FFF6EC, #FFE9D2); border: 1px solid #F6CFA4; animation: pop .5s cubic-bezier(.2,1.4,.4,1) both; }
.qc-hit-when { background: var(--grad); color: #fff; border-radius: 14px; padding: 10px 16px; min-width: 190px; }
.qc-hit-when small { display: block; opacity: .9; font-size: .75rem; } .qc-hit-when b { display: block; } .qc-hit-when span { font-size: 1.4rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.qc-hit-who { flex: 1; min-width: 200px; } .qc-hit-who b { display: block; font-size: 1.1rem; } .qc-hit-who small { color: var(--muted); } .qc-hit-who p { margin: 6px 0 0; }
.qc-note { margin: 12px 0 0; }
.qc-slots { display: grid; gap: 8px; }
.qc-slot { border: 1.5px solid #EFE3D5; border-radius: 14px; background: #fff; overflow: hidden; transition: border-color .15s; }
.qc-slot[open] { border-color: #F6C08A; box-shadow: 0 6px 18px rgba(160,80,10,.08); }
.qc-slot summary { list-style: none; display: grid; grid-template-columns: 110px 1fr auto 24px; gap: 12px; align-items: center; padding: 12px 14px; cursor: pointer; }
.qc-slot summary::-webkit-details-marker { display: none; }
.qc-slot summary:hover { background: #FFFBF6; }
.qc-count { font-size: .85rem; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; } .qc-count b { color: var(--ink); font-size: 1rem; }
.qc-caret { display: grid; place-items: center; color: var(--muted); transform: rotate(-90deg); transition: transform .2s; }
.qc-slot[open] .qc-caret { transform: rotate(90deg); color: var(--orange); }
.qc-people { list-style: none; margin: 0; padding: 4px 14px 14px; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 6px; animation: fadeUp .3s ease both; }
.qc-people li { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 10px; background: #FAF6F1; font-size: .9rem; }
.qc-people li.me { background: #FFE9D2; box-shadow: 0 0 0 2px var(--orange) inset; font-weight: 600; }
.qc-people li.came { background: #F1F8F2; }
.qc-no { width: 30px; height: 26px; flex: none; border-radius: 8px; display: grid; place-items: center; background: #fff; border: 1px solid #EFE3D5; font-size: .78rem; font-weight: 700; color: var(--orange-ink); font-variant-numeric: tabular-nums; }
.qc-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qc-code { font-size: .78rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.qc-came { color: var(--ok); display: grid; }
.qc-none { padding: 0 14px 12px; margin: 0; }
.pk-day.past { opacity: .6; }
@media (max-width: 640px) { .qc-slot summary { grid-template-columns: 84px 1fr auto 18px; gap: 8px; } .qc-form .btn { flex: 1; } .qc-hit-when { width: 100%; } }

/* ---------- รองรับหลายอุปกรณ์ ---------- */
:root { color-scheme: light; }
html { -webkit-tap-highlight-color: rgba(232,115,26,.12); }
/* เบราว์เซอร์ที่ไม่มี :has() */
.pk-slot.is-checked { border-color: var(--orange); background: #FFF6EC; box-shadow: 0 0 0 3px rgba(232,115,26,.18); }
.pk-slot.is-checked .pk-tick { background: var(--orange); border-color: var(--orange); color: #fff; }
.doc-item label.is-checked { background: #F1F8F2; border-color: #BFDDC9; }
.doc-item label.is-checked .doc-check { background: var(--ok); border-color: var(--ok); color: #fff; }
.doc-item label.is-checked .doc-no { background: var(--ok); box-shadow: none; }
.chip.is-checked { border-color: var(--orange); background: var(--orange-soft); color: var(--orange-ink); }
.slot.is-checked { border-color: var(--orange); background: var(--orange-soft); }
/* จอสัมผัส: ไม่เลื่อนการ์ดเมื่อแตะ */
.touch .pk-day:hover:not(.on), .touch .pk-slot:hover, .touch .pt-link:hover, .touch .av-dh a:hover { transform: none; box-shadow: none; }
/* iPhone: ช่องกรอกเล็กกว่า 16px จะซูมหน้าจอ */
@media (max-width: 960px) { input, select, textarea { font-size: 16px; } }
/* ความสูงจอมือถือ (แถบที่อยู่เว็บยืด/หด) */
.pt-side { height: 100vh; height: 100dvh; }
/* จอแคบมาก (≤ 360px) */
@media (max-width: 360px) {
  .pt-content { padding: 12px 10px 24px; }
  .pt-top h1 { font-size: .98rem; }
  .pk-day { width: 64px; } .pk-day b { font-size: 1.35rem; }
  .pk-time { min-width: 80px; font-size: 1.05rem; }
  .qt-time { font-size: 1.8rem; }
  .pt-tabs a span { font-size: .62rem; }
  .pub-nav { gap: 10px; }
}
/* แท็บเล็ตแนวนอน / จอใหญ่ */
@media (min-width: 1600px) { .pt-content { max-width: 1320px; } }
/* แถบเมนูล่างไม่บังเนื้อหา + รองรับรอยบากจอ */
@media (max-width: 960px) {
  .pt-tabs { padding-left: max(6px, env(safe-area-inset-left)); padding-right: max(6px, env(safe-area-inset-right)); }
  .pk-confirm { bottom: calc(64px + env(safe-area-inset-bottom)); }
  .pt-top { padding-top: max(10px, env(safe-area-inset-top)); }
}
@media print { .pt-side, .pt-top, .pt-tabs, .pt-foot, .pt-mini { display: none !important; } .pt { display: block; } }
@media (max-width: 640px) {
  .pt-hero .pt-meta { font-size: .8rem; }
  .pt-hero p:not(.pt-eyebrow):not(.pt-meta) { font-size: .9rem; }
  .pt-tabs a span { white-space: nowrap; }
}
@media (max-width: 640px) {
  .pk-confirm { gap: 8px; padding: 10px 14px; align-items: center; }
  .pk-chosen { flex-basis: 100%; min-width: 0; }
  .pk-chosen small { display: inline; } .pk-chosen b { font-size: .9rem; }
  .pk-phone { flex: 1 1 100px; width: auto !important; min-width: 0; } .pk-phone span { display: none; } .pk-phone input { height: 44px; width: 100%; padding: 0 8px; }
  .pk-confirm .btn { width: auto !important; flex: 1 1 130px; height: 44px; padding: 0 12px; font-size: .95rem; }
  .pk-chosen small::after { content: " "; }
}

.pin-input { letter-spacing: .6em; font-size: 1.4rem !important; text-align: center; font-variant-numeric: tabular-nums; }
.pin-input::placeholder { letter-spacing: .3em; }

/* เมนูข้างบนมือถือ: อยู่เหนือแถบเมนูล่าง + มีพื้นหลังมืดกดปิดได้ */
@media (max-width: 960px) {
  .pt-side, .sidebar { z-index: 70; }
  .drawer-open body::after { content: ""; position: fixed; inset: 0; background: rgba(20,12,6,.45); z-index: 65; animation: fadeUp .2s ease both; }
  .drawer-open body { overflow: hidden; }
}
/* ข้อความน้องมีทุนไม่ทับหัวข้อบนจอกลาง */
.bubble { white-space: normal; max-width: 210px; width: max-content; text-align: center; line-height: 1.35; }
@media (max-width: 1100px) { .bubble { right: 96px; max-width: 170px; font-size: .78rem; } }
/* รูปไม่ล้นกรอบ */
.pt-content img, .content img { max-width: 100%; height: auto; }
.danger-zone { border-color: #EBC3BA; background: #FFFAF8; }
.danger-zone h2 { color: var(--danger); }

/* ผู้ใช้งาน / สิทธิ์ */
.user-list { display: grid; gap: 14px; }
.user-card { border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; background: #fff; }
.user-card.off { opacity: .72; background: #fafafa; }
.user-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.user-ava { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--orange-soft); color: var(--orange-ink); font-weight: 700; flex: none; }
.user-id { flex: 1; min-width: 140px; display: flex; flex-direction: column; }
.user-id small { font-size: .78rem; }
.user-foot { display: flex; gap: 8px; flex-wrap: wrap; justify-content: space-between; border-top: 1px dashed var(--line); padding-top: 10px; margin-top: 10px; }
.user-foot form { margin: 0; }
.perm-wrap > p { margin: 10px 0 6px; }
.perm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.perm { display: flex; gap: 9px; align-items: flex-start; border: 1px solid var(--line); border-radius: 12px; padding: 9px 11px; cursor: pointer; }
.perm input { margin-top: 4px; flex: none; }
.perm span { display: flex; flex-direction: column; line-height: 1.35; }
.perm small { color: var(--muted, #6b7280); font-size: .78rem; }
.perm:has(input:checked), .perm.is-checked { border-color: var(--orange); background: var(--orange-soft); }
@media (max-width: 560px) { .perm-grid { grid-template-columns: 1fr; } }

/* ---------- กระดานการมาตามนัด (รับคิว / เช็คอิน) ---------- */
.cb { --c-came: #2F9E5B; --c-wait: #F2A33A; --c-miss: #D9614C; --c-free: #EFE7DC; }
.cb-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.cb-head h2 { margin: 0; display: inline-flex; align-items: center; gap: 8px; }
.cb-live { display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; color: var(--ok); background: var(--ok-soft); padding: 2px 10px; border-radius: 99px; }
.cb-live i { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); animation: cbPulse 1.8s infinite; }
.cb-camp { margin-left: auto; } .cb-camp select { max-width: 340px; }
@keyframes cbPulse { 0% { box-shadow: 0 0 0 0 rgba(47,125,79,.5); } 70% { box-shadow: 0 0 0 7px rgba(47,125,79,0); } 100% { box-shadow: 0 0 0 0 rgba(47,125,79,0); } }

a.pk-day { text-decoration: none; }
.cb-day { width: 88px; padding-bottom: 12px; }
.cb-day em { background: #F3EEE7; color: var(--ink-2); }
.cb-day.is-today:not(.on) { border-color: var(--orange); }
.cb-day.is-today:not(.on) small { color: var(--orange-ink); font-weight: 600; }
.cb-day-bar { position: absolute; left: 12px; right: 12px; bottom: 5px; height: 4px; border-radius: 4px; background: #EFE7DC; overflow: hidden; }
.cb-day-bar i { display: block; height: 100%; background: var(--c-came); border-radius: 4px; }
.cb-day.on .cb-day-bar { background: rgba(255,255,255,.3); } .cb-day.on .cb-day-bar i { background: #fff; }

.cb-sum { display: flex; gap: 20px; align-items: center; background: linear-gradient(135deg, #FFF8EF, #FFFDF9); border: 1px solid #F2E4D2; border-radius: 18px; padding: 14px 18px; margin: 4px 0 16px; }
.cb-ring { --p: 0; flex: none; width: 108px; height: 108px; border-radius: 50%; display: grid; place-content: center; text-align: center;
  background: radial-gradient(closest-side, #fff 76%, transparent 77% 100%), conic-gradient(var(--c-came) calc(var(--p) * 1%), #EFE7DC 0); }
.cb-ring b { font-size: 1.85rem; line-height: 1; font-variant-numeric: tabular-nums; color: #1F6B3F; }
.cb-ring b small { font-size: .9rem; } .cb-ring span { font-size: .75rem; color: var(--muted); }
.cb-sum-txt { flex: 1; min-width: 0; }
.cb-sum-txt .pk-date { margin: 0 0 8px; }
.cb-sum-txt > p:last-child { margin: 8px 0 0; }
.cb-stack { display: flex; height: 12px; border-radius: 99px; background: var(--c-free); overflow: hidden; }
.cb-stack i { display: block; height: 100%; transition: width .5s ease; }
.cb-stack.sm { height: 7px; }
.s-came { background: var(--c-came); } .s-wait { background: var(--c-wait); } .s-miss { background: var(--c-miss); } .s-free { background: var(--c-free); }
.cb-kpis { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 9px; font-size: .88rem; color: var(--ink-2); }
.cb-kpis b { font-size: 1.15rem; font-variant-numeric: tabular-nums; margin-right: 2px; color: var(--ink); }
.cb-kpis .k-came b { color: #1F7A45; } .cb-kpis .k-wait b { color: #B26A00; } .cb-kpis .k-miss b, .cb-nums .k-miss { color: var(--c-miss); }

.cb-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.cb-slot { position: relative; display: flex; flex-direction: column; gap: 7px; padding: 11px 14px 10px; border-radius: 14px; border: 1.5px solid #EFE3D5; background: #FFFCF8; color: var(--ink); text-decoration: none; transition: transform .15s, box-shadow .15s, border-color .15s; }
.cb-slot:hover { color: var(--ink); transform: translateY(-2px); box-shadow: 0 8px 18px rgba(160,80,10,.10); }
.cb-time { display: flex; align-items: baseline; gap: 4px; font-size: .85rem; color: var(--muted); flex-wrap: wrap; padding-right: 46px; }
.cb-time b { font-size: 1.2rem; color: var(--ink); font-variant-numeric: tabular-nums; }
.cb-time em { font-style: normal; font-size: .7rem; font-weight: 600; padding: 1px 8px; border-radius: 99px; margin-left: 4px; align-self: center; }
.cb-now { background: var(--orange); color: #fff; animation: cbBlink 2s infinite; }
.cb-done { background: #EEE; color: #777; }
@keyframes cbBlink { 50% { opacity: .65; } }
.cb-nums { font-size: .82rem; color: var(--ink-2); } .cb-nums b { font-size: 1rem; color: #1F7A45; }
.cb-pct { position: absolute; top: 10px; right: 12px; font-weight: 700; font-size: .95rem; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.cb-pct.hi { color: #1F7A45; } .cb-pct.lo { color: var(--c-miss); }
.cb-camp-t { font-size: .72rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cb-slot.st-now { border-color: var(--orange); background: #FFF6EC; box-shadow: 0 0 0 3px rgba(232,115,26,.12); }
.cb-slot.st-past { background: #FAF8F5; }
.cb-slot.empty { opacity: .55; }
.cb-slot.on { border-color: transparent; background: #fff; box-shadow: 0 0 0 2.5px var(--orange), 0 10px 22px rgba(232,115,26,.18); }
.cb-legend { display: flex; flex-wrap: wrap; gap: 14px; margin: 2px 0 14px; }
.cb-legend span { display: inline-flex; align-items: center; gap: 6px; } .cb-legend i { width: 12px; height: 8px; border-radius: 3px; display: inline-block; }

.cb-list { border-top: 1px dashed var(--line); padding-top: 14px; scroll-margin-top: 70px; }
.cb-list-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.cb-list-h h3 { margin: 0; font-size: 1.1rem; }
.cb-filter { display: flex; gap: 6px; flex-wrap: wrap; }
.cb-filter a { padding: 4px 12px; border-radius: 99px; border: 1px solid var(--line); background: #fff; color: var(--ink-2); text-decoration: none; font-size: .85rem; }
.cb-filter a b { font-variant-numeric: tabular-nums; margin-left: 2px; }
.cb-filter a.on { background: var(--ink); border-color: var(--ink); color: #fff; }
.cb-filter a.f-came:not(.on) b { color: #1F7A45; } .cb-filter a.f-wait:not(.on) b { color: #B26A00; } .cb-filter a.f-miss:not(.on) b { color: var(--c-miss); }
.cb-people { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.cb-p { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 8px 12px; border-radius: 12px; border: 1px solid var(--line-2); background: #fff; border-left: 4px solid var(--c-wait); }
.cb-p.k-came { border-left-color: var(--c-came); background: #F6FBF8; }
.cb-p.k-miss { border-left-color: var(--c-miss); background: #FDF8F7; }
.cb-q { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font-weight: 700; font-size: 1.05rem; background: #FFF1E2; color: var(--orange-ink); font-variant-numeric: tabular-nums; }
.cb-p.k-came .cb-q { background: #E3F4EA; color: #1F7A45; } .cb-p.k-miss .cb-q { background: #FBE6E2; color: var(--c-miss); }
.cb-who { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.cb-who b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cb-who small { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cb-st .badge { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.cb-st .ico { width: 14px; height: 14px; }
.cb-go { margin: 0; } .cb-go .btn { min-height: 38px; }
.cb-none { padding: 14px 0; }
@media (max-width: 640px) {
  .cb-sum { flex-direction: column; align-items: stretch; text-align: left; padding: 14px; gap: 12px; }
  .cb-ring { margin: 0 auto; width: 96px; height: 96px; }
  .cb-slots { grid-template-columns: 1fr 1fr; gap: 8px; }
  .cb-slot { padding: 10px; } .cb-time { padding-right: 34px; } .cb-time b { font-size: 1.05rem; } .cb-pct { font-size: .85rem; right: 9px; }
  .cb-p { grid-template-columns: 38px minmax(0, 1fr) auto; gap: 8px; padding: 8px; }
  .cb-q { width: 36px; height: 36px; }
  .cb-st { grid-column: 2; grid-row: 2; }
  .cb-go { grid-column: 3; grid-row: 1 / span 2; }
  .cb-camp { margin-left: 0; width: 100%; } .cb-camp select { max-width: 100%; width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .cb-live i, .cb-now { animation: none; } }
.cb-day.on, .cb-day.past.on { opacity: 1; }

/* ส่วนที่ย่อ/ขยายได้ */
.cb-tools { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-left: auto; }
.cb-head .cb-camp { margin-left: 0; flex-basis: 100%; }
.cb-tg, .cb-tg-all { font: inherit; font-size: .82rem; border: 1px solid var(--line); background: #fff; color: var(--muted); border-radius: 99px; padding: 3px 11px; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
.cb-tg[aria-pressed="true"] { background: var(--orange-soft); border-color: var(--orange-line); color: var(--orange-ink); font-weight: 600; }
.cb-tg[aria-pressed="true"]::before { content: "✓"; font-size: .75rem; }
.cb-tg:disabled { opacity: .4; cursor: default; }
.cb-tg-all { border-style: dashed; } .cb-tg-all .ico { width: 14px; height: 14px; }
.cb-tg:hover, .cb-tg-all:hover { border-color: var(--orange); }
.no-js .cb-tools { display: none; }
details.cb-sec { margin: 0 0 12px; }
details.cb-sec > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 12px; border-radius: 12px; background: #FBF7F2; border: 1px solid #F2E8DC; user-select: none; }
details.cb-sec > summary::-webkit-details-marker { display: none; }
details.cb-sec > summary::after { content: ""; margin-left: auto; width: 9px; height: 9px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); transition: transform .2s; flex: none; }
details.cb-sec[open] > summary::after { transform: rotate(-135deg); }
details.cb-sec[open] > summary { margin-bottom: 10px; }
details.cb-sec > summary:hover { border-color: var(--orange-line); }
.cb-sec-t { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--ink); }
.cb-sec-m { font-size: .82rem; color: var(--muted); } .cb-sec-m b { color: #1F7A45; }
details.cb-sec[open] > summary .cb-sec-m { display: none; }
details.cb-sec > .cb-sum { margin-top: 0; }
details.cb-list { border-top: 0; padding-top: 0; }
details.card.cb-unlock > summary { background: transparent; border: 0; padding: 0; }
details.card.cb-unlock[open] > summary { margin-bottom: 12px; }
@media (max-width: 640px) {
  .cb-tools { margin-left: 0; width: 100%; }
  .cb-tg-all span { display: none; }
  details.cb-sec > summary { padding: 8px 10px; }
}

/* =================== เกมจับคู่น้องมีทุน =================== */
.pt-link-game .pt-new { margin-left: auto; font-style: normal; font-size: .62rem; font-weight: 700; padding: 1px 7px; border-radius: 99px; background: linear-gradient(90deg, #F7931E, #FFC23D); color: #3A1F05; }
.gm { --g1: #F7931E; --g2: #FFC23D; --g3: #E8731A; --gd: #B8860B; --gm-ink: #3A1F05; }
.gm-hero { position: relative; overflow: hidden; display: flex; align-items: center; gap: 18px; padding: 22px 26px; border-radius: 22px; margin-bottom: 18px;
  background: radial-gradient(circle at 85% 30%, rgba(255,214,102,.55), transparent 45%), linear-gradient(120deg, #2A1D15 0%, #4A2A12 55%, #8A4A10 100%); color: #FFF3E0; }
.gm-hero::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,214,102,.35) 1px, transparent 1.5px); background-size: 22px 22px; opacity: .35; pointer-events: none; }
.gm-hero-txt { position: relative; flex: 1; min-width: 0; }
.gm-kicker { display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; font-weight: 600; color: #FFD27A; background: rgba(255,194,61,.14); border: 1px solid rgba(255,194,61,.35); padding: 3px 12px; border-radius: 99px; }
.gm-hero h2 { margin: 10px 0 6px; font-size: 1.75rem; line-height: 1.2; color: #fff; }
.gm-hero h2 span { background: linear-gradient(90deg, #FFD166, #F7931E); -webkit-background-clip: text; background-clip: text; color: transparent; }
.gm-hero p { margin: 0; color: #F3DFC6; max-width: 560px; } .gm-hero p b { color: #FFD166; }
.gm-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.gm-chip { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; padding: 4px 12px; border-radius: 99px; background: rgba(255,255,255,.1); color: #FFE9C7; }
.gm-chip b { color: #fff; font-variant-numeric: tabular-nums; } .gm-chip .ico { width: 15px; height: 15px; color: #FFC23D; }
.gm-hero-art { position: relative; flex: none; width: 150px; height: 150px; }
.gm-hero-m { width: 150px; height: 150px; object-fit: contain; filter: drop-shadow(0 10px 18px rgba(0,0,0,.35)); animation: gmFloat 3.6s ease-in-out infinite; }
.gm-spark { position: absolute; width: 14px; height: 14px; background: #FFD166; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); animation: gmTwinkle 2.2s ease-in-out infinite; }
.gm-spark.s1 { top: 6px; left: 4px; } .gm-spark.s2 { top: 40px; right: -2px; width: 10px; height: 10px; animation-delay: .7s; } .gm-spark.s3 { bottom: 14px; left: 10px; width: 9px; height: 9px; animation-delay: 1.3s; }
@keyframes gmFloat { 50% { transform: translateY(-9px) rotate(-2deg); } }
@keyframes gmTwinkle { 0%, 100% { transform: scale(.4); opacity: .3; } 50% { transform: scale(1.15); opacity: 1; } }

.gm-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 18px; align-items: start; }
.gm-play { background: #fff; border: 1px solid #F2E4D2; border-radius: 22px; padding: 16px; box-shadow: 0 10px 30px rgba(160,80,10,.08); min-width: 0; }
.gm-hud { display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px; margin-bottom: 14px; }
.gm-stat { display: flex; flex-direction: column; justify-content: center; padding: 6px 14px; border-radius: 14px; background: #FFF7EC; border: 1px solid #F6E3C9; min-width: 82px; }
.gm-stat small { font-size: .72rem; color: #9A6A3A; } .gm-stat small b { color: var(--gm-ink); }
.gm-stat > b { font-size: 1.3rem; line-height: 1.15; color: var(--gm-ink); font-variant-numeric: tabular-nums; }
.gm-pairs { flex: 1; min-width: 150px; }
.gm-dots { display: flex; gap: 4px; margin-top: 4px; }
.gm-dots i { flex: 1; height: 8px; border-radius: 4px; background: #F1E2CC; transition: background .3s, transform .3s; }
.gm-dots i.on { background: linear-gradient(90deg, var(--g1), var(--g2)); transform: scaleY(1.2); }
.gm-combo.hot { background: linear-gradient(135deg, #FFE7B3, #FFC23D); border-color: #F5B024; animation: gmHot .8s ease-in-out infinite alternate; }
@keyframes gmHot { to { box-shadow: 0 0 0 4px rgba(255,194,61,.3); } }
.gm-btns { display: flex; gap: 6px; margin-left: auto; }
.gm-btn { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 58px; padding: 6px 10px; border-radius: 14px; border: 1px solid #F0D9BA; background: #fff; color: var(--gm-ink); font: inherit; font-size: .72rem; cursor: pointer; transition: transform .15s, background .15s; }
.gm-btn:hover:not(:disabled) { background: #FFF3E2; transform: translateY(-1px); }
.gm-btn:disabled { opacity: .4; cursor: default; }

.gm-stage { position: relative; border-radius: 18px; padding: 12px; background: radial-gradient(circle at 50% 0, #FFF4DF, #FFE9C8 70%); min-height: 280px; }
.gm-board { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; transition: filter .35s; }
.gm-stage.is-blur .gm-board { filter: blur(14px) saturate(.7); pointer-events: none; }
.gm-stage.is-idle .gm-board { filter: blur(2px); }
.gm-card { position: relative; aspect-ratio: 3 / 4; padding: 0; border: 0; background: none; cursor: pointer; perspective: 800px; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.gm-card:disabled { cursor: default; }
.gm-in { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .45s cubic-bezier(.3,1.3,.5,1); }
.gm-card.is-up .gm-in { transform: rotateY(180deg); }
.gm-back, .gm-face { position: absolute; inset: 0; border-radius: 14px; backface-visibility: hidden; -webkit-backface-visibility: hidden; display: grid; place-items: center; overflow: hidden; }
.gm-back { background: repeating-linear-gradient(45deg, rgba(255,255,255,.14) 0 6px, transparent 6px 14px), linear-gradient(145deg, var(--g2), var(--g1) 55%, var(--g3)); border: 2px solid rgba(255,255,255,.65); box-shadow: 0 6px 14px rgba(170,85,10,.25), inset 0 -4px 0 rgba(0,0,0,.08); }
.gm-back img { width: 34%; height: auto; padding: 8%; box-sizing: content-box; background: rgba(255,255,255,.92); border-radius: 50%; box-shadow: 0 2px 6px rgba(0,0,0,.15); }
.gm-face { transform: rotateY(180deg); background: radial-gradient(circle at 50% 35%, #fff, #FFF1DA); border: 2px solid #F7C46C; box-shadow: 0 6px 14px rgba(170,85,10,.18); }
.gm-face img { position: absolute; left: 6%; top: 6%; width: 88%; height: 88%; object-fit: contain; object-position: center bottom; } /* วางแบบ absolute: Safari บน iPhone ไม่ตัดรูป */
.gm-card:not(:disabled):not(.is-up):hover .gm-in { transform: translateY(-4px) rotate(-1.5deg); }
.gm-card:not(:disabled):not(.is-up):hover .gm-back { box-shadow: 0 10px 20px rgba(170,85,10,.32), 0 0 0 3px rgba(255,194,61,.55); }
.gm-card.is-press .gm-in { transform: scale(.94); }
.gm-card.is-match .gm-face { border-color: #FFC23D; box-shadow: 0 0 0 3px rgba(255,194,61,.55), 0 0 22px rgba(255,194,61,.6); }
.gm-card.is-match:not(.pop) .gm-face { animation: gmGlow 2.4s ease-in-out infinite; }
.gm-card.is-match::after { content: "✓"; position: absolute; top: 6%; right: 8%; z-index: 2; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: .75rem; font-weight: 700; color: #fff; background: #2F9E5B; box-shadow: 0 2px 6px rgba(0,0,0,.2); }
.gm-card.pop .gm-in { animation: gmPop .45s ease; }
.gm-card.miss .gm-in { animation: gmShake .45s ease .15s; }
.gm-card.miss .gm-face { border-color: #E9826C; }
.gm-card.deal { animation: gmDeal .5s cubic-bezier(.2,1.3,.4,1) backwards; animation-delay: calc(var(--d) * 28ms); }
@keyframes gmPop { 50% { transform: rotateY(180deg) scale(1.12); } 100% { transform: rotateY(180deg) scale(1); } }
@keyframes gmShake { 20%, 60% { transform: rotateY(180deg) translateX(-6px); } 40%, 80% { transform: rotateY(180deg) translateX(6px); } }
@keyframes gmDeal { from { transform: translateY(-30px) scale(.6) rotate(-8deg); opacity: 0; } }
@keyframes gmGlow { 50% { box-shadow: 0 0 0 3px rgba(255,194,61,.35), 0 0 10px rgba(255,194,61,.35); } }
.gm-burst { position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; margin: -4px; z-index: 3; pointer-events: none; background: #FFC23D; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); animation: gmBurst .7s ease-out forwards; }
@keyframes gmBurst { to { transform: translate(var(--x), var(--y)) scale(.3) rotate(140deg); opacity: 0; } }
.gm-combo-pop { position: absolute; z-index: 6; transform: translate(-50%, -20%); pointer-events: none; font-weight: 800; font-size: 1.15rem; color: #fff; white-space: nowrap; padding: 4px 14px; border-radius: 99px; background: linear-gradient(90deg, #E8731A, #F7931E, #FFC23D); box-shadow: 0 8px 18px rgba(232,115,26,.4); animation: gmCombo 1.1s ease-out forwards; }
@keyframes gmCombo { 0% { transform: translate(-50%, 10%) scale(.5); opacity: 0; } 20% { transform: translate(-50%, -40%) scale(1.15); opacity: 1; } 100% { transform: translate(-50%, -160%) scale(1); opacity: 0; } }

.gm-ov { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; padding: 14px; border-radius: 18px; background: rgba(255,246,232,.55); }
.gm-ov[hidden] { display: none; }
.gm-ov.is-on .gm-ov-box { animation: gmIn .4s cubic-bezier(.2,1.3,.4,1); }
.gm-ov-box { width: min(420px, 100%); text-align: center; background: #fff; border-radius: 22px; padding: 18px 22px 22px; border: 1px solid #F6DDB8; box-shadow: 0 24px 50px rgba(120,60,10,.22); }
.gm-ov-box h3 { margin: 2px 0 6px; font-size: 1.3rem; color: var(--gm-ink); }
.gm-ov-m { width: 110px; height: 110px; object-fit: contain; margin-top: -58px; filter: drop-shadow(0 8px 14px rgba(120,60,10,.25)); animation: gmFloat 3.6s ease-in-out infinite; }
@keyframes gmIn { from { transform: scale(.85) translateY(10px); opacity: 0; } }
.gm-rules { list-style: none; margin: 8px 0 16px; padding: 0; text-align: left; display: grid; gap: 7px; }
.gm-rules li { display: flex; gap: 8px; align-items: flex-start; font-size: .88rem; color: var(--ink-2); background: #FFF8EE; border-radius: 12px; padding: 7px 10px; }
.gm-rules .ico { flex: none; color: var(--g3); margin-top: 2px; }
.gm-go { min-width: 200px; background: linear-gradient(90deg, var(--g3), var(--g1) 60%, var(--g2)); border: 0; box-shadow: 0 10px 22px rgba(232,115,26,.35); animation: gmBeat 1.6s ease-in-out infinite; }
@keyframes gmBeat { 50% { transform: scale(1.04); } }
.gm-pause-left { font-size: .85rem; color: #9A6A3A; background: #FFF6E6; border-radius: 10px; padding: 6px 10px; }
.gm-pause-left.warn, .gm-win-rank.warn { color: #B23A23; background: #FDECE8; }
.gm-win-k { margin: 0; font-weight: 700; color: var(--g3); }
.gm-score { margin: 2px 0 8px; } .gm-score b { display: block; font-size: 3rem; line-height: 1; background: linear-gradient(180deg, #F7931E, #B8600B); -webkit-background-clip: text; background-clip: text; color: transparent; font-variant-numeric: tabular-nums; }
.gm-score small { color: var(--muted); }
.gm-parts { list-style: none; margin: 0 0 10px; padding: 0; text-align: left; font-size: .86rem; }
.gm-parts li { display: flex; justify-content: space-between; gap: 10px; padding: 5px 2px; border-bottom: 1px dashed #F2E4D2; } .gm-parts b { color: #1F7A45; }
.gm-win-rank { font-weight: 600; font-size: .92rem; padding: 7px 10px; border-radius: 12px; background: #FFF6E6; color: #8A4A10; }
.gm-win-rank.top { background: linear-gradient(90deg, #FFE7B3, #FFF4D6); color: #6B3A05; }
.gm-win-act { justify-content: center; margin-top: 12px; }
.gm-toast { position: absolute; left: 50%; bottom: 14px; z-index: 7; transform: translateX(-50%); padding: 7px 16px; border-radius: 99px; font-size: .86rem; color: #fff; background: rgba(42,29,21,.92); box-shadow: 0 8px 18px rgba(0,0,0,.2); white-space: nowrap; max-width: 92%; overflow: hidden; text-overflow: ellipsis; }
.gm-toast.warn { background: #B26A00; } .gm-toast.err { background: #B23A23; }
.gm-fair { display: flex; gap: 8px; align-items: flex-start; margin: 12px 2px 0; font-size: .78rem; color: var(--muted); }
.gm-fair .ico { flex: none; width: 15px; height: 15px; margin-top: 2px; }

/* ตารางอันดับ */
.gm-lb { background: #fff; border: 1px solid #F2E4D2; border-radius: 22px; padding: 16px; box-shadow: 0 10px 30px rgba(160,80,10,.08); position: sticky; top: 16px; scroll-margin-top: 16px; }
.gm-lb-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.gm-lb-head h3 { margin: 0; display: inline-flex; align-items: center; gap: 6px; color: var(--gm-ink); } .gm-lb-head h3 .ico { color: var(--g1); fill: #FFC23D; }
.gm-tabs { display: inline-flex; background: #FFF4E4; border-radius: 99px; padding: 3px; }
.gm-tabs button { font: inherit; font-size: .78rem; border: 0; background: none; padding: 4px 11px; border-radius: 99px; cursor: pointer; color: #9A6A3A; }
.gm-tabs button[aria-selected="true"] { background: #fff; color: var(--gm-ink); font-weight: 600; box-shadow: 0 2px 6px rgba(160,80,10,.12); }
.gm-lb-sub { margin: 8px 0 12px; font-size: .78rem; color: var(--muted); }
.gm-podium { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: 6px; margin-bottom: 10px; }
.gm-pod { display: flex; flex-direction: column; align-items: center; text-align: center; min-width: 0; gap: 1px; }
.gm-pod.none { visibility: hidden; }
.gm-medal { font-size: 1.6rem; line-height: 1; margin-bottom: 2px; }
.gm-pod.p1 .gm-medal { font-size: 2.1rem; animation: gmFloat 3s ease-in-out infinite; }
.gm-n { display: block; max-width: 100%; font-size: .78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
.gm-pod small, .gm-who small { display: block; font-size: .7rem; color: var(--muted); }
.gm-pod em { font-style: normal; font-weight: 800; color: var(--gm-ink); font-variant-numeric: tabular-nums; }
.gm-pod-bar { width: 100%; display: grid; place-items: center; font-style: normal; font-weight: 800; font-size: 1.1rem; color: rgba(255,255,255,.9); border-radius: 12px 12px 4px 4px; margin-top: 4px; }
.gm-pod.p1 .gm-pod-bar { height: 70px; background: linear-gradient(180deg, #FFD95A, #E9A100); box-shadow: 0 8px 18px rgba(233,161,0,.35); }
.gm-pod.p2 .gm-pod-bar { height: 50px; background: linear-gradient(180deg, #E3E7EE, #A9B1BF); }
.gm-pod.p3 .gm-pod-bar { height: 38px; background: linear-gradient(180deg, #F2BE8C, #C9773A); }
.gm-pod.me .gm-n { color: var(--g3); }
.gm-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.gm-rows li, .gm-mine-row, .gm-fame li { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 12px; background: #FFFAF3; border: 1px solid #F6EAD9; font-size: .85rem; }
.gm-rows li.me, .gm-mine-row, .gm-fame li.me { background: linear-gradient(90deg, #FFE9C4, #FFF6E6); border-color: #F7C46C; }
.gm-rk { font-weight: 700; color: #9A6A3A; text-align: center; }
.gm-who { min-width: 0; } .gm-who .gm-n { font-size: .84rem; }
.gm-meta { font-size: .7rem; color: var(--muted); white-space: nowrap; }
.gm-rows b, .gm-mine-row b, .gm-fame b { font-variant-numeric: tabular-nums; color: var(--gm-ink); }
.gm-mine { margin-top: 10px; } .gm-mine p { margin: 6px 2px 0; font-size: .78rem; color: var(--muted); } .gm-mine p.ok { color: #1F7A45; font-weight: 600; }
.gm-mine-row { grid-template-columns: 26px minmax(0, 1fr) auto; }
.gm-empty { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 14px; background: #FFF8EE; font-size: .85rem; color: var(--ink-2); }
.gm-empty img { width: 56px; height: 56px; object-fit: contain; } .gm-empty p { margin: 0; } .gm-empty b { color: var(--g3); }
.gm-fame { margin-bottom: 12px; } .gm-fame > p { margin: 4px 2px 6px; font-size: .78rem; font-weight: 600; color: #9A6A3A; }
.gm-fame ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.gm-fame li { grid-template-columns: 26px minmax(0, 1fr) auto; }
.gm-fame-none { padding: 14px 4px; font-size: .85rem; }

@media (max-width: 1180px) { .gm-layout { grid-template-columns: 1fr; } .gm-lb { position: static; } }
@media (max-width: 640px) {
  .gm-hero { padding: 16px; gap: 8px; border-radius: 18px; }
  .gm-hero h2 { font-size: 1.3rem; } .gm-hero p { font-size: .86rem; }
  .gm-hero-art { width: 84px; height: 84px; align-self: flex-start; } .gm-hero-m { width: 84px; height: 84px; }
  .gm-play, .gm-lb { padding: 12px; border-radius: 18px; }
  .gm-stat { padding: 5px 10px; min-width: 0; flex: 1; } .gm-stat > b { font-size: 1.1rem; }
  .gm-pairs { flex-basis: 100%; order: 5; }
  .gm-btns { margin-left: 0; }
  .gm-stage { padding: 8px; }
  .gm-board { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .gm-card { aspect-ratio: 4 / 3.4; }
  .gm-ov-m { width: 86px; height: 86px; margin-top: -40px; }
  .gm-score b { font-size: 2.4rem; }
}
@media (prefers-reduced-motion: reduce) { .gm-hero-m, .gm-spark, .gm-go, .gm-ov-m, .gm-pod.p1 .gm-medal, .gm-card.is-match .gm-face, .gm-combo.hot { animation: none !important; } }

/* เมนูเกม (เด่นขึ้น) */
.pt-game-link { position: relative; display: flex; align-items: center; gap: 10px; margin: 10px 0 4px; padding: 8px 10px 8px 6px; border-radius: 14px; text-decoration: none; color: #fff;
  background: linear-gradient(120deg, rgba(247,147,30,.32), rgba(255,194,61,.18)); border: 1px solid rgba(255,194,61,.55); box-shadow: 0 0 0 0 rgba(255,194,61,.5); animation: ptGameGlow 2.6s ease-in-out infinite; transition: transform .15s; overflow: hidden; }
.pt-game-link::before { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.22) 50%, transparent 70%); transform: translateX(-100%); animation: ptShine 3.8s ease-in-out infinite; pointer-events: none; }
.pt-game-link:hover { color: #fff; transform: translateY(-1px); }
.pt-game-link.on { background: linear-gradient(120deg, #F7931E, #E8731A); border-color: #FFC23D; }
.pt-game-link img { width: 40px; height: 40px; object-fit: contain; flex: none; filter: drop-shadow(0 3px 5px rgba(0,0,0,.3)); animation: gmFloat 3s ease-in-out infinite; }
.pt-game-link span { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.pt-game-link b { font-size: .9rem; } .pt-game-link small { font-size: .7rem; color: #FFE2B0; }
.pt-game-link .pt-new { margin-left: auto; flex: none; font-style: normal; font-size: .62rem; font-weight: 700; padding: 2px 8px; border-radius: 99px; background: linear-gradient(90deg, #FFD166, #FFC23D); color: #3A1F05; }
@keyframes ptGameGlow { 50% { box-shadow: 0 0 0 4px rgba(255,194,61,.18), 0 0 18px rgba(255,194,61,.25); } }
@keyframes ptShine { 0%, 60% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
.pt-tabs a.pt-tab-game { color: #FFD27A; }
.pt-tabs a.pt-tab-game i { display: grid; place-items: center; width: 34px; height: 34px; margin-top: -16px; border-radius: 50%; background: linear-gradient(135deg, #FFC23D, #F7931E 60%, #E8731A); color: #fff; box-shadow: 0 4px 12px rgba(247,147,30,.55), 0 0 0 3px rgba(42,29,21,.97); animation: ptGameGlow 2.6s ease-in-out infinite; }
.pt-tabs a.pt-tab-game i .ico { color: #fff; width: 18px; height: 18px; }
.pt-tabs a.pt-tab-game.on { background: rgba(247,147,30,.25); color: #fff; }
.pt-game-promo { display: flex; align-items: center; gap: 14px; margin: 18px 0 6px; padding: 12px 18px 12px 12px; border-radius: 18px; text-decoration: none; color: #FFF3E0;
  background: radial-gradient(circle at 92% 20%, rgba(255,214,102,.45), transparent 40%), linear-gradient(120deg, #2A1D15, #5A3313 60%, #8A4A10); box-shadow: 0 10px 24px rgba(120,60,10,.18); transition: transform .15s; }
.pt-game-promo:hover { color: #fff; transform: translateY(-2px); }
.pt-game-promo img { width: 64px; height: 64px; object-fit: contain; flex: none; animation: gmFloat 3s ease-in-out infinite; }
.pt-game-promo span { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.pt-game-promo b { color: #fff; } .pt-game-promo small { color: #F3DFC6; font-size: .8rem; }
.pt-game-promo em { flex: none; display: inline-flex; align-items: center; gap: 6px; font-style: normal; font-weight: 700; color: #3A1F05; padding: 8px 16px; border-radius: 99px; background: linear-gradient(90deg, #FFD166, #F7931E); }
.pt-game-promo em .ico { width: 14px; height: 14px; }
@media (max-width: 560px) { .pt-game-promo { flex-wrap: wrap; } .pt-game-promo em { width: 100%; justify-content: center; } }
@media (prefers-reduced-motion: reduce) { .pt-game-link, .pt-game-link::before, .pt-game-link img, .pt-tab-game i, .pt-game-promo img { animation: none !important; } }

/* ย้อนหลัง / แชมป์ภาค */
.gm-day-pick { display: flex; align-items: center; gap: 8px; margin: 10px 0; font-size: .82rem; color: var(--muted); }
.gm-day-pick select { flex: 1; min-width: 0; }
.gm-rows-all li .gm-rk { font-size: .95rem; }
.gm-none { display: block !important; text-align: center; color: var(--muted); font-size: .85rem; padding: 14px !important; }
.gm-champ { padding: 12px; border-radius: 16px; background: #FFFAF3; border: 1px solid #F6EAD9; margin-bottom: 10px; }
.gm-champ.live { background: linear-gradient(135deg, #FFF4DF, #FFFDF8); border-color: #F7C46C; }
.gm-champ-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.gm-champ-h b { font-size: .88rem; color: var(--gm-ink); }
.gm-champ-st { flex: none; font-size: .68rem; font-weight: 700; padding: 2px 8px; border-radius: 99px; background: #EEE; color: #666; }
.gm-champ.live .gm-champ-st { background: #2F9E5B; color: #fff; }
.gm-champ > small { display: block; font-size: .72rem; color: var(--muted); margin: 2px 0 8px; }
.gm-champ ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.gm-champ li { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 12px; background: #fff; border: 1px solid #F6EAD9; font-size: .85rem; }
.gm-champ li.me { background: linear-gradient(90deg, #FFE9C4, #FFF6E6); border-color: #F7C46C; }
.gm-tabs button { padding: 4px 9px; }
#game .danger-zone { border: 1px solid #EBC3BA; border-radius: 14px; padding: 12px 14px; }
#game .danger-zone h3 { margin: 0 0 4px; font-size: 1rem; color: var(--danger); display: flex; align-items: center; gap: 6px; }
.pt-game-link small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* =================== หน้าเข้าสู่ระบบนักศึกษา =================== */
.lg { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); border-radius: 28px; overflow: hidden; background: #fff; box-shadow: 0 24px 60px rgba(120,60,10,.16), 0 2px 0 rgba(255,255,255,.6) inset; border: 1px solid #F3E2CC; margin: 4px 0 28px; }
.lg-brand { position: relative; overflow: hidden; display: flex; gap: 8px; padding: 34px 30px 30px 34px; color: #FFF3E0;
  background: radial-gradient(circle at 88% 18%, rgba(255,214,102,.5), transparent 42%), radial-gradient(circle at 10% 110%, rgba(247,147,30,.45), transparent 50%), linear-gradient(135deg, #2A1D15 0%, #4A2A12 55%, #8A4A10 100%); }
.lg-brand::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,214,102,.4) 1px, transparent 1.6px); background-size: 22px 22px; opacity: .3; pointer-events: none; }
.lg-brand-txt { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.lg-kicker { display: inline-flex; align-self: flex-start; align-items: center; gap: 6px; margin: 0 0 12px; font-size: .8rem; font-weight: 600; color: #FFD27A; background: rgba(255,194,61,.14); border: 1px solid rgba(255,194,61,.35); padding: 4px 12px; border-radius: 99px; }
.lg-kicker .ico { width: 15px; height: 15px; }
.lg h1 { margin: 0 0 22px; font-size: 2.35rem; line-height: 1.18; color: #fff; letter-spacing: -.01em; }
.lg h1 span { background: linear-gradient(90deg, #FFD166, #F7931E); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lg-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.lg-steps li { display: flex; align-items: center; gap: 10px; font-size: .95rem; color: #FBE7CC; }
.lg-steps b { flex: none; width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; font-size: .9rem; color: #3A1F05; background: linear-gradient(135deg, #FFD166, #F7931E); box-shadow: 0 4px 10px rgba(247,147,30,.35); }
.lg-br { display: none; }
.lg-art { position: relative; flex: none; width: 190px; align-self: flex-end; }
.lg-mascot { position: relative; z-index: 1; display: block; width: 190px; height: 210px; object-fit: contain; filter: drop-shadow(0 14px 20px rgba(0,0,0,.35)); animation: gmFloat 4s ease-in-out infinite; }
.lg-bubble { position: absolute; z-index: 2; left: -34px; top: -6px; max-width: 170px; font-size: .78rem; font-weight: 600; color: #8A4A10; background: #fff; padding: 7px 12px; border-radius: 14px 14px 14px 4px; box-shadow: 0 8px 18px rgba(0,0,0,.18); }
.lg-orb { position: absolute; border-radius: 50%; filter: blur(2px); }
.lg-orb.o1 { width: 150px; height: 150px; right: 6px; bottom: 6px; background: radial-gradient(circle, rgba(255,194,61,.55), transparent 70%); }
.lg-orb.o2 { width: 60px; height: 60px; left: -10px; bottom: 40px; background: radial-gradient(circle, rgba(255,255,255,.25), transparent 70%); }
.lg-spark { position: absolute; z-index: 2; width: 14px; height: 14px; background: #FFD166; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); animation: gmTwinkle 2.4s ease-in-out infinite; }
.lg-spark.s1 { right: 4px; top: 54px; } .lg-spark.s2 { left: 2px; top: 92px; width: 10px; height: 10px; animation-delay: .8s; } .lg-spark.s3 { right: 36px; bottom: 20px; width: 9px; height: 9px; animation-delay: 1.5s; }

.lg-card { display: flex; flex-direction: column; justify-content: center; padding: 32px 30px; background: linear-gradient(180deg, #fff, #FFFBF5); }
.lg-card-h { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.lg-ico { flex: none; width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, #FFC23D, #F7931E 55%, #E8731A); box-shadow: 0 8px 18px rgba(232,115,26,.3); }
.lg-ico .ico { width: 22px; height: 22px; }
.lg-card h2 { margin: 0; font-size: 1.3rem; color: var(--ink); }
.lg-card-h p { margin: 2px 0 0; font-size: .82rem; color: var(--muted); }
.lg-field { margin-bottom: 14px; }
.lg-field > span { font-weight: 600; font-size: .88rem; }
.lg-field input { height: 50px; border-radius: 14px; border-color: #EADBC8; background: #fff; font-size: 1.02rem; }
.lg-field input:focus { border-color: var(--orange); box-shadow: 0 0 0 4px rgba(232,115,26,.14); }
.lg-field .pin-input { letter-spacing: .6em; text-align: center; font-size: 1.25rem; }
.lg-go { height: 52px; border-radius: 14px; border: 0; margin-top: 4px; font-size: 1.05rem; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: linear-gradient(90deg, #E8731A, #F7931E 60%, #FFB23D); box-shadow: 0 12px 24px rgba(232,115,26,.32); transition: transform .15s, box-shadow .15s; }
.lg-go:hover { transform: translateY(-1px); box-shadow: 0 16px 28px rgba(232,115,26,.38); }
.lg-go .ico { transition: transform .2s; } .lg-go:hover .ico { transform: translateX(3px); }
.lg-links { display: flex; justify-content: center; gap: 18px; margin-top: 16px; padding-top: 14px; border-top: 1px dashed #EEDFCB; }
.lg-links a { display: inline-flex; align-items: center; gap: 6px; font-size: .86rem; text-decoration: none; color: var(--orange-ink); }
.lg-links a:hover { text-decoration: underline; }
.lg-links .ico { width: 16px; height: 16px; }

.lg-rounds .sec-title { display: flex; align-items: center; gap: 8px; }
.lg-round-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; }
.lg-round { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 18px 18px 16px 22px; border-radius: 20px; background: #fff; border: 1px solid #F1E3D0; box-shadow: 0 10px 24px rgba(160,80,10,.07); overflow: hidden; transition: transform .15s, box-shadow .15s; }
.lg-round::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: #E5D8C8; }
.lg-round.is-open::before { background: linear-gradient(180deg, #FFC23D, #E8731A); }
.lg-round:hover { transform: translateY(-2px); box-shadow: 0 16px 30px rgba(160,80,10,.12); }
.lg-round-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.lg-term { font-size: .78rem; font-weight: 700; color: var(--orange-ink); background: var(--orange-soft); padding: 2px 10px; border-radius: 99px; }
.lg-round h3 { margin: 4px 0 2px; font-size: 1.05rem; line-height: 1.4; color: var(--ink); }
.lg-round p { margin: 0; display: flex; align-items: flex-start; gap: 6px; font-size: .84rem; color: var(--muted); }
.lg-round p .ico { flex: none; width: 15px; height: 15px; margin-top: 3px; }
.lg-round-btn { align-self: flex-start; margin-top: 8px; display: inline-flex; align-items: center; gap: 6px; border-radius: 12px; border-color: var(--orange-line); color: var(--orange-ink); background: var(--orange-soft); font-weight: 600; }
.lg-round-btn:hover { background: #FCE3CC; color: var(--orange-ink); }

@media (max-width: 860px) {
  .lg { grid-template-columns: 1fr; border-radius: 24px; }
  .lg-brand { padding: 22px 20px 20px; }
  .lg h1 { font-size: 1.7rem; margin-bottom: 14px; }
  .lg-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .lg-steps li { flex-direction: column; align-items: flex-start; gap: 6px; font-size: .8rem; line-height: 1.3; }
  .lg-steps b { width: 26px; height: 26px; font-size: .8rem; }
  .lg-art { width: 120px; } .lg-mascot { width: 120px; height: 140px; }
  .lg-bubble { display: none; }
  .lg-card { padding: 22px 20px 20px; }
}
@media (max-width: 520px) {
  main.wrap:has(> .lg) { padding-top: 12px; }
  .lg { margin-left: -4px; margin-right: -4px; }
  .lg-brand { padding: 18px 16px 16px; }
  .lg-kicker { font-size: .72rem; margin-bottom: 8px; }
  .lg h1 { font-size: 1.4rem; margin-bottom: 12px; }
  .lg-br { display: inline; }
  .lg-art { width: 92px; margin-right: -6px; } .lg-mascot { width: 92px; height: 112px; }
  .lg-orb.o1 { width: 90px; height: 90px; }
  .lg-card-h { margin-bottom: 14px; } .lg-ico { width: 40px; height: 40px; border-radius: 12px; }
  .lg-card h2 { font-size: 1.15rem; }
  .lg-round-list { grid-template-columns: 1fr; }
  .lg-round-btn { align-self: stretch; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .lg-mascot, .lg-spark { animation: none; } }
.lg h1 { font-size: 2.05rem; }
.lg h1 em, .lg h1 span { display: block; font-style: normal; white-space: nowrap; }
.lg-art { width: 165px; } .lg-mascot { width: 165px; height: 190px; }
.lg-bubble { left: -46px; }
@media (max-width: 960px) {
  .pub-nav a, .pub-nav .linkbtn { white-space: nowrap; }
  .brand-text small { display: none; }
}
@media (max-width: 860px) { .lg h1 { font-size: 1.7rem; } .lg-art { width: 120px; } .lg-mascot { width: 120px; height: 140px; } }
@media (max-width: 520px) { .lg h1 { font-size: 1.4rem; } .lg-art { width: 92px; } .lg-mascot { width: 92px; height: 112px; } }
@media (max-width: 380px) { .lg h1 { font-size: 1.25rem; } .lg-steps li { font-size: .74rem; } }
@media (max-width: 860px) { .lg { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 380px) { .lg h1 em, .lg h1 span { white-space: normal; } .lg-art { width: 78px; } .lg-mascot { width: 78px; height: 96px; } }
/* ปุ่มท้าเล่นเกมหน้าเข้าสู่ระบบ */
.lg-challenge { position: relative; display: flex; align-items: center; gap: 10px; margin-top: 18px; padding: 8px 10px 8px 6px; border-radius: 16px; text-decoration: none; color: #fff; overflow: hidden;
  background: linear-gradient(120deg, rgba(247,147,30,.35), rgba(255,194,61,.16)); border: 1px dashed rgba(255,194,61,.75); animation: ptGameGlow 2.6s ease-in-out infinite; transition: transform .15s; }
.lg-challenge::before { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.2) 50%, transparent 70%); transform: translateX(-100%); animation: ptShine 3.8s ease-in-out infinite; pointer-events: none; }
.lg-challenge:hover { color: #fff; transform: translateY(-2px); border-style: solid; }
.lg-challenge img { flex: none; width: 46px; height: 46px; object-fit: contain; filter: drop-shadow(0 3px 6px rgba(0,0,0,.3)); animation: gmFloat 2.8s ease-in-out infinite; }
.lg-challenge span { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.lg-challenge em { font-style: normal; font-size: .7rem; font-weight: 800; letter-spacing: .02em; color: #3A1F05; background: linear-gradient(90deg, #FFD166, #FFC23D); align-self: flex-start; padding: 1px 9px; border-radius: 99px; margin-bottom: 3px; }
.lg-challenge b { font-size: .88rem; font-weight: 600; color: #FFF3E0; }
.lg-challenge > i { flex: none; margin-left: auto; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, #FFD166, #F7931E); color: #3A1F05; box-shadow: 0 4px 10px rgba(247,147,30,.45); }
.lg-challenge > i .ico { width: 14px; height: 14px; }
.lg-hint { display: flex; align-items: flex-start; gap: 8px; margin: -8px 0 16px; padding: 10px 12px; border-radius: 14px; font-size: .85rem; color: #6B3A05; background: linear-gradient(90deg, #FFE9C4, #FFF6E6); border: 1px solid #F7C46C; }
.lg-hint[hidden] { display: none; }
.lg-hint .ico { flex: none; width: 18px; height: 18px; color: #E8731A; margin-top: 1px; }
.lg-card.want-game .lg-hint { animation: gmIn .4s cubic-bezier(.2,1.3,.4,1); }
.lg-card.want-game .lg-go { box-shadow: 0 0 0 4px rgba(255,194,61,.35), 0 12px 24px rgba(232,115,26,.32); }
@media (max-width: 860px) { .lg-challenge { margin-top: 14px; } }
@media (max-width: 520px) { .lg-challenge { padding: 6px 8px 6px 4px; gap: 8px; } .lg-challenge img { width: 38px; height: 38px; } .lg-challenge b { font-size: .8rem; } .lg-challenge > i { width: 28px; height: 28px; } }
@media (prefers-reduced-motion: reduce) { .lg-challenge, .lg-challenge::before, .lg-challenge img { animation: none; } }
@media (max-width: 520px) {
  .lg-challenge { margin-top: 10px; padding: 4px 6px 4px 4px; border-radius: 13px; }
  .lg-challenge img { width: 30px; height: 30px; }
  .lg-challenge span { flex-direction: row; align-items: center; gap: 6px; }
  .lg-challenge em { margin: 0; flex: none; font-size: .64rem; padding: 1px 7px; }
  .lg-challenge b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .78rem; }
  .lg-challenge > i { width: 26px; height: 26px; }
  .lg h1 { margin-bottom: 9px; }
  .lg-kicker { margin-bottom: 6px; }
}
#lg-card { scroll-margin-top: 78px; }
.lg-ch-s { display: none; }
@media (max-width: 520px) { .lg-ch-l { display: none; } .lg-ch-s { display: block; } }
.lg-brand { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "txt art" "ch art"; column-gap: 8px; align-items: end; }
.lg-brand-txt { grid-area: txt; align-self: center; }
.lg-art { grid-area: art; }
.lg-challenge { grid-area: ch; position: relative; z-index: 1; align-self: start; }
@media (max-width: 860px) { .lg-brand { grid-template-areas: "txt art" "ch ch"; } .lg-challenge { margin-top: 12px; } }
@media (max-width: 520px) { .lg-ch-l { display: block; } .lg-ch-s { display: none; } .lg-challenge { margin-top: 10px; } }
@media (max-width: 380px) { .lg-ch-l { display: none; } .lg-ch-s { display: block; } }
@media (max-width: 520px) { .lg-challenge em, .lg-ch-l { display: none; } .lg-ch-s { display: block; color: #FFE7B8; } }
@media (max-width: 380px) { .lg-ch-s { font-size: .72rem !important; } .lg-challenge { gap: 6px; } .lg-challenge img { width: 26px; height: 26px; } }

/* =================== สีประจำรอบ (แยกหลายรอบ/หลายทุน) =================== */
.cchip { --cc: #E8731A; --cc-soft: #FFF1E2; --cc-ink: #9A4A0C; display: inline-flex; align-items: center; gap: 6px; vertical-align: middle; padding: 2px 10px 2px 8px; border-radius: 99px; font-size: .78rem; font-weight: 700; line-height: 1.5; white-space: nowrap; color: var(--cc-ink); background: var(--cc-soft); border: 1.5px solid var(--cc); }
.cchip i { width: 8px; height: 8px; border-radius: 50%; background: var(--cc); flex: none; }
.cchip.lg { font-size: .92rem; padding: 4px 14px 4px 10px; } .cchip.lg i { width: 10px; height: 10px; }
.cchip.hero { font-size: 1rem; padding: 5px 16px 5px 12px; margin-bottom: 8px; color: #fff; background: var(--cc); border-color: var(--cc); box-shadow: 0 6px 14px color-mix(in srgb, var(--cc) 35%, transparent); }
.cchip.hero i { background: #fff; }
.swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.swatch { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px 5px 6px; border-radius: 99px; border: 1.5px solid var(--line); cursor: pointer; font-size: .85rem; background: #fff; }
.swatch input { position: absolute; opacity: 0; pointer-events: none; }
.swatch i { width: 20px; height: 20px; border-radius: 50%; background: var(--sw); box-shadow: inset 0 0 0 2px rgba(255,255,255,.6); }
.swatch:has(input:checked), .swatch.is-checked { border-color: var(--sw); box-shadow: 0 0 0 3px color-mix(in srgb, var(--sw) 22%, transparent); font-weight: 700; }
.swatch:has(input:focus-visible) { outline: 2px solid var(--sw); outline-offset: 2px; }

/* การ์ดรอบหน้าเข้าสู่ระบบ */
.lg-round { padding: 0; flex-direction: column; gap: 0; border-color: color-mix(in srgb, var(--cc) 35%, #F1E3D0); }
.lg-round::before { display: none; }
.lg-round-band { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 18px; background: var(--cc); color: #fff; }
.lg-round-short { font-size: 1.2rem; font-weight: 800; letter-spacing: .01em; }
.lg-round-band .lg-term { background: rgba(255,255,255,.22); color: #fff; }
.lg-round-body { display: flex; flex-direction: column; gap: 6px; padding: 14px 18px 16px; background: linear-gradient(180deg, var(--cc-soft), #fff 55%); flex: 1; }
.lg-round-btn { border-color: var(--cc); color: var(--cc-ink); background: #fff; }
.lg-round-btn:hover { background: var(--cc-soft); color: var(--cc-ink); }

/* ตัวเลือกรอบในหน้านักศึกษา */
.pt-now { margin-left: auto; }
.pt-top .pt-now .cchip { box-shadow: 0 2px 8px color-mix(in srgb, var(--cc) 25%, transparent); }
.pt-rounds { margin-bottom: 16px; }
.pt-rounds-h { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; font-size: .86rem; color: var(--ink-2); }
.pt-rounds-h .ico { width: 16px; height: 16px; color: var(--orange); }
.pt-rounds-todo { font-size: .76rem; font-weight: 700; color: #fff; background: #DC2626; padding: 1px 9px; border-radius: 99px; }
.pt-rounds-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.pt-round { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 12px 14px 12px 18px; border-radius: 16px; text-decoration: none; color: var(--ink); background: #fff; border: 2px solid color-mix(in srgb, var(--cc) 30%, #EEE); overflow: hidden; transition: transform .15s, box-shadow .15s; }
.pt-round::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 7px; background: var(--cc); }
.pt-round:hover { color: var(--ink); transform: translateY(-2px); box-shadow: 0 10px 22px color-mix(in srgb, var(--cc) 18%, transparent); }
.pt-round b { font-size: 1.08rem; color: var(--cc-ink); padding-right: 30px; }
.pt-round-t { font-size: .74rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pt-round em { font-style: normal; font-size: .78rem; font-weight: 600; margin-top: 4px; align-self: flex-start; padding: 1px 9px; border-radius: 99px; background: #F3F4F6; color: #555; }
.pt-round.s-ok em { background: #E7F7EC; color: #166534; }
.pt-round.s-todo em { background: #FEE2E2; color: #B91C1C; }
.pt-round.s-off { opacity: .62; }
.pt-round-tick { position: absolute; top: 10px; right: 10px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; border: 2px solid color-mix(in srgb, var(--cc) 35%, #DDD); color: transparent; background: #fff; }
.pt-round-tick .ico { width: 15px; height: 15px; }
.pt-round.on { background: var(--cc-soft); border-color: var(--cc); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cc) 22%, transparent); }
.pt-round.on .pt-round-tick { background: var(--cc); border-color: var(--cc); color: #fff; }
.pt-round.on.s-off { opacity: 1; }

/* หน้าเนื้อหาใช้สีของรอบที่เลือก */
.pt-main[style] .pt-hero { border-top: 5px solid var(--cc); }
.pt-hero[style] { border-top: 5px solid var(--cc); }
.qt-label .cchip { margin-left: 4px; }
.qt-camp { margin: 2px 0 6px; font-size: .82rem; color: var(--muted); }
.pk-chosen small .cchip { font-size: .72rem; padding: 0 8px 0 6px; margin: 0 2px; }
.pk-btn-short { display: inline-block; margin-left: 4px; padding: 1px 9px; border-radius: 99px; background: rgba(255,255,255,.25); font-size: .88em; }
.ci-camp { margin: 0 0 4px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cb-slot .cb-camp-t { align-self: flex-start; font-size: .7rem; padding: 0 8px 0 6px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.tp-head .tp-chip { margin-left: auto; }
.camp-head h2 .cchip { margin-right: 4px; }
@media (max-width: 640px) {
  .pt-now { display: none; }
  .pt-rounds-list { grid-template-columns: 1fr; gap: 8px; }
  .pt-round { padding: 10px 12px 10px 16px; }
}
/* ปุ่มยืนยันและช่องที่เลือก ใช้สีของรอบ — เห็นสีรอบอีกครั้งตอนกดยืนยัน */
.pt-main[style] .pk-slot:has(input:checked), .pt-main[style] .pk-slot.is-checked { border-color: var(--cc); background: var(--cc-soft); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cc) 20%, transparent); }
.pt-main[style] .pk-slot:has(input:checked) .pk-tick, .pt-main[style] .pk-slot.is-checked .pk-tick { background: var(--cc); border-color: var(--cc); }
.pt-main[style] .pk-confirm .btn-primary { background: var(--cc); border-color: var(--cc); box-shadow: 0 10px 22px color-mix(in srgb, var(--cc) 32%, transparent); }
.pt-main[style] .pk-confirm .btn-primary:hover { filter: brightness(1.06); }

/* ===== สีประจำรอบ: ปรับให้เข้าธีมระบบ (น้ำตาลเข้ม · ส้ม · ทอง, การ์ดครีม, เงาอุ่น) ===== */
.cchip { border: 1px solid color-mix(in srgb, var(--cc) 40%, transparent); background: var(--cc-soft); box-shadow: 0 1px 0 rgba(255,255,255,.7) inset; }
.cchip.hero { color: #fff; border: 0; background: linear-gradient(90deg, var(--cc), color-mix(in srgb, var(--cc) 60%, #FFB23D)); box-shadow: 0 8px 18px color-mix(in srgb, var(--cc) 30%, transparent); }

/* การ์ดรอบหน้าเข้าสู่ระบบ: หัวแบบเดียวกับแถบแบรนด์ (น้ำตาลเข้ม → สีรอบ + ลายจุด + ประกาย) */
.lg-round { border: 1px solid #F1E3D0; box-shadow: 0 10px 24px rgba(160,80,10,.08); }
.lg-round:hover { box-shadow: 0 16px 30px rgba(160,80,10,.14); }
.lg-round-band { position: relative; overflow: hidden; padding: 14px 18px; color: #FFF3E0;
  background: radial-gradient(circle at 88% 20%, rgba(255,214,102,.45), transparent 45%), linear-gradient(120deg, #2A1D15 0%, color-mix(in srgb, var(--cc) 55%, #2A1D15) 55%, var(--cc) 100%); }
.lg-round-band::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,214,102,.45) 1px, transparent 1.6px); background-size: 16px 16px; opacity: .35; pointer-events: none; }
.lg-round-band::after { content: ""; position: absolute; right: 64px; top: 9px; width: 10px; height: 10px; background: #FFD166; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); animation: gmTwinkle 2.4s ease-in-out infinite; }
.lg-round-short { position: relative; display: inline-flex; align-items: center; gap: 8px; color: #fff; }
.lg-round-short::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--cc); box-shadow: 0 0 0 3px rgba(255,255,255,.85); }
.lg-round-band .lg-term { position: relative; background: rgba(255,214,102,.18); color: #FFD27A; border: 1px solid rgba(255,194,61,.4); }
.lg-round-body { background: linear-gradient(180deg, #FFFCF8, #fff); }
.lg-round-btn { border-color: var(--orange-line); color: var(--orange-ink); background: var(--orange-soft); }
.lg-round-btn:hover { background: #FCE3CC; color: var(--orange-ink); }

/* ตัวเลือกรอบในหน้านักศึกษา: การ์ดครีมแบบเดียวกับการ์ดเลือกวัน, ที่เลือกอยู่ = ไล่สีแบบปุ่มหลัก */
.pt-rounds-h .ico { color: var(--orange); }
.pt-rounds-todo { color: #3A1F05; background: linear-gradient(90deg, #FFD166, #FFC23D); box-shadow: 0 3px 8px rgba(255,194,61,.35); }
.pt-round { background: #FFFCF8; border: 1.5px solid #F1E3D0; box-shadow: 0 6px 16px rgba(160,80,10,.06); }
.pt-round::before { width: 6px; background: linear-gradient(180deg, color-mix(in srgb, var(--cc) 60%, #FFC23D), var(--cc)); }
.pt-round:hover { box-shadow: 0 12px 24px rgba(160,80,10,.12); border-color: color-mix(in srgb, var(--cc) 40%, #F1E3D0); }
.pt-round b { color: var(--ink); }
.pt-round b::before { content: ""; display: inline-block; width: 9px; height: 9px; margin-right: 7px; border-radius: 50%; background: var(--cc); vertical-align: 2px; }
.pt-round em { background: #F3EEE7; color: var(--ink-2); }
.pt-round.s-ok em { background: #E6F3EA; color: #1F7A45; }
.pt-round.s-todo em { background: #FFE9C4; color: #9A4A0C; }
.pt-round-tick { border-color: #E2D4C4; }
.pt-round.on { border-color: transparent; color: #fff; background: radial-gradient(circle at 90% 15%, rgba(255,214,102,.4), transparent 45%), linear-gradient(135deg, color-mix(in srgb, var(--cc) 65%, #FFB23D), var(--cc)); box-shadow: 0 12px 26px color-mix(in srgb, var(--cc) 30%, transparent); }
.pt-round.on::before { background: rgba(255,255,255,.35); }
.pt-round.on b, .pt-round.on .pt-round-t { color: #fff; }
.pt-round.on b::before { background: #fff; }
.pt-round.on .pt-round-t { opacity: .85; }
.pt-round.on em { background: rgba(255,255,255,.22); color: #fff; }
.pt-round.on .pt-round-tick { background: #fff; border-color: #fff; color: var(--cc); }

/* ส่วนเนื้อหา: แถบสีของรอบบางลงและไล่สีแบบระบบ */
.pt-main[style] .pt-hero, .pt-hero[style] { border-top: 0; box-shadow: inset 0 4px 0 var(--cc), 0 10px 30px rgba(160,80,10,.08); }
.pt-main[style] .pk-confirm .btn-primary { border: 0; background: linear-gradient(90deg, var(--cc), color-mix(in srgb, var(--cc) 60%, #FFB23D)); }
.qticket .qt-camp { color: rgba(255,255,255,.88); }

/* =================== สถานะทุนของฉัน =================== */
.sc-hero { position: relative; overflow: hidden; display: flex; gap: 16px; padding: 24px 26px; border-radius: 24px; margin-bottom: 16px; color: #FFF3E0;
  background: radial-gradient(circle at 88% 20%, rgba(255,214,102,.5), transparent 40%), radial-gradient(circle at 0 120%, rgba(247,147,30,.45), transparent 50%), linear-gradient(135deg, #2A1D15 0%, #4A2A12 55%, #8A4A10 100%); box-shadow: 0 16px 34px rgba(120,60,10,.18); }
.sc-hero::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,214,102,.4) 1px, transparent 1.6px); background-size: 20px 20px; opacity: .3; pointer-events: none; }
.sc-hero-txt { position: relative; flex: 1; min-width: 0; }
.sc-kicker { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 8px; font-size: .78rem; font-weight: 600; color: #FFD27A; background: rgba(255,194,61,.14); border: 1px solid rgba(255,194,61,.35); padding: 3px 12px; border-radius: 99px; }
.sc-kicker .ico { width: 15px; height: 15px; }
.sc-hero h2 { margin: 0; font-size: 1.6rem; color: #fff; }
.sc-id { margin: 4px 0 14px; display: flex; align-items: center; flex-wrap: wrap; gap: 10px; color: #F3DFC6; font-variant-numeric: tabular-nums; }
.sc-status { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; font-weight: 700; padding: 2px 12px; border-radius: 99px; background: rgba(255,255,255,.14); color: #fff; }
.sc-status i { width: 8px; height: 8px; border-radius: 50%; background: #9CA3AF; }
.sc-status.t-ok i { background: #4ADE80; box-shadow: 0 0 0 3px rgba(74,222,128,.25); } .sc-status.t-info i { background: #FFD166; }
.sc-meta { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px 18px; margin: 0; }
.sc-meta div { min-width: 0; } .sc-meta dt { font-size: .72rem; color: #E8CDA8; } .sc-meta dd { margin: 0; font-size: .88rem; color: #fff; overflow: hidden; text-overflow: ellipsis; }
.sc-hero-art { position: relative; flex: none; width: 150px; align-self: flex-end; display: flex; flex-direction: column; align-items: center; }
.sc-hero-art .bubble { position: relative; margin-bottom: 6px; font-size: .74rem; }
.sc-hero-art .mascot { width: 130px; height: 140px; object-fit: contain; filter: drop-shadow(0 10px 16px rgba(0,0,0,.35)); }
.sc-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.sc-kpi { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 18px; background: #fff; border: 1px solid #F1E3D0; box-shadow: 0 8px 20px rgba(160,80,10,.06); }
.sc-kpi > span { flex: none; width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, #FFC23D, #F7931E 55%, #E8731A); box-shadow: 0 6px 14px rgba(232,115,26,.28); }
.sc-kpi > span .ico { width: 20px; height: 20px; }
.sc-kpi small { display: block; font-size: .74rem; color: var(--muted); }
.sc-kpi b { font-size: 1.3rem; color: var(--ink); font-variant-numeric: tabular-nums; } .sc-kpi em { font-style: normal; font-size: .78rem; font-weight: 500; color: var(--muted); }
.sc-year { background: #fff; border: 1px solid #F1E3D0; border-radius: 22px; padding: 18px 20px; margin-bottom: 14px; box-shadow: 0 10px 24px rgba(160,80,10,.06); }
.sc-year-h { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 6px 12px; margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px dashed #EEDFCB; }
.sc-year-h h3 { margin: 0; font-size: 1.15rem; color: var(--ink); }
.sc-year-h span { font-size: .84rem; color: var(--muted); } .sc-year-h b { color: var(--orange-ink); font-variant-numeric: tabular-nums; }
.sc-term { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 12px; padding: 8px 0; }
.sc-term + .sc-term { border-top: 1px solid #F6EDE2; }
.sc-term-label { align-self: start; justify-self: start; margin-top: 10px; font-size: .78rem; font-weight: 700; color: var(--orange-ink); background: var(--orange-soft); padding: 3px 12px; border-radius: 99px; }
.sc-list { display: grid; gap: 8px; }
.sc-item { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; background: #FFFCF8; border: 1.5px solid #F1E3D0; transition: transform .15s, box-shadow .15s; }
.sc-item:hover { transform: translateY(-1px); box-shadow: 0 8px 18px rgba(160,80,10,.08); }
.sc-ico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: #FFF1E2; color: var(--orange); }
.sc-ico .ico { width: 20px; height: 20px; }
.sc-body { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.sc-body b { font-size: .95rem; color: var(--ink); line-height: 1.35; }
.sc-body small { font-size: .74rem; color: var(--muted); }
.sc-bar { height: 7px; border-radius: 99px; background: #F1E7DA; overflow: hidden; margin-top: 4px; max-width: 320px; }
.sc-bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #FFC23D, #F7931E); }
.sc-amt { text-align: right; display: flex; flex-direction: column; align-items: flex-end; font-variant-numeric: tabular-nums; }
.sc-amt small { font-size: .7rem; color: var(--muted); } .sc-amt b { font-size: 1.1rem; color: var(--ink); line-height: 1.2; }
.sc-amt em { font-style: normal; font-size: .76rem; color: #1F7A45; font-weight: 600; }
.sc-item.is-cancel { opacity: .6; } .sc-item.is-cancel .sc-amt b { text-decoration: line-through; }
.sc-foot { display: flex; gap: 8px; align-items: flex-start; font-size: .8rem; color: var(--muted); margin: 6px 2px 18px; }
.sc-foot .ico { flex: none; width: 16px; height: 16px; margin-top: 2px; }
.pt-mini-link { grid-column: 1 / -1; display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; padding-top: 8px; border-top: 1px dashed rgba(255,255,255,.18); font-size: .8rem; font-weight: 600; color: #FFD27A; text-decoration: none; }
.pt-mini-link .ico { width: 15px; height: 15px; }
@media (max-width: 900px) { .sc-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  .sc-hero { padding: 18px; } .sc-hero h2 { font-size: 1.25rem; } .sc-hero-art { display: none; }
  .sc-kpi { padding: 10px 12px; gap: 8px; } .sc-kpi > span { width: 34px; height: 34px; } .sc-kpi b { font-size: 1.05rem; }
  .sc-year { padding: 14px; } .sc-term { grid-template-columns: 1fr; gap: 6px; } .sc-term-label { margin-top: 0; }
  .sc-item { grid-template-columns: 34px minmax(0, 1fr); } .sc-ico { width: 34px; height: 34px; }
  .sc-amt { grid-column: 2; align-items: flex-start; text-align: left; flex-direction: row; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
}

/* เกม: สถานะเปิด/ปิดตามวันเวลา */
.gm-chip.is-open { background: rgba(74,222,128,.16); color: #D9FBE5; } .gm-chip.is-open .ico { color: #4ADE80; }
.gm-chip.is-closed { background: rgba(255,255,255,.08); color: #F3DFC6; } .gm-chip.is-closed .ico { color: #FFD27A; }
.gm-closed-next { display: inline-flex; align-items: center; gap: 6px; margin: 4px 0 6px; padding: 6px 14px; border-radius: 99px; font-weight: 700; color: #8A4A10; background: #FFF1DD; }
.gm-closed-next .ico { width: 16px; height: 16px; }
.pt-game-link.is-closed { animation: none; background: rgba(255,255,255,.05); border-style: dashed; border-color: rgba(255,194,61,.35); }
.pt-game-link.is-closed::before { display: none; } .pt-game-link.is-closed img { animation: none; opacity: .85; }
.pt-game-link.is-closed .pt-new { background: rgba(255,255,255,.15); color: #F3DFC6; }
.pt-tabs a.pt-tab-game.is-closed i { animation: none; background: #6B5A4C; box-shadow: 0 0 0 3px rgba(42,29,21,.97); }
.game-modes { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; margin: 8px 0 12px; }
.gmode { display: flex; gap: 9px; align-items: flex-start; border: 1.5px solid var(--line); border-radius: 14px; padding: 10px 12px; cursor: pointer; background: #fff; }
.gmode input { margin-top: 4px; flex: none; }
.gmode span { display: flex; flex-direction: column; line-height: 1.35; } .gmode small { color: var(--muted); font-size: .76rem; }
.gmode:has(input:checked), .gmode.is-checked { border-color: var(--orange); background: var(--orange-soft); }
.text-ok { color: #1F7A45; } .text-warn { color: #B26A00; }
.sc-hero-art img { width: 130px; height: 140px; object-fit: contain; filter: drop-shadow(0 10px 16px rgba(0,0,0,.35)); }
.sc-hero-art .bubble { position: relative; right: auto; top: auto; white-space: normal; text-align: center; }
.sc-hero-art .bubble::after { right: auto; left: 50%; top: auto; bottom: -6px; margin-left: -6px; border: 6px solid transparent; border-top-color: #fff; border-bottom: 0; }

/* ===== v10: ปุ่มเข้าสู่ระบบมุมขวาบน ===== */
.pub-nav a.pub-login { background: linear-gradient(135deg, var(--orange), #F29A3A); color: #fff; padding: 8px 16px 8px 13px; border-radius: 999px; font-weight: 600; box-shadow: 0 4px 12px -4px rgba(232,115,26,.55); transition: transform .15s, box-shadow .15s; }
.pub-nav a.pub-login:hover { color: #fff; transform: translateY(-1px); box-shadow: 0 7px 16px -6px rgba(232,115,26,.6); }
.pub-nav a.pub-login svg { width: 17px; height: 17px; }
.pub-nav a.pub-login b { display: inline; font-weight: 600; }
@media (max-width: 720px) { .pub-nav a.pub-login { padding: 7px 13px 7px 10px; font-size: .86rem; } }
@media (max-width: 400px) { .pub-nav { gap: 8px; } .pub-nav a.pub-login { padding: 7px 11px 7px 9px; font-size: .82rem; gap: 4px; } }
@media (max-width: 360px) { .pub-nav a.pub-home { display: none; } }
.lg-card.lg-pulse { animation: lgPulse 1.1s ease-out 1; }
@keyframes lgPulse { 0% { box-shadow: 0 0 0 0 rgba(232,115,26,.45); } 100% { box-shadow: 0 0 0 18px rgba(232,115,26,0); } }
@media (prefers-reduced-motion: reduce) { .lg-card.lg-pulse { animation: none; } }

/* ===== v10: แท็บหน้าตั้งค่า ===== */
.set-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 18px; }
.set-tab { display: flex; gap: 10px; align-items: center; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: #fff; color: var(--ink-2); text-decoration: none; transition: border-color .15s, background .15s, transform .15s; min-width: 0; }
.set-tab:hover { border-color: var(--orange-line); transform: translateY(-1px); }
.set-tab > span:last-child { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.set-tab b { font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.set-tab small { color: var(--muted); font-size: .76rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.set-tab-ic { width: 36px; height: 36px; flex: none; border-radius: 10px; display: grid; place-items: center; background: var(--line-2); color: var(--ink-2); }
.set-tab-ic svg { width: 19px; height: 19px; }
.set-tab.active { border-color: var(--orange); background: linear-gradient(135deg, #fff 30%, var(--orange-soft)); box-shadow: 0 0 0 2px rgba(232,115,26,.15); }
.set-tab.active b { color: var(--orange-ink); }
.set-tab.active .set-tab-ic { background: var(--orange); color: #fff; }
@media (max-width: 900px) { .set-tabs { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .set-tabs { gap: 8px; } .set-tab { padding: 10px; } .set-tab small { display: none; } .set-tab-ic { width: 30px; height: 30px; } }

/* ===== v10: ผู้ใช้งาน ===== */
.uhead { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.ustats { display: flex; gap: 10px; flex-wrap: wrap; }
.ustat { display: flex; flex-direction: column; min-width: 96px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 14px; background: #fff; line-height: 1.2; }
.ustat b { font-size: 1.45rem; color: var(--ink); }
.ustat small { color: var(--muted); font-size: .78rem; }
.ustat.t-warn b { color: var(--orange-ink); } .ustat.t-info b { color: #2F6FB0; } .ustat.t-muted b { color: var(--muted); }
.ulegend { margin: 0 0 12px; }
.ulist-card { padding: 6px; }
.ulist { display: flex; flex-direction: column; }
.urow-h, .urow > summary { display: grid; grid-template-columns: minmax(200px, 1.4fr) 140px minmax(0, 2fr) 130px 84px; gap: 12px; align-items: center; padding: 10px 12px; }
.urow-h { font-size: .76rem; color: var(--muted); text-transform: none; border-bottom: 1px solid var(--line); }
.urow { border-bottom: 1px solid var(--line-2); border-radius: 12px; transition: background .15s; }
.urow:last-child { border-bottom: 0; }
.urow > summary { list-style: none; cursor: pointer; border-radius: 12px; }
.urow > summary::-webkit-details-marker { display: none; }
.urow > summary:hover { background: #FBFBFC; }
.urow[open] { background: var(--cream); box-shadow: inset 3px 0 0 var(--orange); margin: 4px 0; }
.urow[open] > summary:hover { background: transparent; }
.urow.off > summary { opacity: .6; }
.u-who { display: flex; gap: 10px; align-items: center; min-width: 0; }
.user-ava.is-admin { background: linear-gradient(135deg, var(--orange), var(--gold)); color: #fff; }
.u-name { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.u-name b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.u-name small { color: var(--muted); font-size: .78rem; font-family: ui-monospace, Menlo, Consolas, monospace; }
.u-role { display: flex; gap: 4px; flex-wrap: wrap; }
.u-perms { display: flex; gap: 5px; flex-wrap: wrap; }
.pchip { display: inline-flex; align-items: center; gap: 4px; font-size: .76rem; padding: 3px 9px 3px 7px; border-radius: 999px; background: var(--line-2); color: var(--ink-2); white-space: nowrap; }
.pchip svg { width: 13px; height: 13px; }
.pchip.all { background: var(--orange-soft); color: var(--orange-ink); font-weight: 600; }
.u-seen { display: inline-flex; gap: 5px; align-items: center; font-size: .8rem; color: var(--muted); }
.u-seen svg { width: 14px; height: 14px; }
.u-edit { justify-self: end; font-size: .82rem; color: var(--orange-ink); font-weight: 600; }
.u-edit span { display: inline-flex; gap: 4px; align-items: center; padding: 5px 10px; border-radius: 8px; border: 1px solid var(--orange-line); background: #fff; }
.u-edit svg { width: 14px; height: 14px; }
.urow .u-close, .urow[open] .u-open { display: none; }
.urow[open] .u-close { display: inline-flex; }
.u-body { padding: 4px 16px 14px 60px; }
.u-body .user-foot { margin-top: 12px; }
.perm b { display: inline-flex; gap: 6px; align-items: center; }
.perm b svg { width: 15px; height: 15px; color: var(--orange-ink); }
.uadd > summary { list-style: none; cursor: pointer; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.uadd > summary::-webkit-details-marker { display: none; }
.uadd > summary h2 { margin: 0; }
.uadd[open] > summary { margin-bottom: 12px; }
.uadd[open] > summary .muted { display: none; }
.row-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 14px; }
@media (max-width: 980px) {
  .urow-h { display: none; }
  .urow > summary { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "who edit" "role role" "perms perms" "seen seen"; gap: 6px 10px; }
  .u-who { grid-area: who; } .u-edit { grid-area: edit; } .u-role { grid-area: role; padding-left: 48px; } .u-perms { grid-area: perms; padding-left: 48px; } .u-seen { grid-area: seen; padding-left: 48px; }
  .u-body { padding: 4px 12px 14px; }
}
@media (max-width: 720px) { .row-3 { grid-template-columns: 1fr; } }

/* ===== v10: ตั้งค่ารอบ — เปลี่ยน/ยกเลิกคิว ===== */
.opt-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.opt-card { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; cursor: pointer; background: #fff; }
.opt-card > input { margin-top: 4px; flex: none; accent-color: var(--orange); }
.opt-card > span { display: flex; flex-direction: column; gap: 4px; }
.opt-card small { color: var(--muted); font-size: .82rem; display: flex; align-items: center; gap: 6px; }
.opt-card small input { height: 32px; padding: 0 8px; }
.opt-card:has(> input:checked) { border-color: var(--orange); background: var(--orange-soft); }
.opt-card:has(> input:checked) b { color: var(--orange-ink); }
.w-sm { max-width: 420px; }
.lock-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 8px; }
.lock-opt { display: flex; align-items: center; gap: 8px; padding: 9px 11px; border: 1px solid var(--line); border-radius: 12px; cursor: pointer; background: #fff; }
.lock-opt input { flex: none; accent-color: #C2462E; }
.lock-opt > span { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.lock-opt em { font-style: normal; font-size: .76rem; display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; }
.lock-opt em svg { width: 13px; height: 13px; }
.lock-opt .lk-yes { display: none; color: #A3341F; font-weight: 600; }
.lock-opt .lk-no { color: #3D7A27; }
.lock-opt:has(input:checked) { border-color: #E8A898; background: #FDF1EE; }
.lock-opt:has(input:checked) .lk-yes { display: inline-flex; }
.lock-opt:has(input:checked) .lk-no { display: none; }
@media (max-width: 560px) { .opt-cards { grid-template-columns: 1fr; } }

/* แถว 4 ช่อง (ตั้งค่าเกม) ยุบบนจอแคบ */
@media (max-width: 1100px) { .row-4 { grid-template-columns: 1fr 1fr !important; } }
@media (max-width: 560px) { .row-4 { grid-template-columns: 1fr !important; } }
.row-4 input { min-width: 0; max-width: 100%; }
@media (max-width: 400px) { .pub-top .brand-text { display: none; } }
.pub-top .brand { min-width: 0; }

/* ===== v11: บัญชีทดสอบฝั่งนักศึกษา ===== */
.pt-testbar { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 14px; padding: 10px 14px; border-radius: 12px; border: 1px dashed #C2462E; background: repeating-linear-gradient(135deg, #FDF1EE 0 12px, #FBE7E1 12px 24px); color: #8A2A17; font-size: .86rem; line-height: 1.5; }
.pt-testbar svg { width: 18px; height: 18px; flex: none; margin-top: 2px; }
.ttest { border-top: 3px solid #C2462E; }
.tlist { display: flex; flex-direction: column; gap: 8px; margin: 12px 0 16px; }
.trow { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.trow.off { opacity: .65; }
.t-who { display: flex; gap: 10px; align-items: center; min-width: 0; }
.t-ava { background: #FDECE6; color: #A3341F; }
.t-ava svg { width: 18px; height: 18px; }
.t-act { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.t-act form { margin: 0; display: inline-flex; gap: 6px; align-items: center; }
.t-act input { height: 32px; }
.tadd { display: grid; grid-template-columns: 220px minmax(0, 1fr) 140px auto; gap: 0 12px; align-items: end; padding-top: 14px; border-top: 1px dashed var(--line); }
.tadd .btn { margin-bottom: 14px; }
.t-code { display: flex; align-items: stretch; }
.t-code b { display: grid; place-items: center; padding: 0 10px; border: 1px solid var(--line); border-right: 0; border-radius: 8px 0 0 8px; background: var(--line-2); font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .9rem; color: var(--ink-2); }
.t-code input { border-radius: 0 8px 8px 0; min-width: 0; width: 100%; text-transform: uppercase; }
@media (max-width: 860px) { .tadd { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .tadd { grid-template-columns: 1fr; } }

/* ===== v12: สถานะทุนของฉัน — ทุนของคิวที่จองไว้ ===== */
.sc-q { position: relative; background: #fff; border: 2px solid var(--cc, var(--orange)); border-radius: 22px; padding: 18px 20px 14px; margin-bottom: 16px; box-shadow: 0 12px 28px -14px color-mix(in srgb, var(--cc, #E8731A) 55%, transparent); overflow: hidden; }
.sc-q::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 6px; background: linear-gradient(90deg, var(--cc, #E8731A), color-mix(in srgb, var(--cc, #E8731A) 40%, #FFD27A)); }
.sc-q-h { display: flex; justify-content: space-between; gap: 14px; align-items: flex-start; flex-wrap: wrap; }
.sc-q-tt { min-width: 0; flex: 1 1 320px; }
.sc-q-k { margin: 2px 0 4px; font-size: .78rem; font-weight: 600; color: var(--cc-ink, var(--orange-ink)); display: flex; gap: 5px; align-items: center; }
.sc-q-k svg { width: 14px; height: 14px; }
.sc-q h3 { margin: 0 0 6px; font-size: 1.12rem; line-height: 1.4; }
.sc-q-meta { margin: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; font-size: .85rem; color: var(--ink-2); }
.sc-q-meta span { display: inline-flex; gap: 5px; align-items: center; }
.sc-q-meta svg { width: 15px; height: 15px; color: var(--cc, var(--orange)); }
.sc-q-verdict { display: flex; gap: 10px; align-items: center; padding: 10px 14px; border-radius: 14px; flex: none; }
.sc-q-verdict i { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: #fff; flex: none; }
.sc-q-verdict i svg { width: 19px; height: 19px; }
.sc-q-verdict span { display: flex; flex-direction: column; line-height: 1.3; }
.sc-q-verdict small { font-size: .78rem; opacity: .85; }
.sc-q-verdict.ok { background: #EAF6E4; color: #2F6A1C; } .sc-q-verdict.ok i { background: #4C9A2A; }
.sc-q-verdict.no { background: #FDF1EE; color: #8A2A17; } .sc-q-verdict.no i { background: #C2462E; }
.sc-q-body { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 14px; margin-top: 14px; align-items: stretch; }
.sc-q-list { display: flex; flex-direction: column; gap: 8px; }
.sc-q-row { display: grid; grid-template-columns: 92px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 14px; border-radius: 14px; background: var(--cc-soft, var(--orange-soft)); }
.sc-q-term { font-size: .8rem; font-weight: 700; color: var(--cc-ink, var(--orange-ink)); background: #fff; border-radius: 999px; padding: 3px 10px; text-align: center; white-space: nowrap; }
.sc-q-name { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.sc-q-name small { font-size: .78rem; color: var(--muted); }
.sc-q-id { font-family: ui-monospace, Menlo, Consolas, monospace; }
.sc-q-amt { text-align: right; display: flex; flex-direction: column; line-height: 1.25; }
.sc-q-amt small { font-size: .72rem; color: var(--muted); }
.sc-q-amt b { font-size: 1.15rem; }
.sc-q-amt em { font-style: normal; font-size: .78rem; color: var(--cc-ink, var(--orange-ink)); font-weight: 600; }
.sc-q-total { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: 14px 16px; border-radius: 16px; background: linear-gradient(140deg, var(--cc, #E8731A), color-mix(in srgb, var(--cc, #E8731A) 65%, #3B1F0A)); color: #fff; }
.sc-q-total small { font-size: .78rem; opacity: .9; }
.sc-q-total b { font-size: 1.9rem; line-height: 1.1; }
.sc-q-total span { font-size: .8rem; opacity: .9; }
.sc-q-total em { font-style: normal; font-size: .8rem; margin-top: 6px; padding-top: 6px; border-top: 1px solid rgba(255,255,255,.35); width: 100%; }
.sc-q-empty { margin: 12px 0 0; padding: 12px 14px; border-radius: 12px; background: #FDF1EE; color: #8A2A17; display: flex; gap: 8px; align-items: flex-start; font-size: .9rem; }
.sc-q-empty svg { width: 17px; height: 17px; flex: none; margin-top: 3px; }
.sc-q-foot { display: flex; justify-content: space-between; gap: 6px 14px; flex-wrap: wrap; margin-top: 12px; padding-top: 10px; border-top: 1px dashed #EADBC8; font-size: .78rem; color: var(--muted); }
.sc-q-live { display: inline-flex; gap: 6px; align-items: center; }
.sc-q-live i { width: 8px; height: 8px; border-radius: 50%; background: #4C9A2A; box-shadow: 0 0 0 0 rgba(76,154,42,.5); animation: scLive 1.6s infinite; }
.sc-q-live b { font-family: ui-monospace, Menlo, Consolas, monospace; color: var(--ink-2); }
@keyframes scLive { 70% { box-shadow: 0 0 0 7px rgba(76,154,42,0); } 100% { box-shadow: 0 0 0 0 rgba(76,154,42,0); } }
.sc-item.is-queue { border-color: var(--cc); background: var(--cc-soft); }
.sc-qtag { display: inline-flex; gap: 3px; align-items: center; font-size: .7rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--cc); color: #fff; vertical-align: 2px; white-space: nowrap; }
.sc-qtag svg { width: 11px; height: 11px; }
@media (max-width: 760px) {
  .sc-q { padding: 16px 14px 12px; }
  .sc-q-body { grid-template-columns: 1fr; }
  .sc-q-row { grid-template-columns: minmax(0, 1fr) auto; }
  .sc-q-term { grid-column: 1 / -1; justify-self: start; }
  .sc-q-verdict { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .sc-q-live i { animation: none; } }

/* ===== v13: ปุ่มเมนู (มือถือ/แท็บเล็ต) — เห็นชัดว่าเป็นปุ่มเปิดเมนู ===== */
.menu-btn { align-items: center; gap: 8px; height: 40px; padding: 0 14px 0 11px; border: 0; border-radius: 12px; cursor: pointer; flex: none;
  background: linear-gradient(135deg, var(--orange), #F29A3A); color: #fff; font: inherit; font-size: .9rem; font-weight: 700; letter-spacing: .01em;
  box-shadow: 0 6px 14px -6px rgba(232,115,26,.7), inset 0 -2px 0 rgba(0,0,0,.08); -webkit-tap-highlight-color: transparent; transition: transform .12s, box-shadow .15s; }
.menu-btn:active { transform: scale(.96); }
.menu-btn:focus-visible { outline: 3px solid rgba(232,115,26,.35); outline-offset: 2px; }
.menu-btn b { font-weight: 700; line-height: 1; }
.mb-bars { position: relative; width: 18px; height: 14px; display: inline-block; }
.mb-bars i { position: absolute; left: 0; width: 100%; height: 2.5px; border-radius: 2px; background: currentColor; transition: transform .22s ease, opacity .18s, top .22s ease; }
.mb-bars i:nth-child(1) { top: 0; } .mb-bars i:nth-child(2) { top: 5.75px; } .mb-bars i:nth-child(3) { top: 11.5px; }
html.drawer-open .menu-btn .mb-bars i:nth-child(1) { top: 5.75px; transform: rotate(45deg); }
html.drawer-open .menu-btn .mb-bars i:nth-child(2) { opacity: 0; }
html.drawer-open .menu-btn .mb-bars i:nth-child(3) { top: 5.75px; transform: rotate(-45deg); }
/* ชวนกดครั้งแรก: เรืองแสงเบา ๆ 2 รอบ */
.menu-btn { animation: mbHint 1.4s ease-out .6s 2; }
@keyframes mbHint { 0% { box-shadow: 0 6px 14px -6px rgba(232,115,26,.7), 0 0 0 0 rgba(232,115,26,.45); } 100% { box-shadow: 0 6px 14px -6px rgba(232,115,26,.7), 0 0 0 12px rgba(232,115,26,0); } }
@media (prefers-reduced-motion: reduce) { .menu-btn, .mb-bars i { animation: none; transition: none; } }
.nav-toggle.menu-btn { display: none; }
@media (max-width: 900px) { .nav-toggle.menu-btn { display: inline-flex; } }

/* ===== v17: แถบเมนูล่าง 6 ปุ่ม — จอแคบให้ป้ายตัดบรรทัดได้ ไม่ล้น ===== */
@media (max-width: 960px) { .pt-tabs a { min-width: 0; } .pt-tabs a span { max-width: 100%; text-align: center; } }
@media (max-width: 400px) {
  .pt-tabs { padding-left: max(3px, env(safe-area-inset-left)); padding-right: max(3px, env(safe-area-inset-right)); }
  .pt-tabs a { padding: 6px 0; gap: 1px; }
  .pt-tabs a span { white-space: normal !important; font-size: .6rem; line-height: 1.15; }
}

/* ===== v18: เกมบนมือถือ/แท็บเล็ต — การ์ดพอดีจอ เห็นน้องมีทุนเต็มตัว ===== */
.gm-board.fit.play .gm-card { aspect-ratio: auto; height: var(--gm-ch, 110px); }
.gm-board.fit.play .gm-face img { left: 4%; top: 5%; width: 92%; height: 90%; }
/* มือถือแนวนอน: 6 คอลัมน์ × 3 แถว, ซ่อนแถบเมนูล่าง/ไม่ตรึงหัวเว็บระหว่างอยู่หน้าเกม เพื่อเพิ่มพื้นที่ */
@media (orientation: landscape) and (max-height: 560px) {
  .gm-board { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; gap: 6px; }
  body.pt-game .pt-tabs { display: none; }
  body.pt-game .pt-top { position: static; }
  body.pt-game .pt-foot { padding-bottom: 16px; }
  .gm-hud { flex-wrap: nowrap; gap: 6px; }
  .gm-pairs { flex-basis: auto !important; order: 0 !important; }
  .gm-stat { padding: 4px 8px; } .gm-stat > b { font-size: 1rem; }
  .gm-stage { padding: 6px; }
}

/* ระหว่างเล่นบนมือถือ/แท็บเล็ต: เพิ่มพื้นที่ให้กระดาน */
@media (max-width: 960px) {
  body.gm-playing .pt-tabs { display: none; }
  body.gm-playing .pt-top { position: static; }
  body.gm-playing .pt-foot { padding-bottom: 16px; }
}
@media (max-width: 640px) {
  body.gm-playing .gm-hud { flex-wrap: nowrap; gap: 6px; }
  body.gm-playing .gm-pairs { flex-basis: auto; order: 0; }
  body.gm-playing .gm-dots { display: none; }
  body.gm-playing .gm-btns span { display: none; }
  body.gm-playing .gm-btn { padding: 6px 9px; }
  body.gm-playing .gm-stat { padding: 4px 8px; }
  body.gm-playing .gm-stat small { font-size: .7rem; }
}

/* แชมป์ประจำภาค Top 10: อันดับ 4–10 ใช้เลขในวงกลม */
.gm-champ .gm-rk { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #F6EAD9; color: #8A5A2B; font-style: normal; font-size: .72rem; font-weight: 700; }
.gm-champ li:not(.top) { font-size: .82rem; padding-top: 5px; padding-bottom: 5px; }
.gm-champ li.top { border-color: #F7D9A6; }

/* ===== นำเข้าเช็คอินย้อนหลัง ===== */
.cii-opts { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 16px; }
.cii-opt { padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: #FFFCF8; }
.cii-opt h3 { margin: 0 0 6px; font-size: 1rem; display: flex; gap: 6px; align-items: center; }
.cii-opt textarea { width: 100%; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .95rem; padding: 10px; border: 1px solid var(--line); border-radius: 10px; }
.cii-sum { display: flex; gap: 10px; flex-wrap: wrap; margin: 6px 0 14px; }
.cii-sum span { padding: 8px 14px; border-radius: 12px; font-size: .9rem; }
.cii-sum b { font-size: 1.3rem; margin-right: 4px; }
.cii-sum .ok { background: #EAF6E4; color: #2F6A1C; } .cii-sum .already { background: #F1F1F1; color: #555; } .cii-sum .skip { background: #FFF1DF; color: #8A4A06; }
tr.cii-skip td { background: #FFF8EE; }
@media (max-width: 860px) { .cii-opts { grid-template-columns: 1fr; } }

/* ===== v12: ส่งเอกสารแก้ไข ===== */
.pt-resub .pt-resub-note { display: flex; gap: 6px; align-items: flex-start; margin: 6px 0 8px; padding: 8px 12px; border-radius: 10px; background: #fff; border: 1px dashed #E8A898; color: #8A2A17; font-weight: 600; }
.pt-resub .pt-resub-note svg { flex: none; margin-top: 3px; width: 15px; height: 15px; }

/* ===== v13: คำขอจองคิวใหม่ ===== */
.nav-badge { margin-left: auto; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 99px; background: #D9481F; color: #fff; font-size: .74rem; font-weight: 700; display: inline-grid; place-items: center; box-shadow: 0 0 0 3px rgba(217,72,31,.18); animation: nbPulse 2s ease-in-out infinite; }
@keyframes nbPulse { 50% { box-shadow: 0 0 0 6px rgba(217,72,31,0); } }
@media (prefers-reduced-motion: reduce) { .nav-badge { animation: none; } }
.rb-box { margin-top: 14px; border: 2px solid #F2B57A; border-radius: 18px; background: linear-gradient(135deg, #FFF4E6, #FFE7CC); padding: 14px 16px; box-shadow: 0 10px 24px -16px rgba(200,90,10,.55); }
.rb-box > summary { cursor: pointer; display: flex; gap: 14px; align-items: center; list-style: none; }
.rb-box > summary::-webkit-details-marker { display: none; }
.rb-ic { flex: none; width: 46px; height: 46px; border-radius: 14px; background: var(--orange); color: #fff; display: grid; place-items: center; box-shadow: 0 6px 14px -6px rgba(200,90,10,.7); }
.rb-ic svg { width: 24px; height: 24px; }
.rb-tx { flex: 1; min-width: 0; }
.rb-tx b { display: block; font-size: 1.08rem; color: var(--orange-ink); line-height: 1.35; }
.rb-tx small { display: block; color: #6B5443; font-size: .86rem; line-height: 1.45; margin-top: 2px; }
.rb-cta { flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 99px; background: var(--orange); color: #fff; font-weight: 700; font-size: .92rem; box-shadow: 0 8px 16px -8px rgba(200,90,10,.8); transition: transform .15s; }
.rb-cta i { font-style: normal; font-size: .8rem; transition: transform .2s; }
.rb-box > summary:hover .rb-cta { transform: translateY(-1px); }
.rb-box[open] .rb-cta { background: #fff; color: var(--orange-ink); box-shadow: inset 0 0 0 2px #F2B57A; }
.rb-box[open] .rb-cta i { transform: rotate(180deg); }
.rb-box[open] > summary { margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px dashed #F2B57A; }
.rb-box[open] { background: #FFF8EF; }
@media (max-width: 560px) { .rb-box > summary { flex-wrap: wrap; gap: 10px 12px; } .rb-cta { width: 100%; justify-content: center; } .rb-ic { width: 40px; height: 40px; } }
.rb-form textarea { width: 100%; border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; font: inherit; }
.rb-reasons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 10px; }
.rb-reason { display: flex; gap: 8px; align-items: center; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: #fff; cursor: pointer; font-size: .9rem; }
.rb-reason input { accent-color: var(--orange); }
.rb-reason:has(input:checked) { border-color: var(--orange); background: var(--orange-soft); font-weight: 600; }
@media (max-width: 560px) { .rb-reasons { grid-template-columns: 1fr; } }
.rq-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; flex-wrap: wrap; margin-bottom: 12px; }
.rq-head p { margin: 0; max-width: 760px; }
.rq-tabs { display: inline-flex; gap: 4px; padding: 4px; border-radius: 12px; background: var(--line-2); }
.rq-tabs a { padding: 6px 14px; border-radius: 9px; text-decoration: none; color: var(--ink-2); font-size: .9rem; }
.rq-tabs a.on { background: #fff; font-weight: 700; box-shadow: 0 2px 6px rgba(0,0,0,.06); }
.rq-tabs b { display: inline-grid; place-items: center; min-width: 20px; height: 20px; border-radius: 99px; background: #D9481F; color: #fff; font-size: .72rem; margin-left: 4px; }
.rq-list { display: flex; flex-direction: column; gap: 12px; }
.rq { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
.rq.is-pending { border-left: 4px solid var(--orange); }
.rq h3 { margin: 4px 0 6px; font-size: 1.05rem; }
.rq-top { margin: 0; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.rq-reason { margin: 0 0 6px; padding: 8px 12px; border-radius: 10px; background: #FFF7EC; }
.rq-act textarea { width: 100%; border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; font: inherit; margin-bottom: 8px; }
.rq:not(.is-pending) { grid-template-columns: 1fr; }
@media (max-width: 860px) { .rq { grid-template-columns: 1fr; } }