.banner-top {
    padding-bottom: 15px !important;
    background-color: white;
}

.dropdown-center {
    z-index: 10;
}

.banner-top .logo {
    /* max-width: 166px;
  max-height: 46px; */
}

div#header {
    position: relative;
    min-height: 47px;
    font-size: 16px;
    font-weight: 600;
    background: white;
    /* z-index: 9; */
}

.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;
}

.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;
}

.header-bottom .btn-main {
    font-size: 16px;
    background: var(--color-main);
    font-weight: 600;
    text-align: center;
    margin: auto;
    padding: 0;
    line-height: 48px;
    text-transform: uppercase;
}

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

.header-bottom .header-ul {
    position: relative;
    list-style: none;
    padding: 0;
    margin: 0 0px 0 0px;
    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: var(--color-main);
    text-transform: math-auto;
    line-height: 47px;
    font-size: 17px;
    font-weight: 500;
    background-repeat: no-repeat;
    background-size: 24px 23px;
    background-position: 0 center;
}

.header-bottom .header-ul a i {
    font-size: 14px;
}

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

.header-bottom .header-ul a.active, .header-bottom .header-ul a:hover {
    color: var(--color-red);
}

.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 .submenu, .header-bottom .header-ul > li > ul {
    position: absolute;
    background-color: #fafafa;
    border-radius: 0.25rem;
    opacity: 0;
    visibility: hidden;
}

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

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

.header-bottom .header-ul > li > ul {
    min-width: 250px;
    top: 100%;
    -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;
    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 {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    min-width: 900px;
    max-height: 500px;
    overflow: auto;
    top: 104%;
    padding: 10px 5px;
    -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;
    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: 0;
    list-style: none;
}

.header-bottom .header-ul .has-child ul.submenu > li {
    width: 16.6666666667%;
}

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

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

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

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

.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: 0 auto;
    background: 0 0;
    border-radius: 0;
}

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

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

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

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

.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: var(--color-submain);
}

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

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

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

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

.category-item:hover .name, .product-item .name a {
    color: var(--color-submain);
}

.news-index .name, .news-index::after {
    transition: 0.3s;
    left: 0;
    position: absolute;
    width: 100%;
}

.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: 0 0 3px #333;
}

.service-list, .uudai-item, .wrap-tuvan, .wrap-uudai {
    position: relative;
}

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

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

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

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

.news-index, .product-item, .product-list {
    position: relative;
}

.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;
}

.category-item {
    display: block;
    padding: 10px;
    border: 1px solid transparent;
    border-radius: 10px;
    transition: 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: 700; */
}

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

.news-index, .product-item .image img, .product-list {
    border-radius: 10px;
}

.product-list {
    display: block;
    overflow: hidden;
}

.product-list .name {
    position: absolute;
    top: 0;
    left: 0;
    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 .image {
    border-radius: 10px;
    overflow: hidden;
    width: 62%;
}

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

.product-item .name a {
    display: block;
    font-size: 18px;
}

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

.product-item .attrs li {
    padding: 5px 0 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 {
    z-index: 9;
    width: 50px;
    height: 50px;
}

.slick-prev {
    left: 5px;
}

.slick-next {
    right: 5px;
}

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

.wrap-product-hot {
}

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

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

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

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

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

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

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

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

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

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

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

.wrap-category ul {
    list-style: none;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
}

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

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

.visao-item:hover .num, .wrap-counter {
    background: var(--color-main);
}

.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;
}

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

.counter-item .number {
    color: var(--color-main);
    font-style: italic;
}

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

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

.counter-item .name {
    font-size: 15px;
    font-weight: 600;
    text-transform: uppercase;
}

.accordion-item {
    margin-bottom: 20px;
    overflow: hidden;
    background: #fff;
    color: #000;
    font-size: 20px;
    border: 0 solid;
    border-bottom: 2px solid #e8e8e8;
}

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

.accordion-button {
    position: relative;
    padding: 1rem 0;
    background: #fff;
    font-size: clamp(16px, 2vw, 20px);
    font-weight: 700;
}

.accordion-button:not(.collapsed) {
    outline: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    color: var(--color-red) !important;
    background: 0 0;
    color: #000;
}

/* .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); ; }
*/
.news-item .time, .project-item .name, .whyus-list, .wrap-about .about-img, .year-item {
    text-align: center;
}

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

.hinhthuc-item .name, .project-item .name, .slide-center a, .slide-center h4, .video-item .name, .wrap-about .about-count p {
    text-transform: uppercase;
}

.news-item .more a:hover, .slide-center h4 {
    letter-spacing: 2px;
}

.blog-l h3 a, .desc-home-cl.text-split, .hinhthuc-item .desc, .name-news.text-split, .name-newshome.text-split, .news .news-name a.text-split, .news-shadow .news-shadow-article .news-shadow-info .news-shadow-desc.text-split, .news-shadow .news-shadow-article .news-shadow-info .news-shadow-name a .text-split, .tieuchi-item .name {
    -webkit-line-clamp: 2;
}

.owl-cat a {
    color: #8d8d8d;
}

.owl-cat a.active, .owl-cat a:hover {
    color: var(--color-main);
    text-decoration: underline;
}

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

.story-title-line::after {
    content: "";
    display: block;
    width: 68px;
    height: 1px;
    margin-top: 22px;
    background-color: #cdbda9;
}

.news-item .time span:last-child, .project-item, .slideshow .banner-item, .support-online a:hover span, .wrap-about .title-main h2 span {
    display: block;
}

.wrap-about .about-img {
    position: sticky;
    top: 0;
}

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

.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 .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 {
    font-size: 18px;
}

.baogia-item:hover, .blog-l h3 a:hover, .box-newsi h3 a:hover, .doingu-item, .doingu-item .name a, .goikham-item .name a, .khachhang-item:hover .icon svg, .news-item .name a:hover, .news-item:hover .name a, .owl-item.active.center .khachhang-item .icon svg, .quytrinh-item:hover .name, .tieuchi-item:hover .name, .whyus-list:hover .name, .year-item.slick-current {
    color: var(--color-main);
    font-weight: 800;
}

#frm-newsletter .frm-title, .goikham-item .name a:hover, .name-product:hover, .search-res .icon-search.active {
    color: var(--color-submain);
}

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

.wrap-sumenh h3, .wrap-tamnhin h3 {
    font-size: clamp(24px, 3vw, 32px);
    font-weight: 800;
    color: var(--color-main);
    margin-top: 10px;
}

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

.vision-mission-section {
    padding: 28px 0 42px;
    background-color: #e4fff5;
}

.vision-mission-title {
    margin-bottom: 20px;
}

.vision-mission-title h2 {
    text-transform: uppercase;
}

.vision-mission-card {
    position: relative;
    height: 100%;
    min-height: 360px;
    overflow: hidden;
    border-radius: 10px;
}

.vision-mission-image {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 360px;
    object-fit: cover;
}

.vision-mission-content {
    position: absolute;
    right: 16px;
    bottom: 22px;
    left: 16px;
    padding: 16px 14px;
    border-radius: 6px;
    background-color: #fff;
    color: #555;
    font-size: 13px;
    line-height: 1.55;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    overflow: auto;
    height: 189px;
}

.vision-mission-content h3 {
    margin: 0 0 10px;
    color: var(--color-main);
    font-size: 18px;
    font-weight: 700;
}

.vision-mission-content p:last-child {
    margin-bottom: 0;
}

.core-values-diagram {
    position: relative;
    width: min(100%, 360px);
    aspect-ratio: 1;
    margin: 0 auto;
}

.core-values-list {
    border-top: 1px dashed #aaa;
}

.core-values-list .giatri-item {
    margin-bottom: 0 !important;
    padding: 14px 0 !important;
    border-bottom: 1px dashed #aaa;
}

.core-values-list .giatri-item .name {
    margin-bottom: 8px;
}

.core-value-circle,
.core-values-center {
    position: absolute;
    display: flex;
    aspect-ratio: 1;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    text-align: center;
}

.core-value-circle {
    width: 42%;
    padding: 18px;
    border: 1px dashed #aaa;
    background-color: transparent;
    color: #222;
    font-size: 14px;
    font-weight: 600;
}

.core-value-top {
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}

.core-value-right {
    top: 50%;
    right: 0;
    transform: translateY(-50%);
}

.core-value-bottom {
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}

.core-value-left {
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}

.core-values-center {
    top: 50%;
    left: 50%;
    z-index: 2;
    width: 34%;
    padding: 16px;
    border: 1px solid #d6e9df;
    background-color: #effff8;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transform: translate(-50%, -50%);
}

.core-values-center img {
    display: block;
    width: 90%;
    height: auto;
    max-height: 70px;
    object-fit: contain;
}

@media (max-width: 767px) {
    .vision-mission-section {
        padding: 24px 0 30px;
    }

    .vision-mission-card,
    .vision-mission-image {
        min-height: 330px;
    }

    .vision-mission-content {
        position: relative;
        right: 0;
        bottom: 0;
        left: 0;
    }

    .core-values-diagram {
        margin-top: 20px;
    }

    .core-value-circle {
        padding: 12px;
        font-size: 12px;
    }
}

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

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

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

.form-check-input:checked, .newsletter-button button:hover {
    background: var(--color-submain);
}

.box-product.hot .name-product, .box-product.hot .price-product, .box-product.hot .price-product .price-new, .video-item .btn-play svg, .wrap-video .btn-play svg {
    color: #fff;
}

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

.newsletter-input {
    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: 0;
    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: 0 !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 input {
}

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

.wrap-project {
    background: #fff;
}

.project-item .name {
    font-size: 18px;
}

.news-item {
    overflow: hidden;
    border-color: #e8e8e8 !important;
}

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

.news-item .info {
    position: relative;
    width: 100%;
    z-index: 10;
    /* border-left: 5px solid var(--color-red); */
    border-radius: 3px 0 0 3px;
    padding: 7px 0px;
    background: #fff;
    /* background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0,
    rgba(236, 47, 59, 0.2) 100%
  ); */
}

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

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

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

.news-item .name {
    height: 52px;
}

.news-item .name a {
    position: relative;
    font-size: clamp(17px, 2vw, 22px);
    font-weight: 700;
    color: var(--color-main);
}

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

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

.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.list {
    display: flex;
    margin-bottom: 15px;
}

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

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

.wrap-doingu-inner {
    background: linear-gradient(to bottom, #fff 0, #cfcfcf 100%);
}

.choose-list button.choosed::before, .choose-list button:hover::before, .item-giatri, .slide-center a, .year-item.slick-current::before {
    background-color: var(--color-main);
}

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

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

.vanhoa-item .name {
    font-size: 16px;
    font-weight: 600;
    color: var(--color-main);
}

.vanhoa-item .desc {
    color: #666;
    font-size: 15px;
    font-weight: 500;
}

.history-item .name {
    /* font-size: 21px; */
    /* margin-bottom: 15px; */
    /* font-weight: 700; */
}

.history-item .p {
    font-size: 24px;
    /* font-family: var(--font-bold); */
    margin-bottom: 0;
}

.item-giatri .name, .item_history .name {
    /* font-family: "Playfair Display", sans-serif; */
}

.year-item {
    font-size: 16px;
    position: relative;
    color: #b9b9b9;
    padding-bottom: 15px;
    z-index: 98;
}

.year-item span {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    font-size: 18px;
    font-weight: 600;
}
.year-item.slick-current span{ color:var(--color-submain);}
#menu, .box-product.hot::before, .btn-option input, .checkbox-card input[type="checkbox"], .checkbox-card input[type="radio"], .color-option input, .color-pro-detail input[type="radio"], .gallery-pro-detail .slider-products .slick-next:before, .gallery-pro-detail .slider-products .slick-prev:before, .img-option input, .menu-res, .size-pro-detail input[type="radio"] {
    display: none;
}

/* .slick-list {
    z-index: 99;
} */

.year-item::before {
    content: "";
    position: absolute;
    bottom: 0;
    margin: auto;
    right: 0;
    left: 0;
    width: 12px;
    height: 12px;
    border-radius: 100%;
    background-color: #d9d9d9;
    z-index: 3;
}

.item-giatri .icon, .slideshow .banner-item:first-child {
    margin-bottom: 20px;
}

.wrap-history .slider-nav:after {
    content: "";
    position: absolute;
    bottom: 10px;
    width: 100%;
    height: 1px;
    background-color: var(--color-submain);
    z-index: 0;
}

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

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

.pic-news img, .pic-newshome-normal img, .pic-product img, .pic-video img, .pic-video-2 img, .tags-pro-detail, .wrap-history .slider-for {
    width: 100%;
}

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

#hamburger, .menu-bar-res {
    border-radius: 5px;
    background: var(--color-main);
}

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

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

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

.item_history .name {
    font-size: 31px;
    margin-bottom: 15px;
    color: #fff;
}

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

a.play .btn-frame {
    width: 50px;
    height: 50px;
}

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

.wrap-video .btn-play {
    display: inline-block;
}

.menu-res {
    z-index: 100;
    background: var(--color-main);
    position: relative;
}

.menu-bar-res {
    display: none;
    height: 34px;
    padding: 0 10px;
    justify-content: center;
}

#hamburger {
    position: relative;
    display: block;
    width: 37px;
    height: 34px;
    border: 1px solid #fff;
}

#hamburger span, #hamburger:after, #hamburger:before {
    background: #fff;
    content: "";
    display: block;
    width: 60%;
    height: 1px;
    position: absolute;
    left: 20%;
    -webkit-transition: transform 0.5s 0.5s, top 0.5s 0.5s, bottom 0.5s 0.5s, left 0.5s 0.5s, opacity 0.5s 0.5s;
    transition: none 0.5s 0.5s;
    transition-property: transform, top, bottom, left, opacity;
}

.search-multiple .giaban-item, .search-multiple .hangxe-item, .search-multiple .loaixe-item {
    transition: 0.2s ease-in-out;
    text-align: center;
}

#hamburger:before {
    top: 7px;
}

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

#hamburger:after {
    top: 21px;
}

.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-panel, .mm-panels {
    background: #fff !important;
}

.desc-pro-detail .attrs li b, .mm-menu a, .mm-menu a:active, .mm-menu a:hover, .mm-menu a:link, .mm-menu a:visited, .name-newshome.text-split a, .view-newshome:hover {
    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-res .icon-search {
    cursor: pointer;
    text-align: center;
    color: #fff;
    font-size: 16px;
    margin: 0 0 0 10px;
}

.search-res .search-grid {
    position: absolute;
    top: 35px;
    right: -12px;
    width: 0;
    height: 40px;
    overflow: hidden;
    background: #fff;
    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: 0;
    border: none;
    margin: 0;
    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: 0;
    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;
}

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

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

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

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

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

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

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

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

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

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

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

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

.slideshow {
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.slideshow .slider {
    position: relative;
    width: 73.56%;
    padding-left: 18px;
}

.slider-tabs {
    display: flex;
    margin-bottom: 6px;
    overflow: hidden;
    background: #E6FFF3;
    border-radius: 10px;
}

.slider-tab {
    width: 25%;
    min-height: 44px;
    padding: 15px 14px;
    margin: 0;
    border: 0;
    /* border-radius: 10px 10px 3px 3px; */
    background: #fff;
    color: #252525;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.15;
    cursor: pointer;
    transition: color 0.2s ease, background-color 0.2s ease;
}

.slider-tab:hover, .slider-tab.active {
    background: #E6FFF3;
    color: #16a329;
    background-image: url(../images/bg-nameslides.webp);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.slider-tab.active {
    position: relative;
    z-index: 1;
    font-weight: 700;
}

.slider-tab:focus-visible {
    position: relative;
    z-index: 2;
    outline: 2px solid #16a329;
    outline-offset: -2px;
}

.slideshow .banner {
    width: 25.2%;
    gap: 13px;
}

/* Offer menu beside the home slider */
.slideshow > .banner:has(.ul-slide) {
    padding: 15px 9px;
    border: 1px solid #d6d6d6;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.ul-slide, .ul-slide ul {
    padding-left: 0;
    list-style: none;
}

.ul-slide > li + li {
    margin-top: 8px;
}

.ul-slide > li > a {
    display: block;
    padding: 8px 10px;
    border-radius: 8px;
    background: #f1f1f1;
    color: #111;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
}

.ul-slide > li > a:hover {
    color: var(--color-red, #d71920);
}

.ul-slide > li > ul {
    padding: 5px 7px 0;
}

.ul-slide > li > ul > li {
    margin-top: 7px;
}

.ul-slide > li > ul > li > a {
    display: flex;
    align-items: flex-start;
    color: #343434;
    font-size: 14px;
    line-height: 1.45;
}

.ul-slide > li > ul > li > a:hover {
    color: var(--color-red, #d71920);
}

.ul-slide > li > ul > li > a::before {
    content: "\f206";
    flex: 0 0 16px;
    margin: 3px 9px 0 0;
    color: #343434;
    font-family: "Font Awesome 7 Free", "Font Awesome 6 Free", "Font Awesome 5 Free";
    font-size: 13px;
    font-weight: 900;
}

.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: 0;
    left: 0;
    width: 100%;
    padding: 100px 0;
}

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

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

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

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

.blink, .slide-text .rotateme {
    -webkit-animation-iteration-count: infinite;
}

.slide-text .rotateme {
    -webkit-animation-name: rotateme;
    animation-name: rotateme;
    -webkit-animation-duration: 20s;
    animation-duration: 20s;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
}

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

.slide-center h4 {
    color: var(--color-main);
    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;
    color: #fff;
    border-radius: 30px;
    box-shadow: 1px 1px 0 #fff;
}

.cart-product span, .web-item .info .d-flex a {
    text-transform: capitalize;
}

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

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

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

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

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

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

.slide-text .slick-next, .slide-text .slick-prev {
    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";
}

.news-control#down, .slide-text .slick-dots {
    bottom: 20px;
}

.news-slick h3, .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, #f2f2f2 100% );
}

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

.checkbox-card input[type="checkbox"]:checked + .content, .checkbox-card input[type="radio"]: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: 0 10px;
    border-radius: 5px;
    background-color: #eee;
}

.box-product.hot .pic-product, .cart-product, .search-multiple .loaixe-item .image, .thongso p {
    margin-bottom: 0;
}

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

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

.search-multiple .hangxe-item {
    border-radius: 5px;
    padding: 7px 5px 5px;
}

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

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

#my-phone-circle, .blog-r .vert .simply-scroll-list li {
    height: 50px !important;
}

.search-multiple .giaban-item {
    padding: 5px;
    background: #eee;
    border-radius: 5px;
}

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

.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;
}

.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:after, .news-scroll:before {
    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-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: #fff;
    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 #fff;
    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: #222;
}

.news .news-name a:hover, .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-desc {
    height: 38px;
    font-size: 13px;
}

.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: 0;
}

#product-title {
    font-size: 24px;
    font-weight: 600;
}

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

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

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

.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>') left 5px no-repeat;
}

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

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

.product-video-slide {
    padding: 10px;
}

.product-video-frame,
.product-video-file {
    display: block;
    width: 100%;
    aspect-ratio: 550 / 480;
    overflow: hidden;
    border-radius: 8px;
    background: #000;
}

.product-video-frame iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

.product-video-file {
    height: auto;
    object-fit: contain;
}

.gallery-pro-detail .slider-product-thumbs .product-video-thumb {
    position: relative;
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    padding: 0 !important;
    color: #fff;
    background: #111;
}

.gallery-pro-detail .slider-product-thumbs .product-video-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .72;
}

.product-video-thumb strong {
    position: absolute;
    right: 4px;
    bottom: 3px;
    left: 4px;
    font-size: 11px;
    line-height: 1;
    text-align: center;
}

.product-video-play {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 28px;
    height: 20px;
    border-radius: 6px;
    background: #f00;
    transform: translate(-50%, -50%);
}

.product-video-play::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 52%;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 8px solid #fff;
    transform: translate(-50%, -50%);
}

.product-summary-content {
    max-height: 3.8em;
    overflow: hidden;
    line-height: 1.6;
}

.product-summary-content.is-expanded {
    max-height: none;
}

.product-summary-content > :first-child {
    margin-top: 0;
}

.product-summary-content > :last-child {
    margin-bottom: 0;
}

.product-summary-toggle {
    margin-top: 5px;
    padding: 0;
    border: 0;
    color: var(--color-main);
    background: transparent;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.product-summary-toggle:hover {
    text-decoration: underline;
}

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

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

/* .gallery-pro-detail .slider-product-thumbs {
  flex: 1;
} */
.gallery-pro-detail .slider-product-thumbs .item, .info-product {
    padding: 5px;
}

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

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

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

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

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

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

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

.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: 0 !important;
}

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

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

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

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

.attr-pro-detail {
    width: 100%;
    list-style: none;
    padding: 0;
    margin-left: 0;
}

.attr-pro-detail li {
    margin-bottom: 5px;
}

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

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

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

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

.price-old-pro-detail {
    font-size: 16px;
    font-weight: 500;
    color: #838383;
    text-decoration: line-through;
    padding-left: 10px;
}

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

.color-pro-detail {
    vertical-align: top;
    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;
}

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

.btn-option input:checked + span, .color-option input:checked + .circle, .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>') center center no-repeat;
}

.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: 0;
    width: 45px;
    height: 100%;
    color: #000;
    cursor: pointer;
    font-size: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
}

.btn-option, .btn-option span, .color-option, .img-option, .img-option span {
    display: inline-block;
}

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

.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: 60px; */
    border-radius: 5px;
    padding: 5px;
}

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

.cart-pro-detail a.addnow:hover {
    color: #fff !important;
    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 !important;
}

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

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

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

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

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

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

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

.thongso-pro-detail table td, .thongso-pro-detail table th {
    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;
}

.product-attr .attr-options {
    gap: 8px;
}

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

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

.btn-option {
    cursor: pointer;
}

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

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

.img-option span {
    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;
}

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

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

.thongso {
    line-height: 1;
}

.pic-news {
    width: 210px;
}

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

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

.desc-news, .news .news-desc {
    margin-top: 5px;
    line-height: 22px;
}

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

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

.desc-news {
    color: #676767;
}

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

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

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

.news .news-desc {
    color: #333;
}

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

.othernews {
    position: sticky;
    top: 60px;
    z-index: 11;
}

.contact-input, .contact-map {
    position: relative;
}

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

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

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

.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: 0 10px;
    font-size: 16px;
    margin-bottom: 0;
}

.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;
}

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

.author-item .image, .news-slick .img {
    width: 150px;
}

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

.author-item .name, .fixbar ul li a i {
    font-size: 20px;
}

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

.form-floating-cus > select, .form-floating.form-floating-cus > input {
    height: 45px;
    padding: 0.7rem 0.5rem;
}

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

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

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

.contact-input, .news-slick h3 a.name-newshome {
    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: 0;
}

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

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

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

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

.blink {
    -webkit-animation-name: blink;
    -webkit-animation-duration: 1s;
    -webkit-animation-timing-function: linear;
    -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;
}

.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, .js-facebook-messenger-box.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: 0;
    transform: translateY(-50%);
    opacity: 0;
    padding: 6px 45px 6px 20px;
    border-radius: 30px;
    color: #fff;
    background-color: var(--color-main);
    white-space: nowrap;
    transition: 0.3s ease-in-out;
    width: 0;
    overflow: hidden;
}

.fixbar ul, .plugbar ul, .toolbar ul {
    list-style: none;
    padding: 0;
}

.js-facebook-messenger-box svg#close-icon, .js-facebook-messenger-box svg#fb-msng-icon {
    -webkit-transition: opacity 160ms ease-in-out, -webkit-transform 160ms ease-in-out;
    position: absolute;
}

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

.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, .js-facebook-messenger-tooltip.closed {
    display: none !important;
}

.js-facebook-messenger-tooltip {
    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;
}

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

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

.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;
    -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, .js-facebook-messenger-box.rotate.open svg#close-icon {
    -webkit-transform: rotate(0);
    transform: rotate(0);
}

.js-facebook-messenger-box svg#fb-msng-icon {
    width: 32px;
    height: 33px;
    top: 13px;
    left: 12px;
    opacity: 1;
    overflow: hidden;
    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;
    top: 19px;
    left: 19px;
    transition: opacity 160ms ease-in-out, transform 160ms ease-in-out, -webkit-transform 160ms ease-in-out;
}

.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: opacity 160ms ease-in-out, -webkit-transform 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 {
    display: block;
    position: relative;
    text-align: center;
    line-height: 1;
    padding: 10px;
    font-size: 14px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    color: #fff;
    background: #1182fc;
    width: 220px;
}

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

.cart-fixed, .cart-fixed span {
    border-radius: 100%;
    text-align: center;
}

.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-tooltip {
    color: #404040;
    background: #fff;
    bottom: 97px;
    right: 97px;
}

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

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

.cart-fixed {
    position: fixed;
    right: 20px;
    bottom: 290px;
    z-index: 10;
    background: #4b4f56;
    width: 50px;
    height: 50px;
    color: #fff !important;
    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;
}

.fixbar, .toolbar {
    position: fixed;
    z-index: 500;
    bottom: 0;
}

.fixbar, .toolbar ul li a {
    width: 100%;
    display: block;
}

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

.cart-fixed span {
    position: absolute;
    top: 0;
    right: -5px;
    color: #fff;
    width: 25px;
    height: 25px;
    background: #ec2d3f;
    line-height: 25px;
    font-size: 11px;
}

.support-online a, .support-online i {
    width: 40px;
    height: 40px;
    position: relative;
}

@keyframes tada {
    0%, to {
        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);
    }
}

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

.toolbar ul {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0;
}

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

.toolbar ul li a {
    cursor: pointer;
}

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

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

.fixbar {
    background: #f0eff4;
    border-top: 1px solid #ddd;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    height: 50px;
}

.plugbar ul, .wcircle-icon {
    display: -webkit-box;
    display: -ms-flexbox;
    -webkit-box-align: center;
}

.fixbar ul {
    margin: 0;
}

.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;
}

.desc-newshome, .listvideos, .name-newshome, .name-video {
    color: var(--color-black);
}

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

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

.listvideos, .newshome-intro .view-newshome, .owl-video {
    margin-top: 10px;
}

.plugbar ul {
    margin: 0;
    display: flex;
    -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%;
}

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

.support-online a {
    margin: 20px 10px;
    text-align: left;
    display: block;
}

.support-online a span, .support-online i {
    text-align: center;
    z-index: 999;
    color: #fff;
}

.support-online i {
    background: #43a1f3;
    border-radius: 100%;
    font-size: 20px;
    line-height: 1.9;
}

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

.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;
}

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

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

.wcircle-icon, .wcircle-icon:before, .wcircle-menu-item {
    background: var(--color-main);
}

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

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

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

.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;
}

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

.wcircle-icon {
    border-radius: 50%;
    position: relative !important;
    display: flex !important;
    -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;
    border: 1px solid #fff;
    border-radius: 50%;
    left: -5px;
    top: -5px;
    -webkit-animation: 1s ease-in-out infinite pulse;
    animation: 1s ease-in-out infinite pulse;
}

.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: 2s ease-in-out infinite zoomIn;
    animation: 2s ease-in-out infinite zoomIn;
}

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

.box-product, .color-product, .pic-product, .video-main {
    position: relative;
}

.wcircle-menu-item {
    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-icon i, .wcircle-menu-item i {
    font-size: 25px;
    color: #fff;
    position: relative;
    z-index: 9999;
}

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

.video-main {
    height: 400px;
}

.listvideos, .view-newshome {
    height: 40px;
    border: 1px solid #ccc;
}

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

.listvideos {
    width: 100%;
    padding: 0 10px;
    cursor: pointer;
}

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

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

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

.name-video {
    font-size: 16px;
    margin-bottom: 0;
}

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

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

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

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

.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: 0;
}

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

.name-newshome {
    line-height: normal;
}

.desc-newshome {
    margin-bottom: 0;
    text-align: justify;
}

.view-newshome {
    width: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #000;
}

.box-product {
    border-radius: 5px;
    overflow: hidden;
    background: #fff;
    border: 1px solid #f2f4f7;
    padding: 1px;
    height: 100%;
}

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

.color-product {
    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>') center center no-repeat;
}

.pic-product {
    margin-bottom: 0;
    overflow: hidden;
    border-radius: 5px;
}

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

.product-tool a {
    cursor: pointer;
    width: 50%;
    padding: 10px;
    text-align: center;
    color: #fff;
    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 .desc {
    max-height: 100px;
    overflow: auto;
    height: 100px;
}

.name-product {
    font-size: 16px;
    line-height: 23px;
    color: var(--color-black);
    font-weight: 600;
    margin-bottom: 5px;
    min-height: 69px;
}

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

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

.price-old {
    font-size: 12px;
    color: var(--color-gray);
    text-decoration: line-through;
}

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

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

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

.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: 0;
    margin: 0 auto;
    text-align: center;
}

.price-per {
    position: absolute;
    top: 6px;
    left: 7px;
    color: #fff;
    background: red;
    border: 1px solid var(--color-red);
    font-size: 11px;
    border-radius: 30px;
    width: 40px;
    text-align: center;
    line-height: 20px;
    font-weight: 600;
    z-index: 2;
}

.box-images, .cats-bar, .cats-bar-icon span, .choose-list button, .dm-noibat, .dm-noibat a {
    position: relative;
}

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

.blog-l-img a, .box-images img {
    width: 100%;
    transition: 0.5s;
}

.bg-red, .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;
    margin: auto auto 40px;
}

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

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

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

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

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

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

.cats-bar-icon.active span:first-child {
    animation: 0.7s forwards top;
}

.cats-bar-icon.not-active span:first-child {
    animation: 0.7s forwards top-2;
}

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

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

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

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

@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(0);
    }

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

@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 {
    100%, 50% {
        transform: scale(0);
    }
}

@keyframes scaled-2 {
    0%, 50% {
        transform: scale(0);
    }

    100% {
        transform: scale(1);
    }
}

.cats-owl.list-hot {
    width: calc(100% - 50px);
}

.choose-list button {
    cursor: pointer;
    display: inline-block;
    padding: 7px 20px 4px;
    background-color: transparent;
    font-weight: 600;
    font-size: 14px;
    border: 1px solid #e8e8e8;
    outline: 0;
    border-radius: 30px;
    transition: 0.3s ease-in-out;
}

.blog-l p, .box-newsi {
    font-weight: 400;
    color: #666;
}

.choose-list button span {
    position: relative;
    z-index: 3;
    font-size: 20px;
}

.fancybox-tiktok-layout {
    width: auto !important;
    padding: 0;
    background: 0 0;
}

.blog-flex {
    display: flex;
    flex-flow: wrap;
    justify-content: space-between;
    align-items: flex-start;
}

.blog-l {
    float: left;
    width: 46.1538461538%;
    line-height: 24px;
}

.blog-l-img {
    max-width: 100%;
    overflow: hidden;
    margin-bottom: 7px;
}

.blog-l-img:hover img {
    transform: scale(1.1);
}

.blog-l h3 a {
    font-size: 16px;
    color: #2f2f2f;
    line-height: 20px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-weight: 600;
}

.blog-l p {
    margin: 9px 0 10px;
    font-size: 14px;
    line-height: 18px;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.box-newsi, .box-newsi h3 {
    line-height: 20px;
    font-size: 13px;
}

.box-newsi h3, .box-newsi h3 a {
    -webkit-line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.blog-l a.blog-l-more {
    font-weight: 500;
    font-size: 13px;
    color: #2f2f2f;
    background: #fff;
    display: inline-block;
    vertical-align: top;
    padding: 8px 38px 7px;
    transition: 0.5s;
    border-radius: 0;
    text-transform: none;
    border: 1px solid #333;
    text-transform: uppercase;
}

.blog-l a.blog-l-more:hover {
    background: #2f2f2f;
    color: #fff;
}

.blog-r {
    float: right;
    width: 51.282051%;
    height: 317px;
    overflow: hidden;
}

.blog-r ul li {
    margin-bottom: 10px !important;
    border-bottom: 1px solid #e8e8e8;
}

.box-newsi-img {
    width: 104px;
    max-width: 36%;
    float: left;
    margin-right: 10px;
}

.box-newsi h3 {
    font-weight: 500;
    margin: 0 0 7px;
    padding: 0;
}

.box-newsi h3 a {
    color: #333;
    font-size: 16px;
}

.box-newsi-more {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.gird-images {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 238px);
    grid-gap: 15px 15px;
}

.box-images {
    overflow: hidden;
    border-radius: 10px;
}

.box-images img {
    position: absolute;
    height: 100% !important;
    object-fit: cover;
    object-position: center;
    left: 0;
    top: 0;
}

.box-images:first-child {
    grid-column: 1/3;
    grid-row: 1/3;
}

.border-1 {
    border: 1px solid;
}

.color-yellow {
    color: #ff0;
}

.hotline a span {
    font-size: 16px;
    font-weight: 700;
    animation: 1s ease-in-out infinite blinkColor;
    transition: color 0.3s ease-in-out;
}

.gradien-pro {
    background: #ffe5e3;
    background: linear-gradient(86deg, #ffe5e3 20%, #ced1fe 70%);
    border: 3px solid var(--color-submain);
}

.gradient-title {
    background: #b7c4ff;
    background: linear-gradient(178deg, #b7c4ff 20%, #7185fc 70%);
    border-radius: 0 0 90px 90px;
    width: 404px;
    text-align: center;
    justify-content: center;
    color: #fff;
}

.why-icon {
    width: 49px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
}

.bg-duhoc, .bg-form, .bg-khoahoc, .bg-teacher {
    background-repeat: no-repeat;
}

.why-center-img, .why-icon img {
    object-fit: contain;
}

.why-title {
    line-height: 1.25;
    font-size: clamp(16px, 2vw, 24px);
    margin-bottom: 10px;
}

.color-666666 {
    color: #666;
}

.line-height-15 {
    line-height: 1.5;
}

.team {
    background-color: #f9fbfa;
}

.bg-duhoc, .bg-f7 {
    background-color: #fff7f7;
}

.text-shadow {
    text-shadow: 2px 4px 2px var(--color-main);
}

.bg-duhoc {
    background-image: url(../images/bg-duhoc.png);
}

.bg-khoahoc {
    background-image: url(../images/bg-khoahoc.png);
}

.bg-form {
    background-image: url(../images/bg-form.png);
}

.bg-teacher {
    background-image: url(../images/bg-duhoc.png);
}

.newsletter-input2 input, .newsletter-input2 select {
    padding: 11px 10px;
}

.teacher-item .info {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, 0);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(7.7px);
    -webkit-backdrop-filter: blur(7.7px);
}

.text-red {
    color: var(--color-red) !important;
}

.journey .col-12:first-child, .journey .col-12:nth-child(4) {
    margin-top: 20px;
}

.text-yellow {
    color: gold;
}

.feedback-item .p-2 {
    background-image: url(../images/six.png);
    background-repeat: no-repeat;
    background-position: 96% 96%;
}

.feedback-item .description {
    height: 147px;
}

.wrap-khoa-hoc:nth-child(odd) .order {
    order: -1;
}

.bg-khac {
    background-image: url(../images/bg-khac.png);
    background-position: center;
}

.wrap-hinhanh {
    background: #e5cfff;
    background: linear-gradient( 178deg, #e5cfff 0, #ffebce 38%, #fff 70%, #fff 84% );
}

.form-p {
}

.icon-selectd {
}

.newsletter-left-form {
}

/* history */
.wrap-history {
    /* padding: 50px 0;
  background: var(--color-main); */
    /* background: hsl(42deg 97% 53% / 10%); */
    /* padding: 20px 0; */
}

.item_history .info {
    /* padding: 10px 20px; */
    /* margin-left: 25px; */
    /* border-left: 5px solid var(--color-main); */
}

.item_history .name {
    font-size: clamp(15px, 2vw, 24px);
    margin-bottom: 15px;
    color: #000;
    text-transform: uppercase;
    font-weight: 700;
}

.item_year {
    font-size: clamp(15px, 2vw, 21px);
    text-align: center;
    position: relative;
    padding-bottom: 10px;
    /* font-family: "Montserrat", sans-serif; */
    font-weight: 600;
    color: #6666;
}

.item_year:not(.slick-current)::before {
    content: "";
    position: absolute;
    bottom: -4px;
    left: calc(50% - 5px);
    width: 9px;
    height: 9px;
    border-radius: 8px;
    background-color: #d0d0d0;
}

.item_year.slick-current {
    font-weight: bold;
    color: var(--color-submain);
}

.item_year.slick-current::before {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    bottom: -2px;
    left: calc(50% - 10px);
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid var(--color-submain);
}

.wrap-history .slider-nav {
    margin-top: 20px;
}

.wrap-history .slider-nav .slick-list {
    padding: 0px 30px 5px 30px !important;
    z-index: 9;
}

.wrap-history .slider-nav .slick-list::after {
    content: "";
    display: block;
    /* border-top: solid 2px #d0d0d0; */
}

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

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

/* menu c1 c2 */
/* .menu ul li ul {
  position: absolute;
  min-width: 250px;
  left: 0;
  background: #fff;
  box-shadow: 0 3px 11px 0 rgba(0, 0, 0, 0.3);
  -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;
  transition: all 0.5s;
} */
.menu ul li ul li ul {
    top: 0px;
    left: 100%;
}

.menu ul li:hover > ul {
    -webkit-transform: perspective(600px) rotateX(0);
    transform: perspective(600px) rotateX(0);
    -webkit-transform-origin: 0 0 0;
    opacity: 1;
    visibility: visible;
    transition: all 0.7s;
    top: 0;
    left: 100%;
}

.menu ul li ul li a:hover:before, .menu ul li ul li > a.active:before {
    left: 0;
    visibility: visible;
    opacity: 1;
    width: 30px;
    height: 1px;
    top: 50%;
    font-weight: 500;
}

.header-bottom .header-ul ul li a:hover:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    border: none;
    z-index: -1;
}

/* cho chữ chạy */
@keyframes marquee {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-100vw);
    }
}

.banner-top {
    display: flex;
    width: max-content;
    animation: marquee 15s linear infinite;
    will-change: transform;
}

.banner-top a {
    /* height: 45px !important; */
    font-weight: 600;
    color: #383838;
    font-size: 13px;
    margin-top: 15px;
}

.banner-top {
    background: #fbaf3f;
    gap: 50px;
}

/* banner quytrinh */
.banner-quytrinh {
    position: relative;
}

.banner-qt {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 160vw;
    height: 48px;
    margin-left: -80vw;
    display: flex;
    align-items: center;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}

/* Banner vàng */
.banner-top-qt {
    background: #f5b13c;
    transform: translateY(-50%) rotate(5deg);
    z-index: 2;
}

/* Banner xanh */
.banner-bottom-qt {
    background: #38bdf8;
    transform: translateY(-50%) rotate(-3deg);
    z-index: 1;
}

/* Track chạy */
.banner-track-qt {
    display: flex;
    width: max-content;
    flex-shrink: 0;
}

.banner-track-qt span {
    display: flex;
    align-items: center;
    gap: 40px;
    font-size: 23px;
    font-weight: 700;
    text-transform: uppercase;
    white-space: nowrap;
    padding-right: 80px;
}

/* Chữ màu */
.banner-top-qt span {
    color: #fff;
}

.banner-bottom-qt span {
    color: #111;
}

/* Banner vàng chạy trái */
.banner-top-qt .banner-track-qt {
    animation: marqueeLeft 20s linear infinite;
}

/* Banner xanh chạy phải */
.banner-bottom-qt .banner-track-qt {
    animation: marqueeRight 20s linear infinite;
}

@keyframes marqueeLeft {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

@keyframes marqueeRight {
    from {
        transform: translateX(-50%);
    }

    to {
        transform: translateX(0);
    }
}

/* Mobile */
@media (max-width: 768px) {
    .section-banner {
        height: 220px;
    }


    .banner-track span {
        font-size: 20px;
        padding-right: 40px;
    }
}

.section-banner {
    position: relative;
    height: 250px;
}

/* top */
.mw-100 {
    max-width: 100% !important;
}

.header-top {
    position: relative;
    padding: 6px 0;
    background: #f2f2f2;
}

.box-flex {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}

.max-width, .wrap-content {
    margin: 0px auto;
    max-width: 1200px;
}

.header-top marquee {
    width: 35%;
    font-size: 14px;
    color: #333;
    font-weight: 400;
}

.box-inf {
    width: 50%;
}

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

ul.menu-side li {
    flex-grow: 1;
    text-align: center;
    position: relative;
    margin: 0 0.4rem;
}

ul.menu-side li a {
    color: black;
}

.btn-search i {
    font-weight: bold;
    /* color: #fff; */
}

.header p.inf {
    position: relative;
    display: flex;
    margin: 0;
    align-items: center;
    padding-left: 44px;
    position: relative;
}

.header p a {
    color: var(--tiu, #333);
    font-family: Roboto;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.header p span strong, .header p.hotline span {
    color: var(--ch-o, #13aa41);
    font-family: "UTM Impact";
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 18px;
}

.header p span {
    display: block;
    font-size: 16px;
    color: #666666;
    font-weight: 400;
}

.header p.hotline:after {
    content: "";
    position: absolute;
    width: 39px;
    height: 39px;
    left: 0;
    top: 50%;
    background: url(../images/phone.png);
    transform: translateY(-50%);
}

/* menu */
.header-bottom .menu {
    position: sticky;
    z-index: 10;
    padding: 0px 10px;
}

.header-bottom .menu {
    position: sticky;
    top: 0;
    z-index: 998;
    width: 100%;
}

.header-bottom .box-menu-left {
    position: relative;
    width: 240px;
    text-align: center;
    z-index: 9;
}

.header-bottom .box-menu-left::after {
    content: "";
    position: absolute;
    top: 54px;
    left: 0;
    width: 100%;
    height: 10px;
}

.header-bottom .title-menu-bar {
    display: flex;
    height: 54px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-radius: 10px 10px 0px 0px;
    background: #00A652;
    background: linear-gradient(182deg, rgba(0, 166, 82, 1) 0%, rgba(4, 124, 63, 1) 100%);
}

.header-bottom .title-menu-bar p {
    margin: 0;
    color: var(--trng, #fff);
    font-size: 16px;
    font-weight: 600;
}

.header-bottom .menu-left {
    position: absolute;
    z-index: 19;
    top: 64px;
    left: 0;
    right: 0;
    border: 1px solid #e8e8e8;
    border-radius: 10px;
    background: #ffffff;
    /* display: none; */
    /* opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
  transition:
    opacity 0.3s ease,
    transform 0.3s ease,
    visibility 0.3s ease; */
    padding: 3px;
}

.header-bottom .menu-left > ul {
    margin: 0px;
    width: 100%;
    font-size: 14px;
    transition: 0.4s all;
}

.header-bottom .menu-left > ul {
    max-height: 422px;
    height: 422px;
    overflow: auto;
    padding: 8px 0px 12px 4px;
    direction: rtl;
    background-color: white;
}

.header-bottom .box-menu-left ul li {
    list-style: none;
    border-top: none;
    padding: 0 0;
    text-align: left;
    direction: ltr;
}

.header-bottom .box-menu-left ul li a {
    position: relative;
    display: block;
    color: black;
    font-size: 14px;
    text-transform: uppercase;
    padding: 10px 8px;
    padding-left: 0px;
}

.header-bottom .box-menu-left ul > li > a:after {
    content: "";
    position: absolute;
    width: calc(100% - 11px);
    height: 1px;
    left: 0;
    bottom: 0;
    background: #e2e2e2;
}

.header-bottom .menu-left > ul > li.has-child > a {
    padding-right: 28px;
}

.header-bottom .menu-left > ul > li.has-child > a::before {
    content: "";
    position: absolute;
    top: 50%;
    right: 10px;
    width: 6px;
    height: 6px;
    border-top: 1.5px solid #555;
    border-right: 1.5px solid #555;
    transform: translateY(-50%) rotate(45deg);
}

.header-bottom .box-menu-left ul li:hover .box-menu-cat {
    display: block;
}

.header-bottom .box-menu-cat {
    padding: 7px 0;
    position: absolute;
    top: 0;
    left: 100%;
    z-index: 2;
    background: #fff;
    min-width: 375px;
    box-shadow: -3px 0px 10px -2px #00000059;
    border-radius: 0px 8px 8px 0px;
    /* thay cho min-height + display: none */
    max-height: 0;
    min-height: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateX(-10px);
    transition: max-height 0.4s ease, opacity 0.3s ease, transform 0.4s ease;
}

.header-bottom .box-cat {
    position: relative;
    width: 100%;
    max-height: 458px;
    overflow: auto;
    direction: rtl;
}

.header-bottom .box-menu-cat ul {
    padding: 0;
    /* padding: 10px 0; */
}

.header-bottom .menu ul li ul li {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    max-height: 48px;
}

.header-bottom .box-menu-left ul li ul li a {
    font-size: 15px;
    font-weight: 400;
    padding: 9px 20px;
    border-bottom: 1px solid #e2e2e2;
}

.header-bottom .box-cat ul li a::after {
    /* background: url(../images/main/arrow.png) center center no-repeat; */
}

.header-bottom .menu-right {
    width: calc(100% - 214px);
}

.header-bottom .list-tc {
    display: flex;
    grid-gap: 20px;
    padding-left: 50px;
}

.header-bottom .tieuchi {
    text-align: left;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    flex-grow: 1;
}

.header-bottom .tieuchi .img {
    display: flex;
    align-items: center;
    justify-content: center;
}

.header-bottom .tieuchi .img img {
    max-width: 16px;
}

.header-bottom .tieuchi .content {
    padding: 0;
    width: calc(100% - 16px);
    padding-left: 5px;
}

.header-bottom .tieuchi .content h2 {
    margin: 0;
    text-transform: capitalize;
    -webkit-line-clamp: 1;
    color: #fff;
    font-family: Roboto;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

/* slide show */
.slideshow {
    max-width: 949px;
    margin: 0 0 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: start;
    margin-top: 12px;
}

.banner .item.col-4 {
}

.banner .item .slide-inner .item {
    border-radius: 10px;
}

.banner .item .slide-inner .item img {
    border-radius: 10px;
    /* width: 100%; */
}

/* brand */
.wrap-brand {
    padding: 60px 0px;
}

.container-custom {
    padding: 0px 10px;
    margin: 0px auto;
}

.title-h2 {
    position: relative;
    margin-bottom: 20px;
    text-align: center;
    border-bottom: 2px solid #13aa41;
}

.title-h2 h2 {
    margin: 0px auto;
    text-transform: uppercase;
    color: #fff;
    text-align: center;
    font-family: "UTM Hanzel";
    font-size: 25px;
    font-style: normal;
    font-weight: 400;
    line-height: 25px;
    background: #13aa41;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 182px;
    height: 55px;
    position: relative;
}

.title-h2 h2:before {
    content: "";
    position: absolute;
    width: 30px;
    height: 100%;
    left: 100%;
    top: 0;
    background: #13aa41;
    clip-path: polygon(0 0, 0% 100%, 100% 0);
}

.title-h2 h2:after {
    content: "";
    position: absolute;
    width: 30px;
    height: 100%;
    right: 100%;
    clip-path: polygon(100% 0, 0% 100%, 100% 100%);
    top: 0;
    background: #13aa41;
}

.grid-brand {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-gap: 16px;
}

.brand {
    display: block;
    border: 1px solid #fff;
    box-shadow: 0 0 5px #d7cbcb;
    transition: 0.4s all;
}

/* sp ban chay */
.title-main {
    position: relative;
    text-align: center;
    margin-bottom: 20px;
}

.title-main span, .title-main h1 {
    text-transform: uppercase;
    padding: 0;
    color: var(--ch-o, #13aa41);
    text-align: center;
    font-family: "UTM Hanzel";
    font-size: 32px;
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    position: relative;
    display: inline-block;
}

/* .title-main span:before {
    content: "";
    position: absolute;
    width: 44px;
    height: 19px;
    top: 36%;
    left: calc(100% + 6px);
    transform: translateY(-36%);
    background: url(../images/title-mian.png) center center no-repeat;
}

.title-main span:after {
    content: "";
    position: absolute;
    width: 44px;
    height: 19px;
    top: 36%;
    right: calc(100% + 6px);
    transform: translateY(-36%) rotateY(180deg);
    background: url(../images/title-mian.png) center center no-repeat;
} */

/* sp cart  */
.product {
    height: 100%;
}

.product {
    display: block;
    position: relative;
    margin: 5px;
    padding: 10px;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.25);
    position: relative;
    height: 100%;
    cursor: pointer;
}

.product-pic {
    background: #fff;
    margin-bottom: 10px;
    display: block;
    position: relative;
    overflow: hidden;
    border-radius: 10px;
}

.product-cart2 {
    font-size: 15px;
    color: #fff;
    padding: 4px 23px;
    text-align: center;
    display: inline-block;
    min-width: 175px;
    border-radius: 50px;
    cursor: pointer;
    text-transform: capitalize;
    position: absolute;
    bottom: -100%;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    visibility: hidden;
    background: linear-gradient( 90deg, rgba(19, 170, 65, 1) 0%, rgba(133, 217, 191, 1) 100% );
    transition: 0.4s all;
}

.product-name {
    margin-bottom: 5px;
    font-weight: normal;
}

.product-name a {
    color: var(--tiu, #333);
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 25px;
    text-transform: uppercase;
}

.product-price {
    color: #555;
}

.price-new {
    display: inline-block;
    margin-right: 10px;
    color: var(--ch-o, #E30000);
    /* text-align: center; */
    font-size: 17px;
    font-style: normal;
    font-weight: 700;
    line-height: 25px;
}

.product:hover .product-cart2 {
    bottom: 20px;
    transition: 0.4s all;
    opacity: 1;
    visibility: visible;
}

/* product list */
.wrap-prolist {
    padding: 30px 0 0;
}

.title-list {
    display: flex;
    margin-bottom: 1.5rem;
    align-items: center;
    justify-content: center;
}

.title-list span {
    color: var(--ch-o, #13aa41);
    font-family: "UTM Hanzel";
    font-size: 28px;
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    text-transform: uppercase;
    display: inline-block;
    padding-right: 50px;
    position: relative;
}

.title-list span:after {
    content: "";
    position: absolute;
    width: 44px;
    height: 19px;
    top: 33%;
    right: -3px;
    transform: translateY(-33%) rotateY(180deg);
    background: url(../images/title-mian.png) center center no-repeat;
}

.title-list p.line {
    flex: 1;
    margin-bottom: 0;
    border: 1px solid #13aa41;
}

.brand-group {
    display: flex;
    justify-content: space-between;
    align-items: start;
    margin-bottom: 20px;
}

.slide-brand {
    width: 79.83%;
}

.photo-brand {
    width: 19.16%;
    margin-top: 5px;
}

/* review */
.wrap-fb {
    padding: 30px 0 30px;
}
.wrap-fb > .container {
    position: relative;
}
.customer-review-head {
    margin-bottom: 28px;
}
.customer-review-head h2 {
    color: #009846;
    font-size: 28px;
    font-weight: 800;
    text-transform: uppercase;
}
.customer-review-slider {
    width: calc(100% - 150px);
    margin: 0 auto;
}
.customer-review-slider .owl-stage {
    display: flex;
    padding: 3px 0 18px;
}
.customer-review-slider .owl-item {
    display: flex;
}
.customer-review-card {
    width: 100%;
    min-height: 155px;
    padding: 18px;
    border: 1px solid #ededed;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 3px 12px rgba(0, 0, 0, .12);
}
.customer-review-avatar {
    flex: 0 0 46px;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    object-fit: cover;
}
.customer-review-person h3 {
    color: #222;
    font-size: 18px;
    font-weight: 600;
}
.customer-review-person p {
    color: #aaa;
    font-size: 16px;
    font-weight: 500;
}
.customer-review-text {
    color: #666;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.55;
    margin-top: 13px;
}
.customer-review-nav {
    position: static;
    margin: 0;
}
.customer-review-nav button.owl-prev,
.customer-review-nav button.owl-next {
    position: absolute;
    top: 50%;
    display: flex;
    width: 34px;
    height: 34px;
    align-items: center;
    justify-content: center;
    margin: 0;
    border-radius: 8px;
    background: #f0f0f0;
    color: #333;
    font-size: 24px;
    /* transform: translateY(-65%); */
    transition: color .25s ease, background-color .25s ease;
    border: 0;
}
.customer-review-nav button.owl-prev { left: 0; }
.customer-review-nav button.owl-next {
    right: 0;
    background: #009846;
    color: #fff;
}
.customer-review-nav button:hover {
    background: #007d39;
    color: #fff;
}
.customer-review-nav button svg {
    width: 18px;
    height: 18px;
}
.customer-review-nav button.owl-next svg {stroke: white}
.box-flex-fb {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.fb-left {
    width: 52%;
}

.fb-right {
    width: 43%;
}

.img-fb {
    border-radius: 15px;
    background: var(--trng, #fff);
    box-shadow: 0px 0px 8.1px 0px rgba(0, 0, 0, 0.25);
}

.desc-fb {
    padding-left: 35px;
    position: relative;
}

.desc-fb p {
    color: var(--tiu, #333);
    text-align: justify;
    font-family: Roboto;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 30px;
    -webkit-line-clamp: 6;
}

.desc-fb:after {
    content: "";
    position: absolute;
    width: 3px;
    height: 100%;
    background: #13aa41;
    left: 0;
    top: 0;
    border-radius: 50px;
}

.flex-fb {
    display: flex;
    align-items: center;
}

.img-fb2 {
    border-radius: 50%;
}

.content-fb {
    padding-left: 10px;
}

.content-fb span {
    color: var(--tiu, #333);
    font-family: Roboto;
    font-size: 15px;
    font-style: normal;
    font-weight: 600;
    line-height: 25px;
}

/* video section */
.video-main {
    position: relative;
    height: 380px;
}

.pic-video-2 {
    position: relative;
    cursor: pointer;
    display: block;
    padding-top: calc(340 / 380 * 100%);
    border-radius: 30px;
}

.pic-video-2:before {
    content: "";
    position: absolute;
    width: 358px;
    height: 318px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    background: url(../images/rec.png) no-repeat center center;
    cursor: pointer;
    background-size: cover;
    pointer-events: none;
}

.pic-video-2 img {
    position: absolute;
    inset: 0px;
    width: 100%;
    height: 100% !important;
    object-fit: cover;
    max-height: 380px;
}

.wrap-video {
    padding: 40px 0;
}

/* he thong */
.wrap-hethong {
    /* margin-bottom: 50px; */
    /* padding-bottom: 50px; */
}

.box-branch {
    padding-bottom: 40px;
}

.grid-branch {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 26px;
}

.branch {
    border-radius: 15px;
    background: var(--trng, #fff);
    box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.25);
}

.branch .img-branch a {
    border-radius: 15px 15px 0 0;
}

.img-branch a {
    display: block;
}

.branch .content-branch {
    padding: 12px 20px;
}

.content-branch a.title-branch {
    color: var(--ch-o, #13aa41);
    font-family: Roboto;
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: 25px;
    text-transform: uppercase;
    display: inline-block;
    margin-bottom: 10px;
}
.wrap-hethong {
    padding: 28px 0 0px;
    background: #f8f8f8;
}
.store-system-title {
    margin-bottom: 22px;
}
.store-system-title h2 {
    color: #009846;
    font-size: 27px;
    font-weight: 800;
    text-transform: uppercase;
}
.store-system {
    /* max-width: 1050px; */
    /* margin: 0 auto; */
}
.store-map {
    min-height: 470px;
    overflow: hidden;
    border-radius: 8px;
    background: #e8e8e8;
}
.store-map-panel {
    display: none;
    width: 100%;
    height: 100%;
}
.store-map-panel.active { display: block; }
.store-map-panel iframe {
    display: block;
    width: 100% !important;
    height: 470px !important;
    border: 0;
}
.store-list {
    max-height: 470px;
    overflow-x: hidden;
    overflow-y: auto;
    padding-right: 5px;
}
.store-item {
    padding: 0 0 12px;
    margin-bottom: 12px;
    border-bottom: 1px solid #ededed;
    cursor: pointer;
    transition: background-color .25s ease;
}
.store-item:hover,
.store-item.active {
    background: #f1fff7;
}
.store-photo {
    width: 43%;
    height: 135px;
    overflow: hidden;
    border-radius: 6px;
    background: #eee;
    cursor: pointer;
}
.store-photo img {
    display: block;
    object-fit: cover;
    transition: transform .3s ease;
}
.store-item:hover .store-photo img { transform: scale(1.035); }
.store-info h3 {
    color: #E76657;
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
}
.store-content {
    color: #222;
    font-size: 12px;
    line-height: 1.45;
}
.store-content p { margin-bottom: 3px; }
.store-direction {
    margin-top: 5px;
    padding: 5px 14px;
    border-color: #075de8;
    background: #075de8;
    font-size: 12px;
    font-weight: 500;
}
.store-direction:hover {
    border-color: #009846;
    background: #009846;
    color: white !important;
}
.store-criteria {
    margin-top: 24px;
    padding: 26px 0 22px;
    /* border-top: 1px solid #e4e4e4; */
    border-bottom: 1px solid #dedede;
}
.store-criteria > .col + .col .store-criterion {
    border-left: 1px solid #dedede;
}
.store-criterion-icon {
    width: 50px;
    height: 50px;
    margin-bottom: 8px;
    border: 1px solid #00a651;
    border-radius: 50%;
}
.store-criterion-icon img {
    width: 37px;
    height: 37px;
    object-fit: contain;
}
.store-criterion h3 {
    color: #333;
    font-size: 16px;
    font-weight: 600;
}
.store-criterion p {
    font-weight: 500;
    color: #aaa;
    font-size: 14px;
}


/* footer */
.footer {
    background: #f7f7f7;
}
.footer-top {
    padding-bottom: 28px;
    border-bottom: 1px solid #ddd;
}
.footer-company-logo img {
    display: block;
    width: auto;
    max-width: 140px;
    height: 70px;
    object-fit: contain;
}
.footer-company h2 {
    margin: 0 0 14px;
    color: #333;
    font-size: 18px;
    font-weight: 600;
    text-transform: uppercase;
}
.footer-company,
.footer-company-content {
    color: #333;
    font-size: 12px;
    line-height: 1.7;
}
.footer-company-content p { margin-bottom: 5px; }
.footer-social a {
    display: flex;
    width: 30px;
    height: 30px;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    /* border: 1px solid #00a651; */
    border-radius: 50%;
    transition: transform .2s ease;
}
.footer-social a:hover { transform: translateY(-2px); }
.footer-social img {
    width: 30px;
    height: 30px;
    object-fit: contain;
}
.footer-banner {
    /* border: 3px solid #8a3ffc; */
    /* border-radius: 12px; */
}
.footer-banner img {
    display: block;
    aspect-ratio: 650 / 365;
    object-fit: cover;
    transition: transform .35s ease;
}
.footer-banner:hover img { transform: scale(1.025); }
.footer-product-menu {
    padding: 26px 0 8px;
}
.footer-product-menu h3 {
    margin: 0 0 12px;
    font-size: 16px;
    font-weight: 600;
}
.footer-product-menu h3 a { color: #00a651; }
.footer-product-menu li {
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 500;
}
.footer-product-menu li a {
    color: #333;
    transition: color .2s ease, padding-left .2s ease;
}
.footer-product-menu li a:hover {
    padding-left: 3px;
    color: #00a651;
}
.footer-powered {
    border-top: 1px solid #ddd;
    background: #f7f7f7;
}
.footer-powered .row {
    justify-content: center !important;
}
.footer-copyright {
    color: #444;
    font-size: 14px; font-weight:500;
    text-align: center;
}
.footer-statistic { display: none !important; }
.contact-ft {
    max-width: 1120px;
    margin: -120px auto 40px;
    border-radius: 10px;
    background: var(--nhn, #85d9bf);
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.25);
    padding: 50px 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.contact-ft a {
    display: flex;
    width: 184px;
    height: 71px;
    align-items: center;
    justify-content: center;
    background: #13aa41;
    border-radius: 5px;
    border: 1px solid var(--nhn, #85d9bf);
    background: var(--ch-o, #13aa41);
    color: #fff;
    font-family: Roboto;
    font-size: 17px;
    font-style: normal;
    font-weight: 700;
    line-height: 25px;
}

.content-contact-ft span {
    color: var(--tiu, #333);
    font-family: "UTM Hanzel";
    font-size: 31px;
    font-style: normal;
    font-weight: 400;
    line-height: 25px;
    display: inline-block;
    margin-bottom: 20px;
}

.content-contact-ft p {
    color: var(--tiu, #333);
    font-family: Roboto;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 25px;
    margin-bottom: 0;
}

.footer {
    position: relative;
    /* padding-top: 40px; */
    /* margin-top: 60px; */
}

.footer-content:last-child {
    max-width: 288px;
}

.gallery-pro-detail .gallery-pro-detail-left {
    width: 100%;
    margin: 0px;
}

.gallery-pro-detail .slider-product-thumbs {
    width: calc(100% - 85px);
}

.item-detail {
    color: #8e8e8e;
    font-size: 14px;
    padding: 0px 1rem;
    position: relative;
}

.item-detail i {
    margin-right: 5px;
}

.item-detail:first-child {
    padding-left: 0px;
}

.item-detail:first-child:after {
    position: absolute;
    right: 0px;
    top: 3px;
    width: 1px;
    height: 14px;
    background: #8e8e8e;
    content: "";
}

.product-price-detail {
    background: #f5f5f5;
    padding: 12px 20px;
    border-radius: 6px;
}

/* cart product detail */
.cart-pro-detail {
    margin-bottom: 1rem;
    display: flex;
    align-items: flex-end;
    flex-wrap: nowrap;
    gap: 10px;
}

.attr-label-pro-detail {
    font-weight: 500;
    color: #474747;
    margin-bottom: 5px;
}

.quantity-pro-detail {
    margin-top: 10px;
    width: 100%;
    max-width: 140px;
    line-height: normal;
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: center;
    border: 2px solid #ddd !important;
    margin-right: 20px;
    border-radius: 15px;
    font-weight: 500;
    border: none;
    border-radius: 0px;
    border-radius: 5px;
}

.cart-pro-detail a.addnow { 
    color: var(--color-main);
}

.cart-pro-detail a {
    text-align: center;
    color: #fff;
    padding: 10px 20px;
    text-transform: capitalize;
    cursor: pointer;
    border-radius: 3px;
    font-weight: 500;
    font-size: 15px;
    line-height: 23px;
    border: 1px solid var(--color-main);
}

.cart-pro-detail a.buynow {
    background-color: var(--color-main);
}

.quantity-pro-detail span.quantity-minus-pro-detail {
    margin-right: -1px;
}

.quantity-pro-detail span {
    line-height: 25px;
    padding: 0;
    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 input {
    height: 33px;
    width: calc(100% - 72px);
    text-align: center;
    padding: 5px;
    border-radius: 3px;
    font-size: 16px;
    font-weight: normal;
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
    border-radius: 0;
}

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

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

.title-product-detail {
    background: #eeeeee;
    color: #1c1b19;
    padding: 12px 18px;
    border-radius: 3px;
    font-size: 17px;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 15px;
    width: 100%;
}

.fixed .menu-left {
    display: none;
    /* opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-8px); */
}

.box-menu-left:hover .menu-left {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

.header-bottom .box-menu-left ul li:hover .box-menu-cat {
    max-height: 458px;
    /* phải đủ lớn hơn chiều cao nội dung thực tế */
    min-height: 458px;
    opacity: 1;
    transform: translateX(0);
}

.not-home.menu-left {
    /* opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-8px); */
    display: none;
}

/* filter  */
.product-filter-scroll {
    width: 100%; 
    min-width: 0;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

.product-filter-scroll > .filter-item,
.product-filter-scroll > .search {
    flex: 0 0 auto;
}

.product-filter-scroll .filter-title {
    width: max-content;
    min-width: max-content;
    white-space: nowrap;
}

.product-filter-scroll.dropdown-open {
    flex-wrap: wrap;
    overflow: visible;
}

.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;
}

/* news */
.item-news {
    position: relative;
    padding-left: 20px;
}

.img-news a {
    border-radius: 15px 15px 0px 0px;
}

.item-news .date {
    display: inline-flex;
    width: 56px;
    height: 56px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background: #13aa41;
    border-radius: 50%;
    position: absolute;
    left: 0;
    top: 34px;
}

.item-news .date span {
    display: block;
    color: var(--trng, #fff);
    text-align: center;
    font-family: "UTM Hanzel";
    font-size: 19px;
    font-style: normal;
    font-weight: 400;
    line-height: 1;
}

.img-news .date strong {
    color: #fff;
    text-align: center;
    font-family: Roboto;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 1;
}

.content-news {
    padding: 10px 0px 0;
}

.content-news h3 {
    position: relative;
    padding-bottom: 6px;
}

.content-news h3 a {
    color: var(--tiu, #333);
    text-align: center;
    font-family: Roboto;
    font-size: 17px;
    font-style: normal;
    font-weight: 500;
    line-height: 25px;
}

.content-news h3:after {
    content: "";
    position: absolute;
    width: 30px;
    height: 2px;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
    border-radius: 100px;
    background: var(--ch-o, #13aa41);
}

.content-news p {
    color: var(--tiu, #333);
    text-align: center;
    font-family: Roboto;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 25px;
    -webkit-line-clamp: 2;
    margin-bottom: 0;
}

.scale-img3:before {
    content: "";
    position: absolute;
    top: 0;
    left: -90%;
    z-index: 10;
    display: block;
    width: 50%;
    height: 100%;
    background: -webkit-linear-gradient( left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 100% );
    background: linear-gradient( to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 100% );
    -webkit-transform: skewX(-25deg);
    transform: skewX(-25deg);
}

.scale-img3:hover:before {
}

.video-main .scale-img:hover:before {
    transition: 1s;
    left: 50%;
}

.content-branch a.title-branch:hover {
    color: var(--background-hover) !important;
}

/* new right */
.news-right {
    position: sticky;
    top: 61px;
    width: 100%;
    background: #f1f1f1cc;
    padding: 20px;
    box-shadow: 0px 0px 5px #99999978;
}

.ds-news h3 {
    margin: 0;
    line-height: 23px;
    color: #000;
    -webkit-line-clamp: 3 !important;
}

.ds-news .desc {
    color: #333;
    margin-bottom: 0px;
}

.item-news-all a {
    display: flex;
    justify-content: start;
    gap: 8px;
}

.item-news-all a .scale-img {
    max-width: 120px;
}

.item-news-all a .ds-news h3 {
    text-transform: capitalize;
    font-size: 15px;
}

.item-news-all a .scale-img {
    width: 120px;
    min-width: 120px;
}

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

.contact-ft a:hover, .footer-ul li a:hover {
    color: var(--background-hover) !important;
}

.title-brand {
    margin-bottom: 15px;
}

.title-brand span {
    color: var(--ch-o, #13aa41);
    font-family: "UTM Hanzel";
    font-size: 22px;
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    text-transform: capitalize;
    display: inline-block;
    position: relative;
}

.swiper-button-next, .swiper-button-prev {
    padding: 7px;
    background: rgb(0 0 0 / 20%);
    color: #fff;
    border-radius: 5px;
    box-shadow: unset;
}

.swiper-button-next:after, .swiper-button-prev:after {
    font-size: 20px;
}

.swiper-pro-detail .swiper-button-prev {
    left: 0px;
}

.swiper-pro-detail .swiper-button-next {
    right: 0px;
}

.swiper-pro-detail .swiper-button-prev, .swiper-pro-detail .swiper-button-next {
    top: calc(50% - 15px);
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgb(0 0 0 / 50%);
    border-radius: 5px;
    color: #fff;
}

.swiper-pro-detail .swiper-button-next:after, .swiper-pro-detail .swiper-button-prev:after {
    font-size: 15px;
}

.swiper-pro-detail .swiper-button-prev:hover, .swiper-pro-detail .swiper-button-next:hover {
    background: var(--color-main);
    color: #fff;
}

.badge.bg-light.fw-600.text-sm.text-dark {
    white-space: break-spaces;
}



.mySwiper-category { width: 100%; overflow: hidden; padding: 10px 5px 25px;}
.mySwiper-category .category-slide { text-align: center; height: auto;}
.mySwiper-category .category-slide > a {display: flex;flex-direction: column;align-items: center;justify-content: center;height: 100%;text-decoration: none;color: black;}
.mySwiper-category .image { width: 70px; height: 70px; margin: 0 auto 5px;}
.mySwiper-category .image img { width: 70px; height: 70px; object-fit: contain;}
.mySwiper-category .name {font-size: 14px;line-height: 20px;}
.mySwiper-category .category-pagination {bottom: 3px;}
.mySwiper-category .category-button-prev,
.mySwiper-category .category-button-next { position: absolute; top: 50%; transform: translateY(-50%); z-index: 10; width: 38px; height: 38px; border: 1px solid #ddd; border-radius: 50%;  background: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 2px 8px rgba(0, 0, 0, .12); transition: all .3s ease;}
.mySwiper-category .category-button-prev { left: 8px;}
.mySwiper-category .category-button-next {  right: 8px;}
.mySwiper-category .category-button-prev i,
.mySwiper-category .category-button-next i {  font-size: 14px; color: #333; transition: all .3s ease;}
.mySwiper-category .category-button-prev:hover,
.mySwiper-category .category-button-next:hover {  background: var(--color-main); border-color: var(--color-main);}
.mySwiper-category .category-button-prev:hover i,
.mySwiper-category .category-button-next:hover i { color: #fff;}
.category-item:hover {
    border: 1px solid var(--color-submain);
}

/* Best-selling product by two-level category */
.best-seller-section {
    padding: 20px 0;
    background: #eafff5;
}
.best-seller-box {
    padding: 14px 18px 20px;
    /* border: 2px solid #079cf3; */
    /* border-radius: 8px; */
    background: #fff;
}
.best-seller-heading {
    margin: 0 0 18px;
    color: #009846;
    font-size: 25px;
    font-weight: 800;
    text-align: center;
    text-transform: uppercase;
}
.best-seller-level-one {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-bottom: 16px;
}
.best-seller-list-tab {
    min-width: 112px;
    padding: 6px 16px;
    border: 1px solid #00a651;
    border-radius: 18px;
    background: #fff;
    color: #3d3d3d;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
}
.best-seller-list-tab.active,
.best-seller-list-tab:hover {
    background: #009846;
    color: #fff;
}
.best-seller-main {
    display: grid;
    grid-template-columns: 235px minmax(0, 1.25fr) minmax(250px, .95fr);
    grid-template-rows: auto auto;
    gap: 12px;
}
.best-seller-sidebar { grid-column: 1; grid-row: 1; }
.best-seller-products { display: contents; }
.best-seller-cat-group,
.best-seller-product-panel {
    display: none;
}
.best-seller-cat-group.active,
.best-seller-product-panel.active {
    display: block;
}
.best-seller-cat-tab {
    display: flex;
    width: 100%;
    min-height: 43px;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px 8px 16px;
    border: 0;
    border-bottom: 1px dashed #cfcfcf;
    background: #fff;
    color: #333;
    font-size: 16px;
    text-align: left;
    cursor: pointer;
    font-weight: 500;
}
.best-seller-cat-tab i {
    display: none;
}
.best-seller-cat-tab.active {
    border-bottom-color: transparent;
    border-radius: 8px;
    background: #009846;
    color: #fff;
    font-weight: 600;
}
.best-seller-cat-tab.active i {
    display: inline-flex;
    width: 22px;
    height: 22px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #fff;
    color: #009846;
    font-size: 11px;
}
.best-seller-product-panel.active {
    display: contents;
}
.best-seller-photo {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    min-height: 300px;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    /* border-radius: 70px 8px 8px 8px; */
    /* background: #ededed; */
}
.best-seller-photo img {
    width: 100%;
    height: 100%;
    max-height: 330px;
    object-fit: contain;
}
.best-seller-info {
    grid-column: 3;
    grid-row: 1 / span 2;
    padding: 18px;
    border: 1px solid #dedede;
    border-radius: 8px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .08);
}
.best-seller-info h3 {
    margin: 0 0 10px;
    color: #303030;
    font-size: 18px;
    font-weight: 600;
}
.best-seller-desc {
    max-height: 105px;
    overflow: hidden;
    color: #666;
    font-size: 13px;
    line-height: 1.55;
}
.best-seller-desc p:last-child { margin-bottom: 0; }
.best-seller-more {
    display: inline-flex;
    gap: 7px;
    align-items: center;
    margin: 10px 0 16px;
    color: #222;
    font-size: 14px;
    font-weight: 600;
}
.best-seller-specs h3 {
    margin: 0 0 10px;
    padding: 11px 14px;
    border-radius: 7px;
    background: #f5eeee;
    color: #303030;
    font-size: 17px;
    font-weight: 700;
}
.best-seller-spec-content,
.best-seller-specs p {
    margin: 0;
    color: #555;
    font-size: 12px;
    line-height: 1.5;
}
.best-seller-spec-content p,
.best-seller-spec-content li,
.best-seller-specs > p {
    padding: 6px 0;
    border-bottom: 1px dashed #d8d8d8;
}
.best-seller-empty {
    grid-column: 1 / -1;
    padding: 80px 20px;
    border-radius: 8px;
    background: #f5f5f5;
    color: #777;
    text-align: center;
}
.best-seller-banners {
    display: grid;
    grid-column: 1 / span 2;
    grid-row: 2;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}
.best-seller-banners a {
    display: block;
    overflow: hidden;
    border-radius: 7px;
}
.best-seller-banners img {
    display: block;
    width: 100%;
    aspect-ratio: 386 / 181;
    object-fit: cover;
    transition: transform .3s ease;
}
.best-seller-banners a:hover img { transform: scale(1.03); }
.best-seller-video-wrap {
    margin-top: 18px;
}

.home-product-section {
    margin-bottom: 18px;
    padding: 18px;
    border-radius: 10px;
    background: #fff;
}
.home-product-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}
.home-product-head h2 {
    margin: 0;
    color: #009846;
    font-size: 25px;
    font-weight: 800;
    text-transform: uppercase;
}
.home-product-head > a {
    color: #0044FF;
    font-weight: 500;
    font-size: 16px;
    transition: color .25s ease;
}
.home-product-head > a:hover {
    color: #009846;
}
.home-product-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 18px;
}
.home-product-tabs button {
    min-width: 112px;
    padding: 6px 14px;
    border: 1px solid #009846;
    border-radius: 18px;
    background: #fff;
    color: #444;
    font-weight: 500;
    font-size: 16px;
    cursor: pointer;
    transition: color .25s ease, background-color .25s ease, border-color .25s ease, transform .2s ease;
}
.home-product-tabs button.active,
.home-product-tabs button:hover {
    background: #009846;
    color: #fff;
}
.home-product-tabs button:hover {
    border-color: #007d39;
    transform: translateY(-1px);
}
.home-product-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    grid-auto-flow: row;
    gap: 10px;
}
.home-product-banner {
    grid-column: 1 / span 2;
    grid-row: 1 / span 2;
    min-height: 748px;
    overflow: hidden;
    border-radius: 8px;
}
.home-product-grid.banner-right .home-product-banner {
    grid-column: 4 / span 2;
}
.home-product-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .35s ease;
}
.home-product-banner:hover img { transform: scale(1.025); }

/* Home featured news */
.wrap-news {
    padding: 0px 0 24px;
    background: #effff7;
}
.home-news-banners {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;
    margin-bottom: 18px;
}
.home-news-banners a {
    display: block;
    overflow: hidden;
}
.home-news-banners img {
    display: block;
    width: 100%;
    aspect-ratio: 590 / 202;
    object-fit: cover;
}
.home-news-head {
    display: flex;
    align-items: center;
    gap: 26px;
    margin: 0 6px 18px;
}
.home-news-head .title-main {
    padding-right: 26px;
    border-right: 2px solid #aaa;
}
.home-news-head h2 {
    color: #009846;
    font-size: 28px;
    font-weight: 800;
    text-transform: uppercase;
}
.home-news-head > a {
    color: #075ede;
    font-size: 16px;
    font-weight: 500;
}
.home-news-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 16px;
}
.home-news-card {
    min-width: 0;
    padding: 7px;
    border-radius: 10px;
    background: #fff;
}
.home-news-image {
    display: block;
    overflow: hidden;
    border-radius: 8px;
}
.home-news-image img {
    display: block;
    width: 100%;
    aspect-ratio: 360 / 205;
    object-fit: cover;
}
.home-news-card h3 {
    margin: 7px 0 2px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
}
.home-news-card h3 a { color: #333; }

@media (max-width: 991.98px) {
    .home-news-banners { gap: 14px; }
    .home-news-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 575.98px) {
    .wrap-news { padding: 14px 0 18px; }
    .home-news-banners { grid-template-columns: 1fr; gap: 10px; margin-bottom: 16px; }
    .home-news-head { justify-content: space-between; gap: 12px; margin: 0 2px 14px; }
    .home-news-head .title-main { padding-right: 12px; }
    .home-news-head h2 { font-size: 20px; }
    .home-news-head > a { font-size: 13px; white-space: nowrap; }
    .home-news-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
    .home-news-card:last-child { grid-column: 1 / -1; }
    .home-news-card h3 { font-size: 13px; }
}

/* Flash Sale */
.home-flashsale { margin:20px 0; }
.home-flashsale .box-container {padding:16px;border-radius:10px;border: 3px solid var(--color-main);background: #F2FFF8;}
.flashsale-head {display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:14px;}
.flashsale-head h2 {position:relative;margin:0;overflow:hidden;font-size:27px;font-weight:800;font-style:italic;transition:transform .25s ease,filter .25s ease;}
.flashsale-head h2 img {display:block;max-width:100%;height:auto;animation:flashTitlePulse 2.4s ease-in-out infinite;}
.flashsale-head h2::after {content:"";position:absolute;top:-40%;left:-45%;width:22%;height:180%;transform:skewX(-22deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.75),transparent);animation:flashTitleShine 3.2s ease-in-out infinite;pointer-events:none;}
.flashsale-head h2:hover {transform:translateY(-2px);filter:drop-shadow(0 5px 6px rgba(193,0,3,.2));}
.flashsale-timer { display:flex; align-items:center; gap:5px; font-style:normal; }
.flashsale-timer span { margin-right:5px; font-weight:600; }
.flashsale-timer b {min-width:32px;padding:6px 5px;border-radius:5px;background: #333333;color: white;text-align:center;}
.flashsale-timer em {font-style:normal;font-weight:800;color: #333333;}
.flashsale-timer b:last-child {animation:flashSecondBeat 1s ease-in-out infinite;}
.flashsale-percent {margin-left:18px;animation:flashPercentFloat 2.6s ease-in-out infinite;transform-origin:center;}
.flashsale-percent img {display:block;max-width:72px;height:auto;filter:drop-shadow(0 5px 6px rgba(255,88,35,.28));}
@keyframes flashTitleShine {0%,56%{left:-45%;opacity:0}62%{opacity:1}82%,100%{left:125%;opacity:0}}
@keyframes flashTitlePulse {0%,100%{filter:brightness(1)}50%{filter:brightness(1.08)}}
@keyframes flashSecondBeat {0%,100%{transform:scale(1)}45%{transform:scale(1.07);background:#c10003}}
@keyframes flashPercentFloat {0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-7px) rotate(3deg)}}
@media (prefers-reduced-motion:reduce){.flashsale-head h2 img,.flashsale-head h2::after,.flashsale-timer b:last-child,.flashsale-percent,.flashsale-grid .home-product-card,.flashsale-grid .product-flashsale-badge{animation:none!important}}
.flashsale-tabs { justify-content:center; }
/* .flashsale-grid { overflow:hidden; } */
.flashsale-grid:not(.is-slider) .swiper-wrapper { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; transform:none !important; }
.flashsale-grid:not(.is-slider) .swiper-slide { width:auto !important; padding-bottom: 10px;}
.flashsale-grid:not(.is-slider) .swiper-pagination,
.flashsale-grid:not(.is-slider) .swiper-button-prev,
.flashsale-grid:not(.is-slider) .swiper-button-next { display:none; }
.flashsale-grid.is-slider { padding-bottom:32px; }
.flashsale-grid.is-slider .swiper-button-prev,
.flashsale-grid.is-slider .swiper-button-next { width:36px;height:36px;border:0;border-radius:50%;background:#fff;color:var(--color-main);box-shadow:0 2px 8px rgba(0,0,0,.18); }
.flashsale-grid.is-slider .swiper-button-prev::after,
.flashsale-grid.is-slider .swiper-button-next::after { font-size:15px;font-weight:800; }
.flashsale-grid.is-slider .swiper-pagination { bottom:2px; }
.flashsale-grid.is-slider .swiper-pagination-bullet-active { background:var(--color-main); }
.flashsale-grid .product { background:#fff; }
.flashsale-grid .home-product-card { position:relative; animation:flashProductReveal .55s ease both; transition:transform .3s ease,filter .3s ease; }
.flashsale-grid .home-product-card:nth-child(2){animation-delay:.06s}
.flashsale-grid .home-product-card:nth-child(3){animation-delay:.12s}
.flashsale-grid .home-product-card:nth-child(4){animation-delay:.18s}
.flashsale-grid .home-product-card:nth-child(5){animation-delay:.24s}
.flashsale-grid .home-product-card:hover { z-index:4; transform:translateY(-7px); filter:drop-shadow(0 10px 10px rgba(0,152,70,.2)); }
.flashsale-grid .home-product-card .product { transition:border-color .3s ease,box-shadow .3s ease; }
.flashsale-grid .home-product-card:hover .product { border-color:var(--color-main); box-shadow:0 0 0 2px rgba(0,152,70,.1); }
.flashsale-grid .product-pic img { transition:transform .4s cubic-bezier(.2,.7,.2,1); }
.flashsale-grid .home-product-card:hover .product-pic img { transform:scale(1.055); }
.flashsale-grid .product-flashsale-badge { animation:flashBadgePulse 1.8s ease-in-out infinite; }
@keyframes flashProductReveal { from{opacity:0;transform:translateY(18px) scale(.98)} to{opacity:1;transform:none} }
@keyframes flashBadgePulse { 0%,100%{filter:brightness(1);box-shadow:none} 50%{filter:brightness(1.15);box-shadow:0 0 0 4px rgba(193,0,3,.12)} }
/* .product-flashsale-badge { position:absolute; top:0; left:7px; z-index:3; padding:4px 8px; border-radius:0 5px 5px; background:#c10003; color:#fff; font-size:10px; font-weight:700; } */
.flashsale-detail { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:10px 0; padding:10px 12px; border-radius:7px; background:#c10003; color:#fff; }
.flashsale-detail strong { font-size:18px; font-style:italic; }
.flashsale-ended { display:none !important; }
.home-product-card {
    min-width: 0;
    margin-top: 10px; 
}
.home-product-card .product {
    display: flex; 
    width: 100%;
    min-width: 0;
    height: 100%;
    min-height: 0;
    flex-direction: column;
    margin: 0;
    padding: 0;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .06);
}
.home-product-card .product-pic {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    height: auto;
    /* aspect-ratio: 1 / .78; */
    margin-bottom: 0;
    padding: 14px 8px 4px;
    overflow: visible;
    border-radius: 7px 7px 0 0;
}
.home-product-card .product-pic > a,
.home-product-card .product-pic picture,
.home-product-card .product-pic .imageGallery {
    display: block;
    min-width: 0;
    max-width: 100%;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.home-product-card .product-pic img {
    display: block;
    min-width: 0;
    max-width: 100%;
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.home-product-card .product-info {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 5px 7px 7px;
}
.home-product-card .product-name {
    min-height: 36px;
}
.home-product-card .product-name a {
    font-size: 14px;
    line-height: 19px;
    text-transform: none;
}
.home-product-card .product-price {
    flex-wrap: wrap;
    margin-top: auto;
    margin-bottom: 5px;
}
.home-product-card .product-price p {
    margin-bottom: 0;
}
.home-product-card .price-new {
    margin-right: 4px;
    font-size: 16px;
    line-height: 18px;
}
.home-product-card .price-old {
    font-size: 12px;
}
.home-product-card .product-cart2 {
    display: none;
}
.home-product-card .product-discount-badge {
    position: absolute;
    top: -5px;
    left: 9px;
    z-index: 3;
    isolation: isolate;
    padding: 2px 8px;
    background: transparent;
    color: #fff;
    font-size: 12px;
    border-radius: 0 5px 5px;
    font-weight: 600;
    line-height: 1.1;
}
.home-product-card .product-discount-badge::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: #C10003;
}
.home-product-card .product-discount-badge::before {
    content: "";
    position: absolute;
    top: 0px;
    z-index: -2;
    left: -4px;
    width: 8px;
    height: 6px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='6' viewBox='0 0 8 6' fill='none'%3E%3Cpath d='M0 6L4 0L8 6H0Z' fill='%23910014'/%3E%3C/svg%3E") no-repeat center / contain;
}
.home-product-card .product-card-benefit {
    margin-top: 4px;
    padding: 3px 5px;
    overflow: hidden;
    border-radius: 3px;
    color: #7E7E7E;
    font-size: 10px;
    font-weight: 500;
    line-height: 1.1;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.home-product-card .benefit-student { background: #f1eaea; }
.home-product-card .benefit-installment {
    background: #eee8ff;
    color: #003EA5;
}
.home-product-card .product-card-actions {
    margin-top: 5px;
}
.home-product-card .product-card-actions button {
    height: 26px;
    border: 1px solid #00a651;
    border-radius: 5px;
    font-size: 12px;
    cursor: pointer;
    font-weight: 500;
    transition: color .25s ease, background-color .25s ease, border-color .25s ease, transform .2s ease;
}
.home-product-card .product-card-actions .btn-cart {
    width: 27px;
    padding: 0;
    background: #fff;
    color: #00a651;
}
.home-product-card .product-card-actions .btn-buy {
    background: #00a651;
    color: #fff;
}
.home-product-card .product-card-actions .btn-cart:hover {
    border-color: #007d39;
    background: #007d39;
    color: #fff;
}
.home-product-card .product-card-actions .btn-buy:hover {
    border-color: #007d39;
    background: #007d39;
}
.home-product-card .product-card-actions button:active {
    transform: scale(.96);
}

/* Promotion page */
.promotion-page { background: #e9fff4; }
.promotion-shell {
    position: relative;
    padding: 20px 16px 16px;
    border: 3px solid var(--color-main);
    border-radius: 13px;
    background: #F2FFF8;
}

.promotion-ribbon {
    position: absolute;
    top: 18px;
    right: 24px;
    z-index: 2;
    width: 34px;
    height: 42px;
    padding-top: 9px;
    background: linear-gradient(135deg, #ff3b30, #ffb14a);
    box-shadow: 0 3px 8px rgba(255, 59, 48, .3);
    color: #fff;
    font-size: 17px;
    font-weight: 800;
    text-align: center;
    transform: rotate(10deg);
    clip-path: polygon(0 0, 100% 0, 100% 72%, 50% 100%, 0 72%);
}
.promotion-tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin: 20px 0;
}
.promotion-tabs button {
    padding: 6px 16px;
    border: 1px solid var(--color-main);
    border-radius: 20px;
    color: #444;
    background-color: transparent;
    font-weight: 500;
    font-size: 16px;
    transition: .25s ease;
}
.promotion-tabs button.active,
.promotion-tabs button:hover { background: #009846; color: #fff; }
.promotion-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
}
.promotion-grid .home-product-card .product { background: #fff; }

@media (max-width: 991.98px) {
    .promotion-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 575.98px) {
    .promotion-shell { padding: 16px 9px 10px; }
    .promotion-header h1 { padding-right: 25px; font-size: 21px; }
    .promotion-ribbon { top: 10px; right: 10px; width: 27px; height: 34px; padding-top: 7px; font-size: 13px; }
    .promotion-tabs { justify-content: flex-start; flex-wrap: nowrap; margin: 16px 0; overflow-x: auto; scrollbar-width: none; }
    .promotion-tabs::-webkit-scrollbar { display: none; }
    .promotion-tabs button { min-width: max-content; }
    .promotion-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
}
.best-seller-video-wrap > h2 {
    margin: 0 0 18px;
    color: #009846;
    font-size: 24px;
    font-weight: 800;
    text-transform: uppercase;
}
.best-seller-video-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}
.best-seller-video-card {
    overflow: hidden;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, .18);
}
.best-seller-video-cover {
    position: relative;
    display: block;
    height: 430px;
    overflow: hidden;
    background: #222;
}
.best-seller-video-cover::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0, 0, 0, .25), transparent 30%, rgba(0, 0, 0, .1));
}
.best-seller-video-cover > img {
    width: 100%; 
    height: 100%;
    object-fit: cover;
    transition: transform .35s ease;
}
.best-seller-video-cover:hover > img { transform: scale(1.04); }
.best-seller-play {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    display: flex;
    width: 62px;
    height: 44px;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    background: #f00;
    color: #fff;
    font-size: 22px;
    transform: translate(-50%, -50%);
}
.best-seller-play i { margin-left: 3px; }
.best-seller-video-product {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 8px;
    align-items: center;
    min-height: 82px;
    padding: 8px;
}
.best-seller-video-product-photo img {
    display: block;
    width: 58px;
    height: 52px;
    object-fit: contain;
}
.best-seller-video-product h3 {
    margin: 0 0 4px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
}
.best-seller-video-product h3 a { color: #333; }
.best-seller-video-price {
    margin: 0;
    color: #f00;
    font-size: 13px;
    font-weight: 700;
}
.best-seller-video-price del {
    margin-left: 5px;
    color: #999;
    font-size: 10px;
    font-weight: 400;
}

.intro-nav {position: sticky;top: var(--nav-offset, 54px);right: 0px;left: 0px;z-index: 12;}
.intro-nav__item.active, .intro-nav__item.no-action {color: var(--color-main);font-weight: 600;border-color: var(--color-main);}
.intro-nav__item {display: flex;-webkit-box-pack: center;justify-content: center;-webkit-box-align: center;align-items: center;gap: 0.375rem;flex-shrink: 0;background-color: transparent;padding: 0.85rem 0rem;transition: 0.3s ease-out;border-width: 0px 0px 2px;border-style: none none solid;border-color: currentcolor currentcolor transparent;border-image: initial;text-transform: uppercase;}
.border-right {border-right:3px solid;}
.border-left {border-left:3px solid;}
.filter-counter {margin-left: 5px;}

/* Brand customer gallery */
.brand-overview-image {position: relative;overflow: visible;}
.brand-overview-logo {position: absolute;z-index: 2;top: 16%;left: 0;width: 90px;height: 90px;padding: 10px;transform: translateX(-50%);display: flex;align-items: center;justify-content: center;background: #fff;border: 1px solid var(--color-main);border-radius: 16px;box-shadow: 0 5px 18px rgba(0,0,0,.08);}
.brand-overview-logo img {width: 100%;height: 100%;object-fit: contain;transform: none !important;}
.brand-overview-logo:hover img {transform: none !important;}
.brand-customer-gallery {overflow: hidden;background: #fff;}
.brand-gallery-marquee {display: grid;gap: 14px;width: 100%;margin-top: 8px;}
.brand-gallery-row {overflow: hidden;}
.brand-gallery-track {display: flex;width: max-content;will-change: transform;animation: brand-gallery-forward 42s linear infinite;}
.brand-gallery-row-reverse .brand-gallery-track {animation-name: brand-gallery-reverse;animation-duration: 46s;}
.brand-gallery-marquee:hover .brand-gallery-track {animation-play-state: paused;}
.brand-gallery-group {display: flex;align-items: flex-end;flex-shrink: 0;gap: 14px;padding-right: 14px;}
.brand-gallery-row-reverse .brand-gallery-group {align-items: flex-start;}
.brand-gallery-item {display: block;flex: 0 0 auto;width: 284px;height: 151px;overflow: hidden;border-radius: 10px;}
.brand-gallery-item-2,.brand-gallery-item-4 {width: 503px;height: 268px;} 
.brand-gallery-item img {width: 100%;height: 100%;object-fit: cover;transition: transform .35s ease;}
.brand-gallery-item:hover img {transform: scale(1.04);}

@keyframes brand-gallery-forward {
    from {transform: translate3d(0, 0, 0);}
    to {transform: translate3d(-50%, 0, 0);}
}
 
@keyframes brand-gallery-reverse {
    from {transform: translate3d(-50%, 0, 0);}
    to {transform: translate3d(0, 0, 0);}
}
 
@media (max-width: 767px) {
    .brand-overview-logo {top: 12px;left: 12px;width: 70px;height: 70px;padding: 8px;transform: none;border-radius: 12px;}
    .brand-gallery-marquee,.brand-gallery-group {gap: 9px;}
    .brand-gallery-group {padding-right: 9px;}
    .brand-gallery-item {width: 198px;height: 105px;border-radius: 7px;}
    .brand-gallery-item-2,.brand-gallery-item-4 {width: 280px;height: 149px;}
    .brand-gallery-track {animation-duration: 32s;}
}

@media (prefers-reduced-motion: reduce) {
    .brand-gallery-track,.brand-gallery-row-reverse .brand-gallery-track {animation-play-state: paused;}
}

/* Brand policies */
.brand-policy-section {background: #fff;}
.brand-policy-layout {display: grid;grid-template-columns: minmax(220px, 30%) minmax(0, 1fr);gap: 28px;align-items: start;}
.brand-policy-tabs {display: grid;gap: 10px;}
.brand-policy-tab {width: 100%;padding: 15px 20px;border: 0;background: #f3f3f3;color: #555;font-weight: 700;text-align: left;cursor: pointer;transition: color .25s ease, background-color .25s ease;}
.brand-policy-tab:hover,.brand-policy-tab:focus-visible {color: var(--color-main);background: #e8f8ef;outline: none;}
.brand-policy-tab.active {color: #fff;background: var(--color-main);}
.brand-policy-content {min-width: 0;}
.brand-policy-panel {animation: brand-policy-fade .3s ease;}
.brand-policy-panel[hidden] {display: none;}
.brand-policy-panel h3 {margin: 0 0 14px;color: var(--color-main);font-size: 20px;font-weight: 800;}
.brand-policy-panel .content-text {color: #555;line-height: 1.7;}

@keyframes brand-policy-fade {
    from {opacity: 0;transform: translateY(5px);}
    to {opacity: 1;transform: translateY(0);}
}

@media (max-width: 767px) { 
    .brand-policy-layout {grid-template-columns: 1fr;gap: 20px;}
    .brand-policy-tabs {display: flex;gap: 8px;overflow-x: auto;padding-bottom: 4px;scrollbar-width: thin;}
    .brand-policy-tab {flex: 0 0 auto;width: auto;min-width: 180px;padding: 12px 15px;}
    .brand-policy-panel h3 {font-size: 18px;}
}

/* Product detail purchase actions and accessories */
.cart-pro-detail {flex-wrap: wrap;align-items: stretch;}
.cart-pro-detail .attr-content-pro-detail {flex: 0 0 100%;}
.cart-pro-detail a.buynow,.cart-pro-detail a.addnow {min-height: 54px;display: flex;align-items: center;justify-content: center;}
.cart-pro-detail a.buynow {flex: 1.2 1 250px;flex-direction: column;line-height: 1.25;}
.cart-pro-detail a.addnow {flex: 1 1 190px;}
.cart-pro-detail a.buynow strong {font-size: 16px;}
.cart-pro-detail a.buynow small {margin-top: 2px;font-size: 11px;font-weight: 400;text-transform: none;}
.buy-together-detail {margin: 4px 0 18px;overflow: hidden;}
.buy-together-title {display:flex;align-items:center;gap:10px;min-height: 55px;padding: 5px 6px;color:#33475b;background: #F2FFF8;border:2px solid var(--color-main);border-radius:18px;font-size: 16px;font-weight: 700;line-height:1.2;}
.buy-together-title span {font-size:28px;line-height:1;}
.buy-together-list {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:12px;}
.buy-together-item {position:relative;min-width:0;min-height: 92px;display:flex;align-items:center;gap: 7px;padding: 6px 8px;background:#fff;border:1px solid #e7e7e7;border-radius:16px;box-shadow:0 2px 8px rgba(0,0,0,.12);}
.buy-together-image {flex: 0 0 66px;width: 66px;height: 66px;display:flex;align-items:center;justify-content:center;overflow:hidden;}
.buy-together-image img {width:100%;height:100%;object-fit:contain;}
.buy-together-info {min-width:0;flex:1;padding-right: 36px;}
.buy-together-name {display:-webkit-box;overflow:hidden;color:#333;font-size: 14px;font-weight: 600;line-height:1.2;-webkit-box-orient:vertical;-webkit-line-clamp:2;}
.buy-together-prices {display:flex;flex-direction:column;align-items:flex-start;gap:1px;margin-top:5px;line-height:1.15;}
.buy-together-prices strong {color:#e60000;font-size: 14px;font-weight: 600;}
.buy-together-prices del {color:#999;font-size: 12px;} 
.buy-together-add {position:absolute;right: 7px;top: 71%;transform:translateY(-50%);padding:7px 13px;border:1px solid #dedede;border-radius:22px;background:#f8f8f8;color:var(--color-main);box-shadow:0 1px 4px rgba(0,0,0,.08);font-size: 12px;font-weight: 600;white-space:nowrap;cursor:pointer;}
.buy-together-add:hover {color:#fff;background:var(--color-main);border-color:var(--color-main);text-decoration:none;}
.buy-together-cart .buy-together-title {font-size:18px;}
.buy-together-cart .buy-together-list {grid-template-columns:1fr;} 
.buy-together-cart .buy-together-item {width:100%;} 
@media (max-width:575px) {
    .buy-together-list {grid-template-columns:1fr;}
    .cart-pro-detail a.buynow,.cart-pro-detail a.addnow {flex-basis:100%;}
    .buy-together-title {min-height:50px;padding:9px 16px;border-radius:14px;font-size:17px;}
    .buy-together-title span {font-size:23px;}
    .buy-together-item {min-height:105px;padding:10px;gap:8px;}
    .buy-together-image {flex-basis:72px;width:72px;height:72px;}
    .buy-together-info {padding-right:0;}
    .buy-together-name {padding-right:0;font-size:15px;}
    .buy-together-prices strong {font-size:17px;}
    .buy-together-prices del {font-size:13px;}
    .buy-together-add {position:static;transform:none;margin-top:5px;padding:5px 11px;font-size:13px;}
}

.header-menu a.dropdown:after {content: "";display: block;position: absolute;bottom: calc(50% - 3.5px / 2);right: -3px;width: 5px;height: 5px;border: 1px solid;border-top: 0px;border-left: 0px;-webkit-transform: rotate(45deg);transform: rotate(45deg);}
 .header-menu a.dropdown.active:after{ display:none;}
.header-menu .submenu{position:absolute;background-color:#fafafa;border-radius:.25rem;opacity:0;visibility:hidden}
.header-menu .submenu{display:flex;flex-wrap:wrap;list-style:none;min-width:900px;max-height:500px;overflow:auto;top:104%;padding:10px 5px;-webkit-box-shadow:1px 1px 15px rgba(0,0,0,.15);box-shadow:1px 1px 15px rgba(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;z-index: 999;}
.header-menu .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-menu .submenu ul{padding:0;list-style:none}
.header-menu .has-child ul.submenu>li{width:16.6666666667%}
.header-menu .has-child>ul.submenu>li{padding:0 5px;margin-bottom:5px}
.header-menu .has-child ul.submenu .list{padding:7px 0;font-weight:700;color:var(--color-main)}
.header-menu .has-child ul.submenu .cat{font-size:13px;padding:0}
.header-menu .has-child ul.submenu>li a{display:flex;align-items:center;padding:0}
.header-menu .has-child ul.submenu>li a:hover{color:var(--color-submain)}
.header-menu .has-child ul.submenu>li>a{margin:0 auto;background:0 0;border-radius:0}
.header-menu .has-child ul.submenu>li p{margin-bottom:0}


.sidebar .product {margin-top: 10px;}