/*--------------------------------------------------------------------- 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 ---------------------------------------------------------------------*/



:root {

--color-white: #fefefd;

--color-black: #001431;

--color-gray: #686868;

--color-blue: #08294a;

--color-red: #e70818;

}





* {

    box-sizing: border-box !important;

    /*transition: ease all 0.3s;*/

}



html {

    scroll-behavior: smooth;

}



body {

    color: #666666;

    font-size: 14px;

    /*font-family: 'Sen', sans-serif;*/

    font-family: 'Prompt', sans-serif!important;

    line-height: 1.80857;

    font-weight: normal;

    overflow-x: hidden;



    background:

      url(../images/bg/bg-highlight-election2569-desktop.webp)

      top center / contain 

      no-repeat;



    background-color: #090028!important;

}



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

}



*,

*::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: #ffffff !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: 60px;

    padding-bottom: 60px;

}



.padding_0 {

    padding: 0px;

}





/* header section start */

.header_section {

    width: 100%;

    height: auto;

    position: relative;

    float: left;

}



.header_bg {

    background: #fb6818;

    border-bottom: 1px solid #ffffff;

}



.bg-light {

    background-color: transparent !important;

}



.mr-auto,

.mx-auto {

    text-align: center;

}



.ml-auto,

.mx-auto {

    margin: 0 auto;

}



.navbar {margin-top: 2em;}



.navbar-brand {padding: 0!important;}



a.navbar-brand {

    width: 42%;

    margin-left: -3em;

    margin-top: 1em;

}



.navbar-nav {display: flex; justify-content: flex-end; width: 100%; margin-bottom: 1.5em!important}



.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,

.navbar-light .navbar-nav .active>.nav-link:hover,

.navbar-light .navbar-nav .nav-link.active:hover,

.navbar-light .navbar-nav .nav-link.show:hover,

.navbar-light .navbar-nav .show>.nav-link:hover,

.navbar-light .navbar-nav .nav-link:focus,

.navbar-light .navbar-nav .nav-link:hover {

    color: rgba(255, 255, 255, 1);

}



/* base เดิม */

.navbar-expand-lg .navbar-nav .nav-link {

    position: relative;              /* สำคัญ */

    padding: 2px 12px;

    font-size: 14px;

    color: var(--color-white);

    margin: 0px 6px;

    border: 1px solid transparent;

    text-transform: uppercase;

    z-index: 1;

}



/* เตรียม layer สำหรับกรอบเอียง */

.navbar-expand-lg .navbar-nav .nav-link::before {

    content: "";

    position: absolute;

    inset: -3px;                     /* ขยายกรอบเล็กน้อย */

    border: 1px solid #fff;

    transform: skewX(-12deg);

    opacity: 0;

    pointer-events: none;

    z-index: -1;

    transition: opacity 0.2s ease;

    color: var(--color-white);

}



/* ACTIVE */

.navbar-light .navbar-nav .active > .nav-link::before,

.navbar-light .navbar-nav .nav-link.active::before,

.navbar-light .navbar-nav .nav-link.show::before,

.navbar-light .navbar-nav .show > .nav-link::before {

    opacity: 1;

}



/* HOVER */

.navbar-light .navbar-nav .nav-link:hover::before,

.navbar-light .navbar-nav .nav-link:focus::before {

    opacity: 1;

}





.navLink {

    width: 100%;

    height: auto;

    background-image: url(../images/bg/bg-navbar-desktop.webp);

    background-position: top center;

    background-size: 100% 15px;

    background-repeat: no-repeat;



    display: flex;

    justify-content: center;

    gap: 80px;

}







.navbar .nav-item.active .nav-link::before {

  content: "";

  position: absolute;

  inset: -3px;

  border: 1px solid #fff;

  transform: skewX(-12deg);

  transform-origin: center;

  pointer-events: none;

  z-index: -1;

}



.navbar-brand {

    margin: 0px;

    float: right;

    width: 14%;

}



.navbar {

    padding: 0;

}



.user_icon {

    padding-right: 15px;

}



.login_bt {

    width: 210px;

}



.login_bt ul {

    margin: 0px;

    padding: 0px;

}



.login_bt li a {

    float: left;

    font-size: 18px;

    color: var(--color-black);

    text-transform: uppercase;

    padding: 0px 0px 0px 50px;

}



.login_bt li a:hover {

    color: #ffffff;

}





/* header section end */





/* banner section start */



.banner_section {

    width: 100%;

    float: left;

    padding: 0 0 45px;

    margin-top: 2em;

    margin-bottom: 4em;

}



.banner_taital_main {

    width: 100%;

    float: left;

    padding-left: 0;

}



.banner_taital {

    width: 90%;

    font-size: 60px;

    color: var(--color-white);

    text-transform: uppercase;

    font-weight: bold;

}



.banner_text {

    width: 100%;

    font-size: 16px;

    color: var(--color-white);

    float: left;

    padding-top: 10px;

    margin: 0px;

}



.started_bt {

    width: 170px;

    float: left;

    margin-left: 15px;

    margin-top: 30px;

}



.started_bt a {

    width: 100%;

    float: left;

    padding: 8px 10px;

    color: #ffffff;

    background-color: var(--color-red);

    text-align: center;

    font-size: 18px;

    text-transform: uppercase;

    border-radius: 5px;

}



.started_bt a:hover {

    color: var(--color-black);

    background-color: #ffffff;

}



.readmore_btn {

    width: 170px;

    float: left;

    margin-top: 30px;

}



.readmore_btn a {

    width: 100%;

    float: left;

    padding: 8px 10px;

    color: #ffffff;

    background-color: var(--color-red);

    text-align: center;

    font-size: 18px;

    text-transform: uppercase;

    border-radius: 5px;

}



.readmore_btn a:hover {

    color: var(--color-black);

    background-color: #ffffff;

}



.readmore_btn.active a {

    color: var(--color-black);

    background-color: #ffffff;

}



.banner_img {

    width: 58%;

    margin: 0 auto;

    text-align: center;

}



#banner_slider a.carousel-control-prev {

    left: initial;

    top: 180px;

    right: -14px;

    color: #ffffff;

    background-color: var(--color-black);

}



#banner_slider a.carousel-control-next {

    right: -14px;

    top: 120px;

}



#banner_slider .carousel-control-next,

#banner_slider .carousel-control-prev {

    width: 55px;

    height: 55px;

    background: var(--color-red);

    opacity: 1;

    font-size: 16px;

    color: #ffffff;

}



#banner_slider .carousel-control-next:focus,

#banner_slider .carousel-control-next:hover,

#banner_slider .carousel-control-prev:focus,

#banner_slider .carousel-control-prev:hover {

    color: #ffffff;

    background-color: var(--color-black);

}





/* banner section end */





/* box section start */



.box_section {

    width: 100%;

    float: left;

    position: relative;

    top: 20px;

}



.online_box {

    width: 100%;

    display: flex;

}



.online_box_left {

    width: 100%;

    float: left;

    background-color: #e9e8e8;

    height: auto;

    /*padding: 25px;*/

    box-shadow: 5px 5px 10px -3px rgba(0,0,0,0.25);

    -webkit-box-shadow: 5px 5px 10px -3px rgba(0,0,0,0.25);

    -moz-box-shadow: 5px 5px 10px -3px rgba(0,0,0,0.25);

    border-radius: 8px;

    margin: 0 10px 10px;

    transition: ease all 0.3s;

}

.online_box_left img {border-radius: 8px;}



.online_box_left:first-child {margin-left: 0;}

.online_box_left:last-child {margin-right: 0;}



.online_box_main {

    width: 100%;

    display: flex;

}



.box_left {

    width: auto;

}



.box_right {

    width: 70%;

    padding-left: 20px;

}



.right_arrow {

    width: 50px;

    font-size: 20px;

    color: #ffffff;

    background-color: var(--color-black);

    border-radius: 100%;

    text-align: center;

    padding: 7px;

    height: 50px;

    justify-content: center;

    align-items: center;

}



.book_text {

    width: 100%;

    font-size: 16px;

    color: var(--color-red);

    margin: 0px;

    font-weight: bold;

}



.appoinment_text {

    width: 100%;

    font-size: 20px;

    color: var(--color-black);

    font-weight: bold;

    padding-bottom: 0px;

}



.online_box_left:hover {

    background-color: var(--color-red);

}



.online_box_left:hover .book_text {

    color: #ffffff;

}



.online_box_left:hover .appoinment_text {

    color: #ffffff;

}



.online_box_left.active {

    background-color: var(--color-red);

}



.online_box_left.active .book_text {

    color: #ffffff;

}



.online_box_left.active .appoinment_text {

    color: #ffffff;

}





/* box section end */





/* election101 section start */



.election101_section {

    width: 100%;

    float: left;

    background: rgb(221,220,217);

    background: -moz-linear-gradient(0deg, rgba(221,220,217,1) 0%, rgba(247,247,246,1) 50%, rgba(237,238,235,1) 100%);

    background: -webkit-linear-gradient(0deg, rgba(221,220,217,1) 0%, rgba(247,247,246,1) 50%, rgba(237,238,235,1) 100%);

    background: linear-gradient(0deg, rgba(221,220,217,1) 0%, rgba(247,247,246,1) 50%, rgba(237,238,235,1) 100%);

    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#dddcd9",endColorstr="#edeeeb",GradientType=1);

}



.election101_section .carousel-item {display: grid!important; grid-template-columns: repeat(4, 1fr); grid-gap: 20px;}





.corporate_text {

    width: 100%;

    float: left;

    color: var(--color-black);

    font-size: 24px;

    text-transform: uppercase;

    font-weight: bold;

    padding: 20px 0px;

}



p.chunks_text {

    width: 80%;

    float: left;

    font-size: 16px;

    margin: 0px;

    color: var(--color-black);

}



.readmore_button {

    width: 160px;

    float: left;

    margin-top: 30px;

}



.readmore_button a {

    width: 160px;

    float: left;

    font-size: 16px;

    color: #ffffff;

    background-color: var(--color-black);

    text-align: center;

    padding: 10px;

    border-radius: 5px;

}



.service_box .house_icon .image_2 {

    display: none;

}



.service_box:hover .house_icon .image_2 {

    display: block;

}



.service_box:hover .house_icon .image_1 {

    display: none;

}



.service_box:hover .corporate_text {

    color: var(--color-red);

}



.service_box:hover .readmore_button a {

    background-color: var(--color-red);

    color: #ffffff;

}



.service_box.active .corporate_text {

    color: var(--color-red);

}



.service_box.active .readmore_button a {

    background-color: var(--color-red);

    color: #ffffff;

}



#main_slider a.carousel-control-prev {

    left: -40px;

    top: 50%;

}



#main_slider a.carousel-control-next {

    right: -40px;

    top: 50%;

}



#main_slider .carousel-control-next,

#main_slider .carousel-control-prev {

    width: 35px;

    height: 35px;

    background: #c6c6c6;

    opacity: 1;

    font-size: 16px;

    color: #ffffff;

    border-radius: 100px;

}



#main_slider .carousel-control-next:focus,

#main_slider .carousel-control-next:hover,

#main_slider .carousel-control-prev:focus,

#main_slider .carousel-control-prev:hover {

    color: #ffffff;

    background-color: var(--color-red)

}





/* election101 section end */



/* short video section start */



.shortvideo_section {

    width: 100%;

    float: left;

    background-image: url(../images/bg/bg-shortvideo-election2566-desktop.jpg);

    background-position: top center;

    background-size: 100% 100%;

    background-repeat: no-repeat;

}



#shortvideo_slider a.carousel-control-prev {

    left: -40px;

    top: 50%;

}



#shortvideo_slider a.carousel-control-next {

    right: -40px;

    top: 50%;

}



#shortvideo_slider .carousel-control-next,

#shortvideo_slider .carousel-control-prev {

    width: 35px;

    height: 35px;

    background: #c6c6c6;

    opacity: 1;

    font-size: 16px;

    color: #ffffff;

    border-radius: 100px;

}



#shortvideo_slider .carousel-control-next:focus,

#shortvideo_slider .carousel-control-next:hover,

#shortvideo_slider .carousel-control-prev:focus,

#shortvideo_slider .carousel-control-prev:hover {

    color: #ffffff;

    background-color: var(--color-red)

}



.shortvideo-grid .iframe-container {min-height: 570px; max-height: 570px; margin: 0;}

.shortvideo-grid iframe {border: 0;}



/* short video section end */







/* the next leader section start */



.leader_section {

    width: 100%;

    float: left;

    margin: 20px 0 0;

    background-image: url(../images/bg/bg-nextleader-election2566-desktop.jpg);

    background-position: top center;

    background-size: 100% 100%;

    background-repeat: no-repeat;

}



.leader_taital {

    width: 100%;

    float: left;

    font-size: 40px;

    color: var(--color-black);

    text-align: center;

    font-weight: bold;

    text-transform: uppercase;

    padding-bottom: 0px;

}



.leader_section_2 {

    width: 100%;

    float: left;

}



.leader_box {

    width: 100%;

    height: 100%;

    background-image: url(../images/bg/bg-text-nextleader-election2566.png);

    background-position: bottom center;

    background-size: cover;

    background-repeat: no-repeat;

    position: absolute;

    top: 0;

    overflow: hidden;

}

.leader_box h5 {font-size: 16px; letter-spacing: 1px; font-weight: 500; line-height: 1; margin-top: unset; margin-bottom: unset; position: absolute; bottom: 10px; left: 10px; width: fit-content;}

.leader_box h5 span {font-size: 12px; font-weight: 300;}



.leader-grid {display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 20px;}





/* Zoom In #1 */



.hover01 figure img {

    -webkit-transform: scale(1);

    transform: scale(1);

    -webkit-transition: .3s ease-in-out;

    transition: .3s ease-in-out;

}



.hover01 figure:hover img {

    -webkit-transform: scale(1.1);

    transform: scale(1.1);

}



.hover101 figure img {

    -webkit-transform: scale(1);

    transform: scale(1);

    -webkit-transition: .3s ease-in-out;

    transition: .3s ease-in-out;

}



.hover101 figure:hover img {

    -webkit-transform: scale(1.1);

    transform: scale(1.1);

}



.column {

    /*margin: 15px 0px 0;*/

    padding: 0;

    box-shadow: 0px 8px 8px 0px rgba(0, 0, 0, .15);

    position: relative;

}



.column:last-child {

    /*padding-bottom: 30px;*/

}



.column::after {

    content: '';

    clear: both;

    display: block;

}



figure {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

    overflow: hidden;

}



figure:hover+span {

    bottom: -36px;

    opacity: 1;

}



.introduction_text {

    width: 100%;

    float: left;

    text-align: left;

    color: #FFF;

    font-size: 20px;

    padding: 0px;

    text-transform: uppercase;

    font-weight: bold;

}





.read_bt {

    width: 170px;

    margin: 0 auto;

    text-align: center;

}



.read_bt a {

    width: 100%;

    float: left;

    font-size: 16px;

    color: #ffffff;

    padding: 10px;

    text-align: center;

    background-color: var(--color-black);

    margin-top: 30px;

    border-radius: 5px;

    text-transform: uppercase;

}



.read_bt a:hover {

    color: #ffffff;

    background-color: #e53232;

}



.read_bt.active a {

    color: #ffffff;

    background-color: #e53232;

}





/* the next leader section end */





/* about section start */



.about_section {

    width: 100%;

    float: left;

    background-color: var(--color-black);

    height: auto;

    padding: 90px 0px 40px 0px;

}



.about_text_main {

    width: 100%;

    float: left;

    padding: 100px 0px;

}



.about_taital {

    width: 100%;

    float: left;

    font-size: 40px;

    color: #ffffff;

    font-weight: bold;

}



.about_text {

    width: 100%;

    float: left;

    font-size: 16px;

    color: var(--color-white);

    margin: 30px 0px 0px 0px;

}



.about_img {

    width: auto;

    margin-top: 30px;

}



.readmore_bt {

    width: 170px;

    float: left;

    margin-top: 50px;

}



.readmore_bt a {

    width: 100%;

    float: left;

    font-size: 16px;

    color: #ffffff;

    background-color: var(--color-red);

    text-align: center;

    padding: 10px;

    border-radius: 5px;

    text-transform: uppercase;

}



.readmore_bt a:hover {

    color: #ffffff;

    background-color: var(--color-black);

}





/* about section end */





/* newsletter section start */



.newsletter_section {

    width: 100%;

    float: left;

}



.newsletter_taital_main {

    width: 100%;

    display: flex;

}



.newsletter_taital {

    width: 100%;

    float: left;

    font-size: 40px;

    color: #212120;

    font-weight: bold;

    text-transform: uppercase;

}



hr.newsletter_border_main {

    width: 70%;

    border: 1px solid #212120;

    margin-top: 25px;

}



.email_bt {

    color: #d9d9d8;

    width: 100%;

    height: 60px;

    font-size: 18px;

    background-color: #ffffff;

    padding: 15px 20px 10px 20px;

    border: 0px;

    margin-top: 40px;

    box-shadow: 0px 0px 11px 2px;

}



textarea#comment::placeholder {

    color: #d9d9d8;

}



.subscribe_bt {

    width: 180px;

    margin: 0 auto;

    text-align: center;

    margin-top: 40px;

}



.subscribe_bt a {

    width: 100%;

    float: left;

    font-size: 18px;

    color: var(--color-white);

    background-color: #f9bc19;

    padding: 10px;

    text-align: center;

    border-radius: 5px;

    text-transform: uppercase;

}





/* newsletter section end */





/* testimonial section start */



.customer_section {

    width: 100%;

    float: left;

}



.customer_taital {

    width: 100%;

    float: left;

    font-size: 40px;

    color: var(--color-black);

    font-weight: bold;

    text-transform: uppercase;

    text-align: center;

}



.customer_section_2 {

    width: 100%;

    float: left;

    margin-top: 50px;

}



.box_main {

    width: 100%;

    float: left;

    background-color: #ffffff;

    padding: 0px 50px 0px 50px;

}



.customer_text {

    width: 100%;

    font-size: 14px;

    color: #737372;

    margin: 0 auto;

}



.quick_icon {

    float: right;

}



.customer_main {

    width: 100%;

    margin-top: 50px;

}



.customer_left {

    width: 30%;

    float: left;

}



.customer_right {

    width: 70%;

    float: left;

    margin-top: 40px;

}



.customer_name {

    width: 100%;

    float: left;

    font-size: 26px;

    font-weight: bold;

    color: var(--color-red);

}



.enim_text {

    width: 100%;

    float: left;

    font-size: 16px;

    color: var(--color-black);

    margin: 20px 0px 0px 0px;

}



#my_slider a.carousel-control-prev {

    left: 30px;

    top: 190px;

}



#my_slider a.carousel-control-next {

    right: 30px;

    top: 190px;

}



#my_slider .carousel-control-next,

#my_slider .carousel-control-prev {

    width: 55px;

    height: 55px;

    background: var(--color-black);

    opacity: 1;

    font-size: 18px;

    color: #ffffff;

    border-radius: 100%;

}



#my_slider .carousel-control-next:focus,

#my_slider .carousel-control-next:hover,

#my_slider .carousel-control-prev:focus,

#my_slider .carousel-control-prev:hover {

    color: #ffffff;

    background-color: var(--color-red)

}





/* testimonial section end */





/* news section start */



.news_section {

    width: 100%;

    float: left;

}



.news_taital {

    width: 100%;

    float: left;

    font-size: 40px;

    text-transform: uppercase;

    color: #011430;

    font-weight: bold;

    text-align: center;

}



.news_section_2 {

    width: 98%;

    margin: 0 auto;

    text-align: center;

    background-color: #ffffff;

    height: auto;

    padding-bottom: 30px;

    border-radius: 5px;

}



.news_box {

    width: 100%;

    background-color: #fff;

    border-radius: 5px;

    box-shadow: 0px 5px 5px 0px #e9e9e8;

    float: left;

    padding-bottom: 40px;

    margin-top: 30px;

}



.does_taital {

    width: 100%;

    float: left;

    font-size: 30px;

    color: #011430;

    text-align: center;

    font-weight: bold;

    padding-top: 60px;

}



.dummy_text {

    width: 90%;

    text-align: center;

    font-size: 16px;

    margin: 0 auto;

    color: #011430;

}



#custom_slider a.carousel-control-next {

    right: 0px;

    left: 0px;

    top: 480px;

}



#custom_slider .carousel-control-next,

#custom_slider .carousel-control-prev {

    width: 55px;

    height: 55px;

    background: var(--color-red);

    opacity: 1;

    font-size: 18px;

    color: #ffffff;

    border-radius: 100%;

    margin: 0 auto;

    text-align: center;

}



#custom_slider .carousel-control-next:focus,

#custom_slider .carousel-control-next:hover,

#custom_slider .carousel-control-prev:focus,

#custom_slider .carousel-control-prev:hover {

    color: #ffffff;

    background-color: var(--color-red)

}





/* news section end */





/* contact section start */



.contact_section {

    width: 100%;

    float: left;

    padding-bottom: 90px;

}



.contact_taital {

    width: 100%;

    float: left;

    font-size: 40px;

    color: #011430;

    font-weight: bold;

    text-transform: uppercase;

    text-align: center;

    padding-bottom: 0px;

}



.contact_section_2 {

    width: 70%;

    margin: 0 auto;

    text-align: center;

}



.mail_section {

    width: 100%;

    float: left;

    margin-top: 30px;

}



.mail_text {

    width: 100%;

    float: left;

    font-size: 16px;

    color: #7c7c7d;

    border-bottom: 1px solid #7c7c7d !important;

    background-color: transparent;

    padding: 14px 15px 0px 0px;

    margin-bottom: 10px;

    border: 0px;

}



input.mail_text::placeholder {

    color: #7c7c7d;

}



.massage-bt {

    color: #7c7c7d;

    width: 100%;

    height: 50px;

    font-size: 16px;

    color: #7c7c7d;

    border-bottom: 1px solid #7c7c7d !important;

    background-color: transparent;

    padding: 20px 15px 0px 0px;

    margin-bottom: 10px;

    border: 0px;

}



textarea#comment::placeholder {

    color: #7c7c7d;

}



.send_bt {

    width: 160px;

    margin: 0 auto;

    text-align: center;

}



.send_bt a {

    width: 100%;

    text-align: center;

    font-size: 18px;

    color: #ffffff;

    background-color: var(--color-red);

    padding: 10px;

    text-transform: uppercase;

    margin-top: 30px;

    display: block;

    font-weight: bold;

    border-radius: 5px;

}



.send_bt a:hover {

    color: #fff;

    background-color: var(--color-black);

}





/* contact section end */





/* footer section start */



.footer_section {

    width: 100%;

    float: left;

    background-color: var(--color-red);

    height: auto;

    padding: 30px 0;

}







.footer_logo {

    width: 100%;

    text-align: center;

    max-width: 265px;

    margin: auto;

}



.social_icon {

    width: 100%;

    text-align: center;

    margin-top: 30px;

}



.social_icon ul {

    margin: 0px;

    padding: 0px;

    display: inline-block;

    text-align: center;

}



.social_icon li {

    float: left;

    font-size: 30px;

    color: #ffffff;

    padding: 0px 20px;

}



.social_icon li a {

    color: #ffffff;

}



.social_icon li a:hover {

    color: #51a9e8;

}



.location_text {

    width: 100%;

    text-align: center;

    display: inline-block;

    margin: 0 auto

}



.location_text ul {

    margin: 0px;

    padding: 0px;

    display: inline-block;

}



.location_text li {

    float: left;

}



.location_text li a {

    float: left;

    font-size: 20px;

    color: #ffffff;

    margin: 0px 30px;

    background-color: var(--color-red);

    padding: 12px 0px;

    border-radius: 100%;

    width: 60px;

    text-align: center;

}



.location_text li a:hover {

    color: #252525;

    background-color: #ffffff;

}



.btn-homepage {

  display: inline-block;

}



.btn-homepage a {

  font-size: 12px;

  color: #000;

  text-decoration: none;



  display: inline-flex;

  align-items: center;



  border: 1px solid #000;

  border-radius: 3px;

  padding: 2px 10px;



  position: relative;

  padding-right: 32px; /* เว้นที่ให้ลูกศร */

}



/* long arrow */

.btn-homepage a::after {

  content: "";

  position: absolute;

  top: 50%;

  right: 10px;

  width: 16px;

  height: 1px;

  background: currentColor;

  transform: translateY(-50%);

}



.btn-homepage a::before {

  content: "";

  position: absolute;

  top: 50%;

  right: 10px;

  width: 6px;

  height: 6px;

  border-top: 1px solid currentColor;

  border-right: 1px solid currentColor;

  transform: translateY(-50%) rotate(45deg);

}



/* hover animation */

.btn-homepage a::after,

.btn-homepage a::before {

  transition: transform 0.25s ease;

}



.btn-homepage a:hover {

  background: #000;

  color: #fff;

}



.btn-homepage a:hover::after {

  transform: translateY(-50%) translateX(4px);

}



.btn-homepage a:hover::before {

  transform: translateY(-50%) translateX(4px) rotate(45deg);

}













/* footer section end */





/* copyright section start */



.copyright_section {

    width: 100%;

    float: left;

    background-color: var(--color-blue);

    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: var(--color-red);

}





/* copyright section end */



.margin_top90 {

    margin-top: 90px;

}





/* AOTE EDIT 04032566 ------------------------ */



/* iframe */

.iframe-container {width: 100%; height: 0; padding-bottom: 56.25%; overflow: hidden; position: relative;}

.iframe-container iframe {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}



/* navbar */

.navbar {margin-bottom: unset!important;}

.navbar-brand {height: unset!important;}

.navbar-brand>img {width: 100%;}

.navbar-nav.fix-right .nav-item-latest, .nav-item {font-family: 'Prompt', sans-serif!important;}

.navbar-nav.fix-right .nav-item-latest, .nav-item:not(:last-child) {border-right: unset!important;}



.navbar .nav-item:last-child {padding-right: 0!important;}



.ml-auto.fix-right {margin-right: unset!important; float: right;}

.box_center {width: 100%; text-align: center;}



/* Countdown */

.election-countdown {float: right; margin-bottom: 9em;}

.election-countdown .container-countdown {display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 5px; width: 20%; margin:  0; color: #FFF; text-align: center;}

.election-countdown .container-countdown .c-number {font-size: 20px; font-weight: 500; border-radius: 3px;

    width: 42px;

    height: 42px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #3A3C44;

    background: linear-gradient(0deg, rgba(58, 60, 68, 1) 0%, rgba(87, 87, 95, 1) 50%, rgba(108, 108, 115, 1) 100%);

}

.election-countdown .container-countdown .c-text {font-size: 11px; font-weight: 300; background-color: transparent; padding: 3px 5px;}



/* election 101 */

.headline-text {font-size: 20px; font-weight: 700; margin-bottom: 15px;}

/*.headline-text:before {content:'| '; color: var(--color-red);}*/

.headline-text.black {color: #000;}

.headline-text.white {color: var(--color-white);}



/* latest */

.latest_section {

   width: 100%;

   float: left;

   padding: 0 0 30px;

   margin-top: -30px;

}



.latest_section,

.latest_section a {color: #FFF;}



.latest_section .col-md-3,

.latest_section .col-md-9 {padding-left: 0; padding-right: 0;}



.latest_section .block-item-post-1,

.latest_section .block-item-post-2,

.latest_section .block-item-post-3,

.latest_section .block-item-post-4 {display: grid; grid-gap: 20px;}

.latest_section .block-item-post-1 {grid-template-columns: repeat(1, 1fr);}

.latest_section .block-item-post-2 {grid-template-columns: repeat(2, 1fr); margin-bottom: 20px;}

.latest_section .block-item-post-3 {grid-template-columns: repeat(3, 1fr);}

.latest_section .block-item-post-4 {grid-template-columns: repeat(4, 1fr);}



.latest_section .block-latest .post-cat {display: none;}



.latest_section .post-cat {margin-top: 10px; font-size: 12px;}



.latest_section .block-item-post-1 .item-post .post-title {font-size: 20px; max-height: 105px;}

.latest_section .block-item-post-1 .item-post .post-title p {font-size: 14px; font-family: 'Prompt', sans-serif!important;}



.latest_section .item-post .post-title .desc {display: none;}

.latest_section .block-item-post-1 .item-post .post-title .desc {display: block;}







.mrt4 {margin-top: 4em;}



.fix-sticky {

    position: -webkit-sticky!important;

    position: sticky!important;

    top: 0!important;

}

.latest_section .block-latest-title {letter-spacing: 1px;}

.latest_section .block-latest-title h2 {margin-top: 30px; margin-bottom: unset; font-size: 16px; font-weight: 300; color: var(--color-red);}

/*.latest_section .block-latest-title h2:before {content:'| '; color: var(--color-red);}*/



.latest_section .block-latest .item-post {

    display: flex;

    gap: 12px; /* เว้นระยะระหว่างคอลัมน์ ปรับได้ */

    margin-bottom: 10px;

    align-items: center;

}



.latest_section .block-latest .item-post .col-left {

    flex: 0 0 30%;

    max-width: 30%;



    position: relative;

    aspect-ratio: 1 / 1;   /* บังคับกล่องเป็น 1:1 */

    overflow: hidden;

}



.latest_section .block-latest .item-post .col-left img {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    object-fit: cover;     /* crop */

    object-position: center;

}



.latest_section .block-latest .item-post .post-title {margin: 0;}



/* column ขวา */

.latest_section .block-latest .item-post .col-right {

    flex: 1;



}





.latest_section .item-post.list {

    border-bottom: 1px solid #ddd;

    padding: 5px 0;

}



/* video */

.video_section {

   width: 100%;

   float: left;

   padding: 0 0 60px;

}

.video_section .col-md-12 {padding-left: 0; padding-right: 0;}



.video_section .block-item-post-1,

.video_section .block-item-post-2,

.video_section .block-item-post-3,

.video_section .block-item-post-4 {display: grid; grid-gap: 20px;}

.video_section .block-item-post-1 {grid-template-columns: repeat(1, 1fr);}

.video_section .block-item-post-2 {grid-template-columns: repeat(2, 1fr); margin-bottom: 20px;}

.video_section .block-item-post-3 {grid-template-columns: repeat(3, 1fr);}

.video_section .block-item-post-4 {grid-template-columns: repeat(4, 1fr);}



.video_section .block-item-post-1 {margin-bottom: 20px;}



/* ICON VIDEO */

.video_section .item-post figure.thumb,

.endgame_section .item-post figure.thumb {position: relative;}



.video_section .item-post figure.thumb a:before,

.endgame_section .item-post figure.thumb a:before {

    display: block;

    width: 60px;

    height: 60px;

    border-radius: 50%;

    border: solid 2px #FFF;

    background: url(https://thestandard.co/wp-content/themes/thestandard.v3/assets/img/play-icon.png) center center no-repeat;

    background-size: contain;

    margin: auto;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    content: '';

    position: absolute;

    z-index: 1;

    -webkit-transform: scale(0.9);

    -ms-transform: scale(0.9);

    transform: scale(0.9);

    -webkit-transition: all 500ms cubic-bezier(0.175, 0.885, 0.32, 1.275);

    -o-transition: all 500ms cubic-bezier(0.175, 0.885, 0.32, 1.275);

    transition: all 500ms cubic-bezier(0.175, 0.885, 0.32, 1.275);

}



/* People in politics */

.peopleinpolitics_section {

    background-image: url(../images/bg/bg-politic-election2566-desktop.jpg);

    background-position: bottom center;

    background-size: cover;

    background-repeat: no-repeat;

}

.peopleinpolitics_section .hidden-xs .col-md-6:first-child {padding-left: unset!important; padding-right: 10px!important;}

.peopleinpolitics_section .hidden-xs .col-md-6:last-child {padding-left: 10px!important; padding-right: unset!important;}



.peopleinpolitics_section .block-item-post-1,

.peopleinpolitics_section .block-item-post-2,

.peopleinpolitics_section .block-item-post-3 {display: grid; grid-gap: 20px;}

.peopleinpolitics_section .block-item-post-1 {grid-template-columns: repeat(1, 1fr);}

.peopleinpolitics_section .block-item-post-2 {grid-template-columns: repeat(2, 1fr);}

.peopleinpolitics_section .block-item-post-3 {grid-template-columns: repeat(3, 1fr);}



.peopleinpolitics_section .post-title.content-show {max-height: 120px;}



.peopleinpolitics_section .post-title.content-show p {font-size: 16px; color: var(--color-gray);}







/* end game */

.endgame_section .block-item-post-1,

.endgame_section .block-item-post-2,

.endgame_section .block-item-post-3 {display: grid; grid-gap: 20px;}

.endgame_section .block-item-post-1 {grid-template-columns: repeat(1, 1fr);}

.endgame_section .block-item-post-2 {grid-template-columns: repeat(2, 1fr);}

.endgame_section .block-item-post-3 {grid-template-columns: repeat(3, 1fr);}



.endgame_section .post-title.content-show {max-height: 100px;}



.endgame_section .post-title.content-show p {font-size: 16px; color: var(--color-gray);}

.endgame_section .block-item-post .item-post {display: grid; grid-template-columns: 190px 1fr; grid-column-gap: 15px;}

.endgame_section .block-item-post .item-post .post-title {margin: 0 0 5px;}

.endgame_section .hidden-xs .col-md-8:first-child {padding-left: unset!important; padding-right: 10px!important;}

.endgame_section .hidden-xs .col-md-4:last-child {padding-left: 10px!important; padding-right: unset!important;}





/* Share Block */

.post-title {margin: 10px 0 5px; font-weight: 400; font-size: 16px; overflow-y: hidden;}



.post-cat a:hover,

.post-title a:hover {color: var(--color-red);}



.post-views {

    position: relative;

    text-align: left;

    display: block;

    color: #888;

    font-weight: 100;

    font-size: 12px;

}

.icon-share {

    height: 15px;

    float: right;

}

[id*="bio-"] {

    display: none;

}

.share-post-wrapper {

    grid-template-columns: 1fr 1fr 1fr;

    grid-gap: 20px;

    align-items: center;

    justify-items: center;

    background-color: rgba(255,255,255,.85);

    border-radius: 5px;

    padding: 5px 8px;

    border: 1px solid #ddd;

    position: absolute;

    right: 0;

    bottom: 23px;

}

.post-views .entry-view {

    display: inline-grid;

    grid-template-columns: 16px auto;

    float: unset;

    border: unset;

    padding: unset;

    font: unset;

    text-transform: unset;

    margin-bottom: unset;

}

.entry-view {

    display: block;

    float: right;

    border: solid 1px #000;

    padding: 5px 10px;

    font: 400 normal 1em "Kanit";

    text-transform: uppercase;

    margin-bottom: 10px;

}





/* nav menu sticky */

#navbarFixMenu a {

  display: inline-block;

  color: var(--color-white);

  padding: 8px 0;

  font-size: 16px;

  position: relative;

  z-index: 1;



  border-top: 8px solid transparent;

}





/* แถบแดงด้านบน (แทน border-top) */

#navbarFixMenu a::before {

    content: "";

    position: absolute;

    top: -8px;

    left: -12px;

    right: -12px;

    height: 8px;

    background: var(--color-red);

    transform: translateY(-100%) skewX(-35deg);

    opacity: 0;

    pointer-events: none;

    z-index: -1;

    transition: transform 0.3s cubic-bezier(.4,0,.2,1), opacity 0.2s ease;

}



/* hover + active */

#navbarFixMenu a:hover::before,

#navbarFixMenu a.active::before {

    transform: translateY(0) skewX(-35deg);

    opacity: 1;

}



/* สีตัวอักษร (ตามโค้ดเดิมของคุณ) */

#navbarFixMenu a:hover,

#navbarFixMenu a.active {

    color: var(--color-white);

}



#navbarFixMenu {

  position: relative;

  transform: translateY(-100%);

  transition:

    transform 0.35s ease,

    background-color 0.3s ease,

    box-shadow 0.3s ease;

}



#navbarFixMenu.sticky {

  position: fixed !important;

  top: 0 !important;

  width: 100% !important;

  z-index: 999;



  transform: translateY(0);

  background-color: rgba(9, 0, 40, .85);

  box-shadow: 0 4px 12px rgba(0,0,0,.25);

}



#navbarFixMenu.sticky + .content {

  padding-top: 60px !important;

}





.btn.btn-mbs-white {color: #000; background-color: var(--color-white); margin: 15px 0; font-size: .8em; font-weight: 900; padding: 3px 8px; letter-spacing: 1px;}

.btn:hover {opacity: .85;}

.copyright {color: var(--color-black); text-transform: uppercase; margin-top: 2em; font-size: 10px!important;}

  

.contact-block {

  display: flex;

  align-items: center;

  border-top: 1px solid #000;

  padding: 2em 0 0;

}



.contact-block .left {

  margin-right: auto;

}



.social-contact {

  margin-left: auto;

  order: 99;

}





.footer_section .social-contact {text-align: center;}

.footer_section #truehits_div {display: inline;}

.footer_section .footer-nav .footer-menu li a {color: var(--color-white); font-weight: 300; font-family: inherit; text-transform: uppercase;}



.election-more {display: block; clear: both; margin-top: 2em;}

.election-more .more-button {background-color: transparent; width: 100%; max-width: 85px; margin: 0 auto; padding: 0;}

.election-more .more-button:hover {opacity: .75; color: var(--color-red);}



.election-more {

    position: relative;

    padding: 0 12px;

    font-size: 14px;

    color: var(--color-white);

    margin: 0;

    border: 1px solid transparent;

    text-transform: uppercase;

    z-index: 1;

    width: fit-content;

    margin: 0 auto 4em;

}

.election-more::before {

    content: "";

    position: absolute;

    inset: -3px;

    border: 1px solid #fff;

    transform: skewX(-12deg);

    transform-origin: center;

    pointer-events: none;

    z-index: -1;

}





.fa.fa-search {color: #FFF; cursor: pointer;}

.fa.fa-search:hover {color: var(--gb-color1);}

.search-form {width: 80%; margin: 10px auto!important; float: unset!important;}

.closebtn-search {

    padding: unset!important;

    font-size: 50px!important;

    top: 25px!important;

    right: 40px!important;

    transition: 0.5s;

}

a.closebtn-search:hover {text-decoration: none!important;}





/* PAGE : ELECTION 2566 PARTY */

.logo-party {width: 100%; max-width: 450px; margin: 0 auto;}





/* SINGLE : ELECTION 2566 PARTY */

.party-header {text-align: center; margin: 2em 0;}

.party-logo {margin: auto; width: 100%; max-width: 250px;}

.party-title {font-size: 26px; font-weight: 600;}



    

.newsbox-archive,

.newsbox-archive .news-item {display: grid; grid-gap: 20px; overflow: hidden;}



.newsbox-archive {grid-template-columns: repeat(4, 1fr);}

.newsbox-archive .news-item {grid-template-rows: auto 1fr;}



.party-related {margin-bottom: 3em; margin-top: 3em;}



#superstar {

    background-image: url(../images/bg/bg-single-superstar-desktop.jpg);

    background-position: bottom center;

    background-size: 100% 100%;

    background-repeat: no-repeat;



    padding: 2em 0;

    margin: 3em 0;

}



#superstar .election-content-title {color: var(--color-white); font-weight: 400; text-transform: uppercase; width: fit-content; margin: auto;}

/*#superstar .superstar-list {position: relative; margin: 1em auto; display: grid; align-items: flex-start; justify-items: center;}*/

/*#superstar .superstar-list {position: relative; margin: 1em auto; display: flex; justify-content: center;}*/

#superstar .superstar-container .superstar-item:after {

  content: '';

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

  background: linear-gradient(to bottom, transparent 75%, rgba(0, 0, 0, .65) 100%);

}

.superstar-item {position: relative; margin-right: 10px; margin-left: 10px; overflow: hidden;}

.superstar-info {position: absolute; left: 10px; bottom: 5px; z-index: 1;}

.superstar-info p {font-family: 'Prompt', sans-serif!important; color: var(--color-white); margin: 0 0 5px; line-height: 1;}

.superstar-info p.title {font-size: 16px!important; font-weight: 500!important;}

.superstar-info p.alias {font-size: 12px!important; font-weight: 300!important;}



/* coming soon */

.comingsoon:hover span {display: none; transition: ease all .3s;}

.comingsoon:hover:before {content: "coming soon"; font-size: 15px;}



/* CLOSED */

.closed:hover span {display: none; transition: ease all .3s;}

.closed:hover:before {content: "CLOSED"; font-size: 15px;}



/* page party */

.party-container {padding: 2em 0; background-color: #e9e8e8;}

.party-container figure.thumb img {background-color: #FFF;}



.party-container .newsbox-header {margin-bottom: 2em;}



.election-party-post {display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 30px; align-items: center; justify-items: center;}

.election-party-post .item {text-align: center;}



/*.election-party-post {display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: center;}

.election-party-post .item {text-align: center; flex: 1 0 calc(100% / 4); margin: 0 30px;}*/







.election-content,

.election-content p {font-family: 'Prompt', sans-serif!important;}

.election-content ul li {list-style: disc; list-style-position: inside;}

.election-content .candidate-item .col-md-4 {padding-left: 0;}

.election-content .candidate-item .col-md-8 {padding-right: 0;}

.election-content .candidate-item p strong {font-size: 18px; font-weight: 600;}

.election-content .candidate-item p {font-size: 16px; font-weight: 300;}



.election-content .candidate-info {position: relative;}

.election-content .candidate-info p.title {font-size: 24px!important; font-weight: 600!important;}

.election-content .candidate-info p.alias {font-weight: 400!important; margin-bottom: 1em;}



.election-content .candidate-item:not(:first-child) {margin-top: 3em;}



/* SINGLE CONTENT */

#begin,

.election-content .iframe-container {margin-bottom: 3em;}



.social-contact>a+a {margin-left: unset!important;}