header {
  width: 100%;
  height: 150px;
  min-height: 109px;
  background-size: cover;
  background: linear-gradient(rgba(0, 102, 204, 0.9), rgba(40, 134, 231, 0.9)), url("../../frontend/images/bg-header.png") no-repeat;
  display: flex;
  align-items: center;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);
  border-radius: 0px 0px 10px 10px; }
  header .header-text-center {
    left: 0;
    right: 0; }
  header .header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px; }
    header .header-image {
      display: inline-block; }
    header .header-title {
      width: 100%;
      font-weight: 600;
      font-size: 1.125rem;
      line-height: 21px;
      color: #ff9933; }
    header .header .header-text {
      font-style: normal;
      font-weight: 400;
      font-size: 0.875rem;
      line-height: 15px;
      color: #ED2123; }
    header .header .icon-back {
      width: 10px;
      position: absolute;
      left: 15px; }

footer {
  background: #FFFFFF;
  box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.25);
  border-radius: 10px 10px 0px 0px;
  margin-top: 15px;
  position: fixed;
  bottom: 0;
  width: 100%;
  z-index: 1000; }
  footer .footer-item {
    display: flex;
    gap: 30px;
    justify-content: center;
    padding: 10px 0; }
    footer .footer-item .item {
      text-align: center;
      opacity: 0.3; }
      footer .footer-item .item .icon-footer {
        height: 30px;
        margin-bottom: 5px;
        width: 100%;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-position: 50% 50%; }
      footer .footer-item .item .icon-home {
        background-image: url("/frontend/images/icon-home.svg"); }
      footer .footer-item .item .icon-bike {
        background-image: url("/frontend/images/icon-bike.png"); }
      footer .footer-item .item .icon-car {
        background-image: url("/frontend/images/icon-car.png"); }
      footer .footer-item .item .icon-cart {
        background-image: url("/frontend/images/icon-cart.svg"); }
      footer .footer-item .item span {
        display: block;
        font-size: 0.75rem;
        color: #414142; }
    footer .footer-item .item-active {
      opacity: 1; }
      footer .footer-item .item-active .icon-home {
        background-image: url("/frontend/images/icon-home-red.svg"); }
  footer .footer-btn {
    padding: 15px 0; }
    footer .footer-btn button {
      padding: 14px 0px 11px 0px;
      text-align: center;
      border-radius: 10px;
      width: 100%;
      font-size: 0.875rem;
      line-height: 15px;
      font-weight: 500; }
    footer .footer-btn .bg-button {
      color: #FFFFFF;
      border: none;
      background: linear-gradient(84.26deg, #FDCB3A 9.14%, #FBAF27 92.49%); }
    footer .footer-btn .btn-canncel {
      background: #FFFFFF;
      border: 1px solid rgba(65, 65, 66, 0.5);
      color: #414142; }
      footer .footer-btn .btn-canncel:hover {
        color: white;
        background-color: rgba(65, 65, 66, 0.5); }

.modal-cart-dialog {
  margin-top: 35vh; }
  .modal-cart-dialog .modal-content {
    box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.25);
    border-radius: 10px; }
  .modal-cart-dialog .modal-footer {
    display: flex;
    flex-wrap: nowrap;
    padding: 0; }
    .modal-cart-dialog .modal-footer button {
      padding: .75rem;
      width: 100%;
      height: 100%; }

.modal-car-dialog {
  position: fixed;
  bottom: 0;
  left: 0%;
  right: 0%;
  transform: translate(-50%, -50%); }
  .modal-car-dialog .modal-body {
    text-align: left !important; }
    .modal-car-dialog .modal-body h1 {
      font-size: 1.25rem;
      font-weight: 600;
      line-height: 21px;
      color: #414142; }
    .modal-car-dialog .modal-body button {
      margin: 15px 0;
      background: linear-gradient(84.26deg, #0066CC 9.14%, #2886e7 92.49%);
      border-radius: 10px;
      padding: 10px; }
      .modal-car-dialog .modal-body button img {
        width: 40px;
        height: 40px; }
      .modal-car-dialog .modal-body button span {
        margin-left: 25px;
        font-weight: 500;
        font-size: 1rem;
        line-height: 17px;
        color: #FFFFFF; }

#home .heading {
  margin-top: 25px;
  font-weight: 600;
  font-size: 1.25rem;
  line-height: 21px;
  color: #414142;
  text-transform: uppercase; }

#home .home-item {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-top: 10px; }
  #home .home-item .item {
    position: relative;
    height: 172px; }
    #home .home-item .item a {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 3; }
    #home .home-item .item img {
      position: absolute;
      height: 100%;
      z-index: 1;
      border-radius: 10px; }
    #home .home-item .item span {
      position: absolute;
      left: 10px;
      bottom: 13px;
      padding: 10px;
      background: linear-gradient(84.26deg, #0066CC 9.14%, #2886e7 92.49%);
      opacity: 0.9;
      border-radius: 10px;
      z-index: 2;
      color: #ffffff;
      font-weight: 500;
      font-size: 14px; }

#home-profile .profile {
  display: flex;
  gap: 10px;
  background: #FFFFFF;
  box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.25);
  border-radius: 10px;
  margin: 20px 0;
  padding: 10px; }
  #home-profile .profile img {
    width: 61px;
    height: 61px; }

#home-profile .profile-title {
  font-weight: 600;
  font-size: 1.25rem;
  color: #414142; }

#home-profile .profile-text {
  font-weight: 400;
  font-size: 0.875rem;
  line-height: 15px;
  color: #414142; }

#cart .cart-item {
  margin: 25px 0;
  display: flex;
  flex-direction: column;
  gap: 15px; }
  #cart .cart-item .item {
    background: #FFFFFF;
    box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.25);
    border-radius: 10px;
    padding: 10px;
    display: flex;
    justify-content: space-between;
    gap: 10px; }
  #cart .cart-item .grow {
    flex-grow: 1; }
  #cart .cart-item .cart-detail {
    display: flex;
    flex-grow: 2;
    gap: 10px; }
    #cart .cart-item .cart-detail .cart-detail-main-content {
      display: flex;
      gap: 10px;
      flex-grow: 1;
      align-items: center; }
      #cart .cart-item .cart-detail .cart-detail-main-content h1 {
        font-weight: 600;
        font-size: 0.875rem;
        line-height: 15px;
        color: #414142; }
      #cart .cart-item .cart-detail .cart-detail-main-content span {
        font-size: 0.75rem; }
      #cart .cart-item .cart-detail .cart-detail-main-content a {
        font-size: 0.75rem;
        text-decoration: none;
        cursor: pointer; }
    #cart .cart-item .cart-detail .cart-img {
      width: 55px;
      height: 55px;
      border-radius: 10px; }
  #cart .cart-item .price {
    flex-grow: 1; }
    #cart .cart-item .price p {
      font-weight: 600;
      font-size: 0.875rem;
      line-height: 15px;
      color: #FCB128;
      vertical-align: bottom; }

#pills-tab {
  border-bottom: none; }
  #pills-tab .pending {
    color: #a1a1a5;
    padding-bottom: 0.5rem;
    border-bottom: 0.375rem solid #a1a1a5; }
  #pills-tab .processing {
    color: #0066CC;
    padding-bottom: 0.5rem;
    border-bottom: 0.375rem solid #0066CC; }
  #pills-tab .success {
    color: #2ECC71;
    padding-bottom: 0.5rem;
    border-bottom: 0.375rem solid #2ECC71; }

#pills-tabContent {
  font-size: 0.875rem; }
  #pills-tabContent h2 {
    font-size: 1.125rem; }
  #pills-tabContent h3 {
    font-size: 1rem; }
  #pills-tabContent .insurance-info {
    font-weight: 600; }
  #pills-tabContent .fee {
    background-color: rgba(251, 175, 39, 0.25); }
  #pills-tabContent .fee-total {
    color: #FCB028;
    font-weight: 600;
    font-size: 1.875rem; }
  #pills-tabContent .btn-addCode {
    background-image: linear-gradient(84.26deg, #0066CC 9.14%, #2886e7 92.49%);
    color: #414142; }
  #pills-tabContent .btn-addCode:focus {
    border-color: #FBAF27;
    box-shadow: 0 0 0 0.25rem rgba(251, 175, 39, 0.25);
    color: white; }

img {
  max-width: 100%; }

@font-face {
  font-family: myFirstFont;
  src: url("/frontend/fonts/SVN-Gilroy.ttf"); }

body {
  font-family: myFirstFont;
  color: #414142; }

main {
  margin-bottom: 100px; }

.form-control:focus {
  border-color: #FBAF27;
  box-shadow: 0 0 0 0.25rem rgba(251, 175, 39, 0.25); }

.form-select:focus {
  border-color: #FBAF27;
  box-shadow: 0 0 0 0.25rem rgba(251, 175, 39, 0.25); }

.btn-origin, .btn-buynow {
  background-image: linear-gradient(84.26deg, #0066CC 9.14%, #2886e7 92.49%);
  color: #FFFFFF;
  border-radius: 0.75rem; }

.btn-origin:focus, .btn-buynow:focus {
  border-color: #0066CC;
  box-shadow: 0 0 0 0.25rem rgba(251, 175, 39, 0.25); }

.btn-back, .btn-detail {
  background-color: #ff9933;
  color: #ffffff;
  border-radius: 0.75rem; }

.btn-back:focus, .btn-detail:focus {
  border-color: #FBAF27;
  box-shadow: 0 0 0 0.25rem rgba(251, 175, 39, 0.25); }

.btn-back:hover, .btn-detail:hover {
  color: white;
  background-color: rgba(65, 65, 66, 0.5); }

.option-package {
  box-shadow: 1px 0px 4px rgba(0, 0, 0, 0.25);
  border-radius: 10px;
  padding: 0.75rem; }

.package-title {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.25rem; }

.package-image {
  text-align: center; }
  .package-image img {
    border-radius: 10px;
    width: 65px; }

.package-specific {
  font-size: 0.75rem;
  font-weight: 500; }

.package-price {
  font-size: 1rem;
  font-weight: 700;
  color: #FCB028; }

.per-year {
  font-size: 0.875rem;
  color: #414142; }

.package-value {
  font-size: 0.875rem;
  font-weight: 600; }

.package-detail p {
  font-size: 0.875rem; }

.highlight {
  background-color: #e5eff9; }

.accordion-button {
  background: linear-gradient(rgba(0, 102, 204, 0.9), rgba(40, 134, 231, 0.9));
  color: #ffffff !important; }

.accordion-button:after {
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !important; }