/* ========================================================================== Online Student Registration System — "Aurora" premium dark theme Glass · depth · 3D & motion · 10 color themes · dark (default) & light ========================================================================== */ /* ---------- Accent themes ---------- */ :root, [data-accent="aurora"] { --a1: #7c3aed; --a2: #22d3ee; --a1-rgb: 124, 58, 237; --a2-rgb: 34, 211, 238; } [data-accent="ocean"] { --a1: #2563eb; --a2: #38bdf8; --a1-rgb: 37, 99, 235; --a2-rgb: 56, 189, 248; } [data-accent="emerald"] { --a1: #059669; --a2: #a3e635; --a1-rgb: 5, 150, 105; --a2-rgb: 163, 230, 53; } [data-accent="copper"] { --a1: #c2410c; --a2: #fbbf24; --a1-rgb: 194, 65, 12; --a2-rgb: 251, 191, 36; } [data-accent="rose"] { --a1: #e11d48; --a2: #f0abfc; --a1-rgb: 225, 29, 72; --a2-rgb: 240, 171, 252; } [data-accent="sunset"] { --a1: #ea580c; --a2: #f472b6; --a1-rgb: 234, 88, 12; --a2-rgb: 244, 114, 182; } [data-accent="nebula"] { --a1: #4f46e5; --a2: #e879f9; --a1-rgb: 79, 70, 229; --a2-rgb: 232, 121, 249; } [data-accent="lagoon"] { --a1: #0d9488; --a2: #67e8f9; --a1-rgb: 13, 148, 136; --a2-rgb: 103, 232, 249; } [data-accent="gold"] { --a1: #a16207; --a2: #fde047; --a1-rgb: 161, 98, 7; --a2-rgb: 253, 224, 71; } [data-accent="graphite"] { --a1: #475569; --a2: #cbd5e1; --a1-rgb: 71, 85, 105; --a2-rgb: 203, 213, 225; } /* ---------- Dark (default) ---------- */ :root, [data-mode="dark"] { color-scheme: dark; --bg: #070913; --bg-2: #0b0e1c; --surface: rgba(255, 255, 255, .045); --surface-2: rgba(255, 255, 255, .07); --surface-3: rgba(255, 255, 255, .11); --solid: #111527; --sidebar: rgba(10, 12, 26, .62); --border: rgba(255, 255, 255, .085); --border-strong: rgba(255, 255, 255, .16); --text: #eef0fb; --text-2: #c3c8dd; --muted: #8b91ab; --input: rgba(255, 255, 255, .055); /* เงาหลายชั้น = การ์ดลอยเป็นชั้น ๆ (ขอบแสงบน + เงาใกล้ + เงาไกล + แสงสีธีมใต้การ์ด) */ --shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 2px 4px rgba(0,0,0,.22), 0 18px 44px -16px rgba(0,0,0,.72), 0 34px 70px -46px rgba(var(--a1-rgb), .55); --glow-strength: .6; --g: #34d399; --g-bg: rgba(52, 211, 153, .12); --r: #fb7185; --r-bg: rgba(251, 113, 133, .12); --o: #fbbf24; --o-bg: rgba(251, 191, 36, .12); --b: #60a5fa; --b-bg: rgba(96, 165, 250, .13); --n: #a1a7bf; --n-bg: rgba(161, 167, 191, .12); } /* พื้นหลังโหมดมืดอมสีตามธีม (แต่ละธีมจึงดูต่างกันจริง ไม่ใช่แค่สีปุ่ม) */ [data-mode="dark"][data-accent="ocean"] { --bg: #050b17; --bg-2: #081226; --solid: #0e1a33; --sidebar: rgba(8, 18, 38, .62); } [data-mode="dark"][data-accent="emerald"] { --bg: #040f0b; --bg-2: #071812; --solid: #0d2219; --sidebar: rgba(7, 24, 18, .62); } [data-mode="dark"][data-accent="copper"] { --bg: #110a06; --bg-2: #1a0f09; --solid: #25160e; --sidebar: rgba(26, 15, 9, .62); } [data-mode="dark"][data-accent="rose"] { --bg: #12060b; --bg-2: #1a0a11; --solid: #25101a; --sidebar: rgba(26, 10, 17, .62); } [data-mode="dark"][data-accent="sunset"] { --bg: #120809; --bg-2: #1b0c0e; --solid: #271317; --sidebar: rgba(27, 12, 14, .62); } [data-mode="dark"][data-accent="nebula"] { --bg: #08071a; --bg-2: #0e0c26; --solid: #161335; --sidebar: rgba(14, 12, 38, .62); } [data-mode="dark"][data-accent="lagoon"] { --bg: #041112; --bg-2: #06191a; --solid: #0c2527; --sidebar: rgba(6, 25, 26, .62); } [data-mode="dark"][data-accent="gold"] { --bg: #0f0c04; --bg-2: #171306; --solid: #221c0b; --sidebar: rgba(23, 19, 6, .62); } [data-mode="dark"][data-accent="graphite"] { --bg: #09090b; --bg-2: #111215; --solid: #1a1c21; --sidebar: rgba(17, 18, 21, .66); } /* ---------- Light ---------- */ [data-mode="light"] { color-scheme: light; --bg: #eef0f8; --bg-2: #f6f7fc; --surface: rgba(255, 255, 255, .66); --surface-2: rgba(255, 255, 255, .85); --surface-3: rgba(15, 23, 42, .06); --solid: #ffffff; --sidebar: rgba(248, 249, 255, .62); --border: rgba(15, 23, 42, .08); --border-strong: rgba(15, 23, 42, .16); --text: #0f1222; --text-2: #353a52; --muted: #6a7089; --input: rgba(255, 255, 255, .9); --shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 12px 32px -14px rgba(30, 27, 75, .18); --glow-strength: .28; --g: #047857; --g-bg: rgba(16, 185, 129, .13); --r: #be123c; --r-bg: rgba(244, 63, 94, .11); --o: #b45309; --o-bg: rgba(245, 158, 11, .15); --b: #1d4ed8; --b-bg: rgba(59, 130, 246, .12); --n: #4b5168; --n-bg: rgba(100, 110, 140, .12); } :root { --grad: linear-gradient(135deg, var(--a1), var(--a2)); --radius: 14px; --radius-sm: 9px; --side-w: 272px; --font: "Segoe UI Variable Text", "Segoe UI Variable", "Segoe UI", "Leelawadee UI", "Noto Sans Thai", "Sarabun", system-ui, -apple-system, sans-serif; --font-display: "Segoe UI Variable Display", "Segoe UI Variable", "Segoe UI", "Leelawadee UI", "Noto Sans Thai", system-ui, sans-serif; --ease: cubic-bezier(.2, .8, .2, 1); } /* ---------- Base ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; min-height: 100vh; background: var(--bg); color: var(--text); font: 15px/1.6 var(--font); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } a { color: color-mix(in srgb, var(--a2) 55%, var(--text)); text-decoration: none; } :where([data-mode="light"]) a { color: var(--a1); } a:hover { text-decoration: underline; text-underline-offset: 3px; } h1, h2, h3 { font-family: var(--font-display); letter-spacing: -.01em; line-height: 1.25; } h1 { font-size: 1.75rem; font-weight: 650; margin: 0 0 1.1rem; } h2 { font-size: 1.12rem; font-weight: 600; margin: 0 0 .9rem; } h3 { font-size: 1rem; font-weight: 600; margin: 0 0 .35rem; } ::selection { background: rgba(var(--a1-rgb), .45); color: #fff; } .ic { width: 20px; height: 20px; flex: none; } p .ic, .small .ic { width: 15px; height: 15px; vertical-align: -2px; } .muted { color: var(--muted); } .small { font-size: .85rem; } .center { text-align: center; } .right { text-align: right; } .nowrap { white-space: nowrap; } .inline { display: inline; margin: 0; } .mt { margin-top: 1rem; } .mb0 { margin-bottom: 0 !important; } [hidden] { display: none !important; } /* scrollbars */ * { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 10px; border: 3px solid transparent; background-clip: content-box; } /* ---------- Aurora background ---------- */ .aurora { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; } .aurora i { position: absolute; border-radius: 50%; filter: blur(90px); opacity: var(--glow-strength); } .aurora i:nth-child(1) { width: 52vw; height: 52vw; left: -12vw; top: -22vw; background: radial-gradient(circle, rgba(var(--a1-rgb), .9), transparent 65%); animation: drift1 26s var(--ease) infinite alternate; } .aurora i:nth-child(2) { width: 46vw; height: 46vw; right: -14vw; top: -8vw; background: radial-gradient(circle, rgba(var(--a2-rgb), .7), transparent 65%); animation: drift2 32s var(--ease) infinite alternate; } .aurora i:nth-child(3) { width: 40vw; height: 40vw; left: 30vw; bottom: -26vw; background: radial-gradient(circle, rgba(var(--a1-rgb), .55), transparent 65%); animation: drift1 38s var(--ease) infinite alternate-reverse; } .aurora::after { content: ""; position: absolute; inset: 0; background: radial-gradient(rgba(255,255,255,.035) 1px, transparent 1px) 0 0 / 22px 22px; mask-image: linear-gradient(to bottom, #000, transparent 70%); } [data-mode="light"] .aurora::after { background: radial-gradient(rgba(15,23,42,.05) 1px, transparent 1px) 0 0 / 22px 22px; } @keyframes drift1 { to { transform: translate(6vw, 5vw) scale(1.08); } } @keyframes drift2 { to { transform: translate(-7vw, 6vw) scale(.94); } } @media (prefers-reduced-motion: reduce) { .aurora i { animation: none; } * { transition: none !important; } } /* ---------- App shell ---------- */ .sidebar { position: fixed; z-index: 30; top: 0; left: 0; bottom: 0; width: var(--side-w); display: flex; flex-direction: column; gap: 6px; padding: 18px 14px 14px; background: var(--sidebar); border-right: 1px solid var(--border); backdrop-filter: blur(28px) saturate(160%); -webkit-backdrop-filter: blur(28px) saturate(160%); } .shell { position: relative; z-index: 1; margin-left: var(--side-w); min-height: 100vh; display: flex; flex-direction: column; } .content { flex: 1; width: 100%; max-width: 1320px; margin: 0 auto; padding: 8px 32px 28px; } .side-brand { display: flex; align-items: center; gap: 12px; padding: 4px 8px 14px; color: var(--text); } .side-brand:hover { text-decoration: none; } .logo-tile { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; flex: none; color: #fff; background: var(--grad); box-shadow: 0 8px 24px -6px rgba(var(--a1-rgb), .7), inset 0 1px 0 rgba(255,255,255,.35); } .logo-tile .ic { width: 23px; height: 23px; } /* โลโก้ CAA เป็นรูปสี่เหลี่ยมมุมมนสำเร็จ — ไม่ต้องมีพื้นไล่สีซ้อน */ .logo-img { display: block; background: none; border: 0; padding: 0; object-fit: contain; box-shadow: 0 8px 24px -8px rgba(67, 56, 202, .75); } .auth-art .logo-img { width: 58px; height: 58px; background: none; border: 0; box-shadow: 0 12px 30px -10px rgba(0, 0, 0, .5); } .cube-logo { width: 64px; height: 64px; border-radius: 14px; filter: drop-shadow(0 6px 12px rgba(0, 0, 0, .35)); } .brand-text { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; } .brand-text strong { font-family: var(--font-display); font-size: .98rem; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .brand-text small { color: var(--muted); font-size: .74rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .side-nav { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; margin: 0 -4px; padding: 0 4px; } .nav-group { font-size: .7rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: 14px 12px 6px; } .nav-item { position: relative; display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 10px; color: var(--text-2); font-size: .93rem; transition: background .18s var(--ease), color .18s var(--ease); } .nav-item:hover { background: var(--surface-2); color: var(--text); text-decoration: none; } .nav-item.active { background: var(--surface-3); color: var(--text); font-weight: 600; } .nav-item.active::before { content: ""; position: absolute; left: 0; top: 50%; width: 3px; height: 18px; margin-top: -9px; border-radius: 3px; background: var(--grad); box-shadow: 0 0 12px rgba(var(--a2-rgb), .9); } .nav-item.active .ic { color: color-mix(in srgb, var(--a2) 70%, var(--text)); } [data-mode="light"] .nav-item.active .ic { color: var(--a1); } .side-foot { display: flex; flex-direction: column; gap: 8px; padding-top: 10px; border-top: 1px solid var(--border); } .install-card { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border-radius: 12px; cursor: pointer; text-align: left; font: inherit; color: var(--text); border: 1px solid rgba(var(--a1-rgb), .45); background: linear-gradient(135deg, rgba(var(--a1-rgb), .22), rgba(var(--a2-rgb), .12)); } .install-card:hover { border-color: rgba(var(--a2-rgb), .7); } .install-card span { display: flex; flex-direction: column; line-height: 1.3; } .install-card small { color: var(--muted); font-size: .74rem; } .user-card { display: flex; align-items: center; gap: 6px; padding: 6px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); } .user-card form { margin: 0; } .user-main { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; padding: 4px 6px; border-radius: 10px; color: var(--text); } .user-main:hover, .user-main.active { background: var(--surface-2); text-decoration: none; } .avatar { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; flex: none; font-weight: 700; color: #fff; background: var(--grad); box-shadow: 0 0 0 2px var(--bg), 0 0 0 3.5px rgba(var(--a2-rgb), .55); } .user-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; } .user-text strong { font-size: .88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .user-text small { color: var(--muted); font-size: .75rem; } /* Title bar (also the draggable area when installed as a Windows app) */ .titlebar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 10px 32px; margin-bottom: 8px; background: linear-gradient(to bottom, color-mix(in srgb, var(--bg) 82%, transparent), color-mix(in srgb, var(--bg) 40%, transparent)); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); } .crumb { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: .9rem; color: var(--muted); } .crumb strong { color: var(--text); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .crumb-sep { width: 14px; height: 14px; opacity: .6; } .titlebar-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; } .titlebar .menu-btn { display: none; } .icon-btn { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; cursor: pointer; list-style: none; color: var(--text-2); background: transparent; border: 1px solid transparent; transition: background .15s, color .15s; } .icon-btn::-webkit-details-marker { display: none; } .icon-btn:hover { background: var(--surface-2); color: var(--text); border-color: var(--border); } /* Segmented control */ .seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: 10px; background: var(--surface); border: 1px solid var(--border); } .seg a, .seg button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 4px 11px; border-radius: 7px; border: 0; cursor: pointer; font: 600 .78rem/1.5 var(--font); color: var(--muted); background: transparent; } .seg a:hover, .seg button:hover { color: var(--text); text-decoration: none; } .seg .on { background: var(--surface-3); color: var(--text); box-shadow: 0 1px 2px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.06); } .seg .ic { width: 15px; height: 15px; } .seg-block { display: flex; } .seg-block button { flex: 1; padding: 7px; } /* Popover (theme picker) */ .pop-wrap { position: relative; } .pop-wrap > summary { list-style: none; } .popover { position: absolute; right: 0; top: calc(100% + 8px); z-index: 50; width: 300px; padding: 14px; border-radius: 16px; background: color-mix(in srgb, var(--solid) 88%, transparent); border: 1px solid var(--border-strong); backdrop-filter: blur(30px) saturate(180%); -webkit-backdrop-filter: blur(30px) saturate(180%); box-shadow: 0 24px 60px -12px rgba(0,0,0,.55); animation: pop .18s var(--ease); } @keyframes pop { from { opacity: 0; transform: translateY(-6px) scale(.98); } } .pop-title { font-size: .72rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 2px 2px 10px; } .swatches { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-bottom: 14px; } .swatch { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 6px 0; border: 0; background: none; cursor: pointer; color: var(--muted); font: inherit; border-radius: 10px; } .swatch:hover { background: var(--surface-2); color: var(--text); } .swatch span { width: 34px; height: 34px; border-radius: 50%; box-shadow: inset 0 1px 0 rgba(255,255,255,.35); transition: transform .15s; } .swatch.on span { box-shadow: 0 0 0 2px var(--solid), 0 0 0 4px var(--text); transform: scale(.9); } .swatch.on small { color: var(--text); font-weight: 600; } .sw-aurora span { background: linear-gradient(135deg, #7c3aed, #22d3ee); } .sw-ocean span { background: linear-gradient(135deg, #2563eb, #38bdf8); } .sw-emerald span { background: linear-gradient(135deg, #059669, #a3e635); } .sw-copper span { background: linear-gradient(135deg, #c2410c, #fbbf24); } .sw-rose span { background: linear-gradient(135deg, #e11d48, #f0abfc); } .sw-sunset span { background: linear-gradient(135deg, #ea580c, #f472b6); } .sw-nebula span { background: linear-gradient(135deg, #4f46e5, #e879f9); } .sw-lagoon span { background: linear-gradient(135deg, #0d9488, #67e8f9); } .sw-gold span { background: linear-gradient(135deg, #a16207, #fde047); } .sw-graphite span { background: linear-gradient(135deg, #475569, #cbd5e1); } .scrim { display: none; } .app-foot { color: var(--muted); font-size: .8rem; padding: 28px 0 4px; text-align: center; } /* Guest (not logged in) */ .guestbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 12px; padding: 14px 32px; backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); background: color-mix(in srgb, var(--bg) 55%, transparent); border-bottom: 1px solid var(--border); } .guestbar .side-brand { padding: 0; } .guest-main { position: relative; z-index: 1; width: 100%; max-width: 1200px; margin: 0 auto; padding: 24px 32px 40px; min-height: calc(100vh - 140px); } .guest-foot { position: relative; z-index: 1; padding-bottom: 24px; } /* ---------- Cards & layout ---------- */ .card { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; margin-bottom: 20px; box-shadow: var(--shadow); backdrop-filter: blur(24px) saturate(140%); -webkit-backdrop-filter: blur(24px) saturate(140%); } .card > h2:first-child { display: flex; align-items: center; gap: 10px; } details.card > summary { cursor: pointer; font-weight: 600; } .grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } .grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } .grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; } .grid-2 > .card, .grid-3 > .card, .grid-4 > .card { margin-bottom: 0; } .grid-2, .grid-3, .grid-4 { margin-bottom: 20px; } .grid-2 > div > .card:last-child { margin-bottom: 0; } .page-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 20px; } .page-head h1, .page-head h2 { margin: 0; } .page-head h1 .muted { font-weight: 400; } /* Stat tiles */ .stat { padding: 18px 20px; overflow: hidden; } .stat .label { color: var(--muted); font-size: .84rem; display: flex; align-items: center; gap: 10px; } .stat .value { font-family: var(--font-display); font-size: 2rem; font-weight: 650; line-height: 1.15; margin: 10px 0 4px; font-variant-numeric: tabular-nums; letter-spacing: -.02em; } .stat a { font-size: .82rem; display: inline-flex; align-items: center; gap: 4px; } .stat a .ic { width: 14px; height: 14px; } .stat-ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex: none; color: #fff; background: var(--grad); box-shadow: 0 6px 18px -6px rgba(var(--a1-rgb), .8); } .stat-ic .ic { width: 18px; height: 18px; } .stat-ic.t-g { background: linear-gradient(135deg, #059669, #34d399); box-shadow: 0 6px 18px -6px rgba(16,185,129,.8); } .stat-ic.t-o { background: linear-gradient(135deg, #d97706, #fbbf24); box-shadow: 0 6px 18px -6px rgba(245,158,11,.8); } .stat-ic.t-b { background: linear-gradient(135deg, #2563eb, #60a5fa); box-shadow: 0 6px 18px -6px rgba(59,130,246,.8); } .stat-ic.t-r { background: linear-gradient(135deg, #e11d48, #fb7185); box-shadow: 0 6px 18px -6px rgba(244,63,94,.8); } .stat::after { /* soft glow in the corner */ content: ""; position: absolute; right: -40px; top: -40px; width: 120px; height: 120px; border-radius: 50%; background: radial-gradient(circle, rgba(var(--a2-rgb), .16), transparent 70%); pointer-events: none; } /* Hero banner inside app */ .banner { position: relative; overflow: hidden; border-radius: 20px; padding: 26px 28px; margin-bottom: 20px; color: #fff; background: linear-gradient(120deg, rgba(var(--a1-rgb), .95), rgba(var(--a1-rgb), .55) 55%, rgba(var(--a2-rgb), .75)); box-shadow: 0 20px 50px -20px rgba(var(--a1-rgb), .8), inset 0 1px 0 rgba(255,255,255,.25); } .banner::after { content: ""; position: absolute; right: -60px; top: -80px; width: 320px; height: 320px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.28), transparent 60%); } .banner h1 { margin: 0 0 4px; font-size: 1.65rem; } .banner p { margin: 0; opacity: .88; } .banner .banner-row { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .banner .chip { background: rgba(255,255,255,.18); color: #fff; border: 1px solid rgba(255,255,255,.3); } .chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; font-size: .8rem; font-weight: 600; background: var(--surface-2); border: 1px solid var(--border); } .chip .ic { width: 15px; height: 15px; } /* Progress ring (conic) */ .ring { --p: 0; --size: 120px; width: var(--size); height: var(--size); border-radius: 50%; flex: none; display: grid; place-items: center; background: conic-gradient(var(--a2) 0, var(--a1) calc(var(--p) * 1%), var(--surface-3) 0); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 12px), #000 calc(100% - 11px)); mask: radial-gradient(farthest-side, transparent calc(100% - 12px), #000 calc(100% - 11px)); } .ring-wrap { position: relative; width: var(--size, 120px); height: var(--size, 120px); flex: none; } .ring-wrap .ring-label { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; line-height: 1.1; } .ring-label strong { font-family: var(--font-display); font-size: 1.6rem; font-weight: 700; display: block; } .ring-label small { color: var(--muted); font-size: .72rem; } .ring-row { display: flex; align-items: center; gap: 22px; } .legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: .88rem; } .legend li { display: flex; align-items: center; gap: 8px; } .legend i { width: 10px; height: 10px; border-radius: 3px; background: var(--grad); } .legend i.off { background: var(--surface-3); } .legend b { margin-left: auto; font-variant-numeric: tabular-nums; } /* Horizontal bar list */ .bars { display: grid; gap: 12px; } .bar-row { display: grid; grid-template-columns: 120px 1fr 44px; align-items: center; gap: 12px; font-size: .88rem; } .bar-row .track { height: 10px; border-radius: 99px; background: var(--surface-3); overflow: hidden; } .bar-row .track span { display: block; height: 100%; border-radius: 99px; background: var(--grad); } .bar-row b { text-align: right; font-variant-numeric: tabular-nums; } /* Stepper (application progress) */ .stepper { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 0; margin: 6px 0 4px; padding: 0; counter-reset: s; } .stepper li { list-style: none; position: relative; text-align: center; font-size: .8rem; color: var(--muted); padding-top: 42px; } .stepper li::before { counter-increment: s; content: counter(s); position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: .85rem; background: var(--surface-2); border: 1px solid var(--border-strong); color: var(--muted); z-index: 1; } .stepper li::after { content: ""; position: absolute; top: 15px; left: calc(-50% + 18px); right: calc(50% + 18px); height: 2px; background: var(--border-strong); } .stepper li:first-child::after { display: none; } .stepper li.done { color: var(--text-2); } .stepper li.done::before { content: "✓"; background: var(--grad); border-color: transparent; color: #fff; box-shadow: 0 0 16px rgba(var(--a2-rgb), .45); } .stepper li.done::after, .stepper li.now::after { background: var(--grad); } .stepper li.now { color: var(--text); font-weight: 600; } .stepper li.now::before { border-color: var(--a2); color: var(--text); box-shadow: 0 0 0 4px rgba(var(--a2-rgb), .18); } /* ---------- Landing / auth ---------- */ .hero { text-align: center; padding: 64px 12px 40px; } .hero .chip { margin-bottom: 22px; } .hero h1 { font-size: clamp(2.1rem, 5vw, 3.6rem); font-weight: 700; letter-spacing: -.03em; margin: 0 0 18px; line-height: 1.1; } .grad-text { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; } .hero p { color: var(--text-2); max-width: 660px; margin: 0 auto 30px; font-size: 1.1rem; } .hero-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; } .steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-top: 20px; } .step { padding: 22px; } .step .stat-ic { margin-bottom: 14px; width: 42px; height: 42px; border-radius: 12px; } .step .stat-ic .ic { width: 21px; height: 21px; } .step-no { position: absolute; right: 18px; top: 14px; font-family: var(--font-display); font-size: 2.2rem; font-weight: 800; color: var(--surface-3); line-height: 1; } .features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 18px; } .feature { display: flex; gap: 14px; align-items: flex-start; } .feature p { margin: 0; } .auth-split { display: grid; grid-template-columns: 1.05fr 1fr; gap: 0; max-width: 1040px; margin: 24px auto; border-radius: 24px; overflow: hidden; border: 1px solid var(--border); box-shadow: 0 40px 90px -30px rgba(0,0,0,.6); } .auth-art { position: relative; padding: 44px 40px; color: #fff; display: flex; flex-direction: column; justify-content: space-between; min-height: 560px; background: radial-gradient(120% 80% at 0% 0%, rgba(var(--a2-rgb), .75), transparent 55%), radial-gradient(100% 90% at 100% 100%, rgba(var(--a1-rgb), 1), transparent 60%), linear-gradient(160deg, rgba(var(--a1-rgb), .9), #0b0e1c); } .auth-art::after { content: ""; position: absolute; inset: 0; background: radial-gradient(rgba(255,255,255,.08) 1px, transparent 1px) 0 0 / 20px 20px; mask-image: linear-gradient(to top, #000, transparent); pointer-events: none; } .auth-art h2 { font-size: 2rem; font-weight: 700; margin: 26px 0 10px; letter-spacing: -.02em; } .auth-art p { opacity: .85; margin: 0; } .auth-art ul { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 14px; position: relative; z-index: 1; } .auth-art li { display: flex; gap: 12px; align-items: center; } .auth-art li .ic { width: 34px; height: 34px; padding: 8px; border-radius: 10px; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.25); } .auth-art .logo-tile { background: rgba(255,255,255,.18); box-shadow: inset 0 1px 0 rgba(255,255,255,.35); border: 1px solid rgba(255,255,255,.3); } .auth-form { padding: 44px 44px; background: color-mix(in srgb, var(--solid) 80%, transparent); backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px); } .auth-form h1 { font-size: 1.7rem; margin-bottom: 6px; } .auth-form .lead { color: var(--muted); margin: 0 0 24px; } .auth-box { max-width: 460px; margin: 24px auto; padding: 32px; } .auth-box.wide { max-width: 580px; } .divider { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: .8rem; margin: 20px 0; } .divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--border); } /* ---------- Forms (Fluent) ---------- */ label { display: block; margin-bottom: 16px; font-weight: 600; font-size: .86rem; color: var(--text-2); } input, select, textarea { display: block; width: 100%; margin-top: 6px; padding: 10px 12px; font: 400 .95rem/1.4 var(--font); color: var(--text); background: var(--input); border: 1px solid var(--border); border-bottom-color: var(--border-strong); border-radius: 9px; transition: border-color .15s, box-shadow .15s, background .15s; } input::placeholder, textarea::placeholder { color: var(--muted); opacity: .8; } input:hover, select:hover, textarea:hover { background: var(--surface-2); } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--border-strong); border-bottom: 2px solid var(--a2); padding-bottom: 9px; box-shadow: 0 0 0 4px rgba(var(--a2-rgb), .12); background: var(--surface-2); } [data-mode="light"] input:focus, [data-mode="light"] select:focus, [data-mode="light"] textarea:focus { border-bottom-color: var(--a1); box-shadow: 0 0 0 4px rgba(var(--a1-rgb), .1); } select option { background: var(--solid); color: var(--text); } input:disabled, select:disabled, textarea:disabled { opacity: .62; cursor: not-allowed; background: var(--surface); } input[type=file] { padding: 8px; cursor: pointer; } input[type=file]::file-selector-button { margin-right: 12px; padding: 6px 14px; border: 0; border-radius: 7px; cursor: pointer; font: 600 .85rem var(--font); color: #fff; background: var(--grad); } textarea { min-height: 90px; resize: vertical; } label.check { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; color: var(--text-2); font-size: .9rem; } label.check input { width: 18px; height: 18px; margin: 3px 0 0; flex: none; accent-color: var(--a1); } .form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; } .form-grid .full { grid-column: 1 / -1; } fieldset { border: 0; padding: 0; margin: 0 0 12px; } legend { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 650; font-size: 1.05rem; color: var(--text); margin-bottom: 16px; padding: 0; } legend::before { content: ""; width: 4px; height: 18px; border-radius: 4px; background: var(--grad); } .err { display: block; color: var(--r); font-size: .8rem; font-weight: 500; margin-top: 5px; } .req::after { content: " *"; color: var(--r); } .filters { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; } .filters label { margin: 0; flex: 1 1 170px; } .page-head .filters label { flex: 0 1 220px; } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 18px; border-radius: 10px; cursor: pointer; font: 600 .9rem/1.3 var(--font); color: #fff; text-align: center; white-space: nowrap; background: var(--grad); border: 1px solid rgba(255,255,255,.14); box-shadow: 0 8px 22px -10px rgba(var(--a1-rgb), .95), inset 0 1px 0 rgba(255,255,255,.25); transition: transform .15s var(--ease), box-shadow .2s var(--ease), filter .2s; } .btn:hover { color: #fff; text-decoration: none; filter: brightness(1.08); box-shadow: 0 12px 28px -10px rgba(var(--a1-rgb), 1), inset 0 1px 0 rgba(255,255,255,.3); } .btn:active { transform: translateY(1px) scale(.99); } .btn .ic { width: 17px; height: 17px; } .btn-sm { padding: 6px 12px; font-size: .82rem; border-radius: 8px; } .btn-lg { padding: 13px 26px; font-size: 1rem; border-radius: 12px; } .btn-block { display: flex; width: 100%; } /* 3.39: ในแอป CAA — ไม่ชวนติดตั้งแอป/เปิดแจ้งเตือนแบบเว็บ (แอปใช้แจ้งเตือนของแอปเอง) */ html.caa-app #pwa-bar, html.caa-app [data-push-prompt], html.caa-app [data-ai-box], html.caa-app [data-app-install] { display: none !important; } /* 3.39: ลบบัญชี */ .danger-zone { border: 1px solid color-mix(in srgb, #dc2626 35%, transparent); } .danger-zone > summary { cursor: pointer; color: #dc2626; list-style: revert; } .danger-zone[open] > summary { margin-bottom: 8px; } .btn.btn-danger { background: #dc2626; box-shadow: none; } .prose h2 { margin-top: 18px; } .prose li { margin: 4px 0; } .btn-outline, .btn-gray, .btn-ghost { color: var(--text); background: var(--surface-2); border: 1px solid var(--border-strong); box-shadow: inset 0 1px 0 rgba(255,255,255,.04); } .btn-outline:hover, .btn-gray:hover, .btn-ghost:hover { color: var(--text); background: var(--surface-3); box-shadow: none; filter: none; } .btn-ghost { background: transparent; border-color: transparent; } .btn-green { background: linear-gradient(135deg, #059669, #10b981); box-shadow: 0 8px 22px -10px rgba(16,185,129,.9), inset 0 1px 0 rgba(255,255,255,.25); } .btn-red { background: linear-gradient(135deg, #be123c, #f43f5e); box-shadow: 0 8px 22px -10px rgba(244,63,94,.9), inset 0 1px 0 rgba(255,255,255,.25); } .btn-orange { background: linear-gradient(135deg, #c2410c, #f59e0b); box-shadow: 0 8px 22px -10px rgba(245,158,11,.9), inset 0 1px 0 rgba(255,255,255,.25); } .btn:disabled { opacity: .45; cursor: not-allowed; filter: grayscale(.4); transform: none; } .link-btn { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; color: inherit; } .actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } /* ---------- Tables ---------- */ .table-wrap { overflow-x: auto; } .card.table-wrap { padding: 8px 8px 12px; } .card.table-wrap > h2, .card.table-wrap > .page-head, .card.table-wrap > p { padding-left: 14px; padding-right: 14px; } .card.table-wrap > h2 { padding-top: 12px; } .card.table-wrap > .page-head { padding-top: 12px; margin-bottom: 12px; } .table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .9rem; } .table th, .table td { padding: 12px 14px; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--border); } .table th { font-size: .74rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); white-space: nowrap; border-bottom-color: var(--border-strong); } .table tbody tr { transition: background .12s; } .table tbody tr:hover td { background: var(--surface); } .table tbody tr:last-child td { border-bottom: 0; } .table tbody tr:hover td:first-child { border-radius: 10px 0 0 10px; } .table tbody tr:hover td:last-child { border-radius: 0 10px 10px 0; } .table.compact th, .table.compact td { padding: 8px 10px; } .table td.num, .table th.num { text-align: right; font-variant-numeric: tabular-nums; } .table input { margin: 0; padding: 6px 10px; } .table input.score { width: 96px; text-align: right; margin-left: auto; } .table small { color: var(--muted); } .card.table-wrap .pagination { padding: 0 14px; } /* ---------- Badges ---------- */ .badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 8px; border-radius: 999px; font-size: .76rem; font-weight: 600; white-space: nowrap; border: 1px solid transparent; } .badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; } .badge-green { background: var(--g-bg); color: var(--g); border-color: color-mix(in srgb, var(--g) 22%, transparent); } .badge-red { background: var(--r-bg); color: var(--r); border-color: color-mix(in srgb, var(--r) 22%, transparent); } .badge-orange { background: var(--o-bg); color: var(--o); border-color: color-mix(in srgb, var(--o) 22%, transparent); } .badge-blue { background: rgba(var(--a2-rgb), .12); color: color-mix(in srgb, var(--a2) 65%, var(--text)); border-color: rgba(var(--a2-rgb), .25); } [data-mode="light"] .badge-blue { background: rgba(var(--a1-rgb), .1); color: var(--a1); border-color: rgba(var(--a1-rgb), .22); } .badge-gray { background: var(--n-bg); color: var(--n); border-color: color-mix(in srgb, var(--n) 20%, transparent); } /* ---------- InfoBars (alerts) ---------- */ .alert { display: flex; align-items: flex-start; gap: 12px; padding: 13px 14px 13px 16px; border-radius: 12px; margin-bottom: 18px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); animation: slideIn .35s var(--ease); } @keyframes slideIn { from { opacity: 0; transform: translateY(-8px); } } .alert > .ic { margin-top: 1px; padding: 3px; width: 22px; height: 22px; border-radius: 50%; color: #fff; } .alert > span { flex: 1; } .alert-success { border-color: color-mix(in srgb, var(--g) 35%, transparent); background: linear-gradient(90deg, var(--g-bg), var(--surface) 60%); } .alert-success > .ic { background: #10b981; } .alert-danger { border-color: color-mix(in srgb, var(--r) 35%, transparent); background: linear-gradient(90deg, var(--r-bg), var(--surface) 60%); } .alert-danger > .ic { background: #f43f5e; } .alert-warning { border-color: color-mix(in srgb, var(--o) 35%, transparent); background: linear-gradient(90deg, var(--o-bg), var(--surface) 60%); } .alert-warning > .ic { background: #f59e0b; } .alert-info { border-color: rgba(var(--a2-rgb), .3); background: linear-gradient(90deg, rgba(var(--a2-rgb), .12), var(--surface) 60%); } .alert-info > .ic { background: var(--grad); } .alert-close { background: none; border: 0; color: var(--muted); cursor: pointer; padding: 2px; border-radius: 6px; display: grid; } .alert-close:hover { color: var(--text); background: var(--surface-3); } .alert-close .ic { width: 16px; height: 16px; } div.alert:not(:has(> .ic)) { display: block; } /* ---------- Misc components ---------- */ .dl { display: grid; grid-template-columns: 170px 1fr; gap: 8px 18px; margin: 0; font-size: .92rem; } .dl dt { color: var(--muted); } .dl dd { margin: 0; } .photo { width: 128px; height: 160px; object-fit: cover; border-radius: 14px; border: 1px solid var(--border-strong); background: var(--surface-2); box-shadow: 0 14px 30px -14px rgba(0,0,0,.6); } .doc-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; } .doc-list li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border); } .doc-list li.muted { justify-content: center; } .qr-box { text-align: center; } .qr-box img { width: 232px; height: 232px; image-rendering: pixelated; background: #fff; padding: 10px; border-radius: 18px; box-shadow: 0 0 0 1px var(--border-strong), 0 20px 50px -18px rgba(var(--a1-rgb), .9); } .progress { height: 7px; background: var(--surface-3); border-radius: 999px; overflow: hidden; margin-top: 4px; } .progress > span { display: block; height: 100%; background: var(--grad); border-radius: 999px; } .progress.full > span { background: linear-gradient(90deg, #f43f5e, #fb923c); } .pagination { display: flex; gap: 6px; margin-top: 16px; flex-wrap: wrap; } .pagination a, .pagination span { min-width: 34px; text-align: center; padding: 5px 10px; border-radius: 8px; background: var(--surface-2); border: 1px solid var(--border); color: var(--text-2); } .pagination a:hover { text-decoration: none; background: var(--surface-3); } .pagination .current { background: var(--grad); color: #fff; border-color: transparent; } .empty { text-align: center; color: var(--muted); padding: 34px 12px !important; } .gpa { font-family: var(--font-display); font-size: 2.6rem; font-weight: 700; line-height: 1; } /* ---------- ใบแจ้งค่าเทอม: PDF + ชำระในหน้าเดียว ---------- */ .invoice-layout { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(300px, 1fr); gap: 20px; align-items: start; } .invoice-layout > .card { margin-bottom: 20px; } .invoice-layout #pay { position: sticky; top: 76px; } /* 3.44: รายการย่อยในใบแจ้งหนี้ (แยกหมวดแบบใบแจ้งกระดาษ) */ .inv-items td, .inv-items th { padding-top: 7px; padding-bottom: 7px; } .inv-items .inv-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; width: 1%; padding-left: 16px; } .inv-items .inv-group th { background: var(--surface-2); color: var(--text-2); font-size: .85em; font-weight: 700; letter-spacing: .01em; } /* 3.49: ผลการเรียนแยกหมวด (พื้นฐาน · เพิ่มเติม · กิจกรรม) */ .table tr.group-row th { background: var(--surface-2); color: var(--text-2); font-size: .82rem; font-weight: 700; letter-spacing: .01em; text-transform: none; white-space: normal; padding-top: 8px; padding-bottom: 8px; } .inv-items .inv-minus td { color: var(--g); } .inv-items .inv-total th, .inv-items .inv-total td { border-top: 2px solid var(--border-strong); font-weight: 800; font-size: 1.05em; } .pdf-frame { display: block; width: 100%; height: min(78vh, 900px); min-height: 480px; border: 1px solid var(--border-strong); border-radius: 12px; background: #fff; } .chip-sm { padding: 1px 8px; font-size: .7rem; vertical-align: 1px; } .chip-sm .ic { width: 12px; height: 12px; } .pdf-open-mobile, .qr-save { display: none; } /* 3.75: หน้าดู PDF ในเว็บแอป — แถบย้อนกลับติดด้านบน · ปุ่มแชร์/บันทึก */ .pdf-bar { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 10px; padding: 8px 0 10px; background: var(--bg); } .pdf-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pdf-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; } .pdf-actions .btn[hidden] { display: none; } .qr-bank-only .qr-line:first-of-type { margin-top: 0; } .pdf-open-file { display: none; } .pdf-viewer.pdf-no-frame .pdf-frame-view, .pdf-viewer.pdf-no-frame .pdf-frame-note { display: none; } .pdf-viewer.pdf-no-frame .pdf-open-file { display: inline-flex; } @media (max-width: 1024px) { .invoice-layout { grid-template-columns: 1fr; } .invoice-layout #pay { position: static; } .pdf-frame { height: 70vh; min-height: 380px; } } /* ========================================================================== มือถือ: ตารางเป็นการ์ดทีละแถว · PDF เป็นปุ่มเปิด · บันทึกรูป QR ไปสแกนในแอปธนาคาร ========================================================================== */ @media (max-width: 760px) { /* ตาราง (JS ใส่ .stackable + data-label จากหัวคอลัมน์ให้) */ .table.stackable thead { display: none; } .table.stackable, .table.stackable tbody, .table.stackable tr { display: block; width: 100%; } .table.stackable tr { padding: 10px 14px; border-bottom: 1px solid var(--border); } .table.stackable tbody tr:last-child { border-bottom: 0; } .table.stackable td { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 5px 0; border: 0; text-align: right; } .table.stackable td::before { content: attr(data-label); flex: none; max-width: 44%; text-align: left; color: var(--muted); font-size: .78rem; font-weight: 600; } .table.stackable td[data-label=""]::before { display: none; } .table.stackable td[data-label=""] { justify-content: flex-end; padding-top: 8px; } .table.stackable td.empty { display: block; text-align: center; } .table.stackable td.empty::before { display: none; } .table.stackable tbody tr:hover td { background: none; } .card.table-wrap { padding: 6px 0 8px; } /* ใบแจ้งค่าเทอม: มือถือส่วนใหญ่แสดง PDF ในกรอบไม่ได้ → ปุ่มเปิดไฟล์ใหญ่ ๆ แทน */ .pdf-frame, .pdf-open-desktop { display: none; } .pdf-viewer .pdf-frame-view { display: block; height: calc(100vh - 220px); min-height: 360px; } /* iPhone แสดง PDF ในกรอบได้ */ .pdf-actions .btn { flex: 1 1 auto; justify-content: center; } .pdf-open-mobile { display: flex; margin-bottom: 14px; } .qr-save { display: inline-flex; margin-top: 4px; } .qr-box img { width: 210px; height: 210px; } /* หน้าหลัก: การ์ดตัวเลข 2 ต่อแถว */ .grid-4:has(> .stat) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .stat { padding: 14px; } .stat .label { font-size: .76rem; gap: 8px; align-items: flex-start; } .stat .value { font-size: 1.45rem; } .stat-ic { width: 30px; height: 30px; } /* แถบขั้นตอน: แสดงชื่อเฉพาะขั้นปัจจุบัน */ .stepper li { font-size: .7rem; } .stepper li:not(.now) { color: transparent; } .stepper li.now { white-space: nowrap; } /* หน้าแรก / เข้าสู่ระบบ */ .hero { padding-top: 40px; } .hero h1 { font-size: 2rem; } .hero-3d { height: 150px; margin-top: -20px; } .orb.o2, .orb.o3 { display: none; } .orb.o1 { width: 84px; height: 84px; right: -22px; top: -22px; } .ring3d { width: 240px; height: 240px; right: -110px; bottom: -80px; } .auth-art h2 { font-size: 1.6rem; margin-top: 18px; } } /* ========================================================================== Depth · 3D · Motion ทุกอย่างในส่วนนี้ปิดเองเมื่อผู้ใช้เลือก "ลดการเคลื่อนไหว" หรือตั้งค่าไว้ในระบบ (ท้ายส่วน) ========================================================================== */ @property --p { syntax: ""; inherits: false; initial-value: 0; } :root { --ease-out: cubic-bezier(.16, 1, .3, 1); --spring: cubic-bezier(.34, 1.56, .64, 1); } /* ----- การ์ดมีมิติ: เส้นแสงขอบบน ----- */ .card::before { content: ""; position: absolute; left: 18px; right: 18px; top: 0; height: 1px; pointer-events: none; background: linear-gradient(90deg, transparent, rgba(255,255,255,.2), rgba(var(--a2-rgb), .35), rgba(255,255,255,.2), transparent); } [data-mode="light"] .card::before { background: linear-gradient(90deg, transparent, rgba(255,255,255,.95), transparent); } /* ----- เอียงตามเมาส์ (JS ใส่คลาส .tilt + ตั้ง transform) + แสงสะท้อน ----- */ .tilt { transition: transform .6s var(--ease-out), box-shadow .45s var(--ease-out), border-color .3s; will-change: transform; } .tilt.is-tilting { transition: transform .1s linear, box-shadow .45s var(--ease-out), border-color .3s; } .tilt:hover { border-color: rgba(var(--a2-rgb), .38); box-shadow: var(--shadow), 0 26px 60px -22px rgba(var(--a1-rgb), .6); z-index: 2; } .glare { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .4s; background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.13), rgba(var(--a2-rgb), .06) 35%, transparent 60%); } .tilt:hover .glare { opacity: 1; } .tilt .stat-ic { transition: transform .5s var(--spring); } .tilt:hover .stat-ic { transform: scale(1.12) rotate(-6deg); } /* ----- เข้าหน้า: ค่อย ๆ ลอยขึ้นทีละชิ้น (JS ตั้ง --i = ลำดับ) ----- */ @keyframes rise { from { opacity: 0; translate: 0 26px; scale: .98; } } @keyframes rowIn { from { opacity: 0; translate: 0 10px; } } @keyframes dotIn { from { opacity: 0; scale: .3; } } @keyframes grow { from { width: 0; } } @keyframes ringIn { from { --p: 0; } } .content > *, .guest-main > *, .grid-2 > *, .grid-3 > *, .grid-4 > *, .steps > *, .features > *, .hero > * { animation: rise .85s var(--ease-out) backwards; animation-delay: calc(var(--i, 0) * 70ms); } .table tbody tr { animation: rowIn .55s var(--ease-out) backwards; animation-delay: calc(var(--i, 0) * 32ms + 180ms); } .stepper li::before { animation: dotIn .6s var(--spring) backwards; animation-delay: calc(var(--i, 0) * 110ms + 250ms); } .ring { animation: ringIn 1.6s var(--ease-out) .25s backwards; } .bar-row .track span, .progress > span { animation: grow 1.2s var(--ease-out) .3s backwards; } /* ----- ปุ่ม: แสงวิ่งผ่านเมื่อชี้ + กดยุบ ----- */ .btn { position: relative; overflow: hidden; isolation: isolate; } .btn::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; translate: -130% 0; background: linear-gradient(110deg, transparent 25%, rgba(255,255,255,.38) 50%, transparent 75%); transition: translate .75s var(--ease-out); } .btn:hover::after { translate: 130% 0; } .btn-outline::after, .btn-gray::after, .btn-ghost::after { display: none; } .btn:hover { transform: translateY(-1px); } .btn:active { transform: translateY(1px) scale(.97); transition-duration: .06s; } /* ----- เมนู / โลโก้ / ป้าย ----- */ .nav-item { transition: background .18s var(--ease), color .18s var(--ease), translate .3s var(--ease-out); } .nav-item:hover { translate: 3px 0; } .nav-item .ic { transition: transform .45s var(--spring); } .nav-item:hover .ic { transform: scale(1.14) rotate(-7deg); } .nav-item.active::before { animation: pillGlow 2.8s ease-in-out infinite; } @keyframes pillGlow { 50% { box-shadow: 0 0 20px rgba(var(--a2-rgb), 1), 0 0 4px rgba(var(--a1-rgb), 1); } } .side-brand .logo-tile, .guestbar .logo-tile { animation: floaty 6s ease-in-out infinite; } @keyframes floaty { 50% { translate: 0 -3px; box-shadow: 0 14px 30px -8px rgba(var(--a1-rgb), .85), inset 0 1px 0 rgba(255,255,255,.35); } } .badge::before { animation: blink 2.4s ease-in-out infinite; } @keyframes blink { 50% { opacity: .45; } } .avatar { transition: transform .4s var(--spring); } .user-main:hover .avatar { transform: scale(1.08) rotate(-4deg); } /* ----- พื้นหลัง: ลำแสงหมุนช้า ๆ + เลื่อนตามเมาส์ (parallax) ----- */ .aurora { translate: calc(var(--px, 0) * -28px) calc(var(--py, 0) * -22px); transition: translate 1.4s var(--ease-out); } .aurora::before { content: ""; position: absolute; left: 50%; top: 50%; width: 160vmax; height: 160vmax; margin: -80vmax 0 0 -80vmax; opacity: calc(var(--glow-strength) * .9); background: conic-gradient(from 0deg, transparent 0 8%, rgba(var(--a2-rgb), .10) 14%, transparent 22% 48%, rgba(var(--a1-rgb), .12) 56%, transparent 64% 100%); filter: blur(50px); animation: beam 70s linear infinite; } @keyframes beam { to { transform: rotate(360deg); } } #scene3d { position: absolute; inset: 0; width: 100%; height: 100%; } /* ========================================================================== หน้าแรก / เข้าสู่ระบบ: 3D จัดเต็ม ========================================================================== */ .hero h1 { text-shadow: 0 18px 60px rgba(var(--a1-rgb), .45); } .hero-3d { position: relative; height: 190px; perspective: 900px; margin: -30px auto 6px; pointer-events: none; } .hero-3d .stage { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform 1s var(--ease-out); } .cube { --s: 86px; position: absolute; left: 50%; top: 50%; width: var(--s); height: var(--s); margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2); transform-style: preserve-3d; animation: cubeSpin 16s linear infinite; } .cube i { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 16px; color: #fff; background: linear-gradient(135deg, rgba(var(--a1-rgb), .78), rgba(var(--a2-rgb), .5)); border: 1px solid rgba(255,255,255,.4); box-shadow: inset 0 0 26px rgba(255,255,255,.22), 0 0 30px rgba(var(--a1-rgb), .35); } .cube i .ic { width: 38px; height: 38px; filter: drop-shadow(0 4px 10px rgba(0,0,0,.35)); } .cube i:nth-child(1) { transform: translateZ(calc(var(--s) / 2)); } .cube i:nth-child(2) { transform: rotateY(180deg) translateZ(calc(var(--s) / 2)); } .cube i:nth-child(3) { transform: rotateY(90deg) translateZ(calc(var(--s) / 2)); } .cube i:nth-child(4) { transform: rotateY(-90deg) translateZ(calc(var(--s) / 2)); } .cube i:nth-child(5) { transform: rotateX(90deg) translateZ(calc(var(--s) / 2)); } .cube i:nth-child(6) { transform: rotateX(-90deg) translateZ(calc(var(--s) / 2)); } @keyframes cubeSpin { from { transform: rotateX(-24deg) rotateY(0deg); } to { transform: rotateX(-24deg) rotateY(360deg); } } .orbit { position: absolute; left: 50%; top: 50%; width: 250px; height: 250px; margin: -125px 0 0 -125px; border-radius: 50%; border: 1px solid rgba(var(--a2-rgb), .4); box-shadow: 0 0 24px rgba(var(--a2-rgb), .15), inset 0 0 24px rgba(var(--a1-rgb), .15); transform-style: preserve-3d; animation: orbitA 11s linear infinite; } .orbit.o2 { width: 330px; height: 330px; margin: -165px 0 0 -165px; border-color: rgba(var(--a1-rgb), .35); animation: orbitB 17s linear infinite reverse; } .orbit b { position: absolute; left: 50%; top: -6px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff, rgb(var(--a2-rgb)) 45%, rgb(var(--a1-rgb))); box-shadow: 0 0 16px rgba(var(--a2-rgb), .9); } @keyframes orbitA { from { transform: rotateX(74deg) rotateZ(0deg); } to { transform: rotateX(74deg) rotateZ(360deg); } } @keyframes orbitB { from { transform: rotateX(66deg) rotateY(18deg) rotateZ(0deg); } to { transform: rotateX(66deg) rotateY(18deg) rotateZ(360deg); } } .hero-3d .floor { position: absolute; left: 50%; top: 50%; width: 220px; height: 60px; margin: 70px 0 0 -110px; border-radius: 50%; background: radial-gradient(closest-side, rgba(var(--a1-rgb), .55), transparent); filter: blur(10px); animation: floorPulse 4s ease-in-out infinite; } @keyframes floorPulse { 50% { opacity: .55; scale: .88; } } /* แผงภาพฝั่งซ้ายของหน้าเข้าสู่ระบบ: ลูกแก้ว 3D ลอย + วงแหวนหมุน */ .art-3d { position: absolute; inset: 0; pointer-events: none; perspective: 700px; overflow: hidden; } .orb { position: absolute; border-radius: 50%; background: radial-gradient(circle at 32% 28%, rgba(255,255,255,.95), rgba(255,255,255,.35) 18%, rgba(var(--a2-rgb), .55) 45%, rgba(var(--a1-rgb), .9) 75%, rgba(0,0,0,.35)); box-shadow: 0 30px 60px -20px rgba(0,0,0,.55), inset -10px -14px 30px rgba(0,0,0,.25); animation: bob 7s ease-in-out infinite; } .orb.o1 { width: 120px; height: 120px; right: -26px; top: -22px; } .orb.o2 { width: 64px; height: 64px; right: 9%; bottom: 17%; animation-duration: 5.5s; animation-delay: -2s; } .orb.o3 { width: 36px; height: 36px; right: 34%; bottom: 7%; animation-duration: 6.5s; animation-delay: -4s; } @keyframes bob { 50% { translate: 0 -18px; } } .ring3d { position: absolute; right: -120px; bottom: -40px; width: 340px; height: 340px; border-radius: 50%; border: 2px solid rgba(255,255,255,.26); box-shadow: 0 0 30px rgba(255,255,255,.12); animation: ringSpin 14s linear infinite; } @keyframes ringSpin { from { transform: rotateX(70deg) rotateY(-14deg) rotateZ(0deg); } to { transform: rotateX(70deg) rotateY(-14deg) rotateZ(360deg); } } .auth-art > :not(.art-3d) { position: relative; z-index: 1; } .auth-art .logo-tile { animation: floaty 5s ease-in-out infinite; } /* ----- ปิดการเคลื่อนไหว (ผู้ใช้เลือก หรือระบบตั้งไว้) ----- */ [data-motion="reduced"] *, [data-motion="reduced"] *::before, [data-motion="reduced"] *::after { animation: none !important; transition: none !important; } [data-motion="reduced"] .aurora { translate: none; } [data-motion="reduced"] #scene3d, [data-motion="reduced"] .hero-3d, [data-motion="reduced"] .glare { display: none; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } #scene3d, .hero-3d, .glare { display: none; } } /* ---------- Responsive ---------- */ @media (max-width: 1180px) { .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 1024px) { .sidebar { transform: translateX(-102%); transition: transform .28s var(--ease); box-shadow: 30px 0 60px -20px rgba(0,0,0,.5); background: color-mix(in srgb, var(--bg-2) 92%, transparent); } body.side-open .sidebar { transform: none; } body.side-open .scrim { display: block; position: fixed; inset: 0; z-index: 25; background: rgba(0,0,0,.45); backdrop-filter: blur(2px); } .shell { margin-left: 0; } .titlebar .menu-btn { display: inline-grid; } .auth-split { grid-template-columns: 1fr; } .auth-art { min-height: 0; padding: 30px; } .auth-art ul { display: none; } .features { grid-template-columns: 1fr; } } @media (max-width: 760px) { .content, .guest-main { padding-left: 16px; padding-right: 16px; } .titlebar, .guestbar { padding-left: 16px; padding-right: 16px; } .grid-2, .grid-3, .grid-4, .form-grid, .steps { grid-template-columns: 1fr; } .crumb span, .crumb-sep, .guestbar .brand-text small, .hide-sm, .guestbar .titlebar-actions > .btn { display: none; } .guestbar .brand-text strong { max-width: 38vw; } .dl { grid-template-columns: 1fr; gap: 2px; } .dl dd { margin-bottom: 10px; } .auth-form { padding: 28px 22px; } .stepper li { font-size: .68rem; } .ring-row { flex-direction: column; align-items: flex-start; } .bar-row { grid-template-columns: 90px 1fr 36px; } .popover { position: fixed; left: 16px; right: 16px; top: 64px; width: auto; } h1 { font-size: 1.45rem; } } /* ---------- Installed as a Windows app (title bar overlay) ---------- */ @media (display-mode: window-controls-overlay) { .titlebar, .guestbar { -webkit-app-region: drag; app-region: drag; min-height: max(48px, env(titlebar-area-height, 48px)); padding-top: 6px; padding-bottom: 6px; padding-right: calc(100vw - env(titlebar-area-x, 0px) - env(titlebar-area-width, 100vw) + 16px); } .side-brand { -webkit-app-region: drag; app-region: drag; } .titlebar a, .titlebar button, .titlebar summary, .titlebar .popover, .guestbar a, .guestbar button, .guestbar summary, .guestbar .popover { -webkit-app-region: no-drag; app-region: no-drag; } } @media (display-mode: standalone), (display-mode: window-controls-overlay) { .install-card { display: none !important; } } /* ---------- Print ---------- */ @media print { .sidebar, .titlebar, .guestbar, .app-foot, .aurora, .no-print, .btn, .alert-close { display: none !important; } :root, [data-mode] { --bg: #fff; --text: #000; --muted: #555; --surface: #fff; --border: #ddd; --border-strong: #bbb; color-scheme: light; } body { background: #fff; color: #000; } .shell { margin: 0; } .card { box-shadow: none; backdrop-filter: none; border: 1px solid #ddd; } } /* ---------- หน้าเว็บครู (/teacher) ---------- */ .score-in { width: 96px; text-align: right; padding: 7px 10px; font-variant-numeric: tabular-nums; } .score-in:invalid { border-color: #f43f5e; } .is-teacher .filters label { min-width: 180px; } form.inline input[type=file] { max-width: 260px; } @media (max-width: 760px) { .score-in { width: 110px; } form.inline input[type=file] { max-width: 100%; } } /* ---------- หน้าหลักของโรงเรียน (/home หรือโดเมนหลัก) ---------- */ .hub-hero { padding-bottom: 28px; } .hub-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; margin-top: 8px; } .hub-card { display: flex; flex-direction: column; gap: 12px; padding: 26px; position: relative; } .hub-card .stat-ic { width: 52px; height: 52px; border-radius: 16px; } .hub-card .stat-ic .ic { width: 26px; height: 26px; } .hub-card h2 { margin: 4px 0 0; font-size: 1.3rem; padding-right: 96px; } .hub-card ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 7px; color: var(--text-2); font-size: .93rem; } .hub-card li { display: flex; gap: 8px; align-items: center; } .hub-card li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--grad); flex: none; } .hub-card .actions { margin-top: auto; padding-top: 8px; display: flex; gap: 8px; flex-wrap: wrap; } .hub-url { font-family: ui-monospace, Consolas, monospace; font-size: .78rem; color: var(--muted); overflow-wrap: anywhere; } .hub-status { position: absolute; top: 22px; right: 22px; display: inline-flex; align-items: center; gap: 6px; font-size: .75rem; color: var(--text-2); } .hub-status i { width: 8px; height: 8px; border-radius: 50%; background: #34d399; box-shadow: 0 0 0 4px rgba(52,211,153,.18); } .hub-status.off i { background: #94a3b8; box-shadow: 0 0 0 4px rgba(148,163,184,.18); } .hub-row { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 20px; margin-top: 20px; } .hub-row.single { grid-template-columns: minmax(0, 1fr); } .hub-news ul { list-style: none; margin: 0; padding: 0; } .hub-news li { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); } .hub-news li:last-child { border-bottom: 0; } .hub-news time { flex: none; font-size: .78rem; color: var(--muted); min-width: 74px; padding-top: 2px; } .hub-edit > summary { cursor: pointer; list-style: none; } .hub-edit > summary::-webkit-details-marker { display: none; } .hub-news-row { display: grid; grid-template-columns: 150px minmax(0, 1fr) 220px; gap: 8px; margin-bottom: 8px; } @media (max-width: 900px) { .hub-row { grid-template-columns: 1fr; } .hub-news-row { grid-template-columns: 1fr; } .hub-card h2 { padding-right: 0; margin-top: 18px; } } .hub-builder-card { display: flex; gap: 18px; align-items: center; justify-content: space-between; flex-wrap: wrap; border: 1px solid rgba(var(--a1-rgb), .45); } .hub-builder-card h2 { display: flex; gap: 8px; align-items: center; } .hub-mode { border: 1px solid var(--border); border-radius: 12px; padding: 10px 14px; display: flex; gap: 18px; flex-wrap: wrap; } .hub-mode legend { padding: 0 6px; font-size: .85rem; color: var(--text-2); } /* ---------- ติดตั้งเป็นแอปบนมือถือ (PWA) ---------- */ .pwa-bar { position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 60; display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 14px; border-radius: 18px; background: var(--solid); border: 1px solid var(--border-strong); box-shadow: 0 18px 50px -12px rgba(0,0,0,.6); max-width: 560px; margin: 0 auto; animation: pwa-in .5s var(--ease-out, ease) both; } .pwa-bar[hidden] { display: none; } .pwa-bar img { border-radius: 12px; flex: none; } .pwa-text { flex: 1; min-width: 0; line-height: 1.35; } .pwa-text strong { display: block; font-size: .95rem; } .pwa-text small { color: var(--text-2); font-size: .8rem; } .has-pwa-bar body { padding-bottom: 96px; } @keyframes pwa-in { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } } .pwa-card-head { display: flex; gap: 14px; align-items: center; margin-bottom: 14px; } .pwa-card-head img { border-radius: 14px; } .pwa-steps ol { margin: 6px 0 0; padding-left: 20px; color: var(--text-2); } .pwa-steps li { margin: 4px 0; } .pwa-done { color: #34d399; font-weight: 600; display: flex; gap: 6px; align-items: center; } .is-standalone .titlebar { padding-top: max(10px, env(safe-area-inset-top)); } .pwa-push { border-top: 1px solid var(--border); padding-top: 14px; } .pwa-push h3 { display: flex; gap: 8px; align-items: center; font-size: 1.02rem; } .pwa-push-state { color: var(--text-2); } .pwa-push-state.on { color: #34d399; font-weight: 600; } .pwa-push-actions { display: flex; gap: 8px; flex-wrap: wrap; } /* ---------- เว็บครู: ข่าว อัลบั้ม ข้อความติดต่อ ---------- */ .content-tabs { margin-bottom: 18px; } .content-tabs a { display: inline-flex; align-items: center; gap: 6px; } .content-tabs .ic { width: 16px; height: 16px; } .empty .ic { width: 38px; height: 38px; opacity: .6; } .thumb-cell { width: 84px; } .thumb, .thumb-none { width: 72px; height: 50px; border-radius: 8px; object-fit: cover; display: block; background: var(--surface-2); border: 1px solid var(--border); } .album-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; } .album-card { display: flex; flex-direction: column; padding: 0 !important; overflow: hidden; color: inherit; text-decoration: none; margin: 0; } .album-card:hover { text-decoration: none; border-color: var(--border-strong); } .album-card img, .album-card .album-none { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; background: var(--surface-2); } .album-meta { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px 14px; align-items: flex-start; } .up-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-bottom: 12px; } .up-list:empty { display: none; } .up-single .up-list { grid-template-columns: minmax(0, 320px); } .up-tile { position: relative; border-radius: 12px; overflow: hidden; border: 1px solid var(--border); background: var(--surface); display: flex; flex-direction: column; } .up-tile img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; } .up-single .up-tile img { aspect-ratio: 16 / 9; } .up-tile input[type=text] { margin: 6px; width: calc(100% - 12px); font-size: .8rem; padding: 6px 8px; } .up-tile .up-del { position: absolute; top: 6px; right: 6px; width: 28px; height: 28px; border-radius: 99px; border: 0; background: rgba(0,0,0,.6); color: #fff; font-size: 18px; line-height: 1; cursor: pointer; } .up-tile .up-cover-btn { position: absolute; top: 6px; left: 6px; height: 26px; padding: 0 9px; border-radius: 99px; border: 0; background: rgba(0,0,0,.55); color: #fff; font-size: .74rem; cursor: pointer; } .up-tile.is-cover { outline: 3px solid #f59e0b; outline-offset: -3px; } .up-tile.is-cover .up-cover-btn { background: #f59e0b; color: #1a1300; font-weight: 700; } .up-tile[draggable=true] { cursor: grab; } .up-tile.dragging { opacity: .45; } .up-drop { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 14px; border: 2px dashed var(--border-strong); border-radius: 14px; } .up-drop.over { border-color: var(--a1); background: var(--surface); } .up-status { min-height: 1.4em; margin-top: 8px; color: var(--muted); } .up-status.busy { color: var(--text); } .up-err { color: var(--r, #e11d48); } .msg { border-left: 4px solid transparent; } .msg.unread { border-left-color: var(--a1); } .msg-head { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: flex-start; } .msg-head form { display: inline; } .msg-subject { margin: 12px 0 4px; font-size: 1rem; } .msg-body { white-space: pre-wrap; margin: 8px 0 0; } .msg.unread .msg-head strong::after { content: "ใหม่"; margin-left: 8px; font-size: .7rem; padding: 2px 8px; border-radius: 99px; background: var(--a1); color: #fff; vertical-align: 2px; } .team-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 4px 18px; margin-bottom: 10px; } /* ---------- สถิติผู้เข้าชม ---------- */ .stat-card { display: flex; gap: 14px; align-items: center; } .stat-card > div { display: flex; flex-direction: column; } .stat-card strong { font-size: 1.5rem; line-height: 1.2; } .vchart { display: flex; align-items: flex-end; gap: 3px; height: 190px; padding: 6px 0 0; overflow-x: auto; } .vbar { flex: 1 1 0; min-width: 6px; display: flex; flex-direction: column; align-items: center; height: 100%; } .vbar > span { position: relative; flex: 1; width: 100%; } .vbar i { position: absolute; left: 0; right: 0; bottom: 0; border-radius: 4px 4px 0 0; } .vbar i.v { background: color-mix(in srgb, var(--a1) 30%, transparent); } .vbar i.u { background: linear-gradient(180deg, var(--a2), var(--a1)); left: 20%; right: 20%; } .vbar small { font-size: .62rem; color: var(--muted); height: 16px; white-space: nowrap; } .legend { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: -1px; } .legend.v { background: color-mix(in srgb, var(--a1) 30%, transparent); } .legend.u { background: linear-gradient(180deg, var(--a2), var(--a1)); } .hbars { display: grid; gap: 8px; } .hbar { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) auto 40px; gap: 10px; align-items: center; font-size: .88rem; } .hbar-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hbar-track { height: 8px; border-radius: 99px; background: var(--surface-2); overflow: hidden; } .hbar-track i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--a1), var(--a2)); } .hbar small { color: var(--muted); text-align: right; } /* ---------- เอกสารดาวน์โหลด · ภาษาอังกฤษ ---------- */ .file-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 46px; height: 26px; padding: 0 6px; border-radius: 7px; font-size: .72rem; font-weight: 800; letter-spacing: .03em; color: #fff; background: #64748b; } .file-badge.f-pdf { background: #dc2626; } .file-badge.f-docx, .file-badge.f-doc { background: #2563eb; } .file-badge.f-xlsx, .file-badge.f-xls { background: #059669; } .file-badge.f-pptx, .file-badge.f-ppt { background: #ea580c; } .file-badge.f-jpg, .file-badge.f-png { background: #7c3aed; } .fileup-cur { display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin-bottom: 12px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); flex-wrap: wrap; } .en-box > summary { cursor: pointer; list-style: none; } .en-box > summary::-webkit-details-marker { display: none; } .en-box > summary::before { content: "▸ "; } .en-box[open] > summary::before { content: "▾ "; } details.card.table-wrap > summary { cursor: pointer; padding: 12px 14px; } /* ---- ระบบสมาชิก ---- */ .hero-links { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; margin-top: 14px; font-size: .95rem; } .hero-links a { display: inline-flex; align-items: center; gap: 6px; } .hero-links svg { width: 18px; height: 18px; } fieldset.birth { border: 0; padding: 0; margin: 0 0 14px; display: grid; grid-template-columns: 1fr 1.6fr 1.2fr; gap: 8px; min-width: 0; } fieldset.birth legend { padding: 0; margin-bottom: 6px; font-weight: 600; font-size: .92rem; } fieldset.birth legend::before { display: none; } /* 4.1.1: แถบหน้าหัวข้อดูเหมือนช่องติ๊ก */ fieldset.birth select { width: 100%; min-width: 0; } /* 3.63: วันเกิดพิมพ์เอง (เต็มแถวเหนือช่องเลือก) · ปุ่มแสดงรหัสผ่าน */ fieldset.birth .birth-type, fieldset.birth .birth-hint { grid-column: 1 / -1; } fieldset.birth .birth-type { width: 100%; font-variant-numeric: tabular-nums; letter-spacing: .03em; } .pw-wrap { position: relative; display: block; } .pw-wrap input { width: 100%; padding-right: 64px; } .pw-eye { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); border: 0; background: transparent; color: var(--brand, #6d28d9); font: inherit; font-size: .85rem; font-weight: 600; padding: 6px 8px; border-radius: 8px; cursor: pointer; min-height: 0; box-shadow: none; } .pw-eye:hover { background: color-mix(in srgb, currentColor 10%, transparent); } /* 4.1.3: โหมดมืด — สีม่วงเข้มบนพื้นมืดอ่านยาก (2.57:1) → ใช้สีลิงก์ของโรงเรียน (ผ่านเกณฑ์ความต่างสี) หรือม่วงอ่อน */ html[data-mode="dark"] .pw-eye { color: var(--p-link, #c4b5fd); } html[data-mode="light"][data-home="premium"] .pw-eye { color: var(--p-link, #6d28d9); } .form-sec { display: flex; align-items: center; gap: 8px; font-size: 1rem; margin: 18px 0 10px; padding-top: 12px; border-top: 1px solid var(--border); } .form-sec:first-of-type { border-top: 0; padding-top: 0; margin-top: 4px; } .form-sec svg { width: 18px; height: 18px; } .code-box { display: inline-flex; flex-direction: column; gap: 2px; padding: 12px 20px; border-radius: 14px; border: 2px dashed var(--border); background: var(--surface); margin: 6px 0 16px; } .code-box small { color: var(--muted); } .code-box b { font-size: 1.6rem; letter-spacing: .06em; font-variant-numeric: tabular-nums; } .approved-card { max-width: 620px; margin: 24px auto; padding: 36px 28px; } .approved-card .stat-ic { margin: 0 auto 10px; } .child-list { display: grid; gap: 12px; } .child-card { display: flex; align-items: center; gap: 14px; padding: 16px 18px; margin: 0; } .child-card.on { outline: 2px solid color-mix(in srgb, var(--green, #16a34a) 55%, transparent); } .child-card .child-main { flex: 1; min-width: 0; display: flex; flex-direction: column; } .child-card form { margin: 0; } @media (max-width: 520px) { fieldset.birth { grid-template-columns: 1fr 1fr; } fieldset.birth select:last-child { grid-column: 1 / -1; } } /* ---------- ใบเสร็จตามแบบที่ออกแบบเอง (Osrs.Shared.Payments.ReceiptHtml) ---------- */ .rc-page{position:relative;background:#fff;color:#111;overflow:hidden;box-sizing:border-box;line-height:1.35} .rc-el{position:absolute;box-sizing:border-box;overflow:hidden;white-space:normal;word-break:break-word} .rc-table{width:100%;border-collapse:collapse;font-size:inherit} .rc-table th,.rc-table td{border:.2mm solid #555;padding:.8mm 1.5mm;text-align:left;vertical-align:top} .rc-table th{background:#f1f5f9;font-weight:700} .rc-table .r{text-align:right}.rc-table .c{text-align:center} .rc-table tfoot td{border-top:.4mm solid #333} .rc-wrap{overflow:auto;padding:18px;border-radius:18px;background:color-mix(in srgb,var(--text) 8%,transparent)} .rc-wrap .rc-page{margin:0 auto;box-shadow:0 12px 32px rgba(0,0,0,.22);zoom:var(--rc-fit,1)} /* 4.1.3: มือถือ — ใบเสร็จ A4 (794px) ย่อให้พอดีความกว้างจอ (app.js ตั้ง --rc-fit) · พิมพ์ยังเป็นขนาดจริง */ @media (max-width: 640px) { .rc-wrap { padding: 8px; border-radius: 12px; } } .rc-tools{display:flex;gap:10px;align-items:center;flex-wrap:wrap} .rc-tools select{width:auto;min-width:200px} @media print { body:has(.rc-wrap) .content, body:has(.rc-wrap) .shell, body:has(.rc-wrap) main { padding: 0 !important; margin: 0 !important; max-width: none !important; } .rc-wrap { padding: 0; background: none; overflow: visible; border-radius: 0; } .rc-wrap .rc-page { box-shadow: none; margin: 0; zoom: 1 !important; } } /* ---------- 3.8: จดจำเครื่อง · เข้าสู่ระบบด้วย QR · บัตรสมาชิก · สแกน QR · เช็กชื่อ ---------- */ label.check.remember { margin: 4px 0 14px; } label.check.remember small { display: block; font-size: .78rem; margin-top: 2px; line-height: 1.45; } .card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .card-head h2 { margin: 0; display: flex; align-items: center; gap: 8px; } small.block, .block { display: block; } .narrow-card { max-width: 560px; margin: 20px auto; } .qr-login summary { list-style: none; } .qr-login summary::-webkit-details-marker { display: none; } .qr-login-box { margin-top: 14px; display: grid; justify-items: center; gap: 10px; } .qr-login-code { width: 220px; height: 220px; padding: 14px; background: #fff; border-radius: 18px; display: grid; place-items: center; box-shadow: 0 10px 30px rgba(0,0,0,.25); position: relative; cursor: default; } .qr-login-code svg { width: 100%; height: 100%; } .qr-login-code.is-expired { cursor: pointer; } .qr-login-code.is-expired svg { opacity: .12; filter: blur(2px); } .qr-login-code.is-expired::after { content: "↻"; position: absolute; font-size: 3rem; color: #333; } .spinner { width: 34px; height: 34px; border-radius: 50%; border: 3px solid #ddd; border-top-color: #666; animation: spin .8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } [data-qr-status] { cursor: default; max-width: 300px; } .qr-scan { margin-top: 12px; } .qr-scan-actions { display: flex; gap: 10px; flex-wrap: wrap; } .qr-video { position: relative; width: 100%; max-width: 420px; aspect-ratio: 1; border-radius: 18px; overflow: hidden; background: #000; margin-bottom: 10px; cursor: pointer; } .qr-video video { width: 100%; height: 100%; object-fit: cover; } .qr-frame { position: absolute; inset: 18%; border: 3px solid rgba(255,255,255,.85); border-radius: 18px; box-shadow: 0 0 0 999px rgba(0,0,0,.35); } .device-list { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 8px; } .device-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; } .device-ic { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px; background: var(--surface); flex: none; } .device-text { flex: 1; min-width: 0; } .device-text small { display: block; margin-top: 2px; } .seg label { display: inline-flex; cursor: pointer; } .seg label input { position: absolute; opacity: 0; pointer-events: none; } .seg label span { padding: 6px 14px; border-radius: 7px; font: 600 .85rem/1.5 var(--font); color: var(--muted); } .seg label input:checked + span { background: var(--surface-3); color: var(--text); box-shadow: 0 1px 2px rgba(0,0,0,.2); } .att-manual { display: flex; gap: 10px; align-items: flex-end; margin-top: 14px; } .att-manual label { flex: 1; margin: 0; } .att-result { display: flex; gap: 16px; align-items: center; min-height: 160px; border-width: 2px; } .att-result.is-ok { border-color: var(--g); } .att-result.is-late { border-color: var(--o, #f59e0b); } .att-result.is-out { border-color: var(--b, #3b82f6); } .att-result.is-dup { border-color: var(--border-strong); } .att-result.is-bad { border-color: var(--r); } .att-photo { width: 96px; height: 120px; border-radius: 12px; object-fit: cover; flex: none; } .att-ph { display: grid; place-items: center; background: var(--surface); font-size: 2.4rem; font-weight: 700; } .att-text strong { font-size: 1.3rem; display: block; } .att-text small { color: var(--muted); } .att-text p { margin: 8px 0 0; font-weight: 600; } .att-result.is-bad .att-text p { color: var(--r); } .att-result.is-ok .att-text p { color: var(--g); } /* บัตรสมาชิก — ขนาดบัตรมาตรฐาน 85.6 × 54 มม. เมื่อพิมพ์ */ .card-sheet { display: flex; flex-wrap: wrap; gap: 18px; } .member-card { width: 428px; max-width: 100%; aspect-ratio: 85.6 / 54; border-radius: 18px; overflow: hidden; color: #111; background: #fff; box-shadow: 0 14px 40px rgba(0,0,0,.28); display: flex; flex-direction: column; } .mc-head { display: flex; align-items: center; gap: 10px; padding: 10px 14px; color: #fff; background: linear-gradient(120deg, var(--a1, #6d5efc), var(--a2, #2bb8ff)); } .mc-head .mc-logo { width: 30px; height: 30px; border-radius: 8px; background: #fff; padding: 2px; } .mc-head span { flex: 1; min-width: 0; line-height: 1.15; } .mc-head strong { display: block; font-size: .92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mc-head small { font-size: .68rem; opacity: .9; } .mc-head em { font-style: normal; font-size: .72rem; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: rgba(255,255,255,.22); } .mc-body { flex: 1; display: flex; gap: 12px; padding: 12px 14px; align-items: center; } .mc-photo { width: 78px; height: 98px; border-radius: 10px; overflow: hidden; background: #eef0f5; display: grid; place-items: center; flex: none; } .mc-photo img { width: 100%; height: 100%; object-fit: cover; } .mc-photo span { font-size: 2rem; font-weight: 700; color: #889; } .mc-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; } .mc-info strong { font-size: 1.02rem; line-height: 1.25; } .mc-info span { font-size: .78rem; color: #444; } .mc-qr { width: 118px; height: 118px; flex: none; } .mc-qr svg { width: 100%; height: 100%; } @media print { body:has(.card-sheet) .content, body:has(.card-sheet) main { padding: 0 !important; margin: 0 !important; } .card-sheet { gap: 6mm; } .member-card { width: 85.6mm; height: 54mm; aspect-ratio: auto; box-shadow: none; border: .2mm solid #bbb; border-radius: 3mm; -webkit-print-color-adjust: exact; print-color-adjust: exact; break-inside: avoid; } .mc-head { padding: 2mm 3mm; gap: 2mm; } .mc-head .mc-logo { width: 6mm; height: 6mm; } .mc-head strong { font-size: 8pt; } .mc-head small, .mc-head em { font-size: 6pt; } .mc-body { padding: 2.5mm 3mm; gap: 2.5mm; } .mc-photo { width: 16mm; height: 20mm; } .mc-info strong { font-size: 8.5pt; } .mc-info span { font-size: 6.5pt; } .mc-qr { width: 24mm; height: 24mm; } } @media (max-width: 560px) { .att-result { flex-direction: column; text-align: center; } .mc-qr { width: 96px; height: 96px; } .mc-photo { width: 62px; height: 80px; } } /* ---------- 3.9: ใบสมัครที่โรงเรียนกำหนดเอง ---------- */ fieldset.multi { border: 0; padding: 0; margin: 0 0 14px; } fieldset.multi legend { font-family: var(--font); font-weight: 600; font-size: .86rem; color: var(--text-2); margin-bottom: 8px; padding: 0; } fieldset.multi legend::before { display: none; } .multi-opts { display: flex; flex-wrap: wrap; gap: 6px 18px; } .form-grid label small.muted { display: block; font-weight: 400; margin-top: 4px; } .form-grid label.check { align-items: center; margin-bottom: 14px; } /* ========================================================================== 3.10: หน้าใบสมัคร 10 แบบ (.af.d-{key}) — แต่ละแบบกำหนดตัวแปรสีของหน้าเว็บใหม่ภายในกรอบใบสมัคร การ์ด ช่องกรอก ปุ่ม ป้ายสถานะ จึงเปลี่ยนตามโดยอัตโนมัติ + หัวใบสมัคร/หัวข้อ ของแต่ละแบบ ========================================================================== */ .af { position: relative; } .af-head { position: relative; overflow: hidden; border-radius: var(--radius); padding: 28px 30px 24px; margin-bottom: 20px; background: var(--grad); color: #fff; box-shadow: var(--shadow); } .af-brand { display: flex; align-items: center; gap: 12px; position: relative; z-index: 1; } .af-brand .af-logo { width: 46px; height: 46px; border-radius: 12px; background: #fff; padding: 3px; flex: none; } .af-brand b { display: block; font-size: 1rem; font-weight: 650; } .af-brand small { display: block; font-size: .78rem; opacity: .82; } .af-title { position: relative; z-index: 1; margin: 18px 0 4px; font-size: clamp(1.45rem, 3.2vw, 2.05rem); color: inherit; } .af-sub { position: relative; z-index: 1; margin: 0; opacity: .9; font-size: 1rem; } .af-meta { position: relative; z-index: 1; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 16px; } .af-appno { display: inline-flex; flex-direction: column; line-height: 1.2; padding: 6px 14px; border-radius: 12px; background: rgba(255, 255, 255, .16); border: 1px dashed rgba(255, 255, 255, .55); } .af-appno small { font-size: .7rem; opacity: .85; } .af-appno b { font-size: 1.1rem; letter-spacing: .06em; font-variant-numeric: tabular-nums; } .af-head .badge { background: rgba(255, 255, 255, .2); color: inherit; border-color: rgba(255, 255, 255, .35); } .af-no { display: none; font-style: normal; } .af-sec legend span { flex: 1; } .af .card.af-card { overflow: visible; } .bare-main { display: block; max-width: 1100px; margin: 0 auto; padding: 22px; } body.is-bare { min-height: 0; } /* ---------- แบบกระดาษ (พื้นของตัวเอง ไม่ขึ้นกับโหมดมืด/สว่าง) ---------- */ .af:not(.d-aurora) { color-scheme: light; color: var(--text); background: var(--af-page); border-radius: 26px; padding: 24px; --surface: #ffffff; --surface-2: #fafafa; --surface-3: rgba(15, 23, 42, .06); --solid: #ffffff; --input: #ffffff; --border: rgba(15, 23, 42, .1); --border-strong: rgba(15, 23, 42, .2); --text: #111827; --text-2: #374151; --muted: #6b7280; --g: #047857; --g-bg: rgba(16, 185, 129, .13); --r: #be123c; --r-bg: rgba(244, 63, 94, .11); --o: #b45309; --o-bg: rgba(245, 158, 11, .15); --b: #1d4ed8; --b-bg: rgba(59, 130, 246, .12); --n: #4b5168; --n-bg: rgba(100, 110, 140, .12); --shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 14px 34px -18px rgba(15, 23, 42, .22); --grad: linear-gradient(135deg, var(--a1), var(--a2)); } .af:not(.d-aurora) .card { backdrop-filter: none; -webkit-backdrop-filter: none; } .af:not(.d-aurora) select option { background: #fff; color: #111; } /* 2) ทางการ — แบบฟอร์มราชการ */ .af.d-classic { --af-page: #fbfaf6; --a1: #1f2937; --a2: #374151; --a1-rgb: 31, 41, 55; --a2-rgb: 154, 123, 47; --radius: 4px; --border: #1f2937; --border-strong: #1f2937; --shadow: none; --input: transparent; border: 1px solid #d6d1c4; border-radius: 6px; font-family: "TH Sarabun New", "Sarabun", "Leelawadee UI", var(--font); } .d-classic .af-head { background: #fff; color: #111; text-align: center; border: 1px solid #1f2937; border-bottom: 4px double #1f2937; box-shadow: none; } .d-classic .af-brand { flex-direction: column; gap: 6px; } .d-classic .af-brand .af-logo { width: 64px; height: 64px; border-radius: 50%; border: 1px solid #1f2937; } .d-classic .af-title { font-family: Georgia, "TH Sarabun New", serif; font-size: clamp(1.6rem, 3.4vw, 2.2rem); letter-spacing: .02em; } .d-classic .af-meta { justify-content: center; } .d-classic .af-appno { background: #fff; border: 1px solid #1f2937; color: #111; } .d-classic .af-head .badge { color: #111; border-color: #1f2937; background: #fff; } .d-classic .card { border: 1px solid #1f2937; } .d-classic .af-sec > legend { width: 100%; padding: 6px 10px; background: #1f2937; color: #fff; font-size: .98rem; border-radius: 2px; } .d-classic .af-sec > legend::before { display: none; } .d-classic .af-no { display: inline; font-weight: 700; } .d-classic .af-no::before { content: "ส่วนที่ "; } .d-classic .af-no::after { content: " ·"; } .d-classic input:not([type=checkbox]):not([type=file]), .d-classic select, .d-classic textarea { border: 0; border-bottom: 1px dotted #1f2937; border-radius: 0; background: transparent; padding-left: 2px; } .d-classic textarea { border: 1px dotted #1f2937; } .d-classic input:focus, .d-classic select:focus, .d-classic textarea:focus { box-shadow: none; border-bottom: 2px solid #9a7b2f; background: #fffdf5; } .d-classic .btn { box-shadow: none; border-radius: 3px; } /* 3) มินิมอล */ .af.d-minimal { --af-page: #ffffff; --a1: #111827; --a2: #4b5563; --a1-rgb: 17, 24, 39; --a2-rgb: 107, 114, 128; --radius: 16px; --input: #f4f4f5; --border: transparent; --border-strong: #e5e7eb; --shadow: none; border: 1px solid #ececec; } .d-minimal .af-head { background: transparent; color: #111; padding: 18px 6px 22px; border-bottom: 1px solid #e5e7eb; border-radius: 0; box-shadow: none; } .d-minimal .af-brand .af-logo { background: #f4f4f5; } .d-minimal .af-title { font-size: clamp(1.8rem, 4.2vw, 2.6rem); font-weight: 750; letter-spacing: -.03em; } .d-minimal .af-sub { color: #6b7280; } .d-minimal .af-appno { background: #f4f4f5; border: 0; color: #111; } .d-minimal .af-head .badge { color: #374151; background: #f4f4f5; border-color: transparent; } .d-minimal .card { border: 0; padding: 18px 6px; border-top: 1px solid #ececec; border-radius: 0; } .d-minimal .af-sec > legend { font-size: .78rem; text-transform: uppercase; letter-spacing: .14em; color: #6b7280; } .d-minimal .af-sec > legend::before { display: none; } .d-minimal .af-no { display: inline; color: #111; font-weight: 700; } .d-minimal .af-no::before { content: "0"; } .d-minimal input:focus, .d-minimal select:focus, .d-minimal textarea:focus { background: #fff; border-color: #111; box-shadow: 0 0 0 3px rgba(17, 24, 39, .08); } /* 4) กรมท่า-ทอง */ .af.d-navy { --af-page: #f4f6fb; --a1: #14284b; --a2: #1e3a6e; --a1-rgb: 20, 40, 75; --a2-rgb: 201, 162, 39; --radius: 10px; } .d-navy .af-head { background: linear-gradient(135deg, #0f1f3d, #1e3a6e); border-bottom: 5px solid #c9a227; } .d-navy .af-head::after { content: ""; position: absolute; right: -60px; top: -60px; width: 220px; height: 220px; border-radius: 50%; border: 18px solid rgba(201, 162, 39, .18); } .d-navy .af-brand .af-logo { border: 2px solid #c9a227; } .d-navy .af-sub { color: #f1d98a; opacity: 1; } .d-navy .af-appno { border-color: #c9a227; } .d-navy .card { border-top: 3px solid #c9a227; } .d-navy .af-sec > legend { color: #14284b; } .d-navy .af-sec > legend::before { width: 12px; height: 12px; border-radius: 2px; background: #c9a227; transform: rotate(45deg); } .d-navy .btn:not(.btn-gray):not(.btn-ghost):not(.btn-outline) { color: #f8e7a8; } /* 5) เขียวธรรมชาติ */ .af.d-nature { --af-page: #f3faf5; --a1: #15803d; --a2: #65a30d; --a1-rgb: 21, 128, 61; --a2-rgb: 132, 204, 22; --radius: 20px; --border: rgba(21, 128, 61, .16); --border-strong: rgba(21, 128, 61, .3); --input: #fbfefb; } .d-nature .af-head { background: radial-gradient(circle at 92% 18%, rgba(255, 255, 255, .22) 0 70px, transparent 71px), radial-gradient(circle at 80% 110%, rgba(190, 242, 100, .35) 0 110px, transparent 111px), linear-gradient(135deg, #166534, #4d7c0f); } .d-nature .af-sec > legend { display: inline-flex; padding: 5px 14px; border-radius: 999px; background: #dcfce7; color: #166534; font-size: .95rem; } .d-nature .af-sec > legend::before { content: "🌿"; width: auto; height: auto; background: none; } /* 6) พาสเทลสดใส */ .af.d-pastel { --af-page: #fff7fb; --a1: #ec4899; --a2: #8b5cf6; --a1-rgb: 236, 72, 153; --a2-rgb: 139, 92, 246; --radius: 26px; --input: #fdf4ff; --border: #f5d0fe; --border-strong: #f0abfc; font-family: "Leelawadee UI", "Noto Sans Thai", var(--font); } .d-pastel .af-head { background: radial-gradient(#ffffff55 2px, transparent 2px) 0 0/18px 18px, linear-gradient(120deg, #f9a8d4, #c4b5fd 55%, #93c5fd); color: #4a044e; } .d-pastel .af-appno { background: #ffffffaa; border-color: #fff; } .d-pastel .af-head .badge { color: #4a044e; background: #ffffffaa; } .d-pastel .card { border: 2px solid #fce7f3; } .d-pastel .af-sec { padding: 16px 18px 4px; border-radius: 22px; margin-bottom: 16px; background: #fff7fd; } .d-pastel .af-sec:nth-of-type(4n+2) { background: #f5f3ff; } .d-pastel .af-sec:nth-of-type(4n+3) { background: #eff6ff; } .d-pastel .af-sec:nth-of-type(4n) { background: #fff7ed; } .d-pastel .af-sec > legend { padding: 4px 14px; border-radius: 999px; background: #fff; box-shadow: 0 4px 12px -6px rgba(236, 72, 153, .5); color: #be185d; } .d-pastel .af-sec > legend::before { content: "★"; width: auto; height: auto; background: none; color: #f472b6; } .d-pastel input, .d-pastel select, .d-pastel textarea { border-radius: 14px; } .d-pastel .btn { border-radius: 999px; } /* 7) ฟ้าทะเล */ .af.d-ocean { --af-page: #f0f7ff; --a1: #0369a1; --a2: #06b6d4; --a1-rgb: 3, 105, 161; --a2-rgb: 6, 182, 212; --radius: 18px; --border: rgba(3, 105, 161, .14); --border-strong: rgba(3, 105, 161, .28); --shadow: 0 1px 2px rgba(3, 105, 161, .05), 0 16px 36px -20px rgba(3, 105, 161, .45); } .d-ocean .af-head { padding-bottom: 54px; background: linear-gradient(160deg, #075985, #0284c7 55%, #22d3ee); } .d-ocean .af-head::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 46px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 60' preserveAspectRatio='none'%3E%3Cpath d='M0 30 C150 60 300 0 450 30 S750 60 900 30 1100 10 1200 30 V60 H0Z' fill='%23f0f7ff'/%3E%3Cpath d='M0 40 C200 10 350 60 600 38 S950 20 1200 44 V60 H0Z' fill='%23f0f7ff' opacity='.55'/%3E%3C/svg%3E") center/100% 100% no-repeat; } .d-ocean .af-sec > legend { color: #075985; } .d-ocean .af-sec > legend::before { width: 22px; height: 6px; border-radius: 6px; } /* 8) ชมพูซากุระ */ .af.d-sakura { --af-page: #fff5f7; --a1: #be185d; --a2: #f472b6; --a1-rgb: 190, 24, 93; --a2-rgb: 244, 114, 182; --radius: 18px; --input: #fffafb; --border: #fbcfe8; --border-strong: #f9a8d4; } .d-sakura .af-head { background: radial-gradient(circle at 88% 22%, #fbcfe8 0 26px, transparent 27px), radial-gradient(circle at 95% 60%, #fce7f3 0 40px, transparent 41px), radial-gradient(circle at 78% 85%, #fdf2f8 0 18px, transparent 19px), #fff; color: #831843; border: 1px solid #fbcfe8; } .d-sakura .af-title { color: #be185d; } .d-sakura .af-appno { background: #fdf2f8; border-color: #f9a8d4; color: #831843; } .d-sakura .af-head .badge { color: #9d174d; background: #fdf2f8; border-color: #fbcfe8; } .d-sakura .af-sec > legend { color: #9d174d; } .d-sakura .af-sec > legend::before { content: "✿"; width: auto; height: auto; background: none; color: #f472b6; font-size: 1.2rem; } /* 9) ดำ-ทอง หรูหรา */ .af.d-luxe { color-scheme: dark; --af-page: #0e0d0b; --a1: #b8902a; --a2: #f5e6b8; --a1-rgb: 184, 144, 42; --a2-rgb: 212, 175, 55; --radius: 8px; --surface: #17150f; --surface-2: #1d1a13; --surface-3: rgba(245, 230, 184, .08); --solid: #17150f; --input: #1d1a13; --border: rgba(212, 175, 55, .22); --border-strong: rgba(212, 175, 55, .45); --text: #f5ecd6; --text-2: #e6d9b8; --muted: #a8997a; --shadow: 0 18px 40px -22px rgba(0, 0, 0, .9); border: 1px solid rgba(212, 175, 55, .3); } .af.d-luxe select option { background: #17150f; color: #f5ecd6; } .d-luxe .af-head { background: linear-gradient(180deg, #16130c, #0e0d0b); border: 1px solid rgba(212, 175, 55, .45); outline: 1px solid rgba(212, 175, 55, .2); outline-offset: 5px; text-align: center; color: #f5ecd6; } .d-luxe .af-brand { justify-content: center; } .d-luxe .af-brand .af-logo { background: #0e0d0b; border: 1px solid #d4af37; } .d-luxe .af-title { font-family: Georgia, "Leelawadee UI", serif; letter-spacing: .04em; background: linear-gradient(90deg, #b8902a, #f5e6b8, #b8902a); -webkit-background-clip: text; background-clip: text; color: transparent; } .d-luxe .af-meta { justify-content: center; } .d-luxe .af-appno { border-color: rgba(212, 175, 55, .6); background: transparent; } .d-luxe .af-sec > legend { color: #d4af37; text-transform: uppercase; letter-spacing: .12em; font-size: .9rem; } .d-luxe .af-sec > legend::before { width: 26px; height: 1px; border-radius: 0; background: #d4af37; } .d-luxe .btn:not(.btn-gray):not(.btn-ghost):not(.btn-outline) { color: #1a1408; } /* 10) ขั้นตอน (ไทม์ไลน์) */ .af.d-steps { --af-page: #f7f5ff; --a1: #6d28d9; --a2: #a78bfa; --a1-rgb: 109, 40, 217; --a2-rgb: 167, 139, 250; --radius: 16px; } .d-steps .af-head { background: linear-gradient(135deg, #4c1d95, #7c3aed); } .d-steps .af-sec { position: relative; padding-left: 52px; margin-bottom: 8px; } .d-steps .af-sec::before { content: ""; position: absolute; left: 17px; top: 38px; bottom: -6px; width: 2px; background: linear-gradient(#c4b5fd, transparent); } .d-steps .af-sec:last-of-type::before { display: none; } .d-steps .af-sec > legend::before { display: none; } .d-steps .af-no { display: grid; place-items: center; position: absolute; left: 0; top: -2px; width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, #6d28d9, #a78bfa); color: #fff; font-weight: 700; box-shadow: 0 6px 14px -6px rgba(109, 40, 217, .8); } .d-steps .af-sec > legend { color: #4c1d95; min-height: 32px; } /* ---------- หน้ารวมแบบ (/apply/designs) ---------- */ .dz-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 20px; } .dz-card { display: block; color: var(--text); text-decoration: none; border-radius: 18px; border: 1px solid var(--border); background: var(--surface); overflow: hidden; transition: transform .2s var(--ease), box-shadow .2s; } .dz-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); text-decoration: none; } .dz-card.on { outline: 3px solid var(--a2); } .dz-frame { width: 330px; height: 400px; margin: 0 auto; overflow: hidden; position: relative; } .dz-frame iframe { width: 1100px; height: 1333px; border: 0; transform: scale(.3); transform-origin: 0 0; pointer-events: none; background: transparent; } .dz-info { display: block; padding: 12px 16px 16px; border-top: 1px solid var(--border); } .dz-info strong { font-size: 1rem; } .dz-info small { display: block; color: var(--muted); margin-top: 3px; } .dz-swatch { float: right; display: inline-flex; gap: 3px; margin-top: 3px; } .dz-swatch i { width: 16px; height: 16px; border-radius: 5px; border: 1px solid rgba(0, 0, 0, .15); } @media (max-width: 640px) { .af:not(.d-aurora) { padding: 12px; border-radius: 18px; } .af-head { padding: 22px 18px 20px; } .d-steps .af-sec { padding-left: 44px; } } /* หน้าที่ออกแบบเอง (ตัวออกแบบ → หน้าระบบนักเรียน/ครู): ส่วนที่ออกแบบอยู่บน/ล่าง · ปุ่มภาษา/ธีมใต้ส่วนบน */ .has-design .s-embed{position:relative;z-index:1} .design-prefs{display:flex;justify-content:flex-end;align-items:center;gap:8px;padding:10px 20px 0;position:relative;z-index:2} .content>.s-embed-top{margin:0 0 18px} .content>.s-embed-bottom{margin:18px 0 0} /* ---------- หน้าแรกนักเรียนปัจจุบัน · ครูประจำชั้น (3.22) ---------- */ .home-grid { align-items: start; } .home-id .member-card { width: 100%; } .hr-teacher { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; } .hr-teacher + .hr-teacher { border-top: 1px solid var(--border); } .hr-teacher .avatar { flex: none; } .hr-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; } .hr-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; } .hr-actions:empty { display: none; } .hr-shop { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .hr-shop > div { flex: 1; min-width: 180px; } .chat { display: flex; flex-direction: column; gap: 10px; max-height: 460px; overflow-y: auto; padding: 14px 4px; margin: 10px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .msg { max-width: 78%; align-self: flex-start; } .msg.me { align-self: flex-end; text-align: right; } .msg-body { display: inline-block; text-align: left; padding: 9px 13px; border-radius: 14px 14px 14px 4px; background: var(--surface-2); border: 1px solid var(--border); white-space: normal; overflow-wrap: anywhere; } .msg.me .msg-body { border-radius: 14px 14px 4px 14px; background: var(--grad); color: #fff; border-color: transparent; } .msg-meta { display: block; margin-top: 3px; color: var(--muted); font-size: .74rem; } .chat-form { display: flex; gap: 10px; align-items: flex-end; } .chat-form textarea { flex: 1; min-height: 64px; } @media (max-width: 760px) { .msg { max-width: 92%; } .chat-form { flex-direction: column; align-items: stretch; } .home-id .member-card { aspect-ratio: auto; } } /* ---------- กล่อง QR พร้อมเพย์แบบ CAA POS (3.25) ---------- */ .qr-pay { text-align: center; margin: 4px 0 16px; } .qr-tap { position: relative; display: inline-block; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 16px; transition: transform .2s; } .qr-tap:active { transform: scale(.97); } .plan-pick { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-end; } .plan-pick label { flex: 1 1 180px; margin: 0; } .plan-pick input, .plan-pick select { display: block; width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; } .plan-pick input[type=date] { -webkit-appearance: none; appearance: none; text-align: left; min-height: 44px; } .plan-pick input[type=date]::-webkit-date-and-time-value { text-align: left; } .plan-signs > div { min-width: 0; overflow-wrap: anywhere; } @media (max-width: 560px) { .plan-contract .plan-signs { grid-template-columns: 1fr; gap: 28px; } } .plan-contract h3 { margin-top: 18px; } .plan-terms { padding-left: 22px; line-height: 1.75; } .plan-sign-ok { color: var(--ok, #16a34a); font-weight: 600; } .plan-signs { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 36px; text-align: center; line-height: 2; } .plan-accept { margin-top: 14px; } @media print { .plan-contract { font-size: 13pt; } .plan-contract .badge { border: 1px solid #999; } } dialog.popup { width: min(420px, calc(100vw - 32px)); max-height: calc(100vh - 48px); overflow: auto; border: 0; border-radius: 22px; padding: 26px 22px 20px; background: var(--solid); color: var(--text); border: 1px solid var(--border-strong); box-shadow: 0 24px 60px rgba(0,0,0,.45); text-align: center; font-family: var(--font); } dialog.popup::backdrop { background: rgba(15, 12, 30, .55); backdrop-filter: blur(3px); } dialog.popup[open] { animation: popup-in .22s ease-out; } @keyframes popup-in { from { opacity: 0; transform: translateY(12px) scale(.96); } to { opacity: 1; transform: none; } } dialog.popup h2 { margin: 10px 0 8px; font-size: 1.25rem; } dialog.popup .popup-body { text-align: left; line-height: 1.65; margin-bottom: 16px; } dialog.popup .popup-body p { margin: 0 0 8px; } dialog.popup .popup-ic { display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; color: #fff; } dialog.popup .popup-ic .ic, dialog.popup .popup-ic svg { width: 34px; height: 34px; } dialog.popup.popup-success .popup-ic { background: #16a34a; } dialog.popup.popup-warning .popup-ic { background: #f59e0b; } dialog.popup.popup-danger .popup-ic { background: #e11d48; } dialog.popup.popup-info .popup-ic { background: #6366f1; } .push-prompt { border-color: color-mix(in srgb, var(--a1, #8b5cf6) 45%, transparent); } .push-prompt-row { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 6px; } .push-prompt-ic { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; color: #fff; background: var(--grad, #8b5cf6); } .push-prompt-ic svg { width: 24px; height: 24px; } .push-prompt .pwa-push-actions { display: flex; flex-wrap: wrap; gap: 8px; } .popup-spin { width: 56px; height: 56px; margin: 4px auto 0; border-radius: 50%; border: 5px solid color-mix(in srgb, var(--a1, #8b5cf6) 22%, transparent); border-top-color: var(--a1, #8b5cf6); animation: popup-spin .9s linear infinite; } @keyframes popup-spin { to { transform: rotate(360deg); } } dialog.popup-wait .popup-body { text-align: center; margin-bottom: 4px; } .sig-field { margin: 4px 0 14px; } .sig-pad { position: relative; margin-top: 6px; border: 2px dashed var(--border-strong); border-radius: 14px; overflow: hidden; background: #fff; } .sig-pad canvas { display: block; width: 100%; height: auto; aspect-ratio: 700 / 240; touch-action: none; cursor: crosshair; } .sig-hint { position: absolute; inset: 0; display: grid; place-items: center; color: #9aa0b8; font-size: 1.1rem; pointer-events: none; } .sig-hint[hidden] { display: none; } .plan-sig { max-width: 220px; height: auto; background: #fff; border-radius: 8px; margin-bottom: -6px; } /* 3.36.16: แถบเมนูร้านค้าที่แอปวาดเอง (ลอย · ลงถึงใกล้ขอบจอบน iPhone เหมือนหน้าเว็บนักเรียน) */ .shop-tabs { position: fixed; z-index: 60; left: 50%; transform: translateX(-50%); width: calc(100% - 24px); max-width: 640px; box-sizing: border-box; bottom: max(10px, calc(max(10px, calc(env(safe-area-inset-bottom) - 12px)) - var(--ios-gap, 0px))); display: flex; justify-content: space-around; align-items: flex-end; gap: 2px; padding: 8px 4px; border-radius: 26px; background: var(--st-bg, rgba(255, 255, 255, .92)); border: 1px solid rgba(120, 120, 140, .14); box-shadow: 0 14px 30px rgba(0, 0, 0, .16); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); font-family: var(--font); } .shop-tabs[hidden] { display: none; } .shop-tabs button { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 2px 0; border: 0; background: none; color: #8a8fa6; font: 600 .7rem/1.2 var(--font); cursor: pointer; -webkit-tap-highlight-color: transparent; } .shop-tabs .st-ic { position: relative; display: grid; place-items: center; width: 52px; height: 32px; border-radius: 16px; transition: background .3s; } .shop-tabs .st-ic svg { width: 22px; height: 22px; } .shop-tabs button.on { color: var(--st-ac, #6d5df6); font-weight: 700; } .shop-tabs button.on .st-ic { background: color-mix(in srgb, var(--st-ac, #6d5df6) 16%, transparent); } .shop-tabs .st-badge { position: absolute; top: -4px; right: 4px; min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box; border-radius: 9px; background: var(--st-ac, #6d5df6); color: #fff; font: 700 11px/18px var(--font); text-align: center; } /* 3.36.16: ประกาศในเว็บนักเรียน */ .news-list { display: grid; gap: 10px; } .news-item { display: flex; gap: 12px; align-items: flex-start; padding: 10px; border-radius: 14px; color: inherit; text-decoration: none; background: var(--input); } .news-item:hover { text-decoration: none; } .news-item img, .news-ic { flex: none; width: 64px; height: 64px; border-radius: 12px; object-fit: cover; } .news-ic { display: grid; place-items: center; color: #fff; background: var(--grad); } .news-ic svg { width: 28px; height: 28px; } .news-txt { min-width: 0; display: grid; gap: 2px; } .news-ex { color: var(--muted); font-size: .9rem; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .news-cover { width: 100%; max-height: 360px; object-fit: cover; border-radius: 14px; margin-bottom: 12px; } .news-body { line-height: 1.75; overflow-wrap: anywhere; } .news-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; margin-top: 12px; } .news-photos img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; } .wallet-how { margin: 8px 0 0; padding-left: 20px; line-height: 1.7; } .qr-need { padding: 14px; border: 2px dashed var(--line, #cbd5e1); border-radius: 14px; text-align: center; font-weight: 600; } .qr-img img { display: block; width: 232px; height: 232px; image-rendering: pixelated; background: #fff; padding: 10px; border-radius: 16px; box-shadow: var(--shadow); } .qr-badge { position: absolute; left: 50%; bottom: -12px; transform: translateX(-50%); white-space: nowrap; padding: 4px 13px; border-radius: 99px; font-size: .76rem; font-weight: 600; color: #fff; background: var(--grad); box-shadow: 0 6px 16px -6px rgba(0,0,0,.5); } .qr-line { margin: 10px 0 0; } .qr-pay .qr-line:first-of-type { margin-top: 22px; } .qr-line b { font-size: 1.05rem; } .qr-btns { display: flex; flex-wrap: wrap; gap: 7px; justify-content: center; margin-top: 10px; } .qr-btns .chip { cursor: pointer; font: inherit; font-size: .82rem; color: var(--text); } .qr-steps { text-align: left; margin: 12px auto 0; padding: 10px 14px 10px 32px; max-width: 380px; font-size: .82rem; color: var(--text-2); background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; } .qr-steps li { margin: 2px 0; } .qr-msg { margin-top: 10px; font-size: .85rem; color: var(--g); } .qr-msg.bad { color: var(--r); } /* ---------- หน้าแรกนักเรียนปัจจุบัน: เหลือเฉพาะบัตร · 6 เมนู (3.25 · 3.27) ---------- */ .home-card { display: block; width: 420px; max-width: 100%; margin: 0 0 20px; color: inherit; text-decoration: none; border-radius: 18px; transition: transform .2s; } .home-card:hover { text-decoration: none; transform: translateY(-2px); } .home-card .member-card { width: 100%; box-shadow: 0 18px 40px -18px rgba(0,0,0,.6); } .home-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } .stat .value.value-text { font-size: 1.1rem; line-height: 1.35; overflow-wrap: anywhere; } @media (max-width: 760px) { .home-card { width: 100%; } .home-card .member-card { aspect-ratio: auto; } .home-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ---------- ร้านค้าเต็มจอ: เหลือเฉพาะหน้าเว็บของร้าน CAA POS (3.27) ---------- */ body.is-bare:has(.shop-full) { overflow: hidden; background: #fff; } /* 3.36.18: แอปบนหน้าจอโฮมของ iPhone ให้พื้นที่เต็มจอ (896pt) เฉพาะหน้าที่เลื่อนได้ (หน้าเว็บนักเรียน: เมนูลงถึง ~22pt จากขอบ) หน้าที่ล็อกการเลื่อน (overflow:hidden · เอกสารสั้น) ได้แค่จอลบแถบเวลา (848pt) ของที่ fixed ถูกตัดที่เส้นนั้น (ตรวจจากหน้าต่างตรวจสอบ: หน้า 414×848 · ios-gap 48) → หน้าร้านบน iPhone (แอป) เป็นเอกสารที่เลื่อนได้ตั้งแต่โหลด (CSS ไม่รอสคริปต์) · กรอบร้านยังตรึงอยู่กับที่ · app.js ดึงกลับถ้าหน้าถูกเลื่อน */ @media (display-mode: standalone) { @supports (-webkit-touch-callout: none) { html:has(.shop-full), body.is-bare:has(.shop-full) { overflow: visible; overscroll-behavior: none; } body.is-bare:has(.shop-full) { min-height: calc(100lvh + 60px); } } } html.ios-app:has(.shop-full), html.ios-app body.is-bare:has(.shop-full) { overflow: visible; overscroll-behavior: none; } html.ios-app body.is-bare:has(.shop-full) { min-height: calc(100lvh + 60px); } .shop-full { position: fixed; inset: 0; z-index: 50; box-sizing: border-box; background: #fff; padding: env(safe-area-inset-top, 0px) 0 0; } /* แอปบน iPhone: ไม่ให้หน้าร้านอยู่ใต้แถบเวลา · ด้านล่างให้หน้าร้านลงถึงขอบจอ (3.28.1 ส่งความสูงแถบโฮมให้ร้านเว้นเอง) */ .shop-full iframe { display: block; width: 100%; height: 100%; border: 0; } /* 3.28.2: แอปบนหน้าจอโฮมของ iPhone บางรุ่นมีพื้นที่ใต้หน้าเว็บที่ inset:0 ลงไปไม่ถึง → ใช้ความสูงจอเต็ม (สีส่วนที่เหลือได้จากร้าน) */ /* 3.36.15: กรอบร้าน inset:0 (พื้นที่ที่แสดงผลได้) · ส่วนใต้กรอบเป็นสีพื้นร้าน (app.js รับ pos-colors) */ .shop-back { position: absolute; top: calc(env(safe-area-inset-top, 0px) + 10px); right: 10px; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: rgba(15, 18, 34, .55); backdrop-filter: blur(6px); box-shadow: 0 4px 14px rgba(0,0,0,.25); } .shop-back .ic { width: 18px; height: 18px; } .shop-back:hover { background: rgba(15, 18, 34, .75); text-decoration: none; } /* ========================================================================== หน้าตาแบบเดียว (3.92) — สีจาก PremiumUi.Css สีของสีหลักแทนตัวแปรธีมทั้งเว็บ · แถบปุ่มด้านล่าง .tabbar (ทุกหน้า บนจอ ≤ 1024px) ========================================================================== */ /* ---------- พื้นหน้า ---------- */ html[data-home] body { background: var(--h-bg) fixed; } html[data-home][data-mode="light"] .aurora i { opacity: .16; } html[data-home] .card { box-shadow: var(--h-tile-sh); } html[data-home] .mc-head { background: var(--h-card); } /* ---------- แถบปุ่มด้านล่าง (นักเรียนปัจจุบัน · จอ ≤ 1024px) ---------- */ .tabbar { display: none; } @media (max-width: 1024px) { body.has-tabbar .content { padding-bottom: calc(96px + env(safe-area-inset-bottom)); } .tabbar { display: flex; position: fixed; z-index: 70; left: 0; right: 0; bottom: 0; justify-content: space-around; align-items: flex-end; gap: 2px; padding: 8px 4px max(10px, calc(env(safe-area-inset-bottom) - var(--ios-gap, 0px))); background: var(--h-tab-bg, color-mix(in srgb, var(--bg-2) 94%, transparent)); border-top: 1px solid var(--border); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); } .tabbar a { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 3px; color: var(--h-tab-off, var(--muted)); font-size: .7rem; line-height: 1.2; text-decoration: none; } .tabbar a:hover { text-decoration: none; } .tabbar .tb-ic { width: 52px; height: 32px; border-radius: 16px; display: grid; place-items: center; transition: background .3s, box-shadow .3s; } .tabbar .tb-ic .ic { width: 22px; height: 22px; } .tabbar a.on { color: var(--h-tab-on, var(--a1)); font-weight: 700; } .tabbar a.on .tb-ic { background: var(--h-bub, rgba(var(--a1-rgb), .16)); color: var(--h-tab-ic, var(--h-tab-on, var(--a1))); } .tabbar .tb-fab { flex: none; align-self: flex-start; width: 62px; height: 62px; margin: -34px 4px 0; border-radius: 50%; display: grid; place-items: center; background: var(--h-fab, var(--grad)); color: var(--h-fab-ink, #fff); box-shadow: 0 10px 24px rgba(0,0,0,.22), 0 0 0 5px var(--h-tab-bg, var(--bg-2)); } .tabbar .tb-fab .ic { width: 27px; height: 27px; } } /* ---------- เมนู ฉัน · หน้าตาหน้าหลัก ---------- */ .me-head { display: flex; align-items: center; gap: 14px; padding: 16px 18px; margin-bottom: 6px; } .me-head .avatar { width: 52px; height: 52px; font-size: 1.3rem; flex: none; } .me-head span:last-child { display: flex; flex-direction: column; min-width: 0; } .me-head strong { font-size: 1.1rem; } .me-head small { color: var(--muted); } .me-group { font-size: .82rem; font-weight: 600; color: var(--muted); margin: 18px 4px 8px; } .me-list { padding: 4px 14px; } .me-list > a, .me-list form button { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 2px; border: 0; border-top: 1px solid var(--border); background: none; color: var(--text); font: inherit; text-align: left; text-decoration: none; cursor: pointer; } .me-list > :first-child, .me-list > :first-child button { border-top: 0; } .me-list form { margin: 0; } .me-list > a:hover, .me-list form button:hover { text-decoration: none; color: var(--a1); } .me-list .mi { width: 38px; height: 38px; flex: none; border-radius: 12px; display: grid; place-items: center; background: rgba(var(--a1-rgb), .12); color: var(--a1); } .me-list .mi .ic { width: 20px; height: 20px; } .me-list .mt { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.35; } .me-list .mt small { color: var(--muted); font-size: .78rem; } .me-list .ic.chev { width: 16px; height: 16px; color: var(--muted); flex: none; } .me-last { margin-top: 18px; } /* ---------- บัตรประจำตัวนักเรียน 10 แบบ (3.30 · Osrs.Shared.StudentCards) ---------- ขนาดทุกอย่างเป็น cqw ของบัตร (ย่อ/ขยายตามความกว้าง) · แตะ = พลิก 3D ไปด้านหลัง (app.js data-flip-card) · พิมพ์ = ด้านหน้า + ด้านหลังเรียงกัน */ .sc { --sc-bg: #fff; --sc-ink: #1f2430; --sc-head: #1D4E9E; --sc-accent: #1D4E9E; --sc-label: #5b6170; --sc-photo: #fff; --sc-line: rgba(0,0,0,.08); --sc-shadow: 0 18px 40px -18px rgba(0,0,0,.55); --sc-radius: 4.6cqw; container-type: inline-size; width: 100%; max-width: 460px; perspective: 1400px; cursor: pointer; outline: none; -webkit-tap-highlight-color: transparent; text-align: left; } .home-card.home-sc { width: 460px; max-width: 100%; } .home-card.home-sc:hover { transform: none; } .sc:focus-visible .sc-face { outline: 3px solid var(--a2, #7B4FE8); outline-offset: 3px; } .sc-inner { display: grid; transition: transform .7s ease-in-out; transform-style: preserve-3d; -webkit-transform-style: preserve-3d; } /* 3.32.2: Safari (iPhone) ไม่ซ่อนด้านหลังของชิ้นส่วนในบัตร (ข้อความด้านหน้าทะลุมาแบบกลับด้าน) → สลับซ่อน/แสดงเองตอนบัตรหมุนครึ่งทาง (ตั้งฉาก) */ .sc-face { transition: visibility 0s linear .35s; } .sc-back, .sc.flipped .sc-front { visibility: hidden; } .sc.flipped .sc-back { visibility: visible; } .sc-face * { backface-visibility: hidden; -webkit-backface-visibility: hidden; } .sc.flipped .sc-inner { transform: rotateY(180deg); } .sc-face { grid-area: 1 / 1; align-self: stretch; justify-self: stretch; width: 100%; aspect-ratio: 85.6 / 54; /* 3.32.1: Safari (iPhone) ไม่ยืดช่องที่มี aspect-ratio เอง → บัตรแคบกว่าจอ */ position: relative; overflow: hidden; border-radius: var(--sc-radius); background: var(--sc-bg); color: var(--sc-ink); box-shadow: var(--sc-shadow); backface-visibility: hidden; -webkit-backface-visibility: hidden; padding: 3.6cqw 4.2cqw 3.2cqw; line-height: 1.25; } .sc-back { transform: rotateY(180deg); } .sc-face > * { position: relative; z-index: 1; } .sc-face > .sc-bg { position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center; opacity: .2; } /* ด้านหน้า */ .sc-front { display: grid; grid-template-columns: 19cqw 1fr 22cqw; grid-template-rows: auto 1fr auto; column-gap: 2.6cqw; row-gap: 1.6cqw; } .sc-head { grid-column: 1 / -1; display: flex; align-items: center; gap: 2.4cqw; min-width: 0; } .sc-logo { width: 10.5cqw; height: 10.5cqw; object-fit: contain; flex: none; border-radius: 2cqw; } .sc-name { display: flex; flex-direction: column; min-width: 0; } .sc-name strong { font-size: 4.6cqw; line-height: 1.15; color: var(--sc-head); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sc-name span { font-size: 3.5cqw; font-weight: 700; margin-top: .4cqw; } .sc-body { display: contents; } .sc-photo { grid-column: 1; grid-row: 2; align-self: start; width: 19cqw; aspect-ratio: 3 / 4; border-radius: 2cqw; overflow: hidden; background: #e9edf4; border: .7cqw solid var(--sc-photo); display: grid; place-items: center; box-shadow: 0 1cqw 2.4cqw rgba(0,0,0,.14); } .sc-photo img { width: 100%; height: 100%; object-fit: cover; } .sc-photo span { font-size: 8cqw; font-weight: 700; color: #8a90a0; } .sc-fields { grid-column: 2; grid-row: 2; margin: 0; display: flex; flex-direction: column; gap: .8cqw; min-width: 0; } .sc-row { display: flex; flex-direction: column; min-width: 0; } .sc-row dt { font-size: 2.3cqw; color: var(--sc-label); line-height: 1.15; } .sc-row dd { margin: 0; font-size: 3.15cqw; font-weight: 700; line-height: 1.2; overflow-wrap: anywhere; } .sc-qr { grid-column: 3; grid-row: 2; align-self: start; justify-self: center; width: 18cqw; aspect-ratio: 1; padding: 1.1cqw; background: #fff; border-radius: 1.8cqw; box-shadow: 0 0 0 .25cqw var(--sc-line); } .sc-qr svg { display: block; width: 100%; height: 100%; } .sc-sign { grid-column: 3; grid-row: 3; display: flex; flex-direction: column; align-items: center; text-align: center; min-width: 0; align-self: end; } .sc-sign img { max-width: 100%; height: 6cqw; object-fit: contain; } .sc-sign span { font-size: 2.3cqw; font-weight: 700; line-height: 1.2; } .sc-sign small { font-size: 1.9cqw; line-height: 1.15; color: var(--sc-label); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .sc-foot { grid-column: 1 / 3; grid-row: 3; align-self: end; display: flex; flex-wrap: wrap; gap: .6cqw 3.4cqw; font-size: 2.4cqw; color: var(--sc-label); } .sc-foot b { color: var(--sc-ink); } /* ด้านหลัง */ .sc-back { display: flex; flex-direction: column; gap: 1.6cqw; } .sc-bhead { display: flex; align-items: center; gap: 2.4cqw; } .sc-bhead strong { font-size: 4.4cqw; color: var(--sc-head); line-height: 1.15; } .sc-addr { display: flex; flex-direction: column; gap: .3cqw; font-size: 2.7cqw; padding-left: 12.9cqw; } .sc-philo { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 1cqw; padding: 0 4cqw; } .sc-philo strong { font-size: 3.6cqw; color: var(--sc-accent); } .sc-philo span { font-size: 3.1cqw; font-weight: 600; line-height: 1.35; white-space: pre-line; } .sc-hint { margin-top: auto; align-self: flex-end; font-size: 2.1cqw; color: var(--sc-label); } /* 1 ฟ้าคลาสสิก: แบบบัตรเดิม — พื้นขาวฟ้า แถบน้ำเงินด้านล่าง */ .sc-classic { --sc-bg: linear-gradient(180deg, #fff 0%, #f2f7fd 70%, #e4eefa 100%); } .sc-classic .sc-face::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.6cqw; z-index: 0; background: linear-gradient(90deg, #1D4E9E, #3b82c4); } /* 2 กรมท่า-ทอง: หัวบัตรกรมท่า ตัวอักษรทอง */ .sc-navy { --sc-bg: #FBF8EF; --sc-head: #F3D27A; --sc-accent: #13254A; --sc-photo: #D4A72C; --sc-label: #6b6553; } .sc-navy .sc-head, .sc-navy .sc-bhead { margin: -3.6cqw -4.2cqw 0; padding: 2.4cqw 4.2cqw; background: linear-gradient(120deg, #13254A, #23407a); color: #fff; border-bottom: .6cqw solid #D4A72C; } .sc-navy .sc-addr { margin-top: .6cqw; } /* 3 ม่วงพาสเทล */ .sc-lilac { --sc-bg: linear-gradient(135deg, #FBF8FF 0%, #EFE6FF 60%, #E4D6FF 100%); --sc-head: #5B2FC9; --sc-accent: #6D3FE0; --sc-label: #7a6b9c; --sc-ink: #2a1f47; } /* 4 กระจกฝ้า 3D */ .sc-glass { --sc-bg: linear-gradient(135deg, rgba(255,255,255,.62), rgba(255,255,255,.22)), linear-gradient(135deg, #B9A2FF 0%, #E3B8FF 50%, #FFC6E6 100%); --sc-head: #3d1f9e; --sc-accent: #5B33C4; --sc-label: #5d4e86; --sc-ink: #241845; --sc-photo: rgba(255,255,255,.9); --sc-shadow: inset 0 0 0 1px rgba(255,255,255,.75), inset 0 2cqw 4cqw rgba(255,255,255,.35), 0 22px 44px -16px rgba(91,51,196,.55); } .sc-glass .sc-face::before { content: ""; position: absolute; inset: -40% -10% auto auto; width: 70%; height: 90%; z-index: 0; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.55), transparent 65%); } /* 5 ดินน้ำมัน 3D */ .sc-clay { --sc-bg: #F4EEFF; --sc-head: #5B2FC9; --sc-accent: #6D3FE0; --sc-label: #7d6fa3; --sc-ink: #2a1f47; --sc-photo: #fff; --sc-radius: 6cqw; --sc-shadow: inset 1.6cqw 1.6cqw 3.4cqw rgba(255,255,255,.95), inset -2cqw -2cqw 4cqw rgba(124,86,214,.2), 0 20px 36px -14px rgba(109,63,224,.5); } .sc-clay .sc-photo, .sc-clay .sc-qr { border-radius: 3cqw; box-shadow: .8cqw .8cqw 2cqw rgba(124,86,214,.25), -.6cqw -.6cqw 1.6cqw rgba(255,255,255,.9); } .sc-clay .sc-logo { border-radius: 3cqw; } /* 6 เขียวมินต์: หัวบัตรเขียว */ .sc-mint { --sc-bg: #fff; --sc-head: #fff; --sc-accent: #0B7F63; --sc-label: #557a6e; --sc-photo: #CFEFE3; } .sc-mint .sc-head, .sc-mint .sc-bhead { margin: -3.6cqw -4.2cqw 0; padding: 2.4cqw 4.2cqw; background: linear-gradient(120deg, #0F9D7A, #34c49a); color: #fff; } .sc-mint .sc-addr { margin-top: .6cqw; } .sc-mint .sc-face::after { content: ""; position: absolute; right: -14cqw; bottom: -18cqw; width: 46cqw; height: 46cqw; z-index: 0; border-radius: 50%; background: rgba(15,157,122,.08); } /* 7 ส้มคอรัล */ .sc-coral { --sc-bg: linear-gradient(135deg, #FFF4EF 0%, #FFE1D8 55%, #FFD3E0 100%); --sc-head: #C2361F; --sc-accent: #D9452F; --sc-label: #93605a; --sc-ink: #3b1d18; } /* 8 ม่วงมืดเรืองแสง */ .sc-night { --sc-bg: radial-gradient(120% 90% at 85% 0%, #3a2378 0%, #1b1236 45%, #120c25 100%); --sc-ink: #f3efff; --sc-head: #fff; --sc-accent: #C9B3FF; --sc-label: #b3a6d9; --sc-photo: #9B6BFF; --sc-line: rgba(201,179,255,.4); --sc-shadow: 0 0 0 1px rgba(155,107,255,.55), 0 0 26px rgba(123,79,232,.45), 0 22px 44px -16px rgba(0,0,0,.7); } .sc-night .sc-name strong { text-shadow: 0 0 2cqw rgba(201,179,255,.6); } .sc-night .sc-face > .sc-bg { opacity: .12; } /* 9 โฮโลแกรม */ .sc-holo { --sc-bg: linear-gradient(120deg, #FBE1FF, #DCE8FF, #D9FFF2, #FFF4D6, #FBE1FF); --sc-head: #3b2fb0; --sc-accent: #4C3FD1; --sc-label: #6a6493; --sc-ink: #221d4a; } .sc-holo .sc-face { background-size: 300% 300%; animation: sc-holo 9s ease-in-out infinite; } .sc-holo .sc-face::before { content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.65) 48%, transparent 62%); background-size: 250% 100%; animation: sc-shine 5s linear infinite; } @keyframes sc-holo { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } @keyframes sc-shine { from { background-position: 150% 0; } to { background-position: -100% 0; } } /* 10 มินิมอล: แถบสีด้านซ้าย */ .sc-minimal { --sc-bg: #fff; --sc-head: #111827; --sc-accent: #2563EB; --sc-label: #6b7280; --sc-photo: #fff; --sc-radius: 3.4cqw; --sc-shadow: 0 0 0 1px #e5e7eb, 0 14px 30px -18px rgba(0,0,0,.35); } .sc-minimal .sc-face { padding-left: 6.4cqw; } .sc-minimal .sc-face::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2cqw; z-index: 0; background: #2563EB; } .sc-minimal .sc-photo { box-shadow: none; border: .25cqw solid #e5e7eb; } /* หน้าดูตัวอย่าง (/card/preview) */ .scp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 26px 22px; } .scp-item h2 { font-size: 1.05rem; margin: 0 0 2px; } .scp-item p { margin: 0 0 10px; } .scp-item.on h2 { color: var(--a2, #7B4FE8); } @media (prefers-reduced-motion: reduce) { .sc-inner, .sc-face { transition: none; } .sc-holo .sc-face, .sc-holo .sc-face::before { animation: none; } } @media print { .sc { width: 85.6mm; max-width: none; perspective: none; break-inside: avoid; } .sc-inner { display: flex; flex-direction: column; gap: 5mm; transform: none !important; transition: none; } .sc-face { width: 85.6mm; height: 54mm; aspect-ratio: auto; transform: none; backface-visibility: visible; -webkit-backface-visibility: visible; box-shadow: none; border: .2mm solid #bbb; -webkit-print-color-adjust: exact; print-color-adjust: exact; } .sc-hint { display: none; } .sc-holo .sc-face, .sc-holo .sc-face::before { animation: none; } .sc .sc-face { visibility: visible !important; transition: none; } } /* ---------- สแกน QR → ติดตั้งแอป (3.31 · Portal/AppInstallEndpoints.cs) ---------- */ .ai { max-width: 460px; margin: 10px auto 30px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; } .ai-icon { width: 112px; height: 112px; border-radius: 26px; box-shadow: 0 18px 40px -14px rgba(0,0,0,.55); } .ai h1 { margin: 6px 0 0; font-size: 1.7rem; } .ai .lead { margin: 0; } .ai-btn { min-width: 240px; justify-content: center; } .ai-steps { text-align: left; margin: 0; padding: 16px 18px 16px 40px; border-radius: 16px; background: var(--surface); border: 1px solid var(--border); width: 100%; line-height: 1.6; } .ai-steps li { margin: 4px 0; } .ai-share { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; background: #0A84FF; color: #fff; font-size: .8rem; } .ai-warn { display: flex; gap: 10px; align-items: flex-start; text-align: left; padding: 14px 16px; border-radius: 14px; background: rgba(245,158,11,.14); border: 1px solid rgba(245,158,11,.45); } .ai-desk { display: flex; flex-direction: column; align-items: center; gap: 4px; } .ai-desk p { margin: 0; } .ai-qr { width: 200px; height: 200px; padding: 10px; background: #fff; border-radius: 14px; flex: none; } .ai-qr svg { display: block; width: 100%; height: 100%; } .ai-web { margin: 6px 0 0; } /* 3.54: ดาวน์โหลดแอป CAA (Android .apk) จากเครื่องแม่ */ .ai-apk { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 6px; padding-top: 14px; border-top: 1px dashed var(--border); } .ai-apk .ai-btn { text-decoration: none; } .ai-apk p { margin: 0; text-align: center; } .ai-apk-solo { margin-top: 0; padding-top: 0; border-top: 0; } .ai-apk .ai-desk { margin-top: 6px; } /* 4.3.3: ไฟล์ .apk พับไว้ใต้ปุ่ม Google Play */ .ai-apk-more { width: 100%; text-align: center; } .ai-apk-more > summary { cursor: pointer; color: var(--muted); font-size: .9rem; padding: 6px 0; } .ai-apk-more[open] { display: flex; flex-direction: column; align-items: center; gap: 8px; } .ai-apk-more .ai-warn { text-align: left; } .ai-box { display: flex; align-items: center; gap: 14px; margin-top: 16px; padding: 12px; border-radius: 16px; border: 1px dashed var(--border); text-align: left; } .ai-box .ai-qr { width: 112px; height: 112px; padding: 6px; border-radius: 10px; } .ai-box strong { display: flex; align-items: center; gap: 6px; } .ai-box span { display: block; font-size: .85rem; color: var(--muted); margin-top: 4px; } .ai-link { margin: 14px 0 0; text-align: center; } .ai-link a { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; } /* 4.1.1: สมัครผู้ปกครอง 2 ขั้น · มือถือไม่มีแบนเนอร์ใหญ่ (ฟอร์มอยู่บนสุด) */ @media (max-width: 760px) { .auth-compact .auth-art { display: none; } .auth-compact { margin-top: 8px; } } .pr-steps { list-style: none; display: flex; gap: 8px; margin: 4px 0 12px; padding: 0; } .pr-steps li { flex: 1; display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 12px; background: var(--surface-2, rgba(0,0,0,.04)); color: var(--muted); font-size: .9rem; } .pr-steps li b { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--border); color: var(--text); font-size: .8rem; flex: none; } .pr-steps li.on { color: var(--text); font-weight: 600; outline: 2px solid color-mix(in srgb, var(--brand, #7c3aed) 45%, transparent); } .pr-steps li.on b, .pr-steps li.done b { background: var(--brand, #7c3aed); color: #fff; } .pr-hint { margin: -6px 0 12px; } .hub-admission { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .hub-admission form { margin: 0; } .pr-student { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 14px; margin-bottom: 14px; background: color-mix(in srgb, #16a34a 10%, transparent); border: 1px solid color-mix(in srgb, #16a34a 35%, transparent); } .pr-student > div { display: grid; gap: 2px; min-width: 0; } .pr-student strong { font-size: 1.05rem; } /* 4.1: ปุ่มวิดีโอสอนติดตั้ง (ลิงก์ YouTube ที่โรงเรียนตั้ง) */ .ai-vid { width: 100%; } .ai-vid:empty { display: none; } .ai-video { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border-radius: 16px; background: var(--surface); border: 1px solid var(--border); color: inherit; text-decoration: none; text-align: left; } .ai-video:hover { border-color: var(--brand, #7c3aed); text-decoration: none; } .ai-play { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: #ff0033; color: #fff; font-size: .95rem; padding-left: 2px; } .ai-video b { display: block; } .ai-video small { color: var(--muted); } /* โปสเตอร์ (/app/poster) — พิมพ์ A4 พื้นขาว */ .ai-poster { position: relative; z-index: 2; max-width: 680px; margin: 0 auto; padding: 36px 32px; background: #fff; color: #111; border-radius: 24px; text-align: center; } .aip-head { display: flex; align-items: center; justify-content: center; gap: 14px; text-align: left; } .aip-logo { width: 64px; height: 64px; object-fit: contain; } .aip-head strong { display: block; font-size: 1.35rem; } .aip-head span { color: #555; } .ai-poster h1 { font-size: 2.3rem; margin: 26px 0 6px; color: #111; } .ai-poster h1 span { color: #6D3FE0; } .aip-lead { color: #444; margin: 0 0 22px; font-size: 1.05rem; } .aip-qr { width: 330px; height: 330px; margin: 0 auto; padding: 16px; border: 3px solid #6D3FE0; border-radius: 24px; background: #fff; } .aip-qr svg { display: block; width: 100%; height: 100%; } .aip-steps { list-style: none; padding: 0; margin: 26px auto 10px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; text-align: left; } .aip-steps li { display: flex; gap: 10px; align-items: flex-start; font-size: .95rem; line-height: 1.45; } .aip-steps li > b { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: #6D3FE0; color: #fff; } .aip-url { font-family: ui-monospace, Consolas, monospace; color: #333; word-break: break-all; margin: 14px 0 0; } .aip-tip { color: #555; font-size: .9rem; } .aip-warn { margin: 14px 0 0; padding: 12px 14px; border-radius: 12px; background: #FFF4D6; color: #6b4e00; font-size: .9rem; } @media (max-width: 640px) { .aip-steps { grid-template-columns: 1fr; } .aip-qr { width: 260px; height: 260px; } .ai-poster { padding: 26px 16px; } } @media print { .ai-poster { max-width: none; padding: 10mm 6mm; border-radius: 0; -webkit-print-color-adjust: exact; print-color-adjust: exact; } .aip-qr { width: 110mm; height: 110mm; } body:has(.ai-poster) .aurora { display: none; } } /* ---------- 3.32: บัตรประจำตัวนักเรียนเต็มความกว้างของหน้าแรก (ขอบซ้าย/ขวาตรงกับเมนูด้านล่าง) ---------- */ .home-sc .sc-face { box-shadow: var(--sc-shadow), 0 26px 50px -30px rgba(var(--a1-rgb, 109, 63, 224), .55); } .card-sheet .sc { max-width: 560px; } /* ---------- 3.32: หน้าเข้าสู่ระบบ/ติดตั้งแอปแบบเดียวกับแอป (html[data-home] ตอนยังไม่เข้าสู่ระบบ) ---------- */ html[data-home] body.is-guest .aurora { display: none; } html[data-home] .auth-split { max-width: 980px; border: 1px solid var(--border); border-radius: 30px; background: var(--surface); box-shadow: 0 36px 70px -36px rgba(var(--a1-rgb), .45); } html[data-home] .auth-art { background: var(--h-card); } html[data-home] .auth-art::after { opacity: .6; } html[data-home] .auth-art h2 { font-family: var(--font-display); } html[data-home] .auth-form { background: var(--surface); backdrop-filter: none; -webkit-backdrop-filter: none; } html[data-home] .auth-form h1 { font-family: var(--font-display); } html[data-home] .auth-form input:not([type="checkbox"]):not([type="radio"]) { border-radius: 14px; } html[data-home] .auth-form .btn-lg { border-radius: 16px; box-shadow: 0 12px 24px -12px rgba(var(--a1-rgb), .8), inset 0 1px 0 rgba(255,255,255,.35); } html[data-home] .auth-form .btn-outline, html[data-home] .auth-form .qr-login > summary { border-radius: 14px; } html[data-home] .ai-box { background: var(--surface-3); border-style: solid; border-color: var(--border); } html[data-home] .ai-icon { box-shadow: 0 18px 36px -14px rgba(var(--a1-rgb), .6); } html[data-home] .ai-steps { box-shadow: var(--h-tile-sh); } @media (max-width: 760px) { /* มือถือ: หัวสีของแบบเป็นการ์ดด้านบน + ฟอร์มเป็นการ์ดขาวแยก เหมือนหน้าในแอป */ html[data-home] .auth-split { margin: 6px 0 22px; gap: 14px; border: 0; border-radius: 0; background: none; box-shadow: none; overflow: visible; } html[data-home] .auth-art { border-radius: 26px; padding: 24px 22px 22px; overflow: hidden; box-shadow: 0 20px 40px -22px rgba(var(--a1-rgb), .75); } html[data-home] .auth-art h2 { font-size: 1.35rem; margin: 14px 0 6px; } html[data-home] .auth-form { border-radius: 26px; padding: 24px 18px 22px; border: 1px solid var(--border); box-shadow: var(--h-tile-sh); } html[data-home] .auth-form h1 { font-size: 1.4rem; } } /* ========================================================================== 3.66: หน้าแรกแบบแอป (3.92 หน้าตาแบบเดียว) — สีของแบบอยู่ใน