/* ============================================================
   Home Dark — ธีม Dark Mode สไตล์ Decimal (พื้นเข้ม + gradient + glow)
   โหลดหลัง home-modern.css (override ทุกอย่าง)
   ============================================================ */

:root {
    --dk-bg:      #0e1117;   /* พื้นหลังหลัก */
    --dk-bg2:     #161b22;   /* พื้นการ์ด */
    --dk-bg3:     #1c2230;   /* พื้นการ์ด hover/รอง */
    --dk-text:    #e6edf3;   /* ตัวหนังสือหลัก */
    --dk-muted:   #9aa4b2;   /* ตัวหนังสือรอง */
    --dk-border:  rgba(255,255,255,.08);
    --dk-cyan:    #22d3ee;
    --dk-indigo:  #6366f1;
    --dk-violet:  #a855f7;
}

/* ===== พื้นหลังหลักของหน้า ===== */
body { background: var(--dk-bg) !important; color: var(--dk-text) !important; }

/* ===== Header / navbar — ติดบนสุด (sticky) โปร่งดำ blur ===== */
.header {
    position: sticky !important;
    top: 0;
    z-index: 1030;
    background: linear-gradient(120deg, #4f46e5 0%, #7c3aed 60%, #a855f7 100%) !important;
    border-bottom: 1px solid rgba(255,255,255,.10);
    box-shadow: 0 4px 20px rgba(124,58,237,.30);
    transition: box-shadow .25s ease;
}
.header.scrolled {
    box-shadow: 0 6px 28px rgba(124,58,237,.45);
}
.header .navbar-nav .nav-item .nav-link,
.header .nav-menu .nav-link,
.header .nav-link { color: #ffffff !important; font-weight: 500 !important; }
.header .navbar-nav .nav-item .nav-link:hover,
.header .nav-menu .nav-link:hover,
.header .nav-link:hover { color: #ffffff !important; opacity: .8; }
.header .navbar,.header .container,.header nav{background:transparent !important}
.navbar-brand.logo img { filter: brightness(1.1); }
.lang-dropdown { background: var(--dk-bg2) !important; border-color: var(--dk-border) !important; }
.lang-dropdown #lang-label { color: var(--dk-text) !important; }
.lang-dropdown i { color: var(--dk-muted) !important; }

/* ===== ทุก section พื้นเข้ม + ลบ gradient อ่อนของ modern ===== */
.why-choose, .about, .info, .plan, .faq, .experience, .testimonial, .banner-section {
    background: var(--dk-bg) !important;
}
.why-choose::before, .why-choose::after,
.about::before, .about::after,
.info::before, .info::after,
.plan::before,
.faq::before,
.experience::before, .experience::after {
    opacity: .5 !important;
}

/* วงกลม gradient เรืองแสง (glow) ลอยในแต่ละ section แบบ Decimal */
.why-choose::after, .about::after, .info::after, .plan::before, .faq::before {
    background:
        radial-gradient(circle at 85% 20%, rgba(99,102,241,.22), transparent 38%),
        radial-gradient(circle at 12% 85%, rgba(168,85,247,.18), transparent 38%) !important;
}

/* ===== หัวข้อ + ข้อความ เป็นสีขาว/เทาอ่อน ===== */
.title h4, .title h3, .title h5,
h2, h3, h4, h5,
.about .title h4, .info .title h4, .plan .title h4, .faq .title h4,
.why-choose .card .info h5, .about .details .content h5,
.testimonial .card .info h5 {
    color: #ffffff !important;
}
.title p, p, .info .title p, .plan .title p, .faq .title p,
.why-choose .card .info p, .about .details .content p,
.testimonial .card .content p {
    color: var(--dk-muted) !important;
}

/* ===== การ์ดต่างๆ เป็นพื้นเข้ม + ขอบเรือง ===== */
.faq .accordion-item {
    background: var(--dk-bg2) !important;
    border: 1px solid var(--dk-border) !important;
    box-shadow: 0 8px 30px rgba(0,0,0,.4) !important;
}
/* การ์ดรีวิว: ตัดพื้นหลังออก โปร่ง มีขอบ */
.testimonial .card {
    background: transparent !important;
    border: 1px solid var(--dk-border) !important;
    box-shadow: none !important;
}

/* About feature list: ลบพื้นหลัง (โปร่งใส) */
.about .details {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
.testimonial .card:hover {
    background: var(--dk-bg3) !important;
    box-shadow: 0 16px 40px rgba(99,102,241,.25) !important;
}

/* การ์ดขั้นตอนซื้อ: มีขอบเรือง แต่พื้นโปร่ง (เห็นพื้นหลังผ่าน) */
.why-choose .card {
    background: transparent !important;
    border: 1px solid var(--dk-border) !important;
    box-shadow: none !important;
    border-radius: 20px !important;
}
.why-choose .card:hover {
    background: rgba(99,102,241,.05) !important;
    border-color: rgba(99,102,241,.4) !important;
    box-shadow: 0 12px 30px rgba(99,102,241,.15) !important;
    transform: translateY(-6px);
}

/* ไอคอนในการ์ด: พื้น gradient เรือง */
.why-choose .card .icon,
.about .details .icon {
    background: linear-gradient(135deg, var(--dk-indigo), var(--dk-violet)) !important;
    box-shadow: 0 8px 22px rgba(99,102,241,.45) !important;
}
.why-choose .card .icon i,
.about .details .icon i { color: #fff !important; }

/* ===== ปุ่มหลัก: gradient เรืองแสง (glow) แบบ Decimal ===== */
.btn--base {
    background: linear-gradient(120deg, #22d3ee, #6366f1, #a855f7) !important;
    border: none !important;
    box-shadow: 0 8px 26px rgba(99,102,241,.5) !important;
}
.btn--base:hover {
    box-shadow: 0 12px 34px rgba(168,85,247,.6) !important;
    filter: brightness(1.08);
}

/* ===== ตารางคริปโต ===== */
.crypto-table-wrap { background: #161b22 !important; border: 1px solid var(--dk-border); }
.crypto-table-wrap thead tr { background: linear-gradient(120deg,#4f46e5,#7c3aed) !important; }
.crypto-table-wrap thead th { color: #000000 !important; font-weight: 700; font-size: 13px; border: none !important; }
.crypto-table-wrap tbody tr:hover td { background: rgba(99,102,241,.08) !important; }
.crypto-table-wrap a:hover { background: rgba(99,102,241,.25) !important; }
.plan .title h4 { color: #fff !important; }
.plan .title p { color: var(--dk-muted) !important; }

/* ===== ตารางเรท (plan) — การ์ดเข้ม ===== */
.plan .table, .plan table { background: var(--dk-bg2) !important; }
.plan #rate-table-body tr td { color: var(--dk-text) !important; background: transparent !important; }
.plan #rate-table-body tr:nth-child(even) td { background: rgba(255,255,255,.03) !important; }
.plan #rate-table-body tr:hover td { background: rgba(99,102,241,.12) !important; }
.plan #rate-table-body tr:first-child td { background: rgba(99,102,241,.15) !important; }

/* ===== FAQ accordion เข้ม (กลมกลืนพื้นหลัง) ===== */
.faq .accordion, .faq .accordion-collapse, .faq .accordion-button, .faq .accordion-body, .faq .accordion-item {
    background: #161b22 !important; color: #fff !important;
}
.faq .accordion-button { color: #fff !important; box-shadow: none !important; }
.faq .accordion-button:not(.collapsed) { background: rgba(99,102,241,.15) !important; color: #fff !important; }
.faq .accordion-body p { color: var(--dk-muted) !important; }
.faq .accordion-button::after { filter: invert(1) brightness(1.5); }
.faq .accordion-button span { color: #fff !important; }

/* ===== Experience / สถิติ — คงพื้นเข้ม + การ์ด gradient ===== */
.experience { background: linear-gradient(160deg, #0e1117, #1a1030, #0e1117) !important; }

/* ===== Footer เข้มเข้ากับทั้งหน้า ===== */
.footer-area.bg-overlay-two::before {
    background: linear-gradient(120deg, rgba(14,17,23,.95), rgba(28,18,48,.92)) !important;
}

/* ===== Hero: พื้นรูปโลก dark + overlay บาง + fade ขอบล่างไร้รอยต่อ ===== */
.banner-section { position: relative; }
.banner-section .banner-thumb { background-color: #0e1117 !important; }
.banner-section .banner-thumb.bg-overlay::before {
    background: linear-gradient(110deg, rgba(14,17,23,.50) 0%, rgba(14,17,23,.28) 45%, rgba(30,58,138,.15) 100%) !important;
    opacity: 1 !important;
}
.banner-section .banner-thumb::after {
    content: "";
    position: absolute; left: 0; right: 0; bottom: 0;
    height: 160px;
    background: linear-gradient(to bottom, rgba(14,17,23,0) 0%, #0e1117 100%);
    z-index: 1;
    pointer-events: none;
}

/* ===== ฟอร์มซื้อ (banner-form) เป็นการ์ด dark ทั้งใบ ===== */
.banner-form,
.banner-form .main,
.banner-form .body,
.banner-form .main .body {
    background: #161b22 !important;
    color: var(--dk-text) !important;
}
.banner-form .main {
    border: 1px solid var(--dk-border);
    border-radius: 18px;
}
/* หัวการ์ด "อัตราแลกเปลี่ยน" จากเขียวสด -> gradient เข้าธีม */
.banner-form .top,
.banner-form .main .top {
    background: linear-gradient(120deg, #6366f1, #a855f7) !important;
    color: #fff !important;
    border-radius: 12px 12px 0 0;
}
.banner-form .top p, .banner-form .top h5 { color: #fff !important; }

/* label / ข้อความในฟอร์มให้เป็นสีอ่อนอ่านชัด */
.banner-form label,
.banner-form .form--label,
.banner-form p,
.banner-form span,
.banner-form .small,
.banner-form li,
.banner-form h5 { color: #cbd5e1 !important; }
.banner-form b, .banner-form strong { color: #fff !important; }

/* ช่องกรอกในฟอร์มเป็น dark */
.banner-form input,
.banner-form select,
.banner-form .form--control {
    background: #0e1117 !important;
    color: #fff !important;
    border: 1px solid var(--dk-border) !important;
}
.banner-form input::placeholder { color: #6b7280 !important; }

/* dropdown เลือกสกุลเงิน (THB/USDT) + รายการ option เป็น dark */
.banner-form .dropdown-menu,
.banner-form .currency-dropdown,
.banner-form ul,
.banner-form .select-options {
    background: #1c2230 !important;
    border: 1px solid var(--dk-border) !important;
    box-shadow: 0 10px 30px rgba(0,0,0,.5) !important;
}
.banner-form .dropdown-item,
.banner-form .dropdown-menu li,
.banner-form .select-options li,
.banner-form .dropdown-menu a {
    color: #e6edf3 !important;
    background: transparent !important;
}
.banner-form .dropdown-item:hover,
.banner-form .dropdown-menu li:hover,
.banner-form .select-options li:hover {
    background: rgba(99,102,241,.18) !important;
    color: #fff !important;
}
.banner-form .currency-select,
.banner-form .selected-currency,
.banner-form .dropdown-toggle {
    background: #0e1117 !important;
    color: #fff !important;
    border: 1px solid var(--dk-border) !important;
}

/* ===== ตัวอักษรหัวข้อ Hero ให้ขาว/อ่านง่ายบนพื้นเข้ม ===== */
.banner-section .content h5 { color: #c4b5fd !important; }
.banner-section .content h3 { color: #ffffff !important; line-height: 1.35 !important; padding-top: 0.12em; }
.banner-section .content p  { color: #cbd5e1 !important; }

/* ===== ตัวเลือกภาษาใน dropdown ===== */
#langMenu { background: var(--dk-bg2) !important; }
#langMenu span { color: var(--dk-text) !important; }

/* รูป FAQ ด้านซ้าย: ผสมให้กลมกลืน dark */
.faq .faq-thumb img { mix-blend-mode: lighten; opacity: .92; }

.breadcumb{background:#0e1117 !important}
.breadcumb .content h2{color:#fff !important}
.breadcumb .content a{color:#34d399 !important}
.breadcumb .content a:hover{color:#6ee7b7 !important}

.contact .form--control,.contact input,.contact textarea{background:#0e1117 !important;color:#fff !important;border:1px solid rgba(255,255,255,.1) !important}
.contact h4,.contact h6,.contact .contact__title{color:#fff !important}

.policy{background:#0e1117 !important}
.policy h4,.policy h2{color:#fff !important}
.policy p,.policy span,.policy li{color:#9aa4b2 !important}
.policy a{color:#34d399 !important}
.custom--accordion .accordion-item{background:#161b22 !important;border:1px solid rgba(255,255,255,.08) !important}
.custom--accordion .accordion-button{background:#161b22 !important;color:#fff !important}
.custom--accordion .accordion-body p{color:#9aa4b2 !important}

/* ===== section "ซื้อและขายง่ายๆ" — พื้น #13131E เรียบ (ปิดเส้นแบ่ง/glow) ===== */
#info-globe {
    background: #13131E !important;
}
#info-globe::before,
#info-globe::after {
    display: none !important;
    background: none !important;
    content: none !important;
}