/* ============================================================ * Aleanor Playground — ธีมหลัก * ใช้ token ชุดเดียวกับ aleanor_landing เพื่อให้หน้าตาเป็นตระกูลเดียวกัน * ============================================================ */ /* Google Sans (OFL 1.1) — self-host: variable weight 100–900, Latin + ไทย. * โหลดเฉพาะตอนผู้ใช้เลือกฟอนต์นี้ (font-display:swap) · ?v ขยับเมื่อเปลี่ยนไฟล์ฟอนต์ */ @font-face{ font-family:'Google Sans'; font-style:normal; font-weight:100 900; font-display:swap; src:url(../fonts/google-sans/google-sans.woff2?v=2) format('woff2'); } :root{ --sans:'IBM Plex Sans Thai','Noto Sans Thai',system-ui,-apple-system,'Segoe UI',sans-serif; --mono:'IBM Plex Mono',ui-monospace,monospace; --bg:#f5f4ef; --bg-tint:#eeeef6; --surface:#ffffff; --ink:#191a24; --muted:#6b6c7e; --line:#e6e3dc; /* สีหลัก = โทน petrol teal ให้เข้ากับโลโก้ระบบ (เดิมเป็นม่วง) */ --brand:#2e7d88; --brand-ink:#1f5f68; --brand-soft:#dcecee; --accent:#3aa7b0; --accent-ink:#0b7d82; --accent-soft:#d6f2f4; --danger:#e2564a; --ok:#129a72; --r-lg:26px; --r-md:18px; --r-sm:12px; --maxw:1180px; --shadow-sm:0 1px 2px rgba(25,26,36,.06),0 4px 12px -6px rgba(25,26,36,.14); --shadow-lg:0 2px 6px rgba(25,26,36,.05),0 34px 60px -30px rgba(25,26,36,.30); --ease:cubic-bezier(.2,.7,.2,1); } /* ---------- ธีมส่วนตัว (data-theme บน ) ---------- */ :root[data-theme="dark"]{ color-scheme: dark; --bg:#14151c; --bg-tint:#1b1d29; --surface:#22242f; --ink:#ecebf3; --muted:#9a9cb0; --line:#343648; --brand:#4bb3bf; --brand-ink:#7fd6df; --brand-soft:#153338; --topbar-bg:rgba(20,21,28,.85); --accent:#2fd0d8; --accent-ink:#7fe6ea; --accent-soft:#123437; --shadow-sm:0 1px 2px rgba(0,0,0,.4),0 4px 12px -6px rgba(0,0,0,.6); --shadow-lg:0 2px 6px rgba(0,0,0,.4),0 34px 60px -30px rgba(0,0,0,.7); } /* ธีมตามเครื่อง — เซิร์ฟเวอร์ส่ง data-theme="auto" มาเฉย ๆ แล้ว CSS ตัดสินเอง ค่าปริยายคือชุดสว่าง (เท่ากับ :root) ถ้าเครื่องตั้งโหมดมืดค่อยทับด้วยชุดมืด ทำที่ CSS แทน JS เพื่อไม่ให้หน้าวาบสว่างก่อนแล้วค่อยกระพริบเป็นมืด */ @media (prefers-color-scheme: dark){ :root[data-theme="auto"]{ --bg:#14151c; --bg-tint:#1b1d29; --surface:#22242f; --ink:#ecebf3; --muted:#9a9cb0; --line:#343648; --brand:#4bb3bf; --brand-ink:#7fd6df; --brand-soft:#153338; --topbar-bg:rgba(20,21,28,.85); --accent:#2fd0d8; --accent-ink:#7fe6ea; --accent-soft:#123437; --shadow-sm:0 1px 2px rgba(0,0,0,.4),0 4px 12px -6px rgba(0,0,0,.6); --shadow-lg:0 2px 6px rgba(0,0,0,.4),0 34px 60px -30px rgba(0,0,0,.7); color-scheme: dark; } } :root[data-theme="sepia"]{ --bg:#f3ead9; --bg-tint:#ece0c9; --surface:#fbf5ea; --ink:#3a3126; --muted:#7d715c; --line:#e0d3ba; --brand:#b06a3b; --brand-ink:#8a4e26; --brand-soft:#f0e0cf; } :root[data-theme="contrast"]{ --bg:#ffffff; --bg-tint:#f0f0f0; --surface:#ffffff; --ink:#000000; --muted:#3a3a3a; --line:#000000; --brand:#0033cc; --brand-ink:#0022aa; --brand-soft:#e0e6ff; } *{box-sizing:border-box} html,body{margin:0;padding:0} html{font-size:calc(100% * var(--font-scale,1))} body{ font-family:var(--app-font,var(--sans)); background:var(--bg); color:var(--ink); line-height:1.65; -webkit-font-smoothing:antialiased; } a{color:var(--brand-ink);text-decoration:none} a:hover{text-decoration:underline} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px} /* ---------- แถบบน ---------- */ .topbar{ position:sticky;top:0;z-index:50; background:var(--topbar-bg,rgba(245,244,239,.82)); backdrop-filter:saturate(1.4) blur(12px); border-bottom:1px solid var(--line); } .topbar-inner{ max-width:var(--maxw);margin:0 auto;padding:5px 20px; display:flex;align-items:center;gap:16px; } .brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:1.05rem;color:var(--ink)} .brand:hover{text-decoration:none} .brand-mark{ width:32px;height:32px;border-radius:10px;flex:none; background:linear-gradient(135deg,var(--brand),var(--accent)); display:grid;place-items:center;color:#fff;font-size:1rem; } .brand small{display:block;font-weight:500;font-size:.72rem;color:var(--muted);line-height:1} /* โลโก้เต็ม: จำกัดด้วย vw ด้วย เพื่อให้จอแคบย่อโลโก้อัตโนมัติ ไม่ดันหน้าให้เลื่อนแนวนอน (ใช้สองคลาสให้ชนะ .brand-logo 32px ของหน้าแอดมิน — media query ด้านล่างก็ต้องใช้สองคลาสเช่นกัน) */ .brand-logo.brand-logo-lg{width:auto;height:52px;max-width:min(300px,50vw);object-fit:contain;border-radius:8px} .topbar-spacer{flex:1} .user-chip{ display:flex;align-items:center;gap:9px;padding:5px 12px 5px 5px; background:var(--surface);border:1px solid var(--line);border-radius:999px;font-size:.86rem; } .avatar{ width:28px;height:28px;border-radius:50%;flex:none;display:grid;place-items:center; background:var(--brand-soft);color:var(--brand-ink);font-weight:700;font-size:.8rem; } /* ---------- ปุ่ม ---------- */ .pg-btn{ display:inline-flex;align-items:center;justify-content:center;gap:8px; padding:10px 18px;border-radius:999px;border:1px solid transparent; background:var(--brand);color:#fff;font-family:inherit;font-size:.9rem;font-weight:600; cursor:pointer;transition:transform .15s var(--ease),box-shadow .2s var(--ease),background .2s; box-shadow:var(--shadow-sm); } .pg-btn:hover{background:var(--brand-ink);transform:translateY(-1px);text-decoration:none;color:#fff} .pg-btn:active{transform:translateY(0)} .pg-btn-ghost{background:var(--surface);color:var(--ink);border-color:var(--line);box-shadow:none} .pg-btn-ghost:hover{background:var(--bg-tint);color:var(--ink);border-color:#d6d3ca} .pg-btn-sm{padding:7px 14px;font-size:.83rem} .pg-btn[disabled]{opacity:.5;pointer-events:none} /* ---------- หัวหน้า hub ---------- */ .hero{padding:40px 0 26px} .hero h1{margin:0 0 8px;font-size:clamp(1.6rem,4vw,2.3rem);letter-spacing:-.01em} .hero p{margin:0;color:var(--muted);max-width:60ch} /* ---------- ชวนผูกบัญชี Aleanor ---------- */ .link-banner{ display:flex;align-items:center;gap:14px;flex-wrap:wrap; background:var(--accent-soft);border:1px solid #b6e9ec; border-radius:var(--r-md);padding:13px 18px;margin-bottom:18px; font-size:.88rem;color:var(--accent-ink); } .link-banner span{flex:1;min-width:220px} /* คำอธิบายบนการ์ด — ตัดที่ 6 บรรทัดเสมอ เพื่อให้ความสูงการ์ดในแถวเดียวกันเท่ากัน ถึงจะเขียนคำอธิบายยาวไม่เท่ากันบ้าง ตารางก็ยังไม่รุ่งริ่ง */ .app-desc{ display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:6; overflow:hidden; } /* ---------- ช่องค้นหาแล็บ ---------- */ .hub-search{ position:relative;display:flex;align-items:center;gap:10px;margin:4px 0 14px; max-width:520px;padding:0 16px;height:46px; border:1px solid var(--line);border-radius:999px;background:var(--surface); transition:border-color .18s var(--ease),box-shadow .18s var(--ease); } .hub-search:focus-within{border-color:var(--brand);box-shadow:0 0 0 3px rgba(47,111,168,.12)} .hub-search>i{color:var(--muted);font-size:1rem;line-height:1;flex:none} .hub-search input{ flex:1;min-width:0;border:0;background:none;outline:none; font:inherit;font-size:.92rem;color:var(--ink); } .hub-search input::placeholder{color:var(--muted);opacity:.85} /* ปุ่มกากบาทของเบราว์เซอร์เองซ้ำกับปุ่มล้างที่ทำไว้ จึงซ่อนทิ้ง */ .hub-search input::-webkit-search-cancel-button{display:none} .hub-search button{ flex:none;display:grid;place-items:center;width:26px;height:26px;padding:0; border:0;border-radius:50%;background:var(--bg-tint);color:var(--muted);cursor:pointer; } .hub-search button:hover{background:var(--ink);color:#fff} .hub-count{margin:-6px 0 14px;font-size:.85rem;color:var(--muted)} /* ---------- ตัวกรองหมวด ---------- */ .filters{display:flex;gap:8px;flex-wrap:wrap;padding:6px 0 22px} /* กำลังค้นหาอยู่ ชิปหมวดถูกพักไว้ — ทำให้จางเพื่อบอกว่าตอนนี้หาข้ามทุกหมวด */ .filters.is-muted{opacity:.45} .chip-n{opacity:.6;font-variant-numeric:tabular-nums} /* ---------- ค้นแล้วไม่เจอ ---------- */ .hub-none{ text-align:center;padding:48px 20px 60px;border:1px dashed var(--line); border-radius:var(--r-md,16px);background:var(--bg-tint); } .hub-none h3{margin:0 0 6px;font-size:1.05rem} .hub-none p{margin:0 0 14px;color:var(--muted);font-size:.88rem} .app-card[hidden]{display:none} .chip{ padding:7px 15px;border-radius:999px;border:1px solid var(--line); background:var(--surface);color:var(--muted);font-size:.85rem;cursor:pointer; transition:all .18s var(--ease); } .chip:hover{border-color:var(--brand);color:var(--brand-ink);text-decoration:none} .chip.is-active{background:var(--ink);border-color:var(--ink);color:#fff} .chip.is-active:hover{color:#fff} /* ---------- การ์ด app ---------- */ .app-grid{ display:grid;gap:18px;padding-bottom:60px; grid-template-columns:repeat(auto-fill,minmax(268px,1fr)); } .app-card{ background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md); overflow:hidden;display:flex;flex-direction:column; transition:transform .2s var(--ease),box-shadow .25s var(--ease),border-color .2s; } .app-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:#d8d4ff} .app-cover{ aspect-ratio:16/9;background:linear-gradient(135deg,var(--brand-soft),var(--accent-soft)); display:grid;place-items:center;font-size:2.6rem;position:relative; } .app-cover img,.app-cover video{width:100%;height:100%;object-fit:cover;display:block} .app-cat{ position:absolute;top:10px;left:10px;padding:3px 10px;border-radius:999px; background:rgba(255,255,255,.9);font-size:.72rem;font-weight:600;color:var(--brand-ink); } .app-body{padding:16px 18px 18px;display:flex;flex-direction:column;flex:1;gap:8px} .app-body h3{margin:0;font-size:1.02rem} .app-desc{margin:0;font-size:.86rem;color:var(--muted);flex:1} .app-tags{display:flex;gap:6px;flex-wrap:wrap} .tag{ font-size:.72rem;padding:2px 9px;border-radius:6px; background:var(--bg-tint);color:var(--muted); } .app-foot{display:flex;align-items:center;gap:10px;margin-top:6px} .app-stat{font-size:.78rem;color:var(--muted);flex:1} .app-stat b{color:var(--ok)} /* ---------- สถานะว่าง ---------- */ .empty{ background:var(--surface);border:1px dashed var(--line);border-radius:var(--r-md); padding:48px 24px;text-align:center;color:var(--muted); } .empty h3{margin:0 0 6px;color:var(--ink)} .empty code{background:var(--bg-tint);padding:2px 7px;border-radius:6px;font-family:var(--mono);font-size:.85em} /* ---------- หน้าครู ---------- */ .teacher-bar{ display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:16px; font-size:.86rem;color:var(--muted); } .teacher-stat b{color:var(--ink);font-size:1.05rem} .table-wrap{ background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md); overflow-x:auto;margin-bottom:60px; } .pg-table{width:100%;border-collapse:collapse;font-size:.87rem;min-width:720px} .pg-table th{ text-align:left;padding:12px 14px;font-size:.78rem;font-weight:600;color:var(--muted); border-bottom:1px solid var(--line);white-space:nowrap; } .pg-table td{padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:top} .pg-table tr:last-child td{border-bottom:none} .pg-table .text-end{text-align:right} .warn-note{font-size:.75rem;color:#a35a12;margin-top:3px} .pill{ display:inline-block;padding:2px 9px;border-radius:999px;font-size:.74rem; background:var(--bg-tint);color:var(--muted); } .pill-ok{background:#e6f7f1;color:#0a6b50} .pill-bad{background:#fdeceb;color:#8f2018} .grade-form{ display:flex;gap:6px;flex-wrap:wrap;margin-top:8px;justify-content:flex-end; } .grade-form input{ padding:7px 11px;border:1px solid var(--line);border-radius:var(--r-sm); font-family:inherit;font-size:.83rem;background:var(--bg); } .grade-form input[type=number]{width:120px} .grade-form input[type=text]{width:180px} details summary{cursor:pointer;list-style:none;display:inline-flex} details summary::-webkit-details-marker{display:none} /* ---------- ฟอร์ม auth ---------- */ .auth-wrap{min-height:100vh;display:grid;place-items:center;padding:32px 20px} .auth-card{ width:100%;max-width:420px;background:var(--surface); border:1px solid var(--line);border-radius:var(--r-lg); padding:34px 30px;box-shadow:var(--shadow-lg); } .auth-card h1{margin:0 0 4px;font-size:1.4rem} .auth-card .sub{margin:0 0 22px;color:var(--muted);font-size:.9rem} /* โลโก้ระบบด้านบนการ์ด */ .auth-brand{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:20px} .auth-brand-logo{height:46px;max-width:220px;width:auto;object-fit:contain} .auth-brand-mark{ width:38px;height:38px;border-radius:12px;flex:none; background:linear-gradient(135deg,var(--brand),var(--accent)); display:grid;place-items:center;color:#fff;font-size:1.2rem;font-weight:800; } .auth-brand-name{font-weight:800;font-size:1.15rem;color:var(--ink)} .field{margin-bottom:14px} .field label{display:block;font-size:.84rem;font-weight:600;margin-bottom:5px} .field input[type=text],.field input:not([type]),.field input[type=email],.field input[type=password], .field input[type=number],.field input[type=datetime-local],.field input[type=date],.field input[type=time], .field select{ width:100%;padding:11px 14px;border:1px solid var(--line);border-radius:var(--r-sm); font-family:inherit;font-size:.92rem;background:var(--bg);color:var(--ink); } .field input:focus,.field select:focus{ outline:none;border-color:var(--brand);background:var(--surface); box-shadow:0 0 0 3px var(--brand-soft); } .field .hint{font-size:.76rem;color:var(--muted);margin-top:4px} .alert{ padding:11px 15px;border-radius:var(--r-sm);font-size:.86rem;margin-bottom:16px; background:#fdeceb;color:#8f2018;border:1px solid #f6cdc9; } .alert-ok{background:#e6f7f1;color:#0a6b50;border-color:#bfe9da} .auth-alt{margin-top:20px;padding-top:18px;border-top:1px solid var(--line);text-align:center;font-size:.87rem;color:var(--muted)} .sso-btn{ width:100%;margin-top:10px;background:var(--surface);color:var(--ink); border:1px solid var(--line);box-shadow:none; display:flex;align-items:center;justify-content:center;gap:10px; } .sso-btn:hover{background:var(--bg-tint);color:var(--ink)} .sso-btn[disabled]{opacity:.45} .sso-mark{width:20px;height:20px;object-fit:contain;flex:none} /* ตัวคั่น "หรือ" ระหว่างเข้าสู่ระบบด้วยรหัสผ่านกับปุ่มผู้ให้บริการภายนอก */ .auth-or{display:flex;align-items:center;gap:12px;margin:18px 0 4px;color:var(--muted);font-size:.8rem} .auth-or::before,.auth-or::after{content:"";flex:1;height:1px;background:var(--line)} /* ปุ่มเข้าสู่ระบบด้วย Google — ปุ่มขาวขอบเทาตามแนวทาง Google branding */ .google-btn{ width:100%;margin-top:10px;display:flex;align-items:center;justify-content:center;gap:10px; background:#fff;color:#3c4043;border:1px solid #dadce0;box-shadow:none;font-weight:600; } .google-btn:hover{background:#f7f8f8;border-color:#d2d5da;color:#3c4043;text-decoration:none} :root[data-theme="dark"] .google-btn{background:#1c1d24;color:#e8eaed;border-color:#3a3d46} :root[data-theme="dark"] .google-btn:hover{background:#24262f} /* ---------- หน้าเล่น app ---------- */ /* ตรึงหน้าเล่นเป็น app-shell เต็มจอด้วย position:fixed — บน iOS Safari การใช้ height:100vh/dvh เฉย ๆ จะเพี้ยนตอน toolbar ยุบ/ขยาย (หน้าสั้นกว่าจอ เหลือแถบว่างใต้ปุ่ม หรือปุ่มโดนบัง) inset:0 อิง viewport จริงเสมอ · overscroll-behavior กันหน้าเด้งเวลาลากในแล็บ */ body.pg-play{position:fixed;inset:0;width:100%;overflow:hidden;height:100vh;height:100dvh;display:flex;flex-direction:column;background:var(--bg-tint);overscroll-behavior:none;touch-action:manipulation} .play-bar{ display:flex;align-items:center;gap:12px;padding:9px 16px;flex:none; background:var(--surface);border-bottom:1px solid var(--line); } .play-bar h1{margin:0;font-size:.98rem;font-weight:700;min-width:0; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .play-bar .pb-txt-xs{display:none} /* ปุ่มออก — จอกว้างมีคำว่า "ออก" จอแคบเหลือลูกศรอย่างเดียว */ .play-exit{ display:inline-flex;align-items:center;gap:7px;flex:none; padding:7px 14px;border-radius:999px;border:1px solid var(--line); background:var(--surface);color:var(--ink);font-size:.83rem;font-weight:600; } .play-exit:hover{background:var(--bg-tint);text-decoration:none;color:var(--ink)} .play-exit i,.play-signin i{font-size:.95rem;line-height:1} .play-bar .meta{font-size:.78rem;color:var(--muted)} .play-mode{ padding:3px 10px;border-radius:999px;font-size:.74rem;font-weight:600; background:var(--accent-soft);color:var(--accent-ink); } .play-mode.free{background:var(--brand-soft);color:var(--brand-ink)} /* min-height:0 กัน flex ใช้ intrinsic size ของ iframe (บาง WebKit ทำให้ iframe ไม่ยืดเต็ม) */ #pg-app-frame{flex:1;min-height:0;width:100%;border:0;display:block;background:#fff} /* ---------- ผลลัพธ์หลังส่งงาน ---------- */ #pg-result{ display:none;position:fixed;inset:0;z-index:100; background:rgba(25,26,36,.55);backdrop-filter:blur(3px); align-items:center;justify-content:center;padding:20px; } .pg-result-card{ background:var(--surface);border-radius:var(--r-lg);padding:34px 40px; text-align:center;box-shadow:var(--shadow-lg);max-width:380px; } .pg-result-score{font-size:2rem;font-weight:700;color:var(--brand-ink);margin-bottom:4px} .pg-result-meta{color:var(--muted);font-size:.86rem;margin-bottom:20px} /* ---------- toast ---------- */ .pg-toast{ position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:200; padding:11px 20px;border-radius:999px;font-size:.88rem; background:var(--ink);color:#fff;box-shadow:var(--shadow-lg); animation:pgToastIn .25s var(--ease); } .pg-toast-error{background:var(--danger)} @keyframes pgToastIn{from{opacity:0;transform:translate(-50%,10px)}to{opacity:1;transform:translate(-50%,0)}} /* ============================================================ * เมนูรวม (mega menu) — ยุบทุกลิงก์ไว้ในปุ่มเดียว * แถบบนจึงไม่ล้นเมื่อจอแคบ ชื่อผู้ใช้ยาว หรือมีเมนูเพิ่มในอนาคต * ============================================================ */ .usermenu-btn{ display:flex;align-items:center;gap:9px;padding:5px 12px 5px 5px; background:var(--surface);border:1px solid var(--line);border-radius:999px; font-family:inherit;font-size:.86rem;color:var(--ink);cursor:pointer; max-width:230px;transition:border-color .15s,background .15s; } .usermenu-btn:hover{border-color:var(--brand)} .usermenu-btn[aria-expanded="true"]{border-color:var(--brand);background:var(--brand-soft)} .usermenu-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .usermenu-caret{font-size:.7rem;color:var(--muted);flex:none} .usermenu-btn[aria-expanded="true"] .usermenu-caret{transform:rotate(180deg)} /* เมนูผู้ใช้แบบการ์ดลอย (dropdown) */ .mega{ position:absolute;top:calc(100% + 8px);right:16px; width:min(640px,calc(100vw - 24px)); background:var(--surface);border:1px solid var(--line); border-radius:var(--r-md);box-shadow:var(--shadow-lg); z-index:60;overflow:hidden;transform-origin:top right; animation:megaIn .16s var(--ease); } @keyframes megaIn{from{opacity:0;transform:translateY(-8px) scale(.98)}to{opacity:1;transform:none}} .mega[hidden]{display:none} .mega-inner{ padding:16px;display:grid;grid-template-columns:1fr 1fr;gap:6px 22px;align-items:start; } .mega-col{display:flex;flex-direction:column;gap:3px;min-width:0} .mega-col-wide{grid-column:1 / -1;margin-top:8px;padding-top:14px;border-top:1px solid var(--line)} .mega-head{ font-size:.68rem;font-weight:700;color:var(--muted); letter-spacing:.06em;text-transform:uppercase;margin:0 0 8px 4px; } .mega-user{ display:flex;align-items:center;gap:11px;padding:10px 11px; background:linear-gradient(135deg,var(--brand-soft),var(--accent-soft)); border-radius:var(--r-sm);margin-bottom:6px; } .mega-user .avatar{width:38px;height:38px;font-size:1rem} .mega-user b{display:block;font-size:.92rem;color:var(--ink)} .mega-user small{color:var(--muted);font-size:.74rem} .mega-link{ display:flex;align-items:center;gap:11px;padding:8px 9px;border-radius:var(--r-sm); font-size:.9rem;color:var(--ink);transition:background .14s var(--ease),transform .14s var(--ease); } .mega-link:hover{background:var(--bg-tint);text-decoration:none;transform:translateX(2px)} .mega-ico{ width:32px;height:32px;border-radius:9px;flex:none; display:grid;place-items:center;background:var(--brand-soft); } .mega-ico i{font-size:1.02rem;color:var(--brand-ink);line-height:0} .mega-danger{color:var(--danger)} .mega-danger .mega-ico{background:#fdeceb} .mega-danger .mega-ico i{color:var(--danger)} .mega-danger:hover{background:#fdf3f2} .mega-cats{display:flex;flex-wrap:wrap;gap:8px} .mega-cat{ display:inline-flex;align-items:center;gap:7px;padding:7px 13px; border:1px solid var(--line);border-radius:999px;background:var(--bg); font-size:.84rem;color:var(--ink);transition:all .14s var(--ease); } .mega-cat:hover{border-color:var(--brand);background:var(--brand-soft);color:var(--brand-ink);text-decoration:none;transform:translateY(-1px)} .mega-cat span{background:var(--brand);color:#fff;font-size:.68rem;font-weight:700;min-width:18px;height:18px;padding:0 5px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center} /* ============================================================ * Responsive — โรงเรียนใช้ทั้งโปรเจกเตอร์ โน้ตบุ๊ก แท็บเล็ต และมือถือ * ============================================================ */ /* แท็บเล็ตแนวตั้ง */ @media (max-width:900px){ .wrap{padding:0 16px} .topbar-inner{padding:5px 16px;gap:10px} .mega-inner{padding:16px;gap:16px 20px} .mega-col-wide{grid-column:span 1} .app-grid{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))} .stat-card{flex:1 1 140px;min-width:0} } /* มือถือ */ @media (max-width:640px){ .hero{padding:26px 0 18px} .hero h1{font-size:1.5rem} .app-grid{grid-template-columns:1fr;gap:14px} .topbar-inner{padding:5px 14px;gap:8px} .brand-logo.brand-logo-lg{height:44px;max-width:min(190px,48vw)} /* ชื่อผู้ใช้ยาว ๆ กินที่จนปุ่มภาษาโดนดันตกแถว — เหลือแค่อักษรย่อก็พอ */ .usermenu-name{display:none} .usermenu-btn{padding:4px;max-width:none} .lang-opt{padding:4px 8px} .mega{right:10px;left:10px;width:auto} .mega-inner{grid-template-columns:1fr;padding:14px} .mega-col-wide{grid-column:1} /* แถบบนหน้าเล่นบนมือถือ — ตัวอักษรในปุ่มออกกับปุ่มเข้าสู่ระบบตัดทิ้ง เหลือไอคอน ป้ายโหมดสลับไปใช้คำสั้น ชื่อแล็บได้พื้นที่ที่เหลือทั้งหมดแล้วตัดด้วย … ถ้ายาวเกิน ทั้งแถบจึงสูงแถวเดียวเสมอ ไม่กินพื้นที่ของฉาก 3 มิติ */ .play-bar{padding:7px 10px;gap:8px} .play-bar .meta{display:none} .play-bar .pb-txt{display:none} .play-bar .pb-txt-xs{display:inline} .play-bar h1{font-size:.9rem;flex:1 1 auto} .play-exit{width:36px;height:36px;padding:0;justify-content:center;border-radius:50%} .play-signin{width:36px;height:36px;padding:0;justify-content:center;border-radius:50%} .play-mode{padding:3px 9px;font-size:.7rem;flex:none} .auth-card{padding:26px 20px} .chips{gap:6px} .chip{font-size:.8rem;padding:6px 12px} .pg-hide-xs{display:none} .admin-card{padding:16px} .app-row{gap:10px} .app-fields{min-width:0;width:100%} .app-fields input[type=text],.emoji-input{width:100%} /* ตารางกว้าง ๆ ให้เลื่อนในกรอบตัวเอง ไม่ใช่ดันทั้งหน้าให้เลื่อนแนวนอน */ .table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch} table{min-width:520px} } /* จอเล็กมาก (มือถือรุ่นเล็ก / แบ่งครึ่งจอ) */ @media (max-width:380px){ .wrap{padding:0 12px} .brand-logo.brand-logo-lg{max-width:150px} .lang-switch{display:none} } /* ---------- หน้าผู้ดูแลระบบ ---------- */ .brand-logo{width:32px;height:32px;border-radius:10px;object-fit:cover;flex:none} .admin-card{ background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md); padding:22px 24px;margin-bottom:18px;box-shadow:var(--shadow-sm); } .admin-card h2{margin:0 0 16px;font-size:1.05rem} .admin-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px} .admin-head h2{margin:0;flex:1} .admin-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px} .hint{font-size:.78rem;color:var(--muted);margin:4px 0 0} .mini-label{display:block;font-size:.72rem;font-weight:600;color:var(--muted);margin-bottom:3px} .brand-prev{ display:flex;align-items:center;gap:10px;margin-bottom:8px; background:var(--bg);border:1px solid var(--line);border-radius:var(--r-sm);padding:8px 10px; } .brand-prev img{width:44px;height:44px;object-fit:contain;border-radius:8px;background:#fff} .rm{font-size:.76rem;color:var(--danger);display:flex;align-items:center;gap:5px;cursor:pointer} .app-row{ display:flex;align-items:flex-start;gap:14px;flex-wrap:wrap; padding:14px 0;border-top:1px solid var(--line); } .app-icon{ width:56px;height:56px;border-radius:14px;flex:none;display:grid;place-items:center; background:linear-gradient(135deg,var(--brand-soft),var(--accent-soft));font-size:1.7rem;overflow:hidden; } .app-icon img,.app-icon video{width:100%;height:100%;object-fit:cover} /* ป้ายเล็ก ๆ บอกว่าปกของแอปนี้เป็นวิดีโอ */ .app-icon{position:relative} .app-icon-badge{position:absolute;left:0;right:0;bottom:0;text-align:center;font-size:.58rem;font-weight:700; letter-spacing:.02em;color:#fff;background:rgba(17,18,26,.72);padding:1px 0} /* ไอคอน uicons ในไทล์ app (progress / admin) — แทนอีโมจิเดิม */ .prog-uicon{display:grid;place-items:center;line-height:1} .prog-uicon i{font-size:1.5rem;color:var(--brand-ink);line-height:1} .prog-uicon i::before{vertical-align:middle} .app-info{flex:1;min-width:160px;font-size:.9rem} .app-fields{display:flex;flex-direction:column;gap:4px;min-width:210px} .app-fields input[type=text],.emoji-input{ padding:7px 11px;border:1px solid var(--line);border-radius:var(--r-sm); font-family:inherit;font-size:.85rem;background:var(--bg);width:110px; } .app-fields input[type=file]{font-size:.76rem} .app-actions{display:flex;flex-direction:column;gap:6px} /* โลโก้เต็ม: กฎขนาดหลักย้ายไปอยู่ส่วน topbar (ต้องมาก่อน media query มือถือ) */ .brand-sub{font-weight:500;font-size:.78rem;color:var(--muted)} /* ---------- สลับภาษา ---------- */ .lang-switch{ display:inline-flex;background:var(--surface);border:1px solid var(--line); border-radius:999px;padding:2px;gap:1px; } .lang-opt{ padding:4px 10px;border-radius:999px;font-size:.72rem;font-weight:700; color:var(--muted);letter-spacing:.03em; } .lang-opt:hover{text-decoration:none;color:var(--ink)} .lang-opt.is-active{background:var(--ink);color:#fff} .lang-opt.is-active:hover{color:#fff} /* ---------- หน้าความคืบหน้า ---------- */ .stat-row{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:22px} .stat-card{ background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md); padding:14px 20px;min-width:120px; } .stat-card b{display:block;font-size:1.6rem;line-height:1.1;color:var(--brand-ink)} .stat-card span{font-size:.78rem;color:var(--muted)} .muted{color:var(--muted)} .prog-grid{ display:grid;gap:14px;padding-bottom:60px; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); } .prog-card{ display:flex;align-items:center;gap:14px; background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:14px 16px; } .prog-card.is-new{opacity:.72} .prog-icon{ width:52px;height:52px;border-radius:14px;flex:none;display:grid;place-items:center; background:linear-gradient(135deg,var(--brand-soft),var(--accent-soft));font-size:1.6rem;overflow:hidden; } .prog-icon img,.prog-icon video{width:100%;height:100%;object-fit:cover} .prog-body{flex:1;min-width:0} .prog-body h3{margin:0 0 2px;font-size:.98rem} .prog-body p{margin:0;font-size:.8rem} .prog-tags{display:flex;gap:5px;flex-wrap:wrap;margin-top:6px} .pill-warn{background:#fff3e0;color:#8a5a12} /* ============================================================ * ตั้งค่าส่วนตัว (settings.php) * ============================================================ */ .set-wrap{padding-top:28px;padding-bottom:60px;max-width:760px} .set-title{font-size:1.6rem;margin:0 0 4px} .set-sub{color:var(--muted);margin:0 0 22px;font-size:.92rem} .set-alert{padding:11px 16px;border-radius:var(--r-sm);margin-bottom:18px;font-size:.9rem;font-weight:500} .set-alert.ok{background:var(--accent-soft);color:var(--accent-ink);border:1px solid var(--accent)} .set-alert.bad{background:#fdecec;color:#a3271b;border:1px solid #efa79f} :root[data-theme="dark"] .set-alert.bad{background:#3a1f1c;color:#f4b3ab} .set-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md); padding:22px 24px;margin-bottom:20px;box-shadow:var(--shadow-sm)} .set-h2{font-size:1.05rem;margin:0 0 16px} .set-label{font-size:.82rem;font-weight:600;color:var(--muted);margin:16px 0 8px} .set-label:first-of-type{margin-top:0} .set-hint{font-size:.8rem;color:var(--muted);margin:14px 0 0} /* ตัวเลือกธีม */ .theme-row{display:flex;flex-wrap:wrap;gap:12px} .theme-opt{cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:7px;width:96px} .theme-opt input{position:absolute;opacity:0;pointer-events:none} .theme-swatch{width:96px;height:62px;border-radius:12px;border:2px solid var(--line); padding:11px;display:flex;flex-direction:column;gap:6px;justify-content:center;position:relative;transition:border-color .15s,transform .1s} .theme-opt:hover .theme-swatch{transform:translateY(-2px)} .theme-opt.on .theme-swatch{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)} .theme-swatch .s-dot{width:16px;height:16px;border-radius:50%} .theme-swatch .s-line{height:5px;border-radius:3px;width:100%;opacity:.65} .theme-swatch .s-line.short{width:60%} .theme-name{font-size:.8rem;font-weight:600} .theme-opt.on .theme-name{color:var(--brand-ink)} /* ชิปเลือก (ฟอนต์/ขนาด) */ .chip-row{display:flex;flex-wrap:wrap;gap:8px} .pick-chip{cursor:pointer;border:1.5px solid var(--line);background:var(--bg);color:var(--ink); border-radius:999px;padding:8px 16px;font-size:.9rem;transition:border-color .15s,background .15s} .pick-chip input{position:absolute;opacity:0;pointer-events:none} .pick-chip:hover{border-color:var(--brand)} .pick-chip.on{border-color:var(--brand);background:var(--brand-soft);color:var(--brand-ink);font-weight:600} /* ฟอร์มรหัสผ่าน */ .set-form{display:flex;flex-direction:column;gap:14px;max-width:380px} .set-field{display:flex;flex-direction:column;gap:6px;font-size:.86rem;font-weight:600;color:var(--muted)} .set-field input{font-family:inherit;font-size:.95rem;padding:10px 13px;border:1.5px solid var(--line); border-radius:var(--r-sm);background:var(--bg);color:var(--ink)} .set-field input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)} /* ============================================================ * ไอคอน Flaticon uicons * ============================================================ */ i[class^="fi-rr-"], i[class*=" fi-rr-"]{ display:inline-flex; line-height:0; vertical-align:-0.06em } .app-cover-ico i{ font-size:2.9rem; color:var(--brand-ink) } :root[data-theme="dark"] .app-cover-ico i{ color:var(--brand) } .pg-btn i{ font-size:.95em } /* ============================================================ * สถิติแอดมิน (stats.php) * ============================================================ */ .stats-wrap{padding-top:24px;padding-bottom:60px} .stats-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:20px} .stat-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin-bottom:22px} .stat-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md); padding:16px 18px;display:flex;flex-direction:column;gap:2px;box-shadow:var(--shadow-sm)} .stat-ico{width:34px;height:34px;border-radius:10px;background:var(--brand-soft);display:grid;place-items:center;margin-bottom:6px} .stat-ico i{font-size:1.05rem;color:var(--brand-ink);line-height:0} .stat-card b{font-size:1.6rem;font-variant-numeric:tabular-nums;line-height:1.1} .stat-card>span:last-child{font-size:.8rem;color:var(--muted)} .stats-cols{display:grid;grid-template-columns:1.4fr 1fr;gap:18px;margin-bottom:18px} .lab-rows{display:flex;flex-direction:column;gap:14px} .lab-row{display:flex;gap:12px;align-items:flex-start} .lab-ico{width:38px;height:38px;border-radius:11px;background:var(--bg-tint);display:grid;place-items:center;flex:none} .lab-ico i{font-size:1.15rem;color:var(--brand-ink);line-height:0} .lab-main{flex:1;min-width:0} .cat-row{display:flex;flex-direction:column;gap:5px} .lab-top{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:.9rem} .lab-top span{font-size:.82rem;color:var(--muted);font-variant-numeric:tabular-nums;flex:none} .statbar{height:8px;border-radius:999px;background:var(--bg-tint);overflow:hidden;margin:5px 0} .statbar i{display:block;height:100%;background:linear-gradient(90deg,var(--brand),var(--brand-ink));border-radius:999px} .statbar.accent i{background:linear-gradient(90deg,var(--accent),var(--accent-ink))} .lab-sub{font-size:.76rem;color:var(--muted)} .pill{display:inline-block;padding:2px 9px;border-radius:999px;background:var(--bg-tint);color:var(--muted);font-size:.74rem;font-weight:600} @media (max-width:760px){ .stats-cols{grid-template-columns:1fr} } /* เทียบเวลาฝั่งเว็บกับฝั่งฐานข้อมูลในหน้าแอดมิน */ .tz-now{display:flex;gap:18px;flex-wrap:wrap;background:var(--bg-tint);border:1px solid var(--line); border-radius:var(--r-sm);padding:10px 13px} .tz-now>div{display:flex;flex-direction:column;gap:2px} .tz-now b{font-size:1rem;font-variant-numeric:tabular-nums} /* ---------- ปุ่มแชร์บนการ์ดแล็บ ---------- */ .app-cta { display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; } .share-btn { position: relative; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 999px; cursor: pointer; padding: 0; border: 1px solid var(--line, #e6e3dc); background: var(--card, #fff); color: var(--ink-soft, #6b6f76); transition: background .15s, color .15s, border-color .15s; } .share-btn:hover { background: var(--tint, #f2f5f8); color: var(--brand, #2f6fa8); border-color: var(--brand, #2f6fa8); } .share-btn i { font-size: .95rem; line-height: 1; } .share-tip { position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translate(-50%, 4px); white-space: nowrap; font-size: .74rem; padding: 5px 10px; border-radius: 8px; z-index: 60; background: #24272d; color: #f4f6f8; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; } .share-tip.is-on { opacity: 1; transform: translate(-50%, 0); } .share-tip.is-bad { background: #b5372c; } /* ---------- เมนูเลือกแพลตฟอร์มที่จะแชร์ ---------- */ .share-menu { position: fixed; z-index: 200; min-width: 208px; padding: 6px; border-radius: 14px; border: 1px solid var(--line, #e6e3dc); background: var(--card, #fff); box-shadow: 0 22px 48px -20px rgba(20, 24, 29, .45); display: flex; flex-direction: column; gap: 1px; } .share-menu .sm-head { font-size: .74rem; opacity: .55; padding: 6px 10px 4px; letter-spacing: .03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 260px; } .share-menu button { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 9px 10px; border: 0; border-radius: 9px; background: transparent; cursor: pointer; font: inherit; font-size: .86rem; color: var(--ink, #222); } .share-menu button:hover { background: var(--tint, #f2f5f8); } .share-menu .sm-ico { width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center; font-size: .72rem; font-weight: 700; color: #fff; flex: 0 0 auto; } /* โลโก้ในกล่องเป็น SVG ที่ใช้ currentColor จึงกลายเป็นสีขาวตาม .sm-ico อัตโนมัติ */ .share-menu .sm-ico svg { display: block; } .share-menu hr { border: 0; border-top: 1px solid var(--line, #eceff3); margin: 4px 6px; } .share-back { position: fixed; inset: 0; z-index: 199; } /* ---------- ป้ายผู้เยี่ยมชมในแถบหัวหน้าเล่น ---------- */ .play-signin { display: inline-flex; align-items: center; gap: 7px; flex: none; font-size: .78rem; padding: 5px 13px; border-radius: 999px; text-decoration: none; border: 1px solid var(--brand, #2f6fa8); color: var(--brand, #2f6fa8); white-space: nowrap; } .play-signin:hover { background: var(--brand, #2f6fa8); color: #fff; } /* ---------- ธีมตามเครื่อง: กฎเฉพาะโหมดมืดที่เหลือ ---------- ชุดข้างบนคุมแค่ตัวแปรสี ส่วนพวกนี้เป็นกฎเจาะจงคอมโพเนนต์ จึงต้องเขียนซ้ำให้ auto ตอนเครื่องเป็นมืดด้วย ไม่งั้นจะหลุดเป็นสีสว่างอยู่ไม่กี่จุด */ @media (prefers-color-scheme: dark){ :root[data-theme="auto"] .google-btn{background:#1c1d24;color:#e8eaed;border-color:#3a3d46} :root[data-theme="auto"] .google-btn:hover{background:#24262f} :root[data-theme="auto"] .set-alert.bad{background:#3a1f1c;color:#f4b3ab} :root[data-theme="auto"] .app-cover-ico i{color:var(--brand)} } /* ---------- กรอบสรุปข้างหัวหน้า hub ---------- */ /* หัวหน้าเดิมกินความกว้างเต็มแถวแล้วปล่อยฝั่งขวาว่าง จึงจับคู่กับกรอบตัวเลข จอแคบให้ตกลงมาอยู่ใต้ข้อความตามปกติ */ .hero{display:flex;align-items:flex-end;gap:28px;flex-wrap:wrap} .hero-text{flex:1 1 420px;min-width:0} .hero-stat{ flex:0 0 auto;min-width:236px; border:1px solid var(--line);border-radius:var(--r-md); background:linear-gradient(150deg,var(--surface),var(--bg-tint)); box-shadow:var(--shadow-sm);padding:16px 20px 18px; } .hero-stat .hs-main{display:flex;align-items:baseline;gap:9px;margin-bottom:12px} .hero-stat .hs-main b{ font-size:2.6rem;line-height:1;font-weight:700;letter-spacing:-.02em; font-variant-numeric:tabular-nums; background:linear-gradient(135deg,var(--brand),var(--accent)); -webkit-background-clip:text;background-clip:text;color:transparent; } .hero-stat .hs-main span{font-size:.9rem;color:var(--muted)} .hero-stat .hs-grid{display:flex;gap:18px;flex-wrap:wrap;padding-top:12px;border-top:1px solid var(--line)} .hero-stat .hs-grid>div{display:flex;flex-direction:column;gap:1px} .hero-stat .hs-grid b{font-size:1.05rem;font-weight:700;font-variant-numeric:tabular-nums} .hero-stat .hs-grid span{font-size:.72rem;color:var(--muted);line-height:1.3} .hero-stat .hs-me b{color:var(--brand-ink)} .hero-stat .hs-bar{margin-top:13px;height:6px;border-radius:999px;background:var(--bg-tint);overflow:hidden} .hero-stat .hs-bar i{display:block;height:100%;border-radius:999px; background:linear-gradient(90deg,var(--brand),var(--accent))} @media (max-width:640px){ .hero{gap:18px} .hero-stat{width:100%;min-width:0} } /* ---------- ปุ่มสลับระดับ (มัธยม / มหาวิทยาลัย) ---------- */ /* แยกหน้าตาจากชิปหมวดชัด ๆ เป็นกลุ่มปุ่มติดกันแบบ segmented เพราะเป็นคนละมิติกัน — ระดับกรองก่อน แล้วหมวดค่อยกรองซ้อนข้างใน */ .level-row{ display:inline-flex;gap:3px;padding:3px;margin:0 0 14px; background:var(--bg-tint);border:1px solid var(--line);border-radius:999px; } .level-btn{ display:inline-flex;align-items:center;gap:7px; padding:7px 16px;border:0;border-radius:999px;background:none;cursor:pointer; font:inherit;font-size:.85rem;font-weight:600;color:var(--muted); transition:background .18s var(--ease),color .18s var(--ease); } .level-btn:hover{color:var(--ink)} .level-btn.is-active{background:var(--surface);color:var(--ink);box-shadow:var(--shadow-sm)} .level-btn .chip-n{font-size:.74rem;font-weight:600} /* ป้ายบอกว่าเป็นแล็บระดับมหาวิทยาลัย — ติดมุมขวาบนของปกการ์ด ไม่ติดให้แล็บมัธยมเพราะเป็นค่าปริยาย ติดไปก็รกเปล่า ๆ */ .app-level{ position:absolute;top:12px;right:12px; padding:3px 10px;border-radius:999px;font-size:.7rem;font-weight:700; background:var(--ink);color:var(--surface);letter-spacing:.01em; } /* ---------- แล็บแนะนำ — สไลด์หน้าแรก (ภาพใหญ่ซ้าย รายการขวา) ---------- */ .feat{margin:0 0 28px} .feat-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin:0 0 12px} .feat-head h2{margin:0;font-size:1.05rem;display:flex;align-items:center;gap:8px} .feat-head h2 i{color:var(--brand);font-size:1rem} .feat-head p{margin:0;font-size:.85rem;color:var(--muted)} .feat-body{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:14px;align-items:stretch} .feat-stage{ position:relative;aspect-ratio:16/8.4;border-radius:var(--r-lg);overflow:hidden; background:#141722;box-shadow:var(--shadow-sm);isolation:isolate;outline:none; } .feat-stage:focus-visible{box-shadow:0 0 0 3px var(--brand-soft),var(--shadow-sm)} .feat-slide{ position:absolute;inset:0;display:block;color:#fff;text-decoration:none; opacity:0;transition:opacity .55s var(--ease);pointer-events:none; } .feat-slide.is-active{opacity:1;pointer-events:auto;z-index:1} .feat-slide:hover{text-decoration:none;color:#fff} .feat-media{position:absolute;inset:0} .feat-media img,.feat-media video{ width:100%;height:100%;object-fit:cover;display:block; transform:scale(1.02);transition:transform 9s linear; } /* ภาพซูมเข้าช้า ๆ ระหว่างโชว์ (Ken Burns) ให้ภาพนิ่งดูมีชีวิต */ .feat-slide.is-active .feat-media img,.feat-slide.is-active .feat-media video{transform:scale(1.09)} .feat-media.is-icon{ display:grid;place-items:center; background:radial-gradient(120% 120% at 82% 18%,var(--accent) 0%,var(--brand-ink) 52%,#141722 100%); } .feat-media.is-icon i{font-size:clamp(4.5rem,15vw,9.5rem);color:rgba(255,255,255,.82);transform:translateX(18%)} .feat-scrim{ position:absolute;inset:0; background: linear-gradient(90deg,rgba(14,16,24,.90) 0%,rgba(14,16,24,.66) 36%,rgba(14,16,24,.16) 68%,rgba(14,16,24,0) 100%), linear-gradient(0deg,rgba(14,16,24,.78) 0%,rgba(14,16,24,0) 48%); } .feat-text{ position:absolute;left:0;right:0;bottom:0;padding:clamp(18px,3.4vw,38px); max-width:62%;display:flex;flex-direction:column;gap:10px; } .feat-chips{display:flex;gap:6px;flex-wrap:wrap} .feat-chips .app-cat,.feat-chips .app-badge{position:static} .feat-text h3{ margin:0;font-size:clamp(1.3rem,3vw,2rem);line-height:1.15;letter-spacing:-.01em; text-shadow:0 2px 14px rgba(0,0,0,.4); } .feat-text p{ margin:0;font-size:clamp(.82rem,1.4vw,.95rem);color:rgba(255,255,255,.86); display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden; } .feat-cta{display:flex;align-items:center;gap:14px;margin-top:4px;flex-wrap:wrap} .feat-cta .pg-btn{background:#fff;color:var(--ink);border-color:#fff;font-weight:600;gap:6px} .feat-slide:hover .feat-cta .pg-btn{background:var(--brand);color:#fff;border-color:var(--brand)} .feat-plays{font-size:.8rem;color:rgba(255,255,255,.82)} .feat-arrow{ position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:38px;height:38px; border-radius:50%;border:0;background:rgba(255,255,255,.88);color:var(--ink); display:grid;place-items:center;cursor:pointer;opacity:0;transition:opacity .2s,background .2s; } .feat-arrow:hover{background:#fff} .feat-stage:hover .feat-arrow,.feat-stage:focus-within .feat-arrow{opacity:1} .feat-arrow.prev{left:12px} .feat-arrow.next{right:12px} .feat-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;min-width:0} .feat-list li{display:flex;flex:1;min-height:0} .feat-item{ position:relative;display:flex;align-items:center;gap:12px;width:100%;padding:8px 10px; border:1px solid transparent;border-radius:var(--r-sm);background:transparent; text-align:left;cursor:pointer;font:inherit;color:var(--ink);overflow:hidden; transition:background .2s,border-color .2s; } .feat-item:hover{background:var(--surface);border-color:var(--line)} .feat-item.is-active{background:var(--surface);border-color:var(--line);box-shadow:var(--shadow-sm)} .feat-thumb{ flex:none;width:64px;height:40px;border-radius:8px;overflow:hidden; background:linear-gradient(135deg,var(--brand-soft),var(--accent-soft));display:grid;place-items:center; } .feat-thumb img{width:100%;height:100%;object-fit:cover;display:block} .feat-thumb i{font-size:1.25rem;color:var(--brand-ink)} .feat-item-text{min-width:0;display:flex;flex-direction:column;gap:3px} .feat-item-text b{font-size:.88rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .feat-item-text small{font-size:.72rem;color:var(--muted);display:flex;gap:6px;align-items:center;white-space:nowrap;overflow:hidden} .feat-item-text .app-badge{position:static;font-size:.62rem;padding:1px 7px} .feat-bar{position:absolute;left:0;right:0;bottom:0;height:3px;background:transparent} .feat-item.is-active .feat-bar::after{ content:"";display:block;height:100%;width:0;background:var(--brand); animation:featbar var(--feat-dur,6000ms) linear forwards; } .feat.is-paused .feat-bar::after{animation-play-state:paused} @keyframes featbar{from{width:0}to{width:100%}} @media (prefers-reduced-motion:reduce){ .feat-item.is-active .feat-bar::after{animation:none;width:100%} .feat-media img,.feat-media video{transition:none;transform:none!important} .feat-slide{transition:none} } /* ---------- ป้าย ใหม่ / อัปเดตใหม่ / คนเล่นเยอะ บนการ์ด ---------- */ .app-badge{ position:absolute;top:10px;right:10px;padding:3px 9px;border-radius:999px; font-size:.7rem;font-weight:700;letter-spacing:.01em;color:#fff;background:var(--brand); box-shadow:0 1px 3px rgba(0,0,0,.18);white-space:nowrap; } .app-badge.updated{background:var(--accent-ink)} .app-badge.popular{background:#e0782e} .app-badge.featured{background:#7a5af5} /* สองป้ายซ้อนกัน (ใหม่ + คนเล่นเยอะ) และป้ายมหาวิทยาลัยหลบลงมา */ .app-cover .app-badge + .app-badge{top:36px} .app-card[data-badges="1"] .app-level{top:36px} .app-card[data-badges="2"] .app-level{top:62px} @media (max-width:900px){ .feat-body{grid-template-columns:1fr} .feat-list{flex-direction:row;overflow-x:auto;gap:8px;padding:2px 2px 6px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch} .feat-list li{flex:0 0 auto} .feat-item{width:210px;scroll-snap-align:start;border-color:var(--line);background:var(--surface)} .feat-text{max-width:82%} .feat-arrow{opacity:1} } @media (max-width:640px){ .feat-stage{aspect-ratio:16/11;border-radius:var(--r-md)} .feat-text{max-width:100%;padding:16px} .feat-text p{-webkit-line-clamp:2} .feat-item{width:180px} .feat-arrow{width:32px;height:32px} }