/* ===== ระบบเตรียมพร้อมสอบครูผู้ช่วย — สไตล์รวม ===== */ :root{ --blue-900:#0a2a66; --blue-800:#103d8a; --blue-700:#1552b8; --blue-600:#1e6fe0; --blue-500:#2f86f0; --sky-400:#4cb8ff; --sky-300:#8fd4ff; --sky-100:#e6f4ff; --yellow:#ffd23f; --yellow-dark:#f7b500; --coral:#ff6f91; --green:#36d399; --green-dark:#1fae7d; --purple:#a78bfa; --orange:#ff9f43; --white:#fff; --ink:#11305c; --muted:#5b7299; --line:#d7e6fb; --shadow:0 10px 30px rgba(16,61,138,.15); --shadow-lg:0 18px 45px rgba(16,61,138,.25); --radius:20px; } /* ฟอนต์โหลดผ่าน ในส่วน แล้ว (เร็วกว่า @import) */ *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth} body{font-family:'Sarabun',system-ui,sans-serif;color:var(--ink);background:var(--sky-100);line-height:1.65;-webkit-font-smoothing:antialiased} h1,h2,h3,h4,.brand,.btn,.nav a,.cat-title,.card h3{font-family:'Kanit',sans-serif} a{text-decoration:none;color:inherit} .wrap{width:100%;max-width:1180px;margin:0 auto;padding:0 18px} /* header */ .header{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.94);backdrop-filter:blur(10px);box-shadow:0 4px 20px rgba(16,61,138,.08)} .header-inner{display:flex;align-items:center;justify-content:space-between;height:66px;gap:10px} .brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:1.1rem;color:var(--blue-800)} .brand .logo{width:40px;height:40px;flex:none;border-radius:12px;background:linear-gradient(135deg,var(--blue-600),var(--sky-400));display:grid;place-items:center;color:#fff;font-size:1.25rem;box-shadow:0 6px 14px rgba(30,111,224,.4)} .brand small{display:block;font-size:.64rem;font-weight:500;color:var(--muted);font-family:'Sarabun'} .nav{display:flex;align-items:center;gap:8px;flex-wrap:wrap} .nav a,.nav .who{padding:8px 13px;border-radius:11px;font-weight:500;font-size:.92rem;color:var(--blue-800)} .nav a:hover{background:var(--sky-100)} .nav a.cta{background:var(--yellow);color:var(--blue-900);font-weight:600;box-shadow:0 6px 14px rgba(247,181,0,.35)} .nav a.cta:hover{background:var(--yellow-dark)} .nav .who{color:var(--muted);font-size:.85rem} .nav a.ghost{border:1.5px solid var(--line)} /* buttons */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:none;cursor:pointer;padding:12px 22px;border-radius:13px;font-size:1rem;font-weight:600;transition:transform .15s,box-shadow .15s,background .2s;width:auto} .btn-primary{background:var(--blue-600);color:#fff;box-shadow:0 10px 22px rgba(30,111,224,.35)} .btn-primary:hover{transform:translateY(-2px);background:var(--blue-700)} .btn-yellow{background:var(--yellow);color:var(--blue-900);box-shadow:0 8px 18px rgba(247,181,0,.4)} .btn-yellow:hover{transform:translateY(-2px);background:var(--yellow-dark)} .btn-green{background:var(--green);color:#063} .btn-green:hover{background:var(--green-dark);color:#fff} .btn-danger{background:#fff;color:var(--coral);border:1.5px solid var(--coral)} .btn-danger:hover{background:var(--coral);color:#fff} .btn-ghost{background:#fff;color:var(--blue-700);border:1.5px solid var(--line)} .btn-ghost:hover{background:var(--sky-100)} .btn-sm{padding:7px 13px;font-size:.85rem;border-radius:10px} .btn-block{width:100%} /* auth card */ .auth-wrap{min-height:calc(100vh - 66px);display:grid;place-items:center;padding:40px 18px} .auth-card{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow-lg);padding:34px 30px;width:100%;max-width:430px} .auth-card .ico{font-size:2.4rem;text-align:center} .auth-card h1{font-size:1.5rem;text-align:center;margin-top:6px;color:var(--blue-800)} .auth-card .lead{text-align:center;color:var(--muted);font-size:.95rem;margin:6px 0 22px} .field{margin-bottom:16px} .field label{display:block;font-family:'Kanit';font-weight:500;font-size:.92rem;margin-bottom:6px;color:var(--blue-800)} .field input{width:100%;border:1.5px solid var(--line);border-radius:12px;padding:12px 14px;font-size:1rem;font-family:'Sarabun';color:var(--ink);transition:.18s} .field input:focus{outline:none;border-color:var(--blue-500);box-shadow:0 0 0 4px rgba(47,134,240,.15)} .hint{font-size:.82rem;color:var(--muted);margin-top:5px} .auth-foot{text-align:center;margin-top:18px;font-size:.92rem;color:var(--muted)} .auth-foot a{color:var(--blue-600);font-weight:600} /* password field + toggle */ .pw{position:relative} .pw input{width:100%;padding-right:46px} .pw-toggle{position:absolute;right:6px;top:50%;transform:translateY(-50%);background:transparent;border:none;cursor:pointer;font-size:1.1rem;opacity:.55;padding:6px 8px;border-radius:8px;line-height:1} .pw-toggle:hover{opacity:1;background:var(--sky-100)} .pw-toggle.on{opacity:1} /* trial progress bar */ .progress{height:9px;border-radius:30px;background:#e6eefb;overflow:hidden;margin-top:10px;width:100%;max-width:520px} .progress > i{display:block;height:100%;border-radius:30px;background:linear-gradient(90deg,var(--accent,var(--blue-500)),var(--sky-400))} .progress-cap{font-size:.8rem;color:var(--muted);margin-top:6px} /* ===== ป็อปอัปแจ้งผล (SweetAlert-style) ===== */ .fa-overlay{position:fixed;inset:0;background:rgba(10,42,102,.35);backdrop-filter:blur(2px);display:grid;place-items:center;z-index:9999;padding:20px;animation:faIn .18s ease} .fa-overlay.closing{animation:faOut .2s ease forwards} .fa-pop{background:#fff;border-radius:22px;box-shadow:0 24px 60px rgba(0,0,0,.3);padding:30px 30px 26px;text-align:center;max-width:380px;width:100%;animation:faPop .28s cubic-bezier(.2,.9,.3,1.3)} .fa-icon{width:76px;height:76px;border-radius:50%;display:grid;place-items:center;margin:0 auto 14px;font-size:2.5rem;color:#fff;font-family:'Kanit'} .fa-icon.ok{background:linear-gradient(135deg,#36d399,#1fae7d);box-shadow:0 10px 24px rgba(54,211,153,.45)} .fa-icon.no{background:linear-gradient(135deg,#ff6f91,#e04b6e);box-shadow:0 10px 24px rgba(255,111,145,.45)} .fa-title{font-family:'Kanit';font-weight:700;font-size:1.3rem;color:var(--blue-800)} .fa-msg{color:var(--muted);margin:8px 0 18px;line-height:1.6;font-size:.98rem} .fa-btn{background:var(--blue-600);color:#fff;border:none;padding:11px 32px;border-radius:12px;font-family:'Kanit';font-weight:600;font-size:1rem;cursor:pointer;transition:background .2s} .fa-btn:hover{background:var(--blue-700)} .fa-icon.warn{background:linear-gradient(135deg,#ffb02e,#ff8c00);box-shadow:0 10px 24px rgba(255,159,43,.45);font-weight:800} .fa-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap} .fa-btn.fa-cancel{background:#eef2f8;color:var(--blue-800)} .fa-btn.fa-cancel:hover{background:#dfe7f3} .fa-btn.fa-ok2{background:#ff6f91} .fa-btn.fa-ok2:hover{background:#e04b6e} @keyframes faIn{from{opacity:0}to{opacity:1}} @keyframes faOut{to{opacity:0}} @keyframes faPop{from{transform:scale(.82);opacity:0}to{transform:scale(1);opacity:1}} @media(prefers-reduced-motion:reduce){.fa-overlay,.fa-pop{animation:none}} /* alerts */ .alert{border-radius:13px;padding:12px 16px;font-size:.93rem;margin-bottom:18px;border:1.5px solid} .alert-error{background:#fff0f4;border-color:#ffc2d2;color:#c0395c} .alert-ok{background:#eafaf3;border-color:#b6ead3;color:#127a55} .alert-info{background:#eef6ff;border-color:#c3e0ff;color:#1552b8} /* banner / status */ .banner{border-radius:var(--radius);padding:20px 24px;margin:22px 0;box-shadow:var(--shadow);display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;background:#fff;border-left:6px solid var(--accent,var(--blue-500))} .banner .b-main{display:flex;align-items:center;gap:14px} .banner .b-ico{font-size:2rem} .banner h2{font-size:1.15rem;color:var(--ink)} .banner p{font-size:.92rem;color:var(--muted);margin-top:2px} .pill{display:inline-block;padding:5px 14px;border-radius:30px;font-family:'Kanit';font-weight:600;font-size:.85rem;color:#fff;background:var(--accent,var(--blue-500))} .countdown{font-family:'Kanit';font-weight:800;font-size:1.6rem;color:var(--accent,var(--blue-600));line-height:1} .countdown small{display:block;font-size:.7rem;font-weight:500;color:var(--muted)} /* locked panel */ .locked{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:48px 30px;text-align:center;margin:24px 0} .locked .ico{font-size:3.4rem} .locked h2{font-size:1.5rem;margin-top:10px;color:var(--blue-800)} .locked p{color:var(--muted);max-width:560px;margin:10px auto 0} .locked .contact{margin-top:20px;font-size:.95rem} .locked .contact a{color:var(--blue-600);font-weight:600} /* hero */ .hero{position:relative;overflow:hidden;background:linear-gradient(135deg,var(--blue-900),var(--blue-700) 55%,var(--blue-500));color:#fff;padding:46px 0 52px} .hero::before{content:"";position:absolute;width:320px;height:320px;border-radius:50%;background:var(--sky-300);opacity:.18;top:-120px;right:-80px} .hero h1{font-size:clamp(1.6rem,3.6vw,2.4rem);font-weight:800;position:relative;z-index:2} .hero h1 .hl{color:var(--yellow)} .hero .sub{margin-top:10px;color:#dcebff;position:relative;z-index:2;max-width:640px} /* toolbar + grid */ .toolbar{background:rgba(255,255,255,.96);box-shadow:0 4px 16px rgba(16,61,138,.07);padding:14px 0;position:sticky;top:66px;z-index:50} .toolbar .row{display:flex;flex-wrap:wrap;gap:12px;align-items:center} .search{flex:1;min-width:220px;position:relative} .search input{width:100%;border:1.5px solid var(--line);border-radius:13px;padding:11px 15px 11px 42px;font-size:1rem;font-family:'Sarabun'} .search input:focus{outline:none;border-color:var(--blue-500);box-shadow:0 0 0 4px rgba(47,134,240,.15)} .search .ico{position:absolute;left:14px;top:50%;transform:translateY(-50%);opacity:.6} .count{font-size:.9rem;color:var(--muted);font-weight:600} .chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:11px} .chip{border:1.5px solid var(--line);background:#fff;color:var(--blue-700);font-family:'Kanit';font-weight:500;font-size:.86rem;padding:6px 13px;border-radius:30px;cursor:pointer;transition:.18s} .chip:hover{background:var(--sky-100)} .chip.active{background:var(--blue-600);color:#fff;border-color:var(--blue-600)} .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(248px,1fr));gap:16px;padding:26px 0 60px} .card{background:#fff;border-radius:var(--radius);padding:18px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:7px;transition:transform .16s,box-shadow .16s;position:relative;overflow:hidden;border:1px solid rgba(215,230,251,.7)} .card::after{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--accent,var(--blue-500))} .card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg)} .card .top{display:flex;align-items:center;justify-content:space-between} .card .num{font-family:'Kanit';font-weight:800;font-size:.8rem;color:#fff;background:var(--accent,var(--blue-500));padding:4px 10px;border-radius:30px} .card .ic{font-size:1.4rem} .card h3{font-size:1.02rem;font-weight:600;line-height:1.4;margin-top:3px} .card .en{font-size:.82rem;color:var(--muted)} .card .tag{margin-top:auto;font-family:'Kanit';font-weight:600;font-size:.77rem;color:var(--accent,var(--blue-600))} .card .go{margin-top:8px;font-family:'Kanit';font-weight:600;font-size:.88rem;color:var(--blue-700)} .empty{text-align:center;padding:50px;color:var(--muted);display:none} /* table (admin) */ .panel{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:6px;margin:22px 0;overflow-x:auto} table{width:100%;border-collapse:collapse;font-size:.92rem;min-width:760px} th,td{padding:12px 14px;text-align:left;border-bottom:1px solid #eef3fb;vertical-align:middle} th{font-family:'Kanit';font-weight:600;color:var(--blue-800);background:#f6faff;position:sticky;top:0} tr:hover td{background:#fafdff} .badge{display:inline-block;padding:4px 11px;border-radius:30px;font-family:'Kanit';font-weight:600;font-size:.78rem;color:#fff} .actions{display:flex;gap:6px;flex-wrap:wrap} .stat-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin:22px 0} .stat{background:#fff;border-radius:16px;box-shadow:var(--shadow);padding:16px 18px;border-left:5px solid var(--accent,var(--blue-500))} .stat .n{font-family:'Kanit';font-weight:800;font-size:1.8rem;color:var(--accent,var(--blue-600));line-height:1} .stat .l{font-size:.85rem;color:var(--muted);margin-top:4px} /* ===== YouTube ===== */ .btn-yt{background:#ff0000;color:#fff;box-shadow:0 8px 18px rgba(255,0,0,.28)} .btn-yt:hover{background:#d90000;color:#fff;transform:translateY(-2px)} .yt-mini{display:inline-flex;align-items:center;gap:4px;font-family:'Kanit';font-weight:600;font-size:.78rem; color:#d90000;background:#fff0f0;border:1px solid #ffd0d0;padding:3px 10px;border-radius:30px;white-space:nowrap} .yt-mini:hover{background:#ffe0e0} /* ===== EXAM ===== */ .sel,.inp{border:1.5px solid var(--line);border-radius:11px;padding:9px 12px;font-family:'Sarabun';font-size:.95rem;color:var(--ink);background:#fff} .sel:focus,.inp:focus{outline:none;border-color:var(--blue-500);box-shadow:0 0 0 4px rgba(47,134,240,.15)} textarea.inp{width:100%;resize:vertical} .pickgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px} .pick{display:flex;align-items:center;gap:10px;border:1.5px solid var(--line);border-radius:14px;padding:12px 14px;cursor:pointer;transition:.15s} .pick:hover{background:var(--sky-100)} .pick input{width:18px;height:18px;accent-color:var(--blue-600)} .pick .pk-ic{font-size:1.5rem} .pick .pk-tx{font-family:'Kanit';font-weight:600;line-height:1.2} .pick .pk-tx small{display:block;font-family:'Sarabun';font-weight:400;color:var(--muted);font-size:.78rem} .exam-head{background:linear-gradient(135deg,var(--blue-900),var(--blue-700));color:#fff;padding:16px 0;position:sticky;top:66px;z-index:40} .timer{font-family:'Kanit';font-weight:800;font-size:1.5rem;background:rgba(255,255,255,.16);padding:6px 16px;border-radius:12px} .qcard{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:20px;margin:16px 0;border-left:6px solid var(--accent,var(--blue-500))} .qmeta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px} .qno{font-family:'Kanit';font-weight:800;color:#fff;background:var(--accent,var(--blue-500));padding:3px 12px;border-radius:30px;font-size:.82rem} .qsub{font-family:'Kanit';font-size:.82rem;color:var(--muted)} .rtag{margin-left:auto;font-family:'Kanit';font-weight:700;font-size:.82rem} .r-ok .rtag{color:var(--green-dark)} .r-no .rtag{color:var(--coral)} .qscenario{background:#f3f8ff;border:1px dashed #b9d6ff;border-radius:12px;padding:11px 14px;margin-bottom:10px;font-size:.95rem;color:#2b4a7a} .qtext{font-weight:600;font-size:1.05rem;margin-bottom:12px;line-height:1.5} .opt{display:flex;align-items:center;gap:12px;border:1.5px solid var(--line);border-radius:13px;padding:11px 14px;margin-bottom:9px;cursor:pointer;transition:.15s} .opt:hover{background:var(--sky-100);border-color:var(--sky-300)} .opt input{width:18px;height:18px;accent-color:var(--blue-600);flex:none} .opt .ol{font-family:'Kanit';font-weight:800;color:var(--blue-700);width:26px;height:26px;display:grid;place-items:center;background:var(--sky-100);border-radius:8px;flex:none} .exam-bar{position:fixed;left:0;right:0;bottom:0;background:rgba(255,255,255,.97);box-shadow:0 -6px 20px rgba(16,61,138,.12);padding:12px 0;z-index:60} .result-hero{display:flex;flex-wrap:wrap;gap:24px;align-items:center;background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:24px;border-left:6px solid var(--accent,var(--blue-500))} .score-ring{width:140px;height:140px;border-radius:50%;flex:none;display:grid;place-items:center; background:conic-gradient(var(--accent) calc(var(--pct)*1%), #e6eefb 0);} .score-ring > div{width:108px;height:108px;border-radius:50%;background:#fff;display:grid;place-items:center;text-align:center} .score-ring b{font-family:'Kanit';font-size:2rem;color:var(--accent)} .score-ring small{display:block;color:var(--muted);font-size:.8rem} .result-info .pill{margin-bottom:8px} .qreview{background:#fff;border-radius:16px;box-shadow:var(--shadow);padding:18px;margin:12px 0;border-left:5px solid #cfe0ff} .qreview.r-ok{border-left-color:var(--green)} .qreview.r-no{border-left-color:var(--coral)} .ropt{border:1.5px solid var(--line);border-radius:11px;padding:9px 13px;margin:6px 0;font-size:.95rem} .ropt.c-correct{background:#eafaf3;border-color:#9fe3c6} .ropt.c-wrong{background:#fff0f4;border-color:#ffc2d2} .ropt .mark{font-family:'Kanit';font-size:.72rem;color:#fff;background:var(--green);padding:2px 8px;border-radius:20px;margin-left:6px} .ropt .mark-no{background:var(--coral)} .qexp{background:#fffaf0;border:1px solid #ffe6b3;border-radius:11px;padding:10px 13px;margin-top:8px;font-size:.92rem;color:#7a5b12} .weakgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px} .weak{background:#fff;border-radius:16px;box-shadow:var(--shadow);padding:16px} .wk-top{display:flex;justify-content:space-between;align-items:center;font-family:'Kanit';font-weight:600;margin-bottom:8px} /* featured exam card บนหน้า hub */ .exam-feature{display:flex;flex-wrap:wrap;align-items:center;gap:18px;justify-content:space-between; background:linear-gradient(135deg,#0a2a66,#1e6fe0);color:#fff;border-radius:var(--radius); padding:22px 26px;box-shadow:var(--shadow-lg);margin:22px 0} .exam-feature h3{font-size:1.25rem} .exam-feature p{color:#dcebff;font-size:.92rem;margin-top:4px;max-width:560px} .exam-feature .btn{white-space:nowrap} /* footer */ .footer{background:linear-gradient(135deg,var(--blue-900),var(--blue-700));color:#cfe0ff;padding:30px 0;margin-top:20px;font-size:.9rem} .footer .admin{display:flex;flex-wrap:wrap;gap:10px;align-items:center} .footer .admin .name{font-weight:600;color:#fff} .footer .admin .mail{color:var(--yellow)} .footer .copy{margin-top:12px;color:#a9c6ff;font-size:.82rem} @media(max-width:600px){ .header-inner{height:auto;padding:10px 0;flex-wrap:wrap} .toolbar{top:0;position:static} .grid{grid-template-columns:1fr 1fr;gap:12px} .card h3{font-size:.94rem} .banner{flex-direction:column;align-items:flex-start} } @media(max-width:380px){.grid{grid-template-columns:1fr}} /* ===== ยกระดับ UX/มือถือ + ความลื่น ===== */ html{scroll-behavior:smooth} a,.btn,.card,.chip,.opt,.pick{ -webkit-tap-highlight-color:transparent } .btn{min-height:44px} /* ปุ่มแตะง่ายบนมือถือ (>=44px ตามมาตรฐาน) */ .btn:active{transform:translateY(1px)} .card:active{transform:scale(.99)} .nav a,.nav .ghost{min-height:40px;display:inline-flex;align-items:center} .card,.btn,.chip,.opt,.pick,.stat,.weak{transition:transform .16s ease, box-shadow .16s ease, background .2s ease} /* ค่อยๆ ปรากฏเมื่อโหลดหน้า */ @keyframes fattIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} .hero,.banner,.panel,.exam-feature,.grid,.result-hero{animation:fattIn .35s ease both} @media(max-width:600px){ .nav{gap:6px;width:100%;justify-content:flex-start} .nav a,.nav .ghost,.nav .who{font-size:.9rem;padding:9px 12px} .btn{width:100%;justify-content:center} /* ปุ่มเต็มความกว้างบนมือถือ แตะง่าย */ .nav a.cta{flex:1;text-align:center} .actions .btn,.exam-feature .btn,.result-info .btn{width:auto} /* ปุ่มในกลุ่มยังเรียงแนวนอนได้ */ } /* เคารพผู้ใช้ที่ปิดแอนิเมชัน */ @media(prefers-reduced-motion:reduce){ *{animation:none!important;transition:none!important;scroll-behavior:auto!important} }