/* ============================================================
   RUS Modern Layer
   โหลดหลัง theme_constra/css/style.css และ css/custom.css
   ทุก class ใช้ prefix rus- เพื่อไม่ชนกับธีมเดิม
   ============================================================ */

:root {
    --rus-navy: #0a2c6b;
    --rus-blue: #0d47c8;
    --rus-blue-50: #eef3ff;
    --rus-gold: #f5a800;
    --rus-gold-soft: #fff4d6;
    --rus-ink: #1a1d24;
    --rus-muted: #5b6472;
    --rus-line: #e3e8f0;
    --rus-radius: 14px;
    --rus-radius-sm: 8px;
    --rus-shadow: 0 2px 8px rgba(10, 44, 107, 0.07), 0 8px 24px rgba(10, 44, 107, 0.06);
}

/* ---------- section wrapper ---------- */

.rus-section {
    padding: 2rem 0;
}

@media (min-width: 992px) {
    .rus-section {
        padding: 3.5rem 0;
    }
}

.rus-section-title {
    font-size: 1.375rem;
    line-height: 1.35;
    font-weight: 600;
    color: var(--rus-navy);
    margin: 0 0 1.25rem;
    position: relative;
    padding-left: 0.875rem;
}

.rus-section-title::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.25em;
    bottom: 0.25em;
    width: 4px;
    border-radius: 2px;
    background: var(--rus-gold);
}

@media (min-width: 992px) {
    .rus-section-title {
        font-size: 1.75rem;
    }
}

/* ---------- horizontal scroller (มือถือ) ---------- */

.rus-scroller {
    display: flex;
    gap: 0.75rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 0.5rem;
    margin-bottom: -0.5rem;
    scrollbar-width: thin;
}

.rus-scroller > * {
    scroll-snap-align: start;
    flex: 0 0 auto;
}

/* ---------- accessibility ---------- */

.rus-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

/* ============================================================
   Top bar
   ============================================================ */

.rus-topbar {
    padding: 0.5rem 0;
}

.rus-topbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.rus-logo {
    display: flex;
    align-items: center;
    min-height: 44px;
    flex: 0 1 auto;
    min-width: 0;
}

.rus-logo img {
    display: block;
    width: 100%;
    max-width: 190px;
    height: auto;
}

.rus-topbar-desktop {
    display: none;
}

.rus-topbar-actions {
    flex: 0 0 auto;
}

.rus-btn-apply {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 1.125rem;
    border-radius: 999px;
    background: var(--rus-navy);
    color: #fff;
    font-weight: 600;
    font-size: 0.9375rem;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    box-shadow: var(--rus-shadow);
    transition: background 0.2s ease, transform 0.2s ease;
}

.rus-btn-apply:hover,
.rus-btn-apply:focus {
    background: var(--rus-blue);
    color: #fff;
    text-decoration: none;
}

@media (min-width: 992px) {
    .rus-topbar {
        padding: 0.75rem 0;
    }

    .rus-logo img {
        max-width: 340px;
    }

    .rus-topbar-desktop {
        display: flex;
        align-items: center;
        gap: 1.5rem;
        margin-left: auto;
    }
}

/* ---------- bar รอง (.rus-utilbar): ลิงก์บริการ + ค้นหา เฉพาะจอใหญ่ ---------- */

.rus-utilbar {
    display: none;
    background: var(--rus-navy);
}

@media (min-width: 992px) {
    .rus-utilbar {
        display: block;
    }
}

.rus-utilbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 44px;
}

/* ลิงก์บริการเป็นปุ่มแคปซูลสีขาวบนแถบกรมท่า (ไม่ใช้สีทองเพราะซ้ำกับ topbar เหลืองด้านบนจนไม่เด่น) */
/* กลุ่มลิงก์ฝั่งซ้าย: เพิ่มลิงก์กี่อันก็เรียงต่อกัน ตัดบรรทัดได้ถ้าจอแคบ */
.rus-utilbar-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    padding: 6px 0;
}

.rus-topbar-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 32px;
    padding: 0 1rem;
    border-radius: 999px;
    background: #fff;
    color: var(--rus-navy);
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.rus-topbar-link i {
    color: var(--rus-gold);
}

.rus-topbar-link .rus-topbar-link-ext {
    color: var(--rus-navy);
    font-size: 0.6875rem;
    opacity: 0.6;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.rus-topbar-link:hover,
.rus-topbar-link:focus {
    background: var(--rus-gold);
    color: var(--rus-navy);
    text-decoration: none;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}

.rus-topbar-link:hover i:not(.rus-topbar-link-ext),
.rus-topbar-link:focus i:not(.rus-topbar-link-ext) {
    color: var(--rus-navy);
}

.rus-topbar-link:hover .rus-topbar-link-ext,
.rus-topbar-link:focus .rus-topbar-link-ext {
    opacity: 1;
    transform: translate(2px, -2px);
}

@media (hover: hover) {
    .rus-topbar-link:hover {
        transform: translateY(-1px);
    }
}

.rus-topbar-link:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .rus-topbar-link,
    .rus-topbar-link .rus-topbar-link-ext {
        transition: none;
    }

    .rus-topbar-link:hover,
    .rus-topbar-link:hover .rus-topbar-link-ext {
        transform: none;
    }
}

.rus-utilbar .rus-search {
    border-color: transparent;
}

.rus-utilbar .rus-search-input,
.rus-utilbar .rus-search-btn {
    height: 32px;
}

.rus-utilbar .rus-search-input {
    width: 220px;
    font-size: 0.875rem;
}

/* ลิงก์เดียวกันใน drawer มือถือ */
.rus-drawer-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    min-height: 44px;
    margin-bottom: 1rem;
    border: 1px solid var(--rus-navy);
    border-radius: var(--rus-radius-sm);
    color: var(--rus-navy);
    font-weight: 600;
    text-decoration: none;
}

.rus-drawer-link i {
    color: var(--rus-gold);
}

.rus-drawer-link:hover,
.rus-drawer-link:focus {
    background: var(--rus-navy);
    color: #fff;
    text-decoration: none;
}

/* ---------- search ---------- */

.rus-search {
    display: flex;
    align-items: center;
    background: #fff;
    border: 1px solid var(--rus-line);
    border-radius: 999px;
    overflow: hidden;
}

.rus-search-input {
    border: 0;
    outline: 0;
    padding: 0 0.875rem;
    height: 40px;
    width: 150px;
    font-size: 0.9375rem;
    color: var(--rus-ink);
    background: transparent;
}

.rus-search-btn {
    border: 0;
    background: var(--rus-blue);
    color: #fff;
    width: 44px;
    height: 40px;
    cursor: pointer;
}

/* ---------- language + chatbot ---------- */

.rus-lang {
    display: flex;
    align-items: center;
    gap: 0;
}

.rus-lang a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
}

.rus-lang img {
    width: 26px;
    height: auto;
    border-radius: 3px;
}

.rus-chatbot img {
    width: 84px;
    height: auto;
}

/* ============================================================
   Navigation
   ============================================================ */

.rus-nav .container {
    position: relative;
}

/* .rus-nav-toggle ใช้ตัวหนังสือสีขาว (#fff) ต้องมีพื้นหลังทึบรองรับ
   ไม่เช่นนั้นคำว่า "เมนู" จะมองไม่เห็นบนพื้นขาว (พบจากการตรวจ Task 10) */
.rus-nav {
    background: var(--rus-navy);
}

@media (min-width: 992px) {
    .rus-nav {
        background: transparent;
    }
}

.rus-drawer-checkbox {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

/* ---------- ปุ่มแฮมเบอร์เกอร์ ---------- */

.rus-nav-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 44px;
    padding: 0 0.75rem;
    margin: 0;
    cursor: pointer;
    color: #fff;
    font-weight: 600;
    user-select: none;
}

.rus-drawer-checkbox:focus-visible + .rus-nav-toggle {
    outline: 2px solid #fff;
    outline-offset: 2px;
    border-radius: 4px;
}

.rus-nav-toggle-bar {
    display: block;
    width: 20px;
    height: 2px;
    background: currentColor;
    margin: 2px 0;
}

.rus-nav-toggle-bar + .rus-nav-toggle-bar {
    margin-top: -1px;
}

.rus-nav-toggle-text {
    margin-left: 0.25rem;
    font-size: 0.9375rem;
}

.rus-nav-desktop {
    display: none;
}

@media (min-width: 992px) {
    .rus-nav-toggle {
        display: none;
    }

    .rus-nav-desktop {
        display: block;
    }

    .rus-drawer-checkbox {
        display: none;
    }
}

/* ---------- drawer ---------- */

.rus-drawer {
    position: fixed;
    inset: 0;
    z-index: 1080;
    visibility: hidden;
    pointer-events: none;
}

.rus-drawer-backdrop {
    position: absolute;
    inset: 0;
    margin: 0;
    background: rgba(10, 44, 107, 0.45);
    opacity: 0;
    transition: opacity 0.25s ease;
}

.rus-drawer-panel {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: min(86vw, 340px);
    background: #fff;
    box-shadow: var(--rus-shadow);
    padding: 1rem;
    overflow-y: auto;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
}

.rus-drawer-checkbox:checked ~ .rus-drawer {
    visibility: visible;
    pointer-events: auto;
}

.rus-drawer-checkbox:checked ~ .rus-drawer .rus-drawer-backdrop {
    opacity: 1;
}

.rus-drawer-checkbox:checked ~ .rus-drawer .rus-drawer-panel {
    transform: translateX(0);
}

@media (min-width: 992px) {
    .rus-drawer {
        display: none;
    }
}

/* ---------- ส่วนประกอบใน drawer ---------- */

.rus-drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--rus-line);
}

.rus-drawer-title {
    font-weight: 600;
    color: var(--rus-navy);
}

.rus-drawer-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: 0;
    font-size: 1.75rem;
    line-height: 1;
    color: var(--rus-muted);
    cursor: pointer;
}

.rus-drawer-search {
    display: flex;
    margin: 0.875rem 0;
    border: 1px solid var(--rus-line);
    border-radius: 999px;
    overflow: hidden;
}

.rus-drawer-search input {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    outline: 0;
    height: 44px;
    padding: 0 0.875rem;
    font-size: 1rem;
}

.rus-drawer-search button {
    flex: 0 0 auto;
    border: 0;
    width: 48px;
    background: var(--rus-blue);
    color: #fff;
    cursor: pointer;
}

.rus-drawer-apply {
    display: flex;
    width: 100%;
    margin-bottom: 1rem;
}

.rus-drawer-list,
.rus-drawer-list ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.rus-drawer-list a,
.rus-drawer-list summary {
    display: block;
    padding: 0.75rem 0.5rem;
    min-height: 44px;
    color: var(--rus-ink);
    font-size: 1rem;
    text-decoration: none;
    border-bottom: 1px solid var(--rus-line);
    cursor: pointer;
}

.rus-drawer-list summary {
    font-weight: 600;
    list-style: none;
    position: relative;
    padding-right: 2rem;
}

.rus-drawer-list summary::-webkit-details-marker {
    display: none;
}

.rus-drawer-list summary::after {
    content: "\203A";
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%) rotate(90deg);
    transition: transform 0.2s ease;
    color: var(--rus-muted);
    font-size: 1.25rem;
}

.rus-drawer-list details[open] > summary::after {
    transform: translateY(-50%) rotate(-90deg);
}

.rus-drawer-list details ul a {
    padding-left: 1.5rem;
    color: var(--rus-muted);
    font-size: 0.9375rem;
}

.rus-drawer-list details details ul a {
    padding-left: 2.5rem;
}

.rus-drawer-lang {
    display: flex;
    gap: 0.5rem;
    margin: 1rem 0;
}

.rus-drawer-lang a {
    flex: 1 1 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    min-height: 44px;
    border: 1px solid var(--rus-line);
    border-radius: var(--rus-radius-sm);
    color: var(--rus-ink);
    font-size: 0.875rem;
    text-decoration: none;
}

.rus-drawer-lang img {
    width: 20px;
    height: auto;
}

.rus-drawer-line {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 44px;
    border-radius: var(--rus-radius-sm);
    background: #06c755;
    color: #fff;
    font-weight: 600;
    text-decoration: none;
}

.rus-drawer-line:hover,
.rus-drawer-line:focus {
    color: #fff;
    text-decoration: none;
}

/* ============================================================
   Quick links
   ============================================================ */

.rus-quicklinks-section {
    position: relative;
    z-index: 2;
    margin-top: -1.5rem;
    padding-bottom: 1rem;
}

@media (min-width: 992px) {
    .rus-quicklinks-section {
        margin-top: -2.5rem;
        padding-bottom: 1.5rem;
    }
}

.rus-quicklinks {
    background: #fff;
    border-radius: var(--rus-radius);
    box-shadow: var(--rus-shadow);
    padding: 0.875rem;
}

@media (min-width: 992px) {
    .rus-quicklinks {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
        gap: 0.5rem;
        overflow: visible;
        padding: 1.125rem;
    }
}

.rus-quicklink {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;
    width: 96px;
    min-height: 44px;
    padding: 0.625rem 0.375rem;
    border-radius: var(--rus-radius-sm);
    color: var(--rus-ink);
    text-align: center;
    text-decoration: none;
    transition: background 0.2s ease, transform 0.2s ease;
}

.rus-quicklink:hover,
.rus-quicklink:focus {
    background: var(--rus-blue-50);
    color: var(--rus-blue);
    text-decoration: none;
}

@media (min-width: 992px) {
    .rus-quicklink {
        width: auto;
    }

    .rus-quicklink:hover {
        transform: translateY(-2px);
    }
}

.rus-quicklink-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--rus-gold-soft);
    overflow: hidden;
}

.rus-quicklink-icon img {
    width: 30px;
    height: 30px;
    object-fit: contain;
}

.rus-quicklink-label {
    font-size: 0.8125rem;
    line-height: 1.3;
    font-weight: 500;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ============================================================
   Banner carousel
   ============================================================ */

.rus-carousel .carousel-item img {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 7;
    object-fit: cover;
}

.rus-carousel .carousel-indicators {
    margin-bottom: 2.25rem;
}

.rus-carousel .carousel-indicators li {
    position: relative;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 0;
    background: rgba(255, 255, 255, 0.55);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.rus-carousel .carousel-indicators li.active {
    background: var(--rus-gold);
}

/* พื้นที่แตะจริงกว้าง 44px โดยไม่ทำให้จุดใหญ่ตาม */
.rus-carousel .carousel-indicators li::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 44px;
    height: 44px;
    transform: translate(-50%, -50%);
}

.rus-carousel .carousel-control-prev,
.rus-carousel .carousel-control-next {
    width: 12%;
}

@media (max-width: 575.98px) {
    .rus-carousel .carousel-control-prev,
    .rus-carousel .carousel-control-next {
        display: none;
    }

    .rus-carousel .carousel-item img {
        aspect-ratio: 4 / 3;
    }
}

@media (min-width: 992px) {
    .rus-carousel .carousel-indicators {
        margin-bottom: 4rem;
    }
}


/* ============================================================
   R.U.S. motto + การ์ดคณะ
   ============================================================ */

.rus-rus-motto {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem 1.75rem;
    margin: 0 0 1.75rem;
    font-size: 1.0625rem;
    color: var(--rus-ink);
}

.rus-rus-motto b {
    font-size: 1.875rem;
    line-height: 1;
    color: var(--rus-blue);
}

.rus-rus-motto span:nth-child(2) b,
.rus-rus-motto span:nth-child(3) b {
    color: var(--rus-gold);
}

@media (min-width: 768px) {
    .rus-rus-motto {
        font-size: 1.375rem;
        gap: 0.75rem 3rem;
    }

    .rus-rus-motto b {
        font-size: 2.75rem;
    }
}

.rus-faculty-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

@media (min-width: 768px) {
    .rus-faculty-layout {
        grid-template-columns: repeat(2, 1fr);
    }

    /* รูปยังอยู่ท้ายสุด แต่กินเต็มความกว้างแทนที่จะเหลือครึ่งเดียว */
    .rus-faculty-photo {
        grid-column: 1 / -1;
    }
}

/* จอใหญ่: คงโครงเดิม คณะซ้าย 3 / รูปนักศึกษากลาง / คณะขวา 3 */
@media (min-width: 992px) {
    .rus-faculty-layout {
        grid-template-columns: 1fr minmax(0, 1fr) 1fr;
        gap: 1.5rem;
        align-items: center;
    }

    .rus-faculty-photo {
        order: 2;
        grid-column: auto;
    }

    .rus-faculty-col-right {
        order: 3;
    }
}

.rus-faculty-col {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* รายชื่อคณะ: ไม่มีกรอบ/พื้นหลัง เน้นโลโก้ใหญ่กับชื่อตัวหนาสีกรมท่า */
.rus-faculty-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex: 1 1 auto;
    padding: 0.25rem 0;
    color: var(--rus-ink);
    text-decoration: none;
}

.rus-faculty-item:hover,
.rus-faculty-item:focus {
    color: var(--rus-ink);
    text-decoration: none;
}

.rus-faculty-item:focus-visible {
    outline: 2px solid var(--rus-navy);
    outline-offset: 4px;
    border-radius: var(--rus-radius-sm);
}

/* โลโก้คณะ: วงกลมขาวมีเงานุ่ม ตอน hover ลอยขึ้นและมีวงแหวนสีทอง */
.rus-faculty-item img {
    flex: 0 0 64px;
    width: 64px;
    height: 64px;
    box-sizing: border-box;
    padding: 9px;
    object-fit: contain;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 0 1px rgba(10, 44, 107, 0.06), 0 4px 14px rgba(10, 44, 107, 0.14);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
}

.rus-faculty-text {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

/* ชื่อคณะ: เส้นใต้สีทองค่อยๆ ขีดจากซ้ายไปขวาตอน hover */
.rus-faculty-name {
    align-self: flex-start;
    padding-bottom: 3px;
    font-weight: 700;
    font-size: 1.0625rem;
    line-height: 1.35;
    color: var(--rus-navy);
    background: linear-gradient(var(--rus-gold), var(--rus-gold)) left bottom / 0 2px no-repeat;
    transition: color 0.2s ease, background-size 0.35s ease;
}

.rus-faculty-en {
    font-size: 0.8125rem;
    line-height: 1.4;
    color: var(--rus-muted);
    transition: color 0.2s ease;
}

.rus-faculty-item:hover .rus-faculty-name,
.rus-faculty-item:focus-visible .rus-faculty-name {
    color: var(--rus-blue);
    background-size: 100% 2px;
}

.rus-faculty-item:hover .rus-faculty-en,
.rus-faculty-item:focus-visible .rus-faculty-en {
    color: var(--rus-ink);
}

.rus-faculty-item:focus-visible img {
    box-shadow: 0 0 0 3px var(--rus-gold), 0 8px 20px rgba(10, 44, 107, 0.22);
}

@media (hover: hover) {
    .rus-faculty-item:hover img {
        transform: translateY(-3px) scale(1.06);
        box-shadow: 0 0 0 3px var(--rus-gold), 0 10px 22px rgba(10, 44, 107, 0.22);
    }
}

@media (prefers-reduced-motion: reduce) {
    .rus-faculty-item img,
    .rus-faculty-name,
    .rus-faculty-en {
        transition: none;
    }

    .rus-faculty-item:hover img {
        transform: none;
    }
}

@media (min-width: 992px) {
    .rus-faculty-col {
        gap: 2rem;
    }

    .rus-faculty-item {
        gap: 1.25rem;
    }

    .rus-faculty-item img {
        flex-basis: 84px;
        width: 84px;
        height: 84px;
        padding: 12px;
    }

    .rus-faculty-name {
        font-size: 1.1875rem;
    }

    /* สมมาตรรอบรูปนักศึกษา: ฝั่งซ้ายโลโก้ชิดรูปทางขวา ฝั่งขวาโลโก้ชิดรูปทางซ้าย */
    .rus-faculty-col:not(.rus-faculty-col-right) .rus-faculty-item {
        flex-direction: row-reverse;
        text-align: right;
    }

    .rus-faculty-col:not(.rus-faculty-col-right) .rus-faculty-name {
        align-self: flex-end;
        background-position: right bottom;
    }
}

/* รูปนักศึกษา: บนมือถืออยู่ท้ายสุด ไม่คั่นกลางรายชื่อคณะ
   ไฟล์เป็นภาพแนวตั้ง 717x1090 จึงคุมความสูงไว้ไม่ให้ดันหน้ายาวเกิน */
.rus-faculty-photo {
    display: flex;
    justify-content: center;
}

.rus-faculty-photo img {
    display: block;
    width: 100%;
    max-width: 260px;
    height: auto;
    /* จองพื้นที่ตามสัดส่วนไฟล์จริง กันหน้ากระตุกตอน lazy-load */
    aspect-ratio: 717 / 1090;
    object-fit: contain;
    border-radius: var(--rus-radius);
}

@media (min-width: 992px) {
    .rus-faculty-photo img {
        max-width: 360px;
    }
}

/* section คณะ: ตัด padding ล่าง ให้ขอบล่างรูปชน section ถัดไป */
.rus-section.rus-section-flush-bottom {
    padding-bottom: 0;
}

.rus-section-flush-bottom .rus-faculty-photo {
    align-self: end;
}

.rus-section-flush-bottom .rus-faculty-photo img {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

/* ============================================================
   Chips หมวดหมู่
   ============================================================ */

.rus-chips {
    margin-bottom: 1.25rem;
}

@media (min-width: 992px) {
    .rus-chips {
        flex-wrap: wrap;
        overflow: visible;
    }
}

.rus-chip {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 1rem;
    border-radius: 999px;
    border: 1px solid var(--rus-blue);
    background: #fff;
    color: var(--rus-blue);
    font-size: 0.9375rem;
    font-weight: 500;
    white-space: nowrap;
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease;
}

.rus-chip:hover,
.rus-chip:focus,
.rus-chip.active {
    background: var(--rus-blue);
    color: #fff;
    text-decoration: none;
}

.rus-chip:focus-visible {
    outline: 2px solid var(--rus-navy);
    outline-offset: 2px;
}

/* ชิปที่ใช้เป็นแท็บ (Bootstrap .nav): มือถือเลื่อนแนวนอน ไม่ตัดบรรทัด, จอใหญ่ตัดบรรทัดได้ */
.rus-chips.nav {
    flex-wrap: nowrap;
    padding-left: 0;
}

@media (min-width: 992px) {
    .rus-chips.nav {
        flex-wrap: wrap;
    }
}

/* ============================================================
   การ์ดข่าว
   ============================================================ */

.rus-news-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

@media (min-width: 576px) {
    .rus-news-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 992px) {
    .rus-news-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ดึงข่าวมา 9 ใบต่อแท็บ แต่แสดงเท่าที่ลงตัวกับจำนวนคอลัมน์ ไม่ให้แถวสุดท้ายโหว่
   มือถือ 1 คอลัมน์ = 6 ใบ, แท็บเล็ต 2 คอลัมน์ = 8 ใบ, จอใหญ่ 3 คอลัมน์ = 9 ใบ */
@media (max-width: 575px) {
    .rus-news-grid > .rus-news-card:nth-child(n + 7) {
        display: none;
    }
}

@media (min-width: 576px) and (max-width: 991px) {
    .rus-news-grid > .rus-news-card:nth-child(n + 9) {
        display: none;
    }
}

.rus-news-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--rus-line);
    border-radius: var(--rus-radius);
    overflow: hidden;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

@media (hover: hover) {
    .rus-news-card:hover {
        transform: translateY(-2px);
        box-shadow: var(--rus-shadow);
    }
}

.rus-news-link {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    color: inherit;
    text-decoration: none;
}

.rus-news-link:hover,
.rus-news-link:focus {
    color: inherit;
    text-decoration: none;
}

.rus-news-thumb {
    display: block;
    background: var(--rus-blue-50);
}

.rus-news-thumb img {
    display: block;
    width: 100%;
    /* รูปข่าวส่วนใหญ่เป็น 3:2 แสดงเต็มใบไม่ตัดขอบ ใบที่สัดส่วนต่างเติมด้วยรูปเบลอ (.rus-blurfill) */
    aspect-ratio: 3 / 2;
    object-fit: contain;
}

/* ---------- เติมพื้นที่ว่างข้างรูปด้วยรูปเดียวกันแบบเบลอ ---------- */

.rus-blurfill {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

.rus-blurfill::before {
    content: "";
    position: absolute;
    inset: -16px;
    z-index: -1;
    background: var(--rus-tile-bg, none) center / cover no-repeat;
    filter: blur(14px) saturate(1.1);
}

/* ประชาสัมพันธ์ (pr-shuffle): รูปโปสเตอร์ส่วนใหญ่ 1:1 กรอบเท่ากันทุกใบ */
.rus-pr-thumb {
    display: block;
}

.rus-pr-thumb img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: contain;
}

.rus-news-body {
    display: block;
    flex: 1 1 auto;
    padding: 0.875rem;
}

.rus-news-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.45;
    color: var(--rus-navy);
}

.rus-news-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    flex-wrap: wrap;
    padding: 0.625rem 0.875rem;
    border-top: 1px solid var(--rus-line);
    font-size: 0.75rem;
    color: var(--rus-muted);
}

.rus-news-badge {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0.125rem 0.625rem;
    border-radius: 999px;
    background: var(--rus-gold-soft);
    color: #7a5200;
    font-weight: 600;
    text-decoration: none;
}

.rus-news-badge:hover,
.rus-news-badge:focus {
    background: var(--rus-gold);
    color: var(--rus-ink);
    text-decoration: none;
}

.rus-news-stats i {
    margin-left: 0.375rem;
}

/* ============================================================
   YouTube facade
   ============================================================ */

.rus-video-facade {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    margin-bottom: 0.5rem;
    border-radius: var(--rus-radius-sm);
    overflow: hidden;
    background: #000;
    cursor: pointer;
}

.rus-video-facade img,
.rus-video-facade iframe {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: 0;
}

.rus-video-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 64px;
    height: 44px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.7);
    transition: background 0.2s ease;
}

.rus-video-play::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-40%, -50%);
    border-style: solid;
    border-width: 9px 0 9px 15px;
    border-color: transparent transparent transparent #fff;
}

.rus-video-facade:hover .rus-video-play {
    background: #ff0000;
}

.rus-video-playing {
    cursor: default;
}

/* ============================================================
   Facts counter
   ============================================================ */

.rus-facts {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem 0.75rem;
    margin-bottom: 1.5rem;
}

@media (min-width: 768px) {
    .rus-facts {
        grid-template-columns: repeat(5, 1fr);
        gap: 1.5rem;
    }
}

.rus-fact {
    text-align: center;
}

.rus-fact .ts-facts-num {
    font-size: 1.875rem;
    font-weight: 700;
    margin: 0.5rem 0 0.25rem;
    color: #fff;
}

.rus-fact .ts-facts-title {
    font-size: 0.875rem;
    line-height: 1.35;
    margin: 0;
    color: rgba(255, 255, 255, 0.85);
}

@media (min-width: 768px) {
    .rus-fact .ts-facts-num {
        font-size: 2.5rem;
    }

    .rus-fact .ts-facts-title {
        font-size: 1rem;
    }
}

/* ============================================================
   กล่องสืบค้นห้องสมุด
   ============================================================ */

.rus-library .card {
    border: 1px solid var(--rus-line);
    border-radius: var(--rus-radius);
}

.rus-library iframe,
.rus-library img {
    max-width: 100%;
}

/* ============================================================
   ลิงก์ท้ายหน้า
   ============================================================ */

.rus-links-section {
    padding: 1.75rem 0;
    background: var(--rus-navy);
}

.rus-links-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
}

@media (min-width: 576px) {
    .rus-links-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (min-width: 992px) {
    .rus-links-grid {
        grid-template-columns: repeat(7, 1fr);
    }
}

.rus-link-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 96px;
    padding: 0.875rem 0.5rem;
    border-radius: var(--rus-radius-sm);
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    font-size: 0.8125rem;
    line-height: 1.3;
    font-weight: 500;
    text-align: center;
    text-decoration: none;
    transition: background 0.2s ease;
}

.rus-link-tile:hover,
.rus-link-tile:focus {
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
    text-decoration: none;
}

.rus-link-tile i {
    font-size: 1.75rem;
    color: var(--rus-gold);
}

/* ---------- section ระบบสืบค้น + ลิงก์ที่เกี่ยวข้อง: เว้นขอบข้าง และให้สองฝั่งสูงเท่ากัน ---------- */

.rus-library > .container {
    padding-left: clamp(1rem, 4vw, 4rem);
    padding-right: clamp(1rem, 4vw, 4rem);
}

@media (min-width: 992px) {
    .rus-library .row {
        align-items: stretch;
    }

    .rus-library-search {
        display: flex;
        flex-direction: column;
    }

    .rus-library-search > .card {
        flex: 1 1 auto;
    }

    .rus-library-search > .card > .card-body {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
}

/* ---------- แบนเนอร์ลิงก์ที่เกี่ยวข้อง (grid คู่กับระบบสืบค้น) ---------- */

.rus-banner-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

@media (min-width: 992px) {
    .rus-banner-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.rus-banner-tile {
    display: block;
    overflow: hidden;
    border: 1px solid var(--rus-line);
    border-radius: var(--rus-radius-sm);
    background: #fff;
    box-shadow: var(--rus-shadow);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* รูปสัดส่วนไม่เท่ากัน: แสดงเต็มใบไม่ตัดตัวหนังสือ ส่วนที่เหลือเป็นขอบ
   เติมด้วยรูปเดียวกันแบบเบลอ (--rus-tile-bg ตั้งใน inline style) แทนขอบขาว */
.rus-banner-tile {
    position: relative;
    isolation: isolate;
}

.rus-banner-tile::before {
    content: "";
    position: absolute;
    inset: -16px;
    z-index: -1;
    background: var(--rus-tile-bg, none) center / cover no-repeat;
    filter: blur(14px) saturate(1.1);
}

.rus-banner-tile img {
    display: block;
    width: 100%;
    height: auto;
    /* แบนเนอร์ส่วนใหญ่เป็นแถบกว้างสัดส่วน 700x160 กำหนดกรอบให้เท่ากันทุกใบ */
    aspect-ratio: 35 / 8;
    object-fit: contain;
}

.rus-banner-tile:hover,
.rus-banner-tile:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(10, 44, 107, 0.12), 0 14px 32px rgba(10, 44, 107, 0.12);
}

@media (prefers-reduced-motion: reduce) {
    .rus-banner-tile {
        transition: none;
    }

    .rus-banner-tile:hover,
    .rus-banner-tile:focus-visible {
        transform: none;
    }
}

/* ============================================================
   Popup ประกาศ
   รูปเต็มกรอบ ขอบมน ปุ่มปิดลอยมุมขวาบน แถบปุ่มตกลงอยู่ใต้รูป
   ============================================================ */

.rus-modal .modal-dialog {
    max-width: 560px;
    margin: 1rem;
}

@media (min-width: 576px) {
    .rus-modal .modal-dialog {
        margin: 1.75rem auto;
    }
}

.rus-modal .modal-content {
    position: relative;
    border: 0;
    border-radius: var(--rus-radius);
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(10, 44, 107, 0.35);
}

.rus-modal-image {
    display: block;
    width: 100%;
    height: auto;
}

.rus-modal-close {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: 1.75rem;
    line-height: 1;
    cursor: pointer;
    transition: background 0.2s ease;
}

.rus-modal-close:hover,
.rus-modal-close:focus {
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
    outline: 2px solid #fff;
    outline-offset: -6px;
}

.rus-modal-actions {
    padding: 0.875rem;
    background: #fff;
    text-align: center;
}

.rus-modal-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    min-width: 150px;
    padding: 0 1.5rem;
    border: 0;
    border-radius: 999px;
    background: var(--rus-navy);
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease;
}

.rus-modal-btn:hover,
.rus-modal-btn:focus {
    background: var(--rus-blue);
    color: #fff;
}

/* ============================================================
   แถบ "ก้าวสู่มหาวิทยาลัย..." + ลิงก์บริการ (.rus-cta)
   ============================================================ */

.rus-cta {
    position: relative;
    z-index: 1;
    padding-bottom: 1.5rem;
}

.rus-cta .action-style-box {
    padding: 1.25rem;
    border-radius: var(--rus-radius);
    background: linear-gradient(135deg, #ffc933 0%, #ffb600 55%, #f5a800 100%);
    box-shadow: var(--rus-shadow);
}

@media (min-width: 992px) {
    .rus-cta .action-style-box {
        padding: 2rem;
    }
}

/* ตัวอักษรขาวบนพื้นเหลืองคอนทราสต์ต่ำ จึงตัดขอบกรมท่ารอบตัวอักษรให้เด่น
   ใช้ text-shadow เป็นขอบสำรองสำหรับเบราว์เซอร์ที่ไม่รองรับ paint-order */
.rus-cta .action-title {
    color: #fff;
    font-size: 1.125rem;
    font-weight: 800;
    line-height: 1.5;
    text-transform: none;
    text-shadow:
        -1px -1px 0 var(--rus-navy), 1px -1px 0 var(--rus-navy),
        -1px 1px 0 var(--rus-navy), 1px 1px 0 var(--rus-navy),
        0 -1px 0 var(--rus-navy), 0 1px 0 var(--rus-navy),
        -1px 0 0 var(--rus-navy), 1px 0 0 var(--rus-navy),
        0 3px 8px rgba(10, 44, 107, 0.3);
}

/* เส้นขอบวาดอยู่หลังเนื้อตัวอักษร ไม่กินเนื้อสระ/วรรณยุกต์ไทย */
@supports (paint-order: stroke fill) {
    .rus-cta .action-title {
        -webkit-text-stroke: 3px var(--rus-navy);
        paint-order: stroke fill;
        stroke-linejoin: round;
        text-shadow: 0 4px 10px rgba(10, 44, 107, 0.35);
    }
}

@media (min-width: 992px) {
    .rus-cta .action-title {
        font-size: 1.5rem;
    }

    @supports (paint-order: stroke fill) {
        .rus-cta .action-title {
            -webkit-text-stroke-width: 4px;
        }
    }
}

.rus-cta .call-to-action-btn img {
    display: inline-block;
    max-width: 100%;
    height: auto;
    padding: 0;
    border: 0;
    border-radius: var(--rus-radius);
    box-shadow: 0 6px 18px rgba(10, 44, 107, 0.25);
}

.rus-cta .sidebar ul.service-menu {
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.rus-cta .sidebar ul.service-menu li {
    margin: 0;
}

.rus-cta .sidebar ul.service-menu li a {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 44px;
    margin: 0;
    padding: 0.625rem 0.875rem;
    border-radius: var(--rus-radius-sm);
    background: #fff;
    color: var(--rus-navy);
    font-size: 0.9375rem;
    line-height: 1.4;
    text-align: left;
    text-decoration: none;
    box-shadow: 0 1px 3px rgba(10, 44, 107, 0.12);
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.rus-cta .sidebar ul.service-menu li a::after {
    content: "\203A";
    margin-left: auto;
    padding-left: 0.5rem;
    font-size: 1.25rem;
    line-height: 1;
    color: var(--rus-gold);
}

.rus-cta .sidebar ul.service-menu li a:hover,
.rus-cta .sidebar ul.service-menu li a:focus-visible {
    background: var(--rus-navy);
    color: #fff;
    transform: translateX(2px);
}

.rus-cta .sidebar ul.service-menu li a:focus-visible {
    outline: 2px solid var(--rus-navy);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .rus-cta .sidebar ul.service-menu li a {
        transition: none;
    }

    .rus-cta .sidebar ul.service-menu li a:hover,
    .rus-cta .sidebar ul.service-menu li a:focus-visible {
        transform: none;
    }
}

/* ============================================================
   ประชาสัมพันธ์ (#project-area / livewire main.pr-shuffle)
   ============================================================ */

#project-area {
    padding: 2.5rem 0;
}

#project-area .section-sub-title {
    position: relative;
    margin: 0 0 1.5rem !important;
    padding-bottom: 0.875rem;
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--rus-navy);
}

#project-area .section-sub-title::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 56px;
    height: 4px;
    border-radius: 2px;
    background: var(--rus-gold);
    transform: translateX(-50%);
}

@media (min-width: 992px) {
    #project-area {
        padding: 3.5rem 0;
    }

    #project-area .section-sub-title {
        font-size: 2.25rem;
    }
}

/* แท็บหมวด: ชิปทรงแคปซูล เหมือนแท็บ/ชิปส่วนอื่นของหน้า */
.rus-pr .rus-pr-tabs {
    flex-wrap: nowrap;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    padding-bottom: 0.25rem;
    overflow-x: auto;
    border-bottom: 0;
    scrollbar-width: thin;
}

@media (max-width: 767px) {
    .rus-pr .rus-pr-tabs {
        justify-content: flex-start !important;
    }
}

@media (min-width: 768px) {
    .rus-pr .rus-pr-tabs {
        flex-wrap: wrap;
        overflow: visible;
    }
}

.rus-pr .rus-pr-tabs .nav-item {
    flex: 0 0 auto;
    margin: 0;
    cursor: pointer;
}

.rus-pr .rus-pr-tabs .nav-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin: 0;
    padding: 0 1rem;
    border: 1px solid var(--rus-blue);
    border-radius: 999px;
    background: #fff;
    color: var(--rus-blue);
    font-size: 0.9375rem;
    font-weight: 500;
    white-space: nowrap;
    transition: background 0.2s ease, color 0.2s ease;
}

.rus-pr .rus-pr-tabs .nav-link:hover,
.rus-pr .rus-pr-tabs .nav-link:focus,
.rus-pr .rus-pr-tabs .nav-link.active {
    border-color: var(--rus-blue);
    background: var(--rus-blue);
    color: #fff;
}

.rus-pr .rus-pr-tabs .nav-link:focus-visible {
    outline: 2px solid var(--rus-navy);
    outline-offset: 2px;
}

/* การ์ดรูป: มุมโค้ง เงานุ่ม hover แล้วรูปซูมและมีชื่อ/หมวดเลื่อนขึ้นจากด้านล่าง */
.rus-pr .shuffle-wrapper {
    margin-left: -0.5rem;
    margin-right: -0.5rem;
}

.rus-pr .shuffle-item {
    padding: 0.5rem;
}

.rus-pr .project-img-container {
    border-radius: var(--rus-radius);
    background: #fff;
    box-shadow: var(--rus-shadow);
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.rus-pr .project-img-container:hover {
    box-shadow: 0 4px 12px rgba(10, 44, 107, 0.12), 0 16px 36px rgba(10, 44, 107, 0.16);
}

@media (hover: hover) {
    .rus-pr .project-img-container:hover {
        transform: translateY(-3px);
    }
}

.rus-pr .shuffle-item .project-img-container:hover img {
    transform: scale(1.06);
}

/* ม่านไล่สีกรมท่าจากล่างขึ้นบน แทนพื้นดำทึบทั้งใบ และไม่บังการคลิกรูป */
.rus-pr .shuffle-item .project-img-container:after {
    background: linear-gradient(to top, rgba(10, 44, 107, 0.92) 0%, rgba(10, 44, 107, 0.55) 50%, rgba(10, 44, 107, 0) 100%);
    pointer-events: none;
}

.rus-pr .shuffle-item .project-img-container .project-item-info {
    top: auto;
    margin-top: 0;
    padding: 0 1rem 1rem;
}

.rus-pr .shuffle-item .project-img-container .project-item-info-content {
    text-align: left;
}

.rus-pr .shuffle-item .project-item-title {
    display: -webkit-box;
    margin: 0 0 0.5rem;
    overflow: hidden;
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.45;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.rus-pr .shuffle-item .project-item-title a {
    color: #fff;
    text-decoration: none;
}

.rus-pr .shuffle-item .project-item-title a:hover,
.rus-pr .shuffle-item .project-item-title a:focus {
    color: var(--rus-gold);
}

.rus-pr .shuffle-item .project-cat {
    margin: 0;
    padding: 0.125rem 0.625rem;
    border-radius: 999px;
    background: var(--rus-gold);
    color: var(--rus-ink);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: none;
}

/* ปุ่มขยายรูปมุมขวาบน: วงกลมสีทอง */
.rus-pr .shuffle-item .project-img-container .gallery-popup .gallery-icon {
    top: 0.625rem;
    right: 0.625rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: 50%;
    background: var(--rus-gold);
    color: var(--rus-ink);
}

/* จอสัมผัสไม่มี hover: แสดงชื่อ/หมวดไว้ตลอด และไม่ซ่อนม่านไล่สี */
@media (hover: none) {
    .rus-pr .shuffle-item .project-img-container:after {
        opacity: 1;
        background: linear-gradient(to top, rgba(10, 44, 107, 0.9) 0%, rgba(10, 44, 107, 0) 65%);
    }

    .rus-pr .shuffle-item .project-img-container .project-item-info-content {
        opacity: 1;
        transform: none;
    }

    .rus-pr .shuffle-item .project-img-container .gallery-popup .gallery-icon {
        opacity: 1;
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .rus-pr .project-img-container,
    .rus-pr .rus-pr-tabs .nav-link {
        transition: none;
    }

    .rus-pr .project-img-container:hover {
        transform: none;
    }
}

/* ============================================================
   ข้อความชื่อเรื่องแทนรูป เมื่อไม่มีรูป/โหลดรูปไม่ได้ (.is-noimage)
   onerror ใส่ class นี้ให้ parent ของ <img> ส่วน server ใส่ให้เมื่อ pic ว่าง
   ============================================================ */

.rus-noimg-caption {
    display: none;
}

.is-noimage > .rus-noimg-caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    display: -webkit-box;
    padding: 0.625rem 0.75rem;
    overflow: hidden;
    background: linear-gradient(to top, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.75) 100%);
    color: var(--rus-navy);
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.4;
    text-align: center;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

/* แบนเนอร์ลิงก์ที่เกี่ยวข้อง: กรอบเตี้ย แสดงชื่อกลางกรอบบรรทัดเดียว-สองบรรทัด */
.rus-banner-tile.is-noimage > .rus-noimg-caption {
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem 0.5rem;
    background: rgba(255, 255, 255, 0.82);
    font-size: 0.8125rem;
}

/* การ์ดประชาสัมพันธ์: ตอน hover มีชื่อเรื่องในม่านอยู่แล้ว ซ่อนข้อความนี้กันซ้ำ */
.rus-pr .project-img-container:hover .is-noimage > .rus-noimg-caption {
    opacity: 0;
}

@media (hover: none) {
    .rus-pr .is-noimage > .rus-noimg-caption {
        display: none;
    }
}