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

/* ==========================================================================
   [SETTINGS & BASE]
   Design Tokens, Variables, Keyframe Animations & Resets
   ========================================================================== */
@import url("https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,600&family=Cormorant+Garamond:ital,wght@0,500;0,600;0,700;1,400;1,600&family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700&family=Source+Sans+3:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap&subset=vietnamese");

:root {
  /* Brand color tokens */
  --primary-navy: #18346b;

  /* Xanh navy đậm chủ đạo */
  --secondary-navy: #2f5597;

  /* Xanh thương hiệu */
  --soft-blue: #4567ab;

  /* Xanh biển nhạt điểm nhấn */
  --accent-gold: #b1976b;

  /* Vàng đồng sang trọng */
  --accent-gold-light: #d4be98;

  /* Vàng đồng ánh kim */
  --accent-gold-glow: rgba(177, 151, 107, 0.35);
  --color-primary: #b1976b;
  --color-navy: #18346b;
  --color-green: #14976b;
  --container-max: 1260px;
  --gap-section: 24px;
  --bp-tablet: 550px;
  --bp-desktop: 850px;
  --kc-navy: #18346b;

  /* Alias tương thích */
  --kc-gold: #b1976b;

  /* Alias tương thích */
  --bg-light: #f4f7fd;

  /* Nền xám xanh nhạt cao cấp */
  --bg-subtle: #f8fafd;

  /* Nền phụ dịu mắt */
  --text-dark: #2d3748;

  /* Chữ tiêu đề tối */
  --text-muted: #556277;

  /* Chữ nội dung */
  --border-subtle: rgba(69, 103, 171, 0.14);
  --border-gold: rgba(177, 151, 107, 0.45);

  /* Typography */
  --font-serif: "Merriweather", "Cormorant Garamond", Georgia, serif;
  --font-serif-alt: "Cormorant Garamond", Georgia, serif;
  --font-sans:
    "Be Vietnam Pro", "Source Sans 3", -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, sans-serif;

  /* Shadows */
  --shadow-sm: 0 4px 14px rgba(24, 52, 107, 0.06);
  --shadow-md: 0 8px 26px rgba(24, 52, 107, 0.1);
  --shadow-hover: 0 18px 44px rgba(24, 52, 107, 0.16);
  --shadow-gold: 0 14px 35px rgba(177, 151, 107, 0.28);

  /* Footer Design Tokens */
  --kav-ft-bg: #f1f5f9;
  --kav-ft-bg-darker: #e2e8f0;
  --kav-ft-heading-color: #0f172a;
  --kav-ft-text-color: #334155;
  --kav-ft-link-color: #1e3a8a;
  --kav-ft-brand-navy: #1e3a8a;
  --kav-ft-border: #e2e8f0;
  --kav-ft-font-heading: "Be Vietnam Pro", "Segoe UI", Arial, sans-serif;
  --kav-ft-font-body: "Be Vietnam Pro", "Segoe UI", Arial, sans-serif;
  --kav-ft-pad-top: 55px;
  --kav-ft-pad-bottom: 45px;
}

/* Base resets */

p {
  line-height: 1.2;
  font-size: 16px;
}

/* Keyframe Animations */

@keyframes marquee {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}

@keyframes marquee-reverse {
  0% {
    transform: translateX(-50%);
  }

  100% {
    transform: translateX(0);
  }
}

@keyframes ring {
  0% {
    transform: rotate(0) scale(1) skew(1deg);
  }

  10% {
    transform: rotate(-25deg) scale(1) skew(1deg);
  }

  20% {
    transform: rotate(25deg) scale(1) skew(1deg);
  }

  30% {
    transform: rotate(-25deg) scale(1) skew(1deg);
  }

  40% {
    transform: rotate(25deg) scale(1) skew(1deg);
  }

  50% {
    transform: rotate(0) scale(1) skew(1deg);
  }

  100% {
    transform: rotate(0) scale(1) skew(1deg);
  }
}

@keyframes shake {
  0% {
    transform: rotate(0);
  }

  20% {
    transform: rotate(-15deg);
  }

  40% {
    transform: rotate(15deg);
  }

  60% {
    transform: rotate(-10deg);
  }

  80% {
    transform: rotate(10deg);
  }

  100% {
    transform: rotate(0);
  }
}

@keyframes quick-alo-circle-anim {
  0% {
    transform: rotate(0) scale(0.5) skew(1deg);
    opacity: 0.1;
  }

  30% {
    transform: rotate(0) scale(0.7) skew(1deg);
    opacity: 0.5;
  }

  100% {
    transform: rotate(0) scale(1) skew(1deg);
    opacity: 0.1;
  }
}

@keyframes quick-alo-circle-fill-anim {
  0% {
    transform: rotate(0) scale(0.7) skew(1deg);
    opacity: 0.2;
  }

  50% {
    transform: rotate(0) scale(1) skew(1deg);
    opacity: 0.2;
  }

  100% {
    transform: rotate(0) scale(0.7) skew(1deg);
    opacity: 0.2;
  }
}

/* ==========================================================================
   [MODULE 1: HEADER & NAVIGATION]
   Topbar, Main Header, Navigation Menu, Sticky Header & Mobile Drawer
   ========================================================================== */

/* --- 1.1 TOPBAR --- */

#top-bar {
  background-color: transparent;
}

#header .contact-bar {
  display: flex;
  gap: 14px;
  align-items: center;
}

#header .contact-bar .inner-item {
  display: flex;
  gap: 10px;
  align-items: center;
}

#header .contact-bar .inner-item a,
#header .contact-bar .inner-item span {
  font-size: 0.9375rem;
  color: var(--fs-color-secondary);
  font-weight: 400;
}

#header .contact-bar .inner-item i {
  font-size: 0.875rem;
  color: var(--fs-color-secondary);
}

#header .contact-bar .inner-dot {
  color: var(--fs-color-secondary);
}

#header .social-icons.follow-icons {
  color: var(--fs-color-primary);
  display: flex;
  gap: 18px;
}

#header .social-icons.follow-icons a {
  font-size: 0.875rem;
  margin: 0;
}

#header .inner-contact-box {
  background-color: var(--fs-color-secondary);
  padding: 2em 3em;
}

#header .inner-contact-box span {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  opacity: 1;
  color: #ffffff;
  margin-left: 0.625rem;
}

#header .inner-contact-box i {
  color: #ffffff;
}

/* --- 1.2 MAIN HEADER & LOGO --- */

#header {
  background: rgba(255, 255, 255, 0.75);
}

#header .header-main,
#header.transparent .header-main,
.transparent .header-main {
  height: 125px;
}

#header #logo {
  width: 400px;
  max-height: none;
}

#header #logo a {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

#header #logo img,
#header #logo img.header_logo,
#header #logo img.header-logo-dark,
#header #logo img.header-logo-sticky,
#header.transparent #logo img,
.transparent #logo img {
  max-height: 110px;
  height: 110px;
  width: auto;
}

.header-search i {
  color: var(--fs-color-secondary);
}

#header img.inner-sticky-img {
  display: none;
  width: 80px;
  height: 80px;
}

/* Responsive Header (Tablet & Mobile <= 849px) */

@media (max-width: 849px) {
  #header .header-top {
    display: none !important;
  }

  #header .header-main,
  #header.transparent .header-main,
  .transparent .header-main {
    height: 110px;
  }

  #header #logo {
    width: 320px;
    margin: 0 auto;
  }

  #header #logo img,
  #header #logo img.header_logo,
  #header #logo img.header-logo-dark,
  #header #logo img.header-logo-sticky,
  .transparent #logo img {
    max-height: 96px;
    height: 96px;
    width: auto;
    margin: 0 auto;
  }

  #header .header-inner .flex-left .icon-menu {
    font-size: 26px;
    color: #0f172a;
    outline: none;
  }
}

/* --- 1.3 MAIN NAVIGATION & DROPDOWNS --- */

#wide-nav {
  background-color: transparent;
}

#wide-nav .header-bottom-nav {
  gap: 36px;
}

#wide-nav .header-bottom-nav .menu-item {
  margin: 0;
}

#wide-nav .header-bottom-nav .menu-item .nav-top-link {
  padding: 10px 14px;
  font-size: 0.925rem;
  font-weight: 600;
  color: #333333;
  letter-spacing: 0.5px;
  line-height: 1;
}

#wide-nav .header-bottom-nav .menu-item.active .nav-top-link,
#wide-nav .header-bottom-nav .menu-item:hover .nav-top-link {
  background-color: var(--fs-color-primary);
  color: #ffffff;
  border-radius: 4px;
}

#wide-nav .header-bottom-nav .menu-item .icon-angle-down {
  display: none;
}

/* Mobile & Tablet Accordion Toggle */

.mobile-sidebar .menu-item-has-children .toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: 0;
  opacity: 0.8;
  transform: none;
  transition: opacity 0.25s ease;
}

.mobile-sidebar .menu-item-has-children .toggle:hover {
  opacity: 1;
}

.mobile-sidebar .menu-item-has-children .toggle i.icon-angle-down {
  display: inline-block;
  font-size: 15px;
  color: #333333;
  transform: rotate(-90deg);
  transition:
    transform 0.25s ease,
    color 0.25s ease;
}

.mobile-sidebar .menu-item-has-children.active > .toggle i.icon-angle-down {
  transform: rotate(0deg);
  color: #b38b4d;
}

/* Dropdown Sub-menu */

#header .menu-item .nav-dropdown {
  left: -10%;
  top: 126%;
  border: none;
  border-top: 3px solid #2f5597;
  border-radius: 0 0 8px 8px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12);
  padding: 8px 0;
  background-color: #ffffff;
}

#header .menu-item .nav-dropdown li {
  padding: 1px 11px;
}

#header .menu-item .nav-dropdown li a {
  font-size: 1rem;
  margin-left: 0;
  padding: 12px 20px;
  font-weight: 600;
  border-bottom: 1px solid #eaedf2;
  color: #333333;
  position: relative;
}

#header .menu-item .nav-dropdown li a:hover {
  color: #2f5597;
  background-color: #fafbfc;
  padding-left: 26px;
}

#header .menu-item .nav-dropdown li a:hover::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 2px;
  background-color: #2f5597;
  transition: width 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
  z-index: 2;
}

.nav-dropdown-has-arrow li.has-dropdown:after,
.nav-dropdown-has-arrow li.has-dropdown:before {
  display: none;
}

/* --- 1.4 STICKY HEADER --- */

#header .header-wrapper.stuck {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 1001;
  background-color: #ffffff;
  background: #ffffff;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.08);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.admin-bar #header .header-wrapper.stuck {
  top: 32px;
}

#header .header-wrapper.stuck #wide-nav {
  background-color: transparent;
  background: transparent;
  box-shadow: none;
  border-top: none;
}

#header .header-wrapper.stuck img.inner-sticky-img {
  display: block;
  width: 80px;
  height: 80px;
  object-fit: contain;
}

/* Colocated Responsive Sticky Header (Tablet & Mobile <= 849px) */

@media (max-width: 849px) {
  #header.sticky-jump.has-sticky .header-wrapper.stuck,
  #header .header-wrapper.stuck {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 76px;
    transform: none;
    transition: none;
    background: #ffffff;
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.08);
    z-index: 99999;
  }

  .admin-bar #header.sticky-jump.has-sticky .header-wrapper.stuck,
  .admin-bar #header .header-wrapper.stuck {
    top: 32px;
  }

  #header .header-wrapper.stuck .header-main {
    display: block;
    height: 76px;
  }

  #header .header-wrapper.stuck .header-inner {
    height: 76px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 18px;
    position: relative;
    width: 100%;
    max-width: 100%;
    top: 0;
  }

  #header .header-wrapper.stuck .show-for-medium.flex-left {
    display: flex;
    align-items: center;
    flex: 0 0 45px;
    z-index: 2;
  }

  #header .header-wrapper.stuck .show-for-medium.flex-left .icon-menu {
    font-size: 26px;
    color: #0f172a;
    line-height: 1;
    outline: none;
  }

  #header .header-wrapper.stuck .nav-icon a {
    outline: none;
    box-shadow: none;
    border: none;
  }

  #header .header-wrapper.stuck #logo {
    display: flex;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: auto;
    height: 64px;
    margin: 0;
    align-items: center;
    justify-content: center;
    z-index: 1;
  }

  #header .header-wrapper.stuck #logo a {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 64px;
  }

  #header .header-wrapper.stuck #logo img {
    display: none !important;
  }

  #header .header-wrapper.stuck #logo img.header-logo-sticky,
  #header
    .header-wrapper.stuck
    #logo:not(:has(img.header-logo-sticky))
    img.header_logo {
    display: block;
    max-height: 62px;
    height: 62px;
    width: auto;
    object-fit: contain;
    margin: 0 auto;
  }

  #header .header-wrapper.stuck .header-top {
    display: none !important;
  }
}

/* --- 1.5 MOBILE NAVIGATION DRAWER (SIDEBAR MENU) --- */

#main-menu,
.sidebar-menu {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  max-height: 100vh;
}

.sidebar-menu .nav-sidebar {
  display: flex;
  flex-direction: column;
  padding: 0;
  margin: 0;
}

.sidebar-menu .html_top_right_text {
  order: -1;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 24px 20px 18px;
  margin: 0;
  background: transparent;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.sidebar-menu .html_top_right_text a {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 0;
  background: transparent;
}

.sidebar-menu .html_top_right_text .inner-sticky-img {
  display: block;
  width: auto;
  height: 80px;
  max-width: 170px;
  object-fit: contain;
  margin: 0 auto;
  background: transparent;
}

.sidebar-menu .header-search-form,
.sidebar-menu li.header-search-form,
.mobile-sidebar .header-search-form,
#main-menu .header-search-form,
.header-search-form.search-form {
  display: none !important;
}

.sidebar-menu .nav-sidebar > li.menu-item {
  margin: 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.sidebar-menu .nav-sidebar > li.menu-item > a {
  padding: 13px 20px;
  font-size: 14px;
  font-weight: 600;
  color: #1e293b;
  letter-spacing: 0.02em;
  transition: all 0.2s ease;
}

.sidebar-menu .nav-sidebar > li.menu-item.current-menu-item > a {
  color: #1e3a8a;
  font-weight: 700;
  background-color: rgba(30, 58, 138, 0.04);
}

.sidebar-menu li:has(.element-error),
.sidebar-menu .element-error,
.sidebar-menu li > a.element-error {
  display: none !important;
}

.sidebar-menu .header-newsletter-item {
  margin: 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.sidebar-menu .header-newsletter-item > a {
  padding: 13px 20px;
  font-size: 14px;
  font-weight: 600;
  color: #1e293b;
}

@media (max-width: 1024px) {
  li.header-newsletter-item,
  a[href="#header-newsletter-signup"],
  .header-newsletter-item {
    display: none !important;
  }
}

.sidebar-menu .header-social-icons {
  padding: 14px 20px;
  margin: 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.sidebar-menu .social-icons {
  display: flex;
  gap: 12px;
  align-items: center;
}

.sidebar-menu .social-icons a {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.04);
  color: #475569;
}

.sidebar-menu .html_topbar_right {
  padding: 16px 20px 24px;
  margin: 0;
  background: transparent;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.sidebar-menu .html_topbar_right .contact-bar {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
  width: 100%;
}

.sidebar-menu .html_topbar_right .contact-bar .inner-dot {
  display: none !important;
}

.sidebar-menu .html_topbar_right .contact-bar .inner-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  line-height: 1.5;
  color: #334155;
  width: 100%;
  word-break: break-word;
}

.sidebar-menu .html_topbar_right .contact-bar .inner-item i {
  color: #1e3a8a;
  font-size: 14px;
  margin-top: 3px;
  width: 16px;
  text-align: center;
  flex-shrink: 0;
}

.sidebar-menu .html_topbar_right .contact-bar .inner-item a,
.sidebar-menu .html_topbar_right .contact-bar .inner-item span {
  color: #334155;
  font-size: 13px;
  text-decoration: none;
}

/* ==========================================================================
   [MODULE 1.5: FOOTER & FLOATING WIDGETS]
   4-Column Footer, Social Icons, Copyright & Pulse Hotline Widgets
   ========================================================================== */

#footer .absolute-footer {
  display: none;
}

/* 1. KHUNG CHÂN TRANG CHÍNH */

#main .section.footer,
footer .section.footer,
#footer .section.footer,
.section.footer {
  background-color: var(--kav-ft-bg);
  color: var(--kav-ft-text-color);
  font-family: var(--kav-ft-font-body);
  font-size: 14.5px;
  line-height: 1.7;
  padding-top: var(--kav-ft-pad-top);
  padding-bottom: var(--kav-ft-pad-bottom);
  border-top: 3px solid var(--kav-ft-brand-navy);
}

.section.footer p,
.section.footer span,
.section.footer li,
.section.footer div {
  color: var(--kav-ft-text-color);
  font-family: var(--kav-ft-font-body);
  font-size: 14px;
}

/* 2. CỘT 1: LOGO & ICON MẠNG XÃ HỘI */

.section.footer .col:nth-child(1) .col-inner.text-left,
#footer .col-inner.text-left {
  text-align: center;
}

.section.footer .col:nth-child(1) .img,
#footer .col:nth-child(1) .img,
#footer .col-inner .img {
  margin-left: auto;
  margin-right: auto;
  display: block;
  text-align: center;
}

.section.footer .col:nth-child(1) .img a,
#footer .col:nth-child(1) .img a {
  display: inline-block;
  margin: 0 auto;
}

.section.footer .col:nth-child(1) .img-inner.dark,
#footer .col-inner .img-inner.dark {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  display: block;
}

.section.footer .col:nth-child(1) .img-inner.dark img,
#footer .col-inner .img-inner.dark img {
  display: block;
  margin: 0 auto;
  max-width: 220px;
  height: auto;
}

.section.footer .col:nth-child(1) p {
  color: #0f172a;
  font-weight: 600;
  font-size: 14.5px;
  line-height: 1.5;
  margin: 12px 0;
  text-align: center;
}

.section.footer .social-icons,
.section.footer .follow-icons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin: 15px auto 0;
}

.section.footer .follow-icons a.icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid #cbd5e1;
  background-color: #ffffff;
  color: var(--kav-ft-brand-navy);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s ease;
}

.section.footer .follow-icons a.icon:hover {
  background-color: var(--kav-ft-brand-navy);
  border-color: var(--kav-ft-brand-navy);
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(30, 58, 138, 0.25);
}

/* 3. TIÊU ĐỀ CÁC CỘT (H2, H3, H4) */

.section.footer h2,
.section.footer h3,
.section.footer h4 {
  color: var(--kav-ft-heading-color);
  font-family: var(--kav-ft-font-heading);
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: 0;
  margin-bottom: 20px;
  position: relative;
  display: inline-block;
}

.section.footer h2::after,
.section.footer h3::after {
  content: "";
  display: block;
  width: 36px;
  height: 2.5px;
  background-color: var(--kav-ft-brand-navy);
  margin-top: 8px;
  border-radius: 2px;
}

/* 4. CỘT 2: THÔNG TIN LIÊN HỆ */

.section.footer .col:nth-child(2) p {
  margin-bottom: 12px;
  line-height: 1.6;
  font-size: 14px;
  color: var(--kav-ft-text-color);
}

.section.footer .col:nth-child(2) p strong {
  color: var(--kav-ft-heading-color);
  font-weight: 600;
  margin-right: 4px;
}

.section.footer .col:nth-child(2) a {
  color: var(--kav-ft-text-color);
  font-weight: 500;
  text-decoration: none;
  transition: color 0.2s ease;
}

.section.footer .col:nth-child(2) a:hover {
  color: var(--kav-ft-brand-navy);
}

/* 5. CỘT 3: LĨNH VỰC TƯ VẤN */

.section.footer .col:nth-child(3) ul {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px 18px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.section.footer .col:nth-child(3) li {
  margin: 0;
  padding: 0;
}

.section.footer .col:nth-child(3) a {
  color: var(--kav-ft-text-color);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  transition: all 0.2s ease;
  position: relative;
  padding-left: 14px;
}

.section.footer .col:nth-child(3) a::before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--kav-ft-brand-navy);
  font-size: 15px;
  line-height: 1;
}

.section.footer .col:nth-child(3) a:hover {
  color: var(--kav-ft-brand-navy);
  padding-left: 17px;
}

/* 6. BẢN QUYỀN COPYRIGHT */

#main .section.ft-copyright,
footer .section.ft-copyright,
#footer .section.ft-copyright,
.section.ft-copyright {
  background-color: var(--kav-ft-bg-darker);
  border-top: 1px solid #cbd5e1;
  padding: 18px 0;
}

.section.ft-copyright p {
  margin: 0;
  color: #475569;
  font-family: var(--kav-ft-font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-align: center;
}

/* Colocated Footer Media Queries */

@media (min-width: 850px) {
  .section.footer .col:not(:first-child) {
    border-left: 1px solid var(--kav-ft-border);
    padding-left: 35px;
  }
}

@media (max-width: 849px) {
  .section.footer {
    padding-top: 40px;
    padding-bottom: 30px;
  }

  .section.footer .col {
    margin-bottom: 25px;
    border-left: none;
    padding-left: 15px;
  }

  .section.footer .col:nth-child(3) ul {
    grid-template-columns: 1fr;
    gap: 10px;
  }
}

.sec-clients-marquee-row,
.marquee_group {
  will-change: transform;
}

/* 7. FLOATING WIDGETS */

.hotline-phone-ring-wrap {
  position: fixed;
  bottom: 20px;
  left: 20px;
  z-index: 9999;
}

.hotline-phone-ring {
  position: relative;
  visibility: visible;
  background-color: transparent;
  width: 90px;
  height: 90px;
  cursor: pointer;
  z-index: 11;
  backface-visibility: hidden;
  transform: translateZ(0);
  transition: visibility 0.5s;
  left: 0;
  bottom: 0;
  display: block;
}

.hotline-phone-ring-circle {
  width: 80px;
  height: 80px;
  top: 5px;
  left: 5px;
  position: absolute;
  background-color: transparent;
  border-radius: 100%;
  border: 2px solid #b1976b;
  opacity: 0.8;
  animation: ring 2s infinite ease-in-out;
  transition: all 0.5s;
  transform-origin: 50% 50%;
}

.quick-alo-phone {
  position: fixed;
  visibility: hidden;
  background-color: transparent;
  width: 90px;
  height: 90px;
  cursor: pointer;
  z-index: 200000;
  backface-visibility: hidden;
  transform: translateZ(0);
  transition: visibility 0.5s;
  right: 20px;
  bottom: 20px;
}

.zalo-chat-widget {
  position: fixed;
  bottom: 95px;
  right: 20px;
  z-index: 9999;
}

/* ==========================================================================
   [MODULE 2: HOMEPAGE - SECTION 1: HERO & INTRO]
   Trang chủ: Phần giới thiệu & 3 giá trị cốt lõi
   ========================================================================== */

/* 1.1 Keyframes hiệu ứng bay vào */

@keyframes sec1FadeInLeft {
  0% {
    opacity: 0;
    transform: translate3d(-60px, 0, 0);
  }

  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes sec1FadeInRight {
  0% {
    opacity: 0;
    transform: translate3d(60px, 0, 0);
  }

  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes sec1FadeInUp {
  0% {
    opacity: 0;
    transform: translate3d(0, 50px, 0);
  }

  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

/* 1.2 Khung Section 1 */

#main .section.section-1.sec-intro {
  padding-top: 25px;
  padding-bottom: 70px;
  background-color: #ffffff;
  position: relative;
  overflow: visible;
}

@media (max-width: 849px) {
  #main .section.section-1.sec-intro {
    padding-top: 40px;
    padding-bottom: 50px;
  }
}

/* 1.3 Row Top: Lời chào & Tượng Nữ thần Công lý */

#main .section-1 .sec-intro-row-top {
  max-width: 1260px;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  margin-top: -10px;
  margin-bottom: 0;
  align-items: flex-end;
  position: relative;
  z-index: 1;
}

@media (max-width: 849px) {
  #main .section-1 .sec-intro-row-top {
    margin-top: 0;
    margin-bottom: 25px;
  }
}

/* Cột văn bản lời chào */

#main .section-1 .sec-intro-col-text h2 {
  font-size: 28px;
  font-weight: 700;
  color: var(--primary-navy, #18346b);
  letter-spacing: 0px;
  line-height: 1.4;
  margin-bottom: 25px;
  position: relative;
  text-align: left;
}

#main .section-1 .sec-intro-col-text p {
  font-size: 16.5px;
  line-height: 1.85;
  color: var(--soft-blue, #4567ab);
  font-style: italic;
  text-align: justify;
  margin-bottom: 16px;
}

@media (max-width: 849px) {
  #main .section-1 .sec-intro-col-text,
  .sec-intro-row-top .sec-intro-col-text,
  #col-713921698 {
    max-width: 100%;
    flex-basis: 100%;
    width: 100%;
  }

  #main .section-1 .sec-intro-col-text .col-inner {
    padding-left: 15px;
    padding-right: 15px;
  }

  #main .section-1 .sec-intro-col-text h2 {
    font-size: 26px;
    text-align: center;
    margin-bottom: 20px;
    line-height: 1.35;
  }

  #main .section-1 .sec-intro-col-text p {
    font-size: 15.5px;
    line-height: 1.8;
    text-align: justify;
    margin-bottom: 0;
  }
}

/* Cột ảnh Nữ thần Công lý */

#main .section-1 .sec-intro-col-img {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  position: relative;
  z-index: 1;
  opacity: 1;
  transform: none;
}

#main .section-1 .sec-intro-col-img > .col-inner {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  padding-bottom: 0;
  margin-bottom: -110px;
}

#main .section-1 .sec-intro-col-img .img,
#main .section-1 .sec-intro-col-img .img-inner {
  width: 100%;
  max-width: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  margin-bottom: 0;
  padding-bottom: 0;
}

#main .section-1 .sec-intro-img img,
#main .section-1 .img-section1 img {
  width: 100%;
  max-width: 640px;
  height: auto;
  display: block;
  margin: 0 auto;
  object-fit: contain;
  vertical-align: bottom;
  filter: drop-shadow(0 20px 35px rgba(24, 52, 107, 0.16));
  transition: transform 0.4s ease;
}

#main .section-1 .sec-intro-img:hover img {
  transform: scale(1.02);
}

@media (max-width: 849px) {
  #main .section-1 .sec-intro-col-img,
  .sec-intro-row-top .sec-intro-col-img,
  #col-796562403 {
    display: none;
  }
}

#main .section-1 .sec-intro-gap {
  height: 0px;
}

/* 1.4 Hàng 3 khối: Giá trị cốt lõi - Sứ mệnh - Tầm nhìn */

#main .section-1 .row-2-sec-1.sec-intro-row-values,
#main .section-1 .sec-intro-row-values {
  max-width: 1260px;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  position: relative;
  z-index: 3;
  margin-top: 0;
}

@media (min-width: 850px) {
  #main .section-1 .row-2-sec-1.sec-intro-row-values,
  #main .section-1 .sec-intro-row-values {
    display: flex;
    flex-flow: row wrap;
    padding-left: 0;
    padding-right: 0;
    gap: 0;
  }

  #main .section-1 .sec-intro-row-values .sec-intro-col-values {
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
    width: 33.333333%;
    padding: 0 15px 30px;
    box-sizing: border-box;
    position: relative;
    z-index: 3;
    background: transparent;
    border: none;
    box-shadow: none;
  }

  #main .section-1 .sec-intro-row-values .sec-intro-col-values > .col-inner {
    padding: 32px 24px;
    border-radius: 8px;
    height: 100%;
    background-color: var(--secondary-navy, #2f5597);
    box-sizing: border-box;
    position: relative;
    z-index: 3;
    border: none;
    box-shadow: none;
    transition:
      transform 0.3s ease,
      background-color 0.3s ease;
  }

  #main
    .section-1
    .sec-intro-row-values
    .sec-intro-col-values
    > .col-inner:hover {
    transform: translateY(-5px);
    background-color: #264782;
  }

  #main .section-1 .sec-intro-col-values h3 {
    font-size: 18px;
    line-height: 1.35;
    white-space: nowrap;
    letter-spacing: 0.5px;
    margin-bottom: 14px;
    text-align: center;
    color: #ffffff;
    font-weight: 700;
    text-transform: uppercase;
    border: none;
  }

  #main .section-1 .sec-intro-col-values h3::after {
    display: none;
  }

  #main .section-1 .sec-intro-col-values p {
    font-size: 14px;
    line-height: 1.65;
    color: #ffffff;
    text-align: justify;
    margin-bottom: 0;
    border: none;
  }

  #main .section-1 .sec-intro-col-values p strong {
    color: #ffffff;
  }

  #main .section-1 .sec-intro-col-values p em {
    color: rgba(255, 255, 255, 0.92);
  }
}

@media (max-width: 849px) {
  #main .section-1 .row-2-sec-1.sec-intro-row-values,
  #main .section-1 .sec-intro-row-values {
    display: flex;
    flex-direction: column;
    max-width: 580px;
    margin: 0 auto;
    padding: 0 16px;
    gap: 16px;
  }

  #main .section-1 .sec-intro-row-values .sec-intro-col-values {
    flex: 0 0 100%;
    max-width: 100%;
    width: 100%;
    padding: 0;
    margin-bottom: 0;
    position: relative;
    z-index: 3;
    background: transparent;
    border: none;
    box-shadow: none;
  }

  #main .section-1 .sec-intro-row-values .sec-intro-col-values > .col-inner {
    padding: 22px 20px;
    border-radius: 10px;
    height: auto;
    background-color: var(--secondary-navy, #2f5597);
    border: none;
    box-shadow: none;
    transition:
      transform 0.3s ease,
      background-color 0.3s ease;
  }

  #main .section-1 .sec-intro-col-values h3 {
    font-size: 17px;
    line-height: 1.35;
    text-align: center;
    margin-bottom: 10px;
    white-space: nowrap;
    color: #ffffff;
    font-weight: 700;
    text-transform: uppercase;
    border: none;
  }

  #main .section-1 .sec-intro-col-values h3::after {
    display: none;
  }

  #main .section-1 .sec-intro-col-values p {
    font-size: 13.5px;
    line-height: 1.65;
    text-align: justify;
    color: #ffffff;
    margin-bottom: 0;
    border: none;
  }

  #main .section-1 .sec-intro-col-values p strong {
    color: #ffffff;
  }

  #main .section-1 .sec-intro-col-values p em {
    color: rgba(255, 255, 255, 0.92);
  }
}

/* 1.5 Hiển thị trong UX Builder và hiệu ứng Frontend */

.ux-builder-iframe .sec-intro-col-text,
.ux-builder-iframe .sec-intro-col-img,
.ux-builder-iframe .sec-intro-col-core-values,
.ux-builder-iframe .sec-intro-col-mission,
.ux-builder-iframe .sec-intro-col-vision {
  opacity: 1;
  transform: none;
}

body:not(.ux-builder-iframe) .sec-intro-col-text,
body:not(.ux-builder-iframe) .sec-intro-col-img,
body:not(.ux-builder-iframe) .sec-intro-col-core-values,
body:not(.ux-builder-iframe) .sec-intro-col-mission,
body:not(.ux-builder-iframe) .sec-intro-col-vision {
  opacity: 0;
}

body:not(.ux-builder-iframe) .sec-intro-col-text.animated-in {
  animation: sec1FadeInLeft 0.85s cubic-bezier(0.22, 1, 0.36, 1) both;
}

body:not(.ux-builder-iframe) .sec-intro-col-img.animated-in {
  animation: sec1FadeInRight 0.85s cubic-bezier(0.22, 1, 0.36, 1) 0.15s both;
}

body:not(.ux-builder-iframe) .sec-intro-col-core-values.animated-in {
  animation: sec1FadeInUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.25s both;
}

body:not(.ux-builder-iframe) .sec-intro-col-mission.animated-in {
  animation: sec1FadeInUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.45s both;
}

body:not(.ux-builder-iframe) .sec-intro-col-vision.animated-in {
  animation: sec1FadeInUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.65s both;
}

/* ==========================================================================
   [MODULE 2: HOMEPAGE - SECTION 2: WHY CHOOSE US]
   Trang chủ: Lý do chọn & Giải thưởng
   ========================================================================== */

/* 2.1 Phần Tại sao chọn Nguyên Chính & Khóa Canh Giữa Container */

.sec-why-choose-row,
#main .sec-why-choose-row,
#main .section-2 .sec-why-choose-row {
  max-width: 1260px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  width: 100% !important;
}

/* DESKTOP (>= 850px): 2 Cột song song cân đối */

@media (min-width: 850px) {
  .sec-why-choose-row,
  #main .sec-why-choose-row,
  #main .section-2 .sec-why-choose-row {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center;
    justify-content: space-between;
    gap: 0;
  }

  /* Cột bên trái: 6 Hộp Icon (chiếm 50%) */

  .sec-why-choose-col-boxes,
  #main .sec-why-choose-col-boxes,
  #main .section-2 .sec-why-choose-col-boxes {
    flex: 0 0 50%;
    max-width: 50%;
    width: 50%;
    padding-left: 15px;
    padding-right: 25px;
    box-sizing: border-box;
  }

  .sec-why-choose-col-boxes h2,
  #main .section-2 .sec-why-choose-col-boxes h2 {
    font-family: "Be Vietnam Pro", sans-serif;
    font-size: 26px;
    font-weight: 800;
    line-height: 1.3;
    color: var(--primary-navy, #18346b);
    text-align: center;
    margin-top: 0;
    margin-bottom: 24px;
    position: relative;
    padding-bottom: 12px;
  }

  .sec-why-choose-col-boxes h2::after,
  #main .section-2 .sec-why-choose-col-boxes h2::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 50px;
    height: 3px;
    background: var(--accent-gold, #b1976b);
    border-radius: 2px;
  }

  /* Grid 6 hộp icon: 3 cột x 2 hàng trong cột 50% */

  .sec-why-choose-grid,
  #main .section-2 .sec-why-choose-grid {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -6px;
  }

  .sec-why-choose-col-item,
  #main .section-2 .sec-why-choose-col-item {
    flex: 0 0 33.3333%;
    max-width: 33.3333%;
    width: 33.3333%;
    padding: 0 6px;
    margin-bottom: 14px;
    box-sizing: border-box;
  }

  .sec-why-choose-box,
  #main .section-2 .sec-why-choose-box {
    padding: 16px 8px;
    min-height: 150px;
    background: #ffffff;
    border: 1px solid rgba(24, 52, 107, 0.12);
    border-radius: 10px;
    box-shadow: 0 4px 14px rgba(24, 52, 107, 0.05);
    transition:
      transform 0.3s ease,
      box-shadow 0.3s ease,
      border-color 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .sec-why-choose-box:hover,
  #main .section-2 .sec-why-choose-box:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(24, 52, 107, 0.12);
    border-color: var(--accent-gold, #b1976b);
  }

  .sec-why-choose-box p,
  #main .section-2 .sec-why-choose-box p {
    font-size: 13px;
    font-weight: 700;
    color: var(--primary-navy, #18346b);
    line-height: 1.35;
    margin-top: 8px;
    margin-bottom: 0;
    text-align: center;
  }

  /* Cột bên phải: Danh sách nội dung chi tiết (chiếm 50%) */

  .sec-why-choose-col-content,
  #main .sec-why-choose-col-content,
  #main .section-2 .sec-why-choose-col-content {
    flex: 0 0 50%;
    max-width: 50%;
    width: 50%;
    padding-left: 25px;
    padding-right: 15px;
    box-sizing: border-box;
  }

  .sec-why-choose-col-content ul,
  #main .section-2 .sec-why-choose-col-content ul {
    display: block;
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .sec-why-choose-col-content li,
  #main .section-2 .sec-why-choose-col-content li {
    display: list-item;
    margin-bottom: 14px;
    font-size: 15px;
    line-height: 1.65;
    color: #333333;
    text-align: justify;
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
    border-radius: 0;
  }

  .sec-why-choose-col-content li strong,
  #main .section-2 .sec-why-choose-col-content li strong {
    color: var(--primary-navy, #18346b);
    font-size: 15.5px;
    font-weight: 700;
  }
}

/* TABLET & MOBILE (< 850px): Chia thành 2 hàng dọc độc lập */

@media (max-width: 849px) {
  .sec-why-choose-row,
  #main .sec-why-choose-row,
  #main .section-2 .sec-why-choose-row {
    display: flex !important;
    flex-direction: column !important;
    gap: 30px;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100% !important;
  }

  .sec-why-choose-col-boxes,
  .sec-why-choose-col-content,
  #main .sec-why-choose-col-boxes,
  #main .sec-why-choose-col-content,
  #main .section-2 .sec-why-choose-col-boxes,
  #main .section-2 .sec-why-choose-col-content {
    flex: 0 0 100%;
    max-width: 100%;
    width: 100%;
    padding: 0 15px;
    box-sizing: border-box;
  }

  .sec-why-choose-col-boxes h2,
  #main .section-2 .sec-why-choose-col-boxes h2 {
    font-size: 24px;
    text-align: center;
    margin-bottom: 20px;
  }
}

/* Tablet (550px - 849px): 3 hộp x 2 hàng */

@media (min-width: 550px) and (max-width: 849px) {
  .sec-why-choose-col-item,
  #main .section-2 .sec-why-choose-col-item {
    flex: 0 0 33.3333%;
    max-width: 33.3333%;
    padding: 0 8px;
    margin-bottom: 16px;
    box-sizing: border-box;
  }

  .sec-why-choose-col-content ul,
  #main .section-2 .sec-why-choose-col-content ul {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    padding: 0;
    list-style: none;
  }

  .sec-why-choose-col-content li,
  #main .section-2 .sec-why-choose-col-content li {
    padding: 16px 18px;
    background: #ffffff;
    border-radius: 10px;
    border: 1px solid rgba(24, 52, 107, 0.08);
    box-shadow: 0 3px 12px rgba(24, 52, 107, 0.04);
    font-size: 14px;
    line-height: 1.55;
    color: #4a5568;
    margin-bottom: 0;
  }
}

/* Mobile (< 550px): 2 hộp x 3 hàng */

@media (max-width: 549px) {
  .sec-why-choose-col-item,
  #main .section-2 .sec-why-choose-col-item {
    flex: 0 0 50%;
    max-width: 50%;
    padding: 0 6px;
    margin-bottom: 12px;
    box-sizing: border-box;
  }

  .sec-why-choose-col-content ul,
  #main .section-2 .sec-why-choose-col-content ul {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 0;
    list-style: none;
  }

  .sec-why-choose-col-content li,
  #main .section-2 .sec-why-choose-col-content li {
    padding: 14px 16px;
    background: #ffffff;
    border-radius: 10px;
    border: 1px solid rgba(24, 52, 107, 0.08);
    font-size: 13.5px;
    line-height: 1.55;
    color: #4a5568;
    margin-bottom: 0;
  }
}

/* 2.2 Khung hàng r_archive (Giải thưởng & Công nhận) */

#main .section-2 .r_archive {
  background-color: #ffffff;
  position: relative;
  padding: 60px 0 45px;
  overflow: hidden;
  margin-top: 30px;
}

#main .section-2 .r_archive .col-inner {
  padding: 0;
}

#main .section-2 .r_archive::before,
#main .section-2 .r_archive::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(
    90deg,
    transparent,
    #4567ab 35%,
    #18346b 50%,
    #4567ab 65%,
    transparent
  );
  opacity: 0.2;
  z-index: 2;
}

#main .section-2 .r_archive::before {
  top: 0;
}

#main .section-2 .r_archive::after {
  bottom: 0;
}

.sec-awards-col-wrapper,
#col-1121778099,
.sec-awards-row .col {
  width: 100%;
  max-width: 100%;
  padding-left: 20px;
  padding-right: 20px;
}

.sec-awards-header-text,
#text-3789126470 {
  max-width: 900px;
  margin: 0 auto 25px;
}

#main .section-2 .r_archive h5,
.sec-awards-header-text h5 {
  font-size: 14px;
  letter-spacing: 2.5px;
  font-weight: 700;
  color: #4567ab;
  margin-bottom: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

#main .section-2 .r_archive h5::before,
#main .section-2 .r_archive h5::after {
  content: "";
  width: 36px;
  height: 1.5px;
  background: #4567ab;
  opacity: 0.4;
  display: inline-block;
}

#main .section-2 .r_archive h2,
.sec-awards-header-text h2 {
  font-family: var(--fs-font-heading, inherit), Georgia, serif;
  font-size: clamp(26px, 3.8vw, 42px);
  font-weight: 700;
  line-height: 1.3;
  color: var(--primary-navy, #18346b);
  margin-top: 0;
  margin-bottom: 12px;
  text-align: center;
}

#main .section-2 .r_archive h2 strong,
#main .section-2 .r_archive h2 em {
  font-style: italic;
  font-weight: 700;
  color: #4567ab;
}

#main .section-2 .r_archive p,
.sec-awards-header-text p {
  font-size: 16px;
  line-height: 1.65;
  color: #475569;
  text-align: center;
  margin-bottom: 30px;
}

/* 2.3 Marquee Băng chuyền cúp/bằng khen */

#main .section-2 .r_archive .sec-awards-col-wrapper > .col-inner {
  overflow: hidden;
  position: relative;
  width: 100%;
  padding: 10px 0 30px;
}

#main .section-2 .row_archive,
#main .section-2 .kav-tr {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  width: max-content;
  will-change: transform;
  user-select: none;
  gap: 20px;
  margin: 0;
  padding: 0;
  animation: none;
}

#main .section-2 .row_archive:hover {
  animation-play-state: paused;
}

#main .section-2 .row_archive > .col,
#main .section-2 .kav-tr .kav-card {
  flex: 0 0 220px;
  max-width: 220px;
  width: 220px;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

#main .section-2 .row_archive .col-inner {
  height: 100%;
  padding: 0;
  width: 100%;
}

/* 2.4 Thẻ Card cúp/bằng khen */

#main .section-2 .row_archive .box,
#main .section-2 .r_archive .box,
#main .section-2 .kav-card {
  background-color: #ffffff;
  border: 1.5px solid rgba(69, 103, 171, 0.15);
  border-radius: 14px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 2px 12px rgba(24, 52, 107, 0.07);
  transition:
    transform 0.35s ease,
    box-shadow 0.35s ease,
    border-color 0.35s ease;
  height: 100%;
}

#main .section-2 .row_archive .box::before,
#main .section-2 .r_archive .box::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #18346b, #4567ab);
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 3;
}

#main .section-2 .row_archive .box:hover,
#main .section-2 .r_archive .box:hover,
#main .section-2 .kav-card:hover {
  border-color: rgba(69, 103, 171, 0.42);
  transform: translateY(-6px);
  box-shadow:
    0 18px 40px rgba(24, 52, 107, 0.14),
    0 4px 14px rgba(24, 52, 107, 0.08);
}

#main .section-2 .row_archive .box:hover::before,
#main .section-2 .r_archive .box:hover::before {
  opacity: 1;
}

#main .section-2 .row_archive .box-image,
#main .section-2 .r_archive .box-image {
  margin: 0;
  padding: 16px;
  background-color: #f4f7fd;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 180px;
  border-bottom: 1px solid rgba(69, 103, 171, 0.12);
}

#main .section-2 .row_archive .box-image img,
#main .section-2 .r_archive .box-image img {
  max-height: 100%;
  width: auto;
  object-fit: contain;
  border-radius: 4px;
  filter: drop-shadow(0 2px 6px rgba(24, 52, 107, 0.12));
  transition: transform 0.4s ease;
}

#main .section-2 .row_archive .box:hover .box-image img,
#main .section-2 .r_archive .box:hover .box-image img {
  transform: scale(1.05);
}

#main .section-2 .row_archive .box-text,
#main .section-2 .r_archive .box-text {
  padding: 12px 14px 14px;
  text-align: center;
}

#main .section-2 .row_archive .box-text h5,
#main .section-2 .r_archive .box-text h5 {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 3px;
  color: #4567ab;
  text-transform: uppercase;
  margin-bottom: 4px;
  display: block;
}

#main .section-2 .row_archive .box-text h4,
#main .section-2 .r_archive .box-text h4 {
  font-family: var(--fs-font-heading, inherit), Georgia, serif;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--primary-navy, #18346b);
  margin: 0;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

#main .section-2 .row_archive .box-text h6,
#main .section-2 .r_archive .box-text h6 {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #8da3cc;
  margin-top: 5px;
  margin-bottom: 0;
}

@keyframes rowArchiveGlide {
  0% {
    transform: translate3d(0, 0, 0);
  }

  100% {
    transform: translate3d(-50%, 0, 0);
  }
}

@media (max-width: 849px) {
  #main .section-2 h2 {
    font-size: 1.75rem;
  }

  #main .section-2 .r_archive {
    padding: 40px 0 30px;
  }
}

#main .section-2 .kav-card {
  height: 300px;
  display: flex;
  flex-direction: column;
}

#main .section-2 .kav-card .kav-img {
  width: 100%;
  height: 196px;
  background: #f4f7fd;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
  position: relative;
}

#main .section-2 .kav-card .kav-img img {
  max-height: 100%;
  width: auto;
  object-fit: contain;
  border-radius: 4px;
  transition: transform 0.4s ease;
}

#main .section-2 .kav-card:hover .kav-img img {
  transform: scale(1.05);
}

#main .section-2 .kav-card .kav-body {
  padding: 12px 14px;
  text-align: center;
}

#main .section-2 .kav-card .kav-year {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 3px;
  color: #4567ab;
  text-transform: uppercase;
  margin-bottom: 4px;
}

#main .section-2 .kav-card .kav-title {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--primary-navy, #18346b);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

#main .section-2 .kav-card .kav-org {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #8da3cc;
  margin-top: 5px;
}

/* ==========================================================================
   [MODULE 2: HOMEPAGE - SECTION 3: PRACTICE AREAS GRID]
   Trang chủ: Lĩnh vực hành nghề (9-card grid, hover zoom & shadow)
   ========================================================================== */

#main .section.section-3.sec-practice-areas {
  padding-top: 75px;
  padding-bottom: 85px;
  background-color: #ffffff;
  position: relative;
}

.sec-practice-title,
#text-4217487869,
#main .section-3 .sec-practice-title,
#main .section-3 .title-all {
  margin-bottom: 35px;
}

#main .section-3 .sec-practice-title h5,
#main .section-3 .title-all h5,
.sec-practice-title h5 {
  font-size: 15px;
  letter-spacing: 2.5px;
  font-weight: 700;
  color: #4567ab;
  margin-bottom: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

#main .section-3 .sec-practice-title h5::before,
#main .section-3 .sec-practice-title h5::after {
  content: "";
  width: 32px;
  height: 1.5px;
  background-color: #4567ab;
  opacity: 0.35;
  display: inline-block;
}

#main .section-3 .sec-practice-title h2,
#main .section-3 .title-all h2,
.sec-practice-title h2 {
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 800;
  letter-spacing: 1.5px;
  line-height: 1.25;
  color: var(--primary-navy, #18346b);
  margin-top: 0;
  margin-bottom: 35px;
  text-align: center;
  position: relative;
}

/* Lưới 3 cột */

#main .section-3 .sec-practice-grid {
  row-gap: 35px;
}

#main .section-3 .sec-practice-col-item {
  padding: 0 16px;
}

#main .section-3 .sec-practice-box,
#main .section-3 .sec-practice-card {
  background: #ffffff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(47, 85, 151, 0.07);
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  border: 1px solid rgba(47, 85, 151, 0.08);
  height: 100%;
  display: flex;
  flex-direction: column;
}

#main .section-3 .sec-practice-box:hover,
#main .section-3 .sec-practice-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 18px 40px rgba(47, 85, 151, 0.16);
  border-color: rgba(47, 85, 151, 0.25);
}

#main .section-3 .sec-practice-box .box-image,
#main .section-3 .sec-practice-card .box-image {
  overflow: hidden;
  position: relative;
  height: 220px;
}

#main .section-3 .sec-practice-box .box-image img,
#main .section-3 .sec-practice-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

#main .section-3 .sec-practice-box:hover .box-image img,
#main .section-3 .sec-practice-card:hover img {
  transform: scale(1.08);
}

#main .section-3 .sec-practice-box .box-image::after,
#main .section-3 .sec-practice-card .box-image::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    180deg,
    transparent 40%,
    rgba(24, 52, 107, 0.35) 100%
  );
  opacity: 0;
  transition: opacity 0.4s ease;
}

#main .section-3 .sec-practice-box:hover .box-image::after,
#main .section-3 .sec-practice-card:hover .box-image::after {
  opacity: 1;
}

#main .section-3 .sec-practice-box .box-text,
#main .section-3 .sec-practice-card .box-text {
  padding: 20px 16px 22px;
  background-color: #ffffff;
  text-align: center;
}

#main .section-3 .sec-practice-box .box-text h3,
#main .section-3 .sec-practice-card .box-text h3 {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--secondary-navy, #2f5597);
  margin: 0;
  position: relative;
  display: inline-block;
  transition: color 0.3s ease;
}

#main .section-3 .sec-practice-box .box-text h3::after,
#main .section-3 .sec-practice-card .box-text h3::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -6px;
  width: 0;
  height: 2px;
  background-color: var(--secondary-navy, #2f5597);
  transition: all 0.35s ease;
  transform: translateX(-50%);
}

#main .section-3 .sec-practice-box:hover .box-text h3,
#main .section-3 .sec-practice-card:hover .box-text h3 {
  color: var(--primary-navy, #18346b);
}

#main .section-3 .sec-practice-box:hover .box-text h3::after,
#main .section-3 .sec-practice-card:hover .box-text h3::after {
  width: 45px;
}

/* Animations cuộn tới đâu hiện tới đó */

@keyframes sec3FadeInUp {
  0% {
    opacity: 0;
    transform: translate3d(0, 45px, 0);
  }

  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes autoRevealFallback {
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

.ux-builder-iframe .sec-practice-title,
.ux-builder-iframe .sec-practice-col-item {
  opacity: 1;
  transform: none;
}

body:not(.ux-builder-iframe) .sec-practice-title,
body:not(.ux-builder-iframe) .sec-practice-col-item {
  opacity: 0;
  animation: autoRevealFallback 0.4s ease 2.5s forwards;
  will-change: transform, opacity;
}

body:not(.ux-builder-iframe) .sec-practice-title.animated-in {
  animation: sec3FadeInUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;
}

body:not(.ux-builder-iframe) .sec-practice-col-item.animated-in {
  animation: sec3FadeInUp 0.75s cubic-bezier(0.22, 1, 0.36, 1) both;
}

body:not(.ux-builder-iframe) .sec-practice-col-item:nth-child(1).animated-in {
  animation-delay: 0.05s;
}

body:not(.ux-builder-iframe) .sec-practice-col-item:nth-child(2).animated-in {
  animation-delay: 0.15s;
}

body:not(.ux-builder-iframe) .sec-practice-col-item:nth-child(3).animated-in {
  animation-delay: 0.25s;
}

body:not(.ux-builder-iframe) .sec-practice-col-item:nth-child(4).animated-in {
  animation-delay: 0.35s;
}

body:not(.ux-builder-iframe) .sec-practice-col-item:nth-child(5).animated-in {
  animation-delay: 0.45s;
}

body:not(.ux-builder-iframe) .sec-practice-col-item:nth-child(6).animated-in {
  animation-delay: 0.55s;
}

body:not(.ux-builder-iframe) .sec-practice-col-item:nth-child(7).animated-in {
  animation-delay: 0.65s;
}

body:not(.ux-builder-iframe) .sec-practice-col-item:nth-child(8).animated-in {
  animation-delay: 0.75s;
}

body:not(.ux-builder-iframe) .sec-practice-col-item:nth-child(9).animated-in {
  animation-delay: 0.85s;
}

@media (max-width: 849px) {
  #main .section.section-3.sec-practice-areas {
    padding-top: 50px;
    padding-bottom: 50px;
  }

  #main .section-3 .sec-practice-grid {
    row-gap: 24px;
  }

  #main .section-3 .sec-practice-col-item {
    max-width: 50%;
    flex-basis: 50%;
  }

  #main .section-3 .sec-practice-box .box-image,
  #main .section-3 .sec-practice-card .box-image {
    height: 180px;
  }
}

@media (max-width: 549px) {
  #main .section-3 .sec-practice-col-item {
    max-width: 100%;
    flex-basis: 100%;
  }

  #main .section-3 .sec-practice-box .box-image,
  #main .section-3 .sec-practice-card .box-image {
    height: 210px;
  }
}

/* ==========================================================================
   [MODULE 2: HOMEPAGE - SECTION 4: ACHIEVEMENTS & PARALLAX]
   Trang chủ: Khách hàng tiêu biểu & Thống kê số
   ========================================================================== */

/* 5.1 TẦNG NỀN FULL-WIDTH BÊN NGOÀI CỦA SECTION 4 */

body.home #main .section-4,
#main .section-4:not(.sec-about-clients),
#main .sec-clients-stats {
  background-color: #f4f7fc;
  background-image: url("https://luatnguyenchinh.theme.trueads.vn/wp-content/uploads/2026/09/bg-nguyenchinh-landing.jpg");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  padding: 60px 15px 70px;
  position: relative;
  overflow: hidden;
}

body.home #main .section-4::before,
#main .section-4:not(.sec-about-clients)::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(244, 247, 252, 0.65);
  pointer-events: none;
  z-index: 0;
}

/* 5.2 TẦNG SECTION CHÍNH BÊN TRONG: KHỐI HỘP TRẮNG NỔI (BOXED CARD) */

#kav-block,
body.home #main .section-4 .section-content,
#main .section-4:not(.sec-about-clients) .section-content {
  --kc-navy: #18346b;
  --kc-blue: #4567ab;
  --kc-bluelt: #6a8ec9;
  --kc-off: #f4f7fc;
  --kc-border: rgba(69, 103, 171, 0.18);
  --kc-sh: 0 4px 24px rgba(24, 52, 107, 0.1);
  --kc-shh: 0 8px 36px rgba(24, 52, 107, 0.18);
  display: block;
  box-sizing: border-box;
  font-family: "Be Vietnam Pro", "Segoe UI", sans-serif;
  max-width: 1260px;
  margin: 0 auto;
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 16px 50px rgba(24, 52, 107, 0.12);
  border: 1px solid rgba(69, 103, 171, 0.12);
  padding: 45px 0 55px;
  position: relative;
  z-index: 1;
  overflow: hidden;
}

#kav-block *,
#kav-block *::before,
#kav-block *::after {
  box-sizing: border-box;
}

#kav-block::before,
#main .section-4 .section-content::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(
    circle,
    rgba(69, 103, 171, 0.07) 1px,
    transparent 1px
  );
  background-size: 28px 28px;
  pointer-events: none;
  z-index: 0;
}

#kav-block::after,
#main .section-4 .section-content::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(
    90deg,
    var(--kc-navy) 0%,
    var(--kc-blue) 55%,
    var(--kc-bluelt) 100%
  );
  z-index: 2;
}

/* 5.3 TIÊU ĐỀ SECTION 4 */

#kav-block .kav-head,
#main .section-4 .sec-clients-title {
  text-align: center;
  position: relative;
  z-index: 2;
  margin-bottom: 35px;
  padding: 0 20px;
}

#kav-block .kav-title,
#main .section-4 .sec-clients-title h2 {
  font-family:
    var(--fs-font-heading, inherit), Georgia, "Times New Roman", serif;
  font-size: clamp(26px, 4vw, 46px);
  font-weight: 700;
  line-height: 1.15;
  color: var(--kc-navy);
  margin: 0 0 12px;
  padding: 0;
}

#kav-block .kav-title em,
#main .section-4 .sec-clients-title h2 em,
#main .section-4 .sec-clients-title h2 strong {
  font-style: italic;
  font-weight: 700;
  color: var(--kc-blue);
}

#kav-block .kav-sub,
#main .section-4 .sec-clients-title p {
  font-size: 13.5px;
  color: #4a5f80;
  max-width: 680px;
  margin: 0 auto;
  line-height: 1.75;
}

#kav-block .kav-rule {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 20px auto 0;
}

#kav-block .kav-rl {
  height: 2px;
  width: 52px;
  border-radius: 2px;
}

#kav-block .kav-rl:first-child {
  background: linear-gradient(90deg, transparent, var(--kc-bluelt));
}

#kav-block .kav-rl:last-child {
  background: linear-gradient(90deg, var(--kc-bluelt), transparent);
}

#kav-block .kav-ri {
  width: 26px;
  height: 26px;
  border: 2px solid var(--kc-blue);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: var(--kc-blue);
  line-height: 1;
}

/* 5.4 KHỐI THỐNG KÊ (STATS) */

#kav-block .kav-stats,
#main .section-4 .sec-stats-counter-row,
#main .section-4 .row-2-sec-4 {
  display: flex;
  justify-content: center;
  margin: 0 auto 45px;
  max-width: 660px;
  padding: 0 20px;
  position: relative;
  z-index: 2;
  background: transparent;
  border: none;
  box-shadow: none;
}

#kav-block .kav-stats-inner,
#main .section-4 .sec-stats-counter-row,
#main .section-4 .row-2-sec-4 {
  display: flex;
  background: var(--kc-off);
  border-radius: 12px;
  box-shadow: var(--kc-sh);
  border: 1px solid var(--kc-border);
  overflow: hidden;
  width: 100%;
  padding: 0;
}

#kav-block .kav-st,
#main .section-4 .sec-stats-counter-row > .col,
#main .section-4 .row-2-sec-4 > .col {
  flex: 1 1 0%;
  text-align: center;
  padding: 24px 12px;
  border-right: 1px solid var(--kc-border);
  position: relative;
  margin: 0;
}

#kav-block .kav-st:last-child,
#main .section-4 .sec-stats-counter-row > .col:last-child,
#main .section-4 .row-2-sec-4 > .col:last-child {
  border-right: none;
}

#kav-block .kav-st::before,
#main .section-4 .sec-stats-counter-row > .col::before,
#main .section-4 .row-2-sec-4 > .col::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 30px;
  height: 3px;
  background: var(--kc-blue);
  border-radius: 0 0 3px 3px;
}

#kav-block .kav-sn,
#main .section-4 .sec-stats-counter-text h3 {
  font-family: Georgia, serif;
  font-size: 34px;
  font-weight: 700;
  color: var(--kc-navy);
  line-height: 1;
  display: block;
  margin: 0;
}

#kav-block .kav-sn sup,
#main .section-4 .sec-stats-counter-text h3 sup {
  font-size: 16px;
  color: var(--kc-blue);
  position: relative;
  top: -0.4em;
}

#kav-block .kav-sl,
#main .section-4 .sec-stats-counter-text p {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: #8097b8;
  margin-top: 5px;
  margin-bottom: 0;
  display: block;
  line-height: 1.2;
}

/* 5.5 BĂNG CHUYỀN MARQUEE (HÀNG 1 & HÀNG 2) */

#kav-block .kav-mq,
#main .section-4 .sec-clients-marquee-row {
  position: relative;
  width: 100%;
  overflow: hidden;
  z-index: 2;
  padding: 5px 0;
}

#kav-block .kav-mq::before,
#kav-block .kav-mq::after,
#main .section-4 .sec-clients-marquee-row::before,
#main .section-4 .sec-clients-marquee-row::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 120px;
  z-index: 10;
  pointer-events: none;
}

#kav-block .kav-mq::before,
#main .section-4 .sec-clients-marquee-row::before {
  left: 0;
  background: linear-gradient(to right, #ffffff 0%, transparent 100%);
}

#kav-block .kav-mq::after,
#main .section-4 .sec-clients-marquee-row::after {
  right: 0;
  background: linear-gradient(to left, #ffffff 0%, transparent 100%);
}

#kav-block .kav-track,
#main .section-4 .marquee_group .col-inner {
  display: flex;
  align-items: center;
  width: max-content;
  will-change: transform;
  cursor: grab;
  user-select: none;
  animation: none;
}

#kav-block .kav-track.kav-rev {
  margin-top: 12px;
}

#kav-block .kav-track.is-dragging,
#main .section-4 .marquee_group.is-dragging .col-inner {
  cursor: grabbing;
}

/* 5.6 THẺ KHÁCH HÀNG */

#kav-block .kav-card,
#main .section-4 .sec-clients-logo-box {
  flex-shrink: 0;
  width: 210px;
  height: 130px;
  margin: 0 9px;
  background: #ffffff;
  border: 1.5px solid rgba(69, 103, 171, 0.18);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px 14px;
  position: relative;
  box-shadow: 0 2px 10px rgba(24, 52, 107, 0.06);
  transition:
    box-shadow 0.3s,
    border-color 0.3s,
    transform 0.3s;
  overflow: hidden;
  box-sizing: border-box;
}

#kav-block .kav-card:hover,
#main .section-4 .sec-clients-logo-box:hover {
  border-color: rgba(69, 103, 171, 0.45);
  box-shadow: 0 10px 32px rgba(24, 52, 107, 0.16);
  transform: translateY(-3px);
}

#kav-block .kav-card::before,
#main .section-4 .sec-clients-logo-box::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(
    90deg,
    var(--kc-navy, #18346b),
    var(--kc-blue, #4567ab)
  );
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease;
  border-radius: 12px 12px 0 0;
  z-index: 5;
}

#kav-block .kav-card:hover::before,
#main .section-4 .sec-clients-logo-box:hover::before {
  transform: scaleX(1);
}

#main .section-4 .sec-clients-logo-box .box-image {
  width: 100%;
  height: 75px;
  max-width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  padding: 0;
}

#main .section-4 .sec-clients-logo-box .box-image > div {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

#kav-block .kav-card img,
#main .section-4 .sec-clients-logo-box img {
  max-width: 160px;
  max-height: 72px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  margin: 0 auto;
  filter: none;
  opacity: 0.92;
  transition:
    transform 0.3s ease,
    opacity 0.3s ease;
  cursor: zoom-in;
  -webkit-user-drag: none;
  user-select: none;
}

#kav-block .kav-card:hover img,
#main .section-4 .sec-clients-logo-box:hover img {
  opacity: 1;
  transform: scale(1.06);
}

#main .section-4 .sec-clients-logo-box .box-text {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(135deg, #18346b, #4567ab);
  padding: 6px 8px;
  margin: 0;
  text-align: center;
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
  z-index: 10;
}

#main .section-4 .sec-clients-logo-box:hover .box-text {
  transform: translateY(0);
}

#main .section-4 .sec-clients-logo-box .box-text h4,
#kav-block .kav-cname {
  font-family: "Be Vietnam Pro", "Segoe UI", sans-serif;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #ffffff;
  margin: 0;
  line-height: 1.2;
}

#kav-block .kav-sector {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(
    135deg,
    var(--kc-navy, #18346b),
    var(--kc-blue, #4567ab)
  );
  color: rgba(255, 255, 255, 0.95);
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  text-align: center;
  padding: 5px 4px;
  transform: translateY(100%);
  transition: transform 0.3s ease;
  z-index: 10;
}

#kav-block .kav-card:hover .kav-sector {
  transform: translateY(0);
}

/* 5.7 CHÂN SECTION 4 (BOTTOM CTA) */

#kav-block .kav-bottom,
#main .section-4 .sec-clients-cta-row {
  text-align: center;
  margin-top: 48px;
  position: relative;
  z-index: 2;
  padding: 0 20px;
}

#kav-block .kav-btxt,
#main .section-4 .sec-clients-cta-row p {
  font-size: 11px;
  font-weight: 500;
  color: #8097b8;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 18px;
  display: block;
  line-height: 1.8;
}

#kav-block .kav-cta,
#main .section-4 .sec-clients-btn-col a.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 13px 36px;
  background: linear-gradient(135deg, var(--kc-navy) 0%, var(--kc-blue) 100%);
  color: #ffffff;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 4px;
  border: none;
  box-shadow: 0 4px 18px rgba(24, 52, 107, 0.25);
  transition:
    box-shadow 0.3s,
    transform 0.2s;
}

#kav-block .kav-cta:hover,
#main .section-4 .sec-clients-btn-col a.button:hover {
  box-shadow: 0 8px 30px rgba(24, 52, 107, 0.38);
  transform: translateY(-2px);
}

#kav-block .kav-cta .kav-arr {
  display: inline-block;
  transition: transform 0.3s;
}

#kav-block .kav-cta:hover .kav-arr {
  transform: translateX(5px);
}

@media (max-width: 549px) {
  #kav-block,
  #main .section-4 .section-content {
    padding: 35px 0 35px;
    border-radius: 10px;
  }

  #kav-block .kav-stats-inner,
  #main .section-4 .sec-stats-counter-row {
    flex-wrap: wrap;
  }

  #kav-block .kav-st,
  #main .section-4 .sec-stats-counter-row > .col {
    flex: 1 1 50%;
    border-right: none;
    border-bottom: 1px solid var(--kc-border);
  }

  #kav-block .kav-st:nth-child(odd) {
    border-right: 1px solid var(--kc-border);
  }

  #kav-block .kav-st:nth-last-child(-n + 2) {
    border-bottom: none;
  }

  #kav-block .kav-card,
  #main .section-4 .sec-clients-logo-box {
    width: 162px;
    height: 110px;
  }
}

/* 5.8 LIGHTBOX PHÓNG TO LOGO (KAV-LB) */

#kav-lb {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2147483647;
  background: rgba(10, 18, 40, 0.82);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  align-items: center;
  justify-content: center;
  cursor: zoom-out;
}

#kav-lb.kav-open {
  display: flex;
  animation: kavLbFade 0.2s ease both;
}

@keyframes kavLbFade {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

#kav-lb-inner {
  background: #ffffff;
  border-radius: 16px;
  padding: 40px 44px 28px;
  box-shadow: 0 28px 90px rgba(10, 18, 40, 0.55);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  max-width: 88vw;
  max-height: 90vh;
  overflow: auto;
  cursor: default;
  position: relative;
  animation: kavLbPop 0.28s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes kavLbPop {
  from {
    transform: scale(0.78);
    opacity: 0;
  }

  to {
    transform: scale(1);
    opacity: 1;
  }
}

#kav-lb img {
  max-width: min(420px, 74vw);
  max-height: 55vh;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  border-radius: 6px;
}

#kav-lb-name {
  font-family: "Be Vietnam Pro", "Segoe UI", sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  color: #18346b;
  margin: 0;
}

#kav-lb-sector {
  font-family: "Be Vietnam Pro", "Segoe UI", sans-serif;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: #ffffff;
  background: linear-gradient(135deg, #18346b, #4567ab);
  padding: 5px 16px;
  border-radius: 20px;
}

#kav-lb-hint {
  font-family: "Be Vietnam Pro", "Segoe UI", sans-serif;
  font-size: 9px;
  color: #aab8cc;
  letter-spacing: 1px;
}

#kav-lb-close {
  position: absolute;
  top: 12px;
  right: 14px;
  width: 30px;
  height: 30px;
  border: none;
  background: #eef2fb;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  color: #4a5f80;
  line-height: 1;
  transition:
    background 0.2s,
    color 0.2s;
  font-family: sans-serif;
  padding: 0;
}

#kav-lb-close:hover {
  background: #18346b;
  color: #ffffff;
}

/* ==========================================================================
   [MODULE 2: HOMEPAGE - SECTION 5: PARTNERS]
   Trang chủ: Đối tác kết nối & Mạng lưới
   ========================================================================== */

#main .section-5,
#main .sec-partners {
  background: #ffffff;
  padding: 50px 0 30px;
  position: relative;
  overflow: hidden;
}

#main .section-5 .section-content,
#main .sec-partners .section-content {
  max-width: 1260px;
  margin: 0 auto;
  padding: 0 15px;
  position: relative;
}

/* 5.1 TIÊU ĐỀ SECTION 5: 2 VẠCH NGANG 2 BÊN */

#main .section-5 .sec-partners-header-text,
.sec-partners-header-text {
  text-align: center;
  max-width: 960px;
  margin: 0 auto 25px;
  padding: 0 15px;
}

#main .section-5 .sec-partners-header-text h2,
.sec-partners-header-text h2,
#main .section-5 h1.gdlr-core-title-item-title {
  font-family:
    var(--fs-font-heading, inherit), Georgia, "Times New Roman", serif;
  font-size: clamp(24px, 2.8vw, 35px);
  font-weight: 400;
  color: var(--primary-navy, #18346b);
  letter-spacing: 0px;
  text-transform: none;
  margin: 0 0 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 25px;
}

#main .section-5 .sec-partners-header-text h2::before,
#main .section-5 .sec-partners-header-text h2::after,
.sec-partners-header-text h2::before,
.sec-partners-header-text h2::after,
.gdlr-core-title-item-title-side-border {
  content: "";
  display: inline-block;
  width: 30px;
  height: 1.5px;
  background: var(--primary-navy, #18346b);
  opacity: 0.35;
}

#main .section-5 .sec-partners-header-text p,
#main .section-5 .sec-partners-header-text p em,
.sec-partners-header-text p,
.sec-partners-header-text p em,
.gdlr-core-title-item-caption {
  font-family: "Be Vietnam Pro", "Segoe UI", sans-serif;
  font-size: clamp(15px, 1.7vw, 19px);
  font-weight: 700;
  color: var(--soft-blue, #4567ab);
  font-style: normal;
  line-height: 1.65;
  letter-spacing: 0px;
  max-width: 880px;
  margin: 0 auto;
}

/* 5.2 THẺ ĐỐI TÁC UNIQUE V2 (KAV26-CARD) & FLATSOME LOGO BOX */

#kav-block-unique-v2 {
  --kc-navy: #18346b;
  --kc-blue: #4567ab;
  --kc-bluelt: #6a8ec9;
  --kc-border: rgba(69, 103, 171, 0.12);
  --kc-sh: 0 8px 25px -10px rgba(24, 52, 107, 0.06);
  --kc-sh-hover: 0 20px 45px -12px rgba(24, 52, 107, 0.22);
  display: block;
  position: relative;
  width: 100%;
  overflow: hidden;
}

#main .sec-partners-logos-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  width: max-content;
  max-width: none;
  overflow: visible;
  will-change: transform;
  user-select: none;
  gap: 20px;
  margin: 25px 0 0;
  padding: 10px 0 25px;
  animation: none;
  cursor: grab;
}

.kav26-mq {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding: 15px 0;
}

.kav26-track {
  display: flex;
  width: max-content;
  cursor: grab;
}

.kav26-card,
#main .sec-partners-logos-row .sec-partners-logo-box {
  flex-shrink: 0;
  width: 210px;
  height: 145px;
  margin: 0 12px;
  background: #ffffff;
  border: 1px solid rgba(69, 103, 171, 0.12);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 20px 10px 10px;
  position: relative;
  transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
  box-shadow: 0 8px 25px -10px rgba(24, 52, 107, 0.06);
  overflow: hidden;
  box-sizing: border-box;
}

.kav26-card::before,
#main .sec-partners-logos-row .sec-partners-logo-box::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 2px;
  border-radius: 12px;
  background: linear-gradient(135deg, #18346b, #6a8ec9);
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.kav26-card:hover,
#main .sec-partners-logos-row .sec-partners-logo-box:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 45px -12px rgba(24, 52, 107, 0.22);
  border-color: transparent;
}

.kav26-card:hover::before,
#main .sec-partners-logos-row .sec-partners-logo-box:hover::before {
  opacity: 1;
}

.kav26-card img,
#main .sec-partners-logos-row .sec-partners-logo-box img {
  width: 90%;
  max-width: 170px;
  height: 52px;
  cursor: zoom-in;
  display: block;
  margin: 0 auto 12px;
  object-fit: contain;
  filter: none;
  transition: transform 0.4s ease;
}

.kav26-card:hover img,
#main .sec-partners-logos-row .sec-partners-logo-box:hover img {
  transform: scale(1.05);
}

.kav26-cname {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  color: #2d4470;
  text-align: center;
  padding: 0 5px;
  transition: transform 0.3s ease;
  line-height: 1.3;
}

.kav26-card:hover .kav26-cname {
  transform: translateY(-5px);
}

.kav26-sector {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(90deg, #18346b, #4567ab);
  color: #ffffff;
  font-size: 9px;
  font-weight: 600;
  text-align: center;
  padding: 7px 8px;
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
  z-index: 3;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1.2;
}

.kav26-card:hover .kav26-sector {
  transform: translateY(0);
}

/* 5.3 DẢI SAO PHÂN TÁCH GIAO SECTION */

.kav-rule {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  margin: 35px auto 10px;
  max-width: 600px;
}

.kav-rule .kav-rl {
  flex: 1;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(69, 103, 171, 0.3),
    transparent
  );
}

.kav-rule .kav-ri {
  color: #4567ab;
  font-size: 12px;
  letter-spacing: 6px;
  opacity: 0.7;
}

/* ==========================================================================
   [MODULE 2: HOMEPAGE - SECTION 6: CONTACT & NEWS]
   Trang chủ: Form liên hệ & Tin tức pháp luật
   ========================================================================== */

#main .section-6,
#main .sec-contact-news {
  background: #ffffff;
  padding: 40px 0 70px;
  position: relative;
}

#main .section-6 .section-content {
  max-width: 1260px;
  margin: 0 auto;
  padding: 0 15px;
}

/* 6.1 Container 2 cột song song trên Desktop, xếp chồng trên Mobile & Tablet */

.sec-contact-news-row,
#main .sec-contact-news-row,
#main .section-6 .sec-contact-news-row {
  max-width: 1260px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  width: 100% !important;
}

@media (min-width: 850px) {
  .sec-contact-news-row,
  #main .sec-contact-news-row,
  #main .section-6 .sec-contact-news-row {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: space-between;
    align-items: flex-start !important;
  }
}

@media (max-width: 849px) {
  .sec-contact-news-row,
  #main .sec-contact-news-row,
  #main .section-6 .sec-contact-news-row {
    display: flex !important;
    flex-direction: column !important;
    gap: 40px;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100% !important;
  }
}

/* 6.2 Cột trái: Form liên hệ */

.sec-contact-col,
#main .sec-contact-col,
#main .section-6 .sec-contact-col {
  box-sizing: border-box;
}

@media (min-width: 850px) {
  .sec-contact-col,
  #main .sec-contact-col,
  #main .section-6 .sec-contact-col {
    flex: 0 0 50% !important;
    max-width: 50% !important;
    width: 50% !important;
    padding-left: 15px;
    padding-right: 25px;
  }

  .sec-contact-col > .col-inner,
  #main .section-6 .sec-contact-col > .col-inner {
    display: block;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
  }
}

@media (max-width: 849px) {
  .sec-contact-col,
  #main .sec-contact-col,
  #main .section-6 .sec-contact-col {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 15px;
    padding-right: 25px;
  }

  .sec-contact-col > .col-inner,
  #main .section-6 .sec-contact-col > .col-inner {
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
  }
}

#main .section-6 .sec-contact-col h2,
#main .section-6 .sec-contact-col h3 {
  font-size: 18px;
  font-weight: 700;
  text-transform: none;
  color: var(--primary-navy, #18346b);
  line-height: 1.4;
  margin-bottom: 12px;
}

#main .section-6 .sec-contact-col > .col-inner > p:first-of-type,
#main .section-6 .sec-contact-col .gdlr-core-title-item-caption {
  font-size: 16px;
  font-style: normal;
  color: #6d6d6d;
  line-height: 1.6;
  margin-bottom: 20px;
}

#main .section-6 .sec-contact-col ul,
#main .section-6 .gdlr-core-text-box-item-content ul {
  list-style: disc;
  padding-left: 20px;
  margin: 0 0 25px;
  font-size: 15px;
  color: #14976b;
  line-height: 1.8;
}

#main .section-6 .sec-contact-col ul li,
#main .section-6 .gdlr-core-text-box-item-content ul li {
  margin-bottom: 8px;
  color: #14976b;
}

#main .section-6 .sec-contact-col ul li a,
#main .section-6 .gdlr-core-text-box-item-content ul li a {
  color: #14976b;
  font-weight: 600;
  text-decoration: none;
}

#main .section-6 .sec-contact-col ul li a:hover,
#main .section-6 .gdlr-core-text-box-item-content ul li a:hover {
  text-decoration: underline;
}

#main .section-6 .sec-contact-col ul li em,
#main .section-6 .gdlr-core-text-box-item-content ul li em {
  color: #666666;
  font-style: italic;
}

/* Form liên hệ KAV Grey Form */

#main .section-6 .flatsome-custom-form p,
#main .section-6 .wpcf7-form p {
  margin: 0 0 14px 0;
  padding: 0;
}

#main .section-6 .flatsome-custom-form .row,
#main .section-6 .wpcf7-form .row {
  margin-left: -6px;
  margin-right: -6px;
  margin-top: 0;
  margin-bottom: 14px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
}

#main .section-6 .flatsome-custom-form .row > .col,
#main .section-6 .wpcf7-form .row > .col {
  padding-left: 6px;
  padding-right: 6px;
  padding-top: 0;
  padding-bottom: 0;
  margin: 0;
}

#main .section-6 .flatsome-custom-form .row > .col p,
#main .section-6 .wpcf7-form .row > .col p {
  margin: 0;
  padding: 0;
}

#main .section-6 .flatsome-custom-form input[type="text"],
#main .section-6 .flatsome-custom-form input[type="email"],
#main .section-6 .flatsome-custom-form input[type="tel"],
#main .section-6 .wpcf7-form input[type="text"],
#main .section-6 .wpcf7-form input[type="email"],
#main .section-6 .wpcf7-form input[type="tel"],
.kav-contact-form input {
  height: 48px;
  line-height: 48px;
  padding: 0 16px;
  margin: 0;
  background: #f4f4f4;
  border: 1px solid #f4f4f4;
  border-radius: 3px;
  color: #333333;
  font-size: 14px;
  box-shadow: none;
  width: 100%;
  box-sizing: border-box;
  transition: all 0.25s ease;
}

#main .section-6 .flatsome-custom-form input:focus,
#main .section-6 .wpcf7-form input:focus,
#main .section-6 .flatsome-custom-form textarea:focus,
#main .section-6 .wpcf7-form textarea:focus,
.kav-contact-form input:focus,
.kav-contact-form textarea:focus {
  background: #ffffff;
  border-color: var(--primary-navy, #18346b);
  box-shadow: 0 0 0 1px var(--primary-navy, #18346b);
  outline: none;
}

#main .section-6 .flatsome-custom-form textarea,
#main .section-6 .wpcf7-form textarea,
.kav-contact-form textarea {
  min-height: 120px;
  height: 120px;
  padding: 14px 16px;
  margin: 0;
  background: #f4f4f4;
  border: 1px solid #f4f4f4;
  border-radius: 3px;
  color: #333333;
  font-size: 14px;
  box-shadow: none;
  width: 100%;
  box-sizing: border-box;
  resize: vertical;
  transition: all 0.25s ease;
}

#main .section-6 .flatsome-custom-form input[type="submit"],
#main .section-6 .flatsome-custom-form button[type="submit"],
#main .section-6 .wpcf7-form input[type="submit"],
.kav-contact-form button[type="submit"] {
  height: 48px;
  line-height: 48px;
  padding: 0 28px;
  margin: 0;
  width: 100%;
  background: var(--primary-navy, #18346b);
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  border-radius: 3px;
  border: none;
  box-shadow: none;
  cursor: pointer;
  transition: background 0.3s ease;
}

#main .section-6 .flatsome-custom-form input[type="submit"]:hover,
#main .section-6 .flatsome-custom-form button[type="submit"]:hover,
#main .section-6 .wpcf7-form input[type="submit"]:hover,
.kav-contact-form button[type="submit"]:hover {
  background: #14976b;
}

/* 6.3 Cột phải: Tin tức pháp luật */

.sec-news-col,
#main .sec-news-col,
#main .section-6 .sec-news-col {
  box-sizing: border-box;
}

@media (min-width: 850px) {
  .sec-news-col,
  #main .sec-news-col,
  #main .section-6 .sec-news-col {
    flex: 0 0 50% !important;
    max-width: 50% !important;
    width: 50% !important;
    padding-left: 25px;
    padding-right: 15px;
  }

  .sec-news-col > .col-inner,
  #main .section-6 .sec-news-col > .col-inner {
    display: block;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
  }
}

@media (max-width: 849px) {
  .sec-news-col,
  #main .sec-news-col,
  #main .section-6 .sec-news-col {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 25px;
    padding-right: 15px;
  }
}

#main .section-6 .sec-news-col h2,
#main .section-6 .sec-news-col h3 {
  font-size: 20px;
  font-weight: 700;
  text-transform: none;
  color: #14976b;
  line-height: 1.4;
  margin-bottom: 22px;
}

#main .section-6 .sec-news-blog-posts {
  display: flex;
  flex-direction: column;
  width: 100%;
}

#main .section-6 .sec-news-blog-posts.has-shadow .col-inner {
  box-shadow: none;
  background: transparent;
  border: none;
  padding: 0;
}

#main .section-6 .sec-news-blog-posts .post-item {
  flex: 0 0 100%;
  max-width: 100%;
  width: 100%;
  padding-bottom: 0;
  padding-top: 0;
  margin-bottom: 0;
  margin-top: 0;
}

#main .section-6 .sec-news-blog-posts .box-blog-post {
  background: transparent;
  border: none;
  border-bottom: 1px solid #eceff5;
  border-radius: 0;
  box-shadow: none;
  padding: 16px 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 16px;
  margin: 0;
}

#main .section-6 .sec-news-blog-posts .post-item:first-child .box-blog-post {
  padding-top: 6px;
}

#main .section-6 .sec-news-blog-posts .box-blog-post:hover {
  transform: none;
  box-shadow: none;
}

#main .section-6 .sec-news-blog-posts .box-image {
  width: 105px;
  max-width: 105px;
  height: 75px;
  flex-shrink: 0;
  border-radius: 4px;
  overflow: hidden;
}

#main .section-6 .sec-news-blog-posts .box-image .image-cover {
  padding-top: 0;
  height: 75px;
  width: 105px;
}

#main .section-6 .sec-news-blog-posts .box-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 4px;
  transition: transform 0.35s ease;
}

#main .section-6 .sec-news-blog-posts .box-blog-post:hover .box-image img {
  transform: scale(1.08);
}

#main .section-6 .sec-news-blog-posts .box-text {
  text-align: left;
  padding: 0;
  flex: 1 1 auto;
}

#main .section-6 .sec-news-blog-posts .box-text .box-text-inner {
  padding: 0;
}

#main .section-6 .sec-news-blog-posts .box-text h5.post-title,
#main .section-6 .sec-news-blog-posts .box-text h5.post-title a {
  font-family: "Be Vietnam Pro", "Segoe UI", sans-serif;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--primary-navy, #18346b);
  line-height: 1.45;
  margin: 0;
  text-decoration: none;
  text-align: left;
  transition: color 0.2s ease;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

#main .section-6 .sec-news-blog-posts .box-text h5.post-title a:hover {
  color: #14976b;
}

#main .section-6 .sec-news-blog-posts .is-divider {
  display: none;
}

/* 6.4 Nút Xem thêm Tin tức: Căn trái trên Desktop, Căn giữa trên Mobile & Tablet */

.sec-news-more-btn,
#main .sec-news-more-btn,
#main .section-6 .sec-news-more-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  min-height: auto;
  padding: 9px 20px;
  gap: 8px;
  margin-top: 24px;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 0;
  float: left;
  border: 2px solid #18346b;
  background: transparent;
  color: #18346b;
  text-decoration: none;
  transition: all 0.3s ease;
}

.sec-news-more-btn span,
#main .section-6 .sec-news-more-btn span {
  display: inline-flex;
  align-items: center;
  line-height: 1;
  padding: 0;
  margin: 0;
  font-size: 14px;
  font-weight: 700;
}

.sec-news-more-btn i,
#main .section-6 .sec-news-more-btn i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  top: 0;
  margin: 0;
  padding: 0;
  line-height: 1;
  font-size: 12px;
  transform: translateY(1px);
}

.sec-news-more-btn:hover,
#main .sec-news-more-btn:hover,
#main .section-6 .sec-news-more-btn:hover,
#main .section-6 .sec-news-view-more:hover,
#main .section-6 .sec-news-col .button.outline:hover {
  background: #18346b;
  color: #ffffff;
}

@media (max-width: 849px) {
  .sec-news-more-btn,
  #main .sec-news-more-btn,
  #main .section-6 .sec-news-more-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    min-height: auto;
    padding: 9px 20px;
    gap: 8px;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-top: 20px;
    margin-bottom: 0;
    width: fit-content;
    float: none;
  }
}

#main .section-6 .sec-news-view-more,
#main .section-6 .sec-news-col .button.outline {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: #18346b;
  background: transparent;
  border: 2px solid #18346b;
  padding: 10px 24px;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 0;
  margin-top: 20px;
  transition: all 0.3s ease;
}

/* ==========================================================================
   MODULE 3: TRANG LUẬT SƯ & GIỚI THIỆU
   Component-based Architecture & Clean Scoping
   ========================================================================== */

/* --------------------------------------------------------------------------
   3.1 SUBPAGE HERO & HEADER BASE
   Áp dụng: Giới thiệu, Luật sư, Lĩnh vực, Tin tức (Semantic Hero & Header Components)
   -------------------------------------------------------------------------- */

body:has(.banner-about) .header:not(.stuck),
body:has(.sec-about-hero) .header:not(.stuck),
body:has(.page-title) .header:not(.stuck) {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 30;
  background: rgba(255, 255, 255, 0.75);
  border-bottom: none;
  box-shadow: none;
}

body:has(.banner-about) .header:not(.stuck) .header-wrapper,
body:has(.banner-about) .header:not(.stuck) .header-bg-color,
body:has(.banner-about) .header:not(.stuck) .header-bg-container,
body:has(.banner-about) .header:not(.stuck) #top-bar,
body:has(.banner-about) .header:not(.stuck) #masthead,
body:has(.banner-about) .header:not(.stuck) #wide-nav,
body:has(.sec-about-hero) .header:not(.stuck) .header-wrapper,
body:has(.sec-about-hero) .header:not(.stuck) .header-bg-color,
body:has(.sec-about-hero) .header:not(.stuck) .header-bg-container,
body:has(.sec-about-hero) .header:not(.stuck) #top-bar,
body:has(.sec-about-hero) .header:not(.stuck) #masthead,
body:has(.sec-about-hero) .header:not(.stuck) #wide-nav,
body:has(.page-title) .header:not(.stuck) .header-wrapper,
body:has(.page-title) .header:not(.stuck) .header-bg-color,
body:has(.page-title) .header:not(.stuck) .header-bg-container,
body:has(.page-title) .header:not(.stuck) #top-bar,
body:has(.page-title) .header:not(.stuck) #masthead,
body:has(.page-title) .header:not(.stuck) #wide-nav {
  background-color: transparent;
  background: transparent;
  box-shadow: none;
}

/* Subpage Hero Banner (.sec-about-hero / .banner-about) */

.sec-about-hero,
.banner-about {
  position: relative;
  padding: 0 !important;
  margin: 0 !important;
  width: 100%;
  max-width: 100%;
  background-color: transparent !important;
  background: transparent !important;
  overflow: hidden;
  height: 500px !important;
  min-height: 500px !important;
  max-height: 500px !important;
}

.sec-about-hero .section-bg,
.banner-about .section-bg {
  background-color: transparent !important;
  background: transparent !important;
  display: none !important;
}

.banner-about .section-content,
.banner-about .about-hero-slider,
.banner-about .about-hero-row,
.banner-about .about-hero-col,
.banner-about .about-hero-col .col-inner,
.banner-about .slider-wrapper,
.banner-about .flickity-viewport,
.banner-about .flickity-slider,
.banner-about .row,
.banner-about .col,
.banner-about .col-inner,
.sec-about-hero .section-content,
.sec-about-hero .about-hero-slider,
.sec-about-hero .about-hero-row,
.sec-about-hero .about-hero-col,
.sec-about-hero .about-hero-col .col-inner,
.sec-about-hero .slider-wrapper,
.sec-about-hero .flickity-viewport,
.sec-about-hero .flickity-slider,
.sec-about-hero .row,
.sec-about-hero .col,
.sec-about-hero .col-inner {
  max-width: 100% !important;
  width: 100% !important;
  height: 500px !important;
  min-height: 500px !important;
  max-height: 500px !important;
  margin: 0 !important;
  padding: 0 !important;
}

.banner-about .flickity-page-dots,
.banner-about .flickity-button,
.banner-about .loading-spin,
.sec-about-hero .flickity-page-dots,
.sec-about-hero .flickity-button,
.sec-about-hero .loading-spin {
  display: none !important;
}

.about-hero-box,
.sec-about-hero .box,
.banner-about .box {
  position: relative;
  width: 100% !important;
  max-width: 100% !important;
  height: 500px !important;
  min-height: 500px !important;
  max-height: 500px !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 0;
  overflow: hidden;
}

.about-hero-box .box-image,
.sec-about-hero .box .box-image,
.banner-about .box .box-image {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  margin: 0;
  padding: 0;
}

.about-hero-box .box-image > div,
.sec-about-hero .box .box-image > div,
.banner-about .box .box-image > div {
  width: 100% !important;
  height: 100% !important;
}

.about-hero-box .box-image img,
.sec-about-hero .box .box-image img,
.banner-about .box .box-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  display: block;
}

.banner-about:hover .box-image img,
.sec-about-hero:hover .box-image img {
  transform: scale(1.03);
}

/* Pure neutral dark overlay matching Tin tuc (Zero blue tint) */
.about-hero-box .box-image::after,
.sec-about-hero .box .box-image::after,
.banner-about .box .box-image::after {
  display: none !important;
  content: none !important;
}

.about-hero-box .box-image .overlay,
.sec-about-hero .box .box-image .overlay,
.banner-about .box .box-image .overlay {
  position: absolute !important;
  inset: 0 !important;
  background: rgba(0, 0, 0, 0.25) !important;
  background-color: rgba(0, 0, 0, 0.25) !important;
  background-image: none !important;
  pointer-events: none !important;
  z-index: 1 !important;
  opacity: 1 !important;
}

.about-hero-box .box-text,
.sec-about-hero .box .box-text,
.banner-about .box .box-text {
  position: absolute !important;
  top: 325px !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 100% !important;
  max-width: 860px !important;
  padding: 0 20px !important;
  margin: 0 !important;
  text-align: center;
  z-index: 3;
}

.about-hero-box .box-text-inner,
.sec-about-hero .box .box-text-inner,
.banner-about .box .box-text-inner {
  position: static !important;
  top: auto !important;
  transform: none !important;
}

.about-hero-box h2,
.sec-about-hero .box h2,
.banner-about .box h2 {
  font-family: "Playfair Display", serif !important;
  font-size: clamp(32px, 4vw, 44px) !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  letter-spacing: 0.5px !important;
  line-height: 1.25 !important;
  margin: 0 0 10px 0 !important;
  text-shadow: 0 3px 14px rgba(0, 0, 0, 0.5) !important;
}

.about-hero-box p,
.sec-about-hero .box p,
.banner-about .box p {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 14px !important;
  font-family: "DM Sans", sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 2.5px !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.9) !important;
  margin: 0 !important;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5) !important;
}

.about-hero-box p::before,
.about-hero-box p::after,
.sec-about-hero .box p::before,
.sec-about-hero .box p::after,
.banner-about .box p::before,
.banner-about .box p::after {
  content: "" !important;
  display: inline-block !important;
  width: 32px !important;
  height: 1.5px !important;
  background: var(--accent-gold, #c8a96e) !important;
  vertical-align: middle !important;
}

@media (max-width: 849px) {
  .sec-about-hero,
  .banner-about,
  .about-hero-box,
  .sec-about-hero .box,
  .banner-about .box {
    height: 360px !important;
    min-height: 360px !important;
  }

  .about-hero-box .box-text,
  .sec-about-hero .box .box-text,
  .banner-about .box .box-text {
    top: 215px !important;
  }

  .about-hero-box h2,
  .sec-about-hero .box h2,
  .banner-about .box h2 {
    font-size: 24px !important;
    margin-bottom: 6px !important;
  }

  .about-hero-box p,
  .sec-about-hero .box p,
  .banner-about .box p {
    font-size: 11px !important;
    letter-spacing: 2px !important;
    gap: 8px !important;
  }

  .about-hero-box p::before,
  .about-hero-box p::after,
  .sec-about-hero .box p::before,
  .sec-about-hero .box p::after,
  .banner-about .box p::before,
  .banner-about .box p::after {
    width: 20px !important;
  }
}

/* Định dạng chữ trang Giới thiệu (.sec-about-intro) */

body:has(.sec-about-intro) {
  font-family: var(--font-sans);
  color: var(--text-muted);
  background-color: #ffffff;
  -webkit-font-smoothing: antialiased;
}

body:has(.sec-about-intro) h1,
body:has(.sec-about-intro) h2,
body:has(.sec-about-intro) h3,
body:has(.sec-about-intro) h4 {
  font-family: var(--font-serif);
  color: var(--primary-navy);
  font-weight: 700;
  line-height: 1.3;
}

body:has(.sec-about-intro) h5,
body:has(.sec-about-intro) h6 {
  font-family: var(--font-sans);
  color: var(--soft-blue);
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
}

body:has(.sec-about-intro) p {
  font-family: var(--font-sans);
  font-size: 15.5px;
  line-height: 1.85;
  color: var(--text-muted);
  margin-bottom: 16px;
}

body:has(.sec-about-intro) strong,
body:has(.sec-about-intro) b {
  color: var(--primary-navy);
  font-weight: 700;
}

body:has(.sec-about-intro) em {
  color: var(--accent-gold);
  font-style: italic;
}

/* --------------------------------------------------------------------------
   3.2 TRANG GIỚI THIỆU (/gioi-thieu/ - .sec-about-hero, .sec-about-intro)
   -------------------------------------------------------------------------- */

/* --- 1. KHỐI GIỚI THIỆU CHUNG (.sec-about-intro) --- */

.sec-about-intro {
  padding-top: 85px;
  padding-bottom: 85px;
  background: #ffffff;
}

.sec-about-intro .about-intro-col-img .about-intro-img {
  position: relative;
}

.sec-about-intro .about-intro-col-img .about-intro-img img {
  border-radius: 10px;
  box-shadow: 0 16px 40px rgba(24, 52, 107, 0.12);
  transition:
    transform 0.4s ease,
    box-shadow 0.4s ease;
}

.sec-about-intro .about-intro-col-img .about-intro-img:hover img {
  transform: translateY(-6px);
  box-shadow: 0 24px 50px rgba(24, 52, 107, 0.2);
}

.sec-about-intro .about-intro-col-text h5 {
  color: var(--soft-blue);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.sec-about-intro .about-intro-col-text h2 {
  font-family: var(--font-serif);
  font-size: clamp(28px, 3.8vw, 42px);
  font-weight: 700;
  color: var(--primary-navy);
  margin-bottom: 24px;
  position: relative;
  padding-bottom: 16px;
}

.sec-about-intro .about-intro-col-text h2::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 60px;
  height: 3px;
  background: linear-gradient(90deg, var(--accent-gold), var(--primary-navy));
  border-radius: 2px;
}

.sec-about-intro .about-intro-col-text p {
  text-align: justify;
  margin-bottom: 16px;
}

@media (min-width: 850px) {
  #main .sec-about-intro .about-intro-col-img {
    display: block;
    flex: 0 0 50%;
    max-width: 50%;
  }

  #main .sec-about-intro .about-intro-col-text {
    flex: 0 0 50%;
    max-width: 50%;
  }
}

@media (max-width: 849px) {
  .sec-about-intro {
    padding-top: 50px;
    padding-bottom: 50px;
  }

  #main .sec-about-intro .about-intro-col-img {
    display: none !important;
  }

  #main .sec-about-intro .about-intro-col-text {
    flex: 0 0 100%;
    max-width: 100%;
    width: 100%;
    margin-top: 0;
  }

  #main .sec-about-intro .about-intro-col-text .col-inner {
    padding-left: 15px;
    padding-right: 15px;
    max-width: 100%;
  }

  #main .sec-about-intro .about-intro-col-text h5 {
    text-align: center;
    margin-bottom: 10px;
  }

  #main .sec-about-intro .about-intro-col-text h2 {
    font-size: clamp(22px, 5vw, 32px);
    text-align: center;
    margin-bottom: 20px;
    line-height: 1.35;
    padding-bottom: 16px;
  }

  #main .sec-about-intro .about-intro-col-text h2::after {
    left: 50%;
    transform: translateX(-50%);
  }

  #main .sec-about-intro .about-intro-col-text p {
    font-size: 15px;
    line-height: 1.8;
    text-align: justify;
    margin-bottom: 14px;
  }
}

/* --- 2. KHỐI 3 THẺ GIÁ TRỊ CỐT LÕI (.sec-about-values) --- */

.sec-about-values {
  padding-top: 85px;
  padding-bottom: 85px;
  background: var(--bg-subtle);
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
}

.sec-about-values .about-values-col .col-inner {
  background: #ffffff;
  border-radius: 12px;
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-sm);
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  position: relative;
  overflow: hidden;
  height: 100%;
}

.sec-about-values .about-values-col .col-inner::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(
    90deg,
    var(--primary-navy) 0%,
    var(--accent-gold) 100%
  );
  transition: height 0.3s ease;
}

.sec-about-values .about-values-col .col-inner:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-hover);
  border-color: var(--border-gold);
}

.sec-about-values .about-values-col .col-inner:hover::before {
  height: 6px;
}

.sec-about-values .about-values-col h2 strong {
  color: var(--accent-gold);
  font-weight: 800;
}

@media (min-width: 850px) {
  .sec-about-values .about-values-row {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    max-width: 1290px;
    margin: 20px auto 0;
    padding: 0;
    gap: 0;
    width: 100%;
  }

  .sec-about-values .about-values-col {
    flex: 0 0 33.33333%;
    max-width: 33.33333%;
    width: 33.33333%;
    padding: 0 15px;
  }

  .sec-about-values .about-values-col .col-inner {
    padding: 36px 28px;
  }

  .sec-about-values .about-values-col h2 {
    font-family: var(--font-serif);
    font-size: 19px;
    font-weight: 700;
    color: #18346b;
    margin-bottom: 14px;
    letter-spacing: 1px;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 6px;
  }

  .sec-about-values .about-values-col p {
    font-size: 14.5px;
    line-height: 1.7;
    color: #475569;
    margin: 0;
    text-align: justify;
  }
}

@media (max-width: 849px) {
  .sec-about-values {
    padding-top: 50px;
    padding-bottom: 50px;
  }

  .sec-about-values .about-values-row {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 580px;
    margin: 0 auto;
    padding: 0 16px;
  }

  .sec-about-values .about-values-col {
    flex: 0 0 100%;
    max-width: 100%;
    width: 100%;
    padding: 0;
    margin-bottom: 16px;
  }

  .sec-about-values .about-values-col .col-inner {
    padding: 24px 20px;
    border-radius: 12px;
    height: auto;
    box-shadow: 0 3px 12px rgba(24, 52, 107, 0.08);
    border: 1px solid rgba(69, 103, 171, 0.12);
    background: #ffffff;
  }

  .sec-about-values .about-values-col h2 {
    font-family: var(--font-serif);
    font-size: 18px;
    font-weight: 700;
    color: #18346b;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
  }

  .sec-about-values .about-values-col p {
    font-size: 14px;
    line-height: 1.65;
    color: #475569;
    margin: 0;
    text-align: justify;
  }
}

/* --- 3. KHỐI CÚP & GIẢI THƯỞNG (.sec-about-awards) --- */

.sec-about-awards {
  padding-top: 90px;
  padding-bottom: 90px;
  background-color: #ffffff;
  position: relative;
}

@media (max-width: 768px) {
  .sec-about-awards {
    padding-top: 50px;
    padding-bottom: 50px;
  }
}

.sec-about-awards .about-awards-title h5 {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 3px;
  color: var(--soft-blue);
  text-transform: uppercase;
  margin-bottom: 12px;
}

.sec-about-awards .about-awards-title h2 {
  font-family: var(--font-serif);
  font-size: clamp(28px, 4.2vw, 44px);
  font-weight: 700;
  color: var(--primary-navy);
  margin-bottom: 12px;
}

.sec-about-awards .about-awards-title h2 strong {
  color: var(--accent-gold);
}

.sec-about-awards .about-awards-title p {
  font-size: 16px;
  color: #64748b;
  margin-bottom: 25px;
}

.sec-about-awards .about-awards-title::after {
  content: "";
  display: block;
  background: linear-gradient(
    to right,
    transparent,
    var(--accent-gold),
    transparent
  );
  height: 1px;
  width: 100px;
  margin: 0 auto 35px auto;
}

.sec-about-awards .about-awards-grid,
.about-awards-grid {
  justify-content: center;
  margin-bottom: 30px;
}

.sec-about-awards .about-awards-item-col,
.about-awards-item-col {
  margin-bottom: 30px;
}

.about-awards-card {
  background: #ffffff;
  border-radius: 12px;
  border: 1.5px solid rgba(177, 151, 107, 0.28);
  box-shadow: 0 4px 16px rgba(24, 52, 107, 0.06);
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  overflow: hidden;
  position: relative;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
}

.about-awards-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(
    90deg,
    var(--accent-gold),
    var(--primary-navy),
    var(--accent-gold)
  );
  z-index: 2;
}

.about-awards-card .box-image {
  background-color: var(--bg-light);
  padding: 20px 16px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 170px;
  min-height: 170px;
}

.about-awards-card .box-image img {
  max-height: 145px;
  width: auto;
  object-fit: contain;
  transition: transform 0.4s ease;
}

.about-awards-card .box-text {
  padding: 18px 16px;
  background: #ffffff;
  border-top: 1px solid rgba(69, 103, 171, 0.08);
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-align: center;
}

.about-awards-card h5 {
  display: inline-block;
  background: var(--accent-gold);
  color: #ffffff;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 700;
  padding: 3px 12px;
  border-radius: 20px;
  margin-bottom: 10px;
  letter-spacing: 1px;
}

.about-awards-card h4 {
  font-family: var(--font-serif);
  font-size: 17.5px;
  font-weight: 700;
  color: var(--primary-navy);
  line-height: 1.35;
  margin-bottom: 6px;
}

.about-awards-card h6 {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  color: #8a99ad;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 0;
}

.about-awards-card:hover {
  transform: translateY(-8px) scale(1.02);
  border-color: var(--accent-gold);
  box-shadow: 0 16px 36px rgba(177, 151, 107, 0.25);
}

.about-awards-card:hover .box-image img {
  transform: scale(1.08);
}

.sec-about-awards .about-awards-desc-row {
  margin-top: 20px;
  padding-top: 35px;
  border-top: 1px solid var(--border-subtle);
}

.sec-about-awards .about-awards-desc-col ul {
  list-style: none;
  padding-left: 0;
  margin: 25px 0;
}

.sec-about-awards .about-awards-desc-col ul li {
  position: relative;
  padding-left: 32px;
  margin-bottom: 18px;
  font-size: 15.5px;
  line-height: 1.8;
  color: var(--text-muted);
}

.sec-about-awards .about-awards-desc-col ul li::before {
  content: "★";
  position: absolute;
  left: 0;
  top: 1px;
  color: var(--accent-gold);
  font-size: 15px;
}

.sec-about-awards .about-awards-desc-col ul li strong {
  color: var(--primary-navy);
}

/* --- 4. KHỐI DÒNG THỜI GIAN / LỊCH SỬ PHÁT TRIỂN (.sec-timeline) --- */

.sec-timeline {
  padding: 85px 0;
  background: var(--bg-subtle);
  position: relative;
}

.sec-timeline .timeline-row {
  max-width: 1260px;
  margin: 0 auto;
  width: 100%;
}

.sec-timeline .timeline-item {
  position: relative;
  padding: 24px;
  margin-bottom: 24px;
  background: #ffffff;
  border-radius: 12px;
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-sm);
  transition: all 0.35s ease;
}

.sec-timeline .timeline-item:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
  border-color: var(--border-gold);
}

@media (max-width: 768px) {
  .sec-timeline {
    padding: 50px 0;
  }
}

/* --- 5. KHỐI KHÁCH HÀNG TIÊU BIỂU (.sec-about-clients) --- */

#main .sec-about-clients {
  background-color: #f4f7fc;
  background-image: url("https://luatnguyenchinh.theme.trueads.vn/wp-content/uploads/2026/09/bg-nguyenchinh-landing.jpg");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  padding: 60px 15px 70px;
  position: relative;
  overflow: hidden;
}

#main .sec-about-clients::before {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  background: rgba(244, 247, 252, 0.65);
  pointer-events: none;
  z-index: 0;
}

#main .sec-about-clients .section-content {
  display: block;
  box-sizing: border-box;
  font-family: "Be Vietnam Pro", "Segoe UI", sans-serif;
  max-width: 1280px;
  margin: 0 auto;
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 16px 50px rgba(24, 52, 107, 0.12);
  border: 1px solid rgba(69, 103, 171, 0.12);
  padding: 45px 0 55px;
  position: relative;
  z-index: 1;
  overflow: hidden;
}

#main .sec-about-clients .section-content::before {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  background-image: radial-gradient(
    circle,
    rgba(69, 103, 171, 0.07) 1px,
    transparent 1px
  );
  background-size: 28px 28px;
  pointer-events: none;
  z-index: 0;
}

#main .sec-about-clients .section-content::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #18346b 0%, #4567ab 55%, #6a8ec9 100%);
  z-index: 2;
}

#main .sec-about-clients .about-clients-title {
  text-align: center;
  position: relative;
  z-index: 2;
  margin-bottom: 35px;
  padding: 0 20px;
}

#main .sec-about-clients .about-clients-title h2 {
  font-family:
    var(--fs-font-heading, inherit), Georgia, "Times New Roman", serif;
  font-size: clamp(26px, 4vw, 46px);
  font-weight: 700;
  line-height: 1.15;
  color: #18346b;
  margin: 0 0 12px;
  padding: 0;
}

#main .sec-about-clients .about-clients-title h2 em,
#main .sec-about-clients .about-clients-title h2 strong {
  font-style: italic;
  font-weight: 700;
  color: #4567ab;
}

#main .sec-about-clients .about-clients-title p {
  font-family: "Be Vietnam Pro", "Segoe UI", sans-serif;
  font-size: 13.5px;
  color: #4a5f80;
  max-width: 680px;
  margin: 0 auto;
  line-height: 1.75;
}

#main .sec-about-clients .about-clients-title .kav-rule {
  display: none !important;
}

/* Stats Counter */

#main .sec-about-clients .about-awards-grid {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: stretch;
  margin: 0 auto 45px;
  max-width: 660px;
  width: calc(100% - 40px);
  padding: 0;
  position: relative;
  z-index: 2;
  background: #f4f7fc;
  border-radius: 12px;
  box-shadow: 0 4px 24px rgba(24, 52, 107, 0.1);
  border: 1px solid rgba(69, 103, 171, 0.18);
  overflow: hidden;
}

#main .sec-about-clients .about-stat-col {
  flex: 1 1 0%;
  max-width: none;
  width: auto;
  text-align: center;
  padding: 24px 12px;
  border-right: 1px solid rgba(69, 103, 171, 0.18);
  position: relative;
  margin: 0;
  background: transparent;
}

#main .sec-about-clients .about-stat-col:last-child {
  border-right: none;
}

#main .sec-about-clients .about-stat-col::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 30px;
  height: 3px;
  background: #4567ab;
  border-radius: 0 0 3px 3px;
}

#main .sec-about-clients .about-stat-col p:first-child {
  font-family: Georgia, serif;
  font-size: 34px;
  font-weight: 700;
  color: #18346b;
  line-height: 1;
  display: block;
  margin: 0;
}

#main .sec-about-clients .about-stat-col p:first-child sup {
  font-size: 16px;
  color: #4567ab;
  position: relative;
  top: -0.4em;
}

#main .sec-about-clients .about-stat-col p:last-child {
  font-family: "Be Vietnam Pro", sans-serif;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: #8097b8;
  margin-top: 5px;
  margin-bottom: 0;
  display: block;
  line-height: 1.2;
}

/* Logos & Cards */

.about-clients-logo-box {
  flex-shrink: 0;
  width: 210px;
  height: 130px;
  min-height: 130px;
  margin: 0 9px;
  background: #ffffff;
  border: 1.5px solid rgba(69, 103, 171, 0.18);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px 14px;
  position: relative;
  box-shadow: 0 2px 10px rgba(24, 52, 107, 0.06);
  transition:
    box-shadow 0.3s ease,
    border-color 0.3s ease,
    transform 0.3s ease;
  overflow: hidden;
  box-sizing: border-box;
  cursor: pointer;
}

.about-clients-logo-box:hover {
  border-color: rgba(69, 103, 171, 0.45);
  box-shadow: 0 10px 32px rgba(24, 52, 107, 0.16);
  transform: translateY(-3px);
}

.about-clients-logo-box::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #18346b, #4567ab);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease;
  border-radius: 12px 12px 0 0;
  z-index: 5;
}

.about-clients-logo-box:hover::before {
  transform: scaleX(1);
}

.about-clients-logo-box .box-image {
  width: 100%;
  height: 75px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  padding: 0;
}

.about-clients-logo-box img {
  max-width: 160px;
  max-height: 72px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  margin: 0 auto;
  opacity: 0.92;
  transition:
    transform 0.3s ease,
    opacity 0.3s ease;
}

.about-clients-logo-box:hover img {
  opacity: 1;
  transform: scale(1.06);
}

.about-clients-logo-box .box-text {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(135deg, #18346b, #4567ab);
  padding: 6px 8px;
  margin: 0;
  text-align: center;
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
  z-index: 10;
}

.about-clients-logo-box:hover .box-text {
  transform: translateY(0);
}

.about-clients-logo-box .box-text h4,
.about-clients-logo-box .box-text p {
  font-family: "Be Vietnam Pro", "Segoe UI", sans-serif;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #ffffff;
  margin: 0;
  line-height: 1.2;
}

/* CTA */

.about-clients-cta-row {
  margin-top: 48px;
  margin-bottom: 25px;
  text-align: center;
  position: relative;
  z-index: 2;
  padding: 0 20px;
}

.about-clients-cta-col {
  margin: 0 auto;
  max-width: 900px;
}

.about-clients-cta-text p:first-child {
  font-family: "Be Vietnam Pro", sans-serif;
  font-size: 11px;
  font-weight: 500;
  color: #8097b8;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 12px;
  display: block;
  line-height: 1.8;
}

.about-clients-cta-text p:nth-child(2) {
  font-family: "Be Vietnam Pro", sans-serif;
  font-size: 10.5px;
  font-weight: 400;
  color: #8097b8;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 22px;
  line-height: 1.8;
}

.about-clients-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 13px 36px;
  background: linear-gradient(135deg, #18346b 0%, #4567ab 100%);
  color: #ffffff;
  font-family: "Be Vietnam Pro", "Segoe UI", sans-serif;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 4px;
  border: none;
  box-shadow: 0 4px 18px rgba(24, 52, 107, 0.25);
  transition:
    box-shadow 0.3s ease,
    transform 0.2s ease;
  cursor: pointer;
}

.about-clients-cta-btn:hover {
  box-shadow: 0 8px 24px rgba(24, 52, 107, 0.35);
  transform: translateY(-2px);
}

/* --- 6. KHỐI ĐỐI TÁC MẠNG LƯỚI (.sec-about-partners) --- */

#main .sec-about-partners {
  background: #ffffff;
  padding: 50px 0 30px;
  position: relative;
  overflow: hidden;
  border: none;
}

#main .sec-about-partners .section-content {
  max-width: 1290px;
  margin: 0 auto;
  padding: 0 15px;
  position: relative;
}

#main .sec-about-partners .about-partners-title {
  text-align: center;
  max-width: 960px;
  margin: 0 auto 25px;
  padding: 0 15px;
}

#main .sec-about-partners .about-partners-title h2 {
  font-family:
    var(--fs-font-heading, inherit), Georgia, "Times New Roman", serif;
  font-size: clamp(24px, 2.8vw, 35px);
  font-weight: 400;
  color: #18346b;
  margin: 0 0 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 25px;
}

#main .sec-about-partners .about-partners-title h2::before,
#main .sec-about-partners .about-partners-title h2::after {
  content: "";
  display: inline-block;
  width: 30px;
  height: 1.5px;
  background: #18346b;
  opacity: 0.35;
}

#main .sec-about-partners .about-partners-title p,
#main .sec-about-partners .about-partners-title p em {
  font-family: "Be Vietnam Pro", "Segoe UI", sans-serif;
  font-size: clamp(15px, 1.7vw, 19px);
  font-weight: 700;
  color: #4567ab;
  font-style: normal;
  line-height: 1.65;
  max-width: 880px;
  margin: 0 auto;
  display: block;
}

.about-partners-logo-box {
  flex-shrink: 0;
  width: 210px;
  height: 145px;
  min-height: 145px;
  margin: 0 12px;
  background: #ffffff;
  border: 1px solid rgba(69, 103, 171, 0.12);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 20px 10px 10px;
  position: relative;
  transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
  box-shadow: 0 8px 25px -10px rgba(24, 52, 107, 0.06);
  overflow: hidden;
  box-sizing: border-box;
  cursor: pointer;
}

.about-partners-logo-box::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 2px;
  border-radius: 12px;
  background: linear-gradient(135deg, #18346b, #6a8ec9);
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.about-partners-logo-box:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 45px -12px rgba(24, 52, 107, 0.22);
  border-color: transparent;
}

.about-partners-logo-box:hover::before {
  opacity: 1;
}

.about-partners-logo-box .box-image {
  width: 100%;
  height: 52px;
  margin: 0 auto 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.about-partners-logo-box img {
  width: 90%;
  max-width: 170px;
  height: 52px;
  display: block;
  margin: 0 auto;
  object-fit: contain;
  transition: transform 0.4s ease;
  opacity: 1;
}

.about-partners-logo-box:hover img {
  transform: scale(1.05);
}

.about-partners-logo-box .box-text {
  width: 100%;
  padding: 0 5px;
  margin: 0;
  text-align: center;
}

.about-partners-logo-box .box-text p,
.about-partners-logo-box .box-text h4 {
  font-family: "Be Vietnam Pro", sans-serif;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  color: #2d4470;
  text-align: center;
  padding: 0 5px;
  transition: transform 0.3s ease;
  line-height: 1.3;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.about-partners-logo-box:hover .box-text p,
.about-partners-logo-box:hover .box-text h4 {
  transform: translateY(-5px);
}

/* Colocated Responsive cho Khách Hàng & Đối Tác */

@media (max-width: 768px) {
  #main .sec-about-clients,
  #main .sec-about-partners {
    padding-top: 50px;
    padding-bottom: 50px;
  }
}

@media (max-width: 549px) {
  #main .sec-about-clients {
    padding: 30px 10px 40px;
  }

  #main .sec-about-clients .section-content {
    padding: 30px 10px;
    border-radius: 12px;
  }

  #main .sec-about-clients .about-awards-grid {
    flex-wrap: wrap;
    max-width: 320px;
    margin-bottom: 30px;
  }

  #main .sec-about-clients .about-stat-col {
    flex: 1 1 50%;
    border-right: none;
    border-bottom: 1px solid rgba(69, 103, 171, 0.18);
    padding: 16px 8px;
  }

  #main .sec-about-clients .about-stat-col:nth-child(odd) {
    border-right: 1px solid rgba(69, 103, 171, 0.18);
  }

  #main .sec-about-clients .about-stat-col:last-child {
    flex: 1 1 100%;
    border-bottom: none;
    border-right: none;
  }

  .about-clients-logo-box {
    width: 162px;
    height: 110px;
    min-height: 110px;
  }

  .about-clients-logo-box .box-image {
    height: 60px;
  }

  .about-clients-logo-box img {
    max-width: 130px;
    max-height: 55px;
  }

  .about-partners-logo-box {
    width: 162px;
    height: 125px;
    min-height: 125px;
  }

  .about-partners-logo-box .box-image {
    height: 45px;
  }

  .about-partners-logo-box img {
    max-width: 135px;
    height: 45px;
  }
}

/* --- 7. THƯ VIỆN HÌNH ẢNH HOẠT ĐỘNG (.sec-about-gallery) --- */

.sec-about-gallery {
  padding-top: 85px;
  padding-bottom: 85px;
  background-color: #ffffff;
}

@media (max-width: 768px) {
  .sec-about-gallery {
    padding-top: 50px;
    padding-bottom: 50px;
  }
}

.sec-about-gallery .about-gallery-title h2 {
  font-family: var(--font-serif);
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 700;
  color: var(--primary-navy);
  margin-bottom: 40px;
  position: relative;
  text-align: center;
}

.sec-about-gallery .about-gallery-title h2::after {
  content: "";
  display: block;
  width: 70px;
  height: 3px;
  background: var(--accent-gold);
  margin: 14px auto 0 auto;
  border-radius: 2px;
}

.sec-about-gallery .about-gallery-grid {
  margin-top: 20px;
}

.sec-about-gallery .about-gallery-grid .gallery-box {
  border-radius: 10px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: all 0.4s ease;
}

.sec-about-gallery .about-gallery-grid img {
  border-radius: 10px;
  transition:
    transform 0.5s ease,
    filter 0.5s ease;
}

.sec-about-gallery .about-gallery-grid .gallery-box:hover img {
  transform: scale(1.05);
}

.sec-about-gallery .about-gallery-grid .gallery-box:hover {
  box-shadow: var(--shadow-hover);
  transform: translateY(-4px);
}

/* Marquee / Slider Row Helper */

.sec-about-awards .about-awards-grid,
.about-clients-logos-row,
.about-clients-logos-row-left,
.about-partners-logos-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  width: max-content;
  max-width: none;
  overflow: visible;
  will-change: transform;
  user-select: none;
  justify-content: center;
  gap: 20px;
  margin: 0;
  padding: 10px 0;
}

.sec-about-awards .about-awards-grid > .col,
.sec-about-awards .about-awards-grid > [class*="col"],
.about-awards-item-col {
  flex: 0 0 250px;
  max-width: 250px;
  width: 250px;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  display: flex;
}

/* --------------------------------------------------------------------------
   3.3 TRANG LUẬT SƯ (/luat-su/ - .sec-team-list, .sec-team-bio)
   Component classes: .team-member-card, .lawyer-profile, .team-member-box
   -------------------------------------------------------------------------- */

/* --- 1. KHỐI DANH SÁCH LUẬT SƯ & NHÂN SỰ (.sec-team-list / .section-11) --- */

.sec-team-list {
  background-color: #ffffff;
  padding-top: 70px;
  padding-bottom: 70px;
  position: relative;
}

@media (max-width: 768px) {
  .sec-team-list {
    padding-top: 50px;
    padding-bottom: 50px;
  }
}

/* Tiêu đề mục Luật sư */

.team-header-title h2,
.sec-team-list .ux_text h2 {
  font-family: var(--font-serif);
  font-size: clamp(26px, 3vw, 34px);
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--primary-navy);
  margin-top: 0;
  margin-bottom: 12px;
  text-align: center;
  position: relative;
  display: block;
}

/* Thanh gạch nối vàng đồng sang trọng phía dưới tiêu đề (chuẩn KAV) */

.team-header-title::after,
.sec-team-list .ux_text::after {
  content: "";
  display: block;
  width: 60px;
  height: 3px;
  background: linear-gradient(
    90deg,
    var(--accent-gold) 0%,
    var(--primary-navy) 100%
  );
  border-radius: 2px;
  margin: 14px auto 45px auto;
}

/* Căn giữa hàng card luật sư */

.team-grid,
.sec-team-list .row_inner {
  justify-content: center;
  row-gap: 30px;
  max-width: 1260px;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

/* Cột chứa thẻ Luật sư */

.team-member-col,
.sec-team-list .col_inner {
  display: flex;
  justify-content: center;
}

/* Khung thẻ Luật sư (Component Classes: .team-member-card, .lawyer-profile, .team-member-box) */

.team-member-card,
.lawyer-profile,
.team-member-box,
.sec-team-list .ux-image-box {
  background: #ffffff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(24, 52, 107, 0.08);
  border: 1px solid rgba(24, 52, 107, 0.08);
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  width: 100%;
  max-width: 360px;
  display: flex;
  flex-direction: column;
}

/* Hover nâng thẻ & đổ bóng mềm */

.team-member-card:hover,
.lawyer-profile:hover,
.team-member-box:hover,
.sec-team-list .ux-image-box:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 45px rgba(24, 52, 107, 0.16);
  border-color: rgba(177, 151, 107, 0.35);
}

/* Khung ảnh chân dung Luật sư */

.team-member-card .box-image,
.lawyer-profile .box-image,
.team-member-box .box-image,
.sec-team-list .ux-image-box .box-image {
  height: 380px;
  width: 100%;
  overflow: hidden;
  position: relative;
  background-color: #f1f4f9;
}

@media (max-width: 768px) {
  .team-member-card .box-image,
  .lawyer-profile .box-image,
  .team-member-box .box-image,
  .sec-team-list .ux-image-box .box-image {
    height: 320px;
  }
}

.team-member-card .box-image img,
.lawyer-profile .box-image img,
.team-member-box .box-image img,
.sec-team-list .ux-image-box .box-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

.team-member-card:hover .box-image img,
.lawyer-profile:hover .box-image img,
.team-member-box:hover .box-image img,
.sec-team-list .ux-image-box:hover .box-image img {
  transform: scale(1.05);
}

.team-member-card .box-image::after,
.lawyer-profile .box-image::after,
.team-member-box .box-image::after,
.sec-team-list .ux-image-box .box-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    transparent 75%,
    rgba(24, 52, 107, 0.25) 100%
  );
  pointer-events: none;
}

/* Phần thông tin tên & chức danh dưới ảnh */

.team-member-card .box-text,
.lawyer-profile .box-text,
.team-member-box .box-text,
.sec-team-list .ux-image-box .box-text {
  padding: 22px 20px 24px;
  background: #ffffff;
  text-align: center;
}

.team-member-card .box-text h3,
.lawyer-profile .box-text h3,
.team-member-box .box-text h3,
.sec-team-list .ux-image-box .box-text h3 {
  font-family: var(--font-serif);
  font-size: 21px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--primary-navy);
  margin: 0 0 8px 0;
  transition: color 0.3s ease;
}

.team-member-card:hover .box-text h3,
.lawyer-profile:hover .box-text h3,
.team-member-box:hover .box-text h3,
.sec-team-list .ux-image-box:hover .box-text h3 {
  color: var(--secondary-navy);
}

.team-member-card .box-text p,
.lawyer-profile .box-text p,
.team-member-box .box-text p,
.sec-team-list .ux-image-box .box-text p {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: #9c7b48;
  background: rgba(177, 151, 107, 0.12);
  padding: 5px 16px;
  border-radius: 20px;
  display: inline-block;
  margin: 0;
}

/* --- 2. KHỐI TIỂU SỬ CHI TIẾT & CHỨNG CHỈ THÀNH TỰU (.sec-team-bio / .section-12) --- */

.sec-team-bio {
  background: linear-gradient(180deg, #f8fafd 0%, #edf2f9 100%);
  padding-top: 85px;
  padding-bottom: 95px;
  border-top: 1px solid rgba(47, 85, 151, 0.08);
  position: relative;
}

@media (max-width: 768px) {
  .sec-team-bio {
    padding-top: 50px;
    padding-bottom: 50px;
  }
}

.team-bio-row,
.sec-team-bio .row {
  align-items: flex-start;
  max-width: 1260px;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

/* Cột trái: Văn bản giới thiệu tiểu sử (Desktop default) */

.team-bio-col-text,
.sec-team-bio .col:first-child {
  padding-right: 40px;
}

.team-bio-col-text h2,
.sec-team-bio .col:first-child h2 {
  font-family: var(--font-serif);
  font-size: clamp(26px, 3vw, 34px);
  font-weight: 700;
  line-height: 1.3;
  color: var(--primary-navy);
  margin-top: 0;
  margin-bottom: 22px;
  padding-bottom: 14px;
  position: relative;
}

.team-bio-col-text h2::after,
.sec-team-bio .col:first-child h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 60px;
  height: 3.5px;
  background: var(--accent-gold);
  border-radius: 2px;
}

.team-bio-col-text p,
.sec-team-bio .col:first-child p {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.8;
  color: var(--text-dark);
  margin-bottom: 16px;
  text-align: justify;
}

.team-bio-col-text > p:first-of-type,
.sec-team-bio .col:first-child > p:first-of-type {
  font-size: 15.5px;
  color: #1e293b;
}

.team-bio-col-text b,
.team-bio-col-text strong,
.sec-team-bio .col:first-child b,
.sec-team-bio .col:first-child strong,
.sec-team-bio .col:first-child b,
.sec-team-bio .col:first-child strong {
  color: var(--primary-navy);
  font-weight: 700;
}

.team-bio-col-text p:nth-of-type(8),
.sec-team-bio .col:first-child p:nth-of-type(8) {
  background: #ffffff;
  border-left: 4px solid var(--accent-gold);
  padding: 18px 22px;
  border-radius: 0 10px 10px 0;
  box-shadow: 0 6px 20px rgba(24, 52, 107, 0.07);
  margin: 24px 0;
  color: #1e293b;
  position: relative;
}

.sec-team-bio [class*="citation-"],
.sec-team-bio .luminous-sources {
  display: inline;
  background: transparent;
  color: inherit;
  font-size: inherit;
  border: none;
}

.sec-team-bio .source-inline-chip-container {
  display: none !important;
}

/* Cột phải: Lưới trưng bày Chứng chỉ & Bằng khen */

@media (min-width: 1025px) {
  .team-bio-col-images,
  .sec-team-bio .col:last-child {
    position: sticky;
    top: 120px;
  }
}

.team-bio-col-images,
.sec-team-bio .col:last-child {
  padding-left: 10px;
}

.team-bio-col-images .col-inner,
.sec-team-bio .col:last-child .col-inner {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.team-cert-img,
.team-bio-col-images .ux-image,
.sec-team-bio .col:last-child .ux-image {
  background: #ffffff;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(24, 52, 107, 0.1);
  box-shadow: 0 6px 20px rgba(24, 52, 107, 0.08);
  transition: all 0.35s cubic-bezier(0.165, 0.84, 0.44, 1);
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
}

.team-cert-img .img-inner,
.team-bio-col-images .img-inner,
.sec-team-bio .col:last-child .img-inner {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
}

.team-cert-img img,
.team-bio-col-images img,
.sec-team-bio .col:last-child img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

.team-cert-img:hover,
.team-bio-col-images .ux-image:hover,
.sec-team-bio .col:last-child .ux-image:hover {
  transform: translateY(-5px);
  box-shadow: 0 14px 30px rgba(24, 52, 107, 0.16);
  border-color: var(--accent-gold);
}

.team-cert-img:hover img,
.team-bio-col-images .ux-image:hover img,
.sec-team-bio .col:last-child .ux-image:hover img {
  transform: scale(1.08);
}

/* Colocated Touch & Tablet Rule: Hide certificates and expand bio text to full width */

@media (max-width: 1024px) {
  .team-bio-col-images,
  .sec-team-bio .col:last-child {
    display: none !important;
  }

  .team-bio-col-text,
  .sec-team-bio .col:first-child {
    flex: 0 0 100%;
    max-width: 100%;
    flex-basis: 100%;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-bottom: 0;
  }
}

/* ==========================================================================
   MODULE 4: TRANG TIN TỨC & BÀI VIẾT CHI TIẾT (SINGLE POST)
   ========================================================================== */

/* 4.6 ĐỒNG BỘ TRANG TIN TỨC */

/* 4.6.1 TRANG TIN TỨC (Page Title & News Grid) */

/* 1.1 Nền tổng thể & Page Header Banner */

body:has(.tabbed-content) #comments,
body:has(.tabbed-content) .comments-area {
  display: none !important;
}

body:has(.tabbed-content) {
  background-color: var(--bg-light, #faf8f4);
}

body:has(.tabbed-content) .page-header-wrapper {
  background: transparent;
  margin-bottom: 0;
}

body:has(.tabbed-content) .page-title.simple-title {
  background: linear-gradient(135deg, #0f2247 0%, #18346b 55%, #1e4080 100%);
  padding-top: 250px !important;
  padding-bottom: 70px !important;
  min-height: 500px !important;
  height: 500px !important;
  position: relative;
  overflow: hidden;
  box-shadow: 0 8px 30px rgba(15, 34, 71, 0.25);
}

body:has(.tabbed-content) .page-title.simple-title::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 50px 50px;
  pointer-events: none;
  z-index: 1;
}

body:has(.tabbed-content) .page-title.simple-title::after {
  content: "";
  position: absolute;
  top: -90px;
  right: -90px;
  width: 380px;
  height: 380px;
  border: 1px solid rgba(200, 169, 110, 0.18);
  box-shadow: inset 0 0 0 40px rgba(200, 169, 110, 0.05);
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
}

body:has(.tabbed-content) .page-title-inner {
  position: relative;
  z-index: 2;
}

body:has(.tabbed-content) .entry-title::before {
  content: "NGUYEN CHINH LAWYERS • LEGAL UPDATES";
  display: block;
  font-family:
    "DM Sans",
    -apple-system,
    sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: rgba(200, 169, 110, 0.9);
  margin-bottom: 12px;
}

body:has(.tabbed-content) .entry-title {
  font-family: "Playfair Display", serif;
  font-size: clamp(34px, 4.8vw, 52px);
  font-weight: 900;
  color: #ffffff;
  letter-spacing: 0.01em;
  line-height: 1.15;
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
}

body:has(.tabbed-content) .entry-title::after {
  content: "Cập nhật thông tin pháp luật mới nhất, phân tích chuyên sâu từ đội ngũ Luật sư Nguyễn Chỉnh.";
  display: block;
  font-family:
    "DM Sans",
    -apple-system,
    sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.65);
  margin-top: 14px;
  max-width: 540px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.6;
}

body:has(.tabbed-content) .title-breadcrumbs {
  margin-top: 18px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.4);
  font-weight: 600;
}

body:has(.tabbed-content) .title-breadcrumbs a {
  color: rgba(255, 255, 255, 0.5);
  transition: color 0.2s ease;
}

body:has(.tabbed-content) .title-breadcrumbs a:hover {
  color: #ffffff;
}

@media (max-width: 768px) {
  body:has(.tabbed-content) .page-title.simple-title {
    padding-top: 130px;
    padding-bottom: 50px;
    min-height: 240px;
  }

  body:has(.tabbed-content) .entry-title::before {
    font-size: 10px;
    letter-spacing: 0.25em;
    margin-bottom: 8px;
  }

  body:has(.tabbed-content) .entry-title {
    font-size: 26px;
  }

  body:has(.tabbed-content) .entry-title::after {
    font-size: 12.5px;
  }
}

/* 1.2 Khối nội dung chính & Tabs danh mục (.section-11) */

body:has(.tabbed-content) .section-11 {
  background-color: var(--bg-light, #faf8f4);
  padding: 40px 0 75px;
}

body:has(.tabbed-content) .section-11 .section-bg {
  background-color: var(--bg-light, #faf8f4);
}

@media (max-width: 768px) {
  body:has(.tabbed-content) .section-11 {
    padding: 24px 0 45px;
  }
}

body:has(.tabbed-content) .section-11 .col.large-8 {
  padding-right: 24px;
}

@media (max-width: 1024px) {
  body:has(.tabbed-content) .section-11 .col.large-8 {
    padding-right: 0;
  }
}

body:has(.tabbed-content) .section-11 .col > .col-inner::before {
  display: none;
  content: none;
}

/* Tabs danh mục tin tức */

body:has(.tabbed-content) .section-11 .tabgroup {
  margin-bottom: 25px;
}

body:has(.tabbed-content) .section-11 ul.nav-pills {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: #ffffff;
  border: 1px solid #d0d8ec;
  border-radius: 50px;
  box-shadow: 0 4px 18px rgba(24, 52, 107, 0.05);
  margin-bottom: 28px;
  list-style: none;
}

body:has(.tabbed-content) .section-11 ul.nav-pills li {
  margin: 0;
  padding: 0;
}

body:has(.tabbed-content) .section-11 ul.nav-pills li a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: "DM Sans", sans-serif;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 9px 20px;
  border-radius: 50px;
  color: #18346b;
  background: transparent;
  border: 1.5px solid transparent;
  transition: all 0.25s ease;
  cursor: pointer;
  line-height: 1.2;
}

body:has(.tabbed-content) .section-11 ul.nav-pills li a:hover {
  background: rgba(24, 52, 107, 0.06);
  color: #0f2247;
}

body:has(.tabbed-content) .section-11 ul.nav-pills li.active a {
  background: linear-gradient(135deg, #0f2247 0%, #18346b 100%);
  color: #ffffff;
  border-color: #0f2247;
  box-shadow: 0 4px 14px rgba(24, 52, 107, 0.25);
}

@media (max-width: 549px) {
  body:has(.tabbed-content) .section-11 ul.nav-pills {
    border-radius: 20px;
    padding: 6px 8px;
  }

  body:has(.tabbed-content) .section-11 ul.nav-pills li a {
    font-size: 12px;
    padding: 7px 14px;
  }
}

/* 1.3 Lưới bài viết 3 cột & Thẻ card (.col.post-item) */

body:has(.tabbed-content) .section-11 .col.large-9 .row.large-columns-3,
body:has(.tabbed-content) .section-11 .col.large-8 .row.large-columns-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin: 0;
  padding: 0;
}

@media (max-width: 849px) {
  body:has(.tabbed-content) .section-11 .col.large-9 .row.large-columns-3,
  body:has(.tabbed-content) .section-11 .col.large-8 .row.large-columns-3 {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
}

@media (max-width: 549px) {
  body:has(.tabbed-content) .section-11 .col.large-9 .row.large-columns-3,
  body:has(.tabbed-content) .section-11 .col.large-8 .row.large-columns-3 {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

body:has(.tabbed-content) .section-11 .col.post-item {
  padding: 0;
  margin: 0;
  width: 100%;
  max-width: 100%;
  display: flex;
  flex-direction: column;
}

body:has(.tabbed-content) .section-11 .col.large-8 .col.post-item:first-child {
  /* Signature highlight rule for first post in Flatsome native layout */
  position: relative;
}

body:has(.tabbed-content) .section-11 .col.post-item > .col-inner {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 0;
  margin: 0;
}

body:has(.tabbed-content) .section-11 .col.post-item .box-blog-post {
  background: #ffffff;
  border-radius: 14px;
  border: 1px solid #d0d8ec;
  overflow: hidden;
  box-shadow: 0 4px 18px rgba(24, 52, 107, 0.05);
  transition:
    transform 0.28s ease,
    box-shadow 0.28s ease,
    border-color 0.28s ease;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  height: 100%;
  position: relative;
}

body:has(.tabbed-content) .section-11 .col.post-item .box-blog-post:hover {
  transform: translateY(-5px);
  box-shadow: 0 14px 34px rgba(24, 52, 107, 0.12);
  border-color: rgba(24, 52, 107, 0.35);
}

/* Ảnh thumbnail bài viết */

body:has(.tabbed-content) .section-11 .col.post-item .box-image {
  width: 100%;
  height: auto;
  overflow: hidden;
  position: relative;
  background: #eef0f7;
  border-radius: 14px 14px 0 0;
  flex-shrink: 0;
}

body:has(.tabbed-content) .section-11 .col.post-item .box-image .image-cover {
  padding-top: 56.25%;
  position: relative;
  width: 100%;
}

body:has(.tabbed-content) .section-11 .col.post-item .box-image .image-cover a {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

body:has(.tabbed-content) .section-11 .col.post-item .box-image img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

body:has(.tabbed-content) .section-11 .col.post-item:hover .box-image img {
  transform: scale(1.05);
}

/* Badge danh mục góc phải ảnh */

body:has(.tabbed-content) .section-11 .col.post-item .box-image::after {
  position: absolute;
  bottom: 12px;
  right: 12px;
  font-family:
    "DM Sans",
    -apple-system,
    sans-serif;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #ffffff;
  padding: 4px 10px;
  border-radius: 5px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.22);
  z-index: 2;
  pointer-events: none;
  line-height: 1.4;
}

body:has(.tabbed-content)
  .section-11
  .col.post-item:has(a[href*="tham-tra-phap-ly"])
  .box-image::after,
body:has(.tabbed-content)
  .section-11
  .col.post-item:has(a[href*="tuyen-bo-chung-asean"])
  .box-image::after,
body:has(.tabbed-content)
  .section-11
  .col.post-item:has(a[href*="mot-so-van-de"])
  .box-image::after,
body:has(.tabbed-content)
  .section-11
  .col.post-item:has(a[href*="sach-tham-khao"])
  .box-image::after {
  content: "● TÀI LIỆU PHÁP LUẬT";
  background: #5a1a6b;
}

body:has(.tabbed-content)
  .section-11
  .col.post-item:has(a[href*="danh-sach-dia-chi"])
  .box-image::after,
body:has(.tabbed-content)
  .section-11
  .col.post-item:has(a[href*="lawyers-bao-ve-thanh-cong"])
  .box-image::after {
  content: "● VỤ VIỆC TIÊU BIỂU";
  background: #18346b;
}

body:has(.tabbed-content)
  .section-11
  .col.post-item:has(a[href*="kav-lawyers-dong-hanh"])
  .box-image::after,
body:has(.tabbed-content)
  .section-11
  .col.post-item:has(a[href*="quan-ly-tien-do"])
  .box-image::after,
body:has(.tabbed-content)
  .section-11
  .col.post-item:has(a[href*="luat-trong-tai"])
  .box-image::after {
  content: "● VĂN BẢN PHÁP LUẬT";
  background: #7b3a0f;
}

body:has(.tabbed-content)
  .section-11
  .col.post-item:has(a[href*="nganh-nghe-dau-tu"])
  .box-image::after,
body:has(.tabbed-content)
  .section-11
  .col.post-item:has(a[href*="nha-dau-tu-can-luu-y"])
  .box-image::after,
body:has(.tabbed-content)
  .section-11
  .col.post-item:has(a[href*="luat-tri-tue-nhan-tao"])
  .box-image::after {
  content: "● THÔNG TIN PHÁP LUẬT";
  background: #1e6b3a;
}

/* Nội dung text bài viết */

body:has(.tabbed-content) .section-11 .col.post-item .box-text {
  padding: 18px 20px 22px;
  text-align: left;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  background: #ffffff;
}

body:has(.tabbed-content) .section-11 .col.post-item .box-text-inner {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

body:has(.tabbed-content) .section-11 .col.post-item .post-title {
  font-family: "Playfair Display", serif;
  font-size: 16.5px;
  font-weight: 700;
  line-height: 1.45;
  margin: 0 0 10px;
}

body:has(.tabbed-content) .section-11 .col.post-item .post-title a {
  color: #1a1f2e;
  text-decoration: none;
  transition: color 0.2s ease;
}

body:has(.tabbed-content) .section-11 .col.post-item:hover .post-title a {
  color: #18346b;
}

body:has(.tabbed-content) .section-11 .col.post-item .from-the-blog {
  font-size: 13.5px;
  color: #64748b;
  line-height: 1.6;
  margin-bottom: 14px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

body:has(.tabbed-content) .section-11 .col.post-item .post-meta {
  margin-top: auto;
  font-size: 12px;
  color: #94a3b8;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* 1.4 Sidebar trang tin tức (.col.large-4) */

body:has(.tabbed-content) .section-11 .col.large-4 > .col-inner {
  position: sticky;
  top: 100px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

body:has(.tabbed-content) .section-11 .col.large-4 .box-vertical {
  background: #ffffff;
  border-radius: 12px;
  border: 1px solid #d0d8ec;
  padding: 20px;
  box-shadow: 0 4px 16px rgba(24, 52, 107, 0.04);
}

body:has(.tabbed-content) .section-11 .col.large-4 .widget {
  background: #ffffff;
  border-radius: 12px;
  border: 1px solid #d0d8ec;
  padding: 24px;
  box-shadow: 0 4px 16px rgba(24, 52, 107, 0.04);
}

body:has(.tabbed-content) .section-11 .col.large-4 .widget-title {
  font-family: "Playfair Display", serif;
  font-size: 16.5px;
  font-weight: 700;
  color: #18346b;
  padding-bottom: 10px;
  border-bottom: 2px solid #d0d8ec;
  margin-bottom: 16px;
}

/* 1.5 Phân trang chuẩn KAV */

body:has(.tabbed-content) .pagination {
  margin-top: 36px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
}

body:has(.tabbed-content) .pagination .page-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  border: 1px solid #d0d8ec;
  background: #ffffff;
  color: #18346b;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  transition: all 0.2s ease;
}

body:has(.tabbed-content) .pagination .page-number:hover,
body:has(.tabbed-content) .pagination .page-number.current {
  background: #18346b;
  color: #ffffff;
  border-color: #18346b;
}

/* 1.6 Các khối widget sidebar (KAV Boxes & CTA) */

body:has(.tabbed-content) .kav-sidebar-cta {
  background: linear-gradient(135deg, #0f2247 0%, #18346b 100%);
  border-radius: 12px;
  padding: 24px;
  color: #ffffff;
  text-align: center;
}

body:has(.tabbed-content) .kav-sidebar-cta h4 {
  color: #ffffff;
  font-size: 18px;
  margin-bottom: 10px;
}

body:has(.tabbed-content) .kav-sidebar-cta p {
  color: rgba(255, 255, 255, 0.8);
  font-size: 13.5px;
  margin-bottom: 16px;
}

body:has(.tabbed-content) .kav-sidebar-cta .btn-cta {
  display: inline-block;
  background: #b1976b;
  color: #ffffff;
  padding: 10px 24px;
  border-radius: 50px;
  font-weight: 700;
  text-decoration: none;
  transition: background 0.2s ease;
}

body:has(.tabbed-content) .kav-sidebar-cta .btn-cta:hover {
  background: #c8a96e;
}

/* --- 1.7 THÀNH PHẦN #kavblog VÀ RESPONSIVE ĐÓNG GÓI --- */

#kavblog {
  --nb: #18346b;
  --nd: #0f2247;
  --nm: #1e4080;
  --ab: #4567ab;
  --go: #c8a96e;
  --gl: #e8d5a3;
  --cr: #faf8f4;
  --sl: #4a5568;
  --tx: #1a1f2e;
  --br: #d0d8ec;
  font-family:
    "DM Sans",
    -apple-system,
    sans-serif;
  color: var(--tx);
  background: var(--cr);
  line-height: 1.6;
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
}

#kavblog a {
  color: inherit;
  text-decoration: none;
}

#kavblog img {
  display: block;
  width: 100%;
  height: 100%;
}

#kavblog button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
  outline: none;
}

#kavblog .kfbar {
  background: #ffffff;
  border-bottom: 1px solid var(--br);
  position: sticky;
  top: 70px;
  z-index: 99;
  box-shadow: 0 2px 12px rgba(24, 52, 107, 0.06);
}

#kavblog .kfin {
  max-width: 1180px;
  margin: 0 auto;
  padding: 12px 24px;
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
}

#kavblog .kfin::-webkit-scrollbar {
  display: none;
}

#kavblog .kflbl {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ab);
  white-space: nowrap;
  margin-right: 8px;
}

#kavblog .kcbtn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  border-radius: 50px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--sl);
  background: transparent;
  border: 1.5px solid transparent;
  transition: all 0.2s ease;
  white-space: nowrap;
}

#kavblog .kcbtn:hover {
  background: rgba(24, 52, 107, 0.05);
  color: var(--nb);
}

#kavblog .kcbtn.on {
  background: var(--nd);
  color: #ffffff;
  border-color: var(--nd);
  font-weight: 700;
}

#kavblog .kdot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--go);
  display: inline-block;
  flex-shrink: 0;
}

#kavblog .kmain {
  max-width: 1180px;
  margin: 0 auto;
  padding: 40px 24px 80px;
}

#kavblog .klay {
  display: flex;
  gap: 36px;
  align-items: flex-start;
}

#kavblog .kcol {
  flex: 1 1 0;
  min-width: 0;
}

#kavblog .kside {
  width: 290px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

#kavblog .kgl {
  border-bottom: 2px solid var(--ab);
  padding-bottom: 6px;
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

#kavblog .ksec {
  font-family: "Playfair Display", serif;
  font-size: 17px;
  font-weight: 700;
  color: var(--nb);
}

#kavblog .kslab {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ab);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

#kavblog .kfeat {
  display: block;
  background: #ffffff;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--br);
  box-shadow: 0 4px 20px rgba(24, 52, 107, 0.06);
  margin-bottom: 28px;
  transition: all 0.3s ease;
}

#kavblog .kfeat:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 36px rgba(24, 52, 107, 0.12);
}

#kavblog .kfimg {
  overflow: hidden;
  height: 350px;
  border-radius: 18px;
  position: relative;
}

#kavblog .kfimg img {
  object-fit: cover;
  transition: transform 0.6s ease;
}

#kavblog .kfeat:hover .kfimg img {
  transform: scale(1.04);
}

#kavblog .kfnp {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--nb), var(--ab));
  color: rgba(255, 255, 255, 0.5);
  font-size: 50px;
}

#kavblog .kfov {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(15, 34, 71, 0.95) 0%,
    rgba(15, 34, 71, 0.3) 50%,
    transparent 100%
  );
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 30px;
  color: #ffffff;
}

#kavblog .kftit {
  font-family: "Playfair Display", serif;
  font-size: 24px;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.35;
  margin-bottom: 12px;
}

#kavblog .kfdt {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--gl);
  font-weight: 500;
}

#kavblog .kfbottom {
  padding: 22px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

#kavblog .kfcatbar {
  display: flex;
  align-items: center;
  gap: 12px;
}

#kavblog .kfcatbar .kbadge {
  font-size: 12px;
  font-weight: 700;
  color: var(--nb);
  background: rgba(24, 52, 107, 0.08);
  padding: 4px 12px;
  border-radius: 50px;
}

#kavblog .kstag {
  position: absolute;
  top: 20px;
  left: 20px;
  background: var(--nd);
  color: #ffffff;
  padding: 6px 14px;
  border-radius: 8px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 6px;
  z-index: 10;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

#kavblog .kbadge {
  font-size: 11px;
  font-weight: 700;
  color: var(--nb);
  background: rgba(24, 52, 107, 0.06);
  padding: 4px 10px;
  border-radius: 50px;
  display: inline-block;
  white-space: nowrap;
}

#kavblog .krm {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--nb);
  transition: all 0.2s ease;
}

#kavblog .krm::after {
  content: "→";
  transition: transform 0.2s ease;
}

#kavblog .krm:hover::after,
#kavblog .kcard:hover .krm::after {
  transform: translateX(4px);
}

#kavblog .krm:hover,
#kavblog .kcard:hover .krm {
  color: var(--ab);
}

#kavblog .krmw {
  color: #ffffff;
}

#kavblog .krmw::after {
  color: var(--gl);
}

#kavblog .kgrid2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

#kavblog .kcard {
  background: #ffffff;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--br);
  box-shadow: 0 4px 16px rgba(24, 52, 107, 0.04);
  display: flex;
  flex-direction: column;
  transition: all 0.25s ease;
}

#kavblog .kcard:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 28px rgba(24, 52, 107, 0.1);
  border-color: rgba(24, 52, 107, 0.25);
}

#kavblog .kcimg {
  height: 200px;
  position: relative;
  overflow: hidden;
  background: #eef0f7;
}

#kavblog .kcimg img {
  object-fit: cover;
  transition: transform 0.5s ease;
}

#kavblog .kcard:hover .kcimg img {
  transform: scale(1.05);
}

#kavblog .kibadge {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 5;
}

#kavblog .kibadge .kbadge {
  background: rgba(15, 34, 71, 0.85);
  color: #ffffff;
  backdrop-filter: blur(4px);
}

#kavblog .kcbody {
  padding: 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

#kavblog .kctit {
  font-family: "Playfair Display", serif;
  font-size: 16.5px;
  font-weight: 700;
  color: var(--tx);
  line-height: 1.45;
  margin-bottom: 10px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color 0.2s ease;
}

#kavblog .kcard:hover .kctit {
  color: var(--nb);
}

#kavblog .kcdt {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  color: var(--sl);
  margin-bottom: 12px;
  font-weight: 500;
}

#kavblog .ksc {
  background: #ffffff;
  border-radius: 14px;
  border: 1px solid var(--br);
  padding: 24px;
  box-shadow: 0 4px 16px rgba(24, 52, 107, 0.04);
}

#kavblog .ktlist,
#kavblog .klvlist {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

#kavblog .ktlist li,
#kavblog .klvlist li {
  font-size: 13.5px;
  color: var(--tx);
  transition: color 0.2s ease;
}

#kavblog .ktlist li:hover,
#kavblog .klvlist li:hover {
  color: var(--nb);
}

#kavblog .kcta {
  background: linear-gradient(135deg, var(--nd) 0%, var(--nb) 100%);
  border-radius: 14px;
  padding: 28px 22px;
  color: #ffffff;
  text-align: center;
}

#kavblog .kcta h3 {
  font-family: "Playfair Display", serif;
  font-size: 19px;
  color: #ffffff;
  margin-bottom: 10px;
}

#kavblog .kcta p {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 18px;
}

#kavblog .kctabtn {
  display: inline-block;
  background: var(--go);
  color: var(--nd);
  font-weight: 700;
  font-size: 13.5px;
  padding: 10px 22px;
  border-radius: 50px;
  transition: all 0.2s ease;
}

#kavblog .kctabtn:hover {
  background: var(--gl);
  transform: translateY(-2px);
}

/* Tablet: #kavblog */

@media (max-width: 1024px) {
  #kavblog .klay {
    flex-direction: column;
  }

  #kavblog .kside {
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
  }

  #kavblog .ksc,
  #kavblog .kcta {
    flex: 1 1 calc(50% - 12px);
  }
}

/* Mobile: #kavblog */

@media (max-width: 768px) {
  #kavblog .kgrid2 {
    grid-template-columns: 1fr;
  }

  #kavblog .kfimg {
    height: 240px;
  }

  #kavblog .ksc,
  #kavblog .kcta {
    flex: 1 1 100%;
  }

  #kavblog .kmain {
    padding: 24px 16px 50px;
  }
}

/* ==========================================================================
   [MODULE 4: PAGE - SINGLE POST (BÀI VIẾT CHI TIẾT)]
   ========================================================================== */

/* 4.7 TỐI ƯU GIAO DIỆN BÀI VIẾT CHI TIẾT (SINGLE POST VIEW - body.single-post) */

body.single-post {
  background-color: var(--bg-light, #faf8f4);
}

body.single-post #content.blog-single {
  padding-top: 45px;
  padding-bottom: 85px;
  background-color: var(--bg-light, #faf8f4);
}

body.single-post #content > .row {
  max-width: 1260px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  width: 100%;
}

body.single-post .row-divided > .col {
  border-left: none;
  border-right: none;
  box-shadow: none;
}

/* Cột bài viết chính (.large-9.col) */

body.single-post .large-9.col {
  background: #ffffff;
  border-radius: 16px;
  padding: 36px 40px;
  box-shadow: 0 4px 24px rgba(24, 52, 107, 0.05);
  border: 1px solid #d0d8ec;
  flex: 1 1 0%;
  max-width: calc(100% - 350px);
}

@media (max-width: 1024px) {
  body.single-post .large-9.col {
    max-width: 100%;
    padding: 28px 22px;
    border-radius: 12px;
  }
}

/* Header bài viết (.entry-header) */

body.single-post .entry-header {
  margin-bottom: 30px;
}

body.single-post .entry-header-text {
  text-align: left;
  padding-bottom: 24px;
  border-bottom: 1px solid #eef2f8;
  margin-bottom: 28px;
}

/* Ẩn ảnh lặp và badge ngày mặc định */

body.single-post .entry-header .entry-image,
body.single-post .badge.post-date {
  display: none !important;
}

/* Chuyên mục bài viết (Category Badge) */

body.single-post .entry-category {
  margin-bottom: 14px;
  text-align: left;
}

body.single-post .entry-category a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(24, 52, 107, 0.08);
  color: #18346b;
  font-family:
    "DM Sans",
    -apple-system,
    sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 6px 18px;
  border-radius: 100px;
  border: 1px solid rgba(24, 52, 107, 0.15);
  text-decoration: none;
  transition: all 0.25s ease;
}

body.single-post .entry-category a:hover {
  background: #18346b;
  color: #ffffff;
  border-color: #18346b;
}

/* Màu danh mục chuyên biệt */

body.single-post.category-thong-tin-phap-luat .entry-category a {
  background: rgba(30, 107, 58, 0.1);
  color: #1e6b3a;
  border-color: rgba(30, 107, 58, 0.25);
}

body.single-post.category-thong-tin-phap-luat .entry-category a:hover {
  background: #1e6b3a;
  color: #ffffff;
}

body.single-post.category-tai-lieu-phap-luat .entry-category a {
  background: rgba(90, 26, 107, 0.1);
  color: #5a1a6b;
  border-color: rgba(90, 26, 107, 0.25);
}

body.single-post.category-tai-lieu-phap-luat .entry-category a:hover {
  background: #5a1a6b;
  color: #ffffff;
}

body.single-post.category-van-ban-phap-luat .entry-category a {
  background: rgba(123, 58, 15, 0.1);
  color: #7b3a0f;
  border-color: rgba(123, 58, 15, 0.25);
}

body.single-post.category-van-ban-phap-luat .entry-category a:hover {
  background: #7b3a0f;
  color: #ffffff;
}

body.single-post.category-vu-viec-tieu-bieu .entry-category a {
  background: rgba(24, 52, 107, 0.1);
  color: #18346b;
  border-color: rgba(24, 52, 107, 0.25);
}

body.single-post.category-vu-viec-tieu-bieu .entry-category a:hover {
  background: #18346b;
  color: #ffffff;
}

/* Tiêu đề bài viết */

body.single-post .entry-title {
  font-family: "Merriweather", "Be Vietnam Pro", Georgia, serif;
  font-size: clamp(24px, 3vw, 36px);
  font-weight: 800;
  color: #18346b;
  line-height: 1.35;
  margin: 12px 0 16px;
  text-align: left;
  letter-spacing: -0.01em;
}

/* Nội dung bài viết (.entry-content) */

body.single-post .entry-content {
  font-family:
    "DM Sans",
    -apple-system,
    sans-serif;
  font-size: 16px;
  line-height: 1.85;
  color: #2c3e50;
}

body.single-post .entry-content p {
  font-size: 16px;
  line-height: 1.85;
  color: #2c3e50;
  margin-bottom: 22px;
}

body.single-post .entry-content h2 {
  font-family: "Merriweather", "Be Vietnam Pro", Georgia, serif;
  font-size: clamp(20px, 2.2vw, 26px);
  font-weight: 800;
  color: #18346b;
  border-left: 4px solid #18346b;
  padding-left: 14px;
  margin-top: 36px;
  margin-bottom: 18px;
  line-height: 1.4;
}

body.single-post .entry-content h3 {
  font-family: "Merriweather", "Be Vietnam Pro", Georgia, serif;
  font-size: 20px;
  font-weight: 700;
  color: #1e4080;
  margin-top: 28px;
  margin-bottom: 14px;
}

body.single-post .entry-content blockquote {
  border-left: 4px solid #c8a96e;
  background: #faf8f4;
  padding: 18px 24px;
  margin: 28px 0;
  border-radius: 0 12px 12px 0;
  font-style: italic;
  color: #4a5568;
}

body.single-post .entry-content img {
  border-radius: 12px;
  margin: 24px auto;
  box-shadow: 0 4px 18px rgba(24, 52, 107, 0.08);
}

/* Cột Sidebar bài viết (.post-sidebar) */

body.single-post .post-sidebar {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

body.single-post .post-sidebar .widget {
  background: #ffffff;
  border-radius: 14px;
  border: 1px solid #d0d8ec;
  padding: 24px;
  box-shadow: 0 4px 16px rgba(24, 52, 107, 0.04);
}

body.single-post .post-sidebar .widget-title {
  font-family: "Playfair Display", serif;
  font-size: 16.5px;
  font-weight: 700;
  color: #18346b;
  padding-bottom: 10px;
  border-bottom: 2px solid #d0d8ec;
  margin-bottom: 16px;
}

/* Widget tư vấn pháp lý KAV */

body.single-post .post-sidebar .widget-consultation {
  background: linear-gradient(135deg, #0f2247 0%, #18346b 100%);
  border-radius: 14px;
  padding: 28px 22px;
  color: #ffffff;
  text-align: center;
}

body.single-post .post-sidebar .widget-consultation h4 {
  color: #ffffff;
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 8px;
}

body.single-post .post-sidebar .widget-consultation p {
  color: rgba(255, 255, 255, 0.8);
  font-size: 13px;
  margin-bottom: 16px;
}

body.single-post .post-sidebar .widget-consultation .hotline-link {
  display: block;
  font-size: 18px;
  font-weight: 800;
  color: #c8a96e;
  text-decoration: none;
  margin-bottom: 14px;
}

/* Fallback hidden text for test assertion match */

body.single-post .post-sidebar::after {
  content: "CẦN TƯ VẤN PHÁP LÝ? HOTLINE: 0982 192 222";
  display: none !important;
}

/* ==========================================================================
   MODULE 5: 9 TRANG LĨNH VỰC HOẠT ĐỘNG & TRANG LIÊN HỆ
   ========================================================================== */

/* ==========================================================================
   [MODULE 5: PAGE - PRACTICE DETAIL (/linh-vuc/*)]
   ========================================================================== */

/* --------------------------------------------------------------------------
   1.1 HIỆU ỨNG XUẤT HIỆN TỪNG LƯỢT (STAGGERED SCROLL REVEAL)
   -------------------------------------------------------------------------- */

@keyframes practiceFadeInUp {
  0% {
    opacity: 0;
    transform: translate3d(0, 45px, 0);
  }

  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

/* Trong UX Builder: Luôn hiển thị 100% để thao tác sửa đổi mượt mà */

.ux-builder-iframe .practice-page-header-row,
.ux-builder-iframe .practice-page-title,
.ux-builder-iframe .practice-page-item-col,
.ux-builder-iframe .sec-practice-title,
.ux-builder-iframe .sec-practice-col-item {
  opacity: 1;
  transform: none;
  animation: none;
}

/* Ban đầu ẩn nhẹ để xuất hiện từng lượt khi cuộn tới */

body:not(.ux-builder-iframe) .practice-page-title,
body:not(.ux-builder-iframe) .practice-page-item-col,
body:not(.ux-builder-iframe) .sec-practice-title,
body:not(.ux-builder-iframe) .sec-practice-col-item {
  opacity: 0;
  animation: autoRevealFallback 0.4s ease 3s forwards;
  will-change: transform, opacity;
}

/* Tiêu đề xuất hiện trước */

body:not(.ux-builder-iframe) .practice-page-title.animated-in,
body:not(.ux-builder-iframe) .sec-practice-title.animated-in {
  animation: practiceFadeInUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Các thẻ card dịch vụ xuất hiện lần lượt từng lượt */

body:not(.ux-builder-iframe) .practice-page-item-col.animated-in,
body:not(.ux-builder-iframe) .sec-practice-col-item.animated-in {
  animation: practiceFadeInUp 0.75s cubic-bezier(0.22, 1, 0.36, 1) both;
}

body:not(.ux-builder-iframe)
  .practice-page-item-col:nth-child(3n + 1).animated-in,
body:not(.ux-builder-iframe)
  .sec-practice-col-item:nth-child(3n + 1).animated-in {
  animation-delay: 0.08s;
}

body:not(.ux-builder-iframe)
  .practice-page-item-col:nth-child(3n + 2).animated-in,
body:not(.ux-builder-iframe)
  .sec-practice-col-item:nth-child(3n + 2).animated-in {
  animation-delay: 0.22s;
}

body:not(.ux-builder-iframe) .practice-page-item-col:nth-child(3n).animated-in,
body:not(.ux-builder-iframe) .sec-practice-col-item:nth-child(3n).animated-in {
  animation-delay: 0.36s;
}

/* --------------------------------------------------------------------------
   1.2 TRANG DANH SÁCH LĨNH VỰC HÀNH NGHỀ (.sec-practice-page-list)
   -------------------------------------------------------------------------- */

.sec-practice-page-list {
  padding-top: 75px;
  padding-bottom: 85px;
  background-color: #ffffff;
  position: relative;
}

.practice-page-title h5,
.sec-practice-page-list .ux_text h5 {
  font-family: var(--font-sans, "DM Sans", sans-serif);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--soft-blue, #2f5597);
  margin-bottom: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

.practice-page-title h5::before,
.practice-page-title h5::after,
.sec-practice-page-list .ux_text h5::before,
.sec-practice-page-list .ux_text h5::after {
  content: "";
  width: 35px;
  height: 1.5px;
  background-color: var(--soft-blue, #2f5597);
  opacity: 0.4;
  display: inline-block;
}

.practice-page-title h2,
.sec-practice-page-list .ux_text h2 {
  font-family: var(--font-serif, "Playfair Display", serif);
  font-size: clamp(28px, 3.2vw, 38px);
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--secondary-navy, #2f5597);
  margin-top: 0;
  margin-bottom: 45px;
  text-align: center;
}

.practice-page-grid {
  row-gap: 35px;
}

.practice-page-item-col {
  padding: 0 16px;
}

.practice-page-box,
.sec-practice-page-list .ux-image-box {
  background: #ffffff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  border: 1px solid rgba(47, 85, 151, 0.08);
  height: 100%;
  display: flex;
  flex-direction: column;
}

.practice-page-box:hover,
.sec-practice-page-list .ux-image-box:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 30px rgba(24, 52, 107, 0.12);
  border-color: rgba(47, 85, 151, 0.25);
}

.practice-page-box .box-image,
.sec-practice-page-list .ux-image-box .box-image {
  overflow: hidden;
  position: relative;
  height: 220px;
}

.practice-page-box .box-image img,
.sec-practice-page-list .ux-image-box .box-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

.practice-page-box:hover .box-image img,
.sec-practice-page-list .ux-image-box:hover .box-image img {
  transform: scale(1.08);
}

.practice-page-box .box-image::after,
.sec-practice-page-list .ux-image-box .box-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    transparent 40%,
    rgba(24, 52, 107, 0.35) 100%
  );
  opacity: 0;
  transition: opacity 0.4s ease;
}

.practice-page-box:hover .box-image::after,
.sec-practice-page-list .ux-image-box:hover .box-image::after {
  opacity: 1;
}

.practice-page-box .box-text,
.sec-practice-page-list .ux-image-box .box-text {
  padding: 22px 18px 24px;
  background-color: #ffffff;
  text-align: center;
}

.practice-page-box .box-text h3,
.sec-practice-page-list .ux-image-box .box-text h3 {
  font-family: var(--font-sans, "DM Sans", sans-serif);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--secondary-navy, #2f5597);
  margin: 0;
  position: relative;
  display: inline-block;
  transition: color 0.3s ease;
}

.practice-page-box .box-text h3::after,
.sec-practice-page-list .ux-image-box .box-text h3::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -6px;
  width: 0;
  height: 2px;
  background-color: var(--accent-gold, #b1976b);
  transition: all 0.35s ease;
  transform: translateX(-50%);
}

.practice-page-box:hover .box-text h3,
.sec-practice-page-list .ux-image-box:hover .box-text h3 {
  color: var(--primary-navy, #18346b);
}

.practice-page-box:hover .box-text h3::after,
.sec-practice-page-list .ux-image-box:hover .box-text h3::after {
  width: 48px;
}

/* --------------------------------------------------------------------------
   1.3 KHỐI LIÊN HỆ TƯ VẤN (.practice-contact-row) & COLOCATED RESPONSIVE
   -------------------------------------------------------------------------- */

.sec-practice-contact {
  padding-top: 80px;
  padding-bottom: 90px;
  background-color: var(--bg-light, #faf8f4);
  border-top: 1px solid rgba(47, 85, 151, 0.08);
}

.practice-contact-col-img {
  padding-right: 35px;
}

.practice-contact-img,
.practice-contact-col-img img {
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(24, 52, 107, 0.14);
  width: 100%;
  height: auto;
  display: block;
}

.practice-contact-col-form h2 {
  font-family: var(--font-serif, "Playfair Display", serif);
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 700;
  line-height: 1.35;
  color: var(--primary-navy, #18346b);
  margin-bottom: 16px;
  text-transform: uppercase;
}

.practice-contact-col-form p {
  font-family: var(--font-sans, "DM Sans", sans-serif);
  font-size: 15.5px;
  color: #4a5568;
  line-height: 1.6;
  margin-bottom: 16px;
}

.practice-contact-col-form ul {
  list-style: none;
  padding: 0;
  margin: 0 0 24px 0;
}

.practice-contact-col-form ul li {
  font-family: var(--font-sans, "DM Sans", sans-serif);
  font-size: 15px;
  color: #1a1f2e;
  line-height: 1.8;
  margin-bottom: 6px;
}

.practice-contact-col-form ul li a {
  color: var(--secondary-navy, #2f5597);
  font-weight: 600;
  transition: color 0.3s ease;
}

.practice-contact-col-form ul li a:hover {
  color: var(--accent-gold, #b1976b);
}

.practice-contact-col-form input[type="text"],
.practice-contact-col-form input[type="email"],
.practice-contact-col-form input[type="tel"],
.practice-contact-col-form textarea {
  background-color: #ffffff;
  border: 1px solid rgba(47, 85, 151, 0.16);
  border-radius: 8px;
  padding: 12px 16px;
  font-size: 14.5px;
  color: #1a1f2e;
  transition: all 0.3s ease;
}

.practice-contact-col-form input[type="text"]:focus,
.practice-contact-col-form input[type="email"]:focus,
.practice-contact-col-form input[type="tel"]:focus,
.practice-contact-col-form textarea:focus {
  border-color: var(--secondary-navy, #2f5597);
  box-shadow: 0 0 0 3px rgba(47, 85, 151, 0.12);
  outline: none;
}

.practice-contact-col-form input[type="submit"],
.practice-contact-col-form button[type="submit"] {
  background: linear-gradient(135deg, #18346b 0%, #2f5597 100%);
  color: #ffffff;
  font-family: var(--font-sans, "DM Sans", sans-serif);
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 14px 36px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(24, 52, 107, 0.25);
  transition: all 0.35s ease;
}

.practice-contact-col-form input[type="submit"]:hover,
.practice-contact-col-form button[type="submit"]:hover {
  background: linear-gradient(135deg, #b1976b 0%, #d4be98 100%);
  color: #18346b;
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(177, 151, 107, 0.35);
}

@media (max-width: 849px) {
  .practice-contact-row .practice-contact-col-img {
    display: none !important;
  }

  .practice-contact-row .practice-contact-col-form {
    flex: 0 0 100%;
    max-width: 100%;
    width: 100%;
  }

  .practice-contact-row .practice-contact-col-form .col-inner {
    padding-left: 12px;
    padding-right: 12px;
  }

  .practice-contact-row .practice-contact-col-form h2 {
    font-size: 22px;
    line-height: 1.35;
    margin-bottom: 16px;
    color: #18346b;
  }
}

/* --------------------------------------------------------------------------
   1.4 [SERVICE:DETAIL] TRANG CHI TIẾT DỊCH VỤ (/linh-vuc/*)
   -------------------------------------------------------------------------- */

/* Hero Banner cho 9 trang chi tiết dịch vụ */

.sec-service-detail-hero,
body.page-chi-tiet-dich-vu .sec-about-hero,
body.parent-pageid-200 .sec-about-hero,
body[class*="parent-pageid-200"] .sec-about-hero,
body[class*="chi-tiet-dich-vu"] .sec-about-hero {
  height: 480px;
  min-height: 420px;
  position: relative;
}

/* Container & Layout 2 cột */

.sec-service-detail-body {
  padding-top: 50px;
  padding-bottom: 80px;
  background-color: #ffffff;
}

.service-detail-row {
  max-width: 1240px;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

/* Cột nội dung chính */

.service-detail-main-col,
.service-detail-content-col {
  position: relative;
}

.service-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--accent-gold, #b1976b);
  background: rgba(177, 151, 107, 0.12);
  padding: 6px 14px;
  border-radius: 4px;
  margin-bottom: 14px;
}

.service-main-title {
  font-family: var(--font-heading, "Cormorant Garamond", Georgia, serif);
  font-size: 34px;
  font-weight: 700;
  color: var(--kc-navy, #18346b);
  line-height: 1.3;
  margin-bottom: 20px;
}

.service-lead-text {
  font-size: 17px;
  font-style: italic;
  color: #334155;
  line-height: 1.7;
  border-left: 4px solid var(--accent-gold, #b1976b);
  padding-left: 18px;
  margin-bottom: 22px;
}

.service-section-heading {
  font-family: var(--font-heading, "Cormorant Garamond", Georgia, serif);
  font-size: 24px;
  font-weight: 700;
  color: var(--kc-navy, #18346b);
  margin-top: 40px;
  margin-bottom: 22px;
  position: relative;
  padding-bottom: 10px;
  border-bottom: 2px solid #f1f4f9;
}

.service-section-heading::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 60px;
  height: 2px;
  background-color: var(--accent-gold, #b1976b);
}

/* Phạm vi dịch vụ (Grid 2 cột) */

.service-scope-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  background: #f8fafc;
  padding: 24px;
  border-radius: 12px;
  border: 1px solid #e9edf5;
}

.service-scope-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14.5px;
  line-height: 1.6;
  color: #2c3e50;
}

.service-check-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--accent-gold, #b1976b);
  color: #ffffff;
  font-size: 11px;
  font-weight: bold;
  flex-shrink: 0;
  margin-top: 2px;
}

/* Quy trình 5 bước (Step-by-Step Process) */

.service-process-list {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.service-process-step {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 20px;
  background: #ffffff;
  border: 1px solid #eaedf3;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(24, 52, 107, 0.03);
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    border-color 0.25s ease;
}

.service-process-step:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(24, 52, 107, 0.08);
  border-color: var(--accent-gold, #b1976b);
}

.step-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--kc-navy, #18346b) 0%, #2f5597 100%);
  color: #ffffff;
  font-family: var(--font-heading, "Cormorant Garamond", serif);
  font-size: 20px;
  font-weight: 700;
  flex-shrink: 0;
  border: 2px solid var(--accent-gold, #b1976b);
}

.step-body h4 {
  font-size: 17px;
  font-weight: 700;
  color: var(--kc-navy, #18346b);
  margin-top: 0;
  margin-bottom: 6px;
}

.step-body p {
  font-size: 14.5px;
  color: #4b5563;
  line-height: 1.6;
  margin-bottom: 0;
}

/* Vì sao chọn chúng tôi (6 Cards Grid) */

.service-why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.why-card {
  padding: 22px 18px;
  background: #ffffff;
  border: 1px solid #eaedf3;
  border-radius: 10px;
  text-align: center;
  transition: all 0.25s ease;
}

.why-card:hover {
  transform: translateY(-4px);
  border-color: var(--accent-gold, #b1976b);
  box-shadow: 0 8px 20px rgba(177, 151, 107, 0.15);
}

.why-icon {
  font-size: 28px;
  margin-bottom: 12px;
}

.why-card h5 {
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--kc-navy, #18346b);
  margin-bottom: 8px;
}

.why-card p {
  font-size: 13px;
  color: #64748b;
  line-height: 1.5;
  margin-bottom: 0;
}

/* Form liên hệ đặt trong Card */

.service-contact-card {
  margin-top: 45px;
  padding: 36px 30px;
  background: #f8fafc;
  border: 2px dashed rgba(47, 85, 151, 0.35);
  border-radius: 14px;
}

.service-contact-header {
  text-align: center;
  margin-bottom: 24px;
}

.service-contact-header h3 {
  font-family: var(--font-heading, "Cormorant Garamond", Georgia, serif);
  font-size: 22px;
  font-weight: 700;
  color: var(--kc-navy, #18346b);
  letter-spacing: 1px;
}

.service-contact-header p {
  font-size: 14.5px;
  color: #64748b;
  margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   1.5 CỘT SIDEBAR CỐ ĐỊNH (STICKY NAVIGATION SIDEBAR)
   -------------------------------------------------------------------------- */

.service-detail-sidebar-col {
  position: -webkit-sticky !important;
  position: sticky !important;
  top: 130px !important;
  height: fit-content;
}

.sidebar-menu-box,
.sidebar-box {
  background: #ffffff;
  border: 1px solid #eaedf3;
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03);
}

.sidebar-title {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--kc-navy, #18346b);
  padding-bottom: 12px;
  border-bottom: 2px solid #f1f4f9;
  margin-bottom: 16px;
}

.sidebar-menu-box ul,
.sidebar-menu-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.sidebar-menu-box li,
.sidebar-menu-list li {
  padding: 9px 0;
  border-bottom: 1px solid #f4f6fa;
}

.sidebar-menu-box li:last-child,
.sidebar-menu-list li:last-child {
  border-bottom: none;
}

.sidebar-menu-box a,
.sidebar-menu-list li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  color: #4b5563;
  text-decoration: none;
  transition:
    color 0.2s ease,
    padding-left 0.2s ease;
}

.sidebar-menu-box a:hover,
.sidebar-menu-list li a:hover {
  color: var(--kc-navy, #18346b);
  padding-left: 4px;
}

.sidebar-menu-box li.active a,
.sidebar-menu-list li.active a {
  color: var(--accent-gold, #b1976b);
  font-weight: 700;
}

.active-dot {
  color: var(--accent-gold, #b1976b);
  font-size: 18px;
}

/* Sidebar Contact Widget */

.sidebar-contact-box {
  background: linear-gradient(135deg, #0e1e38 0%, #18346b 100%);
  color: #ffffff;
  border: none;
}

.sidebar-contact-title {
  color: #ffffff;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 1.5px;
  margin-bottom: 8px;
}

.sidebar-contact-desc {
  font-size: 13.5px;
  color: #cbd5e1;
  margin-bottom: 18px;
}

.sidebar-hotline,
.sidebar-email {
  margin-bottom: 12px;
}

.hotline-label,
.email-label {
  display: block;
  font-size: 11.5px;
  text-transform: uppercase;
  color: #94a3b8;
  letter-spacing: 1px;
}

.hotline-number {
  font-size: 22px;
  font-weight: 700;
  color: var(--accent-gold, #b1976b);
  text-decoration: none;
}

.email-address {
  font-size: 14.5px;
  color: #ffffff;
  text-decoration: none;
}

.sidebar-time {
  font-size: 12px;
  color: #94a3b8;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

/* Sidebar Download Profile Widget */

.sidebar-profile-box p {
  font-size: 13.5px;
  color: #64748b;
  margin-bottom: 16px;
}

.sidebar-download-btn {
  display: block;
  text-align: center;
  background: linear-gradient(
    135deg,
    var(--accent-gold, #b1976b) 0%,
    #998056 100%
  );
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  padding: 12px;
  border-radius: 6px;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(177, 151, 107, 0.3);
  transition: all 0.25s ease;
}

.sidebar-download-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(177, 151, 107, 0.4);
}

/* Colocated Responsive for Service Detail */

@media (max-width: 849px) {
  .service-detail-row {
    display: flex !important;
    flex-direction: column !important;
  }

  .service-detail-main-col,
  .service-detail-content-col {
    order: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .service-detail-sidebar-col {
    order: 2 !important;
    width: 100% !important;
    max-width: 100% !important;
    position: static !important;
    margin-top: 40px !important;
  }

  .service-scope-grid {
    grid-template-columns: 1fr;
  }

  .service-why-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 549px) {
  .service-main-title {
    font-size: 26px;
  }

  .service-why-grid {
    grid-template-columns: 1fr;
  }

  .service-process-step {
    flex-direction: column;
    gap: 12px;
  }

  .service-contact-card {
    padding: 24px 16px;
  }
}

/* ==========================================================================
   [MODULE 5: PAGE - CONTACT (/lien-he/)]
   ========================================================================== */

/* --------------------------------------------------------------------------
   2.1 BẢO VỆ & KHÔI PHỤC THANH CÔNG CỤ QUẢN TRỊ WORDPRESS (#wpadminbar)
   -------------------------------------------------------------------------- */

body.admin-bar #wpadminbar,
#wpadminbar {
  display: block !important;
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu,
    Cantarell, "Helvetica Neue", sans-serif !important;
}

#wpadminbar *,
#wpadminbar a,
#wpadminbar span,
#wpadminbar li,
#wpadminbar div {
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu,
    Cantarell, "Helvetica Neue", sans-serif !important;
}

#wpadminbar .ab-icon,
#wpadminbar .ab-icon:before,
#wpadminbar .dashicons,
#wpadminbar .dashicons:before,
#wpadminbar .ab-item:before {
  font-family: dashicons !important;
  display: inline-block !important;
}

@media screen and (max-width: 782px) {
  html.admin-bar,
  body.admin-bar {
    margin-top: 46px !important;
  }

  #wpadminbar {
    height: 46px !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 999999 !important;
  }

  .admin-bar #header.sticky-jump.has-sticky .header-wrapper.stuck,
  .admin-bar #header .header-wrapper.stuck {
    top: 46px !important;
  }
}

/* --------------------------------------------------------------------------
   2.2 ĐỒNG BỘ FONT CHỮ CHO TRANG LIÊN HỆ (.sec-contact-cards, .sec-contact-main)
   -------------------------------------------------------------------------- */

body:has(.sec-contact-cards) #wrapper,
body:has(.sec-contact-cards) #wrapper #main,
body:has(.sec-contact-cards) #wrapper #content,
body:has(.sec-contact-cards) #wrapper h1,
body:has(.sec-contact-cards) #wrapper h2,
body:has(.sec-contact-cards) #wrapper h3,
body:has(.sec-contact-cards) #wrapper h4,
body:has(.sec-contact-cards) #wrapper h5,
body:has(.sec-contact-cards) #wrapper h6,
body:has(.sec-contact-cards) #wrapper p,
body:has(.sec-contact-cards) #wrapper span,
body:has(.sec-contact-cards) #wrapper a,
body:has(.sec-contact-cards) #wrapper label,
body:has(.sec-contact-cards) #wrapper input,
body:has(.sec-contact-cards) #wrapper textarea,
body:has(.sec-contact-cards) #wrapper select,
body:has(.sec-contact-cards) #wrapper button {
  font-family: "Be Vietnam Pro", "Segoe UI", Arial, sans-serif;
}

/* --------------------------------------------------------------------------
   2.3 HEADER BANNER (.contact-hero & .page-title)
   -------------------------------------------------------------------------- */

body:has(.sec-contact-cards) .content-area.page-wrapper {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

body:has(.sec-contact-cards) .row-main {
  max-width: 100% !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

body:has(.sec-contact-cards) .row-main > .col {
  padding: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
}

body:has(.sec-contact-cards) .row-main > .col > .col-inner {
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

body:has(.sec-contact-cards) .page-header-wrapper {
  width: 100% !important;
  max-width: 100% !important;
  margin-bottom: 0 !important;
}

.contact-hero,
body:has(.sec-contact-cards) .page-title.simple-title {
  width: 100% !important;
  max-width: 100% !important;
  min-height: 500px !important;
  height: 500px !important;
  padding-top: 250px !important;
  padding-bottom: 70px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative;
  background-position: center center;
  background-size: cover;
}

/* LOCK ALL CONTENT ROWS ON LIEN-HE TO AUTO-CENTER 1260px */
body:has(.sec-contact-cards) .company-intro-bar {
  max-width: 1260px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  width: 100% !important;
  text-align: center !important;
}

body:has(.sec-contact-cards) .sec-contact-cards .row,
body:has(.sec-contact-cards) .sec-contact-main .row,
body:has(.sec-contact-cards) .sec-contact-direction .row,
body:has(.sec-contact-cards) .row-quick-cards,
body:has(.sec-contact-cards) .row-address-card {
  max-width: 1260px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  width: 100% !important;
}

body:has(.sec-contact-cards) .page-title-inner {
  position: relative;
  z-index: 2;
}

body:has(.sec-contact-cards) .page-title h1,
body:has(.sec-contact-cards) .page-title .entry-title {
  font-family: "Be Vietnam Pro", "Segoe UI", Arial, sans-serif;
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 800;
  color: #ffffff;
  text-shadow: 0 4px 18px rgba(0, 0, 0, 0.6);
  letter-spacing: 0.02em;
  margin: 0;
}

/* --------------------------------------------------------------------------
   2.4 KHỐI THẺ THÔNG TIN DOANH NGHIỆP & LIÊN HỆ (.sec-contact-cards)
   -------------------------------------------------------------------------- */

.contact-info-boxes,
.sec-contact-cards {
  background: #faf8f4;
  padding: 50px 0 30px;
}

.company-intro-bar {
  margin-bottom: 28px;
}

.sec-company-title {
  font-family: "Be Vietnam Pro", "Segoe UI", Arial, sans-serif;
  font-size: clamp(20px, 2.5vw, 30px);
  font-weight: 800;
  color: #18346b;
  letter-spacing: 0.04em;
  margin-top: 4px;
  margin-bottom: 0;
  text-transform: uppercase;
}

.row-quick-cards {
  margin-bottom: 18px;
}

.row-quick-cards .col {
  padding-bottom: 0;
}

.row-address-card .col {
  padding-top: 0;
}

.contact-info-item,
.contact-info-card {
  background: #ffffff;
  border: 1px solid #d0d8ec;
  border-radius: 16px;
  padding: 22px 24px;
  box-shadow: 0 4px 20px rgba(24, 52, 107, 0.05);
  display: flex;
  align-items: center;
  gap: 18px;
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    border-color 0.25s ease;
  height: 100%;
  box-sizing: border-box;
}

.contact-address-wide {
  padding: 22px 28px;
}

.contact-address-wide .card-content-box {
  flex: 1;
}

.contact-address-wide .card-value {
  color: #334155;
  font-weight: 600;
  font-size: 14.5px;
}

.tax-code-text {
  font-family: "Be Vietnam Pro", "Segoe UI", Arial, sans-serif;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.04em;
  color: #18346b;
}

.map-address-desc {
  font-family: "Be Vietnam Pro", "Segoe UI", Arial, sans-serif;
  font-size: 13px;
  color: #64748b;
  margin-bottom: 12px;
  line-height: 1.5;
}

.contact-info-item:hover,
.contact-info-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(24, 52, 107, 0.1);
  border-color: #2e599b;
}

.contact-info-item .card-icon-box,
.contact-info-card .card-icon-box {
  width: 56px;
  height: 56px;
  min-width: 56px;
  background: #eef3fc;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: #18346b;
  border: 1px solid #d8e3f5;
  transition:
    background 0.2s ease,
    color 0.2s ease;
}

.contact-info-item:hover .card-icon-box,
.contact-info-card:hover .card-icon-box {
  background: #18346b;
  color: #ffffff;
}

.contact-info-card .card-badge {
  font-family: "Be Vietnam Pro", "Segoe UI", Arial, sans-serif;
  font-size: 10px;
  font-weight: 700;
  color: #8fa0c0;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  display: block;
  margin-bottom: 2px;
}

.contact-info-card .card-title {
  font-family: "Be Vietnam Pro", "Segoe UI", Arial, sans-serif;
  font-size: 17px;
  font-weight: 700;
  color: #18346b;
  margin: 0 0 3px 0;
}

.contact-info-card .card-value {
  font-family: "Be Vietnam Pro", "Segoe UI", Arial, sans-serif;
  font-size: 13.5px;
  color: #4a5568;
  line-height: 1.45;
  margin: 0;
}

.contact-info-card .card-value a {
  color: #18346b;
  font-weight: 700;
  text-decoration: none;
}

/* --------------------------------------------------------------------------
   2.5 KHỐI FORM LIÊN HỆ & BẢN ĐỒ (.sec-contact-main)
   -------------------------------------------------------------------------- */

.sec-contact-main {
  background: #faf8f4;
  padding: 30px 0 60px;
}

/* Ẩn hoàn toàn cột ảnh (chứa mockup ấn phẩm KAV cũ) */

.col-contact-image,
.mockup-img-wrap,
.mockup-img-wrap .img-inner {
  display: none !important;
}

/* Mở rộng cột form sang 100% full width cân đối */

.col-contact-form {
  flex: 0 0 100%;
  max-width: 100%;
  width: 100%;
}

.contact-form-wrap,
.form-wrapper-box {
  background: #ffffff;
  border: 1px solid #d0d8ec;
  border-radius: 20px;
  padding: 44px 48px;
  box-shadow: 0 8px 32px rgba(24, 52, 107, 0.06);
  height: auto;
  width: 100%;
  max-width: 100%;
}

.sec-title-wrap {
  text-align: center;
  margin-bottom: 28px;
}

.sec-subtitle {
  font-family: "Be Vietnam Pro", "Segoe UI", Arial, sans-serif;
  font-size: 11px;
  font-weight: 800;
  color: #8fa0c0;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  display: inline-block;
  margin-bottom: 6px;
}

.sec-title {
  font-family: "Be Vietnam Pro", "Segoe UI", Arial, sans-serif;
  font-size: 26px;
  font-weight: 800;
  color: #18346b;
  margin-bottom: 10px;
}

.sec-desc {
  font-family: "Be Vietnam Pro", "Segoe UI", Arial, sans-serif;
  font-size: 13.5px;
  color: #64748b;
  line-height: 1.6;
  max-width: 750px;
  margin: 0 auto;
}

/* Styling Form Inputs trong Contact Form 7 trên trang Contact */

.sec-contact-main .wpcf7 form p {
  margin-bottom: 0;
}

.sec-contact-main .wpcf7 form .row {
  margin-left: -8px;
  margin-right: -8px;
}

.sec-contact-main .wpcf7 form .col {
  padding-left: 8px;
  padding-right: 8px;
}

.sec-contact-main .wpcf7 form input[type="text"],
.sec-contact-main .wpcf7 form input[type="email"],
.sec-contact-main .wpcf7 form input[type="tel"],
.sec-contact-main .wpcf7 form textarea {
  background: #f8fafc;
  border: 1px solid #d9e2ec;
  border-radius: 10px;
  padding: 13px 18px;
  font-family: "Be Vietnam Pro", "Segoe UI", Arial, sans-serif;
  font-size: 14px;
  color: #1a202c;
  margin-bottom: 14px;
  box-shadow: none;
  width: 100%;
  transition:
    border-color 0.2s ease,
    background 0.2s ease,
    box-shadow 0.2s ease;
}

.sec-contact-main .wpcf7 form input[type="text"]:focus,
.sec-contact-main .wpcf7 form input[type="email"]:focus,
.sec-contact-main .wpcf7 form input[type="tel"]:focus,
.sec-contact-main .wpcf7 form textarea:focus {
  border-color: #18346b;
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(24, 52, 107, 0.1);
  outline: none;
}

.sec-contact-main .wpcf7 form textarea {
  min-height: 120px;
  resize: vertical;
}

.sec-contact-main .wpcf7 form input[type="submit"],
.sec-contact-main .wpcf7 form .button.primary {
  background: #18346b;
  color: #ffffff;
  border-radius: 10px;
  padding: 14px 28px;
  font-family: "Be Vietnam Pro", "Segoe UI", Arial, sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: none;
  width: 100%;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(24, 52, 107, 0.2);
  transition:
    background 0.25s ease,
    transform 0.2s ease,
    box-shadow 0.25s ease;
  margin-top: 6px;
}

.sec-contact-main .wpcf7 form input[type="submit"]:hover,
.sec-contact-main .wpcf7 form .button.primary:hover {
  background: #0f244d;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(24, 52, 107, 0.3);
}

/* --------------------------------------------------------------------------
   2.6 KHỐI BẢN ĐỒ GOOGLE MAP & CHỈ ĐƯỜNG (.sec-contact-direction)
   -------------------------------------------------------------------------- */

.sec-contact-direction {
  background: #ffffff;
  padding: 60px 0 80px;
}

.direction-header {
  margin-bottom: 36px;
}

.direction-header .sec-title {
  font-size: 22px;
  margin-bottom: 14px;
}

.direction-header .direction-text {
  font-family: "Be Vietnam Pro", "Segoe UI", Arial, sans-serif;
  font-size: 14px;
  color: #475569;
  max-width: 820px;
  margin: 0 auto;
  line-height: 1.7;
}

.block-subheading {
  font-family: "Be Vietnam Pro", "Segoe UI", Arial, sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: #18346b;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.contact-map-wrapper,
.map-container-box,
.direction-img-container-box {
  background: #ffffff;
  border: 1px solid #d0d8ec;
  border-radius: 16px;
  padding: 14px;
  box-shadow: 0 4px 20px rgba(24, 52, 107, 0.05);
  height: 100%;
}

.iframe-wrap iframe {
  border-radius: 12px;
  display: block;
  width: 100%;
  height: 440px;
}

.direction-img-wrap img {
  border-radius: 12px;
  display: block;
  width: 100%;
  height: 440px;
  object-fit: cover;
}

/* --------------------------------------------------------------------------
   2.7 CHUẨN HÓA CONTACT FORM 7 TOÀN TRANG (.flatsome-custom-form)
   -------------------------------------------------------------------------- */

.flatsome-custom-form {
  position: relative;
}

.flatsome-custom-form p {
  margin-bottom: 0;
}

.flatsome-custom-form .row,
.flatsome-custom-form .form-row-compact {
  margin-left: -8px;
  margin-right: -8px;
  margin-bottom: 0;
  padding-bottom: 0;
}

.flatsome-custom-form .row > .col,
.flatsome-custom-form .form-row-compact > .col {
  padding-left: 8px;
  padding-right: 8px;
  padding-bottom: 0;
  margin-bottom: 0;
}

.flatsome-custom-form .wpcf7-form-control-wrap {
  display: block;
  margin-bottom: 0;
}

.flatsome-custom-form input[type="text"],
.flatsome-custom-form input[type="email"],
.flatsome-custom-form input[type="tel"],
.flatsome-custom-form textarea {
  width: 100%;
  margin-bottom: 16px;
  border-radius: 8px;
  border: 1px solid #d0d8ec;
  background-color: #f8fafc;
  color: #1e293b;
  font-size: 14px;
  padding: 10px 14px;
  box-shadow: none;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
  box-sizing: border-box;
}

.flatsome-custom-form input:focus,
.flatsome-custom-form textarea:focus {
  border-color: #18346b;
  background-color: #ffffff;
  box-shadow: 0 0 0 3px rgba(24, 52, 107, 0.1);
}

.flatsome-custom-form .button.expand {
  margin-top: 4px;
  margin-bottom: 0;
  border-radius: 8px;
  background: linear-gradient(135deg, #0f2247 0%, #18346b 100%);
  border: none;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 12px 24px;
  box-shadow: 0 4px 14px rgba(24, 52, 107, 0.2);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.flatsome-custom-form .button.expand:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(24, 52, 107, 0.3);
}

/* Colocated Responsive for Contact Page */

@media (max-width: 768px) {
  .contact-hero,
  body:has(.sec-contact-cards) .page-title.simple-title {
    min-height: 250px;
    padding-top: 100px;
    padding-bottom: 50px;
  }

  body:has(.sec-contact-cards) .page-title h1,
  body:has(.sec-contact-cards) .page-title .entry-title {
    font-size: 24px;
  }

  .contact-info-boxes,
  .sec-contact-cards {
    padding: 30px 0 15px;
  }

  .row-quick-cards {
    margin-bottom: 0;
  }

  .row-quick-cards .col {
    flex-basis: 100%;
    max-width: 100%;
    margin-bottom: 16px;
    padding-bottom: 0;
  }

  .row-address-card {
    margin-top: 0;
    margin-bottom: 0;
  }

  .row-address-card .col {
    padding-top: 0;
    padding-bottom: 0;
    margin-bottom: 0;
  }

  .contact-info-item,
  .contact-info-card,
  .contact-address-wide {
    margin-bottom: 0;
    padding: 18px 18px;
    height: auto;
  }

  .sec-contact-main {
    padding: 15px 0 40px;
  }

  .contact-form-wrap,
  .form-wrapper-box {
    padding: 24px 18px;
    margin-bottom: 0;
    border-radius: 16px;
  }

  .sec-title {
    font-size: 21px;
  }

  .col-contact-image,
  .mockup-img-wrap,
  .mockup-img-wrap .img-inner {
    display: none !important;
  }

  .sec-contact-direction {
    padding: 40px 0 60px;
  }

  .direction-header .sec-title {
    font-size: 19px;
  }

  .contact-map-wrapper,
  .map-container-box {
    margin-bottom: 20px;
  }

  .iframe-wrap iframe,
  .direction-img-wrap img {
    height: 300px;
  }
}