.flex-grow-2 {
    -ms-flex-positive: 2 !important;
    flex-grow: 2 !important;
}

.gap-10 {
    gap: 10px;
}

.gap-20 {
    gap: 20px;
}

.gap-30 {
    gap: 30px;
}

.gap-40 {
    gap: 40px;
}

.header-hp-1 .header-left {
    display: flex;
    display: -webkit-flex;
}

.header-hp-1 .menu-desktop-inner .main-menu .menu-item {
    padding: 23px 0 20px 0;
}

.header-hp-1 .menu-desktop-inner .main-menu .menu-item>a {
    padding: 0 16px;
}

.header-hp-1 .menu-desktop-inner .logo {
    padding: 21px 30px 20px;
}

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

.room-section.section-box {
    padding: 0;
}

.room-section .room-set .widget+.widget {
    margin-top: 30px;
}

.room-section .room-set-right .widget+.widget {
    margin-top: 10px;
}

.widget-title {
    font-size: 16px;
    line-height: 1.2;
    font-weight: 600;
    margin-bottom: 8px;
}

/* Room Shape & Kitchen Space */
.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;
}

.room-shape ul {
    display: flex;
    flex-wrap: nowrap;
}

.room-shape .radio-picture,
.kitchen-space .kitchen-space-item {
    max-width: 99px;
    flex: 12.5% 0 0;
    position: relative;
    border: px 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 {
    border-color: rgba(0, 102, 153, 0.3);
}

.room-shape .radio-picture.checked:after,
.kitchen-space .kitchen-space-item.checked:after {
    pointer-events: none;
    position: absolute;
    bottom: -13px;
    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: 90px;
    -moz-border-radius: 90px;
    border-radius: 90px;
}

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

.room-shape [class*='radio-picture'] label,
.kitchen-space .kitchen-space-item label,
.elements .element-item label {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    cursor: pointer;
    display: block;
    height: 100%;
    margin: 0;
}

.elements-containers {
    display: inline-block;
}

.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 {
    padding-left: 24px;
    padding-right: 24px;
    max-width: 380px;
}

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

/* .kitchen-space-room-shape .owl-nav {
    margin-top: 10;
} */
/* .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: -20px;
}

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

/* .canvas-container {
    aspect-ratio: 3/2;
    width: 100%;
    margin-top: 20px;
    margin-bottom: 20px;
    border: 1px solid #e6d4bc;
} */
#iframe2d {
    width: 100%;
    aspect-ratio: 3/2;
}

#container {
    border: 1px solid #e6d4bc;
    margin: 20px 0;
}

/* .grid-bordered {
    --grid-size: 40px; 
    background-image:
            linear-gradient(to right, #cecece 1px, transparent 1px),
            linear-gradient(to bottom, #cecece 1px, transparent 1px);
    background-size: var(--grid-size) var(--grid-size);
    border: 1px solid #cecece;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
} */
.price {
    border: 1px solid transparent;
    padding: 0 5px;
    background: white;
    box-shadow: 1px 1px 1px 2px rgba(0, 0, 0, 0.3);
    color: #43a047;
    font-size: 20px;
    font-weight: 700;
    border-radius: 5px;
}

.view-style .btn-icon img {
    max-height: 48px;
}

/* Element */
.element-item {
    position: relative;
}

.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: 90px;
    -moz-border-radius: 90px;
    border-radius: 90px;
}

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

.element-item .element-name {
    /* white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 65px; */
    font-size: 14px;
    line-height: 1.5;
}

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

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

/* Popup Modal */
.modal {
    z-index: 10000;
}

#child-element {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 10px;
}

#child-element .element-title {
    font-size: 14px;
    line-height: 1.5;
}

#elementModal .close {
    position: absolute;
    top: -10px;
    right: -10px;
    background: #007bff;
    color: #fff;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-border-radius: 90px;
    -moz-border-radius: 90px;
    border-radius: 90px;
    opacity: 1;
    font-size: 15px;
    padding: 5px;
    outline: none;
    z-index: 100001;
}

.modal-backdrop.show {
    opacity: 0.2;
    left: 0;
}

.btn-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background-color: transparent;
    box-shadow: 1px 1px 1px 2px rgba(0, 0, 0, 0.2);
}

.btn-icon:hover {
    transition: 0.1s ease-in-out;
    background-color: #d1b57c;
    color: #fff;
    box-shadow: 0 0 15px rgba(209, 181, 124, 0.8);
    border: 1px solid #d1b57c;
    transform: scale(1.03);
}

.btn-icon img {
    max-height: 24px;
    color: #fff;
}

.btn-icon:hover img {
    filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%);
    /* Filter trên sẽ chuyển icon thành màu trắng */
}

@media screen and (max-width: 767px) {
    #room-shape {
        width: 800px;
    }

    .btn-icon .text {
        font-size: 10px;
    }

    .zoom-btn {
        width: 35px;
        height: 35px;
    }

    /* Project list table text size on mobile */
    #project-file-popup-modal th,
    #project-file-popup-modal td,
    #project-file-popup-modal h5 {
        font-size: 12px !important;
    }

    #project-file-popup-modal td {
        padding: 5px !important;
    }

    /* Fix selector: .popup-modal is the same element as #project-file-popup-modal, not a child */
    #project-file-popup-modal .btn {
        /* font-size: 12px !important;
        margin-right: 0px !important;
        padding: 5px 10px !important; */
    }
}

@media screen and (min-width: 767px) {
    .modal-dialog {
        max-width: 500px;
        margin-top: 100px;
    }

    .modal-content {
        -webkit-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
        border: 0 solid rgba(0, 0, 0, 0.2);
    }
}

/* Mobile responsive */
@media screen and (max-width: 1024px) {
    .room-wrap {
        flex-direction: column;
    }

    .room-wrap>* {
        -ms-flex-positive: 1 !important;
        flex-grow: 1 !important;
    }

    .btn-action-icon {
        /* width: 50px; */
        height: 50px;
    }

    .room-toolbar {
        margin-top: 10px;
    }

    .btn-price {
        margin-left: 20px;
    }
}

@media screen and (max-width: 767px) {

    .flex-grow-2,
    .flex-grow-1 {
        flex-grow: 1;
        /* Cả hai div đều chiếm toàn bộ */
    }

    .room-set {
        flex-direction: column-reverse;
    }

    .room-set .btn {
        font-size: 14px;
    }

    .room-toolbar {
        -ms-flex-direction: row !important;
        flex-direction: row !important;
        align-items: flex-end;
    }

    .room-toolbar .gap-10 {
        gap: 5px;
    }

    .room-toolbar .align-items-center {
        -ms-flex-align: flex-end !important;
        align-items: flex-end !important;
    }

    .modal-dialog {
        margin-top: 98px;
    }

    .element-item {
        display: inline-block;
    }

    .element-item .element-name {
        font-size: 12px;
    }

    .room-shape .radio-picture {
        max-width: 82px;
    }

    .room-shape .radio-picture.checked:after,
    .kitchen-space .kitchen-space-item.checked:after {
        content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 40 40' fill='none'%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");
    }

    .view-style {
        gap: 10px;
    }

    .view-style .btn {
        font-size: 12px;
    }

    .view-style .btn-icon .text {
        font-size: 12px;
        line-height: 1.2;
        max-width: 70px;
        white-space: normal;
        margin-top: 5px;
    }

    .view-style .btn-icon img {
        max-height: 36px;
        margin-bottom: 0;
    }

    .gap-20 {
        gap: 10px;
    }

    .gap-10 {
        gap: 5px;
    }

    .canvas-container {
        aspect-ratio: 1 / 1;
    }

    .btn-price {
        margin-left: 10px;
    }
}

.flex-grow-1 .room-set-right {
    margin-top: 30px;
    /* display: flex; */
    flex-wrap: wrap;
    gap: 10px;
}

.element-item input[type='radio'],
.element-item input[type='checkbox'] {
    display: none;
    /* Ẩn input mặc định */
}

/* Viền xanh khi được chọn */
.element-item.checked {
    box-shadow: 0px 4px 15px #e5dabc;
}

.element-item.checked img {
    border: 2px solid #4cc9fe;
}

/* Hiệu ứng hover */
.element-item label {
    cursor: pointer;
    display: block;
    transition: all 0.3s ease;
    margin-bottom: 0;
}

/* .kitchen-space-room-shape .owl-item {
    width: 80px !important;
    margin-right: 1px !important;
} */

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

/* Menu 2D container */
#menu2d_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 */
#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);
    }
}

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

/* 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);
    }
}

/* Styling chung cho containers */
.elements.element-containers,
.d-flex.flex-wrap.gap-10 {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* Tăng khoảng cách giữa Accessories và Island
.widget.element-container {
    margin-bottom: 10px; 
} */

.standard-wide .two-columns-detail img {
    width: 300px !important;
    height: 200px !important;
}

/* Kitchen Space Navigation Buttons */
.kitchen-space-room-shape {
    position: relative;
    /* Để định vị các nút điều hướng */
}

.kitchen-space-room-shape .owl-nav {
    display: block !important;
    position: absolute;
    top: 50%;
    width: 100%;
    transform: translateY(-50%);
    pointer-events: none;
    /* Cho phép click xuyên qua vùng nav */
}

.kitchen-space-room-shape .owl-nav [class*='owl-'] {
    display: flex !important;
    position: absolute;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin: 0;
    padding: 0;
    background: #fff !important;
    border-radius: 50%;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    pointer-events: auto;
    /* Cho phép click vào nút */
}

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

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

/* Hiệu ứng hover */
.kitchen-space-room-shape .owl-nav [class*='owl-']:hover {
    background: #d1b57c !important;
    color: #fff;
}

.kitchen-space {
    height: 110px;
    overflow: hidden;
    /* Ngăn nội dung "nhảy" */
    position: relative;
}

.kitchen-space-room-shape {
    opacity: 0;
    transition: opacity 0.3s ease;
}

.kitchen-space-room-shape.show {
    opacity: 1;
}

body.modal-open {
    overflow: hidden !important;
    position: fixed;
    width: 100%;
    height: 100%;
}

.modal-overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 1001;
}

/* Bootstrap Tooltip Customization */
.tooltip {
    font-size: 14px;
    max-width: 300px;
    z-index: 99999 !important;
}

.tooltip-inner {
    background-color: rgba(0, 0, 0, 0.9);
    color: white;
    border-radius: 4px;
    padding: 8px 12px;
    white-space: pre-wrap;
    word-wrap: break-word;
    text-align: left;
    line-height: 1.4;
}

.bs-tooltip-top .tooltip-arrow::before {
    border-top-color: rgba(0, 0, 0, 0.9);
}

.bs-tooltip-bottom .tooltip-arrow::before {
    border-bottom-color: rgba(0, 0, 0, 0.9);
}

.bs-tooltip-start .tooltip-arrow::before {
    border-left-color: rgba(0, 0, 0, 0.9);
}

.bs-tooltip-end .tooltip-arrow::before {
    border-right-color: rgba(0, 0, 0, 0.9);
}

/* Custom Tooltip Styles */
.description-content.custom-tooltip {
    position: relative;
    cursor: help;
}

.description-content.custom-tooltip:hover::after {
    content: attr(title);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(0, 0, 0, 0.9);
    color: white;
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 14px;
    white-space: pre-wrap;
    word-wrap: break-word;
    max-width: 300px;
    z-index: 99999;
    pointer-events: none;
    margin-bottom: 5px;
}

.description-content.custom-tooltip:hover::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: rgba(0, 0, 0, 0.9);
    margin-bottom: -5px;
    z-index: 99999;
    pointer-events: none;
}

.elements {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-start;
}

.elements .element-item {
    width: 80px;
    flex: 0 0 auto;
}

@media (max-width: 600px) {
    .elements .element-item {
        width: 60px;
    }
}

/* keyframes xoay vòng của reload-icon*/
@keyframes spin-once {
    from {
        transform: rotate(0deg);
    }

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

.reload-price-btn .reload-icon {
    display: inline-block;
    transform-origin: 50% 50%;
    will-change: transform;
    animation: none;
}

.reload-price-btn:hover .reload-icon {
    animation: spin-once 0.6s linear both;
}

#popup_appliance_detail.container_canva {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 1200px;
    width: 95%;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
    max-height: 95vh;
    display: flex;
    flex-direction: column;
    z-index: 999999;
}

#popup_appliance_detail .header {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid #eee;
    background: #f8f9fa;
    border-radius: 8px 8px 0 0;
    flex-shrink: 0;
    margin-bottom: 20px;
}

#popup_appliance_detail .close-btn {
    background: none;
    border: none;
    font-size: 28px;
    cursor: pointer;
    color: #666;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s ease;
}

#popup_appliance_detail .close-btn:hover {
    background-color: #f0f0f0;
    color: #333;
}

#popup_appliance_detail .appliance-detail-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
    flex: 1;
    overflow-y: auto;
    max-height: 600px;
    padding: 0px 20px;
}

#popup_appliance_detail .main-popup-content {
    display: flex;
    gap: 40px;
}

#popup_appliance_detail .left-section {
    flex: 1;
    max-width: 500px;
}

#popup_appliance_detail .right-section {
    flex: 1;
    padding-left: 20px;
}

#popup_appliance_detail .primary-image-container {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #f8f9fa;
    border-radius: 8px;
    padding: 20px;
    min-height: 300px;
}

#popup_appliance_detail .primary-appliance-image {
    max-width: 100%;
    max-height: 280px;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

#popup_appliance_detail .appliance-image-carousel {
    margin-top: 15px;
}

#popup_appliance_detail .carousel-container {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #f8f9fa;
    padding: 15px;
    border-radius: 8px;
}

#popup_appliance_detail .carousel-track {
    flex: 1;
    overflow: hidden;
    border-radius: 6px;
}

#popup_appliance_detail .carousel-images {
    display: flex;
    gap: 10px;
    transition: transform 0.3s ease;
    padding: 5px;
    overflow-x: auto;
}

#popup_appliance_detail .carousel-image {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 6px;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

#popup_appliance_detail .carousel-image:hover {
    transform: scale(1.05);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

#popup_appliance_detail .carousel-image.active {
    border-color: #d4b87c;
    box-shadow: 0 0 10px rgba(212, 184, 124, 0.5);
}

#popup_appliance_detail .carousel-btn {
    background: #d4b87c;
    color: white;
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 18px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

#popup_appliance_detail .carousel-btn:hover {
    background: #c4a86c;
}

#popup_appliance_detail .carousel-btn:disabled {
    background: #ccc;
    cursor: not-allowed;
    transform: none;
}

#popup_appliance_detail .appliance-info {
    padding: 0;
}

#popup_appliance_detail .appliance-name {
    font-size: 28px;
    font-weight: 400;
    color: #333;
    margin-bottom: 20px;
    line-height: 1.3;
}

#popup_appliance_detail .price-section {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
}

#popup_appliance_detail .current-price {
    font-size: 24px;
    font-weight: 600;
    color: #333;
}

#popup_appliance_detail .original-price {
    font-size: 16px;
    color: #999;
    text-decoration: line-through;
}

#popup_appliance_detail .print-btn {
    background: none;
    border: 1px solid #ddd;
    padding: 8px 12px;
    border-radius: 4px;
    cursor: pointer;
    color: #666;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 5px;
    margin-left: auto;
}

#popup_appliance_detail .print-btn:hover {
    background: #f5f5f5;
}

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

#popup_appliance_detail .sku-label {
    font-weight: 600;
}

#popup_appliance_detail .color-options {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 15px;
    margin-bottom: 25px;
    justify-items: start;
    word-break: break-word;
}

#popup_appliance_detail .color-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    padding: 10px;
    border-radius: 8px;
    transition: all 0.2s ease;
    position: relative;
    min-width: 80px;
    flex: 0 0 auto;
}

#popup_appliance_detail .color-option:hover {
    background: #f5f5f5;
}

#popup_appliance_detail .color-option.active {
    background: #e3f2fd;
}

#popup_appliance_detail .color-image-container {
    width: 50px;
    height: 50px;
    border-radius: 8px;
    overflow: hidden;
    border: 2px solid #ddd;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

#popup_appliance_detail .color-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

#popup_appliance_detail .color-option:hover .color-image {
    transform: scale(1.1);
}

#popup_appliance_detail .color-swatch {
    width: 40px;
    height: 40px;
    border-radius: 6px;
    border: 2px solid #ddd;
    transition: all 0.2s ease;
}

#popup_appliance_detail .color-option.active .color-swatch {
    border-color: #2196f3;
    box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.3);
}

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

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

#popup_appliance_detail .color-option {
    position: relative;
}

#popup_appliance_detail .color-option span {
    font-size: 12px;
    color: #666;
    text-align: center;
}

#popup_appliance_detail .tabs-section {
    border-top: 1px solid #eee;
    padding-top: 0;
}

#popup_appliance_detail .tab-navigation {
    display: flex;
    border-bottom: 1px solid #eee;
    background: #f8f9fa;
}

#popup_appliance_detail .tab-btn {
    background: none;
    border: none;
    padding: 15px 20px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    color: #666;
    border-bottom: 3px solid transparent;
    transition: all 0.2s ease;
}

#popup_appliance_detail .tab-btn:hover {
    color: #333;
    background: rgba(0, 0, 0, 0.05);
}

#popup_appliance_detail .tab-btn.active {
    color: #333;
    border-bottom-color: #d4b87c;
    background: white;
}

#popup_appliance_detail .tab-pane {
    display: none;
}

#popup_appliance_detail .tab-pane.active {
    display: block;
}

#popup_appliance_detail .tab-pane h3 {
    font-size: 18px;
    font-weight: 600;
    color: #333;
    margin-bottom: 15px;
}

#popup_appliance_detail .tab-pane p {
    color: #666;
    line-height: 1.6;
    margin-bottom: 15px;
}

#popup_appliance_detail .appliance-brand,
#popup_appliance_detail .appliance-size,
#popup_appliance_detail .appliance-price {
    font-size: 16px;
    color: #666;
    margin: 8px 0;
}

#popup_appliance_detail .appliance-price {
    font-size: 20px;
    font-weight: bold;
    color: #d4b87c;
}

#popup_appliance_detail .button-container {
    text-align: center;
    padding: 20px 0px;
    border-top: 1px solid #eee;
}

#popup_appliance_detail .show-more-btn {
    background-color: #d4b87c;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
    transition: all 0.3s ease;
}

#popup_appliance_detail .show-more-btn:hover {
    opacity: 0.9;
}

#popup_appliance_detail .color-option-container {
    text-align: center;
}

#popup_appliance_detail .color-option-container .color-name {
    font-size: 14px;
    margin-top: 5px;
}

@media (max-width: 768px) {
    #popup_appliance_detail.container_canva {
        width: 95%;
        max-height: 95vh;
    }

    #popup_appliance_detail .main-popup-content {
        flex-direction: column;
        gap: 20px;
    }

    #popup_appliance_detail .right-section {
        padding-left: 0;
    }

    #popup_appliance_detail .tab-navigation {
        flex-wrap: wrap;
    }

    #popup_appliance_detail .tab-btn {
        flex: 1;
        min-width: 120px;
    }

    #popup_appliance_detail .primary-appliance-image {
        max-height: 200px;
    }

    #popup_appliance_detail .carousel-image {
        width: 60px;
        height: 60px;
    }

    #popup_appliance_detail .carousel-btn {
        width: 35px;
        height: 35px;
        font-size: 16px;
    }

    #popup_appliance_detail .appliance-name {
        font-size: 20px;
    }

    #popup_appliance_detail .color-options {
        grid-template-columns: repeat(4, 1fr);
        gap: 10px;
    }

    #popup_appliance_detail .color-image-container {
        width: 40px;
        height: 40px;
    }
}

#canva-overlay {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99999;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* ===== ZOOM CONTROLS STYLES ===== */
.zoom-controls {
    position: absolute;
    height: 40px;
    top: 3px;
    right: 5px;
    display: flex;
    gap: 5px;
    z-index: 10001;
}

.zoom-btn {
    touch-action: manipulation;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid rgb(204, 204, 204);
    background-color: white;
    cursor: pointer;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0px;
}

.zoom-btn:hover {
    background: #f5f5f5 !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2) !important;
    transform: translateY(-2px) !important;
}

.zoom-btn:active {
    transform: translateY(0) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
}

.zoom-in {
    background: #ffffff !important;
    color: #000000 !important;
}

.zoom-in:hover {
    background: #f5f5f5 !important;
}

.zoom-out {
    background: #ffffff !important;
    color: #000000 !important;
}

.zoom-out:hover {
    background: #f5f5f5 !important;
}

/* ===== QUOTATION DETAIL POPUP MODAL STYLES ===== */
/* =========================
   DESKTOP (DEFAULT)
========================= */
#quotation-detail-popup-modal table {
    width: 100%;
    border-collapse: collapse;
    font-family: Arial, sans-serif;
}

#quotation-detail-popup-modal th,
#quotation-detail-popup-modal td {
    /* border: 1px solid #ddd; */
    padding: 8px;
    vertical-align: top;
}

#quotation-detail-popup-modal thead th {
    background: #f0f0f0;
    font-weight: bold;
    vertical-align: middle;
    /* text-align: center; */
}

/* =========================
   MOBILE → TABLE TO CARD
========================= */

.popup-total-price {}

.popup-total-price-last-td {}

@media (max-width: 991px) {
    .right-panel-toggle-btn {
        display: flex;
    }

    .popup-total-price {
        float: right;
    }

    .popup-total-price-last-td {
        background: transparent !important;
        height: 0px !important;
    }

    /* Table chiếm full modal */
    #quotation-detail-popup-modal table {
        width: 100% !important;
        table-layout: fixed;
    }

    /* tbody cũng full */
    #quotation-detail-popup-modal table tbody {
        display: block;
        width: 100%;
    }

    /* Section title hiển thị full width */
    #quotation-detail-popup-modal tr.head-title {
        display: block;
        width: 100%;
        background: #f0f0f0;
        padding: 10px 12px;
        font-weight: bold;
        border: 1px solid #ddd;
    }

    #quotation-detail-popup-modal tr.head-title td {
        display: block;
        width: 100%;
        border: none;
        text-align: center;
    }

    /* CARD (TR) FULL WIDTH */
    #quotation-detail-popup-modal table tbody tr.popup-item {
        display: block;
        width: 100% !important;
        max-width: 100%;
        box-sizing: border-box;
    }

    /* TD không làm co width */
    #quotation-detail-popup-modal table tbody tr.popup-item td {
        width: 100% !important;
        box-sizing: border-box;
    }

    /* Ẩn header cột */
    #quotation-detail-popup-modal table thead tr.table-header {
        display: none;
    }

    /* Mỗi row thành 1 card */
    #quotation-detail-popup-modal table tbody tr.popup-item {
        display: block;
        margin-bottom: 2px;
        border: 1px solid #ddd;
        /* border-radius: 10px; */
        padding: 12px;
        background: #fff;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
        width: 100%;
    }

    /* Cell thành dòng label : value */
    #quotation-detail-popup-modal table tbody tr.popup-item td {
        display: flex;
        justify-content: start;
        align-items: flex-start;
        border: none;
        padding: 2px 0;
        text-align: right;
        font-size: 14px;
    }

    /* Label bên trái */
    #quotation-detail-popup-modal table tbody tr.popup-item td::before {
        content: attr(data-label);
        font-weight: 600;
        color: #333;
        text-align: left;
        padding-right: 12px;
        flex: 1;
    }

    #quotation-detail-popup-modal table tbody tr.popup-item .item-no::before {
        flex: 0 !important;
    }

    /* Value bên phải */
    #quotation-detail-popup-modal table tbody tr.popup-item td {
        flex: 2;
    }

    /* ===== TOTAL ROW – 2 COLUMNS ===== */
    #quotation-detail-popup-modal table tbody tr.total-row {
        display: block;
        width: 100% !important;
        background: transparent !important;
        border: 0px !important;
    }

    #quotation-detail-popup-modal table tbody tr.total-row td {
        display: inline-block;
        width: 50%;
        box-sizing: border-box;
        border: none;
        padding: 4px;
        font-weight: 600;
        vertical-align: middle;
        height: 51px;
    }

    /* Cột trái – label */
    #quotation-detail-popup-modal table tbody tr.total-row td:first-child {
        text-align: left !important;
    }

    /* Cột phải – value */
    #quotation-detail-popup-modal table tbody tr.total-row td:last-child {
        text-align: right !important;
        float: right !important;
    }

    /* Không dùng label pseudo */
    #quotation-detail-popup-modal table tbody tr.total-row td::before {
        content: none !important;
    }
}

#quotation-detail-popup-cancel {
    float: right;
    margin-top: -17px;
    margin-right: -17px;
    font-size: 25px;
    color: red;
    border: 0px !important;
}

.popup-modal-full {
    position: fixed;
    inset: 0;
    overflow: hidden;
    border-radius: 0 !important;
}

.popup-card-full {
    display: flex;
    flex-direction: column;
    border-radius: 0 !important;
    height: 100vh;
}

.popup-header-full {
    flex: 0 0 auto;
}

.popup-body-full {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
}

.show-full {
    display: block !important;
}

/* ==================== css for right list fullscreen panel ==================== */
/* =========================
   RIGHT PANEL TOGGLE BUTTON
   ========================= */

.right-panel-toggle-btn {
    position: fixed;
    top: 50px;
    right: 5px;
    width: 40px;
    height: 40px;
    border-radius: 24px;
    border: 1px solid rgb(204, 204, 204);
    background: #fff;
    color: #000;
    font-size: 18px;
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10002;
}

.right-panel-toggle-btn-3d {
    position: absolute !important;
    right: 0px !important;
}

.right-panel-toggle-btn.force-show {
    display: flex !important;
}

.right-panel-toggle-btn i {
    pointer-events: none;
}

@media (max-width: 1199.98px) {
    .right-panel-toggle-btn {
        display: flex;
    }

    .room-set-right.fullscreen-panel {
        animation: slideInRight 0.35s ease-out;
    }
}

@keyframes slideInRight {
    from {
        transform: translateX(100%);
    }

    to {
        transform: translateX(0);
    }
}

@media (min-width: 1200px) {
    .right-panel-toggle-btn {
        display: none;
    }
}

/* ==================== css for button iframe ==================== */
.show {
    display: block;
}

.hide {
    display: none;
}

.menu-controls {
    position: absolute;
    bottom: 3px;
    right: 5px;
    display: flex;
    gap: 5px;
    z-index: 10001;
}

@media (max-width: 768px) {
    .menu-controls {
        bottom: 70px !important;
    }
}

.top-left-controls {
    position: absolute;
    top: 3px;
    left: 3px;
    display: flex;
    gap: 5px;
    z-index: 10001;
}

.bottom-left-box-3d {
    position: absolute;
    bottom: 0px;
    left: 1px;
    display: flex;
    z-index: 10001;
}

.bottom-left-controls {
    position: absolute;
    bottom: 0px;
    left: 51px;
    display: flex;
    z-index: 10001;
}

.circle-btn {
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #000000;
    transition: all 0.3s ease;
}

.top-left-btn {
    background-color: #ffffff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #000000;
    transition: all 0.3s ease;
}

.bottom-left-btn {
    height: 30px;
    border-top: 1px solid #999;
    border-right: 1px solid #999;
    border-bottom: 1px solid #e6d4bc;
    border-left: 0;
    background: #ffffff;
    /* box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); */
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #000000;
    transition: all 0.3s ease;
}

.wall-cabinet-height-container {
    display: flex;
    align-items: center;
    height: 30px;
    background: #ffffff;
    /* border-top: 1px solid #999; */
    /* border-right: 1px solid #999; */
    border-bottom: 0;
    border-left: 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.wall-cabinet-height-select {
    border: none;
    background: transparent;
    border-top: 1px solid #999;
    border-right: 1px solid #999;
    font-size: 12px;
    padding: 4px 6px;
    cursor: pointer;
    outline: none;
    max-width: 38px;
}

.surface-thickness-container {
    display: flex;
    align-items: center;
    height: 30px;
    background: #ffffff;
    border-bottom: 0;
    border-left: 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.surface-thickness-select {
    border: none;
    background: transparent;
    border-top: 1px solid #999;
    border-right: 1px solid #999;
    font-size: 12px;
    padding: 4px 6px;
    cursor: pointer;
    outline: none;
    max-width: 50px;
}

.circle-btn:hover,
.bottom-left-btn:hover,
.fullscreen-btn:hover {
    background: #f5f5f5;
    /* box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2); */
    transform: translateY(-2px);
}

.circle-btn:disabled {
    color: #656363b5;
    cursor: not-allowed;
}

.top-left-controls .top-left-btn.active,
.bottom-left-controls .bottom-left-btn.active,
.bottom-left-box-3d .bottom-left-btn.active,
.zoom-controls .zoom-btn.active,
.menu-controls .circle-btn.active {
    background-color: #5c9bf9;
    /* primary highlight */
    color: #fff;
}

#loading-overlay {
    display: none;
    position: absolute;
    z-index: 9999;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.7);
    align-items: center;
    justify-content: center;
}

.spinner {
    width: 40px;
    height: 40px;
    margin: 0 auto 10px;
    border: 4px solid rgba(0, 0, 0, 0.1);
    border-radius: 50%;
    border-top: 4px solid #006699;
    animation: spin 1s linear infinite;
}

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

    100% {
        transform: rotate(360deg);
    }
}

/* ==================== LOADING OVERLAY FULL SCREEN ==================== */
.loading-overlay-fullscreen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #ffffff;
    z-index: 999999;
    display: flex;
    justify-content: center;
    align-items: center;
}

.loading-spinner-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

/* Room Loading - Same style as page preloader */
#room_preloader {
    position: relative;
}

#room_preloader.rectangle-bounce {
    text-align: center;
    position: relative;
    margin-left: 0;
    margin-top: 0;
    height: 30px;
    width: 53px;
}

#room_preloader span {
    display: block;
    bottom: 0px;
    width: 9px;
    height: 5px;
    background: #333;
    position: absolute;
    animation: preloader_room 1.5s infinite ease-in-out;
    -moz-animation: preloader_room 1.5s infinite ease-in-out;
    -webkit-animation: preloader_room 1.5s infinite ease-in-out;
    -o-animation: preloader_room 1.5s infinite ease-in-out;
    -ms-animation: preloader_room 1.5s infinite ease-in-out;
}

#room_preloader span:nth-child(2) {
    left: 11px;
    animation-delay: 0.2s;
    -moz-animation-delay: 0.2s;
    -webkit-animation-delay: 0.2s;
    -o-animation-delay: 0.2s;
    -ms-animation-delay: 0.2s;
}

#room_preloader span:nth-child(3) {
    left: 22px;
    animation-delay: 0.4s;
    -moz-animation-delay: 0.4s;
    -webkit-animation-delay: 0.4s;
    -o-animation-delay: 0.4s;
    -ms-animation-delay: 0.4s;
}

#room_preloader span:nth-child(4) {
    left: 33px;
    animation-delay: 0.6s;
    -moz-animation-delay: 0.6s;
    -webkit-animation-delay: 0.6s;
    -o-animation-delay: 0.6s;
    -ms-animation-delay: 0.6s;
}

#room_preloader span:nth-child(5) {
    left: 44px;
    animation-delay: 0.8s;
    -moz-animation-delay: 0.8s;
    -webkit-animation-delay: 0.8s;
    -o-animation-delay: 0.8s;
    -ms-animation-delay: 0.8s;
}

@keyframes preloader_room {
    0% {
        height: 5px;
        transform: translateY(0px);
        -moz-transform: translateY(0px);
        -webkit-transform: translateY(0px);
        -o-transform: translateY(0px);
        -ms-transform: translateY(0px);
        background: #333;
    }

    25% {
        height: 30px;
        transform: translateY(15px);
        -moz-transform: translateY(15px);
        -webkit-transform: translateY(15px);
        -o-transform: translateY(15px);
        -ms-transform: translateY(15px);
        background: #333;
    }

    50% {
        height: 5px;
        transform: translateY(0px);
        -moz-transform: translateY(0px);
        -webkit-transform: translateY(0px);
        -o-transform: translateY(0px);
        -ms-transform: translateY(0px);
        background: #333;
    }

    100% {
        height: 5px;
        transform: translateY(0px);
        -moz-transform: translateY(0px);
        -webkit-transform: translateY(0px);
        -o-transform: translateY(0px);
        -ms-transform: translateY(0px);
        background: #333;
    }
}

.loading-text {
    color: white;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 0.5px;
    animation: loading-pulse 1.5s ease-in-out infinite;
}

@keyframes loading-pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

.widgetCKS {
    margin-top: 20px;
}

.ul-box-style-popup {
    list-style-type: disc;
    padding-left: 25px;
    font-size: 13px;
}

/* ==================== POPUP STYLE ==================== */
.popup-modal {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.45);
    z-index: 10002;
}

#save-file-popup-modal.show,
#project-file-popup-modal.show {
    display: flex;
}

.popup-modal .popup-card {
    width: auto;
    max-width: 92%;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    font-family: inherit;
}

.popup-modal .popup-header {
    padding: 14px 16px;
    font-weight: 600;
    font-size: 16px;
    background: #f7f7f7;
    border-bottom: 1px solid #eee;
}

.popup-modal .popup-body {
    padding: 16px;
    color: #333;
    line-height: 1.5;
    font-size: 14px;
}

.popup-modal .popup-actions {
    display: flex;
    gap: 10px;
    padding: 12px 16px 16px;
    justify-content: flex-end;
}

.popup-modal .btn {
    appearance: none;
    border: 1px solid transparent;
    border-radius: 10px;
    padding: 7px 14px;
    font-size: 14px;
    cursor: pointer;
}

.popup-modal .btn-cancel {
    background: #f3f4f6;
    color: #111827;
    border-color: #e5e7eb;
}

.popup-modal .btn-cancel:hover {
    background: #e5e7eb;
}

.popup-modal .btn-ok {
    background: #2563eb;
    color: #fff;
}

.popup-modal .btn-ok:hover {
    background: #1d4ed8;
}

/*==================== fix lỗi click xuyên khi ấn close RO trên mobile ====================*/
body.prevent-click-through #container,
body.prevent-click-through #container iframe,
body.prevent-click-through #container canvas {
    pointer-events: none !important;
}

/*==================== style my project list mobile============================================*/
@media (max-width: 991px) {

    /* Table chiếm full modal */
    #my-project-list table {
        width: 100% !important;
        table-layout: fixed;
    }

    /* tbody cũng full */
    #my-project-list table tbody {
        display: block;
        width: 100%;
    }

    /* Section title hiển thị full width */
    #my-project-list tr.head-title {
        display: block;
        width: 100%;
        background: #f0f0f0;
        padding: 10px 12px;
        font-weight: bold;
        border: 1px solid #ddd;
    }

    #my-project-list tr.head-title td {
        display: block;
        width: 100%;
        border: none;
        text-align: center;
    }

    /* CARD (TR) FULL WIDTH */
    #my-project-list table tbody tr.popup-item {
        display: block;
        width: 100% !important;
        max-width: 100%;
        box-sizing: border-box;
    }

    /* TD không làm co width */
    #my-project-list table tbody tr.popup-item td {
        width: 100% !important;
        box-sizing: border-box;
    }

    /* Ẩn header cột */
    #my-project-list table thead tr.table-header {
        display: none;
    }

    /* Mỗi row thành 1 card */
    #my-project-list table tbody tr.popup-item {
        display: block;
        margin-bottom: 2px;
        border: 1px solid #ddd;
        /* border-radius: 10px; */
        padding: 12px;
        background: #fff;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
        width: 100%;
    }

    /* Cell thành dòng label : value */
    #my-project-list table tbody tr.popup-item td {
        display: flex;
        justify-content: start;
        align-items: flex-start;
        border: none;
        padding: 2px 0;
        text-align: right;
        font-size: 14px;
    }

    /* Label bên trái */
    #my-project-list table tbody tr.popup-item td::before {
        content: attr(data-label);
        font-weight: 600;
        color: #333;
        text-align: left;
        padding-right: 12px;
        flex: 1;
    }

    #my-project-list table tbody tr.popup-item .item-no::before {
        flex: 0 !important;
    }

    /* Value bên phải */
    #my-project-list table tbody tr.popup-item td {
        flex: 2;
    }

    /* ===== TOTAL ROW – 2 COLUMNS ===== */
    #my-project-list table tbody tr.total-row {
        display: block;
        width: 100% !important;
        background: transparent !important;
        border: 0px !important;
    }

    #my-project-list table tbody tr.total-row td {
        display: inline-block;
        width: 50%;
        box-sizing: border-box;
        border: none;
        padding: 4px;
        font-weight: 600;
        vertical-align: middle;
    }

    /* Cột trái – label */
    #my-project-list table tbody tr.total-row td:first-child {
        text-align: left !important;
    }

    /* Cột phải – value */
    #my-project-list table tbody tr.total-row td:last-child {
        text-align: right !important;
        float: right !important;
    }

    /* Không dùng label pseudo */
    #my-project-list table tbody tr.total-row td::before {
        content: none !important;
    }
}