/* ───────────────── 🌌 พื้นหลังแสงเรืองเคลื่อนไหว ───────────────── */
.aurora {
    position: fixed;
    inset: 0;
    z-index: -10;
    overflow: hidden;
    pointer-events: none;
}
.aurora::before,
.aurora::after {
    content: "";
    position: absolute;
    width: 60vmax;
    height: 60vmax;
    border-radius: 50%;
    filter: blur(90px);
}
.aurora::before {
    top: -28vmax;
    left: -18vmax;
    background: radial-gradient(circle, rgba(124, 58, 237, .55), transparent 62%);
    animation: aurora-a 24s ease-in-out infinite alternate;
}
.aurora::after {
    bottom: -32vmax;
    right: -22vmax;
    background: radial-gradient(circle, rgba(6, 182, 212, .35), transparent 62%);
    animation: aurora-b 28s ease-in-out infinite alternate;
}
@keyframes aurora-a { to { transform: translate(16vmax, 12vmax) scale(1.12); } }
@keyframes aurora-b { to { transform: translate(-14vmax, -10vmax) scale(1.18); } }

/* ตารางเส้นบางๆ จางออกที่ขอบ */
.grid-bg {
    background-image:
        linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
    background-size: 48px 48px;
    -webkit-mask-image: radial-gradient(ellipse at center, #000 25%, transparent 72%);
    mask-image: radial-gradient(ellipse at center, #000 25%, transparent 72%);
}

/* ───────────────── 🧭 header ───────────────── */
#siteHeader { transition: background-color .3s, box-shadow .3s, border-color .3s; }
#siteHeader.scrolled {
    background-color: rgba(2, 6, 23, .86);
    border-color: rgba(255, 255, 255, .08);
    box-shadow: 0 12px 30px -14px rgba(0, 0, 0, .7);
}

/* ───────────────── ✨ เด้งขึ้นตอนสกรอลล์: data-reveal ───────────────── */
/* ซ่อนเฉพาะตอน JavaScript ทำงาน (คลาส js ใส่ใน <head>) — ถ้า JS พัง เนื้อหายังเห็นปกติ */
.js [data-reveal] {
    opacity: 0;
    transform: translateY(28px) scale(.985);
    transition:
        opacity .75s cubic-bezier(.2, .7, .2, 1) var(--reveal-delay, 0ms),
        transform .75s cubic-bezier(.2, .7, .2, 1) var(--reveal-delay, 0ms);
}
.js [data-reveal="left"]  { transform: translateX(-36px); }
.js [data-reveal="right"] { transform: translateX(36px); }
.js [data-reveal="zoom"]  { transform: scale(.9); }
.js [data-reveal].is-visible { opacity: 1; transform: none; }

/* ───────────────── 🃏 การ์ดเอียง 3D: data-tilt ───────────────── */
[data-tilt] {
    position: relative;
    transform-style: preserve-3d;
    transition: transform .2s ease-out, box-shadow .3s, border-color .3s;
    will-change: transform;
}
[data-tilt] .tilt-pop { transform: translateZ(36px); }
[data-tilt] .tilt-glare {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), rgba(255, 255, 255, .14), transparent 55%);
    opacity: 0;
    transition: opacity .3s;
}
[data-tilt]:hover .tilt-glare { opacity: 1; }

/* ───────────────── 🎨 ลูกเล่นอื่นๆ ───────────────── */
.text-shimmer {
    background: linear-gradient(90deg, #a78bfa, #67e8f9, #c4b5fd, #a78bfa);
    background-size: 250% auto;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: shimmer 7s linear infinite;
}
@keyframes shimmer { to { background-position: 250% center; } }

.float-slow  { animation: floaty 7s ease-in-out infinite; }
.float-slower { animation: floaty 9s ease-in-out -3s infinite; }
@keyframes floaty { 50% { transform: translateY(-14px); } }

/* เส้นขอบไล่สีหมุนรอบการ์ด */
.glow-border { position: relative; isolation: isolate; }
.glow-border::before {
    content: "";
    position: absolute;
    inset: -1px;
    z-index: -1;
    border-radius: inherit;
    background: conic-gradient(from var(--angle, 0deg), transparent 0 60%, #8b5cf6 75%, #22d3ee 85%, transparent 100%);
    animation: spin-border 6s linear infinite;
}
@property --angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@keyframes spin-border { to { --angle: 360deg; } }

/* ช่องอัปโหลดสลิป: แสงวิ่งวนรอบกรอบ + หัวแสงเล็กๆ สีขาว (วาดเฉพาะเส้นขอบด้วย mask ไม่บังรูปข้างใน) */
.upload-glow {
    position: relative;
    isolation: isolate;
    animation: upload-breathe 2.8s ease-in-out infinite;   /* เรืองจางๆ ข้างในกรอบ หายใจเข้าออก */
}
.upload-glow::before,
.upload-glow::after {
    content: "";
    position: absolute;
    inset: -3px;
    border-radius: inherit;
    padding: 3px;
    /* หัวแสง 2 ดวงวิ่งไล่กันรอบกรอบ: ม่วง → ฟ้า → หัวสีขาว */
    background: conic-gradient(from var(--angle, 0deg),
        transparent 0 22%, rgba(139, 92, 246, .5) 32%, #a78bfa 40%, #22d3ee 47%, #ffffff 49.5%, transparent 51%,
        transparent 72%, rgba(34, 211, 238, .5) 82%, #8b5cf6 90%, #f0abfc 97%, #ffffff 99.5%, transparent 100%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    animation: spin-border 6s linear infinite;   /* ปกติวนช้าๆ */
    pointer-events: none;
}
.upload-glow::after { inset: -6px; padding: 6px; filter: blur(12px); opacity: 1; }   /* ฟุ้งเป็นแสงเรืองรอบกรอบ */
.upload-glow:hover::before,
.upload-glow:hover::after { animation-duration: 1.5s; }   /* ชี้เมาส์ = เร็วขึ้น */
@keyframes upload-breathe {
    0%, 100% { box-shadow: inset 0 0 18px rgba(139, 92, 246, .10), 0 0 0 rgba(34, 211, 238, 0); }
    50%      { box-shadow: inset 0 0 34px rgba(139, 92, 246, .28), 0 0 22px rgba(34, 211, 238, .18); }
}
@media (prefers-reduced-motion: reduce) {
    .upload-glow, .upload-glow::before, .upload-glow::after { animation: none; }
}

/* จุดสถานะกะพริบ */
.pulse-dot { position: relative; }
.pulse-dot::after {
    content: "";
    position: absolute;
    inset: -4px;
    border-radius: 9999px;
    background: currentColor;
    opacity: .5;
    animation: ping 1.8s cubic-bezier(0, 0, .2, 1) infinite;
}
@keyframes ping { 75%, 100% { transform: scale(2.2); opacity: 0; } }

/* คำถามที่พบบ่อย: ไอคอน + หมุนตอนเปิด */
details > summary::-webkit-details-marker { display: none; }
details[open] .faq-icon { transform: rotate(45deg); }

/* ───────────────── ♿ คนที่ตั้งค่าลดการเคลื่อนไหว ───────────────── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation: none !important;
        transition: none !important;
    }
    .js [data-reveal] { opacity: 1; transform: none; }
}

/* ───────── 🎉 ฉากขอบคุณหลังจ่ายเงิน (_ThanksOverlay + thanks.js) ───────── */
.thanks-overlay {
    position: fixed; inset: 0; z-index: 60;
    display: flex; align-items: center; justify-content: center;
    background: radial-gradient(ellipse at center, #1e1b4b 0%, #020617 70%);
    animation: thanks-in .45s ease-out both;
    cursor: pointer;
}
.thanks-overlay.thanks-leave { animation: thanks-out .85s cubic-bezier(.7, 0, .3, 1) forwards; }
@keyframes thanks-in  { from { opacity: 0; } to { opacity: 1; } }
@keyframes thanks-out { to { transform: translateY(-100%); border-radius: 0 0 50% 50% / 0 0 18% 18%; } }

.thanks-aurora {
    position: absolute; inset: -20%;
    background: conic-gradient(from var(--angle, 0deg), rgba(139, 92, 246, .25), rgba(34, 211, 238, .18), rgba(240, 171, 252, .2), rgba(139, 92, 246, .25));
    filter: blur(80px);
    animation: spin-border 8s linear infinite;
}

.thanks-badge { position: relative; width: 112px; height: 112px; display: grid; place-items: center; }
.thanks-ring {
    position: absolute; inset: 0; border-radius: 9999px;
    border: 2px solid rgba(34, 211, 238, .6);
    animation: thanks-ring 1.6s ease-out .3s infinite;
}
.thanks-ring-2 { border-color: rgba(167, 139, 250, .6); animation-delay: .9s; }
@keyframes thanks-ring { from { transform: scale(.8); opacity: 1; } to { transform: scale(2.1); opacity: 0; } }

.thanks-check { width: 112px; height: 112px; filter: drop-shadow(0 0 18px rgba(34, 211, 238, .55)); animation: thanks-pop .6s cubic-bezier(.2, 1.6, .4, 1) both; }
.thanks-check circle { stroke: #22d3ee; stroke-width: 2.5; stroke-dasharray: 151; stroke-dashoffset: 151; animation: thanks-draw .7s ease-out .1s forwards; }
.thanks-check path { stroke: #ffffff; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 40; stroke-dashoffset: 40; animation: thanks-draw .45s ease-out .7s forwards; }
@keyframes thanks-draw { to { stroke-dashoffset: 0; } }
@keyframes thanks-pop { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }

.thanks-title {
    background: linear-gradient(90deg, #c4b5fd, #67e8f9, #f0abfc, #c4b5fd);
    background-size: 250% auto;
    -webkit-background-clip: text; background-clip: text; color: transparent;
    animation: thanks-rise .7s cubic-bezier(.2, .9, .3, 1) .55s both, shimmer 3s linear infinite;
}
.thanks-sub  { animation: thanks-rise .7s cubic-bezier(.2, .9, .3, 1) .8s both; }
.thanks-hint { animation: thanks-rise .7s ease-out 1.4s both; }
@keyframes thanks-rise { from { opacity: 0; transform: translateY(18px); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }

.thanks-progress { width: 180px; height: 3px; border-radius: 9999px; background: rgba(255, 255, 255, .08); overflow: hidden; animation: thanks-rise .5s ease-out 1s both; }
.thanks-progress span { display: block; height: 100%; width: 100%; transform-origin: left; background: linear-gradient(90deg, #8b5cf6, #22d3ee); animation: thanks-bar 2.2s linear 1s both; }
@keyframes thanks-bar { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.thanks-spark {
    position: absolute; left: 50%; top: 45%;
    width: var(--size); height: var(--size); border-radius: 9999px;
    box-shadow: 0 0 10px currentColor;
    opacity: 0;
    animation: thanks-spark 1.4s cubic-bezier(.1, .8, .3, 1) var(--delay) forwards;
}
@keyframes thanks-spark {
    0%   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(.3); }
}

/* หน้าเข้าสู่ระบบ Parsec โผล่ขึ้นมาตอนฉากเลื่อนออก */
.thanks-hold { opacity: 0; transform: translateY(40px) scale(.98); }
.thanks-hold.thanks-reveal { opacity: 1; transform: none; transition: opacity .7s ease .25s, transform .9s cubic-bezier(.2, .9, .3, 1) .2s; }

@media (prefers-reduced-motion: reduce) {
    .thanks-overlay, .thanks-overlay.thanks-leave, .thanks-aurora, .thanks-ring, .thanks-check, .thanks-title, .thanks-sub, .thanks-hint,
    .thanks-progress, .thanks-progress span { animation: none; }
    .thanks-overlay.thanks-leave { opacity: 0; transition: opacity .2s; }
    .thanks-check circle, .thanks-check path { animation: none; stroke-dashoffset: 0; }
    .thanks-hold { opacity: 1; transform: none; }
}

/* ───────── รายการตัวเลือก (dropdown) ให้เป็นธีมมืด ─────────
   เดิมกล่องตัวเลือกที่เด้งขึ้นมาเป็นพื้นขาว + ตัวหนังสือสีอ่อน อ่านไม่ออก */
:root { color-scheme: dark; }
select option,
select optgroup {
    background-color: #0f172a;   /* slate-900 */
    color: #e2e8f0;              /* slate-200 */
}
select option:checked { background-color: #4c1d95; color: #ffffff; }   /* ตัวที่เลือกอยู่ = ม่วง */
select option:disabled { color: #64748b; }