/* =====================================================================
   VTMN — TRANG CHỦ MỚI (27/09/2026) · CSS cho shortcode [vtmn_trang_chu]
   Chỉ nạp ở trang có shortcode (xem includes/vtmn-trang-chu.php).
   Chép từ mockup đã duyệt: https://vattumiennam.vn/mockup/trang-chu/
   Tài liệu: ke-hoach-nang-cap/01b-thiet-ke-ui-trang-chu.md
   ---------------------------------------------------------------------
   · Mọi class tiền tố "vh-" và bám dưới .vh → không đụng CSS cũ (154 luật ".home …",
     luật vtmn-home-*) và không bị CSS chung của Flatsome (button, blockquote, p, ul…) phá.
   · Token đặt trên .vh (không trên :root) để khỏi trùng tên biến ở chỗ khác.
   · Thứ tự: máy tính trước → @media (max-width:849px) → @media (max-width:549px),
     nằm gọn trong file này (không thêm vào cuối style.css).
   LUẬT ÍT MÀU: trắng + gradient xanh trời nhạt #DDEFFF (chỉ làm nền khối) + 2 xám chữ + 2 xám viền
   + ĐÚNG 1 màu nhấn #1C55DA. Không cam, không đỏ, không màu riêng từng nhóm hàng, không đổ bóng.
   ===================================================================== */
.vh{
  --c-bg:#FFFFFF;
  --c-soft:#F3F5F8;        /* số đếm tab */
  --c-line:#E2E6EB;        /* viền 1px */
  --c-line-2:#CFD4DC;      /* viền nút viền, viền khi rê chuột */
  --c-ink:#1F2937;         /* chữ đậm — 14,7:1 */
  --c-muted:#5B6474;       /* chữ phụ — 6,0:1 */
  --c-brand:#1C55DA;       /* màu nhấn duy nhất — 6,25:1 */
  --c-brand-d:#1546B4;     /* rê chuột */
  --c-dot:#7A879C;         /* chấm slider chưa chọn — 3,6:1 */
  --bg-hero:linear-gradient(198.23deg,#DDEFFF 29.05%,rgba(255,255,255,0) 77.49%);  /* anh Vinh chọn */
  --bg-sec:linear-gradient(198.23deg,#DDEFFF 29.05%,rgba(255,255,255,0) 60.49%);   /* anh Vinh chọn */
  --fs-xs:13px; --fs-sm:15px; --fs-md:17px; --fs-lg:21px; --fs-xl:30px; --fs-2xl:42px;
  --fw-r:400; --fw-sb:600; --fw-b:700;
  --lh-tight:1.25; --lh:1.6;
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --sp-7:48px; --sp-8:72px;
  --sec-pad:var(--sp-8); --gut:24px; --gap:20px; --container:1320px; --btn-h:48px;
  --r-sm:8px; --r-md:12px; --r-pill:999px; --r-card:8px;
  --bd:1px solid var(--c-line); --bd-2:1px solid var(--c-line-2);
  --focus:0 0 0 3px #fff,0 0 0 5px var(--c-brand);

  color:var(--c-ink);font-size:var(--fs-sm);line-height:var(--lh);font-weight:var(--fw-r);
  overflow-x:hidden;overflow-x:clip;
}

/* ---------- chặn CSS chung của Flatsome / theme con bên trong .vh ----------
   Độ ưu tiên (0,1,1): thắng luật thẻ trần của Flatsome (h2, p, ul li, a, blockquote, button…)
   nhưng THUA mọi luật ".vh .vh-xxx" (0,2,0) bên dưới — nên luật riêng từng khối luôn được áp.
   (27/09: bản đầu dùng :where(.vh) độ ưu tiên 0 → thua flatsome.css, lộ chấm đầu dòng + link đen.) */
.vh *,.vh *::before,.vh *::after{box-sizing:border-box}
.vh :is(h1,h2,h3,p,figure,blockquote,ul,ol,li){margin:0;padding:0}
.vh :is(ul,ol,li){list-style:none}
.vh blockquote{border:0;background:none;font-style:normal;font-size:inherit;quotes:none}
.vh blockquote::before,.vh blockquote::after{content:none}
.vh :is(h1,h2,h3){color:var(--c-ink);text-transform:none;letter-spacing:normal;font-family:inherit}
.vh a{color:var(--c-brand);text-decoration:none}
.vh a:hover{color:var(--c-brand-d)}
.vh img{display:block;max-width:100%;height:auto}
.vh button{font:inherit;color:inherit;text-transform:none;letter-spacing:normal;margin:0;padding:0;min-height:0;line-height:1;background:none;border:0;box-shadow:none;border-radius:0;cursor:pointer}
.vh :focus-visible{outline:none;box-shadow:var(--focus);border-radius:var(--r-sm)}
.vh [id]{scroll-margin-top:16px}

.vh-wrap{max-width:calc(var(--container) + 2*var(--gut));margin:0 auto;padding:0 var(--gut)}
.vh-ic{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.vh-ic-arw{width:16px;height:16px;transition:transform .15s}

/* ============================ KHUNG KHỐI ============================ */
.vh-sec{padding:var(--sec-pad) 0;background:var(--bg-sec),var(--c-bg)}

/* đầu khối: tiêu đề + 1 dòng mô tả … link "Xem tất cả" bên phải */
.vh-head{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:var(--sp-5);align-items:end;margin-bottom:var(--sp-6)}
.vh-head .vh-title,.vh-head .vh-desc{grid-column:1}
.vh-head .vh-more-top{grid-column:2;grid-row:1 / span 2;align-self:end}
.vh .vh-title{text-wrap:balance;font-size:var(--fs-xl);font-weight:var(--fw-b);line-height:var(--lh-tight);letter-spacing:-.01em;color:var(--c-ink)}
.vh .vh-desc{margin-top:var(--sp-3);color:var(--c-muted);font-size:var(--fs-sm);max-width:760px}
.vh .vh-desc b{color:var(--c-ink);font-weight:var(--fw-sb)}

/* link "Xem tất cả" + nút "Xem tất cả" cuối khối (chỉ điện thoại) */
.vh .vh-more{display:inline-flex;align-items:center;gap:6px;font-weight:var(--fw-sb);font-size:var(--fs-sm);white-space:nowrap;min-height:44px}
.vh-more:hover .vh-ic-arw,.vh-card-cta:hover .vh-ic-arw,.vh-more-bottom:hover .vh-ic-arw{transform:translateX(3px)}
.vh .vh-more-bottom{display:none}
.vh .vh-swipe{display:none}

/* nút: 1 kiểu đặc (tối đa 1 nút / khối) + 1 kiểu viền */
.vh .vh-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);min-height:var(--btn-h);padding:0 22px;border-radius:var(--r-sm);font-weight:var(--fw-sb);font-size:var(--fs-sm);line-height:1.2;border:1px solid transparent;text-transform:none;letter-spacing:normal;transition:background .15s,border-color .15s}
.vh .vh-btn-primary{background:var(--c-brand);color:#fff}
.vh .vh-btn-primary:hover{background:var(--c-brand-d);color:#fff}
.vh .vh-btn-line{background:var(--c-bg);border-color:var(--c-line-2);color:var(--c-ink)}
.vh .vh-btn-line .vh-ic{color:var(--c-brand)}
.vh .vh-btn-line:hover{border-color:var(--c-brand);color:var(--c-ink)}

/* ============================ SLIDER ĐẦU TRANG ============================
   3 slide cuộn ngang scroll-snap (vuốt được) + chấm + mũi tên — JS: assets/js/vtmn-trang-chu.js */
.vh .vh-hero{padding:var(--sp-7) 0 var(--sp-6);background:var(--bg-hero),var(--c-bg)}
.vh-hs{position:relative}
.vh-hs-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;overscroll-behavior-x:contain}
.vh-hs-track::-webkit-scrollbar{display:none}
.vh-hs-slide{flex:0 0 100%;min-width:0;scroll-snap-align:start;scroll-snap-stop:always;display:grid;grid-template-columns:minmax(0,1fr) 540px;gap:var(--sp-8);align-items:center;padding:var(--sp-2) 2px}
.vh .vh-kicker{font-size:var(--fs-xs);font-weight:var(--fw-sb);letter-spacing:.08em;text-transform:uppercase;color:var(--c-muted);line-height:1.3;margin-bottom:var(--sp-3)}
.vh .vh-hs-title{text-wrap:balance;font-size:var(--fs-2xl);line-height:1.18;font-weight:var(--fw-b);letter-spacing:-.02em;color:var(--c-ink);max-width:620px}
.vh .vh-lead{margin-top:var(--sp-4);font-size:var(--fs-md);color:var(--c-muted);max-width:560px;text-wrap:pretty}
.vh-actions{display:flex;flex-wrap:wrap;gap:var(--sp-3);margin-top:var(--sp-6)}
.vh .vh-meta{display:flex;flex-wrap:wrap;gap:var(--sp-2) var(--sp-5);margin-top:var(--sp-5);font-size:var(--fs-xs);color:var(--c-muted)}
.vh .vh-meta li{display:flex;align-items:center;gap:6px}
.vh-meta .vh-ic{width:18px;height:18px}

/* hình bên phải: 1 ảnh lớn + 2 ảnh nhỏ, thẻ trắng viền 1px, KHÔNG đổ bóng */
.vh .vh-hs-visual{position:relative;display:grid;grid-template-columns:1.35fr 1fr;grid-template-rows:1fr 1fr;gap:var(--sp-4);height:420px;margin:0}
.vh .vh-hs-ph{position:relative;display:block;min-height:0;background:var(--c-bg);border:var(--bd);border-radius:16px;overflow:hidden;color:var(--c-ink)}
.vh-hs-ph--big{grid-row:1 / span 2}
.vh .vh-hs-ph img{width:100%;height:100%;object-fit:cover;transition:transform .3s}
.vh-hs-ph:hover img{transform:scale(1.03)}
.vh .vh-hs-ph:hover{border-color:var(--c-line-2)}
.vh .vh-hs-cap{position:absolute;left:12px;bottom:12px;max-width:calc(100% - 24px);padding:6px 12px;background:rgba(255,255,255,.95);border:var(--bd);border-radius:var(--r-pill);font-size:var(--fs-xs);font-weight:var(--fw-sb);line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--c-ink)}
.vh .vh-hs-ph:hover .vh-hs-cap{color:var(--c-brand)}
.vh .vh-hs-stat{position:absolute;left:12px;top:12px;padding:6px 12px;background:rgba(255,255,255,.95);border:var(--bd);border-radius:var(--r-pill);font-size:var(--fs-xs);color:var(--c-muted);line-height:1.3}
.vh-hs-stat b{color:var(--c-ink);font-weight:var(--fw-b)}
/* slide 2: hình đo 3 số trong 1 thẻ trắng */
.vh .vh-hs-visual--measure{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sp-4);background:var(--c-bg);border:var(--bd);border-radius:16px;padding:var(--sp-6)}
.vh-hs-visual--measure .vh-measure{width:100%;max-width:440px;height:auto}
.vh .vh-hs-visual--measure figcaption{font-size:var(--fs-xs);color:var(--c-muted);text-align:center}
.vh-hs-visual--measure figcaption b{color:var(--c-ink);font-weight:var(--fw-sb)}

/* điều khiển: chấm dạng vạch + 2 mũi tên tròn */
.vh-hs-nav{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);margin-top:var(--sp-5)}
.vh-hs-dots{display:flex;align-items:center}
.vh .vh-hs-dot{width:44px;height:44px;padding:0;display:grid;place-items:center}
.vh-hs-dot::before{content:"";width:22px;height:4px;border-radius:4px;background:var(--c-dot);transition:width .2s,background .2s}
.vh-hs-dot[aria-current="true"]::before{width:40px;background:var(--c-brand)}
.vh-hs-dot:hover::before{background:var(--c-brand)}
.vh-hs-arrows{display:flex;gap:var(--sp-2)}
.vh .vh-sbtn{width:44px;height:44px;border-radius:50%;border:var(--bd-2);background:var(--c-bg);display:grid;place-items:center;color:var(--c-ink)}
.vh .vh-sbtn:hover{border-color:var(--c-brand);color:var(--c-brand)}
.vh .vh-sbtn[disabled]{opacity:.4;cursor:default;border-color:var(--c-line);color:var(--c-ink)}

/* ============================ DANH MỤC ============================ */
.vh-cat-list{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-3)}
.vh .vh-cat{display:flex;align-items:center;gap:var(--sp-4);padding:var(--sp-3);background:var(--c-bg);border:var(--bd);border-radius:var(--r-md);color:var(--c-ink);min-height:88px;height:100%}
.vh .vh-cat img{width:64px;height:64px;border-radius:var(--r-sm);object-fit:cover;flex:none}
.vh-cat-tx{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.35}
.vh-cat-tx b{font-weight:var(--fw-sb);font-size:var(--fs-sm)}
.vh-cat-tx small{font-size:var(--fs-xs);color:var(--c-muted);margin-top:2px}
.vh-ic-chev{width:18px;height:18px;color:var(--c-muted)}
.vh .vh-cat:hover{border-color:var(--c-line-2);color:var(--c-ink)}
.vh-cat:hover b{color:var(--c-brand)}

/* ============================ THẺ SẢN PHẨM ============================
   viền 1px, bo nhẹ 8px (anh Vinh 27/09/2026) — mọi khối, kể cả trong khung tab */
.vh-grid{display:grid;gap:var(--gap)}
.vh-col{min-width:0}
.vh .vh-card{height:100%;display:flex;flex-direction:column;background:var(--c-bg);border:var(--bd);border-radius:var(--r-card);overflow:hidden;transition:border-color .15s}
.vh .vh-card:hover{border-color:var(--c-line-2)}
.vh .vh-card-img{display:block}
.vh .vh-card-img img{width:100%;height:auto;aspect-ratio:1;object-fit:cover}
.vh-card-tx{flex:1;display:flex;flex-direction:column;justify-content:space-between;gap:var(--sp-2);padding:var(--sp-3) var(--sp-4) var(--sp-2);border-top:var(--bd)}
.vh .vh-card-name{font-size:var(--fs-sm);font-weight:var(--fw-sb);line-height:1.4}
.vh .vh-card-name a{color:var(--c-ink)}
.vh .vh-card-name a:hover{color:var(--c-brand)}
.vh .vh-card-cta{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-sm);font-weight:var(--fw-sb);min-height:40px;align-self:flex-start}

/* lưới 5 cột */
.vh-grid-5{grid-template-columns:repeat(5,1fr)}

/* phốt thủy lực: cột giới thiệu + hàng cuộn ngang (CSS scroll-snap) */
.vh-intro-layout{display:grid;grid-template-columns:300px minmax(0,1fr);gap:var(--sp-7);align-items:start}
.vh-intro-col .vh-desc{margin-bottom:var(--sp-2)}
.vh-intro-main{min-width:0}
.vh-scroll-ctl{margin-top:var(--sp-5);padding-top:var(--sp-4);border-top:var(--bd)}
.vh-scroll-note{display:block;font-size:var(--fs-xs);color:var(--c-muted);margin-bottom:var(--sp-3)}
.vh-scroll-btns{display:flex;gap:var(--sp-2)}
.vh .vh-scroll-row{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding-bottom:var(--sp-4);scrollbar-width:thin;scrollbar-color:var(--c-line-2) transparent}
.vh-scroll-row > .vh-col{flex:0 0 calc((100% - 3*var(--gap)) / 4.3);scroll-snap-align:start}

/* phụ kiện: danh sách 3 cột (ảnh nhỏ bên trái) */
.vh .vh-list-3{grid-template-columns:repeat(3,1fr);gap:var(--sp-3) var(--gap)}
.vh .vh-list-3 .vh-card{flex-direction:row;align-items:center}
.vh .vh-list-3 .vh-card-img{flex:0 0 104px;align-self:stretch;border-right:var(--bd)}
.vh .vh-list-3 .vh-card-img img{width:104px;height:100%;min-height:104px}
.vh .vh-list-3 .vh-card-tx{border-top:0;justify-content:center;gap:0;padding:var(--sp-3) var(--sp-4)}
.vh .vh-list-3 .vh-card-cta{min-height:36px}

/* chọn nhanh: 1 khung trắng viền 1px, tab gạch chân */
.vh .vh-tabbox{background:var(--c-bg);border:var(--bd);border-radius:var(--r-md);padding:0 var(--sp-5) var(--sp-5)}
.vh .vh-tabs{display:flex;gap:var(--sp-6);border-bottom:var(--bd);margin:0 calc(-1*var(--sp-5)) var(--sp-5);padding:0 var(--sp-5);overflow-x:auto;scrollbar-width:none}
.vh-tabs::-webkit-scrollbar{display:none}
.vh .vh-tab{flex:none}
.vh .vh-tab a{display:flex;align-items:center;gap:var(--sp-2);min-height:56px;color:var(--c-muted);font-weight:var(--fw-sb);font-size:var(--fs-sm);white-space:nowrap;box-shadow:inset 0 -2px 0 transparent}
.vh .vh-tab a:hover{color:var(--c-ink)}
.vh .vh-tab.vh-on a{color:var(--c-ink);box-shadow:inset 0 -2px 0 var(--c-brand)}
.vh-tab-n{display:inline-grid;place-items:center;min-width:24px;height:22px;padding:0 6px;border-radius:var(--r-pill);background:var(--c-soft);color:var(--c-muted);font-size:var(--fs-xs);font-weight:var(--fw-sb);line-height:1}
.vh-tab.vh-on .vh-tab-n{color:var(--c-ink)}
.vh-panel{display:none}
.vh-panel.vh-on{display:block}
.vh .vh-tab-more{margin-top:var(--sp-4);padding-top:var(--sp-2);border-top:var(--bd)}

/* ============================ ĐÁNH GIÁ ============================ */
.vh-rv-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap)}
.vh .vh-rv{display:flex;flex-direction:column;justify-content:space-between;gap:var(--sp-5);padding:var(--sp-5) 0 0;border-top:var(--bd)}
.vh .vh-rv blockquote{font-size:var(--fs-sm);line-height:var(--lh);color:var(--c-ink)}
.vh-rv figcaption{display:flex;align-items:center;gap:var(--sp-3)}
.vh-rv-av{width:40px;height:40px;border-radius:50%;border:var(--bd);display:grid;place-items:center;font-weight:var(--fw-sb);color:var(--c-brand);background:var(--c-bg);flex:none}
.vh-rv figcaption b{display:block;font-size:var(--fs-sm);font-weight:var(--fw-sb)}
.vh-rv figcaption small{display:block;font-size:var(--fs-xs);color:var(--c-muted)}

/* ============================ HỖ TRỢ + BÁO GIÁ (#bao-gia) ============================ */
.vh-sv-layout{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,4fr) minmax(0,4fr);gap:var(--sp-7);align-items:center}
.vh .vh-sv-lead{text-wrap:balance;margin-top:var(--sp-5);font-size:var(--fs-md);color:var(--c-ink);max-width:460px}
.vh-sv-intro .vh-actions{margin-top:var(--sp-5)}
.vh .vh-sv-hours{display:flex;align-items:center;gap:6px;margin-top:var(--sp-4);font-size:var(--fs-xs);color:var(--c-muted)}
.vh-sv-hours .vh-ic{width:18px;height:18px}
.vh .vh-sv-measure{background:var(--c-bg);border:var(--bd);border-radius:var(--r-md);padding:var(--sp-5)}
.vh-measure{display:block;width:100%;max-width:340px;height:auto;margin:0 auto;color:var(--c-brand)}
.vh-ms-part path,.vh-ms-part rect{fill:var(--c-soft);stroke:var(--c-muted);stroke-width:1.6}
.vh-ms-hidden path{fill:none;stroke:var(--c-muted);stroke-width:1.2;stroke-dasharray:4 4}
.vh-ms-ext path{fill:none;stroke:var(--c-line-2);stroke-width:1.2}
.vh-ms-dim path{fill:none;stroke:var(--c-brand);stroke-width:1.6}
.vh-ms-tx text{font:600 16px Inter,system-ui,sans-serif;fill:var(--c-ink)}
.vh .vh-sv-measure figcaption{text-wrap:pretty;margin-top:var(--sp-4);padding-top:var(--sp-3);border-top:var(--bd);color:var(--c-muted);font-size:var(--fs-sm)}
.vh-sv-measure figcaption b{color:var(--c-ink);font-weight:var(--fw-sb)}
.vh-sv-items{display:flex;flex-direction:column}
.vh-sv-item{display:flex;gap:var(--sp-4);padding:var(--sp-5) 0}
.vh-sv-item + .vh-sv-item{border-top:var(--bd)}
.vh-sv-item:first-child{padding-top:0}
.vh-sv-item:last-child{padding-bottom:0}
.vh-ic-sv{width:28px;height:28px;color:var(--c-brand)}
.vh .vh-sv-item h3{font-size:var(--fs-lg);font-weight:var(--fw-b);line-height:var(--lh-tight);margin-bottom:var(--sp-2)}
.vh .vh-sv-item p{color:var(--c-muted)}
.vh .vh-sv-item .vh-more{margin-top:var(--sp-1)}

/* =========================== TABLET ≤849px =========================== */
@media (max-width:849px){
  .vh{--fs-md:16px;--fs-lg:19px;--fs-xl:26px;--fs-2xl:34px;--sec-pad:56px;--gut:20px;--gap:16px}
  .vh-hs-slide{grid-template-columns:1fr;gap:var(--sp-6);align-items:start;align-content:start}   /* slide ngắn: chỗ trống dồn xuống dưới */
  .vh .vh-hs-visual{height:320px}
  .vh-cat-list{grid-template-columns:repeat(2,1fr)}
  .vh-grid-5{grid-template-columns:repeat(3,1fr)}
  .vh-topseal .vh-grid-5 > .vh-col:nth-child(n+7){display:none}   /* tablet: 6 thẻ */
  .vh-intro-layout{grid-template-columns:1fr;gap:var(--sp-5)}
  .vh-scroll-ctl{display:none}
  .vh .vh-swipe{display:flex;align-items:center;gap:6px;font-size:var(--fs-xs);color:var(--c-muted);margin-bottom:var(--sp-3)}
  .vh-swipe .vh-ic{width:18px;height:18px}
  .vh .vh-swipe--sm{display:none}
  .vh-scroll-row > .vh-col{flex-basis:calc((100% - 2*var(--gap)) / 2.6)}
  /* chọn nhanh: lưới trong tab thành hàng cuộn ngang */
  .vh .vh-tabbox .vh-grid-5{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 calc(-1*var(--sp-5));padding:0 var(--sp-5) var(--sp-3);scroll-padding:0 var(--sp-5);scrollbar-width:thin;scrollbar-color:var(--c-line-2) transparent}
  .vh-tabbox .vh-grid-5 > .vh-col{flex:0 0 calc((100% - 2*var(--gap)) / 2.6);scroll-snap-align:start}
  .vh .vh-tabs{mask-image:linear-gradient(to right,#000 calc(100% - 48px),transparent);-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 48px),transparent);padding-right:48px}
  .vh .vh-list-3{grid-template-columns:repeat(2,1fr)}
  .vh-rv-grid{grid-template-columns:repeat(2,1fr);gap:var(--sp-6) var(--gap)}
  .vh-sv-layout{grid-template-columns:1fr 1fr;gap:var(--sp-6) var(--sp-5)}
  .vh-sv-items{grid-column:1 / -1;flex-direction:row;gap:var(--sp-5)}
  .vh-sv-item,.vh-sv-item:first-child,.vh-sv-item:last-child{flex:1;padding:0}
  .vh-sv-item + .vh-sv-item{border-top:0;border-left:var(--bd);padding-left:var(--sp-5)}
}

/* =========================== ĐIỆN THOẠI ≤549px =========================== */
@media (max-width:549px){
  .vh{--fs-md:16px;--fs-lg:18px;--fs-xl:23px;--fs-2xl:28px;--sec-pad:36px;--gut:16px;--gap:12px}

  /* đầu khối: "Xem tất cả" xuống cuối khối */
  .vh-head{display:block;margin-bottom:var(--sp-5)}
  .vh .vh-more-top{display:none}
  .vh .vh-more-bottom,.vh .vh-tab-more .vh-more{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;min-height:var(--btn-h);margin-top:var(--sp-4);padding:0 var(--sp-4);border:var(--bd-2);border-radius:var(--r-sm);background:var(--c-bg);font-weight:var(--fw-sb);font-size:var(--fs-sm);white-space:normal;text-align:center}
  .vh .vh-swipe--sm{display:flex}

  .vh .vh-hero{padding:var(--sp-5) 0 var(--sp-4)}
  .vh-hs-slide{gap:var(--sp-5)}
  .vh .vh-lead{font-size:var(--fs-sm);margin-top:var(--sp-3)}
  .vh-actions{flex-direction:column;margin-top:var(--sp-5)}
  .vh-actions .vh-btn{width:100%}
  .vh .vh-meta{flex-direction:column;margin-top:var(--sp-4)}
  /* ảnh slider: 3 ô vuông 1 hàng, chú thích ẩn (link vẫn có aria-label) */
  .vh .vh-hs-visual{height:auto;grid-template-columns:repeat(3,1fr);grid-template-rows:auto;gap:var(--sp-2)}
  .vh-hs-ph--big{grid-row:auto}
  .vh .vh-hs-ph{border-radius:var(--r-md)}
  .vh .vh-hs-ph img{height:auto;aspect-ratio:1}
  .vh .vh-hs-cap,.vh .vh-hs-stat{display:none}
  .vh .vh-hs-visual--measure{padding:var(--sp-4);gap:var(--sp-3)}
  .vh-hs-visual--measure .vh-measure{max-height:170px}
  .vh-hs-nav{margin-top:var(--sp-4)}

  .vh-cat-list{grid-template-columns:1fr;gap:0;background:var(--c-bg);border:var(--bd);border-radius:var(--r-md);overflow:hidden}
  .vh .vh-cat{border:0;border-radius:0;min-height:60px;padding:var(--sp-2) var(--sp-4) var(--sp-2) var(--sp-2);gap:var(--sp-3)}
  .vh-cat-list li + li .vh-cat{border-top:var(--bd)}
  .vh .vh-cat img{width:44px;height:44px}

  /* phốt chắn dầu: lưới 2 cột, 4 thẻ đầu + nút "Xem tất cả" */
  .vh-grid-5{grid-template-columns:repeat(2,1fr)}
  .vh-topseal .vh-grid-5 > .vh-col:nth-child(n+5){display:none}
  .vh-card-tx{padding:var(--sp-3) var(--sp-3) var(--sp-1);gap:0}
  .vh .vh-card-cta{min-height:44px}
  .vh .vh-card-name a{display:flex;align-items:center;min-height:44px}   /* vùng bấm ≥44px */
  /* phốt thủy lực + chọn nhanh: hàng vuốt ngang tràn mép, thẻ rộng 44% */
  .vh .vh-scroll-row{margin:0 calc(-1*var(--gut));padding:0 var(--gut) var(--sp-3);scroll-padding:0 var(--gut)}
  .vh-scroll-row > .vh-col{flex-basis:44%}
  .vh .vh-tabbox{padding:0 var(--sp-3) var(--sp-3)}
  .vh .vh-tabs{gap:var(--sp-5);margin:0 calc(-1*var(--sp-3)) var(--sp-4);padding:0 48px 0 var(--sp-3)}
  .vh .vh-tabbox .vh-grid-5{margin:0 calc(-1*var(--sp-3));padding:0 var(--sp-3) var(--sp-3);scroll-padding:0 var(--sp-3)}
  .vh-tabbox .vh-grid-5 > .vh-col{flex-basis:44%}
  .vh .vh-tab-more{border-top:0;padding-top:0;margin-top:0}
  /* phụ kiện: 1 cột, 4 dòng đầu + nút */
  .vh .vh-list-3{grid-template-columns:1fr;gap:var(--sp-2)}
  .vh-list-3 > .vh-col:nth-child(n+5){display:none}
  .vh .vh-list-3 .vh-card-img{flex-basis:80px}
  .vh .vh-list-3 .vh-card-img img{width:80px;min-height:80px}
  .vh .vh-list-3 .vh-card-tx{padding:var(--sp-2) var(--sp-4)}
  .vh .vh-list-3 .vh-card-cta{min-height:44px}

  /* đánh giá: vuốt ngang, thẻ 84% */
  .vh-rv-grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:var(--sp-5);margin:0 calc(-1*var(--gut));padding:0 var(--gut) var(--sp-3);scroll-padding:0 var(--gut);scrollbar-width:none}
  .vh-rv-grid::-webkit-scrollbar{display:none}
  .vh .vh-rv{flex:0 0 84%;scroll-snap-align:start}

  .vh-sv-layout{grid-template-columns:1fr;gap:var(--sp-5)}
  .vh .vh-sv-lead{margin-top:var(--sp-4)}
  .vh-sv-intro .vh-actions{flex-direction:column}
  .vh .vh-sv-measure{padding:var(--sp-4)}
  .vh-measure{max-width:300px}
  .vh .vh-sv-item .vh-more{display:none}   /* điện thoại: nút Gọi / Zalo ngay trên đã thay link Liên hệ */
  .vh-sv-items{flex-direction:column;gap:0}
  .vh-sv-item,.vh-sv-item:first-child,.vh-sv-item:last-child{padding:var(--sp-3) 0}
  .vh .vh-sv-item h3{margin-bottom:var(--sp-1)}
  .vh-sv-item + .vh-sv-item{border-left:0;padding-left:0;border-top:var(--bd)}
  .vh-sv-item:first-child{padding-top:var(--sp-1)}
}