/* Nhập font từ Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif:ital,wght@0,400;0,700;1,400&display=swap');

/* CSS cơ bản cho body */
body {
    font-family: 'Time New Roman', serif;
    background: 
    linear-gradient(to bottom, rgba(59,10,10,0.85), rgba(59,10,10,0.85)), /* Thêm opacity */
    url('trongdong.png') center/cover no-repeat;
    background-attachment: fixed;
    background-position: right 0px bottom 0px;
    background-repeat: repeat-y,repeat-x; /* Lặp theo chiều ngang */
    margin: 0;
    padding: 0 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 120vh;
    box-sizing: border-box;
    padding-bottom: 100px;

}

/* Container cho canvas (la kinh và mặt bằng) */
#compass-container {
    position: relative;
    width: 100%;
    max-width: 600px;
    height: 120vh; /* Tăng chiều cao để chứa canvas (600px) + 100px khoảng cách trên */
    margin: 20px auto;
    /* Bỏ display: flex để tránh ảnh hưởng đến các phần tử con */
}

/* Canvas la kinh */
#compass {
    position: absolute;
    top: 200px; /* Di chuyển xuống 100px */
    left: 0;
    z-index: 2;
    border: none;
    border-radius: 8px;
    background-color: transparent;
    width: 600px;
    height: 600px;
    box-sizing: border-box;
   pointer-events: none; /* Cho phép touch event xuyên qua canvas */
    
}

/* Canvas mặt bằng */
#floorplan-container {
    position: absolute;
    top: 200px; /* Di chuyển xuống 100px */
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    }

#floorplan-canvas {
    position: absolute;
    top: 200px; /* Sửa từ top: 100 thành top: 0 để khớp với #floorplan-container */
    left: 0;
    z-index: 3; /* Tăng z-index để đảm bảo nằm trên #compass */
    display: hide; /* Giữ ẩn mặc định */
    border: 1px solid #1abc9c;
    border-radius: 8px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
    background-color: rgba(128, 128, 128, 0.01); /* Màu #1abc9c với 50% opacity *//* Đặt trong suốt hoàn toàn */
    width: 600px;
    height: 600px;
    box-sizing: border-box;
}

#floorplan-canvas1 {
    position: absolute;
    top: 200px; /* Match top position with floorplan-canvas */
    left: 0;
    z-index: 2; /* One unit lower than floorplan-canvas (z-index: 3) */
    display: none; /* Hidden by default */
    border: 1px solid #ff0000; /* Red border to distinguish */
    border-radius: 8px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
    background-color: rgba(0, 0, 0, 0.65); /* Match background with floorplan-canvas */
    width: 600px;
    height: 600px;
    box-sizing: border-box;
}
#ve-mb-nha-floorplan {
    position: relative; /* Đảm bảo canvas được căn chỉnh trong container */
    width: min(600px, calc(100% - 8px));
    height: auto;
    aspect-ratio: 1 / 1;
    max-width: 600px;
    border: 1px solid #1abc9c; /* Tùy chọn, để khớp với #floorplan-canvas */
    border-radius: 8px;
    box-sizing: border-box;
    margin: 0 auto; /* Căn giữa ngang */
    display: block;
    
}
/* Ô hiển thị hướng (căn giữa ngang) */
#heading-display {
    position: absolute;
    top: 200px; /* Cách biên trên canvas 100px */
    left: 50%; /* Căn giữa ngang */
    transform: translateX(-50%); /* Dịch chuyển để tâm ô nằm giữa */
    max-width: 110px;
    padding: 2px 10px;
    border: 1px solid #d4a017;
    border-radius: 8px;
    background: linear-gradient(145deg, #f0f0f0, #d0d0d0);
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3),
                -2px -2px 4px rgba(255, 255, 255, 0.5),
                inset 1px 1px 2px rgba(255, 255, 255, 0.7),
                inset -1px -1px 2px rgba(0, 0, 0, 0.2);
    color: #2c3e50;
    font-size: 12px;
    font-weight: bold;
    text-align: center;
    font-family: 'Time New Roman', serif;
    line-height: 1.4;
    z-index: 20;
    box-sizing: border-box;
}

/* Ô hiển thị tọa (căn giữa ngang) */
#to-heading-display {
    position: absolute;
    bottom: 350px; /* Cách biên dưới canvas 100px */
    left: 50%; /* Căn giữa ngang */
    transform: translateX(-50%); /* Dịch chuyển để tâm ô nằm giữa */
    max-width: 110px;
    padding: 2px 10px;
    border: 1px solid #d4a017;
    border-radius: 8px;
    background: linear-gradient(145deg, #f0f0f0, #d0d0d0);
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3),
                -2px -2px 4px rgba(255, 255, 255, 0.5),
                inset 1px 1px 2px rgba(255, 255, 255, 0.7),
                inset -1px -1px 2px rgba(0, 0, 0, 0.2);
    color: #2c3e50;
    font-size: 12px;
    font-weight: bold;
    text-align: center;
    font-family: 'Time New Roman', serif;
    line-height: 1.4;
    z-index: 20;
    box-sizing: border-box;
}

#heading-display .label,
#to-heading-display .label {
    color: #d4a017;
    font-size: 12px;
    font-family: 'Time New Roman', sans-serif;
    font-weight: bold;
    display: inline;
}

/* Ô hiển thị cân bằng điện thoại */
#new-display {
    position: absolute;
    top: 200px; /* Cách biên trên canvas 100px */
    right: 10px;
    width: 40px;
    height: 40px;
    border: 1px solid #d4a017;
    border-radius: 8px;
    background: linear-gradient(145deg, #f0f0f0, #d0d0d0);
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3),
                -2px -2px 4px rgba(255, 255, 255, 0.5),
                inset 1px 1px 2px rgba(255, 255, 255, 0.7),
                inset -1px -1px 2px rgba(0, 0, 0, 0.2);
    z-index: 20;
    box-sizing: border-box;
}

/* Ô hiển thị âm lịch */
#calendar-display {
    /* Các thuộc tính cơ bản */
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    max-width: none;
    font-size: 11px;
    font-weight: bold;
    padding: 8px 12px;
    display: inline-block; /* Co giãn theo nội dung */
    text-align: center;
    box-sizing: border-box;
    color: #fff;
    text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.9);
    
    /* Nền chocolate đậm */
    background: 
        linear-gradient(145deg, #5a2c02, #3d1e01, #2a1501) padding-box,
        linear-gradient(145deg, #f8d76e, #d4a017, #b38a10) border-box;
    
    /* Hiệu ứng khung viền 3D gold nổi */
    border: 1px solid transparent;
    border-radius: 8px;
    
    /* Hiệu ứng bóng 3D nổi + ánh sáng gold */
    box-shadow:
        0 2px 4px rgba(0, 0, 0, 0.5),
        inset 0 -3px 8px rgba(0, 0, 0, 0.7),
        inset 0 3px 4px rgba(255, 215, 0, 0.2),
        0 0 10px rgba(255, 215, 0, 0.4),
        2px 2px 6px rgba(255, 215, 0, 0.3),
        -2px -2px 6px rgba(255, 255, 255, 0.2);
    
    /* Hiệu ứng chuyển động */
    transition: all 0.1s ease;
}

#calendar-display:hover {
    text-shadow: 0 -1px 2px rgba(0, 0, 0, 0.7);
    box-shadow: 
        0 4px 8px rgba(0, 0, 0, 0.6),
        inset 0 -4px 10px rgba(0, 0, 0, 0.8),
        inset 0 4px 6px rgba(255, 215, 0, 0.3),
        0 0 15px rgba(255, 215, 0, 0.6),
        3px 3px 8px rgba(255, 215, 0, 0.4),
        -3px -3px 8px rgba(255, 255, 255, 0.3);
}

#calendar-display .label {
    color: #d4a017;
    font-size: 14px;
    font-family: 'Times New Roman', sans-serif;
    font-weight: bold;
    display: block;
    position: relative;
    z-index: 1;
    letter-spacing: 0.5px;
    white-space: normal; /* Ưu tiên mở rộng ngang */
    text-align: center;
    max-width: 1600px; /* Giới hạn chiều rộng để kích hoạt xuống dòng */
    overflow-wrap: none; /* break-word Cho phép xuống dòng khi vượt max-width */
}





/* Nhóm nút điều khiển (Quay 15°, Kích hoạt, v.v.) */

/* Container chính cho nhóm điều khiển */
#container-1 {
    position: relative;
    width: 100%;
    max-width: 600px;
    margin: 0 auto 0;
    background-color: transparent;
    padding: 5px;
    z-index: 100;
    transition: transform 0.3s ease;
    
    /* Thêm 2 thuộc tính mới */
    transform: translateY(50px); /* Di chuyển xuống */
    font-size: 12px; /* Cỡ chữ */
}

/* Đảm bảo các phần tử con giữ nguyên vị trí */
#container-1 #button-row-top,
#container-1 #input-row,
#container-1 #button-row-bottom {
    position: static; /* Giữ nguyên vị trí tương đối trong container */
    transform: none;
    width: 100%;
}

/* Giữ nguyên style cho các phần tử con */
#container-1 #input-container {
    margin: 20px 0 10px 0; /* Điều chỉnh margin để loại bỏ padding cha */
}

#container-1 #button-row-top,
#container-1 #button-row-bottom {
    margin-left: 0;
    margin-right: 0;
}
/* Container cho nhóm nút dưới cùng */
#container-2 {
    position: relative;
    width: 100%;
    max-width: 600px;
    margin: 850px auto 5px; /* Trên 50px - dưới 20px */
    background-color: transparent;
    padding: 5px;
    z-index: 100;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    transition: transform 0.3s ease;
}

/* Các phần tử bên trong container-2 */
#container-2 .button-row {
    display: flex;
    justify-content: center;
    gap: 2px;
    width: 100%;
    flex-wrap: wrap;
}
#container-2 .checkbox-label {
    margin: 0 4px; /* Cách đều 2 bên 4px */
    flex: 1 1 auto; /* Linh hoạt co giãn */
    min-width: max-content; /* Đảm bảo nút không bị ép nhỏ quá */
}


#controls {
    margin-top: 300px; /* Cách biên dưới canvas 200px */
    width: calc(100% - 8px);
    max-width: 600px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    z-index: 100;
}

.group-btn {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
}

.button-row {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    flex-wrap: wrap;
}

/* Container nhập liệu */
.input-container {
    width: calc(100% - 8px);
    margin: 20px 4px 10px 4px;
    padding: 6px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #ffdd99;
    display: flex;
    justify-content: center;
}

.input-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: space-between;
    width: 100%;
    max-width: 400px;
}

.input-group {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 80px;
    max-width: 100px;
}

.input-group.calendar-type {
    min-width: 80px;
    max-width: 100px;
}

.input-group label {
    text-align: left;
    margin-bottom: 4px;
    font-size: 13px;
    color: #ffdd99;
}

.input-group input,
.input-group select {
    width: 100%;
    padding: 5px;
    font-size: 13px;
    border: 1px solid #34495e;
    border-radius: 5px;
    background-color: #ecf0f1;
    box-sizing: border-box;
}

.input-group input:disabled,
.input-group select:disabled {
    background-color: #e0e0e0;
    cursor: not-allowed;
}



/* Checkbox dưới cùng */
.button-row-bottom {
    display: flex;
    justify-content: space-between;
    gap: 1px;
    margin: 10px 0 10px 0;
    width: 100%;
    flex-wrap: wrap;
}

.button-row-bottom .checkbox-label {
    flex: 1 1 calc(25% - 4px);
    max-width: 150px;
    text-align: center;
}

/* Nút quay lại */
.back-btn {
    position: fixed;
    top: 10px;
    left: 4px;
    background-color: rgba(231, 76, 60, 0.5);
    color: white;
    border: none;
    padding: 8px 12px;
    font-size: 14px;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.1s;
    z-index: 1000;
}

.back-btn:hover {
    background-color: rgba(231, 76, 60, 0.7);
}

.back-btn:active {
    transform: scale(0.95);
}

/* Nút chung */
.action-btn, .edit-btn, .control-btn, .delete-btn {
    background-color: #e67e22;
    color: white;
    border: none;
    padding: 8px 12px;
    font-size: 14px;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s;
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3),
                -2px -2px 4px rgba(255, 255, 255, 0.5),
                inset 1px 1px 2px rgba(255, 255, 255, 0.7),
                inset -1px -1px 2px rgba(0, 0, 0, 0.2);
}

.action-btn:hover, .edit-btn:hover, .control-btn:hover, .delete-btn:hover {
    background-color: #d35400;
}

/* Checkbox */
.checkbox-label {
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #ffdd99;
    cursor: pointer;
    gap: 5px;
}

.checkbox-label input[type="checkbox"] {
    appearance: none;
    width: 16px;
    height: 16px;
    border: 2px solid #ff0000;
    border-radius: 4px;
    margin-right: 8px;
    position: relative;
    cursor: pointer;
}

.checkbox-label input[type="checkbox"]:checked {
    background-color: #3498db;
    border-color: #ff0000;
}

.checkbox-label input[type="checkbox"]:checked::after {
    content: '\2714';
    color: #ffdd99;
    font-size: 12px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: sans-serif;
}

.checkbox-label:hover input[type="checkbox"] {
    border-color: #ff0000;
}

/* Văn bản và thông báo lỗi */
h2, p, #error-message {
    color: #996700;
    text-align: center;
    margin: 0 4px;
    width: calc(100% - 8px);
    z-index: 5000;
}

#error-message {
    color: #2c3e50;
    display: none;
    margin-top: 5px;
}

/* Canvas container (không sử dụng trong HTML hiện tại) */
#canvas-container {
    margin: 10px 0px;
    width: 100%;
}

/* Floorplan (không sử dụng trong HTML hiện tại) */
#floorplan {
    border: 3px solid #2c3e50;
    background-color: white;
    width: min(600px, calc(100% - 8px));
    max-width: 600px;
    height: auto;
    aspect-ratio: 1 / 1;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    margin: 0 auto;
}

/* Điều khiển trên cùng và toolbar */
#top-controls, #toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    background-color: #ffdd99;
    padding: 10px;
    border-radius: 8px;
    margin: 10px 4px;
    width: calc(100% - 8px);
}

#top-controls .input-group, #toolbar .tool-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin: 5px;
}

select, input[type="number"], input[type="range"], input[type="checkbox"] {
    padding: 5px;
    font-size: 14px;
    border: 1px solid #34495e;
    border-radius: 4px;
    background-color: #ffdd99;
}

input[type="range"] {
    width: 100px;
}

#edgeInputsContainer {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.button-group, .room-buttons, .furniture-buttons {
    display: flex;
    gap: 5px;
}

.room-buttons, .furniture-buttons {
    display: none;
}

.room-buttons.active, .furniture-buttons.active {
    display: flex;
}

.tool-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

#formEdit {
    display: flex;
    gap: 5px;
    margin-top: 10px;
}

#formEdit input[type="text"] {
    padding: 5px;
    font-size: 14px;
    border: 1px solid #34495e;
    border-radius: 4px;
}

/* Media query cho mobile (max-width: 600px) */
@media (max-width: 600px) {
    background-size: 50% auto, cover;
}
    #compass-container {
        width: calc(100% - 8px);
        margin: 10px 4px;
        height: 120vh; /* Tăng chiều cao để chứa canvas + 100px khoảng cách trên */
   }

    #compass {
        width: min(600px, calc(100% - 8px));
        height: auto;
        aspect-ratio: 1 / 1;
        top: 220px; /* Di chuyển xuống 100px */
        left: 0;
    }

    #floorplan-container {
        top: 220px; /* Di chuyển xuống 100px */
   }

    #floorplan-canvas {
        width: min(600px, calc(100% - 8px));
        height: auto;
        aspect-ratio: 1 / 1;
        top: 220px; /* Vẫn ở đầu #floorplan-container */
        left: 0;
     }
#floorplan-canvas1 {
    width: min(600px, calc(100% - 8px));
    height: auto;
    aspect-ratio: 1 / 1;
    top: 220px; /* Match top position with floorplan-canvas */
    left: 0;
}
    /* Căn giữa ngang cho ô hướng */
    #heading-display {
        top: 170px; /* Cách biên trên canvas 100px */
        left: 50%; /* Căn giữa ngang */
        transform: translateX(-50%); /* Dịch chuyển để tâm ô nằm giữa */
        max-width: 125px;
        font-size: 11px;
        padding: 2px 8px;
    }

    /* Căn giữa ngang cho ô tọa */
    #to-heading-display {
        bottom: -670px; /* Cách biên dưới canvas 100px */
        left: 50%; /* Căn giữa ngang */
        transform: translateX(-50%); /* Dịch chuyển để tâm ô nằm giữa */
        max-width: 125px;
        font-size: 11px;
        padding: 2px 8px;
    }

    #new-display {
        top: 170px; /* Cách biên trên canvas 100px */
        right: 10px;
        width: 40px;
        height: 40px;
    }

    
    
    /* Mobile 600px */
#calendar-display {
    top: 15px;
    font-size: 11px;
    padding: 8px 8px;
    left: 50%;
    transfor0m: translateX(-50%);
    display: inline-block;
    max-width: 100vw; /* Cho phép mở rộng tối đa bằng viewport */
    width: 98%; /* Thay fit-content bằng auto để linh hoạt hơn */
    white-space: normal; /* Thêm vào đây để ưu tiên ngang */

}

#calendar-display .label {
    font-size: 11px;
    white-space: normal;
    display: inline; /* Ghi đè lại từ block */
    max-width: none;
    overflow-wrap: normal;

    text-align: justify; /* Căn đều 2 bên */
    line-height: 2.0;/* Tự động gạch nối từ khi cần (tuỳ ngôn ngữ) */
    width: 100%; /* Chiếm đủ không gian container */
}


    
#container-1 {
        width: calc(100% - 8px);
        transform: translateY(20px); /* Giữ nguyên di chuyển */
    
      font-size: inherit; /* Kế thừa cỡ chữ từ container */
    font-size: 10px; /* Cỡ chữ nhỏ hơn trên mobile */
}
/* Responsive cho mobile */
    #container-2 {
        width: calc(100% - 16px); /* Giảm width để có padding hai bên */
        padding: 8px;
        margin: 680px auto 5px; 
    }
    
    #container-2 .button-row {
        gap: 6px; /* Giảm khoảng cách giữa các nút */
    }


#controls {
        margin-top:600px; /* Cách biên dưới canvas 200px */
        width: calc(100% - 8px);
    }

    .input-container {
        padding: 4px;
    }

    .input-row {
        gap: 10px;
        max-width: 100%;
    }

    .input-group {
        min-width: 70px;
        max-width: 90px;
    }

    .input-group.calendar-type {
        min-width: 40px;
        max-width: 80px;
    }

    .input-group label {
        font-size: 11px;
        margin-bottom: 3px;
    }

    .input-group input,
    .input-group select {
        font-size: 11px;
        padding: 4px;
    }

    .button-row {
        gap: 10px;
    }

    .control-btn {
        flex: 1 1 calc(33.33% - 10px);
        max-width: calc(33.33% - 10px);
        min-width: 80px;
        font-size: 12px;
        padding: 6px 10px;
    }

    .edit-btn, .action-btn {
        font-size: 12px;
        padding: 6px 10px;
    }

    .back-btn {
        font-size: 12px;
        padding: 6px 10px;
        left: 4px;
    }


    .button-row-bottom .checkbox-label {
        flex: 1 1 calc(23% - 8px);
        max-width: 150px;
        font-size: 12px;
    }

    .checkbox-label input[type="checkbox"] {
        width: 14px;
        height: 14px;
    }
}

/* Media query cho mobile nhỏ (max-width: 360px) */
@media (max-width: 360px) {
    body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 80vh;
    margin: 0;
    background-size: 100% auto, cover;
}
    
    #compass-container {
        width: calc(100% - 8px);
        margin: 10px 4px;
        height: 100vh; /* Tăng chiều cao để chứa canvas + 100px khoảng cách trên */
    }

    #compass {
        width: min(600px, calc(100% - 8px));
        height: auto;
        aspect-ratio: 1 / 1;
        top: 100px; /* Di chuyển xuống 100px */
        left: 0;
    }

    #floorplan-container {
        top: 100px; /* Di chuyển xuống 100px */
    }

    #floorplan-canvas {
        width: min(600px, calc(100% - 8px));
        height: auto;
        aspect-ratio: 1 / 1;
        top: 100px; /* Vẫn ở đầu #floorplan-container */
        left: 0;
    }
    #floorplan-canvas1 {
    width: min(600px, calc(100% - 8px));
    height: auto;
    aspect-ratio: 1 / 1;
    top: 100px; /* Match top position with floorplan-canvas */
    left: 0;
}

    /* Căn giữa ngang cho ô hướng */
    #heading-display {
        top: 50px;
        left: 50%; /* Căn giữa ngang */
        transform: translateX(-50%); /* Dịch chuyển để tâm ô nằm giữa */
        width: 110px;
        font-size: 10px;
        padding: 2px 6px;
    }

    /* Căn giữa ngang cho ô tọa */
    #to-heading-display {
        bottom: 50px;
        left: 50%; /* Căn giữa ngang */
        transform: translateX(-50%); /* Dịch chuyển để tâm ô nằm giữa */
        width: 110px;
        font-size: 10px;
        padding: 2px 6px;
    }

    #new-display {
        top: 50px;
        right: 10px;
        width: 40px;
        height: 40px;
    }


    #calendar-display {
        /* Căn chỉnh container */
        width: 100%; /* Chiếm full width */
        max-width: 100%; /* Đè lên max-width trước đó */
        padding: 6px 0; /* Giảm padding ngang để sát biên */
        box-sizing: border-box; /* Đảm bảo padding không làm tràn */
        
        /* Hiệu ứng visual giữ nguyên từ bản gốc */
        background: linear-gradient(145deg, #5a2c02, #3d1e01) padding-box;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    }

    #calendar-display .label {
        /* Điều chỉnh khoảng cách chữ */
        font-size: 11px !important; /* Ưu tiên ghi đè */
        line-height: 1.6; /* Giãn dòng vừa phải */
        letter-spacing: 0.3px; /* Giãn cách ký tự */
        
        /* Căn lề sát biên */
        padding: 0 8px; /* Thêm khoảng trống 2 bên nếu cần */
        text-align: center; /* Hoặc `justify` nếu muốn dàn đều */
        white-space: normal; /* Cho phép xuống dòng nếu cần */
        
        /* Đảm bảo không tràn */
        word-break: break-word; /* Xử lý từ dài */
        hyphens: auto; /* Tự động gạch nối (tiếng Anh) */
    }

    
    #container-1 {
        margin-top: 1px; /* Điều chỉnh cho mobile nhỏ */
    }

    #container-2 {
        position: absolute;
        margin: 650px auto 5px; 
    }
        #controls {
        margin-top: 500px;
        width: calc(100% - 1px);
    }

    .input-container {
        padding: 3px;
    }

    .input-row {
        gap: 8px;
    }

    .input-group {
        min-width: 60px;
        max-width: 80px;
    }

    .input-group.calendar-type {
        min-width: 60px;
        max-width: 80px;
    }

    .input-group label {
        font-size: 10px;
        margin-bottom: 2px;
    }

    .input-group input,
    .input-group select {
        font-size: 10px;
        padding: 3px;
    }

    

    .button-row-bottom .checkbox-label {
        flex: 1 1 calc(25% - 2px);
        max-width: 120px;
        font-size: 11px;
    }

    .checkbox-label input[type="checkbox"] {
        width: 12px;
        height: 12px;
    }
}
/* Fixed Bottom Menu */
#bottom-menu {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: rgba(59, 10, 10, 0.9);
    padding: 10px 0;
    z-index: 1000;
    overflow-x: auto;
    white-space: nowrap;
    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.3);
}

/* Scrollable Menu Buttons Container */
.menu-buttons {
    display: flex;
    gap: 8px;
    padding: 0 10px;
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: #d4a017 #5a2c02;
}

/* Hide Scrollbar for Webkit Browsers */
.menu-buttons::-webkit-scrollbar {
    height: 6px;
}

.menu-buttons::-webkit-scrollbar-track {
    background: #5a2c02;
}

.menu-buttons::-webkit-scrollbar-thumb {
    background: #d4a017;
    border-radius: 3px;
}

/* Menu Buttons */
.menu-btn {
    background-color: transparent ;
    color: #d4a017;
    border: 1px solid ;
    padding: 16px 12px;
    font-size: 16px;
    border-radius: 12px;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.1s;
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3),
                -2px -2px 4px rgba(255, 255, 255, 0.2),
                inset 1px 1px 2px rgba(255, 255, 255, 0.3),
                inset -1px -1px 2px rgba(0, 0, 0, 0.2);
    flex: 0 0 auto;
    min-width: 100px;
}

.menu-btn:hover {
    background-color: #d35400;
    color: #ffffff;
}

.menu-btn:active {
    transform: scale(0.95);
}

/* Menu Sections */
.menu-section {
    width: 100%;
    max-width: 600px;
    margin: 0px auto;
    padding: 0px;
    background-color: transparent;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    display: none;
    box-sizing: border-box;
    
    
}
#ve-mb-nha-section #canvas-container {
    z-index: 1001; /* Higher than #bottom-menu (z-index: 1000) */
}

.section-content {

    background: transparent; /* Loại bỏ màu nền */
    padding: 0.1px; /* Giữ padding để nội dung không sát lề */
    margin: 0 auto; /* Căn giữa */
    /* Giới hạn chiều rộng tối đa, phù hợp với thiết kế */
    width: 100%; /* Đảm bảo chiếm toàn bộ chiều rộng của parent */
    box-sizing: border-box; /* Bao gồm padding và border trong chiều rộng */

    
}

.section-content h3 {
    margin: 0 0 2px;
    color: transparent;
    font-family: 'Times New Roman', serif;
    font-size: 18px;
}

.section-content p {
    margin: 0;
    font-size: 14px;
}

/* Media Queries for Responsive Design */
@media (max-width: 600px) {
    #bottom-menu {
        padding: 8px 0;
    }

    .menu-buttons {
        gap: 6px;
        padding: 0 8px;
    }

    .menu-btn {
        font-size: 14px;
        padding: 16px 10px;
        min-width: 80px;
    }

    .menu-section {
        margin: 0px 0px;
        padding: 2px;
        width: calc(100% - 2px);
    }

    .section-content h3 {
        font-size: 16px;
    }

    .section-content p {
        font-size: 12px;
    }
}

@media (max-width: 360px) {
    #bottom-menu {
        padding: 6px 0;
    }

    .menu-buttons {
        gap: 4px;
        padding: 0 6px;
    }

    .menu-btn {
        font-size: 11px;
        padding: 12px 8px;
        min-width: 70px;
    }

    .menu-section {
        margin: 2px 2px;
        padding: 2px;
        width: calc(100% - 2px);
    }

    .section-content h3 {
        font-size: 14px;
    }

    .section-content p {
        font-size: 11px;
    }
}