/**
 * WEBSITE: https://themefisher.com
 * TWITTER: https://twitter.com/themefisher
 * FACEBOOK: https://www.facebook.com/themefisher
 * GITHUB: https://github.com/themefisher/
 */

@charset "utf-8";
@font-face {
    font-family: 'db_heaventbold';
    src: url('../fonts/db_heavent/db_heavent_bd_v3.2.1-webfont.eot');
    src: url('../fonts/db_heavent/db_heavent_bd_v3.2.1-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/db_heavent/db_heavent_bd_v3.2.1-webfont.woff2') format('woff2'),
         url('../fonts/db_heavent/db_heavent_bd_v3.2.1-webfont.woff') format('woff'),
         url('../fonts/db_heavent/db_heavent_bd_v3.2.1-webfont.ttf') format('truetype'),
         url('../fonts/db_heavent/db_heavent_bd_v3.2.1-webfont.svg#db_heaventbold') format('svg');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'db_heaventmed';
    src: url('../fonts/db_heavent/db_heavent_med_v3.2.1-webfont.eot');
    src: url('../fonts/db_heavent/db_heavent_med_v3.2.1-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/db_heavent/db_heavent_med_v3.2.1-webfont.woff2') format('woff2'),
         url('../fonts/db_heavent/db_heavent_med_v3.2.1-webfont.woff') format('woff'),
         url('../fonts/db_heavent/db_heavent_med_v3.2.1-webfont.ttf') format('truetype'),
         url('../fonts/db_heavent/db_heavent_med_v3.2.1-webfont.svg#db_heaventmed') format('svg');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'db_heaventregular';
    src: url('../fonts/db_heavent/db_heavent_v3.2.1-webfont.eot');
    src: url('../fonts/db_heavent/db_heavent_v3.2.1-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/db_heavent/db_heavent_v3.2.1-webfont.woff2') format('woff2'),
         url('../fonts/db_heavent/db_heavent_v3.2.1-webfont.woff') format('woff'),
         url('../fonts/db_heavent/db_heavent_v3.2.1-webfont.ttf') format('truetype'),
         url('../fonts/db_heavent/db_heavent_v3.2.1-webfont.svg#db_heaventregular') format('svg');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'db_heaventitalic';
    src: url('../fonts/db_heavent/db_heavent_it_v3.2.1-webfont.eot');
    src: url('../fonts/db_heavent/db_heavent_it_v3.2.1-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/db_heavent/db_heavent_it_v3.2.1-webfont.woff2') format('woff2'),
         url('../fonts/db_heavent/db_heavent_it_v3.2.1-webfont.woff') format('woff'),
         url('../fonts/db_heavent/db_heavent_it_v3.2.1-webfont.ttf') format('truetype'),
         url('../fonts/db_heavent/db_heavent_it_v3.2.1-webfont.svg#db_heaventitalic') format('svg');
    font-weight: normal;
    font-style: normal;

}
/*------------------------------------------------------------------
[Table of contents]

1. Body
	2. Header 
		2.1. Navigation 
		2.2. Menu 
		2.3. Cart 
	3. Banner
		3.1 Revolution Slider
	4. Products
		4.1 Product Item
		4.2 Single Product
	5. Pricing
	6. Clients
	7. Instagram Feed 
	8. User Dashboard
		8.1 User Profile
	9. Blog
		9.1 Post
		9.2 Post Pagination
		9.3 Single Post
		9.4 Post Sidebar
	10. Backgrounds
	11. Comming Soon
	12. Account Page
	13. Shopping
		13.1 Checkout
		13.2 Shopping Cart
		13.3 Product Checkout Details
		13.4 Purchase Confirmation
		13.5 Empty Cart
		13.6 Success Message
	14.404 Page
	15. Contact 
		15.1  Contact Form 
		15.2 Contact Details
		15.3 Social Icons
	16.Footer


-------------------------------------------------------------------*/
/*=== MEDIA QUERY ===*/
@import url("https://fonts.googleapis.com/css?family=Poppins:300,400,500");
body {
  line-height: 1.5;
  font-family: 'db_heaventregular', sans-serif;
  -webkit-font-smoothing: antialiased;
}

p {
  font-family: 'db_heaventregular', sans-serif;
  color: #000;
  font-size: 22px;
}

h1, h2, h3, h4, h5, h6 {
  font-family: "db_heaventbold", sans-serif;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 400;
}

ol, ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

iframe {
  border: 0;
}

a, a:focus, a:hover {
  text-decoration: none;
  outline: 0;
  color: #000;
}

blockquote {
  font-size: 18px;
  border-color: #000;
  padding: 20px 40px;
  text-align: left;
  color: #777;
}

/* =========================================
   NAVIGATION MENU STYLING
   ========================================= */

/* 1. จัดการเมนูแม่ (Level 1) */
/* สมมติว่า ul หลักของคุณมี class ชื่อ 'main-menu' หรือ 'navbar-nav' */
/* ถ้าของคุณชื่ออื่น ให้เปลี่ยนตรงนี้ครับ */
ul.menu, ul.main-menu, .navbar-nav {
    display: flex;
    justify-content: center; /* จัดเมนูให้อยู่กลางจอ */
    list-style: none;
    padding: 0;
    margin: 20px 0; /* เว้นระยะห่างบนล่าง */
}

ul.menu > li {
    /* --- สำคัญมาก: ต้องมีบรรทัดนี้ Dropdown ถึงจะอยู่ใต้แม่ --- */
    position: relative; 
    padding: 0 20px; /* ระยะห่างระหว่างเมนู */
}

ul.menu > li > a {
    font-size: 22px;
    font-weight: 500;
    color: #333;
    text-decoration: none;
    text-transform: uppercase; /* ตัวพิมพ์ใหญ่ */
    letter-spacing: 1px;
    padding-bottom: 10px;
    transition: color 0.3s;
    display: block;
	font-family:'db_heaventregular';
	text-decoration: underline;
	text-underline-offset: 4px;
    text-decoration-thickness: 1px;
}

/* เส้นขีดใต้เวลาชี้เมนูแม่ (ลูกเล่นเพิ่มเติม) */
ul.menu > li > a:hover {
    color: #e71f29; /* สีแดง Malee */
}

/* =========================================
   2. จัดการ Dropdown (Sub Menu) - แก้ให้สวยและตรงจุด
   ========================================= */
ul.menu .sub-menu, 
ul.menu .dropdown-menu {
    /* --- จัดตำแหน่ง --- */
    position: absolute;
    top: 100%; /* ให้อยู่ใต้เมนูแม่พอดี */
    left: 50%; /* เริ่มต้นที่กึ่งกลางของแม่ */
    transform: translateX(-50%) translateY(10px); /* ดึงกลับมาให้กลางเป๊ะ + ขยับลงนิดนึง */
    
    /* --- ตกแต่งกล่อง --- */
    background-color: #fff;
    min-width: 220px; /* กำหนดความกว้างขั้นต่ำ (ทำให้ดูใหญ่ขึ้น) */
    box-shadow: 0 10px 30px rgba(0,0,0,0.1); /* เงานุ่มๆ ดูแพง */
    border-radius: 8px; /* มุมมน */
    border: none; /* ลบขอบเดิม */
    padding: 15px 0; /* ระยะห่างด้านใน */
    
    /* --- ซ่อนไว้ก่อน (Animation) --- */
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 999;
}

/* เวลาเอาเมาส์ชี้ที่แม่ -> ให้ลูกโผล่มา */
ul.menu > li:hover .sub-menu,
ul.menu > li:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0); /* เลื่อนขึ้นมาที่เดิม */
}

/* --- ตกแต่งลิ้งค์ข้างใน Dropdown --- */
ul.menu .sub-menu li {
    display: block;
    text-align: left; /* จัดชิดซ้าย */
}

ul.menu .sub-menu li a {
    display: block;
    padding: 5px 25px; /* เพิ่มพื้นที่กดให้ใหญ่ขึ้น */
    font-size: 22px;
    text-decoration: none;
    text-transform: capitalize; /* ตัวแรกใหญ่ ที่เหลือเล็ก */
    font-weight: 500;
    transition: all 0.2s;
    border-bottom: 1px solid #f5f5f5; /* เส้นแบ่งบางๆ */
	font-family:'db_heaventregular'
}

/* ลบเส้นตัวสุดท้ายออก */
ul.menu .sub-menu li:last-child a {
    border-bottom: none;
}

/* Hover ที่ตัวลูก */
ul.menu .sub-menu li a:hover {
    background-color: #f9f9f9; /* สีพื้นหลังตอนชี้ */
    color: #e71f29; /* ตัวหนังสือสีแดง */
    padding-left: 30px; /* ขยับขวาเล็กน้อย (ลูกเล่น) */
}

/* =========================================
   MOBILE MENU STYLES
   ========================================= */

/* 1. ซ่อน Mobile Bar ในหน้าจอปกติ (Desktop) */
.mobile-menu-bar {
    display: none;
}

/* 2. ตั้งค่าเมื่อหน้าจอเล็กกว่า 991px (Mobile/Tablet) */
@media (max-width: 991px) {

    /* --- จัดการแถบ Mobile Bar (ตามรูป) --- */
    .mobile-menu-bar {
        display: flex;
        justify-content: space-between; /* ชิดซ้าย-ขวา */
        align-items: center;
        padding: 15px 0;
        background-color: #fff;
        border-bottom: 1px solid #eee; /* เส้นแบ่งบางๆ */
    }

    .mobile-menu-title {
        font-size: 22px; /* ขนาดตัวอักษร Main Menu */
        font-weight: 500;
        text-transform: capitalize;
		font-family:'db_heaventmed'
    }

    /* ปุ่ม Hamburger (3 ขีด) */
    .menu-toggle {
        background: none;
        border: none;
        cursor: pointer;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: 5px;
    }

    .menu-toggle .bar {
        display: block;
        width: 25px;
        height: 3px;
        background-color: #000; /* สีของขีด */
        border-radius: 2px;
    }

    /* --- จัดการตัวเมนูหลัก (ul) ในมือถือ --- */
    ul.menu {
        display: none; /* ซ่อนไว้ก่อน กดปุ่มค่อยโชว์ */
        flex-direction: column; /* เรียงลงแนวตั้ง */
        width: 100%;
        background-color: #fff;
        margin: 0;
        border-top: 1px solid #eee;
    }

    /* เมื่อกดปุ่มแล้ว ให้ใส่ class 'active' เพื่อแสดงเมนู */
    ul.menu.active {
        display: flex;
    }

    ul.menu > li {
        width: 100%;
        border-bottom: 1px solid #f5f5f5;
        padding: 0;
    }

    ul.menu > li > a {
        padding: 15px 20px; /* เพิ่มพื้นที่กดในมือถือ */
        display: flex;
        justify-content: space-between; /* ให้ลูกศรอยู่ขวาสุด */
		text-decoration:none;
    }

    /* --- จัดการ Dropdown ในมือถือ --- */
    ul.menu .sub-menu, 
    ul.menu .dropdown-menu {
        position: static; /* ยกเลิกการลอย ให้ดันเนื้อหาลงมา */
        width: 100%;
        box-shadow: none; /* ลบเงาออก */
        background-color: #f9f9f9; /* สีพื้นหลัง Dropdown ต่างนิดหน่อย */
        border-radius: 0;
        display: none; /* ซ่อน Sub menu ไว้ก่อน */
        transform: none;
        opacity: 1;
        visibility: visible;
    }
    
    /* ให้แสดง Sub menu เมื่อแม่มี class open (ใช้ JS ช่วย) */
    ul.menu > li.open .sub-menu {
        display: block;
    }
	
	/* --- 1. จัดระเบียบลิงก์ลูกเมนู (Submenu) ให้ดูง่ายขึ้น --- */
    ul.menu .sub-menu li a {
        /* สั่งให้ย่อหน้าเข้าไปทางขวา 40px (เพื่อให้รู้ว่าเป็นลูกเมนู) */
        padding-left: 40px !important; 
        /* ลบเส้นคั่นของลูกเมนูออก (Optional) เพื่อความสะอาดตา */
        border-bottom: none;
    }

   /* 1. สั่งให้ Submenu ทั้งตอนปกติ และตอน Hover ไม่ต้องขยับไปไหน */
    ul.menu .sub-menu,
    ul.menu .dropdown-menu,
    ul.menu > li:hover .sub-menu, 
    ul.menu > li:hover .dropdown-menu {
        
        /* ยกเลิกการเลื่อนซ้าย-ขวา (-50%) ของ Desktop */
        transform: none !important; 
        
        /* ยกเลิกการจัดกึ่งกลาง */
        left: 0 !important;
        top: auto !important;
        
        /* ให้มันเป็นบล็อกธรรมดา ดันเนื้อหาลงมา */
        position: static !important; 
        width: 100% !important;
        
        /* ให้แสดงผลตลอด (ถ้าระบบ JS สั่งเปิดแล้ว) ไม่ต้องรอ hover */
        opacity: 1 !important;
        visibility: visible !important;
    }
}

.inter-contact p{
	font-size: 34px;
}

.navbar-toggle .icon-bar {
  background: #000;
}

input[type=email], input[type=password], input[type=text], input[type=tel] {
  border-radius: 0;
  box-shadow: none;
  height: 45px;
  outline: none;
  font-weight: 200;
  font-size: 20px;
}
input[type=email]:focus, input[type=password]:focus, input[type=text]:focus, input[type=tel]:focus {
  box-shadow: none;
  border: 1px solid #000;
}

.form-control {
  box-shadow: none;
  border-radius: 0;
}
.form-control:focus {
  box-shadow: none;
  border: 1px solid #000;
}

.btn-main, .btn-small, .btn-transparent, .btn-solid-border {
  background: #000;
  color: #fff;
  display: inline-block;
  font-size: 11px;
  letter-spacing: 1px;
  padding: 14px 35px;
  text-transform: uppercase;
  font-weight: 200;
  border-radius: 0;
}
.btn-main.btn-icon i, .btn-icon.btn-small i, .btn-icon.btn-transparent i, .btn-icon.btn-solid-border i {
  font-size: 16px;
  vertical-align: middle;
  margin-right: 5px;
}
.btn-main:hover, .btn-small:hover, .btn-transparent:hover, .btn-solid-border:hover {
  background: black;
  color: #fff;
}

.btn-solid-border {
  border: 1px solid #000;
  background: #fff;
  color: #000;
}

.btn-transparent {
  background: transparent;
  padding: 0;
  color: #000;
}
.btn-transparent:hover {
  background: transparent;
  color: #000;
}

.btn-large {
  padding: 20px 45px;
}
.btn-large.btn-icon i {
  font-size: 16px;
  vertical-align: middle;
  margin-right: 5px;
}

.btn-small {
  padding: 8px 25px;
  font-size: 10px;
}

.btn-round {
  border-radius: 4px;
}

.btn-round-full {
  border-radius: 50px;
}

.btn.active:focus, .btn:active:focus, .btn:focus {
  outline: 0;
}

.mt-10 {
  margin-top: 20px;
}

.mt-20 {
  margin-top: 20px;
}

.mt-30 {
  margin-top: 30px;
}

.mt-40 {
  margin-top: 40px;
}

.mt-50 {
  margin-top: 50px;
}

.btn:focus {
  color: #ddd;
}

.w-100 {
  width: 100%;
}

.margin-0 {
  margin: 0 !important;
}

.swiper {
            width: 100%;
            height: auto;
            /* สำคัญ: เพิ่ม padding ด้านล่าง เพื่อเว้นที่ให้จุด Pagination */
            padding-bottom: 50px; 
        }

        .swiper-slide img {
            width: 100%;
            height: auto;
            display: block;
         
        }

        /* --- 1. ปรับสีลูกศร (Arrow) --- */
        /* ใช้ CSS Variable ของ Swiper เปลี่ยนสีได้เลย */
        :root {
            --swiper-navigation-color: #cccccc; /* สีเทาอ่อน (Light Gray) */
            --swiper-navigation-size: 35px;     /* ขนาดลูกศร */
        }

        /* ถ้าอยากปรับความหนาหรือเงาเพิ่ม ให้แก้ class นี้ */
        .swiper-button-next, .swiper-button-prev {
            font-weight: bold;
        }

        /* --- 2. ปรับจุด (Pagination) เป็นสีดำและอยู่นอกรูป --- */
        .swiper-pagination {
            /* บังคับตำแหน่งให้ลงมาอยู่ที่พื้นล่างสุด (ในส่วน padding ที่เว้นไว้) */
            bottom: 0 !important; 
        }

        /* สีของจุดปกติ (ที่ไม่ได้เลือก) */
        .swiper-pagination-bullet {
            background-color: #000000; /* สีดำ */
            opacity: 0.3;              /* จางๆ หน่อย */
            width: 10px;               /* ขนาดจุด */
            height: 10px;
        }

        /* สีของจุดที่กำลังเลือก (Active) */
        .swiper-pagination-bullet-active {
            background-color: #000000; /* สีดำเข้ม */
            opacity: 1;
        }
		
#preloader {
  background: #fff;
  height: 100%;
  left: 0;
  opacity: 1;
  filter: alpha(opacity=100);
  position: fixed;
  text-align: center;
  top: 0;
  width: 100%;
  z-index: 999999999;
}

.bg-shadow {
  background-color: #fff;
  box-shadow: 0 16px 24px rgba(0, 0, 0, 0.08);
  padding: 20px;
}

.bg-gray {
  background: #f9f9f9;
}

.section {
  padding: 40px 0;
}

.section-inner{
  padding: 40px 0px 100px 0px;
}

.title {
  padding: 20px 0 30px;
}
.title h2 {
  font-size: 32px;
  font-weight:700;
  font-family: "db_heaventbold", sans-serif;
  margin-bottom:0px;
  line-height:26px;
  /*text-align: center;
  text-transform: uppercase;
  letter-spacing: 2px;*/
}
.title p{
	font-size: 28px;
	color:#424040;
	font-family: "db_heaventregular";
	font-weight: 500;
}

/* --- 1. ลบช่องว่างระหว่างกล่อง (Bootstrap Grid Fix) --- */
.row.no-gutter {
    margin-left: 0;
    margin-right: 0;
}
.row.no-gutter > [class*='col-'] {
    padding-right: 0;
    padding-left: 0;
}

.slick-slide {
    width: 200px;
}

/* --- 2. จัดการกล่อง Category Box --- */
.category-box {
    position: relative;
    width: 100%;
    
    /* ใช้ padding-top เป็น % เพื่อล็อคสัดส่วน (เช่น 4:5) */
    /* วิธีนี้ชัวร์กว่า aspect-ratio ในบาง Browser เก่า */
    padding-top: 100%; /* 100% = จัตุรัส, 125% = แนวตั้ง */
    
    overflow: hidden;
    background-color: #FCECD5; /* ใส่สีพื้นหลังให้กลมกลืนกับรูปสินค้า (สีส้มอ่อน) */
}

/* --- 3. จัดการรูปภาพ (ให้เต็มและชิดขอบบน) --- */
.category-box img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; 
    z-index: 1;
}

/* --- 4. จัดการข้อความ (ให้ลอยอยู่ข้างในกล่อง ด้านล่าง) --- */
.category-box .content {
    position: absolute;
    bottom: 0;          /* สั่งให้ติดขอบล่างสุด */
    left: 0;
    width: 100%;
    z-index: 10;        /* ลอยทับรูป */
    padding: 10px 0px;
    text-align: center;
}

.category-box .content h3 {
    margin: 0;
    font-size: 24px;
    text-transform: uppercase;
	font-family: 'db_heaventregular';
}

.category-box .content p {
  margin: 6px 0 0;
}
.category-box img {
    transition: transform 0.5s ease; 
}

.category-box:hover img {
    transform: scale(1.05); /* ขยาย 10% */
}
.page-header {
  background: #f5f5f5;
  margin-top: 20px;
  border-bottom: none;
  padding: 30px 0;
}
.page-header h1 {
  font-weight: 200;
  margin: 0 0 6px 0;
}
.page-header .breadcrumb {
  background: transparent;
  padding: 5px;
  margin: 0;
}
.page-header .breadcrumb li {
  font-weight: 200;
  font-size: 12px;
}
.page-header .breadcrumb li a {
  color: #000;
}

.overly {
  position: relative;
}
.overly:before {
  content: "";
  background: rgba(0, 0, 0, 0.51);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.overly-white {
  position: relative;
}
.overly-white:before {
  content: "";
  background: rgba(255, 255, 255, 0.7);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.page-wrapper {
  padding: 70px 0;
}

.social-media-icons ul li {
  display: inline-block;
}
.social-media-icons ul li a {
  font-size: 18px;
  color: #333;
  display: inline-block;
  padding: 7px 12px;
  color: #fff;
}
.social-media-icons ul li .twitter {
  background: #00aced;
}
.social-media-icons ul li .facebook {
  background: #3b5998;
  padding: 7px 18px;
}
.social-media-icons ul li .googleplus {
  background: #dd4b39;
}
.social-media-icons ul li .dribbble {
  background: #ea4c89;
}
.social-media-icons ul li .instagram {
  background: #bc2a8d;
}

@media (max-width: 480px) {
  .call-to-action .subscription-form {
    display: block;
  }
}
.call-to-action .subscription-form input {
  height: 50px;
}
@media (max-width: 480px) {
  .call-to-action .subscription-form input {
    text-align: center;
  }
}
.call-to-action .subscription-form .btn-main, .call-to-action .subscription-form .btn-solid-border, .call-to-action .subscription-form .btn-transparent, .call-to-action .subscription-form .btn-small {
  font-size: 14px;
}
@media (max-width: 480px) {
  .call-to-action .subscription-form .btn-main, .call-to-action .subscription-form .btn-solid-border, .call-to-action .subscription-form .btn-transparent, .call-to-action .subscription-form .btn-small {
    width: 100%;
  }
}

.dropdown-slide {
  position: static;
}
.dropdown-slide .open > a, .dropdown-slide .open > a:focus, .dropdown-slide .open > a:hover {
  background: transparent;
}
.dropdown-slide.full-width .dropdown-menu {
  left: 0 !important;
  right: 0 !important;
}
.dropdown-slide:hover .dropdown-menu {
  display: none;
  opacity: 1;
  display: block;
  transform: translate(0px, 0px);
  opacity: 1;
  visibility: visible;
  color: #777;
  transform: translateY(0px);
}
.dropdown-slide .dropdown-menu {
  border-radius: 0;
  opacity: 1;
  visibility: visible;
  position: absolute;
  padding: 15px;
  border: 1px solid #ebebeb;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  transition: 0.3s all;
  position: absolute;
  display: block;
  visibility: hidden;
  opacity: 0;
  transform: translateY(30px);
  transition: visibility 0.2s, opacity 0.2s, transform 500ms cubic-bezier(0.43, 0.26, 0.11, 0.99);
}
@media (max-width: 480px) {
  .dropdown-slide .dropdown-menu {
    transform: none;
  }
}

.commonSelect {
  margin-left: 10px;
  padding-right: 6px;
  position: relative;
}
.commonSelect:before {
  content: "\f3d0";
  font-family: "themefisher-font";
  position: absolute;
  right: -4px;
  top: 4px;
  font-size: 10px;
}
.commonSelect select {
  -webkit-appearance: none;
  -moz-appearance: none;
  cursor: pointer;
  border: none;
  padding: 0;
  height: auto;
  color: #555;
}
.commonSelect select:focus {
  box-shadow: none;
  border: none;
}

.tabCommon .nav-tabs {
  border-bottom: 0;
  margin-bottom: 10px;
}
.tabCommon .nav-tabs li {
  margin-right: 5px;
}
.tabCommon .nav-tabs li.active a {
  background-color: #000;
  border: 1px solid #000;
  color: #ffffff;
}
.tabCommon .nav-tabs a {
  border-radius: 0;
  background: #f9f9f9;
}
.tabCommon .nav-tabs a:hover {
  border: 1px solid transparent;
  background: #000;
  color: #fff;
}
.tabCommon .tab-content {
  padding: 20px;
  border: 1px solid #dedede;
}

.commonAccordion .panel, .commonAccordion-2 .panel {
  border-radius: 0;
  box-shadow: none;
}
.commonAccordion .panel .panel-heading, .commonAccordion-2 .panel .panel-heading {
  background: transparent;
  padding: 0;
}
.commonAccordion .panel .panel-title, .commonAccordion-2 .panel .panel-title {
  position: relative;
}
.commonAccordion .panel .panel-title a, .commonAccordion-2 .panel .panel-title a {
  display: block;
  font-size: 14px;
  text-transform: uppercase;
  padding: 10px 10px;
}
.commonAccordion .panel .panel-title a:before, .commonAccordion-2 .panel .panel-title a:before {
  color: #555;
  content: "\f209";
  position: absolute;
  right: 25px;
  font-family: "themefisher-font";
}
.commonAccordion .panel .panel-title a.collapsed:before, .commonAccordion-2 .panel .panel-title a.collapsed:before {
  content: "\f217";
}

.list-circle {
  padding-left: 20px;
}
.list-circle li {
  list-style-type: circle;
}

.play-icon {
  border: 1px solid #dedede;
  display: inline-block;
  width: 60px;
  height: 60px;
  border-radius: 50px;
  font-size: 30px;
}
.play-icon i {
  line-height: 60px;
}

.alert-common {
  border-radius: 0;
  border-width: 2px;
}
.alert-common i {
  margin: 0 5px;
  font-size: 16px;
}

.alert-solid {
  background: transparent;
  color: #000;
}

@media (max-width: 480px) {
  .buttonPart li {
    margin-bottom: 8px;
  }
}
@media (max-width: 768px) {
  .buttonPart li {
    margin-bottom: 8px;
  }
}

.single-page-header {
  padding: 140px 0 70px;
  text-align: center;
  color: #fff;
  position: relative;
}

.top-header .container {
  padding-top: 35px;
  padding-bottom: 35px;
}
.top-header .dropdown-menu {
  left: auto;
  right: 0;
  max-width: 300px;
}
@media (max-width: 480px) {
  .top-header .dropdown-menu {
    right: 0;
    left: 0;
    max-width: 100%;
  }
}
.top-header .contact-number {
  font-size: 12px;
  color: #333;
}
@media (max-width: 480px) {
  .top-header .contact-number {
    text-align: center;
  }
}
@media (max-width: 768px) {
  .top-header .contact-number {
    text-align: center;
    padding: 10px 0;
  }
}
.top-header .contact-number i {
  margin-right: 4px;
  font-size: 18px;
  vertical-align: middle;
}
@media (max-width: 768px) {
  .top-header .top-menu {
    text-align: center;
    padding: 10px 0;
  }
}
.top-header .top-menu > li > a {
  color: #333;
  font-size: 15px;
  padding: 0 8px;
}
.top-header .top-menu > li > a:hover, .top-header .top-menu > li > a:focus {
  background: transparent;
}
.top-header .top-menu > li > a i {
  font-size: 16px;
  margin-right: 2px;
  vertical-align: middle;
}
@media (max-width: 480px) {
  .top-header .logo {
    padding: 10px;
  }
}
@media (max-width: 768px) {
  .top-header .logo {
    padding: 10px;
  }
}
.top-header .logo a {
  display: inline-block;
}

.cart-dropdown .media {
  position: relative;
  border-bottom: 1px solid #dedede;
  padding-bottom: 15px;
}
.cart-dropdown .media .pull-left {
  padding-right: 15px;
}
.cart-dropdown img {
  width: 60px;
}
.cart-dropdown h4 {
  color: #000;
  font-weight: 300;
  font-size: 14px;
}
.cart-dropdown .cart-price {
  color: #7f7f7f;
  font-size: 12px;
  font-weight: 200;
}
.cart-dropdown .remove {
  padding: 1px 6px;
  position: absolute;
  right: 0;
  top: 0;
  background-color: #f7f8f9;
  color: #7f7f7f;
  font-size: 12px;
}

.cart-buttons {
  margin-top: 20px;
}
.cart-buttons li {
  display: inline-block;
  width: 49%;
}
.cart-buttons li a {
  display: block;
}

.cart-summary {
  margin-top: 10px;
  font-weight: 500;
  color: #000;
  font-size: 14px;
}
.cart-summary .total-price {
  float: right;
}

.navigation {
  margin-bottom: 0;
  padding: 10px 0;
}
.navigation .menu-title {
  display: none;
  font-size: 16px;
}
@media (max-width: 480px) {
  .navigation .menu-title {
    display: inline-block;
    padding-left: 10px;
  }
}
@media (max-width: 768px) {
  .navigation .menu-title {
    display: inline-block;
    padding-left: 10px;
  }
}
.navigation .navbar-nav > li {
  position: static;
}
.navigation .navbar-nav > li.active a {
  color: #000;
}
.navigation .navbar-nav > li > a {
  color: #333;
  font-size: 24px;
  padding: 20px 15px;
  text-transform: uppercase;
  transition: 0.2s ease-in-out 0s;
  border: 1px solid transparent;
  text-decoration:underline;
  font-family: 'db_heaventregular';
}
.navigation .navbar-nav > li > a:hover, .navigation .navbar-nav > li > a:active, .navigation .navbar-nav > li > a:focus {
  background: none;
  color: #000;
}
.navigation .container {
  position: relative;
}
.navigation .nav .open > a {
  border: 1px solid transparent;
  background-color: transparent;
}
.navigation .navbar-nav {
  float: none;
  display: inline-block;
}
.navigation .dropdown-slide .dropdown-menu {
  right: auto;
  left: auto;
  border: none;
}
.navigation .dropdown-slide .dropdown-menu li a {
  color: #222;
  font-size: 12px;
  border: 1px solid transparent;
  display: block;
  padding: 8px 16px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  transition: 0.3s all;
}
.navigation .dropdown-slide .dropdown-menu li a:hover {
  background-color: #000;
  color: #fff;
}

.slider-item {
  text-align: center;
  background-size: cover;
  position: relative;
  z-index: 1;
}
.slider-item::after {
  position: absolute;
  content: "";
  height: 100%;
  width: 100%;
  background-color: #000;
  opacity: 0.5;
  z-index: -1;
  top: 0;
  left: 0;
}
.slider-item .container {
  position: relative;
  display: table;
  max-width: 1170px;
  height: 100%;
}
.slider-item .slide-inner {
  transform: translate(0, -30%);
  top: 50%;
  left: 0;
  right: 0;
  position: absolute;
}
.slider-item h1 {
  color: #fff;
  font-weight: bold;
  font-size: 60px;
}
.slider-item p {
  color: #fff;
}
.slider-item .btn-main, .slider-item .btn-solid-border, .slider-item .btn-transparent, .slider-item .btn-small {
  margin-top: 25px;
}
.slider-item.white-bg .slide-inner h1 {
  color: #000;
}
.slider-item.white-bg .slide-inner p {
  color: #000;
}

.home-slider:hover .owl-nav {
  opacity: 1;
}
.home-slider .owl-nav {
  width: 100%;
  position: absolute;
  top: 50%;
  margin-top: -25px;
  right: 0;
  opacity: 0;
  transition: all 0.3s ease-in-out;
}
.home-slider .owl-nav .owl-next, .home-slider .owl-nav .owl-prev {
  width: 60px;
  height: 60px;
  display: inline-block;
  background: #fff;
  text-align: center;
}
.home-slider .owl-nav .owl-next {
  right: 0px;
  position: absolute;
}
.home-slider .owl-nav i {
  line-height: 60px;
  font-size: 20px;
  color: rgba(0, 0, 0, 0.54);
}

.hero-slider .slider-item .container {
  height: 648px;
}
.hero-slider .slider-item .container .row {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-slider .slider-item:focus {
  outline: 0;
}
.hero-slider .btn {
  font-size: 15px;
  font-weight: 400;
  color: rgb(255, 255, 255);
  letter-spacing: 1px;
  font-family: "Roboto Condensed";
  border-color: rgb(255, 255, 255);
  border-style: solid;
  border-width: 2px;
  outline: none;
  box-shadow: rgb(153, 153, 153) 0px 0px 0px 0px;
  box-sizing: border-box;
  padding: 12px 26px;
  opacity: 1;
  transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  transform-origin: 50% 50% 0px;
  border-radius: 0;
  transition: 0.3s;
}
.hero-slider .btn:hover {
  color: black;
  background-color: #fff;
}
.hero-slider h1 {
  white-space: normal;
  font-size: 49px;
  line-height: 49px;
  font-weight: 400;
  color: rgb(255, 255, 255);
  letter-spacing: -2px;
  font-family: "Playfair Display";
  margin-bottom: 35px;
}

.heroSliderArrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  height: 50px;
  width: 50px;
  border-radius: 50%;
  border: 0;
  background-color: #fff;
  font-size: 16px;
  transition: 0.3s;
  z-index: 999;
}
.heroSliderArrow:focus, .heroSliderArrow:hover {
  background-color: #000;
  color: #fff;
  outline: 0;
}
.heroSliderArrow.prevArrow {
  left: 20px;
}
.heroSliderArrow.nextArrow {
  right: 20px;
}
@media (max-width: 768px) {
  .heroSliderArrow {
    display: none !important;
  }
}

.hero-slider .slider-item {
    background-size: cover;       /* ให้ภาพขยายเต็มพื้นที่ */
    background-position: center center; /* จัดภาพให้อยู่กึ่งกลางเสมอ ทั้งแนวตั้งและนอน */
    background-repeat: no-repeat;
    width: 100%;
}

@media (min-width: 1400px) {
    .hero-slider .slider-item .container {
        height: 648px; /* เพิ่มความสูงสำหรับจอใหญ่ */
    }
}

@media (min-width: 1900px) {
    .hero-slider .slider-item .container {
        height: 648px; /* เพิ่มความสูงอีกสำหรับจอใหญ่พิเศษ */
    }
}

.product-item {
  margin-bottom: 30px;
}
.product-item .product-thumb {
  position: relative;
}
.product-item .product-thumb img {
  width: 100%;
  height: auto;
}
.product-item .product-thumb .bage {
  position: absolute;
  top: 12px;
  right: 12px;
  background: #000;
  color: #fff;
  font-size: 12px;
  padding: 4px 12px;
  font-weight: 300;
  display: inline-block;
}
.product-item .product-thumb:before {
  transition: 0.3s all;
  opacity: 0;
  background: rgba(0, 0, 0, 0.6);
  content: none;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
}
.product-item .product-thumb .preview-meta {
  position: absolute;
  text-align: center;
  bottom: 0;
  left: 0;
  width: 100%;
  justify-content: center;
  opacity: 0;
  transition: 0.2s;
  transform: translateY(10px);
}
.product-item .product-thumb .preview-meta li {
  display: inline-block;
}
.product-item .product-thumb .preview-meta li a, .product-item .product-thumb .preview-meta li span {
  background: #fff;
  padding: 10px 0px;
  cursor: pointer;
  display: inline-block;
  font-size: 20px;
  transition: 0.2s all;
  width: 50px;
}
.product-item .product-thumb .preview-meta li a:hover, .product-item .product-thumb .preview-meta li span:hover {
  background: #000;
  color: #fff;
}
.product-item:hover .product-thumb:before {
  opacity: 1;
}
.product-item:hover .preview-meta {
  opacity: 1;
  transform: translateY(-20px);
}
.product-item .product-content {
  text-align: center;
}
.product-item .product-content h4 {
  line-height:24px;
  font-weight: 400;
  margin-top: 15px;
  margin-bottom: 6px;
  font-size: 28px;
}
.product-item .product-content h4 a {
  color: #000;
}

.product-modal {
  background: rgba(255, 255, 255, 0.9);
  text-align: center;
  padding: 0 !important;
}
.product-modal:before {
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -4px;
}
.product-modal.fade .modal-dialog {
  transform: translate(0, 0);
}
.product-modal .close {
  width: 50px;
  float: none;
  position: absolute;
  right: 20px;
  z-index: 9;
  top: 20px;
  font-size: 30px;
  outline: none;
}
.product-modal .modal-dialog {
  width: 900px;
  display: inline-block;
  text-align: left;
  vertical-align: middle;
}
@media (max-width: 480px) {
  .product-modal .modal-dialog {
    width: 100%;
  }
}
@media (max-width: 768px) {
  .product-modal .modal-dialog {
    width: 100%;
  }
}
.product-modal .modal-content {
  border-radius: 0;
  box-shadow: none;
  border: none;
}
.product-modal .modal-content .modal-body {
  padding: 30px;
}
.product-modal .modal-content .modal-body .modal-image img {
  width: 100%;
  height: auto;
}
.product-modal .modal-content .modal-body .product-short-details h2 {
  margin-top: 0;
  font-size: 22px;
  font-weight: 400;
}
.product-modal .modal-content .modal-body .product-short-details h2 a {
  color: #000;
}
@media (max-width: 480px) {
  .product-modal .modal-content .modal-body .product-short-details h2 {
    margin-top: 15px;
  }
}
@media (max-width: 768px) {
  .product-modal .modal-content .modal-body .product-short-details h2 {
    margin-top: 15px;
  }
}
.product-modal .modal-content .modal-body .product-short-details .product-price {
  font-size: 30px;
  margin: 20px 0;
}
@media (max-width: 480px) {
  .product-modal .modal-content .modal-body .product-short-details .product-price {
    margin: 10px 0;
  }
}
.product-modal .modal-content .modal-body .product-short-details .btn-main, .product-modal .modal-content .modal-body .product-short-details .btn-solid-border, .product-modal .modal-content .modal-body .product-short-details .btn-transparent, .product-modal .modal-content .modal-body .product-short-details .btn-small {
  margin-top: 20px;
}
.product-modal .modal-content .modal-body .product-short-details .btn-transparent {
  color: #444;
  border-bottom: 1px solid #dedede;
}

.product-shorting {
  margin-bottom: 30px;
}
.product-shorting span {
  margin-right: 15px;
}

.product-category ul {
  padding-left: 15px;
}
.product-category ul li {
  margin-bottom: 4px;
}
.product-category ul li a {
  color: #666;
}
.product-category ul li a:hover {
  color: #000;
}

.single-product {
  padding: 60px 0 40px;
}
.single-product .breadcrumb {
  background: transparent;
}
.single-product .breadcrumb li {
  color: #000;
  font-weight: 200;
}
.single-product .breadcrumb li a {
  color: #000;
  font-weight: 200;
}
.single-product .product-pagination li {
  display: inline-block;
  margin: 0 8px;
}
.single-product .product-pagination li + li:before {
  padding: 0 8px 0 0;
  color: #ccc;
  content: "/ ";
}
.single-product .product-pagination li a {
  color: #000;
  font-weight: 200;
}
.single-product .product-pagination li a i {
  vertical-align: middle;
}

.single-product-slider .carousel .carousel-inner .carousel-caption {
  text-shadow: none;
  text-align: left;
  top: 20%;
  bottom: auto;
}
.single-product-slider .carousel .carousel-inner .carousel-caption h1 {
  font-size: 50px;
  font-weight: 100;
  color: #000;
}
.single-product-slider .carousel .carousel-inner .carousel-caption p {
  width: 50%;
  font-weight: 200;
}
.single-product-slider .carousel .carousel-inner .carousel-caption .btn-main, .single-product-slider .carousel .carousel-inner .carousel-caption .btn-solid-border, .single-product-slider .carousel .carousel-inner .carousel-caption .btn-transparent, .single-product-slider .carousel .carousel-inner .carousel-caption .btn-small {
  margin-top: 20px;
}
.single-product-slider .carousel .carousel-control {
  bottom: auto;
  background: #fff;
  width: 6%;
  padding: 10px 0;
}
.single-product-slider .carousel .carousel-control i {
  font-size: 40px;
  text-shadow: none;
  color: #555;
}
.single-product-slider .carousel .carousel-indicators li img {
  height: auto;
  width: 60px;
}
.single-product-slider .carousel .carousel-control.right, .single-product-slider .carousel .carousel-control.left {
  background-image: none;
  top: 40%;
}

.single-product-slider .carousel-indicators {
  margin: 10px 0 0;
  overflow: auto;
  position: static;
  text-align: left;
  white-space: nowrap;
  width: 100%;
  overflow: hidden;
}
.single-product-slider .carousel-indicators li {
  background-color: transparent;
  border-radius: 0;
  display: inline-block;
  height: auto;
  margin: 0 !important;
  width: auto;
}
.single-product-slider .carousel-indicators li.active img {
  opacity: 1;
}
.single-product-slider .carousel-indicators li:hover img {
  opacity: 0.75;
}
.single-product-slider .carousel-indicators li img {
  display: block;
  opacity: 0.5;
}

.single-product-details .color-swatches {
  display: flex;
  align-items: center;
}
.single-product-details .color-swatches span {
  width: 100px;
  color: #000;
  font-size: 13px;
  font-weight: 600;
}
.single-product-details .color-swatches a {
  display: inline-block;
  width: 36px;
  height: 36px;
  margin-right: 5px;
}
.single-product-details .color-swatches li {
  display: inline-block;
}
.single-product-details .color-swatches .swatch-violet {
  background-color: #8da1cd;
}
.single-product-details .color-swatches .swatch-black {
  background-color: #000;
}
.single-product-details .color-swatches .swatch-cream {
  background-color: #e6e2d6;
}
.single-product-details .product-size {
  margin-top: 20px;
  display: flex;
  align-items: center;
}
.single-product-details .product-size span {
  width: 100px;
  color: #000;
  font-size: 13px;
  font-weight: 600;
  display: inline-block;
}
.single-product-details .product-size .form-control {
  display: inline-block;
  width: 130px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #000;
  font-size: 12px;
  border: 1px solid #e5e5e5;
  border-radius: 0px;
  box-shadow: none;
}
.single-product-details .product-category {
  margin-top: 20px;
}
.single-product-details .product-category > span {
  width: 100px;
  color: #000;
  font-size: 13px;
  font-weight: 600;
  display: inline-block;
}
.single-product-details .product-category ul {
  width: 140px;
  display: inline-block;
}
.single-product-details .product-category ul li {
  display: inline-block;
  margin: 5px;
}
.single-product-details .product-quantity {
  margin-top: 20px;
  display: flex;
  align-items: center;
}
.single-product-details .product-quantity > span {
  width: 100px;
  color: #000;
  font-size: 13px;
  font-weight: 600;
  display: inline-block;
}
.single-product-details .product-quantity .product-quantity-slider {
  width: 140px;
  display: inline-block;
}
.single-product-details .product-quantity .product-quantity-slider input {
  height: 34px;
}
.single-product-details .product-quantity .product-quantity-slider .input-group-btn:first-child > .btn, .single-product-details .product-quantity .product-quantity-slider .p-quantity .input-group-btn:first-child > .btn-group {
  margin-right: -2px;
}
.single-product-details .product-quantity .product-quantity-slider button {
  border-radius: 0;
}

.bootstrap-touchspin .input-group-btn-vertical {
  position: relative;
  white-space: nowrap;
  width: 1%;
  vertical-align: middle;
  display: table-cell;
}

.bootstrap-touchspin .input-group-btn-vertical > .btn {
  display: block;
  float: none;
  width: 100%;
  max-width: 100%;
  padding: 8px 10px;
  margin-left: -1px;
  position: relative;
}

.bootstrap-touchspin .input-group-btn-vertical .bootstrap-touchspin-up {
  border-radius: 0;
  border-top-right-radius: 4px;
}

.bootstrap-touchspin .input-group-btn-vertical .bootstrap-touchspin-down {
  margin-top: -2px;
  border-radius: 0;
  border-bottom-right-radius: 4px;
}

.bootstrap-touchspin .input-group-btn-vertical i {
  position: absolute;
  top: 3px;
  left: 5px;
  font-size: 9px;
  font-weight: normal;
}

/*=================================================================
  Pricing section
==================================================================*/
.pricing-table .pricing-item {
  padding: 40px 55px 65px;
  background: #fff;
  margin-bottom: 20px;
}
.pricing-table .pricing-item a.btn-main, .pricing-table .pricing-item a.btn-solid-border, .pricing-table .pricing-item a.btn-transparent, .pricing-table .pricing-item a.btn-small {
  text-transform: uppercase;
  margin-top: 20px;
}
.pricing-table .pricing-item li {
  font-weight: 400;
  padding: 10px 0;
  color: #666;
}
.pricing-table .pricing-item li i {
  margin-right: 6px;
}
.pricing-table .price-title {
  padding: 30px 0 20px;
}
.pricing-table .price-title > h3 {
  font-weight: 700;
  margin: 0 0 5px;
  font-size: 15px;
  text-transform: uppercase;
}
.pricing-table .price-title > p {
  font-size: 14px;
  font-weight: 400;
  line-height: 18px;
  margin-top: 5px;
}
.pricing-table .price-title .value {
  color: #000;
  font-size: 50px;
  padding: 10px 0;
}

.instagram-feed {
  text-align: center;
}
.instagram-feed a {
  margin: 6px;
  margin-right: 10px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
}
.instagram-feed a:hover img {
  filter: grayscale(10);
}
.instagram-feed a img {
  width: 100%;
  max-height: 180px;
  -o-object-fit: cover;
     object-fit: cover;
}

.dashboard-menu .active {
  background: #000;
  color: #fff;
  border: 1px solid #000;
}
.dashboard-menu li {
  padding: 0;
  margin: 0 3px;
}
.dashboard-menu li a {
  padding: 10px 20px;
  border: 1px solid #dedede;
  display: inline-block;
}
@media (max-width: 768px) {
  .dashboard-menu li a {
    padding: 10px 15px;
  }
}
@media (max-width: 480px) {
  .dashboard-menu li a {
    padding: 10px 5px;
  }
}
@media (max-width: 400px) {
  .dashboard-menu li a {
    padding: 10px 8px;
    font-size: 12px;
    margin-bottom: 6px;
  }
}

.dashboard-wrapper {
  border: 1px solid #dedede;
  margin-top: 30px;
  padding: 20px;
}
.dashboard-wrapper h2 {
  font-size: 18px;
}
.dashboard-wrapper h4 {
  font-size: 16px;
}
.dashboard-wrapper .user-img {
  width: 120px;
  border-radius: 100px;
}

.dashboard-user-profile .user-img {
  width: 180px;
}
.dashboard-user-profile .user-profile-list {
  margin-top: 30px;
  padding-left: 30px;
}
.dashboard-user-profile .user-profile-list li {
  margin-bottom: 8px;
}
.dashboard-user-profile .user-profile-list span {
  font-weight: bold;
  margin-right: 5px;
  width: 100px;
  display: inline-block;
}

/*=================================================================
  Latest Posts
==================================================================*/
.blog {
  background: #F6F6F6;
}

.post {
  background: #fff;
  margin-bottom: 40px;
  border-bottom: 1px solid #dedede;
  padding-bottom: 20px;
}
.post .post-media.post-thumb img {
  width: 100%;
  height: auto;
}
.post .post-media.post-media-audio iframe {
  width: 100%;
}
.post .post-title {
  font-size: 20px;
  margin-top: 10px;
  margin: 25px 0 0;
  padding: 0 20px 5px;
  font-weight: 300;
}
.post .post-title a {
  color: #000;
}
.post .post-title a:hover {
  color: #000;
}
.post .post-meta {
  font-size: 13px;
  margin-top: 5px;
  padding: 0 20px 5px;
}
.post .post-meta ul li {
  display: inline-block;
  color: #5f5b5b;
  margin-right: 20px;
  font-size: 12px;
  letter-spacing: 1px;
  font-weight: 200;
}
.post .post-meta ul li a {
  color: #5f5b5b;
}
.post .post-meta ul li a:hover {
  color: #000;
}
.post .post-meta .post-author {
  color: #000;
}
.post .post-content {
  padding: 5px 20px;
}
.post .post-content p {
  color: #444;
  font-size: 14px;
  margin: 10px 0;
}
.post .post-content .btn-main, .post .post-content .btn-solid-border, .post .post-content .btn-transparent, .post .post-content .btn-small {
  padding: 10px 20px;
  margin: 15px 0;
  font-size: 10px;
}

.post-pagination {
  margin-top: 70px;
}
.post-pagination > li {
  margin: 0 2px;
  display: inline-block;
  font-size: 12px;
}
.post-pagination > li > a {
  color: #000;
}
.post-pagination > li > a:hover {
  color: #fff;
  background: #000;
  border: 1px solid #000;
}
.post-pagination > li.active > a {
  background: #000;
  border: 1px solid #000;
}
.post-pagination > li:first-child > a, .post-pagination > li:last-child > a {
  border-radius: 0;
}

/*=================================================================
  Single Blog Page
==================================================================*/
.post.post-single {
  border: none;
}

.post-sub-heading {
  border-bottom: 1px solid #dedede;
  padding-bottom: 20px;
  letter-spacing: 2px;
  font-weight: 300;
  text-transform: uppercase;
  font-size: 16px;
  margin-bottom: 20px;
}

.post-social-share {
  margin-bottom: 50px;
}

.post-comments {
  margin: 30px 0;
}
.post-comments .media {
  margin-top: 15px;
}
.post-comments .media > .pull-left {
  padding-right: 20px;
}
.post-comments .comment-author {
  margin-top: 0;
  margin-bottom: 3px;
}
.post-comments .comment-author a {
  color: #000;
  font-weight: 400;
  font-size: 12px;
  text-transform: uppercase;
}
.post-comments p {
  margin-bottom: 30px;
  font-size: 14px;
}
.post-comments time {
  margin: 0 0 5px;
  display: inline-block;
  color: #7e7e7e;
  font-size: 12px;
  font-weight: 200;
}
.post-comments .comment-button {
  color: #7e7e7e;
  display: inline-block;
  margin-left: 5px;
  font-size: 12px;
}
.post-comments .comment-button i {
  margin-right: 5px;
  display: inline-block;
}
.post-comments .comment-button:hover {
  color: #000;
}

.post-excerpt {
  padding: 0 20px;
  margin-bottom: 60px;
}
.post-excerpt h3 a {
  color: #000;
}
.post-excerpt blockquote {
  line-height: 22px;
  margin: 20px 0;
  font-size: 16px;
}
.post-excerpt p {
  font-size: 16px;
  color: #5e5e5e;
  margin: 0 0 30px;
  line-height: 30px;
}

.single-blog {
  background-color: #fff;
  margin-bottom: 50px;
  padding: 20px;
}

.blog-subtitle {
  font-size: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid #dedede;
  margin-bottom: 25px;
  text-transform: uppercase;
}

.next-prev {
  border-bottom: 1px solid #dedede;
  border-top: 1px solid #dedede;
  margin: 20px 0;
  padding: 25px 0;
}
.next-prev a {
  color: #000;
}
.next-prev a:hover {
  color: #000;
}
.next-prev .prev-post i {
  margin-right: 10px;
}
.next-prev .next-post i {
  margin-left: 10px;
}

.social-profile ul li {
  margin: 0 10px 0 0;
  display: inline-block;
}
.social-profile ul li a {
  color: #4e595f;
  display: block;
  font-size: 16px;
}
.social-profile ul li a i:hover {
  color: #000;
}

.comments-section {
  margin-top: 35px;
}

.author-about {
  margin-top: 40px;
}

.post-author {
  margin-right: 20px;
}

.post-author > img {
  border: 1px solid #dedede;
  max-width: 120px;
  padding: 5px;
  width: 100%;
}

.comment-list ul {
  margin-top: 20px;
}
.comment-list ul li {
  margin-bottom: 20px;
}

.comment-wrap {
  border: 1px solid #dedede;
  border-radius: 1px;
  margin-left: 20px;
  padding: 10px;
  position: relative;
}
.comment-wrap .author-avatar {
  margin-right: 10px;
}
.comment-wrap .media .media-heading {
  font-size: 14px;
  margin-bottom: 8px;
}
.comment-wrap .media .media-heading a {
  color: #000;
  font-size: 13px;
}
.comment-wrap .media .comment-meta {
  font-size: 12px;
  color: #888;
}
.comment-wrap .media p {
  margin-top: 15px;
}

.comment-reply-form {
  margin-top: 80px;
}
.comment-reply-form input, .comment-reply-form textarea {
  height: 35px;
  border-radius: 0;
  box-shadow: none;
}
.comment-reply-form input:focus, .comment-reply-form textarea:focus {
  box-shadow: none;
  border: 1px solid #000;
}
.comment-reply-form textarea, .comment-reply-form .btn-main, .comment-reply-form .btn-solid-border, .comment-reply-form .btn-transparent, .comment-reply-form .btn-small {
  height: auto;
}

.widget {
  margin-bottom: 30px;
  padding-bottom: 35px;
}
.widget .widget-title {
  margin: 0;
  padding-bottom: 15px;
  font-size: 14px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 2px;
}
.widget.widget-subscription .form-group {
  margin-bottom: 8px;
}
.widget.widget-subscription .form-group input {
  font-size: 12px;
  font-weight: 200;
  height: 45px;
}
.widget.widget-subscription .btn-main, .widget.widget-subscription .btn-solid-border, .widget.widget-subscription .btn-transparent, .widget.widget-subscription .btn-small {
  width: 100%;
}
.widget.widget-latest-post .media .media-object {
  width: 150px;
  height: auto;
}
.widget.widget-latest-post .media .media-heading a {
  color: #000;
  font-size: 14px;
  font-weight: 300;
}
.widget.widget-latest-post .media p {
  font-size: 12px;
}
.widget.widget-category ul li {
  margin-bottom: 10px;
}
.widget.widget-category ul li a {
  color: #837f7e;
  font-weight: 200;
}
.widget.widget-category ul li a:before {
  padding-right: 10px;
  content: "\f3d1";
  font-family: "themefisher-font";
}
.widget.widget-category ul li a:hover {
  color: #000;
  padding-left: 5px;
}
.widget.widget-tag ul li {
  margin-bottom: 10px;
  display: inline-block;
  margin-right: 5px;
}
.widget.widget-tag ul li a {
  color: #837f7e;
  display: inline-block;
  padding: 8px 15px;
  border: 1px solid #dedede;
  border-radius: 30px;
  font-size: 12px;
}
.widget.widget-tag ul li a:hover {
  color: #fff;
  background: #000;
  border: 1px solid #000;
}

.background {
  background-size: cover;
}

.bg-100 {
  height: 100vh;
}

.bg-1 {
  background-image: url(../images/backgrounds/bg-1.jpg);
  background-size: cover;
}

.bg-2 {
  background-image: url("../images/page-header-1.jpg");
  background-size: cover;
}
.bg-2:before {
  background: rgba(0, 0, 0, 0.5);
  position: absolute;
  content: "";
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
}

.bg-coming-soon {
  background: url("../images/backgrounds/coming-soon-bg.jpg");
  background-size: cover;
  height: 100vh;
}

.bg-brand-identity {
  background-image: url("../images/backgrounds/brand-identity-bg.jpg");
  background-repeat: no-repeat;
}

.coming-soon {
  color: #fff;
  padding: 150px 0;
}
.coming-soon .block h1 {
  font-size: 25px;
  line-height: 40px;
  font-weight: 400;
}
.coming-soon .block p {
  color: #fff;
  margin-top: 20px;
  font-size: 12px;
}
.coming-soon .block .count-down .syotimer-cell {
  width: 25%;
  display: inline-block;
}
.coming-soon .block .count-down .syotimer-cell .syotimer-cell__value {
  font-size: 80px;
  line-height: 80px;
  text-align: center;
  position: relative;
  font-weight: bold;
}
.coming-soon .block .count-down .syotimer-cell .syotimer-cell__unit {
  font-weight: normal;
}
@media (max-width: 768px) {
  .coming-soon .block .count-down ul li {
    font-size: 50px;
  }
}
@media (max-width: 480px) {
  .coming-soon .block .count-down ul li {
    font-size: 50px;
  }
}
@media (max-width: 400px) {
  .coming-soon .block .count-down ul li {
    font-size: 40px;
  }
}
.coming-soon .block .count-down ul li:before {
  content: ":";
  font-size: 20pt;
  opacity: 0.7;
  position: absolute;
  right: 0px;
  top: 0px;
}
.coming-soon .block .count-down ul li:last-child:before {
  content: "";
}
.coming-soon .block .count-down div:after {
  content: " " attr(data-interval-text);
  font-size: 20px;
  font-weight: normal;
  text-transform: capitalize;
  display: block;
}

.account .block {
  background-color: #fff;
  border: 1px solid #dedede;
  padding: 30px;
  margin: 100px 0;
}
.account .block .logo {
  display: inline-block;
}
.account .block a {
  color: #000;
}
.account .block h2 {
  font-weight: 400;
  font-size: 25px;
  text-transform: uppercase;
  margin-top: 40px;
}
.account .block form {
  margin-top: 40px;
}
@media (max-width: 400px) {
  .account .block form .btn-main, .account .block form .btn-solid-border, .account .block form .btn-transparent, .account .block form .btn-small {
    padding: 14px 19px;
  }
}
.account .block form p {
  margin-bottom: 20px;
}
.account .block form input[type=email], .account .block form input[type=password], .account .block form input[type=text] {
  border-radius: 0;
  box-shadow: none;
}

.shopping .widget-title {
  font-weight: 400;
  border-bottom: 1px solid #dedede;
  padding-bottom: 15px;
  margin-bottom: 15px;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 16px;
}

.checkout .block {
  padding: 15px;
  margin-bottom: 10px;
}

.checkout-form .form-group {
  position: relative;
  margin-bottom: 8px;
}
.checkout-form .form-group label {
  position: absolute;
  top: 18px;
  left: 15px;
  right: auto;
  bottom: auto;
  color: #888;
  font-size: 10px;
  font-weight: 400;
  text-transform: uppercase;
  opacity: 1 !important;
  width: 85px;
}
.checkout-form .form-group input {
  border-radius: 0;
  display: block;
  padding: 6px 10px 5px 100px;
  -moz-appearance: none;
  -webkit-appearance: none;
  height: 50px;
}
.checkout-form .checkout-country-code .form-group {
  float: left;
}
.checkout-form .checkout-country-code .form-group:first-child {
  width: calc(45% - 2px);
  margin-right: 4px;
}
.checkout-form .checkout-country-code .form-group:last-child {
  width: calc(55% - 2px);
}

.shopping.cart .product-list .table .cart-amount th {
  background: #f9f9f9;
  padding: 10px;
  text-transform: uppercase;
}
.shopping.cart .product-list .table > tbody > tr > td {
  vertical-align: middle;
}
.shopping.cart .product-list .product-info a {
  margin-left: 10px;
  color: #000;
  font-weight: 600;
}
.shopping.cart .product-list .product-remove {
  color: #c7254e;
}
.shopping.cart .account-details {
  margin-top: 30px;
}
.shopping.cart .account-details legend {
  font-weight: 600;
  font-size: 16px;
  text-transform: uppercase;
}
.shopping.cart .account-details .btn-pay {
  margin: 20px 0;
}

.product-checkout-details .product-card > a {
  padding-right: 20px;
}
.product-checkout-details .product-card .price {
  margin-top: 15px;
}
.product-checkout-details .product-card .media-object {
  width: 80px;
}
.product-checkout-details .product-card h4 {
  font-weight: 400;
  font-size: 14px;
  color: #555;
}
.product-checkout-details .product-card .remove {
  font-size: 12px;
  cursor: pointer;
}
.product-checkout-details .discount-code {
  border-top: 1px solid #dedede;
  border-bottom: 1px solid #dedede;
  margin: 20px 0 10px;
  padding: 10px 0;
}
.product-checkout-details .discount-code p {
  margin: 0;
}
.product-checkout-details .discount-code p a {
  font-weight: 400;
  color: #555;
}
.product-checkout-details .summary-prices {
  border-style: solid;
  border-color: #dedede;
  border-width: 0px 0 1px 0;
  padding-bottom: 10px;
}
.product-checkout-details .summary-prices li {
  padding: 5px 0;
}
.product-checkout-details .summary-prices li span + span {
  float: right;
}
.product-checkout-details .summary-total {
  margin-top: 5px;
}
.product-checkout-details .summary-total > span {
  font-weight: 500;
  font-size: 18px;
}
.product-checkout-details .summary-total span + span {
  float: right;
}
.product-checkout-details .verified-icon {
  margin-top: 25px;
}
.product-checkout-details .verified-icon img {
  width: 100%;
}

.purchase-confirmation .purchase-confirmation-details {
  padding: 20px;
  border: 1px solid #dedede;
}
.purchase-confirmation .purchase-confirmation-details .table {
  margin: 0;
  color: #444;
}
.purchase-confirmation .purchase-confirmation-details .table b, .purchase-confirmation .purchase-confirmation-details .table strong {
  font-weight: 400;
}

.empty-cart .block i {
  font-size: 50px;
}

.success-msg .block i {
  font-size: 40px;
  background: #1bbb1b;
  color: #fff;
  width: 60px;
  height: 60px;
  border-radius: 100px;
  display: inline-block;
  line-height: 60px;
}

.page-404 {
  padding: 100px 0;
  text-align: center;
}
.page-404 h1 {
  font-size: 300px;
  font-weight: bold;
  line-height: 300px;
  margin-top: 30px;
}

/* --- จัดระยะห่างของ Container --- */
.sub-category-page {
    padding-top: 50px;
    padding-bottom: 80px;
}

/* --- ส่วน Header ด้านบน --- */
.header-row {
    margin-bottom: 40px; /* เว้นระยะห่างจากรูปด้านล่าง */
}

.page-title {
    font-size: 28px;      /* ขนาดตัวหนังสือหัวข้อ */
    font-weight: 700;     /* ตัวหนา */
    color: #000;          /* สีดำ */
    margin-bottom: 5px;   /* ระยะห่างบรรทัด */
    text-transform: capitalize;
}

.page-subtitle {
    font-size: 16px;
    color: #333;          /* สีเทาเข้ม */
    font-weight: 400;
    margin-top: 0;
}

/* --- ส่วน Grid รูปภาพ --- */
/* --- จัด Grid ให้รายการสุดท้ายอยู่ตรงกลางเสมอ --- */
.sub-cat-grid {
    display: flex;        /* เปลี่ยนเป็นระบบ Flexbox */
    flex-wrap: wrap;      /* อนุญาตให้ปัดตกบรรทัดใหม่ได้ */
    justify-content: center; /* พระเอกของงาน: จัดทุกอย่างให้อยู่กึ่งกลาง */
}

/* --- แก้ Bug เล็กน้อยของ Bootstrap 3 เมื่อใช้ Flexbox --- */
/* (ปกติ Bootstrap 3 ใช้ :before, :after เพื่อทำ Clearfix แต่ Flexbox ไม่ชอบ) */
.sub-cat-grid:before,
.sub-cat-grid:after {
    display: none !important;
}

.sub-cat-grid .row {
    display: flex;           /* เปิดใช้ Flexbox */
    flex-wrap: wrap;         /* อนุญาตให้ปัดตกบรรทัดใหม่ */
    justify-content: center; /* พระเอกของงาน: สั่งจัดกึ่งกลางแนวนอน */
}

/* 2. แก้ Bug ของ Bootstrap 3 (สำคัญมาก) */
/* Bootstrap 3 มีตัวช่วยดันกล่อง (Clearfix) ที่จะกวน Flexbox ต้องซ่อนมัน */
.sub-cat-grid .row:before,
.sub-cat-grid .row:after {
    display: none !important;
    content: none !important;
}

/* --- ปรับแต่งตัว Item เพิ่มเติม --- */
.sub-cat-item {
    /*float: none !important;*/
    margin-bottom: 40px;
}

.sub-cat-link {
    text-decoration: none !important; /* เอาขีดเส้นใต้ default ของลิงก์ออก */
    display: inline-block;            /* ให้กล่องขนาดพอดีเนื้อหา */
    width: 100%;
}

.sub-cat-link:hover {
    opacity: 0.85; /* เอฟเฟกต์ตอนชี้เมาส์ */
}

/* --- รูปภาพ --- */
.image-wrapper {
    margin-bottom: 20px; /* ระยะห่างระหว่างรูปกับชื่อ */
}

.image-wrapper img {
    width: 100%;
    max-width: 380px; /* จำกัดความกว้างไม่ให้ใหญ่เกินไป */
    height: auto;
    /* border-radius: 0;  <-- มั่นใจว่าขอบไม่มนแน่นอน */
}

/* --- ชื่อหมวดหมู่ (PREMIUM / SIGNATURE) --- */
.title-wrapper h3 {
    font-size: 24px;
    font-weight: bold;
    color: #333;
    text-transform: uppercase; /* บังคับตัวพิมพ์ใหญ่ */
    margin: 0;
    display: inline-block;     /* เพื่อให้ขีดเส้นใต้มีความยาวเท่าตัวหนังสือ */
}

.product-list-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center !important; /* เรียงชิดซ้าย */
    margin: 0 -15px;                        /* ชดเชยขอบซ้ายขวา */
}

/* 2. บังคับให้คอลัมน์กว้าง 1 ใน 3 เสมอ (สำคัญมาก) */
.product-item-col {
   
    padding: 0 15px;              /* เว้นช่องไฟระหว่างกล่อง */
    margin-bottom: 50px;
    box-sizing: border-box;       /* รวม padding ในความกว้าง */
}

/* 3. ปรับกล่องรูปภาพ */
.product-img-box {
    width: 100%;
    position: relative;
    padding-top: 100%;            /* เทคนิคสี่เหลี่ยมจัตุรัส */
    background-color: #F5F5F5;
    border-radius: 20px;
    overflow: hidden;
    
    /* เพิ่มส่วนนี้เพื่อให้รูปดูมีมิติ */
    display: block;
}

/* 4. แก้รูปเล็ก: ลบ Padding ออกเพื่อให้รูปใหญ่สุด */
.product-img-box img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    
    /* 1. เปลี่ยน padding เป็นตัวคุมระยะขอบแทน */
    /* ใส่ 0 หรือ 10px เพื่อให้รูปขยายเกือบสุดขอบกล่อง */
    padding: 10px !important; 
    
    margin: auto;
    object-fit: contain; /* รักษาอัตราส่วนเดิม ไม่ให้รูปเบี้ยว */
    
    /* 2. ลบ scale ออก หรือเปลี่ยนเป็น 1 (ขนาดปกติ) */
    /* เดิม: transform: scale(0.85); */
    transform: scale(1);
}

.typho-head h2{
	font-size:38px;
	font-family: 'db_heaventbold';
}
.typho-subhead h2{
	font-size:32px;
	font-family: 'db_heaventbold';
}
.typho-p p{
	font-size:28px;
	line-height:30px;
	color:#000;
	font-family: 'db_heaventmed';
}

/* ==================================================
   RESPONSIVE (มือถือ/แท็บเล็ต)
   ================================================== */
@media (max-width: 991px) {
    .product-item-col {
        width: 50% !important;      /* แท็บเล็ต 2 คอลัมน์ */
        flex: 0 0 50%;
        max-width: 50%;
    }
}

@media (max-width: 767px) {
    .product-list-grid {
        margin: 0; /* มือถือไม่ต้องล้นขอบ */
    }
    .product-item-col {
        width: 100% !important;     /* มือถือ 1 คอลัมน์เต็ม */
        flex: 0 0 100%;
        max-width: 100%;
        padding: 0;                 /* มือถือไม่ต้องเว้นขอบข้าง */
    }
}
/* ชื่อสินค้า ขีดเส้นใต้ */
.product-title-box {
    text-align: center;
}

.product-title-box h3 {
    font-size: 22px;
    font-weight: normal;
    color: #000;
    margin-top: 10px;
    display: inline-block;
    line-height: 1;
	font-family: 'db_heaventregular';
}

/* --- Styling เนื้อหาภายใน the_content() --- */
/* กำหนดความสูงและ Scrollbar ให้กล่องเนื้อหา */
.entry-content {
    max-height: 180px;       /* กำหนดความสูงสูงสุด (ปรับเลขนี้ได้ตามต้องการ) */
    overflow-y: auto;        /* สั่งให้มี Scrollbar แนวตั้งถ้าข้อความเกิน */
    padding-right: 15px;     /* เว้นระยะขวานิดนึงไม่ให้ตัวหนังสือติด Scrollbar */
    
    /* (Optional) จัดข้อความให้อ่านง่ายขึ้น */
    line-height: 1.6;
    font-size: 14px;         /* หรือขนาดตามเดิมของคุณ */
}

/* --- ตกแต่ง Scrollbar ให้สวยงาม (Chrome, Safari, Edge) --- */
.entry-content::-webkit-scrollbar {
    width: 6px;              /* ความกว้างของแกน Scrollbar */
}

.entry-content::-webkit-scrollbar-track {
    background: #f1f1f1;     /* สีพื้นหลังรางเลื่อน (สีเทาอ่อน) */
    border-radius: 4px;
}

.entry-content::-webkit-scrollbar-thumb {
    background: #ccc;        /* สีตัวเลื่อน (สีเทา) */
    border-radius: 4px;
}

.entry-content::-webkit-scrollbar-thumb:hover {
    background: #aaa;        /* สีตัวเลื่อนตอนเอาเมาส์ชี้ (เข้มขึ้น) */
}

/* --- (Optional) Mobile: ถ้าอยากให้มือถืออ่านยาวๆ ได้เลยไม่ต้องเลื่อน ให้ปิด Scrollbar --- */
@media (max-width: 767px) {
    .entry-content {
        max-height: none;    /* ยกเลิกการจำกัดความสูงในมือถือ */
        overflow-y: visible; 
    }
}
.entry-content h2 {
    font-size: 22px;
    line-height: 1.5;
    color: #000;
    margin-top: 0;
    margin-bottom: 20px;
    font-weight: 600;
}

.entry-content p {
    font-size: 15px;
    line-height: 1.8;
    color: #555;
    margin-bottom: 20px;
}

.entry-content strong {
    font-weight: 600;
    color: #333;
}

.product-detail-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 15px;
}

/* Header นอกกล่อง */
.product-main-header {
    margin-bottom: 20px;
}
.product-main-header h1 {
    font-size: 36px;
    font-weight: bold;
    margin: 0;
}
.product-main-header p {
    font-size: 28px;
    color: #555;
}

 .flex-container {
      display: flex;
      justify-content: center; /* or center, flex-end, etc. */
    }
/* --- Product Card Container --- */
/* ค้นหา class .product-card แล้วแก้เป็นแบบนี้ครับ */

.product-card {
    display: flex;
    background: linear-gradient(to top, var(--dynamic-bg-color, #FFE8D7) 310px, #F2F2F2 310px);
    border-radius: 10px;
    overflow: hidden;
    align-items: stretch; 
}

/* --- Left Column (Visuals) --- */
.product-visuals {
    width: 45%;
    background: transparent; /* ไม่ต้องมีสีพื้นหลัง */
    padding: 40px 40px 60px 40px; /* ปรับ padding ด้านล่างให้น้อยลงหน่อย */
    
    display: flex;
    flex-direction: column;
    align-items: center;
    
    /* --- เพิ่มบรรทัดนี้ครับ --- */
    /* สั่งให้กระจายเนื้อหา: รูปอยู่บน / ปุ่มและไอคอนไปกองข้างล่าง */
    justify-content: space-between; 
    
    position: relative;
}

.product-image-container img {
    max-width: 100%;
    height: auto;
    max-height: 400px;
    object-fit: contain;
    transition: transform 0.3s ease;
}
/* เอฟเฟกต์เล็กน้อยตอนเปลี่ยนรูป */
.product-image-container img:hover {
    transform: scale(1.02);
}

/* --- Size Selector Buttons --- */
.size-selector {
   display: flex;
    flex-wrap: wrap;         /* หัวใจสำคัญ: สั่งให้ปัดบรรทัดเมื่อที่เต็ม */
    justify-content: center; /* จัดกึ่งกลาง: จะทำให้แถวล่าง (2 ปุ่ม) อยู่กลางสวยๆ */
    gap: 15px;               /* ระยะห่างระหว่างปุ่ม (แนวตั้งและแนวนอน) */
    
    margin-top: 10px;
    margin-bottom: 30px;
    width: 100%;
}

.size-btn {
    border: 1px solid #000;
    background-color: #fff;
    color: #333;
    padding: 3px 20px;
    border-radius: 50px; /* ทรงแคปซูล */
    font-size: 22px;
    cursor: pointer;
    transition: all 0.2s;
    font-weight: 700;
}

/* ปุ่มสถานะ Active (สีส้ม) */
.size-btn.active, .size-btn:hover {
    background-color: #EF7D00; /* สีส้ม Malee */
    color: #fff;
    border-color: #EF7D00;
    box-shadow: 0 4px 10px rgba(239, 125, 0, 0.3);
}

/* --- Shop Links (Icons) --- */
.shop-links {
    display: flex;
    gap: 20px;
    align-items: center;
}

.shop-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: #333;
    font-size: 12px;
    font-weight: bold;
    transition: transform 0.2s;
}

.shop-icon:hover {
    transform: translateY(-3px);
}

.shop-icon img {
    width: 50px;
    height: 50px;
    object-fit: contain;
    margin-bottom: 5px;
    
}

/* ปรับแต่งไอคอน TikTok เฉพาะ */
.shop-icon.tiktok img {
    background: #000;
    padding: 5px;
    border-radius: 10px;
}


/* --- Right Column (Info) --- */
.product-info {
    width: 55%;
    padding: 50px;
    display: flex;
    flex-direction: column;
    
    justify-content: flex-start; 
    
    background: transparent;
    position: relative; /* จำเป็นมาก! เพื่อให้ลูกอ้างอิงตำแหน่งจากกล่องนี้ */
    z-index: 1;
    
    /* เพิ่ม padding-bottom เพื่อกันไม่ให้ตัวหนังสือยาวลงมาทับวงกลม */
    padding-bottom: 150px; 
}

.info-content h2 {
    font-size: 22px;
    line-height: 1.5;
    color: #000;
    margin-bottom: 20px;
}

.info-content p {
    font-size: 20px;
    line-height: 26px;
    color: #000 !important;
    margin-bottom: 20px;
}

.highlight-text {
    font-weight: 600;
    color: #333;
}

/* --- Benefit Bubbles (วงกลม) --- */
.benefit-bubbles {
   display: flex;
    gap: 15px;
    position: absolute;
    /*right: 100px;*/
    bottom: 180px;
    margin-top: 0;
}

.bubble {
    width: 90px;
    height: 90px;
    background-color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.bubble span {
    font-size: 20px;
    font-weight: 600;
    color: #333;
    line-height: 22px;
}

/* =========================================
   RELATED PRODUCTS SECTION
   ========================================= */

.related-products-wrapper {
    margin-top: 80px; /* เว้นระยะห่างจากกล่องสินค้าด้านบน */
    margin-bottom: 60px;
}

.related-heading {
    font-size: 36px;
    font-weight: 700;
    color: #000;
    margin-bottom: 40px; /* เว้นระยะห่างระหว่างหัวข้อกับรูป */
    text-transform: capitalize;
}

/.related-grid {
    display: flex !important;
    justify-content: center !important; /* สั่งจัดกึ่งกลางแนวนอน */
    flex-wrap: wrap !important;
}

/* --- (สำคัญมาก) ต้องซ่อนตัวกวนของ Bootstrap 3 ทิ้งครับ --- */
.related-grid:before,
.related-grid:after {
    display: none !important; 
    content: none !important;
}

/* 2. จัดการกล่องลูก (Column) */
.related-grid .product-item-col {
    width: 25% !important;       /* กว้าง 25% (เหมือน col-md-3) */
    flex: 0 0 25% !important;
    max-width: 25% !important;
    
    /* ยังคงใช้คำสั่งเดิมเพื่อจัดกึ่งกลาง */
    display: block !important;
    float: none !important;
}

.product-img-box {
    /* ...ค่าเดิมที่มีอยู่ (width, padding-top, background-color)... */
    
    border-radius: 20px;       /* ขอบมน */
    
    /* --- เพิ่มบรรทัดนี้ครับ --- */
    overflow: hidden;          /* พระเอกของงาน: ตัดส่วนที่ล้นกรอบทิ้ง */
    
    position: relative;        /* จำเป็นต้องมี เพื่อให้รูปข้างในอ้างอิงได้ */
}

/* ตั้งค่าการขยับให้รูปภาพนุ่มนวล */
.product-img-box img {
    /* ...ค่าเดิมที่มีอยู่... */
    transition: transform 0.5s ease;
}

/* สั่งให้ซูมเมื่อเอาเมาส์ชี้ที่ลิงก์ครอบ */
.product-link-wrapper:hover .product-img-box img {
    transform: scale(0.90); /* ขยาย 10% (ถ้าเยอะไปแก้เป็น 1.05 ก็ได้ครับ) */
}
@media (max-width: 768px) {
	/*.category-box {
		min-height:480px;
		
	}*/
    .product-info {
        /* มือถือไม่ต้องเผื่อที่ด้านล่างเยอะ */
        padding-bottom: 30px; 
    }

    .benefit-bubbles {
        /* มือถือให้กลับมาเรียงต่อกันปกติ ไม่ต้องลอย */
        position: relative; 
        bottom: auto;
        right: auto;
        
        /* จัดกึ่งกลางและเว้นระยะห่างหน่อย */
        justify-content: center;
        margin-top: 30px; 
        width: 100%;
    }
}

/* --- Responsive --- */
@media (max-width: 768px) {
    .product-card {
        flex-direction: column;
    }
    .product-visuals, .product-info {
        width: 100%;
        padding: 30px;
    }
    
    /* ปรับ Gradient ในมือถือ */
    .product-visuals {
        background: linear-gradient(to bottom, #F8F9FB 70%, #FFE8D1 70%);
    }

    .benefit-bubbles {
        justify-content: center;
        flex-wrap: wrap;
    }
	.product-card {
        flex-direction: column;
        
        /* --- แก้ตรงนี้ครับ --- */
        /* สั่งให้พื้นหลังเป็นสีเทาล้วน (#F8F9FB) และยกเลิกไล่สี */
        background: #F8F9FB !important;
    }
    
    /* ปรับส่วนเนื้อหาไม่ให้เว้นที่ด้านล่างเยอะเกินไป (เพราะไม่มีวงกลมลอยแล้ว) */
    .product-info {
        padding-bottom: 40px !important; /* ลดระยะห่างด้านล่าง */
    }

    /* จัดระเบียบวงกลมให้เรียงสวยๆ บนพื้นสีเทา */
    .benefit-bubbles {
        position: relative;
        bottom: auto;
        right: auto;
        justify-content: center;
        margin-top: 40px;
        width: 100%;
    }
    
    /* ถ้าต้องการให้วงกลมมีขอบบางๆ (เพราะพื้นเทา วงกลมขาวอาจจะกลืน) */
    .bubble {
        border: 1px solid #eee; /* เพิ่มเส้นขอบบางๆ ให้เห็นวงกลมชัดขึ้น */
        /* หรือจะใส่เงาเพิ่มก็ได้ */
        box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    }
	.related-grid {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important; /* จัดกึ่งกลางแนวนอน */
        
        /* คืนค่า margin เพื่อให้มีระยะขอบซ้ายขวา */
        margin-left: -10px !important;
        margin-right: -10px !important;
        width: auto !important;
    }

    /* 2. ปรับขนาดกล่องสินค้าแนะนำในมือถือ */
    .related-grid .product-item-col {
        /* แนะนำ: ให้แสดง 2 คอลัมน์ (50%) จะดูสวยกว่า 1 คอลัมน์ใหญ่ */
        width: 50% !important;
        flex: 0 0 50% !important;
        max-width: 50% !important;
        
        /* เว้นระยะห่างระหว่างกล่อง */
        padding-left: 10px !important;
        padding-right: 10px !important;
        margin-bottom: 30px !important;
    }
}


@media (max-width: 480px) {
  .page-404 h1 {
    font-size: 130px;
    line-height: 150px;
  }
}
@media (max-width: 400px) {
  .page-404 h1 {
    font-size: 100px;
    line-height: 100px;
  }
}
@media (max-width: 768px) {
  .page-404 h1 {
    font-size: 150px;
    line-height: 200px;
  }
}
.page-404 h2 {
  text-transform: uppercase;
  font-size: 20px;
  letter-spacing: 4px;
  font-weight: bold;
  margin-top: 30px;
}
.page-404 .copyright-text {
  margin-top: 50px;
  font-size: 12px;
}
.page-404 .btn-main, .page-404 .btn-solid-border, .page-404 .btn-transparent, .page-404 .btn-small {
  margin-top: 40px;
}

/*=================================================================
  Contact
  ==================================================================*/
.contact-us {
  padding: 100px 0;
}

.contact-form {
  margin-bottom: 40px;
}
.contact-form .form-control {
  background-color: transparent;
  border: 1px solid #dedede;
  box-shadow: none;
  height: 45px !important;
  color: #0c0c0c;
  height: 38px;
  font-family: "Open Sans", sans-serif;
  font-size: 14px;
  border-radius: 0;
}
.contact-form input:hover,
.contact-form textarea:hover,
.contact-form #contact-submit:hover {
  border-color: #000;
}
.contact-form #contact-submit {
  border: none;
  padding: 15px 0;
  width: 100%;
  margin: 0;
  background: #000;
  color: #fff;
  border-radius: 0;
}
.contact-form textarea.form-control {
  padding: 10px;
  height: 120px !important;
  outline: none;
}

.contact-details #map {
  width: 100%;
  height: 300px;
}
.contact-details .contact-short-info {
  margin-top: 20px;
}
.contact-details .contact-short-info li {
  margin-bottom: 6px;
  color: #555;
  font-weight: 300;
}
.contact-details .contact-short-info li i {
  margin-right: 10px;
}

.social-icon {
  margin-top: 20px;
}
.social-icon ul li {
  display: inline-block;
  margin-right: 10px;
}
@media (max-width: 400px) {
  .social-icon ul li {
    margin-bottom: 5px;
    margin-right: 5px;
  }
}
.social-icon ul li a {
  display: block;
  height: 50px;
  width: 50px;
  border-radius: 50%;
  border: 1px solid #000;
  text-align: center;
}
.social-icon ul li a:hover {
  background: #000;
  color: #fff;
  border: 1px solid #000;
}
.social-icon ul li a:hover i {
  color: #fff;
}
.social-icon ul li a i {
  color: #000;
  display: inline-block;
  font-size: 20px;
  line-height: 50px;
  margin: 0;
}

.error {
  display: none;
  padding: 10px;
  color: #D8000C;
  border-radius: 4px;
  font-size: 13px;
  background-color: #FFBABA;
}

.success {
  background-color: #6cb670;
  border-radius: 4px;
  color: #fff;
  display: none;
  font-size: 13px;
  padding: 10px;
}

.footer {
  /*background: #F7F7F7;
  padding: 50px 0;*/
}
.footer .footer-menu {
  margin-top: 30px;
}
.footer .footer-menu li {
  display: inline-block;
  margin: 0 10px;
}
.footer .footer-menu li a {
  color: #333;
  font-size: 12px;
}
.footer .copyright-text {
  margin-top: 20px;
}

.copyright-text a {
  color: #000;
}

.social-media li {
  display: inline-block;
  /*margin: 0 5px;*/
}
.social-media li a {
  padding: 0px 5px;
}
.social-media li a i {
  font-size: 20px;
  color: #555;
}

/* --- Container สำหรับจัด Grid --- */
.creations-grid-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* จัดกึ่งกลาง (ทำให้แถวล่างที่มี 2 อันอยู่ตรงกลาง) */
    gap: 40px;               /* ระยะห่างระหว่างรูป */
    padding: 40px 0;
}

/* --- กล่องสินค้าแต่ละชิ้น --- */
.creation-item {
    /* กำหนดความกว้าง: ปรับเลขนี้ได้ตามต้องการ */
    /* calc(33.33% - 40px) คือแบ่ง 3 ช่อง ลบด้วยช่องว่าง */
    width: 300px; 
    text-align: center;      /* จัดตัวหนังสือให้อยู่กึ่งกลาง */
    margin-bottom: 20px;
}

.creation-link {
    text-decoration: none !important; /* ลบเส้นใต้ Default ของลิงก์ออกก่อน */
    display: block;
    color: #000;             /* สีตัวหนังสือดำ */
}

.creation-link:hover {
    opacity: 0.8;            /* เอฟเฟกต์ตอนชี้เมาส์ */
}

/* --- จัดการรูปภาพ (สี่เหลี่ยม ขอบไม่มน) --- */
.creation-img {
    width: 100%;
    /* กำหนดสัดส่วนรูปภาพ (เช่น 2:3) หรือความสูงคงที่ */
    height: 400px;           
    overflow: hidden;
    margin-bottom: 15px;     /* ระยะห่างระหว่างรูปกับชื่อ */
}

.creation-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;       /* ให้รูปเต็มพื้นที่โดยไม่เบี้ยว */
    border-radius: 0;        /* ⚠️ ตามที่ขอ: ไม่ทำขอบมน */
    display: block;
}

/* --- ส่วนชื่อสินค้า (ตัวหนา + ขีดเส้นใต้) --- */
.creation-title {
    font-size: 32px;         /* ขนาดตัวหนังสือ */
    font-weight: bold;       /* ตัวหนา */
    margin: 0;
    
    /* สร้างขีดเส้นใต้ */
    text-decoration: underline; 
    text-underline-offset: 4px; /* เว้นระยะเส้นใต้ออกมานิดหน่อยให้สวยงาม */
    text-decoration-thickness: 1px; /* ความหนาของเส้น */
}

.creation-desc p{
  font-size:24px;
  color:#000;
}

/* --- Responsive (มือถือ) --- */
@media (max-width: 768px) {
    .creation-item {
        width: 100%;         /* มือถือให้เต็มจอ */
        max-width: 350px;    /* แต่ไม่เกิน 350px */
    }
    
    .creations-grid-wrapper {
        gap: 20px;
    }
}

/* --- Header Section --- */
.creation-heading {
    font-size: 32px;
    font-weight: 700;
    color: #000;
}

.creation-desc {
    font-size: 18px;
    color: #333;
    margin-bottom: 20px;
}

/* --- Grid Layout --- */
/* จัดให้ Grid อยู่กึ่งกลาง กรณีมีเศษ */
.creation-grid-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

/* ซ่อน Clearfix ของ Bootstrap 3 เพื่อให้ Flexbox ทำงานสมบูรณ์ */
.creation-grid-row:before,
.creation-grid-row:after {
    display: none !important;
}

.creation-col {
    float: none !important; /* ยกเลิก float */
    margin-bottom: 50px;    /* ระยะห่างระหว่างบรรทัด */
    padding-left: 20px;     /* ระยะห่างระหว่างรูป */
    padding-right: 20px;
}

/* --- Card Design --- */
.creation-card-link {
    text-decoration: none !important;
    display: block;
    text-align: center; /* จัดกึ่งกลางทั้งหมด */
}

.creation-card-link:hover {
    opacity: 0.9;
}

/* รูปภาพมุมมน */
.creation-card-img {
    border-radius: 20px; /* ปรับความมนตรงนี้ (ตามภาพน่าจะประมาณ 20-30px) */
    overflow: hidden;    /* ตัดส่วนที่เกินขอบมนทิ้ง */
    margin-bottom: 25px; /* ระยะห่างจากรูปถึงชื่อ */
    box-shadow: 0 5px 15px rgba(0,0,0,0.05); /* เงาบางๆ เพื่อความสวยงาม */
}

.creation-card-img img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.5s ease;
}

/* เอฟเฟกต์ซูมรูปตอนชี้ */
.creation-card-link:hover .creation-card-img img {
    transform: scale(1.03);
}

/* ชื่อเมนู (ขีดเส้นใต้) */
.creation-card-title {
    font-size: 26px;
    font-weight: 700;
    color: #000;
    margin: 0;
}

/* --- Mobile Responsive --- */
@media (max-width: 767px) {
    .creation-col {
        width: 100%; /* มือถือแสดงเต็มจอ */
        padding-left: 15px;
        padding-right: 15px;
    }
    
    .creation-heading {
        font-size: 24px; /* ลดขนาดหัวข้อในมือถือ */
    }
}

/* --- Header --- */
.creation-cat-header {
    font-weight: 700;
    font-size: 24px;
    margin-bottom: 10px;
    color: #000;
}
.creation-cat-sub {
    color: #777;
    font-size: 16px;
}

/* --- Top Section (Main) --- */
.creation-featured-img img {
    width: 100%;
    max-width: 500px; /* คุมไม่ให้รูปใหญ่เกินไป */
    height: auto;
    display: inline-block;
    border-radius: 15px; /* มุมมนตามสไตล์ */
}

.creation-title {
    font-size: 38px;
    font-weight: 800;
    margin-top: 0;
    margin-bottom: 5px;
    text-transform: uppercase;
    line-height: 1.1;
}

.creation-title-main{
    font-size: 26px;
    font-weight: 800;
    margin-top: 0;
    margin-bottom: 5px;
    text-transform: uppercase;
    line-height: 1.1;
}

.creation-subtitle {
    font-size: 20px;
    font-weight: 700;
    color: #a8b400;
    margin-top: 0;
    margin-bottom: 25px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.creation-content-body p {
    font-size: 16px;
    line-height: 1.7;
    color: #555;
}

/* --- Recipe Image (Middle) --- */
.creation-recipe-img-wrapper img {
    display: block;
    margin: 0 auto;
    width: 100%;
}

/* --- QR Section (Bottom Box) --- */
.creation-qr-box {
    background: #F9F9F9; /* พื้นหลังสีเทาอ่อน */
    padding: 20px 30px;
}

.qr-heading {
    font-size: 32px;
    font-weight: 700;
    color: #000;
    margin-top: 0;
    margin-bottom: 5px;
}

.qr-desc {
    font-size: 24px;
    color: #555;
    margin-bottom: 0;
}

.qr-img-col {
    text-align: right; /* ให้ QR Code ชิดขวา */
}

.qr-img-wrapper img {
    width: 120px; /* ขนาด QR */
    height: auto;
    display: inline-block;
}

/* --- Responsive Mobile --- */
@media (max-width: 767px) {
    .mb-30 { margin-bottom: 30px; }
    
    .creation-title { font-size: 28px; }
    .creation-subtitle { font-size: 18px; }

    .creation-qr-box .row {
        display: block !important; /* เลิกใช้ Flex ในมือถือ */
        text-align: center;
    }

    .qr-text-col {
        margin-bottom: 20px;
        text-align: center;
    }

    .qr-img-col {
        text-align: center;
    }
}

/* --- Grid Layout System --- */
.decode-grid-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 40px; /* ระยะห่างระหว่างวงกลม */
    margin-top: 20px;
}

.decode-item {
    /* สูตรคำนวณ width: (100% / 4) - ช่องว่าง */
    width: calc(25% - 40px); 
    text-align: center;
    margin-bottom: 30px;
}

.decode-link {
    text-decoration: none !important;
    display: block;
    color: #000;
}

.decode-link:hover {
    opacity: 0.8; /* เอฟเฟกต์ตอนชี้ */
}

/* --- Image Styling (วงกลม) --- */
.decode-img-circle {
    /* แก้ไข: กำหนดความกว้างสูงสุด หรือ เปอร์เซ็นต์ที่เล็กลง */
    /* เช่น ปรับให้เหลือ 80% ของพื้นที่คอลัมน์ (จากเดิม 100%) */
    width: 70%; 
    /* หรือถ้าอยากได้ขนาดฟิกซ์ตายตัว ก็ใส่ pixel ไปเลย เช่น width: 150px; */

    /* จัดให้อยู่กึ่งกลาง */
    margin: 0 auto 20px auto;

    /* ส่วนนี้เหมือนเดิม เพื่อรักษาอัตราส่วน 1:1 */
    padding-top: 70%; /* ถ้า width 80% ตรงนี้ก็ต้อง 80% ตาม */
    /* ถ้า width เป็น pixel (เช่น 150px) ตรงนี้ให้ลบทิ้ง แล้วไปใส่ height: 150px; แทน */
    
    position: relative;
    border-radius: 50%;
    overflow: hidden;
    background-color: #f0f0f0;
}

.decode-img-circle img {
    /* ...เหมือนเดิม... */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

/* Zoom Effect */
.decode-link:hover .decode-img-circle img {
    transform: scale(1.05);
}

/* --- Typography --- */
.decode-title {
    font-size: 24px;
    font-weight: 700; /* ตัวหนา */
    color: #000;
    margin: 0;
}

/* --- Responsive (ปรับตามขนาดจอ) --- */
@media (max-width: 991px) {
    /* Tablet: เหลือ 3 คอลัมน์ */
    .decode-item {
        width: calc(33.33% - 40px);
    }
}

@media (max-width: 767px) {
    /* Mobile Landscape: เหลือ 2 คอลัมน์ */
    .decode-item {
        width: calc(50% - 20px);
    }
    .decode-grid-wrapper {
        gap: 20px;
    }
}

@media (max-width: 480px) {
    /* Mobile Portrait: เหลือ 1 คอลัมน์ใหญ่ๆ หรือ 2 เล็กๆ ก็ได้ (อันนี้เลือก 2) */
    .decode-title {
        font-size: 16px;
    }
}

.decode-post.section {
	padding: 40px 0px 120px 0px;
}
.decode-post .title h2{
	font-size: 32px;
    font-weight: 700;
    color: #000;
    margin: 0;
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-thickness: 1.5px;
}
.decode-post h1{
	font-size: 42px;
	font-weight: 700;
	line-height:46px;
}

/* --- Fade Out Effect CSS (เปลี่ยนจาก Zoom เป็นจางลง) --- */

/* 1. จัดการกล่องรูปภาพ */
.product-thumb {
    position: relative;
    overflow: hidden;
    display: block;
    border-radius: 10px;
}

/* 2. ตั้งค่ารูปภาพให้ขยับแบบนุ่มนวล */
.product-thumb img {
    width: 100%;
    height: auto;
    display: block; /* แก้ปัญหาขอบขาวด้านล่างรูป */
    
    /* เปลี่ยนจาก transition: transform เป็น all เพื่อให้ครอบคลุมทุก effect */
    transition: all 0.5s ease; 
    
    /* ค่าเริ่มต้นคือทึบแสง 100% */
    opacity: 1; 
}

/* 3. สั่งให้จางลงเมื่อเอาเมาส์ชี้ที่กล่องสินค้า (.product-item) */
.product-item:hover .product-thumb img {
    /* ยกเลิกการซูมออกไป */
    /* transform: scale(1.1); */ 
    
    /* ปรับให้จางลงเหลือ 70% (ปรับเลขได้ตั้งแต่ 0.1 - 0.9) */
    opacity: 0.7; 
}

/* --- Layout Spacing --- */
.innovation-page-wrapper {
    margin-top: 60px;
    margin-bottom: 100px;
}

.mb-40 { margin-bottom: 40px; }
.width-100 { width: 100%; height: auto; }

/* --- Section 1: Logos --- */
.innovation-logos-row {
    margin-bottom: 10px;
}

.inn-img-circle {
    width: 200px;       /* กำหนดขนาดวงกลม */
    height: 200px;
    margin: 0 auto; /* จัดกึ่งกลาง */
    border-radius: 50%; /* ทำเป็นวงกลม */
    overflow: hidden;
}

.inn-img-circle img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* หรือ contain ถ้าอยากเห็นโลโก้เต็มๆ ไม่โดนตัด */
}

.inn-logo-title {
    font-size: 28px;
    font-weight: normal;
    color: #000;
    margin-top: 10px;
    display: inline-block;
    line-height: 1;
    font-family: 'db_heaventbold';
}

/* --- Section 2: Content --- */
.innovation-content-row {
    margin-bottom: 60px;
    display: flex; /* ใช้ Flexbox เพื่อจัดกึ่งกลางแนวตั้ง */
    flex-wrap: wrap;
    align-items: center;
}

.inn-text-content p {
    font-size: 24px;
    line-height: 26px;
    color: #333;
    text-align: justify; /* จัดชิดขอบซ้ายขวาแบบหนังสือ */
    margin-bottom: 15px;
	font-family : 'db_heaventregular';
}

/* --- Section 3: Tech Buttons --- */
.innovation-tech-row {
    margin-bottom: 20px;
}

.tech-flex-container {
    display: flex;
    align-items: center; /* จัดให้อยู่ระนาบเดียวกัน */
    flex-wrap: wrap;
    gap: 20px; /* ระยะห่างระหว่าง Label กับปุ่ม */
}

.tech-label h4 {
    font-size: 24px;
    font-weight: 700;
    color: #000;
    margin: 0;
    min-width: 250px; /* ความกว้างขั้นต่ำของ Label */
}

.tech-buttons-list {
    display: flex;
    flex-wrap: wrap;
    gap: 15px; /* ระยะห่างระหว่างปุ่ม */
}

.btn-tech {
    display: inline-block;
    background-color: #000; /* สีดำ */
    color: #fff !important;
    padding: 2px 20px;
    border-radius: 4px;
    font-size: 22px;
    font-weight: 600;
    text-decoration: none;
    text-transform: uppercase;
    transition: opacity 0.3s;
    min-width: 80px;
    text-align: center;
}

.btn-tech:hover {
    opacity: 0.8;
    color: #fff;
}

/* --- Section 4: Footer Link --- */
.mas-website-link a {
    font-size: 24px;
    font-weight: 700;
    color: #000;
    text-decoration: none;
}

/* --- จัดให้ Logo ชิดกันตรงกลาง --- */
.flex-center-row {
    display: flex;
    justify-content: center; /* สั่งให้เนื้อหาภายในมากองรวมกันตรงกลาง */
    flex-wrap: wrap;         /* อนุญาตให้ปัดตกได้ในมือถือ */
}

/* แก้ Bug Bootstrap 3 ที่อาจจะมี float รบกวน */
.flex-center-row:before,
.flex-center-row:after {
    display: none !important;
}

/* (Optional) ถ้าอยากให้ชิดกันกว่านี้อีก ให้ลดความกว้างใน Desktop */
@media (min-width: 992px) {
    .flex-center-row .col-md-4 {
        width: 25%; /* บีบให้เหลือคนละ 25% (รวมกัน 50%) จะยิ่งชิดกัน */
        max-width: 300px; /* หรือกำหนดขนาดสูงสุดไปเลย */
    }
}

/* --- Mobile Responsive --- */
@media (max-width: 767px) {
    .innovation-content-row {
        display: block; /* เลิกใช้ Flex บนมือถือ */
    }
    
    .inn-main-image {
        margin-bottom: 30px;
    }
    
    .tech-flex-container {
        flex-direction: column; /* เรียงลงมาแนวตั้ง */
        align-items: flex-start;
    }
    
    .tech-buttons-list {
        width: 100%;
    }
    
    .btn-tech {
        flex: 1; /* ปุ่มขยายเต็มในมือถือถ้าต้องการ */
    }
}

/* --- Spacing Utilities --- */
.mb-30 { margin-bottom: 30px; }
.mb-40 { margin-bottom: 40px; }
.mb-50 { margin-bottom: 50px; }
.mb-60 { margin-bottom: 60px; }
.mb-80 { margin-bottom: 80px; }
.mt-10 { margin-top: 10px; }
.width-100 { width: 100%; height: auto; }

/* --- Main Titles --- */
.oem-main-title {
    font-size: 48px;
    font-weight: 800;
    color: #000;
    margin-top: 0;
    margin-bottom: 10px;
}

/* --- Section 1: Capabilities (Circles) --- */
.cap-img-circle {
    width: 160px;
    height: 160px;
    background-color: #eee; /* สีเทาพื้นหลังวงกลม */
    border-radius: 50%;
    overflow: hidden;
    margin: 0 auto 20px auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cap-img-circle img {
    max-width: 100%;
    max-height: 100%;
    object-fit: cover; /* หรือ contain ตามรูป */
}

.cap-title {
    font-size: 24px;
    font-weight: 700;
    color: #000;
    line-height: 26px;
    margin: 0 auto;
}

/* --- Section 2: CMG Service --- */
.cmg-title {
    font-size: 28px;
    font-weight: 800;
    color: #000;
    margin: 0;
    text-transform: uppercase;
}

.cmg-subtitle {
    font-size: 24px;
    color: #333;
    display: block;
    margin-bottom: 20px;
}

.cmg-content p {
    font-size: 22px;
    line-height: 26px;
    color: #333;
    margin-bottom: 15px;
    text-align: justify;
}

/* --- Section 3: Packaging Formats --- */
.pkg-img-circle {
   
    margin: 0 auto 25px auto;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.pkg-img-circle img {
    max-height: 80%;
    width: auto;
}

.pkg-badge {
    display: inline-block;
    background-color: #97cf48; /* สีเขียวตองอ่อนตามแบบ */
    color: #fff;
    font-weight: 700;
    font-size: 20px;
    padding: 5px 25px;
    border-radius: 20px;
    text-transform: uppercase;
    margin-bottom: 20px;
}

.pkg-title {
    font-size: 26px;
    font-weight: 800;
    color: #000;
    margin-bottom: 10px;
}

.pkg-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.pkg-list li {
    font-size: 22px;
    color: #333;
    margin-bottom: 3px;
	line-height:24px;
}

.pkg-sub-group u {
    font-weight: 700;
    text-decoration: underline;
    display: block;
    margin-bottom: 5px;
    font-size: 24px;
}

/* --- Section 4: Contact --- */
.oem-contact-text {
    font-size: 24px;
    color: #333;
	text-align:left;
}

.oem-contact-text a {
    color: #333;
    text-decoration: none;
    font-weight: 600;
}

/* --- Mobile Responsive --- */
@media (max-width: 767px) {
    .oem-main-title { font-size: 28px; }
    
    .cap-img-circle {
        width: 120px;
        height: 120px;
    }
    
    .pkg-item {
        margin-bottom: 40px;
    }
}

.entry-header h1{
	font-size: 28px;
    line-height: 28px;
}


/* ปุ่มที่ถูกกด (Active) และปุ่มที่เอาเมาส์ชี้ (Hover) */
.size-btn.active, 
.size-btn:hover {
    /* เรียกใช้ตัวแปรสีเข้มที่เราส่งมาจาก PHP */
    background-color: var(--dynamic-main-color, #EF7D00) !important;
    border-color: var(--dynamic-main-color, #EF7D00) !important;
    
    color: #fff !important; /* ตัวหนังสือสีขาว */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); /* เงาเพื่อให้ดูเด่น */
}

/* --- Spacing --- */
.mt-50 { margin-top: 50px; }
.mb-30 { margin-bottom: 30px; }
.mb-80 { margin-bottom: 80px; }
.mt-40 { margin-top: 40px; }

/* --- เริ่มต้น CSS ส่วน Blog Card --- */

.blog-item-col {
    margin-bottom: 40px; /* ระยะห่างระหว่างแถว */
}

.blog-card {
    position: relative;
    width: 100%;
	border: 1px solid #ddd;
}

/* 1. ส่วนรูปภาพ */
.blog-thumb {
    overflow: hidden;
}

.blog-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* บังคับรูปให้เต็มกรอบไม่บีบ */
    transition: transform 0.5s ease;
}

/* เอฟเฟกต์ซูมรูปเมื่อเอาเมาส์ชี้ */
.blog-card:hover .blog-thumb img {
    transform: scale(1.1);
}

/* 2. ส่วนกล่องเนื้อหา (หัวใจสำคัญ) */
.blog-content {
    background: #fff;
    padding: 25px;
    position: relative;
    text-align: left;
}

/* 3. หัวข้อข่าว - ตัวใหญ่ */
.blog-title {
    margin-top: 0;
    margin-bottom: 15px;
}

.blog-title a {
    font-size: 26px; /* ขนาดตัวอักษรหัวข้อใหญ่ */
    font-weight: 700;
    color: #333;
    text-decoration: none;
    line-height: 28px;
    display: block; /* แก้ปัญหาบรรทัด */
}

.blog-title a:hover {
    color: #dc3545;
}

/* 4. เนื้อหาย่อ - อ่านง่าย */
.blog-excerpt {
    font-size: 20px;
    color: #666;
    line-height: 22px;
    margin-bottom: 20px;
}

/* 5. ปุ่ม Read More - สีแดงทึบ */
.read-more-btn {
    display: inline-block;
    background-color: #dc3545; /* สีแดง */
    color: #fff !important; /* บังคับตัวหนังสือขาว */
    padding: 10px 25px;
    border-radius: 4px;
    font-size: 18px;
    font-weight: bold;
    text-transform: uppercase;
    text-decoration: none;
    transition: all 0.3s;
}

.read-more-btn:hover {
    background-color: #a71d2a; /* สีแดงเข้มเมื่อชี้ */
    color: #fff;
}

.read-more-btn i {
    margin-left: 5px;
}

/* --- Secret Page: Main Content --- */
.secret-title {
    font-size: 36px;
    font-weight: 700;
	line-height:38px;
	margin-bottom:0px;
    color: #222;
}

.secret-subtitle {
    font-size: 24px;
    color: #222;
    margin-bottom: 15px;
}

.section-heading {
    font-size: 46px;
    font-weight: 700;
    color: #222;
}
.wysiwyg-content{
	font-size:22px;
	line-height:24px;
}
.wysiwyg-content ul li{
	list-style:disc;
	margin-left:20px;
}

/* Video Responsive */
.video-title{
	margin-bottom:15px;
	font-size:28px;
}
.video-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    background: #000;
}
.video-container iframe {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
}

/* --- Related Product (สไตล์ Card เดิม) --- */
.related-header {
    font-size: 28px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-top: 30px;
}

.blog-card {
    background: #fff;
    margin-bottom: 30px;
    border: 1px solid #eee; /* เส้นขอบบางๆ */
    transition: all 0.3s ease;
}

.blog-card:hover {
    box-shadow: 0 10px 20px rgba(0,0,0,0.1); /* เงามีมิติเมื่อเอาเมาส์ชี้ */
}

.blog-thumb {
    overflow: hidden;
}

.blog-thumb img {
    width: 100%;
    height: auto;
    transition: transform 0.5s ease;
}

.blog-card:hover .blog-thumb img {
    transform: scale(1.05); /* รูปขยายเล็กน้อยเมื่อ Hover */
}

.blog-content {
    padding: 20px;
    text-align: left;
}

.blog-title {
    font-size: 18px;
    margin-top: 0;
    margin-bottom: 10px;
    font-weight: 600;
    text-transform: uppercase;
}

.blog-title a {
    color: #333;
    text-decoration: none;
}


.read-more-btn {
    border-bottom: 2px solid transparent;
    transition: border-color 0.3s;
}

.read-more-btn:hover {
    border-color: #333; /* ขีดเส้นใต้เมื่อเอาเมาส์ชี้ */
}
.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Related Product (คง Design เดิมตามที่แจ้ง) */
.related-header {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 30px;
    margin-top: 20px;
}


.contact-header h1{
	font-size:48px;
}
.contact-header h2{
	font-size:32px;
	margin-top:5px;
	line-height:36px;
	font-family:'db_heaventregular'
}
/* ปรับหัวข้อหน้า */
.page-header h1 {
    font-weight: 700;
    margin-bottom: 20px;
    text-align: center; /* จัดหัวข้อกึ่งกลาง */
}

/* ถ้าต้องการให้ Form กว้างเต็ม 100% ของ Container เสมอ */
.wpforms-container {
    width: 100% !important;
}
/* 1. กรอบใหญ่ (Container) - สร้างกล่องสีขาว มีเงา */
div.wpforms-container-full {
    background-color: #EEE; /* พื้นหลังสีขาว */
    padding: 30px; /* ระยะห่างขอบด้านใน */
    border-radius: 20px; /* มุมโค้งมน */
   
    margin: 20px auto;
    border: 1px solid #222; /* เส้นขอบจางๆ */
    max-width: 100%;
}

/* 2. หัวข้อ (Label) - ตัวหนา สีเข้ม */
div.wpforms-container-full .wpforms-form .wpforms-field-label {
    font-weight: 600;
    font-size: 22px;
    color: #333333;
    margin-bottom: 2px;
    display: block;
}

/* ซ่อน sub-label เล็กๆ (เช่น First, Last) เพื่อความสะอาดตา (ถ้าต้องการ) */
div.wpforms-container-full .wpforms-form .wpforms-field-sublabel {
    display: none;
}

/* 3. ช่องกรอกข้อมูล (Input & Textarea) */
div.wpforms-container-full .wpforms-form input[type=text],
div.wpforms-container-full .wpforms-form input[type=email],
div.wpforms-container-full .wpforms-form input[type=number],
div.wpforms-container-full .wpforms-form input[type=tel],
div.wpforms-container-full .wpforms-form textarea,
div.wpforms-container-full .wpforms-form select {
    border: 1px solid #222; /* เส้นขอบสีเทา */
    border-radius: 20px;
    padding: 12px 15px;
    font-size: 20px;
    color: #555;
    width: 100%;
    box-sizing: border-box;
    transition: all 0.3s ease;
    height: 46px; /* ความสูงช่อง */
}

/* ปรับความสูง Textarea */
div.wpforms-container-full .wpforms-form textarea {
    height: 150px;
    padding-top: 15px;
    font-family: inherit;
}

/* Effect เมื่อคลิกที่ช่อง (Focus) */
div.wpforms-container-full .wpforms-form input:focus,
div.wpforms-container-full .wpforms-form textarea:focus {
    background-color: #ffffff;
    border-color: #222; /* เปลี่ยนขอบเป็นสีเข้มเมื่อพิมพ์ */
    outline: none;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

/* 4. จัดระยะห่างระหว่างบรรทัด */
div.wpforms-container-full .wpforms-form .wpforms-field {
    margin-bottom: 10px;
    padding: 0 !important;
    clear: both;
}

/* แก้ไข Layout แบบ Grid (ซ้าย-ขวา) ให้ชิดกันสวยงาม */
div.wpforms-container-full .wpforms-form .wpforms-one-half {
    width: 48% !important; /* เว้นช่องไฟตรงกลาง */
    margin-left: 4% !important;
    float: left;
    clear: none !important;
}
div.wpforms-container-full .wpforms-form .wpforms-one-half.wpforms-first {
    margin-left: 0 !important;
    clear: both !important;
}

/* 5. ปุ่มกด (Submit Button) */
div.wpforms-container-full .wpforms-submit-container {
    text-align: right; /* ย้ายปุ่มไปขวาสุด */
    margin-top: 10px;
    clear: both;
}

div.wpforms-container-full .wpforms-form button[type=submit] {
    background-color: #222222 !important; /* สีปุ่มดำ */
    color: #ffffff !important;
    border: none;
    padding: 12px 45px; /* ขนาดปุ่ม */
    font-size: 22px;
    font-family: 'db_heaventbold';
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.3s ease, transform 0.2s;
}

div.wpforms-container-full .wpforms-form button[type=submit]:hover {
    background-color: #000000 !important;
    transform: translateY(-2px); /* ขยับขึ้นนิดนึงตอนชี้ */
}
div.wpforms-container-full .wpforms-form label{
	font-size:20px;
	font-family: 'db_heaventbold';
}

div.wpforms-container-full .wpforms-form .wpforms-field-required label{
	font-size:20px;
	margin-left:8px;
	font-family: 'db_heaventbold';
}

/* Responsive: ปรับเป็นแถวเดียวเมื่ออยู่บนมือถือ */
@media only screen and (max-width: 600px) {
    div.wpforms-container-full .wpforms-form .wpforms-one-half {
        width: 100% !important;
        margin-left: 0 !important;
    }
    div.wpforms-container-full {
        padding: 20px;
    }
}

  .footer-malee {
      background-image: url("../img/footer-red.webp"); /* ใส่ path รูป background ของคุณ */
      background-size: cover;
      background-position: center;
      color: #ffffff;
      padding: 20px 0;
      position: relative;
    }

    .footer-malee .footer-title {
      
      font-size: 26px;
     line-height:28px;
	  font-family:'db_heaventbold'
    }

    .footer-malee .footer-text {
      font-size: 22px;
	  line-height:26px;
     font-family:'db_heaventregular'
    }

    .footer-malee .footer-item {
      margin-bottom: 24px;
    }
	
	.footer-malee .footer-item i{
		font-size: 22px;
      margin-right: 5px;
	  vertical-align:middle;
	}
	 .footer-malee .footer-text strong{
		 font-family:'db_heaventbold';
		 font-weight:normal;
	 }

    .footer-malee .footer-right {
      text-align: right;
      margin-top:80px;
    }
	
	.footer-malee .footer-right a{
		font-size: 22px;
		line-height: 26px;
		color:#fff;
		font-family:'db_heaventbold'
	}

	.footer-container{
	  justify-content:end;
	  display:flex;
	}

    .footer-nav {
      font-weight: bold;
      font-size: 28px;
	  float:none;
	  justify-content:end;
    }

    .footer-nav > li > a {
      color: #ffffff;
      text-decoration: none;
      padding: 0 15px;
    }

    .footer-nav > li > a:hover {
      text-decoration: underline;
      background: transparent;
    }

    @media (max-width: 767px) {
      .footer-malee {
        padding: 30px 0;
      }
      .footer-right {
        text-align: left;
        margin-top: 20px;
      }
      .footer-nav {
        position: static;
        text-align: center;
        margin-bottom: 20px;
      }
      .footer-nav > li {
        float: none;
        display: inline-block;
      }
    }