/* ========================================================================== Mythos RO — v2 Horizontal Edition ธีมอ้างอิง https://mythos-ragnarok.online/ (navy + gold, การ์ดขาว, พื้นฟ้าอ่อน) โครง: html/body ล็อกแนวตั้ง เนื้อหาทั้งหมดอยู่ใน .track ที่เลื่อนแนวนอน ========================================================================== */ :root { /* palette — ดึงจาก mythos-modern.css ของเว็บอ้างอิง */ --navy: #102c56; --navy-soft: #24456f; --blue: #196bd4; --blue-pale: #eaf4ff; --gold: #eab84f; --gold-deep: #a97c1c; --surface: #ffffff; --border: #d7e5f2; --border-soft: #e9f1f9; --copy: #5b6f89; --page: #f7fbff; --ok: #17936a; --warn: #d8663f; /* metrics */ --bar-h: 76px; --bar-fade: 86px; /* พื้นแถบบนไล่จางเลยตัวแถบลงมาอีกเท่านี้ (คลุมเมนู) */ --dock-h: 68px; --side-w: 0px; /* จอกว้างขึ้นเป็น 252px (เมนูค้างไว้) */ --gutter: clamp(22px, 4vw, 64px); --radius: 20px; --radius-sm: 14px; --shadow: 0 10px 24px rgba(18, 54, 92, .1); --shadow-lift:0 18px 44px rgba(18, 54, 92, .18); --font-head: 'Noto Serif Thai', Georgia, 'Times New Roman', serif; --font-body: 'Noto Sans Thai', 'Segoe UI', Tahoma, sans-serif; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; height: 100%; overflow: hidden; /* ล็อกแนวตั้ง — เลื่อนแนวนอนเท่านั้น */ overscroll-behavior: none; } /* โหมดหน้าแยก (server_v2 / start_v2 / news_v2) — เลื่อนลงตามปกติ */ html.doc, body.doc { height: auto; min-height: 100%; overscroll-behavior: auto; scroll-behavior: smooth; } /* กันล้นแนวนอนที่ เท่านั้น — ถ้าใส่ overflow-x ที่ body ด้วย body จะกลายเป็น scroll container แล้ว position:sticky (แถบทางลัด) จะเกาะไม่ติด */ html.doc { overflow-x: hidden; overflow-y: auto; } body.doc { overflow: visible; } html.doc { scroll-padding-top: calc(var(--bar-h) + 18px); } /* popup เปิดอยู่ = ล็อกไม่ให้หน้าหลังเลื่อน */ body.popup-open { overflow: hidden; } /* หน้าแยกมีแถบเมนูล่างลอยทับ — เว้นที่ให้ท้ายหน้า */ body.doc { padding-bottom: calc(var(--dock-h) + 10px); } /* ========================================================================== FADE เปลี่ยนหน้า — ม่านทับทั้งจอ จางเข้าตอนออก จางออกตอนเข้า ========================================================================== */ .page-veil { position: fixed; inset: 0; z-index: 90; background: var(--page); background: radial-gradient(120% 90% at 50% 34%, #ffffff 0%, var(--page) 46%, var(--blue-pale) 100%); opacity: 1; pointer-events: none; transition: opacity .34s ease; } body.is-ready .page-veil { opacity: 0; } body.is-leaving .page-veil { opacity: 1; transition-duration: .2s; } /* --- โลโก้ + แถบวิ่งกลางม่าน (โผล่เฉพาะตอนกำลังออกจากหน้า) --------------- เบราว์เซอร์ค้างเฟรมสุดท้ายของหน้าเดิมไว้จนหน้าใหม่พร้อมวาด เฟรมนั้นคือม่านใบนี้ ปล่อยว่าง = ผู้ใช้เห็นจอขาวตลอดช่วงรอเน็ต (เห็นชัดบนมือถือ) ★ หน่วง .18s ก่อนจางเข้า — เน็ตเร็วจะไม่ทันเห็นโลโก้ ได้ฟีลจางผ่านเหมือนเดิม ★ ขาเข้าหน้าใหม่ body ไม่มี is-leaving จึงซ่อนอยู่ ไม่มีทางวาบตอนเปิดหน้า */ .veil-brand { position: absolute; left: 50%; top: 50%; width: 210px; margin: -74px 0 0 -105px; text-align: center; opacity: 0; transition: opacity .22s ease .18s; } body.is-leaving .veil-brand { opacity: 1; } .veil-logo { display: block; width: 168px; height: auto; margin: 0 auto 16px; -webkit-animation: veilPulse 1.6s ease-in-out infinite; animation: veilPulse 1.6s ease-in-out infinite; } .veil-bar { display: block; width: 132px; height: 4px; margin: 0 auto; border-radius: 999px; background: rgba(25, 107, 212, .14); overflow: hidden; } .veil-bar i { display: block; width: 42%; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--blue), var(--gold)); -webkit-animation: veilSlide 1.05s ease-in-out infinite; animation: veilSlide 1.05s ease-in-out infinite; } @-webkit-keyframes veilPulse { 0%, 100% { opacity: .82; } 50% { opacity: 1; } } @keyframes veilPulse { 0%, 100% { opacity: .82; } 50% { opacity: 1; } } @-webkit-keyframes veilSlide { from { -webkit-transform: translateX(-115%); } to { -webkit-transform: translateX(255%); } } @keyframes veilSlide { from { transform: translateX(-115%); } to { transform: translateX(255%); } } /* เนื้อหาลอยขึ้นเล็กน้อยตอนเข้าหน้า */ @keyframes pageRise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } } .track, .doc-hero, .dock { animation: pageRise .44s ease both; } .dock { animation-delay: .08s; } @media (prefers-reduced-motion: reduce) { .page-veil { display: none; } .track, .doc-hero, .dock { animation: none; } .pill.is-active::before { animation: none; } } body { font-family: var(--font-body); font-weight: 400; color: var(--navy); background: var(--page); -webkit-font-smoothing: antialiased; overflow-wrap: break-word; } a { color: inherit; text-decoration: none; } p { margin: 0; } ul, ol { margin: 0; padding: 0; list-style: none; } img { display: block; max-width: 100%; } h1, h2, h3 { margin: 0; font-family: var(--font-head); font-weight: 600; line-height: 1.16; letter-spacing: -.01em; } h4 { margin: 0; font-weight: 600; } /* ========================================================================== BACKDROP — เลเยอร์พื้นหลัง parallax ========================================================================== */ .backdrop { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; background: linear-gradient(180deg, #d7ecff 0%, #eef6ff 44%, var(--page) 100%); } .bg-layer { position: absolute; left: 0; height: 100%; width: 400vw; /* JS คำนวณใหม่ตามความยาว track */ background-repeat: repeat-x; background-size: auto 100%; will-change: transform; } .bg-sky { top: 0; background-position: left top; opacity: 1; } .bg-ground { bottom: 0; height: 20%; background-position: left bottom; opacity: .7; } /* ภาพพื้นหลังเฉพาะหน้า (mythos_head(['bg' => ...])) — เต็มจอ ไม่ขยับตามการเลื่อน ตั้งใจไม่ใส่คลาส .bg-layer เพราะ JS parallax จะเลื่อนภาพจนเปิดช่องโหว่ท้ายจอ */ .bg-photo { position: absolute; inset: 0; background-position: center center; background-size: cover; background-repeat: no-repeat; } /* ภาพฉากที่ยอมให้ขยับตามการเลื่อน panel — mythos_head(['bg_move' => 0.2]) ได้คลาส .bg-layer ไปด้วย JS จึงคำนวณความกว้าง + เลื่อนให้ (mythos-horizontal.js) ★ ต้อง right:auto ไม่งั้น inset:0 ของ .bg-photo ล็อกความกว้างไว้ JS สั่งกว้างไม่ขึ้น ★ cover + no-repeat: ภาพแคบกว่าที่ JS ขอ = ถูกซูมขึ้น (ตัดบน-ล่าง) ไม่ใช่โหว่/ต่อซ้ำ แนะนำภาพ ~3:1 ขึ้นไป จะได้ไม่โดนซูมจนเสียองค์ประกอบ */ .bg-photo.is-move { right: auto; width: 400vw; /* JS เขียนทับด้วยค่าจริง */ background-size: cover; background-repeat: no-repeat; /* ยันขอบบน ไม่ใช่ center — ภาพเตี้ยกว่าที่ต้องการเมื่อไหร่ cover จะตัดส่วนเกิน ตัดจากล่าง (พื้น) ดีกว่าตัดจากบน (หัวตัวละคร) */ background-position: left top; will-change: transform; } /* หน้ายาว (doc) — ภาพสูงเกินจอ 32% แล้วเลื่อนขึ้นได้เท่าส่วนเกินนั้น จากนั้นหยุด ★ ต้อง bottom:auto ไม่งั้น inset:0 ของ .bg-photo ล็อกความสูงไว้ height ไม่ทำงาน เพดานคำนวณใน mythos-ui.js จากความสูงจริงของ element ไม่ได้ hardcode ไว้ที่นี่ */ .bg-photo.is-move-y { bottom: auto; height: 132%; background-size: cover; background-position: center top; will-change: transform; } /* จอแคบ: ภาพพาโนรามาย่อตามความสูงแล้วเห็นแค่ ~20% ของความกว้าง ยันซ้ายจะเหลือแต่เสาหิน — เลื่อนมาหาตัวละครแทน ยกเว้น .bg-m (ภาพแนวตั้งที่ทำมาเพื่อมือถือโดยเฉพาะ) ให้คงตำแหน่งเดิม */ @media (max-width: 900px) { .bg-photo.is-move:not(.bg-m) { background-position: 62% top; } .bg-photo.is-move.bg-m { background-position: center top; } } /* วิธีวางภาพลงจอ — ตั้งที่ mythos_head(['bg_fit' => ...]) */ .bg-photo.is-fit-stretch { background-size: 100% 100%; } /* พอดีจอเป๊ะ ไม่ตัด แลกกับสัดส่วนเพี้ยน */ .bg-photo.is-fit-contain { background-size: contain; } /* เห็นครบทั้งใบ มีแถบว่างบน-ล่าง */ /* ภาพฉากคนละใบระหว่างจอกว้าง/จอแนวตั้ง (mythos_head(['bg_m' => ...])) สลับด้วย display ไม่ใช่ background-image เพราะ background-image เขียน inline มา กฎในไฟล์ CSS สู้ inline ไม่ได้ · div ที่ display:none เบราว์เซอร์ไม่โหลดภาพให้อยู่แล้ว หน้าที่ไม่ส่ง bg_m มาจะไม่มี div คู่นี้เลย (มี .bg-photo ใบเดียวไม่ติดคลาส) */ .bg-photo.bg-m { display: none; } @media (max-width: 900px) { .bg-photo.bg-d { display: none; } .bg-photo.bg-m { display: block; } } /* ม่านขาวไล่ระดับ ให้ตัวอักษรอ่านง่ายเมื่อใส่ภาพจริง */ .backdrop::after { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(247, 251, 255, .58) 0%, rgba(247, 251, 255, .38) 42%, rgba(247, 251, 255, .86) 100%); } /* หน้าแรก (panel mode) ที่ใส่ภาพฉากเต็มจอ — ม่านบางลงกว่าค่ามาตรฐาน ให้เห็นฉาก แต่ยังพอมีขาวรองหัวเรื่อง/แถบล่าง (กฎของ body.doc เขียนแยกไว้ด้านล่าง เจาะจงกว่า จึงไม่ตีกัน) */ .backdrop.is-photo::after { background: linear-gradient(180deg, rgba(247, 251, 255, .46) 0%, rgba(247, 251, 255, .30) 38%, rgba(247, 251, 255, .74) 100%); } /* ฉากมีแดดในภาพอยู่แล้ว ลำแสงซ้อนอีกจะเลอะ */ .backdrop.is-photo .sun-rays { opacity: .07; } .backdrop.is-photo .sun-glow { opacity: .20; } /* หน้าแรกที่ใส่ฉากเต็มจอ — ตัวละครอยู่ในฉากอยู่แล้ว ไม่ต้องมี hero-art ซ้อนอีก ซ่อนแทนการลบออกจาก HTML เพราะถอด 'bg' ออกเมื่อไหร่ ภาพกลับมาเองทันที */ body.has-bg .hero-art { display: none; } body.has-bg .hero-main { grid-template-columns: 1fr; } body.has-bg .hero-card { max-width: 760px; } /* มีการ์ดนับถอยหลังอยู่ช่องขวา -> กลับมาเป็น 2 คอลัมน์ (ช่องขวาแคบกว่า) ปิด $countdown['on'] เมื่อไหร่ คลาส has-side หายไปเอง = กลับเป็นคอลัมน์เดียว */ body.has-bg .hero-main.has-side { grid-template-columns: minmax(0, 1fr) minmax(0, .56fr); } body.has-bg .hero-main.has-side .hero-card { max-width: none; } /* ฉากหน้าแรกใช้ภาพเต็มผืนตามที่ให้มา (bg-home.webp 1920x1080 = 16:9) ไม่ตัด ไม่ซูม ไม่เลื่อนตำแหน่ง — ใช้ค่า cover / center ของ .bg-photo ตรง ๆ จอ 16:9 เห็นครบทั้งใบ · จอ 16:10 ตัดข้างละ 5% เท่านั้น */ /* ========================================================================== แสงแดด — ดวงอาทิตย์มุมขวาบน + ลำแสงเฉียงบาง ๆ อยู่ในชั้น .backdrop (z-index 0) ทั้งหมด เนื้อหาอยู่ z-index 10 จึงไม่มีทางทับกัน ========================================================================== */ .sun-glow, .sun-rays { position: absolute; z-index: 2; /* เหนือม่านขาว (::after) แต่ยังอยู่ใต้เนื้อหา */ pointer-events: none; } .sun-glow { top: -30vh; right: -10vw; width: min(1150px, 82vw); height: min(1150px, 82vw); border-radius: 50%; /* ความสว่างทั้งชุดถูกหรี่ลงครึ่งหนึ่งจากรอบแรก — แดดบางลง อ่านตัวหนังสือสบายขึ้น */ background: radial-gradient(circle, rgba(255, 250, 226, .46) 0%, rgba(255, 240, 191, .23) 26%, rgba(255, 228, 158, .08) 50%, rgba(255, 228, 158, 0) 72%); filter: blur(4px); animation: sunPulse 11s ease-in-out infinite; } /* ลำแสงเป็นซี่ ๆ ยิงออกจากจุดเดียวกับดวงอาทิตย์ แล้วจางหายก่อนถึงกลางจอ */ .sun-rays { inset: -34% -22% -10%; background: repeating-conic-gradient(from 186deg at 78% -6%, rgba(255, 255, 255, 0) 0deg, rgba(255, 255, 255, 0) 2.2deg, rgba(255, 250, 232, .42) 3.6deg, rgba(255, 243, 206, .25) 5.2deg, rgba(255, 255, 255, 0) 7deg, rgba(255, 255, 255, 0) 10deg); -webkit-mask-image: radial-gradient(circle at 78% -6%, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, .78) 32%, rgba(0, 0, 0, .34) 60%, transparent 84%); mask-image: radial-gradient(circle at 78% -6%, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, .78) 32%, rgba(0, 0, 0, .34) 60%, transparent 84%); filter: blur(2px); opacity: .4; transform-origin: 78% 0; animation: sunSweep 26s ease-in-out infinite alternate; } @keyframes sunPulse { 0%, 100% { opacity: .41; transform: scale(1); } 50% { opacity: .5; transform: scale(1.05); } } @keyframes sunSweep { from { transform: rotate(-2.6deg) scale(1.02); opacity: .31; } to { transform: rotate(2.6deg) scale(1.07); opacity: .48; } } /* หน้าแยกอ่านตัวหนังสือเยอะ — หรี่แสงลงหน่อย */ body.doc .sun-rays { opacity: .17; } body.doc .sun-glow { opacity: .35; } @media (prefers-reduced-motion: reduce) { .sun-glow, .sun-rays { animation: none; } } /* หน้าแยก: หัวเรื่องวางบนภาพตรง ๆ ไม่มีการ์ดขาวรอง -> ม่านต้องหนากว่า */ body.doc .backdrop::after { background: linear-gradient(180deg, rgba(247, 251, 255, .80) 0%, rgba(247, 251, 255, .74) 38%, rgba(247, 251, 255, .92) 100%); } body.doc .bg-ground { opacity: .42; } /* หน้าที่ใช้ภาพเฉพาะของตัวเอง — ม่านขาวบางลง ให้เห็นฉากชัดขึ้น ต้องเขียนเจาะจงกว่ากฎ body.doc .backdrop::after ข้างบน ไม่งั้นถูกทับ */ body.doc .backdrop.is-photo::after { background: linear-gradient(180deg, rgba(247, 251, 255, .58) 0%, rgba(247, 251, 255, .46) 40%, rgba(247, 251, 255, .88) 100%); } /* ฉากมีแสงในภาพอยู่แล้ว ลำแสงซ้อนอีกจะเลอะ — หรี่ลงเกือบหมด */ body.doc .backdrop.is-photo .sun-rays { opacity: .08; } body.doc .backdrop.is-photo .sun-glow { opacity: .22; } /* ========================================================================== TOP BAR ========================================================================== */ .bar { position: fixed; top: 0; left: 0; right: 0; height: var(--bar-h); z-index: 40; display: flex; align-items: center; gap: 18px; padding: 0 var(--gutter) 0 calc(var(--gutter) + var(--side-w)); background: transparent; /* พื้นจริงอยู่ที่ ::before ด้านล่าง */ border-bottom: 0; } /** * พื้นแถบบน — ไล่จางหายลงล่างแบบเดียวกับแถบล่าง (เดิมเป็นแผ่นขาวทึบมีเส้นตัด) * ต้องแยกเป็น ::before เพราะ backdrop-filter ต้องถูก mask ให้จางตามไปด้วย * ไม่งั้นความเบลอจะตัดขาดเป็นเส้นตรงกลางภาพ * * สูงกว่าตัวแถบ (--bar-fade) เพื่อให้ไล่ลงมาคลุมทั้งเมนู แล้วค่อยจางหายใต้แถบ * ไม่มีเส้นขอบล่างให้เห็นรอยตัด */ .bar::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: calc(var(--bar-h) + var(--bar-fade)); z-index: -1; background: linear-gradient(180deg, rgba(247, 251, 255, .95) 0%, rgba(247, 251, 255, .82) 34%, rgba(247, 251, 255, .52) 62%, rgba(247, 251, 255, .2) 84%, rgba(247, 251, 255, 0) 100%); backdrop-filter: blur(15px) saturate(1.3); -webkit-backdrop-filter: blur(15px) saturate(1.3); -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 46%, rgba(0, 0, 0, .45) 74%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, #000 46%, rgba(0, 0, 0, .45) 74%, transparent 100%); pointer-events: none; transition: opacity .3s; } /** * ก้อนเมฆลอยอยู่ในแถบ — วงกลมฟุ้งหลายวงซ้อนกัน ลอยไปมาช้า ๆ ไม่มีวันหยุด * กว้างเกินขอบจอทั้งสองข้าง (-18%) จะได้ไม่เห็นขอบก้อนเมฆตอนมันเลื่อน */ .bar::after { content: ''; position: absolute; top: 0; left: -18%; right: -18%; height: calc(var(--bar-h) + var(--bar-fade)); z-index: -1; background: radial-gradient(46% 130% at 14% 24%, rgba(255, 255, 255, .92), rgba(255, 255, 255, 0) 70%), radial-gradient(32% 100% at 33% 2%, rgba(255, 255, 255, .7), rgba(255, 255, 255, 0) 72%), radial-gradient(40% 120% at 56% 20%, rgba(236, 245, 255, .82), rgba(236, 245, 255, 0) 70%), radial-gradient(30% 104% at 74% 0%, rgba(255, 255, 255, .74), rgba(255, 255, 255, 0) 72%), radial-gradient(44% 126% at 92% 22%, rgba(244, 249, 255, .8), rgba(244, 249, 255, 0) 70%); -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 40%, rgba(0, 0, 0, .4) 72%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, #000 40%, rgba(0, 0, 0, .4) 72%, transparent 100%); animation: barClouds 46s ease-in-out infinite alternate; pointer-events: none; } @keyframes barClouds { from { transform: translate3d(-2.4%, 0, 0) scale(1); } to { transform: translate3d(2.4%, -5px, 0) scale(1.07); } } @media (prefers-reduced-motion: reduce) { .bar::after { animation: none; } } /* ★ คุมด้วย "ความสูง" ไม่ใช่ความกว้าง — โลโก้ชุดใหม่สัดส่วน ~1.58:1 (ใบเก่า 2.07:1) ล็อกความสูงไว้แถบบนจึงสูงเท่าเดิมทุกครั้งที่เปลี่ยนรูปโลโก้ ส่วนความกว้างคิดตามเอง (48 ไม่ใช่ 44 ของเดิม — ใบใหม่เป็นภาพลายละเอียด เตี้ยกว่านี้บรรทัดรองจมหายไปเลย) */ .bar-logo img { height: 48px; width: auto; } /* ========================================================================== ข้อความวิ่งมุมซ้ายของแถบบน พิมพ์ชุดข้อความ 2 ชุดต่อกัน แล้วเลื่อน -50% -> วนกลับมาจุดเดิมพอดี ไม่มีรอยต่อ ========================================================================== */ /** * กินพื้นที่ว่างทั้งหมดทางซ้าย แล้วหยุดก่อนถึงเมนูที่ตรึงกลางจอ * 250px ≈ ครึ่งความกว้างเมนู (HOME…START) + ช่องไฟ * หน้าแยกมีโลโก้กินที่ไปอีก ~118px จึงหักเพิ่ม (ดูกฎถัดไป) */ .bar-ticker { flex: 1 1 auto; width: auto; max-width: calc(50vw - var(--side-w) - var(--gutter) - 250px); min-width: 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 84%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 84%, transparent 100%); } /** * หน้าแรก: แถบบนเว้นซ้ายไว้ให้เมนูที่ตรึงกลางจอ (--side-w) แต่ตรงนั้นว่างเปล่า * ดึงข้อความวิ่งกลับไปเริ่มที่ขอบซ้ายจริง แล้วยืดยาวจนเกือบถึงเมนูกลางจอ */ body:not(.doc) .bar-ticker { margin-left: calc(var(--side-w) * -1); max-width: calc(50vw - var(--gutter) - 250px); } /* หน้าแยกมีโลโก้อยู่ซ้ายสุด — หักความกว้างโลโก้ออกก่อน ไม่งั้นข้อความจะไหลไปชนเมนู */ body.doc .bar-ticker { max-width: calc(50vw - var(--gutter) - 250px - 118px); } /* ความเร็ววิ่ง 1 รอบ — ค่าจริงมาจาก $ticker_speed ใน config_mythos.php (inline style) */ .ticker-run { display: flex; width: max-content; animation: tickerRun 34s linear infinite; } .bar-ticker:hover .ticker-run { animation-play-state: paused; } .ticker-set { display: flex; flex-shrink: 0; } .ticker-i { display: inline-flex; align-items: center; font-size: .74rem; font-weight: 600; letter-spacing: .04em; color: var(--navy-soft); white-space: nowrap; text-shadow: 0 1px 0 rgba(255, 255, 255, .85); } /* เพชรทองคั่นระหว่างข้อความ */ .ticker-i::after { content: ''; width: 6px; height: 6px; margin: 0 16px; flex-shrink: 0; background: var(--gold); box-shadow: 0 0 0 3px rgba(234, 184, 79, .18); transform: rotate(45deg); border-radius: 1px; } @keyframes tickerRun { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } } @media (prefers-reduced-motion: reduce) { .ticker-run { animation: none; } } /* จอแคบกว่านี้ค่อยซ่อน (กฎรวมอยู่ในบล็อก RESPONSIVE ที่ 1180px) */ /* ปุ่ม ☰ (โชว์เมื่อเมนูซ้ายไม่ได้ค้างไว้) */ .burger { width: 42px; height: 42px; flex-shrink: 0; display: grid; align-content: center; justify-items: center; gap: 5px; padding: 0; border: 1px solid rgba(255, 255, 255, .8); border-radius: 12px; background: linear-gradient(180deg, rgba(255, 255, 255, .78), rgba(228, 241, 255, .56)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9); backdrop-filter: blur(10px) saturate(1.45); -webkit-backdrop-filter: blur(10px) saturate(1.45); cursor: pointer; } .burger span { width: 18px; height: 2px; border-radius: 2px; background: var(--navy); transition: transform .2s, opacity .2s; } .burger.is-on span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .burger.is-on span:nth-child(2) { opacity: 0; } .burger.is-on span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /** * เมนูบน — ตรึงไว้กลางแถบทุกหน้า (ไม่ว่าจะมีโลโก้/ปุ่ม ☰ หรือไม่) * เดิมหน้าแรกชิดซ้าย หน้าแยกชิดขวา -> เปลี่ยนหน้าแล้วเมนูกระโดด * ตอนนี้วางแบบ absolute อิงกึ่งกลางจอ จึงอยู่ตำแหน่งเดิมเสมอ */ .bar-nav { display: flex; align-items: center; gap: 4px; margin-left: auto; overflow: visible; } @media (min-width: 861px) { .bar-nav { position: absolute; left: 50%; top: 50%; margin: 0; transform: translate(-50%, -50%); } } .bar-nav a { font-size: .92rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--navy-soft); padding: 10px 17px; border-radius: 999px; white-space: nowrap; transition: color .18s, background-color .18s; } /* hover = ตัวหนังสือนูนเด่นออกมา (ยกขึ้น + ขยาย + ไฮไลต์ขอบบน + เงาใต้ปุ่ม) */ .bar-nav a:hover { color: var(--navy); background: linear-gradient(180deg, #ffffff 0%, var(--blue-pale) 100%); box-shadow: 0 8px 18px rgba(16, 44, 86, .2), inset 0 1px 0 rgba(255, 255, 255, .95); text-shadow: 0 1px 0 rgba(255, 255, 255, .95), 0 3px 8px rgba(25, 107, 212, .3); } .bar-nav a.is-active { color: var(--navy); background: var(--blue-pale); box-shadow: inset 0 0 0 1px var(--border); } .bar-nav a { text-shadow: 0 1px 0 rgba(255, 255, 255, .8); } /* แถบบนโปร่งแล้ว — ตัวหนังสือต้องมีขอบขาวบาง ๆ */ .bar-cta { display: flex; gap: 8px; flex-shrink: 0; } /* สเตตัสสด + ปุ่ม ดันไปชิดขวาพร้อมกัน (สเตตัสอยู่ก่อนปุ่ม) */ .bar-status { display: flex; align-items: center; gap: 8px; flex-shrink: 0; margin-left: auto; } /* ========================================================================== แคปซูลสเตตัสสด — ไฟสถานะ + ผู้เล่นออนไลน์ + จำนวนไอดี ตัวเลขมาจาก mythos_stats() (system/db_mythos.php) แคชไว้ 45 วินาที ========================================================================== */ .live-pod { display: inline-flex; align-items: center; gap: 11px; padding: 6px 14px 6px 11px; border-radius: 999px; background: linear-gradient(180deg, rgba(255, 255, 255, .82), rgba(226, 240, 255, .6)); border: 1px solid rgba(255, 255, 255, .85); box-shadow: 0 6px 16px rgba(16, 44, 86, .12), inset 0 1px 0 rgba(255, 255, 255, .9); backdrop-filter: blur(10px) saturate(1.4); -webkit-backdrop-filter: blur(10px) saturate(1.4); white-space: nowrap; } .live-lamp { position: relative; width: 9px; height: 9px; flex-shrink: 0; } .live-lamp i { position: absolute; inset: 0; border-radius: 50%; background: #1fbf7a; box-shadow: 0 0 0 3px rgba(31, 191, 122, .2); } /* วงคลื่นกระเพื่อมออก = เซิร์ฟหายใจอยู่ */ .live-lamp::after { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 1px solid #1fbf7a; animation: liveWave 2.6s ease-out infinite; } @keyframes liveWave { 0% { transform: scale(1); opacity: .8; } 70% { transform: scale(2.6); opacity: 0; } 100% { transform: scale(2.6); opacity: 0; } } /* ต่อฐานข้อมูลไม่ได้ = ไฟเทา ไม่กระพริบ ตัวเลขขึ้นขีด */ .live-pod.is-down .live-lamp i { background: #98a8bb; box-shadow: 0 0 0 3px rgba(152, 168, 187, .2); } .live-pod.is-down .live-lamp::after { display: none; } .live-set { display: flex; flex-direction: column; line-height: 1.15; } .live-set b { font-family: var(--font-head); font-size: .84rem; font-weight: 600; color: var(--navy); font-variant-numeric: tabular-nums; } .live-set small { font-size: .54rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--copy); } .live-pod.is-up .live-set.is-srv b { color: #17936a; } .live-pod.is-down .live-set.is-srv b { color: #7d8ea3; } .live-div { width: 1px; height: 20px; flex-shrink: 0; background: linear-gradient(180deg, transparent, rgba(16, 44, 86, .18), transparent); } .pill-status { display: inline-flex; align-items: center; gap: 6px; font-size: .66rem; font-weight: 600; letter-spacing: .04em; color: var(--navy-soft); background: linear-gradient(180deg, rgba(255, 255, 255, .8), rgba(228, 241, 255, .6)); border: 1px solid rgba(255, 255, 255, .85); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9); backdrop-filter: blur(10px) saturate(1.4); -webkit-backdrop-filter: blur(10px) saturate(1.4); border-radius: 999px; padding: 7px 12px; white-space: nowrap; } .pill-status i { width: 7px; height: 7px; border-radius: 50%; background: #1fbf7a; box-shadow: 0 0 0 3px rgba(31, 191, 122, .18); } /* login อยู่ — ขึ้นชื่อผู้ใช้ โทนทอง */ .pill-status.is-on { color: var(--gold-deep); background: rgba(234, 184, 79, .14); border-color: rgba(234, 184, 79, .45); } .pill-status.is-on i { background: var(--gold); box-shadow: 0 0 0 3px rgba(234, 184, 79, .22); } /* ========================================================================== BUTTONS ========================================================================== */ /* ปุ่มรองก็เป็นกระจก — วางบนการ์ดกระจกแล้วไม่กลายเป็นก้อนขาวทึบโดดออกมา */ .btn { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-body); font-size: .78rem; font-weight: 600; letter-spacing: .02em; padding: 11px 22px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .8); background: linear-gradient(180deg, rgba(255, 255, 255, .78), rgba(228, 241, 255, .58)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9); backdrop-filter: blur(10px) saturate(1.45); -webkit-backdrop-filter: blur(10px) saturate(1.45); color: var(--blue); cursor: pointer; white-space: nowrap; transition: transform .16s, box-shadow .16s, background-color .16s, color .16s; } .btn:hover { transform: translateY(-1px); background: linear-gradient(180deg, #ffffff, var(--blue-pale)); box-shadow: var(--shadow), inset 0 1px 0 #fff; } .btn-primary { background: var(--gold); border-color: #d9a63c; color: #3d2c07; backdrop-filter: none; -webkit-backdrop-filter: none; } .btn-primary:hover { background: linear-gradient(180deg, #f6d489, var(--gold)); } .btn-primary:hover { box-shadow: 0 12px 26px rgba(234, 184, 79, .5); } .btn-lg { font-size: .88rem; padding: 14px 28px; } /* ★ ต้องเขียนเอง — .btn เป็น display:inline-flex ซึ่งชนะกฎ [hidden] ของเบราว์เซอร์ (ปุ่ม "อ่านทั้งหมด" ใน popup ที่ไม่มีหน้าปลายทางจึงเคยโผล่มาทั้งที่สั่งซ่อนแล้ว) */ .btn[hidden] { display: none; } .link-more { display: inline-flex; align-items: center; gap: 7px; font-size: .8rem; font-weight: 600; color: var(--blue); } .link-more:hover { text-decoration: underline; } /* ========================================================================== TRACK + PANEL ========================================================================== */ .track { position: relative; z-index: 10; margin-left: var(--side-w); /* เว้นที่ให้เมนูซ้ายที่ค้างไว้ */ height: 100vh; height: 100dvh; display: flex; align-items: stretch; overflow-x: auto; overflow-y: hidden; scroll-snap-type: none; /* snap ทำเองใน JS */ scrollbar-width: none; cursor: grab; } .track::-webkit-scrollbar { display: none; } .track.is-dragging { cursor: grabbing; } .panel { position: relative; flex: 0 0 auto; width: 100%; min-width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; padding: calc(var(--bar-h) + 26px) var(--gutter) calc(var(--dock-h) + 22px); } /* panel ที่เนื้อหาไหลต่อไปทางขวา */ .panel-wide { width: auto; min-width: 100%; } /* ---------- หน้าแรก = panel เดียวจบ ไม่มีเลื่อนแนวนอน ---------- */ .track.is-solo { overflow: hidden; cursor: default; } /* เนื้อหาสูงเกินจอ (จอเตี้ย / มือถือ) = เลื่อนขึ้น-ลงในตัว panel */ .track.is-solo .panel { justify-content: flex-start; overflow-y: auto; overscroll-behavior-y: contain; } /* margin auto = อยู่กลางจอเมื่อเนื้อหาพอดี แต่ไม่ตัดหัวเมื่อเนื้อหาสูงเกิน */ .track.is-solo .panel > .reveal { margin-top: auto; margin-bottom: auto; } /* ---------- section head ---------- */ .sec-head { max-width: 460px; } .sec-kicker { display: block; font-size: .68rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-deep); margin-bottom: 12px; } .sec-title { font-size: clamp(1.85rem, 3.1vw, 2.9rem); } .sec-title em { font-style: normal; color: var(--gold-deep); } .sec-sub { margin-top: 14px; font-size: .92rem; color: var(--copy); line-height: 1.75; } /** * ---------- การ์ดกลาง = กระจกฝ้า ---------- * ทุกหน้าใช้ .card ตัวนี้ (บล็อกในหน้าแยก, ข่าว, login, member, doc-note ฯลฯ) * เดิมเป็นแผ่นขาวทึบ ตัดกับพื้นหลังภาพฉาก -> เปลี่ยนเป็นกระจกชุดเดียวกับ .hero-card * ความทึบ .78 ที่หัวการ์ด = ตัวหนังสือ navy ยังอ่านสบายแม้พื้นหลังลายเยอะ */ .card { background: linear-gradient(150deg, rgba(255, 255, 255, .90) 0%, rgba(240, 247, 255, .84) 56%, rgba(255, 255, 255, .80) 100%); border: 1px solid rgba(255, 255, 255, .90); border-radius: var(--radius); box-shadow: 0 16px 38px rgba(16, 44, 86, .16), inset 0 1px 0 rgba(255, 255, 255, .95); backdrop-filter: blur(20px) saturate(1.6); -webkit-backdrop-filter: blur(20px) saturate(1.6); } /* จุดหยุดย่อยของ panel ที่กว้างกว่าจอ */ .news-card, .event-card, .blk, .rail-block { scroll-margin-left: var(--gutter); } /* ========================================================================== 01 HERO ========================================================================== */ .p-hero { justify-content: center; } .hero-wrap { display: flex; flex-direction: column; gap: 20px; width: 100%; max-width: 1280px; } .hero-main { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .78fr); gap: 30px; align-items: center; } /** * ---------- การ์ดกระจก (glass) ---------- * พื้นหลังเป็นภาพฉากสว่าง จึงใช้กระจกฝ้าโทนขาว-ฟ้า + ขอบไฮไลต์ แทนการ์ดขาวทึบ * .glass-sheen = แสงพาดมุมบนซ้าย ทำให้ดูเป็นแผ่นกระจกจริง ไม่ใช่แค่พื้นโปร่ง */ .hero-card { position: relative; isolation: isolate; overflow: hidden; background: linear-gradient(148deg, rgba(255, 255, 255, .66) 0%, rgba(232, 244, 255, .46) 52%, rgba(255, 255, 255, .38) 100%); border: 1px solid rgba(255, 255, 255, .7); border-radius: 26px; box-shadow: 0 24px 60px rgba(16, 44, 86, .2), 0 2px 0 rgba(255, 255, 255, .55) inset, 0 -22px 44px rgba(25, 107, 212, .07) inset; backdrop-filter: blur(22px) saturate(1.6); -webkit-backdrop-filter: blur(22px) saturate(1.6); padding: clamp(26px, 3vw, 44px); max-width: 620px; } /* แสงพาดเฉียงมุมบนซ้าย */ .hero-card::before { content: ''; position: absolute; z-index: -1; top: -60%; left: -20%; width: 90%; height: 200%; background: linear-gradient(103deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 62%); transform: rotate(-12deg); pointer-events: none; } /* เส้นทองบาง ๆ ขอบล่าง ให้การ์ดมีน้ำหนัก */ .hero-card::after { content: ''; position: absolute; z-index: -1; left: 12%; right: 12%; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(234, 184, 79, .75), transparent); pointer-events: none; } /* เบราว์เซอร์ที่ไม่มี backdrop-filter — ทึบขึ้นเพื่อให้ยังอ่านออก (ทุกการ์ดกระจกในเว็บ) */ @supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) { .hero-card, .stat-strip, .srv-head, .srv-tile, .side-in, .live-pod, .hero-share, .qd-b, .card, .event-card, .step-card, .news-brief a, .popup-box, .doc-toc a, .doc-foot, .btn, .burger, .arrow, .pill-status, .cd-card, .social-btn, .quick-chip { background: rgba(255, 255, 255, .94); } .btn-primary { background: var(--gold); } .rate-tile, .woe-fact, .news-flash { background: var(--blue-pale); } .side-menu { background: rgba(255, 255, 255, .96); } .bar::before { background: rgba(247, 251, 255, .95); } .bar::after { display: none; } } /* แถบข่าวล่าสุดบรรทัดเดียว (รายละเอียดอยู่หน้าข่าว) */ .news-flash { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; padding: 7px 14px 7px 8px; background: linear-gradient(180deg, rgba(234, 244, 255, .8), rgba(255, 255, 255, .5)); border: 1px solid rgba(255, 255, 255, .82); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85); border-radius: 999px; max-width: 100%; transition: background-color .16s, box-shadow .16s; } .news-flash:hover { background: rgba(255, 255, 255, .86); box-shadow: var(--shadow); } .news-flash .tag { flex-shrink: 0; font-size: .6rem; font-weight: 700; letter-spacing: .1em; color: #3d2c07; background: var(--gold); border-radius: 999px; padding: 4px 10px; } .news-flash .t { flex: 1; min-width: 0; font-size: .78rem; font-weight: 600; color: var(--navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .news-flash .go { flex-shrink: 0; color: var(--blue); font-weight: 700; } .hero-kicker { display: block; font-size: .7rem; font-weight: 700; letter-spacing: .2em; color: var(--gold-deep); margin-bottom: 16px; } .hero-logo { width: clamp(180px, 20vw, 250px); margin-bottom: 20px; } /* ★ หัวเรื่อง 3 บรรทัด (ชุดโปรโมชัน CBT) จึงเล็กกว่าของเดิมมาก ของเดิมเป็น 2 บรรทัด clamp(2.4rem, 4.4vw, 4.05rem) — ขนาดนั้นบรรทัดแรก ("เตรียมตัวให้พร้อม!" 17 ตัวอักษร) จะยาวไปทับป้ายสามเหลี่ยม .hpromo มุมขวาบน ซึ่ง **กว้างที่สุดตรงขอบบนพอดี** = จุดที่หัวเรื่องบรรทัดแรกอยู่ */ .hero-title { font-size: clamp(1.5rem, 2.08vw, 1.86rem); line-height: 1.18; } /* บรรทัดที่ 2 (ทอง) เป็นบรรทัดเด่นสุด — อยู่ต่ำลงมาแล้ว สามเหลี่ยมแคบลง จึงยาวได้กว่า */ .hero-title span { display: block; font-size: 1.32em; line-height: 1.1; color: var(--gold-deep); } /* บนกระจกต้องเข้มกว่าการ์ดขาวนิดหน่อยถึงจะอ่านสบาย */ .hero-lead { margin-top: 18px; font-size: .96rem; color: var(--navy-soft); line-height: 1.8; max-width: 48ch; } .hero-actions { margin-top: 26px; display: flex; gap: 12px; flex-wrap: wrap; } /* ========================================================================== 01a การ์ด hero ชุดโปรโมชัน CBT — แถบของขวัญ · จุดเด่น 4 ข้อ · กล่องร่วมสนุก ========================================================================== ★★ งบความสูงของการ์ดใบนี้ตึงมาก — panel 01 ห้ามเกิน 1 จอ (กติกาข้อ 2) วัดจริงที่ viewport 1424x749 : hero-wrap ท้ายสุดอยู่ที่ y 681 และแถบเมนูล่าง (.dock, position: fixed) เริ่มที่ y 683 — **เหลือช่องว่างแค่ 2px** การ์ดสูงเกินเมื่อไหร่ = ทับแถบล่าง และหัวการ์ดมุดขึ้นไปใต้แถบบนพร้อมกัน (hero-wrap จัดกลางแนวตั้ง โตขึ้น 1px จึงกินทั้งหัวและท้ายอย่างละครึ่ง) ★ เพิ่มบล็อกใหม่ในการ์ดนี้ทุกครั้ง ต้องไปลดระยะในบล็อก @media (max-height: 800px) and (min-width: 861px) ท้ายไฟล์ด้วยเสมอ -------------------------------------------------------------------------- */ /* บรรทัดที่ 3 ของหัวเรื่อง ("ก่อน CBT เริ่มต้น!") — ตัวเล็ก ฟอนต์เนื้อความ */ .hero-title small { display: block; margin-top: 7px; font-family: var(--font-body); font-size: .95rem; font-weight: 700; line-height: 1.35; color: var(--navy-soft); } /* -------------------------------------------------------------------------- แถบของขวัญต้อนรับ — ★ ทำหน้าที่ "ปุ่มหลัก" ของหน้าแรกแทน .hero-actions เดิม จึงต้องเด่นเท่าปุ่ม .btn-primary : พื้นทองทึบ ไม่ใช่กระจก ★ ทึบอยู่แล้วจึง **ไม่ต้องมีใน @supports not (backdrop-filter)** -------------------------------------------------------------------------- */ .hero-gift { margin-top: 18px; display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 16px; border: 1px solid rgba(169, 124, 28, .38); background: linear-gradient(135deg, #fbe6b4 0%, var(--gold) 62%, #e0a93c 100%); box-shadow: 0 8px 20px rgba(169, 124, 28, .26), inset 0 1px 0 rgba(255, 255, 255, .75); /* ★ หมึกเข้มบนพื้นทอง — ห้ามใช้ --gold-deep (ทองบนทองวัดได้ 1.5:1 อ่านไม่ออก) บทเรียนเดียวกับตัวหนังสือในป้าย .hpromo */ color: var(--navy); text-decoration: none; transition: transform .16s, box-shadow .16s; } .hero-gift:hover { transform: translateY(-2px); box-shadow: 0 14px 28px rgba(169, 124, 28, .34), inset 0 1px 0 rgba(255, 255, 255, .85); } .hg-ico { flex: 0 0 auto; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 11px; background: rgba(255, 255, 255, .58); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .7); } .hg-tx { flex: 1 1 auto; min-width: 0; } .hg-tx b { display: block; font-size: .84rem; font-weight: 800; line-height: 1.4; } .hg-tx small { display: block; font-size: .72rem; line-height: 1.4; color: #6a5314; } .hg-go { flex: 0 0 auto; color: var(--navy); opacity: .72; } /* -------------------------------------------------------------------------- จุดเด่น 4 ข้อ — แทนย่อหน้าแนะนำ (.hero-lead) ของการ์ดชุดเดิม ★ ที่นี่เป็นคอลัมน์เดียว · ≥1181px ค่อยแบ่ง 2 คอลัมน์ (ดูบล็อก min-width: 1181px) -------------------------------------------------------------------------- */ .hero-bul { margin-top: 15px; list-style: none; display: grid; gap: 7px; } .hero-bul li { display: flex; align-items: flex-start; gap: 9px; font-size: .8rem; line-height: 1.5; color: var(--navy-soft); } .hero-bul li b { font-weight: 800; color: var(--navy); } .hb-svg { flex: 0 0 auto; margin-top: 1px; color: var(--blue); } /* -------------------------------------------------------------------------- กล่อง "ร่วมสนุกง่ายๆ" — ทั้งกล่องเป็นลิงก์ไปหน้ากิจกรรม Like & Share -------------------------------------------------------------------------- */ .hero-share { margin-top: 15px; display: flex; align-items: center; gap: 10px 16px; /* ★ nowrap ที่ตัวกล่อง แต่ .hsh-steps ข้างในตัดบรรทัดเองได้ ปล่อยให้กล่องตัดบรรทัด = ลูกศรท้ายกล่อง (.hsh-go) ตกไปอยู่บรรทัดล่างตัวเดียวโดด ๆ (เห็นชัดที่ 1440 ซึ่งกล่องกว้างไม่พอให้ทุกอย่างอยู่แถวเดียว) */ flex-wrap: nowrap; padding: 10px 14px; border-radius: 15px; border: 1px solid rgba(234, 184, 79, .55); background: linear-gradient(180deg, rgba(255, 250, 238, .82), rgba(253, 240, 210, .62)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8); backdrop-filter: blur(8px) saturate(1.3); -webkit-backdrop-filter: blur(8px) saturate(1.3); color: var(--navy); text-decoration: none; transition: transform .16s, box-shadow .16s, border-color .16s; } .hero-share:hover { transform: translateY(-2px); border-color: var(--gold); box-shadow: 0 10px 22px rgba(169, 124, 28, .2), inset 0 1px 0 rgba(255, 255, 255, .9); } .hsh-h { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; font-size: .8rem; font-weight: 800; color: var(--gold-deep); } .hsh-hico { color: var(--gold-deep); } .hsh-steps { flex: 1 1 auto; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; } .hsh-step { display: inline-flex; align-items: center; gap: 6px; font-size: .74rem; font-weight: 700; color: var(--navy); } .hsh-ico { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, .9); box-shadow: 0 2px 6px rgba(16, 44, 86, .12), inset 0 0 0 1px rgba(234, 184, 79, .5); color: var(--blue); } .hsh-step em { font-style: normal; } .hsh-sep { display: inline-flex; color: var(--gold-deep); opacity: .55; } /* ★ ลูกศรท้ายกล่อง — ดันชิดขวาด้วย margin-left: auto ที่จอ ≥1600 กล่องนี้กว้างเกิน 900px ถ้าไม่มีอะไรปิดท้าย จะเหลือที่ว่างยาว จนดูเหมือนกล่องพัง (และไม่มีอะไรบอกว่าทั้งกล่องกดได้) */ .hsh-go { flex: 0 0 auto; margin-left: auto; color: var(--gold-deep); opacity: .7; } /* ========================================================================== 01a-5 ปุ่มลัดวงกลม (quick dial) — ★ กางค้างตลอด + ลอยเป็นคลื่น (14 ส.ค. 2569) ========================================================================== ★★ ของรอบแรกหุบเป็นกระจุกแล้วกางตอนชี้เมาส์ — ผู้ใช้สั่งให้ **กางออกเลย** เพราะที่ว่างในการ์ดเหลือเยอะ (ปุ่ม 7 ใบกว้างรวม 342px จากพื้นที่ 456px) ★ ผลพลอยได้ที่สำคัญกว่า: ไม่ต้องพึ่ง :hover อีกแล้ว จอสัมผัสจึงได้ของเดียวกับเมาส์เป๊ะ (กฎ @media (hover: none) ที่เคยต้องเขียนคู่กันทุกครั้ง ถอดออกได้หมด) ★★ ยังไม่ใช้ JS เลยสักบรรทัด ★ ปุ่มลอยขึ้น-ลงไล่กันทีละใบ (qdFloat) + วงแหวนทองเรืองแสงตาม (qdRing) ทั้งคู่หน่วงด้วย animation-delay รายใบ = คลื่นวิ่งจากซ้ายไปขวา -------------------------------------------------------------------------- */ /* ★ ประกาศชนิดของตัวแปรก่อน — ไม่งั้น custom property เปลี่ยนค่าแบบกระโดด (step) transition ไม่ทำงาน · เบราว์เซอร์ที่ไม่รู้จัก @property ก็แค่กระโดด ไม่พัง ★★ จำเป็นเพราะ transform ของปุ่มถูก keyframe ยึดไว้ตลอดเวลา สั่ง transition ที่ transform ตรง ๆ ไม่มีผล — ต้องไป transition ที่ "ตัวแปรใน keyframe" แทน */ @property --qd-lift { syntax: ''; inherits: false; initial-value: 0px; } @property --qd-sc { syntax: ''; inherits: false; initial-value: 1; } /* ลอยขึ้น-ลง — ค่ากลางมาจาก --qd-lift/--qd-sc ที่ :hover เปลี่ยนได้ */ @keyframes qdFloat { 0%, 100% { transform: translateY(var(--qd-lift, 0px)) scale(var(--qd-sc, 1)); } 50% { transform: translateY(calc(var(--qd-lift, 0px) - 5px)) scale(var(--qd-sc, 1)); } } /* วงแหวนทองเรืองแสงเป็นจังหวะ */ @keyframes qdRing { 0%, 62%, 100% { opacity: 0; transform: scale(.94); } 18% { opacity: .85; transform: scale(1); } 40% { opacity: 0; transform: scale(1.16); } } .qdial { --qd-s: 42px; /* เส้นผ่านศูนย์กลางปุ่ม */ --qd-gap: 8px; /* ช่องไฟระหว่างปุ่ม */ margin-top: 15px; padding-top: 13px; border-top: 1px dashed var(--border); display: flex; align-items: center; gap: 12px; } .qd-label { flex: 0 0 auto; display: flex; flex-direction: column; gap: 1px; font-size: .66rem; font-weight: 800; letter-spacing: .12em; line-height: 1.3; color: var(--gold-deep); } .qd-label i { font-style: normal; font-size: .58rem; font-weight: 600; letter-spacing: 0; color: var(--copy); } .qd-fan { flex: 1 1 auto; display: flex; align-items: center; min-width: 0; } .qd-b { position: relative; flex: 0 0 auto; width: var(--qd-s); height: var(--qd-s); padding: 0; display: grid; place-items: center; border-radius: 50%; /* ★ ขอบขาวหนา 2px = "เส้นตัด" ให้ใบที่ซ้อนกันยังแยกออกจากกันได้ตอนหุบ */ border: 2px solid rgba(255, 255, 255, .96); background: linear-gradient(180deg, rgba(255, 255, 255, .92), rgba(222, 238, 255, .78)); box-shadow: 0 3px 10px rgba(16, 44, 86, .2), inset 0 1px 0 rgba(255, 255, 255, .95); backdrop-filter: blur(8px) saturate(1.4); -webkit-backdrop-filter: blur(8px) saturate(1.4); cursor: pointer; animation: qdFloat 3.4s ease-in-out infinite; /* ★ transition ที่ตัวแปร ไม่ใช่ที่ transform (transform ถูก keyframe ยึดไว้แล้ว) */ transition: --qd-lift .2s cubic-bezier(.2, .9, .3, 1.25), --qd-sc .2s cubic-bezier(.2, .9, .3, 1.25), box-shadow .18s, background-color .18s, border-color .18s; } .qd-b + .qd-b { margin-left: var(--qd-gap); } .qd-b img { width: 24px; height: 24px; } /* วงแหวนทอง — ★ animation-delay: inherit หยิบค่าหน่วงรายใบจากตัวปุ่มมาใช้ต่อ จึงไม่ต้องเขียน :nth-child ซ้ำอีกชุด (animation-delay ไม่ใช่ inherited property โดยธรรมชาติ แต่สั่ง inherit ตรง ๆ ได้) */ .qd-b::before { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 1px solid var(--gold); opacity: 0; pointer-events: none; animation: qdRing 3.4s ease-in-out infinite; animation-delay: inherit; } /* ใบแรกอยู่บนสุด — ไล่ลงทีละใบ (มีถึง 10 เผื่อเพิ่มทางลัดใน $quick) */ .qd-b:nth-child(1) { z-index: 10; } .qd-b:nth-child(2) { z-index: 9; } .qd-b:nth-child(3) { z-index: 8; } .qd-b:nth-child(4) { z-index: 7; } .qd-b:nth-child(5) { z-index: 6; } .qd-b:nth-child(6) { z-index: 5; } .qd-b:nth-child(7) { z-index: 4; } .qd-b:nth-child(8) { z-index: 3; } .qd-b:nth-child(9) { z-index: 2; } .qd-b:nth-child(10) { z-index: 1; } /* หน่วงจังหวะลอย/เรืองแสงไล่กันทีละใบ = คลื่นวิ่งจากซ้ายไปขวา ★ ใส่ที่ animation-delay เท่านั้น จำนวนปุ่มจะเป็นเท่าไรก็ไม่เพี้ยน (ถ้าไปทำโค้งเป็นวงด้วย translateY รายใบ พอ $quick เหลือ 7 ใบเพราะหน้าปิด เส้นโค้งจะเบี้ยวข้างเดียวทันที) ★ ค่าติดลบ = เริ่มกลางคาบตั้งแต่เฟรมแรก ปุ่มจึงไม่ยืนนิ่งรอคิวตอนเปิดหน้า */ .qd-b:nth-child(1) { animation-delay: 0s; } .qd-b:nth-child(2) { animation-delay: -.24s; } .qd-b:nth-child(3) { animation-delay: -.48s; } .qd-b:nth-child(4) { animation-delay: -.72s; } .qd-b:nth-child(5) { animation-delay: -.96s; } .qd-b:nth-child(6) { animation-delay: -1.2s; } .qd-b:nth-child(7) { animation-delay: -1.44s; } .qd-b:nth-child(8) { animation-delay: -1.68s; } .qd-b:nth-child(9) { animation-delay: -1.92s; } .qd-b:nth-child(10) { animation-delay: -2.16s; } /* ชื่อทางลัด — โผล่เหนือปุ่มที่ชี้อยู่ ★ ต้องไม่ใช้ attribute title ของเบราว์เซอร์ (หน่วง ~1 วิ และตั้งค่าไม่ได้) บทเรียนเดียวกับ tooltip ชื่อการ์ดในหน้าตรวจไอเทมของหลังบ้าน */ .qd-tip { position: absolute; left: 50%; bottom: calc(100% + 9px); transform: translate(-50%, 4px); padding: 5px 10px; border-radius: 999px; background: var(--navy); color: #fff; font-size: .68rem; font-weight: 700; line-height: 1.2; white-space: nowrap; box-shadow: 0 8px 18px rgba(16, 44, 86, .3); opacity: 0; pointer-events: none; transition: opacity .16s, transform .16s; } .qd-tip::after { content: ''; position: absolute; left: 50%; top: 100%; width: 8px; height: 8px; margin-left: -4px; background: var(--navy); transform: rotate(45deg) translateY(-3px); } /* ชี้/โฟกัส = ยกขึ้นแล้วขยาย — เปลี่ยนแค่ "ตัวแปรใน keyframe" จังหวะลอยจึงเดินต่อไม่สะดุด */ .qd-b:hover, .qd-b:focus-visible { --qd-lift: -7px; --qd-sc: 1.12; background: linear-gradient(180deg, #ffffff, var(--blue-pale)); border-color: #fff; box-shadow: 0 12px 24px rgba(16, 44, 86, .26), inset 0 1px 0 #fff; z-index: 20; } /* ชี้ใบไหน วงแหวนใบนั้นค้างสว่างไว้ ไม่ต้องรอรอบของมัน */ .qd-b:hover::before, .qd-b:focus-visible::before { animation: none; opacity: 1; transform: scale(1.06); } .qd-b:hover .qd-tip, .qd-b:focus-visible .qd-tip { opacity: 1; transform: translate(-50%, 0); } /* ---- คนที่ตั้งค่าลดการเคลื่อนไหว : หยุดสนิท เหลือแค่ปฏิกิริยาตอนชี้ ---- ★ ถอด animation ออกแล้ว transform จากกฎธรรมดาถึงจะกลับมาทำงาน (ระหว่างที่ keyframe ยังเดินอยู่ มันยึด transform ไว้ กฎธรรมดาสู้ไม่ได้) */ @media (prefers-reduced-motion: reduce) { .qd-b, .qd-b::before { animation: none; } .qd-b::before { opacity: 0; } .qd-b:hover, .qd-b:focus-visible { transform: translateY(-4px); } .qd-b:hover::before, .qd-b:focus-visible::before { opacity: 1; } } .hero-art { justify-self: center; } .hero-art img { width: clamp(260px, 32vw, 470px); filter: drop-shadow(0 26px 46px rgba(16, 44, 86, .22)); } /* ========================================================================== 01b ช่องขวาของ hero — นับถอยหลังเปิดเซิร์ฟ + ปุ่มโซเชียล ========================================================================== .hero-main.has-side ต้องอยู่หลังกฎ body.has-bg (บรรทัด ~292) ที่บังคับคอลัมน์เดียว จึงเขียนกฎเจาะจงกว่าไว้ที่นี่ — หน้าแรกใส่ 'bg' อยู่แล้วจึงติด has-bg เสมอ */ .hero-side { display: flex; flex-direction: column; gap: 12px; min-width: 0; } .cd-card { position: relative; isolation: isolate; overflow: hidden; text-align: center; padding: 22px 20px 20px; border-radius: 24px; background: linear-gradient(150deg, rgba(255, 255, 255, .62) 0%, rgba(232, 244, 255, .44) 55%, rgba(255, 255, 255, .36) 100%); border: 1px solid rgba(255, 255, 255, .72); box-shadow: 0 22px 52px rgba(16, 44, 86, .18), 0 2px 0 rgba(255, 255, 255, .6) inset; backdrop-filter: blur(20px) saturate(1.55); -webkit-backdrop-filter: blur(20px) saturate(1.55); } /* เส้นทองบางบนหัวการ์ด ให้ต่างจากการ์ดกระจกใบอื่นนิดหน่อย */ .cd-card::before { content: ''; position: absolute; z-index: -1; left: 18%; right: 18%; top: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--gold), transparent); } .cd-kicker { display: block; font-size: .68rem; letter-spacing: .22em; font-weight: 700; color: var(--gold-deep); } .cd-title { margin-top: 4px; font-family: var(--font-head); font-size: 1.32rem; color: var(--navy); } .cd-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-top: 14px; } .cd-cell { padding: 10px 2px 8px; border-radius: 14px; background: rgba(255, 255, 255, .5); border: 1px solid rgba(255, 255, 255, .66); } /* ตัวเลขต้องเป็นความกว้างคงที่ ไม่งั้นวินาทีเดินแล้วการ์ดขยับซ้าย-ขวาทุกวินาที */ .cd-v { display: block; font-family: var(--font-head); font-size: clamp(1.5rem, 2.2vw, 2rem); line-height: 1.1; color: var(--navy); font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; } .cd-k { display: block; margin-top: 2px; font-size: .66rem; color: var(--copy); } .cd-note { margin-top: 12px; font-size: .78rem; line-height: 1.65; color: var(--navy-soft); } .cd-cta { margin-top: 14px; width: 100%; justify-content: center; } /* ชุดข้อความ "เปิดแล้ว" — ซ่อนไว้จนกว่า JS จะใส่ is-done ให้ */ .cd-open { display: none; } .cd-open-t { display: block; font-size: 1.05rem; color: var(--ok); } .cd-card.is-done .cd-grid, .cd-card.is-done > .cd-note, .cd-card.is-done > .cd-cta { display: none; } .cd-card.is-done .cd-open { display: block; margin-top: 10px; } /* ---------- ปุ่มโซเชียล ---------- */ .social-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .social-btn { display: flex; align-items: center; gap: 9px; min-width: 0; padding: 10px 12px; border-radius: 16px; text-decoration: none; color: var(--navy); background: linear-gradient(140deg, rgba(255, 255, 255, .6), rgba(232, 244, 255, .4)); border: 1px solid rgba(255, 255, 255, .7); box-shadow: 0 12px 28px rgba(16, 44, 86, .13); backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4); transition: transform .16s ease, box-shadow .16s ease, background .16s ease; } .social-ico { flex: 0 0 auto; color: #1877f2; } .social-tx { min-width: 0; line-height: 1.25; text-align: left; } .social-tx b { display: block; font-size: .8rem; } .social-tx small { display: block; font-size: .66rem; color: var(--copy); } a.social-btn:hover { transform: translateY(-2px); background: linear-gradient(140deg, rgba(255, 255, 255, .78), rgba(232, 244, 255, .56)); box-shadow: 0 16px 34px rgba(16, 44, 86, .18); } /* ยังไม่ได้ตั้งลิงก์ในคอนฟิก — พิมพ์เป็น ไม่ใช่ จึงไม่มีลิงก์ตาย */ .social-btn.is-soon { opacity: .62; cursor: default; } .social-btn.is-soon .social-ico { color: var(--copy); } /* stat strip — กระจกฝ้าเช่นเดียวกับการ์ดหลัก มีมอนสเตอร์วิ่งอยู่ข้างหลัง */ .stat-strip { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: linear-gradient(120deg, rgba(255, 255, 255, .58) 0%, rgba(232, 244, 255, .4) 60%, rgba(255, 255, 255, .34) 100%); border: 1px solid rgba(255, 255, 255, .68); border-radius: var(--radius); box-shadow: 0 18px 44px rgba(16, 44, 86, .16), 0 1px 0 rgba(255, 255, 255, .8) inset; backdrop-filter: blur(18px) saturate(1.5); -webkit-backdrop-filter: blur(18px) saturate(1.5); overflow: hidden; } .stat-cell { position: relative; z-index: 1; /* ตัวหนังสืออยู่หน้ามอนสเตอร์เสมอ */ padding: 20px 24px; border-left: 1px solid rgba(255, 255, 255, .6); } .stat-cell:first-child { border-left: 0; } .stat-strip .v { font-family: var(--font-head); font-size: clamp(1.3rem, 1.9vw, 1.75rem); font-weight: 600; color: var(--navy); line-height: 1; text-shadow: 0 1px 0 rgba(255, 255, 255, .85); } .stat-strip .k { display: block; margin-top: 8px; font-size: .62rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--navy-soft); } /* ---------- มอนสเตอร์วิ่งสุ่มหลังการ์ดสเตตัส ---------- */ .stat-pets { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; } .pet { position: absolute; top: 0; left: 0; display: block; transition: transform 3s linear; /* JS แก้ระยะเวลาให้พอดีระยะทาง */ will-change: transform; } .pet i { display: block; animation: petBob 2.3s ease-in-out infinite; } .pet img { width: 62px; height: auto; opacity: .5; image-rendering: pixelated; filter: drop-shadow(0 6px 8px rgba(16, 44, 86, .18)); transition: transform .25s ease; } @keyframes petBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } } @media (prefers-reduced-motion: reduce) { .pet, .pet i { animation: none; transition: none; } } /* ========================================================================== 02 ข้อมูลเซิร์ฟเวอร์ — จบในจอเดียว (การ์ดกระจก 6 ใบ กดเปิด popup อ่านย่อ) เดิมเป็นแถบเลื่อนยาวหลายจอ ทำให้ต้องหมุนลูกกลิ้งนาน ๆ กว่าจะถึงท้าย ========================================================================== */ .p-server { justify-content: center; } .srv-wrap { display: grid; grid-template-columns: clamp(248px, 21vw, 330px) minmax(0, 1fr); gap: clamp(20px, 2.6vw, 42px); align-items: center; width: 100%; max-width: 1320px; margin: 0 auto; } /* หัวเรื่องวางบนภาพฉากที่ลายเยอะ — รองด้วยแผ่นกระจกบาง ๆ ให้ตัวอักษรอ่านออก */ .srv-head { max-width: none; padding: 20px 22px 22px; border-radius: 20px; background: linear-gradient(150deg, rgba(255, 255, 255, .88) 0%, rgba(232, 244, 255, .78) 100%); border: 1px solid rgba(255, 255, 255, .9); box-shadow: 0 14px 34px rgba(16, 44, 86, .14), inset 0 1px 0 rgba(255, 255, 255, .9); backdrop-filter: blur(18px) saturate(1.5); -webkit-backdrop-filter: blur(18px) saturate(1.5); } .srv-head .sec-sub { color: #244166; font-weight: 500; } .srv-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } .srv-tile { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; gap: 12px; padding: 17px 19px 15px; text-align: left; font-family: var(--font-body); color: var(--navy); background: linear-gradient(150deg, rgba(255, 255, 255, .92) 0%, rgba(238, 246, 255, .86) 58%, rgba(255, 255, 255, .82) 100%); border: 1px solid rgba(255, 255, 255, .90); border-radius: var(--radius-sm); box-shadow: 0 14px 32px rgba(16, 44, 86, .16), 0 1px 0 rgba(255, 255, 255, .95) inset; backdrop-filter: blur(18px) saturate(1.6); -webkit-backdrop-filter: blur(18px) saturate(1.6); cursor: pointer; transition: transform .2s cubic-bezier(.3, 1.3, .5, 1), box-shadow .2s, border-color .2s; } .srv-tile::before { content: ''; position: absolute; z-index: -1; top: -70%; left: -25%; width: 85%; height: 220%; background: linear-gradient(103deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0) 60%); transform: rotate(-14deg); pointer-events: none; } .srv-tile:hover { transform: translateY(-6px); border-color: rgba(255, 255, 255, .98); box-shadow: 0 22px 46px rgba(16, 44, 86, .24), 0 1px 0 rgba(255, 255, 255, .98) inset; } .srv-top { display: flex; align-items: center; gap: 11px; padding-bottom: 11px; border-bottom: 1px solid rgba(16, 44, 86, .14); } .srv-top img { width: 28px; height: 28px; flex-shrink: 0; } .srv-name b { display: block; font-family: var(--font-head); font-size: 1.04rem; font-weight: 700; line-height: 1.2; color: #0a1c38; } .srv-name small { display: block; margin-top: 3px; font-size: .64rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #4d627d; } .srv-facts { display: grid; gap: 6px; } .srv-fact { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding-bottom: 6px; border-bottom: 1px dashed rgba(16, 44, 86, .14); font-size: .84rem; } .srv-fact:last-child { padding-bottom: 0; border-bottom: 0; } .srv-fact .k { color: #244166; font-weight: 500; } .srv-fact .v { font-weight: 700; color: #0f54b0; font-size: .86rem; text-align: right; white-space: nowrap; } .srv-go { margin-top: auto; font-size: .72rem; font-weight: 700; color: var(--gold-deep); transition: color .18s; } .srv-tile:hover .srv-go { color: var(--blue); } /* ========================================================================== NEWS & EVENTS (rail) — ใช้ในหน้าแยกและ popup ========================================================================== */ .rail { display: flex; align-items: center; gap: 22px; width: 100%; } .rail-head { flex: 0 0 clamp(260px, 23vw, 360px); } .news-card { flex: 0 0 clamp(280px, 24vw, 340px); overflow: hidden; display: flex; flex-direction: column; transition: transform .2s, box-shadow .2s; } .news-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lift); } .news-thumb { aspect-ratio: 355 / 200; overflow: hidden; background: var(--blue-pale); border-bottom: 1px solid var(--border); } .news-thumb img { width: 100%; height: 100%; object-fit: cover; } .news-body { padding: 20px 22px 24px; display: flex; flex-direction: column; gap: 9px; flex: 1; } .news-body h3 { font-size: 1.06rem; } .news-body p { font-size: .84rem; color: var(--copy); line-height: 1.7; } .news-body .link-more { margin-top: auto; font-size: .76rem; } /* กิจกรรม — ไทล์เล็ก 2 แถว */ /* ค่าเริ่มต้น = ไหลลงตามปกติ (popup / หน้าแยก / มือถือ) */ .event-grid, .event-grid-flat { display: grid; grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); gap: 12px; } /* ในแถบเลื่อนของหน้าแรก = 2 แถว ไหลไปทางขวา */ .rail .event-grid { flex: 0 0 auto; grid-template-columns: none; grid-template-rows: repeat(2, minmax(0, 1fr)); grid-auto-flow: column; grid-auto-columns: 210px; gap: 14px; align-content: center; } .event-card { display: flex; align-items: center; gap: 12px; padding: 10px 14px 10px 10px; background: linear-gradient(150deg, rgba(255, 255, 255, .7) 0%, rgba(233, 244, 255, .5) 100%); border: 1px solid rgba(255, 255, 255, .76); border-radius: var(--radius-sm); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8); backdrop-filter: blur(12px) saturate(1.45); -webkit-backdrop-filter: blur(12px) saturate(1.45); transition: transform .18s, box-shadow .18s, background-color .18s; } .event-card:hover { transform: translateY(-4px); box-shadow: 0 12px 26px rgba(16, 44, 86, .18), inset 0 1px 0 rgba(255, 255, 255, .9); } .event-card img { width: 64px; height: 40px; object-fit: cover; border-radius: 8px; flex-shrink: 0; } .event-card .n { display: block; font-size: .8rem; font-weight: 600; line-height: 1.25; } .event-card .th { display: block; font-size: .7rem; color: var(--copy); margin-top: 2px; } /* ========================================================================== 03 SERVER INFO (rail หลายบล็อก) ========================================================================== */ /* บล็อกเนื้อหา — ใช้ทั้งในแถบเลื่อน (หน้าแรก), popup และหน้าแยก */ .blk, .rail-block { padding: 26px 28px 28px; display: flex; flex-direction: column; } .rail > .blk, .rail > .rail-block { flex: 0 0 clamp(300px, 26vw, 380px); align-self: center; max-height: 100%; } .rail > .blk-rates, .rail > .blk-refine, .rail > .blk-events { flex-basis: auto; } .rail > .blk-skills { flex-basis: clamp(320px, 28vw, 420px); } .block-head { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; margin-bottom: 18px; border-bottom: 1px solid var(--border); } .block-head img { width: 30px; height: 30px; } .block-head h3 { font-size: 1.02rem; } .block-head small { display: block; font-family: var(--font-body); font-size: .68rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--copy); margin-top: 3px; } /* เรทเซิร์ฟ — ไทล์ 2 แถว */ .rate-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 13px; } .rail .rate-grid { grid-template-columns: none; grid-template-rows: repeat(2, minmax(0, 1fr)); grid-auto-flow: column; grid-auto-columns: 178px; } /* ไทล์ย่อยในการ์ดกระจก — ใช้ฟ้าโปร่ง ไม่ใช่พื้นทึบ ไม่งั้นเป็นแผ่นทึบซ้อนบนกระจก */ .rate-tile { padding: 16px 18px; background: linear-gradient(150deg, rgba(234, 244, 255, .78), rgba(255, 255, 255, .42)); border: 1px solid rgba(255, 255, 255, .8); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8); border-radius: var(--radius-sm); display: flex; flex-direction: column; justify-content: center; } .rate-tile .k { font-size: .58rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--copy); } .rate-tile .v { font-family: var(--font-head); font-size: 1.42rem; font-weight: 600; color: var(--blue); margin-top: 7px; line-height: 1; } .rate-tile .n { font-size: .68rem; color: var(--copy); margin-top: 6px; line-height: 1.4; } /* รายการ bullet */ .info-list { display: flex; flex-direction: column; gap: 11px; } .info-list li { position: relative; padding-left: 20px; font-size: .84rem; color: var(--navy-soft); line-height: 1.65; } .info-list li::before { content: ''; position: absolute; left: 0; top: .55em; width: 7px; height: 7px; border-radius: 2px; background: var(--gold); transform: rotate(45deg); } /* แบบมีเลขลำดับ — ใช้กับขั้นตอนติดตั้งที่ต้องทำเรียงกัน (หน้า download.php) */ .info-list.is-num { counter-reset: mythos-step; } .info-list.is-num li { padding-left: 30px; counter-increment: mythos-step; } .info-list.is-num li::before { content: counter(mythos-step); top: .1em; width: 20px; height: 20px; border-radius: 999px; transform: none; display: flex; align-items: center; justify-content: center; font-size: .68rem; font-weight: 700; color: #3d2c07; } .sub-block + .sub-block { margin-top: 20px; padding-top: 18px; border-top: 1px dashed var(--border); } .sub-block h4 { font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-deep); margin-bottom: 12px; } /* คำโปรยสั้น ๆ เหนือรายการในการ์ด (ระบบใหม่ / กำหนดการเปิด) */ .blk-lead { margin: 0 0 14px; color: var(--copy); line-height: 1.72; } .sub-block .blk-lead { margin-bottom: 12px; } /* สกิล */ .skill-list { display: flex; flex-direction: column; gap: 8px; overflow: hidden; } .skill-job { font-size: .66rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--blue); margin-top: 8px; } .skill-job:first-child { margin-top: 0; } .skill-row { display: flex; align-items: flex-start; gap: 10px; font-size: .8rem; color: var(--navy-soft); line-height: 1.55; } .skill-row img { width: 22px; height: 22px; flex-shrink: 0; image-rendering: -webkit-optimize-contrast; } /* ตารางตีบวก */ .refine-table { border-collapse: collapse; font-size: .76rem; } .refine-table th, .refine-table td { padding: 8px 10px; text-align: center; border-bottom: 1px solid var(--border-soft); white-space: nowrap; } .refine-table thead th { font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; color: var(--copy); border-bottom: 1px solid var(--border); } .refine-table tbody th { text-align: left; font-weight: 600; color: var(--navy); } .refine-table .hi { color: var(--ok); font-weight: 600; } .refine-table .mid { color: var(--gold-deep); font-weight: 600; } .refine-table .lo { color: var(--warn); font-weight: 600; } .refine-table tbody tr:nth-child(odd) td, .refine-table tbody tr:nth-child(odd) th { background: rgba(255, 255, 255, .44); } /* กิลด์วอร์ */ .woe-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; } .woe-fact { padding: 14px 16px; background: linear-gradient(150deg, rgba(234, 244, 255, .78), rgba(255, 255, 255, .42)); border: 1px solid rgba(255, 255, 255, .8); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8); border-radius: var(--radius-sm); } .woe-fact .k { font-size: .6rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--copy); } .woe-fact .v { font-family: var(--font-head); font-size: 1rem; font-weight: 600; color: var(--navy); margin-top: 6px; } .woe-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; } /* ========================================================================== 04 START ========================================================================== */ .dl-block { flex: 0 0 clamp(300px, 26vw, 380px); } .dl-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 0; border-bottom: 1px dashed var(--border-soft); } .dl-row:last-child { border-bottom: 0; padding-bottom: 0; } .dl-row .host { font-size: .86rem; font-weight: 600; } .dl-row .size { font-size: .7rem; color: var(--copy); margin-top: 2px; } .dl-note { font-size: .74rem; color: var(--copy); margin-bottom: 6px; } /* บรรทัดหมายเหตุท้ายการ์ดข้อความ (ใต้ลิสต์ขั้นตอน) ต้องเว้นจากลิสต์ ไม่งั้นติดกันจนอ่านยาก */ .doc-note .dl-note { margin: 16px 0 0; padding-top: 14px; border-top: 1px dashed var(--border-soft); } /* ป้ายบอกว่าเป็นลิงก์ที่เท่าไร — ทุกลิงก์เป็นไฟล์เดียวกัน โหลดอันไหนก็ได้ */ .dl-tag { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; font-size: .62rem; font-weight: 700; letter-spacing: .06em; color: var(--navy); background: rgba(234, 244, 255, .9); border: 1px solid var(--border-soft); vertical-align: middle; } .dl-meta { min-width: 0; } .dl-btn { padding: 9px 18px; white-space: nowrap; } /* ลิงก์ที่ยังไม่เปิด — เห็นว่ามีอยู่ แต่กดไม่ได้ */ .dl-row.is-off { opacity: .62; } .dl-btn.is-soon { cursor: not-allowed; color: var(--copy); background: rgba(255, 255, 255, .5); border-style: dashed; box-shadow: none; } .dl-btn.is-soon:hover { transform: none; background: rgba(255, 255, 255, .5); box-shadow: none; } /* กลุ่มที่ยังไม่เปิดโหลด (Android / iOS) — ทั้งการ์ดจางลง มีป้ายคาดหัว */ .dl-block.is-soon-block { opacity: .82; } .dl-block.is-soon-block .block-head img { filter: grayscale(.35); } .dl-soon-flag { display: inline-block; margin-left: 8px; padding: 2px 10px; border-radius: 999px; font-family: var(--font-body); font-size: .58rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #3d2c07; background: var(--gold); border: 1px solid #d9a63c; vertical-align: middle; white-space: nowrap; } .step-grid { flex: 0 0 auto; display: grid; grid-auto-flow: column; grid-auto-columns: 258px; gap: 16px; align-content: center; } .step-card { padding: 26px 26px 28px; background: linear-gradient(150deg, rgba(255, 255, 255, .74) 0%, rgba(233, 244, 255, .56) 58%, rgba(255, 255, 255, .5) 100%); border: 1px solid rgba(255, 255, 255, .78); border-radius: var(--radius); box-shadow: 0 12px 30px rgba(16, 44, 86, .13), inset 0 1px 0 rgba(255, 255, 255, .85); backdrop-filter: blur(16px) saturate(1.5); -webkit-backdrop-filter: blur(16px) saturate(1.5); transition: transform .18s, box-shadow .18s; } .step-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lift), inset 0 1px 0 rgba(255, 255, 255, .9); } .step-n { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: var(--blue); color: #fff; font-size: .82rem; font-weight: 700; margin-bottom: 16px; } .step-card h3 { font-size: 1.18rem; } .step-card p { margin-top: 9px; font-size: .84rem; color: var(--copy); line-height: 1.7; } .join-block { flex: 0 0 clamp(280px, 24vw, 340px); text-align: left; } .join-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 18px; } .join-foot { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--border); font-size: .72rem; color: var(--copy); line-height: 1.9; } /* ========================================================================== DOCK ========================================================================== */ .dock { position: fixed; bottom: 0; left: 0; right: 0; height: var(--dock-h); z-index: 40; display: flex; align-items: center; gap: 20px; padding: 0 var(--gutter); /* โปร่ง — ไล่จากใสด้านบนลงไปหาขาวบาง ๆ ด้านล่าง เห็นภาพพื้นหลังทะลุ ไม่มีเส้นตัดขวาง */ background: linear-gradient(180deg, rgba(247, 251, 255, 0) 0%, rgba(247, 251, 255, .34) 40%, rgba(247, 251, 255, .78) 100%); backdrop-filter: blur(5px) saturate(1.15); border-top: 0; } .dock-progress { position: absolute; top: -1px; left: 0; height: 2px; width: 0; background: linear-gradient(90deg, var(--blue) 0%, var(--gold) 100%); transition: width .12s linear; } /* กลุ่มควบคุม panel (มีแต่หน้าแรก) — แถบล่างโปร่งแล้ว กลุ่มนี้ต้องมีแคปซูลรองให้อ่านออก */ .dock-panels { flex: 0 0 auto; display: flex; align-items: center; gap: 14px; padding: 5px 8px 5px 14px; background: rgba(255, 255, 255, .74); border: 1px solid var(--border); border-radius: 999px; backdrop-filter: blur(8px); } .dock-label { font-size: .7rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--copy); min-width: 112px; display: flex; align-items: baseline; gap: 9px; } .dock-label b { color: var(--navy); } .dock-label .n { color: var(--blue); font-variant-numeric: tabular-nums; } .dots { display: flex; gap: 8px; } .dot { width: 10px; height: 10px; border-radius: 50%; border: 1px solid #bfd2e6; background: transparent; padding: 0; cursor: pointer; transition: width .18s, background-color .18s, border-color .18s; } .dot:hover { background: #bfd2e6; } .dot.is-active { width: 30px; border-radius: 999px; background: var(--blue); border-color: var(--blue); } .dock-arrows { display: flex; gap: 8px; } .arrow { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .82); background: linear-gradient(180deg, rgba(255, 255, 255, .8), rgba(228, 241, 255, .58)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9); backdrop-filter: blur(10px) saturate(1.4); -webkit-backdrop-filter: blur(10px) saturate(1.4); cursor: pointer; color: var(--navy-soft); transition: background-color .16s, color .16s; } .arrow:hover { background: var(--blue); color: #fff; border-color: var(--blue); } .arrow:disabled { opacity: .34; cursor: default; } .arrow:disabled:hover { background: linear-gradient(180deg, rgba(255, 255, 255, .8), rgba(228, 241, 255, .58)); color: var(--navy-soft); } .arrow svg { width: 15px; height: 15px; } .scroll-hint { position: fixed; right: var(--gutter); bottom: calc(var(--dock-h) + 24px); z-index: 35; display: flex; align-items: center; gap: 10px; font-size: .68rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--copy); pointer-events: none; transition: opacity .3s; } .scroll-hint.is-hidden { opacity: 0; } .scroll-hint .track-line { width: 56px; height: 1px; background: linear-gradient(90deg, transparent, var(--blue)); position: relative; overflow: hidden; } .scroll-hint .track-line::after { content: ''; position: absolute; top: -2px; left: 0; width: 15px; height: 5px; border-radius: 3px; background: var(--blue); animation: railRun 1.7s ease-in-out infinite; } @keyframes railRun { 0% { transform: translateX(-17px); opacity: 0; } 35% { opacity: 1; } 100% { transform: translateX(58px); opacity: 0; } } /* ========================================================================== SIDE MENU — จอกว้าง = การ์ดลอยค้างไว้ / จอแคบ = ลิ้นชัก ========================================================================== */ .side-scrim { position: fixed; inset: 0; z-index: 55; background: rgba(9, 26, 50, .5); backdrop-filter: blur(3px); } .side-scrim[hidden] { display: none; } .side-menu { position: fixed; z-index: 60; top: 0; left: 0; width: min(282px, 84vw); height: 100%; padding: 12px; /* ลิ้นชักก็เป็นกระจกฝ้าเหมือนการ์ดอื่น ไม่ใช่แผ่นขาวทึบ */ background: linear-gradient(160deg, rgba(255, 255, 255, .58), rgba(226, 240, 255, .44)); backdrop-filter: blur(18px) saturate(1.5); -webkit-backdrop-filter: blur(18px) saturate(1.5); border-right: 1px solid rgba(255, 255, 255, .6); box-shadow: 26px 0 60px rgba(9, 26, 50, .16); overflow-y: auto; -webkit-overflow-scrolling: touch; transform: translateX(-104%); transition: transform .26s cubic-bezier(.3, .7, .3, 1); } .side-menu.is-open { transform: none; } .side-in { min-height: 100%; display: flex; flex-direction: column; padding: 16px 14px 18px; border: 1px solid rgba(255, 255, 255, .72); border-radius: 18px; /* กระจกฝ้าชุดเดียวกับ .hero-card / .srv-tile */ background: linear-gradient(150deg, rgba(255, 255, 255, .66) 0%, rgba(232, 244, 255, .46) 54%, rgba(255, 255, 255, .4) 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .75); backdrop-filter: blur(20px) saturate(1.55); -webkit-backdrop-filter: blur(20px) saturate(1.55); } .side-logo { display: block; margin: 0 auto 12px; } /* ★ 112 ไม่ใช่ 132 ของเดิม — โลโก้ใบใหม่สูงกว่าใบเก่าเมื่อกว้างเท่ากัน (1.58:1 เทียบ 2.07:1) คงความกว้าง 132 ไว้ = การ์ดเมนูสูงขึ้น ~20px ซึ่งงบความสูงของการ์ดไม่มีให้ (ดูกฎ body:not(.doc) .side-logo img ในบล็อกจอ >= 1280 ด้วย — ต้องลดคู่กันเสมอ) */ .side-logo img { width: 112px; height: auto; } .side-ep { display: block; text-align: center; font-size: .6rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-deep); padding-bottom: 14px; border-bottom: 1px solid var(--border); } .side-list { display: flex; flex-direction: column; gap: 2px; padding: 12px 0; } .side-list a { padding: 9px 14px; border-radius: 12px; font-size: .82rem; font-weight: 500; color: var(--navy-soft); transition: background-color .16s, color .16s; } .side-list a:hover { background: var(--blue-pale); color: var(--navy); } .side-list a.is-active { background: var(--blue); color: #fff; font-weight: 600; } .side-foot { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--border); display: grid; gap: 8px; } .side-foot .btn { justify-content: center; } /* ปุ่มออกจากระบบ — โทนอ่อน ไม่แย่งสายตาปุ่มหลัก */ .side-logout { font-size: .78rem; color: var(--copy); background: transparent; border: 1px solid var(--border); } .side-logout:hover { color: #b4322f; border-color: rgba(180, 50, 47, .35); background: rgba(180, 50, 47, .06); } /* ========================================================================== ปุ่มลัดบนหน้าแรก (เปิด popup) — ★ ชุดเก่า ไม่มีหน้าไหนใช้แล้ว (14 ส.ค. 2569) ========================================================================== การ์ด hero ชุดโปรโมชัน CBT เปลี่ยนไปใช้ .qdial (กระจุกไอคอนแล้วกางออก) แทน เก็บกฎชุดนี้ไว้เผื่อสลับกลับ — มาร์กอัปเดิมอยู่ในประวัติของ home.php ★ อย่าเขียนกฎใหม่ทับที่นี่ ให้ไปแก้ที่ .qdial แทน -------------------------------------------------------------------------- */ .quick-row { margin-top: 22px; padding-top: 20px; border-top: 1px dashed var(--border); display: flex; flex-wrap: wrap; gap: 8px; } .quick-chip { display: inline-flex; align-items: center; gap: 8px; padding: 7px 15px 7px 9px; font-family: var(--font-body); font-size: .76rem; font-weight: 600; color: var(--navy); background: linear-gradient(180deg, rgba(255, 255, 255, .72), rgba(226, 240, 255, .5)); border: 1px solid rgba(255, 255, 255, .8); border-radius: 999px; box-shadow: 0 2px 8px rgba(16, 44, 86, .08), inset 0 1px 0 rgba(255, 255, 255, .9); backdrop-filter: blur(8px) saturate(1.4); -webkit-backdrop-filter: blur(8px) saturate(1.4); cursor: pointer; white-space: nowrap; transition: transform .16s, box-shadow .16s, background-color .16s; } .quick-chip img { width: 22px; height: 22px; } .quick-chip:hover { background: linear-gradient(180deg, #ffffff, var(--blue-pale)); transform: translateY(-2px); box-shadow: 0 10px 22px rgba(16, 44, 86, .18), inset 0 1px 0 #fff; } /* ========================================================================== PILL NAV (แถบเมนูล่างแบบเว็บอ้างอิง) ========================================================================== */ /* แถบล่างมีทุกหน้า — กระจายเต็มความกว้างของแถบ ปุ่มละ 1 ส่วนเท่ากัน */ .pillnav { flex: 1 1 auto; min-width: 0; display: flex; align-items: stretch; gap: 4px; padding: 5px; background: linear-gradient(105deg, var(--navy) 0%, #17396c 52%, var(--navy) 100%); border-radius: 999px; box-shadow: 0 10px 26px rgba(16, 44, 86, .28); overflow-x: auto; scrollbar-width: none; } .pillnav::-webkit-scrollbar { display: none; } .pill { position: relative; flex: 1 1 0; min-width: 0; padding: 8px 14px; display: flex; align-items: center; justify-content: center; gap: 9px; font-family: var(--font-body); font-size: .74rem; font-weight: 600; color: rgba(255, 255, 255, .76); background: transparent; border: 0; border-radius: 999px; cursor: pointer; white-space: nowrap; overflow: hidden; transition: background-color .2s, color .2s, transform .2s; } .pillnav a.pill { display: flex; } /* ไอคอน SVG เส้น navy — บนแถบสีเข้มต้องกลับเป็นขาว */ .pill img { width: 21px; height: 21px; flex-shrink: 0; filter: brightness(0) invert(1); opacity: .82; transition: transform .24s cubic-bezier(.3, 1.5, .5, 1), opacity .2s, filter .2s; } .pill-s { display: none; } /* เส้นทองใต้ปุ่ม วิ่งออกจากกลางตอน hover */ .pill::after { content: ''; position: absolute; left: 50%; bottom: 5px; width: 0; height: 2px; border-radius: 2px; background: var(--gold); transform: translateX(-50%); transition: width .22s ease; } .pill:hover { background: rgba(255, 255, 255, .13); color: #fff; transform: translateY(-2px); } .pill:hover img { transform: translateY(-1px) scale(1.14) rotate(-4deg); opacity: 1; } .pill:hover::after { width: 46%; } .pill.is-active { background: linear-gradient(160deg, #f6d489 0%, var(--gold) 100%); color: #3d2c07; box-shadow: 0 6px 18px rgba(234, 184, 79, .45); } .pill.is-active img { filter: none; opacity: 1; } .pill.is-active::after { width: 0; } .pill.is-active:hover { transform: translateY(-2px); } /* จุดกระพริบเบา ๆ บอกว่าอยู่หน้านี้ */ .pill.is-active::before { content: ''; position: absolute; inset: 0; border-radius: 999px; box-shadow: 0 0 0 0 rgba(234, 184, 79, .5); animation: pillPulse 2.6s ease-out infinite; } @keyframes pillPulse { 0% { box-shadow: 0 0 0 0 rgba(234, 184, 79, .5); } 70% { box-shadow: 0 0 0 10px rgba(234, 184, 79, 0); } 100% { box-shadow: 0 0 0 0 rgba(234, 184, 79, 0); } } .pill-link { color: rgba(255, 255, 255, .55); } /* ========================================================================== ข่าวย่อใน popup (หน้าแรกไม่ต้องแบกการ์ดข่าวทั้งชุด) ========================================================================== */ .news-brief { display: grid; gap: 10px; } .news-brief a { display: flex; align-items: center; gap: 12px; padding: 9px 12px 9px 9px; border: 1px solid rgba(255, 255, 255, .78); border-radius: 14px; background: linear-gradient(150deg, rgba(255, 255, 255, .68), rgba(233, 244, 255, .44)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8); transition: border-color .16s, box-shadow .16s; } .news-brief a:hover { border-color: var(--border); box-shadow: var(--shadow); } .news-brief img { width: 78px; height: 44px; flex-shrink: 0; object-fit: cover; border-radius: 9px; } .news-brief .t { display: block; font-size: .85rem; font-weight: 600; color: var(--navy); } .news-brief .d { display: block; margin-top: 3px; font-size: .73rem; line-height: 1.55; color: var(--copy); } /* ========================================================================== POPUP ========================================================================== */ /* เว้นที่ให้แถบบน + แถบล่างเสมอ — popup จึงไม่มีทางล้นไปทับ (เดิมสูงเต็มจอ) */ .popup-scrim { position: fixed; inset: 0; z-index: 120; display: flex; align-items: center; justify-content: center; padding: calc(var(--bar-h) + 14px) var(--gutter) calc(var(--dock-h) + 14px); background: rgba(9, 26, 50, .55); backdrop-filter: blur(4px); } .popup-scrim[hidden] { display: none; } /* กว้างขึ้น = เนื้อหาเรียงเป็นคอลัมน์แนวนอนได้ กล่องจึงเตี้ยลงมาก กระจกฝ้าเช่นกัน แต่ทึบกว่าการ์ดอื่น เพราะข้างหลังเป็นม่านมืด ต้องอ่านออกชัด */ .popup-box { width: min(1180px, 100%); max-height: 100%; display: flex; flex-direction: column; background: linear-gradient(160deg, rgba(255, 255, 255, .9) 0%, rgba(234, 244, 255, .82) 58%, rgba(255, 255, 255, .86) 100%); border: 1px solid rgba(255, 255, 255, .85); border-radius: 22px; box-shadow: 0 30px 70px rgba(9, 26, 50, .34), inset 0 1px 0 rgba(255, 255, 255, .9); backdrop-filter: blur(26px) saturate(1.6); -webkit-backdrop-filter: blur(26px) saturate(1.6); overflow: hidden; animation: popIn .22s cubic-bezier(.22, .61, .36, 1); } @keyframes popIn { from { opacity: 0; transform: translateY(16px) scale(.985); } to { opacity: 1; transform: none; } } .popup-bar { display: flex; align-items: center; gap: 14px; padding: 17px 20px; background: linear-gradient(180deg, rgba(234, 244, 255, .82), rgba(234, 244, 255, .42)); border-bottom: 1px solid rgba(255, 255, 255, .8); } .popup-title { flex: 1; font-size: 1.1rem; } .popup-x { width: 34px; height: 34px; flex-shrink: 0; border: 1px solid rgba(255, 255, 255, .85); border-radius: 50%; background: linear-gradient(180deg, rgba(255, 255, 255, .85), rgba(228, 241, 255, .6)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9); font-size: 1.35rem; line-height: 1; color: var(--navy-soft); cursor: pointer; } .popup-x:hover { background: var(--navy); color: #fff; border-color: var(--navy); } /** * เนื้อหาใน popup จัดเป็นคอลัมน์อัตโนมัติตามความกว้าง * บล็อกหลายก้อน (เช่น "สมดุลเซิร์ฟเวอร์" 3 ก้อน) วางเรียงข้างกัน * ก้อนเดียวที่มีรายการยาว (สกิล / ปาร์ตี้ / กิลด์วอร์) แตกคอลัมน์ข้างในตัวเอง */ .popup-body { padding: 20px; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; align-content: start; } .popup-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 20px; background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .5)); border-top: 1px solid rgba(255, 255, 255, .75); } /* บล็อกใน popup ไม่ต้องมีกรอบซ้อนกรอบ (กล่อง popup เป็นกระจกอยู่แล้ว — ปิด blur ซ้อน) */ .popup-body .blk { padding: 0; background: transparent; border: 0; border-radius: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; max-height: none; min-width: 0; } /* หลายก้อน = ทำเป็นการ์ดเล็กแยกกัน (เดิมต่อกันลงล่างด้วยเส้นคั่น -> ยาวมาก) */ .popup-body > .blk:not(:only-child) { padding: 15px 17px 17px; background: linear-gradient(150deg, rgba(255, 255, 255, .6), rgba(255, 255, 255, .28)); border: 1px solid rgba(255, 255, 255, .8); border-radius: 14px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8); } /** * ก้อนเดียว = กินเต็มความกว้าง แล้วให้ลูก ๆ ข้างในกระจายเป็นคอลัมน์เอง * (หัวบล็อก / ตาราง / รายการเรทต้องกินเต็มแถว ห้ามถูกหั่น) */ .popup-body > .blk:only-child { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px 26px; align-content: start; } .popup-body > .blk:only-child > .block-head, .popup-body > .blk:only-child > .skill-list, .popup-body > .blk:only-child > .table-scroll, .popup-body > .blk:only-child > .rate-grid, .popup-body > .blk:only-child > .info-list, .popup-body > .blk:only-child > .woe-facts, .popup-body > .blk:only-child > .dl-grid { grid-column: 1 / -1; } /** * รายการยาว ๆ ไหลลงคอลัมน์ถัดไปแทนที่จะยืดกล่องให้สูง * ต้องเปลี่ยนเป็น display:block ก่อน — multi-column ไม่ทำงานกับ flex container * (ปกติสองคลาสนี้เป็น flex column ระยะห่างมาจาก gap จึงต้องคืนเป็น margin) */ .popup-body .info-list, .popup-body .skill-list { display: block; columns: 300px; column-gap: 30px; } .popup-body .info-list > li { margin-bottom: 11px; } .popup-body .skill-row { margin-bottom: 8px; } .popup-body .skill-job { margin-top: 12px; } .popup-body .skill-job:first-child { margin-top: 0; } .popup-body .info-list > li, .popup-body .skill-row { break-inside: avoid; -webkit-column-break-inside: avoid; } .popup-body .skill-job { break-after: avoid; -webkit-column-break-after: avoid; } /* sub-block เรียงข้างกันแล้ว ไม่ต้องมีเส้นคั่นแนวนอนของเดิม */ .popup-body > .blk:only-child > .sub-block + .sub-block { margin-top: 0; padding-top: 0; border-top: 0; } /* ตารางตีบวกกว้าง — คอลัมน์เดียวเต็มแถว เลื่อนข้างในตัวเอง */ .popup-body .table-scroll { overflow-x: auto; } /* ========================================================================== โหมดหน้าแยก (doc) ========================================================================== */ .doc .bg-layer { width: 100%; } body.doc > .doc-hero, body.doc > .doc-wrap, body.doc > .doc-foot { position: relative; z-index: 10; } .doc-wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 var(--gutter); } /* ระยะห่างท้ายหน้าเคยมาจาก .doc-cta (padding-bottom 46px) ซึ่งถอดออกทุกหน้าแล้ว (ปุ่มชุดนั้นซ้ำกับแถบเมนูบน / แถบล่าง / ลิงก์ท้ายหน้า) ★ ต้องกัน .doc-foot-in ออก — ฟุตเตอร์ใช้คลาส .doc-wrap ร่วมด้วย ถ้าไม่กัน จะได้ช่องว่างเปล่า 46px ใต้ตัวหนังสือฟุตเตอร์ */ .doc-wrap:not(.doc-foot-in) { padding-bottom: 46px; } .doc-hero { padding: calc(var(--bar-h) + 46px) 0 28px; } .doc-title { font-family: var(--font-head); font-size: clamp(1.9rem, 4vw, 3rem); font-weight: 600; line-height: 1.12; } .doc-hero .sec-sub { max-width: 62ch; } .doc-toc { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; } /* หัวแผงมีเฉพาะโหมดแผงข้าง — โหมดแถบนอนซ่อนไว้ (กฎโชว์อยู่ในบล็อก @media 1180px) */ .doc-toc .toc-head { display: none; } .doc-toc a { padding: 8px 15px; font-size: .76rem; font-weight: 600; color: var(--navy-soft); background: linear-gradient(180deg, rgba(255, 255, 255, .74), rgba(228, 241, 255, .54)); border: 1px solid rgba(255, 255, 255, .8); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85); backdrop-filter: blur(10px) saturate(1.4); -webkit-backdrop-filter: blur(10px) saturate(1.4); border-radius: 999px; } .doc-toc a:hover { background: var(--blue); color: #fff; border-color: var(--blue); } .doc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 20px; align-items: start; padding-bottom: 30px; } .doc-grid .blk-rates, .doc-grid .blk-refine, .doc-grid .blk-events { grid-column: 1 / -1; } /* ตารางการ์ดหน้าดาวน์โหลด — การ์ด FULL SETUP สูงกว่าเพื่อนเพราะมี 4 ลิงก์ ปล่อยไว้เฉย ๆ จะเกิดช่องว่างใต้การ์ด Android / iOS แล้วการ์ดที่เหลือตกไปแถวล่าง ให้การ์ดใบแรกกินสองแถว การ์ดที่เหลือจึงไหลขึ้นมาเติมช่องว่างนั้นพอดี ★ ใช้เฉพาะจอที่กว้างพอมีตั้งแต่ 2 คอลัมน์ขึ้นไป จอแคบเรียงลงมาตามปกติ */ @media (min-width: 761px) { .doc-grid.is-dl > .dl-block:first-child { grid-row: span 2; } } /* จอ 3 คอลัมน์ — ตรึงเป็น 3 ช่องเป๊ะ ไม่งั้น auto-fill อาจได้ 4 ช่องแล้วเหลือช่องโหว่ใหม่ */ @media (min-width: 1180px) { .doc-grid.is-dl { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* การ์ดที่ไปต่อแถวสองให้สูงเท่ากัน จะได้ปิดท้ายตารางเป็นเส้นตรงเดียว */ @media (min-width: 761px) { .doc-grid.is-dl > .dl-block:not(:first-child), .doc-grid.is-dl > .join-block { align-self: stretch; } } .doc-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin-bottom: 24px; } .news-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(276px, 1fr)); gap: 20px; padding-bottom: 26px; } .doc-note { padding: 24px 26px 26px; margin-bottom: 26px; } .doc-note h3 { font-size: 1.08rem; margin-bottom: 14px; } .doc-foot { margin-top: 10px; padding: 26px 0 22px; background: linear-gradient(180deg, rgba(255, 255, 255, .38) 0%, rgba(255, 255, 255, .72) 100%); border-top: 1px solid rgba(255, 255, 255, .8); backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4); } .doc-foot-in { display: flex; flex-wrap: wrap; gap: 20px 40px; justify-content: space-between; font-size: .78rem; color: var(--copy); line-height: 1.85; } .doc-foot-links { display: flex; flex-wrap: wrap; gap: 14px; } .doc-foot-links a { font-weight: 600; color: var(--blue); } .doc-foot-links a:hover { text-decoration: underline; } /* ตารางกว้างเกินจอ — เลื่อนในกล่องตัวเอง (สำคัญบนมือถือ) */ .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; } /* ========================================================================== REVEAL ========================================================================== */ .reveal > * { opacity: 0; transform: translateX(26px); transition: opacity .6s cubic-bezier(.22, .61, .36, 1), transform .6s cubic-bezier(.22, .61, .36, 1); } .panel.is-visible .reveal > * { opacity: 1; transform: none; } .panel.is-visible .reveal > *:nth-child(2) { transition-delay: .06s; } .panel.is-visible .reveal > *:nth-child(3) { transition-delay: .12s; } .panel.is-visible .reveal > *:nth-child(4) { transition-delay: .18s; } .panel.is-visible .reveal > *:nth-child(5) { transition-delay: .24s; } .panel.is-visible .reveal > *:nth-child(6) { transition-delay: .3s; } @media (prefers-reduced-motion: reduce) { .reveal > * { opacity: 1; transform: none; transition: none; } .scroll-hint .track-line::after { animation: none; } } /* ========================================================================== MOTION — แถบบน + เมนูซ้าย (เข้าหน้า / เปิด-ปิดลิ้นชัก / ขยับเบา ๆ ตอนอยู่นิ่ง) ========================================================================== */ /** * ---------- แถบบน ---------- * ไล่เข้าด้วย transition + คลาส .is-boot (JS ถอดออกเฟรมถัดไป) เหมือนเมนูซ้าย * เหตุผลเดียวกัน: ถ้าอะไรพลาด แถบบนต้อง "เห็นปกติ" ไม่ใช่หายไป */ .bar { transition: transform .5s cubic-bezier(.2, .8, .3, 1), opacity .5s ease, background-color .3s, box-shadow .3s, border-color .3s; } body.is-boot .bar { transform: translateY(-100%); opacity: 0; transition: none; } .bar-logo, .bar-nav a, .bar-cta .btn, .bar-status .pill-status { transition: opacity .42s ease, transform .42s cubic-bezier(.2, .8, .3, 1), color .18s, background-color .18s, box-shadow .2s; } body.is-boot .burger, body.is-boot .bar-logo, body.is-boot .bar-nav a, body.is-boot .bar-cta .btn, body.is-boot .bar-status .pill-status { opacity: 0; transform: translateY(-9px); transition: none; } /* ไล่เข้าทีละชิ้นจากซ้ายไปขวา — delay อยู่บน .is-entering ที่ JS ถอดออกหลังเข้าเสร็จ (ถ้าใส่ไว้ถาวร hover/เลิก hover จะหน่วงตาม) */ body.is-entering .burger { transition-delay: .1s; } body.is-entering .bar-logo { transition-delay: .14s; } body.is-entering .bar-nav a:nth-child(1) { transition-delay: .2s; } body.is-entering .bar-nav a:nth-child(2) { transition-delay: .25s; } body.is-entering .bar-nav a:nth-child(3) { transition-delay: .3s; } body.is-entering .bar-nav a:nth-child(4) { transition-delay: .35s; } body.is-entering .bar-cta .btn:nth-child(1) { transition-delay: .4s; } body.is-entering .bar-cta .btn:nth-child(2) { transition-delay: .45s; } body.is-entering .bar-status .pill-status:nth-child(1) { transition-delay: .5s; } body.is-entering .bar-status .pill-status:nth-child(2) { transition-delay: .55s; } /* เลื่อนหน้าไปแล้ว = พื้นแถบบนเข้มขึ้นนิดเดียว (ยังเป็นกระจกไล่จาง ไม่กลับไปเป็นแผ่นขาวทึบ) */ body.is-scrolled .bar { background: transparent; } body.is-scrolled .bar::before { opacity: 1; filter: saturate(1.05) brightness(1.02); } body.is-scrolled .bar::after { opacity: .8; } /* โลโก้ขยับตอนชี้ */ .bar-logo img { transition: transform .3s cubic-bezier(.3, 1.4, .5, 1); } .bar-logo:hover img { transform: scale(1.06) rotate(-1.5deg); } /* เมนูบน: ขีดทองวิ่งออกจากกลาง + ตัวหนังสือนูนขึ้นมาตอนชี้ */ .bar-nav a { position: relative; transition: color .18s, background-color .18s, text-shadow .2s, box-shadow .2s, transform .22s cubic-bezier(.3, 1.5, .5, 1); } .bar-nav a::after { content: ''; position: absolute; left: 50%; bottom: 3px; width: 0; height: 2px; border-radius: 2px; background: var(--gold); transform: translateX(-50%); transition: width .24s ease; } .bar-nav a:hover { transform: translateY(-4px) scale(1.09); } .bar-nav a:active { transform: translateY(-1px) scale(1.03); } .bar-nav a:hover::after { width: 52%; } .bar-nav a.is-active::after { width: 32%; } .burger { transition: opacity .42s ease, transform .28s cubic-bezier(.3, 1.3, .5, 1), box-shadow .2s, background-color .2s; } .burger:hover { transform: scale(1.06); box-shadow: var(--shadow); } .burger.is-on { background: var(--blue-pale); } /* ไฟสถานะเซิร์ฟเวอร์หายใจ */ @keyframes dotBreathe { 0%, 100% { box-shadow: 0 0 0 3px rgba(31, 191, 122, .18); } 50% { box-shadow: 0 0 0 6px rgba(31, 191, 122, .05); } } .pill-status i { animation: dotBreathe 2.4s ease-in-out infinite; } /* ---------- เมนูซ้าย ---------- */ @keyframes logoBreathe { 0%, 100% { transform: scale(1); filter: drop-shadow(0 4px 10px rgba(16, 44, 86, .12)); } 50% { transform: scale(1.035); filter: drop-shadow(0 8px 18px rgba(25, 107, 212, .22)); } } /* ลิ้นชักเลื่อนเข้านุ่มขึ้น + ปิดเร็วกว่าเปิดเล็กน้อย */ .side-menu { transition: transform .3s cubic-bezier(.16, .84, .24, 1); } .side-menu.is-open { transition-duration: .38s; } .side-scrim { animation: scrimIn .28s ease both; } @keyframes scrimIn { from { opacity: 0; } to { opacity: 1; } } /** * รายการในเมนูไล่เข้าทีละอัน — ใช้ transition ไม่ใช้ animation โดยตั้งใจ * JS ใส่ .is-opening (ซ่อน) แล้วถอดออกเฟรมถัดไป (เผยทีละอันตาม transition-delay) * ถ้า JS หรือ transition ไม่ทำงาน เมนูจะ "เห็นครบตามปกติ" ไม่ใช่หายไปทั้งแผง */ .side-in { transition: opacity .5s ease, transform .5s cubic-bezier(.2, .8, .3, 1), box-shadow .25s; } .side-logo, .side-ep, .side-foot { transition: opacity .34s ease, transform .34s cubic-bezier(.2, .8, .3, 1); } .side-menu.is-opening .side-in { opacity: 0; transform: translateX(-26px) scale(.98); transition: none; } .side-menu.is-opening .side-logo, .side-menu.is-opening .side-ep, .side-menu.is-opening .side-list a, .side-menu.is-opening .side-foot { opacity: 0; transform: translateX(-16px); transition: none; } .side-menu.is-entering .side-ep { transition-delay: .06s; } .side-menu.is-entering .side-foot { transition-delay: .44s; } .side-menu.is-entering .side-list a:nth-child(1) { transition-delay: .1s; } .side-menu.is-entering .side-list a:nth-child(2) { transition-delay: .13s; } .side-menu.is-entering .side-list a:nth-child(3) { transition-delay: .16s; } .side-menu.is-entering .side-list a:nth-child(4) { transition-delay: .19s; } .side-menu.is-entering .side-list a:nth-child(5) { transition-delay: .22s; } .side-menu.is-entering .side-list a:nth-child(6) { transition-delay: .25s; } .side-menu.is-entering .side-list a:nth-child(7) { transition-delay: .28s; } .side-menu.is-entering .side-list a:nth-child(8) { transition-delay: .31s; } .side-menu.is-entering .side-list a:nth-child(9) { transition-delay: .34s; } .side-menu.is-entering .side-list a:nth-child(10) { transition-delay: .37s; } .side-menu.is-entering .side-list a:nth-child(11) { transition-delay: .4s; } /* รายการเมนู: แถบทองงอกจากซ้าย + ไถลไปขวาตอนชี้ */ .side-list a { position: relative; overflow: hidden; transition: opacity .34s ease, transform .34s cubic-bezier(.2, .8, .3, 1), background-color .18s, color .18s, padding-left .2s; } /* ชี้ค้างไว้ตอนกำลังไล่เข้า = ขยับทันที ไม่ต้องรอคิว */ .side-menu.is-entering .side-list a:hover, .side-menu.is-entering .side-list a:focus-visible { transition-delay: 0s; } .side-list a::before { content: ''; position: absolute; left: 0; top: 50%; width: 3px; height: 0; border-radius: 3px; background: var(--gold); transform: translateY(-50%); transition: height .22s ease; } .side-list a:hover { transform: translateX(3px); padding-left: 18px; } .side-list a:hover::before { height: 56%; } /* รายการที่กำลังเปิด: ไล่เฉดน้ำเงิน + แสงกวาดผ่านช้า ๆ */ .side-list a.is-active { background: linear-gradient(100deg, var(--blue) 0%, #2f80e8 100%); box-shadow: 0 8px 18px rgba(25, 107, 212, .28); } .side-list a.is-active::after { content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .32), transparent); animation: sideShine 4.2s ease-in-out infinite; } @keyframes sideShine { 0% { left: -60%; } 45%, 100% { left: 130%; } } .side-list a.is-active::before { height: 0; } .side-list a.is-active:hover { transform: translateX(3px); } /* ป้าย EP มีประกายทองวิ่ง */ .side-ep { background: linear-gradient(100deg, var(--gold-deep) 0%, #e7c56f 45%, var(--gold-deep) 90%); background-size: 260% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: epShine 5.5s linear infinite; } @keyframes epShine { from { background-position: 130% 0; } to { background-position: -130% 0; } } /* ---------- การ์ดเมนูค้างไว้บนหน้าแรก (จอกว้าง) ---------- */ /** * ลอยขึ้น-ลงทั้งใบ — ต้องใส่ที่ .side-menu (กล่องนอก) ไม่ใช่ .side-in * เดิมใส่ที่ .side-in : การ์ดข้างในสูงเท่ากล่องนอกพอดี พอเลื่อนขึ้นจึงถูกกล่องนอกตัดหัว * แล้วเปิดช่องโหว่ที่ท้ายการ์ด -> เห็นเป็น "ขยับไม่ทั้งใบ" และกระตุก * กล่องนอกตรึงกลางจอด้วย translateY(-50%) จึงต้องใช้ค่านั้นเป็นฐานของ keyframe */ @keyframes sideFloatFixed { 0%, 100% { transform: translate3d(0, -50%, 0); } 50% { transform: translate3d(0, calc(-50% - 11px), 0); } } @media (min-width: 1280px) { body:not(.doc) .side-menu { transition: none; /* transition ของลิ้นชักตีกับ animation นี้ */ animation: sideFloatFixed 6.4s cubic-bezier(.45, 0, .55, 1) 1.2s infinite; will-change: transform; } body:not(.doc) .side-logo img { animation: logoBreathe 6s ease-in-out 1.4s infinite; } /* ชี้ที่การ์ด = หยุดลอย ยกเงาขึ้น */ body:not(.doc) .side-menu:hover { animation-play-state: paused; } body:not(.doc) .side-in:hover { box-shadow: var(--shadow-lift); } } /* ---------- ออกจากหน้า (กดลิงก์) = แถบบนหุบขึ้น เมนูซ้ายถอยออกซ้าย ---------- */ body.is-leaving .bar { transform: translateY(-100%); opacity: 0; transition: transform .22s ease, opacity .22s ease; animation: none; } /* ขยับแค่การ์ดข้างใน — .side-menu ใช้ transform ของลิ้นชักอยู่ ห้ามแตะ */ body.is-leaving .side-in { transform: translateX(-24px); opacity: 0; transition: transform .22s ease, opacity .22s ease; animation: none; } body.is-leaving .dock { transform: translateY(100%); opacity: 0; transition: transform .22s ease, opacity .22s ease; animation: none; } /* เครื่องที่ตั้งลดการเคลื่อนไหว = ตัดทั้งหมด (ต้องอยู่ท้ายบล็อก MOTION จึงจะทับได้) */ @media (prefers-reduced-motion: reduce) { .bar, .burger, .bar-logo, .bar-nav a, .bar-cta .btn, .bar-status .pill-status, .pill-status i, .side-scrim, .side-logo img, .side-logo, .side-in, .side-ep, .side-list a, .side-foot, body:not(.doc) .side-menu, body:not(.doc) .side-in, body:not(.doc) .side-logo img, body.is-boot .bar, body.is-boot .burger, body.is-boot .bar-logo, body.is-boot .bar-nav a, body.is-boot .bar-cta .btn, body.is-boot .bar-status .pill-status, .side-menu.is-opening .side-in, .side-menu.is-opening .side-logo, .side-menu.is-opening .side-ep, .side-menu.is-opening .side-list a, .side-menu.is-opening .side-foot, .side-list a.is-active::after { animation: none; opacity: 1; transform: none; transition: none; transition-delay: 0s; } .side-ep { background: none; -webkit-text-fill-color: currentColor; } } /* ========================================================================== RESPONSIVE ========================================================================== */ /* ---------- จอกว้าง: เมนูซ้ายค้างไว้เป็นการ์ดลอย (เฉพาะหน้าแรก) ---------- */ @media (min-width: 1280px) { body:not(.doc) { --side-w: 264px; } /* โลโก้อยู่ในเมนูซ้ายแล้ว ไม่ต้องซ้ำบนแถบบน */ body:not(.doc) .burger, body:not(.doc) .bar-logo, body:not(.doc) .side-scrim { display: none; } body:not(.doc) .dock { padding-left: calc(var(--gutter) + var(--side-w)); } /** * เมนูซ้ายบนหน้าแรก — วางกลางจอในแนวตั้ง (เดิมชิดใต้แถบบนจนดูโดนบัง) * * ★ กล่องนอกห้ามเป็นตัวเลื่อนเอง * ของเดิม .side-menu ตั้ง overflow-y:auto + max-height ไว้ พอเมนูมีหลายช่อง * จนการ์ดกระจกข้างในสูงเกิน มันจะถูก "ขอบกล่องนอก" ตัด — มุมโค้งท้ายการ์ดหาย * เห็นเป็นขอบเหลี่ยม ๆ และปุ่มออกจากระบบโดนกินครึ่งใบ * ย้ายการเลื่อนไปไว้ที่ "รายการเมนู" (.side-list) แทน * โลโก้กับปุ่มท้ายการ์ดจึงตรึงอยู่กับที่ และกรอบการ์ดครบใบเสมอไม่ว่าเมนูจะกี่ช่อง */ body:not(.doc) .side-menu { top: 50%; left: 20px; width: 232px; height: auto; max-height: none; padding: 0; overflow: visible; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; border: 0; box-shadow: none; transform: translate3d(0, -50%, 0); } body:not(.doc) .side-in { min-height: 0; /* -70px = แถบบน/ล่าง + ระยะที่การ์ดลอยขึ้น-ลง (กันหัวการ์ดชนแถบบนตอนลอยสุด) */ max-height: calc(100dvh - var(--bar-h) - var(--dock-h) - 70px); overflow: hidden; /* กันลูกยื่นออกไปทับมุมโค้งของการ์ด */ padding: 14px 12px 16px; border-radius: 22px; box-shadow: 0 24px 60px rgba(16, 44, 86, .2), inset 0 1px 0 rgba(255, 255, 255, .8); } /* ตัวเลื่อนอยู่ตรงนี้ — ไม่โชว์แถบเลื่อน (การ์ดกระจกมีแถบเทาพาดจะดูรก) */ body:not(.doc) .side-list { min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } body:not(.doc) .side-list::-webkit-scrollbar { display: none; } /* บีบระยะทุกส่วนลง — เมนู 10 ช่องจะได้พอดีการ์ดโดยไม่ต้องเลื่อนบนจอสูง 900px ขึ้นไป */ body:not(.doc) .side-logo { margin-bottom: 8px; } /* ★ 100 ไม่ใช่ 118 ของเดิม + หั่น margin ลงอีก 2px = ชดเชยความสูงที่โลโก้ใบใหม่กินเพิ่ม เมนู 11 ช่องจึงยังพอดีการ์ดตั้งแต่จอสูง 660px ขึ้นไปเหมือนเดิม */ body:not(.doc) .side-logo img { width: 100px; } body:not(.doc) .side-ep { padding-bottom: 10px; } body:not(.doc) .side-list { padding: 9px 0; gap: 1px; } body:not(.doc) .side-list a { padding: 7px 13px; } body:not(.doc) .side-foot { padding-top: 11px; gap: 7px; } } @media (max-width: 1180px) { .hero-main { grid-template-columns: minmax(0, 1fr); } .hero-art { display: none; } /* ★ ต้องเขียนเจาะจงเท่ากฎ body.has-bg .hero-main.has-side ด้านบน ไม่งั้นแพ้ (specificity ไม่ใช่ลำดับ) */ body.has-bg .hero-main.has-side { grid-template-columns: minmax(0, 1fr); } /* การ์ดนับถอยหลังลงมาต่อท้ายแล้ว -> บีบให้เตี้ยที่สุด กันหน้าแรกสูงเกิน 1 จอ ตัดคำอธิบายกับปุ่มออก (ปุ่มสมัคร/ดาวน์โหลดอยู่ในการ์ดหลักเหนือขึ้นไปแล้ว) */ /* ★ ช่วง 861-1180px panel ยังไม่เลื่อนขึ้น-ลง (เลื่อนได้เฉพาะ ≤860) การ์ดนับถอยหลังลงมาต่อท้ายแล้วสูงเกิน 1 จอ จึงต้องบีบการ์ดหลักคืนมาให้พอดี วัดที่ 1100×820: ของเดิมเหลือที่ว่างท้ายจอแค่ ~44px แต่แถบนี้สูง ~74px */ .hero-wrap { gap: 12px; } .hero-card { padding: 22px 24px; } .hero-lead { margin-top: 14px; } .hero-actions { margin-top: 18px; } /* ★★ ช่วงนี้การ์ดกว้างเต็มจอ (997px ที่ viewport 1084) แต่ **สูงไม่ได้เลย** เพราะ .hero-side ลงมาต่อท้ายเป็นแถบทองอีก ~74px และ panel ยังเลื่อนขึ้น-ลงไม่ได้ ★ วัดจริงที่ 1100x820 ก่อนแก้ : hero-wrap ยาวถึง y 630 แถบเมนูล่างเริ่ม y 613 = ทับกัน 17px จุดเด่น 4 ข้อจึงต้องเป็น **2 คอลัมน์** ที่นี่ (ที่ว่างแนวนอนเหลือเฟือ) ประหยัดได้ ~48px ★ ที่ ≥1181px ไม่ทำแบบนี้ — การ์ดแคบลงเหลือ 540-739px ข้อความจะถูกบีบเป็น 3 บรรทัดต่อข้อ แล้วไม่ได้ประหยัดอะไรเลย (และผิดจากภาพต้นแบบที่เรียงลงมาแถวเดียว) */ .hero-bul { grid-template-columns: 1fr 1fr; column-gap: 24px; } .hero-side { flex-direction: row; align-items: stretch; gap: 10px; } /* การ์ดแบนเป็นแถบเดียว: OPEN BETA | เปิดให้บริการ | ช่องตัวเลข 4 ช่อง */ .cd-card { flex: 1 1 auto; display: flex; align-items: center; gap: 10px; padding: 6px 12px; text-align: left; border-radius: 18px; } .cd-kicker { flex: 0 0 auto; white-space: nowrap; font-size: .6rem; } .cd-title { flex: 0 0 auto; white-space: nowrap; margin-top: 0; font-size: .95rem; } .cd-grid { flex: 1 1 auto; margin-top: 0; gap: 5px; } .cd-cell { padding: 4px 2px 3px; border-radius: 11px; text-align: center; } .cd-v { font-size: 1.06rem; } .cd-k { font-size: .6rem; } .cd-card > .cd-note, .cd-card > .cd-cta { display: none; } .cd-card.is-done { display: block; text-align: center; } .social-row { flex: 0 0 auto; grid-template-columns: minmax(0, 1fr); align-content: center; gap: 8px; } .social-btn { padding: 6px 12px; border-radius: 13px; } .social-tx small { display: none; } /* แถบบนเริ่มแน่น — ตัดยอดไอดีกับข้อความวิ่งออกก่อน เหลือจำนวนคนออนไลน์ */ .live-set.is-id, .live-div.is-id { display: none; } .bar-ticker { display: none; } .bar-status .pill-status { display: none; } /* หัวเรื่องขึ้นบน การ์ดเรียงข้างล่าง — ตัดคำอธิบายยาวออกกันจอล้น */ .srv-wrap { grid-template-columns: minmax(0, 1fr); gap: 18px; } .srv-head .sec-sub { display: none; } .srv-head .link-more { margin-top: 10px; } } @media (max-width: 980px) { .srv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ---------- มือถือ / แท็บเล็ตแนวตั้ง ---------- */ @media (max-width: 860px) { :root { --bar-h: 60px; --dock-h: 64px; --gutter: 18px; } .bar { gap: 12px; } .bar-nav { display: none; } .bar-logo img { height: 32px; } /* เนื้อหาสูงเกินจอบนมือถือ = ปัดขึ้น-ลงในตัว panel ได้ (ปัดซ้าย-ขวายังเปลี่ยน panel) */ .panel { padding: calc(var(--bar-h) + 18px) var(--gutter) calc(var(--dock-h) + 16px); justify-content: flex-start; overflow-y: auto; overscroll-behavior-y: contain; } /* margin auto = อยู่กลางจอเมื่อเนื้อหาพอดี แต่ไม่ตัดหัวเมื่อเนื้อหาสูงเกิน */ .panel > .reveal { margin-top: auto; margin-bottom: auto; } .hero-card { padding: 22px 20px 24px; border-radius: 20px; } /* ★ 3 บรรทัด บนการ์ดกว้าง ~314px — ของเดิม 8.4vw เป็นค่าของหัวเรื่อง 2 บรรทัด ใช้ค่านั้นกับชุดใหม่จะได้บรรทัดละ 2 แถว รวม 6 แถว การ์ดสูงพรวด */ .hero-title { font-size: clamp(1.32rem, 5.3vw, 1.7rem); } .hero-title small { font-size: .86rem; } .hero-lead { font-size: .88rem; line-height: 1.7; } .hero-actions { margin-top: 20px; } .hero-actions .btn { flex: 1 1 auto; justify-content: center; } /* ปุ่มลัดเป็นแถวเดียวปัดข้าง กันหน้าแรกสูงเกินจอ */ .quick-row { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; } .quick-row::-webkit-scrollbar { display: none; } /* ---- การ์ด hero ชุดโปรโมชัน CBT บนมือถือ ---- ★ ป้ายสามเหลี่ยม .hpromo ถูกซ่อนที่ ≤860 อยู่แล้ว หัวเรื่องจึงกว้างได้เต็มการ์ด ★ แถวปุ่มลัดกางค้างอยู่แล้วจาก @media (hover: none) แต่จอสัมผัสบางรุ่น (โน้ตบุ๊กจอสัมผัส) รายงาน hover: hover — จึงบังคับกางที่ความกว้างนี้ซ้ำอีกชั้น แล้วให้ปัดข้างเอาแทน (กฎเดียวกับ .quick-row เดิม) */ .hero-gift { margin-top: 14px; } .hg-tx b { font-size: .8rem; } /* ★ คืนเป็นคอลัมน์เดียว — กฎ 2 คอลัมน์ของช่วง 861-1180 ครอบมาถึงที่นี่ด้วย (เขียน max-width: 1180px ไว้ ซึ่งจอ 390 ก็เข้าเงื่อนไข) ที่การ์ดกว้าง 312px สองคอลัมน์เหลือช่องละ ~130px ข้อความแตกเป็น 3-4 บรรทัดทุกข้อ */ .hero-bul { grid-template-columns: minmax(0, 1fr); } /* ★ กล่องร่วมสนุก: หัวข้อบรรทัดเดียว ขั้นตอนอยู่บรรทัดล่าง ปล่อยให้ flex-wrap เอง จะได้ลูกศรท้ายกล่องตกไปอยู่บรรทัดของตัวเองโดด ๆ */ .hero-share { flex-direction: column; align-items: flex-start; gap: 7px; } .hsh-steps { width: 100%; } .hsh-go { display: none; } /* 7 ใบที่ 36px + ช่องไฟ = 300px พอดีการ์ดกว้าง 312px (ไม่ต้องปัดข้าง) $quick เพิ่มเป็น 8 ใบเมื่อไหร่ .qd-fan ปัดข้างเอาได้ */ .qdial { flex-direction: column; align-items: stretch; gap: 8px; --qd-s: 36px; } .qd-label { flex-direction: row; align-items: baseline; gap: 8px; } /* ★ padding เผื่อระยะลอย (±5px) กับวงแหวนที่ล้นออกนอกปุ่ม 4px ไม่เว้นไว้ = overflow-x: auto ตัดหัววงแหวนขาดตอนปุ่มลอยขึ้นสุด */ .qd-fan { overflow-x: auto; scrollbar-width: none; padding: 9px 0 7px; } .qd-fan::-webkit-scrollbar { display: none; } /* ★ tooltip ของใบริมสุดจะล้นออกนอกการ์ดแล้วโดน overflow: hidden ตัด มือถือไม่มีเมาส์ให้ชี้อยู่แล้ว ตัดทิ้งไปเลย — ชื่อยังอยู่ที่ aria-label */ .qd-tip { display: none; } /* มือถือ: panel เลื่อนขึ้น-ลงได้อยู่แล้ว วางเรียงลงมาตามปกติ ไม่ต้องบีบเป็นแถวนอน */ .hero-side { flex-direction: column; } /* ยกเลิกโหมดแถบนอนของช่วง 1180 (display:flex / ตัดคำอธิบายปุ่ม) กลับเป็นการ์ดปกติ */ .cd-card { display: block; text-align: center; padding: 16px 16px 14px; } .cd-kicker, .cd-title { white-space: normal; } .cd-title { font-size: 1.1rem; } .cd-grid { margin-top: 10px; } .cd-cell { padding: 8px 2px 6px; } .cd-v { font-size: 1.42rem; } .social-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } .social-tx small { display: block; } .stat-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } .stat-cell:nth-child(3) { border-left: 0; } .stat-cell:nth-child(n+3) { border-top: 1px solid rgba(255, 255, 255, .6); } .pet img { width: 48px; opacity: .42; } .rail { gap: 14px; align-items: stretch; } .rail-head { flex-basis: 82vw; align-self: center; } .news-card { flex-basis: 78vw; } .rail > .blk, .rail > .rail-block { flex-basis: 86vw; } .rail .event-grid { grid-auto-columns: 190px; } .rail .rate-grid { grid-auto-columns: 150px; } .step-grid { grid-auto-columns: 224px; } .woe-facts { grid-template-columns: minmax(0, 1fr); } /* แถบล่างมือถือ: ไอคอนบน + ชื่อสั้นล่าง กระจายเท่ากันทั้งแถว ไม่ต้องปัด */ .dock { gap: 10px; padding: 0 10px; } .dock-panels { display: none; } /* มือถือปัดเปลี่ยน panel ได้เอง */ .pillnav { gap: 0; padding: 4px; border-radius: 22px; overflow: hidden; } .pill { flex-direction: column; gap: 3px; padding: 6px 4px; font-size: .62rem; letter-spacing: 0; border-radius: 16px; } .pill img { width: 20px; height: 20px; } .pill-t { display: none; } .pill-s { display: block; } .pill::after { bottom: 3px; } .news-flash { margin-bottom: 14px; padding: 6px 12px 6px 6px; } .news-flash .t { font-size: .74rem; } .scroll-hint { display: none; } /* มือถือ: เหลือไฟสถานะ + ตัวเลขคนออนไลน์ ให้พอกับพื้นที่แถบบน */ .live-pod { gap: 7px; padding: 5px 10px 5px 8px; } .live-set.is-srv, .live-div.is-srv { display: none; } .live-set small { display: none; } .live-set b { font-size: .8rem; } /* popup เกือบเต็มจอ แต่ยังเว้นแถบบน-ล่างไว้ */ .popup-scrim { padding: calc(var(--bar-h) + 8px) 8px calc(var(--dock-h) + 8px); } .popup-box { width: 100%; max-height: 100%; border-radius: 18px; } .popup-bar { padding: 14px 16px; } .popup-body { padding: 16px; grid-template-columns: minmax(0, 1fr); gap: 14px; } .popup-body > .blk:only-child { grid-template-columns: minmax(0, 1fr); } .popup-body .info-list, .popup-body .skill-list { columns: auto; } .popup-foot { padding: 12px 16px; } .popup-foot .btn { flex: 1 1 auto; justify-content: center; } .doc-hero { padding: calc(var(--bar-h) + 28px) 0 18px; } .doc-grid { gap: 16px; } } @media (max-width: 560px) { .bar-cta .btn:not(.btn-primary) { display: none; } .stat-cell { padding: 13px 15px; } .stat-strip .v { font-size: 1.15rem; } .srv-grid { grid-template-columns: minmax(0, 1fr); } .doc-grid, .news-grid, .doc-steps { grid-template-columns: minmax(0, 1fr); } .event-grid, .event-grid-flat { grid-template-columns: minmax(0, 1fr); } .blk, .doc-note { padding: 20px 18px 22px; } .doc-foot-in { flex-direction: column; } } /* จอสูงน้อย (โน้ตบุ๊ก / มือถือแนวนอน) */ @media (max-height: 800px) and (min-width: 861px) { .panel { padding-top: calc(var(--bar-h) + 16px); padding-bottom: calc(var(--dock-h) + 12px); } .hero-card { padding: 22px 26px 24px; } .quick-row { margin-top: 16px; padding-top: 14px; } .stat-cell { padding: 14px 18px; } /* ★★ จอเตี้ย = กรณีคับที่สุดของการ์ด hero ชุดโปรโมชัน CBT วัดจริงที่ 1424x749 : ท้าย hero-wrap อยู่ที่ y 681 แถบเมนูล่างเริ่มที่ 683 เหลือช่องว่างแค่ 2px — เพิ่มบล็อกใหม่ในการ์ดต้องมาลดระยะตรงนี้ทุกครั้ง */ .hero-kicker { margin-bottom: 11px; } .hero-title { font-size: clamp(1.42rem, 1.95vw, 1.78rem); } .hero-title small { margin-top: 5px; font-size: .86rem; } .hero-gift { margin-top: 13px; padding: 9px 12px; gap: 10px; } .hg-ico { width: 32px; height: 32px; border-radius: 10px; } .hg-tx b { font-size: .79rem; } .hg-tx small { font-size: .69rem; } .hero-bul { margin-top: 11px; gap: 5px; } .hero-bul li { font-size: .765rem; line-height: 1.44; } .hero-share { margin-top: 11px; padding: 8px 12px; gap: 8px 13px; } .hsh-ico { width: 24px; height: 24px; } .qdial { margin-top: 11px; padding-top: 10px; --qd-s: 38px; --qd-gap: 7px; } .qd-b img { width: 21px; height: 21px; } .blk, .rail-block { padding: 20px 22px 22px; } .rate-tile { padding: 12px 14px; } .step-card { padding: 20px 22px 22px; } /* จอเตี้ย: บีบการ์ดเซิร์ฟเวอร์ให้ 2 แถวยังอยู่ในจอ */ .srv-tile { padding: 13px 15px 12px; gap: 9px; } .srv-top { padding-bottom: 9px; } .srv-facts { gap: 5px; } .srv-fact { padding-bottom: 5px; font-size: .73rem; } .srv-grid { gap: 11px; } } /* ========================================================================== ★★ จอเตี้ยมาก — ชั้นบีบที่สองของการ์ด hero (14 ส.ค. 2569) ========================================================================== โน้ตบุ๊ก 1280x800 / 1366x768 เหลือพื้นที่ในเบราว์เซอร์จริงราว 650-690px เท่านั้น ★ วัดจริงที่ 1284x800 (viewport 1268x649) ก่อนใส่บล็อกนี้ : hero-wrap ยาวถึง y 604 แต่แถบเมนูล่างเริ่มที่ y 584 — ทับกัน 20px และหัวการ์ดอยู่ที่ y 57 ซึ่งมุดขึ้นไปใต้แถบบน (แถบบนสูงถึง y 70) ★ ชั้น max-height: 800px ด้านบนบีบมาแล้วชั้นหนึ่ง ที่นี่บีบต่ออีกราว 70px ★ เพิ่มบล็อกใหม่ในการ์ด hero ต้องกลับมาบีบตรงนี้ด้วยเสมอ -------------------------------------------------------------------------- */ @media (max-height: 700px) and (min-width: 861px) { .hero-wrap { gap: 10px; } /* ★ ช่วง 861-1180px ช่องขวา (.hero-side) ลงมาต่อท้ายการ์ดในคอลัมน์เดียว ช่องไฟ 30px ของกริดจึงกลายเป็นความสูงจริง ๆ 30px ที่ไม่ได้ใช้ทำอะไร */ .hero-main { gap: 16px; } .hero-card { padding: 15px 22px 16px; } .hero-kicker { margin-bottom: 8px; font-size: .64rem; } .hero-title { font-size: clamp(1.24rem, 1.72vw, 1.56rem); } .hero-title small { margin-top: 4px; font-size: .8rem; } .hero-gift { margin-top: 10px; padding: 7px 11px; gap: 9px; border-radius: 13px; } .hg-ico { width: 29px; height: 29px; border-radius: 9px; } .hg-tx b { font-size: .75rem; } .hg-tx small { font-size: .66rem; } .hero-bul { margin-top: 9px; gap: 4px; } .hero-bul li { font-size: .73rem; line-height: 1.38; gap: 8px; } .hero-share { margin-top: 9px; padding: 6px 11px; gap: 6px 11px; border-radius: 13px; } .hsh-h { font-size: .75rem; } .hsh-step { font-size: .7rem; } .hsh-ico { width: 22px; height: 22px; } .qdial { margin-top: 9px; padding-top: 8px; --qd-s: 33px; --qd-gap: 6px; } .qd-b img { width: 19px; height: 19px; } .qd-label { font-size: .62rem; } .stat-cell { padding: 7px 16px; } } /* ========================================================================== AUTH (login.php) & MEMBER (member.php) ใช้ชุดสีเดียวกับทั้งเว็บ — การ์ดขาว ขอบฟ้าอ่อน ตัวอักษร navy เน้นทอง ========================================================================== */ /* พื้นหลังมีตัวละครอยู่แล้ว หน้านี้จึงเหลือการ์ดเดี่ยวกลางจอ ไม่ใส่ภาพซ้ำ */ .auth-wrap { display: grid; grid-template-columns: minmax(0, 460px); justify-content: center; padding-bottom: 44px; } .auth-card { gap: 0; } .auth-alert { padding: 12px 15px; border-radius: var(--radius-sm); font-size: .83rem; line-height: 1.6; margin-bottom: 16px; } .auth-alert.err { background: rgba(216, 102, 63, .1); border: 1px solid rgba(216, 102, 63, .34); color: #9c4222; } .auth-alert.info { background: var(--blue-pale); border: 1px solid var(--border); color: var(--navy-soft); } .field { position: relative; margin-bottom: 13px; } .field input { width: 100%; padding: 14px 16px 14px 46px; font-family: var(--font-body); font-size: .92rem; color: var(--navy); background: rgba(255, 255, 255, .62); border: 1px solid rgba(255, 255, 255, .85); box-shadow: inset 0 1px 3px rgba(16, 44, 86, .07); border-radius: var(--radius-sm); transition: border-color .18s, box-shadow .18s, background-color .18s; } .field input::placeholder { color: #93a9c0; } .field input:focus { outline: none; background: rgba(255, 255, 255, .92); border-color: var(--blue); box-shadow: 0 0 0 4px rgba(25, 107, 212, .13); } .field .ico { position: absolute; left: 15px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); color: var(--blue); pointer-events: none; } .field .ico svg { display: block; width: 100%; height: 100%; } .auth-submit { width: 100%; justify-content: center; margin-top: 8px; } .auth-note { display: flex; gap: 10px; margin-top: 18px; padding: 12px 14px; background: rgba(234, 244, 255, .72); border: 1px solid rgba(255, 255, 255, .8); border-radius: var(--radius-sm); font-size: .75rem; line-height: 1.65; color: var(--navy-soft); } .auth-note svg { flex: 0 0 auto; width: 17px; height: 17px; color: var(--blue); margin-top: 1px; } .auth-foot { margin-top: 18px; padding-top: 16px; border-top: 1px dashed var(--border); text-align: center; font-size: .83rem; color: var(--copy); } .auth-foot a { color: var(--blue); font-weight: 600; } .auth-foot a:hover { text-decoration: underline; } /* ---------- register (register.php) ---------- ฟอร์มยาวกว่าหน้า login จึงวางเป็น 2 คอลัมน์ : ฟอร์มซ้าย + กติกาขวา ช่องกรอกใช้ .field ชุดเดียวกับ login (กระจกฝ้า) ไม่สร้างสไตล์ช่องกรอกซ้ำ */ .reg-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 330px); align-items: start; gap: 20px; padding-bottom: 44px; } .reg-card { gap: 0; } .reg-side { display: flex; flex-direction: column; gap: 20px; } .err-list { margin: 0; padding-left: 18px; list-style: disc; } .err-list li + li { margin-top: 4px; } /* หัวช่องกรอก : ชื่อช่องซ้าย + คำอธิบายสั้นขวา */ .f-lab { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 6px; } .f-lab span { font-size: .7rem; color: var(--copy); } /* ต้องเขียน .f-lab .f-lab-t (ไม่ใช่ .f-lab-t เดี่ยว ๆ) ไม่งั้นกฎ .f-lab span ข้างบนชนะ แล้วป้าย "เพศของตัวละคร" จะตัวเล็กกว่าป้ายช่องอื่น */ .f-lab label, .f-lab .f-lab-t { font-size: .8rem; font-weight: 600; color: var(--navy); } .f-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; } .f-birth { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } /* ช่องเลือก — หน้าตาเดียวกับ .field input แต่ไม่มีไอคอนซ้าย */ .f-sel select { width: 100%; padding: 14px 34px 14px 14px; font-family: var(--font-body); font-size: .88rem; color: var(--navy); background-color: rgba(255, 255, 255, .62); background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23196bd4' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 11px center; background-size: 15px 15px; border: 1px solid rgba(255, 255, 255, .85); box-shadow: inset 0 1px 3px rgba(16, 44, 86, .07); border-radius: var(--radius-sm); -webkit-appearance: none; -moz-appearance: none; appearance: none; transition: border-color .18s, box-shadow .18s, background-color .18s; } .f-sel select:focus { outline: none; background-color: rgba(255, 255, 255, .92); border-color: var(--blue); box-shadow: 0 0 0 4px rgba(25, 107, 212, .13); } /* เพศ — ปุ่มเลือกแบบการ์ด (ซ่อน radio จริงไว้ แต่ยังกด Tab ได้) */ .f-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 13px; } .opt { position: relative; display: block; cursor: pointer; } .opt input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .opt span { display: block; padding: 14px 12px; text-align: center; font-size: .84rem; font-weight: 600; color: var(--navy-soft); background: rgba(255, 255, 255, .58); border: 1px solid rgba(255, 255, 255, .85); box-shadow: inset 0 1px 3px rgba(16, 44, 86, .07); border-radius: var(--radius-sm); transition: color .18s, background-color .18s, border-color .18s, box-shadow .18s; } .opt:hover span { background: rgba(255, 255, 255, .8); } .opt input:checked + span { color: var(--navy); background: linear-gradient(150deg, rgba(255, 255, 255, .92), rgba(234, 244, 255, .86)); border-color: var(--blue); box-shadow: 0 0 0 3px rgba(25, 107, 212, .14), inset 0 1px 0 rgba(255, 255, 255, .9); } .opt input:focus-visible + span { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(234, 184, 79, .4); } /* รหัสยืนยัน — รูปซ้าย ช่องกรอกขวา กดที่รูปเพื่อขอรหัสใหม่ */ .f-cap { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: start; } .cap-btn { padding: 0; line-height: 0; cursor: pointer; background: rgba(255, 255, 255, .7); border: 1px solid rgba(255, 255, 255, .85); border-radius: var(--radius-sm); overflow: hidden; box-shadow: inset 0 1px 3px rgba(16, 44, 86, .07); transition: border-color .18s, box-shadow .18s; } .cap-btn:hover { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(25, 107, 212, .13); } .cap-btn img { display: block; width: 176px; height: 56px; } /* ยอมรับข้อตกลง */ .terms-check { display: flex; align-items: flex-start; gap: 10px; margin: 4px 0 2px; padding: 12px 14px; background: rgba(234, 244, 255, .6); border: 1px solid rgba(255, 255, 255, .8); border-radius: var(--radius-sm); font-size: .8rem; line-height: 1.6; color: var(--navy-soft); cursor: pointer; } .terms-check input { flex: 0 0 auto; width: 17px; height: 17px; margin-top: 2px; accent-color: var(--blue); cursor: pointer; } .terms-check a { color: var(--blue); font-weight: 600; } .terms-check a:hover { text-decoration: underline; } /* กติกาในการ์ดขวา — ตัวเลขสีทอง */ .rule-list { margin: 0; padding: 0; list-style: none; counter-reset: rule; } .rule-list li { position: relative; padding: 0 0 11px 30px; margin-bottom: 11px; border-bottom: 1px dashed var(--border); font-size: .82rem; line-height: 1.65; color: var(--copy); counter-increment: rule; } .rule-list li:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; } .rule-list li::before { content: counter(rule); position: absolute; left: 0; top: 1px; width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; font-size: .66rem; font-weight: 700; color: #3d2c07; background: linear-gradient(150deg, #f6d489, var(--gold)); } /* สมัครสำเร็จ */ .reg-done { text-align: center; padding: 12px 0 6px; } .reg-done-ico { display: grid; place-items: center; width: 68px; height: 68px; margin: 0 auto 16px; border-radius: 50%; color: var(--ok); background: rgba(23, 147, 106, .12); border: 1px solid rgba(23, 147, 106, .3); } .reg-done-ico svg { width: 34px; height: 34px; } .reg-done h2 { font-family: var(--font-head); font-size: 1.32rem; color: var(--navy); margin-bottom: 8px; } .reg-done p { font-size: .88rem; line-height: 1.75; color: var(--copy); } .reg-done b { color: var(--gold-deep); font-weight: 700; } .reg-done-act { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin-top: 20px; } @media (max-width: 1000px) { .reg-wrap { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 620px) { .f-grid { grid-template-columns: minmax(0, 1fr); gap: 0; } .f-birth { gap: 6px; } .f-sel select { padding: 13px 26px 13px 10px; font-size: .8rem; background-position: right 7px center; } .f-cap { grid-template-columns: minmax(0, 1fr); } .cap-btn { justify-self: start; } .reg-done-act .btn { width: 100%; justify-content: center; } } /* ---------- member ---------- */ .mem-card { overflow: hidden; margin-bottom: 20px; } .mem-top { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding: 24px 26px; background: linear-gradient(115deg, rgba(234, 244, 255, .72) 0%, rgba(255, 255, 255, .4) 62%); border-bottom: 1px solid rgba(255, 255, 255, .8); } .mem-avatar { flex: 0 0 auto; width: 64px; height: 64px; display: grid; place-items: center; border-radius: 50%; font-family: var(--font-head); font-size: 1.6rem; font-weight: 600; color: #3d2c07; background: linear-gradient(150deg, #f6d489, var(--gold)); box-shadow: 0 8px 18px rgba(234, 184, 79, .42); } .mem-id { flex: 1 1 240px; min-width: 0; } .mem-id h1 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-family: var(--font-head); font-size: 1.42rem; font-weight: 600; line-height: 1.2; } .mem-meta { display: flex; flex-wrap: wrap; gap: 5px 18px; margin-top: 9px; font-size: .78rem; color: var(--copy); } .mem-meta b { color: var(--navy); font-weight: 600; } .tag { padding: 4px 11px; border-radius: 999px; font-size: .67rem; font-weight: 700; letter-spacing: .04em; } .tag.ok { background: rgba(23, 147, 106, .12); border: 1px solid rgba(23, 147, 106, .32); color: var(--ok); } .tag.no { background: rgba(216, 102, 63, .12); border: 1px solid rgba(216, 102, 63, .34); color: #a8451f; } .mem-acts { display: flex; gap: 9px; flex-wrap: wrap; } .mem-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); } .mem-stat { display: flex; flex-direction: column; gap: 4px; padding: 18px 22px; border-right: 1px solid var(--border); transition: background-color .2s; } .mem-stat:last-child { border-right: 0; } .mem-stat:hover { background: rgba(255, 255, 255, .5); } .mem-stat .v { font-family: var(--font-head); font-size: 1.42rem; font-weight: 600; color: var(--navy); line-height: 1.1; } .mem-stat .k { font-size: .65rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--copy); } .mem-stat.gold .v { color: var(--gold-deep); } .mem-stat.blue .v { color: var(--blue); } .tbl-scroll { overflow-x: auto; } .char-table { width: 100%; border-collapse: collapse; font-size: .85rem; } .char-table th { padding: 10px 14px; text-align: left; font-size: .65rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--copy); border-bottom: 1px solid var(--border); white-space: nowrap; } .char-table td { padding: 13px 14px; color: var(--navy-soft); border-bottom: 1px solid var(--border-soft); vertical-align: middle; } .char-table tr:last-child td { border-bottom: 0; } .char-table tbody tr:hover td { background: rgba(234, 244, 255, .66); } .char-no { width: 34px; color: #9bb0c6; } .char-n { font-weight: 700; color: var(--navy); } .job-tag { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: .7rem; font-weight: 700; color: var(--blue); background: rgba(234, 244, 255, .8); border: 1px solid rgba(255, 255, 255, .85); white-space: nowrap; } .lv b { color: var(--navy); font-weight: 700; } .lv span { color: var(--copy); } .zeny { color: var(--gold-deep); font-weight: 700; } .zeny em { font-style: normal; font-size: .74rem; color: var(--copy); } .dim { color: var(--copy); font-size: .8rem; } .mem-empty { padding: 46px 20px; text-align: center; color: var(--copy); font-size: .9rem; } /* ต่อฐานข้อมูลไม่ได้ — แจ้งในหน้าแทนการ die() ทั้งหน้า */ .db-warn { margin-bottom: 20px; padding: 20px 24px 22px; border-left: 4px solid var(--warn); background: linear-gradient(120deg, rgba(216, 102, 63, .14) 0%, rgba(255, 255, 255, .72) 58%); } .db-warn h2 { font-family: var(--font-head); font-size: 1.05rem; color: var(--warn); margin-bottom: 8px; } .db-warn p { font-size: .86rem; line-height: 1.75; color: var(--copy); } .db-warn b { color: var(--navy); } .db-warn-hint { margin-top: 8px; font-size: .78rem; color: var(--navy-soft); } /* ========================================================================== MEMBER DASHBOARD — แท็บ / ตัวละคร / แคช / ความปลอดภัย (member.php) ========================================================================== พอร์ตหน้าตามาจากโปรเจคเก่า OPKwin-ro (React + Tailwind ธีมดำ-ทอง) แต่วาดใหม่ด้วยชุดกระจกฝ้า navy/ฟ้า/ทอง ของเว็บนี้ — ไม่มีการ์ดดำทึบ ทุกกล่องที่เป็นกระจกต้องมีชื่อในบล็อก @supports not (backdrop-filter) ท้ายไฟล์ด้วย ========================================================================== */ /* แท็บของหน้าสมาชิก — ใช้หน้าตาเดียวกับ .doc-toc แต่เป็นลิงก์ข้ามหน้า ไม่ใช่ #anchor จึงไม่มี data-spy และไม่ตรึงติดขอบจอ */ .mem-tabs { margin-bottom: 18px; } /* ผลลัพธ์ของ POST (Unstuck / เปลี่ยนรหัสผ่าน) */ .mem-flash { margin-bottom: 18px; padding: 13px 17px; border-radius: var(--radius-sm); font-size: .86rem; line-height: 1.7; border: 1px solid transparent; } .mem-flash.ok { background: rgba(23, 147, 106, .12); border-color: rgba(23, 147, 106, .34); color: #0f6f50; } .mem-flash.err { background: rgba(216, 102, 63, .12); border-color: rgba(216, 102, 63, .36); color: #9c4222; } .tag.sex { background: rgba(25, 107, 212, .1); border: 1px solid rgba(25, 107, 212, .28); color: var(--blue); } /* ---------- ทางลัด 4 ใบ (แท็บภาพรวม) ---------- */ .mem-quick { display: grid; grid-template-columns: repeat(auto-fill, minmax(258px, 1fr)); gap: 14px; margin-bottom: 20px; } .q-act { display: flex; align-items: center; gap: 14px; padding: 16px 18px; color: inherit; transition: transform .18s ease, box-shadow .18s ease; } .q-act:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); } .q-act img { flex: 0 0 auto; width: 30px; height: 30px; } .q-txt { flex: 1; min-width: 0; } .q-txt small { display: block; font-size: .62rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--copy); } .q-txt b { display: block; margin-top: 2px; font-size: .96rem; color: var(--navy); } .q-txt p { margin: 3px 0 0; font-size: .74rem; line-height: 1.5; color: var(--copy); } .q-go { flex: 0 0 auto; font-size: 1.5rem; line-height: 1; color: #9bb0c6; transition: transform .18s ease, color .18s ease; } .q-act:hover .q-go { transform: translateX(3px); color: var(--blue); } /* ---------- การ์ดตัวละคร ---------- */ .ch-lead { margin: 0 0 14px; font-size: .86rem; color: var(--copy); } .ch-lead b { color: var(--navy); font-weight: 700; } .ch-lead-hint { margin-left: 10px; font-size: .76rem; color: var(--navy-soft); opacity: .8; } .ch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(316px, 1fr)); gap: 16px; padding-bottom: 30px; align-items: start; } .ch-card { overflow: hidden; } /* หัวการ์ด = จริง — ปิด JS ก็ยังกางอ่านได้ (สามเหลี่ยมของเบราว์เซอร์ซ่อนไว้) */ .ch-face { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "ava info go" "foot foot foot"; gap: 13px 14px; padding: 16px 18px; cursor: pointer; list-style: none; transition: background-color .18s ease; } .ch-face::-webkit-details-marker { display: none; } .ch-face::marker { content: ''; } .ch-face:hover { background: rgba(255, 255, 255, .42); } .ch-face:focus-visible { outline: 2px solid var(--blue); outline-offset: -3px; } .ch-ava { grid-area: ava; position: relative; width: 62px; height: 72px; display: grid; place-items: center; border-radius: var(--radius-sm); background: linear-gradient(160deg, rgba(234, 244, 255, .9), rgba(255, 255, 255, .5)); border: 1px solid rgba(255, 255, 255, .9); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9); } /* ★ สไปรท์อาชีพเป็น pixel art (และเป็น .gif ขยับได้) — ต้อง pixelated ไม่งั้นเบลอเหมือนภาพถูกยืด object-position ยึดขอบล่าง เพราะสไปรท์แต่ละอาชีพสูงไม่เท่ากัน (หมวก/ปีก) ยึดกลางแล้วตัวจะลอย */ .ch-ava img { width: 54px; height: 54px; object-fit: contain; object-position: center bottom; image-rendering: pixelated; } .ch-ini { font-family: var(--font-head); font-size: 1.5rem; font-style: normal; font-weight: 600; color: var(--gold-deep); } /* ไฟสถานะ — เทา = ออฟไลน์ · เขียว = ออนไลน์ · ทอง = แฟล็กค้างจากตอนเซิร์ฟดับ */ .ch-dot { position: absolute; right: -4px; bottom: -4px; width: 13px; height: 13px; border-radius: 50%; background: #b8c7d8; border: 2px solid #fff; box-shadow: 0 1px 3px rgba(16, 44, 86, .25); } .ch-dot.is-on { background: var(--ok); } .ch-dot.is-stale { background: var(--gold); } .ch-dot.is-on::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid rgba(23, 147, 106, .5); animation: chPing 1.9s ease-out infinite; } @keyframes chPing { 0% { transform: scale(.7); opacity: .9; } 100% { transform: scale(1.5); opacity: 0; } } .ch-info { grid-area: info; min-width: 0; } .ch-name { display: block; font-family: var(--font-head); font-size: 1.06rem; font-weight: 600; color: var(--navy); line-height: 1.25; word-break: break-word; } .ch-job { display: block; margin-top: 1px; font-size: .68rem; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; color: var(--gold-deep); } .ch-guild { display: block; margin-top: 3px; font-size: .74rem; color: var(--copy); } .ch-guild::before { content: '⚑ '; color: var(--gold-deep); } .ch-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } .ch-chips .chip { padding: 3px 10px; border-radius: 999px; font-size: .68rem; font-style: normal; font-weight: 700; border: 1px solid rgba(255, 255, 255, .85); } .ch-chips .lv { color: var(--gold-deep); background: rgba(234, 184, 79, .18); } .ch-chips .jb { color: var(--blue); background: rgba(234, 244, 255, .9); } .ch-go { grid-area: go; align-self: center; font-size: 1.5rem; line-height: 1; color: #9bb0c6; transition: transform .18s ease, color .18s ease; } .ch-face:hover .ch-go { transform: translateX(3px); color: var(--blue); } .ch-foot { grid-area: foot; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 11px; border-top: 1px dashed var(--border); font-size: .76rem; color: var(--copy); } .ch-map { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ch-map::before { content: '◉ '; color: var(--blue); } .ch-zeny { flex: 0 0 auto; color: var(--gold-deep); font-weight: 700; } .ch-zeny em { font-style: normal; font-weight: 500; color: var(--copy); } /* ---------- รายละเอียดตัวละคร (กางในการ์ดเมื่อปิด JS · ก๊อปไปแสดงใน popup เมื่อเปิด JS) ---------- */ .ch-body { padding: 4px 18px 18px; border-top: 1px solid var(--border-soft); } .ch-card[open] .ch-body { padding-top: 16px; } .chd-lv { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; } .chd-pill { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 11px 8px; border-radius: var(--radius-sm); border: 1px solid rgba(255, 255, 255, .85); background: rgba(255, 255, 255, .5); } .chd-pill span { font-size: .6rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--copy); } .chd-pill b { font-family: var(--font-head); font-size: 1.5rem; font-weight: 600; line-height: 1; } .chd-pill.gold b { color: var(--gold-deep); } .chd-pill.blue b { color: var(--blue); } .chd-bars { display: flex; flex-direction: column; gap: 11px; margin-bottom: 14px; } .chd-bar-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 5px; font-size: .72rem; } .chd-bar-h i { font-style: normal; font-weight: 700; letter-spacing: .1em; color: var(--copy); } .chd-bar-h b { color: var(--navy); font-weight: 700; } .chd-bar-h em { font-style: normal; font-weight: 500; color: var(--copy); } .chd-track { display: block; height: 8px; border-radius: 999px; background: rgba(215, 229, 242, .8); overflow: hidden; } .chd-track i { display: block; height: 100%; border-radius: 999px; transition: width .4s ease; } .chd-track .hp { background: linear-gradient(90deg, #e0784f, var(--warn)); } .chd-track .sp { background: linear-gradient(90deg, #4f96e0, var(--blue)); } .chd-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 14px; } .chd-stat { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 6px; border-radius: var(--radius-sm); border: 1px solid rgba(255, 255, 255, .85); background: rgba(234, 244, 255, .58); } .chd-stat b { font-family: var(--font-head); font-size: 1.16rem; font-weight: 600; color: var(--navy); line-height: 1; } .chd-stat span { font-size: .58rem; font-weight: 700; letter-spacing: .12em; color: var(--copy); } .chd-info { margin-bottom: 14px; } /* ปุ่มย้ายกลับจุดเซฟ */ .ch-unstuck { margin: 0; } .ch-unstuck .btn { width: 100%; justify-content: center; } .ch-unstuck .btn[disabled] { opacity: .5; cursor: not-allowed; box-shadow: none; } .ch-hint { margin: 9px 0 0; font-size: .74rem; line-height: 1.65; color: var(--copy); } /* ใน popup — JS ก๊อป "ลูก ๆ ของ .ch-body" มาวางตรง ๆ (ไม่ได้ก๊อปตัว .ch-body มาด้วย) แต่ละก้อนจึงกลายเป็นช่องของกริดใน .popup-body เอง กระจายเป็นคอลัมน์แนวนอน กล่องไม่สูง รายการยาวกับปุ่มให้กินเต็มแถว ไม่งั้นถูกบีบอยู่คอลัมน์เดียว */ .popup-body > .chd-info, .popup-body > .ch-unstuck { grid-column: 1 / -1; } .popup-body > .ch-unstuck .btn { width: auto; } .popup-body > .chd-lv { align-content: start; } /* ---------- แคช & เติมเงิน ---------- ยอดคงเหลือแคบซ้าย + ประวัติกว้างขวา (ตารางประวัติมี 4 คอลัมน์ ถ้าใช้ .doc-grid จะโดนบีบจนล้นการ์ด) */ .cash-wrap { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); align-items: start; gap: 20px; padding-bottom: 30px; } .cash-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); margin-bottom: 16px; } .cash-grid .rate-tile .v { color: var(--gold-deep); } .cash-grid .rate-tile:nth-child(2) .v { color: var(--blue); } /* ---------- ความปลอดภัย ---------- */ .sec-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 340px); align-items: start; gap: 20px; padding-bottom: 30px; } .sec-side { display: flex; flex-direction: column; gap: 20px; } .sec-wrap .field { margin-bottom: 0; } .sec-wrap .field input { padding-left: 16px; } /* ฟอร์มนี้ไม่มีไอคอนซ้ายเหมือนหน้า login */ .sec-wrap .f-lab { margin-top: 14px; } .sec-wrap .f-grid { gap: 0 14px; } @media (max-width: 1000px) { .sec-wrap, .cash-wrap { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 620px) { .ch-grid { grid-template-columns: minmax(0, 1fr); } .ch-face { padding: 14px; gap: 11px 12px; } .ch-ava { width: 54px; height: 64px; } .ch-ava img { width: 46px; height: 46px; } .ch-body { padding: 4px 14px 16px; } .chd-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; } .mem-quick { grid-template-columns: minmax(0, 1fr); } .sec-wrap .f-grid { grid-template-columns: minmax(0, 1fr); } .ch-lead-hint { display: block; margin: 4px 0 0; } } @media (max-width: 560px) { .auth-wrap { grid-template-columns: minmax(0, 1fr); } } /* ========================================================================== ADMIN — หลังบ้าน (admin/index.php · users · characters · items/monitor) ========================================================================== ใช้ธีมกระจกเดิมทั้งหมด — การ์ดทุกใบยังเป็น .card ตัวเดิม ไม่มีสีใหม่ ที่เพิ่มมาเป็นแค่ตาราง / ตัวกรอง / แถบเปลี่ยนหน้า ซึ่งเว็บฝั่งผู้เล่นไม่มี ========================================================================== */ /* ---------- ระยะห่างระหว่างการ์ด ---------- การ์ดหลังบ้านวางเรียงตรง ๆ ใน .doc-wrap (ไม่ได้อยู่ใน .doc-grid ที่มี gap ให้) ★ ใช้คลาสเฉพาะ .adm-s ไม่เขียนเป็น .doc-wrap > .card เพราะหน้าอื่นทั้งเว็บ ก็มีการ์ดวางตรงแบบนี้เหมือนกัน แก้กว้าง ๆ จะไปดันระยะของหน้าเดิมทุกหน้า */ .adm-s { margin-bottom: 20px; } .doc-grid > .adm-s, .cash-wrap > .adm-s, .cash-wrap > div > .adm-s:last-child { margin-bottom: 0; } .cash-wrap > div > .adm-s { margin-bottom: 20px; } /* ---------- ป้ายบอกว่ากำลังใช้สิทธิ์ผู้ดูแล ---------- */ .adm-who { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 16px; margin: 0 0 14px; padding: 12px 18px; border-radius: 14px; background: rgba(234, 184, 79, .14); border: 1px solid rgba(169, 124, 28, .34); -webkit-backdrop-filter: blur(10px) saturate(120%); backdrop-filter: blur(10px) saturate(120%); } .adm-who-t { font-size: .88rem; color: var(--navy); font-weight: 700; } .adm-who-s { display: block; font-weight: 400; font-size: .76rem; color: var(--copy); } .adm-who-f { margin: 0; } .adm-who-f .btn { padding: 7px 15px; font-size: .78rem; } /* ---------- หน้าด่าน (ยังไม่ผ่านสิทธิ์) ---------- */ .adm-gate { max-width: 620px; margin: 0 auto; padding-bottom: 40px; } .adm-gate-card p, .adm-deny p { font-size: .88rem; line-height: 1.8; color: var(--copy); } .adm-deny h2, .adm-gate-card h2 { margin: 0 0 10px; } .adm-pin-form { margin-top: 16px; } .adm-pin-form .field { margin-bottom: 12px; } .adm-pin-form .field input { padding-left: 16px; } .adm-pin-form .btn { margin-top: 6px; } .adm-hint { margin: 8px 0 0; font-size: .78rem; line-height: 1.7; color: var(--navy-soft); } .adm-sub { font-size: .76rem; font-weight: 400; color: var(--copy); } .adm-back { margin: 0 0 12px; } /* ---------- ตัวเลขสรุป ---------- */ .adm-kpi { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin-top: 4px; } .adm-kpi-i { padding: 14px 16px; border-radius: 14px; text-align: center; background: rgba(255, 255, 255, .48); border: 1px solid rgba(255, 255, 255, .7); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } .adm-kpi-n { display: block; font-family: var(--f-head, inherit); font-size: 1.5rem; font-weight: 700; color: var(--navy); font-variant-numeric: tabular-nums; } .adm-kpi-l { display: block; margin-top: 3px; font-size: .76rem; color: var(--copy); } .adm-kpi-i.is-ok .adm-kpi-n { color: var(--ok); } .adm-kpi-i.is-warn .adm-kpi-n { color: var(--gold-deep); } .adm-kpi-i.is-bad .adm-kpi-n { color: var(--warn); } /* ---------- กราฟแท่ง (ไม่พึ่งไลบรารีใด ๆ) ---------- */ .adm-chart { display: flex; align-items: flex-end; gap: 6px; height: 168px; padding: 8px 4px 0; overflow-x: auto; } .adm-bar { flex: 1 1 0; min-width: 26px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; text-align: center; } .adm-bar i { display: block; width: 100%; max-width: 34px; min-height: 2px; border-radius: 6px 6px 0 0; background: linear-gradient(180deg, var(--blue), rgba(25, 107, 212, .45)); } .adm-bar b { margin-top: 5px; font-size: .7rem; color: var(--navy); font-variant-numeric: tabular-nums; } .adm-bar em { font-style: normal; font-size: .68rem; color: var(--copy); } /* ---------- ตาราง ---------- ★ ตารางหลังบ้านกว้างกว่าจอเสมอบนมือถือ — ต้องให้ "กล่องครอบ" เลื่อนแนวนอนเอง ห้ามปล่อยให้ body เลื่อน ไม่งั้นทั้งหน้าขยับตามแล้วเมนูลอยเบี้ยว */ .adm-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 4px -4px 0; padding: 0 4px; } .adm-table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: .82rem; } .adm-table th, .adm-table td { padding: 9px 10px; text-align: left; vertical-align: top; border-bottom: 1px solid rgba(215, 229, 242, .8); } .adm-table thead th { font-size: .74rem; font-weight: 700; color: var(--navy-soft); text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; border-bottom: 1px solid rgba(25, 107, 212, .28); } .adm-table thead th a { color: inherit; text-decoration: none; } .adm-table thead th a:hover { color: var(--blue); } .adm-table tbody tr:hover { background: rgba(234, 244, 255, .55); } .adm-table tbody tr:last-child td { border-bottom: 0; } .adm-table .ta-r { text-align: right; font-variant-numeric: tabular-nums; } .adm-table b { color: var(--navy); } .adm-items tr.is-hot { background: rgba(234, 184, 79, .16); } .adm-items tr.is-hot:hover { background: rgba(234, 184, 79, .24); } /* ---------- ตัวกรอง ---------- */ .adm-filter { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px; } .adm-filter .field { margin-bottom: 0; flex: 1 1 200px; min-width: 0; } .adm-filter .field input, .adm-filter .field select { padding-left: 16px; } .adm-filter .btn { flex: 0 0 auto; } .adm-chk { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; font-size: .82rem; color: var(--copy); padding-bottom: 10px; } .adm-chk input { width: auto; } /* ---------- แถบเปลี่ยนหน้า ---------- */ .adm-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; margin-top: 14px; } .adm-pager-info { font-size: .78rem; color: var(--copy); } .adm-pager-btns { display: flex; flex-wrap: wrap; gap: 6px; } .adm-pager-btns a { min-width: 32px; padding: 5px 10px; border-radius: 999px; font-size: .78rem; text-align: center; text-decoration: none; color: var(--navy); background: rgba(255, 255, 255, .55); border: 1px solid rgba(215, 229, 242, .9); } .adm-pager-btns a:hover { border-color: var(--blue); color: var(--blue); } .adm-pager-btns a.is-on { background: var(--blue); border-color: var(--blue); color: #fff; } /* ---------- ฟอร์มแก้ข้อมูล ---------- */ .adm-act { margin-top: 12px; } .adm-act .field { margin-bottom: 12px; } .adm-act .field input { padding-left: 16px; } .adm-act .btn[disabled] { opacity: .45; cursor: not-allowed; } .adm-edit-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 0 12px; } .adm-edit-grid .field { margin-bottom: 10px; } /* ---------- ผู้ถือครองไอเทม (ใน popup ของหน้าตรวจไอเทม) ---------- ★ .popup-body เป็นกริดหลายคอลัมน์ ถ้าไม่ห่อทั้งชุดไว้ในก้อนเดียวที่กินเต็มแถว หัวเรื่องกับกลุ่มผู้ถือจะกระจายไปคนละช่อง (เคยเป็นมาแล้ว) */ .adm-own-wrap { grid-column: 1 / -1; min-width: 0; } .adm-own-head { font-size: .88rem; color: var(--copy); margin: 0 0 12px; } .adm-own-load { font-size: .86rem; color: var(--copy); } .adm-own-none { font-size: .86rem; color: var(--copy); } .adm-own-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(238px, 1fr)); gap: 12px; align-items: start; } .adm-own-g { min-width: 0; padding: 12px 14px 13px; border-radius: 13px; background: rgba(255, 255, 255, .58); border: 1px solid rgba(255, 255, 255, .82); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9); } .adm-own-g h3 { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 0 0 9px; font-size: .9rem; word-break: break-word; } .adm-own-sum { flex: none; padding: 2px 8px; border-radius: 999px; font-family: var(--font-body); font-size: .68rem; font-weight: 700; color: var(--navy-soft); background: rgba(25, 107, 212, .08); border: 1px solid rgba(215, 229, 242, .9); } /* หน้าเต็ม (ปิด JS) — 4 ที่เก็บเรียงข้างกันในกลุ่มเดียว */ .adm-own { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px 16px; align-items: start; } .adm-own-c + .adm-own-c { margin-top: 9px; } .adm-own > .adm-own-c + .adm-own-c { margin-top: 0; } .adm-own-c h4 { margin: 0 0 4px; font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; color: var(--navy-soft); } .adm-own-l { list-style: none; margin: 0; padding: 0; } .adm-own-l li { display: flex; align-items: center; gap: 7px; padding: 4px 0; font-size: .8rem; color: var(--navy-soft); border-top: 1px solid rgba(215, 229, 242, .6); } .adm-own-l li:first-child { border-top: 0; } .adm-own-n { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; } .adm-own-dash { color: var(--copy); } .adm-own-rf { flex: none; padding: 1px 6px; border-radius: 6px; font-size: .7rem; font-weight: 700; color: var(--gold-deep); background: rgba(234, 184, 79, .18); border: 1px solid rgba(169, 124, 28, .3); } .adm-own-a { flex: none; font-size: .78rem; color: var(--navy); white-space: nowrap; } /* ป้ายสถานะที่หลังบ้านใช้เพิ่ม (ของเดิมมีแค่ .ok / .no) */ .tag.warn { background: rgba(234, 184, 79, .18); border: 1px solid rgba(169, 124, 28, .38); color: var(--gold-deep); } .tag.bad { background: rgba(216, 102, 63, .12); border: 1px solid rgba(216, 102, 63, .34); color: #a8451f; } /* ---------- ช่องเลือก (dropdown) ---------- ★ ของเดิมเป็น โดยตั้งใจ — mythos-horizontal.js ข้าม input ให้อยู่แล้ว การลากหัวเลื่อนจึงไม่ไปสั่งเปลี่ยน panel ★ ส่วนที่เล่นไปแล้วทาสีด้วย --p (JS อัปเดต) ต้องประกาศสีพื้นเรียบไว้ก่อน เบราว์เซอร์ที่ไม่รู้จัก custom property จะได้ยังเห็นราง */ .hv-seek, .hv-vol { -webkit-appearance: none; appearance: none; height: 14px; margin: 0; background: transparent; cursor: pointer; } .hv-seek { flex: 1 1 auto; min-width: 0; } .hv-vol { flex: 0 0 auto; width: 66px; } .hv-seek::-webkit-slider-runnable-track, .hv-vol::-webkit-slider-runnable-track { height: 4px; border-radius: 999px; background: rgba(255, 255, 255, .28); background: linear-gradient(90deg, var(--gold) 0 var(--p, 0%), rgba(255, 255, 255, .28) var(--p, 0%) 100%); } .hv-seek::-moz-range-track, .hv-vol::-moz-range-track { height: 4px; border-radius: 999px; background: rgba(255, 255, 255, .28); } .hv-seek::-moz-range-progress, .hv-vol::-moz-range-progress { height: 4px; border-radius: 999px; background: var(--gold); } .hv-seek::-webkit-slider-thumb, .hv-vol::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 12px; height: 12px; margin-top: -4px; border-radius: 50%; background: #fff; border: 2px solid var(--gold); box-shadow: 0 2px 6px rgba(9, 26, 48, .45); } .hv-seek::-moz-range-thumb, .hv-vol::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 2px solid var(--gold); box-shadow: 0 2px 6px rgba(9, 26, 48, .45); } .hv-seek:focus-visible, .hv-vol:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; } /* ---------- เต็มจอ ---------- */ .hv-frame:fullscreen { width: 100vw; height: 100vh; border-radius: 0; border: 0; } .hv-frame:fullscreen::after { display: none; } .hv-frame:-webkit-full-screen { width: 100vw; height: 100vh; border-radius: 0; } .hv-frame:fullscreen .hv-v { object-fit: contain; } /* ---------- จอกลาง : 861-1180px ---------- ★ ช่วงนี้ panel ยังไม่เลื่อนขึ้น-ลง (เลื่อนได้เฉพาะ <=860) และ grid ยุบเหลือคอลัมน์เดียว การ์ด hero + ปุ่มลัด + stat strip กินความสูงเกือบหมดจออยู่แล้ว ใส่วิดีโอเข้าไปอีก = หน้าแรกสูงเกิน 1 จอทันที (ผิดกติกาข้อ 2 ของโปรเจค) จึงซ่อนเฉพาะช่วงนี้ แล้วกลับมาแสดงอีกครั้งที่ <=860 ซึ่ง panel เลื่อนได้ */ @media (max-width: 1180px) { .hv { display: none; } /* ★ กฎ .has-video ด้านบนมี 3 คลาส จึงชนะกฎคอลัมน์เดียวของช่วงนี้ (บรรทัด ~2829) ต้องเขียนเจาะจงเท่ากันในมีเดียคิวรีด้วย ไม่งั้นมือถือยังเป็น 2 คอลัมน์ (specificity ไม่ใช่ลำดับ — บทเรียนเดียวกับ body.has-bg .hero-main.has-side) */ body.has-bg .hero-main.has-side.has-video { grid-template-columns: minmax(0, 1fr); } .hero-wrap.has-video { max-width: 1280px; } } @media (max-width: 860px) { /* .hero-side กลับเป็นคอลัมน์อยู่แล้วที่เบรกพอยต์นี้ — วิดีโอเต็มความกว้างช่อง */ .hv { display: block; max-width: 100%; } .hv-frame { border-radius: 18px; } .hv-frame::after { inset: 6px; border-radius: 12px; } .hv-big { width: 56px; height: 56px; margin: -28px 0 0 -28px; } .hv-bigico { width: 22px; height: 22px; } .hv-vol { display: none; } .hv-ctl { gap: 7px; padding: 22px 10px 9px; } .hv-tag { top: 10px; left: 10px; padding: 6px 10px; } } @media (max-width: 430px) { .hv-time { display: none; } } /* ผู้ใช้ตั้งค่าเครื่องว่าไม่ชอบภาพเคลื่อนไหว — หยุดวงกระเพื่อม/ป้ายเด้ง (JS ไม่เล่นอัตโนมัติให้ด้วย) */ @media (prefers-reduced-motion: reduce) { .hv-big::before, .hv-unmute { animation: none; } } /* ========================================================================== แบนเนอร์กิจกรรม หน้าแรก (home.php — ช่องขวาของ hero ใต้วิดีโอ) ========================================================================== ★ ทั้งใบเป็น ใบเดียว — กดตรงไหนก็ไปหน้าลงทะเบียน ★ ภาพต้นฉบับเกือบจัตุรัส (1369x1149) กรอบเป็นแนวนอน 2.4:1 จึงต้อง object-fit: cover + object-position จาก $hero_banner['focus'] (ยึดไว้ที่ท่อนข้อความ ไม่งั้นเห็นแต่หัวตัวละคร ไม่รู้ว่าโฆษณาอะไร) ★ ความสูงถูกจำกัดด้วย --hb-vh (% ของจอ) และ --hb-h (พิกเซล) เหมือนกรอบวิดีโอ ความกว้างคิดกลับจากความสูง x --hb-r แทนการล็อกความกว้างแล้วปล่อยให้สูงล้น (กติกาข้อ 2 ของโปรเจค: panel ต้องสูงไม่เกิน 1 จอ) ========================================================================= */ .hb { display: block; width: 100%; max-width: 100%; margin: 0 auto; text-decoration: none; color: inherit; } @supports (max-width: min(10px, 20px)) { .hb { max-width: min(100%, calc(var(--hb-h, 300px) * var(--hb-r, 2.5)), calc(var(--hb-vh, 24vh) * var(--hb-r, 2.5))); } } /* กรอบ — ชุดเดียวกับ .hv-frame (ขอบกระจก + เส้นทองบนหัว + เงาฟ้าเรือง ๆ) */ .hb-frame { position: relative; display: block; padding-top: 40%; /* 1 / 2.5 — ฐานให้เบราว์เซอร์ที่ไม่รู้จัก aspect-ratio */ overflow: hidden; border-radius: 22px; background: linear-gradient(160deg, #123456 0%, #0d2340 60%, #142e52 100%); border: 1px solid rgba(255, 255, 255, .72); box-shadow: 0 22px 50px rgba(16, 44, 86, .28), 0 0 38px rgba(25, 107, 212, .16), 0 2px 0 rgba(255, 255, 255, .55) inset; } @supports (aspect-ratio: 16 / 9) { .hb-frame { padding-top: 0; aspect-ratio: var(--hb-r, 2.5) / 1; } } .hb-frame::before { content: ''; position: absolute; z-index: 3; left: 16%; right: 16%; top: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--gold), transparent); pointer-events: none; } /* วงในบาง ๆ ให้ดูเป็นกรอบเดียวกับจอวิดีโอที่อยู่เหนือขึ้นไป */ .hb-frame::after { content: ''; position: absolute; z-index: 3; inset: 7px; border: 1px solid rgba(255, 255, 255, .18); border-radius: 15px; pointer-events: none; } .hb-img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; transition: transform .5s ease; } /* ป้ายทอง — บอกว่ากดได้ ★ วางมุมบนขวา ไม่ใช่ล่างขวา — ตัวหนังสือในภาพกินพื้นที่ตั้งแต่กลางลงไปจนถึงบรรทัด SEASON1 ป้ายที่ขอบล่างจะทับบรรทัดนั้นพอดี (ทดสอบด้วยภาพหน้าจอแล้ว) */ .hb-pill { position: absolute; z-index: 4; right: 14px; top: 13px; display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px; font-size: .78rem; font-weight: 700; line-height: 1; color: #23180a; background: linear-gradient(140deg, #f6d68a, var(--gold) 55%, #d9a63a); border: 1px solid rgba(255, 255, 255, .6); box-shadow: 0 8px 20px rgba(16, 44, 86, .34); transition: transform .18s ease, box-shadow .18s ease; } .hb:hover .hb-img, .hb:focus-visible .hb-img { transform: scale(1.045); } .hb:hover .hb-pill, .hb:focus-visible .hb-pill { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(16, 44, 86, .42), 0 0 18px rgba(234, 184, 79, .5); } .hb:focus-visible .hb-frame { outline: 3px solid var(--gold); outline-offset: 3px; } /* ชุดข้อความล้วน — ใช้เฉพาะช่วง 861-1180px ที่ซ่อนภาพไว้ (ดูเหตุผลท้ายไฟล์) */ .hb-flat { display: none; } /* ---------- จอกลาง : 861-1180px ---------- ★ ช่วงนี้ panel ยังเลื่อนขึ้น-ลงไม่ได้ และ .hero-side กลายเป็นแถวนอน (วิดีโอถูกซ่อนไปแล้วด้วยเหตุผลเดียวกัน) ใส่ภาพแบนเนอร์เข้าไปอีก = สูงเกิน 1 จอ จึงเหลือไว้เป็นแถบทองบรรทัดเดียว ผู้เล่นยังกดไปลงทะเบียนได้เหมือนกัน */ @media (max-width: 1180px) { .hb { flex: 1 1 auto; max-width: 100%; } .hb-frame { display: none; } .hb-flat { display: flex; align-items: center; gap: 10px; height: 100%; padding: 8px 14px; border-radius: 16px; background: linear-gradient(140deg, #f6d68a, var(--gold) 58%, #d9a63a); border: 1px solid rgba(255, 255, 255, .6); box-shadow: 0 12px 26px rgba(16, 44, 86, .18); color: #23180a; } .hb-flat-tx { min-width: 0; line-height: 1.2; } .hb-flat-tx b { display: block; font-size: .84rem; } .hb-flat-tx small { display: block; font-size: .62rem; letter-spacing: .12em; opacity: .78; } .hb-flat-go { margin-left: auto; flex: 0 0 auto; font-size: .78rem; font-weight: 700; white-space: nowrap; } .hb:hover .hb-flat { filter: brightness(1.05); } } /* ≤860 : panel เลื่อนขึ้น-ลงได้แล้ว เอาภาพกลับมาเต็มความกว้างช่อง ★ กรอบใช้ --hb-r ของภาพตรง ๆ ไม่บีบเป็นสัดส่วนอื่น ของเดิมล็อกไว้ 2.2:1 เพราะภาพใบก่อน (2.51:1) ถูกตัดแค่ขอบตัวละคร แบนเนอร์ใบปัจจุบันเป็นแถบยาว 5.47:1 เนื้อหาเต็มความกว้าง บีบเมื่อไหร่ข้อความหายทันที ★ ผลคือบนมือถือแบนเนอร์เตี้ยลง (จอ 390 ได้ราว 354x65) แลกกับการเห็นครบทั้งใบ */ @media (max-width: 860px) { .hb { max-width: 100%; } .hb-frame { display: block; border-radius: 18px; padding-top: calc(100% / var(--hb-r, 2.5)); } @supports (aspect-ratio: 16 / 9) { .hb-frame { padding-top: 0; aspect-ratio: var(--hb-r, 2.5) / 1; } } .hb-frame::after { inset: 6px; border-radius: 12px; } .hb-flat { display: none; } } /* เบราว์เซอร์เก่าที่ไม่มี backdrop-filter ไม่กระทบกรอบนี้ (พื้นเป็นสีทึบอยู่แล้ว) แต่ปิดภาพเคลื่อนไหวให้ตามค่าที่ผู้ใช้ตั้งไว้ */ @media (prefers-reduced-motion: reduce) { .hb-img, .hb-pill { transition: none; } .hb:hover .hb-img { transform: none; } } /* ========================================================================== ★ ช่องขวาสูงเท่าการ์ด "เริ่มตำนานของคุณ" เป๊ะ (≥1181px · เฉพาะตอนมีวิดีโอ) ========================================================================== วิดีโอชิดขอบบนของการ์ด · ปุ่มโซเชียลชิดขอบล่าง · แบนเนอร์ยืดกินที่ว่างตรงกลางทั้งหมด · .hero-main ตั้ง align-items:center ลูกจึงสูงเท่าเนื้อหาตัวเอง ต้องสั่ง align-self:stretch คืนให้ .hero-side ไม่งั้นไม่มีที่ว่างให้แบนเนอร์ยืด · .hv / .social-row เป็น flex:0 0 auto -> คงขนาดธรรมชาติ (วิดีโอยังเป็น 16:9 ตามความกว้างช่อง) · .hb เป็น flex:1 1 auto + min-height:0 -> ได้ที่ว่างที่เหลือทั้งก้อน กรอบข้างในจึง "ไม่มีสัดส่วนตายตัว" (aspect-ratio: auto) ภาพใช้ object-fit: cover ครอบเอา ★ ที่ว่างที่เหลือเปลี่ยนตามความสูงจอ/ความกว้างช่อง (จอใหญ่วิดีโอสูงขึ้น ที่ว่างจึงน้อยลง) ภาพแบนเนอร์ต้องออกแบบให้ "ข้อความอยู่กลางแนวตั้ง" ถึงจะรอดทุกจอ — ดูตัวเลขใน CLAUDE.md ========================================================================= */ @media (min-width: 1181px) { .hero-main.has-video .hero-side { align-self: stretch; min-height: 0; } .hero-main.has-video .hv, .hero-main.has-video .social-row { flex: 0 0 auto; } .hero-main.has-video .hb { flex: 1 1 auto; min-height: 0; max-width: 100%; /* ทับเพดาน min() ด้านบน — ความสูงมาจาก flex แล้ว */ display: flex; align-items: center; /* ★ ที่ว่างที่เหลือกระจายหัว-ท้ายเท่ากัน (ดูเหตุผลถัดไป) */ } /* ★ กรอบ "คงสัดส่วนของภาพเสมอ" ไม่ยืดเต็มที่ว่าง ของเดิมสั่ง height:100% + aspect-ratio:auto = กรอบเปลี่ยนสัดส่วนตามที่ว่างที่เหลือ (1.82:1 ที่จอ 1280 ถึง 5.47:1 ที่จอ 1920) แล้ว object-fit:cover ครอบภาพให้พอดี ★ ใช้ไม่ได้กับแบนเนอร์ใบปัจจุบันซึ่งเป็นแถบยาว 5.47:1 และมีเนื้อหาเต็มความกว้าง (โลโก้ซ้าย + ข้อความขวา) ที่จอ 1280 จะเหลือให้เห็นแค่กลางภาพ ~33% = อ่านไม่รู้เรื่อง จึงกลับเป็น "กว้างเต็มช่อง สูงคิดจาก --hb-r" แล้วหักด้วย max-height เมื่อที่ว่างไม่พอ -> ภาพครบทั้งใบทุกจอ · ที่ว่างส่วนเกินกลายเป็นระยะห่างระหว่างวิดีโอกับปุ่มโซเชียล */ .hero-main.has-video .hb-frame { width: 100%; height: auto; max-height: 100%; padding-top: calc(100% / var(--hb-r, 2.5)); } @supports (aspect-ratio: 16 / 9) { .hero-main.has-video .hb-frame { padding-top: 0; aspect-ratio: var(--hb-r, 2.5) / 1; } } } /* ---------- กรอบเปล่าโหมดสั่งทำภาพ ($hero_banner['placeholder'] => true) ---------- */ .hb.is-ph { cursor: default; } .hb.is-ph .hb-frame { background: linear-gradient(150deg, rgba(255, 255, 255, .5), rgba(232, 244, 255, .34)); border: 2px dashed var(--gold); box-shadow: 0 12px 30px rgba(16, 44, 86, .14); } .hb.is-ph .hb-frame::after { display: none; } .hb-ph { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; text-align: center; color: var(--navy); } .hb-ph b { font-family: var(--font-head); font-size: clamp(1.1rem, 2vw, 1.6rem); letter-spacing: .02em; font-variant-numeric: tabular-nums; } .hb-ph small { font-size: .68rem; color: var(--copy); } /* ========================================================================== ป้ายโปรโมชัน "สมัครก่อน CBT" — แผ่นทแยงมุมขวาบนของการ์ด hero (home.php) ========================================================================== ★ รูปทรงมาจากที่ผู้ใช้วาดมา (13 ส.ค. 2569): สามเหลี่ยมมุมขวาบน ด้านบนเต็มแนว · ด้านขวาเต็มแนว · ด้านทแยงลากจากขอบบนลงมาหาขอบขวา ★★ เป็น overlay ล้วน — ไม่กินความสูงของหน้าเลยสักพิกเซล (กติกาข้อ 2 ของโปรเจค: panel หน้าแรกต้องสูงไม่เกิน 1 จอ) ★★ ชื่อคลาสต้องเป็น .hpromo ห้ามย่อเป็น .hp เด็ดขาด member.php พิมพ์หลอดเลือดตัวละครเป็น อยู่ก่อนแล้ว (ดูกฎ .chd-track .hp) ตั้งชื่อชนกันเมื่อไหร่ กฎ position/clip-path ชุดนี้จะดึงหลอดเลือดหลุดออกจากราง ไปเกาะมุมขวาบนของ popup แล้วถูกตัดเป็นสามเหลี่ยม (หลอด SP ไม่โดน เพราะคนละคลาส) ★ ทำไมถึงวางได้โดยไม่ทับตัวหนังสือ — วัดขอบขวาสุดของเนื้อหาจริงในการ์ดทุกจอแล้ว ตัวเลขเต็ม ๆ อยู่ใน CLAUDE.md หัวข้อเดียวกัน ========================================================================= */ .hpromo { position: absolute; z-index: 3; top: 0; right: 0; width: var(--hpr-w, 57%); height: var(--hpr-h, 63%); display: block; text-decoration: none; color: var(--navy); /* ★★ พื้นของตัว = "สีของเส้นขอบทแยง" ไม่ใช่พื้นของป้าย แผ่นสีจริงอยู่ที่ ::before ซึ่งถูกเลื่อนขึ้น-ขวา 5px จึงเปิดให้เห็นพื้นนี้เป็นริมบาง ๆ เฉพาะแนวทแยงเส้นเดียว (อีกสองด้านถูก clip-path ของตัวเองตัดทิ้ง) ★ ทำแบบนี้เพราะเส้นทแยงคิดองศาไม่ได้ — สัดส่วนสามเหลี่ยมเปลี่ยนตามการ์ดทุกจอ จะวาดเส้นด้วย linear-gradient องศาตายตัวไม่ได้เลย */ background: linear-gradient(152deg, #f7dfa4, var(--gold) 46%, var(--gold-deep)); /* ★ ครึ่งที่โปร่งใสไม่รับคลิก — ปุ่มลัด/ตัวหนังสือใต้ป้ายจึงยังกดและลากเลือกได้ตามปกติ (ไม่ใส่ clip-path = กล่องสี่เหลี่ยมกินคลิกครึ่งการ์ด) */ -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%); clip-path: polygon(0 0, 100% 0, 100% 100%); } /* แผ่นสีจริงของป้าย — สามเหลี่ยมใบเดียวกันแต่เลื่อนขึ้น-ขวา ทำให้เหลือริมทองที่เส้นทแยง ★ ไล่สีจาก "มุมขวาบน" ออกไปทุกทิศ (radial) ไม่ใช่ linear ที่ล็อกองศาไว้ เพราะสัดส่วนของสามเหลี่ยมเปลี่ยนตามการ์ดทุกจอ — linear จะไล่ผิดแนวทันทีที่การ์ดเตี้ยลง ★ ปลายไล่สีหยุดที่ 92% ให้ยังเหลือสีจาง ๆ ตรงเส้นทแยง ขอบจะได้ไม่ตัดห้วน */ .hpromo::before { content: ''; position: absolute; z-index: 1; inset: 0; background: radial-gradient(128% 168% at 100% 0%, rgba(234, 184, 79, .95) 0%, rgba(246, 214, 138, .80) 32%, rgba(255, 244, 216, .48) 58%, rgba(255, 251, 240, .16) 92%); -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%); clip-path: polygon(0 0, 100% 0, 100% 100%); -webkit-transform: translate(5px, -5px); transform: translate(5px, -5px); transition: opacity .25s ease; } /* ภาพประดับในสามเหลี่ยม (ตั้งที่ $hero_promo['img'] — ปล่อยว่าง = ไม่มีภาพ) ★★ ภาพนี้ "ประดับล้วน" ห้ามมีตัวหนังสือในภาพ กรอบเป็นสามเหลี่ยมที่สัดส่วนเปลี่ยนตามจอ (1.26:1 ที่ 1284 ถึง 1.19:1 ที่ 1920) และ object-fit: cover ตัดทิ้งเสมอ — ตัวหนังสือในภาพจะโดนตัดหัวท้ายแน่นอน ★ มี mask ไล่จางไปทางเส้นทแยง ภาพจึงไม่ไปชนขอบล่างซ้ายจนดูเป็นแผ่นสี่เหลี่ยม */ .hpromo-art { position: absolute; /* ★★ ต้องอยู่ "ใต้" แผ่นไล่สี (::before z-index 1) ไม่ใช่บน แผ่นนั้นทึบ .95 ตรงมุมขวาบนแล้วจางลงเรื่อย ๆ ไปทางเส้นทแยง วางภาพไว้ใต้แผ่น = มุมที่มีตัวหนังสือถูกกลบเป็นพื้นทองสะอาดเสมอ ส่วนกลาง-ขอบทแยงภาพจะโผล่ขึ้นมาเอง โดยไม่ต้องเขียนกฎแยก ★ วางไว้บนแผ่น (z-index 2) เมื่อไหร่ = ตัวละครทับตัวหนังสือ CBT/สมัครฟรี ทันที */ z-index: 0; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; object-position: var(--hpr-pos, right top); opacity: var(--hpr-op, .55); pointer-events: none; /* ไล่จางลงตรงเส้นทแยง — ตัวละครจะได้ไม่ถูกตัดเป็นเส้นตรงห้วน ๆ ตรงขอบ ★ ไม่มี mask (เบราว์เซอร์เก่า) ก็ยังใช้ได้ แค่ขอบคมขึ้น ไม่ได้พัง */ -webkit-mask-image: radial-gradient(135% 165% at 100% 0%, #000 52%, rgba(0, 0, 0, .5) 78%, transparent 96%); mask-image: radial-gradient(135% 165% at 100% 0%, #000 52%, rgba(0, 0, 0, .5) 78%, transparent 96%); } /* แสงพาดวิ่ง — ให้ป้ายมีชีวิต ไม่ใช่แผ่นสีนิ่ง ๆ ★ อยู่ใต้ตัวหนังสือ (z-index 3 < 4) ไม่งั้นแสงขาวพาดทับข้อความแล้วอ่านไม่ออกช่วงหนึ่ง ★ ตัวมันไม่รับคลิก ปล่อยให้ รับเองทั้งใบ */ .hpromo::after { content: ''; position: absolute; z-index: 3; top: -20%; left: -60%; width: 45%; height: 140%; background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .62) 50%, rgba(255, 255, 255, 0) 100%); pointer-events: none; -webkit-animation: hpromoShine 5.4s ease-in-out infinite; animation: hpromoShine 5.4s ease-in-out infinite; } /* ★ หยุดยาวระหว่างรอบ (วิ่งจริงแค่ 22% ของเวลา) — วิ่งรัวจะกวนสายตาและแย่งความสนใจจากวิดีโอข้าง ๆ */ @-webkit-keyframes hpromoShine { 0% { -webkit-transform: translateX(0); } 22% { -webkit-transform: translateX(420%); } 100% { -webkit-transform: translateX(420%); } } @keyframes hpromoShine { 0% { transform: translateX(0); } 22% { transform: translateX(420%); } 100% { transform: translateX(420%); } } .hpromo:hover::before, .hpromo:focus::before { opacity: .82; } /* กล่องข้อความ — ตรึงมุมขวาบน ชิดขวา ★ ต้องเตี้ยและอยู่สูง เพราะสามเหลี่ยม "กว้างที่สุดตรงด้านบน" ยิ่งข้อความยาวลงล่าง ยิ่งเข้าใกล้เส้นทแยง (วัดแล้วเหลือระยะกันชน 38px ที่จอ 1284) */ .hpromo-in { position: absolute; z-index: 4; /* ★ ต้องสูงกว่าแผ่นสี (1) · ภาพ (2) · แสงพาด (3) */ top: clamp(12px, 1.5vw, 20px); right: clamp(14px, 1.7vw, 24px); max-width: 62%; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; text-align: right; } /* ★★ สีตัวอักษรต้องเป็นหมึกเข้มบนพื้นทอง — ห้ามใช้ var(--gold-deep) กล่องนี้เกาะ "มุมขวาบน" ซึ่งเป็นจุดเริ่มของไล่สีพอดี = พื้นเป็นทองเกือบทึบ ทองเข้มบนทองวัดได้ 1.5:1 อ่านไม่ออกเลย (ตัวอักษรก็เล็กแค่ 9-11px) · navy บนทอง = 7.4:1 ที่อื่นในเว็บใช้ --gold-deep บนพื้นกระจกซีด ไม่ใช่บนแผ่นทอง จึงไม่ใช่กรณีเดียวกัน */ .hpromo-k { font-size: clamp(.56rem, .72vw, .70rem); font-weight: 700; /* ★ letter-spacing กว้างกว่านี้ = กล่องข้อความกว้างขึ้นจนเฉียดเส้นทแยงที่จอ 1284 */ letter-spacing: .14em; color: var(--navy); opacity: .82; line-height: 1.1; } /* ★ nowrap ขาดไม่ได้ — ปล่อยให้ตัดบรรทัดเมื่อไหร่ กล่องจะสูงขึ้นแล้วล้ำเส้นทแยง */ .hpromo-t { font-family: var(--font-head); font-size: clamp(.82rem, 1.15vw, 1.18rem); font-weight: 700; line-height: 1.25; color: var(--navy); white-space: nowrap; } .hpromo-n { font-size: clamp(.6rem, .78vw, .72rem); font-weight: 600; color: var(--navy-soft); line-height: 1.2; white-space: nowrap; } .hpromo-go { margin-top: 5px; display: inline-flex; align-items: center; gap: 5px; padding: 5px 11px; border-radius: 999px; font-size: clamp(.66rem, .84vw, .84rem); font-weight: 700; line-height: 1; white-space: nowrap; color: #23180a; background: linear-gradient(140deg, #fbe7b4, var(--gold) 58%, #d9a63a); border: 1px solid rgba(255, 255, 255, .72); box-shadow: 0 6px 16px rgba(16, 44, 86, .26); transition: transform .18s ease, box-shadow .18s ease; } .hpromo:hover .hpromo-go, .hpromo:focus .hpromo-go { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(16, 44, 86, .34), 0 0 16px rgba(234, 184, 79, .55); } /* ★★ วง focus ต้องอยู่ที่กล่องข้างใน ไม่ใช่ที่ตัว outline ของ element ที่มี clip-path ถูกตัดหายทั้งวง (โฟกัสแล้วมองไม่เห็นว่าอยู่ตรงไหน) ★ เขียนด้วย :focus ก่อน แล้วค่อยถอนคืนด้วย :focus-visible เบราว์เซอร์เก่าที่ไม่รู้จัก :focus-visible (Safari ก่อน 15.4 · Firefox ก่อน 85) จะทิ้งกฎทั้งชุด ถ้าเขียนแต่ :focus-visible อย่างเดียว = คนใช้คีย์บอร์ดบนเครื่องพวกนั้นไม่เห็นวงโฟกัสเลย (เครื่องกลุ่มนี้รองรับ clip-path อยู่แล้ว บล็อก @supports ท้ายไฟล์จึงช่วยไม่ได้) */ .hpromo:focus { outline: 0; } .hpromo:focus .hpromo-in { outline: 3px solid var(--navy); outline-offset: 7px; border-radius: 10px; } .hpromo:focus:not(:focus-visible) .hpromo-in { outline: 0; } /* ========================================================================== ★★ ความลึกของสามเหลี่ยมต้องลดลงที่จอ 1280-1500 — ห้ามลืมข้อนี้ ========================================================================== ช่วงตั้งแต่ 1280px ขึ้นไป เมนูซ้ายเปลี่ยนจาก "ลิ้นชัก" เป็นแถบตรึงที่กินความกว้างจริง การ์ด hero จึงแคบลงฮวบ ขณะที่ย่อหน้าแนะนำกว้างคงที่ (max-width ~435px) เสมอ | viewport | การ์ด | ที่ว่างขวาของย่อหน้า | h ที่ใหญ่ที่สุดที่ยังไม่ทับ | |----------|---------|--------------------|------------------------| | 1284 | 472x535 | 37px <- แคบสุด | 45% | | 1384 | 521x498 | 86px | 60% | | 1484 | 570x506 | 135px | 71% | | 1634 | 645x506 | 210px | 80% | | 1920 | 739x506 | 304px | 80% | ★ ตั้ง h = 63% (ค่าที่ผู้ใช้วาดมา) ทั้งช่วง = ที่จอ 1284 ป้ายทับย่อหน้าลึก 49px จึงหักเหลือ 40% จนถึง 1500px แล้วค่อยคืนเป็นค่าเต็มที่จอกว้างกว่านั้น ★ เกณฑ์ 1501 ไม่ใช่ 1421 — เผื่อระยะกันชนไว้ (ที่ 1484 เพดานคือ 71% ซึ่งยังห่างจาก 63% พอควร) ========================================================================= */ @media (max-width: 1500px) { .hpromo { height: 40%; } /* ★ สามเหลี่ยมเตี้ยลงมาก ภาพเลยถูกซูมจนเห็นแค่ท่อนบนของตัวละคร ดูรกกว่าสวย หรี่ลงให้เหลือเป็นพื้นผิวจาง ๆ แทน ตัวหนังสือจะได้เด่นแทน */ .hpromo-art { opacity: calc(var(--hpr-op, .55) * .62); } } /* ---------- จอกลาง 861-1180px ---------- ★ ที่นี่เมนูซ้ายกลับเป็นลิ้นชัก การ์ดจึง "กว้างและเตี้ย" (วัดที่ 1100x820 ได้ 1012 x 425) ที่ว่างฝั่งขวาเหลือเฟือ แต่การ์ดเตี้ย จึงเพิ่ม % ความสูงคืนและหด % ความกว้างลง ไม่งั้นสามเหลี่ยมแบนจนดูเป็นแค่แถบสีพาดมุม */ @media (max-width: 1180px) { .hpromo { width: 44%; height: 62%; } } /* ---------- มือถือ 860px ลงมา : ซ่อนทั้งป้าย ---------- ★ วัดแล้วที่จอ 390 การ์ดเหลือ 354x410 และหัวเรื่องบรรทัดที่สองยาวถึง 333 จาก 354 (เหลือที่ว่างฝั่งขวาแค่ 21px) ใส่ป้ายลงไป = ทับตัวหนังสือแน่นอน ★ ผู้เล่นมือถือยังมีปุ่ม "สมัครสมาชิก" ในการ์ด + แถบเมนูล่าง + ปุ่ม Register บนแถบบน */ @media (max-width: 860px) { .hpromo { display: none; } } /* ---------- เบราว์เซอร์ที่ไม่รู้จัก clip-path ---------- ตกไปเป็นการ์ดสี่เหลี่ยมมุมขวาบนแทน (ไม่มีเส้นทแยง แต่ยังอ่านออกและกดได้) ★ ต้องหดความกว้างลงด้วย ไม่งั้นกล่องทึบจะทับหัวเรื่องที่จอ 1280 ★★ บล็อกนี้ต้องอยู่ "ท้ายสุด" หลังมีเดียคิวรีทุกอัน @supports กับ @media ไม่เพิ่มความเจาะจงเลย ตัวที่มาทีหลังในไฟล์เป็นตัวชนะ วางไว้ก่อน = พอจอแคบกว่า 1500 มีเดียคิวรีจะยัด width/height ของสามเหลี่ยมคืนเข้าไป กลายเป็นกล่องทึบไม่มี clip-path กินคลิกทับย่อหน้าแนะนำ ตรงข้ามกับที่บล็อกนี้มีไว้แก้ ★ จึงต้องพิมพ์กฎซ่อนมือถือซ้ำในนี้ด้วย ไม่งั้นบล็อกนี้ไปทับกฎ display:none ของ 860px */ @supports not ((clip-path: polygon(0 0, 100% 0, 100% 100%)) or (-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%))) { .hpromo { width: auto; height: auto; max-width: 42%; border-radius: 0 24px 0 16px; background: linear-gradient(150deg, rgba(246, 214, 138, .96), rgba(234, 184, 79, .86)); } /* ★ ไม่มี clip-path = ริมทองกับแสงพาดคำนวณจากรูปสามเหลี่ยมไม่ได้ ต้องถอดทั้งคู่ ไม่งั้น ::before ที่เลื่อน 5px จะโผล่พ้นกล่อง และแสงพาดวิ่งออกนอกขอบ */ .hpromo::before, .hpromo::after { display: none; } .hpromo-art { -webkit-mask-image: none; mask-image: none; opacity: .3; } .hpromo-in { position: static; max-width: none; padding: 12px 16px 14px; } @media (max-width: 860px) { .hpromo { display: none; } } } @media (prefers-reduced-motion: reduce) { .hpromo-go { transition: none; } .hpromo:hover .hpromo-go { transform: none; } /* ★ ถอดแสงพาดทิ้งทั้งอัน ไม่ใช่แค่ animation: none — ไม่งั้นแถบขาวค้างอยู่ตรงตำแหน่งเฟรมแรก */ .hpromo::after { display: none; } .hpromo::before { transition: none; } } /* ========================================================================== WELCOME POPUP — ป้ายประกาศตอนเข้าเว็บ (.wpop) ========================================================================== มาร์กอัปพิมพ์จาก mythos_welcome_popup() ใน system/shell_mythos.php ตั้งค่าภาพ/ข้อความ/ลิงก์ ที่ $welcome_popup ใน config_mythos.php ที่เดียว ★ ไม่ใช้ #popup-scrim ของ mythos-ui.js — .popup-body เป็นกริดหลายคอลัมน์ ภาพจัตุรัสจะไปนั่งคนละช่องกับหัวเรื่อง (บทเรียนเดียวกับ popup "ใครถือ" ของหลังบ้าน และกล่องดูภาพ .ls-lb ของหน้า Like & Share) ★ z-index 118 = สูงกว่าแถบบน (40) และม่านเปลี่ยนหน้า (90) แต่ต่ำกว่า .popup-scrim (120) เผื่อวันไหนมี popup อ่านย่อเปิดทับขึ้นมา ลำดับจะได้ไม่สลับ ========================================================================== */ .wpop { position: fixed; inset: 0; z-index: 118; display: flex; align-items: center; justify-content: center; /* เว้นแถบบน-ล่างเสมอ กติกาเดียวกับ .popup-scrim (ห้ามทับแถบเมนู) */ padding: calc(var(--bar-h) + 20px) var(--gutter) calc(var(--dock-h) + 18px); background: rgba(9, 26, 50, .58); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); opacity: 0; transition: opacity .26s ease; } .wpop[hidden] { display: none; } /* ปิด JS = ไม่มีใครถอด hidden = ไม่โผล่เลย */ .wpop.is-open { opacity: 1; } /** * ★ ความกว้างถูกจำกัดด้วย "ความสูงที่เหลือ" ด้วย — การ์ดเป็นภาพจัตุรัส * กว้างเท่าไรก็สูงเท่านั้น จอเตี้ย (โน้ตบุ๊ก 1366x768) จึงต้องหดกล่องลงเอง * ไม่งั้นภาพสูงเกินช่อง แล้วแถบชื่อ+ปุ่มใต้ภาพโดน overflow ของการ์ดตัดหายทั้งแถว * (เคยเป็นมาแล้วตอนตั้งตัวเลขมั่ว ๆ — ที่ 1366x768 เห็นแต่ภาพ ไม่มีปุ่ม) * * ที่ว่างแนวตั้งจริง = 100vh - แถบบน(76+20) - แถบล่าง(68+18) = 100vh - 182 * ในกล่องมีของอย่างอื่นอีก ~260px (หัวเรื่อง 100 · แถบใต้ภาพ 60 · ท้ายกล่อง 56 · ระยะขอบ 44) * -> ภาพกว้างได้ = 100vh - 442 · กล่องกว้าง = ภาพ x 2 + ช่องไฟ 14 + ขอบซ้ายขวา 44 * ★ เพิ่ม/ลดของในกล่องเมื่อไหร่ ต้องกลับมาแก้เลข 442 ด้วยเสมอ * ★ เบราว์เซอร์ที่ไม่รู้จัก min() ตกไปใช้ max-width บรรทัดบน ไม่พัง */ .wpop-box { position: relative; width: 100%; max-width: 880px; max-width: min(880px, calc((100vh - 442px) * 2 + 58px)); max-height: 100%; display: flex; flex-direction: column; padding: 22px 22px 18px; background: linear-gradient(158deg, rgba(255, 255, 255, .93) 0%, rgba(234, 244, 255, .86) 56%, rgba(255, 255, 255, .9) 100%); border: 1px solid rgba(255, 255, 255, .9); border-radius: 24px; box-shadow: 0 30px 74px rgba(9, 26, 50, .4), inset 0 1px 0 rgba(255, 255, 255, .95); backdrop-filter: blur(26px) saturate(1.6); -webkit-backdrop-filter: blur(26px) saturate(1.6); transform: translateY(14px) scale(.985); transition: transform .3s cubic-bezier(.22, .61, .36, 1); } .wpop.is-open .wpop-box { transform: none; } /* เส้นทองบาง ๆ ใต้ขอบบน — ป้ายนี้เป็นของประกาศ ต้องเด่นกว่าการ์ดทั่วไปนิดหน่อย */ .wpop-box::before { content: ""; position: absolute; left: 26px; right: 26px; top: 0; height: 3px; border-radius: 0 0 3px 3px; background: linear-gradient(90deg, transparent, var(--gold) 22%, #fff2cf 50%, var(--gold) 78%, transparent); } /* ปุ่มกากบาทเกาะมุมนอกกล่อง (แบบเดียวกับป้ายประกาศของเว็บเกมทั่วไป) ★ .wpop-box จึงห้ามใส่ overflow: hidden — ตัวเลื่อนอยู่ที่ .wpop-grid แทน */ .wpop-x { position: absolute; top: -15px; right: -15px; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; padding: 0; border: 2px solid #fff; border-radius: 50%; background: linear-gradient(180deg, var(--gold) 0%, var(--gold-deep) 100%); box-shadow: 0 8px 20px rgba(9, 26, 50, .34); color: #fff; cursor: pointer; transition: transform .18s ease, filter .18s ease; } .wpop-x svg { width: 17px; height: 17px; } .wpop-x:hover { transform: rotate(90deg) scale(1.06); filter: brightness(1.08); } .wpop-head { flex: 0 0 auto; text-align: center; padding: 2px 34px 14px; } .wpop-kick { display: inline-block; margin-bottom: 5px; padding: 3px 12px; border: 1px solid rgba(169, 124, 28, .34); border-radius: 999px; background: linear-gradient(180deg, rgba(234, 184, 79, .28), rgba(234, 184, 79, .12)); font-size: .64rem; font-weight: 700; letter-spacing: .2em; color: var(--gold-deep); } .wpop-title { margin: 0; font-family: var(--font-head); font-size: clamp(1.12rem, 2vw, 1.42rem); color: var(--navy); } .wpop-sub { margin: 4px 0 0; font-size: .84rem; color: var(--copy); } /* ตัวเลื่อนอยู่ที่นี่ (ไม่ใช่ที่กล่อง) — กล่องจะได้ปล่อยให้ปุ่มกากบาทเกาะมุมนอกได้ min-height: 0 ขาดไม่ได้ ไม่งั้น flex child ไม่ยอมหดต่ำกว่าเนื้อหาจริง แล้วกล่องล้นจอ */ .wpop-grid { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; /* ★ ขาดไม่ได้ — ค่าเริ่มต้น stretch จะยืดแถวเท่าความสูงช่อง แล้วการ์ดที่สูงกว่านั้นถูก overflow ของตัวเองตัดท้ายทิ้ง (แถบชื่อ + ปุ่มใต้ภาพหายทั้งแถว) แทนที่จะเลื่อนดูได้ */ gap: 14px; padding: 2px; } .wpop-grid.is-one { grid-template-columns: minmax(0, 1fr); max-width: 420px; margin: 0 auto; } .wpop-item { display: block; overflow: hidden; border: 1px solid rgba(255, 255, 255, .9); border-radius: 18px; background: rgba(255, 255, 255, .6); box-shadow: 0 10px 26px rgba(18, 54, 92, .16); color: inherit; text-decoration: none; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; } /* ★ ผูกกับ .wpop-item ไม่ใช่ a.wpop-item — การ์ดเป็น div แล้ว (ภาพกับปุ่มเป็นลิงก์คนละอัน) ชี้ตรงไหนของการ์ดก็ยกขึ้นทั้งใบเหมือนเดิม */ .wpop-item:hover { transform: translateY(-3px); border-color: rgba(234, 184, 79, .85); box-shadow: 0 16px 34px rgba(18, 54, 92, .26); } .wpop-art:focus, .wpop-go:focus { outline: 3px solid var(--blue); outline-offset: 3px; } .wpop-art:focus:not(:focus-visible), .wpop-go:focus:not(:focus-visible) { outline: none; } .wpop-art { display: block; position: relative; overflow: hidden; } .wpop-art img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; } /* ---- แสงพาดวิ่งผ่านภาพ (ชุดเดียวกับป้าย "สมัครไอดีรอเลย" มุมขวาบนของ hero) ---- ★ หยุดยาวระหว่างรอบ วิ่งจริงแค่ ~20% ของเวลา — วิ่งรัวจะกวนสายตาจนอ่านตัวหนังสือในภาพไม่ทัน ★ การ์ดใบที่ 2 หน่วงคนละจังหวะ (-3.1s) ไม่งั้นแสงวิ่งพร้อมกันสองใบ ดูเหมือนหน้าจอกระพริบ */ .wpop-art::after { content: ""; position: absolute; top: -20%; left: -60%; width: 42%; height: 140%; background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .5) 50%, rgba(255, 255, 255, 0) 100%); pointer-events: none; -webkit-animation: wpopShine 6s ease-in-out infinite; animation: wpopShine 6s ease-in-out infinite; } .wpop-item:nth-child(2) .wpop-art::after { animation-delay: -3.1s; } @-webkit-keyframes wpopShine { 0% { -webkit-transform: translateX(0); } 20% { -webkit-transform: translateX(420%); } 100% { -webkit-transform: translateX(420%); } } @keyframes wpopShine { 0% { transform: translateX(0); } 20% { transform: translateX(420%); } 100% { transform: translateX(420%); } } /* ---- ประกายวิบวับ (images/eyes.png ของธีมเก่า — ไฟล์เดียว 21x34 · 1.8 KB) ---- ★ ตัวภาพเป็นสีขาวเกือบล้วน วางบนแบนเนอร์ที่สว่างอยู่แล้วจะจมหายไปเลย จึงต้องมี drop-shadow เรืองแสงกำกับ และ mix-blend-mode: screen ให้สว่างทับพื้นได้ ★ หน่วงรายจุดด้วยค่าติดลบ = เริ่มกลางคาบตั้งแต่เฟรมแรก ไม่ยืนรอคิวตอนป้ายเพิ่งเปิด (กติกาเดียวกับปุ่มลัด .qd-b บนหน้าแรก) */ .wpop-fx { position: absolute; inset: 0; pointer-events: none; } .wpop-fx b { position: absolute; display: block; background: url(../../images/eyes.png) center/contain no-repeat; filter: drop-shadow(0 0 7px rgba(255, 255, 255, .95)); mix-blend-mode: screen; opacity: 0; -webkit-animation: wpopTwinkle 3.2s ease-in-out infinite; animation: wpopTwinkle 3.2s ease-in-out infinite; } /* วางไว้ริมภาพทั้งสามจุด — กลางภาพเป็นตัวหนังสือของแบนเนอร์ ห้ามไปบัง */ .wpop-fx b:nth-child(1) { left: 7%; top: 9%; width: 8%; padding-bottom: 13%; animation-delay: -.2s; } .wpop-fx b:nth-child(2) { right: 8%; top: 16%; width: 5.6%; padding-bottom: 9%; animation-delay: -1.4s; } .wpop-fx b:nth-child(3) { right: 14%; bottom: 12%; width: 4.6%; padding-bottom: 7.4%; animation-delay: -2.4s; } @-webkit-keyframes wpopTwinkle { 0%, 100% { opacity: 0; -webkit-transform: scale(.5) rotate(0deg); } 50% { opacity: .95; -webkit-transform: scale(1) rotate(8deg); } } @keyframes wpopTwinkle { 0%, 100% { opacity: 0; transform: scale(.5) rotate(0deg); } 50% { opacity: .95; transform: scale(1) rotate(8deg); } } .wpop-cap { display: flex; align-items: center; gap: 10px; padding: 10px 12px 11px; background: linear-gradient(180deg, rgba(255, 255, 255, .86), rgba(234, 244, 255, .7)); border-top: 1px solid rgba(255, 255, 255, .9); } .wpop-cap-t { flex: 1 1 auto; min-width: 0; } .wpop-cap-t b { display: block; font-size: .86rem; line-height: 1.35; color: var(--navy); } .wpop-cap-t small { display: block; margin-top: 2px; font-size: .74rem; line-height: 1.45; color: var(--copy); } .wpop-go { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px; padding: 7px 12px; border-radius: 999px; background: linear-gradient(180deg, var(--gold) 0%, var(--gold-deep) 100%); box-shadow: 0 6px 14px rgba(169, 124, 28, .34); font-size: .76rem; font-weight: 700; color: #fff; text-decoration: none; white-space: nowrap; transition: filter .18s ease; } .wpop-go:hover { filter: brightness(1.08); } .wpop-go svg { width: 14px; height: 14px; transition: transform .2s ease; } .wpop-item:hover .wpop-go svg { transform: translateX(3px); } .wpop-foot { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 14px; } .wpop-today { display: inline-flex; align-items: center; gap: 8px; font-size: .82rem; color: var(--copy); cursor: pointer; } .wpop-today input { width: 17px; height: 17px; accent-color: var(--blue); cursor: pointer; } .wpop-foot .btn { padding: 9px 20px; } /* ป้ายเปิดอยู่ = ล็อกไม่ให้หน้าหลังเลื่อน (คลาสของตัวเอง ไม่ยืม popup-open ของ mythos-ui.js เพราะตัวนั้นถูกถอดตอนปิด popup อ่านย่อ) */ body.wpop-open { overflow: hidden; } /* ---- จอแคบ : คอลัมน์เดียว + ปุ่มกากบาทย้ายเข้ามาในกล่อง ------------------ มุมนอกกล่องไม่มีที่เหลือแล้ว (ระยะข้างเหลือ 12px) ปล่อยไว้จะโดนขอบจอตัด */ @media (max-width: 860px) { .wpop { padding: calc(var(--bar-h) + 12px) 12px calc(var(--dock-h) + 12px); } .wpop-box { padding: 18px 14px 14px; border-radius: 20px; max-width: 100%; } .wpop-x { top: 8px; right: 8px; width: 34px; height: 34px; } .wpop-x svg { width: 15px; height: 15px; } .wpop-head { padding: 0 40px 12px; } /* ★ มือถือปัดข้างแทนการวางซ้อนลงมา — ภาพเป็นจัตุรัส 2 ใบเรียงลงมาสูงเกินจอทันที (วัดที่ 390x844 : ภาพ 334 x 2 ใบ + แถบชื่อ = 788px แต่ที่ว่างมีแค่ 696) ใบถัดไปโผล่ขอบมาให้เห็น ~14% = คนรู้เองว่าปัดต่อได้ ไม่ต้องมีป้ายบอก */ .wpop-grid { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 86%; gap: 12px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; padding-bottom: 6px; } .wpop-item { scroll-snap-align: center; } .wpop-grid.is-one { max-width: none; grid-auto-columns: 100%; } .wpop-foot { flex-wrap: wrap; justify-content: center; } .wpop-foot .btn { flex: 1 1 100%; justify-content: center; } } /* จอเตี้ยมาก (โน้ตบุ๊กจอเล็ก / มือถือแนวนอน) — บีบหัวกับท้ายลง ภาพจะได้ไม่โดนบีบ */ @media (max-height: 660px) { .wpop-head { padding-bottom: 10px; } .wpop-sub { display: none; } .wpop-cap-t small { display: none; } } @media (prefers-reduced-motion: reduce) { .wpop, .wpop-box, .wpop-x, .wpop-item, .wpop-go svg { transition: none; } .wpop-box { transform: none; } .wpop-x:hover { transform: none; } .wpop-item:hover { transform: none; } /* ★ ต้องถอดทิ้งทั้งชิ้น ไม่ใช่แค่ animation: none — ไม่งั้นแถบแสงกับประกาย ค้างอยู่ตรงตำแหน่งเฟรมแรกเป็นคราบขาวบนภาพ (บทเรียนเดียวกับ .hpromo::after) */ .wpop-art::after, .wpop-fx { display: none; } } /* เบราว์เซอร์ที่ไม่มี backdrop-filter ต้องยังอ่านออก (กติกาเดียวกับการ์ดกระจกใบอื่นทั้งเว็บ) */ @supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) { .wpop { background: rgba(9, 26, 50, .76); } .wpop-box { background: linear-gradient(158deg, #ffffff 0%, #eef6ff 100%); } }