/* Trang chủ có ảnh (duyệt 16/10/2026): banner ảnh, nhóm hàng có ảnh, thẻ loại bếp có ảnh, các bước + ảnh xe giao,
   vì sao chọn (3 ảnh), khối nhận báo giá gộp. Ảnh phóng nhẹ khi trỏ chuột, thẻ có video thì trỏ vào chạy đoạn ngắn. */
.h2-sec{padding-block:22px}
.h2-head{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.h2-head .t{flex:1;min-width:220px}
.h2-head .eb,.h2-why .eb{display:block;font-size:12px;letter-spacing:.08em;color:var(--brand);font-weight:700;margin-bottom:4px}
.h2-head .eb.gold{color:#B45309}
.h2-head h2,.h2-why h2,.h2-cta h2{font-size:clamp(22px,2.4vw,28px);font-weight:700;letter-spacing:-.02em}
.h2-head p{margin:4px 0 0;color:var(--muted);font-size:14.5px;max-width:720px}

/* phóng ảnh và video khi trỏ chuột */
.zw{position:relative;overflow:hidden}
.zw .zm{transition:transform .6s cubic-bezier(.2,.7,.2,1);will-change:transform}
.mk-card:hover .zm,.mk-hrow:hover .zm,.h2-cat:hover .zm,.h2-kit .kc:hover .zm,.h2-world:hover .zm,.w-hnews .w-nc:hover img,.w-hn-it:hover img{transform:scale(1.08)}
.zw video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .35s;pointer-events:none;z-index:1}
.zw.playing video{opacity:1}
.vtag{position:absolute;right:8px;bottom:8px;z-index:2;display:inline-flex;align-items:center;gap:4px;background:rgba(15,34,51,.72);color:#fff;border-radius:999px;padding:2px 9px;font-size:11.5px;font-weight:600}
.zw.playing .vtag{opacity:0}
.mk-card .im .zm,.mk-hrow .im .zm{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.mk-card .tag-hot{z-index:2}
.w-hnews .w-nc-im img,.w-hn-it img{transition:transform .6s cubic-bezier(.2,.7,.2,1)}
@media (prefers-reduced-motion:reduce){.zw .zm,.w-hnews img{transition:none!important;transform:none!important}}

/* 1. banner ảnh */
.h2-hero{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:16px}
.h2-banner{position:relative;border-radius:28px;overflow:hidden;min-height:440px;display:flex;align-items:flex-end;background:var(--brand-d);box-shadow:0 18px 40px rgba(11,50,117,.22)}
.h2-banner .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.h2-banner::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(9,34,82,.94) 0%,rgba(9,34,82,.78) 42%,rgba(9,34,82,.15) 100%)}
.h2-banner .bd{position:relative;z-index:1;padding:clamp(24px,4vw,40px);max-width:640px;color:#fff;display:flex;flex-direction:column;gap:14px}
.h2-banner .pill-t{align-self:flex-start;background:rgba(255,178,30,.18);border:1px solid rgba(255,178,30,.5);color:#FFD27A;border-radius:999px;padding:5px 13px;font-size:12px;font-weight:700;letter-spacing:.06em}
.h2-banner h1{font-size:clamp(28px,3.6vw,46px);line-height:1.12;font-weight:700;letter-spacing:-.03em;color:#fff}
.h2-banner p{margin:0;font-size:16.5px;line-height:1.6;color:#DCE6F7;max-width:520px}
.h2-banner .acts{display:flex;gap:10px;flex-wrap:wrap}
.h2-banner .btn.gold{border-radius:14px;min-height:50px;padding:0 22px}
.h2-banner .ghost{border:1.5px solid rgba(255,255,255,.55);color:#fff;border-radius:14px;min-height:50px;padding:0 20px;display:inline-flex;align-items:center;font-weight:700;background:rgba(255,255,255,.08)}
.h2-banner .stat{display:flex;gap:22px;flex-wrap:wrap;padding-top:16px;border-top:1px solid rgba(255,255,255,.18)}
.h2-banner .stat b{display:block;font-size:22px;font-weight:700}.h2-banner .stat span{font-size:12.5px;color:#B9C9E6}
.h2-worlds{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.h2-world{position:relative;border-radius:24px;overflow:hidden;min-height:440px;display:flex;align-items:flex-end;box-shadow:0 12px 30px rgba(11,50,117,.16);color:#fff;border:0;padding:0;cursor:pointer;text-align:left;background:var(--brand-d)}
.h2-world .zm{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.h2-world::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 40%,rgba(8,25,55,.88) 100%)}
.h2-world .bd{position:relative;z-index:1;padding:18px;display:flex;flex-direction:column;gap:2px}
.h2-world small{font-size:12px;letter-spacing:.07em;color:#FFD27A;font-weight:700;text-transform:uppercase}
.h2-world b{font-size:22px;font-weight:700}
.h2-world em{font-style:normal;display:inline-flex;align-self:flex-start;margin-top:8px;font-size:13px;background:rgba(255,255,255,.16);border-radius:999px;padding:3px 10px}

/* 2. nhóm hàng có ảnh */
.h2-cats{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:12px}
.h2-cat{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;border:0;background:none;padding:0;cursor:pointer;min-width:0}
.h2-cat .im{width:100%;aspect-ratio:1/1;border-radius:22px;background:var(--brand-bg);box-shadow:0 10px 26px rgba(11,50,117,.12);display:grid;place-items:center}
.h2-cat .zm{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.h2-cat .ic{width:42%}
.h2-cat b{font-weight:700;font-size:14px;line-height:1.3;margin-top:4px;overflow-wrap:anywhere}.h2-cat small{color:var(--muted);font-size:12px}

/* 3. loại bếp */
.h2-kit{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px}
.h2-kit .kc{border-radius:24px;overflow:hidden;background:#fff;border:1px solid var(--line);box-shadow:0 12px 32px rgba(11,50,117,.10);display:flex;flex-direction:column}
.h2-kit .im{aspect-ratio:16/9;background:var(--brand);display:grid;place-items:center;color:#fff}
.h2-kit .im.deep{background:var(--brand-d)}.h2-kit .im.gold{background:var(--gold)}
.h2-kit .zm{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.h2-kit .lbl{position:absolute;left:14px;bottom:12px;z-index:1;background:rgba(255,255,255,.95);color:var(--brand);border-radius:999px;padding:3px 11px;font-size:12px;font-weight:700}
.h2-kit .bd{padding:18px 20px 20px;display:flex;flex-direction:column;gap:12px;flex:1}
.h2-kit h3{font-size:21px;font-weight:700;letter-spacing:-.02em}
.h2-kit ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;flex:1}
.h2-kit li{display:flex;gap:10px;font-size:14.5px;line-height:1.5}
.h2-kit .ck{width:22px;height:22px;border-radius:999px;background:var(--ok-bg);display:grid;place-items:center;flex:none;margin-top:1px}
.h2-kit .go{min-height:44px;border-radius:14px;background:var(--brand-bg);color:var(--brand);font-weight:700;font-size:14px;display:flex;align-items:center;justify-content:center;border:0;cursor:pointer}

/* 4. các bước + ảnh xe giao */
.h2-how{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:18px;align-items:stretch}
.h2-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.h2-steps li{border:1px solid var(--line);border-radius:20px;padding:18px;background:#fff;box-shadow:0 6px 18px rgba(11,50,117,.06)}
.h2-steps i{width:38px;height:38px;border-radius:12px;background:var(--brand);color:#fff;display:grid;place-items:center;font-style:normal;font-weight:700;font-size:17px}
.h2-steps b{display:block;font-weight:700;margin-top:10px;font-size:15.5px}.h2-steps p{margin:4px 0 0;color:var(--muted);font-size:14px;line-height:1.55}
.h2-van{position:relative;border-radius:24px;overflow:hidden;min-height:320px;box-shadow:0 12px 30px rgba(11,50,117,.14);background:var(--soft)}
.h2-van img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.h2-van .cap{position:absolute;left:14px;right:14px;bottom:14px;background:rgba(255,255,255,.96);border-radius:16px;padding:12px 14px;display:flex;gap:12px;align-items:center}
.h2-van .cap i{width:40px;height:40px;border-radius:12px;background:var(--ok-bg);color:var(--ok);display:grid;place-items:center;flex:none}
.h2-van .cap b{display:block;font-weight:700}.h2-van .cap small{color:var(--muted);font-size:12.5px}

/* 5. vì sao chọn */
.h2-why{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:28px;align-items:center;background:var(--soft);border-radius:28px;padding:clamp(18px,3vw,32px)}
.h2-why .l>p{color:var(--ink2);margin:10px 0 0;line-height:1.6}
.h2-why .pts{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}
.h2-why .rs{display:flex;gap:10px;background:#fff;border-radius:16px;padding:12px}
.h2-why .rs i{width:36px;height:36px;border-radius:11px;background:var(--brand-bg);color:var(--brand);display:grid;place-items:center;flex:none}
.h2-why .rs.gold i{background:var(--warn-bg);color:#B45309}.h2-why .rs.green i{background:var(--ok-bg);color:var(--ok)}
.h2-why .rs b{display:block;font-weight:700;font-size:14.5px;line-height:1.35}.h2-why .rs p{margin:2px 0 0;color:var(--muted);font-size:13px;line-height:1.5}
.h2-why .acts{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.h2-why .collage{display:grid;grid-template-columns:1.2fr 1fr;grid-template-rows:1fr 1fr;gap:12px;height:400px}
.h2-why .collage img{width:100%;height:100%;object-fit:cover;border-radius:18px}
.h2-why .collage img:first-child{grid-row:span 2}

/* 6. khối nhận báo giá (gộp 2 khối xanh cũ) */
.h2-cta{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.25fr);background:var(--brand-d);border-radius:28px;overflow:hidden;box-shadow:0 18px 40px rgba(11,50,117,.18)}
.h2-cta .im{position:relative;min-height:380px}
.h2-cta .im img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.h2-cta .im::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(11,50,117,0) 55%,rgba(11,50,117,1) 100%)}
.h2-cta .badge{position:absolute;left:18px;bottom:18px;z-index:1;background:#fff;border-radius:16px;padding:10px 14px;display:flex;gap:10px;align-items:center;box-shadow:0 10px 26px rgba(0,0,0,.2)}
.h2-cta .badge i{width:38px;height:38px;border-radius:12px;background:var(--brand-bg);color:var(--brand);display:grid;place-items:center}
.h2-cta .badge b{display:block;font-weight:700;font-size:14px}.h2-cta .badge small{color:var(--muted);font-size:12.5px}
.h2-cta .bd{padding:clamp(24px,3.4vw,44px);padding-left:28px;color:#fff;display:flex;flex-direction:column;gap:12px;justify-content:center}
.h2-cta h2{color:#fff}.h2-cta .bd>p{color:#DCE6F7;margin:0;font-size:15.5px;line-height:1.6}
.h2-form .f{background:#fff;border-radius:18px;padding:8px;display:flex;gap:8px;align-items:center;max-width:560px;box-shadow:0 10px 30px rgba(0,0,0,.18)}
.h2-form label:not(.chk){flex:1;display:flex;align-items:center;gap:10px;padding:0 10px;min-width:0;color:var(--muted)}
.h2-form input[type=tel]{border:0;outline:0;flex:1;min-width:0;font-size:16px;height:48px;color:var(--ink);background:transparent}
.h2-form .btn{border-radius:14px;min-height:50px;padding:0 22px}
.h2-form .chk{display:flex;gap:8px;color:#DCE6F7;font-size:13.5px;margin-top:10px;cursor:pointer;max-width:560px;line-height:1.5}
.h2-form .chk input{accent-color:var(--gold);width:18px;height:18px;margin:1px 0 0;flex:none}
.h2-form .err{display:block;color:#FFD7D7;font-size:13.5px;margin-top:8px}
.h2-form .done{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);border-radius:18px;padding:14px 16px;max-width:560px;display:flex;flex-direction:column;gap:4px}
.h2-form .done b{font-weight:700}.h2-form .done span{color:#DCE6F7;font-size:14px}
.h2-cta .or{display:flex;gap:10px;align-items:center;flex-wrap:wrap;color:#B9C9E6;font-size:13.5px}
.h2-cta .ghost{display:inline-flex;align-items:center;gap:8px;border:1.5px solid rgba(255,255,255,.45);color:#fff;background:transparent;border-radius:14px;min-height:46px;padding:0 16px;font-weight:700;cursor:pointer}

/* máy tính bảng, điện thoại */
@media (max-width:1100px){.h2-cats{grid-template-columns:repeat(6,minmax(0,1fr))}}
@media (max-width:980px){
  .h2-hero,.h2-how,.h2-why,.h2-cta{grid-template-columns:minmax(0,1fr)}
  .h2-worlds .h2-world{min-height:220px}
  .h2-cats{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-width:640px){
  .h2-sec{padding-block:16px}
  .h2-banner{min-height:520px;border-radius:22px}.h2-banner .bd{padding:24px 20px}
  .h2-worlds{gap:10px}.h2-worlds .h2-world{min-height:190px;border-radius:20px}.h2-world b{font-size:19px}
  .h2-cats{gap:10px}.h2-cat .im{border-radius:16px}.h2-cat b{font-size:12.5px}.h2-cat small{display:none}
  .h2-steps{grid-template-columns:minmax(0,1fr)}.h2-van{min-height:240px}
  .h2-why .pts{grid-template-columns:minmax(0,1fr)}.h2-why .collage{height:260px}
  .h2-cta{border-radius:22px}.h2-cta .im{min-height:200px}
  .h2-cta .im::after{background:linear-gradient(180deg,rgba(11,50,117,0) 50%,rgba(11,50,117,1) 100%)}
  .h2-cta .badge{top:12px;bottom:auto;left:12px}.h2-cta .bd{padding:6px 20px 24px}
  .h2-form .f{flex-direction:column;align-items:stretch;padding:10px}.h2-form label:not(.chk){border-bottom:1px solid var(--line);padding-bottom:4px}
  .h2-form .btn{width:100%}.h2-cta .or .ghost{flex:1;justify-content:center}
}