.elementor-1307 .elementor-element.elementor-element-d910f24{--display:flex;--margin-top:80px;--margin-bottom:80px;--margin-left:0px;--margin-right:0px;}.elementor-1307 .elementor-element.elementor-element-f892aa2{--display:flex;--padding-top:88px;--padding-bottom:88px;--padding-left:88px;--padding-right:88px;}:root{--page-title-display:none;}@media(min-width:768px){.elementor-1307 .elementor-element.elementor-element-d910f24{--content-width:1200px;}}/* Start custom CSS for shortcode, class: .elementor-element-4ffdf18e *//* =============================================
   NHÀ HẠT ACCOUNT PAGE - FINAL STABLE VERSION
   Không dùng :has() - Compatible mọi trình duyệt
   ============================================= */

/* IMPORT FONT */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,400&family=Quicksand:wght@400;500;600;700&display=swap');

/* =============================================
   1. BASE STYLES
   ============================================= */
.nhe-my-account-wrapper {
    font-family: 'Quicksand', sans-serif !important;
    color: #4A3B32 !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 20px !important;
}

.nhe-my-account-wrapper *,
.nhe-my-account-wrapper *::before,
.nhe-my-account-wrapper *::after {
    box-sizing: border-box !important;
}

/* Ẩn tiêu đề page thừa */
.nhe-my-account-wrapper > .woocommerce > h2:first-child,
.nhe-my-account-wrapper .page-title {
    display: none !important;
}

/* =============================================
   2. THÔNG BÁO (Error/Success/Info)
   ============================================= */
.nhe-my-account-wrapper .woocommerce-error,
.nhe-my-account-wrapper .woocommerce-message,
.nhe-my-account-wrapper .woocommerce-info {
    display: block !important;
    width: 100% !important;
    max-width: 900px !important;
    margin: 0 auto 30px auto !important;
    padding: 16px 24px !important;
    border-radius: 12px !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
    list-style: none !important;
    clear: both !important;
}

.nhe-my-account-wrapper .woocommerce-error {
    background: #FEF2F2 !important;
    border: 1px solid #FECACA !important;
    color: #991B1B !important;
}

.nhe-my-account-wrapper .woocommerce-message {
    background: #F0FDF4 !important;
    border: 1px solid #BBF7D0 !important;
    color: #166534 !important;
}

.nhe-my-account-wrapper .woocommerce-info {
    background: #FFFBEB !important;
    border: 1px solid #FDE68A !important;
    color: #92400E !important;
}

/* =============================================
   3. TRANG LOGIN/REGISTER (2 cột form)
   Dùng inline-block thay vì flex
   ============================================= */

/* Container 2 cột */
.nhe-my-account-wrapper .u-columns.col2-set {
    display: block !important;
    text-align: center !important;
    font-size: 0 !important; /* Loại bỏ khoảng trắng inline-block */
    max-width: 1000px !important;
    margin: 0 auto !important;
}

/* Mỗi cột */
.nhe-my-account-wrapper .u-columns .u-column1,
.nhe-my-account-wrapper .u-columns .u-column2 {
    display: inline-block !important;
    vertical-align: top !important;
    width: 48% !important;
    max-width: 460px !important;
    margin: 0 1% 30px 1% !important;
    text-align: left !important;
    font-size: 15px !important; /* Reset font-size */
    background: #FFFFFF !important;
    padding: 45px 40px !important;
    border-radius: 20px !important;
    border: 1px solid #EBE5DC !important;
    box-shadow: 0 10px 30px rgba(74, 59, 50, 0.05) !important;
}

/* Tiêu đề form */
.nhe-my-account-wrapper .u-columns h2 {
    display: block !important;
    text-align: center !important;
    font-family: 'Playfair Display', serif !important;
    font-size: 30px !important;
    font-weight: 700 !important;
    margin: 0 0 30px 0 !important;
    padding: 0 !important;
    color: #4A3B32 !important;
}

/* Form fields */
.nhe-my-account-wrapper .u-columns .woocommerce-form-row,
.nhe-my-account-wrapper .u-columns .form-row {
    margin-bottom: 20px !important;
}

.nhe-my-account-wrapper .u-columns label {
    display: block !important;
    margin-bottom: 8px !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    color: #4A3B32 !important;
}

.nhe-my-account-wrapper .u-columns input.input-text,
.nhe-my-account-wrapper .u-columns input[type="text"],
.nhe-my-account-wrapper .u-columns input[type="email"],
.nhe-my-account-wrapper .u-columns input[type="password"] {
    display: block !important;
    width: 100% !important;
    padding: 14px 16px !important;
    border: 1px solid #EBE5DC !important;
    border-radius: 10px !important;
    background: #FDFBF8 !important;
    font-size: 15px !important;
    font-family: 'Quicksand', sans-serif !important;
    color: #4A3B32 !important;
    transition: border-color 0.3s, box-shadow 0.3s !important;
}

.nhe-my-account-wrapper .u-columns input.input-text:focus,
.nhe-my-account-wrapper .u-columns input[type="text"]:focus,
.nhe-my-account-wrapper .u-columns input[type="email"]:focus,
.nhe-my-account-wrapper .u-columns input[type="password"]:focus {
    outline: none !important;
    border-color: #C19A6B !important;
    box-shadow: 0 0 0 3px rgba(193, 154, 107, 0.15) !important;
    background: #FFFFFF !important;
}

/* Checkbox ghi nhớ */
.nhe-my-account-wrapper .woocommerce-form-login__rememberme {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 15px 0 !important;
    font-size: 14px !important;
    color: #6D5E54 !important;
}

/* Nút submit */
.nhe-my-account-wrapper .u-columns button[type="submit"],
.nhe-my-account-wrapper .u-columns .button,
.nhe-my-account-wrapper .u-columns input[type="submit"] {
    display: block !important;
    width: 100% !important;
    padding: 16px 30px !important;
    margin-top: 20px !important;
    background: linear-gradient(135deg, #4A3B32 0%, #5D4A3E 100%) !important;
    color: #FFFFFF !important;
    border: none !important;
    border-radius: 50px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    font-family: 'Quicksand', sans-serif !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 15px rgba(74, 59, 50, 0.2) !important;
}

.nhe-my-account-wrapper .u-columns button[type="submit"]:hover,
.nhe-my-account-wrapper .u-columns .button:hover {
    background: linear-gradient(135deg, #5D4A3E 0%, #6D5E54 100%) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(74, 59, 50, 0.25) !important;
}

/* Link quên mật khẩu */
.nhe-my-account-wrapper .woocommerce-LostPassword {
    text-align: center !important;
    margin-top: 20px !important;
}

.nhe-my-account-wrapper .woocommerce-LostPassword a {
    color: #C19A6B !important;
    text-decoration: none !important;
    font-size: 14px !important;
    font-weight: 500 !important;
}

.nhe-my-account-wrapper .woocommerce-LostPassword a:hover {
    color: #4A3B32 !important;
    text-decoration: underline !important;
}

/* Privacy policy */
.nhe-my-account-wrapper .woocommerce-privacy-policy-text {
    font-size: 13px !important;
    color: #8B7B6B !important;
    line-height: 1.6 !important;
    margin-top: 15px !important;
}

.nhe-my-account-wrapper .woocommerce-privacy-policy-text a {
    color: #C19A6B !important;
    text-decoration: none !important;
}

/* =============================================
   4. TRANG DASHBOARD (Menu trái + Content phải)
   Dùng float - cực kỳ stable
   ============================================= */

/* Clearfix cho container */
.nhe-my-account-wrapper .woocommerce::after {
    content: "" !important;
    display: table !important;
    clear: both !important;
}

/* Menu Navigation - bên trái */
.nhe-my-account-wrapper .woocommerce-MyAccount-navigation {
    float: left !important;
    width: 260px !important;
    background: #FDFBF8 !important;
    padding: 25px !important;
    border-radius: 16px !important;
    border: 1px solid #EBE5DC !important;
    margin-right: 30px !important;
    margin-bottom: 30px !important;
}

.nhe-my-account-wrapper .woocommerce-MyAccount-navigation ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.nhe-my-account-wrapper .woocommerce-MyAccount-navigation li {
    display: block !important;
    margin-bottom: 6px !important;
    border: none !important;
}

.nhe-my-account-wrapper .woocommerce-MyAccount-navigation li a {
    display: block !important;
    padding: 12px 18px !important;
    border-radius: 50px !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    color: #6D5E54 !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
}

.nhe-my-account-wrapper .woocommerce-MyAccount-navigation li a:hover {
    background: #FFFFFF !important;
    color: #C19A6B !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05) !important;
}

.nhe-my-account-wrapper .woocommerce-MyAccount-navigation li.is-active a {
    background: #4A3B32 !important;
    color: #FFFFFF !important;
}

/* Content - bên phải, chiếm phần còn lại */
.nhe-my-account-wrapper .woocommerce-MyAccount-content {
    overflow: hidden !important; /* Tạo BFC, tự động chiếm không gian còn lại */
    background: #FFFFFF !important;
    padding: 35px !important;
    border-radius: 16px !important;
    border: 1px solid #EBE5DC !important;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.02) !important;
    min-height: 200px !important;
}

.nhe-my-account-wrapper .woocommerce-MyAccount-content p {
    font-size: 15px !important;
    color: #6D5E54 !important;
    line-height: 1.8 !important;
    margin-bottom: 15px !important;
}

.nhe-my-account-wrapper .woocommerce-MyAccount-content a {
    color: #C19A6B !important;
    text-decoration: none !important;
}

.nhe-my-account-wrapper .woocommerce-MyAccount-content a:hover {
    text-decoration: underline !important;
}

/* =============================================
   5. RESPONSIVE - CO GIÃN MƯỢT MÀ
   ============================================= */

/* ----- TABLET LANDSCAPE (900px - 1200px) ----- */
@media screen and (max-width: 1200px) {
    .nhe-my-account-wrapper {
        padding: 20px 15px !important;
    }
    
    /* Login columns thu nhỏ */
    .nhe-my-account-wrapper .u-columns .u-column1,
    .nhe-my-account-wrapper .u-columns .u-column2 {
        width: 47% !important;
        padding: 35px 30px !important;
    }
    
    /* Dashboard menu thu nhỏ */
    .nhe-my-account-wrapper .woocommerce-MyAccount-navigation {
        width: 220px !important;
        padding: 20px !important;
        margin-right: 25px !important;
    }
    
    .nhe-my-account-wrapper .woocommerce-MyAccount-content {
        padding: 30px !important;
    }
}

/* ----- TABLET PORTRAIT (768px - 900px) ----- */
@media screen and (max-width: 900px) {
    /* Login: Vẫn 2 cột nhưng nhỏ hơn */
    .nhe-my-account-wrapper .u-columns .u-column1,
    .nhe-my-account-wrapper .u-columns .u-column2 {
        width: 48% !important;
        padding: 30px 25px !important;
        margin: 0 1% 20px 1% !important;
    }
    
    .nhe-my-account-wrapper .u-columns h2 {
        font-size: 26px !important;
    }
    
    /* Dashboard: Chuyển sang xếp dọc */
    .nhe-my-account-wrapper .woocommerce-MyAccount-navigation {
        float: none !important;
        width: 100% !important;
        margin-right: 0 !important;
        margin-bottom: 20px !important;
        padding: 15px 20px !important;
    }
    
    /* Menu vẫn dạng list dọc nhưng compact */
    .nhe-my-account-wrapper .woocommerce-MyAccount-navigation ul {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        justify-content: center !important;
    }
    
    .nhe-my-account-wrapper .woocommerce-MyAccount-navigation li {
        margin-bottom: 0 !important;
    }
    
    .nhe-my-account-wrapper .woocommerce-MyAccount-navigation li a {
        padding: 10px 16px !important;
        font-size: 13px !important;
    }
    
    .nhe-my-account-wrapper .woocommerce-MyAccount-content {
        overflow: visible !important;
        padding: 25px !important;
    }
}

/* ----- MOBILE (dưới 768px) ----- */
@media screen and (max-width: 768px) {
    
    .nhe-my-account-wrapper {
        padding: 15px !important;
    }
    
    /* Thông báo */
    .nhe-my-account-wrapper .woocommerce-error,
    .nhe-my-account-wrapper .woocommerce-message,
    .nhe-my-account-wrapper .woocommerce-info {
        padding: 14px 18px !important;
        font-size: 13px !important;
        margin-bottom: 20px !important;
    }

    /* ===== LOGIN: Xếp dọc ===== */
    .nhe-my-account-wrapper .u-columns .u-column1,
    .nhe-my-account-wrapper .u-columns .u-column2 {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 20px 0 !important;
        padding: 30px 25px !important;
    }

    .nhe-my-account-wrapper .u-columns h2 {
        font-size: 26px !important;
        margin-bottom: 25px !important;
    }

    /* ===== DASHBOARD: Menu trên, Content dưới ===== */
    .nhe-my-account-wrapper .woocommerce-MyAccount-navigation {
        float: none !important;
        width: 100% !important;
        margin-right: 0 !important;
        margin-bottom: 20px !important;
        padding: 15px !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .nhe-my-account-wrapper .woocommerce-MyAccount-navigation ul {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 8px !important;
    }

    .nhe-my-account-wrapper .woocommerce-MyAccount-navigation li {
        flex-shrink: 0 !important;
        margin-bottom: 0 !important;
    }

    .nhe-my-account-wrapper .woocommerce-MyAccount-navigation li a {
        white-space: nowrap !important;
        font-size: 13px !important;
        padding: 10px 15px !important;
        background: #FFFFFF !important;
        border: 1px solid #EBE5DC !important;
    }

    .nhe-my-account-wrapper .woocommerce-MyAccount-navigation li.is-active a {
        background: #4A3B32 !important;
        border-color: #4A3B32 !important;
    }

    .nhe-my-account-wrapper .woocommerce-MyAccount-content {
        overflow: visible !important;
        padding: 25px 20px !important;
    }
}

/* ----- MOBILE NHỎ (dưới 480px) ----- */
@media screen and (max-width: 480px) {
    .nhe-my-account-wrapper {
        padding: 10px !important;
    }
    
    .nhe-my-account-wrapper .u-columns .u-column1,
    .nhe-my-account-wrapper .u-columns .u-column2 {
        padding: 25px 20px !important;
    }
    
    .nhe-my-account-wrapper .u-columns h2 {
        font-size: 24px !important;
    }
    
    .nhe-my-account-wrapper .u-columns input.input-text {
        padding: 12px 14px !important;
        font-size: 14px !important;
    }
    
    .nhe-my-account-wrapper .u-columns button[type="submit"] {
        padding: 14px 25px !important;
        font-size: 15px !important;
    }
    
    .nhe-my-account-wrapper .woocommerce-MyAccount-navigation {
        padding: 12px !important;
    }
    
    .nhe-my-account-wrapper .woocommerce-MyAccount-navigation li a {
        padding: 8px 12px !important;
        font-size: 12px !important;
    }
    
    .nhe-my-account-wrapper .woocommerce-MyAccount-content {
        padding: 20px 15px !important;
    }
}

/* =============================================
   6. SMOOTH TRANSITIONS KHI RESIZE
   ============================================= */
.nhe-my-account-wrapper .u-columns .u-column1,
.nhe-my-account-wrapper .u-columns .u-column2,
.nhe-my-account-wrapper .woocommerce-MyAccount-navigation,
.nhe-my-account-wrapper .woocommerce-MyAccount-content {
    transition: all 0.3s ease !important;
}

/* Ẩn scrollbar trên mobile navigation */
.nhe-my-account-wrapper .woocommerce-MyAccount-navigation::-webkit-scrollbar {
    display: none !important;
}

.nhe-my-account-wrapper .woocommerce-MyAccount-navigation {
    -ms-overflow-style: none !important;
    scrollbar-width: none !important;
}/* End custom CSS */