/*
Theme Name:           Flatsome
Theme URI:            http://flatsome.uxthemes.com
Author:               UX-Themes
Author URI:           https://uxthemes.com
Description:          Multi-Purpose Responsive WooCommerce Theme
Version:              3.19.7
Requires at least:    6.4
Requires PHP:         7.4
WC requires at least: 8.3
Text Domain:          flatsome
License:              https://themeforest.net/licenses
License URI:          https://themeforest.net/licenses
*/


/***************
All custom CSS should be added to Flatsome > Advanced > Custom CSS,
or in the style.css of a Child Theme.
***************/

/* ============================================================================
   DE HEUS STYLE OVERRIDE  —  restyle site Jsouer theo phong cách deheus.com.vn
   Chỉ CSS. Nạp sau cùng (handle 'flatsome-style'). Dùng !important trên biến
   để thắng CSS inline <style id="custom-css"> nạp sau link này.
   >>> Muốn hoàn tác: xoá toàn bộ block từ dòng này tới hết file. <<<
   ============================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700;900&display=swap');

:root {
  /* --- Bảng màu De Heus map vào biến của Flatsome (46+ chỗ tự đổi màu) --- */
  --primary-color:                     #97be0d !important;  /* xanh lá De Heus */
  --fs-color-primary:                  #97be0d !important;
  --fs-color-secondary:                #006fb7 !important;  /* xanh dương */
  --fs-color-success:                  #72bf44 !important;
  --fs-color-alert:                    #e43340 !important;
  --fs-experimental-link-color:        #006fb7 !important;
  --fs-experimental-link-color-hover:  #00436e !important;

  /* --- Token De Heus dùng lại bên dưới --- */
  --dh-green:        #97be0d;
  --dh-green-hover:  #88ab0c;
  --dh-green-active: #5b7208;
  --dh-blue:         #006fb7;
  --dh-blue-hover:   #0064a5;
  --dh-navy:         #002137;
  --dh-border:       #dfe6e8;
  --dh-focus:        #bfdbed;
}

/* ---------- TYPOGRAPHY: De Heus dùng Roboto ---------- */
body,
.nav > li > a,
.mobile-sidebar-levels-2 .nav > li > ul > li > a,
button, input, select, textarea, .button {
  font-family: 'Roboto', system-ui, -apple-system, sans-serif !important;
}
h1, h2, h3, h4, h5, h6, .heading-font,
.banner h1, .banner h2,
.off-canvas-center .nav-sidebar.nav-vertical > li > a {
  font-family: 'Roboto', system-ui, sans-serif !important;
  letter-spacing: -0.02em;
}
/* màu tiêu đề navy — nhưng vẫn trắng trên nền tối (.dark) của Flatsome */
h1, h2, h3, h4, h5, h6, .heading-font { color: var(--dh-navy); }
h1 { line-height: 1.05; }
h2 { line-height: 1.2; }
.dark h1, .dark h2, .dark h3, .dark h4, .dark h5, .dark h6,
.dark .heading-font { color: #fff; }

/* ---------- LINKS ---------- */
a           { color: var(--dh-blue); }
a:hover     { color: var(--dh-blue-hover); }
.nav > li.active > a,
.nav > li > a:hover,
.header-nav a:hover { color: var(--dh-green) !important; }

/* ---------- BUTTONS: pill + màu De Heus ---------- */
.button, a.button, button,
input[type="submit"], input[type="button"], input[type="reset"],
.add_to_cart_button, .single_add_to_cart_button, .checkout-button, .cart-button {
  border-radius: 999px !important;
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
/* nút chính -> xanh lá De Heus */
.button.primary, button.primary,
input[type="submit"], input[type="submit"].primary,
.add_to_cart_button, .single_add_to_cart_button, .checkout-button,
.button.checkout {
  background-color: var(--dh-green) !important;
  border-color:     var(--dh-green) !important;
  color: #fff !important;
}
.button.primary:hover, button.primary:hover,
input[type="submit"]:hover,
.add_to_cart_button:hover, .single_add_to_cart_button:hover,
.checkout-button:hover {
  background-color: var(--dh-green-hover) !important;
  border-color:     var(--dh-green-hover) !important;
}
.button.primary:active, .single_add_to_cart_button:active {
  background-color: var(--dh-green-active) !important;
  border-color:     var(--dh-green-active) !important;
}
/* nút phụ -> xanh dương De Heus */
.button.secondary, button.secondary {
  background-color: var(--dh-blue) !important;
  border-color:     var(--dh-blue) !important;
  color: #fff !important;
}
.button.secondary:hover, button.secondary:hover {
  background-color: var(--dh-blue-hover) !important;
  border-color:     var(--dh-blue-hover) !important;
}
/* nút viền (mặc định trắng) */
.button:not(.primary):not(.secondary):not(.success):not(.alert) {
  color: var(--dh-blue);
  border-color: var(--dh-border);
}
/* nút outline dùng primary -> xanh lá */
.button.is-outline.primary, .is-outline.primary {
  color: var(--dh-green) !important;
  border-color: var(--dh-green) !important;
  background: transparent !important;
}
.button:focus-visible, .button:focus {
  box-shadow: 0 0 0 4px var(--dh-focus) !important;
  outline: none !important;
}

/* ---------- WOOCOMMERCE nhấn nhẹ theo De Heus ---------- */
.woocommerce-Price-amount, .price .amount { color: var(--dh-navy); }
ins .woocommerce-Price-amount, .price ins .amount { color: var(--dh-green) !important; }
.badge.onsale .badge-inner, span.onsale {
  background-color: var(--dh-green) !important;
  border-radius: 999px !important;
}
.star-rating:before, .star-rating span:before,
.woocommerce-product-rating .star-rating { color: var(--dh-green); }

/* ---------- HEADER: viền dưới nhấn màu thương hiệu ---------- */
.header-main { border-bottom: 3px solid var(--dh-green); }

/* ============================================================================
   DE HEUS — FOOTER  (footer Jsouer là Flatsome UX Builder "ux-menu")
   Sửa: chữ tiêu đề menu, chữ link menu, icon MXH + thêm đường kẻ xanh lá ở đỉnh.
   ============================================================================ */

/* Đường kẻ XANH LÁ ở đỉnh footer — giống mẫu De Heus */
#footer.footer-wrapper { border-top: 5px solid var(--dh-green); }

/* Tiêu đề menu -> TRẮNG ĐẬM */
#footer .ux-menu-title,
#footer .ux-menu-title .menu-title-text,
#footer .ux-menu-title span {
  color: #ffffff !important;
  font-weight: 700 !important;
  letter-spacing: .02em;
}

/* Link menu -> trắng dịu; hover trắng rõ */
#footer .ux-menu-link__link,
#footer .ux-menu-link__text {
  color: rgba(255,255,255,.78) !important;
}
#footer .ux-menu-link:hover .ux-menu-link__link,
#footer .ux-menu-link:hover .ux-menu-link__text,
#footer .ux-menu-link__link:hover .ux-menu-link__text {
  color: #ffffff !important;
}

/* Bỏ đường kẻ phân cách giữa các link (footer De Heus không có) */
#footer .ux-menu-link__link { border-bottom-color: transparent !important; }

/* Icon mạng xã hội kiểu De Heus: nền trắng bo góc, glyph xanh dương, hover xanh lá */
#footer .social-icons a.icon {
  background-color: #ffffff !important;
  border: 1px solid #ffffff !important;
  border-radius: 8px !important;
  color: var(--dh-blue) !important;
  transition: .25s ease !important;
}
#footer .social-icons a.icon i,
#footer .social-icons a.icon svg {
  color: inherit !important;
  fill: currentColor !important;
}
#footer .social-icons a.icon:hover {
  background-color: var(--dh-green) !important;
  border-color: var(--dh-green) !important;
  color: #ffffff !important;
}

/* ============================================================================
   DE HEUS — TRANG LIÊN HỆ  (bố cục: hero 2 cột + form căn giữa + map)
   ============================================================================ */
.dh-eyebrow {
  display: inline-block; color: var(--dh-green); font-weight: 700;
  font-size: .8125rem; letter-spacing: .08em; text-transform: uppercase;
  margin: 0 0 .5rem;
}
.dh-lead { font-size: 1.15rem; color: var(--dh-navy); line-height: 1.6; max-width: 48ch; }
.dh-form-desc { color: var(--text-muted, #003252); margin-bottom: 1.5rem; text-align: center; }

/* Form Contact Form 7 kiểu De Heus */
.wpcf7 p { margin-bottom: 1rem; text-align: left; font-weight: 600; color: var(--dh-navy); }
.wpcf7 .wpcf7-form-control-wrap { display: block; margin-top: .35rem; font-weight: 400; }
.wpcf7 input.wpcf7-form-control:not(.wpcf7-submit),
.wpcf7 textarea.wpcf7-form-control,
.wpcf7 select.wpcf7-form-control {
  width: 100%; border: 1px solid var(--dh-border); border-radius: 6px;
  padding: 12px 16px; font-size: 1rem; background: #fff; transition: .2s; color: var(--text-color);
}
.wpcf7 input.wpcf7-form-control:focus,
.wpcf7 textarea.wpcf7-form-control:focus {
  border-color: var(--dh-green); box-shadow: 0 0 0 3px var(--dh-focus); outline: none;
}
.wpcf7 .wpcf7-submit {
  background: var(--dh-green) !important; color: #fff !important; border: 0 !important;
  border-radius: 999px !important; padding: 14px 34px !important; font-weight: 600 !important;
  font-size: 1rem !important; cursor: pointer; transition: .25s;
}
.wpcf7 .wpcf7-submit:hover { background: var(--dh-green-hover) !important; }
.dh-map { display: block; width: 100%; }

/* ============================================================================
   DE HEUS — LƯỚI BÀI VIẾT (blog archive) kiểu card như trang overview De Heus
   Chuyển layout mặc định (tiêu đề trên → ảnh) thành card (ảnh trên → meta → tiêu đề).
   ============================================================================ */
/* Bỏ sidebar, nội dung full-width, bỏ đường kẻ chia cột (De Heus overview không có sidebar) */
.blog-archive .row-large.row-divided { display: block !important; }
.blog-archive .post-sidebar { display: none !important; }
.blog-archive .row-large.row-divided > .large-9.col {
  max-width: 100% !important; flex-basis: 100% !important; width: 100% !important;
  padding-right: 0 !important; padding-left: 0 !important; border: 0 !important;
}

/* Lưới card: các bài viết nằm trong #post-list bên trong .large-9 */
.blog-archive #post-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}
@media (max-width: 849px) { .blog-archive #post-list { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 549px) { .blog-archive #post-list { grid-template-columns: 1fr; } }

/* mỗi bài -> 1 card */
.blog-archive #post-list > article { padding: 0 !important; margin: 0 !important; border: 0 !important; }
.blog-archive .article-inner {
  display: flex; flex-direction: column; height: 100%;
  background: #fff; border: 1px solid var(--dh-border);
  border-radius: 6px; overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease;
}
.blog-archive .article-inner:hover {
  transform: translateY(-4px); box-shadow: 0 12px 28px rgba(0,33,55,.10);
}

/* Thứ tự: ẢNH lên trên, rồi header (meta+tiêu đề), rồi nội dung */
.blog-archive .entry-image { order: 1; margin: 0 !important; }
.blog-archive .entry-image img { width: 100%; height: 210px; object-fit: cover; display: block; }
.blog-archive .entry-header-text { order: 2; padding: 1.1rem 1.25rem 0; display: flex; flex-direction: column; }
.blog-archive .entry-content { order: 3; padding: .25rem 1.25rem 1.25rem; margin-top: auto; }

/* meta (ngày) trên tiêu đề, tiêu đề navy đậm */
.blog-archive .entry-meta { order: 0; margin: 0 0 .4rem; color: var(--dh-green); opacity: .95; }
.blog-archive .entry-meta .byline { display: none; }
.blog-archive .entry-title { order: 1; font-size: 1.15rem; line-height: 1.25; margin: 0 0 .5rem; }
.blog-archive .entry-title a { color: var(--dh-navy); }
.blog-archive .entry-divider { display: none; }
.blog-archive .entry-content .more-link { margin-top: .5rem; }

/* ============================================================================
   DE HEUS — TRANG LIÊN HỆ: hero title/nút + thẻ thông tin liên hệ + label form
   ============================================================================ */
/* Tiêu đề hero căn trái, không gạch; tiêu đề form căn giữa, không gạch */
.dh-hero-title { margin: 0 0 1rem; }
.dh-form-title { text-align: center; margin: 0 0 .5rem; }
/* nút hero */
.dh-hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin: 1.75rem 0 0; }
.dh-hero-actions .button { margin: 0; }

/* Thẻ thông tin liên hệ (cột phải hero) — kiểu De Heus */
.dh-contact-card {
  border-radius: 10px; overflow: hidden;
  background: #f7fbfd; box-shadow: 0 10px 30px rgba(0,33,55,.08);
}
.dh-contact-card__header {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  background: var(--dh-blue); color: #fff; padding: 20px 24px;
  font-weight: 700; line-height: 1.35; font-size: 1.05rem;
}
.dh-contact-card__header .dh-chevron {
  flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.55);
  display: flex; align-items: center; justify-content: center;
}
.dh-contact-card__header .dh-chevron svg { width: 18px; height: 18px; }
.dh-contact-card__body { padding: 24px; }
.dh-contact-card__label,
.dh-address-label { font-weight: 700; color: var(--dh-navy); margin: 0 0 .7rem; }
.dh-address-label { margin-top: 1.4rem; }

.dh-contact-item {
  display: flex; align-items: center; gap: .75rem;
  background: #fff; border: 1px solid var(--dh-border); border-radius: 8px;
  padding: 14px 16px; margin-bottom: 12px;
  color: var(--dh-blue); text-decoration: none; font-weight: 500;
}
.dh-contact-item .dh-contact-item__icon { flex: 0 0 auto; display: inline-flex; color: var(--dh-blue); }
.dh-contact-item .dh-contact-item__icon svg { width: 20px; height: 20px; display: block; }
a.dh-contact-item:hover { border-color: var(--dh-blue); text-decoration: none; }
.dh-contact-item--address {
  display: block; color: var(--text-color); font-weight: 400; line-height: 1.5;
}
.dh-contact-item--address .dh-contact-link {
  display: inline-block; margin-top: .5rem; color: var(--dh-blue); font-weight: 600;
}

/* Label form CF7 -> navy đậm cho đồng bộ */
.wpcf7 label { color: var(--dh-navy); font-weight: 600; }
.wpcf7 .wpcf7-list-item-label { font-weight: 400; }