/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Aug 06 2025 | 09:36:30 */
/* Tab điều khiển */
.tab-buttons {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}
.tab-buttons button {
    flex: 1;
    padding: 10px;
    cursor: pointer;
    background: #f1f1f1;
    border: none;
    font-size: 16px;
    font-weight: bold;
    transition: background 0.3s;
}
.tab-buttons button.active {
    background: #0073aa;
    color: white;
}

/* Ẩn form mặc định */
#customer_login .col-1,
#customer_login .col-2 {
    display: none;
}


/* Cho tất cả các ô input trong login & register full width */
#customer_login input[type="text"],
#customer_login input[type="email"],
#customer_login input[type="password"] {
    width: 100% !important;
    box-sizing: border-box;
}

/* Nút cũng full width để đồng đều */
#customer_login button[type="submit"] {
    width: 100%;
}


/* Container của form đăng nhập và đăng ký khi hiển thị */
#customer_login .col-1,
#customer_login .col-2 {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
}


.tab-buttons {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
    gap: 10px; /* khoảng cách giữa hai nút */
}

.tab-buttons button {
    flex: 1;
    padding: 12px 0;
    border-radius: 30px; /* bo tròn */
    font-size: 16px;
    font-weight: bold;
    border: 2px solid #0073aa; /* viền theo tone màu */
    background: transparent;
    color: #0073aa;
    transition: all 0.3s ease;
    cursor: pointer;
}

.tab-buttons button:hover {
    background: rgba(0, 115, 170, 0.1); /* nhẹ nhàng khi hover */
}

.tab-buttons button.active {
    background: #0073aa;
    color: #fff;
    box-shadow: 0 4px 10px rgba(0, 115, 170, 0.3); /* hiệu ứng nổi */
    transform: translateY(-1px); /* tạo cảm giác nhấn */
}


.tab-buttons {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
    gap: 10px; /* khoảng cách giữa hai nút */
}

.tab-buttons button {
    flex: 1;
    padding: 12px 0;
    border-radius: 30px; /* bo tròn */
    font-size: 16px;
    font-weight: bold;
    border: 2px solid #d32f2f; /* viền theo tone đỏ */
    background: transparent;
    color: #d32f2f;
    transition: all 0.3s ease;
    cursor: pointer;
}

.tab-buttons button:hover {
    background: rgba(211, 47, 47, 0.1); /* nền nhẹ khi hover */
}

.tab-buttons button.active {
    background: #d32f2f;
    color: #fff;
    box-shadow: 0 4px 10px rgba(211, 47, 47, 0.3); /* hiệu ứng nổi đỏ */
    transform: translateY(-1px);
}



/* Ẩn form mặc định */
#customer_login .col-1,
#customer_login .col-2 {
    display: none;
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

/* Form được kích hoạt */
#customer_login .col-1.active,
#customer_login .col-2.active {
    display: block;
    opacity: 1;
    transform: translateY(0);
}




/* Chiều cao tối thiểu container */
.account-container.lightbox-inner {
    min-height: 800px;
}

/* Hiệu ứng mượt khi chuyển tab */
#customer_login .col-1,
#customer_login .col-2 {
    display: none;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.4s ease, transform 0.4s ease;
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    position: absolute; /* chồng lên nhau khi chuyển */
    left: 0;
    top: 0;
}

#customer_login {
    position: relative;
    min-height: 400px; /* giữ chỗ tránh giật layout */
}

#customer_login .col-1.active,
#customer_login .col-2.active {
    display: block;
    opacity: 1;
    transform: translateY(0);
    position: relative;
}








.account-container.lightbox-inner {
    min-height: 800px;
    position: relative;
}

/* Container tab buttons */
.tab-buttons {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
    gap: 10px;
}

/* Tab buttons */
.tab-buttons button {
    flex: 1;
    padding: 12px 0;
    border-radius: 30px;
    font-size: 16px;
    font-weight: bold;
    border: 2px solid #d32f2f;
    background: transparent;
    color: #d32f2f;
    cursor: pointer;
    transition: all 0.3s ease;
}
.tab-buttons button:hover {
    background: rgba(211,47,47,0.1);
}
.tab-buttons button.active {
    background: #d32f2f;
    color: #fff;
    box-shadow: 0 4px 10px rgba(211,47,47,0.3);
    transform: translateY(-1px);
}

/* Form wrapper fix */
#customer_login {
    position: relative;
    min-height: 400px; /* giữ layout để nút tab không nhảy */
}

/* Ẩn form mặc định nhưng không phá layout */
#customer_login .col-1,
#customer_login .col-2 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    opacity: 0;
    pointer-events: none; /* không click được khi ẩn */
    transform: translateY(20px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

/* Form active */
#customer_login .col-1.active,
#customer_login .col-2.active {
    opacity: 1;
    pointer-events: all;
    transform: translateY(0);
    position: relative; /* trở về luồng bình thường khi active */
}