@charset "UTF-8";

/* --------------------------------------------------
 ธีม Midnight Gold — น้ำเงินกรมท่าลึก + ทอง
 ไฟล์นี้โหลด "ต่อท้าย" CSS เดิมทุกตัว ไม่ทับไฟล์ใด ๆ
 ใช้ทั้งมือถือจริงและ desktop (คนละเรื่องกับกรอบ 440 ใน frame-440.css)
 ถอนธีมกลับเป็นดำ-ทองเดิม = ลบ <link> ไฟล์นี้ออกบรรทัดเดียว

 จานสี
   น้ำเงินดำเข้ม  #01030f   พื้นหลังหลัก
   กรมท่า        #02061c / #051033
   น้ำเงินการ์ด   #0a1a45 / #12245c
   ทองสว่าง      #ffd77a
   ทองเข้ม       #8a5f1d
-------------------------------------------------- */

body {
    background: #01030f !important;
}

/* ฉากหลัง: ไล่เฉดกรมท่า + แสงน้ำเงินด้านบน + ไอทองจาง ๆ ด้านล่าง */
body::before {
    background-image:
        radial-gradient(90% 55% at 50% 0%, rgba(24, 58, 150, 0.45) 0%, rgba(6, 16, 58, 0.28) 42%, rgba(1, 3, 15, 0) 76%),
        radial-gradient(60% 40% at 50% 100%, rgba(168, 121, 44, 0.16) 0%, rgba(1, 3, 15, 0) 70%),
        linear-gradient(180deg, #051033 0%, #02061c 55%, #01030f 100%) !important;
    background-size: cover, cover, cover !important;
    background-repeat: no-repeat !important;
}

/* แถบหัว / แถบยอดเงิน / เมนูล่าง — เส้นทองบาง */
#header {
    background: linear-gradient(180deg, rgba(4, 12, 42, 0.97) 0%, rgba(1, 3, 15, 0.94) 100%) !important;
    border-bottom: 1px solid rgba(245, 210, 122, 0.55) !important;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.6) !important;
}

#btm-bar {
    background: linear-gradient(180deg, rgba(4, 12, 42, 0.92), rgba(1, 3, 15, 0.92)) !important;
}

.top-bar {
    background-image: linear-gradient(rgba(3, 9, 32, 0.92), rgba(1, 3, 15, 0.92)) !important;
}

.side-bar {
    background: linear-gradient(131deg, rgba(168, 121, 44, 0.30) 0%, rgba(4, 12, 42, 0.9) 26%, rgba(1, 3, 15, 0.94) 72%) !important;
}

/* การ์ดหลัก */
.monitor {
    background-image: linear-gradient(180deg, #0a1a45 0%, #02061c 100%) !important;
}

.user-wallet {
    background-color: rgba(1, 3, 15, 0.5) !important;
}

.user-balance {
    background-color: rgba(1, 3, 15, 0.6) !important;
}

/* เม็ดยอดเงิน / เพชร / ไทล์เมนู — คงขอบทองเดิม เปลี่ยนเนื้อในเป็นกรมท่า */
.coin,
a.cash,
a.cash-lock,
a.diamond,
.pop-nav li {
    background-image: linear-gradient(#12245c 0%, #02061c 100%), linear-gradient(125deg, #8a5f1d, #ffd77a) !important;
}

/* ช่องกรอก / ดรอปดาวน์ */
input.form-control,
.form-control,
textarea.form-control {
    background-color: #050e30 !important;
    border-color: rgba(255, 215, 122, 0.3) !important;
}

.dropdown-menu {
    background-color: #050e30 !important;
}

footer {
    background: linear-gradient(90deg, rgba(1, 3, 15, 0.96) 0%, rgba(10, 26, 69, 0.7) 100%) !important;
}

/* หัวข้อเป็นทอง */
.ttl,
.head-blc .ttl {
    color: #ffd77a !important;
}

/* --------------------------------------------------
 เฉพาะหน้าเว็บหลัก (flow88.app) — ส่วนที่ไม่มีในเว็บสมาชิก
-------------------------------------------------- */

/* ปุ่มเข้าสู่ระบบ / สมัคร บนหัวเว็บ — คงขอบทองเดิม เปลี่ยนเนื้อในเป็นกรมท่า */
#btn-play.btn-deposit,
#btn-login.btn-deposit {
    background-image: linear-gradient(#12245c 0%, #02061c 100%), linear-gradient(125deg, #8a5f1d, #ffd77a) !important;
}

/* กล่องข่าว / ไอคอนเมนู */
#news-box {
    background-color: rgba(4, 12, 42, 0.72) !important;
}

/* เมนูที่เลือกอยู่ในลิ้นชัก (เดิมเป็นไล่เฉดน้ำตาล-ดำ) */
#drw-nav a.active {
    background-image: radial-gradient(100% 100% at 50% 0, #12245c 0%, #02061c 100%) !important;
}

/* --------------------------------------------------
 เมนูข้าง (.side-bar) — การ์ดพื้นน้ำเงินเข้มทีละปุ่ม
 ตัวที่เลือกอยู่ใช้ขอบทองไล่เฉด ทำด้วยเทคนิคซ้อนพื้นหลัง
 padding-box/border-box (border-image ใช้ไม่ได้เพราะไม่เอาส่วนโค้ง)
-------------------------------------------------- */
.side-bar .list .item {
    margin-bottom: 8px !important;
}

.side-bar .list .item>a,
.side-bar .list .item .tag-link {
    background: linear-gradient(180deg, #0d1f52 0%, #071233 100%) !important;
    border: 1px solid rgba(255, 215, 122, 0.18) !important;
    border-radius: 10px !important;
}

/* แถบขาวเล็ก ๆ ด้านซ้ายของดีไซน์เดิม ไม่ต้องแล้ว */
.side-bar .list .item>a::before,
.side-bar .list .item .tag-link::before {
    display: none !important;
}

.side-bar .list .item>a:hover,
.side-bar .list .item .tag-link:hover {
    background: linear-gradient(180deg, #16307a 0%, #0a1840 100%) !important;
}

.side-bar .list .item>a.active,
.side-bar .list .item .tag-link.active,
.side-bar .list .item>a.active:hover,
.side-bar .list .item .tag-link.active:hover {
    background:
        linear-gradient(180deg, #14306f 0%, #081538 100%) padding-box,
        linear-gradient(160deg, #ffd77a 0%, #8a5f1d 48%, #ffd77a 100%) border-box !important;
    border: 1px solid transparent !important;
    border-radius: 10px !important;
    box-shadow: 0 0 12px rgba(255, 215, 122, 0.18) !important;
}