/* =========================================================
   PROTON FUSION — UI/UX UPGRADE (additive, khong sua theme goc)
   Phase 0: Design system  |  Phase 1: Product detail  |  Phase 2: Article detail
   ========================================================= */
:root{
  --pf-green:#0c7735;
  --pf-green-dark:#0a5f2a;
  --pf-green-soft:#e8f3ec;
  --pf-gold:#e0a82e;
  --pf-gold-dark:#c8941f;
  --pf-ink:#1f2d23;
  --pf-muted:#6b7a70;
  --pf-line:#e4e9e5;
  --pf-radius:14px;
  --pf-shadow:0 8px 30px rgba(12,119,53,.10);
  --pf-shadow-sm:0 4px 14px rgba(0,0,0,.06);
}

/* ---------- Buttons ---------- */
.pf-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:13px 26px;border-radius:10px;font-weight:700;font-size:15px;line-height:1.2;
  text-decoration:none;border:2px solid transparent;cursor:pointer;transition:.22s ease;white-space:nowrap}
.pf-btn:hover{transform:translateY(-2px)}
.pf-btn-primary{background:var(--pf-green);color:#fff;box-shadow:0 6px 18px rgba(12,119,53,.28)}
.pf-btn-primary:hover{background:var(--pf-green-dark);color:#fff}
.pf-btn-gold{background:var(--pf-gold);color:#fff;box-shadow:0 6px 18px rgba(224,168,46,.32)}
.pf-btn-gold:hover{background:var(--pf-gold-dark);color:#fff}
.pf-btn-zalo{background:#0068ff;color:#fff;box-shadow:0 6px 18px rgba(0,104,255,.28)}
.pf-btn-zalo:hover{background:#0055d4;color:#fff}
.pf-btn-outline{background:#fff;color:var(--pf-green);border-color:var(--pf-green)}
.pf-btn-outline:hover{background:var(--pf-green);color:#fff}
.pf-btn-block{width:100%}

/* ---------- Badges ---------- */
.pf-badge{display:inline-flex;align-items:center;gap:5px;padding:4px 11px;border-radius:999px;
  font-size:12px;font-weight:700;letter-spacing:.2px;text-transform:uppercase}
.pf-badge-new{background:#fff3d6;color:#b9810b}
.pf-badge-hot{background:#ffe3e1;color:#d23f33}

/* ---------- Breadcrumb tweak ---------- */
.breadcumb-menu li a:hover{color:var(--pf-gold)}

/* =========================================================
   PHASE 1 — PRODUCT DETAIL
   ========================================================= */
.pf-pd-head{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:8px}
.pf-pd-title{font-size:30px;line-height:1.25;font-weight:800;color:var(--pf-ink);margin:6px 0 10px}
.pf-pd-code{font-size:14px;color:var(--pf-muted)}
.pf-pd-code b{color:var(--pf-green)}
.pf-pd-short{font-size:15.5px;line-height:1.7;color:#4b5a50;margin:14px 0 18px;
  padding-left:14px;border-left:3px solid var(--pf-gold)}

/* info table */
.pf-info{border:1px solid var(--pf-line);border-radius:var(--pf-radius);overflow:hidden;margin-bottom:20px}
.pf-info-row{display:flex;font-size:14.5px}
.pf-info-row:nth-child(odd){background:#fafcfa}
.pf-info-row+.pf-info-row{border-top:1px solid var(--pf-line)}
.pf-info-row .k{flex:0 0 42%;padding:11px 16px;color:var(--pf-muted);font-weight:600}
.pf-info-row .v{padding:11px 16px;color:var(--pf-ink);font-weight:600}

/* CTA box (trang chi tiet SP) — doi ten .pf-pd-cta de tranh dung do voi .pf-cta cua trang gioi thieu (style.min.css) */
.pf-pd-cta{background:linear-gradient(135deg,#f4faf6,#eef7f0);border:1px solid #d8ebdf;
  border-radius:var(--pf-radius);padding:20px;box-shadow:var(--pf-shadow-sm)}
.pf-cta-price{font-size:15px;color:var(--pf-muted);margin-bottom:14px}
.pf-cta-price b{font-size:22px;color:var(--pf-green);font-weight:800}
.pf-cta-actions{display:flex;flex-wrap:wrap;gap:10px}
.pf-cta-actions .pf-btn{flex:1 1 auto}

/* trust badges */
.pf-trust{display:flex;flex-wrap:wrap;gap:14px 22px;margin-top:18px}
.pf-trust span{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;color:#46554b;font-weight:600}
.pf-trust i{color:var(--pf-green);font-size:16px}

/* tabs */
.pf-tabs{margin-top:50px}
.pf-tabs-nav{display:flex;flex-wrap:wrap;gap:6px;border-bottom:2px solid var(--pf-line);margin-bottom:0}
.pf-tab-btn{appearance:none;background:none;border:0;padding:13px 22px;font-size:15px;font-weight:700;
  color:var(--pf-muted);cursor:pointer;border-bottom:3px solid transparent;margin-bottom:-2px;transition:.2s}
.pf-tab-btn:hover{color:var(--pf-green)}
.pf-tab-btn.active{color:var(--pf-green);border-bottom-color:var(--pf-green)}
.pf-tab-panel{display:none;padding:26px 2px;animation:pfFade .3s ease}
.pf-tab-panel.active{display:block}
@keyframes pfFade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* GIỮ NGUYÊN thiết kế overlap gốc của theme: .service-layout1{margin-top:-70px},
   .hero-slide{padding-bottom:175px}, .service-inner{transform:translateY(12%)} — icon vàng
   "nổi" đè lên đáy hero (nửa xanh / nửa trắng). KHÔNG override các giá trị đó nữa.
   CHỈ fix căn giữa icon: slick set .slick-slide img{display:block} phá text-align:center của
   theme khiến icon lệch góc trên-trái; dùng flexbox căn giữa img trong vòng tròn 90px. */
.service-style1 .service-icon{display:flex;align-items:center;justify-content:center}

/* CLS fix trang sản phẩm: trước khi Slick init, chỉ hiện ảnh đầu + giữ khung vuông,
   tránh dồn hết ảnh gallery theo chiều dọc rồi co lại (gây layout shift ~0.44). */
.product-big-img:not(.slick-initialized)>.img:not(:first-child){display:none}
.product-thumb-slide:not(.slick-initialized)>div:not(:first-child){display:none}
.product-big-img .img img{aspect-ratio:1/1;width:100%;height:auto}
.product-thumb-slide .thumb img{aspect-ratio:1/1}

/* Fix: header hotline box (green icon + white text) is absolutely positioned
   over the rotating hero slider. Several hero slides are light in the top-right
   region (brightness 150-170/255) so plain white text is unreadable. Add a
   text-shadow for legibility on ANY slide. Scoped to .header-icons so the footer
   .media-style1 (already on a dark footer bg) is untouched. */
.header-icons .media-style1 .media-title,
.header-icons .media-style1 .media-info a{
  text-shadow:0 1px 4px rgba(0,0,0,.6),0 0 2px rgba(0,0,0,.45)}
.header-icons .media-style1 .media-icon{box-shadow:0 3px 12px rgba(0,0,0,.22)}

/* sticky mobile CTA */
.pf-sticky-cta{position:fixed;left:0;right:0;bottom:0;z-index:999;display:none;gap:10px;
  padding:10px 12px;background:#fff;box-shadow:0 -6px 20px rgba(0,0,0,.12)}
.pf-sticky-cta .pf-btn{flex:1 1 0;padding:13px 8px;font-size:14px}
@media(max-width:991px){
  .pf-sticky-cta{display:flex}
  body:has(.pf-sticky-cta){padding-bottom:74px}
  body.has-sticky-cta{padding-bottom:74px}
  .pf-pd-title{font-size:24px}
}

/* =========================================================
   PHASE 2 — ARTICLE / NEWS DETAIL
   ========================================================= */
.pf-article{max-width:820px;margin:0 auto}
.pf-article-head{margin-bottom:26px}
.pf-article-title{font-size:32px;line-height:1.3;font-weight:800;color:var(--pf-ink);margin:0 0 14px}
.pf-article-meta{display:flex;flex-wrap:wrap;gap:8px 20px;color:var(--pf-muted);font-size:14px;font-weight:600}
.pf-article-meta span{display:inline-flex;align-items:center;gap:7px}
.pf-article-meta i{color:var(--pf-green)}
.pf-article-cover{margin:22px 0 6px;border-radius:var(--pf-radius);overflow:hidden;box-shadow:var(--pf-shadow)}
.pf-article-cover img{width:100%;height:auto;display:block}
.pf-lead{font-size:18px;line-height:1.7;color:#2e3c35;font-weight:500;background:var(--pf-green-soft);border-left:4px solid var(--pf-green);padding:14px 18px;border-radius:0 8px 8px 0;margin:0 0 22px}
.pf-refs{margin:24px 0 10px;padding:12px 16px;background:#f8faf8;border:1px solid var(--pf-line);border-radius:8px;font-size:14px;color:var(--pf-muted)}
.pf-refs strong{color:var(--pf-ink);margin-right:6px}
.pf-refs a{color:var(--pf-green);text-decoration:none;font-weight:600}
.pf-refs a:hover{text-decoration:underline}

/* prose typography cho noi dung CKEditor */
.pf-prose{font-size:17px;line-height:1.85;color:#3a463e}
.pf-prose p{margin:0 0 18px}
.pf-prose h2{font-size:25px;font-weight:800;color:var(--pf-ink);margin:34px 0 14px;line-height:1.35}
.pf-prose h3{font-size:21px;font-weight:700;color:var(--pf-green-dark);margin:28px 0 12px;
  padding-left:14px;border-left:4px solid var(--pf-green);line-height:1.3}
.pf-prose>h3:first-child,.pf-tab-panel>h3:first-child{margin-top:4px}
.pf-prose img{max-width:100%;height:auto;border-radius:10px;margin:10px 0}
.pf-prose ul,.pf-prose ol{margin:0 0 18px;padding-left:22px}
.pf-prose li{margin-bottom:8px}
.pf-prose a{color:var(--pf-green);text-decoration:underline}
.pf-prose blockquote{margin:22px 0;padding:14px 22px;background:var(--pf-green-soft);
  border-left:4px solid var(--pf-green);border-radius:0 10px 10px 0;color:#2f4537;font-style:italic}
.pf-prose table{width:100%;border-collapse:collapse;margin:18px 0;font-size:15.5px}
.pf-prose th,.pf-prose td{border:1px solid var(--pf-line);padding:10px 13px}
.pf-prose th{background:var(--pf-green-soft);color:var(--pf-ink);font-weight:700}

/* share + cta cuoi bai */
.pf-share{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:34px 0;
  padding-top:22px;border-top:1px solid var(--pf-line)}
.pf-share b{color:var(--pf-ink);margin-right:4px}
.pf-share a{width:42px;height:42px;border-radius:50%;display:inline-flex;align-items:center;
  justify-content:center;color:#fff;font-size:16px;transition:.2s}
.pf-share a:hover{transform:translateY(-3px)}
.pf-share .fb{background:#1877f2}.pf-share .zl{background:#0068ff}.pf-share .cp{background:#6b7a70}
.pf-article-cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;
  background:linear-gradient(135deg,#0c7735,#0a5f2a);color:#fff;border-radius:var(--pf-radius);
  padding:24px 28px;margin:36px 0}
.pf-article-cta .t{font-size:19px;font-weight:800;margin:0;color:#fff!important}
.pf-article-cta .s{font-size:14px;margin:4px 0 0;color:rgba(255,255,255,.92)!important}
.pf-article-cta .acts{display:flex;flex-wrap:wrap;gap:10px}
@media(max-width:600px){
  .pf-article-cta{flex-direction:column;align-items:flex-start;text-align:left;padding:20px}
  .pf-article-cta .acts{width:100%}
  .pf-article-cta .acts .pf-btn{flex:1 1 auto;justify-content:center}
}

@media(max-width:767px){
  .pf-article-title{font-size:25px}
  .pf-prose{font-size:16px}
  .pf-pd-title{font-size:23px}
}

/* =========================================================
   PHASE 3 — LISTING (filter/sort, card polish, empty state)
   ========================================================= */
.pf-filterbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:14px;margin-bottom:30px;padding-bottom:18px;border-bottom:1px solid var(--pf-line)}
.pf-chips{display:flex;flex-wrap:wrap;gap:8px}
.pf-chip{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border-radius:999px;
  border:1px solid var(--pf-line);background:#fff;color:#46554b;font-weight:600;font-size:14px;
  text-decoration:none;transition:.2s;cursor:pointer}
.pf-chip:hover{border-color:var(--pf-green);color:var(--pf-green)}
.pf-chip.active{background:var(--pf-green);border-color:var(--pf-green);color:#fff}
.pf-sort{display:flex;align-items:center;gap:8px;color:var(--pf-muted);font-size:14px;font-weight:600}
.pf-sort select{padding:9px 14px;border:1px solid var(--pf-line);border-radius:9px;background:#fff;
  color:var(--pf-ink);font-weight:600;font-size:14px;cursor:pointer}

/* card polish — product-style2 */
.product-style2{background:#fff;border:1px solid var(--pf-line);border-radius:var(--pf-radius);
  overflow:hidden;transition:.25s ease;height:100%}
.product-style2:hover{box-shadow:var(--pf-shadow);transform:translateY(-4px);border-color:#cfe5d6}
.product-style2 .product-img{overflow:hidden;position:relative}
.product-style2 .product-img img{width:100%;transition:transform .45s ease}
.product-style2:hover .product-img img{transform:scale(1.06)}
.product-style2 .product-about{padding:16px 18px 6px}
.product-style2 .product-title{font-size:16.5px;line-height:1.4;margin:4px 0 8px}
.product-style2 .product-title a{color:var(--pf-ink);transition:.2s}
.product-style2 .product-title a:hover{color:var(--pf-green)}
.product-style2 .product-about .text{color:var(--pf-green);font-size:12.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:.3px;margin:0}
.product-style2 .social-style{padding:0 18px 18px}

/* card polish — vs-blog (news) */
.vs-blog.blog-single{transition:.25s ease;border-radius:var(--pf-radius);overflow:hidden}
.vs-blog.blog-single:hover{box-shadow:var(--pf-shadow)}
.vs-blog .blog-img{overflow:hidden;border-radius:10px}
.vs-blog .blog-img img{transition:transform .45s ease;width:100%}
.vs-blog.blog-single:hover .blog-img img{transform:scale(1.05)}
.vs-blog .blog-title a:hover{color:var(--pf-green)}

/* empty state */
.pf-empty{text-align:center;padding:70px 20px;color:var(--pf-muted)}
.pf-empty i{font-size:54px;color:#cfe0d5;margin-bottom:18px;display:block}
.pf-empty p{font-size:17px;margin:0 0 22px}

@media(max-width:600px){
  .pf-filterbar{flex-direction:column;align-items:stretch}
  .pf-sort{justify-content:space-between}
}

/* =========================================================
   PHASE 4 — A11Y + RESPONSIVE POLISH
   ========================================================= */
.pf-btn:focus-visible,.pf-chip:focus-visible,.pf-tab-btn:focus-visible,
.pf-sort select:focus-visible,.pf-share a:focus-visible,.pf-prose a:focus-visible{
  outline:3px solid rgba(12,119,53,.45);outline-offset:2px}
@media(prefers-reduced-motion:reduce){
  .pf-btn,.product-style2,.product-style2 .product-img img,.vs-blog .blog-img img,
  .pf-share a,.pf-tab-panel,.pf-btn:hover{transition:none!important;animation:none!important;transform:none!important}
}
@media(max-width:575px){
  .pf-pd-cta{padding:16px}
  .pf-cta-actions .pf-btn{width:100%}
  .pf-pd-short{font-size:15px}
  .pf-info-row .k{flex-basis:46%}
  .pf-chip{padding:7px 13px;font-size:13px}
  .pf-tab-btn{padding:11px 15px;font-size:14px}
  .pf-share a{width:38px;height:38px}
  /* Zalo icon: dam bao khong cham vao sticky CTA (74px) tren product pages */
  body:has(.pf-sticky-cta) .yc-icon{bottom:86px}
}

/* ===== Trang giới thiệu (dựng theo theme) — bổ sung tối thiểu, namespaced pf-gt ===== */
.service-style1 .service-icon i{font-size:34px;color:var(--secondary-color,#0c7735)}
.pf-gt-stat{text-align:center;padding:10px 0}
.pf-gt-stat .pf-gt-stat-ico{width:74px;height:74px;border-radius:50%;background:rgba(255,255,255,.12);display:flex;align-items:center;justify-content:center;margin:0 auto 16px}
.pf-gt-stat .pf-gt-stat-ico i{font-size:30px;color:#ffd800}
.pf-gt-stat-num{color:#fff;font-size:40px;font-weight:800;line-height:1.1;margin:0 0 4px;font-family:var(--title-font)}
.pf-gt-stat-label{color:rgba(255,255,255,.85);font-size:16px;margin:0}
.pf-gt-feature{display:flex;gap:16px;margin-bottom:20px}
.pf-gt-feature .pf-gt-feature-num{flex:0 0 auto;width:42px;height:42px;border-radius:50%;background:var(--pf-green-soft);color:var(--pf-green);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:15px}
.pf-gt-feature p{margin:0;line-height:1.65}
.pf-gt-img{border-radius:16px;box-shadow:var(--pf-shadow-md,0 18px 40px rgba(12,119,53,.12))}
.pf-gt-cta{background:linear-gradient(145deg,#0a5028,#0c7735)}
.pf-gt-cta .sec-title{color:#fff}
.pf-gt-cta-desc{color:rgba(255,255,255,.9);max-width:640px;margin:0 auto 26px}
.pf-gt-cta .pf-gt-btn-solid{background:var(--theme-color,#ffd800);border-color:var(--theme-color,#ffd800);color:#16331f;font-weight:600}
.pf-gt-cta .pf-gt-btn-solid:hover{background:#fff;border-color:#fff;color:var(--pf-green-dark)}
.pf-gt-cta .pf-gt-btn-ghost{background:transparent;border:2px solid #fff;color:#fff}
.pf-gt-cta .pf-gt-btn-ghost:hover{background:#fff;border-color:#fff;color:var(--pf-green-dark)}
.pf-gt-card .service-title{margin-top:18px}
@media(max-width:991px){.pf-gt-tech-img{margin-bottom:34px}}

/* Animation tối giản — thay animate.min.css (chỉ dùng fadeInLeft/Right/Up).
   Reveal do IntersectionObserver trong index.php thêm class .animated (thay WOW.js
   vốn dò vị trí sai với phần tử trong slick carousel). */
.animated{animation-duration:1s;animation-fill-mode:both}
.animated.fast{animation-duration:.8s}
@keyframes fadeInUp{from{opacity:0;transform:translate3d(0,40px,0)}to{opacity:1;transform:none}}
@keyframes fadeInLeft{from{opacity:0;transform:translate3d(-40px,0,0)}to{opacity:1;transform:none}}
@keyframes fadeInRight{from{opacity:0;transform:translate3d(40px,0,0)}to{opacity:1;transform:none}}
.fadeInUp{animation-name:fadeInUp}
.fadeInLeft{animation-name:fadeInLeft}
.fadeInRight{animation-name:fadeInRight}
/* Bảo đảm phần tử .wow khi được reveal luôn có duration + hiện rõ, bất kể rule
   .animated{animation-name:var(--animation-name)} xung đột từ style.min.css */
.wow.animated{animation-duration:1s;animation-fill-mode:both;visibility:visible!important}
@media(prefers-reduced-motion:reduce){.animated{animation:none!important}}

/* Khối "Sản phẩm cùng danh mục" */
.pf-related-head{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:8px;
  margin:6px 0 22px;padding-top:26px;border-top:1px solid var(--pf-line)}
.pf-related-head h2{font-size:24px;font-weight:800;color:var(--pf-ink);margin:0;position:relative;padding-left:14px;line-height:1.3}
.pf-related-head h2:before{content:"";position:absolute;left:0;top:4px;bottom:4px;width:5px;border-radius:3px;background:var(--pf-green)}
.pf-related-hint{display:none;font-size:13px;color:var(--pf-muted)}
.pf-related-hint i{color:var(--pf-green);animation:pfSwipe 1.4s ease-in-out infinite}
@keyframes pfSwipe{0%,100%{transform:translateX(0)}50%{transform:translateX(5px)}}

@media(max-width:767px){
  .pf-related-hint{display:inline-flex;align-items:center;gap:5px}
  .pf-related-grid{display:flex;flex-wrap:nowrap;overflow-x:auto;gap:12px;
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    margin:0 -15px;padding:2px 15px 14px;scrollbar-width:none}
  .pf-related-grid::-webkit-scrollbar{display:none}
  .pf-related-grid>[class*="col-"]{flex:0 0 47%;max-width:47%;width:47%;scroll-snap-align:start;padding:0}
  .pf-related-grid .product-style2{height:100%}
}
@media(max-width:479px){
  .pf-related-grid>[class*="col-"]{flex-basis:64%;max-width:64%;width:64%}
}

/* Bảng thành phần sản phẩm */
.pf-spec-table{width:100%;border-collapse:collapse;margin:4px 0 14px;font-size:15px;border:1px solid var(--pf-line);border-radius:10px;overflow:hidden}
.pf-spec-table th,.pf-spec-table td{padding:11px 16px;text-align:left;border-bottom:1px solid var(--pf-line)}
.pf-spec-table thead th{background:var(--pf-green);color:#fff;font-weight:600;letter-spacing:.2px}
.pf-spec-table tbody tr:nth-child(even){background:var(--pf-green-soft)}
.pf-spec-table tbody tr:last-child td{border-bottom:0}
.pf-spec-table td:last-child{font-weight:600;color:var(--pf-green-dark);white-space:nowrap}
.pf-spec-note{margin:6px 0 0;font-size:13px;color:var(--pf-muted)}
@media(max-width:575px){
  .pf-spec-table{font-size:14px}
  .pf-spec-table th,.pf-spec-table td{padding:9px 12px}
}

/* ===== Carousel trang chủ (Sản phẩm tiêu biểu + Bài viết mới nhất) — tối ưu mobile ===== */
/* Chấm điều hướng rõ ràng, dễ chạm, dạng pill khi active */
.product-layout2 .slick-dots,.blog-layout2 .slick-dots{position:static;display:flex!important;justify-content:center;align-items:center;gap:8px;margin-top:22px;padding:0;list-style:none}
.product-layout2 .slick-dots li,.blog-layout2 .slick-dots li{width:auto;height:auto;margin:0}
.product-layout2 .slick-dots li button,.blog-layout2 .slick-dots li button{width:9px;height:9px;padding:0;border:0;border-radius:50%;background:var(--pf-line);text-indent:-9999px;overflow:hidden;transition:all .25s ease;cursor:pointer}
.product-layout2 .slick-dots li button:before,.blog-layout2 .slick-dots li button:before{display:none!important}
.product-layout2 .slick-dots li.slick-active button,.blog-layout2 .slick-dots li.slick-active button{width:26px;border-radius:5px;background:var(--pf-green)}

@media(max-width:767px){
  /* Card sản phẩm 2-up: gọn, đều chiều cao, dễ chạm */
  .product-layout2 .vs-carousel .product-style2{margin:0 6px}
  .product-layout2 .product-style2 .product-title{font-size:15px;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:41px}
  .product-layout2 .product-style2 .product-about .text-2{display:none}
  .product-layout2 .product-style2 .product-about .text{font-size:12px;margin-bottom:4px}
  .product-layout2 .product-style2 .vs-btn{padding:7px 14px;font-size:13px}
  .product-layout2 .title-area{margin-bottom:8px}

  /* Bài viết 1-up: ảnh landscape trên, chữ dưới, mô tả 2 dòng */
  .blog-layout2 .vs-blog{margin:0 4px}
  .blog-layout2 .vs-blog .blog-img{margin-bottom:14px}
  .blog-layout2 .vs-blog .blog-img img{width:100%;height:200px;object-fit:cover;border-radius:12px}
  .blog-layout2 .vs-blog .blog-title{font-size:18px;line-height:1.4;margin-bottom:8px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .blog-layout2 .vs-blog .blog-text{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:14px;line-height:1.6;margin-bottom:10px}
  /* giảm khoảng trắng section trên mobile */
  .product-layout2.space,.blog-layout2.space{padding-top:48px;padding-bottom:48px}
}

/* ---- FAQ accordion (pf-faq) ---- */
.pf-faq{margin:28px 0 18px;border:1px solid var(--pf-line);border-radius:12px;overflow:hidden}
.pf-faq>h3{background:var(--pf-green-soft);color:var(--pf-green);padding:14px 18px;font-size:16px;margin:0;border-bottom:1px solid var(--pf-line)}
.pf-faq details{border-bottom:1px solid var(--pf-line)}
.pf-faq details:last-child{border-bottom:none}
.pf-faq summary{cursor:pointer;padding:13px 18px;font-weight:600;font-size:15px;color:var(--pf-ink);list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px;user-select:none;transition:.15s}
.pf-faq summary:hover{background:var(--pf-green-soft);color:var(--pf-green)}
.pf-faq summary::-webkit-details-marker{display:none}
.pf-faq summary::after{content:"＋";font-size:18px;color:var(--pf-green);flex-shrink:0;transition:.2s}
.pf-faq details[open]>summary::after{content:"－"}
.pf-faq details[open]>summary{color:var(--pf-green)}
.pf-faq details p{padding:2px 18px 14px;color:#3a4a3e;line-height:1.75;font-size:14px;margin:0}
.pf-faq details ul{padding:2px 18px 14px 36px;color:#3a4a3e;font-size:14px;line-height:1.75}
@media(max-width:600px){.pf-faq summary{font-size:14px;padding:11px 14px}.pf-faq details p,.pf-faq details ul{padding-left:14px;padding-right:14px}}