/* ============================================================
   stati_send_pop.css : ป๊อปอัปชวนส่งภาพสถิติผู้สมัครสอบ (stati_send_pop.php) — มุมขวาล่างทุกหน้าเว็บ เหนือป๊อปอัปเซียมซี
   ------------------------------------------------------------
   โครงเดียวกับ siamsi/siamsi_pop.css แต่เป็นการ์ดน้ำเงินกรมท่าขอบทอง (ไม่กลืนกับการ์ดแดงของเซียมซีที่อยู่ใต้กัน)
   มือถือโผล่พ้นขอบบน · จังหวะ 4 วินาที : กราฟแท่งในจอโตขึ้น → มือถือเด้ง → ภาพลอยออกจากจอ ติดเครื่องหมายถูก · ดาวประกายระยิบ
   .on = ขึ้นมา  .mini = ย่อเหลือมือถือ  .off = ปิด   ตั้งค่าเองทั้งหมด ไม่พึ่งสไตล์ของหน้า
   ผู้ใช้ตั้งลดการเคลื่อนไหว : ไม่มีแอนิเมชัน (ท้ายไฟล์)
   ============================================================ */

.ssp {
    position: fixed;
    right: 18px;
    bottom: 22px;
    z-index: 97;
    color: #eef2ff;
    font-family: 'Noto Sans Thai', 'Sarabun', sans-serif;
    font-size: 14px;
    line-height: 1.4;
    text-align: left;
    opacity: 0;
    transform: translateY(34px) scale(.82);
    transform-origin: 80% 100%;
    pointer-events: none;
    transition: transform .65s cubic-bezier(.2, 1.45, .35, 1), opacity .35s ease, bottom .45s cubic-bezier(.3, .9, .3, 1);
}

.ssp * {
    box-sizing: border-box;
}

.ssp.on {
    opacity: 1;
    transform: none;
    pointer-events: auto;
}

.ssp.off {
    opacity: 0;
    transform: translateY(24px) scale(.8);
    pointer-events: none;
    transition-duration: .35s;
}

/* ตัวการ์ด : ทั้งใบเป็นลิงก์ */
.ssp-in {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 80px;
    padding: 9px 16px 9px 82px;
    border: 2px solid #e2bd6e;
    border-radius: 20px;
    background:
        radial-gradient(ellipse 70% 90% at 22% 0%, rgba(255, 214, 130, 0.3), transparent 70%),
        linear-gradient(135deg, #2a4a8f 0, #1a3166 55%, #0f1d42 100%);
    box-shadow: inset 0 0 0 3px #142a59, inset 0 0 0 4px rgba(243, 215, 154, 0.55),
                0 14px 30px rgba(10, 22, 55, 0.38), 0 0 0 4px rgba(226, 189, 110, 0.16), 0 0 34px rgba(255, 190, 90, 0.25);
    color: inherit;
    text-decoration: none;
    animation: ssp-float 3.4s ease-in-out .6s infinite;
    transition: padding .4s cubic-bezier(.3, .9, .3, 1), box-shadow .2s, filter .2s;
}

.ssp-in:hover {
    color: inherit;
    text-decoration: none;
    filter: brightness(1.08);
    box-shadow: inset 0 0 0 3px #142a59, inset 0 0 0 4px rgba(243, 215, 154, 0.7),
                0 18px 36px rgba(10, 22, 55, 0.45), 0 0 0 5px rgba(226, 189, 110, 0.22), 0 0 46px rgba(255, 190, 90, 0.42);
}

.ssp-in:focus-visible,
.ssp-x:focus-visible {
    outline: 3px solid rgba(243, 215, 154, 0.85);
    outline-offset: 3px;
}

@keyframes ssp-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-4px); }
}

/* ---------- มือถือ : โผล่พ้นขอบบนการ์ด ---------- */
.ssp-art {
    position: absolute;
    left: 12px;
    bottom: 9px;
    width: 56px;
    height: 104px;
    transform-origin: 50% 100%;
}

/* แสงทองหายใจด้านหลัง */
.ssp-halo {
    position: absolute;
    left: 50%;
    top: 40%;
    width: 98px;
    height: 98px;
    margin: -49px 0 0 -49px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 226, 150, 0.55) 0, rgba(255, 190, 90, 0.18) 40%, transparent 68%);
    animation: ssp-breathe 2.6s ease-in-out infinite;
    pointer-events: none;
}

@keyframes ssp-breathe {
    0%, 100% { transform: scale(.9); opacity: .75; }
    50%      { transform: scale(1.08); opacity: 1; }
}

/* ตัวเครื่อง : กรอบทอง จอสีงาช้าง */
.ssp-ph {
    position: absolute;
    z-index: 2;
    left: 6px;
    bottom: 0;
    width: 46px;
    height: 88px;
    padding: 3px;
    border-radius: 10px;
    background: linear-gradient(135deg, #fff1c8 0, #e9c271 30%, #c48838 70%, #9a6a2c 100%);
    box-shadow: 0 0 0 1px rgba(90, 60, 20, 0.35), 0 8px 14px rgba(5, 12, 35, 0.5);
    transform: rotate(-7deg);
    transform-origin: 50% 100%;
    animation: ssp-tap 4s ease-in-out infinite;
}

.ssp-scr {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 3px;
    width: 100%;
    height: 100%;
    padding: 8px 4px 4px;
    overflow: hidden;
    border-radius: 7px;
    background: linear-gradient(180deg, #fffdf6 0, #f6eedb 100%);
}

/* กล้องหน้า */
.ssp-scr::before {
    content: '';
    position: absolute;
    top: 2.5px;
    left: 50%;
    width: 10px;
    height: 3px;
    margin-left: -5px;
    border-radius: 3px;
    background: #1a2a52;
}

/* แสงสะท้อนบนจอ */
.ssp-scr::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 40%, rgba(255, 255, 255, 0.55) 48%, transparent 56%);
    pointer-events: none;
}

.ssp-hd {
    width: 72%;
    height: 5px;
    border-radius: 2px;
    background: linear-gradient(90deg, #1d3570, #3d63b3);
}

.ssp-ln {
    width: 86%;
    height: 2.5px;
    border-radius: 2px;
    background: #dccca6;
}

.ssp-ln.s {
    width: 56%;
}

/* กราฟแท่ง : โตขึ้นทีละแท่ง แท่งสุดท้ายสีทอง */
.ssp-bars {
    position: absolute;
    left: 4px;
    right: 4px;
    bottom: 5px;
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 40px;
    border-bottom: 1.5px solid #cbb486;
}

.ssp-bars i {
    flex: 1;
    height: var(--h);
    border-radius: 2px 2px 0 0;
    background: linear-gradient(180deg, #4d74c4, #1d3570);
    transform-origin: 50% 100%;
    animation: ssp-grow 4s cubic-bezier(.3, 1.3, .5, 1) var(--d) infinite;
}

.ssp-bars i:last-child {
    background: linear-gradient(180deg, #ffe7a3, #e2a94a 55%, #b77d32);
    box-shadow: 0 0 6px rgba(255, 200, 100, 0.8);
}

/* ภาพที่ลอยออกจากจอ (ภาพทิวเขา + ดวงอาทิตย์) */
.ssp-pic {
    position: absolute;
    z-index: 3;
    left: 50%;
    top: 18px;
    width: 28px;
    height: 22px;
    margin-left: -14px;
    overflow: visible;
    border: 2px solid #fff;
    border-radius: 5px;
    background:
        radial-gradient(circle at 72% 32%, #ffd36b 0 3px, transparent 3.5px),
        linear-gradient(180deg, #8cc2ff, #d9ecff);
    box-shadow: 0 0 0 1px rgba(226, 189, 110, 0.9), 0 4px 10px rgba(5, 12, 35, 0.45), 0 0 12px rgba(255, 220, 140, 0.7);
    opacity: 0;
    animation: ssp-fly 4s ease-out infinite;
}

.ssp-pic::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 62%;
    border-radius: 0 0 3px 3px;
    background: linear-gradient(180deg, #3d8f5c, #24663e);
    clip-path: polygon(0 100%, 0 55%, 28% 8%, 52% 62%, 70% 34%, 100% 78%, 100% 100%);
}

/* เครื่องหมายถูก : ส่งแล้ว */
.ssp-ok {
    position: absolute;
    top: -8px;
    right: -9px;
    display: grid;
    place-items: center;
    width: 15px;
    height: 15px;
    border: 1.5px solid #fff;
    border-radius: 50%;
    background: #22a35a;
    color: #fff;
    font-size: 7.5px;
    line-height: 1;
    box-shadow: 0 0 8px rgba(60, 220, 130, 0.8);
    opacity: 0;
    transform: scale(.3);
    animation: ssp-ok 4s ease-out infinite;
}

/* ดาวประกายสี่แฉก */
.ssp-tw {
    position: absolute;
    z-index: 4;
    width: 11px;
    height: 11px;
    background: radial-gradient(circle, #fff 0, #fff3c4 35%, #f2c96f 75%);
    clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
    opacity: 0;
    animation: ssp-twinkle 2.4s ease-in-out infinite;
    pointer-events: none;
}

.ssp-tw.t1 { top: 2px; left: -8px; animation-delay: -.4s; }
.ssp-tw.t2 { top: 14px; right: -10px; width: 9px; height: 9px; animation-delay: -1.2s; }
.ssp-tw.t3 { bottom: 40px; left: -4px; width: 8px; height: 8px; animation-delay: -2s; }

@keyframes ssp-twinkle {
    0%, 100% { opacity: 0; transform: scale(.3) rotate(0deg); }
    50%      { opacity: 1; transform: scale(1) rotate(45deg); }
}

/* จังหวะ 4 วินาที : กราฟโต (0–35%) → มือถือเด้ง (44–58%) → ภาพลอยขึ้น ติดถูก (50–94%) */
@keyframes ssp-grow {
    0%, 4%    { transform: scaleY(.12); }
    28%, 90%  { transform: scaleY(1); }
    100%      { transform: scaleY(.12); }
}

@keyframes ssp-tap {
    0%, 42%, 64%, 100% { transform: rotate(-7deg); }
    47% { transform: rotate(-2deg) translateY(-4px) scale(1.05); }
    53% { transform: rotate(-10deg) translateY(0); }
    58% { transform: rotate(-5deg); }
}

@keyframes ssp-fly {
    0%, 46%   { opacity: 0; transform: translateY(18px) scale(.4) rotate(0deg); }
    54%       { opacity: 1; transform: translateY(-20px) scale(1.08) rotate(-8deg); }
    62%, 86%  { opacity: 1; transform: translateY(-30px) scale(1) rotate(5deg); }
    96%, 100% { opacity: 0; transform: translateY(-46px) scale(.85) rotate(9deg); }
}

@keyframes ssp-ok {
    0%, 62%   { opacity: 0; transform: scale(.3); }
    68%       { opacity: 1; transform: scale(1.35); }
    73%, 88%  { opacity: 1; transform: scale(1); }
    96%, 100% { opacity: 0; transform: scale(.6); }
}

/* ---------- ข้อความ + ปุ่ม ---------- */
.ssp-tx {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    max-width: 220px;
    overflow: hidden;
    white-space: nowrap;
    transition: max-width .4s cubic-bezier(.3, .9, .3, 1), opacity .25s;
}

.ssp-tx small {
    color: rgba(226, 233, 252, 0.88);
    font-size: 11.5px;
    line-height: 1.3;
}

.ssp-tx b {
    display: block;
    background: linear-gradient(100deg, #e0a94e 0%, #fff5cc 18%, #f2c96f 36%, #c48838 52%, #fff2c0 70%, #eab95c 86%, #e0a94e 100%) 0 0 / 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.35;
    filter: drop-shadow(0 1px 0 #0a1533);
    animation: ssp-shine 5s linear infinite;
}

.ssp-em {
    margin-right: 3px;
    font-size: 19px;
}

@keyframes ssp-shine {
    to { background-position: 200% 0; }
}

.ssp-cta {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    padding: 3px 12px;
    overflow: hidden;
    border-radius: 999px;
    background: linear-gradient(180deg, #fff3c4 0, #f2cd78 40%, #d9a24e 75%, #b47c34 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 4px 10px rgba(5, 12, 35, 0.4);
    color: #13254f;
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1.5;
}

.ssp-cta i {
    font-size: 10px;
    animation: ssp-nudge 1.4s ease-in-out infinite;
}

.ssp-cta::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: -60%;
    width: 40%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.75), transparent);
    animation: ssp-sweep 3.2s ease-in-out 1.6s infinite;
}

@keyframes ssp-nudge {
    0%, 100% { transform: translateX(0); }
    50%      { transform: translateX(3px); }
}

@keyframes ssp-sweep {
    0%        { left: -60%; }
    45%, 100% { left: 130%; }
}

/* ปุ่มปิด */
.ssp-x {
    position: absolute;
    z-index: 5;
    top: -9px;
    right: -9px;
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    margin: 0;
    padding: 0;
    border: 1.5px solid #e2bd6e;
    border-radius: 50%;
    background: #0b1633;
    color: #f3d79a;
    font-family: inherit;
    font-size: 11px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.35);
    transition: background .15s, transform .15s;
}

.ssp-x:hover {
    background: #1d3570;
    transform: scale(1.08);
}

/* ---------- ย่อ (15 วินาทีหลังขึ้น) : เหลือมือถือในกรอบเล็ก ---------- */
.ssp.mini .ssp-in {
    padding-right: 4px;
}

.ssp.mini .ssp-tx {
    max-width: 0;
    opacity: 0;
}

/* ---------- มือถือ : เล็กลง ---------- */
@media (max-width: 760px) {
    .ssp {
        right: 10px;
    }
    .ssp-in {
        min-height: 66px;
        padding: 7px 13px 7px 62px;
        border-radius: 17px;
    }
    .ssp-art {
        left: 10px;
        bottom: 7px;
        transform: scale(.84);
    }
    .ssp-tx {
        max-width: 190px;
    }
    .ssp-tx small {
        font-size: 10.5px;
    }
    .ssp-tx b {
        font-size: 13.5px;
    }
    .ssp-em {
        font-size: 17px;
    }
    .ssp-cta {
        margin-top: 3px;
        padding: 2px 10px;
        font-size: 11.5px;
    }
}

/* มือถือจอแคบ : เหลือชื่อ + ปุ่ม (ไม่บังรายการในหน้ามากเกินไป) */
@media (max-width: 480px) {
    .ssp-in {
        min-height: 58px;
        padding: 6px 11px 6px 62px;
    }
    .ssp-art {
        left: 8px;
        bottom: 5px;
        transform: scale(.74);
    }
    .ssp-tx small {
        display: none;
    }
    .ssp-tx b {
        font-size: 12.5px;
    }
    .ssp-em {
        font-size: 16px;
    }
    .ssp-cta {
        font-size: 11px;
    }
}

@media print {
    .ssp {
        display: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ssp {
        transition: opacity .2s ease;
        transform: none;
    }
    .ssp-in,
    .ssp-halo,
    .ssp-ph,
    .ssp-bars i,
    .ssp-tw,
    .ssp-tx b,
    .ssp-cta i,
    .ssp-cta::after {
        animation: none;
    }
    .ssp-tw,
    .ssp-cta::after {
        display: none;
    }
    /* ภาพลอยค้างไว้พร้อมเครื่องหมายถูก ให้เห็นว่าเป็นการส่งภาพ */
    .ssp-pic {
        animation: none;
        opacity: 1;
        transform: translateY(-30px) rotate(5deg);
    }
    .ssp-ok {
        animation: none;
        opacity: 1;
        transform: none;
    }
}