.banner-top {
    background-color: transparent;
    ; }

div#header {
    position: relative;
    min-height: 76px;
    background: #fff;
    font-size: 14px;
    font-weight: 400;
    ; }

.header-top {
    color: #fff;
    background-color: var(--color-main);
    ; }

.header-top marquee {
    padding-top: 9px;
    margin-right: 20px;
    ; }

.header-top ul {
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    list-style: none;
    gap: 10px;
    ; }

.header-top ul li.line {
    width: 0px;
    height: 50px;
    border-left: 0.5px solid rgba(0, 0, 0, 0.3);
    border-right: 0.5px solid rgba(255, 255, 255, 0.3);
    ; }

.header-top ul li a {
    display: block;
    font-family: "Oswald";
    font-weight: 300;
    font-size: 15px;
    ; }

.header-top ul li a:hover {
    color: #000;
    ; }

.header-nav {
    padding-bottom: 7px;
    ; }

.header-nav .cart {
    position: relative;
    ; }

.header-nav .cart b {
    position: absolute;
    top: 0px;
    right: -3px;
    min-width: 18px;
    height: 18px;
    line-height: 18px;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    background-color: #ff0004;
    border-radius: 50%;
    text-align: center;
    ; }

.header-nav.fixed {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    z-index: 999;
    background: #fff;
    padding: 5px 0px !important;
    ; }

.header-nav.fixed .cart {
    display: flex !important;
    ; }

.header-bottom {
    position: relative;
    ; }

.header-bottom.fixed {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    z-index: 999;
    background: #fff;
    padding: 5px 0px !important;
    ; }

.header-bottom.fixed .fixed-hide {
    display: none !important;
    ; }

.header-bottom.fixed .menu {
    margin-top: 0px;
    ; }

.header-bottom .logo {
    position: relative;
    display: block;
    ; }

.header-bottom .logo img {
    position: relative;
    z-index: 10;
    width: 132px;
}

.header-bottom .btn-main {
    background: #4367d0;
    ; }

.header-bottom .btn-main:hover {
    background: var(--color-main);
    ; }

.header-bottom .header-ul {
    position: relative;
    list-style: none;
    padding: 0;
    margin: 0;
    z-index: 21;
    ; }

.header-bottom .header-ul .line {
    width: 1px;
    height: 20px;
    margin: 0px 5px;
    background-color: #cfcfcf;
    ; }

.header-bottom .header-ul a {
    display: block;
    color: #333;
    font-size: 18px;
    font-family: "Afacad", sans-serif;
}
.header-bottom .header-ul a i{ font-size:15px}
.header-bottom .header-ul li.active a {
    color: var(--color-main);
    font-weight: 600;
}

.header-bottom .header-ul .btn-main {
    padding: 6px 10px;
    ; }

.header-bottom .header-ul a:hover {
    color: var(--color-submain);
    ; }

.header-bottom .header-ul .lang a {
    display: flex;
    cursor: pointer;
    border: 1px solid #fff;
    ; }

.header-bottom .header-ul .lang a img {
    width: 34px;
    ; }

.header-bottom .header-ul .has-child {
    position: relative;
    ; }

.header-bottom .header-ul ul {
    padding: 0px;
    margin: 0px;
    list-style: none;
    transition: all 0.3s ease;
    ; }

.header-bottom .header-ul ul li a {
    font-size: 14px;
    color: #757575;
    border-bottom: 0px solid #ececec;
    padding: 7px 10px;
    text-transform: capitalize;
    line-height: 25px;
    ; }

.header-bottom .header-ul > li > ul {
    position: absolute;
    min-width: 250px;
    top: 100%;
    background-color: #fafafa;
    border-radius: 0.25rem;
    -webkit-box-shadow: 1px 1px 15px rgba(0, 0, 0, 0.15);
    box-shadow: 1px 1px 15px rgba(0, 0, 0, 0.15);
    -webkit-transform: perspective(600px) rotateX(-90deg);
    transform: perspective(600px) rotateX(-90deg);
    -webkit-transform-origin: 0 0 0;
    transform-origin: 0 0 0;
    opacity: 0;
    visibility: hidden;
    z-index: 1;
    ; }

.header-bottom .header-ul li:hover > ul {
    -webkit-transform: perspective(600px) rotateX(0);
    transform: perspective(600px) rotateX(0);
    transform-origin: 0 0 0;
    -webkit-transform-origin: 0 0 0;
    opacity: 1;
    visibility: visible;
    ; }

.header-bottom .header-ul .submenu {
    position: absolute;
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    min-width: 900px;
    max-height: 500px;
    overflow: auto;
    top: 120%;
    padding: 10px 5px 10px;
    background-color: #fafafa;
    border-radius: 0.25rem;
    -webkit-box-shadow: 1px 1px 15px rgba(0, 0, 0, 0.15);
    box-shadow: 1px 1px 15px rgba(0, 0, 0, 0.15);
    -webkit-transform: perspective(600px) rotateX(-90deg) translateX(-40%);
    transform: perspective(600px) rotateX(-90deg) translateX(-40%);
    -webkit-transform-origin: 0 0 0;
    transform-origin: 0 0 0;
    opacity: 0;
    visibility: hidden;
    z-index: 5;
    ; }

.header-bottom .header-ul .has-child:hover > .submenu {
    -webkit-transform: perspective(600px) rotateX(0) translateX(-40%);
    transform: perspective(600px) rotateX(0) translateX(-40%);
    transform-origin: 0 0 0;
    -webkit-transform-origin: 0 0 0;
    opacity: 1;
    visibility: visible;
    ; }

.header-bottom .header-ul .submenu ul {
    padding: 0px;
    list-style: none;
    ; }

.header-bottom .header-ul .has-child ul.submenu > li {
    width: calc(100% / 3);
    border: 0px solid;
}

.header-bottom .header-ul .has-child > ul.submenu > li {
    padding: 0px 5px;
    margin-bottom: 5px;
    ; }

.header-bottom .header-ul .has-child ul.submenu .list {
    padding: 7px 0px;
    font-weight: bold;
    color: var(--color-main);
    font-size: 18px;
    }

.header-bottom .header-ul .has-child ul.submenu .cat {
    font-size: 13px;
    padding: 0px;
    ; }

.header-bottom .header-ul .has-child ul.submenu > li a {
    display: flex;
    align-items: center;
    padding: 0px;
    ; }

.header-bottom .header-ul .has-child ul.submenu > li a:hover {
    color: var(--color-submain);
    ; }

.header-bottom .header-ul .has-child ul.submenu > li > a {
    margin: 0px auto;
    background: transparent;
    border-bottom: 2px solid #000;
    border-radius: 0px;
    ; }

.header-bottom .header-ul .has-child ul.submenu > li p {
    margin-bottom: 0px;
    ; }

.more a {
    color: var(--color-main)!important;
}

.more a:hover {
    color: var(--color-red)!important;
}

.effect-text {
    animation: effectText 1s infinite ease-in-out;
    transition: color 0.3s ease-in-out;
    ; }

@keyframes effectText {
    0% {
        color: var(--color-main);
        ; }

    100% {
        color: var(--color-submain);
        ; }
}

.header-bottom .hotline {
    background-color: var(--color-main);
    border-radius: 30px;
    padding: 5px 20px;
    height: 42px;
    color: white;
}

.header-bottom .cart, .header-bottom .hotline {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    ; }

.header-bottom .cart svg, .header-bottom .hotline svg {
    fill: white;
}

.header-bottom .cart a {
    color: var(--color-submain);
    ; }

.header-bottom .hotline a {
    animation: blinkColor 1s infinite ease-in-out;
    transition: color 0.3s ease-in-out;
    color: white;
}

@keyframes blinkColor {
    0%, 100% {
        color: var(--color-main);
        border-color: var(--color-main);
        ; }

    50% {
        color: white;
        border-color: #ff0004;
    }
}

/* Slide Video */
.slide-video {
    position: relative;
    width: 100%;
    text-align: center;
    overflow: hidden;
    ; }

.slide-video video {
    width: 100%;
    min-height: 100%;
    ; }

.slide-content {
    position: absolute;
    bottom: 5%;
    color: #f1f1f1;
    width: 100%;
    padding: 20px;
    text-shadow: 0px 0px 3px #333;
    ; }

.wrap-service-list {
    background-color: #fdfdfd;
    ; }

.service-list {
    position: relative;
    display: block;
    background-color: #fff;
    ; }

.service-list .image {
    width: 128px;
    margin: 0px auto;
    ; }

.service-list .name {
    font-family: "Playfair Display", serif;
    font-size: 21px;
    font-weight: 600;
    margin-bottom: 0px;
    ; }

.wrap-tuvan {
    position: relative;
    background: url(../images/bg_tuvan.jpg) no-repeat center center;
    ; }

.wrap-tuvan::before {
    content: "";
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    ; }

#frm-advisory .form-control {
    color: #fff;
    border-radius: 0px;
    border: 1px solid #ccc;
    background-color: transparent;
    ; }

#frm-advisory .form-control::placeholder {
    color: #fff;
    ; }

.wrap-uudai {
    position: relative;
    z-index: 2;
    transform: translateY(-50%);
    ; }

.wrap-uudai .col-md-7 {
    border-radius: 30px;
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.35);
    background: #fff;
    ; }

.uudai-item {
    position: relative;
    padding: 8px;
    ; }

.uudai-item::after {
    content: "";
    width: 1px;
    height: 40%;
    background: var(--color-main);
    position: absolute;
    top: 30%;
    left: -12px;
    ; }

.wrap-uudai .owl-item:first-child .uudai-item::after {
    display: none;
    ; }

.uudai-item .image {
    position: relative;
    display: inline-block;
    ; }

.uudai-item img {
    display: block;
    width: 30px;
    ; }

.wrap-category {
}

.category-item {
    width: calc(100% / 8);
    display: block;
    padding: 10px;
    text-align: center;
    border: 1px solid transparent;
    border-radius: 5px;
    transition: all 0.3s ease-in-out;
    ; }

.category-item .image {
    margin-bottom: 10px;
    ; }

.category-item .image img {
    width: 48px;
    border-radius: 5px;
    ; }

.category-item .name {
    font-size: 14px;
    font-weight: bold;
    ; }

.category-item:hover {
    border: 1px solid #86f1ff;
    ; }

.category-item:hover .name {
    color: var(--color-main);
    ; }

.wrap-product-list {
}

.product-list {
    display: block;
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    ; }

.product-list .name {
    position: absolute;
    top: 0px;
    left: 0px;
    padding: 10px 20px;
    color: #fff;
    font-size: 15px;
    text-align: center;
    background-color: var(--color-submain);
    border-bottom-right-radius: 10px;
    ; }

.product-list .desc {
    padding: 20px;
    background-color: #f2f2f2;
    ; }

.product-item {
    position: relative;
    ; }

.product-item .image {
    border-radius: 10px;
    overflow: hidden;
    width: 62%;
    ; }

.product-item .image img {
    border-radius: 10px;
    ; }

.product-item .info {
    width: 35%;
    ; }

.product-item .name a {
    display: block;
    font-size: 18px;
    color: var(--color-submain);
    ; }

.product-item .attrs {
    margin: 0;
    padding: 0;
    list-style: none;
    margin-bottom: 20px;
    ; }

.product-item .attrs li {
    padding: 5px 0px 3px;
    border-top: 1px solid #989898;
    color: #989898;
    ; }

.product-item .attrs li svg {
    margin-top: -2px;
    ; }

.product-item .attrs li b {
    color: #000;
    ; }

.slick-arrow {
    width: 50px;
    height: 50px;
    ; }

.slick-prev {
    left: 5px;
    ; }

.slick-next {
    right: 5px;
    ; }

.slick-prev:before, .slick-next:before {
    font-size: 35px;
    ; }

.wrap-brand .brand-item, .wrap-doitac .brand-item {
    width: calc(100% / 7 - 0.5rem);
}

.filter-brand .filter-dropdown-item {
    width: calc(100% / 10 - 0.5rem);
    ; }

.brand-item {
    display: block;
    width: 100%;
    ; }

.brand-item .image {
    border-radius: 4px;
    overflow: hidden;
    /* border: 1px solid #ccc; */
    /* background: #fff; */
    padding: 5px;
    margin-bottom: 8px;
}

.brand-item .name {
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    ; }

.news-index {
    position: relative;
    display: block;
    margin-bottom: 1rem;
    border-radius: 10px;
    overflow: hidden;
    ; }

.news-index::after {
    content: "";
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 100%;
    height: 50%;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #000 100%);
    transition: all 0.3s ease;
    ; }

.news-index .name {
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 100%;
    font-size: 13px;
    font-weight: 400;
    margin-bottom: 0px;
    padding: 10px 15px;
    color: #fff;
    transition: all 0.3s ease;
    z-index: 10;
    ; }

.news-index:hover .name {
}

.news-index:hover::after {
    height: 30%;
    ; }

.wrap-search-multiple, .wrap-cauchuyen {
    background: linear-gradient(to bottom, rgba(248, 248, 248, 1) 0%, rgba(236, 236, 236, 1) 100%);
    ; }

.wrap-product-hot {
}

.title-tieuchi {
    width: 50%;
    margin-left: auto;
    padding: 0px 20px;
    border-radius: 50px;
    border: 1px solid #000;
    ; }

.product-inner {
    background-color: #fffbec;
    ; }

.product-hot {
    padding: 2rem 0;
    background-color: #fff;
    ; }

.product-hot .desc ul li, .product-hot .desc ol li {
    position: relative;
    list-style: none;
    padding: 10px 10px 10px 35px;
    font-weight: 500;
    ; }

.product-hot .desc ul li::before, .product-hot .desc ol li::before {
    content: "";
    display: block;
    width: 28px;
    height: 28px;
    background: url(../images/icon_check.png) no-repeat center center;
    background-size: 28px;
    position: absolute;
    left: 0px;
    top: 10px;
    ; }

.wrap-top .container {
    padding-top: 20px;
    ; }

.owl-menu-cat {
    width: calc(100% - 450px);
    ; }

.wrap-doitac {
}

.wrap-doitac .owl-item {
    padding: 10px 0px;
    ; }

.doitac-item {
    display: flex;
    align-items: center;
    padding: 5px;
    background-color: #fff;
    border: 1px solid #eae9e9;
    border-radius: 5px;
    overflow: hidden;
    ; }

.wrap-category ul {
    list-style: none;
    margin: 0;
    padding: 30px;
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    background-color: #ececec;
    ; }

.wrap-category ul li {
    width: 12%;
    ; }

.wrap-category ul li a span {
}

.wrap-category ul li img {
    height: 60px;
    ; }

.category-lists {
    padding: 30px;
    background-color: #ececec;
    ; }

.category-lists a {
    display: block;
    text-align: center;
    font-size: 15px;
    ; }

.category-lists span {
    position: relative;
    display: block;
    margin: 0 auto 10px;
    padding: 10px;
    border-radius: 20px;
    background-color: #fff;
    ; }

.category-lists img {
    border-radius: 20px;
    ; }

.wrap-counter {
    background: var(--color-main);
    ; }

.counter-item {
    position: relative;
    font-size: 16px;
    text-align: center;
    ; }

.counter-item .number {
    font-size: 34px;
    color: #000;
    font-weight: bold;
    ; }

.counter-item sup {
    position: absolute;
    top: 0px;
    font-size: 2.5rem;
    ; }

.counter-item p {
    margin-bottom: 0px;
    ; }

.counter-item .name {
    font-size: 24px;
    font-family: "Afacad", sans-serif;
}

.visao-item {
    max-width: 75%;
    margin-top: 30px;
    margin-bottom: 50px;
    cursor: pointer;
    font-family: "Playfair Display", sans-serif;
    ; }

.visao-item:nth-child(3) {
    margin-left: 30%;
    ; }

.visao-item:nth-child(2), .visao-item:nth-child(4) {
    margin-left: 15%;
    ; }

.visao-item:last-child {
    margin-bottom: 30px;
    ; }

.visao-item .num {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 31px;
    background-color: #f1f1f1;
    color: var(--color-main);
    border-radius: 50rem;
    font-family: "Mulish", sans-serif;
    font-weight: bold;
    ; }

.visao-item .image {
    position: relative;
    width: 30px;
    ; }

.visao-item .image img {
    position: relative;
    z-index: 2;
    ; }

.visao-item .info {
    position: relative;
    width: calc(100% - 60px);
    z-index: 2;
    ; }

.visao-item .name {
    color: var(--color-main);
    font-weight: bold;
    font-size: 16px;
    -webkit-line-clamp: 2;
    line-height: 1.5;
    transition: all 0.3s ease;
    ; }

.visao-item .desc {
    margin-bottom: 0px;
    color: #454545;
    font-size: 13px;
    font-weight: 600;
    ; }

.visao-item:hover .num {
    color: #fff;
    background: var(--color-main);
    ; }

.visao-item:hover .name {
    color: var(--color-main);
    ; }

.wrap-diadiem-hot .row {
    margin: 0px;
    ; }

.wrap-diadiem-hot .row [class^="col"] {
    padding: 0px;
    ; }

.wrap-diadiem-hot .service-list, .wrap-diadiem-hot .service-list .info {
    border-radius: 0px;
    ; }

.wrap-diadiem-hot .service-list .name {
    background: transparent;
    text-align: left;
    transform: translateY(0%);
    ; }

.wrap-diadiem-hot .service-list .info {
    transform: translateY(-150%);
    ; }

.wrap-diadiem-hot .service-list h2.name {
    font-size: 1.75rem;
    ; }

.wrap-diadiem-hot .service-list::before {
    content: "";
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #000 100%);
    transition: all 0.3s ease;
    ; }

.wrap-diadiem-hot .service-list:hover::before {
    opacity: 0;
    ; }

.wrap-service .title-main::before {
    display: none;
    ; }

.wrap-service {
}

.service-item {
}

.service-item .image {
    border-radius: 20px;
    overflow: hidden;
    ; }

.service-item .name {
    font-family: "Inter";
    font-weight: bold;
    font-size: 21px;
    margin-bottom: 10px;
    ; }

.service-item .desc {
    color: #979494;
    ; }

.wrap-cauhoi {
    position: relative;
}

.wrap-cauhoi:before {
    content: '';
    width: 143px;
    height: 357px;
    position: absolute;
    left: 0%;
    top: 27%;
    background-image: url(../images/bg-vuong.png);
    background-position: 100% center;
}

.wrap-cauhoi:after {
    content: '';
    width: 143px;
    height: 357px;
    position: absolute;
    right: 0%;
    top: -20%;
    background-image: url(../images/bg-vuong.png);
    background-position: 0% center;
}

.wrap-cauhoi .hide-content {
    background: linear-gradient(transparent, #fff 100%);
}

.wrap-cauhoi .accordion {
}

.accordion-item {
    /* border-radius: 5px !important; */
    margin-bottom: 20px;
    overflow: hidden;
    background: #fff;
    color: #000;
    font-size: 16px;
    /* box-shadow: 0.5rem 0.5rem 1rem rgba(0, 160, 227, 0.15); */
    border: 0px solid;
}

.accordion-body {
    padding-top: 0px;
    ; }

.accordion-button {
    border-radius: 0px;
    border: 0px solid transparent;
    border-bottom: 2px solid #e8e8e8;
    position: relative;
    box-shadow: 0px 0px 0px;
    font-size: 18px;
    font-weight: 500;
    padding: 1rem 1rem;
    background: #fff;
}

.accordion-button:not(.collapsed) {
    outline: none !important;
    border: 0px !important;
    box-shadow: none !important;
    color: var(--color-submain);
    background: transparent;
    color: #000;
    font-size: 18px;
    font-weight: 600;
}

/* .accordion-button::after { display: none; width: 30px; height: 30px; background: url('data:image/svg+xml,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 20.2832 19.9316"><g><rect height="19.9316" opacity="0" width="20.2832" x="0" y="0"/><path d="M9.96094 19.9219C15.459 19.9219 19.9219 15.459 19.9219 9.96094C19.9219 4.46289 15.459 0 9.96094 0C4.46289 0 0 4.46289 0 9.96094C0 15.459 4.46289 19.9219 9.96094 19.9219ZM9.96094 18.2617C5.37109 18.2617 1.66016 14.5508 1.66016 9.96094C1.66016 5.37109 5.37109 1.66016 9.96094 1.66016C14.5508 1.66016 18.2617 5.37109 18.2617 9.96094C18.2617 14.5508 14.5508 18.2617 9.96094 18.2617Z" fill="white" fill-opacity="0.5"/><path d="M11.8164 12.7246C12.5488 13.4082 13.4375 12.5781 12.7246 11.8164L11.0449 10.0195L7.45117 6.42578C7.30469 6.28906 7.12891 6.20117 6.89453 6.20117C6.46484 6.20117 6.17188 6.48438 6.17188 6.92383C6.17188 7.11914 6.26953 7.31445 6.40625 7.45117L10.0098 11.0449ZM12.3047 10L12.5781 12.5977L10.0879 12.3047L8.31055 12.3047C7.8418 12.3047 7.53906 12.5977 7.53906 13.0273C7.53906 13.457 7.83203 13.7402 8.29102 13.7402L12.9199 13.7402C13.418 13.7402 13.7402 13.5156 13.7402 12.9297L13.7402 8.33008C13.7402 7.87109 13.4473 7.54883 13.0176 7.54883C12.5879 7.54883 12.3047 7.8418 12.3047 8.31055Z" fill="black"/></g></svg>') no-repeat center; ; }
.accordion-button:not(.collapsed)::after { background: url('data:image/svg+xml,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 20.2832 19.9316"><g><rect height="19.9316" opacity="0" width="20.2832" x="0" y="0"/><path d="M9.96094 19.9219C15.459 19.9219 19.9219 15.459 19.9219 9.96094C19.9219 4.46289 15.459 0 9.96094 0C4.46289 0 0 4.46289 0 9.96094C0 15.459 4.46289 19.9219 9.96094 19.9219ZM9.96094 18.2617C5.37109 18.2617 1.66016 14.5508 1.66016 9.96094C1.66016 5.37109 5.37109 1.66016 9.96094 1.66016C14.5508 1.66016 18.2617 5.37109 18.2617 9.96094C18.2617 14.5508 14.5508 18.2617 9.96094 18.2617Z" fill="black"/><path d="M11.8164 7.19727L10.0098 8.87695L6.41602 12.4805C6.26953 12.6172 6.18164 12.8125 6.18164 13.0078C6.18164 13.4473 6.46484 13.7305 6.89453 13.7305C7.12891 13.7305 7.31445 13.6426 7.45117 13.5059L11.0449 9.91211L12.7246 8.11523C13.4375 7.35352 12.5488 6.51367 11.8164 7.19727ZM12.3047 9.93164L12.3047 11.6211C12.3047 12.0801 12.5879 12.3828 13.0273 12.3828C13.457 12.3828 13.7402 12.0508 13.7402 11.6016L13.7402 6.99219C13.7402 6.41602 13.4277 6.19141 12.9297 6.19141L8.29102 6.19141C7.83203 6.19141 7.53906 6.47461 7.53906 6.9043C7.53906 7.33398 7.8418 7.61719 8.31055 7.61719L10.0879 7.61719L12.5781 7.32422Z" fill="black"/></g></svg>') no-repeat center; transform: rotate(0deg); ; }
*/
.owl-cat a {
    color: #8d8d8d;
    font-size: 16px;
    font-weight: 700;
}

.owl-cat a:hover, .owl-cat a.active {
    color: var(--color-main);
    text-decoration: none;
    border-bottom: 2px solid;
}

.wrap-doitac {
    /* background: #f7f7f7; */
}

.wrap-about {
    overflow: hidden;
    background-image: url(../images/bg-gt.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.wrap-about .title-main h2, .wrap-history .title-main h2, .wrap-tamnhin .title-main h2, .wrap-sumenh .title-main h2, .wrap-vanhoa .title-main h2, .wrap-giatri .title-main h2, .wrap-doitac .title-main h2 {
    font-size: clamp(21px, 2vw, 34px);
}

.wrap-about .title-main h2 span {
    display: block;
    ; }

.wrap-about .about-img {
    position: sticky;
    top: 0px;
    text-align: center;
    ; }

.wrap-about .about-img img {
    /* max-width: 300px !important; */
}

.wrap-about .about-img img:nth-child(2) {
    margin-left: -43%;
    margin-top: 15%;
    ; }

.wrap-about .about-info {
}

.wrap-about .about-info .btn {
    font-size: 18px;
    text-transform: uppercase;
    ; }

.wrap-about .about-info .btn-more {
    padding: 12px 20px;
    color: #fff;
    background: var(--color-main);
    margin-right: 20px;
    ; }

.wrap-about .about-info .btn-more:hover {
    background: #1f9607;
    ; }

.wrap-about .about-info .btn-video {
    display: flex;
    align-items: center;
    padding: 8px 15px;
    color: #111;
    background: var(--color-submain);
    ; }

.wrap-about .about-info .btn-video:hover {
    background-color: #efe20c;
    ; }

.wrap-about .about-count {
}

.wrap-about .about-count .counter, .wrap-about .about-count sup {
    font-family: "1FTV Avilock";
    font-size: 65px;
    color: var(--color-main);
    ; }

.wrap-about .about-count .counter {
    line-height: 55px;
    ; }

.wrap-about .about-count p {
    text-transform: uppercase;
    font-size: 18px;
    ; }

.wrap-goikham {
    background-color: #f8f8f8;
    ; }

.goikham-item .info {
    position: relative;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    background: #fff;
    padding: 20px;
    margin-top: -40px;
    ; }

.goikham-item .name {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 15px;
    ; }

.goikham-item .name a {
    color: var(--color-main);
    ; }

.goikham-item .name a:hover {
    color: var(--color-submain);
    ; }

.goikham-item .more .btn-main {
    width: 50%;
    ; }

.wrap-chuyenkhoa-list {
}

#chuyenkhoaTabs {
    justify-content: space-between;
    ; }

#chuyenkhoaTabs .nav-link {
    font-size: 14px;
    padding: 5px;
    color: #999999;
    background: #f0f0f0;
    ; }

#chuyenkhoaTabs .nav-link.active {
    color: #fff;
    background: var(--color-main);
    ; }

#chuyenkhoaTabs .nav-link.active img {
    filter: brightness(0) invert(1);
    ; }

#chuyenkhoaTabsContent {
    border: 1px solid #dee2e6;
    border-top: 0px;
    box-shadow: 0.5rem 0.5rem 1rem rgba(0, 160, 227, 0.15);
    ; }

.wrap-doingu {
    background: #f8f9f8 url(../images/bg_doingu.jpg) no-repeat right bottom;
    ; }

.doingu-item {
    color: var(--color-main);
    ; }

.doingu-item .image {
    border-radius: 10px;
    overflow: hidden;
    ; }

.doingu-item .name {
    font-family: "Playfair Display", sans-serif;
    font-size: 18px;
    font-weight: bold;
    ; }

.doingu-item .name a {
    color: var(--color-main);
    ; }

.doingu-item .desc {
    color: #7e7e7e;
    font-size: 14px;
    ; }

.wrap-tieuchi {
    background: #f7f7f7;
    ; }

.tieuchi-inner {
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 250px;
    ; }

.tieuchi-item {
    padding: 0px;
    max-width: 85%;
    cursor: pointer;
    ; }

.tieuchi-item .num {
    font-family: "Inter", serif;
    font-size: 75px;
    line-height: 1;
    background: linear-gradient(to bottom, rgba(255, 203, 15, 1) 0%, rgba(255, 255, 255, 1) 100%);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    transition: all 0.3s ease;
    ; }

.tieuchi-item .image {
    position: relative;
    width: 30px;
    ; }

.tieuchi-item .image img {
    position: relative;
    z-index: 2;
    ; }

.tieuchi-item .info {
    position: relative;
    width: calc(100% - 60px);
    z-index: 2;
    ; }

.tieuchi-item .name {
    font-family: "Inter", serif;
    color: #000;
    font-weight: 600;
    font-size: 16px;
    -webkit-line-clamp: 2;
    line-height: 1.5;
    transition: all 0.3s ease;
    ; }

.tieuchi-item .desc {
    margin-bottom: 0px;
    color: #868686;
    font-size: 14px;
    ; }

.tieuchi-item:hover .num {
    background: var(--bg-linear-hover);
    background-clip: text;
    -webkit-background-clip: text;
    ; }

.tieuchi-item:hover .name {
    color: var(--color-main);
    ; }

.showroomSwiper .swiper-slide {
    width: 300px;
    ; }

.panorama-slider {
    width: 100%;
    padding: 60px 0;
    perspective: 1000px;
    overflow: visible;
    ; }

.panorama-slider .swiper-slide {
    width: 250px;
    transition: transform 0.5s ease;
    transform-origin: center center;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    ; }

.hinhthuc-item {
    margin-bottom: 15px;
    ; }

.hinhthuc-item .num {
    font-family: "Dynalight";
    font-size: 75px;
    line-height: 65px;
    color: #eaeaea;
    transition: all 0.3s ease;
    ; }

.hinhthuc-item:hover .num {
    color: var(--color-main);
    transform: scale(1.2);
    ; }

.hinhthuc-item .char {
    font-family: "SVN-Poppins";
    font-size: 100px;
    font-weight: 600;
    line-height: 100px;
    color: transparent;
    background: var(--linear-2);
    background-clip: text;
    transform: translate(-7%, 65%);
    ; }

.hinhthuc-item .image {
    position: relative;
    width: 94px;
    padding: 20px;
    background-color: var(--color-main);
    border-radius: 100%;
    ; }

.hinhthuc-item .image img {
    position: relative;
    z-index: 2;
    ; }

.hinhthuc-item .info {
    position: relative;
    width: calc(100% - 90px);
    z-index: 2;
    ; }

.hinhthuc-item .name {
    font-weight: 600;
    color: #333;
    font-size: 16px;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
    ; }

.hinhthuc-item .desc {
    margin-bottom: 0px;
    color: #333;
    font-size: 15px;
    min-height: 45px;
    -webkit-line-clamp: 2;
    ; }

.wrap-tamnhin {
    background: #f7f7f7;
    ; }

.wrap-tamnhin h3, .wrap-sumenh h3 {
    color: var(--color-main);
    font-size: cimp(24px, 3vw, 28px);
    font-family: "Lexend", sans-serif;
    font-weight: bold;
    ; }

.wrap-tamnhin h3::after {
    content: "";
    display: none;
    width: 50px;
    height: 2px;
    background-color: var(--color-submain);
    ; }

.as-layer.as-vertical {
    width: 65%;
    ; }

.wrap-banner {
}

.wrap-tiktok .tiktok-container {
    position: relative;
    width: 100%;
    height: 568px;
    padding: 14px;
    ; }

/* .wrap-tiktok .tiktok-container::before { content: ''; display: block; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background: url(../images/bg_tiktok.png) no-repeat; z-index: 1; ; }
*/
.wrap-tiktok .tiktok-container .tiktok-iframe {
    position: relative;
    z-index: 2;
    ; }

.wrap-tiktok .tiktok-container .tiktok-iframe iframe {
    overflow: hidden;
    border-radius: 20px;
    ; }

.wrap-tiktok .tiktok-container .tiktok-button {
    position: absolute;
    z-index: 3;
    bottom: 0px;
    right: 0px;
    width: 127px;
    height: 125px;
    background: url(../images/bg_tiktok_icon.png) no-repeat;
    ; }

.wrap-tiktok .tiktok-container .tiktok-button:hover {
    color: #f00;
    ; }

.wrap-tiktok .tiktok-container .tiktok-button .btn-frame {
    position: absolute;
    top: 50px;
    left: 50px;
    color: #fff;
    ; }

.wrap-appointment {
    background: #f7f7f7;
    ; }

#frm-appointment-2 {
    padding: 30px;
    background: url(../images/bg_datlich.jpg) no-repeat center center;
    background-size: cover;
    border-radius: 10px;
    overflow: hidden;
    ; }

#frm-appointment-2 label {
    margin-bottom: 5px;
    font-weight: bold;
    color: var(--color-main);
    ; }

#frm-appointment-2 .form-control, #frm-appointment-2 .form-select {
    background-color: transparent;
    ; }

.slider-video-thumb {
    margin: 0px -0.5rem;
    ; }

.video-item {
    position: relative;
    overflow: hidden;
    margin: 0px auto;
    ; }

.video-item .image {
    position: relative;
    overflow: hidden;
    ; }

.video-item .name {
    position: absolute;
    left: -85px;
    bottom: 100px;
    padding: 10px 20px;
    background: linear-gradient(to bottom, #2fd0ff 0%, #0bb1e1 100%);
    color: #fff;
    font-family: "Goldman", sans-serif;
    font-size: 16px;
    text-transform: uppercase;
    border-radius: 3px;
    margin-bottom: 0px;
    transform: rotate(-90deg);
    ; }

.video-item .btn-play {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 50px;
    height: 50px;
    transform: translate(-50%, -50%);
    transition: all 0.3s;
    opacity: 1;
    ; }

.video-item .btn-play .kenit-alo-circle {
    border-color: rgba(255, 255, 255, 0.5);
    ; }

.video-item .btn-play .kenit-alo-circle-fill {
    background: rgba(255, 255, 255, 0.3);
    ; }

.video-item .btn-play i {
    background: #ff0000;
    ; }

.video-item .btn-play svg {
    color: #fff;
    ; }

#frm-newsletter .form-control {
    color: #949494;
    border: 0px;
    outline: none !important;
    box-shadow: none !important;
    background-color: transparent;
    ; }

#frm-newsletter button[type="submit"] {
    border: 1px solid #fff;
    background: transparent;
    color: #fff;
    font-size: 14px;
    ; }

#frm-newsletter {
    position: relative;
    ; }

.form-check-input:checked {
    border-color: var(--color-submain);
    background: var(--color-submain);
    ; }

#frm-newsletter .frm-content {
    padding: 40px 20px;
    background-color: #f3f3f3;
    border-radius: 20px;
    ; }

#frm-newsletter .frm-title {
    color: var(--color-submain);
    ; }

#frm-newsletter .frm-title span {
    color: #757575;
    ; }

.newsletter-input svg {
    display: none;
    position: absolute;
    top: 20px;
    right: 10px;
    ; }

/* Newsletter */
.newsletter-input {
    position: relative;
    display: flex;
    align-items: center;
    width: calc(100%);
    margin-bottom: 25px;
    background-color: #fff;
    border-radius: 5px;
    ; }

.newsletter-input label {
    padding-left: 10px;
    padding-top: 0.25rem;
    white-space: nowrap;
    margin: 0px;
    color: #757575;
    font-size: 14px;
    ; }

.newsletter-input input, .newsletter-input select, .newsletter-input textarea {
    font-size: 16px;
    height: 35px;
    border: 1px solid #ccc;
    box-shadow: none !important;
    outline: none !important;
    ; }

.newsletter-input input::placeholder, .newsletter-input textarea::placeholder {
    font-size: 16px;
    ; }

.newsletter-input textarea {
    height: 120px;
    resize: none;
    ; }

.newsletter-button {
    position: absolute;
    right: 2px;
    top: 2px;
    ; }

.newsletter-button button {
    padding: 0px 10px;
    height: 31px;
    border: 0px;
    background: var(--color-main);
    color: #fff;
    border-radius: 0.25rem;
    ; }

.newsletter-button button:hover {
    background: var(--color-submain);
    ; }

.wrap-whyus {
    background: url(../images/bg_whyus.jpg) no-repeat center center;
    background-size: cover;
    color: #fff;
    ; }

.whyus-list {
    text-align: center;
    ; }

.whyus-list:hover .name {
    color: var(--color-main);
    ; }

.whyus-list:hover .image-rotate img {
    animation: continuousRotateY 2s linear infinite;
    ; }

.whyus-list .desc {
}

.quytrinhtm-item {
    margin: 0px 5px 10px 0px;
    border-radius: 10px;
    overflow: hidden;
    ; }

.quytrinhtm-item .num {
    font-size: 60px;
    ; }

.quytrinhtm-item .name {
    font-family: "Inter";
    font-size: 18px;
    font-weight: 600;
    ; }

.wrap-quytrinh {
    background: rgb(255, 255, 255);
    background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(238, 238, 238, 1) 100%);
    ; }

.quytrinh-item {
    position: relative;
    ; }

.quytrinh-item:hover .name {
    color: var(--color-main);
    ; }

.quytrinh-item:nth-child(odd) {
    padding-bottom: 5rem;
    ; }

.quytrinh-item:nth-child(even) {
    padding-top: 5rem;
    ; }

.quytrinh-item::before {
    content: "";
    display: block;
    position: absolute;
    top: 30%;
    right: -14%;
    width: 83px;
    height: 24px;
    background: url(../images/arrow_quytrinh.png) no-repeat;
    background-size: 100%;
    ; }

.quytrinh-item:nth-child(even)::before {
    background: url(../images/arrow_quytrinh2.png) no-repeat;
    ; }

.quytrinh-item:last-child::before {
    background: none;
    ; }

.wrap-filter .search input {
    border-radius: 80px;
    height: 50px;
    ; }

.wrap-filter .search .buttons-common {
    position: absolute;
    top: 4px;
    right: 4px;
    ; }

.wrap-filter .search input::placeholder {
    font-size: 16px;
    ; }

.wrap-filter .filter-counter {
    display: inline-block;
    margin-left: 2px;
    font-size: 12px;
    line-height: 12px;
    width: 14px;
    height: 14px;
    text-align: center;
    border: 1px solid #e5e5e5;
    opacity: 0;
    ; }

.wrap-filter .filter-counter.show {
    opacity: 1;
    ; }

.filter-search {
    border-radius: 0px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: end;
    outline: none;
    overflow: hidden;
    transition: 400ms ease-in-out;
    position: relative;
    width: 200px;
    height: 30px;
    border: 1px solid #cfcfcf;
    ; }

.filter-search input {
    position: absolute;
    top: 0;
    left: 0;
    width: calc(100% - 30px);
    height: 100%;
    outline: none !important;
    border: 0px !important;
    display: block;
    z-index: 1;
    background: #fff !important;
    box-shadow: none !important;
    ; }

.filter-search .btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0px;
    border-radius: 5px;
    width: 30px;
    height: 30px;
    cursor: pointer;
    background: transparent;
    border-color: transparent;
    z-index: 2;
    ; }

.filter-dropdown {
    position: absolute;
    left: 0px;
    width: 100%;
    background-color: #fff;
    top: 100%;
    border-radius: 0.5rem;
    -webkit-box-shadow: 1px 1px 15px rgba(0, 0, 0, 0.15);
    box-shadow: 1px 1px 15px rgba(0, 0, 0, 0.15);
    -webkit-transform: perspective(600px) rotateX(-90deg);
    transform: perspective(600px) rotateX(-90deg);
    -webkit-transform-origin: 0 0 0;
    transform-origin: 0 0 0;
    opacity: 0;
    visibility: hidden;
    padding: 15px;
    transition: all 0.3s ease-in-out;
    z-index: 10;
    ; }

.filter-dropdown.show {
    -webkit-transform: perspective(600px) rotateX(0);
    transform: perspective(600px) rotateX(0);
    transform-origin: 0 0 0;
    -webkit-transform-origin: 0 0 0;
    opacity: 1;
    visibility: visible;
    ; }

.filter-dropdown-item a {
    font-size: 13px;
    ; }

.wrap-project {
    background: #fff;
    ; }

.project-item {
    display: block;
    ; }

.project-item .name {
    text-align: center;
    font-size: 18px;
    text-transform: uppercase;
    ; }

.wrap-news {
}

.news-item {
    border-radius: 0px;
    overflow: hidden;
    background-color: #fff;
    ; }

.news-item .image {
    position: relative;
    margin-bottom: 0px;
    ; }

.news-item .image img {
}

.news-item .info {
    position: relative;
    width: 100%;
    padding: 10px;
    z-index: 10;
    ; }

.news-item .info svg {
}

.news-item .time {
    margin: 0px auto;
    width: 65px;
    height: 82px;
    border-bottom: 1px solid var(--color-main);
    text-align: center;
    color: #222;
    font-size: 16px;
    padding-top: 25px;
    margin-bottom: 15px;
    line-height: 20px;
    background: url(../images/bg_time.png) no-repeat top center;
    background-size: cover;
    ; }

.news-item .time span:first-child {
    display: inline-block;
    font-size: 30px;
    font-weight: bold;
    padding-bottom: 5px;
    border-bottom: 1px solid #222;
    ; }

.news-item .time span:last-child {
    display: block;
    ; }

.news-item .author {
    font-size: 14px;
    color: #aaaaaa;
    ; }

.news-item .name {
}

.news-item .name a {
    position: relative;
    font-size: 14px;
    font-weight: 600;
    color: #333;
    ; }

.news-item .name a:hover {
    color: var(--color-main);
    ; }

.news-item .desc {
    font-size: 14px;
    color: #9c9c9c;
    ; }

.news-item .more a {
    font-size: 12px;
    color: #858585;
    ; }

.news-item .more a:hover {
    letter-spacing: 2px;
    ; }

.news-item .meta {
    position: absolute;
    top: 10px;
    left: 10px;
    ; }

.news-item .meta span {
    display: block;
    font-size: 0.875rem;
    color: #fff;
    padding: 3px 5px 2px;
    border-radius: 3px;
    background-color: var(--color-main);
    ; }

.news-item .line {
    margin-top: 30px;
    margin-bottom: 5px;
    width: 50px;
    height: 2px;
    background: #89b0e8;
    ; }

.news-item:hover .name a {
    color: var(--color-main);
    ; }

.news-item.list {
    display: flex;
    margin-bottom: 15px;
    ; }

.news-item.list .image {
    width: 200px;
    ; }

.news-item.list .info {
    padding: 10px 20px;
    width: calc(100% - 210px);
    ; }

.wrap-giatri {
    /* background-color: #f7f7f7; */
}

.giatri-item {
    position: relative;
    cursor: pointer;
    padding: 20px 10px;
    text-align: center;
    border: 1px solid #676767;
}

.giatri-item .info {
    text-align: start;
    position: relative;
    width: calc(100% - 80px);
}

.giatri-item .image {
    width: 53px;
}

.giatri-item .image img {
}

.giatri-item .name {
    font-size: 21px;
    color: #000;
    font-weight: bold;
    ; }

.giatri-item .desc {
    color: #888888;
    font-size: 16px;
    height: 145px;
}

.wrap-doingu-inner {
    background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(207, 207, 207, 1) 100%);
    ; }

.wrap-vanhoa .wrap-content {
    padding: 40px;
    border-radius: 20px;
    box-shadow: 5px 5px 0px rgba(234, 230, 230, 0.5);
    ; }

.vanhoa-item {
}

.vanhoa-item .image {
    width: 70px;
    ; }

.vanhoa-item .name {
    font-size: 18px;
    font-weight: 600;
    ; }

.vanhoa-item .desc {
    color: #767676;
    ; }

.wrap-history {
}

.history-item .info {
}

.history-item .name {
    font-size: 31px;
    font-weight: 500;
    line-height: 32px;
    font-family: "Afacad", sans-serif;
    margin-bottom: 15px;
    color: var(--color-main);
}

.year-item {
    font-size: 16px;
    text-align: center;
    position: relative;
    color: #b9b9b9;
    ; }

.year-item span {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 59px;
    font-size: 24px;
}

.year-item.slick-current {
    font-weight: 600;
    color: #000;
    font-size: 24px;
}

.year-item.slick-current::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    margin: auto;
    width: 0;
    height: 0;
    border-top: 6px solid #000;
    border-bottom: 6px solid transparent;
    border-left: 6px solid transparent;
    border-right: 6px solid #fff;
}

.year-item.slick-current::after {
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
    width: 0;
    height: 0;
    border-top: 6px solid transparent;
    border-bottom: 6px solid #000;
    border-left: 6px solid transparent;
    border-right: 6px solid #fff;
}

.wrap-history .slider-nav {
    width: 100%;
}

.wrap-history .slider-nav .slick-arrow {
    width: 30px;
    height: 30px;
    ; }

.wrap-history .slider-nav .slick-arrow::before {
    font-size: 25px;
    color: var(--color-main);
    ; }

.wrap-history .slider-for {
    width: 100%;
}

.item-giatri {
    position: relative;
    padding: 20px;
    background-color: var(--color-main);
    border-radius: 10px;
    ; }

.item-giatri .bg {
    position: absolute;
    width: 30%;
    height: 65%;
    top: 0px;
    right: 0px;
    opacity: 0.5;
    ; }

.item-giatri .bg img {
    max-width: 100%;
    max-height: 100%;
    filter: brightness(0) invert(1);
    ; }

.item-giatri .icon {
    position: relative;
    width: 40px;
    margin-bottom: 20px;
    ; }

.item-giatri .name {
    position: relative;
    font-family: "Playfair Display", sans-serif;
    font-size: 18px;
    font-weight: bold;
    color: #fff;
    ; }

.item-giatri .desc {
    position: relative;
    font-size: 15px;
    color: #87c5df;
    line-height: 2;
    ; }

.item_history {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    ; }

.item_history::before {
    content: "";
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 100%;
    height: 50%;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%);
    ; }

.item_history .info {
    position: absolute;
    padding: 10px 20px;
    bottom: 10px;
    left: 10px;
    width: 100%;
    color: #fff;
    ; }

.item_history .name {
    font-family: "Playfair Display", sans-serif;
    font-size: 31px;
    margin-bottom: 15px;
    color: #fff;
    ; }

.item_history .desc {
    font-size: 16px;
    color: #fff;
    ; }

a.play {
    position: relative;
    ; }

a.play .btn-frame {
    position: absolute;
    width: 50px;
    height: 50px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    ; }

a.play .btn-frame i {
    color: #fff;
    background-color: rgba(255, 255, 255, 0.3);
    ; }

a.play .btn-frame .kenit-alo-circle {
    border-color: rgba(255, 255, 255, 0.5);
    ; }

.wrap-video .image {
    border-radius: 10px;
    overflow: hidden;
    ; }

.wrap-video .btn-play {
    display: inline-block;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    ; }

.wrap-video .btn-play svg {
    color: #fff;
    ; }

/* Mmenu */
.menu-res {
    z-index: 100;
    background: var(--color-main);
    position: relative;
    display: none;
    ; }

.menu-bar-res {
    display: none;
    height: 34px;
    padding: 0px 10px;
    border-radius: 5px;
    background: var(--color-main);
    justify-content: center;
    ; }

#menu {
    display: none;
    ; }

#hamburger {
    position: relative;
    display: block;
    width: 34px;
    height: 30px;
    border-radius: 5px;
    border: 1px solid #fff;
    background: var(--color-main);
    ; }

#hamburger:before, #hamburger:after, #hamburger span {
    background: #fff;
    content: "";
    display: block;
    width: 60%;
    height: 1px;
    position: absolute;
    left: 20%;
    ; }

#hamburger:before {
    top: 7px;
    ; }

#hamburger span {
    top: 14px;
    ; }

#hamburger:after {
    top: 21px;
    ; }

#hamburger:before, #hamburger:after, #hamburger span {
    -webkit-transition: none 0.5s ease 0.5s;
    transition: none 0.5s ease 0.5s;
    -webkit-transition-property: transform, top, bottom, left, opacity;
    transition-property: transform, top, bottom, left, opacity;
    ; }

.mm-wrapper_opening #hamburger:before, .mm-wrapper_opening #hamburger:after {
    top: 14px;
    ; }

.mm-wrapper_opening #hamburger span {
    left: -50px;
    opacity: 0;
    ; }

.mm-wrapper_opening #hamburger:before {
    transform: rotate(45deg);
    ; }

.mm-wrapper_opening #hamburger:after {
    transform: rotate(-45deg);
    ; }

.mm-menu_opened {
    display: block !important;
    z-index: 99999 !important;
    ; }

.mm-navbar, .mm-panels, .mm-panel {
    background: #fff !important;
    ; }

.mm-menu a, .mm-menu a:active, .mm-menu a:hover, .mm-menu a:link, .mm-menu a:visited {
    color: #000;
    ; }

.mm-btn:after, .mm-btn:before {
    border-color: #000;
    ; }

.mm-listitem-product .mm-listitem__text {
    font-size: 15px;
    flex-basis: auto;
    flex-grow: 0;
    white-space: normal;
    padding: 2px 3px;
    margin: 2px;
    ; }

/* Search Responsive */
.search-res {
    position: relative;
    ; }

.search-res .icon-search {
    cursor: pointer;
    text-align: center;
    color: #ffffff;
    font-size: 16px;
    margin: 0px;
    margin-left: 10px;
    ; }

.search-res .icon-search.active {
    color: var(--color-submain);
    ; }

.search-res .search-grid {
    position: absolute;
    top: 35px;
    right: -12px;
    width: 0px;
    height: 40px;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid var(--color-main);
    z-index: 2;
    opacity: 0;
    border-radius: 25px;
    line-height: normal;
    ; }

.search-res .search-grid p {
    float: left;
    width: 35px;
    height: 38px;
    cursor: pointer;
    outline: none;
    border: none;
    margin: 0px;
    font-size: 17px;
    display: block;
    color: var(--color-main);
    line-height: 35px;
    text-align: center;
    ; }

.search-res .search-grid input {
    width: calc(100% - 35px);
    float: right;
    line-height: 38px;
    outline: none;
    border: none;
    color: var(--color-main);
    ; }

.search-res .search-grid input::-webkit-input-placeholder {
    color: #313131;
    ; }

.search-res .search-grid input:-moz-placeholder {
    color: #313131;
    ; }

.search-res .search-grid input::-moz-placeholder {
    color: #313131;
    ; }

.search-res .search-grid input:-ms-input-placeholder {
    color: #313131;
    ; }

/* Slideshow */
@keyframes dance {
    0% {
        -webkit-transform: scale(0.5);
        ; }

    100% {
        -webkit-transform: scale(1.5);
        ; }
}

@keyframes moveBounce {
    0% {
        -webkit-transform: translateY(0px);
        transform: translateY(0px);
        ; }

    50% {
        -webkit-transform: translateY(20px);
        transform: translateY(20px);
        ; }

    100% {
        -webkit-transform: translateY(0px);
        transform: translateY(0px);
        ; }
}

@keyframes moveUpBounce {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        ; }

    50% {
        -webkit-transform: translateY(35px);
        transform: translateY(35px);
        ; }

    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        ; }
}

@keyframes moveLeftBounceright {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        ; }

    50% {
        -webkit-transform: translateX(35px);
        transform: translateX(35px);
        ; }

    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        ; }
}

@keyframes rotateme {
    from {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
        ; }

    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
        ; }
}

@-webkit-keyframes rotateme {
    from {
        -webkit-transform: rotate(0deg);
        ; }

    to {
        -webkit-transform: rotate(360deg);
        ; }
}

.slideshow {
    position: relative;
    overflow: hidden;
    ; }

.slideshow .slider {
    position: relative;
    width: 100%;
    ; }

.slideshow .banner {
    width: 37%;
    ; }

.slideshow .banner-item {
    display: block;
    ; }

.slideshow .banner-item:nth-child(1) {
    margin-bottom: 20px;
    ; }

.slbannerhh {
    display: table;
    table-layout: fixed;
    width: 100%;
    ; }

.slbannerhh .banvdimg {
    padding-top: 32.7%;
    position: relative;
    overflow: hidden;
    ; }

.slbannerhh video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    ; }

.slide-text .wrap-content {
    position: absolute;
    top: 20%;
    right: 0px;
    left: 0px;
    width: 100%;
    padding: 100px 0px;
    ; }

.slide-text .star {
    position: absolute;
    top: 0px;
    left: 10%;
    -webkit-animation: dance 1.5s alternate infinite;
    animation: dance 1.5s alternate infinite;
    ; }

.slide-text .arrow {
    position: absolute;
    bottom: -40px;
    left: 20%;
    -webkit-animation: moveLeftBounceright 2s linear infinite;
    animation: moveLeftBounceright 2s linear infinite;
    ; }

.slide-text .triangle {
    position: absolute;
    z-index: 22;
    bottom: -4%;
    left: 69%;
    color: rgb(255, 255, 255);
    width: 72px;
    height: 82px;
    min-height: 0px;
    min-width: 0px;
    max-height: none;
    max-width: none;
    transform-origin: 50% 50%;
    opacity: 1;
    transform: translate(0px, 0px);
    visibility: visible;
    -webkit-animation: moveBounce 2s linear infinite;
    animation: moveBounce 2s linear infinite;
    ; }

.slide-text .rotateme {
    position: absolute;
    left: 10px;
    top: 5px;
    right: 0px;
    bottom: 0px;
    -webkit-animation-name: rotateme;
    animation-name: rotateme;
    -webkit-animation-duration: 20s;
    animation-duration: 20s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    ; }

.slide-left, .slide-right {
    position: relative;
    ; }

.slide-left {
    width: 340px;
    ; }

.slide-left {
    width: 300px;
    ; }

.slide-right span {
    position: absolute;
    left: 10px;
    top: 5px;
    right: 0px;
    bottom: 0px;
    ; }

.slide-center {
    width: 540px;
    text-align: center;
    color: #fff;
    ; }

.slide-center h4 {
    text-transform: uppercase;
    color: var(--color-main);
    letter-spacing: 2px;
    font-weight: 400;
    font-size: 20px;
    ; }

.slide-center h2 {
    font-family: "Lexend Deca", sans-serif;
    font-size: 48px;
    margin-bottom: 30px;
    ; }

.slide-center p {
    color: #cac6c6;
    margin-bottom: 20px;
    ; }

.slide-center a {
    display: inline-block;
    padding: 15px 30px 12px;
    text-transform: uppercase;
    color: #fff;
    background-color: var(--color-main);
    border-radius: 30px;
    box-shadow: 1px 1px 0px #fff;
    ; }

.slide-center a:hover {
    background-color: #be1217;
    ; }

/* .slideshow { position: relative; width: calc(100%); overflow: hidden; ; }
.slideshow .container { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 3; ; }
.slideshow .scroll-down { color: var(--color-main); text-transform: uppercase; position: absolute; bottom: 65px; left: 50%; transform: translateX(-50%); text-align: center; padding-bottom: 40px; line-height: 1.4em; z-index: 99; ; }
.scroll-down .icon { position: relative; ; }
.slideshow .scroll-down .icon span { position: absolute; top: 0; left: 50%; width: 12px; height: 12px; margin-left: -6px; border-left: 2px solid var(--color-main); border-bottom: 2px solid var(--color-main); -webkit-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-animation: scrolldown 2s infinite; animation: scrolldown 2s infinite; opacity: 0; box-sizing: border-box; ; }
.slideshow .scroll-down .icon span:nth-of-type(1) { -webkit-animation-delay: 0s; animation-delay: 0s; ; }
.slideshow .scroll-down .icon span:nth-of-type(2) { top: 5px; -webkit-animation-delay: .15s; animation-delay: .15s; border-left-width: 2px; border-bottom-width: 2px; width: 12px; height: 12px; margin-left: -6px; ; }
.slideshow .scroll-down .icon span:nth-of-type(3) { top: 10px; -webkit-animation-delay: .3s; animation-delay: .3s; border-left-width: 2px; border-bottom-width: 2px; width: 12px; height: 12px; margin-left: -6px; ; }
@keyframes scrolldown { 0% { opacity: 0; ; }
50% { opacity: 1; ; }
100% { opacity: 0; ; }
}
.slideshow-item { position: relative; display: block; ; }
.slideshow-item::before { content: ''; display: none; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.3); z-index: 2; ; }
.slideshow-image { display: block; position: relative; z-index: 1; overflow: hidden; ; }
.slideshow:hover .control-slideshow { opacity: 1; ; }
.control-slideshow { opacity: 0; ; }
.slideshow h2 { font-size: 5rem; color: #fff; text-transform: uppercase; font-weight: bold; ; }
.slideshow h5 { color: #fff; font-weight: 300; ; }
.banner { position: relative; ; }
.banner::before { content: ''; position: absolute; left: 0; top: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, .3); ; }
.banner h2 { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); margin-bottom: 0px; text-transform: uppercase; text-align: center; color: #fff; z-index: 2; ; }
.info-slide { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; ; }
*/
.name-slide {
}

.desc-slide {
}

.views-more-slide {
}

.box-slide.slick-current.slick-active .slide-left {
    animation: fadeInLeftBig;
    animation-duration: 1s;
    animation-delay: 0.5s;
    animation-fill-mode: forwards;
    ; }

.box-slide.slick-current.slick-active .slide-right {
    animation: fadeInRightBig;
    animation-duration: 1s;
    animation-delay: 1s;
    animation-fill-mode: forwards;
    ; }

.box-slide.slick-current.slick-active .name-slide {
    animation: fadeInUp;
    animation-duration: 1s;
    animation-delay: 1.5s;
    animation-fill-mode: forwards;
    ; }

.box-slide.slick-current.slick-active .desc-slide {
    animation: fadeInUp;
    animation-duration: 1s;
    animation-delay: 2s;
    animation-fill-mode: forwards;
    ; }

.box-slide.slick-current.slick-active .views-more-slide {
    animation: scaleLarge;
    animation-duration: 1s;
    animation-delay: 2.5s;
    animation-fill-mode: forwards;
    ; }

.slide-text .slick-prev, .slide-text .slick-next {
    width: 40px;
    height: 50px;
    border-radius: 5px;
    background: rgba(0, 0, 0, 0.3);
    ; }

.slide-text .slick-prev {
    left: 5px;
    ; }

.slide-text .slick-next {
    right: 5px;
    ; }

.slide-text .slick-prev:before {
    font-family: "FontAwesome";
    font-weight: 400;
    content: "\f053";
    ; }

.slide-text .slick-next:before {
    font-family: "FontAwesome";
    font-weight: 400;
    content: "\f054";
    ; }

.slide-text .slick-dots {
    bottom: 20px;
    ; }

.slide-text .slick-dots li {
    margin: 0;
    ; }

.slide-text .slick-dots li button:before {
    color: #fff;
    font-size: 15px;
    ; }

.search-multiple {
    position: relative;
    z-index: 10;
    margin-top: -70px;
    background: linear-gradient(to bottom, rgba(248, 248, 248, 0) 0%, rgba(242, 242, 242, 1) 100%);
    ; }

.checkbox-card {
    display: block;
    cursor: pointer;
    ; }

.checkbox-card input[type="radio"], .checkbox-card input[type="checkbox"] {
    display: none;
    ; }

.checkbox-card input[type="radio"]:checked + .content, .checkbox-card input[type="checkbox"]:checked + .content {
    background: var(--bg-linear);
    border-left: 3px solid #000;
    ; }

.search-multiple .col-lg-7 {
    border-right: 1px solid #ccc;
    ; }

.search-multiple .loaixe-item {
    cursor: pointer;
    padding: 0px 10px;
    border-radius: 5px;
    text-align: center;
    background-color: #eeeeee;
    transition: all 0.2s ease-in-out;
    ; }

.search-multiple .loaixe-item .image {
    margin-bottom: 0px;
    ; }

.search-multiple .loaixe-item .image img {
    height: 80px;
    ; }

.search-multiple .loaixe-item .name {
    font-size: 18px;
    font-weight: bold;
    ; }

.search-multiple .hangxe-item {
    border-radius: 5px;
    padding: 7px 5px 5px;
    text-align: center;
    transition: all 0.2s ease-in-out;
    ; }

.search-multiple .hangxe-item .name {
    font-size: 13px;
    ; }

.search-multiple .hangxe-item .image {
    margin: 0px auto;
    margin-bottom: 5px;
    ; }

.search-multiple .hangxe-item .image img {
    height: 20px;
    ; }

.search-multiple .giaban-item {
    padding: 5px;
    background: #eeeeee;
    text-align: center;
    border-radius: 5px;
    transition: all 0.2s ease-in-out;
    ; }

.search-multiple .giaban-item .name {
    font-size: 13px;
    ; }

.search-multiple .loaixe-item:hover, .search-multiple .hangxe-item:hover, .search-multiple .giaban-item:hover {
    background: var(--bg-linear);
    ; }

/* Search */
.search {
    display: flex;
    width: 100%;
    ; }

.search input::-webkit-input-placeholder {
    color: #313131;
    ; }

.search input:-moz-placeholder {
    color: #313131;
    ; }

.search input::-moz-placeholder {
    color: #313131;
    ; }

.search input:-ms-input-placeholder {
    color: #313131;
    ; }

/* Intro */
.wrap-intro {
    background-color: #eee;
    ; }

.news-intro:before {
    content: "";
    position: absolute;
    width: 1px;
    height: calc(100% - 50px);
    top: 10px;
    left: 90px;
    background-color: #cacaca;
    ; }

.news-scroll:before, .news-scroll:after {
    content: "";
    position: absolute;
    width: 10px;
    height: 10px;
    left: 85px;
    border-radius: 100%;
    background-color: #cacaca;
    ; }

.news-scroll:before {
    top: 10px;
    ; }

.news-scroll:after {
    bottom: 40px;
    ; }

.news-control {
    left: 85px;
    font-size: 13px;
    opacity: 0.5;
    z-index: 1;
    cursor: pointer;
    ; }

.news-control:hover {
    opacity: 1;
    color: #ec2d3f;
    ; }

.news-control#up {
    top: -10px;
    ; }

.news-control#down {
    bottom: 20px;
    ; }

.news-shadow {
    padding-bottom: 30px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    ; }

.news-shadow .news-shadow-time {
    font-size: 13px;
    width: 75px;
    margin-right: 45px;
    ; }

.news-shadow .news-shadow-time:after {
    content: "";
    position: absolute;
    width: 20px;
    height: 20px;
    top: calc(50% - 20px / 2);
    right: -26px;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url(../images/pattern-news.png);
    ; }

.news-shadow .news-shadow-article {
    width: calc(100% - 120px);
    padding: 14px 15px;
    border-radius: 10px;
    background-color: #ffffff;
    border: 1px solid #cecabb;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    ; }

.news-shadow .news-shadow-article:before {
    content: "";
    position: absolute;
    top: calc(50% - 26px / 2);
    left: -13px;
    z-index: 0;
    border-top: 13px solid transparent;
    border-right: 13px solid #cecabb;
    border-bottom: 13px solid transparent;
    ; }

.news-shadow .news-shadow-article:after {
    content: "";
    position: absolute;
    top: calc(50% - 24px / 2);
    left: -11px;
    z-index: 1;
    border-top: 12px solid transparent;
    border-right: 11px solid #ffffff;
    border-bottom: 12px solid transparent;
    ; }

.news-shadow .news-shadow-article .news-shadow-image {
    margin-right: 10px;
    width: 90px;
    ; }

.news-shadow .news-shadow-article .news-shadow-info {
    width: calc(100% - 100px);
    ; }

.news-shadow .news-shadow-article .news-shadow-info .news-shadow-name {
    height: 36px;
    font-size: 15px;
    font-weight: 700;
    ; }

.news-shadow .news-shadow-article .news-shadow-info .news-shadow-name a {
    color: #222222;
    ; }

.news-shadow .news-shadow-article .news-shadow-info .news-shadow-name a:hover {
    color: #ec2d3f;
    ; }

.news-shadow .news-shadow-article .news-shadow-info .news-shadow-name a .text-split {
    -webkit-line-clamp: 2;
    ; }

.news-shadow .news-shadow-article .news-shadow-info .news-shadow-desc {
    height: 38px;
    font-size: 13px;
    ; }

.news-shadow .news-shadow-article .news-shadow-info .news-shadow-desc.text-split {
    -webkit-line-clamp: 2;
    ; }

/* Video */
.video {
    cursor: pointer;
    margin-bottom: 1rem;
    ; }

.video .video-image {
    position: relative;
    margin-bottom: 0.75rem;
    ; }

.video .video-image:before {
    content: "";
    position: absolute;
    width: 50px;
    height: 35px;
    top: calc(50% - 50px / 2);
    left: calc(50% - 35px / 2);
    z-index: 1;
    background-repeat: no-repeat;
    background-image: url(../images/play.png);
    ; }

.video .video-name {
    text-align: center;
    font-size: 16px;
    color: #212529;
    margin-bottom: 0px;
    ; }

.wrap-khuyenmai {
    background: url(../images/bg_khuyenmai.jpg) no-repeat bottom center;
    background-size: cover;
    ; }

.wrap-khachhang .owl-item {
}

.khachhang-item {
    width: 450px;
    border-radius: 15px;
    padding: 15px;
    background-color: #f8f8f8;
    transition: all 0.3s ease-in-out;
    ; }

.owl-item.active.center .khachhang-item {
    transform: scale(1.2);
    ; }

.owl-item.active.center .khachhang-item, .khachhang-item:hover {
    color: #fff;
    background-color: var(--color-main);
    ; }

.owl-item.active.center .khachhang-item .name, .khachhang-item:hover .name {
    color: #fff !important;
    ; }

.khachhang-item .icon {
    width: 60px;
    margin-bottom: 15px;
    ; }

.khachhang-item .icon svg {
    color: #d0d5d9;
    ; }

.owl-item.active.center .khachhang-item .icon svg, .khachhang-item:hover .icon svg {
    color: var(--color-main);
    ; }

.khachhang-item .info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: transparent;
    padding: 15px;
    border-radius: 15px;
    transform: translate(-15px, 15px);
    ; }

.khachhang-item .image {
    width: 70px;
    ; }

.khachhang-item .image, .khachhang-item .image img {
    border-radius: 100%;
    ; }

.khachhang-item .info .name {
    width: calc(100% - 80px);
    font-size: 18px;
    letter-spacing: 2px;
    color: var(--color-main);
    font-weight: 600;
    margin-bottom: 0px;
    ; }

.khachhang-item .info .name span {
    display: block;
    color: #989898;
    font-size: 13px;
    font-weight: 400;
    ; }

.web-item {
}

.web-item .photo {
    width: 100%;
    height: 0;
    padding-bottom: 100%;
    position: relative;
    ; }

.web-item:hover .photo span {
    background-position: bottom;
    background-repeat: no-repeat;
    ; }

.web-item .photo span {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: 100% auto;
    -webkit-transition: all 3s ease-in-out 0s;
    -moz-transition: all 2s ease-in-out 0s;
    -ms-transition: all 2s ease-in-out 0s;
    transition: all 2s ease-in-out 0s;
    background-position: top;
    background-repeat: no-repeat;
    ; }

.web-item:hover .info {
    opacity: 1;
    visibility: visible;
    bottom: 0;
    ; }

.web-item .info {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 10px;
    width: 100%;
    text-align: center;
    padding: 10px 10px;
    left: 0;
    bottom: -20px;
    opacity: 0;
    visibility: hidden;
    background: rgba(0, 0, 0, 0.35);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    -webkit-transition: all 0.3s ease-in;
    transition: all 0.3s ease-in;
    color: #fff;
    ; }

.web-item .info .name {
    font-size: 1.1rem;
    ; }

.web-item .info .price {
}

.web-item .info .price span {
    font-size: 1.4rem;
    ; }

.web-item .info .d-flex {
}

.web-item .info .d-flex a {
    color: #fff;
    border-bottom: 2px solid;
    font-size: 0.9rem;
    padding: 2px 14px;
    transition: 0.4s ease;
    text-transform: capitalize;
    ; }

.web-item .info .d-flex a:hover {
    color: var(--second);
    ; }

/* Product */
.cart-product {
    margin-bottom: 0px;
    ; }

.cart-product span {
    cursor: pointer;
    color: #ffffff;
    text-transform: capitalize;
    text-align: center;
    ; }

.wrap-pro-info {
}

#frm-sellcar {
    position: absolute;
    right: 10%;
    top: 50%;
    transform: translateY(-50%);
    ; }

#frm-sellcar .frm-content {
    width: 450px;
    max-width: 100%;
    ; }

/* Product Detail */
#product-title {
    width: 560px;
    ; }

.left-pro-detail {
    width: 494px;
}

.camket-pro-detail {
    width: 277px;
}

.camket-pro-detail ul, .camket-pro-detail ol {
    list-style: none;
    padding: 0px;
    ; }

.camket-pro-detail ul li {
    padding-left: 25px;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-check2" viewBox="0 0 16 16"><path d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0"/></svg>') no-repeat left 5px;
    ; }

.right-pro-detail {
    width: calc(100% - 815px);
    ; }

.product-video {
    width: 71px;
    height: 71px;
    padding: 5px;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
    margin: 5px;
    box-shadow: 0px 0px 2px #333;
    ; }

.gallery-pro-detail {
    display: flex;
    align-items: start;
    justify-content: space-between;
    flex-wrap: wrap;
    ; }

.gallery-pro-detail .gallery-pro-detail-left {
    width: 82px;
    margin: -5px;
    ; }

.gallery-pro-detail .slider-product-thumbs {
    flex: 1;
    ; }

.gallery-pro-detail .slider-product-thumbs .item {
    padding: 5px;
    ; }

.gallery-pro-detail .slider-product-thumbs .item.slick-active.slick-current a {
    box-shadow: 0px 0px 2px var(--color-main);
    ; }

.gallery-pro-detail .slider-product-thumbs .item a {
    display: block;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0px 0px 2px #ccc;
    ; }

.gallery-pro-detail .slider-product-thumbs .item a img {
    border-radius: 10px;
    ; }

.gallery-pro-detail .slider-products {
    width: calc(100% - 85px);
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0px 0px 2px #ccc;
    ; }

.gallery-pro-detail .slider-products .item {
    padding: 10px;
    text-align: center;
    ; }

.gallery-pro-detail .slider-products .item img {
    margin: 0px auto;
    ; }

.gallery-pro-detail .slider-products .slick-prev:before, .gallery-pro-detail .slider-products .slick-next:before {
    display: none;
    ; }

.gallery-pro-detail .slider-products .slick-arrow {
    width: 25px;
    color: #333;
    background-color: rgba(255, 255, 255, 0.5);
    ; }

.gallery-pro-detail .slider-products .slick-arrow svg {
    width: 30px;
    height: 30px;
    ; }

.title-pro-detail h2 {
    font-size: 24px;
    font-weight: 500;
    color: var(--color-main);
    margin-bottom: 0px;
    ; }

.comment-pro-detail {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    ; }

.social-plugin-pro-detail {
    margin-bottom: 1rem;
    margin-top: 0px !important;
    ; }

.desc-pro-detail {
    /* padding: 20px; background-color: #e0e0e0; margin-bottom: 1rem; */
    ; }

.desc-pro-detail .attrs {
    margin: 0;
    padding: 0;
    list-style: none;
    margin-bottom: 20px;
    ; }

.desc-pro-detail .attrs li:first-child {
    border-top: 0px;
    ; }

.desc-pro-detail .attrs li {
    padding: 10px 0px 7px;
    border-top: 1px solid #989898;
    color: #989898;
    ; }

.desc-pro-detail .attrs li svg {
    margin-top: -2px;
    ; }

.desc-pro-detail .attrs li b {
    color: #000;
    ; }

/* .desc-pro-detail ul li, .desc-pro-detail ol li { position: relative; list-style: none; padding: 10px 10px 10px 35px; font-weight: 500; ; }
.desc-pro-detail ul li::before, .desc-pro-detail ol li::before { content: ''; display: block; width: 28px; height: 28px; background: url(../images/icon_check.png) no-repeat center center; background-size: 28px; position: absolute; left: 0px; top: 10px; ; }
*/
.attr-pro-detail {
    width: 100%;
    list-style: none;
    padding: 0px;
    ; }

.attr-pro-detail li {
    /* padding-left: 10px; */
    margin-bottom: 5px;
}

.attr-label-pro-detail {
    font-size: 24px;
    font-weight: 800;
    margin: 0px 5px 0px 0px;
}

.attr-content-pro-detail {
    display: inline-block;
    margin-bottom: 0px;
    ; }

.brand-pro-detail {
}

.price-old-detail {
    font-weight: 800;
    font-size: 14px;
    color: #474747;
}

.brand-pro-detail a {
    background: var(--color-red);
    color: #fff;
    border-radius: 2px;
    padding: 2px 5px;
    ; }

.price-new-pro-detail {
    font-weight: 800;
    font-size: 24px;
    color: #e70004;
}

.price-old-pro-detail {
    font-size: 15px;
    font-weight: 800;
    color: #474747;
    text-decoration: line-through;
    padding-left: 10px;
    ; }

.price-discount-pro-detail {
    font-size: 12px;
    font-weight: 600;
    color: #e70004;
    border: 1px solid #e70004;
    background: #eaeaea;
    padding: 2px 5px;
    border-radius: 4px;
    margin-left: 10px;
    ; }

.color-pro-detail {
    cursor: pointer;
    vertical-align: top;
    position: relative;
    width: 25px;
    height: 25px;
    border-radius: 100%;
    margin: 0 8px 5px 0;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
    border: 1px solid #dadada;
    transition: 0.3s;
    ; }

.size-pro-detail {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 5px 10px;
    margin: 0 8px 0 0;
    border: 1px solid #dadada;
    background-color: #fff;
    border-radius: 5px;
    font-size: 13px;
    transition: 0.3s;
    ; }

.size-pro-detail.active {
    border-color: var(--color-main);
    ; }

.color-pro-detail.active:after {
    content: "";
    position: absolute;
    top: -3px;
    left: -3px;
    width: 29px;
    height: 29px;
    border: 1px solid var(--color-main);
    border-radius: 100%;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="%23cccccc" class="bi bi-check2" viewBox="0 0 16 16"><path d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0"/></svg>') no-repeat center center;
    ; }

.color-pro-detail input[type="radio"], .size-pro-detail input[type="radio"] {
    display: none;
    ; }

.quantity-pro-detail {
    width: 150px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: center;
    height: 45px;
    border-radius: 30px;
    overflow: hidden;
    border: 1px solid #dfdfdf;
    ; }

.quantity-pro-detail span {
    line-height: 25px;
    padding: 0px;
    width: 45px;
    height: 100%;
    color: #000;
    cursor: pointer;
    font-size: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    ; }

.quantity-pro-detail span.quantity-plus-pro-detail {
    border-left: 0px;
    ; }

.quantity-pro-detail span.quantity-minus-pro-detail {
    border-right: 0px;
    ; }

.quantity-pro-detail input {
    height: 100%;
    border: none;
    width: calc(100% - 90px);
    text-align: center;
    font-size: 15px;
    ; }

.cart-pro-detail a {
    text-align: center;
    color: #fff;
    text-transform: uppercase;
    cursor: pointer;
    width: calc(100% / 2 - 5px);
    height: 45px;
    border-radius: 5px;
    ; }

.cart-pro-detail a.addnow {
    background: #fff;
    color: var(--color-red);
    ; }

.cart-pro-detail a.addnow:hover {
    color: #fff;
    background: var(--color-red);
    ; }

.cart-pro-detail a.buynow {
    background-color: #333;
    ; }

.cart-pro-detail a.buynow:hover {
    background-color: var(--color-dark-red);
    color: #fff;
    ; }

.cart-pro-detail a i {
    vertical-align: top;
    margin-right: 8px;
    font-size: 24px;
    position: relative;
    top: -2px;
    ; }

.tags-pro-detail {
    width: 100%;
    ; }

.tags-pro-detail a {
    font-size: 12px;
    padding-bottom: 0.175rem;
    margin: 0px 5px 5px 0px;
    ; }

.tags-pro-detail a i {
    font-size: 11px;
    margin: 5px 5px 0px 0px;
    ; }

.tabs-pro-detail {
    margin-top: 2rem;
    ; }

.tabs-pro-detail .nav-tabs .nav-link {
    border-top-width: 3px;
    font-size: 15px;
    color: #333;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 1.1rem;
    ; }

.tabs-pro-detail .nav-tabs .nav-link.active, .tabs-pro-detail .nav-tabs .nav-item.show .nav-link {
    border-top-color: #555555;
    ; }

.thongso-pro-detail table {
    width: 100%;
    border-collapse: collapse;
    ; }

.thongso-pro-detail table th, .thongso-pro-detail table td {
    border: 1px solid #ccc;
    padding: 10px 12px;
    text-align: left;
    vertical-align: top;
    ; }

.thongso-pro-detail table th {
    background-color: #f7f7f7;
    font-weight: 600;
    width: 220px;
    /* cố định cột trái */
    ; }

/* New Product Css */
.product-attr .attr-options {
    gap: 8px;
    ; }

.color-option {
    display: inline-block;
    cursor: pointer;
    position: relative;
    ; }

.color-option input {
    display: none;
    ; }

.color-option .circle {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid #ccc;
    display: inline-block;
    ; }

.color-option input:checked + .circle {
    border-color: var(--color-main);
    ; }

.btn-option {
    display: inline-block;
    cursor: pointer;
    ; }

.btn-option input {
    display: none;
    ; }

.btn-option span {
    display: inline-block;
    padding: 6px 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background: #fff;
    transition: 0.2s;
    ; }

.btn-option input:checked + span {
    border-color: var(--color-main);
    ; }

.img-option {
    display: inline-block;
    cursor: pointer;
    margin: 4px;
    ; }

.img-option input {
    display: none;
    ; }

.img-option span {
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    overflow: hidden;
    width: 60px;
    height: 60px;
    position: relative;
    ; }

.img-option img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    ; }

.img-option input:checked + span {
    border-color: var(--color-main);
    box-shadow: 0 0 0 2px #000 inset;
    ; }

.btn-option.disabled span, .color-option.disabled .circle, .img-option.disabled span {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
    ; }

/* End */
#advisory-modal .btn-close {
    position: absolute;
    top: 5px;
    right: 5px;
    ; }

#advisory-modal .modal-dialog {
    max-width: 700px;
    ; }

.thongso {
    line-height: 1;
    ; }

.thongso p {
    margin-bottom: 0px;
    ; }

/* News */
.pic-news {
    width: 210px;
    ; }

.pic-news img {
    width: 100%;
    ; }

.info-news {
    width: calc(100% - 210px);
    padding-left: 20px;
    ; }

.name-news {
    color: #252525;
    font-size: 17px;
    line-height: normal;
    font-weight: 600;
    ; }

.name-news.text-split {
    -webkit-line-clamp: 2;
    ; }

.name-news:hover {
    color: var(--background-static);
    ; }

.time-news {
    color: var(--color-gray);
    margin-bottom: 10px;
    ; }

.desc-news {
    color: #676767;
    margin-top: 5px;
    line-height: 22px;
    ; }

.news .news-name {
    margin-bottom: 0.5rem;
    ; }

.news .news-name a {
    color: #333;
    font-size: 16px;
    ; }

.news .news-name a.text-split {
    -webkit-line-clamp: 2;
    ; }

.news .news-name a:hover {
    color: #ec2d3f;
    ; }

.news .news-time {
    color: #84878a;
    margin-bottom: 0.25rem;
    ; }

.news .news-desc {
    color: #333333;
    margin-top: 5px;
    line-height: 22px;
    ; }

.othernews b {
    margin-bottom: 10px;
    font-size: 15px;
    ; }

/*News orther*/
.othernews {
    position: sticky;
    top: 60px;
    z-index: 11;
    ; }

.news-other {
}

.pic-news-other {
    width: 40%;
    border-radius: 7px;
    overflow: hidden;
    ; }

.info-news-other {
    width: 60%;
    padding: 0px 10px;
    ; }

.name-news-other {
    color: #252525;
    font-weight: 600;
    padding: 0px !important;
    display: -webkit-box !important;
    font-size: 14px !important;
    margin-bottom: 0px;
    ; }

.desc-news-other {
    color: #666;
    font-size: 13px;
    ; }

.baogia-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 1px solid var(--color-main);
    border-radius: 5px;
    ; }

.baogia-item h3 {
    padding: 0px 10px;
    font-size: 16px;
    margin-bottom: 0px;
    ; }

.baogia-item span {
    font-size: 18px;
    transition: 0.3s;
    background: var(--color-main);
    color: #fff;
    display: flex;
    width: 80px;
    height: 66px;
    justify-content: center;
    align-items: center;
    text-transform: uppercase;
    border-radius: 3px;
    ; }

.baogia-item:hover {
    color: var(--color-main);
    ; }

.bg {
    background: linear-gradient(0deg, rgba(204, 204, 204, 1) 0%, rgba(153, 153, 153, 0) 100%);
    ; }

.author-item {
}

.author-item .image {
    width: 150px;
    ; }

.author-item .info {
    width: calc(100% - 175px);
    ; }

.author-item .name {
    font-size: 20px;
    ; }

.author-item .subname {
    color: #999;
    ; }

/* Contact */
.form-floating.form-floating-cus > input, .form-floating-cus > select {
    height: 45px;
    padding: 0.7rem 0.5rem;
    background-color: #f8f8f8;
    border: 0px;
}

.form-floating.form-floating-cus > textarea {
    height: 100px;
    ; }

.form-floating.form-floating-cus > label {
    padding: 10px 11px;
    color: var(--color-gray);
}

.contact-article {
    margin-bottom: 1.5rem;
    ; }

.contact-input {
    position: relative;
    margin-bottom: 10px;
    ; }

.contact-input input, .contact-input textarea {
    border-radius: 0;
    border-top: none;
    border-left: none;
    border-right: none;
    ; }

.contact-input input:focus, .contact-input textarea:focus {
    box-shadow: none;
    outline: none;
    ; }

.contact-input textarea {
    resize: none;
    height: 150px;
    ; }

.contact-input .custom-file-label::after {
    content: attr(title);
    ; }

.contact-map {
    position: relative;
    overflow: hidden;
    height: 350px;
    ; }

.contact-map iframe {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100% !important;
    height: 100% !important;
    ; }

/* Blink */
.blink {
    -webkit-animation-name: blink;
    -webkit-animation-duration: 1s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -moz-animation-name: blink;
    -moz-animation-duration: 1s;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: infinite;
    animation-name: blink;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    ; }

.wrap-frame {
    position: fixed;
    width: 50px;
    height: auto;
    right: 20px;
    bottom: 100px;
    z-index: 10;
    ; }

/* Button Frame */
.btn-frame {
    position: relative;
    display: block;
    width: 50px;
    height: 50px;
    cursor: pointer;
    margin-bottom: 30px;
    ; }

.btn-frame i {
    width: 100%;
    height: 100%;
    border-radius: 100%;
    background: var(--color-main);
    position: relative;
    z-index: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    ; }

.btn-frame i svg {
    color: #fff;
    fill: #fff;
    ; }

.btn-frame .animated.infinite {
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    ; }

.btn-frame .kenit-alo-circle {
    width: 120%;
    height: 120%;
    top: -10%;
    right: -10%;
    position: absolute;
    background-color: transparent;
    border-radius: 100%;
    border: 2px solid rgba(7, 41, 103, 0.8);
    opacity: 0.1;
    border-color: var(--color-main);
    opacity: 0.5;
    ; }

.btn-frame .zoomIn {
    -webkit-animation-name: zoomIn;
    animation-name: zoomIn;
    ; }

.btn-frame .animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    ; }

.btn-frame .kenit-alo-circle-fill {
    width: 140%;
    height: 140%;
    top: -20%;
    right: -20%;
    position: absolute;
    border-radius: 100%;
    border: 2px solid transparent;
    background-color: rgba(7, 41, 103, 0.35);
    opacity: 0.4;
    ; }

.btn-frame .pulse {
    -webkit-animation-name: pulse;
    animation-name: pulse;
    ; }

.btn-frame span {
    position: absolute;
    top: 50%;
    right: 0px;
    transform: translateY(-50%);
    opacity: 0;
    padding: 6px 45px 6px 20px;
    border-radius: 30px;
    color: #fff;
    background-color: var(--color-main);
    white-space: nowrap;
    transition: all 0.3s ease-in-out;
    width: 0px;
    overflow: hidden;
    ; }

.btn-frame:hover span {
    opacity: 1;
    width: 265px;
    ; }

/* Messenger */
.js-facebook-messenger-top-header {
    background: #487dfc;
    color: #fff;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border-radius: 5px 5px 0 0;
    ; }

.js-facebook-messenger-container.closed {
    display: none !important;
    ; }

.js-facebook-messenger-tooltip {
    bottom: 97px;
    right: 97px;
    color: #404040;
    background: #fff;
    ; }

.js-facebook-messenger-tooltip.closed {
    display: none !important;
    ; }

.js-facebook-messenger-box, .js-facebook-messenger-button {
    z-index: 999;
    ; }

.js-facebook-messenger-tooltip {
    z-index: 999;
    display: none;
    position: fixed;
    text-align: center;
    border-radius: 10px;
    overflow: hidden;
    font-size: 12px;
    line-height: 1;
    padding: 10px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: rgba(0, 0, 0, 0.15) 0 2pt 10pt;
    box-shadow: rgba(0, 0, 0, 0.15) 0 2pt 10pt;
    z-index: 1000000000000000019884624838656;
    ; }

.js-facebook-messenger-close-tooltip {
    width: 10px;
    height: 10px;
    display: inline-block;
    cursor: pointer;
    margin-left: 10px;
    ; }

.js-facebook-messenger-box {
    z-index: 999;
    ; }

.js-facebook-messenger-box.rubberBand {
    -webkit-animation-name: rubberBand;
    animation-name: rubberBand;
    ; }

.js-facebook-messenger-box.animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    ; }

.js-facebook-messenger-button, .js-facebook-messenger-tooltip {
    z-index: 999;
    ; }

.js-facebook-messenger-box {
    display: block;
    position: fixed;
    cursor: pointer;
    bottom: 150px;
    right: 17px;
    width: 56px;
    height: 56px;
    text-align: center;
    background: #1182fc;
    border-radius: 100%;
    overflow: hidden;
    z-index: 99;
    -webkit-box-shadow: 1px 1px 4px 0 rgba(0, 0, 0, 0.3);
    box-shadow: 1px 1px 4px 0 rgba(0, 0, 0, 0.3);
    ; }

.js-facebook-messenger-box.rotate svg#fb-msng-icon {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    ; }

.js-facebook-messenger-box svg#fb-msng-icon {
    width: 32px;
    height: 33px;
    position: absolute;
    top: 13px;
    left: 12px;
    opacity: 1;
    overflow: hidden;
    -webkit-transition: opacity 160ms ease-in-out, transform 160ms ease-in-out;
    -webkit-transition: opacity 160ms ease-in-out, -webkit-transform 160ms ease-in-out;
    transition: opacity 160ms ease-in-out, -webkit-transform 160ms ease-in-out;
    transition: opacity 160ms ease-in-out, transform 160ms ease-in-out;
    transition: opacity 160ms ease-in-out, transform 160ms ease-in-out, -webkit-transform 160ms ease-in-out;
    ; }

.js-facebook-messenger-box.rotate svg#close-icon {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    ; }

.js-facebook-messenger-box svg#close-icon {
    opacity: 0;
    width: 19px;
    height: 20px;
    position: absolute;
    top: 19px;
    left: 19px;
    -webkit-transition: opacity 160ms ease-in-out, transform 160ms ease-in-out;
    -webkit-transition: opacity 160ms ease-in-out, -webkit-transform 160ms ease-in-out;
    transition: opacity 160ms ease-in-out, -webkit-transform 160ms ease-in-out;
    transition: opacity 160ms ease-in-out, transform 160ms ease-in-out;
    transition: opacity 160ms ease-in-out, transform 160ms ease-in-out, -webkit-transform 160ms ease-in-out;
    ; }

.js-facebook-messenger-container, .js-facebook-messenger-container-button {
    z-index: 1000;
    ; }

.js-facebook-messenger-container {
    width: 250px;
    position: fixed;
    opacity: 0;
    -webkit-transform: translateY(50px);
    transform: translateY(50px);
    bottom: 110px;
    right: 90px;
    border-radius: 10px;
    pointer-events: none;
    -webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.06), 0 2px 32px rgba(0, 0, 0, 0.16);
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.06), 0 2px 32px rgba(0, 0, 0, 0.16);
    -webkit-transition: transform 160ms ease-in-out, opacity 160ms ease-in-out;
    -webkit-transition: opacity 160ms ease-in-out, -webkit-transform 160ms ease-in-out;
    transition: opacity 160ms ease-in-out, -webkit-transform 160ms ease-in-out;
    transition: transform 160ms ease-in-out, opacity 160ms ease-in-out;
    transition: transform 160ms ease-in-out, opacity 160ms ease-in-out, -webkit-transform 160ms ease-in-out;
    ; }

.js-facebook-messenger-top-head {
    width: 220px;
    color: #ffffff;
    background: #1182fc;
    display: block;
    position: relative;
    width: 220px;
    background: #1182fc;
    color: #ffffff;
    text-align: center;
    line-height: 1;
    padding: 10px;
    font-size: 14px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    ; }

.js-facebook-messenger-container iframe, .js-facebook-messenger-container-button iframe {
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    ; }

.js-facebook-messenger-box, .js-facebook-messenger-button, .js-facebook-messenger-tooltip {
    z-index: 999;
    ; }

.js-facebook-messenger-container, .js-facebook-messenger-container-button {
    z-index: 1000;
    ; }

.js-facebook-messenger-top-head {
    color: #ffffff;
    background: #1182fc;
    width: 220px;
    ; }

.js-facebook-messenger-tooltip {
    color: #404040;
    background: #fff;
    ; }

.js-facebook-messenger-container.open {
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
    opacity: 1;
    pointer-events: all;
    ; }

.js-facebook-messenger-tooltip {
    bottom: 97px;
    right: 97px;
    ; }

.js-facebook-messenger-box.open svg#fb-msng-icon {
    opacity: 0;
    ; }

.js-facebook-messenger-box.rotate.open svg#close-icon {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    ; }

.js-facebook-messenger-box.open svg#close-icon {
    opacity: 1;
    ; }

/* Cart Fix */
.cart-fixed {
    position: fixed;
    right: 20px;
    bottom: 290px;
    z-index: 10;
    background: #4b4f56;
    width: 50px;
    height: 50px;
    text-align: center;
    color: #fff !important;
    border-radius: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    ; }

.cart-fixed:hover {
    background: var(--color-main);
    ; }

.cart-fixed span {
    position: absolute;
    top: 0px;
    right: -5px;
    color: #ffffff;
    width: 25px;
    height: 25px;
    background: #ec2d3f;
    text-align: center;
    line-height: 25px;
    font-size: 11px;
    border-radius: 100%;
    ; }

/* Toolbar */
@keyframes tada {
    0% {
        transform: scaleX(1);
        ; }

    10%, 20% {
        transform: scale3d(0.9, 0.9, 0.9) rotate(-3deg);
        ; }

    30%, 50%, 70%, 90% {
        transform: scale3d(1.3, 1.3, 1.3) rotate(3deg);
        ; }

    40%, 60%, 80% {
        transform: scale3d(1.3, 1.3, 1.3) rotate(-3deg);
        ; }

    to {
        transform: scaleX(1);
        ; }
}

.toolbar {
    background: var(--background-static);
    width: 100%;
    padding: 3vw;
    bottom: 0px;
    position: fixed;
    z-index: 500;
    height: auto;
    left: 0px;
    max-height: 65px;
    ; }

.toolbar ul {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0px;
    margin: 0px;
    ; }

.toolbar ul li {
    text-align: center;
    width: 25%;
    ; }

.toolbar ul li a {
    display: block;
    width: 100%;
    cursor: pointer;
    ; }

.toolbar ul li a img {
    height: 20px;
    width: 20px;
    animation: tada 1.2s infinite;
    ; }

.toolbar ul li a span {
    color: #fff;
    font-size: 10px;
    ; }

/* Fixbar */
.fixbar {
    bottom: 0;
    display: block;
    background: #f0eff4;
    border-top: 1px solid #ddd;
    width: 100%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    position: fixed;
    margin: 0;
    z-index: 500;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    height: 50px;
    ; }

.fixbar ul {
    margin: 0px;
    padding: 0px;
    list-style: none;
    ; }

.fixbar ul li {
    margin: 0 auto 10px;
    text-align: center;
    width: 25%;
    float: left;
    ; }

.fixbar .icon-cart-mobile, .fixbar .icon-cart-new, .fixbar .icon-home-new, .fixbar .icon-hotdeal-new {
    width: 20px;
    height: 20px;
    display: block;
    margin: 8px auto 0;
    ; }

.fixbar .icon-cart-mobile {
    background: url(../images/cart-mobile.png) no-repeat;
    ; }

.cart-total-head-mobile {
    font-size: 10px;
    position: absolute;
    background: red;
    color: #fff !important;
    border-radius: 50%;
    height: 15px;
    width: 15px;
    line-height: 15px;
    top: 5px;
    margin-left: 5px;
    ; }

.fixbar ul li a {
    font-size: 11px;
    text-decoration: none;
    color: #333;
    ; }

.fixbar ul li a i {
    font-size: 20px;
    ; }

/* Plugbar */
.plugbar {
    position: fixed;
    bottom: 0;
    left: 0;
    border-top: 1px solid #eae6e6;
    width: 100%;
    right: 0;
    max-width: 767px;
    margin: 0 auto;
    background: #ffffff;
    padding: 9px 10px 10px 7px;
    z-index: 10;
    ; }

.plugbar ul {
    list-style: none;
    padding: 0;
    margin: 0px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    ; }

.plugbar ul li {
    width: 20%;
    float: left;
    ; }

.plugbar ul li a {
    display: block;
    color: #696969;
    font-size: 12px;
    text-align: center;
    position: relative;
    ; }

.plugbar ul li a i {
    font-size: 20px;
    color: #696969;
    ; }

.plugbar ul li a span {
    position: absolute;
    width: 50px;
    height: 50px;
    top: -40px;
    left: calc(50% - 50px / 2);
    font-size: 14px;
    display: block;
    border: 1px solid rgba(234, 230, 230, 0.5);
    border-radius: 100%;
    ; }

/* Combo Phone */
.support-online {
    position: fixed;
    z-index: 999;
    left: 10px;
    bottom: 0px;
    ; }

.support-online a {
    position: relative;
    margin: 20px 10px;
    text-align: left;
    width: 40px;
    height: 40px;
    ; }

.support-online i {
    width: 40px;
    height: 40px;
    background: #43a1f3;
    color: #ffffff;
    border-radius: 100%;
    font-size: 20px;
    text-align: center;
    line-height: 1.9;
    position: relative;
    z-index: 999;
    ; }

.support-online a {
    display: block;
    ; }

.support-online a span {
    border-radius: 2px;
    text-align: center;
    background: #67b634;
    padding: 9px;
    display: none;
    width: 180px;
    margin-left: 10px;
    position: absolute;
    color: #ffffff;
    z-index: 999;
    top: 0px;
    left: 40px;
    -webkit-transition: all 0.2s ease-in-out 0s;
    transition: all 0.2s ease-in-out 0s;
    -webkit-animation: headAnimation 0.7s 1;
    animation: headAnimation 0.7s 1;
    ; }

.support-online a:hover span {
    display: block;
    ; }

.support-online a span:before {
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 10px 10px 10px 0;
    border-color: transparent #67b634 transparent transparent;
    position: absolute;
    left: -10px;
    top: 10px;
    ; }

.support-online .kenit-alo-circle-fill {
    width: 60px;
    height: 60px;
    top: -10px;
    position: absolute;
    border-radius: 100%;
    border: 2px solid transparent;
    background-color: rgba(0, 175, 242, 0.5);
    opacity: 0.75;
    right: -10px;
    ; }

.support-online .kenit-alo-circle {
    width: 50px;
    height: 50px;
    top: -5px;
    right: -5px;
    position: absolute;
    background-color: transparent;
    border-radius: 100%;
    border: 2px solid rgba(30, 30, 30, 0.4);
    opacity: 0.1;
    border-color: #0089b9;
    opacity: 0.5;
    ; }

.support-online .support-online .btn-support {
    cursor: pointer;
    ; }

.support-online .mes i {
    background: orange;
    ; }

.support-online .sms i {
    background: red;
    ; }

.support-online .call-now i {
    background: green;
    ; }

/* Phone Switch */
.widget-mobile {
    position: fixed;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    bottom: 10px;
    z-index: 9999999;
    ; }

#my-phone-circle {
    position: relative;
    width: 50px !important;
    height: 50px !important;
    ; }

.wcircle-open .wcircle-icon i:before {
    content: "\f00d";
    ; }

.wcircle-icon {
    background: var(--color-main);
    border-radius: 50%;
    position: relative !important;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex !important;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    ; }

.wcircle-icon:before {
    position: absolute;
    content: "";
    width: 60px;
    height: 60px;
    background: var(--color-main);
    border: 1px solid #ffffff;
    border-radius: 50%;
    left: -5px;
    top: -5px;
    -webkit-animation: pulse 1s infinite ease-in-out;
    animation: pulse 1s infinite ease-in-out;
    ; }

.wcircle-icon:after {
    position: absolute;
    content: "";
    width: 80px;
    height: 80px;
    background: rgba(204, 44, 50, 0.5);
    border-radius: 50%;
    left: -15px;
    top: -15px;
    -webkit-animation: zoomIn 2s infinite ease-in-out;
    animation: zoomIn 2s infinite ease-in-out;
    ; }

.wcircle-menu {
    position: absolute !important;
    left: 0;
    top: 0;
    display: none;
    ; }

.wcircle-menu-item {
    width: 50px;
    height: 50px;
    background: var(--color-main);
    border-radius: 50%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    ; }

.wcircle-menu-item img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    ; }

.wcircle-menu-item i {
    font-size: 25px;
    color: #ffffff;
    position: relative;
    z-index: 9999;
    ; }

.wcircle-icon i {
    font-size: 25px;
    color: #ffffff;
    position: relative;
    z-index: 9999;
    ; }

.shake-anim {
    -webkit-animation: shake-anim 1s infinite ease-in-out;
    animation: shake-anim 1s infinite ease-in-out;
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    ; }

.video-main {
    position: relative;
    height: 400px;
    ; }

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

.listvideos {
    width: 100%;
    height: 40px;
    padding: 0px 10px;
    border: 1px solid #ccc;
    color: var(--color-black);
    margin-top: 10px;
    cursor: pointer;
    ; }

.item-video1 img {
    max-height: 292px;
    ; }

.item-video2 img {
    height: 102px;
    ; }

.pic-video {
    position: relative;
    cursor: pointer;
    ; }

.pic-video:before {
    content: "";
    position: absolute;
    width: 50px;
    height: 35px;
    top: calc(50% - 50px / 2);
    left: calc(50% - 35px / 2);
    z-index: 1;
    background: url(../images/play.png) no-repeat center center;
    cursor: pointer;
    background-size: cover;
    ; }

.pic-video img {
    width: 100%;
    ; }

.pic-video-2 {
    position: relative;
    cursor: pointer;
    ; }

.pic-video-2:before {
    content: "";
    position: absolute;
    width: 50px;
    height: 35px;
    top: calc(50% - 50px / 2);
    left: calc(50% - 35px / 2);
    z-index: 1;
    background: url(../images/play.png) no-repeat center center;
    cursor: pointer;
    background-size: cover;
    ; }

.pic-video-2 img {
    width: 100%;
    ; }

.name-video {
    font-size: 16px;
    color: var(--color-black);
    margin-bottom: 0px;
    ; }

.owl-video {
    margin-top: 10px;
    ; }

.newshome-intro .name-newshome {
    margin: 10px 0;
    ; }

.newshome-intro .view-newshome {
    margin-top: 10px;
    ; }

.newshome-scroll {
    width: 50%;
    overflow: hidden;
    max-height: 406px;
    ; }

.news-slick {
    display: flex;
    margin-bottom: 20px;
    ; }

.news-slick h3 {
    margin: 0;
    ; }

.news-slick h3 a.name-newshome {
    margin-bottom: 10px;
    ; }

.news-slick .img {
    width: 150px;
    ; }

.news-slick .info {
    width: calc(100% - 150px);
    padding-left: 15px;
    ; }

.flex_ttnb {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    ; }

.newshome-intro {
    width: calc(50% - 20px);
    ; }

.pic-newshome-normal {
    float: left;
    width: 34%;
    margin-right: 3%;
    margin-bottom: 0px;
    ; }

.pic-newshome-normal img {
    width: 100%;
    ; }

.info-newshome-normal {
    float: left;
    width: calc(100% - 37%);
    ; }

.name-newshome {
    color: var(--color-black);
    font-size: 14px;
    line-height: normal;
    ; }

.name-newshome.text-split {
    -webkit-line-clamp: 2;
    ; }

.name-newshome.text-split a {
    color: #000;
    ; }

.time-newshome {
    color: var(--color-gray);
    margin-bottom: 10px;
    ; }

.desc-newshome {
    color: var(--color-black);
    margin-bottom: 0px;
    text-align: justify;
    ; }

.desc-home-cl.text-split {
    -webkit-line-clamp: 2;
    ; }

.view-newshome {
    width: 140px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #ccc;
    color: #000;
    ; }

.view-newshome:hover {
    color: #000;
    ; }

.box-product {
    position: relative;
    overflow: hidden;
    background: #fff;
}

.box-product .icon {
    width: 80px;
    height: 2px;
    background: #333;
    margin: 0 auto 1rem;
    ; }

.color-product {
    position: relative;
    width: 20px;
    height: 20px;
    border-radius: 100%;
    cursor: pointer;
    margin-left: 2px;
    ; }

.color-product.active::after {
    content: "";
    position: absolute;
    top: -2px;
    left: -2px;
    width: 24px;
    height: 24px;
    border: 1px solid #ccc;
    border-radius: 100%;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="%23ffffff" class="bi bi-check2" viewBox="0 0 16 16"><path d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0"/></svg>') no-repeat center center;
    ; }

.attr-product {
    font-size: 14px;
    ; }

.pic-product {
    position: relative;
    margin-bottom: 0;
    overflow: hidden;
    ; }

.pic-product img {
    width: 100%;
    border-radius: 10px;
}

.product-tool {
    opacity: 0;
    visibility: hidden;
    position: absolute;
    width: 100%;
    left: 0px;
    bottom: 0px;
    z-index: 1;
    ; }

.product-tool a {
    cursor: pointer;
    width: 50%;
    padding: 10px;
    text-align: center;
    color: #ffffff;
    background-color: rgb(0 0 0 / 0.6);
    ; }

.product-tool a:hover {
    background-color: rgb(0 0 0 / 0.8);
    ; }

.product-tool a svg {
    margin-right: 5px;
    ; }

.product-tool a span {
    text-transform: capitalize;
    font-size: 12px;
    font-weight: 300;
    ; }

.box-product:hover .product-tool {
    opacity: 1;
    visibility: visible;
    ; }

.info-product {
    margin-top: 15px;
}

.name-product {
    font-size: 16px;
    line-height: 22px;
    color: var(--color-black);
    -webkit-line-clamp: 2;
    font-weight: 600;
    margin-bottom: 5px;
    height: 48px;
}

.name-product:hover {
    color: var(--color-submain);
    ; }

.price-product {
    position: relative;
    margin-bottom: 0px;
    line-height: 1;
    ; }

.price-product span {
    position: relative;
    ; }

.price-new {
    position: relative;
    display: block;
    font-size: 21px;
    color: var(--color-red);
    font-weight: 800;
    letter-spacing: -1px;
}

.price-old {
    font-size: 16px;
    font-weight: 500;
    color: var(--color-gray);
    text-decoration: line-through;
    margin-top: 7px;
}

.box-product.hot {
    margin: 0px;
    padding: 0px;
    border-radius: 20px;
    overflow: hidden;
    ; }

.box-product.hot::before {
    display: none;
    ; }

.box-product.hot .pic-product {
    margin-bottom: 0px;
    ; }

.box-product.hot .info {
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 100%;
    padding: 15px 0px;
    background-color: rgba(105, 215, 249, 0.5);
    ; }

.box-product.hot .name-product, .box-product.hot .price-product, .box-product.hot .price-product .price-new {
    color: #fff;
    ; }

.product-inner .slider-index-thumbs {
    margin: -10px 0px;
    ; }

.box-product-list {
    display: flex;
    padding: 5px 10px;
    ; }

.box-product-list .info-product {
    width: calc(100% - 32%);
    ; }

.box-product-list .pic-product {
    width: 30%;
    padding: 0px;
    margin: 0px auto;
    text-align: center;
    ; }

.price-per {
    color: var(--color-red);
    background: #eaeaea;
    border: 1px solid var(--color-red);
    font-size: 11px;
    border-radius: 4px;
    width: 40px;
    text-align: center;
    line-height: 20px;
    font-weight: 600;
    z-index: 2;
    ; }

.cart-product {
    margin-bottom: 0px;
    ; }

.cart-product span {
    cursor: pointer;
    width: calc(50% - 3px);
    color: #ffffff;
    text-transform: capitalize;
    text-align: center;
    padding: 7px 5px;
    border-radius: 3px;
    ; }

.cart-add {
    background-color: var(--color-red);
    ; }

.cart-add:hover {
    background-color: var(--color-dark-red);
    ; }

.cart-buy {
    background-color: var(--color-green);
    ; }

.cart-buy:hover {
    background-color: var(--color-dark-green);
    ; }

.dm-noibat {
    max-width: 1000px;
    position: relative;
    margin: auto;
    margin-bottom: 40px;
    ; }

.dm-noibat a {
    cursor: pointer;
    color: #333;
    transition: 0.4s;
    text-transform: capitalize;
    font-weight: 400;
    font-size: 16px;
    text-align: center;
    position: relative;
    display: block;
    background: #f7f7f7;
    border-radius: 5px;
    border: 1px solid #eaeaea;
    height: 100%;
    padding: 10px;
    ; }

.dm-noibat a:hover, .dm-noibat a.active {
    background: var(--background-static);
    color: #fff;
    ; }

.cats-bar {
    width: 50px;
    padding-top: 3px;
    position: relative;
    ; }

.cats-bar-icon {
    width: 30px;
    cursor: pointer;
    ; }

.cats-bar-icon span {
    display: block;
    width: 100%;
    height: 2px;
    background: #505050;
    transition: all 0.3s;
    position: relative;
    ; }

.cats-bar-icon span + span {
    margin-top: 5px;
    ; }

.cats-bar-icon.active span:nth-child(1) {
    animation: ease 0.7s top forwards;
    ; }

.cats-bar-icon.not-active span:nth-child(1) {
    animation: ease 0.7s top-2 forwards;
    ; }

.cats-bar-icon.active span:nth-child(2) {
    animation: ease 0.7s scaled forwards;
    ; }

.cats-bar-icon.not-active span:nth-child(2) {
    animation: ease 0.7s scaled-2 forwards;
    ; }

.cats-bar-icon.active span:nth-child(3) {
    animation: ease 0.7s bottom forwards;
    ; }

.cats-bar-icon.not-active span:nth-child(3) {
    animation: ease 0.7s bottom-2 forwards;
    ; }

@keyframes top {
    0% {
        top: 0;
        transform: rotate(0);
        ; }

    50% {
        top: 6px;
        transform: rotate(0);
        ; }

    100% {
        top: 6px;
        transform: rotate(45deg);
        ; }
}

@keyframes top-2 {
    0% {
        top: 6px;
        transform: rotate(45deg);
        ; }

    50% {
        top: 6px;
        transform: rotate(0deg);
        ; }

    100% {
        top: 0;
        transform: rotate(0deg);
        ; }
}

@keyframes bottom {
    0% {
        bottom: 0;
        transform: rotate(0);
        ; }

    50% {
        bottom: 8px;
        transform: rotate(0);
        ; }

    100% {
        bottom: 8px;
        transform: rotate(135deg);
        ; }
}

@keyframes bottom-2 {
    0% {
        bottom: 8px;
        transform: rotate(135deg);
        ; }

    50% {
        bottom: 8px;
        transform: rotate(0);
        ; }

    100% {
        bottom: 0;
        transform: rotate(0);
        ; }
}

@keyframes scaled {
    50% {
        transform: scale(0);
        ; }

    100% {
        transform: scale(0);
        ; }
}

@keyframes scaled-2 {
    0% {
        transform: scale(0);
        ; }

    50% {
        transform: scale(0);
        ; }

    100% {
        transform: scale(1);
        ; }
}

.cats-owl.list-hot {
    width: calc(100% - 50px);
    ; }

.choose-list {
}

.choose-list button {
    position: relative;
    cursor: pointer;
    display: inline-block;
    padding: 7px 20px 4px;
    margin-bottom: 10px;
    background-color: transparent;
    color: #333;
    font-weight: 500;
    font-size: 18px;
    border: 0px;
    outline: none;
    border-radius: 5px;
    transition: all 0.3s ease-in-out;
    ; }

.choose-list button span {
    position: relative;
    z-index: 3;
    font-size: 20px;
    ; }

.choose-list button:hover, .choose-list button.choosed {
    background: #71be11;
    color: #fff;
    ; }

.choose-list button.choosed::before, .choose-list button:hover::before {
    background-color: var(--color-main);
    ; }

.fancybox-tiktok-layout {
    width: auto !important;
    padding: 0;
    background: transparent;
    ; }

.rounded-5 {
    border-radius: 40px;
}

.rounded-4 {
    border-radius: 15px;
}

.w-160 {
    width: 160px;
}

.slick-project .slick-slide:not(.slick-current) {
    transform: scale(1 , 0.8) ;
    /* giảm kích thước 20% */
    opacity: 0.5;
}

.slick-project .slick-slide.slick-current {
    transform: scale(1 , 1) ;
    /* tăng kích thước 20% */
    padding: 0 10px;
}

.gird-service {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 234px);
    grid-gap: 5px 5px;
}

.box-service {
    position: relative;
    overflow: hidden;
    border-radius: 10px
}

.box-service:hover .name {
    color: var(--color-main);
}

.box-service img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    left: 0;
    top: 0;
    transition: all 0.5s
}

.box-service:nth-child(1) {
    grid-column: 1 / 2;
    grid-row: 1 / 3;
}

.box-service:nth-child(2) {
    grid-column: 2 / 3;
    grid-row: 1 / 3;
}

.box-service .name {
    display: flex;
    align-items: end;
    height: 100%;
    margin: 0;
    padding: 20px;
    font-size: 24px;
    font-weight: 600;
    color: white;
    bottom: 0px;
    left: 0px;
    width: 100%;
    background: #000;
    background: linear-gradient(183deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.92) 79%);
}

.gird-service h4 {
    font-size: 24px;
    font-weight: 600;
    font-family: "Afacad", sans-serif;
}

.aboutus {
}

.aboutus .col-12.col-md-5 span {
    font-size: 16px;
    font-weight: 500;
    color: var(--color-main);
    text-transform: uppercase;
}

.aboutus h2 {
    font-family: "Afacad", sans-serif;
    font-size: clamp(24px, 5vw, 38px);
    color: var(--color-main);
    line-height: clamp(1.2, 1.2 + 0.2vw, 1.5);
    font-weight: 600;
}

.wrap-product-list .name {
    font-size: 16px;
    font-weight: 700;
}

.color-white {
    color: #fff;
}

.name-project {
    font-size: 31px;
    font-family: "Afacad", sans-serif;
    line-height: 30px;
    font-weight: 500;
    color: white;
}

.a-link-project {
    font-size: 16px;
    font-weight: 500;
}

.a-link-project:hover {
    color: var(--color-red);
}

.box-project .image img {
    border-radius: 30px;
}

.slick-current .process-item-stt {
    opacity: 1;
    border-bottom: 2px solid var(--color-main);
}
.slider-process-nav {border-bottom:1px solid #ccc}
.process-item {
    color: white;
}

.process-item-stt {
}

.process-item-stt {
    width: 230px;
    opacity: 0.5;
}

.process-item-stt .stt {
    width: 40px;
    height: 46px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    font-weight: 600;
    margin: 0;
    margin-right: 9px;
}

.process-item-stt .name {
    font-size: 16px;
    font-weight: 600;
    margin: 0;
}

.process-item .name {
    font-size: 24px;
    font-weight: 600;
}

.process-item .desc {
    font-size: 18px;
    font-weight: 600;
    font-family: "Afacad", sans-serif;
}

.process-item img {
    border-radius: 30px;
}

.content-process {
    background: #218435;
    background: linear-gradient(190deg, rgb(33 132 53 / 0%) 37%, rgba(33, 132, 53, 0.92) 81%);
    border-radius: 0 0 0 30px;
}

.info .name {
    font-size: 16px;
    font-weight: 500;
}

.wrap-news {
    background: #f9f9f9;
}

.content-news .name {
    font-weight: 700;
    font-size: 18px;
    color: #333333;
    height: 50px;
}

.rounded-10 {
    border-radius: 10px;
}

.rounded-30 {
    border-radius: 30px;
}

.wrap-hotline {
    background-color: #f9f9f9;
}

.hotline-item {
    text-align: center;
}

.hotline-item .image {
    width: 60px;
    margin: auto;
}

.hotline-item .image i {
    font-size: 40px;
}

.hotline-item .info {
    margin-top: 10px;
}

.hotline-item .info .name {
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 5px;
    color: #828282;
}

.hotline-item .info .desc {
    font-weight: 700;
    font-size: 28px;
}

.star i {
    color: yellow
}

.sp-about {
    font-size: 16px;
    font-weight: 500;
    color: var(--color-main);
    text-transform: uppercase;
}

.font-weight-semibold {
    font-weight: 600;
    animation: blinkColor 1s infinite 
ease-in-out;
    transition: color 0.3s 
ease-in-out;
    color: white;
}

.about-img-main {
    position: absolute;
    top: 0;
    right: 0;
}

.info-teams {
}

.info-teams h4 {
    font-size: 18px;
    line-height: 25px;
    font-weight: 800;
    color: var(--color-main);
}

.info-teams p {
    font-size: 16px;
    font-weight: 500;
    color: #333333;
}

.gird-images {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 403px);
    grid-gap: 15px 15px;
}

.box-images {
    position: relative;
    overflow: hidden;
    border-radius: 10px
}

.box-images img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    left: 0;
    top: 0;
    transition: all 0.5s
}

.box-images:nth-child(1) {
    grid-column: 1 / 3;
    grid-row: 1 / 2;
}

.box-images:nth-child(2) {
    grid-column: 3 / 3;
    grid-row: 2 / 4;
}

.box-images:nth-child(3) {
    grid-column: 1 / 3;
    grid-row: 3 / 4;
}

.bg-box {
    position: relative;
    background-color: #f9f9f9;
}

.bg-box:after {
    content: '';
    width: 143px;
    height: 357px;
    position: absolute;
    right: 0%;
    top: 89%;
    background-image: url(../images/bg-vuong.png);
    background-position: 0 center;
}

.bg-box:before {
    content: '';
    width: 143px;
    height: 357px;
    position: absolute;
    left: 0%;
    top: 27%;
    background-image: url(../images/bg-vuong.png);
    background-position: 100% center;
}

.cotmoc-item {
    text-align: center;
    border: 1px dashed var(--color-main);
    border-radius: 15px;
    color: var(--color-main);
    font-size: 18px;
}

.cotmoc-item .info {
    height: 80px;
}

.slogan-tamnhinh {
    font-size: 36px;
    line-height: 40px;
    font-weight: 800;
    margin: auto;
    max-width: 70%;
    margin-bottom: 10px;
}

.cotmoc-p {
    font-size: 31px;
    font-weight: 700;
}

.list-sanpham {
    border-bottom: 1px solid #e8e8e8;
}

.click-list {
    cursor: pointer;
    max-width: 151px;
    opacity: 0.5;
}

.click-list.active {
    border-bottom: 2px solid var(--color-main);
    opacity: 1;
}

.tamnhin::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    background-image: url(../images/bg-la.png);
    background-repeat: no-repeat;
    width: 200px;
    height: 203px;
}