@import url('../../assets/fonts/stylesheet.css');

:root {
    --primary: #3D3D3D;
    --Blue100: #DDE4FC;
    --Blue900: #191E67;
    --primaryBlue: #4564ED;

    --loading-grey: #ededed;

    --lightPink: #f8f3f0;
    --lightBrown: #c1b9b9;
    --text888: #888;

    /* Brand colors  */
    --BrandOrange: #FF701D;
    --BrandBlue: #1169B0;
    --BrandGreen: #00D574;
    /* color primary */
    --primary100: #EEFAFF;
    --primary200: #C6EEFF;
    --primary300: #7DD4FF;
    --primary400: #2DB5FF;
    --primary500: #00A2FD;
    --primary600: #0087DB;
    --primary700: #0071BD;
    --primary800: #004E86;
    --primary900: #003359;
    /* font-color */
    --neutral100: #FFFFFF;
    --neutral200: #FAFAFB;
    --neutral300: #EBECED;
    --neutral400: #CECFD2;
    --neutral500: #9D9FA5;
    --neutral600: #747783;
    --neutral700: #565C67;
    --neutral800: #343943;
    --neutral900: #1F2636;
    --neutralBlack: #1F2636;
    --gray1: #333333;
    --gray2: #4F4F4F;
    --gray3: #828282;
    --gray4: #BDBDBD;
    --gray5: #F5F5F5;
}

html {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    line-height: 1.15;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%
}

*,
*:before,
*:after {
    -webkit-box-sizing: inherit;
    -moz-box-sizing: inherit;
    box-sizing: inherit;
}

body {
    font: 400 16px / 22px 'SFProDisplay', sans-serif;
    /*font: 400 15.5px/24px 'SF UI Text', sans-serif;*/
    padding: 0;
    margin: 0;
    color: #000;
    overflow-x: hidden;
}

body::-webkit-scrollbar {
    height: 6px;
    width: 6px;
}

body::-webkit-scrollbar-track {
    background-color: rgba(232, 232, 232, 0.8);
    /*background*/
}

body::-webkit-scrollbar-thumb {
    background: #e1e1e7;
    /*color*/
}

h1,
h2,
h3,
h4,
h5,
h6,
b,
strong,
p,
span,
div {
    font-family: 'SFProDisplay', sans-serif;
}

samp {
    font: 400 16px / 22px 'SFProDisplay', sans-serif;
}

a,
a:hover,
a:active,
a:focus {
    color: #4564ED;
    text-decoration: none;
}




h1,
h1,
h3,
h4,
h5,
h5 {
    padding: 0px;
    margin: 0px
}

p {
    line-height: 1.5;
    margin: 0;
}

a,
a:hover,
a:focus,
a:active,
input[type='button'],
input[type='text'],
input[type='search'],
input[type='password'],
button {
    outline: none;
    border: none;
    background: none;
}

ul,
ol,
li {
    list-style: none;
    padding: 0;
    margin: 0;

}


/*
|
|
| ------------- custom navbar --------------------------
|
|
*/
.header-menu {
    box-shadow: none;
}

.headmenu-width .menu-container .menu-links.navbar-collapse {
    margin: 0 auto 0 0;
    background: #fff;
    height: 100%;
    /* --------  */
    /* display: flex !important;
    justify-content: space-between;
    width: calc(100% - 106px); */
}

.headmenu-width .menu-container .menu-links .navbar-nav.nav-text-uppercase>li a {
    /* text-transform: uppercase; */
    font-weight: 700;
    font-size: 16px;
    padding-left: 28px;
    padding-right: 28px;
}

/* 2 button  */
.menu-container .header-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
    height: 70px;
    align-items: center;
    margin-left: auto;
    position: absolute;
    right: 0;
}

.menu-container .btn-primary {
    background: #FF6C14;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 0px 18px;
    line-height: 48px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.2s;
    white-space: nowrap;
}

.menu-container .btn-primary:hover {
    background: #ff7321;
}

.menu-container .btn-outline {
    background: transparent;
    color: #000;
    border: 1px solid #383432;
    border-radius: 8px;
    padding: 0 18px;
    line-height: 46px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.2s;
    white-space: nowrap;
    transition:
        transform .25s ease,
        box-shadow .25s ease;
}

.menu-container .btn-outline:hover {
    /* background: #FF6C14;
    color: #fff;
    border: 1px solid #FF6C14; */
    transform: translateY(-2px);

}

.menu-promo-net .headmenu-width .menu-container .menu-links .navbar-nav::after {
    min-height: auto;
}

.menu-promo-net .headmenu-width .menu-container .menu-links .navbar-nav>li.other-link .dropdown-menu li .title-product-mn .title-product {
    text-transform: none;
}

@media screen and (max-width: 1200px) {
    .headmenu-width .menu-container .menu-links .navbar-nav.nav-text-uppercase>li a {
        padding-left: 12px;
        padding-right: 12px;
    }
}

@media screen and (max-width: 1024px) {
    .headmenu-width .menu-container .menu-links .navbar-nav.nav-text-uppercase>li a {
        padding-left: 12px;
        padding-right: 12px;
        font-size: 15px;
    }

    .menu-promo-net .btn-orange {
        padding-left: 6px;
        padding-right: 6px;
    }
}

@media screen and (max-width: 991px) {
    .menu-promo-net .headmenu-width .menu-container .menu-links .navbar-nav {
        margin-bottom: 24px;
    }

    .menu-promo-net .headmenu-width .menu-container .menu-links.navbar-collapse.collapse {
        background: #fff;
    }

    .menu-container .header-actions {
        padding-left: 20px;
    }

    .menu-promo-net .btn-orange {
        padding-left: 16px;
        padding-right: 16px;
    }

    .menu-promo-net .headmenu-width .menu-container .nav-logofpt .navbar-brand {
        justify-content: flex-start;
        padding-left: 15px;
    }
    .menu-container .header-actions {
        right: auto;
    }
}

/* end custom navbar ------------------------------------------------------ */


/*
|
|
| ------------- banner --------------------------
|
|
*/
.bn-ldp-internet {
    width: 100%;
    padding-top: 70px;
}

.bn-ldp-internet .bn-container {
    max-width: 1920px;
    margin: 0 auto;
    position: relative;
    display: flex;
    justify-content: center;
}

.bn-ldp-internet .bn-container .button-link {
    position: absolute;
    left: 200px;
    bottom: 70px;
}

@media (max-width: 1920px) {
    .bn-ldp-internet .bn-container img {
        max-width: 100%;
        height: auto;
        object-fit: contain;
    }
}

@media (max-width: 540px) {
    .bn-ldp-internet .bn-container img {
        max-width: 100%;
        height: auto;
        object-fit: contain;
    }
}

/* end banner ldp-internet-fpt */

.width-parent {
    width: 100%;
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
}


/*
|
|
| ------------- why choose --------------------------
|
|
*/

.why-section {
    padding: 50px 0;
    background: #fff;
}

/* .why-grid {
    display: grid;
    grid-template-columns: repeat(4, 230px);
    gap: 24px;
    justify-content: center;
} */
.why-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, 230px);

    /* display: flex; */
    gap: 24px;
    justify-content: center;
}

.why-card {
    text-align: center;
    padding: 28px 16px;
    border-radius: 12px;
    border: 1px solid #FF7D2F;
    background: #FFF7F2;
    transition: box-shadow 0.2s, transform 0.2s;
}

.why-card:hover {
    box-shadow: 0 8px 32px rgba(255, 107, 0, 0.1);
    transform: translateY(-4px);
}

.why-icon {
    margin: 0 auto 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
}

.why-icon img {
    height: 100px;
    width: auto;
    object-fit: contain;
}

.why-card h4 {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 0px;
    color: #3D3D3D;
}

@media (max-width: 1024px) {
    .why-grid {
        gap: 18px;
        padding-left: 15px;
        padding-right: 15px;
        grid-template-columns: repeat(auto-fit, calc(25% - 18px));
        width: 100%;
        margin: 0 auto;
    }

    .why-icon img {
        height: 70px;
    }
}

@media (max-width: 991px) {
    .why-grid {
        grid-template-columns: repeat(auto-fit, calc(25% - 12px));
        width: 100%;
        /* max-width: 679px; */
        gap: 12px;
        margin: 0 auto;
    }
}

@media (max-width: 834px) {

    .why-grid {
        /* grid-template-columns: repeat(auto-fit, 25%); */
        gap: 12px;
    }

    .why-icon img {
        height: 60px;
    }
}

@media (max-width: 768px) {
    .why-section {
        padding: 20px 0;
    }

    .why-card {
        padding: 16px;
    }

    .why-card h4 {
        font-size: 18px;
    }
}

@media (max-width: 540px) {
    .why-grid {
        grid-template-columns: repeat(auto-fit, calc(25% - 10px));
        gap: 10px;
        padding-left: 10px;
        padding-right: 10px;
    }

    .why-card {
        padding: 8px 4px;
    }

    .why-icon img {
        height: 32px;
    }

    .why-card h4 {
        font-size: 12px;
        font-weight: 600;
    }
}

/* ----------------- end why choose ----------------- */


/*
|
|
| ------------- products at homepage --------------------------
|
|
*/

.main-promo-net .heading-title {
    padding-bottom: 40px;
}

.main-promo-net .heading-title h2 {
    font-size: 44px;
    font-weight: 700;
    line-height: 50px;
    color: #3D3D3D;
    text-align: center;
    margin: 0;
}

.main-promo-net .heading-title h2 span {
    color: #F75501;
}

.main-promo-net .heading-title p {
    margin: 0;
    text-align: center;
    font-size: 25px;
    color: #000;
    font-weight: 400;
    line-height: 36px;
}

@media (max-width: 991px) {
    .main-promo-net .heading-title h2 {
        font-size: 32px;
        line-height: 46px;
    }
}
@media (max-width: 768px) {
    .main-promo-net .heading-title h2 {
        font-size: 34px;
        line-height: 48px;
    }
    .main-promo-net .heading-title {
        padding-bottom: 20px;
    }
}
@media (max-width: 540px) {
    .main-promo-net .heading-title h2 {
        font-size: 24px;
        line-height: 36px;
    }
}

/*
|
|
| ------------- tabs package --------------------------
|
|
*/
.tabs-package-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    /* mượt mà trên iOS */
}

.main-promo-net ul.tabs-package-hcm {
    margin: 0;
    padding: 10px 0 22px;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    width: max-content;
    min-width: max-content;
    border-top: 1px solid #4564ED;
    margin: 0 auto;
}

.main-promo-net ul.tabs-package-hcm li {
    background: none;
    color: #606060;
    display: inline-block;
    padding: 0 16px;
    line-height: 40px;
    cursor: pointer;
    border: 1px solid #E7E7E7;
    border-radius: 50px;
    white-space: nowrap;
    /* giữ text 1 dòng */
}

.main-promo-net ul.tabs-package-hcm li.current {
    background: #FF8D28;
    color: #fff;
    border: 1px solid #FF8D28;
}

/* ----------------- */

.tab-content--package-hcm {
    display: none;
}

.tab-content--package-hcm.current {
    display: inherit;
}

@media (max-width: 1024px) {
    .main-promo-net ul.tabs-package-hcm {
        justify-content: center;
    }
}

/* ---------------- end tab slide products at homepage  */

.main-wrapper.main-promo-net {
    width: 100%;
}

.main-wrapper.main-promo-net section {
    width: 1440px;
    max-width: 100%;
    margin: 0 auto;
}


@media screen and (max-width: 1440px) {
    .main-wrapper.main-promo-net {
        width: 100%;

    }

    .main-wrapper.main-promo-net .rowfull-margin {
        padding-left: 15px;
        padding-right: 15px;
    }

}
@media (max-width: 540px) {
    .main-wrapper.main-promo-net section {
        padding-top: 20px;
        padding-bottom: 20px;
    }

}

/* ===================== PROMO SLIDER swiper ===================== */
/* nếu dùng swiper thì dùng html này --------------------------------------------------
<div class="promo-container">
    <div class="swiper promo-swiper" id="promo-swiper">
    <div class="swiper-wrapper">
        <div class="swiper-slide">
        <div class="promo-placeholder">
            <img src="../front-end/ldp-promotion-net/images/offer-1.jpg" alt="">
        </div>
        </div>
        <div class="swiper-slide">
        ....
        </div>

    </div>
    <div class="swiper-pagination"></div> nếu dùng page thì mở ra
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
    </div>
</div>

*/
.promo-section {
    padding: 40px 0 20px;
}

.promo-swiper .swiper-wrapper {
    padding: 0 12px 12px 0;
}

.promo-placeholder {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
    color: #fff;
    gap: 10px;
    position: relative;
    overflow: hidden;
    box-shadow: 4px 8px 4px 0px #00000020;
    border-radius: 8px;
    /* padding-bottom: 6px; */
}

.promo-placeholder::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 8px;
}

.promo-placeholder img {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 8px;
}

/* Swiper custom */
.swiper-pagination-bullet-active {}

.promo-swiper .swiper-button-next,
.promo-swiper .swiper-button-prev {
    background: #fff;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.promo-swiper .swiper-button-next::after,
.promo-swiper .swiper-button-prev::after,
.swiper-button-prev::after {
    font-size: 14px !important;
    font-weight: 700;
}

@media screen and (max-width: 1440px) {
    .promo-section {
        padding-left: 15px;
        padding-right: 15px;
    }
}
@media screen and (max-width: 768px) {
    .promo-section {
        padding: 20px 15px;
    }
}

.desc-package-net-promotion {
    max-height: 190px;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 4px;

    /* Firefox */
    scrollbar-width: thin;
    scrollbar-color: rgba(189, 189, 189, 0.3) transparent;
    /* scrollbar-color: #e81a1a transparent; */
    margin-bottom: 8px;
}

/* Chrome, Edge, Safari */
.desc-package-net-promotion::-webkit-scrollbar {
    width: 3px;
}

.desc-package-net-promotion::-webkit-scrollbar-track {
    background: transparent;
}

.desc-package-net-promotion::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: 999px;
}

.desc-package-net-promotion::-webkit-scrollbar-thumb:hover {
    background: #9e9e9e;
}


.desc-package-net-promotion:hover::-webkit-scrollbar-thumb {
    background: #bdbdbd;
}

/*
|
|
| ------------- tiktok swiper --------------------------
|
|
*/

.tiktok-video-section {
    padding-top: 50px;
    padding-bottom: 50px;
}

.promo-container--tiktok {
    /* max-width: calc(370px + 271px * 3 + 24px * 3); */
    max-width: calc(416px + 304px * 3 + 37px * 3);
    margin: 0 auto;
    overflow: hidden;
    position: relative;
}
.main-promo-net .promo-container--tiktok .heading-title{
    position: absolute;
    left: calc(416px + 37px);
    top: 75px;
}

.video-tiktok-swiper {
    overflow: hidden;
    padding: 0 44px 0 0;
}

.video-tiktok-swiper .swiper-wrapper {
    align-items: flex-end;
}

.video-tiktok-swiper .swiper-slide__old {
    width: 304px;/*271px*/
    height: 534px;/*489px*/
    flex-shrink: 0;
    /* transition: width 0.35s ease, height 0.35s ease; */
}

.video-tiktok-swiper .swiper-slide {
    width: clamp(
        220px,
        calc(186.09px + 6.28vw),
        304px
    );

    height: clamp(
        386px,
        calc(332.70px + 9.87vw),
        534px
    );

    flex-shrink: 0;
}

.video-tiktok-swiper .swiper-slide-active__old {
    width: 416px;/* 370px */
    height: 728px;/* 666px */
    z-index: 2;
}
.video-tiktok-swiper .swiper-slide-active {
    width: clamp(
        320px,
        calc(282.43px + 9.28vw),
        416px
    );

    height: clamp(
        600px,
        calc(517.57px + 15.27vw),
        728px
    );

    z-index: 2;
}

.video-tiktok-swiper .tiktok-video-card {
    width: 100%;
    height: 100%;
    margin: 0;
}

.video-tiktok-swiper .tiktok-video-card__media {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 12px;
    overflow: hidden;
    background: #1a1a1a;
}

.video-tiktok-swiper .tiktok-embed-frame {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
}

.video-tiktok-swiper .tiktok-embed-frame iframe,
.video-tiktok-swiper .tiktok-video-card__video {
    width: 100%;
    height: 100%;
    display: block;
    border: 0;
    object-fit: cover;
    background: #000;
}

.video-tiktok-swiper .tiktok-sound-toggle {
    /* đồng nhất với .video-tiktok-swiper .swiper-slide-active .tiktok-sound-toggle  */
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 5;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    display: none;
}

.video-tiktok-swiper .tiktok-sound-toggle__icon {
    width: 22px;
    height: 22px;
    background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M16.5 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51C20.63 14.91 21 13.5 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3 3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06c1.38-.31 2.63-.95 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4 9.91 6.09 12 8.18V4z'/%3E%3C/svg%3E");
}

.video-tiktok-swiper .tiktok-sound-toggle.is-unmuted .tiktok-sound-toggle__icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z'/%3E%3C/svg%3E");
}

.video-tiktok-swiper .swiper-slide-active .tiktok-sound-toggle {
    width: 44px;
    height: 44px;
    display: none;
}

.video-tiktok-swiper .tiktok-video-card__title {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    padding: 40px 16px 24px;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.35;
    color: #fff;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.75) 100%);
    z-index: 2;
    pointer-events: none;
    height: 30px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.video-tiktok-swiper .swiper-slide-active .tiktok-video-card__title {
    padding: 40px 16px 63px;
    font-size: 24px;
}

.video-tiktok-swiper .swiper-button-next,
.video-tiktok-swiper .swiper-button-prev {
    top: auto;
    bottom: 266px;
    transform: translateY(50%);
    margin-top: 0;
    background: #fff;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    color: #F75501;
}

.video-tiktok-swiper .swiper-button-next::after,
.video-tiktok-swiper .swiper-button-prev::after {
    font-size: 14px !important;
    font-weight: 700;
}

.video-tiktok-swiper .swiper-button-next {
    right: 0;
}

.video-tiktok-swiper .swiper-button-prev {
    left: 453px !important;
    right: auto;
}
@media screen and (max-width: 1440px) {
    .promo-container--tiktok {
        max-width: 100%;
        padding: 0 15px;
    }
}

@media screen and (max-width: 1200px) {

    .video-tiktok-swiper .swiper-slide {
        width: 238px;
        /* width: 243px;
        height: 360px; */
    }

    .video-tiktok-swiper .swiper-slide-active {
        width: clamp(
            320px,
            calc(282.43px + 9.28vw),
            416px
        );
    }

    .video-tiktok-swiper .swiper-button-prev {
        left: calc(min(100%, 480px) + 12px);
    }

    .video-tiktok-swiper .swiper-button-next,
    .video-tiktok-swiper .swiper-button-prev {
        bottom: 180px;
    }
}
@media (max-width: 1024px) {
    .main-promo-net .promo-container--tiktok .heading-title{
        left: 386px;
        top: 80px;
    }
    .video-tiktok-swiper .swiper-slide {
        width: 280px;
    }
    .video-tiktok-swiper .swiper-slide-active {
        width: clamp(320px, calc(282.43px + 9.28vw),416px);
    }
}
@media (max-width: 834px) {
    .video-tiktok-swiper .swiper-slide {
        width: 206px;
    }
    .video-tiktok-swiper .swiper-slide-active {
        width: clamp(320px, calc(282.43px + 9.28vw),416px);
    }
}
@media (max-width: 820px) {
    .video-tiktok-swiper .swiper-slide {
        width: 199px;
    }
    .video-tiktok-swiper .swiper-slide-active {
        width: clamp(320px, calc(282.43px + 9.28vw),416px);
    }
}
@media (max-width: 768px) {
    .tiktok-video-section {
        padding: 20px 0;
    }
    .video-tiktok-swiper .swiper-button-next {
        right: 12px;
    }
    @media (max-width: 820px) {
        .video-tiktok-swiper .swiper-slide {
            width: 175px;
        }
        .video-tiktok-swiper .swiper-slide-active {
            width: clamp(320px, calc(282.43px + 9.28vw),416px);
        }
    }
}
@media (max-width: 540px) {
    .promo-container--tiktok {
        padding: 0;
    }
    .video-tiktok-swiper {
        padding-bottom: 24px;
        padding-right: 0;
        width: 100%;
    }
    .video-tiktok-swiper .swiper-button-next {
        right: 38%;
        bottom: 24px
    }
    .video-tiktok-swiper .swiper-button-prev {
        left: 38% !important;
        bottom: 24px
    }
    .main-promo-net .promo-container--tiktok .heading-title {
        position: unset;
    }
    .video-tiktok-swiper .swiper-slide-active__old {
        width: min(100%, 100%);
        height: 520px;
    }
    .video-tiktok-swiper .swiper-slide {
        /* width: calc(100vw - 40px);
        height: 480px; */
    }

    .video-tiktok-swiper .swiper-slide-active {
        width: 100%;
        height: 650px;
    }
}

/* end tiktok swiper ----------------------------------- */



/*
|
|
| ------------- promotion list --------------------------
|
|
*/
.promotion-container {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    /* Firefox */
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
}

/* scrollbar Chrome, Edge, Safari */
.promotion-container::-webkit-scrollbar {
    height: 6px;
}

.promotion-container::-webkit-scrollbar-track {
    background: transparent;
}

.promotion-container::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: 999px;
    transition: background .3s ease;
}

/* Hover scrollbar Chrome, Edge, Safari */
.promotion-container:hover {
    scrollbar-color: rgba(153, 153, 153, .2) rgba(229, 229, 229, 0);
}

.promotion-container:hover::-webkit-scrollbar-track {
    background: rgba(229, 229, 229, 0);
}

.promotion-container:hover::-webkit-scrollbar-thumb {
    background: rgba(153, 153, 153, .2);
}

.promotion-container:hover::-webkit-scrollbar-thumb:hover {
    background: rgba(153, 153, 153, .2);
}

/* end scrollbar Chrome, Edge, Safari ----------------------------------*/


.promotion-list {
    display: flex;
    gap: 30px;
    justify-content: center;
    padding-top: 15px;
    padding-bottom: 60px;
}

.promotion-item {
    position: relative;
    width: 336px;
    flex-shrink: 0;
    cursor: pointer;
}

.promotion-item>img {
    width: 100%;
    display: block;
    border-radius: 12px;
}

.promotion-item .promotion-popup {
    position: absolute;
    top: calc(50% - 180px);
    left: calc(100% + 16px);
    width: auto;
    background: #fff;
    border: 1px solid #F37021;
    border-radius: 28px;
    padding: 30px;
    text-align: center;
    box-shadow: 0 6px 11px rgba(0, 0, 0, .08);

    opacity: 0;
    visibility: hidden;
    transition: all .25s ease;
    z-index: 10;
}

.promotion-item:last-child .promotion-popup {
    left: auto;
    right: calc(100% + 16px);
}

.promotion-item:last-child .promotion-popup::before {
    left: auto;
    right: -16px;
    transform: translateY(-50%) rotate(180deg);
}

.promotion-item .promotion-popup::before {
    content: "";
    position: absolute;
    top: 50%;
    left: -16px;
    transform: translateY(-50%);
    border-top: 16px solid transparent;
    border-bottom: 16px solid transparent;
    border-right: 16px solid #F37021;
}

.promotion-item .promotion-popup img {
    width: 283px;
    height: 221px;
    object-fit: cover;
    border-radius: 20px;
}

.promotion-item .promotion-popup p {
    font-size: 16px;
    line-height: 1.4;
    color: #444;
    margin: 16px 0;
}

/* .promotion-item .promotion-popup, */
.promotion-item:hover .promotion-popup {
    opacity: 1;
    visibility: visible;
}

@media screen and (max-width: 1366px) {
    .promotion-list {
        justify-content: flex-start;
    }
}

/* Tablet */
@media (max-width: 768px) {
    .promotion-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .promotion-container::-webkit-scrollbar {
        display: none;
    }

    .promotion-list {
        justify-content: flex-start;
        width: max-content;
        padding-top: 24px;
        padding-bottom: 55px;
    }

    /* viewport hiển thị ~3 item */
    .promotion-item {
        width: calc((100vw - 32px - 24px) / 2.5);
        min-width: 180px;
    }

    .promotion-item .promotion-popup {
        padding: 16px;
        top: calc(50% - 160px);
    }

    /* mobile không hover */
    .promotion-popup {
        /* display: none; */
    }

    .promotion-item .promotion-popup img {
        width: 240px;
        height: 200px;
    }

    .promotion-item .promotion-popup .btn-orange {
        height: 38px;
        line-height: 38px;
        font-size: 14px;
        padding: 0 12px;
    }
    .main-promo-net .promo-section .heading-title {
        padding-bottom: 0;
    }
}

@media (max-width: 540px) {
    .promotion-container {
        overflow-x: hidden;
        overflow-y: visible;
        scrollbar-width: none;
    }

    .promotion-container::-webkit-scrollbar {
        display: none;
    }

    .promotion-list {
        flex-wrap: wrap;
        gap: 16px;
    }

    .promotion-item {
        flex: 0 0 calc((100% - 16px) / 2);
    }


    .promotion-item .promotion-popup {
        padding: 15px;
        width: 300px;
        width: 66vw;
    }

    .promotion-list {
        flex-wrap: wrap;
        gap: 16px;
        width: 100%;
        padding-bottom: 0px;
    }

    .promotion-item {
        flex: 0 0 calc((100% - 16px) / 2);
        min-width: 100px;
    }

    .promotion-item .promotion-popup img {
        display: none;
    }

    /* thứ tự sắp xếp popup:  */
    .promotion-item:nth-of-type(1) .promotion-popup {
        top: 10px;
        left: 56%;
    }

    /* ---------- */
    .promotion-item:nth-of-type(2) .promotion-popup {
        top: 10px;
        right: 56%;
        left: unset;
    }

    .promotion-item:nth-of-type(2) .promotion-popup::before {
        left: unset;
        right: -16px;
        transform: translateY(-50%) rotate(180deg);
    }

    /* -------------- */

    .promotion-item:nth-of-type(3) .promotion-popup {
        top: 10px;
        left: 56%;
    }

    .promotion-item:nth-of-type(4) .promotion-popup {
        top: 10px;
        right: 56%;
        left: unset;
    }
}


/*
|
|
| ------------- Custom block package --------------------------
|
|
*/
.main-promo-net .products-section .container--package-hcm {
    padding-bottom: 40px;
}
.promo-net-link-location {
    display: flex;
    gap: 32px;
    align-items: center;
    justify-content: center;
    margin: 20px 0 0;
}
.promo-net-link-location .link-location{
    color: #4564ED;
    cursor: pointer;
    margin-top: unset;
    margin-bottom: unset;
    margin-left: 0;
    font-size: 24px;
    font-weight: 700;
    line-height: 36px;
}
.main-promo-net .products-section .heading-title {
    padding-bottom: 10px;
}
@media (max-width: 768px) {
    .promo-net-link-location .link-all {
        display: none;
    }
}
@media (max-width: 540px) {
    .main-promo-net .products-section .container--package-hcm {
        padding-bottom: 20px;
    }
}
/*
|
|
|
| ------------- footer -------------
|
|
|
*/

footer.footer {
    background: #F8F9FA;
}

footer.footer .row-fptlogo {
    border-bottom: 1px solid #E2E2E2;
    padding: 22px 0;
    margin-bottom: 15px;
}

footer.footer .row-fptlogo div:first-child {
    padding-left: 0;
}

footer.footer .row-fptlogo div:last-child {
    padding-right: 0;
}

footer.footer .row-link-foot {
    border-bottom: 1px solid #E2E2E2;
    padding: 15px 0 30px 0;
}


footer.footer .row-link-foot div:first-child {
    padding-left: 0px;
}

footer.footer .row-link-foot div:last-child {
    padding-right: 0px;
    padding-left: 0px;
}

footer.footer .row-link-foot div:first-child p {
    /* color: var(--neutral900); */
    color: #000;
    font-size: 15px;
    font-weight: 500;
    margin-bottom: 12px
}

footer.footer .row-link-foot>.col-sm-8>div:nth-of-type(1) {
    width: 25%;
}

footer.footer .row-link-foot>.col-sm-8>div:nth-of-type(3) {
    width: 41.66666667%;
    padding-left: 0;
}

@media screen and (min-width: 1500px) {}

/*
|
|
|
| ------------- button link --------------------------
|
|
|
*/
.btn-orange {

    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: auto;
    padding: 0 20px;
    border-radius: 8px;
    color: #fff;
    font-size: 16px;
    height: 48px;
    font-weight: 700;
    padding: 0 16px;
    line-height: 48px;
    text-decoration: none;

    cursor: pointer;
    overflow: hidden;
    background:
        /* url('../images/btn-bg.png') center center repeat, */
        linear-gradient(180deg,
            #ff8a1e 0%,
            #ff6500 45%,
            #ff5a00 100%);

    box-shadow:
        0 0 0 0px rgba(255, 125, 40, 0.19),
        0 5px 50px rgba(255, 110, 20, 0.55),
        inset 0 8px 20px rgba(255, 255, 255, 0.25),
        inset 0 -10px 20px rgba(255, 120, 0, 0.35);
    border: 1px solid rgba(255, 237, 220, 0.7);
    transition:
        transform .25s ease,
        box-shadow .25s ease;

}

.btn-orange:hover, .btn-orange:focus, .btn-orange:active  {
    color: #fff;
    border: 1px solid rgba(255, 218, 167, 0.7);
    transform: translateY(-2px);
    background:
        /* url('../images/btn-bg.png') center center repeat, */
        linear-gradient(180deg,
            #ff922b 0%,
            #ff6500 45%,
            #ff5a00 100%);
}

.row-btn-banner {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, 0);
    width: 100%;
    max-width: 100%;
    height: 100%;
    margin: 0 auto;
}

.row-btn-banner .btn-banner-inner {
    display: flex;
    gap: 12px;
    position: absolute;
    bottom: clamp(17px, calc(-49.48px + 12.31vw), 186px);
    margin-left: clamp(42px, calc(-29.61px + 13.26vw), 225px);

}

.button-banner-big {
    padding: 0 32px;
    /* height: clamp(28px, calc(16.26px + 2.17vw), 58px); */
    height: clamp(28px, calc(15.48px + 2.32vw), 60px);
    font-size: clamp(14px, calc(5.39px + 1.59vw), 36px);
}

.button-banner-big.btn-white {
    background: #fff;
    color: #FF6C14;
    border: 1px solid #ff6106;
    display: none;
}



@media screen and (max-width: 1920px) {}

@media screen and (max-width: 1600px) {}

@media screen and (max-width: 1366px) {}

@media screen and (max-width: 1200px) {}

@media screen and (max-width: 1024px) {}

@media screen and (max-width: 991px) {
    .button-banner-big.btn-white {
        display: flex;
    }
}

@media screen and (max-width: 540px) {
    .button-banner-big {
        padding: 0 16px;
    }
}

@media screen and (max-width: 375px) {}

/*
|
|
| --------------------- FAQ --------------------------------
|
|
*/
.main-wrapper.main-promo-net .faq-section {
    width: 100%;
    padding: 60px 0;
    background: rgba(243, 245, 246, 1);
    margin-bottom: 50px;
}

.faq-section .faq-container {
    max-width: 1440px;
    margin: 0 auto;
}


.faq-section .faq-title {
    color: rgba(0, 0, 0, 1);
    font-size: 50px;
    font-size: clamp(24px, calc(13.83px + 1.88vw), 50px);
    font-weight: 700;
    line-height: 50px;
    margin-bottom: 40px;
}
.faq-section .faq-title span{
    color: #FF8D28;
}
.faq-section .faq-list {
    /* max-width: 1350px; */
    max-width: 1440px;
    margin: 0 auto;
}

.faq-section .faq-item {
    border-bottom: 2px solid rgba(215, 222, 240, 1);
    overflow: hidden;
}

.faq-section .faq-item:last-child {
    border-bottom: none;
}
.faq-section .faq-item:nth-of-type(1) {
    border-top: 2px solid rgba(215, 222, 240, 1);
}
.faq-section .faq-question {
    width: 100%;
    background: none;
    border: none;
    padding: 18px 0;
    font-size: 18px;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
    display: flex;
    justify-content: space-between;
    /* align-items: center; */
    gap: 16px;
    transition: color 0.2s;
}

.faq-section .faq-question:hover {
    color: #FF7D2F;
}

.faq-section .faq-icon {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: 400;
    flex-shrink: 0;
    transition: all 0.3s;
    color: #FF7D2F;
}

.faq-section .faq-item.open .faq-icon {
    color: #FF7D2F;
    transform: rotate(45deg);
}

.faq-section .faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
}

.faq-section .faq-answer-inner {
    padding: 0 0 18px;
    font-size: 16px;
    font-weight: 400;
    color: rgba(60, 60, 67, 0.85);
    line-height: 1.7;
}

@media screen and (max-width: 1440px) {
    .faq-section .faq-container {
        padding-left: 15px;
        padding-right: 15px;
    }
}
@media (max-width: 540px) {
    .main-wrapper.main-promo-net .faq-section {
        padding: 20px 0;
        margin-bottom: 20px;
    }
}
/* --------------------------- */

.main-wrapper.main-promo-net .block-content-section {
    /* padding-top: 50px; */
}

.main-wrapper.main-promo-net .block-content-section .block-content-full {
    margin-bottom: 50px;
}
@media (max-width: 540px) {
    .main-wrapper.main-promo-net .block-content-section .block-content-full {
        margin-bottom: 20px;
    }
}

/*
|
|
| ------------- block About technology --------------------------
|
|
*/
.section-net-tech {
    padding-top: 50px;
    padding-bottom: 50px;
}

.promo-net--tech {
    display: flex;
    align-items: center;
    justify-content: space-around;
    gap: 120px;

    padding: 22px 80px;
    border: 1px solid #FF7D2F;
    border-radius: 24px;
    background: #FFF7F2;
    margin: 0 auto;
}

.promo-net--tech .item {
    display: flex;
    align-items: center;
    gap: 20px;
    flex: 1;
    min-width: 0;
}

.promo-net--tech .item img {
    /* width: 56px;
    height: 56px; */
    object-fit: contain;
    flex-shrink: 0;
}

.promo-net--tech .item span,
.promo-net--tech .item span small {
    font-size: 16px;
    line-height: 26px;
    color: #3D3D3D;
    font-weight: 400;
}
.promo-net--tech .item span small {
    display: block;
}

@media (max-width: 1440px) {
    .promo-net--tech {
        width: calc(100% - 30px);
        padding: 22px 32px;
        gap: 60px;
    }
}

@media (max-width: 991px) {
    .promo-net--tech {
        flex-wrap: wrap;
        gap: 24px;
        padding: 24px;
    }

    .promo-net--tech .item {
        flex: 0 0 calc(50% - 12px);
    }

    .promo-net--tech .item span {
        font-size: 18px;
    }
}


@media (max-width: 768px) {
    .section-net-tech {
        padding: 20px 0;
    }
}
@media (max-width: 576px) {
    .promo-net--tech {
        flex-direction: column;
        align-items: flex-start;
    }

    .promo-net--tech .item {
        width: 100%;
        flex: none;
    }

    .promo-net--tech .item span {
        font-size: 16px;
    }
}
@media (max-width: 540px) {
    .promo-net--tech {
        border: none;
        background: transparent;
        padding: 0;
        gap: 20px;
        width: calc(100% - 80px);
    }
    .promo-net--tech .item {
        border-radius: 16px;
        padding: 4px 12px;
        border: 1px solid #FF7D2F;
        background: #FFF7F2;
    }
    .promo-net--tech .item img {
        height: 36px;
    }
    .promo-net--tech .item span small {
        display: inline-block;
    }

}
/*
|
|
| ------------- CTA BANNER --------------------------
|
|
*/
.main-wrapper.main-promo-net .cta-section {
    width: 100%;
    padding-top: 50px;
    padding-bottom: 50px;
}

.cta-section .cta-container {
    /* background:
        linear-gradient(120deg, rgba(255, 136, 0, .7), rgba(255, 140, 0, .7) 60%, rgba(255, 110, 13, 0.79)),
        url('../images/cta-banner.png') center center no-repeat;
         */
    /* width: 1345px; */
    width: 1440px;
    max-width: 100%;
    height: auto;
    border-radius: 16px;
    margin: 0 auto;
    display: flex;
    /* align-items: center; */

    position: relative;
}

.cta-section .cta-container img {
    width: 1440px;
    max-width: 100%;
}

.cta-container .cta-body {
    color: #fff;
    left: 7%;
    bottom: calc(35% - 2vw);

    /* --------- */
    position: absolute;
}

/* nếu html có đầy đủ text thì dùng html này, hiện tại chỉ dùng ảnh và button, ko có text
    <div class="cta-body">
        <h3 class="cta-title">Sẵn Sàng Lắp Mạng?</h3>
        <p>Đăng ký ngay hôm nay - Lắp nhanh 24h - Mạng mạnh, giá tốt</p>
        <div class="cta-actions">
            <a class="btn-orange cta-btn icons"> <img
                    src="../front-end/ldp-promotion-net/images/cta-i-1.png" alt=""> Đăng ký lắp đặt</a>
            <a class="btn-orange cta-btn-white icons"><img
                    src="../front-end/ldp-promotion-net/images/cta-i-3.png" alt=""> Tư vấn</a>
        </div>
        <div class="cta-icon-detail">
            <div class="icons"><img src="../front-end/ldp-promotion-net/images/cta-i-1.png" alt=""> Lắp đặt
                nhanh <span>24h</span></div>
            <div class="icons"><img src="../front-end/ldp-promotion-net/images/cta-i-2.png" alt=""> Internet
                mạnh, ổn định</div>
            <div class="icons"><img src="../front-end/ldp-promotion-net/images/cta-i-3.png" alt=""> Giá tốt,
                nhiều ưu đãi</div>
        </div>
    </div>
*/
.cta-container .cta-title {
    font-size: clamp(24px, 4vw, 40px);
    font-weight: 700;
    margin-bottom: 8px;
}

.cta-section .cta-container p {
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 28px;
}

.cta-container .cta-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.cta-container .cta-icon-detail {
    display: flex;
    gap: 24px;
    justify-content: center;
    margin-top: 24px;
    flex-wrap: wrap;
}

.cta-container .cta-icon-detail .icons {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cta-container .cta-icon-detail .icons img {
    border-radius: 50%;
    width: 40px;
    height: 40px;
}

.cta-container .btn-orange {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cta-container .btn-orange {
    box-shadow: 0 0 0 3px rgba(255, 125, 40, 0.5),
        0 5px 50px rgba(255, 110, 20, 0.95),
        inset 0 8px 20px rgba(255, 255, 255, 0.25),
        inset 0 -10px 20px rgba(255, 120, 0, 0.35);
}

.cta-container .btn-orange.cta-btn,
.cta-container .btn-orange.cta-btn-white {
    height: clamp(30px,
            calc(14.35px + 2.90vw),
            70px);
    font-size: clamp(14px,
            calc(5.39px + 1.59vw),
            36px);
    padding: 0 clamp(15px,
            calc(1.30px + 2.54vw),
            50px);
    border-radius: 18px;
    border: 2px solid #fff;
}

.cta-container .btn-orange.cta-btn-white {
    background: #fff;
    color: #FF6C14;
    border: 2px solid #ff6106;
}

.cta-container .btn-orange.icons img {
    width: 24px;
    height: 24px;
}

.cta-container .btn-white-outline:hover {}

@media screen and (max-width: 1440px) {
    .cta-section .cta-container {
        width: calc(100% - 30px);
    }
}

@media (max-width: 834px) {
    .cta-section .cta-container img {
        width: 100vw;
    }
}

@media screen and (max-width: 540px) {
    .main-wrapper.main-promo-net .cta-section {
        padding: 0;
    }
    .cta-section .cta-container {
        width: 100%;
    }

    .cta-container .btn-orange.cta-btn,
    .cta-container .btn-orange.cta-btn-white {
        border-radius: 8px;
        border-width: 1px;
    }
}

/*
|
| ------------- block Consultants --------------------------
|
|
*/

.consultants-section {
    padding: 50px 0;
}

.consultants-container {
    max-width: 1440px;
    margin: 0 auto;
}

.consultants-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.consultant-card {
    background: #fff;
    border-radius: 34px;
    padding: 8px;
    display: flex;
    gap: 20px;
    box-shadow: 0 2px 7px rgba(0, 0, 0, 0.04);
    transition: box-shadow 0.2s;
    border: 1px solid #d4d4d4;
    align-items: flex-end;
}

.consultant-card:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.consultant-avatar {
    border-radius: 32px;
    object-fit: cover;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    width: 320px;
}

.consultant-info {
    padding-bottom: 32px;
    flex-direction: column;
}

.consultant-info h4 {
    font-size: 22px;
    font-weight: 500;
    color: #121212;
    margin-bottom: 4px;
    display: flex;
    /* align-items: center; */
    gap: 4px;
}

.consultant-info h4 img {
    width: 24px;
    height: 24px;
    object-fit: cover;
}

.consultant-description {
    font-size: 15px;
    color: #181818;
    margin-bottom: 8px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.box-stats-consultants {}

.row-stats-consultants {
    display: flex;
    flex-direction: column;
}

.consultant-stats {
    display: flex;
    gap: 12px;
    margin-bottom: 10px;
}

.stat-item {
    display: flex;
    align-items: center;
    gap: 4px;
}

.stat-value {
    font-size: 16px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 4px;
}

.consultant-actions {
    display: flex;
    gap: 16px;
}

.action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
}

.action-btn img {}

.action-btn:hover {}

@media (max-width: 1200px) {
    .consultants-container {
        max-width: calc(100% - 30px);
    }
}

@media (max-width: 1024px) {
    .consultant-card {
        padding: 8px;
    }

    .consultant-avatar {
        width: 225px;
    }

    .consultant-info h4 {
        font-size: 20px;
    }

    .consultant-info h4 img {
        width: 20px;
        height: 20px;
    }
}

@media (max-width: 991px) {
    .consultants-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 834px) {
    .consultants-grid {
        grid-template-columns: 1fr 1fr;
        max-width: max-content;
        margin: 0 auto;
    }

    .consultant-card {
        position: relative;
        padding: 6px;
        border: 1px solid rgba(212, 212, 212, 0.3);
    }

    .box-stats-consultants {
        display: flex;
        gap: 12px;
        align-items: center;
        justify-content: center;
    }

    .row-stats-consultants {
        flex-direction: row;
        order: 2;
        gap: 12px;
    }

    .consultant-actions {
        order: 1;
        gap: 12px;
    }

    .consultant-info {
        position: absolute;
        left: 8px;
        left: 50%;
        transform: translateX(-50%);
        bottom: 8px;
        display: flex;
        padding-bottom: 10px;
        width: calc(100% - 32px);
    }

    .consultant-avatar {
        width: 320px;
    }

    .stat-item div:last-child {
        display: none;
    }

    .consultant-stats {
        margin: 0;
    }

    .action-btn img {
        width: 30px;
    }

    .consultant-description {
        margin-top: 6px;
        margin-bottom: 10px;
    }
}

@media (max-width: 640px) {
    .consultants-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 540px) {
    .main-wrapper.main-promo-net .consultants-section {
        padding-bottom: 40px;
    }
    .consultant-avatar {
        width: 300px;
        max-width: 100%;
    }
}
/*
|
|
|------------- Modal & custom select2 --------------------------
|
|
*/
/* ── Overlay ── */
.modal-overlay-promo-net {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .45);
    z-index: 1000;
    align-items: center;
    justify-content: center;
    animation: fadeIn .2s ease;
}

.modal-overlay-promo-net.active {
    display: flex;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ── Modal box ── */
.modal-promo-net {
    background: #fff;
    border-radius: 16px;
    padding: 32px 28px 24px;
    width: 100%;
    max-width: 440px;
    position: relative;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .2);
    animation: slideUp .25s ease;
}

/* ── Close button ── */
.modal-promo-net .modal-close {
    position: absolute;
    top: 14px;
    right: 16px;
    background: none;
    border: none;
    font-size: 22px;
    color: #f60;
    cursor: pointer;
    line-height: 1;
    padding: 2px 6px;
    border-radius: 4px;
    transition: background .15s;
}

.modal-promo-net .modal-close:hover {
    background: #fff3eb;
}

/* ── Title ── */
.modal-promo-net .modal-title {
    font-size: 20px;
    font-weight: 700;
    color: #111;
    margin-bottom: 20px;
    line-height: 1.35;
    padding-right: 24px;
}

/* ── Inputs ── */
.modal-promo-net .modal-input[type='text'],
.modal-promo-net .modal-input[type='tel'] {
    width: 100%;
    height: 48px;
    border: 1.5px solid #ddd;
    border-radius: 10px;
    padding: 0 14px;
    font-size: 15px;
    color: #222;
    outline: none;
    transition: border-color .2s, box-shadow .2s;
    margin-bottom: 14px;
}

.modal-promo-net .modal-input::placeholder {
    color: #aaa;
}

.modal-promo-net .modal-input:focus {
    border-color: #f60;
    box-shadow: 0 0 0 3px rgba(255, 102, 0, .12);
}

/* ── Select2 custom ── */
.modal-promo-net .select2-container {
    width: 100% !important;
    margin-bottom: 20px;
}

.modal-promo-net .select2-container--default .select2-selection--single {
    height: 48px;
    border: 1.5px solid #ddd;
    border-radius: 10px;
    display: flex;
    align-items: center;
    padding: 0 14px;
    transition: border-color .2s, box-shadow .2s;
}

.modal-promo-net .select2-container--default.select2-container--open .select2-selection--single,
.modal-promo-net .select2-container--default.select2-container--focus .select2-selection--single {
    border-color: #f60;
    box-shadow: 0 0 0 3px rgba(255, 102, 0, .12);
    outline: none;
}

.modal-promo-net .select2-container--default .select2-selection--single .select2-selection__rendered {
    /* line-height: 48px; */
    color: #aaa;
    font-size: 15px;
    padding: 0;
}

.modal-promo-net .select2-container--default .select2-selection--single .select2-selection__rendered.selected {
    color: #222;
}

.modal-promo-net .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 46px;
    right: 12px;
}

.modal-promo-net .select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: #888 transparent transparent;
}

.modal-promo-net .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
    border-color: transparent transparent #f60;
}

.modal-promo-net .select2-dropdown {
    border: 1.5px solid #f60;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
}

.modal-promo-net .select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: #f60;
}

.modal-promo-net .select2-container--default .select2-results__option[aria-selected=true] {
    background-color: #fff3eb;
    color: #f60;
}

.modal-promo-net .select2-search--dropdown .select2-search__field {
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 14px;
}

.modal-promo-net .select2-search--dropdown .select2-search__field:focus {
    outline: none;
    border-color: #f60;
}

/* ── Submit button ── */
.modal-promo-net .modal-btn {
    width: 100%;
    height: 52px;
    background: linear-gradient(135deg, #ff8c00 0%, #f60 100%);
    border: none;
    border-radius: 10px;
    color: #fff;
    font-size: 17px;
    font-weight: 700;
    cursor: pointer;
    letter-spacing: .3px;
    transition: transform .15s, box-shadow .15s, filter .15s;
    box-shadow: 0 4px 16px rgba(255, 102, 0, .35);
    margin-bottom: 16px;
}

.modal-promo-net .modal-btn:hover {
    filter: brightness(1.07);
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(255, 102, 0, .45);
}

.modal-promo-net .modal-btn:active {
    transform: translateY(0);
}

/* ── Disclaimer ── */
.modal-promo-net .modal-disclaimer {
    font-size: 12.5px;
    color: #666;
    line-height: 1.55;
}

.modal-promo-net .modal-disclaimer a {
    color: #222;
    font-weight: 700;
    text-decoration: none;
}

.modal-promo-net .modal-disclaimer a:hover {
    text-decoration: underline;
}

@media screen and (max-width: 540px) {
    .modal-promo-net {
        width: calc(100% - 20px);
    }
}


.new-title-label.title-location {
    text-align: center;
}

.new-title-label.title-location .view-packages {
    position: unset;
}
/*
|
|
| ------------- custom scroll tab-list of support links --------------------------
|
|
*/

.hyper-fast-support.tab-wrapper .tab-list li {
    padding: 8px 10px;
}
.hyper-fast-support.tab-wrapper .tab-list {
    max-height: 560px;
    overflow-y: auto;
    overflow-x: hidden;
    /* Firefox */
    scrollbar-width: thin;
    scrollbar-color: rgba(189, 189, 189, 0) transparent;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    /* Firefox: thanh cuộn làm vuông góc container -> clip lại theo bo góc 16px */
    border-radius: 16px;
    clip-path: inset(0 round 16px);
}
.hyper-fast-support.tab-wrapper .tab-list:hover {
    scrollbar-color: rgba(189, 189, 189, 0.25) transparent;
}
/* Chrome, Edge, Safari */
.hyper-fast-support.tab-wrapper .tab-list::-webkit-scrollbar {
    width: 6px;
}

.hyper-fast-support.tab-wrapper .tab-list::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 20px;
}

.hyper-fast-support.tab-wrapper .tab-list::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.15);
    border-radius: 999px;
    transition: background 0.3s;
}

.hyper-fast-support.tab-wrapper .tab-list::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.1);
}