*,
*::before,
*::after {
    box-sizing: border-box;
}

.header-hp-1 .menu-desktop {
    box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.1);
}

.room-section.section-box {
    padding: 60px 0;
    min-height: 100vh;
    /* Ensure full height */
}

.room-section input[type='radio'],
.room-section input[type='checkbox'] {
    clip: rect(0 0 0 0);
    border: 0;
    bottom: 0;
    height: 1px;
    left: 0;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

.kitchen-space {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/************************************************* Start khainacs **********************************************/
.content-row {
    display: flex;
    /* flex-wrap: wrap;
    gap: 16px;
    justify-content: space-between;
    align-items: center; */
}

.khaiCustom {
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 18px;
    padding: 6px;
    flex: 0 0 50%;
    /* Khi màn hình rộng, chiếm 30% */
    transition: all 0.3s ease-in-out;
    /* Hiệu ứng mượt */
}

.khaiCustom .price {
    font-size: 18px;
    background-color: #007bff;
    padding-left: 14px;
    padding-right: 14px;
    padding-top: 6px;
    padding-bottom: 6px;
    border-radius: 6px;
    font-family: sans-serif;
    font-weight: bold;
    color: white;
}

/* Adjust hover effect for consistency */
.hover-effect {
    cursor: pointer;
    transition: transform 0.2s ease;
}

.hover-effect:hover {
    transform: scale(1.1);
}

/************************************************* End khainacs **********************************************/
.room-wrap .heading-title,
.kitchen-space .heading-title {
    font-size: 18px;
    line-height: 1.2;
    margin-bottom: 8px;
}

.room-shape {
    /* margin-bottom: 30px; */
}

.room-shape ul {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
}

.room-shape .radio-picture {
    max-width: 71px;
    flex: 12.5% 0 0;
    position: relative;
    border: 1px solid #ddd;
    padding: 5px;
}

.kitchen-space .kitchen-space-item {
    max-width: 10px;
    flex: 12.5% 0 0;
    position: relative;
    border: 1px solid #ddd;
    padding: 2px;
}

.room-shape .radio-picture.checked,
.room-shape .radio-picture:hover,
.kitchen-space .kitchen-space-item.checked,
.kitchen-space .kitchen-space-item:hover {
    box-shadow: 0px 4px 15px #e5dabc;
}

.room-shape .radio-picture.checked:after,
.kitchen-space .kitchen-space-item.checked:after {
    pointer-events: none;
    position: absolute;
    bottom: -18px;
    left: 50%;
    transform: translate(-50%, 0%);
    transition: opacity 0.3s ease-out;
    content: url("data:image/svg+xml,%3Csvg width='25' height='25' viewBox='0 0 40 40' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M20 40C22.6264 40 25.2272 39.4827 27.6537 38.4776C30.0802 37.4725 32.285 35.9993 34.1421 34.1421C35.9993 32.285 37.4725 30.0802 38.4776 27.6537C39.4827 25.2272 40 22.6264 40 20C40 17.3736 39.4827 14.7728 38.4776 12.3463C37.4725 9.91982 35.9993 7.71504 34.1421 5.85786C32.285 4.00069 30.0802 2.5275 27.6537 1.52241C25.2272 0.517315 22.6264 -3.9137e-08 20 0C14.6957 7.90407e-08 9.60859 2.10714 5.85786 5.85786C2.10714 9.60859 0 14.6957 0 20C0 25.3043 2.10714 30.3914 5.85786 34.1421C9.60859 37.8929 14.6957 40 20 40ZM19.4844 28.0889L30.5956 14.7556L27.1822 11.9111L17.6267 23.3756L12.6822 18.4289L9.54 21.5711L16.2067 28.2378L17.9267 29.9578L19.4844 28.0889Z' fill='%23006699'/%3E%3C/svg%3E");
    background: #fff;
    -webkit-border-radius: 80px;
    -moz-border-radius: 80px;
    border-radius: 80px;
}

/* Tạo dấu check bằng CSS */
.room-shape .radio-picture.checked:after::before,
.kitchen-space .kitchen-space-item.checked:after::before {
    content: '';
    width: 8px;
    height: 12px;
    border: 2px solid #ffffff;
    border-top: none;
    border-left: none;
    transform: rotate(45deg);
    display: block;
}

.room-shape .radio-picture:not(:last-child) {
    margin-right: 6px;
}

.room-shape [class*='radio-picture'] label,
.kitchen-space .kitchen-space-item label,
.room-shape [class*='radio-picture'] label>svg {
    fill: #fff;
    stroke: #000;
    display: block;
    height: 100%;
    transition: fill 0.3s ease-out;
    width: 100%;
}

.room-shape [class*='radio-picture'] label:hover>svg,
.room-shape [class*='radio-picture'] label:focus>svg {
    fill: rgba(0, 102, 153, 0.3);
}

.room-shape .checked svg {
    fill: rgba(0, 102, 153, 0.3) !important;
}

.kitchen-space-room-shape:not(.show) {
    display: none !important;
}

.kitchen-space-room-shape .owl-stage {
    padding-bottom: 12px;
}

.kitchen-space-room-shape .owl-nav {
    margin-top: 0;
}

.kitchen-space-room-shape .owl-nav [class*='owl-'] {
    margin: 0;
    font-size: 20px;
    color: #999;
    outline: none;
    -moz-outline: none;
    -webkit-outline: none;
    -o-outline: none;
    -ms-outline: none;
    border-radius: 0;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    -o-border-radius: 0;
    -ms-border-radius: 0;
}

.kitchen-space-room-shape .owl-nav .owl-prev,
.kitchen-space-room-shape .owl-nav .owl-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    justify-content: space-between;
    -moz-justify-content: space-between;
    -webkit-justify-content: space-between;
    -o-justify-content: space-between;
    -ms-justify-content: space-between;
}

.kitchen-space-room-shape .owl-nav .owl-prev {
    left: -20px;
}

.kitchen-space-room-shape .owl-nav .owl-next {
    right: 8px;
}

.kitchen-space-room-shape .owl-nav [class*='owl-']:hover {
    background: transparent;
    color: #333;
}

.my-selected {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 20px;
}

.my-selected .project-detail {
    display: flex;
    align-items: center;
}

.my-selected .project-detail .price {
    font-size: 20px;
    font-weight: 600;
    margin-right: 10px;
    color: #222;
}

.symbols .element-container .heading-title {
    font-size: 16px;
    line-height: 1.2;
    margin-bottom: 8px;
}

.symbols .elements {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.symbols .element-item {
    max-width: 60%;
    position: relative;
}

.symbols .element-item.checked:after {
    pointer-events: none;
    position: absolute;
    top: 50%;
    right: 50%;
    transform: translate(50%, -50%);
    transition: opacity 0.3s ease-out;
    content: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M20 40C22.6264 40 25.2272 39.4827 27.6537 38.4776C30.0802 37.4725 32.285 35.9993 34.1421 34.1421C35.9993 32.285 37.4725 30.0802 38.4776 27.6537C39.4827 25.2272 40 22.6264 40 20C40 17.3736 39.4827 14.7728 38.4776 12.3463C37.4725 9.91982 35.9993 7.71504 34.1421 5.85786C32.285 4.00069 30.0802 2.5275 27.6537 1.52241C25.2272 0.517315 22.6264 -3.9137e-08 20 0C14.6957 7.90407e-08 9.60859 2.10714 5.85786 5.85786C2.10714 9.60859 0 14.6957 0 20C0 25.3043 2.10714 30.3914 5.85786 34.1421C9.60859 37.8929 14.6957 40 20 40ZM19.4844 28.0889L30.5956 14.7556L27.1822 11.9111L17.6267 23.3756L12.6822 18.4289L9.54 21.5711L16.2067 28.2378L17.9267 29.9578L19.4844 28.0889Z' fill='%23006699'/%3E%3C/svg%3E");
    background: #fff;
    -webkit-border-radius: 80px;
    -moz-border-radius: 80px;
    border-radius: 80px;
}

.symbols .element-item.hide {
    display: none;
}

.symbols .element-item .element-name {
    font-size: 14px;
    line-height: 1.5;
}

.load-more-element {
    margin-top: 5px;
}

.load-more-element .more-btn {
    font-size: 14px;
    color: #007bff;
}

.load-more-element .more-btn i {
    padding-left: 5px;
}

.canvas-wrap {
    position: relative;
}

#canvas {
    position: relative;
    z-index: 1051;
}

#canvas-more-view-mode {
    margin-top: 10px;
    display: flex;
    justify-content: center;
    gap: 6%;
}

#canvas-more-view-mode .btn {
    font-size: 14px;
}

#canvas-more-view-mode .btn.btn-outline {
    border: 1px solid #e6e6e6;
    background: #fff;
}

#canvas-more-view-mode .btn.btn-outline:hover {
    background: #007bff;
    color: #fff;
}

#canvas-switch-view-mode {
    position: absolute;
    left: -70px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 5px;
}

#canvas-switch-view-mode .btn {
    display: flex;
    justify-content: center;
    flex-direction: column;
    width: 50px;
    height: 50px;
    align-items: center;
    padding: 5px;
}

#canvas-switch-view-mode .btn .icon {
    height: 20px;
    position: static;
    transform: none;
    width: 20px;
    display: block;
}

#canvas-switch-view-mode .btn .icon svg {
    stroke-opacity: 0;
    height: 100%;
    width: 100%;
    fill: #212121;
    transition: fill 0.3s ease-out;
}

#canvas-switch-view-mode .btn .label {
    font-size: 14px;
}

#elementModal {
    left: 0;
    padding-right: 0 !important;
    background: rgb(0, 0, 0, 0.8);
}

#elementModal button.close {
    outline: none;
    -moz-outline: none;
    -webkit-outline: none;
    -o-outline: none;
    -ms-outline: none;
    z-index: 999;
    position: absolute;
    top: 20px;
    right: 20px;
    opacity: 1;
    color: #666;
    font-size: 25px;
}

#elementModal .modal-dialog {
    margin-top: 40%;
    max-width: 800px;
    transform: translateY(-50%);
}

#elementModal .modal-content {
    border: none;
    border-radius: 0;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    -o-border-radius: 0;
    -ms-border-radius: 0;
}

#elementModal .modal-body {
    padding: 0;
}

#elementModal .element-content {
    display: block;
    position: absolute;
    top: 0;
    background-color: #fafafa;
    border: solid #ededed;
    border-width: 0 0 0 1px;
    width: 440px;
    right: 0;
    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
    -o-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
    -ms-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
    padding: 94px 20px 20px;
    min-height: 100vh;
}

#child-element {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-column-gap: 20px;
    grid-row-gap: 20px;
}

#child-element .element-image {
    width: 200px;
    min-width: 200px;
    max-width: 200px;
    min-height: 200px;
    max-height: 200px;
    margin-bottom: 8px;
    object-fit: cover;
}

#child-element .element-title {
    font-size: 1rem;
}

/* Product Popup */
.popup-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1000;
}

.popup-dialog {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
    padding: 22px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    max-width: 1050px;
    min-width: 70%;
    max-height: 90vh;
    overflow-y: auto;
    z-index: 1001;
    overflow: hidden;
}

.popup-close {
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
    font-size: 24px;
    color: #666;
}

.section {
    margin-bottom: 30px;
    min-width: 50%;
}

.section-title {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 15px;
    color: #333;
}

.style-item {
    display: flex;
    flex-direction: column;
    /* Sắp xếp các phần tử theo cột */
    align-items: center;
    /* Căn giữa các phần tử theo chiều ngang */
    justify-content: space-between;
    padding: 10px;
    background-color: #f5f5f5;
    border: 1px solid #ccc;
    border-radius: 4px;
    text-align: center;
    gap: 14px;
    /* Khoảng cách giữa image và text */
    cursor: pointer;
    transition: border-color 0.3s, background-color 0.3s;
    width: 233px;
}

.style-item img {
    width: 50%;
    /* Đảm bảo ảnh vừa với container */
    height: auto;
    max-width: 120px;
    /* Giới hạn chiều rộng ảnh */
    aspect-ratio: 1;
    /* Tạo hình vuông */
    object-fit: cover;
    /* Cắt ảnh để vừa khít hình vuông */
    background-color: #e0e0e0;
    /* Màu nền nếu không có ảnh */
    border-radius: 4px;
}

.style-item span {
    font-size: 14px;
    /* Kích thước chữ */
    color: #333;
    /* Màu chữ */
}

.style-item:hover {
    box-shadow: 0px 0px 15px #d8bd85;
    border: 2px solid #d8bd85;
}

.style-item img:hover {
    transform: scale(100%);
    transition: all 0.3s ease-in-out;
}

.style-item.selected {
    transform: scale(100%);
    border: 2px solid #d8bd85;
    box-shadow: 0px 0px 15px #d8bd85;
}

.style-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    /* 4 cột */
    gap: 10px;
    margin: 20px 20px;
    width: 220px;
}

.show-more {
    color: #2196f3;
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px 0;
    font-size: 14px;
}

.show-more:hover {
    color: #1976d2;
}

.arrow-down::after {
    content: '↓';
    display: inline-block;
    margin-left: 5px;
}

.arrow-up::after {
    content: '↑';
    display: inline-block;
    margin-left: 5px;
}

.show-all .style-row.extra {
    display: contents;
}

/*End Product Popup */

/* .button {
    padding: 12px 20px;
    border-radius: 8px;
    background-color: transparent;
    border: 0;
    font-weight: 600;
    cursor: pointer;
    transition: 0.15s ease;

    &.is-ghost {
        &:hover,
        &:focus {
            background-color: #dfdad7;
        }
    }

    &.is-primary {
        background-color: #750550;
        color: #fff;
        &:hover,
        &:focus {
            background-color: #4a0433;
        }
    }
} */

.icon-button {
    padding: 0;
    border: 0;
    background-color: transparent;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    cursor: pointer;
    border-radius: 8px;
    transition: 0.15s ease;

    svg {
        width: 24px;
        height: 24px;
    }

    &:hover,
    &:focus {
        background-color: #dfdad7;
    }
}

@media screen and (min-width: 767px) {
    .symbols .element-container {
        padding-left: 10px;
        margin-bottom: 20px;
        padding-top: 10px;
    }
}

@media screen and (max-width: 767px) {
    .room-shape ul {
        flex-wrap: wrap;
    }

    .room-shape ul li {
        margin-bottom: 20px;
    }

    .symbols .element-item {
        max-width: 100px;
    }

    .symbols .element-container {
        margin-bottom: 20px;
    }

    .canvas-wrap #canvas {
        padding-left: 60px;
    }

    #canvas {
        z-index: 1050;
    }

    #canvas-switch-view-mode {
        left: 0;
    }

    #elementModal .element-content {
        width: 360px;
        padding-top: 130px;
    }

    .my-selected {
        margin-top: 20px;
        margin-bottom: 10px;
    }

    #child-element .element-image {
        min-width: 150px;
        max-width: 150px;
        min-height: 150px;
        max-height: 150px;
    }

    #elementModal button.close {
        top: 90px;
    }
}

/*
Start Menu
*/
.menu .d-flex {
    justify-content: space-between;
}

.menu-item {
    flex-grow: 1;
    text-align: center;
    margin-right: 20px;
    font-size: 14px;
    font-family: 'Nunito', sans-serif;
    font-weight: bold;
    color: #c7974e;
}

.menu-item:hover {
    color: #d1c184;
}

/*
End Menu
*/

/*
Start homepage
*/

/*
End homepage
*/
.banner {
    width: 100%;
    height: 200px;
    position: relative;
}

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

/* Breadcrumb styling chung cho cả hai trang */
.breadcrumb-section {
    background-color: #f8f9fa;
    padding: 15px 0;
    border-bottom: 1px solid #e9ecef;
}

.breadcrumb-trail {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    font-size: 14px;
    color: #6c757d;
}

.breadcrumb-trail a {
    color: black;
    text-decoration: none;
    transition: color 0.2s ease;
    margin-right: 8px;
}

/* Thêm dấu / sau mỗi liên kết */
.breadcrumb-trail a:after {
    content: '/';
    margin-left: 8px;
    color: #6c757d;
}

.breadcrumb-trail a:hover {
    color: grey;
    text-decoration: none;
}

.breadcrumb-trail span {
    color: #495057;
    font-weight: 500;
}

/* ........................................................ */

.container-fluid {
    display: flex;
    padding: 10px;
}

.sidebar {
    width: 20%;
    padding-right: 20px;
}

.sidebar h3 {
    font-size: 18px;
    margin-bottom: 10px;
}

.sidebar ul {
    list-style: none;
    padding: 0;
}

.sidebar ul li {
    margin-bottom: 10px;
    position: relative;
}

.sidebar ul li a {
    text-decoration: none;
    color: #333;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.sidebar ul li ul {
    display: none;
    list-style: none;
    padding-left: 20px;
}

.sidebar ul li.active ul {
    display: block;
}

.sidebar .price-filter {
    margin-top: 20px;
}

.sidebar .price-filter input {
    width: 100%;
}

.sidebar .best-sellers {
    margin-top: 20px;
}

.sidebar .best-sellers h3 {
    font-size: 18px;
    margin-bottom: 10px;
}

.sidebar .best-sellers ul {
    list-style: none;
    padding: 0;
}

.sidebar .best-sellers ul li {
    margin-bottom: 10px;
    display: flex;
    align-items: center;
}

.sidebar .best-sellers ul li img {
    width: 50px;
    height: 50px;
    object-fit: cover;
    margin-right: 10px;
}

.sidebar .best-sellers ul li .info {
    display: flex;
    flex-direction: column;
}

.sidebar .best-sellers ul li .info .name {
    font-size: 14px;
    color: #333;
}

.sidebar .best-sellers ul li .info .price {
    font-size: 14px;
    color: red;
}

.product-page .content {
    width: calc(100% - 30%);
}

.product-page .product-grid {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    gap: 10px;
}

.product-page .product-item {
    width: calc(100% - 80px);
    border: 1px solid #ddd;
    padding: 10px;
    box-sizing: border-box;
}

.product-page .product-item:hover img {
    transform: scale(1.1);
}

.product-item img {
    transition: transform 0.3s ease;
    width: 200px;
    height: 200px;
}

.product-item h4 {
    font-size: 16px;
    margin: 10px 0;
}

.product-item .price {
    color: red;
    font-weight: bold;
}

.product-item .group_price {
    box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.15);
}

.pagination {
    text-align: center;
    margin-top: 20px;
}

.pagination button {
    margin: 0 5px;
    padding: 10px 20px;
    border: none;
    background-color: #333;
    color: #fff;
    cursor: pointer;
}

.pagination button.disabled {
    background-color: #ddd;
    cursor: not-allowed;
}

.customer-support {
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.customer-support a {
    text-decoration: none;
    color: #fff;
    background-color: transparent;
    padding: 10px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
}

.customer-support a.messenger {
    background-color: white;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

.customer-support a.zalo {
    background-color: white;
    border: 2px;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

.customer-support a:hover {
    box-shadow: #dccea5 0 -25px 18px -14px inset, #dccea5 0 1px 2px, #dccea5 0 2px 4px, #dccea5 0 4px 8px, #dccea5 0 8px 16px,
        #dccea5 0 16px 32px;
    transform: scale(1.05) rotate(-1deg);
}

.product-item {
    box-shadow: 1px 1px 10px 0px rgba(0, 0, 0, 0.15);
    flex: 0 0 calc((100% - 3 * 16px) / 4);
    box-sizing: border-box;
    border-radius: 10px;
    padding: 10px;
    position: relative;
    display: flex;
    flex-direction: column;
}

.product-item .line-clamp-2 {
    width: 100%;
    padding: 2px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.product-item .price {
    bottom: 25%;
}

.product-image {
    transition: transform 0.3s ease;
}

.sidebar .headingTitle {
    font-family: 'Nunito', sans-serif;
    font-weight: bold;
    font-size: 20px;
}

.sidebar a {
    font-family: 'Nunito', sans-serif;
    font-size: 14px;
}

.product-page .btn {
    position: relative;
    transition: all 0.3s ease-in-out;
    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);
    padding-block: 0.5rem;
    padding-inline: 1.25rem;
    background-color: #ca9c57;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    /* left: 25%; */
    /* left: 25%; */
    cursor: pointer;
    color: #ffff;
    gap: 10px;
    font-weight: bold;
    border: 3px solid #ffffff4d;
    outline: none;
    overflow: hidden;
    font-size: 15px;
}

.product-page .icon {
    width: 24px;
    height: 24px;
    transition: all 0.3s ease-in-out;
}

.product-page .btn {
    transition: all 0.4s ease-in-out;
}

.product-page .btn:hover .icon {
    transform: translate(4px);
}

.product-page .btn:hover::before {
    animation: shine 1.5s ease-out infinite;
}

.product-page .btn::before {
    content: '';
    position: absolute;
    width: 100px;
    height: 100%;
    background-image: linear-gradient(120deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0) 70%);
    top: 0;
    left: -100px;
    opacity: 0.6;
}

.product-page .pagination-container {
    justify-content: center;
    display: flex;
    margin-top: 20px;
}

.product-page .pagination {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
}

.product-page .page-item {
    margin: 0 5px;
}

.product-page .page-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid #ddd;
    color: #333;
    text-decoration: none;
    transition: all 0.3s;
    border-radius: 16px;
}

.product-page .page-item .page-link {
    border-radius: 15px;
}

.product-page .page-link:hover {
    background-color: #f5f5f5;
    border-color: #ccc;
}

.product-page .page-item.active .page-link {
    background-color: #007bff;
    border-color: #007bff;
    color: white;
}

.product-page .page-item.disable .page-link {
    color: #6c757d;
    pointer-events: none;
    background-color: #fff;
    border-color: #ddd;
}

.page-link i {
    font-size: 14px;
}

@keyframes shine {
    0% {
        left: -100px;
    }

    60% {
        left: 100%;
    }

    to {
        left: 100%;
    }
}

.price-filter .slider {
    height: 5px;
    border-radius: 5px;
    background: #ddd;
    position: relative;
}

.price-filter .progress {
    height: 5px;
    left: 25%;
    right: 25%;
    position: absolute;
    border-radius: 5px;
    background: #17a2b8;
}

.price-filter .range-input {
    position: relative;
}

.range-input input {
    border: 0;
    position: absolute;
    top: -14px;
    height: 5px;
    width: 100%;
    background: none;
    pointer-events: none;
    -webkit-appearance: none;
    padding-left: 0;
    padding-right: 0;
}

input[type='range']::-webkit-slider-thumb {
    height: 15px;
    width: 15px;
    border-radius: 50%;
    pointer-events: auto;
    -webkit-appearance: none;
    background: #17a2b8;
}

.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
}

.pagination button {
    border-radius: 50%;
    background-color: #d5b46b;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
}

.pagination button.active {
    background-color: #c99b54;
}

.pagination button:hover {
    background-color: #e5d9b8;
}

.drop-down .sub-item a {
    margin: 5px;
    border-radius: 10px;
    padding: 6px;
}

.drop-down .sub-item a:hover {
    background-color: #e5d9b8;
}

.best-sellers li {
    border-bottom: 2px solid #d5b46b;
    padding: 6px;
}

.best-sellers li:hover {
    transform: scale(1.1);
}

.container {
    /* width: 90%; */
    min-width: 73vw;
    /* max-width: 1200px; */
    margin: 0 auto;
    padding: 20px 0;
    overflow-x: hidden;
    /* Tránh tràn nội dung ra ngoài */
}

.breadcrumb {
    font-size: 14px;
    color: #666;
    margin-bottom: 20px;
}

.breadcrumb a {
    color: #666;
    text-decoration: none;
}

.breadcrumb a:hover {
    text-decoration: underline;
}

.product-page .category-item .category-name,
.product-page .category-item .category-name-main {
    display: flex;
    align-items: center;
    padding: 9px 12px;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.3s ease;
    color: #333;
    background-color: #fff;
}

.product-page .category-item .category-name.active,
.product-page .category-item .category-name-main.active {
    color: #fff;
    background-color: #d5b87c;
}

.product-page .sub-category-list {
    margin-top: 2px;
}

.product-page .sub-category-list .category-name:hover {
    background-color: #ccbc95;
}

.product {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}

/* .product-image {
    flex: 1;
    max-width: 50%;
    padding-right: 20px;
} */
/*Bị trùng phần tử với trong trang product.js*/
.product-image img {
    width: 100%;
    height: auto;
}

.product-details {
    flex: 1;
    max-width: 50%;
}

.product-title {
    font-size: 24px;
    font-weight: 500;
    margin-bottom: 10px;
}

.product-rating {
    font-size: 14px;
    color: #666;
    margin-bottom: 10px;
}

.product-rating i {
    color: #f0ad4e;
}

/* .......................Bộ đếm........................... */

/* Đảm bảo tất cả nằm ngang */
.quantity-wrapper {
    display: flex;
    align-items: center;
    gap: 15px;
    /* Khoảng cách giữa bộ số lượng và nút Add to Cart */
    margin-top: 20px;
}

/* Chỉnh lại khối số lượng */
.quantity {
    display: flex;
    align-items: center;
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
    background: white;
    width: 42px !important;
    /* height: 54px; */
    justify-content: space-between;
    /* padding: 0 15px; */
    border: 1px solid #000;
}

/* Ô nhập số */
/* Style cho input */
.quantity input {
    border: none;
    width: 40px !important;
    text-align: center;
    font-size: 18px;
    padding: 0;
    background: transparent;
}

/* Xóa mũi tên tăng giảm mặc định của input number */
.quantity input::-webkit-outer-spin-button,
.quantity input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Nút tăng giảm */
.quantity button {
    background-color: white;
    padding: 10px;
    font-size: 18px;
    font-weight: bold;
    display: contents !important;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
}

/* Hover hiệu ứng */
.quantity button:hover {
    background-color: #f0f0f0;
}

/* Nút Add to Cart */
.single_add_to_cart_button {
    flex-grow: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    font-weight: bold;
    background: #cfb464;
    color: white;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    height: 50px;
    padding: 0 15px;
    line-height: 1;
    transition: 0.3s;
    -moz-transition: 0.3s;
    -webkit-transition: 0.3s;
    -o-transition: 0.3s;
    -ms-transition: 0.3s;
    line-height: 1;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    text-align: center;
    font-family: 'Poppins', sans-serif;
    position: relative;
    z-index: 999;
}

.single_add_to_cart_button:hover {
    transition: all 0.5s;
    -moz-transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -o-transition: all 0.5s;
    -ms-transition: all 0.5s;
    background: #c8994f;
}

/* ......................................................... */

.buy-now {
    background-color: #2ecc71;
    color: #fff;
}

.product-info {
    font-size: 14px;
    color: #333;
}

.product-info strong {
    font-weight: 500;
}

.product-description {
    font-size: 14px;
    color: #333;
    margin-bottom: 20px;
}

.product-description strong {
    font-weight: 500;
}

.social-icons {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}

.social-icons a {
    color: #333;
    font-size: 20px;
}

.product-thumbnails {
    display: flex;
    gap: 10px;
    margin-top: 15px;
    justify-content: center;
    flex-wrap: wrap;
    position: relative;
    z-index: 2;
    width: 100%;
    overflow-x: auto;
}

.dropdown {
    cursor: pointer;
    padding: 10px;
    border: 1px solid #ccc;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.dropdown-content {
    display: none;
    padding: 15px;
    border: 1px solid #ccc;
    border-top: none;
    border-radius: 0 0 5px 5px;
    background-color: #fff;
    margin-top: -1px;
}

@media (max-width: 768px) {
    .product {
        flex-direction: column;
    }

    .product-image,
    .product-details {
        max-width: 100%;
        padding-right: 0;
    }
}

.image-slider {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 650px;
    height: 420px;
    overflow: hidden;
    border-radius: 5px;
    box-shadow: 5px;
    box-shadow: 0px 50px 100px rgb(0, 0, 0, 0.4);
}

.imgage-slider .image {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
}

.image-slider .images img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.checkout-section .woocommerce-additional-fields #order_comments {
    resize: none;
}

.contact .form-contact .form-textarea textarea {
    resize: none;
    height: 70%;
}

.home2d #iframe2d {
    border: 2px solid #e6d4bc;
    width: 100%;
    max-width: 100%;
    /* Giới hạn max-width */
    /* height: 70vh; */
    height: 800px;
    /* bằng với kích thước 3D*/
}

/* Mobile responsive for iframe2d */
@media (max-width: 768px) {
    .home2d #iframe2d {
        /* height: 60vh; */
        width: 100%;
        max-width: 100vw;
    }
}

@media (max-width: 425px) {
    .home2d #iframe2d {
        /* height: 50vh; */
        width: 100vw;
        max-width: 100vw;
        border: 1px solid #e6d4bc;
    }
}

/* Đảm bảo các phần tử không bị tràn ra ngoài */
.home2d .room-section .woocommerce .container {
    max-width: 95%;
    padding: 0 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    overflow-x: hidden;
}

/* Căn chỉnh hình ảnh cho vừa với container */
.home2d .furniture-image {
    max-width: 100%;
    height: auto;
}

/* Định dạng flexbox cho layout */
.home2d .container .room-wrap {
    display: flex;
    justify-content: center;
    width: 100%;
}

.home2d .container #canvas-more-view-mode {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.home2d .container #canvas-more-view-mode>div {
    display: flex;
    gap: 10px;
}

.home2d .container .kitchen-space .content-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    max-width: 100%;
}

.home2d .container .kitchen-space .kitchen-space-room-shape {
    flex: 0 0 50%;
    max-width: 50%;
}

/* Start Responsive For home.js 
/* Base Navbar Styles */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    background-color: #ffffff !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    height: 95px !important;
    width: 100%;
    overflow: visible;
}

.h-25 {
    height: 80px;
    transition: height 0.3s ease;
}

/* Menu Mobile Styles */
.menu-mobile {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background-color: #ffffff !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    border-radius: 0 0 10px 10px;
    z-index: 999;
}

.menu-mobile.active {
    display: block;
}

.menu-mobile .menu-item {
    display: block;
    padding: 15px 20px;
    border-bottom: 1px solid #eee;
    background: #ffffff;
    transition: background 0.3s ease;
}

.menu-mobile .menu-item:hover {
    background: #f5f5f5;
}

.container-fluid {
    display: flex;
    max-width: 1400px;
    width: 100%;
    margin: 0 auto;
    justify-content: center;
    align-items: start;
    padding: 10px 40px;
    transition: all 0.3s ease;
}

/* Menu Items */
.menu {
    display: flex;
    justify-content: center;
    gap: 20px;
}

.menu-item {
    padding: 10px 15px;
    text-decoration: none;
    color: #333;
    font-weight: 500;
    position: relative;
    transition: color 0.3s ease;
}

.menu-item:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: #dccea5;
    transition: width 0.3s ease;
}

.menu-item:hover:after {
    width: 100%;
}

/* Right Section Icons */

.section-right img,
.section-right .bi {
    width: 24px;
    height: 24px;
    min-width: 24px;
    font-size: 24px;
}

.section-right .search-icon .bi-search {
    font-size: 24px;
    color: #333;
    transition: color 0.3s ease;
}

.section-right .cart_icon img,
.section-right .user img {
    width: 24px;
    height: 24px;
    min-width: 24px;
}

/* Search Bar Enhancement */
.search {
    position: relative;
    height: 40px;
}

.search .input {
    width: 200px;
    border: 1px solid #dccea5;
    border-radius: 20px;
    padding: 8px 15px;
    transition: all 0.3s ease;
    background: #fff;
    font-size: 14px;
}

.search .input:focus {
    outline: none;
    border-color: #c99b54;
    box-shadow: 0 0 0 2px rgba(220, 206, 165, 0.2);
    width: 250px;
}

/* Responsive adjustments */

@media (max-width: 425px) {
    .section-right {
        gap: 12px;
    }

    .section-right img,
    .section-right .bi {
        width: 20px;
        height: 20px;
        min-width: 20px;
        font-size: 20px;
    }
}

@media (max-width: 320px) {
    .section-right {
        gap: 10px;
    }

    .section-right img,
    .section-right .bi {
        width: 18px;
        height: 18px;
        min-width: 18px;
        font-size: 18px;
    }
}

/* Responsive Breakpoints */
@media (max-width: 1440px) {
    .container-fluid {
        max-width: 1200px;
        padding: 10px 20px;
    }

    #navbarMenu {
        font-size: 16px;
    }

    .section-right {
        gap: 15px;
    }
}

@media (max-width: 1024px) {
    .container-fluid {
        padding: 10px 15px;
    }

    #navbarMenu {
        font-size: 14px;
    }

    .section-right {
        gap: 12px;
    }

    .section-right img {
        width: 24px;
        height: 24px;
    }
}

/* Đã gộp vào media query 768px chính */

@media (max-width: 425px) {
    .h-25 {
        height: 60px;
    }

    .navbar {
        height: 55px;
    }

    .container-fluid {
        padding: 5px 10px;
    }

    .navbar-brand img {
        max-height: 35px;
    }

    .search.active .input {
        width: 180px;
    }

    .navbar-toggler {
        padding: 4px 8px;
        border: none;
        background: transparent;
    }

    .navbar-toggler:focus {
        outline: none;
        box-shadow: none;
    }
}

/* End Responsive For navbar.js 
    Author: khainacs*/

/* Chỉnh khoảng cách giữa boday và navbar */
body {
    padding-top: 80px;
    /* Tạo khoảng cách cho navbar fixed */
}

.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10002;
    background-color: #ffffff !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    height: 70px;
}

/* Content wrapper */
.main-content {
    min-height: calc(100vh - 95px);
    /* Chiều cao viewport trừ đi chiều cao navbar */
    width: 100%;
}

@media (max-width: 768px) {
    body {
        padding-top: 70px;
    }

    .navbar {
        height: 60px;
    }

    .main-content {
        min-height: calc(100vh - 60px);
    }
}

/* End Chỉnh khoảng cách giữa boday và navbar */
/* Giá sản phẩm */
/* Styling for product price display */
.summary .price {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 25px;
    padding-top: 10px;
    font-family: 'Roboto', sans-serif;
}

.summary .price .discount-tag {
    background-color: #e74c3c;
    color: white;
    font-weight: bold;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 16px;
    margin-right: 10px;
    display: inline-block;
    font-family: 'Roboto', sans-serif;
}

.summary .price ins {
    text-decoration: none;
    margin-right: 10px;
}

.summary .price ins .woocommerce-Price-amount {
    font-size: 30px;
    font-weight: 700;
    color: #333;
    letter-spacing: 0.8px;
    font-family: 'Roboto', sans-serif;
}

.summary .price del {
    text-decoration: none;
    /* Bỏ gạch ngang mặc định */
    color: #999;
    margin-left: 5px;
    position: relative;
    /* Để định vị pseudo-element */
}

.summary .price del .woocommerce-Price-amount {
    font-size: 19px;
    font-weight: normal;
    letter-spacing: 0.5px;
    font-family: 'Roboto', sans-serif;
    position: relative;
}

.summary .price del .woocommerce-Price-amount::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    /* Đặt ở giữa số */
    border-top: 1.5px solid #999;
    /* Tạo đường gạch ngang */
    transform: translateY(-50%);
}

.summary .pro-price {
    width: 100%;
    margin-top: 10px;
    font-size: 16px;
    color: #555;
    font-weight: 500;
    padding: 5px 0;
    font-family: 'Roboto', sans-serif;
}

.summary .business-tag {
    background-color: #f8f9fa;
    border: 1px solid #ddd;
    padding: 3px 8px;
    border-radius: 3px;
    color: #28a745;
    font-weight: bold;
    margin-left: 8px;
    letter-spacing: 0.3px;
    font-family: 'Roboto', sans-serif;
}

/* ................ */
/* Styling cho At a Glane */
.at-a-glance .combined-features {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

/* Styling cho mỗi mục feature riêng biệt */
.at-a-glance .feature-item {
    display: flex;
    align-items: center;
}

/* Dấu phân cách giữa hai thông tin */
.at-a-glance .separator {
    margin: 0 10px;
    color: #999;
    font-weight: bold;
}

/* Hiệu ứng hover cho các icon */
.at-a-glance .feature-item:hover .icon i {
    transform: scale(1.1);
    transition: transform 0.2s;
    color: grey;
}

/* Tăng khoảng cách giữa các feature-item */
.at-a-glance .combined-features .feature-item {
    margin-right: 100px;
}

/* Tăng khoảng cách giữa icon và text trong mỗi feature */
.at-a-glance .icon {
    margin-right: 12px;
}

/* Căn chỉnh khoảng cách trong từng feature */
.at-a-glance li {
    margin-bottom: 20px;
}

/* Đảm bảo icon được canh giữa với text */
.at-a-glance .icon i {
    width: 30px;
    height: 30px;
    font-size: 22px;
    text-align: center;
    display: inline-block;
    color: black;
}

/* Tăng kích thước chữ trong feature text */
.at-a-glance .feature-text {
    font-size: 16px;
    font-weight: 500;
}

.at-a-glance h3 {
    font-size: 22px;
    margin-bottom: 15px;
    color: #444;
}

/*  ..................Delivery.........................................*/
.free-delivery {
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 15px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    font-family: 'Roboto', sans-serif;
}

/* Dòng "FREE DELIVERY" */
.free-delivery p:first-child {
    font-size: 20px;
    font-weight: bold;
    color: #333;
    margin: 0 0 5px 0;
}

/* Dòng thông tin giao hàng */
.free-delivery p:last-child {
    margin: 0;
    font-size: 16px;
    color: #555;
    line-height: 1.5;
}

/* Phần thời gian giao hàng */
.free-delivery .delivery-details {
    font-weight: normal;
    font-size: 16px;
}

/* Phần mã bưu điện */
.free-delivery .postal-code {
    font-weight: bold;
    color: purple !important;
    font-size: 16px;
}

/* Gộp vào media query 576px chính */

/*............................ Chọn loại sản phẩm .............................*/
/* Styling cho phần Finish Options */
.product-finish {
    margin-bottom: 20px;
    font-family: 'Roboto', sans-serif;
}

.product-finish .finish-label {
    font-size: 16px;
    color: #333;
    margin-bottom: 12px;
    font-weight: bold;
}

.product-finish .finish-value {
    font-weight: normal;
}

/* Styling cho container các lựa chọn */
.product-finish .finish-options {
    display: flex;
    gap: 15px;
}

/* Styling cho từng icon finish */
.product-finish .finish-icon {
    width: 60px;
    height: 60px;
    border: 2px solid #ddd;
    border-radius: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s ease;
}

/* Styling cho finish icon khi hover */
.product-finish .finish-icon:hover {
    border-color: #aaa;
}

/* Styling cho finish icon khi được chọn (active) */
.product-finish .finish-icon.active {
    border-color: #7d3c98;
    box-shadow: 0 0 8px rgba(125, 60, 152, 0.5);
    transform: scale(1.05);
}

/* Đảm bảo hình ảnh vừa khít */
.product-finish .finish-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ........................Xử lý chọn hình ảnh carousel.......................................... */
/* Tăng độ ưu tiên CSS cho item carousel được chọn */
#productCarousel .item.active-image {
    border: 3px solid #7d3c98 !important;
    box-shadow: 0 0 10px rgba(125, 60, 152, 0.6) !important;
    transform: scale(1.02) !important;
    transition: all 0.3s ease !important;
    position: relative !important;
    z-index: 2 !important;
}

/* Điều chỉnh padding và margin để viền hiển thị rõ ràng hơn */
#productCarousel .item {
    padding: 3px !important;
    margin: 2px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    position: relative !important;
    border: 3px solid transparent !important;
}

#productCarousel .item:hover {
    opacity: 0.9 !important;
}

/* ................................................ */
.product-details-sections {
    margin-top: 20px;
    padding: 0;
    font-family: 'Roboto', sans-serif;
}

.dropdown-section {
    border-bottom: 1px solid #e5e5e5;
    margin-bottom: 15px;
}

.dropdown-title {
    width: 100%;
    padding: 10px 15px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #fff;
    font-size: 16px;
    font-weight: 500;
    color: #333;
    cursor: pointer;
    text-align: left;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: border-color 0.3s, background-color 0.3s;
}

.dropdown-title:hover {
    background-color: #f5f5f5;
}

.dropdown-section.active .dropdown-title {
    border-color: #007bff;
    background-color: #e6f0fa;
}

.dropdown-arrow {
    font-size: 12px;
    transition: transform 0.3s;
}

.dropdown-section.active .dropdown-arrow {
    transform: rotate(180deg);
}

.dropdown-content {
    display: none;
    padding: 15px;
    border: 1px solid #ccc;
    border-top: none;
    border-radius: 0 0 5px 5px;
    background-color: #fff;
    margin-top: -1px;
}

.dropdown-section.active .dropdown-content {
    display: block;
}

/* ==================== MEDIA QUERY 576px - CONSOLIDATED ==================== */
@media (max-width: 576px) {

    /* Navbar further reduced */
    .navbar {
        height: 60px !important;
        padding: 5px 0;
    }

    .container-fluid {
        padding: 3px 10px;
    }

    .navbar-brand img {
        max-height: 30px;
    }

    /* Icons further reduced */
    .section-right {
        gap: 12px;
    }

    .section-right .cart_icon,
    .section-right .user a {
        width: 36px;
        height: 36px;
    }

    .section-right .cart_icon i,
    .section-right .user a i {
        font-size: 16px;
    }

    body {
        padding-top: 60px;
    }

    .container {
        padding: 10px 5px;
    }

    /* At-a-glance mobile */
    .at-a-glance .combined-features {
        flex-direction: column;
        align-items: flex-start;
    }

    .at-a-glance .combined-features .separator {
        display: none;
    }

    .at-a-glance .combined-features .feature-item:last-child {
        margin-top: 10px;
    }

    /* Free delivery mobile */
    .free-delivery {
        padding: 10px;
        font-size: 14px;
    }

    .free-delivery p:first-child {
        font-size: 14px;
    }

    .free-delivery p:last-child {
        font-size: 12px;
    }

    /* Dropdown mobile */
    .dropdown-title {
        font-size: 14px;
        padding: 8px 12px;
    }

    .dropdown-content {
        padding: 10px;
    }

    /* Reviews mobile */
    .review-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .review-item {
        padding: 15px;
    }

    .submit-btn {
        width: 100%;
    }
}

/* ............................................................................ */

.special-heading {
    font-size: 24px;
    /* Kích thước chữ vừa phải */
    margin: 20px 0;
    /* Khoảng cách trên và dưới */
    padding: 0 15px;
    /* Khoảng cách bên trái/phải để tránh bị ép sát mép */
    overflow: visible;
    /* Đảm bảo không bị cắt bởi overflow */
    position: relative;
    /* Đảm bảo tiêu đề không bị che bởi các phần tử khác */
    z-index: 1;
    /* Đặt z-index cao hơn để tránh bị che */
    white-space: nowrap;
    /* Ngăn chữ bị xuống dòng */
}

.container {
    min-width: 73vw;
    margin: 0 auto;
    padding: 20px 15px;
    /* Đảm bảo đủ padding bên trái/phải */
    overflow-x: visible;
    /* Thay vì hidden, để nội dung không bị cắt */
}

.related,
.bestseller {
    padding: 0 15px;
    /* Đảm bảo có khoảng cách bên trong */
    overflow: visible;
    /* Ngăn cắt nội dung */
}

/* Đã gộp vào media query 768px chính */

@media (max-width: 425px) {
    .special-heading {
        font-size: 18px;
        /* Giảm thêm trên màn hình rất nhỏ */
        padding: 0 5px;
    }

    .container {
        padding: 10px 5px;
    }
}

/* ..........................Dropdown......................... */

/* CSS cho các phần dropdown */
.dropdown-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
}

.dropdown-section.active .dropdown-content {
    max-height: 1000px;
    /* đủ lớn để hiển thị nội dung */
}

/* ...........................total capacity, installation Depth.............................. */
/* Styling cho phần Power Options */
.product-power {
    margin-bottom: 20px;
    font-family: 'Roboto', sans-serif;
}

.product-power .power-label {
    font-size: 16px;
    color: #333;
    margin-bottom: 12px;
    font-weight: bold;
}

.product-power .power-value {
    font-weight: normal;
}

.product-power .power-options {
    display: flex;
    gap: 15px;
}

.product-power .power-option {
    padding: 10px 20px;
    border: 2px solid #ddd;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 14px;
    color: #333;
    text-align: center;
}

.product-power .power-option:hover {
    border-color: #aaa;
}

.product-power .power-option.active {
    border-color: #7d3c98;
    box-shadow: 0 0 8px rgba(125, 60, 152, 0.5);
    transform: scale(1.05);
}

/* Styling cho phần Color Options */
.product-color {
    margin-bottom: 20px;
    font-family: 'Roboto', sans-serif;
}

.product-color .color-label {
    font-size: 16px;
    color: #333;
    margin-bottom: 12px;
    font-weight: bold;
}

.product-color .color-value {
    font-weight: normal;
}

.product-color .color-options {
    display: flex;
    gap: 15px;
}

.product-color .color-option {
    width: 60px;
    height: 60px;
    border: 2px solid #ddd;
    border-radius: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s ease;
}

.product-color .color-option:hover {
    border-color: #aaa;
}

.product-color .color-option.active {
    border-color: #7d3c98;
    box-shadow: 0 0 8px rgba(125, 60, 152, 0.5);
    transform: scale(1.05);
    position: relative;
}

/* Checkmark for active color option in custom.css - positioned outside the border */
.product-color .color-option.active .color-checkmark {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 20px;
    height: 20px;
    background: #7d3c98;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    border: 2px solid white;
}

.product-color .color-checkmark::after {
    content: '✓';
    color: white;
    font-size: 12px;
    font-weight: bold;
}

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

/* Styling cho phần Total Capacity Options */
.product-capacity {
    margin-bottom: 20px;
    font-family: 'Roboto', sans-serif;
}

.product-capacity .capacity-options {
    display: flex;
    gap: 10px;
    margin-top: 10px;
}

.product-capacity .capacity-label {
    font-size: 16px;
    color: #333;
    margin-bottom: 12px;
    font-weight: bold;
}

.product-capacity .capacity-value {
    font-weight: normal;
}

.product-capacity .capacity-option {
    padding: 8px 15px;
    border: 2px solid #ddd;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    min-width: 100px;
    text-align: center;
    position: relative;
    background-color: #fff;
}

.product-capacity .capacity-option:hover {
    border-color: #6a11cb;
    box-shadow: 0 0 8px rgba(106, 17, 203, 0.2);
    transform: translateY(-2px);
}

.product-capacity .capacity-option.active {
    border-color: #6a11cb;
    background-color: rgba(106, 17, 203, 0.05);
    color: #6a11cb;
    font-weight: bold;
    transform: scale(1.05);
    box-shadow: 0 0 10px rgba(106, 17, 203, 0.3);
}

.product-capacity .capacity-option:active {
    transform: scale(0.95);
}

/* Styling cho phần Installation Depth Options */
.product-depth {
    margin-bottom: 20px;
    font-family: 'Roboto', sans-serif;
}

.product-depth .depth-label {
    font-size: 16px;
    color: #333;
    margin-bottom: 12px;
    font-weight: bold;
}

.product-depth .depth-value {
    font-weight: normal;
}

.product-depth .depth-options {
    display: flex;
    gap: 10px;
    margin-top: 10px;
}

.product-depth .depth-option {
    padding: 8px 15px;
    border: 2px solid #ddd;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 120px;
    text-align: center;
    position: relative;
    background-color: #fff;
}

.product-depth .depth-option:hover {
    border-color: #6a11cb;
    box-shadow: 0 0 8px rgba(106, 17, 203, 0.2);
    transform: translateY(-2px);
}

.product-depth .depth-option.active {
    border-color: #6a11cb;
    background-color: rgba(106, 17, 203, 0.05);
    color: #6a11cb;
    font-weight: bold;
    transform: scale(1.05);
    box-shadow: 0 0 10px rgba(106, 17, 203, 0.3);
}

.product-depth .depth-option:active {
    transform: scale(0.95);
}

/* Hiệu ứng ripple khi click */
.product-capacity .capacity-option::after,
.product-depth .depth-option::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(106, 17, 203, 0.1);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.3s, height 0.3s;
    z-index: -1;
    opacity: 0;
}

.product-capacity .capacity-option:active::after,
.product-depth .depth-option:active::after {
    width: 150px;
    height: 150px;
    opacity: 1;
}

/* Customer Reviews Section - Enhanced */
.customer-reviews-section {
    margin-top: 40px;
    padding: 30px;
    border-top: 1px solid #e0e0e0;
    background-color: #fafafa;
    border-radius: 8px;
    font-family: 'Roboto', sans-serif;
}

.customer-reviews-section .special-heading {
    font-size: 24px;
    margin-bottom: 25px;
    color: #333;
    position: relative;
}

/* Cải thiện phần tóm tắt đánh giá */
.reviews-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    align-items: flex-start;
    margin-bottom: 30px;
    background-color: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

/* Cải thiện phần điểm đánh giá trung bình */
.average-rating {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 15px 25px;
    border-right: 1px solid #eee;
    min-width: 150px;
}

.rating-score {
    font-size: 42px;
    font-weight: bold;
    color: #333;
    line-height: 1;
    margin-bottom: 10px;
}

.star-rating {
    margin: 8px 0;
}

.star-rating i {
    color: #f0ad4e;
    font-size: 18px;
    margin: 0 2px;
}

.review-count {
    font-size: 14px;
    color: #666;
    margin-top: 5px;
}

/* Cải thiện phần phân bố đánh giá */
.rating-distribution {
    flex: 1;
    min-width: 250px;
    padding: 10px 0;
}

.rating-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}

.star-level {
    display: flex;
    align-items: center;
    gap: 5px;
    width: 40px;
    font-weight: 500;
}

.star-level i {
    color: #f0ad4e;
    font-size: 14px;
}

.bar {
    flex: 1;
    height: 10px;
    background-color: #eee;
    border-radius: 20px;
    overflow: hidden;
}

.fill {
    height: 100%;
    background-color: #f0ad4e;
    border-radius: 20px;
    transition: width 0.5s ease;
}

.percentage {
    font-size: 14px;
    color: #666;
    width: 120px;
    text-align: left;
}

/* Cải thiện nút đánh giá */
.write-review-btn {
    padding: 12px 24px;
    background-color: #7d3c98;
    color: #fff;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 8px rgba(125, 60, 152, 0.2);
    margin-left: auto;
    align-self: center;
}

.write-review-btn:hover {
    background-color: #6a1b9a;
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(125, 60, 152, 0.3);
}

/* Cải thiện form đánh giá */
.review-form {
    margin-bottom: 35px;
    padding: 25px;
    background-color: white;
    border-radius: 8px;
    border: 1px solid #e5e5e5;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.review-form h3 {
    font-size: 20px;
    margin-bottom: 20px;
    color: #333;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
}

.submit-review {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.rating-input {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 5px;
}

.rating-input label {
    font-size: 16px;
    font-weight: 500;
    color: #333;
}

.stars {
    display: flex;
    gap: 8px;
}

.stars input {
    display: none;
}

.stars label {
    cursor: pointer;
}

.stars label i {
    font-size: 24px;
    color: #ddd;
    transition: color 0.3s ease;
}

.stars input:checked~label i,
.stars label:hover i,
.stars label:hover~label i {
    color: #f0ad4e;
}

/* Cải thiện phần form input */
.form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-group label {
    font-size: 15px;
    font-weight: 500;
    color: #333;
}

.form-group input,
.form-group textarea {
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 15px;
    width: 100%;
    transition: border-color 0.3s;
}

.form-group input:focus,
.form-group textarea:focus {
    border-color: #7d3c98;
    outline: none;
    box-shadow: 0 0 0 2px rgba(125, 60, 152, 0.1);
}

.form-group textarea {
    resize: vertical;
    min-height: 120px;
}

.submit-btn {
    padding: 12px 24px;
    background-color: #7d3c98;
    color: #fff;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 8px rgba(125, 60, 152, 0.2);
    margin-top: 10px;
    align-self: flex-start;
}

.submit-btn:hover {
    background-color: #6a1b9a;
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(125, 60, 152, 0.3);
}

/* Cải thiện danh sách đánh giá */
.reviews-list {
    margin-top: 30px;
}

.reviews-list h3 {
    font-size: 20px;
    margin-bottom: 20px;
    color: #333;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
}

.no-reviews {
    font-size: 15px;
    color: #666;
    font-style: italic;
    text-align: center;
    padding: 20px;
    background-color: #f9f9f9;
    border-radius: 6px;
}

.review-item {
    padding: 20px;
    margin-bottom: 20px;
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.review-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.reviewer-info {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.reviewer-name {
    font-weight: 600;
    font-size: 16px;
    color: #333;
}

.review-date {
    font-size: 14px;
    color: #888;
}

.review-rating i {
    color: #f0ad4e;
    font-size: 16px;
    margin-right: 2px;
}

.review-title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 10px;
    color: #333;
}

.review-content {
    font-size: 15px;
    color: #555;
    line-height: 1.6;
}

/* Responsive adjustments */
@keyframes highlightReviews {
    0% {
        background-color: rgba(106, 17, 203, 0.1);
    }

    100% {
        background-color: #fafafa;
    }
}

.highlight-section {
    animation: highlightReviews 1.5s ease;
}

/* show ảnh phía dưới ảnh lớn  */

/* Styling cho thumbnail sản phẩm */

.thumbnail-item:hover {
    opacity: 1;
    border-color: #e0e0e0;
}

.thumbnail-item.active-thumbnail {
    border: 2px solid #860070;
    opacity: 1;
    box-shadow: 0 0 5px rgba(134, 0, 112, 0.5);
}

.thumbnail-item img {
    width: 80px;
    height: auto;
    display: block;
}

/* Đảm bảo hiệu ứng trượt ngang mượt mà */
.owl-carousel .owl-stage {
    transition: all 0.25s ease !important;
}

/* Đảm bảo không có hiệu ứng phức tạp khác */
.owl-carousel .animated {
    animation-duration: 0s !important;
}

/* CSS cho ảnh sản phẩm và thumbnails */
#productCarousel {
    margin-bottom: 15px;
    position: relative;
}

#productCarousel .item {
    position: relative;
}

#productCarousel .item img {
    display: block;
    width: 100%;
    height: auto;
}

.product-thumbnails {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 15px;
    justify-content: center;
}

.thumbnail-item {
    cursor: pointer;
    border: 2px solid transparent;
    opacity: 0.7;
    transition: border-color 0.2s ease, opacity 0.2s ease;
    margin: 0 4px;
    position: relative;
    overflow: hidden;
}

/* Đảm bảo hiệu ứng chuyển slide mượt mà */
.owl-carousel .owl-stage-outer {
    overflow: hidden;
}

.owl-carousel .owl-stage {
    transition: all 0.3s ease !important;
    display: flex;
}

.owl-carousel .owl-item {
    float: none;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Tắt hiệu ứng không cần thiết */
.owl-carousel .animated {
    animation-duration: 0s !important;
}

/* Blog Custom Styles - Moved to blog.css */
/* Blog styling has been moved to a separate file: /css/blog.css */

#iframe2d {
    width: 100%;
    /* height: 70vh; */
    height: 800px;
    max-width: 100%;
}

/* Mobile responsive for iframe2d */
@media (max-width: 768px) {
    #iframe2d {
        width: 100%;
        /* height: 60vh; */
        max-width: 100vw;
    }
}

@media (max-width: 425px) {
    #iframe2d {
        width: 100vw;
        /* height: 50vh; */
        max-width: 100vw;
    }
}

.cbestSeller_slider {
    margin-top: 20px;
}

.carousel_related_bestSeller .owl-thumbs,
.carousel_related_bestSeller .owl-nav {
    display: none !important;
}

.carousel_related_bestSeller .item .product-image .wp-post-image img {
    height: 200px;
}

.shop-single-v2 .attribute-group .attribute-options {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 1px solid #201d1d;
    padding: 6px 6px;
    min-width: 80px;
    cursor: pointer;
    position: relative;
    border-radius: 4px;
    transition: all 0.3s;
    cursor: pointer;
    user-select: none;
    transition: all 0.2s ease;
}

.shop-single-v2 .attribute-group .attribute-options:hover {
    background-color: #e0cb92;
    color: white;
}

.shop-single-v2 .attribute-group .attribute-options.active {
    border-color: #cdb166;
    background-color: #fff1eb;
    color: #cdb166;
    font-weight: bold;
}

.shop-single-v2 .attribute-group {
    margin-bottom: 10px;
}

.shop-single-v2 .attribute-group .product-attribute {
    gap: 6px;
    margin-bottom: 8px;
    align-items: center;
    margin-left: 2px;
}

.shop-single-v2 .attribute-group .product-attribute strong {
    padding-left: 0;
}

.shop-single-v2 .attribute-group .attribute-options {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    border-radius: 5px;
}

.attribute-options.active::after {
    content: '✔';
    position: absolute;
    bottom: 6px;
    right: 5px;
    font-size: 14px;
    color: #cca159;
}

#menu2d_container .menu-button {
    position: relative;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    background-color: white;
    cursor: pointer;
    background-size: 24px 24px;
    background-repeat: no-repeat;
    background-position: center;
    transition: opacity 0.3s ease, transform 0.3s ease;
    opacity: 1;
}

#menu2d_container .menu-button:hover {
    transform: scale(1.1);
    background-color: #d1b57c;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

#menu2d_container .menu-button.show {
    opacity: 1;
    transform: scale(1);
}

/* Khung bao quanh */
#menu2d_container #object_frame {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

/* Animation */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: scale(0);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Menu 3D container */
#menu3d_container {
    position: absolute;
    width: 180px;
    height: 48px;
    display: none;
    background-color: white;
    z-index: 90;
    transform: translate(-50%, -50%);
    pointer-events: auto;
    border-radius: 6%;
    border: 2px solid #d1b57c;
}

/* Nút trong menu */
#menu3d_container .menu-button {
    position: relative;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    background-color: white;
    cursor: pointer;
    background-size: 24px 24px;
    background-repeat: no-repeat;
    background-position: center;
    transition: opacity 0.3s ease, transform 0.3s ease;
    opacity: 1;
}

#menu3d_container .menu-button:hover {
    transform: scale(1.1);
    background-color: #d1b57c;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

#menu3d_container .menu-button.show {
    opacity: 1;
    transform: scale(1);
}

/* Khung bao quanh */
#menu3d_container #object_frame {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

/* Animation */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: scale(0);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.popup-overlay.hidden {
    display: none;
}

.galleries .list-item .item {
    display: flex;
    flex-direction: column;
    flex: 0 0 calc((100% - 3 * 16px) / 4);
}

/* Xử lý phần hamburger menu và logo khi giảm tỉ lệ khung hình */

@media (max-width: 991.98px) {
    .navbar {
        padding: 10px 15px;
    }

    .navbar-brand {
        /* Đảm bảo logo không bị chồng lên menu */
        position: relative;
        z-index: 1;
    }

    .navbar-collapse {
        position: absolute;
        top: 100%;
        /* Đẩy menu xuống dưới header */
        left: 0;
        right: 0;
        background: white;
        /* hoặc màu nền phù hợp với theme của bạn */
        padding: 15px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        z-index: 1000;
        /* Animation để menu mượt mà */
        opacity: 0;
        visibility: hidden;
        transform: translateY(-10px);
        transition: all 0.3s ease;
        max-height: 0;
        overflow: hidden;
    }

    .navbar-collapse.show {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        max-height: 500px;
        /* Đủ cao cho tất cả menu items */
    }

    .navbar-nav {
        margin-top: 10px;
    }

    .nav-item {
        padding: 8px 0;
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    }

    .nav-item:last-child {
        border-bottom: none;
    }
}

/* ==================== CART & USER ICONS STYLING ==================== */
.section-right .cart,
.section-right .user {
    position: relative;
}

.section-right .cart_icon,
.section-right .user a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 45px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
    text-decoration: none;
    cursor: pointer;
}

.section-right .cart_icon i,
.section-right .user a i {
    font-size: 20px;
    color: grey;
    transition: all 0.3s ease;
}

/* Hover effects */
.section-right .cart_icon:hover,
.section-right .user a:hover {
    background: #dccea5;
    border-color: #dccea5;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(220, 206, 165, 0.3);
}

.section-right .cart_icon:hover i,
.section-right .user a:hover i {
    color: #fff;
    transform: scale(1.1);
}

/* Active state */
.section-right .cart_icon:active,
.section-right .user a:active {
    transform: translateY(0);
}

/* Cart badge */
.section-right .cart::after {
    content: attr(data-count);
    position: absolute;
    top: -8px;
    right: -8px;
    width: 20px;
    height: 20px;
    background: #e74c3c;
    color: white;
    border-radius: 50%;
    font-size: 12px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: scale(0);
    transition: all 0.3s ease;
}

.section-right .cart.has-items::after {
    opacity: 1;
    transform: scale(1);
}

/* Logo overflow fix */
.navbar-brand {
    display: flex;
    align-items: center;
    height: 100%;
    cursor: pointer;
}

.navbar-brand img {
    object-fit: contain;
    width: auto;
    height: auto;
    max-height: 50px;
}

/* ==================== NAVBAR RESPONSIVE FIX ==================== */

/* Điều chỉnh cho tablet/small desktop (9xx px) */
@media (max-width: 1024px) and (min-width: 769px) {
    .navbar {
        height: 75px !important;
        /* Giảm từ 95px xuống 75px */
        padding: 8px 0;
    }

    .container-fluid {
        padding: 8px 20px;
        align-items: center;
    }

    .navbar-brand img {
        max-height: 45px;
        /* Giảm logo để vừa với navbar */
    }

    .section-right .cart_icon,
    .section-right .user a {
        width: 42px;
        height: 42px;
    }

    .section-right .cart_icon i,
    .section-right .user a i {
        font-size: 19px;
    }

    body {
        padding-top: 75px;
    }
}

/* ==================== MEDIA QUERY 768px - CONSOLIDATED ==================== */
@media (max-width: 768px) {

    /* Navbar adjustments */
    .navbar {
        height: 65px !important;
        padding: 6px 0;
    }

    .container-fluid {
        padding: 5px 15px;
        align-items: center;
    }

    .navbar-brand img {
        max-height: 35px;
    }

    /* Icons adjustments */
    .section-right {
        gap: 15px;
    }

    .section-right .cart_icon,
    .section-right .user a {
        width: 38px;
        height: 38px;
    }

    .section-right .cart_icon i,
    .section-right .user a i {
        font-size: 17px;
    }

    .section-right img,
    .section-right .bi {
        width: 22px;
        height: 22px;
        min-width: 22px;
        font-size: 22px;
    }

    /* Layout adjustments */
    body {
        padding-top: 65px;
    }

    .h-25 {
        height: 65px;
    }

    .product {
        flex-direction: column;
    }

    .product-image,
    .product-details {
        max-width: 100%;
        padding-right: 0;
    }

    .container {
        padding: 15px 10px;
    }

    /* Room shape mobile */
    .room-shape ul {
        flex-wrap: wrap;
    }

    .room-shape ul li {
        margin-bottom: 20px;
    }

    .symbols .element-item {
        max-width: 100px;
    }

    .symbols .element-container {
        margin-bottom: 20px;
        padding-left: 10px;
        padding-top: 10px;
    }

    .canvas-wrap #canvas {
        padding-left: 0;
        width: 100% !important;
        height: 100% !important;
        max-width: 100vw;
        max-height: 100vh;
    }

    #canvas-switch-view-mode {
        left: 0;
    }

    .my-selected {
        margin-top: 20px;
        margin-bottom: 10px;
    }

    #child-element .element-image {
        min-width: 150px;
        max-width: 150px;
        min-height: 150px;
        max-height: 150px;
    }

    #elementModal button.close {
        top: 90px;
    }

    #elementModal .element-content {
        width: 360px;
        padding-top: 130px;
    }

    .special-heading {
        font-size: 20px;
        padding: 0 10px;
    }

    /* Reviews section mobile */
    .customer-reviews-section {
        padding: 20px 15px;
    }

    .reviews-summary {
        flex-direction: column;
        gap: 20px;
    }

    .average-rating {
        border-right: none;
        border-bottom: 1px solid #eee;
        padding-bottom: 20px;
        width: 100%;
    }

    .rating-distribution {
        width: 100%;
    }

    .write-review-btn {
        width: 100%;
        margin-top: 15px;
    }
}

/* Small Mobile */
/* Đã gộp vào media query 576px chính */

/* Styling cho thumbnail sản phẩm */

.thumbnail-item:hover {
    opacity: 1;
    border-color: #e0e0e0;
}

.thumbnail-item.active-thumbnail {
    border: 2px solid #860070;
    opacity: 1;
    box-shadow: 0 0 5px rgba(134, 0, 112, 0.5);
}

.thumbnail-item img {
    width: 80px;
    height: auto;
    display: block;
}

/* CSS mới cho thumbnail nhỏ hơn */
.thumbnail_slider .thumbnail-item {
    width: 50px !important;
    height: 50px !important;
    margin: 0 2px !important;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.thumbnail_slider .thumbnail-item:hover {
    border-color: #860070;
    transform: scale(1.05);
}

.thumbnail_slider .thumbnail-item.active {
    border: 3px solid #860070 !important;
    box-shadow: 0 0 10px rgba(134, 0, 112, 0.3) !important;
    transform: scale(1.1) !important;
    position: relative !important;
    z-index: 10 !important;
}

.thumbnail_slider .thumbnail-item.active::after {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    border: 2px solid #860070 !important;
    border-radius: 6px !important;
    pointer-events: none !important;
    animation: pulse 2s infinite !important;
    z-index: 5 !important;
}

/* Hiệu ứng transition cho ảnh chính */
.woocommerce-product-gallery .owl-carousel .item img {
    transition: opacity 0.3s ease;
}

.thumbnail_slider .thumbnail-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    display: block;
}

/* Ẩn các thumbnail item không hợp lệ */
.thumbnail_slider .thumbnail-item:empty,
.thumbnail_slider .thumbnail-item img[src=''],
.thumbnail_slider .thumbnail-item img[src='undefined'] {
    display: none !important;
}

/* Ẩn các item có ảnh lỗi */
.thumbnail_slider .thumbnail-item img[style*='display: none'] {
    display: none !important;
}

/* Ẩn owl-thumbs được tạo tự động bởi Owl Carousel */
.owl-thumbs {
    display: none !important;
}

.thumbnail_slider .owl-thumbs {
    display: none !important;
}

/* Ẩn các owl-thumb-item */
.owl-thumb-item {
    display: none !important;
}

.thumbnail_slider .owl-thumb-item {
    display: none !important;
}

/* Đảm bảo owl-carousel cho thumbnail có kích thước phù hợp */
.thumbnail_slider .owl-carousel {
    display: flex;
    align-items: center;
}

.thumbnail_slider .owl-stage {
    display: flex;
    align-items: center;
}

.thumbnail_slider .owl-item {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* CSS cho navigation arrows của thumbnail carousel */
.thumbnail_slider .owl-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    display: flex;
    justify-content: space-between;
    pointer-events: none;
}

.thumbnail_slider .owl-nav button {
    width: 30px;
    height: 30px;
    background: rgba(255, 255, 255, 0.9) !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
    transition: all 0.3s ease;
}

.thumbnail_slider .owl-nav button:hover {
    background: #860070 !important;
    color: white !important;
    border-color: #860070 !important;
}

.thumbnail_slider .owl-nav button.disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.thumbnail_slider .owl-nav button i {
    font-size: 16px;
    color: #333;
}

.thumbnail_slider .owl-nav button:hover i {
    color: white;
}

/* CSS cho transition opacity khi cập nhật ảnh */
.woocommerce-product-gallery .owl-carousel .item img {
    transition: opacity 0.3s ease;
}

/* CSS cho thumbnail active state */
.thumbnail_slider .thumbnail-item {
    width: 50px !important;
    height: 50px !important;
    margin: 0 2px !important;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.thumbnail_slider .thumbnail-item:hover {
    border-color: #860070;
    transform: scale(1.05);
}

.thumbnail_slider .thumbnail-item.active {
    border: 3px solid #860070 !important;
    box-shadow: 0 0 10px rgba(134, 0, 112, 0.3) !important;
    transform: scale(1.1) !important;
    position: relative !important;
    z-index: 10 !important;
}

.thumbnail_slider .thumbnail-item.active::after {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    border: 2px solid #860070 !important;
    border-radius: 6px !important;
    pointer-events: none !important;
    animation: pulse 2s infinite !important;
    z-index: 5 !important;
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(134, 0, 112, 0.7);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(134, 0, 112, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(134, 0, 112, 0);
    }
}

.thumbnail_slider .thumbnail-item.active {
    border: 3px solid #860070 !important;
    box-shadow: 0 0 10px rgba(134, 0, 112, 0.3) !important;
    transform: scale(1.1) !important;
    position: relative !important;
    z-index: 10 !important;
}

.thumbnail_slider .thumbnail-item.active::after {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    border: 2px solid #860070 !important;
    border-radius: 6px !important;
    pointer-events: none !important;
    animation: pulse 2s infinite !important;
    z-index: 5 !important;
}

.nav-link {
    cursor: pointer;
}

.hide {
    display: none !important;
}

/* Reset padding cho body trong iframe */
iframe body {
    padding: 0 !important;
    margin: 0 !important;
}

/* Hoặc sử dụng selector cụ thể hơn cho iframe */
#iframe2d body {
    padding: 0 !important;
    margin: 0 !important;
}

/* CSS cho iframe body - sử dụng attribute selector */
iframe[src*='2d/home2d.html'] body {
    padding: 0 !important;
    margin: 0 !important;
}

/* CSS cho iframe body - sử dụng class hoặc id cụ thể */
.iframe-container iframe body,
#iframe2d body {
    padding: 0 !important;
    margin: 0 !important;
}

#scrollToTopBtn {
    position: fixed;
    right: 24px;
    bottom: 24px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: none;
    background: #b0ad82;
    color: #fff;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
    z-index: 999;
}

#scrollToTopBtn.show {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

#scrollToTopBtn:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 4px;
}

/* Door style applied badges in right list */
.door-style-applied-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    justify-content: center;
    margin-top: 6px;
    padding: 0 4px;
}

.door-style-badge {
    display: inline-block;
    padding: 2px 8px;
    background: #27ae60;
    color: white;
    font-size: 11px;
    font-weight: 600;
    border-radius: 10px;
    white-space: nowrap;
    line-height: 1.4;
}

@media (max-width: 768px) {
    .door-style-badge {
        font-size: 10px;
        padding: 1px 6px;
    }
}