a {color: var(--primary);text-decoration: none;transition: color 0.2s ease-in-out;}
a:hover,a:focus {color: var(--secondary);box-shadow: none!important;}
h1,h2,h3,h4,h5,h6 {padding: 0;margin: 0;font-weight: 600;}
p {padding: 0;margin: 0;}
ul,ol,li {margin: 0;padding: 0;list-style: none;}
h1 {font-size: clamp(22px, 2vw, 30px);line-height: 1.2;}
h2 {font-size: clamp(18px, 1.5vw, 23px);line-height: 1.25;}
h3 {font-size: clamp(18px, 1.5vw, 20px);line-height: 1.3;}
h4 {font-size: clamp(16px, 1.5vw, 18px);line-height: 1.3;}
h5 {font-size: clamp(14px, 1.5vw, 16px);}
h6 {font-size: clamp(12px, 1.2vw, 14px);}
p {font-size: clamp(14px, 1.5vw, 16px);line-height: 1.55;}
ul,ol,li {font-size: clamp(14px, 1.5vw, 16px);}
p span {font-weight: 600;}
.small {font-size: clamp(12px, 1.5vw, 14px);}
.small-xs {font-size: clamp(10px, 1.5vw, 12px);}
.text-muted {color: var(--gray);}
.fw-bold {font-weight: 500!important;}

.login {background-image: url('../img/login-bg.jpg');background-size: cover;background-position: center;background-repeat: no-repeat;overflow: hidden;padding: 60px 0px;}
.login-card {background: rgba(255, 255, 255, 0.98);border-radius: 16px;box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2) !important;}

.accounts {font-family: "Plus Jakarta Sans", sans-serif;font-size: clamp(14px, 1.5vw, 16px);padding: 50px 0px;}
.accounts .btn-toggle .btn-check:checked+.btn, 
.accounts .btn-toggle .btn.active, .btn.show, 
.accounts .btn-toggle .btn:first-child:active, 
.accounts .btn-toggle :not(.btn-check)+.btn:active {background-color: var(--primary);color: var(--white)!important;}

.accounts h6 {font-weight: 500;margin-bottom: 10px;color: var(--gray);text-transform: uppercase;}
.accounts table th {font-weight: 600;}
.accounts .card {border: 1px solid var(--light2);border-radius: 10px;}
.accounts .card-header {background-color: transparent;padding: 15px 20px;border-bottom: 1px solid var(--light2);}
.accounts .card-footer {background-color: transparent;padding: 15px 20px;border-radius: 0px 0px 10px 10px;border-top: 1px solid var(--light2);}
.accounts .card-body {padding: 20px;}
.accounts .chat-window {background-image: radial-gradient(var(--light2) 1px, transparent 1px);background-size: 20px 20px;}
.accounts .dropdown-menu {border: 1px solid var(--light2);border-radius: 10px;box-shadow: 0 2px 10px rgba(0,0,0,0.05);}
.accounts .dropdown-item {color: var(--black);background-color: var(--white);font-size: 15px;font-weight: 500;}
.accounts .dropdown-item:hover {color: var(--primary);}
.accounts .list-group svg {width: 25px;height: 25px;stroke-width: 1.5;}
.accounts .list-group-item {padding: 10px 16px;color: var(--black);}
.accounts .list-group-item.active {color: var(--white);background-color: var(--primary);border-color: var(--primary);}
.accounts .welcome {display: flex;align-items: center;gap: 15px;margin-bottom: 30px;}
.accounts .welcome img {width: 60px;height: 60px;border-radius: 50%;}
.accounts .quick-access .access-box {border: 1px solid var(--light2);padding: 20px;border-radius: 10px;transition: all 0.2s ease-in-out;}
.accounts .quick-access .access-box svg {padding: 7px;border-radius: 7px;width: 40px;height: 40px;stroke-width: 1.5;margin-bottom: 10px;}
.accounts .quick-access .icon-primary svg {background-color: var(--primary-light);color: var(--primary);}
.accounts .quick-access .icon-secondary svg {background-color: var(--secondary-light);color: var(--secondary);}
.accounts .quick-access .icon-green svg {background-color: var(--green-light);color: var(--green);}
.accounts .quick-access .icon-red svg {background-color: var(--red-light);color: var(--red);}
.accounts .quick-access .icon-orange svg {background-color: var(--orange-light);color: var(--orange);}
.accounts .quick-access .icon-yellow svg {background-color: var(--yellow-light);color: var(--yellow);}
.accounts .quick-access .icon-black svg {background-color: var(--light1);color: var(--black);}
.accounts .quick-access .access-box p {color: var(--black);font-weight: 500;}
.accounts .quick-access .access-box:hover {background-color: var(--primary-light-alt);}
.accounts .page-header {margin-bottom: 35px;}
.accounts .page-header h2 {color: var(--primary);margin-bottom: 5px;}
.accounts .page-header svg {color: var(--primary);width: 30px;height: 30px;stroke-width: 1.75;}
.accounts .page-header .btn-back {color: var(--gray);font-weight: 400;border: 1px solid var(--light2)!important;display: inline-flex;align-items: center;padding: 7px 15px 7px 10px;gap: 5px;}
.accounts .page-header .btn-back svg {color: var(--gray);width: 20px;height: 20px;}
.accounts .page-info .info-box {border: 1px solid var(--light2);padding: 15px;border-radius: 10px;}
.accounts .page-info .info-box h1 {margin-bottom: 5px;}
.accounts .page-list select {width: 140px;}
.accounts .page-list .badge-view {border: 1px solid var(--light3);padding: 7px 20px;border-radius: 8px;}
.accounts .page-list svg {color: var(--gray);width: 20px;height: 20px;stroke-width: 1.5;}


.accounts .page-details .nav-pills .nav-link {display: flex;flex-direction: column;align-items: center;justify-content: center;text-align: center;width: 100%;padding: 10px 15px;color: var(--black);border: 1px solid var(--light2)!important;border-radius: 10px;transition: all 0.2s ease-in-out;}
.accounts .page-details .nav-pills .nav-link:hover {background-color: var(--primary-light-alt);}
.accounts .page-details .nav-pills .nav-link svg {display: block;background-color: var(--primary-light);color: var(--primary);padding: 7px;border-radius: 10px;margin-bottom: 5px;width: 35px;height: 35px;stroke-width: 1.75;}
.accounts .page-details .nav-pills .nav-link.active, 
.accounts .page-details .nav-pills .show>.nav-link {background-color: var(--primary);color: var(--white);border-color: var(--primary)!important;}
.accounts .page-details .card-header svg {stroke-width: 1.5;}
.accounts .page-details ol {margin-left: 20px;}
.accounts .page-details ol>li {list-style: disc;margin-bottom: 8px;}
.accounts .page-details .timeline {display: flex;flex-direction: column;gap: 0;position: relative;padding-left: 24px;}
.accounts .page-details .timeline .step {position: relative;padding-bottom: 20px;display: flex;gap: 14px;}
.accounts .page-details .timeline .step:last-child {padding-bottom:0}
.accounts .page-details .timeline .step::before{content:'';position:absolute;left:-17px;top:18px;width:1px;height:calc(100% - 4px);background: var(--light3);}
.accounts .page-details .timeline .step:last-child::before{display:none}
.accounts .page-details .timeline .step-dot{width:15px;height:15px;border-radius:50%;border:2px solid var(--light3);background:var(--color-background-primary);position:absolute;left:-23px;top:3px;flex-shrink:0}
.accounts .page-details .timeline .completed .step-dot{background: var(--primary);border-color:var(--primary)}
.accounts .page-details .timeline .current .step-dot{background: var(--secondary);border-color: var(--secondary);box-shadow:0 0 0 3px #EEEDFE}
.accounts .page-details .timeline .upcoming .step-dot{background:var(--light1);border-color:var(--light3)}
.accounts .page-details .timeline .upcoming h5 {color: var(--gray);}
.accounts .page-details iframe {border: 1px solid var(--light2);border-radius: 10px;width: 100%;height: 200px;}
.accounts .page-details .address-icon svg {width: 50px;height: 50px;padding: 12px;border-radius: 10px;stroke-width: 1.5;}
.accounts .page-details .address-home svg {background-color: var(--primary-light);color: var(--primary);}
.accounts .page-details .address-office svg {background-color: var(--green-light);color: var(--green);}
.accounts .page-details .address-other svg {background-color: var(--orange-light);color: var(--orange);}

.accounts .page-details .support-icon {width: 50px;height: 50px;display: flex;align-items: center;justify-content: center;border-radius: 10px;margin-bottom: 10px;}









.accounts .order-box {border: 1px solid var(--light2);border-radius: 10px;}
.accounts .order-box .box-header {padding: 15px 20px;}
.accounts .order-box .box-list {border-top: 1px solid var(--light2);padding: 15px 20px;}
.accounts .order-box .box-list img {border: 1px solid var(--light1);border-radius: 10px;}
.accounts .order-box .box-list:hover {background-color: var(--light4);transition: all 0.3s ease;}
.accounts .order-box .box-footer {padding: 20px;border-top: 1px solid var(--light2);text-align: end;}
.accounts .order-box .box-info {text-align: center;padding: 40px 150px;}
.accounts .order-box .box-info svg {width: 100px;height: 100px;stroke-width: 1;background-color: var(--primary-light);padding: 23px;border-radius: 50%;}
.accounts .order-box .box-track {border-top: 1px solid var(--light2);padding: 20px 40px;position: relative;}
.accounts .order-box .box-track::before {content: "";position: absolute;top: 40px;left: 10%;width: 81%;height: 2px;background: var(--light3);z-index: 1;}
.accounts .order-box .box-track-step {position: relative;z-index: 2;}
.accounts .order-box .box-track-step h5 {font-size: clamp(14px, 1vw, 16px);}
.accounts .order-box .box-track-step p {font-size: clamp(12px, 1vw, 13px);color: var(--gray);}
.accounts .order-box .box-track-step svg {width: 40px;height: 40px;stroke-width: 1.5;border: 2px solid var(--light2);color: var(--light2);background-color: var(--white);border-radius: 50%;padding: 5px;}
.accounts .order-box .box-track-step.active svg {color: var(--white);border-color: var(--primary);background-color: var(--primary);}
.accounts .order-box .box-track-step.active h5 {color: var(--primary);}
.accounts .order-box .box-details {border-top: 1px solid var(--light2);padding: 20px;}
.accounts .address-list {border: 1px solid var(--light2);padding: 20px;border-radius: 10px;}
.accounts .address-list h5 {color: var(--gray);font-size: clamp(14px, 1vw, 16px);}
.accounts .address-list .btn-link {padding: 0;}
.accounts .profile-avatar-wrapper {position: relative;width: 120px;}
.accounts .profile-avatar-wrapper img {width: 120px;height: 120px;border-radius: 50%;border: 1px solid var(--light2);object-fit: cover;}
.accounts .avatar-edit-btn {position: absolute;bottom: 0;right: 0;width: 35px;height: 35px;background: var(--primary);color: var(--white);border-radius: 50%;display: flex;align-items: center;justify-content: center;cursor: pointer;border: 3px solid var(--white);transition: all 0.2s ease;}
.accounts .avatar-edit-btn:hover {transform: scale(1.1);background: var(--primary);}
.accounts .support-icon-box {width: 60px;height: 60px;border-radius: 50%;display: flex;align-items: center;justify-content: center;}
@media (max-width: 768px) {
    .accounts .order-box .box-info {text-align: center;padding: 50px 50px;}
    .accounts .order-box .box-track {padding: 20px;}
    .accounts .order-box .box-track::before {width: 2px;height: 70%;left: 40px;}
}