/* === Hybrid Theme (พื้นขาว + UI เทา/ดำ) === */

/* ส่วนพื้นหลังหลักของหน้าเว็บ */
html, body {
    background-color: #ffffff !important;
    color: #111 !important;
}

/* Header / Navbar / Footer */
header, footer, nav, .navbar, .footer {
    background-color: #222 !important; /* เทาเข้มหรือดำ */
    color: #f0f0f0 !important;
}

/* ปุ่ม เมนู dropdown, popup, modal */
.dropdown-menu,
.modal-content,
.offcanvas,
.tooltip-inner,
.popover {
    background-color: #2a2a2a !important; /* เทาเข้ม */
    color: #f0f0f0 !important;
    border-color: #444 !important;
}

/* ตัวหนังสือภายใน popup/modal */
.dropdown-item, .modal-body, .modal-header, .modal-footer {
    color: #f0f0f0 !important;
}

    /* Hover effects */
    .dropdown-item:hover, .nav-link:hover {
        background-color: #333 !important;
        color: #ffffff !important;
    }

/* ปุ่ม (Buttons) */
.btn {
    background-color: #333 !important;
    color: #fff !important;
    border: 1px solid #444 !important;
}

    .btn:hover {
        background-color: #555 !important;
    }

/* Card หรือ Panel */
.card, .panel {
    background-color: #111 !important;
    color: #f0f0f0 !important;
    border-color: #444 !important;
}

/* รูปภาพ (ทำให้ดูกลมกลืนกับธีมมืดรอบๆ) */
/*img {
    background-color: #222 !important;
    padding: 4px;
    border-radius: 6px;
}*/

/* Footer Links */
footer a {
    color: #bbb !important;
}

    footer a:hover {
        color: #fff !important;
    }

/* ===== ภาพเป็นขาวดำ ===== */
img {
    filter: grayscale(100%) contrast(1.1);
    transition: filter 0.3s ease;
}

    /* ===== ทำให้ภาพกลับมาเป็นสีเมื่อ hover ===== */
    img:hover {
        filter: grayscale(0%) contrast(1.1);
    }

/* ===== Header Custom Theme ===== */
.custom-navbar {
    background-color: #2c2c2c !important; /* เทาเข้ม แต่ไม่ดำสนิท */
    border-bottom: 1px solid #444;
}

    .custom-navbar .nav-link,
    .custom-navbar .navbar-brand,
    .custom-navbar .dropdown-toggle {
        color: #f5f5f5 !important; /* ขาวอ่อน อ่านง่าย */
    }

        .custom-navbar .nav-link:hover,
        .custom-navbar .dropdown-item:hover {
            color: #ffffff !important;
            background-color: #3a3a3a !important; /* เทา hover */
        }

    .custom-navbar .dropdown-menu {
        background-color: #2c2c2c !important;
        border-color: #444;
    }

    .custom-navbar .dropdown-item {
        color: #f0f0f0 !important;
    }

        .custom-navbar .dropdown-item:hover {
            background-color: #3a3a3a !important;
            color: #fff !important;
        }

/* Footer Background */
footer {
    background-color: #ffffff; /* เปลี่ยนเป็นสีขาว */
    color: #333; /* ตัวอักษรปกติเป็นเทาเข้ม */
}

    /* Footer headings */
    footer h4 {
        color: #222; /* หัวข้อใน footer สีเข้ม */
    }

    /* Footer links */
    footer a {
        color: #222 !important; /* ลิงก์สีดำ / เทาเข้ม */
        text-decoration: none; /* เอา underline ออก */
        transition: color 0.3s ease;
    }

        footer a:hover {
            color: #000 !important; /* hover ให้เข้มขึ้น */
            text-decoration: underline; /* จะเพิ่ม underline เวลาชี้ก็ได้ */
        }

    /* Footer icons สีเดียวกับ text */
    footer i {
        color: #222;
    }

    /* Footer images ปรับให้ไม่มีขอบ */
    footer img.img-thumbnail {
        background-color: transparent !important;
        border: none !important;
        padding: 0 !important;
        border-radius: 0 !important;
    }
    /* Footer strong ให้เป็นสีดำ */
    footer strong {
        color: #222; /* สีดำ/เทาเข้ม */
        font-weight: 600; /* หรือ 700 ถ้าต้องการเข้มขึ้น */
    }
/* ---------------------------
   Content Page Links
   --------------------------- */
a {
    color: #222 !important; /* link ทั้งหน้าเป็นสีดำ */
    text-decoration: none;
    transition: color 0.3s ease;
}

    a:hover {
        color: #000 !important; /* hover เข้มขึ้น */
        text-decoration: underline;
    }

/* ---------------------------
   Bootstrap Tabs / Pills
   --------------------------- */
.nav-tabs .nav-link,
.nav-pills .nav-link {
    color: #222 !important; /* tab ตัวอักษรสีดำ */
}

    .nav-tabs .nav-link.active,
    .nav-pills .nav-link.active {
        color: #000 !important; /* active tab สีดำเข้ม */
        background-color: #f8f9fa; /* พื้นหลังอ่อนๆ เข้ากับธีม */
    }

/* ===========================
   ViewBag / Page Title
   =========================== */
h2, h3, h4, h5, h6 {
    color: #222 !important; /* เปลี่ยน text-primary / text-secondary เป็นสีดำ/เทาเข้ม */
}

    /* หากต้องการเฉพาะ h2 ของ ViewBag */
    h2.text-primary {
        color: #222 !important;
    }

    h3.text-secondary {
        color: #555 !important; /* สีเทาเข้มเล็กน้อยสำหรับ subtitle */
    }

/* ===========================
   Tables - Medium Gray Theme
   =========================== */
.table, .table th, .table td {
    color: #222 !important; /* ตัวอักษรสีดำ */
    background-color: #d6d6d6 !important; /* พื้นสีเทากลาง */
    border-color: #aaa !important; /* เส้นขอบสีเทาเข้ม */
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: #c2c2c2 !important; /* สลับสีเทาเข้มขึ้นเล็กน้อย */
}

.table-primary {
    background-color: #bfbfbf !important; /* header table เทากลางเข้มกว่า body เล็กน้อย */
    color: #222 !important; /* ตัวอักษรใน header เป็นดำ */
}

.table-hover tbody tr:hover {
    background-color: #a9a9a9 !important; /* hover เป็นเทาเข้ม */
}

.table-responsive {
    overflow-x: auto;
}

/* ===========================
   Cards - Gray Theme
   =========================== */
.card {
    border-color: #aaa !important; /* ขอบ card สีเทาเข้ม */
    background-color: #f5f5f5 !important; /* พื้น card เป็นเทาอ่อน */
    color: #222 !important; /* ตัวอักษรใน card เป็นสีดำเข้ม */
}

.card-body {
    color: #222 !important; /* ตัวอักษรภายใน card-body เป็นดำ */
}

.card-title {
    color: #333 !important; /* ตัวอักษรหัวข้อเป็นดำเข้ม */
    font-weight: 600;
}

.card-text, .card p, .card strong {
    color: #222 !important; /* ตัวอักษรปกติและ strong เป็นสีดำ */
}
/* --- เปลี่ยนสีตัวอักษร Bootstrap ทั้งหมดเป็นสีดำ/เทาเข้ม --- */
.text-primary,
.text-secondary,
.text-success,
.text-danger,
.text-warning,
.text-info,
.text-light,
.text-dark,
.text-body {
    color: #222 !important; /* สีดำเข้ม */
}

/* Optional: link tag ทั่วไป */
a,
a:hover,
a:focus {
    color: #222 !important;
    text-decoration: none; /* ถ้าไม่อยากมี underline */
}

/* สำหรับ headings */
h1, h2, h3, h4, h5, h6 {
    color: #222 !important;
}

/* ตัวอักษรใน card, footer, nav, table, paragraph */
p,
li,
span,
strong,
em,
td,
th,
caption {
    color: #222 !important;
}

/* Links ในตาราง */
.table a {
    color: #222 !important;
}

/* Tab หรือ nav-link */
.nav-link {
    color: #222 !important;
}

    .nav-link.active {
        color: #222 !important;
    }

/* Breadcrumb พื้นขาว / เทาอ่อน */
.breadcrumb {
    background-color: #f8f9fa !important; /* สีพื้นขาวเทาอ่อน */
    padding: 0.5rem 1rem; /* ปรับ padding ให้สวย */
    margin-bottom: 1rem;
    border-radius: 0.25rem;
}

/* Breadcrumb ตัวอักษรปกติ */
.breadcrumb-item a {
    color: #222 !important; /* สีตัวอักษรดำเข้ม */
    text-decoration: none; /* เอา underline ออกถ้าต้องการ */
}

/* Breadcrumb item active */
.breadcrumb-item.active {
    color: #555 !important; /* สีเทาเข้มสำหรับ active */
}

/* Breadcrumb hover */
.breadcrumb-item a:hover {
    color: #000 !important; /* สีดำเข้มเวลา hover */
    text-decoration: underline;
}



/* List Group ปกติ */
.list-group-item {
    color: #222 !important; /* สีตัวอักษรดำเข้ม */
    background-color: #f8f9fa !important; /* สีพื้นขาวเทาอ่อน */
    border-color: #ccc !important; /* ขอบเทาอ่อน */
}

    /* List Group hover */
    .list-group-item:hover {
        background-color: #e9ecef !important; /* สีพื้น hover เทาอ่อน */
        color: #000 !important; /* สีตัวอักษรดำ */
    }

    /* List Group active */
    .list-group-item.active {
        background-color: #dee2e6 !important; /* สีพื้น active เทาอ่อน */
        color: #222 !important; /* สีตัวอักษรดำเข้ม */
        border-color: #ccc !important; /* ขอบเทาอ่อน */
    }

/* Alert ปรับสีพื้นและตัวอักษรให้เข้ากับธีม */
.alert {
    background-color: #f8f9fa !important; /* สีพื้นขาวเทาอ่อน */
    color: #222 !important; /* ตัวอักษรสีดำเข้ม */
    border: 1px solid #ccc !important; /* ขอบสีเทาอ่อน */
}

    /* Alert-heading */
    .alert .alert-heading {
        color: #111 !important; /* หัวข้อสีดำเข้ม */
    }

    /* Alert link */
    .alert a {
        color: #222 !important; /* ลิงก์ใน alert เป็นสีดำ */
        text-decoration: underline;
    }




/* Royal Tribute Marquee (พื้น gradient เทาอ่อน → ขาว, ตัวดำ, ตัวใหญ่) */
.royal-marquee-container {
    background: linear-gradient(90deg, #e6e6e6 0%, #f8f8f8 50%, #e6e6e6 100%) !important; /* ✅ พื้นหรู เทาอ่อนไล่เฉด */
    color: #000 !important;
    overflow: hidden;
    white-space: nowrap;
    padding: 1.2rem 0;
    border-bottom: 1px solid #d0d0d0;
    position: relative;
    z-index: 1500;
    font-family: "TH Sarabun New", "Prompt", sans-serif;
    font-size: 2rem; /* ✅ ตัวใหญ่อ่านง่าย */
    font-weight: 700; /* หนาชัด */
    text-align: center;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

/* ตัวข้อความเลื่อน */
.royal-marquee span {
    display: inline-block;
    padding-left: 100%;
    animation: scrollText 22s linear infinite; /* ✅ เร็วกว่าก่อนนิด */
}

/* แอนิเมชันข้อความเลื่อนจากขวาไปซ้าย */
@keyframes scrollText {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-100%);
    }
}

/* หยุดเลื่อนเมื่อ hover */
.royal-marquee-container:hover span {
    animation-play-state: paused;
}

/* Responsive ปรับขนาดบนมือถือ */
@media (max-width: 768px) {
    .royal-marquee-container {
        font-size: 1.6rem;
        padding: 1rem 0;
    }

    .royal-marquee span {
        animation-duration: 26s;
    }
}



/* Popup แบบสุภาพ */
/*.royal-popup {
    background-color: #000;*/ /* พื้นสีดำ */
    /*color: #fff;*/ /* ตัวอักษรขาว */
    /*border: 2px solid #444;*/ /* ขอบเทาเข้ม */
    /*border-radius: 10px;
    font-family: "TH Sarabun New", "Prompt", sans-serif;
    padding: 1.5rem;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.6);
}*/

    /* ปรับปุ่ม */
    /*.royal-popup .btn-secondary {
        background-color: #444;
        border-color: #444;
        color: #fff;
    }

        .royal-popup .btn-secondary:hover {
            background-color: #666;
            border-color: #666;
        }*/

/* ปรับขนาด font สำหรับ mobile */
/*@media (max-width: 768px) {
    .royal-popup {
        font-size: 1rem;
    }
}*/