* {



    user-select: text !important;



}







body {



    font-family: "Roboto", sans-serif;



    font-display: swap;



    color: #222



}







body.activeMenu {



    overflow: hidden



}







body.activeMenu .menuBar__wrap {



    transition: .15s ease-in-out;



    opacity: 1;



    visibility: visible;



    pointer-events: all



}







body.activeMenu .menuBar .closeMenu {



    transition: .15s ease-in-out;



    transition-delay: .3s;



    transform: translateX(0);



    opacity: 1



}







body.activeMenu .menuPrimary {



    transition: .15s ease-in-out;



    transition-delay: .3s;



    transform: translateY(0);



    opacity: 1



}







* {



    margin: 0;



    padding: 0;



    -webkit-box-sizing: border-box;



    box-sizing: border-box



}







table {



    width: 100%



}







a {



    text-decoration: none;



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



    -o-transition: .15s ease-in-out;



    transition: .15s ease-in-out;



    color: inherit



}







img, iframe, video {



    max-width: 100%



}







.container {



    max-width: 1404px;



    padding: 0px 18px



}







.slick-dots {



    display: flex;



    justify-content: center;



    gap: 12px



}







.slick-dots li {



    display: block;



    width: 10px;



    height: 10px;



    margin: 0;



    padding: 0;



    border-radius: 50%;



    border: 0;



    background: #1A3A75;



    opacity: 0.5;



    transition: .3s ease-in-out



}







.slick-dots li.slick-active {



    opacity: 1



}







.slick-dots li > * {



    display: none !important



}







@media (min-width: 991px) {



    .border-start-lg {



        border-left: 1px solid var(--bs-border-color)



    }



}







@media (min-width: 991px) {



    .border-end-lg {



        border-right: 1px solid var(--bs-border-color)



    }



}







.btnPrimary {



    background: #1A3A75;



    border: 0;



    color: #fff;



    font-size: 16px;



    font-weight: 700;



    text-transform: uppercase;



    padding: 12px 35px;



    border-radius: 8px;



    transition: .15s ease-in-out



}







.btnPrimary:hover {



    background: #e00;



    color: #fff;



    transform: translateY(-2px);



    box-shadow: 0px 2px 8px -2px rgba(0, 0, 0, 0.2)



}







.btnPrimary:focus {



    box-shadow: none;



    border: 0;



    outline: 0



}







@keyframes nhapnho {



    0% {



        transform: translateY(0)



    }



    100% {



        transform: translateY(-20px)



    }



}







@keyframes nhapnhay {



    0% {



        transform: scale(1);



        color: #fff



    }



    100% {



        transform: scale(1.1);



        color: #FFC600



    }



}







@keyframes lac {



    0% {



        transform: rotate(0)



    }



    10% {



        transform: rotate(-25deg)



    }



    20% {



        transform: rotate(25deg)



    }



    30% {



        transform: rotate(-25deg)



    }



    40% {



        transform: rotate(25deg)



    }



    50% {



        transform: rotate(0)



    }



    100% {



        transform: rotate(0)



    }



}







@keyframes hotline_before {



    0% {



        transform: scale(0.4);



        opacity: 0



    }



    50% {



        transform: scale(0.8);



        opacity: 1



    }



    100% {



        transform: scale(1);



        opacity: 0



    }



}







@keyframes hotline_after {



    0% {



        transform: scale(0.5)



    }



    100% {



        transform: scale(1)



    }



}







.hotline-ani {



    display: flex;



    justify-content: center;



    align-items: center;



    width: 80px;



    height: 80px;



    background: none;



    position: fixed;



    bottom: 0px;



    left: 0px;



    z-index: 99



}







@media only screen and (max-width: 767px) {



    .hotline-ani {



        bottom: 80px



    }



}







.hotline-ani:before, .hotline-ani:after {



    content: "";



    position: absolute;



    border-radius: 50%;



    overflow: hidden



}







.hotline-ani:before {



    z-index: 1;



    border: 2px solid #0A3970;



    width: 100%;



    height: 100%;



    animation: 1s hotline_before ease-in-out 0s infinite



}







.hotline-ani:after {



    z-index: 2;



    background: rgba(10, 57, 112, 0.3);



    width: 80%;



    height: 80%;



    animation: 1s hotline_after 0s ease-out infinite alternate



}







.hotline-ani .icon-hotline-ani {



    position: absolute;



    width: 50%;



    height: 50%;



    border-radius: 50%;



    overflow: hidden;



    box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.1);



    animation: 1s lac 0s ease-in infinite;



    z-index: 3



}







.hotline-ani .hotline-number {



    position: absolute;



    left: 50%;



    white-space: nowrap;



    background: #0A3970;



    color: #fff;



    padding: 0px 20px 0px 40px;



    display: flex;



    align-items: center;



    height: 50%;



    border-radius: 0px 40px 40px 0px



}







.hotline-ani.zalo-ani {



    bottom: 90px



}







@media only screen and (max-width: 767px) {



    .hotline-ani.zalo-ani {



        bottom: 170px



    }



}







.hotline-ani.zalo-ani:before {



    border-color: #0A94E3



}







.hotline-ani.zalo-ani:after {



    background: rgba(10, 148, 227, 0.3)



}







.header {



    background: white;



    border-bottom: 1px solid #E1E1E1;



    position: relative;



    z-index: 99



}







.header__logo {



    width: fit-content



}







.header__logo img {



    height: 75px



}







.header__divider {



    display: block;



    height: 24px;



    width: 0;



    border-right: 1px solid #1A3A75



}







.header__acc .icon {



    height: 24px;



    width: 24px;



    object-fit: contain



}







.header__acc .avata {



    width: 34px;



    height: 34px;



    border-radius: 50%;



    object-fit: cover



}







.header__acc .name {



    color: #222;



    font-size: 15px;



    font-weight: 600;



    line-height: normal



}







@media (min-width: 991px) {



    .header__menu {



        margin: 0;



        padding: 0;



        padding-right: 12px;



        display: flex;



        gap: 24px



    }







    .header__menu .menu-item {



        display: block;



        width: fit-content;



        position: relative



    }







    .header__menu .menu-item .menu-link {



        display: flex;



        align-items: center;



        min-height: 124px;



        gap: 8px;



        color: #1A3A75;



        font-size: 20px;



        font-weight: 500;



        line-height: normal;



        transition: .15s ease-in-out



    }







    .header__menu .menu-item.hasChild > .menu-link::after {



        content: "\f078";



        font-family: "Font Awesome 5 Pro";



        font-weight: 500;



        font-size: 14px



    }







    .header__menu .menu-item .subMenu {



        position: absolute;



        top: 110px;



        left: 0;



        display: flex;



        flex-direction: column;



        width: auto;



        min-width: 200px;



        background: white;



        box-shadow: 0px 2px 5px -2px rgba(0, 0, 0, 0.2);



        transition: .15s ease-in-out;



        opacity: 0;



        visibility: hidden;



        pointer-events: none;



        margin: 0;



        padding: 0;



        list-style: none



    }







    .header__menu .menu-item .subMenu li {



        display: block;



        width: 100%;



        border-bottom: 1px solid #E1E1E1



    }







    .header__menu .menu-item .subMenu li:last-child {



        border-bottom: 0



    }







    .header__menu .menu-item .subMenu li a {



        display: block;



        width: 100%;



        padding: 8px 16px;



        background: transparent;



        transition: .15s ease-in-out;



        color: #1A3A75;



        font-size: 16px;



        font-weight: 500;



        line-height: normal



    }







    .header__menu .menu-item .subMenu li a:hover {



        background: #1A3A75;



        color: white



    }







    .header__menu .menu-item .btnSub {



        display: none



    }







    .header__menu .menu-item:hover > .menu-link {



        color: #e00



    }







    .header__menu .menu-item:hover > .subMenu {



        top: 100%;



        opacity: 1;



        visibility: visible;



        pointer-events: all



    }



}







.header__lang {



    position: relative;



    display: block;



    width: fit-content;



    z-index: 3



}







.header__lang .openLang {



    display: flex;



    align-items: center;



    justify-content: center;



    gap: 8px;



    border: 0;



    background: none;



    color: #1A3A75;



    font-size: 18px;



    font-weight: 600;



    line-height: normal;



    padding: 8px 0px



}







.header__lang .openLang img {



    display: block;



    width: 24px;



    height: 16px;



    object-fit: contain;



    position: relative;



    margin-top: -2px



}







.header__lang .openLang::after {



    content: "\f078";



    font-family: "Font Awesome 5 Pro";



    font-weight: 500;



    font-size: 14px



}







.header__lang .langDropdown {



    position: absolute;



    top: 110%;



    right: 0;



    border: 0;



    border-radius: 6px;



    background: white;



    box-shadow: 0px 0px 8px -2px rgba(0, 0, 0, 0.3);



    padding: 5px;



    margin: 0;



    width: max-content;



    opacity: 0;



    visibility: hidden;



    pointer-events: none;



    transition: .15s ease-in-out



}







.header__lang .langDropdown > .item {



    display: flex;



    align-items: center;



    gap: 8px;



    width: 100%;



    padding: 8px 10px;



    background: transparent;



    color: #222;



    border: 0;



    border-radius: 5px;



    transition: .15s ease-in-out;



    font-size: 16px;



    font-weight: 600



}







.header__lang .langDropdown > .item.cur {



    color: #1A3A75



}







.header__lang .langDropdown > .item:hover {



    background: rgba(0, 0, 0, 0.1)



}







.header__lang:hover .langDropdown {



    opacity: 1;



    visibility: visible;



    pointer-events: all;



    top: 100%



}







@media (max-width: 991px) {



    .header__logo img {



        height: 46px



    }







    .header__right .openMenu {



        width: 40px;



        height: 40px;



        border-radius: 6px;



        border: 1px solid #1A3A75;



        font-size: 18px;



        color: #1A3A75;



        flex-shrink: 0



    }







    .header__right .openMenu:focus {



        box-shadow: none;



        outline: 0



    }







    .header__mobi {



        position: fixed;



        top: 0;



        left: 0;



        display: flex;



        flex-direction: column;



        width: 100%;



        height: var(--vh);



        background: #1A3A75;



        z-index: 999;



        opacity: 0;



        visibility: hidden;



        pointer-events: none



    }







    .header__mobi .closeMenu {



        flex-shrink: 0;



        display: flex;



        align-items: center;



        justify-content: center;



        width: 40px;



        height: 40px;



        margin-left: auto;



        border: 0;



        background: none;



        color: white;



        transform: translateX(-10px);



        opacity: 0



    }







    .header__mobi .closeMenu::before {



        content: "\f00d";



        font-family: "Font Awesome 5 Pro";



        font-weight: 500



    }







    .header__acc .icon {



        filter: invert(1) brightness(2)



    }







    .header__acc .name {



        color: white



    }







    .header__menu {



        margin: 0;



        padding: 0;



        flex-grow: 1;



        display: flex;



        flex-direction: column;



        justify-content: unset !important;



        align-items: unset !important;



        gap: 0;



        width: 100%;



        overflow-y: auto;



        transform: translateY(10px);



        opacity: 0



    }







    .header__menu .menu-item {



        display: block;



        width: 100%;



        position: relative



    }







    .header__menu .menu-item .menu-link {



        display: block;



        width: 100%;



        padding: 16px;



        font-size: 18px;



        font-weight: 500;



        color: white;



        text-transform: capitalize;



        min-height: unset



    }







    .header__menu .menu-item .btnSub {



        position: absolute;



        right: 0;



        top: 0;



        display: flex;



        align-items: center;



        justify-content: center;



        width: 59px;



        height: 59px;



        border: 0;



        background: none;



        color: white



    }







    .header__menu .menu-item .btnSub:focus {



        box-shadow: none;



        border: 0;



        outline: 0



    }







    .header__menu .menu-item .btnSub.active {



        transform: rotate(-180deg)



    }







    .header__menu .menu-item .subMenu {



        padding-left: 2.5rem;



        margin-bottom: 0;



        display: none



    }







    .header__menu .menu-item .subMenu li {



        margin-bottom: 10px



    }







    .header__menu .menu-item .subMenu li::marker {



        color: white



    }







    .header__menu .menu-item .subMenu li a {



        color: white;



        font-size: 16px



    }



}







.activeMenu {



    overflow: hidden



}







.activeMenu .header__mobi {



    transition: .15s ease-in-out;



    opacity: 1;



    visibility: visible;



    pointer-events: all



}







.activeMenu .header__mobi .closeMenu {



    transition: .2s ease-in-out;



    transition-delay: .2s;



    opacity: 1;



    transform: translateX(0)



}







.activeMenu .header__menu {



    transition: .2s ease-in-out;



    transition-delay: .2s;



    opacity: 1;



    transform: translateY(0)



}







.footer {



    --bs-border-color: #FFFFFF33;



    background: #1A3A75;



    color: white



}







.footer__hotline .icon {



    width: 50px;



    height: 50px;



    object-fit: contain



}







.footer__hotline .lbl {



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



    font-size: 16px;



    font-weight: 700;



    line-height: normal;



    margin-bottom: 0



}







.footer__hotline .hotline {



    color: #FFF;



    font-size: 24px;



    font-weight: 700;



    line-height: normal



}







.footer__logo {



    width: fit-content



}







.footer__logo img {



    height: 70px



}







.footer__info {



    color: #FFF;



    font-size: 16px;



    font-weight: 400;



    line-height: normal



}







.footer__title {



    color: #FFF;



    font-size: 16px;



    font-weight: 700;



    line-height: 35px;



    text-transform: uppercase



}







.footer__menu li {



    display: block;



    width: 100%



}







.footer__menu li a {



    color: #FFF;



    font-size: 16px;



    font-weight: 400;



    line-height: 34px;



    transition: .15s ease-in-out



}







.footer__menu li a:hover {



    text-decoration: underline



}







.footer__connect {



    margin-top: 16px;



}

.footer__connect.footer__connect__one {



    margin-top: 31px !important



}

.footer__connect__mobile {
    display: none !important;
}







.footer__connect .bct {



    width: fit-content



}







.footer__connect .bct img {



    height: 49px



}







.footer__connect .social {



    display: flex;



    align-items: center;



    justify-content: center;



    width: fit-content;



    color: white;



    transition: .15s ease-in-out



}







.footer__connect .social:hover {



    transform: translateY(-2px)



}







@media (max-width: 991px) {



    .footer__top {



        padding: 24px 0px



    }



}

@media (max-width: 768px) {
    .footer__connect.footer__connect__one {
        display: none !important;
    }

    .footer__connect__mobile {
        display: flex !important;
        flex-direction: row; 
        align-items: center;
        gap: 8px;
    }
}





.heroSlider__item {



    aspect-ratio: 1920/756;



    background: lightgray



}







.heroSlider__item img {



    height: 100%;



    aspect-ratio: 1920/756;



    object-fit: cover



}







.heroSlider .slick-dots {



    position: absolute;



    bottom: 20px;



    display: flex;



    width: 100%;



    left: 0;



    justify-content: center;



    gap: 12px



}







.heroSlider .slick-dots li {



    display: block;



    width: 12px;



    height: 12px;



    border-radius: 50%;



    background: rgba(255, 255, 255, 0.5);



    margin: 0;



    padding: 0;



    border: 0;



    transition: .3s ease-in-out



}







.heroSlider .slick-dots li.slick-active {



    background: #1A3A75



}







.heroSlider .slick-dots li * {



    display: none



}







.homeExp {



    background: #1A3A75;



    color: white;



    border-top: 1px solid rgba(0, 0, 0, 0.12);



    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);



}







.homeExp__number {



    border-right: 1px solid rgba(255, 255, 255, 0.2)



}







.homeExp__number .number {



    color: #D4D4D4;



    font-size: 128px;



    font-weight: 900;



    line-height: normal;



    text-transform: uppercase



}







.homeExp__number .text {



    color: white;



    font-size: 18px;



    font-weight: 700;



    line-height: 24px



}







.homeExp__content .title {



    color: white;



    font-size: 40px;



    font-weight: 600;



    line-height: normal



}







.homeExp__content .text {



    color: white;



    font-size: 20px;



    font-weight: 500;



    line-height: normal



}







@media (max-width: 991px) {



    .homeExp__number {



        border: 0 !important;



        padding-top: 0 !important;



        padding-bottom: 0 !important



    }







    .homeExp__number .number {



        font-size: 65px;



    }







    .homeExp__content {



        padding-top: 0 !important



    }







    .homeExp__content .title {



        font-size: 91%;



        padding-top: 15px;



    }







    .homeExp__content .text {



        font-size: 66%;



        line-height: 17px;



    }







    .homeExp__number .text {



        font-size: 15px;



        line-height: 20px;



    }



}







.homeHeading {



    border-bottom: 1px solid #1A3A75



}







.homeHeading__title {



    flex-shrink: 0;



    display: block;



    width: fit-content;



    padding: 15px 32px;



    border-radius: 8px 8px 0px 0px;



    background: #1A3A75;



    color: #FFF;



    font-size: 18px;



    font-weight: 700;



    line-height: normal;



    text-transform: uppercase



}







.homeHeading__navs .nav:not(.viewmore) {



    display: flex;



    align-items: center;



    justify-content: center;



    text-align: center;



    width: fit-content;



    padding: 11px 20px 10px;



    border-radius: 9rem;



    color: #1A3A75;



    background: white;



    border: 1px solid #E4E4E4;



    font-size: 14px;



    font-weight: 600;



    line-height: 100%;



    letter-spacing: 0.14px;



    transition: .15s ease-in-out



}







.homeHeading__navs .nav:not(.viewmore):hover {



    background: #1A3A75;



    border-color: #1A3A75;



    color: white



}







.homeHeading__navs .nav.viewmore {



    display: flex;



    align-items: center;



    justify-content: center;



    width: fit-content;



    gap: 8px;



    padding: 6px 0px 5px;



    color: #737270;



    font-size: 14px;



    font-weight: 600;



    line-height: normal;



    transition: .15s ease-in-out



}







.homeHeading__navs .nav.viewmore::after {



    content: "\f054";



    font-family: "Font Awesome 5 Pro";



    font-weight: 400



}







.homeHeading__navs .nav.viewmore:hover {



    color: #1A3A75



}







@media (max-width: 991px) {



    .homeHeading {



        border-bottom: 0



    }







    .homeHeading__title {



        width: 100%;



        border-radius: 8px



    }



}







.prodSearch {



    background: #E6E6E6;



    border-radius: 8px;



    overflow: hidden



}







.prodSearch .form-control {



    flex-grow: 1;



    height: 42px;



    border-radius: 8px 0px 0px 8px;



    border: 1px solid #E1E1E1;



    background: white;



    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25) inset;



    color: black;



    padding: 0px 16px



}







.prodSearch .btnSearch {



    display: flex;



    align-items: center;



    justify-content: center;



    text-align: center;



    width: fit-content;



    padding: 0px 28px;



    border-radius: 0px 8px 8px 0px;



    background: #1A3A75;



    color: white;



    font-size: 16px;



    font-weight: 500;



    line-height: normal;



    border: 0;



    flex-shrink: 0;



    transition: .15s ease-in-out



}







.prodSearch .btnSearch:hover {



    background: #0E1F3F



}







@media (max-width: 991px) {



    .prodSearch .btnSearch {



        font-size: 0;



        padding: 0px 16px



    }







    .prodSearch .btnSearch::before {



        content: "\f002";



        font-family: "Font Awesome 5 Pro";



        font-size: 16px;



        font-weight: 500;



        color: white



    }



}







.homeProd {



    background: #F6F7FA



}







.homeProd .slick-list {



    margin-left: -20px;



    margin-right: -20px;



    padding: 16px 0px



}







.homeProd .slick-list .slick-track {



    display: flex



}







.homeProd .slick-list .slick-slide {



    height: auto;



    padding: 16px 20px



}







.homeProd .slick-list .slick-slide:not([aria-hidden="false"]) .homeProd__item {



    box-shadow: none



}







.homeProd__item {



    border-radius: 8px;



    border: 1px solid #BBB;



    background: white;



    box-shadow: 0 0 15px 0 rgba(1, 86, 255, 0.15);



    transition: .15s ease-in-out



}







.homeProd__item .img {



    aspect-ratio: 282/235;



    background: lightgray;



    border-bottom: 1px solid #E1E1E1;



}







.homeProd__item .img img {



    aspect-ratio: 282/187;



    object-fit: cover;



    transition: .15s ease-in-out



}







.homeProd__item .img:hover img {



    transform: scale(1.1)



}







.homeProd__item .sku {



    color: #1435C3;



    font-size: 14px;



    font-weight: 500;



    line-height: 150%;



    flex-shrink: 0



}







.homeProd__item .title {



    text-align: center;



    font-size: 16px;



    font-style: normal;



    font-weight: 700;



    line-height: 150%;



    flex-grow: 1



}







.homeProd__item .title a {



    display: block;



    width: 100%;



    color: #1A3A75;



    transition: .15s ease-in-out



}







.homeProd__item .title a:hover {



    color: #e00



}







.homeProd__item .detail {



    flex-shrink: 0;



    display: flex;



    align-items: center;



    justify-content: center;



    width: 100%;



    border: 0;



    background: #1A3A75;



    border-radius: 4px;



    text-align: center;



    padding: 9px 16px;



    color: white;



    font-size: 14px;



    font-weight: 600;



    line-height: 100%;



    text-transform: uppercase;



    transition: .15s ease-in-out



}







.homeProd__item .detail:hover {



    background: #0E1F3F;



    transform: translateY(-2px);



    box-shadow: 0px 1px 5px -2px rgba(0, 0, 0, 0.2)



}







.homeProd__item:hover {



    transform: translateY(-2px)



}







@media (max-width: 991px) {



    .homeProd__main {



        padding-left: 0 !important;



        padding-right: 0 !important



    }



}







.slick-slider .slick-arrow {



    display: flex;



    align-items: center;



    justify-content: center;



    width: fit-content;



    transition: .15s ease-in-out;



    z-index: 2



}







.slick-slider .slick-arrow::before {



    font-family: "Font Awesome 5 Pro";



    font-weight: 500;



    font-size: 20px !important;



    color: #1A3A75 !important;



    opacity: 1 !important



}







.slick-slider .slick-arrow.slick-prev {



    left: -3rem



}







.slick-slider .slick-arrow.slick-prev::before {



    content: "\f053"



}







.slick-slider .slick-arrow.slick-next {



    right: -3rem



}







.slick-slider .slick-arrow.slick-next::before {



    content: "\f054"



}







.slick-slider .slick-arrow:hover::before {



    font-size: 22px !important



}







.homeBrand {



    background: #F6F7FA



}







.homeBrand__slider .slick-list {



    margin-left: -20px;



    margin-right: -20px



}







.homeBrand__slider .slick-list .slick-track {



    display: flex



}







.homeBrand__slider .slick-list .slick-track .slick-slide {



    height: auto;



    padding: 16px 20px



}







.homeBrand__item {



    background: white;



    border-radius: 8px;



    border: 1px solid #E1E1E1;



    transition: .15s ease-in-out



}







.homeBrand__item .img {



    aspect-ratio: 2/1;



    background: lightgray;



    border-bottom: 1px solid #e1e1e1;



}







.homeBrand__item .img img {



    aspect-ratio: 2/1;



    object-fit: cover;



    transition: .15s ease-in-out



}







.homeBrand__item .img:hover img {



    transform: scale(1.1)



}







.homeBrand__item .title {



    flex-grow: 1;



    font-size: 16px;



    font-weight: 500;



    line-height: 150%;



    text-transform: capitalize



}







.homeBrand__item .title a {



    color: #1A3A75



}







.homeBrand__item .title a:hover {



    color: #e00



}







.homeBrand__item .viewmore {



    flex-shrink: 0;



    display: flex;



    align-items: center;



    justify-content: center;



    width: 100%;



    border: 0;



    background: #1A3A75;



    border-radius: 4px;



    text-align: center;



    padding: 9px 16px;



    color: white;



    font-size: 14px;



    font-weight: 600;



    line-height: 100%;



    text-transform: uppercase;



    transition: .15s ease-in-out



}







.homeBrand__item .viewmore:hover {



    background: #0E1F3F;



    transform: translateY(-2px);



    box-shadow: 0px 1px 5px -2px rgba(0, 0, 0, 0.2)



}







.homeBrand__item:hover {



    transform: translateY(-2px);



    box-shadow: 0px 2px 8px -3px rgba(0, 0, 0, 0.2)



}







@media (max-width: 991px) {



    .homeBrand__main {



        padding-left: 0 !important;



        padding-right: 0 !important



    }



}







.homeCapacity {



    background: #F6F7FA



}







.homeCapacity__grid {



    grid-template-columns:repeat(3, 1fr);



    grid-template-rows:auto



}







.homeCapacity__item {



    grid-column: span 1;



    grid-row: span 1;



    border-radius: 12px;



    background: #1A3A75;



    transition: .15s ease-in-out



}







.homeCapacity__item .title {



    color: white;



    font-size: 24px;



    font-weight: 700;



    line-height: normal



}







.homeCapacity__item .title .icon {



    height: 70px;



    border-right: 1px solid #BABABA



}







.homeCapacity__item .text {



    color: #FFF;



    text-align: justify;



    font-size: 16px;



    font-weight: 400;



    line-height: 24px



}







.homeCapacity__item:hover {



    transform: translateY(-2px);



    box-shadow: 0px 2px 16px -5px rgba(0, 0, 0, 0.3)



}







@media (max-width: 991px) {



    .homeCapacity__grid {



        grid-template-columns:1fr



    }







    .homeCapacity__item .title {



        font-size: 20px



    }



}







.homeVideo__slider .slick-list {



    margin-left: -38px;



    margin-right: -38px



}







.homeVideo__slider .slick-list .slick-track {



    display: flex



}







.homeVideo__slider .slick-list .slick-track .slick-slide {



    height: auto;



    padding: 0px 38px



}







.homeVideo__item .video {



    aspect-ratio: 342/191;



    border-radius: 16px;



    background: lightgray;



    margin-bottom: 12px



}







.homeVideo__item .video iframe {



    display: block;



    width: 100%;



    height: 100%;



    aspect-ratio: 342/191;



    object-fit: cover



}







.homeVideo__item .title {



    color: #1A3A75;



    font-size: 16px;



    font-weight: 700;



    line-height: normal



}







@media (max-width: 991px) {



    .homeVideo__main {



        padding-left: 0 !important;



        padding-right: 0 !important



    }



}







.homeNews__grid {



    grid-template-columns:5fr 3fr 2fr;



    grid-template-rows:auto



}







.homeNews__itemBig {



    border-radius: 16px;



    grid-column: 1/2;



    grid-row: 1/5



}







.homeNews__itemBig::before {



    content: "";



    position: absolute;



    z-index: 1;



    display: block;



    width: 100%;



    height: 70%;



    bottom: 0;



    left: 0;



    background: linear-gradient(0deg, #1A3A75 22.48%, rgba(26, 58, 117, 0) 85.22%)



}







.homeNews__itemBig .img {



    aspect-ratio: 682/416;



    background: lightgray;



    position: relative;



    z-index: 0



}







.homeNews__itemBig .img img {



    aspect-ratio: 682/416;



    object-fit: cover;



    transition: .15s ease-in-out



}







.homeNews__itemBig .content {



    z-index: 3



}







.homeNews__itemBig .title {



    font-size: 18px;



    font-weight: 700;



    line-height: normal;



    color: white;



    display: -webkit-box;



    width: 100%;



    overflow: hidden;



    text-overflow: ellipsis;



    -webkit-box-orient: vertical;



    -webkit-line-clamp: 2;



    max-height: 42px



}







.homeNews__itemBig .text {



    display: -webkit-box;



    width: 100%;



    overflow: hidden;



    text-overflow: ellipsis;



    -webkit-box-orient: vertical;



    -webkit-line-clamp: 2;



    max-height: 38px;



    color: white;



    font-size: 16px;



    font-weight: 400;



    line-height: normal



}







.homeNews__itemBig:hover .img img {



    transform: scale(1.1)



}







.homeNews__itemNormal .title {



    font-size: 16px;



    font-weight: 700;



    line-height: normal



}







.homeNews__itemNormal .title a {



    color: #1A3A75;



    transition: .15s ease-in-out;



    display: -webkit-box;



    width: 100%;



    overflow: hidden;



    text-overflow: ellipsis;



    -webkit-box-orient: vertical;



    -webkit-line-clamp: 3;



    max-height: 57px



}







.homeNews__itemNormal .title a:hover {



    color: #e00



}







.homeNews__itemNormal:nth-child(2), .homeNews__itemNormal:nth-child(3), .homeNews__itemNormal:nth-child(4), .homeNews__itemNormal:nth-child(5) {



    align-items: center;



    gap: 12px



}







.homeNews__itemNormal:nth-child(2) .img, .homeNews__itemNormal:nth-child(3) .img, .homeNews__itemNormal:nth-child(4) .img, .homeNews__itemNormal:nth-child(5) .img {



    width: 140px;



    border-radius: 8px;



    aspect-ratio: 140/86;



    background: lightgray



}







.homeNews__itemNormal:nth-child(2) .img img, .homeNews__itemNormal:nth-child(3) .img img, .homeNews__itemNormal:nth-child(4) .img img, .homeNews__itemNormal:nth-child(5) .img img {



    aspect-ratio: 140/86;



    object-fit: cover;



    transition: .15s ease-in-out



}







.homeNews__itemNormal:nth-child(2) .img:hover img, .homeNews__itemNormal:nth-child(3) .img:hover img, .homeNews__itemNormal:nth-child(4) .img:hover img, .homeNews__itemNormal:nth-child(5) .img:hover img {



    transform: scale(1.1)



}







.homeNews__itemNormal:nth-child(6), .homeNews__itemNormal:nth-child(7) {



    flex-direction: column;



    gap: 12px



}







.homeNews__itemNormal:nth-child(6) .img, .homeNews__itemNormal:nth-child(7) .img {



    width: 100%;



    aspect-ratio: 256/142;



    border-radius: 16px;



    background: lightgray



}







.homeNews__itemNormal:nth-child(6) .img img, .homeNews__itemNormal:nth-child(7) .img img {



    aspect-ratio: 256/142;



    object-fit: cover;



    transition: .15s ease-in-out



}







.homeNews__itemNormal:nth-child(6) .img:hover img, .homeNews__itemNormal:nth-child(7) .img:hover img {



    transform: scale(1.1)



}







.homeNews__itemNormal:nth-child(6) .title a, .homeNews__itemNormal:nth-child(7) .title a {



    -webkit-line-clamp: 2;



    max-height: 38px



}







.homeNews__itemNormal:nth-child(2) {



    grid-column: 2/3;



    grid-row: 1/2



}







.homeNews__itemNormal:nth-child(3) {



    grid-column: 2/3;



    grid-row: 2/3



}







.homeNews__itemNormal:nth-child(4) {



    grid-column: 2/3;



    grid-row: 3/4



}







.homeNews__itemNormal:nth-child(5) {



    grid-column: 2/3;



    grid-row: 4/5



}







.homeNews__itemNormal:nth-child(6) {



    grid-column: 3/4;



    grid-row: 1/3



}







.homeNews__itemNormal:nth-child(7) {



    grid-column: 3/4;



    grid-row: 3/5



}







@media (max-width: 991px) {



    .homeNews__grid {



        grid-template-columns: 1fr;



        row-gap: 1rem !important;



    }







    .homeNews__itemBig {



        grid-column: span 2;



        grid-row: span 1



    }







    .homeNews__itemNormal {



        grid-column: span 1 !important;



        grid-row: span 1 !important;



        border-bottom: 1px solid rgb(225, 225, 225);



        padding-bottom: 1rem;



    }



}







@media (max-width: 767px) {



    .homeNews__grid {



        grid-template-columns: 1fr;



        row-gap: 1rem !important;



    }







    .homeNews__itemNormal:nth-child(2) {



        border-top: 1px solid rgb(225, 225, 225);



        padding-top: 1rem;



    }







    .homeNews__itemNormal:last-child {



        border-bottom: none;



    }







    .homeNews__itemBig {



        grid-column: span 1



    }







    .homeNews__itemNormal {



        flex-direction: row !important;



        align-items: center !important



    }







    .homeNews__itemNormal .img {



        width: 140px !important;



        flex-shrink: 0 !important



    }







    .homeNews__itemNormal .title {



        flex-grow: 1 !important



    }







    .homeNews__itemNormal .title a {



        -webkit-line-clamp: 3 !important;



        max-height: 57px !important



    }



}







.topPage {



    padding: 66px 0px;



    min-height: 188px;



    background-position: center center;



    background-repeat: no-repeat;



    background-size: cover



}







.topPage__title {



    color: white;



    font-size: 48px;



    font-weight: 700;



    line-height: normal



}







@media (max-width: 991px) {



    .topPage__title {



        font-size: 32px



    }



}







.breadcrumbs {



    color: #222;



    font-size: 16px;



    font-weight: 400;



    line-height: 24px



}







.breadcrumbs a {



    color: #1A3A75;



    display: inline-flex;



    align-items: center;



    margin-right: 12px;



    gap: 12px;



    transition: .15s ease-in-out



}







.breadcrumbs a::after {



    content: "";



    display: block;



    width: 6px;



    height: 6px;



    border-radius: 50%;



    background: #1A3A75



}







.breadcrumbs a:hover {



    color: #0E1F3F



}







.aboutContent__title {



    display: flex;



    align-items: center;



    color: #1A3A75;



    font-size: 25px;



    font-weight: 700;



    line-height: normal;



    text-transform: uppercase;



    gap: 12px



}







.aboutContent__title::before {



    content: "";



    flex-shrink: 0;



    display: block;



    width: 24px;



    height: 24px;



    background-image: url(../images/icons/before-title.svg);



    background-position: center center;



    background-repeat: no-repeat;



    background-size: contain



}







@media (max-width: 991px) {



    .aboutContent {



        text-align: justify



    }



}







.aboutHistory__block {



    position: relative



}







.aboutHistory__block::before {



    content: "";



    position: absolute;



    z-index: 0;



    top: 0;



    right: calc(var(--bs-gutter-x) * .5);



    display: block;



    width: 100%;



    height: 100%;



    border-radius: 20px;



    background: rgba(26, 58, 117, 0.07);



    transform-origin: center right;



    transform: perspective(90px) rotateY(-1deg)



}







.aboutHistory__block .banner {



    width: 135%;



    aspect-ratio: 75/53;



    background: lightgray;



    border-radius: 20px;



    transform-origin: left center;



    transform: perspective(40px) rotateY(1deg);



    position: relative



}







.aboutHistory__block .banner img {



    position: absolute;



    inset: 0;



    width: 100%;



    height: 100%;



    transform-origin: left center;



    transform: perspective(42px) rotateY(-1deg) translateX(-12.5%);



    object-position: center center;



    object-fit: cover



}







.aboutHistory__block .colContent {



    align-items: flex-start;



    padding-left: 3rem !important



}







.aboutHistory__block .content {



    max-width: 600px



}







.aboutHistory__block .year {



    color: rgba(26, 58, 117, 0.5);



    font-size: 30px;



    font-weight: 700;



    line-height: normal



}







.aboutHistory__block .title {



    color: #1A3A75;



    font-size: 30px;



    font-weight: 700;



    line-height: normal



}







.aboutHistory__block .text {



    color: #222;



    text-align: justify;



    font-size: 16px;



    font-weight: 400;



    line-height: 140%



}







.aboutHistory__block:nth-child(2n) {



    flex-direction: row-reverse



}







.aboutHistory__block:nth-child(2n)::before {



    right: unset;



    left: calc(var(--bs-gutter-x) * .5);



    transform-origin: center left;



    transform: perspective(90px) rotateY(1deg)



}







.aboutHistory__block:nth-child(2n) .colBanner {



    align-items: flex-end



}







.aboutHistory__block:nth-child(2n) .banner {



    transform-origin: right center;



    transform: perspective(40px) rotateY(-1deg)



}







.aboutHistory__block:nth-child(2n) .banner img {



    transform-origin: right center;



    transform: perspective(42px) rotateY(1deg) translateX(12.5%)



}







.aboutHistory__block:nth-child(2n) .colContent {



    align-items: flex-end;



    padding-left: calc(var(--bs-gutter-x) * .5) !important;



    padding-right: 3rem !important



}







@media (max-width: 991px) {



    .aboutHistory__block .colContent {



        padding-left: 2rem !important;



        padding-right: 2rem !important



    }







    .aboutHistory__block .title {



        font-size: 20px



    }







    .aboutHistory__block .year {



        font-size: 25px



    }







    .aboutHistory__block:nth-child(2n) .colContent {



        padding-left: 2rem !important;



        padding-right: 2rem !important



    }



}







.aboutCommit__list {



    padding-left: 1.5rem



}







.aboutCommit__list li {



    padding-bottom: 6px;



    margin-bottom: 24px;



    border-bottom: 1px solid #E1E1E1



}







.aboutCommit__list li::marker {



    color: #1A3A75



}







.aboutCommit__list li:last-child {



    margin-bottom: 0



}







.aboutPartner__slider .slick-list {



    margin-left: -40px;



    margin-right: -40px



}







.aboutPartner__slider .slick-list .slick-track {



    display: flex



}







.aboutPartner__slider .slick-list .slick-track .slick-slide {



    height: auto;



    padding: 0px 40px



}







.aboutPartner__logo {



    height: 100%;



    aspect-ratio: 152/76;



    overflow: hidden;



    background: lightgray;



    border: 1px solid #1A3A75



}







.aboutPartner__logo img {



    aspect-ratio: 152/76;



    object-fit: contain;



    transition: .15s ease-in-out



}







.aboutPartner__logo:hover img {



    transform: scale(1.1)



}







@media (max-width: 991px) {



    .aboutPartner__slider .slick-list {



        margin-left: -6px;



        margin-right: -6px



    }







    .aboutPartner__slider .slick-list .slick-track .slick-slide {



        padding: 0px 6px



    }



}







.areaList__grid {



    grid-template-columns:repeat(3, 1fr);



    grid-template-rows:auto



}







@media (max-width: 991px) {



    .areaList__grid {



        grid-template-columns:repeat(2, 1fr)



    }



}







@media (max-width: 575px) {



    .areaList__grid {



        grid-template-columns:1fr



    }



}







.areaItem {



    grid-column: span 1;



    grid-row: span 1;



    border-radius: 16px



}







.areaItem__img {



    position: relative;



    z-index: 0;



    aspect-ratio: 21/17;



    object-fit: cover;



    transition: .15s ease-in-out



}







.areaItem::before {



    content: "";



    position: absolute;



    inset: 0;



    display: block;



    z-index: 1;



    background: linear-gradient(180deg, #1A3A75 -6.32%, rgba(26, 58, 117, 0) 100%)



}







.areaItem__title {



    position: relative;



    z-index: 2;



    color: #FFF;



    font-size: 24px;



    font-weight: 700;



    line-height: 34px;



    text-transform: uppercase;



    max-width: 283px



}







.areaItem:hover .areaItem__img {



    transform: scale(1.1);



    filter: blur(5px)



}







.sibar__block {



    border-radius: 12px;



    background: white;



    box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.12)



}







.sibar__title {



    padding: 20px 30px;



    color: white;



    font-size: 16px;



    font-weight: 700;



    line-height: 24px;



    background: #1A3A75



}







.sibar__title--nobg {



    background: none;



    color: #1A3A75;



    border-bottom: 1px solid #E1E1E1



}







.sibar__title--highlight {



    background: #e00



}







.sibar__subtitle {



    color: #1A3A75;



    font-size: 20px;



    font-weight: 600;



    line-height: normal;



    text-transform: uppercase



}







.sibar__newsItem .img {



    width: 140px;



    border-radius: 8px;



    aspect-ratio: 140/86;



    background: lightgray



}







.sibar__newsItem .img img {



    aspect-ratio: 140/86;



    object-fit: cover;



    transition: .15s ease-in-out



}







.sibar__newsItem .img:hover img {



    transform: scale(1.1)



}







.sibar__newsItem .title {



    font-size: 16px;



    font-weight: 700;



    line-height: normal



}







.sibar__newsItem .title a {



    color: #1A3A75;



    transition: .15s ease-in-out;



    display: -webkit-box;



    width: 100%;



    overflow: hidden;



    text-overflow: ellipsis;



    -webkit-box-orient: vertical;



    -webkit-line-clamp: 3;



    max-height: 57px



}







.sibar__newsItem .title a:hover {



    color: #e00



}







.sibar__prodItem {



    border-bottom: 1px dashed #E1E1E1



}







.sibar__prodItem:last-child {



    border-bottom: 0



}







.sibar__prodItem .img {



    width: 114px;



    aspect-ratio: 114/101;



    border-radius: 8px



}







.sibar__prodItem .img img {



    aspect-ratio: 114/101;



    object-fit: cover;



    transition: .15s ease-in-out



}







.sibar__prodItem .img:hover img {



    transform: scale(1.1)



}







.sibar__prodItem .title {



    font-size: 16px;



    font-weight: 700;



    line-height: 150%



}







.sibar__prodItem .title a {



    color: #222;



    transition: .15s ease-in-out;



    display: -webkit-box;



    width: 100%;



    overflow: hidden;



    text-overflow: ellipsis;



    -webkit-box-orient: vertical;



    -webkit-line-clamp: 2;



    max-height: 48px



}







.sibar__prodItem .title a:hover {



    color: #1A3A75



}







.sibar__prodItem .viewdetail {



    display: flex;



    width: fit-content;



    gap: 8px;



    align-items: center;



    font-size: 14px;



    font-weight: 500;



    line-height: normal;



    color: #1A3A75



}







.sibar__prodItem .viewdetail::after {



    content: "\f054";



    font-family: "Font Awesome 5 Pro"



}







.sibar__prodItem .viewdetail:hover {



    color: #e00



}







.sibar__formWrap {



    background: #F6F7FA



}







.sibar__zalos {



    border-bottom-color: #E1E1E1 !important;



    border-bottom-style: dashed !important



}







.sibar__zalos .zaloItem .icon {



    filter: drop-shadow(0 0 12px rgba(0, 0, 0, 0.25));



    width: 50px;



    aspect-ratio: 1/1;



    object-fit: contain



}







.sibar__zalos .zaloItem .text {



    flex-grow: 1;



    padding: 16px 24px;



    display: flex;



    align-items: center;



    justify-content: center;



    text-align: center;



    border-radius: 8px;



    overflow: hidden;



    background: #1A3A75;



    color: white;



    font-size: 16px;



    font-weight: 600;



    line-height: 19px



}







.sibar__policy {



    border-radius: 16px;



    background: #F6F7FA;



    color: #1A3A75;



    overflow: hidden



}







.sibar__policy ul {



    margin: 0;



    padding-left: 1.5rem



}







.sibar__policy ul li {



    color: #1A3A75;



    font-size: 20px;



    font-weight: 400;



    line-height: normal;



    margin-bottom: 12px



}







.sibar__policy ul li:last-child {



    margin-bottom: 0



}







.sibar__policy ul li strong {



    font-weight: 600



}







.sibar__form .form-control {



    padding: 14px 20px;



    border-radius: 8px;



    border: 1px solid #E1E1E1;



    background: white;



    color: #222



}







.sibar__form .form-control::placeholder {



    color: #1A3A75



}







.sibar__form .form-control:not(textarea) {



    height: 48px



}







.sibar__form textarea {



    height: 91px



}







.sibar__form .btnSend {



    padding: 2px;



    border-radius: 10px;



    background: #e00;



    color: #1A3A75;



    display: flex;



    align-items: center;



    width: fit-content;



    gap: 8px;



    padding-right: 10px;



    border: 0;



    margin-left: auto



}







.sibar__form .btnSend span {



    display: flex;



    width: fit-content;



    flex-shrink: 0;



    padding: 14px 22px;



    text-align: center;



    background: white;



    border-radius: 8px;



    color: #1A3A75;



    font-size: 16px;



    font-weight: 600;



    line-height: normal;



    transition: .15s ease-in-out



}







.sibar__form .btnSend::after {



    content: "";



    display: flex;



    align-items: center;



    justify-content: center;



    width: 24px;



    height: 26px;



    background-image: url(../images/icons/icon-send.svg);



    background-position: center center;



    background-repeat: no-repeat;



    background-size: contain;



    flex-shrink: 0



}







.sibar__form .btnSend:focus {



    box-shadow: none;



    border: 0;



    outline: 0



}







.sibar__form .btnSend:hover span {



    background: #1A3A75;



    color: white



}







.areaDetail__content {



    border-radius: 16px;



    border: 1px solid #1A3A75;



    background: white;



    text-align: justify



}







.areaDetail__content h2, .areaDetail__content h3, .areaDetail__content h4, .areaDetail__content h5 {



    font-weight: 700;



    margin-bottom: 1rem



}







.areaDetail__content h2 {



    font-size: 24px



}







.areaDetail__content h3 {



    font-size: 20px



}







.areaDetail__content h4 {



    font-size: 18px



}







.areaDetail__content h5 {



    font-size: 16px



}







.areaDetail__title {



    color: #1A3A75;



    text-align: center;



    font-size: 24px;



    font-weight: 700;



    line-height: 24px;



    text-transform: uppercase



}







.areaDetail__share {



    border-top: 1px solid #E1E1E1



}







.areaDetail__share .title {



    color: #222;



    font-size: 16px;



    font-weight: 700;



    line-height: normal



}







.areaDetail__share .item {



    width: 40px;



    height: 40px;



    font-size: 18px;



    color: #222;



    transition: .15s ease-in-out;



    border-radius: 50%;



    background: transparent



}







.areaDetail__share .item:hover {



    background: #1A3A75;



    color: white



}







.relatedArea__title {



    color: #1A3A75;



    font-size: 18px;



    font-weight: 700;



    line-height: normal;



    text-transform: uppercase



}







.teams__title {



    color: var(--M1, #1A3A75);



    font-size: 18px;



    font-weight: 700;



    line-height: normal;



    text-transform: uppercase



}







.teams__text {



    max-width: 1280px;



    margin-left: auto;



    margin-right: auto



}







.teams__block {



    padding-bottom: 50px;



    margin-bottom: 50px;



    border-bottom: 1px solid #1A3A75



}







.teams__block:last-child {



    border-bottom: 0;



    padding-bottom: 0;



    margin-bottom: 0



}







.teams__item {



    background: white;



    border-radius: 12px;



    border: 1px solid #EAEBEC;



    box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.12)



}







.teams__item .avata {



    padding: 24px



}







.teams__item .avata img {



    width: 208px;



    aspect-ratio: 1/1;



    object-fit: cover;



    border-radius: 12px;



    border: 1px solid #B5B5B5



}







.teams__item .info {



    padding: 24px 24px 24px 0px



}







.teams__item .info__name {



    color: #1A3A75;



    font-size: 18px;



    font-weight: 700;



    line-height: 24px



}







.teams__item .info__role {



    color: #71706E;



    font-size: 16px;



    font-weight: 500;



    line-height: 24px



}







.teams__item .info__time {



    overflow: hidden;



    transition: .3s ease-in-out



}







.teams__item .info__time .list {



    padding-left: 20px



}







.teams__item .info__action .btnSp {



    display: flex;



    align-items: center;



    justify-content: center;



    text-align: center;



    width: fit-content;



    min-width: 222px;



    padding: 9px 16px;



    border-radius: 4px;



    background: #1A3A75;



    color: white;



    font-size: 14px;



    font-weight: 600;



    line-height: 100%;



    text-transform: uppercase;



    transition: .15s ease-in-out



}







.teams__item .info__action .btnSp:hover {



    background: #0E1F3F;



    box-shadow: 0px 0px 10px -2px rgba(0, 0, 0, 0.3)



}







.teams__item .info__action .btnViewmore {



    display: flex;



    align-items: center;



    justify-content: center;



    width: fit-content;



    gap: 10px;



    color: #1A3A75;



    font-size: 14px;



    font-weight: 600;



    line-height: normal;



    border: 0;



    background: none



}







.teams__item .info__action .btnViewmore:focus {



    box-shadow: none;



    border: 0;



    outline: 0



}







.teams__item .info__action .btnViewmore::after {



    content: "\f078";



    font-family: "Font Awesome 5 Pro";



    transition: .15s ease-in-out;



    display: block;



    padding-top: 2px



}







.teams__item .info__action .btnViewmore.more::after {



    transform: rotate(-180deg)



}







.teams__item .description {



    width: calc((578 / 1380) * 100%);



    padding: 24px;



    background: rgba(26, 58, 117, 0.06)



}







@media (max-width: 991px) {



    .teams__block {



        margin-bottom: 24px;



        padding-bottom: 24px



    }







    .teams__item .avata {



        padding: 16px;



        padding-bottom: 0;



        margin-left: auto;



        margin-right: auto



    }







    .teams__item .info {



        padding: 16px !important



    }







    .teams__item .info__name {



        text-align: center



    }







    .teams__item .info__role {



        text-align: center



    }







    .teams__item .description {



        padding: 16px;



        width: 100%;



        max-width: unset



    }



}







.news .sibar {



    border-left: 1px solid #E1E1E1



}







.post {



    border-bottom: 1px solid #E1E1E1



}







.post:last-child {



    border-bottom: 0



}







.post__img {



    border-radius: 8px



}







@media (min-width: 991px) {



    .post__img {



        width: calc((290 / 901) * 100%)



    }



}







.post__img img {



    aspect-ratio: 290/178;



    object-fit: cover;



    transition: .15s ease-in-out



}







.post__img:hover img {



    transform: scale(1.1)



}







.post__title {



    font-size: 16px;



    font-weight: 700;



    line-height: 24px



}







.post__title a {



    color: #1A3A75;



    display: -webkit-box;



    overflow: hidden;



    width: 100%;



    text-overflow: ellipsis;



    -webkit-line-clamp: 2;



    -webkit-box-orient: vertical;



    max-height: 48px;



    transition: .15s ease-in-out



}







.post__title a:hover {



    color: #e00



}







.post__text {



    color: #222;



    text-align: justify;



    font-size: 16px;



    font-weight: 400;



    line-height: 24px



}







.pagination .item {



    display: flex;



    align-items: center;



    justify-content: center;



    width: 40px;



    height: 40px;



    text-align: center;



    border: 0;



    background: none;



    transition: .15s ease-in-out;



    color: rgba(34, 34, 34, 0.5)



}







.pagination .item--prev, .pagination .item--next {



    color: #222;



    border: 1px solid rgba(34, 34, 34, 0.1)



}







.pagination .item:not(.active):hover {



    background: rgba(34, 34, 34, 0.04)



}







.pagination .item.active {



    color: #222;



    background: rgba(34, 34, 34, 0.06)



}







.newsDetail .sibar {



    border-left: 1px solid #E1E1E1



}







.newsDetail__title {



    color: #1A3A75;



    font-size: 24px;



    font-weight: 700;



    line-height: 24px



}







.newsDetail__info {



    border-bottom: 1px solid #E1E1E1



}







.newsDetail__author .avata {



    width: 50px;



    overflow: hidden;



    border-radius: 50%



}







.newsDetail__author .avata img {



    width: 100%;



    height: 100%;



    aspect-ratio: 1/1;



    object-fit: cover



}







.newsDetail__author .name {



    color: #222;



    font-size: 16px;



    font-weight: 500;



    line-height: 150%



}







.newsDetail__author .date {



    color: #808080;



    font-size: 16px;



    font-weight: 400;



    line-height: 150%



}







.newsDetail__content {



    text-align: justify;



    padding-bottom: 24px;



    margin-bottom: 24px;



    border-bottom: 1px solid #E1E1E1



}







.newsDetail__content > *:last-child {



    margin-bottom: 0



}







.newsDetail__content figcaption {



    color: white;



    text-align: center;



    font-size: 16px;



    font-style: italic;



    font-weight: 400;



    line-height: 24px;



    background: #1A3A75;



    padding: 5px 10px



}







.newsDetail__foot {



    border: 1px dashed #1A3A75;



    background: rgba(26, 58, 117, 0.06)



}







.newsDetail__foot .logo {



    display: block;



    width: fit-content



}







.newsDetail__foot .logo img {



    display: block;



    width: auto;



    height: 70px



}







.newsDetail__foot .text {



    color: #222;



    text-align: justify;



    font-size: 16px;



    font-weight: 400;



    line-height: 24px



}







.newsDetail__foot .moreInfo__item {



    border-radius: 8px;



    overflow: hidden;



    background: #1A3A75;



    transition: .15s ease-in-out



}







.newsDetail__foot .moreInfo__item .icon {



    margin: 0 auto;



    width: 42px;



    height: 42px;



    aspect-ratio: 1/1;



    object-fit: contain



}







.newsDetail__foot .moreInfo__item .title {



    color: white;



    font-size: 16px;



    text-transform: uppercase;



    font-weight: 700;



    line-height: 22px



}







@media (max-width: 768px) {



    .newsDetail__foot .moreInfo__item .title {



        font-size: 14px;



    }







    .moreInfo.row.row-gap-3 .col-4 {



        padding: 5px;



    }







    .aboutContent__title {



        font-size: 20px



    }



}







.newsDetail__foot .moreInfo__item:hover {



    transform: translateY(-2px);



    box-shadow: 0px 2px 10px -2px rgba(0, 0, 0, 0.3)



}







.newsDetail__foot .actions__btns a {



    padding: 10px 24px;



    gap: 10px;



    font-size: 16px;



    text-transform: uppercase;



    font-weight: 700;



    line-height: 22px;



    border-radius: 5px



}







.newsDetail__foot .actions__btns a img {



    flex-shrink: 0;



    display: block;



    width: 21px;



    height: 21px;



    aspect-ratio: 1/1;



    object-fit: contain



}







.newsDetail__foot .actions__btns a.btnAddress {



    background: #1A3A75;



    color: white



}







.newsDetail__foot .actions__btns a.btnCall {



    background: #71706E;



    color: white



}







.newsDetail__foot .actions__btns a:hover {



    background: #0E1F3F !important



}







.newsDetail__foot .actions__social a {



    display: flex;



    align-items: center;



    justify-content: center;



    width: 40px;



    height: 40px;



    border-radius: 50%;



    background: #71706E;



    color: white;



    transition: .15s ease-in-out



}







.newsDetail__foot .actions__social a:hover {



    background: #1A3A75



}







.newsDetail__cmt {



    border-bottom: 1px solid #E1E1E1



}







.relatedNews .aboutContent__title::before {



    background-image: url(../images/icons/before-title-red.svg)



}







.relatedNews__item .img {



    aspect-ratio: 283/142;



    overflow: hidden;



    border-radius: 16px;



    background: lightgray;



    margin-bottom: 12px



}







.relatedNews__item .img img {



    aspect-ratio: 283/142;



    object-fit: cover;



    transition: .15s ease-in-out



}







.relatedNews__item .img:hover img {



    transform: scale(1.1)



}







.relatedNews__item .title {



    font-size: 16px;



    font-weight: 700;



    line-height: normal



}







.relatedNews__item .title a {



    color: #1A3A75



}







.relatedNews__item .title a:hover {



    color: #e00



}







.pageProject__title {



    color: #1A3A75;



    font-size: 24px;



    font-weight: 700;



    line-height: 24px



}







.pageProject__content {



    text-align: justify;



    font-size: 16px;



    font-weight: 400;



    line-height: 24px



}







.pageProject__content > *:last-child {



    margin-bottom: 0



}







.projects__list {



    grid-template-columns:repeat(3, 1fr);



    grid-template-rows:auto



}







@media (max-width: 991px) {



    .projects__list {



        grid-template-columns:repeat(2, 1fr)



    }



}







@media (max-width: 575px) {



    .projects__list {



        grid-template-columns:1fr



    }



}







.project {



    grid-column: span 1;



    grid-row: span 1;



    border-radius: 16px



}







.project::before {



    content: "";



    position: absolute;



    inset: 0;



    z-index: 1;



    background: linear-gradient(to top, #1A3A75 -6.32%, rgba(26, 58, 117, 0) 100%)



}







.project__img {



    aspect-ratio: 42/34;



    object-fit: cover;



    position: relative;



    z-index: 0;



    transition: .15s ease-in-out



}







.project__title {



    color: #FFF;



    font-size: 24px;



    font-weight: 700;



    line-height: 34px;



    text-transform: uppercase;



    z-index: 2



}







.project:hover .project__img {



    transform: scale(1.1);



    filter: blur(5px)



}







@media (max-width: 991px) {



    .project__title {



        font-size: 18px;



        line-height: normal



    }



}







.capacity__list {



    grid-template-columns:repeat(3, 1fr);



    grid-template-rows:auto



}







.capacity__item {



    grid-column: span 1;



    grid-row: span 1;



    border-radius: 16px;



    border: 1px solid #E1E1E1;



    background: white;



    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.12)



}







.capacity__item .img {



    aspect-ratio: 410/288;



    background: lightgray



}







.capacity__item .img img {



    aspect-ratio: 410/288;



    object-fit: cover;



    transition: .15s ease-in-out



}







.capacity__item .img:hover img {



    transform: scale(1.1)



}







.capacity__item .title {



    font-size: 20px;



    font-weight: 700;



    line-height: 1.5;



    text-transform: uppercase



}







.capacity__item .title a {



    color: #1A3A75



}







.capacity__item .title a:hover {



    color: #e00



}







@media (max-width: 991px) {



    .capacity__list {



        grid-template-columns:repeat(2, 1fr)



    }



}







@media (max-width: 575px) {



    .capacity__list {



        grid-template-columns:1fr



    }







    .capacity__item .title {



        font-size: 18px



    }



}







.prodFilter__title {



    color: #1A3A75;



    font-size: 20px;



    font-weight: 700;



    line-height: normal



}







.prodFilter__block .title {



    color: #222;

    font-size: 20px;

    font-weight: 600;

    line-height: 28px;

    padding-bottom: 5px;

    border-bottom: 1px solid #222;



}







.prodFilter__block .title::after {



    content: "\f077";



    font-family: "Font Awesome 5 Pro";



    transition: .3s ease-in-out



}







.prodFilter__block .title.hide::after {



    transform: rotate(-180deg)



}







.prodFilter__block .title:hover {



    cursor: pointer



}







.prodFilter__block .dataFilter > li {



    width: 100%;



    list-style: none;



    margin-bottom: 12px



}







.prodFilter__block .dataFilter > li:last-child {



    margin-bottom: 0



}







.prodFilter__block .dataFilter > li > a {



    display: inline-flex;



    align-items: center;



    gap: 12px;



    color: #222;



    font-size: 20px;



    font-style: normal;



    font-weight: 400;



    line-height: 28px



}







.prodFilter__block .dataFilter > li > a::before {



    content: "\f0c8";



    font-family: "Font Awesome 5 Pro";



    flex-shrink: 0



}







.prodFilter__block .dataFilter > li > a:hover {



    color: #1A3A75



}







.prodFilter__block .dataFilter > li > .sub {



    padding: 0;



    margin: 0



}







.prodFilter__block .dataFilter > li > .sub li {



    display: flex;



    align-items: center;



    gap: 12px;



    margin-top: 12px



}







.prodFilter__block .dataFilter > li > .sub li a::before {



    content: "\f0c8";



    font-family: "Font Awesome 5 Pro";



    flex-shrink: 0;



    display: flex;



    align-items: center;



    justify-content: center;



    font-size: 19px;



    width: 17px;



    height: 17px;



    font-weight: normal;



}







.prodFilter__block .dataFilter > li > .sub li a {



    flex-grow: 1;



    display: flex;



    align-items: center;



    overflow: hidden;



    text-overflow: ellipsis;



    -webkit-box-orient: vertical;



    -webkit-line-clamp: 1;



    font-size: 18px;



    font-weight: 400;



    line-height: 28px



}







.prodFilter__block .dataFilter > li > .sub li.active a::before {



    content: "\f14a";



    font-weight: 600;



    color: #0C68F4;



}







.prodFilter__block .dataFilter > li > .sub li a:hover {



    color: #e00



}







.prodFilter__block .dataFilter > li.active > a::before {



    content: "\f14a";



    font-weight: 600;



    color: #0C68F4



}







@media (max-width: 991px) {



    .prodFilter {



        order: 999



    }



}







.prodCat__list {



    grid-template-columns:repeat(4, 1fr);



    grid-template-rows:auto



}







.prodCat__item {



    background: white;



    border-radius: 8px;



    border: 1px solid #e1e1e1;



    transition: .15s ease-in-out



}







.prodCat__item .img {



    flex-shrink: 0;



    aspect-ratio: 240/174;



    object-fit: contain



}







.prodCat__item .title {



    padding: 12px 6px;



    text-align: center;



    color: #1A3A75;



    font-size: 16px;



    font-weight: 700;



    line-height: 150%;



    transition: .15s ease-in-out



}







.prodCat__item:hover {



    transform: translateY(-2px);



    box-shadow: 0px 4px 12px -2px rgba(0, 0, 0, 0.2)



}







.prodCat__item:hover .title {



    color: #e00



}







.prodCat .homeHeading__title {



    text-transform: none



}







.prodCat__products .tblProds {



    border-collapse: collapse



}







.prodCat__products .tblProds th, .prodCat__products .tblProds td {



    padding: 16px;



    border: 1px solid white



}







.prodCat__products .tblProds thead {



    background: #9F9F9F;



    color: white



}







.prodCat__products .tblProds tbody tr:nth-child(2n+1) {



    background: #E1E1E1



}







.prodCat__products .tblProds tbody tr:nth-child(2n) {



    background: #D5DEEE



}







.prodCat__products .tblProds tbody a:hover {



    color: #e00



}







@media (max-width: 991px) {



    .prodCat__list {



        grid-template-columns:repeat(2, 1fr)



    }







    .prodCat__products .tblProds {



        display: none



    }







    .prodCat__products .mobiProds__item {



        border-radius: 8px;



        border: 1px solid #E1E1E1;



        background: #D5DEEE;



        overflow: hidden;



        box-shadow: 0px 2px 8px -2px rgba(0, 0, 0, 0.2)



    }







    .prodCat__products .mobiProds__item .title {



        font-size: 18px;



        font-weight: 600;



        color: #1A3A75



    }







    .prodCat__products .mobiProds__item .info {



        font-size: 14px;



        font-weight: normal



    }







    .prodCat__products .mobiProds__item .info strong {



        font-weight: 500



    }



}







@media (max-width: 575px) {



    .prodCat__list {



        grid-template-columns:1fr 1fr;



    }



}







.prodDetail__img {



    aspect-ratio: 665/454;



    border-radius: 8px;



    object-fit: contain;



    background: lightgray



}







.prodDetail__title {



    color: #222;



    font-size: 24px;



    font-weight: 700;



    line-height: 150%



}







.prodDetail__info {



    color: #666



}







.prodDetail__info strong {



    font-weight: 500;



    color: #333



}







.prodDetail__rating {



    font-size: 16px;



    font-weight: 400;



    line-height: 150%



}







.prodDetail__rating i {



    color: #FF8A00;



    padding-bottom: 2px



}







.prodDetail__rating span {



    color: #666;



    line-height: 1



}







.prodDetail__meta {



    color: #222;



    font-size: 16px;



    font-weight: 400;



    line-height: 24px



}







.prodDetail__meta ul {



    padding-left: 1.5rem;



    margin-bottom: 0



}







.prodDetail__price {



    color: #e00;



    font-size: 32px;



    font-weight: 500;



    line-height: 150%



}







.prodDetail__price ins {



    text-decoration: none



}







.prodDetail__price del {



    color: #B3B3B3;



    font-size: 20px;



    font-weight: 400;



    line-height: 150%;



    text-decoration-line: line-through



}







.prodDetail__price .saleOff {



    display: flex;



    width: fit-content;



    align-items: center;



    justify-content: center;



    text-align: center;



    padding: 5px 10px;



    border-radius: 9rem;



    color: #EA4B48;



    font-size: 14px;



    font-weight: 500;



    line-height: 150%;



    background: rgba(234, 75, 72, 0.1);



    margin-left: 12px



}







.prodDetail__quantity .lbl {



    color: #1A3A75;



    font-size: 16px;



    font-weight: 600;



    line-height: 150%



}







.prodDetail__quantity .quantityBtn {



    display: flex;



    align-items: center;



    justify-content: center;



    width: 44px;



    height: 44px;



    border: 1px solid #E1E1E1;



    background: white;



    border-radius: 11px;



    transition: .15s ease-in-out;



    color: #222;



    font-size: 21px;



    font-weight: 300;



    letter-spacing: 0.21px;



    flex-shrink: 0



}







.prodDetail__quantity .quantityBtn:hover {



    background: #1A3A75;



    color: white



}







.prodDetail__quantity .quantityInput {



    width: 92px;



    text-align: center;



    height: 44px;



    border: 1px solid #E1E1E1;



    background: white;



    color: #222;



    font-size: 21px;



    font-weight: 500;



    line-height: normal;



    letter-spacing: 0.21px;



    -moz-appearance: textfield



}







.prodDetail__quantity .quantityInput::-webkit-outer-spin-button, .prodDetail__quantity .quantityInput::-webkit-inner-spin-button {



    -webkit-appearance: none;



    margin: 0



}







.prodDetail__btns .btn {



    flex: 1 1 auto;



    padding: 24px 32px;



    color: white;



    text-align: center;



    font-size: 18px;



    font-weight: 700;



    line-height: normal;



    text-transform: uppercase;



    display: flex;



    align-items: center;



    justify-content: center;



    border-radius: 8px



}







.prodDetail__btns .btn.addtocart {



    background: #71706E



}







.prodDetail__btns .btn.buynow {



    background: #1A3A75



}







.prodDetail__loginNotifi {



    border-radius: 8px;



    overflow: hidden;



    background: #1A3A75;



    color: white;



    font-size: 18px;



    font-weight: 400;



    line-height: 24px



}







.prodDetail__loginNotifi a {



    display: flex;



    align-items: center;



    justify-content: center;



    flex-shrink: 0;



    width: fit-content;



    padding: 14px 16px;



    text-align: center;



    background: white;



    border: 0;



    border-radius: 8px;



    color: #1A3A75;



    font-size: 16px;



    font-weight: 600;



    line-height: normal;



    transition: .15s ease-in-out



}







.prodDetail__loginNotifi a:hover {



    color: white;



    background: #e00



}







.prodDetail__tabs .nav-tabs {



    display: flex;



    flex-wrap: wrap;



    width: 100%;



    padding-bottom: 24px;



    margin-bottom: 24px;



    border-bottom: 1px solid #E1E1E1;



    gap: 24px



}







.prodDetail__tabs .nav-tabs .nav-link {



    margin: 0;



    display: flex;



    align-items: center;



    justify-content: center;



    width: fit-content;



    padding: 10px 20px;



    border-radius: 8px;



    border: 1px solid #1A3A75;



    background: white;



    color: #1A3A75;



    font-size: 16px;



    font-weight: 600;



    line-height: 100%;



    transition: .15s ease-in-out



}







.prodDetail__tabs .nav-tabs .nav-link:not(.active):hover {



    background: rgba(26, 58, 117, 0.1)



}







.prodDetail__tabs .nav-tabs .nav-link.active {



    background: #1A3A75;



    color: white



}







.prodDetail__tabs .tab-content {



    padding: 24px;



    border-radius: 16px;



    background: white;



    border: 1px solid #E1E1E1;



    box-shadow: 0 0 12px 0 rgba(26, 58, 117, 0.2)



}







.prodDetail__tabs .tab-content h2, .prodDetail__tabs .tab-content h3, .prodDetail__tabs .tab-content h4, .prodDetail__tabs .tab-content h5 {



    margin-bottom: 16px



}







.prodDetail__tabs .tab-content h2 {



    font-size: 20px



}







.prodDetail__tabs .tab-content h3 {



    font-size: 18px



}







.prodDetail__tabs .tab-content h4, .prodDetail__tabs .tab-content h5 {



    font-size: 16px



}







.prodDetail__tabs .prodDetailContent {



    text-align: justify;



    overflow: hidden;



    transition: .15s ease-in-out



}







.prodDetail__tabs .moreContent {



    display: flex;



    align-items: center;



    justify-content: center;



    text-align: center;



    width: fit-content;



    border: 1px solid #1A3A75;



    background: white;



    color: #1A3A75;



    font-size: 16px;



    font-weight: 400;



    line-height: 24px;



    padding: 12px 56px;



    border-radius: 8px;



    gap: 12px;



    transition: .15s ease-in-out



}







.prodDetail__tabs .moreContent::after {



    content: "\f078";



    font-family: "Font Awesome 5 Pro";



    display: block;



    flex-shrink: 0;



    transition: transform .15s ease-in-out



}







.prodDetail__tabs .moreContent.more::after {



    transform: rotate(-180deg)



}







.prodDetail__tabs .moreContent:hover {



    background: #1A3A75;



    color: white



}







@media (max-width: 991px) {



    .prodDetail__title {



        font-size: 20px;



        line-height: normal



    }







    .prodDetail__price {



        font-size: 28px



    }







    .prodDetail__price del {



        font-size: 18px



    }







    .prodDetail__loginNotifi {



        font-size: 16px;



        flex-direction: column !important;



        row-gap: 16px



    }







    .prodDetail__tabs .tab-content {



        padding: 16px



    }



}







.relatedAndCross__wrap {



    border-radius: 8px;



    border: 1px solid #E1E1E1



}







.relatedAndCross__title {



    background: #9F9F9F;



    color: #FFF;



    font-size: 18px;



    font-weight: 700;



    line-height: normal



}







.relatedAndCross__list .item {



    padding: 12px 16px;



    border-bottom: 1px solid #E1E1E1;



    gap: 12px



}







.relatedAndCross__list .item .form-check-input {



    flex-shrink: 0;



    margin-top: 0



}







.relatedAndCross__list .item .img {



    flex-shrink: 0;



    width: 44px;



    aspect-ratio: 44/39



}







.relatedAndCross__list .item .img img {



    aspect-ratio: 44/39;



    object-fit: contain;



    transition: .15s ease-in-out



}







.relatedAndCross__list .item .img:hover img {



    transform: scale(1.1)



}







.relatedAndCross__list .item .title {



    font-size: 16px;



    font-weight: 400;



    line-height: 24px;



    flex-grow: 1



}







.relatedAndCross__list .item .title a {



    color: #1A3A75;



    transition: .15s ease-in-out



}







.relatedAndCross__list .item .title a:hover {



    color: #e00



}







.relatedAndCross__list .item .detail {



    flex-shrink: 0;



    display: block;



    width: fit-content;



    text-align: center;



    color: #1A3A75;



    font-size: 16px;



    font-weight: 700;



    line-height: 24px;



    transition: .15s ease-in-out



}







.relatedAndCross__list .item .detail:hover {



    color: #e00



}







.relatedAndCross__list .item:last-child {



    border-bottom: 0



}







.relatedAndCross .viewMoreProd {



    display: flex;



    align-items: center;



    justify-content: center;



    width: fit-content;



    border: 0;



    background: none;



    color: #1A3A75;



    font-size: 18px;



    font-weight: 700;



    line-height: 24px;



    transition: .15s ease-in-out;



    gap: 12px



}







.relatedAndCross .viewMoreProd::after {



    content: "\f078";



    font-family: "Font Awesome 5 Pro";



    display: block;



    flex-shrink: 0



}







.relatedAndCross .viewMoreProd:hover {



    color: #e00



}







@media (max-width: 991px) {



    .relatedAndCross {



        flex-direction: column-reverse



    }



}







.cart .tblCart {



    border-collapse: collapse



}







.cart .tblCart th, .cart .tblCart td {



    padding: 16px



}







.cart .tblCart thead {



    color: #1A3A75;



    font-size: 20px;



    font-weight: 700;



    line-height: normal;



    text-transform: uppercase



}







.cart .tblCart tr {



    border-bottom: 1px solid #E1E1E1



}







.cart .tblCart .prodInner {



    display: flex;



    align-items: center;



    gap: 24px



}







.cart .tblCart .prodInner .removeCartItem {



    display: flex;



    align-items: center;



    justify-content: center;



    font-size: 20px;



    color: #1A3A75;



    transition: .15s ease-in-out;



    border: 0;



    background: none



}







.cart .tblCart .prodInner .removeCartItem:focus {



    box-shadow: none;



    border: 0;



    outline: 0



}







.cart .tblCart .prodInner .removeCartItem:hover {



    color: #e00



}







.cart .tblCart .prodInner .img {



    width: 117px;



    aspect-ratio: 117/104;



    overflow: hidden;



    background: lightgray



}







.cart .tblCart .prodInner .img img {



    width: 100%;



    height: 100%;



    aspect-ratio: 117/104;



    object-fit: cover;



    transition: .15s ease-in-out



}







.cart .tblCart .prodInner .img:hover img {



    transform: scale(1.1)



}







.cart .tblCart .prodInner .title {



    font-size: 18px;



    font-weight: 400;



    line-height: normal



}







.cart .tblCart .prodInner .title a {



    color: #222;



    transition: .15s ease-in-out



}







.cart .tblCart .prodInner .title a:hover {



    color: #1A3A75



}







.cart .tblCart tbody .price, .cart .tblCart tbody .subtotal {



    color: #222;



    font-size: 18px;



    font-weight: 700;



    line-height: normal



}







.cart__foot {



    background: #1A3A75;



    border-radius: 8px;



    overflow: hidden



}







.cart__foot a {



    color: white;



    font-size: 18px;



    font-weight: 400;



    line-height: 24px;



    transition: .15s ease-in-out



}







.cart__foot a i {



    margin-right: 12px



}







.cart__foot a:hover {



    color: #e00



}







.cart__foot .updateCart {



    display: flex;



    align-items: center;



    justify-content: center;



    text-align: center;



    width: fit-content;



    padding: 12px 32px;



    border-radius: 8px;



    background: white;



    color: #1A3A75;



    font-size: 16px;



    font-weight: 600;



    line-height: normal;



    border: 0;



    transition: .15s ease-in-out



}







.cart__foot .updateCart:hover {



    background: #e00;



    color: white



}







.cart__foot .updateCart:focus {



    box-shadow: none;



    border: 0;



    outline: 0



}







.cart__heading {



    color: #1A3A75;



    font-size: 20px;



    font-weight: 700;



    line-height: normal;



    text-transform: uppercase



}







.cart .orderTotal__row .lbl {



    color: #1A3A75;



    font-size: 16px;



    font-weight: 400;



    line-height: 24px



}







.cart .orderTotal__row .val {



    color: #e00;



    font-size: 16px;



    font-weight: 400;



    line-height: 24px



}







.cart .orderTotal__row--total .lbl, .cart .orderTotal__row--total .val {



    font-weight: 700



}







.cart .btnCheckout {



    display: flex;



    width: 100%;



    align-items: center;



    justify-content: center;



    text-align: center;



    border-radius: 8px;



    background: #1A3A75;



    color: white;



    padding: 16px 24px;



    border: 0;



    font-size: 18px;



    font-weight: 600;



    line-height: normal;



    text-transform: uppercase;



    transition: .15s ease-in-out



}







.cart .btnCheckout:hover {



    background: #e00



}







.cart .btnCheckout:focus {



    box-shadow: none;



    border: 0;



    outline: 0



}







.cart__cupon .form-control {



    flex-grow: 1;



    border: 0;



    background-color: #F0F0F0;



    border-radius: 8px;



    padding: 16px;



    padding-left: 50px;



    background-image: url(../images/icons/before-cupon.svg);



    background-position: 16px center;



    background-repeat: no-repeat;



    background-size: 22px 22px



}







.cart__cupon .btnApplyCupon {



    flex-shrink: 0;



    border: 0;



    background: black;



    color: white;



    padding: 12px 16px;



    border-radius: 8px;



    font-size: 16px;



    font-weight: 500;



    line-height: normal;



    transition: .15s ease-in-out



}







.cart__cupon .btnApplyCupon:hover {



    background: #e00



}







.cart__cupon .btnApplyCupon:focus {



    box-shadow: none;



    border: 0;



    outline: 0



}







@media (max-width: 991px) {



    .cart__foot {



        flex-direction: column;



        row-gap: 16px



    }







    .cart .tblCart {



        display: none



    }







    .cart .cartMobi__item .img {



        width: 70px;



        height: 70px;



        overflow: hidden;



        border-radius: 2px



    }







    .cart .cartMobi__item .img img {



        aspect-ratio: 1/1;



        object-fit: cover



    }







    .cart .cartMobi__item .title {



        font-size: 16px;



        font-weight: 500



    }







    .cart .cartMobi__item .title a {



        color: #1A3A75



    }







    .cart .cartMobi__item .price strong {



        color: #e00;



        font-size: 18px



    }







    .cart .cartMobi__item .prodDetail__quantity .quantityBtn {



        width: 40px;



        height: 40px;



        border-radius: 6px



    }







    .cart .cartMobi__item .prodDetail__quantity .quantityBtn:hover {



        background: inherit;



        color: inherit;



        border-color: inherit



    }







    .cart .cartMobi__item .prodDetail__quantity .quantityInput {



        height: 40px;



        font-size: 16px



    }







    .cart .cartMobi__item .removeCartItem {



        display: flex;



        align-items: center;



        justify-content: center;



        gap: 6px;



        border: 0;



        outline: 0;



        font-size: 14px;



        background: none;



        color: #e00



    }







    .cart .cartMobi__item .removeCartItem:focus {



        box-shadow: none



    }



}







.loginPage {



    background-position: center center;



    height: var(--vh);



    background-repeat: no-repeat;



    background-attachment: scroll;



    background-size: cover;



    overflow-y: auto



}







.loginPage .container {



    max-width: 480px



}







.loginPage__form {



    background: rgba(255, 255, 255, 0.9);



    border-radius: 8px;



    overflow: hidden



}







.loginPage__form .logo {



    width: fit-content;



    margin: 0 auto



}







.loginPage__form .logo img {



    width: auto;



    height: 70px



}







.loginPage__form .input-group .form-control {



    border-radius: 0;



    border-width: 0 0 1px 0 !important;



    border-color: rgba(0, 0, 0, 0.44);



    padding: 0px 0px 16px;



    background: none



}







.loginPage__form .input-group .form-control::placeholder {



    color: #222



}







.loginPage__form .input-group .form-control:focus {



    box-shadow: none;



    outline: 0



}







.loginPage__form .input-group-text {



    background: none;



    border-radius: 0;



    border-width: 0 0 1px 0 !important;



    border-color: rgba(0, 0, 0, 0.44);



    padding: 0px 3px 16px



}







.loginPage__form .input-group .btn {



    border-radius: 0;



    border-width: 0 0 1px 0 !important;



    border-color: rgba(0, 0, 0, 0.44);



    padding: 0px 3px 16px



}







.loginPage__form .input-group .btn.show i::before {



    content: "\f070"



}







.loginPage__form .input-group .btn:focus {



    box-shadow: none;



    border-width: 0 0 1px 0 !important;



    outline: 0



}







.loginPage__form .ggLogin {



    background: white;



    display: flex;



    justify-content: center;



    align-items: center;



    color: #222;



    gap: 12px;



    text-transform: none



}







.loginPage__form .ggLogin::before {



    content: "";



    display: block;



    flex-shrink: 0;



    width: 30px;



    height: 30px;



    background-image: url(../images/logogg.svg);



    background-position: center center;



    background-repeat: no-repeat;



    background-size: contain



}







.loginPage__form .btnRegister {



    background: #71706E;



    display: flex;



    align-items: center;



    justify-content: center



}







.loginPage__form .btnRegister:hover {



    background: #1A3A75



}







.loginPage__action .form-check-input:hover, .loginPage__action .form-check-label:hover {



    cursor: pointer



}







.loginPage__action a {



    color: #1A3A75



}







.loginPage__action a:hover {



    color: #e00



}







.myAcc .nav {



    flex-shrink: 0;



    width: 280px;



    flex-direction: column;



    row-gap: 12px



}







.myAcc .nav .nav-link {



    display: block;



    text-align: left;



    width: 100%;



    padding: 8px 16px;



    border-radius: 4px;



    background: #E1E1E1;



    color: #222;



    transition: .15s ease-in-out



}







.myAcc .nav .nav-link.active {



    background: #1A3A75;



    color: white



}







.myAcc .nav .nav-link:not(.active):hover {



    background: #e00;



    color: white



}







.myAcc .tab-content {



    flex-grow: 1;



    padding: 24px;



    border-radius: 8px;



    border: 1px solid #E1E1E1



}







.myAcc__title {



    font-size: 20px;



    font-weight: 500;



    color: #1A3A75



}







.myAcc .orderCustomer .tblScroll {



    overflow-x: auto



}







.myAcc .orderCustomer__tbl {



    min-width: 720px;



    border-collapse: collapse



}







.myAcc .orderCustomer__tbl th, .myAcc .orderCustomer__tbl td {



    border: 1px solid #E1E1E1;



    padding: 8px



}







.myAcc .orderCustomer__tbl thead {



    background: #1A3A75;



    color: white



}







.myAcc .orderCustomer__tbl tbody tr:nth-child(2n) {



    background: #fafafa



}







.myAcc .customerChangePass .form-control {



    border-right: 0



}







.myAcc .customerChangePass .input-group-text {



    border-width: 1px 1px 1px 0px;



    border-color: var(--bs-border-color);



    border-radius: 0px var(--bs-border-radius) var(--bs-border-radius) 0px !important



}







.myAcc .customerChangePass .btn {



    border-width: 1px 1px 1px 0px;



    border-color: var(--bs-border-color);



    border-radius: 0px var(--bs-border-radius) var(--bs-border-radius) 0px !important



}







.myAcc .customerChangePass .btn.show i::before {



    content: "\f070"



}







@media (max-width: 991px) {



    .myAcc .nav {



        width: 100%;



        flex-direction: row;



        flex-wrap: wrap;



        gap: 8px;



        margin: 0



    }







    .myAcc .nav .nav-link {



        width: auto;



        flex: 1 1 auto;



        text-align: center



    }







    .myAcc .tab-content {



        margin: 0;



        width: 100%;



        padding: 0;



        border: 0;



        border-radius: 0



    }



}







.contactForm {



    display: block;



    width: 100%;



    background: #fff



}







.contactForm__main {



    background: #fff;



    border: 1px solid rgba(14, 14, 44, 0.05);



    box-shadow: 0 5px 36px -14px rgba(14, 14, 44, 0.1), 0 1px 1px rgba(0, 0, 0, 0.05);



    border-radius: 8px



}







.contactForm__form {



    display: flex;



    flex-direction: column;



    padding: 45px 55px



}







@media (max-width: 768px) {



    .contactForm__form {



        padding: 20px



    }



}







.contactForm__form .title {



    display: block;



    width: 100%;



    font-weight: 600;



    font-size: 20px;



    line-height: 25px;



    color: #1A3A75;



    text-align: center;



    margin-bottom: 20px



}







.contactForm__form .form-group {



    display: block;



    width: 100%;



    position: relative;



    margin-top: 20px



}







.contactForm__form .form-group > label {



    position: absolute;



    top: -8px;



    margin: 0;



    left: 10px;



    background: #fff;



    font-style: normal;



    font-weight: 600;



    font-size: 12px;



    line-height: 13px;



    color: #1A3A75;



    padding: 0 3px;



    z-index: 1



}







.contactForm__form .form-group .form-control {



    border: 0.5px solid #9f9f9f;



    border-radius: 8px;



    height: 44px;



    font-weight: normal;



    font-size: 16px;



    line-height: 25px;



    background: #fff;



    padding: 4px 12px



}







.contactForm__form .form-group .form-control:focus {



    box-shadow: none



}







.contactForm__form .form-group textarea.form-control {



    min-height: 115px



}







.contactForm__form .send-contact {



    background: #1A3A75;



    border-radius: 8px;



    font-weight: 700;



    font-size: 16px;



    line-height: 16px;



    padding: 13px 15px;



    color: #fff;



    width: 100%;



    text-align: center;



    margin-top: 20px



}







.contactForm__form .send-contact:focus {



    box-shadow: none



}







.contactForm__content {



    display: flex;



    flex-direction: column;



    background: #1A3A75;



    border-radius: 0 8px 8px 0;



    padding: 45px 55px;



    color: #fff



}







@media (max-width: 768px) {



    .contactForm__content {



        padding: 20px



    }



}







.contactForm__content .title {



    display: block;



    width: 100%;



    font-weight: 600;



    font-size: 20px;



    line-height: 25px;



    text-align: center;



    margin-bottom: 20px



}







.contactForm__content .map {



    display: block;



    width: 100%;



    margin-bottom: 20px



}







.contactForm__content .map iframe {



    display: block;



    width: 100%



}







.contactForm__content .contactInfos {



    display: flex;



    width: 100%;



    flex-direction: column;



    padding: 0;



    margin: 0;



    row-gap: 10px



}







.contactForm__content .contactInfos li {



    display: block;



    width: 100%;



    font-size: 18px;



    line-height: 30px;



    font-weight: 400



}





#ios-zalo-popup {

    position: fixed;

    inset: 0;

    background: rgba(0, 0, 0, 0.55);

    display: none;

    z-index: 9999;

    animation: fadeIn 0.2s ease-in-out;

}



/* Popup box */

#ios-zalo-popup .popup-box {

    position: relative; /* ⚠️ BẮT BUỘC cho nút ❌ */

    background: #fff;

    width: 90%;

    max-width: 360px;

    margin: 30% auto;

    padding: 22px 18px 20px;

    border-radius: 14px;

    text-align: center;

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

    animation: slideUp 0.25s ease-out;

}



/* Close (X) button */

.popup-close {

    position: absolute;

    top: 10px;

    right: 12px;

    font-size: 20px;

    color: #666;

    cursor: pointer;

    line-height: 1;

}



.popup-close:active {

    color: #000;

}