@media (min-width:768px) {
    .container, .container-sm { max-width: 100% }
}

/* Responsive rules moved from style.css */
@media (prefers-reduced-motion: reduce) {
    .slideshow-text__btn, .slideshow-text__desc, .slideshow-text__subtitle, .slideshow-text__title { opacity: 1; transform: none; animation: none }
    .slideshow-text__btn::after { display: none }
    .tagsPro__list.is-marquee { animation: none }
    .ArcVsPartner .about-shine img, .about-hero__img, .about-history__media img, .about-intro__btn, .about-intro__collage, .about-shine:before, .about-stats__item, .about-values__item, .about-vm__img, .btn-cta, .about-intro__cta, .btn-custom, .home-news-card, .home-news-card__thumb img, .home-newsletter__btn, .card-post, .home-product-card, .home-product-card__thumb img, .home-products__btn, .home-service-card img, .home-why__item, .home-why__num, .home-why__visual img, .photoStatMain img, .slideshow-image img, .value-card__info--icon img, .year-item span { animation: none !important; transition: none !important; transform: none !important }
    .about-shine:hover:before { left: -90% }
    .header__hotline-icon svg, .header__hotline-icon::before, .Header__Nav-Btn-Link::after, .Header__Nav-Btn-Link svg { animation: none }
    .Header__Nav-Btn-Link:hover { transform: none; box-shadow: none }
}

@media (max-width: 991px) {
    .dtp-service-list { height: 360px; overflow-x: auto; scrollbar-width: none }
    .dtp-service-list::-webkit-scrollbar { display: none }
    .dtp-service, .dtp-service-item { height: 360px }
    .dtp-service-item { flex: 0 0 22vw }
    .dtp-service-item.active { flex: 0 0 70vw }
    .page-index .slideshow { margin: 0; padding-bottom: 12px; border-radius: 0 }
    .page-index .slideshow-image img { height: auto; aspect-ratio: 16/7 }
    .dtp-about h1 { font-size: 34px }
    .dtp-card__image { height: 180px }
    .dtp-video { height: 360px }
    .dtp-sectionbar h2 { font-size: 22px }
    .dtp-sectionbar a { font-size: 13px }
}

@media (max-width: 575px) {
    .dtp-service-list, .dtp-service, .dtp-service-item { height: 330px }
    .dtp-service-item { flex-basis: 28vw }
    .dtp-service-item.active { flex-basis: 78vw }
    .dtp-service strong { font-size: 17px }
    .dtp-about { padding: 25px 0 }
    .dtp-about h1 { font-size: 29px }
    .dtp-title { font-size: 25px }
    .dtp-card { padding: 4px }
    .dtp-card__image { height: 140px }
    .dtp-card h3 { min-height: 40px; font-size: 14px; line-height: 20px }
    .dtp-card__desc { display: none }
    .dtp-card__cta { font-size: 14px }
    .dtp-sectionbar h2 { font-size: 19px }
    .dtp-sectionbar a { font-size: 0 }
    .dtp-sectionbar a i { font-size: 15px }
    .dtp-video { height: 280px }
}
@media (min-width:1200px) {
    .category-lists .col-xl-2 { width: 14.28% }
    .category-lists span { max-width: 80% }
}
@media (min-width:1400px) {
    .container { max-width: 1215px }
}
@media (max-width:1299.98px) {
    .header-bottom .header-ul .line { margin: 0 5px }
    .search-wrapper.active { width: 200px }
}
@media (max-width:1199.98px) {
    ul.header-ul a {}
    .Header__Logo { margin-right: 10px; max-width: 200px; }
    .header-ul li:last-child { padding: unset; }
    .site-footer__title { font-size: 16px }
    .menu { display: none }
    .menu-bar-res { display: flex; align-items: center }
    .HeaderMenu__Mid-Category.CategoryWrap { position: static; }
    /* from style.css */
    .CategoriesCat__Item { width: calc(100% / 4 - 8px) }
    .left-pro-detail { width: 560px }
    .right-pro-detail { width: calc(100% - 590px) }
    .AboutUs__w { gap: 15px; }
    .gallery-pro-detail .slider-product-thumbs { height: 400px }
    .gallery-pro-detail .slider-products .item img { height: 400px !important; max-height: 400px }
    .gallery-pro-detail__nav.has-video .slider-product-thumbs { height: 318px }
    .FlashSale__List { grid-template-columns: repeat(4, minmax(0, 1fr)); padding-top: 48px }
}
@media (max-width:991.98px) {
    .dtp-featured {background-color: var(--color-red); background-image: none;}
    a#hamburger {}
    .Header__Nav-Btn-Link span { font-size: 14px;  }
    #hamburger span, .mm-wrapper_opening #hamburger:after, .mm-wrapper_opening #hamburger:before { top: 50%; transform: translateY(-50%); }
    #hamburger:before {top: 10px;}
    #hamburger:after {top: 28px;}
    section#Header { display: flex; align-items: center; justify-content: space-between; }
    #Header .Header__Nav-Top { display: none }
    #Header .Header__wrapper > .container { min-height: 64px }
    #Header .Header__Logo { flex-basis: 58px; width: 58px; margin-right: 0 }
    .header-nav .container { flex-direction: row-reverse; gap: 10px; }
    #hamburger {width: 40px;height: 40px;border-radius: 10px;}
    .header-nav .container .d-block #hamberger { display: flex !important; justify-content: center; align-items: center; flex-direction: column; }
    .Header__Nav { display: none !important }
    .Header__Logo { margin-right: 15px;max-width: 180px;flex-shrink: 0; }
    .header-ul li { padding-right: 10px; }
    .Header__Nav-Btn-Link { max-width: 170px; }
    .header-nav-mb { display: block !important; }
    .site-footer__grid { grid-template-columns: minmax(0, 1.5fr) repeat(2, minmax(0, 1fr)); gap: 28px 24px }
    .site-footer__brand { max-width: none }
    .site-footer__main { padding: 32px 0 28px }
    .site-footer__copyright { font-size: 13px; line-height: 18px }
    .HeaderMenu__Mid { display: none !important }
    .header-nav.header_nav_mobile { display: block }
    .HeaderTop__wrap.container { display: none }
    .home-section-head { flex-wrap: wrap; margin-bottom: 16px }
    .home-section-head__title { font-size: 20px }
    .project-accordion { height: 420px; gap: 8px }
    .project-accordion__name { font-size: 22px }
    .project-accordion__content { padding: 18px 16px 22px }
    .project-accordion__btn { min-width: 140px; height: 42px; font-size: 14px }
    .home-news__title { font-size: 24px; line-height: 36px; margin-bottom: 14px }
    .home-news__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px }
    .home-products__title { font-size: 24px; line-height: 36px; margin-bottom: 14px }
    .home-products__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 12px }
    .home-product-card { min-height: 0 }
    .home-product-card__thumb { height: 220px; padding: 24px 20px }
    .home-product-card__name { font-size: 16px; line-height: 20px }
    .home-product-card__desc { font-size: 14px; line-height: 18px }
    .home-products__more { margin-top: 22px }
    .home-services__title { font-size: 24px; line-height: 36px; margin-bottom: 14px }
    .home-service-card--lg .home-service-card__name { font-size: 16px; white-space: normal }
    .home-service-card--sm .home-service-card__name { font-size: 15px }
    .home-service-card__desc { font-size: 14px; line-height: 20px }
    .home-service-card--lg .home-service-card__bar { height: 70px }
    .home-why__title { font-size: 24px; line-height: 36px; margin-bottom: 14px }
    .home-why__body { grid-template-columns: 1fr; gap: 24px }
    .home-why__features { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-top: 0; justify-content: stretch }
    .home-why__item { max-width: none }
    .home-why__visual { width: 100%; max-width: 100%; margin: 0 auto -40px; transform: scale(.9); transform-origin: top center }
    .home-newsletter__inner { min-height: 0 }
    .home-newsletter__content { min-height: 0; padding: 28px }
    .home-newsletter__copy { max-width: none }
    .home-newsletter__title { font-size: 24px }
    footer.site-footer { margin-bottom: 51px }
    .home-newsletter__form { max-width: none }
    .home-newsletter__visual { width: 100%; min-height: 280px; margin-left: 0; clip-path: none }
    section#Header.fixed .HeaderTop__wrap, section#Header.fixed .tagsPro__Wrapper { display: none }
    .header-bottom .logo { max-width: 200px }
    .menu-wrapper:before { display: none }
    .header-nav {}
    .menu-wrapper { width: auto; border-radius: 10px }
    img { max-width: 100% !important; vertical-align: top }
    .about-hero__img, .slideshow-swiper .swiper-slide img, .slideshow-image img { width: 100% !important; height: 100% !important; object-fit: cover !important }
    .header-top { text-align: right }
    .header-top marquee { width: calc(100% - 150px); margin-right: 0 }
    .slideshow { width: 100%; padding-top: 8px }
    .slide-right { width: 100% }
    .footer-title { margin-bottom: 0 }
    .visao-item { margin: 0 0 20px 0 !important; max-width: 100% }
    #product-title { width: 100%; -webkit-line-clamp: 3 }
    .left-pro-detail { width: 560px; max-width: 100% }
    .right-pro-detail { width: calc(100% - 590px); padding: 0 }
    .camket-pro-detail { width: 100% }
    /* from style.css */
    .our-services__grid { grid-template-columns: repeat(2, 1fr); }
    .our-projects__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .form-consult { flex-direction: column; gap: 28px; }
    .form-consult__title { font-size: 32px; line-height: 1.3; }
    .form-consult__visual { border-radius: 24px; }
    .form-consult__visual img { height: auto; }
    .home-stats { padding: 32px 0; }
    .home-stats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 16px; }
    .about-page-stats .home-stats__grid { row-gap: 28px; }
    .about-page-stats .stat-item__divider { right: -8px; height: 100px; }
    .about-page-stats .stat-item:nth-child(2n) .stat-item__divider { display: none; }
    .about-criteria { justify-content: flex-start }
    .stat-item__num { font-size: 36px; line-height: 1.2; }
    .featured-news { flex-direction: column; gap: 24px; }
    .featured-news__divider { display: none; }
    /* from style.css */
    .slideshow-caption { align-items: flex-end; padding: 0 0 36px }
    .slideshow-text { max-width: 420px }
    .slideshow-text__title { font-size: 26px }
    .slideshow-text__subtitle { font-size: 28px }
    .slideshow-text__desc { font-size: 13px; line-height: 18px }
    .slideshow-text__btn { width: 180px; height: 38px; font-size: 11px; margin-top: 16px }
    .slideshow-swiper .swiper-slide::before { background: linear-gradient(180deg, rgba(0, 0, 0, .12) 18%, rgba(0, 0, 0, .42) 52%, rgba(0, 0, 0, .72) 100%) }
    .pro-detail-attr { flex-direction: column; align-items: flex-start }
    .pro-detail-cart__add, .pro-detail-cart__buy { flex: 1 1 100% }
    .pro-detail-footer { flex-direction: column; align-items: flex-start }
    .left-pro-detail, .right-pro-detail { width: 100% }
    .gallery-pro-detail { flex-direction: column-reverse; gap: 12px }
    .gallery-pro-detail__nav { width: 100%; flex-direction: row; align-items: center; gap: 10px }
    .gallery-pro-detail .slider-product-thumbs { width: auto; flex: 1; min-width: 0; height: auto !important }
    .gallery-pro-detail .slider-product-thumbs .item { padding: 0 5px }
    .gallery-pro-detail .slider-products .item img { height: auto; max-height: 420px }
    .bannerFlashSale { margin-bottom: -28px }
    .FlashSale__List { grid-template-columns: repeat(3, minmax(0, 1fr)); border-width: 4px; border-radius: 16px; padding: 40px 10px 14px; gap: 10px }
    .HeaderTop__wrap.widthBox { display: none }
    .HeaderMenu__Wrapper .padding-24 { padding: 8px 0 }
    .HeaderMenu__Logo { max-width: 100px }
}
@media (max-width:767.98px) {
    .dtp-sectionbar {
        margin-bottom: 10px;
    }
    .dtp-tabs {
        gap: 10px;
        padding: 0px 0 1px;
    }
    section#CustomerFeedback { padding: 20px 0 !important;margin-bottom: 10px !IMPORTANT; }
    section#ConsultForm { margin-bottom: 10px !important; }
    section#OurServices { margin-bottom: 20px !important; }
    .our-projects__grid { gap: 10px; }
    section#HomeStats { margin-bottom: 20px !IMPORTANT; }
    .featured-news__more.text-center.my-5 { margin: 0 0 20px 0 !IMPORTANT; }
    .site-footer__logo img {}
    .home-products__grid { grid-template-columns: repeat(2, minmax(0, 1fr)) }
    .HeaderTop__wrap.widthBox>* { display: none }
    .HeaderTop__wrap.widthBox .logo { display: block !important }
    .HeaderTop__wrap.widthBox .CartHeader { display: block }
    div#header { z-index: 1000; min-height: 46px }
    .search-wrapper .btn { width: 36px; background: 0 0 }
    .header-top marquee { width: calc(100%) }
    .search-wrapper.active { width: 100%; position: relative }
    .slideshow-swiper { width: 100% }
    .title-main { margin-bottom: 10px }
    .title-sanpham { margin: 0 0 5px !important }
    .wrap-cauhoi { background: 0 0 }
    .wrap-cauhoi .accordion { max-width: 100% }
    .doitac-item { padding: 10px }
    .wrap-newsletter .hotline { min-height: 135px; padding-left: 120px }
    .wrap-newsletter .hotline span { font-size: 20px; padding-bottom: 10px }
    .wrap-newsletter .hotline a { font-size: 35px; line-height: 40px }
    .footer { padding-bottom: 50px }
    .footer-ul { display: flex; flex-wrap: wrap; justify-content: space-between }
    .footer-ul li.line { display: none }
    .footer-ul li { width: 50% }
    .wrap-product-list .slider-product-thumbs, .wrap-product-list .slider-products { width: 100% }
    .wrap-product-list .slider-product-thumbs { margin-bottom: 30px }
    .product-item .image, .product-item .info { width: 100% }
    .footer-copyright, .footer-statistic { text-align: center }
    .vanhoa-item { max-width: 100% }
    #chuyenkhoaTabs .nav-item { width: 49.5%; margin-bottom: 3px }
    #chuyenkhoaTabs .nav-link { font-size: 14px; width: 100% }
    #chuyenkhoaTabs .nav-link img { width: 20px }
    .giatri-item .info { min-height: auto }
    .news-page__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); --news-gap: 18px }
    .news-item__name { font-size: 16px }
    .news-item .name { min-height: auto }
    .news-item .line { margin-top: 0 }
    .wrap-history { background: #f8f8f8 }
    .wrap-history .slider-for, .wrap-history .slider-nav { width: 100% }
    .attr-pro-detail, .camket-pro-detail { width: 100% }
    .left-pro-detail { margin: 0 auto }
    .left-pro-detail { width: 100% }
    .right-pro-detail { width: 100% }
    .menu-wrapper .menu-toggle { width: 54px }
    .menu-header { padding: 10px }
    .menu-header .btn-close-menu { border: 1px solid #e0e0e0; color: #333; line-height: 21px; padding: 7px 5px 7px 0; position: relative; text-align: right; width: 18px; height: 18px; border-radius: 50%; background-color: #6e6e6e }
    .menu-header .btn-close-menu::after, .menu-header .btn-close-menu::before { content: ""; position: absolute; width: 1px; top: 4px; left: 8px; background-color: #fff; height: 8px }
    .menu-header .btn-close-menu::before { transform: rotate(45deg) }
    .menu-header .btn-close-menu::after { transform: rotate(-45deg) }
    .menu-dropdown { display: flex; flex-direction: column; position: fixed; top: 0; right: -100%; left: auto; width: 100vw; height: 100vh; max-height: 100vh; overflow-y: auto; border: none; border-radius: 0; padding: 0; box-shadow: -2px 0 8px rgba(0, 0, 0, .3); transition: right .3s ease }
    .menu-dropdown.open { display: block !important; right: 0; z-index: 1002 }
    .menu-left { width: 100px; border-right: 0 }
    .menu-right { padding: 10px; background: #fff }
    .menu-panel .category-item { width: calc(100% / 3); padding: 0 }
    #thuong-hieu .category-item { width: calc(100% / 3 - 6px); padding: 0 }
    .site-footer__grid { grid-template-columns: 1fr; gap: 24px }
    .site-footer__main { padding: 28px 0 24px }
    .site-footer__title { font-size: 16px; margin-bottom: 14px }
    .site-footer__info a, .site-footer__info span, .site-footer__links a { font-size: 14px }
    .site-footer__copyright { font-size: 12px; line-height: 18px }
    .site-footer { padding-bottom: 0rem; margin-bottom: 0 !important }
    .site-footer__bottom { background: #062f66;  padding: 11px 0 89px;}
    /* from style.css */
    .CategoriesCat__Item { width: calc(100% / 4 - 8px) }
    .CategoriesCat__Thumb { width: 56px; height: 56px }
    .CategoriesCat__Thumb img { width: 56px; height: 56px }
    .filter-page-title { font-size: 20px; margin-bottom: 14px }
    .wrap-filter { gap: 6px }
    .wrap-filter .filter-title { padding: 8px 14px; min-height: 36px; font-size: 13px; gap: 8px }
    .wrap-filter .filter-title__icon { width: 18px; height: 18px }
    .wrap-filter .btn-filter.outline.gray { min-height: 32px; padding: 6px 12px; font-size: 12px }
    .filter-apply-btn { min-width: 140px; min-height: 36px; width: 100% }
    .filter-dropdown { min-width: min(320px, calc(100vw - 24px)); padding: 14px }
    .slideshow { margin-bottom: 0; padding-bottom: 12px }
    .slideshow-caption { align-items: flex-end; padding: 0 0 44px }
    .slideshow-caption .widthBox { padding-left: 16px; padding-right: 16px }
    .slideshow-text { max-width: 100% }
    .slideshow-text__title { font-size: 22px; line-height: 1.25; letter-spacing: -.01em }
    .slideshow-text__subtitle { font-size: 24px; line-height: 1.25; margin-top: 2px }
    .slideshow-text__desc { margin-top: 8px; font-size: 12px; line-height: 1.45; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; color: #d4d4d4 }
    .slideshow-text__btn { width: auto; min-width: 168px; max-width: 100%; height: 40px; padding: 0 18px; font-size: 11px; margin-top: 14px; border-radius: 2px }
    .slideshow-swiper .swiper-slide::before { background: linear-gradient(180deg, rgba(0, 0, 0, .08) 10%, rgba(0, 0, 0, .35) 42%, rgba(0, 0, 0, .78) 100%) }
    .slideshow-swiper .swiper-button-prev, .slideshow-swiper .swiper-button-next { display: none }
    .slideshow-swiper .swiper-pagination { display: block; bottom: 12px }
    section#FlashSale { margin: 16px 0 24px }
    .bannerFlashSale { margin-bottom: -20px; padding: 0 4px }
    .bannerFlashSale a, .bannerFlashSale img { border-radius: 10px }
    .FlashSale__List { grid-template-columns: repeat(2, minmax(0, 1fr)); border-width: 3px; border-radius: 14px; padding: 32px 8px 12px; gap: 8px }
    .FlashSale__List .name-product { font-size: 13px }
    .FlashSale__List .price-product { font-size: 13px }
    .w-md-100 { width: 100% !important; }
    .our-services__grid { grid-template-columns: repeat(1, 1fr); }
    .our-projects__grid { grid-template-columns: repeat(1, minmax(0, 1fr)); }
    .featured-news { flex-direction: column; gap: 24px; }
    .featured-news__divider { display: none; }
    .card-news-title:first-child { padding-top: 0; border-top: 1px solid #DFDFDF; }
}
@media (max-width:575.98px) {
    .form-consult__title { font-size: 28px; margin-bottom: 12px; }
    .form-consult__btn { height: 50px; font-size: 14px; }
    #quote-modal .modal-dialog { max-width: calc(100% - 24px); margin: 12px auto }
    #quote-modal .modal-body { padding: 24px 16px 18px }
    .quote-modal__title { font-size: 18px; margin-bottom: 14px }
    .home-stats { padding: 24px 0; }
    .stat-item__num { font-size: 28px; }
    .stat-item__label { font-size: 14px; }
    .project-accordion { height: 360px; gap: 6px }
    section.wrap-other.mb-4 { margin-bottom: .5rem !important }
    .project-accordion__name { font-size: 18px }
    .project-accordion__meta li { font-size: 13px }
    .project-accordion__content { padding: 14px 12px 16px }
    .project-accordion__btn { min-width: 120px; height: 38px; font-size: 13px; gap: 6px; padding: 0 14px }
    .home-news, .home-products, .home-services, .home-why { padding: 20px 0 }
    .home-products__title { font-size: 20px; line-height: 30px }
    .home-services__title { font-size: 20px; line-height: 30px }
    .home-why__title { font-size: 20px; line-height: 30px }
    .home-news__title { font-size: 20px; line-height: 30px }
    .home-news__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px }
    .home-news-card { min-height: 0 }
    .home-news__more { margin-top: 22px }
    .home-why__features { gap: 22px 12px }
    .home-why__name { font-size: 16px }
    .home-why__desc { font-size: 14px; line-height: 20px }
    .home-why__visual { height: auto; transform: scale(.72); transform-origin: top center; margin-bottom: -80px; }
    .home-product-card__thumb { height: 170px; padding: 16px 12px }
    .home-product-card__name { font-size: 14px; line-height: 18px }
    .home-product-card__desc { font-size: 13px; line-height: 16px }
    .home-products__btn { height: 40px; padding: 0 14px; font-size: 14px; gap: 10px }
    .home-products__btn img { width: 32px; height: 26px }
    .home-newsletter { padding: 24px 0 }
    .home-newsletter__content { padding: 24px 16px }
    .home-newsletter__title { font-size: 20px }
    .home-newsletter__visual { min-height: 220px }
    .search-wrapper { height: 36px; border-radius: 5px }
    .menu-left li { padding: 7px 5px }
    .gird-images { display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(3, 238px); grid-gap: 5px 5px }
    .box-images:nth-child(1) { grid-column: 1/3; grid-row: 1/2 }
    .gradient-title { width: 300PX }
    .cart .text-start { display: NONE }
    .wrap-uudai { padding-top: 1rem; transform: translateY(0) }
    .wrap-counter .num { display: none }
    .banner h2 { font-size: 20px }
    .btn-submain { font-size: 14px }
    header#header.fixed { position: relative }
    .title-main h2 { font-size: 22px }
    .title-main::before { font-size: 5rem; line-height: 65px }
    .wrap-diadiem-hot .service-list h2.name { font-size: 16px }
    .wrap-counter .num { font-size: 4.5rem }
    .wrap-counter .counter { font-size: 2.5rem }
    .wrap-service-list .service-list .name { font-size: 17px }
    .wrap-service-list .service-list .info h3 { font-size: 16px }
    .wrap-service-list .service-list .info .line { margin: 5px auto }
    .news-page__grid, .news-page--with-sidebar .news-page__grid { grid-template-columns: 1fr; --news-gap: 20px }
    .news-item__name { font-size: 16px }
    .news-item__desc { font-size: 13px }
    .news-item .name a { height: auto }
    .news-item .desc { font-size: 13px }
    .service-item .name { font-size: 18px }
    .service-item .desc { font-size: 14px }
    .item_history .name { font-size: 1.5rem }
    .item_year { font-size: 17px }
    #frm-newsletter { padding: 0 }
    .notify-popup { bottom: 85px }
    .news-item.list .image { width: 120px }
    .news-item.list .info { width: calc(100% - 120px); padding: 0 10px }
    .title-main h2, .title-main h3, .title-main h4 { white-space: normal !important }
    .choose-list button { font-size: 16px; margin-bottom: 5px; padding: 7px 15px 4px }
    .left-pro-detail { width: 100% }
    .khachhang-item { width: 300px }
    .accordion-button { font-size: 16px }
    .footer-payments { text-align: center }
    .item_history .desc { margin-bottom: 0; overflow: hidden; text-overflow: ellipsis; white-space: normal; -webkit-box-orient: vertical; display: -webkit-box; -webkit-line-clamp: 3 }
    .category-item { padding: 5px; width: calc(100% / 3) }
    .wrap-brand .brand-item, .wrap-doitac .brand-item { width: calc(100% / 3 - .5rem) }
    .filter-brand .filter-dropdown-item { width: calc(100% / 3 - .5rem) }
    .cart-fixed { bottom: 100px }
    .wrap-about .about-img { position: relative; text-align: left; padding-bottom: 20% }
    .wrap-about .about-img img:nth-child(2) { margin-left: 0; margin-top: 0; position: absolute; right: 0; top: 15% }
    .pro-info-main, .pro-news-sidebar { padding: 16px 14px 20px }
    .pro-info-main__title, .pro-news-sidebar__title, .pro-related__title { font-size: 18px }
    .pro-info-content#noidung { max-height: 420px }
    .pro-news-card__thumb img { height: 160px }
    .pro-related { padding: 16px 12px 12px }
    .gallery-pro-detail { flex-direction: column-reverse; gap: 12px }
    .gallery-pro-detail__nav { width: 100%; flex-direction: row; align-items: center; gap: 10px }
    .gallery-pro-detail .slider-product-thumbs { width: auto; flex: 1; min-width: 0 }
    .gallery-pro-detail .slider-products { width: 100% }
    .gallery-pro-detail .slider-products .item img { height: auto; max-height: 380px }
    /* from style.css */
    .slideshow-caption { padding: 0 0 40px }
    .slideshow-text__title { font-size: 20px }
    .slideshow-text__subtitle { font-size: 22px }
    .slideshow-text__desc { margin-top: 6px; font-size: 12px; line-height: 1.4; -webkit-line-clamp: 2 }
    .slideshow-text__btn { min-width: 156px; height: 38px; font-size: 10px; margin-top: 12px }
    .price-product { flex-wrap: wrap }
}
@media (max-width:380.98px) {
    .home-news__grid { grid-template-columns: 1fr; gap: 14px }
    .gallery-pro-detail .slider-product-thumbs .item a, .product-video-thumb { width: 64px; height: 64px }
    /* from style.css */
    .FlashSale__List { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 28px 6px 10px; gap: 6px }
}
@media (max-width:1199.98px) {
    .about-intro__title { font-size: 28px;line-height: 42px }
    .about-intro__grid { grid-template-columns: minmax(0, 1fr) minmax(240px, .9fr); gap: 20px 28px }
    .about-vm__title { font-size: 26px; line-height: 32px }
    .about-values__compass { column-gap: 20px }
    .product-listing { grid-template-columns: 240px minmax(0, 1fr); gap: 14px }
    .product-listing--figma { display: block }
    .product-listing__grid { grid-template-columns: repeat(3, minmax(0, 1fr)) }
    .product-card {width: auto;height: 376px;/* min-height: 376px; */}
    .product-listing__title { font-size: 26px; line-height: 36px }
    .product-card__body, .wrap-pro-detail .pro-news-card__name, .wrap-pro-detail .pro-news-card__thumb { width: 100%; max-width: 100% }
    .HeaderTop__SimpleInfo * { font-size: 14px !important }
}
@media (max-width:991.98px) {
    .AboutUs__Wrapper { padding: 10px 0 }
    .about-intro__eyebrow { margin-bottom: 10px }
    .about-intro__layout { grid-template-columns: 1fr; gap: 0 }
    .about-intro__vertical { display: none }
    .about-intro__grid { grid-template-columns: 1fr }
    .about-intro__visual { min-height: 0 }
    .about-intro__collage { margin: 0 auto; max-width: 480px }
    .about-intro__title { font-size: 25px;line-height: 36px }
    .about-vm { min-height: 0; padding: 60px 0 }
    .about-vm__content { min-height: 270px; padding: 28px 18px 22px }
    .about-vm__title { font-size: 25px; line-height: 32px }
    .about-values { padding: 36px 0 20px }
    .about-quote { padding: 40px 0 }
    .service-hero__grid { grid-template-columns: 1fr; gap: 24px }
    .service-hero__gallery { grid-template-columns: minmax(0, 1fr);gap: 10px; }
    .service-hero__thumbs { order: 2; width: 100%; height: auto }
    .service-body__grid { grid-template-columns: 1fr; gap: 24px }
    .service-body__main, .service-body__aside { padding: 16px 14px }
    .service-body__news { aspect-ratio: auto; height: auto; overflow: hidden }
    .service-body__news::after { display: none }
    .service-body__news-swiper { height: auto; -webkit-mask-image: none; mask-image: none }
    .service-body__news-swiper .swiper-slide { height: auto }
    .service-body__news-swiper .card-post { height: 100% }
    .about-quote__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 6% }
    .about-quote__item:nth-child(2n) .about-quote__head::before, .about-quote__item:nth-child(2n) .about-quote__head::after { display: none }
    .about-values__compass { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto auto; grid-template-areas: "core core" "lefttop righttop" "leftbottom rightbottom"; column-gap: 24px; row-gap: 24px }
    .about-values__core { width: 55%; height: 270px; margin: 0 auto }
    .about-values__item { text-align: center }
    .about-history__row { grid-template-columns: 1fr; gap: 20px }
    .about-history__media img { height: auto; aspect-ratio: 584 / 290 }
    .product-listing { grid-template-columns: 1fr }
    .product-cats { width: 100%; max-width: 100%; height: auto }
    .product-cats__item > a { min-height: 52px; height: auto; padding: 12px 16px 12px 22px }
    .product-cats__sub-item a { padding: 8px 12px 8px 20px }
    .product-cats__sub-item.is-active a, .product-cats__sub-item a:hover { padding-left: 24px }
    .product-listing__title { font-size: 24px; line-height: 34px; margin-bottom: 12px }
    .product-listing__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); justify-content: stretch }
    .product-tabs { gap: 10px; margin-bottom: 22px; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px }
    .product-tabs__item { flex: 0 0 auto; min-height: 36px; padding: 6px 13px; font-size: 14px }
    .product-card { width: auto; height: auto }
    section.StatWrapper { min-height: 0; --stat-curve: 32px; padding: 28px 0 20px }
    .Stat__List { gap: 12px; margin-bottom: 12px }
    p.about-stats__num { font-size: 36px }
    p.about-stats__label { font-size: 15px }
    .about-stats__item { padding: 18px 8px 10px }
    .photoStatMain { margin-bottom: 0 }
    .product-card__body { width: 100%; max-width: 100%; margin-top: 12px; gap: 8px }
    .product-cats__title { height: auto; min-height: 52px; padding: 10px 12px; font-size: 16px; line-height: 22px }
    .HeaderMenu__Wrapper .widthBox>.d-flex.padding-24 { width: 100%; min-width: 0; gap: 10px }
    .HeaderMenu__Logo, .HeaderMenu__Mid, .HeaderMenu__Search { min-width: 0 }
    .HeaderMenu__Mid { flex: 0 0 auto; gap: 10px !important }
    .HeaderMenu__Mid-List { display: none }
    .HeaderMenu__Mid-Category button, .HeaderMenu__Mid-Category button.CategoryDrop__btn { padding: 10px 14px; font-size: 13px; gap: 8px; white-space: nowrap }
    .HeaderMenu__Search, .HeaderMenu__Search .col-auto { flex: 1 1 auto; width: auto; max-width: none; padding: 0; min-width: 0 }
    .HeaderMenu__Search .search-wrapper.active, .search-wrapper.active { width: 100%; max-width: 100%; height: 44px; border-radius: 10px }
    .header-nav {
    width: 100%;
}
    section.ArcVsPartner .w-50 { width: 100% !important; max-width: 100% }
    section.ArcVsPartner .d-flex.align-items-center.space-40 { flex-wrap: wrap; gap: 20px }
    .partner__overlay:after, .partner__overlay:before { width: 56px; height: 90px }
    .news-page__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); --news-gap: 18px }
    .contact-map { position: relative; height: 280px }
    .title-main .title, .title-main-detail .title, .title-main-detail h2 { white-space: normal; overflow-wrap: anywhere }
    .time-main { gap: 6px; line-height: 1.45 }
    .meta-toc, .wrap-toc { max-width: 100%; overflow: hidden }
    .pro-detail-cta__phone, .pro-detail-cta__zalo { flex: 1 1 200px; width: auto; min-width: 0; max-width: 100% }
    .photoStatMain img { max-height: 260px; width: auto; margin: 0 auto; object-fit: contain }
    .news-load-more { white-space: normal; text-align: center; max-width: 100% }
    .pagination, .pagination-home { flex-wrap: wrap; justify-content: center }
    .wrap-history { overflow: hidden }
    .year-item span { font-size: 15px; height: 40px }
    h2.about-section-title.about-section-title--plain { font-size: 24px }
    .wrap-history .title-main .fs-30 { font-size: 22px }
    #hethongTabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; gap: 8px }
    #hethongTabs .nav-item { flex-shrink: 0; margin-right: 0 !important }
}
@media (max-width:767.98px) {
    .dtp-products {
        padding-bottom: 17px;
    }
    .about-hero__overlay { justify-content: center; padding: 24px 16px; background: linear-gradient(180deg, rgba(8, 20, 40, .2) 0, rgba(8, 20, 40, .65) 100%) }
    .about-intro { padding: 20px 0 20px }
    .about-intro__title { font-size: 24px; line-height: 32px }
    .about-intro__btn { width: 100%; max-width: 280px }
    .content-more { margin-top: 20px }
    .product-listing__grid { grid-template-columns: 1fr 1fr; gap: 16px 10px }
    .product-card {/* height: 350px; *//* min-height: 350px; */}
    .product-card__thumb { height: 180px }
    .product-card__name {font-size: 15px;line-height: 18px;height: 39px;}
    .product-card__desc { font-size: 13px; line-height: 18px }
    section.StatWrapper { --stat-curve: 22px; padding: 20px 0 0 }
    .Stat__List { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px }
    p.about-stats__num { font-size: 28px }
    p.about-stats__label { font-size: 13px }
    .about-values { padding: 30px 0 15px }
    .about-quote { padding: 32px 0 }
    .about-section-title { margin-bottom: 20px }
    section.ArcVsPartner .w-50 { width: 100% !important; max-width: 100% }
    section.ArcVsPartner .d-flex.align-items-center.space-40 { flex-wrap: wrap; gap: 20px }
    .partner__overlay:after, .partner__overlay:before { width: 40px; height: 80px }
    .wrap-history .title-main .fs-30 { font-size: 20px }
    .wrap-history .title-main h2 { font-size: 16px }
    .year-item span { font-size: 14px; height: 36px }
    .history-item .fs-20, .history-item .name h3 { font-size: 18px }
    .breadCrumbs { padding: 10px 0 4px }
    #toc-content img, .about-intro__more-text img, .content-more__text img, .content-main img, .content-text img { max-width: 100%; height: auto }
    #toc-content table, .content-main table, .content-text table { display: block; width: 100%; overflow-x: auto }
    .content-main iframe, .content-text iframe { max-width: 100% }
    .pro-detail-cta { flex-wrap: wrap; gap: 10px; padding-top: 18px }
    .pro-detail-cta__phone, .pro-detail-cta__zalo { width: calc(50% - 5px); min-width: 0; font-size: 15px; padding: 0 10px }
    .wrap-pro-detail .pro-news-card { width: 100%; max-width: 100% }
    #hethongTabs .nav-link { font-size: 13px; padding: 8px 12px; white-space: nowrap }
    .contact-form { margin-top: 8px }
    .brand-item .name { font-size: 13px; line-height: 18px }
    .wrap-filter { gap: 6px }
}
@media (max-width:575.98px) {
    .product-card__cta {font-size: 14px;}
    .about-vm { padding: 32px 0 }
    .about-vm__content { min-height: 0; padding: 24px 16px }
    .about-values__compass { grid-template-columns: 1fr; grid-template-rows: auto; grid-template-areas: "core" "lefttop" "righttop" "leftbottom" "rightbottom"; row-gap: 20px }
    .about-values__core { width: 72%; height: 230px }
    .about-values__name { font-size: 21px; line-height: 27px }
    .about-history { padding: 28px 0 32px }
    .about-quote__list { grid-template-columns: 1fr 1fr;gap: 24px }
    .about-quote__item:not(:last-child) .about-quote__head::before, .about-quote__item:not(:last-child) .about-quote__head::after { display: none }
    .about-quote__icon { width: 28% }
    .service-hero__fields { grid-template-columns: 1fr }
    .service-hero__hotline { width: 100%; justify-content: center }
    .about-quote__desc { max-width: 90% }
    p.about-stats__num { font-size: 24px }
    p.about-stats__label { font-size: 12px }
    .about-stats__item { padding: 14px 6px 8px }
    .about-intro__btn { height: auto; min-height: 44px; padding: 8px 14px; white-space: normal; text-align: center }
    .about-vm__title { font-size: 24px; line-height: 34px }
    .HeaderMenu__Logo { max-width: 100px }
    .HeaderMenu__Wrapper .widthBox>.d-flex.padding-24 { width: 100%; gap: 8px }
    .HeaderMenu__Mid-Category button, .HeaderMenu__Mid-Category button.CategoryBtn, .HeaderMenu__Mid-Category button.CategoryDrop__btn { font-size: 0; gap: 0; padding: 10px 12px; min-width: 44px; justify-content: center }
    .HeaderMenu__Mid-Category .CategoryBtn__chev { display: none }
    .HeaderMenu__Search {flex: 1 !important;max-width: 100% !important;margin: 0;}
    .HeaderMenu__Search .search-wrapper.active { max-width: none; width: 100%; height: 40px }
    .header__hotline-link { padding: 5px 12px 5px 5px; gap: 8px }
    .header__hotline-icon { width: 34px; height: 34px; flex-basis: 34px }
    .header__hotline-number { font-size: 15px }
    .product-listing__title { font-size: 20px; line-height: 28px }
    .news-page__head .title-main .title, .title-main-detail .title { font-size: 22px; line-height: 30px }
    .news-page__grid, .news-page--with-sidebar .news-page__grid { grid-template-columns: 1fr; --news-gap: 20px }
    .pro-detail-cta__phone, .pro-detail-cta__zalo { width: 100% }
    .contact-map { position: relative; height: 240px }
    .contact-form .contact-input { margin-bottom: 12px }
    .contact-form__row { grid-template-columns: 1fr }
    .contact-form .form-consult__btn, .contact-form__reset { flex: 1 1 100%; min-width: 0 }
    .brand-item .name { font-size: 12px; line-height: 16px }
}
@media (max-width:1199.98px) {
    .pro-detail-top { flex-wrap: wrap }
    .wrap-pro-detail .left-pro-detail, .wrap-pro-detail .right-pro-detail { width: 100% }
    .wrap-pro-detail .gallery-pro-detail { justify-content: center }
    .wrap-pro-detail .gallery-pro-detail .slider-products { max-width: 467px; width: 100% }
    .pro-detail-body.has-aside { grid-template-columns: minmax(0, 1fr) 320px }
    .pro-detail-aside, .pro-specs, .wrap-pro-detail .pro-news-sidebar { width: 100% }
    .pro-related__grid { grid-template-columns: repeat(4, minmax(0, 1fr)) }
    .wrap-pro-detail .pro-related .product-card { width: auto; height: auto; min-height: 375px }
}
@media (max-width:991.98px) {
    .pro-detail-top { flex-direction: column; gap: 20px }
    .wrap-pro-detail .gallery-pro-detail { flex-direction: column-reverse; gap: 12px }
    .wrap-pro-detail .gallery-pro-detail__nav { width: 100%; flex-direction: row; align-items: center; gap: 10px }
    .wrap-pro-detail .gallery-pro-detail .slider-product-thumbs { width: auto; flex: 1; min-width: 0; height: auto !important }
    .wrap-pro-detail .gallery-pro-detail__nav.has-video .slider-product-thumbs { height: auto !important }
    .wrap-pro-detail .gallery-pro-detail .slider-product-thumbs .item { padding: 0 5px }
    .wrap-pro-detail .gallery-pro-detail .slider-products { max-width: 100%; width: 100% }
    .wrap-pro-detail .gallery-pro-detail .slider-products .item img { height: auto !important; max-height: 420px }
    .wrap-pro-detail .pro-info-main { min-height: 0 }
    .wrap-pro-detail .pro-detail-desc { max-height: none }
    .pro-detail-cta { flex-wrap: wrap }
    .pro-detail-body, .pro-detail-body.has-aside { grid-template-columns: minmax(0, 1fr) }
    .pro-related__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); justify-content: stretch }
    .wrap-pro-detail .pro-related .product-card { width: auto; height: auto; min-height: 0 }
    .wrap-pro-detail .pro-related__title { font-size: 24px; line-height: 32px; margin-bottom: 20px }
    .wrap-pro-detail .pro-news-sidebar__list { flex-direction: row; flex-wrap: wrap; justify-content: center }
}
@media (max-width:900px) {
    .AboutUs__w { flex-wrap: wrap; flex-direction: column-reverse; }
    .AboutUs__Visual { width: 100% !important; }
    .about-intro__visual.about-shine { max-width: 100%; }
    .w-50.w-md-100.AboutUs__Content { width: 100% !IMPORTANT; }
}
@media screen and (max-width:768px) {
    .section-heading__eyebrow { font-size: 12px; }
    .Header__Nav-Btn-Link { max-width: 120px; padding: 15px 15px; }
    .Header__Nav-Btn-Link span { font-size: 13px; }
    .Header__Logo { max-width: 150px; }
    .site-footer__info li, .site-footer__links li { width: 100% !important }
    .site-footer__info, .site-footer__links { flex-direction: column; flex-wrap: nowrap; gap: 8px }
    .home-why__num { font-size: 20px; width: 50px; height: 50px; }
    .home-services__grid { display: flex; height: auto; flex-wrap: wrap }
    .home-service-card img { position: relative }
}
@media (max-width:575.98px) {
    .pro-detail-cta__phone, .pro-detail-cta__zalo { width: 100% }
    .pro-related__grid { grid-template-columns: 1fr 1fr; gap: 16px 10px }
    .pro-specs__title, .wrap-pro-detail .pro-info-main__title, .wrap-pro-detail .pro-news-sidebar__title { font-size: 18px; line-height: 24px }
    .wrap-pro-detail .pro-info-content#noidung { max-height: 420px }
    .wrap-pro-detail .pro-news-card { width: 100%; max-width: 288px; height: auto; min-height: 214px }
    .wrap-pro-detail .pro-news-card__name, .wrap-pro-detail .pro-news-card__thumb { width: calc(100% - 12px) }
    .about-criteria__item { gap: 10px; }
    .about-criteria__name { font-size: 14px; }
    section#AboutCriteria { margin: 15px 0 !important; }
    .about-criteria { margin-top: 10px; }
    .form-consult { gap: 0; }
    section#CustomerPartners { margin-bottom: 25px !important; }
    section#Header {flex-wrap: wrap; justify-content: center;}
}
@media (max-width:370.98px) {
    a.Header__Nav-Btn-Link.d-flex.align-items-center.justify-content-center {}
    .Header__Nav-Btn-Link span { display: none; }
    a.Header__Nav-Btn-Link { max-width: max-content; border-radius: 10px; padding: 13px 15px; }
    #hamburger { width: 52px; }
    .header__hotline-link { padding: 4px; gap: 0 }
    .header__hotline-info { display: none }
    .section-heading__title, .form-consult__title { font-size: 20px; }
}
@media (max-width:479px) {
    /* from style.css */
    .CategoriesCat__Item { width: calc(100% / 3 - 8px) }
    #CategoriesCat .CategoriesCat__Wrapper { gap: 6px; padding: 10px 8px }
}