/* ============================================================
   MW DESIGN SYSTEM · V.3  —  mw2026.css   (COLOR OVERRIDE LAYER)
   Movewinbet · Bright Luxury Black / Gold
   ------------------------------------------------------------
   หน้าที่: "ทับสี" ของเว็บเดิม (Bootstrap + custom/global.min.css)
   ให้เป็นพาเลต designsystem2026 — เปลี่ยนเฉพาะ "สี" เท่านั้น
   (color / background / gradient / border-color / box-shadow / fill)
   ไม่แตะ layout · ขนาด · ฟอนต์ · ตำแหน่ง · radius

   กติกา:
   • import เฉพาะ tokens.css เพื่อใช้ตัวแปรพาเลต (ไม่มีผลต่อ layout)
   • ทุก override อยู่ในไฟล์นี้ไฟล์เดียว — ไม่แก้ CSS อื่น / ไม่แก้ HTML
   • ต้อง <link> ไฟล์นี้ "ตัวสุดท้าย" ใน <head> ของแต่ละหน้า
   • ใช้ !important เท่าที่จำเป็น (CSS เดิม minified specificity สูง)

   ครอบคลุมหน้าแรกที่ทำ: home.html  (โครงร่วมใช้ได้กับทุกหน้า member)
   ============================================================ */

@import "tokens.css";
/* ฟอนต์ Anuphan — ให้หน้า landing โหลดได้ (หน้าอื่นโหลดผ่าน custom-theme-default.css อยู่แล้ว)
   ใช้แก้ความไม่สม่ำเสมอของ font-family เท่านั้น ไม่ได้เปลี่ยนดีไซน์ฟอนต์ของเว็บ */
@import url('https://fonts.googleapis.com/css2?family=Anuphan:wght@100;200;300;400;500;600;700&display=swap');

/* ============================================================
   0. THEME VARIABLE REMAP
   custom-theme-default.css ใช้ var() 33 จุด — remap ตรงนี้
   ครอบคลุม navbar / user-bar / เมนู ที่อิงตัวแปรเหล่านี้
   (ไม่แตะ --font-family-* และ url() ใด ๆ)
   ============================================================ */
:root{
  --solid-black:#000000;                          /* คงเดิม */
  --vampire-black:var(--bg-base);                 /* #080705 → พื้นดำหรู */
  --grey-creyola:var(--border-default);           /* #2A363F → เส้นขอบกลาง */
  --spanish-yellow:var(--gold-500);               /* #EDAB0F → ทอง primary */
  --deep-lemeon:var(--gold-400);                  /* #f9ca21 → ทองสว่าง */
  --icon-yellow:var(--gold-500);                  /* #f8bf10 */
  --olive:var(--gold-800);                        /* #5B4839 → ขอบทองเข้ม */
  --border-sub-menu:var(--ink-400);               /* #7A868F */
  --primary-gold:var(--grad-gold);                /* gradient ทองหรู */
  --bg-menu-service:var(--surface-1);             /* #131C24 → พื้นการ์ดเมนู */
  /* bullet เพชรทอง (สำหรับ divider-with-text) — SVG rotate(45) สี gold-500 */
  --mw-diamond:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Crect x='1.3' y='1.3' width='5.4' height='5.4' transform='rotate(45 4 4)' fill='%23EFBF3B'/%3E%3C/svg%3E");
}

/* ============================================================
   1. GLOBAL — body · wrapper · navbar · footer · ลิงก์
   ============================================================ */
/* base สีพื้นย้ายไป html (fallback) เพื่อให้เลเยอร์ gradient ใน body::before โชว์ได้
   — ดู Section 19 (Fixed gradient background / parallax illusion) */
html{background:var(--bg-base)!important}
body{background:transparent!important;color:var(--ink-50)!important}
.wrapper.dark{background-color:transparent!important}
.bg-dark{background-color:var(--bg-base)!important}   /* utility: เดิม #232531 (น้ำเงินเทา) → ดำธีม ให้กลืนกับหน้า */
.table.table-striped tbody tr:nth-of-type(odd){background-color:var(--surface-1)!important}

.navbar{background-color:var(--bg-base)!important;border-bottom-color:var(--border-gold)!important}
.navbar .navbar-toggler-icon{color:var(--gold-300)!important}
/* นาวบาร์ / แถบ header / user-bar — un-scoped ให้ครอบทุกหน้า
   (home มี body.theme-default, landing ไม่มี class จึงต้องไม่ผูก theme-default) */
nav.navbar,
nav#navbar-header,#navbar-header,
nav#user-bar{background:var(--bg-base)!important}
/* เฉพาะหน้า landing: #navbar-header ที่มี <marquee> (ตัววิ่ง) → พื้นจางแทบโปร่งใส
   ให้ gradient ด้านหลังทะลุผ่าน (สกอปด้วย :has ไม่ต้องแก้ HTML) */
#navbar-header:has(marquee){background:var(--surface-glass)!important}

footer{background-color:var(--surface-1)!important;color:var(--ink-100)!important}
footer strong{color:var(--gold-500)!important}

a{color:var(--gold-400)!important}
a:hover,a:active{color:var(--gold-300)!important}
a.link-danger,.text-danger{color:var(--danger)!important}
.text-primary{color:var(--gold-500)!important}
.text-secondary{color:var(--gold-600)!important}
.text-success{color:var(--success)!important}
.text-info{color:var(--info)!important}

/* ============================================================
   2. USER BAR  (ชื่อผู้ใช้ + เครดิต)
   ============================================================ */
#user-bar,.user-bar{background:var(--bg-base)!important}
#user-bar .username,.user-bar .username{background-color:var(--surface-2)!important;color:var(--gold-300)!important}
/* เฉพาะแถบสมัคร/เข้าสู่ระบบ (มีปุ่ม register) = หน้า landing pre-login →
   เอาพื้นหลังออกให้โชว์ gradient ด้านหลัง (สกอปด้วย :has ไม่ต้องแก้ HTML) */
.user-bar:has(a[href*="register"]){background:transparent!important}

/* ============================================================
   3. BUTTONS
   ============================================================ */
.btn-primary{
  border-color:var(--gold-400)!important;
  background:var(--gold-500)!important;
  background:var(--grad-gold)!important;
  color:var(--on-gold)!important}
.btn-primary:hover,.btn-primary:active,.btn-primary:focus{
  color:var(--on-gold)!important;
  border-color:var(--gold-500)!important;
  background:var(--grad-gold)!important}
.jconfirm-buttons .btn-primary{background:var(--grad-gold)!important;color:var(--on-gold)!important}

.btn-secondary{border-color:var(--gold-200)!important;background:var(--gold-champagne)!important;color:var(--on-gold)!important}
.btn-secondary:hover,.btn-secondary:active,.btn-secondary:focus{
  color:var(--on-gold)!important;border-color:var(--gold-300)!important;background-color:var(--gold-100)!important}

.btn-default{border-color:var(--border-default)!important;background-color:var(--surface-2)!important;color:var(--ink-50)!important}
.btn-default:hover,.btn-default:active,.btn-default:focus{
  color:var(--ink-50)!important;border-color:var(--border-strong)!important;background-color:var(--surface-3)!important}

.btn-ghost{border-color:var(--border-default)!important;color:var(--ink-100)!important}
.btn-ghost:hover,.btn-ghost:active,.btn-ghost:focus{color:var(--gold-200)!important;background-color:var(--surface-3)!important}

.btn-danger{background-color:var(--danger)!important;border-color:var(--danger)!important;color:#fff!important}
.btn-success{background-color:var(--success)!important;border-color:var(--success)!important;color:var(--on-success)!important}

.btn-amount{background-color:var(--surface-2)!important;color:var(--ink-50)!important}
.btn-amount-clear{background-color:var(--surface-2)!important;color:var(--on-gold)!important}
.btn-amount:hover,.btn-amount:focus,.btn-amount:active,.btn-amount.active{
  background-color:var(--surface-gold-tint)!important;border-color:var(--gold-500)!important;color:var(--on-gold)!important}

.btn.disabled,.btn.disabled:hover,.btn.disabled:active,.btn.disabled:focus{
  background-color:var(--ink-700)!important;color:var(--ink-400)!important}

/* ============================================================
   4. FORM CONTROLS
   ============================================================ */
.form-control,.input-group-text{
  background-color:var(--surface-2)!important;border-color:var(--border-default)!important;color:var(--ink-50)!important}
.form-control:active,.form-control:focus,.input-group-text:active,.input-group-text:focus{
  color:var(--ink-50)!important;border-color:var(--gold-500)!important}
input.form-control::placeholder{color:var(--ink-400)!important}
.custom-select{background-color:var(--surface-2)!important;border-color:var(--border-default)!important;color:var(--ink-50)!important}
.error .form-control,.error .input-group-append,
.error .input-group .input-group-text{border-color:var(--danger)!important}
.error .input-group .input-group-text .fas{color:var(--danger)!important}

/* ============================================================
   5. CARDS · TABLES · SECTION HEADERS
   ============================================================ */
.card,.card-table{background:var(--surface-1)!important;border-color:var(--border-subtle)!important}
.card-table .card-table-header{background-color:var(--bg-base)!important;color:var(--ink-50)!important;z-index: 1 !important;
  /* เงาอยู่ "ข้างในกรอบ" (inset) ไม่ล้นออก — เรืองทองนุ่มเกาะมุมขวาด้านใน */
  box-shadow:inset -11px 0 22px -9px rgba(239,191,59,.32),inset 0 -9px 20px -10px rgba(239,191,59,.22)!important}
.card-table .card-table-header .title{color:var(--ink-0)!important}
.card-table .card-table-title{color:var(--ink-300)!important}
.card-table hr{background-color:var(--border-default)!important}
.card-table.list-prize .table-row{border-bottom-color:var(--border-subtle)!important}
.card-table .lotto-prize-number.first-prize{color:var(--gold-400)!important}
.card-table .lotto-prize-number.prize-tba{color:var(--ink-300)!important}

.table td,.table th,.table thead th{border-color:var(--border-default)!important}
.data-table .table-item{border-color:var(--border-default)!important}
.data-table .table-item .item-title{color:var(--gold-600)!important}
.data-table .table-item .item-col .label-block{color:var(--ink-300)!important}

.divider{background:var(--border-default)!important}
.section-subtitle{color:var(--ink-300)!important}
/* .section-title / .section-header → ดู Section 15 (Divider-with-Text) */

/* ============================================================
   6. MAIN SERVICE TILES  (หวย/คาสิโน/สล็อต/กีฬา)
   ============================================================ */
.main-service-group .main-service-item{background-color:transparent!important;color:var(--ink-50)!important}
.main-service-group .main-service-item.btn-outline{border-color:var(--border-default)!important}
.main-service-group .main-service-item .icon{color:var(--gold-500)!important}
.main-nav .nav-item .nav-link .icon{color:var(--gold-500)!important}
.main-nav .nav-item .nav-link span:not(.notification-badge){color:var(--ink-300)!important}

/* ============================================================
   7. TABS · PAGINATION
   ============================================================ */
.nav-tabs{border-bottom-color:var(--border-default)!important}
.nav-tabs .nav-link{color:var(--ink-200)!important}
.nav-tabs .nav-link.active{border-bottom-color:var(--gold-500)!important;color:var(--gold-100)!important}
.nav-tabs .nav-link.active .fas{color:var(--gold-500)!important}
.pagination .page-item .page-link{color:var(--ink-200)!important;background-color:var(--surface-2)!important;border-color:var(--border-default)!important}
.pagination .page-item.active .page-link{background:var(--grad-gold-soft)!important;border-color:var(--gold-500)!important;color:var(--on-gold)!important}
.pagination .page-item.disabled .page-link{color:var(--ink-500)!important}

/* ============================================================
   8. BOTTOM TAB BAR
   ============================================================ */
.tabbar{background:var(--bg-elev-0)!important;border-top-color:var(--border-gold)!important}
.tabbar ul li a{color:var(--ink-400)!important}
.tabbar ul li.active a,.tabbar ul li a.active,.tabbar ul li a.on{color:var(--gold-400)!important}

/* ============================================================
   9. MODAL  (รวม fullscreen nav menu)
   ============================================================ */
.modal .modal-content{background-color:var(--surface-2)!important}
.modal .modal-content .modal-header,
.modal .modal-content .modal-header .modal-title{color:var(--ink-0)!important}
/* โมดัลเต็มจอ (.fullscreen-modal = stake_number_history/share_staketset, .modal-fullscreen = nav/โปรโมชัน)
   ตัวโมดัลเองพื้น #1E2329 (น้ำเงินเทาหลุดธีม) — ของ fullscreen-modal คอนเทนต์โปร่งใส พื้นนี้เลยเต็มจอ
   → ดำลึกของธีม (surface-1) เป็นฉากหลัง กรอบการ์ด .modal-content (surface-2) ให้เด่น
   (โมดัลกึ่งกลางปกติพื้นโปร่งใสอยู่แล้ว ไม่โดนกฎนี้ — อาศัย scrim) */
.fullscreen-modal,
.modal-fullscreen{background-color:var(--surface-1)!important}

/* ============================================================
   10. ALERTS · BADGES · NEWS · ANNOUNCE
   ============================================================ */
.alert-warning{background-color:var(--warning)!important}
.alert-danger{background-color:var(--danger)!important}
.alert-success{background-color:var(--success)!important}
.alert-primary{background:var(--surface-2)!important;border-color:var(--border-gold)!important;color:var(--ink-100)!important}
.alert-primary strong,.alert-primary b{color:var(--gold-200)!important}
.badge.badge-info{background-color:var(--info)!important}
.badge.badge-success{background-color:var(--success)!important}
.badge.badge-light{background-color:var(--platinum-100)!important}
/* ปุ่ม "ดู" (.badge-view eye icon, make-lotto-number-list) เดิมพื้นขาว → ดำ ghost + ไอคอน/ขอบทอง */
.badge.badge-view{
  background-color:var(--surface-2)!important;background-image:none!important;
  color:var(--gold-300)!important;
  box-shadow:inset 0 0 0 1px var(--border-gold)!important;
}
.announce-message{background-color:var(--info)!important;color:#fff!important}
.news-bar{color:var(--ink-300)!important}
.news-bar a{color:var(--ink-50)!important}
.notification-badge,.livechat-notification-badge{background-color:var(--danger)!important}

/* ============================================================
   11. LOTTO RESULT STATES  (yeekee / btc)
   ============================================================ */
.yeekee-result,.yeekee-vip-result,.btc-result{color:var(--gold-400)!important}
.yeekee-reject,.yeekee-vip-reject,.btc-reject{color:var(--danger)!important}
.yeekee-block,.yeekee-vip-block,.btc-block,
.yeekee-not-found,.yeekee-vip-not-found,.btc-not-found{background-color:var(--surface-3)!important}

/* ============================================================
   12. MOBILE MAIN CONTENT  (mmc — casino lobby cards)
   ============================================================ */
.mobile-main-content .mmc-featured-card,
.mobile-main-content .mmc-grid-card,
.mobile-main-content .mmc-evenbet-card,
.mobile-main-content .mmc-rb7-preview-card,
.mobile-main-content #mmc-content-casino .mmc-featured-card,
.mobile-main-content #mmc-content-casino .mmc-grid-card,
.mobile-main-content .mmc-evenbet-back-btn{
  background-color:var(--surface-1)!important;border-color:var(--gold-800)!important}
.mobile-main-content .mmc-featured-card:hover,
.mobile-main-content .mmc-grid-card:hover,
.mobile-main-content .mmc-evenbet-card:hover,
.mobile-main-content .mmc-rb7-preview-card:hover,
.mobile-main-content .mmc-evenbet-back-btn:hover,
.mobile-main-content .mmc-menu-item:hover,
.mobile-main-content .mmc-menu-item.active{border-color:var(--gold-500)!important}
.mobile-main-content .mmc-featured-card .mmc-card-title,
.mobile-main-content .mmc-featured-card .mmc-card-subtitle,
.mobile-main-content .mmc-featured-card .mmc-card-sublabel,
.mobile-main-content .mmc-grid-card .mmc-grid-card-title,
.mobile-main-content .mmc-grid-card .mmc-grid-card-label,
.mobile-main-content .mmc-grid-card .mmc-grid-card-sublabel,
.mobile-main-content .mmc-evenbet-title,
.mobile-main-content .mmc-rb7-preview-title,
.mobile-main-content .mmc-rb7-preview-more,
.mobile-main-content .mmc-menu-item.active .mmc-menu-label{color:var(--gold-300)!important}
.mobile-main-content .mmc-empty,
.mobile-main-content .mmc-menu-item .mmc-menu-label,
.mobile-main-content .mmc-evenbet-dealer,
.mobile-main-content .mmc-rb7-preview-dealer,
.mobile-main-content .mmc-evenbet-category-title,
.mobile-main-content .mmc-load-more-text{color:var(--ink-300)!important}
.mobile-main-content .mmc-status-badge.open{background-color:var(--surface-gold-tint)!important;color:var(--gold-300)!important}
.mobile-main-content .mmc-status-badge.closed{color:var(--ink-400)!important}

/* ============================================================
   13. SWEETALERT2  (สีปุ่ม/แถบสถานะ ให้เข้าธีม)
   ============================================================ */
.swal2-styled.swal2-confirm{background-color:var(--gold-500)!important;color:var(--on-gold)!important}
.swal2-progress-steps .swal2-progress-step,
.swal2-progress-steps .swal2-progress-step-line,
.swal2-progress-steps .swal2-progress-step.swal2-active-progress-step{background:var(--gold-500)!important}

/* ============================================================
   14. MAIN SERVICES — HERO TREATMENT  (เมนูหลัก จุดดึงดูด)
   ------------------------------------------------------------
   ★ ส่วนเดียวที่ได้รับอนุญาตให้ใช้ CSS "ไม่ใช่สี"
     (pseudo-border + เงา + transform reveal + animation)
   อิงรูปลักษณ์ .hero ของ designsystem:
     • พื้นหลัง radial ทองเรือง + ไล่ดำหรู
     • เงา luxe
     • ขอบทอง sheen วิ่งรอบการ์ด  (animation: borderShine)
     • โผล่ขึ้นไล่ทีละใบตอนโหลด    (animation: fadeUp / anim-reveal)
   ============================================================ */

/* @keyframes ที่นำมาจาก designsystem (animations.css) — เพิ่มได้รับอนุญาตแล้ว */
@keyframes borderShine{0%{background-position:130% 0}100%{background-position:-130% 0}}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

.main-services-container{
  /* ── สี: hero background + เงา ── */
  background:
    radial-gradient(120% 150% at 50% -12%,rgba(239,191,59,.20),transparent 55%),
    linear-gradient(180deg,#171410,#0d0c0a)!important;
  border-color:var(--border-gold)!important;
  box-shadow:var(--shadow-luxe)!important;
  /* ── reveal entrance (anim-reveal/fadeUp) ── */
  animation:fadeUp .7s var(--ease) both;
}

/* ── ขอบทอง sheen วิ่งรอบการ์ด (เหมือน .hero::after) ── */
.main-services-container::after{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;
  background:var(--grad-gold-sheen);background-size:220% 100%;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  pointer-events:none;animation:borderShine 4s linear infinite;
}

/* ── หัวข้อในการ์ด ให้เป็นทองสว่างอ่านง่ายบนพื้นหรู ── */
.main-services-container .header-gold,
.main-services-container .header-services{color:var(--gold-100)!important}

/* ── stagger reveal: ไล่ดีเลย์ทีละใบด้วย nth-child (แทน .d1/.d2) ── */
.main-services-wrapper:nth-child(1) .main-services-container{animation-delay:.04s}
.main-services-wrapper:nth-child(2) .main-services-container{animation-delay:.10s}
.main-services-wrapper:nth-child(3) .main-services-container{animation-delay:.16s}
.main-services-wrapper:nth-child(4) .main-services-container{animation-delay:.22s}
.main-services-wrapper:nth-child(5) .main-services-container{animation-delay:.28s}
.main-services-wrapper:nth-child(6) .main-services-container{animation-delay:.34s}
.main-services-wrapper:nth-child(7) .main-services-container{animation-delay:.40s}
.main-services-wrapper:nth-child(8) .main-services-container{animation-delay:.46s}

/* ── เคารพ prefers-reduced-motion: ปิดการเคลื่อนไหว (คงสี/ขอบทองไว้) ── */
@media (prefers-reduced-motion:reduce){
  .main-services-container,
  .main-services-container::after{animation:none!important}
}

/* ============================================================
   15. SECTION HEADINGS — DIVIDER WITH TEXT  (.dw style)
   ------------------------------------------------------------
   ทำ .section-title / .section-header ให้เป็นดีไซน์ "เส้น—ข้อความ—เส้น"
   แบบ .dw ใน designsystem โดยใช้ pseudo-element วาดเส้นทองสองข้าง
   (แก้ HTML ไม่ได้ จึงไม่ได้ใช้ <span class="ln">)
   ★ มี CSS "ไม่ใช่สี" (flex + เส้น pseudo) จำกัดเฉพาะ 2 selector นี้
   ============================================================ */

/* รูปแบบ:  ─────◆  ข้อความ  ◆─────
   แต่ละ pseudo = เส้น (linear-gradient) + เพชรทอง (var --mw-diamond)
   ที่ปลายด้าน "ใน" ชิดข้อความ */

/* ── .section-title (แสดงทุกจอ) ── */
.section-title{
  display:flex!important;align-items:center;justify-content:center;gap:11px;
  color:var(--gold-200)!important;
}
.section-title::before,
.section-title::after{
  content:"";flex:1;height:8px;
  position:static!important;width:auto!important;margin:0!important;
  background-color:transparent!important;   /* ล้างแถบทองทึบจากกฎ :after เดิม */
  background-repeat:no-repeat!important;
  background-size:8px 8px,100% 1px!important;
}
/* ::before = เส้นซ้าย + เพชรปลายขวา(ชิดข้อความ) */
.section-title::before{
  background-image:var(--mw-diamond),linear-gradient(90deg,transparent,var(--gold-600))!important;
  background-position:right center,left center!important;
}
/* ::after = เส้นขวา + เพชรปลายซ้าย(ชิดข้อความ) */
.section-title::after{
  background-image:var(--mw-diamond),linear-gradient(90deg,var(--gold-600),transparent)!important;
  background-position:left center,right center!important;
}

/* ── .section-header (เดสก์ท็อปเท่านั้น — เดิมเป็น d-none d-lg-block) ── */
@media (min-width:992px){
  .section-header{
    display:flex!important;align-items:center;justify-content:center;gap:11px;
    color:var(--gold-200)!important;
  }
  .section-header::before,
  .section-header::after{
    content:"";flex:1;height:8px;
    background-color:transparent!important;
    background-repeat:no-repeat!important;
    background-size:8px 8px,100% 1px!important;
  }
  .section-header::before{
    background-image:var(--mw-diamond),linear-gradient(90deg,transparent,var(--gold-600))!important;
    background-position:right center,left center!important;
  }
  .section-header::after{
    background-image:var(--mw-diamond),linear-gradient(90deg,var(--gold-600),transparent)!important;
    background-position:left center,right center!important;
  }
}

/* ============================================================
   16. SHINY GOLD GRADIENT BORDER (static)
   ------------------------------------------------------------
   ขอบทองเงาวาวแบบโลหะขัด (ทอง↔ทองขาว, --grad-gold-sheen)
   แบบ "นิ่ง" — ไม่มี animation จึงไม่เด่นเท่าเมนูหลัก
   (.main-services-container ที่ขอบวิ่ง+เรืองแสง)
   ใช้กับ:
     • เมนูลัด (.menu-service-container)  → ขอบครบ 4 ด้าน
     • การ์ดผลหวย (.card-table)           → ขอบ ซ้าย/ขวา/ล่าง (เปิดบน เพราะ header pill ลอยทับ)
     • header pill (.card-table-header)   → ขอบทองเงารอบ pill (ตามที่ผู้ใช้ขอ)
   ★ ใช้ pseudo mask วาดขอบ gradient ให้โค้งมนตามการ์ด (static, ไม่มี animation)
   ============================================================ */
.menu-service-container{position:relative;border-color:var(--border-gold-strong)!important}
.menu-service-container::after{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1.2px;
  background:var(--grad-gold-sheen);   /* ทอง↔ทองขาว เงาวาวเหมือนโลหะขัด */
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  pointer-events:none;opacity:1;
}

/* ── การ์ดผลหวย: ขอบทองเงาเหมือนเมนูลัด แต่ "เปิดบน" → เหลือ ซ้าย/ขวา/ล่าง ── */
.card-table{position:relative;border-color:var(--border-gold-strong)!important;border-top-color:transparent!important}
.card-table::after{
  content:"";position:absolute;inset:0;border-radius:inherit;
  background:var(--grad-gold-sheen);
  /* layer1 = ช่องในชนขอบบน (inset ซ้าย/ขวา/ล่าง 1.2px) , layer2 = เต็มกล่อง
     exclude → เหลือกรอบเฉพาะ ซ้าย/ขวา/ล่าง (บนเปิด) */
  -webkit-mask:
    linear-gradient(#000,#000) top center/calc(100% - 2.4px) calc(100% - 1.2px) no-repeat,
    linear-gradient(#000,#000) no-repeat;
          mask:
    linear-gradient(#000,#000) top center/calc(100% - 2.4px) calc(100% - 1.2px) no-repeat,
    linear-gradient(#000,#000) no-repeat;
  -webkit-mask-composite:xor;mask-composite:exclude;
  pointer-events:none;opacity:1;
}

/* ── header pill ของการ์ดผลหวย: ขอบทองเงารอบ pill (ครบ 4 ด้าน) ── */
.card-table .card-table-header{position:absolute}
.card-table .card-table-header::after{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1.2px;
  background:var(--grad-gold-sheen);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  pointer-events:none;
}

/* ============================================================
   17. ปุ่ม ฝากเครดิต / ถอนเครดิต  (.btn-deposit / .btn-withdraw)
   ------------------------------------------------------------
   ปรับให้ตรงตามรูปอ้างอิง:
     • ฝาก = ทองเงาวาวเต็มใบ + ตัวอักษรเข้ม
     • ถอน = ดำ + ขอบทอง gradient เงา + ตัวอักษรทอง
   ★ สำรองไฟล์ต้นฉบับไว้ที่  designsystem2026/mw2026.css.bak  (revert ได้)
   ─ ค่าเดิม (production) อ้างอิงเผื่อ revert เฉพาะปุ่ม:
       a.btn-deposit  { background-color:var(--spanish-yellow); border:1px solid var(--spanish-yellow) }
       a.btn-withdraw { background-color:var(--vampire-black); border:1px solid var(--deep-lemeon); color:var(--spanish-yellow) }
   ============================================================ */

/* ── ฝากเครดิต: ทองเงาวาวเต็มใบ ── */
body.theme-default.page-home a.btn-deposit,
.btn-deposit{
  background:var(--grad-gold)!important;     /* ทองไล่เฉดมีไฮไลต์เงา */
  border-color:var(--gold-400)!important;
  color:var(--on-gold)!important;
}

/* ── ถอนเครดิต: ดำ + ขอบทอง gradient เงา + ตัวอักษรทอง ── */
body.theme-default.page-home a.btn-withdraw,
.btn-withdraw{
  position:relative;
  background:var(--bg-base)!important;
  border-color:transparent!important;        /* ซ่อนขอบแบน → ใช้ pseudo gradient */
  color:var(--gold-300)!important;
}
.btn-withdraw::after{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1.6px;
  background:var(--grad-gold-sheen);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  pointer-events:none;
}

/* ============================================================
   18. แท็บผลหวย  (.nav-list__item ใน ul.tab__nav_list_wrapper)
   ------------------------------------------------------------
   ปรับให้ตรงตามรูป:
     • แท็บ active (.list_current) = pill ดำ + ขอบทอง gradient เงา + ตัวอักษรครีมทอง
     • แท็บอื่น = ตัวอักษรครีมทอง (เดิม #fff)
   ★ สำรอง: mw2026.css.bak | revert = ลบ Section นี้ → กลับต้นฉบับอัตโนมัติ
   ─ ค่าเดิม (production) เผื่อ revert:
       li.list_current { background-color:#26333B }   (เหลี่ยม ไม่มีขอบ)
       li > a          { color:#fff }
   ============================================================ */

/* ตัวอักษรทุกแท็บ → ครีมทอง */
ul.tab__nav_list_wrapper > li.nav-list__item > a{color:var(--gold-100)!important}

/* แท็บ active → pill ดำ + ขอบทอง gradient เงา */
ul.tab__nav_list_wrapper > li.nav-list__item.list_current{
  position:relative;
  /* แสงในพื้น (inner glow) ทองจาง ๆ ส่องจากกลาง pill บนพื้นดำ */
  background:radial-gradient(120% 150% at 50% 50%,rgba(239,191,59,.22),transparent 68%),var(--surface-1)!important;
  border-radius:var(--r-pill);          /* ทำเป็น pill ตามรูป */
  box-shadow:0 0 16px 1px rgba(239,191,59,.45)!important;   /* halo เรืองทองรอบนอก */
}
ul.tab__nav_list_wrapper > li.nav-list__item.list_current > a{color:var(--gold-100)!important}
ul.tab__nav_list_wrapper > li.nav-list__item.list_current::after{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1.4px;
  background:var(--grad-gold-sheen);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  pointer-events:none;
}
/* ปุ่มลูกศรเลื่อนแท็บ (#tab__nav-left / #tab__nav-right) เป็น inline <svg> path fill="white"
   → ทอง (เข้าธีม) ; fill เป็น presentation attribute CSS ชนะได้ ; DOM เดียวทุกจอ → คุมครบ
   mobile/tablet/desktop ในกฎเดียว (id ซ้ำหลายหน้า CSS #id จับทุกตัว → เปลี่ยนพร้อมกันทุกหน้า) */
#tab__nav-left svg path,
#tab__nav-right svg path{fill:var(--gold-400)!important}

/* ============================================================
   19. FIXED GRADIENT BACKGROUND  (parallax illusion)
   ------------------------------------------------------------
   เลเยอร์ gradient หรู (mesh ทอง + ไวน์ + ไล่ดำ) ตรึงนิ่งกับ viewport
   ด้วย position:fixed → content เลื่อนทับ = ฟีล parallax เนียน
   ทุกเบราว์เซอร์รวม iOS (ไม่พึ่ง background-attachment:fixed)
   ★ ไม่มี animation | คุมโทน: ดำเป็นหลัก ทอง/ไวน์แต้มบาง (alpha ต่ำ)
   ============================================================ */
body::before{
  content:"";
  position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(900px 480px at 78% -6%, rgba(239,191,59,.16), transparent 60%),  /* glow ทองมุมบนขวา */
    radial-gradient(720px 440px at 6% 4%,  rgba(142,34,48,.10), transparent 62%),     /* ไวน์มุมบนซ้าย */
    radial-gradient(680px 620px at 50% 112%, rgba(239,191,59,.07), transparent 60%),  /* ทองจางขอบล่าง */
    linear-gradient(180deg,#15120d 0%, #0B0A09 58%, #0B0A09 100%);                    /* ไล่ดำอุ่น→ดำสนิท */
}

/* ============================================================
   20. SEO TEXT BLOCK (เฉพาะหน้า landing)
   ------------------------------------------------------------
   หัวข้อ SEO เป็น h2/h3 ที่ "ไม่มี class" (ต่างจากหัวข้ออื่นที่เป็น
   .section-title) → จับด้วย :not([class]) ได้แม่น
   • หัวข้อ → ตัวอักษรทอง gradient (goldtext)
   • ย่อหน้า → สีเทาอ่อน muted
   สกอปเฉพาะหน้า landing ด้วย :has(marquee)
   ============================================================ */
/* ย่อหน้าในเซกชัน SEO → muted (หัวข้อจะถูก override เป็นทองด้านล่าง) */
body:has(marquee) section:has(h2:not([class])) .col-12.text-center{color:var(--ink-300)!important}
/* หัวข้อ SEO → ตัวอักษรทองไล่เฉด */
body:has(marquee) h2:not([class]),
body:has(marquee) h3:not([class]){
  background:var(--grad-gold-text)!important;
  -webkit-background-clip:text!important;background-clip:text!important;
  -webkit-text-fill-color:transparent!important;color:transparent!important;
}

/* ============================================================
   21. ปุ่ม ลงทะเบียน / เข้าสู่ระบบ  (หน้า landing pre-login)
   ------------------------------------------------------------
   จับด้วย href (register/login) → มีเฉพาะหน้า landing
   • ลงทะเบียน = ทองเงาวาว metallic + เรืองทอง (CTA หลัก)
   • เข้าสู่ระบบ = ดำ + ขอบทอง gradient เงา + ตัวอักษรทอง (ตัดกันหรู)
   ============================================================ */
/* ลงทะเบียนสมาชิก — ทองอุ่นเข้ม signature (เดียวกับปุ่มฝากเครดิต home) */
a.btn-primary[href*="register"]{
  background:var(--grad-gold)!important;              /* ทองอุ่นรวยเข้ม ไล่เฉดมีไฮไลต์ */
  border-color:var(--gold-400)!important;
  color:var(--on-gold)!important;
  box-shadow:0 6px 20px rgba(239,191,59,.38),inset 0 1px 0 rgba(255,255,255,.45)!important;
}
/* เข้าสู่ระบบ */
a.btn-secondary[href*="login"]{
  position:relative;
  background:var(--bg-base)!important;
  border-color:transparent!important;
  color:var(--gold-300)!important;
}
a.btn-secondary[href*="login"]::after{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1.6px;
  background:var(--grad-gold-sheen);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  pointer-events:none;
}

/* ============================================================
   22. FONT CONSISTENCY (หน้าที่ไม่โหลด custom-theme-default.css)
   ------------------------------------------------------------
   หน้า body ไม่มี class = landing + auth (login/register/forgot) — 4 หน้านี้
   ไม่โหลด custom-theme-default.css → ฟอนต์ตกเป็น Sarabun ขณะที่หน้าสมาชิก
   (body.theme-default.page-home) เป็น Anuphan → set ที่ body ให้ตรงกันทั้งเว็บ
   anchor: body:not([class]) ตรงกับ 4 หน้านี้พอดี (หน้าอื่นมี class เสมอ)
   set แค่ body → ลูกหลาน inherit เอง ; .number ยังเป็น Roboto Mono (กฎตัวเองชนะ),
   ไอคอน Font Awesome ไม่โดน (มี font-family ของตัวเอง)
   ============================================================ */
body:not([class]){font-family:'Anuphan',sans-serif!important}

/* ============================================================
   23. SCROLLBAR THEME  (เฉพาะอุปกรณ์ที่ใช้เมาส์)
   ------------------------------------------------------------
   • scope ด้วย @media (pointer:fine) → โทรศัพท์/แท็บเล็ตจอสัมผัส
     จะไม่โดน คง overlay scrollbar เดิมไว้ (ไม่เสี่ยงพัง)
   • เบราว์เซอร์เก่าที่ไม่รองรับ → ข้ามไปเฉย ๆ แสดง scrollbar ปกติ
   • style เฉพาะ scrollbar ของ "หน้าเพจ" (html) ไม่แตะ scroller ภายใน
     (เช่น แท็บเลื่อนที่ตั้ง scrollbar ซ่อนไว้)
   ============================================================ */
@media (pointer:fine){
  /* WebKit / Blink (Chrome, Safari, Edge) */
  html::-webkit-scrollbar{width:12px;height:12px}
  html::-webkit-scrollbar-track{background:var(--bg-elev-0)}
  html::-webkit-scrollbar-thumb{
    background:var(--grad-gold-soft);
    border-radius:10px;
    border:3px solid var(--bg-elev-0);   /* เว้นขอบให้ thumb ดูลอย */
  }
  html::-webkit-scrollbar-thumb:hover{background:var(--grad-gold)}
  html::-webkit-scrollbar-corner{background:var(--bg-elev-0)}
  /* Firefox */
  html{scrollbar-width:thin;scrollbar-color:var(--gold-600) var(--bg-elev-0)}
}

/* ============================================================
   24. CASINO LOBBY — การ์ดเด่นบนสุด  (.col-12 > .casino-item)
   ------------------------------------------------------------
   จับการ์ด featured เต็มแถว (parent = col-12) = การ์ดบนสุด
   (การ์ดอื่นอยู่ใน col-6) → ขอบทอง gradient เงา
   ★ สำรองไฟล์ไว้ที่ mw2026.css.bak
   ============================================================ */
.col-12 > .casino-item{position:relative}
.col-12 > .casino-item::after{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:2px;
  background:var(--grad-gold-sheen);background-size:220% 100%;   /* เหมือน main-services hero */
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  pointer-events:none;animation:borderShine 4s linear infinite;   /* ขอบทองวิ่งวน (keyframe มีอยู่แล้ว Section 14) */
}
@media (prefers-reduced-motion:reduce){
  .col-12 > .casino-item::after{animation:none!important}
}

/* ============================================================
   25. GAME LOBBY — #carouselBanner ขอบทองวิ่ง
   ------------------------------------------------------------
   สกอปด้วย body:has(.list-game-items) = หน้าที่มี grid เกม (slot ฯลฯ)
   → home/landing ที่มี #carouselBanner เหมือนกันจะไม่โดน
   • โค้งมุม + clip ภาพให้โค้งตาม (banner เดิม radius 0)
   • ขอบ --grad-gold-sheen + borderShine (เหมือน main-services / casino card)
   ============================================================ */
body:has(.list-game-items) #carouselBanner{position:relative;border-radius:14px;overflow:hidden}
body:has(.list-game-items) #carouselBanner::after{
  content:"";position:absolute;inset:0;border-radius:14px;padding:2px;
  background:var(--grad-gold-sheen);background-size:220% 100%;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  pointer-events:none;z-index:5;animation:borderShine 4s linear infinite;
}
@media (prefers-reduced-motion:reduce){
  body:has(.list-game-items) #carouselBanner::after{animation:none!important}
}
/* carousel indicators (จุดเลื่อน): active = ทอง, ที่เหลือ = ทองจาง — สกอปเฉพาะ slot */
body:has(.list-game-items) #carouselBanner .carousel-indicators li{background-color:rgba(239,191,59,.35)!important}
body:has(.list-game-items) #carouselBanner .carousel-indicators li.active{background-color:var(--gold-500)!important}
/* carousel indicators ทั่วไป (hero banner หน้า home/landing) เดิมขาวหลุดธีม → ทอง (ชุดสีเดียวกับ slot) */
.carousel-indicators li{background-color:rgba(239,191,59,.35)!important}
.carousel-indicators li.active{background-color:var(--gold-500)!important}
/* ลูกศร prev/next ของ carousel (.carousel-control-*-icon) เดิม Bootstrap ฝัง fill='%23fff' (ขาว) ใน
   background-image data-URI → เขียนทับด้วย data-URI เดิม เปลี่ยนเป็นทอง %23F2C744 (gold-400)
   color-only ผ่าน background-image, ไม่แตะ HTML, คุมทุกจอ/ทุกหน้า (home/landing/slot-landing) */
.carousel-control-prev-icon{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23F2C744' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath d='M5.25 0l-4 4 4 4 1.5-1.5L4.25 4l2.5-2.5L5.25 0z'/%3e%3c/svg%3e")!important}
.carousel-control-next-icon{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23F2C744' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath d='M2.75 0l-1.5 1.5L3.75 4l-2.5 2.5L2.75 8l4-4-4-4z'/%3e%3c/svg%3e")!important}

/* ============================================================
   26. GAME CONTROL TABS  (.list-game-control-item — slot/game-grid)
   ------------------------------------------------------------
   • active: เดิมตัวอักษรขาวบนทอง = จม → ตัวอักษรเข้ม on-gold + พื้น grad-gold
   • inactive: เดิมน้ำเงินเทาตาย → ดำธีม + ขอบทอง + ตัวอักษรทอง (ชวนกด)
   ============================================================ */
.list-game-control-item.active{
  background:var(--grad-gold)!important;
  color:var(--on-gold)!important;
}
.list-game-control-item:not(.active){
  background:var(--surface-2)!important;
  color:var(--gold-200)!important;
  box-shadow:inset 0 0 0 1px var(--border-gold)!important;   /* ขอบทองไม่ทำให้ขนาดเพี้ยน */
}
/* ตัวอักษรอยู่ใน <a> ซึ่งโดนกฎ global a{color:gold-400} ทับ → ต้องยิงที่ <a> ตรง ๆ ครบทุก state */
.list-game-control-item.active a,
.list-game-control-item.active a:hover,
.list-game-control-item.active a:focus,
.list-game-control-item.active a:active{color:var(--on-gold)!important}        /* เข้มบนพื้นทอง (ไม่จม) */
.list-game-control-item:not(.active) a{color:var(--gold-200)!important}          /* ทองบนพื้นดำ */
.list-game-control-item:not(.active) a:hover,
.list-game-control-item:not(.active) a:focus{color:var(--gold-100)!important}    /* hover สว่างขึ้น */

/* ============================================================
   27. LOTTO DASHBOARD — แผงแทงหวย (.btn-panghuay ฯลฯ)
   ------------------------------------------------------------
   .btn-panghuay ถูกใช้ซ้ำ 5 บทบาท (แท็บ/ช่องเลข/ปุ่ม/input) ด้วยสไตล์
   ขาว-เทาน้ำเงินเดียวกัน → จัดใหม่ตามแนว designsystem (segmented/.inp/chip)
   ============================================================ */

/* ── แท็บประเภท / ช่องเลข / ปุ่มเลข (ไม่รวม input) ──
   inactive = ดำ + ทอง + ขอบทอง  |  active = ทอง + ตัวอักษรเข้ม */

  .btn-panghuay:not(.form-control).exceed_limit, 
  .btn-panghuay:not(.form-control).exceed_limit.active{
    color: #fff !important;
    background-image: linear-gradient(#ff5f0f, #db4900)!important;
    border-color: #db4900 #db4900 hsl(20, 100%, 40.5%)!important;
  }

.btn-panghuay:not(.form-control){
  /* ดำเคลือบมัน: ผิวไล่เฉด (บนสว่าง-ล่างเข้ม) + ประกายแสงทองที่มุมขวาบน */
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(255,235,180,.16), transparent 55%),
    linear-gradient(160deg, #2a2722 0%, #1a1815 55%, #141210 100%)!important;
  color:var(--gold-200)!important;
  /* ขอบทอง = รีคัลเลอร์ border 1px ของจริง (เดิม #e7eaec/#FFF หลุดธีม) ไม่แตะความหนา */
  border-color:var(--border-gold)!important;
  /* เงาแบบกระจก: ไฮไลต์ขอบบน + ประกายมุมขวาบน (สว่าง ทำให้ดูนูน-มันวาว) */
  box-shadow:
    inset 0 1px 0 rgba(255,240,200,.10),
    inset -10px 10px 20px -12px rgba(255,235,180,.30)!important;
}
/* ไฮไลต์ทองเฉพาะแท็บ/ปุ่มที่ active จริงเท่านั้น
   หมายเหตุ: ห้ามรวม .show — nav-link ของ pill ถูกเขียน markup เป็น "active show"
   และ Bootstrap จะลบเฉพาะ .active ตอนสลับแท็บ (ทิ้ง .show ค้างไว้)
   ถ้าไฮไลต์ .show ด้วย แท็บเดิม (เช่น สามตัว) จะค้างเหลือง ทั้งที่สลับไป สองตัว/เลขวิ่ง แล้ว */
.btn-panghuay:not(.form-control).active{
  background:var(--grad-gold)!important;
  color:var(--on-gold)!important;
  border-color:transparent!important;   /* active → ขอบหาย */
  box-shadow:none!important;             /* + ทิ้งเงามุม พื้นทองเกลี้ยง */
}

/* ── input จำนวนเงิน/อัตราจ่าย (แบบ .inp ของ designsystem) ── */
.form-control.btn-panghuay{
  background:var(--surface-2)!important;background-image:none!important;
  color:var(--ink-50)!important;
  box-shadow:inset 0 0 0 1px var(--border-default)!important;
}
.form-control.btn-panghuay:focus{box-shadow:inset 0 0 0 1.5px var(--gold-500)!important}
/* input อัตราจ่ายในกล่อง .btn-type2 (กฎเดิม .btn-type2 .input-group .form-control{#fff} specificity สูง) */
.btn-type2 .input-group .form-control{
  background:var(--surface-2)!important;color:var(--ink-50)!important;
  box-shadow:inset 0 0 0 1px var(--border-default)!important;
}
/* affix boxes (input-group-append/text) เดิมขาว/เทาอ่อน → ดำธีม + ตัวอักษรทอง */
.input-group-append{background-color:var(--surface-2)!important}
/* ขอบ append + ปุ่มค้นหา (#button-addon2 = .btn-outline-secondary) เดิมเทาอ่อน/ขาว
   → ใช้สีเดียวกับขอบ input ที่ติดกัน (--border-default) ให้เป็นกรอบควบคุมเดียวต่อเนื่อง */
.input-group-append,
.input-group-append .btn,
#button-addon2{border-color:var(--border-default)!important}
.btn-type2 .input-group-append,
.btn-type2 .input-group-append .input-group-text,
.row-stake .input-group-text{background-color:var(--surface-3)!important;color:var(--gold-300)!important;border-color:var(--border-default)!important}
/* กัน hover ของ .btn-panghuay ที่เดิมแฟลชขาว (#fafaf5) → hover เป็นดำสว่างขึ้น */
/* hover = เร่งประกายให้สว่างขึ้น (ดูน่ากด) คงผิวมันวาวไว้ */
.btn-panghuay:not(.form-control):hover{
  /* background:
    radial-gradient(120% 90% at 100% 0%, rgba(255,235,180,.26), transparent 55%),
    linear-gradient(160deg, #34302a 0%, #211e19 55%, #1a1714 100%)!important;
  color:var(--gold-100)!important;border-color:var(--border-gold)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,240,200,.14),
    inset -10px 10px 22px -12px rgba(255,235,180,.42)!important; */
}
/* ปุ่ม/แท็บที่เลือกอยู่ (active) ต้องคงพื้นทองไว้ตอน hover — ไม่ให้กลายเป็นดำ */
.btn-panghuay:not(.form-control).active:hover{
  background:var(--grad-gold)!important;
  color:var(--on-gold)!important;
  border-color:transparent!important;
  box-shadow:none!important;
}
.row-btn-tanghuay .input-group:hover{background:transparent!important}

/* ── ป้ายกำกับ/ตัวเลขในแผง ที่เดิมเป็นสีเข้มจมบนพื้นดำ ── */
.btn-type2,.row-btn-tanghuay,.btn-group-toggle{color:var(--ink-100)!important}

/* ── ชิปจำนวนเงินเดิมพัน (10฿/20฿…) เดิมตัวอักษรดำมองไม่เห็น ── */
.btn-bet{background:var(--surface-2)!important;color:var(--gold-200)!important;box-shadow:inset 0 0 0 1px var(--border-gold)!important}
.btn-bet.active,.btn-bet.selected,.btn-bet:active{background:var(--grad-gold-soft)!important;color:var(--on-gold)!important;box-shadow:none!important}

/* ── ปุ่มเลื่อนขึ้น-ลง (เดิมเหลืองอำพัน #FFC107) ── */
.scroll-bottom,.scroll-top{background:var(--gold-500)!important;color:var(--on-gold)!important}

/* ── ปุ่ม outline-secondary (เดิมเทาจาง) → ขอบทอง + ตัวอักษรทอง ── */
.btn-outline-secondary{color:var(--gold-300)!important;box-shadow:inset 0 0 0 1px var(--border-gold)!important}

/* ============================================================
   28. LOTTO DASHBOARD — ACTIVE STATES + ปุ่มที่เหลือ
   ------------------------------------------------------------
   active/selected เดิมเป็น teal #338aa7 (.activation/.activation2)
   + กล่อง info น้ำเงิน + ปุ่มนำทางสีซ้ำปุ่ม submit + โพยขวาเทาอ่อน
   ============================================================ */

/* selected/active (teal → ทอง) : toggle, ช่องเลข */
.btn-panghuay.activation2,
.btn-panghuay.active{
  background:var(--grad-gold)!important;background-image:var(--grad-gold)!important;
  color:var(--on-gold)!important;border-color:var(--gold-600)!important;text-shadow:none!important;
}
/* pill เลือกประเภท (input value="สามตัวบน/โต๊ด") active — แยกสีตามคอลัมน์ (คนละหน้าที่ สำคัญเท่ากัน):
   คอลัมน์ซ้าย "บน" = ทอง  |  คอลัมน์ขวา "โต๊ด/ล่าง" = แพลทินัม(เงิน) */
.btn-type2 .input-group .form-control.activation2{
  background:var(--grad-gold)!important;background-image:var(--grad-gold)!important;color:var(--on-gold)!important;
}
.btn-type2 > .col-6:last-child .form-control.activation2,
.btn-type2 > [class*="col-"]:nth-child(2) .form-control.activation2{
  background:var(--grad-platinum)!important;background-image:var(--grad-platinum)!important;color:var(--ink-900)!important;
}

/* ปุ่มเลือกประเภทเดิมพัน (active) — แยกสีตามหน้าที่ในแต่ละคู่ (สำคัญเท่ากัน คนละสี):
   "บน" (id ลงท้าย _top) = ทอง  |  "โต๊ด/ล่าง" (_tod/_under) = แพลทินัม(เงิน) */
[id$="_top"].activation,[id$="_top"].active,[id$="_top"].activation2,
[id*="shuffle_"].activation,[id*="shuffle_"].active,[id*="shuffle_"].activation2,
[id$="_under"].activation,[id$="_under"].active,[id$="_under"].activation2,
[id$="_back"].activation,[id$="_back"].active,[id$="_back"].activation2,
[id$="_front"].activation,[id$="_front"].active,[id$="_front"].activation2,
[id$="19"].activation,[id$="19"].active,[id$="19"].activation2,
[id$="_tod"].activation,[id$="_tod"].active,[id$="_tod"].activation2{
  background:var(--grad-gold)!important;background-image:var(--grad-gold)!important;
  color:var(--on-gold)!important;border-color:var(--gold-600)!important;text-shadow:none!important;
}

/* .btn-info (cyan ของ bootstrap) → secondary ดำ + ขอบทอง */
.btn-info{
  background:var(--surface-2)!important;background-image:none!important;border-color:transparent!important;
  color:var(--gold-200)!important;box-shadow:inset 0 0 0 1px var(--border-gold)!important;
}

/* ปุ่มนำทางรอบ — แยกสีตามหน้าที่:
   • รอบก่อนหน้า (.fa-left) = รอง → ดำ + ขอบทอง (subtle)
   • รอบถัดไป   (.fa-right) = สำคัญกว่า → ทองเต็มใบ (เด่น) */
a.btn.btn-primary[href*="yeekee"]{
  background:var(--surface-2)!important;background-image:none!important;
  color:var(--gold-300)!important;box-shadow:inset 0 0 0 1px var(--border-gold)!important;
}
a.btn.btn-primary[href*="yeekee"]:has(.fa-right){
  background:var(--grad-gold)!important;background-image:var(--grad-gold)!important;
  color:var(--on-gold)!important;box-shadow:none!important;
}

/* การ์ดเนื้อหาหวย (.lotto_content_page .card) เดิม color #2b2b2b (ออกแบบเพื่อการ์ดสีอ่อน)
   → พื้นการ์ดเป็นดำในธีมเรา ข้อความที่ inherit เลยจม → ตั้งสีพื้นฐานอ่านง่าย
   (พิล/ปุ่ม/ค่าที่มี color ของตัวเองไม่กระทบ) */
.lotto_content_page .card{color:var(--ink-100)!important}

/* โพยขวา (bet slip): .stake-number เดิมเทาอ่อน #e0e0e0 + ตัวอักษรเข้ม → ดำ + ทอง */
.stake-number,.row-stake .stake-number{background-color:var(--surface-3)!important}
/* ขอบกล่องในแถวโพยเดิม #e0e0e0 (ขาวหลุดธีม) → เส้นธีม (ใช้ specificity ให้ชนะ .row-stake .input-group-prepend .stake-number) */
.row-stake .input-group-prepend .stake-number,
.row-stake .input-group .form-control,
.row-stake .input-group-text,
.stake-value-input{border-color:var(--border-default)!important}
.stake-number,.row-stake .stake-number,
.row-stake .input-group-prepend .stake-number{color:var(--gold-200)!important}
.row-stake .input-group-text{background-color:var(--surface-3)!important;color:var(--gold-300)!important;border-color:var(--border-default)!important}
/* ช่องจำนวนเงินในแถวโพย (.stake-value-input) → ดำ + ตัวอักษรอ่านง่าย */
.stake-value-input,.form-control.stake-value-input{
  background:var(--surface-2)!important;color:var(--gold-100)!important;
  box-shadow:inset 0 0 0 1px var(--border-default)!important;
}
.stake-value-input::placeholder{color:var(--ink-400)!important}
/* ป้าย "ชนะ 900" */
.row-stake .rate-value{color:var(--gold-300)!important}
/* pill อัตราจ่าย "900฿" เดิมเป็น badge-light (เทาอ่อน) → ทองจางเข้าธีม */
.badge.badge-light.rate-pay{
  background:var(--surface-gold-tint)!important;color:var(--gold-200)!important;
  box-shadow:inset 0 0 0 1px var(--border-gold)!important;
}
/* ปุ่มลบ (เดิม btn-danger แดงทึบ salmon หลุดธีม) → ดำ + ขอบ/ไอคอนแดง (refined) */
.btn-stake-remove,.btn-danger.btn-stake-remove{
  background:var(--surface-2)!important;background-image:none!important;
  color:var(--danger)!important;border-color:transparent!important;
  box-shadow:inset 0 0 0 1.5px var(--danger-border)!important;
}
.btn-stake-remove:hover{background:var(--danger-soft)!important}

/* ============================================================
   29. LOTTO DASHBOARD — เก็บตกเพิ่มเติม
   ============================================================ */
/* แป้นตัวเลข "กดเลขเอง" (.btn-play) เดิมโปร่ง + ขอบเทา #e7eaec + ตัวอักษรเข้ม #212529 → จม
   → ดำ + ขอบทอง + ตัวอักษรทอง , active = ทอง */
.btn-play{
  background-color:var(--surface-2)!important;background-image:none!important;
  color:var(--gold-200)!important;border-color:var(--border-gold)!important;
}
.btn-play.active,.btn-play.activation,.btn-play:active{
  background:var(--grad-gold)!important;color:var(--on-gold)!important;border-color:var(--gold-600)!important;
}
/* notification badge "ใหม่" — เดิมตัวอักษร/ขอบเทาบนพื้นแดง → ขาวอ่านชัด */
.notification-badge{color:#fff!important;border-color:transparent!important}

/* กล่องนับถอยหลัง "ระยะเวลารับแทงคงเหลือ" (.alert.text-center ที่มี .running-time)
   inline bg #161A26 (น้ำเงินเทาหลุดธีม) → พื้นผิวดำ + ขอบทองจาง (เน้นเป็นแผงเวลาสำคัญ)
   ตัวหนังสือทอง (#E8BD70) + ตัวเลขขาว ใน inline คงไว้ — แค่เปลี่ยนพื้น */
.alert.text-center:has(.running-time){
  background-color:var(--surface-2)!important;background-image:none!important;
  box-shadow:inset 0 0 0 1px var(--border-gold)!important;
}

/* ============================================================
   30. FGF (AFFILIATE) — เก็บตก
   ------------------------------------------------------------
   แท็บเลือกชนิดแนะนำเพื่อน + เส้นคั่นใต้แท็บ + badge ประเภทเกมในตารางรายได้
   ============================================================ */
/* แท็บที่ไม่ได้เลือก (.btn-choose-affiliate.btn-dark) เดิม #343a40 (เทาน้ำเงินหลุดธีม)
   → พื้นผิวการ์ดดำ + ขอบทองจาง ดูเป็นแท็บพักไว้ ตัดกับแท็บ active (btn-primary) สีทอง */
.btn-choose-affiliate.btn-dark{
  background:var(--surface-2)!important;background-image:none!important;
  color:var(--gold-200)!important;border-color:var(--border-gold)!important;
}
/* เส้นคั่นใต้แถวแท็บ (.choose-affiliate-wrapper) เดิม border-bottom #343a40 → เส้นธีมจาง */
.choose-affiliate-wrapper{border-bottom-color:var(--border-default)!important}
/* badge ประเภทเกมในตารางค่าแนะนำ (มี inline background-color ประจำหมวด: #FAB10C/#FF5C78/#29CEED...)
   global .badge-light ทับเป็น platinum ขาวอยู่แล้ว → ปรับเป็นทองจาง subtle (uniform) เข้าธีม
   ใช้ [style*="background-color"] เจาะเฉพาะ badge หมวดเกม (specificity 0,3,0 ชนะ .badge.badge-light) */
.badge.badge-light[style*="background-color"]{
  background:var(--surface-gold-tint)!important;color:var(--gold-200)!important;
  box-shadow:inset 0 0 0 1px var(--border-gold)!important;
}
.badge.badge-light[style*="background-color"] strong{color:var(--gold-200)!important}
/* กล่องลิงก์แนะนำเพื่อน (textarea#afLink) inline bg #1f2630 (น้ำเงินเทาหลุดธีม)
   → พื้นผิวดำ + ตัวอักษรทองอ่อน + ขอบทองจางด้วย inset box-shadow
   (border inline = 0px คงไว้ ไม่แตะ layout; box-shadow เป็น color-bearing) */
#afLink{
  background-color:var(--surface-2)!important;
  color:var(--gold-100)!important;
  box-shadow:inset 0 0 0 1px var(--border-gold)!important;
}

/* ============================================================
   31. jCONFIRM (jquery-confirm) — กล่อง dialog ยืนยัน
   ------------------------------------------------------------
   กล่องเดิมพื้น #1E2329 + แถบบน/ไอคอน #34495e (น้ำเงินหลุดธีม + แถบ pulse)
   → ดำธีม + หัวข้อ/แถบ/ไอคอนทอง ; ปุ่ม 2 ปุ่มแยกโทนตามหน้าที่:
   "ยืนยัน" = ทองเต็มใบ (action หลัก, ใช้กฎ .jconfirm-buttons .btn-primary เดิม)
   "ยกเลิก" = ดำ ghost ขอบทอง (รอง) — scope ใน .jconfirm-buttons เท่านั้น
   จึงไม่กระทบ .btn-secondary ที่อื่น (เช่นปุ่ม login หน้า landing)
   ============================================================ */
/* พื้นกล่อง + ตัวอักษรเนื้อหา (เดิม #1E2329 / ขาว) */
.jconfirm .jconfirm-box{background-color:var(--surface-2)!important;color:var(--ink-100)!important}
.jconfirm .jconfirm-box .jconfirm-title{color:var(--gold-200)!important}
.jconfirm .jconfirm-box .jconfirm-content{color:var(--ink-100)!important}
/* แถบบน (type-dark) + ไอคอน #34495e → ทอง ; หยุด pulse น้ำเงิน
   (:not(.hilight) เพื่อคง shake feedback ตอนกล่องสั่นไว้) */
.jconfirm .jconfirm-box.jconfirm-type-dark{border-top-color:var(--gold-500)!important}
.jconfirm .jconfirm-box.jconfirm-type-dark:not(.hilight){animation-name:none!important}
.jconfirm .jconfirm-box.jconfirm-type-dark .jconfirm-title-c .jconfirm-icon-c{color:var(--gold-400)!important}
/* ปุ่ม "ยกเลิก" (รอง) → ดำ ghost ขอบทอง ตัดกับปุ่ม "ยืนยัน" ทองเต็มใบ (คนละหน้าที่ คนละโทน) */
.jconfirm-buttons .btn-secondary{
  background:var(--surface-3)!important;background-image:none!important;
  color:var(--gold-200)!important;border-color:transparent!important;
  box-shadow:inset 0 0 0 1px var(--border-gold)!important;
}
.jconfirm-buttons .btn-secondary:hover,
.jconfirm-buttons .btn-secondary:focus{background:var(--surface-2)!important;color:var(--gold-100)!important}

/* ============================================================
   32. LOTTO-LANDING — ปุ่มสถานะ "ปิดรับแทง" (.btn-lotto-closed)
   ------------------------------------------------------------
   inline <style> ในหน้ากำหนดปุ่มปิดรับ = #f8f9fa (ขาว) ตัวอักษรเข้ม → บล็อกขาวกลางธีมดำ
   ปุ่มเปิดรับ (.btn-lotto-open) เป็นทอง gradient อยู่แล้ว ไม่แตะ
   → ปิดรับ = ดำ muted + ตัวอักษรเทาอ่อน + ขอบจาง (ดู inactive ตัดกับปุ่มเปิดสีทอง)
   !important ชนะ inline <style> (ไม่มี !important) ได้แม้ลำดับมาทีหลัง */
.btn-lotto-closed{
  background-color:var(--surface-2)!important;background-image:none!important;
  color:var(--ink-300)!important;
  border-color:var(--border-default)!important;
  box-shadow:inset 0 0 0 1px var(--border-default)!important;
}
/* ปุ่มเปิดรับ (.btn-lotto-open) เดิม inline <style> = เหลือง Binance #F0B90B→#FCD535
   → ทองของธีม (--grad-gold) ให้เข้าชุดกับปุ่มอื่น ; !important ชนะ inline <style> */
.btn-lotto-open{
  background:var(--grad-gold)!important;background-image:var(--grad-gold)!important;
  border-color:var(--gold-400)!important;
  color:var(--on-gold)!important;
}

/* ============================================================
   33. LOTTO-LANDING — หัวข้อ .section-subtitle = Separator with Label
   ------------------------------------------------------------
   เดิม override เป็น ink-300 (เทาหม่น → ตัวอักษรจม) ; ปรับเป็นทอง + เส้นยื่นขวา
   (label ซ้าย + เส้นทอง gradient เต็มที่เหลือ — DS "Separator with Label" style 2)
   SCOPE เฉพาะ lotto-landing: :has(.btn-lotto-closed) = หน้าลิสต์หวย (ตัด make-lotto)
   + :not(:has(marquee)) = ตัด home ที่มีแถบข่าววิ่ง → เหลือ lotto-landing หน้าเดียว
   (verify: lotto-landing 6/6, home 0/6, make-lotto 0/1)
   non-color (flex/::after) — element ที่ผู้ใช้อนุมัติเฉพาะ, ไม่มี animation */
body:has(.btn-lotto-closed):not(:has(marquee)) .section-subtitle{
  display:flex!important;align-items:center;gap:12px;
  color:var(--gold-200)!important;
  font-weight:600!important;
}
body:has(.btn-lotto-closed):not(:has(marquee)) .section-subtitle::after{
  content:'';flex:1 1 auto;height:1px;
  background:linear-gradient(90deg,var(--gold-600),transparent);
}

/* ============================================================
   34. MAKE-LOTTO-NUMBER-LIST — badge นับจำนวน ".. ตัวเลข"
   ------------------------------------------------------------
   .badge-light มี inline style="background-color:#636d7c !important" (น้ำเงินเทา)
   inline !important = external stylesheet ชนะ background-color ไม่ได้
   → แก้ที่ background-IMAGE (inline ไม่ได้ล็อก) ทับด้วยทองจาง opaque ให้คลุม #636d7c
   ทอง-tint(7%) วางบน surface-3 ทึบ → ผลลัพธ์เข้าชุดกับ badge หมวดเกมหน้า fgf
   (ตัวอักษร/ขอบทองมาจากกฎ .badge.badge-light[style*="background-color"] Section 30 อยู่แล้ว) */
.badge.badge-light[style*="636d7c"]{
  background-image:linear-gradient(var(--surface-gold-tint),var(--surface-gold-tint)),
                   linear-gradient(var(--surface-3),var(--surface-3))!important;
}

/* ============================================================
   35. MAKE-LOTTO-NUMBER-LIST — modals เฉพาะหน้านี้
   ------------------------------------------------------------
   showNumberSetModal / deleteNumberSetModal = id มีแค่หน้านี้หน้าเดียว
   → scope ด้วย #id = page-specific อัตโนมัติ ไม่กระทบหน้าอื่น
   (.modal-content เป็น surface-2 จาก global Section 9 แล้ว ; .btn-danger = --danger จาก Section 3 แล้ว)
   เทียบ DS: panel→surface, secondary text→ink-300, heading→gold-200 */
/* กล่องตารางเลขชุด inline bg #29313e (น้ำเงิน) → surface-3 ยกระดับ + ขอบทองจาง (เก็บ radius เดิม)
   ใช้ border-gold (เด่นกว่า border-default) ให้กล่องแยกจากพื้น modal surface-2 ที่สีใกล้กัน */
#showNumberSetModal [style*="29313e"]{
  background-color:var(--surface-3)!important;
  box-shadow:inset 0 0 0 1px var(--border-gold)!important;
}
/* ── table #showData อ่านง่ายขึ้น (option C) : zebra + เส้นแบ่งทอง + ลำดับสีคอลัมน์ ──
   เดิมทุกแถว/คอลัมน์ขาวเหมือนกัน + เส้นแบ่ง white .11 จาง → ข้อมูลกลืนเป็นพืด */
/* zebra แถวคี่ (พื้นทองจาง 7%) ช่วยกวาดสายตาทีละแถว */
#showNumberSetModal #tableNumberList tr:nth-child(odd){background-color:var(--surface-gold-tint)!important}
/* เส้นแบ่งแถวเด่นขึ้น (white .11 → ทอง .20) */
#showNumberSetModal #tableNumberList td{border-top-color:rgba(239,191,59,.20)!important}
/* ลำดับความสำคัญคอลัมน์: "ประเภท" = รอง (ink-200) | "ตัวเลข" = ข้อมูลหลัก → ทองเด่น */
#showNumberSetModal #tableNumberList td[scope="row"]{color:var(--ink-200)!important}
#showNumberSetModal #tableNumberList td.number{color:var(--gold-200)!important}
/* ข้อความรอง inline #8493C1 (เทาน้ำเงิน) ใน 2 modal → ink-300 */
#showNumberSetModal [style*="8493C1"],
#deleteNumberSetModal [style*="8493C1"]{color:var(--ink-300)!important}
/* หัวข้อ/หัวตาราง inline #FFFFFF → ทอง (ตาม DS modal heading) */
#showNumberSetModal [style*="FFFFFF"]{color:var(--gold-200)!important}
/* pagination ปุ่มที่กดได้ (ไม่ disabled) → ไอคอนทอง ; disabled คงเทาหม่น */
#showNumberSetModal .pagination .page-item:not(.disabled) .page-link{color:var(--gold-300)!important}

/* ============================================================
   36. GLOBAL CLEANUP — secondary text น้ำเงิน-เทา (Binance) → ink-300
   ------------------------------------------------------------
   จากการสแกน computed ทุกหน้า: เหลือตัวการเดียว = สีตัวอักษรรอง inline โทนน้ำเงินเทา
   #8493C1 / #848E9C / #48526E / #8493B9 (หัวข้อ/label/subtitle) — หลุดธีมเหมือนกันทุกหน้า
   → recolor เป็น ink-300 (เทาอุ่นอ่านง่าย) ครอบทุกหน้า (สีเหล่านี้ off-theme เสมอ จึงทำรวมได้)
   พบใน: lotto-result, summary, deposit-withdraw, lotto-choose-number (+ ที่อื่นถ้ามี)
   ใช้ [style*="hex" i] (case-insensitive) จับเฉพาะ inline color attribute */
[style*="8493C1" i],
[style*="848E9C" i],
[style*="48526E" i],
[style*="8493B9" i]{color:var(--ink-300)!important}

/* ============================================================
   37. MOBILE LAYOUT 2 — .mobile-main-content (home only)
   ------------------------------------------------------------
   layout มือถือแบบที่ 2 (เปิดด้วยปุ่ม #mobile-mode-toggle / ลบคลาส mobile-mode-disabled)
   มี CSS เฉพาะ home_files/mobile-main-content.css (แก้ไม่ได้ → override ที่นี่)
   ทุกกฎขึ้นต้น .mobile-main-content = home เท่านั้น ไม่กระทบหน้าอื่น/Layout 1 ; color-only
   ============================================================ */
/* ขอบการ์ด/ปุ่ม #5b4839 (น้ำตาล) → ขอบทองธีม */
.mobile-main-content .mmc-featured-card,
.mobile-main-content .mmc-grid-card,
.mobile-main-content .mmc-rb7-preview-card,
.mobile-main-content .mmc-evenbet-card,
.mobile-main-content .mmc-evenbet-back-btn,
.mobile-main-content .custom-service-btn,
.mobile-main-content .custom-service-btn > a{border-color:var(--border-gold)!important}
/* ข้อความรอง #AEAEAE (เทา) → ink-300 */
.mobile-main-content .mmc-empty,
.mobile-main-content .mmc-evenbet-category-title,
.mobile-main-content .mmc-evenbet-dealer,
.mobile-main-content .mmc-evenbet-loading,
.mobile-main-content .mmc-load-more-text,
.mobile-main-content .mmc-rb7-preview-dealer{color:var(--ink-300)!important}
/* status badge "ปิดรับ" #48526E (น้ำเงิน) → ดำธีม + ตัวอักษรอ่านง่าย (badge "เปิดรับ" ทองคงเดิม) */
.mobile-main-content .mmc-status-badge.closed{background:var(--surface-3)!important;color:var(--ink-200)!important}
/* lotto tag ฟ้า gradient (#1D93D2→#38B0E3) → ทอง */
.mobile-main-content .mmc-lotto-tag{background:var(--grad-gold)!important;color:var(--on-gold)!important}
/* loading spinner track #2A363F → เส้นธีม (ขอบบนคงทอง) */
.mobile-main-content .mmc-loading-spinner{border-color:var(--border-default)!important;border-top-color:var(--gold-500)!important}
/* error text #ff6b6b → danger ของธีม */
.mobile-main-content .mmc-rb7-preview-error{color:var(--danger)!important}

/* ── .mmc-sidebar = MAIN NAVIGATION (เด่น) เทียบ .main-services-wrapper ฝั่ง desktop ──
   inactive: ขอบน้ำตาล→กรอบทองจาง + label เทา→อ่านง่าย (ink-200)
   active/hover: ขอบทองเต็ม + glow แรงขึ้น (label ทอง gradient ของไฟล์เดิมคงไว้)
   → กรอบทองทั้งแถบทำให้เมนูหลักเด่น + active แยกจาก inactive ชัด */
.mobile-main-content .mmc-menu-item{border-color:var(--border-gold)!important}
.mobile-main-content .mmc-menu-item .mmc-menu-label{color:var(--ink-200)!important}
/* พื้นเมนู: เดิมเป็นรูป menu-bg.png (มัว/น้ำตาล) → gradient อุ่น+เรืองทองแบบ .main-services-container ฝั่ง desktop
   ::before = พื้น hero (gold radial + ดำไล่เฉด) , ::after = เอา overlay มัวออก */
.mobile-main-content .mmc-menu-item::before{
  background-image:
    radial-gradient(120% 150% at 50% -12%,rgba(239,191,59,.20),transparent 55%),
    linear-gradient(180deg,#171410,#0d0c0a)!important;
}
/* ::after = เส้นทอง sheen วิ่งรอบกระเบื้อง (เหมือน .main-services-container::after ฝั่ง desktop)
   ใช้ borderShine + --grad-gold-sheen ที่มีอยู่แล้ว (gradient-border trick: padding + mask xor) */
.mobile-main-content .mmc-menu-item::after{
  background:var(--grad-gold-sheen)!important;
  background-size:220% 100%!important;
  padding:1.5px!important;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0)!important;
          mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0)!important;
  -webkit-mask-composite:xor!important;mask-composite:exclude!important;
  pointer-events:none!important;
  animation:borderShine 4s linear infinite!important;
}
.mobile-main-content .mmc-menu-item.active,
.mobile-main-content .mmc-menu-item:hover{
  border-color:var(--gold-500)!important;
  box-shadow:0 0 16px rgba(239,191,59,.45), inset 0 0 0 1px var(--gold-500)!important;
}
.mobile-main-content .mmc-menu-item.active::before,
.mobile-main-content .mmc-menu-item:hover::before{
  background-image:
    radial-gradient(120% 150% at 50% -12%,rgba(239,191,59,.34),transparent 58%),
    linear-gradient(180deg,#1d1810,#0d0c0a)!important;
}

/* ── FONT: เลย์เอาต์มือถือเดิมใช้ 'Noto Sans Thai'/'Prompt' (คนละตัวกับเว็บ + เมตริกไทยกว้าง → ล้น/เละ)
   → บังคับเป็น Anuphan (ฟอนต์จริงของทั้งเว็บ) ให้สม่ำเสมอและพอดีกล่อง ; scope .mobile-main-content (home) */
.mobile-main-content,
.mobile-main-content *{font-family:'Anuphan',sans-serif!important}
/* การ์ดผลหวย (.card-table.grid-prize ที่ฝังในคอลัมน์ mmc แคบ ~221px @ iPhone SE 375)
   header pill เป็น position:absolute (global บรรทัด 430) ลอยเป็นแท็บทองเหนือขอบบนแบบ desktop
   *** ก่อนหน้านี้เคยใส่ position:relative ทับ → header หลุดการลอย เพี้ยนต่าง desktop : เอาออกแล้ว ***
   เหลือแค่ลดฟอนต์ให้พอดีคอลัมน์แคบ (ชื่อปกติ 1 บรรทัดเหมือน desktop) + เผื่อ padding-top เล็กน้อย
   กันชื่อยาว "(ชุด)" ที่ wrap 2 บรรทัดชน body — ทุกกฎ scope .mobile-main-content (home <992px)
   desktop ซ่อน mobile-main-content / หน้า lotto-result ไม่มี .mobile-main-content → ไม่กระทบ */
.mobile-main-content .card-table{padding-top:36px!important}
.mobile-main-content .card-table-header .title,
.mobile-main-content .card-table-header .date{font-size:11px!important;line-height:1.25!important}
.mobile-main-content .card-table-title{font-size:12px!important}
.mobile-main-content .card-table [class*="prize-number"]{font-size:18px!important}

/* เคารพ prefers-reduced-motion: ปิดเส้น sheen วิ่งของกระเบื้องเมนู (คงเส้นทอง/สีไว้) */
@media (prefers-reduced-motion:reduce){
  .mobile-main-content .mmc-menu-item::after{animation:none!important}
}

/* ============================================================
   38. GLOBAL — ขอบโค้งนุ่มขึ้น (border-radius)
   ------------------------------------------------------------
   Owner: home/landing ดูเหลี่ยมไป → ให้นุ่มสบายตา (First Impression)
   ปุ่ม/อินพุต 4px (Bootstrap default) → --r-sm (10px) ; การ์ดเมนู 8px → --r-md (14px)
   radius เท่ากันทุก breakpoint → กฎเดียวคุม Desktop/Tablet/Mobile (ทั้งเว็บ)
   non-color (owner อนุมัติ) ; แถบเต็มจอ (navbar/tabbar/section) ไม่มี class เหล่านี้ → คงแบนตามตั้งใจ */
.btn{border-radius:var(--r-sm)!important}
.form-control{border-radius:var(--r-sm)!important}
.main-services-container,.menu-service-container{border-radius:var(--r-md)!important}
/* เก็บรอยต่อ input-group ให้เนียน: มุมด้าน "ที่ชนกัน" คืนเป็นเหลี่ยม (มุมนอกยังโค้ง 10px) */
.input-group > .form-control:not(:last-child){border-top-right-radius:0!important;border-bottom-right-radius:0!important}
.input-group-append .btn,.input-group-append .input-group-text{border-top-left-radius:0!important;border-bottom-left-radius:0!important}
.input-group-prepend .btn,.input-group-prepend .input-group-text,.input-group-prepend .stake-number{border-top-right-radius:0!important;border-bottom-right-radius:0!important}
/* Mobile Layout 2 (.mobile-main-content) — คอมโพเนนต์ .mmc-* เดิม 4px ทั้งหมด → ให้นุ่มเข้าชุดกัน
   การ์ด → --r-md (14px เท่าการ์ดเมนู) ; tile เมนู/ปุ่ม → --r-sm (10px) ; การ์ดมี overflow:hidden เด็กในจึงตามโค้ง */
.mobile-main-content .mmc-featured-card,
.mobile-main-content .mmc-grid-card,
.mobile-main-content .mmc-rb7-preview-card,
.mobile-main-content .mmc-evenbet-card,
.mobile-main-content .custom-service-btn,
.mobile-main-content .custom-service-btn > a{border-radius:var(--r-md)!important}
.mobile-main-content .mmc-menu-item,
.mobile-main-content .mmc-evenbet-back-btn{border-radius:var(--r-sm)!important}

/* ============================================================
   39. ช่องกรอกเลข .number-input.number (lotto-choose-number / lotto-dashboard)
   ------------------------------------------------------------
   border เดิม #E7EAEC (เทาอ่อนหลุดธีม) → ขอบทองธีม
   + ตัวเลขที่พิมพ์เดิม #161A26 (น้ำเงินเข้ม = มืดบนพื้นดำ มองแทบไม่เห็น) → ทองอ่อนอ่านชัด */
.number-input.number{border-color:var(--border-gold)!important;color:var(--gold-100)!important}

/* ============================================================
   40. AFFILIATE GROUP (fgf-*/partner-*) — เก็บตกหลังเพิ่ม link
   ------------------------------------------------------------
   1) Bootstrap utility .bg-* (badge ที่ JS render) → map เป็น semantic token ของธีม
   2) ช่องค้นหา/ฟอร์ม #000d1f → surface-2 ; skeleton .loading navy → warm gradient
   3) card-footer stripe (zebra) เดิม navy #232333/#101025 → zebra ธีม (surface-2/surface-1)
      (replicate selector เท่า production + mw2026 โหลดทีหลัง → ชนะ tie)
   ============================================================ */
/* Bootstrap .bg-* utility → โทนธีม (semantic) ; mw2026 โหลดหลัง bootstrap → ชนะ tie */
.bg-primary{background-color:var(--info)!important}
.bg-success{background-color:var(--success)!important}
.bg-danger{background-color:var(--danger)!important}
.bg-warning{background-color:var(--warning)!important}
.bg-info{background-color:var(--info)!important}
.bg-secondary{background-color:var(--surface-3)!important}
/* ช่องค้นหา/ฟอร์ม affiliate เดิม #000d1f (navy เข้ม) → surface-2 (replicate selector ให้ specificity พอ) */
form.input-group.my-3 > input[type="text"],
form.input-group.my-3 > input[type="number"],
div#withdraw form.input-group.my-3 > input[type="number"],
div#revenue > div.form-group > select,
div.dp__input_wrap > input{background-color:var(--surface-2)!important}
/* skeleton .loading เดิม gradient navy (#041828→#1D3243→#607D8B) → gradient อุ่นเข้าธีม */
.loading{background:linear-gradient(139deg,var(--surface-2) 13%,var(--surface-3) 90%,var(--ink-500) 167%)!important}
/* card-footer stripe (zebra) เดิม navy odd #232333 / even #101025 → zebra ธีมอุ่น */
div#revenue > div.w-100.mt-4 > div.card > div.card-footer > div:nth-child(odd),
div#withdraw > div.w-100.mt-4 > div.card > div.card-footer > div:nth-child(odd){background-color:var(--surface-2)!important}
div#revenue > div.w-100.mt-4 > div.card > div.card-footer > div:nth-child(even),
div#withdraw > div.w-100.mt-4 > div.card > div.card-footer > div:nth-child(even){background-color:var(--surface-1)!important}

/* ============================================================
   41. กลุ่ม 2 (account/VIP/term) — เก็บตกหลังเพิ่ม link
   ------------------------------------------------------------
   account-setting / term-condition = สะอาด (auto-theme)
   vip-point / vip-privillage: row navy #161A26 (inline bg) + progress bar (track/fill)
   ============================================================ */
/* กล่อง/แถว inline background #161A26 (navy) → surface-2 ; เจาะ bg-only (ไม่โดน text use)
   ครอบทุกหน้าที่ใช้ #161A26 เป็นพื้น (13 จุด) */
[style*="background-color: #161A26" i]{background-color:var(--surface-2)!important}
/* progress bar (vip-point ระดับ VIP): track เทา #E9ECEF → ดำธีม , fill เขียว #008000 → ทอง */
.progress{background-color:var(--surface-3)!important}
/* fill: ใช้ .progress .progress-bar (0,2,0) ชนะ inline <style> .progress-bar{background:green!important} ในหน้า */
.progress > .progress-bar,.progress .progress-bar{background-color:var(--gold-500)!important;background-image:none!important}
/* หัวข้อชื่อหวยติด class .number (production ใส่ผิด) → ไทยกลายเป็น Roboto Mono เพี้ยน
   override เฉพาะ heading.number กลับเป็น Anuphan (ตัวเลขจริง span/td.number ยังคง mono) */
h1.number,h2.number,h3.number,h4.number,h5.number,h6.number{font-family:'Anuphan',sans-serif!important}

/* ============================================================
   42. กลุ่ม 3 (football / slot-game-list / lotto-result-by-type)
   ------------------------------------------------------------
   slot-game-list = สะอาด ; football = .close-icon ; lotto-result-by-type = .custom-select
   ============================================================ */
/* ปุ่มปิดหน้าต่าง .close-icon เดิมวงกลมขาว + × จาง (คอนทราสต์แย่) → ดำธีม + × ทอง + ขอบทอง */
.close-icon{background-color:var(--surface-3)!important;color:var(--gold-200)!important;box-shadow:inset 0 0 0 1px var(--border-gold)!important}
/* dropdown .custom-select มี inline background-color:#29313e !important (navy) → ครอบไม่ได้ตรง ๆ
   → ใช้ background-IMAGE layering: caret ทอง (บน) + พื้น surface-2 ทึบ (ล่าง) คลุม navy ; caret ดำเดิมหาย
   (color/border inline #FFF/#29313e คงไว้ — ขาวบนดำอ่านได้ / ขอบ navy บนดำแทบมองไม่เห็น) */
.custom-select{
  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23F2C744' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e"),linear-gradient(var(--surface-2),var(--surface-2))!important;
  background-repeat:no-repeat,no-repeat!important;
  background-position:right .75rem center,center!important;
  background-size:8px 10px,cover!important;
}

/* ============================================================
   43. กลุ่ม 4 (withdraw-1) — เก็บตก
   ------------------------------------------------------------
   withdraw-1 เกือบสะอาด (ฟอร์ม/modal themed) เหลือ .item-text สีน้ำเงินเทา
   .item-text #8493C1 มาจาก class (ไม่ใช่ inline → Section 36 ไม่ครอบ) → ink-300
   ใช้ 3 หน้า (deposit-withdraw/withdraw-1 ฯลฯ) เป็น secondary text → themed พร้อมกัน
   ============================================================ */
.item-text{color:var(--ink-300)!important}

/* ============================================================
   44. INPUT-GROUP SEAM เพิ่มเติม — input ที่ตามหลัง prepend
   ------------------------------------------------------------
   Section 38 จัดมุมขวาของ form-control ที่ไม่ใช่ last แล้ว แต่เคส prepend+input
   (input เป็น last) มุมซ้ายของ input ยังมน + prepend border สีไม่ตรง (ไม่ seamless)
   ============================================================ */
/* input ที่ไม่ใช่ตัวแรก (มี prepend อยู่ซ้าย) → มุมซ้ายเหลี่ยม (join เนียน) */
.input-group > .form-control:not(:first-child){border-top-left-radius:0!important;border-bottom-left-radius:0!important}
/* prepend border (#f4f3ef ขาวหลุดธีม) → border-default ให้ตรงกับ input = seamless + เข้าธีม */
.input-group-prepend,.input-group-prepend .input-group-text,.input-group-prepend .btn{border-color:var(--border-default)!important}

/* ============================================================
   45. กลุ่ม 5 (AUTH: login / register / forgot) — เก็บตก
   ------------------------------------------------------------
   สแกนแล้วทั้ง 3 หน้า auto-theme เกือบครบ. จุดหลุดธีมที่แก้ได้ = register
   เท่านั้น: รูปบัญชีธนาคารแบบ radio (เลือกบัญชีตอนสมัคร) มีขอบหลุดธีม
   จาก inline <style> ในหน้า —
     .radio-bank-img  border 3px solid #48526E (navy เทา = ยังไม่เลือก)
     .bank-img-border border 3px solid #ffffff !important (ขาว = เลือกแล้ว)
   recolor border-color เท่านั้น (ไม่แตะ width/style/radius = color-only):
     ยังไม่เลือก → border-gold จาง (เส้นทองบาง ๆ เข้าธีม + ยังเห็นกรอบ)
     เลือกแล้ว  → ทองสด gold-400 (state ชัด) ; (0,1,0)+!important+โหลดทีหลัง
                  ชนะ inline <style> .bank-img-border{...!important} ที่ specificity เท่ากัน
   หมายเหตุ (แก้ไม่ได้ตามกติกา): login.html ลิงก์รอง .icon-prepend
   ("ลืมรหัสผ่าน?"/"กฎกติกา") มี inline style="color:#d9e0ea !important"
   (เทาฟ้าจาง) — inline !important ชนะ external CSS เสมอ (cascade) และห้ามแก้ HTML
   → คงไว้ (สีจางอ่อน อ่านได้ ไม่ saturated มาก). forgot.html สะอาด
   (.info-block.warning #F47905 = ส้มเตือน semantic อุ่น คงไว้)
   ============================================================ */
.radio-bank-img{border-color:var(--border-gold)!important}
.bank-img-border{border-color:var(--gold-400)!important}

/* ============================================================
   46. เก็บตกหน้าสุดท้าย (full-project scan) — 4 หน้า
   ------------------------------------------------------------
   สแกน computed-style ทั้ง 38 หน้าแล้ว เหลือจุดหลุดธีมจริงแค่ 4 หน้า
   (baseline ทุกหน้า = ไอคอน .fab.fa-facebook #1877F2 = สีแบรนด์ คงไว้)
   ============================================================ */

/* 46.1 partner-income-summary: badge ผลแทง "ชนะ" = .badge.bg-primary
   ยังเป็นน้ำเงิน Bootstrap #007BFF (utility .bg-primary 0,1,0 — Section 40
   ครอบไม่ถึงเพราะหน้านี้มี gijgo/fancybox โหลดหลัง mw2026)
   → ใช้ .badge.bg-primary (0,2,0)+!important ชนะ utility ; map เป็น --info
   (semantic เดียวกับทั้งเว็บ ; คู่กับ bg-success เขียว/bg-danger แดง = 3 สถานะ) */
.badge.bg-primary{background-color:var(--info)!important}

/* 46.2 partner-daily-member / partner-member: หัวตารางสถิติ
   thead มี background-IMAGE ทอง (ธีม) อยู่แล้ว ; th/tr โปร่งใส วางบนทอง
   text เดิม #041828 (navy เข้ม) อ่านบนทองได้ แต่ออกโทนน้ำเงิน →
   เปลี่ยนเป็น --on-gold (#2A1E03 น้ำตาลเข้มสำหรับพื้นทอง) = คอนทราสต์ดี + เข้าธีม
   (replicate selector เดิม (1,0,5) + !important ; <p> ข้างใน th รับสืบทอดตาม)
   หมายเหตุ: นี่เป็น false positive ของสแกน (text อยู่บนทอง ไม่ใช่บนดำ) */
div#member > table > thead > tr > th,
div#member-daily > table > thead > tr > th{color:var(--on-gold)!important}

/* 46.3 fgf: เส้นคั่น .row มี inline border-top:1px solid #343c46 (เทา-navy)
   inline แต่ไม่มี !important → ครอบ border-top-color ด้วย !important ได้
   → border-default ให้เข้าชุดเส้นคั่นอื่นในธีม */
.row[style*="343c46" i]{border-top-color:var(--border-default)!important}

/* NOTE: make-lotto-number-list .badge-light (#636d7c) จัดการแล้วใน Section 34
   (background-IMAGE 2 ชั้น: gold-tint บน surface-3 ทึบ) — สแกนเห็น navy เพราะ
   อ่าน background-COLOR ใต้ image (false positive เหมือน .custom-select Section 42) */

/* ============================================================
   47. LOGIN — ลำดับความเด่นของปุ่ม (CTA hierarchy ~70/30)
   ------------------------------------------------------------
   เป้าหมาย: หน้า login เน้น "เข้าสู่ระบบ" เป็นหลัก (~70) แต่ยังให้
   "ลงทะเบียนสมาชิก" เด่นมีตัวตน (~30) — ทั้งคู่เป็นปุ่มทองเข้าธีม
   ต่างกันที่น้ำหนัก (color-only: bg/gradient/color/border-color +
   color-bearing box-shadow):
     • เข้าสู่ระบบ (button.btn-primary) = CTA หลัก → ทองทึบ --grad-gold
       + ตัวอักษรเข้ม --on-gold + เงาเรืองทอง (เด่นสุด)
     • ลงทะเบียนสมาชิก (a.btn-secondary) = รองแต่เด่น → ทอง tonal
       (พื้นทองโปร่ง 14% + ขอบทองเข้ม + ตัวอักษรทองสว่าง) ชัดกว่า ghost
       แต่เบากว่าทองทึบ → ไล่ระดับ 70/30
   SCOPE เฉพาะหน้า login: #form-login (id มีเฉพาะ login.html) — ไม่กระทบ
   forgot/withdraw-1 (มีแค่ class .form-login ไม่มี id นี้) ; (1,1,0) ชนะ core */
/* เข้าสู่ระบบ = CTA หลัก (ทองทึบ + เงาเรือง) */
#form-login .btn-primary,
#form-login .btn-primary:focus,
#form-login .btn-primary:active{
  background:var(--grad-gold)!important;
  color:var(--on-gold)!important;
  border-color:var(--gold-500)!important;
  box-shadow:0 6px 20px rgba(239,191,59,.30)!important;
}
#form-login .btn-primary:hover{
  background:var(--grad-gold-sheen)!important;color:var(--on-gold)!important;
  box-shadow:0 8px 24px rgba(239,191,59,.42)!important;
}
/* ลงทะเบียนสมาชิก = รองแต่เด่น (ทอง tonal) */
#form-login .btn-secondary,
#form-login .btn-secondary:focus,
#form-login .btn-secondary:active{
  background:rgba(239,191,59,.14)!important;
  color:var(--gold-100)!important;
  border-color:var(--border-gold-strong)!important;
  box-shadow:inset 0 0 0 1px var(--border-gold-strong)!important;
}
#form-login .btn-secondary:hover{
  background:rgba(239,191,59,.22)!important;color:var(--gold-100)!important;
  box-shadow:inset 0 0 0 1px var(--gold-400)!important;
}

/* ============================================================
   48. REGISTER — form-outer-container + stepper เข้าธีม (conversion)
   ------------------------------------------------------------
   หน้า register คือจุด conversion สำคัญสุด. inline <style> ในหน้าใช้
   โทนพาสเทล/เงิน หลุดธีม Black/Gold มาก (ทุกกฎไม่มี !important → ครอบได้)
   ทุก class register-only (เช็คแล้วไม่มีหน้าอื่นใช้) → ใส่ใน mw2026 ตรง ๆ
   color-only: background/gradient/border-color/color + color-bearing box-shadow */

/* 48.1 กล่องฟอร์มหลัก — เงาพาสเทลเหลืองซีด #fafad2 + ขอบ #fbfbad
   → เงาหรู: ลึก (ดำ) + เรืองทองบาง ๆ ; ขอบทองเข้ม (กรอบพรีเมียม) */
div.form-outer-container{
  border-color:var(--border-gold-strong)!important;
  box-shadow:0 18px 50px rgba(0,0,0,.6),0 0 22px rgba(239,191,59,.16)!important;
}
/* 48.2 เส้นเชื่อม step (#progress) เหลืองเขียว #e8cb0d → ทองธีม */
#progress{background-color:var(--gold-500)!important;background-image:none!important}
/* 48.3 วงกลม step ที่ยังไม่ถึง (.step-button) gradient เงิน/ขาว → ดำธีม + ขอบทองจาง + เลขทอง
   (recede = "ยังไม่ทำ") */
.step-button{
  background:var(--surface-2)!important;
  border-color:var(--border-gold)!important;
  color:var(--gold-200)!important;
}
/* 48.4 วงกลม step ปัจจุบัน (.step-active) ทองพาสเทล + เงาครีมซีด
   → grad-gold สด + เลขเข้ม on-gold + glow ทองเข้ม (ดึงสายตา = "อยู่ตรงนี้") */
.step-button.step-active{
  background:var(--grad-gold)!important;
  border-color:var(--gold-500)!important;
  color:var(--on-gold)!important;
  box-shadow:0 0 16px rgba(239,191,59,.55)!important;
}
/* 48.5 ป้ายชื่อ step ปัจจุบันเป็นทอง (เน้น) ; ป้ายอื่นคงขาว (#fff อ่านได้บนดำ) */
.step-button.step-active + .step-title{color:var(--gold-200)!important}

/* 48.6 ปุ่ม gold pastel ที่นิยามใน inline <style> (.btn-register/.btn-gold = ทองพาสเทล,
   .btn-login = เงิน) เผื่อ JS เรียกใช้ในบาง stage → ทองธีม/เงิน→tonal ให้เข้าชุด */
a.btn-register,.btn-gold{
  background:var(--grad-gold)!important;color:var(--on-gold)!important;border-color:var(--gold-500)!important;
}
a.btn-login{
  background:rgba(239,191,59,.14)!important;color:var(--gold-100)!important;border-color:var(--border-gold-strong)!important;
}

.main-service-icon-football-bet-animate,
.main-service-icon-sportbook-animate,
.main-service-icon-slot-animate,
.main-service-icon-lotto-animate,
.shooting-fish-icon-animation,
.main-service-icon-crashgame-animate,
.main-services-icon.icon-lotto-wrapper {
  z-index: 1;
}

/* ============================================================
   49. UX POLISH — กลมกลืน/สบายตา (กลุ่ม B,C จาก UX audit)
   ------------------------------------------------------------
   เก็บงาน CSS-only ด้าน seamless/readability ; B1(ปุ่มรอง) + C1(placeholder)
   แก้ที่กฎเดิม (Section buttons/forms) แล้ว ; ส่วนที่เหลืออยู่นี่:
   B2 captcha frame, B4 disabled theme, C2 ตัวอักษรเงื่อนไขใหญ่ขึ้น
   หมายเหตุ: B3 (number grid) ไม่ต้องแก้ — เลขเป็น gold-200 อยู่แล้ว (อ่านชัด) */

/* [B2] CAPTCHA (forgot) เดิมกล่องขาวสว่างตัดธีมดำ → ใส่กรอบทอง + มุมมน + ลด brightness
   เล็กน้อย ให้กลืนเป็นองค์ประกอบธีม (คงความสว่างพอให้อ่านเลขออก) */
img[alt="captcha"]{
  border:2px solid var(--border-gold-strong)!important;
  border-radius:var(--r-sm)!important;
  box-shadow:0 0 0 3px rgba(0,0,0,.4),0 6px 16px rgba(0,0,0,.5)!important;
  filter:brightness(.96) saturate(.92)!important;
}

/* [B4] ปุ่ม disabled เดิมเทา #A6AAB5/#6C6F78 (หลุดธีม) → surface-3 + ink-400
   (ดู disabled เข้าธีม ; opacity .4 ของ production คงไว้ ไม่แตะ) ; (0,2,0)+โหลดหลัง ชนะ */
.btn.disabled,.btn:disabled,
.btn.disabled:hover,.btn.disabled:active,.btn.disabled:focus{
  background-color:var(--surface-3)!important;color:var(--ink-400)!important;
}

/* [C2] ข้อความเงื่อนไข (.terms p) เดิม 13.6px (0.85rem) เล็กไป → ~15px + line-height โปร่ง
   อ่านยาว ๆ สบายตาขึ้น (non-color: font-size/line-height) */
.terms p,.terms li{font-size:.95rem!important;line-height:1.6!important}

/* ============================================================
   50. FOOTER MENU (.tabbar) — ไอคอน 3D ทองชุดใหม่ (WebP) + เน้น "ติดต่อเรา"
   ------------------------------------------------------------
   ทดลองเฉพาะหน้า home ก่อน → scope ด้วย body:has(.mobile-main-content)
   (.mobile-main-content มีเฉพาะ home.html — ตรวจแล้ว)
   ROLLOUT ทุกหน้า = ลบ prefix `` ออก
   REVERT = ลบทั้ง Section 50 → กลับไปใช้ SVG เดิมของโปรดักชันอัตโนมัติ

   ที่มาไฟล์: Assets/*.png (533px) → trim ขอบใส → pad สี่เหลี่ยมจัตุรัส
   → 108px (3x ของกล่อง 36px) → WebP q88 ≈ 5-7KB/ไฟล์ (เดิม PNG ~350KB)

   ── ประวัติการแก้ (อ่านก่อนจะรื้อ จะได้ไม่วนกลับไปทางที่ตกไปแล้ว) ──
   v1 การ์ดแนวนอนเต็มช่องเฉพาะ "ติดต่อเรา" → ตก: ดูแบน + ขอบบนชนเส้นแถบ
   v2 ดันแผ่นไอคอนทะลุขึ้นเหนือแถบ → ตก: ช่องเดียวที่ล้ำออกมา = ไม่สมมาตร
   v3 ทุกช่องเป็นแผ่นจตุรัสเท่ากันหมด ต่างกันแค่การตกแต่ง → ผ่านเรื่องทรง
   v4 (ปัจจุบัน) ยกระดับแผ่นให้ดูพรีเมียม: แสงบน-เงาล่าง-เงาตกใต้แผ่น
      + ขอบทองวิ่งวาว (animation) เฉพาะช่องติดต่อเรา
   ============================================================ */

/* 50.0 ตัวแปรพื้นแผ่น — นิยามครั้งเดียวที่ .tabbar แล้ว 50.2 เรียกใช้
   ช่องติดต่อเรา override ตัวแปรนี้เป็นโทนทองใน 50.4 (บรรทัดเดียวจบ)
   ไล่สี: สว่างบน → กลางกลาง → เข้มก้น = จำลองแสงตกจากด้านบน
   ซึ่งเป็นตัวที่ทำให้ผิวดู "มีมิติ" แทนที่จะเป็นสีเทาแบน ๆ */
.tabbar{
    --tile-fill:linear-gradient(180deg,
        rgba(255,255,255,.085) 0%,
        rgba(255,255,255,.022) 46%,
        rgba(0,0,0,.20) 100%)}

/* 50.1 ทุกช่อง = แผ่นจตุรัส 42x42 ไอคอนข้างใน 34px (padding 4 รอบด้าน)
   ระยะในแถบ 65px: pad-top 3 + แผ่น 42 + gap 1 + label 16.8 = 62.8 → เว้นบน-ล่าง 4px
   background 2 ชั้น: [1] ภาพไอคอน (content-box = อยู่ในกรอบ padding)
                      [2] --tile-fill (border-box = เต็มแผ่น)
   เงา 4 ชั้นคือหัวใจของความ "แพง" — แผ่นเดียวแต่มีทั้งแสงและความลึก:
     1) 0 2px 6px ดำ      = เงาตกใต้แผ่น ทำให้แผ่นลอยขึ้นจากพื้นแถบ
     2) 0 1px 0 ขาวจาง    = ขอบล่างรับแสงสะท้อนจากพื้น (โลหะจริงมี)
     3) inset 0 1px 0 ขาว = ไฮไลต์คมที่ขอบบนด้านใน = ขอบโลหะลบมุม
     4) inset 0 -7px 14px ดำ = เงาสะสมที่ก้นแผ่น = ผิวเว้าเล็กน้อย ไม่แบน */
.tabbar ul li a{padding-top:3px!important}
.tabbar .icon{
    position:relative!important;
    width:42px!important;height:42px!important;margin:0 auto 1px!important;
    padding:4px!important;box-sizing:border-box!important;border-radius:13px!important;
    background-color:transparent!important;
    background-origin:content-box,border-box!important;
    background-size:contain,auto!important;
    background-position:center,center!important;
    background-repeat:no-repeat,no-repeat!important;
    border:1px solid rgba(255,255,255,.085)!important;
    box-shadow:0 2px 6px rgba(0,0,0,.55),
               0 1px 0 rgba(255,255,255,.05),
               inset 0 1px 0 rgba(255,255,255,.11),
               inset 0 -7px 14px rgba(0,0,0,.34)!important}

/* 50.2 ไอคอนใหม่ + พื้นแผ่น (ชั้นที่ 2) — ทับทั้ง state ปกติและ .active
   (โปรดักชันแยก 2 selector `.tabbar ul li a .icon-x` / `li.active a .icon-x`) */
.tabbar .icon-home{background-image:url("icons/home.webp"),var(--tile-fill)!important}
.tabbar .icon-request{background-image:url("icons/deposit-withdraw.webp"),var(--tile-fill)!important}
.tabbar .icon-casino{background-image:url("icons/casino.webp"),var(--tile-fill)!important}
.tabbar .icon-slot{background-image:url("icons/slot.webp"),var(--tile-fill)!important}
.tabbar .icon-contact{background-image:url("icons/contact.webp"),var(--tile-fill)!important}

/* 50.3 ไม่แตะ opacity/filter ของไอคอน — ผู้ใช้ต้องการสีตามที่สร้างมาเป๊ะ ๆ
   ทุกช่องจึงสว่างเท่ากัน ; active/inactive แยกด้วย "สีตัวหนังสือ" อย่างเดียว
   ตามที่โปรดักชันทำอยู่เดิม (Section 8: inactive=ink-400 / active=gold-400) */

/* 50.4 "ติดต่อเรา" = เด่นที่สุดในแถบ (Owner สั่ง)
   ------------------------------------------------------------
   ทรง/ขนาด/ตำแหน่ง เหมือนอีก 4 ช่องเป๊ะ → เด่นด้วย "การตกแต่ง" ล้วน ๆ
     • --tile-fill เปลี่ยนเป็นโทนทอง (บรรทัดเดียว)
     • ขอบเป็น gradient ทองเงาวาว "วิ่ง" รอบแผ่น (::after + mask + borderShine)
       ใช้เทคนิค mask-composite เดียวกับ Section 16 แต่เติม animation
       border ของตัว .icon จึงตั้งเป็น transparent ปล่อยให้ ::after วาดแทน
     • เงาทองรอบนอกเต้นตามจังหวะขอบ (drop-shadow บน ::after)
   ไม่ใช้พื้นทองทึบแบบ reference เพราะไอคอน 3D ทองจะจมหาย
   ANIMATION: ผู้ใช้อนุมัติแล้ว ; borderShine เป็น keyframes เดิม (Section 14)
              tabbarPulse เป็นตัวใหม่ 1 ตัว ; มี guard reduced-motion ด้านล่าง
   REVERT = ลบ 50.4 → ช่องนี้กลับเป็นแผ่นเทาเหมือนอีก 4 ช่อง
   ============================================================ */
/* ── โทนทอง: ช่องติดต่อเรา "ติดถาวร" ; ช่องอื่นได้ตอน hover (ดู 50.6) ── */
.tabbar ul li:last-child .icon{
    --tile-fill:linear-gradient(180deg,
        rgba(255,240,174,.26) 0%,
        rgba(239,191,59,.10) 48%,
        rgba(0,0,0,.24) 100%);
    border-color:transparent!important;
    box-shadow:0 2px 6px rgba(0,0,0,.55),
               0 0 13px rgba(239,191,59,.26),
               inset 0 1px 0 rgba(255,246,200,.30),
               inset 0 -7px 14px rgba(0,0,0,.30)!important}

/* ขอบทองวิ่ง — background-size 260% ให้แถบไฮไลต์กว้างกว่ากรอบ พอเลื่อน
   background-position ด้วย borderShine แสงจึงกวาดผ่านขอบทีละด้าน

   ★ นิยามให้ "ทุกช่อง" แต่ซ่อนไว้ (opacity 0 + animation paused)
     แล้วค่อยเปิดให้ช่องที่ต้องการ — ดีกว่าเขียนชุดเดียวกันซ้ำ 2 ที่
     และได้ fade เข้า-ออกนุ่ม ๆ ฟรีจาก transition
     paused ไว้ก่อน = ไม่มี animation 8 ตัววิ่งเปล่าตลอดเวลาบนเครื่องช้า */
.tabbar ul li .icon::after{
    content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;
    background:var(--grad-gold-sheen);background-size:260% 100%;
    -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
            mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;mask-composite:exclude;
    pointer-events:none;opacity:0;transition:opacity .25s ease;
    animation:borderShine 2.8s linear infinite,tabbarPulse 2.8s ease-in-out infinite;
    animation-play-state:paused}

.tabbar ul li:last-child .icon::after{
    opacity:1;animation-play-state:running}

/* เงาทองหายใจตามขอบที่วิ่ง — ใส่ที่ ::after ไม่ใช่ .icon เพราะ box-shadow
   ของ .icon เป็น !important (50.1) ซึ่งจะชนะ animation เสมอ */
@keyframes tabbarPulse{
    0%,100%{filter:drop-shadow(0 0 3px rgba(239,191,59,.40))}
    50%    {filter:drop-shadow(0 0 9px rgba(239,191,59,.85))}}

.tabbar ul li:last-child a span{
    color:var(--gold-400)!important;font-weight:700!important}

/* 50.5 OUTER GLOW — รัศมีฟุ้งชั้นนอก (halo)
   ------------------------------------------------------------
   ของเดิมมี glow อยู่ 2 ชั้นแล้ว (box-shadow นิ่งบนแผ่น + drop-shadow
   เต้นบนวงขอบ) ชั้นนี้เป็นชั้นที่ 3 = รัศมีกว้างจางที่ฟุ้งพ้นตัวแผ่นออกไป

   ทำไมต้องแยกเป็นอีกชั้นแทนที่จะเร่งเลขของเดิม:
   แสงจริงมี "ไส้สว่าง" กับ "รัศมีฟุ้ง" คนละความกว้าง ถ้าเร่ง box-shadow
   ตัวเดียวให้แรงขึ้นจะได้แค่ขอบเบลอ ไม่ใช่เรืองแสง

   วางที่ a::before ไม่ใช่ .icon::before เพราะ:
     • ::after ของ .icon ถูกวงขอบใช้ไปแล้ว
     • ::before ของ a วาดก่อนเนื้อหาของ a อยู่แล้ว → อยู่หลังแผ่นไอคอนเอง
       ไม่ต้องใช้ z-index ติดลบ (ซึ่งเสี่ยงหลุดไปอยู่หลังพื้น .tabbar)
   จังหวะ 4.2s ไม่หารลงตัวกับวงขอบ 2.8s → สองแสงเหลื่อมกันไปเรื่อย ๆ
   ไม่เต้นพร้อมกันเป็นจังหวะเครื่องจักร
   REVERT = ลบ 50.5 → เหลือ glow 2 ชั้นเหมือนเดิม
   ------------------------------------------------------------ */
/* นิยามให้ทุกช่องเหมือน ::after แล้วซ่อนไว้ (เหตุผลเดียวกับ 50.4) */
.tabbar ul li a{position:relative}
.tabbar ul li a::before{
    content:"";position:absolute;pointer-events:none;
    left:50%;top:25px;width:76px;height:76px;margin:-38px 0 0 -38px;
    /* จุดสำคัญ: ขอบแผ่นอยู่ที่ ~55% ของรัศมี halo ไล่สีจึงต้องยัง "เข้ม"
       ตรงนั้นอยู่ ไม่งั้นส่วนที่มองเห็นจริง (นอกแผ่น) จะจางจนแทบไม่เห็น */
    background:radial-gradient(closest-side,
        rgba(239,191,59,.38) 0%,
        rgba(239,191,59,.30) 55%,
        rgba(239,191,59,.11) 78%,
        rgba(239,191,59,0) 100%);
    opacity:0;transition:opacity .3s ease;
    animation:tabbarHalo 4.2s ease-in-out infinite;animation-play-state:paused}

.tabbar ul li:last-child a::before{
    opacity:1;animation-play-state:running}

/* หายใจ: กว้าง/จางสลับกัน — scale เปลี่ยนขนาดรัศมี, ความเข้มใช้
   filter:opacity() ไม่ใช่ property opacity เพราะ property opacity ถูกใช้
   คุม "ซ่อน/แสดง" ไปแล้ว ถ้า keyframes ไปเขียนทับ ตอนซ่อนจะโผล่มาเอง
   filter:opacity() คูณกับ opacity → ซ่อนอยู่ก็ยังซ่อนสนิท */
@keyframes tabbarHalo{
    0%,100%{transform:scale(.88);filter:opacity(.65)}
    50%    {transform:scale(1.12);filter:opacity(1)}}

/* 50.6 HOVER — อีก 4 ช่องได้ชุดเดียวกับ "ติดต่อเรา" ตอนเอาเมาส์ชี้
   ------------------------------------------------------------
   ครอบด้วย @media (hover:hover) ไม่ใช่ :hover เปล่า ๆ เพราะ:
   บนมือถือ/แท็บเล็ต :hover จะ "ค้าง" หลังแตะ (sticky hover) ทำให้แท็บ
   ที่เพิ่งกดสว่างทองค้างไว้จนกว่าจะไปแตะที่อื่น = ดูเหมือนบั๊ก
   media query นี้ทำให้กฎทั้งก้อนไม่ถูกใช้เลยบนอุปกรณ์สัมผัส
   (หลักเดียวกับ Section 23 ที่ทำ scrollbar เฉพาะเครื่องที่ใช้เมาส์)

   :focus-within แยกไว้นอก media query → คนที่กด Tab ไล่โฟกัสด้วยคีย์บอร์ด
   เห็นเหมือนกัน ไม่ว่าจะอยู่บนอุปกรณ์ไหน (a11y)

   ค่าทองทั้ง 3 บรรทัดซ้ำกับ 50.4 โดยตั้งใจ — ตัวแปรเดียวคุมไม่ได้เพราะ
   box-shadow เป็นชุดหลายชั้น ยอมซ้ำ 3 บรรทัดดีกว่าเขียนกลไกใหม่มาคุม
   REVERT = ลบ 50.6 → hover กลับไปไม่มีอะไรเกิดขึ้นเหมือนเดิม
   ------------------------------------------------------------ */
@media (hover:hover){
    .tabbar ul li:hover .icon{
        --tile-fill:linear-gradient(180deg,
            rgba(255,240,174,.26) 0%,
            rgba(239,191,59,.10) 48%,
            rgba(0,0,0,.24) 100%);
        border-color:transparent!important;
        box-shadow:0 2px 6px rgba(0,0,0,.55),
                   0 0 13px rgba(239,191,59,.26),
                   inset 0 1px 0 rgba(255,246,200,.30),
                   inset 0 -7px 14px rgba(0,0,0,.30)!important}
    .tabbar ul li:hover .icon::after,
    .tabbar ul li:hover a::before{
        opacity:1;animation-play-state:running}
    .tabbar ul li:hover a span{
        color:var(--gold-400)!important;font-weight:700!important}
}

/* คีย์บอร์ด: เหมือน hover ทุกอย่าง ใช้ได้ทุกอุปกรณ์ */
.tabbar ul li:focus-within .icon{
    border-color:transparent!important;
    box-shadow:0 2px 6px rgba(0,0,0,.55),
               0 0 13px rgba(239,191,59,.26),
               inset 0 1px 0 rgba(255,246,200,.30),
               inset 0 -7px 14px rgba(0,0,0,.30)!important}
.tabbar ul li:focus-within .icon::after,
.tabbar ul li:focus-within a::before{
    opacity:1;animation-play-state:running}

/* guard: ปิดการเคลื่อนไหวให้คนที่ตั้งค่าลดการเคลื่อนไหวไว้
   ขอบทองและ halo ยังอยู่ครบ แค่หยุดนิ่ง (ไม่ใช่หายไป)
   ครอบทุกช่อง เพราะตอนนี้ hover ก็ทำให้ช่องอื่นมีขอบวิ่งได้แล้ว */
@media (prefers-reduced-motion:reduce){
    .tabbar ul li .icon::after{
        animation:none;background-position:50% 0;
        filter:drop-shadow(0 0 6px rgba(239,191,59,.55))}
    .tabbar ul li a::before{
        animation:none;transform:scale(1)}
}

/* ============================================================
   51. ปุ่มแถบติดต่อลอย (.open-contact) — ปุ่มสลับเปิด/ปิด #contact-slide
   ------------------------------------------------------------
   ปัญหาเดิม 2 อย่าง:
     1) วงกลมเป็น "ดำสนิท" เพราะ SVG ใช้ gradient ที่ stop-color อ้าง
        var(--primary-color-1/2) แต่ทั้งเว็บ *ไม่มีที่ไหนนิยามตัวแปรนี้เลย*
        (grep แล้ว: โผล่ 35 ครั้ง = หน้าละ 1 ครั้ง คือ SVG ตัวนี้ตัวเดียว)
        → stop-color ใช้ไม่ได้ ตกไปเป็นค่า default = black
     2) สามเหลี่ยม play ฝัง fill="#FCD535" = เหลือง Binance ของธีมเดิม
        ไม่ใช่ทองของธีมใหม่

   วิธีแก้: ไม่ต้องแตะ SVG เลย — แค่ "เติมนิยาม" ตัวแปรที่หายไปให้มัน
   ที่ .open-contact แล้วมันไหลลงไปถึง <stop> เอง (ใช้กลไกของเว็บเดิม)
   ส่วน fill ของ path ใช้ CSS ทับ presentation attribute ได้ตรง ๆ

   ปลอดภัย: ตัวแปรประกาศบน .open-contact เท่านั้น ไม่รั่วไปที่อื่น
   REVERT = ลบ Section 51 → กลับเป็นวงดำ + สามเหลี่ยมเหลือง Binance
   ============================================================ */

/* 51.1 เติมนิยามที่ขาด → วงกลมได้ไล่สีน้ำตาลทองเข้ม (สว่างบน→เข้มล่าง)
   โทนเดียวกับแผ่นไอคอน footer (Section 50) ให้ภาษาเดียวกันทั้งเว็บ */
.open-contact{--primary-color-1:#3B2D13;--primary-color-2:#14110D}

/* 51.2 ขอบทองบาง ๆ รอบวง — circle เต็ม viewBox พอดี stroke จึงโดนตัดครึ่ง
   ใส่ 1 หน่วย (viewBox 16) เหลือเห็นจริงราว 0.5 หน่วย ≈ 1px ที่ขนาด 34px */
.open-contact svg circle{stroke:var(--gold-500)!important;stroke-width:1!important}

/* 51.3 สามเหลี่ยม play: #FCD535 (เหลือง Binance) → ทองธีม */
.open-contact svg path{fill:var(--gold-400)!important}

/* 51.4 เงาตกใต้ปุ่ม + เรืองแสงทองจาง ให้ลอยขึ้นจากคอนเทนต์ข้างหลัง */
.open-contact svg{filter:drop-shadow(0 2px 6px rgba(0,0,0,.6))
                         drop-shadow(0 0 6px rgba(239,191,59,.32))}

/* ============================================================
   52. LIVE CHAT ลอย — ตราแชท + ที่จับพับ-กาง (เฉพาะหน้า home)
   ------------------------------------------------------------
   ★ ค้นพบสำคัญ: JS เดิมในหน้าทำสิ่งที่ Owner ต้องการไว้ครบแล้ว
       #livechat-btn  → window.BE_API.openChatWindow()  = เปิดแชทจริง
       .open-contact  → toggle .active-contact/.close-contact
                        + จำสถานะลง localStorage('isDisplayStickyMenu')
     เวอร์ชันก่อนเราเอาตราไปแปะบน .open-contact ซึ่งจริง ๆ คือ "ที่จับ"
     ไม่ใช่ปุ่มแอ็กชัน จึงกลายเป็นปุ่มเดียวทำสองหน้าที่ = กดแล้วงง
     รอบนี้คืนบทบาทให้ถูกตัว → ไม่ต้องแตะ JS เลยแม้แต่บรรทัดเดียว
     และได้ระบบจำสถานะข้ามหน้ามาฟรี

   โครงหลังปรับ:  [ที่จับ 30px] [ตราแชท 62px] |ขอบจอ
     กาง  = กล่องอยู่ที่เดิม เห็นทั้งตราและที่จับ
     พับ  = กล่องเลื่อนขวา 72px ตราออกนอกจอหมด เหลือที่จับแนบขอบ
            (ไม่มีอะไรโดนเฉือนครึ่งเหมือนเวอร์ชันเก่าที่ Owner ไม่ชอบ)

   scope: = home เท่านั้น
   ROLLOUT ทุกหน้า = ลบ prefix ออก / REVERT = ลบ Section 52
   ============================================================ */

/* 52.0 กันอาการ "ตราโผล่มาแล้ววิ่งหนี" ตอนโหลดหน้า
   ------------------------------------------------------------
   HTML ฝัง class="box-contact active-contact" มาตายตัว แต่สคริปต์เดิมของหน้า
   ([home.html] บรรทัด ~8804) อ่าน localStorage แล้วสลับเป็น close-contact
   ทีหลังตอน DOM ready → ผู้ใช้ที่เคยกดพับไว้เห็นตรากางอยู่ ~50ms
   แล้วเลื่อนหนีออกไป ทุกครั้งที่รีเฟรช (วัดแล้วเกิด 3/3 รอบ)
   เป็นพฤติกรรมที่มีมาแต่เดิมในโปรดักชัน (สมัยนั้น transition 1 วิ ยิ่งเห็นชัด)

   scripts2026/mw2026.js จะใส่ .mw2026-boot ตอนเริ่ม แล้วถอดออกหลังหน้าโหลดเสร็จ
   ช่วงนั้นปิด transition ทิ้ง → การสลับสถานะครั้งแรกกลายเป็น snap ตาแทบไม่ทัน
   ⚠️ ต้องฝัง JS ก่อนถึงจะได้ผล — ถ้ายังไม่ฝัง อาการนี้ยังอยู่ (เหมือนโปรดักชันเดิม)
   ------------------------------------------------------------ */
/* ⚠️ ต้องใส่ body:has(...) ด้วย ไม่ใช่แค่ html.mw2026-boot .box-contact
   เพราะกฎ transition ใน 52.1 ใช้ selector `body:has(.mobile-main-content)
   .box-contact` ซึ่ง :has() นับ specificity ตาม argument ข้างใน = 2 class
   เท่ากับ `html.mw2026-boot .box-contact` พอดี → เสมอกัน แล้วตัวที่อยู่
   ทีหลังในไฟล์ชนะ (คือ 52.1) ทำให้ guard ไม่ทำงาน
   (รอบแรกเขียนสั้น ๆ แล้วเจอว่า transition ยังเล่นอยู่ตอนทดสอบ) */
html.mw2026-boot .box-contact,
html.mw2026-boot .box-contact .open-contact,
html.mw2026-boot .box-contact,
html.mw2026-boot .box-contact .open-contact{
    transition:none!important}

/* 52.1 กล่องหลัก — กึ่งกลางจอแนวตั้ง กว้าง 72px (ตรา 62 + เว้นขอบ 10)
   transition เดิมของโปรดักชันคือ all 1s ซึ่งช้าจนรู้สึกว่าเว็บค้าง
   → 0.38s และจำกัดเฉพาะ transform (all 1s ทำให้ทุก property หน่วงตาม) */
.box-contact{
    /* ขนาด "เม็ดพับ" เก็บเป็นตัวแปร เพราะถูกใช้ 3 ที่ (กฎ .close-contact,
       คีย์เฟรม lcTuckGrip, และ media query จอสัมผัส) ต้องตรงกันเสมอ */
    --grip-w:30px;--grip-h:60px;
    top:20%!important;right:0!important;
    width:72px!important;height:62px!important;
    background:none!important;border-radius:0!important;isolation:isolate;
    transition:transform .38s cubic-bezier(.4,0,.2,1)!important}
/* ไม่ใส่ !important ตรงนี้โดยตั้งใจ — CSS ให้ declaration ที่ !important
   ชนะ animation เสมอ ถ้าใส่ scroll-driven animation ใน 52.6 จะไม่ทำงาน
   (selector นี้เจาะจงกว่า .active-contact ของโปรดักชันอยู่แล้ว ไม่ต้องพึ่ง !important) */
.box-contact.active-contact{transform:translateX(0)}
.box-contact.close-contact{transform:translateX(72px)!important}

/* Facebook ตัดทิ้งถาวร (Live Chat เป็นช่องทางหลักช่องทางเดียว)
   ซ่อนเฉพาะ <a> ของมัน ไม่ปิดทั้งแผง เพราะ #livechat-btn อยู่ในแผงเดียวกัน */
.box-contact .d-flex > a:not(#livechat-btn){display:none!important}
/* z-index: ที่จับ 1 / ตรา+วงคลื่น 2 → วงคลื่นแผ่ผ่านที่จับได้
   (ก่อนแก้ ที่จับเป็นแผ่นทึบไปบังวงคลื่นจนเป็นวงกลมแหว่ง = อาการ "ดูแปลก ๆ") */
.box-contact > .d-flex{
    display:block!important;height:62px;position:relative;z-index:2}

/* ============================================================
   52.2 ตราแชท = #livechat-btn (ปุ่มแอ็กชันจริง)
   ------------------------------------------------------------
   ธาตุที่มีให้ใช้ในปุ่มนี้: ::before, ::after, img.livechat-img,
   span.text-box-item (+ ::before ของ span)
   จัดสรร: ::before = halo | ::after = คลื่น 1 | span = คลื่น 2
           span::before = คลื่น 3 | img = ซ่อน (ใช้ background แทน)
   ============================================================ */
#livechat-btn{
    display:block!important;position:relative!important;
    width:62px!important;height:62px!important;margin:0!important;padding:0!important;
    background:url("icons/livechat.webp") center/contain no-repeat!important;
    transform-origin:50% 88%;
    filter:drop-shadow(0 6px 14px rgba(0,0,0,.6));
    transition:filter .25s ease;
    animation:lcIdle 3.6s ease-in-out infinite,lcBeat 7s ease-in-out infinite}

/* halo ทองหายใจ (ชั้นสงบ) */
#livechat-btn::before{
    content:"";position:absolute;left:50%;top:50%;z-index:-1;pointer-events:none;
    width:104px;height:104px;border-radius:50%;
    background:radial-gradient(closest-side,
        rgba(239,191,59,.40) 0%,rgba(239,191,59,.15) 52%,transparent 76%);
    animation:lcBreathe 4.4s ease-in-out infinite}

/* คลื่น 3 วง — หน่วงไล่กัน 0/.5/1.0s */
/* ⚠️ บั๊กที่แก้: เดิมใช้ .text-box-item::before เป็นวงที่ 3 ซึ่งซ้อนอยู่ "ใน"
   span ที่เป็นวงที่ 2 — span เป็น position:absolute + มี transform วิ่งอยู่
   จึงกลายเป็น containing block ให้ลูก → วงที่ 3 ได้ transform ทบสองชั้น
   (scale ของตัวเอง x scale ของ span) ขยายเพี้ยนและ opacity คูณกัน
   แก้โดยย้ายวงที่ 3 ไปที่ img.livechat-img ซึ่งเป็น "พี่น้อง" ของ span
   ไม่ใช่ลูก → ทั้ง 3 วงอยู่ระดับเดียวกัน ไม่ทบกัน

   img มี src จริงจะวาดรูปออกมา ใช้ object-position ดันรูปออกนอกกล่อง
   999px (ส่วนที่ล้น content-box ถูกตัดทิ้ง) เหลือแต่ border = วงคลื่น */
#livechat-btn::after,
#livechat-btn .text-box-item,
#livechat-btn .livechat-img{
    content:"";position:absolute;left:50%;top:50%;pointer-events:none;
    width:62px!important;height:62px!important;margin:0!important;padding:0!important;
    border-radius:50%;font-size:0;   /* กลบข้อความ "Livechat" ใน span */
    object-position:999px 999px;     /* ดันรูปใน <img> ออกนอกกล่อง */
    border:1px solid rgba(239,191,59,.9)!important;
    /* ⚠️ บั๊กที่แก้ (เห็นตอนรีโหลด/กดกาง): วง 2-3 มี animation-delay .5s/1s
       ระหว่างรอ delay ค่า fill-mode ปริยายคือ none = ใช้ "สไตล์ฐาน" ของ element
       ซึ่งเดิมไม่ได้ตั้ง transform/opacity ไว้เลย → วงเลยโผล่มาแบบ
       เต็มขนาด opacity 1 และเยื้องลงขวา 31px (เพราะมีแต่ left/top:50%
       ยังไม่มี translate(-50%,-50%) ที่อยู่ในคีย์เฟรม)
       วัดได้: offCenter "31,31" op 1 อยู่ 0.5-1.0 วิ ทุกครั้งที่โหลด
       แก้ 2 ชั้น: (1) ใส่ค่าพักไว้ในสไตล์ฐานให้ตรงกับคีย์เฟรม 0%
                   (2) fill-mode:backwards = ใช้คีย์เฟรม 0% ตั้งแต่ก่อน delay หมด */
    transform:translate(-50%,-50%) scale(.15);opacity:0;
    animation:lcRipple 7s linear infinite backwards}
#livechat-btn .text-box-item{animation-delay:.5s}
#livechat-btn .livechat-img{display:block!important;animation-delay:1s}

@media (hover:hover){
    #livechat-btn:hover{
        filter:drop-shadow(0 6px 14px rgba(0,0,0,.6))
               drop-shadow(0 0 12px rgba(239,191,59,.75))}
}

/* ============================================================
   52.3 ที่จับพับ-กาง = .open-contact (เม็ดครึ่งวงแนบขอบ)
   ------------------------------------------------------------
   svg เดิมในปุ่ม (วงกลม + สามเหลี่ยม play) เอามาใช้เป็นลูกศรได้เลย
   แค่ล้างวงกลมทิ้งเหลือสามเหลี่ยม — และโปรดักชันมี
   `.close-contact svg{rotate:180deg}` อยู่แล้ว จึงพลิกทิศให้ฟรี
     กาง ▶ = ดันไปทางขวาเพื่อพับ | พับ ◀ = ดึงกลับมาทางซ้ายเพื่อกาง
   ธาตุที่เหลือ: ::before = จุด LIVE | ::after = แสงทองกวาด
   ------------------------------------------------------------
   ⚠️ กว้าง 30px ต่ำกว่าเกณฑ์ touch target 44px — จงใจแลก เพราะยิ่งกว้าง
      ยิ่งกินจอตอนพับซึ่งขัดวัตถุประสงค์ ; สูง 60px ชดเชยพื้นที่แตะ
      และปุ่มติดขอบจอกดง่ายกว่าปุ่มกลางจออยู่แล้ว */
/* ที่จับ "เปลี่ยนขนาดตามสถานะ" เพราะสองสถานะมีหน้าที่ต่างกัน:
     ตอนกาง = ตัวประกอบ ต้องเล็กและเงียบ ไม่แย่งซีนตรา (22x44 แนบตรา)
     ตอนพับ = ตัวเอก ต้องเห็นชัดและแตะง่าย (30x60 แนบขอบจอ)
   ก่อนแก้ใช้ 30x60 ทั้งสองสถานะ ตอนกางจึงเป็นแผ่นทึบใหญ่เกือบเท่าตรา
   ดูเหมือนกล่องเปล่า ๆ อีกใบวางข้าง ๆ = อาการ "ออกแบบไม่ครบ" */
.box-contact .open-contact{
    position:absolute!important;z-index:1;
    top:50%!important;bottom:auto!important;right:auto!important;
    /* 4 ค่านี้ "ไม่ใส่ !important" โดยตั้งใจ — !important ชนะ animation เสมอ
       ถ้าใส่ scroll-driven animation ที่ขยายที่จับใน 52.6 จะไม่ทำงาน
       (selector นี้เจาะจงกว่าโปรดักชันมากอยู่แล้ว ไม่ต้องพึ่ง !important)
       ส่วนกฎของ .close-contact ยังใส่ !important ไว้ = กดพับเองชนะสกรอลล์ */
    left:-20px;width:22px;height:44px;margin-top:-22px;
    padding:0!important;overflow:visible!important;
    background:linear-gradient(180deg,#241E13 0%,#15120E 100%)!important;
    border:1px solid var(--border-gold)!important;border-right:0!important;
    border-radius:11px 0 0 11px!important;
    box-shadow:-3px 0 9px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,246,200,.12)!important;
    transition:width .38s cubic-bezier(.4,0,.2,1),height .38s cubic-bezier(.4,0,.2,1),
               left .38s cubic-bezier(.4,0,.2,1),margin-top .38s cubic-bezier(.4,0,.2,1)}
/* กินเข้าไปใต้ตรา 2px (left:-20 กับกว้าง 22) → ไม่มีรอยต่อให้เห็น
   ตอนพับขยายเป็นเม็ดใหญ่แนบขอบจอ */
.box-contact.close-contact .open-contact{
    left:calc(-1 * var(--grip-w))!important;width:var(--grip-w)!important;
    height:var(--grip-h)!important;margin-top:calc(-.5 * var(--grip-h))!important;
    border-color:var(--border-gold-strong)!important}

.box-contact .open-contact > div{
    position:static!important;display:flex!important;
    align-items:center;justify-content:center;height:100%}

/* ลูกศร: เลิกใช้ svg เดิม — path สามเหลี่ยมกินพื้นที่จริงแค่ 5.3x5.8px
   ใน viewBox 16 หน่วย ต่อให้ขยาย svg เป็น 13px ลูกศรก็ยังจิ๋วจนมองไม่ออก
   (วัดมาแล้วด้วย Playwright) และรูปสามเหลี่ยมทึบอ่านเป็นปุ่ม play มากกว่าลูกศร
   → วาด chevron เองด้วยขอบ 2 ด้าน + หมุน 45° ได้ทั้งใหญ่และชัดว่าเป็นลูกศร */
.box-contact .open-contact svg{display:none!important}
.box-contact .open-contact > div::before{
    content:"";display:block;width:9px;height:9px;
    border-left:2px solid var(--gold-400);border-bottom:2px solid var(--gold-400);
    transform:rotate(-135deg);margin-right:3px;   /* › = ดันไปทางขวาเพื่อพับ */
    transition:transform .38s cubic-bezier(.4,0,.2,1)}
.box-contact.close-contact .open-contact > div::before{
    width:10px;height:10px;
    transform:rotate(45deg);margin:0 0 0 3px}      /* ‹ = ดึงกลับมาเพื่อกาง */

/* ============================================================
   52.4 ลูกเล่นตอน "พับ" — 3 ชั้น (Owner สั่ง: ต้องรู้ว่ากดเปิดได้)
   ------------------------------------------------------------
   หน้าที่ต่างจากตอนกาง: ตอนกาง = "กดฉันสิ" / ตอนพับ = "ฉันยังอยู่ ดึงได้"
   ผู้ใช้พับเพราะมันรบกวน ถ้าพับแล้วยังเต้นแรงเท่าเดิมเขาจะเลิกสนใจถาวร
   → 2 ชั้นแรก "ไม่ขยับตำแหน่งเลย" วิ่งตลอดได้ ; ชั้นที่ขยับจริงนาน ๆ ที
     ชั้นพื้น  จุด LIVE เต้น  2.5s  → มีคนอยู่
     ชั้นผิว   แสงทองกวาด    4s    → ของพรีเมียม (ใช้ borderShine เดิม)
     ชั้นเรียก แอบโผล่ 7px    12s   → ดึงออกมาสิ (สาธิตท่าทางให้ดูเลย)
   จังหวะ 2.5/4/12 ไม่หารลงตัวกัน จึงไม่มีวินาทีไหนที่เต้นพร้อมกันจนวุ่น
   ============================================================ */

/* จุด LIVE — โผล่เฉพาะตอนพับ (ตอนกางตรามีคำว่า LIVE อยู่แล้ว ไม่ต้องซ้ำ) */
.box-contact.close-contact .open-contact::before{
    content:"";position:absolute;left:50%;top:11px;margin-left:-3px;
    width:6px;height:6px;border-radius:50%;background:#FF4D4D;
    box-shadow:0 0 7px rgba(255,77,77,.95);
    animation:lcDot 2.5s ease-in-out infinite}

/* แสงทองกวาดผ่านผิวเม็ด — background-position ขยับ ไม่มีอะไรเลื่อนตำแหน่ง */
.box-contact.close-contact .open-contact::after{
    content:"";position:absolute;inset:0;pointer-events:none;
    border-radius:inherit;overflow:hidden;   /* ที่จับเป็น overflow:visible แล้ว
        (ต้องปล่อยให้จุด LIVE ล้นได้) แสงกวาดจึงต้องโค้งตามมุมเอง */
    background:linear-gradient(115deg,
        transparent 40%,rgba(255,246,200,.22) 50%,transparent 60%);
    background-size:260% 100%;
    animation:borderShine 4s linear infinite}

/* แอบโผล่ — keyframes ต้องมี translateX(72px) เป็นฐาน เพราะมันคือ
   ตำแหน่งพับ ถ้าไม่ใส่ animation จะดึงกล่องกลับไปที่ 0 ทันที
   delay .5s ให้ transition ตอนพับเล่นจบก่อน ไม่งั้นจะกระตุกตอนกดพับ */
.box-contact.close-contact{
    animation:lcPeek 12s ease-in-out .5s infinite}

/* ปิดแอนิเมชันของตราตอนพับ — มันอยู่นอกจอแล้ว ไม่ต้องเปลืองรอบวาด */
.box-contact.close-contact #livechat-btn,
.box-contact.close-contact #livechat-btn::before,
.box-contact.close-contact #livechat-btn::after,
.box-contact.close-contact #livechat-btn .text-box-item,
.box-contact.close-contact #livechat-btn .livechat-img{
    animation:none!important}

/* ============================================================
   52.5 keyframes
   ใช้ property เดี่ยว translate/scale/rotate แทน transform รวม
   → "ลอย" กับ "เด้ง" วิ่งพร้อมกันได้ไม่เขียนทับกัน
   (ยกเว้น lcPeek/lcRipple/lcBreathe ที่ต้องใช้ transform เพราะมี
    translate(-50%,-50%) จัดกึ่งกลางผสมอยู่)
   ============================================================ */
@keyframes lcIdle{
    0%,100%{translate:0 0}
    50%    {translate:0 -5px}}
@keyframes lcBeat{
    0%,74%,100%{scale:1;rotate:0deg}
    78%{scale:1.12;rotate:-6deg}
    82%{scale:1.05;rotate:5deg}
    86%{scale:1.08;rotate:-3deg}
    92%{scale:1;rotate:0deg}}
@keyframes lcBreathe{
    0%,100%{transform:translate(-50%,-50%) scale(.9);opacity:.55}
    50%    {transform:translate(-50%,-50%) scale(1.08);opacity:1}}

/* คลื่น: ไหลออกจากจุดกึ่งกลางแล้วค่อย ๆ ช้าลงเหมือนคลื่นน้ำจริง
   ★ timing-function เป็น linear โดยตั้งใจ — CSS ใช้ timing-function กับ
     "ทุกช่วงคีย์เฟรม" แยกกัน ถ้าใส่ ease/cubic-bezier แล้วมีคีย์เฟรม
     กลางทาง (จำเป็นสำหรับคุม opacity) แต่ละช่วงจะเร่ง-ชะลอของตัวเอง
     = กระตุกเป็นท่อน ๆ  วิธีนี้ปั้นความหน่วงด้วยระยะห่างคีย์เฟรมแทน:
     ขยาย .55 / .40 / .28 / .17 ต่อช่วงเวลาเท่ากัน = ease-out ต่อเนื่องจริง */
@keyframes lcRipple{
    0%,62%{transform:translate(-50%,-50%) scale(.15);opacity:0}
    70%   {transform:translate(-50%,-50%) scale(.70);opacity:.62}
    80%   {transform:translate(-50%,-50%) scale(1.10);opacity:.48}
    90%   {transform:translate(-50%,-50%) scale(1.38);opacity:.26}
    100%  {transform:translate(-50%,-50%) scale(1.55);opacity:0}}

@keyframes lcDot{
    0%,100%{opacity:.42;transform:scale(.82)}
    50%    {opacity:1;transform:scale(1.15)}}

@keyframes lcPeek{
    0%,86%,100%{transform:translateX(72px)}
    93%        {transform:translateX(65px)}}

/* ============================================================
   52.6 เลื่อนลงมาระยะหนึ่ง = พับไปชิดขอบจอเอง (scroll-driven)
   ------------------------------------------------------------
   แก้ปัญหา "รบกวน User" ที่ต้นเหตุ โดยไม่โยนภาระให้ผู้ใช้กดพับเอง
   อยู่บนสุด (ช่วงตัดสินใจ ต้องการความช่วยเหลือ) = กางเต็ม
   เลื่อนลงไปอ่านเนื้อหา = พับไปชิดขอบเหมือนกดพับเอง
   เลื่อนกลับขึ้นบน = กางคืนเอง (scroll timeline เป็นสองทาง)

   ทำไมพับ ไม่ใช่จาง: ที่จางลงเฉย ๆ ยังกินพื้นที่เท่าเดิม แค่มองเห็นน้อยลง
   = ได้ทั้งบังเนื้อหาและอ่านยากพร้อมกัน แย่กว่าไม่ทำอะไรเลย

   animation-range 180px→320px = ไม่ขยับเลยใน 180px แรก แล้วพับจบใน 140px
   (ไม่ใช้ range กว้าง ๆ เพราะจะเห็นมันค้างครึ่งทางเหมือนพัง)

   ⚠️ ครอบ @supports จำเป็น ไม่ใช่กันเหนียว: เบราว์เซอร์ที่ไม่รู้จัก
      animation-timeline จะทิ้งบรรทัดนั้นแล้วรัน animation บน timeline ปกติ
      ด้วย duration 0s = กระโดดไปสถานะ "พับ" ทันทีตั้งแต่ยังไม่เลื่อน (พังเงียบ)

   ★ กดพับเองชนะเสมอ: กฎของ .close-contact ใช้ !important ซึ่งชนะ animation
     ผู้ใช้ที่พับไว้เองจึงไม่ถูกสกรอลล์แกะกลับมากาง

   ★ ตอนนี้จับคู่กับ assets/js/mw2026.js แล้ว (ฝังไว้ท้าย members-template.blade.php)
     สคริปต์จะเติม class html.mw2026-js ทันทีที่รู้ว่ามีปุ่มจริง → เงื่อนไข
     html:not(.mw2026-js) ด้านล่างจะเป็นเท็จ กลุ่มนี้จึงกลายเป็น "ทางสำรอง" ที่แท้จริง
     (ใช้เฉพาะตอน JS โหลดไม่ขึ้น/เบราว์เซอร์ปิด JS) ตัว JS เองจัดการทิศทาง+hysteresis
     ได้ดีกว่า — ไม่มีการทำงานทับกันเพราะ selector คนละชุด (.mw2026-js ตัดกันเอง)
   ============================================================ */
@supports (animation-timeline:scroll()){
    /* ★ html.mw2026-js = ไฟล์ scripts2026/mw2026.js ทำงานอยู่ → CSS ถอยให้ JS
       เพราะ JS ทำได้ดีกว่า (มี hysteresis กันสั่น + พับตามทิศทางการเลื่อนจริง)
       ถ้าอีกทีมยังไม่ได้ฝัง JS หรือ JS โหลดไม่ขึ้น ก้อนนี้ทำงานเป็น fallback ให้ */
    html:not(.mw2026-js) .box-contact.active-contact,
    html:not(.mw2026-js) .box-contact.active-contact .open-contact,
    html:not(.mw2026-js) .box-contact.active-contact .open-contact > div::before,
    html:not(.mw2026-js) .box-contact.active-contact .open-contact::before{
        /* หน่วย vh ไม่ใช่ px — เดิม 320px คงที่ทำให้จอเล็กต้องเลื่อนตั้งครึ่งจอ
           ถึงจะพับ (50% ของ 640px) แต่แท็บเล็ตแค่ 31% ซึ่งกลับกับที่ควรเป็น
           (จอเล็กพื้นที่มีค่ากว่า ควรพับเร็วกว่า) — vh ทำให้ทุกจอพับที่
           สัดส่วนเดียวกัน: นิ่งจนเลื่อนพ้น 22% ของจอ แล้วพับจบที่ 45% */
        animation-timeline:scroll();animation-range:22vh 45vh;
        animation-timing-function:linear;animation-fill-mode:both}

    /* กล่องเลื่อนไปชิดขอบ — ระยะเท่ากับตอนกดพับเอง (72px) */
    html:not(.mw2026-js) .box-contact.active-contact{animation-name:lcTuck}
    @keyframes lcTuck{from{transform:translateX(0)}to{transform:translateX(72px)}}

    /* ที่จับขยายจากขนาด "ตัวประกอบ" เป็นขนาด "เม็ดริมจอ" ให้ตรงกับตอนกดพับ */
    html:not(.mw2026-js) .box-contact.active-contact .open-contact{animation-name:lcTuckGrip}
    @keyframes lcTuckGrip{
        from{width:22px;height:44px;left:-20px;margin-top:-22px}
        to  {width:var(--grip-w);height:var(--grip-h);
             left:calc(-1 * var(--grip-w));margin-top:calc(-.5 * var(--grip-h))}}

    /* ลูกศรพลิก › → ‹ (หมุน 180° ตามการเลื่อน ดูเป็นการพลิกจริง ๆ) */
    html:not(.mw2026-js) .box-contact.active-contact .open-contact > div::before{
        animation-name:lcTuckArrow}
    @keyframes lcTuckArrow{from{transform:rotate(-135deg)}to{transform:rotate(45deg)}}

    /* จุด LIVE ค่อย ๆ โผล่ ให้ปลายทางหน้าตาเหมือนตอนกดพับเองเป๊ะ */
    html:not(.mw2026-js) .box-contact.active-contact .open-contact::before{
        content:"";position:absolute;left:50%;top:11px;margin-left:-3px;
        width:6px;height:6px;border-radius:50%;background:#FF4D4D;
        box-shadow:0 0 7px rgba(255,77,77,.95);
        animation-name:lcTuckDot}
    @keyframes lcTuckDot{from{opacity:0}to{opacity:1}}
}

/* guard: ปิดการเคลื่อนไหวให้คนที่ตั้งค่าลดการเคลื่อนไหวไว้
   ตรา + halo + จุด LIVE ยังอยู่ครบ แค่หยุดนิ่ง ; คลื่นกับแสงกวาดซ่อนไป
   เพราะมันคือ "การเคลื่อนไหว" ล้วน ๆ ไม่มีสถานะนิ่งที่มีความหมาย */
@media (prefers-reduced-motion:reduce){
    #livechat-btn{
        animation:none;translate:0 0;scale:1;rotate:0deg}
    #livechat-btn::before{
        animation:none;transform:translate(-50%,-50%) scale(1);opacity:.8}
    #livechat-btn::after,
    #livechat-btn .text-box-item{display:none}
    .box-contact.close-contact{animation:none}
    .box-contact.close-contact .open-contact::before{
        animation:none;opacity:1;transform:scale(1)}
    .box-contact.close-contact .open-contact::after{display:none}
    /* ไม่ปิดการพับตามสกรอลล์ — มันคือการ "จัดตำแหน่ง" ไม่ใช่ลูกเล่น
       และผูกกับการเลื่อนของผู้ใช้เอง ไม่ใช่การเคลื่อนไหวอัตโนมัติ */
}

/* ============================================================
   52.7 RESPONSIVE — แก้ 3 จุดที่วัดเจอตอนทดสอบ 5 ขนาดจอ
   ============================================================ */

/* 52.7.1 จอสัมผัส: เม็ดพับกว้างขึ้น 30→38px
   เดิม 30x60 = 1800px² ต่ำกว่าเกณฑ์ touch target 44x44 (1936px²)
   บนเดสก์ท็อปเมาส์จิ้มโดนสบาย แต่บนมือถือนี่คือ "ปุ่มหลัก" ที่ผู้ใช้
   ต้องกดเพื่อเรียกแชท → 38x60 = 2280px² ผ่านเกณฑ์
   เสียพื้นที่จอเพิ่ม 8px เฉพาะตอนพับเท่านั้น */
@media (pointer:coarse){
    .box-contact{--grip-w:38px}
}

/* 52.7.2 แท็บเล็ต/มือถือแนวนอน: จอสูงแค่ ~700-800px ปุ่มที่ยึดกึ่งกลาง
   จะไปนั่งกลางพื้นที่อ่านพอดี บังเนื้อหามากกว่าแนวตั้ง
   → ขยับขึ้นเป็น 38% ให้พ้นแถบสายตากลางจอ */
@media (orientation:landscape) and (max-height:820px){
    .box-contact{top:38%!important}
}
