@charset "UTF-8";
/*
Theme Name: Bác ái Xã hội Child
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/
@font-face { font-family: 'SVN Aptima'; src: url("assets/fonts/SVN-Aptima.woff2") format("woff2"), url("assets/fonts/SVN-Aptima.woff") format("woff"); font-weight: normal; font-style: normal; font-display: swap; }
body { font-family: "SVN Aptima" !important; }

h1, h2, h3, h4, .nav > li > a, .button { font-family: "SVN Aptima" !important; font-weight: 400 !important; }

:root { --secondary-color: #d31459; --primary-color-02: #42342B; }

.header-main { z-index: 999; }
.header-main #logo { min-height: 127px; min-width: 46px; z-index: 8; display: flex; align-items: center; justify-content: center; margin: 0; margin-top: -22px; background: #fff; border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; border-bottom: 4px solid var(--secondary-color); }
.header-main #logo img { max-height: 120px; }

.header-button .button { height: 38px; line-height: 38px; display: flex; gap: 10px; align-items: center; border-radius: 5px; }
.header-button .button span { font-size: 18px; display: flex; align-items: center; height: 34px; font-weight: 400; }
.header-button .button:hover { background-color: var(--primary-color) !important; }

.header-button-2 .button:after { content: ""; background: url("assets/images/tai-chinh-20220415051345.png") no-repeat; height: 42px; width: 42px; display: inline-block; }

.header-nav-main > li { margin: 0 18px; }
.header-nav-main > li > a { font-size: 18px; color: #fff !important; font-weight: 600 !important; }
.header-nav-main > li > a .ux-menu-icon { width: 40px; height: 42px; position: absolute; right: 0px; }
.header-nav-main > li > a:before { width: 0; }
.header-nav-main > li:hover a:before { width: 100%; }
.header-nav-main > li.has-icon-left > a { margin-right: 50px; }
.header-nav-main > li:not(.menu-item-design-full-width) .nav-dropdown { display: block; padding: 10px 0px; min-width: 273px; border-radius: 8px; border-top: 4px solid var(--secondary-color); }
.header-nav-main > li:not(.menu-item-design-full-width) .nav-dropdown > li a { padding: 10px 13px; width: auto; font-weight: 700; color: #1C1C1C; font-size: 17px; border: none; border-radius: 12px; }
.header-nav-main > li:not(.menu-item-design-full-width) .nav-dropdown > li a:hover { background: var(--fs-color-secondary); color: #fff !important; }
.header-nav-main > li:not(.menu-item-design-full-width) .nav-dropdown > li + li { border-bottom: none; }
.header-nav-main > li:not(.menu-item-design-full-width) .nav-dropdown > li.nav-dropdown-col { display: block; width: 100%; }
.header-nav-main > li:not(.menu-item-design-full-width) .nav-dropdown > li.nav-dropdown-col > a { color: #1C1C1C; font-size: 17px; text-transform: none; font-weight: 600; }
.header-nav-main > li:not(.menu-item-design-full-width) .nav-dropdown > li.nav-dropdown-col > ul { margin-top: -52px; display: none; position: absolute; left: 100%; z-index: 999999; background-color: #fff; min-width: 240px; padding: 0 12px; min-width: 200px; border-top: 4px solid var(--secondary-color); border-radius: 8px; }
.header-nav-main > li:not(.menu-item-design-full-width) .nav-dropdown > li.nav-dropdown-col > ul li > a { color: #333; font-size: 17px !important; border: none; margin: 0; }
.header-nav-main > li:not(.menu-item-design-full-width) .nav-dropdown > li.nav-dropdown-col > ul li:hover a { background: var(--fs-color-secondary); color: #fff !important; }
.header-nav-main > li:not(.menu-item-design-full-width) .nav-dropdown > li.nav-dropdown-col:hover > ul { display: block; }

body .stuck #logo img { max-height: 110px !important; }

#main, #wrapper, .banner { background: #F5F5EC !important; }

.button:not(.icon).is-outline { border-width: 1px; background: #fff; line-height: 39px; }
.button:not(.icon) .icon-search:before { content: ""; background: url("assets/images/magnifier.png") no-repeat; height: 32px; width: 32px; display: block; }

.section-title { border-bottom: none; }
.section-title b { opacity: 0; }
.section-title span.section-title-main { border-bottom: none; font-weight: 700; font-size: 28px; color: var(--secondary-color); text-transform: uppercase; }

a.lead, p.lead { font-size: 18px; }

.gallery-room .image-zoom { border: 12px solid #fff; }

.nav-pills { max-width: 1100px; margin: 0 auto; }
.nav-pills > li { margin: 0 10px 10px; }
.nav-pills > li > a { background: #FFFFFF; font-size: 20px; line-height: 39px; color: var(--primary-color-02); border: 1px solid var(--primary-color-02); border-radius: 8px; }
.nav-pills > li:hover > a, .nav-pills > li.active > a { background-color: var(--primary-color); color: #fff; border-color: var(--primary-color); }

.tab-panels { padding-top: 30px; }

.wpcf7 { background-color: #fff; padding: 30px; border-radius: 20px; margin-bottom: 30px; }
.wpcf7 .col { padding-bottom: 0; }
.wpcf7 label { font-size: 18px; color: var(--primary-color-02); }
.wpcf7 input[type=email], .wpcf7 input[type=tel], .wpcf7 input[type=text], .wpcf7 textarea { border: 1px solid var(--fs-color-primary); box-shadow: none; background-size: 100% 1px; padding-right: 35px; }
.wpcf7 .wpcf7-submit { border-radius: 30px !important; display: block; width: 100%; text-transform: none; padding-right: 60px; }
.wpcf7 .wpcf7-spinner { display: none; }
.wpcf7 form { margin-bottom: 0; }
.wpcf7 .wpcf7-not-valid-tip { font-size: 13px; }

.post-item .is-divider { display: none; }
.post-item .post-title a, .post-item .post-title { font-size: 16px; font-weight: 600; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; /* number of lines to show */ line-clamp: 2; -webkit-box-orient: vertical; text-transform: uppercase; }
.post-item .post-title.is-larger, .post-item .post-title.is-larger a { font-size: 20px; }
.post-item .from_the_blog_excerpt { font-size: 15px; }
.post-item .post-meta { font-size: 14px; }
.post-item .box-vertical { display: table; margin-bottom: 20px; }
.post-item .box-vertical .box-image, .post-item .box-vertical .box-text { display: table-cell; vertical-align: middle; padding-top: 0; padding-bottom: 0; padding-right: 0; }
.post-item button { margin: 0; display: flex; justify-content: flex-end; align-items: center; flex-direction: row; margin-right: 10px; margin-left: auto; }

.home-about .bg:before { content: ""; background: url(assets/images/pattern.png) no-repeat center center; height: 100%; position: absolute; bottom: 13px; width: 100%; z-index: 0; mix-blend-mode: multiply; }

.home-about:after { content: ""; background: url(assets/images/line.png) no-repeat center bottom; height: 54px; width: 100%; position: absolute; bottom: -22px; background-size: cover; }

.home-hinhanh-top { margin-bottom: -22px; border: 12px solid #fff; }

.home-hinhanh-top span.count-up { font-size: 40px; line-height: 1; font-weight: 700; }

.home-hinhanh { margin-top: -35px; }

.du-an-item .gallery-col.col { flex-basis: 100% !important; max-width: 100% !important; }

.row-step { counter-reset: step-item; }
.row-step .col { counter-increment: step-item; }
.row-step .col:after { content: counters(step-item,".",decimal-leading-zero); position: absolute; top: -27px; height: 69px; width: 69px; line-height: 69px; background-color: var(--secondary-color); color: #fff; text-align: center; left: 50%; transform: translateX(-50%); border-radius: 100px; font-size: 20px; font-weight: 700; box-shadow: 0px 3px 15px 0px rgba(18, 28, 82, 0.1); }
.row-step .col-inner { text-align: center; background-color: #FFFFFF; padding: 50px 30px 50px 30px; box-shadow: 0px 3px 30px 0px rgba(18, 28, 82, 0.1); border-style: solid; border-width: 0px 0px 0px 0px; border-radius: 10px 10px 10px 10px; overflow: hidden; }
.row-step .col-inner:before { position: absolute; content: ""; height: 0; width: 100%; background-size: 101% 101%; -webkit-transition: all .6s ease; transition: all .6s ease; background-color: var(--secondary-color); bottom: -101%; left: 0; z-index: 0; }
.row-step .col-inner .icon-box { z-index: 2; position: relative; }
.row-step .col-inner svg { color: var(--secondary-color); }
.row-step .col:nth-child(2):after { color: var(--secondary-color); background-color: #fff; }
.row-step .col:nth-child(2).col-inner:before { bottom: 0; }
.row-step .col:nth-child(2) .featured-box h3, .row-step .col:nth-child(2) .featured-box p, .row-step .col:hover .featured-box h3, .row-step .col:hover .featured-box p { color: #fff; transition: all .6s ease; }
.row-step .col:nth-child(2) svg, .row-step .col:hover svg { color: #fff; transition: all .6s ease; }
.row-step .col:nth-child(2) .col-inner:before, .row-step .col:hover .col-inner:before { bottom: 0; height: 100%; }
.row-step h3 { font-weight: 700; font-size: 28px; }

.blog-wrapper { padding-top: 0; }

.blog-single .entry-header h1.entry-title { color: var(--primary-color); }

.post-sidebar span.widget-title { font-size: 24px; color: #fff; background-color: var(--primary-color); padding: 11px 27px 11px 28px; display: block; margin-bottom: 15px; text-transform: none; }
.post-sidebar .is-divider { display: none; }
.post-sidebar .widget { border: 0.5px solid #9C9C9C; }
.post-sidebar .widget_new_post { padding: 20px 20px 0px 20px !important; }

.entry-content { padding-top: 0; }
.entry-content .lead { font-size: 20px; }
.entry-content h2 { color: var(--primary-color); font-size: 24px; }
.entry-content h3 { font-size: 20px; }

#widget-comments-container.widget-comments-container { margin: 0 !important; }

body #widget-comments-container .wpdiscuz-widgets-content .widget-title { background-color: var(--fs-color-primary) !important; margin: 0 !important; }

#widget-comments-container .wpdiscuz-widgets-content { border: none !important; padding: 0 !important; }

#widget-comments-container.widget-comments-container > hr { display: none; }

#widget-comments-container .wpd_widgets_items_wrapper, .post-sidebar .widget_custom_html .textwidget { padding: 15px; }

.off-canvas-right .mfp-content, .off-canvas-left .mfp-content { background-color: #fff; }

.back-to-top { border: none !important; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); height: 50px; width: 50px; bottom: 60px; background: var(--primary-color) !important; color: #fff !important; font-size: 19px; line-height: 47px !important; }

.footer-wrapper { z-index: 9; }

.copyright-footer { letter-spacing: 0.05em; color: #fff; padding-top: 17px; }

.absolute-footer { font-size: 16px; height: 55px; border: none; padding: 0; }

.footer-secondary { padding: 0; padding-top: 17px; }
.footer-secondary ul { opacity: 1; border-bottom: none; margin: 0; }
.footer-secondary ul li { list-style: none; display: inline-block; margin-left: 10px; }
.footer-secondary ul li > a { font-size: 16px; color: #fff; }
.footer-secondary ul li > a i { margin-right: 5px; }

.footer-1 { border-top: none; font-size: 16px; padding-top: 60px; }
.footer-1 .logo-footer { max-height: 160px; display: block; margin: 0 auto; }
.footer-1 .contact { display: flex; gap: 5px; }
.footer-1 .contact svg { min-width: 27px; }
.footer-1 span.widget-title { font-size: 16px; display: block; margin-bottom: 15px; }
.footer-1 .is-divider { display: none; }
.footer-1 ul li a { position: relative; }
.footer-1 ul li a:before { content: ""; position: absolute; transition: .5s; left: 0; bottom: -1px; width: 0; height: 1px; background: #fff; }
.footer-1 ul li a:hover:before { width: 100%; }

@media screen and (min-width: 960px) { .footer-1 .row > .col { flex-basis: 18%; max-width: 18%; }
  .footer-1 .row > .col:nth-child(1) { flex-basis: 10%; max-width: 10%; }
  .footer-1 .row > .col:nth-child(2) { flex-basis: 36%; max-width: 36%; } }
.white-popup-block { background: #FFF; padding: 0px 0px; text-align: left; max-width: 800px; margin: 40px auto; position: relative; border-radius: 15px; overflow: hidden; }
.white-popup-block h3 { font-weight: 700; }
.white-popup-block p { margin-bottom: 5px; }

.icon-popup-close { content: ""; background: url(assets/images/popup-close.png) no-repeat center center; height: 29px; width: 29px; display: block; }

.white-popup-block .modal-close { position: absolute; right: 10px; top: 10px; z-index: 9; }

.modal-body { padding: 20px; color: #000; font-size: 16px; }

iframe { border: none; }

@media screen and (max-width: 821px) { .header-main { background-color: var(--primary-color); }
  .header-main #logo { min-height: 100px; width: 80px !important; min-width: auto; margin-top: -40px; }
  .mobile-nav .has-icon a { height: 36px; width: 30px; color: #fff !important; display: flex; justify-content: center; align-items: center; padding: 0; flex-direction: column; border-radius: 100px; }
  .mobile-nav .has-icon a svg { max-width: 20px; }
  .mobile-nav .header-language-dropdown a { border-radius: 2px; height: 25px; padding: 0; width: 25px; text-align: center; display: inline-block; background: var(--primary-color); color: #fff; text-transform: uppercase; }
  .off-canvas .nav-vertical > li { border-top: none !important; background-color: transparent !important; }
  .off-canvas .nav-vertical > li > a { padding-top: 10px; padding-bottom: 10px; color: #111; height: auto; font-size: 16px; text-transform: none; text-shadow: none; font-weight: 400; }
  .off-canvas .nav-vertical > li > ul > li a { color: #111; }
  .off-canvas .nav-vertical > li > ul > li li { position: relative; margin-left: 20px !important; }
  .off-canvas .nav-vertical > li > ul > li li:before { content: ""; height: 5px; width: 5px; display: inline-block; background-color: #111; position: absolute; top: 50%; transform: translateY(-50%); }
  .absolute-footer { height: auto; }
  .absolute-footer #logo { margin: -50px auto 0; }
  .absolute-footer .copyright-footer { padding-top: 0; padding-bottom: 15px; } }
@media screen and (max-width: 512px) { .header-button-1 .button { background-color: transparent !important; border: none; }
  .header-button-1 .button span { font-size: 0; }
  .section-title span.section-title-main { font-size: 20px; }
  .nav-line-bottom > li > a { min-width: 160px; }
  .nav-pills { display: block !important; white-space: nowrap; padding-left: 0px; overflow-x: scroll; }
  .nav-pills > li { list-style: none; display: inline-block; float: left; margin: 0; margin-right: 5px; position: relative; }
  .nav-pills > li > a { font-size: 16px; }
  .home-banner:after { z-index: 9; margin-bottom: -5px; }
  .row-about { margin-top: -37px; }
  .home-about .about-title { font-size: 20px; padding-top: 43px; padding-left: 35px; }
  .home-about .about-title strong { font-size: 50px; bottom: -11px; margin-left: -7px; }
  .home-about p strong { font-size: 18px; }
  .home-about p, a.lead, p.lead { font-size: 15px; line-height: 120%; }
  .title, .sub-title { font-size: 40px; }
  .gallery-room { height: auto !important; }
  .gallery-room .gallery-col { height: 300px !important; position: relative !important; left: 0; top: 0 !important; }
  .mobile-slide .flickity-prev-next-button { opacity: 1 !important; } }