@charset "utf-8";

/* บังคับฟอนต์ */
* { font-family: 'Bai Jamjuree', sans-serif; }

/* =========================== */
/* 1. Header Banner (ใช้ธีมเดียวกับ 2025) */
/* =========================== */
.hero-banner-gradient {
    position: relative;
    height: 45vh; min-height: 320px;
    background: linear-gradient(135deg, #961919 0%, #610505 50%, #2e0202 100%);
    display: flex; justify-content: center; align-items: center;
    text-align: center; color: #fff; overflow: hidden; margin-bottom: 0;
}

.hero-overlay-texture {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: radial-gradient(circle at center, rgba(255,215,0,0.05) 0%, rgba(0,0,0,0.3) 100%);
    z-index: 1;
}

.hero-content {
    position: relative; z-index: 2; padding: 20px; margin-top: -30px;
}

.hero-content h1 {
    font-size: 3.5rem; font-weight: 800; color: #FFD700;
    text-shadow: 2px 2px 10px rgba(0,0,0,0.6); margin-bottom: 10px;
}

.hero-content p {
    font-size: 1.3rem; font-weight: 300; letter-spacing: 1px; color: #fff; opacity: 0.95;
}

/* =========================== */
/* 2. Waves (คลื่น) */
/* =========================== */
.custom-shape-divider-bottom {
    position: absolute; bottom: 0; left: 0; width: 100%;
    overflow: hidden; line-height: 0; transform: rotate(180deg);
    z-index: 3;
}
.custom-shape-divider-bottom svg {
    position: relative; display: block; width: calc(130% + 1.3px); height: 90px;
    animation: waveMove 12s linear infinite alternate;
}
.custom-shape-divider-bottom .shape-fill { fill: #f4f1ea; } /* สีเดียวกับพื้นหลัง */

@keyframes waveMove { from { transform: translateX(0); } to { transform: translateX(-50px); } }

/* =========================== */
/* 3. Content Section */
/* =========================== */
.oit-section-container {
    position: relative;
    padding-bottom: 120px; padding-top: 50px;
    background-color: #f4f1ea; /* สีเบจ */
    min-height: 50vh; /* ดัน Footer ลงไป */
}

/* =========================== */
/* 4. Coming Soon Card */
/* =========================== */
.coming-soon-card {
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    border: 1px solid rgba(184, 134, 11, 0.1); /* ขอบสีทองจางๆ */
    overflow: hidden;
    max-width: 800px; margin: 0 auto; /* จัดกึ่งกลาง */
}

.icon-big {
    font-size: 5rem; color: #b8860b;
    animation: floatIcon 3s ease-in-out infinite;
}
@keyframes floatIcon {
    0% { transform: translateY(0); } 50% { transform: translateY(-10px); } 100% { transform: translateY(0); }
}

.text-red { color: #610505; font-weight: 800; }
.desc-text { font-size: 1.1rem; color: #666; }

.alert-custom {
    background-color: #fff8e1; color: #856404;
    padding: 15px 30px; border-radius: 50px;
    border: 1px solid #ffeeba;
}

/* Button */
.btn-back {
    display: inline-flex; align-items: center; padding: 12px 30px;
    background: linear-gradient(135deg, #a81b1b, #610505);
    color: #fff; border-radius: 50px; text-decoration: none;
    font-weight: 700; transition: all 0.3s;
    box-shadow: 0 5px 15px rgba(168, 27, 27, 0.3);
}
.btn-back:hover {
    transform: translateY(-3px); box-shadow: 0 8px 20px rgba(168, 27, 27, 0.4);
    color: #FFD700;
}
.btn-back i { margin-right: 10px; font-size: 1.2rem; }

/* =========================== */
/* 5. Footer Wave (คลื่นล่าง) */
/* =========================== */
.custom-shape-divider-footer-down {
    position: absolute; bottom: 0; left: 0; width: 100%; overflow: hidden; line-height: 0;
}
.custom-shape-divider-footer-down svg {
    position: relative; display: block; width: calc(130% + 1.3px); height: 80px;
}
.custom-shape-divider-footer-down .shape-fill { fill: #f4f1ea; }

/* Responsive */
@media (max-width: 768px) {
    .hero-content h1 { font-size: 2.2rem; }
    .hero-banner-gradient { height: 35vh; min-height: 280px; }
}