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

/*************** ADD CUSTOM CSS HERE.   ***************/
@font-face {
    font-family: 'HienKhanh';
    src: url('assets/fonts/hien-khanh-3.woff2') format('woff2'),
        url('assets/fonts/hien-khanh-3.woff') format('woff'),
        url('assets/fonts/hien-khanh-3.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

body,
button,
input,
.nav>li>a {
    font-family: 'HienKhanh' !important;
}

#masthead .header-nav.header-nav-main {
    justify-content: center !important;
    gap: 20px !important;
}

.banner_prd_hover .banner-bg img {
    filter: grayscale(1) !important;
    transition: all 0.3s ease;
}

.banner_prd_hover:has(.btn_see_details:hover) .banner-bg img {
    filter: grayscale(0) !important;
}

.btn_see_details:hover {
    background-color: #000000 !important;
}

.banner_prd_hover .btn_see_details>span,
.banner_prd_hover .banner-layers .img_prd_banner .img {
    transition: all 0.5s ease;
}

.banner_prd_hover:has(.btn_see_details:hover) .banner-layers .img_prd_banner .img {
    transform: scale(1.27);
    transition: all 0.5s ease;
}

.banner_prd_hover:has(.btn_see_details:hover) .btn_see_details>span {
    color: #F0EAD8 !important;
    transition: all 0.5s ease;
    text-decoration: underline;
}

.btn_back {
    background-color: #00000080 !important;
    border: none !important;
}

.btn_back>span {
    color: #F0EAD8 !important;
}

.btn_back:hover {
    background-color: #000000 !important;
}

.btn_back:hover>span {
    color: #F0EAD8 !important;
    text-decoration: underline;
}

.stack_text_prd {
    width: 33% !important;
}

.stack_text_prd p {
    margin: 0 !important;
    line-height: normal;
}

.img_prd_absolute {
    position: absolute !important;
}

.btn_buynow_prd {
    background-color: #00000080;
    font-family: "Arimo", sans-serif !important;
    font-weight: 700;
    font-size: 20px;
    color: #F0EAD8;
    padding: 15px 33px;
    line-height: normal;
    border: none !important;
}

.btn_buynow_prd>span {
    line-height: 1 !important;
    transition: all 0.3s ease;
}

.btn_buynow_prd:hover {
    background-color: #000000 !important;
}

.btn_buynow_prd:hover>span {
    color: #F0EAD8 !important;
    text-decoration: underline;
}

#top-link {
    background-color: #00000080 !important;
    border: none !important;
    width: 60px !important;
    height: 60px !important;
}

#top-link .icon-angle-up {
    font-size: 33px !important;
    color: #F0EAD8 !important;
    opacity: 1 !important;
}

.img_prd_absolute img {
    filter: grayscale(.5) brightness(.5) !important;
    transition: all 0.3s ease;
}

.stack_prd_image .img_prd_absolute img,
.stack_prd_image .img_main_prd {
    transition: all 0.5s ease;
}

.col-inner:has(.btn_buynow_prd:hover) .stack_prd_image .img_prd_absolute img {
    filter: grayscale(0) brightness(1) !important;
}

.col-inner:has(.btn_buynow_prd:hover) .stack_prd_image .img_main_prd {
    transform: scale(1.15) translateY(-25px) !important;
}

.img_main_prd {
    max-width: 173px !important;
}

.text_desc_prd,
.text_desc_prd>* {
    font-size: 20px;
    color: #595959;
    line-height: normal;
}

.title_prd,
.title_prd>* {
    font-weight: 400;
    font-size: 64px;
    line-height: 1;
    margin: 0 !important;
}

.title_prd.green,
.title_prd.green>* {
    color: #829360 !important;
}

.title_prd.orange,
.title_prd.orange>* {
    color: #D9A05A !important;
}

.title_prd.red,
.title_prd.red>* {
    color: #DA6367 !important;
}

.title_prd.brown,
.title_prd.brown>* {
    color: #A1402C !important;
}

.subtitle_prd,
.subtitle_prd>* {
    font-weight: 600;
    font-size: 32px;
    font-style: italic;
    margin: 0 !important;
    line-height: 1;
}

.subtitle_prd.green,
.subtitle_prd.green>* {
    color: #829360 !important;
}

.subtitle_prd.orange,
.subtitle_prd.orange>* {
    color: #D9A05A !important;
}

.subtitle_prd.red,
.subtitle_prd.red>* {
    color: #DA6367 !important;
}

.subtitle_prd.brown,
.subtitle_prd.brown>* {
    color: #A1402C !important;
}

.dn_title_prd,
.dn_title_prd>* {
    font-weight: 400;
    font-size: 48px;
    line-height: 100%;
    margin: 0 !important;
}

.dn_title_prd.green,
.dn_title_prd.green>* {
    color: #829360 !important;
}

.dn_title_prd.orange,
.dn_title_prd.orange>* {
    color: #D9A05A !important;
}

.dn_title_prd.red,
.dn_title_prd.red>* {
    color: #DA6367 !important;
}

.dn_title_prd.brown,
.dn_title_prd.brown>* {
    color: #A1402C !important;
}

.dn_slider .flickity-button {
    width: 45px !important;
    aspect-ratio: 1;
    background-color: #00000080;
    border-radius: 9999px;
    top: 50% !important;
    bottom: 50% !important;
}

.dn_slider .flickity-button>svg.flickity-button-icon {
    border: none !important;
    fill: #F0EAD8 !important;
    max-width: 16px;
    padding: 0;
    background-color: transparent !important;
    bottom: 50% !important;
    top: 50% !important;
}

.dn_slider .flickity-button:hover {
    background-color: #F0EAD8 !important;
}

.dn_slider .flickity-button:hover>svg.flickity-button-icon>* {
    fill: #000000 !important;
}

.btn_see_details {
    background-color: #F0EAD8 !important;
    margin: 0 !important;
}

.btn_see_details>span {
    color: #000000 !important;
}


#masthead::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('./assets/img/bg_after_header.png');
    background-size: cover;
    background-position: center bottom;
    z-index: -1;
    top: 30px;
}

.img_prd_banner {
    max-width: 26% !important;
}

.btn_bg_banner {
    background-color: #00000080 !important;
    padding: 10px 33px;
    line-height: normal;
    border: none !important;
}

.btn_bg_banner>span {
    line-height: normal;
    font-family: "Arimo", sans-serif !important;
    font-weight: 400;
    font-size: 20px;
    color: #F0EAD8;
}

.btn_bg_banner:hover {
    background-color: #F0EAD8 !important;
    box-shadow: none !important;
}

.btn_bg_banner:hover>span {
    color: #000000 !important;
    text-decoration: underline;
}

.asterisk_icon,
.asterisk_icon>* {
    font-weight: 400;
    font-size: 48px;
    line-height: normal;
    margin: 0 !important;
}

.dn_title_about,
.dn_title_about>* {
    font-weight: 400;
    font-size: 48px;
    line-height: normal;
    margin: 0 !important;
}

.title_thuong_hieu,
.title_thuong_hieu>* {
    font-weight: 400;
    font-size: 40px;
    line-height: normal;
    color: #A1402C;
    margin-bottom: 25px !important;
}

.text_thuong_hieu,
.text_thuong_hieu>* {
    font-size: 20px;
    line-height: normal;
    color: #595959;
}

.img_max_width {
    max-width: 260px !important;
    margin: 0 auto !important;
}

.slider_banner_home .flickity-button {
    width: 45px !important;
    aspect-ratio: 1;
    background-color: #00000080;
    border-radius: 9999px;
    top: 50% !important;
    bottom: 50% !important;
}

.slider_banner_home .flickity-button>svg.flickity-button-icon {
    border: none !important;
    fill: #F0EAD8 !important;
    max-width: 16px;
    padding: 0;
    background-color: transparent !important;
}

.slider_banner_home .flickity-button:hover {
    background-color: #F0EAD8 !important;
}

.slider_banner_home .flickity-button:hover>svg.flickity-button-icon>* {
    fill: #000000 !important;
}

.stack_btn_banner_home .button {
    background-color: rgba(250, 172, 77, 1);
    border: 1.5px solid rgba(0, 0, 0, 1);
    padding: 13.3px;
    line-height: 1;
}

.stack_btn_banner_home .button span {
    font-size: 27px;
    font-family: 'HienKhanh';
    font-weight: 400;
    line-height: 1;
    color: rgba(0, 0, 0, 1);
}

.dn_banner_text_home,
.dn_banner_text_home>* {
    font-family: 'HienKhanh';
    font-weight: 400 !important;
    font-size: 57px !important;
    line-height: 1;
    margin: 0 !important;
    color: #FFFFFF !important;
}

.dn_banner_text_home.under>* {
    margin-left: 90px !important;
}

.title_footer,
.title_footer>* {
    font-weight: 400;
    font-size: 24px;
    line-height: 100%;
    letter-spacing: 0%;
    color: #595959;
    margin: 0;
}

.subtext_footer,
.subtext_footer>* {
    font-weight: 400;
    font-size: 20px;
    line-height: normal;
    color: #595959;
}

.rotate_180_img img {
    transform: rotate(180deg);
}

.text_arimo,
.text_arimo>* {
    font-family: "Arimo", sans-serif !important;
}

.font_24,
.font_24>* {
    font-weight: 600;
    font-size: 24px;
    line-height: 100%;
    letter-spacing: 0%;
    vertical-align: middle;
}

.icb_footer {
    margin-bottom: 25px;
}

.icb_footer .icon-box-img,
.icb_footer .icon-box-img img {
    max-width: 16px !important;
    max-height: 16px !important;
    object-fit: contain;
}

.icb_footer .icon-box-text {
    font-weight: 400;
    font-size: 16px;
    letter-spacing: 0%;
    vertical-align: middle;
}

.icb_footer .icon-box-text .text>* {
    margin: 0 !important;
}

.dn_banner_ctrinh {
    border-radius: 10px;
    overflow: hidden;
}

.dn_banner_ctrinh .img {
    max-width: 215px !important;
    max-height: 215px !important;
    aspect-ratio: 1 !important;
    padding: 56px 50px !important;
    border: 1px solid #FFFFFF;
    border-radius: 9999px;
}

.dn_banner_ctrinh .dn_ctr_title p {
    font-weight: 600;
    font-size: 24px;
    line-height: 100%;
    letter-spacing: 0%;
    text-align: center;
}

#masthead .header-nav.header-nav-main a.nav-top-link.is-small {
    border-radius: 9999px;
    background-color: #F1E0FF;
    aspect-ratio: 1 / 1;
    min-width: 40px;
    display: flex;
    align-content: center;
    justify-content: center;
    color: #652D90;
}

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

#masthead .header-nav.header-nav-main .menu-item a.nav-top-link {
    font-weight: 400;
    font-size: 20px;
    line-height: 100%;
}

.section_16_9 {
    aspect-ratio: 1920 / 450;
}

.text_24,
.text_24>* {
    font-weight: 400;
    font-size: 24px !important;
    line-height: 100% !important;
    vertical-align: middle;
    margin: 0 !important;
}

.dn_stack_about {
    height: 100% !important;
}

.absolute-footer {
    display: none !important;
}


.dn_social_footer>a.icon {
    font-size: 40px !important;
    color: #000000;
}

.mb-0,
.mb-0>* {
    margin-bottom: 0 !important;
}

.title_htch,
.title_htch>* {
    font-weight: 400;
    font-size: 64px;
    line-height: 100%;
    margin: 0 !important;
    color: #A1402C;
}

.bg_multiply .section-bg img {
    opacity: 0.15;
    mix-blend-mode: multiply;
}

.imb_htch .box-text p {
    font-weight: 400;
    font-size: 40px;
    text-align: center;
    color: #000000;
}

.section_bg_footer {
    margin-top: -50px !important;
}


/* Custom Mobile Menu Dropdown Styles */
.longtien-menu-overlay {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background-color: #F0EAD8;
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

.longtien-menu-overlay.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Khóa cuộn màn hình khi menu hiển thị */
body.longtien-menu-open {
    overflow: hidden !important;
    height: 100vh !important;
}

/* Nền màn hình đen nhẹ phía dưới menu */
.longtien-menu-bg-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 150vh;
    background-color: rgba(0, 0, 0, 0.5);
    /* màu đen nhẹ */
    z-index: -1;
    cursor: default;
}

.longtien-menu-inner {
    padding: 30px 20px;
    position: relative;
    z-index: 10;
    background-color: #f0ead8;
}

.longtien-menu-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.longtien-nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: center;
    width: 100%;
}

.longtien-nav-list li {
    margin-bottom: 16px;
    width: 100%;
}

.longtien-nav-list li:last-child {
    margin-bottom: 0;
}

.longtien-nav-list li a {
    font-family: 'HienKhanh', sans-serif !important;
    font-size: 24px;
    font-weight: 600;
    color: #000000;
    text-transform: uppercase;
    text-decoration: none;
    line-height: 1.2;
    display: inline-block;
    transition: transform 0.2s ease, color 0.2s ease;
}

.longtien-nav-list li a:hover {
    color: #555555;
    transform: scale(1.05);
}

.longtien-burger-btn {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    width: 44px;
    height: 44px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin: 0 !important;
    position: relative;
}

.longtien-burger-btn:hover {
    background: transparent !important;
    opacity: 0.8;
}

.longtien-burger-btn svg {
    position: absolute;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Trạng thái mặc định (menu đóng) */
.longtien-burger-btn .icon-burger {
    opacity: 1;
    transform: rotate(0) scale(1);
}

.longtien-burger-btn .icon-close {
    opacity: 0;
    transform: rotate(-90deg) scale(0.5);
}

/* Khi menu đang mở: Hiệu ứng chuyển từ burger sang close */
body.longtien-menu-open .longtien-burger-btn .icon-burger {
    opacity: 0 !important;
    transform: rotate(90deg) scale(0.5) !important;
}

body.longtien-menu-open .longtien-burger-btn .icon-close {
    opacity: 1 !important;
    transform: rotate(0) scale(1) !important;
}

@media only screen and (max-width: 48em) {

    /*************** ADD MOBILE ONLY CSS HERE  ***************/
    .header-wrapper.stuck {
        display: block !important;
    }

    .imb_htch .box-text p {
        font-size: 24px;
    }

    .section_bg_footer {
        margin-top: 0 !important;
    }

    #top-link {
        display: inline-block !important;
        width: 40px !important;
        height: 40px !important;
    }

    #top-link .icon-angle-up {
        font-size: 24px !important;
    }

    .main_prd_col_mobi>.col-inner {
        display: flex;
        flex-direction: column;
    }

    .text_desc_prd,
    .text_desc_prd>* {
        font-size: 16px;
    }

    .main_prd_col_mobi>.col-inner>.title_prd {
        order: 1;
    }

    .main_prd_col_mobi>.col-inner>.subtitle_prd {
        order: 2;
    }

    .main_prd_col_mobi>.col-inner>.dn_gap_first {
        order: 3;
    }

    .main_prd_col_mobi>.col-inner>.stack_prd_image {
        order: 4;
    }

    .main_prd_col_mobi>.col-inner>.stack_text_main_prd {
        order: 7;
        flex-wrap: wrap;
        justify-content: center;
        row-gap: 20px;
    }

    .stack_text_prd {
        width: 50% !important;
    }

    .main_prd_col_mobi>.col-inner>.dn_gap_second {
        order: 6;
    }

    .main_prd_col_mobi>.col-inner>.btn_buynow_prd {
        order: 5;
        margin: 20px auto !important;
        font-size: 10px;
        padding: 8px 20px !important;
        border-radius: 6px !important;
    }

    .img_main_prd {
        max-width: 90px !important;
    }

    .col-inner:has(.btn_buynow_prd:hover) .stack_prd_image .img_main_prd {
        transform: scale(1.15) translateY(-13px) !important;
    }

    .title_prd,
    .title_prd>* {
        font-size: 32px;
    }

    .subtitle_prd,
    .subtitle_prd>* {
        font-size: 24px;
        font-style: normal;
    }

    .title_htch,
    .title_htch>* {
        font-size: 32px;
    }

    .section_16_9 {
        aspect-ratio: 390 / 270;
    }

    .text_arimo {
        margin-bottom: 0 !important;
    }

    .title_thuong_hieu>* {
        margin-bottom: 15px !important;
    }

    .mb-0,
    .mb-0>* {
        margin-bottom: 0 !important;
    }

    .dn_title_about,
    .dn_title_about>* {
        font-size: 32px !important;
    }

    .dn_social_footer>a.icon {
        font-size: 20px !important;
        color: #666666;
    }

    .title_footer,
    .title_footer>* {
        font-size: 16px;
    }

    .subtext_footer,
    .subtext_footer>* {
        font-size: 14px;
    }

    .dn_slider .flickity-button {
        display: block !important;
    }

    .dn_title_prd,
    .dn_title_prd>* {
        font-size: 32px;
    }

    .banner_prd_hover .banner-bg img {
        filter: unset !important;
    }

    .banner_prd_hover .btn_see_details {
        background-color: #000000 !important;
    }

    .banner_prd_hover:hover .banner-layers .img_prd_banner .img {
        transform: unset;
        transition: unset;
    }

    .banner_prd_hover .btn_see_details>span {
        color: #F0EAD8 !important;
        text-decoration: underline;
    }

    .img_prd_banner {
        max-width: 135px !important;
    }

    .btn_bg_banner>span {
        font-size: 16px;
    }

    .title_thuong_hieu,
    .title_thuong_hieu>* {
        font-size: 24px;
    }

    .tb_bg_gradient {
        height: 56px;
        background: linear-gradient(180deg, rgba(240, 234, 216, 0) 10%, #F0EAD8 80%);
    }

    .text_thuong_hieu,
    .text_thuong_hieu>* {
        font-size: 16px;
        text-align: justify !important;
    }

    #masthead::after {
        top: 15px;
        background-image: url('./assets/img/bg_after_header_mobi.png');
    }

    .longtien-menu-overlay::after {
        background-image: url(./assets/img/bg_after_header_mobi.png);
        bottom: -10%;
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        z-index: 2;
        background-position: bottom;
        background-repeat: no-repeat;
        background-size: contain;
    }

    #masthead {
        height: 70px !important;
    }

    #logo {
        max-width: 102px !important;
    }

    .dn_banner_text_home,
    .dn_banner_text_home>* {
        font-size: 28px !important;
        text-align: center;
    }

    .dn_banner_text_home.under>* {
        margin-left: 0px !important;
    }

    .stack_btn_banner_home .button span {
        font-size: 13.5px;
    }
}