/* ==========================================================================
   Viahome theme - main.css
   Bảng màu, kiểu chữ và các khối dùng lại
   ========================================================================== */

:root{
  /* Tông chủ đạo: cafe ấm + vàng đồng của logo */
  --vh-coffee:#5C4432;       /* nâu cafe - màu chính, dùng cho nút và tiêu đề */
  --vh-coffee-dark:#42301F;  /* cafe đậm - trạng thái hover */
  --vh-coffee-soft:#EDE3D6;  /* cafe nhạt - nền khối nhấn */
  --vh-sage:#5F6E53;        /* xanh ô liu nhạt - nốt mát cân bằng tông ấm */
  --vh-sage-soft:#E7ECE1;
  --vh-gold:#C9A25C;         /* vàng đồng lấy từ logo */
  --vh-gold-deep:#84611E;    /* vàng đậm cho chữ nhỏ, đủ tương phản */
  --vh-brass:#A87F32;
  /* Giữ tên biến cũ để không phải sửa lại toàn bộ file */
  --vh-green:var(--vh-coffee);
  --vh-green-dark:var(--vh-coffee-dark);
  --vh-green-soft:var(--vh-coffee-soft);
  --vh-ink:#2B2723;          /* chữ nâu đậm thay vì đen xanh */
  --vh-ink-soft:#67605A;
  --vh-ink-faint:#8C847B;
  --vh-cream:#FAF8F3;        /* nền kem ấm - màu chủ đạo toàn site */
  --vh-cream-deep:#EDE4D6;   /* kem đậm hơn, dùng xen kẽ giữa các dải */
  --vh-ground:#F7F3EC;
  --vh-ground-warm:#FBF8F3;
  --vh-surface:#FFFFFF;      /* trắng ngả kem cho thẻ nội dung */
  --vh-line:#E0D8CA;
  --vh-radius:4px;
  --vh-shadow:0 1px 3px rgba(22,34,31,.06);
  --vh-max:1240px;
  --vh-gutter:20px;
  --vh-font-display:"Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",sans-serif;
  --vh-font-body:"Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",sans-serif;
  --vh-display-weight:500;
  --vh-display-spacing:0;
  --vh-display-transform:none;
  --vh-h-scale:1.12;
  --vh-b-scale:1;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}}

body{
  margin:0;background:var(--vh-cream);color:var(--vh-ink);
  font-family:var(--vh-font-body);font-size:calc(16px * var(--vh-b-scale));line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--vh-green);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--vh-brass);outline-offset:2px}

h1,h2,h3,h4,.vh-display{font-family:var(--vh-font-display);font-weight:var(--vh-display-weight);
  letter-spacing:var(--vh-display-spacing);text-transform:var(--vh-display-transform);
  line-height:1.15;text-wrap:balance;margin:0 0 .5em}
h1{font-size:calc(clamp(2rem,5vw,3.25rem) * var(--vh-h-scale))}
h2{font-size:calc(clamp(1.4rem,3vw,2rem) * var(--vh-h-scale))}
h3{font-size:calc(1.12rem * var(--vh-h-scale));line-height:1.3}
h4{font-size:calc(1rem * var(--vh-h-scale))}
p{margin:0 0 1rem}

.vh-container{max-width:var(--vh-max);margin:0 auto;padding-left:var(--vh-gutter);padding-right:var(--vh-gutter)}
.vh-section{padding-block:clamp(36px,6vw,72px);background:var(--vh-cream)}
.vh-section--ground{background:var(--vh-cream-deep)}
.vh-section--warm{background:var(--vh-cream)}
.vh-section__head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:28px}
.vh-section__head p{color:var(--vh-ink-soft);margin:4px 0 0;max-width:60ch}
.vh-link-more{font-size:.9rem;font-weight:600;white-space:nowrap;color:var(--vh-coffee)}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px)}
.skip-link{position:absolute;left:-9999px}
.skip-link:focus{left:16px;top:16px;z-index:999;background:var(--vh-green);color:#fff;padding:10px 16px}

/* --- Nút --- */
.vh-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 26px;border-radius:var(--vh-radius);font-weight:600;font-size:.95rem;
  border:1px solid transparent;cursor:pointer;transition:background .2s,color .2s,border-color .2s;text-decoration:none}
.vh-btn:hover{text-decoration:none}
.vh-btn--primary{background:var(--vh-green);color:#fff}
.vh-btn--primary:hover{background:var(--vh-green-dark);color:#fff}
.vh-btn--ghost{background:var(--vh-surface);color:var(--vh-coffee);border-color:var(--vh-coffee)}
.vh-btn--ghost:hover{background:var(--vh-coffee-soft);color:var(--vh-coffee-dark)}
.vh-btn--zalo{background:var(--vh-green-soft);color:var(--vh-green)}

/* --- Header --- */
.vh-header{position:sticky;top:0;z-index:50;background:var(--vh-cream);border-bottom:1px solid var(--vh-line)}
.vh-header__inner{display:flex;align-items:center;gap:24px;min-height:74px}
.vh-brand{display:flex;flex-direction:column;line-height:1.1;text-decoration:none;flex-shrink:0}
.vh-brand__name{font-family:var(--vh-font-display);font-size:1.35rem;font-weight:600;color:var(--vh-green);letter-spacing:.02em}
.vh-brand__tag{font-size:.62rem;color:var(--vh-ink-faint);letter-spacing:.04em;margin-top:2px}
.vh-nav{margin-left:auto}
.vh-nav ul{display:flex;gap:26px;list-style:none;margin:0;padding:0}
.vh-nav a{color:var(--vh-ink);font-size:.93rem;font-weight:500;padding-block:6px;border-bottom:2px solid transparent}
.vh-nav a:hover{color:var(--vh-green);text-decoration:none}
.vh-nav .current-menu-item>a,.vh-nav .current_page_item>a{color:var(--vh-green);border-bottom-color:var(--vh-green)}
.vh-header__cta{flex-shrink:0}
.vh-burger{display:none;background:none;border:1px solid var(--vh-line);border-radius:var(--vh-radius);
  padding:9px 11px;cursor:pointer;margin-left:auto}
.vh-burger span{display:block;width:20px;height:2px;background:var(--vh-ink);margin:4px 0}

/* --- Hero: dùng chung cho trang chủ và trang con --- */
.vh-hero{position:relative;background:#EDE9E0;isolation:isolate;overflow:hidden}
.vh-hero--home{background:#241F1B}

/* Ảnh phủ kín toàn bộ dải hero */
.vh-hero__media{
  position:absolute;inset:0;width:100%;height:100%;margin:0;
  min-height:0;max-height:none;aspect-ratio:auto;border-radius:0;overflow:hidden;z-index:0}
.vh-hero__media img{width:100%;height:100%;object-fit:cover}
/* Trang con: ảnh chiếm 69% bên phải, nền kem bên trái (style trang Vật liệu) */
.vh-hero--page .vh-hero__media{left:auto;right:0;width:69%}

/* Trang con: phủ kem nhạt dần sang phải */
.vh-hero--page .vh-hero__media::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,#EEEBE4 0%,rgba(238,235,228,.94) 15%,rgba(238,235,228,.35) 46%,rgba(238,235,228,0) 68%)}

/* Trang chủ: phủ tối đậm dần về bên trái để chữ luôn đọc được */
.vh-hero--home .vh-hero__media::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(90deg,
      rgba(30,26,22,.86) 0%,
      rgba(30,26,22,.72) 26%,
      rgba(30,26,22,.36) 55%,
      rgba(30,26,22,.10) 82%,
      rgba(30,26,22,.04) 100%),
    linear-gradient(180deg, rgba(30,26,22,.22) 0%, rgba(30,26,22,0) 30%, rgba(30,26,22,.28) 100%)}

/* Khi trang chưa đặt ảnh, vẫn giữ nền tối để chữ đọc được */
.vh-hero--home:not(:has(.vh-hero__media img))::before{
  content:"";position:absolute;inset:0;z-index:0;
  background:linear-gradient(120deg,#2E2620 0%,#463A2E 60%,#5C4432 100%)}

.vh-hero__inner{
  position:static;display:flex;align-items:center;
  max-width:var(--vh-max);margin-inline:auto;
  padding-left:var(--vh-gutter);padding-right:var(--vh-gutter)}

.vh-hero__text{position:relative;z-index:2;max-width:min(780px,100%);
  padding:0;background:none;border:0;box-shadow:none}

.vh-hero__title{margin-bottom:14px}
.vh-hero__sub{font-size:1.05rem;margin-bottom:26px;max-width:60ch}

/* Trang chủ: chữ sáng trên nền ảnh tối */
.vh-hero--home .vh-eyebrow{color:var(--vh-gold)}
.vh-hero--home .vh-hero__title{color:#FBF8F3;text-transform:uppercase;letter-spacing:.01em;
  text-shadow:0 2px 18px rgba(24,20,17,.5)}
.vh-hero--home .vh-hero__sub{color:rgba(251,248,243,.86);
  text-shadow:0 1px 12px rgba(24,20,17,.45)}
.vh-hero__actions{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:28px}
.vh-hero--home .vh-btn--ghost{background:transparent;color:#FBF8F3;border-color:rgba(251,248,243,.75)}
.vh-hero--home .vh-btn--ghost:hover{background:rgba(251,248,243,.14);color:#fff}

/* Bốn cam kết, dùng ở trang chủ */
.vh-hero__points{display:flex;flex-wrap:nowrap;gap:0;list-style:none;margin:0;padding:0;
  border-top:1px solid rgba(201,162,92,.35);padding-top:20px}
.vh-hero__points li{display:flex;flex-direction:column;align-items:flex-start;gap:9px;
  flex:1 1 0;min-width:0;padding:0 16px;border-left:1px solid rgba(201,162,92,.3);
  color:rgba(251,248,243,.9);font-size:.83rem;line-height:1.35;margin:0}
.vh-hero__points li:first-child{padding-left:0;border-left:0}
.vh-hero__ico{width:38px;height:38px;border-radius:50%;border:1.4px solid rgba(201,162,92,.85);
  background:transparent;color:var(--vh-gold);
  display:flex;align-items:center;justify-content:center;flex-shrink:0}
.vh-hero__ico .vh-icon{width:19px;height:19px}

/* Chữ viết tay góc dưới phải */
.vh-hero__script{position:absolute;right:clamp(16px,3vw,40px);bottom:clamp(16px,2.6vw,34px);z-index:3;
  font-family:'Dancing Script',var(--vh-font-display),cursive;
  font-size:clamp(1.2rem,2.1vw,1.9rem);line-height:1.3;color:var(--vh-gold);font-weight:600;
  text-shadow:0 2px 16px rgba(24,20,17,.65);max-width:44%;text-align:right;
  transform:rotate(-3deg);pointer-events:none;
  padding-bottom:6px;border-bottom:1px solid rgba(201,162,92,.55)}

/* Chiều cao: trang chủ cao, trang con gọn hơn */
.vh-hero--home .vh-hero__inner{min-height:clamp(560px,52vw,760px);padding-block:clamp(48px,7vw,88px)}
.vh-hero--page .vh-hero__inner{min-height:clamp(300px,26vw,400px);padding-block:clamp(40px,5vw,64px)}
.vh-hero--page .vh-hero__text{max-width:620px}
.vh-hero--page .vh-eyebrow{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#83745D;margin:0 0 12px}
.vh-hero--page .vh-hero__title{font-family:inherit;font-size:clamp(28px,3vw,44px);line-height:1.22;font-weight:600;
  letter-spacing:-.025em;text-transform:none;color:#292820;text-shadow:none;margin:0 0 14px}
.vh-hero--page .vh-hero__sub{font-size:16px;line-height:1.6;color:#746F64;max-width:520px;text-shadow:none;margin-bottom:0}

/* --- Lưới thẻ chung --- */
.vh-grid{display:grid;gap:18px}
.vh-grid--2{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.vh-grid--3{grid-template-columns:repeat(auto-fill,minmax(290px,1fr))}
.vh-grid--4{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}

.vh-card{background:var(--vh-surface);border:1px solid var(--vh-line);border-radius:var(--vh-radius);
  overflow:hidden;display:flex;flex-direction:column}
.vh-card__media{aspect-ratio:4/3;max-height:300px;overflow:hidden;background:var(--vh-cream-deep)}
.vh-card__media img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.vh-card:hover .vh-card__media img{transform:scale(1.03)}
.vh-card__body{padding:16px 18px 18px;display:flex;flex-direction:column;gap:6px;flex:1}
.vh-card__title{font-family:var(--vh-font-body);font-weight:600;letter-spacing:0;text-transform:none;
  font-size:1.02rem;line-height:1.4;margin:0}
.vh-card__title a{color:var(--vh-ink)}
.vh-card__title a:hover{color:var(--vh-green);text-decoration:none}
.vh-card__meta{font-size:.85rem;color:var(--vh-ink-faint);margin:0}
.vh-card__excerpt{font-size:.9rem;color:var(--vh-ink-soft);margin:0}
.vh-card__tag{position:absolute;top:12px;left:12px;background:rgba(43,39,35,.88);color:#fff;
  font-size:.72rem;font-weight:600;padding:5px 11px;border-radius:3px;letter-spacing:.02em}
.vh-card--linked{position:relative}


/* --- Khối thế mạnh trên trang chủ --- */
.vh-pillar{display:flex;flex-direction:column;gap:8px;
  background:var(--vh-surface);border:1px solid var(--vh-line);border-radius:var(--vh-radius);
  padding:20px 20px 18px}
.vh-pillar__title{font-size:calc(1.25rem * var(--vh-h-scale));margin:0;color:var(--vh-coffee);line-height:1.25}
.vh-pillar__sub{font-size:.87rem;color:var(--vh-ink-faint);margin:0 0 4px}
.vh-pillar__media{display:block;aspect-ratio:4/3;max-height:280px;overflow:hidden;
  border-radius:var(--vh-radius);background:var(--vh-cream-deep)}
.vh-pillar__media img{width:100%;height:100%;object-fit:cover;transition:transform .45s}
.vh-pillar:hover .vh-pillar__media img{transform:scale(1.035)}
.vh-pillar .vh-link-more{margin-top:auto;padding-top:4px}

/* --- Chấm tròn trong danh sách cam kết ở hero --- */
.vh-hero__dot{width:7px;height:7px;border-radius:50%;background:var(--vh-gold);flex-shrink:0}
.vh-hero__ico{width:30px;height:30px;border-radius:50%;border:1.4px solid var(--vh-gold);
  color:var(--vh-coffee);display:flex;align-items:center;justify-content:center;flex-shrink:0;
  background:var(--vh-surface)}
.vh-hero__ico .vh-icon{width:16px;height:16px}
.vh-hero__points{gap:12px 22px}
.vh-hero__points li{gap:10px}

/* --- Thẻ bài viết: ảnh trên, tiêu đề dưới --- */
.vh-post-row{display:flex;flex-direction:column;
  background:var(--vh-surface);border:1px solid var(--vh-line);border-radius:var(--vh-radius);
  overflow:hidden}
.vh-post-row__media{display:block;aspect-ratio:16/10;max-height:230px;overflow:hidden;
  background:var(--vh-cream-deep)}
.vh-post-row__media img{width:100%;height:100%;object-fit:cover;transition:transform .45s}
.vh-post-row:hover .vh-post-row__media img{transform:scale(1.035)}
.vh-post-row__body{padding:15px 17px 17px;display:flex;flex-direction:column;gap:6px;flex:1}
.vh-post-row__body .vh-card__title{font-size:1rem;line-height:1.45}

/* --- Ngân sách --- */
.vh-budget{background:var(--vh-surface);border:1px solid var(--vh-line);border-radius:var(--vh-radius);
  display:grid;grid-template-columns:38% 1fr;align-items:stretch;overflow:hidden}
/* Thẻ chưa đặt ảnh: phần chữ trải hết chiều rộng, không bị nhét vào cột ảnh */
.vh-budget__body:only-child{grid-column:1 / -1}
.vh-budget__media{overflow:hidden;min-height:100%;max-height:none}
.vh-budget__media img{width:100%;height:100%;object-fit:cover;min-height:180px;display:block}
.vh-budget__body{padding:18px 18px 20px 20px;align-self:center;min-width:0}
.vh-budget__range{font-family:var(--vh-font-display);font-weight:var(--vh-display-weight);
  letter-spacing:var(--vh-display-spacing);font-size:calc(1.45rem * var(--vh-h-scale));color:var(--vh-coffee);margin:0 0 2px}
.vh-budget__label{font-size:.88rem;color:var(--vh-ink-faint);margin:0 0 12px}
.vh-budget ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px;font-size:.89rem}
.vh-budget__range,.vh-budget__label{text-wrap:balance}
.vh-budget li{padding-left:16px;position:relative;color:var(--vh-ink-soft)}
.vh-budget li::before{content:"";position:absolute;left:0;top:.62em;width:5px;height:5px;
  border-radius:50%;background:var(--vh-gold-deep)}

/* --- So sánh: một đầu mối --- */
.vh-compare{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:stretch}
.vh-compare--has-photo{grid-template-columns:1fr 1.05fr 1fr}
.vh-compare__photo{overflow:hidden;border-radius:var(--vh-radius);background:var(--vh-cream-deep);
  min-height:100%}
.vh-compare__photo img{width:100%;height:100%;object-fit:cover;min-height:220px}
.vh-compare__col{padding:22px;border-radius:var(--vh-radius)}
.vh-compare__col--yes{background:var(--vh-sage-soft)}
.vh-compare__col--no{background:var(--vh-surface);border:1px solid var(--vh-line)}
.vh-compare ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.vh-compare li{display:flex;gap:10px;align-items:flex-start;font-size:.94rem}
.vh-compare__icon{flex-shrink:0;width:21px;height:21px;margin-top:1px;border-radius:50%;
  display:flex;align-items:center;justify-content:center}
.vh-compare__icon .vh-icon{width:13px;height:13px}
.vh-compare__col--yes .vh-compare__icon{background:var(--vh-sage);color:#fff}
.vh-compare__col--no .vh-compare__icon{background:#A85544;color:#fff}

/* --- Quy trình --- */
.vh-steps{display:grid;grid-template-columns:repeat(6,1fr);gap:22px;position:relative}
.vh-steps__line{position:absolute;top:21px;left:8.33%;right:8.33%;height:1.5px;
  background:linear-gradient(90deg,transparent 0%,var(--vh-gold) 6%,var(--vh-gold) 94%,transparent 100%);
  z-index:0}
.vh-step{position:relative;z-index:1}
.vh-step{text-align:center}
.vh-step__num{width:42px;height:42px;margin:0 auto 12px;border-radius:50%;
  border:1.5px solid var(--vh-gold);color:var(--vh-coffee);
  display:flex;align-items:center;justify-content:center;
  font-size:.84rem;font-weight:700;font-variant-numeric:tabular-nums;background:var(--vh-surface)}
.vh-step h3{font-family:var(--vh-font-body);font-weight:600;letter-spacing:0;text-transform:none;font-size:1rem;margin-bottom:4px}
.vh-step p{font-size:.85rem;color:var(--vh-ink-soft);margin:0}

/* --- Thương hiệu --- */
.vh-brands{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.vh-brand-card{background:var(--vh-surface);border:1px solid var(--vh-line);border-radius:var(--vh-radius);
  padding:20px;text-align:center}
.vh-brand-card__logo{height:38px;display:flex;align-items:center;justify-content:center;margin-bottom:12px}
.vh-brand-card__logo img{max-height:38px;width:auto}
.vh-brand-card h3{font-family:var(--vh-font-body);font-weight:600;letter-spacing:0;text-transform:none;font-size:.98rem;margin:0 0 4px}
.vh-brand-card p{font-size:.85rem;color:var(--vh-ink-soft);margin:0}

/* --- Form dự toán --- */
.vh-leadform{background:var(--vh-sage-soft);color:var(--vh-ink);border-top:1px solid var(--vh-line)}
.vh-leadform__wrap{display:grid;grid-template-columns:320px 1fr;align-items:stretch;min-height:230px}
.vh-leadform__photo{position:relative;overflow:hidden}
.vh-leadform__photo img{width:100%;height:100%;object-fit:cover}
.vh-leadform__body{padding:32px 0 32px 38px;align-self:center}
.vh-leadform__wrap--nophoto{grid-template-columns:1fr}
.vh-leadform__wrap--nophoto .vh-leadform__body{padding-left:0;padding-block:34px}
@media (max-width:860px){
  .vh-leadform__wrap{grid-template-columns:1fr}
  .vh-leadform__photo{height:150px;margin-left:calc(var(--vh-gutter)*-1);margin-right:calc(var(--vh-gutter)*-1)}
  .vh-leadform__body{padding:24px 0 26px}
}
.vh-partners + .vh-leadform{border-top:0}
.vh-leadform .vh-container{padding-block:0}
.vh-leadform h2{color:var(--vh-coffee);margin-bottom:4px}
.vh-leadform p{color:var(--vh-ink-soft);font-size:.92rem}
.vh-leadform__row{display:grid;grid-template-columns:1fr 1fr 1fr auto;gap:12px;margin-top:18px;align-items:center}
.vh-leadform input,.vh-leadform select,.vh-leadform textarea{
  width:100%;padding:12px 14px;border:1px solid var(--vh-line);border-radius:var(--vh-radius);
  background:#fff;color:var(--vh-ink);font-family:inherit;font-size:.93rem}
.vh-leadform input::placeholder,.vh-leadform textarea::placeholder{color:var(--vh-ink-faint)}
.vh-leadform select option{color:var(--vh-ink)}
.vh-leadform .vh-btn--primary{background:var(--vh-coffee);color:#fff}
.vh-leadform .vh-btn--primary:hover{background:var(--vh-coffee-dark)}
.vh-leadform__note{font-size:.8rem;margin-top:10px;color:var(--vh-ink-faint)}

/* --- Nút liên hệ nổi trên mobile --- */
.vh-sticky-contact{position:fixed;left:0;right:0;bottom:0;z-index:60;display:none;
  gap:1px;background:var(--vh-line);padding-bottom:env(safe-area-inset-bottom,0px)}
.vh-sticky-contact a{flex:1;text-align:center;padding:13px 6px;background:var(--vh-surface);
  font-size:.86rem;font-weight:600;color:var(--vh-green)}
.vh-sticky-contact a.is-primary{background:var(--vh-green);color:#fff}

/* --- Footer --- */
.vh-footer{background:var(--vh-cream);border-top:1px solid var(--vh-line);padding-block:40px 24px;font-size:.9rem}
.vh-footer__grid{display:grid;grid-template-columns:1.1fr 1.5fr 1fr 1.1fr;gap:28px}
.vh-footer h3{font-size:.78rem;text-transform:uppercase;letter-spacing:.12em;color:var(--vh-brass);margin-bottom:12px}
.vh-footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.vh-footer a{color:var(--vh-ink-soft)}
.vh-footer a:hover{color:var(--vh-green)}
.vh-footer__bottom{margin-top:30px;padding-top:16px;border-top:1px solid var(--vh-line);
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;font-size:.82rem;color:var(--vh-ink-faint)}


/* --- Hero cho trang con: gọn hơn hero trang chủ --- */

/* --- Dải logo thương hiệu --- */
.vh-partners{background:var(--vh-surface);border-top:1px solid var(--vh-line);
  padding-block:26px 30px;overflow:hidden}
.vh-partners__label{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--vh-gold-deep);font-weight:600;text-align:center;margin:0 0 18px}

.vh-partners__item{display:flex;align-items:center;justify-content:center;
  height:46px;padding:0 6px;flex-shrink:0;
  filter:grayscale(1);opacity:.62;transition:filter .25s,opacity .25s}
.vh-partners__item:hover{filter:grayscale(0);opacity:1}
.vh-partners__item img{max-height:42px;width:auto;object-fit:contain}

/* Ít logo: xếp tĩnh, căn giữa */
.vh-partners__track--tinh{display:flex;flex-wrap:wrap;align-items:center;
  justify-content:center;gap:14px 34px}

/* Nhiều logo: chạy ngang liên tục, mép hai bên mờ dần */
.vh-partners__vien{position:relative;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%)}
.vh-partners--chay .vh-partners__track{
  display:flex;align-items:center;gap:0;width:max-content;
  /* Mỗi logo chạy hết trong 4 giây, càng nhiều logo vòng càng dài */
  animation:vh-chay calc(var(--vh-so-logo,6) * 4s) linear infinite}
.vh-partners--chay .vh-partners__item{padding:0 34px}

/* Rê chuột hoặc focus bàn phím thì dừng lại */
.vh-partners--chay:hover .vh-partners__track,
.vh-partners--chay:focus-within .vh-partners__track{animation-play-state:paused}

@keyframes vh-chay{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}

/* Tôn trọng cài đặt giảm chuyển động của người dùng */
@media (prefers-reduced-motion:reduce){
  .vh-partners--chay .vh-partners__track{animation:none;
    width:100%;flex-wrap:wrap;justify-content:center;gap:14px 24px}
  .vh-partners--chay .vh-partners__item{padding:0 8px}
  .vh-partners__vien{-webkit-mask-image:none;mask-image:none}
}

/* --- Footer chi tiết --- */
.vh-footer__brand p{margin-top:12px;color:var(--vh-ink-soft);font-size:.88rem;max-width:26ch}
.vh-footer__brand img{max-height:52px;width:auto}
.vh-footer__contact{gap:10px}
.vh-footer__contact li{display:flex;gap:9px;align-items:flex-start;line-height:1.5}
.vh-footer__ico{color:var(--vh-gold-deep);flex-shrink:0;width:18px;height:18px;
  display:flex;align-items:center;justify-content:center;margin-top:3px}
.vh-footer__ico .vh-icon{width:16px;height:16px}
.vh-footer h3{font-family:var(--vh-font-body);font-weight:600;letter-spacing:.1em}
.vh-social{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:16px}
.vh-social__item{width:38px;height:38px;border-radius:50%;
  background:var(--vh-surface);border:1.5px solid var(--vh-coffee);color:var(--vh-coffee);
  display:flex;align-items:center;justify-content:center;
  transition:background .2s,color .2s,transform .2s}
.vh-social__item .vh-icon{width:19px;height:19px}
.vh-social__item:hover{transform:translateY(-2px)}
.vh-social__item:hover{background:var(--vh-coffee);color:#fff;text-decoration:none}
.vh-footer__legal-inline{gap:7px;font-size:.84rem}


/* --- Nội dung bài viết --- */
.vh-entry{padding-block:clamp(30px,5vw,56px)}
.vh-entry__header{max-width:760px;margin-inline:auto;margin-bottom:26px}
.vh-entry__meta{font-size:.86rem;color:var(--vh-ink-faint)}
.vh-entry__content{max-width:760px;margin-inline:auto}
.vh-entry__content h2{margin-top:2em}
.vh-entry__content img{border-radius:var(--vh-radius);margin-block:1.5rem;max-width:100%;height:auto}
/* Trình soạn thảo cũ gán width cố định cho figure.wp-caption, phải ghi đè inline style */
.wp-caption,
.vh-entry__content figure{width:auto!important;max-width:100%!important;height:auto;
  margin-inline:auto;box-sizing:border-box}
.vh-entry__content figure img{margin-block:0}
.vh-entry__content figcaption,
.vh-entry__content .wp-caption-text{font-size:.86rem;line-height:1.5;color:var(--vh-ink-faint);
  text-align:center;margin:8px 0 1.5rem}
.vh-entry__content .aligncenter{display:block;margin-inline:auto}
.vh-entry__content .alignleft{float:left;margin:6px 22px 14px 0;max-width:min(50%,340px)}
.vh-entry__content .alignright{float:right;margin:6px 0 14px 22px;max-width:min(50%,340px)}
.vh-entry__content .wp-block-image,
.vh-entry__content .gallery{max-width:100%}
.vh-entry__content iframe,.vh-entry__content video,.vh-entry__content embed,
.vh-entry__content object{max-width:100%;height:auto}
.vh-entry__content{overflow-wrap:break-word}
.vh-entry__content > *{min-width:0}
.vh-entry__content ul,.vh-entry__content ol{padding-left:1.2em}
.vh-entry__content li{margin-bottom:.4em}
.vh-entry__content blockquote{border-left:3px solid var(--vh-green);padding-left:18px;margin-left:0;
  color:var(--vh-ink-soft);font-style:normal}
.vh-entry__content table{width:100%;border-collapse:collapse;font-size:.93rem}
.vh-entry__content th,.vh-entry__content td{border-bottom:1px solid var(--vh-line);padding:9px 10px;text-align:left}

/* --- Breadcrumb --- */
.vh-crumbs{font-size:.83rem;color:var(--vh-ink-faint);padding-block:12px;border-bottom:1px solid var(--vh-line)}
.vh-crumbs a{color:var(--vh-ink-soft)}

/* --- Bộ lọc archive --- */
.vh-filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}
.vh-filters a{font-size:.86rem;padding:7px 14px;border:1px solid var(--vh-line);border-radius:999px;
  color:var(--vh-ink-soft);background:var(--vh-surface)}
.vh-filters a:hover,.vh-filters a.is-active{background:var(--vh-green);color:#fff;border-color:var(--vh-green);text-decoration:none}

/* --- Phân trang --- */
.vh-pagination{display:flex;gap:6px;justify-content:center;margin-top:34px;flex-wrap:wrap}
.vh-pagination .page-numbers{padding:8px 14px;border:1px solid var(--vh-line);border-radius:var(--vh-radius);
  color:var(--vh-ink-soft);font-size:.9rem}
.vh-pagination .current{background:var(--vh-green);color:#fff;border-color:var(--vh-green)}

/* --- Tiện ích --- */
.vh-tabular{font-variant-numeric:tabular-nums}
.vh-eyebrow{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--vh-gold-deep);font-weight:600}
/* Đường kẻ vàng mảnh dùng làm điểm nhấn thương hiệu */
.vh-section__head{border-top:2px solid var(--vh-gold);padding-top:14px}
.vh-brand__logo{max-height:46px;width:auto}
.vh-footer h3{color:var(--vh-gold-deep)}


/* ==========================================================================
   PHẦN RESPONSIVE — đặt cuối file để luôn thắng các quy tắc phía trên.
   Ba mốc: máy tính > 1024px · máy tính bảng 761–1024px · điện thoại ≤ 760px
   ========================================================================== */

/* ---------- Máy tính bảng và mọi màn hình nhỏ hơn: menu gom vào nút ---------- */
@media (max-width:1024px){
  .vh-burger{display:block}
  .vh-nav{position:fixed;inset:74px 0 auto 0;background:var(--vh-cream);
    border-bottom:1px solid var(--vh-line);margin:0;padding:12px var(--vh-gutter) 20px;
    display:none;max-height:calc(100vh - 74px);overflow-y:auto}
  .vh-nav.is-open{display:block}
  .vh-nav ul{flex-direction:column;gap:0}
  .vh-nav li{border-bottom:1px solid var(--vh-line)}
  .vh-nav a{display:block;padding:13px 0}
  .vh-header__cta{display:none}
}

/* ---------- Máy tính bảng: 761 – 1024px ---------- */
@media (min-width:761px) and (max-width:1024px){
  :root{--vh-gutter:24px}

  .vh-grid--2{grid-template-columns:repeat(2,1fr)}
  .vh-grid--3{grid-template-columns:repeat(2,1fr)}
  .vh-grid--4{grid-template-columns:repeat(2,1fr)}
  .vh-brands{grid-template-columns:repeat(3,1fr)}
  .vh-steps{grid-template-columns:repeat(3,1fr);row-gap:30px}
  .vh-compare{grid-template-columns:repeat(2,1fr)}
  .vh-compare--has-photo{grid-template-columns:1fr 1fr}
  .vh-compare__photo{grid-column:1 / -1;order:3;max-height:240px}
  .vh-budget{grid-template-columns:40% 1fr}
  .vh-steps{gap:18px}
  .vh-steps__line{left:16.66%;right:16.66%}
  .vh-footer__grid{grid-template-columns:repeat(2,1fr);gap:26px}
  .vh-leadform__row{grid-template-columns:1fr 1fr}

  .vh-hero__inner{min-height:380px}
  .vh-hero--home .vh-hero__inner{min-height:clamp(480px,62vw,560px)}
  .vh-hero--home .vh-hero__text{max-width:86%}
  .vh-hero--home .vh-hero__points{flex-wrap:wrap;gap:18px 0}
  .vh-hero--home .vh-hero__points li{flex:0 0 50%;padding:0 14px;border-left:0}
  .vh-hero--home .vh-hero__points li:nth-child(odd){padding-left:0}
  .vh-hero--home .vh-hero__ico{width:34px;height:34px}
  .vh-hero__script{max-width:52%;bottom:16px}
  .vh-hero--page .vh-hero__inner{min-height:clamp(260px,32vw,320px)}

  .vh-card__media{max-height:260px}
  .vh-budget__media{max-height:240px}
  .vh-pillar__media{max-height:230px}
  .vh-post-row__media{max-height:200px}
  .vh-partners__track--tinh{gap:12px 24px}
  .vh-partners__item{height:38px}
  .vh-partners--chay .vh-partners__item{padding:0 26px}
  .vh-partners__item img{max-height:34px}
}

/* ---------- Điện thoại và tablet dọc nhỏ: tối đa 760px ---------- */
@media (max-width:760px){
  /* Hero xếp dọc, ảnh lên trên */
  /* Điện thoại: chỉ làm tối phần chân, chữ dồn xuống đáy, nửa trên để nguyên ảnh */
  .vh-hero--home .vh-hero__inner{min-height:clamp(560px,130vw,680px);display:flex;align-items:flex-end;
    padding-top:clamp(200px,52vw,300px);padding-bottom:28px}
  .vh-hero--home .vh-hero__text{max-width:100%}
  .vh-hero--home .vh-hero__media::after{
    background:linear-gradient(180deg, rgba(30,26,22,.24) 0%, rgba(30,26,22,0) 34%,
      rgba(30,26,22,.32) 58%, rgba(30,26,22,.88) 100%)}
  .vh-hero--home .vh-hero__title{margin-bottom:10px}
  /* Bóng chữ nhẹ: giữ chữ đọc được kể cả khi sau này thay ảnh hero sáng hơn */
  .vh-hero--home .vh-eyebrow,
  .vh-hero--home .vh-hero__title,
  .vh-hero--home .vh-hero__sub{text-shadow:0 1px 16px rgba(20,16,13,.6)}
  .vh-hero--home .vh-hero__sub{margin-bottom:18px;font-size:.95rem}
  .vh-hero--home .vh-hero__actions{margin-bottom:0}
  /* Bốn điểm tin cậy và dòng chữ viết tay để dành cho màn hình lớn */
  .vh-hero--home .vh-hero__points{display:none}
  .vh-hero--home .vh-hero__script{display:none}
  .vh-hero__script{position:static;max-width:100%;text-align:left;margin-top:22px;
    display:inline-block;font-size:1.15rem;bottom:auto;right:auto}
  .vh-hero--page .vh-hero__inner{min-height:clamp(220px,58vw,300px);padding-block:30px}
  .vh-hero--page .vh-hero__text{max-width:100%}
  /* Trang con trên điện thoại: ảnh mờ phủ toàn bộ, nền kem để chữ tối dễ đọc */
  .vh-hero--page .vh-hero__media{width:100%}
  .vh-hero--page .vh-hero__media img{opacity:.42}
  .vh-hero--page .vh-hero__media::after{
    background:linear-gradient(90deg,rgba(238,235,228,.97),rgba(238,235,228,.8))}
  .vh-hero--page .vh-hero__title{font-size:clamp(26px,7.4vw,31px)}
  .vh-hero--page .vh-hero__sub{font-size:14px}

  /* Mọi lưới về 1 cột, riêng quy trình 2 cột cho đỡ dài */
  .vh-grid--2,.vh-grid--3,.vh-grid--4{grid-template-columns:1fr}
  .vh-brands{grid-template-columns:1fr}
  .vh-compare,.vh-compare--has-photo{grid-template-columns:1fr}
  .vh-compare__photo{order:0;max-height:200px}
  .vh-steps__line{left:25%;right:25%}
  .vh-steps{grid-template-columns:repeat(2,1fr);row-gap:26px}
  .vh-footer__grid{grid-template-columns:1fr;gap:26px}
  .vh-leadform__row{grid-template-columns:1fr}

  /* Thanh liên hệ cố định đáy màn hình */
  .vh-sticky-contact{display:flex}
  body{padding-bottom:52px}
}

/* ---------- Điện thoại: tối đa 600px ---------- */
@media (max-width:600px){
  :root{--vh-gutter:16px}

  h1,.vh-hero__title{font-size:calc(clamp(1.6rem,6.6vw,2.1rem) * var(--vh-h-scale))}
  h2{font-size:calc(1.4rem * var(--vh-h-scale))}
  h3{font-size:calc(1.05rem * var(--vh-h-scale))}

  .vh-grid{gap:14px}
  .vh-section__head{margin-bottom:20px}
  .vh-hero__actions .vh-btn{flex:1 1 100%}
  .vh-card__media{max-height:220px}
  .vh-budget{grid-template-columns:1fr}
  .vh-budget__media{max-height:180px}
  .vh-budget__media img{min-height:0}
  .vh-budget__body{padding:16px 16px 18px}
  .vh-steps__line{display:none}
  .vh-hero__ico{width:26px;height:26px}
  .vh-hero__ico .vh-icon{width:14px;height:14px}
  .vh-pillar{padding:16px 16px 14px}
  .vh-pillar__media{max-height:210px}
  .vh-post-row__media{max-height:190px}
  .vh-budget__range{font-size:calc(1.3rem * var(--vh-h-scale))}
  .vh-compare__col{padding:18px}
  .vh-leadform .vh-btn{width:100%}
  .vh-leadform .vh-container{padding-block:28px}

  .vh-partners{padding-block:20px 22px}
  .vh-partners__track--tinh{gap:12px 16px}
  .vh-partners__item{height:32px}
  .vh-partners--chay .vh-partners__item{padding:0 20px}
  .vh-partners__item img{max-height:28px}

  .vh-footer{padding-block:32px 22px}
  .vh-footer__brand img{max-height:44px}
}

/* ---------- Điện thoại nhỏ: tối đa 380px ---------- */
@media (max-width:380px){
  .vh-steps{grid-template-columns:1fr}
  .vh-partners--chay .vh-partners__item{padding:0 16px}
  .vh-sticky-contact a{font-size:.8rem;padding:12px 4px}
}

/* ---------- In ấn ---------- */
@media print{
  .vh-header,.vh-sticky-contact,.vh-leadform,.vh-partners{display:none}
  body{background:#fff}
}

/* Font thong nhat toan website - 18/09/2026 */
h5,h6,input,textarea,select,button { font-family: var(--vh-font-body); }

/* Center the kitchen model article within the shared page container. */
.single-mau_bep .vh-entry > .vh-container{max-width:960px}
.single-mau_bep .vh-entry__content{max-width:none;min-width:0;overflow-wrap:anywhere}
.single-mau_bep .vh-entry__content .vh-kitchen-figure{margin:1.75rem 0}
.single-mau_bep .vh-entry__content .vh-kitchen-figure img{display:block;width:100%;height:auto;margin:0 auto}
.single-mau_bep .vh-entry__content .vh-kitchen-figure figcaption{margin-top:.65rem;color:var(--vh-ink-faint);font-size:.9rem;text-align:center}
.single-mau_bep .vh-entry__content table{table-layout:fixed}
@media(max-width:600px){.single-mau_bep .vh-entry__content th,.single-mau_bep .vh-entry__content td{padding:9px 8px;overflow-wrap:anywhere}.single-mau_bep .vh-entry__content h2{font-size:clamp(1.35rem,5.5vw,1.8rem)}}

/* News articles: centered reading column and responsive captioned media. */
.single-post .vh-entry > .vh-container{max-width:960px}
.single-post .vh-entry__content{max-width:none;min-width:0;overflow-wrap:anywhere}
.single-post .vh-entry__content figure,.single-post .vh-entry__content .wp-caption{max-width:100%;box-sizing:border-box;margin-inline:auto}
.single-post .vh-entry__content img{max-width:100%;height:auto}
.single-post .vh-entry__content .wp-caption img,.single-post .vh-entry__content figure img{display:block;margin-inline:auto}
.single-post .vh-entry__content figcaption,.single-post .vh-entry__content .wp-caption-text{font-size:.9rem;color:var(--vh-ink-faint);text-align:center;overflow-wrap:anywhere}
.single-post .vh-entry__content #toc_container{max-width:100%;box-sizing:border-box}
@media(max-width:600px){.single-post .vh-entry__content h2{font-size:clamp(1.35rem,5.5vw,1.8rem)}}

/* Service and information pages use the centered reading layout. */
:is(.page-id-9487,.page-id-9488,.page-id-9489,.page-id-9490,.page-id-9497,.page-id-5529,.page-id-5527) .vh-entry>.vh-container{max-width:960px}
:is(.page-id-9487,.page-id-9488,.page-id-9489,.page-id-9490,.page-id-9497,.page-id-5529,.page-id-5527) .vh-entry__content{max-width:none;min-width:0;overflow-wrap:anywhere}

/* Bong bóng chat trên điện thoại: chỉ hiện sau khi khách cuộn qua hero */
@media (max-width:767px){
  body:not(.vh-da-cuon) .vhcc-bubble{display:none!important}
}

/* Fix Safari/iPhone: khung ảnh có aspect-ratio + max-height bị Safari thu hẹp chiều ngang
   (210px cao → chỉ còn 280px rộng), để trống bên phải thẻ. Ép khung luôn rộng đủ thẻ. */
.vh-pillar__media,.vh-card__media,.vh-post-row__media{width:100%;align-self:stretch}

/* Fix trang sản phẩm đá trên điện thoại: hàng ảnh nhỏ (nhiều ảnh) kéo giãn khung bố cục
   làm cả trang rộng ~1500px. Cho phép cột co lại, hàng ảnh tự cuộn ngang bên trong. */
.vh-stone-top>*,.vh-stone-detail>*{min-width:0}

/* === Thanh liên hệ đáy điện thoại – kiểu nền tối (10/2026) === */
.vh-sticky-contact{gap:4px;align-items:center;background:#2B2117;padding:6px 8px calc(6px + env(safe-area-inset-bottom,0px));box-shadow:0 -4px 16px rgba(0,0,0,.18);transition:transform .25s ease}
.vh-sticky-contact a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;background:transparent;color:#E8D9C4;padding:4px 2px;font-size:.72rem;font-weight:500;line-height:1.1;text-decoration:none}
.vh-sticky-contact a svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}
.vh-sticky-contact a.is-primary{flex:1.9;flex-direction:row;gap:7px;height:46px;border-radius:12px;background:var(--vh-gold);color:#2B2117;font-size:.9rem;font-weight:700;white-space:nowrap}
.vh-sticky-contact a.is-primary svg{width:18px;height:18px}
.vh-sticky-contact a:active{opacity:.75}
html.vhcc-chat-open .vh-sticky-contact{display:none}
body.vh3d-busy .vh-sticky-contact{transform:translateY(110%)}
@media (max-width:760px){
  body{padding-bottom:calc(64px + env(safe-area-inset-bottom,0px))}
  body:has(.vh-sticky-contact--full) .vhcc-bar{display:none!important}
}
@media (max-width:380px){
  .vh-sticky-contact a{font-size:.68rem}
  .vh-sticky-contact a.is-primary{font-size:.82rem}
}