/* ========================================================== */
/* 0. ROOT VARIABLES & BASE STYLING (ตัดโค้ดซ้ำซ้อนทิ้ง) */
/* ========================================================== */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Thai+Looped:wght@100..900&family=Noto+Sans+Thai:wght@100..900&display=swap');

:root {
  --primary-color: #A5FF33; /* สีหลักของธีม */
  --primary-lime: #98f100; /* สีเขียวมะนาว Hero */ 
  --primary-blue: #004D9F; /* สีน้ำเงินเข้ม Hero */ 
  --primary-sap-yellow: #FFCC00; /* สีเหลืองมะม่วง Hero */
  --primary-emerald: #FFB833; /* สีส้มอมเหลือง Hero */
  --text-dark: #0a0a0a; /* สีข้อความเข้ม Hero*/
  --bg-light: #FFFFFF; /* สีพื้นหลังอ่อน Hero */
  --text-color: #1A1A1A; /* สีข้อความหลัก */ 
  --font-family: 'Noto Sans Thai', sans-serif;
  --lime-custom: #98f109; /* สีเขียวมะนาว Custom logo*/
  --gray-logo: #e5e7eb; /* สีเทาสำหรับโลโก้ */

  /* Fonts */
  --default-font: "Noto Sans Thai", system-ui, sans-serif;
  --nav-font: "Noto Sans Thai", sans-serif;
  --background-color: #FFFFFF;

  /* Colors */
  --accent-color: #98f109; 
  --accent-dark: rgb(173, 255, 47); 
  --navbar-bg: #FFFFFF; 
  --navbar-text: #555454;
  --submenu-bg: #FFFFFF;
  --shadow-light: 0px 8px 25px 0px rgba(0,0,0,0.15);
  --transition-speed: 0.3s;
  --submenu-delay: 0.05s;
  --card-bg: #1e293b; /* สีพื้นหลังการ์ดวิดีโอ */
  --lime-neon: #98f109; /* สีเขียวมะนาวนีออน video card */
  --dark-bg: #111827; /* สีพื้นหลังเข้ม video card */

  /* Term of Service */
  --neon-green: #39ff14;
  --gray-500: #A0AEC0; /* สีข้อความ Gray-500 */
  --gray-700: #4A5568; /* สีข้อความ หัวข้อรอง */
}

*{box-sizing:border-box;margin: 0;padding: 0;}
body {font-style:normal;margin: 0;font-family: var(--default-font);background-color: var(--background-color);color: #333;}
a {text-decoration: none;color: inherit;transition: 0.3s;}

/* ========================================================== */
/* 1. NAVBAR STRUCTURE (Sticky, Layout & Style) */
/* ========================================================== */
.navbar {background-color: var(--navbar-bg);color: var(--navbar-text);height: 90px;border-radius: 15px;display: flex;justify-content: center;align-items: center;width: 100%;/* STICKY FIX & Z-INDEX */position: sticky; top: 0;z-index: 9999; /* *** FIX: Z-INDEX สูงสุด เพื่อแก้ไข Bug Dropdown โผล่ *** */box-shadow: var(--shadow-light); /* Shadow หรูหรา */}
.navbar-container {display: flex;justify-content: space-between;align-items: center;height: 100%;width: 100%;max-width: 1400px; padding: 0 40px;}
.navbar-logo img {height: 40px; width: auto;}
.nav-menu {display: flex;list-style: none;flex-grow: 1;justify-content: center; margin-left: 50px; font-family: var(--nav-font);}
.nav-item {height: 90px;display: flex;align-items: center;position: relative; /* *** สำคัญ: เป็นจุดอ้างอิงตำแหน่งสำหรับ Dropdown *** */margin: 0 15px;}
.nav-links {color: var(--navbar-text);text-decoration: none;padding: 10px 0;height: 100%;display: flex;align-items: center;transition: all var(--transition-speed) ease-out;font-weight: 500;font-size: 0.95rem; /* ปรับขนาดเล็กกว่าเดิมเล็กน้อยเพื่อให้ดูหรู */}
.nav-links i {margin-left: 5px; font-size: 0.8em; transition: transform 0.3s;} 
.nav-links:hover,
.nav-item:hover > .nav-links {color: var(--accent-color);border-bottom: 3px solid var(--accent-color);}

/* 2. HOVER EFFECT (ลูกเล่น) */
.has-submenu:hover > .nav-links i {transform: rotate(180deg); /* ลูกศรหมุนเมื่อ Dropdown เปิด */}

/* ========================================================== */
/* 3. SUBMENU / MEGA MENU (SMOOTH & FIXES) */
/* ========================================================== */
.submenu, .mega-submenu {/* *** FIX 1: ใช้ visibility และ opacity เพื่อความ Smooth และป้องกัน Bug *** */visibility: hidden;opacity: 0;position: absolute;background-color: var(--submenu-bg);box-shadow: var(--shadow-light); z-index: 9990; /* สูงกว่าเมนูหลักนิดหน่อย */list-style: none;min-width: 250px;border-radius: 12px; padding: 10px 0; /* Positioning & Initial Transform (ลูกเล่น) */top: 100%; left: 50%; transform: translateX(-50%) translateY(10px); /* เริ่มต้นเลื่อนลง 10px *//* Transition */transition: opacity var(--transition-speed) ease-out, 
transform var(--transition-speed) ease-out,visibility 0s linear var(--transition-speed); /* ซ่อนทันทีเมื่อเมาส์ออก */}

/* *** FIX 2: เงื่อนไขการแสดงผลเมื่อ Hover *** */
.has-submenu:hover > .submenu,
.has-submenu:hover > .mega-submenu {visibility: visible;opacity: 1;transform: translateX(-50%) translateY(0); /* เคลื่อนขึ้นสู่ตำแหน่งจริง */ transition-delay: 0s; /* แสดงผลทันทีเมื่อเมาส์เข้า */}
.submenu-header {color: var(--accent-color);font-size: 1.15rem;font-weight: 700;padding: 20px 20px 10px;margin-bottom: 10px;text-align: left;display: block;/*ขีดเส้นใต้แบ่ง*/border-bottom: 3px solid var(--accent-color);width:80%;margin-left: 20px;}

/* Mega Submenu Layout & Style */
.mega-submenu {min-width: 330px; padding: 20px 0;}
.mega-submenu h3 {color: var(--accent-color);font-size: 1.1em;font-weight: 600;border-bottom: 1px solid var(--submenu-border);padding: 0 20px 10px;margin-bottom: 15px;text-align: left;}

/* Submenu Links Style (Focus & Hover) */
.submenu-link {color: var(--navbar-text);padding: 12px 20px; text-decoration: none;display: block;text-align: left;transition: background-color 0.2s, color 0.2s;font-weight: 500;font-size: 1rem; line-height: 1.2;}
.submenu-link:hover {background-color: var(--accent-color);color: var(--submenu-bg); /* Text เป็นสีขาวเมื่อ Hover */border-radius: 4px; /* มุมมนเล็กน้อย */}

/* ========================================================== */
/* 4. NESTED SUBMENU (เมนูย่อยซ้อนเมนูย่อย) */
/* ========================================================== */
.has-nested-submenu {position: relative; /* ไม่ต้องเพิ่ม padding-right ที่นี่ เพราะมันจะทำให้พื้นที่เมนูย่อยชั้นแรกกว้างเกินไป */}
.nested-submenu {/* *** FIX 3: ใช้ visibility/opacity/z-index ที่สูงกว่าเดิม *** */visibility: hidden;opacity: 0;z-index: 9991; position: absolute;background-color: var(--submenu-bg);box-shadow: var(--shadow-light); list-style: none;min-width: 220px;border-radius: 12px;padding: 10px 0; /* Positioning & Initial Transform */left: calc(100% + 10px); /* เว้นระยะห่างระหว่างเมนูย่อย 10px */top: -10px; transform: translateX(-10px); /* เริ่มต้นเลื่อนไปทางซ้าย 10px *//* Transition */transition: opacity 0.2s ease-out, transform 0.2s ease-out, visibility 0s linear 0.2s; }
.has-nested-submenu:hover > .nested-submenu {visibility: visible;opacity: 1;transform: translateX(0); /* เคลื่อนสู่ตำแหน่งจริง */transition-delay: 0s;}

/* ปรับสไตล์ link ในเมนูย่อยซ้อนเมนูย่อยให้เป็นระเบียบ */
.has-nested-submenu > .submenu-link {display: flex;justify-content: space-between;align-items: center;}
.has-nested-submenu .submenu-link i {transform: rotate(0); /* รีเซ็ตการหมุนของลูกศร */}
.has-nested-submenu:hover > .submenu-link i {transform: rotate(90deg); /* ลูกศรหมุนไปทางขวา */}
.nested-submenu .submenu-link:hover {background-color: var(--accent-dark); /* ใช้สีเข้มขึ้นเล็กน้อย */color: var(--submenu-bg); }

/* ========================================================== */
/* 5. RESPONSIVE DESIGN (MOBILE & TABLET) */
/* ========================================================== */
@media screen and (max-width: 1024px) { /* ใช้ 1024px เป็นจุดตัดที่เหมาะสม */
  .nav-menu {display: none; flex-direction: column;width: 100%;position: absolute;top: 90px; left: 0;background-color: var(--navbar-bg);box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);padding-bottom: 10px;border-top: 1px solid #eee;z-index: 9998; margin-left: 0;}
  .nav-menu.active {display: flex; }
  .nav-item {width: 100%;height: auto;padding: 0 20px;border-bottom: 1px solid #f0f0f0;margin: 0;}
  .nav-links {width: 100%;justify-content: space-between;padding: 12px 0;font-size: 1.1rem;border-bottom: none !important;}
  .nav-links:hover {border-bottom: none;color: var(--accent-dark);}
    
/* Submenus ใน Mobile: Static positioning และใช้ display: none/block */
  .submenu, .mega-submenu, .nested-submenu {position: static; visibility: hidden; /* ต้องเปลี่ยนเป็น display: none/block ใน JS แทน */opacity: 1;transform: none;transition: none;display: none; /* ควบคุมด้วย JavaScript */box-shadow: none;background-color: #f8f8f8;border-radius: 0;padding: 0;margin: 5px 0 10px 0;}
/*ปรับสไตล์ Header ใน Mobile*/
  .submenu-header {padding: 10px 20px 5px;margin: 0;border-bottom: 2px solid var(--accent-color);font-size: 1.2rem;}
/* ปิดการทำงานของ Hover ใน Mobile */
  .has-submenu:hover > .submenu,
  .has-submenu:hover > .mega-submenu,
  .has-nested-submenu:hover > .nested-submenu {display: none;}
/* สไตล์ Link ย่อยใน Mobile */
  .submenu-link {padding: 8px 30px; font-size: 1rem;}
  .nested-submenu .submenu-link {padding-left: 40px !important; }}

.menu-icon {display: block; font-size: 1.8rem;cursor: pointer;color: var(--navbar-text);order:3;line-height:1;}
@media screen and (max-width: 1024px) {
  .menu-icon {display: none;order: 2;}
  .nav-cta {display: none;}
  .navbar-container {padding: 0 20px;}
  .nav-menu {display: flex; flex-direction: column;width: 100%;position: fixed;top: 0px; left: 0;bottom: 0;right: 0;/* สไตล์ Menu Box */background-color: var(--navbar-bg);box-shadow: none; /* Shadow เข้มขึ้นเล็กน้อย */border-top: 1px solid #eee;z-index: 9998; margin-left: 0;/* NEW: Smooth Entry Transition (ควบคุมด้วย JS) *//* แม้ display:none/block จะไม่ smooth แต่การใช้ transition นี้ช่วยเมื่อมีการ Toggle class active */transition: all 0.4s ease-out, visibility 0s linear 0.4s; transform: translateX(100%);visibility: hidden;overflow: auto;padding: 10px;}
  .nav-menu.active {display: flex; transform: translateX(0);visibility: visible;transition-delay: 0s;/* หากใช้ JS toggle class 'active' จะ smooth ขึ้นเล็กน้อย */}
/* 5.2. Menu Items in Mobile */
  .nav-item {width: 100%;height: auto;padding: 0; /* ลบ padding ที่ขอบ item */border-bottom: 1px solid #f0f0f0;margin: 0;}
  .nav-item:last-child {border-bottom: none;}
  .nav-links {width: 100%;justify-content: space-between;padding: 15px 20px; /* เพิ่ม Padding แนวตั้ง */font-size: 1.1rem;font-weight: 500;border-bottom: none !important;/* NEW: Hover State (Click Response) */transition: all 0.2s ease-out;}
/* Effect เมื่อกดใน Mobile */
  .nav-links:active,
  .nav-links:hover {color: var(--accent-color);background-color: #f8f8f8;border-bottom: none !important;}
/* 5.3. Submenus & Nested Submenus in Mobile */
  .mega-submenu, .nested-submenu {position: static; visibility: hidden; /* ต้องเปลี่ยนเป็น display: none/block ใน JS แทน */opacity: 1;transform: none;transition: all 0.2s ease-out; /* NEW: Smoothness สำหรับเมนูย่อย */display: none; box-shadow: none;background-color: #f8f8f8; /* สีพื้นหลังอ่อนกว่า */border-radius: 0;padding: 0;margin: 0;}
/* FIX: ยกเลิก Hover State ใน Mobile */
  .has-submenu:hover > .mega-submenu,
  .has-nested-submenu:hover > .nested-submenu {display: none; }
/* 5.4. Submenu Header Fix */
  .mega-submenu-column h3 {/* FIX: ลบเส้นใต้และปรับจัดวางใน Mobile */border-bottom: none; font-weight: 600;padding: 10px 20px 5px;margin: 0;color: var(--navbar-text); /* ใช้สีข้อความปกติ */background-color: #f1f1f1; /* สีพื้นหลังหัวข้อ */}
/* 5.5. Submenu Links Styling */
  .submenu-link {padding: 10px 30px; /* เพิ่ม Indent */font-size: 1rem;}
  .nested-submenu .submenu-link {padding-left: 45px !important; /* เพิ่ม Indent สำหรับเมนูย่อยชั้นที่ 2 */}
  .submenu-link:hover {background-color: var(--accent-color);color: var(--submenu-bg); }
  .mobile-header {display: flex;justify-content: space-between;align-items: center;padding: 10px 20px;margin-bottom: 10px;background-color: #f8f8f8; /* สีพื้นหลังของ Mobile Header */border-bottom: 1px solid #eee;border-radius: 12px 12px 0 0;height: 70px; /* ความสูงตามตัวอย่าง */}
  .mobile-logo img {height: 40px; /* ปรับขนาดโลโก้ใน Mobile */width: auto;}
  .mobile-close-icon {font-size: 24px;color: var(--navbar-text);cursor: pointer;line-height: 1;transition: color 0.2s;}
  .mobile-close-icon:active {color: var(--accent-color);}}

/* ======== Toggle ======== */
.toggle {position:relative;width:40px;height:40px;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;transition-duration:.3s;}
.bar{width:100%;height:4px;background-color:rgb(2, 251, 168);border-radius:5px;transition-duration:.3s;}
#checkbox:checked + .toggle .bars {margin-left:13px;}
#checkbox:checked + .toogle #bar2 {transform:rotate(135deg);margin-left:0;transform-origin:center;transition-duration:.3s;}
#checkbox:checked + .toggle #bar1 {transform:rotate(45deg);transition-duration:.3s;transform-origin:left center;}
#checkbox:checked + .toggle #bar3 {transform:rotate(-45deg);transition-duration:.3s;transform-origin:left center;}

/* ========================================================== */
/* Base styles: ใช้ class ที่คุณให้มา แต่เพิ่ม CSS ล้วน */
.py-16 { padding-top: 4rem; padding-bottom: 4rem; }
.text-center { text-align: center; }
.text-slate-900 { color: var(--text-color); }
.text-slate-600 { color: #666; }
.font-bold { font-weight: 700; }
.mb-12 { margin-bottom: 3rem; }
.mb-4 { margin-bottom: 1rem; }
.text-lg { font-size: 1.125rem; }
.text-sm { font-size: 0.875rem; }

/* *** NEW: Container Fix for 4 Columns *** */
.container {width: 100%;margin-left: auto;margin-right: auto;}
.mx-auto { margin-left: auto; margin-right: auto; }
.max-w-7xl { max-width: 1300px; } /* ขยายความกว้างเพื่อรองรับ 4 คอลัมน์ */
.px-4 { padding-left: 1rem; padding-right: 1rem; }

/* ========================================================== */
/* VIDEO CARD GRID (4 Columns) */
/* ========================================================== */
.video-grid-4col {display: grid;/* 4 คอลัมน์สำหรับ Desktop */grid-template-columns: repeat(4, 1fr); gap: 20px; /* ลด Gap ลงเล็กน้อย */perspective: 1000px; }

/* Card Link Fix */
.video-card-link {text-decoration: none;color: inherit;display: block; }
.video-card {background-color: var(--card-bg);border-radius: var(--border-radius-base);box-shadow: var(--shadow-base);overflow: hidden; /* ใช้ Transition Curve ที่ Smooth เป็นพิเศษ */transition: transform var(--transition-smooth), box-shadow var(--transition-smooth);cursor: pointer;display: flex;flex-direction: column;height: 400px; /* Fixed Height เพื่อความสวยงาม */}

/* *** ลูกเล่นที่น่าสนใจ: 3D Tilt Effect + Smooth Pop *** */
.video-card-link:hover .video-card {transform: translateY(-12px) rotateX(1.5deg); /* ยกขึ้นมากกว่าเดิม */box-shadow: var(--shadow-hover);}

/* Thumbnail Area */
.video-thumbnail {position: relative;width: 100%;padding-bottom: 56.25%; /* อัตราส่วน 16:9 */background-color: #000;overflow: hidden;}
.video-thumbnail img {position: absolute;top: 0; left: 0;width: 100%; height: 100%;object-fit: cover;transition: transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1); /* ภาพขยาย Smooth */}
.video-card-link:hover .video-thumbnail img {transform: scale(1.08); }

/* Overlay Effect (ม่านสีดำจางๆ) */
.image-overlay {position: absolute;top: 0; left: 0; right: 0; bottom: 0;background-color: rgba(0, 0, 0, 0.2); transition: background-color var(--transition-smooth);z-index: 1;}
.video-card-link:hover .image-overlay {background-color: rgba(0, 0, 0, 0); }

/* Play Button */
.play-button {position: absolute;top: 50%; left: 50%;transform: translate(-50%, -50%);background-color: var(--primary-color); color: #FFFFFF;width: 50px; height: 35px; border-radius: 6px; display: flex;justify-content: center;align-items: center;font-size: 1.5rem;transition: all var(--transition-smooth);z-index: 3; box-shadow: 0 2px 10px rgba(0,0,0,0.3);}
.video-card-link:hover .play-button {background-color: #FF0000; transform: translate(-50%, -50%) scale(1.25); /* ขยายใหญ่ขึ้นและเร็วขึ้นเล็กน้อย */opacity: 1;}

/* Content Area */
.card-content {padding: 15px;flex-grow: 1;display: flex;flex-direction: column;}
.card-title {font-size: 1.15rem; font-weight: 700;color: var(--text-color);margin-bottom: 6px;transition: color var(--transition-smooth);}
.video-card-link:hover .card-title {color: var(--primary-color); }
.card-description {font-size: 0.85rem; color: #666;line-height: 1.4;flex-grow: 1; /* จำกัดบรรทัดเพื่อรักษา Fixed Height */display: -webkit-box;-webkit-line-clamp: 4; /* เพิ่มเป็น 4 บรรทัด */-webkit-box-orient: vertical;overflow: hidden;}

/* ========================================================== */
/* RESPONSIVE ADJUSTMENTS */
/* ========================================================== */
@media (max-width: 1280px) {
  .video-grid-4col {grid-template-columns: repeat(3, 1fr); /* 3 คอลัมน์ */gap: 20px;}
  .video-card { height: 420px;}
}

@media (max-width: 992px) {
  .video-grid-4col {grid-template-columns: repeat(2, 1fr); /* 2 คอลัมน์ */}
  .video-card { height: 400px;}
}

@media (max-width: 576px) {
  .video-grid-4col {grid-template-columns: 1fr; /* 1 คอลัมน์สำหรับ Mobile */}
  .video-card { height: auto; } /* Mobile กลับไปใช้ Auto Height */
  .card-description { -webkit-line-clamp: unset; overflow: visible;font-size: 0.95rem;} 
  .card-content { padding: 20px; }
}

/* ========================================================== */
/* RESPONSIVE ADJUSTMENTS */
/* ========================================================== */
@media (max-width: 768px) {
  .video-grid {grid-template-columns: 1fr; /* 1 คอลัมน์ใน Mobile */}
  .section-title {font-size: 1.8rem;}
  .card-title {font-size: 1.15rem;}
  .card-description {font-size: 0.9rem;}
  .single-video-card-wrapper {margin: 0 15px; /* เพิ่ม margin ด้านข้างใน Mobile */}
}

.btn {padding: 12px 25px; border-radius: 50px;text-decoration: none;font-weight: 600;transition: all 0.3s ease-out;white-space: nowrap;font-size: 0.95rem; background: linear-gradient(135deg, var(--accent-color) 0%, #00C6D1 100%);color: #FFFFFF;border: none;box-shadow: 0 4px 15px rgba(0, 173, 181, 0.4); }
.btn:hover {background: linear-gradient(135deg, #00C6D1 0%, var(--accent-color) 100%);box-shadow: 0 6px 20px rgba(0, 173, 181, 0.6);transform: translateY(-2px);}
/* ========================================================== */
/* Base Style (ปรับตาม Theme ของคุณ) */
.clients-section {background-color: var(--bg-light);}
.section-title {font-size: 2.5rem;font-weight: 800;position: relative;color: #333;}
.section-description {color: #555;}
.underline-primary {width: 60px;height: 4px;background-color: var(--primary-color);margin-top: 0.5rem;margin-bottom: 2rem;border-radius: 2px;}

/* ========================================================== */
/* CLIENTS SLIDER STYLE */
/* ========================================================== */
.clients-swiper {padding-bottom: 40px; /* Space for pagination dots */}
.client-logo-slide {display: flex;justify-content: center;align-items: center;height: 120px; /* กำหนดความสูงของพื้นที่ Slide */}
.client-logo {max-width: 80%; /* จำกัดความกว้างของโลโก้ */max-height: 80px; /* จำกัดความสูงของโลโก้ */height: auto;/* *** ลูกเล่น Smooth: Opacity และ Scale Hover *** */opacity: 0.6; /* โลโก้จางลงเล็กน้อยเมื่อไม่ได้ Hover */filter: grayscale(100%); /* ทำให้โลโก้เป็นขาวดำเมื่อไม่ได้ Hover */transition: all var(--transition-fast);cursor: pointer;}

/* Hover Effect: โลโก้จะชัดขึ้น มีสีสัน และขยายเล็กน้อย */
.client-logo:hover {opacity: 1;filter: grayscale(0%);transform: scale(1.1);}

/* ========================================================== */
/* PAGINATION DOTS (Modern Look) */
/* ========================================================== */
.client-pagination {text-align: center;margin-top: 3rem !important; /* เพิ่มระยะห่างจาก Slider */position: relative !important;bottom: 0 !important;left: 0 !important;text-align: center;width: 100%;}
.clients-pagination.swiper-pagination-bullets {bottom: 0px; }
.clients-pagination .swiper-pagination-bullet {width: 10px;height: 10px;background: #ccc;opacity: 0.7;margin: 0 5px;transition: all var(--transition-fast);}
.clients-pagination .swiper-pagination-bullet-active {background: var(--primary-color);width: 25px; /* Dot ที่ Active จะยาวขึ้น */border-radius: 5px;opacity: 1;}

/* ========================================================== */
/* RESPONSIVE ADJUSTMENTS */
/* ========================================================== */
@media (max-width: 768px) {
  .section-title {font-size: 2rem;}
  .client-logo-slide {height: 100px;}
  .client-logo {max-height: 60px;}
}

/* ========================================================== */
.button {
  --white: #ffe7ff;
  --purple-100: #cfff95;
  --purple-200: #9bfa0c;
  --purple-300: #83f00e;
  --purple-400: #5de73e;
  --purple-500: #52ef1d;
  --radius: 18px;

  border-radius: var(--radius);
  outline: none;
  cursor: pointer;
  font-size: 23px;
  font-family: Arial;
  background: transparent;
  letter-spacing: -1px;
  border: 0;
  position: relative;
  width: 220px;
  height: 80px;
  transform: rotate(353deg) skewX(4deg);
}

.bg {position: absolute;inset: 0;border-radius: inherit;filter: blur(1px);}
.bg::before,
.bg::after {content: "";position: absolute;inset: 0;border-radius: calc(var(--radius) * 1.1);background: var(--purple-500);}
.bg::before {filter: blur(5px);transition: all 0.3s ease;box-shadow:-7px 6px 0 0 rgb(115 75 155 / 40%),-14px 12px 0 0 rgb(115 75 155 / 30%),-21px 18px 4px 0 rgb(115 75 155 / 25%),-28px 24px 8px 0 rgb(115 75 155 / 15%),-35px 30px 12px 0 rgb(115 75 155 / 12%),-42px 36px 16px 0 rgb(115 75 155 / 8%),-56px 42px 20px 0 rgb(115 75 155 / 5%);}
.wrap {border-radius: inherit;overflow: hidden;height: 100%;transform: translate(6px, -6px);padding: 3px;
  background: linear-gradient(
    to bottom,
    var(--purple-100) 0%,
    var(--purple-400) 100%
  );
  position: relative;
  transition: all 0.3s ease;
}
.outline {position: absolute;overflow: hidden;inset: 0;opacity: 0;outline: none;border-radius: inherit;transition: all 0.4s ease;}
.outline::before {content: "";position: absolute;inset: 2px;width: 120px;height: 300px;margin: auto;
  background: linear-gradient(
    to right,
    transparent 0%,
    white 50%,
    transparent 100%
  );
  animation: spin 3s linear infinite;
  animation-play-state: paused;
}
.content {pointer-events: none;display: flex;align-items: center;justify-content: center;z-index: 1;position: relative;height: 100%;gap: 16px;border-radius: calc(var(--radius) * 0.85);font-weight: 600;transition: all 0.3s ease;
  background: linear-gradient(
    to bottom,
    var(--purple-300) 0%,
    var(--purple-400) 100%
  );
  box-shadow:
    inset -2px 12px 11px -5px var(--purple-200),
    inset 1px -3px 11px 0px rgb(0 0 0 / 35%);
}
.content::before {content: "";inset: 0;position: absolute;z-index: 10;width: 80%;top: 45%;bottom: 35%;opacity: 0.7;margin: auto;background: linear-gradient(to bottom, transparent, var(--purple-400));filter: brightness(1.3) blur(5px);}
.char {transition: all 0.3s ease;display: flex;align-items: center;justify-content: center;}
.char span {display: block;color: transparent;position: relative;}
.char span:nth-child(5) {margin-left: 5px;}
.char.state-1 span:nth-child(5) {margin-right: -3px;}
.char.state-1 span {animation: charAppear 1.2s ease backwards calc(var(--i) * 0.03s);}
.char.state-1 span::before,
.char span::after {content: attr(data-label);position: absolute;color: var(--white);text-shadow: -1px 1px 2px var(--purple-500);left: 0;}
.char span::before {opacity: 0;transform: translateY(-100%);}
.char.state-2 {position: absolute;left: 80px;}
.char.state-2 span::after {opacity: 1;}

.icon {animation: resetArrow 0.8s cubic-bezier(0.7, -0.5, 0.3, 1.2) forwards;z-index: 10;}
.icon div,
.icon div::before,
.icon div::after {height: 3px;border-radius: 1px;background-color: var(--white);}
.icon div::before,
.icon div::after {content: "";position: absolute;right: 0;transform-origin: center right;width: 14px;border-radius: 15px;transition: all 0.3s ease;}
.icon div {position: relative;width: 24px;box-shadow: -2px 2px 5px var(--purple-400);transform: scale(0.9);background: linear-gradient(to bottom, var(--white), var(--purple-100));animation: swingArrow 1s ease-in-out infinite;animation-play-state: paused;}
.icon div::before {transform: rotate(44deg);top: 1px;box-shadow: 1px -2px 3px -1px var(--purple-400);animation: rotateArrowLine 1s linear infinite;animation-play-state: paused;}
.icon div::after {bottom: 1px;transform: rotate(316deg);box-shadow: -2px 2px 3px 0 var(--purple-400);background: linear-gradient(200deg, var(--white), var(--purple-100));animation: rotateArrowLine2 1s linear infinite;animation-play-state: paused;}

.path {position: absolute;z-index: 12;bottom: 0;left: 0;right: 0;stroke-dasharray: 150 480;stroke-dashoffset: 150;pointer-events: none;}
.splash {position: absolute;top: 0;left: 0;pointer-events: none;stroke-dasharray: 60 60;stroke-dashoffset: 60;transform: translate(-17%, -31%);stroke: var(--purple-300);}

/** STATES */
.button:hover .words {opacity: 1;}
.button:hover .words span {animation-play-state: running;}
.button:hover .char.state-1 span::before {animation: charAppear 0.7s ease calc(var(--i) * 0.03s);}
.button:hover .char.state-1 span::after {opacity: 1;animation: charDisappear 0.7s ease calc(var(--i) * 0.03s);}
.button:hover .wrap {transform: translate(8px, -8px);}
.button:hover .outline {opacity: 1;}
.button:hover .outline::before,
.button:hover .icon div::before,
.button:hover .icon div::after,
.button:hover .icon div {animation-play-state: running;}
.button:active .bg::before {filter: blur(5px);opacity: 0.7;box-shadow:-7px 6px 0 0 rgba(31, 141, 110, 0.4),-14px 12px 0 0 rgba(1, 159, 65, 0.25),-21px 18px 4px 0 rgb(115 75 155 / 15%);}
.button:active .content {box-shadow:inset -1px 12px 8px -5px rgba(5, 166, 128, 0.4),inset 0px -3px 8px 0px var(--purple-200);}

.button:active .words,
.button:active .outline {opacity: 0;}

.button:active .wrap {transform: translate(3px, -3px);}
.button:active .splash {animation: splash 0.8s cubic-bezier(0.3, 0, 0, 1) forwards 0.05s;}
.button:focus .path {animation: path 1.6s ease forwards 0.2s;}
.button:focus .icon {animation: arrow 1s cubic-bezier(0.7, -0.5, 0.3, 1.5) forwards;}
.char.state-2 span::after,
.button:focus .char.state-1 span {animation: charDisappear 0.5s ease forwards calc(var(--i) * 0.03s);}
.button:focus .char.state-2 span::after {animation: charAppear 1s ease backwards calc(var(--i) * 0.03s);}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes charAppear {
  0% {
    transform: translateY(50%);
    opacity: 0;
    filter: blur(20px);
  }
  20% {
    transform: translateY(70%);
    opacity: 1;
  }
  50% {
    transform: translateY(-15%);
    opacity: 1;
    filter: blur(0);
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes charDisappear {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  100% {
    transform: translateY(-70%);
    opacity: 0;
    filter: blur(3px);
  }
}

@keyframes arrow {
  0% {
    opacity: 1;
  }
  50% {
    transform: translateX(60px);
    opacity: 0;
  }
  51% {
    transform: translateX(-200px);
    opacity: 0;
  }
  100% {
    transform: translateX(-128px);
    opacity: 1;
  }
}

@keyframes swingArrow {
  50% {
    transform: translateX(5px) scale(0.9);
  }
}

@keyframes rotateArrowLine {
  50% {
    transform: rotate(30deg);
  }
  80% {
    transform: rotate(55deg);
  }
}

@keyframes rotateArrowLine2 {
  50% {
    transform: rotate(330deg);
  }
  80% {
    transform: rotate(300deg);
  }
}

@keyframes resetArrow {
  0% {
    transform: translateX(-128px);
  }
  100% {
    transform: translateX(0);
  }
}

@keyframes path {
  from {
    stroke: white;
  }
  to {
    stroke-dashoffset: -480;
    stroke: #f9c6fe;
  }
}

@keyframes splash {
  to {
    stroke-dasharray: 2 60;
    stroke-dashoffset: -60;
  }
}

button {position: relative;display: inline-block;cursor: pointer;outline: none;border: 0;vertical-align: middle;text-decoration: none;background: transparent;padding: 0;font-size: inherit;font-family: inherit;}
button.learn-more {width: 12rem;height: auto;}
button.learn-more .circle {transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);position: relative;display: block;margin: 0;width: 3rem;height: 3rem;background: greenyellow;border-radius: 1.625rem;}
button.learn-more .circle .icon {transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);position: absolute;top: 0;bottom: 0;margin: auto;background: #fff;}
button.learn-more .circle .icon.arrow {transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);left: 0.625rem;width: 1.125rem;height: 0.125rem;background: none;}
button.learn-more .circle .icon.arrow::before {position: absolute;content: "";top: -0.29rem;right: 0.0625rem;width: 0.625rem;height: 0.625rem;border-top: 0.125rem solid #fff;border-right: 0.125rem solid #fff;transform: rotate(45deg);}

button.learn-more .button-text {transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);position: absolute;top: 0;left: 0;right: 0;bottom: 0;padding: 0.75rem 0;margin: 0 0 0 1.85rem;color: #282936;font-weight: 700;line-height: 1.6;text-align: center;text-transform: uppercase;}
button:hover .circle {width: 100%;}
button:hover .circle .icon.arrow {background: #fff;transform: translate(1rem, 0);}
button:hover .button-text {color: #fff;}

/* From  by gharsh11032000 */ 
.animated-button {position:relative;display:flex;align-items:center;gap:4px;padding: 16px 36px;border: 4px solid;border-color: transparent;font-size: 16px;background-color: inherit;border-radius: 100px;font-weight: 600;color: greenyellow;box-shadow: 0 0 0 2px greenyellow;cursor: pointer;overflow: hidden;transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);}
.animated-button svg {position: absolute;width: 24px;fill: greenyellow;z-index: 9;transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);}
.animated-button .arr-1 {right: 16px;}
.animated-button .arr-2 {left: -25%;}
.animated-button .circle {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 20px;height: 20px;background-color: greenyellow;border-radius: 50%;opacity: 0;transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);}
.animated-button .text {position: relative;z-index: 1;transform: translateX(-12px);transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);}
.animated-button:hover {box-shadow: 0 0 0 12px transparent;color: #212121;border-radius: 12px;}
.animated-button:hover .arr-1 {right: -25%;}
.animated-button:hover .arr-2 {left: 16px;}
.animated-button:hover .text {transform: translateX(12px);}
.animated-button:hover svg {fill: #212121;}
.animated-button:active {scale: 0.95;box-shadow: 0 0 0 4px greenyellow;}
.animated-button:hover .circle {width: 220px;height: 220px;opacity: 1;}
 
#bottone1 {padding-left: 33px;padding-right: 33px;padding-bottom: 16px;padding-top: 16px;border-radius: 9px;background: #98f109;border: none;font-family: inherit;text-align: center;cursor: pointer;transition: 0.4s;}
#bottone1:hover {box-shadow: 7px 5px 56px -14px #d5f365;}
#bottone1:active {transform: scale(0.97);box-shadow: 7px 5px 56px -10px #C3D900;}


/* FAQ หน้า Index + Helpdesk Support */
.bg-bexsys-primary {background-color: var(--color-bexsys-primary);}
.text-bexsys-primary {color: var(--color-bexsys-primary);}
.border-bexsys-primary {border-color: var(--color-bexsys-primary);}
/* Style สำหรับ Icon หมุน (สำหรับการใช้งานจริงต้องใช้ JS) */
.icon-rotate {transition: transform 0.3s ease-in-out;}
.icon-rotated {transform: rotate(180deg);}

/* Threm Helpdesk Landing Page */
/* กำหนดสีหลักสำหรับ Tailwind config */
:root {
  --color-ehms-primary: #98f109;
}
.bg-ehms-primary {background-color: var(--color-ehms-primary);}
.text-ehms-primary {color: var(--color-ehms-primary);}
.border-ehms-primary {border-color: var(--color-ehms-primary);}
/* Custom styles for professional feel */
.card-service:hover {transform: translateY(-5px); /* ลูกเล่นยกขึ้นเล็กน้อย */box-shadow: 0 10px 15px -3px rgba(152, 241, 9, 0.2), 0 4px 6px -2px rgba(152, 241, 9, 0.1); /* เงาสีเขียวอ่อน */}
.icon-rotate {transition: transform 0.3s ease-in-out;}

/* Base Classes (สำหรับความเรียบง่าย) */
.text-white { color: white; }
.text-gray-700 { color: #4b5563; }
.bg-dark-navy { background-color: var(--dark-navy); }
.hover\:text-primary:hover { color: var(--primary-color); }
/*.form-input, .form-select, .form-textarea {
  @apply w-full mt-1 p-3 border border-gray-300 rounded-lg shadow-sm focus:ring-2 focus:ring-ehms-primary focus:border-ehms-primary transition duration-200;
  /* ปรับสไตล์ให้ทันสมัย มินิมอล */
/*}*/

/* พยายามบังคับให้พื้นหลังของรายการตัวเลือกเป็นสีขาว */
#business-type option {background-color: white !important;/* ใช้ !important เพื่อ override ค่าของเบราว์เซอร์ (ถ้าทำได้) */color: #333;/* ตั้งค่าสีข้อความเป็นสีดำเพื่อให้มองเห็นชัด */}
/* ปรับสีพื้นหลังของตัวเลือกที่ถูกเลือก (Selected option) ในเบราว์เซอร์ที่รองรับ ::-webkit-scrollbar-track-piece */
#business-type option:checked {background-color: #f0f0f0 !important;/* เปลี่ยนจากสีน้ำเงินของระบบเป็นสีเทาอ่อน */color: #333;}


/* กำหนดสีหลักของแบรนด์ให้ Tailwind รับรู้ */
/* ************ IMPORTANT ************ */
/* ตรวจสอบให้แน่ใจว่าได้กำหนด ehms-primary แล้ว */
/* ตัวอย่าง: 'ehms-primary': '#98f109' */
/* *********************************** */
/* Utility Class สำหรับ Input, Select, และ Textarea ทั้งหมด */
/*.form-input, .form-select, .form-textarea {
/* Base Styling: ทันสมัย มินิมอล */
  /*@apply w-full mt-1 p-4 /* เพิ่ม padding เป็น p-4 เพื่อความหรูหรา */ /*border border-gray-300 rounded-xl /* เพิ่ม rounded-xl เพื่อความพรีเมียม */ /*shadow-md /* เพิ่มเงาเล็กน้อย */ /*bg-white /* พื้นหลังสีขาว *//*text-gray-900; /* สีตัวอักษรดำเข้ม */
      
/* Focus State: Professional & Smooth */
  /*@apply focus:ring-4 /* เพิ่มความหนาของ Ring */ /*ocus:ring-ehms-primary/50 /* ใช้สีนีออนแบบโปร่งแสงเล็กน้อยเพื่อความหรูหรา *//*focus:border-ehms-primary transition duration-300; /* เพิ่ม Transition เพื่อความ Smooth */
/*}*/
    
/* แยกสไตล์สำหรับ Textarea */
/*.form-textarea {
  @apply resize-y; /* อนุญาตให้ผู้ใช้ปรับขนาดความสูงได้ */
/*}*/
/* สไตล์สำหรับ Dropdown/Select (เพื่อรองรับการแสดงผลที่ดีขึ้น) */
/*.form-select {
  @apply appearance-none; /* ลบสไตล์เดิมของเบราว์เซอร์ออก */
/* อาจจำเป็นต้องเพิ่มไอคอนลูกศรด้วยตัวเองใน HTML ถ้าต้องการให้ดูสวยงาม */
/*}
/* สไตล์สำหรับปุ่มส่งฟอร์ม */
/*.submit-btn {
  @apply w-full mt-4 py-4 text-xl font-bold text-gray-900 bg-ehms-primary rounded-full shadow-2xl hover:bg-opacity-80 transition duration-300 transform hover:scale-[1.01];
}*/


/* Style for chat button */
/*FAB Chat Container*/
.fab-container {position:fixed;bottom: 30px;right: 30px;z-index: 1000;}
.fab-icon {width: 40px;height: 40px;padding: relative;z-index: 2;filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));}
.chat-button {
  @apply fixed bottom-8 right-8 z-50 p-4 rounded-full shadow-2x-l bg-white border border-gray-100 transition duration-300 ease-in-out transform hover:scale-105;
  width: 150px;height: 60px;display:flex;align-items:center;justify-content:center;
}
/* Style for chat modal */
.chat-modal-window {width: 380px;height: 590px;filter: blur(10px);position:fixed;bottom:120px;right:30px;background: rgba(255, 255, 255, 0.05);backdrop-filter:blur(20px);border-radius:20px;border: 1px solid rgba(255, 255, 255, 0.2);box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);display:none;flex-direction:column;overflow:hidden;animation:slideUp 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);}
.chat-window.active {display:flex;}
.chat-window {position:fixed;bottom:120px;right:30px;width:380px;height:550px;background:rgba(255, 255, 255, 0.05);backdrop-filter:blur(20px);border-radius:20px;border: 1px solid rgba(255, 255, 255, 0.2);box-shadow:0 20px 6px rgba(0, 0, 0, 0.2);display:none;flex-direction:column;overflow:hidden;animation:slideUp 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);}
.chat-window.action {display:flex;}
@keyframes slideUp {
  from {transform: translateY(30px) scale(0.9);opacity:0;}
  to {transform: translateY(0) scale(1);opacity:1;}
}
.chat-header {padding:10px;background:linear-gradient(135deg, #98f109 90%, #98f102 30%);border-bottom:1px solid rgba(255, 255, 255, 0.1);display:flex;align-items:center;gap:9px;}
.chat-avatar {width:49px;height:49px;border-radius:50%;background-color:rgba(255, 255, 255, 0.2);display:flex;align-items:center;justify-content:center;position:relative;}
.chat-avatar::after {content:'';position:absolute;bottom:2px;right:2px;width:12px;height:12px;background:#10b981;border-radius:50%;border:2px solid #0cf30c;}
.chat-info h3 {color:white;font-size:15px;font-weight:500;margin-bottom:3px;justify-content:center;}
.chat-info p {color:rgba(255, 255, 255, 0.8);font-size:16px;}
.chat-messages {flex-grow:1;padding:20px;overflow-y:auto;display:flex;flex-direction:column;gap:12px;}
.chat-messages::-webkit-scrollbar-thumb {background:rgba(152, 241, 9, 0.5);border-radius:10px;}
.messages {display:flex;gap:10px;animation:messageSlide 0.3s ease;}
@keyframes messageSlide {
  from {opacity:0;transform:translateY(10px);}
  to {opacity:1;transform:translateY(0);}
}
.message.bot {flex-direction:row-reverse;}
.message-avartar {width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg, #667eea, #764ba2);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.message.user .message-avartar {background:linear-gradient(135deg, #f093fb, #f5576c);}
.message-content {max-width:85%;padding:10px 15px;border-radius:15px;position:relative;box-shadow:0 2px 8px rgba(0, 0, 0, 0.1);}
.message.bot .message-content {background-color: #e0f7fa; /* สีฟ้าอ่อนสำหรับข้อความบอท */color:white;border-bottom-left-radius:4px;}
.message.user .message-content {background-color: #c8e6c9; /* สีเขียวอ่อนสำหรับข้อความผู้ใช้ */color:white;border-bottom-right-radius:4px;}

.typing-indicator {display:none;gap:4px;}
.typing-indicator.active {display:flex;}
.typing-dot {width:8px;height:8px;background:rgba(255, 255, 255, 0.6);border-radius:50%;animation:typing 1.4s infinite;}
.typing-dot:nth-child(2) {animation-delay: 0.2s;}
.typing-dot:nth-child(3) {animation-delay: 0.4s;}
@keyframes typing {
  0%, 60%, 100% {
    transform: translateY(0);
  }
  30% {
    transform: translateY(-10px);
  }
}
/* Chat Input */
.chat-input::placeholder {color: rgba(255, 255, 255, 0.5);font-size: 14px;}
.chat-input:focus {background: rgba(255, 255, 255, 0.15);border-color: #2b2b2c;}
/* Modal Bot BexAI */
.input-modern-fill {
  @apply w-full p-4 bg-gray-100 border border-transparent rounded-lg text-gray-900 placeholder-gray-500 shadow-sm outline-none;
  @apply focus:bg-white focus:border-ehms-primary focus:ring-2 focus:ring-ehms-primary/30 transition duration-300 ease-in-out;
}
.quick-actions {display:flex;gap:8px;flex-wrap:wrap;padding:0 20px 15px;}
.quick-action {padding:8px 16px;background: rgba(18, 255, 1, 0.919);border: 1px solid rgba(105, 247, 4, 0.3);border-radius:20px;color:white;font-size:13px;cursor:pointer;transition:all 0.3s ease;}
.quick-action:hover {background: rgba(2, 250, 22, 0.786);transform:translateY(-2px);}

@keyframes bounce {

  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.1);
  }
}
.typing-dot {animation:bounce 1s infinite;}
.typing-dot:nth-child(1) {animation-delay: -0.3s;}
.typing-dot:nth-child(2) {animation-delay: -0.15s;}
.typing-dot:nth-child(3) {animation-delay: 0s;}
@keyframes bounce {
  0%,
  80%,
  100% {
    transform: scale(0);
  }
  40% {
    transform: scale(1.0);
  }
}
/* Mobile Responsive */
@media (max-width: 768px) {
  .chat-window {width: calc(100vw - 30px);height: calc(100vh - 150px);right: 15px;bottom: 100px;}
  .fab-container {right: 15px;bottom: 15px;}
}
/*AI Robot เคลื่อนไหว*/
@keyframes float {

  0%,
  100% {
    transform: translateY(0px) rotate(0deg);
  }

  50% {
    transform: translateY(-8px) rotate(2deg);
  }
}

@keyframes glow {

  0%,
  100% {
    filter: brightness(1) drop-shadow(0 0 8px rgba(44, 45, 48, 0.84));
  }

  50% {
    filter: brightness(1.3) drop-shadow(0 0 15px rgba(48, 48, 49, 0.681));
  }
}

@keyframes blink {

  0%,
  90%,
  100% {
    opacity: 1;
  }

  95% {
    opacity: 0.3;
  }
}

@keyframes scanline {
  0% {
    transform: translateY(-100%);
  }

  100% {
    transform: translateY(100%);
  }
}

@keyframes pulse-ring {
  0% {
    transform: scale(0.95);
    opacity: 1;
  }

  100% {
    transform: scale(1.3);
    opacity: 0;
  }
}

.robot-container {
  animation: float 3s ease-in-out infinite;
}

.robot-eye {
  animation: glow 2s ease-in-out infinite, blink 4s ease-in-out infinite;
}

.robot-screen {
  position: relative;
  overflow: hidden;
}

.scanline {
  position: absolute;
  width: 100%;
  height: 2px;
  background: linear-gradient(transparent, rgba(255, 255, 255, 0.3), transparent);
  animation: scanline 3s linear infinite;
}

.fab-ring {
  position: absolute;
  inset: -5px;
  border: 2px solid rgba(103, 253, 3, 0.955);
  border-radius: 50%;
  animation: pulse-ring 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.glass-effect {
  background: linear-gradient(135deg,
      rgba(255, 255, 255, 0.3) 0%,
      rgba(255, 255, 255, 0.1) 50%,
      rgba(255, 255, 255, 0.05) 100%);
}

.metallic {
  background: linear-gradient(145deg, #e0e7ee 0%, #f5f7fa 50%, #d5dce3 100%);
}

/* Style for the sender's message bubble (Bexsys side) */
/* Style for the bot's message bubble */ 
.bg-animation {position:fixed;width:100%;height:100%;top:0;left:0;z-index:0;overflow:hidden;z-index:0;}
.particle {position:absolute;width:2px;height:2px;background:rgba(255,255,255,0.2);border-radius:50%;animation:float 15s infinite;}


/*.bexsys-bubble {background-color: #8a2be2; /* ใช้สีม่วง ehms-purple สำหรับ Chatbot */
  /*@apply text-white py-2 px-4 rounded-xl rounded-bl-none max-w-[75%];
}*/
/* Style for the user's message bubble */
.user-bubble {
  @apply bg-gray-200 text-gray-800 py-2 px-4 rounded-xl rounded-br-none max-w-[75%];
}
/* กำหนดสีม่วงหลักตามภาพ (Attmosfire Purple) */
.attmosfire-purple {background-color: #98f100;}
.attmosfire-purple-dark {background-color: #98f100;}

/* 1. ลูกเล่น "Breathing" สำหรับ FAB (CSS Keyframes) */
@keyframes pulse-subtle {
  0%,
  100% {
    transform: scale(1);
    box-shadow: 0 10px 15px -3px rgba(46, 45, 46, 0.739), 0 4px 6px -2px rgba(122, 66, 244, 0.2);
  }
  50% {
    transform: scale(1.03);
    box-shadow: 0 15px 20px -5px rgba(18, 1, 54, 0.615), 0 6px 8px -3px rgba(74, 68, 86, 0.496);
  }
}

.fab-breathing {animation: pulse-subtle 3s infinite ease-in-out;backdrop-filter: blur(10px);}
/* 2. สไตล์ Glassmorphism สำหรับ Modal (ถ้าต้องการ) */
.modal-glass {backdrop-filter: blur(15px);background-color: rgba(255, 255, 255, 0.85);border: 1px solid rgba(255, 255, 255, 0.2);}


/* CSS สำหรับเอฟเฟกต์เงาและลูกเล่น */
.video-card {border-radius:11px;transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);position: relative;overflow: hidden;}
/* เงาเขียวนีออนเมื่อเมาส์ชี้ */
.video-card:hover {transform: translateY(-8px);box-shadow: 0 15px 30px -5px rgba(106, 171, 2, 0.4), 0 6px 15px -3px rgba(61, 255, 2, 0.3);border-color: #98f109;}
/* เอฟเฟกต์ overlay: เพิ่มความมืดและไอคอนเล่นเมื่อ hover */
.video-card-overlay {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background-color: rgba(0, 0, 0, 0.4);opacity: 0;display: flex;align-items: center;justify-content: center;transition: opacity 0.3s ease;}
.video-card:hover .video-card-overlay {opacity: 1;}

/* เอฟเฟกต์การเต้นของไอคอนเล่น */
.play-icon {transform: scale(0.8);transition: transform 0.3s ease;}
.video-card:hover .play-icon {transform: scale(1.1);}

/* กำหนดอัตราส่วน 16:9 ให้กับพื้นที่วิดีโอ */
.aspect-video-custom {aspect-ratio: 16 / 9;}

/* CSS สำหรับเอฟเฟกต์การ์ด: ยกตัวและเงา */
.service-card {transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);position: relative;overflow: hidden;border: 1px solid #334155;}
.service-card:hover {transform: translateY(-8px);border-color: #98f109;box-shadow: 0 15px 30px -5px rgba(152, 241, 9, 0.4), 0 6px 15px -3px rgba(152, 241, 9, 0.3);}

/* Halo Effect (ลูกเล่นวงแหวนเรืองแสง) */
.service-card::before {content: '';position: absolute;top: -50%;left: -50%;width: 200%;height: 200%;background: radial-gradient(circle at center, rgba(152, 241, 9, 0.1) 0%, transparent 70%);opacity: 0;transition: opacity 0.4s ease;pointer-events: none;}
.service-card:hover::before {opacity: 1;}

/* เอฟเฟกต์สีหัวข้อและไอคอน */
.service-card:hover .card-title {color: #98f109;}
.service-card:hover .card-icon {background-color: #98f109;color: #070c17;box-shadow: 0 0 15px rgba(152, 241, 9, 0.8);}



/*-- Hero Section Video Grid Style */
/* -------------------- HERO SLIDER CONTAINER -------------------- */
.hero-slider-container {margin-top: -50px;/* ปรับค่านี้ให้เท่ากับความสูงของ Nav Menu */min-height: calc(100vh - 12vh);/* ปรับความสูงให้เต็มหน้าจอ ลบด้วยความสูงของ Nav Menu */position: relative;overflow: hidden;font-family: 'Noto Sans Thai', sans-serif;}
.hero-slide {display: flex;justify-content: space-between;align-items: center;min-height: 100%;padding: 50px 100px;position: absolute;/* ซ้อนทับกัน */top: 0;left: 0;width: 100%;opacity: 0;/* ซ่อนสไลด์เริ่มต้น */transition: opacity 0.8s ease-in-out;/* ทำเอฟเฟกต์ Fade */}
.hero-slide.active {opacity: 1;}

/* -------------------- HIGHLIGHT COLORS -------------------- */
.highlight-lime {color: var(--primary-lime);}
.highlight-blue {color: var(--primary-blue);}
.highlight-yellow {color: var(--primary-sap-yellow);}
.highlight-green {color: var(--primary-emerald);}

/* -------------------- ส่วนเนื้อหา (Text Content) -------------------- */
.hero-content {max-width: 50%;z-index: 2;}
.product-name {font-size: 1rem;color: #666;letter-spacing: 2px;font-weight: 400;margin-bottom: 10px;}
.headline {font-size: 4.5rem;font-weight: 900;line-height: 1.1;color: var(--text-dark);margin: 0 0 20px 0;}
.sub-headline {font-size: 1.2rem;font-weight: 300;color: #444;line-height: 1.6;margin-bottom: 40px;}

/* ปรับสีข้อความสำหรับสไลด์พื้นหลังเข้ม (SAP B1) */
.hero-slide[data-slide-index="2"] .sub-headline {color: #eee;}
.hero-slide[data-slide-index="2"] .headline {color: white;}

/* -------------------- กลุ่มปุ่ม CTA -------------------- */
.cta-group {display: flex;gap: 20px;}
.cta-button {text-decoration: none;font-size: 1rem;font-weight: 700;padding: 15px 30px;border-radius: 8px;transition: all 0.3s ease;}
.cta-button.secondary {background-color: transparent;border: 2px solid #ccc;}
.cta-button.secondary:hover {opacity: 0.8;}

/* -------------------- ส่วนภาพ (Visual) -------------------- */
.hero-visual {max-width: 45%;display: flex;justify-content: flex-end;align-items: center;z-index: 1;}
.dashboard-mockup {width: 100%;height: auto;box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);border-radius: 10px;}

/* ปรับสไตล์ภาพสำหรับ SAP B1 ให้ดู Dynamic ขึ้น */
.hero-slide[data-slide-index="2"] .dashboard-mockup {transform: rotateZ(-5deg);box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);}

/* -------------------- Pagination -------------------- */
.pagination {position: absolute;bottom: 30px;left: 50%;transform: translateX(-50%);display: flex;gap: 10px;z-index: 10;}
.dot {width: 10px;height: 10px;background-color: #98f100;/* สีจางๆ สำหรับ dot ปกติ */border-radius: 50%;cursor: pointer;transition: all 0.3s;}
.dot.active {background-color: var(--primary-lime);/* ใช้สีหลักของแบรนด์แรกเป็นตัว Active */width: 18px;border-radius: 5px;width: 18px;}

/* -------------------- Responsive Design (สำหรับมือถือ) -------------------- */
@media (max-width: 992px) {
  .hero-slide {flex-direction: column;padding: 40px 30px;min-height: auto;text-align: center;position: relative;/* ใช้ relative เมื่อเรียงเป็น Column */opacity: 1;/* แสดงสไลด์ตามปกติเมื่อเป็น Column Layout */}
  .hero-slider-container {min-height: auto;}
  .hero-slide:not(.active) {display: none;/* ซ่อนสไลด์ที่ไม่ Active บนมือถือ */}
  .hero-content {max-width: 100%;order: 2;}
  .headline {font-size: 3rem;}
  .hero-visual {max-width: 80%;margin-bottom: 30px;order: 1;}
  .hero-slide[data-slide-index="2"] .dashboard-mockup {transform: none;/* ยกเลิกการเอียงบนมือถือ */}
  .cta-group {justify-content: center;margin-bottom: 50px;}
  .pagination {position: relative;bottom: 0;margin-bottom: 30px;}
}

/* Logo Slider Styles */
/* CSS สำหรับการเลื่อน (Animation) */
.logo-slider-container {overflow: hidden;/*ซ่อนโลโก้อยู่นอกพื้นที่*/width: 100%;}
.logo-track {display: flex;transition: transform 0.6s ease-in-out;}
/* ซ่อน scrollbar สำหรับ container หลัก */
.logo-slider-container::-webkit-scrollbar {display: none;}
.logo-slider-container {-ms-overflow-style: none;scrollbar-width: none;}
/* สไตล์ของปุ่ม Pagination Dot */
.pagination-dot {width:10px;height:10px;background-color: #4a4b4b;transition: all 0.3s ease;}
/* สไตล์ของปุ่ม Active Dot */
.pagination-dot.active {width: 14px;height: 14px;background-color: #98f109;box-shadow: 0 0 10px rgba(152, 241, 9, 0.7);}

/* Custom styles for the button effect */
/*.chat-button {
  @apply fixed bottom-8 right-8 z-50 p-4 rounded-full shadow-2xl bg-white border border-gray-100 transition duration-300 ease-in-out transform hover:scale-105;
  width: 150px;height: 60px;display: flex;align-items: center;justify-content: center;
}
/* Style for chat modal */
/*.chat-modal-window {width: 380px;height: 550px;}*/

/* CSS สำหรับเอฟเฟกต์เน้นความหรูหรา Modern About Us Section หน้า index */
.image-container {
  border: 4px solid rgba(152, 241, 9, 0.5);
  /* ขอบเรืองแสงกึ่งโปร่งใส */
  box-shadow: 0 10px 40px -5px rgba(152, 241, 9, 0.4);
  /* เงาเขียวนีออน */
  transition: all 0.5s ease-in-out;
}

.image-container:hover {
  transform: scale(1.02);
  box-shadow: 0 15px 50px -5px rgba(152, 241, 9, 0.6);
}

.cta-button {
  transition: all 0.3s ease-in-out;
  background: linear-gradient(90deg, #98f109 0%, #70e000 100%);
}

.cta-button:hover {
  background: linear-gradient(90deg, #b0ff20 0%, #98f109 100%);
  box-shadow: 0 0 20px rgba(152, 241, 9, 0.8);
}

/* Accordion Style */
.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease-out, padding 0.4s ease-out;
}

.accordion-item.active .accordion-content {
  max-height: 500px;
  /* ค่าสูงสูงสุดที่เหมาะสม */
  padding-top: 1rem;
  padding-bottom: 1rem;
}

/* CSS สำหรับ Carousel และความ Smooth */
.carousel-track {
  display: flex;
  transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  /* Smooth Cubic-Bezier Transition */
}

.carousel-item {
  min-width: calc(100% / 3);
  /* แสดง 3 การ์ดบน Desktop */
  padding: 0 1rem;
  /* ระยะห่างระหว่างการ์ด */
}

/* ปรับการแสดงผลสำหรับ Tablet (2 การ์ด) */
@media (max-width: 1024px) {
  .carousel-item {
    min-width: calc(100% / 2);
  }
}

/* ปรับการแสดงผลสำหรับ Mobile (1 การ์ด) */
@media (max-width: 640px) {
  .carousel-item {
    min-width: 100%;
  }
}

/* Card Hover Effect */
.review-card {
  transition: all 0.3s ease-in-out;
  border: 1px solid #1f2937;
}

.review-card:hover {
  transform: translateY(-5px);
  border-color: #98f109;
  box-shadow: 0 15px 30px -5px rgba(152, 241, 9, 0.4);
}

/* CTA Neon Button */
.cta-button {
  transition: all 0.3s ease-in-out;
  box-shadow: 0 0 10px rgba(152, 241, 9, 0.5);
}

.cta-button:hover {
  transform: scale(1.05);
  box-shadow: 0 0 25px rgba(152, 241, 9, 0.8);
}


/* Carousel Blog */
/* CSS สำหรับ Carousel และความ Smooth */
/* ใช้ padding เพื่อเปิดพื้นที่ให้การ์ดตรงกลางปรากฏเต็มที่ */
.carousel-container {padding: 0 5%;}
/* Cubic-Bezier เพื่อความ Smooth และดูเป็นธรรมชาติ */
.carousel-track {display: flex;transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);width: fit-content;}/* ทำให้ track กว้างพอดีกับการ์ดทั้งหมด */
.carousel-item {min-width: 50%;/* แสดง 2 การ์ดบน Desktop (50% x 2) */padding: 0 0.5rem;/* ลด padding ระหว่างการ์ดเล็กน้อย */box-sizing: content-box;transition: all 0.5s ease-in-out;cursor: pointer;}
/* Effect: การ์ดที่ Active จะถูกขยายและมีเงาเรืองแสง */
.carousel-item.active .blog-card-content {
  transform: scale(1.05);
  /* ขยายเล็กน้อย */
  box-shadow: 0 0 30px rgba(152, 241, 9, 0.5);
  /* เงาเรืองแสง */
  border-color: #98f109;
}

/* ปรับการแสดงผลสำหรับ Tablet/Mobile */
@media (max-width: 1024px) {
  .carousel-item {
    min-width: 50%;
  }
}

@media (max-width: 768px) {
  .carousel-container {
    padding: 0 10%;
    /* ให้พื้นที่ด้านข้างมากขึ้นสำหรับ Mobile */
  }

  .carousel-item {
    min-width: 100%;
    /* แสดง 1 การ์ดบน Mobile */
  }

  .carousel-item.active .blog-card-content {
    transform: scale(1.02);
  }

  .carousel-track {
    /* ปรับความสูงให้เหมาะสมกับ Featured Article ใน Mobile View */
    min-height: 250px;
  }
}

/* สไตล์สำหรับ Blog Card ทั่วไป */
.blog-card-content {
  transition: all 0.3s ease-in-out;
  border: 1px solid #1f2937;
  height: 100%;
  /* กำหนดความสูงคงที่เล็กน้อยเพื่อให้สมดุลกับ featured article */
  min-height: 280px;
}

.blog-card-content:hover {
  border-color: #475569;
}

/* CSS สำหรับ Blog Card และ Hover Effect */
.blog-card {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border: 1px solid #2d3748;
  /* Border เริ่มต้นสีเทาอ่อน */
  position: relative;
  overflow: hidden;
  z-index: 10;
}

.blog-card:hover {
  transform: translateY(-5px);
  /* Lift Effect */
  border-color: #00bfff;
  /* Border เปลี่ยนเป็นสี Cyan */
  box-shadow: 0 10px 30px rgba(0, 191, 255, 0.15);
  /* เงาบางๆ */
  background-color: #1f2937;
}

.featured-card:hover {
  border-color: #00bfff;
  /* Border เปลี่ยนเป็นสี Cyan */
  box-shadow: 0 10px 40px rgba(0, 191, 255, 0.25);
}

/* Overlay สำหรับภาพ เพื่อให้ตัวอักษรเด่นขึ้น */
.image-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to top, rgba(14, 17, 26, 0.9) 0%, rgba(14, 17, 26, 0) 100%);
}

/* News&Activity*/
/* --- CSS สำหรับ Carousel และ Card --- */
.carousel-container {
  overflow: hidden;
  position: relative;
}

.carousel-track {
  display: flex;
  /* Transition สำหรับการเลื่อนที่ราบรื่น */
  transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform;
}

.carousel-item-wrapper {
  /* กำหนดความกว้างให้แสดง 4 การ์ดบน Desktop, 2 การ์ดบน Tablet, 1 การ์ดบน Mobile */
  min-width: 100%;
  /* Default Mobile */
  padding: 0 0.75rem;
  /* Space between cards */
  box-sizing: border-box;
}

@media (min-width: 640px) {
  .carousel-item-wrapper {
    min-width: 50%;
    /* Tablet (2 cards) */
  }
}

@media (min-width: 1024px) {
  .carousel-item-wrapper {
    min-width: 25%;
    /* Desktop (4 cards) */
  }
}

/* Card Style and Hover Effect */
.news-card {
  transition: all 0.3s ease-in-out;
  border: 1px solid #2d3748;
  height: 100%;
}

.news-card:hover {
  transform: translateY(-5px);
  /* Lift Effect */
  box-shadow: 0 15px 30px rgba(0, 198, 157, 0.2);
  /* Emerald glow shadow */
  border-color: #00c69d;
}