/* นำเข้าฟอนต์ DB ที่ซื้อมา */
@font-face {
    font-family: 'DBHelvethaicaXLi';
    src: url('font/DB\ Helvethaica\ X\ Li\ v3.2.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'DBHelvethaicaXBd';
    src: url('font/DB\ Helvethaica\ X\ Bd\ v3.2.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'DidotLTPro-BoldItalic';
    src: url('font/DidotLTPro-BoldItalic.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}

html, body {
    
    html, body {
        margin: 0;
        padding: 0;
        max-width: 100%;
        overflow-x: hidden;
    }
    
}

*,
*::before,
*::after {
    box-sizing: border-box; /* ใช้ box-sizing เพื่อควบคุมขนาดของทุกองค์ประกอบ */
}

body {
    font-family: 'DBHelvethaicaXLi', sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ส่วนของเมนูนำทาง */
/* ====== Base (Desktop/Tablet กว้าง) ====== */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px; /* ลดบน-ล่าง */
  background: #4D4D4F;
  color: white;
  height: 56px; /* สูงพอประมาณ */
  box-sizing: border-box;
}

.logo img {
  height: 64px; /* โลโก้พอดีบาร์ */
  width: auto;
  display: block;
}

nav {
  display: block;
}

nav ul {
  list-style: none;
  display: flex;
  align-items: center;
  padding: 0;
  margin: 0;
  gap: 0; /* เราคุมด้วยตัวแบ่ง | */
}

.navbar a,
nav ul li a {
  color: #fff;
  text-decoration: none;
  font-weight: 700;
}

.navbar ul li a {
  font-size: 18px;           /* อ่านง่ายบนเดสก์ท็อป */
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ตัวแบ่ง | ระหว่างเมนู */
nav ul li {
  position: relative;
  display: flex;
  align-items: center;
}

nav ul li:not(:last-child)::after {
  content: "|";
  color: #ccc;
  font-size: 18px;
  margin: 0 12px;
  display: inline-block;
}

/* Hover */
nav ul li a:hover { color: #ddd; }

/* ปุ่ม hamburger ที่มีอยู่ใน HTML — ไม่ใช้ JS, ซ่อนไว้บนเดสก์ท็อป */
.menu-toggle { display: none; }

/* ====== Breakpoint 1024px ลงไป (ลดขนาดเล็กน้อย) ====== */
@media (max-width: 1024px) {
  .logo img { height: 56px; }
  .navbar ul li a { font-size: 16px; }
  nav ul li:not(:last-child)::after { font-size: 16px; margin: 0 10px; }
  .navbar { height: 56px; }
}

/* ====== Breakpoint 768px ลงไป (จัดวางเป็น 2 แถว + เมนูเลื่อนข้าง) ====== */
@media (max-width: 768px) {
  .navbar {
    flex-wrap: wrap;
    height: auto;             /* ปล่อยสูงอัตโนมัติ */
    padding: 8px 14px;
    row-gap: 8px;
  }

  .logo { flex: 1 1 auto; }
  .logo img { height: 48px; }

  /* ซ่อนตัวแบ่ง | เพื่อให้กะทัดรัด */
  nav ul li:not(:last-child)::after { content: none; }

  /* ทำเมนูเป็นแถวเลื่อนด้านข้าง */
  nav {
    order: 3;                 /* ให้เมนูลงมาด้านล่างโลโก้ */
    width: 100%;
  }

  nav ul {
    display: inline-flex;
    gap: 14px;                /* ใช้ช่องว่างแทน | */
    width: 100%;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px;      /* เผื่อพื้นที่นิ้ว */
  }

  /* ซ่อนสกอลบาร์บนบางเบราว์เซอร์ (ถ้าอยากเห็นให้ลบทิ้ง) */
  nav ul::-webkit-scrollbar { height: 6px; }
  nav ul::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.25); border-radius: 3px; }

  .navbar ul li a {
    font-size: 15px;
    padding: 6px 0;          /* เพิ่มพื้นที่แตะ */
  }

  /* ปุ่ม hamburger แสดงเพื่อความคุ้นตา แต่ไม่ต้องกด */
  .menu-toggle {
    display: block;
    font-size: 22px;
    line-height: 1;
    user-select: none;
    cursor: default;          /* ไม่ให้ดูเหมือนกดได้ (เราไม่ใช้ JS) */
  }
}

/* ====== Breakpoint 480px ลงไป (จอมือถือเล็ก) ====== */
@media (max-width: 480px) {
  .logo img { height: 42px; }
  .navbar { padding: 8px 12px; }
  .navbar ul li a { font-size: 14px; letter-spacing: 0.2px; }
  nav ul { gap: 12px; }
}

/* ====== Responsive: เปิด/ปิดเมนูด้วยปุ่ม ☰ ====== */
@media (max-width: 768px) {
  /* ทำให้ปุ่มกดได้จริง */
  .menu-toggle {
    display: block !important;       /* ให้โชว์บนจอเล็ก */
    font-size: 24px;
    line-height: 1;
    cursor: pointer;                 /* ให้เมาส์เป็นรูปมือ */
    user-select: none;
    padding: 6px 8px;
  }

  /* เริ่มต้น: ซ่อนเมนู (ทับของเดิมที่เป็น inline-flex/scroll) */
  .navbar nav {
    order: 3;                        /* อยู่ใต้โลโก้/ปุ่ม */
    width: 100%;
    display: none;                   /* ปิดไว้ก่อน */
  }

  /* เมื่อมีคลาส .open ที่ .navbar -> แสดงเมนู */
  .navbar.open nav {
    display: block;
    animation: slideDown 160ms ease-out;
  }

  /* จัดเมนูเป็นแนวตั้ง กดง่าย */
  .navbar nav ul {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px;
    padding: 8px 0 12px;
    margin: 0;
    overflow: visible;               /* ไม่ต้องเลื่อนแนวนอนแล้ว */
    white-space: normal;             /* ให้ตัดบรรทัดได้ */
  }

  /* ปรับขนาดตัวอักษร/พื้นที่แตะ */
  .navbar ul li a {
    font-size: 16px;
    padding: 8px 2px;
  }

  /* ซ่อนตัวแบ่ง | บนมือถือให้โล่ง */
  nav ul li:not(:last-child)::after { content: none !important; }

  /* ย่อโลโก้บนจอเล็กนิดนึง */
  .logo img { height: 48px; }

  /* กันเคสเมนูยาวมาก ให้แถวลิงก์เว้นระยะขอบ */
  .navbar { row-gap: 8px; }
}

/* แอนิเมชันกางเมนู */
@keyframes slideDown {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.logo img {
    height: 70px;  /* ปรับขนาดโลโก้ให้เล็กลง (ลองลดลงเรื่อยๆ จนพอดี) */
    width: auto;
}

/* ส่วนของ Hero Section ที่ใช้ภาพพื้นหลังและจัดให้อยู่ตรงกลาง */
.hero {
    display: flex;
    justify-content: flex-start; /* ขยับเนื้อหาไปทางซ้าย */
    align-items: center;
    width: 100%;
    height: 100vh;
    background: url('images/page1.jpg') no-repeat center center/cover;
    color: white;
    position: relative;
    padding-left: 5%;
}

.hero-content {
    position: relative;
    z-index: 1;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.hero-content h1 {
    font-size: 65px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 6px;
    font-family: 'DidotLTPro-BoldItalic', sans-serif;
    line-height: 0; /* ควบคุมระยะห่างระหว่างบรรทัด */
    margin-bottom: 30px; /* เพิ่มช่องว่างด้านล่างของ h1 */
}

.hero-content p {
    font-size: 26px;
    font-weight: 300;
    letter-spacing: 3px;
    font-family: 'DBHelvethaicaXLi', sans-serif;
    margin-top: 15px; /* เพิ่มช่องว่างด้านบนของ p */
}

/* กำหนดลักษณะของโลโก้ ให้มีขนาดเหมาะสมและอยู่ตรงกลาง */
.hero-logo {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
    margin-bottom: 40px;
    width: 140px;
    height: auto;
}

.hero-logo img {
    width: 200px;
    height: auto;
    display: block;
}

.hero::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

/* ส่วนของสินค้า */
.products {
    text-align: center;
    padding: 50px;
    background: url('images/BG10-07.jpg') no-repeat center center/cover;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* ใช้ Grid Layout จัดสินค้าเป็นตาราง */
.product-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 50px;
    justify-content: center;
    align-items: start;
    max-width: 100%; /* ใช้ 100% เพื่อไม่ให้เกินขนาดหน้าจอ */
    height: 100%;
}

.product {
    padding: 0;
    border-radius: 0;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    overflow: hidden;
    width: 100%;
    min-width: 230px; /* เพิ่ม min-width */
    max-width: 230px; /* คงขนาดสูงสุดตามเดิม */
    height: auto;
    text-align: center;
}

.product img {
    width: 100%;
    height: 220px; /* กำหนดความสูงให้เท่ากัน */
    object-fit: cover; /* ป้องกันการบีบรูปผิดอัตราส่วน */
    display: block;
}

.product h3 {
    font-size: 30px; /* ปรับขนาดตัวอักษรให้พอดี */
    font-weight: 700;
    text-transform: uppercase;
    font-family: 'DBHelvethaicaXBd', sans-serif;
    margin-top: 20px;
}

.product p {
    font-size: 24px; /* ปรับขนาดฟอนต์ให้เหมาะสม */
    font-weight: 300;
    font-family: 'DBHelvethaicaXLi', sans-serif;
    margin-top: -20px;
}

.btn {
    background: black;
    color: white;
    padding: 10px 20px;
    border: none;
    cursor: pointer;
    margin-top: 20px;
    border-radius: 0px;
}

.btn-gold {
    background: #c5a46d;
    color: white;
}

.btn-main {
    background: #A1927C;
    color: white;
}

/* ABOUT KIN Section */
.about-kin {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(to right, #D5D5D5 50%, #4D4D4F 50%);
    color: white;
    padding: 30px 0;
    width: 100%;
    height: auto; /* ปรับให้ความสูงเป็นอัตโนมัติ */
}

.about-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 85%;
    max-width: 1300px;
    padding: 20px 40px;
    position: relative;
    min-height: 400px;
    flex-direction: row-reverse; /* สลับตำแหน่ง */
}

.about-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 0;
    max-width: 38%;
    align-items: flex-start;
    margin-left: -5px;
    margin-right: 10px;
}

.about-text h2 {
    font-size: 40px;
    font-family: 'DidotLTPro-BoldItalic', sans-serif;
    margin-bottom: 15px;
    text-align: left;
}

.about-text p {
    font-size: 22px;
    line-height: 1.8;
    font-family: 'DBHelvethaicaXLi', sans-serif;
    margin-bottom: 25px;
    text-align: left;
}

.btn-white {
    background: white;
    color: black;
    padding: 14px 28px;
    font-size: 20px;
    font-weight: bold;
    border: none;
    cursor: pointer;
    text-transform: uppercase;
    transition: 0.3s ease;
    border-radius: 0;
    text-decoration: none; /* เอาเส้นใต้ออก */
}

.btn-white:hover {
    background: gray;
    color: white;
}

.about-image {
    flex: 1.5;
    max-width: 100%;
    display: flex;
    justify-content: flex-end;
    margin-right: 8%;
    height: 450px;
}

.about-image img {
    width: 100%;
    max-width: 1300px;
    height: auto;
    border-radius: 0;
}

/* KIN Values Section */
.kin-values {
    background: #f4f4f4;
    padding: 80px 10%;
    text-align: center;
}

.values-container {
    display: flex;
    justify-content: space-between;
    max-width: 1400px;
    margin: 0 auto;
    gap: 50px;
}

.value-item {
    flex: 1;
    text-align: center;
    padding: 20px;
}

.value-item img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    display: block;
}

.value-item h3 {
    font-size: 28px;
    font-family: 'DBHelvethaicaXBd', sans-serif;
    margin-bottom: 10px;
}

.value-item p {
    font-size: 24px;
    font-family: 'DBHelvethaicaXLi', sans-serif;
    line-height: 1.6;
    text-align: left;
}

/* popular topics */
.popular-topics {
    background-image: url('images/4-05-04.jpg'); /* ใส่ URL หรือไฟล์รูปภาพที่ต้องการ */
    background-size: cover; /* ปรับให้รูปเต็มพื้นที่ */
    background-position: center; /* จัดตำแหน่งรูปตรงกลาง */
    background-repeat: no-repeat; /* ไม่ให้รูปซ้ำ */
    padding: 80px 10%;
    text-align: center;
    position: relative;
}


.popular-topics h2 {
    font-size: 42px;
    font-family: 'DidotLTPro-BoldItalic', sans-serif;
    text-transform: uppercase;
    margin-bottom: 50px;
    letter-spacing: 2px;
    font-weight: 700;
    color: white; /* สีข้อความเป็นสีขาว */
}

.popular-container {
    display: flex;
    justify-content: space-between;
    max-width: 1400px;
    margin: 0 auto;
    gap: 50px;
}

.topic-item {
    text-align: center;
    background: white;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    margin-bottom: 40px;
    border-radius: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    height: 430px; /* ปรับความสูงของกล่องให้เท่ากัน */
    width: 100%;
    max-width: 400px;
    padding: 0;
}

.topic-item img {
    width: 100%;
    height: 250px; /* ขยายขนาดของรูปภาพ */
    object-fit: cover;
    border: none; /* ลบขอบรอบรูป */
    padding: 0; /* ลบช่องว่างรอบๆ รูป */
    object-position: top; /* ให้ส่วนบนของรูปปรากฏชัดเจน */
}


.topic-item h3 {
    font-size: 26px;
    font-family: 'DBHelvethaicaXBd', sans-serif;
    margin-top: 5px;
    margin-bottom: 0px;
    padding: 0 15px;
    color: black;
    text-align: left;
    width: 100%;
}


.topic-item p {
    font-size: 18px;
    font-family: 'DBHelvethaicaXLi', sans-serif;
    margin-top: 0px;
    margin-bottom: auto;
    padding: 0 15px;
    color: black;
    text-align: left;
    width: 100%;
    min-height: 60px; /* กำหนดความสูงขั้นต่ำของข้อความให้เท่ากัน */
    display: flex;
    align-items: center; /* จัดข้อความให้อยู่ตรงกลาง */
    flex-grow: 1; /* ทำให้ข้อความขยายตัวเท่ากัน */
}

.btn-dark {
    background: #A1927C;
    color: white;
    padding: 10px 20px;
    border: none;
    cursor: pointer;
    margin-top: 0px;
    margin-bottom: 20px;
    align-self: flex-start;
    margin-left: 15px;
}

.btn-dark:hover {
    background: #333;
}

.btn-gold {
    background: #c5a46d;
    color: white;
    padding: 10px 20px;
    border: none;
    cursor: pointer;
    margin-top: 30px;
    border-radius: 0; /* ขอบเหลี่ยม */
}

/* Awards Section */
.awards {
    padding: 50px 20px;
}

h1 {
    font-family: 'DidotLTPro-BoldItalic', Arial, sans-serif;
    font-size: 2.5em;
    margin-bottom: 10px;
    text-align: center;
}


.subtitle {
    font-family: 'DBHelvethaicaXLi', Arial, sans-serif;
    font-size: 26px;
    color: #555;
    margin-bottom: 30px;
    text-align: center;
}

.awards-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}

.award-card {
    background: white;
    padding: 20px;
    width: 400px;
    border-radius: 10px;
    text-align: center;
}

.award-card p {
    font-family: 'DBHelvethaicaXLi';
    font-size: 24px;
    color: #555;
    margin-bottom: 30px;
    text-align: center;
    line-height: 1.5; /* ควบคุมระยะห่างระหว่างบรรทัด */
}

.award-card img {
    width: 100%;
    height: 330px; /* กำหนดความสูงของรูปภาพ */
    object-fit: cover; /* ครอบคลุมพื้นที่โดยไม่เสียสัดส่วน */
    object-position: top; /* ให้แสดงเฉพาะส่วนบนของรูป */
    border: none; /* ลบขอบ */
    padding: 0; /* ลบช่องว่าง */
}

/* footer */
footer {
    background-color: #4D4D4F;
    color: white;
    padding: 30px 50px; /* ลด Padding ของ Footer ให้สมดุล */
    font-family: 'DBHelvethaicaXLi', sans-serif;
}

.footer-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

/* ลดระยะห่างของส่วนบน */
.top-section {
    margin-bottom: 10px; /* เพิ่มช่องว่างก่อนถึงเส้น */
}

/* ลดระยะห่างของส่วนล่าง */
.bottom-section {
    margin-top: 10px; /* ให้โลโก้และข้อความบริษัทอยู่ใกล้เส้น */
}

.left-section, .right-section {
    flex: 1;
}

.left-section h2 {
    font-size: 40px;
    font-weight: normal;
    margin-bottom: 1px; /* ลดช่องว่างระหว่าง h2 และ p ให้แน่นขึ้น */
    font-family: 'DBHelvethaicaXLi', sans-serif;
}

.left-section p {
    font-size: 25px;
    margin-bottom: 20px; /* ลดช่องว่างให้ข้อความใกล้กันมากขึ้น */
    opacity: 0.5;
    font-family: 'DBHelvethaicaXLi', sans-serif;
}

/* โลโก้ KIN */
.kin-logo img {
    width: 130px; /* ปรับขนาดให้สมดุล */
}

/* ไอคอนโซเชียล */
.social-icons {
    display: flex;
    justify-content: flex-end;
    gap: 0px; /* ลดช่องว่างของไอคอน */
    margin-bottom: 0px;
}

.social-icons img {
    width: 60px;
    height: 60px;
}

/* เส้นคั่นเป็นภาพ PNG */
.divider {
    text-align: center;
    margin: 15px 0; /* เพิ่มช่องว่างให้เส้นอยู่ห่างจากข้อความมากขึ้น */
}

.divider img {
    width: 100%; /* ขยายเส้นให้ยาวขึ้น */
    max-width: 100%;
    display: block;
    opacity: 0.8;
}

/* ขยับข้อมูลบริษัทให้เข้าใกล้เส้น */
.company-info {
    text-align: right;
    margin-top: 20px; /* ลดระยะห่างจากเส้นให้น้อยลง */
}

.right-section p {
    font-size: 20px;
    margin: 2px 0; /* ลดช่องว่างระหว่างบรรทัดให้แน่นขึ้น */
    opacity: 0.8;
    font-family: 'DBHelvethaicaXLi', sans-serif;
}

/* ทำให้ชื่อบริษัทชัดกว่าข้อมูลที่อยู่ */
.company-info .company-name {
    font-size: 20px;
    font-weight: bold;
    font-family: 'DBHelvethaicaXBd', sans-serif;
    margin-bottom: 2px;
}

.company-info .company-details {
    font-size: 20px;
    opacity: 0.5;
    margin-bottom: 2px;
}

/* ค่อย ๆ ปรากฏขึ้นเมื่อเลื่อนลงมา */
.fade-in {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Media Queries สำหรับมือถือและอุปกรณ์อื่นๆ */
@media only screen and (max-width: 1024px) {
    .navbar {
        padding: 10px 15px;
    }

    .hero-content h1 {
        font-size: 50px;
    }

    .hero-content p {
        font-size: 22px;
    }

    .product-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }

    .about-container {
        flex-direction: column;
        padding: 20px 10px;
    }

    .hero-logo img {
        width: 150px;
    }

    .footer-container {
        flex-direction: column;
        align-items: center;
    }

    .footer-container .left-section,
    .footer-container .right-section {
        text-align: center;
        margin-bottom: 20px;
    }

    .social-icons img {
        width: 50px;
        height: 50px;
    }
}

/* Responsive Navbar (เฉพาะมือถือและแท็บเล็ต) */
/* ซ่อน hamburger ใน desktop */
.menu-toggle {
    display: none;
    font-size: 32px;
    cursor: pointer;
    color: white;
}

/* Responsive Navbar (มือถือ) */
@media only screen and (max-width: 768px) {
    .navbar {
        flex-direction: column;
        align-items: flex-start;
        padding: 10px 20px;
        height: auto;
        position: relative;
    }

    /* แสดง hamburger ในมือถือ */
    .menu-toggle {
        display: block;
        position: absolute;
        top: 10px;
        right: 20px;
    }

    nav {
        width: 100%;
        display: none; /* ซ่อนเมนูไว้ตอนแรก */
        margin-top: 15px;
    }

    nav ul {
        flex-direction: column;
        width: 100%;
        background: #333;
    }

    nav ul li {
        margin: 10px 0;
        text-align: center;
        width: 100%;
    }

    nav ul li:not(:last-child)::after {
        display: none; /* เอาขีดคั่นออก */
    }

    .navbar ul li a {
        font-size: 18px;
        padding: 8px 0;
        width: 100%;
        display: block;
    }

    nav.active {
        display: flex; /* แสดงเมนูเมื่อกดปุ่ม */
    }


    .hero-content h1 {
        font-size: 40px;
    }

    .hero-content p {
        font-size: 18px;
    }

    .product-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .product img {
        height: 180px;
    }

    .about-container {
        flex-direction: column;
        padding: 20px 10px;
    }

    .about-text {
        max-width: 100%;
        padding: 10px;
    }

    .about-image img {
        width: 100%;
    }

    .btn-main {
        width: 100%;
        padding: 14px;
    }

    .footer-container {
        flex-direction: column;
        align-items: center;
    }

    .social-icons img {
        width: 40px;
        height: 40px;
    }
}

@media only screen and (max-width: 480px) {
    .navbar {
        padding: 5px 10px;
    }

    .logo img {
        height: 50px;
    }

    .hero-content h1 {
        font-size: 32px;
    }

    .hero-content p {
        font-size: 16px;
    }

    .product img {
        height: 150px;
    }

    .about-container {
        padding: 10px;
    }

    .footer-container {
        padding: 10px 5px;
    }

    .social-icons img {
        width: 50px;
        height: 50px;
    }
}

/* Responsive ส่วนของ ABOUT KIN */
@media only screen and (max-width: 768px) {
    .about-kin {
        padding: 0;
        background: none;
        width: 100%;
        overflow-x: hidden;
    }

    .about-container {
        flex-direction: column;
        width: 100%;
        margin: 0;
        padding: 0;
    }

    .about-text {
        background-color: #4D4D4F;
        text-align: center; /* ทำให้ข้อความและปุ่มอยู่ตรงกลาง */
        padding: 30px 15px;
        width: 100%;
        box-sizing: border-box;
        margin: 0;
    }

    .about-text h2 {
        font-size: 30px;
        margin-bottom: 15px;
    }

    .about-text p {
        font-size: 20px;
        margin-bottom: 20px;
    }

    .btn-white {
        display: inline-block;
        width: auto; /* ขนาดปุ่มพอดีกับข้อความ */
        padding: 10px 15px;
        font-size: 18px;
        margin: 20px auto; /* ทำให้ปุ่มอยู่กลางโดยใช้ margin auto */
        text-align: center; /* ปรับข้อความในปุ่มให้อยู่ตรงกลาง */
    }

    .about-image {
        background-color: #4D4D4F;
        width: 100%;
        margin: 0;
        padding: 20px 15px;
        box-sizing: border-box;
        display: flex;
        justify-content: center;
    }

    .about-image img {
        width: 100%;
        max-width: 500px;
        height: auto;
        display: block;
    }
}

/* สำหรับหน้าจอขนาดเล็ก (มือถือ/แท็บเล็ต) */
@media only screen and (max-width: 768px) {
    .kin-values {
        padding: 60px 20px;
    }

    .values-container {
        flex-direction: column; /* เปลี่ยนจากแนวนอนเป็นแนวตั้ง */
        gap: 30px; /* ลดช่องว่างระหว่างคอลัมน์ */
    }

    .value-item {
        flex: 1 1 100%; /* ให้แต่ละรายการเต็มหน้าจอ */
        padding: 20px;
        margin: 0 auto;
    }

    .value-item img {
        height: 200px; /* ปรับขนาดภาพให้เหมาะสมกับมือถือ */
    }

    .value-item h3 {
        font-size: 24px;
    }

    .value-item p {
        font-size: 20px;
    }
}

@media only screen and (max-width: 480px) {
    .value-item {
        flex: 1 1 100%;
    }

    .value-item img { 
        height: 150px; /* ปรับขนาดภาพให้เล็กลงสำหรับมือถือ */
    }

    .value-item h3 {
        font-size: 22px;
    }

    .value-item p {
        font-size: 18px;
    }
}


/* Responsive ส่วนของ populartopics */
@media only screen and (max-width: 768px) {
    .popular-topics {
        padding: 60px 20px; /* ลด padding ในมือถือ */
    }

    .popular-container {
        flex-direction: column; /* เปลี่ยนการจัดเรียงเป็นแนวตั้ง */
        gap: 30px;
    }

    .topic-item {
        width: 100%;
        max-width: none; /* ยกเลิกการจำกัดความกว้าง */
        padding: 0;
        margin: 0 auto;
    }

    .topic-item img {
        height: 200px; /* ลดขนาดรูปให้พอดีกับหน้าจอมือถือ */
        width: 100%;
        object-fit: cover; /* ให้รูปภาพเต็มขนาดโดยไม่บิดเบือน */
    }

    .topic-item h3 {
        font-size: 22px; /* ปรับขนาดข้อความ */
        margin-top: 15px; /* เพิ่มระยะห่างจากรูปภาพ */
        margin-bottom: 10px; /* ระยะห่างด้านล่างของข้อความ */
    }

    .topic-item p {
        font-size: 16px; /* ลดขนาดข้อความ */
        margin-bottom: 15px; /* เพิ่มระยะห่างระหว่างข้อความและปุ่ม */
    }

    .btn-dark {
        width: 80%; /* ปรับขนาดปุ่มไม่ให้กว้างเกินไป */
        margin: 0 auto; /* ทำให้ปุ่มอยู่ตรงกลาง */
        padding: 12px 20px;
        box-sizing: border-box; /* ป้องกันการเกินขอบ */
        font-size: 18px; /* ขนาดฟอนต์ของปุ่ม */
    }
}

@media only screen and (max-width: 480px) {
    .topic-item h3 {
        font-size: 24px;
    }

    .topic-item p {
        font-size:20px;
    }

    .btn-dark {
        padding: 10px 15px;
        width: auto; /* ขนาดปุ่มพอดีไม่ให้กว้างเกินไป */
        margin: 0 auto; /* ทำให้ปุ่มอยู่ตรงกลาง */
        font-size: 16px; /* ลดขนาดฟอนต์ในปุ่ม */
        margin-bottom: 20px; /* เพิ่มระยะห่างด้านล่าง */
    }
    
}

@media only screen and (max-width: 480px) {
    .hero {
        display: flex;
        justify-content: center; /* จัดเนื้อหากลางในแนวนอน */
        align-items: center; /* จัดเนื้อหากลางในแนวตั้ง */
        height: 100vh; /* ให้ความสูงเต็มหน้าจอ */
        text-align: center; /* จัดข้อความให้อยู่ตรงกลาง */
        padding: 0 10px; /* กำหนด padding เล็กน้อยเพื่อไม่ให้ข้อความติดขอบ */
    }

    .hero-content {
        display: flex;
        flex-direction: column; /* ให้เนื้อหาอยู่ในแนวตั้ง */
        justify-content: center; /* จัดเนื้อหากลางในแนวนอน */
        align-items: center; /* จัดเนื้อหากลางในแนวตั้ง */
        text-align: center; /* ให้ข้อความใน hero-content อยู่กลาง */
    }

    .hero-logo img {
        width: 150px; /* ปรับขนาดโลโก้ให้พอดีในมือถือ */
        height: auto;
    }

    .hero-content h1 {
        font-size: 32px; /* ปรับขนาดของหัวข้อ */
    }

    .hero-content p {
        font-size: 16px; /* ปรับขนาดข้อความ */
        margin-top: 10px;
    }
}