@import url('https://fonts.googleapis.com/css2?family=Sarabun:wght@300;400;500;600;700&display=swap');
body { font-family: 'Sarabun', sans-serif; overflow-x: hidden; display: flex; flex-direction: column; min-height: 100vh; }
.bg-light-yellow { background-color: #fffde7; }
.bg-light-green { background-color: #e8f5e9; }
.bg-light-pink { background-color: #fce4ec; }
.bg-light-blue { background-color: #e3f2fd; }

/* =========================================
   HERO SECTION (วิธีหั่นขอบดำที่ติดมากับวิดีโอทิ้ง)
   ========================================= */
.hero-section {
    position: relative;
    width: 100%;
    /* ล็อกสัดส่วนกล่องให้เป็นแนวกว้าง (Cinematic) เพื่อให้พอดีกับรูปรถ 
       และผลักขอบดำบน-ล่างให้ล้นออกนอกจอ */
    aspect-ratio: 21 / 9; 
    max-height: 75vh; 
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #d9232d !important;
}

.hero-section video {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    /* สำคัญ: ใช้ cover เพื่อดันวิดีโอให้เต็มกล่องใหม่ ขอบดำบนล่างจะถูกตัดทิ้งโดยอัตโนมัติ */
    object-fit: cover; 
    background-color: transparent !important;
    z-index: 1;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.2); /* ฟิล์มมืดจางๆ */
    z-index: 2; 
}

.hero-content {
    position: relative;
    z-index: 3;
    text-align: center;
    color: white;
    padding: 20px;
    max-width: 800px;
}

/* =========================================
   MOBILE (หน้าจอมือถือ)
   ========================================= */
@media (max-width: 768px) {
    .hero-section {
        /* ในมือถือก็ปรับสัดส่วนให้กว้างขึ้น เพื่อหั่นขอบดำทิ้งเช่นกัน */
        aspect-ratio: 16 / 7; 
        max-height: unset;
        height: auto;
        background-color: #d9232d !important; 
    }
    .hero-section video {
        position: absolute;
        top: 0;
        left: 0;
        transform: none;
        width: 100%;
        height: 100%;
        object-fit: cover; /* สำคัญต้องเป็น cover */
        background-color: transparent !important; 
    }
    .hero-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
    .hero-content {
        position: absolute;
        width: 100%;
        padding: 10px;
    }
    .hero-content h1 {
        font-size: 1.4rem !important; 
    }
    .hero-content p {
        font-size: 0.85rem;
    }
}

.cookie-popup { position: fixed; bottom: 0; left: 0; width: 100%; background: #f8f9fa; border-top: 1px solid #ddd; padding: 15px 0; z-index: 9999; box-shadow: 0 -2px 10px rgba(0,0,0,0.1); }
img.zoom-img { transition: transform 0.3s ease; cursor: pointer; }
img.zoom-img:hover { transform: scale(1.05); }
section { padding: 60px 0; }

/* สร้างแถบสีแดงทับขอบดำด้านบนของวิดีโอ */
.hero-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 12px; /* สามารถปรับตัวเลข 25px ให้หนาหรือบางลง เพื่อให้พอดีกับรอยดำได้เลยครับ */
    background-color: #d9232d; /* สีแดง */
    z-index: 10; /* บังคับให้อยู่ชั้นบนสุดทับวิดีโอ */
}