:root { --bg-primary: #0c1254; --color-page: #1B4932; --color-primary: #1B4932; --color-paginate: #1B4932; --font-primary: 'Quicksand'; --content-width: 1366px; --color-bortop: #ebebeb; --color-sale: #F6F6F6; --width-page-content: 1300px; --width-box-content: 1018px; --w-page-login: 600px; --width-box-footer: 946px; --content-width-other: 1085px; --content-width-cart: 800px; --content-width-danhgia: 1055px; }
.content-main img, .product-detail-content-item img { height: auto !important; }
.overflow-hidden { overflow: hidden; }
* { box-sizing: border-box; }
body { font-family: var(--font-primary); font-size: 14px; margin: 0; overflow-x: hidden; }
img { max-width: 100%; display: block; }
a { text-decoration: none !important; }
p, h1, h2, h3, h4 { margin: 0; }
ul, ol { list-style-type: none; padding: 0; margin: 0; }
.css_define ul, .css_define ol { list-style-type: inherit; margin-left: 20px; }
[type='checkbox'], [type='radio'] { background-color: #ebebeb !important; }
.alert { z-index: 999; }
.css-define { font-family: var(--font-primary); line-height: 1.7; }
.css-define ul, .css-define ol { list-style: unset; margin: unset; padding: unset; padding-left: 30px; margin-bottom: 10px; }
.css-define p { margin-bottom: 10px; }
.css-define img { margin-bottom: 10px; }
.bg-fixed { background: #47775C !important; }
.bg-contact-menu { background: #47775C !important; }
.bor-50 { border-radius: 50%; }
.page-over { overflow: hidden; }
.content-css { line-height: 1.6; font-size: 16px; }
.content-css p, .content-css h1, .content-css h2, .content-css h3 { margin-bottom: 10px; }
.content-css img { margin-bottom: 10px; }
.content-css ul { list-style-type: initial; }
.content-detail-css { line-height: 1.6; font-size: 14px; }
.content-detail-css ul { list-style-type: initial; padding-left: 1.5rem; }
.content-home-css ul { padding-left: 1rem; }

/* body{ transition:all ease 0.3s ; -webkit-transition:all ease 0.3s ; -moz-transition:all ease 0.3s ; -ms-transition:all ease 0.3s ; -o-transition:all ease 0.3s ; }
.body-menu-mobile{ margin-left: 300px;} */
.main_page_detail #slider { padding-bottom: 0 !important; }
.limit-2 { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; /* number of lines to show */ line-clamp: 2; -webkit-box-orient: vertical; }
.scroll-css { padding-right: 1rem; }
.scroll-css::-webkit-scrollbar { width: 5px; height: 5px; background-color: #ebebeb; /* or add it to the track */ }
.btn-like-product-active svg, .btn-like-product svg:hover { fill: #999; }
.btn-like-product-active svg path, .btn-like-product svg:hover path { stroke: #1B4932 !important; }

/* Add a thumb */
.scroll-css::-webkit-scrollbar-thumb { background: #999; }
input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Firefox */
input[type=number] { -moz-appearance: textfield; }
.eye-btn svg:nth-child(1) { display: block; }
.eye-btn svg:nth-child(2) { display: none; }
.eye-active svg:nth-child(1) { display: none; }
.eye-active svg:nth-child(2) { display: block; }
.arrow-up { width: 0; height: 0; border-left: 4px solid transparent; border-right: 5px solid transparent; border-bottom: 5px solid white; position: absolute; top: -5px; left: 50%; }
.header-scroll { opacity: 0; }
.swiper-hidden { opacity: 0; }
.content-page-layout { max-width: var(--width-page-content); margin: auto; position: relative; z-index: 99; }
.content-box-layout { max-width: var(--width-box-content); margin: auto; }
.content-layout { max-width: var(--content-width); margin: auto; }
.content-layout-other { max-width: var(--content-width-other); margin: auto; }
.content-layout-small { max-width: var(--width-box-footer); margin: auto; }
.content-layout-cart { max-width: var(--content-width-cart); margin: auto; }
.content-layout-danhgia { max-width: var(--content-width-danhgia); margin: auto; }
.content-layout-login { max-width: var(--w-page-login); margin: auto; }
.css-upload-file { position: absolute; top: 0; left: 0; width: 100%; height: 100%; cursor: pointer; opacity: 0; }
.login-form-alert { margin-top: 5px; display: block; font-size: 12px; color: red; font-style: italic; }
.login-form-alert-lg { display: block; padding: 15px 10px; margin-bottom: 20px; background: rgb(195 70 70 / 20%); border-radius: 3px; color: rgb(195 70 70); }
.login-form-alert-top { background: #ffff; padding: 1rem; border-radius: 4px; margin-bottom: 1rem; font-size: 15px; font-weight: 600; }
.text-split { overflow: hidden; text-overflow: ellipsis; white-space: normal; -webkit-box-orient: vertical; display: -webkit-box; -webkit-line-clamp: 3; }
.text-split-2{ overflow: hidden; text-overflow: ellipsis; white-space: normal; -webkit-box-orient: vertical; display: -webkit-box; -webkit-line-clamp: 2; }
.shadow-custom { box-shadow: 4px 4px 40px rgba(0, 0, 0, 0.05); }
.swiper-slide-active .text-active { color: #1266da }
.swiper-slide .text-active:before { opacity: 0; transition: 0.3s }
.swiper-slide-active .text-active:before { opacity: 1; }
.item-bv.active:before { background: #c70101 }
.item-bv.active:after { opacity: 1; }
.item-bv:last-child .line { display: none }
.content-bv, .group-img { display: none }
.content-bv.active, .group-img.active { display: block }

/*=== dev pagination ===*/
.dev-paginator { margin-top: 3rem; }
.dev-paginator .pagination { justify-content: center; display: flex; gap: 5px; }
.dev-paginator .page-item { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: #ebebeb; font-size: 18px; }
.dev-paginator .page-item span { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.dev-paginator .page-item.active .page-link { z-index: 1; color: #fff; background-color: var(--color-paginate); border-color: var(--color-paginate); }
.dev-paginator .page-link { color: #333; display: flex; width: 100%; height: 100%; justify-content: center; align-items: center; }
.swal2-container { z-index: 99999999999993; }
.fancybox-container { z-index: 999999992; }
.center-layout { width: 100%; max-width: var(--width-page-content); margin-left: auto; margin-right: auto; }
.menu__nav > li > a:after, .product-items, .product-items__button, .product-items__name, .footer__link, .hlogin-form__input-group__icon, .hlogin-form__button, .hlogin__option button { -webkit-transition-property: all; transition-property: all; -webkit-transition-duration: .3s; transition-duration: .3s; }
.transition { -webkit-transition-property: all; transition-property: all; -webkit-transition-duration: .3s; transition-duration: .3s; }
.himg { display: block; }
.himg img { /*display: block; */max-width: 100%; height: auto; }
.revealOnScroll { opacity: 0; }
.scroll-btn { cursor: pointer; }
.animated { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both }
.animated.infinite { -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite }
.animated.hinge { -webkit-animation-duration: 2s; animation-duration: 2s }
.grecaptcha-badge { display: none; }
.p-relative { position: relative; }
.d-none { display: none !important; }
.d-block { display: block !important; }
img.lazy { -webkit-transition: all 1s; transition: all 1s; opacity: 0; }
img.initial, img.loaded, img.error { opacity: 1; }
img:not([src]) { visibility: hidden; }
.pd-10 { padding: 0 20px; }
.cart-table { background: #fff; }
.repay { background: #f00; border: none; color: #fff; border-radius: 3px; }
#hcontainer { position: relative; z-index: 9; /*background: #fff;*/ }
.bortop { border-top: 0px solid rgba(27, 73, 50, 5%); }
.scrollToTop { position: fixed; right: 0.313rem; bottom: 2.5rem; z-index: 99999; cursor: pointer; background: rgba(255, 255, 255, 0.8); padding: 5px 0; -webkit-transform: rotate(180deg); transform: rotate(180deg); color: #000; }
.scrollToTop span { display: block; font-weight: bold; font-size: 0.75rem; -webkit-writing-mode: vertical-lr; -ms-writing-mode: tb-lr; writing-mode: vertical-lr; }
.scrollToTop i { display: block; font-size: 1.125rem; }
.scrollToTop:hover { background: #000; color: var(--color-primary); }
.menu-side-lang { display: flex; align-items: center; }
.hbreadcrumb {/*background: #fafafa;*/position: relative; z-index: 9;/*padding:1rem 0;*/ }
.hbreadcrumb .breadcrumb { background: transparent !important; justify-content: left; padding: 0; list-style-type: none; display: flex; align-items: center; margin: 0; flex-wrap: wrap; }
.hbreadcrumb a { font-size: 1rem; color: #fff; }
.breadcrumb-item+.breadcrumb-item::before { display: inline-block; padding-right: 0.5rem; padding-left: 0.5rem; color: #333333; content: "/"; }
.breadcrumb-item { display: flex; align-items: center; }
.breadcrumb-item.active { color: #fff; }
.tabbar-active { background: #FDBC22; color: #fff !important; }

/* .title-main{text-align: center; text-transform: uppercase; color: #000; font-size: 30px;margin-bottom: 20px;} */
.detail-page-post {/*max-width: 945px;*/margin: auto; }
.content-main img { display: inline-block; }
.share { margin-top: 20px; }
.content-video { margin-bottom: 30px; }
.content-video iframe { height: 600px; }
.othernews { background: #fafafa; }
.othernews_title { text-transform: uppercase; margin: 0; display: block; color: rgb(252 176 37 / 80%); }
.list-news-other li a { color: #666; font-size: 14px; }
.banner-page { height: 320px; display: flex; align-items: center; justify-content: center; position: relative; }

/* .banner-page:after{content: '';position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: rgb(0 0 0 / 30%);} */
.banner-title { text-align: center; color: #fff; position: relative; z-index: 9; }
.banner-title span { font-weight: 700; color: #fff; font-size: 50px; text-transform: uppercase; text-shadow: 0px 0px 8px #0B073F; }
#video_slide video { display: block; }

/*=== HEADER ===*/
#header { position: sticky; top: 0px; z-index: 9999999; }
.header-top-contain { background: #292929; padding: 0.5rem 0; }
.header-top-layout { display: flex; justify-content: space-between; align-items: center; }
.header-button-1 { display: inline-block; text-transform: uppercase; font-weight: 500; color: rgb(255 255 255 / 60%); font-size: 16px; border: 1px solid rgb(255 255 255 / 60%); border-radius: 5px; padding: 0.25rem 2rem; margin-left: 1.5rem; transition: all ease 0.3s; }
.header-button-1:nth-child(2) { margin-right: 1.5rem; }
.header-button-2 { display: inline-block; text-transform: uppercase; color: #fff !important; font-weight: 500; font-size: 16px; cursor: pointer; }
.header-button-1:hover { background: var(--color-page); color: #fff; border-color: --color-page; }
.header-button-2:hover { color: var(--color-page); }
.header-buttons { display: flex; align-items: center; }
.header-button-top { position: relative; margin: 0 1.5rem }
.header-button-top input { background: none; border: none; padding: 0.38rem 10px; border: 1px solid rgb(255 255 255 / 60%); border-radius: 5px; outline: none; color: #fff; }
.header-button-top input::placeholder { font-size: 16px; color: rgb(255 255 255 / 60%); font-weight: 400; }
.header-button-top button { position: absolute; top: 9px; right: 5px; background: none; border: none; outline: none; }
.header-button-top:after { content: ''; position: absolute; height: 130%; top: -15%; left: -1.5rem; border-left: 1px solid rgb(255 255 255 / 40%); }
.header-logo { margin-right: 50px; }
.login-account-contain { position: fixed; top: 0; right: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.4); z-index: -1; opacity: 0; display: none; justify-content: right; transition: all ease 0.4s; }
.login-account-contain-open { display: flex; opacity: 1; z-index: 999999999; transition: all ease 0.4s; }
.login-account-contain-open .login-account-box { width: 380px; transition: all ease 0.4s; overflow: auto; }
.login-account-iconphoto { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); fill: #ccc; }
.login-account-addpost { background: green; color: #fff; padding: 0.5rem 0.8rem; border-radius: 3px; margin-top: 0.5rem; min-width: 180px; }
.login-account-addpost:hover { color: #fff; background: #09a509; }
.login-account-has { background: green; color: #fff !important; padding: 0.5rem 0.8rem; border-radius: 3px; margin-top: 0.5rem; min-width: 180px; }
.login-account-edit { position: absolute; bottom: 0; left: 0; width: 100%; text-align: center; font-size: 10px; color: #fff; background: rgba(0, 0, 0, 0.6); padding: 5px; }
.login-account-edit:hover { background: rgba(255, 255, 255, 0.5); color: #333; text-decoration: underline !important; }
.ui-widget.ui-widget-content { border: 1px solid #ccc; background: #fff; }
.ui-datepicker .ui-datepicker-header { background: #ebebeb; border-color: #ccc; }
.ui-datepicker .ui-datepicker-title { color: #999; }
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, .ui-button, html .ui-button.ui-state-disabled:hover, html .ui-button.ui-state-disabled:active { background: #ebebeb; border: 1px solid #ccc; color: #666; }
.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight { color: #F40000; }
.ui-widget-header .ui-icon { background-image: url(../plugins/jquery-ui-1-13/images/ui-icons_222222_256x240.png); }
.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus, .ui-button:hover, .ui-button:focus { border: none; background: none; }
.ui-datepicker select.ui-datepicker-month, .ui-datepicker select.ui-datepicker-year { border: 1px solid #ebebeb; }
.ui-state-default, .ui-widget-content .ui-state-default { background: #ccc !important; color: #333 !important; border: 1px solid #ccc !important; }
.animate-balloon-cloud { -webkit-animation: balloon 5.5s linear 1s infinite alternate; animation: balloon 5.5s linear 1s infinite alternate; }
.animation_init { opacity: 0; }
.slider-name-animate { animation: fadeInUp; animation-duration: 1s; animation-delay: 0.5s; animation-fill-mode: forwards; opacity: 0; }
.slider-btn-animate { animation: fadeInUp; animation-duration: 1s; animation-delay: 1s; animation-fill-mode: forwards; opacity: 0; }
.css-tex{    font-style: italic;
    color: #fff;
    font-weight: 400!important;
    width: 100% !important;
    max-width: 150px !important;
    font-size: 14px !important;
    text-align: left !important;}
    .css-tex::-webkit-input-placeholder{color:#fff;}
.css-tex:-moz-placeholder{color:#fff;}
.css-tex::-moz-placeholder{color:#fff;}
.css-tex:-ms-input-placeholder{color:#fff;}
/*=== END HEADER ===*/

/*=== MENU ===*/
#menu-main { display: flex; align-items: center; }
#menu-main, #menu-main ul { list-style-type: none; padding: 0; margin: 0; }
#menu-main ul {border: 1px solid #fff;opacity: 0;z-index: -1;transition: all ease 0.3s;visibility: hidden;width: 100%;position: absolute;background: #fff;width: 240px;top: 100%;}
#menu-main li ul li:last-child a{border-bottom: none}
#menu-main li:hover ul{opacity: 1;visibility: visible;z-index: 1;transform: translate(0px);} 
#menu-main li{transition: 0.3s}
#menu-main >li { padding: 15px 5px; position: relative; }
#menu-main .menu-li { position: unset; }
#menu-main >li:first-child { padding-left: 0; }
#menu-main >li:last-child { padding-right: 0; }
#menu-main li a {font-size: 16px;color: #1E1E1E;font-weight: bold;text-transform: capitalize;position: relative;}
#menu-main ul li:hover {background: #0c1254 }
#menu-main ul li:hover a{color: #fff !important }
#menu-main li.items-menu a:before {content: '';position: absolute;width: 100%;top: calc(100% + 4px);opacity: 0;}
#menu-main ul li:hover>a { color: #c70101 }
#menu-main li a.active:before { opacity: 1 !important }
.menu-child-1 >li { width: calc(100%/5); }
.menu-child-1 >li>a { font-weight: bold; text-transform: uppercase !important; font-size: 16px !important; }
.menu-child-2 { flex-direction: column; margin-top: 10px !important; }
.menu-child-2 li { margin-bottom: 8px; }
.menu-child-2 li a { font-size: 15px !important; }	
.menu-child-1 a:hover { color: #1B4932 !important; }
#menu-main >li >a { position: relative; display: flex; align-items: center; cursor: pointer; }
#menu-main >li >a::before { content: ''; position: absolute; width: 0; bottom: -7px; left: 0; background: #0C1254; transition: all ease 0.3s; -webkit-transition: all ease 0.3s; -moz-transition: all ease 0.3s; -ms-transition: all ease 0.3s; -o-transition: all ease 0.3s; opacity: 0; height: 3px; border-radius: 3px }
#menu-main >li:hover >a::before { width: 100%; opacity: 1; }
#menu-main >li:hover>a { /*color:#FDBC22;*/ transition: all ease 0.4s; -webkit-transition: all ease 0.4s; -moz-transition: all ease 0.4s; -ms-transition: all ease 0.4s; -o-transition: all ease 0.4s; }
#menu-main > li > ul {     position: absolute;
    background: #fff;
  
    width: 220px;
        top: calc(100% - 7px);
    left: 0;
    -webkit-transition: 350ms;
    -moz-transition: 350ms;
    -o-transition: 350ms;
    transition: 350ms;
   
    transform: translateY(10px);}
#menu-main > li > ul ul { position: absolute; background: #fff;/*padding: 30px 10px;*/ width: 220px; top: 0; left: 100%; }
#menu-main > li > ul a { font-size: 13px; }
#menu-main li ul a {position: relative;display: block;padding: 8px 16px;border-bottom: 1px solid #0000002b;text-transform: capitalize;}
#menu-main li ul a:after { content: ''; position: absolute; width: 0; border-top: 2px solid #333; left: 0; bottom: -2px; transition: all ease 0.3s; }
#menu-main li ul a:hover:after {/*width: 100%;*/ }
.menu-last-item { display: flex; color: #8F8F8F; padding-right: 0 !important; background: none !important; cursor: pointer; }
.menu-last-item a { color: #8F8F8F !important; }
.menu-last-item a:after { display: none; }
.menu-last-item p { width: 30px; margin-left: 1rem; position: relative; display: flex; flex-direction: column; }
.menu-last-item span { height: 3px; border-radius: 5px; background: #8F8F8F; margin: 0.15rem 0; }
.menu-btn-contact { cursor: pointer; }
.menu-btn-contact a { color: #fff !important; background: #40C6F3; border-radius: 10px; padding: 0 1rem; }
.contact-map iframe { display: block; width: 100%; }
.btn-toggle-footer-active svg { transform: rotate(180deg); -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); }
.modal-menu-full { padding-bottom: 3rem; position: relative; width: 300px; display: inline-block; }
.menu-side-header { width: 100%; }
.menu-side-info { margin-bottom: 1rem; padding: 0 1rem; }
.menu-side-logo { text-align: center; /* filter: grayscale(1); */ }
.menu-side-logo img { display: inline-block; }
.menu-side-lang a { color: #333; font-weight: 500; margin-right: 5px; padding-right: 5px; border-right: 1px solid #ccc; }
.menu-side-lang a:last-child { border: none; }
#modal-menu { position: fixed; top: 0; left: -300px; width: 0; opacity: 0; z-index: -1; transition: all ease 0.4s; text-align: left; }
#modal-menu.modal-menu-show { opacity: 1; /*z-index: 99999999; */ width: 100%; text-align: left; left: 0; }
#modal-menu.modal-menu-show:before { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: rgba(0, 0, 0, 0.5); }
.modal-menu-close-main { display: flex; padding: 1rem; justify-content: left; align-items: center; /*border-bottom: 1px solid #f7f3f3; */ margin-bottom: 2rem; }
.modal-menu-close { position: relative; cursor: pointer; width: 30px; height: 30px; display: inline-block; /* background: #ebebeb; */ border-radius: 50%; padding: 5px; }
.modal-menu-close:after { content: ''; position: absolute; border-top: 1px solid #333; width: 100%; top: calc(50% - 1px); right: 0; transform: rotate(45deg); transition: all ease 0.3s; }
.modal-menu-close:before { content: ''; position: absolute; border-top: 1px solid #333; width: 100%; top: calc(50% - 1px); right: 0; transform: rotate(-45deg); transition: all ease 0.3s; }
.modal-menu-close:hover:after { transform: rotate(0deg); }
.modal-menu-close:hover:before { transform: rotate(0deg); }
.menu-side-home { display: flex; align-items: center; text-transform: capitalize; color: #444; font-size: 14px; letter-spacing: 1px; font-weight: 600; }
.modal-menu-container { display: flex; flex-direction: column; align-items: flex-start; height: calc(100vh - 8rem); position: relative; min-height: 100%; overflow: auto; justify-content: space-between; }
#menu-sidebar {/*margin: 20px 0;width: 25%;height: 100vh;*/ }
#menu-sidebar, #menu-sidebar ul { list-style-type: none; padding: 0; }
#menu-sidebar li { position: static; }
#menu-sidebar >li > ul { border: 0; position: absolute; width: 75%; min-height: 50vh; left: 25%; top: 0; padding: 25px 0 0 5%; margin-left: -1px; max-height: 100%; flex-flow: inherit; -ms-flex-wrap: wrap; flex-wrap: wrap; display: flex; flex-direction: row; visibility: hidden; opacity: 0; }
#menu-sidebar >li > ul li { position: relative; top: 5px; }
#menu-sidebar > li > a { text-transform: capitalize; padding: 5px 0; font-size: 1.15em; position: relative; }
#menu-sidebar a { position: relative; color: #333; }
#menu-sidebar a:after { content: ''; position: absolute; width: 0; border-top: 2px solid #333; left: 0; bottom: -2px; transition: all ease 0.3s; }
#menu-sidebar a:hover:after { width: 100%; }
#menu-sidebar >li > ul:before { content: ' '; left: 3%; top: 0; width: 1px; background: #f2f2f2; background: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 50%); float: left; position: absolute; height: 100%; }
#menu-sidebar >li { border: 0; display: flex; justify-content: space-between; }
#menu-sidebar >li >ul >li { width: 25%; }
.menu-sidebar-pad { padding-left: 15px !important; border-left: 2px solid #999; }
.menu-sidebar-right { display: flex; justify-content: center; align-items: center; width: 36px; height: 36px; border-radius: 50px; text-align: center; right: 0; cursor: pointer; font-size: 12px; transition: all ease 0.2s; }
.menu-sidebar-down { display: flex; justify-content: center; align-items: center; width: 50px; height: 50px; border-radius: 50px; text-align: center; right: 0; cursor: pointer; font-size: 12px; transition: all ease 0.2s; display: none; position: relative; }
.menu-sidebar-down:before { content: ''; position: absolute; top: 10px; left: 10px; border: 1px solid #e8e8e8; width: 30px; height: 30px; border-radius: 50%; }
.menu-sidebar-down i { position: relative; }
#menu-sidebar >li:hover .menu-sidebar-right { background: #ebebeb; }
#menu-sidebar li:hover > .menu-sidebar-down {/*background: #ebebeb;*/ }
#menu-sidebar >li:hover ul { opacity: 1; visibility: visible; }
#menu-sidebar .menu-sidebar-active ul { opacity: 1; visibility: visible; }
#menu-sidebar >li > ul li { padding-bottom: 0; }
#menu-side-mobile { overflow-y: auto; text-align: left; }
#menu-side-mobile, #menu-side-mobile ul { list-style-type: none; padding: 0; width: 100%; }
#menu-side-mobile >li {/*border-bottom: 1px solid #f7f3f3;*/ }
#menu-side-mobile >li>div>a { display: block; text-transform: capitalize; color: #333; font-size: 16px; padding: 0.8rem 0 0.8rem 1rem; letter-spacing: 1px; font-weight: 600; }
#menu-side-mobile >li ul {display: none;padding-left: 2rem;}
#menu-side-mobile >li >ul {/*padding-bottom: 1.5rem;*/ background: rgb(0 0 0 / 2%); }
#menu-side-mobile >li ul >li {/*padding-bottom: 1rem;*/padding: 0.8rem 1rem;/*border-bottom: 1px solid #f7f3f3;*/ }
#menu-side-mobile >li ul >li:first-child {/*border-top: 1px solid #f7f3f3;*/ }
#menu-side-mobile >li ul >li:last-child {/*padding-bottom: 0;*/ border-bottom: none; }
#menu-side-mobile >li ul >li a { color: #333; text-transform: capitalize; font-size: 15px; }
#menu-side-mobile >li ul >li >ul li { padding-bottom: 0; }
.menu-side-footer { width: 100%; padding: 0 0.5rem; color: #333; }
.menu-side-footer-copyright { font-size: 12px; text-align: center; }
.menu-side-title { display: flex; justify-content: space-between; align-items: center; }
.menu-side-title > a { font-weight: 700; color: #fff; }
.menu-side-title span { display: flex; width: 50px; height: 40px; justify-content: center; align-items: center;/*border-left: 1px solid #e8e8e1;*/ color: #333; cursor: pointer; }
.menu-sticky { position: sticky !important; top: 0; z-index: 9999999; background: #fff; }
#show-menu-small { padding: 1.5rem 0; border-top: 2px solid #ebebeb; background: #ebebeb; position: fixed; width: 100%; z-index: -1; height: 100vh; opacity: 0; margin-top: 1.5rem; transition: all ease 0.3s; visibility: hidden; }
#show-menu-small.visible-menu-small { z-index: 9999999; opacity: 1; margin-top: 0rem; visibility: visible; }
.show-menu-title { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2.5rem; background: #fff; padding: 0.5rem; border-radius: 5px; }
.show-menu-title p { text-transform: uppercase; color: #292929; font-weight: 700; margin: 0; font-size: 18px; display: flex; }
.show-menu-title span { display: flex; cursor: pointer; }
.menu__hidden_li .menu_li_child { display: none !important; }
#menu-small-ul { padding: 0; list-style-type: none; margin: 0; display: flex; flex-wrap: wrap; max-height: 80vh; overflow: auto; }
#menu-small-ul >li { width: calc(100% / 6); margin-bottom: 2rem; }
#menu-small-ul >li >a { text-transform: uppercase; color: #292929; font-weight: 600; }
#menu-small-ul > li> ul { list-style-type: none; padding: 0; }
#menu-small-ul > li> ul>li { margin-top: 0.5rem; }
#menu-small-ul > li> ul>li a { color: #000; }
#menu-small-ul > li> ul>li a:hover { text-decoration: underline !important; }
.menu-flex { display: flex; align-items: center; width: 100%; justify-content: space-between; }
.menu-block-show { /*-webkit-transform: perspective(400) rotate3d(1,0,0,-90deg); */-webkit-transform-origin: 50% 0; -webkit-transition: 500ms; -moz-transition: 500ms; -o-transition: 500ms; transition: 500ms; pointer-events: none; position: absolute; top: 150%; width: 100%; left: 0; opacity: 0; z-index: -1; -ms-transition: 500ms; }
.menu-li:hover .menu-block-show { opacity: 1; z-index: 9999; visibility: visible; pointer-events: auto; /*-webkit-transform: perspective(400) rotate3d(0,0,0,0);*/ background: #fff; opacity: 1; top: 100%; z-index: 999; border: 1px solid #ebebeb; }

/*=== END MENU ===*/
.menu-search { cursor: pointer; }
.menu-search-show { position: relative; margin-left: 2.5rem; }
.menu-search-show input { width: 145px; background: #FFFFFF; border: 0.5px solid #D7D7D7; box-shadow: 0px 0px 30px 5px rgba(4, 57, 109, 0.08); border-radius: 20px; line-height: 30px; text-indent: 30px; outline: none; }
.menu-search-show input::placeholder { font-weight: 300; font-size: 12px; }
.menu-search-show button { border: none; outline: none; position: absolute; top: 7px; left: 5px; background: none; }

/*===END ===*/
.show-popup-post { position: fixed; width: 100%; height: 100%; top: 0; left: 0; background: rgba(255, 255, 255, 0.7); display: flex; align-items: center; justify-items: center; justify-content: center; z-index: -999; opacity: 0; }
.show-popup-main { background: #fff; }
.show-popup-active { z-index: 999999999; opacity: 1; transition: all ease 0.5s; -webkit-transition: all ease 0.5s; -moz-transition: all ease 0.5s; -ms-transition: all ease 0.5s; -o-transition: all ease 0.5s; }
.show-popup-blur { transition: all ease 0.3s; -webkit-transition: all ease 0.3s; -moz-transition: all ease 0.3s; -ms-transition: all ease 0.3s; -o-transition: all ease 0.3s; }
.show-popup-active .show-popup-blur { z-index: 9; opacity: 1; backdrop-filter: blur(8px); }
.swiper_album .swiper-button-next, .swiper_album .swiper-button-prev { color: #47775C; width: 14px; height: 27px; }
.swiper_album .swiper-button-next:after, .swiper_album .swiper-button-prev:after { font-size: 25px; }
.swiper-fix .swiper-scrollbar { background: #D9D9D9; width: 180px; position: relative; right: 0; bottom: 2px; height: 2px; }

/* .swiper-fix .swiper-pagination-current{}
.swiper-fix .swiper-pagination-total{} */
.swiper-fix .swiper-scrollbar-drag { background: #6EBB33; border-radius: 0; position: absolute; }
.over-tintuc { overflow-y: auto; max-height: 476px; }
.over-hethong { overflow-y: auto; max-height: 530px; }

/* width */
.scroll-tintuc::-webkit-scrollbar { width: 2px; }

/* Track */
.scroll-tintuc::-webkit-scrollbar-track { background: #D9D9D9; }

/* Handle */
.scroll-tintuc::-webkit-scrollbar-thumb { background: #6EBB33; }

/*=== END HOME ===*/
.owl__content .custom-owl-button { position: absolute; padding: 0; border: 0; color: #32353c; top: 50%; -webkit-transform: translate(0, -50%); transform: translate(0, -50%); background: transparent; z-index: 99; }
.owl__content .custom-owl-prev { left: -2rem; }
.owl__content .custom-owl-next { right: -2rem; }
.copyright { background: #171515; font-size: 0.875rem; color: #EBEBEB; }
.copyright .center-layout { padding: 1.875rem 0; border-top: 1px solid #707070; }
.hfancybox { display: none; width: calc(100% - 20px); }
.hfancybox--400 { max-width: 400px; }
.pd-video { position: relative; color: #fff; padding-bottom: 4px; }
.pd-video svg { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); }
.fb_iframe_widget > span { vertical-align: middle !important; }
.alert-lock { background: #f9f7f7; border-color: #ebebeb; padding: 5rem 1rem; text-align: center; border: 2px dashed #ebebeb; margin-bottom: 2rem; border-radius: 8px; }

/*===LOADER SEND MAIL===*/
#loading_order { position: fixed; top: 0; left: 0; background: rgba(255, 255, 255, 0.7); z-index: 999999999; width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center; }
.loading_container { top: 50%; left: 50%; position: absolute; transform: translate(-50%, -50%); }

/*=== custom css ===*/
.owl-theme .owl-dots .owl-dot.active { border-color: #fff }
.box-img::before { content: ''; position: absolute; left: -91px; bottom: -2px; height: 100%; width: 70px; background: url(../img/FEEDBACK.png) center no-repeat; }
.box-group::before { content: ''; position: absolute; top: -97px; right: 0; width: 100%; height: 70px; background: url(../img/CLIENTS.png) right center no-repeat; }
#menu-main li a:hover { color: #C70101; }
ul.project-year { list-style: none; position: relative; padding-top: 90px; }
ul.project-year:before { content: ''; position: absolute; top: 62px; border-left: 1px dashed #ccc; height: 100%; left: calc(50% - 1px/2) }
ul.project-year li { width: 50%; padding: 0 10px; position: relative; }
ul.project-year li:nth-child(odd) { float: left; padding-right: 20px; }
ul.project-year li:nth-child(even) { float: right; padding-left: 20px; }
.item-new-primary:nth-child(odd):before { content: ''; position: absolute; width: 20px; height: 20px; border-radius: 30px; background: #1941a9; right: -30px; }
.item-new-primary:nth-child(odd):after { content: ''; position: absolute; width: 10px; height: 10px; border-radius: 30px; background: #fff; right: -25px; top: 5px; }
.item-new-primary:nth-child(even):before { content: ''; position: absolute; width: 20px; height: 20px; border-radius: 30px; background: #1941a9; left: -30px; }
.item-new-primary:nth-child(even):after { content: ''; position: absolute; width: 10px; height: 10px; border-radius: 30px; background: #fff; left: -25px; top: 5px; }
.item-new-primary.pro .content { padding: 5px 20px 15px; }
.tree-year-project { position: absolute; left: 50%; top: 60px; bottom: 0; border: 0.5px dotted #898989; max-height: 600px; }
.tree-year-project.cursor:before { content: ''; height: 10px; width: 10px; border-radius: 50%; border: 2px solid #002357; position: absolute; top: -10px; left: calc(50% - 5px); }
.year-box-project { position: absolute; top: 0; left: calc(50% - 70px); width: 140px; height: 40px; background: #002357; color: #fff; font-weight: bold; font-size: 18px; text-align: center; line-height: 20px; padding: 10px 0; }
ul.project-year li:nth-child(odd):after { content: ''; width: 6px; height: 6px; position: absolute; right: -3px; top: 0; background-color: #898989; border-radius: 50%; }
ul.project-year li:nth-child(even):after { content: ''; width: 6px; height: 6px; position: absolute; left: -3px; top: 0; background-color: #898989; border-radius: 50%; }
#lang-element ul{visibility: visible;opacity: 1;z-index: 1;position: relative;width: unset;border: none}
#lang-element ul li:hover{background-color: #fff}
#lang-element ul li:hover a{color: black !important;}
.item-new-primary.pro .content .desc { -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; white-space: normal; -webkit-line-clamp: 7; }
.label-date { background-image: url(../img/labelnewindex.png); background-repeat: no-repeat; background-size: cover; width: 70px; height: 100px; padding: 5px 15px; color: #fff; font-size: 10px; color: #fff; position: absolute; left: 0; top: 0; }
.label-date a { display: block; color: #fff }
.label-date a span.date { font-size: 30px; font-weight: bold; text-align: center; }
.label-date a span { display: block; }
.label-date a span.border-bot-label { height: 1px; background: #fff568; margin-bottom: 5px; }
.item-new-primary .content .title { display: -webkit-box; -webkit-box-orient: vertical; text-overflow: ellipsis; white-space: normal; -webkit-line-clamp: 2; font-size: 18px; font-weight: bold; margin: 10px 0 5px; color: black; text-transform: uppercase; margin-bottom: 10px }
.item-new-primary .content .title a { color: black; font-weight: bold }
.item-new-primary .content .title { overflow: hidden; }
.item-new-primary .content .title a:hover { color: #1941a9 }
.res-logo{margin-right: auto}
.font-utm{font-family: 'UTMBanque'}
.back-to-top{right: 42px!important}
/* tooltip */
.tooltip{position:absolute;z-index:1070;display:block;margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";font-style:normal;font-weight:400;line-height:1.5;text-align:left;text-align:start;text-decoration:none;text-shadow:none;text-transform:none;letter-spacing:normal;word-break:normal;word-spacing:normal;white-space:normal;line-break:auto;font-size:0.875rem;word-wrap:break-word;opacity:0;}
.tooltip.show{opacity:0.9;}
.tooltip .arrow{position:absolute;display:block;width:0.8rem;height:0.4rem;}
.tooltip .arrow::before{position:absolute;content:"";border-color:transparent;border-style:solid;}
.bs-tooltip-top,.bs-tooltip-auto[x-placement^="top"]{padding:0.4rem 0;}
.bs-tooltip-top .arrow,.bs-tooltip-auto[x-placement^="top"] .arrow{bottom:0;}
.bs-tooltip-top .arrow::before,.bs-tooltip-auto[x-placement^="top"] .arrow::before{top:0;border-width:0.4rem 0.4rem 0;border-top-color:#002060;}
.bs-tooltip-right,.bs-tooltip-auto[x-placement^="right"]{padding:0 0.4rem;}
.bs-tooltip-right .arrow,.bs-tooltip-auto[x-placement^="right"] .arrow{left:0;width:0.4rem;height:0.8rem;}
.bs-tooltip-right .arrow::before,.bs-tooltip-auto[x-placement^="right"] .arrow::before{right:0;border-width:0.4rem 0.4rem 0.4rem 0;border-right-color:#002060;}
.bs-tooltip-bottom,.bs-tooltip-auto[x-placement^="bottom"]{padding:0.4rem 0;}
.bs-tooltip-bottom .arrow,.bs-tooltip-auto[x-placement^="bottom"] .arrow{top:0;}
.bs-tooltip-bottom .arrow::before,.bs-tooltip-auto[x-placement^="bottom"] .arrow::before{bottom:0;border-width:0 0.4rem 0.4rem;border-bottom-color:#002060;}
.bs-tooltip-left,.bs-tooltip-auto[x-placement^="left"]{padding:0 0.4rem;}
.bs-tooltip-left .arrow,.bs-tooltip-auto[x-placement^="left"] .arrow{right:0;width:0.4rem;height:0.8rem;}
.bs-tooltip-left .arrow::before,.bs-tooltip-auto[x-placement^="left"] .arrow::before{left:0;border-width:0.4rem 0 0.4rem 0.4rem;border-left-color:#002060;}
.tooltip-inner{max-width:200px;padding:0.25rem 0.5rem;color:#fff;text-align:center;background-color:#002060;border-radius:0.25rem;}

/* caculator */
.content{padding: 50px 0px;}
.flex-block{display: flex;justify-content: space-between;align-items: flex-start;grid-gap: 30px;}
.left-block,.bottom-block{width: 20%;}
.right-block{width: 60%;border:1px solid gray;padding: 10px;;}
.title-table{background:#00FFFF;font-size: 16px;text-transform: uppercase;font-weight: bold;color: black;padding: 10px 0px;text-align: center;}
.title-table-large{background:#fff;font-size: 17px;text-transform: uppercase;font-weight: bold;color: black;padding: 10px 0px;text-align: center;}
.table-responsives table{width: 100%;    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;display: table;
}
.table-responsives table tr{border-bottom: 1px solid #000;}
.table-responsives table tr td{padding: 8px 10px;font-size: 14px;color: black;}
.table-responsives table tr.head{background: #002060;color:#fff;font-weight: bold;text-transform: uppercase;font-size: 15px;}
.table-responsives table tr.head td{color: #fff;}
.table-responsives table tr td:nth-child(3){width: 100px;text-align: right;}
.table-responsives table tr.fill td:nth-child(3){background: #FFFF00;font-weight: bold;text-align: right;}
.table-responsives table tr.fill td:nth-child(5){font-style: italic;}
.table-responsives table tr.fill select{background: #fff0;padding: 0;border: none;}
.table-responsives table tr td input{
    border: none;
    background: #fff0;
    padding: 0;
    font-weight: 600;
    text-align: right;
    max-width: 100px;
    height: 20px;
    }
    .table-responsives table tr td input:focus,.table-responsives table tr.fill select{    outline: none;
        border: none;
        box-shadow: none;}
    .table-responsives table tr.opa td:nth-child(1){opacity: 0.6;}
    .txn{text-transform: capitalize;text-align: center;font-weight: 400;font-style: italic;}
    .txn1{text-align: center;text-transform: capitalize;}
    .txn2{text-align: center;text-transform: capitalize;}
    .table-responsives table tr:last-child{border:none}

    .table-responsives .SumoSelect > .CaptionCont{border: none;
    background: none;
    padding: 10px;
    padding-right: 10px;}
    .table-responsives .SumoSelect > .CaptionCont label{display: none;}
    .table-responsives .SumoSelect > .CaptionCont > span{height: 100%;padding-right: 0;margin-top: 0;outline: none;box-shadow: none;}
   .table-responsives table .fill.select td:nth-child(3){padding: 0;}
   .table-responsives table tr.fill .no-color{background: #fff !important;}
   .table-responsives table tr .total-color{background: #FF99CC;font-size: 16px}
   .total{color: #000}
   .logo-page{display: block;text-align: center;margin-bottom: 20px}
   .logo-page img{display:inline-block;}