/*
Theme Name: Flatsome Child
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/

@import url('https://fonts.googleapis.com/css2?family=Afacad+Flux:wght@400;500;600;700;800&display=swap');

/*************** ADD CUSTOM CSS HERE.   ***************/
:root {
    --ozoship-header-overlap: clamp(88px, 10vw, 120px);
    --ozoship-font-family: 'Afacad Flux', sans-serif;
}



html,
body,
button,
input,
select,
textarea {
    font-family: var(--ozoship-font-family);
}

h1,
h2,
h3,
h4,
h5,
h6,
.button,
.nav > li > a,
.header .menu-item > a {
    font-family: var(--ozoship-font-family);
}

/* Banner BEM block */
/* HTML gợi ý:
<section class="hero-banner">
  <img class="hero-banner__media" />
  <div class="hero-banner__content"></div>
</section>
*/
body #header {
    position: relative;
    z-index: 30;
}

body #header .header-wrapper,
body #header .header-bg-container,
body #header .header-bg-color,
body #header .header-bg-image {
    background: transparent !important;
}

body #header .header-nav-main.nav > li > a,
body #header .header-main .nav > li > a,
body #header .header-main .menu-title,
body #header .header-main .cart-icon strong,
body #header .header-main .header-button > .button,
body #header .header-main .header-button > .button span,
body #header .header-main .header-button > .button i {
    color: #fff !important;
}

/* Sticky header state when scrolling */
#header .header-wrapper,
#header .header-wrapper .header-main,
#header .header-wrapper .header-top,
#header .header-wrapper .header-bottom,
#header .header-wrapper .header-bg-container,
#header .header-wrapper .header-bg-color,
#header .header-wrapper .header-bg-image {
    transition: background-color 0.25s ease, background-image 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}

#header .header-wrapper.stuck,
#header .header-wrapper.stuck .header-main,
#header .header-wrapper.stuck .header-top,
#header .header-wrapper.stuck .header-bottom,
#header .header-wrapper.stuck .header-bg-container,
#header .header-wrapper.stuck .header-bg-color,
#header .header-wrapper.stuck .header-bg-image {
    background-color: white !important;
    background-image: none !important;
}

#header .header-wrapper.stuck .header-bg-image {
    display: none !important;
}

body #header .header-wrapper.stuck .header-nav-main > li > a,
#header .header-wrapper.stuck .nav > li > a,
#header .header-wrapper.stuck .header-top a,
#header .header-wrapper.stuck .header-bottom a,
#header .header-wrapper.stuck .menu-title,
#header .header-wrapper.stuck .cart-icon strong,
#header .header-wrapper.stuck .header-button > .button,
#header .header-wrapper.stuck .header-button > .button span,
#header .header-wrapper.stuck .header-button > .button i {
    color: black !important;
}

body .hero-banner,
body .section-hero {
    position: relative;
    display: flex;
    align-items: center;
    min-height: clamp(400px, 78vh, 860px);
    overflow: hidden;
    margin-top: calc(var(--ozoship-header-overlap) * -1);
    padding-top: var(--ozoship-header-overlap);
    z-index: 1;
}

body .hero-banner__media,
body .section-hero > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

body .hero-banner__content,
body .section-hero .section-hero-content {
    position: relative;
    z-index: 2;
    width: min(100%, 1170px);
    margin-inline: auto;
    padding-inline: clamp(15px, 2vw, 30px);
    padding-block: clamp(24px, 4vw, 48px);
    color: #fff;
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.24);
}

body .hero-banner__content h1,
body .hero-banner__content h2,
body .section-hero .section-hero-content h1,
body .section-hero .section-hero-content h2 {
    margin: 0 0 20px;
    color: #fff;
    font-size: clamp(2.35rem, 5vw, 4.65rem);
    line-height: 0.98;
    font-weight: 900;
    letter-spacing: -0.03em;
    text-transform: uppercase;
}

body .hero-banner__content p,
body .section-hero .section-hero-content p {
    margin: 0 0 18px;
    max-width: 32rem;
    color: rgba(255, 255, 255, 0.95);
    font-size: clamp(1rem, 1.35vw, 1.25rem);
    line-height: 1.5;
}

body .hero-banner__content .button,
body .section-hero .section-hero-content .button {
    min-width: 230px;
    margin-top: 12px;
}

body .hero-banner__content .button + .button,
body .section-hero .section-hero-content .button + .button {
    margin-left: 0;
}

@media only screen and (max-width: 549px) {
    body .section-hero {
        display: block;
        min-height: 0 !important;
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    body .section-hero .section-bg,
    body .section-hero .section-content {
        position: relative;
    }

    body .section-hero .section-content {
        min-height: 460px;
        display: flex;
        align-items: center;
    }

    body .section-hero .banner,
    body .section-hero .banner-inner,
    body .section-hero .banner-layers {
        min-height: 460px !important;
        height: 460px !important;
    }

    body .section-hero .text-box {
        top: 50% !important;
        width: min(68%, 270px) !important;
    }

    body .section-hero .text-box-content,
    body .section-hero .text-inner {
        height: auto !important;
    }

    body .section-hero h1,
    body .section-hero h2 {
        font-size: clamp(28px, 9vw, 38px) !important;
        line-height: 1 !important;
    }

    body .section-hero p {
        font-size: 14px !important;
        line-height: 1.35 !important;
    }

    body:not(.home) .section-hero {
        min-height: 0 !important;
        height: auto !important;
        padding-bottom: 0 !important;
    }

    body:not(.home) .section-hero .section-content {
        display: block !important;
        min-height: 0 !important;
        height: auto !important;
    }

    body:not(.home) .section-hero .img,
    body:not(.home) .section-hero .img-inner,
    body:not(.home) .section-hero img {
        display: block;
    }
}

#header.transparent,
#header.transparent .header-wrapper,
#header.transparent .header-bg-color,
#header.transparent .header-main,
#header.transparent .header-top,
#header.transparent .header-bottom,
#header.transparent .header-bg-image {
    background-color: #ffffff !important;
    background-image: none !important;
    opacity: 1 !important;
}

#header.transparent .header-bg-image {
    display: none !important;
}

#header.transparent .header-nav-main > li > a,
#header.transparent .nav > li > a,
#header.transparent .header-top a,
#header.transparent .header-bottom a {
    color: #1f2937 !important;
}

.login-button > a,
.register-button > a {
    font-size: 16px;
    font-weight: 700;
    font-family: var(--ozoship-font-family);
    color: white;
}

#header .header-wrapper.stuck .login-button > a {
    color: #FF5721
}

.mobile-sidebar .login-button > a {
    color: #FF5721;
}

.register-button {
    background-color: #FF5721;
    border-radius: 4px;
    padding: 2px 18px 2px 18px
}

.partner-gallery .box-image img,
.partner-gallery .image-cover img {
    object-fit: contain !important;
}

.section-service-delivery .col-inner {
    padding: 10px;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.serivce-delivery-child .col,
.serivce-delivery-child .col-inner {
  padding-bottom: 10px !important;
}
    
/* Submenu style */
#header .nav-dropdown,
#header .nav-dropdown.default-dropdown {
    padding: 4px;
    background: #fff !important;
    border: 0 !important;
    border-radius: 8px;
    overflow: hidden;
}

#header .nav-dropdown > li {
    margin: 0 !important;
}

#header .nav-dropdown > li > a {
    display: block;
    color: #000 !important;
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
}

#header .nav-dropdown > li > a:hover,
#header .nav-dropdown > li.active > a,
#header .nav-dropdown > li.current-menu-item > a {
    color: #000 !important;
    background: transparent !important;
}

.image-mission {
    border-radius: 24px;
    overflow: hidden;
}

.box-mission {
    padding: 14px;
    border-radius: 16px;
}

.box-mission h3 {
    font-size: 20px;
    font-weight: 700;
    color: #0079BC;
}

.box-mission p {
    font-size: 16px;
    font-weight: 400;
    color: var(--gray-800);
}

.box-mission p:last-child {
    margin-bottom: 0;
}

.ozoship-delivery-steps {
    font-family: 'Afacad Flux', sans-serif;
    width: 100%;
    margin: 0 auto;
    padding: 0 50px;
    box-sizing: border-box;
  }

  .ozoship-delivery-steps__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 50px;
    align-items: start;
  }

  .ozoship-delivery-steps__item {
    position: relative;
    text-align: center;
  }

  .ozoship-delivery-steps__circle {
    position: relative;
    width: 103px;
    height: 103px;
    margin: 0 auto 16px;
    border: 2px solid #003A6D;
    border-radius: 50%;
    background: #F3F3F3;
    z-index: 2;
  }

  .ozoship-delivery-steps__icon {
    position: absolute;
    inset: 50% auto auto 50%;
    width: 57px;
    height: 57px;
    transform: translate(-50%, -50%);
    object-fit: contain;
  }

  .ozoship-delivery-steps__line {
    position: absolute;
    left: 50%;
    top: 30%;
    width: calc(100% + 50px);
    border-top: 1px dashed #0079BC;
    z-index: 1;
  }

  .ozoship-delivery-steps__title {
    color: #0079BC;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
    margin-bottom: 14px;
  }

  .ozoship-delivery-steps__desc {
    color: #111;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.45;
  }

  @media (max-width: 768px) {
    .ozoship-delivery-steps {
      padding: 0 16px;
    }

    .ozoship-delivery-steps__grid {
      grid-template-columns: 1fr;
      gap: 28px;
    }

    .ozoship-delivery-steps__line {
      display: block;
      left: 50%;
      top: calc(100% - 16px);
      width: 0;
      height: 34px;
      border-top: 0;
      border-left: 1px dashed #0079BC;
      transform: translateX(-50%);
    }

    .ozoship-delivery-steps__item:last-child .ozoship-delivery-steps__line {
      display: none;
    }

    .ozoship-delivery-steps__item {
      max-width: 280px;
      margin: 0 auto;
      padding-bottom: 28px;
    }

    .ozoship-delivery-steps__item:last-child {
      padding-bottom: 0;
    }

    .ozoship-delivery-steps__circle {
      width: 82px;
      height: 82px;
      margin-bottom: 12px;
    }

    .ozoship-delivery-steps__icon {
      width: 46px;
      height: 46px;
    }

    .ozoship-delivery-steps__title {
      font-size: 15px;
      margin-bottom: 8px;
    }

    .ozoship-delivery-steps__desc {
      font-size: 14px;
      line-height: 1.35;
    }
  }

  @media (max-width: 420px) {
    .ozoship-delivery-steps__item {
      max-width: 260px;
    }
  }

.question-answer {
    background-color:#F3F3F3;
    padding:10px;
    border-radius: 8px;
}

.question-answer .accordion-item {
    border-bottom: 1px solid #EAECF0;
    padding: 0;
}

.question-answer.accordion .toggle {
    left: unset;
    right: 0;
    color: var(--secondary);
}

.question-answer.accordion .toggle i {
    font-size: 20px;
}

.question-answer .accordion-title {
    border: none;
    padding-left: 10px;
    font-size: 20px;
    font-weight: 600;
}

.question-answer .accordion-inner {
    font-size: 16px;
    font-weight: 400;
    padding-left: 20px;
    padding-top: 0;
    padding-bottom: 0;
}

.question-answer .accordion-title.active {
    background-color: unset;
}

.question-answer .accordion-title.active span {
    color: var(--secondary);
}

@media only screen and (max-width: 549px) {
    body #header .header-main .nav > li > a,
    body #header .mobile-nav > li > a,
    body #header .nav-icon,
    body #header .nav-icon i,
    body #header .icon-menu,
    body #header .header-button > a,
    body #header .header-button > button {
        color: #777777 !important;
    }

    body #header .nav-icon span,
    body #header .nav-icon span::before,
    body #header .nav-icon span::after,
    body #header .icon-menu::before,
    body #header .icon-menu::after {
        color: #777777 !important;
        background-color: transparent !important;
        border-color: #777777 !important;
    }

    html,
    body {
        max-width: 100%;
        overflow-x: clip;
    }

    #footer .row {
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    #footer .col,
    #footer .col-inner {
        min-width: 0;
    }

    #footer .col.small-6,
    #footer .col.small-12 {
        flex-basis: 100% !important;
        max-width: 100% !important;
    }

    #footer #col-1686265479 {
        flex-basis: 100% !important;
        max-width: 100% !important;
    }

    #footer #row-998103763 > .col {
        flex-basis: 50% !important;
        max-width: 50% !important;
    }
}

@media only screen and (max-width: 420px) {
    #footer #row-998103763 > .col {
        flex-basis: 100% !important;
        max-width: 100% !important;
    }
}