/* ===================================================================== NEXT+ Academy — Design System · "Premium Dark + Motion" --------------------------------------------------------------------- ไฟล์เดียวใช้ได้ทั้งเว็บ: หน้าแรก · คอร์ส · แดชบอร์ด · ห้องเรียน · หลังบ้าน โครงสร้าง 01 Tokens & Reset 06 Cards & Course 02 Typography 07 Forms & Buttons 03 Motion primitives 08 Dashboard & Classroom 04 Header / Nav 09 Admin 05 Hero & Sections 10 Footer & Responsive ===================================================================== */ /* ============================ 01 · TOKENS ============================ */ :root{ /* --- Brand: NEXT+ (default) --- */ --violet:#7C5CFF; --violet-2:#9B7CFF; --violet-deep:#4B3F8F; --coral:#FF7A5C; --coral-2:#FF9B7A; --amber:#FFB443; --cyan:#46E5D0; --lime:#B8F04A; /* --- Surfaces --- */ --bg:#07050F; --bg-2:#0C0A1B; --bg-3:#120E26; --panel:rgba(255,255,255,.035); --panel-2:rgba(255,255,255,.06); --glass:rgba(18,14,38,.72); --line:rgba(255,255,255,.10); --line-2:rgba(255,255,255,.18); /* --- Text --- */ --ink:#F3F0FF; --ink-2:#CFC9E8; --muted:#918BB0; --muted-2:#6E688C; /* --- Semantic --- */ --ok:#3FD68A; --warn:#FFC44D; --err:#FF6B6B; --info:#5AB9FF; /* --- Shape & motion --- */ --r-sm:10px; --r:16px; --r-lg:24px; --r-xl:34px; --r-pill:999px; --ease:cubic-bezier(.22,.9,.28,1); --ease-out:cubic-bezier(.16,1,.3,1); --spring:cubic-bezier(.34,1.56,.64,1); --shadow:0 24px 60px -24px rgba(0,0,0,.85); --shadow-glow:0 0 0 1px var(--line), 0 30px 70px -30px rgba(124,92,255,.55); --wrap:1220px; --nav-h:74px; --fs-base:17.5px; } /* --- Brand skin: Pattaya Academy (ใช้ class บน หรือ ) --- */ .brand-pattaya{ --violet:#22B8C9; --violet-2:#54D6E4; --violet-deep:#0F6E7A; --coral:#FF8A3D; --coral-2:#FFB06B; --amber:#FFD166; --cyan:#6EE7DA; --bg:#040D12; --bg-2:#071A20; --bg-3:#0A2630; } *,*::before,*::after{box-sizing:border-box} *{margin:0} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} html:focus-within{scroll-behavior:smooth} body{ font-family:'IBM Plex Sans Thai','Sarabun',system-ui,-apple-system,sans-serif; font-size:var(--fs-base);line-height:1.85; color:var(--ink);background:var(--bg); -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility; overflow-x:hidden;min-height:100vh; } /* พื้นหลังเรืองแสงแบบ aurora — อยู่หลังทุกอย่าง ไม่รับคลิก */ body::before{ content:'';position:fixed;inset:-20% -10%;z-index:-2;pointer-events:none; background: radial-gradient(48% 42% at 12% 8%, rgba(124,92,255,.30), transparent 62%), radial-gradient(42% 38% at 88% 14%, rgba(255,122,92,.20), transparent 60%), radial-gradient(52% 46% at 50% 96%, rgba(70,229,208,.14), transparent 64%); filter:blur(28px); animation:aurora 26s var(--ease) infinite alternate; } /* ผิวเกรน ลดความ "แบน" ของพื้นดำ */ body::after{ content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.30; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E"); } @keyframes aurora{ 0% {transform:translate3d(0,0,0) scale(1)} 50% {transform:translate3d(-3%,2%,0) scale(1.08)} 100%{transform:translate3d(3%,-2%,0) scale(1.04)} } img,svg,video{display:block;max-width:100%} ul,ol{padding:0;list-style:none} a{color:inherit;text-decoration:none} button,input,select,textarea{font:inherit;color:inherit} ::selection{background:var(--coral);color:#170A05} :focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:6px} /* scrollbar */ ::-webkit-scrollbar{width:11px;height:11px} ::-webkit-scrollbar-track{background:var(--bg-2)} ::-webkit-scrollbar-thumb{background:linear-gradient(var(--violet),var(--violet-deep));border-radius:99px;border:3px solid var(--bg-2)} ::-webkit-scrollbar-thumb:hover{background:var(--violet-2)} .wrap{width:min(var(--wrap),calc(100% - 44px));margin-inline:auto} .wrap-sm{width:min(880px,calc(100% - 44px));margin-inline:auto} .wrap-xs{width:min(560px,calc(100% - 44px));margin-inline:auto} /* ============================ 02 · TYPE ============================== */ h1,h2,h3,h4,h5{font-family:'Kanit',sans-serif;font-weight:600;line-height:1.22;letter-spacing:-.01em} h1{font-size:clamp(2.5rem,6.2vw,4.6rem);font-weight:700;letter-spacing:-.028em} h2{font-size:clamp(1.85rem,3.7vw,2.9rem);letter-spacing:-.022em} h3{font-size:clamp(1.16rem,1.9vw,1.42rem)} h4{font-size:1.06rem} p{text-wrap:pretty} .mono{font-family:'Space Grotesk','Oswald',ui-monospace,monospace;font-variant-numeric:tabular-nums} .eyebrow{ font-family:'Space Grotesk','Oswald',sans-serif;font-size:.735rem;font-weight:600; letter-spacing:.26em;text-transform:uppercase;color:var(--coral-2); display:inline-flex;align-items:center;gap:11px;margin-bottom:18px; } .eyebrow::before{content:'';width:34px;height:1.5px;background:linear-gradient(90deg,var(--coral),transparent)} .lead{font-size:1.09rem;color:var(--ink-2);max-width:66ch} .muted{color:var(--muted)} .small{font-size:.87rem} .tiny{font-size:.79rem} .center{text-align:center} .center .lead{margin-inline:auto} .center .eyebrow::before{display:none} /* ข้อความไล่สี — ใช้กับคำสำคัญในหัวข้อ */ .grad{ background:linear-gradient(104deg,var(--violet-2) 0%,var(--coral-2) 52%,var(--amber) 100%); -webkit-background-clip:text;background-clip:text;color:transparent; background-size:220% auto;animation:gradslide 7s linear infinite; } @keyframes gradslide{to{background-position:220% center}} .thin{font-weight:300;color:var(--ink-2)} .underline-draw{position:relative;white-space:nowrap} .underline-draw::after{ content:'';position:absolute;left:0;right:0;bottom:-.08em;height:.13em;border-radius:99px; background:linear-gradient(90deg,var(--coral),var(--amber)); transform:scaleX(0);transform-origin:left;transition:transform .8s var(--ease-out) .25s; } .rv.on .underline-draw::after,.on .underline-draw::after{transform:scaleX(1)} /* ======================= 03 · MOTION PRIMITIVES ====================== */ .rv{opacity:0;transform:translateY(26px);transition:opacity .78s var(--ease-out),transform .78s var(--ease-out)} .rv.on{opacity:1;transform:none} .rv-d1{transition-delay:.10s} .rv-d2{transition-delay:.20s} .rv-d3{transition-delay:.30s} .rv-d4{transition-delay:.40s} .rv-d5{transition-delay:.50s} .rv-d6{transition-delay:.60s} .rv-l{transform:translateX(-34px)} .rv-r{transform:translateX(34px)} .rv-s{transform:scale(.94)} .rv-l.on,.rv-r.on,.rv-s.on{transform:none} @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important} .rv{opacity:1;transform:none} } /* แถบความคืบหน้าการเลื่อนหน้า */ .scrollbar-top{position:fixed;top:0;left:0;height:3px;z-index:120;width:0; background:linear-gradient(90deg,var(--violet),var(--coral),var(--amber));box-shadow:0 0 14px rgba(255,122,92,.6)} /* เส้นเรืองแสงคั่นส่วน */ .hr-glow{height:1px;border:0;background:linear-gradient(90deg,transparent,var(--line-2) 20%,var(--violet) 50%,var(--line-2) 80%,transparent);opacity:.55;margin:0} /* Marquee */ .marquee{overflow:hidden;border-block:1px solid var(--line);background:rgba(255,255,255,.02);padding:15px 0; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)} .marquee-row{display:flex;width:max-content;gap:42px;animation:marq 34s linear infinite} .marquee:hover .marquee-row{animation-play-state:paused} .marquee-row span{display:inline-flex;align-items:center;gap:14px;white-space:nowrap; font-family:'Space Grotesk','Oswald',sans-serif;font-size:.95rem;letter-spacing:.13em; text-transform:uppercase;color:var(--muted)} .marquee-row span b{color:var(--ink);font-weight:600} .marquee-row span::after{content:'✦';color:var(--coral);font-size:.7rem} @keyframes marq{to{transform:translateX(-50%)}} /* ========================= 04 · HEADER / NAV ========================= */ .skip{position:absolute;left:-9999px;top:0;background:var(--violet);color:#fff;padding:12px 20px;z-index:300;border-radius:0 0 10px 0} .skip:focus{left:0} .topbar{ position:sticky;top:0;z-index:100; background:linear-gradient(180deg,rgba(7,5,15,.94),rgba(7,5,15,.72)); backdrop-filter:blur(18px) saturate(160%);-webkit-backdrop-filter:blur(18px) saturate(160%); border-bottom:1px solid var(--line);transition:box-shadow .4s var(--ease),background .4s var(--ease); } .topbar.scrolled{box-shadow:0 12px 40px -18px rgba(0,0,0,.9);background:rgba(7,5,15,.96)} .topbar>.wrap{display:flex;align-items:center;gap:18px;height:var(--nav-h)} .brand{display:flex;align-items:center;gap:12px;flex-shrink:0} .brand .mark{ width:42px;height:42px;border-radius:13px;display:grid;place-items:center;flex-shrink:0; background:linear-gradient(140deg,var(--violet),var(--violet-deep) 58%,var(--coral)); font-family:'Space Grotesk','Oswald',sans-serif;font-weight:700;font-size:1.12rem;color:#fff; box-shadow:0 8px 26px -8px rgba(124,92,255,.85);transition:transform .5s var(--spring); } .brand:hover .mark{transform:rotate(-8deg) scale(1.07)} .brand .t1{font-family:'Kanit',sans-serif;font-weight:600;font-size:1.02rem;letter-spacing:.01em;line-height:1.15;display:block} .brand .t2{font-size:.685rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);line-height:1.15;display:block;font-family:'Space Grotesk',sans-serif} nav.main{display:flex;align-items:center;gap:4px;margin-left:auto} nav.main>a{ position:relative;padding:9px 14px;border-radius:var(--r-pill);font-size:.945rem; color:var(--ink-2);transition:color .3s var(--ease),background .3s var(--ease);white-space:nowrap; } nav.main>a::after{ content:'';position:absolute;left:14px;right:14px;bottom:4px;height:2px;border-radius:2px; background:linear-gradient(90deg,var(--violet),var(--coral)); transform:scaleX(0);transform-origin:left;transition:transform .38s var(--ease-out); } nav.main>a:hover{color:var(--ink);background:var(--panel)} nav.main>a:hover::after,nav.main>a.active::after{transform:scaleX(1)} nav.main>a.active{color:#fff} .lang-sw{display:inline-flex;border:1px solid var(--line-2);border-radius:var(--r-pill);overflow:hidden;font-size:.8rem} .lang-sw a{padding:6px 13px;color:var(--muted);transition:.3s var(--ease);font-family:'Space Grotesk',sans-serif;letter-spacing:.06em} .lang-sw a.on{background:var(--violet);color:#fff} .lang-sw a:not(.on):hover{background:var(--panel-2);color:var(--ink)} .burger{display:none;background:none;border:1px solid var(--line-2);border-radius:11px;width:44px;height:44px; cursor:pointer;color:var(--ink);font-size:1.15rem;margin-left:auto;transition:.3s var(--ease)} .burger:hover{background:var(--panel-2)} /* แถบเตือนยืนยันอีเมล */ .verify-bar{background:linear-gradient(90deg,rgba(255,180,67,.16),rgba(255,122,92,.10)); border-bottom:1px solid rgba(255,180,67,.3)} .verify-bar .wrap{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:12px 0;font-size:.92rem} .verify-bar .vb-text{color:var(--warn);font-weight:500} .verify-bar .vb-hint{color:var(--muted);font-size:.8rem} /* Flash */ .flash{margin:20px auto;padding:15px 20px;border-radius:var(--r);border:1px solid var(--line-2); background:var(--panel-2);border-left-width:4px;font-size:.96rem;backdrop-filter:blur(10px)} .flash.ok{border-left-color:var(--ok);color:#CFF7E4} .flash.err{border-left-color:var(--err);color:#FFDADA} /* ====================== 05 · HERO & SECTIONS ========================= */ .hero{position:relative;padding:clamp(70px,10vw,130px) 0 clamp(60px,7vw,100px);overflow:hidden} .hero-orb{position:absolute;border-radius:50%;filter:blur(70px);pointer-events:none;z-index:0} .hero-orb.o1{width:520px;height:520px;top:-14%;left:-8%;background:radial-gradient(circle,rgba(124,92,255,.5),transparent 68%);animation:float1 20s var(--ease) infinite alternate} .hero-orb.o2{width:440px;height:440px;bottom:-16%;right:-6%;background:radial-gradient(circle,rgba(255,122,92,.42),transparent 68%);animation:float2 24s var(--ease) infinite alternate} .hero-orb.o3{width:340px;height:340px;top:36%;right:26%;background:radial-gradient(circle,rgba(70,229,208,.26),transparent 70%);animation:float1 30s var(--ease) infinite alternate-reverse} @keyframes float1{to{transform:translate(64px,-46px) scale(1.16)}} @keyframes float2{to{transform:translate(-56px,44px) scale(1.12)}} .hero>.wrap{position:relative;z-index:1} .hero h1{margin-bottom:22px} .hero .sub{font-size:clamp(1.02rem,1.5vw,1.2rem);color:var(--ink-2);max-width:60ch;margin-bottom:32px} .hero-actions{display:flex;gap:14px;flex-wrap:wrap;align-items:center} /* ป้ายสถานะเรืองแสง (มีจุดกระพริบ) */ .pill-live{ display:inline-flex;align-items:center;gap:10px;padding:7px 17px 7px 13px;border-radius:var(--r-pill); border:1px solid rgba(255,122,92,.36);background:rgba(255,122,92,.10); font-size:.83rem;color:var(--coral-2);margin-bottom:24px;backdrop-filter:blur(8px); } .pill-live .dot{width:8px;height:8px;border-radius:50%;background:var(--coral);position:relative;flex-shrink:0} .pill-live .dot::after{content:'';position:absolute;inset:-5px;border-radius:50%;border:1.5px solid var(--coral);animation:ping 1.9s var(--ease) infinite} @keyframes ping{0%{transform:scale(.6);opacity:1}100%{transform:scale(1.7);opacity:0}} /* สถิติใต้ hero */ .hstats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1px;margin-top:64px; background:var(--line);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden} .hstat{background:var(--bg-2);padding:26px 24px;transition:background .45s var(--ease)} .hstat:hover{background:var(--bg-3)} .hstat .n{font-family:'Space Grotesk','Oswald',sans-serif;font-size:2.5rem;font-weight:700;line-height:1; background:linear-gradient(120deg,var(--violet-2),var(--coral-2));-webkit-background-clip:text;background-clip:text;color:transparent} .hstat .n em{font-style:normal;font-size:.98rem;font-family:'Kanit',sans-serif;color:var(--ink-2); -webkit-text-fill-color:var(--ink-2);margin-left:8px;font-weight:400} .hstat .n.th{font-family:'Kanit',sans-serif;font-size:1.62rem} .hstat .d{color:var(--muted);font-size:.87rem;margin-top:9px;line-height:1.6} /* Section shell */ .sect{padding:clamp(72px,9vw,124px) 0;position:relative} .sect-head{margin-bottom:clamp(38px,5vw,60px);max-width:820px} .sect.alt{background:linear-gradient(180deg,transparent,var(--bg-2) 12%,var(--bg-2) 88%,transparent)} .sect-num{position:absolute;top:clamp(30px,5vw,60px);right:4%;font-family:'Space Grotesk',sans-serif; font-size:clamp(5rem,13vw,11rem);font-weight:700;line-height:1;color:rgba(255,255,255,.028);pointer-events:none;user-select:none} /* ========================= 06 · CARDS =============================== */ .grid{display:grid;gap:22px} .g2{grid-template-columns:repeat(auto-fit,minmax(310px,1fr))} .g3{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))} .g4{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))} .card{ position:relative;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg); padding:30px;overflow:hidden;backdrop-filter:blur(12px); transition:transform .55s var(--ease-out),border-color .45s var(--ease),background .45s var(--ease),box-shadow .55s var(--ease); } .card::before{ content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0; background:radial-gradient(340px circle at var(--mx,50%) var(--my,0%),rgba(124,92,255,.16),transparent 62%); transition:opacity .45s var(--ease); } .card:hover{transform:translateY(-6px);border-color:var(--line-2);background:var(--panel-2);box-shadow:var(--shadow)} .card:hover::before{opacity:1} .card .ico{width:52px;height:52px;border-radius:15px;display:grid;place-items:center;font-size:1.5rem;margin-bottom:18px; background:linear-gradient(140deg,rgba(124,92,255,.26),rgba(255,122,92,.16));border:1px solid var(--line-2)} .card h3{margin-bottom:11px} .card p{color:var(--ink-2);font-size:.955rem} .card .pts{display:flex;flex-direction:column;gap:9px;margin-top:18px} .card .pts span{display:flex;gap:10px;font-size:.9rem;color:var(--muted);line-height:1.6} .card .pts span::before{content:'▸';color:var(--coral);flex-shrink:0} /* การ์ดคอร์ส */ .course-card{ display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line); border-radius:var(--r-lg);overflow:hidden;height:100%; transition:transform .55s var(--ease-out),border-color .4s,box-shadow .55s var(--ease); } .course-card:hover{transform:translateY(-8px);border-color:var(--violet);box-shadow:var(--shadow-glow)} .course-thumb{position:relative;aspect-ratio:16/9;display:grid;place-items:center;overflow:hidden; background:linear-gradient(135deg,var(--violet-deep),#1B1338 55%,var(--bg-3))} .course-thumb::after{content:'';position:absolute;inset:0; background:radial-gradient(70% 70% at 30% 20%,rgba(255,255,255,.14),transparent 70%)} .course-thumb .em{font-size:3.1rem;filter:drop-shadow(0 10px 22px rgba(0,0,0,.6));position:relative;z-index:1; transition:transform .6s var(--spring)} .course-card:hover .course-thumb .em{transform:scale(1.16) rotate(-6deg)} .course-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .course-thumb .corner{position:absolute;top:12px;left:12px;z-index:2;display:flex;gap:6px;flex-wrap:wrap} .course-body{padding:22px;display:flex;flex-direction:column;gap:12px;flex:1} .course-body h3{font-size:1.1rem;line-height:1.4} .course-body .meta{display:flex;flex-direction:column;gap:6px;font-size:.855rem;color:var(--muted)} .course-body .foot{display:flex;align-items:center;justify-content:space-between;gap:12px; margin-top:auto;padding-top:16px;border-top:1px solid var(--line)} .price{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:1.18rem;color:var(--amber)} .price small{font-size:.72rem;font-weight:400;color:var(--muted)} .seats{font-size:.8rem;color:var(--muted)} /* Badges */ .badge{display:inline-flex;align-items:center;gap:5px;padding:4px 11px;border-radius:var(--r-pill); font-size:.735rem;font-weight:500;border:1px solid var(--line-2);background:rgba(0,0,0,.42);backdrop-filter:blur(6px)} .badge.free{background:rgba(63,214,138,.16);color:var(--ok);border-color:rgba(63,214,138,.36)} .badge.online{background:rgba(90,185,255,.16);color:var(--info);border-color:rgba(90,185,255,.36)} .badge.onsite{background:rgba(255,180,67,.16);color:var(--amber);border-color:rgba(255,180,67,.36)} .badge.hybrid{background:rgba(70,229,208,.16);color:var(--cyan);border-color:rgba(70,229,208,.36)} .badge.hot{background:rgba(255,122,92,.2);color:var(--coral-2);border-color:rgba(255,122,92,.42)} .badge.new{background:rgba(184,240,74,.16);color:var(--lime);border-color:rgba(184,240,74,.36)} .badge.st-pending{background:rgba(255,196,77,.15);color:var(--warn)} .badge.st-approved{background:rgba(63,214,138,.15);color:var(--ok)} .badge.st-completed{background:rgba(124,92,255,.2);color:var(--violet-2)} .badge.st-cancelled,.badge.st-rejected{background:rgba(255,107,107,.15);color:var(--err)} .badge.brand-nextplus{background:rgba(124,92,255,.18);color:var(--violet-2);border-color:rgba(124,92,255,.4)} .badge.brand-pattaya{background:rgba(34,184,201,.18);color:#54D6E4;border-color:rgba(34,184,201,.4)} /* Accordion (แทร็กหลักสูตร) */ .acc{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--panel)} .acc+.acc{margin-top:14px} .acc-btn{width:100%;display:flex;align-items:center;gap:18px;padding:24px 26px;background:none;border:0; cursor:pointer;text-align:left;transition:background .35s var(--ease)} .acc-btn:hover{background:var(--panel-2)} .acc-btn .n{font-family:'Space Grotesk',sans-serif;font-size:.8rem;color:var(--coral);letter-spacing:.14em;flex-shrink:0} .acc-btn .t{flex:1} .acc-btn .t strong{display:block;font-family:'Kanit',sans-serif;font-size:1.14rem;font-weight:500} .acc-btn .t small{color:var(--muted);font-size:.86rem} .acc-btn .chev{width:34px;height:34px;border-radius:50%;border:1px solid var(--line-2);display:grid;place-items:center; flex-shrink:0;transition:transform .45s var(--ease),background .35s} .acc-btn[aria-expanded="true"] .chev{transform:rotate(180deg);background:var(--violet);border-color:var(--violet)} .acc-panel{max-height:0;overflow:hidden;transition:max-height .6s var(--ease)} .acc-panel .inner{padding:0 26px 26px;border-top:1px solid var(--line);padding-top:22px;margin:0 26px 26px 26px;padding-inline:0} .topics{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0} .topics span{padding:6px 13px;border-radius:var(--r-pill);border:1px solid var(--line-2); background:rgba(255,255,255,.03);font-size:.83rem;color:var(--ink-2)} .fit{font-size:.88rem;color:var(--muted);padding:11px 15px;border-left:2px solid var(--coral); background:rgba(255,122,92,.06);border-radius:0 8px 8px 0} /* Timeline / steps */ .steps{display:grid;gap:0;counter-reset:s} .step{display:grid;grid-template-columns:64px 1fr;gap:22px;padding:24px 0;border-bottom:1px solid var(--line);position:relative} .step:last-child{border-bottom:0} .step .num{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line-2); font-family:'Space Grotesk',sans-serif;font-weight:600;background:var(--bg-2);position:relative;z-index:1; transition:.45s var(--ease)} .step:hover .num{background:linear-gradient(140deg,var(--violet),var(--coral));border-color:transparent;transform:scale(1.1)} .step h3{margin-bottom:6px} .step p{color:var(--ink-2);font-size:.94rem} .steps::before{content:'';position:absolute;left:24px;top:40px;bottom:40px;width:1px;background:var(--line)} .steps{position:relative} /* Stat / feature strip */ .feat-list{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden} .feat{background:var(--bg-2);padding:22px 24px;display:flex;gap:16px;align-items:flex-start;transition:background .4s} .feat:hover{background:var(--bg-3)} .feat .fi{font-size:1.4rem;flex-shrink:0;line-height:1.4} .feat b{display:block;font-family:'Kanit',sans-serif;font-weight:500;margin-bottom:4px} .feat span{font-size:.9rem;color:var(--muted)} /* ====================== 07 · BUTTONS & FORMS ======================== */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:10px; padding:13px 26px;border-radius:var(--r-pill);border:1px solid transparent; font-family:'Kanit',sans-serif;font-size:.98rem;font-weight:500;cursor:pointer; position:relative;overflow:hidden;white-space:nowrap; transition:transform .35s var(--spring),box-shadow .4s var(--ease),background .35s var(--ease),color .3s; } .btn:active{transform:scale(.97)} .btn .ar{transition:transform .4s var(--ease-out)} .btn:hover .ar{transform:translateX(5px)} .btn-primary{background:linear-gradient(120deg,var(--violet),var(--violet-deep));color:#fff; box-shadow:0 12px 34px -12px rgba(124,92,255,.9)} .btn-primary::after{content:'';position:absolute;inset:0;background:linear-gradient(120deg,var(--violet-2),var(--coral)); opacity:0;transition:opacity .4s var(--ease)} .btn-primary:hover{transform:translateY(-2px);box-shadow:0 18px 44px -14px rgba(124,92,255,1)} .btn-primary:hover::after{opacity:1} .btn-primary>*{position:relative;z-index:1} .btn-coral{background:linear-gradient(120deg,var(--coral),#E85D3D);color:#fff; box-shadow:0 12px 34px -12px rgba(255,122,92,.9)} .btn-coral:hover{transform:translateY(-2px);box-shadow:0 18px 44px -14px rgba(255,122,92,1)} .btn-ghost{border-color:var(--line-2);color:var(--ink);background:rgba(255,255,255,.03)} .btn-ghost:hover{background:var(--panel-2);border-color:var(--violet);transform:translateY(-2px)} .btn-soft{background:var(--panel-2);border-color:var(--line);color:var(--ink-2)} .btn-soft:hover{background:rgba(255,255,255,.1);color:var(--ink)} .btn-danger{background:rgba(255,107,107,.14);border-color:rgba(255,107,107,.4);color:#FF9B9B} .btn-danger:hover{background:rgba(255,107,107,.24)} .btn-ok{background:rgba(63,214,138,.15);border-color:rgba(63,214,138,.42);color:#8FF0C0} .btn-ok:hover{background:rgba(63,214,138,.26)} .btn.mini{padding:8px 16px;font-size:.85rem} .btn.block{width:100%} .btn:disabled,.btn[disabled]{opacity:.45;cursor:not-allowed;transform:none !important} /* Forms */ .field{margin-bottom:18px} .field>label{display:block;font-size:.885rem;color:var(--ink-2);margin-bottom:8px;font-weight:500} .field .hint{font-size:.79rem;color:var(--muted-2);margin-top:6px} .req{color:var(--coral)} input:not([type]),input[type=text],input[type=email],input[type=password],input[type=tel], input[type=number],input[type=date],input[type=datetime-local],input[type=time],input[type=url], input[type=search],select,textarea{ width:100%;padding:12px 16px;border-radius:var(--r-sm); background:rgba(255,255,255,.04);border:1px solid var(--line-2);color:var(--ink); transition:border-color .3s var(--ease),background .3s,box-shadow .3s; } input:focus,select:focus,textarea:focus{outline:none;border-color:var(--violet); background:rgba(255,255,255,.07);box-shadow:0 0 0 4px rgba(124,92,255,.16)} input::placeholder,textarea::placeholder{color:var(--muted-2)} textarea{min-height:130px;resize:vertical;line-height:1.75} select{appearance:none;cursor:pointer; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23918BB0' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 16px center;padding-right:42px} select option{background:var(--bg-2);color:var(--ink)} input[type=file]{padding:10px;font-size:.9rem;cursor:pointer} input[type=file]::file-selector-button{background:var(--panel-2);border:1px solid var(--line-2);color:var(--ink); padding:7px 14px;border-radius:8px;margin-right:12px;cursor:pointer;font-size:.86rem} .row{display:grid;gap:16px} .row.c2{grid-template-columns:1fr 1fr} .row.c3{grid-template-columns:repeat(3,1fr)} .check{display:flex;gap:11px;align-items:flex-start;cursor:pointer;font-size:.92rem;color:var(--ink-2);padding:4px 0} .check input{width:19px;height:19px;flex-shrink:0;margin-top:3px;accent-color:var(--violet);cursor:pointer} .panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(24px,4vw,38px); backdrop-filter:blur(14px)} .panel-head{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:22px} /* Auth pages */ .auth-shell{min-height:calc(100vh - var(--nav-h));display:grid;place-items:center;padding:50px 0} .auth-card{width:min(520px,100%);background:var(--glass);border:1px solid var(--line-2);border-radius:var(--r-xl); padding:clamp(30px,5vw,46px);backdrop-filter:blur(22px);box-shadow:var(--shadow)} .auth-card h1{font-size:1.95rem;margin-bottom:10px} .auth-alt{text-align:center;margin-top:22px;font-size:.9rem;color:var(--muted)} .auth-alt a{color:var(--violet-2);border-bottom:1px solid transparent;transition:border-color .3s} .auth-alt a:hover{border-color:var(--violet-2)} /* ==================== 08 · DASHBOARD & CLASSROOM ==================== */ .page-head{padding:44px 0 30px;border-bottom:1px solid var(--line);margin-bottom:38px} .page-head h1{font-size:clamp(1.9rem,3.4vw,2.7rem);margin-bottom:8px} .page-head p{color:var(--muted)} .crumb{font-size:.83rem;color:var(--muted-2);margin-bottom:12px;display:flex;gap:8px;align-items:center;flex-wrap:wrap} .crumb a:hover{color:var(--violet-2)} /* Progress bar */ .pbar{height:8px;border-radius:99px;background:rgba(255,255,255,.08);overflow:hidden;position:relative} .pbar i{display:block;height:100%;border-radius:99px;position:relative; background:linear-gradient(90deg,var(--violet),var(--coral),var(--amber));background-size:200% auto; animation:gradslide 3.5s linear infinite; width:0;transition:width 1.2s var(--ease-out)} .pbar.lg{height:12px} .pbar-row{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:.83rem; color:var(--muted);margin-bottom:8px} .pbar-row b{color:var(--ink);font-family:'Space Grotesk',sans-serif} /* วงกลมความคืบหน้า */ .pring{--p:0;width:76px;height:76px;border-radius:50%;display:grid;place-items:center;flex-shrink:0; background:conic-gradient(var(--violet) calc(var(--p)*1%),rgba(255,255,255,.08) 0)} .pring::before{content:'';position:absolute;width:60px;height:60px;border-radius:50%;background:var(--bg-2)} .pring span{position:relative;font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:.95rem} .pring{position:relative} /* การ์ดคอร์สในแดชบอร์ด */ .mycourse{display:grid;grid-template-columns:auto 1fr auto;gap:22px;align-items:center; background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);padding:22px 24px; transition:border-color .4s,transform .5s var(--ease-out),background .4s} .mycourse:hover{border-color:var(--violet);transform:translateX(4px);background:var(--panel-2)} .mycourse .em{width:62px;height:62px;border-radius:var(--r);display:grid;place-items:center;font-size:1.8rem; background:linear-gradient(140deg,var(--violet-deep),var(--bg-3));border:1px solid var(--line-2);flex-shrink:0} .mycourse .info h3{font-size:1.06rem;margin-bottom:5px} .mycourse .info .meta{font-size:.84rem;color:var(--muted);display:flex;gap:14px;flex-wrap:wrap;margin-bottom:11px} .mycourse .act{display:flex;flex-direction:column;gap:8px;flex-shrink:0} /* กล่องนับถอยหลัง */ .cd-box{display:flex;gap:10px} .cd-unit{background:var(--bg-3);border:1px solid var(--line-2);border-radius:12px;padding:11px 14px;text-align:center;min-width:64px} .cd-unit b{display:block;font-family:'Space Grotesk',sans-serif;font-size:1.5rem;line-height:1;color:var(--amber)} .cd-unit span{font-size:.7rem;color:var(--muted);letter-spacing:.08em} /* Classroom */ .learn-shell{display:grid;grid-template-columns:300px 1fr;gap:32px;align-items:start} .learn-side{position:sticky;top:calc(var(--nav-h) + 18px);background:var(--panel);border:1px solid var(--line); border-radius:var(--r-lg);padding:20px;max-height:calc(100vh - var(--nav-h) - 40px);overflow-y:auto} .lesson-nav a{display:flex;gap:12px;align-items:flex-start;padding:11px 13px;border-radius:11px;font-size:.9rem; color:var(--ink-2);transition:background .3s,color .3s;line-height:1.5} .lesson-nav a:hover{background:var(--panel-2);color:var(--ink)} .lesson-nav a.active{background:linear-gradient(100deg,rgba(124,92,255,.24),rgba(255,122,92,.10));color:#fff; border:1px solid rgba(124,92,255,.4)} .lesson-nav .tick{width:21px;height:21px;border-radius:50%;border:1.5px solid var(--line-2);flex-shrink:0; display:grid;place-items:center;font-size:.66rem;margin-top:2px} .lesson-nav a.done .tick{background:var(--ok);border-color:var(--ok);color:#062;font-weight:700} .lesson-nav .grp{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2); padding:16px 13px 8px;font-family:'Space Grotesk',sans-serif} .video-box{position:relative;aspect-ratio:16/9;border-radius:var(--r-lg);overflow:hidden;background:#000; border:1px solid var(--line-2);box-shadow:var(--shadow)} .video-box iframe,.video-box video{width:100%;height:100%;border:0;display:block} .video-empty{display:grid;place-items:center;height:100%;color:var(--muted);gap:10px;text-align:center;padding:30px} .prose{line-height:1.95;color:var(--ink-2)} .prose h2,.prose h3{color:var(--ink);margin:28px 0 12px} .prose p{margin-bottom:14px} .prose ul,.prose ol{margin:0 0 16px 22px} .prose ul li{list-style:disc;margin-bottom:7px} .prose ol li{list-style:decimal;margin-bottom:7px} .prose a{color:var(--violet-2);text-decoration:underline;text-underline-offset:3px} .prose blockquote{border-left:3px solid var(--coral);padding:6px 18px;margin:16px 0; background:rgba(255,122,92,.06);border-radius:0 10px 10px 0;color:var(--ink-2)} .prose code{background:rgba(255,255,255,.08);padding:2px 7px;border-radius:6px;font-size:.9em} .prose img{border-radius:var(--r);margin:16px 0} .prose hr{border:0;height:1px;background:var(--line);margin:24px 0} /* รายการไฟล์ */ .filelist{display:grid;gap:10px} .fileitem{display:flex;align-items:center;gap:14px;padding:14px 18px;border-radius:var(--r); border:1px solid var(--line);background:var(--panel);transition:border-color .35s,background .35s,transform .4s var(--ease-out)} .fileitem:hover{border-color:var(--violet);background:var(--panel-2);transform:translateX(4px)} .fileitem .fi{font-size:1.45rem;flex-shrink:0} .fileitem .fn{flex:1;min-width:0} .fileitem .fn b{display:block;font-weight:500;font-size:.96rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .fileitem .fn small{color:var(--muted);font-size:.79rem} /* Quiz */ .qcard{border:1px solid var(--line);border-radius:var(--r-lg);padding:26px;background:var(--panel);margin-bottom:18px} .qcard .qn{font-family:'Space Grotesk',sans-serif;font-size:.78rem;color:var(--coral);letter-spacing:.14em;margin-bottom:10px} .opt{display:flex;gap:13px;align-items:flex-start;padding:13px 17px;border-radius:12px;border:1px solid var(--line); cursor:pointer;margin-bottom:9px;transition:border-color .3s,background .3s} .opt:hover{border-color:var(--line-2);background:var(--panel-2)} .opt input{margin-top:4px;accent-color:var(--violet);width:18px;height:18px;flex-shrink:0} .opt.correct{border-color:var(--ok);background:rgba(63,214,138,.1)} .opt.wrong{border-color:var(--err);background:rgba(255,107,107,.1)} /* Assignment */ .assign{border:1px solid var(--line);border-radius:var(--r-lg);padding:24px;background:var(--panel);margin-bottom:16px} .assign-head{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:flex-start;margin-bottom:12px} .assign .due{font-size:.83rem;color:var(--warn)} .assign .due.over{color:var(--err)} .grade-box{border:1px solid rgba(63,214,138,.3);background:rgba(63,214,138,.07);border-radius:var(--r); padding:16px 20px;margin-top:14px} .grade-box .sc{font-family:'Space Grotesk',sans-serif;font-size:1.7rem;color:var(--ok);font-weight:700} /* Tables */ .tbl-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--panel)} table.tbl{width:100%;border-collapse:collapse;font-size:.9rem;min-width:640px} table.tbl th{text-align:left;padding:14px 16px;background:rgba(255,255,255,.045);color:var(--ink-2); font-weight:500;font-size:.83rem;letter-spacing:.04em;border-bottom:1px solid var(--line);white-space:nowrap} table.tbl td{padding:14px 16px;border-bottom:1px solid var(--line);vertical-align:middle} table.tbl tr:last-child td{border-bottom:0} table.tbl tbody tr{transition:background .3s} table.tbl tbody tr:hover{background:rgba(255,255,255,.03)} .nowrap{white-space:nowrap} /* Empty state */ .empty{text-align:center;padding:64px 24px;border:1px dashed var(--line-2);border-radius:var(--r-lg);color:var(--muted)} .empty .em{font-size:2.8rem;margin-bottom:14px;opacity:.6} /* Tabs */ .tabs{display:flex;gap:6px;border-bottom:1px solid var(--line);margin-bottom:26px;overflow-x:auto;padding-bottom:1px} .tabs a,.tabs button{padding:11px 18px;border-radius:12px 12px 0 0;color:var(--muted);border:0;background:none; cursor:pointer;white-space:nowrap;font-size:.93rem;position:relative;transition:color .3s} .tabs a:hover,.tabs button:hover{color:var(--ink)} .tabs a.on,.tabs button.on{color:#fff;background:var(--panel-2)} .tabs a.on::after,.tabs button.on::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:2px; background:linear-gradient(90deg,var(--violet),var(--coral))} /* Chips filter */ .chips{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:26px} .chip{padding:8px 17px;border-radius:var(--r-pill);border:1px solid var(--line-2);font-size:.87rem; color:var(--ink-2);cursor:pointer;transition:.35s var(--ease);background:rgba(255,255,255,.03)} .chip:hover{border-color:var(--violet);color:#fff} .chip.on{background:linear-gradient(120deg,var(--violet),var(--violet-deep));border-color:transparent;color:#fff; box-shadow:0 8px 22px -10px rgba(124,92,255,.9)} /* ============================ 09 · ADMIN ============================ */ .admin-shell{display:grid;grid-template-columns:236px 1fr;gap:28px;align-items:start;padding-top:26px} .admin-side{position:sticky;top:calc(var(--nav-h) + 16px);background:var(--panel);border:1px solid var(--line); border-radius:var(--r-lg);padding:16px} .admin-side a{display:flex;align-items:center;gap:11px;padding:11px 14px;border-radius:11px;font-size:.92rem; color:var(--ink-2);transition:background .3s,color .3s} .admin-side a:hover{background:var(--panel-2);color:#fff} .admin-side a.on{background:linear-gradient(100deg,rgba(124,92,255,.26),transparent);color:#fff; border-left:2px solid var(--violet)} .admin-side .sep{height:1px;background:var(--line);margin:10px 6px} .kpi{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px;margin-bottom:28px} .kpi .k{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:18px 20px} .kpi .k b{display:block;font-family:'Space Grotesk',sans-serif;font-size:1.9rem;line-height:1.1; background:linear-gradient(120deg,var(--violet-2),var(--coral-2));-webkit-background-clip:text;background-clip:text;color:transparent} .kpi .k span{font-size:.82rem;color:var(--muted)} /* Rich text editor toolbar */ .rte-bar{display:flex;flex-wrap:wrap;gap:4px;padding:9px;border:1px solid var(--line-2);border-bottom:0; border-radius:var(--r-sm) var(--r-sm) 0 0;background:rgba(255,255,255,.045)} .rte-bar button{width:34px;height:32px;border-radius:7px;border:1px solid transparent;background:none;cursor:pointer; color:var(--ink-2);font-size:.86rem;transition:.25s} .rte-bar button:hover{background:var(--panel-2);color:#fff;border-color:var(--line)} .rte-bar .sp{width:1px;background:var(--line);margin:4px 5px} .rte{min-height:280px;padding:18px;border:1px solid var(--line-2);border-radius:0 0 var(--r-sm) var(--r-sm); background:rgba(255,255,255,.04);line-height:1.85;overflow-y:auto;max-height:560px} .rte:focus{outline:none;border-color:var(--violet)} .rte:empty::before{content:attr(data-ph);color:var(--muted-2)} /* ======================= 10 · FOOTER & RESPONSIVE =================== */ footer.site{border-top:1px solid var(--line);background:linear-gradient(180deg,transparent,rgba(124,92,255,.05)); padding:64px 0 30px;margin-top:80px} .foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:38px;margin-bottom:44px} .foot-grid h4{font-size:.79rem;letter-spacing:.19em;text-transform:uppercase;color:var(--muted-2);margin-bottom:16px; font-family:'Space Grotesk',sans-serif} .foot-grid p{font-size:.9rem;color:var(--muted);line-height:1.85} .foot-grid a{display:block;font-size:.91rem;color:var(--ink-2);padding:5px 0;transition:color .3s,transform .3s var(--ease)} .foot-grid a:hover{color:var(--coral-2);transform:translateX(3px)} .foot-bottom{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:24px; border-top:1px solid var(--line);font-size:.83rem;color:var(--muted-2)} .sponsor-strip{display:flex;flex-wrap:wrap;align-items:center;gap:26px;justify-content:center; padding:26px 0;border-block:1px solid var(--line);margin-bottom:38px} .sponsor-strip img{height:38px;width:auto;opacity:.62;filter:grayscale(1) brightness(1.7);transition:.4s var(--ease)} .sponsor-strip img:hover{opacity:1;filter:none} .sponsor-strip .lbl{font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2);width:100%;text-align:center} @media (max-width:1080px){ .learn-shell{grid-template-columns:1fr} .learn-side{position:static;max-height:none} .admin-shell{grid-template-columns:1fr} .admin-side{position:static} .admin-side{display:flex;flex-wrap:wrap;gap:6px} .admin-side a{flex:1 1 auto;justify-content:center} .admin-side .sep{display:none} .foot-grid{grid-template-columns:1fr 1fr} } @media (max-width:860px){ :root{--fs-base:16.5px;--nav-h:66px} .wrap,.wrap-sm,.wrap-xs{width:calc(100% - 32px)} .burger{display:grid;place-items:center} nav.main{ position:fixed;inset:var(--nav-h) 0 auto 0;flex-direction:column;align-items:stretch;gap:2px; background:var(--glass);backdrop-filter:blur(22px);padding:18px;border-bottom:1px solid var(--line-2); transform:translateY(-130%);transition:transform .45s var(--ease);max-height:calc(100vh - var(--nav-h));overflow-y:auto; } nav.main.open{transform:none} nav.main>a{padding:13px 16px;border-radius:12px} nav.main>a::after{display:none} .lang-sw{margin-left:auto} .mycourse{grid-template-columns:1fr;gap:14px} .mycourse .act{flex-direction:row;flex-wrap:wrap} .row.c2,.row.c3{grid-template-columns:1fr} .foot-grid{grid-template-columns:1fr;gap:26px} .step{grid-template-columns:48px 1fr;gap:16px} .steps::before{left:18px} .step .num{width:38px;height:38px;font-size:.9rem} .hstats{grid-template-columns:1fr 1fr} } @media (max-width:520px){ .hstats{grid-template-columns:1fr} .btn{padding:12px 20px;font-size:.93rem} .hero-actions .btn{width:100%} } @media print{ body::before,body::after,.topbar,footer.site,.btn,nav{display:none !important} body{background:#fff;color:#000} } /* ---- alias: ปุ่มสลับภาษาจาก inc/lang.php (.lang-switch > a.ls) ---- */ .lang-switch{display:inline-flex;border:1px solid var(--line-2);border-radius:var(--r-pill);overflow:hidden;font-size:.8rem} .lang-switch .ls{padding:6px 13px;color:var(--muted);transition:.3s var(--ease); font-family:'Space Grotesk',sans-serif;letter-spacing:.06em} .lang-switch .ls.on{background:var(--violet);color:#fff} .lang-switch .ls:not(.on):hover{background:var(--panel-2);color:var(--ink)} .flash b.fi{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%; font-size:.78rem;margin-right:8px;vertical-align:-5px;font-weight:700} .flash.ok b.fi{background:var(--ok);color:#052E1B} .flash.err b.fi{background:var(--err);color:#3A0A0A} .sect-head h2+.lead,.sect-head .eyebrow+h2{margin-top:14px} .sect-head .lead{margin-top:16px} /* ===================================================================== 11 · LEGACY COMPATIBILITY LAYER --------------------------------------------------------------------- หน้าเว็บที่ยกมาจากชุดเดิม (Pattaya Academy) ใช้ชื่อคลาสอีกชุดหนึ่ง ส่วนนี้แปลงคลาสเหล่านั้นให้เข้ากับธีมมืดของ NEXT+ โดยไม่ต้องแก้ HTML ทำให้ทุกหน้าหน้าตาเป็นชุดเดียวกันทันที และแก้ทีละหน้าได้ภายหลัง ===================================================================== */ :root{ --red:#FF6B6B; --green:#3FD68A; --yellow:#FFC44D; --yellow-soft:rgba(255,196,77,.16); --pink:#FF7A5C; --sky:#5AB9FF; --gray:#918BB0; --ink-legacy:#F3F0FF; } /* ---------- โครงหน้า ---------- */ section{position:relative} .page-hero{padding:44px 0 30px;border-bottom:1px solid var(--line);margin-bottom:34px} .page-hero h1{font-size:clamp(1.85rem,3.4vw,2.6rem);margin-bottom:10px} .page-hero .sub,.page-hero p{color:var(--muted);max-width:70ch} .sec-head{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:20px} .sec-title{font-family:'Kanit',sans-serif;font-size:1.35rem;font-weight:600;margin-bottom:16px} .sec-chip{display:inline-flex;align-items:center;gap:7px;padding:5px 14px;border-radius:var(--r-pill); border:1px solid var(--line-2);background:rgba(255,255,255,.04);font-size:.8rem;color:var(--ink-2)} .two-col{display:grid;grid-template-columns:1fr 1fr;gap:24px} .grid2,.admin-grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px} .head-row{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:18px} .sub{color:var(--muted)} .alt{color:var(--muted);font-size:.9rem} .alt a,.link-u{color:var(--violet-2);border-bottom:1px solid transparent;transition:border-color .3s} .alt a:hover,.link-u:hover{border-color:var(--violet-2)} .hl{color:var(--coral-2)} .line{height:1px;background:var(--line);margin:22px 0;border:0} /* ---------- การ์ด "sticker" เดิม → แผงกระจกมืด ---------- */ .sticker,.box,.plate,.side-card,.dash-card,.stat-card,.table-card,.form-card,.cert-box, .logo-card,.next-course,.recip-box,.detail-body,.admin-form,.bk-course{ background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg); padding:clamp(20px,3vw,30px);backdrop-filter:blur(12px);box-shadow:none; } .table-card,.detail-body{padding:0;overflow:hidden} .form-card{width:min(640px,100%);margin-inline:auto} .form-card h1{font-size:clamp(1.6rem,3vw,2.1rem);margin-bottom:8px} .stat-card,.dash-card{transition:border-color .4s var(--ease),transform .5s var(--ease-out)} .stat-card:hover,.dash-card:hover{border-color:var(--line-2);transform:translateY(-3px)} /* ---------- ปุ่มชุดเดิม ---------- */ .btn.pink{background:linear-gradient(120deg,var(--coral),#E85D3D);color:#fff;border-color:transparent; box-shadow:0 12px 32px -14px rgba(255,122,92,.9)} .btn.pink:hover{transform:translateY(-2px)} .btn.sky{background:rgba(90,185,255,.16);border-color:rgba(90,185,255,.4);color:#A8D9FF} .btn.sky:hover{background:rgba(90,185,255,.26)} .btn.green{background:rgba(63,214,138,.15);border-color:rgba(63,214,138,.42);color:#8FF0C0} .btn.green:hover{background:rgba(63,214,138,.26)} .btn.yellow{background:rgba(255,196,77,.16);border-color:rgba(255,196,77,.42);color:#FFDB94} .btn.yellow:hover{background:rgba(255,196,77,.26)} .btn.red,.btn.danger{background:rgba(255,107,107,.14);border-color:rgba(255,107,107,.42);color:#FF9B9B} .btn.red:hover,.btn.danger:hover{background:rgba(255,107,107,.24)} .btn.gray{background:var(--panel-2);border-color:var(--line);color:var(--ink-2)} .btn.gray:hover{background:rgba(255,255,255,.1);color:var(--ink)} .btn.ghost{border-color:var(--line-2);color:var(--ink);background:rgba(255,255,255,.03)} .btn.ghost:hover{background:var(--panel-2);border-color:var(--violet)} .btn.big,.btn.btn-lg{padding:16px 32px;font-size:1.05rem} .inline-form{display:inline-block} .send-row,.cert-actions,.lesson-foot,.form-foot,.cert-foot,.bk-foot,.pi-foot,.sign-row{ display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-top:22px} .form-foot{padding-top:20px;border-top:1px solid var(--line)} /* ---------- ฟอร์ม ---------- */ .field .note,.note,.bk-note,.sp-note,.progress-txt,.wp-label,.sb-label,.fs-label{ font-size:.8rem;color:var(--muted-2);margin-top:6px;line-height:1.65} fieldset,.name-set{border:1px solid var(--line);border-radius:var(--r);padding:20px 22px 8px;margin-bottom:20px; background:rgba(255,255,255,.02)} legend{padding:0 10px;font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;color:var(--coral-2); font-family:'Space Grotesk',sans-serif} .name-row{display:grid;grid-template-columns:150px 1fr 1fr;gap:14px} .pfx-field{margin-bottom:18px} .chk-row{display:flex;flex-direction:column;gap:10px;margin:12px 0} .filters{display:flex;gap:12px;flex-wrap:wrap;align-items:end;margin-bottom:22px} .filters .field{margin-bottom:0;min-width:180px} label{cursor:pointer} /* ---------- ป้าย / ชิป ---------- */ .pill,.tag{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:var(--r-pill); font-size:.78rem;border:1px solid var(--line-2);background:rgba(255,255,255,.045);color:var(--ink-2)} .pill.green,.tag.green,.badge.green{background:rgba(63,214,138,.15);color:var(--ok);border-color:rgba(63,214,138,.35)} .pill.red,.tag.red,.badge.red{background:rgba(255,107,107,.15);color:var(--err);border-color:rgba(255,107,107,.35)} .pill.yellow,.tag.yellow,.badge.yellow{background:rgba(255,196,77,.15);color:var(--warn);border-color:rgba(255,196,77,.35)} .pill.sky,.tag.sky,.badge.sky{background:rgba(90,185,255,.15);color:var(--info);border-color:rgba(90,185,255,.35)} .pill.gray,.tag.gray,.badge.gray{background:rgba(255,255,255,.06);color:var(--muted)} .pill.pink,.badge.pink{background:rgba(255,122,92,.16);color:var(--coral-2);border-color:rgba(255,122,92,.36)} /* ---------- ตาราง ---------- */ .table-wrap{overflow-x:auto} table{width:100%;border-collapse:collapse;font-size:.9rem} table th{text-align:left;padding:13px 16px;background:rgba(255,255,255,.045);color:var(--ink-2); font-weight:500;font-size:.82rem;border-bottom:1px solid var(--line);white-space:nowrap} table td{padding:13px 16px;border-bottom:1px solid var(--line);vertical-align:middle} table tr:last-child td{border-bottom:0} table tbody tr{transition:background .3s} table tbody tr:hover{background:rgba(255,255,255,.03)} .admin-table{min-width:680px} /* ---------- คู่ คีย์:ค่า ---------- */ .kv,dl{display:grid;grid-template-columns:auto 1fr;gap:8px 18px;font-size:.92rem;margin:14px 0} .kv dt,dl dt,.kv>b{color:var(--muted);font-weight:400} .kv dd,dl dd{margin:0;color:var(--ink)} .list{display:flex;flex-direction:column;gap:10px} .list li,.todo-list li,.rec-list li{display:flex;gap:11px;align-items:flex-start;padding:11px 15px; border-radius:12px;border:1px solid var(--line);background:rgba(255,255,255,.025);font-size:.92rem} .todo-list li.urgent{border-color:rgba(255,122,92,.45);background:rgba(255,122,92,.08)} .todo-list li.done{opacity:.55} /* ---------- แดชบอร์ด (โครงเดิม) ---------- */ .dash-hero{padding:38px 0 26px} .dash-hero h1{font-size:clamp(1.7rem,3.2vw,2.4rem)} .dash-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px;margin-bottom:26px} .dash-stats,.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px;margin-bottom:26px} .stat-card .n,.stat-card b{font-family:'Space Grotesk',sans-serif;font-size:1.85rem;line-height:1.1;display:block; background:linear-gradient(120deg,var(--violet-2),var(--coral-2));-webkit-background-clip:text;background-clip:text;color:transparent} .stat-card .d,.stat-card span{font-size:.82rem;color:var(--muted)} .nc-body{display:flex;gap:18px;align-items:center;flex-wrap:wrap} .nc-date{text-align:center;padding:12px 16px;border-radius:14px;background:var(--bg-3);border:1px solid var(--line-2);flex-shrink:0} .nc-date .d,.nc-date b{display:block;font-family:'Space Grotesk',sans-serif;font-size:1.7rem;color:var(--amber);line-height:1} .nc-date .m,.nc-date small{font-size:.74rem;color:var(--muted)} .nc-meta{font-size:.87rem;color:var(--muted);display:flex;gap:14px;flex-wrap:wrap} .nc-pills{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px} /* แถบความคืบหน้าแบบเดิม */ .progress-wrap{margin:12px 0} .progress-bar{height:9px;border-radius:99px;background:rgba(255,255,255,.08);overflow:hidden;position:relative} .progress-bar>span,.progress-bar>i,.progress-bar>div{display:block;height:100%;border-radius:99px; background:linear-gradient(90deg,var(--violet),var(--coral),var(--amber));background-size:200% auto; animation:gradslide 3.5s linear infinite} .prog-item{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--line);font-size:.92rem} .prog-item:last-child{border-bottom:0} /* ---------- ห้องเรียน (โครงเดิม) ---------- */ .learn-grid{display:grid;grid-template-columns:300px 1fr;gap:30px;align-items:start} .learn-side{position:sticky;top:calc(var(--nav-h) + 18px);background:var(--panel);border:1px solid var(--line); border-radius:var(--r-lg);padding:20px;max-height:calc(100vh - var(--nav-h) - 40px);overflow-y:auto} .learn-main{min-width:0} .lesson-list{display:flex;flex-direction:column;gap:3px} .lesson-list a{display:flex;gap:11px;align-items:flex-start;padding:11px 13px;border-radius:11px; font-size:.9rem;color:var(--ink-2);transition:background .3s,color .3s;line-height:1.5} .lesson-list a:hover{background:var(--panel-2);color:var(--ink)} .lesson-list a.on,.lesson-list a.active{background:linear-gradient(100deg,rgba(124,92,255,.24),rgba(255,122,92,.08)); color:#fff;border:1px solid rgba(124,92,255,.4)} .lesson-list a.done{color:var(--muted)} .lesson-list .tick,.tick{width:21px;height:21px;border-radius:50%;border:1.5px solid var(--line-2);flex-shrink:0; display:grid;place-items:center;font-size:.66rem;margin-top:2px} .lesson-list a.done .tick{background:var(--ok);border-color:var(--ok);color:#062;font-weight:700} .lesson-content{line-height:1.95;color:var(--ink-2)} .lesson-content h2,.lesson-content h3{color:var(--ink);margin:26px 0 12px} .lesson-content p{margin-bottom:14px} .lesson-content ul li{list-style:disc;margin-left:22px;margin-bottom:7px} .lesson-content ol li{list-style:decimal;margin-left:22px;margin-bottom:7px} .lesson-content a{color:var(--violet-2);text-decoration:underline;text-underline-offset:3px} .nav-lesson{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:26px; padding-top:20px;border-top:1px solid var(--line)} .mat-list{display:grid;gap:10px} .mat{display:flex;align-items:center;gap:14px;padding:14px 18px;border-radius:var(--r); border:1px solid var(--line);background:var(--panel);transition:border-color .35s,transform .4s var(--ease-out)} .mat:hover{border-color:var(--violet);transform:translateX(4px)} /* ---------- แบบฝึกหัด ---------- */ .quiz-q{border:1px solid var(--line);border-radius:var(--r-lg);padding:24px;background:var(--panel);margin-bottom:16px} .q-head{display:flex;gap:12px;align-items:flex-start;margin-bottom:14px} .q-no{font-family:'Space Grotesk',sans-serif;font-size:.78rem;color:var(--coral);letter-spacing:.14em;flex-shrink:0} .q-opts{display:flex;flex-direction:column;gap:9px} .q-opt{display:flex;gap:13px;align-items:flex-start;padding:12px 16px;border-radius:12px; border:1px solid var(--line);cursor:pointer;transition:border-color .3s,background .3s} .q-opt:hover{border-color:var(--line-2);background:var(--panel-2)} .q-opt input{margin-top:4px;accent-color:var(--violet);width:18px;height:18px;flex-shrink:0} .q-opt.ok,.q-opt.given{border-color:var(--ok);background:rgba(63,214,138,.1)} .q-opt.err{border-color:var(--err);background:rgba(255,107,107,.1)} /* ---------- รายละเอียดคอร์ส ---------- */ .detail-grid{display:grid;grid-template-columns:1.65fr 1fr;gap:30px;align-items:start} .detail-thumb{aspect-ratio:16/9;border-radius:var(--r-lg);display:grid;place-items:center;overflow:hidden; background:linear-gradient(135deg,var(--violet-deep),#1B1338 55%,var(--bg-3));border:1px solid var(--line-2);position:relative} .detail-thumb .em{font-size:4.2rem;filter:drop-shadow(0 12px 26px rgba(0,0,0,.6))} .detail-body{padding:clamp(22px,3vw,32px)} .side-card{position:sticky;top:calc(var(--nav-h) + 18px)} .big-price{font-family:'Space Grotesk',sans-serif;font-size:2.1rem;font-weight:700;color:var(--amber);line-height:1.1} .g-rounds{display:grid;gap:10px;margin-top:14px} .g-round{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:12px 16px; border-radius:12px;border:1px solid var(--line);font-size:.9rem;transition:border-color .3s,background .3s} .g-round:hover{border-color:var(--violet);background:var(--panel-2)} .g-round.on{border-color:var(--violet);background:rgba(124,92,255,.12)} .desc{line-height:1.95;color:var(--ink-2);white-space:pre-line} /* ---------- กล่องยืนยัน / โมดัล ---------- */ /* .bk-back = ฉากหลัง · .bk-modal = ตัวกล่อง · ซ่อนด้วย attribute hidden */ .bk-back{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:20px; background:rgba(4,3,10,.82);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);overflow-y:auto} [hidden]{display:none !important} .bk-modal{width:min(580px,100%);background:var(--bg-2);border:1px solid var(--line-2);border-radius:var(--r-xl); padding:clamp(24px,4vw,36px);box-shadow:var(--shadow);max-height:88vh;overflow-y:auto; animation:popin .38s var(--spring)} @keyframes popin{from{opacity:0;transform:translateY(18px) scale(.96)}to{opacity:1;transform:none}} .bk-modal h2{font-size:1.3rem;margin-bottom:8px} body.bk-open{overflow:hidden;position:fixed;width:100%} .bk-top,.bk-lead{margin-bottom:16px;color:var(--ink-2)} .bk-kv{display:grid;grid-template-columns:auto 1fr;gap:8px 18px;font-size:.9rem; padding:16px 18px;border-radius:var(--r);background:rgba(255,255,255,.04);border:1px solid var(--line);margin-bottom:16px} .bk-kv b{color:var(--muted);font-weight:400} .bk-course{display:flex;gap:14px;align-items:center;padding:14px 16px;border-radius:var(--r); border:1px solid var(--line);background:rgba(255,255,255,.03);margin-bottom:16px} .bk-course .em{width:48px;height:48px;border-radius:13px;display:grid;place-items:center;font-size:1.4rem;flex-shrink:0} .bk-course b{display:block;font-size:.96rem;line-height:1.45} .bk-course small{display:block;color:var(--muted);font-size:.8rem} .cx-close{color:var(--muted)} .cx-close:hover{color:var(--ink)} /* ---------- ใบประกาศนียบัตร ---------- */ .cert-wrap{max-width:960px;margin-inline:auto} .cert-sheet{background:#FFFDF8;color:#161326;border-radius:8px;padding:clamp(34px,6vw,64px); box-shadow:0 30px 80px -30px rgba(0,0,0,.9);border:14px solid #4B3F8F;position:relative} .cert-sheet h1,.cert-sheet h2,.cert-sheet h3{color:#241E4E} .cert-sheet .cert-no,.cert-no{font-family:'Space Grotesk',sans-serif;letter-spacing:.16em;font-size:.8rem;color:#6b6486} .cert-top,.cert-foot,.cert-main{text-align:center} .cert-foot{display:flex;justify-content:space-around;gap:24px;margin-top:44px;flex-wrap:wrap} .sign{text-align:center;font-size:.85rem} .sign .l,.sign-row .l{border-top:1px solid #241E4E;padding-top:8px;margin-top:34px;min-width:190px;display:block} .qr,.qr-box{display:grid;place-items:center} .qr-box canvas,.qr canvas,.qr img{border-radius:6px;background:#fff;padding:6px} .cert-chips{display:flex;gap:9px;flex-wrap:wrap;justify-content:center;margin-top:18px} .cert-chip{padding:5px 13px;border-radius:var(--r-pill);border:1px solid rgba(36,30,78,.2);font-size:.78rem;color:#4B3F8F} .cert-input-card{width:min(560px,100%);margin-inline:auto} .cert-status.ok{color:var(--ok)} .cert-status.err,.cert-error{color:var(--err)} @media print{.cert-sheet{box-shadow:none;border-color:#4B3F8F}} /* ---------- หลังบ้าน ---------- */ .admin-head{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap; padding:30px 0 22px;border-bottom:1px solid var(--line);margin-bottom:26px} .admin-head h1{font-size:clamp(1.5rem,2.8vw,2.1rem)} .admin-nav{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:26px} .admin-nav a{padding:9px 16px;border-radius:var(--r-pill);border:1px solid var(--line-2);font-size:.88rem; color:var(--ink-2);transition:.3s var(--ease);background:rgba(255,255,255,.03)} .admin-nav a:hover{border-color:var(--violet);color:#fff} .admin-nav a.on,.admin-nav a.active{background:linear-gradient(120deg,var(--violet),var(--violet-deep)); border-color:transparent;color:#fff} .admin-form .field{margin-bottom:16px} /* ตัวเขียนอีเมล (admin/mail.php) */ .ed-tools{display:flex;flex-wrap:wrap;gap:4px;padding:9px;border:1px solid var(--line-2);border-bottom:0; border-radius:var(--r-sm) var(--r-sm) 0 0;background:rgba(255,255,255,.045)} .ed-tools button,.ed-b{min-width:34px;height:32px;padding:0 8px;border-radius:7px;border:1px solid transparent; background:none;cursor:pointer;color:var(--ink-2);font-size:.86rem;transition:.25s} .ed-tools button:hover,.ed-b:hover{background:var(--panel-2);color:#fff;border-color:var(--line)} .ed-area,.ed-html,.ed-src{min-height:280px;padding:18px;border:1px solid var(--line-2); border-radius:0 0 var(--r-sm) var(--r-sm);background:rgba(255,255,255,.04);line-height:1.85; overflow-y:auto;max-height:560px;width:100%} .ed-area:focus,.ed-src:focus{outline:none;border-color:var(--violet)} .ed-src{font-family:ui-monospace,monospace;font-size:.86rem} .lang-tabs{display:flex;gap:6px;margin-bottom:0} .lang-tabs button{padding:9px 18px;border-radius:12px 12px 0 0;border:1px solid var(--line);border-bottom:0; background:rgba(255,255,255,.03);color:var(--muted);cursor:pointer;font-size:.9rem} .lang-tabs button.on{background:var(--panel-2);color:#fff} .lang-pane[hidden]{display:none} .aud-grid,.recip-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px} .aud{padding:14px 18px;border-radius:var(--r);border:1px solid var(--line);background:rgba(255,255,255,.03)} .aud.on{border-color:var(--violet);background:rgba(124,92,255,.12)} /* ---------- ผู้สนับสนุน (แสดงเฉพาะแบรนด์ Pattaya) ---------- */ .sponsor-bar,.foot-sponsors,.sponsors-sec,.sp-row,.foot-logos{display:flex;flex-wrap:wrap;align-items:center; gap:22px;justify-content:center} .sponsor-bar{padding:14px 0;border-bottom:1px solid var(--line);background:rgba(255,255,255,.02)} .sponsor-bar img,.foot-logos img,.sp-row img,.logo-card img{height:34px;width:auto;opacity:.6; filter:grayscale(1) brightness(1.8);transition:.4s var(--ease)} .sponsor-bar img:hover,.foot-logos img:hover,.sp-row img:hover{opacity:1;filter:none} .sp-tier-h,.sb-label,.sp-note,.sponsor-note{font-size:.74rem;letter-spacing:.16em;text-transform:uppercase; color:var(--muted-2);width:100%;text-align:center} .sp-tier{width:100%;margin-bottom:18px} .logo-text{font-size:.84rem;color:var(--muted)} /* ---------- ตัวช่วยเล็ก ๆ ---------- */ .muted,.gray{color:var(--muted)} .green{color:var(--ok)} .red{color:var(--err)} .warn{color:var(--warn)} .mm{font-family:'Space Grotesk',sans-serif;font-variant-numeric:tabular-nums} .show{display:block} @media (max-width:1080px){ .learn-grid,.detail-grid{grid-template-columns:1fr} .learn-side,.side-card{position:static;max-height:none} } @media (max-width:860px){ .two-col{grid-template-columns:1fr} .name-row{grid-template-columns:1fr} .kv,dl,.bk-kv{grid-template-columns:1fr;gap:2px 0} .kv dt,dl dt,.bk-kv b{margin-top:10px} } /* ---------- ขนาดหัวข้อในการ์ด (กันหัวข้อใหญ่เกินในกล่องแคบ) ---------- */ .sticker h2,.dash-card h2,.side-card h2,.panel h2.card-h,.stat-card h2,.form-card h2{ font-size:clamp(1.05rem,1.6vw,1.24rem);line-height:1.4;margin-bottom:16px; display:flex;align-items:center;gap:10px} .sticker h3,.dash-card h3{font-size:1.02rem;line-height:1.45} .dash-card h3 a:hover{color:var(--coral-2)} /* ---------- ชุดสีลวดลาย (pattern) ที่หน้าเดิมใช้ ---------- */ .pat-pink {background:linear-gradient(140deg,#B3417A,#5A1F44)} .pat-sky {background:linear-gradient(140deg,#2E7FC4,#152F55)} .pat-yellow {background:linear-gradient(140deg,#C08A1E,#4A3210)} .pat-green {background:linear-gradient(140deg,#2E9C6A,#123A2A)} .pat-blue {background:linear-gradient(140deg,#3B57C0,#161F4C)} .pat-violet {background:linear-gradient(140deg,#6C4FD6,#2A1F55)} .pat-coral {background:linear-gradient(140deg,#D9583A,#4C1D12)} .pat-cyan {background:linear-gradient(140deg,#1D9AAA,#0B3940)} .pat-amber {background:linear-gradient(140deg,#C97C1C,#4A2C08)} /* ---------- แดชบอร์ด: รายละเอียดที่เหลือ ---------- */ .dash-stats{display:flex;gap:26px;flex-wrap:wrap;margin-top:20px} .dash-stats .ds{display:inline-flex;align-items:baseline;gap:8px;font-size:.88rem;color:var(--muted); padding:10px 18px;border:1px solid var(--line);border-radius:var(--r-pill);background:rgba(255,255,255,.03)} .dash-stats .ds b{font-family:'Space Grotesk',sans-serif;font-size:1.35rem;color:var(--ink);line-height:1} .dash-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:20px} .next-course{display:flex;gap:18px;align-items:flex-start;flex-wrap:wrap} .nc-date{min-width:82px;text-align:center;padding:14px 12px;border-radius:16px;border:1px solid var(--line-2);flex-shrink:0} .nc-date .dd{display:block;font-family:'Space Grotesk',sans-serif;font-size:2rem;font-weight:700;line-height:1;color:#fff} .nc-date .mm{display:block;font-size:.76rem;color:rgba(255,255,255,.82);margin-top:4px} .nc-body{flex:1;min-width:220px;display:block} .next-course .countdown{display:inline-block;padding:4px 13px;border-radius:var(--r-pill);font-size:.78rem; background:rgba(255,196,77,.16);color:var(--warn);border:1px solid rgba(255,196,77,.34);margin-bottom:10px} .next-course .countdown.soon{background:rgba(255,122,92,.2);color:var(--coral-2);border-color:rgba(255,122,92,.42)} .todo-list{display:flex;flex-direction:column;gap:10px} .todo-list li{align-items:center} .todo-list .ic{font-size:1.15rem;flex-shrink:0} .todo-list .tx{flex:1;min-width:0;line-height:1.55} .todo-list .btn{flex-shrink:0} .prog-item{display:block;padding:14px 0;border-bottom:1px solid var(--line)} .prog-item:last-of-type{border-bottom:0} .pi-top{display:flex;justify-content:space-between;gap:12px;align-items:baseline;margin-bottom:8px} .pi-top b{font-weight:500;font-size:.95rem;line-height:1.45} .pi-top span{font-family:'Space Grotesk',sans-serif;color:var(--coral-2);flex-shrink:0} .pi-foot{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-top:10px;flex-wrap:wrap} .pi-foot small{color:var(--muted);font-size:.82rem} .rec-list{display:flex;flex-direction:column;gap:10px} .rec{display:flex;align-items:center;gap:14px;padding:12px 15px;border-radius:var(--r); border:1px solid var(--line);background:rgba(255,255,255,.025);transition:border-color .35s,transform .4s var(--ease-out)} .rec:hover{border-color:var(--violet);transform:translateX(4px)} .rec .em{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;font-size:1.35rem;flex-shrink:0} .rec .tx{flex:1;min-width:0} .rec .tx b{display:block;font-weight:500;font-size:.94rem;line-height:1.45} .rec .tx small{color:var(--muted);font-size:.8rem} .rec .pr{font-family:'Space Grotesk',sans-serif;color:var(--amber);flex-shrink:0;font-weight:600} .cert-chips{justify-content:flex-start} .cert-chip{display:inline-flex;flex-direction:column;gap:2px;padding:10px 16px;border-radius:var(--r); border:1px solid rgba(124,92,255,.35);background:rgba(124,92,255,.10);color:var(--ink);font-size:.86rem} .cert-chip:hover{border-color:var(--violet);background:rgba(124,92,255,.18)} .cert-chip small{color:var(--muted);font-family:'Space Grotesk',sans-serif;font-size:.72rem} /* หน้า login/register ให้ใช้การ์ดกระจกเหมือนกัน */ .form-card{background:var(--glass);border-color:var(--line-2);box-shadow:var(--shadow)} /* ---------- แถบความคืบหน้าแบบ inline (span) ---------- */ .progress-bar{display:block;width:100%} .progress-bar.mini{height:7px;margin-bottom:6px} /* ปุ่มเลือกไฟล์ให้เข้าธีมมืด */ input[type=file]{color:var(--ink-2)} input[type=file]::file-selector-button{background:linear-gradient(120deg,var(--violet),var(--violet-deep)); border:0;color:#fff;padding:8px 16px;border-radius:99px;margin-right:12px;cursor:pointer;font-size:.85rem} input[type=file]::file-selector-button:hover{filter:brightness(1.15)} .admin-nav .nbadge{display:inline-grid;place-items:center;min-width:19px;height:19px;padding:0 5px; border-radius:99px;background:var(--coral);color:#fff;font-size:.7rem;font-weight:700; font-family:'Space Grotesk',sans-serif;margin-left:5px;vertical-align:1px} .admin-nav a.on .nbadge{background:#fff;color:var(--violet-deep)} .stat-card .n{font-family:'Space Grotesk',sans-serif;font-size:1.9rem;line-height:1.1; background:linear-gradient(120deg,var(--violet-2),var(--coral-2));-webkit-background-clip:text;background-clip:text;color:transparent} .stat-card .l{font-size:.83rem;color:var(--muted);margin-top:4px}