/* ================================== */
/* GIAI ĐOẠN 4: HOÀN THIỆN LAYOUT     */
/* assets/css/frontend-layout.css     */
/* ================================== */

/* 1. Layout 2 Cột (Flexbox) - TĂNG ĐỘ ƯU TIÊN */
body.woocommerce .cma-account-layout {
    display: flex;
    flex-wrap: wrap; 
    gap: 30px;
    margin-top: 20px;
    justify-content: flex-start !important;
}

/* 2. Cột Menu (20%-25%) - TĂNG ĐỘ ƯU TIÊN */
body.woocommerce .cma-account-layout .cma-layout-nav {
    flex-basis: 25% !important;
    min-width: 250px !important; /* <-- Ép chiều rộng tối thiểu */
    flex-grow: 1 !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* 3. Cột Nội dung (75%-80%) - TĂNG ĐỘ ƯU TIÊN */
body.woocommerce .cma-account-layout .cma-layout-content {
    flex-basis: 0 !important;
    flex-grow: 999 !important;
    min-width: 65% !important; /* Thêm !important để đảm bảo */
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 25px 30px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.03);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* 4. Style cho Menu (Như Screenshot_5.png) */
.cma-navigation-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.cma-navigation-menu li {
    margin-bottom: 5px;
}

.cma-navigation-menu li a {
    display: flex;
    align-items: center;
    padding: 12px 15px;
    text-decoration: none;
    color: #555;
    border-radius: 8px;
    font-weight: 600;
    font-size: 15px;
    gap: 12px;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.1s ease;
}

/* 5. *** NÂNG CẤP: Style cho Icon (Class hoặc Ảnh) *** */
.cma-navigation-menu li a .cma-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    text-align: center;
}

/* Dành cho icon class (Dashicons) */
.cma-navigation-menu li a .cma-icon-class {
    font-size: 20px;
    line-height: 1;
    color: #777;
    transition: color 0.2s ease;
}

/* Dành cho icon ảnh (IMG) */
.cma-navigation-menu li a .cma-icon-image {
    object-fit: contain;
    max-width: 100%;
    max-height: 100%;
    border-radius: 2px;
}

/* 6. Trạng thái Active & Hover (Đã cập nhật) */
.cma-navigation-menu li.is-active a {
    background-color: #f0f0ff; /* Cập nhật màu active */
    color: #0059ff; /* Cập nhật màu active */
}

/* Áp dụng màu active cho Dashicon */
.cma-navigation-menu li.is-active a .cma-icon-class {
    color: #0059ff; /* Cập nhật màu active */
}

.cma-navigation-menu li:not(.is-active) a:hover {
    background-color: #f9f9f9;
    color: #000;
    transform: translateX(3px);
}
/* *** KẾT THÚC NÂNG CẤP CSS FRONTEND *** */


/* 6B. FIX LỖI CHỮ BỊ NGẮT DÒNG (GIỮ NGUYÊN) */
/* Luật này sẽ tự động đúng khi cột menu đã đủ rộng 250px */
.cma-navigation-menu li a .cma-label {
    white-space: nowrap; 
    overflow: hidden;
    text-overflow: ellipsis;
}


/* 7. Style cho Nội dung (Cột 80%) - Giữ nguyên */
.cma-content-wrapper h3 {
    font-size: 24px;
    font-weight: 700;
    margin-top: 0;
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 1px solid #eee;
}
.cma-content-wrapper .woocommerce-message,
.cma-content-wrapper .woocommerce-info,
.cma-content-wrapper .woocommerce-error {
    border-top-width: 3px !important;
    border-radius: 5px;
    padding: 15px 20px !important;
}
.cma-content-wrapper table.woocommerce-orders-table {
    border-radius: 8px;
    overflow: hidden;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid #e0e0e0;
}
.cma-content-wrapper table.woocommerce-orders-table th,
.cma-content-wrapper table.woocommerce-orders-table td {
    padding: 15px 20px;
}
.cma-content-wrapper table.woocommerce-orders-table thead th {
    background-color: #fafafe;
    font-weight: 600;
}
.cma-content-wrapper form.woocommerce-EditAccountForm,
.cma-content-wrapper form.woocommerce-form-edit-address {
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.cma-content-wrapper form .woocommerce-form-row {
    padding: 0;
}

/* 8. Responsive (Giữ nguyên) */
@media (max-width: 900px) {
    /* Tăng độ ưu tiên cho cả responsive */
    body.woocommerce .cma-account-layout {
        flex-direction: column;
        gap: 20px;
    }
    body.woocommerce .cma-account-layout .cma-layout-nav {
        flex-basis: auto;
        width: 100%;
        min-width: unset !important; /* Tắt min-width trên mobile */
    }
    body.woocommerce .cma-account-layout .cma-layout-content {
        flex-basis: auto;
        width: 100%;
        min-width: unset !important; /* Tắt min-width trên mobile */
        padding: 20px;
    }
}

@media (max-width: 480px) {
    body.woocommerce .cma-account-layout .cma-layout-content {
        padding: 15px;
    }
    .cma-content-wrapper h3 {
        font-size: 20px;
    }
    .cma-content-wrapper table.woocommerce-orders-table {
        display: block;
        width: 100%;
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
    }
}