@media (max-width: 768px) {
    .section1 {
        padding-top: 100px;
    }

    .carousel-cell-section12 {
        height: 650px;
    }

    .section1 .container {
        max-width: 700px;
    }

    #footer .container {
        max-width: 700px;
    }

    .custom-button-template-desktop {
        display: flex !important;
    }

    #templateDetail .row.p-5 {
        padding: 0px !important;
        padding-top: 16px !important;
    }

    .section17 img {
        float: left;
        margin-right: 0;
    }

    .template-item-body {
        bottom: -1%;
        width: 94%;
    }

    #header-desktop {
        display: none;
    }

    #social-container {
        margin-bottom: 16px;
    }

    #footer {
        padding-bottom: 100px;
    }

    #floatingButton {
        display: none;
    }

    .dropdown-menu {
        border: none;
    }

    .navbar {
        padding: 0 !important;
    }

    .row {
        margin: 0 !important;
    }

    .carousel {
        margin: 0 auto;
        max-width: 90%;
        /* Cân bằng khoảng cách ở đầu carousel */
    }

    .section1 #mainBanner {
        width: 80% !important;
    }

    .section2 .row {
        display: block;
    }

    .section2 .col-md-4 {
        margin-bottom: 20px;
    }

    .section2-item {
        height: 460px;
    }

    .section4 {
        margin-top: 40px;
        padding: 0;
    }

    .tab-container {
        display: flex;
        /* Đặt các tab nằm ngang */
        overflow-x: auto;
        /* Cho phép cuộn ngang */
        white-space: nowrap;
        /* Ngăn các tab xuống dòng */
        scrollbar-width: none;
        /* Ẩn scrollbar trên Firefox */
        -ms-overflow-style: none;
        /* Ẩn scrollbar trên IE và Edge */
    }

    .tab-container::-webkit-scrollbar {
        display: none;
        /* Ẩn scrollbar trên Chrome/Safari */
    }

    .section7-content {
        margin-top: 32px;
    }

    .tab-section9,
    .tab-section7 {
        margin-top: 16px;
        display: none;
        margin-bottom: 16px;
    }

    .img-section9,
    .img-section7 {
        display: none;
    }

    .img-mobile-section9,
    .img-mobile-section7 {
        display: none;
    }

    .img-mobile-section9.active,
    .img-mobile-section7.active {
        display: block !important;
        padding-bottom: 16px;
    }

    .tab-section9-content {
        display: none;
    }

    .sec8-icon {
        display: none;
    }

    .section15-item {
        min-height: 460px;
    }

    .btn-design-package {
        right: 23%;
    }

    .section17 {
        margin-bottom: 17.4rem !important;
    }

    .section17 .col-md-5 {
        padding-left: 0;
        padding-right: 0;
    }

    .section17-text {
        color: rgb(62, 80, 103);
        font-size: 24px;
    }

    .section5 img {
        width: 100%;
    }

    .carousel-cell-section16 {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .carousel-cell-section16 h4 {
        width: 99.5%;
        top: 44%;
    }

    .carousel-cell-section16 h5 {
        width: 99.5%;
        top: 46%;
    }

    .section17 img {
        height: 25rem;
    }

    .section17-right-container {
        padding-top: 16px;
        padding-bottom: 16px;
    }

    .section17-text {
        line-height: 1.8;
    }

    .circle-wrapper::before {
        content: '';
        position: absolute;
        top: 63%;
        left: 25%;
        transform: translate(-50%, -50%);
        width: 400px;
        height: 300px;
        border-radius: 72% 28% 40% 60% / 100% 67% 33% 0%;
        z-index: 0;

        /* Hình tròn đặt ở lớp dưới */
    }

    #sec8tab1,
    #sec8tab2,
    #sec8tab3,
    #sec8tab4,
    #sec8tab5,
    #sec8tab6,
    #sec8tab7,
    #sec8tab8,
    #sec8tab9,
    #sec8tab10,
    #sec8tab11,
    #sec8tab12 {
        display: none;
    }

    .tab-link-section8 .carousel,
    .tab-link-section8-right .carousel {
        display: none;
    }

    .tab-link-section8.active .carousel,
    .tab-link-section8-right.active .carousel {
        display: block;
    }

    .tab-link-section8 p {
        text-align: left !important;
    }

    .tab-link-section8 .carousel {
        text-align: center;
    }

    .section8 {
        padding: 0;
    }

    .template-slider1,
    .template-slider2,
    .template-slider3 {
        display: none;
    }

    .section12-item-body {
        top: 77%
    }

    .section12-item-body2 {
        top: 77%
    }

    .carousel-cell-section13 {
        height: 26rem;
    }

    .btn-neon {
        width: 100%;
    }

    .btn-neon-theme {
        width: 100%;
    }

    .btn-link-46 {
        margin-left: 0.2rem;
    }

    .contact-bg {
        padding: 0px;
        padding-top: 32px;
    }
}

@media (min-width: 769px) and (max-width: 991px) {

    .section1 .container {
        max-width: 900px;
    }

    #footer .container {
        max-width: 900px;
    }

    .template-item-body {
        width: 95.5%;
    }

    .custom-button-template-tablet {
        display: flex !important;
    }

    .custom-buttons button {
        width: 48%;
        /* Chia đôi chiều rộng với khoảng cách giữa các nút */
    }

    .custom-buttons button.full-width {
        width: 100%;
        /* Nút cuối cùng chiếm toàn bộ chiều rộng */
    }

    .custom-buttons {
        display: flex;
        flex-wrap: wrap;
        /* Đảm bảo các nút xuống dòng khi hết chỗ */
        gap: 1rem;
        /* Khoảng cách giữa các nút */
    }

    #header-desktop {
        display: none;
    }

    #social-container {
        margin-bottom: 16px;
    }

    #footer {
        padding-bottom: 100px;
    }

    #floatingButton {
        display: none;
    }

    .dropdown-menu {
        border: none;
    }

    .navbar {
        padding: 0 !important;
    }

    .row {
        margin: 0 !important;
    }

    .carousel {
        margin: 0 auto;
        max-width: 90%;
        /* Cân bằng khoảng cách ở đầu carousel */
    }

    .section1 {
        padding: 0px;
        padding-top: 100px;
    }

    .section1 #mainBanner {
        width: 40% !important;
    }

    .section2 .row {
        display: block;
    }

    .section2 .col-md-4 {
        margin-bottom: 20px;
    }

    .section2-item {
        height: 460px;
    }

    .section4 {
        margin-top: 40px;
        padding: 0;
    }

    .tab-container {
        display: flex;
        /* Đặt các tab nằm ngang */
        overflow-x: auto;
        /* Cho phép cuộn ngang */
        white-space: nowrap;
        /* Ngăn các tab xuống dòng */
        scrollbar-width: none;
        /* Ẩn scrollbar trên Firefox */
        -ms-overflow-style: none;
        /* Ẩn scrollbar trên IE và Edge */
    }

    .tab-container::-webkit-scrollbar {
        display: none;
        /* Ẩn scrollbar trên Chrome/Safari */
    }

    .section7-content {
        display: none;
    }

    .tab-section9,
    .tab-section7 {
        margin-top: 16px;
        display: none;
        margin-bottom: 16px;
    }

    .img-section9,
    .img-section7 {
        display: none;
    }

    .img-mobile-section9,
    .img-mobile-section7 {
        display: none;
    }

    .img-mobile-section9.active,
    .img-mobile-section7.active {
        display: block !important;
        padding-bottom: 16px;
    }

    .tab-section9-content {
        display: none;
    }

    #sec8tab1,
    #sec8tab2,
    #sec8tab3,
    #sec8tab4,
    #sec8tab5,
    #sec8tab6,
    #sec8tab7,
    #sec8tab8,
    #sec8tab9,
    #sec8tab10,
    #sec8tab11,
    #sec8tab12 {
        display: none;
    }

    .sec8-icon {
        display: none !important;
    }

    .tab-link-section8 .carousel,
    .tab-link-section8-right .carousel {
        display: none;
    }

    .tab-link-section8.active .carousel,
    .tab-link-section8-right.active .carousel {
        display: block;
    }

    .tab-link-section8 p {
        text-align: left !important;
    }

    .tab-link-section8 .carousel {
        text-align: center;
    }

    .section8 {
        padding: 0;
    }

    .section12-item-body {
        top: 81%
    }

    .section12-item-title {
        font-size: 16px;
    }

    .section12-item-text {
        font-size: 12px;
    }

    .section12-item-body2 {
        top: 81%;
    }

    .carousel-cell-section13 {
        height: 25rem;
    }

    .section15-item {
        min-height: 460px;
    }

    .section17 {
        margin-bottom: 0rem !important;
    }

    .section17-text {
        color: rgb(62, 80, 103);
        font-size: 24px;
    }

    .section5 img {
        width: 100%;
    }

    .carousel-cell-section16 {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .carousel-cell-section16 h4 {
        width: 99.5%;
        top: 44%;
    }

    .carousel-cell-section16 h5 {
        width: 99.5%;
        top: 46%;
    }

    .section17 img {
        height: 25rem;
    }

    .section17 {
        height: 25rem;
    }

    .section17 .col-md-5 {
        padding: 0px !important;
    }

    .section17-right-container {
        padding-top: 16px;
    }

    .section17-text {
        line-height: 1.8;
    }

    .circle-wrapper::before {
        content: '';
        position: absolute;
        top: 62%;
        left: 35%;
        transform: translate(-50%, -50%);
        width: 300px;
        height: 300px;
        border-radius: 72% 28% 40% 60% / 100% 67% 33% 0%;
        z-index: 0;

        /* Hình tròn đặt ở lớp dưới */
    }

    .template-slider1,
    .template-slider2,
    .template-slider3 {
        display: none;
    }

    .btn-neon {
        width: 100%;
    }

    .btn-neon-theme {
        width: 100%;
    }

    .btn-link-46 {
        margin-left: 0.2rem;
    }

    .contact-bg {
        padding: 0px;
        padding-top: 32px;
    }

    .fs-md-12 {
        font-size: 12px !important;
    }

    .section15-handle-responsive {
        display: block !important;
    }

    .section17 img {
        margin-right: 0;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .template-item-body {
        width: 95.5%;
    }

    #footer .container {
        max-width: 1100px;
    }

    .custom-button-template-tablet {
        display: flex !important;
    }

    .custom-buttons button {
        width: 48%;
        /* Chia đôi chiều rộng với khoảng cách giữa các nút */
    }

    .custom-buttons button.full-width {
        width: 100%;
        /* Nút cuối cùng chiếm toàn bộ chiều rộng */
    }

    .custom-buttons {
        display: flex;
        flex-wrap: wrap;
        /* Đảm bảo các nút xuống dòng khi hết chỗ */
        gap: 1rem;
        /* Khoảng cách giữa các nút */
    }

    #header-desktop {
        display: none;
    }

    #social-container {
        margin-bottom: 16px;
    }

    #footer {
        padding-bottom: 100px;
    }

    #floatingButton {
        display: none;
    }

    .dropdown-menu {
        border: none;
    }

    .navbar {
        padding: 0 !important;
    }

    .row {
        margin: 0 !important;
    }

    .carousel {
        margin: 0 auto;
        max-width: 90%;
        /* Cân bằng khoảng cách ở đầu carousel */
    }

    .section1 {
        padding: 0px;
        padding-top: 100px;
    }

    .section1 .container {
        max-width: 1100px;
    }

    .section2 .row {
        display: block;
    }

    .section2 .col-md-4 {
        margin-bottom: 20px;
    }

    .section2-item {
        height: 460px;
    }

    .section4 {
        margin-top: 40px;
        padding: 0;
    }

    .tab-container {
        display: flex;
        /* Đặt các tab nằm ngang */
        overflow-x: auto;
        /* Cho phép cuộn ngang */
        white-space: nowrap;
        /* Ngăn các tab xuống dòng */
        scrollbar-width: none;
        /* Ẩn scrollbar trên Firefox */
        -ms-overflow-style: none;
        /* Ẩn scrollbar trên IE và Edge */
    }

    .tab-container::-webkit-scrollbar {
        display: none;
        /* Ẩn scrollbar trên Chrome/Safari */
    }

    .tab-link-section8 .carousel,
    .tab-link-section8-right .carousel {
        display: none;
    }

    .section8 .container {
        max-width: 1200px;
    }

    .carousel-cell-section8 img {
        height: 27rem;
    }

    .section8 {
        padding: 0;
    }

    .section12-item-body {
        top: 82%
    }

    .section12-item-title {
        font-size: 16px;
    }

    .section12-item-text {
        font-size: 14px;
    }

    .section12-item-body2 {
        top: 82%;
    }

    .carousel-cell-section13 {
        height: 25rem;
    }

    .section15-item {
        min-height: 1500px;
    }

    .section17 {
        margin-bottom: 0rem !important;
    }

    .section17-text {
        color: rgb(62, 80, 103);
        font-size: 24px;
    }

    .section5 img {
        width: 100%;
    }

    .carousel-cell-section16 {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .carousel-cell-section16 h4 {
        width: 99.5%;
        top: 44%;
    }

    .carousel-cell-section16 h5 {
        width: 99.5%;
        top: 46%;
    }

    .section17 img {
        height: 25rem;
    }

    .section17 {
        height: 25rem;
    }

    .section17 .col-md-5 {
        padding: 0px !important;
    }

    .section17-right-container {
        padding-top: 16px;
    }

    .section17-text {
        line-height: 1.8;
    }

    .circle-wrapper::before {
        content: '';
        position: absolute;
        top: 62%;
        left: 35%;
        transform: translate(-50%, -50%);
        width: 300px;
        height: 300px;
        border-radius: 72% 28% 40% 60% / 100% 67% 33% 0%;
        z-index: 0;

        /* Hình tròn đặt ở lớp dưới */
    }

    .template-slider1,
    .template-slider2,
    .template-slider3 {
        display: none;
    }

    .btn-neon {
        width: 100%;
    }

    .btn-neon-theme {
        width: 100%;
    }

    .btn-link-46 {
        margin-left: 0.2rem;
    }

    .contact-bg {
        padding: 0px;
        padding-top: 32px;
    }

    .fs-md-12 {
        font-size: 12px !important;
    }

    .section15-handle-responsive {
        display: block !important;
    }

    .section17 img {
        margin-right: 56px;
    }
}

@media (min-width: 1200px) {

    .tab-container {
        display: flex;
        /* Đặt các tab nằm ngang */
        overflow-x: auto;
        /* Cho phép cuộn ngang */
        white-space: nowrap;
        /* Ngăn các tab xuống dòng */
        scrollbar-width: none;
        /* Ẩn scrollbar trên Firefox */
        -ms-overflow-style: none;
        /* Ẩn scrollbar trên IE và Edge */
    }

    /* CSS cho desktop */
    #header-mobile {
        display: none;
    }

    .bottom-nav {
        display: none;
    }

    .tab-link-section8 .carousel,
    .tab-link-section8-right .carousel {
        display: none;
    }

    .custom-button-template-desktop {
        display: flex !important;
    }
}