/* ========================================================= ฟอนต์ Kanit เก็บไว้ในเว็บเอง (ไฟล์ตัวเดียวกับที่ fonts.gstatic.com เสิร์ฟ v17) เดิม ต้องต่อโดเมนนอก 2 โดเมนแล้วรอเป็นทอด ๆ HTML > css2 > woff2 น้ำหนักที่เว็บใช้จริง 400 500 600 700 800 + เอียง 400 (300 ไม่ได้ใช้เลย ตัดทิ้ง) ⚠️ ห้ามเอา .ttf จากคลัง github มา subset เอง คนละรุ่นกับที่ Google เสิร์ฟ วัดแล้วกว้างต่างกัน 3.6% ความสูงบรรทัด 48px -> 36px เลย์เอาต์ขยับทั้งเว็บ ⚠️ ไฟล์อยู่ที่ /fonts/ ระดับรากเว็บ ไม่ใช่ใต้ assets/ ========================================================= */ @font-face { font-family: 'Kanit'; font-style: italic; font-weight: 400; font-display: swap; src: url('/fonts/kanit-400-italic-thai.woff2') format('woff2'); unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC; } @font-face { font-family: 'Kanit'; font-style: italic; font-weight: 400; font-display: swap; src: url('/fonts/kanit-400-italic-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Kanit'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/kanit-400-thai.woff2') format('woff2'); unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC; } @font-face { font-family: 'Kanit'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/kanit-400-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Kanit'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/kanit-500-thai.woff2') format('woff2'); unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC; } @font-face { font-family: 'Kanit'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/kanit-500-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Kanit'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/kanit-600-thai.woff2') format('woff2'); unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC; } @font-face { font-family: 'Kanit'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/kanit-600-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Kanit'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/kanit-700-thai.woff2') format('woff2'); unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC; } @font-face { font-family: 'Kanit'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/kanit-700-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Kanit'; font-style: normal; font-weight: 800; font-display: swap; src: url('/fonts/kanit-800-thai.woff2') format('woff2'); unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC; } @font-face { font-family: 'Kanit'; font-style: normal; font-weight: 800; font-display: swap; src: url('/fonts/kanit-800-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* ========================================================= ระบบดีไซน์ของเว็บ ตัวแปรสี ฟอนต์ และสเกลระยะ ========================================================= */ /* ---------- 1. Design Tokens (ตัวแปรสี/ฟอนต์ เปลี่ยนที่เดียวทั้งเว็บ) ---------- */ :root { /* Palette — Dark Navy + Emerald + Gold */ --bg: #0F172A; /* dark navy หลัก */ --bg-deep: #0B1120; /* เข้มขึ้นสำหรับสลับ section */ --ink: #E2E8F0; /* ขาวอมฟ้าอ่อน — ข้อความหลัก */ --ink-soft: #94A3B8; /* เทาอมฟ้า — ข้อความรอง */ --accent: #10B981; /* เขียวมรกต (สว่างสำหรับพื้นดำ) */ --accent-soft: #34D399; /* เขียวอ่อน hover */ --accent-2: #E8AA3C; /* ทองอำพัน — สว่างขึ้นสำหรับพื้นดำ */ --accent-2-soft: #F5C842; /* ทองอ่อน */ --accent-2-dark: #C8891C; /* ทองเข้ม hover */ --line: #2D3748; /* เส้นขอบบนพื้นดำ */ --card: #1E293B; /* พื้นการ์ด dark slate */ --on-accent: #F8FAFC; /* ตัวอักษรบนพื้น accent */ /* Typography */ --font-display: 'Kanit', system-ui, -apple-system, sans-serif; --font-body: 'Kanit', system-ui, -apple-system, sans-serif; /* Spacing & shape */ --radius: 18px; --radius-sm: 10px; --container: 1240px; --gap: clamp(1rem, 3vw, 2rem); /* Motion */ --ease: cubic-bezier(0.22, 1, 0.36, 1); --dur: 250ms; } /* ---------- 2. Reset ---------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { font-family: var(--font-body); background: var(--bg); color: var(--ink); line-height: 1.65; font-size: 17px; -webkit-font-smoothing: antialiased; overflow-x: clip; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } a:visited { color: inherit; } button { font-family: inherit; cursor: pointer; border: none; background: none; } ul { list-style: none; } /* ---------- 3. Layout helpers ---------- */ .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: clamp(1.2rem, 4vw, 2.5rem); } .section { padding-block: clamp(3.5rem, 6.5vw, 5.5rem); } .section--deep { background: var(--bg-deep); } .section--compact { padding-block: clamp(2rem, 4vw, 3rem); } /* ---------- 4. Typography ---------- */ .display { font-family: var(--font-display); font-weight: 600; line-height: 1.14; letter-spacing: -0.01em; } h1.display { font-size: clamp(2.6rem, 5.5vw, 5rem); } h2.display { font-size: clamp(2rem, 4.5vw, 3.4rem); } .lead { font-size: clamp(1rem, 1.8vw, 1.15rem); color: var(--ink-soft); max-width: 56ch; } .text-accent { color: var(--accent); } /* ---------- 5. Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; padding: .95rem 1.8rem; border-radius: 100px; font-weight: 600; font-size: 1rem; transition: transform var(--dur) var(--ease), background var(--dur) var(--ease), color var(--dur) var(--ease); min-height: 48px; will-change: transform; } .btn svg { width: 18px; height: 18px; } .btn--primary { background: var(--accent); color: #fff; box-shadow: 0 10px 24px -10px rgba(16,185,129,.4); overflow: hidden; } .btn--primary::before { content: ""; position: absolute; top: 0; left: -100%; width: 60%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent); transform: skewX(-20deg); transition: left 0s; } .btn--primary:hover::before { left: 160%; transition: left .55s ease; } .btn--primary:hover { background: var(--accent-soft); transform: translateY(-2px); box-shadow: 0 14px 30px -10px rgba(16,185,129,.5); } .btn--ghost { background: transparent; color: var(--ink); border: 1.5px solid rgba(255,255,255,.18); } .btn--ghost:hover { border-color: rgba(255,255,255,.45); transform: translateY(-2px); } .btn--light { background: rgba(255,255,255,.08); color: var(--ink); border: 1.5px solid rgba(255,255,255,.12); } .btn--light:hover { background: rgba(255,255,255,.14); transform: translateY(-2px); } .link-arrow { display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; color: var(--accent); white-space: nowrap; flex-shrink: 0; transition: gap var(--dur) var(--ease); } .link-arrow svg { width: 17px; height: 17px; flex-shrink: 0; } .link-arrow:hover { gap: .75rem; } /* ---------- 6. Header / Nav ---------- */ #header-root { display: contents; } .site-header { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid transparent; transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease), transform .4s var(--ease), box-shadow var(--dur) var(--ease); } .site-header.scrolled { border-color: var(--line); box-shadow: 0 8px 30px -18px rgba(0,0,0,.6); animation: barDrop .45s var(--ease); } @keyframes barDrop { from { transform: translateY(-100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } } .nav { display: flex; align-items: center; justify-content: space-between; height: 76px; gap: 1.5rem; } .brand { display: flex; align-items: center; gap: .6rem; font-family: var(--font-display); font-weight: 600; font-size: 1.4rem; letter-spacing: -.02em; } .brand .mark { width: 38px; height: 38px; border-radius: 11px; background: var(--accent); color: var(--on-accent); display: grid; place-items: center; font-size: 1.15rem; } .nav-links { display: flex; align-items: center; gap: 2rem; } .nav-links a { font-size: .98rem; font-weight: 500; position: relative; padding-block: .25rem; transition: color var(--dur) var(--ease); } .nav-links a::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 0; height: 2px; background: var(--accent); transition: width var(--dur) var(--ease); } .nav-links a:hover, .nav-links a.is-active { color: var(--accent); } .nav-links a:hover::after, .nav-links a.is-active::after { width: 100%; } .nav-actions { display: flex; align-items: center; gap: .8rem; } .nav-toggle { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; } .nav-mobile-auth { display: none; } .nav-toggle span { width: 24px; height: 2px; background: var(--ink); position: relative; transition: var(--dur); } .nav-toggle span::before, .nav-toggle span::after { content: ""; position: absolute; left: 0; width: 24px; height: 2px; background: var(--ink); transition: var(--dur); } .nav-toggle span::before { top: -7px; } .nav-toggle span::after { top: 7px; } .nav-toggle.open span { background: transparent; } .nav-toggle.open span::before { top: 0; transform: rotate(45deg); } .nav-toggle.open span::after { top: 0; transform: rotate(-45deg); } /* ---------- 7. Marquee ---------- */ .marquee { overflow: hidden; background: #060D18; color: var(--on-accent); } .marquee__track { display: flex; gap: 0; white-space: nowrap; padding-block: 1rem; width: max-content; animation: marquee 28s linear infinite; will-change: transform; } .marquee__track span { font-family: var(--font-display); font-style: italic; font-size: 1.1rem; display: inline-flex; align-items: center; gap: 1rem; padding-inline: 1.5rem; } .marquee__track span::before { content: "✦"; font-style: normal; color: var(--accent-2); font-size: .8rem; } @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .marquee__track { animation: none !important; } .marquee { overflow: hidden; } } /* ---------- 8. Hero ---------- */ .hero { position: relative; overflow: hidden; display: flex; flex-direction: column; } .hero .container { position: relative; z-index: 1; } /* Aurora beam — เส้นแสงวิ่งช้าๆ */ @keyframes auroraMove { 0% { transform: translateX(-60%) translateY(-20%) rotate(-15deg); opacity: 0; } 20% { opacity: 1; } 80% { opacity: .7; } 100% { transform: translateX(120%) translateY(30%) rotate(-15deg); opacity: 0; } } @keyframes auroraMove2 { 0% { transform: translateX(120%) translateY(10%) rotate(12deg); opacity: 0; } 20% { opacity: .6; } 80% { opacity: .4; } 100% { transform: translateX(-60%) translateY(50%) rotate(12deg); opacity: 0; } } .hero__aurora { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; } .hero__aurora::before { content: ""; position: absolute; top: 20%; left: -30%; width: 55%; height: 160px; background: linear-gradient(90deg, transparent, rgba(16,185,129,.12), rgba(52,211,153,.18), rgba(232,170,60,.08), transparent); filter: blur(28px); border-radius: 100px; animation: auroraMove 12s ease-in-out infinite; } .hero__aurora::after { content: ""; position: absolute; top: 55%; left: 0; width: 45%; height: 100px; background: linear-gradient(90deg, transparent, rgba(232,170,60,.1), rgba(16,185,129,.1), transparent); filter: blur(24px); border-radius: 100px; animation: auroraMove2 18s ease-in-out infinite 4s; } /* หัวหน้าแรก คอลัมน์เดียวจัดกลาง เดิมเป็นสองคอลัมน์ ขวาเป็นการ์ดตัวอย่างผลสอบ ซึ่งถอดออกไปตอนไล่ของที่คิดขึ้นเอง ทิ้งไว้สองคอลัมน์แล้วขวาโล่งครึ่งจอ จึงเปลี่ยนเป็นคอลัมน์เดียวจัดกลาง ถ้าจะกลับไปสองคอลัมน์ ต้องมีของจริงมาใส่ฝั่งขวา ห้ามใส่ตัวเลขที่ยืนยันไม่ได้ */ .hero__grid { display: grid; grid-template-columns: 1fr; justify-items: center; gap: clamp(2rem, 5vw, 5rem); align-items: center; min-height: min(88vh, 820px); padding-block: clamp(4.5rem, 8vw, 6.5rem) clamp(3rem, 5vw, 4rem); position: relative; z-index: 1; } .hero__copy { text-align: center; max-width: 880px; } .hero__copy .hero__title { font-size: clamp(2.4rem, 5vw, 4.1rem); } .hero__copy .lead { margin: 1.8rem auto 0; max-width: 52ch; color: rgba(226,232,240,.72); font-size: clamp(.95rem, 1.6vw, 1.1rem); line-height: 1.8; } .hero__copy .hero__cta { justify-content: center; margin-top: 2.4rem; gap: 1rem; } .hero__copy .hero__proof { justify-content: center; margin-top: 2rem; } /* RIGHT mock UI */ /* float animations */ @media (max-width: 900px) { .hero__grid { grid-template-columns: 1fr; min-height: auto; padding-block: 7rem 3rem; } } /* glow ใต้ headline */ .hero__title { position: relative; margin: .9rem 0; } .hero__title::after { content: ""; position: absolute; bottom: -32px; left: 50%; transform: translateX(-50%); width: 78%; height: 70px; background: radial-gradient(ellipse at center, rgba(16,185,129,.18) 0%, transparent 70%); pointer-events: none; filter: blur(18px); } /* Stats bar WSI-style */ .hero__stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); text-align: center; } .hero__stat b { font-family: var(--font-display); font-size: clamp(2rem, 4vw, 3rem); font-weight: 700; color: var(--accent-2); display: block; line-height: 1; letter-spacing: -0.02em; } .hero__stat span { font-size: .85rem; color: var(--ink-soft); margin-top: .5rem; display: block; } @media (max-width: 640px) { .hero__stats { grid-template-columns: repeat(2, 1fr); } } /* hero background decoration */ .hero__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; } .hero__bg .grid-lines { position: absolute; inset: 0; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 66px 66px; opacity: .5; -webkit-mask-image: radial-gradient(circle at 32% 38%, #000 0%, transparent 68%); mask-image: radial-gradient(circle at 32% 38%, #000 0%, transparent 68%); } .hero__bg .blob { position: absolute; border-radius: 50%; filter: blur(72px); opacity: .45; } .hero__bg .blob.b1 { width: 440px; height: 440px; background: var(--accent-soft); top: -130px; right: -70px; opacity: .35; animation: floatBlob1 15s var(--ease) infinite; } .hero__bg .blob.b2 { width: 380px; height: 380px; background: var(--accent-2-soft); bottom: -150px; left: -70px; opacity: .4; animation: floatBlob2 18s var(--ease) infinite; } .hero__bg .star { position: absolute; color: var(--accent-2); opacity: .55; } .hero__bg .star.s2 { bottom: 24%; left: 12%; width: 16px; opacity: .35; animation: spin 30s linear infinite reverse; } @keyframes floatBlob1 { 50% { transform: translate(-34px, 34px) scale(1.12); } } @keyframes floatBlob2 { 50% { transform: translate(30px, -22px) scale(1.06); } } @keyframes spin { to { transform: rotate(360deg); } } /* handwritten highlight under a word */ .hl { position: relative; color: var(--accent-2); white-space: nowrap; display: inline-block; } .hl svg { position: absolute; left: -2%; bottom: -.14em; width: 104%; height: .34em; color: var(--accent-2); overflow: visible; opacity: .92; } .hl svg path { stroke-dasharray: 320; stroke-dashoffset: 320; } .reveal.in .hl svg path { animation: drawLine 1.1s var(--ease) .5s forwards; } @keyframes drawLine { to { stroke-dashoffset: 0; } } /* social proof */ .hero__proof { display: inline-flex; align-items: center; gap: .75rem; margin-top: 2rem; padding: .65rem 1.2rem; border-radius: 100px; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.05); font-size: .92rem; color: rgba(255,255,255,.65); } .hero__proof b { color: #fff; font-weight: 600; } .hero__proof-stars { display: flex; gap: 2px; color: var(--accent-2); flex-shrink: 0; } .hero__proof-stars svg { width: 14px; height: 14px; } /* floating pills around panel */ @keyframes floaty { 50% { transform: translateY(-12px); } } .hero__title { margin: .9rem 0; } .hero__cta { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 1.2rem; } /* exam panel */ .exam-timer { display: inline-flex; align-items: center; gap: .3rem; background: color-mix(in srgb, var(--on-accent) 14%, transparent); border-radius: 100px; padding: .38rem .75rem; font-size: .92rem; font-weight: 700; font-variant-numeric: tabular-nums; flex-shrink: 0; } .exam-timer svg { width: 14px; height: 14px; opacity: .7; } @keyframes blink { 50% { opacity: 0; } } .exam-q { margin-bottom: 1rem; } .exam-q__num { font-size: .76rem; opacity: .6; margin-bottom: .35rem; } .exam-q__text { font-size: .97rem; line-height: 1.6; font-weight: 500; } .exam-choices { display: grid; grid-template-columns: 1fr 1fr; gap: .45rem; margin-bottom: .9rem; } .ec { padding: .55rem .75rem; border-radius: 8px; border: 1.5px solid color-mix(in srgb, var(--on-accent) 22%, transparent); font-size: .88rem; } .ec--sel { background: var(--accent-2); color: #2A1E08; border-color: var(--accent-2); font-weight: 700; } .exam-nav { display: flex; justify-content: space-between; align-items: center; padding-top: .8rem; border-top: 1px solid color-mix(in srgb, var(--on-accent) 20%, transparent); font-size: .84rem; } /* ---------- 9. Feature cards ---------- */ .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); } .feature { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 2.4rem 2.2rem 2.2rem; position: relative; overflow: hidden; transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease); } /* decorative number */ .feature::before { content: attr(data-num); position: absolute; top: -8px; right: 1.4rem; font-size: 7rem; font-weight: 800; line-height: 1; color: var(--accent-2); opacity: .07; font-family: var(--font-display); letter-spacing: -0.04em; pointer-events: none; user-select: none; transition: opacity .3s var(--ease); } /* gradient accent line */ .feature::after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease); } /* hover state */ .feature:hover { border-color: rgba(16,185,129,.35); box-shadow: 0 0 0 1px rgba(16,185,129,.12), 0 8px 24px -8px rgba(0,0,0,.4), 0 0 40px -20px rgba(16,185,129,.2); } .feature:hover::after { transform: scaleX(1); } .feature:hover::before { opacity: .14; } /* icon container */ .feature .ic { width: 60px; height: 60px; border-radius: 16px; margin-bottom: 1.6rem; background: rgba(16,185,129,.12); border: 1px solid rgba(16,185,129,.22); color: var(--accent); display: grid; place-items: center; transform: scale(0.75) rotate(-8deg); opacity: 0; transition: transform .45s var(--ease), opacity .45s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease); } /* icon entrance when scroll reveal fires */ .feature.reveal.in .ic { transform: scale(1) rotate(0deg); opacity: 1; } .feature.reveal.in:nth-child(1) .ic { transition-delay: .05s; } .feature.reveal.in:nth-child(2) .ic { transition-delay: .15s; } .feature.reveal.in:nth-child(3) .ic { transition-delay: .25s; } .feature:hover .ic { background: rgba(16,185,129,.2); border-color: rgba(16,185,129,.4); box-shadow: 0 0 24px -6px rgba(16,185,129,.35); transform: scale(1.08) rotate(-4deg); } .feature .ic svg { width: 28px; height: 28px; } .feature h3 { font-size: 1.25rem; margin-bottom: .65rem; font-weight: 700; } .feature p { color: var(--ink-soft); font-size: .97rem; line-height: 1.75; } /* ---------- 10. Section heading row ---------- */ .head-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; margin-bottom: clamp(2rem, 4vw, 3.2rem); flex-wrap: wrap; } .head-row .lead { margin-top: .8rem; } .head-row--center { flex-direction: column; align-items: center; text-align: center; } .head-row--center .lead { max-width: 58ch; margin-top: .8rem; } /* ---------- 11. Course cards ---------- */ .grid-courses { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); } .course { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease); display: flex; flex-direction: column; position: relative; cursor: pointer; } /* gradient line บนสุด */ .course::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; z-index: 4; background: linear-gradient(90deg, var(--accent), var(--accent-2)); transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease); } /* radial glow พื้นหลัง */ .course::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(ellipse at top, rgba(16,185,129,.06) 0%, transparent 65%); opacity: 0; transition: opacity .3s var(--ease); } .course:hover { transform: translateY(-8px); border-color: rgba(16,185,129,.32); box-shadow: 0 0 0 1px rgba(16,185,129,.1), 0 24px 48px -16px rgba(0,0,0,.5), 0 0 36px -18px rgba(16,185,129,.22); } .course:hover::before { transform: scaleX(1); } .course:hover::after { opacity: 1; } .course__cover { aspect-ratio: 16/10; position: relative; display: grid; place-items: center; color: var(--on-accent); overflow: hidden; transition: transform .45s var(--ease); } .course:hover .course__cover { transform: scale(1.03); } .course__cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(0,0,0,.18) 0%, transparent 60%, rgba(0,0,0,.28) 100%); z-index: 1; } .course__cover svg.bg { position: absolute; inset: 0; width: 100%; height: 100%; } .course__tag { position: absolute; top: 1rem; left: 1rem; background: rgba(0,0,0,.62); backdrop-filter: blur(6px); color: #F1F5F9; font-size: .76rem; font-weight: 600; padding: .35rem .75rem; border-radius: 100px; z-index: 3; } .course__cover .subj { position: relative; z-index: 2; width: 72px; height: 72px; border-radius: 50%; background: rgba(255,255,255,.15); backdrop-filter: blur(8px); border: 1.5px solid rgba(255,255,255,.3); display: grid; place-items: center; font-family: var(--font-display); font-size: 1.6rem; font-weight: 700; color: rgba(255,255,255,.9); } .course__cover .subj svg { width: 32px; height: 32px; transform: scale(0.7) translateY(10px); opacity: 0; transition: transform .5s var(--ease), opacity .5s var(--ease); } .course.reveal.in .subj { transform: scale(1) translateY(0); opacity: 1; } .course.reveal.in:nth-child(1) .subj { transition-delay: .1s; } .course.reveal.in:nth-child(2) .subj { transition-delay: .2s; } .course.reveal.in:nth-child(3) .subj { transition-delay: .3s; } .course__cover .subj-icon { position: relative; z-index: 2; width: 72px; height: 72px; border-radius: 50%; background: rgba(255,255,255,.1); backdrop-filter: blur(8px); border: 1.5px solid rgba(255,255,255,.2); display: grid; place-items: center; transform: scale(0.7) translateY(10px); opacity: 0; transition: transform .5s var(--ease), opacity .5s var(--ease); } .course__cover .subj-icon svg { width: 30px; height: 30px; } .course.reveal.in .subj-icon { transform: scale(1) translateY(0); opacity: 1; } .course.reveal.in:nth-child(1) .subj-icon { transition-delay: .1s; } .course.reveal.in:nth-child(2) .subj-icon { transition-delay: .2s; } .course.reveal.in:nth-child(3) .subj-icon { transition-delay: .3s; } .course.reveal.in:nth-child(4) .subj-icon { transition-delay: .15s; } .course.reveal.in:nth-child(5) .subj-icon { transition-delay: .25s; } .course.reveal.in:nth-child(6) .subj-icon { transition-delay: .35s; } .course__body { padding: 1.5rem; display: flex; flex-direction: column; gap: .6rem; flex: 1; } .course__meta { display: flex; gap: 1rem; font-size: .82rem; color: var(--ink-soft); } /* ข้อมูลย่อยในการ์ดคอร์ส ใช้เส้นคั่นบาง ๆ แทนจุดกลางที่เคยพิมพ์ไว้ในหน้า */ .course__meta > span + span::before { content: ""; width: 1px; height: 11px; background: currentColor; opacity: .3; margin-right: .55rem; display: inline-block; vertical-align: -1px; } .course__meta span { display: inline-flex; align-items: center; gap: .35rem; } .course__body h3 { font-size: 1.18rem; font-weight: 600; line-height: 1.4; } .course__foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; padding-top: .8rem; border-top: 1px solid var(--line); } .course__price { font-family: var(--font-display); font-size: 1.35rem; font-weight: 800; color: var(--accent-2); letter-spacing: -0.02em; } .course.is-hidden { display: none; } /* ---------- 11b. Inner page hero + breadcrumb + filter ---------- */ .page-hero { position: relative; padding-block: clamp(5rem, 11vw, 8rem) clamp(3rem, 5vw, 4.5rem); overflow: hidden; background: linear-gradient(155deg, rgba(10,28,22,.95) 0%, var(--bg) 55%); } .page-hero::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 66px 66px; opacity: .22; -webkit-mask-image: radial-gradient(ellipse 80% 60% at 60% 40%, #000 0%, transparent 70%); mask-image: radial-gradient(ellipse 80% 60% at 60% 40%, #000 0%, transparent 70%); } .page-hero::after { content: ""; position: absolute; top: -15%; right: -8%; width: 680px; height: 680px; background: radial-gradient(circle, rgba(16,185,129,.09) 0%, transparent 65%); pointer-events: none; } .page-hero .container { position: relative; z-index: 1; } .page-hero__glow { position: absolute; bottom: -10%; left: 8%; width: 420px; height: 420px; background: radial-gradient(circle, rgba(232,170,60,.06) 0%, transparent 65%); pointer-events: none; } /* mini step pills ใน hero วิธีใช้งาน */ .hero-steps { display: flex; align-items: center; gap: .75rem; margin-top: 2.2rem; flex-wrap: wrap; } .hero-step { display: flex; align-items: center; gap: .55rem; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: 100px; padding: .45rem .9rem .45rem .55rem; backdrop-filter: blur(6px); transition: border-color .25s var(--ease), background .25s var(--ease); } .hero-step:hover { border-color: rgba(16,185,129,.35); background: rgba(16,185,129,.07); } .hero-step--final { border-color: rgba(232,170,60,.3); background: rgba(232,170,60,.07); } .hero-step--final .hero-step__num { background: var(--accent-2); color: #1A1000; } .hero-step__num { width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0; background: rgba(16,185,129,.2); color: var(--accent); font-size: .72rem; font-weight: 800; display: grid; place-items: center; letter-spacing: .02em; } .hero-step__label { font-size: .85rem; font-weight: 600; color: var(--ink); white-space: nowrap; } .hero-step__arrow { width: 16px; height: 16px; color: var(--ink-soft); opacity: .5; flex-shrink: 0; } .page-hero__stats { display: flex; gap: clamp(1.5rem,4vw,3rem); margin-top: 2.2rem; } .page-hero__stats .stat-item { display: flex; flex-direction: column; gap: .2rem; } .page-hero__stats .stat-num { font-family: var(--font-display); font-size: clamp(1.4rem,2.5vw,1.9rem); font-weight: 800; color: var(--accent); letter-spacing: -0.03em; } .page-hero__stats .stat-num span { color: var(--accent-2); } .page-hero__stats .stat-label { font-size: .78rem; color: var(--ink-soft); font-weight: 500; letter-spacing: .04em; text-transform: uppercase; } .breadcrumb { display: flex; align-items: center; gap: .5rem; font-size: .9rem; color: var(--ink-soft); margin-bottom: 1.2rem; } .breadcrumb a:hover { color: var(--accent); } .breadcrumb svg { width: 14px; height: 14px; opacity: .6; } .page-hero h1 { margin-bottom: 1rem; } .filter-bar { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: clamp(2rem, 4vw, 3rem); } .chip { padding: .6rem 1.2rem; border-radius: 100px; border: 1.5px solid rgba(255,255,255,.15); background: transparent; font-size: .92rem; font-weight: 500; color: var(--ink); transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease); } .chip:hover { border-color: rgba(255,255,255,.4); } .chip.active { background: var(--accent); border-color: var(--accent); color: #fff; } /* FAQ accordion */ .faq { max-width: 780px; margin: 0 auto; display: flex; flex-direction: column; gap: 0; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: 0 18px 40px -28px rgba(0,0,0,.45); } .faq__item { background: transparent; border: 0; overflow: hidden; transition: background .3s var(--ease); } .faq__item + .faq__item { border-top: 1px solid var(--line); } .faq__item[open] { background: rgba(16,185,129,.04); } .faq__item summary { display: flex; justify-content: space-between; align-items: center; gap: 1rem; cursor: pointer; padding: 1.3rem 1.5rem; font-size: 1rem; font-weight: 600; list-style: none; transition: color .25s var(--ease), background .25s var(--ease); position: relative; } .faq__item summary::-webkit-details-marker { display: none; } /* chevron icon */ .faq__item summary::after { content: ""; width: 20px; height: 20px; flex-shrink: 0; background: currentColor; mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); mask-repeat: no-repeat; mask-size: contain; color: var(--accent); transition: transform .3s var(--ease); } .faq__item[open] summary::after { transform: rotate(180deg); } .faq__item[open] summary { color: var(--accent); background: rgba(16,185,129,.05); } .faq__item summary:hover { color: var(--accent); } .faq__item summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: inherit; } /* gradient line ด้านซ้ายตอน open */ .faq__item[open] summary::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: linear-gradient(180deg, var(--accent), var(--accent-2)); border-radius: 0 2px 2px 0; } .faq__item p { color: var(--ink-soft); font-size: .95rem; line-height: 1.75; padding: 0 1.5rem 1.4rem; max-width: 68ch; } .faq-contact { max-width: 780px; margin: 1.8rem auto 0; color: var(--ink-soft); font-size: .94rem; text-align: center; } .faq-contact a { color: var(--accent); font-weight: 600; } .faq-contact a:hover { text-decoration: underline; } /* About page */ .story-quote { margin-top: 1.75rem; padding: 1rem 1.25rem; border-left: 3px solid var(--accent); background: rgba(16,185,129,.06); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; } .story-quote p { color: var(--ink); font-size: 1rem; font-style: italic; line-height: 1.6; } .story-quote cite { display: block; margin-top: .45rem; font-size: .8rem; color: var(--accent); font-style: normal; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; } .stat-strip { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 3rem; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); } .stat-strip__item { padding: 1.5rem 1.25rem; background: var(--card); text-align: center; } .stat-strip__item + .stat-strip__item { border-left: 1px solid var(--line); } .stat-strip__num { font-family: var(--font-display); font-size: clamp(1.8rem, 3vw, 2.4rem); font-weight: 600; color: var(--accent); display: block; line-height: 1; } .stat-strip__label { color: var(--ink-soft); font-size: .85rem; margin-top: .4rem; display: block; } @media (max-width: 640px) { .stat-strip { grid-template-columns: repeat(2, 1fr); } .stat-strip__item:nth-child(3), .stat-strip__item:nth-child(4) { border-top: 1px solid var(--line); } .stat-strip__item:nth-child(3) { border-left: none; } } /* Form fields (ใช้ร่วม contact + login + register) */ .field { margin-bottom: 1.1rem; } .field label { display: block; font-size: .9rem; font-weight: 600; margin-bottom: .45rem; } .field input, .field select, .field textarea { width: 100%; font-family: inherit; font-size: 1rem; color: var(--ink); background: rgba(255,255,255,.05); border: 1.5px solid rgba(255,255,255,.12); border-radius: var(--radius-sm); padding: .85rem 1rem; transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } .field textarea { resize: vertical; min-height: 110px; } .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent); } .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } /* Contact */ .contact-grid { display: grid; grid-template-columns: 1.3fr .7fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: start; } .contact-form { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1.5rem, 3vw, 2.5rem); } .contact-info { display: flex; flex-direction: column; gap: 1.4rem; } @media (max-width: 880px) { .contact-grid { grid-template-columns: 1fr; } } @media (max-width: 520px) { .field-row { grid-template-columns: 1fr; } } /* Auth pages (login / register) */ .auth { min-height: 100vh; height: 100vh; display: grid; grid-template-columns: 1fr 1fr; } .auth__form-side { display: flex; align-items: center; justify-content: center; padding: clamp(2rem, 5vw, 4rem); } .auth__box { width: 100%; max-width: 420px; } .auth__box h1 { font-size: clamp(1.8rem, 4vw, 2.4rem); margin-bottom: .5rem; } .auth__box .sub { color: var(--ink-soft); margin-bottom: 2rem; } .auth__box .alt { text-align: center; margin-top: 1.5rem; color: var(--ink-soft); font-size: .95rem; } .auth__box .alt a { color: var(--accent); font-weight: 600; } .auth__box .alt a:hover { text-decoration: underline; } .auth__row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.4rem; font-size: .9rem; } .auth__row label { display: flex; align-items: center; gap: .5rem; color: var(--ink-soft); cursor: pointer; } .auth__row a { color: var(--accent); font-weight: 600; } /* Password toggle */ .password-wrap { position: relative; } .password-wrap input { padding-right: 2.8rem; } .pwd-toggle { position: absolute; right: .75rem; top: 50%; transform: translateY(-50%); background: none; border: none; padding: .25rem; cursor: pointer; color: var(--ink-soft); display: flex; align-items: center; transition: color var(--dur) var(--ease); } .pwd-toggle:hover { color: var(--ink); } .pwd-toggle svg { width: 18px; height: 18px; } /* Spin keyframe for loading button */ @keyframes spin { to { transform: rotate(360deg); } } .auth__aside { position: relative; background: linear-gradient(145deg, #0D1F1A 0%, #0D3324 100%); color: var(--on-accent); display: flex; flex-direction: column; justify-content: center; padding: clamp(2.5rem, 5vw, 4.5rem); overflow: hidden; } .auth__aside h2 { font-family: var(--font-display); font-size: clamp(1.8rem, 3.5vw, 2.6rem); font-weight: 600; line-height: 1.18; margin: 1rem 0 1.5rem; } .auth__aside .point { display: flex; align-items: center; gap: .7rem; margin-bottom: .9rem; } .auth__aside .point svg { width: 22px; height: 22px; flex-shrink: 0; color: var(--accent-2-soft); } .auth__aside .ring { position: absolute; border: 1px solid color-mix(in srgb, var(--on-accent) 16%, transparent); border-radius: 50%; } .auth__aside .ring.r1 { width: 360px; height: 360px; top: -140px; right: -120px; } .auth__aside .ring.r2 { width: 480px; height: 480px; bottom: -260px; left: -140px; } .auth__brand { display: inline-flex; align-items: center; gap: .6rem; font-family: var(--font-display); font-weight: 600; font-size: 1.3rem; margin-bottom: 2rem; position: relative; z-index: 1; } .auth__brand .mark { width: 36px; height: 36px; border-radius: 10px; background: var(--bg); color: var(--accent); display: grid; place-items: center; } .auth__aside .inner { position: relative; z-index: 1; } @media (max-width: 860px) { .auth { grid-template-columns: 1fr; } .auth__aside { display: none; } } /* ===== Dashboard Showcase (จุดขายหลักหน้าแรก) ===== */ .showcase__grid { display: grid; grid-template-columns: .92fr 1.08fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; } .showcase__copy h2 { margin: 1rem 0 0; } .showcase__copy .lead { margin-top: 1rem; } .showcase__list { margin: 1.6rem 0 2rem; display: flex; flex-direction: column; gap: .9rem; } .showcase__list li { display: flex; align-items: center; gap: .7rem; font-weight: 500; } .showcase__list .tick { width: 26px; height: 26px; flex-shrink: 0; border-radius: 50%; background: var(--accent); color: var(--on-accent); display: grid; place-items: center; } .showcase__list .tick svg { width: 15px; height: 15px; } .dash { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1.4rem, 3vw, 2rem); box-shadow: 0 44px 90px -50px rgba(15,93,67,.45); position: relative; } .dash__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.4rem; } .dash__head h4 { font-family: var(--font-display); font-size: 1.1rem; font-weight: 600; } .dash__head .tag { font-size: .8rem; font-weight: 600; color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); padding: .3rem .7rem; border-radius: 100px; } .dash__chart { position: relative; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 1rem 1rem 1rem 2rem; margin-bottom: 1.2rem; background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 4%, transparent), transparent); } .dash__chart svg { width: 100%; height: auto; display: block; } .chart-ylabels { position: absolute; left: 0; top: 1rem; bottom: 1rem; width: 1.8rem; pointer-events: none; } .chart-ylabels span { position: absolute; left: 4px; font-size: .65rem; font-weight: 600; color: var(--ink-soft); transform: translateY(-50%); } .dash__chart .chart-line { stroke-dasharray: 600; stroke-dashoffset: 600; } .reveal.in .dash__chart .chart-line { animation: drawChart 1.8s var(--ease) .3s forwards; } @keyframes drawChart { to { stroke-dashoffset: 0; } } .dash__weak { display: flex; flex-direction: column; gap: .7rem; } .weak { display: flex; align-items: center; gap: .75rem; padding: .8rem 1rem; border-radius: var(--radius-sm); font-size: .95rem; font-weight: 500; } .weak .wic { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; color: #fff; } .weak .wic svg { width: 16px; height: 16px; } .weak b { font-weight: 600; } .weak--fail { background: rgba(168,51,43,.16); color: #F0A39C; } .weak--fail .wic { background: #A8332B; } .weak--pass { background: rgba(16,185,129,.12); color: #6EE7B7; } .weak--pass .wic { background: var(--accent); } @media (max-width: 880px) { .showcase__grid { grid-template-columns: 1fr; } } /* ===== Testimonials ===== */ .tcard { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 2rem 1.8rem; display: flex; flex-direction: column; gap: 1rem; transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease); position: relative; overflow: hidden; } /* quote mark decorative */ .tcard::before { content: '\201C'; position: absolute; top: -.4rem; right: 1.4rem; font-family: Georgia, serif; font-size: 8rem; line-height: 1; font-weight: 700; color: var(--accent-2); opacity: .08; pointer-events: none; user-select: none; transition: opacity .3s var(--ease); } /* gradient line บน */ .tcard::after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease); } .tcard:hover { transform: translateY(-8px); border-color: rgba(16,185,129,.32); box-shadow: 0 0 0 1px rgba(16,185,129,.1), 0 24px 48px -16px rgba(0,0,0,.5), 0 0 36px -18px rgba(16,185,129,.2); } .tcard:hover::before { opacity: .14; } .tcard:hover::after { transform: scaleX(1); } .tcard .stars { display: flex; gap: 3px; color: var(--accent-2); } .tcard .stars svg { width: 16px; height: 16px; } .tcard p { color: rgba(226,232,240,.82); font-size: .98rem; line-height: 1.78; flex: 1; } .tperson { display: flex; align-items: center; gap: .85rem; padding-top: .8rem; border-top: 1px solid rgba(255,255,255,.07); } .tperson .av { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 1rem; flex-shrink: 0; box-shadow: 0 0 0 2px var(--card), 0 0 0 4px rgba(255,255,255,.12), 0 6px 16px -6px rgba(0,0,0,.3); } .tperson b { display: block; font-weight: 600; font-size: .95rem; } .tperson span { font-size: .82rem; color: var(--ink-soft); margin-top: .1rem; display: block; } /* ===== Dark Hero (เฉพาะหน้าแรก body.hero-dark) ===== */ /* การ์ด Dashboard เป็นสีขาว ลอยเด่นบนพื้นเขียว */ /* เมนูบนโปร่งใส + ตัวขาว ตอนอยู่บนสุด (จนกว่าจะเลื่อน) */ /* ---------- 12. Steps ---------- */ /* Steps */ .steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; position: relative; } /* connector line ระหว่าง steps */ .steps::before { content: ""; position: absolute; top: 58px; left: calc(12.5% + 40px); right: calc(12.5% + 40px); height: 1px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); opacity: .25; pointer-events: none; } .step { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 2rem 1.8rem 1.8rem; position: relative; overflow: hidden; transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease); } /* gradient line บน */ .step::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease); } /* radial glow */ .step::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at top left, rgba(16,185,129,.07) 0%, transparent 65%); opacity: 0; transition: opacity .3s var(--ease); } .step:hover { transform: translateY(-6px); border-color: rgba(16,185,129,.32); box-shadow: 0 0 0 1px rgba(16,185,129,.1), 0 20px 40px -14px rgba(0,0,0,.45), 0 0 32px -16px rgba(16,185,129,.2); } .step:hover::before { transform: scaleX(1); } .step:hover::after { opacity: 1; } /* เลขลำดับขั้นตอน วางเป็นตัวเลขจางมุมการ์ด แบบเดียวกับการ์ด bento ด้านบน */ .step[data-step]::after { content: attr(data-step); position: absolute; inset: .55rem 1.1rem auto auto; font-family: var(--font-display); font-size: 3.6rem; font-weight: 700; line-height: 1; color: rgba(22,33,28,.08); pointer-events: none; background: none; opacity: 1; } .section:not(.section--light) .step[data-step]::after { color: rgba(255,255,255,.06); } .step__ic { width: 54px; height: 54px; border-radius: 15px; margin-bottom: 1.3rem; background: rgba(16,185,129,.12); border: 1px solid rgba(16,185,129,.22); color: var(--accent); display: grid; place-items: center; position: relative; z-index: 1; transform: scale(0.7) rotate(-8deg); opacity: 0; transition: transform .45s var(--ease), opacity .45s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease); } .step.reveal.in .step__ic { transform: scale(1) rotate(0deg); opacity: 1; } .step.reveal.in:nth-child(1) .step__ic { transition-delay: .05s; } .step.reveal.in:nth-child(2) .step__ic { transition-delay: .15s; } .step.reveal.in:nth-child(3) .step__ic { transition-delay: .25s; } .step.reveal.in:nth-child(4) .step__ic { transition-delay: .35s; } .step:hover .step__ic { background: rgba(16,185,129,.22); border-color: rgba(16,185,129,.4); box-shadow: 0 0 20px -4px rgba(16,185,129,.3); transform: scale(1.08) rotate(-4deg); } .step__ic svg { width: 26px; height: 26px; } .step h3 { font-size: 1.1rem; margin-bottom: .5rem; font-weight: 700; position: relative; z-index: 1; } .step p { color: var(--ink-soft); font-size: .9rem; line-height: 1.7; position: relative; z-index: 1; } @media (max-width: 768px) { .steps::before { display: none; } } /* ---------- 13. Stats ---------- */ .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); } .stat { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 2rem 1.6rem; text-align: center; position: relative; overflow: hidden; transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease); } /* gradient accent line บน */ .stat::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease); } /* glow radial พื้นหลัง */ .stat::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at top, rgba(16,185,129,.07) 0%, transparent 70%); opacity: 0; transition: opacity .3s var(--ease); pointer-events: none; } .stat:hover { transform: translateY(-6px); border-color: rgba(16,185,129,.32); box-shadow: 0 0 0 1px rgba(16,185,129,.1), 0 20px 40px -14px rgba(0,0,0,.45), 0 0 32px -16px rgba(16,185,129,.2); } .stat:hover::before { transform: scaleX(1); } .stat:hover::after { opacity: 1; } .stat b { font-family: var(--font-display); font-size: clamp(2rem, 3.5vw, 2.8rem); font-weight: 800; display: block; line-height: 1; color: var(--accent-2); letter-spacing: -0.03em; position: relative; z-index: 1; transform: translateY(8px); opacity: 0; transition: transform .5s var(--ease), opacity .5s var(--ease); } .stat.reveal.in b { transform: translateY(0); opacity: 1; } .stat.reveal.in:nth-child(1) b { transition-delay: .05s; } .stat.reveal.in:nth-child(2) b { transition-delay: .15s; } .stat.reveal.in:nth-child(3) b { transition-delay: .25s; } .stat.reveal.in:nth-child(4) b { transition-delay: .35s; } .stat span { color: var(--ink-soft); font-size: .88rem; margin-top: .6rem; display: block; position: relative; z-index: 1; letter-spacing: .02em; } @media (max-width: 640px) { .stats { grid-template-columns: repeat(2, 1fr); } } .section--deep .stat b { color: var(--accent-2); } /* ---------- 14. CTA band ---------- */ .cta-band { background: linear-gradient(135deg, #0B1A12 0%, #0B1120 60%, #0F172A 100%); border: 1px solid rgba(16,185,129,.2); border-radius: calc(var(--radius) * 1.5); padding: clamp(3rem, 7vw, 5rem) clamp(2rem, 5vw, 4rem); text-align: center; position: relative; overflow: hidden; box-shadow: 0 0 0 1px rgba(16,185,129,.06), 0 32px 64px -24px rgba(0,0,0,.5), 0 0 80px -30px rgba(16,185,129,.18); } /* emerald glow blobs */ .cta-band::before { content: ""; position: absolute; top: -80px; left: -80px; width: 320px; height: 320px; border-radius: 50%; background: radial-gradient(circle, rgba(16,185,129,.14) 0%, transparent 70%); pointer-events: none; } .cta-band::after { content: ""; position: absolute; bottom: -100px; right: -60px; width: 280px; height: 280px; border-radius: 50%; background: radial-gradient(circle, rgba(232,170,60,.1) 0%, transparent 70%); pointer-events: none; } .cta-band h2 { color: var(--on-accent); margin-bottom: 1rem; font-size: clamp(1.8rem, 3.5vw, 3rem); position: relative; z-index: 1; } .cta-band p { color: rgba(226,232,240,.65); max-width: 50ch; margin: 0 auto 2.4rem; font-size: clamp(.95rem, 1.5vw, 1.05rem); line-height: 1.75; position: relative; z-index: 1; } .cta-band .btn-row { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; position: relative; z-index: 1; } /* decorative rings */ .cta-band .ring { position: absolute; border-radius: 50%; pointer-events: none; } .cta-band .ring.r1 { width: 420px; height: 420px; top: -200px; left: -100px; border: 1px solid rgba(16,185,129,.1); } .cta-band .ring.r2 { width: 560px; height: 560px; bottom: -320px; right: -140px; border: 1px solid rgba(232,170,60,.08); } /* ---------- Features Bento Grid ---------- */ .features-bento { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: minmax(200px, auto); gap: 1.25rem; margin-top: 3rem; } .features-bento .feature { margin: 0; } .features-bento .feature-wide { grid-column: span 2; } .feature-visual { margin-top: 1.5rem; border-radius: calc(var(--radius) * .6); overflow: hidden; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); padding: 1rem; } .feature-visual .mock-bar { height: 6px; border-radius: 100px; background: rgba(255,255,255,.1); margin-bottom: .5rem; } .feature-visual .mock-bar.accent { background: linear-gradient(90deg, var(--accent), var(--accent-2)); width: 70%; } .feature-visual .mock-bar.sm { width: 50%; } .feature-visual .mock-bar.xs { width: 35%; } .feature-stat { margin-top: 1.2rem; display: flex; align-items: baseline; gap: .4rem; } .feature-stat .num { font-family: var(--font-display); font-size: 2.2rem; font-weight: 800; color: var(--accent); letter-spacing: -0.04em; line-height: 1; } .feature-stat .unit { font-size: .85rem; color: var(--ink-soft); } .feature-devices { display: flex; gap: .6rem; margin-top: 1.2rem; flex-wrap: wrap; } .feature-devices span { display: inline-flex; align-items: center; gap: .4rem; font-size: .75rem; font-weight: 600; color: var(--ink-soft); background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); border-radius: 100px; padding: .3rem .7rem; } .feature-devices span svg { width: 13px; height: 13px; } .feature-cert { margin-top: 1.4rem; border: 1.5px solid rgba(232,170,60,.25); border-radius: calc(var(--radius) * .6); padding: 1rem 1.25rem; background: rgba(232,170,60,.05); display: flex; align-items: center; gap: 1rem; } .feature-cert__seal { width: 44px; height: 44px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; background: rgba(232,170,60,.14); color: var(--accent-2); } .feature-cert__seal svg { width: 24px; height: 24px; } .feature-cert__info { font-size: .8rem; color: var(--ink-soft); line-height: 1.5; } .feature-cert__info strong { display: block; color: var(--accent-2); font-size: .88rem; margin-bottom: .15rem; } @media (max-width: 900px) { .features-bento { grid-template-columns: repeat(2, 1fr); } .features-bento .feature-wide { grid-column: span 2; } } @media (max-width: 540px) { .features-bento { grid-template-columns: 1fr; } .features-bento .feature-wide { grid-column: span 1; } } /* avatar stack + contact strip */ @keyframes pulse { 0%,100% { box-shadow: 0 0 0 3px rgba(16,185,129,.2); } 50% { box-shadow: 0 0 0 6px rgba(16,185,129,.08); } } .cta-contact-strip { display: flex; align-items: center; justify-content: center; gap: 1.6rem; margin-top: 1.6rem; position: relative; z-index: 1; flex-wrap: wrap; } .cta-contact-strip a { display: inline-flex; align-items: center; gap: .5rem; font-size: .9rem; color: rgba(226,232,240,.6); transition: color .2s var(--ease); } .cta-contact-strip a:hover { color: rgba(226,232,240,.95); } .cta-contact-strip a svg { width: 18px; height: 18px; flex-shrink: 0; } /* primary CTA button ในส่วนนี้ */ .cta-band .btn--light { background: var(--accent-2); color: #2A1E08; font-weight: 700; border: none; padding: .85rem 2rem; box-shadow: 0 0 0 0 rgba(232,170,60,0), 0 8px 24px -6px rgba(232,170,60,.4); transition: transform .2s var(--ease), box-shadow .2s var(--ease), background .2s; } .cta-band .btn--light:hover { background: var(--accent-2-soft); box-shadow: 0 0 0 4px rgba(232,170,60,.15), 0 12px 28px -6px rgba(232,170,60,.5); transform: translateY(-2px); } .cta-band .btn--ghost { border-color: rgba(255,255,255,.2); color: rgba(255,255,255,.8); padding: .85rem 1.8rem; } .cta-band .btn--ghost:hover { border-color: rgba(255,255,255,.5); background: rgba(255,255,255,.06); transform: translateY(-2px); } /* ---------- 15. Footer — สามแถวนอน ---------- */ .site-footer { background: #060D18; color: var(--ink); padding-block: clamp(2.8rem, 5vw, 4rem) 1.6rem; } /* แถว 1 — แบรนด์ เมนู ตราโซเชียล */ .foot-row { display: flex; align-items: center; justify-content: space-between; gap: 1.6rem 2rem; flex-wrap: wrap; } .site-footer .brand { color: var(--ink); } .site-footer .brand .mark { background: var(--accent); color: #05261B; } .foot-nav { display: flex; align-items: center; gap: 1.6rem; flex-wrap: wrap; } .foot-nav a { color: var(--ink-soft); font-size: .97rem; transition: color var(--dur) var(--ease); } .foot-nav a:hover, .foot-nav a:focus-visible { color: var(--ink); } /* แถว 2 — ลิงก์ระบบ กับช่องทางติดต่อ */ .foot-mid { display: flex; align-items: center; justify-content: space-between; gap: 1.2rem 2rem; flex-wrap: wrap; margin-top: 1.6rem; padding-block: 1.4rem; border-top: 1px solid rgba(255,255,255,.08); border-bottom: 1px solid rgba(255,255,255,.08); } .foot-links { display: flex; align-items: center; gap: 1.3rem; flex-wrap: wrap; } .foot-links a { color: var(--ink-soft); font-size: .92rem; transition: color var(--dur) var(--ease); } .foot-links a:hover, .foot-links a:focus-visible { color: var(--ink); } .foot-call { display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap; } .foot-mail { color: var(--ink-soft); font-size: .92rem; transition: color var(--dur) var(--ease); } .foot-mail:hover { color: var(--ink); } /* แถว 3 — ลิขสิทธิ์ */ .foot-bottom { display: flex; align-items: center; justify-content: space-between; gap: .6rem 2rem; flex-wrap: wrap; margin-top: 1.2rem; font-size: .84rem; color: rgba(148,163,184,.8); } .foot-note { text-align: right; } @media (max-width: 900px) { .foot-row, .foot-mid, .foot-bottom { justify-content: flex-start; } .foot-mid { gap: 1.4rem; } .foot-note { text-align: left; } } /* ---------- 16. Scroll reveal ---------- */ .reveal { opacity: 0; transform: translateY(32px); filter: blur(4px); transition: opacity .7s var(--ease), transform .7s var(--ease), filter .7s var(--ease); } .reveal.in { opacity: 1; transform: none; filter: blur(0); } .reveal[data-delay="1"] { transition-delay: .1s; } .reveal[data-delay="2"] { transition-delay: .2s; } .reveal[data-delay="3"] { transition-delay: .3s; } .reveal[data-delay="4"] { transition-delay: .4s; } /* ---------- 17. Course hero (dark, colored — used on course detail pages) ---------- */ .course-hero { background: var(--course-clr, var(--accent)); color: var(--on-accent); } .course-hero::before { background-image: linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px); } .course-hero h1 { color: var(--on-accent); } .course-hero .lead { color: rgba(244,242,236,.8); max-width: 65ch; } .course-hero .breadcrumb { color: rgba(244,242,236,.6); } .course-hero .breadcrumb a { color: rgba(244,242,236,.7); } .course-hero .breadcrumb a:hover { color: var(--on-accent); } .course-hero-meta { display: flex; flex-wrap: wrap; gap: .7rem 1.4rem; margin-top: 1.4rem; font-size: .95rem; color: rgba(244,242,236,.75); } .course-hero-meta span { display: inline-flex; align-items: center; gap: .4rem; } .course-hero-meta svg { width: 17px; height: 17px; } .course-hero-meta .stars { display: flex; gap: 2px; color: var(--accent-2); } .course-hero-meta .stars svg { width: 15px; height: 15px; fill: var(--accent-2); } .course-hero-meta strong { color: var(--on-accent); } /* ---------- 18. Course detail layout ---------- */ .course-detail { display: grid; grid-template-columns: 1fr 380px; gap: clamp(2rem, 4vw, 3rem); align-items: start; } .course-detail__main { min-width: 0; } .course-detail__sidebar { position: sticky; top: calc(76px + 1.5rem); } .enroll-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 2rem; box-shadow: 0 24px 60px -30px rgba(15,93,67,.28); } .enroll-card__price { font-family: var(--font-display); font-size: 2.4rem; font-weight: 700; color: var(--accent); line-height: 1; margin-bottom: 1.4rem; } .enroll-card .btn { width: 100%; margin-bottom: .65rem; justify-content: center; } .enroll-card__perks { list-style: none; display: flex; flex-direction: column; gap: .55rem; margin-top: 1.4rem; border-top: 1px solid var(--line); padding-top: 1.4rem; } .enroll-card__perks li { display: flex; align-items: center; gap: .6rem; font-size: .92rem; color: var(--ink-soft); } .enroll-card__perks li svg { width: 18px; height: 18px; color: var(--accent); flex-shrink: 0; } .what-learn { background: color-mix(in srgb, var(--accent) 7%, var(--bg)); border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--line)); border-radius: var(--radius); padding: clamp(1.6rem, 3vw, 2.2rem); margin-bottom: 2.5rem; } .what-learn h3 { font-size: 1.3rem; margin-bottom: 1.2rem; } @media (max-width: 980px) { .course-detail { grid-template-columns: 1fr; } .course-detail__sidebar { position: static; order: -1; } } /* ---------- 20. Timeline ---------- */ /* ---------- 21. Team grid ---------- */ /* ---------- 22. LINE contact ---------- */ /* ---------- 23. Auth enhancements ---------- */ .auth__brand { display: inline-flex; align-items: center; gap: .6rem; font-family: var(--font-display); font-weight: 600; font-size: 1.3rem; margin-bottom: 2.2rem; position: relative; z-index: 1; color: var(--on-accent); text-decoration: none; } .auth__brand .mark { width: 36px; height: 36px; border-radius: 10px; background: rgba(244,242,236,.18); color: var(--on-accent); display: grid; place-items: center; font-size: 1rem; } .auth__tcard { background: rgba(244,242,236,.1); border: 1px solid rgba(244,242,236,.18); border-radius: var(--radius-sm); padding: 1.3rem; margin-top: 2.2rem; position: relative; z-index: 1; } .auth__tcard p { font-size: .92rem; color: rgba(244,242,236,.82); line-height: 1.65; margin-bottom: .9rem; font-style: italic; } .auth__tcard .tperson { display: flex; align-items: center; gap: .7rem; padding-top: 0; border-top: none; } .auth__tcard .av { width: 38px; height: 38px; border-radius: 50%; background: rgba(244,242,236,.2); color: var(--on-accent); display: grid; place-items: center; font-weight: 700; font-size: .95rem; flex-shrink: 0; } .auth__tcard .name { display: block; font-size: .9rem; font-weight: 600; color: var(--on-accent); } .auth__tcard .meta { display: block; font-size: .8rem; color: rgba(244,242,236,.6); } /* ---------- 19. Responsive ---------- */ @media (max-width: 980px) { .grid-3, .grid-courses, .steps, .stats { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 620px) { /* จอแคบ ให้ไอคอนอยู่บรรทัดเดียวกับข้อความเสมอ แล้วปล่อยข้อความตัดบรรทัดในตัวมันเอง ถ้าปล่อยให้ห่อบรรทัด ไอคอนจะเด้งไปอยู่บรรทัดบนลำพัง */ .hero__proof { flex-wrap: nowrap; align-items: flex-start; text-align: left; } .hero__proof-stars { margin-top: .2rem; } } @media (max-width: 900px) { .nav-links, .nav-actions .btn--ghost, .nav-actions .btn--primary { display: none; } .nav-toggle { display: flex; } .nav-mobile-auth { display: none; } .site-header.menu-open .nav-links { display: flex; position: absolute; top: 76px; left: 0; right: 0; flex-direction: column; background: #0B1120; padding: 1.2rem clamp(1.2rem,4vw,2.5rem) 2rem; gap: .3rem; border-bottom: 1px solid var(--line); z-index: 49; } .site-header.menu-open .nav-links a { padding: .8rem 0; border-bottom: 1px solid var(--line); width: 100%; } .site-header.menu-open .nav-mobile-auth { display: flex; flex-direction: column; gap: .7rem; padding-top: 1.2rem; margin-top: .5rem; border-top: 2px solid var(--line); } .site-header.menu-open .nav-mobile-auth .btn { justify-content: center; } /* hero-dark: ตอน dropdown เปิด ให้สีตัวอักษรกลับมาปกติ (dropdown พื้นขาว) */ } @media (max-width: 560px) { .grid-3, .grid-courses, .steps, .stats { grid-template-columns: 1fr; } .stats { grid-template-columns: repeat(2, 1fr); } } /* ---------- 24. Dark ink section (used on stats) ---------- */ .section--ink { background: #060D18; padding-block: clamp(2.5rem, 5vw, 4rem); position: relative; } .stats-band::before { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: min(760px, 82%); height: 1px; background: linear-gradient(90deg, transparent, rgba(232,170,60,.6), transparent); } .section--ink .stat b { font-size: clamp(2rem, 3vw, 2.8rem); color: var(--accent-2); letter-spacing: -0.02em; } .section--ink .stat span { color: var(--ink-soft); font-size: 1rem; } /* ---------- 25. Features — editorial horizontal rows ---------- */ /* Features section heading */ #features .head-row h2.display { font-size: clamp(2.4rem, 4.5vw, 4rem); } #features .head-row { margin-bottom: clamp(2rem, 4vw, 3rem); } .section--deep .head-row:has(+ .faq) { margin-bottom: clamp(1.2rem, 2.5vw, 2rem); } /* Responsive — hide number on small screens */ @media (max-width: 640px) { .feature::before { display: none; } } /* ---------- 18. Accessibility — focus & reduced motion ---------- */ /* Focus-visible ring ทุก interactive element */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; } /* ปรับ radius ให้เข้ากับ shape ของ element */ .btn:focus-visible, .chip:focus-visible { border-radius: var(--radius); } .adm-tab:focus-visible, .adm-btn:focus-visible, .adm-modal-close:focus-visible { border-radius: var(--radius-sm); } .course:focus-visible { border-radius: var(--radius); outline-offset: 4px; } .nav-links a:focus-visible { border-radius: 6px; } /* ล้าง outline เก่าออก เพราะใช้ focus-visible แทน */ :focus:not(:focus-visible) { outline: none; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } .reveal { opacity: 1; transform: none; } } /* ======================================================== 26. Dashboard (admin/) ======================================================== */ .dash-body { overflow: hidden; } .dash { display: grid; grid-template-columns: 220px 1fr; min-height: 100vh; background: var(--bg); } /* Sidebar */ .dash__sidebar { background: #060D18; display: flex; flex-direction: column; padding: 1.5rem 1rem; border-right: 1px solid var(--line); position: sticky; top: 0; height: 100vh; overflow-y: auto; } .dash__logo { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--font-display); font-size: 1.2rem; font-weight: 700; color: var(--ink); text-decoration: none; padding: .5rem .75rem; margin-bottom: 2rem; } .dash__logo .mark { width: 30px; height: 30px; border-radius: 8px; background: var(--accent); color: #fff; display: grid; place-items: center; font-size: .85rem; flex-shrink: 0; } .dash__nav { display: flex; flex-direction: column; gap: .25rem; flex: 1; } .dash__nav-item { display: flex; align-items: center; gap: .7rem; padding: .65rem .85rem; border-radius: 10px; color: var(--ink-soft); font-size: .9rem; font-weight: 500; text-decoration: none; transition: background var(--dur) var(--ease), color var(--dur) var(--ease); position: relative; } .dash__nav-item svg { width: 18px; height: 18px; flex-shrink: 0; } .dash__nav-item:hover { background: rgba(255,255,255,.06); color: var(--ink); } .dash__nav-item.is-active { background: rgba(16,185,129,.14); color: var(--accent); font-weight: 600; } .dash__nav-item.is-active svg { color: var(--accent); } .dash__nav-badge { margin-left: auto; background: var(--accent); color: #fff; font-size: .7rem; font-weight: 700; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; } .dash__logout { display: flex; align-items: center; gap: .7rem; padding: .65rem .85rem; border-radius: 10px; color: var(--ink-soft); font-size: .9rem; text-decoration: none; transition: background var(--dur) var(--ease), color var(--dur) var(--ease); margin-top: auto; } .dash__logout svg { width: 18px; height: 18px; } .dash__logout:hover { background: rgba(239,68,68,.1); color: #f87171; } /* Main */ .dash__main { display: flex; flex-direction: column; overflow-y: auto; max-height: 100vh; } /* Topbar */ .dash__topbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.25rem 1.75rem; border-bottom: 1px solid var(--line); background: var(--bg); position: sticky; top: 0; z-index: 10; flex-wrap: wrap; } .dash__greeting { font-size: 1.4rem; font-weight: 700; color: var(--ink); margin: 0; } .dash__subgreeting { font-size: .85rem; color: var(--ink-soft); margin: .2rem 0 0; } .dash__topbar-right { display: flex; align-items: center; gap: .75rem; } .dash__search { display: flex; align-items: center; gap: .6rem; background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: .5rem .9rem; } .dash__search svg { width: 15px; height: 15px; color: var(--ink-soft); flex-shrink: 0; } .dash__search input { background: none; border: none; outline: none; color: var(--ink); font-family: var(--font-body); font-size: .88rem; width: 160px; } .dash__search input::placeholder { color: var(--ink-soft); } .dash__avatar { width: 38px; height: 38px; border-radius: 50%; background: rgba(16,185,129,.2); color: var(--accent); font-weight: 700; font-size: .95rem; display: grid; place-items: center; flex-shrink: 0; cursor: pointer; border: 2px solid rgba(16,185,129,.3); } /* Body layout */ .dash__body { display: grid; grid-template-columns: 1fr 300px; gap: 0; flex: 1; } .dash__col-main { padding: 1.75rem; display: flex; flex-direction: column; gap: 1.5rem; border-right: 1px solid var(--line); } .dash__col-side { padding: 1.75rem; display: flex; flex-direction: column; gap: 1.5rem; } /* Section */ .dash__section { display: flex; flex-direction: column; gap: 1rem; } .dash__section-head { display: flex; align-items: center; justify-content: space-between; } .dash__section-head h2 { font-size: 1rem; font-weight: 700; color: var(--ink); margin: 0; } .dash__period { font-size: .8rem; color: var(--ink-soft); background: var(--card); border: 1px solid var(--line); border-radius: 6px; padding: .2rem .6rem; } .dash__see-all { font-size: .82rem; color: var(--accent); font-weight: 600; text-decoration: none; } .dash__see-all:hover { text-decoration: underline; } /* Stat cards */ .dash__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: .85rem; } .dash__stat { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.2rem 1.25rem; display: flex; flex-direction: column; gap: .35rem; } .dash__stat-icon { width: 36px; height: 36px; border-radius: 9px; background: rgba(255,255,255,.06); display: grid; place-items: center; margin-bottom: .2rem; } .dash__stat-icon svg { width: 18px; height: 18px; } .dash__stat--accent { border-color: rgba(16,185,129,.25); background: rgba(16,185,129,.07); } .dash__stat--accent .dash__stat-icon { background: rgba(16,185,129,.15); color: var(--accent); } .dash__stat--accent .dash__stat-num { color: var(--accent); } .dash__stat--gold { border-color: rgba(232,170,60,.25); background: rgba(232,170,60,.06); } .dash__stat--gold .dash__stat-icon { background: rgba(232,170,60,.15); color: var(--accent-2); } .dash__stat--gold .dash__stat-num { color: var(--accent-2); } .dash__stat-num { font-family: var(--font-display); font-size: 2rem; font-weight: 700; color: var(--ink); line-height: 1; } .dash__stat-label { font-size: .82rem; color: var(--ink-soft); } /* Schedule */ .dash__sched-btn { display: inline-flex; align-items: center; padding: .4rem .9rem; border-radius: 7px; background: var(--accent); color: #fff; font-size: .8rem; font-weight: 600; text-decoration: none; white-space: nowrap; transition: opacity var(--dur) var(--ease); } .dash__sched-btn:hover { opacity: .85; } .dash__sched-btn--ghost { background: transparent; border: 1px solid var(--line); color: var(--ink-soft); } .dash__sched-btn--ghost:hover { border-color: var(--accent); color: var(--accent); opacity: 1; } /* Teachers */ /* Events */ /* Certificates */ .dash__certs { display: grid; grid-template-columns: repeat(4, 1fr); gap: .75rem; } .dash__cert { display: flex; align-items: center; gap: .85rem; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 1rem 1.1rem; } .dash__cert--locked { opacity: .6; } .dash__cert-icon { width: 38px; height: 38px; border-radius: 9px; background: rgba(232,170,60,.12); color: var(--accent-2); display: grid; place-items: center; flex-shrink: 0; } .dash__cert-icon svg { width: 20px; height: 20px; } .dash__cert--locked .dash__cert-icon { background: rgba(255,255,255,.05); color: var(--ink-soft); } .dash__cert-body { flex: 1; min-width: 0; } .dash__cert-body b { display: block; font-size: .83rem; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dash__cert-body span { font-size: .75rem; color: var(--ink-soft); } .dash__cert-dl { width: 30px; height: 30px; border-radius: 7px; border: 1px solid var(--line); display: grid; place-items: center; color: var(--ink-soft); text-decoration: none; flex-shrink: 0; transition: background var(--dur) var(--ease), color var(--dur) var(--ease); } .dash__cert-dl svg { width: 14px; height: 14px; } .dash__cert-dl:hover { background: rgba(16,185,129,.12); border-color: rgba(16,185,129,.3); color: var(--accent); } .dash__cert-tag { font-size: .72rem; font-weight: 600; color: var(--ink-soft); border: 1px solid var(--line); border-radius: 6px; padding: .2rem .55rem; white-space: nowrap; flex-shrink: 0; } /* ======================================================== 27. Privacy Policy ======================================================== */ .policy-wrap { display: grid; grid-template-columns: 220px 1fr; gap: 3rem; align-items: start; } .policy-toc { position: sticky; top: 100px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.4rem; } .policy-toc__title { font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 1rem; } .policy-toc nav { display: flex; flex-direction: column; gap: .15rem; } .policy-toc a { display: block; padding: .4rem .6rem; border-radius: 6px; font-size: .88rem; color: var(--ink-soft); text-decoration: none; transition: background var(--dur) var(--ease), color var(--dur) var(--ease); } .policy-toc a:hover { background: rgba(16,185,129,.08); color: var(--accent); } .policy-body { max-width: 720px; } .policy-body section { margin-bottom: 2.5rem; } .policy-body h2 { font-size: 1.25rem; font-weight: 700; color: var(--ink); margin-bottom: 1rem; padding-bottom: .6rem; border-bottom: 1px solid var(--line); } .policy-body h3 { font-size: 1rem; font-weight: 600; color: var(--ink); margin: 1.2rem 0 .6rem; } .policy-body p { color: var(--ink-soft); line-height: 1.75; margin-bottom: .85rem; } .policy-body ul { list-style: none; display: flex; flex-direction: column; gap: .5rem; margin-bottom: .85rem; } .policy-body ul li { position: relative; padding-left: 1.4rem; color: var(--ink-soft); line-height: 1.6; font-size: .95rem; } .policy-body ul li::before { content: ''; position: absolute; left: 0; top: .6em; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); } .policy-body strong { color: var(--ink); font-weight: 600; } .policy-body a { color: var(--accent); font-weight: 600; } .policy-body a:hover { text-decoration: underline; } .policy-notice { display: flex; gap: 1rem; align-items: flex-start; background: rgba(16,185,129,.07); border: 1px solid rgba(16,185,129,.25); border-radius: var(--radius-sm); padding: 1rem 1.2rem; margin-bottom: 2rem; } .policy-notice svg { width: 20px; height: 20px; color: var(--accent); flex-shrink: 0; margin-top: .1rem; } .policy-notice p { margin: 0; color: var(--ink-soft); font-size: .9rem; line-height: 1.65; } .policy-contact-box { display: flex; flex-direction: column; gap: .75rem; margin-top: 1rem; } .policy-contact-item { display: flex; align-items: flex-start; gap: .85rem; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: .9rem 1.1rem; } .policy-contact-item svg { width: 18px; height: 18px; color: var(--accent); flex-shrink: 0; margin-top: .15rem; } .policy-contact-item b { display: block; font-size: .82rem; color: var(--ink-soft); margin-bottom: .2rem; } .policy-contact-item a, .policy-contact-item span { font-size: .95rem; color: var(--ink); font-weight: 500; } .policy-footer-note { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line); } .policy-footer-note p { font-size: .88rem; color: var(--ink-soft); line-height: 1.7; } @media (max-width: 860px) { .policy-wrap { grid-template-columns: 1fr; } .policy-toc { position: static; } } /* Dashboard responsive */ @media (max-width: 1100px) { .dash__certs { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 900px) { .dash { grid-template-columns: 1fr; } .dash__sidebar { display: none; } .dash__body { grid-template-columns: 1fr; } .dash__col-main { border-right: none; border-bottom: 1px solid var(--line); } .dash__stats { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 560px) { .dash__stats { grid-template-columns: 1fr 1fr; } .dash__certs { grid-template-columns: 1fr; } .dash__topbar { flex-direction: column; align-items: flex-start; } } /* ======================================================== 28. Admin Panel — sidebar badge, tables, modals ======================================================== */ /* Admin tab filter */ .adm-tabs { display: flex; gap: .4rem; flex-wrap: wrap; } .adm-tab { display: inline-flex; align-items: center; gap: .5rem; padding: .5rem 1rem; border-radius: 8px; border: 1px solid var(--line); background: transparent; color: var(--ink-soft); font-family: inherit; font-size: .88rem; font-weight: 500; cursor: pointer; transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease); } .adm-tab:hover { background: rgba(255,255,255,.05); color: var(--ink); } .adm-tab.is-active { background: rgba(16,185,129,.12); color: var(--accent); border-color: rgba(16,185,129,.3); font-weight: 600; } .adm-tab-count { font-size: .72rem; font-weight: 700; padding: .1rem .45rem; border-radius: 100px; background: rgba(255,255,255,.08); color: var(--ink-soft); } .adm-tab.is-active .adm-tab-count { background: rgba(16,185,129,.2); color: var(--accent); } .adm-tab-count--warn { background: rgba(232,170,60,.15) !important; color: var(--accent-2) !important; } .adm-tab-count--ok { background: rgba(16,185,129,.15) !important; color: var(--accent) !important; } /* Admin table */ .adm-table-wrap { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; } .adm-table { width: 100%; border-collapse: collapse; } .adm-table thead { background: rgba(255,255,255,.03); border-bottom: 1px solid var(--line); } .adm-table th { padding: .85rem 1.1rem; text-align: left; font-size: .77rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-soft); } .adm-table td { padding: .85rem 1.1rem; font-size: .9rem; color: var(--ink); vertical-align: middle; border-bottom: 1px solid rgba(255,255,255,.04); } .adm-table tbody tr:last-child td { border-bottom: none; } .adm-table tbody tr { transition: background var(--dur) var(--ease); } .adm-table tbody tr:hover { background: rgba(255,255,255,.025); } /* User cell */ .adm-user { display: flex; align-items: center; gap: .75rem; } .adm-user-av { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: .88rem; flex-shrink: 0; } .adm-user b { display: block; font-size: .9rem; color: var(--ink); } .adm-user span { display: block; font-size: .78rem; color: var(--ink-soft); margin-top: .05rem; } /* Badges */ .adm-badge { display: inline-flex; align-items: center; padding: .25rem .65rem; border-radius: 100px; font-size: .77rem; font-weight: 600; white-space: nowrap; } .adm-badge--warn { background: rgba(232,170,60,.12); color: var(--accent-2); border: 1px solid rgba(232,170,60,.25); } .adm-badge--ok { background: rgba(16,185,129,.12); color: var(--accent); border: 1px solid rgba(16,185,129,.25); } .adm-badge--danger { background: rgba(239,68,68,.12); color: #A8332B; border: 1px solid rgba(239,68,68,.25); } /* Score cell */ .adm-score { font-weight: 700; color: var(--ink-soft); } .adm-score--hi { color: var(--accent); } /* Action buttons */ .adm-actions { display: flex; gap: .4rem; } .adm-btn { display: inline-flex; align-items: center; padding: .35rem .8rem; border-radius: 7px; font-family: inherit; font-size: .8rem; font-weight: 600; cursor: pointer; border: 1px solid transparent; transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease); white-space: nowrap; } .adm-btn--ok { background: rgba(16,185,129,.14); color: var(--accent); border-color: rgba(16,185,129,.3); } .adm-btn--ok:hover { background: rgba(16,185,129,.25); } .adm-btn--ghost { background: transparent; color: var(--ink-soft); border-color: var(--line); } .adm-btn--ghost:hover { background: rgba(255,255,255,.06); color: var(--ink); border-color: rgba(255,255,255,.2); } /* Modal */ .adm-modal-overlay { position: fixed; inset: 0; background: rgba(6,13,24,.75); backdrop-filter: blur(4px); z-index: 200; display: flex; align-items: center; justify-content: center; padding: 1rem; opacity: 0; pointer-events: none; transition: opacity .25s var(--ease); } .adm-modal-overlay.is-open { opacity: 1; pointer-events: all; } .adm-modal { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); width: 100%; max-width: 480px; box-shadow: 0 40px 80px -20px rgba(0,0,0,.7); transform: translateY(16px) scale(.98); transition: transform .25s var(--ease); } .adm-modal-overlay.is-open .adm-modal { transform: translateY(0) scale(1); } .adm-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--line); } .adm-modal-head h3 { font-size: 1.05rem; font-weight: 700; color: var(--ink); margin: 0; } .adm-modal-close { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--line); color: var(--ink-soft); cursor: pointer; background: none; transition: background var(--dur) var(--ease), color var(--dur) var(--ease); } .adm-modal-close svg { width: 15px; height: 15px; } .adm-modal-close:hover { background: rgba(255,255,255,.06); color: var(--ink); } .adm-modal-body { padding: 1.5rem; display: flex; flex-direction: column; gap: 0; } .adm-modal-body .field { margin-bottom: 1rem; } .adm-modal-foot { display: flex; gap: .6rem; justify-content: flex-end; padding: 1.25rem 1.5rem; border-top: 1px solid var(--line); } /* Admin stat cards */ .adm-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: .85rem; } .adm-stat { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.2rem 1.25rem; display: flex; flex-direction: column; gap: .3rem; } .adm-stat--accent { border-color: rgba(16,185,129,.25); background: rgba(16,185,129,.06); } .adm-stat--gold { border-color: rgba(232,170,60,.25); background: rgba(232,170,60,.05); } .adm-stat--warn { border-color: rgba(239,68,68,.25); background: rgba(239,68,68,.05); } .adm-stat-num { font-family: var(--font-display); font-size: 1.9rem; font-weight: 700; color: var(--ink); line-height: 1; } .adm-stat-label { font-size: .8rem; color: var(--ink-soft); } @media (max-width: 1000px) { .adm-stats { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .adm-table-wrap { overflow-x: auto; } .adm-table { min-width: 700px; } } /* ======================================================== 29. Admin Courses — card grid, upload ======================================================== */ .adm-course-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; } .adm-course-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); display: flex; flex-direction: column; overflow: hidden; transition: border-color .25s var(--ease), box-shadow .25s var(--ease); } .adm-course-card:hover { border-color: rgba(16,185,129,.3); box-shadow: 0 12px 32px -10px rgba(0,0,0,.4); } .adm-course-card__head { display: flex; align-items: center; justify-content: space-between; padding: 1.1rem 1.2rem .5rem; } .adm-course-card__icon { width: 40px; height: 40px; border-radius: 10px; background: rgba(16,185,129,.14); color: var(--accent); display: grid; place-items: center; } .adm-course-card__icon svg { width: 20px; height: 20px; } .adm-course-card__body { padding: .4rem 1.2rem 1rem; flex: 1; } .adm-course-card__body h3 { font-size: .95rem; font-weight: 700; color: var(--ink); margin-bottom: .35rem; } .adm-course-card__body p { font-size: .82rem; color: var(--ink-soft); line-height: 1.6; margin-bottom: .85rem; } .adm-course-meta { display: flex; gap: .75rem; margin-bottom: .85rem; flex-wrap: wrap; } .adm-course-meta span { display: inline-flex; align-items: center; gap: .3rem; font-size: .78rem; color: var(--ink-soft); } .adm-course-meta span svg { width: 13px; height: 13px; } .adm-course-card__foot { display: flex; gap: .5rem; padding: .85rem 1.2rem; border-top: 1px solid var(--line); } .adm-course-card__foot .adm-btn { flex: 1; justify-content: center; gap: .4rem; } .adm-course-card__foot .adm-btn svg { width: 13px; height: 13px; } /* Upload modal internals */ /* ======================================================== 30. Admin Reports — bar chart, weak items ======================================================== */ .adm-weak-item { display: flex; align-items: flex-start; gap: .75rem; background: rgba(255,255,255,.03); border: 1px solid var(--line); border-radius: 8px; padding: .65rem .85rem; } .adm-weak-item > div { flex: 1; min-width: 0; } .adm-weak-item b { display: block; font-size: .82rem; color: var(--ink); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .adm-weak-item span { display: block; font-size: .75rem; color: var(--ink-soft); margin-top: .1rem; } .adm-weak-score { font-family: var(--font-display); font-size: .95rem; font-weight: 700; flex-shrink: 0; } .adm-weak-score--bad { color: #A8332B; } .adm-weak-score--mid { color: var(--accent-2); } @media (max-width: 1100px) { .adm-course-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 680px) { .adm-course-grid { grid-template-columns: 1fr; } } /* ========================================================= 26. โซนสว่าง — คั่นจังหวะกลางหน้า (คอร์ส / ขั้นตอน / รีวิว / คำถาม) สลับตัวแปรสีทั้งชุด ทุก component ที่ใช้ var() จะพลิกโหมดตาม ========================================================= */ .section--light { --ink: #16211C; --ink-soft: #55635C; --card: #FFFFFF; --line: #E6DFD2; --accent: #0F5D43; --accent-soft: #0B4A35; --accent-2: #9A6B12; --accent-2-soft: #7E570D; --accent-2-dark: #6B4A0A; --shadow-soft: 0 2px 4px -2px rgba(23,33,28,.06), 0 12px 28px -12px rgba(23,33,28,.14); --shadow-lift: 0 4px 8px -4px rgba(23,33,28,.08), 0 28px 56px -20px rgba(23,33,28,.22); background: #FAF8F3; color: var(--ink); position: relative; z-index: 1; } .section--light-alt { background: #F4F0E7; } /* ขอบบนของโซนสว่าง ยกเป็นแผ่นซ้อนทับโซนมืด */ .light-zone-start { border-radius: clamp(24px, 4vw, 44px) clamp(24px, 4vw, 44px) 0 0; margin-top: calc(clamp(24px, 4vw, 44px) * -1); padding-top: calc(clamp(3.5rem, 6.5vw, 5.5rem) + clamp(24px, 4vw, 44px)); } .light-zone-end { border-radius: 0 0 clamp(24px, 4vw, 44px) clamp(24px, 4vw, 44px); margin-bottom: calc(clamp(24px, 4vw, 44px) * -1); padding-bottom: calc(clamp(2.4rem, 4vw, 3.4rem) + clamp(24px, 4vw, 44px)); } /* เส้นเรืองแสงบาง ๆ ตรงรอยต่อ */ .light-zone-start::before { content: ""; position: absolute; top: 0; left: 12%; right: 12%; height: 1px; background: linear-gradient(90deg, transparent, rgba(15,93,67,.45), rgba(154,107,18,.45), transparent); } /* ปุ่มในโซนสว่าง */ .section--light .btn--primary { background: var(--accent); color: #FFF; box-shadow: 0 10px 24px -12px rgba(15,93,67,.55); } .section--light .btn--primary:hover { background: var(--accent-soft); box-shadow: 0 16px 32px -14px rgba(15,93,67,.6); } .section--light .btn--ghost { color: var(--ink); border-color: rgba(23,33,28,.18); } .section--light .btn--ghost:hover { border-color: rgba(23,33,28,.42); background: rgba(23,33,28,.03); } .section--light .btn--light { background: rgba(23,33,28,.05); color: var(--ink); border-color: rgba(23,33,28,.1); } /* การ์ดในโซนสว่าง — เงานุ่มแทนขอบเรืองแสง */ .section--light .course, .section--light .step, .section--light .tcard, .section--light .faq__item { background: var(--card); border-color: var(--line); box-shadow: var(--shadow-soft); } .section--light .course:hover, .section--light .step:hover, .section--light .tcard:hover { border-color: rgba(15,93,67,.28); box-shadow: var(--shadow-lift); } .section--light .course::after, .section--light .step::after { background: radial-gradient(ellipse at top, rgba(15,93,67,.05) 0%, transparent 65%); } .section--light .faq__item[open] { border-color: rgba(15,93,67,.3); box-shadow: 0 0 0 1px rgba(15,93,67,.06), var(--shadow-soft); } .section--light .faq__item[open] summary { background: rgba(15,93,67,.045); } .section--light .faq__item p { border-top-color: var(--line); } /* ไอคอนกรอบในโซนสว่าง */ .section--light .step__ic { background: rgba(15,93,67,.08); border-color: rgba(15,93,67,.16); color: var(--accent); } .section--light .step:hover .step__ic { background: rgba(15,93,67,.14); border-color: rgba(15,93,67,.3); box-shadow: 0 8px 20px -8px rgba(15,93,67,.35); } .section--light .step__num { color: var(--accent-2); background: rgba(154,107,18,.09); border-color: rgba(154,107,18,.2); } .section--light .steps::before { opacity: .35; } /* รีวิวในโซนสว่าง */ .section--light .tcard p { color: #37433D; } .section--light .tcard::before { color: var(--accent-2); opacity: .1; } .section--light .tcard:hover::before { opacity: .16; } .section--light .tperson { border-top-color: var(--line); } .section--light .tperson .av { box-shadow: 0 0 0 2px #FFF, 0 0 0 4px rgba(23,33,28,.07), 0 6px 16px -6px rgba(23,33,28,.2); } /* คอร์สในโซนสว่าง */ .section--light .course__tag { background: rgba(11,18,15,.72); color: #F6F3EC; } .section--light .course__foot { border-top-color: var(--line); } .section--light .course__price { color: #7E570D; } /* ========================================================= 27. แถบตัวเลข — ตัดกล่องการ์ดออก ใช้เส้นคั่นแทน ========================================================= */ .stats-band { background: #060D18; border-block: 1px solid rgba(255,255,255,.07); padding-block: clamp(2.6rem, 4.5vw, 3.6rem); } .stats--bare { gap: 0; } .stats--bare .stat { background: none; border: 0; border-radius: 0; box-shadow: none; padding: clamp(1.4rem, 3vw, 2.2rem) 1.2rem; position: relative; } .stats--bare .stat::after { display: none; } .stats--bare .stat::before { display: none; } .stats--bare .stat + .stat::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 58%; background: linear-gradient(180deg, transparent, rgba(255,255,255,.16), transparent); display: block; } .stats--bare .stat:hover { transform: none; box-shadow: none; border-color: transparent; } .stats--bare .stat b { font-size: clamp(2.2rem, 4vw, 3.2rem); background: linear-gradient(180deg, #F5C842 0%, #C8891C 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .stats--bare .stat span { color: #A6B4C2; font-size: .93rem; margin-top: .65rem; } @media (max-width: 980px) { .stats--bare .stat:nth-child(odd)::before { display: none; } .stats--bare .stat:nth-child(n+3) { border-top: 1px solid rgba(255,255,255,.09); } } /* ========================================================= 28. จังหวะระยะระหว่าง section ที่พื้นเดียวกันต่อกัน ========================================================= */ .section--light + .section--light { padding-top: clamp(2rem, 3.5vw, 3rem); } .section--deep + .section--deep { padding-top: clamp(2rem, 3.5vw, 3rem); } .head-row .lead { max-width: 46ch; } .head-row--center .lead { margin-top: 1rem; } /* ========================================================= 29. หัวข้อ section — ขีดเส้นใต้สั้นแทนป้ายเดิม ========================================================= */ .head-row h2.display, .head-row--center h2.display { position: relative; } .head-line::after { content: ""; display: block; width: 64px; height: 3px; border-radius: 3px; margin-top: 1.1rem; background: linear-gradient(90deg, var(--accent), var(--accent-2)); } .head-row--center .head-line::after { margin-inline: auto; } /* ========================================================= 30. แก้ชนกันของคลาส .dash หน้า /dashboard/ ใช้ .dash เป็น layout grid เต็มจอ ส่วนหน้าแรกใช้ .dash เป็นการ์ดกราฟ ต้องดึงกลับเป็นการ์ด ========================================================= */ .showcase__visual .dash { display: block; grid-template-columns: none; min-height: 0; background: var(--card); } /* ========================================================= 31. เนื้อพื้นหลัง — กันไม่ให้พื้นมืดแบนเป็นแผ่นเรียบ ========================================================= */ body::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .35; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E"); } .hero, .section, .marquee, .site-footer { position: relative; z-index: 1; } .site-header { z-index: 60; } /* ========================================================= 32. แถบความคืบหน้าการเลื่อนหน้า ========================================================= */ .scroll-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; background: linear-gradient(90deg, var(--accent), var(--accent-2)); z-index: 100; transition: width .1s linear; box-shadow: 0 0 12px -2px rgba(232,170,60,.5); } /* ========================================================= 33. สปอตไลต์ตามเมาส์บนการ์ด ========================================================= */ .feature, .course, .step, .tcard { --mx: 50%; --my: 50%; } .feature::before, .course::before, .step::before, .tcard::before { z-index: 1; } .spot-layer { position: absolute; inset: 0; pointer-events: none; z-index: 0; opacity: 0; transition: opacity .35s var(--ease); background: radial-gradient(340px circle at var(--mx) var(--my), rgba(16,185,129,.14), transparent 70%); } .feature:hover .spot-layer, .step:hover .spot-layer, .tcard:hover .spot-layer { opacity: 1; } .section--light .spot-layer { background: radial-gradient(340px circle at var(--mx) var(--my), rgba(15,93,67,.09), transparent 70%); } .feature > *, .step > *, .tcard > * { position: relative; z-index: 1; } /* ========================================================= 34. ปกการ์ดคอร์ส — ให้เป็นภาพที่ตั้งใจ ไม่ใช่พื้นเปล่า ========================================================= */ .course__cover { aspect-ratio: 16/11; background-blend-mode: normal; } .course__cover::before { content: ""; position: absolute; inset: 0; z-index: 1; opacity: .5; background-image: radial-gradient(rgba(255,255,255,.16) 1px, transparent 1px), radial-gradient(rgba(255,255,255,.1) 1px, transparent 1px); background-size: 22px 22px, 22px 22px; background-position: 0 0, 11px 11px; mask-image: radial-gradient(ellipse at 70% 25%, #000 10%, transparent 72%); } .course__cover::after { background: linear-gradient(180deg, rgba(0,0,0,.05) 0%, rgba(0,0,0,.12) 55%, rgba(0,0,0,.55) 100%); } .course__cover .subj, .course__cover .subj-icon { width: 88px; height: 88px; background: rgba(255,255,255,.12); border: 1.5px solid rgba(255,255,255,.34); box-shadow: 0 0 0 8px rgba(255,255,255,.05), 0 18px 40px -18px rgba(0,0,0,.7); transition: transform .45s var(--ease), opacity .45s var(--ease), box-shadow .35s var(--ease), background .35s var(--ease); } .course__cover .subj svg { width: 38px; height: 38px; } .course:hover .subj, .course:hover .subj-icon { background: rgba(255,255,255,.18); box-shadow: 0 0 0 10px rgba(255,255,255,.07), 0 22px 48px -18px rgba(0,0,0,.75); transform: scale(1.06) translateY(-2px); } .course__tag { background: rgba(8,14,12,.6); border: 1px solid rgba(255,255,255,.16); letter-spacing: .01em; } /* ตัวคั่นข้อมูลย่อยในการ์ด ใช้เส้น ไม่ใช้ตัวอักษร */ .course__meta { gap: .9rem; align-items: center; } .course__meta span + span { position: relative; padding-left: .9rem; } .course__meta span + span::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 12px; background: var(--line); } @media (prefers-reduced-motion: reduce) { .scroll-progress { display: none; } } /* ========================================================= 36. แก้ไอคอนวิชาในปกการ์ดที่ไม่เคยโผล่ กฎ reveal เดิมตั้งที่วงกลม .subj แต่ตัวที่ซ่อนคือ svg ข้างใน ========================================================= */ .course.reveal.in .subj svg { transform: scale(1) translateY(0); opacity: 1; } .course:hover .subj svg { transform: scale(1.06) translateY(-1px); } /* ปกให้มีมิติขึ้น วงแหวนซ้อนกับแสงมุมบน */ .course__cover .glowring { position: absolute; z-index: 1; pointer-events: none; width: 210px; height: 210px; border-radius: 50%; border: 1px solid rgba(255,255,255,.09); left: 50%; top: 50%; transform: translate(-50%,-50%); box-shadow: 0 0 0 34px rgba(255,255,255,.03); transition: transform .6s var(--ease); } .course:hover .glowring { transform: translate(-50%,-50%) scale(1.08); } .course__cover .cover-glow { position: absolute; z-index: 0; pointer-events: none; inset: -20% -10% auto -10%; height: 70%; background: radial-gradient(ellipse at 60% 0%, rgba(255,255,255,.16), transparent 65%); } /* ========================================================= 37. Hero — ตัดที่ว่างก้นจอที่ไม่ได้ใช้ ========================================================= */ .hero__grid { min-height: min(82vh, 760px); } @media (max-width: 880px) { .hero__grid { min-height: 0; } } /* ========================================================= 38. การ์ดโซนมืด — เพิ่มมิติแทนพื้นเรียบสีเดียว ========================================================= */ .section--deep .feature, .section--deep .step, .section--deep .tcard, .section--deep .faq__item, .section:not(.section--light) .feature { background: linear-gradient(180deg, rgba(255,255,255,.045) 0%, rgba(255,255,255,0) 42%), var(--card); box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 18px 40px -28px rgba(0,0,0,.9); } /* หัวข้อ features ลดขนาดลงให้สมดุลกับเนื้อหา */ #features .head-row h2.display { font-size: clamp(2rem, 3.6vw, 3.2rem); } #features .head-row { margin-bottom: clamp(1.6rem, 3vw, 2.4rem); } /* ========================================================= 39. แถบปิดท้าย — จัดให้แน่นและอ่านเป็นลำดับ ========================================================= */ .cta-band { padding: clamp(2.6rem, 5vw, 4rem) clamp(1.6rem, 4vw, 3.4rem); } .cta-band h2 { font-size: clamp(1.7rem, 3vw, 2.6rem); margin-bottom: .8rem; } .cta-band p { margin-bottom: 1.8rem; } /* ========================================================= 40. Marquee — ให้เป็นเส้นคั่นบาง ไม่ใช่แถบหนา ========================================================= */ .marquee { border-block: 1px solid rgba(255,255,255,.07); } /* ========================================================= 41. คอนทราสต์ — ให้ผ่านเกณฑ์ WCAG AA ทุกจุด ตัวอักษรขาวบนเขียวสว่างได้แค่ 2.54:1 อ่านกลางแดดไม่ออก ========================================================= */ .btn--primary { background: var(--accent); color: #05261B; font-weight: 700; } .btn--primary:hover { background: var(--accent-soft); color: #05261B; } .section--light .btn--primary, .section--light .btn--primary:hover { color: #FFFFFF; } .section--light .step__num { color: #7E570D; } .dash__head .tag { color: var(--accent-soft); } /* ========================================================= 42. พื้นที่กดบนมือถือ — ให้แตะติดง่ายด้วยนิ้วโป้ง ========================================================= */ @media (hover: none), (max-width: 760px) { .course__foot .link-arrow, .head-row .link-arrow { padding-block: .55rem; min-height: 44px; align-items: center; } .cta-contact-strip a, .faq-contact a, .brand { display: inline-flex; align-items: center; min-height: 44px; } } /* ========================================================= 43. Features — เลย์เอาต์สลับขนาด ไม่ให้ซ้ำกับบล็อกการ์ดอื่น ========================================================= */ .grid-feat { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gap); } .grid-feat > .feature { grid-column: span 5; } .grid-feat > .feature--wide { grid-column: span 7; } @media (max-width: 980px) { .grid-feat > .feature, .grid-feat > .feature--wide { grid-column: span 12; } } /* แถบคะแนนตัวอย่างในการ์ดใหญ่ */ .feat-demo { margin-top: 1.6rem; display: flex; flex-direction: column; gap: .7rem; } .fd-row { display: grid; grid-template-columns: 11.5rem 1fr auto; align-items: center; gap: .8rem; font-size: .86rem; color: var(--ink-soft); } .fd-row i { height: 6px; border-radius: 100px; position: relative; display: block; background: rgba(255,255,255,.08); overflow: hidden; } .fd-row i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w); border-radius: 100px; background: linear-gradient(90deg, var(--accent), var(--accent-soft)); transform: scaleX(0); transform-origin: left; transition: transform 1s var(--ease); } .feature.reveal.in .fd-row i::after { transform: scaleX(1); } .feature.reveal.in .fd-row:nth-child(2) i::after { transition-delay: .12s; } .feature.reveal.in .fd-row:nth-child(3) i::after { transition-delay: .24s; } .fd-row b { color: var(--ink); font-weight: 600; font-size: .84rem; min-width: 2.6rem; text-align: right; } .fd-row--fail i::after { background: linear-gradient(90deg, #A8332B, #C4453C); } .fd-row--fail b { color: #EC9C95; } @media (max-width: 560px) { .fd-row { grid-template-columns: 7.5rem 1fr auto; font-size: .8rem; } } /* ใบรับรองจำลองในการ์ดใหญ่ใบที่สอง */ .feat-cert { margin-top: 1.6rem; } .fc-doc { position: relative; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 1.1rem 1.2rem; background: rgba(255,255,255,.03); display: flex; flex-direction: column; gap: .6rem; transition: transform .4s var(--ease); } .feature--wide:hover .fc-doc { transform: translateY(-3px); } .fc-doc::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(120% 80% at 100% 0%, rgba(232,170,60,.09), transparent 60%); } .fc-doc__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .fc-doc__kind { font-size: .82rem; font-weight: 600; color: var(--accent-2); letter-spacing: .02em; } .fc-doc__no { font-size: .74rem; color: var(--ink-soft); } .fc-doc__name { font-size: 1.15rem; font-weight: 600; color: var(--ink); line-height: 1.3; } .fc-doc__course { font-size: .86rem; color: var(--ink-soft); line-height: 1.5; } .fc-doc__foot { display: flex; align-items: center; justify-content: space-between; gap: .8rem; flex-wrap: wrap; margin-top: .3rem; padding-top: .8rem; border-top: 1px dashed rgba(255,255,255,.12); } .fc-doc__date { font-size: .78rem; color: var(--ink-soft); } .fc-doc__pass { display: inline-flex; align-items: center; gap: .5rem; font-size: .82rem; font-weight: 600; color: var(--accent-soft); } .fc-seal { width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0; background: rgba(16,185,129,.16); border: 1.5px solid rgba(16,185,129,.45); color: var(--accent); display: grid; place-items: center; } .fc-seal svg { width: 14px; height: 14px; } /* กราฟเส้นเล็กในการ์ดที่ 02 */ .feat-spark { margin-top: auto; padding-top: 1.4rem; } .feat-spark svg { width: 100%; height: 84px; display: block; overflow: visible; } .fs-area { fill: rgba(16,185,129,.1); } .fs-line { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 400; stroke-dashoffset: 400; } .feature.reveal.in .fs-line { animation: drawChart 1.4s var(--ease) .35s forwards; } .fs-dot { fill: var(--accent-2); } .fs-legend { display: flex; justify-content: space-between; font-size: .78rem; color: var(--ink-soft); margin-top: .5rem; } /* รายการสิทธิ์ในการ์ดที่ 03 */ .feat-lock { margin-top: auto; padding-top: 1.4rem; display: flex; flex-direction: column; gap: .5rem; } .fl-row { display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: .6rem .85rem; border-radius: var(--radius-sm); background: rgba(255,255,255,.035); border: 1px solid var(--line); font-size: .85rem; color: var(--ink-soft); } .fl-row b { font-size: .76rem; font-weight: 600; color: var(--ink-soft); white-space: nowrap; } .fl-row--open { border-color: rgba(16,185,129,.24); background: rgba(16,185,129,.07); } .fl-row--open b { color: var(--accent-soft); } /* ให้เนื้อการ์ดดันภาพประกอบไปชิดก้นการ์ด */ .feature { display: flex; flex-direction: column; } .feature p { margin-bottom: 0; } /* ========================================================= 43. โหมดสว่างทั้งหน้า ใช้กับหน้าแรก (body.theme-light) ทำเป็น scope ที่ body เพื่อไม่ให้หน้าอื่นที่ยังเป็นโหมดมืดเพี้ยนตาม จุดหนักที่เหลือไว้ไม่ให้หน้าลอย แถบตัวเลข บล็อกปิดท้าย และท้ายเว็บ ========================================================= */ body.theme-light { --bg: #FAF8F3; --bg-deep: #F4F0E7; --ink: #16211C; --ink-soft: #55635C; --accent: #0F5D43; --accent-soft: #0B4A35; --accent-2: #9A6B12; --accent-2-soft: #7E570D; --accent-2-dark: #6B4A0A; --line: #E6DFD2; --card: #FFFFFF; --on-accent: #FFFFFF; --shadow-soft: 0 2px 4px -2px rgba(23,33,28,.06), 0 12px 28px -12px rgba(23,33,28,.14); --shadow-lift: 0 4px 8px -4px rgba(23,33,28,.08), 0 28px 56px -20px rgba(23,33,28,.22); background: var(--bg); color: var(--ink); } body.theme-light::before { opacity: .5; } /* หัวเว็บ */ body.theme-light .site-header { background: rgba(250,248,243,.86); border-bottom: 1px solid rgba(23,33,28,.07); } body.theme-light .site-header.scrolled { background: rgba(250,248,243,.96); box-shadow: 0 8px 24px -18px rgba(23,33,28,.5); } body.theme-light .nav-links a { color: var(--ink); } body.theme-light .nav-links a:hover, body.theme-light .nav-links a.is-active { color: var(--accent); } body.theme-light .nav-toggle span, body.theme-light .nav-toggle span::before, body.theme-light .nav-toggle span::after { background: var(--ink); } body.theme-light .btn--ghost { color: var(--ink); border-color: rgba(23,33,28,.2); } body.theme-light .btn--ghost:hover { border-color: rgba(23,33,28,.45); background: rgba(23,33,28,.03); } body.theme-light .btn--primary { background: var(--accent); color: #FFFFFF; box-shadow: 0 12px 26px -14px rgba(15,93,67,.6); } body.theme-light .btn--primary:hover { background: var(--accent-soft); color: #FFFFFF; } /* ฉากหลังหน้าแรก */ body.theme-light .hero { background: linear-gradient(180deg, #FBF9F5 0%, #F6F2EA 100%); } body.theme-light .hero__bg .grid-lines { opacity: .5; } body.theme-light .hero__bg .blob.b1 { background: #0F5D43; opacity: .1; } body.theme-light .hero__bg .blob.b2 { background: #C6912F; opacity: .12; } body.theme-light .hero__aurora { opacity: .35; } body.theme-light .hero__title { color: var(--ink); } body.theme-light .hero .hl { color: #8A5E0F; } body.theme-light .hero .hl svg { color: #C6912F; opacity: 1; } body.theme-light .hero__copy .lead { color: #4A5852; } body.theme-light .hero__proof { background: #FFFFFF; border-color: var(--line); color: #4A5852; box-shadow: var(--shadow-soft); } body.theme-light .hero__proof b { color: var(--ink); } body.theme-light .hero__proof-stars { color: #C6912F; } body.theme-light .hero__title::after { background: radial-gradient(ellipse at center, rgba(15,93,67,.12) 0%, transparent 70%); } /* แถบวิ่งชื่อวิชา */ body.theme-light .marquee { background: #F1ECE1; border-block-color: rgba(23,33,28,.08); color: #3B4842; } body.theme-light .marquee__track span::before { color: #A97A18; } /* แถบตัวเลข จุดหนักที่หนึ่ง */ body.theme-light .stats-band { background: #0B2B21; border-block-color: rgba(255,255,255,.08); } body.theme-light .stats--bare .stat b { background: linear-gradient(180deg, #F5C842 0%, #D19A22 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } body.theme-light .stats--bare .stat span { color: #C2D2CB; } body.theme-light .stats-band::before { background: linear-gradient(90deg, transparent, rgba(232,170,60,.55), transparent); } /* ส่วนเนื้อหาที่เคยเป็นพื้นมืด */ body.theme-light .section--deep { background: var(--bg-deep); } body.theme-light .feature, body.theme-light .dash { background: var(--card); border-color: var(--line); box-shadow: var(--shadow-soft); } body.theme-light .feature:hover { border-color: rgba(15,93,67,.28); box-shadow: var(--shadow-lift); } body.theme-light .ic { background: rgba(15,93,67,.08); border-color: rgba(15,93,67,.18); color: var(--accent); } body.theme-light .fd-row { color: #55635C; } body.theme-light .fd-row i { background: #EDE7DB; } body.theme-light .fl-row { background: #FBF9F5; border-color: var(--line); color: #55635C; } body.theme-light .fl-row--open { background: rgba(15,93,67,.07); border-color: rgba(15,93,67,.22); } body.theme-light .fl-row--open b { color: var(--accent); } body.theme-light .fc-doc { background: #FBF9F5; border-color: var(--line); } body.theme-light .fc-doc__foot { border-top-color: rgba(23,33,28,.14); } body.theme-light .fs-area { fill: rgba(15,93,67,.08); } body.theme-light .fs-legend { color: #66736C; } body.theme-light .weak--pass { background: rgba(15,93,67,.09); color: #0B4A35; } body.theme-light .weak--fail { background: rgba(168,51,43,.09); color: #96261F; } body.theme-light .dash__chart { border-color: var(--line); } body.theme-light .showcase__copy .lead { color: #4A5852; } /* บล็อกปิดท้าย จุดหนักที่สอง */ body.theme-light .cta-band { background: linear-gradient(135deg, #0B2B21 0%, #103A2B 60%, #0B2B21 100%); border-color: rgba(255,255,255,.1); box-shadow: 0 34px 70px -34px rgba(11,43,33,.6); color: #EAF1ED; } body.theme-light .cta-band h2 { color: #FFFFFF; } body.theme-light .cta-band p { color: rgba(234,241,237,.82); } body.theme-light .cta-band .btn--light { background: #E8AA3C; color: #2A1E08; border: 0; } body.theme-light .cta-band .btn--light:hover { background: #F5C842; color: #2A1E08; } body.theme-light .cta-band .btn--ghost { color: #FFFFFF; border-color: rgba(255,255,255,.5); } body.theme-light .cta-band .btn--ghost:hover { background: rgba(255,255,255,.08); border-color: #FFFFFF; } body.theme-light .cta-contact-strip a { color: rgba(234,241,237,.75); } body.theme-light .cta-contact-strip a:hover { color: #FFFFFF; } /* ท้ายเว็บ จุดหนักที่สาม */ body.theme-light .site-footer { background: #0B2B21; /* ท้ายเว็บยังเป็นพื้นเข้ม ตัวแปรสีจึงต้องกลับเป็นชุดสว่างเฉพาะในนี้ ไม่งั้นตัวหนังสือจมหาย */ --ink: #EAF1ED; --ink-soft: #AFC3B9; --line: rgba(255,255,255,.12); --accent: #34D399; --card: rgba(255,255,255,.06); color: var(--ink); } body.theme-light .site-footer .brand .mark { background: var(--accent); color: #05261B; } /* รอยต่อโซนสว่างเดิมไม่ต้องใช้แล้ว */ body.theme-light .light-zone-start, body.theme-light .light-zone-end { border-radius: 0; margin-block: 0; } body.theme-light .light-zone-start { padding-top: clamp(3.5rem, 6.5vw, 5.5rem); } body.theme-light .light-zone-end { padding-bottom: clamp(2.4rem, 4vw, 3.4rem); } body.theme-light .light-zone-start::before { display: none; } /* จุดที่คอนทราสต์ตกเฉพาะตอนพลิกเป็นโหมดสว่าง วัดด้วย contrast-audit แล้วแก้ทีละจุด */ body.theme-light .fd-row--fail b { color: #A8332B; } body.theme-light .fc-doc__kind { color: #8A5E0F; } body.theme-light .site-footer .foot-bottom { color: #C3D3CA; } /* ========================================================= 44. โหมดสว่าง — ส่วนที่ใช้เฉพาะหน้าอื่น (หัวหน้าย่อย ฟอร์มเข้าระบบ หลังบ้าน) ========================================================= */ /* ---- หัวของหน้าย่อย ---- */ body.theme-light .page-hero { background: linear-gradient(160deg, #F7F3EA 0%, #FAF8F3 60%); border-bottom: 1px solid rgba(23,33,28,.06); } body.theme-light .page-hero::before { opacity: .5; } body.theme-light .page-hero::after { background: radial-gradient(circle, rgba(15,93,67,.07) 0%, transparent 65%); } body.theme-light .page-hero__glow { background: radial-gradient(circle, rgba(198,145,47,.1) 0%, transparent 65%); } body.theme-light .page-hero h1 { color: var(--ink); } body.theme-light .page-hero .lead, body.theme-light .page-hero p { color: #4A5852; } body.theme-light .breadcrumb, body.theme-light .breadcrumb a { color: #66736C; } body.theme-light .breadcrumb a:hover { color: var(--accent); } body.theme-light .page-hero__stats .stat-num { color: var(--accent); } body.theme-light .page-hero__stats .stat-num span { color: #8A5E0F; } body.theme-light .page-hero__stats .stat-label { color: #66736C; } /* ป้ายขั้นตอนย่อในหัวหน้า */ body.theme-light .hero-step { background: #FFFFFF; border-color: var(--line); box-shadow: var(--shadow-soft); } body.theme-light .hero-step:hover { border-color: rgba(15,93,67,.3); background: rgba(15,93,67,.04); } body.theme-light .hero-step--final { border-color: rgba(154,107,18,.35); background: rgba(154,107,18,.07); } body.theme-light .hero-step__num { background: rgba(15,93,67,.12); color: var(--accent); } body.theme-light .hero-step--final .hero-step__num { background: #9A6B12; color: #FFFFFF; } body.theme-light .hero-step__label { color: var(--ink); } /* ---- การ์ดและกล่องทั่วไปในหน้าอื่น ---- */ body.theme-light .card, body.theme-light .course { background: var(--card); border-color: var(--line); box-shadow: var(--shadow-soft); } body.theme-light .card:hover { border-color: rgba(15,93,67,.28); box-shadow: var(--shadow-lift); } /* ---- ฟอร์มเข้าระบบและลงทะเบียน ---- */ body.theme-light .auth { background: var(--bg); } body.theme-light .auth__aside { background: linear-gradient(145deg, #0B2B21 0%, #12442F 100%); /* ฝั่งนี้ยังเป็นพื้นเข้ม ตัวแปรสีจึงต้องกลับเป็นชุดสว่างเฉพาะในนี้ */ --ink: #EAF1ED; --ink-soft: #AFC3B9; --accent: #34D399; --accent-2: #F0C24E; --line: rgba(255,255,255,.14); color: #EAF1ED; } body.theme-light .auth__aside h2, body.theme-light .auth__aside .point { color: #FFFFFF; } body.theme-light .auth__aside .point svg { color: #F0C24E; } body.theme-light .auth__aside .tcard, body.theme-light .auth__tcard { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.16); color: #EAF1ED; } body.theme-light .auth__brand { color: #FFFFFF; } body.theme-light .auth__brand .mark { background: rgba(255,255,255,.16); color: #FFFFFF; } body.theme-light .auth__box h1 { color: var(--ink); } body.theme-light .auth__box .sub, body.theme-light .auth__row label { color: #55635C; } body.theme-light .field input, body.theme-light .field select, body.theme-light .field textarea, body.theme-light input[type="text"], body.theme-light input[type="email"], body.theme-light input[type="password"], body.theme-light input[type="tel"], body.theme-light select, body.theme-light textarea { background: #FFFFFF; border-color: var(--line); color: var(--ink); } body.theme-light input::placeholder, body.theme-light textarea::placeholder { color: #8C9A93; } body.theme-light .field label, body.theme-light label { color: var(--ink); } body.theme-light .field input:focus, body.theme-light select:focus, body.theme-light textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(15,93,67,.12); } /* ---- หน้าเข้าระบบผู้ดูแล ---- */ body.theme-light .admin-login-bg { background: linear-gradient(160deg, #F7F3EA 0%, #FAF8F3 60%); } body.theme-light .admin-login-box { background: #FFFFFF; border-color: var(--line); box-shadow: var(--shadow-lift); } body.theme-light .admin-login-logo { color: var(--accent); } body.theme-light .admin-login-back { color: #66736C; } body.theme-light .admin-login-back:hover { color: var(--accent); } /* ========================================================= 45. โหมดสว่าง — หลังบ้านและห้องเรียน (dashboard, admin) แถบข้างยังเป็นเขียวเข้ม พื้นที่ทำงานเป็นครีม อ่านง่ายและแยกโซนชัด ========================================================= */ body.dash-body.theme-light .dash { background: var(--bg); } body.dash-body.theme-light .dash__body, body.dash-body.theme-light .dash__main { background: var(--bg); } /* แถบข้าง — พื้นเข้ม ตัวแปรสีจึงต้องกลับเป็นชุดสว่างเฉพาะในนี้ */ body.theme-light .dash__sidebar { background: #0B2B21; border-right: 1px solid rgba(255,255,255,.08); --ink: #EAF1ED; --ink-soft: #AFC3B9; --line: rgba(255,255,255,.12); --accent: #34D399; --accent-2: #F0C24E; --card: rgba(255,255,255,.06); color: var(--ink); } body.theme-light .dash__sidebar a, body.theme-light .dash__nav a { color: #C9D8D0; } body.theme-light .dash__sidebar a:hover, body.theme-light .dash__nav a:hover { color: #FFFFFF; background: rgba(255,255,255,.07); } body.theme-light .dash__nav a.is-active { background: rgba(52,211,153,.16); color: #FFFFFF; } /* กฎนี้เขียนไว้สำหรับวงกลมชื่อในแถบข้างที่พื้นเข้ม แต่เขียนกว้างเกินไป เลยไปโดนวงกลมชื่อบนแถบบนที่พื้นสว่างด้วย กลายเป็นตัวอักษรขาวบนพื้นขาว มองไม่เห็นเลย จึงต้องจำกัดให้อยู่แต่ในแถบข้าง */ body.theme-light .dash__sidebar .dash__avatar { background: rgba(255,255,255,.12); color: #FFFFFF; } body.theme-light .dash__topbar .dash__avatar { background: rgba(15,93,67,.12); color: var(--accent); border-color: rgba(15,93,67,.3); } /* การ์ดและตารางในพื้นที่ทำงาน */ body.theme-light .dash__card, body.theme-light .dash__cert, body.theme-light .adm-table-wrap, body.theme-light .adm-card { background: var(--card); border-color: var(--line); box-shadow: var(--shadow-soft); } body.theme-light .adm-table thead { background: #F4F0E7; border-bottom-color: var(--line); } body.theme-light .adm-table th { color: #55635C; } body.theme-light .adm-table td { color: var(--ink); border-bottom-color: rgba(23,33,28,.07); } body.theme-light .adm-table tbody tr:hover { background: rgba(15,93,67,.04); } body.theme-light .adm-tab { border-color: var(--line); color: #55635C; } body.theme-light .adm-tab:hover { background: rgba(23,33,28,.04); color: var(--ink); } body.theme-light .adm-tab.is-active { background: rgba(15,93,67,.1); color: var(--accent); border-color: rgba(15,93,67,.28); } body.theme-light .adm-tab-count { background: rgba(23,33,28,.07); color: #55635C; } body.theme-light .adm-tab.is-active .adm-tab-count { background: rgba(15,93,67,.16); color: var(--accent); } body.theme-light .adm-tab-count--warn { background: rgba(154,107,18,.14) !important; color: #7E570D !important; } body.theme-light .adm-tab-count--ok { background: rgba(15,93,67,.14) !important; color: var(--accent) !important; } body.theme-light .adm-badge--ok { background: rgba(15,93,67,.12); color: #0B4A35; border-color: rgba(15,93,67,.25); } body.theme-light .adm-badge--danger { background: rgba(168,51,43,.1); color: #96261F; border-color: rgba(168,51,43,.25); } body.theme-light .adm-badge--warn { background: rgba(154,107,18,.12); color: #7E570D; border-color: rgba(154,107,18,.28); } body.theme-light .adm-btn { border-color: var(--line); color: var(--ink); } body.theme-light .adm-btn:hover { background: rgba(23,33,28,.04); } body.theme-light .adm-modal-overlay { background: rgba(23,33,28,.45); } body.theme-light .adm-modal { background: #FFFFFF; border-color: var(--line); box-shadow: var(--shadow-lift); } body.theme-light .adm-modal h3, body.theme-light .adm-modal label { color: var(--ink); } /* ผลสอบในห้องเรียน */ body.theme-light .result-icon { display: grid; place-items: center; width: 64px; height: 64px; margin: 0 auto .8rem; border-radius: 50%; } body.theme-light .result-icon svg { width: 30px; height: 30px; } /* ชื่อทีมงานในหน้าเกี่ยวกับเรา ตัวย่ออยู่บรรทัดเดียวกับชื่อแล้ว */ /* เส้นคั่นข้อมูลย่อยแทนจุดกลางที่เคยพิมพ์ไว้ในเนื้อหา */ .sep { display: inline-block; width: 1px; height: .85em; background: currentColor; opacity: .32; margin-inline: .5rem; vertical-align: -.1em; } /* ========================================================= 46. พื้นที่กดบนมือถือ ของที่วัดแล้วยังต่ำกว่า 44px ========================================================= */ @media (hover: none), (max-width: 760px) { .foot-nav a, .foot-links a, .foot-mail, .toc a, .policy-toc a, .breadcrumb a, .adm-btn, .adm-tab, .dash__nav a, .alt a, .auth__row a { min-height: 44px; display: inline-flex; align-items: center; } .adm-btn, .adm-tab { padding-block: .55rem; } .adm-modal-close, .pwd-toggle { min-width: 44px; min-height: 44px; } .dash__logout, .dash__sched-btn, .dash__see-all, .admin-login-logo, .admin-login-back, .link-arrow, .faq-contact a { min-height: 44px; display: inline-flex; align-items: center; } .dash__sched-btn { padding-block: .55rem; } .foot-links, .foot-nav { gap: .4rem 1.3rem; } } /* ป้ายเล็กที่วัดแล้วคอนทราสต์ยังไม่ถึงเกณฑ์ในโหมดสว่าง */ body.theme-light .dash__cert-tag { color: #3B4842; border-color: rgba(23,33,28,.18); } .dash__cert-tag--wait { color: var(--accent-2); border-color: rgba(232,170,60,.4); } body.theme-light .dash__cert-tag--wait { color: #7E570D; border-color: rgba(154,107,18,.35); background: rgba(154,107,18,.06); } /* แท่งกราฟในหลังบ้าน พื้นฐานเดิมเป็นขาวจาง มองไม่เห็นบนพื้นครีม */ /* ========================================================= 47. พื้นที่กดบนมือถือ ของที่เหลือ 41-43px (กล่อง modal ที่วัดได้ 43 เป็นค่าหลอก มันย่อ scale(.98) ตอนปิดอยู่ ไม่ต้องแก้) ========================================================= */ @media (hover: none), (max-width: 760px) { .chip { min-height: 44px; display: inline-flex; align-items: center; } .dash__logo { min-height: 44px; } .adm-btn { min-width: 44px; justify-content: center; } /* อีเมล/เบอร์ในเนื้อความหน้านโยบาย เป็นช่องทางติดต่อจริง ต้องกดง่ายแม้อยู่ในย่อหน้า */ .policy-body a[href^="mailto:"], .policy-body a[href^="tel:"], .policy-contact-item a { min-height: 44px; display: inline-flex; align-items: center; } } /* ========================================================= 48. แถบบนหลังบ้านที่จอแคบ อวาตาร์ถูกตัดขาดที่ขอบขวา (วัดที่ 360px) ช่องค้นหากว้างตายตัว 160px + padding เลยดันวงกลมตกขอบ ========================================================= */ @media (max-width: 560px) { .dash__topbar-right { width: 100%; } .dash__search { flex: 1 1 auto; min-width: 0; } .dash__search input { width: 100%; min-width: 0; } .dash__avatar { flex-shrink: 0; } } /* ========================================================= 49. หลังบ้าน ทำให้ใช้ง่าย อ่านง่าย และดูเป็นระบบเดียวกัน ปัญหาที่แก้ในหมวดนี้ 1. การ์ดตัวเลขบนสุดใช้พื้น 4 สี ทำให้ "รออนุมัติ" อ่านเป็นความผิดพลาด ทั้งที่มันคือของที่รอให้ทำ ตอนนี้การ์ดเป็นทรงเดียวกันหมด เหลือใบเดียวที่เน้นคือใบที่มีงานค้างจริง 2. ทุกแถวในตารางมีปุ่มสองปุ่มน้ำหนักเท่ากัน 12 แถวเท่ากับ 24 ปุ่มแย่งกันเอง เปลี่ยนเป็นปุ่มหลักหนึ่งปุ่ม ที่เหลือยุบเข้าเมนูจุดสามจุด 3. อนุมัติทีละคนไม่ไหวถ้ามีคนรอเยอะ เพิ่มการติ๊กหลายแถวแล้วอนุมัติรวดเดียว 4. ช่องที่ไม่มีข้อมูลเว้นว่างไว้เฉย ๆ ดูเหมือนระบบพัง เปลี่ยนเป็นบอกตรง ๆ ว่ายังไม่มี 5. ตัวเลขในตารางไม่เรียงหลัก อ่านเทียบกันยาก ========================================================= */ /* 49.1 ตัวเลขทุกจุดในระบบเรียงหลักตรงกัน อ่านเทียบบรรทัดต่อบรรทัดได้ */ .adm-table td, .adm-stat-num, .adm-score, .adm-weak-score, .adm-tab-count, .adm-chart__ytick, .dash__stat-num { font-variant-numeric: tabular-nums; } /* 49.2 การ์ดตัวเลขบนสุด ทรงเดียวกันหมด แยกความหมายด้วยแถบซ้ายไม่ใช่พื้นทั้งใบ */ .adm-stat { position: relative; overflow: hidden; padding-left: 1.45rem; } .adm-stat::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--line); } .adm-stat--accent::before { background: var(--accent); } .adm-stat--gold::before { background: var(--accent-2); } .adm-stat--warn::before { background: #A8332B; } body.theme-light .adm-stat, body.theme-light .adm-stat--accent, body.theme-light .adm-stat--gold, body.theme-light .adm-stat--warn { background: #FFFFFF; border-color: var(--line); } /* ใบที่มีงานค้างจริง คือใบเดียวที่ควรดึงสายตา */ .adm-stat--todo { padding-bottom: .95rem; } body.theme-light .adm-stat--todo { background: linear-gradient(180deg, rgba(154,107,18,.075), rgba(154,107,18,.02)); border-color: rgba(154,107,18,.32); } .adm-stat--todo::before { background: var(--accent-2); width: 4px; } .adm-stat__go { margin-top: .5rem; align-self: flex-start; display: inline-flex; align-items: center; gap: .35rem; font-size: .82rem; font-weight: 600; color: #8A5E0F; text-decoration: none; border-bottom: 1px solid rgba(138,94,15,.35); padding-bottom: 1px; } .adm-stat__go:hover { color: #6B4A0A; border-bottom-color: currentColor; } .adm-stat__go svg { width: 13px; height: 13px; } /* 49.3 ตาราง แน่นขึ้น หัวตารางค้างไว้ตอนเลื่อน แถวที่ชี้อยู่เห็นชัด */ .adm-table th { padding: .7rem 1rem; letter-spacing: .06em; font-size: .74rem; } .adm-table td { padding: .62rem 1rem; } body.theme-light .adm-table thead { background: #F4F1E9; border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 2; } body.theme-light .adm-table td { border-bottom-color: rgba(23,33,28,.07); } body.theme-light .adm-table tbody tr:hover { background: rgba(15,93,67,.045); } /* ช่องที่ยังไม่มีข้อมูล บอกตรง ๆ ดีกว่าเว้นว่างให้เดา */ .adm-none { color: var(--ink-soft); font-size: .82rem; opacity: .85; } /* บรรทัดสรุปใต้ตาราง บอกว่ากำลังดูกี่แถวจากทั้งหมดเท่าไร */ .adm-tablefoot { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.1rem; padding: .7rem 1rem; border-top: 1px solid var(--line); font-size: .84rem; color: var(--ink-soft); } .adm-tablefoot b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; } /* หน้าจอตอนไม่มีข้อมูลเลย ต้องบอกว่าให้ทำอะไรต่อ ไม่ใช่ปล่อยขาว */ .adm-empty { display: flex; flex-direction: column; align-items: center; gap: .55rem; padding: 3.2rem 1.5rem; text-align: center; } .adm-empty.is-show { display: flex; } .adm-empty svg { width: 34px; height: 34px; color: var(--ink-soft); opacity: .5; } .adm-empty b { font-size: .98rem; font-weight: 600; color: var(--ink); } .adm-empty span { font-size: .87rem; color: var(--ink-soft); max-width: 34ch; line-height: 1.6; } /* 49.4 ปุ่มในแถว หนึ่งปุ่มหลัก ที่เหลืออยู่ในเมนูจุดสามจุด */ .adm-actions { align-items: center; justify-content: flex-end; } .adm-more { position: relative; } .adm-more__btn { width: 30px; height: 30px; border-radius: 7px; border: 1px solid transparent; background: transparent; color: var(--ink-soft); cursor: pointer; display: grid; place-items: center; transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease); } .adm-more__btn svg { width: 16px; height: 16px; } .adm-more__btn:hover { background: rgba(23,33,28,.06); color: var(--ink); border-color: var(--line); } .adm-more__btn[aria-expanded="true"] { background: rgba(23,33,28,.08); color: var(--ink); border-color: var(--line); } .adm-more__menu { position: absolute; right: 0; top: calc(100% + 5px); z-index: 30; min-width: 172px; padding: .3rem; background: var(--card); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 18px 40px -20px rgba(0,0,0,.45); display: none; } body.theme-light .adm-more__menu { background: #FFFFFF; box-shadow: var(--shadow-lift); } .adm-more__menu.is-open { display: block; } .adm-more__menu button { display: flex; align-items: center; gap: .55rem; width: 100%; padding: .5rem .6rem; border-radius: 7px; border: 0; background: none; font-family: inherit; font-size: .86rem; color: var(--ink); text-align: left; cursor: pointer; transition: background var(--dur) var(--ease); } .adm-more__menu button svg { width: 15px; height: 15px; flex-shrink: 0; color: var(--ink-soft); } .adm-more__menu button:hover { background: rgba(15,93,67,.08); } .adm-more__menu button.is-danger { color: #A8332B; } .adm-more__menu button.is-danger svg { color: #A8332B; } .adm-more__menu button.is-danger:hover { background: rgba(168,51,43,.09); } .adm-more__sep { height: 1px; margin: .3rem .2rem; background: var(--line); } /* 49.5 ติ๊กหลายแถวแล้วสั่งงานรวดเดียว งานหลักของหน้านี้คืออนุมัติ ไม่ควรกดทีละคน */ /* 49.6 กราฟแท่ง ให้มีเส้นฐาน เส้นเกณฑ์ผ่าน และแกนค่า อ่านได้โดยไม่ต้องพึ่งตัวเลขบนหัวแท่ง */ /* กราฟยืดเต็มความสูงการ์ด ไม่งั้นเหลือช่องว่างใหญ่ใต้กราฟตอนการ์ดข้างสูงกว่า */ .adm-chart { display: grid; grid-template-columns: 34px 1fr; gap: 0 .6rem; flex: 1 1 auto; min-height: 200px; } .adm-chart__y { position: relative; height: 100%; min-height: 200px; font-size: .7rem; color: var(--ink-soft); } .adm-chart__ytick { position: absolute; right: 0; transform: translateY(-50%); } .adm-chart__plot { position: relative; height: 100%; min-height: 200px; } .adm-chart__grid { position: absolute; inset: 0; pointer-events: none; } .adm-chart__grid span { position: absolute; left: 0; right: 0; height: 1px; background: var(--line); } .adm-chart__pass { position: absolute; left: 0; right: 0; height: 0; border-top: 1.5px dashed rgba(15,93,67,.5); } .adm-chart__pass b { position: absolute; right: 0; top: -1.15rem; font-size: .69rem; font-weight: 600; color: var(--accent); background: var(--card); padding: 0 .3rem; border-radius: 4px; } .adm-chart__bars { position: absolute; inset: 0; display: flex; align-items: flex-end; gap: .8rem; } .adm-chart__col { flex: 1; height: 100%; display: flex; align-items: flex-end; } .adm-chart__bar { width: 100%; height: var(--h, 0%); min-height: 3px; border-radius: 5px 5px 0 0; position: relative; background: var(--accent); transition: height .8s var(--ease); } .adm-chart__bar--mid { background: #B8860B; } .adm-chart__bar--low { background: #A8332B; } .adm-chart__bar--none { background: repeating-linear-gradient(45deg, rgba(23,33,28,.07) 0 5px, transparent 5px 10px); border: 1px dashed var(--line); } .adm-chart__val { position: absolute; left: 50%; top: -1.3rem; transform: translateX(-50%); font-size: .74rem; font-weight: 700; color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums; } .adm-chart__bar--none .adm-chart__val { font-weight: 500; color: var(--ink-soft); font-size: .7rem; } .adm-chart__xrow { display: flex; gap: .8rem; margin-top: .55rem; } .adm-chart__x { flex: 1; text-align: center; font-size: .73rem; line-height: 1.35; color: var(--ink-soft); overflow-wrap: anywhere; } .adm-chart__legend { display: flex; flex-wrap: wrap; gap: .5rem 1.1rem; margin-top: 1rem; font-size: .78rem; color: var(--ink-soft); } .adm-chart__legend span { display: inline-flex; align-items: center; gap: .4rem; } .adm-chart__key { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; } /* 49.7 การ์ดบทที่ทำพลาดบ่อย เดิมชื่อบทถูกตัดกลางคำจนอ่านไม่รู้เรื่อง */ .adm-weak-item b { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.4; } .adm-weak-item { align-items: center; gap: .85rem; } .adm-weak-score { font-size: 1.05rem; } /* 49.8 แถบข้างซ้าย บอกว่ากำลังใช้งานในชื่อใคร แทนป้าย ADMIN PANEL ที่ไม่ได้บอกอะไร */ .adm-who { display: flex; align-items: center; gap: .6rem; padding: .6rem .7rem; margin-bottom: 1.5rem; border: 1px solid rgba(255,255,255,.14); border-radius: 10px; background: rgba(255,255,255,.05); } .adm-who__av { width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; background: var(--accent); color: #FFFFFF; display: grid; place-items: center; font-size: .85rem; font-weight: 700; } .adm-who__txt { min-width: 0; line-height: 1.3; overflow: hidden; } .adm-who__txt b { display: block; font-size: .87rem; font-weight: 600; color: #EAF1ED; } .adm-who__txt span { display: block; font-size: .74rem; color: #A9C0B5; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* 49.9 ปุ่มบนสุดของหน้า หนึ่งหน้าควรมีปุ่มหลักใบเดียว */ .adm-btn svg { width: 14px; height: 14px; } /* 49.10 พื้นที่กดบนมือถือของของใหม่ในรอบนี้ */ @media (hover: none), (max-width: 760px) { .adm-more__btn { min-width: 44px; min-height: 44px; } .adm-more__menu button { min-height: 44px; } .adm-stat__go { min-height: 44px; display: inline-flex; align-items: center; } } /* จอแคบ การ์ดตัวเลขเรียงเดี่ยวอ่านง่ายกว่าบีบสองใบ */ @media (max-width: 520px) { .adm-stats { grid-template-columns: 1fr; } .adm-chart { grid-template-columns: 28px 1fr; } } /* 49.11 แถบแจ้งผลสั้น ๆ ทุกการกดต้องมีอะไรตอบกลับ ไม่งั้นคนกดซ้ำเพราะไม่แน่ใจว่าติดไหม */ .adm-toast { position: fixed; left: 50%; bottom: 1.6rem; z-index: 300; transform: translate(-50%, .8rem); max-width: min(92vw, 460px); padding: .75rem 1.15rem; border-radius: 10px; background: #0B2B21; color: #EAF1ED; font-size: .92rem; line-height: 1.5; box-shadow: 0 20px 44px -22px rgba(0,0,0,.6); opacity: 0; pointer-events: none; transition: opacity .22s var(--ease), transform .22s var(--ease); } .adm-toast.is-show { opacity: 1; transform: translate(-50%, 0); } @media (prefers-reduced-motion: reduce) { .adm-toast { transition: none; } } /* 49.12 สองคอลัมน์ที่ต้องยุบเป็นแถวเดียวบนจอแคบ ของเดิมเขียน grid-template-columns ไว้ใน style ของแท็กโดยตรง คำสั่งใน media query จึงสู้ไม่ได้ ที่จอ 390 การ์ดสองใบเลยถูกบีบจนเนื้อหาโดนตัดหาย */ .adm-split { display: grid; grid-template-columns: 1fr 300px; gap: 1.25rem; align-items: stretch; } @media (max-width: 900px) { .adm-split { grid-template-columns: 1fr; } } /* แถบบนของหน้าหลังบ้าน ตัวกรองกับปุ่มต้องตกบรรทัดได้ ไม่ใช่ล้นออกนอกจอ */ .dash__topbar-right { flex-wrap: wrap; } @media (max-width: 760px) { .dash__topbar-right { width: 100%; } .dash__topbar-right > select { flex: 1 1 160px; min-width: 0; } } /* 49.13 ตารางบนมือถือ เปลี่ยนเป็นการ์ดแทนการเลื่อนซ้ายขวา ของเดิมเลื่อนแนวนอนได้ก็จริง แต่ปุ่ม "อนุมัติ" ไปอยู่นอกจอ งานหลักของหน้านี้เลยต้องเลื่อนหาก่อนทุกครั้ง เท่ากับใช้บนมือถือไม่ได้จริง */ @media (max-width: 760px) { .adm-table-wrap:has(.adm-table--cards) { overflow-x: visible; } .adm-table--cards { min-width: 0 !important; display: block; } .adm-table--cards thead { display: none; } .adm-table--cards tbody { display: block; padding: .7rem; } .adm-table--cards tr { display: block; position: relative; border: 1px solid var(--line); border-radius: 11px; padding: .9rem 1rem; margin-bottom: .65rem; background: var(--card); } body.theme-light .adm-table--cards tr { background: #FFFFFF; } .adm-table--cards tr:last-child { margin-bottom: 0; } .adm-table--cards tr:hover { background: var(--card); } body.theme-light .adm-table--cards tr:hover { background: #FFFFFF; } .adm-table--cards td { display: flex; align-items: baseline; gap: .8rem; width: auto; padding: .3rem 0; border: 0; } .adm-table--cards td::before { content: attr(data-label); flex: 0 0 84px; color: var(--ink-soft); font-size: .79rem; line-height: 1.5; } /* ชื่อคนขึ้นเต็มบรรทัดบนสุด ไม่ต้องมีป้ายกำกับ */ .adm-table--cards td.adm-cell-main { padding-right: 2.6rem; padding-bottom: .55rem; } .adm-table--cards td.adm-cell-main::before { content: none; } /* ช่องติ๊กลอยมุมขวาบนของการ์ด */ /* ปุ่มอยู่ล่างสุดของการ์ด กดถึงด้วยนิ้วโป้ง */ .adm-table--cards td.adm-cell-actions { padding-top: .7rem; margin-top: .5rem; border-top: 1px solid var(--line); } .adm-table--cards td.adm-cell-actions::before { content: none; } .adm-table--cards .adm-actions { width: 100%; justify-content: flex-start; gap: .5rem; } .adm-table--cards .adm-actions > .adm-btn { flex: 1 1 auto; justify-content: center; min-height: 44px; } .adm-table--cards .adm-more { margin-left: auto; } .adm-tablefoot { justify-content: center; } } /* ========================================================= 50. เส้นทางชำระเงิน หน้า /checkout/ เดิมทั้งเว็บไม่มีหน้าจ่ายเงินเลยสักหน้า ทั้งที่คำถามพบบ่อยหน้าแรก เขียนไว้ว่ารับโอน พร้อมเพย์ และให้แนบสลิปในระบบ ========================================================= */ .page-hero--tight { padding-block: clamp(3.5rem, 8vw, 5.5rem) clamp(2rem, 3.5vw, 3rem); } /* แถบขั้นตอน บอกว่าอยู่ตรงไหนและเหลืออีกกี่ขั้น */ .pay-steps { list-style: none; margin: 0 0 2rem; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: .6rem; } .pay-step { display: flex; align-items: center; gap: .6rem; padding: .75rem .9rem; border-radius: 10px; border: 1px solid var(--line); background: var(--card); font-size: .87rem; color: var(--ink-soft); line-height: 1.35; } body.theme-light .pay-step { background: #FFFFFF; } .pay-step__n { width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; font-size: .78rem; font-weight: 700; background: rgba(23,33,28,.07); color: var(--ink-soft); } .pay-step.is-done { border-color: rgba(15,93,67,.28); } .pay-step.is-done .pay-step__n { background: rgba(15,93,67,.14); color: var(--accent); } .pay-step.is-now { border-color: var(--accent); color: var(--ink); font-weight: 600; box-shadow: 0 0 0 3px rgba(15,93,67,.09); } .pay-step.is-now .pay-step__n { background: var(--accent); color: #FFFFFF; } @media (max-width: 800px) { .pay-steps { grid-template-columns: 1fr 1fr; } } .pay-grid { display: grid; grid-template-columns: minmax(0,1fr) 330px; gap: 1.5rem; align-items: start; } @media (max-width: 940px) { .pay-grid { grid-template-columns: 1fr; } } .pay-main { display: flex; flex-direction: column; gap: 1.1rem; min-width: 0; } .pay-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem; } body.theme-light .pay-card { background: #FFFFFF; box-shadow: var(--shadow-sm); } .pay-card__title { font-size: 1.05rem; font-weight: 700; color: var(--ink); margin: 0 0 1.1rem; } .pay-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } @media (max-width: 560px) { .pay-row { grid-template-columns: 1fr; } } /* เลือกวิธีโอน ใช้ปุ่มตัวเลือกจริง กดที่การ์ดทั้งใบได้ */ .pay-methods { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; margin-bottom: 1.1rem; } @media (max-width: 560px) { .pay-methods { grid-template-columns: 1fr; } } .pay-method { cursor: pointer; } .pay-method input { position: absolute; opacity: 0; width: 0; height: 0; } .pay-method__box { display: flex; align-items: center; gap: .8rem; padding: .9rem 1rem; border-radius: 11px; border: 1.5px solid var(--line); background: transparent; transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease); min-height: 44px; } .pay-method__ico { width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0; display: grid; place-items: center; background: rgba(15,93,67,.1); color: var(--accent); } .pay-method__ico svg { width: 19px; height: 19px; } .pay-method__txt { line-height: 1.35; min-width: 0; } .pay-method__txt b { display: block; font-size: .93rem; font-weight: 600; color: var(--ink); } .pay-method__txt span { display: block; font-size: .8rem; color: var(--ink-soft); } .pay-method:hover .pay-method__box { border-color: rgba(15,93,67,.4); } .pay-method input:checked + .pay-method__box { border-color: var(--accent); background: rgba(15,93,67,.05); } .pay-method input:focus-visible + .pay-method__box { outline: 2px solid var(--accent-2); outline-offset: 2px; } /* ปลายทางที่จะโอนเข้า */ .pay-dest { display: grid; gap: .6rem; padding: 1.1rem 1.2rem; border-radius: 11px; background: rgba(15,93,67,.05); border: 1px solid rgba(15,93,67,.18); } .pay-dest__row { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; font-size: .93rem; } .pay-dest__row span { color: var(--ink-soft); flex-shrink: 0; } .pay-dest__row b { color: var(--ink); font-weight: 600; text-align: right; } .pay-mono { font-family: "IBM Plex Mono", Consolas, monospace; letter-spacing: .02em; font-variant-numeric: tabular-nums; } /* ยังไม่ได้ตั้งค่าบัญชี ห้ามโชว์เลขมั่ว ให้พาไปหาทีมงานแทน */ .pay-dest--empty { background: rgba(154,107,18,.07); border-color: rgba(154,107,18,.3); display: block; } .pay-dest--empty b { display: block; font-size: .97rem; color: #8A5E0F; margin-bottom: .3rem; } .pay-dest--empty p { font-size: .89rem; color: var(--ink-soft); line-height: 1.6; margin: 0 0 .9rem; } /* ช่องแนบสลิป */ .pay-drop { position: relative; display: flex; flex-direction: column; align-items: center; gap: .35rem; padding: 1.6rem 1.2rem; text-align: center; border: 1.5px dashed var(--line); border-radius: 12px; background: rgba(23,33,28,.02); transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease); } .pay-drop.is-over { border-color: var(--accent); background: rgba(15,93,67,.06); } .pay-drop input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; } .pay-drop__ico { color: var(--accent); } .pay-drop__ico svg { width: 26px; height: 26px; } .pay-drop__txt { font-size: .92rem; font-weight: 500; color: var(--ink); overflow-wrap: anywhere; } .pay-drop small { font-size: .78rem; color: var(--ink-soft); } .pay-preview { display: block; margin-top: .8rem; max-height: 260px; width: auto; height: auto; border-radius: 10px; border: 1px solid var(--line); } /* display:block ข้างบนชนะ attribute hidden กล่องรูปเปล่าเลยโผล่ตั้งแต่ยังไม่เลือกไฟล์ */ .pay-preview[hidden] { display: none; } .pay-total { font-size: .95rem; color: var(--ink-soft); margin: 1.2rem 0 1rem; } .pay-total b { color: var(--ink); font-weight: 700; font-size: 1.1rem; } .pay-submit { width: 100%; justify-content: center; } .pay-note { font-size: .82rem; color: var(--ink-soft); text-align: center; margin-top: .7rem; } /* หน้าจอหลังส่งสลิปสำเร็จ */ .pay-done { text-align: center; padding: 1rem 0 .5rem; } .pay-done__ico { display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: rgba(15,93,67,.12); color: var(--accent); margin-bottom: .9rem; } .pay-done__ico svg { width: 28px; height: 28px; } .pay-done h3 { font-size: 1.2rem; font-weight: 700; color: var(--ink); margin: 0 0 .5rem; } .pay-done p { color: var(--ink-soft); max-width: 44ch; margin: 0 auto; line-height: 1.65; } .pay-done__ref { margin-top: 1rem !important; font-size: .9rem; } .pay-done__ref b { color: var(--ink); font-family: "IBM Plex Mono", Consolas, monospace; } .pay-done__act { display: flex; gap: .7rem; justify-content: center; flex-wrap: wrap; margin-top: 1.4rem; } /* สรุปรายการด้านขวา */ .pay-side { display: flex; flex-direction: column; gap: 1rem; position: sticky; top: 96px; } @media (max-width: 940px) { .pay-side { position: static; } } .pay-summary, .pay-help { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.35rem 1.4rem; } body.theme-light .pay-summary, body.theme-light .pay-help { background: #FFFFFF; box-shadow: var(--shadow-sm); } .pay-sum-row { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; padding: .5rem 0; border-bottom: 1px solid var(--line); font-size: .92rem; } .pay-sum-row span { color: var(--ink-soft); flex-shrink: 0; } .pay-sum-row b { color: var(--ink); font-weight: 600; text-align: right; } .pay-sum-row--total { border-bottom: 0; padding-top: .85rem; } .pay-sum-row--total span { color: var(--ink); font-weight: 600; } .pay-sum-row--total b { font-family: var(--font-display); font-size: 1.5rem; font-weight: 800; color: var(--accent); } .pay-incl { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .5rem; } .pay-incl li { position: relative; padding-left: 1.5rem; font-size: .86rem; color: var(--ink-soft); line-height: 1.55; } .pay-incl li::before { content: ""; position: absolute; left: 0; top: .42em; width: 13px; height: 8px; border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(-45deg); } .pay-help b { display: block; font-size: .95rem; font-weight: 600; color: var(--ink); margin-bottom: .3rem; } .pay-help p { font-size: .87rem; color: var(--ink-soft); line-height: 1.6; margin: 0 0 .8rem; } @media (hover: none), (max-width: 760px) { .pay-help .link-arrow, .pay-done__act .btn { min-height: 44px; align-items: center; } } /* ========================================================= 51. หน้าตรวจสอบใบรับรอง /verify/ ถ้าใบรับรองมีผลกับการจ้างงานจริง หน้านี้คือหน้าที่นายจ้างเปิด จึงต้องอ่านง่ายในสามวินาที และตอบให้ชัดว่าจริงหรือไม่จริง ========================================================= */ .vfy-wrap { max-width: 720px; } .vfy-form { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.6rem; display: flex; flex-direction: column; gap: 1rem; } body.theme-light .vfy-form { background: #FFFFFF; box-shadow: var(--shadow-sm); } .vfy-form input { font-family: "IBM Plex Mono", Consolas, monospace; font-size: 1.05rem; letter-spacing: .04em; text-transform: uppercase; } .vfy-hint { display: block; margin-top: .45rem; font-size: .81rem; color: var(--ink-soft); line-height: 1.55; } .vfy-submit { align-self: flex-start; } /* ผลการตรวจ ต้องอ่านออกทันทีว่าเขียวหรือแดง */ .vfy-result { margin-top: 1.1rem; padding: 1.6rem; border-radius: var(--radius); border: 1px solid var(--line); background: var(--card); } body.theme-light .vfy-result { background: #FFFFFF; box-shadow: var(--shadow-sm); } .vfy-result[hidden] { display: none; } .vfy-result h2 { font-size: 1.2rem; font-weight: 700; color: var(--ink); margin: 0 0 .6rem; } .vfy-result p { color: var(--ink-soft); line-height: 1.7; margin: 0; max-width: 56ch; } .vfy-result p b { color: var(--ink); } .vfy-result a { color: var(--accent); font-weight: 600; } .vfy-ico { display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; margin-bottom: .9rem; } .vfy-ico svg { width: 24px; height: 24px; } .vfy-result--ok { border-left: 4px solid var(--accent); } .vfy-result--ok .vfy-ico { background: rgba(15,93,67,.12); color: var(--accent); } .vfy-result--none { border-left: 4px solid #8A5E0F; } .vfy-result--none .vfy-ico { background: rgba(154,107,18,.13); color: #8A5E0F; } .vfy-result--revoked { border-left: 4px solid #A8332B; } .vfy-result--revoked .vfy-ico { background: rgba(168,51,43,.12); color: #A8332B; } .vfy-code { font-family: "IBM Plex Mono", Consolas, monospace; letter-spacing: .03em; } .vfy-fields { margin: 0; display: grid; gap: 0; } .vfy-fields > div { display: grid; grid-template-columns: 170px minmax(0,1fr); gap: 1rem; padding: .65rem 0; border-bottom: 1px solid var(--line); } .vfy-fields > div:last-child { border-bottom: 0; } .vfy-fields dt { color: var(--ink-soft); font-size: .89rem; } .vfy-fields dd { margin: 0; color: var(--ink); font-weight: 600; font-size: .95rem; overflow-wrap: anywhere; } @media (max-width: 560px) { .vfy-fields > div { grid-template-columns: 1fr; gap: .15rem; } } .vfy-about { margin-top: 2.4rem; } .vfy-about h2 { font-size: 1.05rem; font-weight: 700; color: var(--ink); margin: 0 0 1rem; } .vfy-about__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } @media (max-width: 640px) { .vfy-about__grid { grid-template-columns: 1fr; } } .vfy-about__grid > div { border: 1px solid var(--line); border-radius: 11px; padding: 1.1rem 1.25rem; background: var(--card); } body.theme-light .vfy-about__grid > div { background: #FFFFFF; } .vfy-about__grid b { display: block; font-size: .92rem; font-weight: 600; color: var(--ink); margin-bottom: .55rem; } .vfy-about__grid ul { margin: 0; padding-left: 1.1rem; display: grid; gap: .4rem; } .vfy-about__grid li { font-size: .87rem; color: var(--ink-soft); line-height: 1.6; } .vfy-about__grid > div:first-child li::marker { color: var(--accent); } .vfy-about__grid > div:last-child li::marker { color: #A8332B; } .vfy-about__note { margin-top: 1rem; font-size: .87rem; color: var(--ink-soft); line-height: 1.65; } .vfy-about__note a { color: var(--accent); font-weight: 600; } /* เลขที่ใบรับรองบนการ์ดในแดชบอร์ด */ .dash__cert-code { display: block; margin-top: .3rem; font-family: "IBM Plex Mono", Consolas, monospace; font-size: .72rem; letter-spacing: .03em; color: var(--ink-soft); } .dash__cert-verify { display: inline-flex; align-items: center; gap: .3rem; margin-top: .45rem; font-size: .76rem; font-weight: 600; color: var(--accent); text-decoration: none; } .dash__cert-verify:hover { text-decoration: underline; } .dash__cert-verify svg { width: 12px; height: 12px; } @media (hover: none), (max-width: 760px) { .vfy-submit, .vfy-about__note a, .dash__cert-verify { min-height: 44px; display: inline-flex; align-items: center; } } /* ========================================================= 52. หน้าตรวจสลิปในหลังบ้าน /admin/payments/ ========================================================= */ .pay-ref { font-family: "IBM Plex Mono", Consolas, monospace; font-size: .74rem; letter-spacing: .02em; } .pay-slip-btn { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .7rem; border-radius: 7px; border: 1px solid var(--line); background: transparent; font-family: inherit; font-size: .82rem; font-weight: 500; color: var(--ink); cursor: pointer; transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease); } .pay-slip-btn:hover { background: rgba(15,93,67,.07); border-color: rgba(15,93,67,.3); } /* ยอดที่โอนมาไม่ตรงกับยอดที่ควรเป็น ต้องเห็นทันทีว่าต่างกันเท่าไร */ .pay-amount-bad { color: #A8332B; font-weight: 700; font-variant-numeric: tabular-nums; } .pay-expect { display: block; font-size: .75rem; color: var(--ink-soft); margin-top: .1rem; font-variant-numeric: tabular-nums; } /* กล่องดูสลิป ตอนยังไม่มีที่เก็บไฟล์ ต้องบอกตรง ๆ ไม่ใช่โชว์กรอบเปล่า */ @media (hover: none), (max-width: 760px) { .pay-slip-btn { min-height: 44px; } } /* ========================================================= 53. ต่อหน้าเว็บเข้ากับหลังบ้านจริง ของที่เพิ่มในหมวดนี้คือสถานะที่ของจริงมีแต่ของจำลองไม่มี กำลังโหลด ยังไม่มีข้อมูล ทำรายการไม่สำเร็จ และหน้าตั้งค่า ========================================================= */ /* 53.02 การ์ดตัวเลขในคอลัมน์ซ้ายของแดชบอร์ด คอลัมน์นี้กว้างราว 800px สามช่องต่อแถวทำให้การ์ดที่สี่ตกไปอยู่แถวล่างลำพัง สองต่อแถวลงตัวกว่าและตัวเลขอ่านง่ายขึ้น */ .dash__col-main .dash__stats { grid-template-columns: repeat(2, 1fr); } @media (max-width: 900px) { .dash__col-main .dash__stats { grid-template-columns: repeat(2, 1fr); } } /* 53.03 การ์ดวิชาในคอลัมน์ข้างกว้างแค่ 300px สองคอลัมน์ในนั้นทำให้ชื่อวิชาถูกบีบจนตกสามบรรทัดและชนปุ่ม ให้เรียงลงมาแทน */ .dash__col-side .my-course { grid-template-columns: 1fr; } .dash__col-side .my-course__acts { justify-self: stretch; } .dash__col-side .my-course__acts .dash__sched-btn { display: block; text-align: center; } /* กล่องบอกว่ายังไม่มีข้อมูล ถ้าลอยเปล่า ๆ จะดูเหมือนหน้าโหลดไม่ขึ้น ใส่กรอบให้เป็นการ์ดเหมือนของอื่นในหน้าเดียวกัน */ .dash__section .adm-empty { padding: 2rem 1.2rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); } /* 53.05 ของที่ซ่อนด้วย attribute hidden ต้องหายจริง คลาสที่ตั้ง display เป็นค่าอื่นชนะ attribute hidden เสมอ เคยเจอมาแล้วกับกล่องรูปสลิปที่โผล่เป็นกรอบรูปเสียตั้งแต่ยังไม่เลือกไฟล์ */ [hidden] { display: none !important; } /* กล่องผลสอบที่ยังไม่ถูกเปิด ต้องไม่ให้โปรแกรมอ่านหน้าจออ่านเจอ ของเดิมใช้แค่ opacity ซึ่งตายังไม่เห็นแต่โปรแกรมอ่านหน้าจออ่านออกหมด */ .exam-result:not(.is-show) { visibility: hidden; } /* 53.1 แถบแจ้งผลแบบผิดพลาด สีต้องต่างจากแบบสำเร็จให้เห็นชัด */ .adm-toast--bad { background: #5C1B14; color: #FBEDEB; } /* 53.2 กำลังโหลด ต้องกันที่ไว้ให้เท่าของจริง ไม่งั้นหน้ากระโดดตอนข้อมูลมาถึง */ .is-loading { position: relative; min-height: 120px; } .is-loading::after { content: "กำลังโหลด..."; position: absolute; inset: 0; display: grid; place-items: center; font-size: .9rem; color: var(--ink-soft); } @keyframes skelmove { from { background-position: 150% 0; } to { background-position: -50% 0; } } /* 53.3 กล่องเตือนในหน้าหลังบ้าน ใช้บอกว่าอะไรยังไม่พร้อมใช้งาน */ .adm-note { display: flex; gap: .8rem; align-items: flex-start; border-radius: 12px; padding: .95rem 1.15rem; margin-bottom: 1.1rem; font-size: .9rem; line-height: 1.65; background: #FBF3E2; border: 1px solid #E7D5AC; color: #6B4A0A; } .adm-note b { display: block; margin-bottom: .15rem; color: #6B4A0A; } .adm-note svg { width: 20px; height: 20px; flex-shrink: 0; margin-top: .15rem; } .adm-note a { color: #6B4A0A; font-weight: 600; } /* 53.3x ของเล็ก ๆ ที่จำเป็นตอนต่อของจริง */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ดรอปดาวน์เลือกวิชาในแถบบนห้องเรียน ต้องไม่ดันแถบจนล้น */ .learn__course-name select { max-width: 100%; background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: .45rem .7rem; color: var(--ink); font-family: inherit; font-size: .88rem; cursor: pointer; min-height: 38px; } /* รายการบทเรียนเดิมเป็น div ที่กดได้ เปลี่ยนเป็นปุ่มจริงเพื่อให้กด Tab ถึง */ button.learn__chapter-item { width: 100%; text-align: left; background: none; border: 0; font-family: inherit; cursor: pointer; } /* 53.35 ข้อความผิดพลาดในฟอร์มล็อกอินและสมัคร ต้องอยู่ในฟอร์มติดกับช่องกรอก คนที่กรอกผิดกำลังมองอยู่ตรงนั้น */ .auth-err { margin: 0 0 1.1rem; padding: .7rem .95rem; border-radius: 9px; background: #FBEDEB; border: 1px solid #E8C4BE; color: #8F2A20; font-size: .9rem; line-height: 1.6; } /* 53.4 หน้าตั้งค่าระบบ .adm-card มีแต่กฎในโหมดสว่าง ไม่เคยมีกฎพื้นฐาน เพราะยังไม่เคยถูกใช้จริง ต้องมีขอบและมุมโค้งของตัวเอง ไม่งั้นได้แค่พื้นสีขาวลอย ๆ ไม่เป็นการ์ด */ .adm-card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; } .set-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem 1.25rem; } .set-grid .field { margin: 0; } .set-grid .field--wide { grid-column: 1 / -1; } @media (max-width: 700px) { .set-grid { grid-template-columns: 1fr; } } .set-block { margin-bottom: 1.5rem; } .set-block > h2 { font-size: 1rem; font-weight: 700; color: var(--ink); margin: 0 0 .3rem; } .set-block > p { font-size: .87rem; color: var(--ink-soft); margin: 0 0 1rem; line-height: 1.65; } .set-actions { display: flex; gap: .7rem; align-items: center; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 1.1rem; margin-top: .4rem; } .set-actions .hint { font-size: .84rem; color: var(--ink-soft); } /* 53.45 กล่องกว้างสำหรับหน้าที่ต้องกรอกของเยอะ เช่น บทเรียนกับคลังข้อสอบ และกันกล่องสูงเกินจอ ของเดิมไม่ได้จำกัดความสูงไว้ พอเนื้อหายาวขึ้นปุ่มบันทึกจะหลุดออกนอกจอโดยเลื่อนลงไปหาไม่ได้ */ .adm-modal--wide { max-width: 780px; } .adm-modal { display: flex; flex-direction: column; max-height: calc(100vh - 2rem); } .adm-modal-head, .adm-modal-foot { flex-shrink: 0; } .adm-modal-body { overflow-y: auto; } /* 53.5 คลังข้อสอบในหน้าจัดการหลักสูตร */ .qz-list { display: flex; flex-direction: column; gap: .55rem; max-height: 46vh; overflow-y: auto; padding-right: .2rem; } .qz-row { display: grid; grid-template-columns: 1fr auto; gap: .5rem 1rem; align-items: start; border: 1px solid var(--line); border-radius: 10px; padding: .7rem .9rem; background: var(--card); } .qz-row__body { font-size: .9rem; color: var(--ink); line-height: 1.6; } .qz-row__meta { font-size: .8rem; color: var(--ink-soft); margin-top: .25rem; } .qz-row__ans { font-weight: 700; color: var(--accent); } .qz-row--off { opacity: .55; } .qz-empty { font-size: .9rem; color: var(--ink-soft); padding: 1.2rem 0; text-align: center; } .qz-help { font-size: .84rem; color: var(--ink-soft); line-height: 1.7; background: var(--bg-deep); border-radius: 9px; padding: .8rem .95rem; margin-bottom: .8rem; } .qz-help code { display: block; margin-top: .4rem; font-size: .82rem; color: var(--ink); white-space: nowrap; overflow-x: auto; padding-bottom: .2rem; } /* 53.6 บทเรียนในหน้าจัดการหลักสูตร */ .ch-list { display: flex; flex-direction: column; gap: .5rem; margin-bottom: 1rem; } .ch-row { display: grid; grid-template-columns: 2.2rem 1fr auto; gap: .75rem; align-items: center; border: 1px solid var(--line); border-radius: 10px; padding: .6rem .85rem; background: var(--card); } .ch-row__no { font-weight: 700; color: var(--ink-soft); font-variant-numeric: tabular-nums; } .ch-row__title { font-size: .92rem; color: var(--ink); } .ch-row__sub { font-size: .8rem; color: var(--ink-soft); } .ch-row__acts { display: flex; gap: .35rem; } /* 53.7 การ์ดวิชาในแดชบอร์ดผู้เรียน ของจริงมีได้หลายวิชาและหลายสถานะ */ .my-courses { display: grid; gap: .8rem; } .my-course { display: grid; grid-template-columns: 1fr auto; gap: .5rem 1rem; align-items: center; border: 1px solid var(--line); border-radius: 12px; padding: .95rem 1.1rem; background: var(--card); } .my-course__title { font-size: .95rem; font-weight: 600; color: var(--ink); } .my-course__meta { font-size: .82rem; color: var(--ink-soft); margin-top: .2rem; } .my-course__bar { grid-column: 1 / -1; height: 6px; border-radius: 100px; background: var(--line); overflow: hidden; } .my-course__fill { height: 100%; background: var(--accent); border-radius: 100px; } @media (max-width: 560px) { .my-course { grid-template-columns: 1fr; } .my-course__acts { justify-self: stretch; } .my-course__acts .btn { width: 100%; justify-content: center; } } /* 53.8 ปุ่มในตารางหลังบ้านตอนกำลังทำงาน */ .adm-btn[disabled], .btn[disabled] { opacity: .6; cursor: not-allowed; } /* 53.9 แถบเมนูหลังบ้านบนมือถือ กฎเดิมสั่งซ่อนแถบข้างที่จอแคบกว่า 900px หน้าผู้เรียนมีกฎของตัวเองที่เปลี่ยนเป็นแถบบนแทน แต่หน้าหลังบ้านไม่มี พอเปิดจากมือถือเลยไม่เหลือเมนูให้กดข้ามหน้าเลยสักปุ่ม งานตรวจสลิปเป็นงานที่ทำจากมือถือบ่อยที่สุด จึงต้องมีเมนู */ @media (max-width: 900px) { body.dash-body .dash__sidebar { display: flex !important; flex-direction: row; align-items: center; height: auto; position: sticky; top: 0; z-index: 40; overflow-x: auto; gap: .3rem; padding: .55rem .75rem; } body.dash-body .dash__logo { margin: 0 .6rem 0 0; padding: .3rem; white-space: nowrap; } body.dash-body .dash__nav { flex-direction: row; flex: 1; gap: .3rem; } body.dash-body .dash__nav-item { white-space: nowrap; } body.dash-body .dash__logout { margin: 0; } body.dash-body .dash__logout span, body.dash-body .dash__logout-txt { display: none; } /* กล่องบอกว่ากำลังใช้งานในชื่อใคร กินที่มากเกินไปเมื่อเรียงเป็นแถวนอน ชื่อผู้ใช้ยังดูได้จากวงกลมมุมขวาบนของแถบบนอยู่แล้ว */ body.dash-body .adm-who { display: none; } body.dash-body .dash-body, body.dash-body .dash__main { overflow-x: hidden; } } /* ========================================================= 54. ข้อความจากหน้าติดต่อเรา ในหน้าภาพรวมหลังบ้าน ฟอร์มหน้าติดต่อเราเดิมเขียนไว้ว่า onsubmit="return false" คนกรอกแล้วกดส่ง ไม่มีอะไรเกิดขึ้น และไม่มีใครได้รับข้อความ ตอนนี้เก็บลงฐานข้อมูลแล้วมาโผล่ที่กล่องนี้ ========================================================= */ .adm-msg { padding: 1rem 1.25rem; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: .5rem; } .adm-msg:last-child { border-bottom: none; } .adm-msg__head { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; } .adm-msg__head b { font-size: .95rem; font-weight: 700; color: var(--ink); } .adm-msg__at { margin-left: auto; font-size: .78rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; } .adm-msg__body { margin: 0; font-size: .9rem; line-height: 1.7; color: var(--ink-soft); white-space: pre-wrap; overflow-wrap: anywhere; } .adm-msg__foot { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; } .adm-msg__how { font-size: .84rem; color: var(--ink-soft); overflow-wrap: anywhere; } .adm-msg__how a { color: var(--accent); font-weight: 600; } .adm-msg__foot .adm-btn { margin-left: auto; } @media (max-width: 560px) { .adm-msg__at { margin-left: 0; width: 100%; } .adm-msg__foot .adm-btn { margin-left: 0; width: 100%; justify-content: center; } } /* 54.1 ข้อความบอกผลในฟอร์มหน้าติดต่อเรา ฟอร์มนี้เพิ่งต่อเข้าหลังบ้านจริง คนกดส่งต้องเห็นทันทีว่าผ่านหรือไม่ผ่าน */ .form-note { margin: 0 0 1rem; padding: .75rem .9rem; border-radius: var(--radius-sm); font-size: .88rem; line-height: 1.6; } .form-note--ok { background: rgba(16,185,129,.1); border: 1px solid rgba(16,185,129,.32); color: #0B6B4F; } .form-note--bad { background: rgba(200,60,50,.08); border: 1px solid rgba(200,60,50,.28); color: #A32A22; } /* 54.2 ส่วนต่างคะแนนเทียบกับการสอบครั้งก่อนของวิชาเดียวกัน ใช้สีอย่างเดียวไม่พอ คนตาบอดสีแยกไม่ออก จึงมีเครื่องหมายบวกลบกำกับด้วยเสมอ */ .res-diff { display: inline-flex; align-items: center; gap: .2rem; font-size: .84rem; font-weight: 700; font-variant-numeric: tabular-nums; } .res-diff--up { color: #0B6B4F; } .res-diff--down { color: #A8332B; } .res-diff--same { color: var(--ink-soft); } .res-diff--none { color: var(--ink-soft); font-weight: 500; font-size: .8rem; } /* 54.3 อันดับในวิชา บอกที่ของตัวเองกับจำนวนคนที่สอบ ไม่แสดงชื่อหรือคะแนนของคนอื่น วิชาที่มีคนสอบคนเดียวจะไม่ถูกส่งมาเลย การ์ดนี้จึงมีเมื่อมีคู่เทียบจริงเท่านั้น */ .res-ranks { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); } .res-rank { display: flex; flex-direction: column; gap: .3rem; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: .9rem 1.1rem; } .res-rank__course { font-size: .88rem; font-weight: 600; color: var(--ink); } .res-rank__line { display: flex; align-items: baseline; flex-wrap: wrap; gap: .4rem; } .res-rank__no { font-size: 1.35rem; font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; } .res-rank__of { font-size: .82rem; color: var(--ink-soft); } .res-rank__best { font-size: .8rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; } .res-rank__tie { font-size: .76rem; color: var(--ink-soft); } /* 54.4 รายการบทเรียนในหน้ารายวิชา เดิมหัวข้อบทถูกพิมพ์ค้างไว้ในไฟล์ทั้งที่ยังไม่มีบทเรียนสักบท ตอนนี้อ่านจากฐานข้อมูล ยังไม่มีบทก็บอกตรง ๆ ว่ายังไม่มี */ .course-curr__head { font-size: 1.3rem; font-weight: 700; margin-bottom: 1.2rem; } .course-curr__meta { font-size: .9rem; font-weight: 400; color: var(--ink-soft); } .course-curr { display: flex; flex-direction: column; gap: .5rem; } .course-curr__row { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: .9rem 1.1rem; font-size: .9rem; font-weight: 600; color: var(--ink); } .course-curr__min { flex-shrink: 0; font-size: .8rem; font-weight: 500; color: var(--ink-soft); font-variant-numeric: tabular-nums; } .course-curr__empty { background: var(--card); border: 1px dashed var(--line); border-radius: var(--radius-sm); padding: 1rem 1.1rem; margin: 0; font-size: .9rem; line-height: 1.7; color: var(--ink-soft); }