/* css/home-new.css — CSS ของหน้าแรกใหม่ (index.php) ทั้งหมดอยู่ที่นี่
   ทุกกฎครอบด้วย .home-new กันรั่วไปหน้าอื่น ห้ามแก้ css/custom.css เดิม */

.home-new {
    margin: 0 auto;
    max-width: 480px; /* จำกัดความกว้างบนจอ desktop ให้ยังดูเป็น mobile layout ตามภาพอ้างอิง */
    width: 100%;
    padding-left: 10px;
    padding-right: 10px;
    /* .footer-border เป็น position:fixed ลอยติดขอบล่างจอ ไม่กินที่ในโฟลว์ จึงต้องเผื่อที่ว่างท้าย
       หน้าไว้เอง กันไม่ให้แถวสุดท้ายถูกแถบบัง */
    padding-bottom: 90px;
}

/* index.php มี header แถวเดียวของตัวเอง จึงซ่อน navbar เดิมของ head.php
   ปลอดภัยเพราะไฟล์นี้โหลดเฉพาะ index.php ไม่กระทบหน้าอื่น */
body .navbar {
    display: none;
}

/* ---------- บล็อก 1: Header แถวเดียว (เขียนใหม่) ---------- */
.home-new .site-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 15px;
    padding-bottom: 10px;
}
.home-new .site-header .site-logo {
    /* ภาพอ้างอิง: โลโก้กว้าง ~35.7% ของความกว้างจอ (788px reference) */
    max-width: clamp(114px, 35.7vw, 171px);
    height: auto;
}
.home-new .site-header .header-auth-btns {
    display: flex;
    align-items: center;
    /* ภาพอ้างอิง: gap ระหว่างปุ่ม ~1% ของความกว้างจอ */
    gap: clamp(3px, 1vw, 5px);
}
.home-new .site-header .header-auth-btns button {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    line-height: 0;
}
.home-new .site-header .header-auth-btns img {
    /* ปุ่ม PNG มีพื้นหลัง/ข้อความมาให้แล้ว ใส่แค่ border-radius ครอบมุมโค้ง ไม่ต้องวาดกรอบทับ */
    width: clamp(62px, 19.3vw, 93px);
    height: auto;
    display: block;
    border-radius: 8px;
}
.home-new .site-header .header-auth-btns button:last-child img {
    width: clamp(57px, 17.8vw, 85px);
}

/* ---------- บล็อก 2: การ์ด login/ฝาก/ถอน ประกอบจาก HTML+CSS (ไม่ใช่รูปแบน) คลาสอ้างอิงจาก
   ufa-member-1688/css/custom.css เป็นหน้า guest ไม่มี user จริง จึงตัด .info-credit ทิ้ง
   ปรับ font-size และ border-radius ให้เข้ากับ viewport มือถือของ aff ---------- */
.home-new .main-border {
    display: flex;
    align-items: stretch;
    width: 100%;
    border: 1px solid;
    background-color: #1f2126;
    border-color: #565656;
    border-radius: 20px 20px 0px 0px;
    margin-top: 10px;
    cursor: pointer;
}
.home-new .main-home-padding {
    /* ลด padding บน-ล่างให้แถบการ์ดไม่สูงเกินไป */
    padding-top: 5px;
    padding-left: 5px;
    padding-right: 5px;
    padding-bottom: 5px;
}
.home-new .wallet-col-login {
    /* ภาพอ้างอิง: ช่องซ้ายกว้างสุด ~38% */
    flex: 0 0 38%;
    max-width: 38%;
}
.home-new .wallet-col-trans {
    /* ภาพอ้างอิง: ช่องกลาง/ขวาเท่ากัน ~30-31% ต่อช่อง */
    flex: 0 0 31%;
    max-width: 31%;
}
.home-new .card-login-border {
    /* padding:1px คือความหนาของเส้นขอบ gradient เอง ห้ามเพิ่ม padding ตรงนี้ ย้ายไปที่ .card-login-inner แทน */
    display: block;
    width: 100%;
    height: 100%;
    padding: 1px;
    border: double 1px transparent;
    border-radius: 16px;
    background-image: linear-gradient(90deg, rgba(53,56,65,1) 0%, rgba(28,30,36,1) 100%), radial-gradient(circle at top left, #2eb1c8,#4747e2);
    background-origin: border-box;
    background-clip: content-box, border-box;
    position: relative;
    cursor: pointer;
}
.home-new .card-login-inner {
    /* ระยะห่างเนื้อหาจริงอยู่ที่นี่แทนที่จะไปโป่งเส้นขอบ gradient แถวบนมีไอคอนคนซ้าย/รีเฟรชขวา
       ข้อความอยู่กึ่งกลางใต้แถวไอคอน */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    height: 100%;
    padding: 6px 8px 6px 8px;
}
.home-new .wallet-top-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-shrink: 0;
}
.home-new .point_icon_reload img {
    width: 16px;
    display: block;
}
.home-new .wallet-person-icon {
    width: 20px;
    display: block;
}
.home-new .info-user {
    /* flex:1 กินพื้นที่ที่เหลือทั้งหมดใต้แถวไอคอน แล้ว center ทั้งแนวตั้ง-แนวนอนในนั้น */
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    color: #86878a;
    line-height: 1.3;
    text-align: center;
    font-weight: 700;
    margin-top: -10px;
}
.home-new .card-trans-border {
    /* padding:1px คือความหนาของเส้นขอบคู่เอง ห้ามเพิ่ม padding ตรงนี้ ย้ายไปที่ .card-trans-inner แทน */
    display: block;
    width: 100%;
    height: 100%;
    padding: 1px;
    border: double 2px transparent;
    border-radius: 16px;
    background: linear-gradient(35deg, rgba(53,56,65,1) 20%, rgba(28,30,36,1) 100%);
    background-origin: border-box;
    background-clip: content-box, border-box;
    border-color: #565656;
    cursor: pointer;
}
.home-new .card-trans-inner {
    display: block;
    height: 100%;
    padding: 8px 6px;
    text-align: center;
}
.home-new .icon-d {
    width: 36%;
    display: block;
    margin: 0 auto 4px auto;
}
.home-new .info-menu {
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    display: block;
}

/* ---------- บล็อก 3: แถบลิงค์รับทรัพย์ — banner_aff.png เป็นภาพแบนใบเดียว มีข้อความในรูปแล้ว ---------- */
.home-new .aff-link-wrap {
    display: block;
    width: 100%;
    cursor: pointer;
    border: none;
    background: none;
    padding: 0;
}
.home-new .aff-link-wrap img {
    height: auto;
    border-radius: 16px;
    display: block;
    /* banner_aff.png มีขอบจางโปร่งใสทั้งสองข้าง ขยายภาพขึ้นและดึงขอบจางให้พ้นกรอบ container */
    width: calc(100% * 1528 / 1488);   /* ~102.69% */
    margin-left: calc(-100% * 20 / 1488);   /* ~-1.344% */
    margin-right: calc(-100% * 20 / 1488);  /* ~-1.344% */
}

/* ---------- บล็อก 4: แท็บหมวดเกม — รูปแต่ละใบสัดส่วนไม่เท่ากัน จึงใช้ autoWidth ของ Splide
   แทนบังคับ width:100% + perPage คงที่ คุมด้วย height คงที่ที่ img แทน การ์ด "กำลังฮิต" เป็นสีฟ้า
   เพราะอยู่ในไฟล์ tab_hot.png เองอยู่แล้ว ไม่ใช่ CSS ที่วาดทับ ---------- */
.home-new .game-tabs {
    margin-top: 10px;
    /* ไฟล์ tab_sport1/sport2/sa/ae มีขอบโปร่งใสด้านล่างในตัว PNG (tab_hot ไม่มี) ถ้า height เท่ากัน
       หมด เนื้อภาพจะเตี้ยกว่า tab_hot จึงคูณด้วย hfix ของแต่ละใบ (data จาก inc/games_home.php) */
    --tab-h: clamp(49px, 15.23vw, 73px);
    /* hfix ทำให้ canvas สูงขึ้น เหลือที่ว่างท้ายแถว ชดเชยด้วย margin-bottom ติดลบ */
    margin-bottom: -7px;
}
.home-new .game-tabs .tab-btn {
    display: block;
    border: none;
    background: none;
    padding: 0;
    cursor: pointer;
}
.home-new .game-tabs .tab-btn img {
    /* ความกว้างปล่อยตามสัดส่วนจริงของรูป ค่านี้ใช้กรณีไม่มี inline style height ทับ */
    height: var(--tab-h);
    width: auto;
    border-radius: 10px;
    display: block;
}

/* ---------- บล็อก 5: เมนู 4 ไอคอน — คลาสอ้างอิงจาก member css/custom.css
   ปรับ font-size ให้เข้ากับ viewport ของ aff ---------- */
.home-new .menu-wrapper {
    /* ภาพอ้างอิง: แถวเมนูกว้างเต็มเท่าบล็อกอื่น ไม่ใช่ 90% */
    width: 100%;
    margin: 0 auto;
}
.home-new .menu-wrapper > .row {
    /* reset margin ของ bootstrap .row กันขอบซ้าย/ขวาล้นออกนอกแนวบล็อกอื่น */
    margin-left: clamp(-5px, -0.9vw, -3px);
    margin-right: clamp(-5px, -0.9vw, -3px);
}
.home-new .menu-wrapper [class*="col-"] {
    /* ภาพอ้างอิง: gap ระหว่างการ์ด ~1.8% ของความกว้างจอ -> ลด gutter ของ bootstrap ลง */
    padding-left: clamp(3px, 0.9vw, 5px);
    padding-right: clamp(3px, 0.9vw, 5px);
}
.home-new .menu-wrapper .img-sub-menu {
    /* ภาพอ้างอิง: ไอคอนกว้าง ~46% ของการ์ด (ของเดิม 50% + padding เยอะทำให้การ์ดสูงเกิน) */
    padding: 6px 0px 0px 0px;
    width: 46%;
}
.home-new .card-menu-border,
.home-new .card-menu-hover {
    /* การ์ดเมนูมุมมนสี่เหลี่ยม กว้างกว่าสูง ลด padding บน-ล่างให้ความสูงรวมไม่เกินเป้า */
    padding-left: 8px;
    padding-right: 8px;
    padding-top: 8px;
    padding-bottom: 6px;
    border: double 2px transparent;
    border-radius: 18px;
    background-image: linear-gradient(35deg, rgba(53,56,65,1) 20%, rgba(28,30,36,1) 100%), radial-gradient(circle at 100%, rgba(32,34,41,1),rgba(49,52,59,1));
    background-origin: border-box;
    box-shadow: 0px -1px 1px 0px #626161;
    position: relative;
    cursor: pointer;
}
/* font-size ต้นฉบับ 30px ใหญ่เกินสำหรับ viewport มือถือของ aff จึงลดเหลือ 13px */
.home-new .sub-menu {
    font-size: 13px;
    font-weight: 700;
    color: white;
    /* ลด padding-top ให้การ์ดรวมเข้าใกล้อัตราส่วนในภาพอ้างอิงมากขึ้น */
    padding-top: 4px;
    position: relative;
    display: block;
    text-align: center;
}

/* ---------- บล็อก 6: เส้นคั่น — ก๊อปจาก member css/custom.css:1121 ---------- */
.home-new .hl {
    border-top: 2px solid #87868640;
    margin: 15px 0 10px 0;
}

/* ---------- บล็อก 7: กริดหมวดเกม 2x2 (เขียนใหม่ ปรับจาก .card-trans-border member:1225) ---------- */
.home-new .game-category-row {
    /* reset bootstrap gutter (row -15px + col 15px) ให้ช่องว่างซ้าย-ขวาแคบลงตามภาพอ้างอิง
       ตั้ง selector เฉพาะกันชนกับ .row ตัวอื่นในหน้า */
    margin-left: -3px;
    margin-right: -3px;
}
.home-new .game-category-row > .col-6 {
    padding-left: 3px;
    padding-right: 3px;
}
.home-new .game-category-box {
    padding: 10px 8px;
    margin-bottom: 12px;
    /* ภาพอ้างอิง: มุมโค้ง ~14px ขอบบางมากหรือแทบไม่มี (ของเดิม 16px + border เข้มไป) */
    border-radius: 14px;
    background: linear-gradient(35deg, rgba(53,56,65,1) 20%, rgba(28,30,36,1) 100%);
    border: 1px solid rgba(255,255,255,0.06);
}
.home-new .game-category-box .cat-label {
    /* หัวข้อหมวดชิดซ้าย ใช้ gradient text สีเดียวกับขอบการ์ด "กรุณาเข้าสู่ระบบ" ด้วยเทคนิคเดียวกับ
       .text-gold-gradient ใน custom.css (เขียนคลาสใหม่ที่นี่ ไม่แก้ custom.css) */
    font-size: 14px;
    font-weight: 700;
    background: #2eb1c8;
    background: linear-gradient(90deg, #2eb1c8 0%, #4747e2 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 6px;
    display: block;
    text-align: left;
}
.home-new .game-category-box .splide__slide {
    cursor: pointer;
}
.home-new .game-category-box .splide__slide img {
    /* การ์ดเกมสูงคงที่ กว้างตามสัดส่วนจริง ใบที่ล้นถูกตัดขอบด้วย autoWidth */
    height: clamp(52px, 16.5vw, 79px);
    width: auto;
    border-radius: 10px;
    display: block;
}

/* ---------- บล็อก 8: แถวค่ายเกม — โลโก้สัดส่วนต่างกันมาก ใช้ autoWidth ให้แต่ละโลโก้คง
   aspect ratio จริงที่ height คงที่ แถวยาวเลยขอบซ้าย-ขวาได้ (type:loop เลื่อนวนต่อเนื่อง) ---------- */
.home-new .provider-section-title {
    text-align: center;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    margin-top: 10px;
    margin-bottom: 8px;
}
.home-new .provider-row {
    margin-top: 0;
    margin-bottom: 10px;
}
.home-new .provider-row .splide__slide {
    display: flex;
    align-items: center;
    justify-content: center;
}
.home-new .provider-row .splide__slide img {
    /* โลโก้สูงคงที่ กว้างตามสัดส่วนจริง (object-fit:contain กันภาพยืด/บีบ) */
    height: clamp(22px, 5.08vw, 26px);
    width: auto;
    object-fit: contain;
}

/* ---------- บล็อก 9: Footer — คลาสอ้างอิงจาก member css/custom.css ---------- */
.home-new .footer-border {
    border: 1px solid;
    background-color: #2f323a;
    border-color: #565656;
    /* ภาพอ้างอิง: แถบมุมโค้งประมาณ 14px ไม่ใช่ 30px */
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    align-content: center;
    /* บังคับ nowrap กัน .col-5 + .col-7 ตกบรรทัดใหม่บนจอแคบ (bootstrap .row wrap ติดมาโดย default) */
    flex-wrap: nowrap;
    /* ลอยติดขอบล่างจอตลอดเวลา ไม่ต้องเลื่อนหน้าลงมาหา ตำแหน่งคุมด้วย position:fixed แทน */
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: 10px;
    width: calc(100% - 20px);
    max-width: 460px; /* .home-new กว้างสุด 480px หัก padding ซ้าย-ขวาข้างละ 10px */
    /* ต่ำกว่า backdrop ของ bootstrap modal (1040) ตั้งใจ ไม่ให้ลอยทับ modal ตอนเปิด */
    z-index: 1030;
    margin: 0;
}
/* override สัดส่วนคอลัมน์ bootstrap เฉพาะในบริบทนี้ ให้ปุ่ม "ทางเข้าเล่น" กว้างกว่า */
.home-new .footer-border .col-5 {
    /* min-width:0 ให้คอลัมน์นี้หดได้ต่ำกว่าความกว้างเนื้อหาเมื่อจอแคบ (ค่า default หดไม่ได้ ทำให้ล้น) */
    flex: 1 1 auto;
    min-width: 0;
    max-width: none;
    padding-left: 4px;
    padding-right: 4px;
}
.home-new .footer-border .col-7 {
    flex: 0 0 53%;
    max-width: 53%;
    /* ลด padding เพราะรวมกับ margin ของปุ่มด้านในแล้วเกินเป้า */
    padding-left: 4px;
    padding-right: 4px;
}
.home-new .footer-game-border {
    border: 1px solid;
    background: rgb(74,97,251);
    background: linear-gradient(270deg, rgba(74,97,251,1) 0%, rgba(51,177,221,1) 100%);
    border-color: #565656;
    /* มุมโค้งเล็ก ไม่มีเส้นคั่นแนวตั้ง */
    border-radius: 10px;
    margin: 6px;
    padding: 12px 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
.home-new .footer-game-border .arrow-icon {
    font-size: 20px;
    line-height: 1;
}
.home-new .div-footer-home-btn {
    text-align: center;
    /* ลด padding แนวนอนจาก 15px -> 6px ช่วยให้ .col-5 แคบลง กันตกบรรทัดบนจอแคบ */
    padding: 10px 6px;
}
.home-new .footer-home-btn {
    /* ภาพอ้างอิง: ไอคอนบ้าน + ข้อความอยู่บรรทัดเดียวกันแนวนอน ตัวหนังสือหนากว่าเดิม */
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    text-decoration: none;
    justify-content: center;
}
.home-new .footer-home-btn-2 {
    font-size: 20px;
    font-weight: 700;
    color: #fff;
}
.home-new .footer-home-btn img {
    /* ไอคอนบ้านขนาดใหญ่ตามภาพอ้างอิง */
    width: clamp(24px, 7.61vw, 36px);
}

/* ---------- Modal สมัครสมาชิก — ขอบเรืองแสงฟ้า-ม่วงปรับจาก .card-login-border ของ member ---------- */
.home-new-modal {
    /* bootstrap ตั้ง .modal เป็น fixed + scroll ของตัวเอง เปลี่ยนเป็น absolute + สูงตามเนื้อหาแทน
       ให้กรอบยาวลงไปในหน้าตามปกติ (top ถูกตั้งจาก JS ตอนเปิด ให้เริ่มที่จุดที่ผู้ใช้มองอยู่) */
    position: absolute;
    height: auto;
    overflow: visible;
}
body.modal-open {
    /* ปลด overflow:hidden ที่ bootstrap ล็อกไว้ตอนเปิด modal ไม่งั้นเลื่อนดูกรอบที่ยาวเกินจอไม่ได้ */
    overflow: visible;
}
.home-new-modal .modal-dialog {
    /* จอใหญ่กว้างสุด 432px (แคบกว่าหน้าเว็บ 480px ให้เห็นช่องว่างสองข้าง)
       จอแคบใช้ calc เว้นขอบข้างละ 16px */
    max-width: 432px;
    width: calc(100% - 32px);
    margin: 16px auto;
}
.home-new-modal .register-modal-content {
    padding: 2px;
    border: double 1px transparent;
    border-radius: 28px;
    background-image: linear-gradient(rgb(32,34,40), rgb(32,34,40)), radial-gradient(circle at top left, #2eb1c8, #4747e2);
    background-origin: border-box;
    background-clip: content-box, border-box;
    background-color: rgb(32,34,40);
    /* iframe เป็นสี่เหลี่ยมมุมฉาก พื้นหลังทับมุมโค้งของกรอบ ตัดทิ้งด้วย overflow:hidden */
    overflow: hidden;
}
.home-new-modal .register-modal-footer {
    /* อยู่นอกกรอบ .register-modal-content ต้องเปิด pointer-events เอง เพราะ .modal-dialog ปิดไว้ */
    text-align: center;
    padding: 12px 0 4px;
    pointer-events: auto;
}
.home-new-modal .btn-close-register {
    /* ไม่มีพื้นหลัง ใช้ text-shadow ให้ไอคอนอ่านออกบนพื้นหลังที่อาจสว่าง */
    background: none;
    border: none;
    padding: 0;
    line-height: 1;
    color: #fff;
    font-size: 32px;
    opacity: 0.9;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.85);
    cursor: pointer;
}
.home-new-modal .btn-close-register:hover,
.home-new-modal .btn-close-register:focus {
    opacity: 1;
    outline: none;
}
.home-new-modal .modal-body {
    /* ไม่มี max-height/overflow-y กรอบยาวตามเนื้อหา เลื่อนที่ระดับ .home-new-modal แทน
       border-radius โค้งเฉพาะมุมบน position:relative ให้ .register-frame-loading (absolute)
       ข้างในยึดกับกล่องนี้ */
    padding: 0;
    border-top-left-radius: 26px;
    border-top-right-radius: 26px;
    overflow: hidden;
    position: relative;
}
.home-new-modal iframe.register-frame {
    /* min-height คือความสูงขั้นต่ำตอนเปิด modal กันเห็นกรอบย่อแล้วขยาย height จริงตั้งจาก
       postMessage 'register-height' ที่หน้าใน iframe ยิงกลับมา */
    width: 100%;
    min-height: 520px;
    border: 0;
    display: block;
    /* คู่กับ .is-loading ด้านล่าง ปกติทึบเต็ม พอกำลังโหลดค่อยลดเหลือ 0 ให้ spinner ทับบัง
       กันเห็นฟอร์มเก่าซ้อนกับฟอร์มใหม่ที่กำลังโหลด */
    opacity: 1;
    transition: opacity .25s ease;
}
.home-new-modal .modal-body.is-loading iframe.register-frame {
    opacity: 0;
}

/* spinner ระหว่างรอ iframe โหลดหน้าใหม่ ทับกล่องเปล่าไว้ระหว่างรอ แล้ว cross-fade ออกตอนพร้อม
   ดู showRegisterLoading/hideRegisterLoading ใน index.php */
.home-new-modal .register-frame-loading {
    /* longhand ตาม .home-regis-busy-overlay ด้านล่าง ไม่ใช้ inset ให้ตรงสไตล์เดิมของไฟล์นี้ */
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    /* พื้นหลังต้องทึบสีเดียวกับพื้นกรอบ กันเห็นหน้าเก่าที่กำลังจางทะลุออกมา */
    background: rgb(32,34,40);
    /* สถานะปิด ซ่อนสนิททั้งสายตาและ interaction จนกว่าจะติด is-loading
       visibility รอ transition opacity จบก่อนค่อยสลับ กัน element โปร่งใสบัง iframe แวบหนึ่ง */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .25s ease, visibility 0s linear .25s;
}
.home-new-modal .modal-body.is-loading .register-frame-loading {
    /* สถานะเปิด — โผล่เร็วกว่าตอนปิด (.15s) เพราะอยากให้ผู้ใช้เห็นทันทีที่กดปุ่ม ไม่ต้องรอ */
    opacity: 1;
    visibility: visible;
    transition: opacity .15s ease;
}
.home-new-modal .register-frame-loading .rfl-spinner {
    /* หน้าตาเดียวกับ .home-regis-busy-spinner ด้านล่าง ใช้ keyframes เดียวกัน */
    width: 42px;
    height: 42px;
    border: 4px solid rgba(255,255,255,0.25);
    border-top-color: #33AEDB;
    border-radius: 50%;
    animation: home-regis-busy-spin 0.8s linear infinite;
}

/* overlay "กำลังบันทึกข้อมูล" ของหน้าแม่ หน้าตาเดียวกับ inforegis.php ต้องยึดกับจอจริง (ไม่ใช่
   iframe) และอยู่เหนือ modal เอง (bootstrap modal z-index 1050) */
.home-regis-busy-overlay {
    display: none;
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0;
    background: rgba(0,0,0,0.75);
    z-index: 2000;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.home-regis-busy-overlay.show {
    display: flex;
}
.home-regis-busy-box {
    color: #fff;
    padding: 24px;
    font-size: 15px;
}
.home-regis-busy-spinner {
    width: 42px;
    height: 42px;
    margin: 0 auto 16px auto;
    border: 4px solid rgba(255,255,255,0.25);
    border-top-color: #33AEDB;
    border-radius: 50%;
    /* ตั้งชื่อ keyframes ไม่ให้ชนกับของ inforegis.php */
    animation: home-regis-busy-spin 0.8s linear infinite;
}
@keyframes home-regis-busy-spin {
    to { transform: rotate(360deg); }
}

/* ข้อความตอนไม่มี invitekey ห้ามเปิด modal */
.invitekey-missing-msg {
    display: none;
    position: fixed;
    left: 50%;
    top: 50px;
    transform: translateX(-50%);
    background: rgba(220, 53, 69, 0.95);
    color: #fff;
    padding: 15px 10px;
    border-radius: 10px;
    font-size: 16px;
    z-index: 2000;
    max-width: 90%;
    text-align: center;
}
.invitekey-missing-msg.show {
    display: block;
}

/* ---------- กันไฮไลต์/ขอบขาวตอนคลิกบนมือถือ ---------- */
.home-new button,
.home-new a,
.home-new [data-open-register] {
    -webkit-tap-highlight-color: transparent;
}
.home-new button:focus,
.home-new [data-open-register]:focus {
    outline: none;
}

/* ---------- responsive กันล้นจอแคบมาก ---------- */
@media (max-width: 360px) {
    .home-new .site-header .header-auth-btns img {
        max-width: 68px;
    }
    .home-new .sub-menu {
        font-size: 11px;
    }
}