/* ==========================================================================
   LAIFARM Ba Vì - style.css
   CSS nền và component dùng chung cho toàn site.
   Style riêng của từng khối nằm ở pages.css.

   1. Biến          5. Header & menu     9.  Banner, section
   2. Reset         6. Lưới (row/col)    10. Slider, lightbox
   3. Typography    7. Button            11. Form
   4. Tiện ích      8. Box, ảnh, icon    12. Footer, tuỳ biến site
   ========================================================================== */

/* 1. Biến ---------------------------------------------------------------- */
:root {
  --primary: #b1917e;
  --secondary: #78826f;
  --text: #4f4e3c;
  --bg: #ede8e1;
  --font-body: "Merriweather", sans-serif;
  --font-heading: "Piazzolla", sans-serif;
  --container: 1140px;
}

/* 2. Reset --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { background-color: var(--text); overflow-x: hidden; -webkit-tap-highlight-color: transparent; }
body {
  margin: 0;
  width: 100%;
  font-family: var(--font-body);
  font-size: 100%;
  line-height: 1.6;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { max-width: 100%; height: auto; display: inline-block; vertical-align: middle; border: 0; transition: opacity 1s; }
iframe { max-width: 100%; }
figure { margin: 0; }
b, strong { font-weight: bolder; }
ins { text-decoration: none; }
p:empty { display: none; }
fieldset { border: 0; padding: 0; margin: 0; }
[hidden] { display: none !important; }

a { color: var(--primary); text-decoration: none; }
a:hover { color: var(--text); }
a:focus, button:focus, input:focus { outline: none; }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
a.plain { color: currentColor; transition: color .3s, opacity .3s, transform .3s; }

/* 3. Typography ---------------------------------------------------------- */
p, ul, ol, form, figure, blockquote, dl, pre { margin-top: 0; margin-bottom: 1.3em; }
form p { margin-bottom: .5em; }
ul { list-style: disc; }
ol { list-style: decimal; }
ol, ul { padding: 0; }
ul ul, ul ol, ol ol, ol ul { margin: 1.5em 0 1.5em 3em; }
li { margin-bottom: .6em; }
.col-inner ul li, .col-inner ol li, .entry-content ul li, .entry-content ol li { margin-left: 1.3em; }
.col-inner ul li.tab { margin-left: 0; }

h1, h2, h3, h4, h5, h6, .heading-font {
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--text);
}
h1, h2, h3, h4, h5, h6 { width: 100%; margin-top: 0; margin-bottom: .5em; text-rendering: optimizeSpeed; }
h1 { font-size: 1.7em; line-height: 1.3; }
h2 { font-size: 1.6em; line-height: 1.3; }
h3 { font-size: 1.25em; }
h4 { font-size: 1.125em; }
h5 { font-size: 1em; }
h6 { font-size: .85em; opacity: .8; }
@media (max-width: 549px) {
  h1 { font-size: 1.4em; }
  h2 { font-size: 1.2em; }
  h3 { font-size: 1em; }
}

.alt-font { font-family: var(--font-heading); font-weight: 300 !important; }
.uppercase, h6, th { line-height: 1.05; letter-spacing: .05em; text-transform: uppercase; }
.uppercase { line-height: 1.2; }
.lowercase { text-transform: none !important; }
.is-larger { font-size: 1.3em; }
.is-large { font-size: 1.15em; }
.is-small, .is-small.button { font-size: .8em; }
.is-xsmall { font-size: .7em; }
@media (max-width: 549px) {
  .is-larger { font-size: 1.2em; }
  .is-large { font-size: 1em; }
}

.dark, .dark p, .dark td { color: #f1f1f1; }
.dark label, .dark h1, .dark h2, .dark h3, .dark h4, .dark h5, .dark h6 { color: #fff; }
.dark a { color: currentColor; }
.dark a:hover { color: #fff; }

table { width: 100%; margin-bottom: 1em; border-color: #ececec; border-spacing: 0; }
th, td { padding: .5em; text-align: left; border-bottom: 1px solid #ececec; line-height: 1.3; font-size: .9em; }
th:first-child, td:first-child { padding-left: 0; }
th:last-child, td:last-child { padding-right: 0; }

/* 4. Tiện ích ------------------------------------------------------------ */
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-center > div, .text-center > div > div, .text-center .is-divider { margin-left: auto; margin-right: auto; }
.text-left .is-divider { margin-right: auto; margin-left: 0; }
.relative { position: relative !important; }
.fill { position: absolute; top: 0; left: 0; right: 0; bottom: 0; height: 100%; padding: 0 !important; margin: 0 !important; }
.mb-0 { margin-bottom: 0 !important; }
.pb-0 { padding-bottom: 0 !important; }
.last-reset *:last-child { margin-bottom: 0; }
.last-reset .text > p:last-child { margin-bottom: 1.3em; } /* giữ khoảng cách giữa các icon-box như bản gốc */
.clearfix::after, .container::after, .row::after { content: ""; display: table; clear: both; }
.gap-element { display: block; height: auto; }
@media (min-width: 850px) { .aligncenter { clear: both; display: block; margin: 0 auto; } }
.screen-reader-text { clip: rect(1px, 1px, 1px, 1px); position: absolute !important; height: 1px; width: 1px; overflow: hidden; }
.screen-reader-text:focus {
  clip: auto !important; display: block; width: auto; height: auto; top: 5px; left: 5px; z-index: 100000;
  padding: 15px 23px 14px; font-size: .875rem; font-weight: bold; color: #21759b; background: #f1f1f1; border-radius: 3px;
}
@media (max-width: 549px) { .hide-for-small { display: none !important; } }
@media (min-width: 550px) { .show-for-small { display: none !important; } }
@media (max-width: 849px) { .hide-for-medium { display: none !important; } }
@media (min-width: 850px) { .show-for-medium { display: none !important; } }

/* Hiệu ứng xuất hiện khi cuộn (main.js thêm data-animated) */
.js [data-animate] { opacity: 0; transition: filter 1.3s, transform 1.6s, opacity .7s ease-in; will-change: transform, opacity; }
.js [data-animate="fadeInLeft"] { transform: translate3d(-70px, 0, 0); }
.js [data-animate="fadeInRight"] { transform: translate3d(70px, 0, 0); }
.js [data-animate="fadeInUp"], .js [data-animate="bounceInUp"] { transform: translate3d(0, 70px, 0); }
.js [data-animate="fadeInDown"] { transform: translate3d(0, -70px, 0); }
.js [data-animate="blurIn"] { filter: blur(15px); }
.js [data-animate="none"] { opacity: 1; }
.js [data-animate][data-animated="true"] { opacity: 1; transform: none; filter: none; }

/* Màn hình tải trang */
.page-loader {
  position: fixed; inset: 0; z-index: 9997; background: #fff; opacity: 0; pointer-events: none;
  display: flex; align-items: center; justify-content: center;
  transition: opacity .3s .3s;
}
.loading-site .page-loader { opacity: .98; animation: loaderOut .3s 6s forwards; }
.page-loader-inner { text-align: center; }
.page-loader-logo { max-width: 90px; margin: 0 auto; padding-bottom: 30px; line-height: 1; }
.page-loader-logo a { color: var(--primary); font-size: 32px; font-weight: bolder; text-transform: uppercase; }
.loading-spin {
  width: 40px; height: 40px; margin: 0 auto; border-radius: 50%;
  border: 3px solid rgba(0, 0, 0, .1); border-left-color: var(--primary);
  animation: spin .6s infinite linear;
}
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes loaderOut { to { opacity: 0; visibility: hidden; } }

/* 5. Header & menu ------------------------------------------------------- */
#wrapper, #main { position: relative; background-color: var(--bg); }

.container, .row { width: 100%; max-width: var(--container); margin-left: auto; margin-right: auto; }
.container { padding-left: 15px; padding-right: 15px; }

.header, .header-wrapper { position: relative; z-index: 30; width: 100%; transition: background-color .3s, opacity .3s; }
.header.has-transparent { position: absolute; }
.header.transparent .header-wrapper { background-color: rgba(120, 130, 111, .9); }
.header.transparent .header-bg-color { background-color: transparent; }

.header-main { position: relative; z-index: 10; height: 110px; }
.header-bottom { position: relative; z-index: 9; display: flex; align-items: center; min-height: 45px; }
.header-bg-color { background-color: var(--secondary); }

.flex-row { display: flex; flex-flow: row nowrap; align-items: center; justify-content: space-between; width: 100%; }
.header .flex-row { height: 100%; }
.flex-col { max-height: 100%; }
.flex-center { margin: 0 auto; }
.flex-grow { flex: 1; }

/* Logo chữ ở giữa */
.logo { width: 90px; line-height: 1; margin: 0; }
.logo a { display: block; margin: 0; font-size: 32px; font-weight: bolder; color: #fff; text-transform: uppercase; }
.logo-center .flex-left { order: 1; flex: 1 1 0; }
.logo-center .logo { order: 2; margin: 0 30px; text-align: center; }
.logo-center .flex-right { order: 3; flex: 1 1 0; }
@media (max-width: 849px) { .logo-center .logo { margin: 0 15px; } }

/* Thanh menu */
.nav { position: relative; display: flex; flex-flow: row wrap; align-items: center; width: 100%; margin: 0; padding: 0; }
.nav > li { position: relative; display: inline-block; margin: 0 7px; padding: 0; list-style: none; transition: background-color .3s; }
.nav > li:first-child { margin-left: 0; }
.nav > li:last-child { margin-right: 0; }
.nav > li > a {
  position: relative; display: inline-flex; flex-wrap: wrap; align-items: center;
  padding: 10px 0; font-family: var(--font-heading); font-size: .8em; font-weight: 600;
  color: rgba(102, 102, 102, .85); transition: all .2s;
}
.nav > li > a > i + span { margin-left: 5px; }
.nav-center { justify-content: center; }
.nav-right { justify-content: flex-end; }
.nav-uppercase > li > a { letter-spacing: .02em; text-transform: uppercase; }

.nav-dark .nav > li > a { color: rgba(255, 255, 255, .8); }
.nav-dark .nav > li > a:hover, .nav-dark .nav > li.active > a { color: #fff; }
.header-contact > li > a { line-height: 16px; }
.header-contact i { width: 16.3px; height: 19.2px; font-size: 16px; }

.header-bottom-nav > li { margin: 0 13px; }
.header-bottom-nav > li > a { line-height: 15px; }
.nav-line-bottom > li > a::before {
  content: ""; position: absolute; bottom: 0; left: 50%; width: 100%; height: 3px;
  background-color: var(--primary); opacity: 0; transform: translateX(-50%); transition: all .3s;
}
.nav-line-bottom > li:hover > a::before, .nav-line-bottom > li.active > a::before { opacity: 1; }
.nav:hover > li:not(:hover) > a::before { opacity: 0; }
.lang-menu > a::before { opacity: 0 !important; }
.lang-flag { width: 18px; height: auto; }

/* Dropdown */
.nav-dropdown {
  position: absolute; left: -99999px; z-index: 9; display: table; min-width: 260px; margin: 0; padding: 20px 0;
  font-size: 94%; text-align: left; color: #777; background: #fff; border-radius: 5px; opacity: 0;
  box-shadow: 1px 1px 15px rgba(0, 0, 0, .15); transition: opacity .25s;
}
.nav-dropdown li { display: block; margin: 0; list-style: none; }
.nav-dropdown > li > a { display: block; padding: 10px 20px; line-height: 1.3; color: rgba(102, 102, 102, .85); transition: all .2s; }
.nav-dropdown > li > a:hover { color: rgba(17, 17, 17, .85); background-color: rgba(0, 0, 0, .03); }
.nav-dropdown li.active > a { color: rgba(17, 17, 17, .85); }
li.has-dropdown:hover > .nav-dropdown, li.has-dropdown:focus-within > .nav-dropdown { left: -15px; opacity: 1; }
.has-dropdown .icon-angle-down { width: 10.5px; height: 16px; margin-left: .2em; font-size: 16px; opacity: .6; }

/* Header dính khi cuộn */
.header-wrapper.stuck { position: fixed; top: 0; left: 0; right: 0; margin: 0 auto; box-shadow: 1px 1px 10px rgba(0, 0, 0, .15); animation: stuckMoveDown .6s; }
.stuck .hide-for-sticky { display: none; }
@keyframes stuckMoveDown { from { transform: translateY(-100%); } to { transform: translateY(0); } }
@media (max-width: 849px) { .stuck .hide-for-sticky { display: block; } .stuck .shade { display: none; } .stuck .header-main { height: 60px; } }
@media (max-width: 549px) { .header-main { height: 60px; } }

/* Menu mobile */
.icon-menu { font-size: 1.9em; }
.mobile-sidebar {
  position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center;
  padding: 60px 20px; overflow-y: auto; color: #fff; background-color: var(--secondary);
  opacity: 0; transition: opacity .3s;
}
.mobile-sidebar.is-open { opacity: 1; }
.mobile-sidebar .sidebar-menu { width: 100%; max-width: 420px; margin: auto; }
.mobile-close { position: fixed; top: 10px; right: 15px; padding: 0 10px; font-size: 32px; line-height: 1.2; color: #fff; background: none; border: 0; cursor: pointer; }
.nav-vertical { flex-flow: column; }
.nav-vertical > li { display: flex; flex-flow: row wrap; align-items: center; justify-content: center; width: 100%; margin: 0; }
.nav-sidebar > li > a { font-size: 1.15em; color: rgba(255, 255, 255, .9); }
.nav-sidebar > li > a:hover, .nav-sidebar > li.active > a { color: #fff; }
.nav-sidebar .children { display: none; width: 100%; margin: 0 0 1em; padding: 0; }
.nav-sidebar .is-expanded > .children { display: block; }
.nav-sidebar .children li { margin: 0; list-style: none; }
.nav-sidebar .children a { display: block; padding: 6px 0; font-size: .9em; color: rgba(255, 255, 255, .85); }
.sub-toggle { margin-left: 8px; padding: 0 8px; font-size: 16px; color: #fff; background: none; border: 0; cursor: pointer; transition: transform .2s; }
.is-expanded > .sub-toggle { transform: rotate(180deg); }
.nav-anim > li { opacity: 0; transform: translateY(-15px); transition: transform .3s, opacity .3s; }
.is-open .nav-anim > li { opacity: 1; transform: none; }
.nav-anim > li:nth-child(2) { transition-delay: .05s; }
.nav-anim > li:nth-child(3) { transition-delay: .1s; }
.nav-anim > li:nth-child(4) { transition-delay: .15s; }
.nav-anim > li:nth-child(5) { transition-delay: .2s; }
.nav-anim > li:nth-child(n+6) { transition-delay: .25s; }
body.menu-open { overflow: hidden; }
@media (max-width: 849px) { body { overflow-x: hidden; } }

/* 6. Lưới ---------------------------------------------------------------- */
.row { display: flex; flex-flow: row wrap; }
.row > div:not(.col):not([class^="col-"]) { width: 100% !important; }
.row .row:not(.row-collapse), .container .row:not(.row-collapse) { width: auto; margin-left: -15px; margin-right: -15px; padding: 0; }
.row .container { padding-left: 0; padding-right: 0; }
.row-full-width { max-width: 100% !important; }
.row.row-collapse { max-width: 1110px; padding: 0; }
.row-collapse > .col, .row-collapse .slider__track > .col { padding: 0 !important; }
.row.row-large { max-width: 1170px; }
.row.row-grid { display: block; }
.row.row-grid > .col { float: left; }
.slider-wrapper + .row:not(.row-collapse),
.banner-grid-wrapper + .row:not(.row-collapse),
.banner + .row:not(.row-collapse),
.section + .row:not(.row-collapse) { margin-top: 30px; }

.row .row-xsmall:not(.row-collapse), .container .row-xsmall:not(.row-collapse) { margin-left: -2px; margin-right: -2px; margin-bottom: 0; }
.row-xsmall > .col { padding: 0 2px 3px; margin-bottom: 0; }
@media (min-width: 850px) {
  .row-large { padding-left: 0; padding-right: 0; }
  .row .row-large:not(.row-collapse), .container .row-large:not(.row-collapse) { margin-left: -30px; margin-right: -30px; margin-bottom: 0; }
  .row-large > .col { padding: 0 30px 30px; margin-bottom: 0; }
}

.col { position: relative; width: 100%; margin: 0; padding: 0 15px 30px; }
.col-inner { position: relative; flex: 1 0 auto; width: 100%; margin-left: auto; margin-right: auto; background-position: 50% 50%; background-size: cover; background-repeat: no-repeat; }
@media (min-width: 850px) {
  .col:first-child .col-inner { margin-left: auto; margin-right: 0; }
  .col + .col .col-inner { margin-right: auto; margin-left: 0; }
}
.align-equal > .col { display: flex; }
.align-middle { align-items: center !important; align-self: center !important; vertical-align: middle !important; }
.align-center { justify-content: center !important; }
@media (max-width: 549px) { .small-col-first { order: -1; } }

.small-6 { flex-basis: 50%; max-width: 50%; }
.small-12 { flex-basis: 100%; max-width: 100%; }
.small-columns-1 > .col, .small-columns-1 .slider__track > .col { flex-basis: 100%; max-width: 100%; }
.small-columns-2 > .col, .small-columns-2 .slider__track > .col { flex-basis: 50%; max-width: 50%; }
@media (min-width: 550px) {
  .medium-3 { flex-basis: 25%; max-width: 25%; }
  .medium-4 { flex-basis: 33.3333%; max-width: 33.3333%; }
  .medium-5 { flex-basis: 41.6667%; max-width: 41.6667%; }
  .medium-6 { flex-basis: 50%; max-width: 50%; }
  .medium-7 { flex-basis: 58.3333%; max-width: 58.3333%; }
  .medium-8 { flex-basis: 66.6667%; max-width: 66.6667%; }
  .medium-9 { flex-basis: 75%; max-width: 75%; }
  .medium-12 { flex-basis: 100%; max-width: 100%; }
  .medium-columns-2 > .col, .medium-columns-2 .slider__track > .col { flex-basis: 50%; max-width: 50%; }
  .medium-columns-3 > .col, .medium-columns-3 .slider__track > .col { flex-basis: 33.3333%; max-width: 33.3333%; }
}
@media (min-width: 850px) {
  .large-2 { flex-basis: 16.6667%; max-width: 16.6667%; }
  .large-3 { flex-basis: 25%; max-width: 25%; }
  .large-4 { flex-basis: 33.3333%; max-width: 33.3333%; }
  .large-5 { flex-basis: 41.6667%; max-width: 41.6667%; }
  .large-6 { flex-basis: 50%; max-width: 50%; }
  .large-7 { flex-basis: 58.3333%; max-width: 58.3333%; }
  .large-8 { flex-basis: 66.6667%; max-width: 66.6667%; }
  .large-9 { flex-basis: 75%; max-width: 75%; }
  .large-10 { flex-basis: 83.3333%; max-width: 83.3333%; }
  .large-12 { flex-basis: 100%; max-width: 100%; }
  .large-columns-1 > .col, .large-columns-1 .slider__track > .col { flex-basis: 100%; max-width: 100%; }
  .large-columns-2 > .col, .large-columns-2 .slider__track > .col { flex-basis: 50%; max-width: 50%; }
  .large-columns-3 > .col, .large-columns-3 .slider__track > .col { flex-basis: 33.3333%; max-width: 33.3333%; }
  .large-columns-4 > .col, .large-columns-4 .slider__track > .col { flex-basis: 25%; max-width: 25%; }
}
/* Float trong lưới ảnh cần width thật thay vì flex-basis */
.row-grid > .small-6 { width: 50%; }
.row-grid > .small-12 { width: 100%; }
@media (min-width: 850px) {
  .row-grid > .large-2 { width: 16.6667%; }
  .row-grid > .large-3 { width: 25%; }
  .row-grid > .large-4 { width: 33.3333%; }
  .row-grid > .large-6 { width: 50%; }
  .row-grid > .large-8 { width: 66.6667%; }
  .row-grid > .large-12 { width: 100%; }
}

.has-shadow > .col > .col-inner { background-color: #fff; }
.grid-col > .col-inner { height: 100%; }
.grid-col .img, .grid-col .img-inner, .grid-col .img a, .grid-col .img-inner > img,
.grid-col .box, .grid-col .box-image, .grid-col .box-image img, .grid-col .image-cover, .grid-col .image-cover img {
  position: absolute !important; top: 0; bottom: 0; width: 100%; height: 100%; padding: 0 !important; object-fit: cover;
}

/* 7. Button -------------------------------------------------------------- */
.button, button, input[type="submit"] {
  position: relative; display: inline-block; max-width: 100%; min-height: 2.5em; margin-top: 0; margin-right: 1em; margin-bottom: 1em; padding: 0 1.2em;
  font-family: inherit; font-size: .97em; font-weight: bolder; line-height: 2.4em; letter-spacing: .03em; text-align: center; text-decoration: none; text-transform: uppercase;
  color: currentColor; background-color: transparent; border: 1px solid transparent; border-radius: 0; vertical-align: middle; cursor: pointer;
  transition: transform .3s, border .3s, background .3s, box-shadow .3s, opacity .3s, color .3s;
}
.button span { display: inline-block; line-height: 1.6; }
.button, input[type="submit"] { color: #fff; background-color: var(--primary); border-color: rgba(0, 0, 0, .05); }
.button:hover, input[type="submit"]:hover { color: #fff; opacity: 1; box-shadow: inset 0 0 0 100px rgba(0, 0, 0, .2); }
.button.secondary, input[type="submit"].secondary { background-color: var(--secondary); }
.button.is-outline { line-height: 2.19em; color: silver; background-color: transparent; border: 2px solid currentColor; }
.button.is-outline:hover { color: #fff; background-color: var(--primary); border-color: var(--primary); box-shadow: none !important; }
.button.secondary.is-outline { color: var(--secondary); background-color: transparent; }
.button.secondary.is-outline:hover { color: #fff; background-color: var(--secondary); border-color: var(--secondary); }
.button.white.is-outline { color: #fff !important; background-color: transparent !important; }
.button.white.is-outline:hover { color: #666 !important; background-color: #fff !important; border-color: #fff; }
.button.is-underline { padding-left: .15em; padding-right: .15em; color: #666; background-color: transparent !important; border-color: transparent !important; }
.button.is-underline.secondary { color: var(--secondary); }
.button.is-underline::before { content: ""; position: absolute; bottom: 0; left: 20%; width: 60%; height: 2px; background-color: currentColor; opacity: .3; transition: all .3s; }
.button.is-underline:hover { color: #333; box-shadow: none; }
.button.is-underline:hover::before { left: 0; width: 100%; opacity: 1; }
.is-bevel { overflow: hidden; }
.is-bevel::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; box-shadow: inset -.01em -.1em 0 0 rgba(0, 0, 0, .15); }
.text-center .button:first-of-type { margin-left: 0 !important; }
.text-center .button:last-of-type { margin-right: 0 !important; }
.reveal-icon i { width: 1em; }
.reveal-icon i, .reveal-icon span { display: inline-block; transition: opacity .3s, transform .3s; }
.reveal-icon span { transform: translateX(.75em); }
.reveal-icon:hover > span { transform: translateX(0); }
.reveal-icon:not(:hover) i { opacity: 0; }
.button:not(.icon) > span + i { margin-left: .69em; margin-right: -.15em; }

.box-shadow-4, .box-shadow-5, .box-shadow-4-hover, .box-shadow-5-hover, .row-box-shadow-2 .col-inner { transition: transform .3s, box-shadow .3s, background-color .3s, color .3s, opacity .3s; }
.row-box-shadow-2 .col-inner { box-shadow: 0 3px 6px -4px rgba(0, 0, 0, .16), 0 3px 6px rgba(0, 0, 0, .23); }
.box-shadow-4, .box-shadow-4-hover:hover { box-shadow: 0 14px 28px rgba(0, 0, 0, .25), 0 10px 10px rgba(0, 0, 0, .1); }
.box-shadow-5, .box-shadow-5-hover:hover { box-shadow: 0 30px 40px 0 rgba(0, 0, 0, .2); }
.box-shadow-4-hover:hover, .box-shadow-5-hover:hover { transform: translateY(-6px); }

.is-divider { display: block; width: 100%; max-width: 30px; height: 3px; margin: 1em 0; background-color: rgba(0, 0, 0, .1); }
.dark .is-divider { background-color: rgba(255, 255, 255, .3); }

/* 8. Box, ảnh, icon ------------------------------------------------------ */
.box { position: relative; width: 100%; margin: 0 auto; }
.box > a { display: block; width: 100%; }
.box a { display: inline-block; }
.box, .box-image, .box-text { transition: opacity .3s, transform .3s, background-color .3s; }
.box-image { position: relative; height: auto; margin: 0 auto; overflow: hidden; }
.box-image > a, .box-image > div > a { display: block; }
.box-image img { width: 100%; max-width: 100%; margin: 0 auto; }
.box-text { position: relative; width: 100%; padding-top: .7em; padding-bottom: 1.4em; font-size: .9em; }
.box-text.is-small { font-size: .8em; }
.box-text.text-center { padding-left: 10px; padding-right: 10px; }
.has-shadow .box-text { padding-left: 1.2em; padding-right: 1.2em; }
.box-text h1, .box-text h2, .box-text h3, .box-text h4, .box-text h5, .box-text h6, .box-text a:not(.button) { margin-top: .1em; margin-bottom: .1em; line-height: 1.3; }
.box-text p { margin-top: .1em; margin-bottom: .1em; }
.box-text .button { margin-top: 1em; }
@media (max-width: 549px) { .box-text { font-size: 85%; } }

.box-none .box-text { display: none !important; }
.box-push .box-text { max-width: 85%; margin: -15% auto 0; padding: 15px 20px; background-color: rgba(255, 255, 255, .95); }
.box-label { overflow: hidden; }
.box-label .box-text { position: absolute; bottom: 0; width: auto; margin: 10%; padding: .5em 1.5em .55em; background-color: #fff; opacity: .95; box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, .1); }
.box-label .box-text.text-center { left: 50%; margin: 10% 0; transform: translateX(-50%); }
.box-label:hover .box-text { opacity: 1; }
.box-shade .box-text { position: absolute; bottom: 0; width: 100%; max-height: 100%; padding-left: 1.5em; padding-right: 1.5em; }
.box-shade.dark .box-text { text-shadow: 1px 1px 1px rgba(0, 0, 0, .5); }
.box-blog-post .is-divider { height: 2px; margin-top: .5em; margin-bottom: .5em; }

/* Box ngang: ảnh một bên, chữ một bên (trang Blog) */
@media (max-width: 549px) { .box-vertical .box-image { width: 100% !important; } }
@media (min-width: 550px) {
  .box-vertical { display: table; width: 100%; }
  .box-vertical .box-image, .box-vertical .box-text { display: table-cell; vertical-align: middle; }
  .box-vertical .box-image { width: 50%; }
  .box-vertical .box-text { padding-left: 1.5em; padding-right: 1.5em; }
}

/* Box nảy khi rê chuột (trang Promotion) */
.box-bounce .box-text { z-index: 1; padding: 15px 15px 20px; }
.box-bounce:hover .box-text { background-color: #fff; transform: translateY(-15px); }
.box-bounce:hover .box-image { transform: translateY(-5px); }
.promotion-post .box-bounce:hover .box-text { background-color: var(--secondary); }
.promotion-post .box-bounce:hover .box-text h5, .promotion-post .box-bounce:hover .box-text p { color: #fff; }
.promotion-post .box-bounce:hover .box-text .is-divider { background-color: rgba(255, 255, 255, .3); }

/* Nhãn ngày đăng */
.badge { z-index: 20; display: table; width: 2.8em; height: 2.8em; pointer-events: none; backface-visibility: hidden; }
.badge.post-date { top: 7%; }
.badge-inner { display: table-cell; width: 100%; height: 100%; padding: 2px; font-weight: bolder; line-height: .85; color: #fff; text-align: center; white-space: nowrap; vertical-align: middle; background-color: var(--primary); transition: background-color .3s, color .3s, border .3s; }

.shade { position: absolute; top: 0; right: 0; bottom: 0; left: 0; opacity: .8; background: linear-gradient(to top, #323232 0%, rgba(50, 50, 50, 0) 33%); transition: opacity .3s; }
.shade-top { opacity: .4; background: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, 0) 70%); }
.box:hover .shade { opacity: .5; }

.img { position: relative; width: 100%; }
.img img { width: 100%; }
.img .img-inner { position: relative; overflow: hidden; }
.col-inner > .img:not(:last-child), .col > .img:not(:last-child) { margin-bottom: 1em; }
.image-cover { position: relative; height: auto; padding-top: 100%; overflow: hidden; background-position: 50% 50%; background-size: cover; }
.image-cover img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.has-hover .bg, .has-hover [class*="image-"] img { transition: filter .6s, opacity .6s, transform .6s, box-shadow .3s; }
.has-hover:hover .image-zoom img { transform: scale(1.1); }
.has-hover .image-zoom-long img { transition: transform 5s !important; }
.has-hover:hover .image-zoom-long img { transform: scale(1.3); }
.has-hover:hover .image-glow img { filter: brightness(1.1); }
.overlay { position: absolute; top: 0; bottom: 0; left: -1px; right: -1px; height: 100%; background-color: rgba(0, 0, 0, .15); pointer-events: none; transition: transform .3s, opacity .6s; }

.icon-box .icon-box-img { position: relative; max-width: 100%; margin-bottom: 1em; }
.icon-box-img img { width: 100%; padding-top: .2em; }
.icon-box-left { display: flex; flex-flow: row wrap; width: 100%; }
.icon-box-left .icon-box-img { flex: 0 0 auto; max-width: 200px; margin-bottom: 0; }
.icon-box-left .icon-box-text { flex: 1 1 0; }
.icon-box-left .icon-box-img + .icon-box-text { padding-left: 1em; }
.icon-box-center .icon-box-img { margin: 0 auto 1em; }

/* Icon SVG thay cho font icon của theme */
i[class^="icon-"], i[class*=" icon-"] {
  display: inline-block; width: 1em; height: 1em; vertical-align: -.125em; background-color: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat;
}
.icon-phone { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15 15 0 0 0 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.1.4 2.3.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1A17 17 0 0 1 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.3 0 .7-.2 1z'/%3E%3C/svg%3E"); }
.icon-menu { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 6h18v2H3zm0 5h18v2H3zm0 5h18v2H3z'/%3E%3C/svg%3E"); }
.icon-angle-down { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='5 8 14 8' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); }
.icon-angle-left { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='8 5 8 14' fill='none' stroke='%23000' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 6-6 6 6 6'/%3E%3C/svg%3E"); }
.icon-facebook { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 8.5V6.8c0-.8.5-1 1-1h2.5V2H14c-3 0-4.5 2-4.5 4.5v2H7V12h2.5v10H14V12h3l.5-3.5z'/%3E%3C/svg%3E"); }
.icon-twitter { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M22 5.9c-.7.3-1.5.5-2.4.6.9-.5 1.5-1.3 1.8-2.3-.8.5-1.7.8-2.6 1a4.1 4.1 0 0 0-7 3.7A11.6 11.6 0 0 1 3.4 4.7a4.1 4.1 0 0 0 1.3 5.5c-.7 0-1.3-.2-1.9-.5 0 2 1.4 3.7 3.3 4.1-.6.2-1.2.2-1.9.1.5 1.6 2 2.8 3.8 2.8A8.3 8.3 0 0 1 2 18.4 11.7 11.7 0 0 0 20 8.5c.8-.6 1.5-1.3 2-2.6z'/%3E%3C/svg%3E"); }
.icon-pinterest { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.3 2C7 2 4.5 5.7 4.5 8.9c0 1.9.7 3.6 2.3 4.2.3.1.5 0 .6-.3l.2-.9c.1-.3 0-.4-.2-.7-.5-.5-.7-1.2-.7-2.2 0-2.8 2.1-5.3 5.5-5.3 3 0 4.7 1.8 4.7 4.3 0 3.2-1.4 5.9-3.6 5.9-1.2 0-2-1-1.8-2.2.3-1.4 1-3 1-4 0-1-.5-1.8-1.6-1.8-1.3 0-2.3 1.3-2.3 3 0 1.1.4 1.8.4 1.8l-1.5 6.4c-.4 1.9-.1 4.2 0 4.4 0 .1.2.2.3.1.1-.2 1.7-2.1 2.2-4l.9-3.3c.4.8 1.7 1.5 3 1.5 4 0 6.7-3.6 6.7-8.5C20.7 5.3 17.6 2 12.3 2z'/%3E%3C/svg%3E"); }
.icon-linkedin { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.5 3a2 2 0 1 1 0 4 2 2 0 0 1 0-4zM3 8.5h3.2V21H3zm5.3 0h3v1.7c.5-1 1.8-2 3.6-2 3.8 0 4.5 2.5 4.5 5.7V21h-3.2v-6.3c0-1.5 0-3.4-2.1-3.4s-2.4 1.6-2.4 3.3V21H8.3z'/%3E%3C/svg%3E"); }
.icon-whatsapp { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 0 0-8.6 15L2 22l5.1-1.3A10 10 0 1 0 12 2zm5.8 14c-.2.7-1.4 1.3-2 1.4-.5 0-1.1.1-3.6-.9-3-1.2-4.9-4.2-5-4.4-.2-.2-1.2-1.6-1.2-3s.7-2.1 1-2.4c.2-.3.5-.4.7-.4h.5c.2 0 .4 0 .6.5l.9 2.1c0 .2.1.4 0 .6l-.4.6-.4.5c-.1.1-.3.3-.1.6.2.3.8 1.3 1.7 2.1 1.1 1 2.1 1.3 2.4 1.5.3.1.5.1.7-.1l.9-1.1c.2-.3.4-.2.7-.1l2.1 1c.3.2.5.2.6.4 0 .1 0 .6-.1 1.1z'/%3E%3C/svg%3E"); }
.icon-angle-right { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='8 5 8 14' fill='none' stroke='%23000' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E"); }
.icon-envelop { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E"); }

/* 9. Banner, section ----------------------------------------------------- */
.banner { position: relative; width: 100%; min-height: 30px; background-color: var(--primary); }
.banner-bg { overflow: hidden; }
.banner-layers { position: relative; height: 100%; max-height: 100%; }
.banner-layers > * { position: absolute !important; }
.bg-fill { background-size: cover !important; background-repeat: no-repeat !important; background-position: 50% 50%; }
.has-parallax { overflow: hidden; }
[data-parallax] { will-change: transform; }
[data-parallax] > .bg { top: -12%; bottom: -12%; height: 124%; }
.dark .banner a { color: #fff; }
.banner .button { margin-top: .5em; margin-bottom: .5em; }
.banner h1 { font-size: 3.5em; }
.banner h2 { font-size: 2.9em; }
.banner h3 { font-size: 2em; }
.banner h1, .banner h2, .banner h3 { margin-top: .2em; margin-bottom: .2em; padding: 0; font-weight: 600; line-height: 1; }
.banner h4 { margin-top: .6em; margin-bottom: .6em; padding: 0; font-size: 1.5em; }
.banner h5, .banner h6, .banner p { margin-top: 1em; margin-bottom: 1em; padding: 0; }
.text-box { max-height: 100%; }
.text-box .text-box-content { position: relative; z-index: 10; backface-visibility: hidden; }
.x50 { left: 50%; transform: translateX(-50%); }
.y50 { top: 50.3%; transform: translateY(-50%); }
.x50.y50 { transform: translate(-50%, -50%); }
.res-text { font-size: 11px; }
@media (min-width: 550px) { .res-text { font-size: 1.8vw; } }
@media (min-width: 850px) { .res-text { font-size: 16px; } }

.section { position: relative; display: flex; flex-flow: row; align-items: center; width: 100%; min-height: auto; padding: 30px 0; }
.section.dark { background-color: #666; }
.section-bg { overflow: hidden; }
.section-bg, .section-content { width: 100%; }
.section-content { z-index: 1; }
.page-wrapper { padding-top: 30px; padding-bottom: 30px; }
.entry-content { padding-top: 1.5em; padding-bottom: 1.5em; }
.scroll-to { display: block; width: 100%; }

/* Tab */
.tabbed-content { display: flex; flex-flow: row wrap; }
.tabbed-content .nav, .tabbed-content .tab-panels { width: 100%; }
.tab-panels { padding-top: 1em; }
.tab-panels .entry-content { padding: 0; }
.tab-panels .panel:not(.active) { display: block; visibility: hidden; height: 0; padding: 0; overflow: hidden; opacity: 0; }
.nav-outline > li { margin: 0; }
.nav-outline > li > a { position: relative; z-index: 10; padding: 0 .75em; line-height: 2.4em; color: rgba(102, 102, 102, .85); border: 2px solid transparent; border-radius: 32px; }
.nav-outline > li.active > a { color: var(--primary); border-color: currentColor; }

/* 10. Slider, lightbox --------------------------------------------------- */
.slider-wrapper { position: relative; }
.slider, .row-slider { position: relative; }
.slider:not(.is-ready) > :not(:first-child) { display: none; }
.slider__viewport { position: relative; width: 100%; overflow: hidden; touch-action: pan-y; }
.slider__track { display: flex; width: 100%; transition: transform .5s ease; will-change: transform; }
.slider__track.no-anim { transition: none; }
.slider__track > * { flex: 0 0 100%; min-width: 0; width: 100%; }
.slider.is-dragging { cursor: grabbing; user-select: none; }
.slider__arrow {
  position: absolute; top: 40%; bottom: 40%; z-index: 2; width: 36px; min-height: 0; margin: 0; padding: 0; color: #111; background: transparent; border: 0;
  opacity: 0; cursor: pointer; transition: transform .3s, opacity .3s;
}
.slider__arrow--prev { left: 2%; transform: translateX(20px); }
.slider__arrow--next { right: 2%; transform: translateX(-20px); }
.slider-nav-large .slider__arrow { width: 56px; }
.slider-nav-light .slider__arrow { color: #fff; }
.slider:hover .slider__arrow { opacity: .7; transform: translateX(0); }
.slider .slider__arrow:hover { opacity: 1; color: var(--primary); box-shadow: none; }
.slider__arrow svg { position: absolute; top: 50%; left: 50%; width: 100%; max-height: 100%; padding: 20%; fill: currentColor; transform: translate(-50%, -50%); transition: all .3s; }
.slider-nav-outside .slider__arrow--prev { left: -36px; }
.slider-nav-outside .slider__arrow--next { right: -36px; }
.flickity-page-dots { position: absolute; bottom: 15px; left: 20%; right: 20%; margin: 0; padding: 0; line-height: 1; text-align: center; list-style: none; }
.flickity-page-dots .dot {
  display: inline-block; width: auto; height: 1.8em; margin: 0 5px; opacity: 1; border: 0; border-radius: 0; cursor: pointer;
  content: url("../images/leaf_white.svg"); transition: opacity .3s;
}
.flickity-page-dots .dot:hover { opacity: .7; }
.flickity-page-dots .dot.is-selected { background: transparent !important; content: url("../images/leaf_full.svg"); }
.slider-nav-outside .flickity-page-dots, .row-slider .flickity-page-dots { bottom: 0; }
@media (max-width: 549px) {
  .slider-wrapper .slider__arrow { display: none; }
  .flickity-page-dots { pointer-events: none; }
  .row-slider .slider__arrow { width: 20px; opacity: .8; transform: none; }
  .slider-nav-outside .slider__arrow--prev { left: 0; }
  .slider-nav-outside .slider__arrow--next { right: 0; }
}

.lightbox { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; background: rgba(11, 11, 11, .85); opacity: 0; transition: opacity .25s; }
.lightbox.is-open { opacity: 1; }
.lightbox__img { max-width: 92vw; max-height: 88vh; width: auto; height: auto; box-shadow: 0 0 8px rgba(0, 0, 0, .6); }
.lightbox__btn { position: absolute; min-height: 0; margin: 0; padding: 10px 16px; font-size: 36px; line-height: 1; color: #fff; background: none; border: 0; cursor: pointer; opacity: .8; }
.lightbox__btn:hover { opacity: 1; }
.lightbox__close { top: 10px; right: 10px; }
.lightbox__prev { left: 10px; top: 50%; transform: translateY(-50%); }
.lightbox__next { right: 10px; top: 50%; transform: translateY(-50%); }

/* 11. Form --------------------------------------------------------------- */
label { display: block; margin-bottom: .4em; font-size: .9em; font-weight: bold; color: #222; }
input[type="date"], input[type="email"], input[type="number"], input[type="tel"], input[type="text"], textarea, select {
  width: 100%; max-width: 100%; height: 2.507em; margin-bottom: 1em; padding: 0 .75em; font-family: inherit; font-size: .97em; color: #333;
  background-color: #fff; border: 1px solid #ddd; border-radius: 0; vertical-align: middle; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);
  transition: color .3s, border .3s, background .3s, opacity .3s;
}
input[type="email"], input[type="number"], input[type="tel"], input[type="text"], textarea { appearance: none; -webkit-appearance: none; }
textarea { min-height: 120px; padding-top: .7em; }
input:focus, textarea:focus, select:focus { color: #333; background-color: #fff; opacity: 1 !important; outline: 0; box-shadow: 0 0 5px #ccc; }
input[type="checkbox"] { display: inline; margin-right: 10px; font-size: 16px; }

.form-flat input:not([type="submit"]), .form-flat textarea, .form-flat select {
  color: currentColor !important; background-color: rgba(0, 0, 0, .03); border-color: rgba(0, 0, 0, .09); border-radius: 99px; box-shadow: none;
}
.form-flat input { border-radius: 99px; }
.form-flat textarea { border-radius: 15px; }

.wpcf7 { position: relative; color: #333; }
.dark .wpcf7 { color: #fff; }
.wpcf7 p { margin: 0; padding: 0; }
.wpcf7 br { display: none; }
.wpcf7 label { display: inline-block; width: 100%; }
.wpcf7 .wpcf7-form-control-wrap { display: block; }
.wpcf7-list-item { display: block; }
.wpcf7 span.wpcf7-list-item { margin: 0 1.2em 0 0; }
.wpcf7-list-item input { margin: .5em; }
.wpcf7-list-item label { font-size: 1em; font-weight: 600; }
.wpcf7-form input[type="submit"] { margin-right: 0; margin-bottom: 24px; padding: .6em 1.8em; border-radius: 99px; } /* 24px = chỗ của spinner CF7 */
.wpcf7-response-output { display: none; margin: 1em 0 0; padding: .4em 1em; border: 2px solid var(--secondary); border-radius: 10px; }
.wpcf7-response-output.is-visible { display: block; }
.wpcf7-response-output.is-error { border-color: #b20000; }

/* Blog: phân trang, trang bài viết (single-news) -------------------------- */
.nav-pagination { margin: 5px 0; padding: 0; font-size: .85em; list-style: none; }
.nav-pagination > li { display: inline-block; margin: 0 .4em 0 0; list-style: none; }
.nav-pagination > li > span, .nav-pagination > li > a {
  display: block; width: auto; min-width: 2.25em; height: 2.25em; padding: 0 7px; font-size: 1.1em; font-weight: bolder; line-height: 2em;
  text-align: center; color: var(--text); border: 2px solid currentColor; border-radius: 99px; transition: all .3s;
}
.nav-pagination > li i { font-size: 1.2em; vertical-align: middle; }
.nav-pagination > li > .current, .nav-pagination > li > span:hover, .nav-pagination > li > a:hover { color: #fff; background-color: var(--primary); border-color: var(--primary); }

.page-title { position: relative; }
.featured-title { text-shadow: 1px 1px 1px rgba(0, 0, 0, .2); background-color: var(--primary); }
.page-title-bg { overflow: hidden; }
.featured-title .page-title-bg { box-shadow: inset 0 0 30px 0 rgba(0, 0, 0, .1); }
.page-title-bg .title-bg { top: -6%; bottom: -6%; height: 112%; background-position: 50% 0; transition: opacity .6s; }
.title-overlay { background-color: rgba(0, 0, 0, .25); }
.page-title-inner { position: relative; min-height: 60px; padding-top: 20px; }
.featured-title .page-title-inner { padding-bottom: 20px; }

.article-inner { transition: opacity .3s, box-shadow .5s, transform .3s; }
.blog-share { margin-bottom: 0; }
.social-icons { display: inline-block; font-size: .85em; color: #999; vertical-align: middle; }
.text-center .social-icons { margin-left: auto; margin-right: auto; }
.button.icon { display: inline-block; min-width: 2.5em; margin-left: .12em; margin-right: .12em; padding-left: .6em; padding-right: .6em; }
.button.icon.circle { padding-left: 0; padding-right: 0; }
.button.icon > i { font-size: 1.2em; }
.circle { border-radius: 999px !important; }
.social-icons .button.is-outline { border-width: 1.6px; }
.social-icons .button.icon:hover { background-color: currentColor !important; border-color: currentColor !important; }
.social-icons .button.icon:hover > i { color: #fff !important; }
.button.facebook:hover { color: #3a589d !important; }
.button.twitter:hover { color: #2478ba !important; }
.button.email:hover { color: #111 !important; }
.button.pinterest:hover { color: #cb2320 !important; }
.button.linkedin:hover { color: #0072b7 !important; }
.button.whatsapp:hover { color: #51cb5a !important; }

.bt { border-top: 1px solid #ececec; }
.bb { border-bottom: 1px solid #ececec; }
.next-prev-nav { align-items: stretch; }
.next-prev-nav .flex-col { padding: .7em 0; }
.next-prev-nav .flex-col + .flex-col { border-left: 1px solid #ececec; }
.next-prev-nav i { width: .48em; height: 1.2em; margin: 0 10px !important; font-size: 2em; vertical-align: middle; }
.text-right { text-align: right; }
.blog-single .post { margin-bottom: 30px; } /* chỗ của khối bình luận */

/* 12. Footer, tuỳ biến site ---------------------------------------------- */
.footer-wrapper { position: relative; width: 100%; }
.footer { padding: 60px 0 40px; }
.footer-1 { background-color: var(--secondary); border-top: 1px solid rgba(0, 0, 0, .05); }
.footer ul { margin: 0; }
.widget { margin-bottom: 1.5em; }
.footer-address { font-size: .8em; line-height: 2em; }
ul.menu > li { margin: 0; text-align: left; list-style: none; }
ul.menu > li > a { display: inline-block; padding: 6px 0; }
.footer-menu li { font-size: .8em; border-top: 0; }
.footer-menu li a { color: currentColor; }
.footer-fb { border: 0; overflow: hidden; }
.absolute-footer { padding: 10px 0 15px; font-size: .9em; background-color: var(--text); }
.absolute-footer.dark { color: rgba(255, 255, 255, .5); }

/* Trang trí lá dưới tiêu đề */
.leaf::after { content: ""; display: block; width: 1em; height: 1em; margin: 1em auto; background: url("../images/leaf.svg") no-repeat; }

.homepage-offers .col-inner, .homepage-event .col-inner { border-radius: 12px; overflow: hidden; }
.homepage-offers .box-label .box-text.text-center { top: 50%; display: flex; width: 60%; height: 60%; margin: 0; border-radius: 10px; transform: translate(-50%, -50%); }
.homepage-offers .box-label .box-text.text-center .box-text-inner.blog-post-inner { display: flex; flex-direction: column; justify-content: center; }
.homepage-offers .box-label .box-text.text-center .box-text-inner.blog-post-inner button { width: 82%; margin-left: auto !important; margin-right: auto !important; padding: .6em 1.8em; border-radius: 99px; }
.homepage-event .box .shade { opacity: 1; background: linear-gradient(to top, #111 0%, rgba(50, 50, 50, 0) 50%); }
.homepage-event .badge.post-date { top: 0; right: 0; left: auto; }

.heading-text { font-size: 2.2em; text-transform: capitalize; }
.quote { font-weight: 700; line-height: 1.8; }
.quote p::before { content: "❝ "; font-size: 200%; line-height: .75; color: var(--primary); vertical-align: middle; }
.quote p::after { content: " ❞"; font-size: 200%; line-height: .75; color: var(--primary); vertical-align: middle; }
.circle-image img { border-radius: 100%; }
.entry-category { display: none; }
.blog-du-lich .col.post-item .col-inner { padding-bottom: 30px; border-bottom: 1px solid rgba(0, 0, 0, .1); }
.room-image img { border-top-left-radius: 50%; border-top-right-radius: 50%; }
.testimonial .flickity-page-dots { bottom: 32px; }

@media (min-width: 768px) {
  .vertical-text { writing-mode: tb-rl; transform: rotate(180deg); }
  .house .box-text { min-height: 320px; }
}
@media (min-width: 1599px) { .house .box-text { min-height: 295px; } }
@media (min-width: 1900px) { .house .box-text { min-height: 252px; } }