/* พื้นหลัง : เพลงคณะทหารม้า717 */
.cavalry-wrapper {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 15px;
}

.cavalry-page {
    background: linear-gradient(180deg, #000000, #0a0a0a, #1a1a1a);
    color: #d4af37;
    font-family: "Sarabun", "Segoe UI", sans-serif;
    padding-bottom: 60px;
}

/* หัวข้อ */
.cavalry-title {
    text-align: center;
    font-size: 2.5rem;
    font-weight: 700;
    margin-top: 25px;
    margin-bottom: 28px;
    letter-spacing: 3px;

    background: linear-gradient(
        90deg,
        #b8860b 0%,
        #d4af37 20%,
        #f7e99c 40%,
        #d4af37 60%,
        #b8860b 80%,
        #f2d675 100%
    );
    -webkit-background-clip: text;
    color: transparent;

    text-shadow:
        0 0 6px rgba(212, 175, 55, 0.55),
        0 0 12px rgba(212, 175, 55, 0.35),
        2px 2px 4px rgba(0,0,0,0.45);
}

/* วิดีโอ */
.cavalry-video-frame {
    padding: 12px;
    background: linear-gradient(145deg, #000000, #0d0d0d, #1a1a1a);
    border: 3px solid #957e33;
    border-radius: 10px;
    box-shadow:
        0 0 12px rgba(212, 175, 55, 0.35),
        0 0 22px rgba(0, 0, 0, 0.8);
    max-width: 760px;
    margin: 20px auto 40px auto;
}

.cavalry-video-container {
    width: 100%;
    max-width: 720px;
}

.cavalry-video-container video {
    width: 100%;
    border-radius: 6px;
    aspect-ratio: 16/9;
    box-shadow:
        0 0 10px rgba(0,0,0,0.6),
        0 0 18px rgba(212,175,55,0.25);
}

/* Caption */
.cavalry-caption {
    text-align: center;
    font-size: 0.95rem;
    color: #d4af37;
    letter-spacing: 1.2px;
    text-shadow:
        0 0 6px rgba(212, 175, 55, 0.7),
        0 0 12px rgba(212, 175, 55, 0.45);
}

/* -------------------------------------------------- */
/* 📱 มือถือ (ต่ำกว่า 600px) */
/* -------------------------------------------------- */
@media (max-width: 600px) {

    .cavalry-title {
        font-size: 1.9rem;
        margin-top: 20px;
        margin-bottom: 20px;
        letter-spacing: 2px;
    }

    .cavalry-video-frame {
        padding: 10px;
        margin: 15px auto 30px auto;
    }

    .cavalry-video-container video {
        aspect-ratio: 16/9;
    }

    .cavalry-caption {
        font-size: 0.85rem;
    }
}

/* -------------------------------------------------- */
/* 📱💻 แท็บเล็ต (601px – 900px) */
/* -------------------------------------------------- */
@media (min-width: 601px) and (max-width: 900px) {

    .cavalry-title {
        font-size: 2.2rem;
    }

    .cavalry-video-frame {
        max-width: 680px;
    }

    .cavalry-video-container video {
        aspect-ratio: 16/9;
    }
}
/*--แก่จอเอียง--*/
/* ============================
   ⭐ Tablet (≤ 900px)
============================ */
@media (max-width: 900px) {

    .cavalry-wrapper {
        max-width: 95%;
    }

    .cavalry-title {
        font-size: 2.1rem;
        margin-top: 20px;
        margin-bottom: 22px;
    }

    .cavalry-video-frame {
        max-width: 680px;
        padding: 10px;
    }
}

/* ============================
   ⭐ Mobile (≤ 600px)
============================ */
@media (max-width: 600px) {

    .cavalry-wrapper {
        max-width: 95%;
        padding: 0 10px;
    }

    .cavalry-title {
        font-size: 1.8rem;
        margin-top: 18px;
        margin-bottom: 18px;
        letter-spacing: 1.5px;
    }

    .cavalry-video-frame {
        padding: 8px;
        margin: 12px auto 25px auto;
    }

    .cavalry-caption {
        font-size: 0.8rem;
    }
}

/* ============================
   ⭐ Mobile Landscape (เอียงจอ)
   ความสูงน้อย → ลด padding + ลดขนาดวิดีโอ
============================ */
@media (max-height: 500px) and (max-width: 1024px) {

    .cavalry-wrapper {
        max-width: 95%;
        padding: 0 10px;
    }

    .cavalry-title {
        font-size: 1.6rem;
        margin-top: 12px;
        margin-bottom: 12px;
    }

    .cavalry-video-frame {
        max-width: 520px;
        padding: 6px;
        margin: 10px auto 20px auto;
    }

    .cavalry-caption {
        font-size: 0.75rem;
    }
}

/* พื้นหลัง : เพลงคณะทหารม้า717*/
/*.cavalry-page {
    background: linear-gradient(180deg, #000000, #0a0a0a, #1a1a1a);
    color: #d4af37;
    font-family: "Sarabun", "Segoe UI", sans-serif;
    padding-bottom: 60px;
}

/* หัวข้อ *
.cavalry-title {
    text-align: center;
    font-size: 2.5rem;
    font-weight: 700;
    margin-top: 25px;
    margin-bottom: 28px;
    letter-spacing: 3px;

    background: linear-gradient(
        90deg,
        #b8860b 0%,
        #d4af37 20%,
        #f7e99c 40%,
        #d4af37 60%,
        #b8860b 80%,
        #f2d675 100%
    );
    -webkit-background-clip: text;
    color: transparent;

    text-shadow:
        0 0 6px rgba(212, 175, 55, 0.55),
        0 0 12px rgba(212, 175, 55, 0.35),
        2px 2px 4px rgba(0,0,0,0.45);
}

/* วิดีโอ *
.cavalry-video-frame {
    padding: 12px;
    background: linear-gradient(145deg, #000000, #0d0d0d, #1a1a1a);
    border: 3px solid #957e33;
    border-radius: 10px;
    box-shadow:
        0 0 12px rgba(212, 175, 55, 0.35),
        0 0 22px rgba(0, 0, 0, 0.8);
    max-width: 760px;
    margin: 20px auto 40px auto;
}

.cavalry-video-container {
    width: 100%;
    max-width: 720px;
}

.cavalry-video-container video {
    width: 100%;
    border-radius: 6px;
    aspect-ratio: 16/9;
    box-shadow:
        0 0 10px rgba(0,0,0,0.6),
        0 0 18px rgba(212,175,55,0.25);
}

/* Caption *
.cavalry-caption {
    text-align: center;
    font-size: 0.95rem;
    color: #d4af37;
    letter-spacing: 1.2px;
    text-shadow:
        0 0 6px rgba(212, 175, 55, 0.7),
        0 0 12px rgba(212, 175, 55, 0.45);
}
/*