* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: "Roboto", "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;
    margin: 0;
    padding: 0;
    font-size: 16px;
    line-height: 1.6;
    color: #23262f;
    background-color: #fff;
}

h1, h2, h3, h4, h5, h6, p, ol, ul, li, span, label {
    margin-bottom: 0px;
}

img {
    vertical-align: middle
}

a {
    text-decoration: none;
    color: #23262f;
}

a:hover {
    text-decoration: none;
    color: inherit;
}

.p-0{padding:0!important}
.pt-0,.py-0{padding-top:0!important}
.pr-0,.px-0{padding-right:0!important}
.pb-0,.py-0{padding-bottom:0!important}
.pl-0,.px-0{padding-left:0!important}
.p-1{padding:.3125rem!important}
.pt-1,.py-1{padding-top:.3125rem!important}
.pr-1,.px-1{padding-right:.3125rem!important}
.pb-1,.py-1{padding-bottom:.3125rem!important}
.pl-1,.px-1{padding-left:.3125rem!important}
.p-2{padding:.625rem!important}
.pt-2,.py-2{padding-top:.625rem!important}
.pr-2,.px-2{padding-right:.625rem!important}
.pb-2,.py-2{padding-bottom:.625rem!important}
.pl-2,.px-2{padding-left:.625rem!important}
.p-3{padding:1.25rem!important}
.pt-3,.py-3{padding-top:1.25rem!important}
.pr-3,.px-3{padding-right:1.25rem!important}
.pb-3,.py-3{padding-bottom:1.25rem!important}
.pl-3,.px-3{padding-left:1.25rem!important}
.p-4{padding:1.875rem!important}
.pt-4,.py-4{padding-top:1.875rem!important}
.pr-4,.px-4{padding-right:1.875rem!important}
.pb-4,.py-4{padding-bottom:1.875rem!important}
.pl-4,.px-4{padding-left:1.875rem!important}
.p-5{padding:2.5rem!important}
.pt-5,.py-5{padding-top:2.5rem!important}
.pr-5,.px-5{padding-right:2.5rem!important}
.pb-5,.py-5{padding-bottom:2.5rem!important}
.pl-5,.px-5{padding-left:2.5rem!important}

.m-0{margin:0!important}
.mt-0,.my-0{margin-top:0!important}
.mr-0,.mx-0{margin-right:0!important}
.mb-0,.my-0{margin-bottom:0!important}
.ml-0,.mx-0{margin-left:0!important}
.m-1{margin:.3125rem!important}
.mt-1,.my-1{margin-top:.3125rem!important}
.mr-1,.mx-1{margin-right:.3125rem!important}
.mb-1,.my-1{margin-bottom:.3125rem!important}
.ml-1,.mx-1{margin-left:.3125rem!important}
.m-2{margin:.625rem!important}
.mt-2,.my-2{margin-top:.625rem!important}
.mr-2,.mx-2{margin-right:.625rem!important}
.mb-2,.my-2{margin-bottom:.625rem!important}
.ml-2,.mx-2{margin-left:.625rem!important}
.m-3{margin:1.25rem!important}
.mt-3,.my-3{margin-top:1.25rem!important}
.mr-3,.mx-3{margin-right:1.25rem!important}
.mb-3,.my-3{margin-bottom:1.25rem!important}
.ml-3,.mx-3{margin-left:1.25rem!important}
.m-4{margin:1.875rem!important}
.mt-4,.my-4{margin-top:1.875rem!important}
.mr-4,.mx-4{margin-right:1.875rem!important}
.mb-4,.my-4{margin-bottom:1.875rem!important}
.ml-4,.mx-4{margin-left:1.875rem!important}
.m-5{margin:2.5rem!important}
.mt-5,.my-5{margin-top:2.5rem!important}
.mr-5,.mx-5{margin-right:2.5rem!important}
.mb-5,.my-5{margin-bottom:2.5rem!important}
.ml-5,.mx-5{margin-left:2.5rem!important}

input::placeholder,
textarea::placeholder {
    color: #93a2b1!important;
}

#card-navbar {
    height: 100px;
}

.navbar-brand {
    margin-right: 100px;
}

.nav-link {
    color: rgb(255 255 255);
}

#top {
    height: 800px;
    width: 100%;
    background-color: #3178d6;
    background-image: linear-gradient(to right, #3178d6 0%, #4dc0f7 100%);
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    margin-top: -100px;
}

#top .banner {
    background-color: rgba(0, 0, 0, 0.8) !important;
    background-blend-mode: multiply;
    background-image: url(../../imgs/volecom-bg.webp);
    width: 100%; /* Chiều rộng đầy đủ */
    height: 100%; /* Chiều cao tự động theo thẻ mẹ */
    background-size: cover; /* Đảm bảo ảnh phủ kín theo tỷ lệ của thẻ mẹ */
    background-position: center; /* Căn giữa hình ảnh */
    background-repeat: no-repeat;
    padding: 100px 0;
}

#top .title-banner {
    padding: 70px 10px;
}
#top .title-banner-1 {
    color: #fff;
    font-size: 20px;
}
#top .title-banner-2 {
    color: #fff;
    font-size: 30px;
    font-weight: 500;
    margin-top: 15px;
}
#top .title-banner-3 {
    margin-top: 20px;
    color: #fff;
    font-size: 15px;
}
#top .btn-register-banner {
    margin-top: 40px;
    display: inline-block;
    padding: 7px 29px;
    height: 42px;
    font-size: 18px;
    border: 2px solid #fff;
    border-radius: 50px;
    text-align: center;
    position: relative;
    overflow: hidden;
    color: #fff;
    background-color: transparent;
    cursor: pointer;
    transition: color 0.4s ease;
    font-weight: 400;
    z-index: 1; /* Giữ nội dung trên cùng */
}

#top .btn-register-banner::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: #1e7ac4; /* Màu đỏ chạy từ trái qua phải */
    transition: left 0.4s ease-in-out;
    z-index: -1; /* Đưa background hover xuống dưới */
}

#top .btn-register-banner:hover::before {
    left: 0;
}

#top .btn-register-banner:hover {
    color: white; /* Giữ màu chữ trắng khi hover */
}


#top .img-banner {
    height: 460px;
    margin-top: 35px;
}

#top .tag-partner {
    background-color: #fff;
    padding: 20px 30px;
    border-radius: 10px;
    text-align: center;
}
#top .brand-partner {
    display: flex;
    height: 100%;
    justify-content: center;
    flex-wrap: wrap;
    align-content: center;
}

.section-services {
    margin-top: 100px;
    text-align: center;
}

.section-services .card {
    position: relative;
    overflow: hidden;
}

.section-services .card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: inherit; /* Kế thừa ảnh nền */
    background-size: cover;
    background-position: center;
    transition: transform 0.3s ease-in-out;
    z-index: 0;
}

.section-services .card:hover::before {
    transform: scale(1.1); /* Phóng to ảnh nền */
}

.section-services .card-body {
    position: relative;
    z-index: 1; /* Giữ nội dung trên ảnh nền */
    background: rgba(0, 0, 0, 0.3);
}

.section-services .card:hover .card-body {
    background: rgb(0 0 0 / 0%);
}

.section-services .title-services {
    font-size: 40px;
    font-weight: 700;
    margin-bottom: 10px;
}

.card-friendly-platform {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    background-color: aliceblue;
    border-radius: 20px;
    padding: 22px 26px 16px;
    font-size: 17px;
    font-weight: 700;
}
.card-friendly-platform img {
    max-width: 100px;
}

.section-slide {
    margin-bottom: 100px;
    border-top: 1px solid #74b6e4;
    border-bottom: 1px solid #74b6e4;
    padding: 15px 0px;
}
.section-slide .btn-swiper-slide {
    width: 100%;
    height: 60px;
    line-height: 45px;
}
.section-slide .title-top-country {
    font-size: 20px;
    font-weight: 700;
}

.section-slide .two-button-slide {
    display: flex;
    justify-content: flex-end;
}

.btn-request {
    background-color: #3e9bec;
    color: #fff;
    border: 1px solid #fff;
}
.btn-request:hover {
    background-color: #217ac8;
    color: #fff;
}

.title-collab {
    font-size: 40px;
    font-weight: 700;
    margin-bottom: 10px;
}

.brand-source {
    margin: 60px 0;
}

.w-img-brand {
    width: 70%;
}

.feedback-volecom {
    background-color: #000;
    color: #fff;
    padding: 70px 0;
    margin-top: 100px;
}

.section-form-contact {
    margin-top: 100px;
}

.card-form-contact {
    background-color: aliceblue;
    padding: 30px;
    border-radius: 30px;
}
.section-form-contact .card-form-contact .form-control {
    padding: 1rem .75rem;
    border: 1px solid #c2d2e2;
}

.card-how-to-work {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    background-color: aliceblue;
    border-radius: 20px;
    padding: 25px;
    margin-bottom: 20px;
    font-size: 17px;
    font-weight: 700;
    position: relative;
    box-shadow: rgb(0 86 121 / 15%) 2.4px 2.4px 3.2px;
}

.card-how-to-work img {
    width: 70px;
    height: 70px;
    position: absolute;
    top: -60px;
    left: 6px;
}

.title-how-to-get {
    font-size: 40px;
    font-weight: 700;
    margin-bottom: 10px;
} 

/* Tùy chỉnh màu nút */
.get-start-now {
    background: linear-gradient(135deg, #098ff0 0%, #1999dc 100%);
    border: none;
    border-radius: 12px;
    font-weight: 600;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
    color: #fff;
}

.get-start-now:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(13, 110, 253, 0.3);
    background: linear-gradient(135deg, #068cf3 0%, #0093ff 100%);
    color: #fff;
}

.get-start-now:active {
    transform: translateY(0);
}

/* Hiệu ứng shine */
.btn-shine {
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0) 100%);
    transform: skewX(-20deg);
    top: 0;
    left: -100%;
    transition: all 0.6s ease;
    pointer-events: none;
}

.btn:hover .btn-shine {
    left: 100%;
}

.join-the-community {
    background-color: #f0f8ff;
    padding: 80px 0;
    margin-top: 70px;
    margin-bottom: 70px;
}

.join-the-community .card-community {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #c9dce3;
    margin-bottom: 10px;
}
.join-the-community .card-community:hover {
    border-image-source: linear-gradient(90deg, rgba(35,195,255,1) 0%, rgba(147,254,255,1) 100%);
    border-image-slice: 1; /* Đảm bảo gradient phủ toàn bộ viền */
}

.section-about {
    margin-top: 100px;
}
.section-about .row {
    display: flex;
    align-items: stretch; /* Cột có cùng chiều cao */
}

.section-about .col-xl-6 {
    display: flex;
    flex-direction: column;
}

.section-about .img-wrapper {
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.section-about .img-wrapper img {
    width: 100%;
    height: 102%;
    object-fit: cover; /* Dùng contain nếu muốn giữ nguyên tỷ lệ */
}