@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,600&display=swap');


/* ============================================================
   VINH PHAT — UNIVERSAL BRAND TYPOGRAPHY: BE VIETNAM PRO 100%
   Eliminates all legacy Playfair Display / Inter / Roboto diacritic glyph mismatches
============================================================ */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video,
input, textarea, select, button,
.nav, .nav > li > a, .header-nav, .header-nav-main,
.heading-font, .section-title, h1.section-title,
.title-main, .title-main h2, .alt-font,
.entry-title, .entry-content, .entry-content p,
.post-title, .box-text, .widget-title {
  font-family: 'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
}

/* ============================================================
   BẢO VỆ TUYỆT ĐỐI FONT AWESOME & FLATSOME ICONS KHỎI BỊ OVERRIDE FONT
   (Đảm bảo các icon điện thoại, email, địa chỉ hiển thị hoàn hảo)
============================================================ */
.fa, .fas, .far, .fab, .fa-solid, .fa-regular, .fa-brands, [class*="fa-"], [class^="fa-"] {
  font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", "FontAwesome" !important;
}
.far, .fa-regular {
  font-weight: 400 !important;
}
.fas, .fa-solid {
  font-weight: 900 !important;
}
.fab, .fa-brands {
  font-family: "Font Awesome 6 Brands", "FontAwesome" !important;
  font-weight: 400 !important;
}
[class*="icon-"], [class^="icon-"] {
  font-family: "fl-icons" !important;
}


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

/*************** ADD CUSTOM CSS HERE.   ***************/


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


}

/* ============================================================
   VINH PHAT — WIDGET LIEN HE NOI (BUTTON-CONTACT-VR) DONG BO TOAN SITE
============================================================ */
html body #button-contact-vr,
#button-contact-vr {
  position: fixed !important;
  right: 20px !important;
  left: auto !important;
  bottom: 25px !important;
  z-index: 99999 !important;
  width: 56px !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}

#button-contact-vr #gom-all-in-one {
  width: 56px !important;
  height: auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 12px !important;
  position: static !important;
  margin: 0 !important;
  padding: 0 !important;
}

#button-contact-vr .button-contact,
#zalo-vr.button-contact,
#phone-vr.button-contact {
  position: static !important;
  width: 56px !important;
  height: 56px !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 50% !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.22) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

#button-contact-vr .button-contact:hover {
  transform: scale(1.08) !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3) !important;
}

#button-contact-vr .phone-vr,
#zalo-vr .phone-vr,
#phone-vr .phone-vr {
  position: relative !important;
  width: 56px !important;
  height: 56px !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
}

#button-contact-vr .phone-vr-circle-fill,
#zalo-vr .phone-vr-circle-fill,
#phone-vr .phone-vr-circle-fill {
  position: absolute !important;
  inset: -4px !important;
  width: calc(100% + 8px) !important;
  height: calc(100% + 8px) !important;
  border-radius: 50% !important;
  z-index: 1 !important;
  animation: phone-vr-circle-fill 2s infinite ease-in-out !important;
}

#button-contact-vr .phone-vr-img-circle,
#zalo-vr .phone-vr-img-circle,
#phone-vr .phone-vr-img-circle {
  position: relative !important;
  width: 56px !important;
  height: 56px !important;
  border-radius: 50% !important;
  border: 2px solid #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  z-index: 2 !important;
}

/* Zalo (Xanh Zalo) */
#zalo-vr .phone-vr-circle-fill {
  background-color: rgba(0, 136, 255, 0.35) !important;
  box-shadow: 0 0 0 0 rgba(0, 136, 255, 0.7) !important;
}
#zalo-vr .phone-vr-img-circle {
  background: linear-gradient(135deg, #0088ff 0%, #0055d4 100%) !important;
}

/* Phone (Đỏ Vinh Phát) */
#phone-vr .phone-vr-circle-fill {
  background-color: rgba(220, 38, 38, 0.35) !important;
  box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.7) !important;
}
#phone-vr .phone-vr-img-circle {
  background: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%) !important;
}

#button-contact-vr .phone-vr-img-circle a {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  text-decoration: none !important;
}

#button-contact-vr .phone-vr-img-circle img {
  position: static !important;
  max-width: 28px !important;
  max-height: 28px !important;
  width: 28px !important;
  height: 28px !important;
  object-fit: contain !important;
  transform: none !important;
  display: block !important;
  filter: brightness(0) invert(1) !important;
}

/* Scroll to top (Bên TRÁI) */
/* Scroll to top (Bên TRÁI) - Nền trắng, vòng tiến trình & mũi tên xanh lá đậm */
#scroll-top-left {
  position: fixed !important;
  left: 20px !important;
  right: auto !important;
  bottom: 25px !important;
  z-index: 99998 !important;
  width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  color: #14532d !important;
  border: 1px solid rgba(20, 83, 45, 0.15) !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12) !important;
  transition: transform 0.2s ease, opacity 0.25s ease, box-shadow 0.2s ease !important;
}
#scroll-top-left:hover {
  transform: translateY(-3px) scale(1.05) !important;
  background: #ffffff !important;
  color: #15803d !important;
  box-shadow: 0 8px 24px rgba(20, 83, 45, 0.25) !important;
}
#scroll-top-left svg.stl-arrow {
  color: #14532d !important;
  stroke: #14532d !important;
}
#scroll-top-left svg.stl-ring circle.stl-track {
  stroke: rgba(20, 83, 45, 0.15) !important;
}
#scroll-top-left svg.stl-ring circle.stl-fill {
  stroke: #14532d !important;
}

@media (max-width: 600px) {
  html body #button-contact-vr,
  #button-contact-vr {
    right: 14px !important;
    bottom: 20px !important;
    width: 48px !important;
  }
  #button-contact-vr #gom-all-in-one {
    width: 48px !important;
    gap: 10px !important;
  }
  #button-contact-vr .button-contact,
  #zalo-vr.button-contact,
  #phone-vr.button-contact,
  #button-contact-vr .phone-vr,
  #button-contact-vr .phone-vr-img-circle {
    width: 48px !important;
    height: 48px !important;
  }
  #button-contact-vr .phone-vr-img-circle img {
    width: 24px !important;
    height: 24px !important;
    max-width: 24px !important;
    max-height: 24px !important;
  }
  #scroll-top-left {
    left: 14px !important;
    bottom: 20px !important;
    width: 44px !important;
    height: 44px !important;
  }
}


/* ============================================================
   VINH PHÁT — BẢNG GIÁ & BẢNG THÔNG TIN BRAND GREEN + GOLD
============================================================ */
table {
  border-radius: 14px !important;
  overflow: hidden !important;
  box-shadow: 0 6px 24px rgba(0,0,0,0.06) !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  border: 1px solid #e2e8f0 !important;
  width: 100% !important;
  margin: 20px 0 !important;
}
table thead tr, table thead th, table thead td, table th {
  background: linear-gradient(135deg, #14532d 0%, #0d3a22 100%) !important;
  color: #ffffff !important;
  font-family: 'Be Vietnam Pro', -apple-system, sans-serif !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  padding: 14px 18px !important;
  border: none !important;
  border-bottom: 3px solid #ffd21f !important;
}
table thead td strong, table thead th strong, table thead * {
  color: #ffffff !important;
}
table tbody tr:nth-child(even) {
  background: #f8fafc !important;
}
table tbody tr:nth-child(odd) {
  background: #ffffff !important;
}
table tbody tr:hover {
  background: #f0fdf4 !important;
  transition: background 0.15s ease !important;
}
table td {
  padding: 13px 18px !important;
  color: #334155 !important;
  font-family: 'Be Vietnam Pro', -apple-system, sans-serif !important;
  font-size: 14.5px !important;
  border-bottom: 1px solid #f1f5f9 !important;
}
table td[style*="color:#c9a227"], table td span[style*="color:#c9a227"] {
  color: #b45309 !important;
  font-weight: 800 !important;
}

/* Sidebar recent posts thumbnail fix */
.recent-blog-posts .badge.post-date {
  width: 52px !important;
  height: 52px !important;
  border-radius: 8px !important;
  overflow: hidden !important;
}
.recent-blog-posts .badge-inner.bg-fill {
  width: 100% !important;
  height: 100% !important;
  background-size: cover !important;
  background-position: center !important;
  border-radius: 8px !important;
}

/* ============================================================
   VINH PHÁT — DESIGN SYSTEM HARMONY ACROSS ALL PAGES
============================================================ */

/* 1. Global Typography & Heading Scale matching Trang Chủ */
body, button, input, select, textarea {
  font-family: 'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
}

h1, h2, h3, h4, h5, h6, .entry-title {
  font-family: 'Be Vietnam Pro', -apple-system, sans-serif !important;
  color: #1c1b19;
  font-weight: 700;
  line-height: 1.35;
}

.dark h1, .dark h2, .dark h3, .dark h4, .dark h5, .dark h6,
.dark .entry-title, .page-title.dark .entry-title, .page-title.dark h1,
.banner.dark h1, .section.dark h1 {
  color: #ffffff !important;
}

.entry-content {
  font-family: 'Be Vietnam Pro', -apple-system, sans-serif !important;
  font-size: 15.5px !important;
  line-height: 1.85 !important;
  color: #334155 !important;
}

.entry-content h2 {
  font-size: 22px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  margin: 32px 0 16px !important;
  padding-bottom: 8px !important;
  border-bottom: 2px solid #ffd21f !important;
}

.entry-content h3 {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: #14532d;
  margin: 24px 0 12px !important;
}

.entry-content p {
  margin-bottom: 18px !important;
  color: #334155;
}

/* ============================================================
   VINH PHAT — UNIVERSAL HIGH CONTRAST FOR ALL DARK BOXES & CTA (P34)
   Solves blurry text / dark text (#334155) on dark backgrounds
   across ALL 860+ pages (including #0f7b3f, #1f8a4c, gradients, etc.)
============================================================ */

/* 1. Mọi phần tử text bên trong các khung nền tối hoặc khung có khai báo color: #fff */
.entry-content [style*="background: #0f7b3f"] p,
.entry-content [style*="background:#0f7b3f"] p,
.entry-content [style*="background: #1f8a4c"] p,
.entry-content [style*="background:#1f8a4c"] p,
.entry-content [style*="background: #14532d"] p,
.entry-content [style*="background:#14532d"] p,
.entry-content [style*="background: #15803d"] p,
.entry-content [style*="background:#15803d"] p,
.entry-content [style*="background: #059669"] p,
.entry-content [style*="background:#059669"] p,
.entry-content [style*="background: #00712d"] p,
.entry-content [style*="background:#00712d"] p,
.entry-content [style*="background: #349631"] p,
.entry-content [style*="background:#349631"] p,
.entry-content [style*="background: #073b1e"] p,
.entry-content [style*="background:#073b1e"] p,
.entry-content [style*="background: #004d26"] p,
.entry-content [style*="background:#004d26"] p,
.entry-content [style*="background: #1e2530"] p,
.entry-content [style*="background:#1e2530"] p,
.entry-content [style*="background: #161c25"] p,
.entry-content [style*="background:#161c25"] p,
.entry-content [style*="background: #111"] p,
.entry-content [style*="background:#111"] p,
.entry-content [style*="background: #141414"] p,
.entry-content [style*="background:#141414"] p,
.entry-content [style*="background: #1a1a1a"] p,
.entry-content [style*="background:#1a1a1a"] p,
.entry-content [style*="background: #313131"] p,
.entry-content [style*="background:#313131"] p,
.entry-content [style*="background: #0068ff"] p,
.entry-content [style*="background:#0068ff"] p,
.entry-content [style*="background: #7c3aed"] p,
.entry-content [style*="background:#7c3aed"] p,
.entry-content [style*="background: #b91c1c"] p,
.entry-content [style*="background:#b91c1c"] p,
.entry-content [style*="background: linear-gradient"] p,
.entry-content [style*="background:linear-gradient"] p,
.entry-content [style*="color: #fff"] p,
.entry-content [style*="color:#fff"] p,
.entry-content [style*="color: #ffffff"] p,
.entry-content [style*="color:#ffffff"] p,
.entry-content [style*="color: white"] p {
  color: #ffffff !important;
}

/* 2. Tiêu đề và chữ in đậm trên nền tối */
.entry-content [style*="background: #0f7b3f"] strong,
.entry-content [style*="background:#0f7b3f"] strong,
.entry-content [style*="background: #1f8a4c"] strong,
.entry-content [style*="background:#1f8a4c"] strong,
.entry-content [style*="background: #073b1e"] strong,
.entry-content [style*="background:#073b1e"] strong,
.entry-content [style*="background: #004d26"] strong,
.entry-content [style*="background:#004d26"] strong,
.entry-content [style*="background: #14532d"] strong,
.entry-content [style*="background:#14532d"] strong,
.entry-content [style*="background: linear-gradient"] strong,
.entry-content [style*="background:linear-gradient"] strong,
.entry-content [style*="color: #fff"] strong,
.entry-content [style*="color:#fff"] strong,
.entry-content [style*="color: #ffffff"] strong,
.entry-content [style*="color:#ffffff"] strong {
  color: #ffffff !important;
}

.entry-content [style*="background: #0f7b3f"] h1,
.entry-content [style*="background: #0f7b3f"] h2,
.entry-content [style*="background: #0f7b3f"] h3,
.entry-content [style*="background: #0f7b3f"] h4,
.entry-content [style*="background:#0f7b3f"] h1,
.entry-content [style*="background:#0f7b3f"] h2,
.entry-content [style*="background:#0f7b3f"] h3,
.entry-content [style*="background:#0f7b3f"] h4,
.entry-content [style*="background: #1f8a4c"] h1,
.entry-content [style*="background: #1f8a4c"] h2,
.entry-content [style*="background: #1f8a4c"] h3,
.entry-content [style*="background: #1f8a4c"] h4,
.entry-content [style*="background: #073b1e"] h1,
.entry-content [style*="background: #073b1e"] h2,
.entry-content [style*="background: #073b1e"] h3,
.entry-content [style*="background: #073b1e"] h4,
.entry-content [style*="background: #004d26"] h1,
.entry-content [style*="background: #004d26"] h2,
.entry-content [style*="background: #004d26"] h3,
.entry-content [style*="background: #004d26"] h4,
.entry-content [style*="background: #14532d"] h1,
.entry-content [style*="background: #14532d"] h2,
.entry-content [style*="background: #14532d"] h3,
.entry-content [style*="background: #14532d"] h4,
.entry-content [style*="background: linear-gradient"] h1,
.entry-content [style*="background: linear-gradient"] h2,
.entry-content [style*="background: linear-gradient"] h3,
.entry-content [style*="background: linear-gradient"] h4,
.entry-content [style*="background:linear-gradient"] h1,
.entry-content [style*="background:linear-gradient"] h2,
.entry-content [style*="background:linear-gradient"] h3,
.entry-content [style*="background:linear-gradient"] h4,
.entry-content [style*="color: #fff"] h1,
.entry-content [style*="color: #fff"] h2,
.entry-content [style*="color: #fff"] h3,
.entry-content [style*="color: #fff"] h4,
.entry-content [style*="color:#fff"] h1,
.entry-content [style*="color:#fff"] h2,
.entry-content [style*="color:#fff"] h3,
.entry-content [style*="color:#fff"] h4 {
  color: #ffffff !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
}

/* 3. Phân biệt đoạn phụ màu ngọc nhạt sáng rõ */
.entry-content p[style*="color: #d1fae5"],
.entry-content p[style*="color:#d1fae5"] {
  color: #d1fae5 !important;
}

/* 4. Nút bấm trong CTA luôn có nền vàng nổi bật, chữ đậm sắc nét */
.entry-content [style*="background: #0f7b3f"] a[href^="tel:"],
.entry-content [style*="background:#0f7b3f"] a[href^="tel:"],
.entry-content [style*="background: #1f8a4c"] a[href^="tel:"],
.entry-content [style*="background:#1f8a4c"] a[href^="tel:"],
.entry-content [style*="background: #073b1e"] a[href^="tel:"],
.entry-content [style*="background:#073b1e"] a[href^="tel:"],
.entry-content [style*="background: #004d26"] a[href^="tel:"],
.entry-content [style*="background:#004d26"] a[href^="tel:"],
.entry-content [style*="background: linear-gradient"] a[href^="tel:"],
.entry-content [style*="background:linear-gradient"] a[href^="tel:"] {
  color: #0a2415 !important;
  background: #ffd21f !important;
  font-weight: 800 !important;
  text-decoration: none !important;
}

/* Phòng thủ độ rộng sidebar không bao giờ bị bóp méo */
@media (min-width: 850px) {
  .large-9.col {
    min-width: 0 !important;
    max-width: 75% !important;
  }
  .post-sidebar,
  .post-sidebar.large-3.col {
    min-width: 300px !important;
    max-width: 25% !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
  }
  .post-sidebar #secondary {
    width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* 2. Modern Table of Contents (TOC) matching Brand Green + Gold */
#toc_container {
  background: #f8fafc !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 12px !important;
  padding: 18px 24px !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.04) !important;
  margin: 24px 0 32px !important;
  width: auto !important;
  max-width: 100% !important;
  display: block !important;
}

#toc_container .toc_title {
  font-family: 'Be Vietnam Pro', sans-serif !important;
  font-weight: 800 !important;
  font-size: 15px !important;
  color: #14532d !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  border-bottom: 2px solid #ffd21f !important;
  padding-bottom: 8px !important;
  margin: 0 0 12px !important;
}

#toc_container ul.toc_list {
  margin-left: 0 !important;
  padding-left: 0 !important;
  list-style: none !important;
}

#toc_container ul.toc_list li {
  margin: 7px 0 !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
}

#toc_container ul.toc_list a {
  color: #1e293b !important;
  text-decoration: none !important;
  transition: color 0.15s ease, transform 0.15s ease !important;
  display: inline-block !important;
}

#toc_container ul.toc_list a:hover {
  color: #15803d !important;
  transform: translateX(4px) !important;
}

/* 3. Modern Dividers & Accents */
.entry-divider.is-divider.small {
  background-color: #ffd21f !important;
  height: 3px !important;
  width: 50px !important;
  margin: 14px auto 20px !important;
  border-radius: 2px !important;
}



/* ============================================================
   VINH PHAT — STICKY HEADER & SCROLL PERFECTION (P31)
============================================================ */
.header-wrapper.stuck,
#masthead.stuck,
header.stuck .header-wrapper {
  position: fixed !important;
  top: 33px !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  margin: 0 !important;
  transform: none !important;
  background: #ffffff !important;
  background-color: #ffffff !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
  z-index: 99997 !important;
}

.header-wrapper.stuck .header-main,
#masthead.stuck .header-main {
  background: #ffffff !important;
  background-color: #ffffff !important;
  height: 70px !important;
  min-height: 70px !important;
  display: block !important;
  width: 100% !important;
}

.header-wrapper.stuck .header-inner.flex-row,
.header-wrapper.stuck .header-inner.container,
#masthead.stuck .header-inner {
  display: flex !important;
  width: 100% !important;
  max-width: 1285px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  justify-content: space-between !important;
  align-items: center !important;
  height: 70px !important;
  box-sizing: border-box !important;
}lign-items: center !important;
}

.header-wrapper.stuck #logo img,
#masthead.stuck #logo img {
  max-height: 52px !important;
  padding: 0 !important;
  transition: max-height 0.2s ease;
}

.header-wrapper.stuck .header-bg-container,
.header-wrapper.stuck .header-bg-color {
  background: #ffffff !important;
  background-color: #ffffff !important;
  opacity: 1 !important;
}

/* ============================================================
   VINH PHAT — STICKY SIDEBAR CHO BÀI VIẾT & TRANG CON (P31)
============================================================ */
html {
  overflow-x: clip !important;
  overflow-y: auto !important;
}

body {
  overflow: visible !important;
  overflow-x: clip !important;
}

.post-sidebar {
  overflow: visible !important;
}

@media (min-width: 850px) {
  .post-sidebar #secondary,
  #secondary.widget-area,
  .sidebar-inner {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 90px !important;
    align-self: flex-start !important;
    overflow: visible !important;
  }
}


/* ============================================================
   VINH PHAT — ENHANCED TOC TITLE & TOGGLE BUTTON (P37)
============================================================ */
#toc_container {
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

#toc_container .toc_title {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  cursor: pointer !important;
  user-select: none !important;
  padding: 8px 12px !important;
  margin: -8px -12px 14px !important;
  border-radius: 8px !important;
  transition: background 0.2s ease !important;
}

#toc_container .toc_title:hover {
  background: rgba(21, 128, 61, 0.06) !important;
}

#toc_container .toc_toggle {
  display: inline-flex !important;
  align-items: center !important;
  margin-left: auto !important;
  cursor: pointer !important;
}

#toc_container .toc_toggle a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  padding: 0 !important;
  background: #f0fdf4 !important;
  border: 1.5px solid #86efac !important;
  border-radius: 6px !important;
  color: #15803d !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  text-decoration: none !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05) !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

#toc_container .toc_toggle a:hover,
#toc_container .toc_title:hover .toc_toggle a {
  background: #15803d !important;
  border-color: #15803d !important;
  color: #ffffff !important;
  box-shadow: 0 3px 8px rgba(21, 128, 61, 0.25) !important;
  transform: scale(1.06) !important;
}

#toc_container .toc_toggle_indicator {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
}

#toc_container .toc_toggle_indicator::before {
  font-size: 16px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}

#toc_container.contracted {
  padding-bottom: 14px !important;
  margin-bottom: 24px !important;
}

#toc_container.contracted .toc_title {
  margin-bottom: 0 !important;
  border-bottom: none !important;
  padding-bottom: 0 !important;
}

#toc_container.contracted ul,
#toc_container.contracted .toc_list {
  display: none !important;
}


/* ============================================================
   VINH PHAT — HERO BANNER BACKGROUNDS (P35)
============================================================ */
.theotinh-hero {
  background: linear-gradient(135deg, rgba(7, 59, 30, 0.90) 0%, rgba(0, 77, 38, 0.85) 50%, rgba(10, 36, 21, 0.93) 100%), url('/wp-content/uploads/2025/07/image005-5085-1627375637.webp') center/cover no-repeat !important;
  position: relative !important;
  overflow: hidden !important;
}

.banggia-hero-section {
  background: linear-gradient(135deg, rgba(7, 59, 30, 0.90) 0%, rgba(0, 77, 38, 0.85) 50%, rgba(10, 36, 21, 0.93) 100%), url('/wp-content/uploads/2025/07/thu-mua-phe-lieu-hai-phong-5.webp') center/cover no-repeat !important;
  position: relative !important;
  overflow: hidden !important;
}

.danhmuc-hero {
  background: linear-gradient(135deg, rgba(7, 59, 30, 0.90) 0%, rgba(0, 77, 38, 0.85) 50%, rgba(10, 36, 21, 0.93) 100%), url('/wp-content/uploads/2025/07/images1744254_9m1-scaled.webp') center/cover no-repeat !important;
  position: relative !important;
  overflow: hidden !important;
}


/* ============================================================
   VINH PHAT — THEO TINH REGIONAL HUB UI/UX & ANIMATION (P36)
============================================================ */
.theotinh-cards-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)) !important;
  gap: 28px !important;
}

.theotinh-card {
  background: #ffffff !important;
  border-radius: 18px !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.05) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  position: relative !important;
  overflow: hidden !important;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.35s ease !important;
  padding: 0 !important;
}

.theotinh-card:hover {
  transform: translateY(-8px) !important;
  box-shadow: 0 20px 36px -10px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(21, 128, 61, 0.2) !important;
  border-color: #86efac !important;
}

.card-accent-bar {
  height: 5px !important;
  width: 100% !important;
}
.bar-hcm { background: linear-gradient(90deg, #15803d, #22c55e) !important; }
.bar-danang { background: linear-gradient(90deg, #0284c7, #38bdf8) !important; }
.bar-dongnai { background: linear-gradient(90deg, #d97706, #fbbf24) !important; }
.bar-binhduong { background: linear-gradient(90deg, #4f46e5, #818cf8) !important; }
.bar-longan { background: linear-gradient(90deg, #0d9488, #2dd4bf) !important; }
.bar-toanquoc { background: linear-gradient(90deg, #dc2626, #f87171) !important; }
.bar-vungtau { background: linear-gradient(90deg, #0284c7, #06b6d4) !important; }
.bar-tayninh { background: linear-gradient(90deg, #7c3aed, #a855f7) !important; }

.theotinh-card .card-body {
  padding: 24px 24px 18px !important;
  flex: 1 !important;
}

.theotinh-card .card-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  margin-bottom: 12px !important;
  gap: 10px !important;
}

.theotinh-card .region-sub {
  display: block !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  color: #94a3b8 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  margin-bottom: 3px !important;
}

.theotinh-card .region-title {
  font-size: 20px !important;
  font-weight: 800 !important;
  color: #0a2415 !important;
  margin: 0 !important;
  font-family: 'Be Vietnam Pro', -apple-system, sans-serif !important;
  line-height: 1.3 !important;
}

.theotinh-card .badge-time {
  font-size: 12px !important;
  font-weight: 800 !important;
  padding: 5px 12px !important;
  border-radius: 20px !important;
  white-space: nowrap !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  line-height: 1 !important;
}
.badge-hcm { background: #dcfce7 !important; color: #15803d !important; }
.badge-danang { background: #e0f2fe !important; color: #0284c7 !important; }
.badge-dongnai { background: #fef3c7 !important; color: #b45309 !important; }
.badge-binhduong { background: #ede9fe !important; color: #6d28d9 !important; }
.badge-longan { background: #ccfbf1 !important; color: #0f766e !important; }
.badge-toanquoc { background: #fee2e2 !important; color: #b91c1c !important; }

.theotinh-card .region-desc {
  font-size: 14px !important;
  color: #475569 !important;
  line-height: 1.6 !important;
  margin-bottom: 16px !important;
}

.theotinh-card .kcn-box {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 10px !important;
  padding: 12px 14px !important;
  margin-bottom: 6px !important;
}

.theotinh-card .kcn-label {
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #334155 !important;
  margin-bottom: 4px !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}
.theotinh-card .kcn-label i { color: #15803d !important; }

.theotinh-card .kcn-list {
  font-size: 12.5px !important;
  color: #64748b !important;
  line-height: 1.5 !important;
}

.theotinh-card .card-footer {
  padding: 0 24px 22px !important;
}

.theotinh-card .btn-card {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 100% !important;
  text-align: center !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  padding: 12px 16px !important;
  border-radius: 10px !important;
  text-decoration: none !important;
  transition: all 0.25s ease !important;
  box-sizing: border-box !important;
}
.btn-hcm { background: #15803d !important; color: #ffffff !important; }
.btn-hcm:hover { background: #166534 !important; transform: translateY(-2px) !important; box-shadow: 0 6px 16px rgba(21, 128, 61, 0.3) !important; color: #fff !important; }

.btn-danang { background: #0284c7 !important; color: #ffffff !important; }
.btn-danang:hover { background: #0369a1 !important; transform: translateY(-2px) !important; box-shadow: 0 6px 16px rgba(2, 132, 199, 0.3) !important; color: #fff !important; }

.btn-dongnai { background: #d97706 !important; color: #ffffff !important; }
.btn-dongnai:hover { background: #b45309 !important; transform: translateY(-2px) !important; box-shadow: 0 6px 16px rgba(217, 119, 6, 0.3) !important; color: #fff !important; }

.btn-binhduong { background: #4f46e5 !important; color: #ffffff !important; }
.btn-binhduong:hover { background: #4338ca !important; transform: translateY(-2px) !important; box-shadow: 0 6px 16px rgba(79, 70, 229, 0.3) !important; color: #fff !important; }

.btn-longan { background: #0d9488 !important; color: #ffffff !important; }
.btn-longan:hover { background: #0f766e !important; transform: translateY(-2px) !important; box-shadow: 0 6px 16px rgba(13, 148, 136, 0.3) !important; color: #fff !important; }

.btn-toanquoc { background: #dc2626 !important; color: #ffffff !important; }
.btn-toanquoc:hover { background: #b91c1c !important; transform: translateY(-2px) !important; box-shadow: 0 6px 16px rgba(220, 38, 38, 0.3) !important; color: #fff !important; }

.btn-vungtau { background: #0284c7 !important; color: #ffffff !important; }
.btn-vungtau:hover { background: #0369a1 !important; transform: translateY(-2px) !important; box-shadow: 0 6px 16px rgba(2, 132, 199, 0.3) !important; color: #fff !important; }

.btn-tayninh { background: #7c3aed !important; color: #ffffff !important; }
.btn-tayninh:hover { background: #6d28d9 !important; transform: translateY(-2px) !important; box-shadow: 0 6px 16px rgba(124, 58, 237, 0.3) !important; color: #fff !important; }

.badge-vungtau { background: #e0f2fe !important; color: #0284c7 !important; }
.badge-tayninh { background: #f3e8ff !important; color: #7c3aed !important; }


/* Table styling */
.theotinh-table-card {
  margin-top: 60px !important;
  background: #ffffff !important;
  border-radius: 20px !important;
  border: 1px solid #e2e8f0 !important;
  padding: 38px 32px 32px !important;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.06) !important;
}

.theotinh-table {
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  font-size: 14px !important;
  font-family: 'Be Vietnam Pro', -apple-system, sans-serif !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  border: 1px solid #e2e8f0 !important;
  margin-bottom: 28px !important;
}

.theotinh-table thead tr {
  background: linear-gradient(135deg, #14532d 0%, #0d3a22 100%) !important;
  border-bottom: 3px solid #ffd21f !important;
}

.theotinh-table th {
  padding: 15px 18px !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  border: none !important;
  font-size: 14px !important;
  letter-spacing: 0.2px !important;
}

.theotinh-table th i {
  color: #ffd21f !important;
  margin-right: 6px !important;
}

.theotinh-table tbody tr {
  border-bottom: 1px solid #f1f5f9 !important;
  transition: background-color 0.2s ease !important;
}

.theotinh-table tbody tr:last-child {
  border-bottom: none !important;
}

.theotinh-table tbody tr:hover {
  background-color: #f0fdf4 !important;
}

.theotinh-table td {
  padding: 14px 18px !important;
  color: #475569 !important;
  border: none !important;
  border-bottom: 1px solid #f1f5f9 !important;
  vertical-align: middle !important;
}

.theotinh-table .col-region {
  color: #14532d !important;
  font-size: 14.5px !important;
}

.time-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 5px 14px !important;
  border-radius: 20px !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
}
.pill-red { background: #fee2e2 !important; color: #dc2626 !important; }
.pill-blue { background: #e0f2fe !important; color: #0284c7 !important; }
.pill-green { background: #dcfce7 !important; color: #15803d !important; }
.pill-gray { background: #f1f5f9 !important; color: #475569 !important; }

/* Bottom Integrated CTA */
.theotinh-cta-box {
  background: linear-gradient(135deg, #073b1e 0%, #004d26 50%, #0a2415 100%) !important;
  border-radius: 16px !important;
  padding: 28px 30px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 24px !important;
  flex-wrap: wrap !important;
  border-bottom: 3px solid #ffd21f !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15) !important;
}

.theotinh-cta-box .cta-actions {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
}

.btn-cta-phone {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: #ffd21f !important;
  color: #0a2415 !important;
  font-weight: 800 !important;
  font-size: 15px !important;
  padding: 12px 24px !important;
  border-radius: 30px !important;
  text-decoration: none !important;
  box-shadow: 0 4px 14px rgba(255, 210, 31, 0.4) !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}
.btn-cta-phone:hover {
  transform: translateY(-2px) scale(1.02) !important;
  box-shadow: 0 8px 22px rgba(255, 210, 31, 0.5) !important;
  color: #0a2415 !important;
}

.btn-cta-zalo {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: #0068ff !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 14.5px !important;
  padding: 12px 22px !important;
  border-radius: 30px !important;
  text-decoration: none !important;
  box-shadow: 0 4px 14px rgba(0, 104, 255, 0.3) !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}
.btn-cta-zalo:hover {
  background: #0056d6 !important;
  transform: translateY(-2px) scale(1.02) !important;
  box-shadow: 0 8px 20px rgba(0, 104, 255, 0.4) !important;
  color: #fff !important;
}

@media (max-width: 768px) {
  .theotinh-table-card { padding: 22px 16px !important; }
  .theotinh-cta-box { flex-direction: column !important; text-align: center !important; }
  .theotinh-cta-box .cta-actions { width: 100% !important; justify-content: center !important; }
  .btn-cta-phone, .btn-cta-zalo { width: 100% !important; justify-content: center !important; }
}


/* ============================================================
   VINH PHAT — ANCHOR SCROLL OFFSET FOR STICKY HEADER (P38)
============================================================ */
html {
  scroll-padding-top: 85px !important;
}

#ve-chung-toi,
#bang-gia-phe-lieu,
#dich-vu-thu-mua,
#cam-nang-phe-lieu,
#lien-he,
a[name="ve-chung-toi"],
a[name="bang-gia-phe-lieu"],
a[name="dich-vu-thu-mua"],
a[name="cam-nang-phe-lieu"],
a[name="lien-he"] {
  scroll-margin-top: 85px !important;
}

span.scroll-to a {
  display: block !important;
  position: relative !important;
  top: -85px !important;
  visibility: hidden !important;
  pointer-events: none !important;
}


/* ============================================================
   VINH PHAT — SITE-WIDE POLISH & MICRO-INTERACTIONS (P39)
============================================================ */

/* 1. Radar Pulse Rings & Vibrations for Floating Contact Widget */
@keyframes vp-radar-pulse {
  0% {
    transform: scale(0.9);
    opacity: 0.85;
  }
  50% {
    opacity: 0.45;
  }
  100% {
    transform: scale(1.6);
    opacity: 0;
  }
}

@keyframes vp-phone-shake {
  0%, 100% { transform: rotate(0deg); }
  2%, 6% { transform: rotate(-12deg); }
  4%, 8% { transform: rotate(12deg); }
  10% { transform: rotate(0deg); }
}

#button-contact-vr .button-contact {
  position: relative !important;
  overflow: visible !important;
}

#button-contact-vr .button-contact::before,
#button-contact-vr .button-contact::after {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: 50% !important;
  pointer-events: none !important;
  z-index: -1 !important;
}

/* Phone Pulse (Red) */
#phone-vr.button-contact::before {
  background: rgba(220, 38, 38, 0.45) !important;
  animation: vp-radar-pulse 2s infinite cubic-bezier(0.25, 1, 0.5, 1) !important;
}
#phone-vr.button-contact::after {
  background: rgba(220, 38, 38, 0.25) !important;
  animation: vp-radar-pulse 2s infinite 0.7s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

/* Zalo Pulse (Blue) */
#zalo-vr.button-contact::before {
  background: rgba(14, 116, 228, 0.45) !important;
  animation: vp-radar-pulse 2.2s infinite cubic-bezier(0.25, 1, 0.5, 1) !important;
}
#zalo-vr.button-contact::after {
  background: rgba(14, 116, 228, 0.25) !important;
  animation: vp-radar-pulse 2.2s infinite 0.8s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

/* Periodic vibration */
#phone-vr .phone-vr-img-circle,
#phone-vr .phone-vr-circle-fill,
#phone-vr img,
#phone-vr i {
  animation: vp-phone-shake 4s infinite ease-in-out !important;
}

/* 2. Scroll Top Button Left Polish */
#scroll-top-left {
  transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15) !important;
}
#scroll-top-left:hover {
  transform: translateY(-4px) scale(1.06) !important;
  box-shadow: 0 8px 22px rgba(21, 128, 61, 0.35) !important;
  border-color: #ffd21f !important;
}

/* 3. Gold & Green Buttons Soft Glow & Elevate */
.button.primary,
.btn.primary,
.hl-cta-primary,
a[href^="tel:0335319983"] {
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.2s ease !important;
}
.button.primary:hover,
.btn.primary:hover,
.hl-cta-primary:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 18px rgba(201, 162, 39, 0.38) !important;
}

/* 4. Global Card Hover Depth */
.box.has-hover,
.badge-container,
.theotinh-card,
.camnang-card {
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s ease !important;
}
/* ============================================================
   VINH PHAT — UNIVERSAL INTERACTIVE HOVER & MICRO-ANIMATIONS (P59)
   Elevates user engagement across all pages: cards, buttons,
   tables, chips, icons, and callouts with 60fps smooth physics.
============================================================ */

/* 1. Universal Interactive Card Hover (Thẻ quyền lợi, hoa hồng, quy trình, dịch vụ) */
.vp-card,
.vp-interactive-card,
.cat-card,
.lh-card,
.theotinh-card,
.box-blog-post,
[style*="border-top: 4px solid #c59b27"],
[style*="border-top: 4px solid #c9a227"],
[style*="border-top: 4px solid #0d3a22"],
[style*="border-left: 4px solid #c9a227"],
[style*="border-left: 4px solid #c59b27"],
[style*="border-left: 4px solid #e2c368"],
[style*="border: 2px dashed #0d3a22"],
[style*="border: 2px dashed #c59b27"] {
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), 
              box-shadow 0.28s cubic-bezier(0.16, 1, 0.3, 1), 
              border-color 0.25s ease,
              background-color 0.25s ease !important;
  will-change: transform, box-shadow;
}

.vp-card:hover,
.vp-interactive-card:hover,
[style*="border-top: 4px solid #c59b27"]:hover,
[style*="border-top: 4px solid #c9a227"]:hover,
[style*="border-top: 4px solid #0d3a22"]:hover,
[style*="border-left: 4px solid #c9a227"]:hover,
[style*="border-left: 4px solid #c59b27"]:hover,
[style*="border-left: 4px solid #e2c368"]:hover,
[style*="border: 2px dashed #0d3a22"]:hover,
[style*="border: 2px dashed #c59b27"]:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 16px 36px rgba(13, 58, 34, 0.12), 0 4px 12px rgba(201, 162, 39, 0.08) !important;
  border-color: #c9a227 !important;
}

/* 2. Interactive FAQ Accordion Cards */
div[style*="box-shadow: 0 2px 6px rgba(0,0,0,0.03)"],
div[style*="box-shadow:0 2px 6px rgba(0,0,0,0.03)"] {
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), 
              box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1), 
              border-color 0.22s ease !important;
}
div[style*="box-shadow: 0 2px 6px rgba(0,0,0,0.03)"]:hover,
div[style*="box-shadow:0 2px 6px rgba(0,0,0,0.03)"]:hover {
  transform: translateX(6px) !important;
  border-color: #c9a227 !important;
  box-shadow: 0 8px 22px rgba(13, 58, 34, 0.08) !important;
}

/* 3. Interactive Table Rows (Bảng giá, bảng chiết khấu) */
.entry-content table tbody tr,
table[data-path-to-node] tbody tr,
table[style*="border-collapse: collapse"] tbody tr {
  transition: background-color 0.2s ease, transform 0.15s ease !important;
}
.entry-content table tbody tr:hover,
table[data-path-to-node] tbody tr:hover,
table[style*="border-collapse: collapse"] tbody tr:hover {
  background-color: rgba(201, 162, 39, 0.09) !important;
  cursor: pointer !important;
}
.entry-content table tbody tr:hover td,
table[data-path-to-node] tbody tr:hover td,
table[style*="border-collapse: collapse"] tbody tr:hover td {
  color: #0d3a22 !important;
}
.entry-content table tbody tr:hover td b,
.entry-content table tbody tr:hover td strong,
.entry-content table tbody tr:hover td span[style*="color"] {
  color: #c9a227 !important;
}

/* 4. Button Pulse & Hover Elevate (Nút Hotline, Zalo, CTA, Báo giá) */
.ck-hero-banner a,
.tl-btn,
.lh-submit-btn,
a[href^="tel:"],
a[href*="zalo.me"],
.btn-cta,
.button.primary,
a[style*="background: #ffcc00"],
a[style*="background:#ffcc00"],
a[style*="background: #0068ff"],
a[style*="background:#0068ff"] {
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), 
              box-shadow 0.22s cubic-bezier(0.16, 1, 0.3, 1), 
              filter 0.2s ease !important;
  will-change: transform, box-shadow;
}
.ck-hero-banner a:hover,
.tl-btn:hover,
a[href^="tel:"]:hover,
a[href*="zalo.me"]:hover,
.btn-cta:hover,
a[style*="background: #ffcc00"]:hover,
a[style*="background:#ffcc00"]:hover,
a[style*="background: #0068ff"]:hover,
a[style*="background:#0068ff"]:hover {
  transform: translateY(-3px) scale(1.02) !important;
  filter: brightness(1.08) !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22) !important;
}
.ck-hero-banner a:active,
a[href^="tel:"]:active,
a[href*="zalo.me"]:active {
  transform: translateY(-1px) scale(0.99) !important;
}

/* 5. Filter Chips & Quick Pills Micro-interaction (Cẩm nang, Bảng giá, Hero) */
.hl-khuvuc-chip,
.cat-btn,
.ck-hero-banner span[style*="border-radius: 20px"],
.banggia-hero-section div[style*="border-radius:24px"],
.danhmuc-hero div[style*="border-radius:24px"],
div[style*="border-radius: 8px; border: 1px solid rgba(255,255,255,0.15)"],
div[style*="border-radius:8px;border:1px solid rgba(255,255,255,0.15)"] {
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), 
              box-shadow 0.2s cubic-bezier(0.16, 1, 0.3, 1), 
              background-color 0.2s ease, 
              border-color 0.2s ease !important;
  cursor: pointer;
}
.hl-khuvuc-chip:hover,
.cat-btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 16px rgba(13, 58, 34, 0.16) !important;
  border-color: #c9a227 !important;
}
.ck-hero-banner span[style*="border-radius: 20px"]:hover,
.banggia-hero-section div[style*="border-radius:24px"]:hover,
.danhmuc-hero div[style*="border-radius:24px"]:hover,
div[style*="border-radius: 8px; border: 1px solid rgba(255,255,255,0.15)"]:hover,
div[style*="border-radius:8px;border:1px solid rgba(255,255,255,0.15)"]:hover {
  transform: translateY(-2px) !important;
  background-color: rgba(255, 255, 255, 0.20) !important;
  border-color: rgba(255, 210, 31, 0.6) !important;
}

/* 6. Image Zoom & Card Hover in Blog Posts & Category Grid */
.cat-card,
.box-blog-post {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), 
              box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1), 
              border-color 0.25s ease !important;
}
.cat-card:hover,
.box-blog-post:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 18px 40px rgba(13, 58, 34, 0.14) !important;
  border-color: #c9a227 !important;
}
.cat-card:hover .thumb img,
.box-blog-post:hover .box-image img,
.box-blog-post:hover img {
  transform: scale(1.07) !important;
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.cat-card .more {
  transition: transform 0.25s ease, color 0.25s ease !important;
}
.cat-card:hover .more {
  transform: translateX(6px) !important;
  color: #c9a227 !important;
}


/* ============================================================
   VINH PHAT — CHUAN HOA SIDEBAR WIDGETS DONG BO BRAND 100%
============================================================ */
.widget-title,
span.widget-title,
.sidebar .widget-title,
.sidebar .widgettitle,
.widgettitle {
  background: #0d3a22 !important;
  color: #ffd21f !important;
  font-family: 'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  padding: 12px 18px !important;
  border-radius: 8px 8px 0 0 !important;
  display: block !important;
  text-align: left !important;
  margin-bottom: 15px !important;
  box-shadow: 0 3px 10px rgba(13,58,34,0.18) !important;
  border-left: 4px solid #ffd21f !important;
}

.widget-title span,
span.widget-title span {
  color: #ffd21f !important;
}

/* Sidebar Recent Posts List refinement */
.widget_recent_entries ul li,
.recent-posts-widget li,
.sidebar ul li {
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), background 0.2s ease;
  border-radius: 6px;
  padding: 4px 6px;
}
.widget_recent_entries ul li:hover,
.recent-posts-widget li:hover,
.sidebar ul li:hover {
  background: rgba(13, 58, 34, 0.04);
  transform: translateX(4px);
}
.widget_recent_entries ul li a:hover,
.recent-posts-widget li a:hover,
.sidebar ul li a:hover {
  color: #0d3a22 !important;
  font-weight: 700 !important;
}

/* Mega Menu Khu Vuc Thu Mua - Can phai de khong tran man hinh */



/* Mega Menu Khu Vuc Thu Mua - Nen trang dac, khong bi max-height 0px, can phai khong tran man hinh */
.vp-mega-khuvuc {
  background: #ffffff !important;
  background-color: #ffffff !important;
  right: 0 !important;
  left: auto !important;
  z-index: 9999 !important;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.18) !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}


/* ============================================================
   VINH PHÁT — BỘ PHÂN TRANG & NÚT XEM THÊM CHUẨN FLATSOME LONG THÀNH
============================================================ */
.cn-loadmore-btn, .hl-loadmore-btn, .btn-flatsome-loadmore {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  margin: 0 auto 16px !important;
  padding: 10px 28px !important;
  background: #ffffff !important;
  border: 1.5px solid #c9a227 !important;
  border-radius: 4px !important;
  color: #c9a227 !important;
  font-weight: 700 !important;
  font-size: 13.5px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  box-shadow: none !important;
  font-family: "Be Vietnam Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  letter-spacing: 0.6px !important;
  text-transform: uppercase !important;
  outline: none !important;
  line-height: 1.4 !important;
  text-decoration: none !important;
}
.cn-loadmore-btn:hover, .hl-loadmore-btn:hover, .btn-flatsome-loadmore:hover {
  background: #c9a227 !important;
  color: #ffffff !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 14px rgba(201,162,39,0.3) !important;
}

/* Dãy số phân trang hình tròn chuẩn Flatsome Long Thành */
.page-numbers.nav-pagination, ul.nav-pagination, .ux-relay__pagination {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 auto !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}
.page-numbers.nav-pagination li, ul.nav-pagination li, .ux-relay__pagination li {
  margin: 0 !important;
  padding: 0 !important;
  display: inline-block !important;
}
.page-numbers.nav-pagination .page-number, ul.nav-pagination .page-number, .ux-relay__pagination .page-number {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
  font-family: "Be Vietnam Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  background: #ffffff !important;
  border: 1px solid #222222 !important;
  color: #222222 !important;
  line-height: 1 !important;
  cursor: pointer !important;
  padding: 0 !important;
}
/* Trang hiện tại: Tròn nền vàng hoàng kim #c9a227, chữ trắng */
.page-numbers.nav-pagination .page-number.current, ul.nav-pagination .page-number.current, .ux-relay__pagination .page-number.current {
  background: #c9a227 !important;
  border-color: #c9a227 !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  cursor: default !important;
}
/* Hover vào số khác */
.page-numbers.nav-pagination .page-number:not(.current):not(.dots):hover,
ul.nav-pagination .page-number:not(.current):not(.dots):hover,
.ux-relay__pagination .page-number:not(.current):not(.dots):hover {
  border-color: #c9a227 !important;
  color: #c9a227 !important;
  background: #fefcf3 !important;
  transform: scale(1.06) !important;
}
/* Dấu ba chấm */
.page-numbers.nav-pagination .page-number.dots, ul.nav-pagination .page-number.dots, .ux-relay__pagination .page-number.dots {
  border: 1px solid #222222 !important;
  cursor: default !important;
  background: #ffffff !important;
}

/* ==========================================================================
   MEGA MENU KHU VỰC THU MUA - PHẾ LIỆU VINH PHÁT (P120)
   Hiệu ứng di chuột (hover) sang trọng, mượt mà & đồng bộ nhận diện thương hiệu
   ========================================================================== */

/* Animation xuất hiện dropdown */
@keyframes vpMenuFadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Khung dropdown tổng */
.vp-mega-khuvuc {
  background: #ffffff !important;
  background-color: #ffffff !important;
  right: 0 !important;
  left: auto !important;
  z-index: 9999 !important;
  box-shadow: 0 18px 45px rgba(19, 70, 17, 0.15), 0 4px 15px rgba(0, 0, 0, 0.08) !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  border-radius: 10px !important;
  border: 1px solid #e2e8f0 !important;
  border-top: 3.5px solid #c9a227 !important; /* Điểm nhấn viền vàng hoàng kim */
  padding: 18px 20px !important;
  animation: vpMenuFadeIn 0.22s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

/* Tiêu đề cột */
.vp-mega-khuvuc a[style*="text-transform:uppercase"],
.vp-mega-khuvuc span[style*="text-transform:uppercase"] {
  font-family: "Be Vietnam Pro", sans-serif !important;
  letter-spacing: 0.5px !important;
  transition: color 0.2s ease !important;
}
.vp-mega-khuvuc a[style*="text-transform:uppercase"]:hover {
  color: #c9a227 !important;
}

/* Danh sách khu vực */
.vp-mega-khuvuc ul {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.vp-mega-khuvuc ul li {
  margin: 3px 0 !important;
  padding: 0 !important;
}

/* Từng liên kết khu vực trong danh sách */
.vp-mega-khuvuc ul li a {
  display: flex !important;
  align-items: center !important;
  padding: 6px 12px !important;
  border-radius: 6px !important;
  color: #334155 !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  line-height: 1.5 !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  position: relative !important;
}

/* HIỆU ỨNG DI CHUỘT (HOVER) CHO TỪNG DÒNG */
.vp-mega-khuvuc ul li a:hover {
  background-color: #f0fdf4 !important; /* Nền xanh thảo mộc nhạt */
  color: #134611 !important; /* Chữ chuyển sang Xanh rừng đậm Vinh Phát */
  font-weight: 600 !important;
  transform: translateX(6px) !important; /* Trượt nhẹ sang phải sang trọng */
  box-shadow: 0 2px 8px rgba(19, 70, 17, 0.08) !important;
}

/* Điểm nhấn chữ khi hover */
.vp-mega-khuvuc ul li a:hover span[style*="font-weight:600"] {
  color: #134611 !important;
}

/* Badge [Trụ sở] tại Bình Chánh */
.vp-mega-khuvuc span[style*="background:#e2f7ea"],
.vp-mega-khuvuc span[style*="background: #e2f7ea"] {
  background: linear-gradient(135deg, #134611 0%, #1b5e20 100%) !important;
  color: #ffffff !important;
  border: 1px solid #c9a227 !important; /* Viền vàng hoàng kim sang trọng */
  padding: 2px 8px !important;
  border-radius: 12px !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.3px !important;
  box-shadow: 0 1px 4px rgba(19, 70, 17, 0.25) !important;
  transition: all 0.2s ease !important;
}

.vp-mega-khuvuc ul li a:hover span[style*="background:#e2f7ea"],
.vp-mega-khuvuc ul li a:hover span[style*="background: #e2f7ea"] {
  background: #c9a227 !important;
  color: #ffffff !important;
  border-color: #134611 !important;
  transform: scale(1.06) !important;
}

/* Nút CTA cuối cột 1: Xem tất cả 22 Quận Huyện */
.vp-mega-khuvuc ul li[style*="dashed"] a[href*="tp-hcm"] {
  display: block !important;
  text-align: center !important;
  background: #f0fdf4 !important;
  border: 1px solid #134611 !important;
  color: #134611 !important;
  padding: 7px 12px !important;
  border-radius: 6px !important;
  font-weight: 700 !important;
  font-size: 12.5px !important;
  margin-top: 6px !important;
  transition: all 0.2s ease !important;
  transform: none !important;
}

.vp-mega-khuvuc ul li[style*="dashed"] a[href*="tp-hcm"]:hover {
  background: #134611 !important;
  color: #ffffff !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(19, 70, 17, 0.25) !important;
}

/* Nút CTA cuối cột 2: Mạng Lưới Toàn Quốc */
.vp-mega-khuvuc ul li[style*="dashed"] a[href*="theo-tinh"] {
  display: block !important;
  text-align: center !important;
  background: #fefce8 !important;
  border: 1px solid #c9a227 !important;
  color: #c9a227 !important;
  padding: 7px 12px !important;
  border-radius: 6px !important;
  font-weight: 800 !important;
  font-size: 12.5px !important;
  margin-top: 6px !important;
  transition: all 0.2s ease !important;
  transform: none !important;
}

.vp-mega-khuvuc ul li[style*="dashed"] a[href*="theo-tinh"]:hover {
  background: #c9a227 !important;
  color: #ffffff !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(201, 162, 39, 0.35) !important;
}

/* ==========================================================================
   MEGA MENU KHU VỰC THU MUA - PHẾ LIỆU VINH PHÁT (P120)
   Hiệu ứng di chuột (hover) sang trọng, mượt mà & đồng bộ nhận diện thương hiệu
   ========================================================================== */

/* Animation xuất hiện dropdown */
@keyframes vpMenuFadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Khung dropdown tổng */
.vp-mega-khuvuc {
  background: #ffffff !important;
  background-color: #ffffff !important;
  right: 0 !important;
  left: auto !important;
  z-index: 9999 !important;
  box-shadow: 0 18px 45px rgba(19, 70, 17, 0.15), 0 4px 15px rgba(0, 0, 0, 0.08) !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  border-radius: 10px !important;
  border: 1px solid #e2e8f0 !important;
  border-top: 3.5px solid #c9a227 !important; /* Điểm nhấn viền vàng hoàng kim */
  padding: 18px 20px !important;
  animation: vpMenuFadeIn 0.22s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

/* Tiêu đề cột */
.vp-mega-khuvuc a[style*="text-transform:uppercase"],
.vp-mega-khuvuc span[style*="text-transform:uppercase"] {
  font-family: "Be Vietnam Pro", sans-serif !important;
  letter-spacing: 0.5px !important;
  transition: color 0.2s ease !important;
}
.vp-mega-khuvuc a[style*="text-transform:uppercase"]:hover {
  color: #c9a227 !important;
}

/* Danh sách khu vực */
.vp-mega-khuvuc ul {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.vp-mega-khuvuc ul li {
  margin: 3px 0 !important;
  padding: 0 !important;
}

/* Từng liên kết khu vực trong danh sách */
.vp-mega-khuvuc ul li a {
  display: flex !important;
  align-items: center !important;
  padding: 6px 12px !important;
  border-radius: 6px !important;
  color: #334155 !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  line-height: 1.5 !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  position: relative !important;
}

/* HIỆU ỨNG DI CHUỘT (HOVER) CHO TỪNG DÒNG */
.vp-mega-khuvuc ul li a:hover {
  background-color: #f0fdf4 !important; /* Nền xanh thảo mộc nhạt */
  color: #134611 !important; /* Chữ chuyển sang Xanh rừng đậm Vinh Phát */
  font-weight: 600 !important;
  transform: translateX(6px) !important; /* Trượt nhẹ sang phải sang trọng */
  box-shadow: 0 2px 8px rgba(19, 70, 17, 0.08) !important;
}

/* Điểm nhấn chữ khi hover */
.vp-mega-khuvuc ul li a:hover span[style*="font-weight:600"] {
  color: #134611 !important;
}

/* Badge [Trụ sở] tại Bình Chánh */
.vp-mega-khuvuc span[style*="background:#e2f7ea"],
.vp-mega-khuvuc span[style*="background: #e2f7ea"] {
  background: linear-gradient(135deg, #134611 0%, #1b5e20 100%) !important;
  color: #ffffff !important;
  border: 1px solid #c9a227 !important; /* Viền vàng hoàng kim sang trọng */
  padding: 2px 8px !important;
  border-radius: 12px !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.3px !important;
  box-shadow: 0 1px 4px rgba(19, 70, 17, 0.25) !important;
  transition: all 0.2s ease !important;
}

.vp-mega-khuvuc ul li a:hover span[style*="background:#e2f7ea"],
.vp-mega-khuvuc ul li a:hover span[style*="background: #e2f7ea"] {
  background: #c9a227 !important;
  color: #ffffff !important;
  border-color: #134611 !important;
  transform: scale(1.06) !important;
}

/* Nút CTA cuối cột 1: Xem tất cả 22 Quận Huyện */
.vp-mega-khuvuc ul li[style*="dashed"] a[href*="tp-hcm"] {
  display: block !important;
  text-align: center !important;
  background: #f0fdf4 !important;
  border: 1px solid #134611 !important;
  color: #134611 !important;
  padding: 7px 12px !important;
  border-radius: 6px !important;
  font-weight: 700 !important;
  font-size: 12.5px !important;
  margin-top: 6px !important;
  transition: all 0.2s ease !important;
  transform: none !important;
}

.vp-mega-khuvuc ul li[style*="dashed"] a[href*="tp-hcm"]:hover {
  background: #134611 !important;
  color: #ffffff !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(19, 70, 17, 0.25) !important;
}

/* Nút CTA cuối cột 2: Mạng Lưới Toàn Quốc */
.vp-mega-khuvuc ul li[style*="dashed"] a[href*="theo-tinh"] {
  display: block !important;
  text-align: center !important;
  background: #fefce8 !important;
  border: 1px solid #c9a227 !important;
  color: #c9a227 !important;
  padding: 7px 12px !important;
  border-radius: 6px !important;
  font-weight: 800 !important;
  font-size: 12.5px !important;
  margin-top: 6px !important;
  transition: all 0.2s ease !important;
  transform: none !important;
}

.vp-mega-khuvuc ul li[style*="dashed"] a[href*="theo-tinh"]:hover {
  background: #c9a227 !important;
  color: #ffffff !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(201, 162, 39, 0.35) !important;
}

/* P122: Fix footer danh muc thu mua links - tang do sang */
#section_463223366 ul li a,
.footer-1 ul li a,
footer .col-inner ul li a {
  color: rgba(255,255,255,0.85) !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
}
#section_463223366 ul li a:hover,
.footer-1 ul li a:hover,
footer .col-inner ul li a:hover {
  color: #c9a227 !important;
}

/* ============================================================
   P124 — Burger Toggle: Nut X dong menu off-canvas mobile
   ============================================================ */

/* Nut X dong menu trong off-canvas sidebar */
.vp-menu-close-x {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 9999;
  width: 40px;
  height: 40px;
  background: rgba(255,255,255,0.12);
  border: 1.5px solid rgba(255,255,255,0.25);
  border-radius: 8px;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
  flex-shrink: 0;
}
.vp-menu-close-x:hover,
.vp-menu-close-x:active {
  background: rgba(201,162,39,0.3);
  transform: rotate(90deg);
}

/* mobile-sidebar can ban de absolute hoat dong */
.mfp-content .mobile-sidebar {
  position: relative;
}

/* Lop phu mfp-bg cho phep click dong */
.off-canvas .mfp-bg {
  cursor: pointer;
}


/* ============================================================
   VINH PHAT — TICKER GIÁ PHẾ LIỆU SIÊU MƯỢT & BẢO ĐẢM HOẠT ĐỘNG 100%
============================================================ */
#tl-ticker {
  background: #1a1a1a !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  box-sizing: border-box !important;
  height: 33px !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 99998 !important;
}

body.admin-bar #tl-ticker {
  top: 32px !important;
}

body:not(.admin-bar) {
  padding-top: 33px !important;
}

body.admin-bar {
  padding-top: 65px !important;
}

.tl-t-label {
  background: #c9a227 !important;
  color: #1a1a1a !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  padding: 0 14px !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  letter-spacing: .5px !important;
  z-index: 2 !important;
}

.tl-t-wrap {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  overflow: hidden !important;
  position: relative !important;
}

.tl-t-track {
  display: flex !important;
  width: max-content !important;
  white-space: nowrap !important;
  -webkit-animation: tl-run 45s linear infinite !important;
  animation: tl-run 45s linear infinite !important;
  will-change: transform !important;
}

@media (hover: hover) and (pointer: fine) {
  .tl-t-track:hover {
    -webkit-animation-play-state: paused !important;
    animation-play-state: paused !important;
  }
}

.tl-t-item {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  font-size: 12px !important;
  color: #ccc !important;
  padding: 0 0 0 36px !important;
  height: 33px !important;
  flex-shrink: 0 !important;
}

.tl-t-item b {
  color: #c9a227 !important;
  font-weight: 700 !important;
}

.tl-t-sep {
  color: #3a3a3a !important;
  padding-left: 36px !important;
  font-size: 14px !important;
  flex-shrink: 0 !important;
}

@-webkit-keyframes tl-run {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  100% {
    -webkit-transform: translate3d(-50%, 0, 0);
    transform: translate3d(-50%, 0, 0);
  }
}

@keyframes tl-run {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  100% {
    -webkit-transform: translate3d(-50%, 0, 0);
    transform: translate3d(-50%, 0, 0);
  }
}

/* ============================================================
   VINH PHAT — HEADER RESPONSIVE & KHÔNG DÍNH CHÙM / ĐÈ BẸP
============================================================ */
#masthead .header-inner {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
}

#masthead .flex-col.logo {
  flex: 0 0 auto !important;
  margin-right: 12px !important;
}

#masthead .flex-grow {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

#masthead .flex-col.flex-right {
  flex: 0 0 auto !important;
  padding-left: 12px !important;
}

/* Menu desktop thoáng đãng, sắc nét, co giãn tự nhiên */
#masthead ul.header-nav-main.nav-left {
  display: flex !important;
  flex-wrap: nowrap !important;
  justify-content: center !important;
  gap: 2px !important;
  margin: 0 !important;
  padding: 0 !important;
}

#masthead ul.header-nav-main.nav-left > li > a {
  font-size: 12px !important;
  padding: 0 8px !important;
  white-space: nowrap !important;
  letter-spacing: 0.2px !important;
  transition: color 0.15s ease !important;
}

@media (min-width: 1200px) and (max-width: 1360px) {
  #masthead ul.header-nav-main.nav-left > li > a {
    font-size: 11px !important;
    padding: 0 5px !important;
  }
  #masthead ul.header-nav.nav-right .button {
    font-size: 11.5px !important;
    padding: 0 12px !important;
  }
}

@media (min-width: 850px) and (max-width: 1199px) {
  #masthead ul.header-nav-main.nav-left > li > a {
    font-size: 10.5px !important;
    padding: 0 4px !important;
  }
  #masthead ul.header-nav.nav-right .button {
    font-size: 11px !important;
    padding: 0 10px !important;
  }
}

/* Banner trang con dịch vụ phế liệu - Vinh Phát */
.vp-subpage-banner {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  margin: 16px auto 24px;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}