/* SUPERVIP2541 ui2 (desktop2) — mobile first กว้าง 440px ; mockup show#supervip2541-mockup-g/edit.7 */
:root {
    --sv-w: 440px;
    --sv-navy: #0A1530;
    --sv-mid: #0F2350;
    --sv-royal: #1E4FD8;
    --sv-gold: #F5C542;
    --sv-gold2: #D99A1E;
    --sv-gold-grad: linear-gradient(180deg, #FFE28A 0%, #F5C542 45%, #D99A1E 100%);
    --sv-glass: rgba(255, 255, 255, .06);
    --sv-line: rgba(245, 197, 66, .55);
    --sv-line-soft: rgba(120, 160, 255, .25);
    --sv-text: #fff;
    --sv-muted: #b9c4e6;
    --sv-r: 16px;
    --sv-bnav-h: 70px;
}

html { background: #050b1c; }
body.sv-ui2 {
    background: #050b1c;
    color: var(--sv-text);
    font-family: 'Kanit', 'Noto Sans Thai', sans-serif;
    line-height: 1.5;
    min-width: 0;
    font-size: 16px;
}
body.sv-ui2 h1, body.sv-ui2 h2, body.sv-ui2 h3, body.sv-ui2 h4, body.sv-ui2 li, body.sv-ui2 td, body.sv-ui2 th,
body.sv-ui2 input, body.sv-ui2 select, body.sv-ui2 textarea, body.sv-ui2 ol, body.sv-ui2 ul { font-family: inherit; }
body.sv-ui2 a { text-decoration: none; }

.sv-app {
    position: relative;
    width: 100%;
    max-width: var(--sv-w);
    min-height: 100vh;
    margin: 0 auto;
    padding-bottom: calc(var(--sv-bnav-h) + env(safe-area-inset-bottom));
    background: var(--sv-navy);
    box-shadow: 0 0 60px rgba(0, 0, 0, .6);
    overflow-x: hidden;
    overflow-x: clip; /* clip ไม่สร้าง scroll container → .sv-header sticky ทำงาน (hidden เป็น fallback เบราว์เซอร์เก่า) */
}

/* ---------- header ---------- */
.sv-header {
    position: sticky;
    top: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    background: linear-gradient(180deg, rgba(10, 21, 48, .96), rgba(10, 21, 48, .78));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
/* เส้นแสงใต้ header: มืดที่ขอบ → สว่างกลาง (น้ำเงิน-ขาว-ทอง) + glow จางๆ */
.sv-header::before {
    content: ''; position: absolute; left: 0; right: 0; bottom: -5px; height: 10px; pointer-events: none;
    background:
        linear-gradient(90deg, rgba(30, 79, 216, 0) 0%, rgba(30, 79, 216, .7) 20%, #9CC2FF 40%, #FFFFFF 50%, #F5C542 62%, rgba(217, 154, 30, .7) 80%, rgba(217, 154, 30, 0) 100%) center / 100% 2px no-repeat,
        radial-gradient(50% 50% at 50% 50%, rgba(140, 180, 255, .45), rgba(30, 79, 216, 0)) center / 100% 100% no-repeat;
}
.sv-logo, .sv-logo a { display: block; line-height: 0; }
.sv-logo img { height: 52px; width: auto; max-width: 180px; object-fit: contain; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .5)); }
.sv-header-contact { display: flex; gap: 10px; }
.sv-hbtn {
    width: 40px; height: 40px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .35);
}
.sv-hbtn-line { background: #06C755; }
.sv-hbtn-line img { width: 24px; height: 24px; }
.sv-hbtn-tg, .sv-hbtn-tg:hover, .sv-hbtn-tg:active, .sv-hbtn-tg:focus { background: #229ED9; color: #fff; font-size: 22px; } /* กัน a:hover ของ base.css เปลี่ยนสีไอคอน */

/* ---------- main ---------- */
.sv-main { padding: 12px 14px 0; }
.sv-hl { margin-bottom: 12px; border-radius: var(--sv-r); overflow: hidden; }
.sv-hl img { width: 100%; height: auto; display: block; }
.sv-bc .breadcrumb { background: none; padding: 0; margin: 0 0 10px; font-size: 13px; }
.sv-bc .breadcrumb-item, .sv-bc .breadcrumb-item a, .sv-bc .breadcrumb-item::before { color: var(--sv-muted); }
.sv-bc .breadcrumb-item.active { color: var(--sv-gold); }

/* หน้าเดิม (ยังไม่ทำธีม) ใน 440px — ไม่ให้ล้นกรอบ */
.sv-main .comm-blc { max-width: 100%; padding-left: 0; padding-right: 0; }
.sv-main img { max-width: 100%; height: auto; }
.sv-main iframe { max-width: 100%; }

/* ---------- ปุ่ม ---------- */
.sv-btn {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    height: 52px; border-radius: 999px;
    font-size: 18px; font-weight: 600; letter-spacing: .2px;
    transition: transform .15s, filter .15s;
}
.sv-btn:active { transform: scale(.97); }
.sv-btn-gold {
    background: var(--sv-gold-grad);
    color: var(--sv-navy) !important;
    box-shadow: 0 6px 18px rgba(217, 154, 30, .35), inset 0 1px 0 rgba(255, 255, 255, .6);
}
.sv-btn-ghost {
    color: #fff !important;
    background: linear-gradient(180deg, rgba(30, 79, 216, .35), rgba(15, 35, 80, .6));
    border: 1px solid var(--sv-line);
}
.sv-btn-line { color: #fff !important; border: 1px solid var(--sv-line-soft); background: rgba(255, 255, 255, .03); }
.sv-btn-sm { height: 42px; font-size: 16px; }
.sv-btn-xs { height: 32px; font-size: 13px; font-weight: 500; }
.sv-btn i { font-size: .8em; }

/* ---------- hero ---------- */
.sv-hero {
    position: relative;
    margin: -12px -14px 0; /* เต็มกว้าง sv-app (หักล้าง padding ของ .sv-main) */
    border-radius: 0;
    overflow: hidden;
    border: none;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
}
.sv-hero-slide {
    position: relative;
    display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
    aspect-ratio: 960 / 500;
    padding: 18px 18px 30px;
    background-size: cover;
    background-position: right center;
    color: #fff !important;
}
.sv-hero-slide::before {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(90deg, rgba(10, 21, 48, .92) 0%, rgba(10, 21, 48, .55) 50%, rgba(10, 21, 48, 0) 75%);
}
.sv-hero-slide > * { position: relative; }
.sv-hero-full { padding: 0; }
.sv-hero-full::before { display: none; }
.sv-hero-full img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sv-pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 3px 12px; border-radius: 999px;
    font-size: 13px; font-weight: 500;
    background: rgba(30, 79, 216, .45);
    border: 1px solid rgba(120, 160, 255, .55);
}
.sv-pill i { color: var(--sv-gold); }
.sv-hero-h { display: block; max-width: 64%; margin-top: 6px; font-size: 27px; font-weight: 700; line-height: 1.1; text-shadow: 0 2px 10px rgba(0, 0, 0, .5); }
.sv-hero-h b {
    font-weight: 700; font-size: 1.3em;
    background: var(--sv-gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .45));
}
.sv-hero-p { margin-top: 4px; font-size: 16px; font-weight: 500; }
.sv-hero-dots {
    position: absolute; left: 0 !important; bottom: 12px !important; top: auto !important; width: 100% !important;
    z-index: 2; display: flex; justify-content: center; gap: 6px;
}
.sv-hero-dots .swiper-pagination-bullet {
    width: 18px; height: 8px; padding: 0; border: 0; margin: 0 !important; border-radius: 4px;
    background: rgba(255, 255, 255, .35); opacity: 1; transition: width .3s;
}
.sv-hero-dots .swiper-pagination-bullet-active { width: 34px; background: var(--sv-gold); }

/* ---------- CTA ---------- */
.sv-cta { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 14px 0; }
/* ปุ่มทองตามตัวอย่าง file#5782: มุมโค้งเล็ก, radial สว่างตรง top center */
.sv-cta .sv-btn, .sv-results .sv-btn, .sv-sheet .sv-btn, .sv-rg-page .sv-btn {
    border-radius: 8px;
    border: 1px solid #F2D58A;
    color: #1A1306 !important;
    background:
        radial-gradient(ellipse 55% 90% at 50% 0%, rgba(255, 251, 225, .95) 0%, rgba(255, 241, 185, .55) 45%, rgba(255, 230, 150, 0) 100%),
        linear-gradient(180deg, #F4CF6C 0%, #ECBE5A 45%, #D59B33 100%);
    box-shadow: 0 4px 12px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .7), inset 0 -2px 4px rgba(140, 90, 10, .35);
}
.sv-cta .sv-btn-ghost, .sv-results .sv-btn-ghost, .sv-sheet .sv-btn-ghost, .sv-rg-page .sv-btn-ghost {
    /* น้ำเงินกรมท่าเข้ม + ขอบทองบาง ให้ดูหรู ; แสงสว่างนุ่มๆ ที่ top center */
    border-color: rgba(245, 197, 66, .6);
    color: #F7DE8E !important;
    background:
        radial-gradient(ellipse 55% 90% at 50% 0%, rgba(120, 160, 240, .42) 0%, rgba(70, 110, 210, .18) 45%, rgba(40, 80, 180, 0) 100%),
        linear-gradient(180deg, #1A3778 0%, #11265A 50%, #0A1636 100%);
    box-shadow: 0 4px 12px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 -2px 4px rgba(0, 0, 0, .4);
    text-shadow: 0 1px 2px rgba(0, 0, 0, .5);
}

/* ---------- หมวดเกม ---------- */
.sv-cats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; } /* minmax(0) กันการ์ด aspect-ratio ดันคอลัมน์ล้นจอแคบ */
/* การ์ดตามตัวอย่าง file#5810: แนวนอน ~1.25:1, ไอคอนครึ่งการ์ด, พื้นน้ำเงินไล่เฉดสว่าง→มืด, ขอบทองมีแสง ; ทุกการ์ดเหมือนกัน */
.sv-cat {
    position: relative;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
    aspect-ratio: 178 / 143;
    min-width: 0;
    padding: 4px 2px 5px;
    border-radius: 8px;
    border: 1px solid #D9A94A;
    background:
        linear-gradient(115deg, rgba(120, 170, 255, 0) 35%, rgba(120, 170, 255, .06) 52%, rgba(120, 170, 255, 0) 68%),
        radial-gradient(95% 80% at 45% 32%, #0A3C8E 0%, #072D6E 32%, #041D4A 62%, #020F2A 100%);
    box-shadow: 0 0 6px rgba(245, 197, 66, .35), 0 4px 10px rgba(0, 0, 0, .45), inset 0 0 8px rgba(245, 197, 66, .22);
    color: #fff !important;
}
.sv-cat::before { /* แสงวิ่งบนขอบ: บนกลาง, ขวา, ล่างซ้าย */
    content: ''; position: absolute; inset: -2px; border-radius: 10px; pointer-events: none;
    background:
        radial-gradient(30% 3px at 50% 1.5px, rgba(255, 246, 210, 1), rgba(255, 215, 120, 0) 100%),
        radial-gradient(3px 28% at calc(100% - 1.5px) 62%, rgba(255, 240, 190, 1), rgba(255, 215, 120, 0) 100%),
        radial-gradient(22% 3px at 18% calc(100% - 1.5px), rgba(255, 228, 160, .8), rgba(255, 215, 120, 0) 100%);
}
.sv-cat img { width: 54%; height: auto; aspect-ratio: 1; object-fit: contain; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .5)); }
.sv-cat span { font-size: 16px; font-weight: 600; line-height: 1.15; text-shadow: 0 1px 3px rgba(0, 0, 0, .6); }

/* ---------- หัวข้อ section ---------- */
.sv-sec { margin-top: 22px; }
.sv-sh { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.sv-sh h2 {
    position: relative; padding-left: 14px; margin: 0;
    font-size: 21px; font-weight: 600; color: #fff; line-height: 1.3;
}
.sv-sh h2::before { content: ''; position: absolute; left: 0; top: 15%; bottom: 15%; width: 5px; border-radius: 4px; background: var(--sv-gold-grad); }
.sv-sh a { color: var(--sv-gold) !important; font-size: 14px; font-weight: 500; white-space: nowrap; }
.sv-sh a i { font-size: 11px; margin-left: 2px; }

/* ---------- ผลหวย ---------- */
.sv-results { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sv-res-main, .sv-res-card { /* ตามตัวอย่าง file#5812: navy เข้ม + แสงน้ำเงินมุมขวาบน, ขอบทองมีแสง */
    position: relative;
    border-radius: 14px;
    border: 1px solid #D9A94A;
    padding: 10px;
    display: flex; flex-direction: column; gap: 8px;
    background:
        radial-gradient(75% 55% at 100% 0%, rgba(18, 110, 240, .55), rgba(18, 110, 240, 0) 100%),
        radial-gradient(60% 45% at 0% 100%, rgba(10, 60, 150, .30), rgba(10, 60, 150, 0) 100%),
        linear-gradient(180deg, #06204A 0%, #041633 60%, #03112A 100%);
    box-shadow: 0 0 8px rgba(245, 197, 66, .28), 0 6px 16px rgba(0, 0, 0, .45), inset 0 0 10px rgba(245, 197, 66, .12);
}
.sv-res-main::before, .sv-res-card::before { /* แสงวิ่งบนขอบ: บนซ้าย, มุมขวาบน */
    content: ''; position: absolute; inset: -2px; border-radius: 16px; pointer-events: none;
    background:
        radial-gradient(22% 3px at 14% 1.5px, rgba(255, 244, 205, .95), rgba(255, 215, 120, 0) 100%),
        radial-gradient(3px 18% at calc(100% - 1.5px) 10%, rgba(255, 244, 205, .9), rgba(255, 215, 120, 0) 100%);
}
.sv-res-side { display: flex; flex-direction: column; gap: 8px; }
.sv-res-card { flex: 1; padding: 8px; gap: 6px; }
.sv-res-head { display: flex; align-items: center; gap: 8px; }
.sv-res-head h3 { margin: 0; font-size: 15px; font-weight: 600; color: #fff; line-height: 1.25; text-shadow: 0 1px 3px rgba(0, 0, 0, .5); }
.sv-res-head p { margin: 0; font-size: 12px; color: #D3DBF0; line-height: 1.3; }
.sv-res-main .sv-res-head h3 { font-size: 16px; }
.sv-flag { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; border: 2px solid #fff; flex: none; background: #fff; }
.sv-res-card .sv-flag { width: 28px; height: 28px; }
.sv-res-side .sv-flag { border: 1px solid #b79e52; }
.sv-flag-logo { border: 0; border-radius: 0; background: none; object-fit: contain; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .45)); } /* โลโก้กองสลาก (รูปดาวโปร่งใส) */
.sv-prize1, .sv-box {
    text-align: center; border-radius: 10px;
    background:
        radial-gradient(80% 70% at 100% 0%, rgba(30, 100, 220, .22), rgba(30, 100, 220, 0) 100%),
        linear-gradient(180deg, rgba(18, 36, 72, .75), rgba(4, 12, 30, .85));
    border: 1px solid rgba(232, 196, 110, .45);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 2px 6px rgba(0, 0, 0, .3);
}
.sv-prize1 { padding: 6px 4px; }
.sv-prize1 span, .sv-box span { display: block; font-size: 13px; color: #fff; line-height: 1.4; }
.sv-prize1 span { font-size: 15px; font-weight: 600; }
.sv-prize1 strong { display: block; font-size: 30px; font-weight: 700; letter-spacing: 2px; line-height: 1.15; }
.sv-box { padding: 4px 2px; }
.sv-box strong { display: block; font-size: 22px; font-weight: 700; line-height: 1.2; }
.sv-prize1 strong, .sv-box strong { background: var(--sv-gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sv-res-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.sv-res-main { gap: 10px; }
.sv-res-main .sv-prize1 { padding: 12px 4px; }
.sv-res-main .sv-box { padding: 10px 2px; }
.sv-res-main .sv-prize1 { margin-top: auto; } /* auto บน prize1 + auto บนปุ่ม = prize1+grid อยู่กลางแนวตั้งระหว่างหัวการ์ดกับปุ่ม */
.sv-res-main .sv-btn { margin-top: auto; }

/* ---------- โปรโมชั่น ---------- */
.sv-promos { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; } /* เรียงลงมาทีละการ์ด */
/* การ์ดโปรโมชั่น: รูป + ชื่อ + คำอธิบาย (โทนเดียวกับการ์ดผลหวย) */
.sv-promo {
    min-width: 0;
    display: flex; flex-direction: column;
    border-radius: 14px; overflow: hidden;
    border: 1px solid #d9a94a4a;
    background: linear-gradient(180deg, #0F2A64 0%, #081A42 100%);
    box-shadow: 0 6px 16px rgba(0, 0, 0, .35), 0 0 10px rgba(245, 197, 66, .12);
    color: #fff !important;
}
.sv-promo img { display: block; width: 100%; height: auto; aspect-ratio: 1200 / 556; object-fit: cover; border-bottom: 1px solid rgba(245, 197, 66, .35); }
.sv-promo-body { padding: 10px 12px 12px; }
.sv-promo h3 {
    margin: 0 0 4px; font-size: 15px; font-weight: 600; line-height: 1.4; color: var(--sv-gold);
    display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
}
.sv-promo p {
    margin: 0; font-size: 13px; font-weight: 300; line-height: 1.5; color: var(--sv-muted);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* ---------- กิจกรรมพิเศษ (แบบ .wrap.perk ของ superlsm99) ---------- */
.sv-pk-list { display: grid; gap: 10px; }
.sv-pk-card {
    position: relative; display: flex; align-items: center; gap: 12px; min-width: 0;
    padding: 12px 34px 12px 14px; overflow: hidden;
    border-radius: 14px; border: 1px solid #d9a94a4a;
    background:
        radial-gradient(70% 90% at 100% 0%, rgba(245, 197, 66, .08), rgba(245, 197, 66, 0) 70%),
        linear-gradient(180deg, #08122B 0%, #040A1B 100%); /* น้ำเงินเกือบดำ เข้มกว่าพื้นหน้า + แสงทองจางมุมขวาบน */
    box-shadow: 0 6px 16px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 226, 138, .08);
    color: #fff !important;
}
.sv-pk-card::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--sv-gold-grad); }
.sv-pk-ic {
    flex: 0 0 72px; height: 72px; display: flex; align-items: center; justify-content: center; border-radius: 14px;
    background: radial-gradient(circle at 50% 30%, #0A3C8E 0%, #072D6E 45%, #041D4A 100%);
    border: 1px solid rgba(245, 197, 66, .45);
    box-shadow: inset 0 0 12px rgba(245, 197, 66, .15);
}
.sv-pk-ic img { width: 58px; height: 58px; object-fit: contain; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .45)); }
.sv-pk-tx { display: flex; flex-direction: column; min-width: 0; }
.sv-pk-en { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; line-height: 1.2; color: var(--sv-gold); }
.sv-pk-th { font-size: 17px; font-weight: 600; line-height: 1.3; color: #fff; }
.sv-pk-desc { margin-top: 2px; font-size: 13px; font-weight: 300; line-height: 1.4; color: var(--sv-muted); }
.sv-pk-go { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-size: 14px; color: var(--sv-gold); }

/* ---------- บทความ / ข่าว ---------- */
.sv-posts {
    display: grid; grid-auto-flow: column; grid-auto-columns: 62%; gap: 10px;
    overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin: 0 -14px; padding: 0 14px 4px;
}
.sv-posts::-webkit-scrollbar { display: none; }
.sv-post {
    scroll-snap-align: start;
    border-radius: 14px; overflow: hidden;
    background: var(--sv-glass); border: 1px solid var(--sv-line-soft);
    color: #fff !important;
}
.sv-post-img { display: block; aspect-ratio: 16 / 9; background: #0F2350 center / cover no-repeat; }
.sv-post h3 {
    margin: 0; padding: 8px 10px 10px; font-size: 14px; font-weight: 500; line-height: 1.4; color: #fff;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* ---------- เกี่ยวกับ (SEO) ---------- */
.sv-about { /* โทนเดียวกับ box trust / กล่องสมัครท้ายหน้าโปร */
    margin-top: 22px; border-radius: 14px; border: 1px solid #d9a94a4a;
    background:
        radial-gradient(60% 120% at 50% 0%, rgba(245, 197, 66, .06), rgba(245, 197, 66, 0) 70%),
        linear-gradient(180deg, #08122B 0%, #040A1B 100%);
    box-shadow: 0 6px 16px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 226, 138, .08);
}
.sv-about summary {
    list-style: none; cursor: pointer;
    display: flex; justify-content: space-between; align-items: center;
    padding: 13px 14px; font-size: 15px; font-weight: 500; color: var(--sv-gold);
}
.sv-about summary i { font-size: 12px; transition: transform .2s; }
.sv-about summary::-webkit-details-marker { display: none; }
.sv-about[open] summary i { transform: rotate(180deg); }
.sv-about-body { padding: 0 14px 14px; font-size: 14px; color: var(--sv-muted); line-height: 1.7; }
.sv-about-body h1, .sv-about-body h2, .sv-about-body h3 { color: #fff; font-size: 17px; font-weight: 600; margin: 12px 0 6px; line-height: 1.4; }
.sv-about-body h1 { font-size: 19px; }
.sv-about-body p { margin: 0 0 8px; color: var(--sv-muted); }
.sv-about-body a { color: var(--sv-gold); }
.sv-about-body img { max-width: 100%; height: auto; border-radius: 10px; }

/* ---------- footer ---------- */
.sv-footer { /* แบบ superlsm99: แถบเต็มกว้าง 18+ + copyright ; สีธีม supervip */
    margin-top: 24px; padding: 14px 12px;
    text-align: center;
    background: linear-gradient(180deg, #0F2350, #0B1A3C);
    border-top: 1px solid rgba(245, 197, 66, .35);
    font-size: 13px; color: var(--sv-muted);
}
.sv-ft-age { display: flex; align-items: center; justify-content: center; gap: 8px; }
.sv-ft-18 {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: 30px; height: 30px; border: 2px solid var(--sv-gold); border-radius: 50%;
    font-size: 11px; font-weight: 600; color: var(--sv-gold);
}
.sv-copy { margin-top: 6px; font-size: 12px; color: rgba(185, 196, 230, .75); }

/* ---------- เมนูล่าง ---------- */
.sv-bnav { /* แบบ .u2-bn ของ 77up.lol: แถบเต็มกว้างชิดล่าง 5 ช่อง ; สีธีม supervip ; ไม่มี active */
    position: fixed; z-index: 60;
    left: 50%; bottom: 0; transform: translateX(-50%);
    width: 100%; max-width: var(--sv-w);
    height: calc(var(--sv-bnav-h) + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
    display: grid; grid-template-columns: repeat(5, 1fr);
    background: linear-gradient(180deg, #11265A 0%, #081536 100%);
    box-shadow: 0 -6px 18px rgba(0, 0, 0, .45);
}
/* เส้นแสงขอบบน bnav: แบบเดียวกับ .sv-header::before */
.sv-bnav::before {
    content: ''; position: absolute; left: 0; right: 0; top: -5px; height: 10px; z-index: 1; pointer-events: none;
    background:
        linear-gradient(90deg, rgba(30, 79, 216, 0) 0%, rgba(30, 79, 216, .7) 20%, #9CC2FF 40%, #FFFFFF 50%, #F5C542 62%, rgba(217, 154, 30, .7) 80%, rgba(217, 154, 30, 0) 100%) center / 100% 2px no-repeat,
        radial-gradient(50% 50% at 50% 50%, rgba(140, 180, 255, .45), rgba(30, 79, 216, 0)) center / 100% 100% no-repeat;
}
.sv-bnav-item {
    position: relative; margin: 0; cursor: pointer;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    color: #E6EBF7 !important; font-size: 12.5px; font-weight: 400; line-height: 1.2; white-space: nowrap; text-decoration: none;
}
.sv-bnav-item i { font-size: 21px; height: 22px; }
/* สมัครสมาชิก: ทอง + แสงจากด้านบน */
.sv-bnav-on {
    color: var(--sv-gold) !important;
    background: radial-gradient(80% 90% at 50% 0%, rgba(245, 197, 66, .30), rgba(245, 197, 66, 0) 70%);
}

/* ---------- ติดต่อเรา (sheet) ---------- */
.sv-contact-toggle { position: fixed; top: 0; left: 0; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; } /* fixed: กดติดต่อเราแล้ว focus checkbox ไม่ทำให้หน้าเลื่อน */
.sv-contact-backdrop {
    position: fixed; inset: 0; z-index: 10000; margin: 0; /* เหนือปุ่ม LIVECHAT (.chat-btn z 9999) */
    background: rgba(0, 0, 0, .55);
    opacity: 0; visibility: hidden; transition: .2s;
}
.sv-contact-sheet {
    position: fixed; z-index: 10001;
    left: 50%; bottom: 0;
    width: 100%; max-width: var(--sv-w);
    transform: translate(-50%, 105%);
    transition: transform .25s ease;
    padding: 16px 16px calc(20px + env(safe-area-inset-bottom));
    border-radius: 22px 22px 0 0;
    background: linear-gradient(180deg, #13295c, var(--sv-navy));
    border-top: 1px solid var(--sv-line);
    display: flex; flex-direction: column; gap: 10px;
}
.sv-contact-toggle:checked ~ .sv-contact-backdrop { opacity: 1; visibility: visible; }
.sv-contact-toggle:checked ~ .sv-contact-sheet { transform: translate(-50%, 0); }
.sv-contact-close {
    position: absolute; top: 12px; right: 12px; margin: 0; cursor: pointer;
    width: 32px; height: 32px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 16px;
    background: rgba(255, 255, 255, .08); border: 1px solid rgba(245, 197, 66, .45);
}
.sv-contact-title { font-size: 18px; font-weight: 600; color: #fff; text-align: center; }
.sv-contact-title span { display: block; font-size: 13px; font-weight: 400; color: var(--sv-muted); }
.sv-contact-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sv-contact-btn {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    height: 50px; border-radius: 14px; font-size: 16px; font-weight: 500; color: #fff !important;
}
.sv-contact-btn img { width: 24px; height: 24px; }
.sv-contact-btn i { font-size: 20px; }
.sv-contact-btn.is-line { background: #06C755; }
.sv-contact-btn.is-tg { background: #229ED9; }

@media (max-width: 360px) {
    .sv-hero-h { font-size: 25px; }
    .sv-cta .sv-btn { font-size: 16px; height: 48px; }
    .sv-cat span { font-size: 15px; }
    .sv-prize1 strong { font-size: 25px; }
}

/* ---------- sheet เข้าสู่ระบบ / สมัครสมาชิก (UX แบบ superlsm99, ธีม supervip) ---------- */
body.is-locked { overflow: hidden; }
.sv-sheet .ic, .sv-rg-page .ic, .sv-rv-form .ic { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sv-sheet { position: fixed; inset: 0; z-index: 10002; visibility: hidden; } /* เหนือ LIVECHAT (.chat-btn 9999) */
.sv-sheet.is-open { visibility: visible; }
.sv-sheet-bg { position: absolute; inset: 0; background: rgba(2, 8, 24, .65); opacity: 0; transition: opacity .2s; }
.sv-sheet.is-open .sv-sheet-bg { opacity: 1; }
.sv-sheet-box {
    position: absolute; bottom: 0; left: 50%;
    width: 100%; max-width: var(--sv-w); max-height: 92vh; overflow-y: auto; overscroll-behavior: contain;
    padding: 0 0 calc(18px + env(safe-area-inset-bottom));
    background: linear-gradient(180deg, #0F2350 0%, #0A1630 100%);
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -10px 40px rgba(0, 0, 0, .55);
    transform: translate(-50%, 100%);
    transition: transform .36s cubic-bezier(.22, 1, .36, 1);
}
.sv-sheet.is-open .sv-sheet-box { transform: translate(-50%, 0); }
.sv-sheet-box.is-dragging { transition: none; }

/* หัว: หรูแบบเรียบ — น้ำเงินเข้ม + แสงทองนวลด้านบน, ตัวอักษรกลาง, เส้นทองบาง */
.sv-lg-hd {
    position: relative; overflow: hidden;
    padding: 10px 20px 34px; color: #fff; text-align: center;
    background:
        radial-gradient(90% 120% at 50% -30%, rgba(245, 197, 66, .2), rgba(245, 197, 66, 0) 60%),
        linear-gradient(180deg, #132A5E 0%, #0C1B42 100%);
    border-radius: 20px 20px 0 0;
    touch-action: none;
}
/* เส้นทองบางขอบบน จางที่ขอบ */
.sv-lg-hd::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, rgba(245, 197, 66, 0), rgba(255, 226, 138, .85) 50%, rgba(245, 197, 66, 0));
}
.sv-lg-hd > * { position: relative; z-index: 1; }
.sv-lg-grip { display: block; width: 40px; height: 4px; margin: 0 auto 16px; border-radius: 4px; background: rgba(245, 197, 66, .35); }
.sv-lg-x {
    position: absolute; top: 14px; right: 14px; z-index: 2;
    display: flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; padding: 0; border-radius: 50%;
    background: rgba(255, 255, 255, .04); border: 1px solid rgba(245, 197, 66, .4); color: var(--sv-gold);
}
.sv-lg-x .ic { width: 16px; height: 16px; }
/* SUPERVIP2541 ตัวเล็กเว้นห่าง + เส้นทองสองข้าง */
.sv-lg-eyebrow {
    display: flex; align-items: center; justify-content: center;
    margin: 0; font-size: 11px; font-weight: 500; letter-spacing: .32em; color: rgba(255, 255, 255, .7);
}
.sv-lg-eyebrow::before, .sv-lg-eyebrow::after { content: ''; width: 34px; height: 1px; }
.sv-lg-eyebrow::before { margin-right: 12px; background: linear-gradient(90deg, rgba(245, 197, 66, 0), rgba(245, 197, 66, .8)); }
.sv-lg-eyebrow::after { margin-left: 8px; background: linear-gradient(270deg, rgba(245, 197, 66, 0), rgba(245, 197, 66, .8)); } /* 8px + letter-spacing ท้ายคำ ≈ 12px */
.sv-lg-eyebrow b { color: var(--sv-gold); font-weight: 500; }
.sv-lg-ttl {
    margin: 8px 0 0; font-size: 28px; font-weight: 500; line-height: 1.2; letter-spacing: .01em;
    background: linear-gradient(180deg, #FFF4CC 0%, #F5C542 55%, #D99A1E 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.sv-lg-sub { margin: 4px 0 0; font-size: 13px; font-weight: 300; color: var(--sv-muted); }

/* ฟอร์ม */
.sv-lg-form {
    position: relative; z-index: 1;
    display: grid; gap: 12px;
    margin: -16px 0 0; padding: 22px 16px 0;
    background: linear-gradient(180deg, #0F2350 0%, #0A1630 100%);
    border-radius: 18px 18px 0 0;
}
.sv-fl {
    position: relative; display: flex; align-items: center; height: 58px;
    border: 1.5px solid rgba(245, 197, 66, .25); border-radius: 14px;
    background: rgba(255, 255, 255, .05);
    transition: border-color .15s, box-shadow .15s, background .15s;
}
.sv-fl > .ic { position: absolute; left: 14px; color: var(--sv-muted); transition: color .15s; }
.sv-fl input {
    width: 100%; height: 100%; margin: 0;
    padding: 20px 14px 4px 46px;
    border: 0; outline: 0; border-radius: 14px; background: none; box-shadow: none;
    font: inherit; font-size: 16px; color: #fff;
}
.sv-fl.has-eye input { padding-right: 52px; }
.sv-fl input:-webkit-autofill { -webkit-box-shadow: 0 0 0 40px #13295c inset; -webkit-text-fill-color: #fff; }
.sv-fl label {
    position: absolute; left: 46px; top: 50%; margin: 0;
    transform: translateY(-50%);
    font-size: 16px; font-weight: 400; color: var(--sv-muted);
    pointer-events: none;
    transition: top .15s, font-size .15s, color .15s;
}
.sv-fl input:focus + label,
.sv-fl input:not(:placeholder-shown) + label,
.sv-fl input:-webkit-autofill + label { top: 15px; font-size: 12px; font-weight: 500; color: var(--sv-gold); }
.sv-fl:focus-within { border-color: var(--sv-gold); background: rgba(255, 255, 255, .08); box-shadow: 0 0 0 4px rgba(245, 197, 66, .14); }
.sv-fl:focus-within > .ic { color: var(--sv-gold); }
.sv-fl.is-invalid { border-color: #ff5a5f; box-shadow: 0 0 0 4px rgba(255, 90, 95, .16); }
.sv-fl-eye {
    position: absolute; right: 6px;
    display: flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; padding: 0; border: 0; border-radius: 10px; background: none;
    color: var(--sv-muted);
}
.sv-fl-eye .ic-hide, .sv-fl-eye[aria-pressed="true"] .ic-show { display: none; }
.sv-fl-eye[aria-pressed="true"] .ic-hide { display: block; }
.sv-fl-ok { position: absolute; right: 16px; color: #3ddc84; opacity: 0; transform: scale(.6); transition: opacity .15s, transform .15s; }
.sv-fl.is-match .sv-fl-ok { opacity: 1; transform: none; }
/* ช่องกรอกพื้นขาวเฉพาะฟอร์มเข้าสู่ระบบ / สมัครสมาชิก (.sv-lg-form) — ตัวอักษร/ไอคอน/label สีเข้มให้อ่านออกบนพื้นขาว ; ฟอร์มรีวิว (.sv-rv-form) ยังเป็นแบบเดิม */
.sv-lg-form .sv-fl { background: #fff; border-color: #d6dbe6; }
.sv-lg-form .sv-fl:focus-within { background: #fff; border-color: var(--sv-gold); box-shadow: 0 0 0 4px rgba(245, 197, 66, .28); }
.sv-lg-form .sv-fl.is-invalid { border-color: #e5484d; }
.sv-lg-form .sv-fl > .ic, .sv-lg-form .sv-fl-eye { color: #7a8499; }
.sv-lg-form .sv-fl:focus-within > .ic { color: #a8730a; }
.sv-lg-form .sv-fl input { color: #0A1630; caret-color: #0A1630; }
.sv-lg-form .sv-fl input:-webkit-autofill { -webkit-box-shadow: 0 0 0 40px #fff inset; -webkit-text-fill-color: #0A1630; }
.sv-lg-form .sv-fl label { color: #6b7488; }
.sv-lg-form .sv-fl input:focus + label,
.sv-lg-form .sv-fl input:not(:placeholder-shown) + label,
.sv-lg-form .sv-fl input:-webkit-autofill + label { color: #a8730a; }
.sv-lg-form .sv-fl-ok { color: #16a34a; }
.sv-lg-err {
    display: none; align-items: flex-start; gap: 8px;
    padding: 10px 12px; border-radius: 12px;
    background: rgba(255, 90, 95, .12); border: 1px solid rgba(255, 90, 95, .35); color: #ffb1b4;
    font-size: 14px; line-height: 1.45;
}
.sv-lg-err.is-show { display: flex; }
.sv-lg-err .ic { width: 20px; height: 20px; }
.sv-sheet .sv-btn, .sv-rg-page .sv-btn { width: 100%; }
.sv-sheet .sv-lg-submit, .sv-rg-page .sv-lg-submit, .sv-rv-form .sv-lg-submit { height: 54px; margin-top: 2px; border-radius: 12px; font-size: 18px; }
.sv-sheet .sv-lg-alt, .sv-rg-page .sv-lg-alt { height: 50px; border-radius: 12px; font-size: 17px; font-weight: 500; }
.sv-sheet .sv-lg-alt .ic, .sv-rg-page .sv-lg-alt .ic { width: 20px; height: 20px; }
.sv-lg-spin {
    display: none; width: 20px; height: 20px;
    border: 2.5px solid rgba(26, 19, 6, .3); border-top-color: #1A1306; border-radius: 50%;
    animation: sv-spin .7s linear infinite;
}
.sv-lg-form.is-loading .sv-lg-spin { display: inline-block; }
.sv-lg-form.is-loading .sv-lg-submit { pointer-events: none; filter: saturate(.8); }
.sv-lg-form.is-shake { animation: sv-shake .4s; }
.sv-lg-link {
    justify-self: center; display: inline-flex; align-items: center; gap: 2px;
    padding: 4px 8px; border: 0; background: none;
    font: inherit; font-size: 14px; color: var(--sv-muted);
}
.sv-lg-link b { font-weight: 500; color: var(--sv-gold); }
.sv-lg-link .ic { width: 18px; height: 18px; }
.sv-lg-or { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--sv-muted); }
.sv-lg-or::before, .sv-lg-or::after { content: ''; flex: 1; height: 1px; background: rgba(245, 197, 66, .25); }

/* สมัคร: ขั้นตอน + ยืนยันอายุ + ธนาคาร */
.sv-rg-steps { display: flex; gap: 10px; margin: 14px 0 0; padding: 0; list-style: none; }
.sv-rg-steps li { position: relative; flex: 1; list-style-position: inside; padding-top: 8px; font-size: 12px; font-weight: 300; color: rgba(255, 255, 255, .55); }
.sv-rg-steps li::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; border-radius: 2px; background: rgba(255, 255, 255, .16); transition: background .2s; }
.sv-rg-steps li.is-on { color: var(--sv-gold); font-weight: 400; }
.sv-rg-steps li.is-on::before { background: linear-gradient(90deg, #D99A1E, #FFE28A 50%, #D99A1E); box-shadow: 0 0 6px rgba(245, 197, 66, .45); }
#sv-register .sv-rg-panel { display: none; gap: 12px; }
#sv-register[data-step="1"] [data-panel="1"],
#sv-register[data-step="age"] [data-panel="age"],
#sv-register[data-step="2"] [data-panel="2"] { display: grid; }
#sv-register [data-show] { display: none; }
#sv-register[data-step="1"] [data-show~="1"],
#sv-register[data-step="2"] [data-show~="2"] { display: flex; }
.sv-rg-age { justify-items: center; text-align: center; padding: 4px 0; }
.sv-rg-age-badge {
    display: flex; align-items: center; justify-content: center;
    width: 64px; height: 64px; border-radius: 50%;
    border: 3px solid var(--sv-gold); box-shadow: 0 0 14px rgba(245, 197, 66, .35);
    font-size: 20px; font-weight: 700; font-style: italic; color: var(--sv-gold);
}
.sv-rg-age-ttl { margin: 0; font-size: 18px; font-weight: 600; color: #fff; }
.sv-rg-age-txt { margin: -6px 0 0; font-size: 14px; color: var(--sv-muted); }
.sv-rg-label { margin: 0; font-size: 14px; font-weight: 500; color: #fff; }
.sv-rg-banks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; max-height: 200px; overflow-y: auto; padding: 2px; }
.sv-rg-bank {
    position: relative; margin: 0;
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    padding: 8px 2px;
    border: 1.5px solid rgba(255, 255, 255, .12); border-radius: 12px; background: rgba(255, 255, 255, .04);
    text-align: center; cursor: pointer;
    transition: border-color .15s, background .15s, box-shadow .15s;
}
.sv-rg-bank input { position: absolute; opacity: 0; pointer-events: none; }
.sv-rg-bank-logo { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; }
.sv-rg-bank-logo img { width: 24px; height: 24px; object-fit: contain; }
.sv-rg-bank-name { font-size: 11px; line-height: 1.25; color: #E6EBF7; overflow-wrap: anywhere; }
.sv-rg-bank:focus-within { border-color: rgba(245, 197, 66, .6); }
.sv-rg-bank.is-on { border-color: var(--sv-gold); background: rgba(245, 197, 66, .1); box-shadow: 0 0 0 3px rgba(245, 197, 66, .15); }
.sv-rg-banks.is-invalid { border-radius: 12px; box-shadow: 0 0 0 2px rgba(255, 90, 95, .6); }
@keyframes sv-spin { to { transform: rotate(360deg); } }
@keyframes sv-shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
@media (prefers-reduced-motion: reduce) {
    .sv-sheet-box, .sv-sheet-bg { transition: none; }
    .sv-lg-form.is-shake { animation: none; }
}

/* ---------- sheet โปรโมชั่น (แบบ superlsm99 .sheet-pro, ธีม supervip) ---------- */
.sv-sheet-promo .sv-sheet-box {
    padding: 0 16px;
    background: linear-gradient(180deg, #0C1A3D 0%, #060E24 100%);
    border-top: 1px solid #d9a94a4a;
}
.sv-pm-hd {
    position: sticky; top: 0; z-index: 2; height: 34px; margin: 0 -16px;
    background: #0C1A3D; touch-action: none;
}
.sv-pm-hd::before { /* เส้นทองบางขอบบน แบบหัว sheet เข้าสู่ระบบ */
    content: ''; position: absolute; top: -1px; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, rgba(245, 197, 66, 0), rgba(255, 226, 138, .85) 50%, rgba(245, 197, 66, 0));
}
.sv-pm-grip { position: absolute; left: 50%; top: 10px; width: 40px; height: 4px; margin-left: -20px; border-radius: 4px; background: rgba(245, 197, 66, .35); }
.sv-pm-x {
    position: absolute; right: 10px; top: 8px; width: 32px; height: 32px; padding: 0;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid rgba(245, 197, 66, .4); border-radius: 50%;
    background: rgba(255, 255, 255, .04); color: var(--sv-gold); cursor: pointer;
}
.sv-pm-x .ic { width: 16px; height: 16px; }
.sv-pm-img {
    display: block; width: 100%; height: auto; aspect-ratio: 1200 / 556; object-fit: cover;
    margin-top: 10px; border-radius: 12px; border: 1px solid #d9a94a4a;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .45);
}
.sv-pm-ttl { white-space: normal; overflow: visible; text-overflow: clip; margin: 14px 0 10px; font-size: 19px; font-weight: 500; line-height: 1.35; color: var(--sv-gold); }
.sv-pm-detail { padding-top: 10px; border-top: 1px solid rgba(245, 197, 66, .2); font-size: 14px; font-weight: 300; line-height: 1.7; color: var(--sv-muted); overflow-wrap: anywhere; }
/* เนื้อหาจาก editor หลังบ้านมี font/สีแบบ inline → บังคับให้เข้าธีม */
.sv-pm-detail * { font-family: inherit !important; color: inherit !important; background: transparent !important; max-width: 100%; }
.sv-pm-detail h1, .sv-pm-detail h2, .sv-pm-detail h3, .sv-pm-detail h4 { margin: 0 0 6px; font-size: 15px; font-weight: 500; line-height: 1.4; color: #fff !important; }
.sv-pm-detail p { margin: 0 0 6px; }
.sv-pm-detail ul, .sv-pm-detail ol { margin: 0 0 8px; padding-left: 20px; }
.sv-pm-detail ul { list-style: disc; }
.sv-pm-detail ol { list-style: decimal; }
.sv-pm-detail li { margin-bottom: 4px; }
.sv-pm-detail strong, .sv-pm-detail b { font-weight: 500; color: #fff !important; }
.sv-pm-detail a { color: var(--sv-gold) !important; text-decoration: underline; }
.sv-pm-detail img { height: auto; border-radius: 8px; }
.sv-pm-detail table { max-width: 100%; }

/* bnav โปรโมชั่น → #sv-promotion (ไม่ใช้ #promotion เพราะชน styles.css เดิม: h2 180%, padding-bottom 50px) — เลื่อนแล้วไม่ให้ header sticky บังหัวข้อ */
#sv-promotion { scroll-margin-top: 84px; }

/* ---------- box trust (3 ข้อ) ---------- */
.sv-trust {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 22px 0 0; padding: 14px 2px; list-style: none;
    border-radius: 14px; border: 1px solid #d9a94a4a;
    background:
        radial-gradient(60% 120% at 50% 0%, rgba(245, 197, 66, .08), rgba(245, 197, 66, 0) 70%),
        linear-gradient(180deg, #08122B 0%, #040A1B 100%);
    box-shadow: 0 6px 16px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 226, 138, .08);
}
.sv-trust li { position: relative; display: flex; flex-direction: column; align-items: center; min-width: 0; padding: 0 4px; text-align: center; }
.sv-trust li + li::before { /* เส้นคั่นทองจาง */
    content: ''; position: absolute; left: 0; top: 8%; bottom: 8%; width: 1px;
    background: linear-gradient(180deg, rgba(245, 197, 66, 0), rgba(245, 197, 66, .45) 50%, rgba(245, 197, 66, 0));
}
.sv-trust img { width: 46px; height: 46px; margin-bottom: 4px; filter: saturate(.55) brightness(1.06) drop-shadow(0 3px 8px rgba(245, 197, 66, .15)); } /* ทองจืดลง */
.sv-trust b { white-space: nowrap; font-size: min(13.5px, 3.05vw); font-weight: 500; line-height: 1.3; color: #fff; } /* บรรทัดเดียวเสมอ: ย่อตามความกว้างจอ */

/* ---------- หน้าโปรโมชั่น (promotion.php) ---------- */
.sv-pg-hd {
    position: relative; overflow: hidden;
    margin: 2px 0 16px; padding: 18px 12px 16px; text-align: center;
    border-radius: 14px; border: 1px solid #d9a94a4a;
    background:
        radial-gradient(70% 110% at 50% 0%, rgba(245, 197, 66, .14), rgba(245, 197, 66, 0) 70%),
        linear-gradient(180deg, #132A5E 0%, #0C1B42 100%);
    box-shadow: 0 6px 16px rgba(0, 0, 0, .4);
}
.sv-pg-hd::before { /* เส้นทองบางขอบบน */
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, rgba(245, 197, 66, 0), rgba(255, 226, 138, .85) 50%, rgba(245, 197, 66, 0));
}
.sv-pg-ttl {
    margin: 6px 0 0; font-size: 26px; font-weight: 500; line-height: 1.25; letter-spacing: .01em;
    background: linear-gradient(180deg, #FFF4CC 0%, #F5C542 55%, #D99A1E 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.sv-pg-sub { margin: 4px 0 0; font-size: 13px; font-weight: 300; color: var(--sv-muted); }
.sv-pg-empty { padding: 30px 0; text-align: center; color: var(--sv-muted); }
.sv-promos-pg { gap: 14px; }
.sv-promos-pg .sv-promo h3 { -webkit-line-clamp: 2; }
.sv-promo-more {
    display: flex; align-items: center; justify-content: flex-end; gap: 4px;
    margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(245, 197, 66, .15);
    font-size: 13px; font-weight: 500; color: var(--sv-gold);
}
.sv-promo-more i { font-size: 10px; }
.sv-pg-join {
    margin: 22px 0 6px; padding: 16px 14px 2px; text-align: center;
    border-radius: 14px; border: 1px solid #d9a94a4a;
    background:
        radial-gradient(60% 120% at 50% 0%, rgba(245, 197, 66, .08), rgba(245, 197, 66, 0) 70%),
        linear-gradient(180deg, #08122B 0%, #040A1B 100%);
    box-shadow: 0 6px 16px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 226, 138, .08);
}
.sv-pg-join-ttl { margin: 0; font-size: 18px; font-weight: 500; line-height: 1.35; color: var(--sv-gold); }
.sv-pg-join-sub { margin: 2px 0 0; font-size: 13px; font-weight: 300; color: var(--sv-muted); }
.sv-pg-join .sv-cta { margin: 12px 0 14px; }
.sv-pg-join button.sv-btn { width: 100%; padding: 0; font-family: inherit; } /* ปุ่ม data-contact (หน้า webfix) */

/* ---------- หน้าหมวดเกม 9 หน้า (_sv-game.php): หัวการ์ด + แท็บหมวด + บทความ SEO (ย่อ/อ่านต่อ) ---------- */
.sv-gm-hd { padding-top: 14px; }
.sv-gm-ic { display: block; width: 76px; height: auto; margin: 0 auto 4px; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .5)); }
.sv-gm-hd .sv-cta { margin: 14px 0 0; }
.sv-gm-nav {
    position: relative; /* offsetParent ของแท็บ (ui2.js เลื่อนแท็บที่เลือกมากลาง) */
    display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none;
    margin: 0 -14px; padding: 0 14px 2px;
}
.sv-gm-nav::-webkit-scrollbar { display: none; }
.sv-gm-nav a {
    flex: none; padding: 7px 14px; border-radius: 999px; white-space: nowrap;
    font-size: 14px; font-weight: 500; color: var(--sv-muted) !important;
    background: rgba(255, 255, 255, .05); border: 1px solid rgba(245, 197, 66, .22);
}
.sv-gm-nav a[aria-current] { color: var(--sv-navy) !important; background: var(--sv-gold-grad); border-color: transparent; }
.sv-art {
    margin: 14px 0 0; padding: 16px 14px 0; border-radius: 14px; border: 1px solid #d9a94a4a;
    background:
        radial-gradient(60% 120% at 50% 0%, rgba(245, 197, 66, .06), rgba(245, 197, 66, 0) 70%),
        linear-gradient(180deg, #08122B 0%, #040A1B 100%);
    box-shadow: 0 6px 16px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 226, 138, .08);
}
.sv-art-tg { display: none; }
.sv-art-body { position: relative; max-height: 560px; overflow: hidden; font-size: 15px; line-height: 1.75; color: #d4dcf2; }
.sv-art-body::after { /* จางท้ายตอนย่อ */
    content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 120px; pointer-events: none;
    background: linear-gradient(180deg, rgba(4, 10, 27, 0), #040A1B);
}
.sv-art-tg:checked ~ .sv-art-body { max-height: none; }
.sv-art-tg:checked ~ .sv-art-body::after { display: none; }
.sv-art-body h1 { /* editor1 ใส่ class="title-menu" (common.css สีเขียว+เส้นเหลือง) */
    margin: 0 0 10px; padding: 0; border: 0; font-size: 22px; font-weight: 500; line-height: 1.35;
    background: linear-gradient(180deg, #FFF4CC 0%, #F5C542 55%, #D99A1E 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.sv-art-body h2, .sv-cv-body h2 { position: relative; margin: 20px 0 8px; padding-left: 13px; font-size: 18px; font-weight: 500; line-height: 1.4; color: #fff; }
.sv-art-body h2::before, .sv-cv-body h2::before { content: ''; position: absolute; left: 0; top: 12%; bottom: 12%; width: 4px; border-radius: 4px; background: var(--sv-gold-grad); }
.sv-art-body h3, .sv-cv-body h3 { margin: 14px 0 6px; font-size: 16px; font-weight: 500; line-height: 1.45; color: var(--sv-gold); }
.sv-art-body p, .sv-cv-body p { margin: 0 0 10px; }
.sv-art-body strong, .sv-art-body b, .sv-cv-body strong, .sv-cv-body b { font-weight: 500; color: #fff; }
.sv-art-body h3 strong, .sv-cv-body h3 strong { color: inherit; }
.sv-art-body a, .sv-cv-body a { color: var(--sv-gold); }
.sv-art-body ul, .sv-art-body ol, .sv-cv-body ul, .sv-cv-body ol { margin: 0 0 10px; padding-left: 20px; }
.sv-art-body li, .sv-cv-body li { list-style: disc; }
.sv-art-body ol li, .sv-cv-body ol li { list-style: decimal; }
.sv-art-more {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    margin: 0 -14px; padding: 12px; border-top: 1px solid rgba(245, 197, 66, .15); cursor: pointer;
    font-size: 15px; font-weight: 500; color: var(--sv-gold);
}
.sv-art-more i { font-size: 12px; transition: transform .2s; }
.sv-art-close { display: none; }
.sv-art-tg:checked ~ .sv-art-more .sv-art-open { display: none; }
.sv-art-tg:checked ~ .sv-art-more .sv-art-close { display: inline; }
.sv-art-tg:checked ~ .sv-art-more i { transform: rotate(180deg); }

/* ---------- หน้าแก้ไขปัญหาเข้าเว็บ (webfix.php): การ์ดโทนเดียวกับ .sv-about + ขั้นตอนแบบ timeline ---------- */
.sv-wf-box {
    scroll-margin-top: 84px;
    margin: 0 0 14px; padding: 16px 14px; border-radius: 14px; border: 1px solid #d9a94a4a;
    background:
        radial-gradient(60% 120% at 50% 0%, rgba(245, 197, 66, .06), rgba(245, 197, 66, 0) 70%),
        linear-gradient(180deg, #08122B 0%, #040A1B 100%);
    box-shadow: 0 6px 16px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 226, 138, .08);
    font-size: 15px; line-height: 1.7; color: var(--sv-muted);
}
.sv-wf-box p { margin: 0; }
.sv-wf-box b { font-weight: 500; color: #fff; }
.sv-wf-h2 { margin: 0 0 8px; font-size: 18px; font-weight: 500; line-height: 1.4; color: var(--sv-gold); }
.sv-wf-tip {
    display: flex; gap: 10px; align-items: flex-start;
    margin-top: 12px !important; padding: 10px 12px; border-radius: 12px;
    background: rgba(245, 197, 66, .08); border: 1px solid rgba(245, 197, 66, .3);
    font-size: 14px; line-height: 1.55;
}
.sv-wf-tip i { margin-top: 3px; color: var(--sv-gold); }
.sv-wf-tip b { color: #FFE28A; }
.sv-wf-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.sv-wf-pick a {
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    padding: 12px 8px; border-radius: 12px; text-align: center;
    border: 1px solid rgba(245, 197, 66, .45);
    background: linear-gradient(180deg, #1A3778 0%, #11265A 50%, #0A1636 100%);
    box-shadow: 0 4px 12px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .18);
}
.sv-wf-pick i { font-size: 24px; color: var(--sv-gold); }
.sv-wf-pick b { font-size: 16px; line-height: 1.3; }
.sv-wf-pick small { font-size: 12px; color: var(--sv-muted); }
.sv-wf-h3 { display: flex; gap: 12px; align-items: center; margin: 0 0 14px; font-size: 16px; font-weight: 500; line-height: 1.4; color: #fff; }
.sv-wf-h3 > i {
    flex: none; display: flex; align-items: center; justify-content: center;
    width: 42px; height: 42px; border-radius: 12px; font-size: 20px; color: var(--sv-navy);
    background: var(--sv-gold-grad); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6);
}
.sv-wf-h3 small { display: block; font-size: 13px; font-weight: 300; color: var(--sv-muted); }
.sv-wf-steps { counter-reset: sv-wf; margin: 0; padding: 0; list-style: none; }
.sv-wf-steps li { position: relative; counter-increment: sv-wf; padding: 0 0 18px 42px; list-style: none; }
.sv-wf-steps li::before { /* เลขขั้นตอน */
    content: counter(sv-wf); position: absolute; left: 0; top: 0;
    display: flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; border-radius: 50%;
    font-size: 15px; font-weight: 600; color: var(--sv-navy); background: var(--sv-gold-grad);
}
.sv-wf-steps li::after { /* เส้นเชื่อมขั้นตอน */
    content: ''; position: absolute; left: 13px; top: 34px; bottom: 6px; width: 2px;
    background: linear-gradient(180deg, rgba(245, 197, 66, .45), rgba(245, 197, 66, .08));
}
.sv-wf-steps li:last-child { padding-bottom: 4px; }
.sv-wf-steps li:last-child::after { display: none; }
.sv-wf-steps p { color: #e6ebfa; }
.sv-wf-store { display: flex; gap: 8px; margin-top: 10px; }
.sv-wf-store a { flex: 1; max-width: 150px; line-height: 0; }
.sv-wf-store img { width: 100%; height: auto; }
.sv-main .sv-wf-shot { /* ภาพตัวอย่าง: จำกัดความสูง ภาพแนวตั้งไม่ยาวเกิน */
    display: block; width: auto; max-width: 100%; max-height: 340px; margin: 12px 0 0;
    border-radius: 10px; border: 1px solid rgba(245, 197, 66, .25); background: #fff;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .4);
}
.sv-wf-done {
    display: flex; gap: 10px; align-items: flex-start;
    margin-top: 6px !important; padding: 10px 12px; border-radius: 12px;
    background: rgba(61, 220, 132, .08); border: 1px solid rgba(61, 220, 132, .3);
    font-size: 14px; line-height: 1.55; color: #d4f5e2;
}
.sv-wf-done i { margin-top: 3px; color: #3ddc84; }
/* sheet โปร: ปุ่มสมัครติดล่าง (sheet-box ไม่มี padding ล่าง ปุ่มรับ safe-area แทน) */
.sv-pm-cta {
    position: sticky; bottom: 0; z-index: 2;
    margin: 14px -16px 0; padding: 14px 16px calc(14px + env(safe-area-inset-bottom));
    background: linear-gradient(180deg, rgba(6, 14, 36, 0) 0%, #060E24 28%);
}
.sv-pm-cta .sv-btn { height: 50px; font-size: 17px; }

/* ---------- การ์ดฟอร์มแบบ inline (ชุดเดียวกับ sheet): หน้าสมัครสมาชิก register_api.php + หน้า /login2 login.php ---------- */
.sv-rg-page {
    scroll-margin-top: 84px; overflow: hidden;
    margin: 2px 0 0; padding-bottom: 18px;
    border-radius: 20px; border: 1px solid #d9a94a4a;
    background: #0A1630; box-shadow: 0 6px 16px rgba(0, 0, 0, .4);
}
.sv-rg-page .sv-lg-hd { padding-top: 22px; touch-action: auto; } /* ไม่มี grip/ปุ่มปิด ; ปล่อยให้ปัดเลื่อนหน้าได้ */

/* ---------- หน้า /login2 (login.php): แสดงแค่ฟอร์มเข้าสู่ระบบ — body.sv-bare ไม่มี header / footer / เมนูล่าง ---------- */
.sv-bare .sv-app { display: flex; flex-direction: column; justify-content: center; min-height: 100vh; min-height: 100dvh; padding-bottom: 0; }
.sv-bare .sv-main { padding: 24px 14px calc(24px + env(safe-area-inset-bottom)); }
.sv-lg-page-logo { display: block; width: max-content; margin: 0 auto 18px; line-height: 0; }
.sv-lg-page-logo img { height: 72px; width: auto; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .5)); }

/* ---------- หน้ารายการข่าว (content-list.php): /footballNews/ — ข่าวแรกการ์ดใหญ่ ที่เหลือเป็นแถว + ตัวเลขหน้า ---------- */
.sv-nw-list { display: flex; flex-direction: column; gap: 10px; }
.sv-nw {
    display: flex; gap: 12px; padding: 10px; border-radius: 14px;
    border: 1px solid rgba(245, 197, 66, .2); color: #fff !important;
    background: linear-gradient(180deg, #102654 0%, #0A1838 100%);
    box-shadow: 0 4px 12px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .06);
}
.sv-nw:active { transform: scale(.99); }
.sv-nw-img { flex: none; width: 120px; aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden; background: #0F2350; line-height: 0; }
.sv-main .sv-nw-img img { width: 100%; height: 100%; object-fit: cover; }
.sv-nw-tx { display: flex; flex-direction: column; flex: 1; min-width: 0; }
body.sv-ui2 .sv-nw-ttl {
    margin: 0; font-size: 15px; font-weight: 500; line-height: 1.45; color: #fff;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.sv-nw-desc {
    margin: 4px 0 0; font-size: 13px; font-weight: 300; line-height: 1.5; color: var(--sv-muted);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.sv-nw-time { margin-top: auto; padding-top: 6px; font-size: 12px; font-weight: 300; color: var(--sv-muted); }
.sv-nw-time i { margin-right: 3px; color: var(--sv-gold); }
.sv-nw-top { flex-direction: column; gap: 0; padding: 0; overflow: hidden; border-color: #d9a94a66; }
.sv-nw-top .sv-nw-img { width: 100%; aspect-ratio: 16 / 9; border-radius: 0; }
.sv-nw-top .sv-nw-tx { padding: 10px 14px 12px; }
body.sv-ui2 .sv-nw-top .sv-nw-ttl { font-size: 18px; line-height: 1.4; }
.sv-pager { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 16px 0 0; }
.sv-pager .btn { /* ปุ่มจาก paginator() ของระบบ (bootstrap .btn) */
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 38px; height: 38px; padding: 0 10px; border-radius: 10px; box-shadow: none;
    font-family: inherit; font-size: 14px; font-weight: 500; line-height: 1;
    color: var(--sv-muted) !important; background: rgba(255, 255, 255, .05); border: 1px solid rgba(245, 197, 66, .22);
}
.sv-pager .btn-primary { color: var(--sv-navy) !important; background: var(--sv-gold-grad); border-color: transparent; }
.sv-pager .btn[disabled] { opacity: .35; }
.sv-pager .btn i { font-size: 12px; }

/* ---------- หน้าอ่านข่าว/บทความ (content-view.php): หัวข้อ + รูป + เนื้อหา (ตัวอักษรชุดเดียวกับ .sv-art-body) + ก่อนหน้า/ถัดไป + ข่าวที่เกี่ยวข้อง ---------- */
.sv-cv {
    padding: 14px 14px 6px; border-radius: 14px; border: 1px solid #d9a94a4a;
    background:
        radial-gradient(60% 120% at 50% 0%, rgba(245, 197, 66, .06), rgba(245, 197, 66, 0) 70%),
        linear-gradient(180deg, #08122B 0%, #040A1B 100%);
    box-shadow: 0 6px 16px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 226, 138, .08);
}
.sv-cv-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.sv-cv-meta .sv-nw-time { margin: 0; padding: 0; }
.sv-cv-cat {
    padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 500;
    color: var(--sv-gold) !important; background: rgba(245, 197, 66, .1); border: 1px solid rgba(245, 197, 66, .35);
}
body.sv-ui2 .sv-cv-ttl { margin: 10px 0 12px; font-size: 22px; font-weight: 500; line-height: 1.4; color: #fff; }
.sv-main .sv-cv-img { display: block; width: calc(100% + 28px); max-width: none; margin: 0 -14px 14px; }
.sv-cv-body { font-size: 15px; line-height: 1.75; color: #d4dcf2; overflow-wrap: break-word; }
.sv-cv-body > p:last-child:has(> br:only-child) { display: none; } /* <p><br></p> ท้ายเนื้อหาจาก editor */
.sv-cv-body [style] { font-family: inherit !important; line-height: inherit !important; } /* เนื้อหาจาก editor มี font/line-height แบบ inline */
.sv-cv-body h2[style], .sv-cv-body h3[style] { line-height: 1.45 !important; }
.sv-cv-body [style*="color"] { color: inherit !important; }
.sv-cv-body [style*="background"] { background: none !important; }
.sv-cv-body img { border-radius: 10px; }
.sv-cv-np { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 14px 0 0; }
.sv-cv-np a {
    display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 12px; min-width: 0;
    border: 1px solid rgba(245, 197, 66, .2); background: linear-gradient(180deg, #102654 0%, #0A1838 100%);
    color: #fff !important;
}
.sv-cv-next { grid-column: 2; text-align: right; }
.sv-cv-np small { font-size: 12px; font-weight: 500; color: var(--sv-gold); }
.sv-cv-np small i { font-size: 10px; }
.sv-cv-np b {
    font-size: 14px; font-weight: 400; line-height: 1.45;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* ---------- หน้ารีวิว (review-list.php): การ์ดรีวิว + ฟอร์มแสดงความคิดเห็น (ช่องกรอก .sv-fl ชุดเดียวกับฟอร์มเข้าสู่ระบบ) ---------- */
.sv-rv-write { width: max-content; margin: 12px auto 0; padding: 0 18px; }
.sv-rv-list { display: flex; flex-direction: column; gap: 10px; }
.sv-rv {
    padding: 12px 14px; border-radius: 14px; border: 1px solid rgba(245, 197, 66, .2);
    background: linear-gradient(180deg, #102654 0%, #0A1838 100%);
    box-shadow: 0 4px 12px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .06);
}
.sv-rv-hd { display: flex; align-items: center; gap: 10px; }
.sv-rv-av {
    flex: none; display: flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: 50%;
    font-size: 18px; font-weight: 600; color: var(--sv-navy); background: var(--sv-gold-grad);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6);
}
.sv-rv-who { display: flex; flex-direction: column; flex: 1; min-width: 0; line-height: 1.3; }
.sv-rv-who b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; font-weight: 500; color: #fff; }
.sv-rv-who small { font-size: 12px; font-weight: 300; color: var(--sv-muted); }
.sv-rv-stars { flex: none; display: flex; gap: 2px; font-size: 13px; color: var(--sv-gold); }
.sv-rv-stars .is-off { color: rgba(255, 255, 255, .18); }
.sv-rv-tx { margin: 8px 0 0; font-size: 15px; line-height: 1.6; color: #e6ebfa; overflow-wrap: break-word; }
#review.sv-rv-form { /* id="review" ชน styles.css เดิม (#review padding 50px) */
    scroll-margin-top: 84px;
    margin: 22px 0 0; padding: 16px 14px; border-radius: 14px; border: 1px solid #d9a94a4a;
    background: linear-gradient(180deg, #0F2350 0%, #0A1630 100%);
    box-shadow: 0 6px 16px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 226, 138, .08);
}
.sv-rv-note { margin: 0 0 12px; font-size: 13px; font-weight: 300; line-height: 1.5; color: var(--sv-muted); }
.sv-rv-form .sv-wf-done, .sv-rv-form .sv-lg-err { margin: 0 0 12px !important; }
.sv-rv-fm { display: grid; gap: 12px; }
.sv-rv-form .sv-btn { width: 100%; font-family: inherit; }
.sv-fl-area { height: auto; align-items: flex-start; }
.sv-fl-area > .ic { top: 18px; }
.sv-fl textarea {
    display: block; width: 100%; min-height: 96px; margin: 0; padding: 26px 14px 10px 46px; resize: vertical;
    border: 0; outline: 0; border-radius: 14px; background: none; box-shadow: none;
    font: inherit; font-size: 16px; line-height: 1.5; color: #fff;
}
.sv-fl-area label { top: 29px; }
.sv-fl textarea:focus + label, .sv-fl textarea:not(:placeholder-shown) + label { top: 15px; font-size: 12px; font-weight: 500; color: var(--sv-gold); }
.sv-rv-rate { display: flex; align-items: center; justify-content: space-between; margin: 0; padding: 4px 4px 4px 14px; border: 0; min-width: 0; }
.sv-rv-rate legend { float: left; width: auto; margin: 0; padding: 0; font-size: 15px; color: var(--sv-muted); }
.sv-rv-pick { display: flex; flex-direction: row-reverse; gap: 4px; }
.sv-rv-pick input { position: absolute; opacity: 0; pointer-events: none; }
.sv-rv-pick label { margin: 0; padding: 4px; cursor: pointer; font-size: 26px; line-height: 1; color: rgba(255, 255, 255, .18); transition: color .12s, transform .12s; }
.sv-rv-pick input:checked ~ label, .sv-rv-pick label:hover, .sv-rv-pick label:hover ~ label { color: var(--sv-gold); }
.sv-rv-pick input:focus-visible + label { outline: 2px solid var(--sv-gold); outline-offset: 2px; border-radius: 6px; }
.sv-rv-cap { display: flex; gap: 10px; align-items: center; }
.sv-rv-cap .sv-fl { flex: 1; }
.sv-rv-cap img { flex: none; width: 140px; height: auto; border-radius: 12px; border: 1px solid rgba(245, 197, 66, .25); background: #fff; }

/* ---------- แถบติดตั้งแอป (PWA) บนสุดเหนือ header — __html.php #sv-pwa (ปุ่มติดตั้งเป็นลิงก์ไปหน้า login ของ member ที่เป็นตัวแอป) ---------- */
.sv-pwa {
    position: relative; z-index: 51;
    display: flex; align-items: center; gap: 10px; min-height: 48px;
    padding: 6px 8px 6px 12px;
    background: linear-gradient(90deg, #13295c 0%, #0A1630 100%);
    border-bottom: 1px solid rgba(245, 197, 66, .22);
    color: #fff; line-height: 1.3;
}
.sv-pwa[hidden] { display: none; }
.sv-pwa > img { flex: none; width: 34px; height: 34px; border-radius: 8px; box-shadow: 0 0 0 1px rgba(245, 197, 66, .45); }
.sv-pwa-tx { flex: 1; min-width: 0; display: grid; }
.sv-pwa-tx b { font-size: 14px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sv-pwa-tx small { font-size: 12px; font-weight: 300; color: var(--sv-muted); }
.sv-pwa-btn, .sv-pwa-btn:hover, .sv-pwa-btn:focus, .sv-pwa-btn:active {
    flex: none; display: inline-flex; align-items: center; height: 32px; padding: 0 14px; text-decoration: none; border: 0; border-radius: 16px;
    background: linear-gradient(180deg, #FFE28A 0%, #F5C542 45%, #D99A1E 100%); color: #1a1200;
    font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
}
.sv-pwa-x { flex: none; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: 0; background: none; color: var(--sv-muted); cursor: pointer; }
.sv-pwa-x svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }