/*--------------------------------------------------------------------- File Name: style.css ---------------------------------------------------------------------*/


/*--------------------------------------------------------------------- import Fonts ---------------------------------------------------------------------*/

@import url('https://fonts.googleapis.com/css?family=Rajdhani:300,400,500,600,700');
@import url('https://fonts.googleapis.com/css?family=Poppins:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i');
@font-face {
font-family: "Righteous";
src: url("../fonts/Righteous-Regular.ttf");
src: url("../fonts/Lato-Regular.ttf");
}
/*****---------------------------------------- 1) font-family: 'Rajdhani', sans-serif;
 2) font-family: 'Poppins', sans-serif;
 ----------------------------------------*****/


/*--------------------------------------------------------------------- import Files ---------------------------------------------------------------------*/

@import url(animate.min.css);
@import url(normalize.css);
@import url(icomoon.css);
@import url(css/font-awesome.min.css);
@import url(meanmenu.css);
@import url(owl.carousel.min.css);
@import url(swiper.min.css);
@import url(slick.css);
@import url(jquery.fancybox.min.css);
@import url(jquery-ui.css);
@import url(nice-select.css);

/*--------------------------------------------------------------------- skeleton ---------------------------------------------------------------------*/

* {
     box-sizing: border-box !important;
     transition: ease all 0.5s;
}

html {
     scroll-behavior: smooth;
}

body {
     color: #666666;
     font-size: 14px;
     font-family:Poppins;
     line-height: 1.80857;
     font-weight: normal;
     overflow-x: hidden;
}

a {
     color: #1f1f1f;
     text-decoration: none !important;
     outline: none !important;
     -webkit-transition: all .3s ease-in-out;
     -moz-transition: all .3s ease-in-out;
     -ms-transition: all .3s ease-in-out;
     -o-transition: all .3s ease-in-out;
     transition: all .3s ease-in-out;
}

h1,
h2,
h3,
h4,
h5,
h6 {
     letter-spacing: 0;
     font-weight: normal;
     position: relative;
     padding: 0 0 10px 0;
     font-weight: normal;
     line-height: normal;
     color: #111111;
     margin: 0
}

h1 {
     font-size: 24px
}

h2 {
     font-size: 22px
}

h3 {
     font-size: 18px
}

h4 {
     font-size: 16px
}

h5 {
     font-size: 14px
}

h6 {
     font-size: 13px
}

h8 {
    font-size: 35pxl;
  
}

h9 {
    font-size: 50px
}

h10 {
    font-size: 60px
}
*,
*::after,
*::before {
     -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
     box-sizing: border-box;
}

h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
     color: #212121;
     text-decoration: none!important;
     opacity: 1
}

button:focus {
     outline: none;
}

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

p {
     margin: 20px;
     font-weight: 300;
     font-size: 15px;
     line-height: 24px;
}

a {
     color: #222222;
     text-decoration: none;
     outline: none !important;
}

a,
.btn {
     text-decoration: none !important;
     outline: none !important;
     -webkit-transition: all .3s ease-in-out;
     -moz-transition: all .3s ease-in-out;
     -ms-transition: all .3s ease-in-out;
     -o-transition: all .3s ease-in-out;
     transition: all .3s ease-in-out;
}

img {
     max-width: 100%;
     height: auto;
}

 :focus {
     outline: 0;
}

.paddind_bottom_0 {
     padding-bottom: 0 !important;
}

.btn-custom {
     margin-top: 20px;
     background-color: transparent !important;
     border: 2px solid #ddd;
     padding: 12px 40px;
     font-size: 16px;
}

.lead {
     font-size: 18px;
     line-height: 30px;
     color: #767676;
     margin: 0;
     padding: 0;
}

.form-control:focus {
    border-color: #f5f0f0 !important;
    box-shadow: 0 0 0 .2rem rgba(255, 255, 255, .25);
}

.navbar-form input {
     border: none !important;
}

.badge {
     font-weight: 500;
}

blockquote {
     margin: 20px 0 20px;
     padding: 30px;
}

button {
     border: 0;
     margin: 0;
     padding: 0;
     cursor: pointer;
}

.full {
     float: left;
     width: 100%;
}

.layout_padding {
     padding-top: 30px;
     padding-bottom: 0px;
}

.layout_padding2 {
    padding-top: auto;
    padding-bottom: auto;
}

.padding_0{
     padding: 0px;
}

.logo {
    width: 15%;
    float: left;
}
.navbar {
    padding: 20px 30px;
}
.navbar-expand-lg .navbar-nav .nav-link {
    padding-right: 10px;
    padding-left: 10px;
    font-size: 18px;
}
.bg-light {
    background-color: #ffffff !important;
    box-shadow: 0px 0px 10px 0px;
}
.navbar-light .navbar-nav .nav-link {
    color: #24292f;
    font-weight: 500;
}
    .navbar-light .navbar-nav .nav-link:focus, .navbar-light .navbar-nav .nav-link:hover {
        color: #026269;
    }

    .navbar-light .navbar-nav .active > .nav-link, .navbar-light .navbar-nav .nav-link.active, .navbar-light .navbar-nav .nav-link.show, .navbar-light .navbar-nav .show > .nav-link {
        color: #00d0f5;
    }

.banner_section {
    width: 100%;
    float: left;
    background-image: url(../images/NBG.jpg);
    height: auto;
    padding-top: 90px;
    padding-bottom: 135px;
    l background-size: cover;
}

.banner_section2 {
    width: 100%;
    float: left;
    background-image: url(../images/NBG.jpg);
    height: 500px;
    padding-top: auto;
    padding-bottom: auto;
}

.image_1 {
    width: 100%;
    float: left;
    padding-top: 40px;
}

.title-video_text{
    padding-top: 15%;
}


.video_text{
    width: 100%;
    float: left;
    font-size: 50px;
    color: #fefeff;
    font-weight: 600;
    text-transform: uppercase;
    

}
.controller_text {
    width: 100%;
    float: left;
    font-size: 25px;
    color: #599ee9;
    font-weight: 600;
    text-transform: uppercase;
    line-height: 50px;
}
.banner_text {
    width: 100%;
    float: left;
    font-size: 16px;
    color: #fefeff;
    font-weight: 500;
    margin-left: 0px;
    padding-top: 50px;
}

.shop_bt {
    width: 35%;
    float: left;
    font-size: 18px;
    text-align: center;
    background-color: #fcfcfd;
    color: #191919;
    border-left: 10px solid #599ee9;
    border-radius: 30px;
    border-right: 10px solid #599ee9;
    border-top: 4px solid #599ee9;
    border-bottom: 4px solid #599ee9;
    padding: 5px 0px;
    margin-top: 40px;
}

.shop_bt a{
    color: #191919;
}
.shop_bt a:hover{
    color: #599ee9;
}

#my_slider a.carousel-control-prev {
    position: absolute;
    left: 15px;
    top: 115%;
    background-color: #599ee9;
}
#my_slider .carousel-control-prev, #my_slider .carousel-control-next {
    width: 65px;
    height: 65px;
    background: #ffffff;
    opacity: 1;
    font-size: 30px;
    color: #000;
    border-radius: 100px;
    z-index: 10;
    position: relative;
}

#my_slider .carousel-control-prev:hover, #my_slider .carousel-control-next:hover, #my_slider .carousel-control-prev:focus, #my_slider .carousel-control-next:focus {
    background: #599ee9;
    color: #fff;
}
#my_slider a.carousel-control-next {
    position: absolute;
    right:100px;
    top: 10px;
}

.about_section{
    width: 100%;
    float: left;
    background-color: #f2f7fd;
    height: auto;
    padding-bottom: 90px;
}

.image_2 {
    width: 100%;
    float: left;
    padding-top: 30;
}

.about_text{
    width: 100%;
    float: left;
    font-size: 50px;
    color: #2d343e;
    font-weight: 600;
    text-transform: uppercase;
    text-align: right;
}

.homeabout_text{
    width: 100%;
    float: left;
    font-size: 50px;
    color: #2d343e;
    font-weight: 600;
    text-transform: uppercase;
    text-align: center;
}

.lorem_text{
    width: 100%;
    float: left;
    font-size: 16px;
    color: #2d343e;
    margin-left: 0px;
    text-align: right;
}

.homelorem_text{
    width: 100%;
    float: left;
    font-size: 18px;
    color: #2d343e;
    margin-left: 0px;
    text-align: center;

}

.shop_bt_2 {
    width: 35%;
    float: right;
    font-size: 18px;
    text-align: center;
    background-color: #fcfcfd;
    color: #191919;
    border-left: 10px solid #599ee9;
    border-radius: 30px;
    border-right: 10px solid #599ee9;
    border-top: 4px solid #599ee9;
    border-bottom: 4px solid #599ee9;
    padding: 5px 0px;
    margin-top: 40px;
}

.shop_bt_2 a{
    color: #191919;
}
.shop_bt_2 a:hover{
    color: #599ee9;
}
.product_section {
    width: 100%;
    float: left;
}

.product_section_2 {
    width: 82%;
    margin: 0 auto;
    display: block;
}

.product_text {
    width: 100%;
    float: left;
    font-size: 50px;
    color: #256980;
    font-weight: 600;
    text-transform: uppercase;
    text-align: center;
}

.long_text{
    width: 100%;
    float: left;
    font-size: 16px;
    color: #363636;
    margin-left: 0px;
    text-align: center;
}
.price_text {
    width: 100%;
    float: left;
    font-size: 30px;
    
    color: #3a3a38;
    font-weight: 600;
    text-transform: uppercase;
    text-align: center;
    padding-top: 40px;
}

.game_text {
    width: 100%;
    float: left;
    font-size: 30px;
    color: #2d343e;
    text-align: center;
}

.see_main{
    width: 17%;
    margin: 0 auto;
    text-align: center;
}

.see_bt {
    width: 100%;
    float: right;
    font-size: 18px;
    text-align: center;
    background-color: #fcfcfd;
    color: #191919;
    border-left: 10px solid #599ee9;
    border-radius: 30px;
    border-right: 10px solid #599ee9;
    border-top: 4px solid #599ee9;
    border-bottom: 4px solid #599ee9;
    padding: 5px 0px;
    margin-top: 40px;
}

.see2_bt {
    width: 100%;
    float: right;
    font-size: 18px;
    text-align: center;
    background-color: #fcfcfd;
    color: #191919;
    border-left: 10px solid #599ee9;
    border-radius: 15px;
    border-right: 10px solid #599ee9;
    border-top: 4px solid #599ee9;
    border-bottom: 4px solid #599ee9;
    padding: 30px 30px;
    margin-top: 40px;
}

.see3_bt {
    width: 100%;
    float: right;
    font-size: 18px;
    text-align: right;
    background-color: #fcfcfd;
    color: #191919;
    border-left: 10px solid #599ee9;
    border-radius: 15px;
    border-right: 10px solid #599ee9;
    border-top: 4px solid #599ee9;
    border-bottom: 4px solid #599ee9;
    padding: 30px 30px;
    margin-top: 40px;
}

.see_bt a{
    color: #191919;
}
.see_bt a:hover{
    color: #599ee9;
}

.video_section{
    width: 100%;
    float: left;
    background-image: url(../images/video-bg2.
        
        
        
        
        
        
        
        
        );
    height: auto;
    margin-top: 90px;
}

.video_section2{
    width: 100%;
    float: left;
    background-image: url(../images/video-bg4.png);
    height: auto;
    margin-top: 5px;
}

.video_section3{
    width: auto;
    float: left;
    /*
    background-image: url(../images/video-bg3.png);
    */
    background-color: rgb(42, 42, 73);
    height: 20%;
    margin-top: 5px;
    margin-bottom: 0px;
}

.video_sectionHome{
    width: 100%;
    float: left;
    background-image: url(../images/video-bg2.png);
    height: auto;
    margin-top: 90px;
}



.video_text_2{
    width: 100%;
    float: left;
    font-size: 50px;
    color: #599ee9;
    font-weight: 600;
    text-transform: uppercase;

}
.controller_text_2 {
    width: 100%;
    float: left;
    font-size: 58px;
    color: #fefeff;
    font-weight: 600;
    text-transform: uppercase;
    line-height: 50px;
}
.banner_text_2 {
    width: 100%;
    float: left;
    font-size: 16px;
    color: #fefeff;
    font-weight: 500;
    margin-left: 0px;
    padding-top: 50px;
}

.banner_text_21 {
    width: 100%;
    float: right;
    font-size: 16px;
    color: #fefeff;
    font-weight: 500;
    margin-left: 0px;
    padding-top: 50px;
}

.banner_text_22 {
    width: 100%;
    float: left;
    font-size: 16px;
    color: #000000;
    font-weight: 500;
    margin-left: 0px;
    padding-top: 50px;
}

.testimonial_section{
    width: 100%;
    float: left;
}
.testimonial_text{
    width: 100%;
    float: left;
    font-size: 46px;
    font-weight: bold;
    text-align: center;
    color: #191919;
    text-transform: uppercase;
}

.ipsum_text{
    width: 100%;
    float: left;
    font-size: 16px;
    color: #191919;
    text-align: center;
    margin-left: 0px;
}

.testimonial_section_2 {
    width: 100%;
    float: left;
    padding-top: 50px;
}
.box_main {
    width: 75%;
    margin: 0 auto;
    text-align: center;
    border: 2px solid #424242;
    padding: 40px;
    border-radius: 20px;
    display: flow-root;
}

.quote_icon{
    width: 100%;
    float: left;
    text-align: left;
}

.dolor_text {
    width: 100%;
    float: left;
    font-size: 16px;
    color: #191919;
    text-align: left;
    margin-left: 0;
}

.client_main{
    width: 45%;
    float: left;
    background-color: #599ee9;
    height: auto;
}

.client_left{
    width: 50%;
    float: left;
    text-align: left;
}

.client_right {
    width: 50%;
    float: left;
    text-align: left;
    padding-top: 25px;
    position: relative;
    left: -60px;
}

.images_5{
    width: 100%;
    float: left;
    padding-left: 15px;
}

.sandy_text{
    width: 100%;
    float: left;
    font-size: 20px;
    color: #fefeff;
}

.sandy_text_1{
    width: 100%;
    float: left;
    font-size: 18px;
    color: #191919;
    margin-left: 0px;
    margin-top: 0px;
}

.contact_section{
    width: 100%;
    float: left;
    background-color: #f2f7fd;
    height: auto;
    padding-bottom: 90px;
    margin-top: 90px;
}

.contact_section2{
    width: 100%;
    float: left;
    background-color: #2c333d;
    height: auto;
    padding-bottom: 90px;
    margin-top: 90px;
}

.image_6{
    width: 100%;
    float: left;
}

.email_box {
    width: 100%;
    float: left;
    /* background-color: #ffffff; */
    /* border-radius: 20px; */
    height: auto;
    /* padding: 50px 20px; */
    /* opacity: 0.80; */
}

.email-bt {
    color: #000000;
    width: 100%;
    height: 55px;
    font-size: 18px;
    padding: 20px 20px 0px 0px;
    background: transparent;
    border: 0px;
    border-bottom: 1px solid #888686;
}

.massage-bt {
    color: #000000;
    width: 100%;
    height: 80px;
    font-size: 18px;
    padding: 36px 20px 10px 0px;
    background: transparent;
    border: 0px;
    border-bottom: 1px solid #888686;
}

.send_btn {
    padding-left: 15px;
    width: 100%;
    margin: 0 auto;
    text-align: center;
}

.main_bt {
    background: #ed1c24;
    border: none;
    color: #faf9f9;
    width: 160px;
    height: 58px;
    font-size: 24px;
    padding-top: 3px;
    border-radius: 30px;
    margin-left: 15px;
    text-align: center;
    padding-top: 8px;
    margin-top: 60px;
}
.main_bt a {
    color: #faf9f9;
}

.main_bt a:hover{
    color: #000;
}

.ipsum_text_2 {
    width: 100%;
    float: left;
    font-size: 16px;
    color: #ffffff;
    margin-left: 0px;
    margin-top: 0px;
}

.section_headder {
    width: 100%;
    float: left;
    background-color: #1f72ac !important;
    อ่านต่อได้ที่ https://www.wongnai.com/articles/pastel-color-code?ref=ct;
    height: auto;
    padding-top: auto;
    padding-bottom: auto;
}

.section_footer {
    width: 100%;
    float: left;
    background-color: #02335c;!important;
    height: auto;
    padding-top: auto;
    padding-bottom: auto;
}


.account_text {
    width: 100%;
    float: left;
    font-size: 28px;
    color: rgb(235, 235, 235);
    font-weight: bold;
    padding: 25px 0px;
}

.email_text {
    width: 100%;
    float: left;
    font-size: 12pt;
    color: #eceaea;
    background-color: #ffffff;
    padding: 10px;
    border: 0px;
}

.subscribr_bt {
    width: auto; /* ให้ปุ่มปรับขนาดตามเนื้อหา */
    font-size: 16pt;
    color: #eceaea;
    background-color: #3c6973;
    padding: 6px 20px;
    border: 0px;
    text-align: center;
    margin-top: 20px;
    font-weight: 600;
    display: inline-block; /* กำหนดปุ่มเป็นบล็อกในตัว */
}

.subscribr_bt2 {
    display: inline-block; /* เพื่อให้ปุ่มทำงานร่วมกับ text-align */
    padding: 15px 25px; /* เพิ่มขนาดปุ่มตามต้องการ */
    border: none;
    background-color: #3c6973;
    color: white;
    font-weight: 600;
    border-radius: 20px; /* ทำให้ปุ่มโค้งมน */
    cursor: pointer;
    z-index: 10;
}

.subscribr_bt3 {
    display: inline-block; /* เพื่อให้ปุ่มทำงานร่วมกับ text-align */
    padding: 5px 20px; /* เพิ่มขนาดปุ่มตามต้องการ */
    border: none;
    background-color: #3c6973;
    color: white;
    font-weight: 600;
    border-radius: 8px; /* ทำให้ปุ่มโค้งมน */
    cursor: pointer;
}

.useful_link{
    width: 100%;
    float: left;
}
.useful_link ul{
    margin: 0px;
    padding: 0px;
}

.useful_link li{
    color: #ffffff;
    font-size: 16px;
}

.useful_link li a{
    color: #0562a8;
}

.useful_link li a:hover{
    color: #599ee9;
}

.footer_section_2 {
    width: 100%;
    float: left;
    border-bottom: 1px solid #0489ba;
    padding-bottom: 0px;
}

.social_icon {
    width: 19%;
    margin: 0 auto;
    text-align: center;
}

.social_icon ul{
    margin: 0px;
    padding: 0px;
}

.social_icon li {
    float: left;
    padding-right: 20px;
    padding-top: 40px;
}

.copyright_section {
    width: 100%;
    float: left;
    background-color: #01101c; !important;
    height: auto;
}

.copyright_text{
    width: 100%;
    float: left;
    font-size: 16px;
    color: #ffffff;
    text-align: center;
    margin-left: 0px;
}

.copyright_text a{
    color: #ffffff;
}

.copyright_text a:hover{
    color: #000;
}


.margin_top_0{
    margin-top: 90px;
}

.padding_top_0{
    margin-top: 0px;
}

.padding_video_0{
    margin-top: 0px; 
}

.custom-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(375px, 1fr)); /* ปรับจำนวนคอลัมน์อัตโนมัติตามพื้นที่ */
    gap: 20px; /* ระยะห่างระหว่างกล่อง */
    max-width: 1000px; /* กำหนดความกว้างสูงสุดของกริด */
    padding: 20px;
    margin: 0 auto; /* จัดให้อยู่ตรงกลางคอนเทนเนอร์ */
  }

 /* เริ่มต้นการตั้งค่าพื้นฐาน */
.custom-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* กำหนดคอลัมน์อัตโนมัติสำหรับหน้าจอที่แตกต่างกัน */
    gap: 20px; /* เว้นระยะห่างระหว่างการ์ด */
    padding: 20px;
  }

 /* เริ่มต้นการตั้งค่าพื้นฐาน2 */
  .custom-grid2 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(375px, 1fr)); /* ปรับจำนวนคอลัมน์อัตโนมัติตามพื้นที่ */
    gap: 20px; /* ระยะห่างระหว่างกล่อง */
    max-width: 1000px; /* กำหนดความกว้างสูงสุดของกริด */
    padding: 20px;
    margin: 0 auto; /* จัดให้อยู่ตรงกลางคอนเทนเนอร์ */
  }

 /* เริ่มต้นการตั้งค่าพื้นฐาน */
.custom-grid2 {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); /* กำหนดคอลัมน์อัตโนมัติสำหรับหน้าจอที่แตกต่างกัน */
    gap: 20px; /* เว้นระยะห่างระหว่างการ์ด */
    padding: 20px;
  }
  
  /* การ์ด */
  .card {
    background-color: #fff; /* พื้นหลังสีขาว */
    border-radius: 10px; /* มุมโค้งมน */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* เงา */
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  
  /* ไอคอน */
  .card .icon img {
    width: 60px; /* ขนาดรูปภาพ */
    height: auto; /* รักษาสัดส่วนของรูป */
    display: block; /* ให้ภาพจัดเต็มพื้นที่ของบล็อก */
    margin-bottom: 15px; /* ระยะห่างระหว่างรูปภาพและข้อความ */
  }
  
  /* ข้อความ */
  .card p {
    font-size: 14px;
    color: #333;
    line-height: 1.5; /* ระยะห่างระหว่างบรรทัด */
    text-align: center; /* จัดข้อความให้อยู่กลาง */
    margin: 0;
  }
  
  /* สำหรับขนาดหน้าจอมือถือ */
  @media (max-width: 768px) {
    .card p {
      font-size: 13px; /* ขนาดตัวอักษรเล็กลงเล็กน้อยสำหรับมือถือ */
    }
  }
  
  /*  dropdow   */
  /* ปิด dropdown menu เป็นค่าเริ่มต้น */
.nav-item .dropdown-menu {
    display: none; /* ซ่อนเมนู */
    position: absolute; /* วางเมนูอยู่ด้านล่างของ parent */
    background-color: #a3a0a0; /* พื้นหลังสีขาว */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* เงา */
    border-radius: 4px; /* มุมโค้ง */
    margin-top: 0px; /* ระยะห่างด้านบน */
    padding: 0;
    list-style: none;
    z-index: 1000;
}
  
  /* แสดง dropdown เมื่อ hover */
  .nav-item.dropdown:hover .dropdown-menu {
    display: block;
  }
  
  /* สไตล์ลิงก์ใน dropdown */
  .dropdown-menu .dropdown-item {
    padding: 10px 20px;
    text-decoration: none;
    color: #333; /* สีตัวหนังสือ */
    display: block;
  }
  
  .dropdown-menu .dropdown-item:hover {
    background-color: #f1f1f1; /* เปลี่ยนสีเมื่อ hover */
    color: #005691; /* สีตัวหนังสือเมื่อ hover */
  }
  
  /* จัดสไตล์ nav-link ให้ดูเหมาะสม */
  .nav-link {
    text-decoration: none;
    color: #ffffff; /* สีตัวหนังสือ */
    padding: 10px 15px;
    display: block;
  }
  
  .nav-link:hover {
    color: #fcfcfd; /* สีเมื่อ hover */
  }

  /* จัดการตาราง */
.table-container {
    width: 100%;
    overflow-x: auto; /* รองรับการแสดงผลบนหน้าจอเล็ก */
  }
  
  .custom-table {
    width: 100%;
    border-collapse: collapse;
    font-family: Arial, sans-serif;
    margin: 20px 0;
  }
  
  .custom-table td {
    padding: 20px 25px;
    border-bottom: 1px solid #ccc;
    vertical-align: middle;
    text-align: center;
  }
  
  .custom-table .info-cell {
    text-align: left; /* ข้อมูลชื่อรายการอยู่ด้านซ้าย */
  }
  
  .item-title {
    font-size: 14px;
    font-weight: bold;
  }
  
  .item-description {
    font-size: 12px;
    color: #777;
  }
  
  /* ปุ่ม */
.recommend-btn {
    background-color: #0899c9; /* สีฟ้า */
    color: white;
    border: none;
    padding: 5px 10px;
    font-size: 12px;
    border-radius: 4px;
    margin-right: 5px;
    cursor: pointer;
}

.download-btn {
    background-color: #0899c9; /* สีฟ้า */
    color: white;
    border: none;
    padding: 5px 10px;
    font-size: 12px;
    border-radius: 4px;
    cursor: pointer;
}
  
  /* ปรับปุ่มให้อยู่แนวเดียวกัน */
  .recommend-btn:hover,
  .download-btn:hover {
    opacity: 0.8; /* เพิ่มความโปร่งใสเมื่อ hover */
  }
  
  @media only screen and (max-width: 768px) {
    .navbar {
        padding: 10px;
    }
    .video_text {
        font-size: 30px;
    }
}

.container2 {
  max-width: 1160px; /* ขนาด 12 ส่วนในกริด */
  margin: 0 auto;
  padding: 20px;
  /*
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  */
  margin-top: auto;
  margin-bottom: 0px;
}

.container3ab {
    max-width: 1160; /* ขนาด 12 ส่วนในกริด */
    margin: 0 auto;
    padding: 20px;
    /*
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    */
    margin-top: 50px;
    margin-bottom: 0px;
  }

  /* --------------------------------------- */
  /* Container */
.container5 {
    width: 80%;
    margin: 0 auto;
    text-align: center;
  }
  
  /* Heading */
  .heading5 {
    font-size: 24px;
    margin-bottom: 20px;
    color: #333;
  }
  
  /* Cards container */
  .cards5 {
    display: flex;
    justify-content: space-between;
    gap: 5px;
    flex-wrap: wrap;
  }
  
  /* Individual card */
.card5 {
    background-color: #999696;
    border-radius: 10px;
    border: 1px solid #ddd;
    padding: 20px;
    width: 19%; /* Adjust width to fit 5 items in a row */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s;
}
  
  .card:hover5 {
    transform: translateY(-5px); /* Add hover effect */
  }
  
  /* Card icon */
  .card-icon5 {
    width: 50px;
    height: 50px;
    margin-bottom: 10px;
  }
  
  /* Card text */
  .card-text5 {
    font-size: 16px;
    color: #555;
    line-height: 1.5;
  }

  /* Style for the new buttons */
.custom-btn {
    background-color: #5ca0e9;  /* Button color */
    color: white;
    border: none;
    padding: 10px 20px;
    font-size: 16px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.custom-btn:hover {
    background-color: #3e8aeb; /* Hover effect */
    transform: scale(1.05); /* Slightly enlarge the button on hover */
}

.start-btn {
    margin-right: 20px;
}

.pause-btn {
    margin-left: 20px;
}

/* Responsive design for buttons */
@media screen and (max-width: 768px) {
    .button-container {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .custom-btn {
        margin: 10px 0;
    }
}

/* คลาสสำหรับการจัดการตำแหน่งใน navbar */
.header_section nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
}


/* การจัดตำแหน่งเมนูให้อยู่ตรงกลาง */
.custom-navbar-nav {
    display: flex;
    justify-content: center;
    flex: 2;
    margin-left: 20px; /* เว้นช่องเล็กน้อยจากโลโก้ */
}

/* การเว้นระยะระหว่างไอเทมในเมนู */
.custom-navbar-nav .nav-item {
    margin: 0 20px;
}

/* ความยืดหยุ่นของเมนูเมื่อหน้าจอเล็กลง */
@media screen and (max-width: 768px) {
    .custom-navbar-nav {
        justify-content: space-between;
        width: 100%;
    }
}

/*  ---- */
/* ตั้งค่าพื้นฐานของ footer */
.footer {
    display: grid; /* ใช้ Grid Layout */
    grid-template-columns: repeat(6, 1fr); /* แบ่งออกเป็น 4 ส่วนเท่าๆ กัน */
    gap: 20px; /* ระยะห่างระหว่างแต่ละส่วน */
    padding: 20px;
    background-color: #022530; /* พื้นหลังfooter 1 */
    color: #fff; /* ตัวอักษรสีขาว */
}

/* รูปแบบแต่ละส่วน */
.footer-section {
    text-align: center; /* จัดข้อความให้อยู่กลาง */
}

/* รูปแบบหัวข้อในแต่ละส่วน */
.footer-section h4 {
    margin-bottom: 10px;
    font-size: 16px;
    font-weight: bold;
}

/* รูปแบบข้อความในแต่ละส่วน */
.footer-section p, .footer-section ul {
    font-size: 14px;
    line-height: 1.5;
}

/* รูปแบบลิงค์ในส่วนติดตามเรา */
.footer-section ul {
    list-style: none; /* ลบจุดหน้าลิงค์ */
    padding: 0;
}

.footer-section ul li a {
    text-decoration: none;
    color: #fff;
    display: block;
    margin-bottom: 5px;
}

.footer-section ul li a:hover {
    color: #ffcc00; /* เปลี่ยนสีเมื่อเลื่อนเมาส์ */
}

/* สำหรับขนาดหน้าจอมือถือ */
@media (max-width: 768px) {
    .footer {
        grid-template-columns: 1fr 1fr; /* แบ่งเป็น 2 คอลัมน์สำหรับหน้าจอเล็ก */
    }
}

@media (max-width: 480px) {
    .footer {
        grid-template-columns: 1fr; /* แบ่งเป็น 1 คอลัมน์สำหรับหน้าจอเล็กมาก */
    }
}

/* ของหน้า conteact */
.contact-info {
    display: grid; /* ใช้ Grid Layout */
    grid-template-rows: auto auto; /* มี 2 แถว: Address แถวบน, Telephone และ Email แถวล่าง */
    grid-template-columns: 1fr 1fr; /* แบ่งแถวล่างออกเป็น 2 คอลัมน์ */
    gap: 20px; /* ระยะห่างระหว่างบล็อก */
    justify-content: center; /* จัดให้อยู่ตรงกลาง */
    align-items: start; /* จัดบล็อกให้อยู่ด้านบน */
    margin: 20px auto; /* เว้นระยะด้านบนและล่าง */
    max-width: 1200px; /* กำหนดความกว้างสูงสุด */
}

.info-item {
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background-color: #f9f9f9;
    text-align: center;
}

/* Address ครอบคลุมทั้งแถว */
.address-item {
    grid-column: span 2; /* Address ครอบคลุม 2 คอลัมน์ */
}

/* ปรับฟอนต์ */
.info-item h3 {
    font-size: 18px;
    margin-bottom: 10px;
}

.info-item p {
    font-size: 16px;
    color: #333;
    margin: 0;
}

/* Responsive Design */
@media (max-width: 768px) {
    .contact-info {
        grid-template-columns: 1fr; /* บล็อกเรียงแนวตั้งเมื่อหน้าจอแคบ */
    }
    .address-item {
        grid-column: span 1; /* Address มีขนาดปกติ */
    }
}

/* สำหรับ map */
.map-container {
    position: relative;
    width: 100%; /* ใช้ความกว้างเต็มหน้าจอ */
    padding-bottom: 56.25%; /* อัตราส่วน 16:9 */
    height: 0; /* กำหนดเริ่มต้นเป็น 0 เพื่อให้ขนาดปรับตาม padding */
    overflow: hidden; /* ตัดส่วนเกินของ iframe */
    margin: 20px auto; /* เว้นระยะด้านบน-ล่าง และจัดกึ่งกลาง */
    max-width: 755px; /* กำหนดความกว้างสูงสุด */
    border-radius: 8px; /* มุมโค้งมน */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* เพิ่มเงา */
}

.map-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0; /* ซ่อนขอบ */
}


.custom-table th,
.custom-table td {
    border: 1px solid #ccc;
    padding: 10px;
    text-align: center;
    vertical-align: middle;
}

    .custom-table th:nth-child(1),
    .custom-table td:nth-child(1) {
        width: 40%;
    }

    .custom-table th:nth-child(2),
    .custom-table td:nth-child(2) {
        width: 20%;
    }

    .custom-table th:nth-child(3),
    .custom-table td:nth-child(3) {
        width: 10%;
    }

    .custom-table th:nth-child(4),
    .custom-table td:nth-child(4) {
        width: 30%;
    }
/* Page: Download New */
.custom-table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
    font-size: 16px;
    text-align: left;
    table-layout: fixed;
}
}

.custom-table th, .custom-table td {
    border: 1px solid #ddd;
    padding: 12px;
    text-align: center;
}

.custom-table th {
    background-color: #f4f4f4;
    font-weight: bold;
}

.custom-table td .btn {
    margin: 5px;
    padding: 8px 12px;
    text-decoration: none;
    display: inline-block;
    border-radius: 4px;
    font-size: 14px;
}

.btn-primary {
    background-color: #007bff;
    color: white;
}

.btn-success {
    background-color: #35aaf2;
    color: white;
}

/* Responsive Design */
@media (max-width: 768px) {
    .custom-table td, .custom-table th {
        font-size: 14px;
    }

    .custom-table td .btn {
        font-size: 12px;
        padding: 6px 8px;
    }

    .about_section h2, .about_section h3 {
        font-size: 18px;
    }
}

/* สำหรับหน้า Products */
.image-section {
    text-align: center;
}

.product-main-image {
    width: 100%;
    max-width: 400px;
    border-radius: 8px;
}

.thumbnail-images {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
}

.thumbnail {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border: 2px solid transparent;
    border-radius: 5px;
    cursor: pointer;
    transition: border 0.3s;
}

.thumbnail:hover {
    border: 2px solid #007bff;
}

.product-details {
    padding: 20px;
}

.btn-primary {
    background-color: #007bff;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    transition: background 0.3s;
}

.btn-primary:hover {
    background-color: #0056b3;
}

.product-main-image {
    width: 100%;
    max-width: 500px;
    transition: transform 0.3s ease-in-out;
    cursor: zoom-in;
}

.product-main-image:hover {
    transform: scale(1.5); /* ขยาย 1.5 เท่า */
}

/* Icon Line*/
.icon-line{
    height: 20px;
}

/* Text Table*/
.texttabledownload{
    font-size: 12px;
    text-align: left;
}

/*text model*/
.nametextmodel{
    width: 50px;
}