/* รีเซ็ตค่าเริ่มต้น */
 * {
     box-sizing: border-box;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
 }

 body,
 html {
     margin: 0;
     padding: 0;
     font-family: 'Prompt', sans-serif;
     background-color: #232723;
     color: #ffffff;
     overflow-x: hidden;
     scroll-behavior: smooth;
     scroll-snap-type: y mandatory;
 }
/* บังคับขนาดและตำแหน่ง reCAPTCHA v3 ใหม่ทั้งหมด */
.grecaptcha-badge { 
    display: none;
    /*width: 50px !important;             
    height: 60px !important;           
    overflow: hidden !important;       
    display: block !important;
    position: fixed !important;
    bottom: 20px !important;          
    right: 0px !important;            
    transition: all 0.3s ease !important;
    transform: scale(0.5) !important;  
    transform-origin: right bottom !important;
    border-radius: 8px 0 0 8px !important; 
    box-shadow: -2px 2px 10px rgba(0,0,0,0.2) !important;*/
}

/* เมื่อเอาเมาส์ไปชี้ ให้ขยายออกมาเหมือนเดิม */
.grecaptcha-badge:hover { 
    width: 256px !important;           /* ขยายกลับมาเป็นความกว้างมาตรฐาน */
    transform: scale(0.7) !important;  /* ขยายขึ้นอีกนิดตอนคนชี้ */
}

 /* Scroll snap for sections */
 .hero-container,
 .info-section,
 .features-section,
 .footer-section {
     scroll-snap-align: start;
 }

 /* --- Section 1: Hero Container --- */
 .hero-container {
     display: flex;
     width: 100%;
     height: 100vh;
     min-height: 600px;
 }

 .content-side {
     flex: 0 0 50%;
     background-color: #232723;
     display: flex;
     flex-direction: column;
     justify-content: center;
     padding: 0 5% 0 10%;
 }

 .brand-header {
     margin-bottom: 20px;
 }

 .brand-name {
     font-size: 1.2rem;
     color: #c5a47e;
     font-weight: 500;
     margin: 0;
     letter-spacing: 1px;
     line-height: 1.2;
 }

 .main-title {
     font-size: clamp(3rem, 5vw, 5.5rem);
     font-weight: 200;
     line-height: 1.1;
     margin: 0 0 40px 0;
     color: #d1b89a;
 }

 .main-title span {
     color: #ffffff;
     font-weight: 400;
     display: block;
 }

 .button-group {
     display: flex;
     gap: 15px;
     align-items: center;
 }

 .btn {
     padding: 12px 30px;
     border-radius: 50px;
     font-size: 0.9rem;
     text-decoration: none;
     transition: all 0.3s ease;
     text-align: center;
     display: inline-block;
     font-weight: 300;
 }

 .btn-outline {
     border: 1px solid #4a4d4a;
     color: #a0a2a0;
     background: transparent;
     min-width: 180px;
 }

 .btn-outline:hover {
     border-color: #ffffff;
     color: #ffffff;
 }

 .btn-solid {
     background-color: #bfa68a;
     color: #232723;
     min-width: 280px;
     font-weight: 500;
 }

 .image-side {
     flex: 0 0 50%;
     position: relative;
 }

 .image-side img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     display: block;
 }

 /* --- Section 2: Info Section --- */
 .info-section {
     display: flex;
     width: 100%;
     min-height: 100vh;
     background-color: #232723;
 }

 .info-image {
     flex: 0 0 50%;
 }

 .info-image img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     display: block;
 }

 .info-content {
     flex: 0 0 50%;
     display: flex;
     flex-direction: column;
     justify-content: center;
     padding: 0 10% 0 8%;
 }

 .info-text {
     font-size: 1.4rem;
     line-height: 1.8;
     font-weight: 300;
     color: #e0e0e0;
     margin: 40px 0;
 }

 .info-text strong {
     font-weight: 600;
     color: #ffffff;
 }

 .btn-secondary-outline {
     border: 1px solid #c5a47e;
     color: #c5a47e;
     background: transparent;
     padding: 12px 40px;
     border-radius: 50px;
     font-size: 0.9rem;
     text-decoration: none;
     display: inline-block;
     width: fit-content;
     transition: all 0.3s ease;
 }

 /* --- Global Feature Section Style (For Sec 3, 4, 5) --- */
 .features-section {
     padding: 100px 8%;
     background-color: #232723;
     text-align: center;
 }

 .features-header {
     margin-bottom: 80px;
 }

 .features-header h2 {
     font-size: 3rem;
     font-weight: 500;
     color: #d1b89a;
     margin: 0 0 10px 0;
 }

 .features-header p {
     font-size: 1.4rem;
     font-weight: 300;
     color: #ffffff;
     opacity: 0.8;
     margin: 0;
 }

 .features-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 40px;
 }

 .feature-item {
     text-align: center;
 }

 .feature-image {
     width: 100%;
     aspect-ratio: 1/1;
     margin-bottom: 40px;
     overflow: hidden;
     background-color: #1a1a1a;
 }

 .line-qr {
    width: 30%;
    height: auto;
    cursor: pointer;
    transition: transform 0.2s ease;
    
    /* เพิ่มขอบมนเพื่อให้เงาสวยขึ้น (เลือกปรับตามใจชอบ) */
    border-radius: 25px; 
    
    /* เรียกใช้งานแอนิเมชั่น */
    animation: neon-glow 0.5s ease-in-out infinite alternate;
}

.line-qr:hover {
    transform: scale(1.05);
    opacity: 1; /* ปรับให้ชัดขึ้นเมื่อเอาเมาส์วาง */
    animation: neon-glow-hover 0.5s ease-in-out infinite alternate; /* กะพริบเร็วขึ้นเมื่อ hover */
}

/* สร้าง Effect ไฟนีออนกะพริบ */
@keyframes neon-glow {
    from {
        box-shadow: 0 0 5px #f3b769, 
                    0 0 10px #f3b769, 
                    0 0 15px #f3b769;
    }
    to {
        box-shadow: 0 0 10px #f3b769, 
                    0 0 15px #f3b769, 

    }
}

/* แถม: เอฟเฟกต์กะพริบถี่ๆ เหมือนไฟนีออนจริงตอน Hover */
@keyframes neon-glow-hover {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.8; }
}

 .feature-image img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: transform 0.5s ease;
 }

 .feature-title {
     font-size: 1.2rem;
     font-weight: 500;
     color: #d1b89a;
     margin-bottom: 20px;
     letter-spacing: 0.5px;
 }

 .feature-description {
     font-size: 0.95rem;
     line-height: 1.8;
     font-weight: 300;
     color: #e0e0e0;
     text-align: center;
 }

 .feature-description strong {
     font-weight: 500;
     color: #ffffff;
 }

 .feature-title::after {
     content: '';
     display: block;
     width: 40px;
     height: 1px;
     background-color: #c5a47e;
     margin: 15px auto;
     opacity: 0.5;
 }

 /* --- Section 6: Footer / Contact --- */
 .footer-section {
     padding: 100px 8%;
     background-color: #1a1a1a;
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 60px;
 }

 .footer-col h3 {
     font-size: 2.2rem;
     font-weight: 500;
     color: #ffffff;
     margin: 0 0 40px 0;
 }

 .contact-field {
     border: 1px solid #4a4d4a;
     padding: 15px 25px;
     border-radius: 50px;
     margin-bottom: 15px;
     color: #a0a2a0;
     font-weight: 300;
     font-size: 0.9rem;
 }

 .btn-social {
     background-color: #bfa68a;
     color: #1a1a1a;
     padding: 10px 25px;
     border-radius: 50px;
     text-decoration: none;
     display: inline-flex;
     align-items: center;
     gap: 10px;
     font-weight: 500;
     margin-top: 20px;
 }

 .business-hours-card {
     background-color: #bfa68a;
     color: #1a1a1a;
     padding: 40px;
     border-radius: 30px;
 }

 .business-hours-card h4 {
     font-size: 1.4rem;
     margin: 0 0 20px 0;
 }

 .business-hours-card p {
     margin: 5px 0;
     font-weight: 500;
 }

 .reach-us h4 {
     font-size: 1.8rem;
     margin: 0 0 20px 0;
 }

 .line-box {
     border: 1px solid #bfa68a;
     padding: 20px;
     border-radius: 15px;
     display: inline-block;
 }

 .get-social-bar {
     display: flex;
     /* ใช้ Flexbox เพื่อจัดวางซ้าย-ขวา */
     align-items: center;
     /* จัดให้อยู่ตรงกลางในแนวตั้ง */
     justify-content: space-between;
     /* จัดข้อความชิดซ้ายสุด ไอคอนชิดขวาสุด */
     background-color: #bfa68a;
     /* สีพื้นหลังสีกากีเหมือนในรูป */
     color: #4B3621;
     /* สีข้อความ "GET SOCIAL" */
     font-family: Arial, sans-serif;
     /* ฟอนต์ */
     font-weight: bold;
     /* ตัวหนา */
     padding: 10px 20px;
     /* ระยะห่างภายใน (บน-ล่าง 10px, ซ้าย-ขวา 20px) */
     border-radius: 50px;
     /* ทำให้แถบมีความโค้งมนมาก */
     max-width: 100%;
     /* ปรับขนาดแถบตามเนื้อหา */
     margin: 20px auto;
     /* ระยะห่างภายนอก (บน-ล่าง 20px, จัดกลางแนวนอน auto) */
 }

 .get-social-text {
     margin-right: 20px;
     /* ระยะห่างระหว่างข้อความกับกลุ่มไอคอน */
 }

 .social-icons {
     display: flex;
     /* จัดไอคอนเรียงกันในแนวนอน */
     gap: 15px;
     /* ระยะห่างระหว่างแต่ละไอคอน */
 }

 .social-link {
     display: flex;
     align-items: center;
     justify-content: center;
     width: 30px;
     /* ขนาดของวงกลมสำหรับแต่ละไอคอน */
     height: 30px;
     background-color: #4B3621;
     /* พื้นหลังวงกลมโปร่งใส */
     color: #ffffff;
     /* สีของไอคอน (สีเดียวกับข้อความ) */
     border-radius: 50%;
     /* ทำให้เป็นวงกลม */
     border: 2px solid #4B3621;
     /* เส้นขอบวงกลม */
     text-decoration: none;
     /* เอาเส้นใต้ลิงก์ออก */
     transition: all 0.3s ease;
     /* ใส่เอฟเฟกต์การเปลี่ยนแปลงเวลาเอาเมาส์ไปชี้ */
 }

 .social-link:hover {
     background-color: #4B3621;
     /* เวลาเอาเมาส์ไปชี้ ให้เปลี่ยนพื้นหลังวงกลมเป็นสีเข้ม */
     color: #C19A6B;
     /* และเปลี่ยนสีไอคอนเป็นสีกากี */
 }
 .mobile-only {
    display: none; /* ซ่อนในหน้าจอปกติ */
}

 /* Responsive */
 @media (max-width: 991px) and (orientation: portrait) {

     .hero-container,
     .info-section,
     .footer-section {
         flex-direction: column;
         grid-template-columns: 1fr;
         height: auto;
     }

     .content-side,
     .image-side,
     .info-image,
     .info-content {
         flex: 0 0 auto;
         width: 100%;
     }

     .features-grid {
         grid-template-columns: 1fr;
     }
 }

 @media (max-width: 935px) and (orientation: landscape) and (max-height: 500px) {

     .hero-container,
     .info-section,
     .footer-section,
     .image-side {
         height: 430px;
         min-height: 430px;
     }

     .footer-section {
         padding: 10px 8%;

     }

     .footer-col h3 {
         font-size: 1.2rem;
         font-weight: 500;
         color: #ffffff;
         margin: 0 0 10px 0;
     }

     .business-hours-card {
         padding: 10px;
         border-radius: 20px;
         width: 200px;
     }

     .brand-header {
         margin-bottom: 0px;
     }

     .business-hours-card h4 {
         font-size: 1rem;
         margin: 0 0 10px 0;
     }

     .features-section {
         padding: 10px 8%;

     }

     .features-header h2 {
         margin: 0;
     }

     .features-header,
     .feature-image {
         margin-bottom: 10px;
     }

     .feature-title {
         font-size: 1rem;
     }

     .features-grid {
         gap: 10px;
     }

     .content-side {
         height: 100%;
     }

     .info-text {
         font-size: 1.2rem;
         line-height: 1.2;
         font-weight: 300;
         color: #e0e0e0;
         margin: 40px 0;
     }


 }

 @media (max-width: 768px) {
    .mobile-only {
        display: block; /* แสดงผลเฉพาะมือถือ */
    }
    .pc-only {
    display: none; /* ซ่อนในหน้าจอปกติ */
}
     .main-title {
         font-size: clamp(2.8rem, 4.5vw, 5rem);
     }

     .button-group {
         gap: 10px;
     }

     .features-section {
         padding: 80px 6%;
     }

     .features-header {
         margin-bottom: 60px;
     }

     .features-header h2 {
         font-size: 2.5rem;
     }

     .features-header p {
         font-size: 1.2rem;
     }

     .features-grid {
         gap: 30px;
     }

     .footer-section {
         padding: 80px 6%;
         gap: 40px;
         grid-template-columns: repeat(2, 1fr);
     }

     .footer-col h3 {
         font-size: 2rem;
     }
 }

 @media (max-width: 600px) {
     .hero-container {
         flex-direction: row;
         height: 200px;
     }

     .content-side {
         flex: 0 0 60%;
         padding: 0 3% 0 5%;
     }

     .image-side {
         flex: 0 0 40%;
     }

     .main-title {
         font-size: clamp(2.5rem, 6vw, 4rem);
     }

     .button-group {
         flex-direction: column;
         gap: 10px;
     }

     .btn {
         min-width: auto;
         width: 100%;
     }

     .info-text {
         font-size: 1.2rem;
         line-height: 1.6;
     }

     .features-section {
         padding: 50px 4%;
     }

     .features-header {
         margin-bottom: 40px;
     }

     .features-header h2 {
         font-size: 2rem;
     }

     .features-header p {
         font-size: 1rem;
     }

     .features-grid {
         gap: 20px;
     }

     .feature-title {
         font-size: 1.1rem;
     }

     .feature-description {
         font-size: 0.9rem;
     }

     .footer-section {
         padding: 50px 4%;
         gap: 30px;
         grid-template-columns: 1fr;
     }

     .footer-col h3 {
         font-size: 1.8rem;
     }

     .contact-field {
         padding: 12px 20px;
         font-size: 0.85rem;
     }

     .business-hours-card {
         padding: 30px;
     }

     .business-hours-card h4 {
         font-size: 1.2rem;
     }
 }


 /* Modal styles */
 .modal {
     display: none;
     position: fixed;
     z-index: 1;
     left: 0;
     top: 0;
     width: 100%;
     height: 100%;
     overflow: auto;
     background-color: rgba(0, 0, 0, 0.4);
     animation: fadeInBackground 0.3s ease-out;
 }

 .modal-content {
     background: linear-gradient(135deg, #232723, #1a1a1a);
     color: #ffffff;
     margin: 15% auto;
     padding: 30px;
     border: none;
     width: 80%;
     max-width: 500px;
     border-radius: 20px;
     box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7);
     animation: slideIn 0.5s ease-out;
 }

 @keyframes fadeInBackground {
     from {
         background-color: rgba(0, 0, 0, 0);
     }

     to {
         background-color: rgba(0, 0, 0, 0.4);
     }
 }

 @keyframes slideIn {
     from {
         opacity: 0;
         transform: translateY(-100px) scale(0.9);
     }

     to {
         opacity: 1;
         transform: translateY(0) scale(1);
     }
 }

 .close {
     color: #aaa;
     float: right;
     font-size: 28px;
     font-weight: bold;
     transition: color 0.3s ease;
 }

 .close:hover,
 .close:focus {
     color: #ffffff;
     text-decoration: none;
     cursor: pointer;
 }

 .modal form {
     display: flex;
     flex-direction: column;
     gap: 20px;
 }

 .modal input,
 .modal select {
     padding: 15px;
     border: 2px solid #4a4d4a;
     border-radius: 10px;
     background-color: #1a1a1a;
     color: #ffffff;
     font-size: 1rem;
     transition: all 0.3s ease;
 }

 .modal input:focus,
 .modal select:focus {
     border-color: #c5a47e;
     box-shadow: 0 0 10px rgba(197, 164, 126, 0.5);
     outline: none;
 }

 .modal button {
     padding: 15px;
     background: linear-gradient(135deg, #bfa68a, #d1b89a);
     color: #232723;
     border: none;
     border-radius: 10px;
     cursor: pointer;
     font-size: 1rem;
     font-weight: 600;
     transition: all 0.3s ease;
 }

 .modal button:hover {
     transform: translateY(-2px);
     box-shadow: 0 5px 15px rgba(191, 166, 138, 0.4);
 }

 .modal label {
     display: flex;
     align-items: center;
     gap: 10px;
     font-size: 0.95rem;
 }

 .modal input[type="file"] {
     padding: 15px;
     border: 2px solid #4a4d4a;
     border-radius: 10px;
     background-color: #1a1a1a;
     color: #ffffff;
     font-size: 1rem;
     transition: all 0.3s ease;
 }

 .modal input[type="file"]:focus {
     border-color: #c5a47e;
     box-shadow: 0 0 10px rgba(197, 164, 126, 0.5);
     outline: none;
 }

 ::file-selector-button {
     background: linear-gradient(135deg, #bfa68a, #d1b89a);
     color: #232723;
     border: none;
     padding: 8px 12px;
     border-radius: 5px;
     cursor: pointer;
     font-weight: 500;
     margin-right: 10px;
     transition: all 0.3s ease;
 }

 ::file-selector-button:hover {
     transform: scale(1.05);
 }

 .modal h2 {
     text-align: center;
     color: #d1b89a;
     margin-bottom: 30px;
     font-weight: 500;
 }

 /* Hide scrollbars */
 ::-webkit-scrollbar {
     display: none;
 }

 * {
     -ms-overflow-style: none;
     /* IE and Edge */
     scrollbar-width: none;
     /* Firefox */
 }