/* ============================================================
   FACEBOOK-STYLE MY ACCOUNT (Real Facebook UI)
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

.woocommerce-account .woocommerce {
    font-family: 'Inter', 'Be Vietnam Pro', -apple-system, sans-serif !important;
    color: #050505;
    background: #f0f2f5;
    padding: 16px;
    border-radius: 12px;
    max-width: 1280px;
    margin: 0 auto;
}

.woocommerce-account .woocommerce::after,
.woocommerce-account .woocommerce::before {
    content: none !important;
}

/* ============================================================
   SIDEBAR — Facebook style
   ============================================================ */
.woocommerce-MyAccount-navigation {
    background: #fff !important;
    border-radius: 12px !important;
    padding: 0 !important;
    box-shadow: 0 2px 12px rgba(0,0,0,.08) !important;
    border: 1px solid #ced0d4 !important;
    overflow: hidden;
    position: sticky;
    top: 16px;
}

/* Header với search + avatar */
.woocommerce-MyAccount-navigation::before {
    content: '';
    display: block;
    height: 56px;
    background: linear-gradient(135deg, #1877f2 0%, #166fe5 100%);
    position: relative;
}

.woocommerce-MyAccount-navigation ul {
    list-style: none !important;
    margin: 0 !important;
    padding: 8px !important;
    background: #fff;
}

.woocommerce-MyAccount-navigation ul li {
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
}

/* Item links với icon tròn */
.woocommerce-MyAccount-navigation ul li a {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    padding: 10px 12px !important;
    color: #050505 !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    border-radius: 8px !important;
    transition: background .15s !important;
    line-height: 1.4 !important;
    margin: 2px 0 !important;
    position: relative;
}

.woocommerce-MyAccount-navigation ul li a:hover {
    background: #f0f2f5 !important;
}

.woocommerce-MyAccount-navigation ul li.is-active a,
.woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--active a {
    background: #e7f3ff !important;
    color: #1877f2 !important;
}

/* Tạo icon TRÒN MÀU XANH như Facebook cho mỗi menu item */
.woocommerce-MyAccount-navigation ul li a::before {
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 18px !important;
    flex-shrink: 0 !important;
    background: #f0f2f5;
    box-shadow: 0 1px 3px rgba(0,0,0,.08);
}

/* Icons cho từng menu */
.woocommerce-MyAccount-navigation-link--dashboard a::before    { content: '🏠'; background: linear-gradient(135deg, #1877f2, #0a66c2) !important; }
.woocommerce-MyAccount-navigation-link--orders a::before       { content: '📦'; background: linear-gradient(135deg, #f7b125, #e9710f) !important; }
.woocommerce-MyAccount-navigation-link--downloads a::before    { content: '⬇️'; background: linear-gradient(135deg, #42b72a, #36a420) !important; }
.woocommerce-MyAccount-navigation-link--edit-address a::before { content: '📍'; background: linear-gradient(135deg, #f02849, #d61a44) !important; }
.woocommerce-MyAccount-navigation-link--edit-account a::before { content: '⚙️'; background: linear-gradient(135deg, #65676b, #4e4f53) !important; }
.woocommerce-MyAccount-navigation-link--dang-san-pham a::before{ content: '🛍️'; background: linear-gradient(135deg, #fe2c55, #ff6b35) !important; }
.woocommerce-MyAccount-navigation-link--viet-blog a::before    { content: '✍️'; background: linear-gradient(135deg, #8b5cf6, #6c63ff) !important; }
.woocommerce-MyAccount-navigation-link--customer-logout a::before { content: '🚪'; background: linear-gradient(135deg, #65676b, #4e4f53) !important; }

/* Separator trước logout */
.woocommerce-MyAccount-navigation-link--customer-logout {
    border-top: 1px solid #ced0d4 !important;
    margin-top: 8px !important;
    padding-top: 8px !important;
}

/* ============================================================
   CONTENT
   ============================================================ */
.woocommerce-MyAccount-content {
    background: transparent !important;
    padding: 0 !important;
    min-height: 500px !important;
}

.woocommerce-MyAccount-content > p:first-child,
.woocommerce-MyAccount-content .woocommerce-notices-wrapper + p {
    background: #fff;
    padding: 16px 20px;
    border-radius: 12px;
    border: 1px solid #ced0d4;
    box-shadow: 0 1px 2px rgba(0,0,0,.1);
    font-size: 15px;
    color: #050505;
}

/* Mobile */
@media (max-width: 768px) {
    .woocommerce-MyAccount-navigation { position: static !important; margin-bottom: 12px !important; }
    .woocommerce-account .woocommerce { padding: 8px; }
    .woocommerce-MyAccount-navigation::before { display: none; }
    .woocommerce-MyAccount-navigation ul li a::before {
        width: 32px !important; height: 32px !important; font-size: 16px !important;
    }
}

/* ============================================================
   USER HEADER CARD (top of sidebar)
   ============================================================ */
.cps-account-header {
    background: #fff;
    border-bottom: 1px solid #ced0d4;
    position: relative;
    margin-top: -56px;
    padding-top: 12px;
}

.cps-ah-user {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 14px 16px !important;
    text-decoration: none !important;
    transition: background .15s;
    border-radius: 0 !important;
    background: transparent !important;
}

.cps-ah-user:hover { background: #f0f2f5 !important; }

.cps-ah-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 3px solid #fff;
    object-fit: cover;
    box-shadow: 0 2px 8px rgba(0,0,0,.15);
    flex-shrink: 0;
    background: #f0f2f5;
}

.cps-ah-info { flex: 1; min-width: 0; }
.cps-ah-name {
    font-size: 16px;
    font-weight: 700;
    color: #050505;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
    margin-bottom: 2px;
}
.cps-ah-email {
    font-size: 12px;
    color: #65676b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 768px) {
    .cps-account-header { margin-top: 0; }
    .cps-ah-avatar { width: 42px; height: 42px; }
    .cps-ah-name { font-size: 14px; }
}