/* Cảnh Quan Lục Viên (cayxanh) — trang chủ y hệt mockup (xanh lá #006f0a/#009c0e màu gốc + nõn chuối #80cb28), cỡ đo theo mockup x1.88 (10-04) */
:root { --lv-g: #0E6E1A; --lv-g2: #129A2A; --lv-g3: #0B5D17; --lv-lime: #7DC943; --lv-ink: #1F2A1D; --lv-text: #4A5547; --lv-muted: #6E776B; --lv-line: #E3E8E0; --lv-bg: #F3F5F1; }
body, p, li, a, input, select, textarea, button, h1, h2, h3, h4, td, th, label, .nav > li > a { font-family: "Roboto", sans-serif !important; }
h1 a, h2 a, h3 a, h4 a { font-family: inherit !important; }
.lv-sec, .lv-footer, #header { word-break: normal !important; }
/* ---------- topbar + header ---------- */
#top-bar { background: var(--lv-g) !important; }
#top-bar .flex-row { min-height: 37px; height: 37px; justify-content: center; }
#top-bar .flex-left, #top-bar .flex-right { display: none !important; } #top-bar .flex-center { margin: 0 auto; justify-content: center; }
#top-bar .nav > li.html { border: 0 !important; padding: 0 !important; margin: 0 !important; }
#top-bar .lv-tb { color: #EAF4E8; font-size: 15px; line-height: 37px; white-space: nowrap; text-transform: none; letter-spacing: 0; }
#top-bar .lv-tb b { color: #fff; font-weight: 700; } #top-bar .lv-tb a { color: #fff !important; font-size: 15px !important; font-weight: 700; }
#header .header-main { background: #fff !important; height: 90px; box-shadow: 0 1px 0 #E8ECE5; }
#header .header-main .header-inner { height: 90px; }
#header #logo { width: 312px !important; margin: 0 !important; top: 0 !important; }
#header #logo a { position: relative; top: 0 !important; margin: 0 !important; display: flex !important; align-items: center; height: 66px; padding-left: 82px; background: url(icons/logo.png) left center / 66px 66px no-repeat; color: var(--lv-g) !important; font-size: 25px !important; font-weight: 700 !important; letter-spacing: -.2px; line-height: 1; text-transform: none !important; white-space: nowrap; }
@media (min-width: 850px) { #header .header-main .flex-left { flex: 1 1 auto; justify-content: flex-end; margin-right: 22px; } }
#header .header-nav-main { flex-wrap: nowrap !important; } #header .header-nav-main > li { margin: 0 11px !important; white-space: nowrap; border: 0 !important; }
#header .header-nav-main > li > a { font-size: 15px !important; font-weight: 500 !important; color: #3A4238 !important; text-transform: none !important; letter-spacing: 0 !important; padding: 0 !important; line-height: 40px !important; flex-wrap: nowrap !important; background: transparent !important; }
#header .header-nav-main > li > a:hover { color: var(--lv-g2) !important; }
#header .header-nav-main > li > a::before, #header .header-nav-main > li > a::after { display: none !important; }
#header .flex-right .header-nav-main > li { margin: 0 !important; }
#header .flex-right .header-nav-main > li.header-search-form { margin-right: 15px !important; }
#header .header-search-form { flex: 0 0 auto; width: 165px; } #header .header-search-form .searchform { width: 165px; }
#header .header-search-form .searchform-wrapper { margin: 0 !important; }
#header .header-search-form input[type=search] { height: 45px !important; border-radius: 5px !important; background: #F3F4F2 url(icons/search.png) 14px center / 18px 18px no-repeat !important; border: 1px solid #DFE3DC !important; box-shadow: none !important; padding: 0 12px 0 42px !important; font-size: 15px !important; color: var(--lv-ink); }
#header .header-search-form .ux-search-submit, #header .header-search-form button[type=submit], #header .header-search-form .flex-col:last-child, #header .header-search-form .search-form-categories { display: none !important; }
#header .header-button .button { background: var(--lv-g) !important; border: 0 !important; color: #fff !important; border-radius: 4px !important; height: 45px; min-height: 45px; padding: 0 24px !important; font-size: 15px !important; font-weight: 700 !important; text-transform: none !important; letter-spacing: 0 !important; line-height: 45px !important; box-shadow: none !important; margin: 0 !important; }
#header .header-button .button span { font-size: inherit !important; }
.mobile-nav i, .mobile-nav .icon-menu { color: var(--lv-g) !important; }
.home .page-title { display: none !important; }
/* ---------- chung ---------- */
.lv-sec p:not([class]), .lv-footer p:not([class]) { display: contents; }
.lv-sec p, .lv-footer p { margin-bottom: 0; }
.lv-sec .col, .lv-footer .col { padding-bottom: 0 !important; }
.lv-sec ul, .lv-footer ul { margin: 0; padding: 0; list-style: none; } .lv-sec li, .lv-footer li { margin: 0 !important; }
.lv-sec img[src=""] { visibility: hidden; }
.lv-h2 { color: var(--lv-g3) !important; font-size: 42px !important; font-weight: 700 !important; line-height: 50px !important; letter-spacing: -.5px; margin: 0 !important; }
.lv-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 16px; }
.lv-head h2 { flex: 0 1 auto; width: fit-content; min-width: 0; }
.lv-more { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; color: var(--lv-g) !important; font-size: 16px; font-weight: 500; }
.lv-more i, .lv-lk i { display: inline-block; width: 16px; height: 16px; background: url(icons/arr.png) center / contain no-repeat; }
.lv-lk { display: inline-flex; align-items: center; gap: 8px; color: var(--lv-g) !important; font-size: 16px; font-weight: 700; }
.lv-lk-u { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 2px; }
.lv-btn { display: inline-flex; align-items: center; gap: 12px; height: 58px; padding: 0 28px; border-radius: 4px; background: var(--lv-g2); color: #fff !important; font-size: 18px; font-weight: 700; }
.lv-btn img { width: 20px; height: 20px; }
/* ---------- hero ---------- */
.section.lv-hero { min-height: 556px; padding: 0 !important; align-items: flex-start !important; }
.lv-hero .section-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10,30,8,.62) 0%, rgba(10,30,8,.38) 35%, rgba(10,30,8,0) 60%); }
.lv-hero-in { padding-top: 112px; }
.lv-h1 { color: #fff !important; font-size: 66px !important; font-weight: 700 !important; line-height: 67px !important; letter-spacing: -1px; margin: 0 0 16px !important; text-shadow: 0 2px 16px rgba(0,0,0,.25); }
.lv-lead { color: #fff; font-size: 21px; line-height: 30px; margin-bottom: 28px; }
/* ---------- thanh 3 lối vào ---------- */
.section.lv-en-sec { padding: 0 !important; overflow: visible; z-index: 3; }
.lv-entry { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); background: #fff; border-radius: 4px; box-shadow: 0 10px 30px rgba(20,50,20,.12); margin-top: -43px; height: 92px; }
.lv-entry a { display: flex; align-items: center; gap: 18px; padding: 0 28px 0 34px; color: var(--lv-ink) !important; font-size: 17px; font-weight: 500; position: relative; }
.lv-entry a + a::before { content: ""; position: absolute; left: 0; top: 22px; bottom: 22px; width: 1px; background: var(--lv-line); }
.lv-entry img { width: 46px; height: 46px; flex: 0 0 46px; }
.lv-entry span { flex: 1 1 auto; }
@media (min-width: 1400px) { .lv-entry span { white-space: nowrap; } }
.lv-entry i { width: 18px; height: 18px; background: url(icons/arr.png) center / contain no-repeat; flex: 0 0 18px; }
/* ---------- dự án ---------- */
.section.lv-pj-sec { padding: 34px 0 40px !important; }
.lv-pjs { display: grid; grid-template-columns: minmax(0, 552fr) minmax(0, 334fr) minmax(0, 334fr); grid-template-rows: auto auto; column-gap: 20px; row-gap: 18px; }
.lv-pj { display: block; color: var(--lv-ink) !important; }
.lv-pj1 { grid-row: 1 / 3; }
.lv-pj-img { display: block; height: 180px; overflow: hidden; border-radius: 2px; } .lv-pj1 .lv-pj-img { height: 412px; }
.lv-pj img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s; } .lv-pj:hover img { transform: scale(1.04); }
.lv-pj-t { display: block; font-size: 16px; line-height: 22px; margin-top: 12px; color: #3A4238; }
/* ---------- cây xanh theo nhóm ---------- */
.section.lv-tr-sec { padding: 26px 0 34px !important; }
.lv-tabs { display: flex; gap: 0; border-bottom: 1px solid #DCE2D8; width: fit-content; margin-bottom: 20px; }
.lv-tab { background: none !important; border: 0; margin: 0 !important; padding: 0 30px 12px !important; font-size: 18px !important; font-weight: 500; color: #5B6458 !important; text-transform: none !important; letter-spacing: 0 !important; line-height: 28px !important; min-height: 0 !important; position: relative; cursor: pointer; }
.lv-tab.is-on { color: var(--lv-g) !important; }
.lv-tab.is-on::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 4px; background: var(--lv-g); }
.lv-trs { display: none; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; } .lv-trs.is-on { display: grid; }
.lv-tr { background: #fff; }
.lv-tr-img { display: block; height: 280px; padding: 6px 10px 0; background: #fff; } .lv-tr-img img { width: 100%; height: 100%; object-fit: contain; display: block; }
.lv-tr-b { padding: 14px 20px 18px; }
.lv-tr-b h3 { font-size: 17px !important; font-weight: 500 !important; line-height: 24px; margin: 0 0 8px !important; } .lv-tr-b h3 a { color: var(--lv-ink) !important; }
.lv-co { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; margin-top: 22px; font-size: 18px; color: #3A4238; }
.lv-co a { color: var(--lv-g) !important; } .lv-co b { color: #9AA396; font-weight: 400; }
/* ---------- dịch vụ ---------- */
.section.lv-sv-sec { padding: 22px 0 26px !important; }
.lv-svs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; }
.lv-sv { position: relative; display: block; height: 312px; border-radius: 3px; overflow: hidden; box-shadow: 0 8px 20px rgba(0,0,0,.08); }
.lv-sv img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s; } .lv-sv:hover img { transform: scale(1.05); }
.lv-sv::after { content: ""; position: absolute; inset: 55% 0 0; background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.72)); }
.lv-sv span { position: absolute; left: 20px; right: 12px; bottom: 16px; z-index: 2; color: #fff; font-size: 24px; font-weight: 700; line-height: 30px; }
/* ---------- hồ Koi ---------- */
.section.lv-koi-sec { padding: 26px 0 30px !important; }
.lv-koi { display: grid; grid-template-columns: minmax(0, 720fr) minmax(0, 536fr); gap: 46px; align-items: start; }
.lv-koi-img { display: block; height: 485px; overflow: hidden; border-radius: 2px; } .lv-koi-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lv-koi-h { color: var(--lv-g3) !important; font-size: 34px !important; font-weight: 700 !important; line-height: 42px !important; letter-spacing: -.5px; margin: 0 0 6px !important; }
@media (min-width: 1400px) { .lv-koi-h { white-space: nowrap; } }
.lv-koi-sub { color: var(--lv-text); font-size: 19px; line-height: 28px; margin-bottom: 14px; }
.lv-st { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 22px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--lv-line); }
.lv-st:last-child { border-bottom: 0; }
.lv-st b { width: 56px; height: 56px; border-radius: 50%; background: #EEF3EC; color: var(--lv-g); font-size: 18px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.lv-st h3 { color: var(--lv-ink) !important; font-size: 18px !important; font-weight: 500 !important; line-height: 26px; margin: 0 0 2px !important; }
.lv-st h3 + div { color: var(--lv-muted); font-size: 15px; line-height: 22px; }
.lv-koi-lk { margin-top: 18px; font-size: 18px; font-weight: 500; }
/* ---------- kiến thức ---------- */
.section.lv-bl-sec { padding: 18px 0 32px !important; }
.lv-bls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.lv-bl { border: 1px solid var(--lv-line); background: #fff; }
.lv-bl-img { display: block; height: 216px; overflow: hidden; } .lv-bl-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lv-bl-b { padding: 12px 18px 16px; }
.lv-bl-b h3 { font-size: 19px !important; font-weight: 500 !important; line-height: 27px; margin: 0 0 12px !important; min-height: 54px; } .lv-bl-b h3 a { color: var(--lv-ink) !important; }
/* ---------- báo giá ---------- */
.section.lv-cta-sec { padding: 0 !important; }
.lv-cta { text-align: center; padding: 30px 0 32px; }
.lv-cta h2 { color: #fff !important; font-size: 41px !important; font-weight: 700 !important; line-height: 50px; margin: 0 0 4px !important; letter-spacing: -.5px; }
.lv-cta-sub { color: #EAF4E8; font-size: 18px; margin-bottom: 18px; }
.lv-qf { display: grid; grid-template-columns: 278px 278px 335px 216px; gap: 12px; justify-content: center; margin: 0 auto; }
.lv-qi { position: relative; margin: 0 !important; display: block; }
.lv-qi::before { content: ""; position: absolute; left: 16px; top: 15px; width: 22px; height: 22px; background: center / contain no-repeat; z-index: 2; }
.lv-qi-n::before { background-image: url(icons/f-user.png); } .lv-qi-p::before { background-image: url(icons/f-ph.png); } .lv-qi-t::before { background-image: url(icons/f-list.png); }
.lv-qf input[type=text], .lv-qf input[type=tel], .lv-qf select { width: 100%; height: 52px; margin: 0 !important; border: 0 !important; border-radius: 3px !important; box-shadow: none !important; background-color: #fff; padding: 0 14px 0 54px !important; font-size: 16px !important; color: var(--lv-ink); }
.lv-qf select { appearance: none; -webkit-appearance: none; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B6458' stroke-width='2.4'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right 16px center / 16px no-repeat !important; color: #6E776B; }
.lv-qb { height: 52px; margin: 0 !important; border: 0; border-radius: 3px; background: var(--lv-lime) !important; color: #173A10 !important; font-size: 16px !important; font-weight: 700; text-transform: none; letter-spacing: 0; padding: 0 !important; }
.lv-qf-msg { grid-column: 1 / -1; color: #fff; font-size: 14px; min-height: 0; }
.lv-qf-msg:empty { display: none; }
/* ---------- footer ---------- */
#footer .absolute-footer { display: none !important; }
.lv-footer { padding: 42px 0 0 !important; }
.lv-fg { display: grid; grid-template-columns: minmax(0, 340fr) minmax(0, 330fr) minmax(0, 335fr) minmax(0, 300fr); gap: 0 10px; }
.lv-footer a.lv-flogo { display: flex !important; align-items: center; gap: 12px; color: #fff !important; font-size: 23px; font-weight: 700; margin-bottom: 18px; }
.lv-flogo img { width: 66px; height: 66px; }
.lv-fdesc { color: #D5E6D2; font-size: 16px; line-height: 26px; }
.lv-fc h4 { color: #fff !important; font-size: 19px !important; font-weight: 500 !important; margin: 0 0 14px !important; }
.lv-fc li { margin-bottom: 8px !important; color: #D5E6D2; font-size: 16px; line-height: 26px; }
.lv-fc li a { color: #D5E6D2 !important; }
.lv-fct li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 26px; align-items: start; color: #fff; font-size: 17px; }
.lv-fct li a { color: #fff !important; }
.lv-fct li img { width: 21px; height: 21px; margin-top: 3px; }
.lv-fbot { border-top: 1px solid rgba(255,255,255,.18); margin-top: 32px; padding: 20px 0 26px; text-align: center; color: #D5E6D2; font-size: 14px; }
/* ---------- mobile ---------- */
@media (max-width: 849px) {
  #header .header-main, #header .header-main .header-inner { height: 68px; }
  #header #logo, #header #logo a { width: auto !important; }
  #header #logo a { height: 48px; padding-left: 54px; background-size: 46px 46px; font-size: 19px !important; }
  #top-bar .lv-tb { font-size: 13px; }
  .lv-h2 { font-size: 28px !important; line-height: 36px !important; }
  .section.lv-hero { min-height: 0; background-color: #1d3b1a !important; padding-top: 250px !important; }
  .lv-hero .section-bg { top: 0; bottom: auto; height: 250px; }
  .lv-hero .section-bg::after { background: linear-gradient(180deg, rgba(29,59,26,0) 55%, rgba(29,59,26,1) 100%); }
  .lv-hero-in { padding: 8px 0 70px; }
  .lv-h1 { font-size: 36px !important; line-height: 42px !important; } .lv-h1 br { display: none; }
  .lv-lead { font-size: 17px; line-height: 25px; }
  .lv-btn { height: 52px; font-size: 16px; }
  .lv-entry { grid-template-columns: minmax(0, 1fr); height: auto; margin-top: -46px; }
  .lv-entry a { padding: 14px 18px; gap: 14px; font-size: 15px; } .lv-entry a + a::before { left: 18px; right: 18px; top: 0; bottom: auto; width: auto; height: 1px; }
  .lv-entry img { width: 36px; height: 36px; flex-basis: 36px; }
  .lv-pjs { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 12px; }
  .lv-pj1 { grid-row: auto; grid-column: 1 / -1; } .lv-pj1 .lv-pj-img { height: 230px; } .lv-pj-img { height: 120px; } .lv-pj-t { font-size: 14px; line-height: 19px; margin-top: 6px; }
  .lv-tabs { width: 100%; overflow-x: auto; flex-wrap: nowrap; } .lv-tab { padding: 0 14px 10px !important; font-size: 15px !important; white-space: nowrap; }
  .lv-trs.is-on { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .lv-trs .lv-tr:nth-child(5) { display: none; }
  .lv-tr-img { height: 180px; } .lv-tr-b { padding: 10px 12px 14px; } .lv-tr-b h3 { font-size: 15px !important; } .lv-lk { font-size: 14px; }
  .lv-co { font-size: 15px; }
  .lv-svs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .lv-sv { height: 200px; } .lv-sv:last-child { grid-column: 1 / -1; } .lv-sv span { font-size: 18px; line-height: 23px; left: 14px; bottom: 12px; }
  .lv-koi { grid-template-columns: minmax(0, 1fr); gap: 20px; } .lv-koi-img { height: 240px; }
  .lv-koi-h { font-size: 25px !important; line-height: 32px !important; white-space: normal; } .lv-koi-sub { font-size: 16px; }
  .lv-st { grid-template-columns: 46px minmax(0, 1fr); gap: 14px; } .lv-st b { width: 46px; height: 46px; font-size: 16px; } .lv-st h3 { font-size: 16px !important; } .lv-st h3 + div { font-size: 14px; }
  .lv-bls { grid-template-columns: minmax(0, 1fr); } .lv-bl-img { height: 190px; } .lv-bl-b h3 { font-size: 17px !important; min-height: 0; }
  .lv-cta h2 { font-size: 26px !important; line-height: 33px; } .lv-cta-sub { font-size: 15px; }
  .lv-qf { grid-template-columns: minmax(0, 1fr); }
  .lv-fg { grid-template-columns: minmax(0, 1fr); row-gap: 22px; }
  .lv-fdesc br { display: none; }
}
@media (min-width: 1400px) { .lv-sv span { font-size: 22.5px; white-space: nowrap; left: 18px; } }
/* ruler:manual (10-04: ruler.py icon NHO 1.2-1.5, tiêu đề giữ cỡ vì bề rộng chữ khớp _cmpw ±8%) */
@media (min-width: 850px) { .lv-entry img { width: 54px; height: 54px; flex-basis: 54px; } }
@media (min-width: 1400px) { #header .header-main .flex-left { justify-content: flex-start; margin-left: 46px; } }
/* mid-fix */
@media (min-width: 850px) and (max-width: 1399px) { #header .header-main .flex-left { margin-right: 10px !important; } #header .header-nav-main > li { margin: 0 7px !important; } #header .header-nav-main > li > a { font-size: 14px !important; } #header .header-search-form, #header .header-search-form .searchform { width: 140px !important; max-width: 140px !important; margin-left: 0 !important; } #header .flex-right .header-nav-main > li.header-search-form { margin-right: 10px !important; } #header .header-button .button { padding: 0 16px !important; } }
@media (min-width: 850px) and (max-width: 1199px) { #header #logo { width: auto !important; max-width: none !important; } #header #logo a { font-size: 18px !important; padding-left: 52px; background-size: 44px 44px; } #header .header-nav-main > li { margin: 0 4px !important; } #header .header-nav-main > li > a { font-size: 13px !important; } }
@media (min-width: 850px) and (max-width: 1399px) { .lv-qf { grid-template-columns: repeat(3, minmax(0, 1fr)) 180px; } .lv-koi { gap: 28px; } .lv-pjs { column-gap: 14px; } }
/* /mid-fix */
/* _midwidth: header Flatsome ở 850-1399px (laptop nhỏ/tablet ngang) — menu dựng theo mockup 1440 tràn phải; dùng chung mọi site */
@media (min-width: 850px) and (max-width: 1399px) {
  #header .header-nav-main > li, #header .header-bottom-nav > li { margin-left: 6px !important; margin-right: 6px !important; }
  #header .header-nav-main > li > a, #header .header-bottom-nav > li > a { font-size: 14px !important; }
  #header .header-search-form { max-width: 300px !important; width: 300px !important; margin-left: 20px !important; }
}
@media (min-width: 850px) and (max-width: 1199px) {
  #logo { width: auto !important; max-width: 210px !important; } #logo a { font-size: 21px !important; }
  #header .header-main .flex-right .header-button-1, #header .header-main .flex-right li.html, #header .header-search-form, #top-bar .flex-right { display: none !important; }
  #header .header-nav-main > li, #header .header-bottom-nav > li { margin-left: 3px !important; margin-right: 3px !important; }
  #header .header-nav-main > li > a, #header .header-bottom-nav > li > a { font-size: 13px !important; }
  #header .flex-col { min-width: 0; } #header .header-inner, #header .header-bottom .container { overflow: hidden; }
}
.col-inner a[href^="mailto"], .col-inner a[href^="tel"] { overflow-wrap: anywhere; }