/* ============================================================= FAH 2026 — RE-SKIN OVERRIDE LAYER (v2 · luxury/glossy) ------------------------------------------------------------- จาก fah (ทอง/ดำ) → FAH (ฟ้า) · LIGHT THEME · พรีเมียม มันวาว - แก้สีด้วย CSS เท่านั้น · ไฟล์เดียว · โหลดท้าย ทุกหน้า - chrome ที่มีไอคอน SVG baked + ข้อความ inline !important → คง navy - accent ทอง → Azure (#1A62FF/#0E4FE6) · แดง → Ruby (#E0353A) - อ้างอิง Design System: glossy(--shine-*) · ลายเพชร ◆ · เส้นทอง(--gradient-premium-soft) โครงสร้าง: 0)TOKENS 1)GLOBAL FOUNDATION 2)CHROME 3)HOME ============================================================= */ /* โหลดฟอนต์แบรนด์ตาม Design System (CSS-only · @import ต้องอยู่บนสุดก่อน rule ใด ๆ) */ @import url('https://fonts.googleapis.com/css2?family=Anuphan:wght@400;500;600;700&family=Bai+Jamjuree:wght@500;600;700&family=JetBrains+Mono:wght@400;600&display=swap'); /* ============================================================= 0) FAH TOKENS ============================================================= */ :root { /* brand / accent / premium */ --fah-primary: #1A62FF; --fah-primary-hover: #0E4FE6; --fah-primary-active: #0B3FBC; --fah-primary-bright: #4480FF; --fah-primary-subtle: #EAF2FF; --fah-accent: #E0353A; --fah-success: #15A34A; --fah-warning: #EE9D0B; --fah-gold: #C7901C; --fah-gold-bright: #DEAE2C; /* light surfaces */ --fah-page: #E7F0FF; --fah-surface: #F6FAFF; --fah-surface-muted: #E3ECFA; --fah-surface-raised: #FBFDFF; /* dark navy chrome */ --fah-navy: #0C1A3C; --fah-navy-raised: #122451; --fah-navy-pill: #18306A; /* text */ --fah-text: #131A28; --fah-text-2: #333D54; --fah-text-3: #495571; --fah-text-muted: #647391; --fah-on-navy: #EAF1FF; --fah-on-navy-muted: #B9C8E8; /* borders */ --fah-border: #D7E1EF; --fah-border-subtle: #EAF0F8; --fah-border-strong: #BAC8DE; --fah-border-onnavy: rgba(255, 255, 255, 0.10); /* gradients */ --fah-grad-brand: linear-gradient(180deg, #3D7BFF 0%, #1A62FF 46%, #0E4FE6 100%); --fah-grad-brand-h: linear-gradient(180deg, #4480FF 0%, #1A62FF 46%, #0B3FBC 100%); --fah-grad-accent: linear-gradient(0deg, #C61329 0%, #E81E36 100%); --fah-grad-text: linear-gradient(180deg, #4480FF 0%, #0E4FE6 100%); --fah-grad-gold: linear-gradient(95deg, #DEAE2C 0%, #F6D87A 50%, #C7901C 100%); --fah-grad-navy: linear-gradient(160deg, #17306B 0%, #0C1A3C 58%, #07112A 100%); /* glossy (จาก DS --shine-*) — sheen ซ้อนบน bg ให้ตัวอักษรอ่านชัด */ --fah-sheen: linear-gradient(180deg, rgba(255,255,255,0.30) 0%, rgba(255,255,255,0.05) 42%, rgba(255,255,255,0) 60%); --fah-sheen-strong: linear-gradient(180deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.10) 45%, rgba(255,255,255,0) 65%); --fah-shine-brand: inset 0 1px 0 rgba(255,255,255,0.55), inset 0 -3px 8px rgba(8,24,74,0.22), 0 6px 16px rgba(26,98,255,0.35); --fah-shine-navy: inset 0 1px 0 rgba(255,255,255,0.22), 0 10px 26px rgba(8,24,74,0.32); } /* ============================================================= 1) GLOBAL FOUNDATION (page-home — ใช้ร่วมทุกหน้าสมาชิก) ============================================================= */ /* ---------------- PAGE CANVAS — พื้นหลังฟ้ากลางวัน (ทุกหน้า) ---------------- sky gradient ที่ body (fixed) + เมฆ blob ที่ body::before (ดู section ท้ายไฟล์) รวม body (ไม่มี class) เพื่อครอบหน้า public: login/register/landing/forgot */ body, body.theme-default, body.page-home { background-color: #C9DEFF !important; background-image: linear-gradient(180deg, #9DC2F2 0%, #BAD7FF 30%, #DCEAFF 64%, #F1F7FF 100%) !important; background-attachment: fixed !important; color: var(--fah-text); } /* ---------------- TYPOGRAPHY — บังคับ Anuphan ทั้งโปรเจค (Font เดียว) ---------------- ทุก element ใช้ Anuphan ยกเว้น Font Awesome icon (.fa*, [class*="fa-"]) ที่คง glyph ไว้ @import โหลด Anuphan ด้านบนสุดของไฟล์ */ body, body *:not(.fa):not(.fas):not(.far):not(.fab):not(.fal):not(.fad):not(.fass):not(.fasr):not(.fa-solid):not(.fa-regular):not(.fa-brands):not(.fa-light):not(.fa-duotone):not(.fa-thin):not([class*="fa-"]) { font-family: 'Anuphan', sans-serif !important; } /* ---------------- LINKS & TEXT ACCENTS ---------------- */ a { color: var(--fah-primary); } a:hover, a:active { color: var(--fah-primary-hover); } a.link-danger { color: var(--fah-accent); } .text-primary { color: var(--fah-primary) !important; } .text-secondary { color: var(--fah-primary-hover) !important; } .text-danger { color: var(--fah-accent) !important; } .text-success { color: var(--fah-success) !important; } .text-info { color: var(--fah-primary) !important; } .text-dark { color: var(--fah-text) !important; } /* ---------------- SECTION HEADING — ลายเพชร ◆ + เส้นคั่น (โทนเดียวกับตัวหนังสือ = azure) ---- ใช้กับทั้ง .section-title (เห็นทุกขนาดจอ) และ .section-header (desktop-only, d-none d-lg-block) */ .section-title, .section-header { display: flex !important; align-items: center; justify-content: center; gap: 0.8rem; color: var(--fah-primary-active) !important; /* deep azure — ไม่จม */ font-weight: 700; letter-spacing: 0.3px; padding-bottom: 0 !important; } /* คง responsive ของ section-header (ซ่อนในจอเล็ก) ไม่ให้ flex บังคับโชว์ */ @media (max-width: 991.98px) { .section-header { display: none !important; } } .section-title::before, .section-title::after, .section-header::before, .section-header::after { content: "◆"; position: static !important; inset: auto !important; margin: 0 !important; flex: 1 1 auto; max-width: 96px; width: auto !important; height: 1em; font-size: 0.6em; line-height: 1em; color: var(--fah-primary); /* bullet โทนเดียวกับตัวหนังสือ */ text-shadow: 0 0 8px rgba(26,98,255,0.45); background-color: transparent !important; /* เคลียร์พื้นทองเดิม (.section-title:after) */ background-repeat: no-repeat; background-size: calc(100% - 16px) 2px; } .section-title::before, .section-header::before { text-align: right; background-image: linear-gradient(90deg, rgba(26,98,255,0) 0%, var(--fah-primary) 92%); background-position: left center; } .section-title::after, .section-header::after { text-align: left; background-image: linear-gradient(270deg, rgba(26,98,255,0) 0%, var(--fah-primary) 92%); background-position: right center; } .section-subtitle { color: var(--fah-text-3); } .divider { background: var(--fah-border); } /* ---------------- BUTTONS — glossy (sheen + shine shadow) ---------------- */ .btn-primary, .btn-deposit, a.btn-deposit, body.theme-default.page-home a.btn-deposit { border-color: var(--fah-primary-hover) !important; background-image: var(--fah-sheen), var(--fah-grad-brand) !important; background-color: var(--fah-primary) !important; color: #fff !important; box-shadow: var(--fah-shine-brand) !important; } .btn-primary:hover, .btn-primary:active, .btn-primary:focus, .btn-deposit:hover, .btn-deposit:active, .btn-deposit:focus { color: #fff !important; border-color: var(--fah-primary-active) !important; background-image: var(--fah-sheen), var(--fah-grad-brand-h) !important; } /* secondary = azure-tint glossy (ชัดเจนว่าเป็นปุ่ม — เดิมพื้นเกือบขาวกลืนพื้น) */ .btn-secondary { border: 1px solid var(--fah-primary) !important; background-image: linear-gradient(180deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0) 55%), linear-gradient(180deg, #EAF2FF 0%, #D2E2FF 100%) !important; background-color: var(--fah-primary-subtle) !important; color: var(--fah-primary-active) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.75), 0 3px 10px rgba(26,98,255,0.18) !important; } .btn-secondary:hover, .btn-secondary:active, .btn-secondary:focus { color: var(--fah-primary-active) !important; border-color: var(--fah-primary-active) !important; background-color: #C7DBFF !important; } /* withdraw = azure-tinted glossy (เข้าคู่กับ deposit, ไม่ใช่ขาวล้วน) */ .btn-withdraw, a.btn-withdraw, body.theme-default.page-home a.btn-withdraw { border: 1px solid var(--fah-primary) !important; background-image: linear-gradient(180deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0) 55%), linear-gradient(180deg, #DCE8FF 0%, #C7DBFF 100%) !important; /* azure tint */ background-color: var(--fah-primary-subtle) !important; color: var(--fah-primary-active) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.7), 0 6px 16px rgba(26,98,255,0.20) !important; } .btn-withdraw:hover, .btn-withdraw:active, .btn-withdraw:focus { border-color: var(--fah-primary-active) !important; background-image: linear-gradient(180deg, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0) 55%), linear-gradient(180deg, #CFE0FF 0%, #B5CEFF 100%) !important; color: var(--fah-primary-active) !important; } .btn-danger { border-color: var(--fah-accent); background-image: var(--fah-sheen), var(--fah-grad-accent); background-color: #E81E36; box-shadow: var(--fah-shine-brand); } /* default = neutral อ่อน glossy (ใช้เป็นปุ่ม back/close/ถอน หลายหน้า) */ .btn-default { border-color: var(--fah-border-strong) !important; background-image: linear-gradient(180deg, rgba(255,255,255,0.7), rgba(255,255,255,0.2)) !important; background-color: var(--fah-surface) !important; color: var(--fah-text) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), 0 3px 10px rgba(8,24,74,0.10) !important; } .btn-default:hover, .btn-default:active, .btn-default:focus { color: var(--fah-text) !important; border-color: var(--fah-primary) !important; background-color: var(--fah-surface-muted) !important; } /* ghost = azure outline (เดิม color:#FFF + พื้นโปร่งใส → ตัวอักษรหายบนพื้นสว่าง) */ .btn-ghost { border: 1px solid var(--fah-primary) !important; background-color: transparent !important; color: var(--fah-primary-active) !important; box-shadow: none !important; } .btn-ghost:hover, .btn-ghost:active, .btn-ghost:focus { color: var(--fah-primary-active) !important; background-color: var(--fah-primary-subtle) !important; } /* dark = navy solid (เป็นปุ่มเข้มเด่น อ่านชัดบนพื้นสว่าง) */ .btn-dark { border-color: var(--fah-navy) !important; background-color: var(--fah-navy) !important; color: #fff !important; } .btn-dark:hover, .btn-dark:active, .btn-dark:focus { color: #fff !important; border-color: var(--fah-navy-raised) !important; background-color: var(--fah-navy-raised) !important; } /* outline-secondary = neutral outline ชัด */ .btn-outline-secondary { border-color: var(--fah-border-strong) !important; background-color: transparent !important; color: var(--fah-text-2) !important; } .btn-outline-secondary:hover, .btn-outline-secondary:active, .btn-outline-secondary:focus { color: var(--fah-text) !important; border-color: var(--fah-primary) !important; background-color: var(--fah-surface-muted) !important; } /* ปุ่ม submit ที่ต่อท้าย input (input-group-append) = azure solid (เป็น action ชัดเจน) เช่น ปุ่ม "ถอน" ในหน้า fgf-withdraw */ .input-group-append button[type="submit"], .input-group-append .btn[type="submit"] { border-color: var(--fah-primary-hover) !important; background-image: var(--fah-sheen), var(--fah-grad-brand) !important; background-color: var(--fah-primary) !important; color: #fff !important; box-shadow: var(--fah-shine-brand) !important; } /* ---------------- FORMS ---------------- */ .form-control, .input-group-text { background-color: var(--fah-surface-raised) !important; border-color: var(--fah-border-strong) !important; color: var(--fah-text) !important; } .form-control::placeholder { color: var(--fah-text-muted); } input.form-control::placeholder { color: var(--fah-text-muted); } .form-control:active, .form-control:focus, .input-group-text:active, .input-group-text:focus { color: var(--fah-text); border-color: var(--fah-primary); } .custom-select { background-color: var(--fah-primary-subtle) !important; border: 1.5px solid #78A4FF !important; color: var(--fah-text) !important; border-radius: 6px !important; } .custom-select:focus { border-color: var(--fah-primary) !important; box-shadow: 0 0 0 3px rgba(26, 98, 255, 0.45) !important; outline: none !important; } .btn.btn-amount-clear { background-color: var(--fah-gold-bright) !important; border-color: var(--fah-border-strong) !important; color: var(--fah-surface) !important; } .md-stepper-horizontal.yellow .md-step.active .md-step-circle { background-color: var(--fah-primary-active) !important; } .bank-name { color: var(--fah-navy) !important; } /* ---------------- CARDS / TABLES ---------------- */ .card { background-color: var(--fah-surface); color: var(--fah-text); } /* ตัวหนังสือ .text-white ในการ์ดสว่าง (เช่น คำอธิบายโปรโมชั่น) → เข้มอ่านชัด (chrome navy ไม่ใช่ .card จึงไม่โดน) */ .card .text-white, .card-body .text-white { color: var(--fah-text-2) !important; } /* term-condition: เนื้อหา

เทาจาง คอนทราสต์ต่ำ → เข้มอ่านสบาย (.terms unique เฉพาะหน้านี้ · inline ไม่มี !important) */ body:has(.terms) [style*="#848E9C"] { color: var(--fah-text-2) !important; } .table { color: var(--fah-text); } /* เส้นแบ่ง row ชัดขึ้น (เดิม #D7E1EF จมพื้น) + เน้นเส้นใต้หัวตารางด้วย azure */ .table thead th { border-bottom: 2px solid var(--fah-primary) !important; } .table td, .table th { border-top-color: var(--fah-border-strong) !important; } .table.table-striped tbody tr:nth-of-type(odd) { background-color: #EFF5FF; } /* ---------------- NAV TABS ---------------- */ .nav-tabs { border-bottom-color: var(--fah-border-strong); } .nav-tabs .nav-link { color: var(--fah-text-muted); } .nav-tabs .nav-link.active { color: var(--fah-primary-active); border-bottom: 4px solid var(--fah-primary) !important; } .nav-tabs .nav-link.active .fas { color: var(--fah-primary); } /* ---------------- RESULT TAB (#resultTab pills) ---------------- */ #resultTab > li { border-radius: 10px; transition: all .2s ease; } #resultTab > li:not(.list_current) { background-color: var(--fah-surface-muted); } #resultTab > li > a { color: var(--fah-text-muted) !important; font-weight: 600; } #resultTab > li.list_current { background-image: var(--fah-sheen), var(--fah-grad-brand) !important; background-color: var(--fah-primary) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.45), 0 4px 12px rgba(26,98,255,0.30); } #resultTab > li.list_current > a { color: #fff !important; } /* ---------------- DIALOG MODALS (ไม่รวม fullscreen) ---------------- */ .modal .modal-content { background-color: var(--fah-surface-raised); color: var(--fah-text); } .modal .modal-content .modal-header, .modal .modal-content .modal-header .modal-title { color: var(--fah-text); } /* ---------------- CARD-TABLE (ตารางผลหวย) ---------------- */ .card-table { border-color: var(--fah-border); background: var(--fah-surface); box-shadow: 0 4px 14px rgba(8,24,74,0.10), 0 1px 3px rgba(8,24,74,0.08); } .card-table .card-table-header { background-image: var(--fah-sheen-strong), var(--fah-grad-brand) !important; background-color: var(--fah-primary) !important; color: #fff !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.45), 0 6px 16px rgba(26,98,255,0.30); } .card-table .card-table-header .title, .card-table .card-table-header .date { color: #fff !important; } .card-table .card-table-title { color: var(--fah-text-muted); } .card-table .lotto-prize-number.first-prize { color: var(--fah-accent); } .card-table .lotto-prize-number.prize-tba { color: var(--fah-text-muted); } .card-table hr { background-color: var(--fah-border); } /* ---------------- PAGINATION ---------------- */ .pagination .page-item .page-link { color: var(--fah-text-muted); } .pagination .page-item.active .page-link { color: var(--fah-primary); } /* ============================================================= 2) CHROME — คง navy (ไอคอน SVG baked + ข้อความ inline !important) ============================================================= */ .navbar { background-color: var(--fah-navy) !important; border-bottom: 1px solid var(--fah-border-onnavy) !important; } .navbar .navbar-toggler-icon { color: var(--fah-primary-bright); } #user-bar { background-color: var(--fah-navy) !important; border-bottom: 0 !important; } .user-bar .username { background-color: var(--fah-navy-pill); } #user-bar .text-primary { color: var(--fah-primary-bright) !important; } #navbar-header { background-color: var(--fah-navy) !important; color: var(--fah-primary-bright) !important; } #navbar-header marquee, #navbar-header a { color: var(--fah-on-navy) !important; } .news-bar { color: var(--fah-on-navy-muted); } .news-bar a { color: var(--fah-on-navy); } .tabbar { background: var(--fah-navy) !important; border-top: 1px solid var(--fah-border-onnavy) !important; } .tabbar ul li a { color: var(--fah-on-navy-muted); } .tabbar ul li.active a { color: var(--fah-on-navy); } .modal.modal-fullscreen { background-color: var(--fah-navy) !important; } .modal.modal-fullscreen .modal-content { background-color: var(--fah-navy) !important; color: var(--fah-on-navy) !important; } .main-nav .nav-item .nav-link span { color: var(--fah-on-navy-muted); } .main-nav .nav-item .nav-link:hover span, .main-nav .nav-item .nav-link:focus span, .main-nav .nav-item .nav-link:active span { color: var(--fah-on-navy); } .main-nav .nav-item .nav-link .circle { border-color: var(--fah-border-onnavy); background-color: var(--fah-navy-raised); } footer { background-color: var(--fah-navy); color: var(--fah-on-navy); } footer strong { color: var(--fah-primary-bright); } /* ============================================================= 3) HOME — เฉพาะหน้า home.html ============================================================= */ /* ---------------- MAIN MENU (.main-services-container) — เข้ม พรีเมียม glossy ---------------- */ .main-services-container { background-image: linear-gradient(180deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0) 38%), var(--fah-grad-navy) !important; background-color: var(--fah-navy) !important; border: 1px solid rgba(120,164,255,0.55) !important; box-shadow: var(--fah-shine-navy) !important; } .main-services-container:hover { border-color: var(--fah-primary-bright) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.28), 0 0 0 1px rgba(26,98,255,0.30), 0 14px 32px rgba(26,98,255,0.34) !important; transform: translateY(-5px); } /* หัวข้อเมนูหลัก → gold gradient text (พรีเมียมบน navy) */ .header-gold, .header-services, .header-sub-services { background: var(--fah-grad-gold) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; } /* ---------------- SECONDARY MENU (.custom-service-btn) — เด่นกว่าเมนูหลัก (azure glossy) ---------------- */ .custom-service-btn .menu-service-container { background-image: var(--fah-sheen-strong), var(--fah-grad-brand) !important; background-color: var(--fah-primary) !important; border: 1px solid #9DBBFF !important; border-radius: 14px !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.55), 0 8px 22px rgba(26,98,255,0.34) !important; } .custom-service-btn .menu-service-container:hover { border-color: #fff !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.65), 0 12px 28px rgba(26,98,255,0.42) !important; transform: translateY(-3px); } .custom-service-btn .menu-service-header { color: #fff !important; } .custom-service-btn .menu-service-container .circle { border-color: rgba(255,255,255,0.6) !important; background-color: rgba(255,255,255,0.14) !important; } /* แก้ปัญหา (mobile): การ์ดเมนูรองสูงไม่เท่ากัน + ข้อความยาวล้นกล่อง วิธี: col เป็น flex ให้การ์ดยืดเต็มความสูงแถว + min-height baseline + clamp ป้าย 2 บรรทัด โดยจองพื้นที่ 2 บรรทัดไว้ → ทุกใบเรียงตรงกัน */ @media (max-width: 991.98px) { .custom-service-btn { display: flex !important; } .custom-service-btn .menu-service-container { width: 100% !important; min-height: 84px !important; justify-content: center !important; } .custom-service-btn .menu-service-header { display: -webkit-box !important; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.2 !important; min-height: 2.4em; /* จอง 2 บรรทัด */ text-align: center; word-break: break-word; } } /* ---------------- MOBILE LAYOUT 2 (.mobile-main-content) ---------------- เอาพื้นหลังออก → โชว์ gradient หรูของ page ด้านล่าง (กลมกลืนธีม light) */ .mobile-main-content { background-color: transparent !important; background-image: none !important; } /* บังคับฟอนต์ mmc ให้ตรงกับเว็บ (เดิม Noto Sans Thai/Prompt ไม่โหลด → หลุด) ใช้ [class*="mmc-"] เพื่อเลี่ยงไอคอน Font Awesome */ .mobile-main-content [class*="mmc-"] { font-family: 'Anuphan', 'Sarabun', sans-serif !important; } /* กันป้ายเมนูในแถบข้างตัวอักษรตก (รองรับ metric ฟอนต์ใหม่) */ .mobile-main-content .mmc-menu-item .mmc-menu-label { font-size: 12px !important; line-height: 1.25 !important; max-height: none !important; } .mmc-menu-item, .mmc-featured-card, .mmc-grid-card { background-image: linear-gradient(180deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0) 40%), var(--fah-grad-navy) !important; background-color: var(--fah-navy-raised) !important; border: 1px solid rgba(120,164,255,0.40) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.16), 0 8px 20px rgba(8,24,74,0.30) !important; } .mmc-menu-item.active, .mmc-menu-item:hover { border-color: var(--fah-primary-bright) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), 0 0 0 1px rgba(26,98,255,0.30), 0 10px 24px rgba(26,98,255,0.32) !important; } .mmc-menu-label { color: var(--fah-on-navy-muted) !important; } .mmc-menu-item.active .mmc-menu-label, .mmc-card-title, .mmc-card-subtitle, .mmc-grid-card-name { background: var(--fah-grad-gold) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; } /* ---------------- USER CREDIT BOX ---------------- */ #user-credit-box { color: var(--fah-on-navy) !important; } /* ============================================================= 4) PUBLIC PAGES — login / register / landing / forgot (body ไม่มี class — base canvas/typography ครอบผ่าน selector `body` แล้ว) ============================================================= */ /* ---------------- REGISTER — การ์ดฟอร์มดำ → light + stepper ทอง → azure ---- (override inline