:root {
  --primary: #ff9800;       /* สีส้ม Industrial Orange */
  --primary-hover: #e68900;
  --dark: #1a1a1a;          /* สีดำเทาเข้ม */
  --darker: #111111;
  --text: #666666;
  --light: #f4f4f4;
  --white: #ffffff;
  --border: #e5e5e5;
}

body {
  font-family: 'Roboto', sans-serif;
  margin: 0;
  padding: 0;
  color: var(--text);
  background-color: var(--white);
  line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Oswald', sans-serif;
  color: var(--dark);
  text-transform: uppercase;
  font-weight: 700;
  margin-top: 0;
  letter-spacing: 0.5px;
}

/* --- Top Bar --- */
.top-bar {
  background-color: var(--darker);
  color: #bbb;
  font-size: 0.85rem;
  padding: 12px 0;
  border-bottom: 1px solid #333;
}
.top-bar-inner { display: flex; justify-content: space-between; align-items: center; }
.top-info span { margin-right: 20px; }
.top-info i { color: var(--primary); margin-right: 5px; }
.social-icons a { color: #bbb; margin-left: 15px; transition: 0.3s; font-size: 0.9rem; }
.social-icons a:hover { color: var(--primary); }

/* --- Navigation --- */
header {
    background: var(--white);
    box-shadow: 0 2px 15px rgba(0,0,0,0.05);
    position: sticky;
    top: 0;
    /* 🔥 เพิ่มบรรทัดนี้: ให้เมนูหลักลอยเหนือทุกอย่าง */
    z-index: 1000; 
}
.nav-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  height: 90px;
}
.logo {
  font-family: 'Oswald', sans-serif;
  font-size: 2rem;
  font-weight: 700;
  color: var(--dark);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 10px;
}
.logo span { color: var(--primary); }

nav { display: flex; align-items: center; gap: 30px; }
nav a {
  text-decoration: none;
  color: var(--dark);
  font-weight: 600;
  font-family: 'Oswald', sans-serif;
  font-size: 0.95rem;
  transition: 0.3s;
}
nav a:hover { color: var(--primary); }

.btn-nav {
  background: var(--primary);
  color: var(--white);
  padding: 12px 25px;
  border-radius: 0; /* ปุ่มเหลี่ยม */
}
.btn-nav:hover { background: var(--dark); color: var(--white); }

/* Mobile Menu Toggle */
.nav-toggle, .nav-toggle-label { display: none; }

/* --- Layout --- */
.container { max-width: 1200px; margin: 0 auto; padding: 0 15px; }

/* --- Buttons --- */
.btn {
  display: inline-block;
  padding: 15px 35px;
  border: none;
  cursor: pointer;
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: 0.3s;
  text-decoration: none;
  border-radius: 0; /* ปุ่มเหลี่ยมสไตล์โรงงาน */
}
.btn-primary { background: var(--primary); color: var(--white); }
.btn-primary:hover { background: var(--dark); color: var(--white); }
.btn-dark { background: var(--dark); color: var(--white); }
.btn-dark:hover { background: var(--primary); color: var(--white); }

/* --- Hero Section --- */
.hero {
  background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.6)), url('https://source.unsplash.com/1600x900/?factory,welding');
  background-size: cover;
  background-position: center;
  height: 700px;
  display: flex;
  align-items: center;
  color: var(--white);
}
.hero-content h4 { color: var(--primary); font-size: 1.2rem; margin-bottom: 10px; }
.hero-content h1 { font-size: 4.5rem; line-height: 1.1; margin-bottom: 25px; }
.hero-content p { font-size: 1.2rem; color: #ddd; margin-bottom: 40px; max-width: 600px; }

/* --- Sections --- */
.section-padding { padding: 90px 0; }
.bg-light { background-color: #f9f9f9; }
.section-header { text-align: center; margin-bottom: 60px; }
.section-header span { color: var(--primary); font-weight: 700; letter-spacing: 2px; display: block; margin-bottom: 10px; font-family: 'Oswald', sans-serif;}
.section-header h2 { font-size: 2.8rem; margin-bottom: 15px; }
.section-divider { width: 60px; height: 3px; background: var(--primary); margin: 0 auto; }

/* --- Services Grid --- */
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; }

.service-box {
  background: var(--white);
  padding: 40px;
  border: 1px solid #eee;
  transition: 0.3s;
  position: relative;
  overflow: hidden;
}
.service-box:hover {
  border-color: var(--primary);
  transform: translateY(-5px);
  box-shadow: 0 15px 30px rgba(0,0,0,0.1);
}
.service-box:after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 0%; height: 3px;
  background: var(--primary);
  transition: 0.3s;
}
.service-box:hover:after { width: 100%; }

.icon-box {
  width: 70px; height: 70px;
  line-height: 70px;
  text-align: center;
  font-size: 2.5rem;
  color: var(--primary);
  background: rgba(255, 152, 0, 0.1);
  margin-bottom: 25px;
  border-radius: 3px;
}
.service-box h3 { font-size: 1.4rem; margin-bottom: 15px; }
.read-more {
  color: var(--dark);
  font-weight: 700;
  text-decoration: none;
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  font-size: 0.9rem;
  display: inline-flex;
  align-items: center;
  margin-top: 15px;
}
.read-more i { margin-left: 5px; font-size: 0.8rem; transition: 0.3s; }
.read-more:hover { color: var(--primary); }
.read-more:hover i { margin-left: 10px; }

/* --- Footer --- */
footer { background: #0f0f0f; color: #999; padding-top: 80px; }
.footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 50px; margin-bottom: 60px; }
.footer-heading { color: var(--white); font-size: 1.3rem; margin-bottom: 30px; position: relative; padding-bottom: 15px;}
.footer-heading:after { content:''; position:absolute; bottom:0; left:0; width:30px; height:2px; background:var(--primary); }

.footer-links { list-style: none; padding: 0; }
.footer-links li { margin-bottom: 15px; border-bottom: 1px solid #222; padding-bottom: 15px; }
.footer-links a { color: #999; text-decoration: none; transition: 0.3s; display:block; }
.footer-links a:hover { color: var(--primary); padding-left: 5px; }

.footer-contact-item { margin-bottom: 15px; display: flex; align-items: center; gap: 15px; color: #ccc; }
.footer-contact-item i { color: var(--primary); width:20px; text-align:center; }
.footer-bottom { background: #050505; padding: 25px 0; border-top: 1px solid #1a1a1a; font-size: 0.9rem; text-align: center; }

/* Responsive */
@media (max-width: 768px) {
  .nav-container { height: 70px; }
  nav { display: none; width: 100%; flex-direction: column; padding: 20px 0; background:white; position:absolute; top:70px; left:0; box-shadow:0 5px 10px rgba(0,0,0,0.1); }
  .nav-toggle-label { display: block; cursor: pointer; font-size: 1.5rem; color:var(--dark); }
  #nav-toggle:checked ~ nav { display: flex; }
  .top-bar { display: none; }
  .hero-content h1 { font-size: 2.8rem; }
  .hero { height: 500px; }
}
/* --- Contact Page Styles (วางต่อท้ายไฟล์ style.css เดิม) --- */

.contact-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-bottom: 60px;
}
.contact-info-box {
    background: #fff;
    padding: 30px;
    display: flex;
    align-items: flex-start;
    gap: 20px;
    border: 1px solid #eee;
    transition: 0.3s;
}
.contact-info-box:hover {
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    transform: translateY(-5px);
    border-color: var(--primary);
}
.contact-icon {
    background: var(--primary);
    color: #fff;
    min-width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}
.contact-details h3 {
    font-size: 1.2rem;
    margin-bottom: 5px;
    color: var(--dark);
    font-family: 'Oswald', sans-serif;
}
.contact-details p {
    margin: 0;
    color: #666;
    font-size: 0.95rem;
    line-height: 1.5;
}

/* Map Section */
.map-container {
    width: 100%;
    height: 450px;
    background: #eee;
    margin-bottom: 80px;
    border: 1px solid #ddd;
}
.map-container iframe {
    width: 100%;
    height: 100%;
    border: none;
}

/* Form Layout */
.contact-form-wrapper {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 60px;
}
.company-details {
    margin-top: 30px;
    padding-top: 30px;
    border-top: 1px solid #eee;
}
.company-details strong { color: var(--dark); }

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}
.form-group { margin-bottom: 20px; }
.form-control {
    width: 100%;
    padding: 15px;
    border: 1px solid #ddd;
    background: #f9f9f9;
    font-family: 'Roboto', sans-serif;
    box-sizing: border-box; 
}
.form-control:focus {
    border-color: var(--primary);
    background: #fff;
    outline: none;
}
textarea.form-control { height: 150px; resize: vertical; }

@media (max-width: 768px) {
    .contact-form-wrapper { grid-template-columns: 1fr; }
    .form-row { grid-template-columns: 1fr; }
}

/* --- Services Page Styles --- */

/* Page Header (ใช้ร่วมกับหน้าอื่นๆ ได้) */
.page-header-bg {
    position: relative;
    background-color: var(--dark);
    background-image: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url('https://source.unsplash.com/1600x900/?industrial,factory');
    background-size: cover;
    background-position: center;
    background-attachment: scroll;
    
    /* ระยะห่างที่ถูกต้อง */
    padding: 160px 0 100px;
    
    text-align: center;
    color: var(--white);
    margin-bottom: 0;
    overflow: hidden;
    
    /* 🔥 เพิ่มบรรทัดนี้ครับ: ลดระดับชั้นลงเพื่อให้เมนูทับได้ */
    z-index: 1; 
}
.page-header-title {
    font-size: 3rem;
    font-family: 'Oswald', sans-serif;
    text-transform: uppercase;
    margin-bottom: 15px;
    letter-spacing: 1px;
}
.page-header-desc {
    font-size: 1.1rem;
    color: #ccc;
    max-width: 600px;
    margin: 0 auto;
}

/* Service Cards Grid */
.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 40px;
    margin-top: 20px;
}

.service-item {
    background: var(--white);
    border: 1px solid #eee;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%; /* ให้การ์ดสูงเท่ากัน */
}

.service-item:hover {
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
    transform: translateY(-5px);
    border-color: var(--primary);
}

/* เส้นสีส้มด้านล่างตอน Hover */
.service-item::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 4px;
    background-color: var(--primary);
    transition: all 0.3s ease;
}
.service-item:hover::after {
    width: 100%;
}

.service-img-holder {
    height: 220px;
    overflow: hidden;
    position: relative;
}
.service-img-holder img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}
.service-item:hover .service-img-holder img {
    transform: scale(1.1);
}

/* ไอคอนลอยทับรูป */
.service-icon-floating {
    position: absolute;
    bottom: -25px;
    right: 30px;
    width: 60px;
    height: 60px;
    background: var(--primary);
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    z-index: 2;
}

.service-content {
    padding: 40px 30px 30px;
    flex-grow: 1; /* ดันส่วนนี้ให้เต็มพื้นที่ */
    display: flex;
    flex-direction: column;
}

.service-title {
    font-size: 1.5rem;
    font-family: 'Oswald', sans-serif;
    margin-bottom: 15px;
    color: var(--dark);
}

.service-desc {
    color: #666;
    line-height: 1.6;
    margin-bottom: 25px;
    flex-grow: 1; /* ดันปุ่มลงไปด้านล่างสุด */
}

.service-btn {
    align-self: flex-start; /* จัดปุ่มชิดซ้าย */
    text-decoration: none;
    color: var(--dark);
    font-weight: 700;
    font-family: 'Oswald', sans-serif;
    text-transform: uppercase;
    font-size: 0.9rem;
    display: inline-flex;
    align-items: center;
    transition: 0.3s;
}
.service-btn i { margin-left: 8px; transition: 0.3s; font-size: 0.8rem; color: var(--primary); }
.service-btn:hover { color: var(--primary); }
.service-btn:hover i { margin-left: 12px; }

/* Call to Action Section */
.cta-section {
    background-color: var(--primary);
    padding: 60px 0;
    text-align: center;
    color: var(--dark);
}
.cta-title {
    font-size: 2.2rem;
    font-family: 'Oswald', sans-serif;
    margin-bottom: 15px;
    color: var(--white);
}
.cta-btn {
    background-color: var(--dark);
    color: var(--white);
    padding: 12px 35px;
    display: inline-block;
    text-decoration: none;
    font-weight: bold;
    font-family: 'Oswald', sans-serif;
    text-transform: uppercase;
    transition: 0.3s;
    margin-top: 20px;
    border: 2px solid var(--dark);
}
.cta-btn:hover {
    background-color: transparent;
    color: var(--dark);
}

/* Responsive ปรับแก้เพิ่มเติม */
@media (max-width: 768px) {
    .page-header-title { font-size: 2.5rem; }
    .services-grid { grid-template-columns: 1fr; }
}

/* --- Dropdown Menu Styles --- */

/* กล่องครอบเมนู */
.dropdown {
  position: relative;
  display: flex;
  align-items: center;
}

/* ลิงก์หัวข้อเมนู (SERVICES) */
.dropbtn {
  padding: 10px 0;
  cursor: pointer;
}

/* กล่องเมนูย่อยที่ซ่อนอยู่ */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #ffffff;
  min-width: 240px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.15);
  
  /* 👇👇 แก้ตรงนี้ครับ (จาก 1000 เป็น 9999 !important) 👇👇 */
  z-index: 9999 !important; 
  
  top: 100%; /* อยู่ใต้เมนูหลัก */
  left: 0;
  border-top: 3px solid var(--primary); /* เส้นสีส้มด้านบน */
  border-radius: 0 0 5px 5px;
}

/* ลิงก์ข้างในเมนูย่อย */
.dropdown-content a {
  color: var(--dark);
  padding: 12px 20px;
  text-decoration: none;
  display: block;
  font-size: 0.9rem;
  margin-left: 0; /* ล้างค่าเดิม */
  border-bottom: 1px solid #f1f1f1;
  font-family: 'Roboto', sans-serif; /* ใช้ฟอนต์อ่านง่าย */
  font-weight: 400;
}

/* เอฟเฟกต์ตอนเอาเมาส์ชี้เมนูย่อย */
.dropdown-content a:hover {
  background-color: #fafafa;
  color: var(--primary);
  padding-left: 25px; /* ขยับขวานิดนึงให้ดูมีมิติ */
  border-left: 3px solid var(--primary);
}

/* สั่งให้แสดงเมื่อเอาเมาส์ชี้ */
.dropdown:hover .dropdown-content {
  display: block;
}

/* ปรับสำหรับมือถือ (ให้เรียงลงมา) */
@media (max-width: 768px) {
  .dropdown { 
      display: block; 
      width: 100%;
  }
  .dropdown-content {
      position: static; /* ไม่ลอย */
      box-shadow: none;
      border-top: none;
      padding-left: 20px;
      background: #f9f9f9;
      width: 100%;
      box-sizing: border-box;
  }
  .dropdown:hover .dropdown-content {
      display: block;
  }
}

/* --- News Grid & Cards --- */
.news-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.news-card {
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    transition: transform 0.3s, box-shadow 0.3s;
    border: 1px solid #eee;
}

.news-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
}

.news-img-wrapper {
    position: relative;
    height: 220px;
    overflow: hidden;
}

.news-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s;
}
.news-card:hover .news-img { transform: scale(1.05); }

/* ป้ายหมวดหมู่ (Badge) */
.news-badge {
    position: absolute;
    top: 15px;
    left: 15px;
    padding: 5px 12px;
    font-size: 0.75rem;
    font-weight: 700;
    color: white;
    text-transform: uppercase;
    border-radius: 4px;
    z-index: 2;
}
/* สีตามหมวดหมู่ */
.news-badge.events { background-color: #007bff; }     /* สีฟ้า */
.news-badge.recruitment { background-color: #00c3ff; } /* สีฟ้าอ่อน */
.news-badge.new-year { background-color: #ffc107; color: #333; } /* สีเหลือง */
.news-badge.general { background-color: #6c757d; }    /* สีเทา */

.news-content { padding: 25px; }

.news-title {
    font-size: 1.1rem;
    margin-bottom: 15px;
    line-height: 1.4;
    height: 3em; /* จัดความสูงให้เท่ากัน 2 บรรทัด */
    overflow: hidden;
}
.news-title a { color: var(--dark); text-decoration: none; transition: 0.3s; }
.news-title a:hover { color: var(--primary); }

.news-meta {
    font-size: 0.85rem;
    color: #999;
    border-top: 1px solid #f0f0f0;
    padding-top: 15px;
    display: flex;
    gap: 15px;
}

/* --- News Grid & Cards --- */
.news-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.news-card {
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    transition: transform 0.3s, box-shadow 0.3s;
    border: 1px solid #eee;
}

.news-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
}

.news-img-wrapper {
    position: relative;
    height: 220px;
    overflow: hidden;
}

.news-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s;
}
.news-card:hover .news-img { transform: scale(1.05); }

/* ป้ายหมวดหมู่ (Badge) */
.news-badge {
    position: absolute;
    top: 15px;
    left: 15px;
    padding: 5px 12px;
    font-size: 0.75rem;
    font-weight: 700;
    color: white;
    text-transform: uppercase;
    border-radius: 4px;
    z-index: 2;
}
/* สีตามหมวดหมู่ */
.news-badge.events { background-color: #007bff; }     /* สีฟ้า */
.news-badge.recruitment { background-color: #00c3ff; } /* สีฟ้าอ่อน */
.news-badge.new-year { background-color: #ffc107; color: #333; } /* สีเหลือง */
.news-badge.general { background-color: #6c757d; }    /* สีเทา */

.news-content { padding: 25px; }

.news-title {
    font-size: 1.1rem;
    margin-bottom: 15px;
    line-height: 1.4;
    height: 3em; /* จัดความสูงให้เท่ากัน 2 บรรทัด */
    overflow: hidden;
}
.news-title a { color: var(--dark); text-decoration: none; transition: 0.3s; }
.news-title a:hover { color: var(--primary); }

.news-meta {
    font-size: 0.85rem;
    color: #999;
    border-top: 1px solid #f0f0f0;
    padding-top: 15px;
    display: flex;
    gap: 15px;
}

/* --- Blog Page Styles (วางต่อท้ายไฟล์เดิม) --- */

/* 1. Blog Hero (ส่วนหัวอลังการ) */
.blog-hero {
  background: linear-gradient(rgba(0,0,0,0.8), rgba(0,0,0,0.8)), url('https://source.unsplash.com/1600x900/?factory,news');
  background-size: cover;
  background-position: center;
  padding: 120px 0 150px; /* เพิ่ม padding ล่างให้เยอะหน่อย */
  text-align: center;
  color: var(--white);
  margin-bottom: -80px; /* ดึงเนื้อหาด้านล่างขึ้นมาทับ */
  position: relative;
  z-index: 1;
}
.blog-hero h4 { color: var(--primary); letter-spacing: 2px; margin-bottom: 15px; }
.blog-hero h1 { font-size: 3.5rem; margin-bottom: 20px; }
.blog-hero h1 span { color: var(--primary); }
.blog-hero p { font-size: 1.2rem; color: #bbb; max-width: 700px; margin: 0 auto; }

/* 2. Blog Filters (ปุ่มกรองหมวดหมู่) */
.blog-filters {
    text-align: center;
    margin-bottom: 50px;
    position: relative;
    z-index: 10; /* ให้อยู่เหนือ hero */
}
.blog-filter-btn {
    background: var(--white);
    border: none;
    color: var(--dark);
    padding: 12px 30px;
    margin: 0 5px;
    cursor: pointer;
    font-family: 'Oswald', sans-serif;
    font-weight: 600;
    transition: 0.3s;
    font-size: 0.9rem;
    letter-spacing: 1px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}
.blog-filter-btn:hover, .blog-filter-btn.active {
    background: var(--primary);
    color: var(--white);
    transform: translateY(-3px);
}

/* 3. News Grid Layout */
.news-section {
    position: relative;
    z-index: 5;
    padding-top: 0;
}
.news-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 40px;
}

/* 4. Featured Post (ข่าวเด่นอันแรก) */
.featured-post {
    grid-column: 1 / -1; /* สั่งให้กว้างเต็มจอ */
    display: grid;
    grid-template-columns: 1.5fr 1fr; /* แบ่งซ้ายขวา */
    background: var(--white);
    border-left: 5px solid var(--primary);
    box-shadow: 0 15px 30px rgba(0,0,0,0.08);
    margin-bottom: 30px;
    overflow: hidden;
}
.featured-post .news-img-wrapper {
    height: 100%;
    min-height: 450px;
}
.featured-post .news-content {
    padding: 60px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.featured-post .news-title { font-size: 2.2rem; }

/* 5. Standard News Card (ข่าวทั่วไป) */
.news-card {
    background: var(--white);
    border: 1px solid #eee;
    transition: all 0.4s ease; /* เอฟเฟกต์สมูทๆ */
    position: relative;
    top: 0;
    border-bottom: 3px solid transparent;
}
/* ลูกเล่น Hover: เด้งขึ้น + มีเงา + เส้นสีส้ม */
.news-card:hover {
    top: -12px; 
    box-shadow: 0 25px 50px rgba(0,0,0,0.1);
    border-bottom-color: var(--primary);
}

/* Elements inside Card */
.news-img-wrapper {
    position: relative;
    height: 240px;
    overflow: hidden;
}
.news-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s; /* รูปขยายช้าๆ */
}
.news-card:hover .news-img { transform: scale(1.1); /* ซูมรูปเข้า */ }

.news-category {
    position: absolute;
    top: 20px; left: 20px;
    background: var(--primary);
    color: var(--white);
    padding: 6px 15px;
    font-size: 0.8rem;
    font-weight: 700;
    font-family: 'Oswald', sans-serif;
    letter-spacing: 1px;
    z-index: 2;
}

.news-content { padding: 30px; }

.news-meta {
    font-size: 0.85rem;
    color: #999;
    margin-bottom: 15px;
    display: flex; gap: 15px;
}
.news-meta i { color: var(--primary); margin-right: 5px; }

.news-title {
    font-size: 1.4rem;
    margin-bottom: 20px;
    line-height: 1.3;
    min-height: 2.6em; /* จัดความสูงให้เท่ากัน */
}
.news-title a { color: var(--dark); text-decoration: none; transition: 0.3s; }
.news-title a:hover { color: var(--primary); }

.news-read-more {
    color: var(--dark);
    font-weight: 700;
    text-decoration: none;
    font-family: 'Oswald', sans-serif;
    display: inline-flex;
    align-items: center;
    letter-spacing: 1px;
    transition: 0.3s;
}
.news-read-more i { margin-left: 10px; transition: 0.3s; font-size: 0.9rem; }
.news-read-more:hover { color: var(--primary); }
.news-read-more:hover i { transform: translateX(8px); /* ลูกศรขยับ */ }

/* Responsive สำหรับมือถือ */
@media (max-width: 768px) {
    .featured-post { grid-template-columns: 1fr; } /* ข่าวเด่นเรียงลงมา */
    .featured-post .news-img-wrapper { height: 300px; min-height: auto; }
    .featured-post .news-content { padding: 30px; }
    .blog-hero h1 { font-size: 2.5rem; }
    .blog-hero { padding-bottom: 100px; margin-bottom: -50px; }
    .news-grid { grid-template-columns: 1fr; gap: 30px; }
    .blog-filters { white-space: nowrap; overflow-x: auto; padding-bottom: 10px; } /* เลื่อนปุ่มได้ */
}

/* --- Dark Industrial Blog Theme (ตามแบบ) --- */

:root {
    --prima-orange: #ff9900; /* สีส้มตามแบรนด์ */
    --prima-dark: #222222;   /* สีเทาเข้ม */
}

/* Hero Section สีเข้ม */
.blog-hero-dark {
    background-color: var(--prima-dark); /* พื้นหลังสีเทาเข้ม */
    color: white;
    text-align: center;
    padding: 80px 0 100px; /* เพิ่มพื้นที่ด้านล่าง */
}

.blog-hero-dark .sub-title {
    color: var(--prima-orange); /* สีส้ม */
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 2px;
    margin-bottom: 15px;
    text-transform: uppercase;
}

.blog-hero-dark .main-title {
    font-size: 3.5rem;
    font-weight: 700;
    margin-bottom: 20px;
    color: #444; /* สีเทาของคำว่า COMPANY */
    line-height: 1.1;
}

.blog-hero-dark .main-title span {
    color: var(--prima-orange); /* สีส้มของ NEWS & INSIGHTS */
}

.blog-hero-dark .description {
    color: #ccc; /* สีเทาอ่อน */
    font-size: 1.1rem;
    max-width: 700px;
    margin: 0 auto;
}

/* ปุ่มกรองข่าวแบบใหม่ */
.blog-filters-dark {
    text-align: center;
    margin-top: -30px; /* ดึงปุ่มขึ้นไปทับ Hero เล็กน้อย */
    margin-bottom: 50px;
    position: relative;
    z-index: 10;
}

.blog-filters-dark .blog-filter-btn {
    display: inline-block;
    background: white;
    color: var(--prima-dark);
    padding: 12px 30px;
    margin: 0 5px;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.9rem;
    text-transform: uppercase;
    transition: all 0.3s;
    border: none;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* ปุ่มที่เลือกอยู่ (Active) */
.blog-filters-dark .blog-filter-btn.active {
    background: var(--prima-orange); /* พื้นหลังสีส้ม */
    color: white; /* ตัวหนังสือสีขาว */
}

/* Hover Effect */
.blog-filters-dark .blog-filter-btn:hover {
    background: var(--prima-orange);
    color: white;
    transform: translateY(-2px);
}

/* ปรับ Responsive */
@media (max-width: 768px) {
    .blog-hero-dark .main-title { font-size: 2.5rem; }
    .blog-filters-dark { white-space: nowrap; overflow-x: auto; padding: 10px 0; }
}


/* --- Industrial Dark Theme Styles --- */

:root {
    --prima-orange: #ff9900;
    --prima-dark: #222222;
}

/* Hero Section สีเข้ม */
.blog-hero-dark {
    background-color: var(--prima-dark);
    color: white;
    text-align: center;
    padding: 80px 0 100px;
    margin-bottom: 0;
}

.blog-hero-dark .sub-title {
    color: var(--prima-orange);
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 2px;
    margin-bottom: 15px;
    text-transform: uppercase;
    font-family: 'Oswald', sans-serif;
}

.blog-hero-dark .main-title {
    font-size: 3.5rem;
    font-weight: 700;
    margin-bottom: 20px;
    color: #ffffff;
    line-height: 1.1;
    font-family: 'Oswald', sans-serif;
}

.blog-hero-dark .main-title span {
    color: var(--prima-orange);
}

.blog-hero-dark .description {
    color: #ccc;
    font-size: 1.1rem;
    max-width: 700px;
    margin: 0 auto;
}

/* ปุ่มกรองข่าวแบบใหม่ */
.blog-filters-dark {
    text-align: center;
    margin-top: -30px;
    margin-bottom: 50px;
    position: relative;
    z-index: 10;
}

.blog-filters-dark .blog-filter-btn {
    display: inline-block;
    background: white;
    color: var(--prima-dark);
    padding: 12px 30px;
    margin: 0 5px;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.9rem;
    text-transform: uppercase;
    transition: all 0.3s;
    border: none;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    font-family: 'Oswald', sans-serif;
}

.blog-filters-dark .blog-filter-btn.active,
.blog-filters-dark .blog-filter-btn:hover {
    background: var(--prima-orange);
    color: white;
    transform: translateY(-3px);
}

@media (max-width: 768px) {
    .blog-hero-dark .main-title { font-size: 2.5rem; }
    .blog-filters-dark { 
        white-space: nowrap; 
        overflow-x: auto; 
        padding: 10px 0; 
        margin-top: 20px;
    }
}


/* --- Related Posts Design (ตามแบบ) --- */

.related-section {
    padding: 60px 0 100px;
    background-color: #ffffff;
}

/* แถบหัวข้อสีดำ คาดส้ม */
.related-header {
    background-color: #000;
    color: #fff;
    padding: 15px 25px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 4px solid var(--prima-orange); /* เส้นส้ม */
    margin-bottom: 40px;
}

.related-header h3 {
    color: #ffffff !important;
    margin: 0;
    font-size: 1.2rem;
    font-family: 'Oswald', sans-serif;
    font-weight: 500;
    letter-spacing: 0.5px;
}

.related-nav i {
    color: #666;
    margin-left: 15px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: color 0.3s;
}
.related-nav i:hover { color: #fff; }

/* Grid Layout */
.related-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

/* ตัวการ์ดข่าว */
.related-item {
    text-align: left;
}

.related-img-box {
    position: relative;
    overflow: hidden;
    margin-bottom: 20px;
    height: 240px; /* ความสูงรูป */
}

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

/* เอฟเฟกต์ซูมรูป */
.related-img-box:hover img {
    transform: scale(1.1);
}

/* กล่องส้มลูกศร (Hover Effect) */
.hover-icon {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%) scale(0); /* ซ่อนไว้ก่อน */
    width: 50px; height: 50px;
    background: var(--prima-orange);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s;
    pointer-events: none;
}

.related-img-box:hover .hover-icon {
    transform: translate(-50%, -50%) scale(1); /* เด้งขึ้นมา */
}

/* เนื้อหาข่าว */
.related-info h4 {
    font-size: 1.1rem;
    margin-bottom: 10px;
    line-height: 1.4;
    font-weight: 700;
    min-height: 3em;
}

.related-info h4 a {
    color: #222;
    text-decoration: none;
    transition: color 0.3s;
}
.related-info h4 a:hover {
    color: var(--prima-orange);
}

.related-meta-tag {
    color: #999;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 8px;
}
.related-meta-tag i {
    color: #ccc; /* ไอคอนโฟลเดอร์สีเทาอ่อน */
}

/* --- Home About Section (Smart Outsourcing - แบบซ้ายขวา) --- */
.about-home-section {
    padding: 100px 0;
    background-color: #fff;
    overflow: hidden;
}

.about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* แบ่งครึ่ง 50:50 */
    gap: 70px; /* ระยะห่างระหว่างข้อความกับรูป */
    align-items: center;
}

/* ส่วนข้อความ */
.about-sub {
    display: inline-block;
    color: var(--prima-orange);
    font-weight: 700;
    letter-spacing: 2px;
    font-family: 'Oswald', sans-serif;
    margin-bottom: 15px;
    font-size: 0.9rem;
    text-transform: uppercase;
    border-left: 3px solid var(--prima-orange);
    padding-left: 15px;
}

.about-content h2 {
    font-size: 3rem;
    line-height: 1.2;
    margin-bottom: 25px;
    font-weight: 700;
    color: #222;
}

.about-content h2 span {
    color: var(--prima-orange);
}

.about-content p {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #666;
    margin-bottom: 40px;
}

/* รายการจุดเด่น */
.about-features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 40px;
}
.feature-item {
    display: flex;
    align-items: center;
    font-weight: 600;
    color: #333;
}
.feature-item i {
    color: var(--prima-orange);
    margin-right: 10px;
    font-size: 1.2rem;
}

/* ส่วนรูปภาพ */
.about-img-wrapper {
    position: relative;
    z-index: 1;
}

.about-main-img {
    width: 100%;
    border-radius: 8px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.15);
}

/* กล่องลอย (ปรับตำแหน่งสำหรับแบบซ้ายขวา) */
.exp-box {
    position: absolute;
    bottom: -30px;
    left: -40px; /* ลอยออกมาทางซ้ายของรูป */
    background: var(--prima-orange);
    color: #fff;
    padding: 30px 40px;
    border-radius: 5px;
    box-shadow: 0 15px 30px rgba(255, 153, 0, 0.3);
}
.exp-number {
    display: block;
    font-size: 3rem;
    font-weight: 700;
    font-family: 'Oswald', sans-serif;
    line-height: 1;
}
.exp-text {
    font-size: 1rem;
    font-weight: 500;
    opacity: 0.9;
}

/* ปรับมือถือ */
@media (max-width: 992px) {
    .about-grid { grid-template-columns: 1fr; gap: 50px; }
    .about-content h2 { font-size: 2.2rem; }
    .exp-box { left: 20px; bottom: 20px; padding: 20px; }
    .exp-number { font-size: 2rem; }
}

/* --- Testimonials & History Section (ตามแบบ) --- */

/* 1. ส่วนรีวิว (Testimonials) */
.testimonial-section {
    padding: 80px 0;
    text-align: center;
    background: #fff;
}

.testimonial-box {
    background: #111; /* พื้นหลังดำ */
    color: #fff;
    padding: 60px 40px;
    margin: 40px auto 0;
    max-width: 800px;
    position: relative;
    border-radius: 0;
}

.testi-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid #fff;
    position: absolute;
    top: -40px;
    left: 50%;
    transform: translateX(-50%);
}

.testi-quote {
    font-style: italic;
    font-size: 1.1rem;
    line-height: 1.8;
    margin-bottom: 20px;
    color: #ddd;
}

.testi-name {
    font-family: 'Oswald', sans-serif;
    font-size: 1.2rem;
    color: #fff;
    margin-bottom: 5px;
}
.testi-role {
    font-size: 0.85rem;
    color: #888;
    text-transform: uppercase;
}

/* ปุ่มลูกศรซ้ายขวา */
.testi-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: var(--prima-orange);
    color: #fff;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: 0.3s;
}
.testi-nav-btn:hover { background: #e68a00; }
.testi-prev { left: -20px; }
.testi-next { right: -20px; }


/* 2. ส่วนประวัติ (History Split Layout) */
.history-section {
    display: flex;
    flex-wrap: wrap;
}

.history-img-col {
    flex: 1;
    min-width: 400px;
    position: relative;
}

.history-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: sepia(30%) grayscale(20%); /* แต่งรูปให้ดูเก่าขลัง */
    display: block;
}

/* กล่องส้ม Projects Done */
.stat-overlay-box {
    position: absolute;
    bottom: -30px; /* ให้กล่องลอยออกมาข้างล่าง */
    right: 40px;
    background: var(--prima-orange);
    color: #fff;
    padding: 30px;
    text-align: center;
    min-width: 180px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    z-index: 5;
}
.stat-icon { font-size: 2.5rem; margin-bottom: 10px; display: block; }
.stat-num { font-size: 2.5rem; font-family: 'Oswald', sans-serif; font-weight: 700; display: block; line-height: 1; }
.stat-label { font-size: 0.9rem; opacity: 0.9; }

.history-content-col {
    flex: 1;
    min-width: 400px;
    background: #111; /* พื้นหลังดำ */
    color: #fff;
    padding: 80px 60px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.history-sub {
    color: var(--prima-orange);
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 10px;
    font-size: 0.9rem;
}

.history-content-col h2 {
    font-size: 2.5rem;
    margin-bottom: 25px;
    font-family: 'Oswald', sans-serif;
}

.history-content-col p {
    color: #aaa;
    line-height: 1.8;
    margin-bottom: 0;
}

/* Responsive */
@media (max-width: 768px) {
    .testimonial-box { margin: 40px 20px 0; }
    .history-section { flex-direction: column; }
    .history-img-col, .history-content-col { min-width: 100%; }
    .history-img { height: 300px; }
    .stat-overlay-box { right: 20px; bottom: 20px; position: absolute; }
}

/* --- 🔥 ADVANCED ANIMATIONS & HOVER EFFECTS 🔥 --- */

/* 1. เอฟเฟกต์รูปภาพขยายเมื่อเอาเมาส์ชี้ (ใช้ได้กับทุกรูปที่มีคลาสนี้) */
.about-img-wrapper, 
.history-img-col, 
.service-img-holder,
.news-img-wrapper {
    overflow: hidden; /* สำคัญ! ป้องกันภาพล้นกรอบ */
    border-radius: 8px;
    cursor: pointer;
}

.about-img-wrapper img, 
.history-img-col img, 
.service-img-holder img,
.news-img-wrapper img {
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* สมูทมากๆ */
}

/* เมื่อชี้ที่กรอบ ให้รูปข้างในขยาย */
.about-img-wrapper:hover img, 
.history-img-col:hover img,
.service-img-holder:hover img,
.news-img-wrapper:hover img {
    transform: scale(1.1); /* ขยาย 110% */
}

/* 2. ไอคอนหมุนติ้วๆ เมื่อชี้ที่กล่องบริการ */
.service-box {
    transition: all 0.4s ease;
}
.service-box:hover .icon-box i {
    animation: spin-icon 0.6s ease-in-out;
    color: var(--primary);
}
@keyframes spin-icon {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* 3. ปุ่มกด (Button) เอฟเฟกต์สไลด์สี */
.btn {
    position: relative;
    overflow: hidden;
    z-index: 1;
}
.btn::before {
    content: "";
    position: absolute;
    top: 0; left: -100%;
    width: 100%; height: 100%;
    background: rgba(255,255,255,0.2);
    transition: all 0.4s;
    z-index: -1;
    transform: skewX(-20deg);
}
.btn:hover::before {
    left: 100%;
    transition: 0.5s;
}
.btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(255, 152, 0, 0.4);
}

/* 4. กล่อง Highlight 3 อันบน (Expert, Modern, Quality) ลอยขึ้น */
.grid-3 > div {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.grid-3 > div:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.1) !important;
    z-index: 2;
}

/* 5. Hero Text Animation (เปิดเว็บมาแล้วข้อความค่อยๆ ลอยขึ้น) */
/* ต้องไปเพิ่ม class 'animate-fade-up' ใน html ของ hero section ถ้าอยากใช้ */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.hero-content h1 {
    animation: fadeInUp 1s ease-out forwards;
}
.hero-content p {
    animation: fadeInUp 1s ease-out 0.3s forwards; /* ดีเลย์นิดนึง */
    opacity: 0; /* ซ่อนก่อนเริ่ม */
}
.hero-content div { /* ปุ่ม */
    animation: fadeInUp 1s ease-out 0.6s forwards; /* ดีเลย์อีก */
    opacity: 0;
}

/* 6. กล่องส้มลอยๆ (Experience Box & Projects Done) กระดุกกระดิกได้ */
@keyframes float-box {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
    100% { transform: translateY(0px); }
}

.exp-box, .stat-overlay-box {
    animation: float-box 4s ease-in-out infinite; /* ลอยขึ้นลงตลอดเวลา */
}

/* --- Article Slider (สไลด์เลื่อนซ้ายขวา) --- */
.slider-wrapper {
    position: relative;
    padding: 0 20px; /* เว้นที่ข้างๆ ให้ปุ่ม */
}

.articles-slider {
    display: flex; /* เรียงแนวนอน */
    gap: 30px;
    overflow-x: auto; /* ให้เลื่อนได้ */
    padding: 20px 5px; /* เผื่อที่ให้เงา (Shadow) ไม่โดนบัง */
    scroll-behavior: smooth; /* เลื่อนนุ่มๆ */
    
    /* ซ่อน Scrollbar (เพื่อให้ดูคลีนๆ) */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
}
.articles-slider::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
}

.slider-item {
    min-width: 350px; /* ⚠️ สำคัญ: ล็อคความกว้างการ์ดไม่ให้หด */
    flex-shrink: 0;   /* ห้ามหด */
}

/* ปุ่มกดซ้าย-ขวา */
.slider-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    background: var(--dark);
    color: #fff;
    border: none;
    border-radius: 50%; /* ปุ่มกลม */
    cursor: pointer;
    z-index: 10;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.3s;
    font-size: 1.2rem;
}
.slider-nav-btn:hover {
    background: var(--primary);
    transform: translateY(-50%) scale(1.1);
}
.slider-prev { left: -25px; } /* ขยับปุ่มออกไปด้านซ้าย */
.slider-next { right: -25px; } /* ขยับปุ่มออกไปด้านขวา */

/* ปรับมือถือ */
@media (max-width: 768px) {
    .slider-item { min-width: 280px; } /* การ์ดเล็กลงหน่อยในมือถือ */
    .slider-nav-btn { display: none; } /* ซ่อนปุ่มกด ให้ใช้นิ้วปัดเอา */
    .slider-wrapper { padding: 0; }
}

/* --- Testimonial Slider (สไลด์รีวิวลูกค้า) --- */
.testimonial-section {
    padding: 80px 0;
    text-align: center;
    background: #fff;
}

/* กรอบหุ้มสไลด์ (จำกัดความกว้าง) */
.testi-slider-wrapper {
    max-width: 900px;
    margin: 40px auto 0;
    position: relative; /* เพื่อให้ปุ่มลอยเทียบกับกรอบนี้ */
    overflow: hidden;   /* ซ่อนส่วนที่ล้น */
}

/* รางเลื่อนรีวิว */
.testi-track {
    display: flex;
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory; /* บังคับให้หยุดทีละกล่อง */
    scrollbar-width: none; /* ซ่อน scrollbar */
}
.testi-track::-webkit-scrollbar { display: none; }

/* กล่องรีวิวแต่ละอัน */
.testimonial-box {
    min-width: 100%; /* ⚠️ สำคัญ: ให้กว้างเต็มจอ 100% ของกรอบ */
    scroll-snap-align: center; /* ให้หยุดตรงกลางพอดี */
    background: #111;
    color: #fff;
    padding: 60px 40px;
    position: relative;
    border-radius: 0;
    box-sizing: border-box; /* รวม padding ในความกว้าง */
}

/* รูป Avatar */
.testi-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid #fff;
    position: absolute;
    top: -40px;
    left: 50%;
    transform: translateX(-50%);
    background: #fff;
}

/* ปุ่มกดซ้าย-ขวา (สำหรับรีวิว) */
.testi-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    background: var(--prima-orange);
    color: #fff;
    border: none;
    border-radius: 0; /* ปุ่มเหลี่ยมตามธีม */
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    transition: 0.3s;
}
.testi-arrow:hover {
    background: #fff;
    color: var(--prima-orange);
}
.testi-arrow.prev { left: 0; }
.testi-arrow.next { right: 0; }

.testi-quote {
    font-style: italic;
    font-size: 1.1rem;
    line-height: 1.8;
    margin-bottom: 20px;
    color: #ddd;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.testi-name {
    font-family: 'Oswald', sans-serif;
    font-size: 1.2rem;
    color: #fff;
    margin-bottom: 5px;
    text-transform: uppercase;
}
.testi-role {
    font-size: 0.85rem;
    color: var(--prima-orange);
    text-transform: uppercase;
    font-weight: 700;
}

/* --- Hero Video Background (แก้ไขล่าสุด: จัดกึ่งกลาง + ปรับความเข้ม) --- */
.hero-video {
    position: relative;
    height: 750px; /* ความสูงของส่วนหัว */
    width: 100%;
    overflow: hidden;
    background: #111;
    /* display: flex; <-- ลบอันนี้ออก */
    /* align-items: center; <-- ลบอันนี้ออก */
}

/* ตัววิดีโอ */
.video-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.video-background video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* เลเยอร์สีดำคลุมทับวิดีโอ (ปรับความเข้มที่นี่) */
.video-overlay {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    /* ✅ แก้ไข: ปรับความทึบเป็น 0.75 (คือมืดลง 75% ทำให้วิดีโอจางลง) */
    background: rgba(0, 0, 0, 0.75);
    z-index: 1;
}

/* เนื้อหาบนวิดีโอ (✅ แก้ไข: ใช้ Absolute เพื่อดึงมาวางทับตรงกลาง) */
.hero-content-video {
    position: absolute; /* สั่งให้ลอย */
    top: 50%;           /* ดันลงมาครึ่งนึง */
    left: 50%;          /* ดันไปขวาครึ่งนึง */
    transform: translate(-50%, -50%); /* ดึงกลับมาจัดกึ่งกลางพอดี */
    z-index: 2;         /* ให้อยู่หน้าสุด */
    color: #fff;
    /* คืนค่าคุณสมบัติของ container เดิมเพื่อให้จัดวางสวยงาม */
    width: 100%;
    max-width: 1200px; /* ตามค่า container หลัก */
    padding: 0 15px;   /* ตามค่า container หลัก */
}

.hero-content-video h4 {
    color: var(--primary);
    font-size: 1.1rem;
    letter-spacing: 3px;
    margin-bottom: 15px;
    font-weight: 700;
}

.hero-content-video h1 {
    font-size: 4.5rem;
    line-height: 1.1;
    margin-bottom: 25px;
    font-family: 'Oswald', sans-serif;
    text-transform: uppercase;
}

.hero-content-video p {
    font-size: 1.2rem;
    color: #ddd;
    max-width: 650px;
    margin-bottom: 40px;
    line-height: 1.6;
}

/* ปุ่มแบบใส */
.btn-transparent {
    background: transparent;
    color: #fff;
    border: 2px solid #fff;
    padding: 13px 30px;
}
.btn-transparent:hover {
    background: #fff;
    color: #000;
}

/* Animation */
.animate-fade-up {
    animation: fadeInUp 1.2s ease-out forwards;
    opacity: 0;
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(40px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Responsive มือถือ */
@media (max-width: 768px) {
    .hero-video { height: 650px; } /* ปรับความสูงนิดหน่อยในมือถือ */
    .hero-content-video h1 { font-size: 2.8rem; }
    .hero-content-video p { font-size: 1rem; }
}

/* --- History Section Slider --- */

/* กำหนดความสูงขั้นต่ำให้กล่องข้อความ เพื่อไม่ให้เนื้อหากระตุกตอนเปลี่ยนสไลด์ */
.history-text-slider {
    position: relative;
    min-height: 350px; 
}

/* ตัวสไลด์แต่ละหน้า */
.history-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px); /* ให้ลอยขึ้นนิดๆ ตอนมา */
    transition: all 0.8s ease-in-out;
}

/* สไลด์ที่กำลังแสดงผล */
.history-slide.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    position: relative;
}

/* ปรับสีหัวข้อรองให้เป็นสีส้ม */
.history-slide .history-sub {
    color: var(--prima-orange);
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 10px;
    font-size: 0.9rem;
    display: block;
}

/* Responsive มือถือ */
@media (max-width: 768px) {
    .history-text-slider { min-height: auto; }
}