.account-layout{ display: grid; grid-template-columns: 280px 1fr; gap: 32px; align-items: flex-start;} .account-sidebar{ background: var(--white); border-radius: var(--radius-lg); border: 1px solid var(--line); overflow: hidden; position: sticky; top: 140px;} .account-user-card{ padding: 28px 24px; text-align: center; border-bottom: 1px solid var(--line); background: linear-gradient(135deg, var(--primary-soft) 0%, var(--white) 100%);} .account-user-avatar{ width: 80px; height: 80px; margin: 0 auto 14px; border-radius: 50%; background: var(--gradient-1); color: var(--white); display: flex; align-items: center; justify-content: center; font-size: 30px; font-weight: 800; overflow: hidden; box-shadow: 0 8px 20px rgba(37, 99, 235, 0.28);} .account-user-avatar img{ width: 100%; height: 100%; object-fit: cover;} .account-user-name{ font-size: 16px; font-weight: 800; color: var(--ink); margin-bottom: 4px;} .account-user-email{ font-size: 12.5px; color: var(--gray);} .account-nav{ padding: 16px; display: flex; flex-direction: column; gap: 4px;} .account-nav-link{ display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 10px; color: var(--ink-2); text-decoration: none; font-size: 13.5px; font-weight: 600; transition: var(--transition); cursor: pointer; position: relative;} .account-nav-link i:first-child{ width: 20px; font-size: 15px; color: var(--gray); transition: var(--transition);} .account-nav-link .nav-arrow{ margin-right: auto; font-size: 11px; opacity: 0; transform: translateX(-4px); transition: var(--transition);} .account-nav-link:hover{ background: var(--primary-soft); color: var(--primary);} .account-nav-link:hover i:first-child{ color: var(--primary);} .account-nav-link:hover .nav-arrow{ opacity: 1; transform: translateX(0);} .account-nav-link.active{ background: var(--primary); color: var(--white);} .account-nav-link.active i:first-child{ color: var(--white);} .account-nav-link.active .nav-arrow{ opacity: 1; transform: translateX(0); color: var(--white);} .account-nav-divider{ height: 1px; background: var(--line); margin: 8px 16px;} .account-nav-link.danger:hover{ background: #FEF2F2; color: var(--danger);} .account-nav-link.danger:hover i{ color: var(--danger);} .account-content{ min-height: 400px;} .account-page-header{ display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; padding-bottom: 20px; border-bottom: 1px solid var(--line); flex-wrap: wrap; gap: 12px;} .account-page-title{ font-size: 24px; font-weight: 800; color: var(--ink); letter-spacing:-0.4px;} .account-page-title span{ color: var(--primary);} .account-page-subtitle{ font-size: 13px; color: var(--gray); margin-top: 4px;} .stats-grid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 32px;} .stat-card{ background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 22px; transition: var(--transition); position: relative; overflow: hidden;} .stat-card::before{ content: ""; position: absolute; top: 0; right: 0; width: 60px; height: 60px; border-radius: 50%; background: var(--primary-soft); transform: translate(30%,-30%); opacity: 0.5;} .stat-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--primary-soft-2);} .stat-icon{ width: 48px; height: 48px; border-radius: 12px; background: var(--primary-soft); color: var(--primary); display: flex; align-items: center; justify-content: center; font-size: 20px; margin-bottom: 14px;} .stat-card.warning .stat-icon{ background: #FEF3C7; color: #D97706;} .stat-card.success .stat-icon{ background: #ECFDF5; color: var(--success);} .stat-card.danger .stat-icon{ background: #FEF2F2; color: var(--danger);} .stat-value{ font-size: 26px; font-weight: 800; color: var(--ink); line-height: 1; margin-bottom: 6px; letter-spacing:-0.6px;} .stat-label{ font-size: 12.5px; color: var(--gray); font-weight: 600;} .account-table-wrapper{ background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; overflow-x: auto;} .account-table{ width: 100%; border-collapse: collapse; min-width: 600px;} .account-table thead{ background: var(--bg); border-bottom: 1px solid var(--line);} .account-table th{ padding: 14px 18px; text-align: right; font-size: 12px; font-weight: 800; color: var(--ink); letter-spacing: 0.3px; text-transform: uppercase; white-space: nowrap;} .account-table td{ padding: 16px 18px; font-size: 13.5px; color: var(--ink-2); border-bottom: 1px solid var(--line-soft); vertical-align: middle;} .account-table tbody tr:last-child td{ border-bottom: none;} .account-table tbody tr{ transition: var(--transition);} .account-table tbody tr:hover{ background: var(--primary-soft);} .order-number-link{ color: var(--primary); font-weight: 800; text-decoration: none; font-size: 13px;} .order-number-link:hover{ text-decoration: underline;} .status-badge{ display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 50px; font-size: 11px; font-weight: 700; letter-spacing: 0.3px;} .status-pending{ background: #FEF3C7; color: #D97706;} .status-confirmed, .status-processing{ background: var(--primary-soft); color: var(--primary);} .status-shipped{ background: #F3E8FF; color: #7C3AED;} .status-delivered{ background: #ECFDF5; color: var(--success);} .status-cancelled, .status-refunded{ background: #FEF2F2; color: var(--danger);} .btn-table-action{ display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 8px; background: var(--primary-soft); color: var(--primary); font-family: inherit; font-size: 12px; font-weight: 700; text-decoration: none; border: none; cursor: pointer; transition: var(--transition);} .btn-table-action:hover{ background: var(--primary); color: var(--white);} .order-details-wrapper{ display: grid; grid-template-columns: 1fr 340px; gap: 24px; align-items: flex-start;} .order-info-card{ background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 24px; margin-bottom: 20px;} .order-info-card h3{ font-size: 15px; font-weight: 800; color: var(--ink); margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 8px;} .order-info-card h3 i{ color: var(--primary);} .order-info-list{ display: flex; flex-direction: column; gap: 12px;} .order-info-item{ display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; font-size: 13.5px;} .order-info-item .label{ color: var(--gray); font-weight: 600; flex-shrink: 0;} .order-info-item .value{ color: var(--ink); font-weight: 700; text-align: left;} .order-timeline{ display: flex; flex-direction: column; gap: 0; position: relative;} .timeline-item{ display: flex; gap: 16px; position: relative; padding-bottom: 24px;} .timeline-item:last-child{ padding-bottom: 0;} .timeline-item::before{ content: ""; position: absolute; right: 13px; top: 30px; bottom:-2px; width: 2px; background: var(--line);} .timeline-item:last-child::before{ display: none;} .timeline-item.completed::before{ background: var(--primary);} .timeline-icon{ width: 28px; height: 28px; border-radius: 50%; background: var(--line); color: var(--white); display: flex; align-items: center; justify-content: center; font-size: 12px; flex-shrink: 0; z-index: 1;} .timeline-item.completed .timeline-icon{ background: var(--primary);} .timeline-content{ flex: 1; padding-top: 4px;} .timeline-title{ font-size: 13.5px; font-weight: 800; color: var(--ink); margin-bottom: 4px;} .timeline-date{ font-size: 11.5px; color: var(--gray);} .profile-card{ background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 32px; max-width: 640px;} .profile-card h3{ font-size: 17px; font-weight: 800; color: var(--ink); margin-bottom: 8px;} .profile-card .form-subtitle{ font-size: 13px; color: var(--gray); margin-bottom: 26px;} .addresses-grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px;} .address-card{ background: var(--white); border: 2px solid var(--line); border-radius: var(--radius-md); padding: 22px; position: relative; transition: var(--transition);} .address-card:hover{ border-color: var(--primary-soft-2);} .address-card.default{ border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.08);} .address-card-header{ display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px;} .address-label{ display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 50px; background: var(--primary-soft); color: var(--primary); font-size: 11px; font-weight: 800;} .address-card.default .address-label{ background: var(--primary); color: var(--white);} .address-actions{ display: flex; gap: 6px;} .address-action-btn{ width: 32px; height: 32px; border-radius: 8px; background: transparent; border: 1px solid var(--line); color: var(--ink-2); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 12px; transition: var(--transition);} .address-action-btn:hover{ background: var(--primary-soft); border-color: var(--primary); color: var(--primary);} .address-action-btn.delete:hover{ background: #FEF2F2; border-color: var(--danger); color: var(--danger);} .address-name{ font-size: 15px; font-weight: 800; color: var(--ink); margin-bottom: 8px;} .address-line{ font-size: 13px; color: var(--gray); line-height: 1.7; margin-bottom: 4px; display: flex; align-items: center; gap: 6px;} .address-line i{ width: 14px; font-size: 12px; color: var(--primary);} .address-card-actions{ margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); display: flex; gap: 8px;} .btn-add-address{ display: flex; align-items: center; justify-content: center; gap: 8px; padding: 16px; border-radius: var(--radius-md); border: 2px dashed var(--line); background: transparent; color: var(--gray); font-family: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; transition: var(--transition); min-height: 200px; flex-direction: column; text-decoration: none;} .btn-add-address:hover{ border-color: var(--primary); color: var(--primary); background: var(--primary-soft);} .btn-add-address i{ font-size: 24px;} .empty-account{ text-align: center; padding: 60px 20px; background: var(--white); border: 1px dashed var(--line); border-radius: var(--radius-md);} .empty-account i{ font-size: 48px; color: var(--gray-light); margin-bottom: 20px; display: block;} .empty-account h3{ font-size: 18px; font-weight: 800; color: var(--ink); margin-bottom: 8px;} .empty-account p{ font-size: 13.5px; color: var(--gray); margin-bottom: 24px;} @media (max-width: 1000px){ .account-layout{ grid-template-columns: 1fr; gap: 20px;} .account-sidebar{ position: static;} .account-user-card{ padding: 20px; display: flex; align-items: center; gap: 16px; text-align: right;} .account-user-avatar{ width: 60px; height: 60px; font-size: 22px; margin: 0; flex-shrink: 0;} .account-nav{ flex-direction: row; overflow-x: auto; gap: 6px; padding: 12px; scrollbar-width: none;} .account-nav::-webkit-scrollbar{ display: none;} .account-nav-link{ white-space: nowrap; padding: 10px 16px; font-size: 12.5px;} .account-nav-link .nav-arrow{ display: none;} .account-nav-divider{ display: none;} .stats-grid{ grid-template-columns: repeat(2, 1fr); gap: 12px;} .stat-card{ padding: 16px;} .stat-icon{ width: 40px; height: 40px; font-size: 16px; margin-bottom: 10px;} .stat-value{ font-size: 20px;} .stat-label{ font-size: 11.5px;} .order-details-wrapper{ grid-template-columns: 1fr;}} @media (max-width: 600px){ .account-page-title{ font-size: 20px;} .profile-card{ padding: 22px;} .addresses-grid{ grid-template-columns: 1fr;} .account-table th, .account-table td{ padding: 12px 14px; font-size: 12.5px;}} .form-row{ display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px;} .form-row.single{ grid-template-columns: 1fr;} .form-row.triple{ grid-template-columns: 1fr 1fr 1fr;} .form-group{ display: flex; flex-direction: column; gap: 8px;} .form-group label{ font-size: 13px; font-weight: 700; color: var(--ink); display: flex; align-items: center; gap: 4px;} .form-group label .required{ color: var(--danger); font-weight: 800;} .form-group input[type="text"], .form-group input[type="email"], .form-group input[type="password"], .form-group input[type="tel"], .form-group input[type="number"], .form-group select, .form-group textarea{ padding: 13px 16px; border: 1.5px solid var(--line); border-radius: 12px; font-family: inherit; font-size: 14px; color: var(--ink); background: var(--white); outline: none; transition: var(--transition); width: 100%;} .form-group input[type="text"]:focus, .form-group input[type="email"]:focus, .form-group input[type="password"]:focus, .form-group input[type="tel"]:focus, .form-group input[type="number"]:focus, .form-group select:focus, .form-group textarea:focus{ border-color: var(--primary); box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.08);} .form-group input::placeholder, .form-group textarea::placeholder{ color: var(--gray-light);} .form-group input[type="file"]{ padding: 10px 14px; border: 1.5px dashed var(--line); border-radius: 12px; font-family: inherit; font-size: 13px; color: var(--gray); background: var(--bg); cursor: pointer; transition: var(--transition); width: 100%;} .form-group input[type="file"]:hover{ border-color: var(--primary); background: var(--primary-soft);} .form-group textarea{ resize: vertical; min-height: 100px;} .form-group select{ appearance: none;-webkit-appearance: none; background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: left 14px center; background-size: 16px; padding-left: 42px; cursor: pointer;} .form-group .form-error{ font-size: 12px; color: var(--danger); font-weight: 600; display: flex; align-items: center; gap: 4px; margin-top: 2px;} .form-group .form-error::before{ content: "\f06a"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 11px;} .form-group input[type="checkbox"]{ width: 18px; height: 18px; accent-color: var(--primary); cursor: pointer; margin: 0;} .form-group label.checkbox-label{ display: flex; align-items: center; gap: 10px; cursor: pointer; padding: 12px 16px; background: var(--bg); border-radius: 12px; border: 1.5px solid var(--line); transition: var(--transition); font-weight: 600;} .form-group label.checkbox-label:hover{ border-color: var(--primary); background: var(--primary-soft);} .password-strength{ height: 4px; background: var(--line); border-radius: 2px; overflow: hidden; margin-top: 8px;} .password-strength-bar{ height: 100%; width: 0; transition: all 0.3s ease; border-radius: 2px;} .profile-card form button[type="submit"]{ margin-top: 8px; padding: 13px 28px; border-radius: 12px; border: none; background: var(--primary); color: var(--white); font-family: inherit; font-size: 14px; font-weight: 700; cursor: pointer; transition: var(--transition); display: inline-flex; align-items: center; gap: 8px; box-shadow: 0 6px 16px rgba(37, 99, 235, 0.28);} .profile-card form button[type="submit"]:hover{ background: var(--primary-dark); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(37, 99, 235, 0.4);} .avatar-preview-wrapper{ display: flex; align-items: center; gap: 20px; padding: 16px; background: var(--bg); border-radius: 14px; border: 1.5px solid var(--line);} .avatar-preview{ width: 72px; height: 72px; border-radius: 50%; overflow: hidden; background: var(--gradient-1); color: var(--white); display: flex; align-items: center; justify-content: center; font-size: 26px; font-weight: 800; flex-shrink: 0; box-shadow: 0 6px 16px rgba(37, 99, 235, 0.25);} .avatar-preview img{ width: 100%; height: 100%; object-fit: cover;} .avatar-info{ flex: 1;} .avatar-info h4{ font-size: 14px; font-weight: 800; color: var(--ink); margin-bottom: 4px;} .avatar-info p{ font-size: 12px; color: var(--gray); margin-bottom: 10px;} .avatar-info input[type="file"]{ font-size: 12px; padding: 8px 12px;} #addressForm .profile-card{ padding: 28px;} #addressForm .form-row{ margin-bottom: 18px;} @media (max-width: 900px){ .form-row, .form-row.triple{ grid-template-columns: 1fr; gap: 14px;} .profile-card{ padding: 22px;} #addressForm .profile-card{ padding: 22px;} .avatar-preview-wrapper{ flex-direction: column; text-align: center; gap: 14px;}} .account-page-header .btn{ padding: 10px 20px; font-size: 13px; border-radius: 10px; gap: 6px; box-shadow: 0 4px 12px rgba(37, 99, 235, 0.15);} .account-page-header .btn i{ font-size: 12px;} .account-page-header .btn:hover{ transform: translateY(-1px); box-shadow: 0 6px 16px rgba(37, 99, 235, 0.25);} .btn-table-action{ padding: 6px 14px; font-size: 12px; border-radius: 8px;} .empty-account{ padding: 50px 24px;} .empty-account .btn{ padding: 11px 22px; font-size: 13px; border-radius: 10px; gap: 8px; display: inline-flex; align-items: center; justify-content: center;} .empty-account .btn i{ font-size: 13px;} .btn-add-address{ display: flex; align-items: center; justify-content: center; gap: 10px; padding: 20px; border-radius: var(--radius-md); border: 2px dashed var(--line); background: transparent; color: var(--gray); font-family: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; transition: var(--transition); min-height: 220px; flex-direction: column; text-decoration: none;} .btn-add-address i{ font-size: 32px; color: var(--primary); width: 60px; height: 60px; border-radius: 16px; background: var(--primary-soft); display: flex; align-items: center; justify-content: center; transition: var(--transition);} .btn-add-address span{ font-size: 13px;} .btn-add-address:hover{ border-color: var(--primary); color: var(--primary); background: var(--primary-soft); transform: translateY(-3px);} .btn-add-address:hover i{ background: var(--primary); color: var(--white); transform: scale(1.05);} #addressForm .btn{ padding: 11px 22px; font-size: 13px; border-radius: 10px; gap: 8px;} .profile-card form button[type="submit"]{ padding: 11px 24px; font-size: 13.5px; border-radius: 10px; margin-top: 8px;} .wishlist-header-actions .btn{ padding: 10px 20px; font-size: 13px; border-radius: 10px; gap: 6px;} @media (max-width: 900px){ .account-page-header{ flex-direction: column; align-items: stretch; gap: 12px;} .account-page-header .btn{ width: 100%; justify-content: center; padding: 11px 20px;} .btn-add-address{ min-height: 140px; padding: 16px;} .btn-add-address i{ width: 48px; height: 48px; font-size: 24px;} .empty-account{ padding: 40px 20px;} .empty-account .btn{ width: 100%; padding: 12px 20px;} .wishlist-header-actions{ flex-direction: column; align-items: stretch; gap: 10px;} .wishlist-header-actions .btn{ width: 100%; justify-content: center;}} @media (max-width: 600px){ .account-page-header .btn{ padding: 10px 18px; font-size: 12.5px;} .btn-add-address{ min-height: 120px;} .btn-add-address i{ width: 44px; height: 44px; font-size: 20px;} .empty-account .btn{ font-size: 12.5px; padding: 11px 18px;}} .form-group input[type="url"], .form-group input[type="search"], .form-group input[type="time"], .form-group input[type="week"], .form-group input[type="month"]{ padding: 13px 16px; border: 1.5px solid var(--line); border-radius: 12px; font-family: inherit; font-size: 14px; color: var(--ink); background: var(--white); outline: none; transition: var(--transition); width: 100%;} .form-group input[type="url"]:focus, .form-group input[type="search"]:focus, .form-group input[type="time"]:focus, .form-group input[type="week"]:focus, .form-group input[type="month"]:focus{ border-color: var(--primary); box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.08);} .form-group input[type="color"]{ width: 100%; height: 48px; padding: 4px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--white); cursor: pointer; outline: none;-webkit-appearance: none; appearance: none;} .form-group input[type="color"]::-webkit-color-swatch-wrapper{ padding: 0;} .form-group input[type="color"]::-webkit-color-swatch{ border: none; border-radius: 8px;}