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

/*************** ADD CUSTOM CSS HERE.   ***************/
/*-- site general content css --*/
@font-face {
    font-family: 'NVN Cocogoose Vintage';
    src: url('assets/webfonts/NVN-Cocogoose-Vintage.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
    size-adjust: 72%;
}

@font-face {
    font-family: '1FTV VIP Geofanny';
    src: url('assets/webfonts/1FTV-VIP-Geofanny.otf');
}

:root {
    --site-primary-color: #85060B;
    --font-primary-color: #2B2B2B;
    --font-second-color: #FFF;
}

html, body,
.absolute-footer {
    font-size: 18px;
}

.content-title h2,
.content-title h3 {
    font-size: 45px;
    line-height: 145%;
}

.content-subtitle h3 {
    font-size: 50px;
    line-height: 120%;
}
/* Menu phải: nút Đặt bàn sát lề phải, thẳng hàng với dòng "Đặt bàn" ở top bar */
#header .header-nav-main.nav-right > li.html_top_right_text { margin: 0 !important; padding: 0 !important; width: 0; }
#header .header-nav-main.nav-right > li.header-button-1 { margin-right: 0 !important; }
/* Tiêu đề font NVN Cocogoose: mọi tiêu đề mục cùng font & cỡ với "LẨU CUA KINH BẮC GẦN BẠN" */
.content-title h2, .content-title h3,
#main .section-content h2:not(.lckb-tabs-heading),
.order-content-wrapper h2 {
    font-family: 'NVN Cocogoose Vintage', Montserrat, sans-serif;
    font-size: 38px;
    font-weight: normal;
    line-height: 1.7;
}
/* H1 banner các trang */
.banner-content-wrapper h1 { font-size: 44px !important; line-height: 1.95 !important; margin-bottom: 10px !important; }
.home .banner-content-wrapper h1 { font-size: 46px !important; }
@media (max-width: 849px) {
    .content-title h2, .content-title h3, #main .section-content h2:not(.lckb-tabs-heading), .order-content-wrapper h2 { font-size: 32px; }
    .banner-content-wrapper h1, .home .banner-content-wrapper h1 { font-size: 36px !important; }
}
@media (max-width: 549px) {
    .content-title h2, .content-title h3, #main .section-content h2:not(.lckb-tabs-heading), .order-content-wrapper h2 { font-size: 26px; }
    .banner-content-wrapper h1, .home .banner-content-wrapper h1 { font-size: 28px !important; }
}
/* Tiêu đề phụ phía trên (Câu chuyện, Hành trình, Tính cách...) cùng font */
.content-subtitle h3 {
    font-family: 'NVN Cocogoose Vintage', Montserrat, sans-serif;
    font-size: 28px;
    font-weight: normal;
    line-height: 1.7;
    margin-bottom: 0;
}
@media (max-width: 849px) { .content-subtitle h3 { font-size: 24px; } }
@media (max-width: 549px) { .content-subtitle h3 { font-size: 20px; } }
/* "CHÚNG TÔI THEO ĐUỔI" hiển thị 1 dòng trên desktop */
@media (min-width: 850px) { #main .about-values .content-title h2 { font-size: 32px; } }
/* Cam kết / Giá trị: đường dọc nối liền các vòng tròn */
.commit-content-right .icon-box { position: relative; align-items: flex-start !important; }
.commit-content-right .icon-box:not(:last-child) .icon-box-img::after { display: none; }
.commit-content-right .icon-box:not(:last-child)::before {
    content: '';
    position: absolute;
    left: 35px;
    top: 72px;
    bottom: -40px;
    width: 2px;
    background: #B98948;
}
.commit-content-right .icon-box .icon-box-text { padding-top: 10px; }
/* end cocogoose */
/*-- end site general content css --*/


/*-- site contact form 7 content css --*/
.wpcf7-form .col {
    padding-bottom: 0;
}

.wpcf7-form .notice,
.wpcf7-text,
.wpcf7-textarea {
    margin-bottom: 24px;
}

.wpcf7-text,
.wpcf7-date,
.wpcf7-select,
.wpcf7-textarea {
    padding: 10px !important;
    height: auto !important;
    border-radius: 10px !important;
    border-color: #c2c9cf !important;
    box-shadow: none !important;
}

.wpcf7-submit {
    padding: 8px 24px !important;
    min-width: 230px !important;
    border-radius: 99px !important;
}
/*-- end site contact form 7 content css --*/

/*-- site home page content css --*/
.banner-content-wrapper {
    position: relative;
    z-index: 2;
    padding: 0 !important;
    overflow: visible !important;
}

.banner-content-wrapper .text-box {
    padding-left: 15px;
}

/* .banner-content-wrapper .banner-bg {
    min-height: 100vh;
    -webkit-mask-image: url("assets/images/banner-mask.png");
    mask-image: url("assets/images/banner-mask.png");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center -100px;
    mask-position: center -100px;
    -webkit-mask-size: cover;
    mask-size: cover;
} */

.banner-content-wrapper .banner-bg .bg {
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
}

.banner-content-wrapper .banner-bg .overlay {
    width: 100%;
    height: 100%;
}

.banner-content-wrapper .banner-layers {
    position: relative;
    z-index: 3;
}

.banner-content-wrapper h1 {
    margin: 0 0 22px;
    font-size: 64px;
    line-height: 1.4;
    font-weight: 700;
    text-transform: none !important;
}

.banner-content-wrapper .text-box p {
    margin: 0;
    font-size: 18px;
    line-height: 1.6;
}

.img-banner-right {
    right: 0;
    bottom: 15%;
    position: absolute;
}

/* =========================================================
   TABLET
   ========================================================= */
@media (max-width: 849px) {
    .banner-content-wrapper .banner,
    .banner-content-wrapper .banner-bg {
        min-height: 540px;
    }

    .banner-content-wrapper .text-box {
        width: 70% !important;
        max-width: 560px;
    }

    .banner-content-wrapper h1 {
        font-size: 48px;
    }

    .banner-content-wrapper .text-box p {
        font-size: 16px;
    }
}

/* =========================================================
   MOBILE
   ========================================================= */
@media (max-width: 549px) {
    .banner-content-wrapper .banner,
    .banner-content-wrapper .banner-bg {
        min-height: 440px;
    }

    .banner-content-wrapper .banner-bg {
        -webkit-mask-size: 100% 100%;
        mask-size: 100% 100%;

        -webkit-mask-position: center;
        mask-position: center;
    }

    .banner-content-wrapper .text-box {
        width: 86% !important;
        max-width: none;
    }

    .banner-content-wrapper h1 {
        margin-bottom: 16px;
        font-size: 38px;
        line-height: 1.1;
    }

    .banner-content-wrapper .text-box p {
        font-size: 15px;
        line-height: 1.5;
    }
}

.banner-content {
    margin-top: 56px;
}

.banner-content .col {
    padding-bottom: 0;
}

.banner-content h3 {
    font-size: 20px;
    font-weight: 700;
    line-height: 120%;
}

.about-content-right img {
    border-radius: 20px;
}

.order-content-wrapper h2 {
    font-size: 76px;
    line-height: 120%;
}

.order-content-wrapper .button {
    margin-top: 40px;
    margin-bottom: 0;
    min-width: 320px !important;
}
/*-- end site home page content css --*/

/*-- site menu page content css --*/
.menu-info-content .col {
    padding-bottom: 0;
}

.menu-info-content.row-divided > .col + .col {
    border-left: 1px solid var(--font-primary-color);
}
/*-- end site menu page content css --*/

/*-- site story page content css --*/
.banner-story-wrapper .banner-title,
.banner-story-wrapper .description {
    margin-top: 36px;
}

.banner-story-wrapper .banner-subtitle p {
    font-size: 30px;
    line-height: 130%;
}

.origins-number-wrapper {
    font-size: 30px;
    font-weight: 700;
    line-height: 130%;
}

.origins-number-wrapper p {
    margin-bottom: 24px;
    display: flex;
    align-items: center;
}

.origins-number-wrapper span {
    margin-right: 24px;
    font-size: 50px;
    line-height: 120%;
}

.origins-content .img-origins img {
    border-radius: 10px;
}

.origins-content .icon-box {
    margin-top: -65px;
}

.value-content-wrapper .col {
    padding-bottom: 0;
}

.space-content-left .button {
    min-width: 360px;
}
/*-- end site story page content css --*/

/*-- site contact page contact css --*/
.about-content-right .col-inner > .img:not(:last-child), .col > .img:not(:last-child) {
    margin-bottom: 23px !important;
}

.img-about-1 img,
.img-about-2 img,
.img-about-3 img {
    object-fit: cover;
}

.img-about-1 img {
    height: 400px;
}

.img-about-2 img,
.img-about-3 img {
    height: 189px;
}

.ingredient-gallery .box-image,
.ingredient-gallery img {
    border-radius: 16px;
}

.ingredient-gallery img {
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

.commit-content-right .icon-box {
    align-items: center;
}

.commit-content-right .icon-box:not(:last-child) {
    margin-bottom: 40px;
}

.commit-content-right .icon-box-img {
    height: 72px;
    border-radius: 50%;
    border: solid 3px #F47F83;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.commit-content-right .icon-box:not(:last-child) .icon-box-img::after {
    content: '';
    left: 0;
    right: 0;
    bottom: -66%;
    margin: auto;
    width: 1px;
    height: 43px;
    background: var(--font-primary-color);
    position: absolute;
}

.commit-content-right .icon-box-img img {
    padding-top: 0;
    width: 34px;
    height: 34px;
    object-fit: contain;
}

.commit-content-right .icon-box h3,
.commit-content-right .icon-box p {
    font-size: 18px;
    line-height: 130%;
}

.commit-content-right .icon-box h3 {
    margin-bottom: 10px;
}
/*-- end site contact page contact css --*/

/*-- site system page content css --*/
.system-content h3 {
    font-size: 20px;
    line-height: 130%;
}

.system-content-wrapper.row-divided > .col + .col {
    border-left: 1px solid var(--font-primary-color);
}

.system-content-wrapper .col,
.contact-info-content .col {
    padding-bottom: 0;
}

.contact-info-content .col-inner .img,
.contact-info-content .col-inner .img-inner,
.contact-info-content .col-inner img {
    height: 100%;
    
}

.contact-info-content .col-inner img {
    border-radius: 10px;
    object-fit: cover;
}

.contact-info-content .btn-location {
    margin-top: 24px;
    margin-right: 0;
    margin-bottom: 0;
}
/*-- end site system page content css --*/

/*-- site contact page content css --*/
.contact-info-wrapper,
.contact-content-left,
.contact-content-right {
    position: relative;
    z-index: 2;
}

.contact-content-left .icon-box,
.contact-info-content .icon-box {
    align-items: center;
}

.contact-content-left .icon-box:not(:last-child) {
    margin-bottom: 24px;
}

.contact-content-left .icon-box img,
.contact-info-content .icon-box img {
    padding-top: 0;
}

.contact-content-socials .col-inner {
    display: flex;
    align-items: center;
}

.contact-content-socials .col-inner p,
.contact-content-socials .social-icons a {
    margin-bottom: 0;
}

.contact-content-socials .social-icons a {
    margin-left: 20px;
    margin-right: 0;
    border: none;
    color: var(--site-primary-color);
    background: var(--font-second-color);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.contact-content-left img {
    border-radius: 20px;
}

.contact-info-content .number p,
.contact-info-content .description p {
    margin-bottom: 10px;
}

.contact-info-content .number p {
    font-size: 30px;
    line-height: 130%;
    display: flex;
    align-items: center;
}

.contact-info-content .number p strong {
    margin-right: 10px;
    font-size: 40px;
    line-height: 140%;
}

.img-info {
    width: 453px !important;
    position: absolute;
    z-index: -1;
}

.img-info img {
    opacity: 0.35;
    filter: brightness(0) saturate(100%) invert(19%) sepia(96%) saturate(3547%)
        hue-rotate(348deg) brightness(102%) contrast(99%);
}

.img-info-1 {
    top: -60px;
    left: 0;
}

.img-info-2 {
    right: 0;
    bottom : -60px;
}
/*-- end site contact page content css --*/

#dat-ban {
  max-height: 85vh;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Mobile: dùng gần hết màn hình */
@media (max-width: 549px) {
  #dat-ban {
    max-height: 90dvh;
  }
}

/*-- site footer content css --*/
.footer-content-title {
    margin-bottom: 10px;
    font-size: 24px;
    line-height: 130%;
    font-weight: 700;
}

.footer-content-title p {
    margin-bottom: 0;
}

.footer-content li {
    margin-left: 0 !important;
    list-style: none;
}

.footer-content .social-icons a {
    width: 40px;
    height: 40px;
    border: none;
    color: var(--site-primary-color);
    background: var(--font-second-color);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.footer-content .social-icons a:not(:last-child) {
    margin-right: 20px;
}

.absolute-footer {
    padding: 0;
}

.footer-primary {
    padding-top: 10px;
    width: 100%;
    border-top: solid 1px var(--font-second-color);
    color: var(--font-second-color);
}
/*-- end site footer content css --*/

@media only screen and (max-width: 48em) {
/*************** ADD MOBILE ONLY CSS HERE  ***************/


}