@charset "utf-8";
/* CSS Document */
/*
 Theme Name:   Astra Child
 Theme URI:    https://wpastra.com/
 Description:  Astra Child Theme
 Author:       Brainstorm Force
 Author URI:   https://wpastra.com/
 Template:     astra
 Version:      1.0.0
 Text Domain:  astra-child
*/

/* เพิ่ม CSS ปรับแต่งของคุณต่อจากบรรทัดนี้ */

.marquee-container { overflow: hidden; width: 100%; padding: 20px 0; font-family: 'Kanit', sans-serif; }
.marquee-track { display: flex; width: max-content; animation: marquee-scroll 20s linear infinite; }
.marquee-track:hover { animation-play-state: paused; }
.marquee-content { display: flex; gap: 30px; padding-right: 30px; }
.marquee-item { width: 320px; flex-shrink: 0; text-decoration: none; display: block; }
.portfolio-mockup {
    width: 100%; height: 400px; overflow: hidden;
    border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    position: relative; background-color: #f8f9fa; cursor: pointer;
}
.portfolio-mockup img { width: 100%; height: auto; display: block; transition: transform 4s ease-in-out; }
.portfolio-mockup:hover img { transform: translateY(calc(-100% + 400px)); }

.badge-tag {
    position: absolute; top: 15px; left: 15px; background: rgba(0,0,0,0.85); color: #fff;
    padding: 6px 16px; border-radius: 20px; font-size: 12px; font-weight: 500; z-index: 10;
    backdrop-filter: blur(4px);
}
.badge-figma { background: #F24E1E; }
.badge-wp { background: #21759B; }
@keyframes marquee-scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

/* ป๊อปอัป */
.custom-popup-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.7); z-index: 99999;
    display: none; align-items: center; justify-content: center;
    backdrop-filter: blur(5px);
}
.custom-popup-content {
    background: #fff; width: 90%; max-width: 1000px; height: 85vh; border-radius: 12px; position: relative;
    display: flex; overflow: hidden; box-shadow: 0 20px 50px rgba(0,0,0,0.3); animation: popupFadeIn 0.3s ease-out; font-family: 'Kanit', sans-serif;
}
.close-popup-btn { position: absolute; top: 15px; right: 20px; font-size: 30px; color: #333; cursor: pointer; z-index: 10; transition: color 0.3s; }
.close-popup-btn:hover { color: #F24E1E; }
.popup-left { width: 60%; height: 100%; overflow-y: auto; background: #f4f4f4; }
.popup-left img { width: 100%; height: auto; display: block; }
.popup-right { width: 40%; padding: 40px; overflow-y: auto; }
.popup-right h2 { font-size: 1.8rem; margin-top: 0; margin-bottom: 15px; color: #222; }
.popup-right p { font-size: 0.95rem; color: #666; line-height: 1.6; margin-bottom: 25px; }
.popup-details { margin-bottom: 30px; border-top: 1px solid #eee; padding-top: 20px; }
.popup-details div { font-size: 0.9rem; margin-bottom: 10px; color: #444; }
.popup-details span { font-weight: bold; display: inline-block; width: 95px; } 
.visit-site-btn {
    display: inline-block; background: #333; color: #fff; padding: 12px 25px;
    text-decoration: none; border-radius: 5px; font-weight: 500; font-size: 0.9rem; transition: background 0.3s;
}
.visit-site-btn:hover { background: #555; color: #fff; }
@keyframes popupFadeIn { 0% { opacity: 0; transform: scale(0.95); } 100% { opacity: 1; transform: scale(1); } }
@media (max-width: 768px) {
    .marquee-item { width: 260px; }
    .marquee-track { animation-duration: 12s; } 
    .custom-popup-content { flex-direction: column; height: 90vh; }
    .popup-left { width: 100%; height: 50%; }
    .popup-right { width: 100%; height: 50%; padding: 25px; }
}

.entry-content .wp-audio-shortcode, .entry-content .wp-embedded-audio, .entry-content .wp-embedded-video, .entry-content .wp-video, .entry-content p {
    margin-bottom: 0em !important;
}
.site-below-footer-wrap[data-section="section-below-footer-builder"] .ast-builder-grid-row, 
.site-below-footer-wrap[data-section="section-below-footer-builder"]

  {
   
    min-height: auto !important;
	background-color: #0d0d19;
	
   
}
.ast-footer-copyright p {
   
    color: #ccc;
}

/* คอนเทนเนอร์หลักของฟอร์ม */
.space-form-wrapper {
    font-family: inherit;
    color: #ffffff;
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    /* หากต้องการใส่พื้นหลังดาวที่ฟอร์มโดยตรง ให้เอาคอมเมนต์บรรทัดล่างออกและเปลี่ยนลิงก์รูป */
    /* background: url('ลิงก์รูปภาพพื้นหลังดาวของคุณ') center/cover; */
}

/* การจัดเลย์เอาต์แบบ 2 คอลัมน์ */
.space-form-wrapper .form-row {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    margin-bottom: 25px;
}

.space-form-wrapper .form-col {
    flex: 1;
   
    display: flex;
    flex-direction: column;
}

.space-form-wrapper .form-col.full-width {
    flex: 100%;
}

/* สไตล์ของ Label และดอกจันสีแดง */
.space-form-wrapper label {
    font-weight: 600;
    margin-bottom: 10px;
    font-size: 16px;
    display: block;
}

.space-form-wrapper .star {
    color: #ff3b3b;
}

/* สไตล์ของช่องกรอกข้อมูล (Input & Textarea) */
.space-form-wrapper .glass-input,
.space-form-wrapper .glass-textarea {
    background-color: rgba(43, 85, 107, 0.6); /* สีฟ้าหม่นกึ่งโปร่งใส */
    border: none;
    color: #72d2d9; /* สีข้อความสีฟ้าสว่าง */
    padding: 15px 25px;
    font-size: 16px;
    outline: none;
    width: 100%;
    box-sizing: border-box;
}

.space-form-wrapper .glass-input {
    border-radius: 40px; /* ขอบมนแบบแคปซูล */
}

.space-form-wrapper .glass-textarea {
    border-radius: 30px; /* ขอบมนสำหรับกล่องข้อความ */
    min-height: 180px;
    resize: vertical;
}

/* สไตล์ของ Placeholder (ข้อความจางๆ ในช่อง) */
.space-form-wrapper ::-webkit-input-placeholder { color: #72d2d9; opacity: 0.8; }
.space-form-wrapper ::-moz-placeholder { color: #72d2d9; opacity: 0.8; }
.space-form-wrapper :-ms-input-placeholder { color: #72d2d9; opacity: 0.8; }
.space-form-wrapper :-moz-placeholder { color: #72d2d9; opacity: 0.8; }

/* ข้อความช่วยเหลือใต้ช่องกรอก */
.space-form-wrapper .helper-text {
    font-size: 13px;
    color: #72d2d9;
    margin-top: 8px;
    margin-left: 15px;
    opacity: 0.7;
}


/* สไตล์ของปุ่ม Submit */
.space-form-wrapper .glass-submit {
   background-color: rgba(43, 85, 107, 0.6);
    color: #0c1c38; /* สีตัวอักษรน้ำเงินเข้ม */
    border: none;
    border-radius: 40px;
    padding: 15px 35px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
}

.space-form-wrapper .glass-submit:hover {
    background-color: #7bcad0;
}

.space-form-wrapper .glass-submit .icon {
    font-size: 18px;
}

/* แก้ไขปัญหาการแสดงผลของ CF7 */
.space-form-wrapper .wpcf7-form-control-wrap {
    display: block; /* ทำให้กล่องหุ้มของ CF7 ขยายเต็มความกว้าง */
}
.space-form-wrapper .wpcf7-not-valid-tip {
    color: #ff3b3b;
    font-size: 13px;
    margin-top: 5px;
    margin-left: 15px;
}
.space-form-wrapper div.wpcf7-response-output {
    border-radius: 10px;
    margin-top: 20px;
    color: #ffffff;
}
#ast-scroll-top {
    background-color: #0D0D19;
   
}
/* =========================================
   Responsive Design (สำหรับมือถือและแท็บเล็ต)
   ========================================= */
@media screen and (max-width: 480px) {
	div.space-form-wrapper {
   padding: 0px;
    
}
	
	div.space-form-wrapper .form-row {
    display: block;
    
    margin-bottom: 0px;
}
	.wpcf7 span.wpcf7-form-control-wrap {
   
    margin-bottom: 20px;
}
	.space-form-wrapper .glass-submit {
   
    width: 100% !important;
		justify-content: center;
		color: #72d2d9;
}
   
}