/* ==========================================================================
   VP-THEME — Design system VINAPUMP JSC (thay toan bo CSS theme cu)
   Cau truc hien dai, de hieu, tai dung cho du an sau:
     01 Tokens (light + dark)   02 Base        03 Typography
     04 Buttons                 05 Forms       06 Utilities
     07 Header/Nav              08 Page title + Breadcrumb   09 Pagination
     10 Hero + Sections         11 Cards       12 Grid/List views
     13 Detail + Sidebar        14 Comments (Finder-style)   15 CTA
     16 Footer + Toolbar        17 Search modal + Offcanvas   18 Swiper
     19 Contact/Static misc     20 Dark mode   21 Responsive
   Font duy nhat: Be Vietnam Pro (local woff2, du dau Viet).
   ========================================================================== */

/* ---------- 01. TOKENS ---------- */
:root {
  --vp-navy: #003E70;
  --vp-navy-deep: #002A4E;
  --vp-navy-soft: #0B5A9C;
  --vp-blue: #0060B0;
  --vp-blue-dark: #004A8A;
  --vp-sky: #E8F1F8;
  --vp-bg: #FFFFFF;
  --vp-bg-soft: #F4F7FB;
  --vp-card: #FFFFFF;
  --vp-text: #3E4756;
  --vp-heading: #003E70;
  --vp-muted: #6D7686;
  --vp-line: #E0E6EE;
  --vp-primary: #0060B0;
  --vp-radius: 12px;
  --vp-shadow: 0 8px 32px rgba(10, 44, 95, .10);
  --vp-font: 'Inter', 'Be Vietnam Pro', Arial, Helvetica, sans-serif;
  --organic-primary: #003E70;
  --organic-bg: #F4F7FB;
}
[data-bs-theme="dark"] {
  --vp-bg: #0B1526;
  --vp-bg-soft: #0E1A2F;
  --vp-card: #111E33;
  --vp-text: #C3CFE2;
  --vp-heading: #FFFFFF;
  --vp-muted: #8FA1B9;
  --vp-line: #20314E;
  --vp-sky: #14263F;
  --vp-shadow: 0 8px 32px rgba(0, 0, 0, .45);
  --organic-bg: #0B1526;
}

/* ---------- 02. BASE ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--vp-bg); color: var(--vp-text); font-family: var(--vp-font); font-size: 14px; line-height: 1.7; -webkit-font-smoothing: antialiased; }
body, button, input, select, textarea, .tf-btn, .vp-btn { font-family: var(--vp-font); }
/* Guard: moi chu dung font co dau Viet (tru icon + phan trang swiper) */
body *:not(i):not([class*="icon"]):not([class*="swiper-pagination"]) { font-family: var(--vp-font) !important; }
img { max-width: 100%; height: auto; }
a { color: var(--vp-blue); text-decoration: none; }
a:hover { color: var(--vp-blue-dark); }
a.link { color: inherit; }
a.link:hover { color: var(--vp-blue); }
ul, ol { margin: 0; padding: 0; }
::selection { background: var(--vp-blue); color: #fff; }

/* ---------- 03. TYPOGRAPHY ---------- */
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6,
.vp-section-title, .vp-hero h1, .vp-cta h2, .mz-h-title,
.name-product, .entry_name, .title-page, .footer-heading,
.tp-ff-heading { font-family: var(--vp-font) !important; font-weight: 700; line-height: 1.3; color: var(--vp-heading); margin-top: 0; }
h1, .h1 { font-size: clamp(28px, 4vw, 32px); }
h2, .h2 { font-size: clamp(24px, 3.2vw, 25px); }
h3, .h3 { font-size: clamp(19px, 2.4vw, 24px); }
h4, .h4 { font-size: 18px; }
h5, .h5 { font-size: 16px; }
h6, .h6 { font-size: 15px; }
p { margin: 0 0 16px; }
.text-justify { text-align: justify; }
.fw-medium, .fw-500 { font-weight: 500; }
.fw-semibold { font-weight: 600; }
.fw-bold { font-weight: 700; }
.fs-13 { font-size: 13px; }
.fs-15 { font-size: 15px; }
.fs-17 { font-size: 17px; }
.fs-18 { font-size: 18px; }
.fs-20 { font-size: 20px; }
.fs-25 { font-size: 25px; }
.fs-32 { font-size: 32px; }
.fs-42 { font-size: 42px; }
@media (max-width: 991px) { .fs-lg-36 { font-size: 36px; } }
@media (max-width: 575px) { .fs-xs-32 { font-size: 32px; } }

/* ---------- 04. BUTTONS ---------- */
.vp-btn, .tf-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-weight: 600; font-size: 13px; line-height: 1; letter-spacing: .04em;
  padding: 14px 26px; border-radius: 10px; border: 1px solid transparent;
  cursor: pointer; text-decoration: none; transition: all .2s; white-space: nowrap;
}
.vp-btn-primary, .tf-btn.animate-btn {
  background: var(--vp-blue); border-color: var(--vp-blue); color: #fff;
}
.vp-btn-primary:hover, .tf-btn.animate-btn:hover { background: var(--vp-blue-dark); border-color: var(--vp-blue-dark); color: #fff; }
.vp-btn-outline, .tf-btn.style-line, .tf-btn-line {
  background: transparent; border-color: var(--vp-blue); color: var(--vp-blue);
}
.vp-btn-outline:hover, .tf-btn.style-line:hover { background: var(--vp-blue); color: #fff; }
.vp-btn-white { background: #fff; border-color: #fff; color: var(--vp-navy); }
.vp-btn-white:hover { background: var(--vp-sky); color: var(--vp-navy); }
.vp-btn-sm { padding: 10px 18px; font-size: .85rem; border-radius: 8px; }
.vp-btn + .vp-btn, .vp-btn + .tf-btn, .tf-btn + .vp-btn { margin-left: 10px; }
button.is-loading, .vp-btn.is-loading { opacity: .6; pointer-events: none; }
.vp-circle-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--vp-navy); color: #fff; transition: all .2s;
}
.vp-circle-btn:hover { background: var(--vp-blue); color: #fff; transform: translateX(3px); }
.vp-link-more { display: inline-flex; align-items: center; gap: 6px; font-size: .88rem; font-weight: 600; color: var(--vp-blue); transition: gap .2s; }
.vp-link-more:hover { gap: 10px; color: var(--vp-blue-dark); }
.btn-link, .readmore-btn, .mz-readmore { font-weight: 600; color: var(--vp-blue); }
.tf-btn-link { font-weight: 600; color: var(--vp-blue); }

/* ---------- 05. FORMS ---------- */
label, .form-label { display: block; font-weight: 600; font-size: .92rem; color: var(--vp-heading); margin-bottom: 8px; }
.form-control, .form-select, input[type="text"], input[type="email"], input[type="tel"],
input[type="number"], input[type="search"], select, textarea, .tp-input, .form-search input {
  display: block; width: 100%; padding: 10px 14px; font-size: .9rem; line-height: 1.5;
  color: var(--vp-text); background: var(--vp-bg); border: 1px solid var(--vp-line);
  border-radius: 8px; transition: border-color .2s, box-shadow .2s;
}
.form-control::placeholder, input::placeholder, textarea::placeholder { color: #9AA3B2; opacity: 1; }
.form-control:focus, input:focus, select:focus, textarea:focus, .tp-input:focus {
  outline: 0; border-color: var(--vp-blue); box-shadow: 0 0 0 3px rgba(30, 127, 224, .15);
}
textarea, .tp-textarea { min-height: 130px; resize: vertical; }
.tp-postbox-details-input { margin-bottom: 20px; }
.form-error-msg { color: #D33; font-size: .9rem; margin-top: 10px; }
.form-ok-msg { color: #1A8917; font-size: .9rem; margin-top: 10px; }
.form-check-input:checked { background-color: var(--vp-blue); border-color: var(--vp-blue); }

/* ---------- 06. UTILITIES ---------- */
.fit-cover { width: 100%; height: 100%; object-fit: cover; }
img.lazyload { background: var(--vp-bg-soft); }
.p-relative, .position-relative { position: relative; }
.z-index-1 { z-index: 1; }
.text-line-clamp-2, .title_lines-2 {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.mb-10 { margin-bottom: 10px; }
.mb-15 { margin-bottom: 15px; }
.mb-20 { margin-bottom: 20px; }
.mb-25 { margin-bottom: 25px; }
.mb-30 { margin-bottom: 30px; }
.mb-40 { margin-bottom: 40px; }
.mb-50 { margin-bottom: 50px; }
.mt-15 { margin-top: 15px; }
.mt-30 { margin-top: 30px; }
.pt-60 { padding-top: 60px; }
.pt-65 { padding-top: 65px; }
.pt-150 { padding-top: 150px; }
.flat-spacing { padding: 48px 0; }
.flat-spacing-2, .flat-spacing-3 { padding: 48px 0; }
.hover-img4 img, .hover-img img { transition: transform .35s; }
.hover-img4:hover img, .hover-img:hover img { transform: scale(1.05); }
.blog-image { overflow: hidden; border-radius: var(--vp-radius) var(--vp-radius) 0 0; background: var(--vp-bg-soft); }
.blog-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.img-style4 { display: block; }
.entry_image { display: block; }
.loading { position: fixed; inset: 0; z-index: 9999; display: none; align-items: center; justify-content: center; background: rgba(255, 255, 255, .7); }
[data-bs-theme="dark"] .loading { background: rgba(11, 21, 38, .7); }

/* ---------- 07. HEADER / NAV ---------- */
.vp-header { background: var(--vp-card); box-shadow: 0 2px 18px rgba(10, 44, 95, .10); position: sticky; top: 0; z-index: 50; }
.vp-header .row { min-height: 78px; }
.logo-img { max-height: 72px; width: auto; }
.logo-footer-img { filter: brightness(0) invert(1); max-height: 104px; width: auto; }
.vp-logo-footer { display: block; margin-bottom: 20px; }
.vp-nav { display: flex; align-items: center; justify-content: center; gap: 4px; list-style: none; margin: 0; padding: 0; }
.vp-nav .menu-item { position: relative; }
.vp-nav .menu-item > .item-link { display: inline-flex; align-items: center; gap: 5px; padding: 12px 9px; font-weight: 500; font-size: .825rem; color: #333d4c; text-transform: uppercase; transition: color .18s ease; }
.vp-nav .menu-item > .item-link:hover, .vp-nav .menu-item > .item-link:focus { color: var(--vp-blue); }
.vp-nav .menu-item > .item-link.active, .vp-nav .menu-item.active > .item-link { color: var(--vp-blue); }
.vp-nav .item-link .icon-caret-down { font-size: .75em; transition: transform .25s ease; }
.vp-nav .menu-item:hover .icon-caret-down { transform: rotate(180deg); }
.vp-nav .sub-menu { position: absolute; top: 100%; left: 0; min-width: 230px; background: var(--vp-card); border: 1px solid var(--vp-line); border-radius: .75rem; box-shadow: var(--vp-shadow); padding: 8px; opacity: 0; visibility: hidden; transform: translateY(8px); transition: all .2s; z-index: 60; }
.vp-nav .menu-item:hover .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.vp-nav .sub-menu_list { list-style: none; margin: 0; padding: 0; }
.vp-nav .sub-menu_link { display: block; padding: 10px 14px; font-size: .88rem; font-weight: 500; color: var(--vp-text); border-radius: 6px; transition: color .18s ease, background-color .18s ease; }
.vp-nav .sub-menu_link:hover { background: var(--vp-bg-soft); color: var(--vp-blue); }
.vp-nav .sub-menu_link.active { color: var(--vp-blue); }
[data-bs-theme="dark"] .vp-nav .menu-item > .item-link { color: #c3cfe2; }
[data-bs-theme="dark"] .vp-nav .menu-item > .item-link:hover, [data-bs-theme="dark"] .vp-nav .menu-item > .item-link.active, [data-bs-theme="dark"] .vp-nav .menu-item.active > .item-link, [data-bs-theme="dark"] .vp-nav .sub-menu_link.active { color: #fff; }
[data-bs-theme="dark"] .vp-nav .sub-menu_link:hover { background: #1a2332; }
.nav-icon-list { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; }
.nav-icon-item { line-height: 1; }
.nav-icon-item > i, .nav-icon-item > svg { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; font-size: 20px; line-height: 1; }
.nav-icon-item { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border: 0; border-radius: 0; color: var(--vp-heading); background: transparent; cursor: pointer; }
.nav-icon-item:hover { color: var(--vp-blue); }
/* Nut toggle sang/toi don kieu Zentic (1 nut, 2 icon sun/moon) */
[data-vp-theme-toggle] svg { transition: transform .3s ease, opacity .3s ease; }
[data-vp-theme-toggle]:hover svg { transform: rotate(20deg) scale(1.1); }
[data-vp-theme-toggle][aria-pressed="true"] { color: var(--vp-blue); }
[data-bs-theme="dark"] .nav-icon-item { border: 0; }
/* Chuyen theme muot nhu mau: bat transition mau toan trang trong luc toggle */
html.vp-theme-anim, html.vp-theme-anim *, html.vp-theme-anim *::before, html.vp-theme-anim *::after {
  transition: background-color .45s ease, color .45s ease, border-color .45s ease, box-shadow .45s ease, fill .45s ease, stroke .45s ease !important;
}
@media (prefers-reduced-motion: reduce) {
  html.vp-theme-anim, html.vp-theme-anim *, html.vp-theme-anim *::before, html.vp-theme-anim *::after { transition: none !important; }
}
/* Theme dropdown (Finder-style) */
.vp-theme-dropdown .nav-icon-item { background: none; border: 1px solid var(--vp-line); }
.vp-theme-menu { min-width: 11rem; padding: 6px; }
.vp-theme-menu .dropdown-item { display: flex; align-items: center; border-radius: 6px; font-size: .9rem; padding: 8px 10px; color: var(--vp-text); }
.vp-theme-menu .dropdown-item:hover { background: var(--vp-sky); }
.vp-theme-menu .dropdown-item.active { background: var(--vp-sky); color: var(--vp-navy); font-weight: 600; }
.vp-theme-menu .dropdown-item .vp-theme-check { display: none; }
.vp-theme-menu .dropdown-item.active .vp-theme-check { display: inline-block; }

/* ---------- 08. PAGE TITLE + BREADCRUMB (Finder) ---------- */
.vp-page-head { padding: 24px 0 0; }
.vp-page-head nav[aria-label="breadcrumb"] { padding-bottom: 8px; }
@media (min-width: 576px) { .vp-page-head nav[aria-label="breadcrumb"] { padding-bottom: 16px; } }
@media (min-width: 992px) { .vp-page-head nav[aria-label="breadcrumb"] { padding-bottom: 24px; } }
.vp-page-head .breadcrumb { margin-bottom: 8px; }
.vp-page-title { font-size: 1.5rem; margin-bottom: 16px; }
.post-detail-title { font-size: 1.5rem; margin-bottom: 10px; }
.vp-pt-0 { padding-top: 0 !important; }
.breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 0; list-style: none; margin: 0; padding: 0; font-size: .875rem; }
.breadcrumb-item { color: var(--vp-muted); }
.breadcrumb-item a { color: var(--vp-muted); }
.breadcrumb-item a:hover { color: var(--vp-blue); text-decoration: underline; }
.breadcrumb-item + .breadcrumb-item { padding-left: .5rem; }
.breadcrumb-item + .breadcrumb-item::before { content: "/"; padding-right: .5rem; color: var(--vp-muted); }
.breadcrumb-item.active { color: var(--vp-heading); font-weight: 500; }
/* Banner cu (giua lai tuong thich, khong dung cho trang moi) */
.s-page-title { position: relative; background: linear-gradient(100deg, var(--vp-navy-deep) 0%, var(--vp-navy) 60%, var(--vp-navy-soft) 100%); padding: 54px 0; overflow: hidden; }
.s-page-title.has-bg { background-size: cover; background-position: center; }
.s-page-title.has-bg::before { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(6,28,64,.92) 0%, rgba(10,44,95,.85) 60%, rgba(20,56,107,.75) 100%); }
.s-page-title .content { position: relative; z-index: 2; }
.s-page-title .title-page, .s-page-title h1.title-page { color: #fff; margin-bottom: 10px; }
.breadcrumbs-page { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.breadcrumbs-page a { color: #D5E3F5; font-size: .9rem; }
.breadcrumbs-page a:hover { color: #fff; }
.breadcrumbs-page .current-page { color: #9CC3EE; font-size: .9rem; }
.breadcrumbs-page .icon { color: #9CC3EE; font-size: .75rem; }

/* ---------- 09. PAGINATION (Finder: so tran, active nen xam) ---------- */
.pagination-list, .page-pagination { display: flex; align-items: center; justify-content: center; margin: 40px 0 0; padding: 0; }
.page-pagination .pagination { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; }
.pagination-list { gap: 4px; list-style: none; }
.pagination-item a, .pagination-item span,
.page-pagination .pagination li a, .page-pagination .pagination li span {
  display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 36px;
  padding: 0 10px; border: 0; background: transparent; border-radius: 8px;
  font-weight: 500; font-size: .9rem; color: var(--vp-text);
}
.pagination-item a:hover, .page-pagination .pagination li a:hover { color: var(--vp-blue); background: var(--vp-bg-soft); }
.pagination-item.active a, .pagination-item.active span,
.page-pagination .pagination li.active a, .page-pagination .pagination li.active span { background: #E9EEF5; color: var(--vp-navy); font-weight: 700; }
.pagination-item.disabled a, .pagination-item.disabled span,
.page-pagination .pagination li.disabled a, .page-pagination .pagination li.disabled span { opacity: .45; pointer-events: none; }
[data-bs-theme="dark"] .pagination-item.active a, [data-bs-theme="dark"] .pagination-item.active span,
[data-bs-theme="dark"] .page-pagination .pagination li.active a, [data-bs-theme="dark"] .page-pagination .pagination li.active span { background: #1B3050; color: #fff; }

/* ---------- 10. HERO + SECTIONS ---------- */
.vp-section { padding: 72px 0; }
.vp-section-gray { background: var(--vp-bg-soft); }
.vp-eyebrow { display: inline-block; font-size: .8rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--vp-blue); margin-bottom: 10px; }
.vp-section-title { margin-bottom: 14px; }
.vp-section-sub { color: var(--vp-muted); max-width: 720px; margin-bottom: 36px; }
.vp-section-head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 36px; }
.vp-hero { position: relative; background: linear-gradient(100deg, var(--vp-navy-deep) 0%, var(--vp-navy) 45%, var(--vp-navy-soft) 100%); overflow: hidden; }
.vp-hero::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle at 85% 20%, rgba(30,127,224,.35) 0, transparent 45%); }
.vp-hero-inner { position: relative; z-index: 2; padding: 72px 0 48px; gap: 48px; }
.vp-hero-side { position: absolute; right: 34px; top: 96px; z-index: 2; text-align: right; font-size: 13px; font-weight: 700; letter-spacing: .2em; color: rgba(255,255,255,.35); line-height: 2; }
.vp-hero-pump { position: relative; z-index: 2; }
.vp-hero-pump-img { display:flex; align-items:center; justify-content:flex-end; height:auto; min-height:340px; margin-top: 4px; }
.vp-hero-pump-img img { width:auto; height:auto; max-width:100%; max-height:460px; object-fit:contain; filter: drop-shadow(0 16px 32px rgba(0,0,0,.2)); }
.vp-hero-pagination.swiper-pagination { text-align: center; }
.vp-hero-pagination .swiper-pagination-bullet { background: rgba(255,255,255,.5); opacity:1; }
.vp-hero-pagination .swiper-pagination-bullet-active { background: #fff; }
@media (max-width: 991px) {
  .vp-hero-inner { flex-direction: column; padding: 48px 0 24px; }
  .vp-hero-pump { max-width: 100% !important; margin-left: 0 !important; }
  .vp-hero-pump-img { justify-content: center; height: auto; min-height: 260px; }
  .vp-hero-pump-img img { max-height: 380px; max-width: 100%; }
}
.vp-hero h1 { color: #fff; font-size: clamp(30px, 4.4vw, 52px); font-weight: 800; line-height: 1.18; margin-bottom: 16px; }
.vp-hero-brand { font-size: 17px; font-weight: 700; letter-spacing: .12em; color: #9CC3EE; margin-bottom: 12px; }
.vp-hero-desc { font-size: 16px; line-height: 1.7; color: #D5E3F5; max-width: 560px; margin-bottom: 28px; }
.vp-hero .vp-btn { margin-bottom: 64px; }
.vp-hero-trust { position: relative; z-index: 2; border-top: 1px solid rgba(255,255,255,.16); background: rgba(6,28,64,.35); }
.vp-hero-trust .row > div { padding-top: 18px; padding-bottom: 18px; }
.vp-hero-trust .row > div + div { border-left: 1px solid rgba(255,255,255,.14); }
.vp-trust-item { display: flex; align-items: center; gap: 12px; color: #fff; font-weight: 600; font-size: .9rem; line-height: 1.4; }
.vp-trust-item i { font-size: 28px; color: #9CC3EE; line-height: 1; }
.vp-trust-item i[class*="icon-"]:before { color: inherit; }
/* About */
.vp-about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.vp-about-text { color: var(--vp-muted); margin-bottom: 16px; }
.vp-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 28px; }
.vp-stat strong { display: block; font-size: 26px; color: var(--vp-navy); }
[data-bs-theme="dark"] .vp-stat strong { color: #fff; }
.vp-stat span { font-size: .82rem; color: var(--vp-muted); }
.vp-about-media { position: relative; }
.vp-about-img img { border-radius: var(--vp-radius); }
.vp-about-cards { display: grid; gap: 14px; margin-top: -40px; margin-left: 40px; margin-right: -10px; position: relative; }
.vp-mini-card { display: flex; gap: 14px; background: var(--vp-card); border: 1px solid var(--vp-line); border-radius: 10px; box-shadow: var(--vp-shadow); padding: 18px; }
.vp-mini-card i { font-size: 26px; color: var(--vp-blue); flex-shrink: 0; }
.vp-mini-card h4 { font-size: 1rem; margin-bottom: 4px; }
.vp-mini-card p { font-size: .87rem; color: var(--vp-muted); margin: 0; }

/* ---------- 11. CARDS ---------- */
/* Product group cards (home) */
.vp-group-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.vp-group-card { background: var(--vp-card); border: 1px solid var(--vp-line); border-radius: var(--vp-radius); overflow: hidden; display: flex; flex-direction: column; transition: box-shadow .25s, transform .25s; }
.vp-group-card:hover { box-shadow: var(--vp-shadow); transform: translateY(-4px); }
.vp-group-thumb { height: 190px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--vp-navy) 0%, var(--vp-blue) 100%); }
.vp-group-thumb i { font-size: 64px; color: rgba(255,255,255,.92); }
.vp-group-body { padding: 24px; flex: 1; display: flex; flex-direction: column; }
.vp-group-body h3 { font-size: 20px; margin-bottom: 12px; }
.vp-group-body ul { list-style: none; margin: 0 0 18px; padding: 0; flex: 1; }
.vp-group-body ul li { position: relative; padding-left: 18px; margin-bottom: 8px; font-size: .9rem; }
.vp-group-body ul li::before { content: ""; position: absolute; left: 0; top: 9px; width: 7px; height: 7px; border-radius: 50%; background: var(--vp-blue); }
.vp-group-foot { display: flex; justify-content: flex-end; }
/* Solution cards (home) */
.vp-solutions { display: grid; grid-template-columns: repeat(5, 1fr); border: 1px solid var(--vp-line); border-radius: var(--vp-radius); overflow: hidden; background: var(--vp-card); }
.vp-solution { display: block; padding: 28px 22px; border-left: 1px solid var(--vp-line); text-align: center; transition: background .2s; }
.vp-solution:first-child { border-left: 0; }
.vp-solution:hover { background: var(--vp-sky); }
.vp-solution i { font-size: 33px; color: var(--vp-blue); line-height: 1; }
.vp-solution i[class*="icon-"]:before { color: inherit; }
.vp-section:has(.vp-solutions) .vp-section-title { margin-bottom: 8px; }
.vp-solution h4 { font-size: 1rem; margin: 12px 0 6px; }
.vp-solution p { font-size: .83rem; color: var(--vp-muted); margin: 0; }
/* Project cards */
.vp-project-card { background: var(--vp-card); border: 1px solid var(--vp-line); border-radius: var(--vp-radius); overflow: hidden; transition: box-shadow .25s, transform .25s; height: 100%; }
.vp-project-card:hover { box-shadow: var(--vp-shadow); transform: translateY(-4px); }
.vp-project-card .blog-content { padding: 20px 22px 24px; }
.vp-project-card .blog-content h3 { font-size: 1.1rem; margin-bottom: 8px; }
.vp-project-card .entry_excerpt { font-size: .88rem; color: var(--vp-muted); margin-bottom: 12px; }
/* News cards */
.vp-news-card { background: var(--vp-card); border: 1px solid var(--vp-line); border-radius: var(--vp-radius); overflow: hidden; height: 100%; transition: box-shadow .25s, transform .25s; }
.vp-news-card:hover { box-shadow: var(--vp-shadow); transform: translateY(-4px); }
.vp-news-card .blog-content { padding: 20px 22px 24px; }
.vp-news-card .blog-content h3 { font-size: 1.05rem; margin-bottom: 10px; }
.vp-news-meta { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.vp-news-cat { font-size: .75rem; font-weight: 700; color: var(--vp-blue); background: var(--vp-sky); border-radius: 6px; padding: 3px 10px; }
.vp-news-date { font-size: .8rem; color: var(--vp-muted); }
/* Product cards (list) */
.vp-product-card { display: block; background: var(--vp-card); border: 1px solid var(--vp-line); border-radius: var(--vp-radius); overflow: hidden; transition: box-shadow .25s, border-color .25s; }
.vp-product-card:hover { border-color: var(--vp-blue); box-shadow: var(--vp-shadow); }
.vp-product-card__img { width: 100%; aspect-ratio: 1/1; overflow: hidden; background: var(--vp-bg-soft); }
.vp-product-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s; }
.vp-product-card:hover .vp-product-card__img img { transform: scale(1.05); }
.vp-product-card__body { padding: 22px 24px; }
.vp-product-card__title { font-size: 1.15rem; font-weight: 700; line-height: 1.35; margin-bottom: 10px; }
.vp-product-card__desc { font-size: .9rem; color: var(--vp-muted); line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 14px; }
.vp-product-card__link { display: inline-flex; align-items: center; gap: 6px; font-size: .88rem; font-weight: 600; color: var(--vp-blue); }
/* Webapp card (layout component) */
.card-product { background: var(--vp-card); border: 1px solid var(--vp-line); border-radius: var(--vp-radius); overflow: hidden; transition: box-shadow .25s; }
.card-product:hover { box-shadow: var(--vp-shadow); }
.card-product .product-img { display: block; overflow: hidden; background: var(--vp-bg-soft); }
.card-product .product-img img { width: 100%; aspect-ratio: 1/1; object-fit: cover; transition: transform .35s; }
.card-product:hover .product-img img { transform: scale(1.05); }
.card-product_info { padding: 18px 20px 22px; }
.card-product_info .mz-h-title { font-size: 1.02rem; margin-bottom: 8px; }
.card-product .product-desc { font-size: .87rem; color: var(--vp-muted); margin-bottom: 12px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card-product .product-badge_list { list-style: none; display: flex; gap: 6px; margin: 0; padding: 0; }
.product-badge_item { font-size: .72rem; font-weight: 700; padding: 3px 10px; border-radius: 6px; background: var(--vp-sky); color: var(--vp-blue); }
/* Theme grids */
.tf-grid-layout { display: grid; column-gap: 24px; row-gap: 32px; }
.tf-grid-layout.tf-col-2 { grid-template-columns: 1fr 1fr; }
.tf-grid-layout.tf-col-3 { grid-template-columns: repeat(3, 1fr); }
.tf-grid-layout.tf-col-4 { grid-template-columns: repeat(4, 1fr); }
.tf-grid-layout.tf-col-5 { grid-template-columns: repeat(5, 1fr); }
.tf-grid-layout.tf-col-6 { grid-template-columns: repeat(6, 1fr); }
@media (min-width: 576px) {
  .tf-grid-layout.sm-col-2 { grid-template-columns: 1fr 1fr; }
  .tf-grid-layout.sm-col-3 { grid-template-columns: repeat(3, 1fr); }
  .tf-grid-layout.sm-col-4 { grid-template-columns: repeat(4, 1fr); }
}
.tf-grid-layout.lg-col-3 { grid-template-columns: repeat(3, 1fr); }
.tf-grid-layout.lg-col-4 { grid-template-columns: repeat(4, 1fr); }
.tf-grid-layout.lg-col-2 { grid-template-columns: 1fr 1fr; }
.vp-cat-desc { color: var(--vp-muted); max-width: 860px; margin-bottom: 24px; }
/* Blog list item (article-blog) */
.article-blog { background: var(--vp-card); border: 1px solid var(--vp-line); border-radius: var(--vp-radius); overflow: hidden; transition: box-shadow .25s; }
.article-blog:hover { box-shadow: var(--vp-shadow); }
.article-blog .blog-content { padding: 18px 20px 22px; }
.article-blog .blog-content h3 { font-size: 1.02rem; margin-bottom: 8px; }
.entry_date { font-size: .8rem; color: var(--vp-muted); margin: 0; }

/* ---------- 12. GRID / LIST VIEWS ---------- */
.vp-view-toggle { display: inline-flex; border: 1px solid var(--vp-line); border-radius: 10px; overflow: hidden; background: var(--vp-card); }
.vp-view-toggle button { border: 0; background: transparent; padding: 8px 12px; color: var(--vp-muted); font-size: 16px; line-height: 1; cursor: pointer; }
.vp-view-toggle button + button { border-left: 1px solid var(--vp-line); }
.vp-view-toggle button.active { background: var(--vp-navy); color: #fff; }
.vp-list-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.vp-list-count { font-size: .9rem; color: var(--vp-muted); }
.vp-list-wrap[data-vp-view="list"] .row > [class*="col-"] { width: 100%; flex: 0 0 100%; max-width: 100%; }
.vp-list-wrap[data-vp-view="list"] .tf-grid-layout { grid-template-columns: 1fr !important; }
.vp-list-wrap[data-vp-view="list"] .vp-project-card { display: flex; }
.vp-list-wrap[data-vp-view="list"] .vp-project-card .blog-image { width: 300px; flex-shrink: 0; border-radius: var(--vp-radius) 0 0 var(--vp-radius); }
.vp-list-wrap[data-vp-view="list"] .vp-project-card .blog-image img { height: 100%; }
.vp-list-wrap[data-vp-view="list"] .wrapper-shop.tf-grid-layout .card-product.grid { display: flex; }
.vp-list-wrap[data-vp-view="list"] .wrapper-shop.tf-grid-layout .card-product.grid .card-product_wrapper { width: 260px; flex-shrink: 0; }
.vp-list-wrap[data-vp-view="list"] .vp-product-card .row > [class*="col-"] { width: auto; }
@media (max-width: 767px) {
  .vp-list-wrap[data-vp-view="list"] .vp-project-card { display: block; }
  .vp-list-wrap[data-vp-view="list"] .vp-project-card .blog-image { width: 100%; border-radius: var(--vp-radius) var(--vp-radius) 0 0; }
  .vp-list-wrap[data-vp-view="list"] .wrapper-shop.tf-grid-layout .card-product.grid { display: block; }
  .vp-list-wrap[data-vp-view="list"] .wrapper-shop.tf-grid-layout .card-product.grid .card-product_wrapper { width: 100%; }
}

/* ---------- 13. DETAIL + SIDEBAR + CTA ---------- */
.vp-detail-hero { margin-bottom: 36px; }
.vp-detail-hero__img { border-radius: 14px; overflow: hidden; margin-bottom: 28px; background: var(--vp-bg-soft); }
.vp-detail-hero__img img { width: 100%; max-height: 480px; object-fit: cover; display: block; }
.vp-detail-hero__code { display: inline-block; font-size: .82rem; font-weight: 700; color: var(--vp-blue); background: var(--vp-sky); border-radius: 6px; padding: 4px 14px; margin-bottom: 14px; letter-spacing: .03em; }
.vp-detail-hero__title { font-size: clamp(24px, 3vw, 32px); margin-bottom: 12px; }
.vp-detail-hero__cat { display: inline-block; font-size: .8rem; font-weight: 600; color: var(--vp-muted); margin-bottom: 12px; }
.vp-detail-hero__summary { font-size: 1.05rem; line-height: 1.75; color: var(--vp-muted); }
.vp-detail-content, .tp-blog-details-content, .post-body { font-size: 16px; line-height: 1.5; color: var(--vp-text); }
/* h2 trong bai viet nhu mau blog-single-v3 (h5 = 1.25rem, line-height 1.35) */
.post-body h2, .vp-detail-content h2, .tp-blog-details-content h2 { font-size: 1.25rem; line-height: 1.35; }
.vp-detail-content h3, .tp-blog-details-content h3, .post-body h3 { font-size: 1.25rem; margin: 0 0 8px; padding-top: 16px; }
@media (min-width: 992px) { .vp-detail-content h3, .tp-blog-details-content h3, .post-body h3 { padding-top: 24px; } }
.vp-detail-content h3:first-child, .tp-blog-details-content h3:first-child, .post-body h3:first-child { padding-top: 0; }
.vp-detail-content ul, .tp-blog-details-content ul, .post-body ul { padding-left: 22px; margin-bottom: 16px; }
.vp-detail-content li, .tp-blog-details-content li, .post-body li { margin-bottom: 8px; }
.vp-detail-content p, .tp-blog-details-content p, .post-body p { margin-bottom: 16px; }
.vp-detail-content img, .tp-blog-details-content img { border-radius: 10px; }
.tp-blog-details-content table { width: 100%; border-collapse: collapse; margin-bottom: 20px; font-size: .92rem; }
.tp-blog-details-content th, .tp-blog-details-content td { border: 1px solid var(--vp-line); padding: 10px 14px; text-align: left; }
.tp-blog-details-content th { background: var(--vp-bg-soft); color: var(--vp-heading); }
.vp-detail-cta { margin-top: 48px; padding: 32px; background: linear-gradient(135deg, var(--vp-sky) 0%, var(--vp-bg-soft) 100%); border: 1px solid var(--vp-line); border-radius: 14px; }
.vp-detail-cta h4 { font-size: 1.35rem; margin-bottom: 8px; }
.vp-detail-cta p { color: var(--vp-muted); margin-bottom: 18px; }
.vp-detail-sidebar__box { background: var(--vp-card); border: 1px solid var(--vp-line); border-radius: var(--vp-radius); padding: 24px; margin-bottom: 20px; }
.vp-detail-sidebar__heading { font-size: 1.1rem; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 2px solid var(--vp-blue); }
.vp-detail-sidebar__list { list-style: none; padding: 0; margin: 0; }
.vp-detail-sidebar__list li { display: flex; align-items: flex-start; gap: 10px; font-size: .92rem; margin-bottom: 12px; }
.vp-detail-sidebar__list li i { color: var(--vp-blue); margin-top: 2px; flex-shrink: 0; }
.vp-detail-sidebar__products { display: flex; flex-direction: column; gap: 14px; }
.vp-detail-sidebar__product { border-radius: 8px; padding: 6px; margin: -6px; transition: background .2s; }
.vp-detail-sidebar__product:hover { background: var(--vp-bg-soft); }
.vp-detail-sidebar__thumb { width: 56px; height: 56px; border-radius: 8px; object-fit: cover; flex-shrink: 0; background: var(--vp-bg-soft); }
.vp-detail-sidebar__name { font-size: .88rem; font-weight: 600; color: var(--vp-heading); line-height: 1.4; }
.vp-detail-sidebar .tp-blog-details-tag ul { padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; list-style: none; }
.tp-blog-details-tag ul { padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; list-style: none; }
.tp-blog-details-tag li a { display: inline-block; font-size: .82rem; padding: 5px 14px; border: 1px solid var(--vp-line); border-radius: 6px; color: var(--vp-muted); transition: all .2s; }
.tp-blog-details-tag li a:hover { border-color: var(--vp-blue); color: var(--vp-blue); }
.vp-related { padding-top: 0; }

/* ---------- 14. COMMENTS (Finder-style) ---------- */
.vp-comments { margin-top: 8px; padding-top: 48px; }
@media (min-width: 768px) { .vp-comments { margin-top: 12px; } }
@media (min-width: 992px) { .vp-comments { margin-top: 24px; } }
@media (min-width: 1200px) { .vp-comments { margin-top: 48px; } }
.vp-comments__title { font-size: 1.4rem; margin-bottom: 6px; }
.vp-comments__sub { color: var(--vp-muted); font-size: .92rem; margin-bottom: 24px; }
.vp-comment-list { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 20px; }
.vp-comment { display: flex; gap: 16px; background: var(--vp-card); border: 1px solid var(--vp-line); border-radius: var(--vp-radius); padding: 20px; }
.vp-comment__avatar { width: 52px; height: 52px; border-radius: 50%; flex-shrink: 0; background: var(--vp-sky); color: var(--vp-blue); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.2rem; overflow: hidden; }
.vp-comment__avatar img { width: 100%; height: 100%; object-fit: cover; }
.vp-comment__body { flex: 1; min-width: 0; }
.vp-comment__head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin-bottom: 6px; }
.vp-comment__name { font-weight: 700; color: var(--vp-heading); font-size: .95rem; }
.vp-comment__date { font-size: .8rem; color: var(--vp-muted); }
.vp-comment__text { font-size: .93rem; margin: 0; }
/* ---------- 14b. COMMENT MODAL (Finder-style) ---------- */
#vpCommentModal { font-size: .9rem; }
#vpCommentModal .modal-content { border-radius: 16px; border: 1px solid var(--vp-line); background: var(--vp-card); color: var(--vp-text); }
#vpCommentModal .modal-header { padding: 20px 24px 8px; }
#vpCommentModal .modal-title { font-size: 1.2rem; }
#vpCommentModal .modal-body { padding: 8px 24px 16px; }
#vpCommentModal .modal-footer { padding: 4px 24px 24px; gap: 12px; }
#vpCommentModal .modal-footer .vp-btn { padding: 12px 16px; }
#vpCommentModal .form-label { font-size: .9rem; margin-bottom: 6px; }
#vpCommentModal .form-text { display: block; font-size: .8rem; color: var(--vp-muted); margin-top: 4px; }
#vpCommentModal .invalid-feedback { display: none; font-size: .82rem; }
#vpCommentModal .was-validated .form-control:invalid ~ .invalid-feedback { display: block; }
#vpCommentModal .comment-form-msg:empty { margin: 0; }
#vpCommentModal .comment-form-msg { margin-top: 12px; }

/* ---------- 15. CTA ---------- */
.vp-cta { background: linear-gradient(100deg, var(--vp-navy-deep) 0%, var(--vp-navy) 55%, var(--vp-blue-dark) 100%); padding: 56px 0; }
.vp-cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.vp-cta h2 { color: #fff; margin-bottom: 12px; line-height: 1.25; }
.vp-cta p { color: #D5E3F5; margin: 0; font-size: 15px; }
.vp-cta .vp-btn { font-size: 13px; letter-spacing: .04em; }
.vp-cta .vp-btn-white { background: #9CC3EE; border-color: #9CC3EE; color: var(--vp-navy-deep); }
.vp-cta .vp-btn-white:hover { background: #b8d6f0; border-color: #b8d6f0; color: var(--vp-navy-deep); }

/* ---------- 16. FOOTER + TOOLBAR ---------- */
.vp-footer { background: linear-gradient(180deg, var(--vp-navy) 0%, var(--vp-navy-deep) 100%); color: #C9D6E8; }
.vp-footer .footer-body { padding: 56px 0 32px; }
.vp-footer .footer-body .row { --bs-gutter-x: 32px; --bs-gutter-y: 36px; }
.vp-footer .footer-col-block .caption { margin-bottom: 16px; line-height: 1.6; }
.footer-contact li + li { margin-top: 10px; }
.vp-footer .footer-heading { color: #fff; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 20px; }
.vp-footer .footer-menu-list { list-style: none; margin: 0; padding: 0; }
.vp-footer .footer-menu-list li { margin-bottom: 0; }
.vp-footer .footer-menu-list a { display: block; color: #C9D6E8; font-size: .9rem; padding: 6px 0; line-height: 1.6; }
.vp-footer .footer-menu-list a:hover { color: #fff; }
.vp-footer .footer-bottom { border-top: 1px solid rgba(255,255,255,.12); padding: 20px 0; }
.vp-footer .footer-bottom p, .vp-footer .footer-bottom a { color: #9CC3EE; font-size: .85rem; }
.vp-lang-btn .vp-lang-current { font-size: .78rem; font-weight: 700; letter-spacing: .02em; }

/* ---------- 17. SEARCH MODAL + OFFCANVAS + MOBILE MENU ---------- */
.modal-search .modal-content { border-radius: 16px; padding: 28px; border: 1px solid var(--vp-line); background: var(--vp-card); }
.form-search { display: flex; gap: 10px; }
.form-search fieldset { flex: 1; margin: 0; padding: 0; border: 0; }
.form-search .link { display: inline-flex; align-items: center; justify-content: center; width: 52px; border-radius: 10px; background: var(--vp-navy); color: #fff; border: 0; cursor: pointer; }
.quick-link-list { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; padding: 0; }
.quick-link-list a { font-size: .85rem; border: 1px solid var(--vp-line); border-radius: 8px; padding: 6px 14px; color: var(--vp-text); }
.quick-link-list a:hover { border-color: var(--vp-blue); color: var(--vp-blue); }
.btn-mobile-menu { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--vp-line); border-radius: 8px; background: var(--vp-card); color: var(--vp-heading); text-decoration: none; }
.btn-mobile-menu span, .btn-mobile-menu span::before, .btn-mobile-menu span::after { display: block; width: 18px; height: 2px; background: currentColor; content: ""; transition: all .2s; border-radius: 1px; }
.btn-mobile-menu span { position: relative; }
.btn-mobile-menu span::before { position: absolute; top: -6px; left: 0; }
.btn-mobile-menu span::after { position: absolute; top: 6px; left: 0; }
.btn-mobile-menu:hover { border-color: var(--vp-blue); color: var(--vp-blue); }
[data-bs-theme="dark"] .btn-mobile-menu { border-color: #2a3a56; background: #0e1a2f; color: #fff; }
.offcanvas { background: var(--vp-card); color: var(--vp-text); }
.canvas-mb.offcanvas-start { width: 340px; max-width: 85vw; }
.canvas-mb { display: flex; flex-direction: column; height: 100vh; }
.canvas-mb .canvas-header { flex-shrink: 0; padding: 20px 20px 16px; border-bottom: 1px solid var(--vp-line); display: flex; align-items: center; justify-content: space-between; }
.canvas-mb .canvas-body { flex: 1; overflow-y: auto; padding: 8px 20px 24px; overscroll-behavior: contain; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
.canvas-mb .canvas-footer { flex-shrink: 0; padding: 16px 20px 20px; border-top: 1px solid var(--vp-line); background: var(--vp-card); }
.canvas-mb .icon-close-popup { position: absolute; top: 16px; right: 16px; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--vp-bg-soft); color: var(--vp-text); cursor: pointer; }
.nav-ul-mb { list-style: none; margin: 0; padding: 0; }
.nav-ul-mb > li { border-bottom: 1px solid var(--vp-line); }
.nav-mb-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.nav-mb-row > a { flex: 1; padding: 14px 0; font-size: 15px; font-weight: 500; line-height: 1.4; color: var(--vp-heading); }
.nav-mb-toggle { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 0; border-radius: 6px; color: var(--vp-text); cursor: pointer; flex-shrink: 0; }
.nav-mb-toggle:hover { background: var(--vp-bg-soft); color: var(--vp-blue); }
.nav-mb-toggle i { transition: transform .35s cubic-bezier(.4,0,.2,1); display: inline-block; }
.nav-mb-toggle[aria-expanded="true"] i { transform: rotate(180deg); }
.nav-mb-sub { display: block !important; max-height: 0; overflow: hidden; opacity: 0; transition: max-height .35s ease, opacity .25s ease; border-left: 2px solid var(--vp-line); margin: 0 0 0 12px; padding-left: 12px; list-style: none; }
.nav-mb-sub.is-open { max-height: 400px; opacity: 1; margin-bottom: 8px; }
.nav-mb-sub a { display: block; padding: 10px 12px; font-size: 14px; border-radius: 6px; color: var(--vp-text); }
.nav-mb-sub a:hover { background: var(--vp-bg-soft); color: var(--vp-blue); }
.offcanvas { transition: transform .35s cubic-bezier(.4,0,.2,1); }
.offcanvas-backdrop { backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.mb-languages { margin-top: 16px; }
.mb-languages-label { display: block; font-weight: 600; font-size: .85rem; color: var(--vp-heading); margin-bottom: 8px; }
.mb-theme { margin-top: 14px; }
.mb-theme-btns { display: flex; gap: 8px; }
.mb-theme-btns button { flex: 1; border: 1px solid var(--vp-line); background: var(--vp-card); border-radius: 8px; padding: 8px 4px; font-size: 13px; font-weight: 600; color: var(--vp-text); }
.mb-theme-btns button.active { background: var(--vp-navy); border-color: var(--vp-navy); color: #fff; }
.body-overlay, .overlay-filter { position: fixed; inset: 0; background: rgba(6, 28, 64, .45); z-index: 30; display: none; }

/* ---------- 18. SWIPER ---------- */
.swiper { overflow: hidden; }
.vp-swiper-nav { display: flex; gap: 10px; }
.vp-swiper-nav button, .vp-projects-nav button {
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--vp-line);
  background: var(--vp-card); color: var(--vp-navy); font-size: 18px; line-height: 1; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; transition: all .2s;
}
.vp-swiper-nav button:hover, .vp-projects-nav button:hover { background: var(--vp-navy); border-color: var(--vp-navy); color: #fff; }
.vp-swiper-pagination.swiper-pagination, .vp-projects-pagination.swiper-pagination { position: static; margin-top: 18px; text-align: center; }
.vp-swiper-pagination .swiper-pagination-bullet, .vp-projects-pagination .swiper-pagination-bullet { width: 9px; height: 9px; background: var(--vp-line); opacity: 1; margin: 0 4px !important; }
.vp-swiper-pagination .swiper-pagination-bullet-active, .vp-projects-pagination .swiper-pagination-bullet-active { background: var(--vp-blue); width: 26px; border-radius: 6px; }
.vp-projects-wrap { position: relative; }

/* ---------- 13c. BLOG LIST STYLES (layout components) ---------- */
.post-item-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px 24px; row-gap: 48px; }
.post-item { background: none; border: 0; }
.post-item-image { overflow: hidden; border-radius: 12px; background: var(--vp-bg-soft); margin-bottom: 16px; }
.post-item-image figure { margin: 0; }
.post-item-image img { width: 100%; aspect-ratio: 1/.732; object-fit: cover; display: block; transition: transform .35s; }
.post-item:hover .post-item-image img { transform: scale(1.05); }
.post-item-body { padding: 0; }
.vp-card-cat { font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--vp-muted); margin-bottom: 8px; }
.vp-card-cat a { color: var(--vp-muted); }
.vp-card-cat a:hover { color: var(--vp-blue); }
.vp-card-title { font-size: 1.25rem; font-weight: 600; line-height: 1.35; margin-bottom: 8px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: calc(1.35em * 2); }
.vp-card-title a { color: #1A2233; }
.vp-card-title a:hover { text-decoration: underline; }
.vp-card-excerpt { font-size: .875rem; line-height: 1.65; color: var(--vp-text); margin-bottom: 16px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.vp-card-meta { display: flex; align-items: center; gap: 12px; font-size: .875rem; color: var(--vp-muted); }
.vp-card-author { font-weight: 600; color: var(--vp-text); }
.post-item-meta ul { list-style: none; margin: 0 0 8px; padding: 0; }
.post-item-meta li { display: inline-block; font-size: .75rem; font-weight: 700; color: var(--vp-blue); background: var(--vp-sky); border-radius: 6px; padding: 3px 10px; }
.post-item-content h3 { font-size: 1.05rem; margin-bottom: 10px; }
.post-item .mz-h-title { font-size: 1.05rem; font-weight: 600; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: calc(1.35em * 2); }
.post-item .mz-h-title a { color: #1A2233; }
.post-item .mz-h-title a:hover { text-decoration: underline; }
.card-product_info .mz-h-title { font-size: 1.02rem; font-weight: 600; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: calc(1.35em * 2); }
.post-item-btn { margin-top: 4px; }
@media (max-width: 991px) { .post-item-list { grid-template-columns: 1fr 1fr; } }
@media (max-width: 575px) { .post-item-list { grid-template-columns: 1fr; } }
/* Article card horizontal */
.article-blog.style-row { display: flex; }
.article-blog.style-row .entry_image { width: 300px; flex-shrink: 0; }
.article-blog.style-row .entry_image img { height: 100%; }
.article-blog.style-row .blog-content { flex: 1; }
.entry_tag { position: absolute; top: 12px; left: 12px; }
.entry_tag .name-tag { font-size: .72rem; font-weight: 700; background: var(--vp-blue); color: #fff; border-radius: 6px; padding: 3px 10px; }
.entry_image { position: relative; }
.entry_date_text { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; color: var(--vp-muted); margin-bottom: 8px; }
.article-blog .blog-content .text { font-size: .9rem; color: var(--vp-muted); margin-bottom: 12px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.row-xl-gap-40 { row-gap: 40px; }
/* Featured post dau trang list (Finder blog-layout-v1) */
.vp-featured { background: var(--vp-bg-soft); border-radius: 14px; overflow: hidden; margin-bottom: 32px; }
.vp-featured__img { display: block; height: 100%; min-height: 260px; overflow: hidden; background: var(--vp-bg-soft); }
.vp-featured__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s; }
.vp-featured:hover .vp-featured__img img { transform: scale(1.04); }
.vp-featured__body { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; height: 100%; }
.vp-featured__tag { display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--vp-blue); background: rgba(0, 96, 176, .1); border-radius: 6px; padding: 4px 12px; margin-bottom: 14px; }
.vp-featured__title { font-size: clamp(22px, 2.6vw, 30px); margin-bottom: 12px; }
.vp-featured__title a { color: var(--vp-heading); }
.vp-featured__title a:hover { color: var(--vp-blue); }
.vp-featured__excerpt { color: var(--vp-muted); margin-bottom: 20px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 767px) { .vp-featured__img { min-height: 200px; } .vp-featured__body { padding: 22px 20px 26px; } }
/* Pills danh muc (Finder) */
.vp-pills { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0 0 24px; padding: 0; }
.vp-pills a { display: inline-block; font-size: .85rem; font-weight: 500; color: var(--vp-text); border: 1px solid var(--vp-line); background: var(--vp-card); border-radius: 999px; padding: 7px 18px; }
.vp-pills a:hover { border-color: var(--vp-blue); color: var(--vp-blue); }
/* Khoang cach cuoi trang truoc footer (mau co khoang rieng) */
main > section.layout-row:last-child { padding-bottom: 48px; }
/* Bai lien quan kieu Finder (khong card + slider) */
.vp-rel-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.vp-rel-title { font-size: 1.5rem; margin: 0; }
.vp-plain__img { display: block; border-radius: 12px; overflow: hidden; background: var(--vp-bg-soft); margin-bottom: 16px; }
.vp-plain__img img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; transition: transform .35s; }
.vp-plain:hover .vp-plain__img img { transform: scale(1.04); }
.vp-plain__meta { font-size: .8rem; color: var(--vp-muted); margin-bottom: 8px; }
.vp-plain__title { font-size: 1.1rem; margin-bottom: 8px; }
.vp-plain__title a { color: var(--vp-heading); }
.vp-plain__title a:hover { color: var(--vp-blue); }
.vp-plain__excerpt { font-size: .88rem; color: var(--vp-muted); margin-bottom: 10px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 767px) { .article-blog.style-row { display: block; } .article-blog.style-row .entry_image { width: 100%; } }

/* ---------- 13b. ARTICLE DETAIL (post_detail component, Finder v2 spacing) ---------- */
.s-blog-detail { padding: 0 0 48px; }
.post-detail-figure { margin: 0 0 24px; border-radius: 12px; overflow: hidden; background: var(--vp-bg-soft); aspect-ratio: 16/9; }
.post-detail-figure img { width: 100%; height: 100%; max-height: 520px; object-fit: cover; display: block; }
.ratio[style*="--fn-aspect-ratio"]::before { padding-top: var(--fn-aspect-ratio) !important; }
.ratio.bg-body-tertiary img { width: 100%; height: 100%; object-fit: cover; }
.post-detail-centered { max-width: 840px; margin: 0 auto; }
.post-detail-meta-row { display: flex; align-items: center; gap: 8px; color: var(--vp-muted); margin-bottom: 16px; font-size: .875rem; }
.post-detail-meta-row .vr { width: 1px; height: 14px; background: var(--vp-line); }
.post-detail-meta-row a { color: var(--vp-muted); text-transform: uppercase; font-size: .75rem; letter-spacing: .04em; }
.post-detail-meta-row a:hover { color: var(--vp-blue); }
.post-detail-title { font-size: 1.5rem; padding-bottom: 24px; margin-bottom: 0; }
/* SEO: H1 tieu de trang chi tiet (bai viet/SP/du an) + trang tinh dong bo 32px */
.vp-h1-title { font-size: 32px !important; line-height: 1.3; }
.post-detail-hr { margin: 0 0 4px; border: 0; border-top: 1px solid var(--vp-line); opacity: 1; }
.post-detail-body { padding-top: 24px; }
.post-detail-summary { font-size: 1rem; line-height: 1.7; color: var(--vp-muted); margin-bottom: 16px; }
.post-tag-share { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 8px 0 0; padding: 16px 0; border-top: 1px solid var(--vp-line); }
@media (min-width: 768px) {
  .post-detail-meta-row { margin-bottom: 24px; }
  .post-detail-hr { margin-bottom: 8px; }
  .post-tag-share { padding: 24px 0; }
}
@media (min-width: 1200px) { .post-detail-hr { margin-bottom: 16px; } }
.post-tags-label { font-weight: 600; font-size: .88rem; margin-right: 8px; }
.post-tags-col a { display: inline-block; font-size: .82rem; border: 1px solid var(--vp-line); border-radius: 6px; padding: 5px 14px; margin: 0 6px 6px 0; color: var(--vp-muted); }
.post-tags-col a:hover { border-color: var(--vp-blue); color: var(--vp-blue); }
.post-share-col { display: flex; gap: 8px; align-items: center; }
.post-author-box { display: flex; gap: 16px; padding: 16px 0; margin-top: 8px; border-top: 1px solid var(--vp-line); }
@media (min-width: 992px) { .post-author-box { padding: 24px 0; } }
.post-author-avatar { width: 56px; height: 56px; border-radius: 50%; overflow: hidden; flex-shrink: 0; background: var(--vp-sky); display: flex; align-items: center; justify-content: center; }
.post-author-avatar img { width: 100%; height: 100%; object-fit: cover; }
.post-author-initial { font-weight: 700; font-size: 1.5rem; color: var(--vp-blue); }
.post-author-label { font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--vp-muted); }
.post-author-name { font-weight: 700; color: var(--vp-heading); }
.post-author-bio { font-size: .9rem; color: var(--vp-muted); margin: 6px 0; }
.post-author-contact { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.post-author-phone { font-weight: 600; font-size: .9rem; display: inline-flex; gap: 6px; align-items: center; }
.post-author-socials { display: inline-flex; gap: 8px; }
.post-author-soc-letter { display: inline-flex; width: 30px; height: 30px; border-radius: 50%; background: var(--vp-sky); color: var(--vp-blue); align-items: center; justify-content: center; font-weight: 700; font-size: .85rem; }

/* ---------- 19. CONTACT / STATIC MISC ---------- */
.layout-row { display: block; }
.layout-row.content-wrap { padding: 0 0 40px; }
.section-title { margin-bottom: 24px; }
.section-sub-title { display: inline-block; font-size: .8rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--vp-blue); margin-bottom: 8px; }
.section-title h2 { margin-bottom: 10px; }
.section-title p { color: var(--vp-muted); margin: 0; }
.form-group { margin-bottom: 16px; }
.page-contact-us { padding: 0 0 20px; }
.contact-us-content { margin-bottom: 28px; }
.contact-us-hours-box { background: var(--vp-card); border: 1px solid var(--vp-line); border-radius: var(--vp-radius); padding: 22px 24px; margin-top: 20px; }
.contact-us-hours-header { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.contact-us-hours-header i { font-size: 22px; color: var(--vp-blue); }
.contact-us-hours-header h3 { font-size: 1.05rem; margin: 0; }
.contact-us-hour-list ul { list-style: none; margin: 0; padding: 0; }
.contact-us-hour-list li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px dashed var(--vp-line); font-size: .92rem; }
.contact-us-hour-list li:last-child { border-bottom: 0; }
.contact-us-hour-list li span { font-weight: 600; color: var(--vp-heading); }
.contact-us-form { background: var(--vp-card); border: 1px solid var(--vp-line); border-radius: 16px; padding: 32px; }
.contact-form-btn { margin-top: 6px; }.tp-contact-form { background: var(--vp-card); border: 1px solid var(--vp-line); border-radius: 16px; padding: 36px; }
.tp-contact-shape { display: none; }
.vp-detail-sidebar__list .icon { color: var(--vp-blue); }
.share-button { display: inline-flex; align-items: center; gap: 6px; font-size: .85rem; }
.sitemap-list { list-style: none; margin: 0 0 24px; padding: 0; }
.sitemap-list li { padding: 8px 0; border-bottom: 1px dashed var(--vp-line); }
.complete-box { text-align: center; padding: 48px 20px; }
.complete-box i { font-size: 56px; color: #1A8917; }
/* Legacy tp-* structural classes (trang tinh / lien he / dang ky) */
.tp-blog-details-2-area { padding: 56px 0; }
.tp-postbox-wrapper { max-width: 100%; }
.tp-service-hero-area { padding: 56px 0; }
.tp-service-hero-left h2 span { display: inline; }
.tp-bg-common-white-2 { background: var(--vp-card); }
.tp-postbox-details-form-wrapper { border-radius: 16px; padding: 36px; }
.tp-contact-us-map iframe { width: 100%; min-height: 380px; border: 0; border-radius: 14px; }
.tp-contact-number { margin-top: 20px; font-size: 1.05rem; }
.tp-contact-number p { margin-bottom: 8px; }
.pb-40 { padding-bottom: 40px; }
.mb-90 { margin-bottom: 90px; }
.lh-130-per { line-height: 1.3; }
.tp-postbox-details-input-box { margin-top: 6px; }
/* Live misc: footer socials, sidebar, text helpers */
.tf-social-icon { display: flex; gap: 10px; list-style: none; margin: 16px 0 0; padding: 0; }
.tf-social-icon a { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(255,255,255,.25); color: #fff; font-size: 16px; transition: all .2s; }
.tf-social-icon a:hover { background: var(--vp-blue); border-color: var(--vp-blue); color: #fff; }
.footer-contact { list-style: none; margin: 14px 0 0; padding: 0; }
.footer-contact li { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.footer-contact li::marker { content: none; }
.footer-contact i { color: #9CC3EE; font-size: 15px; }
.footer-contact a { color: #C9D6E8; font-size: .9rem; }
.footer-contact a:hover { color: #fff; }
/* Go to top (Finder-style) */
.vp-go-top {
  position: fixed; right: 24px; bottom: 24px; z-index: 60;
  width: 48px; height: 48px; border-radius: 50%; border: 2px solid #fff;
  background: #9CC3EE; color: var(--vp-navy-deep); font-size: 18px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 24px rgba(0,42,78,.35); opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: all .25s;
}
.vp-go-top.show { opacity: 1; visibility: visible; transform: translateY(0); }
.vp-go-top:hover { background: #fff; border-color: #fff; color: var(--vp-navy-deep); transform: translateY(-2px); box-shadow: 0 12px 32px rgba(0,42,78,.45); }
[data-bs-theme="dark"] .vp-go-top { background: #9CC3EE; border-color: #9CC3EE; color: var(--vp-navy-deep); box-shadow: 0 8px 24px rgba(0,0,0,.5); }
[data-bs-theme="dark"] .vp-go-top:hover { background: #fff; border-color: #fff; }
.sidebar-item { background: var(--vp-card); border: 1px solid var(--vp-line); border-radius: var(--vp-radius); padding: 22px; margin-bottom: 20px; }
.sb-title { font-size: 1.02rem; margin-bottom: 14px; padding-bottom: 10px; border-bottom: 2px solid var(--vp-blue); }
.sb-search .form-search { display: flex; gap: 8px; }
.style-stroke { background: transparent; }
.layout-search-form { margin-bottom: 20px; }
/* Sidebar blocks (Finder-style) */
.sb-category { list-style: none; margin: 0; padding: 0; }
.sb-category li { border-bottom: 1px dashed var(--vp-line); }
.sb-category li:last-child { border-bottom: 0; }
.sb-category a { display: flex; align-items: center; justify-content: space-between; padding: 9px 0; font-size: .9rem; color: var(--vp-text); }
.sb-category a:hover { color: var(--vp-blue); padding-left: 6px; }
.sb-recent { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.wg-recent { display: flex; gap: 12px; align-items: center; }
.wg-recent .image { width: 72px; height: 72px; border-radius: 8px; overflow: hidden; flex-shrink: 0; background: var(--vp-bg-soft); }
.wg-recent .image img { width: 100%; height: 100%; object-fit: cover; }
.wg-recent .content { flex: 1; min-width: 0; }
.wg-recent .mz-h-title { font-size: .88rem; margin-bottom: 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.text-small { font-size: .8rem; color: var(--vp-muted); }
.sb-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.sb-tags a { font-size: .82rem; border: 1px solid var(--vp-line); border-radius: 6px; padding: 5px 12px; color: var(--vp-text); }
.sb-tags a:hover { border-color: var(--vp-blue); color: var(--vp-blue); }
/* Layout row title */
.layout-row-title { color: var(--vp-heading); }
/* Blog card meta */
.post-item-date { font-size: .8rem; color: var(--vp-muted); margin-bottom: 8px; display: block; }
.post-item-excerpt { font-size: .88rem; color: var(--vp-muted); margin-bottom: 10px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* Sidebar contact CTA */
.sb-contact { background: linear-gradient(135deg, var(--vp-navy) 0%, var(--vp-blue-dark) 100%); border-radius: var(--vp-radius); padding: 24px; color: #fff; }
.sb-contact h4 { color: #fff; font-size: 1.02rem; margin-bottom: 8px; }
.sb-contact p { font-size: .85rem; color: #D5E3F5; margin-bottom: 16px; }
.tp-arrow-angle { display: inline-flex; align-items: center; }
.tp-text-common-black { color: var(--vp-heading); }
.tp-text-common-white { color: #fff; }
.vp-img-ph { background: linear-gradient(135deg, var(--vp-navy) 0%, var(--vp-blue) 100%); }
.vp-img-ph:empty { min-height: 120px; }
.s-page-title.style-2 { padding: 36px 0; }

/* ---------- 21. RESPONSIVE ---------- */
@media (max-width: 1199px) {
  .tf-grid-layout.lg-col-4 { grid-template-columns: repeat(3, 1fr); }
  .vp-solutions { grid-template-columns: repeat(3, 1fr); }
  .vp-solution:nth-child(4) { border-left: 0; }
  .vp-solution:nth-child(n+4) { border-top: 1px solid var(--vp-line); }
}
@media (max-width: 991px) {
  .flat-spacing { padding: 52px 0; }
  .vp-section { padding: 52px 0; }
  .vp-about-grid { grid-template-columns: 1fr; gap: 32px; }
  .vp-group-grid { grid-template-columns: 1fr; }
  .vp-solutions { grid-template-columns: 1fr 1fr; }
  .vp-solution { border-left: 0 !important; border-top: 1px solid var(--vp-line) !important; }
  .vp-solution:nth-child(-n+2) { border-top: 0 !important; }
  .vp-solution:nth-child(even) { border-left: 1px solid var(--vp-line) !important; }
  .vp-about-cards { margin-left: 12px; margin-right: 12px; }
  .vp-section-head-row { flex-direction: column; align-items: flex-start; }
  .vp-detail-sidebar { margin-top: 20px; }
  .vp-hero-side { display: none; }
  .tf-grid-layout.lg-col-3, .tf-grid-layout.lg-col-4 { grid-template-columns: 1fr 1fr; }
  .pt-150 { padding-top: 90px; }
}
@media (max-width: 767px) {
  .vp-hero-inner { padding: 56px 0 0; }
  .vp-hero .vp-btn { margin-bottom: 44px; }
  .vp-stats { grid-template-columns: repeat(2, 1fr); }
  .vp-cta-inner { flex-direction: column; text-align: center; }
  .vp-detail-cta { padding: 22px 18px; text-align: center; }
  .vp-detail-cta .vp-btn + .vp-btn { margin-left: 0; margin-top: 10px; }
  .vp-detail-cta .text-md-end { text-align: center !important; }
  .tf-grid-layout.lg-col-3, .tf-grid-layout.lg-col-4 { grid-template-columns: 1fr; }
  .vp-product-card__body { padding: 16px 18px; }
  .vp-product-card__title { font-size: 1.05rem; }
  .vp-detail-hero__title { font-size: 1.4rem; }
  .vp-comment { padding: 16px; }
  .vp-comment-form { padding: 20px 16px; }
  .tp-contact-form { padding: 24px 18px; }
}

/* ===== FINDER blog v1 utilities (match themes.coderthemes.com/finder-php) ===== */
.fs-xs{font-size:.75rem!important}
.fs-sm{font-size:.875rem!important}
.fs-base{font-size:1rem!important}
.fs-lg{font-size:1.125rem!important}
.bg-body-tertiary{background-color:#edf1f6!important}
.bg-body-secondary{background-color:#e2e8f0!important}
.text-body-secondary{color:#5d6675!important}
.text-body-tertiary{color:#8b95a7!important}
.text-body-emphasis{color:#131720!important}
.text-secondary-emphasis{color:#3c4657!important}
.object-fit-cover{object-fit:cover!important}
.z-1{z-index:1!important}
.z-2{z-index:2!important}
.vr{display:inline-block;align-self:stretch;width:1px;min-height:1em;background-color:currentColor;opacity:.25}
.btn-icon{display:inline-flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;padding:0;flex-shrink:0}
.btn-sm.btn-icon{width:2.125rem;height:2.125rem}
.hover-effect-target{transition:transform .35s ease-in-out,opacity .25s ease-in-out}
.hover-effect-scale:hover .hover-effect-target{transform:scale(1.07)}
.hover-effect-opacity:hover .hover-effect-target{opacity:.88}
.hover-effect-underline{background-image:linear-gradient(currentColor,currentColor);background-size:0% 1px;background-repeat:no-repeat;background-position:left calc(100% - 1px);transition:background-size .3s ease-in-out;padding-bottom:1px}
a.hover-effect-underline:hover,.hover-effect-underline:hover{background-size:100% 1px}
.animate-target{transition:transform .25s ease-in-out,opacity .25s ease-in-out}
.animate-scale:hover .animate-target{transform:scale(1.15)}
.animate-slide-start:hover .animate-target{transform:translateX(-4px)}
.animate-slide-end:hover .animate-target{transform:translateX(4px)}
.animate-pulse:hover .animate-target{animation:fn-pulse 1s ease}
@keyframes fn-pulse{0%{transform:scale(1)}40%{transform:scale(1.25)}100%{transform:scale(1)}}
.animate-shake:hover .animate-target{animation:fn-shake .5s ease}
@keyframes fn-shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-3px)}75%{transform:translateX(3px)}}
.ratio img{object-fit:cover;width:100%;height:100%}
.swiper-pagination-bullet{background:#fff;opacity:.5}
.swiper-pagination-bullet-active{opacity:1}
.nav-pills .nav-link{color:#333a47}
.figure-caption{color:#5d6675}
.breadcrumb-item+.breadcrumb-item::before{float:left;padding-right:.5rem;color:#8b95a7;content:"/"}
.pagination{gap:.25rem}
.page-link{min-width:2.5rem;text-align:center;border:0;border-radius:.5rem;color:#3a4152;background-color:transparent;font-weight:500}
.page-link:hover{background-color:#eef1f6;color:#131720}
.page-link:focus{box-shadow:none}
.page-item.active .page-link{background-color:#e3e9f2;border-color:transparent;color:#131720;font-weight:600}
.page-item.disabled .page-link{background-color:transparent;color:#a7b0c0}
/* Finder nav-pills = nut bo tron vien (blog-layout-v1) */
.nav-pills{gap:.5rem}
.nav-pills .nav-link{border:1px solid #d9dfe9;border-radius:50rem!important;padding:.5rem 1.25rem;color:#333a47;background-color:transparent;font-weight:500;font-size:.875rem}
#blogSidebar .nav-link{font-size:.875rem}
.nav-pills .nav-link:hover{border-color:#9aa5b8;color:#131720}
.nav-pills .nav-link.active,.nav-pills .show>.nav-link{border-color:#131720;color:#131720;background-color:transparent}
.nav-pills .nav-link.border-0{border:0!important;border-radius:0!important;padding-left:0;padding-right:0}
/* Tieu de sidebar detail (Bai viet lien quan / San pham noi bat): 1.25rem nhu mau blog-single-v3 (h4.h5), cach noi dung 30px */
.sb-heading { font-size: 1.25rem; font-weight: 700; color: var(--vp-heading); margin-bottom: 30px; line-height: 1.35; }
.sb-heading-gap { padding-top: 1.5rem; margin-top: 1rem; }
/* TOC kieu WordPress: link muot, indent muc con, heading co scroll-margin tru header sticky */
.sb-toc-link { display: block; font-size: .9rem; color: var(--vp-text); line-height: 1.55; }
.sb-toc-link:hover { color: var(--vp-blue); }
.sb-toc-sub { padding-left: 18px; font-size: .85rem; }
.post-body h2[id], .post-body h3[id], .vp-detail-content h2[id], .vp-detail-content h3[id], .tp-blog-details-content h2[id], .tp-blog-details-content h3[id] { scroll-margin-top: 100px; }
/* Sidebar dinh khi cuon (desktop, khong anh huong offcanvas mobile) */
@media (min-width: 992px) {
	.vp-sidebar-sticky{position:sticky;top:90px;align-self:flex-start}
}
/* Khoi Finder tu co spacing chuan mau: bo padding thua cua wrapper layout */
main > section.layout-row.content-wrap:has(.vp-list-wrap),
main > section.layout-row.content-wrap:has(.s-blog-detail),
main > section.layout-row.content-wrap.s-blog-detail {
	padding-bottom: 0;
}
main > section.layout-row:last-child:has(.vp-list-wrap),
main > section.layout-row:last-child:has(.s-blog-detail),
main > section.layout-row:last-child.content-wrap.s-blog-detail {
	padding-bottom: 0;
}

/* ===== FINDER 100%: base typography + colors (finder-php theme) ===== */
:root{--bs-border-color:#e0e5eb;--bs-border-radius:.5rem;--bs-border-radius-sm:.375rem;--bs-border-radius-lg:.75rem;--bs-border-radius-xl:1rem;--bs-border-radius-xxl:1.25rem}
body{font-family:'Inter','Be Vietnam Pro',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;color:#4e5562}
.h1,.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6{color:#111827;font-weight:700}
.h1,h1{line-height:1.2}.h2,h2{line-height:1.25}.h3,h3{line-height:1.3}.h4,.h5,.h6,h4,h5,h6{line-height:1.35}
.h1 a,.h2 a,.h3 a,.h4 a,.h5 a,.h6 a,h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{color:#111827;text-decoration:none}
.nav-link{color:#333d4c}
.nav-link:focus,.nav-link:hover{color:#111827}
a{color:#0060B0}
a:hover{color:#003E70}
.btn{font-weight:500}
.btn-dark{--bs-btn-bg:#1d2735;--bs-btn-border-color:#1d2735;--bs-btn-hover-bg:#3f4753;--bs-btn-hover-border-color:#343d49;--bs-btn-active-bg:#4a525d;--bs-btn-active-border-color:#4a525d}
.btn-outline-secondary{--bs-btn-color:#6c727f;--bs-btn-border-color:#6c727f;--bs-btn-hover-bg:#6c727f;--bs-btn-hover-border-color:#6c727f;--bs-btn-active-bg:#6c727f;--bs-btn-active-border-color:#6c727f}
.btn-secondary{--bs-btn-bg:#6c727f;--bs-btn-border-color:#6c727f;--bs-btn-hover-bg:#5c636f;--bs-btn-hover-border-color:#5c636f;--bs-btn-active-bg:#5c636f;--bs-btn-active-border-color:#5c636f}
.badge{font-weight:500}
.figure-caption{color:#6c727f}
.card{--bs-card-spacer-y:1.5rem;--bs-card-spacer-x:1.5rem}
.breadcrumb-item.active{color:#9ca3af}
/* Chinh xac gia tri Finder (ghi de uoc luong cu) */
.text-body-secondary{color:#6c727f!important}
.text-body-tertiary{color:#9ca3af!important}
.bg-body-secondary{background-color:#eef1f6!important}
.bg-body-tertiary{background-color:#f5f7fa!important}
.text-body-emphasis{color:#1d2735!important}
.text-secondary-emphasis{color:#333d4c!important}
.nav-pills .nav-link{padding:.5rem 1.25rem}
.pagination{gap:.25rem}
.page-link{padding:.375rem .75rem;font-size:.875rem}
.stretched-link::after{z-index:1}
/* Dark mode fix for Finder overrides */
[data-bs-theme="dark"] body{color:#c3cfe2;background:var(--vp-bg)}
[data-bs-theme="dark"] .h1,[data-bs-theme="dark"] .h2,[data-bs-theme="dark"] .h3,[data-bs-theme="dark"] .h4,[data-bs-theme="dark"] .h5,[data-bs-theme="dark"] .h6,[data-bs-theme="dark"] h1,[data-bs-theme="dark"] h2,[data-bs-theme="dark"] h3,[data-bs-theme="dark"] h4,[data-bs-theme="dark"] h5,[data-bs-theme="dark"] h6{color:#ffffff}
[data-bs-theme="dark"] .h1 a,[data-bs-theme="dark"] .h2 a,[data-bs-theme="dark"] .h3 a,[data-bs-theme="dark"] .h4 a,[data-bs-theme="dark"] .h5 a,[data-bs-theme="dark"] .h6 a,[data-bs-theme="dark"] h1 a,[data-bs-theme="dark"] h2 a,[data-bs-theme="dark"] h3 a,[data-bs-theme="dark"] h4 a,[data-bs-theme="dark"] h5 a,[data-bs-theme="dark"] h6 a{color:#ffffff}
[data-bs-theme="dark"] .nav-link{color:#c3cfe2}
[data-bs-theme="dark"] .nav-link:hover,[data-bs-theme="dark"] .nav-link:focus{color:#ffffff}
[data-bs-theme="dark"] .text-body-secondary{color:#8fa1b9!important}
[data-bs-theme="dark"] .text-body-tertiary{color:#6d7a8c!important}
[data-bs-theme="dark"] .text-body-emphasis{color:#ffffff!important}
[data-bs-theme="dark"] .text-secondary-emphasis{color:#e2e8f0!important}
[data-bs-theme="dark"] .bg-body-secondary{background-color:#1a2332!important}
[data-bs-theme="dark"] .bg-body-tertiary{background-color:#0e1a2f!important}
[data-bs-theme="dark"] .breadcrumb-item.active{color:#6d7a8c}
[data-bs-theme="dark"] .figure-caption{color:#8fa1b9}
[data-bs-theme="dark"] .card{--bs-card-bg:#111e33;background-color:#111e33}
[data-bs-theme="dark"] .vp-detail-content,[data-bs-theme="dark"] .tp-blog-details-content,[data-bs-theme="dark"] .post-body{color:#c3cfe2}
[data-bs-theme="dark"] .vp-card-title a,[data-bs-theme="dark"] .post-item .mz-h-title a{color:#ffffff}
[data-bs-theme="dark"] .logo-img{filter:brightness(0) invert(1)}
[data-bs-theme="dark"] .nav-pills .nav-link{border-color:#3a4a6b;color:#c3cfe2;background:transparent}
[data-bs-theme="dark"] .nav-pills .nav-link:hover{border-color:#5a6d9a;color:#ffffff}
[data-bs-theme="dark"] .nav-pills .nav-link.active{border-color:#ffffff;color:#ffffff;background:transparent}
[data-bs-theme="dark"] .vp-brand-card{background:var(--vp-card);border-color:#2a3a56}
[data-bs-theme="dark"] .vp-brand-logo{background:#0e1a2f}
[data-bs-theme="dark"] .vp-brand-fallback{background:#1a2f4a;color:#9CC3EE}
/* Brands modern grid */
.vp-brands-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:20px}
.vp-brand-card{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:var(--vp-card);border:1px solid var(--vp-line);border-radius:16px;padding:20px 14px;transition:all .2s;text-align:center}
.vp-brand-card:hover{border-color:var(--vp-blue);box-shadow:var(--vp-shadow);transform:translateY(-4px)}
.vp-brand-logo{width:72px;height:72px;display:flex;align-items:center;justify-content:center;background:var(--vp-bg-soft);border-radius:12px;overflow:hidden;flex-shrink:0}
.vp-brand-logo img{width:100%;height:100%;object-fit:contain;padding:8px}
.vp-brand-fallback{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:24px;color:var(--vp-navy);background:var(--vp-sky)}
.vp-brand-name{font-weight:600;font-size:.9rem;color:var(--vp-heading);line-height:1.3}
@media(max-width:1199px){.vp-brands-grid{grid-template-columns:repeat(4,1fr)}}
@media(max-width:991px){.vp-brands-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:575px){.vp-brands-grid{grid-template-columns:repeat(2,1fr);gap:12px}.vp-brand-card{padding:18px 12px}.vp-brand-logo{width:64px;height:64px}}