/* ══════════════════════════════════════════════════════════════════════════ มีดีพลัส · Obsidian Emerald (มีดี889 flow) — responsive skin, build 20261002a Scope: html[data-theme-id="MEDP"] only (tenant meedeeplus; nothing shared). Every selector is written html[data-theme-id="MEDP"]:not(#medp): the :not() adds one id's worth of specificity (#medp does not exist, so it always matches). The bundle ships ~240 MEDP rules of up to four classes with !important; the boost lets this file win them all without per-rule specificity games, while keeping its own internal cascade unchanged. Keeps the original https://meedee889.com information architecture and betting flow, with a quieter premium treatment requested for มีดีพลัส: page ground obsidian/emerald artwork card #111b17, radius 18px input slot warm white, radius 10px ink #17201c primary #0b7a3d + white text gold #f4c95d text #f7faf8 / #c8d3cd subtle gold-green borders logo the official มีดี889 PNG, centred and unmodified The background is deliberately abstract and low-contrast: no football pitch, no text and no competing logo. Cards remain opaque enough for betting data while a restrained border/shadow hierarchy separates them. The bundle also writes its palette as inline custom properties on , so the variable overrides below carry !important. Contrast (WCAG 2.x), measured against the lightest allowed surface: --md-ink #f7faf8 12.4:1 --md-ink-2 #c8d3cd 8.5:1 --md-ink-3 #96a89f 5.2:1 --md-accent #7bdc98 10.5:1 --md-gold #f4c95d 11.2:1 white on --md-green #0b7a3d 5.4:1 The pre-refresh charcoal and older velvet skins remain in git history. ══════════════════════════════════════════════════════════════════════════ */ /* ── 0 · Tokens + the bundle's palette variables ───────────────────────── */ /* Every colour in this file is one of the --md-* tokens below; the rules only ever say var(--md-…). The values here are the defaults. The tenant can override any colour token from the admin (ตั้งค่า › สีธีมหน้าเว็บ, Setting player_theme_tokens): the JS layer writes the overrides as inline custom properties on , which beat this block. A token whose default is var(--md-…) follows that token until it is overridden itself. --md-green-rgb / --md-accent-rgb / --md-bg-rgb are the same colours as "r, g, b" for the bundle's rgb(var(--theme)) palette; the JS layer derives them, they are not edited on their own. Keep the admin catalogue (base/backend/src/services/player-theme-tokens.ts) in step with this block. */ html[data-theme-id="MEDP"]:not(#medp) { /* พื้นหลัง */ --md-bg: #08110e; --md-bg-deep: #040806; --md-inset: #0b1511; --md-overlay: rgba(0, 0, 0, .68); --md-selection: rgba(11, 122, 61, .55); --md-bg-image-scrim: rgba(4, 8, 6, .24); /* การ์ด */ --md-surface: #111b17; --md-surface-2: #182720; --md-surface-3: #21352b; --md-line: rgba(244, 201, 93, .18); --md-table-stripe: rgba(255, 255, 255, .025); --md-table-hover: rgba(123, 220, 152, .08); /* ตัวอักษร */ --md-ink: #f7faf8; --md-ink-2: #c8d3cd; --md-ink-3: #96a89f; --md-on-color: #ffffff; --md-focus-ring: #f4c95d; /* ช่องกรอก */ --md-field: #f4f7f5; --md-field-ink: #17201c; --md-field-hint: #64716a; --md-field-icon: #526159; --md-field-border: #87958d; --md-field-disabled: #dfe6e2; --md-field-disabled-ink: #36413b; /* ปุ่มหลัก / ปุ่มรอง */ --md-green: #0b7a3d; --md-green-hi: #10934b; --md-on-primary: #ffffff; --md-green-2: #124d31; --md-green-2-hi: #17613c; --md-ring: #f4c95d; --md-btn-disabled: #2a3831; --md-btn-disabled-ink: #9baba2; /* เน้น / ทอง */ --md-accent: #7bdc98; --md-accent-soft: rgba(123, 220, 152, .35); --md-gold: #f4c95d; --md-on-gold: #182019; --md-blue: #2f6f88; --md-orange: #9d4e24; --md-line-green: #06c755; /* สถานะ ชนะ / แพ้ / รอ */ --md-red: #b93c32; --md-red-text: #ff9f95; --md-step-bg: #b93c32; --md-danger-soft-bg: #321815; --md-danger-soft-line: rgba(255, 159, 149, .42); --md-warn-soft-bg: #302610; --md-warn-soft-line: rgba(244, 201, 93, .42); --md-pending: #8dc7e0; --md-pending-bg: #755918; --md-refund: #e7a858; --md-open-ring: rgba(123, 220, 152, .5); --md-closed-bg: #49201c; --md-closed-ink: #ffd7d2; /* ปุ่มราคา (หน้าแทง, วนทุก 8 ปุ่ม) */ --md-amount-1: #963f29; --md-amount-2: #8b651c; --md-amount-3: #17683d; --md-amount-4: #176955; --md-amount-5: #285d67; --md-amount-6: #4d5572; --md-amount-7: #6f4f77; --md-amount-8: #80513a; /* หน้าแทง */ --md-bet-extra: #176955; --md-bet-delete-from: #a8512d; --md-bet-delete-to: #71312c; --md-bet-input-ink: #17201c; /* ปุ่มเติมเงิน / ฝาก-ถอน */ --md-tier-1: #176955; --md-tier-2: #285d67; --md-tier-3: #5f4d72; --md-tier-4: #775b24; --md-deposit-from: #0f7a45; --md-deposit-to: #075c32; --md-withdraw-from: #c04438; --md-withdraw-to: #8f2f2a; /* สีธนาคาร */ --md-bank-default: #0f766e; --md-bank-kbank: #138f2d; --md-bank-scb: #4e2a84; --md-bank-bbl: #1e4598; --md-bank-ktb: #0b76b8; --md-bank-bay: #8a6d00; --md-bank-ttb: #1a3c8f; --md-bank-gsb: #c2185b; --md-bank-baac: #3f7d20; --md-bank-uob: #0b3979; --md-bank-cimb: #7e2f36; --md-bank-kkp: #594a8f; /* รายงานการเงิน: ป้ายประเภทรายการ */ --md-tag-commission: var(--md-amount-7); --md-tag-deposit: var(--md-green); --md-tag-withdraw: var(--md-red); --md-tag-bet: var(--md-orange); --md-tag-refund: var(--md-blue); --md-tag-win: var(--md-gold); --md-tag-bonus: var(--md-bank-gsb); --md-tag-adjust: var(--md-amount-6); --md-tag-other: var(--md-surface-3); /* เฮดเดอร์ / เมนู / ท้ายเว็บ */ --md-header-bg: var(--md-bg); --md-header-chip-ink: var(--md-ink); --md-drawer-bg: var(--md-bg-deep); --md-footer-bg: var(--md-bg-deep); --md-toast-bg: #0b1410; --md-toast-ink: var(--md-ink); /* เงา */ --md-shadow-1: rgba(0, 0, 0, .24); --md-shadow-2: rgba(0, 0, 0, .18); --md-shadow-3: rgba(0, 0, 0, .14); --md-shadow-card: rgba(0, 0, 0, .34); --md-shadow-float: rgba(0, 0, 0, .55); --md-shadow-dialog: rgba(0, 0, 0, .68); /* derived "r, g, b" twins (set by the JS layer with their colour) */ --md-green-rgb: 11, 122, 61; --md-accent-rgb: 123, 220, 152; --md-bg-rgb: 8, 17, 14; --md-radius-card: 18px; --md-radius-btn: 12px; --md-radius-field: 10px; --md-radius-chip: 999px; --md-elev-1: 0 4px 12px var(--md-shadow-2), 0 1px 2px var(--md-shadow-3); --md-elev-card: 0 16px 40px var(--md-shadow-card); --md-font: "Noto Sans Thai", "Noto Sans", Kanit, Tahoma, sans-serif; /* the bundle's own names (inline on , hence !important) */ --theme: var(--md-green-rgb) !important; --master: var(--md-green-rgb) !important; --gold: var(--md-green-rgb) !important; --gsb: var(--md-green-rgb) !important; --blue: var(--md-green-rgb) !important; --purple: var(--md-green-rgb) !important; --red: var(--md-green-rgb) !important; --egov: var(--md-green-rgb) !important; --primary: var(--md-accent-rgb) !important; --goldlight: var(--md-accent-rgb) !important; --dark: var(--md-bg-rgb) !important; --medp-primary: var(--md-green) !important; --medp-accent: var(--md-green) !important; --medp-bg: var(--md-bg) !important; --medp-bg-2: var(--md-surface) !important; --medp-surface: var(--md-surface) !important; --medp-surface-2: var(--md-surface-2) !important; --medp-text: var(--md-ink) !important; --medp-text-2: var(--md-ink-2) !important; --medp-muted: var(--md-ink-3) !important; --medp-border: var(--md-line) !important; --medp-soft: var(--md-surface-2) !important; --medp-ink: var(--md-ink) !important; --medp-ink-2: var(--md-ink-2) !important; --medp-line: var(--md-line) !important; --color-gold: var(--md-green) !important; --lotto-primary: var(--md-green) !important; --lotto-bg: var(--md-bg) !important; --lotto-card: var(--md-surface) !important; --lotto-text: var(--md-ink) !important; --lotto-text-2: var(--md-ink-2) !important; --lotto-marquee-bg: var(--md-surface) !important; --lotto-marquee-bdr: var(--md-line) !important; --lotto-marquee-txt: var(--md-ink-2) !important; --lnav: var(--md-bg) !important; --lnav-a: var(--md-accent) !important; --theme-card: var(--md-surface) !important; --theme-text: var(--md-ink) !important; --bg-app: var(--md-bg) !important; --theme-bg: var(--md-bg) !important; --bs-body-bg: var(--md-bg); --bs-body-color: var(--md-ink); } /* ── 1 · Base ──────────────────────────────────────────────────────────── */ html[data-theme-id="MEDP"]:not(#medp) { color-scheme: dark !important; /* dark scrollbars + native popups */ background: var(--md-bg) !important; color: var(--md-ink) !important; -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } html[data-theme-id="MEDP"]:not(#medp) body { background: var(--md-bg) !important; background-image: none !important; color: var(--md-ink) !important; font-family: var(--md-font) !important; line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } /* the bundle names its weights as separate families (Kanit-Regular …) */ html[data-theme-id="MEDP"]:not(#medp) body, html[data-theme-id="MEDP"]:not(#medp) h1, html[data-theme-id="MEDP"]:not(#medp) h2, html[data-theme-id="MEDP"]:not(#medp) h3, html[data-theme-id="MEDP"]:not(#medp) h4, html[data-theme-id="MEDP"]:not(#medp) h5, html[data-theme-id="MEDP"]:not(#medp) h6, html[data-theme-id="MEDP"]:not(#medp) button, html[data-theme-id="MEDP"]:not(#medp) input, html[data-theme-id="MEDP"]:not(#medp) select, html[data-theme-id="MEDP"]:not(#medp) textarea, html[data-theme-id="MEDP"]:not(#medp) .t-regular, html[data-theme-id="MEDP"]:not(#medp) .t-medium, html[data-theme-id="MEDP"]:not(#medp) .t-bold, html[data-theme-id="MEDP"]:not(#medp) .check-button, html[data-theme-id="MEDP"]:not(#medp) .button-num, html[data-theme-id="MEDP"]:not(#medp) .cycle-b, html[data-theme-id="MEDP"]:not(#medp) .box-login .form-inp input { font-family: var(--md-font) !important; } html[data-theme-id="MEDP"]:not(#medp) .t-regular { font-weight: 400; } html[data-theme-id="MEDP"]:not(#medp) .t-medium { font-weight: 500; } html[data-theme-id="MEDP"]:not(#medp) .t-bold { font-weight: 700; } html[data-theme-id="MEDP"]:not(#medp) ::selection { background: var(--md-selection); color: var(--md-on-primary); } html[data-theme-id="MEDP"]:not(#medp) img { -webkit-user-drag: none; } html[data-theme-id="MEDP"]:not(#medp) a:focus-visible, html[data-theme-id="MEDP"]:not(#medp) button:focus-visible, html[data-theme-id="MEDP"]:not(#medp) select:focus-visible, html[data-theme-id="MEDP"]:not(#medp) textarea:focus-visible, html[data-theme-id="MEDP"]:not(#medp) [tabindex]:focus-visible { outline: 3px solid var(--md-focus-ring) !important; outline-offset: 2px !important; } @media (prefers-reduced-motion: reduce) { html[data-theme-id="MEDP"]:not(#medp) *, html[data-theme-id="MEDP"]:not(#medp) *::before, html[data-theme-id="MEDP"]:not(#medp) *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } } /* The bundle gives .modal-medp z-index 1001, under its own .header (1100), so the guest header and its login card painted OVER the announcement dialog. 1200 clears the whole overlay ladder. */ html[data-theme-id="MEDP"]:not(#medp) .modal-medp { z-index: 1200 !important; } /* ── 2 · Ground: every shell the bundle paints white ───────────────────── */ html[data-theme-id="MEDP"]:not(#medp) #root, html[data-theme-id="MEDP"]:not(#medp) .medp-solid-shell, html[data-theme-id="MEDP"]:not(#medp) .medp-member-shell, html[data-theme-id="MEDP"]:not(#medp) .app-shell, html[data-theme-id="MEDP"]:not(#medp) .cover-images, html[data-theme-id="MEDP"]:not(#medp) .cover, html[data-theme-id="MEDP"]:not(#medp) .cover-header, html[data-theme-id="MEDP"]:not(#medp) .bgi-1, html[data-theme-id="MEDP"]:not(#medp) .v4-shell, html[data-theme-id="MEDP"]:not(#medp) .v4-main, html[data-theme-id="MEDP"]:not(#medp) section.content, html[data-theme-id="MEDP"]:not(#medp) .content, html[data-theme-id="MEDP"]:not(#medp) .container, html[data-theme-id="MEDP"]:not(#medp) .container-xl { background-color: var(--md-bg) !important; background-image: none !important; color: var(--md-ink); } html[data-theme-id="MEDP"]:not(#medp) .cover-images.shadow-super, html[data-theme-id="MEDP"]:not(#medp) .cover-images.app-shell { border: 0 !important; box-shadow: none !important; } /* ── 2b · Tenant background picture (ปรับแต่งเว็บ › ภาพพื้นหลัง) ─────────── */ /* Setting themeBackgroundImage. The bundle never paints it (it pins its own cover to none), so the JS layer writes it as --md-bg-image on with data-medp-bg-image, and here it becomes a fixed layer behind the page. The bundled default is an abstract obsidian/emerald composition with deliberately quiet detail; --md-bg-image-scrim also protects foreground contrast if an administrator later chooses a brighter picture. */ html[data-theme-id="MEDP"][data-medp-bg-image]:not(#medp) body { background: transparent !important; } html[data-theme-id="MEDP"][data-medp-bg-image]:not(#medp) body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(circle at 85% 4%, var(--md-selection), transparent 36%), linear-gradient(var(--md-bg-image-scrim), var(--md-bg-image-scrim)), var(--md-bg-image, none) center / cover no-repeat, var(--md-bg); } html[data-theme-id="MEDP"][data-medp-bg-image]:not(#medp) :is(#root, .medp-solid-shell, .medp-member-shell, .app-shell, .cover-images, .cover, .cover-header, .bgi-1, .v4-shell, .v4-main, section.content, .content, .container, .container-xl) { background-color: transparent !important; } /* the header sits inside the centred container; border-image extends the obsidian band to both viewport edges without widening the page */ html[data-theme-id="MEDP"][data-medp-bg-image]:not(#medp) header.header { border-image: linear-gradient(110deg, var(--md-bg-deep), var(--md-surface), var(--md-bg-deep)) fill 0 / / 0 100vmax !important; } /* ── 3 · Text: the bundle's "dark ink" utilities become light ink ──────── */ html[data-theme-id="MEDP"]:not(#medp) .c-dark, html[data-theme-id="MEDP"]:not(#medp) .c-black, html[data-theme-id="MEDP"]:not(#medp) .color-black, html[data-theme-id="MEDP"]:not(#medp) .text-black, html[data-theme-id="MEDP"]:not(#medp) .text-dark, html[data-theme-id="MEDP"]:not(#medp) .c-gray, html[data-theme-id="MEDP"]:not(#medp) .txt-link, html[data-theme-id="MEDP"]:not(#medp) .txt-link h1, html[data-theme-id="MEDP"]:not(#medp) .txt-link h2, html[data-theme-id="MEDP"]:not(#medp) .txt-link h3, html[data-theme-id="MEDP"]:not(#medp) .txt-link h5, html[data-theme-id="MEDP"]:not(#medp) .txt-link h6, html[data-theme-id="MEDP"]:not(#medp) .txt-link small, html[data-theme-id="MEDP"]:not(#medp) .c-white, html[data-theme-id="MEDP"]:not(#medp) .text-white { color: var(--md-ink) !important; -webkit-text-fill-color: currentColor !important; } html[data-theme-id="MEDP"]:not(#medp) .text-muted, html[data-theme-id="MEDP"]:not(#medp) .c-gray-2, html[data-theme-id="MEDP"]:not(#medp) .size-12.c-dark, html[data-theme-id="MEDP"]:not(#medp) small.c-dark.size-12 { color: var(--md-ink-2) !important; } /* accent text: .c-theme/.c-green/.c-red all resolve to rgb(var(--theme)) in the bundle, which is now the reference green #007510 - 2.4:1 on the ground. Text keeps the same hue family at a readable lightness. */ html[data-theme-id="MEDP"]:not(#medp) .c-theme, html[data-theme-id="MEDP"]:not(#medp) .color-theme, html[data-theme-id="MEDP"]:not(#medp) .link-color-theme, html[data-theme-id="MEDP"]:not(#medp) .link-color-primary, html[data-theme-id="MEDP"]:not(#medp) .c-green, html[data-theme-id="MEDP"]:not(#medp) .c-red, html[data-theme-id="MEDP"]:not(#medp) .txt-link.c-red, html[data-theme-id="MEDP"]:not(#medp) .txt-link.c-green, html[data-theme-id="MEDP"]:not(#medp) .c-primary { color: var(--md-accent) !important; -webkit-text-fill-color: currentColor !important; } html[data-theme-id="MEDP"]:not(#medp) .text-danger, html[data-theme-id="MEDP"]:not(#medp) .c-danger { color: var(--md-red-text) !important; } html[data-theme-id="MEDP"]:not(#medp) .text-success { color: var(--md-accent) !important; } html[data-theme-id="MEDP"]:not(#medp) .text-warning { color: var(--md-gold) !important; } html[data-theme-id="MEDP"]:not(#medp) a:not([class]) { color: var(--md-ink); } html[data-theme-id="MEDP"]:not(#medp) .txt-shadow-theme { text-shadow: none !important; } html[data-theme-id="MEDP"]:not(#medp) hr { border-color: var(--md-line) !important; opacity: 1; } html[data-theme-id="MEDP"]:not(#medp) .medp-dup { display: none !important; } /* subtitle that only repeats its title */ /* ── 4 · Surfaces ──────────────────────────────────────────────────────── */ /* level 1 - the v-card of the reference */ html[data-theme-id="MEDP"]:not(#medp) .bg-white, html[data-theme-id="MEDP"]:not(#medp) .bg-light-3, html[data-theme-id="MEDP"]:not(#medp) .bgc-3, html[data-theme-id="MEDP"]:not(#medp) .bgc-7, html[data-theme-id="MEDP"]:not(#medp) .bg-theme-op1, html[data-theme-id="MEDP"]:not(#medp) .bg-theme-op2, html[data-theme-id="MEDP"]:not(#medp) .bg-primary-op8, html[data-theme-id="MEDP"]:not(#medp) .bg-gradient-white-opacity, html[data-theme-id="MEDP"]:not(#medp) .bg-gradient-theme-opacity-top, html[data-theme-id="MEDP"]:not(#medp) .shadow-super:not(.cover-images), html[data-theme-id="MEDP"]:not(#medp) .medp-solid-card, html[data-theme-id="MEDP"]:not(#medp) .medp-bank-card, html[data-theme-id="MEDP"]:not(#medp) .medp-account-card, html[data-theme-id="MEDP"]:not(#medp) .cover-dashboard, html[data-theme-id="MEDP"]:not(#medp) .card, html[data-theme-id="MEDP"]:not(#medp) .modal-content { background-color: var(--md-surface) !important; background-image: linear-gradient(145deg, var(--md-surface-2), var(--md-surface) 72%) !important; color: var(--md-ink) !important; border-color: var(--md-line) !important; } html[data-theme-id="MEDP"]:not(#medp) .shadow-super:not(.cover-images), html[data-theme-id="MEDP"]:not(#medp) .shadow-super-master, html[data-theme-id="MEDP"]:not(#medp) .shadow-super-black, html[data-theme-id="MEDP"]:not(#medp) .bx-sd { box-shadow: var(--md-elev-card) !important; border: 1px solid var(--md-line) !important; } html[data-theme-id="MEDP"]:not(#medp) .shadow-sm, html[data-theme-id="MEDP"]:not(#medp) .shadow { box-shadow: var(--md-elev-1) !important; } /* level 2 - anything card-like nested in a card */ html[data-theme-id="MEDP"]:not(#medp) .bg-white .bg-white, html[data-theme-id="MEDP"]:not(#medp) .shadow-super .bg-white, html[data-theme-id="MEDP"]:not(#medp) .bg-theme-op2 .bg-white, html[data-theme-id="MEDP"]:not(#medp) .bgc-7 .bg-white, html[data-theme-id="MEDP"]:not(#medp) .cover-dashboard .bg-white, html[data-theme-id="MEDP"]:not(#medp) div.bgc-2, html[data-theme-id="MEDP"]:not(#medp) .medp-solid-card .bg-white, html[data-theme-id="MEDP"]:not(#medp) .bg-light, html[data-theme-id="MEDP"]:not(#medp) .bg-white-op5, html[data-theme-id="MEDP"]:not(#medp) .bg-light-2 { background-color: var(--md-surface-2) !important; background-image: linear-gradient(145deg, var(--md-surface-3), var(--md-surface-2) 74%) !important; color: var(--md-ink) !important; } html[data-theme-id="MEDP"]:not(#medp) .bg-white-op2 { background: var(--md-inset) !important; background-image: none !important; color: var(--md-ink) !important; } html[data-theme-id="MEDP"]:not(#medp) .bdr-24 { border-radius: var(--md-radius-card) !important; } html[data-theme-id="MEDP"]:not(#medp) .bdr-10 { border-radius: 10px !important; } html[data-theme-id="MEDP"]:not(#medp) .bdc-1, html[data-theme-id="MEDP"]:not(#medp) .bdc-2, html[data-theme-id="MEDP"]:not(#medp) .bdc-i { border-color: var(--md-line) !important; } html[data-theme-id="MEDP"]:not(#medp) .border, html[data-theme-id="MEDP"]:not(#medp) .border-top, html[data-theme-id="MEDP"]:not(#medp) .border-bottom { border-color: var(--md-line) !important; } /* the bundle's numbered swatches (.bgc-N) mapped onto this palette; the bright ones get a darker step so white labels keep 4.5:1 */ html[data-theme-id="MEDP"]:not(#medp) .bgc-1, html[data-theme-id="MEDP"]:not(#medp) .bgc-11 { background: var(--md-green) !important; color: var(--md-on-primary) !important; } html[data-theme-id="MEDP"]:not(#medp) .bgc-5 { background: var(--md-orange) !important; color: var(--md-on-color) !important; } html[data-theme-id="MEDP"]:not(#medp) .bgc-6, html[data-theme-id="MEDP"]:not(#medp) .bgg-2 { background: var(--md-gold) !important; background-image: none !important; color: var(--md-on-gold) !important; } html[data-theme-id="MEDP"]:not(#medp) .bgc-8 { background: var(--md-blue) !important; color: var(--md-on-color) !important; } html[data-theme-id="MEDP"]:not(#medp) .bgc-9 { background: var(--md-red) !important; color: var(--md-on-color) !important; } html[data-theme-id="MEDP"]:not(#medp) .bgg-3 { color: var(--md-on-gold) !important; } html[data-theme-id="MEDP"]:not(#medp) .bgc-5 *, html[data-theme-id="MEDP"]:not(#medp) .bgc-8 *, html[data-theme-id="MEDP"]:not(#medp) .bgc-9 * { color: var(--md-on-color) !important; -webkit-text-fill-color: var(--md-on-color) !important; } html[data-theme-id="MEDP"]:not(#medp) .bgc-6 *, html[data-theme-id="MEDP"]:not(#medp) .bgg-2 * { color: var(--md-on-gold) !important; -webkit-text-fill-color: var(--md-on-gold) !important; } /* ── 5 · Forms: white slots on dark, like the reference ───────────────── */ html[data-theme-id="MEDP"]:not(#medp) input, html[data-theme-id="MEDP"]:not(#medp) select, html[data-theme-id="MEDP"]:not(#medp) textarea { color-scheme: light; -webkit-text-fill-color: currentColor !important; } html[data-theme-id="MEDP"]:not(#medp) .form-inp { background: var(--md-field) !important; border: 1px solid transparent !important; border-radius: var(--md-radius-field) !important; box-shadow: none !important; height: auto !important; min-height: 48px; display: flex !important; align-items: center; transition: border-color .15s ease, box-shadow .15s ease; } html[data-theme-id="MEDP"]:not(#medp) .form-inp .icon, html[data-theme-id="MEDP"]:not(#medp) .form-inp .icon i, html[data-theme-id="MEDP"]:not(#medp) .form-inp i.c-black { color: var(--md-field-icon) !important; -webkit-text-fill-color: currentColor !important; background: transparent !important; } html[data-theme-id="MEDP"]:not(#medp) .form-inp input, html[data-theme-id="MEDP"]:not(#medp) .form-inp select, html[data-theme-id="MEDP"]:not(#medp) input.input-show, html[data-theme-id="MEDP"]:not(#medp) input.form-control, html[data-theme-id="MEDP"]:not(#medp) select.form-select, html[data-theme-id="MEDP"]:not(#medp) select.form-control, html[data-theme-id="MEDP"]:not(#medp) textarea.form-control, html[data-theme-id="MEDP"]:not(#medp) .medp-solid-input { font-size: 16px !important; /* stops iOS zoom-on-focus */ background: var(--md-field) !important; color: var(--md-field-ink) !important; -webkit-text-fill-color: var(--md-field-ink) !important; caret-color: var(--md-field-ink); } html[data-theme-id="MEDP"]:not(#medp) input.input-show, html[data-theme-id="MEDP"]:not(#medp) input.form-control, html[data-theme-id="MEDP"]:not(#medp) select.form-select, html[data-theme-id="MEDP"]:not(#medp) select.form-control, html[data-theme-id="MEDP"]:not(#medp) textarea.form-control, html[data-theme-id="MEDP"]:not(#medp) .medp-solid-input { border: 1px solid transparent !important; border-radius: var(--md-radius-field) !important; box-shadow: none !important; min-height: 48px; } html[data-theme-id="MEDP"]:not(#medp) .form-inp input { background: transparent !important; border: 0 !important; } html[data-theme-id="MEDP"]:not(#medp) input::placeholder, html[data-theme-id="MEDP"]:not(#medp) textarea::placeholder { color: var(--md-field-hint) !important; -webkit-text-fill-color: var(--md-field-hint) !important; opacity: 1 !important; } html[data-theme-id="MEDP"]:not(#medp) input[readonly], html[data-theme-id="MEDP"]:not(#medp) input:disabled, html[data-theme-id="MEDP"]:not(#medp) textarea:disabled, html[data-theme-id="MEDP"]:not(#medp) select:disabled { background: var(--md-field-disabled) !important; color: var(--md-field-disabled-ink) !important; -webkit-text-fill-color: var(--md-field-disabled-ink) !important; } html[data-theme-id="MEDP"]:not(#medp) .form-inp:focus-within, html[data-theme-id="MEDP"]:not(#medp) input.input-show:focus, html[data-theme-id="MEDP"]:not(#medp) input.form-control:focus, html[data-theme-id="MEDP"]:not(#medp) .medp-solid-input:focus { border-color: var(--md-accent) !important; box-shadow: 0 0 0 3px var(--md-accent-soft) !important; outline: none !important; } html[data-theme-id="MEDP"]:not(#medp) .form-inp input:focus-visible { outline: none !important; } html[data-theme-id="MEDP"]:not(#medp) label, html[data-theme-id="MEDP"]:not(#medp) .form-label { color: var(--md-ink) !important; } html[data-theme-id="MEDP"]:not(#medp) input[type="checkbox"], html[data-theme-id="MEDP"]:not(#medp) input[type="radio"] { accent-color: var(--md-green); } /* Bootstrap ships these at 16px, under the 24px pointer-target floor. */ html[data-theme-id="MEDP"]:not(#medp) .form-check-input { width: 24px !important; height: 24px !important; margin-top: 0 !important; flex-shrink: 0; background-color: var(--md-field) !important; border: 1px solid var(--md-field-border) !important; } html[data-theme-id="MEDP"]:not(#medp) .form-check-input:checked { background-color: var(--md-green) !important; border-color: var(--md-green) !important; } /* Bootstrap indents the row by 24px and pulls the input back out by the same amount; both have to go or the grown box lands 24px off its label. */ html[data-theme-id="MEDP"]:not(#medp) .form-check { display: flex !important; align-items: center !important; gap: 8px; padding-left: 0 !important; } html[data-theme-id="MEDP"]:not(#medp) .form-check .form-check-input { margin-left: 0 !important; } html[data-theme-id="MEDP"]:not(#medp) .form-check .form-check-label { margin: 0 !important; color: var(--md-ink) !important; } /* ── 6 · Buttons ───────────────────────────────────────────────────────── */ /* primary: deep emerald with restrained lift */ html[data-theme-id="MEDP"]:not(#medp) .btn_main, html[data-theme-id="MEDP"]:not(#medp) .link-bg-master, html[data-theme-id="MEDP"]:not(#medp) .link-bg-theme, html[data-theme-id="MEDP"]:not(#medp) .bg-master, html[data-theme-id="MEDP"]:not(#medp) .bgg-1, html[data-theme-id="MEDP"]:not(#medp) .bgr-5, html[data-theme-id="MEDP"]:not(#medp) .bg-theme, html[data-theme-id="MEDP"]:not(#medp) .check-button.btn-submit, html[data-theme-id="MEDP"]:not(#medp) button.btn-submit, html[data-theme-id="MEDP"]:not(#medp) a.btn-submit, html[data-theme-id="MEDP"]:not(#medp) .btn-primary, html[data-theme-id="MEDP"]:not(#medp) .btn-success, html[data-theme-id="MEDP"]:not(#medp) .medp-withdraw-cta { background-color: var(--md-green) !important; background-image: linear-gradient(135deg, var(--md-green-hi), var(--md-green)) !important; color: var(--md-on-primary) !important; -webkit-text-fill-color: var(--md-on-primary) !important; border: 1px solid var(--md-accent-soft) !important; box-shadow: var(--md-elev-1) !important; font-weight: 600 !important; text-shadow: none !important; } html[data-theme-id="MEDP"]:not(#medp) .btn_main *, html[data-theme-id="MEDP"]:not(#medp) .link-bg-master *, html[data-theme-id="MEDP"]:not(#medp) .link-bg-theme *, html[data-theme-id="MEDP"]:not(#medp) .bgg-1 *, html[data-theme-id="MEDP"]:not(#medp) .bg-theme *, html[data-theme-id="MEDP"]:not(#medp) .medp-withdraw-cta * { color: inherit !important; -webkit-text-fill-color: currentColor !important; } html[data-theme-id="MEDP"]:not(#medp) .btn_main, html[data-theme-id="MEDP"]:not(#medp) .button-main, html[data-theme-id="MEDP"]:not(#medp) .check-button, html[data-theme-id="MEDP"]:not(#medp) button.btn-submit, html[data-theme-id="MEDP"]:not(#medp) .medp-withdraw-cta, html[data-theme-id="MEDP"]:not(#medp) .bgg-1.check-button { border-radius: var(--md-radius-btn) !important; min-height: 44px; transition: background-color .15s ease, filter .15s ease, transform .15s ease; } @media (hover: hover) { html[data-theme-id="MEDP"]:not(#medp) .btn_main:not([disabled]):hover, html[data-theme-id="MEDP"]:not(#medp) .link-bg-master:hover, html[data-theme-id="MEDP"]:not(#medp) .link-bg-theme:not(.medp-dash-row):hover, html[data-theme-id="MEDP"]:not(#medp) .bgg-1:hover, html[data-theme-id="MEDP"]:not(#medp) .btn-submit:hover, html[data-theme-id="MEDP"]:not(#medp) .medp-withdraw-cta:hover { background-color: var(--md-green-hi) !important; background-image: linear-gradient(135deg, var(--md-green), var(--md-green-hi)) !important; color: var(--md-on-primary) !important; } } html[data-theme-id="MEDP"]:not(#medp) .btn_main:not([disabled]):active, html[data-theme-id="MEDP"]:not(#medp) .check-button:active, html[data-theme-id="MEDP"]:not(#medp) .bet-key:active { transform: translateY(1px); } html[data-theme-id="MEDP"]:not(#medp) .btn_main[disabled], html[data-theme-id="MEDP"]:not(#medp) .btn_main.disabled, html[data-theme-id="MEDP"]:not(#medp) button[disabled] { cursor: not-allowed; transform: none !important; filter: none !important; } html[data-theme-id="MEDP"]:not(#medp) button[disabled].bgg-1, html[data-theme-id="MEDP"]:not(#medp) button[disabled].btn_main, html[data-theme-id="MEDP"]:not(#medp) button[disabled].check-button { background: var(--md-btn-disabled) !important; color: var(--md-btn-disabled-ink) !important; -webkit-text-fill-color: var(--md-btn-disabled-ink) !important; box-shadow: none !important; } /* secondary: quiet forest green; still clearly distinct from the primary */ html[data-theme-id="MEDP"]:not(#medp) .bg-gradient-light, html[data-theme-id="MEDP"]:not(#medp) button.bg-gradient-light, html[data-theme-id="MEDP"]:not(#medp) .btn-secondary, html[data-theme-id="MEDP"]:not(#medp) .btn-light { background-color: var(--md-green-2) !important; background-image: linear-gradient(135deg, var(--md-green-2-hi), var(--md-green-2)) !important; color: var(--md-on-primary) !important; -webkit-text-fill-color: var(--md-on-primary) !important; border: 1px solid var(--md-line) !important; border-radius: var(--md-radius-btn) !important; box-shadow: var(--md-elev-1) !important; } @media (hover: hover) { html[data-theme-id="MEDP"]:not(#medp) .bg-gradient-light:hover { background-color: var(--md-green-2-hi) !important; background-image: none !important; } } html[data-theme-id="MEDP"]:not(#medp) .bg-gradient-light * { color: inherit !important; -webkit-text-fill-color: currentColor !important; } /* money actions */ html[data-theme-id="MEDP"]:not(#medp) a[href="/topup"].check-button, html[data-theme-id="MEDP"]:not(#medp) a[href="/topup"].btn_main, html[data-theme-id="MEDP"]:not(#medp) button.btn-deposit { background: var(--md-green) !important; background-image: none !important; color: var(--md-on-color) !important; } html[data-theme-id="MEDP"]:not(#medp) a[href="/withdrawal"].check-button, html[data-theme-id="MEDP"]:not(#medp) a[href="/withdrawal"].btn_main, html[data-theme-id="MEDP"]:not(#medp) button.btn-withdraw { background: var(--md-red) !important; background-image: none !important; color: var(--md-on-color) !important; } html[data-theme-id="MEDP"]:not(#medp) a[href="/topup"].check-button *, html[data-theme-id="MEDP"]:not(#medp) a[href="/withdrawal"].check-button * { color: var(--md-on-color) !important; -webkit-text-fill-color: var(--md-on-color) !important; } /* ── 7 · Header, marquee, drawer, footer ───────────────────────────────── */ html[data-theme-id="MEDP"]:not(#medp) header.header, html[data-theme-id="MEDP"]:not(#medp) .medp-guest-header, html[data-theme-id="MEDP"]:not(#medp) .medp-member-header { background-color: var(--md-header-bg) !important; background-image: linear-gradient(110deg, var(--md-bg-deep), var(--md-surface), var(--md-bg-deep)) !important; border: 0 !important; border-bottom: 1px solid var(--md-line) !important; box-shadow: 0 8px 28px var(--md-shadow-1) !important; color: var(--md-ink) !important; } html[data-theme-id="MEDP"]:not(#medp) header.header:empty { border-bottom: 0 !important; } html[data-theme-id="MEDP"]:not(#medp) .medp-member-header__container, html[data-theme-id="MEDP"]:not(#medp) .medp-member-header .container-xl { background: transparent !important; } /* logo: official มีดี889 artwork, unfiltered */ html[data-theme-id="MEDP"]:not(#medp) .logo-default img, html[data-theme-id="MEDP"]:not(#medp) .medp-guest-logo-link img, html[data-theme-id="MEDP"]:not(#medp) .medp-member-logo img { filter: none !important; background: transparent !important; box-shadow: none !important; object-fit: contain; } html[data-theme-id="MEDP"]:not(#medp) .medp-guest-logo-link .logo-default, html[data-theme-id="MEDP"]:not(#medp) .logo-default { max-height: none !important; } html[data-theme-id="MEDP"]:not(#medp) .medp-guest-logo-link .logo-default img { height: 64px !important; width: 64px !important; max-height: none !important; } html[data-theme-id="MEDP"]:not(#medp) .medp-member-logo { height: auto !important; } html[data-theme-id="MEDP"]:not(#medp) .medp-member-logo img { height: 52px !important; width: 52px !important; max-height: none !important; } @media (min-width: 768px) { html[data-theme-id="MEDP"]:not(#medp) .medp-guest-logo-link .logo-default img { height: 84px !important; width: 84px !important; } html[data-theme-id="MEDP"]:not(#medp) .medp-member-logo img { height: 60px !important; width: 60px !important; } } /* member header chips (home / LINE / menu): 44px, the minimum touch target */ html[data-theme-id="MEDP"]:not(#medp) .medp-header-chip { width: 44px !important; height: 44px !important; min-width: 44px; display: inline-flex !important; align-items: center; justify-content: center; border-radius: var(--md-radius-btn) !important; background-color: var(--md-surface-2) !important; background-image: linear-gradient(145deg, var(--md-surface-3), var(--md-surface-2)) !important; border: 1px solid var(--md-line) !important; box-shadow: var(--md-elev-1) !important; color: var(--md-header-chip-ink) !important; -webkit-text-fill-color: var(--md-header-chip-ink) !important; } html[data-theme-id="MEDP"]:not(#medp) .medp-header-chip i { color: inherit !important; font-size: 16px; } html[data-theme-id="MEDP"]:not(#medp) .medp-header-chip[href*="line.me"] { background: var(--md-line-green) !important; } html[data-theme-id="MEDP"]:not(#medp) .medp-header-chip[href*="line.me"] i { color: var(--md-on-color) !important; } html[data-theme-id="MEDP"]:not(#medp) .medp-header-chip[href="#menu"] { background: var(--md-green) !important; } @media (hover: hover) { html[data-theme-id="MEDP"]:not(#medp) .medp-header-chip:hover { filter: brightness(1.15); } } /* guest header links */ html[data-theme-id="MEDP"]:not(#medp) .medp-header-utils__link { color: var(--md-ink) !important; font-weight: 400; text-decoration: underline !important; text-underline-offset: 3px; display: inline-flex !important; align-items: center !important; min-height: 44px !important; padding: 8px 6px !important; } html[data-theme-id="MEDP"]:not(#medp) .medp-header-utils__sep { color: var(--md-ink-3) !important; opacity: 1 !important; margin: 0 .25rem; } /* announcement strip (JS turns the marquee into a static chip) */ html[data-theme-id="MEDP"]:not(#medp) .wrap-noti marquee, html[data-theme-id="MEDP"]:not(#medp) .medp-marquee marquee { display: none !important; } html[data-theme-id="MEDP"]:not(#medp) .wrap-noti, html[data-theme-id="MEDP"]:not(#medp) .medp-marquee { display: flex !important; align-items: center !important; gap: .6rem !important; background-color: var(--md-surface) !important; background-image: linear-gradient(110deg, var(--md-surface-2), var(--md-surface)) !important; border: 1px solid var(--md-line) !important; border-radius: var(--md-radius-btn) !important; box-shadow: var(--md-elev-1) !important; padding: 8px 12px !important; margin: 0 !important; overflow: hidden !important; color: var(--md-ink-2) !important; animation: none !important; } html[data-theme-id="MEDP"]:not(#medp) .medp-marquee__icon, html[data-theme-id="MEDP"]:not(#medp) .wrap-noti > .icon { flex: 0 0 auto !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 1.25rem !important; color: var(--md-accent) !important; animation: none !important; transform: none !important; } html[data-theme-id="MEDP"]:not(#medp) .medp-marquee__icon i { color: inherit !important; } html[data-theme-id="MEDP"]:not(#medp) .medp-status-chip { flex: 1 1 auto !important; min-width: 0 !important; font-size: .875rem !important; font-weight: 400 !important; line-height: 1.4 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; color: var(--md-ink-2) !important; background: transparent !important; border: 0 !important; } html[data-theme-id="MEDP"]:not(#medp) .medp-status-chip__label { display: inline-block !important; margin-right: .5rem !important; padding: 1px 10px !important; border-radius: var(--md-radius-chip) !important; font-size: .75rem !important; font-weight: 500 !important; background: var(--md-green) !important; color: var(--md-on-primary) !important; -webkit-text-fill-color: var(--md-on-primary) !important; } /* drawer */ html[data-theme-id="MEDP"]:not(#medp) .menu-list, html[data-theme-id="MEDP"]:not(#medp) .menu-list.bgc-4 { background: var(--md-drawer-bg) !important; color: var(--md-ink) !important; border-right: 1px solid var(--md-line) !important; box-shadow: 8px 0 32px var(--md-shadow-float) !important; } html[data-theme-id="MEDP"]:not(#medp) .menu-list .bgg-1 { background: var(--md-surface) !important; box-shadow: none !important; border-bottom: 1px solid var(--md-line) !important; border-radius: 0 !important; } html[data-theme-id="MEDP"]:not(#medp) .menu-list .bgg-1 h1 { color: var(--md-ink-2) !important; } html[data-theme-id="MEDP"]:not(#medp) .menu-list .bgg-1 h6.t-regular { color: var(--md-gold) !important; font-weight: 700; } html[data-theme-id="MEDP"]:not(#medp) .menu-list ul { background: transparent !important; } html[data-theme-id="MEDP"]:not(#medp) .menu-list li a, html[data-theme-id="MEDP"]:not(#medp) .menu-list a.txt-link { display: flex !important; align-items: center; min-height: 44px; padding: 8px 12px !important; margin-bottom: 6px !important; border-radius: var(--md-radius-btn) !important; color: var(--md-ink) !important; -webkit-text-fill-color: currentColor !important; background: var(--md-surface) !important; } html[data-theme-id="MEDP"]:not(#medp) .menu-list li a i { color: var(--md-accent) !important; width: 1.4rem; } @media (hover: hover) { html[data-theme-id="MEDP"]:not(#medp) .menu-list li a:hover { background: var(--md-surface-2) !important; } } html[data-theme-id="MEDP"]:not(#medp) .menu-list a[href="#logout"] { justify-content: center; background: var(--md-red) !important; color: var(--md-on-color) !important; margin-top: 12px !important; font-weight: 500 !important; } html[data-theme-id="MEDP"]:not(#medp) .menu-list a[href="#logout"] i { color: var(--md-on-color) !important; } html[data-theme-id="MEDP"]:not(#medp) .close-menu { background: var(--md-surface-2) !important; border-radius: var(--md-radius-btn) !important; width: 44px !important; height: 44px !important; display: inline-flex !important; align-items: center; justify-content: center; } html[data-theme-id="MEDP"]:not(#medp) .close-menu i { color: var(--md-ink) !important; } /* footer */ html[data-theme-id="MEDP"]:not(#medp) footer, html[data-theme-id="MEDP"]:not(#medp) .medp-footer { background-color: var(--md-footer-bg) !important; background-image: linear-gradient(110deg, var(--md-bg-deep), var(--md-surface), var(--md-bg-deep)) !important; border-top: 1px solid var(--md-line) !important; color: var(--md-ink-3) !important; } html[data-theme-id="MEDP"]:not(#medp) .medp-footer__copy, html[data-theme-id="MEDP"]:not(#medp) footer small { color: var(--md-ink-3) !important; -webkit-text-fill-color: currentColor !important; line-height: 1.6; } /* a short page (เปลี่ยนรหัสผ่าน, รายงานการเงิน) left the footer mid-screen with bare ground under it: the member shell is already one screen tall, so it stacks as a column and the page body takes the remaining space (the footer keeps its own top margin, so long pages are unchanged) */ html[data-theme-id="MEDP"]:not(#medp) .medp-member-shell { display: flex !important; flex-direction: column; } html[data-theme-id="MEDP"]:not(#medp) .medp-member-shell > section.content { flex: 1 0 auto; } /* ── 8 · Page title bar + back pill ────────────────────────────────────── */ html[data-theme-id="MEDP"]:not(#medp) .container-xl > .bg-gradient-theme.bdr-24, html[data-theme-id="MEDP"]:not(#medp) .title-page, html[data-theme-id="MEDP"]:not(#medp) .header-page { background-color: var(--md-surface) !important; background-image: linear-gradient(110deg, var(--md-surface-2), var(--md-surface)) !important; border: 1px solid var(--md-line) !important; box-shadow: var(--md-elev-1) !important; color: var(--md-ink) !important; border-radius: var(--md-radius-card) !important; padding: 4px 8px !important; margin-bottom: 8px !important; } html[data-theme-id="MEDP"]:not(#medp) .container-xl > .bg-gradient-theme.bdr-24 div.bdr-24 { background: transparent !important; } html[data-theme-id="MEDP"]:not(#medp) .container-xl > .bg-gradient-theme.bdr-24 h4, html[data-theme-id="MEDP"]:not(#medp) .container-xl > .bg-gradient-theme.bdr-24 h5, html[data-theme-id="MEDP"]:not(#medp) .title-page h4, html[data-theme-id="MEDP"]:not(#medp) .title-page h5 { color: var(--md-ink) !important; font-weight: 700 !important; font-size: 1.25rem !important; margin: 0 !important; } html[data-theme-id="MEDP"]:not(#medp) .container-xl > .bg-gradient-theme.bdr-24 h4 i { color: var(--md-accent) !important; } /* The back pill is - display:inline, so its fill spilled over the title once the label wrapped. inline-flex makes it one box and nowrap keeps "หน้าหลัก" whole. */ html[data-theme-id="MEDP"]:not(#medp) a > small.bg-black, html[data-theme-id="MEDP"]:not(#medp) small.txt-link.bg-black { display: inline-flex !important; align-items: center; gap: 4px; white-space: nowrap !important; font-size: 14px !important; font-weight: 500 !important; padding: 10px 14px !important; min-height: 44px; background: var(--md-green-2) !important; color: var(--md-on-primary) !important; -webkit-text-fill-color: var(--md-on-primary) !important; border-radius: var(--md-radius-btn) !important; box-shadow: var(--md-elev-1) !important; } html[data-theme-id="MEDP"]:not(#medp) a > small.bg-black i { color: inherit !important; } html[data-theme-id="MEDP"]:not(#medp) .d-flex.justify-content-between:has(> a > small.bg-black) { gap: 12px; } /* ── 9 · Auth pages (/signin · /signup · /forgot-password) ─────────────── */ html[data-theme-id="MEDP"]:not(#medp) .wrap-login, html[data-theme-id="MEDP"]:not(#medp) .wrap-login.bg-white { max-width: 440px; margin-left: auto !important; margin-right: auto !important; background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; } html[data-theme-id="MEDP"]:not(#medp) .wrap-login > .bdr-24 { padding: 0 !important; background: transparent !important; } html[data-theme-id="MEDP"]:not(#medp) .wrap-login .img-regis { width: 132px !important; max-width: 132px !important; margin-bottom: 8px; } html[data-theme-id="MEDP"]:not(#medp) .wrap-login .img-regis img { width: 100% !important; height: auto; } html[data-theme-id="MEDP"]:not(#medp) .box-regis { background: transparent !important; } html[data-theme-id="MEDP"]:not(#medp) .wrap-login .box-login { background: var(--md-surface) !important; border: 0 !important; border-radius: var(--md-radius-card) !important; box-shadow: var(--md-elev-card) !important; padding: 16px !important; } html[data-theme-id="MEDP"]:not(#medp) .wrap-login .box-login > .bdr-10 { padding: 0 !important; background: transparent !important; } html[data-theme-id="MEDP"]:not(#medp) .wrap-login h3, html[data-theme-id="MEDP"]:not(#medp) .wrap-login .txt-user { color: var(--md-ink) !important; font-weight: 700 !important; font-size: 1.6rem !important; } html[data-theme-id="MEDP"]:not(#medp) .wrap-login h6.c-dark, html[data-theme-id="MEDP"]:not(#medp) .wrap-login small.c-dark { color: var(--md-ink-2) !important; font-weight: 400 !important; font-size: .95rem; } html[data-theme-id="MEDP"]:not(#medp) .wrap-login .form-inp { margin-bottom: 12px !important; } html[data-theme-id="MEDP"]:not(#medp) .wrap-login .btn_main { min-height: 48px; font-size: 16px !important; } /* The secondary pair under the password field sits in two col-6 cells; their 16px side padding broke "สมัครสมาชิก" onto three lines at 375px. */ html[data-theme-id="MEDP"]:not(#medp) .box-login .row > [class*="col-"] { display: flex; } html[data-theme-id="MEDP"]:not(#medp) .box-login .row > [class*="col-"] > * { width: 100%; } html[data-theme-id="MEDP"]:not(#medp) .box-login .row > [class*="col-6"] button { padding-left: 8px !important; padding-right: 8px !important; min-height: 44px; height: 100%; } html[data-theme-id="MEDP"]:not(#medp) .wrap-login a[href="/signin"], html[data-theme-id="MEDP"]:not(#medp) .wrap-login a.txt-link:not(:has(button)) { color: var(--md-ink) !important; text-decoration: underline; text-underline-offset: 3px; } /* signup / OTP step chips */ html[data-theme-id="MEDP"]:not(#medp) .wrap-login .bgc-6, html[data-theme-id="MEDP"]:not(#medp) small.bgc-6 { background: var(--md-step-bg) !important; /* the reference's #f44336 is 3.7:1 with white */ color: var(--md-on-color) !important; -webkit-text-fill-color: var(--md-on-color) !important; border-radius: var(--md-radius-chip) !important; display: inline-flex !important; align-items: center; min-height: 32px; padding: 2px 12px !important; } /* ── 10 · Guest header (home) ──────────────────────────────────────────── */ html[data-theme-id="MEDP"]:not(#medp) .medp-guest-header { padding: 12px 0 !important; } html[data-theme-id="MEDP"]:not(#medp) .medp-guest-header .box-login { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; } html[data-theme-id="MEDP"]:not(#medp) .medp-guest-header .form-inp { min-height: 44px; border: 0 !important; } html[data-theme-id="MEDP"]:not(#medp) .medp-guest-header .form-inp input { min-height: 44px !important; height: 44px !important; } html[data-theme-id="MEDP"]:not(#medp) .medp-guest-header .btn_main, html[data-theme-id="MEDP"]:not(#medp) .medp-guest-header .btn-of-login-default .btn_main { height: 44px !important; min-height: 44px !important; padding: 0 16px !important; font-size: 15px !important; line-height: 1.2 !important; border-radius: var(--md-radius-btn) !important; } html[data-theme-id="MEDP"]:not(#medp) .medp-guest-header .btn_main i { font-size: 15px !important; } html[data-theme-id="MEDP"]:not(#medp) .medp-guest-header a.medp-cta-register, html[data-theme-id="MEDP"]:not(#medp) .medp-guest-header a.btn_main.bg-white { background: var(--md-green-2) !important; color: var(--md-on-primary) !important; -webkit-text-fill-color: var(--md-on-primary) !important; } html[data-theme-id="MEDP"]:not(#medp) .medp-guest-header a.medp-cta-contact, html[data-theme-id="MEDP"]:not(#medp) .medp-guest-header a.medp-cta-contact.btn_main { background: var(--md-surface-2) !important; color: var(--md-ink) !important; -webkit-text-fill-color: var(--md-ink) !important; gap: .45rem; } html[data-theme-id="MEDP"]:not(#medp) .medp-guest-header a.medp-cta-contact i { color: var(--md-line-green) !important; -webkit-text-fill-color: var(--md-line-green) !important; font-size: 18px !important; } html[data-theme-id="MEDP"]:not(#medp) .medp-guest-header .medp-login-row, html[data-theme-id="MEDP"]:not(#medp) .medp-guest-header form .row { row-gap: 10px !important; } @media (max-width: 767.98px) { html[data-theme-id="MEDP"]:not(#medp) .medp-guest-header { padding: 10px 4px !important; } html[data-theme-id="MEDP"]:not(#medp) .medp-guest-header .medp-header-utils { display: flex !important; flex-wrap: wrap !important; gap: 0 8px !important; justify-content: center !important; margin-top: 4px; } html[data-theme-id="MEDP"]:not(#medp) .medp-guest-header .btn-of-login-default { width: 100%; } } /* 768-1099px: the inline sign-in row does not fit, so the header keeps the phone arrangement centred in a 560px column. */ @media (min-width: 768px) and (max-width: 1099.98px) { html[data-theme-id="MEDP"]:not(#medp) .medp-guest-header > div > .row { max-width: 560px; margin-left: auto !important; margin-right: auto !important; } html[data-theme-id="MEDP"]:not(#medp) .medp-guest-header > div > .row > .col-md-2, html[data-theme-id="MEDP"]:not(#medp) .medp-guest-header > div > .row > .col-md-10 { flex: 0 0 100%; width: 100%; max-width: 100%; } html[data-theme-id="MEDP"]:not(#medp) .medp-guest-header form > .row > .col-md-2 { flex: 0 0 50%; width: 50%; max-width: 50%; } html[data-theme-id="MEDP"]:not(#medp) .medp-guest-header form > .row > .col-md-4 { flex: 0 0 100%; width: 100%; max-width: 100%; } html[data-theme-id="MEDP"]:not(#medp) .medp-guest-header .btn-of-login-default, html[data-theme-id="MEDP"]:not(#medp) .medp-guest-header .btn_main { width: 100% !important; } html[data-theme-id="MEDP"]:not(#medp) .medp-guest-header .medp-login-row { display: block !important; } html[data-theme-id="MEDP"]:not(#medp) .medp-guest-header .medp-header-utils { margin-top: 8px; justify-content: center; display: flex !important; } } @media (min-width: 1100px) { html[data-theme-id="MEDP"]:not(#medp) .medp-guest-header form .row, html[data-theme-id="MEDP"]:not(#medp) .medp-guest-header .medp-login-row { flex-wrap: nowrap !important; align-items: center !important; } html[data-theme-id="MEDP"]:not(#medp) .medp-guest-header form > .row { justify-content: flex-end; } html[data-theme-id="MEDP"]:not(#medp) .medp-guest-header form > .row > .col-md-2 { padding-left: 5px !important; padding-right: 5px !important; } } /* ── 11 · Hero banner ──────────────────────────────────────────────────── */ html[data-theme-id="MEDP"]:not(#medp) .medp-hero, html[data-theme-id="MEDP"]:not(#medp) .medp-hero-placeholder { position: relative !important; display: block !important; overflow: hidden !important; border-radius: var(--md-radius-card) !important; border: 0 !important; box-shadow: none !important; background: var(--md-bg-deep) !important; max-height: none !important; min-height: 0 !important; padding: 0 !important; } html[data-theme-id="MEDP"]:not(#medp) .medp-hero-placeholder::before, html[data-theme-id="MEDP"]:not(#medp) .medp-hero-placeholder::after { content: none !important; display: none !important; } html[data-theme-id="MEDP"]:not(#medp) .medp-hero img, html[data-theme-id="MEDP"]:not(#medp) .medp-hero-img, html[data-theme-id="MEDP"]:not(#medp) .medp-hero-placeholder .medp-hero-real { display: block !important; width: 100% !important; height: auto !important; max-height: none !important; aspect-ratio: 4 / 1; object-fit: cover !important; object-position: center !important; background: var(--md-bg-deep) !important; filter: none !important; opacity: 1 !important; } @media (max-width: 767.98px) { html[data-theme-id="MEDP"]:not(#medp) .medp-hero img, html[data-theme-id="MEDP"]:not(#medp) .medp-hero-img, html[data-theme-id="MEDP"]:not(#medp) .medp-hero-placeholder .medp-hero-real { aspect-ratio: 2 / 1; } } /* a banner from the back office (ตั้งค่า › แบนเนอร์) is one picture for every screen: shown whole at its own shape, never cropped to the skin's art */ html[data-theme-id="MEDP"]:not(#medp) .medp-hero:not(.medp-hero-placeholder) img.medp-hero-img { aspect-ratio: auto !important; object-fit: contain !important; } /* the text twins stay for screen readers only; the art carries the words */ html[data-theme-id="MEDP"]:not(#medp) .medp-hero-placeholder__brand, html[data-theme-id="MEDP"]:not(#medp) .medp-hero-placeholder__sub { position: absolute !important; width: 1px !important; height: 1px !important; margin: -1px !important; padding: 0 !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; border: 0 !important; white-space: nowrap !important; } /* ── 12 · Home lobby: result sheets ────────────────────────────────────── */ /* the big white sheet the lobby sits in dissolves into the ground */ html[data-theme-id="MEDP"]:not(#medp) section.content > .row > div > .bg-white.bdr-24.shadow-super { background: transparent !important; padding: 0 !important; } html[data-theme-id="MEDP"]:not(#medp) h5.t-regular.c-dark, html[data-theme-id="MEDP"]:not(#medp) .txt-link h5.t-regular { color: var(--md-ink) !important; font-weight: 700 !important; font-size: 1.15rem !important; margin-bottom: .15rem !important; } html[data-theme-id="MEDP"]:not(#medp) .txt-link > .bdr-24.py-2 { background: transparent !important; } html[data-theme-id="MEDP"]:not(#medp) .lotto-gov, html[data-theme-id="MEDP"]:not(#medp) .lotto-inter, html[data-theme-id="MEDP"]:not(#medp) .lotto-vip, html[data-theme-id="MEDP"]:not(#medp) .lotto-thai, html[data-theme-id="MEDP"]:not(#medp) .lotto-set, html[data-theme-id="MEDP"]:not(#medp) .lotto-yikee, html[data-theme-id="MEDP"]:not(#medp) .lotto-gsb, html[data-theme-id="MEDP"]:not(#medp) .lotto-egov, html[data-theme-id="MEDP"]:not(#medp) .card-lotto, html[data-theme-id="MEDP"]:not(#medp) .wrap-box { background: var(--md-surface) !important; background-image: none !important; color: var(--md-ink) !important; border: 0 !important; box-shadow: none !important; border-radius: var(--md-radius-card) !important; } html[data-theme-id="MEDP"]:not(#medp) [class*="lotto-"] .bdr-24:not(.bg-white-op2):not(.bg-white-op5):not(.link-bg-master):not([class*="link-bg-"]) { background: transparent !important; box-shadow: none !important; } /* prize labels ("รางวัลที่ 1", "3ตัวบน") */ html[data-theme-id="MEDP"]:not(#medp) [class*="lotto-"] .bg-white-op5, html[data-theme-id="MEDP"]:not(#medp) .card-lotto .bg-white-op5 { display: inline-block !important; background: var(--md-surface-2) !important; color: var(--md-ink-2) !important; -webkit-text-fill-color: currentColor !important; border: 0 !important; border-radius: var(--md-radius-chip) !important; padding: 2px 10px !important; font-weight: 500 !important; box-shadow: none !important; } html[data-theme-id="MEDP"]:not(#medp) [class*="lotto-"] .bg-white-op5 small { color: inherit !important; background: transparent !important; } /* prize values */ html[data-theme-id="MEDP"]:not(#medp) [class*="lotto-"] .bg-white-op2, html[data-theme-id="MEDP"]:not(#medp) .card-lotto .bg-white-op2 { display: flex !important; align-items: center; justify-content: center; min-height: 2.6rem; background: var(--md-inset) !important; color: var(--md-ink) !important; -webkit-text-fill-color: currentColor !important; border: 0 !important; border-radius: 10px !important; box-shadow: none !important; font-variant-numeric: tabular-nums; } html[data-theme-id="MEDP"]:not(#medp) [class*="lotto-"] .bg-white-op2 h1, html[data-theme-id="MEDP"]:not(#medp) [class*="lotto-"] .bg-white-op2 h3, html[data-theme-id="MEDP"]:not(#medp) [class*="lotto-"] .bg-white-op2 h4 { color: inherit !important; font-weight: 700 !important; letter-spacing: .04em; margin: 0 !important; } html[data-theme-id="MEDP"]:not(#medp) [class*="lotto-"] .bg-white-op2.medp-prize-pending, html[data-theme-id="MEDP"]:not(#medp) [class*="lotto-"] .bg-white-op2[data-medp-pending="1"], html[data-theme-id="MEDP"]:not(#medp) .medp-prize-pending { color: var(--md-ink-3) !important; background: var(--md-inset) !important; font-weight: 400 !important; } html[data-theme-id="MEDP"]:not(#medp) .medp-prize-pending h1, html[data-theme-id="MEDP"]:not(#medp) .medp-prize-pending h3 { font-size: 1.05rem !important; font-weight: 400 !important; letter-spacing: 0 !important; color: inherit !important; } @media (hover: hover) { html[data-theme-id="MEDP"]:not(#medp) a:hover > .bdr-24 > .wrap-box, html[data-theme-id="MEDP"]:not(#medp) a:hover .medp-play-card { background: var(--md-surface-2) !important; } } /* ── 13 · Dashboard ────────────────────────────────────────────────────── */ html[data-theme-id="MEDP"]:not(#medp) .medp-dash-frame { background: transparent !important; border: 0 !important; padding: 0 !important; } html[data-theme-id="MEDP"]:not(#medp) .cover-dashboard, html[data-theme-id="MEDP"]:not(#medp) .medp-account-card { border-radius: var(--md-radius-card) !important; padding: 16px !important; } html[data-theme-id="MEDP"]:not(#medp) .medp-account-card p.c-dark, html[data-theme-id="MEDP"]:not(#medp) .medp-account-card .c-dark:not(h1) { color: var(--md-ink-2) !important; } html[data-theme-id="MEDP"]:not(#medp) .medp-account-card p.c-dark i { color: var(--md-accent) !important; } html[data-theme-id="MEDP"]:not(#medp) .medp-account-card .fa-trophy { color: var(--md-gold) !important; } /* status pill "สถานะ : ปกติ" */ html[data-theme-id="MEDP"]:not(#medp) .medp-account-card small.bg-gradient-theme { display: inline-block !important; background: var(--md-green-2) !important; color: var(--md-on-primary) !important; border-radius: var(--md-radius-chip) !important; padding: 3px 12px !important; box-shadow: none !important; } html[data-theme-id="MEDP"]:not(#medp) .medp-account-card small.bg-gradient-theme small { color: var(--md-on-primary) !important; -webkit-text-fill-color: var(--md-on-primary) !important; } /* The balance is the most important number on the site: logo yellow on the card reads 9.3:1 and does not depend on how bright a tenant sets --theme. */ html[data-theme-id="MEDP"]:not(#medp) .medp-account-card h1, html[data-theme-id="MEDP"]:not(#medp) .medp-account-card h1.c-dark, html[data-theme-id="MEDP"]:not(#medp) .cover-dashboard h1, html[data-theme-id="MEDP"]:not(#medp) .cover-dashboard h1.c-dark { color: var(--md-gold) !important; -webkit-text-fill-color: var(--md-gold) !important; font-weight: 700 !important; font-size: 2.4rem !important; letter-spacing: .02em; text-shadow: none !important; margin: .35rem 0 .25rem !important; font-variant-numeric: tabular-nums; } /* the wrapper around topup / withdraw was a second green plate */ html[data-theme-id="MEDP"]:not(#medp) .medp-account-card .pa2px.link-bg-theme, html[data-theme-id="MEDP"]:not(#medp) .medp-account-card .shadow-super-master.link-bg-theme { background: transparent !important; box-shadow: none !important; padding: 0 !important; border: 0 !important; } html[data-theme-id="MEDP"]:not(#medp) .medp-account-card a[href="/topup"], html[data-theme-id="MEDP"]:not(#medp) .medp-account-card a[href="/withdrawal"] { width: 100% !important; min-height: 52px; gap: 8px; flex-direction: row !important; box-shadow: var(--md-elev-1) !important; } html[data-theme-id="MEDP"]:not(#medp) .medp-account-card a[href="/topup"] h5, html[data-theme-id="MEDP"]:not(#medp) .medp-account-card a[href="/withdrawal"] h5, html[data-theme-id="MEDP"]:not(#medp) .medp-account-card a[href="/topup"] p, html[data-theme-id="MEDP"]:not(#medp) .medp-account-card a[href="/withdrawal"] p { margin: 0 !important; font-size: 1rem !important; font-weight: 500 !important; } /* "แทงหวย" / "เกมส์ คาสิโน": with white-marked children, painted black-on-black by the bundle. Now the reference's primary. */ html[data-theme-id="MEDP"]:not(#medp) .medp-account-card a.check-button.bg-black, html[data-theme-id="MEDP"]:not(#medp) a.check-button.bg-black { background: var(--md-green) !important; background-image: none !important; color: var(--md-on-primary) !important; -webkit-text-fill-color: var(--md-on-primary) !important; border: 0 !important; border-radius: var(--md-radius-btn) !important; box-shadow: var(--md-elev-1) !important; padding: 14px 8px !important; } html[data-theme-id="MEDP"]:not(#medp) a.check-button.bg-black *, html[data-theme-id="MEDP"]:not(#medp) a.check-button.bg-black h3 div, html[data-theme-id="MEDP"]:not(#medp) a.check-button.bg-black h4 { color: var(--md-on-primary) !important; -webkit-text-fill-color: var(--md-on-primary) !important; opacity: 1 !important; } html[data-theme-id="MEDP"]:not(#medp) a.check-button.bg-black h4 { font-size: 1.15rem !important; font-weight: 700 !important; margin: 4px 0 0 !important; } @media (hover: hover) { html[data-theme-id="MEDP"]:not(#medp) a.check-button.bg-black:hover { background: var(--md-green-hi) !important; } } /* menu tiles */ html[data-theme-id="MEDP"]:not(#medp) .medp-dash-tile, html[data-theme-id="MEDP"]:not(#medp) .check-button.medp-dash-tile, html[data-theme-id="MEDP"]:not(#medp) .check-button.bg-white.medp-dash-tile { background: var(--md-surface) !important; background-image: none !important; color: var(--md-ink) !important; border: 0 !important; border-radius: var(--md-radius-card) !important; box-shadow: none !important; padding: 14px 8px !important; min-height: 96px; } html[data-theme-id="MEDP"]:not(#medp) .medp-dash-tile h3, html[data-theme-id="MEDP"]:not(#medp) .medp-dash-tile h3 div { color: var(--md-accent) !important; -webkit-text-fill-color: currentColor !important; } html[data-theme-id="MEDP"]:not(#medp) .medp-dash-tile p { color: var(--md-ink) !important; margin: 4px 0 0 !important; font-weight: 500; } @media (hover: hover) { html[data-theme-id="MEDP"]:not(#medp) .medp-dash-tile:hover { background: var(--md-surface-2) !important; } } /* the three full-width rows (ฝาก-ถอน · รายงานเงิน · จดหมาย) */ html[data-theme-id="MEDP"]:not(#medp) .shadow-super-black.lotto-gov { background: transparent !important; padding: 0 !important; } html[data-theme-id="MEDP"]:not(#medp) .shadow-super-black.lotto-gov > a.check-button, html[data-theme-id="MEDP"]:not(#medp) a.check-button.link-bg-theme[href="/transaction"], html[data-theme-id="MEDP"]:not(#medp) a.check-button.link-bg-theme[href="/credit"], html[data-theme-id="MEDP"]:not(#medp) a.check-button.link-bg-theme[href="/inbox"], html[data-theme-id="MEDP"]:not(#medp) a.check-button.link-bg-theme[href="/help"] { background: var(--md-surface) !important; color: var(--md-ink) !important; -webkit-text-fill-color: var(--md-ink) !important; box-shadow: none !important; border-radius: var(--md-radius-card) !important; min-height: 56px; padding: 10px 16px !important; width: 100%; justify-content: flex-start !important; } html[data-theme-id="MEDP"]:not(#medp) .shadow-super-black.lotto-gov > a.check-button h3, html[data-theme-id="MEDP"]:not(#medp) .shadow-super-black.lotto-gov > a.check-button h3 div { color: var(--md-accent) !important; -webkit-text-fill-color: currentColor !important; margin: 0 !important; } html[data-theme-id="MEDP"]:not(#medp) .shadow-super-black.lotto-gov > a.check-button p { margin: 0 !important; font-weight: 500; } /* the icon sits centred over its label (the bundle's me-3, a margin meant for an inline row, pushed จดหมาย's icon 8px left), and จดหมาย's 40px icon box made its row 15px taller than the other two */ html[data-theme-id="MEDP"]:not(#medp) .shadow-super-black.lotto-gov > a.check-button > .thumb { margin-inline: 0 !important; width: auto !important; height: 25px !important; display: flex !important; align-items: center; justify-content: center; } html[data-theme-id="MEDP"]:not(#medp) .shadow-super-black.lotto-gov > a.check-button > .thumb img { width: 25px !important; height: 25px !important; margin: 0 !important; object-fit: contain; } @media (hover: hover) { html[data-theme-id="MEDP"]:not(#medp) .shadow-super-black.lotto-gov > a.check-button:hover { background: var(--md-surface-2) !important; } } html[data-theme-id="MEDP"]:not(#medp) img.ico.invert { filter: none !important; } /* ── 14 · Lotto lists (/latte, /yeekee, /set) ──────────────────────────── */ html[data-theme-id="MEDP"]:not(#medp) .medp-rate-chip, html[data-theme-id="MEDP"]:not(#medp) .bg-theme-op2 .bg-white.bdr-24 { background: var(--md-surface) !important; border: 0 !important; box-shadow: none !important; border-radius: 12px !important; } html[data-theme-id="MEDP"]:not(#medp) .bg-theme-op2 .bg-white.bdr-24 { background: var(--md-surface-2) !important; } html[data-theme-id="MEDP"]:not(#medp) .medp-rate-chip small, html[data-theme-id="MEDP"]:not(#medp) .bg-theme-op2 .bg-white.bdr-24 small { color: var(--md-ink-2) !important; } html[data-theme-id="MEDP"]:not(#medp) .medp-rate-chip strong, html[data-theme-id="MEDP"]:not(#medp) .bg-theme-op2 .bg-white.bdr-24 strong { color: var(--md-accent) !important; font-size: 1.1rem; font-weight: 700; font-variant-numeric: tabular-nums; } html[data-theme-id="MEDP"]:not(#medp) .medp-play-group { background: transparent !important; padding: 0 !important; margin-top: 20px !important; } html[data-theme-id="MEDP"]:not(#medp) .medp-play-group h5, html[data-theme-id="MEDP"]:not(#medp) .medp-play-group h5.text-black { color: var(--md-ink) !important; font-size: 1.1rem !important; font-weight: 700 !important; margin: 0 0 4px !important; padding-left: 10px; border-left: 4px solid var(--md-green); } html[data-theme-id="MEDP"]:not(#medp) .medp-play-card { background: var(--md-surface) !important; background-image: none !important; border: 0 !important; border-radius: var(--md-radius-card) !important; box-shadow: none !important; color: var(--md-ink) !important; transition: background-color .15s ease; } html[data-theme-id="MEDP"]:not(#medp) .medp-play-card .txt-dt, html[data-theme-id="MEDP"]:not(#medp) .medp-play-card .txt-dt span, html[data-theme-id="MEDP"]:not(#medp) .medp-play-card .c-black { color: var(--md-ink) !important; -webkit-text-fill-color: currentColor !important; font-weight: 500; font-variant-numeric: tabular-nums; } html[data-theme-id="MEDP"]:not(#medp) .medp-play-card h4[class*="link-bg-"], html[data-theme-id="MEDP"]:not(#medp) .medp-play-card h4.text-white { background: var(--md-green) !important; background-image: none !important; color: var(--md-on-primary) !important; -webkit-text-fill-color: var(--md-on-primary) !important; border-radius: var(--md-radius-btn) !important; font-size: 1rem !important; font-weight: 500 !important; padding: 8px 6px !important; margin: 0 !important; box-shadow: none !important; border: 0 !important; } html[data-theme-id="MEDP"]:not(#medp) .medp-play-card .bg-white, html[data-theme-id="MEDP"]:not(#medp) .medp-play-card .bg-white.bdr-24 { background: var(--md-surface-2) !important; border-radius: 10px !important; } html[data-theme-id="MEDP"]:not(#medp) .medp-play-card .bg-white small, html[data-theme-id="MEDP"]:not(#medp) .medp-play-card small.c-theme { color: var(--md-ink-2) !important; -webkit-text-fill-color: currentColor !important; background: transparent !important; font-weight: 400 !important; } /* closed round: the bundle swaps the title to h4.text-dark */ html[data-theme-id="MEDP"]:not(#medp) .medp-play-card:has(h4.text-dark) { opacity: .92; } html[data-theme-id="MEDP"]:not(#medp) .medp-play-card h4.text-dark { background: var(--md-closed-bg) !important; color: var(--md-closed-ink) !important; -webkit-text-fill-color: var(--md-closed-ink) !important; border-radius: var(--md-radius-btn) !important; } html[data-theme-id="MEDP"]:not(#medp) .medp-play-card:has(h4.text-dark) .txt-dt, html[data-theme-id="MEDP"]:not(#medp) .medp-play-card:has(h4.text-dark) .txt-dt span { color: var(--md-red-text) !important; } /* flags: no white plate on the dark ground */ html[data-theme-id="MEDP"]:not(#medp) .card-flag, html[data-theme-id="MEDP"]:not(#medp) img.card-flag { width: 56px !important; height: 56px !important; max-width: 56px !important; max-height: 56px !important; object-fit: contain !important; padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; border-radius: 50% !important; display: inline-block !important; } @media (max-width: 767.98px) { html[data-theme-id="MEDP"]:not(#medp) .card-flag, html[data-theme-id="MEDP"]:not(#medp) img.card-flag { width: 48px !important; height: 48px !important; max-width: 48px !important; max-height: 48px !important; } } /* ── 15 · Bet page (/latte-game) ───────────────────────────────────────── */ html[data-theme-id="MEDP"]:not(#medp) .bg-theme-op2 { background: var(--md-surface) !important; border: 0 !important; } html[data-theme-id="MEDP"]:not(#medp) .bet-key, html[data-theme-id="MEDP"]:not(#medp) button.bet-key, html[data-theme-id="MEDP"]:not(#medp) .bg-gradient-click, html[data-theme-id="MEDP"]:not(#medp) .bg-gradient-click-num, html[data-theme-id="MEDP"]:not(#medp) .bg-gradient-click-two, html[data-theme-id="MEDP"]:not(#medp) .bg-gradient-click-three, html[data-theme-id="MEDP"]:not(#medp) .bg-gradient-click-run, html[data-theme-id="MEDP"]:not(#medp) .bg-gradient-click-pin, html[data-theme-id="MEDP"]:not(#medp) .bg-gradient-click-front, html[data-theme-id="MEDP"]:not(#medp) .bg-gradient-click-back, html[data-theme-id="MEDP"]:not(#medp) .button-num { background: var(--md-surface-2) !important; background-image: none !important; color: var(--md-ink) !important; -webkit-text-fill-color: var(--md-ink) !important; border: 0 !important; border-radius: var(--md-radius-btn) !important; box-shadow: var(--md-elev-1) !important; font-weight: 700 !important; min-height: 48px !important; outline: 0; transition: background-color .12s ease; } html[data-theme-id="MEDP"]:not(#medp) .bet-key *, html[data-theme-id="MEDP"]:not(#medp) .bg-gradient-click-two *, html[data-theme-id="MEDP"]:not(#medp) .bg-gradient-click-three * { color: inherit !important; -webkit-text-fill-color: currentColor !important; } html[data-theme-id="MEDP"]:not(#medp) .bg-gradient-click-num, html[data-theme-id="MEDP"]:not(#medp) .button-num { font-size: 1.35rem !important; } @media (hover: hover) { html[data-theme-id="MEDP"]:not(#medp) .bet-key:not(.active):hover, html[data-theme-id="MEDP"]:not(#medp) .bg-gradient-click-num:hover { background: var(--md-surface-3) !important; } } /* selected type / price */ html[data-theme-id="MEDP"]:not(#medp) .bet-key.active, html[data-theme-id="MEDP"]:not(#medp) button.bet-key.active, html[data-theme-id="MEDP"]:not(#medp) [class*="bg-gradient-click"].active { background: var(--md-green) !important; color: var(--md-on-primary) !important; -webkit-text-fill-color: var(--md-on-primary) !important; box-shadow: 0 0 0 2px var(--md-ring) inset, var(--md-elev-1) !important; filter: none !important; } /* ลบ: the reference's orange action (its "ถัดไป" / "มีไอดีแล้ว") */ html[data-theme-id="MEDP"]:not(#medp) button.bg-gradient-click-free, html[data-theme-id="MEDP"]:not(#medp) .bg-gradient-click-free { background: linear-gradient(-45deg, var(--md-bet-delete-from), var(--md-bet-delete-to)) !important; /* the reference's #ea7023 end is 3.1:1 with white */ color: var(--md-on-color) !important; -webkit-text-fill-color: var(--md-on-color) !important; border: 0 !important; border-radius: var(--md-radius-btn) !important; box-shadow: var(--md-elev-1) !important; font-weight: 700 !important; min-height: 48px !important; } /* เคลียร์ / เพิ่มรายการ share .bg-gradient-click-add */ html[data-theme-id="MEDP"]:not(#medp) button.bg-gradient-click-add, html[data-theme-id="MEDP"]:not(#medp) .bg-gradient-click-add { background: var(--md-green-2) !important; background-image: none !important; color: var(--md-on-primary) !important; -webkit-text-fill-color: var(--md-on-primary) !important; border: 0 !important; border-radius: var(--md-radius-btn) !important; box-shadow: var(--md-elev-1) !important; font-weight: 700 !important; min-height: 48px !important; } html[data-theme-id="MEDP"]:not(#medp) button.bg-gradient-click-add.w-100 { background: var(--md-green) !important; } /* the number read-out */ html[data-theme-id="MEDP"]:not(#medp) .shadow-super .bg-light.bdr-24, html[data-theme-id="MEDP"]:not(#medp) .bg-light.bdr-24.text-center { background: var(--md-inset) !important; border-radius: 10px !important; } html[data-theme-id="MEDP"]:not(#medp) .bg-light.bdr-24 h2 { color: var(--md-ink) !important; letter-spacing: .3em; font-variant-numeric: tabular-nums; } /* auto-add (skin JS): a complete number goes straight into the slip */ html[data-theme-id="MEDP"]:not(#medp) [data-medp-bet="pad"][data-medp-auto] > p:first-child::after { content: " · ครบหลักแล้วเพิ่มให้อัตโนมัติ"; color: var(--md-ink-3); } /* the bundle's 2-digit กลับเลข is replaced by the tools' switch (2 and 3 digits) */ html[data-theme-id="MEDP"]:not(#medp) [data-medp-bet="pad"] button[data-medp-hide] { display: none !important; } html[data-theme-id="MEDP"]:not(#medp) [data-medp-bet-root][aria-busy="true"] > [data-medp-bet="tools"], html[data-theme-id="MEDP"]:not(#medp) [data-medp-bet-root][aria-busy="true"] > [data-medp-bet="types"], html[data-theme-id="MEDP"]:not(#medp) [data-medp-bet-root][aria-busy="true"] > [data-medp-bet="pad"] { pointer-events: none; } /* ── Bet tools: มีดี889 placement, ปันสุข function logic ─────────────── */ html[data-theme-id="MEDP"]:not(#medp) .medp-bet-tools { background: var(--md-surface); border-radius: var(--md-radius-card); padding: 12px; display: flex; flex-direction: column; gap: 10px; } html[data-theme-id="MEDP"]:not(#medp) .medp-bet-tools button { border: 0; border-radius: var(--md-radius-btn); background: var(--md-surface-2); color: var(--md-ink); font: inherit; font-weight: 600; min-height: 44px; padding: 0 8px; cursor: pointer; } html[data-theme-id="MEDP"]:not(#medp) .medp-bet-tools button:focus-visible { outline: 2px solid var(--md-gold); outline-offset: 2px; } html[data-theme-id="MEDP"]:not(#medp) .medp-bet-pane { display: flex; flex-direction: column; gap: 8px; } html[data-theme-id="MEDP"]:not(#medp) .medp-bet-pane[hidden] { display: none; } html[data-theme-id="MEDP"]:not(#medp) .medp-bet-pane__bar { display: flex; gap: 8px; } html[data-theme-id="MEDP"]:not(#medp) .medp-bet-pane__bar input { flex: 1 1 auto; min-width: 0; min-height: 44px; border: 0; border-radius: var(--md-radius-btn); background: var(--md-field); color: var(--md-bet-input-ink); padding: 0 12px; font: inherit; } html[data-theme-id="MEDP"]:not(#medp) .medp-bet-win { text-align: center; font-size: 1.3rem !important; letter-spacing: .25em; font-variant-numeric: tabular-nums; } html[data-theme-id="MEDP"]:not(#medp) .medp-bet-go { background: var(--md-green) !important; color: var(--md-on-primary) !important; padding: 0 16px !important; white-space: nowrap; } html[data-theme-id="MEDP"]:not(#medp) .medp-bet-board { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 4px; max-height: 300px; overflow-y: auto; overscroll-behavior: contain; } html[data-theme-id="MEDP"]:not(#medp) .medp-bet-board[data-medp-digits="1"] { grid-template-columns: repeat(5, minmax(0, 1fr)); } html[data-theme-id="MEDP"]:not(#medp) .medp-bet-board button { min-height: 36px !important; padding: 0 !important; font-size: .82rem; font-variant-numeric: tabular-nums; color: var(--md-ink-2) !important; } html[data-theme-id="MEDP"]:not(#medp) .medp-bet-board button[hidden] { display: none; } html[data-theme-id="MEDP"]:not(#medp) .medp-bet-board button.is-on, html[data-theme-id="MEDP"]:not(#medp) .medp-bet-perms button:not(.is-off) { background: var(--md-green) !important; color: var(--md-on-primary) !important; } html[data-theme-id="MEDP"]:not(#medp) .medp-bet-perms { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 6px; } html[data-theme-id="MEDP"]:not(#medp) .medp-bet-perms button { font-variant-numeric: tabular-nums; letter-spacing: .1em; } html[data-theme-id="MEDP"]:not(#medp) .medp-bet-perms button.is-off { text-decoration: line-through; color: var(--md-ink-3) !important; } html[data-theme-id="MEDP"]:not(#medp) .medp-bet-hint { margin: 0; color: var(--md-ink-3); font-size: .82rem; } html[data-theme-id="MEDP"]:not(#medp) .medp-bet-dreams { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; } html[data-theme-id="MEDP"]:not(#medp) .medp-bet-dreams li { display: flex; align-items: center; justify-content: space-between; gap: 8px; background: var(--md-surface-2); border-radius: var(--md-radius-btn); padding: 6px 6px 6px 12px; color: var(--md-ink); } html[data-theme-id="MEDP"]:not(#medp) .medp-bet-dreams__nums { display: flex; gap: 6px; } html[data-theme-id="MEDP"]:not(#medp) .medp-bet-dreams__nums button { background: var(--md-green) !important; color: var(--md-on-primary) !important; min-width: 56px; letter-spacing: .1em; } html[data-theme-id="MEDP"]:not(#medp) .medp-bet-dreams__none { justify-content: center !important; color: var(--md-ink-3) !important; } /* a type bet together with the active one (ปันสุข's extra selection) */ html[data-theme-id="MEDP"]:not(#medp) [data-medp-bet="types"] button.bet-key[data-medp-extra] { background: var(--md-bet-extra) !important; color: var(--md-on-color) !important; -webkit-text-fill-color: var(--md-on-color) !important; box-shadow: 0 0 0 2px var(--md-ring) inset !important; position: relative; } html[data-theme-id="MEDP"]:not(#medp) [data-medp-bet="types"] button.bet-key[data-medp-extra]::before { content: "✓"; position: absolute; top: 4px; right: 8px; font-size: .75rem; } html[data-theme-id="MEDP"]:not(#medp) .shadow-super.bdr-24.p-2 { border-radius: var(--md-radius-card) !important; padding: 12px !important; } html[data-theme-id="MEDP"]:not(#medp) .shadow-super h4.t-bold, html[data-theme-id="MEDP"]:not(#medp) .shadow-super h5.t-bold { color: var(--md-ink) !important; } html[data-theme-id="MEDP"]:not(#medp) .shadow-super small.bg-white { background: var(--md-surface-2) !important; color: var(--md-ink-2) !important; display: inline-flex !important; align-items: center; border-radius: var(--md-radius-chip) !important; padding: 4px 12px !important; } html[data-theme-id="MEDP"]:not(#medp) .shadow-super small.bg-theme-op1 { background: var(--md-green-2) !important; color: var(--md-on-primary) !important; -webkit-text-fill-color: var(--md-on-primary) !important; display: inline-flex !important; align-items: center; border-radius: var(--md-radius-chip) !important; padding: 4px 12px !important; } html[data-theme-id="MEDP"]:not(#medp) .shadow-super small.bg-theme-op1 * { color: inherit !important; } html[data-theme-id="MEDP"]:not(#medp) .shadow-super small.c-theme.t-bold { color: var(--md-gold) !important; } /* ── 16 · Tables, tickets, transactions, credit ────────────────────────── */ html[data-theme-id="MEDP"]:not(#medp) table, html[data-theme-id="MEDP"]:not(#medp) .table { --bs-table-bg: transparent; --bs-table-color: var(--md-ink); --bs-table-striped-bg: var(--md-table-stripe); --bs-table-striped-color: var(--md-ink); --bs-table-hover-bg: var(--md-table-hover); --bs-table-hover-color: var(--md-ink); --bs-table-border-color: var(--md-line); color: var(--md-ink) !important; background: transparent !important; border-color: var(--md-line) !important; } html[data-theme-id="MEDP"]:not(#medp) table th, html[data-theme-id="MEDP"]:not(#medp) thead th, html[data-theme-id="MEDP"]:not(#medp) thead td, html[data-theme-id="MEDP"]:not(#medp) table thead tr { border-bottom-color: var(--md-line) !important; background: var(--md-surface-2) !important; background-image: none !important; color: var(--md-ink) !important; -webkit-text-fill-color: var(--md-ink) !important; font-weight: 500 !important; border-color: var(--md-line) !important; } html[data-theme-id="MEDP"]:not(#medp) table td, html[data-theme-id="MEDP"]:not(#medp) table tbody tr { background: transparent !important; color: var(--md-ink) !important; border-color: var(--md-line) !important; } html[data-theme-id="MEDP"]:not(#medp) .table-responsive { background: var(--md-surface) !important; border-radius: 12px; } /* filter tabs on /ticket - the selected one is marked .c-white */ html[data-theme-id="MEDP"]:not(#medp) .check-button.ticket, html[data-theme-id="MEDP"]:not(#medp) .check-button.bgc-3 { background: var(--md-green-2) !important; color: var(--md-on-primary) !important; -webkit-text-fill-color: var(--md-on-primary) !important; border: 0 !important; border-radius: var(--md-radius-btn) !important; box-shadow: var(--md-elev-1) !important; } html[data-theme-id="MEDP"]:not(#medp) .check-button.ticket.active, html[data-theme-id="MEDP"]:not(#medp) .check-button.ticket.c-white, html[data-theme-id="MEDP"]:not(#medp) .check-button.bgc-3.active, html[data-theme-id="MEDP"]:not(#medp) .check-button.bgc-3.c-white { background: var(--md-green) !important; } @media (hover: hover) { html[data-theme-id="MEDP"]:not(#medp) .check-button.ticket:hover, html[data-theme-id="MEDP"]:not(#medp) .check-button.bgc-3:hover { background: var(--md-green-hi) !important; } } /* /ticket day summary: div.cover > div.btn-submit is a panel, not a button */ html[data-theme-id="MEDP"]:not(#medp) .cover.p2px { background: transparent !important; padding: 0 !important; } html[data-theme-id="MEDP"]:not(#medp) div.btn-submit { background: var(--md-surface) !important; background-image: none !important; color: var(--md-ink) !important; border: 0 !important; border-radius: var(--md-radius-card) !important; box-shadow: none !important; padding: 12px !important; width: 100% !important; font-weight: 400 !important; } html[data-theme-id="MEDP"]:not(#medp) div.btn-submit .bgr-5, html[data-theme-id="MEDP"]:not(#medp) div.btn-submit .bgr-5 > div { background: transparent !important; box-shadow: none !important; } html[data-theme-id="MEDP"]:not(#medp) div.btn-submit h5 { color: var(--md-ink) !important; font-weight: 700 !important; margin: 0 !important; } html[data-theme-id="MEDP"]:not(#medp) div.btn-submit h5 i { color: var(--md-gold) !important; } html[data-theme-id="MEDP"]:not(#medp) div.btn-submit .bgc-3.row { background: transparent !important; padding: 0 !important; } html[data-theme-id="MEDP"]:not(#medp) div.btn-submit .col > .bgc-3, html[data-theme-id="MEDP"]:not(#medp) div.btn-submit .col > .bgc-4 { background: var(--md-surface-2) !important; border-radius: 12px !important; padding: 10px 6px !important; } html[data-theme-id="MEDP"]:not(#medp) div.btn-submit h3 { font-weight: 700 !important; font-variant-numeric: tabular-nums; margin: 0 !important; } html[data-theme-id="MEDP"]:not(#medp) div.bgc-4:not(.menu-list), html[data-theme-id="MEDP"]:not(#medp) span.bgc-4, html[data-theme-id="MEDP"]:not(#medp) h3.bgc-4 { background: var(--md-surface-2) !important; color: var(--md-ink) !important; } /* the bundle's error line (bgc-4 + c-red) reads as an error, not as a neutral card: the neutral rule above would turn its text white */ html[data-theme-id="MEDP"]:not(#medp) div.bdr-24.p-2.text-center.t-bold.bgc-4.c-red { background: var(--md-danger-soft-bg) !important; color: var(--md-red-text) !important; -webkit-text-fill-color: var(--md-red-text) !important; border: 1px solid var(--md-danger-soft-line); } /* ticket rows: result word on the right */ html[data-theme-id="MEDP"]:not(#medp) .shadow-super .d-flex.justify-content-between.c-dark small { color: var(--md-ink-2) !important; } html[data-theme-id="MEDP"]:not(#medp) .nav-pills-ticket .nav-link, html[data-theme-id="MEDP"]:not(#medp) .nav-pills .nav-link.active { background: transparent !important; } html[data-theme-id="MEDP"]:not(#medp) .nav-link.active > .check-button { background: var(--md-green) !important; } /* ── 17 · Wallet: /topup, /withdrawal ──────────────────────────────────── */ html[data-theme-id="MEDP"]:not(#medp) .medp-topup .c-black p, html[data-theme-id="MEDP"]:not(#medp) .medp-topup .c-black small { color: var(--md-ink) !important; } html[data-theme-id="MEDP"]:not(#medp) .medp-topup .c-black small { color: var(--md-ink-2) !important; } /* the twelve preset amounts carry .bg-gradient-theme: neutral keys, not CTAs */ html[data-theme-id="MEDP"]:not(#medp) .medp-topup-presets .button-main, html[data-theme-id="MEDP"]:not(#medp) .content a.button-main.bg-gradient-theme.bdr-24 { background: var(--md-surface-2) !important; background-image: none !important; color: var(--md-ink) !important; border: 0 !important; border-radius: var(--md-radius-btn) !important; box-shadow: var(--md-elev-1) !important; min-height: 48px !important; display: flex !important; align-items: center !important; justify-content: center !important; font-weight: 700 !important; } html[data-theme-id="MEDP"]:not(#medp) .medp-topup-presets .button-main span, html[data-theme-id="MEDP"]:not(#medp) .content a.button-main.bg-gradient-theme.bdr-24 span { color: var(--md-ink) !important; -webkit-text-fill-color: var(--md-ink) !important; font-weight: 700 !important; font-variant-numeric: tabular-nums; } @media (hover: hover) { html[data-theme-id="MEDP"]:not(#medp) .medp-topup-presets .button-main:hover { background: var(--md-surface-3) !important; } } html[data-theme-id="MEDP"]:not(#medp) .medp-topup-presets .button-main.active, html[data-theme-id="MEDP"]:not(#medp) .medp-topup-presets .button-main[aria-pressed="true"] { background: var(--md-green) !important; } html[data-theme-id="MEDP"]:not(#medp) .check-button.bgg-1, html[data-theme-id="MEDP"]:not(#medp) .medp-withdraw-cta, html[data-theme-id="MEDP"]:not(#medp) .content .medp-withdraw-cta.bdr-24 { min-height: 50px !important; font-size: 1.05rem !important; font-weight: 500 !important; border-radius: var(--md-radius-btn) !important; } html[data-theme-id="MEDP"]:not(#medp) .medp-solid-card, html[data-theme-id="MEDP"]:not(#medp) .medp-bank-card { border: 0 !important; box-shadow: none !important; border-radius: var(--md-radius-card) !important; } html[data-theme-id="MEDP"]:not(#medp) .medp-bank-icon, html[data-theme-id="MEDP"]:not(#medp) .img-b { background: var(--md-surface-2) !important; border: 0 !important; } html[data-theme-id="MEDP"]:not(#medp) .medp-bank-icon i { color: var(--md-accent) !important; } html[data-theme-id="MEDP"]:not(#medp) .medp-bank-card h6 { color: var(--md-ink-2) !important; font-weight: 400; } html[data-theme-id="MEDP"]:not(#medp) .medp-bank-card h5 { color: var(--md-ink) !important; font-weight: 500 !important; } /* /casino: provider tiles are art with an overlay; the play call-to-action was a white pill carrying white text */ html[data-theme-id="MEDP"]:not(#medp) .medp-casino-cta { background: var(--md-green) !important; color: var(--md-on-primary) !important; -webkit-text-fill-color: var(--md-on-primary) !important; border: 0 !important; border-radius: var(--md-radius-btn) !important; box-shadow: var(--md-elev-1) !important; font-weight: 500 !important; } /* ── 18 · Modal (announcement) ─────────────────────────────────────────── */ /* The bundle sizes the dim to the viewport minus the desktop header, which cut the 390px guest header's login fields in half and left a bright band at the bottom. Dim the whole viewport; the card stays above it. */ html[data-theme-id="MEDP"]:not(#medp) .modal-medp-overlay { background: var(--md-overlay) !important; inset: 0 !important; width: auto !important; height: auto !important; z-index: 1150 !important; } html[data-theme-id="MEDP"]:not(#medp) .modal-medp .modal-medp-card { position: relative; z-index: 1160 !important; } /* The card also carries .wrap-login.bg-white, whose auth-page rule (section 9) is more specific and strips background and padding, so the dialog text sat straight on the dimmed page. Three classes out-rank it. */ html[data-theme-id="MEDP"]:not(#medp) .modal-medp .modal-medp-card.wrap-login, html[data-theme-id="MEDP"]:not(#medp) .modal-medp-card { background: var(--md-surface) !important; background-image: none !important; color: var(--md-ink) !important; border: 0 !important; border-radius: var(--md-radius-card) !important; box-shadow: 0 16px 48px var(--md-shadow-dialog) !important; padding: 16px !important; width: calc(100% - 32px); } html[data-theme-id="MEDP"]:not(#medp) .modal-medp-card h1, html[data-theme-id="MEDP"]:not(#medp) .modal-medp-card h2, html[data-theme-id="MEDP"]:not(#medp) .modal-medp-card h3, html[data-theme-id="MEDP"]:not(#medp) .modal-medp-card h4, html[data-theme-id="MEDP"]:not(#medp) .modal-medp-card h5 { color: var(--md-ink) !important; font-weight: 700 !important; } html[data-theme-id="MEDP"]:not(#medp) .modal-medp-body, html[data-theme-id="MEDP"]:not(#medp) .modal-medp-card p, html[data-theme-id="MEDP"]:not(#medp) .modal-medp-card .c-dark { color: var(--md-ink-2) !important; } html[data-theme-id="MEDP"]:not(#medp) .modal-medp-card button, html[data-theme-id="MEDP"]:not(#medp) .modal-medp-card a.btn_main { min-height: 44px; border-radius: var(--md-radius-btn) !important; } /* ── 19 · Layout ───────────────────────────────────────────────────────── */ @media (max-width: 767.98px) { html[data-theme-id="MEDP"]:not(#medp) .container-xl { padding-left: 8px; padding-right: 8px; } } @media (min-width: 768px) { html[data-theme-id="MEDP"]:not(#medp) .container-xl { max-width: 1240px; } } /* ══ 20 · Layout pass (build 20260925a) ═════════════════════════════════════ Owner brief 2026-09-25: every page keeps the มีดี889 look; the bet page (/latte-game) is laid out like ปันสุข's (two columns on desktop, payout on each bet-type key, one colour per amount key); lottery pickers show two cards a row on phones and three on desktop; /topup and /withdrawal get their own icons and colour; after sign-in, desktop gets a real top bar. Markup the JS layer adds is named medp-desk-* / data-medp-*. New colours (white text): #c2410c 5.2:1 #b45309 5.0:1 #15803d 5.0:1 #0f766e 5.5:1 #1d4ed8 6.7:1 #4338ca 7.9:1 #6d28d9 7.1:1 #7e22ce 7.0:1 #be123c 6.3:1 #92400e 7.1:1 #dc2626 4.8:1; gold #ffd54a on #1f1f1f 11.7:1 */ /* 20.1 · Drawer above the header. The bundle stacks .header (1100) over its own overlay (998) and drawer (999): the open drawer was cut by the header, and the header stayed bright. The modal (1200) stays above both. */ html[data-theme-id="MEDP"]:not(#medp) .overlay.show { z-index: 1180 !important; } /* the announcement's own dim is also .overlay.show; inside the modal (its own stacking context at 1200) it must stay under the card, or the whole dialog reads as dimmed and its buttons look disabled */ html[data-theme-id="MEDP"]:not(#medp) .modal-medp > .modal-medp-overlay.overlay { z-index: 1150 !important; } html[data-theme-id="MEDP"]:not(#medp) .menu-list { z-index: 1190 !important; } /* 20.2 · Desktop top bar (≥ 992px). Below 992px the member header keeps its phone layout; above it the logo leads a row of page links and the balance sits beside the account menu. */ html[data-theme-id="MEDP"]:not(#medp) .medp-desk-nav, html[data-theme-id="MEDP"]:not(#medp) .medp-desk-balance { display: none; } @media (min-width: 992px) { html[data-theme-id="MEDP"]:not(#medp) .medp-member-header__row { display: flex !important; flex-wrap: nowrap !important; align-items: center !important; gap: 12px; min-height: 72px; margin: 0 !important; } html[data-theme-id="MEDP"]:not(#medp) .medp-member-header__row > div { padding: 0 !important; } html[data-theme-id="MEDP"]:not(#medp) .medp-member-header__row > .col-6 { order: 0; flex: 1 1 auto !important; width: auto !important; max-width: none !important; justify-content: flex-start !important; gap: 18px; min-width: 0; } html[data-theme-id="MEDP"]:not(#medp) .medp-member-header__row > .col-3:first-child, html[data-theme-id="MEDP"]:not(#medp) .medp-member-header__row > .col-3:last-child { flex: 0 0 auto !important; width: auto !important; max-width: none !important; } html[data-theme-id="MEDP"]:not(#medp) .medp-member-header__row > .col-3:first-child { order: 1; } html[data-theme-id="MEDP"]:not(#medp) .medp-member-header__row > .col-3:last-child { order: 2; } /* the page links carry "หน้าหลัก" */ html[data-theme-id="MEDP"]:not(#medp) .medp-member-header__row > .col-3:first-child a[aria-label="หน้าหลัก"] { display: none !important; } html[data-theme-id="MEDP"]:not(#medp) .medp-member-logo img { height: 52px !important; width: 52px !important; } html[data-theme-id="MEDP"]:not(#medp) .medp-desk-nav { display: flex; align-items: center; gap: 4px; min-width: 0; } html[data-theme-id="MEDP"]:not(#medp) .medp-desk-nav a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; border-radius: var(--md-radius-btn); color: var(--md-ink-2) !important; -webkit-text-fill-color: currentColor !important; font-size: .95rem; font-weight: 500; white-space: nowrap; text-decoration: none !important; transition: background-color .15s ease, color .15s ease; } html[data-theme-id="MEDP"]:not(#medp) .medp-desk-nav a svg { width: 18px; height: 18px; flex: 0 0 auto; } html[data-theme-id="MEDP"]:not(#medp) .medp-desk-nav a.medp-desk-nav__deposit { color: var(--md-accent) !important; } html[data-theme-id="MEDP"]:not(#medp) .medp-desk-nav a.medp-desk-nav__withdraw { color: var(--md-red-text) !important; } html[data-theme-id="MEDP"]:not(#medp) .medp-desk-nav a[aria-current="page"] { background: var(--md-green) !important; color: var(--md-on-primary) !important; } html[data-theme-id="MEDP"]:not(#medp) .medp-desk-balance { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border-radius: var(--md-radius-chip); background: var(--md-surface-2); color: var(--md-gold) !important; -webkit-text-fill-color: currentColor !important; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; } html[data-theme-id="MEDP"]:not(#medp) .medp-desk-balance svg { width: 18px; height: 18px; color: var(--md-ink-2); } } @media (min-width: 992px) and (hover: hover) { html[data-theme-id="MEDP"]:not(#medp) .medp-desk-nav a:not([aria-current="page"]):hover { background: var(--md-surface-2); color: var(--md-ink) !important; } } /* 992–1279px: text-only links so seven fit beside the logo and balance */ @media (min-width: 992px) and (max-width: 1279.98px) { html[data-theme-id="MEDP"]:not(#medp) .medp-desk-nav a { padding: 0 9px; font-size: .9rem; } html[data-theme-id="MEDP"]:not(#medp) .medp-desk-nav a svg { display: none; } } /* 20.3 · Lottery pickers (/latte, /yeekee, /set): two cards a row on phones, three on desktop, every card the same size; a short last row is centred. The JS layer orders a group's cards (open, next to open, most recently closed) through --medp-order; React's DOM order is untouched. */ html[data-theme-id="MEDP"]:not(#medp) .medp-play-group > .row { display: flex !important; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0 !important; } html[data-theme-id="MEDP"]:not(#medp) .medp-play-group > .row > .wrap { flex: 0 0 100%; order: -1; margin: 0 !important; } html[data-theme-id="MEDP"]:not(#medp) .medp-play-group > .row > [class*="col-"] { flex: 0 0 calc((100% - 10px) / 2) !important; width: calc((100% - 10px) / 2) !important; max-width: none !important; padding: 0 !important; margin: 0 !important; order: var(--medp-order, 0); } html[data-theme-id="MEDP"]:not(#medp) .medp-play-group > .row > [class*="col-"] > a { display: block; height: 100%; } html[data-theme-id="MEDP"]:not(#medp) .medp-play-group > .row > [class*="col-"] .medp-play-card { height: 100%; } @media (min-width: 992px) { html[data-theme-id="MEDP"]:not(#medp) .medp-play-group > .row { gap: 12px; } html[data-theme-id="MEDP"]:not(#medp) .medp-play-group > .row > [class*="col-"] { flex-basis: calc((100% - 24px) / 3) !important; width: calc((100% - 24px) / 3) !important; } } /* 20.3b · Yiki series. Where a site sells ยี่กี 15 นาที and ยี่กี 5 นาที the JS layer puts a card for each on /latte (the bundle's single card is hidden) and, on /yeekee, shows the rooms of the chosen series under a switch. */ html[data-theme-id="MEDP"]:not(#medp) .medp-play-group [data-medp-yiki-single="hidden"] { display: none !important; } html[data-theme-id="MEDP"][data-medp-yiki-series="15m"]:not(#medp) .medp-play-group[data-medp-yiki-series="5m"], html[data-theme-id="MEDP"][data-medp-yiki-series="5m"]:not(#medp) .medp-play-group[data-medp-yiki-series="15m"] { display: none !important; } html[data-theme-id="MEDP"]:not(#medp) .medp-yiki-switch { display: flex; gap: 6px; margin: 16px 0 0; padding: 6px; border-radius: 999px; background: var(--md-surface-2); } html[data-theme-id="MEDP"]:not(#medp) .medp-yiki-switch a { flex: 1 1 0; min-height: 44px; display: flex; align-items: center; justify-content: center; padding: 0 12px; border-radius: 999px; color: var(--md-ink) !important; font-weight: 600; text-decoration: none !important; white-space: nowrap; } html[data-theme-id="MEDP"]:not(#medp) .medp-yiki-switch a[aria-selected="true"] { background: var(--md-green); color: var(--md-on-primary) !important; } html[data-theme-id="MEDP"]:not(#medp) .medp-yiki-switch ~ .medp-play-group { margin-top: 12px !important; } /* A room card under the switch says "รอบที่ N": the series is named by the switch and the group, and the full name broke mid-word on a phone. */ html[data-theme-id="MEDP"]:not(#medp) .medp-play-group[data-medp-yiki-series] .medp-play-card h4[data-medp-room] { line-height: 0 !important; white-space: nowrap !important; overflow: hidden !important; text-indent: -999em !important; } html[data-theme-id="MEDP"]:not(#medp) .medp-play-group[data-medp-yiki-series] .medp-play-card h4[data-medp-room]::after { content: attr(data-medp-room); display: block; line-height: 1.35; text-indent: 0; white-space: normal; } /* /latte-result: the 5-minute results the JS layer adds under the bundle's Yiki grid, which is then headed by its series name too. */ html[data-theme-id="MEDP"]:not(#medp) h5.t-regular.c-dark[data-medp-yiki-label] { font-size: 0 !important; } html[data-theme-id="MEDP"]:not(#medp) h5.t-regular.c-dark[data-medp-yiki-label]::after { content: attr(data-medp-yiki-label); font-size: 1.15rem; } html[data-theme-id="MEDP"]:not(#medp) .medp-yiki5-results__more { display: block; width: 100%; min-height: 44px; margin: 12px 0 0; border: 0; border-radius: var(--md-radius-btn); background: var(--md-surface-2); color: var(--md-ink); font-weight: 600; } /* 20.4 · Bet page (/latte-game): ปันสุข's arrangement. The JS layer names the blocks (data-medp-bet = head|rates|digits|types|tools|pad|amount|slip| sliptools|submit) and on desktop gives each its height in 4px grid rows, so the two columns stack on their own: digits, bet type, tools and number pad on the left, amount, slip, slip tools and confirm on the right. Phones keep the single column, in the same order. */ html[data-theme-id="MEDP"]:not(#medp) [data-medp-bet] { margin-bottom: 12px !important; } /* the payout table sits last: under ยืนยันการแทง in the right column on desktop, at the foot of the page on phones (owner request 2026-09-26) */ html[data-theme-id="MEDP"]:not(#medp) [data-medp-bet-root] { display: flex; flex-direction: column; } html[data-theme-id="MEDP"]:not(#medp) [data-medp-bet-root] > [data-medp-bet="rates"] { order: 99; padding: 12px !important; border-radius: var(--md-radius-card) !important; } /* a type the round does not take reads as unavailable, not as a live key */ html[data-theme-id="MEDP"]:not(#medp) [data-medp-bet="types"] button.bet-key:disabled { opacity: .4; cursor: not-allowed; box-shadow: none !important; } /* มีดี889's table: ลำดับ · ชนิด · จ่าย(บ.) · ลด(%), centred, one ruled row per bet type (the skin JS builds it; the bundle's cards are its source) */ html[data-theme-id="MEDP"]:not(#medp) [data-medp-bet="rates"][data-medp-rate-table] > .row { display: none !important; } html[data-theme-id="MEDP"]:not(#medp) .medp-rate-table { width: 100%; border-collapse: collapse; color: var(--md-ink); font-size: .92rem; font-variant-numeric: tabular-nums; text-align: center; } html[data-theme-id="MEDP"]:not(#medp) .medp-rate-table caption { caption-side: top; text-align: left; padding: 0 0 8px; color: var(--md-ink); font-weight: 700; } html[data-theme-id="MEDP"]:not(#medp) .medp-rate-table th { padding: 8px 6px; background: var(--md-surface-2); color: var(--md-ink-2); font-weight: 700; border-bottom: 1px solid var(--md-line); } html[data-theme-id="MEDP"]:not(#medp) .medp-rate-table td { padding: 8px 6px; border-bottom: 1px solid var(--md-line); } html[data-theme-id="MEDP"]:not(#medp) .medp-rate-table td:nth-child(3) { color: var(--md-gold) !important; -webkit-text-fill-color: currentColor !important; font-weight: 700; } html[data-theme-id="MEDP"]:not(#medp) .medp-rate-table tbody tr:last-child td { border-bottom: 0; } /* เลขอั้น: numbers this round does not take (ปิดรับ) or pays half for (จ่ายครึ่ง), listed under the payout table; a slip line on one is tagged. The tag carries the word, colour only supports it. */ html[data-theme-id="MEDP"]:not(#medp) .medp-number-notice { margin-top: 14px; padding: 12px; border: 1px solid var(--md-line); border-radius: 12px; background: var(--md-surface-2); color: var(--md-ink); font-size: .9rem; } html[data-theme-id="MEDP"]:not(#medp) .medp-number-notice__title { display: block; margin-bottom: 8px; font-weight: 700; color: var(--md-ink); } html[data-theme-id="MEDP"]:not(#medp) .medp-number-notice__line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 8px; margin: 0 0 6px; color: var(--md-ink-2); } html[data-theme-id="MEDP"]:not(#medp) .medp-number-notice__line:last-child { margin-bottom: 0; } html[data-theme-id="MEDP"]:not(#medp) .medp-number-notice__line b { color: var(--md-ink); font-weight: 600; } html[data-theme-id="MEDP"]:not(#medp) .medp-number-notice__numbers { flex: 1 1 100%; font-variant-numeric: tabular-nums; letter-spacing: .04em; word-spacing: .35em; color: var(--md-ink); overflow-wrap: anywhere; } html[data-theme-id="MEDP"]:not(#medp) .medp-number-notice__tag, html[data-theme-id="MEDP"]:not(#medp) [data-medp-bet="slip"] tr[data-medp-number-state] td:nth-child(2)::after { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: .75rem; font-weight: 700; line-height: 1.5; white-space: nowrap; } html[data-theme-id="MEDP"]:not(#medp) .medp-number-notice__line[data-medp-state="closed"] .medp-number-notice__tag, html[data-theme-id="MEDP"]:not(#medp) [data-medp-bet="slip"] tr[data-medp-number-state="closed"] td:nth-child(2)::after { background: var(--md-red); color: var(--md-on-color); } html[data-theme-id="MEDP"]:not(#medp) .medp-number-notice__line[data-medp-state="half"] .medp-number-notice__tag, html[data-theme-id="MEDP"]:not(#medp) [data-medp-bet="slip"] tr[data-medp-number-state="half"] td:nth-child(2)::after { background: var(--md-gold); color: var(--md-on-gold); } html[data-theme-id="MEDP"]:not(#medp) [data-medp-bet="slip"] tr[data-medp-number-state] td:nth-child(2)::after { margin-left: 6px; vertical-align: middle; } html[data-theme-id="MEDP"]:not(#medp) [data-medp-bet="slip"] tr[data-medp-number-state="closed"] td:nth-child(2)::after { content: "ปิดรับ"; } html[data-theme-id="MEDP"]:not(#medp) [data-medp-bet="slip"] tr[data-medp-number-state="half"] td:nth-child(2)::after { content: "จ่ายครึ่ง"; } /* amount keys: one colour per value, like ปันสุข; the chosen key also gets a white ring and a tick, so colour is never the only cue */ html[data-theme-id="MEDP"]:not(#medp) [data-medp-bet="amount"] .row > div > .bet-key { color: var(--md-on-color) !important; -webkit-text-fill-color: var(--md-on-color) !important; box-shadow: none !important; } html[data-theme-id="MEDP"]:not(#medp) [data-medp-bet="amount"] .row > div:nth-child(8n+1) > .bet-key { background: var(--md-amount-1) !important; } html[data-theme-id="MEDP"]:not(#medp) [data-medp-bet="amount"] .row > div:nth-child(8n+2) > .bet-key { background: var(--md-amount-2) !important; } html[data-theme-id="MEDP"]:not(#medp) [data-medp-bet="amount"] .row > div:nth-child(8n+3) > .bet-key { background: var(--md-amount-3) !important; } html[data-theme-id="MEDP"]:not(#medp) [data-medp-bet="amount"] .row > div:nth-child(8n+4) > .bet-key { background: var(--md-amount-4) !important; } html[data-theme-id="MEDP"]:not(#medp) [data-medp-bet="amount"] .row > div:nth-child(8n+5) > .bet-key { background: var(--md-amount-5) !important; } html[data-theme-id="MEDP"]:not(#medp) [data-medp-bet="amount"] .row > div:nth-child(8n+6) > .bet-key { background: var(--md-amount-6) !important; } html[data-theme-id="MEDP"]:not(#medp) [data-medp-bet="amount"] .row > div:nth-child(8n+7) > .bet-key { background: var(--md-amount-7) !important; } html[data-theme-id="MEDP"]:not(#medp) [data-medp-bet="amount"] .row > div:nth-child(8n+8) > .bet-key { background: var(--md-amount-8) !important; } html[data-theme-id="MEDP"]:not(#medp) [data-medp-bet="amount"] .row > div > .bet-key.active { box-shadow: 0 0 0 3px var(--md-ring) inset !important; } html[data-theme-id="MEDP"]:not(#medp) [data-medp-bet="amount"] .row > div > .bet-key.active::before { content: ""; display: inline-block; width: 14px; height: 14px; margin-right: 6px; vertical-align: -1px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat; } @media (min-width: 992px) { html[data-theme-id="MEDP"]:not(#medp) [data-medp-bet-root][data-medp-bet-grid] { display: grid !important; grid-template-columns: minmax(0, 1.55fr) minmax(320px, 1fr); grid-auto-rows: 4px; grid-auto-flow: row dense; column-gap: 16px; align-items: start; } html[data-theme-id="MEDP"]:not(#medp) [data-medp-bet-grid] > [data-medp-bet] { margin: 0 !important; grid-row-end: span var(--medp-span, 40); } html[data-theme-id="MEDP"]:not(#medp) [data-medp-bet-grid] > [data-medp-bet="head"], html[data-theme-id="MEDP"]:not(#medp) [data-medp-bet-grid] > [data-medp-bet="extra"] { grid-column: 1 / -1; } html[data-theme-id="MEDP"]:not(#medp) [data-medp-bet-grid] > [data-medp-bet="types"], html[data-theme-id="MEDP"]:not(#medp) [data-medp-bet-grid] > [data-medp-bet="tools"], html[data-theme-id="MEDP"]:not(#medp) [data-medp-bet-grid] > [data-medp-bet="pad"] { grid-column: 1; } html[data-theme-id="MEDP"]:not(#medp) [data-medp-bet-grid] > [data-medp-bet="rates"], html[data-theme-id="MEDP"]:not(#medp) [data-medp-bet-grid] > [data-medp-bet="amount"], html[data-theme-id="MEDP"]:not(#medp) [data-medp-bet-grid] > [data-medp-bet="slip"], html[data-theme-id="MEDP"]:not(#medp) [data-medp-bet-grid] > [data-medp-bet="msg"], html[data-theme-id="MEDP"]:not(#medp) [data-medp-bet-grid] > [data-medp-bet="submit"] { grid-column: 2; } } /* 20.5 · /topup and /withdrawal: their own icons, and colour that means something. Page-title badges: a note going in (green) or out (red). */ html[data-theme-id="MEDP"][data-medp-page="/topup"]:not(#medp) .container-xl > .bg-gradient-theme h4, html[data-theme-id="MEDP"][data-medp-page="/withdrawal"]:not(#medp) .container-xl > .bg-gradient-theme h4 { display: flex !important; align-items: center; } html[data-theme-id="MEDP"][data-medp-page="/topup"]:not(#medp) .container-xl > .bg-gradient-theme h4 > i, html[data-theme-id="MEDP"][data-medp-page="/withdrawal"]:not(#medp) .container-xl > .bg-gradient-theme h4 > i { display: none !important; } html[data-theme-id="MEDP"][data-medp-page="/topup"]:not(#medp) .container-xl > .bg-gradient-theme h4::before, html[data-theme-id="MEDP"][data-medp-page="/withdrawal"]:not(#medp) .container-xl > .bg-gradient-theme h4::before { content: ""; flex: 0 0 auto; width: 38px; height: 38px; margin-right: 12px; border-radius: 10px; background-repeat: no-repeat; background-position: center, center; background-size: 22px 22px, cover; } html[data-theme-id="MEDP"][data-medp-page="/topup"]:not(#medp) .container-xl > .bg-gradient-theme h4::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 18H4a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5'/%3E%3Cpath d='m16 19 3 3 3-3'/%3E%3Cpath d='M18 12h.01'/%3E%3Cpath d='M19 16v6'/%3E%3Cpath d='M6 12h.01'/%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3C/svg%3E"), linear-gradient(135deg, var(--md-deposit-from), var(--md-deposit-to)); } html[data-theme-id="MEDP"][data-medp-page="/withdrawal"]:not(#medp) .container-xl > .bg-gradient-theme h4::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 18H4a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5'/%3E%3Cpath d='M18 12h.01'/%3E%3Cpath d='M19 22v-6'/%3E%3Cpath d='m22 19-3-3-3 3'/%3E%3Cpath d='M6 12h.01'/%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3C/svg%3E"), linear-gradient(135deg, var(--md-withdraw-from), var(--md-withdraw-to)); } /* the dashboard's two money buttons use the same pair of icons */ html[data-theme-id="MEDP"]:not(#medp) .medp-account-card a[href="/topup"] h5 i, html[data-theme-id="MEDP"]:not(#medp) .medp-account-card a[href="/withdrawal"] h5 i { display: none !important; } html[data-theme-id="MEDP"]:not(#medp) .medp-account-card a[href="/topup"] h5::before, html[data-theme-id="MEDP"]:not(#medp) .medp-account-card a[href="/withdrawal"] h5::before { content: ""; display: inline-block; width: 22px; height: 22px; vertical-align: middle; background: no-repeat center / contain; } html[data-theme-id="MEDP"]:not(#medp) .medp-account-card a[href="/topup"] h5::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 18H4a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5'/%3E%3Cpath d='m16 19 3 3 3-3'/%3E%3Cpath d='M18 12h.01'/%3E%3Cpath d='M19 16v6'/%3E%3Cpath d='M6 12h.01'/%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3C/svg%3E"); } html[data-theme-id="MEDP"]:not(#medp) .medp-account-card a[href="/withdrawal"] h5::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 18H4a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5'/%3E%3Cpath d='M18 12h.01'/%3E%3Cpath d='M19 22v-6'/%3E%3Cpath d='m22 19-3-3-3 3'/%3E%3Cpath d='M6 12h.01'/%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3C/svg%3E"); } html[data-theme-id="MEDP"]:not(#medp) .medp-account-card a[href="/topup"].check-button { background: linear-gradient(135deg, var(--md-deposit-from), var(--md-deposit-to)) !important; } html[data-theme-id="MEDP"]:not(#medp) .medp-account-card a[href="/withdrawal"].check-button { background: linear-gradient(135deg, var(--md-withdraw-from), var(--md-withdraw-to)) !important; } /* deposit presets: the theme's own card, the chosen one filled with the deposit colour (2026-10-19: the four band colours read as off-theme) */ html[data-theme-id="MEDP"]:not(#medp) .medp-topup-presets .button-main { color: var(--md-on-color) !important; box-shadow: none !important; border: 0 !important; } html[data-theme-id="MEDP"]:not(#medp) .medp-topup-presets .button-main span { color: var(--md-on-color) !important; -webkit-text-fill-color: var(--md-on-color) !important; font-size: 1.05rem; } /* a preset below the page's minimum is hidden (the server refuses it); the short row that leaves is centred */ html[data-theme-id="MEDP"]:not(#medp) .medp-topup-presets > [data-medp-below-min] { display: none !important; } html[data-theme-id="MEDP"]:not(#medp) .medp-topup-presets { justify-content: center; } html[data-theme-id="MEDP"]:not(#medp) .medp-topup-presets > [class*="col-"] a.button-main.bg-gradient-theme { background: var(--md-surface) !important; border: 1.5px solid var(--md-line) !important; box-shadow: var(--md-shadow-1) !important; } html[data-theme-id="MEDP"]:not(#medp) .medp-topup-presets > [class*="col-"] a.button-main.bg-gradient-theme span { color: var(--md-ink) !important; -webkit-text-fill-color: var(--md-ink) !important; font-weight: 700 !important; } html[data-theme-id="MEDP"]:not(#medp) .medp-topup-presets > [class*="col-"] a.button-main.bg-gradient-theme[data-medp-picked] { background: linear-gradient(135deg, var(--md-deposit-from), var(--md-deposit-to)) !important; border-color: transparent !important; } html[data-theme-id="MEDP"]:not(#medp) .medp-topup-presets > [class*="col-"] a.button-main.bg-gradient-theme[data-medp-picked] span { color: var(--md-on-color) !important; -webkit-text-fill-color: var(--md-on-color) !important; } @media (hover: hover) { html[data-theme-id="MEDP"]:not(#medp) .medp-topup-presets > [class*="col-"] a.button-main.bg-gradient-theme:hover { border-color: var(--md-green) !important; } } html[data-theme-id="MEDP"]:not(#medp) .medp-topup-presets .button-main.active, html[data-theme-id="MEDP"]:not(#medp) .medp-topup-presets .button-main[aria-pressed="true"], html[data-theme-id="MEDP"]:not(#medp) .medp-topup-presets .button-main[data-medp-picked] { box-shadow: 0 0 0 3px var(--md-accent-soft) !important; } html[data-theme-id="MEDP"]:not(#medp) .medp-topup-presets .button-main.active span::before, html[data-theme-id="MEDP"]:not(#medp) .medp-topup-presets .button-main[aria-pressed="true"] span::before, html[data-theme-id="MEDP"]:not(#medp) .medp-topup-presets .button-main[data-medp-picked] span::before { content: ""; display: inline-block; width: 15px; height: 15px; margin-right: 6px; vertical-align: -1px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat; } html[data-theme-id="MEDP"]:not(#medp) .medp-topup .check-button.bgg-1 { background: linear-gradient(135deg, var(--md-deposit-from), var(--md-deposit-to)) !important; } /* withdrawal: the step reads as a label, not an alarm; the bank carries its own colour; the balance line is the one to read */ html[data-theme-id="MEDP"]:not(#medp) .medp-withdraw small.bgc-6 { background: var(--md-gold) !important; color: var(--md-on-gold) !important; -webkit-text-fill-color: var(--md-on-gold) !important; font-weight: 700 !important; } html[data-theme-id="MEDP"]:not(#medp) .medp-bank-icon { width: 56px !important; height: 56px !important; min-width: 56px; border-radius: 14px !important; background: var(--md-bank-default) !important; } html[data-theme-id="MEDP"]:not(#medp) .medp-bank-icon > i { display: none !important; } html[data-theme-id="MEDP"]:not(#medp) .medp-bank-icon::before { content: ""; width: 28px; height: 28px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 18v-7'/%3E%3Cpath d='M11.12 2.198a2 2 0 0 1 1.76.006l7.866 3.847c.476.233.31.949-.22.949H3.474c-.53 0-.695-.716-.22-.949z'/%3E%3Cpath d='M14 18v-7'/%3E%3Cpath d='M18 18v-7'/%3E%3Cpath d='M3 22h18'/%3E%3Cpath d='M6 18v-7'/%3E%3C/svg%3E") center / contain no-repeat; } html[data-theme-id="MEDP"]:not(#medp) .medp-bank-card[data-medp-bank="KBANK"] .medp-bank-icon { background: var(--md-bank-kbank) !important; } html[data-theme-id="MEDP"]:not(#medp) .medp-bank-card[data-medp-bank="SCB"] .medp-bank-icon { background: var(--md-bank-scb) !important; } html[data-theme-id="MEDP"]:not(#medp) .medp-bank-card[data-medp-bank="BBL"] .medp-bank-icon { background: var(--md-bank-bbl) !important; } html[data-theme-id="MEDP"]:not(#medp) .medp-bank-card[data-medp-bank="KTB"] .medp-bank-icon { background: var(--md-bank-ktb) !important; } html[data-theme-id="MEDP"]:not(#medp) .medp-bank-card[data-medp-bank="BAY"] .medp-bank-icon { background: var(--md-bank-bay) !important; } html[data-theme-id="MEDP"]:not(#medp) .medp-bank-card[data-medp-bank="TTB"] .medp-bank-icon { background: var(--md-bank-ttb) !important; } html[data-theme-id="MEDP"]:not(#medp) .medp-bank-card[data-medp-bank="GSB"] .medp-bank-icon { background: var(--md-bank-gsb) !important; } html[data-theme-id="MEDP"]:not(#medp) .medp-bank-card[data-medp-bank="BAAC"] .medp-bank-icon { background: var(--md-bank-baac) !important; } html[data-theme-id="MEDP"]:not(#medp) .medp-bank-card[data-medp-bank="UOB"] .medp-bank-icon { background: var(--md-bank-uob) !important; } html[data-theme-id="MEDP"]:not(#medp) .medp-bank-card[data-medp-bank="CIMB"] .medp-bank-icon { background: var(--md-bank-cimb) !important; } html[data-theme-id="MEDP"]:not(#medp) .medp-bank-card[data-medp-bank="KKP"] .medp-bank-icon { background: var(--md-bank-kkp) !important; } html[data-theme-id="MEDP"]:not(#medp) .medp-bank-card .txt-b > h6:first-child { display: inline-block; padding: 2px 10px; border-radius: var(--md-radius-chip); background: var(--md-surface-2); color: var(--md-ink) !important; font-weight: 700 !important; letter-spacing: .04em; } html[data-theme-id="MEDP"]:not(#medp) .medp-bank-card .txt-b > h5 { font-variant-numeric: tabular-nums; } html[data-theme-id="MEDP"]:not(#medp) .medp-withdraw .medp-solid-card > p.t-medium { display: flex; align-items: center; gap: 8px; color: var(--md-gold) !important; font-size: 1.1rem; font-weight: 700 !important; font-variant-numeric: tabular-nums; } html[data-theme-id="MEDP"]:not(#medp) .medp-withdraw .medp-solid-card > p.t-medium::before { content: ""; width: 22px; height: 22px; flex: 0 0 auto; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 7V4a1 1 0 0 0-1-1H5a2 2 0 0 0 0 4h15a1 1 0 0 1 1 1v4h-3a2 2 0 0 0 0 4h3a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1'/%3E%3Cpath d='M3 5v14a2 2 0 0 0 2 2h15a1 1 0 0 0 1-1v-4'/%3E%3C/svg%3E") center / contain no-repeat; opacity: .9; } html[data-theme-id="MEDP"]:not(#medp) .medp-withdraw .medp-solid-card > p.mb-3 { color: var(--md-ink-3) !important; } html[data-theme-id="MEDP"]:not(#medp) .medp-withdraw-cta, html[data-theme-id="MEDP"]:not(#medp) .content .medp-withdraw-cta.bdr-24 { background: linear-gradient(135deg, var(--md-withdraw-from), var(--md-withdraw-to)) !important; } /* ── Statement (/transaction) ─────────────────────────────────────────── The skin tags each row with its Thai status and direction; the raw code stays in the DOM for React and gives way to the label. */ html[data-theme-id="MEDP"]:not(#medp) [data-medp-tx-tone] > .d-flex:first-child > span { font-weight: 700; font-variant-numeric: tabular-nums; } html[data-theme-id="MEDP"]:not(#medp) [data-medp-tx-tone="success"][data-medp-tx-dir="in"] > .d-flex:first-child > span { color: var(--md-accent) !important; } html[data-theme-id="MEDP"]:not(#medp) [data-medp-tx-tone="success"][data-medp-tx-dir="out"] > .d-flex:first-child > span { color: var(--md-red-text) !important; } html[data-theme-id="MEDP"]:not(#medp) [data-medp-tx-tone="success"][data-medp-tx-dir="in"] > .d-flex:first-child > span::before { content: "+"; } html[data-theme-id="MEDP"]:not(#medp) [data-medp-tx-tone="success"][data-medp-tx-dir="out"] > .d-flex:first-child > span::before { content: "\2212"; } html[data-theme-id="MEDP"]:not(#medp) [data-medp-tx-tone="pending"] > .d-flex:first-child > span { color: var(--md-gold) !important; } html[data-theme-id="MEDP"]:not(#medp) [data-medp-tx-tone="failed"] > .d-flex:first-child > span, html[data-theme-id="MEDP"]:not(#medp) [data-medp-tx-tone="cancelled"] > .d-flex:first-child > span { color: var(--md-ink-3) !important; text-decoration: line-through; } html[data-theme-id="MEDP"]:not(#medp) small[data-medp-tx-label] { font-size: 0 !important; line-height: 0; } html[data-theme-id="MEDP"]:not(#medp) small[data-medp-tx-label]::after { content: attr(data-medp-tx-label); display: inline-block; padding: 3px 10px; border-radius: var(--md-radius-chip); font-size: .75rem; font-weight: 700; line-height: 1.4; color: var(--md-on-color); background: var(--md-surface-3); } html[data-theme-id="MEDP"]:not(#medp) [data-medp-tx-tone="success"] small[data-medp-tx-label]::after { background: var(--md-green); } html[data-theme-id="MEDP"]:not(#medp) [data-medp-tx-tone="pending"] small[data-medp-tx-label]::after { background: var(--md-pending-bg); } html[data-theme-id="MEDP"]:not(#medp) [data-medp-tx-tone="failed"] small[data-medp-tx-label]::after { background: var(--md-red); } html[data-theme-id="MEDP"]:not(#medp) [data-medp-tx-tone] > .d-flex:last-child { align-items: center; margin-top: 4px; } /* ── Bet page countdown ────────────────────────────────────────────────── The skin counts down to the round's close in data-medp-clock; React's own "เหลือเวลา 01:45" text stays in the DOM and gives way to it. */ html[data-theme-id="MEDP"]:not(#medp) small[data-medp-clock] { font-size: 0 !important; line-height: 0; } html[data-theme-id="MEDP"]:not(#medp) small[data-medp-clock]::after { content: attr(data-medp-clock); font-size: 14px; line-height: 1.55; font-variant-numeric: tabular-nums; } html[data-theme-id="MEDP"]:not(#medp) small[data-medp-clock][data-medp-closed] { background: var(--md-red) !important; } /* the slip's per-row delete is a 44px touch target like every other control */ html[data-theme-id="MEDP"]:not(#medp) [data-medp-bet="slip"] td > button { min-width: 44px; min-height: 44px; } /* ── Round state (JS: data-medp-round-state on picker cards) ───────────── Only an open card navigates; the others explain themselves on click. */ html[data-theme-id="MEDP"]:not(#medp) a[data-medp-round-state]:not([data-medp-round-state="open"]) { cursor: not-allowed; } html[data-theme-id="MEDP"]:not(#medp) .medp-play-card[data-medp-round-state="closed"], html[data-theme-id="MEDP"]:not(#medp) .medp-play-card[data-medp-round-state="set"] { opacity: .72; } /* the bundle's card is as old as its last list: its title follows the skin's state (a room that opened shows the open pill, one that closed the closed title, an upcoming one a neutral title) */ html[data-theme-id="MEDP"]:not(#medp) .medp-play-card[data-medp-round-state="upcoming"] h4.text-dark { color: var(--md-ink) !important; -webkit-text-fill-color: var(--md-ink) !important; } /* (the :not()s lift this over the "lotto-* .bdr-24 is transparent" reset: without them an open round the bundle still draws as closed had a white name on no background, invisible on a light theme) */ html[data-theme-id="MEDP"]:not(#medp) .medp-play-card[data-medp-round-state="open"] h4.text-dark, html[data-theme-id="MEDP"]:not(#medp) .medp-play-card[data-medp-round-state="open"] h4.text-dark.bdr-24:not(.bg-white-op2):not(.bg-white-op5):not(.link-bg-master) { background: var(--md-green) !important; color: var(--md-on-primary) !important; -webkit-text-fill-color: var(--md-on-primary) !important; font-size: 1rem !important; padding: 8px 6px !important; } html[data-theme-id="MEDP"]:not(#medp) .medp-play-card[data-medp-round-state="closed"] h4.text-white, html[data-theme-id="MEDP"]:not(#medp) .medp-play-card[data-medp-round-state="set"] h4.text-white { background: transparent !important; color: var(--md-closed-ink) !important; -webkit-text-fill-color: var(--md-closed-ink) !important; font-size: 1.5rem !important; padding: 0 !important; } html[data-theme-id="MEDP"]:not(#medp) .medp-play-card[data-medp-round-state="closed"] .txt-dt[data-medp-status]::after { color: var(--md-red-text); } html[data-theme-id="MEDP"]:not(#medp) .medp-play-card[data-medp-round-state="upcoming"] .txt-dt, html[data-theme-id="MEDP"]:not(#medp) .medp-play-card[data-medp-round-state="upcoming"] .txt-dt span { color: var(--md-gold) !important; } /* the skin's own status wording replaces the bundle's line */ html[data-theme-id="MEDP"]:not(#medp) .txt-dt[data-medp-status] > span { display: none !important; } html[data-theme-id="MEDP"]:not(#medp) .txt-dt[data-medp-status]::after { content: attr(data-medp-status); } html[data-theme-id="MEDP"]:not(#medp) .medp-play-card[data-medp-round-state="upcoming"] .txt-dt[data-medp-status]::after { color: var(--md-gold); } html[data-theme-id="MEDP"]:not(#medp) .medp-play-card[data-medp-round-state="open"] .txt-dt[data-medp-status]::after { color: var(--md-accent); } /* หวยชุด: one line above the list says why every card is closed */ html[data-theme-id="MEDP"]:not(#medp) [data-medp-set-closed]::before { content: attr(data-medp-set-closed); display: block; flex: 0 0 100%; margin: 12px 0; padding: 12px 16px; border-radius: 12px; background: var(--md-warn-soft-bg); border: 1px solid var(--md-warn-soft-line); color: var(--md-gold); font-weight: 700; text-align: center; } /* compact date range on a card ("21/09 – 22/09"); the full text is the title */ html[data-theme-id="MEDP"]:not(#medp) .medp-play-card small[data-medp-date] { font-size: 0 !important; } html[data-theme-id="MEDP"]:not(#medp) .medp-play-card small[data-medp-date]::after { content: attr(data-medp-date); font-size: .875rem; } /* ── Bet page for a round that is not open (JS: data-medp-bet-closed) ──── */ html[data-theme-id="MEDP"]:not(#medp) [data-medp-bet-root][data-medp-bet-closed]::before { content: attr(data-medp-bet-closed); display: block; margin: 0 0 12px; padding: 12px 16px; border-radius: 12px; background: var(--md-danger-soft-bg); border: 1px solid var(--md-danger-soft-line); color: var(--md-red-text); font-weight: 700; text-align: center; } html[data-theme-id="MEDP"]:not(#medp) [data-medp-bet-root] > [inert] { opacity: .45; filter: grayscale(.5); } @media (min-width: 992px) { html[data-theme-id="MEDP"]:not(#medp) [data-medp-bet-grid][data-medp-bet-closed]::before { grid-column: 1 / -1; grid-row-end: span 16; align-self: start; } } /* ── Toast: refusals the skin makes itself ──────────────────────────────── */ html[data-theme-id="MEDP"]:not(#medp) .medp-toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); z-index: 2000; max-width: min(92vw, 420px); padding: 12px 18px; border-radius: 12px; background: var(--md-toast-bg); border: 1px solid var(--md-line); box-shadow: 0 10px 30px var(--md-shadow-float); color: var(--md-toast-ink); font-weight: 700; text-align: center; opacity: 0; transform: translate(-50%, 16px); pointer-events: none; transition: opacity .18s ease, transform .18s ease; } html[data-theme-id="MEDP"]:not(#medp) .medp-toast.is-shown { opacity: 1; transform: translate(-50%, 0); } @media (prefers-reduced-motion: reduce) { html[data-theme-id="MEDP"]:not(#medp) .medp-toast { transition: none; } } /* ── Results: a bank logo sits over its label (its box was left-aligned in a column the width of the label) ───────────────────────────────────────── */ html[data-theme-id="MEDP"]:not(#medp) .wrap.justify-content-center > div > .d-flex:has(> img.card-flag), html[data-theme-id="MEDP"]:not(#medp) .wrap.justify-content-center > div > h6.d-flex { justify-content: center; } /* ── /casino: the logo in a band above the caption, never under the text; a provider without a loadable logo shows its initials ─────────────────── */ html[data-theme-id="MEDP"]:not(#medp) .medp-casino-tile__face { flex-direction: column !important; justify-content: flex-start !important; /* the base sheet's 16:11 ratio with a 168px floor made the face 244px wide in a 185px tile (names clipped) and too short for the caption */ aspect-ratio: auto !important; width: 100% !important; height: auto !important; min-height: 236px !important; padding: 112px 10px 58px !important; /* 12px + an 88px logo band + 12px */ background-color: var(--md-surface) !important; /* layer 1 is the bundle's dark gradient (not needed off the art), layer 2 the logo */ background-size: 0 0, auto 88px !important; background-position: center, center 12px !important; background-repeat: no-repeat !important; } html[data-theme-id="MEDP"]:not(#medp) .medp-casino-tile__face[data-medp-logo="none"]::before { content: attr(data-medp-initials); position: absolute; top: 12px; left: 50%; transform: translateX(-50%); width: 88px; height: 88px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--md-surface-3); color: var(--md-ink); font-family: var(--md-font); font-size: 1.7rem; font-weight: 700; letter-spacing: .02em; } html[data-theme-id="MEDP"]:not(#medp) .medp-casino-tile__copy { width: 100%; } /* tiles in a row share its height, so the play buttons line up */ html[data-theme-id="MEDP"]:not(#medp) .row > [class*="col-"]:has(> a > .medp-casino-tile) > a { display: flex; height: 100%; } html[data-theme-id="MEDP"]:not(#medp) .medp-casino-tile { flex: 1; display: flex; } html[data-theme-id="MEDP"]:not(#medp) .medp-casino-tile > .medp-casino-tile__face { flex: 1; } html[data-theme-id="MEDP"]:not(#medp) .medp-casino-tile__copy h3 { font-size: 1.1rem !important; font-weight: 700 !important; margin-bottom: 2px !important; white-space: normal !important; overflow-wrap: anywhere; } @media (max-width: 575.98px) { html[data-theme-id="MEDP"]:not(#medp) .row > .col-12:has(> a > .medp-casino-tile) { flex: 0 0 50%; max-width: 50%; padding-left: 5px; padding-right: 5px; } html[data-theme-id="MEDP"]:not(#medp) .medp-casino-tile__face { min-height: 206px !important; padding-top: 94px !important; /* 12px + a 72px logo band + 10px */ background-size: 0 0, auto 72px !important; } html[data-theme-id="MEDP"]:not(#medp) .medp-casino-tile__face[data-medp-logo="none"]::before { width: 72px; height: 72px; font-size: 1.4rem; } html[data-theme-id="MEDP"]:not(#medp) .medp-casino-tile__copy h3 { font-size: 1rem !important; } } /* ── /change-password: icon beside, not against, the text; a form-sized column on desktop ─────────────────────────────────────────────────────── */ html[data-theme-id="MEDP"]:not(#medp)[data-medp-page="/change-password"] .form-inp > .icon { flex: 0 0 44px; display: flex; align-items: center; justify-content: center; } html[data-theme-id="MEDP"]:not(#medp)[data-medp-page="/change-password"] .form-inp > .icon + input { padding-left: 4px !important; } html[data-theme-id="MEDP"]:not(#medp)[data-medp-page="/change-password"] section.content form { max-width: 480px; margin: 0 auto; } /* ── Rules pages: the rules are a list again ──────────────────────────────── */ html[data-theme-id="MEDP"]:not(#medp)[data-medp-page^="/terms"] section.content ul, html[data-theme-id="MEDP"]:not(#medp)[data-medp-page^="/set-terms"] section.content ul { list-style: disc; padding-left: 1.4em; } html[data-theme-id="MEDP"]:not(#medp)[data-medp-page^="/terms"] section.content ul > li, html[data-theme-id="MEDP"]:not(#medp)[data-medp-page^="/set-terms"] section.content ul > li { list-style-type: disc !important; margin-bottom: 4px; } html[data-theme-id="MEDP"]:not(#medp)[data-medp-page^="/terms"] section.content li::marker, html[data-theme-id="MEDP"]:not(#medp)[data-medp-page^="/set-terms"] section.content li::marker { color: var(--md-accent); } /* ── Results: section titles centred over their centred prize boxes ─────── */ html[data-theme-id="MEDP"]:not(#medp)[data-medp-page="/latte-result"] section.content div:has(> h5.t-regular.c-dark) { text-align: center; justify-content: center !important; } /* ── 44px touch targets the page audit still found ───────────────────────── */ html[data-theme-id="MEDP"]:not(#medp)[data-medp-page="/latte-result"] section.content button { min-width: 64px; } html[data-theme-id="MEDP"]:not(#medp)[data-medp-page="/inbox"] section.content a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; } /* ── Phone header: the logo sat at the left of its 100px link, 24px left of centre; it is centred in the link, so on the page ─────────────────────── */ @media (max-width: 991.98px) { html[data-theme-id="MEDP"]:not(#medp) .medp-member-logo { display: flex !important; justify-content: center; align-items: center; } } /* ── Polish pass (build 20260926a) ─────────────────────────────────────── */ /* Yiki lobby: the open room says when it closes, in green, like an upcoming room says when it opens; a thin green ring picks it out of the grid. */ html[data-theme-id="MEDP"]:not(#medp) .medp-play-card[data-medp-round-state="open"] { box-shadow: inset 0 0 0 1.5px var(--md-open-ring) !important; } html[data-theme-id="MEDP"]:not(#medp) .medp-play-card[data-medp-round-state="open"] .txt-dt[data-medp-status]::after { font-weight: 600; } /* Results: a draw without a first prize no longer echoes its name as a number */ html[data-theme-id="MEDP"]:not(#medp) [data-medp-name-echo="1"] { display: none !important; } /* the date row keeps its button beside the field at every width */ html[data-theme-id="MEDP"]:not(#medp)[data-medp-page="/latte-result"] section.content .row.btn-submit { flex-wrap: nowrap; } html[data-theme-id="MEDP"]:not(#medp)[data-medp-page="/latte-result"] section.content .row.btn-submit > .col-10 { flex: 1 1 auto; width: auto; max-width: none; } html[data-theme-id="MEDP"]:not(#medp)[data-medp-page="/latte-result"] section.content .row.btn-submit > .col-2 { flex: 0 0 auto; width: auto; max-width: none; } html[data-theme-id="MEDP"]:not(#medp)[data-medp-page="/latte-result"] section.content .row.btn-submit > .col-2 > button { min-width: 96px; min-height: 44px; padding: 0 18px !important; } /* Bills: the outcome word keeps its text and gains colour plus an edge */ html[data-theme-id="MEDP"]:not(#medp) [data-medp-bill] > .d-flex:first-child > span { font-weight: 700; } html[data-theme-id="MEDP"]:not(#medp) [data-medp-bill="won"] { box-shadow: inset 3px 0 0 var(--md-gold) !important; } html[data-theme-id="MEDP"]:not(#medp) [data-medp-bill="won"] > .d-flex:first-child > span { color: var(--md-gold) !important; } html[data-theme-id="MEDP"]:not(#medp) [data-medp-bill="refund"] { box-shadow: inset 3px 0 0 var(--md-refund) !important; } html[data-theme-id="MEDP"]:not(#medp) [data-medp-bill="refund"] > .d-flex:first-child > span { color: var(--md-refund) !important; } html[data-theme-id="MEDP"]:not(#medp) [data-medp-bill="pending"] { box-shadow: inset 3px 0 0 var(--md-pending) !important; } html[data-theme-id="MEDP"]:not(#medp) [data-medp-bill="pending"] > .d-flex:first-child > span { color: var(--md-pending) !important; } html[data-theme-id="MEDP"]:not(#medp) [data-medp-bill="lost"] > .d-flex:first-child > span { color: var(--md-ink-3) !important; font-weight: 500; } /* Affiliate: "คัดลอก" is a real button beside the link (the bundle relabels it "คัดลอกแล้ว" once the link is on the clipboard) */ html[data-theme-id="MEDP"]:not(#medp)[data-medp-page="/affiliate"] section.content .btn-submit.d-flex > input { flex: 1 1 auto; min-width: 0; } html[data-theme-id="MEDP"]:not(#medp)[data-medp-page="/affiliate"] section.content .btn-submit.d-flex > button.btn { flex: 0 0 auto; width: auto !important; min-height: 44px; margin-left: 8px; padding: 0 18px !important; background: var(--md-green) !important; border-radius: var(--md-radius-btn) !important; } /* its .c-white becomes page ink in section 3; on the green fill it is white */ html[data-theme-id="MEDP"]:not(#medp)[data-medp-page="/affiliate"] section.content .btn-submit.d-flex > button.btn, html[data-theme-id="MEDP"]:not(#medp)[data-medp-page="/affiliate"] section.content .btn-submit.d-flex > button.btn * { color: var(--md-on-primary) !important; -webkit-text-fill-color: var(--md-on-primary) !important; } html[data-theme-id="MEDP"]:not(#medp)[data-medp-page="/affiliate"] section.content .btn-submit.d-flex > button.btn h6 { margin: 0; white-space: nowrap; } /* สร้างเลขชุด: the number box has the field corners of the name box above, and the empty-state icon sits centred over its line */ html[data-theme-id="MEDP"]:not(#medp) .numberset-area { border-radius: var(--md-radius-field) !important; } html[data-theme-id="MEDP"]:not(#medp)[data-medp-page="/numberset"] section.content .text-center > i.d-block { width: auto; margin: 0 auto 8px; text-align: center; font-size: 1.75rem; color: var(--md-ink-3); } /* Bet page: the confirm button lines up with "เพิ่มรายการ" and the slip content above it instead of running past them to the card edge */ html[data-theme-id="MEDP"]:not(#medp) [data-medp-bet="submit"] { padding-inline: 12px !important; } /* Sign-up: going back to sign-in is the secondary action beside "ถัดไป", in the same dark green as sign-in's secondary buttons (only "ถัดไป" is primary) */ html[data-theme-id="MEDP"]:not(#medp)[data-medp-page="/signup"] a[href="/signin"] > button.btn_main[type="button"] { background: var(--md-green-2) !important; background-image: none !important; } @media (hover: hover) { html[data-theme-id="MEDP"]:not(#medp)[data-medp-page="/signup"] a[href="/signin"] > button.btn_main[type="button"]:hover { background: var(--md-green-2-hi) !important; } } /* ── Member menu (build 20260926c) ──────────────────────────────────────── The JS layer puts the full member menu (ปันสุข parity) into the bundle's drawer as nav.medp-drawer-nav, above the bundle's own account list; the drawer scrolls when the list is taller than the screen. */ html[data-theme-id="MEDP"]:not(#medp) .menu-list { overflow-y: auto !important; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } html[data-theme-id="MEDP"]:not(#medp) .medp-drawer-nav { padding: 12px 16px 0; } html[data-theme-id="MEDP"]:not(#medp) .medp-drawer-nav__title, html[data-theme-id="MEDP"]:not(#medp) .medp-drawer-nav + ul::before { display: block; margin: 10px 4px 6px; font-size: .75rem; font-weight: 500; letter-spacing: .02em; color: var(--md-ink-3) !important; } html[data-theme-id="MEDP"]:not(#medp) .medp-drawer-nav__title:first-child { margin-top: 0; } html[data-theme-id="MEDP"]:not(#medp) .medp-drawer-nav + ul { padding-top: 0 !important; } html[data-theme-id="MEDP"]:not(#medp) .medp-drawer-nav + ul::before { content: "บัญชี"; } html[data-theme-id="MEDP"]:not(#medp) .medp-drawer-nav ul { list-style: none; margin: 0; padding: 0; } html[data-theme-id="MEDP"]:not(#medp) .menu-list .medp-drawer-nav__item { display: flex !important; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 8px 12px !important; margin: 0 0 6px !important; border: 0; border-radius: var(--md-radius-btn) !important; background: var(--md-surface) !important; color: var(--md-ink) !important; -webkit-text-fill-color: currentColor !important; font: inherit; font-size: 1rem; text-align: left; text-decoration: none !important; cursor: pointer; } html[data-theme-id="MEDP"]:not(#medp) .medp-drawer-nav__item svg { flex: 0 0 auto; width: 20px; height: 20px; color: var(--md-accent); } html[data-theme-id="MEDP"]:not(#medp) .menu-list .medp-drawer-nav__item[aria-current="page"] { background: var(--md-green) !important; color: var(--md-on-primary) !important; font-weight: 500; } html[data-theme-id="MEDP"]:not(#medp) .medp-drawer-nav__item[aria-current="page"] svg { color: var(--md-on-primary); } @media (hover: hover) { html[data-theme-id="MEDP"]:not(#medp) .menu-list .medp-drawer-nav__item:not([aria-current="page"]):hover { background: var(--md-surface-2) !important; } } html[data-theme-id="MEDP"]:not(#medp) .medp-drawer-nav__item:focus-visible, html[data-theme-id="MEDP"]:not(#medp) .medp-sheet a:focus-visible, html[data-theme-id="MEDP"]:not(#medp) .medp-sheet button:focus-visible, html[data-theme-id="MEDP"]:not(#medp) .medp-member-strip a:focus-visible { outline: 2px solid var(--md-accent) !important; outline-offset: 2px; } /* Panels the skin draws (อัตราจ่าย, บทความ): a bottom sheet on phones, a centred dialog from 768px. They live outside #root, above the drawer. */ html[data-theme-id="MEDP"]:not(#medp)[data-medp-sheet-open] body { overflow: hidden !important; } html[data-theme-id="MEDP"]:not(#medp) .medp-sheet { position: fixed; inset: 0; z-index: 1200; display: flex; align-items: flex-end; justify-content: center; font-family: var(--md-font); } html[data-theme-id="MEDP"]:not(#medp) .medp-sheet__backdrop { position: absolute; inset: 0; background: var(--md-overlay); } html[data-theme-id="MEDP"]:not(#medp) .medp-sheet__panel { position: relative; width: 100%; max-width: 560px; max-height: min(86vh, 720px); overflow-y: auto; overscroll-behavior: contain; padding: 0 16px calc(16px + env(safe-area-inset-bottom, 0px)); background: var(--md-surface); color: var(--md-ink); border: 1px solid var(--md-line); border-bottom: 0; border-radius: var(--md-radius-card) var(--md-radius-card) 0 0; box-shadow: var(--md-elev-card); } @media (min-width: 768px) { html[data-theme-id="MEDP"]:not(#medp) .medp-sheet { align-items: center; padding: 24px; } html[data-theme-id="MEDP"]:not(#medp) .medp-sheet__panel { border-bottom: 1px solid var(--md-line); border-radius: var(--md-radius-card); padding-bottom: 16px; } } html[data-theme-id="MEDP"]:not(#medp) .medp-sheet__head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; padding: 12px 0; background: var(--md-surface); border-bottom: 1px solid var(--md-line); } html[data-theme-id="MEDP"]:not(#medp) .medp-sheet__title { margin: 0; font-size: 1.125rem; font-weight: 700; color: var(--md-ink) !important; } html[data-theme-id="MEDP"]:not(#medp) .medp-sheet__close { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 44px; height: 44px; padding: 0; border: 0; border-radius: var(--md-radius-btn); background: var(--md-surface-2); color: var(--md-ink); cursor: pointer; } html[data-theme-id="MEDP"]:not(#medp) .medp-sheet__close svg { width: 20px; height: 20px; } html[data-theme-id="MEDP"]:not(#medp) .medp-sheet__lead { margin: 0 0 12px; font-size: .875rem; color: var(--md-ink-2) !important; } html[data-theme-id="MEDP"]:not(#medp) .medp-sheet__status { margin: 0; padding: 16px 0; text-align: center; color: var(--md-ink-3) !important; } html[data-theme-id="MEDP"]:not(#medp) .medp-rates { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; } html[data-theme-id="MEDP"]:not(#medp) .medp-rates th, html[data-theme-id="MEDP"]:not(#medp) .medp-rates td { padding: 10px 8px; border-bottom: 1px solid var(--md-line); text-align: right; color: var(--md-ink) !important; background: transparent !important; } html[data-theme-id="MEDP"]:not(#medp) .medp-rates thead th { font-size: .8125rem; font-weight: 500; color: var(--md-ink-3) !important; } html[data-theme-id="MEDP"]:not(#medp) .medp-rates th:first-child { text-align: left; } html[data-theme-id="MEDP"]:not(#medp) .medp-rates tbody th { font-weight: 500; } html[data-theme-id="MEDP"]:not(#medp) .medp-rates tbody td:nth-child(2) { font-weight: 700; color: var(--md-gold) !important; } html[data-theme-id="MEDP"]:not(#medp) .medp-sheet__action { display: flex; align-items: center; justify-content: center; min-height: 44px; margin-top: 16px; border-radius: var(--md-radius-btn); background: var(--md-green) !important; color: var(--md-on-primary) !important; font-weight: 500; text-decoration: none !important; } html[data-theme-id="MEDP"]:not(#medp) .medp-blog-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; } html[data-theme-id="MEDP"]:not(#medp) .medp-blog-card { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 64px; padding: 12px; border: 1px solid var(--md-line); border-radius: var(--md-radius-btn); background: var(--md-surface-2) !important; color: var(--md-ink) !important; font: inherit; text-align: left; text-decoration: none !important; cursor: pointer; } html[data-theme-id="MEDP"]:not(#medp) .medp-blog-card__icon, html[data-theme-id="MEDP"]:not(#medp) .medp-featured__icon, html[data-theme-id="MEDP"]:not(#medp) .medp-invite__icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 44px; height: 44px; border-radius: var(--md-radius-chip); background: var(--md-green-2); color: var(--md-accent); } html[data-theme-id="MEDP"]:not(#medp) .medp-blog-card__icon svg, html[data-theme-id="MEDP"]:not(#medp) .medp-featured__icon svg, html[data-theme-id="MEDP"]:not(#medp) .medp-invite__icon svg { width: 22px; height: 22px; } html[data-theme-id="MEDP"]:not(#medp) .medp-blog-card__copy, html[data-theme-id="MEDP"]:not(#medp) .medp-featured__copy, html[data-theme-id="MEDP"]:not(#medp) .medp-invite__copy { display: flex; flex: 1 1 auto; flex-direction: column; gap: 2px; min-width: 0; line-height: 1.35; } html[data-theme-id="MEDP"]:not(#medp) .medp-blog-card__copy strong, html[data-theme-id="MEDP"]:not(#medp) .medp-invite__copy strong { color: var(--md-ink) !important; font-weight: 700; } html[data-theme-id="MEDP"]:not(#medp) .medp-blog-card__copy small, html[data-theme-id="MEDP"]:not(#medp) .medp-invite__copy small { font-size: .8125rem; color: var(--md-ink-3) !important; } html[data-theme-id="MEDP"]:not(#medp) .medp-blog-card > svg, html[data-theme-id="MEDP"]:not(#medp) .medp-invite > svg { flex: 0 0 auto; width: 18px; height: 18px; color: var(--md-ink-3); } /* Dashboard: the next round to close (live countdown) and the invite card, under the account card, as on ปันสุข's member home */ html[data-theme-id="MEDP"]:not(#medp) .medp-dash-gap[data-medp-strip] { height: auto !important; } html[data-theme-id="MEDP"]:not(#medp) .medp-member-strip { display: grid; gap: 8px; padding-top: 12px; } @media (min-width: 768px) { html[data-theme-id="MEDP"]:not(#medp) .medp-member-strip { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); } } html[data-theme-id="MEDP"]:not(#medp) .medp-featured, html[data-theme-id="MEDP"]:not(#medp) .medp-invite { display: flex; align-items: center; gap: 12px; min-height: 72px; padding: 12px 14px; border: 1px solid var(--md-line); border-radius: var(--md-radius-card); background: var(--md-surface) !important; color: var(--md-ink) !important; text-decoration: none !important; box-shadow: var(--md-elev-1); } html[data-theme-id="MEDP"]:not(#medp) .medp-featured { border-color: var(--md-accent-soft); } html[data-theme-id="MEDP"]:not(#medp) .medp-featured__icon { background: var(--md-green); color: var(--md-on-primary); } html[data-theme-id="MEDP"]:not(#medp) .medp-featured__label { font-size: .75rem; color: var(--md-ink-3) !important; } html[data-theme-id="MEDP"]:not(#medp) .medp-featured__name { overflow: hidden; font-size: 1rem; font-weight: 700; white-space: nowrap; text-overflow: ellipsis; color: var(--md-ink) !important; } html[data-theme-id="MEDP"]:not(#medp) .medp-featured__clock::after { content: attr(data-medp-clock); font-size: .875rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--md-gold); } html[data-theme-id="MEDP"]:not(#medp) .medp-featured__go { display: inline-flex; align-items: center; flex: 0 0 auto; gap: 4px; min-height: 44px; padding: 0 12px; border-radius: var(--md-radius-btn); background: var(--md-green); color: var(--md-on-primary); font-size: .875rem; font-weight: 500; white-space: nowrap; } html[data-theme-id="MEDP"]:not(#medp) .medp-featured__go svg { width: 16px; height: 16px; } @media (hover: hover) { html[data-theme-id="MEDP"]:not(#medp) .medp-featured:hover, html[data-theme-id="MEDP"]:not(#medp) .medp-invite:hover, html[data-theme-id="MEDP"]:not(#medp) .medp-blog-card:hover { background: var(--md-surface-2) !important; } } /* Statement: each row closes with its balance after the entry (API balanceAfter; the JS layer writes it into data-medp-after) */ html[data-theme-id="MEDP"]:not(#medp) [data-medp-after]::after { content: attr(data-medp-after); display: block; margin-top: 4px; text-align: right; font-size: .8125rem; font-variant-numeric: tabular-nums; color: var(--md-ink-3); } /* ── /topup: the SXPAY order card (skin JS: placePayCard) ───────────────── The card is the skin's own node, first in the page body's column. Its data-medp-pay names the order's state (pending | processing | review | done; a timed-out or cancelled order is never shown); the page body carries data-medp-pay="open" while an order is unpaid or in review, which hides the bundle's own order card and its amount form (the server refuses a second order until this one ends). */ html[data-theme-id="MEDP"]:not(#medp) .medp-topup[data-medp-pay] [data-medp-native-pay], html[data-theme-id="MEDP"]:not(#medp) .medp-topup[data-medp-pay="open"] .pb-3 > form, html[data-theme-id="MEDP"]:not(#medp) .medp-topup[data-medp-pay="open"] .pb-3 > .row, html[data-theme-id="MEDP"]:not(#medp) .medp-topup[data-medp-pay="open"] .pb-3 > .col-12.mb-2, /* the bundle's "สร้างรายการเติมเงินแล้ว" line: the card already says so */ html[data-theme-id="MEDP"]:not(#medp) .medp-topup[data-medp-pay] .pb-3 > .bg-theme.text-center { display: none !important; } html[data-theme-id="MEDP"]:not(#medp) .medp-pay { position: relative; max-width: 720px; margin: 0 auto 16px; padding: 20px 16px 16px; overflow: hidden; border: 1px solid var(--md-line); border-radius: var(--md-radius-card); background: radial-gradient(120% 70% at 100% 0%, color-mix(in srgb, var(--md-green) 30%, transparent), transparent 62%), linear-gradient(180deg, var(--md-surface-2), var(--md-surface)); box-shadow: var(--md-elev-card); color: var(--md-ink); font-family: var(--md-font); text-align: left; } html[data-theme-id="MEDP"]:not(#medp) .medp-pay::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: linear-gradient(90deg, transparent, var(--md-gold), transparent); opacity: .75; } html[data-theme-id="MEDP"]:not(#medp) .medp-pay [hidden] { display: none !important; } html[data-theme-id="MEDP"]:not(#medp) .medp-pay p, html[data-theme-id="MEDP"]:not(#medp) .medp-pay dl, html[data-theme-id="MEDP"]:not(#medp) .medp-pay dd, html[data-theme-id="MEDP"]:not(#medp) .medp-pay figure, html[data-theme-id="MEDP"]:not(#medp) .medp-pay h3, html[data-theme-id="MEDP"]:not(#medp) .medp-pay h4 { margin: 0; } html[data-theme-id="MEDP"]:not(#medp) .medp-pay svg { flex: 0 0 auto; width: 18px; height: 18px; } /* head: what this is, and where it stands */ html[data-theme-id="MEDP"]:not(#medp) .medp-pay__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } html[data-theme-id="MEDP"]:not(#medp) .medp-pay__heading { min-width: 0; } html[data-theme-id="MEDP"]:not(#medp) .medp-pay__eyebrow { font-size: .8125rem; color: var(--md-ink-3); font-variant-numeric: tabular-nums; } html[data-theme-id="MEDP"]:not(#medp) .medp-pay__title { margin-top: 2px; font-size: 1.125rem; font-weight: 600; line-height: 1.35; color: var(--md-ink); text-wrap: balance; } html[data-theme-id="MEDP"]:not(#medp) .medp-pay__state { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 0 12px; border: 1px solid color-mix(in srgb, currentColor 38%, transparent); border-radius: var(--md-radius-chip); background: color-mix(in srgb, currentColor 12%, transparent); color: var(--md-gold); font-size: .8125rem; font-weight: 600; white-space: nowrap; } html[data-theme-id="MEDP"]:not(#medp) .medp-pay__state::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; } html[data-theme-id="MEDP"]:not(#medp) .medp-pay[data-medp-pay="pending"] .medp-pay__state::before { animation: medp-pay-pulse 1.6s ease-in-out infinite; } html[data-theme-id="MEDP"]:not(#medp) .medp-pay[data-medp-pay="processing"] .medp-pay__state { color: var(--md-pending); } html[data-theme-id="MEDP"]:not(#medp) .medp-pay[data-medp-pay="done"] .medp-pay__state { color: var(--md-accent); } @keyframes medp-pay-pulse { 50% { opacity: .25; } } /* the amount: the one number the member has to get right */ html[data-theme-id="MEDP"]:not(#medp) .medp-pay__hero { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 16px; padding: 18px 12px 16px; border: 1px solid var(--md-line); border-radius: 16px; background: var(--md-inset); text-align: center; } html[data-theme-id="MEDP"]:not(#medp) .medp-pay__label { font-size: .875rem; color: var(--md-ink-2); } html[data-theme-id="MEDP"]:not(#medp) .medp-pay__sum { display: flex; align-items: baseline; justify-content: center; gap: 6px; color: var(--md-gold); font-variant-numeric: tabular-nums; line-height: 1.1; } html[data-theme-id="MEDP"]:not(#medp) .medp-pay__baht { font-size: 1.5rem; font-weight: 500; } html[data-theme-id="MEDP"]:not(#medp) .medp-pay__sum strong { font-size: clamp(2.25rem, 11vw, 3.25rem); font-weight: 700; letter-spacing: -.01em; } html[data-theme-id="MEDP"]:not(#medp) .medp-pay:not([data-medp-pay="pending"]) .medp-pay__sum { color: var(--md-ink); } html[data-theme-id="MEDP"]:not(#medp) .medp-pay__credit { max-width: 34ch; font-size: .8125rem; line-height: 1.5; color: var(--md-ink-2); text-wrap: balance; } html[data-theme-id="MEDP"]:not(#medp) .medp-pay__timer { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; font-size: .875rem; color: var(--md-ink-2); } html[data-theme-id="MEDP"]:not(#medp) .medp-pay__timer svg { width: 16px; height: 16px; } html[data-theme-id="MEDP"]:not(#medp) .medp-pay__clock { min-width: 5ch; color: var(--md-ink); font-weight: 700; font-variant-numeric: tabular-nums; text-align: left; } html[data-theme-id="MEDP"]:not(#medp) .medp-pay__clock::after { content: attr(data-medp-clock); } html[data-theme-id="MEDP"]:not(#medp) .medp-pay[data-medp-pay-soon] .medp-pay__timer, html[data-theme-id="MEDP"]:not(#medp) .medp-pay[data-medp-pay-soon] .medp-pay__clock { color: var(--md-red-text); } /* copy buttons (amount, account number) */ html[data-theme-id="MEDP"]:not(#medp) .medp-pay__copy { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; margin: 0; padding: 0 14px; border: 1px solid var(--md-line); border-radius: var(--md-radius-chip); background: var(--md-surface-3); color: var(--md-ink); font-family: inherit; font-size: .875rem; font-weight: 500; cursor: pointer; } html[data-theme-id="MEDP"]:not(#medp) .medp-pay__copy svg { width: 16px; height: 16px; color: var(--md-gold); } /* where to pay: the QR and the receiving account */ html[data-theme-id="MEDP"]:not(#medp) .medp-pay__detail { display: grid; gap: 14px; margin-top: 14px; } html[data-theme-id="MEDP"]:not(#medp) .medp-pay__qr { display: flex; flex-direction: column; align-items: center; gap: 8px; } html[data-theme-id="MEDP"]:not(#medp) .medp-pay__qr-box { width: 100%; max-width: 232px; overflow: hidden; border-radius: 16px; background: var(--md-on-color); box-shadow: 0 0 0 1px var(--md-line), var(--md-elev-1); line-height: 0; } html[data-theme-id="MEDP"]:not(#medp) .medp-pay__qr-box > canvas, html[data-theme-id="MEDP"]:not(#medp) .medp-pay__qr-box > img { display: block; width: 100%; height: auto; } html[data-theme-id="MEDP"]:not(#medp) .medp-pay__qr figcaption { font-size: .8125rem; color: var(--md-ink-2); } html[data-theme-id="MEDP"]:not(#medp) .medp-pay__account { align-self: center; border: 1px solid var(--md-line); border-radius: 16px; background: var(--md-inset); } html[data-theme-id="MEDP"]:not(#medp) .medp-pay__row { padding: 12px 14px; } html[data-theme-id="MEDP"]:not(#medp) .medp-pay__row + .medp-pay__row { border-top: 1px solid var(--md-line); } html[data-theme-id="MEDP"]:not(#medp) .medp-pay__row dt { margin-bottom: 4px; font-size: .75rem; font-weight: 400; color: var(--md-ink-3); } html[data-theme-id="MEDP"]:not(#medp) .medp-pay__row dd { display: flex; align-items: center; gap: 10px; min-width: 0; font-size: 1rem; font-weight: 600; color: var(--md-ink); overflow-wrap: anywhere; } html[data-theme-id="MEDP"]:not(#medp) .medp-pay__number { flex: 1 1 auto; min-width: 0; font-size: 1.375rem; font-weight: 700; letter-spacing: .04em; font-variant-numeric: tabular-nums; user-select: all; } html[data-theme-id="MEDP"]:not(#medp) .medp-pay__bank-mark { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 28px; padding: 0 8px; border-radius: 8px; background: var(--md-bank-default); color: var(--md-on-color); font-size: .6875rem; font-weight: 700; letter-spacing: .04em; } html[data-theme-id="MEDP"]:not(#medp) .medp-pay__bank-mark:empty { display: none; } html[data-theme-id="MEDP"]:not(#medp) .medp-pay[data-medp-bank="KBANK"] .medp-pay__bank-mark { background: var(--md-bank-kbank); } html[data-theme-id="MEDP"]:not(#medp) .medp-pay[data-medp-bank="SCB"] .medp-pay__bank-mark { background: var(--md-bank-scb); } html[data-theme-id="MEDP"]:not(#medp) .medp-pay[data-medp-bank="BBL"] .medp-pay__bank-mark { background: var(--md-bank-bbl); } html[data-theme-id="MEDP"]:not(#medp) .medp-pay[data-medp-bank="KTB"] .medp-pay__bank-mark { background: var(--md-bank-ktb); } html[data-theme-id="MEDP"]:not(#medp) .medp-pay[data-medp-bank="BAY"] .medp-pay__bank-mark { background: var(--md-bank-bay); } html[data-theme-id="MEDP"]:not(#medp) .medp-pay[data-medp-bank="TTB"] .medp-pay__bank-mark { background: var(--md-bank-ttb); } html[data-theme-id="MEDP"]:not(#medp) .medp-pay[data-medp-bank="GSB"] .medp-pay__bank-mark { background: var(--md-bank-gsb); } html[data-theme-id="MEDP"]:not(#medp) .medp-pay[data-medp-bank="BAAC"] .medp-pay__bank-mark { background: var(--md-bank-baac); } html[data-theme-id="MEDP"]:not(#medp) .medp-pay[data-medp-bank="UOB"] .medp-pay__bank-mark { background: var(--md-bank-uob); } html[data-theme-id="MEDP"]:not(#medp) .medp-pay[data-medp-bank="CIMB"] .medp-pay__bank-mark { background: var(--md-bank-cimb); } html[data-theme-id="MEDP"]:not(#medp) .medp-pay[data-medp-bank="KKP"] .medp-pay__bank-mark { background: var(--md-bank-kkp); } html[data-theme-id="MEDP"]:not(#medp) .medp-pay[data-medp-bank="TMW"] .medp-pay__bank-mark { background: var(--md-orange); } /* the three things that make the transfer match */ html[data-theme-id="MEDP"]:not(#medp) .medp-pay__steps { display: grid; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; counter-reset: medp-pay-step; } html[data-theme-id="MEDP"]:not(#medp) .medp-pay__steps li { display: flex; align-items: flex-start; gap: 10px; font-size: .875rem; line-height: 1.5; color: var(--md-ink-2); counter-increment: medp-pay-step; } html[data-theme-id="MEDP"]:not(#medp) .medp-pay__steps li::before { content: counter(medp-pay-step); flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 21px; height: 21px; border-radius: 50%; background: var(--md-green-2); color: var(--md-accent); font-size: .75rem; font-weight: 700; } /* actions: check the balance here, or open SXPAY's own page */ html[data-theme-id="MEDP"]:not(#medp) .medp-pay__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; } html[data-theme-id="MEDP"]:not(#medp) .medp-pay__actions:not(:has(> :not([hidden]))) { display: none; } html[data-theme-id="MEDP"]:not(#medp) .medp-pay__check, html[data-theme-id="MEDP"]:not(#medp) .medp-pay__open, html[data-theme-id="MEDP"]:not(#medp) .medp-pay__pick, html[data-theme-id="MEDP"]:not(#medp) .medp-pay__send { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; margin: 0; padding: 0 12px; border-radius: var(--md-radius-btn); font-family: inherit; font-size: .9375rem; font-weight: 600; line-height: 1.2; white-space: nowrap; text-decoration: none !important; cursor: pointer; } html[data-theme-id="MEDP"]:not(#medp) .medp-pay__check, html[data-theme-id="MEDP"]:not(#medp) .medp-pay__open { flex: 1 1 140px; } html[data-theme-id="MEDP"]:not(#medp) .medp-pay__check, html[data-theme-id="MEDP"]:not(#medp) .medp-pay__send { border: 0; background: linear-gradient(135deg, var(--md-deposit-from), var(--md-deposit-to)); color: var(--md-on-primary) !important; box-shadow: var(--md-elev-1); } html[data-theme-id="MEDP"]:not(#medp) .medp-pay__open { border: 1px solid color-mix(in srgb, var(--md-gold) 55%, transparent); background: color-mix(in srgb, var(--md-gold) 9%, transparent); color: var(--md-gold) !important; } html[data-theme-id="MEDP"]:not(#medp) .medp-pay__check:disabled, html[data-theme-id="MEDP"]:not(#medp) .medp-pay__send:disabled { background: var(--md-btn-disabled); color: var(--md-btn-disabled-ink) !important; box-shadow: none; cursor: default; } html[data-theme-id="MEDP"]:not(#medp) .medp-pay[aria-busy="true"] .medp-pay__check svg { animation: medp-spin .9s linear infinite; } @keyframes medp-spin { to { transform: rotate(360deg); } } /* slip: shown only when the order accepts one */ html[data-theme-id="MEDP"]:not(#medp) .medp-pay__slip { margin-top: 16px; padding-top: 16px; border-top: 1px dashed var(--md-line); } html[data-theme-id="MEDP"]:not(#medp) .medp-pay__slip-title { display: flex; align-items: center; gap: 8px; font-size: 1rem; font-weight: 600; color: var(--md-ink); } html[data-theme-id="MEDP"]:not(#medp) .medp-pay__slip-title svg { color: var(--md-accent); } html[data-theme-id="MEDP"]:not(#medp) .medp-pay__slip-hint { margin-top: 4px; text-wrap: pretty; font-size: .875rem; line-height: 1.5; color: var(--md-ink-2); } html[data-theme-id="MEDP"]:not(#medp) .medp-pay__slip-form { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; } /* the file input stays in the tab order; its label is the visible control */ html[data-theme-id="MEDP"]:not(#medp) .medp-pay__file { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } html[data-theme-id="MEDP"]:not(#medp) .medp-pay__pick { min-height: 64px; border: 1.5px dashed color-mix(in srgb, var(--md-accent) 55%, transparent); background: color-mix(in srgb, var(--md-accent) 7%, transparent); color: var(--md-ink) !important; } html[data-theme-id="MEDP"]:not(#medp) .medp-pay__pick svg { color: var(--md-accent); } html[data-theme-id="MEDP"]:not(#medp) .medp-pay__file:focus-visible + .medp-pay__pick { outline: 3px solid var(--md-focus-ring); outline-offset: 2px; } html[data-theme-id="MEDP"]:not(#medp) .medp-pay__file:disabled + .medp-pay__pick { opacity: .6; cursor: default; } html[data-theme-id="MEDP"]:not(#medp) .medp-pay__preview { display: block; max-width: 100%; max-height: 340px; margin: 0 auto; border: 1px solid var(--md-line); border-radius: var(--md-radius-btn); object-fit: contain; } /* what the server said, and what happens next */ html[data-theme-id="MEDP"]:not(#medp) .medp-pay__status { margin-top: 14px; padding: 10px 12px; border-radius: var(--md-radius-btn); background: color-mix(in srgb, currentColor 10%, transparent); color: var(--md-ink-2); font-size: .9375rem; font-weight: 500; line-height: 1.5; text-align: center; } html[data-theme-id="MEDP"]:not(#medp) .medp-pay__status[data-medp-tone="ok"] { color: var(--md-accent); } html[data-theme-id="MEDP"]:not(#medp) .medp-pay__status[data-medp-tone="review"] { color: var(--md-gold); } html[data-theme-id="MEDP"]:not(#medp) .medp-pay__status[data-medp-tone="error"] { color: var(--md-red-text); } html[data-theme-id="MEDP"]:not(#medp) .medp-pay__foot { margin-top: 20px; font-size: .8125rem; color: var(--md-ink-3); text-align: center; } /* states: only a pending order shows how to pay */ html[data-theme-id="MEDP"]:not(#medp) .medp-pay:not([data-medp-pay="pending"]) .medp-pay__detail, html[data-theme-id="MEDP"]:not(#medp) .medp-pay:not([data-medp-pay="pending"]) .medp-pay__steps, html[data-theme-id="MEDP"]:not(#medp) .medp-pay:not([data-medp-pay="pending"]) .medp-pay__timer, html[data-theme-id="MEDP"]:not(#medp) .medp-pay:not([data-medp-pay="pending"]) .medp-pay__hero .medp-pay__copy, html[data-theme-id="MEDP"]:not(#medp) .medp-pay:not([data-medp-pay-account]) .medp-pay__account, html[data-theme-id="MEDP"]:not(#medp) .medp-pay:not([data-medp-pay-slip]) .medp-pay__slip, html[data-theme-id="MEDP"]:not(#medp) .medp-pay__credit:empty, html[data-theme-id="MEDP"]:not(#medp) .medp-pay__slip-hint:empty, html[data-theme-id="MEDP"]:not(#medp) .medp-pay__status:empty, html[data-theme-id="MEDP"]:not(#medp) .medp-pay__foot:empty { display: none; } html[data-theme-id="MEDP"]:not(#medp) .medp-pay button:focus-visible, html[data-theme-id="MEDP"]:not(#medp) .medp-pay a:focus-visible { outline: 3px solid var(--md-focus-ring); outline-offset: 2px; } @media (hover: hover) { html[data-theme-id="MEDP"]:not(#medp) .medp-pay__copy:hover { border-color: var(--md-gold); } html[data-theme-id="MEDP"]:not(#medp) .medp-pay__check:not(:disabled):hover, html[data-theme-id="MEDP"]:not(#medp) .medp-pay__send:not(:disabled):hover { filter: brightness(1.12); } html[data-theme-id="MEDP"]:not(#medp) .medp-pay__open:hover { background: color-mix(in srgb, var(--md-gold) 18%, transparent); } html[data-theme-id="MEDP"]:not(#medp) .medp-pay__pick:hover { background: color-mix(in srgb, var(--md-accent) 14%, transparent); } } @media (min-width: 640px) { html[data-theme-id="MEDP"]:not(#medp) .medp-pay { padding: 24px 24px 20px; } /* QR beside the account; an order without a QR keeps one column */ html[data-theme-id="MEDP"]:not(#medp) .medp-pay__detail:has(> .medp-pay__qr:not([hidden])) { grid-template-columns: 232px minmax(0, 1fr); align-items: center; gap: 20px; } html[data-theme-id="MEDP"]:not(#medp) .medp-pay__steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } } @media (prefers-reduced-motion: reduce) { html[data-theme-id="MEDP"]:not(#medp) .medp-pay[data-medp-pay="pending"] .medp-pay__state::before, html[data-theme-id="MEDP"]:not(#medp) .medp-pay[aria-busy="true"] .medp-pay__check svg { animation: none; } } /* slip: every line's price is an input (skin JS writes it into the slip state) */ html[data-theme-id="MEDP"]:not(#medp) [data-medp-bet="slip"] td[data-medp-price] { font-size: 0 !important; line-height: 0; } html[data-theme-id="MEDP"]:not(#medp) [data-medp-bet="slip"] td[data-medp-price] > .medp-slip-price { width: 88px; min-height: 36px; border: 1px solid var(--md-line); border-radius: 8px; background: var(--md-field); color: var(--md-bet-input-ink); font-size: .95rem; text-align: right; padding: 0 8px; font-variant-numeric: tabular-nums; } /* a line's own note (อัตราจ่ายปรับแล้ว, จ่ายตามขั้นบันได) sits under its type */ html[data-theme-id="MEDP"]:not(#medp) [data-medp-bet="slip"] .medp-slip-rate { display: block; margin-top: 2px; color: var(--md-gold); font-size: .75rem; font-weight: 600; line-height: 1.3; } /* phones: the five columns fit 320px without pushing ลบ out of the card */ @media (max-width: 575.98px) { html[data-theme-id="MEDP"]:not(#medp) [data-medp-bet="slip"] th, html[data-theme-id="MEDP"]:not(#medp) [data-medp-bet="slip"] td { padding-left: 4px !important; padding-right: 4px !important; } html[data-theme-id="MEDP"]:not(#medp) [data-medp-bet="slip"] td[data-medp-price] > .medp-slip-price { width: 72px; } } /* ── Bet flow (มีดี889 layout; ปันสุข function logic) ──────────────── All available bet types are visible first. Selecting a type chooses its digit group; only then do that group's extra functions appear. */ html[data-theme-id="MEDP"]:not(#medp) [data-medp-bet-root]:not([data-medp-selected="on"]) > .medp-bet-tools, html[data-theme-id="MEDP"]:not(#medp) [data-medp-bet-root]:not([data-medp-selected="on"]) > [data-medp-bet="pad"], html[data-theme-id="MEDP"]:not(#medp) [data-medp-bet-root]:not([data-medp-selected="on"]) > [data-medp-bet="slip"], html[data-theme-id="MEDP"]:not(#medp) [data-medp-bet-root]:not([data-medp-selected="on"]) > [data-medp-bet="sliptools"], html[data-theme-id="MEDP"]:not(#medp) [data-medp-bet-root]:not([data-medp-selected="on"]) > [data-medp-bet="submit"] { display: none !important; } html[data-theme-id="MEDP"]:not(#medp) [data-medp-bet-root] > [data-medp-bet="types"] { background: var(--md-surface); border-radius: var(--md-radius-card); margin-inline: 0 !important; padding: 12px 8px 4px !important; } html[data-theme-id="MEDP"]:not(#medp) [data-medp-bet-root] > [data-medp-bet="types"]::before { content: "เลือกประเภทการแทง"; flex: 0 0 100%; padding: 0 4px 10px; color: var(--md-ink); font-weight: 700; } html[data-theme-id="MEDP"]:not(#medp) [data-medp-bet="types"] > [data-medp-function="on"] { display: none !important; } html[data-theme-id="MEDP"]:not(#medp) [data-medp-bet="types"] > div:not([data-medp-function="on"]) { flex: 0 0 33.333333% !important; max-width: 33.333333% !important; } html[data-theme-id="MEDP"]:not(#medp) [data-medp-bet-root]:not([data-medp-selected="on"]) [data-medp-bet="types"] button.bet-key.active { background: var(--md-surface-2) !important; color: var(--md-ink) !important; -webkit-text-fill-color: var(--md-ink) !important; box-shadow: none !important; } html[data-theme-id="MEDP"]:not(#medp) [data-medp-bet="types"] button.bet-key[data-medp-rate] { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 52px; } html[data-theme-id="MEDP"]:not(#medp) [data-medp-bet="types"] button.bet-key[data-medp-rate]::after { content: attr(data-medp-rate); display: block; margin-top: 2px; font-size: .72rem; font-weight: 600; opacity: .85; } /* มีดี889 adds lines first and edits their prices below. Keep the bundle's amount state at its minimum, but do not show the pre-add price picker. */ html[data-theme-id="MEDP"]:not(#medp) [data-medp-bet-root] > [data-medp-bet="amount"] { display: none !important; } html[data-theme-id="MEDP"]:not(#medp) .medp-bet-tools { padding: 12px; } html[data-theme-id="MEDP"]:not(#medp) .medp-bet-extra-title { margin: 0; color: var(--md-ink); font-weight: 700; } html[data-theme-id="MEDP"]:not(#medp) .medp-bet-extra-title[hidden], html[data-theme-id="MEDP"]:not(#medp) .medp-bet-fns[hidden] { display: none; } html[data-theme-id="MEDP"]:not(#medp) .medp-bet-fns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } html[data-theme-id="MEDP"]:not(#medp) .medp-bet-fns button[aria-pressed="true"], html[data-theme-id="MEDP"]:not(#medp) .medp-bet-together button[aria-pressed="true"] { background: var(--md-green); color: var(--md-on-primary); box-shadow: 0 0 0 2px var(--md-ring) inset; } /* แทงพร้อมกัน: same-digit types that ride along with the chosen one */ html[data-theme-id="MEDP"]:not(#medp) .medp-bet-together { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 8px; } html[data-theme-id="MEDP"]:not(#medp) .medp-bet-together[hidden] { display: none; } html[data-theme-id="MEDP"]:not(#medp) .medp-bet-together__title { grid-column: 1 / -1; margin: 0; color: var(--md-ink); font-weight: 700; } html[data-theme-id="MEDP"]:not(#medp) .medp-bet-pane__bar select { flex: 1 1 auto; min-width: 0; min-height: 44px; border: 0; border-radius: var(--md-radius-btn); background: var(--md-field); color: var(--md-bet-input-ink); padding: 0 12px; font: inherit; } html[data-theme-id="MEDP"]:not(#medp) .medp-bet-selected { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 12px; border-radius: var(--md-radius-btn); background: var(--md-surface-2); text-align: center; } html[data-theme-id="MEDP"]:not(#medp) .medp-bet-selected > p { margin: 0; color: var(--md-ink); font-weight: 700; } html[data-theme-id="MEDP"]:not(#medp) .medp-bet-picked { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; min-height: 28px; margin: 0; } html[data-theme-id="MEDP"]:not(#medp) .medp-bet-picked__empty { align-self: center; color: var(--md-ink-2); } html[data-theme-id="MEDP"]:not(#medp) .medp-bet-picked__type { display: inline-flex; align-items: center; min-height: 28px; padding: 2px 12px; border-radius: var(--md-radius-chip); background: var(--md-field); color: var(--md-bet-input-ink); font-size: .82rem; font-weight: 700; } html[data-theme-id="MEDP"]:not(#medp) [data-medp-bet-root][data-medp-fn="19"] > [data-medp-bet="pad"][data-medp-auto] > p:first-child::after { content: " · 19ประตู: ใส่ 1 หลัก ได้ 19 เลข"; color: var(--md-gold); } html[data-theme-id="MEDP"]:not(#medp) [data-medp-bet-root][data-medp-count="3"][data-medp-fn="19"] > [data-medp-bet="pad"][data-medp-auto] > p:first-child::after { content: " · 19 ประตู 3 หลัก: ใส่ 2 หลัก ได้ 20 เลข (เลขเบิ้ล 19 เลข)"; } html[data-theme-id="MEDP"]:not(#medp) [data-medp-bet-root][data-medp-fn="front"] > [data-medp-bet="pad"][data-medp-auto] > p:first-child::after { content: " · รูดหน้า: ใส่ 1 หลัก ได้ 10 เลข"; color: var(--md-gold); } html[data-theme-id="MEDP"]:not(#medp) [data-medp-bet-root][data-medp-fn="back"] > [data-medp-bet="pad"][data-medp-auto] > p:first-child::after { content: " · รูดหลัง: ใส่ 1 หลัก ได้ 10 เลข"; color: var(--md-gold); } html[data-theme-id="MEDP"]:not(#medp) .medp-bet-winlist { display: flex; flex-wrap: wrap; gap: 6px; } html[data-theme-id="MEDP"]:not(#medp) .medp-bet-winlist:empty { display: none; } html[data-theme-id="MEDP"]:not(#medp) .medp-bet-chip { display: inline-flex; align-items: center; gap: 4px; padding: 0 0 0 12px; border-radius: var(--md-radius-chip); background: var(--md-surface-2); color: var(--md-ink); font-weight: 700; letter-spacing: .08em; font-variant-numeric: tabular-nums; } html[data-theme-id="MEDP"]:not(#medp) .medp-bet-chip small { color: var(--md-ink-3); letter-spacing: 0; font-weight: 500; } html[data-theme-id="MEDP"]:not(#medp) .medp-bet-tools .medp-bet-chip button { min-width: 44px; background: transparent; color: var(--md-red-text); font-size: 1.1rem; } html[data-theme-id="MEDP"]:not(#medp) .medp-bet-tools .medp-bet-wide { width: 100%; } html[data-theme-id="MEDP"]:not(#medp) .medp-bet-tools .medp-bet-wide[hidden] { display: none; } html[data-theme-id="MEDP"]:not(#medp) .medp-bet-dreams__conf { margin-left: 6px; padding: 1px 8px; border-radius: var(--md-radius-chip); background: var(--md-accent-soft); color: var(--md-accent); font-size: .75rem; } /* Slip prices, credit and actions use the same order and labels as มีดี889. */ html[data-theme-id="MEDP"]:not(#medp) .medp-slip-tools { display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: var(--md-radius-card); background: var(--md-surface); } html[data-theme-id="MEDP"]:not(#medp) .medp-slip-tools__label { margin: 0; color: var(--md-ink); font-weight: 700; } html[data-theme-id="MEDP"]:not(#medp) .medp-slip-tools button { min-height: 44px; border: 0; border-radius: var(--md-radius-btn); background: var(--md-surface-2); color: var(--md-ink); font: inherit; font-weight: 600; cursor: pointer; } html[data-theme-id="MEDP"]:not(#medp) .medp-slip-tools button:disabled { background: var(--md-btn-disabled); color: var(--md-btn-disabled-ink); cursor: not-allowed; } html[data-theme-id="MEDP"]:not(#medp) .medp-slip-tools__chips { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; } html[data-theme-id="MEDP"]:not(#medp) .medp-slip-tools__chips button { padding: 0 4px; color: var(--md-on-color); } html[data-theme-id="MEDP"]:not(#medp) .medp-slip-tools__chips button:nth-child(1) { background: var(--md-amount-2); } html[data-theme-id="MEDP"]:not(#medp) .medp-slip-tools__chips button:nth-child(2) { background: var(--md-amount-3); } html[data-theme-id="MEDP"]:not(#medp) .medp-slip-tools__chips button:nth-child(3) { background: var(--md-amount-4); } html[data-theme-id="MEDP"]:not(#medp) .medp-slip-tools__chips button:nth-child(4) { background: var(--md-amount-5); } html[data-theme-id="MEDP"]:not(#medp) .medp-slip-tools__chips button:nth-child(5) { background: var(--md-amount-6); } html[data-theme-id="MEDP"]:not(#medp) .medp-slip-tools__chips button:nth-child(6) { background: var(--md-amount-7); } html[data-theme-id="MEDP"]:not(#medp) .medp-slip-tools__row { display: flex; gap: 8px; } html[data-theme-id="MEDP"]:not(#medp) .medp-slip-tools__row[hidden], html[data-theme-id="MEDP"]:not(#medp) .medp-slip-tools__saved[hidden], html[data-theme-id="MEDP"]:not(#medp) .medp-slip-tools__sum > div[hidden] { display: none; } html[data-theme-id="MEDP"]:not(#medp) .medp-slip-tools__row input { flex: 1 1 auto; min-width: 0; min-height: 44px; border: 0; border-radius: var(--md-radius-btn); background: var(--md-field); color: var(--md-bet-input-ink); padding: 0 12px; font: inherit; } html[data-theme-id="MEDP"]:not(#medp) .medp-slip-tools__row button { flex-shrink: 0; min-width: 44px; } html[data-theme-id="MEDP"]:not(#medp) .medp-slip-tools [data-medp-act="bulk"], html[data-theme-id="MEDP"]:not(#medp) .medp-slip-tools [data-medp-act="save-ok"] { background: var(--md-green); color: var(--md-on-primary); } html[data-theme-id="MEDP"]:not(#medp) .medp-slip-tools [data-medp-act="save-ok"][data-medp-warn] { background: var(--md-orange); color: var(--md-on-color); } html[data-theme-id="MEDP"]:not(#medp) .medp-slip-tools__sum { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; } html[data-theme-id="MEDP"]:not(#medp) .medp-slip-tools__sum > div { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 74px; padding: 8px; border-radius: var(--md-radius-btn); background: var(--md-surface-2); color: var(--md-ink-2); } html[data-theme-id="MEDP"]:not(#medp) .medp-slip-tools__sum dt { font-size: .78rem; font-weight: 500; } html[data-theme-id="MEDP"]:not(#medp) .medp-slip-tools__sum dd { margin: 4px 0 0; color: var(--md-ink); font-size: 1.1rem; font-weight: 700; font-variant-numeric: tabular-nums; } html[data-theme-id="MEDP"]:not(#medp) .medp-slip-tools__actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } html[data-theme-id="MEDP"]:not(#medp) .medp-slip-tools__saved { display: flex; flex-direction: column; gap: 6px; } html[data-theme-id="MEDP"]:not(#medp) .medp-slip-tools__saved p { margin: 0; color: var(--md-ink); font-weight: 700; } html[data-theme-id="MEDP"]:not(#medp) .medp-slip-tools__saved ul { display: flex; flex-direction: column; gap: 6px; max-height: 240px; margin: 0; padding: 0; overflow-y: auto; list-style: none; } html[data-theme-id="MEDP"]:not(#medp) .medp-slip-tools__saved li button { display: flex; align-items: center; justify-content: space-between; width: 100%; } html[data-theme-id="MEDP"]:not(#medp) .medp-slip-tools__saved li small { color: var(--md-ink-3); } html[data-theme-id="MEDP"]:not(#medp) [data-medp-bet="submit"] { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } html[data-theme-id="MEDP"]:not(#medp) [data-medp-bet="submit"] > .medp-bet-cancel, html[data-theme-id="MEDP"]:not(#medp) [data-medp-bet="submit"] > .check-button { min-height: 44px; margin: 0 !important; border: 0; border-radius: var(--md-radius-btn); font: inherit; font-weight: 700; } html[data-theme-id="MEDP"]:not(#medp) [data-medp-bet="submit"] > .medp-bet-cancel { background: var(--md-surface-3); color: var(--md-ink); } html[data-theme-id="MEDP"]:not(#medp) [data-medp-bet="submit"] > .medp-bet-cancel:disabled { color: var(--md-ink-3); opacity: .65; } @media (min-width: 576px) { /* three keys a row on every width, as ปันสุข lays them out: 3 ตัว, 2 ตัว, the rest */ html[data-theme-id="MEDP"]:not(#medp) [data-medp-bet="types"] > div:not([data-medp-function="on"]) { flex-basis: 33.333333% !important; max-width: 33.333333% !important; } html[data-theme-id="MEDP"]:not(#medp) .medp-bet-fns { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (min-width: 992px) { html[data-theme-id="MEDP"]:not(#medp) [data-medp-bet-grid] > [data-medp-bet="sliptools"] { grid-column: 2; } } /* ── 23 · Obsidian Emerald finish ──────────────────────────────────────── Visual hierarchy only: no betting state, ordering or visibility changes. */ html[data-theme-id="MEDP"]:not(#medp) .bg-theme-op2, html[data-theme-id="MEDP"]:not(#medp) .medp-bet-tools, html[data-theme-id="MEDP"]:not(#medp) [data-medp-bet-root] > [data-medp-bet="types"], html[data-theme-id="MEDP"]:not(#medp) [data-medp-bet-root] > [data-medp-bet="pad"], html[data-theme-id="MEDP"]:not(#medp) [data-medp-bet-root] > [data-medp-bet="slip"], html[data-theme-id="MEDP"]:not(#medp) .medp-slip-tools { background-color: var(--md-surface) !important; background-image: linear-gradient(145deg, var(--md-surface-2), var(--md-surface) 72%) !important; border: 1px solid var(--md-line) !important; box-shadow: var(--md-elev-card) !important; } html[data-theme-id="MEDP"]:not(#medp) .bet-key, html[data-theme-id="MEDP"]:not(#medp) button.bet-key, html[data-theme-id="MEDP"]:not(#medp) .bg-gradient-click, html[data-theme-id="MEDP"]:not(#medp) .bg-gradient-click-num, html[data-theme-id="MEDP"]:not(#medp) .bg-gradient-click-two, html[data-theme-id="MEDP"]:not(#medp) .bg-gradient-click-three, html[data-theme-id="MEDP"]:not(#medp) .bg-gradient-click-run, html[data-theme-id="MEDP"]:not(#medp) .bg-gradient-click-pin, html[data-theme-id="MEDP"]:not(#medp) .bg-gradient-click-front, html[data-theme-id="MEDP"]:not(#medp) .bg-gradient-click-back, html[data-theme-id="MEDP"]:not(#medp) .button-num, html[data-theme-id="MEDP"]:not(#medp) .medp-bet-tools button, html[data-theme-id="MEDP"]:not(#medp) .medp-slip-tools button { background-color: var(--md-surface-2) !important; background-image: linear-gradient(145deg, var(--md-surface-3), var(--md-surface-2)) !important; border: 1px solid var(--md-line) !important; box-shadow: var(--md-elev-1) !important; } html[data-theme-id="MEDP"]:not(#medp) .medp-slip-tools__chips button, html[data-theme-id="MEDP"]:not(#medp) .medp-slip-tools__chips button:nth-child(n) { background-color: var(--md-amount-2) !important; background-image: none !important; color: var(--md-on-color) !important; -webkit-text-fill-color: var(--md-on-color) !important; border: 1px solid var(--md-amount-3) !important; } html[data-theme-id="MEDP"]:not(#medp) .medp-slip-tools__chips button:nth-child(2) { background-color: var(--md-amount-3) !important; } html[data-theme-id="MEDP"]:not(#medp) .medp-slip-tools__chips button:nth-child(3) { background-color: var(--md-amount-4) !important; } html[data-theme-id="MEDP"]:not(#medp) .medp-slip-tools__chips button:nth-child(4) { background-color: var(--md-amount-5) !important; } html[data-theme-id="MEDP"]:not(#medp) .medp-slip-tools__chips button:nth-child(5) { background-color: var(--md-amount-6) !important; } html[data-theme-id="MEDP"]:not(#medp) .medp-slip-tools__chips button:nth-child(6) { background-color: var(--md-amount-7) !important; } /* ลบ / เคลียร์ on the number pad are .bet-key too: the generic key surface above took their fill but left their white text, so on a light palette (BH54) they read as empty keys while a number is being typed. */ html[data-theme-id="MEDP"]:not(#medp) button.bet-key.bg-gradient-click-free { background-color: var(--md-bet-delete-to) !important; background-image: linear-gradient(-45deg, var(--md-bet-delete-from), var(--md-bet-delete-to)) !important; border-color: transparent !important; color: var(--md-on-color) !important; -webkit-text-fill-color: var(--md-on-color) !important; } html[data-theme-id="MEDP"]:not(#medp) button.bet-key.bg-gradient-click-add { background-color: var(--md-green-2) !important; background-image: none !important; border-color: transparent !important; color: var(--md-on-primary) !important; -webkit-text-fill-color: var(--md-on-primary) !important; } /* the same for the panels' action (เพิ่ม / + เพิ่ม / ค้นหา) inside .medp-bet-tools */ html[data-theme-id="MEDP"]:not(#medp) .medp-bet-tools button.medp-bet-go { background-color: var(--md-green) !important; background-image: linear-gradient(135deg, var(--md-green-hi), var(--md-green)) !important; border-color: transparent !important; color: var(--md-on-primary) !important; -webkit-text-fill-color: var(--md-on-primary) !important; } html[data-theme-id="MEDP"]:not(#medp) .medp-bet-tools button.medp-bet-go:disabled { background-color: var(--md-btn-disabled) !important; background-image: none !important; color: var(--md-btn-disabled-ink) !important; -webkit-text-fill-color: var(--md-btn-disabled-ink) !important; } html[data-theme-id="MEDP"]:not(#medp) .bet-key.active, html[data-theme-id="MEDP"]:not(#medp) button.bet-key.active, html[data-theme-id="MEDP"]:not(#medp) [class*="bg-gradient-click"].active, html[data-theme-id="MEDP"]:not(#medp) .medp-bet-fns button[aria-pressed="true"], html[data-theme-id="MEDP"]:not(#medp) .medp-slip-tools [data-medp-act="bulk"], html[data-theme-id="MEDP"]:not(#medp) .medp-slip-tools [data-medp-act="save-ok"] { background-color: var(--md-green) !important; background-image: linear-gradient(135deg, var(--md-green-hi), var(--md-green)) !important; color: var(--md-on-primary) !important; -webkit-text-fill-color: var(--md-on-primary) !important; border-color: var(--md-accent-soft) !important; box-shadow: 0 0 0 2px var(--md-ring) inset, var(--md-elev-1) !important; } html[data-theme-id="MEDP"]:not(#medp) [data-medp-bet-root]:not([data-medp-selected="on"]) [data-medp-bet="types"] button.bet-key.active { background-color: var(--md-surface-2) !important; background-image: linear-gradient(145deg, var(--md-surface-3), var(--md-surface-2)) !important; color: var(--md-ink) !important; -webkit-text-fill-color: var(--md-ink) !important; border-color: var(--md-line) !important; box-shadow: var(--md-elev-1) !important; } html[data-theme-id="MEDP"]:not(#medp) .medp-bet-selected, html[data-theme-id="MEDP"]:not(#medp) .medp-slip-tools__sum > div { background-color: var(--md-surface-2) !important; background-image: linear-gradient(145deg, var(--md-surface-3), var(--md-surface-2)) !important; border: 1px solid var(--md-line) !important; box-shadow: var(--md-elev-1) !important; } /* ── /casino game tiles: the cover is the tile (skin JS: tagGameTiles) ──── The tile takes the PG poster's shape (756 × 1638) and shows the cover whole, edge to edge; the caption and the play button are gone and the poster itself is the link. data-medp-art on the tile is loading | ok | none (none keeps the game's name on a plain card); data-medp-fit on the face is cover, or contain for a cover of another shape, which then sits over a blurred copy of itself (--medp-art). */ html[data-theme-id="MEDP"]:not(#medp) .row:has(> [class*="col-"] > a > .medp-casino-tile--game) { --bs-gutter-x: 10px; margin-left: -5px !important; margin-right: -5px !important; } html[data-theme-id="MEDP"]:not(#medp) .row > [class*="col-"]:has(> a > .medp-casino-tile--game) { flex: 0 0 33.3333%; max-width: 33.3333%; padding-left: 5px; padding-right: 5px; } html[data-theme-id="MEDP"]:not(#medp) .row > [class*="col-"]:has(> a > .medp-casino-tile--game) > a { display: block; height: auto; border-radius: 14px; outline: 0; -webkit-tap-highlight-color: transparent; } html[data-theme-id="MEDP"]:not(#medp) .medp-casino-tile--game { position: relative; display: block !important; flex: none; width: 100%; aspect-ratio: 756 / 1638; margin-bottom: 10px !important; overflow: hidden; isolation: isolate; border: 1px solid var(--md-line); border-radius: 14px !important; background: linear-gradient(160deg, var(--md-surface-3), var(--md-surface)); box-shadow: var(--md-elev-1); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; } html[data-theme-id="MEDP"]:not(#medp) .medp-casino-tile--game > .medp-casino-tile__face { position: absolute !important; inset: 0; flex: none; width: 100% !important; height: 100% !important; min-height: 0 !important; padding: 0 !important; aspect-ratio: auto !important; /* the bundle's darkened background copy of the cover is never fetched */ background: none !important; } html[data-theme-id="MEDP"]:not(#medp) .medp-casino-tile--game > .medp-casino-tile__face[data-medp-fit="contain"]::before { content: ""; position: absolute; inset: -14%; background: var(--medp-art) center / cover no-repeat; filter: blur(18px) saturate(1.25) brightness(.55); } html[data-theme-id="MEDP"]:not(#medp) .medp-game-art { position: absolute; inset: 0; z-index: 1; display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: 0; transition: opacity .3s ease, transform .3s ease; -webkit-user-drag: none; user-select: none; } html[data-theme-id="MEDP"]:not(#medp) .medp-casino-tile__face[data-medp-fit="contain"] > .medp-game-art { object-fit: contain; } html[data-theme-id="MEDP"]:not(#medp) .medp-casino-tile--game[data-medp-art="ok"] .medp-game-art { opacity: 1; } /* games without a poster follow the ones with one */ html[data-theme-id="MEDP"]:not(#medp) .row > [class*="col-"][data-medp-art-last] { order: 1; } /* no caption, no button: the poster carries the name */ html[data-theme-id="MEDP"]:not(#medp) .medp-casino-tile--game .medp-casino-cta, html[data-theme-id="MEDP"]:not(#medp) .medp-casino-tile--game .medp-casino-placeholder, html[data-theme-id="MEDP"]:not(#medp) .medp-casino-tile--game .medp-casino-art { display: none !important; } html[data-theme-id="MEDP"]:not(#medp) .medp-casino-tile--game:not([data-medp-art="none"]) .medp-casino-tile__copy { position: absolute !important; width: 1px !important; height: 1px !important; margin: 0 !important; padding: 0 !important; overflow: hidden; clip-path: inset(50%); white-space: nowrap !important; } /* a game without a cover that loads keeps its name */ html[data-theme-id="MEDP"]:not(#medp) .medp-casino-tile--game[data-medp-art="none"] .medp-casino-tile__copy { position: relative; z-index: 1; width: auto; padding: 0 10px !important; color: var(--md-ink) !important; font-size: .9375rem !important; font-weight: 600 !important; line-height: 1.35; overflow-wrap: anywhere; } /* while the cover loads: a quiet sheen */ html[data-theme-id="MEDP"]:not(#medp) .medp-casino-tile--game[data-medp-art="loading"]::before { content: ""; position: absolute; inset: 0; z-index: 2; background: linear-gradient(100deg, transparent 30%, color-mix(in srgb, var(--md-ink) 9%, transparent) 50%, transparent 70%); background-size: 220% 100%; animation: medp-art-sheen 1.5s linear infinite; } @keyframes medp-art-sheen { from { background-position: 180% 0; } to { background-position: -40% 0; } } /* the game is opening */ html[data-theme-id="MEDP"]:not(#medp) .medp-casino-tile--game[data-medp-launching] > .medp-casino-tile__face::after { content: ""; position: absolute; inset: 0; z-index: 3; background: color-mix(in srgb, var(--md-bg-deep) 68%, transparent); } html[data-theme-id="MEDP"]:not(#medp) .medp-casino-tile--game[data-medp-launching]::after { content: ""; position: absolute; top: 50%; left: 50%; z-index: 4; width: 34px; height: 34px; margin: -17px 0 0 -17px; border: 3px solid color-mix(in srgb, var(--md-gold) 28%, transparent); border-top-color: var(--md-gold); border-radius: 50%; animation: medp-spin .8s linear infinite; } html[data-theme-id="MEDP"]:not(#medp) a:focus-visible > .medp-casino-tile--game { outline: 3px solid var(--md-focus-ring); outline-offset: 2px; } html[data-theme-id="MEDP"]:not(#medp) a:active > .medp-casino-tile--game { transform: scale(.975); } @media (hover: hover) { html[data-theme-id="MEDP"]:not(#medp) a:hover > .medp-casino-tile--game { transform: translateY(-4px); border-color: var(--md-gold); box-shadow: var(--md-elev-card); } html[data-theme-id="MEDP"]:not(#medp) a:hover > .medp-casino-tile--game .medp-game-art { transform: scale(1.04); } } @media (min-width: 576px) { html[data-theme-id="MEDP"]:not(#medp) .row > [class*="col-"]:has(> a > .medp-casino-tile--game) { flex-basis: 25%; max-width: 25%; } } @media (min-width: 768px) { html[data-theme-id="MEDP"]:not(#medp) .row > [class*="col-"]:has(> a > .medp-casino-tile--game) { flex-basis: 20%; max-width: 20%; } } @media (min-width: 992px) { html[data-theme-id="MEDP"]:not(#medp) .row:has(> [class*="col-"] > a > .medp-casino-tile--game) { --bs-gutter-x: 14px; margin-left: -7px !important; margin-right: -7px !important; } html[data-theme-id="MEDP"]:not(#medp) .row > [class*="col-"]:has(> a > .medp-casino-tile--game) { flex-basis: 16.6667%; max-width: 16.6667%; padding-left: 7px; padding-right: 7px; } html[data-theme-id="MEDP"]:not(#medp) .medp-casino-tile--game { margin-bottom: 14px !important; border-radius: 16px !important; } } @media (prefers-reduced-motion: reduce) { html[data-theme-id="MEDP"]:not(#medp) .medp-casino-tile--game, html[data-theme-id="MEDP"]:not(#medp) .medp-game-art { transition: none; } html[data-theme-id="MEDP"]:not(#medp) .medp-casino-tile--game[data-medp-art="loading"]::before { animation: none; } } /* ── Guest hero drawn with the tenant's own logo (skin JS: ensureLiveHero) ── Sits over the hero picture, which stays underneath as the fallback and gives the box its shape (4:1, 2:1 on phones). Type and spacing use the hero's own width, so the drawing scales exactly like the picture did. */ html[data-theme-id="MEDP"]:not(#medp) .medp-hero-placeholder { container-type: inline-size; } html[data-theme-id="MEDP"]:not(#medp) .medp-hero-live { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; gap: 4cqw; padding: 0 5cqw 0 6cqw; overflow: hidden; background: radial-gradient(46% 110% at 14% 50%, color-mix(in srgb, var(--md-green) 34%, transparent), transparent 72%), linear-gradient(100deg, var(--md-bg-deep), var(--md-surface-2) 55%, color-mix(in srgb, var(--md-gold) 16%, var(--md-surface))); color: var(--md-ink); font-family: var(--md-font); text-align: left; } /* the hero picture rules (width 100%, 4:1) also match any img in the hero; the tenant logo may sit on a black ground, which blends into the hero */ html[data-theme-id="MEDP"]:not(#medp) .medp-hero-placeholder .medp-hero-live__logo { flex: 0 0 auto; display: block !important; width: 21cqw !important; height: 21cqw !important; max-height: none !important; aspect-ratio: auto !important; object-fit: contain !important; mix-blend-mode: lighten; } html[data-theme-id="MEDP"]:not(#medp) .medp-hero-live__copy { min-width: 0; } html[data-theme-id="MEDP"]:not(#medp) .medp-hero-live p, html[data-theme-id="MEDP"]:not(#medp) .medp-hero-live ul { margin: 0; padding: 0; list-style: none; } html[data-theme-id="MEDP"]:not(#medp) .medp-hero-live__brand { font-size: 7.2cqw; font-weight: 700; line-height: 1.1; letter-spacing: -.01em; color: var(--md-ink) !important; } html[data-theme-id="MEDP"]:not(#medp) .medp-hero-live__brand b { font-weight: 700; color: var(--md-gold); } html[data-theme-id="MEDP"]:not(#medp) .medp-hero-live__sub { margin-top: 1cqw !important; font-size: 2.3cqw; line-height: 1.4; color: var(--md-ink-2) !important; } html[data-theme-id="MEDP"]:not(#medp) .medp-hero-live__sub i { font-style: normal; } html[data-theme-id="MEDP"]:not(#medp) .medp-hero-live__chips { display: flex; flex-wrap: wrap; gap: 1cqw; margin-top: 1.8cqw !important; } html[data-theme-id="MEDP"]:not(#medp) .medp-hero-live__chips li { padding: .7cqw 1.7cqw; border: 1px solid color-mix(in srgb, var(--md-accent) 55%, transparent); border-radius: var(--md-radius-chip); background: color-mix(in srgb, var(--md-bg-deep) 45%, transparent); font-size: 1.7cqw; line-height: 1.3; color: var(--md-ink); white-space: nowrap; } @media (max-width: 767.98px) { html[data-theme-id="MEDP"]:not(#medp) .medp-hero-live { gap: 4cqw; padding: 0 4cqw 0 5cqw; } html[data-theme-id="MEDP"]:not(#medp) .medp-hero-placeholder .medp-hero-live__logo { width: 36cqw !important; height: 36cqw !important; } html[data-theme-id="MEDP"]:not(#medp) .medp-hero-live__brand { font-size: 11cqw; } html[data-theme-id="MEDP"]:not(#medp) .medp-hero-live__sub { margin-top: 1.5cqw !important; font-size: 3.9cqw; } html[data-theme-id="MEDP"]:not(#medp) .medp-hero-live__sub i, html[data-theme-id="MEDP"]:not(#medp) .medp-hero-live__chips li:nth-child(n + 3) { display: none; } html[data-theme-id="MEDP"]:not(#medp) .medp-hero-live__chips { gap: 1.6cqw; margin-top: 2.6cqw !important; } html[data-theme-id="MEDP"]:not(#medp) .medp-hero-live__chips li { padding: 1.1cqw 3cqw; font-size: 3.1cqw; } } /* Yiki's own mark on its result tiles, and the back office's promotions under the home popup. */ .lotto-yikee > img.medp-yiki-mark { display: block; width: 52px; height: 52px; margin: 2px auto 8px; border-radius: 50%; } .medp-popup-promos { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--md-line); text-align: left; } .medp-popup-promos__title { margin: 0 0 8px; font-weight: 700; text-align: center; } .medp-popup-promo { margin-bottom: 10px; padding: 10px 12px; border-radius: 14px; background: var(--md-surface-2); } .medp-popup-promo img { display: block; margin: 0 auto 8px; max-width: 100%; width: auto; height: auto; max-height: 45vh; object-fit: contain; border-radius: 10px; } .medp-popup-promo strong { display: block; font-size: 15px; } .medp-popup-promo p { margin: 4px 0 0; font-size: 13px; line-height: 1.5; opacity: 0.8; } /* ── 2026-10-18: top-up head, activities, reviews, entry popup, bill money ── */ /* Deposit methods: a tidy choice row; the pre-order account list is left out (the order card names the account or QR the deposit was routed to). */ html[data-theme-id="MEDP"]:not(#medp) .medp-topup [data-medp-bank-preview] { display: none !important; } html[data-theme-id="MEDP"]:not(#medp) .medp-topup [data-medp-methods] { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 4px !important; padding: 4px 0 !important; } html[data-theme-id="MEDP"]:not(#medp) .medp-topup [data-medp-methods] > [class*="col-"] { flex: 1 1 140px; max-width: none; width: auto; margin: 0 !important; padding: 0 !important; } html[data-theme-id="MEDP"]:not(#medp) .medp-topup [data-medp-methods] button.button-main { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 10px 14px !important; background: var(--md-surface) !important; color: var(--md-ink) !important; border: 1.5px solid var(--md-line) !important; border-radius: var(--md-radius-btn) !important; box-shadow: var(--md-shadow-1) !important; font-weight: 700; font-size: .95rem; line-height: 1.2; } html[data-theme-id="MEDP"]:not(#medp) .medp-topup [data-medp-methods] button.button-main.bg-gradient-theme { border-color: var(--md-green) !important; color: var(--md-green) !important; box-shadow: 0 0 0 3px var(--md-accent-soft) !important; } html[data-theme-id="MEDP"]:not(#medp) .medp-topup [data-medp-methods] button.button-main.bg-gradient-theme::before { content: "\2713"; display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--md-green); color: var(--md-on-primary); font-size: .75rem; } /* Activities and reviews entries the back office can switch off */ html[data-theme-id="MEDP"]:not(#medp) [data-medp-feature][hidden] { display: none !important; } html[data-theme-id="MEDP"]:not(#medp) .medp-invite--activities { width: 100%; margin-top: 10px; text-align: left; font: inherit; cursor: pointer; } /* Activities panel */ html[data-theme-id="MEDP"]:not(#medp) .medp-acts { display: grid; gap: 12px; } html[data-theme-id="MEDP"]:not(#medp) .medp-act { display: block; padding: 14px; border: 1px solid var(--md-line); border-radius: var(--md-radius-card); background: var(--md-surface); color: var(--md-ink) !important; box-shadow: var(--md-shadow-1); } html[data-theme-id="MEDP"]:not(#medp) .medp-act--link { display: flex; align-items: center; gap: 12px; text-decoration: none; } html[data-theme-id="MEDP"]:not(#medp) .medp-act--link > svg { flex: 0 0 auto; width: 18px; height: 18px; margin-left: auto; color: var(--md-ink-3); } html[data-theme-id="MEDP"]:not(#medp) .medp-act__head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; } html[data-theme-id="MEDP"]:not(#medp) .medp-act__icon { flex: 0 0 auto; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: var(--md-accent-soft); color: var(--md-green); } html[data-theme-id="MEDP"]:not(#medp) .medp-act__icon svg { width: 22px; height: 22px; } html[data-theme-id="MEDP"]:not(#medp) .medp-act__copy { display: flex; flex-direction: column; min-width: 0; } html[data-theme-id="MEDP"]:not(#medp) .medp-act__copy strong { font-size: 1rem; color: var(--md-ink) !important; } html[data-theme-id="MEDP"]:not(#medp) .medp-act__copy small { font-size: .8rem; color: var(--md-ink-2) !important; } html[data-theme-id="MEDP"]:not(#medp) .medp-act__body { display: grid; gap: 10px; color: var(--md-ink-2); font-size: .875rem; } html[data-theme-id="MEDP"]:not(#medp) .medp-act__loading { color: var(--md-ink-3); } html[data-theme-id="MEDP"]:not(#medp) .medp-act__button { min-height: 44px; padding: 10px 16px; border: 0; border-radius: var(--md-radius-btn); background: var(--md-green); color: var(--md-on-primary); font: inherit; font-weight: 700; cursor: pointer; } html[data-theme-id="MEDP"]:not(#medp) .medp-act__button:disabled { background: var(--md-btn-disabled); color: var(--md-btn-disabled-ink); cursor: default; } html[data-theme-id="MEDP"]:not(#medp) .medp-act__button.is-on { background: var(--md-accent-soft); color: var(--md-green); } html[data-theme-id="MEDP"]:not(#medp) .medp-act__note { margin: 10px 0 0; font-size: .875rem; font-weight: 600; color: var(--md-ink-2) !important; } html[data-theme-id="MEDP"]:not(#medp) .medp-act__note[data-tone="ok"] { color: var(--md-green) !important; } html[data-theme-id="MEDP"]:not(#medp) .medp-act__note[data-tone="error"] { color: var(--md-red-text) !important; } html[data-theme-id="MEDP"]:not(#medp) .medp-act__figure { display: flex; justify-content: space-between; align-items: baseline; margin: 0; } html[data-theme-id="MEDP"]:not(#medp) .medp-act__figure b { font-size: 1.35rem; color: var(--md-green); } html[data-theme-id="MEDP"]:not(#medp) .medp-act__hint { margin: 0; font-size: .78rem; color: var(--md-ink-3) !important; } html[data-theme-id="MEDP"]:not(#medp) .medp-act-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; margin: 0; padding: 0; list-style: none; } html[data-theme-id="MEDP"]:not(#medp) .medp-act-days li { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 2px; border-radius: 12px; border: 1px solid var(--md-line); background: var(--md-surface-2); font-size: .7rem; color: var(--md-ink-3); } html[data-theme-id="MEDP"]:not(#medp) .medp-act-days li b { font-size: .78rem; color: var(--md-ink); } html[data-theme-id="MEDP"]:not(#medp) .medp-act-days li[data-state="done"] { background: var(--md-accent-soft); border-color: var(--md-green); color: var(--md-green); } html[data-theme-id="MEDP"]:not(#medp) .medp-act-days li[data-state="today"] { border-color: var(--md-gold); box-shadow: 0 0 0 2px var(--md-gold) inset; } /* หมุนวงล้อ: the back office's segments drawn as a wheel under a pointer */ html[data-theme-id="MEDP"]:not(#medp) .medp-wheel { position: relative; width: min(100%, 280px); aspect-ratio: 1; margin: 4px auto 12px; } html[data-theme-id="MEDP"]:not(#medp) .medp-wheel__disc { display: block; width: 100%; height: 100%; transition: transform 4.2s cubic-bezier(.17, .67, .12, 1); } html[data-theme-id="MEDP"]:not(#medp) .medp-wheel__rim { fill: var(--md-gold); } html[data-theme-id="MEDP"]:not(#medp) .medp-wheel__label { fill: var(--md-on-color); font-size: 11px; font-weight: 700; paint-order: stroke; stroke: var(--md-overlay); stroke-width: 2px; } html[data-theme-id="MEDP"]:not(#medp) .medp-wheel__pointer { position: absolute; top: -6px; left: 50%; width: 0; height: 0; transform: translateX(-50%); border-left: 13px solid transparent; border-right: 13px solid transparent; border-top: 24px solid var(--md-gold); } html[data-theme-id="MEDP"]:not(#medp) .medp-wheel__hub { position: absolute; top: 50%; left: 50%; width: 22%; aspect-ratio: 1; transform: translate(-50%, -50%); display: grid; place-items: center; border-radius: 50%; border: 3px solid var(--md-gold); background: var(--md-surface); color: var(--md-gold); font-size: .78rem; font-weight: 800; } html[data-theme-id="MEDP"]:not(#medp) .medp-wheel[data-busy] .medp-wheel__hub { color: var(--md-ink-3); } @media (prefers-reduced-motion: reduce) { html[data-theme-id="MEDP"]:not(#medp) .medp-wheel__disc { transition-duration: .01s; } } html[data-theme-id="MEDP"]:not(#medp) .medp-act-coupon { display: flex; gap: 8px; } html[data-theme-id="MEDP"]:not(#medp) .medp-act-coupon input { flex: 1 1 auto; min-width: 0; min-height: 44px; padding: 0 12px; border-radius: var(--md-radius-field); border: 1px solid var(--md-field-border); background: var(--md-field); color: var(--md-field-ink); font: inherit; } html[data-theme-id="MEDP"]:not(#medp) .medp-act-promos { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; } html[data-theme-id="MEDP"]:not(#medp) .medp-act-promos li { display: grid; gap: 8px; padding: 10px; border-radius: 12px; background: var(--md-surface-2); } html[data-theme-id="MEDP"]:not(#medp) .medp-act-promos img { width: 100%; border-radius: 10px; } html[data-theme-id="MEDP"]:not(#medp) .medp-act-promos strong { color: var(--md-ink) !important; } html[data-theme-id="MEDP"]:not(#medp) .medp-act-promos p { margin: 2px 0; color: var(--md-ink-2) !important; } html[data-theme-id="MEDP"]:not(#medp) .medp-act-promos small { color: var(--md-ink-3) !important; } /* Reviews: home strip and panel */ html[data-theme-id="MEDP"]:not(#medp) .medp-home-reviews { width: 100%; max-width: 1140px; margin: 16px auto; padding: 0 12px; font-family: var(--md-font); } html[data-theme-id="MEDP"]:not(#medp) .medp-home-reviews__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; } html[data-theme-id="MEDP"]:not(#medp) .medp-home-reviews__head h2 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 1.1rem; font-weight: 700; color: var(--md-ink) !important; } html[data-theme-id="MEDP"]:not(#medp) .medp-home-reviews__head h2 svg { width: 20px; height: 20px; color: var(--md-gold); fill: var(--md-gold); } html[data-theme-id="MEDP"]:not(#medp) .medp-home-reviews__all { display: inline-flex; align-items: center; gap: 4px; min-height: 36px; padding: 0 12px; border-radius: var(--md-radius-chip); border: 1px solid var(--md-line); background: var(--md-surface); color: var(--md-green); font: inherit; font-size: .85rem; font-weight: 700; cursor: pointer; } html[data-theme-id="MEDP"]:not(#medp) .medp-home-reviews__all svg { width: 16px; height: 16px; } html[data-theme-id="MEDP"]:not(#medp) .medp-home-reviews__track { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(240px, 80%); gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; overscroll-behavior-x: contain; scrollbar-width: none; } html[data-theme-id="MEDP"]:not(#medp) .medp-home-reviews__track::-webkit-scrollbar { display: none; } @media (min-width: 768px) { html[data-theme-id="MEDP"]:not(#medp) .medp-home-reviews__track { grid-auto-columns: minmax(260px, 32%); } } html[data-theme-id="MEDP"]:not(#medp) .medp-review { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 14px; scroll-snap-align: start; border: 1px solid var(--md-line); border-radius: var(--md-radius-card); background: var(--md-surface); box-shadow: var(--md-shadow-1); } html[data-theme-id="MEDP"]:not(#medp) .medp-review__stars { color: var(--md-gold); letter-spacing: 2px; font-size: 1rem; } html[data-theme-id="MEDP"]:not(#medp) .medp-review__stars span { color: var(--md-line); } html[data-theme-id="MEDP"]:not(#medp) .medp-review blockquote { flex: 1 1 auto; margin: 0; font-size: .9rem; line-height: 1.55; color: var(--md-ink-2) !important; } html[data-theme-id="MEDP"]:not(#medp) .medp-review figcaption { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: .875rem; color: var(--md-ink) !important; } html[data-theme-id="MEDP"]:not(#medp) .medp-review__avatar { display: grid; place-items: center; width: 32px; height: 32px; overflow: hidden; border-radius: 50%; background: var(--md-accent-soft); color: var(--md-green); font-weight: 700; } html[data-theme-id="MEDP"]:not(#medp) .medp-review__avatar img { width: 100%; height: 100%; object-fit: cover; } html[data-theme-id="MEDP"]:not(#medp) .medp-review-list { display: grid; gap: 10px; } /* Entry popup: the snooze choice */ html[data-theme-id="MEDP"]:not(#medp) #medp-entry-popup { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; padding: 16px; } html[data-theme-id="MEDP"]:not(#medp) #medp-entry-popup .modal-medp-card { width: 100%; max-width: 440px; max-height: 88vh; overflow-y: auto; } html[data-theme-id="MEDP"]:not(#medp) #medp-entry-popup .modal-medp-overlay { position: fixed; inset: 0; } html[data-theme-id="MEDP"]:not(#medp) .medp-popup-snooze { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 12px 0 0; min-height: 40px; font-size: .9rem; font-weight: 600; color: var(--md-ink-2) !important; cursor: pointer; } html[data-theme-id="MEDP"]:not(#medp) .medp-popup-snooze input { width: 20px; height: 20px; accent-color: var(--md-green); cursor: pointer; } html[data-theme-id="MEDP"]:not(#medp) #medp-entry-popup a[data-medp-popup-contact] { text-decoration: none; } html[data-theme-id="MEDP"]:not(#medp)[data-medp-popup-open] body { overflow: hidden; } /* Money on bills: the stake left (minus), a refund came back (plus), a prize added (plus) */ html[data-theme-id="MEDP"]:not(#medp) [data-medp-bill] [data-medp-sign] { font-weight: 700; } html[data-theme-id="MEDP"]:not(#medp) [data-medp-bill] [data-medp-sign="out"] { color: var(--md-red-text) !important; } html[data-theme-id="MEDP"]:not(#medp) [data-medp-bill] [data-medp-sign="out"]::before { content: "\2212"; } html[data-theme-id="MEDP"]:not(#medp) [data-medp-bill] [data-medp-sign="in"] { color: var(--md-accent) !important; } html[data-theme-id="MEDP"]:not(#medp) [data-medp-bill] [data-medp-sign="in"]::before { content: "+"; } html[data-theme-id="MEDP"]:not(#medp) .medp-bill-prize { display: flex; justify-content: space-between; align-items: baseline; margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--md-line); font-size: .875rem; color: var(--md-ink-2); } html[data-theme-id="MEDP"]:not(#medp) .medp-bill-prize b { font-size: 1rem; color: var(--md-accent); } /* ดูโพย: a bill row opens its lines in a sheet */ html[data-theme-id="MEDP"]:not(#medp) [data-medp-bill-id] { cursor: pointer; } html[data-theme-id="MEDP"]:not(#medp) [data-medp-bill-id]:active { transform: scale(.99); } html[data-theme-id="MEDP"]:not(#medp) [data-medp-bill-id]:focus-visible { outline: 2px solid var(--md-accent); outline-offset: 2px; } html[data-theme-id="MEDP"]:not(#medp) .medp-bill-open { display: block; margin-top: 4px; text-align: right; font-size: .8125rem; font-weight: 600; color: var(--md-accent) !important; } html[data-theme-id="MEDP"]:not(#medp) .medp-bill-head { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; margin: 0 0 12px; font-size: .875rem; } html[data-theme-id="MEDP"]:not(#medp) .medp-bill-head dt { margin: 0; font-weight: 500; color: var(--md-ink-3) !important; } html[data-theme-id="MEDP"]:not(#medp) .medp-bill-head dd { margin: 0; text-align: right; font-weight: 600; color: var(--md-ink) !important; } html[data-theme-id="MEDP"]:not(#medp) .medp-bill-lines th, html[data-theme-id="MEDP"]:not(#medp) .medp-bill-lines td { padding: 8px 4px; font-size: .875rem; } html[data-theme-id="MEDP"]:not(#medp) .medp-bill-lines tbody td:nth-child(2) { color: var(--md-ink) !important; font-size: 1rem; letter-spacing: .04em; } html[data-theme-id="MEDP"]:not(#medp) .medp-bill-lines tr[data-medp-won] td:last-child { font-weight: 700; color: var(--md-accent) !important; } /* Deposit parts: each choice carries its own minimum under its name */ html[data-theme-id="MEDP"]:not(#medp) .medp-topup [data-medp-methods] button.button-main[data-medp-min] { flex-wrap: wrap; } html[data-theme-id="MEDP"]:not(#medp) .medp-topup [data-medp-methods] button.button-main[data-medp-min]::after { content: attr(data-medp-min); flex-basis: 100%; font-size: .75rem; font-weight: 600; color: var(--md-ink-3); } html[data-theme-id="MEDP"]:not(#medp) .medp-topup small[data-medp-min] { font-size: 0 !important; } html[data-theme-id="MEDP"]:not(#medp) .medp-topup small[data-medp-min]::after { content: attr(data-medp-min); font-size: .875rem; } /* The entry popup is the skin's (#medp-entry-popup, outside #root). If the bundle still opens its own announce popup it would stack a second copy. */ html[data-theme-id="MEDP"]:not(#medp) #root .modal-medp--announce { display: none !important; } /* Entry popup with several announcements: a sideways slider with dots */ html[data-theme-id="MEDP"]:not(#medp) .medp-popup-slides { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; } html[data-theme-id="MEDP"]:not(#medp) .medp-popup-slides::-webkit-scrollbar { display: none; } html[data-theme-id="MEDP"]:not(#medp) .medp-popup-slide { flex: 0 0 100%; min-width: 100%; scroll-snap-align: center; color: var(--md-ink-2); } html[data-theme-id="MEDP"]:not(#medp) #medp-entry-popup .modal-medp-body img, html[data-theme-id="MEDP"]:not(#medp) .medp-popup-slide img { display: block; margin: 0 auto; max-width: 100%; width: auto; height: auto; max-height: 75vh; object-fit: contain; border-radius: 12px; } html[data-theme-id="MEDP"]:not(#medp) .medp-popup-dots { display: flex; justify-content: center; gap: 4px; margin-top: 8px; } html[data-theme-id="MEDP"]:not(#medp) .medp-popup-dots button { width: 24px; height: 24px; padding: 0; border: 0; background: transparent; cursor: pointer; display: grid; place-items: center; } html[data-theme-id="MEDP"]:not(#medp) .medp-popup-dots button::before { content: ""; width: 8px; height: 8px; border-radius: 999px; background: var(--md-line); transition: width .2s, background .2s; } html[data-theme-id="MEDP"]:not(#medp) .medp-popup-dots button[aria-current="true"]::before { width: 18px; background: var(--md-green); } /* Wallet buttons: back-office pictures (รูปเมนูด่วน) and the หมุนกงล้อ / กิจกรรม pair */ html[data-theme-id="MEDP"]:not(#medp) .medp-quick-tile.check-button.bg-black { width: 100%; background: var(--md-green) !important; background-image: none !important; color: var(--md-on-primary) !important; -webkit-text-fill-color: var(--md-on-primary) !important; border: 0 !important; border-radius: var(--md-radius-btn) !important; box-shadow: var(--md-elev-1) !important; padding: 14px 8px !important; font: inherit; cursor: pointer; } html[data-theme-id="MEDP"]:not(#medp) .medp-quick-tile.check-button.bg-black h3, html[data-theme-id="MEDP"]:not(#medp) .medp-quick-tile.check-button.bg-black h4 { color: var(--md-on-primary) !important; -webkit-text-fill-color: var(--md-on-primary) !important; } html[data-theme-id="MEDP"]:not(#medp) .medp-quick-tile.check-button.bg-black h4 { font-size: 1.15rem !important; font-weight: 700 !important; margin: 4px 0 0 !important; } @media (hover: hover) { html[data-theme-id="MEDP"]:not(#medp) .medp-quick-tile.check-button.bg-black:hover { background: var(--md-green-hi) !important; } } html[data-theme-id="MEDP"]:not(#medp) .medp-quick-pic { display: flex; justify-content: center; margin: 0 !important; } html[data-theme-id="MEDP"]:not(#medp) .medp-quick-pic .medp-quick-img, html[data-theme-id="MEDP"]:not(#medp) .medp-quick-art { display: block; width: 56px; height: 56px; } html[data-theme-id="MEDP"]:not(#medp) .medp-quick-pic .medp-quick-img { object-fit: contain; } html[data-theme-id="MEDP"]:not(#medp) .medp-quick-art svg { display: block; width: 100%; height: 100%; } html[data-theme-id="MEDP"]:not(#medp) a.check-button[data-medp-quick] > h3 > :not(.medp-quick-img), html[data-theme-id="MEDP"]:not(#medp) a.check-button[data-medp-quick] > h5 > :not(.medp-quick-img) { display: none !important; } html[data-theme-id="MEDP"]:not(#medp) a.check-button[data-medp-quick] > h3, html[data-theme-id="MEDP"]:not(#medp) a.check-button[data-medp-quick] > h5 { display: flex; justify-content: center; margin: 0 !important; } html[data-theme-id="MEDP"]:not(#medp) a.check-button[data-medp-quick] .medp-quick-img { display: block; width: 52px; height: 52px; object-fit: contain; } html[data-theme-id="MEDP"]:not(#medp) .medp-account-card a[href="/topup"][data-medp-quick] .medp-quick-img, html[data-theme-id="MEDP"]:not(#medp) .medp-account-card a[href="/withdrawal"][data-medp-quick] .medp-quick-img { width: 40px; height: 40px; margin-right: 8px; } html[data-theme-id="MEDP"]:not(#medp) a.check-button[data-medp-quick] > h3::before, html[data-theme-id="MEDP"]:not(#medp) a.check-button[data-medp-quick] > h5::before { content: none !important; display: none !important; } /* several back-office banners: the skin's slider in place of the bundle's swapping picture */ html[data-theme-id="MEDP"]:not(#medp) .medp-hero[data-medp-banner-slider] > :not(.medp-banner-slider) { display: none !important; } html[data-theme-id="MEDP"]:not(#medp) .medp-banner-slider { position: relative; } html[data-theme-id="MEDP"]:not(#medp) .medp-banner-slides { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; } html[data-theme-id="MEDP"]:not(#medp) .medp-banner-slides::-webkit-scrollbar { display: none; } html[data-theme-id="MEDP"]:not(#medp) .medp-banner-slide { flex: 0 0 100%; min-width: 100%; scroll-snap-align: start; } html[data-theme-id="MEDP"]:not(#medp) .medp-banner-slide a { display: block; } html[data-theme-id="MEDP"]:not(#medp) .medp-hero .medp-banner-slide img.medp-banner-img { display: block !important; width: 100% !important; height: auto !important; aspect-ratio: auto !important; object-fit: contain !important; background: var(--md-bg-deep) !important; } html[data-theme-id="MEDP"]:not(#medp) .medp-banner-dots { display: flex; justify-content: center; gap: 2px; padding: 2px 0 0; background: var(--md-surface); } html[data-theme-id="MEDP"]:not(#medp) .medp-banner-dots button { width: 24px; height: 20px; padding: 0; border: 0; background: none; display: grid; place-items: center; cursor: pointer; } html[data-theme-id="MEDP"]:not(#medp) .medp-banner-dots button::before { content: ""; display: block; width: 8px; height: 8px; border-radius: 999px; background: var(--md-line); transition: width .2s, background .2s; } html[data-theme-id="MEDP"]:not(#medp) .medp-banner-dots button[aria-current="true"]::before { width: 18px; background: var(--md-green); } @media (prefers-reduced-motion: reduce) { html[data-theme-id="MEDP"]:not(#medp) .medp-banner-slides { scroll-behavior: auto; } } /* activity conditions the member has not met yet (ฝากก่อนรับ …) */ html[data-theme-id="MEDP"]:not(#medp) .medp-act-reqs { margin: 0 0 10px; padding: 10px 12px 10px 30px; border-radius: 12px; border: 1px solid var(--md-gold); background: var(--md-surface-2); color: var(--md-ink); font-size: .84rem; } html[data-theme-id="MEDP"]:not(#medp) .medp-act-reqs li + li { margin-top: 4px; } html[data-theme-id="MEDP"]:not(#medp) .medp-act__link { display: block; margin-top: 8px; text-align: center; font-weight: 700; color: var(--md-green) !important; text-decoration: underline; } /* ── 2026-10-19: running announcement, bank logos, order times and cancel ── */ /* The announcement runs right to left in its own ticker (skin JS) */ html[data-theme-id="MEDP"]:not(#medp) .medp-ticker { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: .5rem; } html[data-theme-id="MEDP"]:not(#medp) .medp-ticker > .medp-status-chip__label { flex: 0 0 auto; margin-right: 0 !important; } html[data-theme-id="MEDP"]:not(#medp) .medp-ticker__viewport { flex: 1 1 auto; min-width: 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, var(--md-ink) 5%, var(--md-ink) 95%, transparent); mask-image: linear-gradient(90deg, transparent, var(--md-ink) 5%, var(--md-ink) 95%, transparent); } html[data-theme-id="MEDP"]:not(#medp) .medp-ticker__track { display: inline-flex; white-space: nowrap; will-change: transform; animation: medp-ticker var(--medp-ticker-duration, 18s) linear infinite !important; } html[data-theme-id="MEDP"]:not(#medp) .medp-ticker__item { flex: 0 0 auto; padding-right: 3rem; font-size: .875rem; line-height: 1.4; color: var(--md-ink-2); } html[data-theme-id="MEDP"]:not(#medp) .medp-ticker:hover .medp-ticker__track, html[data-theme-id="MEDP"]:not(#medp) .medp-ticker:active .medp-ticker__track { animation-play-state: paused !important; } @keyframes medp-ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* The rules dialog (กติกา) a guest opens from the header: the bundle gives it the sign-in card's classes, whose auth-page rule strips the background, so the text sat on the dimmed page. */ html[data-theme-id="MEDP"]:not(#medp) .modal-medp > .wrap-login, html[data-theme-id="MEDP"]:not(#medp) .modal-medp > .wrap-login.bg-white { position: relative; /* above the dim the bundle puts inside the same dialog (.overlay, 1180) */ z-index: 1190 !important; width: calc(100% - 32px) !important; max-width: 560px !important; max-height: calc(100dvh - 48px); overflow: auto; padding: 16px !important; background: var(--md-surface) !important; color: var(--md-ink) !important; border: 1px solid var(--md-line) !important; border-radius: var(--md-radius-card) !important; box-shadow: 0 16px 48px var(--md-shadow-dialog) !important; } html[data-theme-id="MEDP"]:not(#medp) .modal-medp > .wrap-login .c-dark, html[data-theme-id="MEDP"]:not(#medp) .modal-medp > .wrap-login h4 { color: var(--md-ink) !important; } html[data-theme-id="MEDP"]:not(#medp) .modal-medp > .wrap-login ul { padding-left: 1.2rem; margin: 0; } html[data-theme-id="MEDP"]:not(#medp) .modal-medp > .wrap-login li { margin-bottom: 6px; line-height: 1.55; color: var(--md-ink-2); } html[data-theme-id="MEDP"]:not(#medp) .modal-medp > .wrap-login .btn_main { min-height: 46px; background: linear-gradient(135deg, var(--md-deposit-from), var(--md-deposit-to)) !important; color: var(--md-on-color) !important; border: 0 !important; } /* Deposit methods carry the bank's or PromptPay's logo */ html[data-theme-id="MEDP"]:not(#medp) .medp-topup [data-medp-methods] button.button-main[data-medp-logo] { justify-content: flex-start; text-align: left; min-height: 60px; padding-left: 58px !important; background-image: var(--medp-bank-logo) !important; background-repeat: no-repeat !important; background-position: 12px center !important; background-size: 34px 34px !important; } html[data-theme-id="MEDP"]:not(#medp) .medp-topup [data-medp-methods] button.button-main[data-medp-logo]::before { display: none !important; } /* Bank logos: the withdrawal account card and the order card */ html[data-theme-id="MEDP"]:not(#medp) .medp-bank-card .medp-bank-icon[data-medp-logo] { background: var(--md-surface) !important; border: 1px solid var(--md-line) !important; } html[data-theme-id="MEDP"]:not(#medp) .medp-bank-card .medp-bank-icon[data-medp-logo]::before { width: 40px; height: 40px; background: var(--medp-bank-logo) center / contain no-repeat; } html[data-theme-id="MEDP"]:not(#medp) .medp-bank-card .txt-b > h6[data-medp-bank-name]::after { content: " · " attr(data-medp-bank-name); font-weight: 500; } html[data-theme-id="MEDP"]:not(#medp) .medp-pay__bank-mark[data-medp-logo] { min-width: 36px; width: 36px; height: 36px; padding: 0; font-size: 0; border: 1px solid var(--md-line); background: var(--medp-bank-logo) center / 80% no-repeat, var(--md-surface) !important; } /* The order's own times (Bangkok) under the countdown, and its cancel button */ html[data-theme-id="MEDP"]:not(#medp) .medp-pay__when { margin: 4px 0 0; font-size: .8125rem; color: var(--md-ink-3); text-align: center; } html[data-theme-id="MEDP"]:not(#medp) .medp-pay__when:empty { display: none; } html[data-theme-id="MEDP"]:not(#medp) .medp-pay__cancel { display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: 100%; min-height: 44px; margin-top: 8px; border: 1.5px solid var(--md-danger-soft-line); border-radius: var(--md-radius-btn); background: var(--md-surface); color: var(--md-red-text); font: inherit; font-weight: 700; cursor: pointer; } html[data-theme-id="MEDP"]:not(#medp) .medp-pay__cancel[hidden] { display: none; } html[data-theme-id="MEDP"]:not(#medp) .medp-pay__cancel svg { width: 16px; height: 16px; } html[data-theme-id="MEDP"]:not(#medp) .medp-pay__cancel:disabled { opacity: .6; cursor: default; } /* ── 2026-10-24: the bet confirmation fits the screen ───────────────────── The confirmation lists every slip line (skin JS: .medp-confirm-rates). On a big slip the card grew past the screen inside the fixed, centred mask, so ยืนยัน sat below the screen and could not be pressed. The card is at most the screen high, the list scrolls inside it, and ยกเลิก / ยืนยัน stay at its foot. */ html[data-theme-id="MEDP"]:not(#medp) .bet-confirm-mask { overflow-y: auto; overscroll-behavior: contain; } html[data-theme-id="MEDP"]:not(#medp) .bet-confirm-mask > div { display: flex; flex-direction: column; margin: auto; max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); min-height: 0; } html[data-theme-id="MEDP"]:not(#medp) .bet-confirm-mask > div > * { flex: none; } html[data-theme-id="MEDP"]:not(#medp) .bet-confirm-mask .medp-confirm-rates { flex: 1 1 auto; min-height: 0; margin: 4px 0 12px; padding-block: 6px; border-block: 1px solid var(--md-line); overflow-y: auto; overscroll-behavior: contain; } /* ── Bet page, 28 Oct: grouped keys, keypad-only entry, pad shortcuts, เลขซ้ำ ── */ /* เลขปัก / 4-5 ตัว keep their types folded until their key is opened */ html[data-theme-id="MEDP"]:not(#medp) [data-medp-bet="types"] > [data-medp-collapsed="on"] { display: none !important; } html[data-theme-id="MEDP"]:not(#medp) [data-medp-bet="types"] button.bet-key[aria-expanded="true"] { box-shadow: 0 0 0 2px var(--md-ring) inset, var(--md-elev-1) !important; } /* tools on the keypad row: เลือกเลขชุด · ดึงโพยเก่า · เลือกจากแผง */ html[data-theme-id="MEDP"]:not(#medp) .medp-pad-extras { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 8px; } html[data-theme-id="MEDP"]:not(#medp) .medp-pad-extras button { min-height: 44px; padding: 0 6px; border: 1px solid var(--md-line); border-radius: var(--md-radius-btn); background-color: var(--md-surface-2); background-image: linear-gradient(145deg, var(--md-surface-3), var(--md-surface-2)); box-shadow: var(--md-elev-1); color: var(--md-ink); font: inherit; font-size: .875rem; font-weight: 600; cursor: pointer; } html[data-theme-id="MEDP"]:not(#medp) .medp-pad-extras button[aria-pressed="true"] { background: var(--md-green); color: var(--md-on-primary); box-shadow: 0 0 0 2px var(--md-ring) inset; } html[data-theme-id="MEDP"]:not(#medp) .medp-pad-extras button:disabled { opacity: .45; cursor: not-allowed; } html[data-theme-id="MEDP"]:not(#medp) .medp-pad-extras button:focus-visible { outline: 2px solid var(--md-gold); outline-offset: 2px; } /* fields filled from the keypad read as displays, not text boxes */ html[data-theme-id="MEDP"]:not(#medp) .medp-bet-tools input[readonly] { caret-color: transparent; cursor: default; letter-spacing: .08em; font-weight: 700; } /* 4–5 ตัว: the skin's own digit boxes replace the bundle's display */ html[data-theme-id="MEDP"]:not(#medp) .medp-bet-entry[hidden] { display: none; } html[data-theme-id="MEDP"]:not(#medp) .medp-bet-entry { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 12px; } html[data-theme-id="MEDP"]:not(#medp) .medp-bet-entry p { margin: 0; color: var(--md-ink); font-weight: 700; } html[data-theme-id="MEDP"]:not(#medp) .medp-bet-entry__cells { display: flex; gap: 6px; } html[data-theme-id="MEDP"]:not(#medp) .medp-bet-entry__cells span { display: grid; place-items: center; width: 44px; height: 52px; border: 1px solid var(--md-line); border-radius: 10px; background: var(--md-surface); color: var(--md-ink); font-size: 1.4rem; font-weight: 700; font-variant-numeric: tabular-nums; } html[data-theme-id="MEDP"]:not(#medp) [data-medp-entry="on"] > [data-medp-bet="pad"] .bg-light, html[data-theme-id="MEDP"]:not(#medp) [data-medp-entry="on"] > [data-medp-bet="pad"] p.size-12 { display: none !important; } /* เลขซ้ำ in the slip */ html[data-theme-id="MEDP"]:not(#medp) .medp-slip-tools__dups { margin-bottom: 4px; } html[data-theme-id="MEDP"]:not(#medp) [data-medp-bet="slip"] tr[data-medp-dup="on"] > td { background: color-mix(in srgb, var(--md-gold) 22%, transparent) !important; } /* แทงด้วย: เครดิต | โบนัส beside the slip total; the chosen wallet is lit, โบนัส without a bonus is disabled, a total over the wallet is flagged */ html[data-theme-id="MEDP"]:not(#medp) .medp-wallet-pick { display: grid; grid-template-columns: auto repeat(2, minmax(0, 1fr)); align-items: stretch; gap: 8px; } html[data-theme-id="MEDP"]:not(#medp) .medp-wallet-pick__label { align-self: center; font-size: .875rem; font-weight: 700; color: var(--md-ink-2); } html[data-theme-id="MEDP"]:not(#medp) .medp-slip-tools .medp-wallet-pick button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 56px; padding: 6px 8px; line-height: 1.2; } html[data-theme-id="MEDP"]:not(#medp) .medp-wallet-pick button > span { font-size: .875rem; } html[data-theme-id="MEDP"]:not(#medp) .medp-wallet-pick button > b { font-size: .8125rem; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--md-ink-2); } html[data-theme-id="MEDP"]:not(#medp) .medp-slip-tools .medp-wallet-pick button[aria-checked="true"] { background-color: var(--md-green) !important; background-image: none !important; border-color: var(--md-gold) !important; color: var(--md-on-primary) !important; box-shadow: 0 0 0 2px var(--md-gold), var(--md-elev-1) !important; } html[data-theme-id="MEDP"]:not(#medp) .medp-wallet-pick button[aria-checked="true"] > b { color: var(--md-on-primary); } html[data-theme-id="MEDP"]:not(#medp) .medp-slip-tools .medp-wallet-pick button:disabled { background-color: var(--md-btn-disabled) !important; background-image: none !important; color: var(--md-btn-disabled-ink) !important; box-shadow: none !important; } html[data-theme-id="MEDP"]:not(#medp) .medp-wallet-pick button:disabled > b { color: var(--md-btn-disabled-ink); } html[data-theme-id="MEDP"]:not(#medp) .medp-slip-tools__sum > div[data-medp-warn="on"] { border-color: var(--md-danger-soft-line) !important; } html[data-theme-id="MEDP"]:not(#medp) .medp-slip-tools__sum > div[data-medp-warn="on"] dd { color: var(--md-red-text); } html[data-theme-id="MEDP"]:not(#medp) .medp-wallet-note { margin: 0; padding: 8px 12px; border: 1px solid var(--md-danger-soft-line); border-radius: var(--md-radius-btn); background: var(--md-danger-soft-bg); color: var(--md-red-text) !important; font-size: .875rem; font-weight: 600; } html[data-theme-id="MEDP"]:not(#medp) .medp-wallet-note[hidden] { display: none; } html[data-theme-id="MEDP"]:not(#medp) .medp-confirm-wallet { margin: 0 0 8px; padding: 8px 12px; border-radius: var(--md-radius-btn); background: var(--md-surface-2); color: var(--md-ink) !important; font-weight: 700; text-align: center; } html[data-theme-id="MEDP"]:not(#medp) .medp-confirm-wallet[data-medp-wallet="bonus"] { box-shadow: inset 0 0 0 1px var(--md-tag-bonus); } /* รายงานการเงิน (/credit): a statement, one card per money movement; the bundle's balance rows are hidden (they live in the ข้อมูล sheet now) */ html[data-theme-id="MEDP"]:not(#medp) [data-medp-credit-rows] { display: none !important; } html[data-theme-id="MEDP"]:not(#medp) .medp-report { display: grid; gap: 10px; padding: 8px 0 4px; } html[data-theme-id="MEDP"]:not(#medp) .medp-report__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; } html[data-theme-id="MEDP"]:not(#medp) .medp-report__head p { margin: 0; font-size: .8125rem; color: var(--md-ink-3) !important; } html[data-theme-id="MEDP"]:not(#medp) .medp-report__wallets { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; min-height: 44px; padding: 0 12px; border: 1px solid var(--md-line); border-radius: var(--md-radius-btn); background: var(--md-surface-2); color: var(--md-ink); font: inherit; font-size: .8125rem; font-weight: 600; cursor: pointer; } html[data-theme-id="MEDP"]:not(#medp) .medp-report__wallets svg { width: 16px; height: 16px; color: var(--md-gold); } html[data-theme-id="MEDP"]:not(#medp) .medp-report__status { margin: 0; padding: 24px 0; text-align: center; color: var(--md-ink-3) !important; } html[data-theme-id="MEDP"]:not(#medp) .medp-report__status[hidden] { display: none; } html[data-theme-id="MEDP"]:not(#medp) .medp-report__list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; } @media (min-width: 992px) { html[data-theme-id="MEDP"]:not(#medp) .medp-report__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } } html[data-theme-id="MEDP"]:not(#medp) .medp-report__item { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 76px; padding: 12px 14px; border: 1px solid var(--md-line); border-radius: var(--md-radius-card); background: var(--md-surface); box-shadow: var(--md-elev-1); } html[data-theme-id="MEDP"]:not(#medp) .medp-report__main { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; } html[data-theme-id="MEDP"]:not(#medp) .medp-report__tag { display: inline-block; padding: 2px 10px; border-radius: 999px; background: var(--md-tag-other); color: var(--md-on-color); font-size: .75rem; font-weight: 700; white-space: nowrap; } html[data-theme-id="MEDP"]:not(#medp) [data-medp-tone="commission"] .medp-report__tag { background: var(--md-tag-commission); } html[data-theme-id="MEDP"]:not(#medp) [data-medp-tone="deposit"] .medp-report__tag { background: var(--md-tag-deposit); } html[data-theme-id="MEDP"]:not(#medp) [data-medp-tone="withdraw"] .medp-report__tag { background: var(--md-tag-withdraw); } html[data-theme-id="MEDP"]:not(#medp) [data-medp-tone="bet"] .medp-report__tag { background: var(--md-tag-bet); } html[data-theme-id="MEDP"]:not(#medp) [data-medp-tone="refund"] .medp-report__tag { background: var(--md-tag-refund); } html[data-theme-id="MEDP"]:not(#medp) [data-medp-tone="win"] .medp-report__tag { background: var(--md-tag-win); color: var(--md-on-gold); } html[data-theme-id="MEDP"]:not(#medp) [data-medp-tone="bonus"] .medp-report__tag { background: var(--md-tag-bonus); } html[data-theme-id="MEDP"]:not(#medp) [data-medp-tone="adjust"] .medp-report__tag { background: var(--md-tag-adjust); } html[data-theme-id="MEDP"]:not(#medp) .medp-report__amount { font-size: 1.125rem; font-weight: 700; font-variant-numeric: tabular-nums; } html[data-theme-id="MEDP"]:not(#medp) [data-medp-dir="in"] .medp-report__amount { color: var(--md-accent) !important; } html[data-theme-id="MEDP"]:not(#medp) [data-medp-dir="out"] .medp-report__amount { color: var(--md-red-text) !important; } html[data-theme-id="MEDP"]:not(#medp) [data-medp-state="failed"] .medp-report__amount, html[data-theme-id="MEDP"]:not(#medp) [data-medp-state="cancelled"] .medp-report__amount { color: var(--md-ink-3) !important; text-decoration: line-through; } html[data-theme-id="MEDP"]:not(#medp) .medp-report__state { padding: 1px 8px; border-radius: 999px; background: var(--md-pending-bg); color: var(--md-on-color) !important; font-size: .6875rem; font-weight: 600; } html[data-theme-id="MEDP"]:not(#medp) [data-medp-state="failed"] .medp-report__state, html[data-theme-id="MEDP"]:not(#medp) [data-medp-state="cancelled"] .medp-report__state { background: var(--md-closed-bg); color: var(--md-closed-ink) !important; } html[data-theme-id="MEDP"]:not(#medp) .medp-report__side { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex: 0 0 auto; text-align: right; } html[data-theme-id="MEDP"]:not(#medp) .medp-report__side small { font-size: .75rem; color: var(--md-ink-3) !important; } html[data-theme-id="MEDP"]:not(#medp) .medp-report__side b { font-size: 1rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--md-gold) !important; } html[data-theme-id="MEDP"]:not(#medp) .medp-report__side time { font-size: .75rem; font-variant-numeric: tabular-nums; color: var(--md-ink-2) !important; } html[data-theme-id="MEDP"]:not(#medp) .medp-report__pager { display: flex; justify-content: center; gap: 6px; padding: 4px 0 8px; } html[data-theme-id="MEDP"]:not(#medp) .medp-report__pager[hidden] { display: none; } html[data-theme-id="MEDP"]:not(#medp) .medp-report__pager button { min-width: 44px; min-height: 44px; padding: 0 8px; border: 1px solid var(--md-line); border-radius: var(--md-radius-btn); background: var(--md-surface-2); color: var(--md-ink); font: inherit; font-weight: 700; cursor: pointer; } html[data-theme-id="MEDP"]:not(#medp) .medp-report__pager button[aria-current="page"] { background: var(--md-green); border-color: var(--md-gold); color: var(--md-on-primary); cursor: default; } html[data-theme-id="MEDP"]:not(#medp) .medp-report__pager button:disabled:not([aria-current]) { color: var(--md-btn-disabled-ink); cursor: not-allowed; } /* ข้อมูล (user info sheet): login facts, the bank account, every wallet balance and the referral counts, then the copy-link button */ html[data-theme-id="MEDP"]:not(#medp) .medp-profile { display: grid; gap: 14px; } html[data-theme-id="MEDP"]:not(#medp) .medp-profile__section { display: grid; gap: 8px; } html[data-theme-id="MEDP"]:not(#medp) .medp-profile__section h3 { margin: 0; font-size: .9375rem; font-weight: 700; color: var(--md-gold) !important; } html[data-theme-id="MEDP"]:not(#medp) .medp-profile__rows { display: grid; margin: 0; border: 1px solid var(--md-line); border-radius: var(--md-radius-btn); background: var(--md-surface-2); } html[data-theme-id="MEDP"]:not(#medp) .medp-profile__rows > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding: 8px 12px; border-top: 1px solid var(--md-line); } html[data-theme-id="MEDP"]:not(#medp) .medp-profile__rows > div:first-child { border-top: 0; } html[data-theme-id="MEDP"]:not(#medp) .medp-profile__rows dt { margin: 0; font-size: .875rem; font-weight: 500; color: var(--md-ink-2) !important; } html[data-theme-id="MEDP"]:not(#medp) .medp-profile__rows dd { margin: 0; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; color: var(--md-ink) !important; overflow-wrap: anywhere; } html[data-theme-id="MEDP"]:not(#medp) .medp-profile__rows [data-medp-mark="lead"] dd { color: var(--md-gold) !important; font-size: 1.0625rem; } html[data-theme-id="MEDP"]:not(#medp) .medp-profile__rows [data-medp-mark="zero"] dt, html[data-theme-id="MEDP"]:not(#medp) .medp-profile__rows [data-medp-mark="zero"] dd { color: var(--md-ink-3) !important; font-weight: 500; } html[data-theme-id="MEDP"]:not(#medp) .medp-profile__bank { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--md-line); border-radius: var(--md-radius-btn); background: var(--md-surface-2); } html[data-theme-id="MEDP"]:not(#medp) .medp-profile__bank-logo { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 48px; height: 48px; overflow: hidden; border-radius: 50%; background: var(--md-bank-default); color: var(--md-on-color); font-size: 1.25rem; font-weight: 700; } html[data-theme-id="MEDP"]:not(#medp) .medp-profile__bank-logo img { width: 100%; height: 100%; object-fit: cover; } html[data-theme-id="MEDP"]:not(#medp) .medp-profile__bank-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; } html[data-theme-id="MEDP"]:not(#medp) .medp-profile__bank-copy small { font-size: .8125rem; color: var(--md-ink-3) !important; } html[data-theme-id="MEDP"]:not(#medp) .medp-profile__bank-copy strong { font-size: 1.0625rem; letter-spacing: .02em; font-variant-numeric: tabular-nums; color: var(--md-ink) !important; } html[data-theme-id="MEDP"]:not(#medp) .medp-profile__bank-copy > span { font-size: .875rem; color: var(--md-ink-2) !important; } html[data-theme-id="MEDP"]:not(#medp) .medp-profile__copy { gap: 8px; width: 100%; margin-top: 0; border: 0; font: inherit; font-weight: 700; cursor: pointer; } html[data-theme-id="MEDP"]:not(#medp) .medp-profile__copy svg { width: 18px; height: 18px; } html[data-theme-id="MEDP"]:not(#medp) .medp-profile__copy:disabled { background: var(--md-btn-disabled) !important; color: var(--md-btn-disabled-ink) !important; cursor: not-allowed; } html[data-theme-id="MEDP"]:not(#medp) .medp-invite--profile { width: 100%; text-align: left; font: inherit; cursor: pointer; } @media (min-width: 768px) { /* the next round stands beside the invite and ข้อมูลผู้ใช้ cards */ html[data-theme-id="MEDP"]:not(#medp) .medp-member-strip > .medp-featured { grid-row: span 2; } } /* A skin type (3ตัวหน้า, เลขปัก …) chosen on its own: the bundle's key that still holds the entry underneath must not look chosen too */ html[data-theme-id="MEDP"]:not(#medp) [data-medp-bet="types"] button.bet-key.active[data-medp-primary-off="on"] { background-color: var(--md-surface-2) !important; background-image: linear-gradient(145deg, var(--md-surface-3), var(--md-surface-2)) !important; color: var(--md-ink) !important; -webkit-text-fill-color: var(--md-ink) !important; border-color: var(--md-line) !important; box-shadow: var(--md-elev-1) !important; } /* the keypad line names the chosen types (skin sets data-medp-label) */ html[data-theme-id="MEDP"]:not(#medp) [data-medp-bet="pad"] > p:first-child[data-medp-label] { font-size: 0 !important; } html[data-theme-id="MEDP"]:not(#medp) [data-medp-bet="pad"] > p:first-child[data-medp-label]::before { content: attr(data-medp-label); font-size: .75rem; } html[data-theme-id="MEDP"]:not(#medp) [data-medp-bet="pad"][data-medp-auto] > p:first-child[data-medp-label]::after { font-size: .75rem; } /* ── 28 Oct UI pass ─────────────────────────────────────────────────────── Sign-in / sign-up / password fields: a visible frame, and a ring while typing */ html[data-theme-id="MEDP"]:not(#medp) .form-inp { border: 1.5px solid var(--md-field-border) !important; margin-bottom: 10px !important; } html[data-theme-id="MEDP"]:not(#medp) .form-inp:focus-within { border-color: var(--md-accent) !important; box-shadow: 0 0 0 3px var(--md-ring) !important; } html[data-theme-id="MEDP"]:not(#medp) .form-inp .icon { padding: 0 10px 0 14px; } /* /latte groups: the header keeps clear of the frame and its flag, the cards keep clear of the frame's bottom edge */ html[data-theme-id="MEDP"]:not(#medp) .medp-play-group { padding-bottom: 14px !important; } html[data-theme-id="MEDP"]:not(#medp) .medp-play-group > .row > .wrap { display: flex !important; align-items: center; gap: 10px; padding: 10px 10px 6px !important; } html[data-theme-id="MEDP"]:not(#medp) .medp-play-group > .row > .wrap > .icon-f { flex: 0 0 auto; margin: 0 !important; } html[data-theme-id="MEDP"]:not(#medp) .medp-play-group > .row > .wrap > h5 { margin: 0 !important; }