@import url("style_adder.css");

@font-face {
    font-family: 'mainr';
    src: url("fonts/mainr.ttf");
    font-display: swap;
}
@font-face {
    font-family: 'mainb';
    src: url("fonts/mainb.ttf");
    font-display: swap;
}
@font-face {
    font-family: 'mainb2';
    src: url("fonts/mainb2.ttf");
    font-display: swap;
}
:root {
    --main: #149664;
    --sub: #e7addf;
    --dark: #1a2310;
	--lgray: #808080;
    --gray: #404040;
}
::-webkit-scrollbar { width: 10px;background-color: #f1f1f1; }
::-webkit-scrollbar-thumb {
    height: 20%;
    background: #aaa;
    transition: 0.3s ease-out;
}
::-webkit-scrollbar-thumb:hover { background: #ccc }
::selection { background: var(--sub); color: #000; }
::-moz-selection { background: var(--sub); color: #000; }
::-webkit-selection { background: var(--sub); color: #000; }

html {
    scroll-behavior: smooth;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}
html,body,button, p,text,textarea,select,input {
    color: #000;
	outline: 0;
	font-family: 'mainr';
    font-size: 15px;
	line-height: 1.6;
}

h1 {font-size: 40px;}
h2 {font-size: 32px;}
h3 {font-size: 24px;}
h4 {font-size: 18px;}
h5 {font-size: 14px;}
h6 {font-size: 12px;}

b, strong {
    font-weight: normal;
    font-family: 'mainb2';
}
h1, h2, h3, h4, h5, h6 {
    font-weight: normal;
    font-family: 'mainb';
    margin: 15px 0 10px 0;
    line-height: 1.2;
}

/*WRAPPER_CENTER*/
.wrapper-center {
    margin-right: auto;
    margin-left: auto
}
@media (min-width: 569px) and (max-width: 768px) {.wrapper-center {width:90%;}}
@media (min-width: 769px) and (max-width: 959px) {.wrapper-center {width:90%;}}
@media (min-width: 960px) and (max-width: 1024px) {.wrapper-center {width:85%;}}
@media (min-width: 1025px) and (max-width: 1280px) {.wrapper-center {width:85%;}}
@media (min-width: 1281px) and (max-width: 1500px) {.wrapper-center {width:1200px;}}
@media (min-width: 1501px) and (max-width: 1600px) {.wrapper-center {width:1400px;}}
@media (min-width: 1601px) {.wrapper-center {width: 1500px;}}

/*header*/
.alignfull {
    margin-left: -10vw;
    margin-right: -10vw;
}
.site-content { padding-top: 165px }
.mondial-header { 
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1000;
}
.width0 { 
    margin: 0 auto !important;
    width: 0 !important;
    transition: 0.5s; 
}
.pdt50 { padding-top: 50px; }

.head-menu { border-top: 1px solid #eee; }
.head-menu-in { padding: 11px 20px; }
.site-header .head-logo a { width: 160px; margin: 10px auto; }

.head-cart {
    display: inline-block;
    width: 22px;
}
.head-cart .qty-number {
    text-align: center;
    width: 15px;
    height: 15px;
    background-color: var(--sub);
    border-radius: 50%;
    top: -3px;
    right: -8px;
    font-size: 10px;
    font-family: 'mainb';
    transition: 0.3s ease-out;
}
.head-cart img {
    width: 24px;
    filter: brightness(0) invert(1);
    transition: 0.3s ease-out;
}
.head-cart:hover .qty-number { background-color: #fff; }



/*head main menu*/
.head-menu ul>li>a {
    font-family: 'mainb' !important;
    transition: 0.5s !important 
}
.mega-sub-menu .mega-current-menu-item a {
    background-color: var(--sub) !important;
}
.mega-menu>.mega-current-menu-item>a { 
    color: var(--main) !important;
    border-bottom: 2px solid var(--sub) !important; }

#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item:last-child { margin: 0; }

#mega-menu-wrap-primary .mega-menu-toggle .mega-toggle-block-1 .mega-toggle-animated-inner, 
#mega-menu-wrap-primary .mega-menu-toggle .mega-toggle-block-1 .mega-toggle-animated-inner::before, 
#mega-menu-wrap-primary .mega-menu-toggle .mega-toggle-block-1 .mega-toggle-animated-inner::after {
    height: 2px;
}

@media only screen and (min-width: 1025px) {
    .mega-sub-menu {
        left: -20px !important;
        top: 40px !important;
    }
}
@media (min-width: 569px) { .head-top { padding: 8px 0} }
@media (max-width: 568px) { .head-top { padding: 8px 20px} }

/*footer*/
.copyright {
    padding: 15px;
    font-family: 'mainb';
    background-color: var(--sub);
}
.mondial-footer .top { padding: 20px 0 50px 0; }
.mondial-footer .top .box {
    margin: 20px 30px;
}
.mondial-footer .bottom .decor {
    max-width: 640px;
    opacity: 0.1;
    z-index: 0;
    top: 50%;
    right: 0%;
    transform: translate(0%, -50%);
}
.mondial-footer .bottom {
    overflow: hidden;
    padding: 80px 0;
}
.mondial-footer .bottom h4 { font-size: 20px; margin: 15px 0 20px 0}
.mondial-footer .bottom * { color: #fff; }
.mondial-footer .bottom p,
.mondial-footer .bottom a {
    margin: 10px 0;
    font-size: 14px;
}
.mondial-footer .bottom table { margin: 0 -10px; }
.mondial-footer .bottom table td { 
    padding: 0 10px;
    background-color: transparent !important; }

.mondial-footer .bottom hr {
    background-color: #ffffff50;
    margin: 30px 0 40px 0;
}
.mondial-footer .bottom ul {
    list-style: none;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
}
.mondial-footer .bottom ul li { margin: 8px 50px 8px 0; }
.mondial-footer .bottom a:hover { color: var(--sub); }

.hoadn-contact  div.wpforms-container-full { margin: 0}
.hoadn-contact .wpforms-container .wpforms-field { padding: 0 0 15px 0; }

.hoadn-contact textarea,
.hoadn-contact input {
    min-height: 40px;
    border-radius: unset !important;
    border: none !important;
    padding: 5px 0px !important;
    border-bottom: 1px solid var(--gray) !important;
    background-color: transparent !important;
}

*::placeholder {
    font-family: 'mainb';
    opacity: 1 !important;
}
.hoadn-contact .wpforms-container .wpforms-submit-container { text-align: center; }

.hoadn-contact .wpforms-submit-container button[type=submit] {
    color: #fff;
    position: relative;
    background-color: var(--main) !important;
    font-size: 14px;
    line-height: 1;
    font-family: 'mainb';
    width: 170px;
    height: 36px;
    border-radius: unset !important;
    transition: 0.3s ease-out;
}
.hoadn-contact .wpforms-submit-container button[type=submit]::before {
    position: absolute;
    content: '';
    width: 160px;
    height: 26px;
    border: 1px solid #fff;
    top: 4px;
    left: 4px;
}
.hoadn-contact button[type=submit]:hover {
    color: var(--sub);
    background-color: var(--dark) !important;
}
.hoadn-contact .wpforms-submit-container button[type=submit]:hover::before {
    border: 1px solid var(--sub);
}



.block-mobile-buttons {
    z-index: 3;
    position: fixed;
    right: 5px;
    bottom: 0px;
}
.pulse span {
    visibility: hidden;
    opacity: 0;
    z-index: 4;
    text-align: center;
    border-radius: 20px;
    background-color: var(--main);
    color: #fff;
    font-family: 'mainb';
    position: absolute;
    right: 50px;
    top: 0;
    transition: 0.5s ease-out;
    padding: 6px 15px;
}
.pulse:hover span {
    opacity: 1;
    visibility: visible;
}
.pulse {
    cursor: pointer;
    margin: 25px 10px;
    padding: 8px;
    background-color: var(--sub);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    transition: 0.3s ease-out;
}
.pulse:hover { background-color: var(--main); }
.pulse::before,
.pulse::after {
    content: "";
    position: absolute;
    border: 1px solid var(--sub);
    width: calc(100% + 10px);
    height: calc(100% + 10px);
    border-radius: 50%;
    animation: pulse 1s linear infinite;
}
.pulse::after { animation-delay: 0.3s }
.pulse:hover::before, 
.pulse:hover::after { border: 1px solid var(--main); }
.pulse img { width: 20px; height: 20px; }
@keyframes pulse {
    0% { transform: scale(0.5); opacity: 0 }
    50% { transform: scale(1); opacity: 1 }
    100% { transform: scale(1.3); opacity: 0 }
}
@media (min-width: 569px) { 
    .mondial-footer .top { margin: 0px -30px; }
}
@media (max-width: 568px) { 
   
    .mondial-footer .bottom { padding: 80px 30px; }   
    .mondial-footer .bottom table tr {
        display: flex;
        flex-wrap: wrap;
    }
    .mondial-footer .bottom table td {
        width: 100% !important;
    }
    .mondial-footer .bottom ul li {
        margin: 5px 30px 5px 0;
    }
}
/*end footer*/

.bgm { background-color: var(--main);}
.bgs { background-color: var(--sub);}
.bgd { background-color: var(--dark);}
.w100 { width: 100% }
.lsn { list-style: none;}
.mgai { margin: auto !important }
.mg0 { margin: 0 }

.mg5 { margin: 5px }
.mg30 { margin: 30px; }

.pd5-20 { padding: 5px 20px; }
.pd0-20 { padding: 0px 20px; }
.pd10-20 { padding: 10px 20px; }


/*trang chu - home*/
#main img.page-content-decor {
    opacity: 0.05;
    top: 0px;
    left: -300px;
    z-index: -1;
}

.mondial-home { overflow: hidden; }
.mondial-home .decor {
    max-width: 800px;
    opacity: 0.05;
}
.mondial-home .decor-1 {
    left: -300px;
    top: 15%;
}
.mondial-home .decor-2 {
    right: -300px;
    top: 50%;
}
.mondial-home .decor-3 {
    left: -300px;
    bottom: 0;
}



/*trang chu - banner 1*/
.home-banner-1 img {
    width: 100%;
    object-fit: cover;
}
.home-banner-1 .layer {
    z-index: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #00000050;
}
.home-banner-1 .top {
    z-index: 1;
    width: 100%;
    left: 0;
}
.home-banner-1 .bottom {
    width: 100%;
    bottom: 0;
    left: 0;
    background-color: #149664ab;
}
.home-banner-1 .bottom table td p { 
    line-height: 1.4ab;
    margin: 0; 
}
.home-banner-2 img,
.home-banner-3 img { margin: 0 auto; }
.home-banner-1 img {
    height: 640px;
}

.home-banner-1 .bottom table tr { 
    display: flex;     
    flex-wrap: wrap;
}
.home-banner-1 .bottom table td {
    display: flex;
    align-items: baseline;
    background-color: transparent
}
.home-banner-1 .bottom table td * { color: #fff; }
.home-banner-1 .bottom table td strong { line-height: 1; }
.home-banner-1 .bottom table td p:first-child {
    width: 25%;
    text-align: center;
}
.home-banner-1 .bottom table td p:last-child { width: 70%; }
@media (min-width: 1500px) {
    .home-banner-1 img { height: calc(100vh - 200px); }
}
@media (min-width: 769px) { 
    .home-banner-1 .bottom { padding-top: 30px; }
    .home-banner-1 .bottom table td:not(:first-child) { border-left: 1px solid #fff; }
}
@media (max-width: 768px) { 
    .home-banner-1 .bottom table td * { line-height: 1.2;}
    .home-banner-1 img { height: 1000px; }
    .home-banner-1 .bottom { padding-top: 20px; }
    .home-banner-1 .bottom table td { 
        padding: 5px 10px;
        width: 100% !important; }
}

@media (max-width: 568px) { 
    .home-banner-1 .top {
        top: 30%;
        transform: translate(0, -30%);
    }
    .home-banner-1 .top { padding: 0 30px }
}
@media (min-width: 569px) { 
    .home-banner-1 .top {
        top: 40%;
        transform: translate(0, -40%);
    }
    .home-banner-1 .top .site-name { font-size: 64px; }
    .home-banner-1 .bottom ul { margin: 0 -30px; }
    .home-banner-1 .bottom ul li { width: 25%; }
    .home-banner-2,
    .home-banner-3 { padding: 0 0 30px 0; }
}




/*trang chu - intro*/

.home-intro p {
    max-width: 600px;
    margin: 15px auto;
    text-align: justify; 
    text-align-last: center;
}
@media (min-width: 569px) { 
    .home-intro { padding: 50px 0 0 0; }
}
@media (max-width: 568px) {
    .home-intro { padding: 50px 30px 0 30px; }
}

/*trang chu - dich vu*/
.home-services .service .box { margin: 20px 30px; }

.home-services .item:nth-child(2) .service { flex-direction: row-reverse; }
.home-services .service .thumbnail {
    border-radius: 50%;
    overflow: hidden;
    width: 100%;
    height: 100%;
    padding-top: 100%;
}
.home-services .service .thumbnail img {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.home-services .item:nth-child(2) .description { 
    display: flex;
    justify-content: flex-end; 
}
.home-services .service h3 {
    margin: 0;
    display: inline-block;
    background: linear-gradient(to right, var(--main), var(--sub), var(--main)); 
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.home-services .service .description p { 
    max-width: 500px;
    margin: 20px 0;
}
.home-services .service .read-more { display: inline-block }

@media (min-width: 569px) {
    .home-services .service { margin: 0px -30px }
    .home-services .service h3 { font-size: 48px; }
    .home-services .service .left { width: 40% }
    .home-services .service .right { width: 60% }
}
@media (max-width: 568px) {
    .home-services .service .left .box { margin: 0 30px }
    .home-services .service .description p { text-align: justify; } 
    .home-services .item:nth-child(2) .description p { text-align-last: right; }
    .home-services .service h3 { font-size: 40px; }
    .home-services .service .left { width: 70% }
    .home-services .service .right { width: 100% }
}

/*trang chu - san pham*/
.home-list-product { padding: 50px 0 100px 0; }
.home-product a {
    overflow: hidden;
    margin: 15px;
    display: block;
    border-radius: 20px;
}
.home-product .item .thumbnail {
    overflow: hidden;
    position: relative;
    padding-top: 150%;
}
.home-product .item .thumbnail img {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: 0.5s;
}
.home-product .item a:hover .thumbnail img { transform: scale(1.1); }
.home-product .item a .layer {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: #00000020;
    z-index: 1;
}
.home-product .item a .box {
    width: 100%;
    padding: 50px 20px 20px 20px;
    z-index: 2;
    left: 0;
    bottom: 0;
    background: linear-gradient( #00000000, #00000090);
}
.home-product .item a * { color: #fff; }
.home-product .item a:hover * { color: var(--sub); }
.home-product .item a h4 { padding-right: 50px; margin: 0 }
.home-product .item a .read-more {
    right: 16px;
    bottom: 16px;
    z-index: 2;
    width: 36px;
    height: 36px;
}
.home-product .item a .read-more span {
    display: inline-block;
    border-radius: 50%;
    border: 1px solid #fff;
}
.home-product .item a .read-more img {
    padding: 7px;
    background-color: #fff;
    border-radius: 50%;
    margin: 4px;
    transition: 0.3s ease-out;
}
.home-product .item a:hover .read-more span { border: 1px solid var(--sub) }
.home-product .item a:hover .read-more img { background-color: var(--sub); }
@media (min-width: 569px) { 
    .home-product { padding-bottom: 90px; }
    .home-product .item:nth-child(2n) a { top: 90px; }
}
@media (max-width: 1024px) {
    .home-product .item a { margin: 15px 8px; }
    .home-product .item a .box { padding: 50px 15px 5px 15px; }
    .home-product .item a h4 { font-size: 14px; }
}
@media (max-width: 568px) { .home-product { padding: 0 8px; } }

.home-product-image { padding: 20px 0 60px 0; }

.home-product-image .list-images p {
    width: 33.33%;
    margin: 0;
}
.home-product-image .list-images p img {
    margin: 20px;
    width: calc(100% - 40px);
    border-radius: 30px;
}
@media (min-width: 569px) {
    .home-product-image .list-images p:nth-child(3n+2) {
        position: relative;
        top: 50px;
    }
    .home-product-image .list-images { margin-bottom: 50px; }
}
@media (max-width: 568px) {
    .home-product-image .list-images p { width: 50%; }
    .home-product-image .list-images p img {
        margin: 10px;
        width: calc(100% - 20px);
        border-radius: 20px;
    }
    .home-product-image .list-images { margin: 0 20px }
}


/*trang chu - gioi thieu*/
.home-about { padding: 50px 0 150px 0; overflow:hidden }
.home-about .layer {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: #00000090;
}
.home-about .box { margin: 30px }
.home-about .box .image img { width: 100%; }
.home-about .bottom {
    width: 100%;
    display: flex;
    justify-content: center;    
}
.marquee {
    opacity: 0.2;
    width: 1600px;
    font-family: 'mainb2';
    text-transform: uppercase;
    color: #fff;
    font-size: 80px;
    margin: 0 auto;
    white-space: nowrap;
    overflow: hidden;
    position: absolute;
}
.marquee span {
    display: inline-block;
    padding-left: 100%;
    animation: marquee 20s linear infinite;
}
.marquee2 span { animation-delay: 10s; }
  
@keyframes marquee {
    0% { transform: translate(0, 0); }
    100% { transform: translate(-100%, 0); }
}
@media (max-width: 1280px) {
    .home-about .top .content h2 span {
        font-size: 48px !important;
    }
}
@media (min-width: 569px) { .home-about .top { margin: 0 -30px; }  }
.home-about .mondial-button { color: var(--sub); }



/*trang chu - khach hang*/
@keyframes scroll1 {
    0% { transform: translateX(0); }
    100% { transform: translateX(calc(-250px * 7)); }
}
.list-logos-nav button {
    border-radius: 50%;
    top: calc(50% - 15px);
    transform: translate(0, -50%);
    position: absolute;
    line-height: 1;
    font-size: 32px;
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 0.3s ease-out;
}
.list-logos-nav button:hover {
    background-color: var(--main);
    color: #fff;
}
.list-logos-nav button span {
    margin-bottom: 4px;
}
.list-logos-prev { 
    left: 0;
}
.list-logos-next { 
    right: 0;
}
.home-customers .list-logos .owl-item { background-color: transparent !important;}
.home-customers .list-logos p { margin: 20px; }

@media (min-width: 569px) { 
    .home-customers { padding: 50px 50px 0 50px; } 
    .list-logos-prev { left: -40px; }
    .list-logos-next { right: -40px; }
}

@media (max-width: 568px) { 
    .home-customers { padding: 50px 20px; } 
    .list-logos-prev { left: -10px; }
    .list-logos-next { right: -10px; }
}

/*trang chu tin tuc - home news*/

.home-news .item {
    margin: 30px 0px;
    padding-top: 30px;
    border-top: 1px solid #808080;
}

.home-news .item .thumbnail {
    overflow: hidden;
    width: 100%;
    height: 100%;
}
.home-news .item .thumbnail img {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: 0.5s;
}
.home-news .item .box h4,
.home-news .item .box .description {
    -webkit-line-clamp: 4;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
}
.home-news .item .box h4 {
    line-height: 1.3;
    margin: 0;
}
.home-news .item .box h4 a:hover {
    color: var(--main);
}
.home-news .item .date {
    letter-spacing: 1px;
    font-size: 13px;
    display: inline-block;
    margin-top: 10px;
    padding: 7px 15px;
    background-color: var(--sub);
    line-height: 1;
    font-family: 'mainb';
}

.home-news .item .box-3 {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.home-news .mondial-button { justify-content: flex-end;}
@media (min-width: 769px) { 
    .home-news .item .thumbnail { padding-top: 50%; }
    .home-news .item .box-2 { margin: 0 30px; }
    .home-news .item .box h4 { font-size: 24px;}
}
@media (max-width: 768px) {
    .home-news .item .thumbnail { padding-top: 60%; }
    .list-news { margin: 0 30px; }
    .home-news .item .box-2 {
        margin: 20px 0;
    }
}
/*trang trong*/

.single-post-content .wp-block-heading,
.single-post-content h2, .single-post-content h3, .single-post-content h4, .single-post-content h5,
.single-post-content p,
.single-post-content ul,
.single-post-content blockquote {
    max-width: 860px;
    margin-left: auto;
    margin-right: auto;
}
.single-post-content blockquote {
    border-left: 3px solid var(--sub);
    padding-left: 30px;
}
.single-post-content ul li { margin: 10px 0 10px 20px; }
.single-post-content p:has(img) { max-width: 100%; }
.single-post-content ul.slick-dots { margin: auto; }
.single-post-content  button.slick-arrow { background: #fff !important; border-radius: 50% };

.entry-title {
    padding-top: 50px;
}
@media (min-width: 569px) { .page-content { padding: 50px 0px; } }
@media (max-width: 568px) { .page-content { padding: 0 30px 50px 30px; } }

/*trang gioi thieu nguyen huynh*/
.nguyen-huynh { 
    padding: 80px 0;
    background: var(--dark) 
}
.wp-block-separator {
    border-bottom: 0;
}
.nguyen-huynh-quote p,
.nguyen-huynh-cover p {
    font-family: 'mainb';
}
.nguyen-huynh-cover .wp-block-cover__inner-container {
    max-width: 860px;
}
.nguyen-huynh-cover .wp-block-cover__inner-container,
.nguyen-huynh-quote .wp-block-media-text__content {
    margin: 100px 40px;
    padding: 40px;
    background-color: #f6fcff;
    border: 3px solid var(--dark);
    box-shadow: 10px 10px 10px -5px #1a2310;
}

@media (max-width: 568px) { 
    .nguyen-huynh .wrapper-center { margin: 0 30px; }
    .nguyen-huynh-cover.wp-block-cover { padding: 0; }
    .nguyen-huynh-cover .wp-block-cover__inner-container,
    .nguyen-huynh-quote .wp-block-media-text__content {
        padding: 25px;
        margin: 100px 15px;
    }
    .nguyen-huynh-quote {
        margin: 0 -30px;
    }
    .nguyen-huynh .wp-block-columns.has-background { padding: 0 !important; }
}

/*trang 404*/ 
.head-title-404 h2 { 
    color: var(--main);
    margin: 30px;
}
.mondial-404 .line {
    top: 50%;
    left: 0%;
    width: 100%;
    height: 160px;
    transform: translate(0%, -50%);
    background-image: linear-gradient(305deg, 
    #50944330 25%, #ffffff00 25%, #ffffff00 50%, 
    #50944330 50%, #50944330 75%, #ffffff00 75%, #ffffff00 100%);
    background-size: 100px 142px;
}
.number-404 { height: 200px; }
.number-404 .number {
    font-size: 160px;
    line-height: 1;
    color: #00000000;
    -webkit-text-fill-color: #f1f1f1;
    -webkit-text-stroke-width: 2px;
    -webkit-text-stroke-color: var(--main);
    text-shadow: 0px 8px var(--main);
}
.mondial-404 .return-home { margin: 30px 0; }


/*trang tin tuc*/
/*danh muc*/
.list-categories { height: 0px; }
.list-categories ul {
    position: relative;
    z-index: 2;
    top: -30px;
    padding: 10px;
    margin: 0;
    background-color: var(--main);
    list-style: none;
}
.list-categories ul li { margin: 0; }

.list-categories ul li a {
    width: calc(100% + 2px);
    position: relative;
    padding: 12px 25px;
    color: #fff;
    line-height: 1;
    font-family: 'mainb';
    display: inline-block; 
}
.list-categories ul li:not(:last-child) a::after {
    position: absolute;
    content: "";
    width: 2px;
    height: 26px;
    background-color: #fff;
    top: 50%;
    right: 0px;
    transform: translate(0%, -50%);
}
.list-categories ul li a:hover {
    background-color: #fff;
    color: var(--main);
}
/*end danh muc*/

.mondial-post { overflow: hidden; }
.news-item-grid {
    background-color: #fff;
    border: 1px solid #ddd;
    display: block;
	height: calc(100% - 30px);
    margin: 15px 10px;
}
.news-item-grid:hover { box-shadow: 0px 8px 10px 0px #00000080; }
.news-item-grid .info { padding: 20px; }
.news-item-grid .post-time {
    top: 0;
    left: 50%;
    transform: translate(-50%, -15px);
    display: inline-block;
    font-size: 13px;
    padding: 5px 15px;
    background-color: var(--sub);
}
.news-item-grid h4.title {
    font-size: 16px;
    margin: 5px 0 0 0;
    line-height: 1.4;
	overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    transition: 0.3s ease-out;
}
.news-item-grid:hover h4.title { color: var(--lgray) }
@media (max-width: 1024px) { .news-item-grid h4.title {
    font-size: 15px;
} }


/*navigation*/
.navigation {
	padding: 30px 10px 20px 10px;
	width: 100%;
	text-align: center;
}
.navigation ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
	padding: 0;
	margin: 0;
}
.navigation li {
    display: inline-block;
    margin: 5px 3px;
}

.navigation li a,
.navigation li a:hover,
.navigation li.active a,
.navigation li.disabled {
    display: inline-block;
    padding: 5px 13px;
    color: #000;
    background-color: #fff;
    cursor: pointer;
    font-family: 'mainb';
}

.navigation li a:hover {
    color: #fff;
    background-color: var(--main);
}
.navigation li.active a {
    background-color: var(--sub);
}
/*end navigation*/




/*css breadcrumb - nut - tieu de - menu */
.ani-slide {
    position: relative;
    z-index: 10;
}
.ani-slide.slide-left { transform: translate3d(-100px, 0px, 0px); }
.ani-slide.slide-right { transform: translate3d(100px, 0px, 0px); }
.ani-slide.slide-top { transform: translate3d(0px, -100px, 0px); }
.ani-slide.slide-bottom { transform: translate3d(0px, 100px, 0px); }
.ani-slide.slide-left,
.ani-slide.slide-right,
.ani-slide.slide-top,
.ani-slide.slide-bottom {
    opacity: 0;
    transition: all 800ms ease-out;
}
.ani-slide.slide-left.in-view,
.ani-slide.slide-right.in-view,
.ani-slide.slide-top.in-view, 
.ani-slide.slide-bottom.in-view {
    opacity: 1;
    transform: translate3d(0px, 0px, 0px);
    z-index: 0;
}
/*nut mondial-button*/
.mondial-button {
    font-size: 18px;
    font-family: 'mainb';
    display: inline-flex;
    align-items: center;
    margin-top: 15px;
    background-image:linear-gradient(to right, var(--main), var(--sub));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 300% 100%;
    background-position: top left;
    transition: all 0.5s ease-out;
}
.mondial-button span { display: block; }
.mondial-button>span {
    border-radius: 50%;
    padding: 3px;
    border: 1px solid var(--main);
    margin-left: 5px;
    transition: all 0.5s ease-out;
}
.mondial-button>span>span {
    padding: 8px;
    background-color: var(--main);
    border-radius: 50%;
    transition: all 0.5s ease-out;
}
.mondial-button img { 
    width: 14px;
    transition: all 0.5s ease-out;
}
.mondial-button:hover img { filter: brightness(100) invert(1); }
.mondial-button:hover { 
    background-position: top left 100%;
}
.mondial-button:hover>span { border: 1px solid var(--sub) }
.mondial-button:hover>span>span { background-color: var(--sub); }



/*breadcrumb*/
.breadcrumb-posts {
    background-color: var(--sub);
    padding: 10px 20px;
}
.breadcrumb-posts * { 
    font-size: 12px;
    line-height: 1.4; 
}
.breadcrumb-posts a.home-url img { width: 16px;}
.breadcrumb-posts a.home-url:hover>img {
    filter: invert(48%) sepia(13%) saturate(3207%) hue-rotate(30deg) brightness(100%) contrast(120%);
}
.breadcrumb-posts a { display: flex; }
.breadcrumb-posts a:hover { color: var(--main); }
.breadcrumb-posts ul,
.breadcrumb-posts ul li {
    list-style: none;
    margin: 0;
    padding: 0;
}
/*end breadcrumb*/


/*main title*/
.mondial-title { margin: 50px 0 30px 0; }
.mondial-title h2 { font-size: 48px; margin: 0 }
@media (max-width: 568px) { .mondial-title h2 { font-size: 40px; margin: 20px 0px; } }

/*trang bao chi*/
.list-sub-cat a {
    border: 3px solid #fff;
    background-color: #fff;
    transition: 0.3s ease-out;
}
.list-sub-cat a img {
    object-fit: contain;
    margin: auto;
}
.list-sub-cat a:hover { background-color: var(--sub); }
.news-item-list .sub-cat-logo {
    z-index: 1;
    top: 5px;
    left: 5px;
    max-width: 100px;
    max-height: 50px;
    object-fit: contain;
}
@media (min-width: 569px) { 
    .list-sub-cat a { 
        padding: 10px 20px;
        margin: 10px;
    }
    .list-sub-cat a img {
        width: 160px;
        height: 80px;
    }
}
@media (max-width: 568px) { 
    .list-sub-cat a { 
        padding: 10px;
        margin: 5px;
    }
    .list-sub-cat a img {
        width: 100px;
        height: 50px;
    }
}


/*trang tin tuc danh muc tin tuc*/
article.has-post-thumbnail>img { display: none; }
h1.entry-title {
    color: var(--main);
    text-transform: uppercase;
    text-align: center;
}
.post-title h1 { 
    margin: 0 auto;
    color: var(--main);
}
.post-title,
.page-title { padding: 60px 0px 30px 0px; }
.news-item-list { margin: 0 20px }
.news-item-list, .mondial-post { padding-bottom: 50px; }
@media (min-width: 569px) { 
    .page-title h1, .post-title h1 { max-width: 90%; }
}
@media (max-width: 568px) { 
    
    .post-title { 
        text-align: left;
        margin: 0 30px;
     }
    .box-detail, .box-related { margin: 30px; } 
}
.post-title .post-time,
.title-category {
    font-size: 13px;
    letter-spacing: 1px;
    line-height: 1;
    font-family: 'mainb';
    display: inline-block;
    background-color: var(--sub)
}
.post-title .post-time,
.title-category {
    padding: 8px 15px 7px 15px;
    margin-bottom: 10px;
}
.title-category:hover {
    color: #fff;
    background-color: var(--main);
} 
.single-post-content { padding-bottom: 30px; }


/*tin lien quan - related post*/
.list-related-post { margin: 0 -10px }
.related-post {
    background-color: #fff;
    margin: 10px;
}
.related-post:hover { background-color: var(--sub); }
.related-post .post-time {
    padding-bottom: 5px;
    font-size: 13px;
    color: var(--main);
    transition: 0.3s ease-out;
}
.related-post .info { padding: 10px 15px; }
.related-post h4 {
    font-size: 15px;
    margin: 0;
    -webkit-line-clamp: 3;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    transition: 0.3s ease-out;
}
.post-item-thumbnail {
    overflow: hidden;
    position: relative;
    width: 100%;
    padding-top: 60%;
}
.post-item-thumbnail img {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: 0.5s;
}
.related-post:hover .post-item-thumbnail img,
.news-item-grid:hover .post-item-thumbnail img { transform: scale(1.1); }
@media (max-width: 568px) { 
    .related-post h4  {
        font-size: 14px;
    }
}

/*normal-news*/
#mondial_posts .decor {
    opacity: 0.05;
    top: 0px;
    left: -300px;
    z-index: -1;
}
@media (min-width: 569px) { 
    .normal-news-list .item { width: 50%; }
}
@media (max-width: 568px) { 
    .normal-news-list { margin: 0 20px }
    .normal-news-list .item { width: 100%; }
}
.normal-news-list .item a {
    background-color: #fff;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    margin: 10px;
    height: calc(100% - 20px);
}
.normal-news-list .item a:hover { background-color: var(--main); }
.normal-news-list .item .thumbnail {
    overflow: hidden;
    position: relative;
    padding-top: 66.66%;
}
.normal-news-list .item .thumbnail img {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: 0.5s;
}
.normal-news-list .item a:hover .thumbnail img { transform: scale(1.1); }
.normal-news-list .item time {
    background-color: var(--sub);
    padding: 5px 10px;
    font-size: 12px;
    font-family: 'mainb';
    letter-spacing: 1px;
}
.normal-news-list .item:nth-child(-n+2) .box { 
    text-align: center;
    width: 100%; 
}
.normal-news-list .item .info { margin: 20px; }
.normal-news-list .item:nth-child(-n+2) .info { margin: 20px; }
.normal-news-list .item:not(:nth-child(-n+2)) .info { margin: 10px 15px }
.normal-news-list .item:not(:nth-child(-n+2)) h4 {
    margin: 10px 0;
}

.normal-news-list .item h4 {
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    transition: 0.3s ease-out;
}
.normal-news-list .item a:hover h4 { color: #fff; }
.normal-news-list .item:not(:nth-child(-n+2)) .box { width: 50%}

@media (max-width: 568px) { 
    .normal-news-list .item:not(:nth-child(-n+2)) h4 { font-size: 14px; }
}

/*course-news*/

.course-news-list a {
    box-shadow: 0 5px 14px -5px #808080;
    background-color: #fff;
    overflow: hidden;
    margin: 15px;
    display: block;
    border-radius: 8px;
}
.course-news-list .item .thumbnail {
    overflow: hidden;
    position: relative;
    padding-top: 66.66%;
}
.course-news-list .item .thumbnail img {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: 0.5s;
}
.course-news-list .item a:hover .thumbnail img { transform: scale(1.1); }
.course-news-list .item a .layer {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: #00000020;
    z-index: 1;
}
.course-news-list .item a .box {
    align-items: flex-end;
    justify-content: space-between;
    padding: 20px;
}
.course-news-list .item a h4 {
    margin: 0;
    width: calc(100% - 50px);
    transition: 0.3s ease-out;
}
.course-news-list .item a:hover h4 { color: var(--main) }
.course-news-list .item a .read-more {
    bottom: 15px;
    right: 15px;
    display: inline-block;
    border-radius: 50%;
    border: 1px solid var(--main);
    margin-left: 10px;
}
.course-news-list .item a .read-more img {
    padding: 8px;
    background: var(--main);
    border-radius: 50%;
    margin: 4px;
    width: 32px;
    transition: 0.3s ease-out;
}
.course-news-list .item a:hover .read-more { border: 1px solid var(--sub) }
.course-news-list .item a:hover .read-more img { background: var(--sub); }
@media (min-width: 769px) { 
    .course-news-list { padding-bottom: 50px; }
    .course-news-list .item:nth-child(3n + 2) a { top: 50px; }
}
@media (min-width: 569px) { 
    .course-title { padding: 30px 15px; }
}
@media (max-width: 568px) { 
    .course-title { padding: 30px; }
    .course-news-list { margin: 0 15px }
    .course-news-list .item a h4 { font-size: 15px; }
}



/*Edit button*/
.edit-link {
    margin: 20px;
    text-align: center;
    display: block;
    width: calc(100% - 40px);
}
.post-edit-link {
    font-family: 'mainb';
    display: inline-block;
    padding: 8px 30px;
    color: #fff;
    background-color: var(--main);
    border: 2px solid var(--main);
    line-height: 1;
    transition: 0.3s ease-out;
}
.post-edit-link:hover {
    color: var(--main);
    background-color: #fff;
}





/*trang san pham*/
/*breadcrumb san pham*/
.mondial-product-breadcrumb {
    background-color: var(--main);
    padding: 10px 30px;
}
.mondial-product-breadcrumb .woocommerce-breadcrumb,
.mondial-product-breadcrumb .woocommerce-breadcrumb a {
    color: #fff !important;
    font-size: 12px;
}
.woocommerce-breadcrumb .breadcrumb-separator::after {
    opacity: 0.5 !important;
}
.mondial-product-breadcrumb .woocommerce-breadcrumb a:hover {
    color: var(--sub) !important;
}
.mondial-product-breadcrumb .woocommerce-breadcrumb .breadcrumb-separator {
    padding: 0 15px;
}
/*end breadcrumb san pham*/



/*danh muc san pham*/
.category-info-post { overflow: hidden; }
@media (max-width: 568px) { .category-info-post { padding: 0 30px } }
.category-info-post .decor {
    opacity: 0.5;
    z-index: -1;
}
.category-info-post .decor-1 {
    top: 0;
    right: -500px;
}
.category-info-post .decor-2 {
    bottom: 0;
    left: -500px;
}
.category-info-post h2,
.category-info-post h3,
.category-info-post h4,
.category-info-post p,
.category-info-post ul {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}
.category-info-post ul {
    padding: 10px 20px;
    border: 2px solid var(--sub);
    border-radius: 20px;
}
.category-info-post ul li {
    margin: 10px 0 10px 20px;
}
.category-info-post p:has(img) { max-width: 100%; }


/*trang danh muc san pham*/
.mondial-products-header h1 {
    margin: 60px 30px 10px 30px;
}
ul.products {
    display: flex;
    flex-wrap: wrap;
}
@media (min-width: 569px) {
    ul.products { justify-content: space-between; }
}
@media (max-width: 568px) {
    ul.products { margin: 0 20px !important }
    ul.products li { margin: 20px !important; }
}

.products li a { 
    border-radius: 20px;
    overflow: hidden;
    position: relative; 
}
.products li a>img { transition: 0.3s ease-out;}
.products li a:hover>img { 
    transform: scale(1.1);
    filter: blur(3px);
 }

 .products li .layer {
    background: linear-gradient(transparent, #00000030, #00000050);
    width: 100%;
    height: 90%;
    left: 0;
    bottom: 0;
}
.products li .read-more {
    bottom: 15px;
    right: 15px;
    display: inline-block;
    border-radius: 50%;
    border: 1px solid var(--sub);
    padding: 3px;
    z-index: 2;
    transition: 0.3s ease-out;
}
.products li .read-more img {
    padding: 8px;
    background: var(--sub);
    border-radius: 50%;
    width: 30px;
    transition: 0.3s ease-out;
}
.products li a:hover .read-more { border: 1px solid #fff; }
.products li a:hover .read-more img { background: #fff; }

.products li .product-info {
    z-index: 1;
    color: #fff;
    left: 0;
    bottom: 0;
    width: 100%;
    padding: 20px 20px 25px 25px;
    background: linear-gradient(transparent, #000000aa);
}
.products li .product-category {
    font-family: 'mainb';
    font-size: 15px;
    display: inline-block;
    transition: 0.5s ease-out;
}

.products li .product-sku span { font-family: 'mainb2'; }
.products li .product-sku {
    font-size: 13px;
    line-height: 1;
    padding: 5px 0;
    color: var(--sub);
    border-top: 1px solid var(--sub);
    border-bottom: 1px solid var(--sub);
}
.products li a:hover .product-sku {
    color: #fff;
    border-top: 1px solid #fff;
    border-bottom: 1px solid #fff;
}
.products li .product-name {
    margin: 5px 0 10px 0;
    font-size: 18px;
    color: #fff;

}
.products li a:hover .product-category,
.products li a:hover .product-name { color: var(--sub); }
.sale-tag {
    top: 8px;
    left: -3px;
    position: absolute;
    font-family: 'mainb';
    font-size: 14px;
    line-height: 1;
    padding: 4px 15px;
    background-color: var(--sub);
    transition: 0.3s ease-out;
}
.product-price { margin-top: 10px; }
.product-price span { color: var(--lgray); }



/*trang chi tiet san pham*/
.mondial-product-detail {
    padding-top: 30px;
}
.mondial-product-detail .top .left,
.mondial-product-detail .top .right {
    margin: 30px;
}
.mondial-product-detail .top .left {
    width: calc(100% - 60px);
    height: calc(100% - 60px);
    background-color: #fff;
}
.flex-viewport {
    margin: auto;
}
.woocommerce-product-gallery {
    justify-content: center;
}
.mondial-product-detail h1 {
    margin: 0;
}
.single-product-price {
    margin: 10px 0;
    font-size: 24px;
    color: var(--gray);
    letter-spacing: 1px;
}


.product-short-description {
    margin: 15px 0;
}
.product_meta>span {
    margin: 10px 0;
}
.single-product div.product .product_meta a:hover {
    color: var(--main);
    text-decoration: underline;
}
.quantity input {
    background-color: #fff;
    text-align: center;
    width: 60px;
    border: 2px solid #fff;
}

.woocommerce-tabs ul.tabs li.active::after {
    display: none;
}
.woocommerce-Tabs-panel ol {
    display: flex;
    flex-wrap: wrap;
}

.woocommerce-Tabs-panel table {
    margin: 0;
}
.woocommerce-Tabs-panel table td {
    background-color: unset !important;
    color: var(--gray);
}
.entry-summary .side-buttons {
    top: 0;
    right: 0;
}
.entry-summary .side-buttons a {
    font-size: 14px;
    width: 40%;
    min-width: 200px;
    margin: 10px 10px 10px 0;
    padding: 5px 15px;
    background-color: var(--main);
    color: #fff;
    border: 2px solid var(--main);
}
.entry-summary .side-buttons a:hover {
    background-color: #fff;
    color: var(--main);
}


.support-order {
    padding: 30px 0;
}
.support-order .box-in {
    margin: 30px;
}
.support-order .info p {
    font-family: 'mainb';
    line-height: 1;
    color: #fff;
}
.support-order .info .hotline {
    line-height: 1;
    font-family: 'mainb';
    letter-spacing: 1px;
    font-size: 50px;
}
.related-products {
    margin: 50px 0;
}

/*trang thanh toan - checkout*/
.wc-proceed-to-checkout {
    text-align: right;    
}
.place-order .button.alt {
    width: 100%;
}
.place-order .button.alt,
.button-add-to-cart,
.wc-proceed-to-checkout .button.alt,
.woocommerce-cart-form button {
    text-transform: uppercase;
    font-family: 'mainb';
    background-color: var(--sub);
    transition: 0.3s ease-out;
}
.place-order .button.alt:hover,
.button-add-to-cart:hover,
.wc-proceed-to-checkout .button.alt:hover,
.woocommerce-cart-form button:hover {
    background-color: var(--main);
    color: #fff;
}
#order_review #payment .place-order {
    background-color: unset;
}
.woocommerce-privacy-policy-text p a {
    font-family: 'mainb';
}
.woocommerce-privacy-policy-text p a:hover {
    color: var(--sub);
}
/*xac nhan don hang*/
.woocommerce-column__title,
.woocommerce-order-details__title {
    text-transform: uppercase;
    font-size: 20px;
    color: var(--main);
}
.woocommerce-table--custom-fields,
.order_details {
    border-collapse: collapse;
    border: 1px solid #ddd;
}
.woocommerce-table--custom-fields th,
.woocommerce-table--custom-fields td,
.order_details th,
.order_details td {
    border: 1px solid #ddd;
}
table.woocommerce-table--custom-fields:not( .has-background ) th,
table.woocommerce-table--custom-fields:not( .has-background ) td,
table.woocommerce-table--custom-fields:not( .has-background ) tbody tr:nth-child(2n) td,
table.order_details:not( .has-background ) th,
table.order_details:not( .has-background ) td,
table.order_details:not( .has-background ) tbody tr:nth-child(2n) td {
    background-color: #fff;
}

/*thong bao*/
.woocommerce-message {
    text-align: center;
    margin: 0 !important;
}
.woocommerce-message a {
    display: inline-block;
}


/*responsive*/
@media (min-width: 769px) {
    .dw800 {
        max-width: 800px;
        margin: 15px auto;
    } 
}
@media (min-width: 569px) {
	.dom { display: none; }
  

    /*trang chi tiet san pham - single product detail*/
    .mondial-product-detail .top,
    .notice-detail,
    .support-order .box {
        margin: 0 -30px;
    }

    /*trang tin tuc - news*/
    .news-item-list { margin: 0 -10px; }

}

@media (max-width: 568px) {
    .dod { display: none; }
    .tcm { text-align: center !important; }

    /*trang tin tuc*/




    /*trang chi tiet san pham - single product detail*/
    .support-order h2,
    .notice-detail h2,
    .woocommerce-tabs ul.tabs li a { line-height: 1.3; }
    .related-products { margin: 50px 30px 30px 30px; }
   
    .support-order h2 { margin: 30px; }
    .woocommerce-tabs { margin: 0 30px; }
    .woocommerce-Tabs-panel table tr {
        display: flex;
        flex-wrap: wrap;
    }
    .woocommerce-Tabs-panel table tr>td { width: 100% !important; }
    .woocommerce-Tabs-panel table tr>td table td img {
        text-align: left;
        display: block;
        float: unset;
        margin-left: unset;
    }
    .woocommerce-Tabs-panel table tr>td table td { padding: 10px 0; }
    .woocommerce-Tabs-panel table tr>td table td h4 { margin: 0 0 15px 0; }
}