/* ===== ตกแต่งหน้าบัญชีของฉัน (My Account) ===== */

/* 1. เอาแถบสีแดงออก และตกแต่งเมนูฝั่งซ้ายใหม่ */
.woocommerce-account .woocommerce-MyAccount-navigation ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li {
    margin-bottom: 12px !important;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
    display: block !important;
    background-color: #fdfaf6 !important; /* พื้นหลังสีครีมอ่อน */
    color: #5c3a21 !important; /* ตัวหนังสือสีน้ำตาล */
    padding: 14px 24px !important;
    border-radius: 12px !important; /* ขอบมน */
    border: 1px solid #e2d1c3 !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
}

/* 2. เอฟเฟกต์เวลาเอาเมาส์ชี้ หรือเวลาเปิดหน้านั้นอยู่ (Active) */
.woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover,
.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a {
    background-color: #5c3a21 !important; /* เปลี่ยนเป็นสีน้ำตาลเข้ม */
    color: #ffffff !important; /* ตัวหนังสือสีขาว */
    border-color: #5c3a21 !important;
    transform: translateX(5px) !important; /* ลูกเล่นขยับปุ่มไปทางขวานิดๆ */
    box-shadow: 0 4px 10px rgba(0,0,0,0.05) !important;
}

/* 3. ตกแต่งกรอบเนื้อหาฝั่งขวาให้ดูพรีเมียมขึ้น */
.woocommerce-account .woocommerce-MyAccount-content {
    background-color: #ffffff !important;
    padding: 30px !important;
    border-radius: 16px !important;
    border: 1px solid #e2d1c3 !important;
    box-shadow: 0 6px 15px rgba(0,0,0,0.03) !important;
}

/* 4. เปลี่ยนสีลิงก์ในเนื้อหาฝั่งขวาให้เป็นสีน้ำตาล */
.woocommerce-account .woocommerce-MyAccount-content a {
    color: #5c3a21 !important;
    font-weight: 600 !important;
}
.woocommerce-account .woocommerce-MyAccount-content a:hover {
    color: #7a4524 !important;
    text-decoration: underline !important;
}