/* header account */
.header-account {padding: 12px; border: 1px solid #eee; border-radius: 4px; margin-bottom: 16px; line-height: normal;}
.header-account svg {width: 60px; height: 60px; fill: var(--color-primary);}
.header-account .welcome {font-size: 22px; font-weight: 600; color: var(--color-primary);}
.header-account .text-welcome {font-size: 16px;}
@media (max-width: 991px) {
	.header-account .welcome {font-size: 18px;}
	.header-account .text-welcome {font-size: 14px;}
}
/* header account */

/* box */
.content-account {display: flex; justify-content: space-between; gap: 16px;}
.box {padding: 12px; border: 1px solid #eee; border-radius: 4px; flex: 1; display: flex; flex-direction: column;}
.box h2 {font-size: 24px; margin-bottom: 12px; color: #000;}
.box li a:not(.btn):hover {text-decoration: underline;}
@media (max-width: 991px) {
	.content-account {flex-direction: column;}
}
/* box */

/* modal contact */
.modal-contact {line-height: normal; display: flex; flex-direction: column; gap: 8px;}
.modal-contact a:not(.btn) {border: 1px solid #eee; border-radius: 4px; padding: 8px; transition: ease all .5s;}
.modal-contact a:not(.btn):hover {border-color: #aaa;}
.modal-contact i {font-size: 20px; color: var(--color-primary);}
.modal-contact .modal-contact-label {font-weight: 500; color: #000; font-size: 15px;}
/* modal contact */

/* menu */
.account-menu {font-size: 16px; display: flex; flex-direction: column; line-height: normal; font-weight: 500;}
.account-menu li a {border: 1px solid #eee; padding: 12px; display: flex; align-items: center; gap: 8px;}
.account-menu li:first-child a {border-radius: 4px 4px 0 0;}
.account-menu li:last-child a {border-radius: 0 0 4px 4px;}
.account-menu li:not(:last-child) a {border-bottom: none;}
.account-menu li.active a {background: var(--color-primary); color: #fff;}
.account-menu li:not(.active) a:hover {background: #f4f4f4;}
.account-menu li svg {fill: var(--color-primary); width: 18px; height: 18px;}
.account-menu li.active svg {fill: #fff;}
/* menu */