/**
 * bridge.css — CSS bespoke DUY NHẤT của site Curlpup (hàng `native+css:{class}` của conversion-map §3).
 * Sinh từ HTML/assets/css/style.css + khối <style> của about/services/contact (B1).
 * Cấu trúc theo references/style-ownership-and-css-bridge.md:
 *   1. Alias token màu trên body[class*="elementor-kit-"] (KHÔNG :root — kit define globals ở .elementor-kit-N)
 *   2. Token ngoài kit (kit không có slot): maxw/radius/shadow/ease
 *   3. Shim gutter: kit container_padding áp mọi container, gutter chỉ thuộc top-level
 *   4. Lớp adaptation: dịch selector nguồn sang PHẦN TỬ THẬT của widget Elementor
 *   5. CSS component port nguyên văn từ nguồn
 *   6. CSS riêng từng trang (thứ tự như browser: sheet global rồi khối <style> của trang)
 * KHÔNG sửa giá trị nguồn ở đây — lệch giá trị = deviation phải ghi ledger.
 */

/* ── 1. Alias token màu → global kit ─────────────────────────────────── */
body[class*="elementor-kit-"] {
  --bg: var(--e-global-color-80f87c8);
  --bg-soft: var(--e-global-color-2cadb3c);
  --oat: var(--e-global-color-773af24);
  --ink: var(--e-global-color-primary);
  --ink-2: var(--e-global-color-b326dd6);
  --ink-3: var(--e-global-color-text);
  --ink-4: var(--e-global-color-be2d229);
  --line: var(--e-global-color-264f39c);
  --line-2: var(--e-global-color-fe0c3e2);
  --accent: var(--e-global-color-secondary);
  --accent-ink: var(--e-global-color-accent);
  --accent-soft: var(--e-global-color-b2d86e9);
  --dark-surface: var(--e-global-color-d86d34d);
  --on-dark: var(--e-global-color-0f58baf);
  --on-dark-2: var(--e-global-color-9f397c7);
  --glow: var(--e-global-color-6ae5a62);
}

/* ── 2. Token ngoài kit (copy nguyên khối :root nguồn — kit không có slot) ── */
:root {
  --maxw: 1320px;
  --radius: 18px;
  --radius-lg: 28px;
  --shadow: 0 24px 60px -28px rgba(26,21,18,.18);
  --shadow-card: 0 1px 0 rgba(26,21,18,.04), 0 20px 40px -22px rgba(26,21,18,.12);
  --ease: cubic-bezier(.16,1,.3,1);
}

/* ── 3. Gutter chỉ thuộc container top-level ─────────────────────────── */
.e-con .e-con:not(.e-con-boxed) {
  --container-default-padding-top: 0;
  --container-default-padding-right: 0;
  --container-default-padding-bottom: 0;
  --container-default-padding-left: 0;
}

/* ── 4. Adaptation: dịch selector nguồn → PHẦN TỬ THẬT của widget Elementor ──
 * Luật (style-ownership §5): `css_classes`/`_css_classes` render trên WRAPPER
 * (.e-con / .elementor-widget-<slug>), KHÔNG trên img/h1/a/p của nguồn. Rule nguồn
 * nhắm thẳng phần tử con vẫn khớp (descendant), nhưng rule nhắm CHÍNH phần tử mang
 * class thì phải bắc cầu. Khối này chỉ chứa phần bắc cầu — 0 giá trị mới.
 */

/* 4.1 Link: nguồn a{color:inherit}. Kit KHÔNG đặt link color (token-map để rỗng) nên
 *      rule port (0,0,1) thắng reset Hello a{color:#c36} nhờ thứ tự nạp.
 *      Riêng Hello reset dùng !important ở đâu thì mới cần nâng — hiện không. */

/* 4.1b Hello `reset.css` đặt `[type="button"],[type="submit"],button{border:1px solid #CC3366}`
 *      (#CC3366 = màu link mặc định của Hello). Kit CHỈ khai background/typo/radius/padding cho
 *      button, KHÔNG khai border → viền hồng cánh sen sống sót trên MỌI <button> không được
 *      rule riêng phủ: nút "Find my size", nút search, nút Woo… Đo được: `.shp-finder__submit`
 *      background ink nhưng border-color rgb(204,51,102).
 *      Trả border về `transparent` ở ĐÚNG specificity của Hello; rule component phía dưới
 *      (nút ghost, nút viền) khai border tường minh nên vẫn thắng nhờ thứ tự trong file. */
button, [type="button"], [type="submit"], [type="reset"] { border-color: transparent; }

/* 4.2 text-editor: css widget bind về global TEXT; mô hình nguồn là kế thừa container. */
.elementor-widget-text-editor { color: inherit; }
/* p cuối trong text-editor: nguồn p{margin:0 0 1.1rem} chỉ áp trong .prose — ngoài .prose
 *      widget tự lo khoảng cách bằng container gap → bỏ margin mặc định của WP. */
.elementor-widget-text-editor > .elementor-widget-container > :first-child { margin-top: 0; }
.elementor-widget-text-editor > .elementor-widget-container > :last-child { margin-bottom: 0; }

/* 4.3 Button: kit sở hữu typography/màu/radius/padding của .elementor-button.
 *      Ở đây chỉ phần .btn của nguồn mà kit không có control. */
.elementor-widget-button .elementor-button {
  display: inline-flex; align-items: center; gap: .55rem; white-space: nowrap;
  transition: transform .25s var(--ease), background .25s var(--ease), color .25s var(--ease), box-shadow .25s var(--ease);
}
.elementor-widget-button .elementor-button:active { transform: translateY(1px) scale(.98); }
.elementor-widget-button .elementor-button-icon { transition: transform .35s var(--ease); display: inline-flex; }
.elementor-widget-button .elementor-button:hover .elementor-button-icon { transform: translateX(4px); }
/* biến thể .btn-ghost / .btn-accent của nguồn — class đặt trên widget button */
.btn-ghost .elementor-button { background-color: transparent; color: var(--ink); border: 1px solid var(--line-2); }
.btn-ghost .elementor-button:hover, .btn-ghost .elementor-button:focus { background-color: var(--oat); color: var(--ink); }
.btn-accent .elementor-button { background-color: var(--accent); color: #fff; }
.btn-accent .elementor-button:hover, .btn-accent .elementor-button:focus { background-color: var(--accent-ink); color: #fff; }

/* 4.4 Ảnh: class nguồn nằm trên <img>; sau convert nằm trên wrapper widget image →
 *      bắc cầu sang img thật + bỏ text-align:center và inline-block của widget. */
.elementor-widget-image, .elementor-widget-image > .elementor-widget-container,
.elementor-widget-image figure { text-align: initial; line-height: 0; }
.elementor-widget-image img { display: block; }
/* .photo / .img / img.bg của nguồn: lấp kín khung tuyệt đối */
.photo, .editorial .img, .abt-story__frame .photo { position: absolute; inset: 0; }
.photo img, .editorial .img img, .abt-story__frame .photo img,
.elementor-widget-image.bg img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.hero-frame .photo img { filter: saturate(.92) contrast(1.02); }
.abt-story__frame .photo img { filter: saturate(.92) contrast(1.02); }

/* 4.5 icon-box: class nguồn của ô icon nằm trên wrapper → icon thật là .elementor-icon.
 *      Specificity ≥ (0,3,0) theo style-ownership §4 (css widget icon bind global primary). */
.svc-card .svc-card__icon .elementor-icon,
.abt-value-card .abt-value-icon .elementor-icon,
.ctc-info-card .ctc-info-card__icon .elementor-icon { color: var(--accent-ink); }

/* 4.6 icon-btn của header: nguồn là <button>; sau convert là wrapper widget
 *      (search-form toggle / wishlist / menu-cart) → dựng lại hình tròn 38px trên phần tử thật. */
.icon-btn .elementor-search-form__toggle,
.icon-btn .elementor-menu-cart__toggle_button,
.icon-btn > .elementor-widget-container > a {
  width: 38px; height: 38px; border-radius: 999px; border: 1px solid var(--line);
  display: inline-flex; align-items: center; justify-content: center; color: var(--ink-2);
  transition: background .25s var(--ease), color .2s var(--ease); padding: 0;
}
.icon-btn .elementor-search-form__toggle:hover,
.icon-btn .elementor-menu-cart__toggle_button:hover,
.icon-btn > .elementor-widget-container > a:hover { background: var(--oat); color: var(--ink); }

/* 4.7 nav-menu: nguồn .nav-links a — widget render a.elementor-item. */
.nav-links .elementor-nav-menu--main, .nav-links .elementor-nav-menu--main .elementor-nav-menu { width: 100%; }
.nav-links .elementor-nav-menu--main .elementor-nav-menu { display: flex; justify-content: center; gap: 1.8rem; font-size: .93rem; }
.nav-links .elementor-nav-menu--main .elementor-item { padding: .35rem 0; position: relative; color: var(--ink-2); }
.nav-links .elementor-nav-menu--main .elementor-item:hover,
.nav-links .elementor-nav-menu--main .elementor-item:focus,
.nav-links .elementor-nav-menu--main .elementor-item.elementor-item-active { background: transparent; color: var(--ink-2); }
.nav-links .elementor-item::after {
  content: ""; position: absolute; left: 0; bottom: -2px; height: 1px; width: 0;
  background: var(--ink); transition: width .3s var(--ease);
}
.nav-links .elementor-item:hover::after,
.nav-links .elementor-item.elementor-item-active::after { width: 100%; }
/* menu phụ trên thanh announcement + menu footer + menu legal: hàng ngang, kế thừa màu */
.links .elementor-nav-menu--main .elementor-nav-menu { display: flex; gap: 1.5rem; }
.foot-legal .elementor-nav-menu--main .elementor-nav-menu { display: flex; gap: 1.4rem; }
.links .elementor-nav-menu--main .elementor-item,
.foot-legal .elementor-nav-menu--main .elementor-item { padding: 0; background: transparent; color: inherit; }
.links .elementor-nav-menu--main .elementor-item:hover,
.links .elementor-nav-menu--main .elementor-item:focus { background: transparent; color: var(--on-dark); }
.foot .col .elementor-nav-menu--main .elementor-nav-menu { display: block; }
.foot .col .elementor-nav-menu--main .elementor-item {
  display: block; color: var(--ink-2); font-size: .94rem; padding: .28rem 0;
  background: transparent; transition: color .2s;
}
.foot .col .elementor-nav-menu--main .elementor-item:hover,
.foot .col .elementor-nav-menu--main .elementor-item:focus { color: var(--accent); background: transparent; }

/* 4.8 social-icons: nguồn .foot .socials a (vòng tròn viền). */
.socials .elementor-social-icon {
  width: 38px; height: 38px; border-radius: 99px; border: 1px solid var(--line);
  background-color: transparent; color: var(--ink-2);
}
.socials .elementor-social-icon:hover { background-color: var(--ink); color: var(--bg); border-color: var(--ink); }
.socials .elementor-social-icon svg, .socials .elementor-social-icon i { width: 17px; height: 17px; font-size: 17px; }

/* 4.9 icon-list: nguồn .zig-copy ul/li + svg tick. */
.zig-copy .elementor-icon-list-items { display: grid; gap: .55rem; padding: 0; margin: 0; }
.zig-copy .elementor-icon-list-item { display: flex; gap: .6rem; color: var(--ink-2); font-size: .94rem; align-items: flex-start; }
.zig-copy .elementor-icon-list-icon { color: var(--accent); margin-top: 3px; }

/* 4.10 star-rating: nguồn .testi .stars / .hero-card .stars (ký tự ★ màu accent, gap 2px). */
.stars .elementor-star-rating { color: var(--accent); gap: 2px; font-size: 14px; }
.stars .elementor-star-rating i:before { color: var(--accent); }

/* 4.11 form Pro: nguồn .form-field (light) và .field-row (trên nền tối).
 *      Kit đã sở hữu typography/nền/viền/radius/padding của field; ở đây chỉ layout + biến thể tối.
 *      Lưu ý: `.field-row` của nguồn KHÔNG tồn tại trong DOM Elementor (form Pro render
 *      `.elementor-form-fields-wrapper`) — biến thể tối dựng ở khối "newsletter" phía dưới,
 *      không phải ở đây. */
.ctc-form-card .elementor-field-group { display: block; margin-bottom: 1rem; }
.ctc-form-card .elementor-field-label { display: block; margin-bottom: .4rem; }
.newsletter .elementor-form { display: grid; gap: 14px; }
.newsletter .elementor-field-group { width: 100%; }
.newsletter .elementor-field-label { font-size: .78rem; color: #A8997F; letter-spacing: .06em; text-transform: uppercase; }

/* 4.12 nested-accordion: nguồn .accordion (đường kẻ trên/dưới, tiêu đề Fraunces, dấu +). */
.accordion .e-n-accordion-item { border-bottom: 1px solid var(--line); }
.accordion .e-n-accordion-item:first-child { border-top: 1px solid var(--line); }
.accordion .e-n-accordion-item-title {
  padding: 1.1rem 0; font-family: 'Fraunces', Georgia, serif; font-size: 1.1rem;
  color: var(--ink); font-weight: 500; background: transparent;
}
.accordion .e-n-accordion-item-title-icon { color: var(--accent); }
.accordion .e-n-accordion-item > .e-con { padding: 0 0 1.2rem; }
.accordion .e-n-accordion-item .elementor-widget-text-editor {
  color: var(--ink-3); max-width: 64ch; font-size: .95rem; line-height: 1.6;
}


/* 4.13 Mũi tên trong nút (nguồn `<svg class="arrow">` bên trong `<a class="btn">`).
 *      map §12: CSS mask data-URI trong bridge — arrow KHÔNG phải element của widget button.
 *      Opt-in bằng class `btn-arrow` trên widget (nút nào nguồn có arrow thì gắn). */
.btn-arrow .elementor-button::after {
  content: ""; flex: 0 0 14px; width: 14px; height: 14px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'><path d='M5 12h14M13 6l6 6-6 6'/></svg>") center / 14px 14px no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'><path d='M5 12h14M13 6l6 6-6 6'/></svg>") center / 14px 14px no-repeat;
  transition: transform .35s var(--ease);
}
.btn-arrow .elementor-button:hover::after { transform: translateX(4px); }

/* 4.14 Nút ghost trên nền TỐI: rule nguồn `.srv-cta__action .btn-ghost` nhắm wrapper,
 *      còn màu thật nằm trên <a class="elementor-button"> → bắc cầu (map §3 services §5). */
.srv-cta__action .btn-ghost .elementor-button,
.abt-cta-card--dark .btn-ghost .elementor-button {
  color: var(--line-2); border-color: rgba(228, 217, 197, .25); background-color: transparent;
}
.srv-cta__action .btn-ghost .elementor-button:hover,
.abt-cta-card--dark .btn-ghost .elementor-button:hover {
  color: var(--on-dark); border-color: rgba(228, 217, 197, .5); background-color: transparent;
}

/* 4.15 `.pre` / `.desc` của section-head là widget → class trên wrapper; chữ nằm trong
 *      .elementor-heading-title (heading) hoặc .elementor-widget-container (text-editor).
 *      Rule nguồn `.section-head .pre` / `.section-head .desc` khớp wrapper và thuộc tính
 *      font/color kế thừa xuống — trừ color của heading (post-css bind title_color) nên
 *      màu heading đi __globals__ trong spec, KHÔNG dựa rule này. */

/* 4.16 Container Elementor mặc định `width:100%` (biến --width). Trong hàng FLEX của nguồn,
 *      con là <div> tự co theo nội dung → container mang class nguồn phải trả width về auto,
 *      nếu không mỗi con chiếm trọn dòng và hàng ngang thành cột dọc (đo thật ở .srv-studio__facts). */
.srv-studio__facts .fact,
.hero-stats .stat,
.editorial-meta .editorial-meta__item,
.abt-stats-row .abt-stat,
.testi .who .who-text,
.hero-card .top .who-text,
.ctc-socials-row .ctc-socials-row__icons,
.foot-bottom .foot-legal,
.ann .row .ann-pill,
.ann .row .ann-links,
.nav-actions .icon-btn { width: auto; }

/* 4.17 icon-box (map §3 about §3, contact §2): nguồn là 3 phần tử anh em trong thẻ
 *      (span icon → h3 → p); widget gói chúng trong .elementor-icon-box-wrapper +
 *      .elementor-icon-box-content → trả lại layout cột + ô icon 46px của nguồn.
 *      Title/description vẫn là h3/p thật nên rule nguồn `.abt-value-card h3` khớp. */
.abt-value-card .elementor-icon-box-wrapper {
  display: flex; flex-direction: column; gap: .55rem; align-items: flex-start; text-align: left;
}
.abt-value-card .elementor-icon-box-content { display: flex; flex-direction: column; gap: .55rem; }
/* contact: icon BÊN TRÁI, khối chữ bên phải (nguồn .ctc-info-card{display:flex;gap:1rem}) */
.ctc-info-card .elementor-icon-box-wrapper {
  display: flex; flex-direction: row; align-items: flex-start; gap: 1rem; text-align: left;
}
.ctc-info-card .elementor-icon-box-content { display: block; }
.abt-value-card .elementor-icon-box-icon,
.ctc-info-card .elementor-icon-box-icon { margin: 0 0 .4rem; }
.abt-value-card .elementor-icon-box-icon .elementor-icon,
.ctc-info-card .elementor-icon-box-icon .elementor-icon {
  width: 46px; height: 46px; border-radius: 14px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent-soft); color: var(--accent-ink); font-size: 22px;
}
.abt-value-card .elementor-icon-box-icon .elementor-icon svg,
.ctc-info-card .elementor-icon-box-icon .elementor-icon svg { width: 22px; height: 22px; fill: currentColor; }
.abt-value-card .elementor-icon-box-title, .ctc-info-card .elementor-icon-box-title { margin: 0; }
.abt-value-card .elementor-icon-box-description, .ctc-info-card .elementor-icon-box-description { margin: 0; }

/* 4.18 about: khối trang trí rỗng (avatar gradient, blob) là container KHÔNG có nội dung —
 *      Elementor cho container rỗng min-height 0 nên kích thước lấy từ rule nguồn; chỉ cần
 *      chặn nó co lại trong flex column. */
.abt-team-card .abt-av, .abt-cta-card .abt-cta-card__blob { flex: 0 0 auto; }
.abt-cta-card .elementor-widget-button { align-self: flex-start; }

/* 4.19 Hello Elementor `reset.css` đặt cỡ + line-height + margin cho h1..h6
 *      (h1 2.5rem … h6 1rem, line-height 1.2) mà bộ HTML nguồn KHÔNG có: nguồn chỉ reset
 *      box-sizing/margin của body, nên mọi cỡ tiêu đề đến từ rule component
 *      (.page-hero h1, .section-head h2, .abt-cta-card__title…) còn phần còn lại rơi về
 *      mặc định UA. Đo thật: `.prose h2` render 32px thay vì 24.5px của thiết kế.
 *      Trả về đúng mặc định UA; rule component (0,1,x) vẫn thắng khối này (0,0,1). */
h1 { font-size: 2em;    line-height: normal; margin-block: .67em; }
h2 { font-size: 1.5em;  line-height: normal; margin-block: .83em; }
h3 { font-size: 1.17em; line-height: normal; margin-block: 1em; }
h4 { font-size: 1em;    line-height: normal; margin-block: 1.33em; }
h5 { font-size: .83em;  line-height: normal; margin-block: 1.67em; }
h6 { font-size: .67em;  line-height: normal; margin-block: 2.33em; }
/* bảng: Hello ép font-size .9em + width 100%; nguồn dùng rule riêng của .ctc-hours-table */
table { font-size: inherit; }

/* 4.20 contact: ô icon nguồn 42px (khác 46px của about) + nhãn nhỏ in hoa nằm ở
 *      .elementor-icon-box-title (widget không có slot thứ 3 nên value/sub đi trong description). */
.ctc-info-card .elementor-icon-box-icon .elementor-icon { width: 42px; height: 42px; border-radius: 12px; font-size: 20px; }
.ctc-info-card .elementor-icon-box-icon .elementor-icon svg { width: 20px; height: 20px; }
.ctc-info-card .elementor-icon-box-title {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; margin: 0 0 .22rem;
}
/* 4.21 form Pro: nút submit của nguồn chiếm trọn chiều ngang và canh giữa (.ctc-submit) */
.ctc-form-card .elementor-widget-form .elementor-button { width: 100%; justify-content: center; }
.ctc-form-card .elementor-form-fields-wrapper { margin: 0 -8px; }
.ctc-form-card .elementor-field-group { padding: 0 8px; margin-bottom: 1rem; }
.ctc-form-card .elementor-field-group > label { font-size: .82rem; font-weight: 500; margin-bottom: .4rem; display: block; }
/* acceptance = hàng consent của nguồn: nhãn (chuỗi hợp đồng map §8) nằm BÊN PHẢI ô tick */
.ctc-form-card .elementor-field-type-acceptance { display: flex; flex-direction: row-reverse; align-items: flex-start; gap: .65rem; justify-content: flex-end; }
.ctc-form-card .elementor-field-type-acceptance > label.elementor-field-label {
  font-size: .85rem; font-weight: 400; color: var(--ink-3); line-height: 1.45; margin: 0; text-transform: none; letter-spacing: 0;
}
.ctc-form-card .elementor-field-type-acceptance .elementor-field-subgroup { flex: 0 0 auto; }
.ctc-form-card .elementor-field-type-acceptance .elementor-field-option {
  display: flex; align-items: flex-start; gap: .65rem; font-size: .85rem; color: var(--ink-3); line-height: 1.45;
}
/* DOM của form Pro: <label> đứng TRƯỚC, checkbox nằm trong `.elementor-field-subgroup`
 * phía SAU → chỉ đặt display:flex là checkbox rơi xuống dưới chữ (đo: lệch 53px).
 * Kéo subgroup lên trước bằng order. */
.ctc-form-card .elementor-field-type-acceptance .elementor-field-subgroup { order: -1; flex: 0 0 auto }
.ctc-form-card .elementor-field-type-acceptance input[type="checkbox"] {
  margin-top: .2rem; width: 16px; height: 16px; accent-color: var(--accent); flex-shrink: 0; cursor: pointer;
}
.ctc-form-card .elementor-field-type-acceptance a { color: var(--accent-ink); border-bottom: 1px solid var(--line-2); }

/* 4.22 nested-accordion = .accordion của nguồn: dấu + xoay 45° khi mở (nguồn dùng
 *      .accordion__item.is-open .pm{transform:rotate(45deg)}), nội dung là text-editor. */
.accordion .e-n-accordion-item[open] .e-n-accordion-item-title-icon { transform: rotate(45deg); }
.accordion .e-n-accordion-item-title-icon { transition: transform .3s var(--ease); }
.accordion .accordion__a-body { color: var(--ink-3); max-width: 64ch; font-size: .95rem; line-height: 1.6; }

/* 4.23 social-icons: widget mặc định `--e-social-icon-icon-color:#fff` (glyph trắng trên nền
 *      thương hiệu). Nguồn dùng nút viền, glyph màu ink-2 → set qua BIẾN của widget,
 *      không đấu specificity (widget-social-icons.min.css: svg{fill:var(--e-social-icon-icon-color)}). */
.socials .elementor-social-icon { --e-social-icon-icon-color: var(--ink-2); }
.socials .elementor-social-icon:hover, .socials .elementor-social-icon:focus { --e-social-icon-icon-color: var(--bg); }

/* 4.24 nested-accordion: widget vẽ khung bằng biến --n-accordion-* (border 1px #d5d8dc,
 *      padding 10px) và widget-nested-accordion.min.css nạp SAU bridge → phải dùng selector
 *      2 class (0,2,0) mới thắng `.elementor-widget-n-accordion` (0,1,0) cùng thứ tự.
 *      Nguồn .accordion chỉ có hairline trên/dưới mỗi item. */
.accordion.elementor-widget-n-accordion {
  --n-accordion-border-width: 0px;
  --n-accordion-border-color: transparent;
  --n-accordion-padding: 1.1rem 0;
  --n-accordion-title-font-size: 1.1rem;
  --n-accordion-icon-size: 18px;
  --n-accordion-title-normal-color: var(--ink);
  --n-accordion-title-hover-color: var(--ink);
  --n-accordion-title-active-color: var(--ink);
  --n-accordion-icon-normal-color: var(--accent);
  --n-accordion-icon-hover-color: var(--accent);
  --n-accordion-icon-active-color: var(--accent);
}
.accordion .e-n-accordion-item > .e-con { border: 0; padding: 0 0 1.2rem; }

/* 4.25 Hello `reset.css` kẻ viền + nền sọc cho MỌI bảng
 *      (`table td,table th{border:1px solid …;padding:15px}` và
 *       `table tbody>tr:nth-child(odd)>td{background-color:…}` — (0,1,3), thắng rule chỉ-class).
 *      Bộ HTML nguồn không có style bảng toàn cục; bảng của nguồn chỉ dùng .ctc-hours-table.
 *      Trả về mặc định UA ở ĐÚNG specificity của Hello để rule component quyết định. */
table td, table th { border: 0; line-height: inherit; padding: 0; vertical-align: inherit; }
table tbody > tr:nth-child(odd) > td, table tbody > tr:nth-child(odd) > th,
table tbody tr:hover > td, table tbody tr:hover > th { background-color: transparent; }
table tbody:first-child tr:first-child td, table tbody:first-child tr:first-child th,
table thead:first-child tr:first-child td, table thead:first-child tr:first-child th { border-block-start: 0; }

/* 4.26 index — bắc cầu các class nguồn sang phần tử thật + hàng flex đổi lại row.
 *      (chi tiết per-section; 0 giá trị mới, chỉ đổi selector) */
/* marquee: track nằm trong nội dung text-editor nên rule nguồn khớp nguyên vẹn;
 *  map §11 mục 5 bắt buộc pause-on-hover + prefers-reduced-motion */
.marquee:hover .track { animation-play-state: paused; }   /* (0,3,0) — thắng rule port (0,2,0) */
/* prefers-reduced-motion nằm ở CUỐI file (mục "a11y overrides"): rule port `.marquee .track`
 * cùng hạng (0,2,0) nhưng đứng SAU, nên đặt ở đây thì @media không bao giờ ăn. */
.marquee .marquee-inner, .marquee .marquee-inner > .elementor-widget-container { width: 100%; }

/* tile bento: container là <a>; .bg và .meta là con tuyệt đối/tuyệt đối như nguồn */
.tile .meta .meta-text, .tile .meta .go { width: auto; }
/* .meta của nguồn neo bằng left+right; container Elementor có width:100% nên hộp tràn
 *  sang phải đúng bằng inset trái → trả width về auto để left/right quyết định. */
.tile .meta { width: auto; }
.tile .go { position: static; }
.tile .meta .go .elementor-widget-container {
  width: 36px; height: 36px; border-radius: 99px; background: rgba(251,246,238,.95); color: var(--ink);
  display: flex; align-items: center; justify-content: center; transition: transform .35s var(--ease);
}
.tile:hover .meta .go .elementor-widget-container { transform: rotate(-45deg); }

/* hero: thẻ review nổi + orbit là container rỗng → giữ kích thước từ rule nguồn */
.hero-card .top .who-text { width: auto; }
.hero-card .av, .orbit, .testi .av { flex: 0 0 auto; }
.hero-stats .stat { width: auto; }

/* zig: bong bóng giá + tag là text-editor → rule nguồn nhắm .price-bubble/.tag khớp wrapper */
.zig-img .price-bubble .elementor-widget-container { display: flex; flex-direction: column; align-items: center; }

/* editorial: 3 ô meta là text-editor, mỗi ô 1 dòng <b>nhãn</b>nội dung */
.editorial-meta .editorial-meta__item { width: auto; }

/* newsletter: form Pro dựng lại "viên thuốc" .field-row của nguồn quanh input + nút */
.newsletter .newsletter-form { display: grid; gap: 14px; }
.newsletter .elementor-form { display: block; }
.newsletter .elementor-form-fields-wrapper {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(241,231,214,.18);
  border-radius: 14px; padding: 6px;
}
.newsletter .elementor-field-group { flex: 1 1 auto; margin: 0; padding: 0; }
.newsletter .elementor-field-group.elementor-field-type-submit { flex: 0 0 auto; }
.newsletter .elementor-field-group > label {
  flex-basis: 100%; font-size: .78rem; color: #A8997F; letter-spacing: .06em; text-transform: uppercase; margin: 0 0 2px;
}
/* Nền/chữ/viền của field trong "viên thuốc" thuộc CONTROL của chính widget form
 * (`field_background_color` · `field_border_width` · `__globals__.field_text_color`) — đặt trong
 * spec, KHÔNG đấu CSS ở đây: mặc định `field_background_color=#ffffff` của Pro sinh
 * `.elementor-48 .elementor-element-<id> .elementor-field-group .elementor-field:not(...)` (0,5,0),
 * không rule bridge hợp lý nào thắng nổi. Cùng lớp D-63.
 * Bridge chỉ giữ 2 thứ control KHÔNG có: padding theo nguồn và màu placeholder. */
.newsletter .elementor-widget-form .elementor-form-fields-wrapper input.elementor-field-textual {
  box-shadow: none; padding: .85rem .75rem; font-size: .95rem; width: 100%; border-radius: 0;
}
.newsletter .elementor-widget-form .elementor-form-fields-wrapper input.elementor-field-textual::placeholder { color: #A8997F; }
.newsletter .elementor-widget-form .elementor-button {
  padding: .85rem 1.2rem; border-radius: 10px; background-color: var(--accent); color: #fff;
}
.newsletter .elementor-message { color: var(--on-dark); }

/* 4.27 ≤760px ẩn menu phụ của thanh announcement (rule nguồn `.ann .links{display:none}`).
 *      widget-nav-menu.min.css nạp SAU bridge nên nâng specificity bằng class widget. */
@media (max-width: 760px) {
  .ann .links.elementor-widget-nav-menu { display: none; }
}

/* 4.28 SVG inline trong text-editor: bỏ hex token khỏi settings (luật §4 "0 hex cứng khi đã
 *      có token") → svg dùng currentColor, màu quyết ở đây. */
.newsletter .check svg { color: var(--glow); }

/* ── 5. Component CSS port nguyên văn (HTML/assets/css/style.css) ───── */
/* ---------- Tokens ---------- */
a{color:inherit;text-decoration:none}
.serif{font-family:'Fraunces',Georgia,serif;font-feature-settings:"ss01" on, "ss02" on;}
.mono{font-family: ui-monospace, "SFMono-Regular", Menlo, monospace}
.shell{max-width:var(--maxw);margin:0 auto;padding:0 28px}
@media (max-width:760px){.shell{padding:0 18px}}
/* ---------- Buttons ---------- */
/* ---------- Announcement ---------- */
.ann{
  background:var(--ink);color:var(--on-dark);
  font-size:.82rem;letter-spacing:.02em;
}
.ann .row{display:flex;align-items:center;justify-content:space-between;padding-block:.55rem;gap:1.5rem}
.ann .pill{
  display:inline-flex;align-items:center;gap:.45rem;
  padding:.18rem .55rem;border-radius:999px;
  background:rgba(241,231,214,.08);border:1px solid rgba(241,231,214,.15);
  color:var(--on-dark)
}
.ann .dot{width:6px;height:6px;border-radius:99px;background:var(--glow);box-shadow:0 0 0 0 rgba(232,184,156,.7);animation:pulse 2.2s infinite}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(232,184,156,.6)}
  70%{box-shadow:0 0 0 8px rgba(232,184,156,0)}
  100%{box-shadow:0 0 0 0 rgba(232,184,156,0)}
}
.ann .links{display:flex;gap:1.5rem;color:var(--line-2)}
.ann .links a:hover{color:var(--on-dark)}
@media (max-width:760px){.ann .links{display:none}}
/* ---------- Nav ---------- */
.nav-wrap{position:sticky;top:0;z-index:40;backdrop-filter:saturate(140%) blur(10px);background:rgba(251,246,238,.78);border-bottom:1px solid rgba(228,217,197,.6)}
.nav{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:2rem;padding-block:.95rem}
.brand{display:inline-flex;align-items:center;gap:.6rem;font-family:'Fraunces',serif;font-weight:600;font-size:1.4rem;letter-spacing:-.015em}
.brand .mark{width:34px;height:34px}
.nav-links{display:flex;gap:1.8rem;justify-content:center;font-size:.93rem;color:var(--ink-2)}
.nav-links a{padding:.35rem 0;position:relative}
.nav-links a::after{content:"";position:absolute;left:0;bottom:-2px;height:1px;width:0;background:var(--ink);transition:width .3s var(--ease)}
.nav-links a:hover::after{width:100%}
.nav-actions{display:flex;gap:.6rem;align-items:center}
.icon-btn{
  width:38px;height:38px;border-radius:999px;border:1px solid var(--line);
  display:inline-flex;align-items:center;justify-content:center;color:var(--ink-2);
  transition:background .25s var(--ease), color .2s var(--ease);
}
.icon-btn:hover{background:var(--oat);color:var(--ink)}
.cart-badge{position:relative}
/* Badge GIẢ của nguồn (content:"3") ĐÃ GỠ ở B4: map §11 mục 7 chốt số giỏ lấy từ
 * `woo:menu-cart` THẬT. Giữ lại thì hai badge chồng nhau, hai con số mâu thuẫn
 * (reviewer mắt tươi bắt được — REVIEW.out mục B1). Màu badge thật đặt ở CONTROL
 * của widget (items_indicator_*) trong specs/tb-header.spec.json, không đấu CSS. */
@media (max-width:900px){.nav-links{display:none}}
/* ---------- Hero ---------- */
.hero{padding:64px 0 96px;position:relative;overflow:hidden}
.hero-grid{display:grid;grid-template-columns: 5fr 7fr;gap:64px;align-items:end}
@media (max-width:960px){.hero-grid{grid-template-columns:1fr;gap:44px}.hero{padding:36px 0 56px}}
.kicker{
  display:inline-flex;align-items:center;gap:.55rem;
  padding:.32rem .7rem;border-radius:999px;
  background:var(--oat);border:1px solid var(--line);
  font-size:.78rem;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3);
}
.kicker .swatch{width:8px;height:8px;border-radius:99px;background:var(--accent)}
.hero h1{
  font-family:'Fraunces',serif;
  font-weight:500;
  font-size: clamp(2.6rem, 5.6vw, 4.6rem);
  line-height:.98;
  letter-spacing:-.025em;
  margin: 1.2rem 0 1.4rem;
  color:var(--ink);
}
.hero h1 em{font-style:italic;color:var(--accent);font-weight:500}
.hero h1 .underline{position:relative;display:inline-block}
.hero h1 .underline::after{
  content:"";position:absolute;left:0;right:0;bottom:.04em;height:.32em;
  background: rgba(192,78,54,.18);z-index:-1;border-radius:99px;
}
.hero .lede{font-size:1.05rem;color:var(--ink-3);max-width:46ch;margin-bottom:2rem;line-height:1.65}
.hero-cta{display:flex;gap:.7rem;flex-wrap:wrap;margin-bottom:2.4rem}
/* Hero stats: tiny breathing data row, no card boxing */
.hero-stats{display:flex;gap:2rem;border-top:1px solid var(--line);padding-top:1.4rem;flex-wrap:wrap}
.hero-stats .stat .n{font-family:'Fraunces',serif;font-size:1.6rem;font-weight:500;color:var(--ink);letter-spacing:-.02em}
.hero-stats .stat .l{font-size:.78rem;color:var(--ink-4);text-transform:uppercase;letter-spacing:.06em;margin-top:.15rem}
/* Hero asset (right) */
.hero-asset{position:relative;aspect-ratio: 5/4.4;}
.hero-frame{
  position:absolute;inset:0;border-radius:var(--radius-lg);
  background:var(--oat);
  overflow:hidden;
  box-shadow: var(--shadow);
}
.hero-frame .photo{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center;
  filter:saturate(.92) contrast(1.02);
}
.hero-frame::after{
  content:"";position:absolute;inset:0;
  background: linear-gradient(160deg, rgba(251,246,238,0) 30%, rgba(26,21,18,.12) 100%);
}
.hero-overlay-tag{
  position:absolute;top:1.1rem;left:1.1rem;
  background:rgba(251,246,238,.94);backdrop-filter:blur(6px);
  border:1px solid var(--line);border-radius:999px;
  padding:.4rem .75rem;font-size:.78rem;color:var(--ink-2);
  display:inline-flex;align-items:center;gap:.4rem;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6);
}
/* Floating card on hero */
.hero-card{
  position:absolute;
  right:-22px; bottom:-30px;
  width:280px;
  background:#fff;
  border-radius:20px;
  padding:1rem 1.1rem 1rem;
  box-shadow: var(--shadow-card);
  border:1px solid var(--line);
  transform: rotate(-2.2deg);
  transition: transform .5s var(--ease);
}
.hero-card:hover{transform: rotate(0) translateY(-4px)}
.hero-card .top{display:flex;align-items:center;gap:.7rem}
.hero-card .av{width:38px;height:38px;border-radius:99px;background:linear-gradient(135deg,var(--glow),var(--accent));position:relative;overflow:hidden}
.hero-card .av::after{content:"";position:absolute;inset:6px;border-radius:99px;background:rgba(255,255,255,.15);box-shadow:inset 0 0 0 1px rgba(255,255,255,.35)}
.hero-card .name{font-weight:500;font-size:.92rem;color:var(--ink)}
.hero-card .sub{font-size:.76rem;color:var(--ink-4)}
.hero-card .q{font-family:'Fraunces',serif;font-size:1rem;line-height:1.4;margin-top:.7rem;color:var(--ink-2)}
.hero-card .stars{display:flex;gap:2px;margin-top:.55rem;color:var(--accent)}
/* Decorative orbit dots */
.orbit{position:absolute;width:14px;height:14px;border-radius:99px;background:var(--accent);opacity:.85}
.orbit.o1{top:14%;left:-14px;background:var(--glow)}
.orbit.o2{bottom:30%;right:-8px;background:var(--accent)}
.orbit.o3{top:-10px;left:40%;width:8px;height:8px;background:var(--ink)}
@media (max-width:760px){.hero-card{width:240px;right:8px;bottom:-22px}}
/* ---------- Marquee trust ---------- */
.marquee{
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:var(--bg);
  overflow:hidden;
  padding:1.1rem 0;
}
.marquee .track{
  display:flex;gap:3.5rem;
  animation: scroll 38s linear infinite;
  white-space:nowrap;
  width:max-content;
  color:var(--ink-3);
  font-family:'Fraunces',serif;font-size:1.55rem;letter-spacing:-.01em;
  align-items:center;
}
.marquee .track span{display:inline-flex;align-items:center;gap:1.2rem}
.marquee .track .sep{display:inline-block;width:6px;height:6px;border-radius:99px;background:var(--accent);opacity:.8}
@keyframes scroll{from{transform:translateX(0)} to{transform:translateX(-50%)}}
/* ---------- Section header ---------- */
.section{padding:96px 0}
@media (max-width:760px){.section{padding:56px 0}}
.section-head{display:grid;grid-template-columns: 5fr 7fr;gap:48px;align-items:end;margin-bottom:48px}
.section-head h2{font-family:'Fraunces',serif;font-weight:500;font-size:clamp(2rem,3.6vw,3rem);line-height:1.02;letter-spacing:-.02em;margin:.6rem 0 0}
.section-head .pre{font-size:.78rem;text-transform:uppercase;letter-spacing:.12em;color:var(--ink-4)}
.section-head .desc{color:var(--ink-3);max-width:48ch}
@media (max-width:900px){.section-head{grid-template-columns:1fr;gap:18px}}
/* ---------- Breeds bento (asymmetric grid 2fr 1fr 1fr) ---------- */
.breeds{
  display:grid;
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap:14px;
  height: 560px;
}
.tile{
  position:relative;border-radius:var(--radius-lg);overflow:hidden;
  background:var(--oat);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
  cursor:pointer;
}
.tile:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.tile .bg{position:absolute;inset:0;background-size:cover;background-position:center;filter:saturate(.95) contrast(1.02);transition:transform 1.2s var(--ease)}
.tile:hover .bg{transform:scale(1.05)}
.tile::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg, rgba(26,21,18,0) 40%, rgba(26,21,18,.62) 100%)}
.tile .meta{position:absolute;left:1.2rem;right:1.2rem;bottom:1.1rem;color:var(--bg);z-index:2;display:flex;align-items:flex-end;justify-content:space-between;gap:1rem}
.tile .meta .name{font-family:'Fraunces',serif;font-size:1.7rem;font-weight:500;letter-spacing:-.01em;line-height:1}
.tile .meta .count{font-size:.78rem;opacity:.85;margin-top:.25rem}
.tile .meta .go{width:36px;height:36px;border-radius:99px;background:rgba(251,246,238,.95);color:var(--ink);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:transform .35s var(--ease)}
.tile:hover .meta .go{transform:rotate(-45deg)}
.tile.big{grid-row: span 2}
@media (max-width:900px){
  .breeds{grid-template-columns:1fr 1fr;grid-template-rows:auto;height:auto}
  .tile{aspect-ratio:1/1}
  .tile.big{grid-row: span 1;grid-column: span 2;aspect-ratio: 16/10}
}
@media (max-width:560px){.breeds{grid-template-columns:1fr}.tile.big{grid-column:span 1}}
/* ---------- Zig-zag products (NOT 3-card row) ---------- */
.zig{display:grid;grid-template-columns:1fr 1fr;gap:60px 80px;align-items:center}
.zig .item{display:contents}
.zig-img{
  position:relative;aspect-ratio: 5/4;border-radius:var(--radius-lg);overflow:hidden;
  background:var(--oat);
  box-shadow: var(--shadow);
  transform-style:preserve-3d;
  transition: transform .8s var(--ease);
}
.zig-img:hover{transform: perspective(1200px) rotateX(2deg) rotateY(-2deg) translateY(-4px)}
.zig-img .bg{position:absolute;inset:0;background-size:cover;background-position:center}
.zig-img .tag{
  position:absolute;top:1rem;left:1rem;
  background:rgba(251,246,238,.95);color:var(--ink-2);
  font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;
  padding:.32rem .65rem;border-radius:999px;border:1px solid var(--line);
}
.zig-img .price-bubble{
  position:absolute;bottom:1rem;right:1rem;
  width:84px;height:84px;border-radius:99px;
  background:var(--ink);color:var(--bg);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  font-family:'Fraunces',serif;
  box-shadow:0 12px 30px -10px rgba(26,21,18,.4);
}
.zig-img .price-bubble .from{font-size:.66rem;text-transform:uppercase;letter-spacing:.1em;color:var(--line-2)}
.zig-img .price-bubble .p{font-size:1.45rem;line-height:1;margin-top:.18rem}
.zig-copy h3{font-family:'Fraunces',serif;font-weight:500;font-size:clamp(1.6rem,2.2vw,2.1rem);letter-spacing:-.02em;margin:0 0 .9rem;line-height:1.05}
.zig-copy .num{font-family:'Fraunces',serif;font-style:italic;color:var(--accent);font-size:.92rem;letter-spacing:.02em;margin-bottom:.6rem;display:inline-block}
.zig-copy p{color:var(--ink-3);max-width:48ch;margin:0 0 1.2rem}
.zig-copy ul{list-style:none;padding:0;margin:0 0 1.4rem;display:grid;gap:.55rem}
.zig-copy li{display:flex;gap:.6rem;color:var(--ink-2);font-size:.94rem}
.zig-copy li svg{flex-shrink:0;color:var(--accent);margin-top:3px}
.zig.reverse .zig-img{order:2}
@media (max-width:860px){
  .zig{grid-template-columns:1fr;gap:24px}
  .zig.reverse .zig-img{order:0}
}
/* ---------- Editorial full-bleed ---------- */
.editorial{
  position:relative;border-radius:var(--radius-lg);overflow:hidden;
  background:var(--dark-surface);color:var(--on-dark);
  display:grid;grid-template-columns:5fr 6fr;
  min-height:520px;
}
.editorial .img-wrap{position:relative;overflow:hidden}
.editorial .img{
  width:100%;height:100%;object-fit:cover;object-position:center;
  display:block;
}
.editorial .img-wrap::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg, rgba(31,24,21,0) 60%, rgba(31,24,21,.9) 100%);pointer-events:none}
.editorial .copy{padding:64px 56px;display:flex;flex-direction:column;justify-content:space-between;gap:2rem}
.editorial .copy h2{font-family:'Fraunces',serif;font-weight:400;font-size:clamp(2rem,3.2vw,2.8rem);line-height:1.04;letter-spacing:-.015em;margin:0;color:var(--bg)}
.editorial .copy h2 em{font-style:italic;color:var(--glow)}
.editorial .copy p{color:var(--line-2);max-width:46ch}
.editorial-meta{display:flex;gap:2.2rem;flex-wrap:wrap;font-size:.82rem;color:#A8997F;border-top:1px solid rgba(228,217,197,.15);padding-top:1.4rem}
.editorial-meta b{color:var(--on-dark);font-weight:500;margin-right:.3rem}
@media (max-width:900px){
  .editorial{grid-template-columns:1fr;min-height:auto}
  .editorial .img{height:300px}
  .editorial .copy{padding:36px 28px}
}
/* ---------- Testimonials ---------- */
.testi-row{display:grid;grid-template-columns: 4fr 4fr 4fr;gap:18px;align-items:start}
.testi{
  background:#fff;border:1px solid var(--line);border-radius:22px;padding:1.6rem 1.5rem;
  box-shadow: var(--shadow-card);
  position:relative;
  transition: transform .4s var(--ease);
}
.testi:hover{transform:translateY(-4px)}
.testi .stars{color:var(--accent);display:flex;gap:2px;margin-bottom:.8rem}
.testi blockquote{font-family:'Fraunces',serif;font-size:1.12rem;line-height:1.5;color:var(--ink);margin:0 0 1.2rem;letter-spacing:-.005em}
.testi .who{display:flex;align-items:center;gap:.7rem;border-top:1px solid var(--line);padding-top:1rem}
.testi .av{width:38px;height:38px;border-radius:99px;flex-shrink:0;background:linear-gradient(135deg,var(--glow),var(--accent))}
.testi .av.b{background:linear-gradient(135deg,#A89878,var(--ink-2))}
.testi .av.c{background:linear-gradient(135deg,var(--accent-soft),var(--accent-ink))}
.testi .name{font-size:.92rem;font-weight:500}
.testi .meta-s{font-size:.78rem;color:var(--ink-4)}
@media (max-width:860px){.testi-row{grid-template-columns:1fr;gap:14px}}
/* nudge middle card for asymmetric vibe */
.testi-row .testi:nth-child(2){transform:translateY(28px)}
.testi-row .testi:nth-child(2):hover{transform:translateY(24px)}
@media (max-width:860px){.testi-row .testi:nth-child(2){transform:none}}
/* ---------- Newsletter ---------- */
.newsletter{
  background:var(--ink);color:var(--bg);
  border-radius:var(--radius-lg);
  padding:64px 56px;
  display:grid;grid-template-columns: 5fr 6fr;gap:48px;align-items:center;
  position:relative;overflow:hidden;
}
.newsletter::before{
  content:"";position:absolute;
  right:-160px;top:-160px;width:420px;height:420px;border-radius:99px;
  background: radial-gradient(circle at 30% 30%, rgba(232,184,156,.35), rgba(192,78,54,.0) 60%);
  pointer-events:none;
}
.newsletter h2{font-family:'Fraunces',serif;font-weight:400;font-size:clamp(1.9rem,3vw,2.6rem);line-height:1.05;letter-spacing:-.02em;margin:0 0 .8rem;color:var(--bg)}
.newsletter h2 em{font-style:italic;color:var(--glow)}
.newsletter p{color:var(--line-2);max-width:42ch;margin:0}
.newsletter form{display:grid;gap:14px}
.field{display:grid;gap:6px}
.field label{font-size:.78rem;color:#A8997F;letter-spacing:.06em;text-transform:uppercase}
.field-row{display:flex;gap:10px;background:rgba(255,255,255,.06);border:1px solid rgba(241,231,214,.18);border-radius:14px;padding:6px;backdrop-filter:blur(6px)}
.field-row input{
  flex:1;background:transparent;border:0;outline:0;color:var(--bg);padding:.85rem .75rem;font:inherit;font-size:.95rem;
}
.field-row input::placeholder{color:#A8997F}
.field-row .btn-accent{padding:.85rem 1.2rem;border-radius:10px}
.newsletter .check{display:flex;align-items:center;gap:.6rem;font-size:.82rem;color:#A8997F}
.newsletter .check b{color:var(--on-dark);font-weight:500}
.fine{font-size:.74rem;color:var(--ink-4);margin-top:6px}
@media (max-width:900px){
  .newsletter{grid-template-columns:1fr;padding:40px 28px;gap:28px}
}
/* ---------- Footer ---------- */
/* Nguồn viết `footer{…}` vì bộ HTML tĩnh chỉ có ĐÚNG MỘT thẻ <footer> — footer của site.
 * Trên WordPress thì không: markup bình luận của WP dùng `<footer class="comment-meta">`
 * cho MỖI bình luận, nên rule trần này bơm 72px padding + 80px margin + 1 đường kẻ vào
 * giữa avatar và tên người bình luận (đo được 153px trống + kẻ lơ lửng, REVIEW lượt 4 mục 2).
 * Neo vào phần tử THẬT của footer site: TB footer render `<footer class="elementor-location-footer">`. */
footer.elementor-location-footer{padding:72px 0 36px;border-top:1px solid var(--line);margin-top:80px}
.foot{display:grid;grid-template-columns: 2.2fr 1fr 1fr 1fr;gap:48px;align-items:start}
.foot .col h4{font-size:.78rem;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-4);margin:0 0 1rem;font-weight:500}
.foot .col a{display:block;color:var(--ink-2);font-size:.94rem;padding:.28rem 0;transition:color .2s}
.foot .col a:hover{color:var(--accent)}
.foot .about p{color:var(--ink-3);max-width:34ch;margin:.6rem 0 1.4rem;font-size:.95rem}
.foot .socials{display:flex;gap:.5rem}
.foot .socials a{
  width:38px;height:38px;border-radius:99px;border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;color:var(--ink-2);padding:0;
}
.foot .socials a:hover{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.foot-bottom{margin-top:64px;padding-top:24px;border-top:1px solid var(--line);display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;color:var(--ink-4);font-size:.82rem}
@media (max-width:860px){.foot{grid-template-columns:1fr 1fr;gap:32px}}
@media (max-width:560px){.foot{grid-template-columns:1fr}}
.brand--footer{font-size:1.25rem}
.foot-legal{display:flex;gap:1.4rem}
/* ---------- Entrance reveal ----------
   Was: .reveal{opacity:0;animation:rise ...} + .d1..d5 delays.
   Normalised to the annotation [data-reveal-delay="1..5"] (no hidden start state,
   so the static source renders complete). On WordPress this maps to the Elementor
   entrance animation (Motion Effects) with the matching delay — no CSS/JS here. */
/* Content images that replaced .bg background layers (same absolute box) */
img.bg{width:100%;height:100%;object-fit:cover;object-position:center}
/* ---------- Grain overlay (fixed, pointer-none) ---------- */
/* ---------- Focus ---------- */
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
/* ---------- Services grid (home + services archive) ---------- */
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.svc-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:1.6rem 1.5rem 1.3rem;display:flex;flex-direction:column;gap:.55rem;
  box-shadow:var(--shadow-card);transition:transform .4s var(--ease),box-shadow .4s var(--ease);
}
.svc-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.svc-card__icon{
  width:46px;height:46px;border-radius:14px;display:inline-flex;align-items:center;justify-content:center;
  background:var(--accent-soft);color:var(--accent-ink);margin-bottom:.4rem;
}
.svc-card h3{font-family:'Fraunces',serif;font-weight:500;font-size:1.3rem;letter-spacing:-.01em;margin:0;color:var(--ink)}
.svc-card p{color:var(--ink-3);font-size:.94rem;margin:0;flex:1}
.svc-card__meta{display:flex;align-items:baseline;gap:.8rem;border-top:1px solid var(--line);padding-top:.85rem;margin-top:.4rem}
.svc-price{font-family:'Fraunces',serif;font-size:1.15rem;color:var(--ink);font-weight:500}
.svc-dur{font-size:.8rem;color:var(--ink-4);text-transform:uppercase;letter-spacing:.05em}
.svc-card__link{display:inline-flex;align-items:center;gap:.4rem;font-size:.9rem;font-weight:500;color:var(--accent-ink);margin-top:.3rem}
.svc-card__link:hover .arrow{transform:translateX(4px)}
.svc-card__link .arrow{transition:transform .35s var(--ease)}
@media (max-width:900px){.svc-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.svc-grid{grid-template-columns:1fr}}
/* ---------- Product grid + card (WooCommerce) ---------- */
.shop-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.product-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  display:flex;flex-direction:column;box-shadow:var(--shadow-card);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease);
}
.product-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.product-card__media{position:relative;display:block;aspect-ratio:1/1;background:var(--oat);overflow:hidden}
.product-card__media .bg{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform 1s var(--ease)}
.product-card:hover .product-card__media .bg{transform:scale(1.05)}
.product-card__badge{
  position:absolute;top:.7rem;left:.7rem;z-index:2;
  background:var(--accent);color:#fff;font-size:.68rem;font-weight:600;
  letter-spacing:.04em;text-transform:uppercase;padding:.25rem .55rem;border-radius:999px;
}
.product-card__body{padding:1rem 1.05rem 1.1rem;display:flex;flex-direction:column;gap:.4rem;flex:1}
.product-card__cat{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-4)}
.product-card__title{font-family:'Fraunces',serif;font-weight:500;font-size:1.08rem;line-height:1.2;letter-spacing:-.01em;margin:0;color:var(--ink)}
.product-card__title a:hover{color:var(--accent-ink)}
.product-card__rating{color:var(--accent);font-size:.85rem;letter-spacing:.05em}
.product-card__rating span{color:var(--ink-4);font-size:.78rem;letter-spacing:0}
.product-card__foot{display:flex;align-items:center;justify-content:space-between;gap:.6rem;margin-top:auto;padding-top:.5rem}
.product-card__price{font-family:'Fraunces',serif;font-size:1.15rem;color:var(--ink)}
.product-card__price del{color:var(--ink-4);font-size:.92rem;margin-right:.25rem;font-weight:400}
.product-card__price ins{text-decoration:none;color:var(--accent-ink)}
.product-card__add{
  font-size:.82rem;font-weight:500;padding:.5rem .85rem;border-radius:999px;
  background:var(--ink);color:var(--bg);transition:background .25s var(--ease)
}
.product-card__add:hover{background:var(--accent-ink)}
.desc-link{color:var(--accent-ink);font-weight:500;border-bottom:1px solid var(--line-2)}
.desc-link:hover{border-color:var(--accent)}
@media (max-width:1000px){.shop-grid{grid-template-columns:1fr 1fr 1fr}}
@media (max-width:760px){.shop-grid{grid-template-columns:1fr 1fr}}
@media (max-width:420px){.shop-grid{grid-template-columns:1fr}}
/* ====================================================================
   SHARED SUB-PAGE PRIMITIVES (reused by services/about/contact/shop/
   product/blog). Subpages should reuse these instead of redefining.
   ==================================================================== */
/* Page hero (inner page header) */
.page-hero{padding:54px 0 40px;border-bottom:1px solid var(--line);background:var(--bg-soft)}
.page-hero .shell{display:grid;grid-template-columns:7fr 5fr;gap:48px;align-items:end}
.page-hero .pre{font-size:.78rem;text-transform:uppercase;letter-spacing:.12em;color:var(--ink-4);margin-bottom:.5rem}
.page-hero h1{font-family:'Fraunces',serif;font-weight:500;font-size:clamp(2.2rem,4.4vw,3.4rem);line-height:1.02;letter-spacing:-.025em;margin:0;color:var(--ink)}
.page-hero h1 em{font-style:italic;color:var(--accent)}
.page-hero .lede{color:var(--ink-3);max-width:48ch;font-size:1.02rem;line-height:1.6}
@media (max-width:860px){.page-hero .shell{grid-template-columns:1fr;gap:16px}}
/* Breadcrumb */
.breadcrumb{font-size:.84rem;color:var(--ink-4);margin-bottom:1rem}
.breadcrumb ol{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem;padding:0;margin:0}
.breadcrumb li{display:flex;gap:.5rem;align-items:center}
.breadcrumb li+li::before{content:"/";color:var(--line-2)}
.breadcrumb a:hover{color:var(--accent)}
.breadcrumb [aria-current]{color:var(--ink-2)}
/* Two-column with sidebar */
.with-sidebar{display:grid;grid-template-columns:1fr 300px;gap:48px;align-items:start}
.with-sidebar.left{grid-template-columns:280px 1fr}
.sidebar-box{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.3rem 1.4rem;margin-bottom:18px}
.sidebar-box h4{font-family:'Fraunces',serif;font-weight:500;font-size:1.05rem;margin:0 0 .9rem;color:var(--ink)}
.sidebar-box ul{list-style:none;padding:0;margin:0;display:grid;gap:.5rem}
.sidebar-box li a{display:flex;justify-content:space-between;color:var(--ink-2);font-size:.92rem;padding:.2rem 0}
.sidebar-box li a:hover{color:var(--accent)}
.sidebar-box li .c{color:var(--ink-4);font-size:.82rem}
@media (max-width:900px){.with-sidebar,.with-sidebar.left{grid-template-columns:1fr;gap:32px}}
/* Filter chips */
.chips{display:flex;flex-wrap:wrap;gap:.5rem}
.chip{display:inline-flex;align-items:center;gap:.4rem;padding:.4rem .85rem;border-radius:999px;border:1px solid var(--line-2);font-size:.86rem;color:var(--ink-2);background:#fff;transition:all .2s var(--ease)}
.chip:hover{border-color:var(--ink-3)}
.chip.is-active{background:var(--ink);color:var(--bg);border-color:var(--ink)}
/* Light form */
.form-field{display:grid;gap:.4rem;margin-bottom:1rem}
.form-field label{font-size:.82rem;color:var(--ink-2);font-weight:500}
.form-field input,.form-field textarea,.form-field select{
  width:100%;background:#fff;border:1px solid var(--line-2);border-radius:12px;
  padding:.8rem .9rem;font:inherit;font-size:.95rem;color:var(--ink);outline:0;transition:border-color .2s var(--ease)
}
.form-field input:focus,.form-field textarea:focus,.form-field select:focus{border-color:var(--accent)}
.form-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
@media (max-width:600px){.form-grid-2{grid-template-columns:1fr}}
/* Accordion (FAQ) */
.accordion{border-top:1px solid var(--line)}
.accordion__item{border-bottom:1px solid var(--line)}
.accordion__q{width:100%;text-align:left;display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1.1rem 0;font-family:'Fraunces',serif;font-size:1.1rem;color:var(--ink);font-weight:500}
.accordion__q .pm{flex-shrink:0;color:var(--accent);transition:transform .3s var(--ease)}
.accordion__item.is-open .accordion__q .pm{transform:rotate(45deg)}
.accordion__a{color:var(--ink-3);max-width:64ch;padding:0 0 1.2rem;font-size:.95rem;line-height:1.6}
/* Tabs */
.tabs__nav{display:flex;gap:.4rem;border-bottom:1px solid var(--line);margin-bottom:1.6rem;flex-wrap:wrap}
.tabs__btn{padding:.7rem 1.1rem;font-weight:500;font-size:.92rem;color:var(--ink-4);border-bottom:2px solid transparent;margin-bottom:-1px}
.tabs__btn.is-active{color:var(--ink);border-color:var(--accent)}
.tabs__panel{display:none}
.tabs__panel.is-active{display:block}
/* Pagination */
.pagination{display:flex;gap:.4rem;justify-content:center;margin-top:48px}
.pagination a,.pagination span{
  min-width:42px;height:42px;display:inline-flex;align-items:center;justify-content:center;
  border-radius:12px;border:1px solid var(--line);color:var(--ink-2);font-size:.92rem
}
.pagination .current{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.pagination a:hover{border-color:var(--ink-3)}
/* Prose */
.prose{color:var(--ink-2);font-size:1.02rem;line-height:1.75;max-width:68ch}
.prose h2,.prose h3{font-family:'Fraunces',serif;font-weight:500;color:var(--ink);letter-spacing:-.01em;margin:2rem 0 .8rem}
.prose p{margin:0 0 1.1rem}
.prose ul{padding-left:1.2rem;margin:0 0 1.1rem}
.prose img{border-radius:var(--radius);margin:1.2rem 0}
/* ====================================================================
   SUBPAGE CSS (merged from parallel handoff generation)
   ==================================================================== */
/* ===== subpage CSS: services.html ===== */
/* section: services.how-it-works ----------------------------------------- */
.srv-steps{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
  margin-top:48px;
}
.srv-step{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:1.7rem 1.5rem 1.4rem;
  box-shadow:var(--shadow-card);
  display:flex;
  flex-direction:column;
  gap:.7rem;
  position:relative;
}
.srv-step__num{
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:99px;
  background:var(--oat);border:1px solid var(--line);
  font-family:'Fraunces',serif;font-size:1rem;color:var(--accent);font-weight:500;
  flex-shrink:0;
}
.srv-step h3{
  font-family:'Fraunces',serif;font-weight:500;font-size:1.15rem;
  letter-spacing:-.01em;margin:0;color:var(--ink);line-height:1.2;
}
.srv-step p{color:var(--ink-3);font-size:.93rem;margin:0;line-height:1.55}
.srv-step__connector{
  display:none;
}
@media (min-width:761px){
  .srv-steps{position:relative}
  .srv-steps::before{
    content:"";position:absolute;
    top:calc(1.7rem + 17px);left:calc(33.33% - 18px);
    width:calc(33.33% + 36px);height:1px;
    border-top:1px dashed var(--line-2);
    pointer-events:none;
  }
}
@media (max-width:760px){.srv-steps{grid-template-columns:1fr;gap:12px}}
/* section: services.studio-band ------------------------------------------ */
.srv-studio{
  display:grid;
  grid-template-columns:5fr 6fr;
  gap:64px;
  align-items:center;
}
.srv-studio__img{
  position:relative;
  border-radius:var(--radius-lg);
  overflow:hidden;
  aspect-ratio:4/3;
  background:var(--oat);
  box-shadow:var(--shadow);
}
.srv-studio__img .bg{
  position:absolute;inset:0;
  background-size:cover;background-position:center;
  transition:transform 1.2s var(--ease);
}
.srv-studio__img:hover .bg{transform:scale(1.04)}
.srv-studio__tag{
  position:absolute;bottom:1.1rem;left:1.1rem;
  background:rgba(251,246,238,.93);backdrop-filter:blur(6px);
  border:1px solid var(--line);border-radius:999px;
  padding:.38rem .75rem;font-size:.76rem;color:var(--ink-2);
  display:inline-flex;align-items:center;gap:.4rem;
}
.srv-studio__copy{display:flex;flex-direction:column;gap:1.2rem}
.srv-studio__copy h2{
  font-family:'Fraunces',serif;font-weight:500;
  font-size:clamp(1.85rem,2.8vw,2.5rem);
  line-height:1.05;letter-spacing:-.02em;margin:0;color:var(--ink);
}
.srv-studio__copy h2 em{font-style:italic;color:var(--accent)}
.srv-studio__copy p{color:var(--ink-3);font-size:.98rem;max-width:48ch;margin:0;line-height:1.65}
.srv-studio__facts{
  display:flex;gap:2rem;border-top:1px solid var(--line);
  padding-top:1.2rem;flex-wrap:wrap;
}
.srv-studio__facts .fact .n{
  font-family:'Fraunces',serif;font-size:1.5rem;font-weight:500;
  color:var(--ink);letter-spacing:-.02em;
}
.srv-studio__facts .fact .l{
  font-size:.76rem;color:var(--ink-4);
  text-transform:uppercase;letter-spacing:.06em;margin-top:.1rem;
}
@media (max-width:860px){
  .srv-studio{grid-template-columns:1fr;gap:32px}
}
/* section: services.cta -------------------------------------------------- */
.srv-cta{
  background:var(--ink);color:var(--bg);
  border-radius:var(--radius-lg);
  padding:64px 56px;
  display:grid;grid-template-columns:6fr 5fr;
  gap:48px;align-items:center;
  position:relative;overflow:hidden;
}
.srv-cta::before{
  content:"";position:absolute;
  left:-140px;bottom:-140px;width:380px;height:380px;border-radius:99px;
  background:radial-gradient(circle at 70% 70%, rgba(192,78,54,.28), rgba(192,78,54,0) 60%);
  pointer-events:none;
}
.srv-cta__head{
  font-family:'Fraunces',serif;font-weight:400;
  font-size:clamp(1.85rem,2.8vw,2.5rem);
  line-height:1.04;letter-spacing:-.02em;margin:0 0 .7rem;color:var(--bg);
}
.srv-cta__head em{font-style:italic;color:var(--glow)}
.srv-cta__desc{color:var(--line-2);font-size:.97rem;max-width:44ch;margin:0;line-height:1.6}
.srv-cta__action{display:flex;flex-direction:column;gap:1.1rem;align-items:flex-start}
.srv-cta__note{font-size:.82rem;color:#A8997F;display:flex;align-items:center;gap:.5rem}
@media (max-width:860px){
  .srv-cta{grid-template-columns:1fr;padding:40px 28px;gap:28px}
}
/* ===== subpage CSS: service-detail.html ===== */
/* ── svd- prefix: service-detail page-unique styles ─────────────────── */
.svd-hero { padding: 48px 0 56px; background: var(--bg-soft); border-bottom: 1px solid var(--line); }
.svd-hero__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
@media (max-width: 860px) { .svd-hero__grid { grid-template-columns: 1fr; gap: 36px; } }
.svd-facts { display: flex; gap: 1.8rem; flex-wrap: wrap; padding: 1rem 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin: 1.4rem 0 1.6rem; }
/* D-28: container Elementor mặc định `width:100%` → 3 ô fact chiếm trọn hàng và WRAP
 * xuống 3 dòng, dù `.svd-facts` đã `flex-direction:row` trong spec (đo: mỗi con 530px
 * = đúng bề ngang container cha). Nguồn `.svd-facts{display:flex;gap:1.8rem;flex-wrap:wrap}`
 * với `.svd-fact` co theo nội dung. Trả width về auto — đúng cách D-28 đã chốt. */
.svd-fact { display: flex; flex-direction: column; gap: .15rem; width: auto; }
.svd-fact__val { font-family: 'Fraunces', serif; font-size: 1.3rem; font-weight: 500; color: var(--ink); letter-spacing: -.015em; }
.svd-fact__lbl { font-size: .75rem; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-4); }
.svd-highlights { list-style: none; padding: 0; margin: 0; display: grid; gap: .55rem; }
.svd-highlights li { display: flex; gap: .6rem; font-size: .94rem; color: var(--ink-2); }
.svd-highlights li svg { flex-shrink: 0; color: var(--accent); margin-top: 3px; }
.svd-cta-row { display: flex; gap: .7rem; flex-wrap: wrap; margin-bottom: 1.6rem; }
.svd-frame { border-radius: var(--radius-lg); background: var(--oat); overflow: hidden; box-shadow: var(--shadow); aspect-ratio: 4 / 5; position: relative; }
.svd-frame .svd-frame__photo { position: absolute; inset: 0; background-size: cover; background-position: center top; filter: saturate(.94) contrast(1.02); }
.svd-frame::after { content: ""; position: absolute; inset: 0; background: linear-gradient(160deg, rgba(251,246,238,0) 40%, rgba(26,21,18,.12) 100%); }
.svd-frame__tag { position: absolute; bottom: 1.1rem; left: 1.1rem; z-index: 2; background: rgba(251,246,238,.95); backdrop-filter: blur(6px); border: 1px solid var(--line); border-radius: 999px; padding: .4rem .75rem; font-size: .78rem; color: var(--ink-2); display: inline-flex; align-items: center; gap: .4rem; box-shadow: inset 0 1px 0 rgba(255,255,255,.6); }
.svd-included { columns: 2; column-gap: 2.4rem; list-style: none; padding: 0; margin: 0; }
.svd-included li { display: flex; gap: .65rem; font-size: .96rem; color: var(--ink-2); margin-bottom: .75rem; break-inside: avoid; }
.svd-included li svg { flex-shrink: 0; color: var(--accent); margin-top: 3px; }
@media (max-width: 600px) { .svd-included { columns: 1; } }
.svd-pkg-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: stretch; }
@media (max-width: 860px) { .svd-pkg-grid { grid-template-columns: 1fr; } }
@media (min-width: 561px) and (max-width: 860px) { .svd-pkg-grid { grid-template-columns: 1fr 1fr; } }
.svd-pkg { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.6rem 1.5rem 1.4rem; display: flex; flex-direction: column; gap: .55rem; box-shadow: var(--shadow-card); transition: transform .4s var(--ease), box-shadow .4s var(--ease); }
.svd-pkg:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.svd-pkg--featured { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.svd-pkg--featured .svd-pkg__name { color: var(--on-dark); }
.svd-pkg--featured .svd-pkg__range { color: #A8997F; }
.svd-pkg--featured .svd-pkg__price { color: var(--bg); }
.svd-pkg--featured .svd-pkg__ul li { color: var(--line-2); }
.svd-pkg--featured .svd-pkg__ul li svg { color: var(--glow); }
.svd-pkg--featured .svd-pkg__divider { border-color: rgba(228,217,197,.2); }
.svd-pkg__badge { display: inline-flex; align-items: center; gap: .35rem; padding: .22rem .6rem; border-radius: 999px; font-size: .72rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; background: var(--accent); color: #fff; align-self: flex-start; margin-bottom: .3rem; }
.svd-pkg__name { font-family: 'Fraunces', serif; font-size: 1.3rem; font-weight: 500; letter-spacing: -.01em; margin: 0; color: var(--ink); }
.svd-pkg__range { font-size: .8rem; color: var(--ink-4); text-transform: uppercase; letter-spacing: .06em; }
.svd-pkg__price { font-family: 'Fraunces', serif; font-size: 2.2rem; font-weight: 500; letter-spacing: -.03em; color: var(--ink); line-height: 1; margin: .4rem 0 .2rem; }
.svd-pkg__divider { border: 0; border-top: 1px solid var(--line); margin: .4rem 0; }
.svd-pkg__ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; flex: 1; }
.svd-pkg__ul li { display: flex; gap: .55rem; font-size: .92rem; color: var(--ink-2); }
.svd-pkg__ul li svg { flex-shrink: 0; color: var(--accent); margin-top: 3px; }
.svd-timeline { position: relative; display: grid; gap: 0; padding-left: 0; }
.svd-timeline::before { content: ""; position: absolute; left: 21px; top: 40px; bottom: 40px; width: 2px; background: var(--line); z-index: 0; }
.svd-step { display: grid; grid-template-columns: 44px 1fr; gap: 1.2rem; align-items: start; padding: 1.4rem 0; border-bottom: 1px solid var(--line); position: relative; }
.svd-step:last-child { border-bottom: 0; }
.svd-step__num { width: 44px; height: 44px; border-radius: 99px; background: var(--bg); border: 2px solid var(--line); display: flex; align-items: center; justify-content: center; font-family: 'Fraunces', serif; font-size: 1rem; font-weight: 500; color: var(--accent); flex-shrink: 0; position: relative; z-index: 1; transition: background .3s var(--ease), border-color .3s var(--ease); }
.svd-step:hover .svd-step__num { background: var(--accent); border-color: var(--accent); color: #fff; }
.svd-step__body { padding-top: .6rem; }
.svd-step__title { font-family: 'Fraunces', serif; font-weight: 500; font-size: 1.1rem; letter-spacing: -.01em; margin: 0 0 .35rem; color: var(--ink); }
.svd-step__desc { font-size: .94rem; color: var(--ink-3); max-width: 60ch; margin: 0; }
.svd-gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
@media (max-width: 760px) { .svd-gallery { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .svd-gallery { grid-template-columns: 1fr 1fr; gap: 10px; } }
.svd-gallery__item { border-radius: var(--radius); overflow: hidden; aspect-ratio: 3 / 4; background: var(--oat); position: relative; display: block; }
.svd-gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.svd-gallery__item:hover img { transform: scale(1.05); }
.svd-cta-band { background: var(--ink); border-radius: var(--radius-lg); color: var(--bg); padding: 64px 56px; display: grid; grid-template-columns: 5fr 4fr; gap: 48px; align-items: center; position: relative; overflow: hidden; }
.svd-cta-band::before { content: ""; position: absolute; right: -120px; top: -140px; width: 380px; height: 380px; border-radius: 99px; background: radial-gradient(circle at 30% 30%, rgba(232,184,156,.28), rgba(192,78,54,0) 65%); pointer-events: none; }
.svd-cta-band h2 { font-family: 'Fraunces', serif; font-weight: 400; font-size: clamp(1.8rem, 2.8vw, 2.5rem); line-height: 1.06; letter-spacing: -.02em; margin: 0 0 .7rem; color: var(--bg); }
.svd-cta-band h2 em { font-style: italic; color: var(--glow); }
.svd-cta-band p { color: var(--line-2); max-width: 42ch; margin: 0; }
.svd-cta-band__actions { display: flex; gap: .8rem; flex-wrap: wrap; }
@media (max-width: 760px) { .svd-cta-band { grid-template-columns: 1fr; padding: 40px 28px; gap: 28px; } }
/* ===== subpage CSS: about.html ===== */
/* abt- prefixed: about.html page-unique styles */
/* section: about.story — 2-col split */
.abt-story { display:grid; grid-template-columns:5fr 7fr; gap:72px; align-items:start; }
.abt-story__frame { position:relative; border-radius:var(--radius-lg); overflow:hidden; aspect-ratio:4/5; background:var(--oat); box-shadow:var(--shadow); flex-shrink:0; }
.abt-story__frame img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:saturate(.92) contrast(1.02); }
.abt-story__frame::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(251,246,238,0) 55%, rgba(26,21,18,.14) 100%); pointer-events:none; }
.abt-story__tag { position:absolute; bottom:1.2rem; left:1.2rem; background:rgba(251,246,238,.94); backdrop-filter:blur(6px); border:1px solid var(--line); border-radius:999px; padding:.4rem .8rem; font-size:.78rem; color:var(--ink-2); display:inline-flex; align-items:center; gap:.4rem; box-shadow:inset 0 1px 0 rgba(255,255,255,.6); }
.abt-story__tag .swatch { width:7px; height:7px; border-radius:99px; background:var(--accent); flex-shrink:0; }
@media (max-width:860px) { .abt-story { grid-template-columns:1fr; gap:36px; } .abt-story__frame { aspect-ratio:16/9; } }
/* section: about.values — 4-up grid */
.abt-values-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.abt-value-card { background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:1.6rem 1.4rem 1.3rem; display:flex; flex-direction:column; gap:.55rem; box-shadow:var(--shadow-card); transition:transform .4s var(--ease), box-shadow .4s var(--ease); }
.abt-value-card:hover { transform:translateY(-4px); box-shadow:var(--shadow); }
.abt-value-icon { width:46px; height:46px; border-radius:14px; display:inline-flex; align-items:center; justify-content:center; background:var(--accent-soft); color:var(--accent-ink); margin-bottom:.4rem; flex-shrink:0; }
.abt-value-card h3 { font-family:'Fraunces',serif; font-weight:500; font-size:1.15rem; letter-spacing:-.01em; margin:0; color:var(--ink); }
.abt-value-card p { color:var(--ink-3); font-size:.93rem; margin:0; line-height:1.6; flex:1; }
@media (max-width:900px) { .abt-values-grid { grid-template-columns:1fr 1fr; } }
@media (max-width:560px) { .abt-values-grid { grid-template-columns:1fr; } }
/* section: about.stats-band — dark ink background */
.abt-stats-band { background:var(--ink); color:var(--bg); border-radius:var(--radius-lg); padding:64px 56px; position:relative; overflow:hidden; }
.abt-stats-band::before { content:""; position:absolute; right:-120px; top:-120px; width:360px; height:360px; border-radius:99px; background:radial-gradient(circle at 30% 30%, rgba(232,184,156,.28), rgba(192,78,54,0) 60%); pointer-events:none; }
.abt-stats-band__head { margin-bottom:2.8rem; }
.abt-stats-band__pre { font-size:.78rem; text-transform:uppercase; letter-spacing:.12em; color:#A8997F; margin-bottom:.5rem; }
.abt-stats-band__title { font-family:'Fraunces',serif; font-weight:400; font-size:clamp(1.6rem,2.6vw,2.2rem); line-height:1.1; letter-spacing:-.02em; color:var(--bg); margin:0; }
.abt-stats-band__title em { font-style:italic; color:var(--glow); }
.abt-stats-row { display:grid; grid-template-columns:repeat(4,1fr); gap:32px 40px; border-top:1px solid rgba(228,217,197,.15); padding-top:2.2rem; }
.abt-stat .abt-stat-n { font-family:'Fraunces',serif; font-size:clamp(2rem,3.6vw,3rem); font-weight:500; letter-spacing:-.03em; color:var(--bg); line-height:1; }
.abt-stat .abt-stat-n em { font-style:italic; color:var(--glow); }
.abt-stat .abt-stat-l { font-size:.8rem; color:#A8997F; text-transform:uppercase; letter-spacing:.07em; margin-top:.4rem; line-height:1.4; }
@media (max-width:860px) { .abt-stats-band { padding:40px 28px; } .abt-stats-row { grid-template-columns:1fr 1fr; gap:28px; } }
/* section: about.team */
.abt-team-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.abt-team-card { background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:1.8rem 1.4rem 1.4rem; display:flex; flex-direction:column; align-items:center; text-align:center; gap:.5rem; box-shadow:var(--shadow-card); transition:transform .4s var(--ease), box-shadow .4s var(--ease); }
.abt-team-card:hover { transform:translateY(-4px); box-shadow:var(--shadow); }
.abt-av { width:72px; height:72px; border-radius:99px; margin-bottom:.6rem; position:relative; flex-shrink:0; }
.abt-av::after { content:""; position:absolute; inset:4px; border-radius:99px; background:rgba(255,255,255,.15); box-shadow:inset 0 0 0 1px rgba(255,255,255,.35); }
.abt-av--a { background:linear-gradient(135deg,var(--glow),var(--accent)); }
.abt-av--b { background:linear-gradient(135deg,var(--line-2),var(--ink-3)); }
.abt-av--c { background:linear-gradient(135deg,var(--accent-soft),var(--accent-ink)); }
.abt-av--d { background:linear-gradient(135deg,#C9DDD5,#3B625A); }
.abt-team-card__name { font-family:'Fraunces',serif; font-weight:500; font-size:1.1rem; letter-spacing:-.01em; color:var(--ink); margin:0; }
.abt-team-card__role { font-size:.78rem; text-transform:uppercase; letter-spacing:.08em; color:var(--accent); font-weight:500; }
.abt-team-card__bio { color:var(--ink-3); font-size:.91rem; line-height:1.55; margin:0; }
@media (max-width:900px) { .abt-team-grid { grid-template-columns:1fr 1fr; gap:16px; } }
@media (max-width:480px) { .abt-team-grid { grid-template-columns:1fr; } }
/* section: about.cta-pair — twin CTA cards */
.abt-cta-pair { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.abt-cta-card { background:var(--oat); border:1px solid var(--line); border-radius:var(--radius-lg); padding:2.4rem 2rem; display:flex; flex-direction:column; gap:1rem; position:relative; overflow:hidden; transition:box-shadow .4s var(--ease); }
.abt-cta-card:hover { box-shadow:var(--shadow); }
.abt-cta-card--dark { background:var(--ink); color:var(--bg); border-color:var(--ink); }
.abt-cta-card__pre { font-size:.78rem; text-transform:uppercase; letter-spacing:.1em; color:var(--ink-4); }
.abt-cta-card--dark .abt-cta-card__pre { color:#A8997F; }
.abt-cta-card__title { font-family:'Fraunces',serif; font-weight:500; font-size:clamp(1.5rem,2.2vw,2rem); letter-spacing:-.02em; line-height:1.1; margin:0; color:var(--ink); }
.abt-cta-card--dark .abt-cta-card__title { color:var(--bg); }
.abt-cta-card__title em { font-style:italic; color:var(--accent); }
.abt-cta-card--dark .abt-cta-card__title em { color:var(--glow); }
.abt-cta-card p { color:var(--ink-3); font-size:.95rem; margin:0; max-width:38ch; line-height:1.6; }
.abt-cta-card--dark p { color:var(--line-2); }
.abt-cta-card__blob { position:absolute; right:-60px; bottom:-60px; width:220px; height:220px; border-radius:99px; background:radial-gradient(circle, rgba(192,78,54,.1), rgba(192,78,54,0) 70%); pointer-events:none; }
.abt-cta-card--dark .abt-cta-card__blob { background:radial-gradient(circle, rgba(232,184,156,.18), rgba(232,184,156,0) 70%); }
@media (max-width:700px) { .abt-cta-pair { grid-template-columns:1fr; } }
/* ===== subpage CSS: contact.html ===== */
/* ── ctc- prefix: contact page-unique pieces ── */
.ctc-info-card { background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:1.25rem 1.3rem; display:flex; align-items:flex-start; gap:1rem; box-shadow:var(--shadow-card); margin-bottom:14px; transition:transform .35s var(--ease); }
.ctc-info-card:last-child { margin-bottom:0; }
.ctc-info-card:hover { transform:translateY(-2px); }
.ctc-info-card__icon { width:42px; height:42px; border-radius:12px; background:var(--accent-soft); color:var(--accent-ink); display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; }
.ctc-info-card__label { font-size:.72rem; text-transform:uppercase; letter-spacing:.1em; color:var(--ink-4); margin-bottom:.22rem; }
.ctc-info-card__value { font-size:.97rem; color:var(--ink); font-weight:500; }
.ctc-info-card__sub { font-size:.82rem; color:var(--ink-3); margin-top:.15rem; }
.ctc-socials-row { display:flex; align-items:center; gap:.5rem; margin-top:24px; }
.ctc-socials-row__label { font-size:.78rem; text-transform:uppercase; letter-spacing:.1em; color:var(--ink-4); margin-right:.4rem; }
.ctc-form-card { background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); padding:2rem 2.2rem; box-shadow:var(--shadow-card); }
@media (max-width:760px) { .ctc-form-card { padding:1.5rem 1.25rem; } }
.ctc-form-card__heading { font-family:'Fraunces',serif; font-weight:500; font-size:1.45rem; letter-spacing:-.015em; margin:0 0 .45rem; color:var(--ink); }
.ctc-form-card__sub { font-size:.9rem; color:var(--ink-3); margin:0 0 1.5rem; }
.ctc-consent { display:flex; align-items:flex-start; gap:.65rem; margin-bottom:1.2rem; font-size:.85rem; color:var(--ink-3); line-height:1.45; }
.ctc-consent input[type="checkbox"] { margin-top:.2rem; width:16px; height:16px; accent-color:var(--accent); flex-shrink:0; cursor:pointer; }
.ctc-consent a { color:var(--accent-ink); border-bottom:1px solid var(--line-2); }
.ctc-consent a:hover { border-color:var(--accent); }
.ctc-map-band { background:var(--bg-soft); border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:72px 0; }
.ctc-map { border-radius:var(--radius-lg); border:1.5px dashed var(--line-2); background:var(--oat); min-height:320px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1rem; position:relative; overflow:hidden; }
.ctc-map::before { content:""; position:absolute; inset:0; background:repeating-linear-gradient(-45deg, rgba(228,217,197,.18) 0px, rgba(228,217,197,.18) 1px, transparent 1px, transparent 18px); pointer-events:none; }
.ctc-map__icon { width:54px; height:54px; border-radius:99px; background:var(--ink); color:var(--bg); display:flex; align-items:center; justify-content:center; box-shadow:0 8px 24px -8px rgba(26,21,18,.3); position:relative; z-index:1; }
.ctc-map__label { text-align:center; position:relative; z-index:1; }
.ctc-map__label strong { font-family:'Fraunces',serif; font-size:1.15rem; font-weight:500; color:var(--ink); display:block; margin-bottom:.25rem; }
.ctc-map__label span { font-size:.88rem; color:var(--ink-3); }
.ctc-note-band { padding:56px 0 0; }
.ctc-hours-faq { display:grid; grid-template-columns:1fr 1fr; gap:32px; align-items:start; }
@media (max-width:700px) { .ctc-hours-faq { grid-template-columns:1fr; gap:24px; } }
.ctc-hours-table { width:100%; border-collapse:collapse; }
.ctc-hours-table tr { border-bottom:1px solid var(--line); }
.ctc-hours-table tr:last-child { border-bottom:none; }
.ctc-hours-table td { padding:.6rem 0; font-size:.93rem; color:var(--ink-2); }
.ctc-hours-table td:last-child { text-align:right; color:var(--ink-3); }
.ctc-hours-table .ctc-today { font-weight:500; color:var(--accent-ink); }
.ctc-hours-table .ctc-today td:last-child { color:var(--accent-ink); }
.ctc-contact-cols { display:grid; grid-template-columns:5fr 7fr; gap:48px; align-items:start; }
@media (max-width:860px) { .ctc-contact-cols { grid-template-columns:1fr; gap:32px; } }
/* ===== subpage CSS: shop.html ===== */
/* shp- : shop page-unique styles */
/* Toolbar */
.shp-toolbar{
  display:flex;flex-wrap:wrap;align-items:center;
  justify-content:space-between;gap:1rem;
  padding:1.1rem 0 1.4rem;
  border-bottom:1px solid var(--line);
  margin-bottom:2rem;
}
.shp-toolbar__left{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}
.shp-toolbar__right{
  display:flex;align-items:center;gap:1rem;
  font-size:.86rem;color:var(--ink-3);white-space:nowrap;flex-shrink:0;
}
.shp-sort{
  background:#fff;border:1px solid var(--line-2);border-radius:10px;
  padding:.48rem .75rem;font:inherit;font-size:.86rem;color:var(--ink);
  outline:0;cursor:pointer;
  transition:border-color .2s var(--ease);
}
.shp-sort:focus{border-color:var(--accent)}
/* Sidebar price range */
.shp-price-list{list-style:none;padding:0;margin:0;display:grid;gap:.45rem}
.shp-price-list li{display:flex;align-items:center;gap:.55rem;font-size:.92rem;color:var(--ink-2);cursor:pointer}
.shp-price-list li input[type="radio"]{
  accent-color:var(--accent);width:15px;height:15px;cursor:pointer;flex-shrink:0;
}
.shp-price-list li label{cursor:pointer}
/* Out-of-stock state on product card */
.shp-out-stock .product-card__add{
  background:var(--oat);color:var(--ink-4);border:1px solid var(--line);
  cursor:not-allowed;
}
.shp-out-stock .product-card__add:hover{background:var(--oat)}
.shp-out-stock .product-card__media{opacity:.72}
/* Sidebar breed links */
.shp-breed-list{list-style:none;padding:0;margin:0;display:grid;gap:.5rem}
.shp-breed-list li a{
  display:flex;align-items:center;gap:.55rem;
  color:var(--ink-2);font-size:.92rem;padding:.25rem 0;
  transition:color .2s var(--ease);
}
.shp-breed-list li a:hover{color:var(--accent)}
.shp-breed-list li a .shp-breed-dot{
  width:8px;height:8px;border-radius:99px;background:var(--oat);border:1px solid var(--line-2);flex-shrink:0;
}
/* Product count badge on chip */
.shp-chip-count{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:18px;height:18px;border-radius:99px;
  background:var(--oat);color:var(--ink-4);font-size:.68rem;font-weight:600;
  padding:0 4px;
}
.chip.is-active .shp-chip-count{background:rgba(251,246,238,.2);color:rgba(251,246,238,.8)}
/* ===== subpage CSS: product-detail.html ===== */
/* pdp-* — Product Detail Page (product-detail.html only) */
/* Product top layout — 2-col */
.pdp-top { display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start; padding:48px 0 56px; }
@media (max-width:860px) { .pdp-top { grid-template-columns:1fr; gap:32px; padding:32px 0 40px; } }
/* Gallery */
.pdp-gallery { display:flex; flex-direction:column; gap:10px; }
.pdp-gallery__main { position:relative; aspect-ratio:4/3.6; border-radius:var(--radius-lg); background:var(--oat); overflow:hidden; border:1px solid var(--line); box-shadow:var(--shadow-card); }
.pdp-gallery__main img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; padding:20px; }
.pdp-gallery__sale-badge { position:absolute; top:.9rem; left:.9rem; background:var(--accent); color:#fff; font-size:.72rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase; padding:.28rem .65rem; border-radius:999px; z-index:2; }
.pdp-gallery__thumbs { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.pdp-gallery__thumb { aspect-ratio:1/1; border-radius:12px; background:var(--oat); border:2px solid transparent; overflow:hidden; cursor:pointer; transition:border-color .2s var(--ease); padding:0; }
.pdp-gallery__thumb:first-child { border-color:var(--accent); }
.pdp-gallery__thumb:hover { border-color:var(--ink-3); }
.pdp-gallery__thumb img { width:100%; height:100%; object-fit:contain; padding:6px; }
/* Product summary */
.pdp-summary { display:flex; flex-direction:column; gap:1.1rem; }
.pdp-eyebrow { font-size:.78rem; text-transform:uppercase; letter-spacing:.1em; color:var(--ink-4); font-weight:500; }
.pdp-summary h1 { font-family:'Fraunces',serif; font-weight:500; font-size:clamp(1.75rem,3vw,2.4rem); line-height:1.04; letter-spacing:-.02em; margin:0; color:var(--ink); }
.pdp-rating { display:flex; align-items:center; gap:.55rem; font-size:.92rem; }
.pdp-rating__stars { color:var(--accent); letter-spacing:.04em; }
.pdp-rating__count { color:var(--ink-4); font-size:.84rem; }
.pdp-rating__link { color:var(--accent-ink); font-size:.84rem; text-decoration:underline; text-decoration-color:var(--line-2); }
.pdp-rating__link:hover { text-decoration-color:var(--accent); }
.pdp-price { display:flex; align-items:baseline; gap:.6rem; border-bottom:1px solid var(--line); padding-bottom:1.1rem; }
.pdp-price del { font-family:'Fraunces',serif; font-size:1.15rem; color:var(--ink-4); font-weight:400; }
.pdp-price ins { font-family:'Fraunces',serif; font-size:1.8rem; color:var(--accent-ink); font-weight:500; text-decoration:none; letter-spacing:-.01em; }
.pdp-price__save { font-size:.8rem; color:var(--accent); background:var(--accent-soft); padding:.18rem .55rem; border-radius:999px; font-weight:500; }
.pdp-short-desc { color:var(--ink-3); font-size:.97rem; line-height:1.65; max-width:52ch; }
.pdp-size-label { font-size:.82rem; font-weight:500; color:var(--ink-2); margin-bottom:.45rem; display:flex; justify-content:space-between; align-items:center; }
.pdp-size-label a { color:var(--accent-ink); font-weight:400; font-size:.8rem; text-decoration:underline; text-decoration-color:var(--line-2); }
.pdp-size-select { width:100%; background:#fff; border:1px solid var(--line-2); border-radius:12px; padding:.8rem .9rem; font:inherit; font-size:.95rem; color:var(--ink); outline:0; appearance:none; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235C534B' stroke-width='2'><path d='m6 9 6 6 6-6'/></svg>"); background-repeat:no-repeat; background-position:right .9rem center; background-size:16px; cursor:pointer; transition:border-color .2s var(--ease); }
.pdp-size-select:focus { border-color:var(--accent); }
.pdp-actions { display:flex; gap:.65rem; align-items:center; flex-wrap:wrap; }
.pdp-qty { display:inline-flex; align-items:center; border:1px solid var(--line-2); border-radius:12px; overflow:hidden; background:#fff; flex-shrink:0; }
.pdp-qty__btn { width:42px; height:48px; display:inline-flex; align-items:center; justify-content:center; color:var(--ink-2); font-size:1.15rem; transition:background .2s var(--ease),color .2s var(--ease); }
.pdp-qty__btn:hover { background:var(--oat); color:var(--ink); }
.pdp-qty__input { width:46px; height:48px; border:0; border-left:1px solid var(--line); border-right:1px solid var(--line); text-align:center; font:inherit; font-size:.97rem; color:var(--ink); background:transparent; outline:0; }
.pdp-qty__input::-webkit-inner-spin-button,.pdp-qty__input::-webkit-outer-spin-button { appearance:none; }
.pdp-qty__input[type=number] { -moz-appearance:textfield; }
.pdp-add-btn { flex:1; justify-content:center; padding:.95rem 1.4rem; font-size:.97rem; }
.pdp-wishlist-btn { width:48px; height:48px; border-radius:12px; border:1px solid var(--line-2); background:#fff; display:inline-flex; align-items:center; justify-content:center; color:var(--ink-3); flex-shrink:0; transition:all .25s var(--ease); }
.pdp-wishlist-btn:hover { background:var(--accent-soft); border-color:var(--accent); color:var(--accent); }
.pdp-trust { display:flex; gap:1rem; flex-wrap:wrap; padding:.8rem 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.pdp-trust__item { display:flex; align-items:center; gap:.45rem; font-size:.82rem; color:var(--ink-3); }
.pdp-trust__item svg { flex-shrink:0; color:var(--accent); }
.pdp-meta { list-style:none; padding:0; margin:0; display:grid; gap:.4rem; font-size:.88rem; }
.pdp-meta li { display:flex; gap:.5rem; color:var(--ink-3); }
.pdp-meta li strong { color:var(--ink-2); font-weight:500; min-width:90px; }
.pdp-meta li a { color:var(--accent-ink); }
/* Tabs section */
.pdp-tabs-section { border-top:1px solid var(--line); padding:48px 0 56px; }
.pdp-spec-table { width:100%; border-collapse:collapse; font-size:.95rem; max-width:580px; }
.pdp-spec-table tr { border-bottom:1px solid var(--line); }
.pdp-spec-table td { padding:.75rem 0; vertical-align:top; }
.pdp-spec-table td:first-child { color:var(--ink-4); font-size:.84rem; text-transform:uppercase; letter-spacing:.07em; width:40%; padding-right:1rem; font-weight:500; }
.pdp-spec-table td:last-child { color:var(--ink-2); }
/* Reviews */
.pdp-reviews-list { display:grid; gap:18px; margin-top:4px; }
.pdp-review { background:#fff; border:1px solid var(--line); border-radius:18px; padding:1.4rem 1.4rem 1.2rem; box-shadow:var(--shadow-card); }
.pdp-review__top { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:.6rem; margin-bottom:.8rem; }
.pdp-review__who { display:flex; align-items:center; gap:.65rem; }
.pdp-review__av { width:38px; height:38px; border-radius:99px; flex-shrink:0; background:linear-gradient(135deg,var(--glow),var(--accent)); }
.pdp-review__av.b { background:linear-gradient(135deg,#A89878,var(--ink-2)); }
.pdp-review__av.c { background:linear-gradient(135deg,var(--accent-soft),var(--accent-ink)); }
.pdp-review__name { font-size:.92rem; font-weight:500; color:var(--ink); }
.pdp-review__dog { font-size:.78rem; color:var(--ink-4); }
.pdp-review__stars { color:var(--accent); font-size:.88rem; letter-spacing:.06em; }
.pdp-review__date { font-size:.78rem; color:var(--ink-4); margin-left:.6rem; }
.pdp-review blockquote { font-family:'Fraunces',serif; font-size:1.06rem; line-height:1.55; color:var(--ink); margin:0 0 .6rem; letter-spacing:-.005em; }
.pdp-review__size { font-size:.8rem; color:var(--ink-4); background:var(--oat); padding:.2rem .55rem; border-radius:999px; display:inline-block; }
.pdp-reviews-summary { display:flex; align-items:center; gap:1.4rem; margin-bottom:1.6rem; padding-bottom:1.4rem; border-bottom:1px solid var(--line); flex-wrap:wrap; }
.pdp-reviews-summary__score { display:flex; flex-direction:column; align-items:center; gap:.2rem; min-width:80px; }
.pdp-reviews-summary__num { font-family:'Fraunces',serif; font-size:3.2rem; font-weight:500; line-height:1; color:var(--ink); letter-spacing:-.02em; }
.pdp-reviews-summary__stars { color:var(--accent); font-size:.95rem; letter-spacing:.06em; }
.pdp-reviews-summary__total { font-size:.8rem; color:var(--ink-4); }
.pdp-reviews-bars { flex:1; display:grid; gap:.45rem; min-width:200px; }
.pdp-bar-row { display:flex; align-items:center; gap:.55rem; font-size:.82rem; color:var(--ink-3); }
.pdp-bar-row span:first-child { width:40px; text-align:right; flex-shrink:0; }
.pdp-bar { flex:1; height:7px; border-radius:99px; background:var(--oat); overflow:hidden; }
.pdp-bar__fill { height:100%; border-radius:99px; background:var(--accent); }
.pdp-bar-row span:last-child { width:28px; color:var(--ink-4); font-size:.78rem; }
/* Related products */
.pdp-related { padding:56px 0 80px; border-top:1px solid var(--line); }
.pdp-related__head { margin-bottom:32px; }
.pdp-related__head .pre { font-size:.78rem; text-transform:uppercase; letter-spacing:.12em; color:var(--ink-4); margin-bottom:.4rem; }
.pdp-related__head h2 { font-family:'Fraunces',serif; font-weight:500; font-size:clamp(1.7rem,2.6vw,2.2rem); line-height:1.04; letter-spacing:-.02em; margin:0; color:var(--ink); }
/* ===== subpage CSS: blog.html ===== */
/* ----------------------------------------------------------------
   blg- : Blog / Journal page-specific CSS
   All new classes are prefixed blg- to avoid collision.
   ---------------------------------------------------------------- */
/* Featured post card */
.blg-feature { display: grid; grid-template-columns: 5fr 4fr; gap: 0; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-card); transition: box-shadow .4s var(--ease), transform .4s var(--ease); }
.blg-feature:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.blg-feature__media { position: relative; aspect-ratio: 4 / 3; background: var(--oat); overflow: hidden; display: block; }
.blg-feature__media .bg { position: absolute; inset: 0; background-size: cover; background-position: center; filter: saturate(.93) contrast(1.02); transition: transform 1.2s var(--ease); }
.blg-feature:hover .blg-feature__media .bg { transform: scale(1.04); }
.blg-feature__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(26,21,18,0) 50%, rgba(26,21,18,.18) 100%); }
.blg-feature__body { padding: 2.4rem 2.4rem 2rem; display: flex; flex-direction: column; justify-content: center; gap: .85rem; }
.blg-feature__cat { display: inline-flex; align-items: center; gap: .4rem; font-size: .76rem; text-transform: uppercase; letter-spacing: .1em; color: var(--accent-ink); font-weight: 600; }
.blg-feature__cat .blg-dot { width: 6px; height: 6px; border-radius: 99px; background: var(--accent); flex-shrink: 0; }
.blg-feature__date { font-size: .8rem; color: var(--ink-4); letter-spacing: .02em; }
.blg-feature__title { font-family: 'Fraunces', serif; font-weight: 500; font-size: clamp(1.55rem, 2.4vw, 2.1rem); line-height: 1.06; letter-spacing: -.02em; color: var(--ink); margin: 0; }
.blg-feature__title a:hover { color: var(--accent-ink); }
.blg-feature__excerpt { color: var(--ink-3); font-size: .97rem; line-height: 1.65; max-width: 50ch; margin: 0; }
.blg-feature__link { display: inline-flex; align-items: center; gap: .45rem; font-size: .92rem; font-weight: 500; color: var(--accent-ink); margin-top: .25rem; }
.blg-feature__link .arrow { transition: transform .35s var(--ease); }
.blg-feature__link:hover .arrow { transform: translateX(4px); }
.blg-feature__label { position: absolute; top: 1rem; left: 1rem; background: rgba(251,246,238,.95); backdrop-filter: blur(6px); border: 1px solid var(--line); border-radius: 999px; padding: .32rem .75rem; font-size: .74rem; color: var(--ink-2); letter-spacing: .04em; text-transform: uppercase; box-shadow: inset 0 1px 0 rgba(255,255,255,.6); z-index: 2; }
@media (max-width: 860px) { .blg-feature { grid-template-columns: 1fr; } .blg-feature__media { aspect-ratio: 16 / 9; } .blg-feature__body { padding: 1.6rem 1.6rem 1.4rem; } }
/* Post grid */
.blg-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
@media (max-width: 640px) { .blg-grid { grid-template-columns: 1fr; } }
/* Post card */
.blg-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--shadow-card); transition: transform .4s var(--ease), box-shadow .4s var(--ease); }
.blg-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.blg-card__media { position: relative; aspect-ratio: 16 / 9; background: var(--oat); overflow: hidden; display: block; flex-shrink: 0; }
.blg-card__media .bg { position: absolute; inset: 0; background-size: cover; background-position: center; filter: saturate(.92); transition: transform 1.2s var(--ease); }
.blg-card:hover .blg-card__media .bg { transform: scale(1.05); }
.blg-card__body { padding: 1.2rem 1.3rem 1.25rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.blg-card__meta { display: flex; align-items: center; gap: .75rem; }
.blg-card__cat { font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: var(--accent-ink); font-weight: 600; }
.blg-card__date { font-size: .78rem; color: var(--ink-4); }
.blg-card__title { font-family: 'Fraunces', serif; font-weight: 500; font-size: 1.12rem; line-height: 1.2; letter-spacing: -.01em; color: var(--ink); margin: 0; }
.blg-card__title a:hover { color: var(--accent-ink); }
.blg-card__excerpt { color: var(--ink-3); font-size: .9rem; line-height: 1.6; margin: 0; flex: 1; }
.blg-card__link { display: inline-flex; align-items: center; gap: .4rem; font-size: .88rem; font-weight: 500; color: var(--accent-ink); margin-top: .35rem; }
.blg-card__link .arrow { transition: transform .35s var(--ease); }
.blg-card__link:hover .arrow { transform: translateX(4px); }
/* Sidebar search */
.blg-search { display: flex; gap: 8px; align-items: stretch; }
.blg-search input { flex: 1; background: var(--bg-soft); border: 1px solid var(--line-2); border-radius: 10px; padding: .7rem .85rem; font: inherit; font-size: .92rem; color: var(--ink); outline: 0; transition: border-color .2s var(--ease); }
.blg-search input:focus { border-color: var(--accent); }
.blg-search button { width: 38px; height: 38px; border-radius: 10px; background: var(--ink); color: var(--bg); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background .25s var(--ease); }
.blg-search button:hover { background: var(--accent-ink); }
/* Sidebar recent posts */
.blg-recent { list-style: none; padding: 0; margin: 0; display: grid; gap: .85rem; }
.blg-recent__item { display: flex; gap: .85rem; align-items: flex-start; }
.blg-recent__thumb { width: 52px; height: 52px; border-radius: 10px; background: var(--oat); overflow: hidden; flex-shrink: 0; position: relative; }
.blg-recent__thumb .bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
.blg-recent__info { flex: 1; min-width: 0; }
.blg-recent__title { font-family: 'Fraunces', serif; font-size: .9rem; font-weight: 500; color: var(--ink); line-height: 1.3; letter-spacing: -.005em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.blg-recent__title a:hover { color: var(--accent-ink); }
.blg-recent__date { font-size: .74rem; color: var(--ink-4); margin-top: .2rem; }
/* Section separator label */
.blg-section-label { font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-4); margin-bottom: 1.4rem; padding-bottom: .7rem; border-bottom: 1px solid var(--line); }
/* ===== subpage CSS: blog-detail.html ===== */
/* bld- prefix — blog-detail page-unique styles only */
.bld-hero-img { width:100%; aspect-ratio:16/7; border-radius:var(--radius-lg); overflow:hidden; background:var(--oat); margin:2rem 0 2.4rem; position:relative; box-shadow:var(--shadow-card); }
.bld-hero-img img { width:100%; height:100%; object-fit:cover; object-position:center; filter:saturate(.94) contrast(1.02); }
.bld-meta { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem 1.4rem; font-size:.88rem; color:var(--ink-4); margin:1rem 0 0; }
.bld-meta .bld-meta-sep { color:var(--line-2); }
.bld-meta .bld-author { display:inline-flex; align-items:center; gap:.5rem; color:var(--ink-2); font-weight:500; }
.bld-meta .bld-av { width:28px; height:28px; border-radius:99px; background:linear-gradient(135deg,var(--glow),var(--accent)); flex-shrink:0; }
.bld-inline-img { width:100%; border-radius:var(--radius); overflow:hidden; background:var(--oat); margin:1.8rem 0; box-shadow:var(--shadow-card); }
.bld-inline-img img { width:100%; height:auto; display:block; filter:saturate(.92) contrast(1.02); }
.bld-inline-img figcaption { font-size:.8rem; color:var(--ink-4); padding:.55rem .9rem .6rem; border-top:1px solid var(--line); background:var(--bg-soft); }
.bld-tags { display:flex; flex-wrap:wrap; gap:.45rem; padding:1.6rem 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin:2rem 0; }
.bld-tags .bld-tag-label { font-size:.78rem; color:var(--ink-4); text-transform:uppercase; letter-spacing:.08em; margin-right:.3rem; align-self:center; }
.bld-author-box { display:flex; gap:1.2rem; background:var(--bg-soft); border:1px solid var(--line); border-radius:var(--radius); padding:1.4rem 1.5rem; margin-bottom:2rem; }
.bld-author-box .bld-author-av { width:60px; height:60px; border-radius:99px; background:linear-gradient(135deg,var(--line-2),var(--ink-4)); flex-shrink:0; }
.bld-author-box .bld-author-name { font-family:'Fraunces',serif; font-weight:500; font-size:1.08rem; color:var(--ink); margin:0 0 .2rem; }
.bld-author-box .bld-author-role { font-size:.8rem; color:var(--ink-4); text-transform:uppercase; letter-spacing:.07em; margin-bottom:.55rem; }
.bld-author-box .bld-author-bio { font-size:.93rem; color:var(--ink-3); line-height:1.65; margin:0; }
.bld-share { display:flex; align-items:center; gap:.7rem; flex-wrap:wrap; margin-bottom:2.4rem; }
.bld-share .bld-share-label { font-size:.82rem; color:var(--ink-4); text-transform:uppercase; letter-spacing:.08em; }
.bld-share-btn { display:inline-flex; align-items:center; gap:.45rem; padding:.45rem .9rem; border-radius:999px; border:1px solid var(--line-2); font-size:.84rem; color:var(--ink-2); background:#fff; transition:background .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease); cursor:pointer; }
.bld-share-btn:hover { background:var(--oat); border-color:var(--ink-3); color:var(--ink); }
.bld-related-head { font-family:'Fraunces',serif; font-weight:500; font-size:1.45rem; letter-spacing:-.015em; color:var(--ink); margin:0 0 1.2rem; }
.bld-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:2.4rem; }
.bld-card { background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; display:flex; flex-direction:column; box-shadow:var(--shadow-card); transition:transform .4s var(--ease),box-shadow .4s var(--ease); }
.bld-card:hover { transform:translateY(-3px); box-shadow:var(--shadow); }
.bld-card__media { display:block; aspect-ratio:16/9; background:var(--oat); overflow:hidden; position:relative; flex-shrink:0; }
.bld-card__media img { width:100%; height:100%; object-fit:cover; transition:transform 1s var(--ease); }
.bld-card:hover .bld-card__media img { transform:scale(1.05); }
.bld-card__body { padding:.85rem 1rem 1rem; display:flex; flex-direction:column; gap:.35rem; flex:1; }
.bld-card__cat { font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-4); }
.bld-card__title { font-family:'Fraunces',serif; font-weight:500; font-size:.98rem; line-height:1.3; letter-spacing:-.01em; color:var(--ink); margin:0; }
.bld-card__title a:hover { color:var(--accent-ink); }
.bld-card__date { font-size:.78rem; color:var(--ink-4); margin-top:auto; padding-top:.5rem; }
.bld-comments { background:var(--bg-soft); border:1px dashed var(--line-2); border-radius:var(--radius); padding:1.8rem 1.6rem; text-align:center; color:var(--ink-4); font-size:.92rem; }
.bld-comments p { margin:0; }
.bld-search-row { display:flex; gap:8px; }
.bld-search-row input { flex:1; background:var(--bg-soft); border:1px solid var(--line-2); border-radius:10px; padding:.65rem .8rem; font:inherit; font-size:.9rem; color:var(--ink); outline:0; transition:border-color .2s var(--ease); }
.bld-search-row input:focus { border-color:var(--accent); }
.bld-search-row button { width:38px; height:38px; flex-shrink:0; border-radius:10px; background:var(--ink); color:var(--bg); display:inline-flex; align-items:center; justify-content:center; transition:background .2s var(--ease); }
.bld-search-row button:hover { background:var(--accent-ink); }
.bld-page-hero { padding:48px 0 36px; border-bottom:1px solid var(--line); background:var(--bg-soft); }
.prose blockquote { border-left:3px solid var(--accent); padding:.6rem 0 .6rem 1.2rem; margin:1.4rem 0; font-family:'Fraunces',serif; font-size:1.12rem; color:var(--ink-2); line-height:1.55; font-style:italic; }
@media (max-width:860px) { .bld-cards { grid-template-columns:1fr 1fr; } }
@media (max-width:560px) { .bld-cards { grid-template-columns:1fr; } .bld-author-box { flex-direction:column; } }
/* ── Mobile navigation ────────────────────────────────────────────────────
   .nav-links is hidden ≤900px (rule above) and .nav-toggle takes over. The
   drawer panel itself was JS-injected in the source and is NOT part of the
   static contract: on WordPress the Elementor `nav-menu` widget renders both
   the toggle and its own dropdown natively. Secondary header actions (search,
   wishlist, "Shop now") collapse ≤900px so the bar fits a 390px viewport. */
.nav-toggle {
  display: none;
  width: 42px; height: 42px;
  align-items: center; justify-content: center;
  border-radius: 12px; border: 1px solid var(--line-2);
  background: #fff; color: var(--ink);
  cursor: pointer; flex-shrink: 0;
  transition: background .2s var(--ease), border-color .2s var(--ease);
}
.nav-toggle:hover { background: var(--oat); border-color: var(--ink-3); }
@media (max-width:900px) {
  .nav-toggle { display: inline-flex; }
  .icon-search, .icon-wishlist, .nav-cta { display: none; }
}
/* ============================================================================
   Handoff normalisation — component classes that replaced inline styles.
   Every rule below is a CSS-bridge class for the Elementor build: the container
   or widget carries the class, this file carries the declarations.
   Inline style is kept ONLY where it carries per-item DATA (see map §13).
   ========================================================================== */
/* Section rhythm (were inline padding overrides) */
.section--tight{padding-top:32px}
.section--flush-top{padding-top:0}
/* Home (index.html has no page-scoped <style> block) */
.zig-stack{display:grid;gap:96px}

/* ── 6. Trang about.html — khối <style> của chính trang ──────────────────── */
/* ---------------------------------------------------------------
   abt- prefixed: about.html page-unique styles
   --------------------------------------------------------------- */
/* section: about.story — 2-col split */
.abt-story {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 72px;
  align-items: start;
}
.abt-story__frame {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--oat);
  box-shadow: var(--shadow);
  flex-shrink: 0;
}
.abt-story__frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.92) contrast(1.02);
}
.abt-story__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(251,246,238,0) 55%, rgba(26,21,18,.14) 100%);
  pointer-events: none;
}
.abt-story__tag {
  position: absolute;
  bottom: 1.2rem;
  left: 1.2rem;
  background: rgba(251,246,238,.94);
  backdrop-filter: blur(6px);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: .4rem .8rem;
  font-size: .78rem;
  color: var(--ink-2);
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6);
}
.abt-story__tag .swatch {
  width: 7px;
  height: 7px;
  border-radius: 99px;
  background: var(--accent);
  flex-shrink: 0;
}
@media (max-width: 860px) {
  .abt-story {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .abt-story__frame {
    aspect-ratio: 16 / 9;
  }
}
/* section: about.values — 4-up grid */
.abt-values-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.abt-value-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.6rem 1.4rem 1.3rem;
  display: flex;
  flex-direction: column;
  gap: .55rem;
  box-shadow: var(--shadow-card);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.abt-value-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
}
.abt-value-icon {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-soft);
  color: var(--accent-ink);
  margin-bottom: .4rem;
  flex-shrink: 0;
}
.abt-value-card h3 {
  font-family: 'Fraunces', serif;
  font-weight: 500;
  font-size: 1.15rem;
  letter-spacing: -.01em;
  margin: 0;
  color: var(--ink);
}
.abt-value-card p {
  color: var(--ink-3);
  font-size: .93rem;
  margin: 0;
  line-height: 1.6;
  flex: 1;
}
@media (max-width: 900px) {
  .abt-values-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 560px) {
  .abt-values-grid {
    grid-template-columns: 1fr;
  }
}
/* section: about.stats-band — dark ink background */
.abt-stats-band {
  background: var(--ink);
  color: var(--bg);
  border-radius: var(--radius-lg);
  padding: 64px 56px;
  position: relative;
  overflow: hidden;
}
.abt-stats-band::before {
  content: "";
  position: absolute;
  right: -120px;
  top: -120px;
  width: 360px;
  height: 360px;
  border-radius: 99px;
  background: radial-gradient(circle at 30% 30%, rgba(232,184,156,.28), rgba(192,78,54,0) 60%);
  pointer-events: none;
}
.abt-stats-band__head {
  margin-bottom: 2.8rem;
}
.abt-stats-band__pre {
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: #A8997F;
  margin-bottom: .5rem;
}
.abt-stats-band__title {
  font-family: 'Fraunces', serif;
  font-weight: 400;
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  line-height: 1.1;
  letter-spacing: -.02em;
  color: var(--bg);
  margin: 0;
}
.abt-stats-band__title em {
  font-style: italic;
  color: var(--glow);
}
.abt-stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px 40px;
  border-top: 1px solid rgba(228,217,197,.15);
  padding-top: 2.2rem;
}
.abt-stat .abt-stat-n {
  font-family: 'Fraunces', serif;
  font-size: clamp(2rem, 3.6vw, 3rem);
  font-weight: 500;
  letter-spacing: -.03em;
  color: var(--bg);
  line-height: 1;
}
.abt-stat .abt-stat-n em {
  font-style: italic;
  color: var(--glow);
}
.abt-stat .abt-stat-l {
  font-size: .8rem;
  color: #A8997F;
  text-transform: uppercase;
  letter-spacing: .07em;
  margin-top: .4rem;
  line-height: 1.4;
}
@media (max-width: 860px) {
  .abt-stats-band {
    padding: 40px 28px;
  }
  .abt-stats-row {
    grid-template-columns: 1fr 1fr;
    gap: 28px;
  }
}
@media (max-width: 480px) {
  .abt-stats-row {
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }
}
/* section: about.team */
.abt-team-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.abt-team-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.8rem 1.4rem 1.4rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: .5rem;
  box-shadow: var(--shadow-card);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.abt-team-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
}
.abt-av {
  width: 72px;
  height: 72px;
  border-radius: 99px;
  margin-bottom: .6rem;
  position: relative;
  flex-shrink: 0;
}
.abt-av::after {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 99px;
  background: rgba(255,255,255,.15);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.35);
}
.abt-av--a { background: linear-gradient(135deg, var(--glow), var(--accent)); }
.abt-av--b { background: linear-gradient(135deg, var(--line-2), var(--ink-3)); }
.abt-av--c { background: linear-gradient(135deg, var(--accent-soft), var(--accent-ink)); }
.abt-av--d { background: linear-gradient(135deg, #C9DDD5, #3B625A); }
.abt-team-card__name {
  font-family: 'Fraunces', serif;
  font-weight: 500;
  font-size: 1.1rem;
  letter-spacing: -.01em;
  color: var(--ink);
  margin: 0;
}
.abt-team-card__role {
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--accent);
  font-weight: 500;
}
.abt-team-card__bio {
  color: var(--ink-3);
  font-size: .91rem;
  line-height: 1.55;
  margin: 0;
}
@media (max-width: 900px) {
  .abt-team-grid {
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }
}
@media (max-width: 480px) {
  .abt-team-grid {
    grid-template-columns: 1fr;
  }
}
/* section: about.cta-pair — twin CTA cards */
.abt-cta-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.abt-cta-card {
  background: var(--oat);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 2.4rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  position: relative;
  overflow: hidden;
  transition: box-shadow .4s var(--ease);
}
.abt-cta-card:hover {
  box-shadow: var(--shadow);
}
.abt-cta-card--dark {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}
.abt-cta-card__pre {
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--ink-4);
}
.abt-cta-card--dark .abt-cta-card__pre {
  color: #A8997F;
}
.abt-cta-card__title {
  font-family: 'Fraunces', serif;
  font-weight: 500;
  font-size: clamp(1.5rem, 2.2vw, 2rem);
  letter-spacing: -.02em;
  line-height: 1.1;
  margin: 0;
  color: var(--ink);
}
.abt-cta-card--dark .abt-cta-card__title {
  color: var(--bg);
}
.abt-cta-card__title em {
  font-style: italic;
  color: var(--accent);
}
.abt-cta-card--dark .abt-cta-card__title em {
  color: var(--glow);
}
.abt-cta-card p {
  color: var(--ink-3);
  font-size: .95rem;
  margin: 0;
  max-width: 38ch;
  line-height: 1.6;
}
.abt-cta-card--dark p {
  color: var(--line-2);
}
.abt-cta-card__blob {
  position: absolute;
  right: -60px;
  bottom: -60px;
  width: 220px;
  height: 220px;
  border-radius: 99px;
  background: radial-gradient(circle, rgba(192,78,54,.1), rgba(192,78,54,0) 70%);
  pointer-events: none;
}
.abt-cta-card--dark .abt-cta-card__blob {
  background: radial-gradient(circle, rgba(232,184,156,.18), rgba(232,184,156,0) 70%);
}
@media (max-width: 700px) {
  .abt-cta-pair {
    grid-template-columns: 1fr;
  }
}
/* De-inlined from markup (handoff normalisation) */
.abt-cta-card .btn{align-self:flex-start}
.abt-cta-card--dark .btn-ghost{border-color:rgba(228,217,197,.35);color:var(--bg)}

/* ── 6. Trang services.html — khối <style> của chính trang ──────────────────── */
/* section: services.how-it-works ----------------------------------------- */
.srv-steps{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
  margin-top:48px;
}
.srv-step{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:1.7rem 1.5rem 1.4rem;
  box-shadow:var(--shadow-card);
  display:flex;
  flex-direction:column;
  gap:.7rem;
  position:relative;
}
.srv-step__num{
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:99px;
  background:var(--oat);border:1px solid var(--line);
  font-family:'Fraunces',serif;font-size:1rem;color:var(--accent);font-weight:500;
  flex-shrink:0;
}
.srv-step h3{
  font-family:'Fraunces',serif;font-weight:500;font-size:1.15rem;
  letter-spacing:-.01em;margin:0;color:var(--ink);line-height:1.2;
}
.srv-step p{color:var(--ink-3);font-size:.93rem;margin:0;line-height:1.55}
.srv-step__connector{
  display:none; /* decorative; visible on wide */
}
@media (min-width:761px){
  .srv-steps{position:relative}
  .srv-steps::before{
    content:"";position:absolute;
    top:calc(1.7rem + 17px);left:calc(33.33% - 18px);
    width:calc(33.33% + 36px);height:1px;
    border-top:1px dashed var(--line-2);
    pointer-events:none;
  }
}
@media (max-width:760px){.srv-steps{grid-template-columns:1fr;gap:12px}}
/* section: services.studio-band ------------------------------------------ */
.srv-studio{
  display:grid;
  grid-template-columns:5fr 6fr;
  gap:64px;
  align-items:center;
}
.srv-studio__img{
  position:relative;
  border-radius:var(--radius-lg);
  overflow:hidden;
  aspect-ratio:4/3;
  background:var(--oat);
  box-shadow:var(--shadow);
}
.srv-studio__img .bg{
  position:absolute;inset:0;
  background-size:cover;background-position:center;
  transition:transform 1.2s var(--ease);
}
.srv-studio__img:hover .bg{transform:scale(1.04)}
.srv-studio__tag{
  position:absolute;bottom:1.1rem;left:1.1rem;
  background:rgba(251,246,238,.93);backdrop-filter:blur(6px);
  border:1px solid var(--line);border-radius:999px;
  padding:.38rem .75rem;font-size:.76rem;color:var(--ink-2);
  display:inline-flex;align-items:center;gap:.4rem;
}
.srv-studio__copy{display:flex;flex-direction:column;gap:1.2rem}
.srv-studio__copy h2{
  font-family:'Fraunces',serif;font-weight:500;
  font-size:clamp(1.85rem,2.8vw,2.5rem);
  line-height:1.05;letter-spacing:-.02em;margin:0;color:var(--ink);
}
.srv-studio__copy h2 em{font-style:italic;color:var(--accent)}
.srv-studio__copy p{color:var(--ink-3);font-size:.98rem;max-width:48ch;margin:0;line-height:1.65}
.srv-studio__facts{
  display:flex;gap:2rem;border-top:1px solid var(--line);
  padding-top:1.2rem;flex-wrap:wrap;
}
.srv-studio__facts .fact .n{
  font-family:'Fraunces',serif;font-size:1.5rem;font-weight:500;
  color:var(--ink);letter-spacing:-.02em;
}
.srv-studio__facts .fact .l{
  font-size:.76rem;color:var(--ink-4);
  text-transform:uppercase;letter-spacing:.06em;margin-top:.1rem;
}
@media (max-width:860px){
  .srv-studio{grid-template-columns:1fr;gap:32px}
}
/* section: services.cta --------------------------------------------------  */
.srv-cta{
  background:var(--ink);color:var(--bg);
  border-radius:var(--radius-lg);
  padding:64px 56px;
  display:grid;grid-template-columns:6fr 5fr;
  gap:48px;align-items:center;
  position:relative;overflow:hidden;
}
.srv-cta::before{
  content:"";position:absolute;
  left:-140px;bottom:-140px;width:380px;height:380px;border-radius:99px;
  background:radial-gradient(circle at 70% 70%, rgba(192,78,54,.28), rgba(192,78,54,0) 60%);
  pointer-events:none;
}
.srv-cta__head{
  font-family:'Fraunces',serif;font-weight:400;
  font-size:clamp(1.85rem,2.8vw,2.5rem);
  line-height:1.04;letter-spacing:-.02em;margin:0 0 .7rem;color:var(--bg);
}
.srv-cta__head em{font-style:italic;color:var(--glow)}
.srv-cta__desc{color:var(--line-2);font-size:.97rem;max-width:44ch;margin:0;line-height:1.6}
.srv-cta__action{display:flex;flex-direction:column;gap:1.1rem;align-items:flex-start}
.srv-cta__note{font-size:.82rem;color:#A8997F;display:flex;align-items:center;gap:.5rem}
@media (max-width:860px){
  .srv-cta{grid-template-columns:1fr;padding:40px 28px;gap:28px}
}
/* De-inlined from markup (handoff normalisation) */
.srv-steps-section{padding-top:64px;padding-bottom:0}
.srv-studio__cta{margin-top:1rem}
.srv-cta__action .btn-ghost{color:var(--line-2);border-color:rgba(228,217,197,.25)}

/* ── 6. Trang contact.html — khối <style> của chính trang ──────────────────── */
/* ── ctc- prefix: contact page-unique pieces ── */
/* Info card strip */
.ctc-info-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.25rem 1.3rem;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  box-shadow: var(--shadow-card);
  margin-bottom: 14px;
  transition: transform .35s var(--ease);
}
.ctc-info-card:last-child { margin-bottom: 0; }
.ctc-info-card:hover { transform: translateY(-2px); }
.ctc-info-card__icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--accent-soft);
  color: var(--accent-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ctc-info-card__label {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--ink-4);
  margin-bottom: .22rem;
}
.ctc-info-card__value {
  font-size: .97rem;
  color: var(--ink);
  font-weight: 500;
}
.ctc-info-card__sub {
  font-size: .82rem;
  color: var(--ink-3);
  margin-top: .15rem;
}
/* Socials row below info cards */
.ctc-socials-row {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-top: 24px;
}
.ctc-socials-row__label {
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--ink-4);
  margin-right: .4rem;
}
/* Form card */
.ctc-form-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 2rem 2.2rem;
  box-shadow: var(--shadow-card);
}
@media (max-width: 760px) {
  .ctc-form-card { padding: 1.5rem 1.25rem; }
}
.ctc-form-card__heading {
  font-family: 'Fraunces', serif;
  font-weight: 500;
  font-size: 1.45rem;
  letter-spacing: -.015em;
  margin: 0 0 .45rem;
  color: var(--ink);
}
.ctc-form-card__sub {
  font-size: .9rem;
  color: var(--ink-3);
  margin: 0 0 1.5rem;
}
/* Consent checkbox row */
.ctc-consent {
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  margin-bottom: 1.2rem;
  font-size: .85rem;
  color: var(--ink-3);
  line-height: 1.45;
}
.ctc-consent input[type="checkbox"] {
  margin-top: .2rem;
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
  flex-shrink: 0;
  cursor: pointer;
}
.ctc-consent a {
  color: var(--accent-ink);
  border-bottom: 1px solid var(--line-2);
}
.ctc-consent a:hover { border-color: var(--accent); }
/* Map placeholder band */
.ctc-map-band {
  background: var(--bg-soft);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 72px 0;
}
.ctc-map {
  border-radius: var(--radius-lg);
  border: 1.5px dashed var(--line-2);
  background: var(--oat);
  min-height: 320px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  position: relative;
  overflow: hidden;
}
.ctc-map::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    -45deg,
    rgba(228,217,197,.18) 0px,
    rgba(228,217,197,.18) 1px,
    transparent 1px,
    transparent 18px
  );
  pointer-events: none;
}
.ctc-map__icon {
  width: 54px;
  height: 54px;
  border-radius: 99px;
  background: var(--ink);
  color: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px -8px rgba(26,21,18,.3);
  position: relative;
  z-index: 1;
}
.ctc-map__label {
  text-align: center;
  position: relative;
  z-index: 1;
}
.ctc-map__label strong {
  font-family: 'Fraunces', serif;
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--ink);
  display: block;
  margin-bottom: .25rem;
}
.ctc-map__label span {
  font-size: .88rem;
  color: var(--ink-3);
}
/* Hours + FAQ note band */
.ctc-note-band {
  padding: 56px 0 0;
}
.ctc-hours-faq {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: start;
}
@media (max-width: 700px) {
  .ctc-hours-faq { grid-template-columns: 1fr; gap: 24px; }
}
.ctc-hours-table {
  width: 100%;
  border-collapse: collapse;
}
.ctc-hours-table tr {
  border-bottom: 1px solid var(--line);
}
.ctc-hours-table tr:last-child { border-bottom: none; }
.ctc-hours-table td {
  padding: .6rem 0;
  font-size: .93rem;
  color: var(--ink-2);
}
.ctc-hours-table td:last-child {
  text-align: right;
  color: var(--ink-3);
}
.ctc-hours-table .ctc-today {
  font-weight: 500;
  color: var(--accent-ink);
}
.ctc-hours-table .ctc-today td:last-child {
  color: var(--accent-ink);
}
/* Two-column contact layout */
.ctc-contact-cols {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 48px;
  align-items: start;
}
@media (max-width: 860px) {
  .ctc-contact-cols { grid-template-columns: 1fr; gap: 32px; }
}
/* De-inlined from markup (handoff normalisation) */
.ctc-submit{width:100%;justify-content:center}
.ctc-map-band .section-head{margin-bottom:32px}
.ctc-hours-faq .pre{margin-bottom:.7rem}
.ctc-hours-note{font-size:.8rem;color:var(--ink-4);margin:.9rem 0 0}
.link-accent{color:var(--accent-ink)}


/* ====================================================================
   B2 — bổ sung khi dựng dynamic (CPT service + blog + TB)
   ==================================================================== */

/* ===== port bổ sung từ <style> của blog.html (D-24) — 3 rule ===== */
.blg-featured-section { padding-bottom:32px }
.blg-list-section { padding-top:16px }
.pagination .dots { display:inline-flex;align-items:center;padding:0 .4rem;color:var(--ink-4);border:none;min-width:auto }

/* ===== port bổ sung từ <style> của blog-detail.html (D-24) — 7 rule ===== */
.bld-content-section { padding-top:36px }
.bld-page-hero h1 { font-family:'Fraunces',serif;font-weight:500;font-size:clamp(1.9rem,4vw,3rem);line-height:1.06;letter-spacing:-.025em;margin:0 0 .4rem;color:var(--ink);max-width:22ch }
.bld-page-hero h1 em { font-style:italic;color:var(--accent) }
.bld-page-hero .chips { margin-bottom:.9rem }
.sidebar-box--soft { background:var(--bg-soft) }
.sidebar-box--soft p { font-size:.88rem;color:var(--ink-3);margin:0 0 .9rem }
.sidebar-box--soft .btn { width:100%;justify-content:center }

/* ===== port bổ sung từ <style> của service-detail.html (D-24) — 26 rule ===== */
.svd-gallery__item:first-child { grid-row: span 1; aspect-ratio: 3 / 4; }
.svd-hero h1 { font-family:'Fraunces',serif;font-weight:500;font-size:clamp(2.2rem,4.2vw,3.3rem);line-height:1.02;letter-spacing:-.025em;margin:.9rem 0 .5rem;color:var(--ink) }
.svd-hero h1 em { font-style:italic;color:var(--accent) }
.svd-hero__lede { font-size:1.06rem;color:var(--ink-3);max-width:46ch;margin:0;line-height:1.62 }
.section-head h2.svd-h2 { font-family:'Fraunces',serif;font-weight:500;font-size:clamp(1.8rem,3vw,2.6rem);line-height:1.04;letter-spacing:-.02em;margin:.5rem 0 0;color:var(--ink) }
.svd-overview { padding-bottom:56px }
.svd-included-band { background:var(--bg-soft);padding-top:64px;padding-bottom:64px }
.svd-pricing { padding-top:72px;padding-bottom:72px }
.svd-process { background:var(--bg-soft);padding-top:72px;padding-bottom:72px }
.svd-faq { padding-top:72px;padding-bottom:72px }
.svd-gallery-band { padding-top:56px;padding-bottom:72px }
.svd-gallery-band .pre { font-size:.78rem;text-transform:uppercase;letter-spacing:.12em;color:var(--ink-4);margin-bottom:1.4rem }
.svd-related { background:var(--bg-soft);padding-top:64px;padding-bottom:72px }
.svd-cta-section { padding-top:56px;padding-bottom:80px }
/* Nút ghost trên band tối: rule nguồn nhắm CHÍNH phần tử nút, nhưng `.btn-ghost` là
 * `css_classes` nên render trên WRAPPER `.elementor-widget-button` — phải bắc cầu xuống
 * `.elementor-button` như khối 4.14 đã làm cho `.srv-cta__action`. Thiếu cầu này thì
 * wrapper đúng màu mà CHỮ vẫn ink → "Ask a question" chìm trên nền tối (đo: ratio 1.24). */
/* WRAPPER phải TRONG SUỐT — tô nền ở đây sinh một hộp CHỮ NHẬT xám sau viên pill
 * (wrapper không có border-radius của kit). Nền + viền + bo góc thuộc về chính nút. */
.svd-cta-band .btn-ghost { background: transparent; color: var(--on-dark) }
.svd-cta-band .btn-ghost .elementor-button {
  background-color: rgba(255,255,255,.08);
  border: 1px solid rgba(228,217,197,.25);
  color: var(--on-dark);
}
.svd-cta-band .btn-ghost .elementor-button .elementor-button-text { color: var(--on-dark) }
.svd-cta-band .btn-ghost .elementor-button:hover { background-color: rgba(255,255,255,.14) }
.svd-pkg .btn { width:100%;justify-content:center;border-radius:12px;margin-top:.3rem }
.svd-pkg .svd-pkg__divider--gap { margin-top:.8rem }
.svd-pkg.svd-pkg--featured .svd-pkg__divider--gap { border-color:rgba(228,217,197,.2) }
.accordion--narrow { max-width:72ch }
.sidebar-box--plain li { font-size:.91rem;color:var(--ink-3);padding:.3rem 0;border-bottom:1px solid var(--line) }
.sidebar-box--plain li:last-child { border-bottom:0 }
.sidebar-box--accent { background:var(--accent-soft);border-color:rgba(192,78,54,.2) }
.sidebar-box--accent h4 { color:var(--accent-ink) }
.sidebar-box--accent p { font-size:.9rem;color:var(--ink-2);margin:.2rem 0 .9rem;line-height:1.5 }
.sidebar-box--accent .btn { width:100%;justify-content:center;border-radius:12px }
.link-accent-u { color:var(--accent-ink);border-bottom:1px solid var(--line-2) }

/* ── 8. Icon svc-card động theo ACF `service_icon` (B2) ────────────────
 *    `selected_icon` của widget icon KHÔNG nhận dynamic tag (icon.php:116-126, không khai
 *    'dynamic'), mà 6 service dùng CHUNG 1 loop item → icon phải đến từ dữ liệu.
 *    Cách đi: container icon bind `css_classes` (CÓ dynamic — container.php:1794) về giá trị
 *    ACF `service_icon` = ĐÚNG 1 class modifier, rồi vẽ bằng CSS mask data-URI với ĐÚNG path
 *    SVG của nguồn (index.html §4) — cùng kỹ thuật map §12 đã chốt cho `.btn .arrow`, trung
 *    thành hơn phương án FA xấp xỉ.
 *    Vì dynamic tag THAY THẾ toàn bộ giá trị css_classes, class nền `.svc-card__icon` không
 *    còn trên phần tử → hộp icon style qua attribute selector của chính modifier.
 *    `currentColor` ghim thành đen: màu không kế thừa vào tài liệu mask; màu thật là
 *    background-color của ::before. */
[class*="svc-icon--"] {
  width: 46px; height: 46px; border-radius: 14px; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent-soft); margin-bottom: .4rem;
}
/* SVG trong data-URI BẮT BUỘC có xmlns — thiếu thì trình duyệt từ chối ảnh, mask không tải
 * được và phần tử bị che HOÀN TOÀN (ô icon rỗng, không báo lỗi ở đâu cả). Khối `.btn .arrow`
 * ở trên dùng dạng `;utf8,<svg xmlns=…>` nên vẫn vẽ đúng — đó là bản đối chứng. */
[class*="svc-icon--"]::before {
  content: ""; width: 22px; height: 22px; display: block;
  background-color: var(--accent-ink);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center;   mask-position: center;
  -webkit-mask-size: contain;      mask-size: contain;
}
.svc-icon--full-groom::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='22'%20height='22'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.6'%3E%3Cpath%20d='M4%2014s1-2%208-2%208%202%208%202'/%3E%3Cpath%20d='M12%2012V4M9%206l3-2%203%202'/%3E%3Ccircle%20cx='12'%20cy='18'%20r='3'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='22'%20height='22'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.6'%3E%3Cpath%20d='M4%2014s1-2%208-2%208%202%208%202'/%3E%3Cpath%20d='M12%2012V4M9%206l3-2%203%202'/%3E%3Ccircle%20cx='12'%20cy='18'%20r='3'/%3E%3C/svg%3E");
}
.svc-icon--puppy::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='22'%20height='22'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.6'%3E%3Cpath%20d='M12%203c4%200%207%203%207%207%200%205-7%2011-7%2011S5%2015%205%2010c0-4%203-7%207-7z'/%3E%3Ccircle%20cx='12'%20cy='10'%20r='2.4'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='22'%20height='22'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.6'%3E%3Cpath%20d='M12%203c4%200%207%203%207%207%200%205-7%2011-7%2011S5%2015%205%2010c0-4%203-7%207-7z'/%3E%3Ccircle%20cx='12'%20cy='10'%20r='2.4'/%3E%3C/svg%3E");
}
.svc-icon--deshed::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='22'%20height='22'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.6'%3E%3Cpath%20d='M3%2012h4l2-7%204%2014%202-7h4'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='22'%20height='22'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.6'%3E%3Cpath%20d='M3%2012h4l2-7%204%2014%202-7h4'/%3E%3C/svg%3E");
}
.svc-icon--spa::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='22'%20height='22'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.6'%3E%3Cpath%20d='M7%2016a5%205%200%200%201%2010%200'/%3E%3Cpath%20d='M12%203v4M6%207l2%202M18%207l-2%202'/%3E%3Cpath%20d='M5%2020h14'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='22'%20height='22'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.6'%3E%3Cpath%20d='M7%2016a5%205%200%200%201%2010%200'/%3E%3Cpath%20d='M12%203v4M6%207l2%202M18%207l-2%202'/%3E%3Cpath%20d='M5%2020h14'/%3E%3C/svg%3E");
}
.svc-icon--nails::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='22'%20height='22'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.6'%3E%3Cpath%20d='M9%2011V4a1%201%200%200%201%202%200v6M11%2011V3a1%201%200%200%201%202%200v8M13%2011V5a1%201%200%200%201%202%200v7'/%3E%3Cpath%20d='M15%2011a3%203%200%200%201-3%208c-3%200-5-2-5-5v-3z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='22'%20height='22'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.6'%3E%3Cpath%20d='M9%2011V4a1%201%200%200%201%202%200v6M11%2011V3a1%201%200%200%201%202%200v8M13%2011V5a1%201%200%200%201%202%200v7'/%3E%3Cpath%20d='M15%2011a3%203%200%200%201-3%208c-3%200-5-2-5-5v-3z'/%3E%3C/svg%3E");
}
.svc-icon--face::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='22'%20height='22'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.6'%3E%3Ccircle%20cx='12'%20cy='12'%20r='9'/%3E%3Cpath%20d='M9%2010h.01M15%2010h.01M9%2015c1%201%205%201%206%200'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='22'%20height='22'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.6'%3E%3Ccircle%20cx='12'%20cy='12'%20r='9'/%3E%3Cpath%20d='M9%2010h.01M15%2010h.01M9%2015c1%201%205%201%206%200'/%3E%3C/svg%3E");
}

/* ── 9. Loop Grid trong ô lưới đã dựng sẵn ở B1 ───────────────────────
 *    `.svc-grid` (nguồn) là grid 3 cột; widget loop-grid lại tự sinh lưới riêng
 *    (.elementor-loop-container.elementor-grid). Nếu để widget làm 1 ô của lưới cha thì
 *    6 thẻ bị nhét vào 1/3 chiều ngang → cho widget span hết hàng, lưới thật do widget lo
 *    (columns/gap đặt trong SPEC — layout thuộc widget settings, đúng D-28). */
.svc-grid > .elementor-widget-loop-grid,
.blg-grid > .elementor-widget-loop-grid,
.bld-cards > .elementor-widget-loop-grid { grid-column: 1 / -1; }

/* ── 10. Loop item svc-card: trả phần tử của widget về đúng kích thước nguồn ──
 *    Đo cặp src↔build @390 từng con của .svc-card:
 *      icon 46=46 · h3 32→21 (-11) · p 93→99 (+6) · meta 43→40 (-3) · link 22→42 (+20)
 *    (a) `.svc-card__link` nguồn là <a> chữ trơn + mũi tên, nhưng loop item dùng widget button
 *        → bỏ padding/nền của .elementor-button để về đúng dáng link.
 *    (b) Elementor frontend đặt `.elementor-heading-title{line-height:1}` và CSS heading của
 *        widget (0,2,0) thắng rule nguồn `.svc-card h3` (0,1,1) → phải nâng đủ class (D-27).
 *        line-height phải ghi SỐ 1.55 (ratio của body nguồn), KHÔNG dùng `inherit`: inherit
 *        copy giá trị px ĐÃ TÍNH của cha (16px×1.55=24.8px) chứ không kế thừa tỉ lệ,
 *        nên h3 20.8px bị 24.8px thay vì 32.24px (đo được).
 *    Đủ 3 class theo D-27 vì widget button/heading có CSS nạp sau bridge. */
.svc-card .svc-card__link .elementor-button {
  padding: 0; background: transparent; border-radius: 0;
  font: inherit; color: inherit; fill: currentColor;
}
.svc-card .elementor-widget-theme-post-title .elementor-heading-title {
  font-family: 'Fraunces', serif; font-weight: 500; font-size: 1.3rem;
  letter-spacing: -.01em; line-height: 1.55; margin: 0; color: var(--ink);
}
.svc-card .elementor-widget-theme-post-excerpt p:last-child { margin-bottom: 0; }

/* ── 11. Thẻ "More from the Journal" (single-post) dùng CHUNG loop item post card ──
 *    map §5 chỉ định nghĩa 3 loop item (service card · post card · featured post), nên khối
 *    related của blog-detail tái dùng post card. Nhưng `.bld-card` của nguồn GỌN HƠN
 *    `.blg-card`: chỉ ảnh + category + tiêu đề + ngày — không có excerpt, không có nút
 *    "Read more" (blog-detail.html:568-584). Ẩn 2 phần đó trong đúng ngữ cảnh `.bld-cards`
 *    thay vì dựng thêm loop item thứ 4 (sẽ là thay đổi ô hợp đồng §5). */
.bld-cards .elementor-widget-theme-post-excerpt,
.bld-cards .blg-card__link { display: none; }

/* ── 12. Gallery service-detail: dịch layout nguồn sang markup của widget ─────
 *    Nguồn: `.svd-gallery` = grid 4 cột gap 14px, mỗi `.svd-gallery__item` aspect-ratio 3/4,
 *    bo góc. Widget `image-gallery` lại in ra markup [gallery] của WP
 *    (.elementor-image-gallery > .gallery.gallery-columns-4 > figure.gallery-item >
 *    .gallery-icon > a > img) nên rule nhắm `.svd-gallery__item` không chạm được gì
 *    → thiếu 322px chiều cao so nguồn (đo @1180: 530 → 208).
 *    Elementor đã tắt style [gallery] mặc định của WP (không có khối #gallery-N inline)
 *    nên rule theo class thắng bình thường, không cần !important.
 *    ≥3 class theo D-27 vì widget-image-gallery có CSS nạp sau bridge.
 *    LƯU Ý specificity: rule port nguyên văn `.svd-gallery{display:grid;grid-template-columns:
 *    repeat(4,1fr)}` rơi lên chính WRAPPER của widget (wrapper mang class `svd-gallery`),
 *    biến `.elementor-image-gallery` — con DUY NHẤT — thành 1 ô của lưới 4 cột nên chỉ rộng
 *    1/4 (đo: 271px trong wrapper 1124px). Phải trả wrapper về block rồi dựng lưới ở trong. */
.svd-gallery.elementor-widget-image-gallery { display: block; }
.svd-gallery .elementor-image-gallery { width: 100%; }
.svd-gallery .elementor-image-gallery .gallery {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 0;
}
.svd-gallery .elementor-image-gallery .gallery-item {
  width: auto; max-width: none; margin: 0; float: none; padding: 0;
}
.svd-gallery .elementor-image-gallery .gallery-icon {
  border-radius: var(--radius); overflow: hidden; aspect-ratio: 3 / 4;
  background: var(--oat); display: block; margin: 0;
}
.svd-gallery .elementor-image-gallery .gallery-icon img {
  width: 100%; height: 100%; object-fit: cover; border: 0; padding: 0;
  transition: transform 1.1s var(--ease);
}
.svd-gallery .elementor-image-gallery .gallery-item:hover .gallery-icon img { transform: scale(1.05); }
@media (max-width: 860px) {
  .svd-gallery .elementor-image-gallery .gallery { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .svd-gallery .elementor-image-gallery .gallery { grid-template-columns: 1fr 1fr; gap: 10px; }
}

/* ====================================================================
   B3 — bổ sung khi dựng WooCommerce + widget curlpup-size-finder
   ==================================================================== */

/* ===== port bổ sung từ <style> của shop.html (D-24) — 21 rule ===== */
.shp-finder-section { padding-top:8px;scroll-margin-top:100px }
.shp-finder { display:grid;grid-template-columns:7fr 5fr;gap:32px;align-items:stretch }
.shp-finder__form { background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:28px;box-shadow:var(--shadow-card) }
.shp-finder__form .form-field { margin-bottom:1.1rem }
.shp-finder__opt { font-weight:400;color:var(--ink-4);margin-left:.35rem }
.shp-finder__help { font-size:.84rem;color:var(--ink-3);margin:-.2rem 0 1.2rem }
.shp-finder__result { background:var(--oat);border-radius:var(--radius-lg);padding:28px;display:grid;gap:.6rem;align-content:start }
.shp-finder__result[hidden] { display:none }
.shp-finder__result.is-error { background:var(--accent-soft) }
.shp-finder__size { font-family:'Fraunces',serif;font-weight:500;font-size:clamp(3rem,7vw,5.5rem);line-height:.95;letter-spacing:-.03em }
.shp-finder__note { color:var(--ink-2);margin:0 0 .6rem }
.shp-finder__result .btn { justify-self:start }
.shp-finder__chart-wrap { margin-top:32px;overflow-x:auto }
.shp-finder__chart { width:100%;border-collapse:collapse;font-size:.92rem }
.shp-finder__chart caption { text-align:left;font-size:.82rem;color:var(--ink-4);padding:0 0 .8rem }
.shp-finder__chart th,.shp-finder__chart td { text-align:left;padding:.75rem .9rem;border-bottom:1px solid var(--line);white-space:nowrap }
.shp-finder__chart thead th { font-size:.76rem;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-4);font-weight:500 }
.shp-finder__chart tbody th { font-family:'Fraunces',serif;font-size:1.15rem;font-weight:500 }
.shp-finder__chart tr.is-picked th,.shp-finder__chart tr.is-picked td { background:var(--accent-soft) }
.shp-archive { padding-top:36px;padding-bottom:80px }
.product-card__badge--dark { background:var(--ink) }
@media (max-width:900px){ .shp-finder{grid-template-columns:1fr} }

/* ===== port bổ sung từ <style> của product-detail.html (D-24) — 5 rule ===== */
.pdp-size-label a:hover { text-decoration-color: var(--accent); }
.pdp-qty__input::-webkit-inner-spin-button, .pdp-qty__input::-webkit-outer-spin-button { appearance: none; }
.pdp-meta li a:hover { text-decoration: underline; }
.pdp-top-section { padding-top:32px;padding-bottom:0 }
.star-off { opacity:.3 }

/* ===== ADAPTATION Woo: selector nguồn → phần tử THẬT của widget Woo =====
   Nguyên tắc như D-51: rule port nguyên văn rơi lên WRAPPER của widget (wrapper mang class
   `.shop-grid` / `.pdp-*`), nên phải trả wrapper về display:block rồi dựng lại ở phần tử thật
   bên trong (`ul.products`, `li.product`, `.woocommerce-loop-product__*`).
   0 giá trị mới: mọi con số lấy từ rule `.product-card*` / `.pdp-*` đã port ở trên. */

/* (a) lưới sản phẩm — shop archive, related, lưới shop của home ------------- */
.elementor-widget-woocommerce-archive-products.shop-grid,
.elementor-widget-woocommerce-product-related { display:block }
.shop-grid > .elementor-widget-woocommerce-products,
.shop-grid > .elementor-widget-woocommerce-product-related { grid-column:1 / -1 }

/* CHÚ Ý specificity: mọi selector của nhóm này phải CÙNG hạng với nhóm trong @media bên dưới.
   Bản đầu có thêm `.shop-grid .elementor-widget-container > .woocommerce ul.products` (0,4,1) —
   mạnh hơn selector trong media query (0,3,1) nên media query KHÔNG BAO GIỜ thắng, lưới giữ 4 cột
   ở mọi bề ngang (đo: 390px vẫn 4 cột 73.5px). Đã bỏ selector thừa đó. */
.shop-grid .woocommerce ul.products,
.pdp-related .woocommerce ul.products {
  display:grid;grid-template-columns:repeat(4,1fr);gap:18px;
  list-style:none;margin:0;padding:0;float:none;
}
.shop-grid .woocommerce ul.products::before,
.shop-grid .woocommerce ul.products::after,
.pdp-related .woocommerce ul.products::before,
.pdp-related .woocommerce ul.products::after { content:none;display:none }

.shop-grid .woocommerce ul.products li.product,
.pdp-related .woocommerce ul.products li.product {
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  display:flex;flex-direction:column;box-shadow:var(--shadow-card);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease);
  width:auto;margin:0;padding:0;float:none;clear:none;position:relative;
}
.shop-grid .woocommerce ul.products li.product:hover,
.pdp-related .woocommerce ul.products li.product:hover { transform:translateY(-4px);box-shadow:var(--shadow) }

/* thẻ media: link bọc ảnh của Woo == .product-card__media của nguồn */
.shop-grid ul.products li.product .woocommerce-loop-product__link,
.pdp-related ul.products li.product .woocommerce-loop-product__link {
  display:flex;flex-direction:column;gap:.4rem;padding:0 1.05rem 0;color:inherit;
}
.shop-grid ul.products li.product .woocommerce-loop-product__link img,
.pdp-related ul.products li.product .woocommerce-loop-product__link img {
  width:calc(100% + 2.1rem);max-width:none;aspect-ratio:1/1;object-fit:cover;background:var(--oat);
  margin:0 -1.05rem .55rem;height:auto;
  transition:transform 1s var(--ease);
}
.shop-grid ul.products li.product:hover .woocommerce-loop-product__link img { transform:scale(1.05) }

/* badge Sale của Woo == .product-card__badge của nguồn */
.shop-grid ul.products li.product .onsale,
.pdp-related ul.products li.product .onsale {
  position:absolute;top:.7rem;left:.7rem;right:auto;z-index:2;margin:0;min-width:0;min-height:0;
  background:var(--accent);color:#fff;font-size:.68rem;font-weight:600;line-height:1.6;
  letter-spacing:.04em;text-transform:uppercase;padding:.25rem .55rem;border-radius:999px;
}

/* eyebrow danh mục (hook site plugin) == .product-card__cat */
.shop-grid ul.products li.product .product-card__cat,
.pdp-related ul.products li.product .product-card__cat {
  font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-4);order:-1;
}

.shop-grid ul.products li.product .woocommerce-loop-product__title,
.pdp-related ul.products li.product .woocommerce-loop-product__title {
  font-family:'Fraunces',serif;font-weight:500;font-size:1.08rem;line-height:1.2;
  letter-spacing:-.01em;margin:0;padding:0;color:var(--ink);
}
.shop-grid ul.products li.product .star-rating,
.pdp-related ul.products li.product .star-rating {
  color:var(--accent);font-size:.85rem;letter-spacing:.05em;margin:0;float:none;
}

/* hàng chân thẻ: giá + nút — hook site plugin bọc chúng trong .product-card__foot như nguồn */
.shop-grid ul.products li.product .product-card__foot,
.pdp-related ul.products li.product .product-card__foot {
  display:flex;align-items:center;justify-content:space-between;gap:.6rem;
  margin-top:auto;padding:.5rem 1.05rem 1.1rem;
}
.shop-grid ul.products li.product .price,
.pdp-related ul.products li.product .price {
  font-family:'Fraunces',serif;font-size:1.15rem;color:var(--ink);margin:0;padding:0;
}
.shop-grid ul.products li.product .price del,
.pdp-related ul.products li.product .price del {
  color:var(--ink-4);font-size:.92rem;margin-right:.25rem;font-weight:400;opacity:1;
}
.shop-grid ul.products li.product .price ins,
.pdp-related ul.products li.product .price ins { text-decoration:none;color:var(--accent-ink);background:none }

.shop-grid ul.products li.product .button,
.pdp-related ul.products li.product .button {
  align-self:center;margin:0;flex-shrink:0;
  font-size:.82rem;font-weight:500;padding:.5rem .85rem;border-radius:999px;
  background:var(--ink);color:var(--bg);border:0;line-height:1.4;
  transition:background .25s var(--ease);
}
.shop-grid ul.products li.product .button:hover,
.pdp-related ul.products li.product .button:hover { background:var(--accent-ink);color:var(--bg) }

/* hết hàng — nguồn dùng .shp-out-stock, Woo dùng li.product.outofstock */
.shop-grid ul.products li.product.outofstock .woocommerce-loop-product__link img { opacity:.72 }
.shop-grid ul.products li.product.outofstock .button { background:var(--oat);color:var(--ink-4);border:1px solid var(--line) }
.shop-grid ul.products li.product.outofstock .button:hover { background:var(--oat) }

@media (max-width:1000px){ .shop-grid .woocommerce ul.products,.pdp-related .woocommerce ul.products{grid-template-columns:1fr 1fr 1fr} }
@media (max-width:760px){  .shop-grid .woocommerce ul.products,.pdp-related .woocommerce ul.products{grid-template-columns:1fr 1fr} }
@media (max-width:420px){  .shop-grid .woocommerce ul.products,.pdp-related .woocommerce ul.products{grid-template-columns:1fr} }

/* (b) toolbar: result-count + ordering do chính widget archive sinh --------- */
.shp-archive .woocommerce-result-count,
.shp-archive .woocommerce-ordering { font-size:.86rem;color:var(--ink-3);margin:0 0 .9rem }
.shp-archive .woocommerce-ordering { float:none;display:inline-block;margin-left:1rem }
.shp-archive .woocommerce-result-count { display:inline-block }
.shp-archive .woocommerce-ordering select.orderby {
  background:#fff;border:1px solid var(--line-2);border-radius:10px;
  padding:.48rem .75rem;font:inherit;font-size:.86rem;color:var(--ink);outline:0;cursor:pointer;
}
.shp-toolbar__chips { width:100% }

/* (c) sidebar: widget danh mục + lọc giá của Woo --------------------------- */
.sidebar-box ul.product-categories { list-style:none;margin:0;padding:0;display:grid;gap:.55rem }
.sidebar-box ul.product-categories li { display:flex;align-items:center;justify-content:space-between;gap:.6rem;font-size:.92rem }
.sidebar-box ul.product-categories li a { color:var(--ink-2) }
.sidebar-box ul.product-categories li a:hover { color:var(--accent) }
.sidebar-box ul.product-categories .count { color:var(--ink-4);font-size:.84rem }
.sidebar-box ul.product-categories li.current-cat > a { color:var(--accent-ink);font-weight:500 }

.shp-price-box .price_slider_wrapper { display:grid;gap:.8rem }
.shp-price-box .price_slider_amount { display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;font-size:.86rem;color:var(--ink-3) }
.shp-price-box .price_slider_amount input[type="text"] { display:none }
.shp-price-box .price_slider_amount .button {
  font-size:.82rem;font-weight:500;padding:.42rem .8rem;border-radius:999px;
  background:var(--ink);color:var(--bg);border:0;
}
.shp-price-box .price_slider_amount .button:hover { background:var(--accent-ink) }
.shp-price-box .price_slider.ui-slider { background:var(--line-2);border-radius:999px;height:4px;position:relative;margin:.4rem 0 .2rem }
.shp-price-box .price_slider .ui-slider-range { background:var(--accent);height:4px;border-radius:999px;position:absolute }
.shp-price-box .price_slider .ui-slider-handle {
  width:14px;height:14px;border-radius:999px;background:var(--accent);border:2px solid #fff;
  box-shadow:var(--shadow-card);position:absolute;top:-5px;margin-left:-7px;cursor:pointer;
}

/* (d) PDP: nút, tab, gallery của Woo ---------------------------------------
   Class nút THẬT của Woo là `.single_add_to_cart_button.button.alt` (không phải class button
   của Elementor) — rule `.btn-primary` port từ nguồn không chạm tới, phải bám đúng class Woo. */
.pdp-actions .variations_form .variations { margin-bottom:.9rem }
.pdp-actions .variations_form .reset_variations { font-size:.82rem;color:var(--ink-4) }
/* nút Yêu thích do TI chèn ngay sau Add to cart — bỏ nền/viền mặc định, giữ dạng icon+chữ như nguồn */
.pdp-actions .tinv-wraper .tinvwl_add_to_wishlist_button {
  background:none;border:0;color:var(--ink-3);font-size:.88rem;padding:.6rem .2rem;
}
.pdp-actions .tinv-wraper .tinvwl_add_to_wishlist_button:hover { color:var(--accent) }

/* Gallery Woo: markup mang style="opacity:0" chờ flexslider init — không JS thì thành trống */
.pdp-gallery .woocommerce-product-gallery { opacity:1 }
.pdp-gallery .woocommerce-product-gallery__wrapper img { border-radius:var(--radius);background:var(--oat) }
.woocommerce .pdp-gallery div.images.woocommerce-product-gallery ol.flex-control-thumbs { display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:12px 0 0;padding:0;list-style:none }
.woocommerce .pdp-gallery div.images.woocommerce-product-gallery ol.flex-control-thumbs li { width:100%;margin:0;float:none;list-style:none }
/* Woo core `.woocommerce div.product div.images .flex-control-thumbs li{width:25%;float:left}` là (0,4,2);
   chuỗi trên là (0,5,2) nên thắng. Trong grid, `width:25%` tính theo Ô LƯỚI (126px) → thumb co còn 31.5px. */
.woocommerce .pdp-gallery div.images.woocommerce-product-gallery ol.flex-control-thumbs img { width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:12px;background:var(--oat);opacity:.72 }
.woocommerce .pdp-gallery div.images.woocommerce-product-gallery ol.flex-control-thumbs img.flex-active,
.woocommerce .pdp-gallery div.images.woocommerce-product-gallery ol.flex-control-thumbs img:hover { opacity:1 }

/* Tab Woo: nguồn là hàng tab phẳng, mặc định Woo là tab bo hộp có nền */
.woocommerce .pdp-tabs-section .woocommerce-tabs ul.tabs { margin:0 0 1.6rem;padding:0 0 .1rem;border-bottom:1px solid var(--line);display:flex;gap:1.6rem }
.woocommerce .pdp-tabs-section .woocommerce-tabs ul.tabs::before { display:none }
.woocommerce .pdp-tabs-section div.woocommerce-tabs.wc-tabs-wrapper ul.tabs li.description_tab,
.woocommerce .pdp-tabs-section div.woocommerce-tabs.wc-tabs-wrapper ul.tabs li.additional_information_tab,
.woocommerce .pdp-tabs-section div.woocommerce-tabs.wc-tabs-wrapper ul.tabs li.reviews_tab {
  background:none;background-color:transparent;border:0;border-radius:0;margin:0;padding:0;box-shadow:none;
}
.woocommerce .pdp-tabs-section .woocommerce-tabs ul.tabs li::before,
.woocommerce .pdp-tabs-section .woocommerce-tabs ul.tabs li::after { display:none }
.woocommerce .pdp-tabs-section .woocommerce-tabs ul.tabs li a {
  padding:.35rem 0 .7rem;font-weight:500;font-size:.95rem;color:var(--ink-3);
  border-bottom:2px solid transparent;display:block;
}
.woocommerce .pdp-tabs-section .woocommerce-tabs ul.tabs li.active a { color:var(--ink);border-bottom-color:var(--accent) }
.pdp-tabs-section .woocommerce-tabs .panel > h2:first-child { display:none }
.pdp-tabs-section .woocommerce-tabs .shop_attributes { width:100%;border-collapse:collapse;font-size:.95rem;max-width:580px }
.pdp-tabs-section .woocommerce-tabs .shop_attributes tr { border-bottom:1px solid var(--line) }
.pdp-tabs-section .woocommerce-tabs .shop_attributes th,
.pdp-tabs-section .woocommerce-tabs .shop_attributes td { padding:.75rem 0;vertical-align:top;border:0;background:none;font-style:normal }
.pdp-tabs-section .woocommerce-tabs .shop_attributes th {
  color:var(--ink-4);font-size:.84rem;text-transform:uppercase;letter-spacing:.07em;
  width:40%;padding-right:1rem;font-weight:500;text-align:left;
}

/* (e) cart / checkout / my-account — GATED (b): giữ TEMPLATE MẶC ĐỊNH của Woo, chỉ đồng bộ token §4.
   Woo 11 dựng cart+checkout bằng BLOCK (React), my-account bằng shortcode. Không đổi cấu trúc,
   chỉ kéo nút + link + viền về đúng bảng màu; 0 hex cứng. */
.wc-block-components-button:not(.is-link),
.woocommerce-account .woocommerce-Button,
.woocommerce-account button.button {
  background-color:var(--ink);color:var(--bg);border-radius:999px;border:0;
}
.wc-block-components-button:not(.is-link):hover,
.woocommerce-account .woocommerce-Button:hover,
.woocommerce-account button.button:hover { background-color:var(--accent-ink);color:var(--bg) }
.wc-block-components-button:not(.is-link) .wc-block-components-button__text { text-decoration:none }

.wc-block-components-product-name,
.woocommerce-account a { color:var(--accent-ink) }
.wc-block-components-totals-item__label,
.wc-block-components-title { color:var(--ink) }
.wc-block-cart-items__header,
.wc-block-components-totals-wrapper { border-color:var(--line) }
.wc-block-components-sale-badge { background:var(--accent-soft);color:var(--accent-ink);border-radius:999px }

.wc-block-components-text-input input,
.wc-block-components-country-input select,
.wc-block-components-state-input select,
.woocommerce-account input[type="text"],
.woocommerce-account input[type="email"],
.woocommerce-account input[type="password"] {
  border-radius:12px;border:1px solid var(--line-2);background:#fff;color:var(--ink);
}
.woocommerce-account .woocommerce-MyAccount-navigation ul { list-style:none;margin:0;padding:0;display:grid;gap:.5rem }
.woocommerce-account .woocommerce-MyAccount-navigation a { color:var(--ink-2) }
.woocommerce-account .woocommerce-MyAccount-navigation .is-active a { color:var(--accent-ink);font-weight:500 }

/* Thông báo Woo (added to cart / lỗi) — dùng token thay xanh/vàng mặc định */
.woocommerce-message,.woocommerce-info { border-top-color:var(--accent);background:var(--bg-soft);color:var(--ink-2) }
.woocommerce-error { border-top-color:var(--accent-ink);background:var(--accent-soft);color:var(--ink) }

/* ============================================================================
 * A11Y OVERRIDES — phải nằm CUỐI FILE
 * Rule port nguyên văn của nguồn (mục "Marquee trust"…) đứng SAU khối adaptation,
 * nên override cùng hạng specificity viết ở trên KHÔNG BAO GIỜ ăn — kể cả trong
 * @media. Đo được: `@media (prefers-reduced-motion: reduce){.marquee .track{animation:none}}`
 * đặt ở dòng ~350 vẫn cho animation-play-state=running khi bật reduced-motion.
 * Map §11 mục 5 bắt buộc marquee dừng hẳn với người dùng bật giảm chuyển động.
 * ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .marquee .track { animation: none; }
}

/* ============================================================================
 * B4 — ĐỒNG BỘ CSS CHO PHẦN DO PLUGIN SINH (GATED (b) vế "CSS đồng bộ")
 *
 * GATED (b) chốt "Woo mặc định + CSS đồng bộ" cho cart/checkout/account. Vế "mặc định"
 * đã có từ B3; vế "đồng bộ" thiếu — lượt nhìn mắt tươi ở B4 bắt được 6 màu MẶC ĐỊNH của
 * theme/plugin lọt ra và 4 trang không có lề trang (REVIEW.out mục B2/B3/B4).
 * Khối này CHỈ dịch màu/lề về token đã có trong map §4 — 0 giá trị thiết kế mới.
 * Đặt CUỐI FILE vì phải thắng cả rule port lẫn CSS của Woo/TI nạp sau bridge.
 * ========================================================================== */

/* --- B3: lề trang cho 4 trang KHÔNG phải Elementor document ---------------
 * privacy-policy · cart · my-account · wishlist render qua template của Hello nên nội dung
 * nằm trong `.page-content` — không container, không max-width, không gutter: đo được đoạn
 * văn privacy chạy từ x=0 tới x=1180 (sát cả hai mép). `.page-content` chỉ xuất hiện trên
 * đúng 4 trang này (kiểm: 0 hit trên mọi trang có Elementor document) nên hook an toàn.
 * Dùng đúng con số của kit: container_width 1320px, gutter 28px / 18px ≤760. */
.site-main .page-content,
.site-main > .page-header {
  max-width: 1320px;
  margin-inline: auto;
  padding-inline: 28px;
}
@media (max-width: 760px) {
  .site-main .page-content,
  .site-main > .page-header { padding-inline: 18px; }
}
/* Dòng chữ dài đọc mệt: nguồn giới hạn prose 64–72ch (map §4). Áp cho văn bản pháp lý. */
.site-main .page-content > p,
.site-main .page-content > ul,
.site-main .page-content > ol { max-width: 72ch; }

/* --- B2: màu MẶC ĐỊNH của plugin → token map §4 --------------------------- */

/* Nhãn Sale của Woo: mặc định #958E09 (vàng ô liu) → accent như badge của nguồn. */
.woocommerce span.onsale,
.woocommerce ul.products li.product .onsale {
  background: var(--accent); color: var(--bg);
}

/* Nút submit của widget search (404 · trang tìm kiếm · sidebar blog):
 * mặc định Elementor #69727D xám xanh. `widget-search-form.min.css` khai
 * `.elementor-search-form button` = (0,1,1) nên rule 1-class KHÔNG thắng — nâng lên (0,2,1). */
.elementor-search-form button.elementor-search-form__submit {
  background-color: var(--ink); color: var(--bg); border-radius: 10px;
}

/* Thanh trượt lọc giá của Woo (M-05 duyệt LOẠI widget, KHÔNG duyệt màu tím #7F54B3).
 * `woocommerce.css` khai `.woocommerce .widget_price_filter .ui-slider .ui-slider-range` = (0,4,0)
 * → bridge phải ≥ (0,4,0); dùng (0,5,0) cho chắc (cùng bài học D-51 với rule Woo core). */
.woocommerce .widget_price_filter .price_slider_wrapper .ui-slider .ui-slider-range,
.woocommerce .widget_price_filter .price_slider_wrapper .ui-slider .ui-slider-handle {
  background-color: var(--ink);
}
.woocommerce .widget_price_filter .price_slider_wrapper .ui-slider { background-color: var(--line); }
.woocommerce .widget_price_filter .price_slider_wrapper .price_label { color: var(--ink-3); }

/* Nút "chung" của Woo/TI (Return to shop, Read more, View cart…): mặc định #E9E6ED nền
 * xám-tím chữ #515151 → tương phản thấp, lạc bảng màu. Đưa về đúng nút của nguồn. */
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.tinv-wishlist a.button, .tinv-wishlist button.button {
  background-color: var(--ink); color: var(--bg); border-radius: 999px;
}
.woocommerce a.button:hover, .woocommerce button.button:hover,
.tinv-wishlist a.button:hover { background-color: var(--accent-ink); color: var(--bg); }

/* Icon/khối rỗng của TI Wishlist: mặc định xanh dương #1E85BE. */
.tinv-wishlist .tinvwl-empty svg, .tinv-wishlist .tinvwl-empty i,
.tinv-wishlist [class*="tinvwl-icon"] { color: var(--ink-4); fill: currentColor; }

/* Select sắp xếp của Woo dùng control mặc định trình duyệt → đồng bộ với field của kit. */
/* Select sắp xếp: B3 đã style qua `.shp-archive .woocommerce-ordering select.orderby` (0,3,1)
 * nhưng chỉ khớp khi có wrapper `.shp-archive`. Phủ cùng giá trị cho MỌI archive Woo
 * (product-category / product-tag) ở specificity tương đương. */
.woocommerce .woocommerce-ordering select.orderby {
  font: inherit; color: var(--ink); background-color: #fff;
  border: 1px solid var(--line-2); border-radius: 10px; padding: .6rem 2rem .6rem .9rem;
}

/* ============================================================================
 * B4 — 8 MỤC TỒN CỦA 2 LƯỢT REVIEW (đo trong plans/qa/MEASURE-10.out)
 * Toàn bộ là "default của Elementor/WordPress lọt ra" hoặc rule nguồn chưa bắc cầu
 * sang phần tử THẬT của widget. 0 giá trị thiết kế mới — mọi số lấy từ CSS nguồn.
 * ========================================================================== */

/* [10] Footer @390: mỗi cột link lộ một khối TRẮNG.
 *      Đo: 4 phần tử `.elementor-nav-menu--dropdown.elementor-nav-menu__container`
 *      nền rgb(255,255,255) 318×174. Đó là panel dropdown mobile MẶC ĐỊNH của widget
 *      nav-menu; ở footer menu vốn hiển thị dọc nên panel lộ hẳn ra trên nền kem.
 *      Nguồn `.foot .col` không có nền. */
footer .elementor-nav-menu--dropdown,
footer .elementor-nav-menu__container {
  background-color: transparent; box-shadow: none; border: 0;
}

/* [3] Khối bình luận bị CANH GIỮA (đo: text-align:center trên list/item/form).
 *     Nguồn canh TRÁI như mọi văn bản bài viết. */
.comment-list, .comment-list li, .comment-body, .comment-content,
.comment-form, .comment-respond, .comment-meta, .comment-author {
  text-align: left;
}
.comment-respond .comment-reply-title { font-family: 'Fraunces', serif; color: var(--ink) }
.comment-list .comment-author .fn, .comment-list .comment-author a { color: var(--ink) }
.comment-metadata, .comment-metadata a { color: var(--ink-4); font-size: .82rem }

/* [6] Số đếm chuyên mục rơi XUỐNG DÒNG (đo: li cao 56px trong khi a cao 31px).
 *     Nguồn `.sidebar-box li a{display:flex;justify-content:space-between}` — nhắm thẻ <a>,
 *     nhưng widget `wp-widget-categories` in số đếm NGOÀI <a> (text node của <li>)
 *     → phải đưa layout lên chính <li>. */
.sidebar-box .elementor-widget-wp-widget-categories li,
.sidebar-box ul li {
  display: flex; align-items: baseline; justify-content: space-between; gap: .6rem;
}
.sidebar-box .elementor-widget-wp-widget-categories li a { flex: 1 1 auto }

/* [8] Ô search sidebar: đo input 202×50 · nút 50×38 → nút thấp hơn 12px, hở khe.
 *     Nguồn `.blg-search{align-items:stretch}` + nút 38×38 khi input cũng 38.
 *     Cho cả hàng stretch để nút luôn bằng chiều cao input. */
/* B5 sửa lại khối này sau khi ĐO TRÊN CHÍNH NGUỒN (`file://blog.html`) thay vì suy từ bản dựng:
 * input 207×47 nền `--bg-soft` bo 10px · nút 38×38 bo 10px — nút NHỎ HƠN ô nhập và canh giữa,
 * không phải cao bằng. Rule cũ (`align-items:stretch` + `aspect-ratio:1/1`) kéo nút cao 50px. */
.sidebar-box .elementor-search-form,
.sidebar-box .elementor-search-form__container { align-items: center }
/* Control `size` (đặt = 47 để ô nhập cao đúng nguồn) ĐỒNG THỜI sinh `min-width` cho nút submit
 * qua post-CSS của widget (0,3,x) — nên nút phình theo ô nhập. Nguồn muốn hai số KHÁC nhau:
 * ô nhập cao 47, nút 38×38. Nâng lên (0,4,1) bằng class thật `.blg-search`, không !important. */
.sidebar-box .blg-search.elementor-widget-search-form button.elementor-search-form__submit,
.sidebar-box .blg-search .elementor-search-form button.elementor-search-form__submit {
  width: 38px; height: 38px; min-width: 38px; max-width: 38px; flex: 0 0 38px;
  box-sizing: border-box; padding: 0;
  aspect-ratio: auto; align-self: center; border-radius: 10px;
}

/* [5] Checkbox consent nằm DƯỚI chữ (đo: label y=889 h=39 · checkbox y=942, lệch 53px).
 *     Nguồn `.ctc-consent{display:flex;align-items:flex-start;gap:.65rem}`, checkbox bên TRÁI.
 *     Hai thứ phải xử cùng lúc, thiếu một cái là hỏng kiểu khác:
 *       (a) DOM của Pro là <label> TRƯỚC rồi mới tới `.elementor-field-subgroup` chứa checkbox
 *           → cần `order:-1` cho subgroup;
 *       (b) CSS của Pro đặt `.elementor-field-group > label{flex-basis:100%}` và subgroup
 *           chiếm hết chiều ngang → phải khoá lại bề rộng của CẢ HAI, nếu không nhãn bị bóp
 *           thành cột hẹp (đã đo được: nhãn còn 54px, chữ xuống dòng từng từ). */
/* B5 sửa lại khối này: chữ consent chuyển từ `field_label` sang control `acceptance_text`
 * (chỗ DUY NHẤT của Pro nhận HTML — `acceptance.php:69` echo thẳng), vì nguồn có
 * `<a href>Privacy policy</a>` mà `field_label` thì escape sạch nên link biến mất hẳn.
 * DOM đổi theo: nhãn KHÔNG còn là con trực tiếp của field-group nữa mà nằm CÙNG
 * `.elementor-field-option` với checkbox — đúng hình dạng `.ctc-consent` của nguồn.
 * Hàng flex vì thế phải chuyển xuống `.elementor-field-option`; giữ nguyên rule cũ
 * (subgroup `width:auto`) thì subgroup lấy bề rộng max-content 844px và tràn khỏi form
 * (đo được: field-group 565px, subgroup 844px, nhãn chạy quá mép phải). */
.ctc-form-card .elementor-field-type-acceptance { display: block }
.ctc-form-card .elementor-form-fields-wrapper .elementor-field-group.elementor-field-type-acceptance .elementor-field-subgroup {
  flex-basis: 100%; width: 100%; max-width: 100%; min-width: 0; display: block; margin: 0;
}
/* Chính là `.ctc-consent{display:flex;align-items:flex-start;gap:.65rem}` của nguồn. */
.ctc-form-card .elementor-field-type-acceptance .elementor-field-option {
  display: flex; align-items: flex-start; gap: .65rem;
}
.ctc-form-card .elementor-field-type-acceptance input[type="checkbox"] {
  margin-top: .2rem; width: 16px; height: 16px; accent-color: var(--accent); flex-shrink: 0;
}
.ctc-form-card .elementor-field-type-acceptance label {
  flex: 1 1 auto; min-width: 0; max-width: none;
  font-size: .85rem; color: var(--ink-3); line-height: 1.45; margin: 0;
}
.ctc-form-card .elementor-field-type-acceptance a {
  color: var(--accent-ink); border-bottom: 1px solid var(--line-2);
}

/* [9] KHÔNG phải lỗi — đã bác bằng số đo.
 *     Reviewer báo "đáy thẻ so le". Đo lại từng thẻ: [469 | 507,507 | 484,484 | 507,507]
 *     — 469 là thẻ featured (lưới riêng, 1 item); các thẻ CÙNG MỘT HÀNG bằng nhau tuyệt đối.
 *     38px là chênh giữa các HÀNG khác nhau, đúng hành vi grid khi nội dung dài ngắn khác nhau.
 *     Không thêm rule nào (YAGNI). */

/* [4] Phân trang chưa style (đo: .current nền trong suốt, radius 0).
 *     Port nguyên văn rule `.pagination` của nguồn sang phần tử thật `.elementor-pagination`. */
.elementor-pagination { display: flex; gap: .4rem; justify-content: center; margin-top: 48px }
.elementor-pagination .page-numbers {
  min-width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 12px; border: 1px solid var(--line); color: var(--ink-2); font-size: .92rem;
}
.elementor-pagination .page-numbers.current {
  background: var(--ink); color: var(--bg); border-color: var(--ink);
}
.elementor-pagination a.page-numbers:hover { border-color: var(--ink-3) }

/* [1] Form newsletter: nhãn bị kéo VÀO TRONG viên thuốc và nút xuống DÒNG RIÊNG
 *     (đo: label flex-basis 100% nằm trong wrapper; nút y=7429 vs input y=7350, rộng 512px).
 *     Nguồn: `.field{display:grid;gap:6px}` → nhãn NẰM NGOÀI, phía trên;
 *            `.field-row` mới là viên thuốc, chứa input + nút trên CÙNG một hàng.
 *
 *     Khó ở chỗ: DOM của form Pro là
 *        .elementor-form-fields-wrapper > .elementor-field-type-email > (label + input)
 *                                       > .elementor-field-type-submit > button
 *     nhãn và nút nằm ở HAI nhánh khác nhau nên không bọc chung bằng CSS thường được.
 *     Cách đi: `display:contents` cho field-group email để label + input thành con TRỰC TIẾP
 *     của wrapper (lúc đó wrapper mới xếp được input | nút trên một hàng), rồi kéo nhãn
 *     ra NGOÀI viên thuốc bằng position absolute — DOM giữ nguyên, không đụng data. */
.newsletter .elementor-form-fields-wrapper {
  position: relative;
  margin-top: 22px;                      /* chừa chỗ cho nhãn nằm phía trên viên thuốc */
  display: grid;
  grid-template-columns: 1fr auto;        /* input co giãn · nút vừa nội dung */
  align-items: center;
  gap: 10px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(241,231,214,.18);
  border-radius: 14px;
  padding: 6px;
}
.newsletter .elementor-field-group.elementor-field-type-email { display: contents }
.newsletter .elementor-field-group > label {
  position: absolute; top: -20px; left: 0;
  font-size: .78rem; color: #A8997F; letter-spacing: .06em; text-transform: uppercase; margin: 0;
}
/* Đặt vị trí TƯỜNG MINH: auto-placement đẩy nút xuống hàng 2 và co cột 2 về 0px
 * (đo: grid-template-columns = "511.8px 0px", nút y lệch 58px so với input).
 * Chỉ định thẳng ô cho input và nút thì không phụ thuộc thứ tự node nữa. */
.newsletter #form-field-email { grid-column: 1; grid-row: 1; width: 100% }
.newsletter .elementor-field-group.elementor-field-type-submit {
  grid-column: 2; grid-row: 1;
  margin: 0; padding: 0; width: auto; min-width: 0; flex: 0 0 auto;
}
.newsletter .elementor-widget-form .elementor-button { white-space: nowrap; width: auto }

/* [7] "Recent posts" — M-08: đổi từ `wp-widget-recent-posts` (widget lõi WP, KHÔNG có
 *     thumbnail) sang `widget:posts` skin classic. Bắc cầu class nguồn `.blg-recent__*`
 *     sang phần tử THẬT của widget để giữ đúng kích thước thiết kế:
 *       nguồn: thumb 52×52 bo 10px · title Fraunces .9rem clamp 2 dòng · date .74rem ink-4 */
.blg-recent .elementor-posts { display: grid; gap: .85rem }
.blg-recent .elementor-post {
  display: flex; gap: .85rem; align-items: flex-start; margin: 0; padding: 0; border: 0;
}
.blg-recent .elementor-post__thumbnail__link {
  flex: 0 0 52px; width: 52px; height: 52px; margin: 0;
}
.blg-recent .elementor-post__thumbnail {
  width: 52px; height: 52px; border-radius: 10px; overflow: hidden;
  background: var(--oat); padding: 0;
}
.blg-recent .elementor-post__thumbnail img { width: 100%; height: 100%; object-fit: cover }
.blg-recent .elementor-post__text { flex: 1 1 auto; min-width: 0; margin: 0 }
.blg-recent .elementor-post__title {
  font-family: 'Fraunces', serif; font-size: .9rem; font-weight: 500; line-height: 1.3;
  letter-spacing: -.005em; margin: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.blg-recent .elementor-post__title a { color: var(--ink) }
.blg-recent .elementor-post__title a:hover { color: var(--accent-ink) }
.blg-recent .elementor-post__meta-data {
  font-size: .74rem; color: var(--ink-4); margin: .2rem 0 0; padding: 0; border: 0;
}

/* Icon của `icon-list` render inline SVG (do `e_font_icon_svg` bật — env-pin) nhưng path KHÔNG
 * dùng `fill="currentColor"`: computed ra `color: rgb(232,184,156)` đúng token glow mà
 * `fill: rgb(0,0,0)` → dấu ✓ vẽ ĐEN. Trên thẻ giá nền ink thì gần như tàng hình
 * (reviewer mắt tươi bắt được; probe `color` KHÔNG thấy vì màu chữ vẫn đúng).
 * Trả fill về currentColor để icon ăn theo màu đã bind. Chỉ phạm vi icon-list —
 * KHÔNG áp cho SVG nhiều màu như logo (nằm trong text-editor). */
.elementor-icon-list-icon svg,
.elementor-icon-list-icon svg path { fill: currentColor }

/* ============================================================================
 * B5 — 13 LỖI GIAO DIỆN CÒN TỒN CỦA GATE REVIEW (4 lượt soi mắt tươi)
 *
 * Mọi rule dưới đây đều đi sau một phép ĐO (bounding box / computed) đã ghi trong
 * `plans/qa/MEASURE-B5.out`; không có giá trị thiết kế mới — chỉ nối class nguồn
 * sang phần tử THẬT mà widget Woo/WP/Elementor render ra.
 * Đặt cuối file vì phải thắng CSS của Woo và TI Wishlist (nạp sau bridge).
 * ========================================================================== */

/* --- [2] Bình luận: gỡ hộp PLACEHOLDER khỏi widget bình luận THẬT -----------
 * Nguồn `blog-detail.html:626` khai `.bld-comments` là CHỖ CHỜ ("Comments placeholder",
 * kèm chú thích "WP: native comments on convert"): hộp viền đứt, canh giữa, chữ ink-4.
 * Build gắn đúng class đó lên `widget:post-comments` nên toàn bộ khối bình luận thật
 * mặc lấy bộ đồ của chỗ chờ. Class phải GIỮ (map §3 cột "Class bridge") → vô hiệu hoá
 * phần trang trí bằng cùng class + `.elementor-widget` (0,2,0). */
.bld-comments.elementor-widget {
  background: transparent; border: 0; border-radius: 0;
  padding: 0; text-align: left; color: inherit; font-size: inherit;
}
/* Đường kẻ phân cách giữa 2 bình luận: `hello-elementor/assets/css/theme.css` khai
 * `#comments .comment .comment-body{border-block-end:1px solid #ccc}` = (1,2,0) — xám trần,
 * không phải token của site. Rule 2-class (0,2,0) không thắng nổi; nâng đúng hạng bằng
 * chính selector của Hello, không dùng !important (cùng khuôn D-78/D-51). */
#comments .comment .comment-body,
#comments .pingback .comment-body { border-bottom-color: var(--line) }
.comment-list .comment-author .fn { font-weight: 500 }
.comment-list .comment-author .says { color: var(--ink-4); font-weight: 400 }
#comments .title-comments,
#comments .comment-reply-title {
  font-family: 'Fraunces', serif; font-weight: 500; color: var(--ink);
}

/* --- [4][5][6][1] PDP: khối mua hàng --------------------------------------
 * Nguồn dựng 3 khối rời (`.pdp-size-label` → `<select>` → `.pdp-actions`), Woo gói tất cả
 * vào MỘT form: `table.variations` + `.woocommerce-variation-add-to-cart`.
 * Đo trước khi sửa: form rộng 323px trong khung summary 534px · nhãn Size 24px dạt trái,
 * select 293px dạt phải, nửa trái bảng trống · nút Add to cart chỉ chiếm 40% bề ngang. */

/* Container `.pdp-actions` bọc đúng MỘT widget: cho widget chiếm trọn bề ngang,
 * hàng ngang thật nằm bên trong (`.variations_button`). */
.pdp-actions.e-con { align-items: stretch }
.pdp-actions > .elementor-widget-woocommerce-product-add-to-cart { width: 100%; flex: 1 1 100% }
.pdp-actions .elementor-add-to-cart,
.pdp-actions form.cart { width: 100% }

/* Bảng biến thể → khối dọc như nguồn. `<th class="label">` bị ẩn vì hàng nhãn (kèm link
 * "Size guide" mà map §3 yêu cầu) do site plugin in ra ở `woocommerce_before_variations_form`. */
.pdp-actions table.variations,
.pdp-actions .variations tbody,
.pdp-actions .variations tr { display: block; width: 100% }
.pdp-actions .variations th.label { display: none }
.pdp-actions .variations td.value { display: block; width: 100%; padding: 0 }
/* Chính là `.pdp-size-select` của nguồn, chỉ đổi phần tử neo. */
.pdp-actions .variations select {
  width: 100%; background: #fff; border: 1px solid var(--line-2); border-radius: 12px;
  padding: .8rem .9rem; font: inherit; font-size: .95rem; color: var(--ink); outline: 0;
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235C534B' stroke-width='2'><path d='m6 9 6 6 6-6'/></svg>");
  background-repeat: no-repeat; background-position: right .9rem center; background-size: 16px;
  cursor: pointer; transition: border-color .2s var(--ease);
}
.pdp-actions .variations select:focus { border-color: var(--accent) }
/* `font: inherit` của nguồn kéo theo cả line-height của body (đo: 34px → ô cao 59.6px,
 * nguồn ~48px). Khoá line-height để chiều cao ô khớp thiết kế. */
.pdp-actions .variations select { line-height: 1.4 }
.pdp-actions .variations td.value .reset_variations { display: inline-block; margin-top: .4rem }

/* Hàng qty + Add to cart + wishlist — đây mới là `.pdp-actions` của nguồn. */
.pdp-actions .woocommerce-variation-add-to-cart,
.pdp-actions .elementor-add-to-cart--align-left form.cart:not(.variations_form) {
  display: flex; gap: .65rem; align-items: center; flex-wrap: wrap;
}
/* Ô số lượng = `.pdp-qty` của nguồn; 2 nút −/+ do site plugin in ra mang sẵn `.pdp-qty__btn`. */
.pdp-actions .quantity {
  display: inline-flex; align-items: center; border: 1px solid var(--line-2);
  border-radius: 12px; overflow: hidden; background: #fff; flex-shrink: 0;
}
.pdp-actions .quantity input.qty {
  width: 46px; height: 48px; border: 0;
  border-left: 1px solid var(--line); border-right: 1px solid var(--line);
  text-align: center; font: inherit; font-size: .97rem; color: var(--ink);
  background: transparent; outline: 0; border-radius: 0; padding: 0;
}
.pdp-actions .quantity input.qty::-webkit-inner-spin-button,
.pdp-actions .quantity input.qty::-webkit-outer-spin-button { appearance: none; margin: 0 }
.pdp-actions .quantity input.qty[type=number] { -moz-appearance: textfield }
.pdp-actions .quantity .pdp-qty__btn { border: 0; background: transparent; border-radius: 0; padding: 0 }
/* Nút mua chiếm phần còn lại của hàng (nguồn: `.pdp-add-btn{flex:1}`). */
.pdp-actions .single_add_to_cart_button {
  flex: 1 1 auto; justify-content: center; padding: .95rem 1.4rem; font-size: .97rem;
}
/* Nút wishlist = ô vuông 48px bên phải (nguồn `.pdp-wishlist-btn`). */
.pdp-actions .tinv-wraper { flex: 0 0 auto; margin: 0 }
.pdp-actions .tinv-wraper .tinvwl_add_to_wishlist_button {
  width: 48px; height: 48px; border-radius: 12px; border: 1px solid var(--line-2);
  background: #fff; display: inline-flex; align-items: center; justify-content: center;
  padding: 0; margin: 0;
}
.pdp-actions .tinv-wraper .tinvwl_add_to_wishlist_button .tinvwl_add_to_wishlist-text { display: none }
.pdp-actions .tinv-wraper .tinv-wishlist-clear { display: none }

/* Hàng huy hiệu tin cậy: nguồn `.pdp-trust{display:flex;gap:1rem;flex-wrap:wrap}` xếp NGANG,
 * widget `icon-list` render `<ul>` khối nên 3 mục rơi thành 3 dòng (đo: ul 297px, mỗi li 25px). */
.pdp-trust .elementor-icon-list-items {
  display: flex; flex-wrap: wrap; gap: 1rem; width: 100%;
}
.pdp-trust .elementor-icon-list-item { width: auto; margin: 0 }
/* Link danh mục/thẻ trong khối SKU: rule nguồn nhắm `.pdp-meta li a`, nhưng widget
 * `woocommerce-product-meta` render `<span class="detail-content"><a>` — rule chết. */
.pdp-meta .product_meta a { color: var(--accent-ink) }
.pdp-meta .product_meta a:hover { text-decoration: underline }

/* --- [9] Sidebar: 3 cỡ tiêu đề khác nhau trong cùng một cột ----------------
 * Nguồn chỉ có MỘT cỡ: `.sidebar-box h4{font-family:Fraunces;font-size:1.05rem;margin:0 0 .9rem}`.
 * Hộp nào dựng bằng `widget:heading` thì đúng (đo 16.8px), hộp nào là widget lõi WP
 * (`wp-widget-categories`, `wp-widget-woocommerce_price_filter`) thì Elementor bọc tiêu đề
 * bằng `<h5>` không class → rơi về cỡ h5 của kit (đo 13.28px). Neo theo lớp widget. */
.sidebar-box [class*="elementor-widget-wp-widget-"] h5 {
  font-family: 'Fraunces', serif; font-weight: 500; font-size: 1.05rem;
  margin: 0 0 .9rem; color: var(--ink);
}

/* --- [11] Icon xanh dương trong hộp wishlist rỗng --------------------------
 * Phần tử KHÔNG phải svg (nên `.tinvwl-empty svg` của lượt trước trả rỗng): đó là
 * `p.cart-empty.woocommerce-info::before` — icon của FONT WooCommerce, màu mặc định
 * #1E85BE. Cùng họ 6 màu mặc định đã tokenise ở D-78, sót đúng cái này vì nằm ở ::before.
 * Thanh chỉ dẫn của Woo (info/message) dùng chung cơ chế nên trả cả bộ về token. */
.woocommerce-info::before,
.woocommerce-message::before { color: var(--accent) }
.woocommerce-info,
.woocommerce-message { border-top-color: var(--accent) }

/* --- [12] Newsletter: input và nút chưa canh giữa dọc trong "viên thuốc" ---
 * Đo trước sửa: viên thuốc cao 76px, input cao 48px cách mép trên 9px / mép dưới 19px.
 * Hai nguyên nhân, phải xử cả hai:
 *   (a) field HONEYPOT (`.elementor-field-type-text`, cao 0 — M-03/GATED (f)) vẫn là một ô
 *       của lưới nên sinh HÀNG THỨ HAI (đo `grid-template-rows: 52.23px 0px`);
 *   (b) `.elementor-field-group` mang `margin-bottom:10px` của form Pro → cộng thêm chiều cao.
 * Nguồn `.field-row{display:flex;padding:6px}` chỉ có MỘT hàng và cả hai con căng hết
 * chiều cao hàng (`align-items` mặc định = stretch) nên input và nút luôn bằng nhau.
 * Honeypot chỉ ẩn KHỎI LƯỚI — vẫn nằm trong DOM và vẫn được submit, bẫy bot còn nguyên. */
.newsletter .elementor-form-fields-wrapper { align-items: stretch }
.newsletter .elementor-form-fields-wrapper > .elementor-field-type-text { display: none }
.newsletter .elementor-field-group { margin-bottom: 0 }
.newsletter .elementor-widget-form .elementor-form-fields-wrapper input.elementor-field-textual { height: auto }
.newsletter .elementor-field-group.elementor-field-type-submit {
  align-self: stretch; align-items: stretch; height: auto;
}
.newsletter .elementor-widget-form .elementor-button { height: 100%; align-self: stretch }

/* --- [10] Nút wishlist ở header là PILL "Wishlist - 0", nguồn là icon tròn 38px ---
 * Số đếm đã tắt ở control shortcode (`show_counter="0"`); chữ thì PHẢI giữ trong DOM vì
 * template TI lấy chính chuỗi đó làm `aria-label` (`ti-wishlist-product-counter.php:31`)
 * — tắt `show_text` là link mất luôn tên gọi cho trình đọc màn hình.
 * → ẩn phần NHÌN THẤY, giữ phần trợ năng. Icon trái tim do TI vẽ ở `::before`. */
.icon-btn.icon-wishlist .wishlist_products_counter_text {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.icon-btn.icon-wishlist,
.icon-btn.icon-wishlist .elementor-shortcode { width: 38px; flex: 0 0 38px }
.icon-btn.icon-wishlist .wishlist_products_counter {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; color: var(--ink-2); position: relative;
}
.icon-btn.icon-wishlist .wishlist_products_counter:hover { color: var(--ink) }

/* --- [nhẹ] Nút SUBMIT của form mất mũi tên ---------------------------------
 * `.btn` của nguồn được port vào `.elementor-widget-button .elementor-button` nên nút submit
 * của widget FORM (cũng là `<button class="elementor-button">` nhưng nằm ngoài widget button)
 * không nhận `display:inline-flex`. Đo: `display:block` → giả `::after` mang mũi tên thành hộp
 * INLINE nên 14×14 bị bỏ qua và mũi tên không vẽ ra, dù mọi phép kiểm "có mask không" vẫn báo CÓ. */
.btn-arrow .elementor-widget-form .elementor-button,
.btn-arrow button.elementor-button {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
}

/* --- [nhẹ] Tiêu đề cột footer dùng serif ----------------------------------
 * Nguồn `.foot .col h4` KHÔNG khai font-family → thừa hưởng font body (sans).
 * Trên build, kit đặt typography cho mọi h1–h6 nên tiêu đề cột thành Fraunces. */
.foot .col h4 { font-family: inherit }

/* --- [nhẹ] 404 / search: ô tìm kiếm dính sát nút -------------------------
 * Đo: input phải = 1102px, nút trái = 1102px → khe 0. Nguồn dùng `gap:8px` cho
 * cặp input+nút (`.bld-search-row`). Chỉ áp cho skin classic; icon tìm kiếm ở header
 * là skin full_screen, không dính. */
.elementor-search-form--skin-classic .elementor-search-form__container { gap: 8px }

/* ============================================================================
 * B5 · RE-LOOK — 14 finding của lượt soi mắt tươi CUỐI
 *
 * Mỗi rule dưới đây đi sau một phép ĐO ghi trong `plans/qa/MEASURE-RELOOK.out`.
 * Vẫn 0 giá trị thiết kế mới — chỉ nối class nguồn sang phần tử THẬT, hoặc gỡ
 * khai báo mà NỀN TẢNG chèn thêm còn thiết kế nguồn không có.
 * ========================================================================== */

/* --- [11] Vệt sáng trang trí bị LẬT sang trái ------------------------------
 * Nguyên nhân gốc (tìm bằng CDP `CSS.getMatchedStylesForNode`, không phải đoán):
 * `elementor/assets/css/frontend.min.css` khai cho MỌI container V3
 *     .e-con::before { content: var(--background-overlay); position: absolute;
 *                      left: calc(0px - var(--border-left-width)); top: …;
 *                      width: max(100% + …); height: max(100% + …) }
 * — đó là lớp phủ nền của chính Elementor. Rule port từ nguồn chỉ đặt `right` (nguồn là
 * <div> thường, không ai đặt `left`), nên ở đây CẢ HAI trục cùng có mặt và `left` thắng
 * ⇒ hộp gradient dạt hẳn về mép trái. Đo bằng pixel dải trên (trên mọi chữ):
 *     newsletter dựng [74,66,43,23,22,22,22,22,22,33] · nguồn [37,22,…,31,67,69]
 *     cta-band   dựng [70,56,36,22,…,34]              · nguồn [37,22,…,30,59,60]
 *   → sáng nhất cột 1/10 so với 10/10: LẬT GƯƠNG đúng nghĩa.
 * Trả `left` về auto để `right` của nguồn cầm trục ngang. Đã quét cả lớp bug: đúng 3
 * selector trong file này đặt `right` cho ::before mà không đặt `left` — sửa cả ba, kể cả
 * `.abt-stats-band` (trang about, lượt soi không có ảnh vùng nhưng cùng bệnh). */
.newsletter::before,
.svd-cta-band::before,
.abt-stats-band::before { left: auto }

/* --- [10] Breadcrumb dính sát nhãn eyebrow trong page-hero -----------------
 * Nguồn `.breadcrumb{margin-bottom:1rem}`; đo được khe = 0px ở cả /404 lẫn /?s=.
 * `.breadcrumb` là widget text-editor nên `--widgets-spacing:0px` của container V3
 * (env-pin) nuốt mất lề dưới. Trả lại đúng số của nguồn. */
.page-hero .elementor-widget.breadcrumb,
.bld-page-hero .elementor-widget.breadcrumb { margin-bottom: 1rem }

/* --- [12] Editorial: đoạn mô tả dính tiêu đề ------------------------------
 * Nguồn `.editorial .copy{display:flex;flex-direction:column;justify-content:space-between;gap:2rem}`.
 * Container V3 đặt `--widgets-spacing:0` nên khe giữa h2 và <p> đo được 0px (nguồn 32px). */
.editorial .copy { gap: 2rem; justify-content: space-between }
/* h2 và <p> KHÔNG phải con trực tiếp của `.copy` (cả nguồn lẫn build đều có 1 <div> bọc trong).
 * Khe của nguồn đến từ `margin:16px 0` của chính <p> — Elementor reset margin của text-editor
 * về 0 nên phải trả lại bằng gap của container bọc. Đo trên nguồn (file://): gap = 16px. */
.editorial .copy > .e-con { gap: 1rem }

/* --- [1][5][6] PDP: khối mua hàng, vòng hai ------------------------------- */
/* Ba phần tử của hàng mua đo được 50 / 44 / 48px, mép trên 735 / 738 / 736 → so le.
 * Nguồn: ô số lượng và nút wishlist đều 48px + viền 1px = 50, nút mua `flex:1` cao bằng hàng. */
.pdp-actions .woocommerce-variation-add-to-cart,
.pdp-actions .elementor-add-to-cart form.cart { align-items: stretch }
.pdp-actions .single_add_to_cart_button,
.pdp-actions .tinv-wraper .tinvwl_add_to_wishlist_button { height: 50px; align-self: stretch }
.pdp-actions .quantity { height: 50px }
.pdp-actions .quantity input.qty,
.pdp-actions .quantity .pdp-qty__btn { height: 100% }

/* Nút −/+ ăn phải nền nút của kit (`.elementor-kit-6 button{background-color:ink}` = (0,2,0))
 * nên thành 2 ô ĐEN ĐẶC; nguồn `.pdp-qty__btn` là dấu ink-2 trên nền trong suốt. */
.pdp-actions .pdp-add-wrap .cart .quantity button.pdp-qty__btn {
  background-color: transparent; color: var(--ink-2); border: 0; border-radius: 0;
  width: 42px; padding: 0; font-size: 1.15rem;
}
.pdp-actions .pdp-add-wrap .cart .quantity button.pdp-qty__btn:hover {
  background-color: var(--oat); color: var(--ink);
}

/* Nguồn `.pdp-add-btn` có icon TÚI sau chữ. Nút này là <button> của Woo, không phải widget
 * button nên không có control icon → dựng bằng CSS mask, đúng cơ chế map §12 đã duyệt cho
 * mũi tên `.btn-arrow` (data-URI, không upload .svg). */
/* Cùng bẫy D-91: `::after` chỉ vẽ ra khi nút là flex. Post-CSS của chính widget add-to-cart
 * (`.elementor-248 .elementor-element-… .cart button`) đặt display cho nút, nên phải nâng hạng
 * bằng class THẬT có sẵn (`.pdp-add-wrap` + `.cart`), không dùng !important. */
.pdp-actions .pdp-add-wrap .cart button.single_add_to_cart_button {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  /* `min-width:0` là BẮT BUỘC: mặc định flex item không co dưới min-content, mà thêm icon túi
   * làm min-content rộng ra → ở 390px hàng mua tràn 7px (đo scrollWidth 397/390, gate RESP bắt).
   * Nguồn `.pdp-add-btn{flex:1}` co được vì nút chỉ có chữ + svg trong luồng chữ. */
  min-width: 0;
}
.pdp-actions .pdp-add-wrap .cart button.single_add_to_cart_button::after {
  content: ""; flex: 0 0 16px; width: 16px; height: 16px; background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'><path d='M5 7h14l-1.5 11a2 2 0 0 1-2 1.7H8.5a2 2 0 0 1-2-1.7L5 7Z'/><path d='M9 7V5a3 3 0 0 1 6 0v2'/></svg>") center / 16px 16px no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'><path d='M5 7h14l-1.5 11a2 2 0 0 1-2 1.7H8.5a2 2 0 0 1-2-1.7L5 7Z'/><path d='M9 7V5a3 3 0 0 1 6 0v2'/></svg>") center / 16px 16px no-repeat;
}

/* Huy hiệu "Save $10" dính sát giá (đo khe = 0px). Nguồn `.pdp-price{gap:.6rem}` — nhưng
 * `.pdp-price` ở đây là WRAPPER của widget, hàng giá thật là `p.price` bên trong. */
.pdp-price .price { display: flex; align-items: baseline; flex-wrap: wrap; gap: .6rem }

/* Bảng SKU / Category / Tags mất canh cột: giá trị bám ngay sau nhãn nên mỗi dòng bắt đầu
 * một chỗ (đo x = 648 / 682 / 651). Nguồn `.pdp-meta li strong{min-width:90px}`; widget
 * `woocommerce-product-meta` render `<span class="detail-label">` chứ không phải <strong>. */
.pdp-meta .product_meta .detail-container { display: flex; gap: .5rem }
.pdp-meta .product_meta .detail-label { min-width: 90px; flex: 0 0 90px; color: var(--ink-2); font-weight: 500 }

/* --- [3] Thẻ giá featured: nút CTA co nhỏ dạt trái ------------------------
 * Đo: widget rộng 313px (đúng lòng thẻ) nhưng thẻ <a> bên trong chỉ 170px, dạt trái.
 * Nguồn `.svd-pkg .btn` chiếm trọn bề ngang, chữ căn giữa. */
.svd-pkg .elementor-widget-button .elementor-button,
.svd-pkg--featured .elementor-widget-button .elementor-button { width: 100%; justify-content: center }

/* --- [4] Trang giỏ: khối nội dung lệch trái, thẻ đầu bị cắt ---------------
 * Đo: `.page-content` x=190 w=800 (Hello khoá `.site-main` còn 800px ở breakpoint 992–1200),
 * nhưng con `.wp-block-woocommerce-cart.alignwide` lại x=138 w=744 — THÒI RA NGOÀI cha 52px
 * do `.alignwide{margin-inline:-80px}` của `hello-elementor/assets/css/theme.css`.
 * Hai việc: bỏ lề âm alignwide trong vùng này, và trả bề ngang cột nội dung về gutter của kit. */
.page-content .alignwide,
.page-content .alignfull { margin-inline: 0; width: auto; max-width: 100% }
body:not([class*="elementor-page-"]) .site-main:has(.page-content) { max-width: none; width: 100% }

/* --- [13] privacy-policy: cột chữ dạt trái, bỏ trống ~397px bên phải ------
 * D-79 đặt `max-width:72ch` cho đoạn văn pháp lý (map §4 khai prose 64–72ch) nhưng CHỈ áp cho
 * <p>, nên tiêu đề vẫn kéo dài 1124px còn đoạn văn 756px → mép phải rách và trang lệch hẳn.
 * Đưa cả cột prose về MỘT khổ đọc rồi canh giữa: tiêu đề và đoạn văn cùng bề ngang.
 * Khối do plugin sinh (giỏ, tài khoản, wishlist) không phải prose nên miễn trừ. */
/* `ch` giải theo font của phần tử DÙNG nó: đặt `max-width:72ch` lên từng con thì <h2> (Fraunces
 * 29px) vẫn ra ~1124px còn <p> ra 756px — vẫn rách mép phải. Đặt khổ đọc lên CHÍNH cột (font
 * thân) rồi canh giữa: tiêu đề và đoạn văn dùng chung một bề ngang. Trang do plugin sinh
 * (giỏ · tài khoản · wishlist) cần trọn bề ngang nên loại trừ bằng `:has()`.
 * SỬA SAU AUDIT VÒNG 2: danh sách loại trừ liệt kê từng khối một nên BỎ SÓT `checkout` —
 * khối checkout bị bó còn 700px, cột tóm tắt đơn co lại 245px và vỡ bố cục 2 cột. Đổi sang
 * khớp TIỀN TỐ `[class*="wp-block-woocommerce"]` để phủ mọi khối Woo, kể cả khối thêm sau. */
.page-content:not(:has(.woocommerce, [class*="wp-block-woocommerce"], .tinv-wishlist)) {
  max-width: 72ch; margin-inline: auto;
}

/* --- [8] Header: 3 icon không cùng cỡ -------------------------------------
 * Đo: 40×38 / 38×38 / 40×38 và svg 18 / – / 15px. Nguồn `.icon-btn{width:38px;height:38px}`
 * với svg 17×17 cho cả ba. (Viền tròn thì CẢ BA đều đã có — reviewer đọc nhầm mục này.) */
.nav-actions .icon-btn,
.nav-actions .elementor-search-form--skin-full_screen { width: 38px; height: 38px; flex: 0 0 38px }
.nav-actions .icon-btn svg,
.nav-actions .elementor-search-form--skin-full_screen .e-font-icon-svg-container svg,
.nav-actions .elementor-search-form--skin-full_screen svg { width: 17px; height: 17px }

/* --- [7] Hộp "wishlist rỗng": icon là ô tofu + thanh 3px lạc tông ---------
 * Đo: `::before` dùng `font-family: WooCommerce` với ký tự PUA — font không vẽ được glyph nên
 * ra ô chữ nhật rỗng (tofu). Thanh `border-top:3px` cũng là mặc định của Woo, không có trong
 * bảng thiết kế. GATED (b) chốt "Woo mặc định + CSS đồng bộ" → đồng bộ về hộp mềm của site,
 * icon vẽ bằng mask như mọi icon bespoke khác (map §12). */
.woocommerce-info,
.woocommerce-message {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--bg-soft); color: var(--ink-2); padding: 1rem 1.1rem 1rem 3rem;
}
.woocommerce-info::before,
.woocommerce-message::before {
  content: ""; width: 18px; height: 18px; top: 1rem; left: 1.1rem;
  background-color: var(--accent); font-size: 0;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'><circle cx='12' cy='12' r='9'/><path d='M12 11v5'/><path d='M12 8h.01'/></svg>") center / 18px 18px no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'><circle cx='12' cy='12' r='9'/><path d='M12 11v5'/><path d='M12 8h.01'/></svg>") center / 18px 18px no-repeat;
}

/* --- [9] Sidebar blog: nút search bo góc lệch ô nhập ----------------------
 * Đo: input radius 12px · nút radius 10px (chiều cao thì BẰNG nhau 50/50 — reviewer đọc nhầm). */
.sidebar-box .elementor-search-form__submit { border-radius: 12px }

/* ============================================================================
 * B5 · RE-LOOK vòng 2 — 7 lỗi thật còn lại (số đo: `plans/qa/MEASURE-RELOOK.out` §vòng 2)
 * ========================================================================== */

/* --- [1] Nút mua ở trạng thái DISABLED không đọc được ---------------------
 * Trạng thái disabled là hành vi ĐÚNG của Woo (chưa chọn size thì chưa cho mua) — nhưng cách Woo
 * thể hiện nó là `opacity:.5` phủ lên nút nền ink, và trên nền kem của site thì hỏng hẳn:
 *   nền nút hiệu dụng rgb(139,134,128) · chữ hiệu dụng rgb(195,190,183)
 *   → tương phản CHỮ TRÊN NÚT = 1.95:1  (ngưỡng đọc được là 4.5:1)
 * Hai reviewer độc lập đều gọi đây là "nút hỏng/bị vô hiệu hoá" — đúng, vì nhãn không đọc nổi.
 * Giữ nguyên HÀNH VI, đổi cách thể hiện: bỏ opacity, dùng ink-3 + chữ bg → 6.4:1, vẫn nhạt hơn
 * nút bật (ink đặc) nên vẫn đọc ra "chưa dùng được", và con trỏ vẫn báo not-allowed. */
.pdp-actions .pdp-add-wrap .cart button.single_add_to_cart_button.disabled,
.pdp-actions .pdp-add-wrap .cart button.single_add_to_cart_button:disabled {
  opacity: 1;
  background-color: var(--ink-3);
  color: var(--bg);
  cursor: not-allowed;
}

/* --- [4] PDP: 54px trống giữa ô chọn Size và hàng mua (nguồn ~22px) -------
 * Thủ phạm đo được: link "Clear" của Woo (`.reset_variations`, 33×32px) vẫn CHIẾM CHỖ khi bị ẩn —
 * script biến thể của Woo chỉ đổi `visibility`, không đổi `display`. 32px đó cộng với 16px
 * margin của bảng ra đúng 54px. Nguồn không có link này.
 * Bỏ khỏi luồng khi ẩn, trả lại khi Woo bật (Woo ghi inline `visibility: visible`). */
/* Woo khai `.woocommerce a.reset_variations` nên rule 2-class không thắng — nâng bằng chính
 * đường dẫn thật của phần tử (td.value > a), không !important. */
.pdp-actions .variations td.value a.reset_variations { display: none }
.pdp-actions .variations td.value a.reset_variations[style*="visible"] {
  display: inline-block; margin-top: .4rem; font-size: .82rem; color: var(--ink-4);
}

/* Ô số lượng: input bo 12px NẰM TRONG khung cũng bo 12px → "khung trong khung".
 * Nguồn `.pdp-qty__input` không bo góc, chỉ có 2 vạch ngăn dọc. */
.pdp-actions .pdp-add-wrap .cart .quantity input.qty {
  border-radius: 0;
  border-left: 1px solid var(--line); border-right: 1px solid var(--line);
  border-top: 0; border-bottom: 0;
}

/* --- [5][6] err404 + search: 2 cột lệch tầng · hàng nút dán đáy ô tìm ----
 * `.page-hero .shell{align-items:end}` là rule NGUỒN, đúng cho các page-hero có bản thiết kế
 * (cột trái breadcrumb+h1, cột phải lede — cao xấp xỉ nhau). Nhưng 404 và trang tìm kiếm KHÔNG
 * có trong bộ HTML nguồn (§11 mục 6, builder tự dựng): cột phải cao 213px, cột trái 159px nên
 * canh đáy để trống hẳn góc trên-trái 53px và breadcrumb rơi vào giữa thân trang.
 * Chỉ đổi cho đúng 2 trang đó, nhận diện bằng body class của WP — không đụng page-hero khác. */
body.error404 .page-hero .shell,
body.search .page-hero .shell { align-items: start }

/* Đo: đáy ô tìm kiếm = đỉnh hàng nút (khe 0px), trong khi phía trên ô có 18px. */
body.error404 .page-hero .elementor-widget-form,
body.error404 .page-hero .elementor-widget-search-form,
body.search .page-hero .elementor-widget-search-form { margin-bottom: 1rem }

/* --- [8] Thẻ giá featured: nhịp dọc ngược nguồn --------------------------
 * Đo trên NGUỒN (mở file:// để lấy số thật thay vì ước lượng): `<hr class="svd-pkg__divider">`
 * cao ĐÚNG 1px với `margin:6.4px 0`, nên khe từ đỉnh đường kẻ tới đỉnh danh sách = 17px.
 * Trên build, `widget:divider` render `.elementor-divider` có padding riêng → khối cao 32px và
 * khe thành 41px. Trả padding về 0 và dùng đúng margin của nguồn. */
.svd-pkg__divider .elementor-divider { padding-block: 0 }
.svd-pkg__divider { margin: .4rem 0 }
.svd-pkg__divider--gap { margin-top: .8rem }
.svd-pkg__ul .elementor-icon-list-items,
.svd-pkg--featured .elementor-icon-list-items { margin-top: 0 }
.svd-pkg .elementor-icon-list-item,
.svd-pkg--featured .elementor-icon-list-item { margin-bottom: .38rem }

/* --- [19] Nút của Woo/TI thấp hơn chuẩn nút site -------------------------
 * Đo "Return To Shop": 142×36px, padding 9.9/16px. Nút chính của site (`.btn`) cao 46–50px với
 * padding `.85rem 1.25rem`. Trả về đúng chuẩn — vẫn là nút mặc định của plugin, chỉ đồng bộ số. */
.woocommerce .button.wc-backward,
.tinv-wishlist .button,
.woocommerce-message .button,
.woocommerce-info .button { padding: .85rem 1.25rem; font-size: .94rem; line-height: 1.2 }

/* --- [20] privacy: tiêu đề "trôi" giữa hai đoạn --------------------------
 * Đo: h2 có margin trên = dưới = 19.92px nên không dính vào phần nội dung của nó.
 * Nguồn `.prose h2{margin:2rem 0 .8rem}` — trên gấp ~2.5 lần dưới. */
.page-content h2,
.page-content h3 { margin-top: 2rem; margin-bottom: .8rem }

/* --- [18] Khối giỏ rỗng: link gạch chân kiểu mặc định --------------------
 * `hello-elementor/assets/css/theme.css` khai `.page-content a{text-decoration:underline}` cho
 * MỌI link trong vùng này. Trong khối sản phẩm của Woo thì tên hàng và "Add to Wishlist" bị gạch
 * chân trong khi link ở nơi khác của site thì không → gỡ trong phạm vi khối Woo, giữ nguyên cho
 * văn bản pháp lý (nơi gạch chân là ĐÚNG, giúp nhận ra link giữa đoạn văn). */
.page-content .woocommerce a,
.page-content .wp-block-woocommerce-cart a,
.page-content .tinv-wishlist a { text-decoration: none }
.page-content .woocommerce a:hover,
.page-content .wp-block-woocommerce-cart a:hover,
.page-content .tinv-wishlist a:hover { text-decoration: underline }

/* ============================================================================
 * B5 · RE-LOOK vòng 3 — 5 lỗi thật cuối (số đo: `plans/qa/MEASURE-RELOOK.out` §vòng 3)
 * ========================================================================== */

/* --- Hàng đánh giá PDP mất màu nhấn --------------------------------------
 * Đo nguồn: `.pdp-rating__stars` = rgb(192,78,54) accent · `.pdp-rating__link` = rgb(142,54,35)
 * accent-ink. Đo dựng: sao rgb(26,21,18) ink với `::before` rgb(207,200,216) (tím nhạt mặc định
 * của Woo), link ink. Rule port nhắm class NGUỒN (`.pdp-rating__stars`) mà widget
 * `woocommerce-product-rating` render `.star-rating` + `.woocommerce-review-link` → rule chết,
 * cùng lớp với `.pdp-meta li a` và `.pdp-meta li strong` đã sửa ở hai vòng trước. */
.pdp-rating .star-rating,
.pdp-rating .star-rating::before,
.pdp-rating .star-rating span::before { color: var(--accent) }
.pdp-rating .woocommerce-review-link { color: var(--accent-ink) }

/* --- Hàng mua: ô số lượng rộng hơn nguồn, ép nút mua ngắn lại -------------
 * Đo nguồn: qty 132px · nút mua 333px. Đo dựng: qty 142px · nút mua 309px.
 * 10px dôi ra là do 2 nút −/+ rộng 42px mỗi cái + input 46px + 2 viền = 132, còn `.quantity`
 * của Woo cộng thêm lề riêng. Khoá bề ngang theo nguồn để phần dôi trả về cho nút mua. */
.pdp-actions .pdp-add-wrap .cart .quantity { width: 132px; flex: 0 0 132px; padding: 0 }

/* --- Ô tìm kiếm sidebar: đo lại trên CHÍNH nguồn --------------------------
 * Vòng 1 tôi chỉnh bo góc nút cho "khớp ô nhập" (12px) — SAI, vì chưa mở nguồn ra đo.
 * Nguồn `blog.html` (đo `file://`): input 207×47 nền rgb(244,236,220)=bg-soft, viền line-2,
 * bo 10px · nút 38×38 bo 10px (nút NHỎ HƠN ô nhập, không cao bằng).
 * Bài học lặp lại: số của nguồn phải LẤY TỪ NGUỒN, không suy từ bản dựng. */
/* Control `input_background_color` / `border_radius` của widget search-form CHỈ emit CSS cho
 * skin `full_screen` (post-CSS: `.elementor-search-form--skin-full_screen input[type=search]…`);
 * widget này là skin `classic` nên 2 control đó CHẾT — phải xử ở bridge, nâng đúng hạng. */
.sidebar-box .elementor-search-form input.elementor-search-form__input {
  background-color: var(--bg-soft); border-radius: 10px; border: 1px solid var(--line-2);
}

/* --- Danh sách "Shop by breed" không dàn hết bề ngang ---------------------
 * Đo: cả nguồn lẫn dựng đều `display:flex; justify-content:space-between`, nhưng thẻ <a> của
 * dựng chỉ rộng 130px (nguồn 233px) nên phần "space-between" không có chỗ để đẩy số đếm sang
 * phải → nhìn thành căn trái. Cho <a> chiếm trọn hàng như nguồn. */
.shp-breed-list a { width: 100% }

/* --- Trang giỏ: dấu phân cách kiểu "···" của WP --------------------------
 * `<hr class="wp-block-separator is-style-dots">` là nội dung MẶC ĐỊNH của trang Cart do Woo tạo;
 * WP vẽ nó bằng `::before{content:"···"}`. Ba chấm lơ lửng giữa trang đọc như phần tử hỏng và
 * lạc hẳn ngôn ngữ thị giác của site (mọi đường phân cách khác đều là kẻ 1px `--line`).
 * GATED (b) = "Woo mặc định + CSS đồng bộ": giữ phần tử, đổi cách vẽ. */
/* WP khai `.wp-block-separator.is-style-dots{background:none!important;border:none!important}`
 * — có `!important` nên KHÔNG rule border nào thắng được mà không dùng `!important` theo.
 * Đường vòng sạch: tắt chấm ở `::before`, vẽ đường kẻ bằng `::after` (WP không đụng tới). */
.page-content hr.wp-block-separator::before { content: none }
.page-content hr.wp-block-separator {
  height: auto; line-height: 0; letter-spacing: normal; padding: 0; opacity: 1;
}
.page-content hr.wp-block-separator::after {
  content: ""; display: block; height: 1px; background: var(--line);
  max-width: 72ch; margin-inline: auto;
}

/* ============================================================================
 * B5 · RE-LOOK vòng 4 — 3 lỗi thật cuối, số ĐO TỪ NGUỒN
 * ========================================================================== */

/* Hàng trấn an PDP: chữ và icon lệch nguồn.
 * Đo nguồn `.pdp-trust__item`: font-size 13.12px (.82rem) · svg 15px màu accent rgb(192,78,54).
 * Đo dựng: chữ 16px (rơi về cỡ mặc định của widget icon-list) · icon fill ink rgb(26,21,18)
 * → chuỗi dài nhất rộng 184px thay vì 155px (+19%). Hình icon là bản ĐẶC của Font Awesome —
 * deviation bất-khả đã ghi (map §10 cấm widget `html` để nhét inline SVG nét mảnh) — nhưng CỠ
 * và MÀU thì trả về đúng nguồn được. */
.pdp-trust .elementor-icon-list-text { font-size: .82rem; color: var(--ink-3) }
.pdp-trust .elementor-icon-list-icon svg { fill: var(--accent); width: 15px; height: 15px }

/* Ô tìm kiếm sidebar: chữ gợi ý bị cắt giữa từ.
 * Đo nguồn: font-size 14.72px (.92rem) · padding 11.2px 13.6px.
 * Đo dựng: 15.2px · 12.8px 15.67px → chữ to hơn + đệm rộng hơn nên "Bichon." tràn ra. */
.sidebar-box .elementor-search-form input.elementor-search-form__input {
  font-size: .92rem; padding: .7rem .85rem;
}

/* Khe giữa ô số lượng và nút mua: nguồn 10px (`.pdp-actions{gap:.65rem}`), dựng 24px.
 * Phần dôi là `margin-right` mà Woo đặt cho `.quantity` — gap của hàng flex cộng thêm margin đó. */
.pdp-actions .woocommerce-variation-add-to-cart,
.pdp-actions .elementor-add-to-cart form.cart { gap: .65rem }
.pdp-actions .pdp-add-wrap .cart .quantity { margin: 0 }

/* ============================================================================
 * B5 · RE-LOOK vòng 5 — 4 lỗi thật, số ĐO TỪ NGUỒN
 * ========================================================================== */

/* [1] Hàng nút mua thủng một lỗ giữa hàng.
 *     Đo nguồn: qty kết thúc 750 → nút mua bắt đầu 760 (khe 10) → nút tim 1104 (khe 11) — đều.
 *     Đo dựng: khe qty→mua = 24px vì CỘNG DỒN ba thứ: `gap:10.4px` của hàng flex
 *     + `margin-right:4px` mà Woo đặt cho `.quantity` + `margin-left:10px` Woo đặt cho nút mua.
 *     Gỡ hai margin, giữ gap. */
/* Rule THẮNG (CDP): `.woocommerce div.product form.cart div.quantity{margin:0 4px 0 0}` =
 * 4 class + 3 element. Rule 4-class-0-element của tôi thua ở số ELEMENT → nâng lên 5 class. */
.pdp-summary .pdp-actions .pdp-add-wrap .cart div.quantity,
.pdp-summary .pdp-actions .pdp-add-wrap .cart button.single_add_to_cart_button {
  margin-left: 0; margin-right: 0;
}
/* Woo còn đặt `margin-left:10px` cho chính nút trong `.woocommerce-variation-add-to-cart`
 * (chỉ có ở sản phẩm VARIABLE) — cộng với `gap` của hàng thành khe 20px thay vì 10px. */
.pdp-summary .pdp-actions .pdp-add-wrap .elementor-add-to-cart .woocommerce-variation-add-to-cart button.single_add_to_cart_button {
  margin-left: 0;
}

/* [2] Cụm ô tìm kiếm sidebar dừng sớm 18px so với mép phải nội dung thẻ.
 *     Đo: lòng thẻ 875→1129 (254px) nhưng form chỉ rộng 235 → nút đen lùi vào trong, và ô nhập
 *     hẹp theo nên chữ gợi ý bị cắt giữa từ. Cho form chiếm trọn lòng thẻ. */
/* Widget đã rộng 253px nhưng `<form>` bên trong vẫn 235 — Elementor khoá bề rộng form riêng.
 * Neo qua lớp widget để đủ hạng. */
.sidebar-box .elementor-widget-search-form { width: 100% }
/* Con trực tiếp của widget là thẻ landmark `<search>` (HTML5), KHÔNG có class và KHÔNG phải
 * <div> — nó là flex item `flex:0 1 auto` nên co theo nội dung, giữ form ở 235px trong lòng
 * thẻ 253px. Nhắm theo `> *` để không phụ thuộc loại thẻ mà Elementor chọn. */
.sidebar-box .elementor-widget-search-form > *,
.sidebar-box .elementor-widget-search-form .elementor-search-form,
.sidebar-box .elementor-widget-search-form .elementor-search-form__container {
  width: 100%; max-width: 100%;
}

/* [3] "Recent posts": khe ảnh → chữ 33.6px, nguồn 13.6px.
 *     Đo nguồn `.blg-recent__item{gap:.85rem}` → ảnh kết thúc 927, khối chữ bắt đầu 941.
 *     Đo dựng: cùng `gap:13.6px` nhưng khối chữ bắt đầu 961 — 20px dôi là lề/đệm riêng mà
 *     widget `posts` skin classic đặt cho `.elementor-post__text` và link ảnh.
 *     Hệ quả: cột chữ còn 168px thay vì 188px nên tiêu đề bị cắt sớm hơn nguồn. */
/* Đo: link ảnh mang `margin-right: 20px` (spacing riêng của skin classic) CỘNG với `gap:13.6px`
 * của hàng → khe 33.6px thay vì 13.6px của nguồn. Nâng hạng qua lớp widget để gỡ margin đó. */
.sidebar-box .blg-recent .elementor-posts .elementor-post .elementor-post__thumbnail__link {
  margin-right: 0; padding-right: 0;
}
.sidebar-box .blg-recent .elementor-posts .elementor-post .elementor-post__text {
  margin-left: 0; padding-left: 0;
}

/* [4] Chữ đếm review cạnh dãy sao mất dạng LINK.
 *     Màu đã đúng accent-ink từ vòng 3, nhưng nguồn `.pdp-rating__link` còn có gạch chân
 *     `text-decoration-color: var(--line-2)`. */
.pdp-rating .woocommerce-review-link {
  text-decoration: underline; text-decoration-color: var(--line-2);
}
.pdp-rating .woocommerce-review-link:hover { text-decoration-color: var(--accent) }

/* ============================================================================
 * B5 · RE-LOOK vòng 6 — 1 lỗi thật cuối
 * ========================================================================== */

/* Số đếm danh mục đậm ngang tên danh mục, mất phân cấp.
 * Nguồn `.sidebar-box li .c{color:var(--ink-4);font-size:.82rem}` — nhưng widget lõi WP in số đếm
 * là TEXT NODE trần trong `<li>` (không bọc thẻ) nên không có gì để nhắm trực tiếp.
 * Cách đi: cho chính `<li>` màu ink-4 (text node thừa hưởng) và trả `<a>` về ink-2 —
 * kết quả đúng phân cấp của nguồn mà không phải đụng markup do WP sinh. */
.sidebar-box [class*="elementor-widget-wp-widget-"] li { color: var(--ink-4); font-size: .82rem }
.sidebar-box [class*="elementor-widget-wp-widget-"] li a { color: var(--ink-2); font-size: .92rem }

/* ============================================================================
 * B5 · RE-LOOK vòng 7 — nhịp dọc "Recent posts"
 *
 * Ba reviewer độc lập liên tiếp (vòng 5, 6, 7) đều báo khối này "nén hơn nguồn". Hai lần đầu
 * tôi bác bằng số đo GỘP (chiều cao item, pitch) và kết luận là do độ dài tiêu đề — SAI.
 * Đo lại TỪNG PHẦN TỬ với toạ độ y (thay vì đo hộp ngoài) mới thấy cấu trúc thật:
 *
 *   NGUỒN  item y=1527 h=137 · thumb y=1527 h=52 · title y=1551 h=64 · date y=1645
 *          → 24px TRÊN tiêu đề  ·  30px giữa tiêu đề và ngày
 *   DỰNG   item y=1532 h=56  · thumb y=1532 h=52 · title y=1532 h=37 · date y=1573
 *          → 0px trên tiêu đề  ·  4px giữa tiêu đề và ngày
 *
 * Hai con số 24px/30px LẤY TỪ NGUỒN, không phải giá trị thiết kế mới. (Cùng bài học D-103.)
 */
.sidebar-box .blg-recent .elementor-posts .elementor-post .elementor-post__text { padding-top: 24px }
.sidebar-box .blg-recent .elementor-posts .elementor-post .elementor-post__meta-data { margin-top: 30px }

/* Icon kính lúp trong nút search sidebar: nguồn 15px (build 16px).
 * Độ DÀY nét thì không sửa được — Font Awesome Free chỉ có bản đặc, nguồn vẽ SVG nét 2.
 * Đó là deviation bất-khả đã ghi (map §10 cấm widget `html` để nhét inline SVG). */
.sidebar-box .elementor-search-form__submit svg { width: 15px; height: 15px }

/* ═══════════════════════════════════════════════════════════════════════════
 * SỬA SAU AUDIT VÒNG 2 — các mục lộ ra ở lượt soi mắt tươi độc lập, đã đo trước khi sửa.
 * ═══════════════════════════════════════════════════════════════════════════ */

/* [1] Hero service-detail: nguồn vẽ ảnh bằng `.svd-frame__photo{position:absolute;inset:0;
 *     background-size:cover}` nên ảnh LUÔN phủ kín khung 4/5. Bản dựng dùng widget image →
 *     <img> giữ tỉ lệ vuông của file gốc, chừa 145px nền oat ở đáy khung. Trả về hành vi cover. */
.svd-frame .elementor-widget-image,
.svd-frame .elementor-widget-image > .elementor-widget-container,
.svd-frame .elementor-widget-image figure { height: 100%; }
.svd-frame .elementor-widget-image img {
  width: 100%; height: 100%; object-fit: cover; object-position: center top;
}

/* [2] Menu mobile: widget nav-menu nằm trong ô flex rộng 85px nên dropdown (position:static)
 *     thừa hưởng đúng 85px và đè lên vùng header. Nguồn không có drawer (§11 mục 1) nên
 *     dropdown phải trải hết bề ngang, nền kem như thân trang, không phải trắng mặc định. */
@media (max-width: 767px) {
  .nav .elementor-widget-nav-menu { position: static; }
  .nav .elementor-nav-menu--dropdown {
    position: absolute; left: 0; right: 0; width: 100%;
    background: var(--bg); border-top: 1px solid var(--line); box-shadow: var(--shadow);
  }
  .nav .elementor-nav-menu--dropdown a.elementor-item { padding-inline: 28px; }
}

/* [3] Tab PDP ở 390: thanh tab là hàng flex không xuống dòng → nội dung 424px trong ô 354px,
 *     tab cuối bị cắt. Body vẫn 390 nên gate RESP không thấy. Cho phép xuống dòng. */
@media (max-width: 767px) {
  .woocommerce-tabs ul.tabs, .woocommerce-tabs ul.wc-tabs { flex-wrap: wrap; row-gap: .4rem; }
}

/* [4] Trang do plugin sinh (giỏ/tài khoản/wishlist/pháp lý): Hello đặt `.entry-title`
 *     max-width 800px + margin auto nên H1 bị canh giữa, lệch 134px so với cột nội dung. */
.page-header .entry-title { max-width: none; margin-inline: 0; }

/* [5] FAQ: nguồn dùng `.accordion--narrow{max-width:72ch}` (service-detail.html:395) và
 *     `.accordion__q{justify-content:space-between}` → dấu +/− nằm bên PHẢI. Elementor
 *     nested-accordion in icon là con ĐẦU nên nó rơi về bên trái. */
/*     Elementor khai `.e-con.e-con > .e-con-inner > .elementor-widget{max-width:100%}` —
 *     cố tình nhân đôi class để lên (0,3,0) và nạp SAU bridge, nên mọi rule đặt max-width
 *     lên chính WRAPPER widget đều thua (kể cả rule port nguyên văn `.accordion--narrow`).
 *     Nhắm phần tử THẬT bên trong widget: Elementor không đụng tới nó. */
.accordion.accordion--narrow > .e-n-accordion { max-width: 72ch; }
.accordion .e-n-accordion-item-title { justify-content: space-between; }
.accordion .e-n-accordion-item-title-header { order: 1; }
.accordion .e-n-accordion-item-title-icon { order: 2; margin-inline-start: auto; }

/* [6] Trang wishlist: tiêu đề trang (H1) và tiêu đề của shortcode TI (H2) cùng là "Wishlist"
 *     → lặp. Giữ H1 của trang, ẩn tiêu đề nội bộ của plugin. */
.tinv-wishlist .tinv-header h2 { display: none; }   /* H2 của shortcode TI không có class */
/* [7] Nhãn marketing tĩnh (Bestseller / Restocked / Low stock — map §11 mục 7) do site plugin
 *     in ở cùng hook với badge Sale của Woo. Dùng lại đúng bộ thuộc tính của `.onsale` đã
 *     bắc cầu ở trên; nhãn tĩnh xếp dưới badge Sale để hai cái không chồng nhau. */
.shop-grid ul.products li.product .product-card__badge--static,
.pdp-related ul.products li.product .product-card__badge--static {
  position: absolute; top: .7rem; left: .7rem; z-index: 2;
  background: var(--ink); color: var(--bg); font-size: .68rem; font-weight: 600; line-height: 1.6;
  letter-spacing: .04em; text-transform: uppercase; padding: .25rem .55rem; border-radius: 999px;
}
.shop-grid ul.products li.product .onsale ~ .product-card__badge--static,
.pdp-related ul.products li.product .onsale ~ .product-card__badge--static { top: 2.5rem; }

/* ── SỬA TIẾP SAU LƯỢT SOI LẠI (2026-09-09) ────────────────────────────────── */

/* [8] Icon dịch vụ dồn góc trên-trái: `::before` để `position:absolute` nên nó nằm ngoài
 *     dòng chảy flex, mọi canh giữa của hộp không tác dụng. Trả về dòng chảy bình thường —
 *     hộp đã là flex center/center nên icon tự vào giữa. (Lỗi này chỉ lộ ra SAU khi mask
 *     vẽ được: trước đó phần tử vô hình nên vị trí không ai thấy.) */
[class*="svc-icon--"]::before { position: static; }

/* [9] Nhãn marketing: nguồn dùng màu accent cho Bestseller/Restocked/Low stock, chỉ nhãn
 *     "New" mới dùng nền tối (`.product-card__badge--dark`). Sửa lại cho đúng nguồn. */
.shop-grid ul.products li.product .product-card__badge--static,
.pdp-related ul.products li.product .product-card__badge--static {
  background: var(--accent); color: #fff;
}

/* [10] Nút chia sẻ: skin của Pro tô nền theo MÀU THƯƠNG HIỆU từng mạng (đỏ Pinterest, xanh
 *      Facebook, đen X) — lạc hẳn bảng màu kem/terracotta. Nguồn là 3 nút viền mảnh, icon
 *      màu mực. Kèm khoảng thở trước tiêu đề khối kế tiếp. */
.bld-share .elementor-share-btn {
  background-color: transparent; border: 1px solid var(--line-2); border-radius: 999px;
}
.bld-share .elementor-share-btn:hover { background-color: var(--oat); }
.bld-share .elementor-share-btn .elementor-share-btn__icon,
.bld-share .elementor-share-btn .elementor-share-btn__text { background-color: transparent; color: var(--ink); }
.bld-share .elementor-share-btn .elementor-share-btn__icon svg,
.bld-share .elementor-share-btn svg { fill: var(--ink); color: var(--ink); }
.bld-share { margin-bottom: 2.2rem; }

/* [11] Nhãn "Common questions" của trang liên hệ: đường kẻ trên của item accordion đầu tiên
 *      nằm cách chân chữ đúng 1px nên nhìn như gạch ngang chữ. Nguồn có khoảng thở. */
.ctc-hours-faq .accordion { margin-top: 1.1rem; }