/* =========================================================
   1/5 — ROOT + BASE + HEADER + DESKTOP NAV + SEARCH
   ========================================================= */

:root{
  --brand-primary:#854d07;
  --brand-primary-dark:#6b3d05;
  --brand-primary-darker:#4f2d03;
  --brand-primary-soft:#fff7ed;

  --brand-green:#854d07;
  --brand-green-dark:#6b3d05;
  --brand-gold:#854d07;
  --brand-brown:#6b3d05;
  --brand-gear:#4A4A4A;
  --brand-white:#FFFFFF;

  --primary-color:var(--brand-primary);
  --secondary-color:var(--brand-primary-dark);
  --accent-color:var(--brand-primary-darker);

  --text-color:#1f2937;
  --border-color:#e5e7eb;
  --bg-soft:#f9fafb;
  --hover-bg:rgba(133,77,7,.10);
  --text-on-brand:#ffffff;
  --text-on-brand-soft:rgba(255,255,255,.9);

  --sticky-top:90px;
  --toc-green:#854d07;
  --toc-green-2:#6b3d05;
}

/* ===== BASE ===== */
*{ box-sizing:border-box; }

html{
  text-size-adjust:100%;
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
}

body{
  margin:0;
  color:#333;
  line-height:1.6;
  overflow-x:hidden;
  background-color:#f4f6f8;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

a{
  color:inherit;
  text-decoration:none;
  transition:color .15s ease, background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

a:hover{ color:var(--accent-color); }

a:focus-visible{
  outline:3px solid rgba(133,77,7,.35);
  outline-offset:2px;
  border-radius:6px;
}

.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
}

.skip-link{
  position:absolute;
  left:-9999px;
  top:10px;
  z-index:10000;
  padding:10px 14px;
  color:#111;
  background:#fff;
  border:2px solid rgba(133,77,7,.75);
  border-radius:10px;
}
.skip-link:focus{ left:12px; }

.container{
  width:100%;
  max-width:1280px;
  margin:0 auto;
  padding:0 15px;
}

/* ===== HEADER ===== */
.topbar{
  position:sticky;
  top:0;
  z-index:12000;
  background:#fff;
  border-bottom:2px solid var(--primary-color);
  box-shadow:0 2px 10px rgba(0,0,0,.05);
}

.topbar .container{ contain:none !important; }

.topbar-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-height:68px;
  padding:10px 0;
  background:#fff;
}

.brand{
  display:block;
  min-width:200px;
  flex:0 0 auto;
}

.brand img{
  display:block;
  width:auto;
  height:44px;
  max-width:200px;
  object-fit:contain;
}

/* ===== DESKTOP NAV ===== */
.topbar-menu{ display:none !important; } /* row2 cũ tắt hẳn */

.main-nav,
.desktop-nav{
  display:flex;
  align-items:center;
  overflow:visible !important;
}

.desktop-nav .nav-list,
.nav-list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
  overflow:visible !important;
}

.nav-list > li{ overflow:visible !important; }

.desktop-nav .nav-link,
.nav-link{
  display:block;
  padding:9px 12px;
  font-size:13px;
  font-weight:700;
  white-space:nowrap;
  border-radius:8px;
  text-transform:uppercase;
  color:var(--primary-color);
}

.desktop-nav .nav-link:hover,
.desktop-nav .nav-link:focus-visible{
  color:var(--secondary-color);
  background:rgba(133,77,7,.10);
}

/* dropdown */
.has-sub{ position:relative; }

.has-sub > .nav-link::after{
  content:"▾";
  margin-left:6px;
  font-size:11px;
  opacity:.9;
}

.submenu{
  list-style:none;
  margin:0;
  padding:8px;
  position:absolute;
  top:calc(100% + 8px);
  left:0;
  min-width:280px;
  z-index:10060;
  opacity:0;
  visibility:hidden;
  transform:translateY(6px);
  pointer-events:none;
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:12px;
  box-shadow:0 14px 30px rgba(0,0,0,.12);
  transition:opacity .15s ease, transform .15s ease, visibility .15s ease;
}

.submenu a{
  display:block;
  padding:10px 12px;
  font-size:14px;
  font-weight:600;
  color:#0f172a;
  border-radius:10px;
  text-transform:none;
}

.submenu a:hover,
.submenu a:focus-visible{
  color:var(--accent-color);
  background:var(--hover-bg);
}

.has-sub:hover > .submenu,
.has-sub:focus-within > .submenu,
.has-sub.is-open > .submenu{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
  pointer-events:auto;
}

/* ===== SEARCH ===== */
.search-wrap{
  margin-left:auto;
  flex:0 0 auto;
  display:flex;
  justify-content:flex-end;
  min-width:0;
}

.search-form{
  width:44px;
  max-width:44px;
  height:44px;
  display:flex;
  align-items:center;
  overflow:hidden;
  border:1px solid transparent;
  border-radius:12px;
  background:transparent;
  will-change:width,max-width;
  transition:width .18s ease, max-width .18s ease, border-color .18s ease, background-color .18s ease, box-shadow .18s ease;
}

.search-input{
  width:0;
  min-width:0;
  height:44px;
  line-height:44px;
  padding:0;
  border:0;
  outline:none;
  opacity:0;
  font-size:15px;
  pointer-events:none;
  background:transparent;
  transition:width .18s ease, opacity .18s ease, padding .18s ease;
}

.search-btn{
  width:44px;
  min-width:44px;
  height:44px;
  border:0;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:12px;
  color:#fff;
  background:var(--primary-color);
  border:1px solid var(--primary-color);
}

.search-btn:hover{ background:var(--secondary-color); }

.search-form.open,
.search-form:focus-within{
  width:320px;
  max-width:320px;
  background:#fff;
  border-color:var(--primary-color);
  box-shadow:0 10px 26px rgba(0,0,0,.08);
}

.search-form.open .search-input,
.search-form:focus-within .search-input{
  width:100%;
  padding:0 12px;
  opacity:1;
  pointer-events:auto;
}

/* ===== HAMBURGER ===== */
.menu-toggle{
  display:none;
  width:44px;
  height:44px;
  border:1px solid #e5e7eb;
  border-radius:12px;
  background:#fff;
  color:#0f172a;
  cursor:pointer;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}
.menu-toggle:hover{ background:var(--hover-bg); }

/* header cũ nếu còn */
header:not(.topbar){
  margin-bottom:18px;
  padding:10px 0;
  background:#fff;
  border-bottom:1px solid #eee;
}
/* =========================================================
   2/5 — POST / ARTICLE / HOME / GRID / COMMON BLOCKS
   ========================================================= */

.post-wrapper{
  max-width:1280px;
  margin:30px auto;
  padding:40px;
  background:#fff;
  border-radius:8px;
  box-shadow:0 4px 15px rgba(0,0,0,.05);
}

/* ===== POST DETAIL ===== */
.breadcrumb{
  margin-bottom:12px;
  font-size:13px;
  color:#666;
  text-transform:uppercase;
}
.breadcrumb a{
  font-weight:700;
  color:var(--primary-color);
}

h1.post-title{
  margin:0 0 15px;
  font-size:34px;
  font-weight:700;
  line-height:1.3;
  text-align:center;
  color:#1a1a1a;
  overflow-wrap:break-word;
  word-wrap:break-word;
}

.post-meta{
  margin-bottom:20px;
  padding-bottom:10px;
  font-size:13px;
  color:#888;
  text-align:center;
  border-bottom:1px solid #eee;
}

.post-content{
  width:100%;
  font-size:18px;
  line-height:1.6;
  color:#2c3e50;
  text-align:justify;
  overflow-wrap:break-word;
  word-wrap:break-word;
}

.post-content h2,
.post-content h3{
  margin:25px 0 15px;
  font-weight:700;
  line-height:1.3;
  color:var(--primary-color);
  scroll-margin-top:var(--sticky-top);
}

.post-content h4{
  scroll-margin-top:var(--sticky-top);
}

.post-content table{
  width:100%;
  margin:20px 0;
  border:1px solid #ddd;
  border-collapse:collapse;
  table-layout:fixed;
}

.post-content th,
.post-content td{
  padding:12px 15px;
  text-align:left;
  vertical-align:top;
  border:1px solid #ccc;
  word-wrap:break-word;
}

.post-content th{
  color:var(--primary-color);
  background:#fff7ed;
  border-bottom:2px solid var(--primary-color);
}

.post-content img{
  display:block;
  max-width:100% !important;
  height:auto !important;
  margin:20px auto;
  border-radius:6px;
  box-shadow:0 2px 8px rgba(0,0,0,.08);
}

/* link trong content / meta / tác giả: không gạch chân */
.post-content a,
.post-content a:visited,
.entry-head-meta__item a,
.entry-head-meta__item a:visited,
.author-card__cat a,
.author-card__cat a:visited{
  color:#0056b3 !important;
  text-decoration:none !important;
}

.post-content a:hover,
.post-content a:focus-visible,
.entry-head-meta__item a:hover,
.entry-head-meta__item a:focus-visible,
.author-card__cat a:hover,
.author-card__cat a:focus-visible{
  color:#003d80 !important;
  text-decoration:none !important;
}

/* ===== DOWNLOAD CTA ===== */
.btn-download-wrapper{
  margin:40px 0;
  padding:25px;
  text-align:center;
  background:#fffaf4;
  border:2px dashed var(--primary-color);
  border-radius:10px;
  contain:layout paint;
}

.btn-download-now{
  display:inline-block;
  padding:15px 30px;
  font-size:18px;
  font-weight:700;
  color:#fff;
  background:#d32f2f;
  border-radius:50px;
  text-transform:uppercase;
  box-shadow:0 4px 10px rgba(211,47,47,.25);
  will-change:transform;
}
.btn-download-now:hover{
  color:#fff;
  background:#b71c1c;
  transform:translateY(-2px);
}

.note-download{
  margin-top:10px;
  font-size:14px;
  color:#666;
  font-style:italic;
}

/* ===== FOOTER BOX dưới bài ===== */
.post-footer-box{
  margin-top:30px;
  padding:15px;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:15px;
  background:#fffaf4;
  border:1px solid #ead7bd;
  border-radius:6px;
  contain:layout paint;
}
.post-footer-box.is-center{ justify-content:center; }
.post-footer-box.is-center .share-area{ justify-content:center; }

.cat-label{
  font-size:14px;
  font-weight:700;
  color:var(--primary-color);
}

.share-area{
  display:flex;
  gap:10px;
}

.share-btn{
  width:36px;
  height:36px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--primary-color);
  border:1px solid var(--primary-color);
  border-radius:50%;
}
.share-btn:hover{
  color:#fff !important;
  background:var(--primary-color) !important;
}
.share-btn svg{
  width:18px;
  height:18px;
  display:block;
}

/* ===== MAYBE INTERESTED ===== */
.maybe-interested{
  margin:30px 0;
  padding:20px;
  background:#fff;
  border:1px solid #ddd;
  border-radius:8px;
  contain:layout paint style;
  content-visibility:auto;
  contain-intrinsic-size:1px 600px;
}

.maybe-header{
  margin-bottom:15px;
  padding-bottom:10px;
  font-size:18px;
  font-weight:700;
  text-align:center;
  text-transform:uppercase;
  color:#5a3e1b;
  border-bottom:2px solid #f0f0f0;
}

.maybe-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:15px;
}

.maybe-item{
  height:320px;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  background:#fff;
  border:1px solid #eee;
  border-radius:6px;
  transition:transform .15s ease, box-shadow .15s ease;
}
.maybe-item:hover{
  transform:translateY(-3px);
  box-shadow:0 4px 10px rgba(0,0,0,.08);
}

.maybe-thumb{
  height:320px;
  overflow:hidden;
  background:#eee;
}
.maybe-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.maybe-title{
  padding:8px;
  font-size:13px;
  font-weight:600;
  line-height:1.35;
  text-align:center;
  color:#333;
}

/* ===== HOT NEWS ===== */
.top-hot-wrapper{
  display:grid;
  grid-template-columns:2fr 1fr;
  gap:20px;
  margin-bottom:40px;
  padding:20px;
  background:var(--bg-soft);
  border:1px solid var(--border-color);
  border-radius:8px;
  contain:layout paint style;
}
.top-big-post img{
  width:100%;
  height:380px;
  object-fit:cover;
  border-radius:8px;
}
.top-big-post h1{
  margin:15px 0 5px;
  font-size:24px;
}

.sub-item{
  display:flex;
  gap:12px;
  margin-bottom:12px;
  padding-bottom:12px;
  border-bottom:1px solid #eee;
}
.sub-item:last-child{
  margin-bottom:0;
  padding-bottom:0;
  border-bottom:none;
}
.sub-item .thumb{
  width:100px;
  height:70px;
  object-fit:cover;
  border-radius:5px;
  flex-shrink:0;
}
.sub-item a{
  font-size:14px;
  font-weight:600;
}

/* ===== CATEGORY BOXES ===== */
.cat-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:30px;
  margin-bottom:40px;
}

.news-box .box-header{
  display:flex;
  justify-content:space-between;
  margin-bottom:15px;
  border-bottom:2px solid #ddd;
}

.news-box .box-title,
.grid-box-head .box-title{
  font-size:18px;
  font-weight:700;
  text-transform:uppercase;
  color:var(--primary-color);
  border-bottom:2px solid var(--secondary-color);
}

.news-box .box-title{
  margin-bottom:-2px;
  padding-bottom:5px;
}

.news-box .box-body{
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:20px;
}

.main-post .thumb{
  width:100%;
  height:220px !important;
  display:block;
  margin-bottom:10px;
  object-fit:cover;
  border-radius:6px;
  background:#eee;
}
.main-post div{
  font-size:16px;
  font-weight:700;
}

/* ===== DIRECTORY ===== */
.directory-section{
  grid-column:1/-1;
  margin-top:30px;
  background:#fff;
  border:1px solid #eee;
  border-radius:8px;
  contain:layout paint style;
  content-visibility:auto;
  contain-intrinsic-size:1px 900px;
}

.dir-header{
  padding:12px 20px;
  font-weight:700;
  color:#fff;
  text-transform:uppercase;
  background:linear-gradient(90deg,var(--primary-color),var(--secondary-color));
}

.dir-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
}

.dir-item{
  min-width:0;
  display:flex;
  align-items:center;
  padding:15px;
  border-right:1px solid #eee;
  border-bottom:1px solid #eee;
}
.dir-item:nth-child(3n){ border-right:none; }

.dir-icon svg{
  width:32px;
  height:32px;
  margin-right:15px;
  fill:var(--secondary-color);
}


/* ===== BACK TO TOP ===== */
#backToTop{
  position:fixed;
  right:20px;
  bottom:20px;
  z-index:999;
  width:45px;
  height:45px;
  display:none;
  align-items:center;
  justify-content:center;
  color:#fff;
  background:var(--primary-color);
  border:none;
  border-radius:50%;
  cursor:pointer;
  box-shadow:0 4px 10px rgba(0,0,0,.2);
  transition:transform .2s ease, background-color .2s ease;
}
#backToTop:hover{
  transform:translateY(-3px);
  background:var(--secondary-color);
}
/* =========================================================
   3/5 — FOOTER + DRAWER MOBILE + RESPONSIVE + TOC + MOBILE NAV
   ========================================================= */

/* ===== FOOTER ===== */
.site-footer.footer-v2 .footer-blue{
  color:#fff;
  background:var(--primary-color);
  border-top:4px solid var(--secondary-color);
}

.site-footer.footer-v2 .footer-blue-inner{
  display:grid;
  grid-template-columns:1.2fr 1fr 1.2fr;
  gap:22px;
  align-items:start;
  padding-top:22px;
  padding-bottom:22px;
}

.site-footer.footer-v2 .footer-brand{
  display:flex;
  gap:15px;
  align-items:flex-start;
}

.site-footer.footer-v2 .footer-brand-link{
  display:inline-flex;
  width:140px;
  padding:8px;
  justify-content:center;
  flex-shrink:0;
  background:#fff;
  border-radius:8px;
}

.site-footer.footer-v2 .footer-brand-link img{
  display:block;
  width:100%;
  height:auto !important;
  max-height:70px;
  object-fit:contain;
}

.site-footer.footer-v2 .footer-brand-name,
.site-footer.footer-v2 .footer-value,
.site-footer.footer-v2 .footer-copy,
.site-footer.footer-v2 a,
.site-footer.footer-v2 .footer-contact-item,
.site-footer.footer-v2 .footer-contact-item a{
  color:#fff !important;
}

.site-footer.footer-v2 .footer-brand-tag,
.site-footer.footer-v2 .footer-label,
.site-footer.footer-v2 .footer-subtext,
.site-footer.footer-v2 .footer-brand-desc{
  color:rgba(255,255,255,.9) !important;
}

.site-footer.footer-v2 .footer-brand-desc{
  margin-top:10px;
  font-size:13px;
  line-height:1.6;
  text-align:justify;
}

.site-footer.footer-v2 .footer-info{
  display:grid;
  gap:12px;
}

.site-footer.footer-v2 .footer-item{
  display:flex;
  align-items:flex-start;
  gap:10px;
}

.site-footer.footer-v2 .footer-item-body{
  min-width:0;
}

.site-footer.footer-v2 .footer-value,
.site-footer.footer-v2 .footer-subtext,
.site-footer.footer-v2 .footer-text{
  overflow-wrap:anywhere;
  word-break:break-word;
}

.footer-info-center{
  display:flex;
  justify-content:center;
  width:100%;
}

.footer-contact-row{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  gap:40px;
}

.footer-contact-item{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:16px;
  font-weight:600;
}

.site-footer.footer-v2 .footer-policy-bar{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:8px 14px;
  padding:10px 12px;
  background:var(--secondary-color) !important;
  border-top:1px solid rgba(255,255,255,.18);
}

.site-footer.footer-v2 .footer-policy-bar .fpol-link{
  padding:6px 10px;
  font-size:13px;
  font-weight:600 !important;
  white-space:nowrap;
  color:rgba(255,255,255,.96) !important;
  border:1px solid rgba(255,255,255,.22);
  border-radius:10px;
  text-decoration:none !important;
}
.site-footer.footer-v2 .footer-policy-bar .fpol-link:hover{
  color:#fff !important;
  background:rgba(255,255,255,.12) !important;
}

.site-footer.footer-v2 .footer-copy{
  width:100%;
  display:block;
  padding:15px 10px;
  text-align:center !important;
  color:#fff !important;
  background:var(--secondary-color) !important;
}

/* ===== DRAWER MOBILE ===== */
.drawer-backdrop{
  position:fixed;
  inset:0;
  z-index:10000;
  opacity:0;
  pointer-events:none;
  background:rgba(15,23,42,.45);
  transition:opacity .2s ease;
}
.drawer-backdrop.open{
  opacity:1;
  pointer-events:auto;
}

.mobile-drawer{
  position:fixed;
  top:0;
  right:-340px;
  z-index:10001;
  width:340px;
  max-width:86vw;
  height:100vh;
  padding:14px;
  display:flex;
  flex-direction:column;
  background:#fff;
  box-shadow:-14px 0 30px rgba(0,0,0,.16);
  transition:right .22s ease;
}
.mobile-drawer.open{ right:0; }

.drawer-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:6px 4px 12px;
  border-bottom:1px solid #eef2f7;
}

.drawer-title{
  font-size:16px;
  font-weight:700;
  color:#0f172a;
}

.drawer-close{
  width:44px;
  height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  border:1px solid #e5e7eb;
  border-radius:12px;
  background:#fff;
}
.drawer-close:hover{ background:var(--hover-bg); }

.no-scroll{ overflow:hidden; }

.mnav{
  display:grid;
  gap:10px;
  padding:10px 2px 0;
}

.mnav-item{
  display:block;
  padding:12px;
  font-weight:600;
  color:#0f172a;
  border:1px solid #eef2f7;
  border-radius:12px;
}
.mnav-item:hover{
  background:var(--hover-bg);
  border-color:#dbe7df;
}

.mnav-group{ border:0; }
.mnav-summary{ list-style:none; }
.mnav-summary::-webkit-details-marker{ display:none; }

.mnav-sub{
  display:grid;
  gap:8px;
  margin:8px 0 0;
  padding:8px;
  background:#fff;
  border:1px dashed #e5e7eb;
  border-radius:12px;
}

.mnav-sub-item{
  display:block;
  padding:10px 12px;
  font-weight:600;
  color:#0f172a;
  border:1px solid #eef2f7;
  border-radius:12px;
}
.mnav-sub-item:hover{
  background:var(--hover-bg);
  border-color:#dbe7df;
}

/* ===== FONT WEIGHT CLEANUP ===== */
.home-feature-left .hero-title,
.home-feature-right .side-title,
.home-card .card-title,
.md-item a,
.grid-box-list a,
.main-post div{
  font-weight:600 !important;
}

.news-box .box-title,
h1.post-title,
.post-content h2,
.post-content h3,
.maybe-header,
.dir-header,
.btn-download-now,
.cat-label,
.breadcrumb a,
.post-content th{
  font-weight:700 !important;
}

body,
.post-content,
.md-meta,
.maybe-title,
.grid-box-hero-title,
.grid-box-head a,
.sub-item a{
  font-weight:400 !important;
}

/* ===== TOC mobile button ===== */
.toc-fab{
  position:fixed;
  right:18px;
  bottom:88px;
  z-index:12080;
  width:58px;
  height:58px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  cursor:pointer;
  background:var(--primary-color);
  border:2px solid rgba(255,255,255,.85);
  border-radius:999px;
  box-shadow:0 18px 40px rgba(133,77,7,.28);
}
.toc-fab:hover{ filter:brightness(.95); }

.toc-backdrop{
  position:fixed;
  inset:0;
  z-index:12070;
  opacity:0;
  pointer-events:none;
  background:rgba(15,23,42,.45);
  transition:opacity .2s ease;
}
.toc-backdrop.open{
  opacity:1;
  pointer-events:auto;
}

.toc-drawer{
  position:fixed;
  top:0;
  right:-340px;
  z-index:12075;
  width:320px;
  max-width:86vw;
  height:100vh;
  display:flex;
  flex-direction:column;
  background:#fff;
  box-shadow:-14px 0 30px rgba(0,0,0,.16);
  transition:right .22s ease;
}
.toc-drawer.open{ right:0; }

.toc-drawer-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:12px;
  border-bottom:1px solid #eef2f7;
}
.toc-drawer-title{
  font-weight:900;
  color:#0f172a;
}
.toc-drawer-close{
  width:44px;
  height:44px;
  cursor:pointer;
  font-weight:900;
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:12px;
}
.toc-drawer-body{
  padding:12px;
  overflow:auto;
}
.toc-drawer .toc-link{
  font-size:14px !important;
  font-weight:700 !important;
  color:#0f172a !important;
}
.toc-drawer-body .toc-title{ display:none !important; }
.toc-drawer-body .toc-box{
  padding:0 5px !important;
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
}
.toc-drawer-body .toc-item{ margin:12px 0 !important; }
.toc-drawer-body .toc-link{ font-size:14.5px !important; }
/* ===== MOBILE BOTTOM NAV ===== */
.mobile-bottom-nav{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:12030;
  height:64px;
  display:none;
  background:#fff;
  border-top:1px solid #e5e7eb;
  padding-bottom:env(safe-area-inset-bottom, 0px);
}

.mobile-bottom-nav a,
.mobile-bottom-nav button{
  flex:1;
  height:64px;
  margin:0;
  padding:0;
  border:0;
  cursor:pointer;
  appearance:none;
  background:transparent;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  font-size:12px;
  font-weight:600;
  color:#0f172a;
  text-decoration:none;
}

.mobile-bottom-nav svg{
  width:22px;
  height:22px;
  display:block;
}
.mobile-bottom-nav span{
  font-size:12px;
  line-height:1;
}
.mobile-bottom-nav a:active,
.mobile-bottom-nav button:active{
  background:rgba(133,77,7,.08) !important;
}

/* ===== RESPONSIVE ===== */
@media (max-width:1080px){
  .home-grid6{ grid-template-columns:repeat(3,1fr); }
  .cat-grid2{ grid-template-columns:1fr; }
  .cat-grid4{ grid-template-columns:repeat(2,1fr); }
}

@media (max-width:900px){
  .site-footer.footer-v2 .footer-blue-inner{
    grid-template-columns:1fr;
  }
  .mobile-bottom-nav{ display:flex; }
  body{ padding-bottom:74px; }
  .postseo-action-row{
    grid-template-columns:1fr;
  }
  .postseo-action-row .postseo-cta a{
    width:100%;
    padding:13px 14px;
  }
  .order-box .order-row{
    grid-template-columns:1fr;
  }
}

@media (max-width:768px){
  header:not(.topbar){
    padding:8px 0;
    margin-bottom:14px;
  }

  .container{ padding:0 10px; }
  .post-wrapper{ padding:15px; }
  main#main-content{ margin-top:10px !important; }

  .topbar-inner{
    display:grid !important;
    grid-template-columns:auto 1fr auto !important;
    align-items:center !important;
    gap:12px !important;
    padding:8px 10px !important;
    min-height:auto !important;
    background:#fff !important;
  }

  .brand{
    min-width:0 !important;
    margin:0 !important;
    flex:0 0 auto !important;
  }

  .brand img{
    max-width:120px !important;
    max-height:38px !important;
    height:auto !important;
    object-fit:contain;
  }

  .search-wrap{
    width:100% !important;
    margin:0 !important;
    display:block !important;
    flex:1 1 auto !important;
    min-width:0;
  }

  .search-form{
    width:100% !important;
    max-width:100% !important;
    height:38px !important;
    display:flex !important;
    background:#fff !important;
    border:1px solid var(--primary-color) !important;
    border-radius:8px !important;
  }

  .search-input{
    width:100% !important;
    height:100% !important;
    padding:0 10px !important;
    opacity:1 !important;
    font-size:14px !important;
    display:block !important;
    pointer-events:auto !important;
  }

  .search-btn{
    width:38px !important;
    min-width:38px !important;
    height:100% !important;
    border-radius:0 8px 8px 0 !important;
  }

  .menu-toggle{
    display:flex !important;
    width:38px !important;
    height:38px !important;
    margin:0 !important;
  }

  h1.post-title{ font-size:24px; }
  .post-content{ font-size:16px; }

  .post-content table{
    display:block;
    overflow-x:auto;
    white-space:nowrap;
    table-layout:auto;
  }
  .post-content th,
  .post-content td{
    min-width:140px;
    font-size:15px;
    white-space:normal;
  }

  .top-hot-wrapper,
  .cat-row,
  .news-box .box-body,
  .maybe-grid{
    grid-template-columns:1fr;
  }

  .post-footer-box{
    flex-direction:column;
    text-align:center;
  }

  .dir-grid{ grid-template-columns:1fr; }
  .dir-item{
    border-right:none;
  }
  .dir-item a,
  .dir-item div{
    overflow-wrap:anywhere;
    word-break:break-word;
  }

  .maybe-item{
    height:auto;
    display:flex;
    align-items:center;
    text-align:left;
  }
  .maybe-thumb{
    width:80px;
    height:60px;
    margin-right:10px;
    flex-shrink:0;
  }
  .maybe-title{
    padding:0;
    text-align:left;
  }

  .top-big-post img{ height:220px; }

  .home-feature{ grid-template-columns:1fr; }
  .home-feature-left .hero-img{ height:220px; }
  .home-grid6{ grid-template-columns:repeat(2,1fr); }

  .md-grid{ grid-template-columns:1fr; }
  .cat-grid4{ grid-template-columns:1fr; }

  .footer-contact-row{
    gap:10px;
    flex-direction:column;
  }
  .site-footer.footer-v2 .footer-brand{
    align-items:center !important;
    text-align:center;
    flex-direction:column;
  }
  .site-footer.footer-v2 .footer-brand-link{
    width:120px;
    margin-bottom:10px;
  }
  .site-footer.footer-v2 .footer-policy-bar{
    flex-direction:column;
    align-items:center;
  }
  .site-footer.footer-v2 .footer-policy-bar .fpol-link{
    width:100%;
    max-width:420px;
    text-align:center;
    white-space:normal;
  }
}

@media (max-width:640px){
  .order-row{ grid-template-columns:1fr; }
}

@media (prefers-reduced-motion: reduce){
  *{ scroll-behavior:auto !important; }
  a,
  .maybe-item,
  #backToTop{
    transition:none !important;
  }
  .btn-download-now{ will-change:auto; }
}
/* =========================================================
   4/5 — POSTSEO / PRODUCT GRID / GALLERY / CTA / AUTHOR / INLINE RELATED
   ========================================================= */

/* ===== POSTSEO LAYOUT ===== */
.postseo-layout--full{
  display:block !important;
  width:100% !important;
}

.postseo-layout--full .postseo-main{
  width:100% !important;
  max-width:100% !important;
}

.postseo-layout--full .postseo-sidebar{
  display:none !important;
}

/* ===== PRODUCT GRID ===== */
.cat-grid-postseos{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:15px;
  margin-bottom:20px;
}

.postseo-item-box{
  display:flex;
  flex-direction:column;
  overflow:hidden;
  text-align:center;
  padding-bottom:12px;
  background:#fff;
  border:1px solid #e1e1e1;
  border-radius:8px;
  transition:all .3s ease;
}

.postseo-item-box:hover{
  transform:translateY(-2px);
  border-color:var(--primary-color) !important;
  box-shadow:0 5px 15px rgba(133,77,7,.15) !important;
}

.postseo-item-box .p-img img{
  width:100%;
  aspect-ratio:1/1;
  display:block;
  object-fit:cover;
  border-bottom:1px solid #f0f0f0;
}

.postseo-item-box .p-name{
  height:38px;
  margin:10px 5px;
  overflow:hidden;
  font-size:13px;
  font-weight:700;
  line-height:1.35;
  color:#333;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
}

.postseo-item-box .p-contact{
  font-size:15px;
  font-weight:800;
  text-transform:uppercase;
  color:var(--primary-color) !important;
}

.postseo-item-box .p-specs{
  display:block;
  overflow:hidden;
  min-height:60px;
  margin:5px 10px 10px;
  padding-top:8px;
  text-align:left;
  font-size:12px;
  line-height:1.5;
  color:#666;
  border-top:1px dashed #eee;
}

/* ===== POSTSEO GALLERY ===== */
.postseo-gallery-reel{
  width:100%;
  position:relative;
  margin-bottom:25px;
  padding:0 10px;
}

.pg-container{
  display:flex;
  align-items:center;
  position:relative;
}

.pg-viewport{
  width:100%;
  overflow:hidden !important;
}

.pg-track{
  display:flex !important;
  gap:15px;
  transition:transform .4s ease;
}

.pg-item{
  flex:0 0 calc(33.333% - 10px);
  overflow:hidden;
  background:#f9f9f9;
  border:1px solid #eee;
  border-radius:12px;
}

.pg-item img{
  width:100%;
  height:350px;
  display:block;
  object-fit:cover;
}

.pg-btn,
.pg-nav{
  color:#fff !important;
  background:var(--primary-color) !important;
}

.pg-btn:hover,
.pg-nav:hover{
  background:var(--secondary-color) !important;
}

.pg-nav{
  position:absolute;
  top:50%;
  z-index:100;
  width:40px;
  height:40px;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  font-size:24px;
  border:none;
  border-radius:50%;
  transform:translateY(-50%);
  box-shadow:0 4px 10px rgba(0,0,0,.2);
}

.pg-prev{ left:-20px; }
.pg-next{ right:-20px; }

/* ===== CTA + ORDER ===== */
.postseo-action-row{
  max-width:980px;
  margin:18px auto 0;
  display:grid;
  grid-template-columns:240px 1fr;
  gap:16px;
  align-items:start;
}

.postseo-cta{
  max-width:820px;
  margin:18px auto 14px;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px;
}

.postseo-cta a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:10px 16px;
  font-size:14px;
  font-weight:800;
  line-height:1;
  border:1px solid transparent;
  border-radius:999px;
  box-shadow:0 8px 22px rgba(0,0,0,.08);
  transition:transform .12s ease, filter .12s ease, background-color .12s ease, border-color .12s ease;
}
.postseo-cta a:hover{
  transform:translateY(-1px);
  filter:brightness(.98);
}
.postseo-cta a:active{ transform:translateY(0); }

.postseo-cta .btn-buy::before{ content:"🛒"; }
.postseo-cta .btn-call::before{ content:"📞"; }
.postseo-cta .btn-zalo::before{ content:"💬"; }

.postseo-cta .btn-buy{
  color:#fff !important;
  background:var(--primary-color) !important;
}
.postseo-cta .btn-call{
  color:var(--primary-color) !important;
  background:#fff;
  border-color:rgba(133,77,7,.45) !important;
}
.postseo-cta .btn-zalo{
  color:#fff;
  background:#0068ff;
}

.postseo-action-row .postseo-cta{
  margin:0;
  max-width:none;
  flex-direction:column;
}

.postseo-action-row .postseo-cta a{
  width:100%;
  padding:12px 14px;
  font-size:14px;
  justify-content:center;
  border-radius:14px;
}

.order-box{
  max-width:820px;
  margin:14px auto 0;
  padding:18px 18px 14px;
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:16px;
  box-shadow:0 10px 26px rgba(0,0,0,.06);
}

.postseo-action-row .order-box{
  margin:0;
  max-width:none;
}

.order-box h2{
  margin:0 0 10px;
  font-size:18px;
  font-weight:900;
  letter-spacing:.2px;
  text-align:center;
  color:#0f172a;
}

.order-msg{
  margin:0 0 12px;
  padding:10px 12px;
  font-weight:700;
  color:var(--secondary-color) !important;
  background:rgba(133,77,7,.08) !important;
  border:1px solid rgba(133,77,7,.24) !important;
  border-radius:12px;
}

.order-box form{
  display:grid;
  gap:10px;
}

.order-box label{
  display:block;
  margin:8px 0 6px;
  font-size:13px;
  font-weight:700;
  color:#334155;
}

.order-box input,
.order-box textarea{
  width:100%;
  display:block;
  padding:10px 12px;
  font-size:14px;
  outline:none;
  background:#fff;
  border:1px solid #e2e8f0;
  border-radius:12px;
  transition:box-shadow .12s ease, border-color .12s ease;
}

.order-box input:focus,
.order-box textarea:focus{
  border-color:var(--primary-color) !important;
  box-shadow:0 0 0 3px rgba(133,77,7,.15) !important;
}

.order-box textarea{
  min-height:92px;
  resize:vertical;
}

.order-box .order-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}

.order-box .btn-submit{
  width:100%;
  margin-top:6px;
  padding:12px 16px;
  font-weight:900;
  color:#fff !important;
  cursor:pointer;
  border:0;
  border-radius:12px;
  background:var(--primary-color) !important;
  box-shadow:0 10px 24px rgba(133,77,7,.18) !important;
}
.order-box .btn-submit:hover{
  background:var(--secondary-color) !important;
}

/* ===== ENTRY META ===== */
.entry-head-meta{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:10px;
  margin:10px 0 22px;
  font-size:15px;
  line-height:1.7;
  text-align:center;
  color:#64748b;
}

.entry-head-meta__item a{
  font-weight:700;
  color:#0056b3 !important;
  text-decoration:none !important;
}

.entry-head-meta__sep{ color:#cbd5e1; }

/* ===== AUTHOR CARD ===== */
.author-card{
  margin:28px 0 22px;
  padding:22px 24px;
  background:#f8fafc;
  border:1px solid #e5e7eb;
  border-radius:22px;
}

.author-card__top{
  display:flex;
  align-items:flex-start;
  gap:18px;
}

.author-card__avatar img{
  width:74px;
  height:74px;
  display:block;
  object-fit:cover;
  background:#e5e7eb;
  border-radius:14px;
}

.author-card__content{
  flex:1;
  min-width:0;
}

.author-card__name-line{
  margin-bottom:10px;
  font-size:15px;
  font-weight:700;
  color:#111827;
}

.author-card__name-line a,
.author-card__name-line span{
  font-weight:800;
  color:#ef4444;
  text-decoration:none;
}

.author-card__bio{
  font-size:15px;
  line-height:1.9;
  color:#334155;
}

.author-card__bottom{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:16px;
  margin-top:18px;
  padding-top:18px;
  border-top:1px solid #e5e7eb;
}

.author-card__cat{
  font-size:15px;
  color:#111827;
}

.author-card__cat a{
  font-weight:700;
  color:#0056b3 !important;
  text-decoration:none !important;
}

.author-card__share{
  display:flex;
  align-items:center;
  gap:12px;
}

.author-card__share .share-btn{
  width:50px;
  height:50px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:#0f172a;
  background:#fff;
  border:1px solid #dbeafe;
  border-radius:999px;
  text-decoration:none;
  transition:all .2s ease;
}
.author-card__share .share-btn:hover{
  transform:translateY(-2px);
  color:#0f172a !important;
  background:#fff !important;
  border-color:#93c5fd;
  box-shadow:0 8px 20px rgba(15,23,42,.08);
}
.author-card__share .share-btn svg{
  width:22px;
  height:22px;
  display:block;
}

/* ===== INLINE RELATED ===== */
.postseo-inline-related{
  margin:22px 0 28px;
  padding:18px 20px;
  text-align:center;
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:14px;
  box-shadow:0 4px 16px rgba(15,23,42,.04);
}

.postseo-inline-related__title{
  position:relative;
  display:inline-block;
  margin:0 auto 14px;
  padding-bottom:6px;
  font-size:22px;
  font-weight:800;
  line-height:1.3;
  text-align:center;
  color:#0f172a;
}

.postseo-inline-related__title::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:0;
  width:100%;
  height:4px;
  border-radius:999px;
  transform:translateX(-50%);
  background:var(--primary-color);
}

.postseo-inline-related__grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px;
  text-align:left;
}

.postseo-inline-related__card{
  height:480px;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  text-decoration:none !important;
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:14px;
  box-shadow:0 4px 14px rgba(15,23,42,.05);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.postseo-inline-related__card,
.postseo-inline-related__card:hover,
.postseo-inline-related__card:focus-visible,
.postseo-inline-related__card *{
  text-decoration:none !important;
}

.postseo-inline-related__card:hover{
  transform:translateY(-3px);
  border-color:var(--primary-color) !important;
  box-shadow:0 10px 24px rgba(133,77,7,.12) !important;
}

.postseo-inline-related__thumb{
  height:250px;
  overflow:hidden;
  background:#f8fafc;
  border-bottom:1px solid #eef2f7;
}

.postseo-inline-related__thumb img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  margin:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
}

.postseo-inline-related__body{
  flex:1;
  min-height:0;
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:14px;
}

.postseo-inline-related__name{
  min-height:70px;
  overflow:hidden;
  font-size:16px;
  font-weight:800;
  line-height:1.45;
  color:#0f172a;
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
}

.postseo-inline-related__desc{
  overflow:hidden;
  font-size:14px;
  line-height:1.7;
  color:#475569;
  display:-webkit-box;
  -webkit-line-clamp:7;
  -webkit-box-orient:vertical;
}

/* ===== RESPONSIVE ===== */
@media (max-width:1200px){
  .postseo-inline-related__grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}

@media (max-width:900px){
  .postseo-inline-related__grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .postseo-inline-related__card{
    height:480px;
  }
}

@media (max-width:768px){
  .cat-grid-postseos{
    grid-template-columns:repeat(2,1fr);
    gap:10px;
  }

  .pg-item{
    flex:0 0 calc(50% - 8px);
  }
  .pg-item img{ height:250px; }
  .pg-nav{
    width:32px;
    height:32px;
  }

  .author-card{
    padding:18px;
    border-radius:18px;
  }
  .author-card__top{ gap:14px; }
  .author-card__avatar img{
    width:60px;
    height:60px;
    border-radius:12px;
  }
  .author-card__bio{
    font-size:14px;
    line-height:1.8;
  }
  .author-card__share .share-btn{
    width:44px;
    height:44px;
  }
}

@media (max-width:560px){
  .postseo-inline-related{
    padding:16px 14px;
  }

  .postseo-inline-related__grid{
    grid-template-columns:1fr;
  }

  .postseo-inline-related__card{
    height:auto;
    min-height:440px;
  }

  .postseo-inline-related__thumb{
    height:220px;
  }

  .postseo-inline-related__title{
    font-size:20px;
  }
}

@media (max-width:480px){
  .pg-item{
    flex:0 0 100%;
  }
}
/* =========================================================
   5/5 — FINISHING OVERRIDES / CLEANUP / SAFETY
   ========================================================= */

/* ===== header / nav safety ===== */
.topbar,
.topbar-inner{
  background:#fff !important;
}

.desktop-nav{
  overflow:visible !important;
}

.desktop-nav .nav-list{
  overflow:visible !important;
  flex-wrap:wrap !important;
}

.desktop-nav .nav-link{
  font-size:13px !important;
  padding:9px 12px !important;
  border-radius:8px;
  color:var(--primary-color) !important;
}

.desktop-nav .nav-link:hover,
.desktop-nav .nav-link:focus-visible{
  color:var(--secondary-color) !important;
  background:rgba(133,77,7,.10) !important;
}

/* ===== mobile menu / drawer hover ===== */
.menu-toggle:hover,
.drawer-close:hover,
.mnav-item:hover,
.mnav-sub-item:hover{
  background:rgba(133,77,7,.10) !important;
}

/* ===== màu chữ trên nền brand ===== */
.dir-header,
.home-feature-right,
.site-footer.footer-v2 .footer-blue,
.site-footer.footer-v2 .footer-copy,
.site-footer.footer-v2 .footer-policy-bar,
#backToTop,
.pg-btn,
.pg-nav,
.postseo-cta .btn-buy,
.order-box .btn-submit,
.toc-fab{
  color:#fff !important;
}

.dir-header a,
.home-feature-right a,
.site-footer.footer-v2 .footer-blue a,
.site-footer.footer-v2 .footer-copy a,
.site-footer.footer-v2 .footer-policy-bar a,
.postseo-cta .btn-buy,
.order-box .btn-submit,
.pg-btn,
.pg-nav,
.toc-fab{
  color:#fff !important;
}

/* ===== nhấn mạnh màu theme ở box/card ===== */
.news-box .box-title,
.grid-box-head .box-title{
  color:var(--primary-color) !important;
  border-bottom-color:var(--secondary-color) !important;
}

.dir-header{
  background:linear-gradient(90deg,var(--primary-color),var(--secondary-color)) !important;
}

.home-feature-right{
  background:linear-gradient(135deg,var(--primary-color),var(--secondary-color)) !important;
}

.btn-download-wrapper{
  background:#fffaf4 !important;
  border-color:var(--primary-color) !important;
}

.post-footer-box{
  background:#fffaf4 !important;
  border-color:#ead7bd !important;
}

.cat-label,
.share-btn{
  color:var(--primary-color) !important;
}

.share-btn{
  border-color:var(--primary-color) !important;
}

.share-btn:hover{
  color:#fff !important;
  background:var(--primary-color) !important;
}

.postseo-inline-related__title::after{
  background:var(--primary-color) !important;
}

/* ===== footer text chắc chắn trắng ===== */
.site-footer.footer-v2 .footer-brand-name,
.site-footer.footer-v2 .footer-value,
.site-footer.footer-v2 .footer-copy,
.site-footer.footer-v2 .footer-contact-item,
.site-footer.footer-v2 .footer-contact-item a,
.site-footer.footer-v2 .footer-text,
.site-footer.footer-v2 .footer-subtext,
.site-footer.footer-v2 .footer-label{
  color:#fff !important;
}

/* ===== mobile bottom nav active ===== */
.mobile-bottom-nav a:active,
.mobile-bottom-nav button:active{
  background:rgba(133,77,7,.08) !important;
}

/* ===== tránh gạch chân tự sinh trong card liên quan ===== */
.postseo-inline-related__card,
.postseo-inline-related__card:hover,
.postseo-inline-related__card:focus-visible,
.postseo-inline-related__card *,
.maybe-item,
.maybe-item:hover,
.maybe-item:focus-visible,
.maybe-item *{
  text-decoration:none !important;
}

/* ===== safety cho search mobile ===== */
@media (max-width:768px){
  .topbar,
  .topbar-inner{
    background:#fff !important;
  }

  .brand img{
    object-fit:contain;
  }

  .search-form{
    border:1px solid var(--primary-color) !important;
  }

  .search-btn{
    border-radius:0 8px 8px 0 !important;
  }
}
/* =========================================================
   HOME PAGE VNIETNHAT — CLEAN VERSION FOR /views/home.php
   Thay toàn bộ block HOME cũ bằng block này
   ========================================================= */

.homepage-vnjn{
  background:linear-gradient(180deg,#f8f6f2 0%, #f3efe8 100%);
}

.homepage-vnjn .home-wrap{
  width:100%;
  max-width:1380px;
  margin:0 auto;
  padding:0 12px;
}

.homepage-vnjn .home-wrap-full{
  width:100%;
  max-width:1380px;
  margin:0 auto;
}

.homepage-vnjn .home-vnjn{
  padding-top:22px;
  padding-bottom:34px;
}

/* ===== HERO ===== */
.homepage-vnjn .home-hero{
  margin:0 auto 26px;
  padding:0 12px;
}

.homepage-vnjn .hero-slider-vnjn{
  position:relative;
  overflow:hidden;
  width:100%;
  background:#fff;
  border:1px solid #eadfce;
  border-radius:24px;
  box-shadow:0 18px 42px rgba(133,77,7,.10);
}

.homepage-vnjn .hero-slider-vnjn__slide{
  position:absolute;
  inset:0;
  opacity:0;
  transform:scale(1.03);
  transition:opacity .45s ease, transform 5s ease;
}

.homepage-vnjn .hero-slider-vnjn__slide.is-active{
  position:relative;
  opacity:1;
  transform:scale(1);
}

.homepage-vnjn .hero-slider-vnjn__slide a,
.homepage-vnjn .hero-slider-vnjn__slide img{
  display:block;
  width:100%;
}

.homepage-vnjn .hero-slider-vnjn__slide img{
  height:min(42vw,560px);
  object-fit:cover;
}

.homepage-vnjn .hero-slider-vnjn__btn{
  position:absolute;
  top:50%;
  z-index:3;
  width:48px;
  height:48px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:0;
  border-radius:999px;
  cursor:pointer;
  color:var(--primary-color);
  background:rgba(255,255,255,.92);
  box-shadow:0 12px 25px rgba(0,0,0,.12);
  transform:translateY(-50%);
  transition:transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}

.homepage-vnjn .hero-slider-vnjn__btn:hover{
  transform:translateY(-50%) scale(1.08);
  background:#fff;
  box-shadow:0 16px 30px rgba(0,0,0,.18);
}

.homepage-vnjn .hero-slider-vnjn__btn.is-prev{ left:16px; }
.homepage-vnjn .hero-slider-vnjn__btn.is-next{ right:16px; }

.homepage-vnjn .hero-slider-vnjn__dots{
  position:absolute;
  left:0;
  right:0;
  bottom:16px;
  z-index:3;
  display:flex;
  justify-content:center;
  gap:8px;
}

.homepage-vnjn .hero-slider-vnjn__dot{
  width:10px;
  height:10px;
  padding:0;
  border:0;
  cursor:pointer;
  border-radius:999px;
  background:rgba(255,255,255,.55);
  transition:width .18s ease, background-color .18s ease;
}

.homepage-vnjn .hero-slider-vnjn__dot.is-active{
  width:28px;
  background:#fff;
}

/* ===== SECTION COMMON ===== */
.homepage-vnjn .home-block{
  margin:0 0 42px;
}

.homepage-vnjn .home-block__head{
  display:flex;
  align-items:center;
  gap:16px;
  flex-wrap:wrap;
  margin:0 0 22px;
}

.homepage-vnjn .home-block__title{
  display:flex;
  align-items:center;
  gap:12px;
  margin:0;
  line-height:1;
  flex:0 0 auto;
}

.homepage-vnjn .home-block__title a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 22px;
  font-size:24px;
  font-weight:900;
  color:#fff !important;
  background:linear-gradient(135deg,var(--primary-color),var(--secondary-color));
  border-radius:18px;
}

.homepage-vnjn .home-block__title a:hover{
  color:#fff !important;
}

.homepage-vnjn .home-block__desc{
  flex:0 0 100%;
  margin:10px 0 0;
  font-size:14px;
  line-height:1.8;
  color:#64748b;
}

/* ===== PRODUCT GRID ===== */
.homepage-vnjn .home-product-grid{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:16px;
}

.homepage-vnjn .home-product-card{
  min-width:0;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  background:#fff;
  border:1px solid #eadfce;
  border-radius:18px;
  box-shadow:0 10px 26px rgba(133,77,7,.06);
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.homepage-vnjn .home-product-card:hover{
  transform:translateY(-4px);
  border-color:rgba(133,77,7,.25);
  box-shadow:0 18px 36px rgba(133,77,7,.12);
}

.homepage-vnjn .home-product-card__thumb{
  display:block;
  overflow:hidden;
  background:#f8fafc;
  border-bottom:1px solid #f1e8dc;
}

.homepage-vnjn .home-product-card__thumb img{
  width:100%;
  height:210px;
  display:block;
  object-fit:cover;
  transform:scale(1);
  transition:transform .55s ease;
}

.homepage-vnjn .home-product-card:hover .home-product-card__thumb img{
  transform:scale(1.06);
}

.homepage-vnjn .home-product-card__body{
  flex:1;
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:14px;
}

.homepage-vnjn .home-product-card__title{
  min-height:48px;
  margin:0;
  font-size:16px;
  line-height:1.45;
  font-weight:800;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.homepage-vnjn .home-product-card__title a{
  color:#0f172a !important;
}

.homepage-vnjn .home-product-card__title a:hover{
  color:var(--primary-color) !important;
}

.homepage-vnjn .home-product-card__desc{
  flex:1;
  overflow:hidden;
  font-size:14px;
  line-height:1.75;
  color:#475569;
  display:-webkit-box;
  -webkit-line-clamp:5;
  -webkit-box-orient:vertical;
}

.homepage-vnjn .home-product-card__actions{
  margin-top:auto;
}

.homepage-vnjn .home-product-card__actions a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  padding:10px 14px;
  font-size:14px;
  font-weight:800;
  color:#fff !important;
  background:var(--primary-color);
  border-radius:12px;
}

.homepage-vnjn .home-product-card__actions a:hover{
  background:var(--secondary-color);
}

.homepage-vnjn .home-empty{
  grid-column:1/-1;
  padding:16px 18px;
  font-size:14px;
  color:#64748b;
  background:#fffaf4;
  border:1px dashed #e7d7bf;
  border-radius:16px;
}

/* ===== BLOG / NEWS MAGAZINE ===== */
.homepage-vnjn .news-magazine{
  overflow:hidden;
  background:#fff;
  border:1px solid #eadfce;
  border-radius:22px;
  box-shadow:0 16px 36px rgba(133,77,7,.08);
}

.homepage-vnjn .news-magazine__top{
  display:grid;
  grid-template-columns:minmax(0,1.75fr) 390px;
  gap:0;
}

.homepage-vnjn .news-magazine__hero{
  background:#fff;
  transition:transform .22s ease, box-shadow .22s ease;
}

.homepage-vnjn .news-magazine__hero:hover{
  transform:translateY(-4px);
}

.homepage-vnjn .news-magazine__hero-thumb{
  display:block;
  overflow:hidden;
}

.homepage-vnjn .news-magazine__hero-thumb img{
  width:100%;
  height:395px;
  display:block;
  object-fit:cover;
  transform:scale(1);
  transition:transform .7s ease;
}

.homepage-vnjn .news-magazine__hero:hover .news-magazine__hero-thumb img{
  transform:scale(1.06);
}

.homepage-vnjn .news-magazine__hero-body{
  padding:18px 18px 16px;
}

.homepage-vnjn .news-magazine__hero-body h3{
  margin:0 0 10px;
  font-size:21px;
  line-height:1.4;
  font-weight:900;
}

.homepage-vnjn .news-magazine__hero-body h3 a{
  color:var(--primary-color) !important;
}

.homepage-vnjn .news-magazine__hero-body h3 a:hover{
  color:var(--secondary-color) !important;
}

.homepage-vnjn .news-magazine__hero-body p{
  margin:0;
  font-size:14px;
  line-height:1.82;
  color:#475569;
  display:-webkit-box;
  -webkit-line-clamp:6;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.homepage-vnjn .news-magazine__side{
  padding:12px;
  background:linear-gradient(180deg,#fffaf4 0%, #f7efe4 100%);
  border-left:1px solid #eadfce;
}

.homepage-vnjn .news-side-item{
  display:grid;
  grid-template-columns:108px 1fr;
  gap:10px;
  padding:10px;
  margin-bottom:10px;
  background:#fff;
  border:1px solid #eadfce;
  border-radius:14px;
  box-shadow:0 6px 16px rgba(133,77,7,.06);
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease, background-color .22s ease;
}

.homepage-vnjn .news-side-item:last-child{
  margin-bottom:0;
}

.homepage-vnjn .news-side-item:hover{
  transform:translateY(-3px);
  background:#fffaf4;
  border-color:rgba(133,77,7,.26);
  box-shadow:0 12px 24px rgba(133,77,7,.12);
}

.homepage-vnjn .news-side-item__thumb{
  display:block;
  overflow:hidden;
  border-radius:10px;
}

.homepage-vnjn .news-side-item__thumb img{
  width:100%;
  height:64px;
  display:block;
  object-fit:cover;
  transform:scale(1);
  transition:transform .55s ease;
}

.homepage-vnjn .news-side-item:hover .news-side-item__thumb img{
  transform:scale(1.06);
}

.homepage-vnjn .news-side-item__body h3{
  margin:0;
  overflow:hidden;
  font-size:15px;
  line-height:1.45;
  font-weight:800;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
}

.homepage-vnjn .news-side-item__body h3 a{
  color:var(--primary-color) !important;
}

.homepage-vnjn .news-side-item__body h3 a:hover{
  color:var(--secondary-color) !important;
}

.homepage-vnjn .news-magazine__bottom{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:0;
  background:#fffaf4;
  border-top:1px solid #eadfce;
}

.homepage-vnjn .news-mini-card{
  min-width:0;
  display:flex;
  flex-direction:column;
  background:#fff;
  border-right:1px solid #eee6da;
  transition:transform .22s ease;
}

.homepage-vnjn .news-mini-card:last-child{
  border-right:none;
}

.homepage-vnjn .news-mini-card:hover{
  transform:translateY(-3px);
}

.homepage-vnjn .news-mini-card__thumb{
  display:block;
  overflow:hidden;
}

.homepage-vnjn .news-mini-card__thumb img{
  width:100%;
  height:116px;
  display:block;
  object-fit:cover;
  transform:scale(1);
  transition:transform .55s ease;
}

.homepage-vnjn .news-mini-card:hover .news-mini-card__thumb img{
  transform:scale(1.06);
}

.homepage-vnjn .news-mini-card__body{
  padding:12px 12px 16px;
}

.homepage-vnjn .news-mini-card__body h3{
  margin:0;
  overflow:hidden;
  font-size:15px;
  line-height:1.5;
  font-weight:800;
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
}

.homepage-vnjn .news-mini-card__body h3 a{
  color:#111827 !important;
}

.homepage-vnjn .news-mini-card__body h3 a:hover{
  color:var(--primary-color) !important;
}

/* ===== WHY / CONSULT SECTION ===== */
.homepage-vnjn .whyhc-wrap{
  margin:0 0 42px;
}

.homepage-vnjn .whyhc-box{
  background:#fff;
  border:1px solid #eadfce;
  border-radius:24px;
  box-shadow:0 16px 36px rgba(133,77,7,.08);
  overflow:hidden;
}

.homepage-vnjn .whyhc-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
}

.homepage-vnjn .whyhc-left{
  padding:26px;
  background:linear-gradient(180deg,#fff 0%, #fffaf4 100%);
  border-right:1px solid #efe5d7;
}

.homepage-vnjn .whyhc-contact-card{
  height:100%;
}

.homepage-vnjn .whyhc-eyebrow{
  margin:0 0 10px;
  font-size:15px;
  line-height:1.3;
  font-weight:800;
  text-transform:uppercase;
  color:var(--primary-color);
  letter-spacing:.3px;
}

.homepage-vnjn .whyhc-contact-title{
  margin:0 0 12px;
  font-size:30px;
  line-height:1.28;
  font-weight:600;
  color:#0f172a;
}

.homepage-vnjn .whyhc-contact-desc{
  margin:0 0 18px;
  font-size:15px;
  line-height:1.85;
  color:#475569;
}

.homepage-vnjn .whyhc-form-wrap{
  margin-bottom:14px;
}

/* form shortcode */
.homepage-vnjn .whyhc-form-wrap .nv-form{
  padding:0 !important;
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
}

.homepage-vnjn .whyhc-form-wrap .nv-grid{
  gap:16px !important;
}

.homepage-vnjn .whyhc-form-wrap .nv-col{
  grid-column:span 12 !important;
}

.homepage-vnjn .whyhc-form-wrap .nv-label{
  margin:0 0 6px !important;
  font-size:14px !important;
  font-weight:700 !important;
  color:#6b7280 !important;
}

.homepage-vnjn .whyhc-form-wrap .nv-input,
.homepage-vnjn .whyhc-form-wrap .nv-textarea,
.homepage-vnjn .whyhc-form-wrap .nv-select{
  padding:12px 0 !important;
  font-size:16px !important;
  color:#111827 !important;
  background:transparent !important;
  border:0 !important;
  border-bottom:2px solid rgba(133,77,7,.16) !important;
  border-radius:0 !important;
  box-shadow:none !important;
}

.homepage-vnjn .whyhc-form-wrap .nv-input:focus,
.homepage-vnjn .whyhc-form-wrap .nv-textarea:focus,
.homepage-vnjn .whyhc-form-wrap .nv-select:focus{
  border-bottom-color:var(--primary-color) !important;
  box-shadow:none !important;
}

.homepage-vnjn .whyhc-form-wrap .nv-textarea{
  min-height:110px !important;
  resize:vertical;
}

.homepage-vnjn .whyhc-form-wrap .nv-btn{
  min-width:180px;
  padding:14px 22px !important;
  border-radius:12px !important;
  background:var(--primary-color) !important;
  color:#fff !important;
  font-size:15px !important;
  font-weight:800 !important;
  box-shadow:0 12px 24px rgba(133,77,7,.20) !important;
}

.homepage-vnjn .whyhc-form-wrap .nv-btn:hover{
  background:var(--secondary-color) !important;
}

.homepage-vnjn .whyhc-contact-note{
  font-size:13px;
  line-height:1.7;
  color:#64748b;
}

.homepage-vnjn .whyhc-right{
  padding:26px;
  background:linear-gradient(180deg,#fffaf4 0%, #f7efe4 100%);
}

.homepage-vnjn .whyhc-right h2{
  margin:0 0 12px;
  font-size:28px;
  line-height:1.3;
  font-weight:600;
  color:var(--primary-color);
}

.homepage-vnjn .whyhc-sub p{
  margin:0 0 16px;
  font-size:15px;
  line-height:1.8;
  color:#475569;
}

.homepage-vnjn .whyhc-table{
  width:100%;
  margin:0 0 18px;
  border-collapse:collapse;
  overflow:hidden;
  background:#fff;
  border:1px solid #eadfce;
  border-radius:16px;
}

.homepage-vnjn .whyhc-table th,
.homepage-vnjn .whyhc-table td{
  padding:12px 14px;
  font-size:14px;
  line-height:1.7;
  text-align:left;
  vertical-align:top;
  border:1px solid #efe5d7;
}

.homepage-vnjn .whyhc-table th{
  font-weight:800;
  color:#fff;
  background:linear-gradient(135deg,var(--primary-color),var(--secondary-color));
}

.homepage-vnjn .whyhc-kpis{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
}

.homepage-vnjn .whyhc-kpi{
  padding:16px 12px;
  text-align:center;
  background:#fff;
  border:1px solid #eadfce;
  border-radius:16px;
  box-shadow:0 8px 18px rgba(133,77,7,.06);
}

.homepage-vnjn .whyhc-kpi b{
  display:block;
  margin-bottom:4px;
  font-size:24px;
  line-height:1.1;
  color:var(--primary-color);
}

.homepage-vnjn .whyhc-kpi span{
  display:block;
  font-size:13px;
  line-height:1.6;
  color:#475569;
}

/* ===== FAQ ===== */
.homepage-vnjn .home-faq-section{
  padding:10px 0 34px;
}

.homepage-vnjn .home-faq-wrap{
  width:100%;
  max-width:1380px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
}

.homepage-vnjn .home-faq-subtitle{
  width:max-content;
  max-width:100%;
  margin:0 auto 6px;
  position:relative;
  text-align:center;
  font-size:18px;
  line-height:1.3;
  font-weight:500;
  color:#2f3c4d;
}

.homepage-vnjn .home-faq-subtitle::after{
  content:"";
  display:block;
  width:100%;
  height:2px;
  margin:4px auto 0;
  background:var(--primary-color);
  opacity:.9;
}

.homepage-vnjn .home-faq-grid{
  width:100%;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:38px;
  row-gap:18px;
  align-items:start;
}

.homepage-vnjn .home-faq-col{
  display:flex;
  flex-direction:column;
  gap:18px;
  min-width:0;
}

.homepage-vnjn .home-faq-item{
  background:#fff;
  border:1px solid #eadfce;
  border-radius:18px;
  box-shadow:0 8px 20px rgba(133,77,7,.05);
  overflow:hidden;
}

.homepage-vnjn .home-faq-question{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:18px 20px;
  text-align:left;
  cursor:pointer;
  background:#fff;
  border:0;
}

.homepage-vnjn .home-faq-question__icon{
  flex:0 0 auto;
  min-width:22px;
  text-align:center;
  font-size:28px;
  line-height:1;
  font-weight:400;
  color:var(--primary-color);
}

.homepage-vnjn .home-faq-answer{
  padding:0 20px 18px;
}

.homepage-vnjn .home-faq-answer__inner{
  padding-top:4px;
  font-size:15px;
  line-height:1.9;
  color:#2f3c4d;
  border-top:1px solid #f1e8dc;
}

.homepage-vnjn .home-faq-answer__inner p{
  margin:0 0 12px;
}

.homepage-vnjn .home-faq-answer__inner ul{
  margin:10px 0 0 18px;
  padding-left:18px;
}

.homepage-vnjn .home-faq-answer__inner li{
  margin:0 0 8px;
}

.homepage-vnjn .home-faq-item:not(.is-open) .home-faq-answer{
  display:none;
}

.homepage-vnjn .home-faq-question:hover .home-faq-question__text,
.homepage-vnjn .home-faq-question:hover .home-faq-question__icon{
  color:var(--secondary-color);
}

/* ===== ANIMATION ===== */
.homepage-vnjn .home-anim{
  opacity:0;
  transition:opacity .8s ease, transform .8s cubic-bezier(.2,.8,.2,1), filter .8s ease;
  will-change:transform, opacity;
}

.homepage-vnjn .home-zoom-in{
  transform:scale(.96);
  filter:blur(2px);
}

.homepage-vnjn .home-zoom-up{
  transform:translateY(28px) scale(.98);
  filter:blur(2px);
}

.homepage-vnjn .home-zoom-card{
  transform:translateY(22px) scale(.98);
  filter:blur(1.5px);
}

.homepage-vnjn .home-anim.is-inview{
  opacity:1;
  transform:none;
  filter:none;
}

/* ===== RESPONSIVE ===== */
@media (max-width:1280px){
  .homepage-vnjn .home-product-grid{
    grid-template-columns:repeat(4,minmax(0,1fr));
  }

  .homepage-vnjn .news-magazine__top{
    grid-template-columns:minmax(0,1.55fr) 340px;
  }
}

@media (max-width:1080px){
  .homepage-vnjn .home-product-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }

  .homepage-vnjn .news-magazine__top{
    grid-template-columns:1fr;
  }

  .homepage-vnjn .news-magazine__side{
    border-left:0;
    border-top:1px solid #eadfce;
  }

  .homepage-vnjn .news-magazine__bottom{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }

  .homepage-vnjn .whyhc-grid{
    grid-template-columns:1fr;
  }

  .homepage-vnjn .whyhc-left{
    border-right:0;
    border-bottom:1px solid #efe5d7;
  }

  .homepage-vnjn .home-faq-grid{
    grid-template-columns:1fr;
    column-gap:0;
  }
}

@media (max-width:768px){
  .homepage-vnjn .home-wrap,
  .homepage-vnjn .home-wrap-full,
  .homepage-vnjn .home-hero{
    padding-left:10px;
    padding-right:10px;
  }

  .homepage-vnjn .home-vnjn{
    padding-top:16px;
    padding-bottom:26px;
  }

  .homepage-vnjn .hero-slider-vnjn{
    border-radius:16px;
  }

  .homepage-vnjn .hero-slider-vnjn__slide img{
    height:auto;
    min-height:230px;
    max-height:360px;
  }

  .homepage-vnjn .hero-slider-vnjn__btn{
    width:38px;
    height:38px;
  }

  .homepage-vnjn .home-block{
    margin-bottom:28px;
  }

  .homepage-vnjn .home-block__title a{
    font-size:20px;
    padding:12px 14px;
    border-radius:16px;
    text-align:center;
  }

  .homepage-vnjn .home-product-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
  }

  .homepage-vnjn .home-product-card__thumb img{
    height:180px;
  }

  .homepage-vnjn .home-product-card__title{
    min-height:44px;
    font-size:15px;
  }

  .homepage-vnjn .home-product-card__desc{
    font-size:13px;
    -webkit-line-clamp:5;
  }

  .homepage-vnjn .news-magazine{
    border-radius:16px;
  }

  .homepage-vnjn .news-magazine__hero-thumb img{
    height:265px;
  }

  .homepage-vnjn .news-magazine__hero-body h3{
    font-size:18px;
  }

  .homepage-vnjn .news-magazine__bottom{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .homepage-vnjn .news-mini-card:nth-child(2n){
    border-right:none;
  }

  .homepage-vnjn .whyhc-left,
  .homepage-vnjn .whyhc-right{
    padding:18px;
  }

  .homepage-vnjn .whyhc-contact-title,
  .homepage-vnjn .whyhc-right h2{
    font-size:23px;
    line-height:1.35;
  }

  .homepage-vnjn .whyhc-kpis{
    grid-template-columns:1fr;
  }

  .homepage-vnjn .whyhc-form-wrap .nv-btn{
    width:100%;
    min-width:0;
  }

  .homepage-vnjn .home-faq-section{
    padding:6px 0 26px;
  }

  .homepage-vnjn .home-faq-title{
    margin-bottom:20px;
    font-size:24px;
  }

  .homepage-vnjn .home-faq-question{
    padding:16px;
  }

  .homepage-vnjn .home-faq-question__text{
    font-size:17px;
  }

  .homepage-vnjn .home-faq-answer{
    padding:0 16px 16px;
  }

  .homepage-vnjn .home-faq-answer__inner{
    font-size:14px;
    line-height:1.8;
  }
}

@media (max-width:520px){
  .homepage-vnjn .home-product-grid{
    grid-template-columns:1fr;
  }

  .homepage-vnjn .news-side-item{
    grid-template-columns:95px 1fr;
  }

  .homepage-vnjn .news-side-item__thumb img{
    height:58px;
  }

  .homepage-vnjn .news-magazine__bottom{
    grid-template-columns:1fr;
  }

  .homepage-vnjn .news-mini-card{
    border-right:none;
    border-bottom:1px solid #eee6da;
  }

  .homepage-vnjn .news-mini-card:last-child{
    border-bottom:none;
  }
}

@media (prefers-reduced-motion: reduce){
  .homepage-vnjn .home-anim,
  .homepage-vnjn .hero-slider-vnjn__slide,
  .homepage-vnjn .hero-slider-vnjn__btn,
  .homepage-vnjn .home-product-card,
  .homepage-vnjn .news-magazine__hero,
  .homepage-vnjn .news-side-item,
  .homepage-vnjn .news-mini-card,
  .homepage-vnjn .home-product-card__thumb img,
  .homepage-vnjn .news-magazine__hero-thumb img,
  .homepage-vnjn .news-side-item__thumb img,
  .homepage-vnjn .news-mini-card__thumb img{
    transition:none !important;
    transform:none !important;
    filter:none !important;
  }
}
/* ===== HOME PATCH FIX ===== */
.homepage-vnjn .home-card-hover{
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.homepage-vnjn .news-magazine.home-card-hover:hover{
  transform:translateY(-4px);
  box-shadow:0 20px 40px rgba(133,77,7,.12);
}

.homepage-vnjn .home-block__title{
  flex-wrap:wrap;
}

.homepage-vnjn .home-block__title a{
  max-width:100%;
  text-align:center;
}

.homepage-vnjn .hero-slider-vnjn__slide img{
  aspect-ratio:1380 / 560;
}

.homepage-vnjn .whyhc-form-wrap .home-empty{
  grid-column:auto;
  margin:0;
}

.homepage-vnjn .whyhc-table{
  border-collapse:separate;
  border-spacing:0;
  overflow:hidden;
}

.homepage-vnjn .whyhc-table thead th:first-child{
  border-top-left-radius:16px;
}

.homepage-vnjn .whyhc-table thead th:last-child{
  border-top-right-radius:16px;
}

.homepage-vnjn .whyhc-table tbody tr:last-child td:first-child{
  border-bottom-left-radius:16px;
}

.homepage-vnjn .whyhc-table tbody tr:last-child td:last-child{
  border-bottom-right-radius:16px;
}

.homepage-vnjn .whyhc-table td,
.homepage-vnjn .whyhc-table th{
  word-break:break-word;
}

.homepage-vnjn .home-product-card__actions a{
  width:100%;
}

@media (max-width:768px){
  .homepage-vnjn .hero-slider-vnjn__slide img{
    aspect-ratio:16 / 9;
  }

  .homepage-vnjn .whyhc-table{
    display:block;
    overflow-x:auto;
    white-space:nowrap;
  }

  .homepage-vnjn .whyhc-table th,
  .homepage-vnjn .whyhc-table td{
    min-width:180px;
    white-space:normal;
  }
}
/* =========================================================
   BAO GIA NHANH / PRODUCT FORM FIXED
   ========================================================= */

.quote-action-row{
  max-width:1180px;
  margin:18px auto 0;
  display:flex !important;
  flex-direction:column !important;
  gap:16px;
  align-items:stretch;
}

.quote-action-row,
.quote-action-row *{
  box-sizing:border-box;
  min-width:0;
}

/* ===== 3 nút trên cùng ===== */
.quote-action-row .quote-cta{
  margin:0 !important;
  max-width:none !important;
  display:grid !important;
  grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
  gap:12px;
  align-items:stretch;
}

.quote-action-row .quote-cta a{
  width:100% !important;
  min-height:48px;
  padding:13px 16px !important;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border-radius:14px !important;
  font-size:15px;
  font-weight:800;
  line-height:1.2;
  text-align:center;
  white-space:nowrap;
}

.quote-action-row .quote-cta .btn-buy{
  background:var(--primary-color) !important;
  color:#fff !important;
  border:1px solid var(--primary-color) !important;
}

.quote-action-row .quote-cta .btn-call{
  background:#fff !important;
  color:var(--primary-color) !important;
  border:1px solid rgba(133,77,7,.35) !important;
}

.quote-action-row .quote-cta .btn-zalo{
  background:#0a68ff !important;
  color:#fff !important;
  border:1px solid #0a68ff !important;
}

/* ===== khung form ===== */
.order-box--quote{
  width:100%;
  max-width:none;
  margin:0 !important;
  padding:20px;
  overflow:hidden;
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:18px;
  box-shadow:0 10px 26px rgba(0,0,0,.06);
}

.order-box--quote h2{
  margin:0 0 16px;
  font-size:22px;
  font-weight:900;
  line-height:1.3;
  text-align:center;
  text-transform:uppercase;
  color:#0f172a;
}

.quote-msg{
  margin:0 0 14px;
  padding:12px 14px;
  border-radius:12px;
  font-size:14px;
  font-weight:700;
}

.quote-msg--ok{
  color:#065f46;
  background:#ecfdf5;
  border:1px solid #a7f3d0;
}

.quote-msg--bad{
  color:#991b1b;
  background:#fef2f2;
  border:1px solid #fecaca;
}

.quote-form{
  display:grid;
  gap:14px;
}

/* ===== các hàng ===== */
.quote-row-4,
.quote-row-spec,
.quote-row-note{
  display:grid;
  gap:14px;
  align-items:end;
}

/* hàng 1 */
.quote-row-4{
  grid-template-columns:repeat(4, minmax(0, 1fr));
}

/* hàng 2: tải trọng | quy cách | đơn vị | địa chỉ */
.quote-row-spec{
  grid-template-columns:minmax(0,1.15fr) minmax(0,0.9fr) 110px minmax(0,1.75fr);
}

/* hàng 3: ghi chú | nút gửi */
.quote-row-note{
  grid-template-columns:minmax(0,1fr) 220px;
}

/* ===== field ===== */
.quote-field label{
  display:block;
  margin:0 0 6px;
  font-size:13px;
  font-weight:700;
  color:#334155;
}

.quote-field input,
.quote-field select{
  width:100%;
  max-width:100%;
  min-width:0;
  height:48px;
  display:block;
  padding:0 14px;
  font-size:15px;
  color:#0f172a;
  background:#fff;
  border:1px solid #dbe3eb;
  border-radius:14px;
  outline:none;
  box-shadow:none;
}

.quote-field input:focus,
.quote-field select:focus{
  border-color:var(--primary-color);
  box-shadow:0 0 0 3px rgba(133,77,7,.12);
}

/* số lượng = input + đơn vị */
.quote-combo{
  display:grid;
  grid-template-columns:minmax(0,1fr) 110px;
  gap:10px;
}

.quote-field--unit select{
  text-transform:uppercase;
}

.quote-field--note input{
  width:100% !important;
}

.quote-submit-wrap{
  display:flex;
  align-items:end;
}

.quote-submit-wrap .btn-submit,
.order-box--quote .btn-submit{
  width:100%;
  height:48px;
  margin-top:0;
  padding:0 16px;
  border:0;
  border-radius:14px;
  font-size:16px;
  font-weight:900;
  text-transform:uppercase;
  color:#fff !important;
  background:var(--primary-color) !important;
  box-shadow:0 10px 24px rgba(133,77,7,.18);
}

.quote-submit-wrap .btn-submit:hover,
.order-box--quote .btn-submit:hover{
  background:var(--secondary-color) !important;
}

.quote-captcha-wrap{
  width:100%;
  overflow:hidden;
}

/* ===== responsive ===== */
@media (max-width:1100px){
  .quote-row-4,
  .quote-row-spec{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}

@media (max-width:768px){
  .quote-action-row .quote-cta{
    grid-template-columns:1fr !important;
  }

  .quote-row-4,
  .quote-row-spec,
  .quote-row-note{
    grid-template-columns:1fr;
  }

  .quote-combo{
    grid-template-columns:1fr;
  }

  .order-box--quote{
    padding:16px;
    border-radius:16px;
  }

  .order-box--quote h2{
    font-size:18px;
    line-height:1.4;
  }

  .quote-action-row .quote-cta a{
    min-height:46px;
    padding:12px 14px !important;
    white-space:normal;
  }

  .quote-field input,
  .quote-field select,
  .quote-submit-wrap .btn-submit,
  .order-box--quote .btn-submit{
    height:46px;
    font-size:14px;
  }
}
/* =========================================================
   TOC SCROLL + NUT MO MUC LUC TREN SCROLL
   GIU TOC SCROLL, THEM NUT MO DRAWER O TREN
   - FIX: dua ca cum TOC len sat header
   ========================================================= */

:root{
  --toc-fixed-top: calc(var(--sticky-top) + 8px);
  --toc-toggle-size: 40px;
  --toc-toggle-gap: 10px;
}

body.toc-open{
  overflow:hidden;
}

/* ===== TOC SCROLL (desktop) ===== */
.toc-dots{
  position:fixed;
  right:calc(18px + env(safe-area-inset-right, 0px));
  top:calc(var(--toc-fixed-top) + var(--toc-toggle-size) + var(--toc-toggle-gap));
  transform:none;
  z-index:12080;

  padding:10px 8px;
  border-radius:999px;
  background:rgba(255,255,255,.88);
  border:1px solid rgba(133,77,7,.18);
  box-shadow:0 14px 34px rgba(133,77,7,.20);
  backdrop-filter:blur(6px);

  max-height:calc(
    100vh - (
      var(--toc-fixed-top) +
      var(--toc-toggle-size) +
      var(--toc-toggle-gap) +
      20px
    )
  );
  overflow-y:auto;
  overflow-x:hidden;
  scrollbar-width:none;
}

.toc-dots::-webkit-scrollbar{
  display:none;
}

.toc-dots .toc-box{
  border:0 !important;
  background:transparent !important;
  padding:8px !important;
  margin:0 !important;
  box-shadow:none !important;
}

.toc-dots .toc-title{
  display:none !important;
}

.toc-dots .toc-item-lv-3{
  display:none !important;
}

.toc-dots .toc-body ul{
  list-style:none !important;
  padding:0 !important;
  margin:0 !important;
  display:flex;
  flex-direction:column;
  gap:12px;
}

.toc-dots .toc-link{
  width:14px;
  height:14px;
  display:block;
  border-radius:999px;
  border:2px solid rgba(133,77,7,.70);
  background:rgba(133,77,7,.22);
  box-shadow:
    0 0 0 4px rgba(255,255,255,.97),
    0 8px 18px rgba(133,77,7,.22);
  font-size:0;
  line-height:0;
  color:transparent;
  transform:scale(1);
  transition:
    transform .12s ease,
    background-color .12s ease,
    border-color .12s ease,
    box-shadow .12s ease;
}

.toc-dots .toc-link:hover{
  transform:scale(1.25);
  background:var(--primary-color);
  border-color:var(--primary-color);
  box-shadow:
    0 0 0 4px rgba(255,255,255,.98),
    0 0 0 10px rgba(133,77,7,.18),
    0 14px 28px rgba(133,77,7,.28);
}

.toc-dots .toc-link.is-active{
  transform:scale(1.35);
  background:var(--primary-color);
  border-color:var(--primary-color);
  box-shadow:
    0 0 0 4px rgba(255,255,255,.98),
    0 0 0 12px rgba(133,77,7,.22),
    0 16px 34px rgba(133,77,7,.32);
}

.toc-dots .toc-link:focus-visible{
  outline:3px solid rgba(133,77,7,.30);
  outline-offset:4px;
}

/* ===== NUT MO MUC LUC TREN TOC SCROLL ===== */
.toc-scroll-toggle{
  position:fixed;
  right:calc(18px + env(safe-area-inset-right, 0px));
  top:var(--toc-fixed-top);
  z-index:12081;

  width:var(--toc-toggle-size);
  height:var(--toc-toggle-size);
  display:none;
  align-items:center;
  justify-content:center;

  border:1px solid rgba(133,77,7,.35);
  border-radius:10px;
  background:#fff;
  color:var(--primary-color);
  box-shadow:0 10px 24px rgba(133,77,7,.16);
  cursor:pointer;

  transition:
    transform .15s ease,
    background-color .15s ease,
    color .15s ease,
    box-shadow .15s ease;
}

.toc-scroll-toggle:hover{
  transform:translateY(-2px);
  background:var(--primary-color);
  color:#fff;
  box-shadow:0 14px 30px rgba(133,77,7,.24);
}

.toc-scroll-toggle:focus-visible{
  outline:3px solid rgba(133,77,7,.28);
  outline-offset:3px;
}

/* ===== hien thi desktop / mobile ===== */
@media (min-width:901px){
  .toc-dots{
    display:block !important;
  }

  .toc-scroll-toggle{
    display:flex !important;
  }

  .toc-fab{
    display:none !important;
  }

  .toc-backdrop{
    display:block !important;
    background:rgba(15,23,42,.18) !important;
  }

  .toc-drawer{
    display:flex !important;
    right:-340px !important;
    width:330px;
    max-width:86vw;
    height:100vh;
  }

  .toc-drawer.open{
    right:0 !important;
  }
}

@media (max-width:900px){
  .toc-dots{
    display:none !important;
  }

  .toc-scroll-toggle{
    display:none !important;
  }

  .toc-fab{
    display:flex !important;
  }
}
/* =========================================================
   FIX MOBILE MENU + FAQ HOME
   DÁN Ở CUỐI style.css
   ========================================================= */

/* ===== FIX MENU MOBILE ===== */
@media (max-width:768px){
  /* Ẩn hẳn menu desktop trên mobile */
  .main-nav,
  .desktop-nav,
  .topbar .nav-list{
    display:none !important;
  }

  /* Chỉ còn 3 phần tử: logo - search - hamburger */
  .topbar-inner{
    display:grid !important;
    grid-template-columns:auto minmax(0,1fr) auto !important;
    align-items:center !important;
    gap:10px !important;
    padding:8px 10px !important;
    min-height:auto !important;
  }

  .brand{
    grid-column:1;
    min-width:0 !important;
    margin:0 !important;
  }

  .search-wrap{
    grid-column:2;
    width:100% !important;
    min-width:0 !important;
    margin:0 !important;
  }

  .menu-toggle{
    grid-column:3;
    display:flex !important;
    align-items:center;
    justify-content:center;
    width:38px !important;
    height:38px !important;
    margin:0 !important;
  }

  /* Search mobile gọn và không bị tràn */
  .search-form{
    width:100% !important;
    max-width:100% !important;
    height:38px !important;
    display:flex !important;
    align-items:center !important;
    background:#fff !important;
    border:1px solid var(--primary-color) !important;
    border-radius:10px !important;
    overflow:hidden !important;
    box-shadow:none !important;
  }

  .search-input{
    width:100% !important;
    min-width:0 !important;
    height:100% !important;
    padding:0 10px !important;
    opacity:1 !important;
    display:block !important;
    pointer-events:auto !important;
    font-size:14px !important;
    background:#fff !important;
  }

  .search-btn{
    width:40px !important;
    min-width:40px !important;
    height:100% !important;
    border-radius:0 !important;
    border-left:1px solid rgba(255,255,255,.15) !important;
    flex-shrink:0;
  }

  .brand img{
    max-width:120px !important;
    max-height:38px !important;
    width:auto !important;
    height:auto !important;
    object-fit:contain !important;
  }

  /* Drawer luôn nằm trên cùng và không bị lệch */
  .mobile-drawer{
    top:0 !important;
    right:-340px !important;
    width:340px !important;
    max-width:86vw !important;
    height:100dvh !important;
    padding:14px !important;
    overflow:auto !important;
  }

  .mobile-drawer.open{
    right:0 !important;
  }

  .drawer-backdrop{
    inset:0 !important;
  }

  /* Item menu mobile dễ bấm hơn */
  .mnav{
    gap:8px !important;
  }

  .mnav-item,
  .mnav-summary,
  .mnav-sub-item{
    font-size:14px !important;
    line-height:1.4 !important;
  }
}

/* ===== FIX FAQ HOME ===== */
.homepage-vnjn .home-faq-section{
  width:100%;
}

.homepage-vnjn .home-faq-wrap{
  width:100%;
  max-width:1380px;
  margin:0 auto;
}

.homepage-vnjn .home-faq-grid{
  width:100%;
  align-items:start;
}

.homepage-vnjn .home-faq-item{
  background:#fff;
  border:1px solid #eadfce;
  border-radius:18px;
  box-shadow:0 8px 20px rgba(133,77,7,.05);
  overflow:hidden;
  transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.homepage-vnjn .home-faq-item.is-open{
  border-color:rgba(133,77,7,.28);
  box-shadow:0 14px 28px rgba(133,77,7,.10);
}

.homepage-vnjn .home-faq-question{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:18px 20px;
  text-align:left;
  cursor:pointer;
  appearance:none;
  -webkit-appearance:none;
  background:#fff;
  border:0;
}

.homepage-vnjn .home-faq-item.is-open .home-faq-question{
  background:#fffaf4;
}

.homepage-vnjn .home-faq-question__text{
  flex:1;
  min-width:0;
  display:block;
  font-size:18px;
  line-height:1.55;
  font-weight:500;
  color:var(--primary-color);
}

.homepage-vnjn .home-faq-question__icon{
  flex:0 0 24px;
  width:24px;
  min-width:24px;
  text-align:center;
  font-size:28px;
  line-height:1;
  font-weight:400;
  color:var(--primary-color);
}

.homepage-vnjn .home-faq-answer{
  padding:0 20px 18px;
}

.homepage-vnjn .home-faq-answer[hidden]{
  display:none !important;
}

.homepage-vnjn .home-faq-answer__inner{
  padding-top:14px;
  border-top:1px solid #f1e8dc;
  font-size:15px;
  line-height:1.9;
  color:#2f3c4d;
  text-align:left;
}

.homepage-vnjn .home-faq-question:hover .home-faq-question__text,
.homepage-vnjn .home-faq-question:hover .home-faq-question__icon{
  color:var(--secondary-color);
}

@media (max-width:1080px){
  .homepage-vnjn .home-faq-grid{
    grid-template-columns:1fr !important;
    column-gap:0 !important;
  }
}

@media (max-width:768px){
  .homepage-vnjn .home-faq-section{
    padding:6px 0 26px;
  }

  .homepage-vnjn .home-faq-wrap{
    padding:0 10px;
  }

  .homepage-vnjn .home-faq-title{
    margin-bottom:20px;
    font-size:24px;
    line-height:1.2;
  }

  .homepage-vnjn .home-faq-subtitle{
    font-size:16px;
  }

  .homepage-vnjn .home-faq-col{
    gap:14px;
  }

  .homepage-vnjn .home-faq-item{
    border-radius:16px;
  }

  .homepage-vnjn .home-faq-question{
    padding:15px 16px;
    gap:10px;
  }

  .homepage-vnjn .home-faq-question__text{
    font-size:16px;
    line-height:1.5;
  }

  .homepage-vnjn .home-faq-question__icon{
    font-size:24px;
    flex-basis:20px;
    width:20px;
    min-width:20px;
  }

  .homepage-vnjn .home-faq-answer{
    padding:0 16px 16px;
  }

  .homepage-vnjn .home-faq-answer__inner{
    padding-top:12px;
    font-size:14px;
    line-height:1.8;
  }
}
/* =========================================================
   FAQ HOME — STYLE MỎNG, VIỀN THEO THEME WEB
   DÁN Ở CUỐI style.css
   ========================================================= */

.homepage-vnjn .home-faq-section{
  padding:16px 0 34px;
}

.homepage-vnjn .home-faq-wrap{
  width:100%;
  max-width:1380px;
  margin:0 auto;
}

.homepage-vnjn .home-faq-subtitle{
  width:max-content;
  max-width:100%;
  margin:0 auto 8px;
  text-align:center;
  font-size:18px;
  line-height:1.3;
  font-weight:500;
  color:#4b5563;
}

.homepage-vnjn .home-faq-title{
  margin:0 auto 28px;
  text-align:center;
  font-size:28px;
  line-height:1.2;
  font-weight:600;
  text-transform:uppercase;
  color:var(--primary-color);
}

.homepage-vnjn .home-faq-grid{
  width:100%;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:36px;
  row-gap:16px;
  align-items:start;
}

.homepage-vnjn .home-faq-col{
  display:flex;
  flex-direction:column;
  gap:16px;
  min-width:0;
}

/* item bỏ card trắng + shadow cũ */
.homepage-vnjn .home-faq-item{
  position:relative;
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  overflow:visible !important;
}

/* chỉ giữ viền dưới giống layout ảnh */
.homepage-vnjn .home-faq-question{
  position:relative;
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:0 0 14px;
  text-align:left;
  cursor:pointer;
  appearance:none;
  -webkit-appearance:none;
  background:transparent !important;
  border:0 !important;
  border-bottom:2px solid rgba(133,77,7,.72) !important;
  border-radius:0 0 18px 18px !important;
  box-shadow:none !important;
}

/* bo cong nhe o duoi ben trai/phai giống kiểu ảnh */
.homepage-vnjn .home-faq-question::before,
.homepage-vnjn .home-faq-question::after{
  content:"";
  position:absolute;
  bottom:-2px;
  width:18px;
  height:18px;
  pointer-events:none;
}

.homepage-vnjn .home-faq-question::before{
  left:0;
  border-left:1.5px solid rgba(133,77,7,.72);
  border-bottom:2px solid rgba(133,77,7,.72);
  border-bottom-left-radius:18px;
}

.homepage-vnjn .home-faq-question::after{
  right:0;
  border-right:1.5px solid rgba(133,77,7,.72);
  border-bottom:2px solid rgba(133,77,7,.72);
  border-bottom-right-radius:18px;
}

.homepage-vnjn .home-faq-question__text{
  flex:1;
  min-width:0;
  display:block;
  font-size:17px;
  line-height:1.5;
  font-weight:500;
  color:var(--primary-color) !important;
}

.homepage-vnjn .home-faq-question__icon{
  flex:0 0 22px;
  width:22px;
  min-width:22px;
  text-align:center;
  font-size:30px;
  line-height:1;
  font-weight:400;
  color:var(--primary-color) !important;
}

/* mở ra thì chỉ đổi màu nhẹ, không thành card */
.homepage-vnjn .home-faq-item.is-open .home-faq-question{
  border-bottom-color:var(--secondary-color) !important;
}

.homepage-vnjn .home-faq-item.is-open .home-faq-question::before{
  border-left-color:var(--secondary-color);
  border-bottom-color:var(--secondary-color);
}

.homepage-vnjn .home-faq-item.is-open .home-faq-question::after{
  border-right-color:var(--secondary-color);
  border-bottom-color:var(--secondary-color);
}

.homepage-vnjn .home-faq-item.is-open .home-faq-question__text,
.homepage-vnjn .home-faq-item.is-open .home-faq-question__icon{
  color:var(--secondary-color) !important;
}

.homepage-vnjn .home-faq-answer{
  padding:14px 0 0 !important;
  background:transparent !important;
}

.homepage-vnjn .home-faq-answer[hidden]{
  display:none !important;
}

.homepage-vnjn .home-faq-answer__inner{
  padding:0 0 10px !important;
  font-size:15px;
  line-height:1.9;
  color:#374151;
  border-top:0 !important;
}

.homepage-vnjn .home-faq-answer__inner p{
  margin:0 0 12px;
}

.homepage-vnjn .home-faq-answer__inner ul{
  margin:8px 0 0 18px;
  padding-left:18px;
}

.homepage-vnjn .home-faq-answer__inner li{
  margin:0 0 8px;
}

.homepage-vnjn .home-faq-question:hover .home-faq-question__text,
.homepage-vnjn .home-faq-question:hover .home-faq-question__icon{
  color:var(--secondary-color) !important;
}

.homepage-vnjn .home-faq-question:focus-visible{
  outline:none;
}

@media (max-width:1080px){
  .homepage-vnjn .home-faq-grid{
    grid-template-columns:1fr !important;
    column-gap:0 !important;
  }
}

@media (max-width:768px){
  .homepage-vnjn .home-faq-section{
    padding:8px 0 24px;
  }

  .homepage-vnjn .home-faq-wrap{
    padding:0 10px;
  }

  .homepage-vnjn .home-faq-title{
    margin-bottom:22px;
    font-size:24px;
  }

  .homepage-vnjn .home-faq-subtitle{
    font-size:16px;
  }

  .homepage-vnjn .home-faq-col{
    gap:14px;
  }

  .homepage-vnjn .home-faq-question{
    padding:0 0 12px;
  }

  .homepage-vnjn .home-faq-question__text{
    font-size:16px;
    line-height:1.45;
  }

  .homepage-vnjn .home-faq-question__icon{
    font-size:24px;
    flex-basis:18px;
    width:18px;
    min-width:18px;
  }

  .homepage-vnjn .home-faq-answer{
    padding-top:12px !important;
  }

  .homepage-vnjn .home-faq-answer__inner{
    font-size:14px;
    line-height:1.8;
  }
}
/* =========================================================
   FIX LINE SÁT NGAY DƯỚI BO TIÊU ĐỀ SECTION HOME
   DÁN Ở CUỐI style.css
   ========================================================= */

.homepage-vnjn .home-block__head{
  display:grid !important;
  grid-template-columns:max-content 1fr;
  grid-template-rows:auto auto;
  align-items:end;
  column-gap:0;
  row-gap:10px;
  position:relative;
  margin:0 0 22px !important;
}

/* line nằm cùng hàng với title, bám đúng đáy */
.homepage-vnjn .home-block__head::after{
  content:"";
  grid-column:1 / -1;
  grid-row:1;
  align-self:end;
  height:2px;
  margin-left:12px; /* thụt vào nhẹ cho đẹp phần bo trái */
  background:var(--primary-color);
  border-radius:999px;
  z-index:1;
}

/* title đè lên line */
.homepage-vnjn .home-block__title{
  grid-column:1;
  grid-row:1;
  position:relative;
  z-index:2;
  display:inline-flex !important;
  align-items:center;
  margin:0 !important;
  line-height:1;
}

.homepage-vnjn .home-block__title a{
  position:relative;
  z-index:2;
}

.homepage-vnjn .home-block__desc{
  grid-column:1 / -1;
  grid-row:2;
  margin:0 !important;
  position:relative;
  z-index:2;
}

/* mobile */
@media (max-width:768px){
  .homepage-vnjn .home-block__head{
    row-gap:8px;
    margin:0 0 18px !important;
  }
}
/* =========================================================
   FIX NEN HOME TRUNG NEN HEADER
   DÁN Ở CUỐI style.css
   ========================================================= */

body{
  background:#fff !important;
}

.homepage-vnjn{
  background:#fff !important;
}

/* nếu muốn các mảng nền phụ trong home cũng trắng theo */
.homepage-vnjn .news-magazine__side,
.homepage-vnjn .news-magazine__bottom,
.homepage-vnjn .whyhc-left,
.homepage-vnjn .whyhc-right,
.homepage-vnjn .home-empty{
  background:#fff !important;
}
/* =========================================================
   HOVER ZOOM ANH HOME
   DÁN Ở CUỐI style.css
   ========================================================= */

.homepage-vnjn .hero-slider-vnjn,
.homepage-vnjn .home-product-card__thumb,
.homepage-vnjn .news-magazine__hero-thumb,
.homepage-vnjn .news-side-item__thumb,
.homepage-vnjn .news-mini-card__thumb,
.postseo-item-box .p-img,
.pg-item,
.postseo-inline-related__thumb,
.maybe-thumb{
  overflow:hidden;
}

.homepage-vnjn .hero-slider-vnjn__slide img,
.homepage-vnjn .home-product-card__thumb img,
.homepage-vnjn .news-magazine__hero-thumb img,
.homepage-vnjn .news-side-item__thumb img,
.homepage-vnjn .news-mini-card__thumb img,
.postseo-item-box .p-img img,
.pg-item img,
.postseo-inline-related__thumb img,
.maybe-thumb img{
  transform:scale(1);
  transition:transform .65s cubic-bezier(.2,.8,.2,1), filter .35s ease;
  will-change:transform;
}

/* hover mạnh hơn một chút */
.homepage-vnjn .hero-slider-vnjn__slide.is-active:hover img,
.homepage-vnjn .home-product-card:hover .home-product-card__thumb img,
.homepage-vnjn .news-magazine__hero:hover .news-magazine__hero-thumb img,
.homepage-vnjn .news-side-item:hover .news-side-item__thumb img,
.homepage-vnjn .news-mini-card:hover .news-mini-card__thumb img,
.postseo-item-box:hover .p-img img,
.pg-item:hover img,
.postseo-inline-related__card:hover .postseo-inline-related__thumb img,
.maybe-item:hover .maybe-thumb img{
  transform:scale(1.1);
}
.homepage-vnjn .home-block,
.homepage-vnjn .whyhc-wrap,
.homepage-vnjn .home-faq-section{
  content-visibility:auto;
  contain-intrinsic-size:1px 900px;
}
.homepage-vnjn .hero-slider-vnjn__slide img{
  aspect-ratio:1380 / 560;
  height:auto;
}

.homepage-vnjn .home-product-card__thumb img{
  aspect-ratio:900 / 680;
  height:auto;
}

.homepage-vnjn .news-magazine__hero-thumb img,
.homepage-vnjn .news-side-item__thumb img,
.homepage-vnjn .news-mini-card__thumb img{
  height:auto;
}
/* ===== FIX BREADCRUMB ĐẦU POST ===== */
.breadcrumb{
  margin:0 0 16px !important;
  padding:0 !important;
  font-size:13px !important;
  line-height:1.6 !important;
  color:#64748b !important;
  text-transform:none !important;
  border:0 !important;
  background:none !important;
}

.breadcrumb .breadcrumb-list{
  display:flex !important;
  flex-wrap:wrap !important;
  align-items:center !important;
  gap:0 !important;
  margin:0 !important;
  padding:0 !important;
  list-style:none !important;
  counter-reset:none !important;
  border:0 !important;
  background:none !important;
}

.breadcrumb .breadcrumb-item{
  position:static !important;
  display:flex !important;
  align-items:center !important;
  margin:0 !important;
  padding:0 !important;
  list-style:none !important;
  border:0 !important;
  background:none !important;
}

.breadcrumb .breadcrumb-item::before,
.breadcrumb .breadcrumb-item::after,
.breadcrumb .breadcrumb-list::before,
.breadcrumb .breadcrumb-list::after{
  content:none !important;
  display:none !important;
  border:0 !important;
  background:none !important;
  box-shadow:none !important;
}

.breadcrumb .breadcrumb-item + .breadcrumb-item::before{
  content:"/" !important;
  display:inline-block !important;
  margin:0 8px !important;
  color:#94a3b8 !important;
}

.breadcrumb a{
  color:var(--primary-color) !important;
  font-weight:700 !important;
  text-decoration:none !important;
}

.breadcrumb a:hover{
  color:var(--secondary-color) !important;
}

.breadcrumb span{
  color:#475569 !important;
  font-weight:600 !important;
}
/* ===== CATEGORY PAGE ONLY ===== */
.cat-wrap{padding:22px;}
.cat-head{margin:12px 0 16px;}
.cat-head h1{margin:0;font-size:24px;font-weight:600;color:#0f172a;}
.cat-head p{margin:8px 0 0;color:#475569;font-size:14px;line-height:1.7;}

/* TOP: left big + right 4 */
.cat-feature{
  display:grid;
  grid-template-columns:2fr 1fr;
  gap:14px;
  margin-top:14px;
}
.cat-hero{
  background:#fff;
  border:1px solid #eee;
  border-radius:12px;
  overflow:hidden;
}
.cat-hero img{
  width:100%;
  height:360px;
  object-fit:cover;
  display:block;
  background:#eee;
}
.cat-hero .t{
  padding:12px 14px;
  font-weight:600;
  font-size:20px;
  line-height:1.25;
  color:#111;
}
.cat-hero .ex{
  padding:0 14px 14px;
  color:#334155;
  font-size:14px;
  line-height:1.6;
}

.cat-right{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
.cat-mcard{
  background:#fff;
  border:1px solid #eee;
  border-radius:12px;
  overflow:hidden;
  display:block;
}
.cat-mcard img{
  width:100%;
  height:120px;
  object-fit:cover;
  display:block;
  background:#eee;
}
.cat-mcard .t{
  padding:10px 10px 12px;
  font-weight:600;
  font-size:13px;
  line-height:1.35;
  color:#111;
}

/* MID: 6 cards */
.cat-grid6{
  display:grid;
  grid-template-columns:repeat(6, 1fr);
  gap:12px;
  margin:14px 0 18px;
}
.cat-scard{
  background:#fff;
  border:1px solid #eee;
  border-radius:12px;
  overflow:hidden;
  display:block;
}
.cat-scard img{
  width:100%;
  height:90px;
  object-fit:cover;
  display:block;
  background:#eee;
}
.cat-scard .t{
  padding:10px;
  font-weight:600;
  font-size:13px;
  line-height:1.35;
  color:#111;
}

/* BOTTOM: 3 columns */
.cat-cols-row{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:14px;
  margin:0 0 14px;
}
.cat-col{
  background:#fff;
  border:1px solid #eee;
  border-radius:12px;
  padding:10px;
}
.cat-row-item{
  display:flex;
  gap:10px;
  align-items:center;
  padding:8px;
  border-radius:10px;
}
.cat-row-item:hover{background:#f8fafc;}
.cat-row-item img{
  width:80px;
  height:60px;
  object-fit:cover;
  border-radius:8px;
  background:#eee;
  flex-shrink:0;
}
.cat-row-title{
  font-weight:800;
  font-size:14px;
  line-height:1.35;
  color:#0f172a;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.load-more-wrap{
  display:flex;
  justify-content:center;
  margin:16px 0 8px;
}
.btn-more{
  padding:10px 16px;
  border:1px solid #e5e7eb;
  border-radius:12px;
  background:#fff;
  font-weight:600;
  cursor:pointer;
}
.btn-more[disabled]{
  opacity:.6;
  cursor:not-allowed;
}

.cat-long{
  margin-top:18px;
  padding-top:18px;
  border-top:1px solid #eef2f7;
}
.cat-long-title{
  font-size:18px;
  font-weight:700;
  color:#0f172a;
  margin:0 0 12px;
  text-transform:uppercase;
}
.cat-long-body{
  font-size:16px;
  color:#334155;
}
.cat-long-body img{
  max-width:100%;
  height:auto;
}


/* =========================================================
   CATEGORY PRODUCT CARD - ĐỒNG BỘ TOÀN BỘ DANH MỤC SẢN PHẨM
   DÁN Ở CUỐI style.css
   ========================================================= */

.cat-grid-postseos--uniform{
  display:grid !important;
  grid-template-columns:repeat(5, minmax(0, 1fr)) !important;
  gap:16px !important;
  margin:0 0 18px !important;
}

.cat-uniform-card{
  height:480px;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  background:#fff;
  border:1px solid #eadfce;
  border-radius:18px;
  box-shadow:0 10px 26px rgba(133,77,7,.06);
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.cat-uniform-card:hover{
  transform:translateY(-4px);
  border-color:rgba(133,77,7,.25);
  box-shadow:0 18px 36px rgba(133,77,7,.12);
}

.cat-uniform-card__thumb{
  overflow:hidden;
  background:#f8fafc;
  border-bottom:1px solid #f1e8dc;
}

.cat-uniform-card__thumb img{
  width:100%;
  height:210px;
  display:block;
  object-fit:cover;
  transform:scale(1);
  transition:transform .55s ease;
}

.cat-uniform-card:hover .cat-uniform-card__thumb img{
  transform:scale(1.06);
}

.cat-uniform-card__body{
  flex:1;
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:14px;
  min-height:0;
}

.cat-uniform-card__title{
  margin:0;
  min-height:46px;
  overflow:hidden;
  font-size:16px;
  line-height:1.45;
  font-weight:800;
  color:#0f172a;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
}

.cat-uniform-card__desc{
  flex:1;
  overflow:hidden;
  font-size:14px;
  line-height:1.75;
  color:#475569;
  display:-webkit-box;
  -webkit-line-clamp:5;
  -webkit-box-orient:vertical;
}

.cat-uniform-card__btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:100%;
  min-height:42px;
  margin-top:auto;
  padding:10px 14px;
  font-size:14px;
  font-weight:800;
  color:#fff;
  background:var(--primary-color);
  border-radius:12px;
}

.cat-uniform-card:hover .cat-uniform-card__btn{
  background:var(--secondary-color);
}

/* responsive */
@media (max-width:1280px){
  .cat-grid-postseos--uniform{
    grid-template-columns:repeat(4, minmax(0, 1fr)) !important;
  }
}

@media (max-width:1080px){
  .cat-grid-postseos--uniform{
    grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width:768px){
  .cat-grid-postseos--uniform{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    gap:12px !important;
  }

  .cat-uniform-card{
    height:460px;
  }

  .cat-uniform-card__thumb img{
    height:180px;
  }

  .cat-uniform-card__title{
    font-size:15px;
    min-height:42px;
  }

  .cat-uniform-card__desc{
    font-size:13px;
    -webkit-line-clamp:5;
  }
}

@media (max-width:520px){
  .cat-grid-postseos--uniform{
    grid-template-columns:1fr !important;
  }

  .cat-uniform-card{
    height:auto;
    min-height:420px;
  }
}
/* ===== FIX MENU CHOP CHOP / VO SUBMENU ===== */
.topbar .nav-list,
.desktop-nav .nav-list{
  flex-wrap: nowrap !important;
}

.has-sub{
  position: relative;
}

.submenu{
  top: 100% !important;
  left: 0 !important;
  margin-top: 0 !important;
  opacity: 0;
  visibility: hidden;
  transform: none !important;
  pointer-events: none;
  transition: opacity .15s ease !important;
}

.has-sub:hover > .submenu,
.has-sub:focus-within > .submenu,
.has-sub.is-open > .submenu{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}