html {
    font-size: 14px;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
    position: relative;
    min-height: 100%;
}

body {
    margin-bottom: 60px;
}

.form-floating > .form-control-plaintext::placeholder,
.form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder,
.form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* ==============================
   TSR Navbar - Gray Theme (03.12.2025)
   ============================== */

/* สีพื้น navbar */
.bg-tsr {
    /*background-color: #6B7280 !important;*/ /* เทากลาง */
    background-color: #4B5563 !important; /* เทากลาง #4B5563 */
}

/* สีตัวอักษรเมนู/โลโก้ */
.navbar.bg-tsr .navbar-brand,
.navbar.bg-tsr .nav-link {
    color: #ffffff !important;
}

    /* hover/focus ของเมนูปกติ */
    .navbar.bg-tsr .nav-link:hover,
    .navbar.bg-tsr .nav-link:focus {
        color: #F3F4F6 !important;
        background-color: #374151 !important; /* เทาเข้มนิดเดียวตอน hover */
        border-radius: 0.375rem;
    }

/* สำคัญ: ไม่ให้ active (เช่น Home) มีพื้นหลังดำ */
.navbar.bg-tsr .navbar-nav .nav-link.active {
    background-color: transparent !important;
    color: #ffffff !important;
    border-radius: 0;
}

/* ตอน dropdown "เปิดอยู่" (Bootstrap ใส่ .show) */
.navbar.bg-tsr .navbar-nav .show > .nav-link.dropdown-toggle,
.navbar.bg-tsr .navbar-nav .dropdown-toggle.show {
    background-color: #4B5563 !important; /* เทาเข้มกำลังดี */
    color: #ffffff !important;
    border-radius: 0.375rem;
}

/* hover/focus ของ dropdown toggle */
.navbar.bg-tsr .navbar-nav .dropdown-toggle:hover,
.navbar.bg-tsr .navbar-nav .dropdown-toggle:focus,
.navbar.bg-tsr .navbar-nav .dropdown-toggle:active {
    background-color: #374151 !important; /* เข้มขึ้นอีกนิดเวลาเอาเมาส์ชี้ */
    color: #ffffff !important;
    border-radius: 0.375rem;
}

/* Dropdown menu */
.navbar.bg-tsr .dropdown-menu {
    background-color: #111827; /* โทนเข้มให้คอนทราสต์ชัด */
    border: 1px solid rgba(255, 255, 255, 0.12);
}

/* รายการใน dropdown */
.navbar.bg-tsr .dropdown-item {
    color: #ffffff;
}

    /* hover/focus ใน dropdown */
    .navbar.bg-tsr .dropdown-item:hover,
    .navbar.bg-tsr .dropdown-item:focus {
        background-color: #1F2937;
        color: #ffffff;
    }

/* เงา navbar ให้ดูเนียนขึ้น */
.navbar.bg-tsr {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

/* ===========================
   Royal Marquee - Light Gray Theme
   (no hybrid-theme)
   =========================== */

/* พื้นหลังแถบ marquee (เทาอ่อน) */
.royal-marquee-container {
    width: 100%;
    background-color: #C7CBD1; /* เข้มกว่าเดิมเล็กน้อย (เทาอ่อนแต่ไม่จืด) */
    border-bottom: 1px solid #C0C4CC;
}

/* กล่อง marquee */
.royal-marquee {
    position: relative;
    overflow: hidden;
    white-space: nowrap;
    width: 100%;
    padding: 6px 0;
}

/* แทร็คที่วิ่ง */
.royal-marquee__track {
    display: inline-flex;
    align-items: center;
    gap: 3rem; /* ระยะห่างระหว่างข้อความซ้ำ */
    animation: royal-scroll 18s linear infinite;
    will-change: transform;
}

/* ข้อความ */
.royal-marquee__text {
    display: inline-block;
    color: #111827; /* ตัวหนังสือสีเข้ม อ่านง่ายบนพื้นเทาอ่อน */
    font-weight: 600;
    font-size: 1rem;
    padding-left: 1rem;
}

/* keyframes ให้เลื่อนต่อเนื่อง */
@keyframes royal-scroll {
    0% {
        transform: translateX(0);
    }

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