/* ============================================================ Brand Themes — เลือกต่อสาย (per-line) ผ่าน data-theme บน ตั้งค่าในหลังบ้าน > Branding ; ไต่ขึ้นตามสาย (เหมือน site_name/logo) theme "red" = แดง-ทอง สว่าง (มารวยเลข classic — อ่านง่าย) theme "red-dark" = แดง-ทอง เข้ม (immersive — พื้นแดงเข้ม ตัวอักษรทอง) ไม่ตั้งธีม → ใช้สไตล์เดิม (น้ำเงิน-ม่วง) ตาม style.css ============================================================ */ /* =========================================================== RED — แดง-ทอง สว่าง =========================================================== */ html[data-theme="red"] { --input-border: #b58074; /* ขอบช่องกรอก โทนแดงอ่อนแต่เข้มพอให้เห็น */ --input-border-hover: #8f5a4e; --brand-1: #c1121f; --brand-2: #780000; --brand-grad: linear-gradient(135deg, #d62828 0%, #9d0208 100%); --brand-grad-soft: linear-gradient(135deg, rgba(214,40,40,.08), rgba(157,2,8,.08)); --surface: #ffffff; --surface-2: #fff6f3; --line: #f0d9cf; } /* โลโก้/แบรนด์ เป็นทอง */ html[data-theme="red"] .navbar-brand { color: #ffd60a !important; } /* navbar เงาโทนแดง */ html[data-theme="red"] .navbar, html[data-theme="red"] .navbar.sticky-top { box-shadow: 0 2px 14px rgba(157,2,8,.3) !important; } /* ปุ่มหลัก/โฟกัส โทนแดง */ html[data-theme="red"] .btn-primary { box-shadow: 0 4px 12px rgba(214,40,40,.3); } html[data-theme="red"] .btn-primary:hover, html[data-theme="red"] .btn-primary:focus { box-shadow: 0 6px 18px rgba(157,2,8,.4); } html[data-theme="red"] .form-control:focus, html[data-theme="red"] .form-select:focus { box-shadow: 0 0 0 .2rem rgba(214,40,40,.18); } /* ปุ่ม CTA ทอง (เติมเงิน ฯลฯ ที่ใช้ btn-warning) */ html[data-theme="red"] .btn-warning { background: linear-gradient(135deg, #ffd60a, #e0a800); color: #6a040f; border: 0; font-weight: 700; } /* hero หน้ารายการงวด → แดง-ทอง */ html[data-theme="red"] .rounds-hero { background: linear-gradient(135deg, #d62828 0%, #9d0208 55%, #6a040f 100%); box-shadow: 0 20px 60px rgba(106,4,15,.4), inset 0 1px 0 rgba(255,214,10,.25); } html[data-theme="red"] .rounds-hero .btn-light { color: #9d0208 !important; } html[data-theme="red"] .rounds-hero .btn-light:hover { color: #6a040f !important; } /* ปุ่ม "เล่น/เข้าแทง" บนการ์ด → แดง-ทอง */ html[data-theme="red"] .btn-play { background: linear-gradient(135deg, #e5383b, #9d0208); box-shadow: 0 8px 20px rgba(157,2,8,.4); } html[data-theme="red"] .btn-play:hover { box-shadow: 0 15px 35px rgba(157,2,8,.55); } /* nav pills / type picker เงาโทนแดง (สีพื้นมาจาก --brand-grad อยู่แล้ว) */ html[data-theme="red"] .nav-pills .nav-link.active, html[data-theme="red"] .type-picker .btn-check:checked + .btn { box-shadow: 0 4px 12px rgba(214,40,40,.3); } /* digit box ที่กรอกแล้ว ใช้พื้นแดงอ่อน */ html[data-theme="red"] .digit-boxes .digit-box.filled { background: #fdecea; } /* =========================================================== RED-DARK — แดง-ทอง เข้ม (immersive) ใช้คู่กับ data-bs-theme="dark" (set จาก header.php) เพื่อให้ ฟอร์ม/ตารางอ่านง่าย แล้วเรา retint พื้นผิวหลักเป็นแดงเข้ม =========================================================== */ html[data-theme="red-dark"] { --input-border: rgba(255, 214, 10, .55); /* ขอบทอง เข้มขึ้นจาก .30 เดิม */ --input-border-hover: rgba(255, 214, 10, .85); --brand-1: #ffd60a; /* ทอง = สีเน้น */ --on-brand: #3a0608; /* ตัวอักษรบนพื้นทอง ต้องเข้ม ไม่งั้นอ่านไม่ออก */ --brand-2: #e5383b; --brand-grad: linear-gradient(135deg, #d62828 0%, #7a0c10 100%); --brand-grad-soft: linear-gradient(135deg, rgba(255,214,10,.10), rgba(214,40,40,.12)); --surface: #5a0d12; --surface-2: #3d0709; --ink: #fff4e0; --ink-muted: #e7c9a3; --line: rgba(255,214,10,.22); } /* พื้นหลังหน้าเว็บ แดงเข้มไล่เฉด (เหมือนแอปในรูป) */ html[data-theme="red-dark"] body, html[data-theme="red-dark"] body.bg-body-tertiary { background: radial-gradient(1200px 620px at 50% -12%, #8a141a 0%, transparent 60%), linear-gradient(180deg, #5e0a0f 0%, #3a0608 100%) !important; background-attachment: fixed !important; color: var(--ink); } /* โลโก้/แบรนด์ ทอง */ html[data-theme="red-dark"] .navbar-brand { color: #ffd60a !important; } html[data-theme="red-dark"] .navbar, html[data-theme="red-dark"] .navbar.sticky-top { box-shadow: 0 2px 16px rgba(0,0,0,.45) !important; } /* การ์ดทั้งหมด → แดงเข้ม ขอบทอง (ทับ rule slate ของ dark เดิม) */ html[data-theme="red-dark"] .card, html[data-theme="red-dark"] .lotto-card, html[data-theme="red-dark"] .modal-content, html[data-theme="red-dark"] .dropdown-menu, html[data-theme="red-dark"] .offcanvas, html[data-theme="red-dark"] .list-group-item { background: linear-gradient(180deg, #5e1014 0%, #45090c 100%) !important; color: var(--ink) !important; border-color: rgba(255,214,10,.20) !important; } html[data-theme="red-dark"] .card-header, html[data-theme="red-dark"] .card-footer, html[data-theme="red-dark"] .modal-header, html[data-theme="red-dark"] .modal-footer { background: rgba(0,0,0,.18) !important; color: var(--ink) !important; border-color: rgba(255,214,10,.18) !important; } html[data-theme="red-dark"] .lotto-card h6 { color: #fff4e0 !important; } html[data-theme="red-dark"] .lotto-card .round-name, html[data-theme="red-dark"] .meta-row, html[data-theme="red-dark"] .text-muted { color: #e7c9a3 !important; } html[data-theme="red-dark"] .lotto-card .card-body { background: transparent !important; } /* ฟอร์ม/อินพุต แดงเข้ม ขอบทอง */ html[data-theme="red-dark"] .form-control, html[data-theme="red-dark"] .form-select, html[data-theme="red-dark"] .input-group-text { background: #3d0709 !important; color: #fff4e0 !important; border-color: var(--input-border) !important; /* ใช้ตัวแปรเดียวกับธีมอื่น */ border-width: 2px !important; } html[data-theme="red-dark"] .form-control:hover:not(:disabled):not([readonly]), html[data-theme="red-dark"] .form-select:hover:not(:disabled) { border-color: var(--input-border-hover) !important; } html[data-theme="red-dark"] .form-control::placeholder { color: #c79a6e !important; } html[data-theme="red-dark"] .form-control:focus, html[data-theme="red-dark"] .form-select:focus { border-color: #ffd60a !important; box-shadow: 0 0 0 .2rem rgba(255,214,10,.20) !important; } /* ตาราง อ่านง่ายบนพื้นแดง */ html[data-theme="red-dark"] .table { color: #fff4e0; } html[data-theme="red-dark"] .table > :not(caption) > * > * { background-color: transparent !important; color: #fff4e0; border-color: rgba(255,214,10,.15); } html[data-theme="red-dark"] .table thead th, html[data-theme="red-dark"] .table-light { background: rgba(0,0,0,.25) !important; color: #ffd60a !important; border-color: rgba(255,214,10,.18) !important; } html[data-theme="red-dark"] .table-striped > tbody > tr:nth-of-type(odd) > * { background: rgba(0,0,0,.15) !important; } /* ปุ่มหลัก = ทอง (เหมือนปุ่มเติม/ถอนในรูป) */ html[data-theme="red-dark"] .btn-primary { background: linear-gradient(135deg, #ffd60a, #e0a800) !important; color: #5a0d12 !important; border: 0; box-shadow: 0 4px 14px rgba(255,214,10,.35); } html[data-theme="red-dark"] .btn-primary:hover, html[data-theme="red-dark"] .btn-primary:focus { filter: brightness(1.05); box-shadow: 0 6px 20px rgba(255,214,10,.5) !important; } html[data-theme="red-dark"] .btn-warning { background: linear-gradient(135deg, #ffe14d, #f0a800) !important; color: #5a0d12 !important; border: 0; } html[data-theme="red-dark"] .btn-outline-primary { color: #ffd60a !important; border-color: #ffd60a !important; } html[data-theme="red-dark"] .btn-outline-primary:hover { background: linear-gradient(135deg, #ffd60a, #e0a800) !important; color: #5a0d12 !important; border-color: transparent !important; } /* ลิงก์ทอง ยกเว้นเมนูล่างและปุ่ม Leaderboard: กฎนี้ specificity (0,5,2) ชนะกฎของคอมโพเนนต์ และโหลดทีหลัง จึงเคยทับจนเมนูล่างเป็นทองหมดทุกตัว (แยก active ไม่ออก) และปุ่ม Leaderboard ตอน active กลายเป็นทองบนทอง = contrast 1:1 มองไม่เห็น */ html[data-theme="red-dark"] a:not(.btn):not(.nav-link):not(.navbar-brand):not(.dropdown-item):not(.bottom-nav-item):not(.footer-leaderboard) { color: #ffd60a; } html[data-theme="red-dark"] a:not(.btn):not(.nav-link):not(.navbar-brand):not(.dropdown-item):not(.bottom-nav-item):not(.footer-leaderboard):hover { color: #ffe98a; } /* hero หน้ารายการงวด → แดงเข้ม เรืองทอง */ html[data-theme="red-dark"] .rounds-hero { background: linear-gradient(135deg, #9d0208 0%, #6a040f 55%, #370101 100%); box-shadow: 0 20px 60px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,214,10,.3); } html[data-theme="red-dark"] .rounds-hero .btn-light { background: linear-gradient(135deg, #ffd60a, #e0a800) !important; color: #6a040f !important; border-color: #ffd60a !important; } /* ปุ่ม "เล่น/เข้าแทง" บนการ์ด → แดงสด ตัดกับทอง */ html[data-theme="red-dark"] .btn-play { background: linear-gradient(135deg, #e5383b, #9d0208); box-shadow: 0 8px 20px rgba(157,2,8,.5); } html[data-theme="red-dark"] .btn-view { background: rgba(0,0,0,.25); color: #ffd60a; border: 2px solid rgba(255,214,10,.4); } html[data-theme="red-dark"] .btn-view:hover { background: rgba(0,0,0,.4); color: #ffe98a; border-color: #ffd60a; } /* chips บนการ์ด */ html[data-theme="red-dark"] .type-chips .chip { background: rgba(0,0,0,.22); color: #ffd60a; border-color: rgba(255,214,10,.3); } /* badge bg-light บนพื้นแดง */ html[data-theme="red-dark"] .badge.bg-light { background: rgba(255,214,10,.18) !important; color: #ffe98a !important; } /* การ์ด auth (login/register) ให้เด่นบนพื้นแดง */ html[data-theme="red-dark"] .card-auth { box-shadow: 0 18px 50px rgba(0,0,0,.55); } /* ============ Bottom nav ตามธีมแบรนด์ (เจ้าของสั่ง 2026-09-10) ============ --bs-body-bg ไม่รู้จักธีมแดง จึงต้อง retint ให้เข้ากับพื้นหลังของแต่ละธีม */ html[data-theme="red"] .bottom-nav { background: var(--surface); border-top-color: var(--line); box-shadow: 0 -2px 14px rgba(157, 2, 8, .18); } html[data-theme="red-dark"] .bottom-nav { background: #4a0a0e; border-top-color: var(--line); box-shadow: 0 -2px 16px rgba(0, 0, 0, .5); } html[data-theme="red-dark"] .bottom-nav-item { color: var(--ink-muted); } html[data-theme="red"] .bottom-nav-item.active, html[data-theme="red-dark"] .bottom-nav-item.active, html[data-theme="red"] .bottom-nav-item:hover, html[data-theme="red-dark"] .bottom-nav-item:hover { color: var(--brand-1); } html[data-theme="red"] .bottom-nav-item.active::before, html[data-theme="red-dark"] .bottom-nav-item.active::before { background: var(--brand-1); } /* ============================================================ HUAY — ทอง-ดำ (สไตล์เว็บหวย · ออกแบบเอง ไม่ลอกเว็บอื่น) คู่สว่าง/มืด เหมือน red: huay = ทองบนพื้นครีม-ขาว (อ่านง่าย กลางวัน) huay-dark = ทองบนพื้นดำ-น้ำเงินเข้ม (immersive กลางคืน) ============================================================ */ /* ---------- HUAY (สว่าง) ---------- */ html[data-theme="huay"] { --input-border: #c9a94b; --input-border-hover: #a9861f; --brand-1: #b8860b; --brand-2: #8a6206; --brand-grad: linear-gradient(135deg, #e9b949 0%, #b8860b 100%); --brand-grad-soft: linear-gradient(135deg, rgba(233,185,73,.10), rgba(184,134,11,.10)); --surface: #ffffff; --surface-2: #fbf6e7; --line: #ece0bd; } html[data-theme="huay"] .navbar-brand { color: #ffd60a !important; } html[data-theme="huay"] .navbar, html[data-theme="huay"] .navbar.sticky-top { background: linear-gradient(135deg, #1b2138 0%, #0f1425 100%) !important; box-shadow: 0 2px 14px rgba(15,20,37,.35) !important; } html[data-theme="huay"] .btn-primary { background: linear-gradient(135deg, #e9b949, #b8860b); color: #241a02; border: 0; font-weight: 700; box-shadow: 0 4px 12px rgba(184,134,11,.3); } html[data-theme="huay"] .btn-primary:hover, html[data-theme="huay"] .btn-primary:focus { box-shadow: 0 6px 18px rgba(184,134,11,.42); filter: brightness(1.04); } html[data-theme="huay"] .btn-warning { background: linear-gradient(135deg, #ffd60a, #e0a800); color: #3a2c02; border: 0; font-weight: 700; } html[data-theme="huay"] .form-control:focus, html[data-theme="huay"] .form-select:focus { box-shadow: 0 0 0 .2rem rgba(184,134,11,.18); } html[data-theme="huay"] .rounds-hero { background: linear-gradient(135deg, #1f2748 0%, #131a30 55%, #0b0f1e 100%); box-shadow: 0 20px 60px rgba(11,15,30,.4), inset 0 1px 0 rgba(255,214,10,.28); } html[data-theme="huay"] .rounds-hero .btn-light { color: #b8860b !important; } html[data-theme="huay"] .btn-play { background: linear-gradient(135deg, #e9b949, #b8860b); color: #241a02; box-shadow: 0 8px 20px rgba(184,134,11,.4); } html[data-theme="huay"] .btn-play:hover { box-shadow: 0 15px 35px rgba(184,134,11,.55); } html[data-theme="huay"] .nav-pills .nav-link.active, html[data-theme="huay"] .type-picker .btn-check:checked + .btn { box-shadow: 0 4px 12px rgba(184,134,11,.3); } html[data-theme="huay"] .digit-boxes .digit-box.filled { background: #fbf1d4; } html[data-theme="huay"] .bottom-nav { background: var(--surface); border-top-color: var(--line); box-shadow: 0 -2px 14px rgba(184,134,11,.18); } html[data-theme="huay"] .bottom-nav-item.active, html[data-theme="huay"] .bottom-nav-item:hover { color: var(--brand-1); } html[data-theme="huay"] .bottom-nav-item.active::before { background: var(--brand-1); } /* ---------- HUAY-DARK (เข้ม/immersive) ---------- */ html[data-theme="huay-dark"] { --input-border: rgba(255, 214, 10, .55); --input-border-hover: rgba(255, 214, 10, .85); --brand-1: #ffd60a; --on-brand: #201602; --brand-2: #e9b949; --brand-grad: linear-gradient(135deg, #ffd60a 0%, #c99700 100%); --brand-grad-soft: linear-gradient(135deg, rgba(255,214,10,.10), rgba(201,151,0,.12)); --surface: #171d33; --surface-2: #0e1324; --ink: #f6f2e4; --ink-muted: #b8c0d6; --line: rgba(255,214,10,.22); } /* พื้นหลัง ดำ-น้ำเงินเข้ม เรืองทองด้านบน */ html[data-theme="huay-dark"] body, html[data-theme="huay-dark"] body.bg-body-tertiary { background: radial-gradient(1200px 620px at 50% -12%, #24305c 0%, transparent 60%), linear-gradient(180deg, #10152a 0%, #070a14 100%) !important; background-attachment: fixed !important; color: var(--ink); } html[data-theme="huay-dark"] .navbar-brand { color: #ffd60a !important; } html[data-theme="huay-dark"] .navbar, html[data-theme="huay-dark"] .navbar.sticky-top { background: linear-gradient(135deg, #141a30 0%, #0b0f1e 100%) !important; box-shadow: 0 2px 16px rgba(0,0,0,.5) !important; } /* การ์ดทั้งหมด → กรมท่าเข้ม ขอบทอง */ html[data-theme="huay-dark"] .card, html[data-theme="huay-dark"] .lotto-card, html[data-theme="huay-dark"] .modal-content, html[data-theme="huay-dark"] .dropdown-menu, html[data-theme="huay-dark"] .offcanvas, html[data-theme="huay-dark"] .list-group-item { background: linear-gradient(180deg, #1a2140 0%, #10152a 100%) !important; color: var(--ink) !important; border-color: rgba(255,214,10,.20) !important; } html[data-theme="huay-dark"] .card-header, html[data-theme="huay-dark"] .card-footer, html[data-theme="huay-dark"] .modal-header, html[data-theme="huay-dark"] .modal-footer { background: rgba(0,0,0,.22) !important; color: var(--ink) !important; border-color: rgba(255,214,10,.18) !important; } html[data-theme="huay-dark"] .lotto-card h6 { color: #fff6d6 !important; } html[data-theme="huay-dark"] .lotto-card .round-name, html[data-theme="huay-dark"] .meta-row, html[data-theme="huay-dark"] .text-muted { color: #b8c0d6 !important; } html[data-theme="huay-dark"] .lotto-card .card-body { background: transparent !important; } /* ฟอร์ม/อินพุต เข้ม ขอบทอง */ html[data-theme="huay-dark"] .form-control, html[data-theme="huay-dark"] .form-select, html[data-theme="huay-dark"] .input-group-text { background: #0e1324 !important; color: #f6f2e4 !important; border-color: var(--input-border) !important; border-width: 2px !important; } html[data-theme="huay-dark"] .form-control:hover:not(:disabled):not([readonly]), html[data-theme="huay-dark"] .form-select:hover:not(:disabled) { border-color: var(--input-border-hover) !important; } html[data-theme="huay-dark"] .form-control::placeholder { color: #8b93ab !important; } html[data-theme="huay-dark"] .form-control:focus, html[data-theme="huay-dark"] .form-select:focus { border-color: #ffd60a !important; box-shadow: 0 0 0 .2rem rgba(255,214,10,.20) !important; } /* ตาราง อ่านง่ายบนพื้นเข้ม */ html[data-theme="huay-dark"] .table { color: #f6f2e4; } html[data-theme="huay-dark"] .table > :not(caption) > * > * { background-color: transparent !important; color: #f6f2e4; border-color: rgba(255,214,10,.15); } html[data-theme="huay-dark"] .table thead th, html[data-theme="huay-dark"] .table-light { background: rgba(0,0,0,.3) !important; color: #ffd60a !important; border-color: rgba(255,214,10,.18) !important; } html[data-theme="huay-dark"] .table-striped > tbody > tr:nth-of-type(odd) > * { background: rgba(0,0,0,.18) !important; } /* ปุ่มหลัก = ทอง */ html[data-theme="huay-dark"] .btn-primary { background: linear-gradient(135deg, #ffd60a, #d99e0b) !important; color: #201602 !important; border: 0; box-shadow: 0 4px 14px rgba(255,214,10,.35); } html[data-theme="huay-dark"] .btn-primary:hover, html[data-theme="huay-dark"] .btn-primary:focus { filter: brightness(1.05); box-shadow: 0 6px 20px rgba(255,214,10,.5) !important; } html[data-theme="huay-dark"] .btn-warning { background: linear-gradient(135deg, #ffe14d, #f0a800) !important; color: #201602 !important; border: 0; } html[data-theme="huay-dark"] .btn-outline-primary { color: #ffd60a !important; border-color: #ffd60a !important; } html[data-theme="huay-dark"] .btn-outline-primary:hover { background: linear-gradient(135deg, #ffd60a, #d99e0b) !important; color: #201602 !important; border-color: transparent !important; } /* ลิงก์ทอง (ยกเว้นเมนูล่าง/leaderboard เหมือนธีม red) */ html[data-theme="huay-dark"] a:not(.btn):not(.nav-link):not(.navbar-brand):not(.dropdown-item):not(.bottom-nav-item):not(.footer-leaderboard) { color: #ffd60a; } html[data-theme="huay-dark"] a:not(.btn):not(.nav-link):not(.navbar-brand):not(.dropdown-item):not(.bottom-nav-item):not(.footer-leaderboard):hover { color: #ffe98a; } /* hero → กรมท่าเข้ม เรืองทอง */ html[data-theme="huay-dark"] .rounds-hero { background: linear-gradient(135deg, #1a2242 0%, #0e1327 55%, #05070f 100%); box-shadow: 0 20px 60px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,214,10,.3); } html[data-theme="huay-dark"] .rounds-hero .btn-light { background: linear-gradient(135deg, #ffd60a, #d99e0b) !important; color: #201602 !important; border-color: #ffd60a !important; } /* ปุ่มบนการ์ด */ html[data-theme="huay-dark"] .btn-play { background: linear-gradient(135deg, #ffd60a, #d99e0b); color: #201602; font-weight: 700; box-shadow: 0 8px 20px rgba(255,214,10,.35); } html[data-theme="huay-dark"] .btn-view { background: rgba(0,0,0,.28); color: #ffd60a; border: 2px solid rgba(255,214,10,.4); } html[data-theme="huay-dark"] .btn-view:hover { background: rgba(0,0,0,.45); color: #ffe98a; border-color: #ffd60a; } /* chips */ html[data-theme="huay-dark"] .type-chips .chip { background: rgba(0,0,0,.25); color: #ffd60a; border-color: rgba(255,214,10,.3); } /* badge bg-light */ html[data-theme="huay-dark"] .badge.bg-light { background: rgba(255,214,10,.18) !important; color: #ffe98a !important; } /* การ์ด auth */ html[data-theme="huay-dark"] .card-auth { box-shadow: 0 18px 50px rgba(0,0,0,.6); } /* bottom nav */ html[data-theme="huay-dark"] .bottom-nav { background: #10152a; border-top-color: var(--line); box-shadow: 0 -2px 16px rgba(0,0,0,.55); } html[data-theme="huay-dark"] .bottom-nav-item { color: var(--ink-muted); } html[data-theme="huay-dark"] .bottom-nav-item.active, html[data-theme="huay-dark"] .bottom-nav-item:hover { color: var(--brand-1); } html[data-theme="huay-dark"] .bottom-nav-item.active::before { background: var(--brand-1); } /* ============================================================ HUAY — LAYOUT: ธีมนี้ "รวม layout" ด้วย หน้า listing เปลี่ยนจากกริดรูปปก → แถวรายการ 2 คอลัมน์ แต่ละแถว: thumbnail เล็ก + ชื่อหวย + แถบนับถอยหลัง/ผลล่าสุด บังคับจากธีม (ไม่ขึ้นกับปุ่มสลับ layout) · ธีมอื่นไม่กระทบ ============================================================ */ /* แถบสถานะ huay — ซ่อนทุกธีม แสดงเฉพาะ huay */ .huay-bar { display: none; } /* ซ่อนปุ่มสลับ layout (รวม/แยกหมวด/รายการ) เพราะ layout มาจากธีมแล้ว */ html[data-theme="huay"] #segLayout, html[data-theme="huay-dark"] #segLayout { display: none; } /* บังคับแถว: 1 คอลัมน์บนมือถือ · 2 คอลัมน์จอ md ขึ้นไป (ชนะทั้ง base และ layout-list) */ html[data-theme="huay"] #lottoGrid .row, html[data-theme="huay-dark"] #lottoGrid .row { display: flex; flex-wrap: wrap; margin: 0; } html[data-theme="huay"] #lottoGrid .lotto-card-col, html[data-theme="huay-dark"] #lottoGrid .lotto-card-col { flex: 0 0 100% !important; max-width: 100% !important; width: 100% !important; padding: 4px 6px !important; margin-top: 0 !important; } @media (min-width: 768px) { html[data-theme="huay"] #lottoGrid .lotto-card-col, html[data-theme="huay-dark"] #lottoGrid .lotto-card-col { flex: 0 0 50% !important; max-width: 50% !important; } } /* การ์ด → แถวแนวนอน (thumb ซ้าย + เนื้อหาขวา) */ html[data-theme="huay"] #lottoGrid .cover-card, html[data-theme="huay-dark"] #lottoGrid .cover-card { display: flex !important; flex-direction: row; align-items: center; gap: .7rem; height: auto !important; padding: .5rem .7rem; border-radius: .9rem; } html[data-theme="huay-dark"] #lottoGrid .cover-card { background: linear-gradient(180deg, #1a2140, #10152a) !important; border: 1px solid rgba(255,214,10,.2) !important; } html[data-theme="huay"] #lottoGrid .cover-card { background: #fff !important; border: 1px solid #ece0bd !important; } /* ปกเต็มใบ → thumbnail 48px */ html[data-theme="huay"] #lottoGrid .cover-img, html[data-theme="huay-dark"] #lottoGrid .cover-img { width: 48px !important; min-width: 48px; height: 48px !important; aspect-ratio: auto; border-radius: .55rem; background-size: cover; background-position: center; align-items: flex-start; } html[data-theme="huay"] #lottoGrid .cover-img .status-pill, html[data-theme="huay-dark"] #lottoGrid .cover-img .status-pill, html[data-theme="huay"] #lottoGrid .cover-fallback, html[data-theme="huay-dark"] #lottoGrid .cover-fallback { display: none !important; } /* เนื้อหา: ชื่อ (บน) + แถบสถานะ (ล่าง) */ html[data-theme="huay"] #lottoGrid .list-meta, html[data-theme="huay-dark"] #lottoGrid .list-meta { display: flex !important; flex-direction: column; align-items: stretch; gap: .28rem; flex: 1 1 auto; min-width: 0; justify-content: center; } html[data-theme="huay"] #lottoGrid .list-name, html[data-theme="huay-dark"] #lottoGrid .list-name { font-weight: 800; font-size: .92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } html[data-theme="huay"] #lottoGrid .list-name { color: #3a2c02; } html[data-theme="huay-dark"] #lottoGrid .list-name { color: #f6f2e4; } html[data-theme="huay"] #lottoGrid .list-status, html[data-theme="huay-dark"] #lottoGrid .list-status { display: none !important; } /* แถบนับถอยหลัง/ผลล่าสุด/สถานะ */ html[data-theme="huay"] #lottoGrid .huay-bar, html[data-theme="huay-dark"] #lottoGrid .huay-bar { display: flex; align-items: center; justify-content: center; gap: .35rem; width: 100%; padding: .34rem .6rem; border-radius: .55rem; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: .5px; font-size: .92rem; } html[data-theme="huay"] #lottoGrid .huay-bar[data-status="open"] { background: linear-gradient(135deg,#e9b949,#b8860b); color: #241a02; } html[data-theme="huay-dark"] #lottoGrid .huay-bar[data-status="open"] { background: linear-gradient(135deg,#ffd60a,#d99e0b); color: #201602; box-shadow: 0 2px 10px rgba(255,214,10,.25); } html[data-theme="huay"] #lottoGrid .huay-bar[data-status="settled"] { background: #2a3350; color: #ffd85a; } html[data-theme="huay-dark"] #lottoGrid .huay-bar[data-status="settled"] { background: rgba(0,0,0,.35); color: #ffd85a; } html[data-theme="huay"] #lottoGrid .huay-bar[data-status="idle"] { background: #ece4cf; color: #8a7a3a; } html[data-theme="huay-dark"] #lottoGrid .huay-bar[data-status="idle"] { background: rgba(120,130,160,.22); color: #b8c0d6; } html[data-theme="huay"] #lottoGrid .huay-res, html[data-theme="huay-dark"] #lottoGrid .huay-res { font-size: 1.05rem; letter-spacing: 2px; }