/* ==============================================================
   Tư vấn Luật L&K — Tier A overrides (260508)
   Goal: navy + gold professional law-firm palette, restored a11y,
   Vietnamese-friendly typography, sticky mobile CTA.
   ============================================================== */

:root{
  --tvl-navy: #0B2545;
  --tvl-navy-700: #13315c;
  --tvl-navy-500: #1d4e89;
  --tvl-gold: #B8924A;
  --tvl-gold-light: #d6ad65;
  --tvl-charcoal: #1f2937;
  --tvl-paper: #f8f6f1;
  --tvl-text: #1f2937;
  --tvl-muted: #6b7280;
  --tvl-border: #e5e7eb;
  --tvl-radius: 6px;
  --tvl-shadow: 0 4px 14px rgba(11,37,69,.08);
}

/* Typography — Be Vietnam Pro for body+UI, Lora for headings (better Vietnamese diacritics support) */
html, body, .body, p, li, td, input, button, select, textarea,
.main-navigation, .desktop-menu, .mobile-menu, .top-hotline, .top-advisory-link{
  font-family: "Be Vietnam Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
  font-feature-settings: "liga" 1, "kern" 1;
  color: var(--tvl-text);
}
h1,h2,h3,h4,h5,h6, .site-title, .module-title, .post-title, .entry-title{
  font-family: "Lora", "Times New Roman", Georgia, serif !important;
  font-weight: 600 !important;
  color: var(--tvl-navy) !important;
  letter-spacing: -0.005em;
}
h1.site-title{ font-size: clamp(28px, 4vw, 44px); line-height:1.15; margin: .25em 0; }
.site-tagline{ color: var(--tvl-gold) !important; font-style: italic; font-family: "Lora", serif !important; margin:0 0 1em; }

/* Restore focus-visible — overrides outline:none!important from style.css L46 */
*:focus-visible{ outline: 3px solid var(--tvl-gold) !important; outline-offset: 2px !important; }
input:focus-visible, button:focus-visible, a:focus-visible, textarea:focus-visible, select:focus-visible{
  outline: 3px solid var(--tvl-gold) !important;
}

/* Brand color — recolor every "primary blue" usage */
a, .top-advisory-link a, .desktop-menu a:hover, .mobile-menu a:hover{ color: var(--tvl-navy-500); }
a:hover{ color: var(--tvl-gold); text-decoration: none; }
.btn, .button, input[type=submit], button[type=submit]{
  background: var(--tvl-navy) !important;
  border: 1px solid var(--tvl-navy) !important;
  color: #fff !important;
  border-radius: var(--tvl-radius) !important;
  padding: 12px 22px !important;
  font-weight: 600 !important;
  letter-spacing: .02em;
  transition: background .2s, transform .15s, box-shadow .2s;
  box-shadow: var(--tvl-shadow);
}
.btn:hover, .button:hover, input[type=submit]:hover, button[type=submit]:hover{
  background: var(--tvl-gold) !important;
  border-color: var(--tvl-gold) !important;
  color: #fff !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(184,146,74,.32) !important;
}

/* Navigation polish */
header nav.small-navigation{ background: var(--tvl-navy) !important; color:#fff; }
header nav.small-navigation a, header nav.small-navigation .top-hotline-title{ color:#fff !important; }
header nav.small-navigation a:hover{ color: var(--tvl-gold-light) !important; }
header .main-navigation{ background:#fff; border-bottom: 3px solid var(--tvl-gold); padding: 8px 15px; }
.desktop-menu li > a{ font-weight: 600; text-transform: uppercase; font-size: 13.5px; letter-spacing:.04em; padding: 18px 14px !important; color: var(--tvl-navy) !important; }
.desktop-menu li.current-menu-item > a, .desktop-menu li:hover > a{ color: var(--tvl-gold) !important; background: transparent; }

/* Hero / homepage modules */
.module, .home-module{ padding: 36px 0; }
.module-title, .module h2{ position:relative; padding-bottom: 14px; margin-bottom: 28px; }
.module-title::after, .module h2::after{
  content:""; position:absolute; left:50%; bottom:0; transform: translateX(-50%);
  width: 60px; height: 3px; background: var(--tvl-gold); border-radius: 3px;
}

/* Lawyer cards — kill the funeral overlay */
.staff-item, .lawyer-card{ border:1px solid var(--tvl-border); border-radius: var(--tvl-radius); overflow:hidden; background:#fff; box-shadow: var(--tvl-shadow); transition: transform .2s, box-shadow .2s; }
.staff-item:hover, .lawyer-card:hover{ transform: translateY(-4px); box-shadow: 0 12px 28px rgba(11,37,69,.14); }
.staff-item img, .lawyer-card img{ width:100%; height:auto; display:block; filter: none !important; }
.staff-item .staff-overlay, .staff-item .overlay, .lawyer-card .overlay{ background: rgba(11,37,69,0) !important; }
.staff-item h3, .staff-item .name{ font-size: 18px; padding: 14px 16px 4px; margin: 0; }
.staff-item .position, .staff-item .role{ color: var(--tvl-gold); font-style: italic; padding: 0 16px 16px; }

/* News cards */
.post-list .post-item, .latest-news .news-item{ border:1px solid var(--tvl-border); border-radius: var(--tvl-radius); padding:14px; background:#fff; transition: box-shadow .2s, transform .2s; }
.post-list .post-item:hover{ box-shadow: var(--tvl-shadow); transform: translateY(-2px); }
.post-list h3, .latest-news h3{ font-size: 16px; line-height: 1.4; margin:.5em 0; }

/* Forms — CF7 polish */
.wpcf7 input[type=text], .wpcf7 input[type=email], .wpcf7 input[type=tel], .wpcf7 textarea, .wpcf7 select{
  width: 100%; padding: 11px 14px; border:1px solid var(--tvl-border); border-radius: var(--tvl-radius); font-size: 15px;
  background:#fff; transition: border-color .15s, box-shadow .15s;
}
.wpcf7 input:focus, .wpcf7 textarea:focus, .wpcf7 select:focus{
  border-color: var(--tvl-gold); box-shadow: 0 0 0 3px rgba(184,146,74,.18); outline: none;
}

/* Footer */
footer{ background: var(--tvl-navy) !important; color: #cfd8e6 !important; padding: 36px 0 16px; }
footer a{ color: #fff !important; }
footer a:hover{ color: var(--tvl-gold-light) !important; }
footer h2, footer h3, footer h4{ color: #fff !important; border-bottom: 2px solid var(--tvl-gold); padding-bottom: 8px; margin-bottom: 14px; }

/* Sticky mobile CTA bar */
.tvl-mobile-cta{ display:none; }
@media (max-width: 768px){
  .tvl-mobile-cta{
    display:flex; position: fixed; bottom: 0; left:0; right:0; z-index: 9999;
    background: #fff; border-top: 1px solid var(--tvl-border); box-shadow: 0 -2px 14px rgba(11,37,69,.12);
  }
  .tvl-mobile-cta a{
    flex:1; text-align:center; padding: 14px 6px; font-weight: 600; font-size: 14px;
    color: #fff; text-decoration: none;
  }
  .tvl-mobile-cta .tvl-call{ background: var(--tvl-navy); }
  .tvl-mobile-cta .tvl-zalo{ background: #0068ff; }
  .tvl-mobile-cta .tvl-msg{ background: var(--tvl-gold); }
  body{ padding-bottom: 60px; }
}

/* Trust strip */
.tvl-trust-strip{ background: var(--tvl-paper); border-top: 1px solid var(--tvl-border); border-bottom: 1px solid var(--tvl-border); padding: 18px 12px; text-align:center; font-size: 13.5px; color: var(--tvl-charcoal); }
.tvl-trust-strip strong{ color: var(--tvl-navy); }
.tvl-trust-strip .sep{ color: var(--tvl-gold); margin: 0 12px; }

/* Image responsiveness fallback */
img{ max-width: 100%; height: auto; }

/* Print */
@media print{ header nav, footer, .tvl-mobile-cta{ display:none !important; } }

/* ----- Round 2 additions ----- */

/* Trust strip — credentials ribbon */
.tvl-trust-strip{
  display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
  gap: 8px 6px;
  background: linear-gradient(90deg, var(--tvl-paper) 0%, #fff 50%, var(--tvl-paper) 100%);
  border-top: 1px solid var(--tvl-border);
  border-bottom: 1px solid var(--tvl-border);
  padding: 12px 16px;
  font-size: 13.5px;
  color: var(--tvl-charcoal);
  text-align: center;
}
.tvl-trust-strip strong{ color: var(--tvl-navy); font-weight: 600; }
.tvl-trust-strip .sep{ color: var(--tvl-gold); font-weight: 700; }
.tvl-trust-item{ white-space: nowrap; }

/* Slider/hero area — give it some breathing room and gradient overlay */
.slider-box-tab{ margin-top: 8px; }
.slider-box-tab .owl-carousel .item{ position: relative; }
.slider-box-tab .owl-carousel .item img{ width:100%; height:auto; }

/* Service cards (template-parts/services) — modernize */
.services-list, .home-services{ display:grid !important; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; padding: 8px 0; }
.services-list li, .home-services .service-item{
  background: #fff; border:1px solid var(--tvl-border); border-radius: var(--tvl-radius);
  padding: 22px 18px; text-align:center; list-style: none;
  transition: transform .18s, box-shadow .18s, border-color .18s;
}
.services-list li:hover, .home-services .service-item:hover{
  transform: translateY(-3px); border-color: var(--tvl-gold);
  box-shadow: 0 10px 24px rgba(11,37,69,.12);
}
.services-list li a, .home-services .service-item a{ color: var(--tvl-navy); font-weight: 600; }
.services-list li a:hover, .home-services .service-item a:hover{ color: var(--tvl-gold); }

/* Sidebar widget polish */
.sidebar .widget, aside .widget{
  background: #fff; border:1px solid var(--tvl-border); border-radius: var(--tvl-radius);
  padding: 16px 18px; margin-bottom: 22px;
}
.sidebar .widget-title, aside h3.widget-title{
  margin: 0 0 14px; padding-bottom: 10px; border-bottom: 2px solid var(--tvl-gold);
  font-size: 16px; color: var(--tvl-navy); text-transform: uppercase; letter-spacing: .03em;
}

/* Better hotline emphasis */
.top-hotline-title a{ color: #fff !important; font-weight: 600; }
.top-hotline-title a:hover{ color: var(--tvl-gold-light) !important; }

/* Body padding tweak */
body{ background: #fcfcfc; }

/* Article body — improved reading */
.entry-content, .post-content, .single-content{
  font-size: 16.5px; line-height: 1.75; color: var(--tvl-text);
}
.entry-content p, .post-content p{ margin: 0 0 1em; }
.entry-content h2, .post-content h2{ margin: 1.6em 0 .6em; font-size: 26px; }
.entry-content h3, .post-content h3{ margin: 1.4em 0 .5em; font-size: 21px; }
.entry-content blockquote, .post-content blockquote{
  border-left: 4px solid var(--tvl-gold); padding: 6px 18px;
  background: var(--tvl-paper); color: var(--tvl-charcoal); margin: 1.2em 0; font-style: italic;
}
.entry-content a, .post-content a{ text-decoration: underline; text-underline-offset: 2px; text-decoration-color: rgba(184,146,74,.4); }
.entry-content a:hover, .post-content a:hover{ text-decoration-color: var(--tvl-gold); }

/* Pagination */
.wp-pagenavi a, .wp-pagenavi span{
  border:1px solid var(--tvl-border) !important; padding: 8px 14px !important;
  border-radius: var(--tvl-radius) !important; color: var(--tvl-navy) !important;
  background: #fff !important; transition: all .15s;
}
.wp-pagenavi a:hover, .wp-pagenavi .current{
  background: var(--tvl-navy) !important; color: #fff !important; border-color: var(--tvl-navy) !important;
}

/* Skip-link a11y (when admin bar absent) */
.skip-link{ position: absolute; left: -9999px; top: -9999px; z-index: 99999; }
.skip-link:focus{ left: 12px; top: 12px; background: var(--tvl-gold); color: #fff; padding: 10px 16px; border-radius: var(--tvl-radius); text-decoration: none; }


/* ----- Round 3 UI fixes (260508 iter1) ----- */

/* Container utility */
.tvl-container { max-width: 1200px; margin: 0 auto; padding: 0 16px; }

/* Trust strip — horizontal row */
.tvl-trust-strip { padding: 14px 12px; }
.tvl-trust-strip .tvl-container { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 18px 28px; }
.tvl-trust-strip .tvl-trust-item { white-space: nowrap; font-size: 14px; }
.tvl-trust-strip .sep { display: none; }
@media (max-width: 768px) {
  .tvl-trust-strip { padding: 10px 12px; }
  .tvl-trust-strip .tvl-container { gap: 6px 14px; }
  .tvl-trust-strip .tvl-trust-item { font-size: 13px; flex: 1 1 45%; text-align: center; }
}

/* Why-Choose section — 4-column grid */
.tvl-why-choose { padding: 48px 0 36px; background: #fff; border-bottom: 1px solid var(--tvl-border); }
.tvl-why-title { text-align: center; margin: 0 0 32px; font-size: clamp(22px, 3vw, 28px); color: var(--tvl-navy); }
.tvl-why-title::after { content: ""; display: block; width: 50px; height: 3px; background: var(--tvl-gold); border-radius: 3px; margin: 12px auto 0; }
.tvl-why-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  align-items: stretch;
}
.tvl-why-item {
  text-align: center;
  padding: 24px 18px;
  background: var(--tvl-paper);
  border: 1px solid var(--tvl-border);
  border-radius: var(--tvl-radius);
  transition: transform .18s, box-shadow .18s, border-color .18s;
}
.tvl-why-item:hover { transform: translateY(-4px); border-color: var(--tvl-gold); box-shadow: 0 12px 26px rgba(11,37,69,.12); }
.tvl-why-icon {
  width: 56px; height: 56px;
  margin: 0 auto 14px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--tvl-navy); color: var(--tvl-gold);
  border-radius: 50%;
}
.tvl-why-item h3 { font-family: "Lora", serif !important; font-size: 17px !important; margin: 0 0 8px !important; color: var(--tvl-navy) !important; }
.tvl-why-item p { margin: 0; font-size: 14px; color: var(--tvl-charcoal); line-height: 1.55; }
@media (max-width: 992px) {
  .tvl-why-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .tvl-why-grid { grid-template-columns: 1fr; gap: 14px; }
  .tvl-why-choose { padding: 28px 0 20px; }
}

/* Office block — finer styling */
.tvl-office-block { background: var(--tvl-paper); border-top: 1px solid var(--tvl-border); padding: 32px 0; margin-top: 32px; }
.tvl-office-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.tvl-office-block h3 { font-family: "Lora", serif !important; color: var(--tvl-navy) !important; font-size: 17px !important; margin: 0 0 12px !important; padding-bottom: 8px; border-bottom: 2px solid var(--tvl-gold); display: inline-block; }
.tvl-office-block address { font-style: normal; line-height: 1.7; }
.tvl-office-block address a { color: var(--tvl-navy-500); }
.tvl-office-block .tvl-office-list { list-style: none; padding: 0; margin: 0; line-height: 1.9; }
.tvl-office-block .tvl-office-list li::before { content: "▸ "; color: var(--tvl-gold); font-weight: 700; }
@media (max-width: 768px) {
  .tvl-office-grid { grid-template-columns: 1fr; gap: 18px; }
}

/* Boss / about section — better layout */
#about { padding: 56px 0 !important; background: linear-gradient(180deg, #fff 0%, var(--tvl-paper) 100%); }
#about .boss-thumb { padding: 0; border: none; box-shadow: 0 12px 32px rgba(11,37,69,.18); border-radius: 8px; overflow: hidden; aspect-ratio: 3/4; }
#about .boss-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
#about .about-block { text-align: left !important; padding-left: 24px; }
#about .boss-name {
  font-family: "Lora", serif !important;
  font-size: 28px !important;
  color: var(--tvl-navy) !important;
  margin: 0 0 6px !important;
  font-weight: 600;
  letter-spacing: -0.005em;
}
#about .boss-slogan {
  font-family: "Lora", serif !important;
  font-size: 18px !important;
  font-style: italic;
  color: var(--tvl-gold) !important;
  margin: 0 0 18px !important;
  line-height: 1.4 !important;
}
#about .boss-slogan::before { content: "“"; font-size: 1.4em; line-height: 0; vertical-align: -0.4em; margin-right: 4px; color: var(--tvl-gold); }
#about .boss-slogan::after  { content: "”"; font-size: 1.4em; line-height: 0; vertical-align: -0.4em; margin-left: 4px; color: var(--tvl-gold); }
#about .boss-excerpt p, #about .boss-excerpt { font-size: 15.5px !important; line-height: 1.75; color: var(--tvl-charcoal); margin: 0 0 14px; }
#about .signature { font-size: 14px; color: var(--tvl-muted); }
@media (max-width: 768px) {
  #about .about-block { padding: 18px 0 0 !important; text-align: center !important; }
  #about .boss-thumb { max-width: 280px; margin: 0 auto; }
  #about .boss-name { font-size: 22px !important; }
  #about .boss-slogan { font-size: 16px !important; }
}

/* Services grid — increase gap, add card visual */
#service, #services, .home-services-section { padding: 48px 0 !important; }
#service .col-md-4, #services .col-md-4 { padding: 0 14px 28px !important; }
#service .service-item, #services .service-item, .services-list .service, .home-services-list .service-item {
  background: #fff; border: 1px solid var(--tvl-border); border-radius: var(--tvl-radius);
  padding: 20px 18px; transition: transform .18s, box-shadow .18s, border-color .18s;
  height: 100%;
}
#service .service-item:hover, .services-list .service:hover, .home-services-list .service-item:hover {
  border-color: var(--tvl-gold); box-shadow: 0 10px 24px rgba(11,37,69,.10); transform: translateY(-3px);
}
#service .service-item img, .services-list img { border-radius: var(--tvl-radius); margin-bottom: 14px; }
#service .service-item h3, .services-list h3 { font-size: 16px !important; margin: 6px 0 8px !important; }

/* Hero/lawyer (employee) section overlay opacity */
#employee { padding: 60px 0 !important; }
#employee .overlay { background: rgba(11,37,69,.82) !important; padding: 48px 0; border-radius: 8px; }
#employee .section-title h2 { color: #fff !important; }
#employee .section-title h2::after { background: var(--tvl-gold); }
#employee .employee {
  background: #fff; border-radius: var(--tvl-radius); overflow: hidden;
  box-shadow: 0 6px 18px rgba(0,0,0,.15);
  margin: 0 6px;
}
#employee .employee .thumbnail { padding: 0; border: none; aspect-ratio: 3/4; overflow: hidden; }
#employee .employee .thumbnail img { width: 100%; height: 100%; object-fit: cover; display: block; }
#employee .employee-info { padding: 16px 14px; text-align: center; }
#employee .employee-name { font-family: "Lora", serif !important; font-size: 17px; color: var(--tvl-navy); font-weight: 600; margin: 0 0 4px; }
#employee .employee-title { font-style: italic; color: var(--tvl-gold); font-size: 14px; }
#employee .employee-email a { color: var(--tvl-navy-500); font-size: 13px; }
#employee .employee-phone { color: var(--tvl-navy); font-weight: 600; font-size: 14px; margin-top: 4px; }
#employee .employee hr { border: 0; border-top: 1px solid var(--tvl-border); margin: 12px 0; }

/* Latest news section */
#home-news { padding: 48px 0 !important; }
#home-news .section-title h2::after { content: ""; display: block; width: 50px; height: 3px; background: var(--tvl-gold); margin: 12px auto 0; }
#home-news .news { background: #fff; border: 1px solid var(--tvl-border); border-radius: var(--tvl-radius); margin: 0 8px 16px; transition: box-shadow .18s, transform .18s; }
#home-news .news:hover { box-shadow: 0 8px 20px rgba(11,37,69,.10); transform: translateY(-2px); }
#home-news .news .thumbnail { padding: 0; border: none; aspect-ratio: 3/2; overflow: hidden; border-radius: 6px 6px 0 0; }
#home-news .news .thumbnail img { width: 100%; height: 100%; object-fit: cover; display: block; }
#home-news .news .content { padding: 12px 14px; }
#home-news .news h3, #home-news .news h2 { font-size: 15.5px !important; line-height: 1.4 !important; margin: 0 0 6px !important; }
#home-news .news h3 a, #home-news .news h2 a { color: var(--tvl-navy); }
#home-news .news h3 a:hover { color: var(--tvl-gold); }

/* Section title common */
.section-title h2 { font-family: "Lora", serif !important; font-size: clamp(22px, 3vw, 28px) !important; letter-spacing: 0.02em; }
.section-title { margin-bottom: 28px !important; }

/* Default thumbnail aspect ratio fallback (prevents grey-box layout shift) */
.thumbnail img[data-lazyloaded] { background: var(--tvl-paper); }
img[loading="lazy"] { background: linear-gradient(110deg, #f0f0f0 30%, #f8f8f8 50%, #f0f0f0 70%) !important; background-size: 200% 100% !important; }

/* Responsive helpers */
@media (max-width: 992px) {
  #about .col-md-3, #about .col-md-9 { float: none; width: 100%; }
}

/* Higher specificity override for why-choose grid (forces it over any LSCWP combined override) */
.tvl-why-choose .tvl-why-grid,
section.tvl-why-choose div.tvl-why-grid,
.tvl-container .tvl-why-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 24px !important;
}
@media (max-width: 992px) {
  .tvl-why-choose .tvl-why-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 480px) {
  .tvl-why-choose .tvl-why-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Force trust strip horizontal layout too */
.tvl-trust-strip > .tvl-container {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 18px 28px !important;
}