/*
Theme Name: Wigs Vietnam
Theme URI: https://wigvietnam.com
Author: Wigs Vietnam
Description: Block theme for Wigs Vietnam — hand-tied human hair wig manufacturer. Black & white, editorial, built for a multilingual B2B catalogue.
Version: 1.0.0
Requires at least: 6.5
Tested up to: 7.0
Requires PHP: 8.1
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: wigsvietnam
Tags: block-theme, full-site-editing, business, rtl-language-support
*/

/* ---------- Nền tảng ---------- */

body {
  font-variant-numeric: lining-nums;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Tiếng Việt: dấu chồng (ế ộ ữ) cần thêm khoảng dòng để không đụng dòng trên */
:lang(vi) h1,
:lang(vi) h2,
:lang(vi) h3 { line-height: 1.35; }

/* Tiếng Ả Rập: Playfair không có glyph Ả Rập — chuyển sang font hệ thống */
:lang(ar) { font-family: "IBM Plex Sans Arabic", "Noto Kufi Arabic", sans-serif; }
:lang(ar) h1, :lang(ar) h2, :lang(ar) h3 { font-family: inherit; line-height: 1.5; }

/* Tiếng Nhật */
:lang(ja) { font-family: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif; }
:lang(ja) h1, :lang(ja) h2, :lang(ja) h3 { font-family: inherit; line-height: 1.45; }

/* ---------- Kiểu chữ dùng lại ---------- */

.is-style-eyebrow {
  font-family: var(--wp--preset--font-family--body);
  font-size: var(--wp--preset--font-size--eyebrow);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--wp--preset--color--ash);
  margin-bottom: var(--wp--preset--spacing--20);
}

.is-style-lead {
  font-size: var(--wp--preset--font-size--lead);
  line-height: 1.7;
  color: #3a3a3a;
}

/* Số liệu năng lực: 400 / 50 / 10–15 */
.wv-stat__figure {
  font-family: var(--wp--preset--font-family--display);
  font-size: clamp(2.5rem, 5vw, 3.75rem);
  line-height: 1;
  font-weight: 400;
}
.wv-stat__label {
  font-size: var(--wp--preset--font-size--small);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wp--preset--color--ash);
  margin-top: 0.75rem;
}

/* ---------- Header ---------- */

.wv-header {
  border-bottom: 1px solid var(--wp--preset--color--hairline);
}
.wv-header .wp-block-site-logo img { display: block; }

.wv-header .wp-block-navigation a {
  text-decoration: none;
  font-size: var(--wp--preset--font-size--small);
  letter-spacing: 0.04em;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
}
.wv-header .wp-block-navigation a:hover,
.wv-header .wp-block-navigation .current-menu-item > a {
  border-bottom-color: var(--wp--preset--color--ink);
}

/* ---------- Ảnh ---------- */

.wv-figure img { display: block; width: 100%; height: auto; }

.wv-hover-zoom { overflow: hidden; }
.wv-hover-zoom img {
  transition: transform 0.6s cubic-bezier(0.2, 0.6, 0.2, 1);
  will-change: transform;
}
.wv-hover-zoom:hover img { transform: scale(1.035); }

@media (prefers-reduced-motion: reduce) {
  .wv-hover-zoom img { transition: none; }
  .wv-hover-zoom:hover img { transform: none; }
}

/* ---------- Thẻ sản phẩm ---------- */

.wv-card { display: block; text-decoration: none; }
.wv-card__title {
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--h3);
  margin: 1.1rem 0 0.35rem;
}
.wv-card__meta {
  font-size: var(--wp--preset--font-size--small);
  color: var(--wp--preset--color--ash);
  letter-spacing: 0.04em;
}

/* ---------- Footer ---------- */

.wv-footer {
  border-top: 1px solid var(--wp--preset--color--hairline);
  font-size: var(--wp--preset--font-size--small);
}
.wv-footer a { text-decoration: none; }
.wv-footer a:hover { text-decoration: underline; }

/* ---------- Trợ năng ---------- */

.skip-link:focus {
  position: fixed;
  top: 12px; left: 12px;
  z-index: 999;
  background: var(--wp--preset--color--ink);
  color: var(--wp--preset--color--paper);
  padding: 12px 20px;
}

:where(a, button, input, textarea, select):focus-visible {
  outline: 2px solid var(--wp--preset--color--ink);
  outline-offset: 3px;
}

/* ---------- Bảng (thông số sản phẩm) ---------- */

.wv-spec {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--wp--preset--font-size--small);
}
.wv-spec th,
.wv-spec td {
  text-align: left;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--wp--preset--color--hairline);
  vertical-align: top;
}
.wv-spec th {
  font-weight: 500;
  color: var(--wp--preset--color--ash);
  width: 42%;
  letter-spacing: 0.03em;
}

/* =========================================================================
   Tràn viền — tự làm, không phụ thuộc .alignfull của WordPress
   ====================================================================== */

.wv-full {
  /* Không dùng width:100vw — trên mobile 100vw không trừ thanh cuộn nên gây tràn.
     width:auto + margin âm cho kết quả chính xác ở mọi bề rộng.
     !important để thắng CSS layout WordPress sinh động. */
  width: auto !important;
  max-width: none !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
}

/* =========================================================================
   Hero
   Selector 3 lớp để thắng quy tắc .alignfull img{height:auto} của WP core
   ====================================================================== */

section.wv-hero {
  position: relative;
  height: min(78vh, 720px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: #0d0d0d;
  margin-top: 0;
}
section.wv-hero .wv-hero__media { position: absolute; inset: 0; margin: 0; }
section.wv-hero .wv-hero__media img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center 42%;
  display: block;
  filter: grayscale(1) contrast(1.06) brightness(0.96);
}
section.wv-hero .wv-hero__media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,.30) 45%, rgba(0,0,0,.80) 100%);
}
section.wv-hero .wv-hero__inner {
  position: relative; z-index: 1; width: 100%;
  max-width: var(--wp--style--global--wide-size); margin: 0 auto;
  padding: clamp(2rem, 5vw, 4rem) clamp(1rem, 3.5vw, 3.5rem);
  color: #fff;
}
.wv-hero__eyebrow {
  font-size: .6875rem; font-weight: 500; letter-spacing: .24em;
  text-transform: uppercase; color: rgba(255,255,255,.7); margin: 0 0 1.1rem;
}
.wv-hero__title {
  font-family: var(--wp--preset--font-family--display);
  font-weight: 400; font-size: clamp(2rem, 5vw, 4rem);
  line-height: 1.08; letter-spacing: -.02em; margin: 0;
  max-width: 16ch; color: #fff;
}
.wv-hero__sub {
  margin: 1.25rem 0 0; max-width: 46ch;
  font-size: clamp(.9rem, 1.2vw, 1.0625rem); line-height: 1.7;
  color: rgba(255,255,255,.85);
}
.wv-hero__actions { margin-top: 1.9rem; display: flex; gap: .75rem; flex-wrap: wrap; }
.wv-hero__actions a {
  display: inline-block; padding: .85rem 1.75rem; font-size: .8125rem;
  letter-spacing: .06em; text-decoration: none; border: 1px solid #fff;
  transition: background .18s ease, color .18s ease;
}
.wv-hero__actions a:first-child { background: #fff; color: #111; }
.wv-hero__actions a:first-child:hover { background: transparent; color: #fff; }
.wv-hero__actions a + a { color: #fff; }
.wv-hero__actions a + a:hover { background: #fff; color: #111; }

/* =========================================================================
   Dải số liệu
   ====================================================================== */

.wv-stats {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--wp--preset--color--hairline);
  border-bottom: 1px solid var(--wp--preset--color--hairline);
  max-width: var(--wp--style--global--wide-size); margin-left: auto; margin-right: auto;
}
.wv-stats__item {
  padding: clamp(1.75rem, 3.5vw, 2.75rem) clamp(.75rem, 2vw, 1.5rem);
  text-align: center;
  border-left: 1px solid var(--wp--preset--color--hairline);
}
.wv-stats__item:first-child { border-left: 0; }
.wv-stats__num {
  display: block; font-family: var(--wp--preset--font-family--display);
  font-weight: 400; font-size: clamp(2.25rem, 4.5vw, 3.5rem); line-height: 1;
  font-variant-numeric: lining-nums tabular-nums;
}
.wv-stats__label {
  display: block; margin-top: .8rem; font-size: .7rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--wp--preset--color--ash); line-height: 1.5;
}
@media (max-width: 860px) {
  .wv-stats { grid-template-columns: repeat(2, 1fr); }
  .wv-stats__item:nth-child(3) { border-left: 0; }
  .wv-stats__item:nth-child(n+3) { border-top: 1px solid var(--wp--preset--color--hairline); }
}

/* =========================================================================
   Dải ảnh ngang
   ====================================================================== */

.wv-band { position: relative; overflow: hidden; }
.wv-band img {
  width: 100%; max-width: none; height: clamp(260px, 38vh, 440px);
  object-fit: cover; display: block; filter: grayscale(1) contrast(1.05);
}

/* =========================================================================
   Thư viện ảnh xưởng — 4 cột, tỉ lệ đồng nhất
   ====================================================================== */

.wv-gallery {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(.4rem, .7vw, .75rem);
  max-width: var(--wp--style--global--wide-size); margin-left: auto; margin-right: auto;
}
.wv-gallery figure { margin: 0; overflow: hidden; aspect-ratio: 3 / 4; }
.wv-gallery figure img {
  width: 100%; height: 100%; max-width: none; object-fit: cover; display: block;
  filter: grayscale(1) contrast(1.05);
  transition: transform .7s cubic-bezier(.2,.6,.2,1);
}
.wv-gallery figure:hover img { transform: scale(1.04); }
@media (max-width: 900px) { .wv-gallery { grid-template-columns: repeat(2, 1fr); } }

/* =========================================================================
   Hiện dần khi cuộn
   ====================================================================== */

.wv-reveal { opacity: 0; transform: translateY(20px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.2,.6,.2,1); }
.wv-reveal.is-revealed { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .wv-reveal { opacity: 1; transform: none; transition: none; }
  .wv-gallery figure img, .wv-hover-zoom img { transition: none; }
  .wv-gallery figure:hover img, .wv-hover-zoom:hover img { transform: none; }
}

/* =========================================================================
   Thẻ sản phẩm — ép cùng tỉ lệ để tiêu đề thẳng hàng
   ====================================================================== */

.wv-cards .wp-block-column { display: flex; flex-direction: column; }
.wv-cards .wp-block-image { margin: 0 0 1.1rem; }
.wv-cards .wp-block-image img {
  width: 100%; max-width: none; height: auto;
  aspect-ratio: 3 / 4; object-fit: cover; display: block;
}
.wv-cards .wv-card__title { margin-top: 0; }

/* Ảnh trong khối 2 cột kỹ thuật — đồng bộ đen trắng với ảnh xưởng */
.wv-craft-figure img { filter: grayscale(1) contrast(1.05); }

/* Hero dính sát header.
   WordPress đặt margin-block-start 24px giữa các khối cấp cao nhất —
   đó chính là khe trắng dưới header. */
.wp-site-blocks > main { margin-block-start: 0 !important; }
main.wp-block-group > .wp-block-post-content { margin-top: 0 !important; }
.wp-block-post-content > .wv-full:first-child,
.wp-block-post-content > .wv-hero:first-child { margin-top: 0 !important; }

/* =========================================================================
   Mobile — co gọn, không tràn ngang
   ====================================================================== */

@media (max-width: 781px) {
  section.wv-hero { height: auto; min-height: 76svh; }
  .wv-hero__title { max-width: 100%; font-size: clamp(1.75rem, 8vw, 2.5rem); }
  .wv-hero__sub { max-width: 100%; }
  .wv-hero__actions a { flex: 1 1 100%; text-align: center; }
  .wv-cards .wp-block-column { flex-basis: 100% !important; }
  .wv-band img { height: clamp(200px, 34vh, 300px); }
}

/* Chặn mọi thứ tràn ngang trên màn nhỏ */
html, body { overflow-x: hidden; max-width: 100%; }
img, video, figure, table { max-width: 100%; }

/* Cắt đứt mọi khả năng tràn ngang */
.wv-hero__title, .wv-hero__sub { overflow-wrap: break-word; }
.wv-stats, .wv-gallery, .wv-band { max-width: 100%; }

/* =========================================================================
   Độ dài dòng chữ
   Ảnh và lưới chạy full màn, nhưng chữ phải giới hạn ~65 ký tự/dòng —
   dòng dài hơn thì mắt bị lạc khi xuống dòng.
   ====================================================================== */

.wp-block-column > p,
.wp-block-column > h2,
.wp-block-column > h3,
.wp-block-column > ul,
.wp-block-column > ol { max-width: 62ch; }

.wp-block-group > p:not(.has-text-align-center),
.wp-block-group > h2:not(.has-text-align-center),
.wp-block-group > ul,
.wp-block-group > ol { max-width: 68ch; }

.wp-block-group > p.has-text-align-center,
.wp-block-group > h2.has-text-align-center { max-width: 34ch; margin-left: auto; margin-right: auto; }

/* Khối kỹ thuật 2 cột: ảnh to hơn, chữ gọn lại */
@media (min-width: 1200px) {
  .wv-craft-cols > .wp-block-column:first-child { flex-basis: 54% !important; }
}

/* Tiêu đề mục phải thẳng hàng với lưới ảnh bên dưới, không bị WordPress căn giữa */
.wp-block-group.alignwide > p,
.wp-block-group.alignwide > h2,
.wp-block-group.alignwide > h3,
.wp-block-group.alignwide > ul { margin-left: 0; margin-right: 0; }

/* Đoạn dẫn căn giữa: rộng vừa đủ, không bị bóp thành cột hẹp */
.wp-block-group > p.has-text-align-center,
.wp-block-group > h2.has-text-align-center,
.wp-block-group.alignwide > p.has-text-align-center,
.wp-block-group.alignwide > h2.has-text-align-center {
  max-width: 46ch; margin-left: auto; margin-right: auto;
}

/* Header: logo sát mép trái của lưới nội dung, menu sát mép phải */
.wv-header > .wp-block-group.alignwide {
  width: 100%;
  max-width: var(--wp--style--global--wide-size);
  margin-left: auto;
  margin-right: auto;
}
.wv-header .wp-block-site-logo { margin-left: 0; }
.wv-header .wp-block-site-logo img { max-width: 190px; height: auto; }
@media (max-width: 781px) {
  .wv-header .wp-block-site-logo img { max-width: 150px; }
}

/* =========================================================================
   Form hỏi hàng
   ====================================================================== */

.wv-form { max-width: 760px; margin-top: var(--wp--preset--spacing--20); }
.wv-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.5rem; }
@media (max-width: 640px) { .wv-form__row { grid-template-columns: 1fr; } }

.wv-form__field { margin: 0 0 1.35rem; }
.wv-form__field--full { max-width: none; }
.wv-form label {
  display: block; margin-bottom: .45rem;
  font-size: .75rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--wp--preset--color--ash);
}
.wv-form input[type="text"],
.wv-form input[type="email"],
.wv-form input[type="tel"],
.wv-form select,
.wv-form textarea {
  width: 100%; padding: .8rem .9rem;
  border: 1px solid var(--wp--preset--color--hairline);
  border-radius: 0; background: #fff; color: var(--wp--preset--color--ink);
  font-family: inherit; font-size: 1rem; line-height: 1.5;
  transition: border-color .15s ease;
}
.wv-form textarea { resize: vertical; min-height: 8rem; }
.wv-form :is(input, select, textarea):focus {
  border-color: var(--wp--preset--color--ink); outline: none;
}
.wv-form select { appearance: none; background-image:
  linear-gradient(45deg, transparent 50%, #111 50%), linear-gradient(135deg, #111 50%, transparent 50%);
  background-position: calc(100% - 20px) 1.35rem, calc(100% - 15px) 1.35rem;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 2.5rem; }

.wv-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.wv-form__submit { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; margin-top: .5rem; }
.wv-form button[type="submit"] {
  padding: .95rem 2.25rem; border: 1px solid var(--wp--preset--color--ink);
  background: var(--wp--preset--color--ink); color: #fff;
  font-family: inherit; font-size: .8125rem; letter-spacing: .06em; cursor: pointer;
  transition: background .18s ease, color .18s ease;
}
.wv-form button[type="submit"]:hover { background: #fff; color: var(--wp--preset--color--ink); }
.wv-form__hint { font-size: .75rem; color: var(--wp--preset--color--ash); }

.wv-form__notice { padding: 1.25rem 1.5rem; margin-bottom: 2rem; border-left: 2px solid var(--wp--preset--color--ink); background: var(--wp--preset--color--bone); }
.wv-form__notice p { margin: .4rem 0 0; font-size: .9375rem; }
.wv-form__notice--err { border-left-color: #a11; }

/* =========================================================================
   Trang nội dung (About / Our Craft / Wholesale / Contact)
   Ảnh chạy rộng 1640px, chữ giới hạn ~68ch — nhưng CẢ HAI phải cùng
   một mép trái, nếu không nhìn như trang bị lệch.
   WordPress mặc định căn giữa từng khối, nên phải ghi đè margin.
   ====================================================================== */

body.page:not(.home) main > .wp-block-post-title,
body.page:not(.home) .wp-block-post-content > *:not(.alignwide):not(.alignfull),
body.single .wp-block-post-content > *:not(.alignwide):not(.alignfull) {
  /* !important vì WordPress đặt margin:auto !important cho layout constrained */
  margin-left: max(0px, calc((100% - var(--wp--style--global--wide-size)) / 2)) !important;
  margin-right: auto !important;
}

/* Bảng thông số và bảng lead time cũng theo mép trái đó */
body.page:not(.home) .wp-block-table { max-width: 68ch; }

/* Cột trong trang nội dung: cả hàng cột canh theo lưới rộng */
body.page:not(.home) .wp-block-post-content > .wp-block-columns:not(.alignwide) {
  max-width: var(--wp--style--global--wide-size);
}

/* =========================================================================
   SỬA ĐỢT 2 — theo phản hồi duyệt giao diện
   ====================================================================== */

/* --- (1) Tiêu đề mục phải canh trái thẳng với lưới bên dưới ---------------
   Lần trước thiếu !important nên vẫn thua margin:auto!important của WordPress */

.wp-block-group.alignwide > p,
.wp-block-group.alignwide > h2,
.wp-block-group.alignwide > h3,
.wp-block-group.alignwide > ul,
.wp-block-group.alignwide > ol {
  margin-left: 0 !important;
  margin-right: auto !important;
}
.wp-block-group.alignwide > p.has-text-align-center,
.wp-block-group.alignwide > h2.has-text-align-center {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* --- (2) PHÂN CẤP THỊ GIÁC -----------------------------------------------
   Trang đen trắng dễ bị "phẳng": chữ nào cũng đen, cỡ gần nhau, đọc mệt.
   Ba tầng độ đậm màu + khoảng cách + đường kẻ để mắt bám được mạch. */

body { color: #2E2E2E; }                      /* nội dung: đen dịu */

h1, h2, h3, h4,
.wv-stats__num, .wv-card__title,
strong, b { color: #0D0D0D; }                 /* tiêu đề & nhấn: đen sâu */

/* Hero nằm trên ảnh tối — chữ phải trắng, ghi đè quy tắc trên */
section.wv-hero .wv-hero__title { color: #fff !important; }
section.wv-hero .wv-hero__sub   { color: rgba(255,255,255,.88); }

/* Tiêu đề mục: to hơn, cách xa phần trên hơn, có đường kẻ mảnh dẫn mắt */
.wp-block-post-content h2,
.wp-block-group h2 {
  font-size: clamp(1.75rem, 2.6vw, 2.5rem);
  line-height: 1.18;
  margin-top: clamp(3.5rem, 6vw, 5.5rem);
  margin-bottom: 1.1rem;
}
.wp-block-post-content h2::before {
  content: "";
  display: block;
  width: 40px;
  height: 1px;
  background: #0D0D0D;
  margin-bottom: 1.4rem;
  opacity: .5;
}
/* Eyebrow đứng ngay trên h2 thì h2 không cần kẻ nữa */
.is-style-eyebrow + h2::before { display: none; }
.is-style-eyebrow + h2 { margin-top: 0; }

.wp-block-post-content h3,
.wp-block-group h3 {
  font-size: clamp(1.0625rem, 1.2vw, 1.25rem);
  font-family: var(--wp--preset--font-family--body);
  font-weight: 600;
  letter-spacing: 0;
  margin-top: 2.25rem;
  margin-bottom: .6rem;
}

/* Đoạn dẫn đầu trang: to và nhạt hơn để tách khỏi phần thân */
.is-style-lead {
  font-size: clamp(1.0625rem, 1.5vw, 1.3125rem);
  line-height: 1.65;
  color: #3D3D3D;
  max-width: 54ch;
}

/* Chữ nhấn trong đoạn phải thật sự nổi */
.wp-block-post-content strong,
.wp-block-group strong { font-weight: 600; }

/* Đoạn thường: giãn dòng vừa phải, không quá thưa */
.wp-block-post-content p { line-height: 1.72; margin-bottom: 1.15rem; }

/* Bảng thông số / lead time: nhấn cột trái, kẻ nhẹ */
.wp-block-table table { border-collapse: collapse; width: 100%; }
.wp-block-table td, .wp-block-table th {
  padding: .85rem 1rem .85rem 0;
  border: 0;
  border-bottom: 1px solid var(--wp--preset--color--hairline);
  font-size: .9375rem;
}
.wp-block-table tr td:first-child { color: #0D0D0D; font-weight: 500; }
.wp-block-table tr td:last-child  { color: #5A5A5A; white-space: nowrap; text-align: right; }

/* --- (3) Lưới sản phẩm: mọi khung ảnh cùng một tỉ lệ --------------------- */

.wp-block-query .wp-block-post-featured-image {
  margin: 0 0 1rem;
  overflow: hidden;
  background: var(--wp--preset--color--bone);
}
.wp-block-query .wp-block-post-featured-image img {
  width: 100%;
  max-width: none;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  display: block;
  transition: transform .6s cubic-bezier(.2,.6,.2,1);
}
.wp-block-query .wp-block-post-featured-image:hover img { transform: scale(1.035); }
.wp-block-query .wp-block-post-template { align-items: start; }
.wp-block-query .wv-card__title { margin-top: 0; margin-bottom: .3rem; }

/* --- (4) Ảnh trong bài: khống chế chiều cao, không chiếm hết màn hình ---- */

.wp-block-post-content > figure.wp-block-image img,
.wp-block-post-content > .wp-block-image img {
  width: 100%;
  height: auto;
  max-height: 460px;
  object-fit: cover;
}
.wp-block-post-content > figure.wp-block-image { margin: 2.5rem 0; }

@media (prefers-reduced-motion: reduce) {
  .wp-block-query .wp-block-post-featured-image img { transition: none; }
  .wp-block-query .wp-block-post-featured-image:hover img { transform: none; }
}

/* --- (5) Bản đồ trang liên hệ ------------------------------------------- */

.wv-map {
  margin-top: 2.5rem;
  border: 1px solid var(--wp--preset--color--hairline);
  line-height: 0;
}
.wv-map iframe {
  width: 100%;
  height: clamp(280px, 42vh, 420px);
  border: 0;
  display: block;
  filter: grayscale(1) contrast(1.05);
}

/* --- (6) Đồng bộ tông ảnh -------------------------------------------------
   Quy tắc: ảnh XƯỞNG và ĐỘI NGŨ để đen trắng cho khớp nhận diện;
   ảnh SẢN PHẨM giữ màu vì khách cần thấy đúng màu tóc.
   Các trang About / Our Craft / Wholesale / Contact chỉ chứa ảnh xưởng. */

body.page:not(.home) .wp-block-post-content .wp-block-image img {
  filter: grayscale(1) contrast(1.05);
}

/* Bản đồ rộng bằng ảnh phía trên cho thẳng hàng */
.wv-map {
  max-width: var(--wp--style--global--wide-size);
  margin-left: max(0px, calc((100% - var(--wp--style--global--wide-size)) / 2)) !important;
  margin-right: auto !important;
}

/* Dải ảnh ngang: chốt tỉ lệ 3:1 để người chụp có con số rõ ràng */
.wv-band img { height: auto; aspect-ratio: 3 / 1; }