/* ===================================================================== Smart School 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-danger { background:var(--bad); color:#fff; box-shadow:0 6px 16px -6px color-mix(in srgb, var(--bad) 70%, transparent); } .btn-danger:hover { background:color-mix(in srgb, var(--bad) 85%, #000); } /* กล่องยืนยัน / กล่องข้อความ (dialog) */ .cfm { border:0; padding:0; background:transparent; max-width:min(420px, calc(100vw - 32px)); width:100%; overflow:visible; } .cfm::backdrop { background:rgba(30,18,24,.45); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); } .cfm[open] { animation:cfm-in .18s ease-out; } @keyframes cfm-in { from { opacity:0; transform:translateY(10px) scale(.97); } to { opacity:1; transform:none; } } .cfm-box { background:var(--surface); color:var(--text); border-radius:22px; box-shadow:var(--shadow-lg); padding:26px 22px 18px; text-align:center; display:grid; gap:14px; border:1px solid var(--line); } .cfm-icon { width:58px; height:58px; margin:0 auto; border-radius:50%; display:grid; place-items:center; font-size:1.6rem; background:var(--primary-soft); } .cfm.is-bad .cfm-icon { background:var(--bad-soft); } .cfm.is-ok .cfm-icon { background:var(--ok-soft); } .cfm-title { font-size:1.08rem; font-weight:700; margin:0; } .cfm-msg { font-size:1rem; line-height:1.55; color:var(--text); white-space:pre-line; overflow-wrap:anywhere; } .cfm-actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:4px; } .cfm-actions .btn { justify-content:center; min-height:46px; font-size:1rem; } .cfm-actions.one { grid-template-columns:1fr; } .cfm-cred { display:grid; gap:8px; text-align:left; background:var(--surface-2); border:1px solid var(--line); border-radius:14px; padding:12px 14px; } .cfm-cred div { display:flex; justify-content:space-between; align-items:center; gap:10px; } .cfm-cred code { font-size:1.2rem; font-weight:700; letter-spacing:.04em; user-select:all; } .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; object-fit:contain; } .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; object-fit:contain; } .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; object-fit:contain; } @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) and (hover:hover) and (pointer:fine){ .tabbar { display:none; } } @media (min-width:1024px){ .tabbar { left:var(--sidebar-w); } } .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); } .progress.warn > i { background:var(--warn); } .progress.bad > i { background:var(--bad); } /* ติดตามการบันทึกการสอน */ .lp-bar { display:flex; align-items:center; gap:8px; min-width:140px; } .lp-bar .progress { flex:1; } .lp-bar b { min-width:44px; text-align:right; font-variant-numeric:tabular-nums; } .lp-room { display:flex; align-items:center; gap:12px; flex-wrap:wrap; } .lp-room .lp-bar { flex:1; min-width:160px; max-width:320px; } .lp-miss td { white-space:nowrap; } .lp-stale { color:var(--bad); font-weight:700; } .lp-c-ok { color:var(--ok); } .lp-c-warn { color:var(--warn); } .lp-c-bad { color:var(--bad); } .lp-tabs { display:flex; gap:6px; margin-bottom:8px; align-items:center; flex-wrap:wrap; } .lp-sum { font-variant-numeric:tabular-nums; white-space:nowrap; } .lp-list { display:grid; gap:8px; } .lp-group { padding:0; overflow:hidden; } .lp-group > .table-wrap { border-top:1px solid var(--line); } .lp-head { display:grid; grid-template-columns:minmax(max-content,1.4fr) minmax(120px,1fr) 90px minmax(160px,1.2fr); gap:12px; align-items:center; padding:12px 16px; cursor:pointer; list-style:none; } .lp-head::-webkit-details-marker { display:none; } .lp-head:hover { background:var(--surface-2); } .lp-name { display:flex; align-items:center; gap:8px; min-width:0; white-space:nowrap; } .lp-name b { white-space:nowrap; } /* ชื่อบรรทัดเดียว ไม่ตัด */ .lp-no { min-width:1.6em; text-align:right; font-variant-numeric:tabular-nums; } .lp-caret { width:16px; height:16px; flex:none; color:var(--text-3); transition:transform .15s; } .lp-group[open] .lp-caret { transform:rotate(90deg); } .lp-meta { font-size:.82rem; color:var(--text-3); white-space:nowrap; font-variant-numeric:tabular-nums; } .lp-miss-n { font-size:.82rem; font-weight:600; white-space:nowrap; text-align:right; } .lp-head .lp-bar { min-width:0; } .lp-tn { white-space:nowrap; } .lp-table td.lp-sum { white-space:nowrap; } .lp-table th, .lp-table td { padding:7px 12px; } .lp-bar-col { width:200px; } @media screen and (max-width:720px) { .lp-head { grid-template-columns:1fr auto; gap:4px 10px; } .lp-head .lp-bar { grid-column:1 / -1; } .lp-meta { grid-column:1; } } @media print { .lp-group, .lp-kpis .card { box-shadow:none !important; border:1px solid #bbb !important; } .lp-kpis .card, .lp-group:not([open]) { break-inside:avoid; } .lp-head { break-after:avoid; } .lp-table tr { break-inside:avoid; } .lp-table thead { display:table-header-group; } .lp-list { gap:3mm; } .lp-head { padding:2mm 3mm; grid-template-columns:max-content 38mm 20mm 1fr; gap:4mm; font-size:10.5pt; } .lp-caret { display:none; } .lp-table { font-size:9.5pt; } .lp-table th, .lp-table td { padding:1.2mm 2mm; } .lp-bar-col { width:45mm; } .lp-bar .progress, .lp-bar .progress > i, .lp-c-ok, .lp-c-warn, .lp-c-bad { -webkit-print-color-adjust:exact; print-color-adjust:exact; } .lp-kpis { grid-template-columns:repeat(4,1fr) !important; gap:3mm !important; } .lp-kpis .card { padding:2mm 3mm; } .lp-kpis .chip-icon { display:none; } } .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); } .seg.seg-sm { padding:2px; } .seg.seg-sm a { padding:4px 9px; font-size:.78rem; display:inline-flex; align-items:center; gap:4px; } .seg.seg-sm a:hover { background:var(--surface); color:var(--primary); } /* 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; } /* หนังสือราชการตามระเบียบงานสารบรรณ — บนจอ/พิมพ์ใช้ Sarabun ขนาดที่เทียบเท่า TH SarabunPSK 16 pt (ไฟล์ Word ใช้ TH SarabunPSK 16 จริง) */ .a4.ld.ld-letter { --fs:12.5pt; font-size:12.5pt; line-height:1.55; padding:15mm 20mm 15mm 30mm; } .ld-memo { display:flex; align-items:flex-end; margin-bottom:3mm; } .ld-memo img.ld-krut15 { height:15mm; width:auto; } .ld-memo-t { flex:1; text-align:center; font-weight:700; font-size:2.1em; margin-right:15mm; line-height:1; } .ld-lab { font-weight:700; font-size:1.35em; } .ld-krut3c { text-align:center; } img.ld-krut3 { height:30mm; width:auto; display:block; margin:0 auto 2mm; } .ld-2.ld-lh, .ld-lh { display:grid; grid-template-columns:57% 43%; gap:0; margin-top:0; } .ld-lh p:first-child { white-space:nowrap; } .ld-lh p, .ld-2 p { margin:0; } .ld-half { margin-left:50% !important; } .ld-att { display:grid; grid-template-columns:auto 1fr; gap:0 3mm; } .ld-att p { margin:0; } .ld-close { width:50%; margin:6mm 0 0 45%; text-align:center; line-height:1.5; } .ld-foot { margin-top:12mm !important; font-size:.95em; } .ld .fill:not(:empty) { border-bottom:0; padding:0; } @media print { .ld-ex { display:none !important; } } /* เอกสารโครงการอาหารกลางวัน (แบบตามคู่มือ สพฐ. 2569) */ .a4.ld { --fs:12.5pt; font-size:12.5pt; line-height:1.5; display:block; padding:12mm 15mm 10mm 25mm; } .a4.ld.ld-md { --fs:12.5pt; font-size:12.5pt; line-height:1.42; padding:10mm 14mm 8mm 20mm; } .ld-md .ld-sig { margin:2mm 0 0 auto; } .ld-md .ld-cols { margin-top:2mm; } .a4.ld.ld-ct { --fs:12pt; font-size:12pt; line-height:1.38; padding:9mm 14mm 8mm 20mm; } .ld-ct .ld-sig { margin:1.5mm 0 0 auto; } .ld-ct .ld-box { margin-top:2mm; padding:1.5mm 3mm; } .ld-ct .ld-box .ld-sig { margin-top:1mm; } .a4.ld.ld-ct.ld-xs { --fs:11pt; font-size:11pt; line-height:1.34; } .a4.ld.ld-sm { --fs:10.5pt; font-size:10.5pt; line-height:1.35; padding:8mm 9mm; } .a4.ld.ld-xs { --fs:9.5pt; font-size:9.5pt; line-height:1.3; padding:7mm 9mm; } .a4.ld.ld-sheet { --fs:10pt; font-size:10pt; line-height:1.32; padding:7mm 8mm; } .ld-cols.sm .ld-sig, .ld-insp > div { white-space:nowrap; font-size:.94em; } .ld-insp { display:grid; grid-template-columns:1fr auto; gap:0 2mm; align-items:center; margin:1mm 0; } .ld-insp > div { grid-column:1; } .ld-insp > span { grid-column:2; grid-row:1 / span 3; font-size:.85em; text-align:center; } .ld p { margin:1.2mm 0; } .ld .c { text-align:center; } .ld .r { text-align:right; white-space:nowrap; } .ld .tiny { font-size:.8em; } .ld-p { text-indent:25mm; text-align:left; } .ld-ex { text-align:right; font-size:.72em; color:#777; } .ld-title { text-align:center; font-weight:700; font-size:1.3em; margin:1mm 0 3mm; line-height:1.35; } .ld-topright { text-align:right; margin-bottom:2mm; } .ld-memo { display:flex; align-items:flex-end; gap:0; margin-bottom:2mm; } .ld-memo img { height:15mm; width:auto; } .ld-memo b { flex:1; text-align:center; font-size:1.75em; margin-right:15mm; } .ld-row { margin:.6mm 0; } .ld-2 { display:flex; gap:8mm; } .ld-2 > span:first-child { flex:1; } .ld-hr { border:0; border-top:1px solid #333; margin:1.5mm 0 2mm; } .fill { display:inline-block; border-bottom:1px dotted #333; padding:0 1.5mm; min-height:1.2em; line-height:1.25; text-indent:0; } .ld-sig { display:flex; align-items:flex-start; text-align:center; margin:3mm 0 1mm auto; width:fit-content; line-height:1.55; white-space:nowrap; } .ld-sig.sm { margin:1.5mm auto; } /* ชื่อ/ตำแหน่ง กึ่งกลางใต้เส้นประ: เส้นประยืดตามบรรทัดชื่อ · บรรทัดตำแหน่ง/วันที่ จัดกลางโดยไม่ขยายเส้น */ .ld-sig .sg-mid { display:inline-flex; flex-direction:column; align-items:center; } .ld-sig .sg-mid > .fill { align-self:stretch; margin-bottom:.35em; } .ld-sig .sg-o { width:0; display:flex; justify-content:center; } .ld-cols .ld-sig { margin-left:auto; margin-right:auto; } .ld-sig .sg-pre, .ld-sig .sg-post { flex:none; } .ld-cols { display:grid; grid-template-columns:1fr 1fr; gap:6mm; margin-top:3mm; } .ld-cols > div { border-top:1px solid #999; padding-top:2mm; } .ld-cols.sm > div { border:0; padding:0; } .ld-cols3 { display:grid; grid-template-columns:repeat(3,1fr); gap:3mm; margin-top:4mm; } .ld-box { border:1px solid #999; padding:2mm 3mm; margin-top:3mm; } .ld-note { font-size:.75em; color:#444; margin-top:4mm; border-top:1px solid #ccc; padding-top:1.5mm; } .ld-t { width:100%; border-collapse:collapse; margin:2mm 0; } .ld-t th, .ld-t td { border:1px solid #555; padding:.8mm 1.6mm; vertical-align:top; } .ld-t th { background:#f3f3f3; font-weight:600; text-align:center; vertical-align:middle; } .ld-t.sm { font-size:.92em; } .ld-t.sm th, .ld-t.sm td { padding:.4mm 1.2mm; } .ld-quad { display:grid; grid-template-columns:1fr 1fr; grid-template-rows:auto auto; border:1px solid #333; } .ld-q { padding:2mm 2.5mm; border-right:1px solid #333; border-bottom:1px solid #333; } .ld-q:nth-child(2n) { border-right:0; } .ld-q:nth-child(n+3) { border-bottom:0; } .ld-q p { margin:1mm 0; text-indent:0; } .ld-q .ld-sig { min-width:0; margin:1.5mm auto; } @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 th.tt-sum, .tt td.tt-sum { width:56px; text-align:center; vertical-align:middle; background:var(--surface-2); } .tt td.tt-sum b { font-size:1.15rem; color:var(--coral-600); } .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; } [data-ptab-panel][hidden] { display:none !important; } .bf-step.is-link { color:inherit; text-decoration:none !important; cursor:pointer; transition:border-color .15s; } .bf-step.is-link:hover { border-color:var(--primary); } .bf-step.is-sel { border-color:var(--primary) !important; box-shadow:0 0 0 2px var(--primary-soft) !important; } .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; display:inline-flex; align-items:center; gap:4px; } .profile-tabs .icon { width:15px; height:15px; } .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, .att-opts .opt-leave 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) and (hover:hover) and (pointer:fine){ .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 ไม่ใช้