/* ============================================================
   siamsi.css : เซียมซีเสี่ยงทายสนามสอบ (siamsi/index.php) — หน้าอิสระ ไฟล์นี้ไฟล์เดียวครบทั้งหน้า
   ผู้ใช้ขอ 2026-10-16 : แยกเป็นหน้าอิสระ · ไม่ต้องมีแถบชื่อเพจ / ท้ายหน้า · "เน้นสีแดง - ทอง ขอเด่นๆ เอฟเฟกต์จัดเต็ม"
   ผู้ใช้ขอ 2026-10-17 : ทั้งหน้าเป็นฉากเดียวเต็มจอ (.sm-ov) — หน้าเนื้อหาเดิม (ใบเซียมซี / ตารางไม้) ไม่ต้องมีแล้ว
     "ชื่อสาขาให้เลือกอยู่ข้างกระบอกเสี่ยงทาย เป็นดรอปบล็อคสวยๆ"
     จอกว้าง : กระบอกฝั่งซ้าย · ป้ายชื่อ + ดรอปดาวน์เลือกสาขา + ปุ่มเขย่าฝั่งขวา
     จอแคบ  : ป้ายชื่อบน · กระบอกกลาง · ดรอปดาวน์ล่าง (รายชื่อขึ้นเป็นแผ่นจากล่างจอ)
     เลือกสาขา = เขย่าทันที : กระบอกเลื่อนเข้ากลางจอ ขยาย เขย่า ไม้พุ่ง แสงวาบ แล้วรูปใบเซียมซีพลิกขึ้น (บันทึก / แชร์)
   คลาสบน .sm-ov (siamsi.js ตั้ง) : is-idle → is-intro → is-shake → is-pop (+ is-flash) → is-result → is-burst
     --k / --cy = ขนาดและจุดกลางกระบอกตอนเขย่า  --ki / --ix / --iy = ขนาดและระยะเลื่อนตอนรอเลือก  --ctl = ขอบบนของดรอปดาวน์ (จอแคบ)
   ฟอนต์ : Noto Sans Thai (เนื้อหา) · Srisakdi (คำว่า เซียมซี) · Kanit (หัวข้อ / ตัวเลข)
   ผู้ใช้ตั้งลดการเคลื่อนไหว : ปิดเอฟเฟกต์เคลื่อนไหวทั้งหมด (ท้ายไฟล์)
   ============================================================ */

:root {
    --red: #c0392b;
    --gold: #d6b172;
    --gold-hi: #f3d79a;
    --gold-lt: #fff0c2;
    --gold-dk: #a8742f;
    --cream: #fbe9c8;
    --cream-m: rgba(251, 233, 200, 0.7);
    --f-head: 'Kanit', 'Noto Sans Thai', sans-serif;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

html,
body {
    height: 100%;
}

body.sm-app {
    margin: 0;
    overflow: hidden;
    background: #3e0605;
    color: var(--cream);
    font-family: 'Noto Sans Thai', sans-serif;
}

a {
    color: inherit;
}

button,
input {
    font-family: inherit;
}

@keyframes sm-spin      { to { transform: rotate(360deg); } }
@keyframes sm-pop-bg    { from { opacity: 0; } to { opacity: 1; } }
@keyframes sm-pop-bg-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes sm-pop-in    { from { opacity: 0; transform: translateY(24px) scale(.92); } to { opacity: 1; transform: none; } }
@keyframes sm-shine     { to { background-position: 200% 0; } }

@keyframes sm-breathe {
    0%, 100% { transform: scale(.94); opacity: .85; }
    50%      { transform: scale(1.06); opacity: 1; }
}

/* ============================================================
   ฉาก : พื้นแดง ลายวงกลมจีน ชายคา โคมไฟ
   ============================================================ */
.sm-ov {
    --k: 1.6;
    --cy: 50%;
    --ki: 1.4;
    --ix: 0px;
    --iy: 0px;
    --ctl: 70%;
    position: fixed;
    inset: 0;
    overflow: hidden;
    color: var(--cream);
    -webkit-tap-highlight-color: transparent;
}

.sm-ov.is-result {
    --cy: 46%;
}

.sm-ov-bg {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% var(--cy), #bf2b21 0, #7e140f 30%, #3e0605 66%, #150100 100%);
}

.sm-ov-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56'%3E%3Cg fill='none' stroke='%23f3d79a' stroke-opacity='.12'%3E%3Ccircle cx='0' cy='0' r='28'/%3E%3Ccircle cx='56' cy='0' r='28'/%3E%3Ccircle cx='0' cy='56' r='28'/%3E%3Ccircle cx='56' cy='56' r='28'/%3E%3Ccircle cx='28' cy='28' r='28'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 56px 56px;
    -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 15%, transparent 75%);
    mask-image: radial-gradient(circle at 50% 50%, #000 15%, transparent 75%);
}

/* ชายคาแดงเข้มขอบทอง + ระบายครึ่งวงกลม */
.sm-eave {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    right: 0;
    height: 20px;
    border-bottom: 2px solid var(--gold);
    background:
        repeating-linear-gradient(90deg, rgba(243, 215, 154, 0.18) 0 2px, transparent 2px 24px),
        linear-gradient(180deg, #2e0505, #6e1310);
    pointer-events: none;
}

.sm-eave::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 13px;
    background: radial-gradient(circle at 12px 0, #6e1310 0 9px, var(--gold) 9.5px 11.5px, transparent 12px) 0 0 / 24px 13px repeat-x;
    filter: drop-shadow(0 3px 3px rgba(30, 0, 0, 0.35));
}

/* โคมไฟ : เชือก = พื้นหลังของ span · ฝาบน ::before · ตัวโคม ::after · ฝาล่าง + พู่ <i>
   --lw กว้าง  --lb ตัวโคมสูง  --h ความยาวทั้งหมด (ยิ่งยาว โคมยิ่งห้อยต่ำ) */
.sm-lan {
    --lw: 54px;
    --lb: 68px;
    position: absolute;
    z-index: 1;
    top: 22px;
    width: var(--lw);
    height: var(--h, 160px);
    background: linear-gradient(var(--gold-hi), var(--gold-hi)) 50% 0 / 2px calc(100% - var(--lb) - 22px) no-repeat;
    transform-origin: 50% 0;
    animation: sm-swing 3.8s ease-in-out infinite alternate;
    pointer-events: none;
}

.sm-lan.l1 { left: max(10px, 4%); --h: 170px; }
.sm-lan.l2 { right: max(10px, 4%); --h: 140px; animation-delay: -1.9s; }
.sm-lan.l3 { left: max(70px, 11%); --lw: 38px; --lb: 48px; --h: 104px; animation-delay: -1.2s; }
.sm-lan.l4 { right: max(70px, 11%); --lw: 38px; --lb: 48px; --h: 120px; animation-delay: -2.6s; }

.sm-lan::before {
    content: '';
    position: absolute;
    z-index: 1;
    left: 25%;
    bottom: calc(var(--lb) + 14px);
    width: 50%;
    height: 8px;
    border-radius: 3px;
    background: linear-gradient(180deg, var(--gold-lt), #c99a55);
}

.sm-lan::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 18px;
    width: 100%;
    height: var(--lb);
    border-radius: 50%;
    background:
        repeating-linear-gradient(90deg, transparent 0 calc(var(--lw) / 5 - 1px), rgba(110, 15, 10, 0.24) calc(var(--lw) / 5 - 1px) calc(var(--lw) / 5)),
        radial-gradient(ellipse at 50% 40%, #ffd890 0, #ff7a45 26%, #e2362a 56%, #a3201a 86%, #7a1612 100%);
    box-shadow: 0 0 30px rgba(255, 140, 60, 0.6), 0 0 70px rgba(255, 120, 40, 0.25);
    animation: sm-flicker 2.4s ease-in-out infinite;
}

.sm-lan i {
    position: absolute;
    z-index: 1;
    left: 25%;
    bottom: 0;
    width: 50%;
    height: 22px;
    background:
        linear-gradient(180deg, var(--gold-lt), #c99a55) 0 0 / 100% 7px no-repeat,
        linear-gradient(180deg, var(--gold-hi), var(--red)) 50% 100% / 6px 16px no-repeat;
}

@keyframes sm-swing {
    from { transform: rotate(-4deg); }
    to   { transform: rotate(4deg); }
}

@keyframes sm-flicker {
    0%, 100% { opacity: 1; }
    45%      { opacity: .86; }
    55%      { opacity: .97; }
}

/* ============================================================
   แสง : รัศมีทองสองชั้นหมุนสวนกัน · แสงกลาง · วงคลื่น · ประกาย · เหรียญจีน
   ตอนรอเลือก (is-idle) รัศมี / แสง / กระบอก เลื่อนไปอยู่ที่กระบอก (--ix --iy) เลือกแล้วค่อย ๆ เลื่อนกลับกลางจอ
   ============================================================ */
.sm-ov-rays {
    position: absolute;
    left: 50%;
    top: var(--cy);
    width: 140vmax;
    height: 140vmax;
    margin: -70vmax 0 0 -70vmax;
    background: repeating-conic-gradient(from 0deg, rgba(255, 214, 120, 0.34) 0 5deg, transparent 5deg 13deg);
    -webkit-mask-image: radial-gradient(circle closest-side, #000 0, rgba(0, 0, 0, 0.75) 18%, transparent 100%);
    mask-image: radial-gradient(circle closest-side, #000 0, rgba(0, 0, 0, 0.75) 18%, transparent 100%);
    animation: sm-ov-burst .9s cubic-bezier(.2, .9, .3, 1) both, sm-spin 26s linear infinite;
    pointer-events: none;
    will-change: transform;
}

.sm-ov-rays.r2 {
    background: repeating-conic-gradient(from 4deg, rgba(255, 246, 220, 0.2) 0 1.4deg, transparent 1.4deg 6.5deg);
    animation: sm-ov-burst 1.1s cubic-bezier(.2, .9, .3, 1) both, sm-spin 44s linear infinite reverse;
}

@keyframes sm-ov-burst {
    from { opacity: 0; scale: .15; }
    to   { opacity: 1; scale: 1; }
}

.sm-ov-glow {
    position: absolute;
    left: 50%;
    top: var(--cy);
    width: 720px;
    height: 720px;
    margin: -360px 0 0 -360px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 238, 180, 0.95) 0, rgba(255, 200, 100, 0.5) 20%, rgba(255, 150, 60, 0.15) 44%, transparent 66%);
    animation: sm-breathe 2.4s ease-in-out infinite;
    pointer-events: none;
}

.sm-ov.is-shake .sm-ov-glow {
    animation: sm-ov-throb .36s ease-in-out infinite;
}

.sm-ov.is-pop .sm-ov-glow {
    animation: sm-ov-swell .7s ease-out both;
}

@keyframes sm-ov-throb {
    0%, 100% { transform: scale(.9); opacity: .78; }
    50%      { transform: scale(1.1); opacity: 1; }
}

@keyframes sm-ov-swell {
    from { transform: scale(1); }
    to   { transform: scale(1.5); }
}

/* เลื่อนตามกระบอก : ตอนรอเลือกอยู่ที่ตำแหน่งกระบอก */
.sm-ov-rays,
.sm-ov-glow,
.sm-ov-stage {
    transition: translate .75s cubic-bezier(.25, .8, .25, 1);
}

.sm-ov.is-idle .sm-ov-rays,
.sm-ov.is-idle .sm-ov-glow,
.sm-ov.is-idle .sm-ov-stage {
    translate: var(--ix) var(--iy);
}

/* วงคลื่นแสงขยายออกทุกจังหวะเขย่า + วงใหญ่ตอนแสงวาบ */
.sm-ov-rings i {
    position: absolute;
    left: 50%;
    top: var(--cy);
    width: 300px;
    height: 300px;
    margin: -150px 0 0 -150px;
    border: 3px solid rgba(255, 226, 150, 0.95);
    border-radius: 50%;
    box-shadow: 0 0 26px rgba(255, 196, 96, 0.7), inset 0 0 26px rgba(255, 196, 96, 0.5);
    opacity: 0;
    pointer-events: none;
}

.sm-ov.is-shake .sm-ov-rings i {
    animation: sm-ov-ring 1.08s ease-out infinite;
}

.sm-ov.is-shake .sm-ov-rings i:nth-child(2) { animation-delay: .36s; }
.sm-ov.is-shake .sm-ov-rings i:nth-child(3) { animation-delay: .72s; }

.sm-ov.is-flash .sm-ov-rings i {
    animation: sm-ov-ring 1s ease-out both;
}

.sm-ov.is-flash .sm-ov-rings i:nth-child(2) { animation-delay: .12s; }
.sm-ov.is-flash .sm-ov-rings i:nth-child(3) { animation-delay: .24s; }

@keyframes sm-ov-ring {
    0%   { transform: scale(.3); opacity: 1; }
    100% { transform: scale(3.4); opacity: 0; }
}

/* ประกายพุ่งออกรอบทิศ : เส้นแสง (หัวสว่างนำ หางจาง) + ดาวสี่แฉกหมุน (i.st) */
.sm-ov-sparks i {
    position: absolute;
    left: 50%;
    top: var(--cy);
    width: var(--s);
    height: var(--l);
    margin-left: calc(var(--s) / -2);
    border-radius: 99px;
    background: linear-gradient(0deg, rgba(255, 170, 60, 0), #ffe39a 60%, #fff);
    box-shadow: 0 0 10px 2px rgba(255, 200, 90, 0.85);
    transform-origin: 50% 0;
    opacity: 0;
    pointer-events: none;
}

.sm-ov-sparks i.st {
    height: var(--s);
    margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2);
    border-radius: 0;
    background: radial-gradient(circle, #fff 0, #fff3c4 30%, #f2c96f 72%);
    box-shadow: none;
    clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
    transform-origin: 50% 50%;
}

.sm-ov.is-shake .sm-ov-sparks i,
.sm-ov.is-pop .sm-ov-sparks i {
    animation: sm-ov-spark 1s cubic-bezier(.15, .75, .35, 1) var(--d) infinite;
}

.sm-ov.is-shake .sm-ov-sparks i.st,
.sm-ov.is-pop .sm-ov-sparks i.st {
    animation: sm-ov-star 1.5s ease-out var(--d) infinite;
}

.sm-ov.is-burst .sm-ov-sparks i {
    animation: sm-ov-spark 1.3s cubic-bezier(.1, .8, .3, 1) both;
}

.sm-ov.is-burst .sm-ov-sparks i.st {
    animation: sm-ov-star 1.8s ease-out both;
}

@keyframes sm-ov-spark {
    0%   { transform: rotate(var(--a)) translateY(-50px) scaleY(.3); opacity: 0; }
    12%  { opacity: 1; }
    100% { transform: rotate(var(--a)) translateY(calc(var(--r) * -1)) scaleY(1); opacity: 0; }
}

@keyframes sm-ov-star {
    0%   { transform: rotate(var(--a)) translateY(-40px) rotate(0deg) scale(.2); opacity: 0; }
    18%  { opacity: 1; }
    100% { transform: rotate(var(--a)) translateY(calc(var(--r) * -1)) rotate(200deg) scale(1); opacity: 0; }
}

/* เหรียญจีนรูสี่เหลี่ยมโปรยลง พลิกไปมา */
.sm-ov-coins i {
    position: absolute;
    top: -60px;
    left: var(--x);
    width: var(--s);
    height: var(--s);
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #fff6d0 0, #f0c96e 38%, #c48a3a 72%, #8a5a22 100%);
    box-shadow: inset 0 0 0 calc(var(--s) * 0.09) rgba(255, 236, 180, 0.55), 0 4px 10px rgba(0, 0, 0, 0.3);
    opacity: 0;
    animation: sm-ov-coin var(--t) linear var(--d) infinite;
    pointer-events: none;
}

.sm-ov-coins i::after {
    content: '';
    position: absolute;
    left: 34%;
    top: 34%;
    width: 32%;
    height: 32%;
    background: #6e1310;
    box-shadow: 0 0 0 calc(var(--s) * 0.05) rgba(122, 60, 20, 0.55);
}

@keyframes sm-ov-coin {
    0%   { transform: translate(0, 0) rotateX(0deg) rotate(0deg); opacity: 0; }
    6%   { opacity: 1; }
    92%  { opacity: 1; }
    100% { transform: translate(var(--dx), calc(100vh + 120px)) rotateX(var(--rx)) rotate(var(--rz)); opacity: 0; }
}

/* ============================================================
   กระบอกเซียมซี : กล่อง 150 x 272 ขยาย --k เท่า (รอเลือก = --ki)
   ============================================================ */
.sm-ov-stage {
    position: absolute;
    z-index: 2;
    left: 50%;
    top: var(--cy);
    width: 0;
    height: 0;
}

.sm-ov-cylw {
    position: absolute;
    left: -75px;
    top: -136px;
    width: 150px;
    height: 272px;
    transform: scale(var(--k));
    transition: transform .75s cubic-bezier(.25, .8, .25, 1);
}

.sm-ov.is-idle .sm-ov-cylw {
    transform: scale(var(--ki));
}

/* เขย่าอีกครั้งจากหน้ารูป : กระบอกพุ่งเข้ากลางจอใหม่ */
.sm-ov.is-intro.zoom .sm-ov-cylw {
    animation: sm-ov-in .55s cubic-bezier(.2, .9, .3, 1.25) both;
}

@keyframes sm-ov-in {
    from { opacity: 0; transform: translateY(140px) scale(calc(var(--k) * 0.35)) rotate(-12deg); }
    to   { opacity: 1; transform: scale(var(--k)); }
}

/* กลับจากหน้ารูปมาหน้าเลือก : กระบอกค่อย ๆ ปรากฏ */
.sm-ov.re .sm-ov-stage {
    animation: sm-pop-bg .45s ease-out both;
}

.sm-cyl {
    position: relative;
    z-index: 1;
    width: 150px;
    height: 272px;
    transform-origin: 50% 88%;
}

/* ปากกระบอก (วงรีด้านใน) */
.sm-cyl::before {
    content: '';
    position: absolute;
    z-index: 1;
    left: 0;
    right: 0;
    bottom: 158px;
    height: 26px;
    border-radius: 50%;
    background: radial-gradient(ellipse at 50% 72%, #160404 0, #3a0c0a 45%, #7a1d18 82%, #a8302a 100%);
    box-shadow: 0 0 0 3px #e9c77a, 0 0 0 5px rgba(122, 60, 20, 0.55), inset 0 5px 8px rgba(0, 0, 0, 0.6);
}

/* ขอบปากโถสีทอง (ครึ่งหน้า) : ทับขอบบนตัวโถ ไม้จึงดูอยู่ในโถจริง (ผู้ใช้ขอ 2026-10-17 "ทำโถใส่ไม้ให้สวยๆ") */
.sm-cyl::after {
    content: '';
    position: absolute;
    z-index: 4;
    left: -4px;
    right: -4px;
    bottom: 154px;
    height: 34px;
    border: 5px solid #f0cf86;
    border-radius: 50%;
    box-shadow: 0 3px 0 #a8742f, 0 6px 10px rgba(30, 0, 0, 0.45), inset 0 -2px 0 #fff3c4;
    clip-path: inset(50% -6px -14px -6px);
    pointer-events: none;
}

/* ฐานโถทอง */
.sm-base {
    position: absolute;
    z-index: 4;
    left: -7px;
    right: -7px;
    bottom: -7px;
    height: 19px;
    border-radius: 6px 6px 11px 11px;
    background:
        repeating-linear-gradient(90deg, rgba(122, 60, 20, 0.35) 0 2px, transparent 2px 11px),
        linear-gradient(180deg, #fff3c4 0, #e9c77a 40%, #b47c34 80%, #8a5a22 100%);
    box-shadow: inset 0 1px 0 #fff8dc, 0 8px 16px rgba(20, 0, 0, 0.5);
}

.sm-sticks {
    position: absolute;
    z-index: 2;
    left: 14px;
    right: 14px;
    bottom: 150px;
    height: 0;
}

/* ไม้เซียมซี : ไม้ไผ่ ปลายแดง */
.sm-sticks i {
    position: absolute;
    bottom: -30px;
    width: 8px;
    margin-left: -4px;
    border-radius: 4px 4px 2px 2px;
    background: linear-gradient(90deg, #d4ae68 0, #f5e4bd 45%, #c9a05a 100%);
    box-shadow: 0 0 0 1px rgba(140, 100, 45, 0.18);
    transform: rotate(var(--a));
    transform-origin: 50% 100%;
}

.sm-sticks i::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 13px;
    border-radius: 4px 4px 0 0;
    background: linear-gradient(90deg, #a52a22, #e04a3c 50%, #a52a22);
}

/* ตัวกระบอก : แดงชาด แถบทองลาย มีแสงวาบผ่านเป็นระยะ */
.sm-body {
    position: absolute;
    z-index: 3;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 171px;
    overflow: hidden;
    border-radius: 16px 16px 30px 30px / 11px 11px 22px 22px;
    /* แดงลงรักเงา : เงาขอบซ้ายขวา · แถบแสงสะท้อน · ลายเมฆทองจาง · ไล่สีแดงชาด */
    background:
        linear-gradient(90deg, rgba(20, 0, 0, 0.38) 0, transparent 15%, transparent 84%, rgba(20, 0, 0, 0.45) 100%),
        linear-gradient(90deg, transparent 20%, rgba(255, 236, 214, 0.38) 25%, rgba(255, 236, 214, 0.1) 30%, transparent 34%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='30'%3E%3Cg fill='none' stroke='%23f3d79a' stroke-opacity='.16' stroke-width='1.4'%3E%3Cpath d='M4 22c0-5 6-7 9-3 1-6 10-6 11 0 3-3 8-1 8 3'/%3E%3Cpath d='M26 9c0-3 4-4 6-2 1-4 7-4 7 0'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 44px 30px,
        linear-gradient(90deg, #6e1a17 0, #a82a24 18%, #d64a3d 40%, #c43b32 60%, #8f241f 82%, #5e1512 100%);
    box-shadow: inset 0 -14px 22px rgba(0, 0, 0, 0.3), inset 0 8px 10px rgba(255, 255, 255, 0.08), 0 0 0 1.5px rgba(243, 215, 154, 0.55), 0 18px 32px rgba(20, 0, 0, 0.55);
}

.sm-body::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 40%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transform: translateX(-120%) skewX(-12deg);
    animation: sm-sheen 4.6s ease-in-out infinite;
}

@keyframes sm-sheen {
    0%        { transform: translateX(-120%) skewX(-12deg); }
    55%, 100% { transform: translateX(320%) skewX(-12deg); }
}

.sm-band {
    width: 100%;
    height: 15px;
    margin-top: 16px;
    /* แถบทองลายประจำยาม : เส้นขอบน้ำตาลบนล่าง + ลายฟันปลาสลับ */
    background:
        linear-gradient(#7a3c14, #7a3c14) 0 2px / 100% 1px no-repeat,
        linear-gradient(#7a3c14, #7a3c14) 0 calc(100% - 2px) / 100% 1px no-repeat,
        repeating-linear-gradient(90deg, rgba(122, 21, 18, 0.5) 0 2px, transparent 2px 5px, rgba(122, 21, 18, 0.5) 5px 6px, transparent 6px 11px),
        linear-gradient(180deg, #fff3c4 0, #e9c77a 45%, #b47c34 100%);
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.3), 0 -1px 0 rgba(255, 243, 196, 0.5);
}

.sm-band.b2 {
    margin-top: auto;
    margin-bottom: 18px;
}

/* โลโก้ครูผู้ช่วย : เหรียญกรอบทองบนตัวกระบอก */
/* ผู้ใช้ขอ "ทำให้โลโก้เด่นๆ มีลูกเล่น" : วงทองหมุน (<i>) + เต้นตุบ ๆ + แสงเรือง + แสงวิ่งผ่าน */
.sm-logo {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    margin-top: 7px;
    border-radius: 50%;
    animation: sm-logo-beat 2.4s ease-in-out infinite;
}

.sm-logo i {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: conic-gradient(from 0deg, #fff6d0, #c48a3a, #fff0c2, #b47c34, #fff6d0, #d9a24e, #fff6d0);
    box-shadow: 0 0 14px rgba(255, 210, 120, 0.9), 0 0 28px rgba(255, 170, 60, 0.55);
    animation: sm-spin 4s linear infinite;
}

.sm-logo img {
    position: relative;
    width: 50px;
    height: 50px;
    border: 2px solid #7a1612;
    border-radius: 50%;
    object-fit: cover;
}

/* แสงวิ่งผ่านโลโก้ */
.sm-logo::after {
    content: '';
    position: absolute;
    inset: 4px;
    border-radius: 50%;
    background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, 0.75) 50%, transparent 65%) -150% 0 / 250% 100% no-repeat;
    animation: sm-logo-shine 3.2s ease-in-out infinite;
    pointer-events: none;
}

@keyframes sm-logo-beat {
    0%, 60%, 100% { transform: scale(1); }
    68%           { transform: scale(1.14); }
    76%           { transform: scale(.97); }
    84%           { transform: scale(1.08); }
}

@keyframes sm-logo-shine {
    0%, 40%   { background-position: -150% 0; }
    80%, 100% { background-position: 250% 0; }
}

/* ไม้แกล้งตกหล่น (รอเลือก) : ไม้กระเด็นออกจากปากกระบอก หมุนตกพื้นข้างกระบอก เด้ง แล้วจางหาย  --dir = ซ้าย (-1) / ขวา (1) */
.sm-drop {
    position: absolute;
    z-index: 4;
    left: 50%;
    bottom: 171px;
    width: 9px;
    height: 112px;
    margin-left: -4.5px;
    border-radius: 4px 4px 2px 2px;
    background:
        linear-gradient(90deg, #a52a22, #e04a3c 50%, #a52a22) 0 0 / 100% 13px no-repeat,
        linear-gradient(90deg, #d4ae68 0, #f5e4bd 45%, #c9a05a 100%);
    box-shadow: 0 0 10px rgba(255, 210, 120, 0.6);
    opacity: 0;
    pointer-events: none;
}

.sm-drop b {
    position: absolute;
    bottom: 100%;
    left: 50%;
    min-width: 26px;
    margin-bottom: 3px;
    padding: 1px 5px;
    border: 1.5px solid var(--gold-hi);
    border-radius: 7px;
    background: linear-gradient(180deg, #d9473b, #a3201a);
    color: #fff;
    font-family: var(--f-head);
    font-size: 12px;
    line-height: 1.3;
    text-align: center;
    transform: translateX(-50%);
}

.sm-ov.is-idle .sm-drop.on {
    animation: sm-drop 2.3s cubic-bezier(.35, 0, .6, 1) both;
}

@keyframes sm-drop {
    0%   { opacity: 0; transform: translate(0, 40px) rotate(0deg); }
    8%   { opacity: 1; }
    30%  { transform: translate(calc(var(--dir) * 60px), -95px) rotate(calc(var(--dir) * 110deg)); animation-timing-function: cubic-bezier(.5, 0, 1, .6); }
    58%  { transform: translate(calc(var(--dir) * 128px), 150px) rotate(calc(var(--dir) * 250deg)); animation-timing-function: ease-out; }
    66%  { transform: translate(calc(var(--dir) * 140px), 122px) rotate(calc(var(--dir) * 262deg)); animation-timing-function: ease-in; }
    74%  { transform: translate(calc(var(--dir) * 148px), 150px) rotate(calc(var(--dir) * 270deg)); }
    90%  { opacity: 1; transform: translate(calc(var(--dir) * 150px), 150px) rotate(calc(var(--dir) * 270deg)); }
    100% { opacity: 0; transform: translate(calc(var(--dir) * 150px), 150px) rotate(calc(var(--dir) * 270deg)); }
}

/* ไม้โผล่สุ่ม (รอเลือก) : ไม้อันหนึ่งดันขึ้น ป้ายเลขแดงโผล่บนปลายไม้ (siamsi.js ใส่ .peek + data-n) */
.sm-sticks i {
    transition: transform .35s cubic-bezier(.3, 1.5, .5, 1);
}

.sm-sticks i.peek {
    z-index: 2;
    transform: translateY(-34px) rotate(var(--a));
}

.sm-sticks i::after {
    content: attr(data-n);
    position: absolute;
    bottom: 100%;
    left: 50%;
    min-width: 26px;
    margin-bottom: 3px;
    padding: 1px 5px;
    border: 1.5px solid var(--gold-hi);
    border-radius: 7px;
    background: linear-gradient(180deg, #d9473b, #a3201a);
    color: #fff;
    font-family: var(--f-head);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
    box-shadow: 0 0 10px rgba(255, 190, 90, 0.7);
    opacity: 0;
    transform: translateX(-50%) scale(.4);
    transition: opacity .25s, transform .3s cubic-bezier(.3, 1.6, .5, 1);
}

.sm-sticks i.peek::after {
    opacity: 1;
    transform: translateX(-50%) scale(1);
}

.sm-label {
    margin: auto 0;
    padding: 2px 12px 0;
    border: 2px solid var(--gold-hi);
    border-radius: 10px;
    background: rgba(60, 10, 8, 0.22);
    color: #ffe6a6;
    font-family: 'Srisakdi', 'Noto Sans Thai', serif;
    font-size: 22px;            /* เล็กลงจาก 25 ให้โลโก้ใหญ่ขึ้นได้ */
    font-weight: 700;
    line-height: 1.45;
    text-shadow: 0 2px 0 #5a0e0c, 0 0 12px rgba(255, 200, 100, 0.45);
    box-shadow: inset 0 0 0 3px rgba(122, 21, 18, 0.35);
}

/* รอเลือก : กระบอกโยกเบา ๆ  เขย่า : โยกแรง ไม้กระทบกัน  ไม้พุ่ง : กระบอกยุบตัวกลับนิ่ง */
.sm-ov.is-idle .sm-ov-cyl {
    animation: sm-ov-idle 3.6s ease-in-out infinite;
}

@keyframes sm-ov-idle {
    0%, 100% { transform: rotate(-2deg) translateY(0); }
    50%      { transform: rotate(2deg) translateY(-6px); }
}

.sm-ov.is-shake .sm-ov-cyl {
    animation: sm-ov-shake .36s ease-in-out infinite;
}

.sm-ov.is-shake .sm-ov-cyl .sm-sticks i {
    animation: sm-jig .12s ease-in-out infinite alternate;
    animation-delay: calc(var(--d) * -0.12s);
}

.sm-ov.is-pop .sm-ov-cyl {
    animation: sm-ov-settle .5s cubic-bezier(.3, 1.6, .5, 1) both;
}

@keyframes sm-ov-shake {
    0%, 100% { transform: rotate(0deg) translate(0, 0); }
    20%      { transform: rotate(-16deg) translate(-8px, -10px); }
    45%      { transform: rotate(4deg) translate(0, -16px); }
    70%      { transform: rotate(16deg) translate(8px, -10px); }
    88%      { transform: rotate(-4deg) translate(0, -4px); }
}

@keyframes sm-jig {
    from { transform: translateY(0) rotate(var(--a)); }
    to   { transform: translateY(-10px) rotate(calc(var(--a) * -1)); }
}

@keyframes sm-ov-settle {
    0%   { transform: translateY(-10px) scaleY(.94); }
    100% { transform: none; }
}

/* ---------- เขย่านานขึ้นให้ลุ้น (ผู้ใช้ขอ 2026-10-17) : siamsi.js ใส่ .is-hot (ช่วง 2) แล้ว .is-fire (ช่วง 3 นับถอยหลัง) ----------
   ช่วง 2 เขย่าแรงขึ้น · ไม้ "?" แหย่ออกมาแล้วหล่นกลับ · แสงกลางเต้นถี่   ช่วง 3 เขย่าถี่สุด · แสงกลางเต้นถี่สุด · ประกายพุ่งเร็ว */
.sm-ov.is-hot .sm-ov-cyl {
    animation: sm-ov-shake2 .28s ease-in-out infinite;
}

.sm-ov.is-fire .sm-ov-cyl {
    animation: sm-ov-shake3 .19s linear infinite;
}

.sm-ov.is-hot .sm-ov-cyl .sm-sticks i {
    animation-duration: .09s;
}

@keyframes sm-ov-shake2 {
    0%, 100% { transform: rotate(0deg) translate(0, 0); }
    20%      { transform: rotate(-20deg) translate(-12px, -14px); }
    45%      { transform: rotate(5deg) translate(0, -22px); }
    70%      { transform: rotate(20deg) translate(12px, -14px); }
    88%      { transform: rotate(-5deg) translate(0, -6px); }
}

@keyframes sm-ov-shake3 {
    0%, 100% { transform: rotate(-18deg) translate(-10px, -12px); }
    25%      { transform: rotate(0deg) translate(0, -24px); }
    50%      { transform: rotate(18deg) translate(10px, -12px); }
    75%      { transform: rotate(0deg) translate(0, -4px); }
}

/* ไม้ "?" แหย่ออกมาจากปากกระบอกแล้วหล่นกลับ (ช่วง 2–3) */
.sm-ov.is-hot .sm-stick {
    animation: sm-ov-tease .7s cubic-bezier(.3, .8, .4, 1) infinite;
}

.sm-ov.is-fire .sm-stick {
    animation-duration: .5s;
}

@keyframes sm-ov-tease {
    0%, 100% { transform: translateY(170px) rotate(0deg); }
    45%      { transform: translateY(78px) rotate(-5deg); }
    60%      { transform: translateY(92px) rotate(4deg); }
}

.sm-ov.is-hot .sm-ov-glow {
    animation: sm-ov-throb .24s ease-in-out infinite;
}

.sm-ov.is-fire .sm-ov-glow {
    animation: sm-ov-throb .17s ease-in-out infinite;
}

.sm-ov.is-hot .sm-ov-sparks i {
    animation-duration: .75s;
}

.sm-ov.is-fire .sm-ov-sparks i {
    animation-duration: .55s;
}

.sm-ov.is-fire .sm-ov-rings i {
    animation-duration: .6s;
}

/* แตะกระบอกเพื่อเขย่า (รอเลือกเท่านั้น) */
.sm-ov-hit {
    position: absolute;
    z-index: 5;
    inset: -8px;
    padding: 0;
    border: 0;
    border-radius: 22px;
    background: none;
    cursor: pointer;
}

.sm-ov:not(.is-idle) .sm-ov-hit {
    pointer-events: none;
}

/* ไม้ที่พุ่งขึ้น : หน้าต่างตัดขอบที่ปากกระบอก (สูงจากก้นกระบอก 171px) ไม้จึงดูโผล่จากในกระบอก */
.sm-stickwin {
    position: absolute;
    z-index: 4;
    left: 50%;
    bottom: 171px;
    width: 220px;
    height: 300px;
    margin-left: -110px;
    overflow: hidden;
    pointer-events: none;
}

.sm-stick {
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 18px;
    height: 160px;
    margin-left: -9px;
    border-radius: 9px 9px 3px 3px;
    background: linear-gradient(90deg, #d4ae68 0, #f8e9c6 45%, #c9a05a 100%);
    box-shadow: 0 4px 12px rgba(20, 0, 0, 0.4), 0 0 18px rgba(255, 210, 120, 0.5);
    transform: translateY(170px);
    transform-origin: 50% 100%;
}

.sm-stick span {
    position: absolute;
    top: 6px;
    left: 50%;
    min-width: 42px;
    padding: 2px 9px;
    border: 2px solid var(--gold-hi);
    border-radius: 10px;
    background: linear-gradient(180deg, #d9473b, #a3201a);
    color: #fff;
    font-family: var(--f-head);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
    transform: translateX(-50%);
    box-shadow: 0 3px 8px rgba(20, 0, 0, 0.4), 0 0 14px rgba(255, 190, 90, 0.6);
}

.sm-ov.is-pop .sm-stick {
    animation: sm-ov-rise .7s cubic-bezier(.2, .9, .3, 1.2) both;
    box-shadow: 0 4px 12px rgba(20, 0, 0, 0.4), 0 0 30px rgba(255, 232, 160, 0.95), 0 0 60px rgba(255, 200, 100, 0.6);
}

@keyframes sm-ov-rise {
    0%   { transform: translateY(170px) rotate(0deg); }
    65%  { transform: translateY(-24px) rotate(-4deg); }
    100% { transform: translateY(-8px) rotate(6deg); }
}

/* ลำแสงพุ่งจากปากกระบอก */
.sm-ov-beam {
    position: absolute;
    z-index: 3;
    left: 50%;
    bottom: 171px;
    width: 130px;
    height: 460px;
    margin-left: -65px;
    background: linear-gradient(0deg, rgba(255, 248, 220, 0.95), rgba(255, 222, 140, 0.55) 35%, rgba(255, 210, 120, 0) 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 38%, #000 62%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 38%, #000 62%, transparent);
    transform: scaleY(0);
    transform-origin: 50% 100%;
    opacity: 0;
    pointer-events: none;
}

.sm-ov.is-pop .sm-ov-beam {
    animation: sm-ov-beam .8s ease-out both;
}

@keyframes sm-ov-beam {
    0%   { transform: scaleY(0); opacity: 0; }
    25%  { opacity: 1; }
    100% { transform: scaleY(1); opacity: .8; }
}

/* คำบรรยายใต้กระบอก (ตอนเขย่า) : ตัวทองแสงวิ่ง เด้งขึ้นทุกครั้งที่เปลี่ยนข้อความ */
.sm-ov-cap {
    position: absolute;
    z-index: 3;
    left: 50%;
    top: calc(var(--cy) + 136px * var(--k) + 14px);
    width: min(92vw, 640px);
    margin: 0;
    transform: translateX(-50%);
    text-align: center;
    pointer-events: none;
    transition: opacity .3s;
}

.sm-ov.is-idle .sm-ov-cap {
    opacity: 0;
}

.sm-ov-cap b {
    display: block;
    background: linear-gradient(100deg, #e0a94e 0%, #fff5cc 16%, #f2c96f 32%, #c48838 50%, #fff2c0 66%, #eab95c 83%, #e0a94e 100%) 0 0 / 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-family: var(--f-head);
    font-size: clamp(30px, 6.4vw, 50px);
    font-weight: 700;
    line-height: 1.3;
    filter: drop-shadow(0 3px 0 #4a0b09) drop-shadow(0 8px 18px rgba(0, 0, 0, 0.5));
    animation: sm-shine 3s linear infinite;
}

.sm-ov.is-pop .sm-ov-cap b {
    font-size: clamp(38px, 8.6vw, 66px);
}

.sm-ov-cap span {
    display: block;
    margin-top: 2px;
    color: var(--cream);
    font-size: clamp(14px, 3.6vw, 18px);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.sm-ov-cap.pop b {
    animation: sm-ov-cap .45s cubic-bezier(.2, .9, .3, 1.4) both, sm-shine 3s linear infinite;
}

@keyframes sm-ov-cap {
    from { opacity: 0; transform: translateY(14px) scale(.85); }
    to   { opacity: 1; transform: none; }
}

/* นับถอยหลัง 3 2 1 : ตัวเลขทองตัวใหญ่ พุ่งเข้าหาจอแล้วหดลงที่ (siamsi.js cap(..., true)) */
.sm-ov-cap.cd b {
    font-size: clamp(64px, 17vw, 96px);
    line-height: 1.05;
}

.sm-ov-cap.cd.pop b {
    animation: sm-ov-cd .45s cubic-bezier(.2, .9, .3, 1.3) both, sm-shine 3s linear infinite;
}

@keyframes sm-ov-cd {
    0%   { opacity: 0; transform: scale(2.3); }
    55%  { opacity: 1; }
    100% { opacity: 1; transform: scale(1); }
}

.sm-ov.is-result .sm-ov-stage,
.sm-ov.is-result .sm-ov-cap {
    display: none;
}

/* ============================================================
   ข้างกระบอก (รอเลือก) : ป้ายชื่อ + ดรอปดาวน์เลือกสาขา + ปุ่มเขย่า
   จอแคบ : .sm-side ไม่มีกล่องของตัวเอง ป้ายชื่ออยู่บน ดรอปดาวน์อยู่ใต้กระบอก (--ctl)
   ============================================================ */
.sm-side {
    display: contents;
}

.sm-head {
    position: absolute;
    z-index: 4;
    top: 32px;
    left: 0;
    right: 0;
    text-align: center;
    pointer-events: none;
}

.sm-ctl {
    position: absolute;
    z-index: 4;
    top: var(--ctl);
    left: 0;
    right: 0;
    width: min(420px, calc(100% - 32px));
    margin: 0 auto;
}

.sm-head,
.sm-ctl {
    transition: opacity .35s, visibility .35s;
}

/* ข้อควรทราบล่างจอ (.sm-foot) ขึ้นค้างตลอดทุกช่วง (ผู้ใช้ขอ 2026-10-17) : --fh = ความสูงที่กันไว้ให้ */
.sm-ov:not(.is-idle) .sm-head,
.sm-ov:not(.is-idle) .sm-ctl {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.sm-ov.is-idle .sm-head {
    animation: sm-head-in .6s cubic-bezier(.2, .9, .3, 1.2) both;
}

/* ดรอปดาวน์ : เฟดอย่างเดียว (ห้าม transform : แผ่นรายชื่อแบบ fixed บนมือถือจะยึดกล่องนี้แทนจอ) */
.sm-ov.is-idle .sm-ctl {
    animation: sm-pop-bg .5s ease-out .1s both;
}

@keyframes sm-head-in {
    from { opacity: 0; transform: translateY(-18px); }
    to   { opacity: 1; transform: none; }
}

@keyframes sm-ov-up {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}

/* ป้ายชื่อ : แดงลงรัก กรอบทองสองชั้น หมุดทองสองข้าง */
.sm-plaque {
    position: relative;
    display: inline-block;
    max-width: 100%;
    padding: 4px 26px 11px;
    border: 2px solid #e2bd6e;
    border-radius: 14px;
    background:
        radial-gradient(ellipse 70% 60% at 50% 0%, rgba(255, 214, 130, 0.3), transparent 70%),
        linear-gradient(180deg, #bd2a20 0, #8c1a15 55%, #6b120f 100%);
    box-shadow:
        inset 0 0 0 3px #7d1612,
        inset 0 0 0 4px rgba(243, 215, 154, 0.8),
        0 12px 28px rgba(20, 0, 0, 0.5),
        0 0 50px rgba(255, 170, 60, 0.3);
}

.sm-plaque::before,
.sm-plaque::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 16px;
    height: 16px;
    margin-top: -8px;
    background:
        radial-gradient(circle, #8c1a15 0 3px, transparent 3.5px),
        linear-gradient(135deg, var(--gold-lt), #d6a24e 55%, var(--gold-dk));
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
    transform: rotate(45deg);
}

.sm-plaque::before { left: -9px; }
.sm-plaque::after  { right: -9px; }

/* ดาวประกายสี่แฉกระยิบรอบป้าย */
.sm-tw {
    position: absolute;
    z-index: 2;
    width: 18px;
    height: 18px;
    background: radial-gradient(circle, #fff 0, #fff3c4 30%, #f2c96f 70%);
    clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
    opacity: 0;
    animation: sm-twinkle 2.8s ease-in-out infinite;
    pointer-events: none;
}

.sm-tw.tw1 { top: -12px; left: 9%; }
.sm-tw.tw2 { top: 26%; right: -30px; width: 14px; height: 14px; animation-delay: -.7s; }
.sm-tw.tw3 { bottom: -14px; right: 12%; animation-delay: -1.4s; }
.sm-tw.tw4 { bottom: 18%; left: -32px; width: 13px; height: 13px; animation-delay: -2.1s; }
.sm-tw.tw5 { top: 12%; left: 30%; width: 12px; height: 12px; animation-delay: -1s; }
.sm-tw.tw6 { top: 6%; right: 22%; width: 15px; height: 15px; animation-delay: -1.8s; }

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

.sm-plaque h1 {
    margin: 0;
    line-height: 1;
}

/* ตัวอักษรทอง มีแสงวิ่งผ่านช้า ๆ */
.sm-plaque .t1,
.sm-plaque .t2 {
    display: block;
    background: linear-gradient(100deg, #e0a94e 0%, #fff5cc 16%, #f2c96f 32%, #c48838 50%, #fff2c0 66%, #eab95c 83%, #e0a94e 100%) 0 0 / 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: sm-shine 6s linear infinite;
}

.sm-plaque .t1 {
    padding: 10px 6px 0;        /* ที่ว่างให้หางตัวอักษร Srisakdi ที่ยื่นขึ้นไป */
    font-family: 'Srisakdi', 'Noto Sans Thai', serif;
    font-size: 46px;
    font-weight: 700;
    line-height: 1.12;
    filter: drop-shadow(0 3px 0 #4a0b09) drop-shadow(0 8px 16px rgba(0, 0, 0, 0.45));
}

.sm-plaque .t2 {
    margin-top: 1px;
    font-family: var(--f-head);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: .5px;
    filter: drop-shadow(0 2px 0 #4a0b09);
}

.sm-plaque-sub {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 3px;
    color: var(--gold-hi);
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: 2px;
}

.sm-plaque-sub::before,
.sm-plaque-sub::after {
    content: '';
    width: 26px;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--gold-hi));
}

.sm-plaque-sub::after {
    background: linear-gradient(270deg, transparent, var(--gold-hi));
}

/* ---------- ดรอปดาวน์เลือกสาขา (ผู้ใช้ขอ "ดรอปบล็อคสวยๆ") ---------- */
.sm-dd {
    position: relative;
    z-index: 6;
}

.sm-dd-btn {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 68px;
    padding: 9px 12px 9px 10px;
    border: 2px solid #e2bd6e;
    border-radius: 18px;
    background:
        radial-gradient(ellipse 80% 70% at 30% 0%, rgba(255, 214, 130, 0.22), transparent 70%),
        linear-gradient(180deg, #a3241d 0, #7a1612 60%, #5c0f0d 100%);
    box-shadow: inset 0 0 0 3px #6e1310, inset 0 0 0 4px rgba(243, 215, 154, 0.55), 0 12px 30px rgba(0, 0, 0, 0.45), 0 0 34px rgba(255, 170, 60, 0.28);
    color: var(--cream);
    text-align: left;
    cursor: pointer;
    transition: transform .15s, box-shadow .2s;
}

.sm-dd-btn:hover {
    transform: translateY(-1px);
    box-shadow: inset 0 0 0 3px #6e1310, inset 0 0 0 4px rgba(243, 215, 154, 0.7), 0 14px 34px rgba(0, 0, 0, 0.5), 0 0 46px rgba(255, 190, 90, 0.45);
}

.sm-dd-btn:focus-visible {
    outline: 3px solid var(--gold-hi);
    outline-offset: 3px;
}

.sm-dd-ic {
    flex: none;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #fff6d0 0, #f0c96e 45%, #c48a3a 90%);
    color: #7a1512;
    font-size: 19px;
    box-shadow: 0 0 0 3px rgba(243, 215, 154, 0.25), 0 0 18px rgba(255, 190, 90, 0.45);
}

.sm-dd-tx {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}

.sm-dd-tx small {
    color: rgba(243, 215, 154, 0.85);
    font-size: 11.5px;
    letter-spacing: .3px;
}

.sm-dd-tx b {
    overflow: hidden;
    color: #fff3dc;
    font-family: var(--f-head);
    font-size: 19px;
    font-weight: 600;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.sm-dd-tx em {
    color: var(--cream-m);
    font-size: 12.5px;
    font-style: normal;
}

.sm-dd-car {
    flex: none;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 1px solid rgba(243, 215, 154, 0.6);
    border-radius: 50%;
    color: var(--gold-hi);
    font-size: 13px;
    transition: transform .2s;
}

.sm-dd.open .sm-dd-car {
    transform: rotate(180deg);
}

/* ยังไม่ได้เลือกสาขา : กรอบเรืองแสงเต้น ชวนแตะ */
.sm-ov:not(.has-major) .sm-dd-btn::after {
    content: '';
    position: absolute;
    inset: -5px;
    border: 2px solid rgba(255, 214, 120, 0.85);
    border-radius: 22px;
    pointer-events: none;
    animation: sm-dd-ring 2s ease-out infinite;
}

.sm-ov:not(.has-major) .sm-dd.open .sm-dd-btn::after {
    display: none;
}

@keyframes sm-dd-ring {
    0%   { opacity: .9; transform: scale(1); }
    100% { opacity: 0; transform: scale(1.05, 1.3); }
}

/* รายชื่อ (จอแคบ) : แผ่นขึ้นจากล่างจอ */
.sm-dd-panel {
    position: fixed;
    z-index: 11;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    max-height: 78vh;
    max-height: 78dvh;
    padding: 10px 12px 12px;
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
    border-top: 2px solid #e2bd6e;
    border-radius: 22px 22px 0 0;
    background: linear-gradient(180deg, #6a110d 0, #4a0a08 100%);
    box-shadow: inset 0 4px 0 #4a0a08, inset 0 5px 0 rgba(243, 215, 154, 0.35), 0 -20px 50px rgba(0, 0, 0, 0.55);
    animation: sm-dd-up .28s cubic-bezier(.2, .9, .3, 1) both;
}

.sm-dd-panel[hidden] {
    display: none;
}

@keyframes sm-dd-up {
    from { transform: translateY(100%); }
    to   { transform: none; }
}

.sm-dd-head {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 4px 10px 6px;
    color: var(--gold-hi);
    font-family: var(--f-head);
    font-size: 18px;
    font-weight: 600;
}

.sm-dd-head button {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 1px solid rgba(243, 215, 154, 0.5);
    border-radius: 50%;
    background: rgba(30, 2, 2, 0.35);
    color: var(--gold-hi);
    font-size: 15px;
    cursor: pointer;
}

.sm-dd-back {
    position: fixed;
    z-index: 10;
    inset: 0;
    background: rgba(15, 0, 0, 0.55);
    animation: sm-pop-bg .2s ease-out both;
}

.sm-dd-back[hidden] {
    display: none;
}

.sm-dd-q {
    flex: none;
    display: flex;
    align-items: center;
    gap: 9px;
    height: 44px;
    padding: 0 15px;
    border: 1.5px solid rgba(243, 215, 154, 0.7);
    border-radius: 999px;
    background: rgba(20, 0, 0, 0.35);
    color: var(--gold-hi);
    transition: box-shadow .15s;
}

.sm-dd-q:focus-within {
    box-shadow: 0 0 0 3px rgba(243, 215, 154, 0.2), 0 0 18px rgba(255, 190, 90, 0.2);
}

.sm-dd-q input {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: none;
    background: transparent;
    color: #fff3dc;
    font-size: 16px;
}

.sm-dd-q input::placeholder {
    color: rgba(251, 233, 200, 0.5);
}

.sm-dd-list {
    flex: 1 1 auto;
    min-height: 0;
    margin-top: 8px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(243, 215, 154, 0.5) transparent;
}

.sm-dd-opt {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 12px;
    color: #fff3dc;
    text-decoration: none;
    outline: none;
}

.sm-dd-opt + .sm-dd-opt {
    margin-top: 2px;
}

.sm-dd-opt b {
    flex: 1;
    min-width: 0;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
}

.sm-dd-opt span {
    flex: none;
    color: rgba(251, 233, 200, 0.6);
    font-size: 12px;
}

.sm-dd-opt i {
    flex: none;
    width: 16px;
    color: var(--gold-hi);
    font-size: 13px;
    visibility: hidden;
}

.sm-dd-opt:hover,
.sm-dd-opt:focus {
    background: linear-gradient(90deg, rgba(243, 215, 154, 0.24), rgba(243, 215, 154, 0.06));
    box-shadow: inset 3px 0 0 var(--gold-hi);
}

.sm-dd-opt.is-cur b {
    color: var(--gold-lt);
}

.sm-dd-opt.is-cur i {
    visibility: visible;
}

.sm-dd-opt[hidden] {
    display: none;
}

.sm-dd-empty {
    margin: 12px 0 6px;
    color: var(--cream-m);
    font-size: 13.5px;
    text-align: center;
}

.sm-dd-empty[hidden] {
    display: none;
}

/* ปุ่มเขย่า : ทองแท้ แสงวิ่งผ่าน + วงแสงกระเพื่อมรอบปุ่ม */
.sm-shake {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    margin-top: 12px;
    padding: 13px 24px;
    border: 0;
    border-radius: 999px;
    background:
        linear-gradient(100deg, transparent 35%, rgba(255, 255, 255, 0.7) 50%, transparent 65%) -150% 0 / 250% 100% no-repeat,
        linear-gradient(180deg, #fff3c4 0, #f2cd78 38%, #d9a24e 72%, #b47c34 100%);
    color: #5a0e0c;
    font-family: var(--f-head);
    font-size: 20px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), inset 0 -2px 0 rgba(122, 60, 20, 0.35), 0 0 0 2px rgba(255, 236, 180, 0.5), 0 12px 28px rgba(20, 0, 0, 0.45), 0 0 34px rgba(255, 190, 90, 0.5);
    animation: sm-sweep 3s ease-in-out infinite;
    transition: transform .15s, opacity .15s;
}

.sm-ov.has-major .sm-shake::after {
    content: '';
    position: absolute;
    inset: -2px;
    border: 2px solid rgba(255, 214, 120, 0.8);
    border-radius: 999px;
    pointer-events: none;
    animation: sm-ring 2s ease-out infinite;
}

@keyframes sm-sweep {
    0%        { background-position: -150% 0, 0 0; }
    60%, 100% { background-position: 250% 0, 0 0; }
}

@keyframes sm-ring {
    0%   { transform: scale(1); opacity: .9; }
    100% { transform: scale(1.08, 1.5); opacity: 0; }
}

.sm-shake:hover {
    transform: translateY(-2px);
}

.sm-hint {
    margin: 10px 0 0;
    color: var(--cream-m);
    font-size: 13px;
    text-align: center;
}

/* ข้อควรทราบ : บรรทัดเล็กล่างจอ (ตอนรอเลือก) */
/* ปิดให้บริการชั่วคราว (ผู้ดูแลตั้งที่ siamsi/manage.php) : ป้ายชื่อ + ข้อความกลางจอ */
.sm-closed-box {
    position: absolute;
    z-index: 4;
    top: 50%;
    left: 50%;
    width: min(460px, calc(100% - 32px));
    text-align: center;
    transform: translate(-50%, -50%);
}

.sm-closed-msg {
    margin: 22px 0 18px;
    padding: 16px 20px;
    border: 2px solid #e2bd6e;
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(122, 22, 18, 0.92), rgba(74, 10, 8, 0.92));
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45);
    color: var(--cream);
    font-size: 15px;
    line-height: 1.6;
}

.sm-closed-msg b {
    display: block;
    margin-bottom: 4px;
    color: var(--gold-hi);
    font-family: var(--f-head);
    font-size: 22px;
}

.sm-closed-go {
    width: auto;
    margin: 0 auto;
    padding: 12px 30px;
    text-decoration: none;
}

/* ผู้ดูแลเปิดดูขณะปิดให้บริการ : แถบเตือนบนสุด */
.sm-admin-note {
    position: fixed;
    z-index: 20;
    top: 0;
    left: 50%;
    padding: 6px 16px;
    border: 1px solid #f0dca8;
    border-top: 0;
    border-radius: 0 0 12px 12px;
    background: #fff8e6;
    color: #8a5a12;
    font-size: 13px;
    white-space: nowrap;
    transform: translateX(-50%);
}

.sm-admin-note a {
    color: inherit;
    font-weight: 600;
}

.sm-foot {
    position: absolute;
    z-index: 3;
    left: 0;
    right: 0;
    bottom: 10px;
    bottom: calc(10px + env(safe-area-inset-bottom));
    width: min(780px, calc(100% - 32px));
    margin: 0 auto;
    color: rgba(251, 233, 200, 0.6);
    font-size: 11.5px;
    line-height: 1.5;
    text-align: center;
}

.sm-foot b {
    color: var(--gold-hi);
    font-weight: 600;
}

/* ============================================================
   แสงวาบ · กระดาษสี · รูปใบเซียมซี + ปุ่ม
   ============================================================ */
.sm-ov-flash {
    position: absolute;
    z-index: 5;
    inset: 0;
    background: radial-gradient(circle at 50% var(--cy), #fffef6 0, #fff0bf 30%, rgba(255, 220, 140, 0.75) 60%, rgba(255, 200, 100, 0.3) 100%);
    opacity: 0;
    pointer-events: none;
}

.sm-ov.is-flash .sm-ov-flash {
    animation: sm-ov-flash 1.1s ease-out both;
}

@keyframes sm-ov-flash {
    0%   { opacity: 0; }
    28%  { opacity: 1; }
    100% { opacity: 0; }
}

.sm-ov-conf {
    position: absolute;
    z-index: 6;
    left: 50%;
    top: 42%;
    width: 0;
    height: 0;
    pointer-events: none;
}

.sm-ov-conf i {
    position: absolute;
    left: 0;
    top: 0;
    width: var(--w);
    height: var(--h);
    border-radius: 2px;
    background: var(--c);
    opacity: 0;
}

.sm-ov.is-burst .sm-ov-conf i {
    animation: sm-ov-conf var(--t) cubic-bezier(.15, .6, .35, 1) var(--d) both;
}

@keyframes sm-ov-conf {
    0%   { transform: translate(0, 0) rotate(0deg) scale(.4); opacity: 1; }
    28%  { transform: translate(var(--x), var(--y)) rotate(calc(var(--r) * 0.3)) scale(1); opacity: 1; }
    100% { transform: translate(calc(var(--x) * 1.15), calc(var(--y) + 92vh)) rotate(var(--r)) scale(1); opacity: 0; }
}

.sm-ov-res {
    position: absolute;
    z-index: 4;
    inset: 0;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 60px 16px calc(12px + var(--fh, 40px));
}

.sm-ov.is-result .sm-ov-res {
    display: flex;
}

.sm-ov-card {
    position: relative;
    flex: none;
    border-radius: 18px;
}

.sm-ov-card img {
    display: block;
    width: auto;
    height: min(calc(100vh - 244px - var(--fh, 40px)), calc((100vw - 32px) * 1.25), 760px);
    height: min(calc(100dvh - 244px - var(--fh, 40px)), calc((100vw - 32px) * 1.25), 760px);
    max-width: calc(100vw - 32px);
    border-radius: 18px;
    box-shadow: 0 0 0 2px rgba(243, 215, 154, 0.85), 0 30px 70px rgba(0, 0, 0, 0.6), 0 0 110px rgba(255, 190, 90, 0.45);
    opacity: 0;
    -webkit-touch-callout: default;
}

/* วงหมุนระหว่างรอรูป */
.sm-ov-card::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 46px;
    height: 46px;
    margin: -23px 0 0 -23px;
    border: 4px solid rgba(243, 215, 154, 0.3);
    border-top-color: var(--gold-hi);
    border-radius: 50%;
    animation: sm-spin .8s linear infinite;
}

.sm-ov-card.ready::before {
    display: none;
}

.sm-ov-card.ready img {
    opacity: 1;
    animation: sm-ov-card .9s cubic-bezier(.2, .9, .25, 1.1) both;
}

@keyframes sm-ov-card {
    0%   { opacity: 0; transform: perspective(1400px) rotateY(-80deg) scale(.5); }
    55%  { opacity: 1; }
    100% { opacity: 1; transform: perspective(1400px) rotateY(0deg) scale(1); }
}

/* แสงวิ่งผ่านรูปหนึ่งครั้งหลังรูปขึ้น */
.sm-ov-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 18px;
    background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, 0.5) 50%, transparent 62%) -160% 0 / 260% 100% no-repeat;
    opacity: 0;
    pointer-events: none;
}

.sm-ov-card.ready::after {
    animation: sm-ov-sheen 1.3s ease-in-out .8s both;
}

@keyframes sm-ov-sheen {
    0%   { opacity: 1; background-position: -160% 0; }
    100% { opacity: 1; background-position: 260% 0; }
}

.sm-ov-acts {
    display: flex;
    gap: 10px;
    width: min(100%, 440px);
}

.sm-ov-b {
    flex: 1 1 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    height: 52px;
    padding: 0 16px;
    border: 0;
    border-radius: 999px;
    font-family: var(--f-head);
    font-size: 19px;
    font-weight: 700;
    cursor: pointer;
    transition: transform .15s, filter .15s;
}

.sm-ov-b:hover {
    transform: translateY(-2px);
    filter: brightness(1.05);
}

.sm-ov-b.b-save {
    background:
        linear-gradient(100deg, transparent 35%, rgba(255, 255, 255, 0.7) 50%, transparent 65%) -150% 0 / 250% 100% no-repeat,
        linear-gradient(180deg, #fff3c4 0, #f2cd78 38%, #d9a24e 72%, #b47c34 100%);
    color: #5a0e0c;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), inset 0 -2px 0 rgba(122, 60, 20, 0.35), 0 0 0 2px rgba(255, 236, 180, 0.45), 0 10px 26px rgba(0, 0, 0, 0.45), 0 0 30px rgba(255, 190, 90, 0.5);
    animation: sm-sweep 3s ease-in-out infinite;
}

.sm-ov-b.b-share {
    background: linear-gradient(180deg, #e04a3c, #a3201a);
    color: #fff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 0 0 2px var(--gold-hi), 0 10px 26px rgba(0, 0, 0, 0.45);
}

.sm-ov-acts2 {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

.sm-ov-l {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 40px;
    padding: 0 16px;
    border: 1px solid rgba(243, 215, 154, 0.55);
    border-radius: 999px;
    background: #3a0605;
    color: var(--gold-hi);
    font-size: 14.5px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

.sm-ov-l:hover {
    background: #57100c;
}

.sm-ov-tip {
    margin: 0;
    color: var(--cream-m);
    font-size: 12.5px;
}

.sm-ov-tip[hidden] {
    display: none;
}

/* ปุ่มขึ้นหลังรูปพลิกเสร็จ  position + z-index : ให้อยู่เหนือเงาของรูป (ไม่งั้นเงารูปทับปุ่มเมื่อไม่มีแอนิเมชัน) */
.sm-ov-acts,
.sm-ov-acts2,
.sm-ov-tip {
    position: relative;
    z-index: 1;
    visibility: hidden;
}

.sm-ov.is-burst .sm-ov-acts,
.sm-ov.is-burst .sm-ov-acts2,
.sm-ov.is-burst .sm-ov-tip {
    visibility: visible;
    animation: sm-ov-up .45s ease-out .45s both;
}

/* ปุ่มกลับหน้าเลือกสาขา (ระหว่างเขย่า / หน้ารูป) */
.sm-ov-x {
    position: absolute;
    z-index: 7;
    top: 12px;
    top: max(12px, env(safe-area-inset-top));
    right: 12px;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 1px solid rgba(243, 215, 154, 0.6);
    border-radius: 50%;
    background: rgba(30, 2, 2, 0.5);
    color: var(--gold-hi);
    font-size: 19px;
    cursor: pointer;
}

.sm-ov-x:hover {
    background: rgba(243, 215, 154, 0.18);
}

.sm-ov.is-idle .sm-ov-x {
    display: none;
}

/* ---------- เมนูแชร์ ---------- */
.sm-shm {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: grid;
    place-items: end center;
    padding: 16px;
    background: rgba(15, 0, 0, 0.55);
    animation: sm-pop-bg .2s ease-out both;
}

.sm-shm[hidden] {
    display: none;
}

.sm-shm.out {
    animation: sm-pop-bg-out .2s ease-in both;
}

@media (min-width: 600px) {
    .sm-shm {
        place-items: center;
    }
}

.sm-shm-box {
    width: min(440px, 100%);
    padding: 22px 20px 16px;
    border: 2px solid #e2bd6e;
    border-radius: 20px;
    background: linear-gradient(180deg, #a3241d, #6e1310);
    box-shadow: inset 0 0 0 4px #6e1310, inset 0 0 0 5px rgba(243, 215, 154, 0.6), 0 20px 50px rgba(0, 0, 0, 0.5);
    text-align: center;
    animation: sm-pop-in .3s cubic-bezier(.2, .9, .3, 1.2) both;
}

.sm-shm-box > b {
    display: block;
    color: var(--gold-hi);
    font-family: var(--f-head);
    font-size: 21px;
    font-weight: 600;
}

.sm-shm-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(68px, 1fr));
    gap: 8px;
    margin: 16px 0 12px;
}

.sm-shm-row > a,
.sm-shm-row > button {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 12px 6px;
    border: 1px solid rgba(243, 215, 154, 0.4);
    border-radius: 14px;
    background: rgba(30, 2, 2, 0.35);
    color: #fff3dc;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

.sm-shm-row > [hidden] {
    display: none;
}

.sm-shm-row > a:hover,
.sm-shm-row > button:hover {
    border-color: var(--gold-hi);
    background: rgba(243, 215, 154, 0.12);
}

.sm-shm-row i {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    color: #fff;
    font-size: 21px;
}

.sh-fb i { background: #1877f2; }
.sh-line i { background: #06c755; }
.sh-copy i,
.sh-more i { background: linear-gradient(180deg, #f2cd78, #b47c34); color: #5a0e0c; }

.sm-shm-box p {
    margin: 0 0 12px;
    color: var(--cream-m);
    font-size: 13px;
    line-height: 1.55;
}

.sm-shm-box p b {
    color: var(--gold-hi);
}

.sm-shm-x {
    padding: 8px 26px;
    border: 1px solid rgba(243, 215, 154, 0.5);
    border-radius: 999px;
    background: transparent;
    color: var(--gold-hi);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

/* ข้อความแจ้งสั้น ๆ ด้านล่างจอ */
.sm-toast {
    position: fixed;
    z-index: 90;
    left: 50%;
    bottom: 24px;
    bottom: calc(24px + env(safe-area-inset-bottom));
    max-width: calc(100vw - 32px);
    padding: 10px 20px;
    border: 1px solid rgba(243, 215, 154, 0.7);
    border-radius: 999px;
    background: rgba(40, 4, 3, 0.94);
    color: #fff3dc;
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
    opacity: 0;
    transform: translate(-50%, 20px);
    transition: opacity .25s, transform .25s;
    pointer-events: none;
}

.sm-toast.on {
    opacity: 1;
    transform: translate(-50%, 0);
}

.sm-toast[hidden] {
    display: none;
}

/* ============================================================
   จอกว้าง (คอม / แท็บเล็ตแนวนอน / มือถือแนวนอน) : กระบอกซ้าย · ป้ายชื่อ + ดรอปดาวน์ขวา
   เงื่อนไขเดียวกับ WIDE ใน siamsi.js
   ============================================================ */
@media (min-width: 860px), (orientation: landscape) and (min-width: 640px) {
    .sm-side {
        position: absolute;
        z-index: 4;
        top: var(--cy);
        left: calc(50% + 10px);
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 22px;
        width: min(420px, calc(50% - 50px));
        transform: translateY(-50%);
        transition: opacity .35s, visibility .35s;
    }
    .sm-ov:not(.is-idle) .sm-side {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }
    .sm-head,
    .sm-ctl {
        position: static;
        width: auto;
        margin: 0;
    }
    .sm-plaque {
        padding: 6px 50px 14px;
        border-width: 3px;
        border-radius: 18px;
        box-shadow:
            inset 0 0 0 4px #7d1612,
            inset 0 0 0 6px rgba(243, 215, 154, 0.8),
            0 18px 40px rgba(20, 0, 0, 0.5),
            0 0 80px rgba(255, 170, 60, 0.3);
    }
    .sm-plaque::before,
    .sm-plaque::after {
        width: 22px;
        height: 22px;
        margin-top: -11px;
        background:
            radial-gradient(circle, #8c1a15 0 4px, transparent 4.5px),
            linear-gradient(135deg, var(--gold-lt), #d6a24e 55%, var(--gold-dk));
    }
    .sm-plaque::before { left: -13px; }
    .sm-plaque::after  { right: -13px; }
    .sm-plaque .t1 {
        padding-top: 16px;
        font-size: 84px;
    }
    .sm-plaque .t2 {
        font-size: 30px;
    }
    .sm-plaque-sub {
        gap: 12px;
        margin-top: 5px;
        font-size: 13px;
        letter-spacing: 3px;
    }
    .sm-plaque-sub::before,
    .sm-plaque-sub::after {
        width: 42px;
    }
    /* รายชื่อห้อยลงใต้ปุ่มดรอปดาวน์ (ที่ว่างไม่พอ = เปิดขึ้น : .up) */
    .sm-dd-panel {
        position: absolute;
        top: calc(100% + 8px);
        bottom: auto;
        max-height: var(--ddmax, 360px);
        padding: 10px;
        border: 2px solid #e2bd6e;
        border-radius: 18px;
        box-shadow: inset 0 0 0 4px #4a0a08, inset 0 0 0 5px rgba(243, 215, 154, 0.4), 0 24px 50px rgba(0, 0, 0, 0.55), 0 0 50px rgba(255, 170, 60, 0.25);
        transform-origin: 50% 0;
        animation: sm-dd-in .18s ease-out both;
    }
    .sm-dd.up .sm-dd-panel {
        top: auto;
        bottom: calc(100% + 8px);
        transform-origin: 50% 100%;
    }
    .sm-dd-head,
    .sm-dd-back {
        display: none !important;
    }
    .sm-dd-q {
        height: 42px;
    }
    .sm-dd-q input {
        font-size: 15px;
    }
}

@keyframes sm-dd-in {
    from { opacity: 0; transform: translateY(-6px) scale(.98); }
    to   { opacity: 1; transform: none; }
}

/* จอกว้างแต่เตี้ย (มือถือแนวนอน) : ไม่มีป้ายชื่อ */
@media (min-width: 860px) and (max-height: 560px), (orientation: landscape) and (min-width: 640px) and (max-height: 560px) {
    .sm-head {
        display: none;
    }
}

/* จอใหญ่ : โคมไฟสี่ดวง */
@media (max-width: 1199px) {
    .sm-lan.l3,
    .sm-lan.l4 {
        display: none;
    }
}

/* ============================================================
   มือถือ
   ============================================================ */
@media (max-width: 600px) {
    .sm-eave {
        height: 14px;
    }
    .sm-eave::after {
        height: 10px;
        background: radial-gradient(circle at 9px 0, #6e1310 0 6.5px, var(--gold) 7px 8.5px, transparent 9px) 0 0 / 18px 10px repeat-x;
    }
    .sm-lan {
        --lw: 28px;
        --lb: 36px;
        top: 16px;
    }
    .sm-lan.l1 {
        left: 8px;
        --h: 92px;
    }
    .sm-lan.l2 {
        right: 8px;
        --h: 76px;
    }
    .sm-lan::after {
        box-shadow: 0 0 18px rgba(255, 140, 60, 0.6);
    }
    .sm-lan i {
        height: 16px;
        background:
            linear-gradient(180deg, var(--gold-lt), #c99a55) 0 0 / 100% 5px no-repeat,
            linear-gradient(180deg, var(--gold-hi), var(--red)) 50% 100% / 4px 12px no-repeat;
    }
    .sm-lan::before {
        height: 6px;
    }
    .sm-head {
        top: 26px;
    }
    .sm-dd-btn {
        min-height: 62px;
    }
    .sm-dd-ic {
        width: 40px;
        height: 40px;
        font-size: 17px;
    }
    .sm-dd-tx b {
        font-size: 17px;
    }
    .sm-shake {
        padding: 12px 20px;
        font-size: 19px;
    }
    .sm-hint {
        font-size: 12.5px;
    }
    /* มือถือ : ตัวเล็กมาก (ผู้ใช้ขอ 2026-10-17 "เล็กๆ ลงอีก") */
    .sm-foot {
        bottom: 6px;
        bottom: calc(6px + env(safe-area-inset-bottom));
        width: calc(100% - 20px);
        font-size: 8.5px;
        line-height: 1.4;
        letter-spacing: -.1px;
        text-wrap: balance;
    }
    .sm-foot br {
        display: none;          /* จอแคบ : ต่อเป็นย่อหน้าเดียว ไม่มีคำค้างบรรทัด */
    }
    /* ปุ่มหน้ารูป : เล็กลง (ผู้ใช้ขอ 2026-10-17) รูปจึงใหญ่ขึ้นได้ */
    .sm-ov-res {
        gap: 8px;
        padding-top: 58px;
    }
    .sm-ov-card img {
        height: min(calc(100vh - 200px - var(--fh, 40px)), calc((100vw - 32px) * 1.25), 760px);
        height: min(calc(100dvh - 200px - var(--fh, 40px)), calc((100vw - 32px) * 1.25), 760px);
    }
    .sm-ov-acts {
        gap: 8px;
        width: min(100%, 320px);
    }
    .sm-ov-b {
        gap: 7px;
        height: 40px;
        font-size: 15px;
    }
    .sm-ov-acts2 {
        gap: 6px;
    }
    .sm-ov-l {
        gap: 5px;
        height: 30px;
        padding: 0 10px;
        font-size: 12px;
    }
    .sm-ov-tip {
        font-size: 11px;
    }
    .sm-ov-x {
        width: 40px;
        height: 40px;
        font-size: 17px;
    }
}

/* แท็บเล็ตแนวตั้ง : ป้ายชื่อขนาดกลาง */
@media (min-width: 601px) and (max-width: 859px) and (orientation: portrait) {
    .sm-plaque {
        padding: 5px 38px 12px;
    }
    .sm-plaque .t1 {
        padding-top: 12px;
        font-size: 64px;
    }
    .sm-plaque .t2 {
        font-size: 24px;
    }
    .sm-plaque-sub {
        font-size: 12.5px;
    }
}

/* จอแคบและเตี้ย : ป้ายชื่อไม่มีบรรทัดปี */
@media (max-height: 640px) and (max-width: 859px) {
    .sm-plaque-sub {
        display: none;
    }
}

/* ผู้ใช้ตั้งลดการเคลื่อนไหว : ปิดเอฟเฟกต์เคลื่อนไหวทั้งหมด ผลออกทันที */
@media (prefers-reduced-motion: reduce) {
    .sm-tw {
        display: none;
    }
    .sm-lan,
    .sm-lan::after,
    .sm-plaque .t1,
    .sm-plaque .t2,
    .sm-body::after,
    .sm-shake,
    .sm-ov-rays,
    .sm-ov-rays.r2,
    .sm-ov-glow,
    .sm-ov.is-idle .sm-ov-cyl,
    .sm-ov.is-idle .sm-head,
    .sm-ov.is-idle .sm-ctl,
    .sm-ov.re .sm-ov-stage,
    .sm-ov-card.ready img,
    .sm-ov-card.ready::after,
    .sm-ov-b.b-save,
    .sm-ov.is-burst .sm-ov-acts,
    .sm-ov.is-burst .sm-ov-acts2,
    .sm-ov.is-burst .sm-ov-tip,
    .sm-dd-panel,
    .sm-dd-back,
    .sm-shm,
    .sm-shm.out,
    .sm-shm-box {
        animation: none;
    }
    .sm-ov.has-major .sm-shake::after,
    .sm-ov:not(.has-major) .sm-dd-btn::after {
        display: none;
    }
    .sm-ov-rays,
    .sm-ov-glow,
    .sm-ov-stage,
    .sm-ov-cylw {
        transition: none;
    }
    /* ไม่มีประกาย / เหรียญ / กระดาษสี / แสงวาบ */
    .sm-logo,
    .sm-logo i,
    .sm-logo::after {
        animation: none;
    }
    .sm-ov-rings,
    .sm-ov-sparks,
    .sm-ov-coins,
    .sm-drop,
    .sm-ov-conf,
    .sm-ov-flash {
        display: none;
    }
    .sm-toast {
        transition: none;
    }
}