@font-face {
    font-family: "quarkbold";
    src: url("../Main_theme_v3/files/fonts/quark-bold-webfont.eot");
    src: url("../Main_theme_v3/files/fonts/quark-bold-webfontd41d.eot?#iefix") format("embedded-opentype"),
        url("../Main_theme_v3/files/fonts/quark-bold-webfont.woff2") format("woff2"),
        url("../Main_theme_v3/files/fonts/quark-bold-webfont.woff") format("woff"),
        url("../Main_theme_v3/files/fonts/quark-bold-webfont.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "quarklight";
    src: url("../Main_theme_v3/files/fonts/quark-light-webfont.eot");
    src: url("../Main_theme_v3/files/fonts/quark-light-webfontd41d.eot?#iefix") format("embedded-opentype"),
        url("../Main_theme_v3/files/fonts/quark-light-webfont.woff2") format("woff2"),
        url("../Main_theme_v3/files/fonts/quark-light-webfont.woff") format("woff"),
        url("../Main_theme_v3/files/fonts/quark-light-webfont.ttf") format("truetype");
    font-weight: light;
    font-style: normal;
}

* {
    font-family: 'quarkbold' !important;
}

body.no-scroll {
    overflow: hidden;
}

i {
    font-family: FontAwesome !important;
}

.container {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.glyphicon {
    font-family: 'Glyphicons Halflings' !important;
}

#bg-topcontent {
    background-size: 100% 100%;
    background-image: url(../../portals/1/images/theme-2025/bg-pane-1.png);
    background-repeat: no-repeat;
    background-color: transparent;
    background-position: center;
    padding: 5rem 0;
    margin-top: -120px;
    position: relative;
}

#column-left{
margin-bottom: 2rem;
}

#bg-col-12-two {
    position: relative;
    background: #fff;
}

#bg-col-12-three {
    position: relative;
    background: linear-gradient(180deg, rgb(250 247 242) 0%, rgb(245 241 237) 100%);
    padding: 5rem 0 0;
    margin-top: -1px;
}

#bg-col-12-four {
    background-size: 100% 100%;
    background-image: url(../../portals/1/images/theme-2025/bg-pane-2.png);
    background-repeat: no-repeat;
    background-color: transparent;
    background-position: center;
    padding: 8rem 0;
    position: relative;
}

#bg-col-12-five {
    position: relative;
    background: linear-gradient(180deg, rgb(237 233 228) 0%, rgb(245 244 244) 100%);
    background-repeat: no-repeat;
    background-position: center;
    padding: 5rem 0;
    margin-top: -1px;
}

input[value="อ่านทั้งหมด"] {
    position: relative;
    float: inherit !important;
    display: flex;
    margin: 2rem auto !important;
    color: #8a1d08;
    font-size: 18px;
    font-family: "quarkbold" !important;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    padding: 0.375rem 2rem 0.375rem 1rem;
    border-radius: 25px;
    background-color: #f0f0f0;
    border: none;
    appearance: none;
    cursor: pointer;
    background-image: url(../../portals/1/images/theme-2025/plus-red.svg);
    background-repeat: no-repeat;
    background-position: right 15px center;
    background-size: 10px;
}

input[value="อ่านทั้งหมด"]:hover,
input[value="อ่านทั้งหมด"]:active,
input[value="อ่านทั้งหมด"]:focus {
    background-color: rgb(126, 33, 14) !important;
    background-image: url(../../portals/1/images/theme-2025/plus-white.svg) !important;

}

.page-banner {
    background: transparent !important;
}

.head-box {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 9;
}

.tool-body {
    background: #6b1c19;
    width: 100%;
}

.btn-color-tool {
    padding: 10px  0;
}

.icon-tool {
    padding: 12px 10px;
}

.icon-tool svg {
    vertical-align: middle;
}

.btn-font-tool {
    padding: 5px 0;
    height: 100%;
    align-content: center;
}

.btn-color-tool:hover,
.btn-font-tool:hover,
.icon-tool:hover {
    background: #792024;
}

.social-body {
    position: fixed;
    left: 0;
    top: 50%;
    display: flex;
    gap: 5px;
    flex-direction: column;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    padding: 10px 5px;
    border-radius: 0px 10px 10px 0px;
    background: #fff;
    z-index: 8;
}

.social-body a:hover img {
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    border-radius: 50%;
    background: #f8f4ef;
    transform: scale(1.05);
}

.head-body,
.head-body:hover {
    background: #ffffffcf;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
}

.banner-head {
    position: relative;
    top: -11px;
}

.banner-head img {
    width: 100%;
}

.meeting-box {
    display: flex;
    flex-direction: column;
    width: 25%;
}

.meeting-box img {
    height: 90px;
    object-fit: cover;
}

.meeting-box>.d-flex:nth-child(1) {
    background: #F0EFEF;
}

.meeting-box>.d-flex:nth-child(2) {
    background: #F8F4EF;
}

.icon-meeting {
    display: flex;
    flex-direction: column;
    width: 33.33%;
    align-items: center;
    margin: 10px 0 5px;
    border-right: 1px solid #574429;
}

.icon-meeting:nth-last-child(1) {
    border-right: 0;
}

nav {
    display: flex;
    flex-direction: column;
    width: 75%;
    background-color: transparent;
    height: 60px;
}

.navbar-head {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    height: 120px;
}

.navbar-head img {
    height: 120px;
    object-fit: cover;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

/* start css เปลี่ยนภาษา */
.btn-dropdown {
    position: relative;
    background: linear-gradient(180deg, #c7a87e, #ab8e65);
    border-radius: 4px;
    border: 0;
    display: flex;
    width: fit-content;
    padding: 5px 10px;
    color: #fff;
}

.btn-dropdown .fill-current {
    width: 18px;
    height: 18px;
    margin: auto 0;
}

.btn-dropdown .fill-current path {
    fill: #fff;
}

.dropdown:hover .dropdown-menu-language {
    display: block;
}

.dropdown-menu-language {
    display: none;
    position: absolute;
    padding: 0.25rem 0 0;
    margin: 0;
    width: 100px;
    z-index: 99;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}

.dropdown-menu-language .item-lang {
    padding: 0.5rem;
    border-bottom: 1px solid #eeeeee;
    background: #ffffff;
}

.dropdown-menu-language .item-lang:nth-child(1) {
    border-radius: 5px 5px 0 0;
}

.dropdown-menu-language .item-lang:nth-last-child(1) {
    border-bottom: 1px solid transparent;
    border-radius: 0 0 5px 5px;
}

.dropdown-menu-language .item-lang.active,
.dropdown-menu-language .item-lang:hover {
    background: #ebebeb;
}

.dropdown-menu-language .item-lang a {
    display: flex;
    gap: 10px;
    align-items: center;
    color: #000;
}

.dropdown-menu-language .item-lang img {
    width: 35px;
    height: 35px;
    object-fit: contain;
    position: relative;
    left: 0;
    transform: none;
}
/* end css เปลี่ยนภาษา */

/* start css footer */
.footer-senate {
    background: url(../../portals/1/images/theme-2025/bg-footer-1.png), url(../../portals/1/images/theme-2025/bg-footer-senate.png);
    background-size: 100%, 100% 100%;
    background-repeat: no-repeat;
    background-position: center calc(100% + -250px), center bottom -90px;
    position: relative;
    margin-top: 0;
}

.card-footer {
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px !important;
    background: #fff !important;
    width: 90%;
    border-radius: 20px !important;
    display: flex;
    position: relative;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 95px;
}

.contact-3 {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    width: 70%;
    border-right: 1px solid #D9D9D9;
    padding: 1rem 4rem;
}

.contact-3 .text-dark-gold {
    color: #616161;
}

.social-footer {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 25px;
    width: 30%;
}

.social-footer a:hover img {
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    border-radius: 50%;
    transform: scale(1.1);
}

.title-footer,
#server_counter2 .title {
    color: #fff;
    font-size: 20px;
    letter-spacing: 2px;
    margin-bottom: 1rem;
}

.title-footer:after,
#server_counter2 .counter_title p:nth-child(1):after {
    content: " ";
    display: flex;
    width: 30px;
    height: 5px;
    background: #fff;
}

.bg_counter {
    display: flex;
    margin: 0;
    background: #ffffff;
    border-radius: 10px;
    padding: 10px;
    width: fit-content;
    flex-direction: column;
}

.counter_title p:nth-child(1) {
    font-size: 20px !important;
    letter-spacing: 2px;
}

.counter_title p {
    margin-bottom: 1rem;
    font-size: 18px !important;
    color: #fff !important;
}

.counter_title #ct {
    background: #fff;
    border-radius: 5px;
    color: #574429;
    padding: 2px 5px;
}

.counter_pages {
    display: flex;
    align-items: center;
    margin: 0 0 10px;
}

.counter_pages p {
    margin-bottom: 0;
    font-size: 18px !important;
}

.counter_pages:nth-child(1) p:nth-child(odd) {
    font-family: 'quarklight' !important;
    margin-right: 3px;
    color: #574429;
    margin-bottom: 0 !important;
}

.counter_pages:nth-child(1) p:nth-child(even) {
    margin-right: 15px;
    color: #574429 !important;
    margin-bottom: 0 !important;
}

.counter_pages:nth-last-child(1) {
    margin-bottom: 0;
}

.counter_pages:nth-last-child(1) img {
    display: none;
}

.counter_pages:nth-last-child(1):before {
    content: "\e473";
    font-family: FontAwesome;
    color: #574429;
    position: relative;
    font-size: 30px;
    margin-right: 15px;
}

.counter_pages:nth-last-child(1) p {
    margin-bottom: 0 !important;
    color: #574429 !important;
}

#server_counter2 p {
    margin-bottom: 1rem;
}

.achecker {
    margin-top: 1rem;
}

.btn-map {
    width: fit-content;
    background: #fff;
    border-radius: 10px;
    padding: 5px 15px;
    color: #574429;
    margin: 1rem 0;
}

.btn-map:hover {
    background: #6b1c19;
    color: #fff;
}

.contact-icon a,
.contact-icon a:hover {
    color: #fff;
}

#server_counter2>p {
    margin-top: -20px;
}

.toggle-footer {
    padding: 5px 10px !important;
    background-color: #ffffff !important;
    color: #000 !important;
    position: absolute;
    right: 0;
    bottom: 0;
    font-size: 18px;
    border-radius: 10px 10px 0 0 !important;
}

.toggle-footer:after {
    content: "";
    display: inline-block;
    vertical-align: middle;
    position: relative;
    top: 50% !important;
    margin-left: 10px;
    height: 10px;
    width: 10px;
    border-left: 2px solid #000 !important;
    border-top: 2px solid #000 !important;
    transform: rotate(45deg);
}

#sitemap .title {
    color: #574429 !important;
    position: relative !important;
}

#sitemap a {
    font-size: 20px !important;
}

#sitemap .color-yellow {
    color: #6b1c19;
    font-size: 20px;
}

.card-policy {
    width: 100%;
    background: #fff;
    padding: 10px 0;
}

.policy-text,
.policy-text a {
    color: #574429;
    font-size: 16px;
}

.policy-text a:hover {
    color: #4a3a23;
}
/* end css footer */

/* start css menu */
.menu-container {
    width: 100%;
    margin: 0;
    padding-left: 100px;
}

.menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
}

.menu-item {
    position: relative;
}

.menu>.menu-item>a {
    color: #8c724e;
    padding: 0 15px;
    border-bottom: 5px solid #00000000;
    display: flex;
    text-decoration: none;
    font-size: 20px;
}

.menu>.menu-item:hover>a,
.menu-item .menu-dropdown.active-dropdown {
    border-bottom: 5px solid #8c724e;
}

.menu-dropdown:before {
    content: "\f107";
    font-family: FontAwesome;
    color: #a5875e;
    position: absolute;
    right: 5px;
    top: 42%;
    transform: translateY(-50%);
    font-size: 15px;
}

.menu-item.active .menu-dropdown:before {
    content: "\f106";
    font-family: FontAwesome;
}

/* .menu-item:hover .menu-dropdown:before {
    content: "\f106";
    font-family: FontAwesome;
} */

.menu-item.active .mega-menu {
    display: grid;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* .menu-item:hover .mega-menu {
    display: grid;
    grid-template-columns: 75% 25%;
} */

.mega-menu {
    position: fixed;
    left: 0;
    top: 204px;
    background-color: #f7f5f2;
    width: 100%;
    padding: 20px 4rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    z-index: 100;
    display: none;
    grid-template-columns: 75% 25%;
}

.mega-menu .column {
    width: 100%;
    height: 100%;
    padding: 0 10px;
}

.mega-menu h3 {
    margin-top: 0;
    font-size: 16px;
}

.mega-menu ul {
    list-style: none;
    padding: 0;
}

.mega-menu ul li a {
    text-decoration: none;
    color: #333;
    display: block;
    padding: 0;
}

.menu::after,
.mega-menu::after {
    content: "";
    display: table;
    clear: both;
}

.menu-toggle-mb {
    display: none;
    padding: 15px 20px;
    cursor: pointer;
    font-size: 24px;
    color: #574429;
}

.mega-menu-container {
    display: flex;
    height: 100%;
}

.mega-menu-left ul li a {
    color: #574429;
    width: 100%;
}

.mega-menu-left {
    width: 30%;
    border-right: 2px solid #e8e8e8;
    padding: 15px 15px 15px 0;
    overflow-y: auto;
    height: 435px;
}

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

.left-item {
    font-size: 18px;
    padding: 8px 35px 8px 15px;
    cursor: pointer;
    border-radius: 8px;
    margin-bottom: 5px;
    display: flex;
    justify-content: space-between;
    color: #574429;
    transition: 0.2s;
    position: relative;
}

.left-item:hover,
.left-item.active {
    background: #e8e2d9;
}

.left-item:after {
    content: ' ';
    background-image: url(../../portals/1/images/theme-2025/arrow-menu.svg);
    background-size: 22px 22px;
    height: 22px;
    width: 22px;
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
}

.mega-menu-right {
    width: 70%;
    padding: 15px 0 0;
}

.mega-menu-right ul li {
    display: flex;
    padding: 10px 0 0;
    justify-content: space-between;
    gap: 10px;
    position: relative;
}

.menu .menu-item:nth-child(3) .mega-menu-right ul li {
    display: flex;
    padding: 8px 10px 8px 45px;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    position: relative;
    margin-bottom: 5px;
}

.menu .menu-item:nth-child(3) .mega-menu-right ul li:hover{
    background: #e8e1d5;
    border-radius: 10px;
}

.menu .menu-item:nth-child(3) .mega-menu-right ul li:before {
    content: "";
    background: url(../../portals/1/images/theme-2025/icon-megamenu.svg);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position-x: center;
    position: absolute;
    width: 28px;
    height: 28px;
    display: flex;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
}

.menu .menu-item:nth-child(3) .mega-menu-right .right-content{
    height: 370px;
    overflow-y: auto;
    padding-right: 5px;
}

.right-content {
    display: none;
}

.right-content.active {
    display: block;
}

.right-content ul {
    list-style: none;
    padding: 0;
    margin-left: 25px;
}

.right-content ul li a{
    font-size: 18px;
    color: #333;
}

.right-content ul li a:hover{
    color: #574429;
}

.web-page {
    display: flex;
    flex-direction: column;
    width: 100%;
    background: #e8e1d5;
    padding: 1rem !important;
    border-radius: 20px;
}

.web-page:hover {
    background: #c8ab83;
}

.web-page img {
    width: 100%;
    height: 355px;
}

.next-page {
    color: #574429 !important;
    font-size: 20px !important;
    display: flex !important;
    justify-content: flex-end;
    gap: 10px;
    padding-top: 1rem !important;
    width: 100% !important;
}

.banner-mega {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.banner-mega a:hover {
    background: 0;
    border: 0;
}

.banner-mega img {
    width: 100%;
    height: 220px;
    object-fit: contain;
}

.search-nav {
    display: flex;
    position: relative;
    margin-left: 25px;
    margin-bottom: 10px;
}

.search-nav input {
    border: 1px solid #acacac;
    padding: 5px 35px 5px 10px;
    background: transparent;
    border-radius: 10px;
    width: 40%;
}

.search-nav i {
    color: #b1b1b1;
    position: absolute;
    left: 36%;
    top: 46%;
    text-align: end;
    font-size: 18px;
    transform: translateY(-50%);
    font-weight: 300;
    padding-right: 10px;
}

.search-nav a {
    background: linear-gradient(180deg, #c7a87e, #ab8e65);
    border-radius: 5px;
    width: fit-content !important;
    color: #fff !important;
    font-size: 18px !important;
    margin-left: 10px;
    padding: 0.2em 1.5rem !important;
}

.search-nav a:hover {
    background: linear-gradient(180deg, #b59a73, #9e835e);
}

.new-icon {
    width: 28px;
    height: 28px;
    object-fit: cover !important;
    padding: 0 !important;
}

.no-data{
    display: none;
    text-align: center;
    font-size: 20px;
    color: #8e8e8e;    
    margin-top: 35px;
}

.no-data img{
    width: 250px;    
    filter: grayscale(1);
    margin: 0 auto 2rem;
}

.menu.mb {
    display: flex;
    /* ซ่อนไว้ตอน mobile */
    flex-direction: column;
    /* ถ้าต้องการให้แนวตั้ง */
}

.right-content.mobile-inserted {
    background: #eeeeee;
    margin: 0 10px;
}

#dynamicLink {
    width: 300px;
    height: 122px;
    position: absolute;
    left: 50%;
    transform: translateX(-42%);
}

#dynamicLink > img {
    height: 120px;
    object-fit: cover;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

@media only screen and (min-width: 1550px){
    .menu-item .mega-menu {
        grid-template-columns: 80% 20%;
    }

    /* .menu-item:hover .mega-menu {
        display: grid;
        grid-template-columns: 80% 20%;
    } */
}

@media only screen and (max-width: 1550px){
    .mega-menu{
        max-height: 65vh;
    }

    .mega-menu-left{
        height: 380px;
    }

    .web-page img{
        height: 300px;
        object-fit: cover;
        border-radius: 10px;
    }

    .menu .menu-item:nth-child(3) .mega-menu-right .right-content{
        height: 315px;
    }
}

@media only screen and (max-width: 1200px){
    .menu-container{
        padding-left: 0;
    }

    .menu {
        justify-content: center;
    }

    .meeting-box{
        width: 35%;
    }
}


@media only screen and (max-width: 768px) {
    #server_menu_2 {
        display: flex;
    }

    #dynamicLink{
        left: 0;
        transform: translateX(0) !important;
    }

    #dynamicLink > img {
        height: 60px !important;
        left: 0;
        transform: translateX(0);
    }

    .head-body{
        height: auto !important;
    }

    .tool-body>.justify-content-end > .text-white {
        display: none;
    }

    .row {
        margin-right: 0px !important;
        margin-left: 0px !important;
    }
    .navbar-head{
        width: 100% !important;
        padding-right: 60px;
        height: 65px !important;
    }

    .head-body .container, .tool-body .container{
        max-width: 100%;
    }

    .tool-body>.justify-content-end {
        flex-wrap: wrap;
        width: 85%;
        gap: 0px;
        padding: 6px 0px;
    }

    
    .tool-body>.justify-content-end > .text-white {
        display: none;
    }

    .menu-container {
        padding: 0;
        position: absolute;
        right: 0;
    }

    .menu-item .menu-dropdown.active-dropdown {
        border-bottom: 5px solid transparent;
    }
    
    .menu-toggle-mb {
        display: flex;
        padding: 15px 1rem;
        width: fit-content;
        position: absolute;
        right: 5px;
    }
    .navbar-box{
        padding: 0 1rem;
    }

    .menu {
        display: none;
        flex-direction: column;
        position: absolute;
        width: 100%;
        background: #fff;
        left: 0;
        top: 55px;
        box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
    }

    .menu-item {
        width: 100%;
    }

    .mega-menu {
        position: relative;
        width: 100%;
        padding: 10px 15px;
        box-shadow: none;
        background: #f9f9f9;
    }

    .menu .menu-item .mega-menu {
        display: none;
        position: relative;
        top: 0;
        background: #eeeeee;
        max-height: 640px;
        overflow-y: auto;
    }

    .menu .menu-item.active .mega-menu {
        flex-direction: column;
    }

    #bg_content .page-body{
        margin-top: 110px;
    }

    .banner-head {
        top: 0 !important;
    }

    .menu-item .menu-dropdown:before{
        top: 15px;
        right: 15px;
    }

    .mega-menu .column {
        height: fit-content;
    }

    .mega-menu-container{
        flex-direction: column;
        height: fit-content;
    }

    .mega-menu-left{
        width: 100%;
        height: fit-content;
        padding: 0;
        border: 0;
    }

    .mega-menu-right{
        width: 100%;
        height: fit-content;
    }

    .search-nav{
        margin-left: 0;
    }

    .search-nav input{
        width: 45%;
    }

    .right-content ul{
        margin-left: 0;
    }

    .banner-mega {
        margin: 1.5rem 0;
        flex-direction: row;
        justify-content: center;
    }

    .banner-mega img{
        height: 130px;
    }

    .web-page{
        flex-direction: row;
        margin-top: 1rem;
    }

    .web-page img{
        width: 45%;
        height: 150px;
        object-fit: cover;
        border-radius: 15px;
    }

    .next-page{
        width: 55% !important;
        padding-top: 0 !important;
        align-items: center;
        text-align: right;
    }

    .next-page svg {
        width: 35px;
        height: 35px;
    }

    .mega-menu-right {
        display: none !important;
    }

    .menu .menu-item:nth-child(3) .right-content.mobile-inserted ul li{
        justify-content: space-between;
        display: flex;
        border-bottom: 0.5px solid #dcdcdc;
    }

    .right-content ul li{
        margin-bottom: 5px;
        padding: 4px 0;
    }
}
/* end css menu */

@media only screen and (max-width: 992px) {
    #dynamicLink > img{
        height: 85px;
    }

    .mega-menu{
        top: 155px;
        max-height: 70vh;
        padding: 20px;
    }

    .web-page img{
        height: 270px;
    }

    .meeting-box,
    .tool-body .d-flex.gap-10>.text-white,
    .search-box {
        display: none !important;
    }

    .footer-senate {
        background-size: cover;
    }

    .card-footer {
        flex-direction: column;
    }

    .contact-3 {
        flex-direction: column;
        border-right: 0;
        justify-content: center;
        align-items: center;
        gap: 25px;
        width: 100%;
    }

    .social-footer {
        width: 100%;
        padding-bottom: 1rem;
    }

    .footer-senate>.d-flex {
        flex-direction: column;
    }

    .footer-senate>.d-flex>.col-lg-6 {
        margin-bottom: 2rem;
    }

    .bg_counter {
        width: 100%;
    }

    .card-policy .d-flex {
        flex-direction: column;
        align-items: flex-start !important;
    }

    #bg-col-8-five,
    #bg-col-4-five {
        padding: 0;
    }

    .tool-body>.justify-content-end {
        justify-content: space-between !important;
    }

    .head-body>.container {
        padding: 0;
    }

    nav {
        flex-direction: row;
        width: 100%;
        position: relative;
    }

    .navbar-head {
        justify-content: space-between;
        height: 60px;
        width: 100%;
    }

    .navbar-head img {
        height: 100px !important;
        top: 15px;
    }

    .search-box-mb {
        display: block;
    }

    .search-box-mb .icon-search {
        background: transparent;
        color: #c4a57b;
        font-size: 1.5rem;
        padding: 0;
        height: 40px;
        align-content: end;
    }

    .btn-dropdown {
        background: linear-gradient(180deg, #c7a87e, #ab8e65);
        color: #ffffff;
        font-size: 0.9rem;
    }

    .btn-dropdown .fill-current path {
        fill: #fff;
    }

    .btn-dropdown .fill-current {
        width: 20px;
        height: 20px;
        margin: auto 0;
    }

    .head-body {
        background: #fff !important;
        height: 105px;
    }

    .banner-head {
        top: 100px;
    }

    .topcontent {
        margin-top: 0;
    }
/* 
    .banner-pc {
        display: none;
    } */

    .banner-mb {
        display: block;
    }

    .toggle-footer {
        margin-right: 15px;
    }

    #bg-col-5-4 .col-lg-5 {
        padding: 0;
        margin-bottom: 1rem;
    }
}

@media only screen and (max-width: 592px){
    .tool-body>.justify-content-end{
        width: 100% !important;
        padding: 6px !important;
        justify-content: center !important;
    }
}

.font-light {
    font-family: 'quarklight' !important;
}

.text-white {
    color: #fff;
}

.text-dark-gold {
    color: #574429;
}

.letter-space-1 {
    letter-spacing: 1px;
}

.overflow-auto {
    overflow: auto !important;
}

.overflow-hidden {
    overflow: hidden !important;
}

.position-static {
    position: static !important;
}

.position-relative {
    position: relative !important;
}

.position-absolute {
    position: absolute !important;
}

.position-fixed {
    position: fixed !important;
}

.position-sticky {
    position: sticky !important;
}

.w-25 {
    width: 25% !important;
}

.w-50 {
    width: 50% !important;
}

.w-75 {
    width: 75% !important;
}

.w-100 {
    width: 100% !important;
}

.w-auto {
    width: auto !important;
}

.h-25 {
    height: 25% !important;
}

.h-50 {
    height: 50% !important;
}

.h-75 {
    height: 75% !important;
}

.h-100 {
    height: 100% !important;
}

.h-auto {
    height: auto !important;
}

.gap-5 {
    gap: 5px;
}

.gap-10 {
    gap: 10px;
}

.gap-15 {
    gap: 15px;
}

.gap-20 {
    gap: 20px;
}

.gap-30 {
    gap: 30px;
}

.gap-35 {
    gap: 35px;
}

.gap-40 {
    gap: 40px;
}

.gap-45 {
    gap: 45px;
}

.d-flex {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
}

.flex-row {
    -webkit-box-orient: horizontal !important;
    -webkit-box-direction: normal !important;
    -ms-flex-direction: row !important;
    flex-direction: row !important;
}

.flex-column {
    -webkit-box-orient: vertical !important;
    -webkit-box-direction: normal !important;
    -ms-flex-direction: column !important;
    flex-direction: column !important;
}

.flex-row-reverse {
    -webkit-box-orient: horizontal !important;
    -webkit-box-direction: reverse !important;
    -ms-flex-direction: row-reverse !important;
    flex-direction: row-reverse !important;
}

.flex-column-reverse {
    -webkit-box-orient: vertical !important;
    -webkit-box-direction: reverse !important;
    -ms-flex-direction: column-reverse !important;
    flex-direction: column-reverse !important;
}

.flex-wrap {
    -ms-flex-wrap: wrap !important;
    flex-wrap: wrap !important;
}

.flex-nowrap {
    -ms-flex-wrap: nowrap !important;
    flex-wrap: nowrap !important;
}

.justify-content-start {
    -webkit-box-pack: start !important;
    -ms-flex-pack: start !important;
    justify-content: flex-start !important;
}

.justify-content-end {
    -webkit-box-pack: end !important;
    -ms-flex-pack: end !important;
    justify-content: flex-end !important;
}

.justify-content-center {
    -webkit-box-pack: center !important;
    -ms-flex-pack: center !important;
    justify-content: center !important;
}

.justify-content-between {
    -webkit-box-pack: justify !important;
    -ms-flex-pack: justify !important;
    justify-content: space-between !important;
}

.justify-content-around {
    -ms-flex-pack: distribute !important;
    justify-content: space-around !important;
}

.align-items-start {
    -webkit-box-align: start !important;
    -ms-flex-align: start !important;
    align-items: flex-start !important;
}

.align-items-end {
    -webkit-box-align: end !important;
    -ms-flex-align: end !important;
    align-items: flex-end !important;
}

.align-items-center {
    -webkit-box-align: center !important;
    -ms-flex-align: center !important;
    align-items: center !important;
}

.align-items-baseline {
    -webkit-box-align: baseline !important;
    -ms-flex-align: baseline !important;
    align-items: baseline !important;
}

.align-items-stretch {
    -webkit-box-align: stretch !important;
    -ms-flex-align: stretch !important;
    align-items: stretch !important;
}

.align-content-start {
    -ms-flex-line-pack: start !important;
    align-content: flex-start !important;
}

.align-content-end {
    -ms-flex-line-pack: end !important;
    align-content: flex-end !important;
}

.align-content-center {
    -ms-flex-line-pack: center !important;
    align-content: center !important;
}

.align-content-between {
    -ms-flex-line-pack: justify !important;
    align-content: space-between !important;
}

.align-content-around {
    -ms-flex-line-pack: distribute !important;
    align-content: space-around !important;
}

.align-content-stretch {
    -ms-flex-line-pack: stretch !important;
    align-content: stretch !important;
}

.align-self-auto {
    -ms-flex-item-align: auto !important;
    align-self: auto !important;
}

.align-self-start {
    -ms-flex-item-align: start !important;
    align-self: flex-start !important;
}

.align-self-end {
    -ms-flex-item-align: end !important;
    align-self: flex-end !important;
}

.align-self-center {
    -ms-flex-item-align: center !important;
    align-self: center !important;
}

.align-self-baseline {
    -ms-flex-item-align: baseline !important;
    align-self: baseline !important;
}

.align-self-stretch {
    -ms-flex-item-align: stretch !important;
    align-self: stretch !important;
}

.font-weight-light {
    font-weight: 300 !important;
}

.font-weight-lighter {
    font-weight: lighter !important;
}

.font-weight-normal {
    font-weight: 400 !important;
}

.font-weight-bold {
    font-weight: 500 !important;
}

.font-weight-bolder {
    font-weight: 600 !important;
}

.font-italic {
    font-style: italic !important;
}

.font-size-base {
    font-size: 1rem;
}

.font-size-sm {
    font-size: 0.925rem;
}

.font-size-xs {
    font-size: 0.8rem;
}

.font-size-lg {
    font-size: 1.08rem;
}

.font-size-h1 {
    font-size: 2rem !important;
}

.font-size-h2 {
    font-size: 1.75rem !important;
}

.font-size-h3 {
    font-size: 1.5rem !important;
}

.font-size-h4 {
    font-size: 1.35rem !important;
}

.font-size-h5 {
    font-size: 1.25rem !important;
}

.font-size-h6 {
    font-size: 1.175rem !important;
}

.display1 {
    font-size: 5.5rem !important;
}

.display2 {
    font-size: 4.5rem !important;
}

.display3 {
    font-size: 3.5rem !important;
}

.display4 {
    font-size: 2.5rem !important;
}

.display5 {
    font-size: 2.25rem !important;
}

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

.mt-0,
.my-0 {
    margin-top: 0 !important;
}

.mr-0,
.mx-0 {
    margin-right: 0 !important;
}

.mb-0,
.my-0 {
    margin-bottom: 0 !important;
}

.ml-0,
.mx-0 {
    margin-left: 0 !important;
}

.m-1 {
    margin: 0.25rem !important;
}

.mt-1,
.my-1 {
    margin-top: 0.25rem !important;
}

.mr-1,
.mx-1 {
    margin-right: 0.25rem !important;
}

.mb-1,
.my-1 {
    margin-bottom: 0.25rem !important;
}

.ml-1,
.mx-1 {
    margin-left: 0.25rem !important;
}

.m-2 {
    margin: 0.5rem !important;
}

.mt-2,
.my-2 {
    margin-top: 0.5rem !important;
}

.mr-2,
.mx-2 {
    margin-right: 0.5rem !important;
}

.mb-2,
.my-2 {
    margin-bottom: 0.5rem !important;
}

.ml-2,
.mx-2 {
    margin-left: 0.5rem !important;
}

.m-3 {
    margin: 0.75rem !important;
}

.mt-3,
.my-3 {
    margin-top: 0.75rem !important;
}

.mr-3,
.mx-3 {
    margin-right: 0.75rem !important;
}

.mb-3,
.my-3 {
    margin-bottom: 0.75rem !important;
}

.ml-3,
.mx-3 {
    margin-left: 0.75rem !important;
}

.m-4 {
    margin: 1rem !important;
}

.mt-4,
.my-4 {
    margin-top: 1rem !important;
}

.mr-4,
.mx-4 {
    margin-right: 1rem !important;
}

.mb-4,
.my-4 {
    margin-bottom: 1rem !important;
}

.ml-4,
.mx-4 {
    margin-left: 1rem !important;
}

.m-5 {
    margin: 1.25rem !important;
}

.mt-5,
.my-5 {
    margin-top: 1.25rem !important;
}

.mr-5,
.mx-5 {
    margin-right: 1.25rem !important;
}

.mb-5,
.my-5 {
    margin-bottom: 1.25rem !important;
}

.ml-5,
.mx-5 {
    margin-left: 1.25rem !important;
}

.m-6 {
    margin: 1.5rem !important;
}

.mt-6,
.my-6 {
    margin-top: 1.5rem !important;
}

.mr-6,
.mx-6 {
    margin-right: 1.5rem !important;
}

.mb-6,
.my-6 {
    margin-bottom: 1.5rem !important;
}

.ml-6,
.mx-6 {
    margin-left: 1.5rem !important;
}

.m-7 {
    margin: 1.75rem !important;
}

.mt-7,
.my-7 {
    margin-top: 1.75rem !important;
}

.mr-7,
.mx-7 {
    margin-right: 1.75rem !important;
}

.mb-7,
.my-7 {
    margin-bottom: 1.75rem !important;
}

.ml-7,
.mx-7 {
    margin-left: 1.75rem !important;
}

.m-8 {
    margin: 2rem !important;
}

.mt-8,
.my-8 {
    margin-top: 2rem !important;
}

.mr-8,
.mx-8 {
    margin-right: 2rem !important;
}

.mb-8,
.my-8 {
    margin-bottom: 2rem !important;
}

.ml-8,
.mx-8 {
    margin-left: 2rem !important;
}

.m-9 {
    margin: 2.25rem !important;
}

.mt-9,
.my-9 {
    margin-top: 2.25rem !important;
}

.mr-9,
.mx-9 {
    margin-right: 2.25rem !important;
}

.mb-9,
.my-9 {
    margin-bottom: 2.25rem !important;
}

.ml-9,
.mx-9 {
    margin-left: 2.25rem !important;
}

.m-10 {
    margin: 2.5rem !important;
}

.mt-10,
.my-10 {
    margin-top: 2.5rem !important;
}

.mr-10,
.mx-10 {
    margin-right: 2.5rem !important;
}

.mb-10,
.my-10 {
    margin-bottom: 2.5rem !important;
}

.ml-10,
.mx-10 {
    margin-left: 2.5rem !important;
}

.m-11 {
    margin: 2.75rem !important;
}

.mt-11,
.my-11 {
    margin-top: 2.75rem !important;
}

.mr-11,
.mx-11 {
    margin-right: 2.75rem !important;
}

.mb-11,
.my-11 {
    margin-bottom: 2.75rem !important;
}

.ml-11,
.mx-11 {
    margin-left: 2.75rem !important;
}

.m-12 {
    margin: 3rem !important;
}

.mt-12,
.my-12 {
    margin-top: 3rem !important;
}

.mr-12,
.mx-12 {
    margin-right: 3rem !important;
}

.mb-12,
.my-12 {
    margin-bottom: 3rem !important;
}

.ml-12,
.mx-12 {
    margin-left: 3rem !important;
}

.m-13 {
    margin: 3.25rem !important;
}

.mt-13,
.my-13 {
    margin-top: 3.25rem !important;
}

.mr-13,
.mx-13 {
    margin-right: 3.25rem !important;
}

.mb-13,
.my-13 {
    margin-bottom: 3.25rem !important;
}

.ml-13,
.mx-13 {
    margin-left: 3.25rem !important;
}

.m-14 {
    margin: 3.5rem !important;
}

.mt-14,
.my-14 {
    margin-top: 3.5rem !important;
}

.mr-14,
.mx-14 {
    margin-right: 3.5rem !important;
}

.mb-14,
.my-14 {
    margin-bottom: 3.5rem !important;
}

.ml-14,
.mx-14 {
    margin-left: 3.5rem !important;
}

.m-15 {
    margin: 3.75rem !important;
}

.mt-15,
.my-15 {
    margin-top: 3.75rem !important;
}

.mr-15,
.mx-15 {
    margin-right: 3.75rem !important;
}

.mb-15,
.my-15 {
    margin-bottom: 3.75rem !important;
}

.ml-15,
.mx-15 {
    margin-left: 3.75rem !important;
}

.m-16 {
    margin: 4rem !important;
}

.mt-16,
.my-16 {
    margin-top: 4rem !important;
}

.mr-16,
.mx-16 {
    margin-right: 4rem !important;
}

.mb-16,
.my-16 {
    margin-bottom: 4rem !important;
}

.ml-16,
.mx-16 {
    margin-left: 4rem !important;
}

.m-17 {
    margin: 4.25rem !important;
}

.mt-17,
.my-17 {
    margin-top: 4.25rem !important;
}

.mr-17,
.mx-17 {
    margin-right: 4.25rem !important;
}

.mb-17,
.my-17 {
    margin-bottom: 4.25rem !important;
}

.ml-17,
.mx-17 {
    margin-left: 4.25rem !important;
}

.m-18 {
    margin: 4.5rem !important;
}

.mt-18,
.my-18 {
    margin-top: 4.5rem !important;
}

.mr-18,
.mx-18 {
    margin-right: 4.5rem !important;
}

.mb-18,
.my-18 {
    margin-bottom: 4.5rem !important;
}

.ml-18,
.mx-18 {
    margin-left: 4.5rem !important;
}

.m-19 {
    margin: 4.75rem !important;
}

.mt-19,
.my-19 {
    margin-top: 4.75rem !important;
}

.mr-19,
.mx-19 {
    margin-right: 4.75rem !important;
}

.mb-19,
.my-19 {
    margin-bottom: 4.75rem !important;
}

.ml-19,
.mx-19 {
    margin-left: 4.75rem !important;
}

.m-20 {
    margin: 5rem !important;
}

.mt-20,
.my-20 {
    margin-top: 5rem !important;
}

.mr-20,
.mx-20 {
    margin-right: 5rem !important;
}

.mb-20,
.my-20 {
    margin-bottom: 5rem !important;
}

.ml-20,
.mx-20 {
    margin-left: 5rem !important;
}

.m-21 {
    margin: 5.25rem !important;
}

.mt-21,
.my-21 {
    margin-top: 5.25rem !important;
}

.mr-21,
.mx-21 {
    margin-right: 5.25rem !important;
}

.mb-21,
.my-21 {
    margin-bottom: 5.25rem !important;
}

.ml-21,
.mx-21 {
    margin-left: 5.25rem !important;
}

.m-22 {
    margin: 5.5rem !important;
}

.mt-22,
.my-22 {
    margin-top: 5.5rem !important;
}

.mr-22,
.mx-22 {
    margin-right: 5.5rem !important;
}

.mb-22,
.my-22 {
    margin-bottom: 5.5rem !important;
}

.ml-22,
.mx-22 {
    margin-left: 5.5rem !important;
}

.m-23 {
    margin: 5.75rem !important;
}

.mt-23,
.my-23 {
    margin-top: 5.75rem !important;
}

.mr-23,
.mx-23 {
    margin-right: 5.75rem !important;
}

.mb-23,
.my-23 {
    margin-bottom: 5.75rem !important;
}

.ml-23,
.mx-23 {
    margin-left: 5.75rem !important;
}

.m-24 {
    margin: 6rem !important;
}

.mt-24,
.my-24 {
    margin-top: 6rem !important;
}

.mr-24,
.mx-24 {
    margin-right: 6rem !important;
}

.mb-24,
.my-24 {
    margin-bottom: 6rem !important;
}

.ml-24,
.mx-24 {
    margin-left: 6rem !important;
}

.m-25 {
    margin: 6.25rem !important;
}

.mt-25,
.my-25 {
    margin-top: 6.25rem !important;
}

.mr-25,
.mx-25 {
    margin-right: 6.25rem !important;
}

.mb-25,
.my-25 {
    margin-bottom: 6.25rem !important;
}

.ml-25,
.mx-25 {
    margin-left: 6.25rem !important;
}

.m-26 {
    margin: 6.5rem !important;
}

.mt-26,
.my-26 {
    margin-top: 6.5rem !important;
}

.mr-26,
.mx-26 {
    margin-right: 6.5rem !important;
}

.mb-26,
.my-26 {
    margin-bottom: 6.5rem !important;
}

.ml-26,
.mx-26 {
    margin-left: 6.5rem !important;
}

.m-27 {
    margin: 6.75rem !important;
}

.mt-27,
.my-27 {
    margin-top: 6.75rem !important;
}

.mr-27,
.mx-27 {
    margin-right: 6.75rem !important;
}

.mb-27,
.my-27 {
    margin-bottom: 6.75rem !important;
}

.ml-27,
.mx-27 {
    margin-left: 6.75rem !important;
}

.m-28 {
    margin: 7rem !important;
}

.mt-28,
.my-28 {
    margin-top: 7rem !important;
}

.mr-28,
.mx-28 {
    margin-right: 7rem !important;
}

.mb-28,
.my-28 {
    margin-bottom: 7rem !important;
}

.ml-28,
.mx-28 {
    margin-left: 7rem !important;
}

.m-29 {
    margin: 7.25rem !important;
}

.mt-29,
.my-29 {
    margin-top: 7.25rem !important;
}

.mr-29,
.mx-29 {
    margin-right: 7.25rem !important;
}

.mb-29,
.my-29 {
    margin-bottom: 7.25rem !important;
}

.ml-29,
.mx-29 {
    margin-left: 7.25rem !important;
}

.m-30 {
    margin: 7.5rem !important;
}

.mt-30,
.my-30 {
    margin-top: 7.5rem !important;
}

.mr-30,
.mx-30 {
    margin-right: 7.5rem !important;
}

.mb-30,
.my-30 {
    margin-bottom: 7.5rem !important;
}

.ml-30,
.mx-30 {
    margin-left: 7.5rem !important;
}

.m-31 {
    margin: 7.75rem !important;
}

.mt-31,
.my-31 {
    margin-top: 7.75rem !important;
}

.mr-31,
.mx-31 {
    margin-right: 7.75rem !important;
}

.mb-31,
.my-31 {
    margin-bottom: 7.75rem !important;
}

.ml-31,
.mx-31 {
    margin-left: 7.75rem !important;
}

.m-32 {
    margin: 8rem !important;
}

.mt-32,
.my-32 {
    margin-top: 8rem !important;
}

.mr-32,
.mx-32 {
    margin-right: 8rem !important;
}

.mb-32,
.my-32 {
    margin-bottom: 8rem !important;
}

.ml-32,
.mx-32 {
    margin-left: 8rem !important;
}

.m-33 {
    margin: 8.25rem !important;
}

.mt-33,
.my-33 {
    margin-top: 8.25rem !important;
}

.mr-33,
.mx-33 {
    margin-right: 8.25rem !important;
}

.mb-33,
.my-33 {
    margin-bottom: 8.25rem !important;
}

.ml-33,
.mx-33 {
    margin-left: 8.25rem !important;
}

.m-34 {
    margin: 8.5rem !important;
}

.mt-34,
.my-34 {
    margin-top: 8.5rem !important;
}

.mr-34,
.mx-34 {
    margin-right: 8.5rem !important;
}

.mb-34,
.my-34 {
    margin-bottom: 8.5rem !important;
}

.ml-34,
.mx-34 {
    margin-left: 8.5rem !important;
}

.m-35 {
    margin: 8.75rem !important;
}

.mt-35,
.my-35 {
    margin-top: 8.75rem !important;
}

.mr-35,
.mx-35 {
    margin-right: 8.75rem !important;
}

.mb-35,
.my-35 {
    margin-bottom: 8.75rem !important;
}

.ml-35,
.mx-35 {
    margin-left: 8.75rem !important;
}

.m-36 {
    margin: 9rem !important;
}

.mt-36,
.my-36 {
    margin-top: 9rem !important;
}

.mr-36,
.mx-36 {
    margin-right: 9rem !important;
}

.mb-36,
.my-36 {
    margin-bottom: 9rem !important;
}

.ml-36,
.mx-36 {
    margin-left: 9rem !important;
}

.m-37 {
    margin: 9.25rem !important;
}

.mt-37,
.my-37 {
    margin-top: 9.25rem !important;
}

.mr-37,
.mx-37 {
    margin-right: 9.25rem !important;
}

.mb-37,
.my-37 {
    margin-bottom: 9.25rem !important;
}

.ml-37,
.mx-37 {
    margin-left: 9.25rem !important;
}

.m-48 {
    margin: 9.5rem !important;
}

.mt-48,
.my-48 {
    margin-top: 9.5rem !important;
}

.mr-48,
.mx-48 {
    margin-right: 9.5rem !important;
}

.mb-48,
.my-48 {
    margin-bottom: 9.5rem !important;
}

.ml-48,
.mx-48 {
    margin-left: 9.5rem !important;
}

.m-39 {
    margin: 9.75rem !important;
}

.mt-39,
.my-39 {
    margin-top: 9.75rem !important;
}

.mr-39,
.mx-39 {
    margin-right: 9.75rem !important;
}

.mb-39,
.my-39 {
    margin-bottom: 9.75rem !important;
}

.ml-39,
.mx-39 {
    margin-left: 9.75rem !important;
}

.m-40 {
    margin: 10rem !important;
}

.mt-40,
.my-40 {
    margin-top: 10rem !important;
}

.mr-40,
.mx-40 {
    margin-right: 10rem !important;
}

.mb-40,
.my-40 {
    margin-bottom: 10rem !important;
}

.ml-40,
.mx-40 {
    margin-left: 10rem !important;
}

.p-0 {
    padding: 0 !important;
}

.pt-0,
.py-0 {
    padding-top: 0 !important;
}

.pr-0,
.px-0 {
    padding-right: 0 !important;
}

.pb-0,
.py-0 {
    padding-bottom: 0 !important;
}

.pl-0,
.px-0 {
    padding-left: 0 !important;
}

.p-1 {
    padding: 0.25rem !important;
}

.pt-1,
.py-1 {
    padding-top: 0.25rem !important;
}

.pr-1,
.px-1 {
    padding-right: 0.25rem !important;
}

.pb-1,
.py-1 {
    padding-bottom: 0.25rem !important;
}

.pl-1,
.px-1 {
    padding-left: 0.25rem !important;
}

.p-2 {
    padding: 0.5rem !important;
}

.pt-2,
.py-2 {
    padding-top: 0.5rem !important;
}

.pr-2,
.px-2 {
    padding-right: 0.5rem !important;
}

.pb-2,
.py-2 {
    padding-bottom: 0.5rem !important;
}

.pl-2,
.px-2 {
    padding-left: 0.5rem !important;
}

.p-3 {
    padding: 0.75rem !important;
}

.pt-3,
.py-3 {
    padding-top: 0.75rem !important;
}

.pr-3,
.px-3 {
    padding-right: 0.75rem !important;
}

.pb-3,
.py-3 {
    padding-bottom: 0.75rem !important;
}

.pl-3,
.px-3 {
    padding-left: 0.75rem !important;
}

.p-4 {
    padding: 1rem !important;
}

.pt-4,
.py-4 {
    padding-top: 1rem !important;
}

.pr-4,
.px-4 {
    padding-right: 1rem !important;
}

.pb-4,
.py-4 {
    padding-bottom: 1rem !important;
}

.pl-4,
.px-4 {
    padding-left: 1rem !important;
}

.p-5 {
    padding: 1.25rem !important;
}

.pt-5,
.py-5 {
    padding-top: 1.25rem !important;
}

.pr-5,
.px-5 {
    padding-right: 1.25rem !important;
}

.pb-5,
.py-5 {
    padding-bottom: 1.25rem !important;
}

.pl-5,
.px-5 {
    padding-left: 1.25rem !important;
}

.p-6 {
    padding: 1.5rem !important;
}

.pt-6,
.py-6 {
    padding-top: 1.5rem !important;
}

.pr-6,
.px-6 {
    padding-right: 1.5rem !important;
}

.pb-6,
.py-6 {
    padding-bottom: 1.5rem !important;
}

.pl-6,
.px-6 {
    padding-left: 1.5rem !important;
}

.p-7 {
    padding: 1.75rem !important;
}

.pt-7,
.py-7 {
    padding-top: 1.75rem !important;
}

.pr-7,
.px-7 {
    padding-right: 1.75rem !important;
}

.pb-7,
.py-7 {
    padding-bottom: 1.75rem !important;
}

.pl-7,
.px-7 {
    padding-left: 1.75rem !important;
}

.p-8 {
    padding: 2rem !important;
}

.pt-8,
.py-8 {
    padding-top: 2rem !important;
}

.pr-8,
.px-8 {
    padding-right: 2rem !important;
}

.pb-8,
.py-8 {
    padding-bottom: 2rem !important;
}

.pl-8,
.px-8 {
    padding-left: 2rem !important;
}

.p-9 {
    padding: 2.25rem !important;
}

.pt-9,
.py-9 {
    padding-top: 2.25rem !important;
}

.pr-9,
.px-9 {
    padding-right: 2.25rem !important;
}

.pb-9,
.py-9 {
    padding-bottom: 2.25rem !important;
}

.pl-9,
.px-9 {
    padding-left: 2.25rem !important;
}

.p-10 {
    padding: 2.5rem !important;
}

.pt-10,
.py-10 {
    padding-top: 2.5rem !important;
}

.pr-10,
.px-10 {
    padding-right: 2.5rem !important;
}

.pb-10,
.py-10 {
    padding-bottom: 2.5rem !important;
}

.pl-10,
.px-10 {
    padding-left: 2.5rem !important;
}

.p-11 {
    padding: 2.75rem !important;
}

.pt-11,
.py-11 {
    padding-top: 2.75rem !important;
}

.pr-11,
.px-11 {
    padding-right: 2.75rem !important;
}

.pb-11,
.py-11 {
    padding-bottom: 2.75rem !important;
}

.pl-11,
.px-11 {
    padding-left: 2.75rem !important;
}

.p-12 {
    padding: 3rem !important;
}

.pt-12,
.py-12 {
    padding-top: 3rem !important;
}

.pr-12,
.px-12 {
    padding-right: 3rem !important;
}

.pb-12,
.py-12 {
    padding-bottom: 3rem !important;
}

.pl-12,
.px-12 {
    padding-left: 3rem !important;
}

.p-13 {
    padding: 3.25rem !important;
}

.pt-13,
.py-13 {
    padding-top: 3.25rem !important;
}

.pr-13,
.px-13 {
    padding-right: 3.25rem !important;
}

.pb-13,
.py-13 {
    padding-bottom: 3.25rem !important;
}

.pl-13,
.px-13 {
    padding-left: 3.25rem !important;
}

.p-14 {
    padding: 3.5rem !important;
}

.pt-14,
.py-14 {
    padding-top: 3.5rem !important;
}

.pr-14,
.px-14 {
    padding-right: 3.5rem !important;
}

.pb-14,
.py-14 {
    padding-bottom: 3.5rem !important;
}

.pl-14,
.px-14 {
    padding-left: 3.5rem !important;
}

.p-15 {
    padding: 3.75rem !important;
}

.pt-15,
.py-15 {
    padding-top: 3.75rem !important;
}

.pr-15,
.px-15 {
    padding-right: 3.75rem !important;
}

.pb-15,
.py-15 {
    padding-bottom: 3.75rem !important;
}

.pl-15,
.px-15 {
    padding-left: 3.75rem !important;
}

.p-16 {
    padding: 4rem !important;
}

.pt-16,
.py-16 {
    padding-top: 4rem !important;
}

.pr-16,
.px-16 {
    padding-right: 4rem !important;
}

.pb-16,
.py-16 {
    padding-bottom: 4rem !important;
}

.pl-16,
.px-16 {
    padding-left: 4rem !important;
}

.p-17 {
    padding: 4.25rem !important;
}

.pt-17,
.py-17 {
    padding-top: 4.25rem !important;
}

.pr-17,
.px-17 {
    padding-right: 4.25rem !important;
}

.pb-17,
.py-17 {
    padding-bottom: 4.25rem !important;
}

.pl-17,
.px-17 {
    padding-left: 4.25rem !important;
}

.p-18 {
    padding: 4.5rem !important;
}

.pt-18,
.py-18 {
    padding-top: 4.5rem !important;
}

.pr-18,
.px-18 {
    padding-right: 4.5rem !important;
}

.pb-18,
.py-18 {
    padding-bottom: 4.5rem !important;
}

.pl-18,
.px-18 {
    padding-left: 4.5rem !important;
}

.p-19 {
    padding: 4.75rem !important;
}

.pt-19,
.py-19 {
    padding-top: 4.75rem !important;
}

.pr-19,
.px-19 {
    padding-right: 4.75rem !important;
}

.pb-19,
.py-19 {
    padding-bottom: 4.75rem !important;
}

.pl-19,
.px-19 {
    padding-left: 4.75rem !important;
}

.p-20 {
    padding: 5rem !important;
}

.pt-20,
.py-20 {
    padding-top: 5rem !important;
}

.pr-20,
.px-20 {
    padding-right: 5rem !important;
}

.pb-20,
.py-20 {
    padding-bottom: 5rem !important;
}

.pl-20,
.px-20 {
    padding-left: 5rem !important;
}

.p-21 {
    padding: 5.25rem !important;
}

.pt-21,
.py-21 {
    padding-top: 5.25rem !important;
}

.pr-21,
.px-21 {
    padding-right: 5.25rem !important;
}

.pb-21,
.py-21 {
    padding-bottom: 5.25rem !important;
}

.pl-21,
.px-21 {
    padding-left: 5.25rem !important;
}

.p-22 {
    padding: 5.5rem !important;
}

.pt-22,
.py-22 {
    padding-top: 5.5rem !important;
}

.pr-22,
.px-22 {
    padding-right: 5.5rem !important;
}

.pb-22,
.py-22 {
    padding-bottom: 5.5rem !important;
}

.pl-22,
.px-22 {
    padding-left: 5.5rem !important;
}

.p-23 {
    padding: 5.75rem !important;
}

.pt-23,
.py-23 {
    padding-top: 5.75rem !important;
}

.pr-23,
.px-23 {
    padding-right: 5.75rem !important;
}

.pb-23,
.py-23 {
    padding-bottom: 5.75rem !important;
}

.pl-23,
.px-23 {
    padding-left: 5.75rem !important;
}

.p-24 {
    padding: 6rem !important;
}

.pt-24,
.py-24 {
    padding-top: 6rem !important;
}

.pr-24,
.px-24 {
    padding-right: 6rem !important;
}

.pb-24,
.py-24 {
    padding-bottom: 6rem !important;
}

.pl-24,
.px-24 {
    padding-left: 6rem !important;
}

.p-25 {
    padding: 6.25rem !important;
}

.pt-25,
.py-25 {
    padding-top: 6.25rem !important;
}

.pr-25,
.px-25 {
    padding-right: 6.25rem !important;
}

.pb-25,
.py-25 {
    padding-bottom: 6.25rem !important;
}

.pl-25,
.px-25 {
    padding-left: 6.25rem !important;
}

.p-26 {
    padding: 6.5rem !important;
}

.pt-26,
.py-26 {
    padding-top: 6.5rem !important;
}

.pr-26,
.px-26 {
    padding-right: 6.5rem !important;
}

.pb-26,
.py-26 {
    padding-bottom: 6.5rem !important;
}

.pl-26,
.px-26 {
    padding-left: 6.5rem !important;
}

.p-27 {
    padding: 6.75rem !important;
}

.pt-27,
.py-27 {
    padding-top: 6.75rem !important;
}

.pr-27,
.px-27 {
    padding-right: 6.75rem !important;
}

.pb-27,
.py-27 {
    padding-bottom: 6.75rem !important;
}

.pl-27,
.px-27 {
    padding-left: 6.75rem !important;
}

.p-28 {
    padding: 7rem !important;
}

.pt-28,
.py-28 {
    padding-top: 7rem !important;
}

.pr-28,
.px-28 {
    padding-right: 7rem !important;
}

.pb-28,
.py-28 {
    padding-bottom: 7rem !important;
}

.pl-28,
.px-28 {
    padding-left: 7rem !important;
}

.p-29 {
    padding: 7.25rem !important;
}

.pt-29,
.py-29 {
    padding-top: 7.25rem !important;
}

.pr-29,
.px-29 {
    padding-right: 7.25rem !important;
}

.pb-29,
.py-29 {
    padding-bottom: 7.25rem !important;
}

.pl-29,
.px-29 {
    padding-left: 7.25rem !important;
}

.p-30 {
    padding: 7.5rem !important;
}

.pt-30,
.py-30 {
    padding-top: 7.5rem !important;
}

.pr-30,
.px-30 {
    padding-right: 7.5rem !important;
}

.pb-30,
.py-30 {
    padding-bottom: 7.5rem !important;
}

.pl-30,
.px-30 {
    padding-left: 7.5rem !important;
}

.p-31 {
    padding: 7.75rem !important;
}

.pt-31,
.py-31 {
    padding-top: 7.75rem !important;
}

.pr-31,
.px-31 {
    padding-right: 7.75rem !important;
}

.pb-31,
.py-31 {
    padding-bottom: 7.75rem !important;
}

.pl-31,
.px-31 {
    padding-left: 7.75rem !important;
}

.p-32 {
    padding: 8rem !important;
}

.pt-32,
.py-32 {
    padding-top: 8rem !important;
}

.pr-32,
.px-32 {
    padding-right: 8rem !important;
}

.pb-32,
.py-32 {
    padding-bottom: 8rem !important;
}

.pl-32,
.px-32 {
    padding-left: 8rem !important;
}

.p-33 {
    padding: 8.25rem !important;
}

.pt-33,
.py-33 {
    padding-top: 8.25rem !important;
}

.pr-33,
.px-33 {
    padding-right: 8.25rem !important;
}

.pb-33,
.py-33 {
    padding-bottom: 8.25rem !important;
}

.pl-33,
.px-33 {
    padding-left: 8.25rem !important;
}

.p-34 {
    padding: 8.5rem !important;
}

.pt-34,
.py-34 {
    padding-top: 8.5rem !important;
}

.pr-34,
.px-34 {
    padding-right: 8.5rem !important;
}

.pb-34,
.py-34 {
    padding-bottom: 8.5rem !important;
}

.pl-34,
.px-34 {
    padding-left: 8.5rem !important;
}

.p-35 {
    padding: 8.75rem !important;
}

.pt-35,
.py-35 {
    padding-top: 8.75rem !important;
}

.pr-35,
.px-35 {
    padding-right: 8.75rem !important;
}

.pb-35,
.py-35 {
    padding-bottom: 8.75rem !important;
}

.pl-35,
.px-35 {
    padding-left: 8.75rem !important;
}

.p-36 {
    padding: 9rem !important;
}

.pt-36,
.py-36 {
    padding-top: 9rem !important;
}

.pr-36,
.px-36 {
    padding-right: 9rem !important;
}

.pb-36,
.py-36 {
    padding-bottom: 9rem !important;
}

.pl-36,
.px-36 {
    padding-left: 9rem !important;
}

.p-37 {
    padding: 9.25rem !important;
}

.pt-37,
.py-37 {
    padding-top: 9.25rem !important;
}

.pr-37,
.px-37 {
    padding-right: 9.25rem !important;
}

.pb-37,
.py-37 {
    padding-bottom: 9.25rem !important;
}

.pl-37,
.px-37 {
    padding-left: 9.25rem !important;
}

.p-48 {
    padding: 9.5rem !important;
}

.pt-48,
.py-48 {
    padding-top: 9.5rem !important;
}

.pr-48,
.px-48 {
    padding-right: 9.5rem !important;
}

.pb-48,
.py-48 {
    padding-bottom: 9.5rem !important;
}

.pl-48,
.px-48 {
    padding-left: 9.5rem !important;
}

.p-39 {
    padding: 9.75rem !important;
}

.pt-39,
.py-39 {
    padding-top: 9.75rem !important;
}

.pr-39,
.px-39 {
    padding-right: 9.75rem !important;
}

.pb-39,
.py-39 {
    padding-bottom: 9.75rem !important;
}

.pl-39,
.px-39 {
    padding-left: 9.75rem !important;
}

.p-40 {
    padding: 10rem !important;
}


@media (min-width: 1441px) {
    .container {
        max-width: 1390px;
    }
}

#commission>ul>li:nth-child(1) {
    width: 25%;
}

#commission>ul>li:nth-child(2) {
    width: 50%;
    padding-right: 1rem;
}

#commission>ul>li:nth-child(1)>ul>li {
    width: 100%;
}

.list-sub-menu {
    height: 405px;
    overflow-y: scroll;
    margin-top: 10px;
    padding-right: 5px;
}

.list-sub-menu>a {
    position: relative;
    padding: 0.5em 3rem !important;
    font-size: 18px !important;
    color: #675438 !important;
    width: 100% !important;
    display: flex !important;
    align-items: center;
}

.list-sub-menu>a:before {
    content: "";
    background: url(../../portals/1/images/theme-2025/icon-megamenu.svg);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position-x: center;
    position: absolute;
    width: 30px;
    height: 30px;
    display: flex;
    left: 10px;
    top: 8px;
}

.list-sub-menu>a:hover:after {
    width: 0 !important;
    height: 0 !important;
}

.ist-sub-menu>a:hover {
    background: #e8e1d5;
    border-radius: 10px;
}

.list-sub-menu .new-icon {
    width: fit-content !important;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}

.new-icon img {
    width: 25px;
    height: 25px;
    object-fit: cover !important;
    padding: 0 !important;
}

.list-sub-menu a:hover:after {
    background-image: none !important;
}

.search-nav a:hover:after {
    background-image: none !important;
    width: 0 !important;
}

.list-1,
.list-2,
.list-3 {
    display: none;
}

#banner-mega a:hover {
    background: 0;
    border: 0;
}

#banner-mega img {
    width: 100%;
    height: 220px;
    object-fit: contain;
}

/* start css search */
.search-box,
.search-box-mb {
    position: relative;
    width: 90px;
    display: flex;
    align-items: center;
}

.search-box-mb,
.banner-mb {
    display: none;
}

.search-box-mb .icon-search i {
    font-weight: 100;
}

.search-box {
    justify-content: flex-end;
    left: -15px;
}

.search-box input {
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    border: 0;
    padding: 8px 40px 8px 8px;
    border-radius: 10px;
    width: 200px;
}

.tiltle-search {
    color: #A5875E;
    font-size: 20px;
}

.icon-search {
    background: linear-gradient(180deg, #c7a87e, #ab8e65);
    padding: 9px 15px;
    border-radius: 10px;
    color: #fff;
    margin-left: 10px;
}

.icon-search:hover {
    color: #fff;
    background: linear-gradient(180deg, #bea077, #947b57);
}

.icon-search i {
    font-weight: 400;
}

#popup_search.popup-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    justify-content: center;
    align-items: center;
    z-index: 999;
}

#popup_search .popup-container {
    background: #fff;
    padding: 20px 40px;
    border-radius: 8px;
    width: 85%;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    position: relative;
}

#popup_search .close-btn {
    position: absolute;
    top: 0;
    right: 15px;
    font-size: 30px;
    cursor: pointer;
}

.close-btn svg g [fill] {
    fill: #A5875E;
}

/* Form styling */
#popup_search .popup-content h2 {
    font-size: 30px;
    margin-bottom: 10px;
}

#popup_search .search-options label {
    display: flex;
    margin: 5px 0;
    font-size: 18px;
    font-family: 'quarklight' !important;
    font-weight: 400;
    color: #333;
}

.form-group-search {
    display: grid;
    grid-template-columns: 90% 10%;
    margin-bottom: 1.5rem;
    position: relative;
}

.form-group-search>i {
    position: absolute;
    color: #abacad;
    font-size: 17px;
    font-weight: 300;
    left: 10px;
    top: 46%;
    transform: translateY(-50%);
}

.form-group-search .form-search {
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    border: 0;
    margin-bottom: 0;
    padding: 8px 8px 8px 35px;
    height: 40px;
    border-radius: 10px;
    font-size: 18px;
    width: 99%;
}

.form-group-search .btn-search {
    margin-top: 0;
    font-size: 20px;
    background: #c8ab83;
    color: #574429;
    text-align: center;
    align-content: center;
    border-radius: 10px;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    width: 100%;
    height: fit-content;
}

ul.tab-menu-search {
    margin: 0;
    padding: 0;
    float: left;
    list-style: none;
    height: 32px;
    border-bottom: 2px solid #e1e1e1;
    width: 100%;
}

ul.tab-menu-search li {
    float: left;
    margin: 0;
    cursor: pointer;
    padding: 0px 21px;
    height: 31px;
    line-height: 31px;
    border-bottom: 2px solid transparent;
    color: #ccc;
    overflow: hidden;
    position: relative;
    bottom: -1px;
}

ul.tab-menu-search li:hover {
    color: #574429;
    border-bottom: 2px solid #80725d;
}

ul.tab-menu-search li.active {
    background-color: #fff;
    color: #574429;
    border-bottom: 2px solid #80725d;
    display: block;
}

.tab-menu-search li svg {
    width: 19px;
    height: 19px;
    vertical-align: sub;
}

.tab-menu-search li svg [fill] {
    fill: #ccc;
}

.tab-menu-search li.active svg [fill],
.tab-menu-search li:hover svg [fill] {
    fill: #574429;
}

.tab-menu-search li[rel="by-link"] svg [stroke] {
    stroke: #ccc;
}

.tab-menu-search li[rel="by-link"].active svg [stroke],
.tab-menu-search li[rel="by-link"]:hover svg [stroke] {
    stroke: #574429;
}

.tab_container {
    border-top: none;
    clear: both;
    float: left;
    width: 100%;
    background: #fff;
    overflow: auto;
}

.tab_content_search {
    padding: 15px 0;
    display: none;
}

.tab_mb {
    display: none;
}

.content-search {
    height: 385px;
    overflow-y: auto;
    margin-top: 10px;
}

#by-activity .content-search {
    height: 445px;
}

.tools-box {
    width: 30%;
    padding: 0 10px;
}

.detail-s-box {
    width: 70%;
}

.show-all-detail {
    color: #5E5E5E;
    font-size: 18px;
}

.group-detail {
    display: flex;
    width: 99%;
    padding: 10px;
    background: #ffffff;
    margin-bottom: 10px;
    border-radius: 10px;
}

.group-detail:hover {
    background: #EDE5DA;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
    color: #574429;
}

.group-detail-1 {
    display: flex;
    flex-direction: column;
    padding-right: 10px;
}

.date-show {
    font-family: 'quarklight' !important;
    font-size: 14px;
}

.date-show svg {
    width: 15px;
    height: 19px;
}

.date-show svg [fill] {
    fill: #000000;
}

.detail-news-search {
    font-family: 'quarklight' !important;
    border-left: 2px solid #c1c1c1;
    padding-left: 10px;
    margin-top: 5px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    /* number of lines to show */
    line-clamp: 2;
    -webkit-box-orient: vertical;
}

.detail-news-box {
    display: flex;
    flex-direction: column;
    font-family: 'quarklight' !important;
    border-left: 2px solid #c1c1c1;
    padding-left: 10px;
    margin-top: 5px;
}

.group-detail-2 {
    width: 40%;
    height: 120px;
}

.group-detail-2 img {
    border-radius: 10px;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#by-activity .group-detail-2 {
    width: 25%;
    height: 145px;
}

#by-activity .group-detail-1 {
    width: 100%;
}

.radio-inline {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    margin: 1rem 0;
}

.radio-inline-search {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    padding: 0 !important;
    margin: 0;
}

.radio-inline-search .radio {
    padding-left: 0;
}

.radio {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    position: relative;
    text-align: left;
    cursor: pointer;
    font-size: 1rem;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
    margin: 0;
}

.radio-inline .radio {
    margin-bottom: 1rem;
    margin-right: 2rem;
}

.radio>input {
    position: absolute;
    z-index: -1;
    opacity: 0;
}

input[type=radio],
input[type=checkbox] {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0;
}

.radio-inline .radio span {
    margin-right: 0.75rem;
}

.radio>span {
    background-color: #EBEDF3;
    border: 1px solid transparent;
}

.radio>span {
    height: 18px;
    width: 18px;
}

.radio>input:checked~span {
    background-color: #c8ab83;
}

.radio>span {
    background-color: none;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    border-radius: 50%;
}

.radio>span:after {
    width: 5px;
    height: 10px;
}

.radio>span:after {
    content: "";
    border-color: transparent;
    border-style: solid;
    border-width: 0 2px 2px 0 !important;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    margin-top: -2px;
}

.radio>input:checked~span:after {
    border-color: #574429;
}

.radio>input:checked~span {
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
    background-color: none;
}

.radio-inline .radio span {
    margin-right: 0.75rem;
}

.form-text {
    color: #5E5E5E;
    margin-bottom: 5px;
    font-size: 18px;
}

.form-search {
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    border: 0;
    margin-bottom: 0;
    padding: 8px;
    height: 35px;
    border-radius: 10px;
    font-size: 16px;
    text-align: left;
    width: 100%;
    font-family: 'quarklight' !important;
}

.form-search:hover,
.form-search:active,
.form-search:focus {
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}

.btn-search {
    margin-top: 0;
    font-size: 20px;
    background: #c8ab83;
    color: #574429;
    text-align: center;
    align-content: center;
    border-radius: 10px;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
    padding: 5px;
    width: 40%;
    height: 35px;
}

.btn-search:hover {
    color: #574429;
    background: #b49a76;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
}

.btn-light-search {
    margin-top: 0;
    font-size: 20px;
    background: #EDE5DA;
    color: #574429;
    text-align: center;
    align-content: center;
    border-radius: 10px;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
    width: 40%;
}

.btn-light-search:hover {
    background: #ddd5c9;
    color: #574429;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
}

.tools-box .form-group {
    padding: 7px 0;
    margin-bottom: 5px;
}

.svg-icon-tool {
    background: #ede5da;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    text-align: center;
    align-content: center;
    margin-right: 10px;
}

.svg-icon-tool svg {
    vertical-align: text-bottom;
}

.detail-tools {
    line-height: 18px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 85%;
}

.grid-box-3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    padding: 5px 10px 5px 5px;
    gap: 15px;
}

.card-grid {
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    background: #fff;
    border-radius: 10px 50px 10px 10px;
    padding: 10px;
    height: fit-content;
    position: relative;
}

.card-grid:hover {
    background: #EDE5DA;
}

.btn-arrow-next {
    position: absolute;
    right: 0;
    top: 0;
    background: #EDE5DA;
    border-radius: 50%;
    width: 45px;
    height: 45px;
    text-align: center;
    align-content: center;
}

.btn-arrow-next svg {
    width: 35px;
    height: 35px;
}

.btn-arrow-next svg [stroke] {
    stroke: #574429;
}

.card-grid:hover .btn-arrow-next {
    background: #574429;
}

.card-grid:hover .btn-arrow-next svg [stroke] {
    stroke: #EDE5DA;
}

.tool-icon {
    background: #EDE5DA;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    text-align: center;
}

.card-grid:hover .tool-icon {
    background: #c8ab83;
}

.tool-icon svg {
    transform: scale(0.8);
}

.head-title-news {
    color: #000;
    font-size: 18px;
    line-height: 18px;
}

.card-grid:hover .head-title-news {
    color: #574429;
}

.photo-news {
    margin-top: 10px;
    width: 100%;
    height: 160px;
}

.photo-news img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
}

.card-link-grid {
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    background: #fff;
    border-radius: 10px;
    padding: 10px;
    width: 100%;
    height: fit-content;
    position: relative;
}

.card-link-grid img {
    width: 100%;
    height: 100px;
    object-fit: cover;
}

.card-link-grid:hover .hover-next {
    display: flex;
}

.hover-next {
    position: absolute;
    top: 0;
    left: 0;
    background: #c8ab8394;
    border-radius: 10px;
    display: none;
    width: 100%;
    height: 120px;
}

.hover-next .btn-arrow-next {
    background: #574429;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.hover-next .btn-arrow-next svg [stroke] {
    stroke: #ffffff;
}

.module {
    z-index: 10;
    position: relative;
}

@media screen and (min-width: 1600px) {
    #popup_search .popup-container {
        width: 65%;
    }
}

@media screen and (max-width: 1600px) {
    .footer-senate{
        background-position: center calc(100% + -250px), center bottom -90px;
    }
    .card-footer{
        top: -25px;
        margin-bottom: 35px;
    }
}

@media only screen and (max-width: 1200px){
    .container {
        max-width: 1000px;
    }

    .banner-pc{
        height: 700px;
        object-fit: cover;
    }

    .footer-senate{
        margin-top: -95px;
        background-position: center calc(100% + -280px), center bottom -90px;
    }

    .card-footer {
        top: 0;
    }

    .policy-text, .policy-text a{
        font-size: 15px;
    }
}


@media only screen and (max-width: 992px){
    .container {
        max-width: 900px !important;
    }

    .menu-container{
        padding-left: 0;
    }

    #bg-topcontent{
        margin-top: -20px;
    }

    #bg-col-5-4 .row {
        margin: 0;
    }
}

@media only screen and (max-width: 768px){
    #bg-topcontent{
        margin-top: -100px;
    }
}

@media only screen and (max-width: 582px){
    .btn-dropdown {
        font-size: 15px;
    } 

    .banner-mb{
        height: 350px;
        object-fit: cover;
    }

    .btn-color-tool img {
        width: 30px;
        height: 30px;
        object-fit: cover;
    }

    .btn-font-tool img {
        width: 30px;
        height: 30px;
        object-fit: cover;
    }
}

@media screen and (max-width: 480px) {
    .tab-menu-search {
        display: none;
    }

    .tab_mb {
        background-color: #ccc;
        color: #fff;
        border-top: 1px solid #333;
        margin: 0;
        padding: 5px 20px;
        display: block;
        cursor: pointer;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

    .d_active {
        background-color: #666;
        color: #fff;
    }
}
/* end css search */

header.panel-heading{
        position: relative;
      width: 100%;
}

header.panel-heading h3 {
    font-size: 20px;
}

.header-page{
    height: 500px !importants;
}

.header-tt{
    padding: 0 2rem !important;
    font-size: 2.5rem !important;
    line-height: 45px;
    top: 50%;
    bottom: 0 !important;
}

.inner-header-bt{
    background-size: 113% 100% !important;
}

@media screen and (max-width: 1480px) {
    .inner-header-bt {
        height: 280px;
    }

    .bg-header-top{
        background-size: cover;
    }
}

@media screen and (max-width: 1100px) {
    .bg-header-top {
        background-size: cover !important;
    }

    .header-tt {
        font-size: 2rem !important;
        line-height: 35px;
        top: 45%;
        bottom: 0 !important;
    }

    .header-page img{
        object-fit: cover !important;
        object-position: center 10px !important;
    }
}

@media screen and (max-width: 768px) {
    .inner-header-bt {
        bottom: -10px;
    }

    .inner-header-bt>p {
        line-height: 85px;
        font-size: 50px !important;
    }

    .bg-header-top{
        height: 415px !important;
    }

    .header-tt {
        font-size: 32px !important;
        top: 35%;
        bottom: 0 !important;
        line-height: 30px;
    }
}

@media screen and (max-width: 580px) {
    .inner-header-bt>p {
        line-height: 30px;
        font-size: 35px !important;
        top: 0 !important;
    }
}

@media screen and (max-width: 480px) {
.bg-header-top {
    background-size: cover !important;
    height: 310px !important;
}

.inner-header-bt {
    height: 90px !important;
    bottom: -5px;
}

.inner-header-bt>p {
    line-height: 30px;
    font-size: 35px !important;
    top: 0 !important;
}

.header-tt {
    font-size: 25px !important;
    top: 40%;
    bottom: 0 !important;
    line-height: 22px;
}
}

@media screen and (max-width: 1500px){
    .bg-header-top {
        background-size: cover !important;
        background-position: center bottom 5px !important;
        }

    .menu-container {
        padding-left: 0;
    }

    .menu>.menu-item>a{
                padding: 0 15px !important;
        }
}

@media screen and (max-width: 992px){
    #column-box {
        flex-direction: column;
    }

    #column-box .col-md-3, #column-box .col-md-9{
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }
}