/* =====================================================================
   IEP ANK Design System
   สีหลักจากแบนเนอร์และโลโก้: coral / blush / navy + สี IEP (ส้ม-เขียว-ม่วง)
   ===================================================================== */
:root {
  --coral-50:#fff4f1; --coral-100:#fde6e1; --coral-200:#fbcfc6; --coral-300:#f6a99b;
  --coral-400:#f08a78; --coral-500:#e9705e; --coral-600:#d4553f; --coral-700:#b04230;
  --navy-500:#2a5d93; --navy-600:#1f4c7d; --navy-700:#173a61; --navy-900:#0e2440;
  --iep-orange:#f08a2c; --iep-green:#5fa83a; --iep-purple:#8a4fb3; --iep-pink:#d9577e; --iep-teal:#3fa9b8;

  --bg:#fffaf8; --bg-soft:#fdeeea; --surface:#ffffff; --surface-2:#fff6f3;
  --text:#2b2230; --text-2:#5f5463; --text-3:#8f8492;
  --line:#f0e1dc; --line-strong:#e3cdc6;
  --primary:var(--coral-500); --primary-ink:#fff; --primary-soft:var(--coral-100);
  --accent:var(--navy-600);
  --ok:#2f9e6a; --ok-soft:#e3f5ec; --warn:#d48a0a; --warn-soft:#fdf2dc; --bad:#d64545; --bad-soft:#fde7e7; --info:#2f7dc4; --info-soft:#e4f0fb;

  --font-display:"Mali", "Anuphan", system-ui, sans-serif;
  --font-body:"Anuphan", "Sarabun", system-ui, -apple-system, "Segoe UI", sans-serif;
  --radius-sm:10px; --radius:16px; --radius-lg:24px; --radius-xl:32px;
  --shadow-sm:0 1px 2px rgba(120,60,50,.06), 0 1px 3px rgba(120,60,50,.06);
  --shadow:0 4px 14px rgba(150,70,55,.08), 0 2px 4px rgba(150,70,55,.05);
  --shadow-lg:0 18px 40px rgba(150,70,55,.14);
  --header-h:72px; --sidebar-w:264px; --container:1200px;
  --ease:cubic-bezier(.2,.8,.2,1);
  color-scheme:light;
}
:root[data-theme="dark"] {
  --bg:#17131a; --bg-soft:#211b24; --surface:#1f1a22; --surface-2:#271f2a;
  --text:#f4ecef; --text-2:#c9bcc4; --text-3:#9a8d96; --line:#33293a; --line-strong:#44374b;
  --primary:#f0846f; --primary-soft:#3a2427; --accent:#8fb6e8;
  --ok-soft:#173226; --warn-soft:#352914; --bad-soft:#3a1c1e; --info-soft:#172b40;
  --shadow-sm:0 1px 2px rgba(0,0,0,.3); --shadow:0 4px 14px rgba(0,0,0,.35); --shadow-lg:0 18px 40px rgba(0,0,0,.45);
  color-scheme:dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:#17131a; --bg-soft:#211b24; --surface:#1f1a22; --surface-2:#271f2a;
    --text:#f4ecef; --text-2:#c9bcc4; --text-3:#9a8d96; --line:#33293a; --line-strong:#44374b;
    --primary:#f0846f; --primary-soft:#3a2427; --accent:#8fb6e8;
    --ok-soft:#173226; --warn-soft:#352914; --bad-soft:#3a1c1e; --info-soft:#172b40;
    --shadow-sm:0 1px 2px rgba(0,0,0,.3); --shadow:0 4px 14px rgba(0,0,0,.35); --shadow-lg:0 18px 40px rgba(0,0,0,.45);
    color-scheme:dark;
  }
}

/* ---------- Base ---------- */
*,*::before,*::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body { margin:0; font-family:var(--font-body); font-size:16px; line-height:1.65; color:var(--text); background:var(--bg); -webkit-font-smoothing:antialiased; }
img,svg { display:block; max-width:100%; }
a { color:var(--accent); text-decoration:none; }
a:hover { text-decoration:underline; text-underline-offset:3px; }
h1,h2,h3,h4 { font-family:var(--font-display); line-height:1.25; margin:0 0 .5em; color:var(--text); font-weight:600; letter-spacing:-.005em; }
h1 { font-size:clamp(1.75rem, 1.2rem + 2.4vw, 2.75rem); }
h2 { font-size:clamp(1.4rem, 1.1rem + 1.3vw, 2rem); }
h3 { font-size:1.15rem; }
p { margin:0 0 1em; }
:focus-visible { outline:3px solid var(--coral-300); outline-offset:2px; border-radius:6px; }
.icon { width:1.25em; height:1.25em; flex:none; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.skip-link { position:absolute; left:-999px; top:8px; z-index:100; background:var(--primary); color:#fff; padding:8px 16px; border-radius:8px; }
.skip-link:focus { left:8px; }
.container { width:100%; max-width:var(--container); margin:0 auto; padding:0 16px; }
@media (min-width:768px){ .container { padding:0 24px; } }
.muted { color:var(--text-2); } .small { font-size:.875rem; } .tiny { font-size:.78rem; }
.stack > * + * { margin-top:var(--gap, 16px); }
.row { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.spacer { flex:1; }
.grid { display:grid; gap:20px; }
@media (min-width:640px){ .grid-2 { grid-template-columns:repeat(2,1fr); } }
@media (min-width:900px){ .grid-3 { grid-template-columns:repeat(3,1fr); } .grid-4 { grid-template-columns:repeat(4,1fr); } }
@media (min-width:640px) and (max-width:899px){ .grid-3,.grid-4 { grid-template-columns:repeat(2,1fr); } }

/* ---------- Buttons ---------- */
.btn { --b:var(--primary); display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; padding:10px 20px; border-radius:999px; border:1.5px solid transparent; font:600 .95rem/1 var(--font-body); cursor:pointer; transition:transform .15s var(--ease), box-shadow .2s, background .2s; white-space:nowrap; text-decoration:none !important; }
.btn:active { transform:translateY(1px) scale(.99); }
.btn-primary { background:var(--b); color:#fff; box-shadow:0 6px 16px -6px color-mix(in srgb, var(--b) 70%, transparent); }
.btn-primary:hover { background:var(--coral-600); }
.btn-navy { background:var(--navy-600); color:#fff; } .btn-navy:hover { background:var(--navy-700); }
.btn-outline { background:var(--surface); color:var(--text); border-color:var(--line-strong); }
.btn-outline:hover { border-color:var(--primary); color:var(--primary); }
.btn-ghost { background:transparent; color:var(--text-2); }
.btn-ghost:hover { background:var(--primary-soft); color:var(--primary); }
.btn-sm { min-height:36px; padding:6px 14px; font-size:.875rem; }
.btn-lg { min-height:52px; padding:14px 28px; font-size:1.05rem; }
.btn-block { width:100%; }
.btn-icon { width:44px; padding:0; }

/* ---------- Cards / badges ---------- */
.card { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-sm); padding:20px; }
.card-lg { padding:28px; border-radius:var(--radius-lg); }
.card-head { display:flex; align-items:center; gap:12px; margin-bottom:16px; }
.card-head h2,.card-head h3 { margin:0; font-size:1.1rem; }
.card-link { display:block; color:inherit; transition:transform .2s var(--ease), box-shadow .2s; }
.card-link:hover { transform:translateY(-3px); box-shadow:var(--shadow); text-decoration:none; }
.badge { display:inline-flex; align-items:center; gap:4px; padding:3px 10px; border-radius:999px; font-size:.78rem; font-weight:600; background:var(--primary-soft); color:var(--coral-700); white-space:nowrap; }
:root[data-theme="dark"] .badge { color:var(--coral-300); }
.badge-ok { background:var(--ok-soft); color:var(--ok); } .badge-warn { background:var(--warn-soft); color:var(--warn); }
.badge-bad { background:var(--bad-soft); color:var(--bad); } .badge-info { background:var(--info-soft); color:var(--info); }
.badge-muted { background:var(--bg-soft); color:var(--text-2); }
.chip-icon { width:44px; height:44px; border-radius:14px; display:grid; place-items:center; flex:none; background:var(--primary-soft); color:var(--primary); }
.chip-icon .icon { width:22px; height:22px; }
.c-orange { background:#fdeddc; color:#c76a12; } .c-green { background:#e6f3dd; color:#3f7f22; }
.c-purple { background:#efe3f7; color:#7440a0; } .c-teal { background:#ddf1f4; color:#21828f; } .c-navy { background:#e1ebf6; color:var(--navy-600); }
:root[data-theme="dark"] .c-orange,:root[data-theme="dark"] .c-green,:root[data-theme="dark"] .c-purple,:root[data-theme="dark"] .c-teal,:root[data-theme="dark"] .c-navy { background:var(--surface-2); }

.alert { display:flex; gap:10px; padding:12px 16px; border-radius:var(--radius-sm); background:var(--info-soft); color:var(--text); border:1px solid transparent; }
.alert-success { background:var(--ok-soft); } .alert-warning { background:var(--warn-soft); } .alert-error { background:var(--bad-soft); }
.demo-ribbon { background:repeating-linear-gradient(-45deg, var(--warn-soft) 0 12px, transparent 12px 24px); border:1px dashed var(--warn); color:var(--text-2); font-size:.8rem; padding:4px 12px; border-radius:999px; display:inline-flex; gap:6px; align-items:center; }

/* ---------- Forms ---------- */
.field { display:block; margin-bottom:16px; }
.field > span { display:block; font-weight:600; font-size:.9rem; margin-bottom:6px; color:var(--text-2); }
.input, select.input, textarea.input { width:100%; min-height:48px; padding:12px 16px; border:1.5px solid var(--line-strong); border-radius:var(--radius-sm); background:var(--surface); color:var(--text); font:inherit; transition:border-color .2s, box-shadow .2s; }
.input:focus { outline:none; border-color:var(--primary); box-shadow:0 0 0 4px var(--primary-soft); }
.input-icon { position:relative; } .input-icon .icon { position:absolute; left:14px; top:50%; transform:translateY(-50%); color:var(--text-3); }
.input-icon .input { padding-left:44px; }
.check { display:flex; align-items:center; gap:8px; font-size:.9rem; color:var(--text-2); cursor:pointer; }
.check input { width:18px; height:18px; accent-color:var(--primary); }

/* ---------- Tables ---------- */
.table-wrap { overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); -webkit-overflow-scrolling:touch; }
.table { width:100%; border-collapse:collapse; font-size:.92rem; }
.table th, .table td { padding:12px 14px; text-align:left; border-bottom:1px solid var(--line); vertical-align:middle; }
.table thead th { background:var(--surface-2); font-weight:600; color:var(--text-2); font-size:.82rem; white-space:nowrap; position:sticky; top:0; z-index:1; }
.table tbody tr:hover { background:var(--surface-2); }
.table tbody tr:last-child td { border-bottom:0; }
.table .num { text-align:center; font-variant-numeric:tabular-nums; }
.grade-pill { display:inline-grid; place-items:center; min-width:40px; height:30px; padding:0 8px; border-radius:10px; font-weight:700; font-variant-numeric:tabular-nums; background:var(--ok-soft); color:var(--ok); }
.grade-pill[data-g="3"],.grade-pill[data-g="3.5"] { background:var(--info-soft); color:var(--info); }
.grade-pill[data-g="2"],.grade-pill[data-g="2.5"] { background:var(--warn-soft); color:var(--warn); }
.grade-pill[data-g="1"],.grade-pill[data-g="1.5"],.grade-pill[data-g="0"] { background:var(--bad-soft); color:var(--bad); }
/* ตารางบนมือถือ: เปลี่ยนเป็นการ์ด */
@media (max-width:640px){
  .table-stack thead { display:none; }
  .table-stack, .table-stack tbody, .table-stack tr, .table-stack td { display:block; width:100%; }
  .table-stack tr { padding:12px 14px; border-bottom:1px solid var(--line); }
  .table-stack td { border:0; padding:3px 0; display:flex; justify-content:space-between; gap:12px; text-align:right; }
  .table-stack td::before { content:attr(data-label); color:var(--text-3); font-size:.82rem; text-align:left; }
  .table-stack td.num { text-align:right; }
}

/* =====================================================================
   PUBLIC LAYOUT
   ===================================================================== */
.site-header { position:sticky; top:0; z-index:50; background:color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter:saturate(1.4) blur(14px); -webkit-backdrop-filter:saturate(1.4) blur(14px); border-bottom:1px solid var(--line); }
.site-header .container { display:flex; align-items:center; gap:16px; height:var(--header-h); }
.brand { display:flex; align-items:center; gap:10px; color:var(--text); text-decoration:none !important; min-width:0; }
.brand img { width:46px; height:46px; border-radius:50%; box-shadow:var(--shadow-sm); }
.brand b { display:block; font-family:var(--font-display); font-size:1.15rem; line-height:1.1; color:var(--coral-600); }
.brand small { display:block; font-size:.74rem; color:var(--text-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.main-nav { display:none; gap:4px; margin-left:auto; }
.main-nav a { padding:8px 14px; border-radius:999px; color:var(--text-2); font-weight:500; text-decoration:none; }
.main-nav a:hover, .main-nav a.is-active { color:var(--primary); background:var(--primary-soft); }
.header-actions { display:flex; align-items:center; gap:6px; margin-left:auto; }
.lang-switch { display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border-radius:999px; border:1.5px solid var(--line-strong); color:var(--text-2); font-weight:600; font-size:.85rem; text-decoration:none !important; min-height:38px; }
.lang-switch:hover { border-color:var(--primary); color:var(--primary); }
.nav-toggle { display:inline-grid; }
@media (min-width:1000px){ .main-nav { display:flex; } .header-actions { margin-left:12px; } .nav-toggle { display:none; } }
@media (max-width:420px){ .brand small { display:none; } .header-actions .btn-login span { display:none; } .header-actions .btn-login { width:44px; padding:0; } }

.mobile-drawer { position:fixed; inset:0; z-index:80; visibility:hidden; }
.mobile-drawer.open { visibility:visible; }
.mobile-drawer .scrim { position:absolute; inset:0; background:rgba(30,15,20,.4); opacity:0; transition:opacity .25s; }
.mobile-drawer.open .scrim { opacity:1; }
.mobile-drawer .panel { position:absolute; right:0; top:0; bottom:0; width:min(320px, 86vw); background:var(--surface); padding:20px; transform:translateX(100%); transition:transform .3s var(--ease); display:flex; flex-direction:column; gap:4px; overflow-y:auto; }
.mobile-drawer.open .panel { transform:none; }
.mobile-drawer .panel a.nav-item { display:flex; gap:12px; align-items:center; padding:12px 14px; border-radius:12px; color:var(--text); font-weight:500; text-decoration:none; }
.mobile-drawer .panel a.nav-item:hover, .mobile-drawer .panel a.nav-item.is-active { background:var(--primary-soft); color:var(--primary); }

/* Hero */
.hero { position:relative; overflow:hidden; background:linear-gradient(180deg, var(--hero-tint, #fde3dd) 0%, var(--bg) 100%); }
:root[data-theme="dark"] .hero { background:linear-gradient(180deg, var(--hero-tint, #2a1d22) 0%, var(--bg) 100%); }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .hero { background:linear-gradient(180deg, #2a1d22 0%, var(--bg) 100%); } :root:not([data-theme="light"]) .auth-wrap { background:var(--bg); } :root:not([data-theme="light"]) .badge { color:var(--coral-300); } }
.hero-banner { position:relative; width:100%; max-width:1920px; margin:0 auto; aspect-ratio:1920/480; background:url("../img/banner.webp") center/cover no-repeat; }
.hero-banner h1 { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
@media (max-width:640px){ .hero-banner { aspect-ratio:16/7; background-size:cover; background-position:50% 50%; } }
.hero-body { padding:28px 0 8px; text-align:center; }
.hero-body p.lead { font-size:clamp(1rem, .9rem + .5vw, 1.2rem); color:var(--text-2); max-width:640px; margin:0 auto 22px; }
.hero-cta { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }

.section { padding:56px 0; }
.section-sm { padding:32px 0; }
.section-head { display:flex; align-items:end; gap:16px; margin-bottom:24px; flex-wrap:wrap; }
.section-head h2 { margin:0; }
.section-head .kicker { display:block; font-family:var(--font-display); color:var(--primary); font-size:.95rem; margin-bottom:2px; }
.section-alt { background:var(--bg-soft); }

.service-card { padding:24px; height:100%; }
.service-card h3 { margin:14px 0 6px; }
.service-card p { color:var(--text-2); font-size:.93rem; margin:0; }
.service-card .go { margin-top:14px; display:inline-flex; align-items:center; gap:6px; color:var(--primary); font-weight:600; font-size:.9rem; }

.stat-band { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
@media (min-width:800px){ .stat-band { grid-template-columns:repeat(4,1fr); } }
.stat-band .stat { text-align:center; padding:22px 12px; border-radius:var(--radius-lg); background:var(--surface); border:1px solid var(--line); }
.stat-band .stat b { display:block; font-family:var(--font-display); font-size:clamp(1.8rem, 1.4rem + 1.5vw, 2.6rem); line-height:1.1; color:var(--coral-600); }
.stat-band .stat:nth-child(2) b { color:var(--iep-green); } .stat-band .stat:nth-child(3) b { color:var(--iep-purple); } .stat-band .stat:nth-child(4) b { color:var(--navy-500); }

.news-card { overflow:hidden; padding:0; height:100%; display:flex; flex-direction:column; }
.news-card .thumb { aspect-ratio:16/10; background:linear-gradient(135deg, var(--coral-100), #e9eef9); display:grid; place-items:center; color:var(--coral-300); }
.news-card .thumb .icon { width:48px; height:48px; }
.news-card .body { padding:18px 20px 20px; display:flex; flex-direction:column; gap:6px; flex:1; }
.news-card h3 { margin:0; font-size:1.05rem; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.skeleton { background:linear-gradient(90deg, var(--bg-soft) 0%, var(--surface-2) 50%, var(--bg-soft) 100%); background-size:200% 100%; animation:shimmer 1.6s infinite; border-radius:8px; height:12px; }
@keyframes shimmer { to { background-position:-200% 0; } }

.why-item { display:flex; gap:16px; align-items:flex-start; }
.why-item h3 { margin:0 0 4px; }

.site-footer { background:var(--navy-900); color:#d7dfea; padding:48px 0 calc(24px + env(safe-area-inset-bottom)); margin-top:40px; }
.site-footer a { color:#fff; }
.site-footer h4 { color:#fff; font-size:1rem; margin-bottom:12px; }
.site-footer .grid { gap:32px; }
@media (min-width:800px){ .site-footer .grid { grid-template-columns:2fr 1fr 1fr; } }
.site-footer .brand b { color:#ffb3a5; } .site-footer .brand small { color:#b8c4d6; }
.site-footer ul { list-style:none; padding:0; margin:0; display:grid; gap:8px; }
.site-footer .copy { border-top:1px solid rgba(255,255,255,.12); margin-top:32px; padding-top:18px; font-size:.84rem; color:#9fb0c7; display:flex; gap:12px; flex-wrap:wrap; }

/* PWA install toast */
.install-toast { position:fixed; left:16px; right:16px; bottom:calc(16px + env(safe-area-inset-bottom)); z-index:70; max-width:420px; margin:0 auto; display:none; gap:12px; align-items:center; padding:14px 16px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-lg); }
.install-toast.show { display:flex; animation:pop .35s var(--ease); }
.install-toast img { width:44px; height:44px; border-radius:12px; }
@keyframes pop { from { transform:translateY(20px); opacity:0; } }
.app-shell ~ .install-toast { bottom:calc(84px + env(safe-area-inset-bottom)); }

/* =====================================================================
   AUTH
   ===================================================================== */
.auth-wrap { min-height:calc(100vh - var(--header-h)); display:grid; place-items:center; padding:32px 16px 48px; background:radial-gradient(1200px 500px at 10% -10%, #fde0d9 0%, transparent 60%), radial-gradient(800px 400px at 110% 110%, #e5edf9 0%, transparent 60%), var(--bg); }
:root[data-theme="dark"] .auth-wrap { background:var(--bg); }
.auth-card { width:100%; max-width:440px; }
.auth-card .logo { width:84px; height:84px; margin:0 auto 12px; border-radius:50%; box-shadow:var(--shadow); }
.tabs { display:grid; grid-template-columns:1fr 1fr; padding:4px; background:var(--bg-soft); border-radius:999px; margin-bottom:22px; }
.tabs button { min-height:42px; border:0; border-radius:999px; background:transparent; font:600 .9rem var(--font-body); color:var(--text-2); cursor:pointer; display:flex; gap:6px; align-items:center; justify-content:center; }
.tabs button[aria-selected="true"] { background:var(--surface); color:var(--primary); box-shadow:var(--shadow-sm); }
.secure-note { display:flex; gap:8px; align-items:center; justify-content:center; color:var(--text-3); font-size:.78rem; margin-top:18px; text-align:center; }
.demo-box { margin-top:18px; padding:14px; border:1px dashed var(--line-strong); border-radius:var(--radius-sm); }
.demo-box .row { gap:6px; }

/* =====================================================================
   APP SHELL (ระบบหลังบ้าน / ผู้ปกครอง)
   ===================================================================== */
.app-shell { min-height:100vh; display:grid; grid-template-columns:1fr; }
@media (min-width:1024px){ .app-shell { grid-template-columns:var(--sidebar-w) 1fr; } }
.sidebar { display:none; position:sticky; top:0; height:100vh; overflow-y:auto; background:var(--surface); border-right:1px solid var(--line); padding:18px 14px; flex-direction:column; gap:4px; }
@media (min-width:1024px){ .sidebar { display:flex; } }
.sidebar .brand { padding:4px 8px 16px; }
.side-group { font-size:.74rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--text-3); padding:14px 12px 6px; }
.side-link { display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:12px; color:var(--text-2); font-weight:500; font-size:.94rem; text-decoration:none !important; }
.side-link:hover { background:var(--surface-2); color:var(--text); }
.side-link.is-active { background:var(--primary-soft); color:var(--primary); font-weight:600; }
.side-link .badge { margin-left:auto; }
.side-foot { margin-top:auto; padding-top:16px; }
.term-box { padding:12px; border-radius:12px; background:var(--bg-soft); font-size:.84rem; }

.app-main { min-width:0; display:flex; flex-direction:column; }
.topbar { position:sticky; top:0; z-index:40; display:flex; align-items:center; gap:10px; height:64px; padding:0 16px; background:color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-bottom:1px solid var(--line); }
@media (min-width:768px){ .topbar { padding:0 28px; } }
.topbar .brand-mini { white-space:nowrap; display:flex; align-items:center; gap:8px; font-family:var(--font-display); color:var(--coral-600); font-weight:600; }
.topbar .brand-mini img { width:34px; height:34px; border-radius:50%; }
@media (min-width:1024px){ .topbar .brand-mini { display:none; } }
.topbar .page-title { font-family:var(--font-display); font-size:1.1rem; font-weight:600; margin:0; display:none; }
@media (min-width:1024px){ .topbar .page-title { display:block; } }
.avatar { width:38px; height:38px; border-radius:50%; display:grid; place-items:center; background:linear-gradient(135deg, var(--coral-400), var(--iep-purple)); color:#fff; font-weight:700; font-size:.9rem; flex:none; }
.avatar-lg { width:56px; height:56px; font-size:1.2rem; }
.user-chip { display:flex; align-items:center; gap:10px; padding:4px 4px 4px 4px; border-radius:999px; }
.user-chip .meta { display:none; line-height:1.2; }
.user-chip .meta b { display:block; font-size:.88rem; } .user-chip .meta small { color:var(--text-3); font-size:.75rem; }
@media (min-width:768px){ .user-chip .meta { display:block; } }

.content { padding:20px 16px calc(96px + env(safe-area-inset-bottom)); width:100%; max-width:1280px; }
@media (min-width:768px){ .content { padding:28px 28px 48px; } }
.page-head { display:flex; align-items:flex-start; gap:12px; flex-wrap:wrap; margin-bottom:22px; }
.page-head h1 { font-size:clamp(1.4rem, 1.1rem + 1vw, 1.85rem); margin:0; }
.page-head p { margin:4px 0 0; color:var(--text-2); }
.page-head .actions { margin-left:auto; display:flex; gap:8px; flex-wrap:wrap; }
.breadcrumb { display:flex; gap:6px; align-items:center; font-size:.82rem; color:var(--text-3); margin-bottom:6px; flex-wrap:wrap; }
.breadcrumb a { color:var(--text-3); }

/* Bottom tab bar (มือถือ) — ให้ความรู้สึกเหมือนแอป */
.tabbar { position:fixed; left:0; right:0; bottom:0; z-index:60; display:grid; grid-auto-flow:column; grid-auto-columns:1fr; background:color-mix(in srgb, var(--surface) 94%, transparent); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-top:1px solid var(--line); padding:6px 6px calc(6px + env(safe-area-inset-bottom)); }
@media (min-width:1024px){ .tabbar { display:none; } }
.tabbar a { display:flex; flex-direction:column; align-items:center; gap:2px; padding:6px 2px; border-radius:12px; color:var(--text-3); font-size:.7rem; font-weight:600; text-decoration:none !important; }
.tabbar a .icon { width:24px; height:24px; }
.tabbar a.is-active { color:var(--primary); }
.tabbar a.is-active .icon { filter:drop-shadow(0 4px 8px color-mix(in srgb, var(--primary) 40%, transparent)); }

/* Stat tiles */
.kpis { display:grid; gap:12px; grid-template-columns:repeat(2,1fr); }
@media (min-width:900px){ .kpis { grid-template-columns:repeat(4,1fr); gap:20px; } }
@media (max-width:480px){ .kpis .kpi { flex-direction:column; align-items:flex-start; gap:8px; padding:14px; } .kpis .kpi .val { font-size:1.4rem; } }
.kpi { display:flex; gap:14px; align-items:center; }
.kpi .val { font-family:var(--font-display); font-size:1.7rem; font-weight:600; line-height:1.1; font-variant-numeric:tabular-nums; }
.kpi .lbl { color:var(--text-2); font-size:.85rem; }
.progress { height:8px; border-radius:999px; background:var(--bg-soft); overflow:hidden; }
.progress > i { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg, var(--coral-400), var(--coral-600)); }
.progress.ok > i { background:var(--ok); }
.list { list-style:none; margin:0; padding:0; }
.list li { display:flex; gap:12px; align-items:center; padding:12px 0; border-bottom:1px solid var(--line); }
.list li:last-child { border-bottom:0; }
.empty-state { text-align:center; padding:40px 16px; color:var(--text-3); }
.empty-state .icon { width:44px; height:44px; margin:0 auto 10px; color:var(--coral-300); }

/* Child card (ผู้ปกครอง) */
.child-card { position:relative; overflow:hidden; }
.child-card::after { content:""; position:absolute; right:-40px; top:-40px; width:160px; height:160px; border-radius:50%; background:radial-gradient(circle, var(--coral-100), transparent 70%); opacity:.8; pointer-events:none; }
.child-card .head { display:flex; gap:14px; align-items:center; }
.child-card .mini-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:18px 0; }
.child-card .mini-stats div { background:var(--surface-2); border-radius:12px; padding:10px; text-align:center; }
.child-card .mini-stats b { display:block; font-family:var(--font-display); font-size:1.35rem; color:var(--text); }
.child-card .mini-stats small { color:var(--text-3); font-size:.75rem; }

.seg { display:inline-flex; padding:4px; background:var(--bg-soft); border-radius:999px; gap:2px; }
.seg a, .seg button { padding:6px 14px; border-radius:999px; color:var(--text-2); font-weight:600; font-size:.85rem; border:0; background:none; cursor:pointer; text-decoration:none !important; }
.seg .is-active { background:var(--surface); color:var(--primary); box-shadow:var(--shadow-sm); }

/* Score entry grid */
.score-grid input { width:64px; min-height:38px; padding:6px; text-align:center; border:1.5px solid var(--line-strong); border-radius:8px; background:var(--surface); color:var(--text); font:600 .95rem var(--font-body); font-variant-numeric:tabular-nums; }
.score-grid input:focus { outline:none; border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-soft); }
.score-grid input.invalid { border-color:var(--bad); background:var(--bad-soft); }
.score-grid th small { display:block; font-weight:500; color:var(--text-3); }
.score-grid td.sticky, .score-grid th.sticky { position:sticky; left:0; background:var(--surface); z-index:2; }
.score-grid thead th.sticky { z-index:3; background:var(--surface-2); }
.save-state { display:inline-flex; align-items:center; gap:6px; font-size:.82rem; color:var(--ok); }

/* =====================================================================
   PP.6 PRINT — 1 แผ่น A4 (210×297mm)
   ===================================================================== */
.print-toolbar { position:sticky; top:0; z-index:10; display:flex; gap:10px; align-items:center; flex-wrap:wrap; padding:12px 16px; background:var(--surface); border-bottom:1px solid var(--line); }
.print-stage { padding:24px 12px 60px; background:#e9e4e6; min-height:100vh; overflow-x:auto; }
.a4 { --fs:9.5pt; width:210mm; height:297mm; overflow:hidden; margin:0 auto 24px; background:#fff; color:#111; padding:9mm 11mm 8mm;
      box-shadow:0 10px 30px rgba(0,0,0,.15); font-family:"Sarabun", "Anuphan", sans-serif; font-size:var(--fs); line-height:1.3;
      display:flex; flex-direction:column; gap:2.2mm; }
.a4 .en { color:#555; font-size:.82em; font-weight:400; }
.pp6-head { display:grid; grid-template-columns:17mm 1fr 17mm; align-items:center; gap:4mm; border-bottom:1.5px solid #333; padding-bottom:2mm; text-align:center; }
.pp6-head img { width:17mm; height:17mm; }
.pp6-head .t1 { font-size:1.4em; font-weight:700; line-height:1.2; }
.pp6-head .t2 { font-size:.95em; }
.pp6-head .code { border:1.5px solid #333; padding:1.5mm 0; font-weight:700; font-size:1.2em; }
.pp6-info { display:grid; grid-template-columns:2.4fr 1fr 1.2fr .6fr; gap:1mm 4mm; }
.pp6-info .k { color:#444; }
.pp6-table { width:100%; border-collapse:collapse; font-size:.95em; }
.pp6-table th, .pp6-table td { border:1px solid #666; padding:.55mm 1.6mm; line-height:1.25; }
.pp6-table th { background:#f3eeee; font-weight:600; text-align:center; }
.pp6-table td.c { text-align:center; white-space:nowrap; }
.pp6-table td.lv { width:15mm; }
.pp6-table tr.grp td { background:#faf6f6; font-weight:600; }
.pp6-table tr.sum td { font-weight:700; background:#faf6f6; }
.pp6-cols { display:grid; grid-template-columns:1.25fr 1fr 1fr; gap:2.5mm; align-items:start; }
.pp6-cols .pp6-table { font-size:.88em; }
.pp6-comments { display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:2.5mm; }
.pp6-comments > div { border:1px solid #666; min-height:17mm; padding:1mm 2mm; }
.pp6-sign { display:grid; grid-template-columns:repeat(3,1fr); gap:5mm; text-align:center; font-size:.92em; margin-top:auto; }
.pp6-sign .line { border-bottom:1px dotted #333; height:9mm; margin-bottom:.8mm; }
.pp6-foot { display:flex; justify-content:space-between; align-items:flex-end; font-size:.8em; color:#555; border-top:1px solid #ddd; padding-top:1.5mm; }
.pp6-qr { width:15mm; height:15mm; border:1px solid #999; display:grid; place-items:center; font-size:7pt; color:#999; }
@page { size:A4 portrait; margin:0; }
@media print {
  html, body { background:#fff !important; width:210mm; }
  .print-toolbar, .no-print { display:none !important; }
  .print-stage { padding:0; background:#fff; min-height:0; overflow:visible; }
  .a4 { margin:0; box-shadow:none; break-after:page; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
}

/* Utility */
.mt-0{margin-top:0}.mt-1{margin-top:8px}.mt-2{margin-top:16px}.mt-3{margin-top:24px}.mt-4{margin-top:32px}
.mb-0{margin-bottom:0}.mb-1{margin-bottom:8px}.mb-2{margin-bottom:16px}.mb-3{margin-bottom:24px}
.text-center{text-align:center}.w-100{width:100%}
@media (max-width:767px){ .hide-sm{display:none !important} }
@media (min-width:768px){ .show-sm-only{display:none !important} }
.grade-list { list-style:none; margin:0; } .grade-list li { display:flex; gap:12px; align-items:center; padding:12px 0; border-bottom:1px solid var(--line); } .grade-list li:last-child { border-bottom:0; }
@media (prefers-reduced-motion: reduce){ *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; } }
@media (max-width:440px){
  .topbar { gap:4px; padding:0 10px; }
  .topbar .bm-text, .topbar .brand-mini .brand-school { display:none; }   /* จอแคบ: โลโก้โรงเรียนอยู่ในเมนูซ้าย (☰) — คงกระดิ่งแจ้งเตือนไว้ */
  .topbar .lang-switch { padding:6px 10px; }
}
.flip { transform:scaleX(-1); }

/* Workflow stepper */
.stepper { list-style:none; margin:0 0 24px; padding:0; display:grid; grid-template-columns:repeat(5,1fr); gap:6px; counter-reset:s; }
.stepper li { position:relative; display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center; color:var(--text-2); }
.stepper li:not(:last-child)::after { content:""; position:absolute; top:22px; left:calc(50% + 26px); right:calc(-50% + 26px); height:2px; background:var(--line-strong); }
.stepper .dot { width:44px; height:44px; border-radius:50%; display:grid; place-items:center; background:var(--primary-soft); color:var(--primary); }
.stepper li:nth-child(3) .dot { background:var(--primary); color:#fff; }
@media (max-width:560px){ .stepper .small { font-size:.7rem; line-height:1.25; } .stepper .dot { width:36px; height:36px; } .stepper li:not(:last-child)::after { top:18px; left:calc(50% + 20px); right:calc(-50% + 20px); } }

/* Timetable grid */
.tt-wrap { overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); }
.tt { width:100%; min-width:860px; border-collapse:separate; border-spacing:0; font-size:.84rem; }
.tt th, .tt td { border-bottom:1px solid var(--line); border-right:1px solid var(--line); padding:6px; vertical-align:top; }
.tt thead th { background:var(--surface-2); font-weight:600; color:var(--text-2); text-align:center; white-space:nowrap; }
.tt thead th small { display:block; font-weight:500; color:var(--text-3); font-size:.72rem; }
.tt th.day { position:sticky; left:0; z-index:1; background:var(--surface-2); width:84px; text-align:left; }
.tt td.brk { background:repeating-linear-gradient(-45deg, var(--bg-soft) 0 6px, transparent 6px 12px); color:var(--text-3); text-align:center; vertical-align:middle; font-size:.72rem; writing-mode:vertical-rl; text-orientation:sideways; -webkit-text-orientation:sideways; letter-spacing:0; white-space:nowrap; padding:4px 2px; width:28px; }
.tt .cell { display:block; border-radius:10px; padding:6px 8px; min-height:58px; background:var(--a-bg, var(--primary-soft)); color:var(--text); text-decoration:none !important; border:1.5px solid transparent; }
.tt .cell b { display:block; font-size:.82rem; line-height:1.25; }
.tt .cell small { display:block; color:var(--text-2); font-size:.72rem; }
.tt .cell.sub { border-color:var(--warn); background:var(--warn-soft); }
.tt .cell.conflict { border-color:var(--bad); background:var(--bad-soft); }
.tt .cell.empty { background:transparent; border:1.5px dashed var(--line-strong); color:var(--text-3); display:grid; place-items:center; }
.a-ท { --a-bg:#fde7e3 } .a-ค { --a-bg:#e3eefb } .a-ว { --a-bg:#e3f4ea } .a-ส { --a-bg:#fbf0dc } .a-พ { --a-bg:#e6f6f7 } .a-ศ { --a-bg:#f1e6f8 } .a-ง { --a-bg:#eef0e0 } .a-อ { --a-bg:#ffe9d6 } .a-ก { --a-bg:#ececec }
:root[data-theme="dark"] .tt .cell:not(.empty) { --a-bg:var(--surface-2); }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .tt .cell:not(.empty) { --a-bg:var(--surface-2); } }
.legend { display:flex; flex-wrap:wrap; gap:8px; }
.legend span { display:inline-flex; align-items:center; gap:6px; font-size:.78rem; color:var(--text-2); }
.legend i { width:12px; height:12px; border-radius:4px; background:var(--a-bg); display:inline-block; }
/* Mobile timetable: รายวัน */
.tt-day { display:none; }
@media (max-width:767px){ .tt-wrap.has-day { display:none; } .tt-day { display:block; } }
.tt-day .list li { align-items:stretch; }
.tt-day .time { width:64px; flex:none; font-size:.75rem; color:var(--text-3); font-variant-numeric:tabular-nums; }
.tt-day .cell { flex:1; }
@media (min-width:641px){ .table-wrap .table { min-width:720px; } .table td { white-space:normal; } }

/* Today list + now highlight */
.today-list li { gap:12px; }
.today-list .time { width:64px; flex:none; font-size:.75rem; color:var(--text-3); font-variant-numeric:tabular-nums; line-height:1.3; }
.today-list li.is-now { background:var(--ok-soft); border-radius:12px; padding-left:10px; padding-right:10px; border-bottom-color:transparent; }
.today-list li.lunch { padding:6px 0; background:repeating-linear-gradient(-45deg, var(--bg-soft) 0 6px, transparent 6px 12px); border-radius:8px; }
.tt .cell.now { box-shadow:0 0 0 2.5px var(--ok); }
.tt .cell.now::before { content:"● NOW"; display:block; font-size:.62rem; font-weight:700; color:var(--ok); letter-spacing:.04em; }
.hours-grid input { width:52px; min-height:36px; text-align:center; border:1.5px solid var(--line-strong); border-radius:8px; background:var(--surface); color:var(--text); font:600 .95rem var(--font-body); }
.hours-grid input:focus { outline:none; border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-soft); }
.hours-grid tfoot th { background:var(--surface-2); border-top:1px solid var(--line); }
.area-dot { display:inline-block; width:10px; height:10px; border-radius:3px; background:var(--a-bg); margin-right:8px; vertical-align:middle; box-shadow:inset 0 0 0 1px rgba(0,0,0,.08); }
/* Backfill timeline */
.bf-timeline { display:grid; gap:12px; grid-template-columns:repeat(2,1fr); }
@media (min-width:700px){ .bf-timeline { grid-template-columns:repeat(3,1fr); } }
@media (min-width:1100px){ .bf-timeline { grid-template-columns:repeat(6,1fr); } }
.bf-step { padding:14px; display:flex; flex-direction:column; }
.bf-step .btn { margin-top:auto; }
.bf-step.is-current { border-color:var(--iep-purple); box-shadow:0 0 0 2px color-mix(in srgb, var(--iep-purple) 25%, transparent); }
/* Settings */
.set-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 0; border-bottom:1px solid var(--line); font-size:.92rem; }
.switch-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 0; border-bottom:1px solid var(--line); cursor:pointer; font-size:.92rem; }
.switch-row input { position:absolute; opacity:0; width:1px; height:1px; }
.switch-row i { flex:none; width:44px; height:26px; border-radius:999px; background:var(--line-strong); position:relative; transition:background .2s; }
.switch-row i::after { content:""; position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:#fff; box-shadow:var(--shadow-sm); transition:transform .2s var(--ease); }
.switch-row input:checked + i { background:var(--ok); }
.switch-row input:checked + i::after { transform:translateX(18px); }
.switch-row input:focus-visible + i { outline:3px solid var(--coral-300); outline-offset:2px; }
.score-grid th.term-head { background:var(--primary-soft); color:var(--coral-700); }

/* School map */
.map-frame { position:relative; aspect-ratio:16/10; background:linear-gradient(135deg, #e6efe3, #e3ecf7); }
.map-frame iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
.map-facade { position:absolute; inset:0; display:flex; flex-direction:column; gap:8px; align-items:center; justify-content:center; border:0; cursor:pointer; color:var(--navy-600); font:600 .95rem var(--font-body);
  background:radial-gradient(circle at 50% 45%, rgba(255,255,255,.9) 0 70px, transparent 71px), repeating-linear-gradient(0deg, rgba(31,76,125,.06) 0 1px, transparent 1px 28px), repeating-linear-gradient(90deg, rgba(31,76,125,.06) 0 1px, transparent 1px 28px), linear-gradient(135deg, #e6efe3, #e3ecf7); }
.map-facade .icon { width:36px; height:36px; color:var(--primary); }
.map-facade:hover span { text-decoration:underline; }
.structure-grid input { width:64px; min-height:36px; text-align:center; border:1.5px solid var(--line-strong); border-radius:8px; background:var(--surface); color:var(--text); font:600 .95rem var(--font-body); }
.structure-grid input[readonly] { background:var(--surface-2); color:var(--text-2); border-style:dashed; }
.structure-grid th.term-head { background:var(--primary-soft); color:var(--coral-700); }
/* Import */
.dropzone { display:flex; flex-direction:column; align-items:center; gap:6px; padding:36px 16px; border:2px dashed var(--line-strong); border-radius:var(--radius); background:var(--surface-2); cursor:pointer; text-align:center; position:relative; }
.dropzone:hover, .dropzone:focus-within { border-color:var(--primary); background:var(--primary-soft); }
.dropzone .icon { width:36px; height:36px; color:var(--primary); }
.dropzone input { position:absolute; inset:0; opacity:0; cursor:pointer; }
.dropzone.has-file b { color:var(--ok); }
tr.imp-error td { background:color-mix(in srgb, var(--bad-soft) 55%, transparent); }
/* Student profile */
.profile-head { display:flex; gap:18px; align-items:center; flex-wrap:wrap; }
.profile-head .photo { width:84px; height:104px; border-radius:14px; background:linear-gradient(135deg, var(--coral-100), #e3ecf7); display:grid; place-items:center; color:var(--coral-300); flex:none; }
.profile-head .photo .icon { width:40px; height:40px; }
.profile-tabs { overflow-x:auto; max-width:100%; flex-wrap:nowrap; }
.profile-tabs a { white-space:nowrap; }
.kv { display:flex; gap:12px; padding:9px 0; border-bottom:1px solid var(--line); font-size:.9rem; align-items:center; }
.kv:last-child { border-bottom:0; }
.kv > span { width:42%; flex:none; color:var(--text-3); font-size:.84rem; }
.kv > b { font-weight:500; flex:1; min-width:0; display:flex; align-items:center; gap:4px; flex-wrap:wrap; }
section[id^="p-"] { scroll-margin-top:80px; }

/* Attendance */
.hour-tabs { overflow-x:auto; max-width:100%; flex-wrap:nowrap; }
.hour-tabs a { white-space:nowrap; display:inline-flex; align-items:center; gap:4px; }
.att-list { list-style:none; margin:0; }
.att-row { display:flex; align-items:center; gap:10px; padding:10px 4px; border-bottom:1px solid var(--line); flex-wrap:wrap; border-radius:10px; }
.att-row:last-child { border-bottom:0; }
.att-row .no { width:26px; text-align:center; color:var(--text-3); font-size:.8rem; font-variant-numeric:tabular-nums; }
.att-row .who { flex:1; min-width:150px; }
.att-row.st-late { background:var(--warn-soft); } .att-row.st-absent { background:var(--bad-soft); }
.att-row.st-sick, .att-row.st-personal { background:var(--info-soft); }
.att-opts { display:flex; gap:4px; flex-wrap:wrap; }
@media (max-width:640px){ .att-opts { width:100%; padding-left:36px; } .att-opts .opt { flex:1; } }
.att-opts .opt { position:relative; }
.att-opts .opt input { position:absolute; opacity:0; inset:0; cursor:pointer; margin:0; }
.att-opts .opt span { display:block; text-align:center; min-width:52px; padding:7px 10px; border-radius:10px; border:1.5px solid var(--line-strong); font-size:.8rem; font-weight:600; color:var(--text-2); background:var(--surface); }
.att-opts .opt input:focus-visible + span { outline:3px solid var(--coral-300); outline-offset:1px; }
.att-opts .opt-present input:checked + span { background:var(--ok); border-color:var(--ok); color:#fff; }
.att-opts .opt-late input:checked + span { background:var(--warn); border-color:var(--warn); color:#fff; }
.att-opts .opt-sick input:checked + span, .att-opts .opt-personal input:checked + span { background:var(--info); border-color:var(--info); color:#fff; }
.att-opts .opt-absent input:checked + span { background:var(--bad); border-color:var(--bad); color:#fff; }
.att-savebar { position:sticky; bottom:calc(76px + env(safe-area-inset-bottom)); z-index:20; display:flex; align-items:center; gap:10px; margin-top:12px; padding:10px 14px; border-radius:var(--radius); background:color-mix(in srgb, var(--surface) 94%, transparent); backdrop-filter:blur(10px); border:1px solid var(--line); box-shadow:var(--shadow); }
@media (min-width:1024px){ .att-savebar { bottom:16px; } }
/* Calendar */
.cal { display:grid; grid-template-columns:repeat(7,1fr); gap:6px; text-align:center; }
.cal-h { font-size:.72rem; color:var(--text-3); font-weight:600; }
.cal-d { aspect-ratio:1; display:grid; place-items:center; border-radius:10px; font-size:.85rem; font-weight:600; background:var(--surface-2); color:var(--text-2); }
.cal-present { background:var(--ok-soft) !important; color:var(--ok) !important; } .cal-late { background:var(--warn-soft) !important; color:var(--warn) !important; }
.cal-sick, .cal-personal { background:var(--info-soft) !important; color:var(--info) !important; } .cal-absent { background:var(--bad-soft) !important; color:var(--bad) !important; }
.cal-holiday { background:repeating-linear-gradient(-45deg, var(--bg-soft) 0 5px, transparent 5px 10px) !important; color:var(--text-3) !important; }
.cal-weekend, .cal-future { background:transparent !important; color:var(--text-3) !important; font-weight:400; }
.legend i.cal-present, .legend i.cal-late, .legend i.cal-sick, .legend i.cal-personal, .legend i.cal-absent, .legend i.cal-holiday { width:12px; height:12px; border-radius:4px; }
@media (max-width:640px){
  .att-counts { grid-template-columns:repeat(4,1fr); gap:6px; }
  .att-counts .kpi { padding:10px 6px !important; align-items:center !important; text-align:center; gap:2px !important; }
  .att-counts .chip-icon { display:none; }
  .att-counts .kpi .val { font-size:1.3rem !important; }
  .att-counts .kpi .lbl { font-size:.68rem; line-height:1.2; }
}
@media (max-width:640px){
  .att-opts { display:grid; grid-template-columns:repeat(5,1fr); gap:4px; width:100%; padding-left:0; }
  .att-opts .opt span { min-width:0; padding:8px 2px; font-size:.74rem; }
  .att-row { padding:10px 6px; gap:6px; }
}
/* Permissions */
.perm-card { display:flex; flex-direction:column; }
.avatars { display:flex; align-items:center; }
.avatars .avatar { width:32px; height:32px; font-size:.8rem; border:2px solid var(--surface); margin-left:-8px; }
.avatars .avatar:first-child { margin-left:0; }
.perm-cat { font-size:.74rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--text-3); padding:14px 0 2px; }
.pick-list { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:6px 12px; max-height:220px; overflow:auto; padding:10px; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--surface-2); }
.add-member { border-top:1px solid var(--line); padding-top:14px; }
.switch-row input:disabled + i { opacity:.5; }

/* =====================================================================
   ICON SYSTEM v2 — tinted tiles ตามหมวดเมนู (Lucide-based)
   ===================================================================== */
.icon { stroke-width:1.9; }
:root {
  --tone-coral:#e9705e; --tone-coral-bg:#fde8e3;
  --tone-teal:#1f9aa8;  --tone-teal-bg:#dcf2f4;
  --tone-green:#3f9a4a; --tone-green-bg:#e3f3e1;
  --tone-purple:#8a4fb3; --tone-purple-bg:#f0e6f8;
  --tone-navy:#2a5d93;  --tone-navy-bg:#e2ecf8;
}
:root[data-theme="dark"] { --tone-coral-bg:#3a2427; --tone-teal-bg:#173136; --tone-green-bg:#1b3020; --tone-purple-bg:#2d2238; --tone-navy-bg:#1a2a3d; }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) { --tone-coral-bg:#3a2427; --tone-teal-bg:#173136; --tone-green-bg:#1b3020; --tone-purple-bg:#2d2238; --tone-navy-bg:#1a2a3d; } }
.side-link { --t:var(--tone-navy); --tb:var(--tone-navy-bg); gap:11px; padding:7px 10px; }
.side-link.tone-coral  { --t:var(--tone-coral);  --tb:var(--tone-coral-bg); }
.side-link.tone-teal   { --t:var(--tone-teal);   --tb:var(--tone-teal-bg); }
.side-link.tone-green  { --t:var(--tone-green);  --tb:var(--tone-green-bg); }
.side-link.tone-purple { --t:var(--tone-purple); --tb:var(--tone-purple-bg); }
.side-link .si { width:32px; height:32px; border-radius:10px; display:grid; place-items:center; flex:none; background:var(--tb); color:var(--t); transition:background .2s, color .2s, transform .2s var(--ease); }
.side-link .si .icon { width:18px; height:18px; }
.side-link:hover .si { transform:scale(1.06); }
.side-link.is-active { background:var(--tb); color:var(--text); }
.side-link.is-active .si { background:var(--t); color:#fff; box-shadow:0 6px 14px -6px var(--t); }
.side-link.is-active { font-weight:600; }
/* ปุ่มออกจากระบบในแถบข้าง */
.side-foot .side-link > .icon { width:32px; height:18px; color:var(--text-3); }
/* Tab bar มือถือ */
.tabbar a .ti { width:46px; height:30px; border-radius:999px; display:grid; place-items:center; transition:background .2s; }
.tabbar a .ti .icon { width:22px; height:22px; }
.tabbar a.is-active .ti { background:var(--primary-soft); color:var(--primary); }
.tabbar a.is-active .icon { filter:none; }
/* chip-icon ในการ์ด: เส้นบางลงเล็กน้อย ดูเบาขึ้น */
.chip-icon .icon { stroke-width:1.8; }

/* Activation / access */
.steps-mini { list-style:none; display:flex; gap:6px; justify-content:center; padding:0; margin:10px 0 0; font-size:.78rem; }
.steps-mini li { padding:4px 10px; border-radius:999px; background:var(--bg-soft); color:var(--text-3); }
.steps-mini li.on { background:var(--primary); color:#fff; } .steps-mini li.done { background:var(--ok-soft); color:var(--ok); }
.code-input { font:700 1.3rem/1 ui-monospace, "SF Mono", Menlo, monospace; letter-spacing:.18em; text-align:center; text-transform:uppercase; }
.slip-sheet { width:210mm; margin:0 auto; background:#fff; display:grid; grid-template-columns:1fr 1fr; padding:8mm; gap:0; box-shadow:0 10px 30px rgba(0,0,0,.15); color:#111; font-family:"Sarabun", "Anuphan", sans-serif; }
.slip { border:1px dashed #999; padding:5mm; display:flex; flex-direction:column; gap:3mm; break-inside:avoid; min-height:66mm; }
.slip-head { display:flex; gap:3mm; align-items:center; border-bottom:1px solid #eee; padding-bottom:2mm; }
.slip-head img { width:10mm; height:10mm; } .slip-head b { display:block; font-size:11pt; color:#c4503c; } .slip-head small { font-size:8pt; color:#555; }
.slip-body { display:flex; gap:4mm; align-items:center; }
.slip-qr svg { width:30mm; height:30mm; display:block; }
.slip-title { font-size:8.5pt; color:#555; } .slip-name { font-size:11pt; font-weight:700; line-height:1.25; } .slip-meta { font-size:8.5pt; color:#555; margin-bottom:1.5mm; }
.slip-kv { display:flex; gap:2mm; align-items:baseline; font-size:8.5pt; } .slip-kv span { color:#666; }
.slip-code { font:700 13pt/1.2 ui-monospace, Menlo, monospace; letter-spacing:.08em; }
.slip-steps { margin:0; padding-left:5mm; font-size:8pt; color:#333; line-height:1.4; }
.slip-foot { display:flex; justify-content:space-between; align-items:center; font-size:7.5pt; color:#777; margin-top:auto; }
.line-btn { background:#06c755; color:#fff !important; min-height:28px; padding:4px 10px; }
@media print { .slip-sheet { box-shadow:none; padding:6mm; } }
@media (max-width:860px){ .slip-sheet { width:100%; grid-template-columns:1fr; } }
/* Profile */
.profile-top { display:flex; gap:16px; align-items:center; flex-wrap:wrap; }
.avatar-xl { width:84px; height:84px; font-size:2rem; border-radius:50%; object-fit:cover; box-shadow:var(--shadow); }
img.avatar { object-fit:cover; background:var(--surface-2); }
.user-chip { text-decoration:none !important; color:inherit; border-radius:999px; padding:3px 10px 3px 3px; }
.user-chip:hover { background:var(--primary-soft); }

/* Safari/iOS ไม่ใช้ <style> ภายในไฟล์ sprite ภายนอก — กำหนดสไตล์เส้นที่ตัว <svg> (สืบทอดเข้า <use> ได้ทุกเบราว์เซอร์) */
.icon { fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }

/* Room chips */
.room-chips { display:flex; gap:8px; flex-wrap:wrap; }
.room-chips .chip { display:inline-flex; align-items:baseline; gap:6px; padding:8px 14px; border-radius:999px; border:1.5px solid var(--line-strong); background:var(--surface); color:var(--text-2); font-weight:600; font-size:.88rem; text-decoration:none !important; }
.room-chips .chip b { color:var(--text); } .room-chips .chip small { color:var(--text-3); font-weight:500; font-size:.72rem; }
.room-chips .chip.is-active { background:var(--primary); border-color:var(--primary); color:#fff; } .room-chips .chip.is-active b, .room-chips .chip.is-active small { color:#fff; }
/* Student photos */
.stu-photo { width:40px; height:40px; border-radius:12px; object-fit:cover; flex:none; background:var(--surface-2); box-shadow:0 0 0 1px var(--line); }
.stu-initial { display:inline-grid; place-items:center; color:#fff; font-weight:700; font-family:var(--font-display);
  background:linear-gradient(135deg, hsl(var(--h) 65% 62%), hsl(calc(var(--h) + 40) 60% 52%)); box-shadow:none; }
.stu-cell { display:flex; align-items:center; gap:10px; color:inherit; text-decoration:none !important; }
.stu-cell:hover b { color:var(--primary); }
.profile-head .stu-photo { width:104px; height:104px; border-radius:18px; }
.photo-box { position:relative; flex:none; }
.photo-actions { position:absolute; right:-8px; bottom:-8px; display:flex; gap:4px; }
.photo-actions .btn { min-height:32px; width:32px; padding:0; border-radius:10px; background:var(--surface); box-shadow:var(--shadow-sm); }
.form-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:0 16px; }
.form-grid .span-2 { grid-column:1/-1; }
@media (min-width:760px){ .form-grid { grid-template-columns:repeat(4,1fr); } .form-grid .span-2 { grid-column:span 2; } }
@media (max-width:520px){ .form-grid { grid-template-columns:1fr; } }
.table tr.row-off td { opacity:.5; }
.table tr.row-total td { background:var(--surface-2); }
.table tr.row-group td { background:var(--surface-2); font-weight:700; font-size:.8rem; color:var(--text-2); }

/* ===== ข่าวสาร ===== */
.news-card .thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.news-card .thumb { position:relative; overflow:hidden; }
.news-card a.stretch { color:inherit; text-decoration:none; }
.news-card a.stretch::after { content:""; position:absolute; inset:0; }
.news-card { position:relative; transition:transform .15s, box-shadow .15s; }
.news-card:hover { transform:translateY(-2px); box-shadow:var(--shadow-lg, 0 10px 30px rgba(0,0,0,.08)); }
.news-card .meta { display:flex; gap:8px; align-items:center; flex-wrap:wrap; font-size:.82rem; color:var(--text-3); margin-top:auto; }
.news-card p { margin:0; color:var(--text-3); font-size:.92rem; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.pin-flag { position:absolute; top:10px; left:10px; background:var(--coral-500, #e8836b); color:#fff; border-radius:999px; padding:3px 10px; font-size:.78rem; display:inline-flex; gap:4px; align-items:center; z-index:1; }
.pin-flag .icon { width:14px; height:14px; }
.img-count { position:absolute; right:10px; bottom:10px; background:rgba(0,0,0,.55); color:#fff; border-radius:999px; padding:2px 9px; font-size:.78rem; display:inline-flex; gap:4px; align-items:center; }
.img-count .icon { width:13px; height:13px; }
.article { max-width:820px; margin:0 auto; }
.article h1 { font-size:clamp(1.5rem, 3.4vw, 2.2rem); line-height:1.3; margin:.3em 0 .4em; }
.article .cover { border-radius:var(--radius-lg, 18px); overflow:hidden; margin:18px 0 22px; background:var(--coral-100); }
.article .cover img { width:100%; height:auto; display:block; }
.article .content { font-size:1.06rem; line-height:1.85; }
.article .content p { margin:0 0 1em; }
.article .content a { word-break:break-all; }
.album { display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:8px; margin:12px 0 24px; }
.album a, .album figure { display:block; margin:0; border-radius:10px; overflow:hidden; aspect-ratio:16/10; background:var(--surface-2, #f3f3f3); position:relative; }
.album img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .2s; }
.album a:hover img { transform:scale(1.04); }
.lightbox { border:0; padding:0; background:transparent; max-width:100vw; max-height:100vh; width:100vw; height:100vh; }
.lightbox::backdrop { background:rgba(10,10,15,.92); }
.lightbox .lb-wrap { position:relative; width:100%; height:100%; display:grid; place-items:center; padding:56px 12px 70px; }
.lightbox img { max-width:100%; max-height:100%; object-fit:contain; border-radius:6px; }
.lightbox .lb-bar { position:fixed; left:0; right:0; bottom:0; padding:14px 18px; color:#eee; display:flex; gap:12px; align-items:center; font-size:.95rem; }
.lightbox .lb-btn { position:fixed; top:50%; transform:translateY(-50%); background:rgba(255,255,255,.12); color:#fff; border:0; width:46px; height:46px; border-radius:50%; display:grid; place-items:center; cursor:pointer; }
.lightbox .lb-btn:hover { background:rgba(255,255,255,.24); }
.lightbox [data-lb-prev] { left:12px; } .lightbox [data-lb-next] { right:12px; }
.lightbox [data-lb-close] { top:28px; right:12px; transform:none; }
.lightbox [data-lb-prev] .icon { transform:rotate(180deg); }
.album-edit { display:grid; grid-template-columns:repeat(auto-fill, minmax(170px, 1fr)); gap:12px; }
.album-edit .ph { border:1px solid var(--line, #e7e7e7); border-radius:12px; overflow:hidden; background:var(--surface, #fff); }
.album-edit .ph img { width:100%; aspect-ratio:16/10; object-fit:cover; display:block; }
.album-edit .ph .ctl { padding:8px; display:grid; gap:6px; font-size:.82rem; }
.album-edit .ph .ctl .input { padding:6px 8px; font-size:.85rem; min-height:auto; }
.album-edit .ph.is-cover { outline:3px solid var(--coral-500, #e8836b); }
.album-new { margin:0; border-radius:10px; overflow:hidden; position:relative; aspect-ratio:16/10; }
.album-new img { width:100%; height:100%; object-fit:cover; }
.album-new figcaption { position:absolute; right:6px; bottom:6px; background:rgba(0,0,0,.6); color:#fff; font-size:.72rem; border-radius:6px; padding:1px 6px; }
.album-new.is-bad { outline:3px solid #d33; }
.drop-zone { border:2px dashed var(--line, #ddd); border-radius:14px; padding:18px; text-align:center; display:block; cursor:pointer; color:var(--text-3); }
.drop-zone:hover { border-color:var(--coral-300, #f2b2a2); }
.drop-zone input { display:block; margin:10px auto 0; max-width:100%; }
.status-pending { background:var(--warn-soft); } .status-returned { background:var(--bad-soft); } .status-published { background:var(--ok-soft); }
.review-note { border-left:4px solid #d9654b; padding:10px 14px; background:var(--bad-soft); border-radius:8px; }
.preview-bar { background:#2b2b38; color:#fff; padding:10px 16px; border-radius:10px; display:flex; gap:10px; align-items:center; margin-bottom:16px; }.form-sec { font-size:1.05rem; display:flex; gap:8px; align-items:center; margin:22px 0 10px; font-weight:700; }
.form-sec .icon { width:20px; height:20px; color:var(--coral-500); flex:none; }
.form-sec small { font-weight:400; }
details > summary.form-sec { list-style:none; } details > summary.form-sec::-webkit-details-marker { display:none; }
details > summary.form-sec::after { content:"▾"; color:var(--text-3); font-size:.9em; }

/* ===== คู่มือการใช้งาน ===== */
.help-card { display:flex; gap:14px; align-items:flex-start; color:inherit; text-decoration:none; padding:20px; transition:transform .15s, box-shadow .15s; }
.help-card:hover { transform:translateY(-2px); box-shadow:var(--shadow-lg); }
.help-card h2 { font-size:1.08rem; margin:0 0 4px; }
.help-card p { margin:0 0 6px; color:var(--text-2); font-size:.92rem; }
.help-layout { display:grid; gap:20px; }
@media (min-width:1000px) { .help-layout { grid-template-columns:250px 1fr; align-items:start; } .help-toc { position:sticky; top:84px; } }
.help-toc { padding:16px; display:grid; gap:6px; font-size:.9rem; }
.help-toc a { color:var(--text-2); text-decoration:none; padding:3px 0; display:flex; gap:6px; align-items:center; }
.help-toc a:hover { color:var(--primary); }
.help-toc .icon { width:16px; height:16px; flex:none; }
.help-toc hr { border:0; border-top:1px solid var(--line); width:100%; margin:6px 0; }
.help-body { display:grid; gap:16px; min-width:0; }
.help-sec { scroll-margin-top:84px; }
.help-sec h2 { font-size:1.12rem; display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin:0 0 10px; }
.help-no { width:28px; height:28px; border-radius:50%; background:var(--primary-soft); color:var(--primary-ink); display:grid; place-items:center; font-size:.9rem; flex:none; }
.help-steps { margin:0; padding-left:22px; display:grid; gap:8px; line-height:1.7; }
.help-steps li::marker { color:var(--coral-500); font-weight:700; }
.help-steps code, .help-tips code { background:var(--surface-2); padding:1px 6px; border-radius:6px; }
.help-tips { margin-top:12px; background:var(--info-soft); border-radius:12px; padding:10px 14px; }
.help-tips p { margin:4px 0; font-size:.92rem; display:flex; gap:8px; align-items:flex-start; }
.help-tips .icon { width:16px; height:16px; flex:none; margin-top:4px; }
@media print {
  .sidebar, .topbar, .tabbar, .site-header, .site-footer, .help-toc, .install-toast { display:none !important; }
  .app-shell, .app-main { display:block !important; margin:0 !important; padding:0 !important; }
  .help-layout { display:block; } .help-sec { break-inside:avoid; box-shadow:none; border:1px solid #ddd; margin-bottom:10px; }
}
.help-other { display:grid; gap:6px; }

/* ===== เกี่ยวกับ IEP ===== */
.about-hero { background:linear-gradient(180deg, var(--hero-tint, #fde3dd) 0%, var(--bg) 100%); padding:48px 0 28px; }
:root[data-theme="dark"] .about-hero { background:linear-gradient(180deg, #2a1d22 0%, var(--bg) 100%); }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .about-hero { background:linear-gradient(180deg, #2a1d22 0%, var(--bg) 100%); } }
.about-hero .kicker { font-family:var(--font-display); color:var(--primary); }
.about-hero h1 { font-size:clamp(1.6rem, 3.6vw, 2.5rem); margin:.2em 0 .3em; line-height:1.25; }
.about-hero .lead { font-size:clamp(1rem, .95rem + .4vw, 1.15rem); color:var(--text-2); max-width:820px; line-height:1.7; }
.about-badges { display:flex; gap:8px; flex-wrap:wrap; margin-top:14px; }
.about-badges .badge { font-size:.9rem; padding:6px 12px; }
.about h2 { font-size:clamp(1.25rem, 2.4vw, 1.6rem); }
.about h3 { font-size:1.02rem; margin:8px 0 4px; }
.about p { line-height:1.8; }
.about-grid { display:grid; gap:24px; }
@media (min-width:900px) { .about-grid { grid-template-columns:1.6fr 1fr; align-items:start; } }
.about-vision .lead-quote { font-family:var(--font-display); font-size:1.15rem; color:var(--coral-600); line-height:1.6; margin:6px 0 0; }
.about-list { gap:14px; }
@media (min-width:700px) { .grid-2 { grid-template-columns:repeat(2, 1fr); } }
.about-item { display:flex; gap:14px; align-items:flex-start; padding:14px 16px; border-radius:var(--radius); background:var(--surface); border:1px solid var(--line); }
.about-item .chip-icon { flex:none; }
.about-item p { margin:0; color:var(--text-2); font-size:.95rem; line-height:1.7; }
.about-item h3 { margin:0 0 2px; }
.wcss { gap:12px; }
@media (min-width:700px) { .grid-5 { grid-template-columns:repeat(3, 1fr); } }
@media (min-width:1000px) { .grid-5 { grid-template-columns:repeat(5, 1fr); } }
.wcss-item { padding:18px; text-align:center; }
.wcss-item .chip-icon { margin:0 auto; }
.wcss-item p { font-size:.88rem; color:var(--text-2); margin:0; line-height:1.6; }
.chips-inline { display:flex; gap:6px; flex-wrap:wrap; margin-top:8px; }
.about-cta { display:flex; gap:16px; align-items:center; justify-content:space-between; flex-wrap:wrap; background:linear-gradient(135deg, var(--coral-50, #fff4f1), var(--surface)); }
.ev-grid select.ev-sel { width:52px; padding:4px 2px; min-height:auto; text-align:center; }
.ev-grid td input { width:64px; }
.tt-edit .tt-sel { width:100%; min-width:110px; padding:6px 4px; font-size:.82rem; min-height:auto; }
.cal-none { background:transparent !important; color:var(--text-2) !important; font-weight:400; outline:1px dashed var(--line); }
.pp6-qr svg { width:100%; height:100%; display:block; } .pp6-qr { border:0; }
.bell-dot { position:absolute; top:2px; right:2px; min-width:18px; height:18px; padding:0 5px; border-radius:999px; background:var(--coral-500); color:#fff; font-size:.68rem; font-weight:700; display:grid; place-items:center; line-height:1; }
.list li.is-unread { background:var(--primary-soft); border-radius:10px; }

/* ===== รายงานการมาเรียน (ช่วงเวลา + พิมพ์ 1 หน้า) ===== */
.att-period { display:flex; gap:10px; align-items:center; justify-content:space-between; flex-wrap:wrap; }
.att-period .seg { flex-wrap:wrap; }
.att-nav { display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
.att-nav form { margin:0; }
.att-matrix th.att-bk { font-size:.75rem; line-height:1.2; white-space:nowrap; }
.att-matrix td, .att-matrix th { white-space:nowrap; }
.att-matrix tfoot th { background:var(--surface-2); }
.att-c-good { background:rgba(22,163,74,.12); } .att-c-mid { background:rgba(234,179,8,.18); } .att-c-low { background:rgba(220,38,38,.16); color:#991b1b; font-weight:600; }
:root[data-theme="dark"] .att-c-low { color:#fca5a5; }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .att-c-low { color:#fca5a5; } }
.att-c-none { color:var(--text-3); }
.att-rep .att-sum { display:grid; grid-auto-flow:column; grid-auto-columns:1fr; border:1px solid #666; }
.att-rep .att-sum > div { display:flex; flex-direction:column; align-items:center; padding:1mm; border-left:1px solid #ccc; }
.att-rep .att-sum > div:first-child { border-left:0; background:#f3eeee; }
.att-rep .att-sum span { font-size:.85em; color:#444; } .att-rep .att-sum b { font-size:1.35em; }
.att-rep .att-note { margin:0; font-size:.8em; color:#555; }
.att-rep .att-tbl th.att-bk { font-size:.85em; line-height:1.15; font-weight:600; }
.att-rep .att-tbl tfoot td { font-weight:700; background:#faf6f6; }
.att-rep .att-names { font-size:.9em; line-height:1.3; } .att-rep .att-names span { margin-right:2mm; }
.att-rep .att-sub { font-weight:700; margin-top:1mm; }
.att-rep .att-legend { display:flex; gap:2mm; font-size:.8em; } .att-rep .att-legend span { padding:.3mm 2mm; border:1px solid #ccc; }
.att-rep .att-c-low { color:#991b1b; }
@media print { .att-rep .att-c-good, .att-rep .att-c-mid, .att-rep .att-c-low { -webkit-print-color-adjust:exact; print-color-adjust:exact; } }
.sub-rep .sub-tbl td { height:2.5em; }
.sub-rep.is-compact { gap:1.6mm; }
.sub-rep.is-compact .pp6-table th, .sub-rep.is-compact .pp6-table td { padding:.3mm 1.2mm; line-height:1.18; }
.sub-rep.is-compact .sub-tbl td { height:auto; }
.sub-rep.is-compact .att-sum b { font-size:1.15em; }
.sub-rep.is-compact .pp6-sign .line { height:6mm; }
/* จัดตาราง: ช่องที่เลือกแล้ว / ชั่วโมงหลักสูตรทั่วไป */
.tt-edit td.tt-set .tt-sel { background:var(--primary-soft); border-color:var(--primary); }
.tt-edit .tt-sel option:disabled { color:#b4a9ac; }
.tt .cell.ext { background:repeating-linear-gradient(135deg, var(--surface-2) 0 6px, var(--bg-soft) 6px 12px); color:var(--text-2); }
.tt-edit .tt-ext { width:100%; min-width:110px; padding:6px; font-size:.8rem; min-height:auto; }
.tt-edit td.iep { background:var(--primary-soft); font-size:.78rem; line-height:1.25; padding:6px; }
.tt-edit td.iep b { display:block; }

/* ===== พิมพ์ตารางเรียน / ตารางสอน (A4 แนวนอน) ===== */
@page land { size:A4 landscape; margin:0; }
.a4.a4l { width:297mm; height:210mm; padding:8mm 10mm 7mm; page:land; gap:2.6mm; }
@media print { body:has(.a4l) { width:297mm !important; } }
.ttp-head { display:grid; grid-template-columns:16mm 1fr auto; align-items:center; gap:4mm; border-bottom:2px solid #c8102e; padding-bottom:2mm; }
.ttp-head img { width:16mm; height:16mm; }
.ttp-head .t1 { font-size:1.55em; font-weight:700; line-height:1.2; color:#7a0c1e; } .ttp-head .t1 span { color:#111; }
.ttp-head .t2 { font-size:.95em; color:#333; }
.ttp-badge { border:2px solid #c8102e; color:#c8102e; border-radius:3mm; padding:1.5mm 4mm; font-weight:700; font-size:1.25em; white-space:nowrap; }
.ttp-grid { width:100%; border-collapse:separate; border-spacing:1.1mm; table-layout:fixed; margin:-1mm; width:calc(100% + 2mm); }
.ttp-grid th { background:#7a0c1e; color:#fff; font-weight:600; padding:1.2mm .5mm; border-radius:1.6mm; font-size:.95em; line-height:1.15; }
.ttp-grid th small { display:block; font-weight:400; font-size:.78em; opacity:.9; }
.ttp-grid th.d { width:19mm; } .ttp-grid th.brk, .ttp-grid td.brk { width:7mm; }
.ttp-grid tbody th.d { background:#fbeaec; color:#7a0c1e; font-size:1.05em; }
.ttp-grid tbody th.dd-1 { border-left:2mm solid #f2c400; } .ttp-grid tbody th.dd-2 { border-left:2mm solid #e86fa6; } .ttp-grid tbody th.dd-3 { border-left:2mm solid #3aa655; }
.ttp-grid tbody th.dd-4 { border-left:2mm solid #f08a24; } .ttp-grid tbody th.dd-5 { border-left:2mm solid #2f7fd0; }
.ttp-grid td { height:15.5mm; border-radius:1.6mm; padding:1mm 1.2mm; vertical-align:middle; text-align:center; background:var(--a-bg, #f6f3f4); line-height:1.15; overflow:hidden; }
.ttp-grid td b { display:block; font-size:.98em; font-weight:700; }
.ttp-grid td small { display:block; font-size:.76em; color:#444; } .ttp-grid td small.who { color:#7a0c1e; font-weight:600; }
.ttp-grid td.empty { background:#fff; border:1px dashed #ddd; }
.ttp-grid td.ext { background:repeating-linear-gradient(135deg, #eeeeee 0 2mm, #f8f8f8 2mm 4mm); }
.ttp-grid td.brk { background:#f3eeee; color:#7a0c1e; font-size:.8em; padding:0; }
.ttp-grid td.brk span { writing-mode:vertical-rl; text-orientation:sideways; -webkit-text-orientation:sideways; letter-spacing:0; white-space:nowrap; display:inline-block; }   /* ตัวอักษรไทยต่อกันทั้งคำ (ไม่แยกสระ/วรรณยุกต์) */
.ttp-foot { display:grid; grid-template-columns:1fr 52mm 62mm; gap:4mm; align-items:start; margin-top:auto; }
.ttp-foot.room { grid-template-columns:1fr 62mm; }
.ttp-cols { display:grid; grid-template-columns:1fr 1fr; gap:3mm; align-items:start; }
.ttp-sum { width:100%; border-collapse:collapse; font-size:.86em; }
.ttp-sum th, .ttp-sum td { border:1px solid #bbb; padding:.5mm 1.4mm; line-height:1.2; }
.ttp-sum th { background:#7a0c1e; color:#fff; font-weight:600; }
.ttp-sum td.c { text-align:center; } .ttp-sum tr.gen td { background:#f4f4f4; font-style:italic; }
.ttp-sum tfoot td { font-weight:700; background:#fbeaec; }
.ttp-sum td.a-ท, .ttp-sum td.a-ค, .ttp-sum td.a-ว, .ttp-sum td.a-ส, .ttp-sum td.a-พ, .ttp-sum td.a-ศ, .ttp-sum td.a-ง, .ttp-sum td.a-อ, .ttp-sum td.a-ก { background:var(--a-bg); }
.ttp-total { border:2px solid #7a0c1e; border-radius:2.5mm; overflow:hidden; font-size:.95em; }
.ttp-total .h { background:#7a0c1e; color:#fff; font-weight:700; text-align:center; padding:1.2mm; }
.ttp-total .r { display:flex; justify-content:space-between; align-items:baseline; padding:1mm 2.5mm; border-top:1px solid #eee; }
.ttp-total .r b { font-size:1.15em; } .ttp-total .r.all { background:#fbeaec; } .ttp-total .r.all b { font-size:1.5em; color:#7a0c1e; }
.ttp-sign { display:grid; gap:5mm; text-align:center; font-size:.9em; }
.ttp-sign .line { border-bottom:1px dotted #333; height:9mm; margin-bottom:.8mm; }
.ttp, .ttp * { -webkit-print-color-adjust:exact; print-color-adjust:exact; }
.ttp-grid td { height:18mm; }
.ttp-grid th.brk { font-size:.62em; padding:1mm 0; word-break:break-all; }
.ttp-grid th.sumc, .ttp-grid td.sumc { width:13mm; } .ttp-grid td.sumc { background:#fbeaec; color:#7a0c1e; } .ttp-grid td.sumc b { font-size:1.3em; }
.hr-table select.input { min-width:180px; min-height:38px; padding:6px 8px; }
.hr-table tr.hr-level td { background:var(--surface-2); padding:6px 12px; }
.hr-table tr.hr-empty td:first-child b { color:var(--warn); }

/* ===== ปพ.5 (แบบ LSS) ===== */
.a4.p5 { position:relative; gap:2.4mm; }
.p5-code { position:absolute; top:9mm; right:11mm; border:1.5px solid #333; padding:1.5mm 4mm; font-weight:700; font-size:1.25em; }
.p5-cover-head { text-align:center; display:grid; justify-items:center; gap:.6mm; margin-top:2mm; }
.p5-cover-head img { width:24mm; height:24mm; margin-bottom:1.5mm; }
.p5-cover-head .t1 { font-size:1.75em; font-weight:700; }
.p5-cover-head .t2 { font-size:1.1em; } .p5-cover-head .t3 { font-size:.95em; color:#444; }
.p5-info { display:grid; grid-template-columns:repeat(3, 1fr); gap:1.4mm 4mm; border:1.5px solid #333; border-radius:2mm; padding:2.5mm 4mm; margin-top:2mm; }
.p5-info > div { display:flex; gap:2mm; align-items:baseline; flex-wrap:wrap; } .p5-info .w2 { grid-column:span 2; } .p5-info .w3 { grid-column:1 / -1; }
.p5-info span { color:#555; } .p5-info span.en { color:#777; font-size:.85em; }
.p5-h { font-weight:700; font-size:1.08em; border-left:2mm solid #c8102e; padding-left:2mm; margin-top:1.5mm; }
.p5-dist th, .p5-dist td { text-align:center; }
.p5-kpi { display:grid; grid-template-columns:repeat(4, 1fr); gap:2mm; }
.p5-kpi > div { border:1px solid #999; border-radius:1.5mm; padding:1.2mm 2mm; text-align:center; } .p5-kpi span { display:block; font-size:.85em; color:#555; } .p5-kpi b { font-size:1.2em; }
.p5-sigs { display:grid; grid-template-columns:1fr 1fr; gap:3mm 8mm; margin-top:1mm; } .p5-sigs.one { grid-template-columns:1fr; justify-items:center; } .p5-sigs.two { margin-top:auto; }
.p5-sig { text-align:center; } .p5-sig .note { margin-bottom:1mm; font-size:.92em; } .p5-sig .line { margin-top:5mm; text-align:left; padding-left:8mm; border-bottom:1px dotted #333; height:5mm; }
.p5-sig .nm { margin-top:.8mm; } .p5-sig .rl { font-weight:600; }
.p5-date { text-align:center; margin-top:1mm; }
.p5-mini { display:flex; justify-content:space-between; border-bottom:1.5px solid #333; padding-bottom:1.2mm; font-size:.95em; }
.p5-title { text-align:center; font-weight:700; font-size:1.3em; }
.p5-tbl { font-size:.9em; } .p5-tbl td.nm { white-space:nowrap; } .p5-tbl th.m { font-size:.85em; font-weight:600; line-height:1.15; }
.p5-tbl th.sum, .p5-tbl td.sum { background:#f6efef; }
.p5-note { margin:0; font-size:.82em; color:#444; }
.p5-legend { font-size:.82em; display:grid; gap:.8mm; } .p5-legend span { margin-right:3mm; white-space:nowrap; }
.p5, .p5 * { -webkit-print-color-adjust:exact; print-color-adjust:exact; }
.a4.p5 > * { flex-shrink:0; }

/* ===== แบนเนอร์สไลด์ + แถบประกาศ (ตกแต่งเว็บไซต์) ===== */
.hero-slider { position:relative; max-width:1920px; margin:0 auto; aspect-ratio:1920/480; overflow:hidden; }
.hero-slider .slide { position:absolute; inset:0; opacity:0; visibility:hidden; transition:opacity .7s var(--ease), visibility .7s; }
.hero-slider .slide.is-active { opacity:1; visibility:visible; }
.hero-slider .slide .hero-banner { height:100%; aspect-ratio:auto; }
.hero-slider picture, .hero-slider img { display:block; width:100%; height:100%; object-fit:cover; }
.slide-text { position:absolute; inset:0; display:flex; align-items:center; color:#fff; }
.slide-text .container { display:flex; flex-direction:column; gap:10px; align-items:flex-start; max-width:var(--container); }
.slide-text.align-center .container { align-items:center; text-align:center; } .slide-text.align-right .container { align-items:flex-end; text-align:right; }
.slide-text.has-overlay { background:linear-gradient(90deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.25) 45%, rgba(0,0,0,0) 75%); }
.slide-text.has-overlay.align-center { background:rgba(0,0,0,.35); } .slide-text.has-overlay.align-right { background:linear-gradient(270deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 75%); }
.slide-title { font-family:var(--font-display); font-size:clamp(1.3rem, 3.2vw, 2.6rem); line-height:1.2; margin:0; text-shadow:0 2px 12px rgba(0,0,0,.35); max-width:780px; color:#fff; }
.slide-sub { margin:0; font-size:clamp(.9rem, 1.3vw, 1.15rem); max-width:640px; text-shadow:0 1px 8px rgba(0,0,0,.4); }
.slide-text:not(.has-overlay) { color:var(--text); } .slide-text:not(.has-overlay) .slide-title { color:var(--text); text-shadow:none; } .slide-text:not(.has-overlay) .slide-sub { text-shadow:none; }
.slider-nav { position:absolute; top:50%; transform:translateY(-50%); width:40px; height:40px; border-radius:50%; border:0; background:rgba(255,255,255,.75); color:#333; display:grid; place-items:center; cursor:pointer; z-index:2; box-shadow:var(--shadow-sm); }
.slider-nav.prev { left:12px; } .slider-nav.next { right:12px; } .slider-nav:hover { background:#fff; }
.slider-dots { position:absolute; bottom:10px; left:0; right:0; display:flex; justify-content:center; gap:8px; z-index:2; }
.slider-dots button { width:10px; height:10px; border-radius:999px; border:0; background:rgba(255,255,255,.65); cursor:pointer; padding:0; transition:width .3s; box-shadow:0 0 0 1px rgba(0,0,0,.15); }
.slider-dots button.is-active { width:26px; background:var(--primary); }
@media (max-width:640px){ .hero-slider { aspect-ratio:16/7; } .slider-nav { display:none; } .slide-sub { display:none; } .slide-text .btn { min-height:36px; padding:6px 14px; font-size:.85rem; } }
@media (prefers-reduced-motion: reduce){ .hero-slider .slide { transition:none; } }
.announce-bar { font-size:.9rem; padding:8px 0; } .announce-bar .container { display:flex; gap:8px; align-items:center; justify-content:center; flex-wrap:wrap; text-align:center; }
.announce-bar a { color:inherit; font-weight:700; text-decoration:underline; display:inline-flex; align-items:center; gap:2px; }
.announce-bar.is-primary { background:var(--primary); color:var(--primary-ink); } .announce-bar.is-info { background:var(--info-soft); color:var(--info); }
.announce-bar.is-warn { background:var(--warn-soft); color:#8a5a00; } .announce-bar.is-dark { background:var(--navy-900); color:#fff; }
/* หน้าตกแต่งเว็บไซต์ */
.site-tabs { margin-bottom:16px; flex-wrap:wrap; }
.preset-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:10px; }
.preset { position:relative; border:2px solid var(--line); border-radius:var(--radius); padding:10px; cursor:pointer; background:var(--surface); display:flex; flex-direction:column; gap:8px; }
.preset input { position:absolute; opacity:0; } .preset:has(input:checked) { border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-soft); }
.preset .sw { display:flex; height:28px; border-radius:8px; overflow:hidden; } .preset .sw i { flex:1; }
.theme-preview { border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; background:var(--pv-bg, var(--bg)); }
.theme-preview .pv-head { display:flex; align-items:center; gap:10px; padding:10px 14px; background:var(--surface); border-bottom:1px solid var(--line); }
.theme-preview .pv-hero { padding:22px 16px; background:linear-gradient(180deg, var(--pv-tint, var(--primary-soft)), transparent); }
.theme-preview .pv-title { font-family:var(--pv-font, var(--font-display)); font-size:1.35rem; font-weight:700; margin:0 0 6px; }
.theme-preview .pv-btn { display:inline-block; padding:8px 16px; border-radius:var(--pv-r, 999px); background:var(--pv-p, var(--primary)); color:#fff; font-weight:600; margin-right:6px; }
.theme-preview .pv-btn.o { background:transparent; color:var(--pv-a, var(--accent)); border:2px solid var(--pv-a, var(--accent)); }
.theme-preview .pv-cards { display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; padding:14px 16px 18px; }
.theme-preview .pv-card { background:var(--surface); border:1px solid var(--line); border-radius:var(--pv-rc, 16px); padding:10px; font-size:.82rem; }
.theme-preview .pv-chip { width:30px; height:30px; border-radius:10px; background:var(--pv-soft, var(--primary-soft)); margin-bottom:6px; }
.banner-list .bn { display:grid; grid-template-columns:200px 1fr auto; gap:14px; align-items:center; padding:12px; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); }
.banner-list .bn img { width:200px; aspect-ratio:4/1; object-fit:cover; border-radius:10px; background:var(--surface-2); }
.banner-list .bn.off { opacity:.55; }
@media (max-width:720px){ .banner-list .bn { grid-template-columns:1fr; } .banner-list .bn img { width:100%; } }
.sec-order li { display:flex; align-items:center; gap:10px; padding:10px 12px; border:1px solid var(--line); border-radius:12px; margin-bottom:8px; background:var(--surface); }

/* ===== ย่อเมนูด้านข้าง (เฉพาะจอกว้าง) — จำค่าไว้ในเครื่อง ===== */
.sb-toggle { display:none; }
@media (min-width:1024px){
  .sb-toggle { display:inline-grid; }
  .app-shell { transition:grid-template-columns .2s var(--ease); }
  html.sb-mini .app-shell { grid-template-columns:76px 1fr; }
  html.sb-mini .sidebar { padding:14px 10px; overflow-x:hidden; }
  html.sb-mini .sidebar .brand span, html.sb-mini .side-group, html.sb-mini .side-link .sl, html.sb-mini .term-box { display:none; }
  html.sb-mini .sidebar .brand { justify-content:center; padding:4px 0 12px; }
  html.sb-mini .side-link { justify-content:center; padding:9px 0; position:relative; }
  html.sb-mini .side-link .badge { position:absolute; top:2px; right:4px; margin:0; padding:1px 5px; font-size:.65rem; min-width:0; }
  html.sb-mini .side-group + .side-link, html.sb-mini .side-link + .side-group { margin-top:6px; }
  html.sb-mini .side-foot { padding-top:10px; border-top:1px solid var(--line); }
}
/* ประเมินผ่าน/ไม่ผ่าน */
.pf-seg { display:inline-flex; } .pf-seg label { padding:6px 12px; border-radius:999px; cursor:pointer; font-weight:600; font-size:.85rem; color:var(--text-2); }
.pf-seg input { position:absolute; opacity:0; pointer-events:none; }
.pf-seg label.is-active.pf-p { background:var(--ok-soft); color:var(--ok); } .pf-seg label.is-active.pf-f { background:var(--bad-soft); color:var(--bad); }
.pf-seg label.is-active.pf-n { background:var(--surface); box-shadow:var(--shadow-sm); }
.pf-seg label:focus-within { outline:2px solid var(--primary); outline-offset:1px; }
.tt-teacher { width:auto; max-width:230px; min-height:36px; padding:5px 8px; font-size:.82rem; }
.a4.pp6 .pp6-sign { grid-template-columns:repeat(3,1fr); gap:6mm; }
.a4.pp6 { position:relative; }
/* ปพ.6 เต็มแผ่น A4: ตารางผลการเรียนและช่องความคิดเห็นยืดเต็มพื้นที่ที่เหลือ */
.a4.pp6 > * { flex-shrink:0; }
.a4.pp6 > .pp6-grow { flex:3 0 auto; display:block; }
.a4.pp6 .pp6-grow > .pp6-table { height:100%; }
.a4.pp6 > .pp6-comments { flex:1 0 auto; }
.pp6-draft { position:absolute; inset:0; display:grid; place-items:center; pointer-events:none; font-size:64pt; font-weight:800; color:rgba(200,16,46,.08); letter-spacing:4px; overflow:hidden; }
.pp6-draft span { transform:rotate(-28deg); white-space:nowrap; }
.a4.pp6 .pp6-info > div, .a4.pp6 .pp6-grades th { white-space:nowrap; }
.att-tbl .att-home { font-size:.72em; font-weight:400; color:#555; line-height:1.1; white-space:normal; }
/* ชื่อผู้ลงนาม: 1 บรรทัดเสมอ (ย่ออัตโนมัติถ้ายาว — app.js fitNames) */
.sig-nm { display:block; white-space:nowrap; overflow:hidden; }
/* โลโก้โรงเรียน + โลโก้โปรแกรมพิเศษ IEP (หัวเว็บ · หัวรายงาน) */
.brand .brand-school { margin-right:-2px; }
.topbar .brand-mini .brand-school { margin-right:-2px; }
.logo-pair { display:inline-flex; gap:10px; justify-content:center; }
.pp6-head { grid-template-columns:32mm 1fr 32mm; gap:3mm; }
.pp6-head .hd-logos img { width:15mm; height:15mm; }
.pp6-head .t1 { white-space:nowrap; font-size:1.32em; }
.pp6-head .hd-logos, .ttp-head .hd-logos { display:flex; gap:2.5mm; align-items:center; }
.pp6-head .code { justify-self:end; width:17mm; text-align:center; }
.ttp-head { grid-template-columns:auto 1fr auto; }
.p5-logos { display:flex; gap:5mm; justify-content:center; }
@media (max-width:420px){ .site-header .brand .brand-school { display:none; } }
.logo-pair .logo { margin:0 0 12px; }
.print-note { max-width:210mm; margin:0 auto 12px; padding:8px 12px; border-radius:10px; background:var(--warn-soft, #fff4d6); font-size:.85rem; }
@media print { .print-note { display:none !important; } }
/* ===== แอปที่ติดตั้งบนมือถือ (standalone): หน้าเข้าสู่ระบบไม่แสดงเมนูเว็บไซต์ ===== */
@media (display-mode: standalone) {
  body.page-auth .site-header nav, body.page-auth .site-header .header-actions .btn-login, body.page-auth .site-header .nav-toggle, body.page-auth .site-footer, body.page-auth .announce-bar, body.page-auth .bottom-nav { display:none !important; }
  body.page-auth .site-header .brand { pointer-events:none; }
  body.page-auth .site-header { position:static; box-shadow:none; background:transparent; }
}
/* ===== ข่าวสารในแอป: ฟีดแนวตั้งแบบมือถือ ===== */
.news-chips { flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.news-chips::-webkit-scrollbar { display:none; }
.news-chips .chip { flex:0 0 auto; }
.news-feed { display:grid; gap:12px; grid-template-columns:repeat(auto-fill, minmax(min(100%, 340px), 1fr)); }
.nf-item { display:flex; gap:12px; padding:10px; text-decoration:none !important; color:var(--text); align-items:stretch; }
.nf-item:active { transform:scale(.99); }
.nf-img { flex:0 0 108px; height:96px; border-radius:12px; overflow:hidden; background:var(--bg-soft); display:grid; place-items:center; color:var(--text-2); }
.nf-img img { width:100%; height:100%; object-fit:cover; display:block; }
.nf-body { display:flex; flex-direction:column; gap:4px; min-width:0; flex:1; }
.nf-meta { display:flex; gap:4px; flex-wrap:wrap; }
.nf-meta .badge { font-size:.68rem; }
.nf-title { font-size:.98rem; line-height:1.3; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.nf-ex { font-size:.82rem; color:var(--text-2); line-height:1.35; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.nf-date { margin-top:auto; font-size:.74rem; color:var(--text-2); display:flex; align-items:center; gap:4px; }
.nf-date .icon { width:13px; height:13px; }
.nf-hero { flex-direction:column; grid-column:1 / -1; padding:0; overflow:hidden; }
.nf-hero .nf-img { flex:none; width:100%; height:auto; aspect-ratio:16/9; border-radius:0; }
.nf-hero .nf-body { padding:4px 14px 14px; }
.nf-hero .nf-title { font-size:1.12rem; }
@media (min-width:900px) { .nf-hero { flex-direction:row; } .nf-hero .nf-img { width:48%; aspect-ratio:auto; min-height:220px; } .nf-hero .nf-body { padding:16px; } }
.app-article .article { max-width:820px; margin:0 auto; }
@media (max-width:640px) { .app-article .article h1 { font-size:1.35rem; } .app-article .article .cover { margin-left:-16px; margin-right:-16px; border-radius:0; } }
/* ===== ปฏิทินโรงเรียน ===== */
.cal-months { display:grid; gap:14px; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); }
.cal-month { border:1px solid var(--line); border-radius:12px; padding:10px; }
.cal-month.is-focus { border-color:var(--primary); box-shadow:0 0 0 2px var(--primary-soft); }
.cal-grid { display:grid; grid-template-columns:repeat(7, 1fr); gap:3px; margin-top:6px; text-align:center; font-size:.78rem; }
.cal-grid span { padding:4px 0; border-radius:6px; position:relative; }
.cal-grid .cal-h { color:var(--text-2); font-weight:600; font-size:.7rem; }
.cl-school { background:var(--bg-soft); }
.cl-closed { background:var(--bad-soft); color:var(--bad); font-weight:700; }
.cl-makeup { background:var(--ok-soft); color:var(--ok); font-weight:700; }
.cl-weekend { color:var(--text-2); opacity:.55; }
.cl-break { color:var(--text-2); opacity:.35; text-decoration:line-through; }
.cal-grid .is-today { outline:2px solid var(--primary); }
.cal-grid .has-dot::after, .cal-legend .cl-dot::before { content:""; position:absolute; bottom:2px; left:50%; width:4px; height:4px; margin-left:-2px; border-radius:50%; background:var(--primary); }
.cal-legend { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:10px; }
.cal-legend span { padding:2px 8px; border-radius:6px; position:relative; }
.cal-legend .cl-dot { padding-left:14px; } .cal-legend .cl-dot::before { left:6px; top:50%; bottom:auto; margin-top:-2px; }
.att-datebar { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.field[hidden] { display:none !important; }
.room-link { display:inline-flex; align-items:center; gap:2px; color:inherit; text-decoration:none !important; }
.room-link .icon { width:14px; height:14px; color:var(--text-2); }
.room-link:hover b, .room-link.is-active b { color:var(--primary); text-decoration:underline; }

/* ===================== คู่มือฉบับเล่ม (help/book) — A4 · ปก · สารบัญ · บท · ภาพหน้าจอ ===================== */
.bk-flip { transform:rotate(180deg); }
.bk-stage { --tone:#1d3f72; --ink:#1d2433; --soft:#6b7280; --line:#e6e1e3; --mark:#e11d48;
  background:#e9e4e6; padding:24px 12px 60px; min-height:100vh; color:var(--ink); font-family:var(--font-body); }
.bk-stage img { display:block; }
.bk-sheet, .bk-cover { width:210mm; max-width:100%; margin:0 auto 24px; background:#fff; box-shadow:0 6px 28px rgba(0,0,0,.12); box-sizing:border-box; }
.bk-sheet { padding:16mm 15mm 18mm; font-size:10.5pt; line-height:1.6; }
/* ปก */
.bk-cover { position:relative; height:297mm; overflow:hidden; padding:16mm 15mm 14mm; display:flex; flex-direction:column; gap:8mm;
  background:radial-gradient(120% 60% at 100% 0%, color-mix(in srgb, var(--tone) 22%, #fff) 0%, transparent 60%),
             radial-gradient(90% 50% at 0% 100%, color-mix(in srgb, var(--primary, #e0613f) 18%, #fff) 0%, transparent 60%), #fffdfb; }
.bk-cover::before { content:""; position:absolute; inset:auto -30mm -40mm auto; width:150mm; height:150mm; border-radius:50%; background:color-mix(in srgb, var(--tone) 10%, transparent); }
.bk-cover::after { content:""; position:absolute; left:0; top:0; bottom:0; width:7mm; background:linear-gradient(var(--tone), color-mix(in srgb, var(--tone) 55%, var(--primary, #e0613f))); }
.bk-cv-top { display:flex; align-items:center; gap:4mm; position:relative; z-index:1; }
.bk-logos { display:flex; gap:3mm; }
.bk-logos img { width:18mm; height:18mm; object-fit:contain; border-radius:50%; background:#fff; box-shadow:0 2px 8px rgba(0,0,0,.1); }
.bk-cv-top b { display:block; font:600 13pt/1.3 var(--font-display); color:var(--tone); }
.bk-cv-top span { font-size:10pt; color:var(--soft); }
.bk-cv-title { position:relative; z-index:1; margin-top:6mm; }
.bk-kicker { display:inline-flex; align-items:center; gap:2mm; padding:1.6mm 4mm; border-radius:99px; background:var(--tone); color:#fff; font-weight:600; font-size:10.5pt; }
.bk-kicker .icon { width:4.5mm; height:4.5mm; }
.bk-cv-title h1 { font:700 32pt/1.2 var(--font-display); color:var(--ink); margin:5mm 0 3mm; letter-spacing:-.01em; }
.bk-cv-title p { font-size:12pt; color:var(--soft); margin:0; max-width:160mm; }
.bk-cv-art { position:relative; z-index:1; flex:1; min-height:0; display:flex; align-items:flex-end; justify-content:center; padding-bottom:4mm; }
.bk-laptop { width:166mm; position:relative; margin-right:14mm; }
.bk-laptop .bk-browser { border-radius:3mm 3mm 0 0; border:2.2mm solid #2a2f3a; border-bottom:0; box-shadow:0 10mm 20mm -8mm rgba(0,0,0,.35); }
.bk-laptop .bk-bar { display:none; }
.bk-base { display:block; height:5mm; margin:0 -12mm; background:linear-gradient(#cfd3da, #9aa0aa); border-radius:0 0 6mm 6mm; }
.bk-cv-art .bk-phone { width:50mm; position:absolute; right:0; bottom:0; }
.bk-cv-art.is-phones { gap:8mm; align-items:center; }
.bk-cv-art.is-phones .bk-phone { position:relative; right:auto; bottom:auto; width:66mm; }
.bk-cv-art.is-phones .bk-phone:nth-child(2) { transform:translateY(10mm) rotate(3deg); }
.bk-cv-art.is-phones .bk-phone:first-child { transform:rotate(-3deg); }
.bk-cv-foot { position:relative; z-index:1; display:flex; justify-content:space-between; align-items:flex-end; border-top:.4mm solid color-mix(in srgb, var(--tone) 30%, transparent); padding-top:4mm; }
.bk-cv-foot b { display:block; font:600 13pt/1.3 var(--font-display); color:var(--tone); }
.bk-cv-foot span { font-size:9.5pt; color:var(--soft); }
.bk-url { display:flex; align-items:center; gap:2mm; font-weight:700; color:var(--tone); font-size:12pt; }
/* กรอบอุปกรณ์ */
.bk-browser { background:#fff; border:1px solid #d9d4d6; border-radius:2.4mm; overflow:hidden; box-shadow:0 2mm 6mm rgba(0,0,0,.08); }
.bk-browser img { width:100%; height:auto; }
.bk-bar { display:flex; align-items:center; gap:1.4mm; padding:1.6mm 2.4mm; background:#f3f0f1; border-bottom:1px solid #e3dee0; }
.bk-bar i { width:2.2mm; height:2.2mm; border-radius:50%; background:#f1695d; }
.bk-bar i:nth-child(2) { background:#f6bd3b; } .bk-bar i:nth-child(3) { background:#5ac35a; }
.bk-bar span { margin-left:2mm; flex:1; background:#fff; border-radius:99px; padding:.4mm 3mm; font-size:7.5pt; color:#6b7280; }
.bk-phone { position:relative; background:#1f2430; border-radius:7mm; padding:2.2mm; box-shadow:0 3mm 10mm rgba(0,0,0,.22); }
.bk-phone img { width:100%; height:auto; border-radius:5mm; }
.bk-notch { position:absolute; top:3.4mm; left:50%; transform:translateX(-50%); width:14mm; height:2.6mm; border-radius:2mm; background:#1f2430; z-index:2; }
.bk-paper { background:#fff; box-shadow:0 1mm 5mm rgba(0,0,0,.18); border:1px solid #e5e5e5; }
.bk-paper img { width:100%; height:auto; }
/* สารบัญ */
.bk-h { font:700 17pt/1.3 var(--font-display); color:var(--tone); margin:0 0 4mm; display:flex; align-items:center; gap:3mm; }
.bk-h::after { content:""; flex:1; height:.4mm; background:linear-gradient(90deg, color-mix(in srgb, var(--tone) 35%, transparent), transparent); }
.bk-h.mt { margin-top:9mm; }
.bk-how { display:grid; grid-template-columns:1fr 1fr; gap:3mm 6mm; margin-top:4mm; }
.bk-how-item { display:flex; gap:3mm; align-items:flex-start; padding:3mm; border-radius:3mm; background:#faf7f8; }
.bk-how-item b { display:block; font-size:10.5pt; }
.bk-how-item p { margin:.5mm 0 0; font-size:9.5pt; color:var(--soft); line-height:1.5; }
.bk-dot, .bk-marks li::before { flex:none; width:6.4mm; height:6.4mm; border-radius:50%; background:var(--mark); color:#fff; font:700 9.5pt/6.4mm system-ui; text-align:center; box-shadow:0 .6mm 1.4mm rgba(225,29,72,.35); }
.bk-ico { flex:none; width:6.4mm; height:6.4mm; border-radius:2mm; display:grid; place-items:center; background:color-mix(in srgb, var(--tone) 12%, #fff); color:var(--tone); }
.bk-ico .icon { width:4mm; height:4mm; }
.bk-toc { list-style:none; padding:0; margin:0; columns:2; column-gap:8mm; }
.bk-toc > li { break-inside:avoid; margin-bottom:4mm; }
.bk-toc-ch { display:flex; align-items:center; gap:2.5mm; padding-bottom:1.2mm; border-bottom:.3mm solid var(--line); margin-bottom:1.2mm; }
.bk-toc-ch b { font-size:11pt; }
.bk-toc-no { width:7mm; height:7mm; border-radius:2mm; background:var(--tone); color:#fff; display:grid; place-items:center; font-weight:700; font-size:10pt; flex:none; }
.bk-toc ol { list-style:none; padding:0; margin:0; }
.bk-toc ol li { font-size:9.5pt; color:#374151; padding:.5mm 0 .5mm 9.5mm; text-indent:-9.5mm; line-height:1.45; }
.bk-toc ol li span { display:inline-block; width:9.5mm; text-indent:0; color:var(--tone); font-weight:600; }
/* บท */
.bk-ch-head { display:flex; align-items:center; gap:5mm; margin:-16mm -15mm 8mm; padding:12mm 15mm 9mm; color:#fff;
  background:linear-gradient(120deg, var(--tone), color-mix(in srgb, var(--tone) 70%, var(--primary, #e0613f))); position:relative; overflow:hidden; }
.bk-ch-head::after { content:""; position:absolute; right:-18mm; top:-22mm; width:70mm; height:70mm; border-radius:50%; background:rgba(255,255,255,.08); }
.bk-ch-no { flex:none; width:20mm; height:20mm; border-radius:5mm; background:rgba(255,255,255,.16); display:grid; place-content:center; text-align:center; font:700 22pt/1 var(--font-display); }
.bk-ch-no small { display:block; font:500 8pt/1.2 var(--font-body); opacity:.85; margin-bottom:1mm; }
.bk-ch-head h2 { color:#fff; font:700 19pt/1.25 var(--font-display); margin:0 0 1.5mm; }
.bk-ch-head p { margin:0; opacity:.92; font-size:10pt; line-height:1.5; }
.bk-ch-ico { margin-left:auto; flex:none; opacity:.28; position:relative; z-index:1; } .bk-ch-ico .icon { width:18mm; height:18mm; }
.bk-sec { margin-bottom:8mm; }
.bk-sec h3 { display:flex; align-items:baseline; gap:3mm; font:700 13pt/1.35 var(--font-display); color:var(--ink); margin:0 0 3mm; padding-bottom:1.6mm; border-bottom:.35mm solid color-mix(in srgb, var(--tone) 25%, transparent); break-after:avoid; }
.bk-sec h3 span { color:var(--tone); font-size:11.5pt; min-width:9mm; }
.bk-steps { counter-reset:st; list-style:none; padding:0; margin:0 0 4mm; }
.bk-steps li { counter-increment:st; position:relative; padding:0 0 0 9mm; margin-bottom:2.2mm; }
.bk-steps li::before { content:counter(st); position:absolute; left:0; top:.4mm; width:6mm; height:6mm; border-radius:50%; border:.4mm solid var(--tone); color:var(--tone); font:700 8.5pt/5.4mm system-ui; text-align:center; box-sizing:border-box; }
.bk-steps strong { color:var(--tone); }
.bk-steps code { font-size:.9em; background:#f3f0f1; padding:0 1mm; border-radius:1mm; }
.bk-fig { margin:3mm 0 6mm; break-inside:avoid; }
.bk-fig figcaption { margin-top:2.4mm; font-size:9pt; color:var(--soft); text-align:center; }
.bk-fig figcaption b { color:var(--ink); margin-right:1mm; }
.bk-fig.is-paper .bk-paper { width:62%; margin:0 auto; }
.bk-fig.is-paper img { max-height:185mm; object-fit:contain; }
.bk-marks { list-style:none; counter-reset:mk; padding:2.6mm 3mm; margin:2.4mm 0 0; background:#fdf6f7; border:.3mm solid #f6d4da; border-radius:2.4mm; display:grid; grid-template-columns:1fr 1fr; gap:1.6mm 5mm; font-size:9pt; line-height:1.45; }
.bk-marks li { counter-increment:mk; display:flex; gap:2mm; align-items:flex-start; }
.bk-marks li::before { content:counter(mk); width:5mm; height:5mm; font-size:8pt; line-height:5mm; }
.bk-phones { display:flex; gap:7mm; justify-content:center; align-items:flex-start; margin:3mm 0 6mm; break-inside:avoid; }
.bk-phones .bk-fig { margin:0; width:46mm; }
.bk-phones.n1 .bk-fig { width:auto; display:grid; grid-template-columns:48mm 1fr; gap:3mm 7mm; align-items:start; }
.bk-phones.n1 .bk-fig .bk-phone { grid-row:span 2; }
.bk-phones.n1 .bk-fig figcaption { text-align:left; margin-top:0; }
.bk-phones.n1 .bk-marks { grid-template-columns:1fr; margin:0; align-self:start; }
.bk-phones .bk-fig:not(:only-child) .bk-marks { grid-template-columns:1fr; }
.bk-phones .bk-fig:not(:only-child) .bk-phone img { max-height:none; }
.bk-tips { background:color-mix(in srgb, var(--tone) 7%, #fff); border-left:1.2mm solid var(--tone); border-radius:0 2.4mm 2.4mm 0; padding:2.6mm 4mm; margin-top:2mm; break-inside:avoid; }
.bk-tips p { display:flex; gap:2mm; margin:0 0 1mm; font-size:9.5pt; line-height:1.5; } .bk-tips p:last-child { margin:0; }
.bk-tips .icon { flex:none; width:4mm; height:4mm; margin-top:.8mm; color:var(--tone); }
/* ปกหลัง */
.bk-back { min-height:297mm; display:grid; place-items:center; text-align:center; background:linear-gradient(160deg, #fff, color-mix(in srgb, var(--tone) 8%, #fff)); }
.bk-back-in { max-width:120mm; display:grid; justify-items:center; gap:4mm; }
.bk-back h2 { font:700 18pt/1.3 var(--font-display); color:var(--tone); margin:2mm 0 0; }
.bk-back p { margin:0; color:var(--soft); }
.bk-qr { display:flex; align-items:center; gap:5mm; text-align:left; padding:4mm 6mm; border-radius:4mm; background:#fff; box-shadow:0 2mm 8mm rgba(0,0,0,.08); font-weight:700; color:var(--tone); }
.bk-qr small { font-weight:400; color:var(--soft); }
@media screen and (max-width: 820px) {
  .bk-sheet { padding:16px; font-size:15px; } .bk-ch-head { margin:-16px -16px 18px; padding:20px 16px; }
  .bk-cover { height:auto; min-height:120vw; } .bk-how, .bk-marks { grid-template-columns:1fr; } .bk-toc { columns:1; }
  .bk-phones { flex-wrap:wrap; } .bk-phones.n1 .bk-fig { grid-template-columns:1fr; } .bk-fig.is-paper .bk-paper { width:100%; }
  .bk-cv-art .bk-phone { width:28%; } .bk-laptop { width:88%; }
}
@page bk { size:A4 portrait; margin:14mm 0 16mm; @bottom-center { content:counter(page); font:9pt system-ui; color:#9ca3af; } }
@page bkcover { size:A4 portrait; margin:0; }
@media print {
  .bk-stage { padding:0; background:#fff; min-height:0; }
  .bk-cover { page:bkcover; margin:0; box-shadow:none; height:297mm; break-after:page; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  .bk-sheet { page:bk; width:auto; margin:0; box-shadow:none; padding:0 15mm; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  .bk-ch, .bk-front { break-before:page; }
  .bk-ch-head { margin:0 -15mm 7mm; padding:9mm 15mm; }
  .bk-back { page:bkcover; break-before:page; min-height:0; height:297mm; padding:0; }
}
/* ภาพหน้าจอในหน้าคู่มือออนไลน์ */
.help-figs { --tone:#1d3f72; --mark:#e11d48; --soft:var(--muted, #6b7280); --ink:var(--text); margin:14px 0 4px; }
.help-figs .bk-fig { margin:10px 0 18px; }
.help-figs .bk-fig.is-desk { max-width:860px; }
.help-figs .bk-fig.is-paper .bk-paper { width:min(100%, 420px); }
.help-figs .bk-phones { justify-content:flex-start; }
.help-figs .bk-phones .bk-fig { width:min(46%, 230px); }
.help-figs .bk-phones.n1 .bk-fig { width:auto; grid-template-columns:min(46vw, 230px) 1fr; }
.help-figs .bk-marks { background:var(--surface-2, #fdf6f7); border-color:var(--line); }
.help-figs figcaption { text-align:left; }
@media (max-width: 640px) { .help-figs .bk-marks { grid-template-columns:1fr; } .help-figs .bk-phones.n1 .bk-fig { grid-template-columns:1fr; } .help-figs .bk-phones.n1 .bk-phone { max-width:240px; } }
.help-books { display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap:14px; margin-bottom:22px; }
.help-book { display:flex; gap:14px; align-items:center; padding:16px; border-radius:var(--radius, 16px); color:#fff !important; text-decoration:none !important;
  background:linear-gradient(130deg, var(--tone), color-mix(in srgb, var(--tone) 65%, var(--primary))); box-shadow:0 6px 18px color-mix(in srgb, var(--tone) 25%, transparent); transition:transform .15s; }
.help-book:hover { transform:translateY(-2px); }
.help-book .bkc { flex:none; width:52px; height:68px; border-radius:4px 8px 8px 4px; background:rgba(255,255,255,.18); display:grid; place-items:center; box-shadow:inset 4px 0 0 rgba(255,255,255,.35); }
.help-book .bkc .icon { width:24px; height:24px; }
.help-book b { display:block; font-family:var(--font-display); font-size:1.02rem; line-height:1.35; }
.help-book small { display:block; opacity:.88; font-size:.8rem; line-height:1.45; margin-top:2px; }
.help-book .go { margin-left:auto; flex:none; display:flex; align-items:center; gap:4px; font-size:.8rem; font-weight:600; background:rgba(255,255,255,.2); padding:6px 10px; border-radius:99px; }
.h-sec { display:flex; align-items:center; gap:8px; font-size:1.1rem; margin:6px 0 6px; } .h-sec .icon { color:var(--primary); }
/* ตั้งค่าการแสดงโลโก้ที่หน้าเว็บ (ตั้งค่าระบบ) — เอกสารพิมพ์ไม่เกี่ยว */
.no-logo-school .brand-school, .no-logo-iep .brand-iep { display:none !important; }
.logo-toggle { display:flex; align-items:center; gap:10px; margin-top:10px; padding:10px 12px; border-radius:12px; background:var(--surface-2); }
.logo-toggle input { width:20px; height:20px; accent-color:var(--primary); }
/* รายวิชาที่สอน — จัดกลุ่มตามห้อง (แถวกะทัดรัด) */
.crs-room { padding:0; overflow:hidden; }
.crs-head { display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:16px 18px; border-bottom:1px solid var(--line); background:var(--surface-2); }
.crs-head h2 { margin:0; font-size:1.15rem; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.crs-sum { display:flex; gap:6px; flex-wrap:wrap; align-items:center; margin-top:4px; }
.crs-type { padding:10px 18px 4px; font-weight:700; color:var(--text-2); letter-spacing:.02em; }
.crs-row { display:grid; grid-template-columns:minmax(0,1fr) 150px 150px auto; gap:12px; align-items:center; padding:10px 18px; border-top:1px solid var(--line); border-left:4px solid transparent; }
.crs-row:hover { background:var(--surface-2); }
.crs-row.st-approved { border-left-color:var(--ok, #2f9e5b); } .crs-row.st-submitted { border-left-color:var(--warn, #e0a100); } .crs-row.st-returned { border-left-color:var(--bad, #d64545); }
.crs-main { display:flex; flex-direction:column; min-width:0; color:inherit; text-decoration:none !important; }
.crs-main b { font-size:.98rem; line-height:1.35; }
.crs-prog { display:flex; align-items:center; gap:8px; } .crs-prog .progress { flex:1; }
.crs-st { display:flex; gap:4px; justify-content:flex-end; flex-wrap:wrap; }
.crs-act { display:flex; gap:4px; justify-content:flex-end; }
@media (max-width: 900px) {
  .crs-row { grid-template-columns:minmax(0,1fr) auto; gap:6px 10px; }
  .crs-prog { grid-column:1; } .crs-st { grid-column:2; grid-row:1; } .crs-act { grid-column:2; grid-row:2; }
  .crs-tools { width:100%; }
}
@media (max-width: 640px) {
  .crs-row { grid-template-columns:minmax(0,1fr) auto; padding:12px 14px; }
  .crs-main { grid-column:1 / -1; grid-row:1; }
  .crs-prog { grid-column:1; grid-row:2; } .crs-st { grid-column:2; grid-row:2; }
  .crs-act { grid-column:1 / -1; grid-row:3; justify-content:flex-start; }
  .crs-head { padding:14px; } .crs-type { padding:10px 14px 4px; }
}
/* ช่องค้าง “ร” (ขาดสอบ/ขาดส่งงาน) — ช่องดำ */
.score-grid input.pending { background:#000 !important; color:#fff !important; border:2px solid #000 !important; font-weight:800; font-size:1.05rem; }
:root[data-theme="dark"] .score-grid input.pending { border-color:#9aa3b2 !important; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .score-grid input.pending { border-color:#9aa3b2 !important; } }
.score-grid input.pending:focus { box-shadow:0 0 0 3px rgba(31,36,48,.35); }
.pend-chip { display:inline-block; min-width:20px; padding:0 6px; border-radius:5px; background:#1f2430; color:#fff; font-weight:700; text-align:center; }
.grade-pill[data-g="ร"] { background:#1f2430; color:#fff; }
/* รูปนักเรียน: กดดูรูปใหญ่ */
.stu-photo.is-zoomable { cursor:zoom-in; }
.stu-photo.is-zoomable:hover { box-shadow:0 0 0 2px var(--primary); }
.photo-zoom { border:0; padding:0; background:transparent; max-width:min(92vw, 520px); width:100%; overflow:visible; }
.photo-zoom::backdrop { background:rgba(10,12,18,.78); backdrop-filter:blur(2px); }
.photo-zoom figure { margin:0; background:var(--surface); border-radius:18px; overflow:hidden; box-shadow:0 20px 60px rgba(0,0,0,.45); }
.photo-zoom img { display:block; width:100%; height:auto; max-height:76vh; object-fit:contain; background:#000; cursor:zoom-out; }
.photo-zoom figcaption { padding:12px 16px; font-weight:700; text-align:center; color:var(--text); }
.photo-zoom .pz-close { position:absolute; top:-14px; right:-14px; background:var(--surface); box-shadow:0 4px 14px rgba(0,0,0,.3); width:40px; height:40px; min-height:40px; border-radius:50%; }
.score-grid td.sticky .stu-cell { display:flex; align-items:center; gap:8px; }
.pp6-contact { white-space:nowrap; font-size:inherit; font-weight:700; }
/* ===== จอแคบ: เมนูด้านซ้ายแบบลิ้นชัก (ปุ่ม ☰ มุมซ้ายบน) ===== */
.sb-scrim { display:none; }
@media (max-width:1023.98px) {
  .sb-toggle { display:inline-grid; }
  .sidebar { display:flex; position:fixed; left:0; top:0; bottom:0; height:auto; width:min(300px, 84vw); z-index:95; transform:translateX(-105%); transition:transform .28s var(--ease); box-shadow:none; padding-top:calc(18px + env(safe-area-inset-top)); padding-bottom:calc(18px + env(safe-area-inset-bottom)); }
  html.sb-open .sidebar { transform:none; box-shadow:0 0 40px rgba(0,0,0,.25); }
  html.sb-open .sb-scrim { display:block; position:fixed; inset:0; z-index:94; background:rgba(20,12,16,.45); }
  html.sb-open body { overflow:hidden; }
  html.sb-mini .sidebar .brand span, html.sb-mini .side-group, html.sb-mini .side-link .sl, html.sb-mini .term-box { display:revert; }
  .topbar .sb-toggle { margin-right:-4px; }
}