/* --- 1. SETTINGS & VARIABLES --- */
  :root {
      --primary-blue: #203555;
      /* สีกรมท่า */
      --primary-gold: #C79A45;
      /* สีทอง */
      --light-bg: #f8f9fa;
      --text-dark: #333;
      --text-light: #fff;
      --transition: all 0.3s ease;
  }

  * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
  }

  body {
      margin-top: 10%;
      overflow-x: hidden;
      font-family: 'Kanit', sans-serif;
      color: var(--text-dark);
      line-height: 1.6;
      background-color: #fff;
      
  }

  a {
      text-decoration: none;
      color: inherit;
  }

  ul {
      list-style: none;
  }

  img {
      max-width: 100%;
      display: block;
      object-fit: cover;
  }

  .container {
      width: 90%;
      /* บังคับกว้าง 90% เพื่อให้เหลือขอบข้างละ 5% */
      max-width: 1200px;
      /* ไม่กว้างเกิน 1200px เมื่ออยู่บนจอใหญ่ */
      margin-left: auto !important;
      margin-right: auto !important;
      box-sizing: border-box;
  }


  /* --- 3. HERO SECTION --- */
  .hero {
      padding: 40px 0;
      background: #fff;
  }

  /* คลาสเดิมของคุณ */
  .hero-border {
      margin: 0;
      display: flex;
      justify-content: center;
      /* กึ่งกลางแนวนอน */
      align-items: center;
  }

  .hero-image {
      flex: 1;
      min-width: 300px;
      display: flex;
      justify-content: center;
  }

  .hero-content {
      flex: 1;
      min-width: 300px;
      padding-right: 20px;
  }

  .hero h1 {
      font-family: 'Kanit', sans-serif;
      font-size: 2.5rem;
      color: var(--primary-blue);
      margin-bottom: 20px;
  }

  .hero p {
      color: #666;
      margin-bottom: 30px;
      font-size: 1rem;
  }

  .btn-primary {
      display: inline-block;
      background-color: var(--primary-blue);
      color: white;
      padding: 12px 30px;
      border-radius: 4px;
      font-weight: 500;
      transition: var(--transition);
  }

  .btn-primary:hover {
      background-color: var(--primary-gold);
      transform: translateY(-3px);
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
  }

  .text-primary {
      display: inline-block;
      padding: 12px 30px;
      border-radius: 4px;
      font-weight: 500;
      transition: var(--transition);
  }

  .text-primary:hover {
      color: var(--primary-gold);
      transform: translateY(-3px);
  }



  /* --- 4. INTRO GRID (Black & Blue Boxes) --- */
  .intro-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 20px;
      padding: 40px 0;
  }

  .intro-box {
      padding: 40px;
      border-radius: 8px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      min-height: 250px;
      position: relative;
      overflow: hidden;
  }

  .box-black {
      background-color: #000;
      color: #fff;
      align-items: center;
      text-align: center;
  }

  .box-black .logo-large {
      color: var(--primary-gold);
      font-size: 4rem;
      margin-bottom: 15px;
  }

  .box-blue {
      background-color: #2b3a55;
      /* Blue grey */
      color: #fff;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
  }

  .box-blue-text {
      padding-right: 10px;
  }

  .box-blue img {
      width: 100%;
  }

  /* --- 5. COLLECTION SECTION --- */
  .collection {
      text-align: center;
      padding: 60px 0;
  }

  .section-title {
      font-size: 2rem;
      margin-bottom: 40px;
      color: #000;
      font-weight: 600;
  }

  .product-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 30px;
  }

  .product-card {
      background-color: #000;
      color: #fff;
      padding: 20px;
      text-align: left;
      border-radius: 8px;
      transition: var(--transition);
  }

  .product-card:hover {
      transform: translateY(-10px);
  }

  .product-img-wrap {
      height: 300px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #111;
      margin-bottom: 20px;
  }

  .product-img-wrap img {
      max-height: 100%;
  }

  .product-card h3 {
      color: var(--primary-gold);
      margin-bottom: 10px;
      font-size: 1.2rem;
  }

  .product-card p {
      font-size: 0.9rem;
      color: #ccc;
      margin-bottom: 15px;
  }

  .link-text {
      color: #fff;
      text-decoration: underline;
      font-size: 0.85rem;
      cursor: pointer;
  }

  .link-text:hover {
      transition: all 0.25s ease-in;
      color: var(--primary-gold);
  }

  /* --- 6. CRAFTSMANSHIP --- */
  .craft {
      padding: 60px 0;
      background: #f4f4f4;
  }

  .craft-container {
      margin: 0;
      display: flex;
      justify-content: center;
      /* กึ่งกลางแนวนอน */
      align-items: center;
  }

  .craft-text {
      flex: 1;
      min-width: 300px;
      padding-right: 40px;
  }

  .craft-text h2 {
      font-size: 2rem;
      margin-bottom: 20px;
      font-family: 'Kanit', sans-serif;
  }

  .craft-text ul {
      margin-top: 20px;
  }

  .craft-text li {
      margin-bottom: 10px;
      font-size: 0.95rem;
  }

  .craft-img {
      flex: 1;
      min-width: 300px;
  }

  .craft-img img {
      width: 100%;
      border-radius: 8px;
      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
  }

  /* --- 7. STORY SECTION --- */
  .story {
      padding: 60px 0;
  }

  .story-card {
      display: flex;
      flex-wrap: wrap;
      background: #fff;
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  }

  .story-content {
      flex: 1;
      padding: 40px;
      background-color: #2e4057;
      /* Blue text block */
      color: white;
      min-width: 300px;
      display: flex;
      flex-direction: column;
      justify-content: center;
  }

  .story-content h3 {
      font-family: 'Kanit';
      font-size: 1.5rem;
      margin-bottom: 15px;
  }

  .story-img {
      flex: 1;
      min-width: 300px;
      background: #eee;
  }

  .story-img img {
      width: 100%;
      height: 100%;
      object-fit: cover;
  }

  .btn-gold-full {
      display: block;
      width: 100%;
      background-color: var(--primary-gold);
      color: white;
      text-align: center;
      padding: 15px;
      margin-top: 20px;
      font-weight: bold;
      border-radius: 4px;
      transition: var(--transition);
  }

  .btn-gold-full:hover {
      background-color: #b08d48;
  }

  /* --- 8. FOOTER FEATURES --- */
  .features {
      padding: 50px 0;
      text-align: center;
  }

  .features h2 {
      margin-bottom: 40px;
      font-family: 'Kanit';
      color: var(--primary-blue);
  }

  .feature-icons {
      display: flex;
      justify-content: space-around;
      flex-wrap: wrap;
      gap: 20px;
  }

  .feature-image {
      width: 60%;
      margin: 0 auto;
  }

  .feature-item {
      flex: 1;
      max-width: 200px;
  }

  @media (max-width: 992px) {
    .feature-item{
        flex-basis: 100%;
        margin-bottom: 20px;
    }
  }

  .feature-item i {
      font-size: 2rem;
      margin-bottom: 10px;
      color: #333;
  }

  .feature-item h4 {
      font-size: 0.9rem;
      margin-bottom: 5px;
      font-weight: bold;
  }

  .feature-item p {
      font-size: 0.8rem;
      color: #777;
  }


  .floating {
      animation: float 4s ease-in-out infinite;
  }


  /* --- 9. MAIN FOOTER --- */
  footer {
      background-color: var(--primary-blue);
      color: #ccc;
      padding: 50px 0 20px;
      font-size: 1rem;
  }

  .footer-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 40px;
      margin-bottom: 30px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
      padding-bottom: 30px;
  }

  .footer-col h4 {
      color: #fff;
      font-size: 1.5rem;
      margin-bottom: 15px;
      font-family: 'Kanit';
  }

  .social-links a {
      margin-right: 15px;
      font-size: 1.2rem;
      transition: 0.3s;
  }

  .social-links a:hover {
      color: var(--primary-gold);
  }

  .copyright {
      text-align: center;
      font-size: 0.8rem;
      opacity: 0.6;
  }

  /* --- 10. ANIMATIONS --- */
  .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);
  }

  /****************************************Product*****************************************/

  .container-product {
      max-width: 1100px;
      width: 100%;
      /* ป้องกันการล้นจอ */
      margin: 0 auto;
      padding: 0 20px;
  }

  /* --- Hero Section --- */
  .hero-product {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 60px 0;
      /* ลด Padding ด้านข้างเพราะคุมด้วย Container แล้ว */
      gap: 40px;
      /* เพิ่มระยะห่างระหว่างข้อความกับรูป */
      overflow: hidden;
  }

  .hero-text-product {
      flex: 1;
      min-width: 300px;
      animation: slideInLeft 1s ease-out;
  }

  .hero-text-product h1 {
      font-size: clamp(32px, 5vw, 48px);
      /* ขนาดตัวอักษรยืดหยุ่นตามหน้าจอ */
      color: var(--primary-blue);
      margin-bottom: 20px;
      line-height: 1.2;
  }

  .hero-text-product p {
      font-size: 18px;
      color: var(--primary-blue);
      margin-bottom: 30px;
      line-height: 1.6;
  }

  .btn-product {
    
      color: #fff;
      cursor: pointer;
  }

  .btn-product:hover {
      transition: all 0.3s ease;
      color: var(--primary-gold);
  }

  .btn-primary-product {
      background-color: var(--primary-color);
      color: var(--text-light);
      border: 2px solid var(--primary-color);
      padding: 12px 35px;
      border-radius: 50px;
      /* ปุ่มมนสวยขึ้น */
      cursor: pointer;
      font-weight: 600;
      transition: all var(--transition-speed);
      display: inline-block;
  }

  .btn-primary-product:hover {
      background-color: var(--accent-color);
      border-color: var(--accent-color);
      transform: translateY(-3px);
      /* ขยับขึ้นเล็กน้อยตอน Hover */
      box-shadow: 0 5px 15px rgba(197, 160, 89, 0.4);
  }

  .hero-image-product {
      flex: 1;
      display: flex;
      justify-content: center;
      animation: float 6s ease-in-out infinite;
      /* ช้าลงเพื่อให้ดูนุ่มนวล */
  }

  /* --- Banner / Voucher --- */
  .banner-product {
      margin: 60px auto;
  }

  .banner-card-product {
      background: linear-gradient(45deg, #000 0%, #1a2a44 100%);
      /* ไล่สีให้ดูแพง */
      color: var(--text-light);
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 50px;
      border-radius: 20px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
      margin-top: 50px;
      /* ปรับลดจาก 150px เพื่อไม่ให้ห่างเกินไป */
      flex-wrap: wrap;
      /* รองรับมือถือ */
      gap: 20px;
  }

  .banner-content-product h2 {
      font-size: clamp(24px, 4vw, 36px);
      margin: 0 0 10px 0;
  }

  .banner-content-product a {
      color: var(--accent-color);
      text-decoration: none;
      border-bottom: 1px solid var(--accent-color);
      transition: opacity 0.3s;
  }

  .banner-content-product a:hover {
      opacity: 0.8;
  }

  /* --- Grid Layout (Featured) --- */
  .grid-section-product {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      /* 2 คอลัมน์เท่ากัน */
      gap: 20px;
      margin-bottom: 80px;
  }

  .card-product {
      position: relative;
      border-radius: 15px;
      overflow: hidden;
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
      transition: transform 0.3s ease;
  }

  .card-product:hover {
      transform: translateY(-5px);
  }

  .grid-large-product {
      height: 100%;
      min-height: 400px;
      /* กำหนดความสูงขั้นต่ำ */
  }

  .grid-large-product img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.5s ease;
  }

  .grid-large-product:hover img {
      transform: scale(1.05);
      /* Zoom ภาพเล็กน้อยตอน Hover */
  }

  .card-overlay-product {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      padding: 30px;
      background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
      color: white;
  }

  .grid-side-product {
      display: flex;
      flex-direction: column;
      gap: 20px;
  }

  .grid-small-product {
      display: flex;
      background: var(--bg-dark);
      padding: 20px;
      align-items: center;
      border-radius: 15px;
      flex: 1;
      color: white;
  }

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

  .mini-card-product {
      background: #f8f9fa;
      padding: 20px;
      text-align: center;
      border-radius: 15px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      color: var(--primary-color);
  }

  /* --- Products Section --- */
  .section-title-product {
      text-align: center;
      margin-bottom: 50px;
      color: var(--primary-color);
      font-size: 32px;
      font-weight: 700;
      position: relative;
  }

  .section-title-product::after {
      content: '';
      display: block;
      width: 60px;
      height: 4px;
      background: var(--accent-color);
      margin: 15px auto 0;
      border-radius: 2px;
  }

  .project-list-product {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
      /* Responsive อัตโนมัติ */
      gap: 30px;
      margin-bottom: 60px;
  }

  .project-item-product {
      background: white;
      text-align: center;
      border: none;
      padding: 20px;
      border-radius: 15px;
      transition: all 0.3s ease;
      box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
  }

  .project-item-product:hover {
      transform: translateY(-10px);
      box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
  }

  .project-item-product img {
      width: 100%;
      border-radius: 10px;
      margin-bottom: 15px;
      aspect-ratio: 1 / 1;
      /* ทำให้รูปเป็นสี่เหลี่ยมจัตุรัสเสมอ */
      object-fit: cover;
  }

  .btn-gold-product {
      background-color: white;
      color: var(--accent-color);
      border: 2px solid var(--accent-color);
      width: 100%;
      padding: 12px;
      margin-top: 15px;
      cursor: pointer;
      border-radius: 8px;
      font-weight: 600;
      transition: 0.3s;
  }

  .btn-gold-product:hover {
      background-color: var(--accent-color);
      color: var(--primary-gold);
  }

  /* ทำให้รายการสินค้าเรียงกันและเลื่อนซ้ายขวาได้ */
  .project-list-product {
      display: flex;
      overflow-x: auto;
      /* เปิดการเลื่อนแนวนอน */
      scroll-behavior: smooth;
      gap: 20px;
      padding-bottom: 15px;
      -webkit-overflow-scrolling: touch;
      /* ให้เลื่อนลื่นบนมือถือ */
  }

  /* ป้องกันไม่ให้การ์ดสินค้าหดตัว */
  .project-item-product {
      flex: 0 0 auto;
      width: 250px;
      /* กำหนดขนาดความกว้างของการ์ดแต่ละใบ */
      cursor: pointer;
  }

  /* ซ่อน Scrollbar (เลือกใส่ได้ตามความชอบ) */
  .project-list-product::-webkit-scrollbar {
      height: 8px;
  }

  .project-list-product::-webkit-scrollbar-thumb {
      background: #ccc;
      border-radius: 10px;
  }

  /* --- Animations --- */
  @keyframes slideInLeft {
      from {
          opacity: 0;
          transform: translateX(-50px);
      }

      to {
          opacity: 1;
          transform: translateX(0);
      }
  }

  @keyframes fadeIn {
      from {
          opacity: 0;
          transform: translateY(20px);
      }

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

  @keyframes float {
      0% {
          transform: translateY(0px);
      }

      50% {
          transform: translateY(-20px);
      }

      /* เพิ่มระยะ Float */
      100% {
          transform: translateY(0px);
      }
  }

  /* --- Mobile Responsiveness (ส่วนสำคัญ) --- */
  @media (max-width: 992px) {
      .hero-product {
          padding: 40px 0;
      }

      .hero-text-product h1 {
          font-size: 36px;
      }
  }

  @media (max-width: 768px) {

      /* Hero */
      .mini-card-product {
          display: none;
      }

      .hero-product {
          flex-direction: column-reverse;
          /* เอารูปขึ้นก่อนบนมือถือ */
          text-align: center;
      }

      .hero-text-product {
          width: 100%;
      }

      /* Banner */
      .banner-card-product {
          flex-direction: column;
          text-align: center;
          padding: 30px;
      }

      /* Grid Layout */
      .grid-section-product {
          grid-template-columns: 1fr;
          /* เปลี่ยนเป็น 1 คอลัมน์ */
      }

      .grid-large-product {
          min-height: 300px;
      }

      .grid-bottom-product {
          /* ถ้าอยากให้ตารางเล็กเรียง 2 บนมือถือ ให้คงไว้ ถ้าอยากให้เรียง 1 ให้แก้เป็น 1fr */
          grid-template-columns: 1fr 1fr;
      }
  }

  @media (max-width: 480px) {
      .grid-bottom-product {
          grid-template-columns: 1fr;
          /* มือถือจอเล็กมาก ให้เรียง 1 คอลัมน์ */
      }

      .hero-text-product h1 {
          font-size: 28px;
      }
  }

  /****************************************contact*****************************************/

  /* Main Section */
  .main-content-contact {
      /* ใช้ clamp สำหรับ Padding ที่ยืดหยุ่นตามหน้าจอ */
      padding: clamp(40px, 8vw, 100px) 20px;
      background-color: #f4f7f9;
      /* เดิมคือ --bg-light */
      display: flex;
      justify-content: center;
  }

  .contact-section-contact {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
      gap: clamp(20px, 5vw, 60px);
      max-width: 1200px;
      width: 100%;
      align-items: start;
  }

  /* Contact Card */
  .contact-card-contact {
      background: #ffffff;
      padding: clamp(30px, 5vw, 50px);
      /* เงาแบบ Soft Luxury */
      box-shadow: 0 20px 50px rgba(0, 0, 0, 0.05);
      border-radius: 20px;
      border: 1px solid rgba(255, 255, 255, 0.8);
      transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
  }

  .contact-card-contact:hover {
      transform: translateY(-10px);
      box-shadow: 0 30px 60px rgba(0, 0, 0, 0.1);
  }

  .contact-card-contact h2 {
      font-size: clamp(24px, 4vw, 32px);
      text-align: center;
      margin-bottom: 40px;
      color: #1a2a3a;
      /* เดิมคือ --dark-blue */
      font-weight: 700;
      letter-spacing: -0.5px;
  }

  .contact-card-contact h2::after {
      content: '';
      display: block;
      width: 50px;
      height: 4px;
      /* ไล่เฉดสีทองตรงเส้นใต้หัวข้อ */
      background: linear-gradient(90deg, #d4af37, #f3e5ab);
      margin: 15px auto 0;
      border-radius: 10px;
  }

  /* Input Fields */
  .input-group-contact {
      margin-bottom: 30px;
  }

  .input-group-contact label {
      font-size: 13px;
      text-transform: uppercase;
      letter-spacing: 1px;
      color: #666;
      /* เดิมคือ --text-gray */
      margin-bottom: 10px;
      display: block;
      transition: 0.3s;
  }

  .input-group-contact input {
      width: 100%;
      padding: 12px 0;
      background: transparent;
      border: none;
      border-bottom: 1.5px solid #eee;
      font-size: 16px;
      transition: all 0.3s ease;
  }

  .input-group-contact input:focus {
      border-bottom-color: #d4af37;
      /* เปลี่ยนเป็นสีทองเมื่อ focus */
      outline: none;
  }

  .input-group-contact:focus-within label {
      color: #d4af37;
      transform: translateX(5px);
  }

  /* Button */
  .send-btn-contact {
      width: 100%;
      padding: 18px;
      background: #1a2a3a;
      /* สีน้ำเงินเข้ม */
      color: #fff;
      border: none;
      border-radius: 12px;
      font-size: 15px;
      font-weight: 600;
      letter-spacing: 2px;
      cursor: pointer;
      transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
      box-shadow: 0 10px 20px rgba(26, 42, 58, 0.15);
  }

  .send-btn-contact:hover {
      background: #d4af37;
      /* เปลี่ยนเป็นสีทองเมื่อ hover */
      transform: translateY(-3px) scale(1.02);
      box-shadow: 0 15px 30px rgba(212, 175, 55, 0.3);
  }

  /* Info Row */
  .contact-info-row-contact {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 15px;
      margin-top: 40px;
      padding-top: 30px;
      flex-wrap: wrap;
      gap: 20px;
      border-top: 1px solid #f0f0f0;
  }

  .info-item-contact {
      display: flex;
      flex-direction: column;
      align-items: center;
      font-size: 12px;
      color: #666;
      text-align: center;
      transition: 0.3s;
  }

  .info-item-contact i {
      font-size: 20px;
      color: #d4af37;
      margin-bottom: 10px;
  }

  /* Map Section */
  .map-container-contact {
      width: 100%;
      height: 100%;
      min-height: 500px;
      border-radius: 24px;
      overflow: hidden;
      box-shadow: 0 20px 50px rgba(0, 0, 0, 0.05);
      border: 8px solid white;
      /* กรอบขาวเพิ่มความหรู */
  }

  .map-container-contact iframe {
      width: 100%;
      height: 100%;
      border: none;
      /* แผนที่โทนขาวดำ (High-end look) */
      filter: grayscale(1) contrast(1.1) brightness(1.1);
      transition: filter 0.8s cubic-bezier(0.23, 1, 0.32, 1);
  }

  .map-container-contact:hover iframe {
      filter: grayscale(0);
  }

  /* --- Responsive สำหรับมือถือและแท็บเล็ต --- */
  @media (max-width: 768px) {

      .main-content-contact {
          padding: 0 !important;
          margin: 0 !important;
      }

      .contact-section-contact {
          margin-top: 50px;
          padding: 10px 0;
          /* เว้นระยะบนล่างนิดหน่อย แต่ซ้ายขวาให้ชิด */
          gap: 0;
      }

      /* 2. ทำให้ Card ฟอร์มขยายเต็ม 100% และลบเงา/ขอบโค้ง (ถ้าต้องการให้ดูเต็มจริงๆ) */
      .contact-card-contact {
          width: 100% !important;
          max-width: 100% !important;
          border-radius: 0;
          /* ลบขอบโค้งออกเพื่อให้ชิดขอบจอพอดี */
          padding: 20px;
          /* เว้นระยะให้ตัวหนังสือไม่ชิดขอบหน้าจอเกินไป */
          box-shadow: none;
          /* ลบเงาเพื่อให้ดูแบนไปกับหน้าจอ */
      }

      /* 3. ทำให้ Input และ Button กว้างเต็มพื้นที่ข้างใน */
      .input-group-contact input {
          width: 100% !important;
          font-size: 16px;
          /* กันจอ Zoom บน iPhone */
      }

      .send-btn-contact {
          width: 100% !important;
          border-radius: 0;
          /* ปุ่มเต็มความกว้าง */
          padding: 15px;
      }

      /* 4. ปรับส่วนแผนที่ให้เต็มจอด้วย */
      .map-container-contact {
          margin-top: 50px;
          width: 100% !important;
          max-width: 100% !important;
          height: 300px;
      }

      .map-container-contact iframe {
          border: 0;
          width: 100%;
      }
  }



  /****************************************about*****************************************/
  .hero-about {
      padding: 80px 0;
      overflow: hidden;
  }

  .hero-grid-about {
      display: grid;
      grid-template-columns: 1.2fr 1fr;
      align-items: center;
      gap: 40px;
  }

  .hero-text-about h1 {
      font-size: 2.5rem;
      margin-bottom: 20px;
      color: var(--dark-blue);
      animation: fadeInDown 1s ease-out;
  }

  .hero-text-about p {
      margin-bottom: 15px;
      color: var(--text-gray);
      animation: fadeInUp 1s ease-out;
  }

  .btn-about {
      display: inline-block;
      background-color: var(--dark-blue);
      color: white;
      padding: 12px 30px;
      text-decoration: none;
      border-radius: 4px;
      margin-top: 20px;
      transition: transform 0.2s, background 0.3s;
  }

  .btn-about:hover {
      background-color: var(--gold);
      transform: translateY(-3px);
  }

  .hero-image-about img {
      max-width: 100%;
      height: auto;
  }

  /* --- Animations --- */
  @keyframes fadeInUp {
      from {
          opacity: 0;
          transform: translateY(20px);
      }

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

  @keyframes fadeInDown {
      from {
          opacity: 0;
          transform: translateY(-20px);
      }

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

  .floating-about {
      animation: float 3s ease-in-out infinite;
  }

  @keyframes float {

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

      50% {
          transform: translateY(-15px);
      }
  }



  /* --- RESPONSIVE ADJUSTMENTS --- */

  /* สำหรับ Tablet & Mobile */
  @media (max-width: 992px) {
      .banner-card-product {
          margin-top: 80px;
      }

      .hero-border,
      .hero-product,
      .hero-grid-about,
      .contact-section-contact,
      .craft-container {
          display: flex !important;
          flex-direction: column !important;
          /* --- เพิ่ม 2 บรรทัดนี้เพื่อให้ Item อยู่ตรงกลางหน้าจอ --- */
          align-items: center !important;
          justify-content: center !important;
          text-align: center !important;
          padding: 40px 20px !important;
          /* เว้นระยะในกล่องให้ดูไม่เบียดขอบ */
      }

      .hero-content,
      .hero-image,
      .hero-text-product,
      .hero-image-product,
      .hero-text-about,
      .hero-image-about,
      .craft-text {
          width: 100% !important;
          padding-right: 0 !important;
          margin-bottom: 20px;
          display: flex;
          flex-direction: column;
          align-items: center;
          /* บังคับให้ข้อความและปุ่มในกล่องอยู่กลาง */
      }

      .hero-image img,
      .hero-image-product img {
          margin: 0 auto;
          /* บังคับรูปภาพให้อยู่กึ่งกลาง */
      }
  }

  /* สำหรับการเว้นระยะ Container ซ้ายขวาทุกหน้าจอ */
  .container,
  .container-product,
  .hero-border {
      width: 90% !important;
      /* กว้าง 90% ของจอ */
      max-width: 1200px !important;
      margin-left: auto !important;
      margin-right: auto !important;
      box-sizing: border-box !important;
  }

  /* สำหรับ Mobile (จอเล็กกว่า 768px) */
  @media (max-width: 768px) {
      .footer-logo {
          margin: 0;
          display: flex;
          justify-content: center;
          /* กึ่งกลางแนวนอน */
          align-items: center;
      }

      .nav-links {
          display: none;
          /* ซ่อนเมนูปกติ (ควรทำ Hamburger Menu เพิ่ม) */
      }

      .menu-toggle {
          display: block;
          /* แสดงปุ่มเมนูสำหรับมือถือ */
      }

      .hero h1 {
          font-size: 1.8rem;
          /* ลดขนาดตัวอักษรหัวข้อ */
      }

      .intro-grid,
      .product-grid,
      .project-list-product {
          grid-template-columns: 1fr;
          /* ทุกอย่างเป็นแถวเดียว */
          padding: 10px;
      }

      .footer-grid {
          grid-template-columns: 1fr;
          /* Footer เรียงต่อกันลงมา */
          text-align: center;
      }

      .box-blue {
          flex-direction: column;
          text-align: center;
      }

      .box-blue img {
          width: 80%;
          margin-top: 20px;
      }
  }