@charset "utf-8";

/* ==========================================================================
   SBOBETLAO — CSS เฉพาะ "เนื้อหาตรงกลาง"
   --------------------------------------------------------------------------
   ทุก selector อยู่ใต้ .sbo-page ทั้งหมด
   => layout/nav.php (แถบบน + แถบทอง + แถบล่างติดจอ) ไม่ได้รับผลกระทบ
   => sbocenter.css.php เดิมไม่ต้องแก้
   => หน้าที่ยังไม่ได้ห่อ .sbo-page (livescore, highlight) หน้าตาเหมือนเดิม

   โหลดต่อจาก sbocenter.css.php ใน main.php
   ========================================================================== */

.sbo-page {
    /* ---- สี ---- */
    --sbo-navy-900: #0D1836;   /* กรอบเนื้อหาชั้นนอก */
    --sbo-navy-800: #16265A;   /* การ์ด */
    --sbo-navy-700: #1D3370;
    --sbo-navy-950: #070E24;   /* ช่องกรอกข้อมูล */
    --sbo-line:     #2E4589;   /* เส้นขอบ */

    --sbo-blue-500: #2F62D8;
    --sbo-blue-400: #5B8BF0;

    --sbo-gold-300: #FFDC8A;
    --sbo-gold-400: #F5C24C;   /* สี accent เดียวของเนื้อหา */
    --sbo-gold-600: #B8862A;

    --sbo-ink:      #EEF2FC;
    --sbo-ink-dim:  #A6B4D6;
    --sbo-paper:    #FFFFFF;
    --sbo-ink-dark: #1B2A4E;

    /* ---- ตัวอักษร ----
       Kanit ไม่มี glyph ภาษาลาว ตัวลาวจะตกไป Noto Sans Lao Looped
       (ตั้งไว้เฉพาะในเนื้อหา ไม่กระทบเมนู) */
    --sbo-font: 'Kanit', 'Noto Sans Lao Looped', 'Noto Sans Lao',
                'Phetsarath OT', 'Saysettha OT', sans-serif;

    --sbo-fs-xs:   12px;
    --sbo-fs-sm:   14px;
    --sbo-fs-base: 15px;
    --sbo-fs-lg:   17px;
    --sbo-fs-h3:   19px;
    --sbo-fs-h2:   22px;
    --sbo-fs-h1:   27px;

    /* ---- ระยะ / มุม / เงา ---- */
    --sbo-s1: 4px;  --sbo-s2: 8px;  --sbo-s3: 12px;
    --sbo-s4: 16px; --sbo-s5: 24px; --sbo-s6: 32px;
    --sbo-r-sm: 6px; --sbo-r-md: 10px; --sbo-r-lg: 14px;
    --sbo-shadow-1: 0 1px 3px rgba(0,0,0,.35);
    --sbo-shadow-2: 0 6px 20px rgba(0,0,0,.40);

    /* ---- สัดส่วนรูป (กันหน้ากระตุกตอนโหลด) ---- */
    --sbo-ratio-wide:   974 / 358;
    --sbo-ratio-card:   487 / 350;
    --sbo-ratio-square: 1 / 1;

    /* ---- base ---- */
    font-family: var(--sbo-font);
    font-size: var(--sbo-fs-base);
    line-height: 1.75;         /* ตัวลาวมีวรรณยุกต์บน-ล่าง ต้องการช่องไฟกว่าไทย */
    color: var(--sbo-ink);
}

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

/* บล็อกภาษาไทย (บทความท้ายหน้าแรก) ให้ใช้ Kanit ไม่ต้องตกฟอนต์ */
.sbo-page [lang="th"] { font-family: 'Kanit', sans-serif; line-height: 1.7; }

.sbo-page img, .sbo-page video { max-width: 100%; }

.sbo-page a { color: var(--sbo-gold-400); text-decoration: none; transition: color .15s ease; }
.sbo-page a:hover, .sbo-page a:focus { color: var(--sbo-gold-300); text-decoration: underline; }
.sbo-page a:visited { color: var(--sbo-gold-400); }

/* ลิงก์บนพื้นขาว */
.sbo-page .sbo-article a,
.sbo-page .card-body a { color: var(--sbo-blue-500); }
.sbo-page .sbo-article a:hover,
.sbo-page .card-body a:hover { color: var(--sbo-blue-400); }


/* ==========================================================================
   LAYOUT
   ========================================================================== */

/* กรอบเนื้อหาหลัก — แทน style="background-color:#FFF" เดิม */
.sbo-page .sbo-shell {
    background: var(--sbo-navy-900);
    border: 1px solid var(--sbo-line);
    border-radius: var(--sbo-r-lg);
    padding: var(--sbo-s4) var(--sbo-s4) var(--sbo-s6);
    margin-top: var(--sbo-s3);
    margin-bottom: var(--sbo-s5);
    box-shadow: var(--sbo-shadow-2);
}

/* หัวข้อ + เส้นทอง — จุดเด่นเดียวของเนื้อหา ใช้หัวข้อละครั้ง */
.sbo-page .sbo-heading {
    font-size: var(--sbo-fs-h2);
    font-weight: 600;
    line-height: 1.45;
    color: var(--sbo-paper);
    margin: 0 0 var(--sbo-s3);
    padding-bottom: var(--sbo-s3);
    position: relative;
}
.sbo-page .sbo-heading::after {
    content: "";
    position: absolute;
    left: 0; bottom: 0;
    width: 100%; height: 2px;
    background: linear-gradient(to right,
        var(--sbo-gold-400) 0,  var(--sbo-gold-400) 56px,
        var(--sbo-gold-600) 56px, var(--sbo-gold-600) 64px,
        var(--sbo-line) 64px,    var(--sbo-line) 100%);
}
.sbo-page .sbo-heading--lg { font-size: var(--sbo-fs-h1); }
.sbo-page .sbo-heading--center { text-align: center; }
.sbo-page .sbo-heading--center::after { left: 50%; transform: translateX(-50%); max-width: 220px; }


/* ==========================================================================
   การ์ด / แผง
   ========================================================================== */
.sbo-page .sbo-card {
    background: var(--sbo-navy-800);
    border: 1px solid var(--sbo-line);
    border-radius: var(--sbo-r-md);
    overflow: hidden;
    height: 100%;
    box-shadow: var(--sbo-shadow-1);
}
.sbo-page .sbo-card--media { padding: 0; line-height: 0; }
.sbo-page .sbo-card--media img { display: block; width: 100%; height: auto; }
.sbo-page .sbo-card--link { transition: transform .18s ease, border-color .18s ease; }
.sbo-page .sbo-card--link:hover { transform: translateY(-2px); border-color: var(--sbo-gold-600); }

.sbo-page .sbo-panel {
    background: linear-gradient(160deg, var(--sbo-navy-800), var(--sbo-navy-900));
    border: 1px solid var(--sbo-line);
    border-radius: var(--sbo-r-md);
    padding: var(--sbo-s5) var(--sbo-s4);
    height: 100%;
    box-shadow: var(--sbo-shadow-1);
}
.sbo-page .sbo-panel--accent { border-top: 2px solid var(--sbo-gold-400); }
/* ใช้เมื่อในคอลัมน์เดียวกันมีอย่างอื่นต่อท้ายการ์ด
   ไม่งั้น height:100% จะอ้างอิงความสูงรวมของคอลัมน์ แล้วการ์ดยืดเกิน */
.sbo-page .sbo-panel--auto { height: auto; }
.sbo-page .sbo-panel p:last-child { margin-bottom: 0; }

/* การ์ดสีขาว — ใช้กับ QR code หน้า chat */
.sbo-page .sbo-card--paper {
    background: var(--sbo-paper);
    color: var(--sbo-ink-dark);
    padding: var(--sbo-s4);
    text-align: center;
}
.sbo-page .sbo-card--paper a { color: var(--sbo-blue-500); word-break: break-all; }
.sbo-page .sbo-qr { max-height: 225px; width: auto; }


/* ==========================================================================
   ขั้นตอน / ช่องทางติดต่อ / ปุ่ม
   ========================================================================== */
.sbo-page .sbo-steps {
    list-style: none; margin: 0 auto; padding: 0;
    max-width: 560px; counter-reset: sbostep;
}
.sbo-page .sbo-steps li {
    position: relative;
    padding: var(--sbo-s2) 0 var(--sbo-s2) var(--sbo-s6);
    border-bottom: 1px solid var(--sbo-line);
}
.sbo-page .sbo-steps li:last-child { border-bottom: 0; }
.sbo-page .sbo-steps li::before {
    counter-increment: sbostep;
    content: counter(sbostep);
    position: absolute; left: 0; top: 50%;
    transform: translateY(-50%);
    width: 22px; height: 22px; border-radius: 50%;
    background: var(--sbo-gold-400); color: var(--sbo-navy-950);
    font-size: var(--sbo-fs-xs); font-weight: 600;
    line-height: 22px; text-align: center;
}

.sbo-page .sbo-contact {
    display: flex; flex-wrap: wrap; gap: var(--sbo-s2);
    justify-content: center; margin-top: var(--sbo-s4);
}
.sbo-page .sbo-contact a {
    display: inline-flex; align-items: center; gap: var(--sbo-s2);
    padding: var(--sbo-s2) var(--sbo-s4);
    border: 1px solid var(--sbo-line); border-radius: 999px;
    background: var(--sbo-navy-950); color: var(--sbo-ink);
    font-size: var(--sbo-fs-sm);
}
.sbo-page .sbo-contact a:hover {
    border-color: var(--sbo-gold-400); color: var(--sbo-gold-300); text-decoration: none;
}

.sbo-page .sbo-btn {
    display: inline-flex; align-items: center; gap: var(--sbo-s2);
    padding: var(--sbo-s2) var(--sbo-s4);
    border: 0; border-radius: var(--sbo-r-sm);
    font-family: inherit; font-size: var(--sbo-fs-sm); font-weight: 500; line-height: 1.4;
    white-space: nowrap;        /* ปุ่มอยู่บรรทัดเดียวเสมอ ไม่ตกบรรทัด */
    cursor: pointer; transition: background .15s ease, transform .15s ease;
}
.sbo-page .sbo-btn--gold {
    background: linear-gradient(180deg, var(--sbo-gold-300), var(--sbo-gold-400));
    color: var(--sbo-navy-950);
}
.sbo-page .sbo-btn--gold:hover {
    background: var(--sbo-gold-300); color: var(--sbo-navy-950);
    text-decoration: none; transform: translateY(-1px);
}


/* ==========================================================================
   ฟอร์ม (หน้า register)
   ========================================================================== */
.sbo-page .sbo-form .col-form-label {
    color: var(--sbo-ink); font-size: var(--sbo-fs-sm);
    padding-top: calc(var(--sbo-s2) + 1px);
}
.sbo-page .sbo-form .form-control {
    background: var(--sbo-navy-950);
    border: 1px solid var(--sbo-line);
    border-radius: var(--sbo-r-sm);
    color: var(--sbo-ink);
    font-family: inherit; font-size: var(--sbo-fs-base);
    height: auto; padding: var(--sbo-s2) var(--sbo-s3);
}
.sbo-page .sbo-form .form-control::placeholder { color: #6C7FAB; }
.sbo-page .sbo-form .form-control:focus {
    background: var(--sbo-navy-950);
    border-color: var(--sbo-gold-400);
    box-shadow: 0 0 0 3px rgba(245,194,76,.18);
    color: var(--sbo-ink); outline: 0;
}
.sbo-page .sbo-form select.form-control option { background: var(--sbo-navy-900); color: var(--sbo-ink); }

/* กัน Chrome autofill เปลี่ยนพื้นเป็นสีฟ้า */
.sbo-page .sbo-form .form-control:-webkit-autofill,
.sbo-page .sbo-form .form-control:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--sbo-ink);
    -webkit-box-shadow: 0 0 0 1000px var(--sbo-navy-950) inset;
    caret-color: var(--sbo-ink);
}

.sbo-page .sbo-form .was-validated .form-control:valid,
.sbo-page .sbo-form .was-validated .form-control:invalid {
    background-image: none; padding-right: var(--sbo-s3);
}
.sbo-page .sbo-form .was-validated .form-control:valid   { border-color: #3E8E5A; }
.sbo-page .sbo-form .was-validated .form-control:invalid { border-color: #C7554B; }
.sbo-page .sbo-form .was-validated .form-control:valid:focus,
.sbo-page .sbo-form .was-validated .form-control:invalid:focus { box-shadow: 0 0 0 3px rgba(245,194,76,.18); }

.sbo-page .sbo-form__required { color: var(--sbo-gold-400); }

.sbo-page .sbo-note {
    border: 1px solid var(--sbo-line);
    border-left: 3px solid var(--sbo-gold-400);
    border-radius: var(--sbo-r-sm);
    background: var(--sbo-navy-950);
    padding: var(--sbo-s3) var(--sbo-s4);
    font-size: var(--sbo-fs-sm);
}
.sbo-page .sbo-note--error { border-left-color: #C7554B; }
.sbo-page .sbo-note p:last-child { margin-bottom: 0; }


/* ==========================================================================
   ลิสต์ลิงก์ (หน้า sbo-link)
   ========================================================================== */
/* --- กล่องฝัง iframe จากภายนอก (Scorebat หน้า livescore / highlight) ---
   Scorebat ใส่ style="width:600px" ไว้ที่ตัว iframe เอง ซึ่งล้นจอมือถือ
   inline style ชนะ CSS ธรรมดา จึงต้องใช้ !important เฉพาะ 2 บรรทัดนี้ */
.sbo-page .sbo-embed {
    width: 100%;
    background: var(--sbo-navy-950);
    border: 1px solid var(--sbo-line);
    border-radius: var(--sbo-r-md);
    overflow: hidden;
}
.sbo-page .sbo-embed iframe {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    height: 760px;
    border: 0;
}
@media (max-width: 575.98px) {
    .sbo-page .sbo-embed iframe { height: 620px; }
}

.sbo-page .sbo-linklist { list-style: none; margin: 0; padding: 0; }
.sbo-page .sbo-linklist li { border-bottom: 1px solid var(--sbo-line); }
.sbo-page .sbo-linklist li:last-child { border-bottom: 0; }
.sbo-page .sbo-linklist a {
    display: flex; align-items: baseline; gap: var(--sbo-s3);
    padding: var(--sbo-s3) var(--sbo-s1);
    color: var(--sbo-ink); word-break: break-all;
}
.sbo-page .sbo-linklist a:hover { color: var(--sbo-gold-300); text-decoration: none; }
.sbo-page .sbo-linklist__no {
    flex: 0 0 auto; min-width: 34px;
    font-size: var(--sbo-fs-xs); font-weight: 600;
    color: var(--sbo-gold-400); letter-spacing: .04em;
}

/* ลิงก์สำรองจำนวนมาก — ลิงก์ละบรรทัด แบ่งเป็นหลายคอลัมน์ไม่ให้หน้ายาวเกิน */
.sbo-page ul.sbo-linkcloud {
    list-style: none;
    margin: 0;
    padding: 0;
    column-count: 4;
    column-gap: var(--sbo-s5);
    font-size: var(--sbo-fs-sm);
    line-height: 1.9;
}
.sbo-page ul.sbo-linkcloud li {
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    padding: 2px 0;
    border-bottom: 1px solid rgba(46,69,137,.45);
}
.sbo-page ul.sbo-linkcloud a { display: block; color: var(--sbo-ink-dim); word-break: break-all; }
.sbo-page ul.sbo-linkcloud a:hover { color: var(--sbo-gold-300); text-decoration: none; }
@media (max-width: 1199.98px) { .sbo-page ul.sbo-linkcloud { column-count: 3; } }
@media (max-width:  991.98px) { .sbo-page ul.sbo-linkcloud { column-count: 2; } }
@media (max-width:  575.98px) { .sbo-page ul.sbo-linkcloud { column-count: 1; } }


/* ==========================================================================
   ACCORDION (ทับสไตล์ Bootstrap เฉพาะในเนื้อหา)
   ========================================================================== */
.sbo-page .accordion .card {
    background: var(--sbo-navy-800);
    border: 1px solid var(--sbo-line);
    border-radius: var(--sbo-r-md) !important;
    margin-bottom: var(--sbo-s2);
    overflow: hidden;
}
.sbo-page .accordion .card-header {
    background: transparent;
    border-bottom: 1px solid var(--sbo-line);
    padding: 0;
}
.sbo-page .accordion .card-header h2 { font-size: inherit; margin: 0; }
.sbo-page .accordion .btn-link {
    display: block; width: 100%;
    padding: var(--sbo-s3) var(--sbo-s4);
    font-family: inherit; font-size: var(--sbo-fs-lg); font-weight: 500; line-height: 1.55;
    color: var(--sbo-paper); text-align: left; white-space: normal; text-decoration: none;
}
.sbo-page .accordion .btn-link:hover,
.sbo-page .accordion .btn-link:focus { color: var(--sbo-gold-300); text-decoration: none; }
.sbo-page .accordion .btn-link::after { content: "\2212"; float: right; color: var(--sbo-gold-400); font-weight: 400; }
.sbo-page .accordion .btn-link.collapsed::after { content: "\002B"; }
.sbo-page .accordion .card-body {
    background: var(--sbo-paper); color: var(--sbo-ink-dark);
    padding: var(--sbo-s4); font-size: var(--sbo-fs-base);
}


/* ==========================================================================
   บทความยาว
   ========================================================================== */
.sbo-page .sbo-article {
    background: var(--sbo-paper); color: var(--sbo-ink-dark);
    border-radius: var(--sbo-r-md);
    padding: var(--sbo-s5) var(--sbo-s4);
}
.sbo-page .sbo-article h2,
.sbo-page .sbo-article h3 {
    font-size: var(--sbo-fs-h3); font-weight: 600; color: var(--sbo-navy-800);
    margin: var(--sbo-s5) 0 var(--sbo-s2);
    padding-left: var(--sbo-s3); border-left: 3px solid var(--sbo-gold-400);
}
.sbo-page .sbo-article h4 {
    font-size: var(--sbo-fs-base); font-weight: 600; color: var(--sbo-navy-700);
    margin: var(--sbo-s4) 0 var(--sbo-s2);
}
.sbo-page .sbo-article > :first-child { margin-top: 0; }
.sbo-page .sbo-article p { margin-bottom: var(--sbo-s3); }
.sbo-page .sbo-article ul,
.sbo-page .sbo-article ol { padding-left: var(--sbo-s5); margin-bottom: var(--sbo-s3); }
.sbo-page .sbo-article li { margin-bottom: var(--sbo-s1); }


/* ==========================================================================
   UTILITIES
   ========================================================================== */
.sbo-page .sbo-ratio-wide   { aspect-ratio: var(--sbo-ratio-wide);   object-fit: cover; }
.sbo-page .sbo-ratio-card   { aspect-ratio: var(--sbo-ratio-card);   object-fit: cover; }
.sbo-page .sbo-ratio-square { aspect-ratio: var(--sbo-ratio-square); object-fit: cover; }

/* รูปขั้นตอนสมัครในหน้าแรก ใช้ <picture> สลับ 2 ไฟล์คนละสัดส่วน
   ต่ำกว่า 992px = 974x358 / ตั้งแต่ 992px ขึ้นไป = 487x350
   ต้องให้ aspect-ratio ตรงกับไฟล์ที่ browser โหลดจริง ไม่งั้นรูปจะโดน crop */
.sbo-page .sbo-ratio-register { aspect-ratio: var(--sbo-ratio-wide); object-fit: cover; }
@media (min-width: 992px) {
    .sbo-page .sbo-ratio-register { aspect-ratio: var(--sbo-ratio-card); }
}
.sbo-page .carousel-inner img { display: block; width: 100%; height: auto; aspect-ratio: var(--sbo-ratio-wide); object-fit: cover; }
.sbo-page .sbo-muted { color: var(--sbo-ink-dim); }
.sbo-page .sbo-gold  { color: var(--sbo-gold-400); }

.sbo-page a:focus-visible,
.sbo-page button:focus-visible,
.sbo-page .btn:focus-visible {
    outline: 2px solid var(--sbo-gold-400);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .sbo-page *, .sbo-page *::before, .sbo-page *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
    .sbo-page .sbo-card--link:hover { transform: none; }
}


/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 991.98px) {
    .sbo-page { --sbo-fs-h1: 23px; --sbo-fs-h2: 20px; --sbo-fs-h3: 17px; }
}
/* จอแคบมาก ย่อปุ่มลงนิด กันข้อความยาวทะลุขอบเพราะตั้ง nowrap ไว้ */
@media (max-width: 359.98px) {
    .sbo-page .sbo-btn { font-size: 13px; padding-left: var(--sbo-s3); padding-right: var(--sbo-s3); }
}
/* แคบกว่า 320px (เช่น Galaxy Fold จอนอก) ยอมให้ตกบรรทัด ดีกว่าทะลุขอบจอ */
@media (max-width: 319.98px) {
    .sbo-page .sbo-btn { white-space: normal; }
}

@media (max-width: 575.98px) {
    .sbo-page { --sbo-fs-base: 14px; }
    /* padding แนวนอนต้อง >= 15px เพื่อกลบ margin ติดลบของ .row (Bootstrap -15px)
       ถ้าน้อยกว่านี้จะเกิด scroll แนวนอน 2-3px บนมือถือ */
    .sbo-page .sbo-shell   { padding: var(--sbo-s3) var(--sbo-s4) var(--sbo-s5); border-radius: var(--sbo-r-md); }
    .sbo-page .sbo-panel   { padding: var(--sbo-s4) var(--sbo-s3); }
    .sbo-page .sbo-article { padding: var(--sbo-s4) var(--sbo-s3); }
    .sbo-page .accordion .btn-link { padding: var(--sbo-s3); font-size: var(--sbo-fs-base); }
}


/* ==========================================================================
   เว้นที่ให้แถบเมนูล่างที่ลอยทับ (nav.fixed-bottom)
   --------------------------------------------------------------------------
   ต้องอยู่ท้ายไฟล์ เพราะกฎ .sbo-page .sbo-shell ด้านบนมี specificity เท่ากัน
   วัดจริง: แถบสูง 77px (จอ <=576px) / 57px (จอ 767px)
   body padding 88px + margin ของกรอบเนื้อหา 12px = พ้นแถบราว 24px
   แถบซ่อนตั้งแต่ 768px ขึ้นไป จึงไม่ต้องเว้นบนจอคอม

   *** body {} คือกฎเดียวในไฟล์นี้ที่ไม่ได้ scope ใต้ .sbo-page ***
   จำเป็น เพราะแถบเป็น position:fixed ไม่กินพื้นที่ ทุกหน้าต้องเว้นล่างให้
   ========================================================================== */
@media (max-width: 767.98px) {
    body { padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px)); }
    .sbo-page .sbo-shell { margin-bottom: var(--sbo-s3); }
}

/* จอแคบมาก (<=339px เช่น iPhone SE รุ่นแรก) ข้อความเมนู "ສະມັກສະມາຊິກ"
   ตกเป็น 3 บรรทัด แถบสูงขึ้นเป็น 134px ต้องเว้นเพิ่ม */
@media (max-width: 339.98px) {
    body { padding-bottom: calc(146px + env(safe-area-inset-bottom, 0px)); }
}