/*
 * TopWatch – Responsive layer (Tablet & Mobile)
 * Nạp sau cùng trên mọi trang. Desktop >= 1440px giữ nguyên: mọi rule đều nằm trong max-width query.
 *
 * Breakpoints (đồng bộ với các file trang):
 *   Laptop      1024–1439px   @media (max-width: 1439px)
 *   Tablet       768–1023px   @media (max-width: 1023px)
 *   Mobile       375–767px    @media (max-width: 767px)
 *   Mobile nhỏ   320–374px    @media (max-width: 374px)
 *
 * Phạm vi trang: body.tw-page-{slug} (thêm trong inc/setup.php).
 * Chỉ dùng token trong tokens.css; không đổi màu, font, radius, shadow.
 * Ngoại lệ: mục 0 (sửa lỗi vị trí panel), mục 7 (header desktop) và cụm nút liên hệ nổi dùng chung mobile/desktop.
 */

/* =========================================================================
   0. SỬA LỖI CHỨC NĂNG (mọi kích thước)
   Menu mobile và ô tìm kiếm nằm ngoài header sticky (con trực tiếp của body) nên
   "position:absolute; top:100%" tính theo viewport → panel bung ra ngoài màn hình.
   Ghim panel ngay dưới mép header thực tế (--tw-drop-top do site.js đo khi mở).
   ========================================================================= */
.tw-mobile-menu, .tw-search { position: fixed; top: var(--tw-drop-top, 64px); z-index: calc(var(--tw-contact-layer, 50) + 1); }
/* Không khóa overflow của html/body (làm mất header sticky); menu tự cuộn và chặn cuộn lan ra nền. */
.tw-mobile-menu { overscroll-behavior: contain; }

/* Compact product search, anchored to the search icon and kept inside the viewport. */
#tw-search { top: calc(var(--tw-drop-top, 64px) + 8px); left: auto; right: var(--tw-search-right, 16px); transform: none; width: min(360px, calc(100vw - 32px)); max-width: none; margin: 0; padding: 12px; display: block; background: var(--white); border: 0; border-radius: 4px; box-shadow: 0 2px 8px rgb(0 0 0 / .12); }
#tw-search[hidden] { display: none; }
#tw-search .tw-search-control { display: flex; align-items: center; min-width: 0; height: 48px; border: 1px solid var(--border-subtle); border-radius: 4px; }
#tw-search .tw-search-control:focus-within { border-color: var(--teal-700); }
#tw-search input[type="search"] { width: 100%; min-width: 0; height: 100%; padding: 10px 12px; border: 0; outline: 0; box-shadow: none; appearance: none; -webkit-appearance: none; border-radius: 4px; background: transparent; color: var(--text-heading); font: var(--fw-regular) 18px/1.4 var(--font-sans); }
#tw-search input::-webkit-search-cancel-button, #tw-search input::-webkit-search-decoration { -webkit-appearance: none; }
#tw-search input::placeholder { color: var(--text-muted); opacity: 1; }
#tw-search button { display: grid; place-items: center; flex: 0 0 44px; width: 44px; height: 44px; padding: 0; border: 0; box-shadow: none; border-radius: 4px; background: transparent; color: var(--text-heading); cursor: pointer; }
#tw-search button:hover { color: var(--teal-700); }
#tw-search button:focus-visible { outline: 2px solid var(--teal-700); outline-offset: -3px; }
@media (max-width: 767px) { #tw-search input[type="search"] { font-size: 16px; } }

/* =========================================================================
   1. HEADER & MENU MOBILE (≤1023px – header mobile hiển thị từ 1023px)
   ========================================================================= */
@media (max-width: 1023px) {
  /* Vùng chạm tối thiểu 44px cho icon tìm kiếm / giỏ hàng / menu; giữ nguyên khoảng cách thị giác */
  #om-nav-mobile .d-cb0d07a719 { gap: var(--space-2); }
  #om-nav-mobile .d-520743c997,
  #om-nav-mobile .d-5cd20ffd8d { min-width: 44px; min-height: 44px; }
  /* Hotline ở top bar: vùng chạm cao hơn */
  .d-c41f2b34e3 > a[href^="tel:"] { min-height: 32px; }

  /* Header mobile 3 cột: nút menu trái – logo giữa – tìm kiếm / tài khoản / giỏ hàng phải.
     Hai cột ngoài 1fr bằng nhau nên logo nằm chính giữa khi nhóm icon phải vừa nửa còn lại. */
  #om-nav-mobile .d-9fb2df82e4 { display: grid; grid-template-columns: 1fr auto 1fr; column-gap: var(--space-2); }
  #om-nav-mobile .d-9fb2df82e4 > .d-460e404929 { justify-self: start; }
  #om-nav-mobile .d-9fb2df82e4 > a { justify-self: center; }
  #om-nav-mobile .d-cb0d07a719 { justify-self: end; }
  /* Tài khoản: icon trong header, cùng cỡ với tìm kiếm / giỏ hàng (không còn trong menu). */
  #om-nav-mobile .tw-header-account:hover { color: var(--teal-700); }
  /* Cart count badge: anchored to the 21px bag icon centred in the tap area (not to the wider tap box),
     badge centre on the icon's top-right corner; extra digits grow to the right. */
  #om-nav-mobile .d-5cd20ffd8d > .d-9444c225b2 { top: calc(50% - 10.5px - 8.5px + 2px); right: auto; left: calc(50% + 10.5px - 8.5px); box-shadow: 0 0 0 2px var(--white); }

  /* Menu mobile: ngăn kéo bên trái ngay dưới header, cao tới đáy màn hình, nền phía sau tối mờ
     (html.tw-menu-open do site.js bật; chạm nền để đóng). Mục cấp 1 đậm, nhóm con nhỏ hơn. */
  .tw-mobile-menu { left: 0; right: auto; width: min(84vw, 360px); height: calc(100dvh - var(--tw-drop-top, 64px)); max-height: none; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; background: var(--white); border-top: var(--border-w) solid var(--border-subtle); box-shadow: 8px 0 24px rgba(7, 25, 35, .16); padding: var(--space-5) var(--container-gutter) var(--space-7); }
  .tw-mobile-menu:not([hidden]) { animation: tw-drawer-in var(--dur-base, .2s) var(--ease-out, ease-out); }
  html.tw-menu-open body::before { content: ""; position: fixed; inset: var(--tw-drop-top, 64px) 0 0; z-index: calc(var(--tw-contact-layer, 50) + 1); background: rgba(7, 25, 35, .45); }
  .tw-mobile-menu .tw-mnav-link { display: block; padding: var(--space-5) 0; font: var(--fw-bold) var(--fs-body)/1.4 var(--font-sans); color: var(--text-strong); border-bottom: var(--border-w) solid var(--border-subtle); }
  .tw-mobile-menu .tw-mnav-acc { border-bottom: var(--border-w) solid var(--border-subtle); }
  .tw-mobile-menu .tw-mnav-acc > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); min-height: var(--tap-min, 44px); padding: var(--space-5) 0; border: 0; font: var(--fw-bold) var(--fs-body)/1.4 var(--font-sans); color: var(--text-strong); }
  .tw-mobile-menu .tw-mnav-acc > summary::-webkit-details-marker { display: none; }
  .tw-mobile-menu .tw-mnav-acc > summary svg { flex: 0 0 auto; transition: transform var(--dur-base) var(--ease-out); }
  .tw-mobile-menu .tw-mnav-acc[open] > summary { color: var(--teal-700); }
  .tw-mobile-menu .tw-mnav-acc[open] > summary svg { transform: rotate(180deg); }
  .tw-mobile-menu .tw-mnav-groups { display: grid; gap: var(--space-4); padding: 0 0 var(--space-6) var(--space-5); }
  .tw-mobile-menu .tw-mnav-title { display: block; padding: 0; font: var(--fw-bold) var(--fs-small)/1.3 var(--font-sans); color: var(--text-strong); margin-bottom: var(--space-4); }
  .tw-mobile-menu .tw-mnav-links { display: grid; gap: var(--space-4); }
  /* Giữ nhịp chữ 14px như thiết kế nhưng mở rộng vùng chạm (padding + margin âm, không đổi bố cục) */
  .tw-mobile-menu .tw-mnav-links a { display: block; padding: var(--space-2) 0; margin: calc(-1 * var(--space-2)) 0; font: var(--fw-regular) var(--fs-small)/1.5 var(--font-sans); color: var(--text-body); }
  .tw-mobile-menu .tw-mnav-cta { margin-top: var(--space-7); display: flex; align-items: center; justify-content: center; height: var(--control-h-lg); border-radius: var(--radius-md); background: var(--teal-700); color: var(--white); font: var(--type-label); }
}

/* =========================================================================
   2. FOOTER
   ========================================================================= */
@media (max-width: 1023px) {
  /* Link footer: vùng chạm ≥40px (tablet + mobile) */
  #om-footer .d-ff9e1ecfff { display: flex; align-items: center; min-height: 40px; }
  #om-footer .d-f6641f3426 { gap: 0; }
}
@media (min-width: 480px) and (max-width: 767px) {
  /* Mobile ngang / phablet: Chính sách + Về chúng tôi đứng cạnh nhau để giảm chiều dài */
  #om-footer .d-4052a77eea { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; column-gap: var(--space-8); }
  #om-footer .d-4052a77eea > :first-child,
  #om-footer .d-4052a77eea > :nth-child(2) { grid-column: 1 / -1; }
}

/* =========================================================================
   3. THÀNH PHẦN DÙNG CHUNG
   ========================================================================= */
/* Thanh tab cuộn ngang: justify-content:center đẩy tab đầu ra ngoài vùng cuộn khi tràn.
   Dùng margin auto để vẫn căn giữa khi đủ chỗ và cuộn được khi thiếu chỗ. */
@media (max-width: 1439px) {
  div:has(> [data-tw-tier-button]),
  div:has(> [data-tw-branch-button]) { justify-content: flex-start !important; scroll-snap-type: x proximity; scroll-padding-inline: var(--container-gutter); scrollbar-width: none; }
  div:has(> [data-tw-tier-button]) > [data-tw-tier-button],
  div:has(> [data-tw-branch-button]) > [data-tw-branch-button] { flex-shrink: 0; scroll-snap-align: start; }
  div:has(> [data-tw-tier-button]) > [data-tw-tier-button]:first-child,
  div:has(> [data-tw-branch-button]) > [data-tw-branch-button]:first-child { margin-left: auto; }
  div:has(> [data-tw-tier-button]) > [data-tw-tier-button]:last-child,
  div:has(> [data-tw-branch-button]) > [data-tw-branch-button]:last-child { margin-right: auto; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  /* Lưới logo thương hiệu: 6 cột trên tablet (auto-fill 150px chỉ cho 4 cột → card quá cao) */
  .d-320cff0cde { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
}
@media (max-width: 767px) {
  /* Bảng giá cuộn ngang: ô gộp thương hiệu hiển thị từ đầu thay vì căn giữa 7 dòng */
  [data-tw-tier] td[rowspan] { vertical-align: top; }
  /* Bảng giá A–E: thu gọn bảng 720px → 560px, cột thương hiệu hẹp lại để cột giá lộ ra sớm hơn */
  .d-c2bc9e4799 { min-width: 560px; }
  .d-c2bc9e4799 th, .d-c2bc9e4799 td { padding-left: var(--space-5) !important; padding-right: var(--space-5) !important; }
  .d-c2bc9e4799 .d-2bd3efff54{ width: 128px; font-size: 12px; line-height: 1.5; }.d-c2bc9e4799 .d-3f0b80de0b{ width: 128px; font-size: 13px; line-height: 1.5; }
  .d-c2bc9e4799 .d-4ed59dcb8e, .d-c2bc9e4799 .d-c630e9d266 { width: 112px; white-space: normal; }
  /* Lưới thương hiệu dùng chung: 4 card mỗi hàng, kể cả card tổng số thương hiệu khác. */
  .d-320cff0cde { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: var(--space-4) !important; }
  .d-320cff0cde .d-b684e4f095 { width: 84%; height: 74%; }
  .d-320cff0cde .d-4dbc09f398 { gap: 2px; padding: 0 var(--space-2); }
  .d-320cff0cde .d-4bb22b1e12 { font-size: clamp(20px, 6vw, 26px); } /* "30+" alone in the card on mobile */
  .d-320cff0cde .d-5e071c77fa { font-size: calc(var(--tw-c-caption) + 1px); line-height: 1.2; text-wrap: balance; }
  /* Tiêu đề section Rủi ro trên mọi trang dịch vụ, gồm trang Lau dầu không có id rui-ro. */
  .d-57bd2616f6 { text-align: center; }
}

/* =========================================================================
   4. LƯỚI / RAIL SẢN PHẨM – chỉ số cột & khoảng cách.
   Giao diện card (ảnh, tên, giá, footer) nằm duy nhất ở product-card.css.
   ========================================================================= */
@media (max-width: 767px) {
  /* Rail: 2 card + hé card tiếp theo để gợi ý vuốt */
  .tw-product-rail { grid-auto-columns: calc((100% - 12px) / 2.15) !important; gap: 12px !important; scroll-padding-inline: 2px; }
  /* Longines: 2 cột đồng bộ khối Rolex, không rơi về 1 cột */
  #om-longines-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; }
}

/* =========================================================================
   5. THEO TRANG
   ========================================================================= */
/* Thương hiệu: logo trong card 108×83px chỉ còn ~50px → giảm padding, cho logo lớn hơn */
@media (max-width: 767px) {
  .tw-page-thuong-hieu .d-2c6f321e89 { padding: var(--space-4); }
  .tw-page-thuong-hieu .d-41f6ca7227 { max-width: 88%; max-height: 72%; }
}

/* Đánh bóng: khối giá "từ … VNĐ" xuống dòng thay vì tràn ở màn hình nhỏ */
@media (max-width: 767px) {
  .tw-page-danh-bong-dong-ho .d-f761cb9b74 { flex-wrap: wrap; justify-content: center; max-width: 100%; row-gap: var(--space-2); }
}

/* Thẻ lật quy trình (qt-flip – Đánh bóng): 2 cột trên mọi mobile thay vì 1 cột dài ~2.200px.
   Desktop lật bằng hover; cảm ứng lật bằng chạm (design-interactions.js) → thêm biểu tượng gợi ý. */
@media (max-width: 480px) {
  #qt-row1, #qt-row2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: var(--space-5) !important; }
  #qt-row1 > .qt-flip, #qt-row2 > .qt-flip { min-height: 0; }
  .qt-flip .qt-inner { min-height: 210px; height: 100%; }
  .qt-flip .qt-face { font-size: 12px; }
}
@media (hover: none) {
  .qt-flip::after { content: ""; position: absolute; z-index: 3; top: 8px; right: 8px; width: 28px; height: 28px; border-radius: var(--radius-round); background: rgba(255,255,255,.92) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23145f76' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 0 1 15.5-6.2L21 8'/%3E%3Cpath d='M21 3v5h-5'/%3E%3Cpath d='M21 12a9 9 0 0 1-15.5 6.2L3 16'/%3E%3Cpath d='M3 21v-5h5'/%3E%3C/svg%3E") center / 16px no-repeat; box-shadow: var(--elevation-1); pointer-events: none; transition: opacity var(--dur-base, .2s); }
  .qt-flip[data-flipped]::after { opacity: 0; }
}

/* Thu mua: ảnh giới thiệu vuông full-width chiếm ~650px mỗi ảnh trên tablet → tỉ lệ ngang;
   4 bước thu mua giữ lưới 2 cột trên mobile thay vì 1 cột nhiều khoảng trắng */
@media (max-width: 900px) {
  .tw-page-thu-mua-dong-ho-cu #tm-intro [role="img"] { flex: none !important; aspect-ratio: 16 / 10 !important; min-height: 0 !important; height: auto !important; }
}
@media (max-width: 767px) {
  .tw-page-thu-mua-dong-ho-cu #tm-intro [role="img"] { aspect-ratio: 4 / 3 !important; }
  .tw-page-thu-mua-dong-ho-cu #tm-steps { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; column-gap: var(--space-5) !important; row-gap: var(--space-8) !important; margin-top: var(--space-9); }
}

/* Thay dây – Stacking Cards on Scroll (#td-stack): Desktop giữ hiệu ứng sticky xếp chồng.
   Mobile: bản gốc chuyển thành 7 card dọc (~3.800px) → rail vuốt ngang có snap, hé card kế tiếp. */
@media (max-width: 767px) {
  .tw-page-thay-day-dong-ho #td-stack { flex-direction: row !important; flex-wrap: nowrap !important; align-items: stretch; gap: var(--space-5) !important; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(-1 * var(--container-gutter)); padding: 0 var(--container-gutter) var(--space-4) !important; scroll-padding-inline: var(--container-gutter); }
  .tw-page-thay-day-dong-ho #td-stack::-webkit-scrollbar { display: none; }
  .tw-page-thay-day-dong-ho #td-stack > .td-stack-card { flex: 0 0 86%; margin: 0 !important; scroll-snap-align: start; grid-template-rows: auto 1fr; }
}

/* =========================================================================
   6. VÙNG CHẠM (≤1023px) – mở rộng hit-area mà không đổi bố cục thị giác
   ========================================================================= */
@media (max-width: 1023px) {
  /* Link số điện thoại, email, Zalo, "Xem thêm", "Xem bản đồ" nằm trong dòng chữ */
  .d-7bb4174728, .d-2b9c462bac, .d-e62efd464e, .d-dd92c714ff, .d-5def605fa2, .d-6a0b9696e5, .d-d1263c137d, .d-445284f937, .d-2f73ba05aa, .d-8b755d21a9, .tw-section-heading > a { display: inline-flex; align-items: center; padding-block: 11px; margin-block: -11px; }
  /* Tab chi nhánh trên bản đồ */
  .d-3c041e9958 { min-height: 44px; }
  /* Chấm chỉ báo carousel quy trình (cao 3px) */
  .d-f8c17ef05e, .d-afd5bd6a7e { position: relative; }
  .d-f8c17ef05e::after, .d-afd5bd6a7e::after { content: ""; position: absolute; inset: -20px -4px; }
}

/* =========================================================================
   7. HEADER DESKTOP – đối chiếu thiết kế gốc (≥1024px, header desktop)
   ========================================================================= */
@media (min-width: 1024px) {
  /* "Trang chủ" luôn mang padding-bottom của trạng thái active nên cao hơn các mục khác ~2px.
     Mọi mục dùng cùng hộp (đệm + viền trên/dưới trong suốt) → thẳng hàng, gạch chân active cách chữ 4px như nguồn. */
  #om-hdr-top nav > a, #om-hdr-top nav > button { padding: var(--space-2) 0; border-top: var(--border-w-thick, 2px) solid transparent; }
  /* Mega đang mở: chữ teal, mũi tên xoay lên (n.color / n.rot trong nguồn) */
  #om-hdr-top nav > [data-tw-menu] svg { transition: transform var(--dur-base) var(--ease-out); }
  #om-hdr-top nav > [data-tw-menu][aria-expanded="true"] { color: var(--teal-700); }
  #om-hdr-top nav > [data-tw-menu][aria-expanded="true"] svg { transform: rotate(180deg); }
}

/* "Các dịch vụ tại cửa hàng TopWatch" (#dich-vu) on every template: the design's wrapping rows
   flatten into one 3-column grid on mobile, as on the homepage (home-responsive-review.css). */
@media (max-width: 767px) {
  #dich-vu .d-e6fa0f7fcd { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--tw-c-space-4) var(--tw-c-space-3); }
  #dich-vu .d-370d219105 { display: contents; }
  #dich-vu .d-bfc50812ae { min-width: 0; gap: var(--tw-c-space-2); }
  #dich-vu .d-68b6b1076a { font-size: var(--tw-c-caption); line-height: 1.45; }
}

/* "Cẩm nang" heading (#cam-nang) links to the archive itself; on mobile the separate "Xem thêm" link is dropped. */
.tw-heading-link { color: inherit; text-decoration: none; }
.tw-heading-link:hover { color: var(--teal-700); }
.tw-heading-link:focus-visible { outline: 2px solid var(--teal-700); outline-offset: 3px; }
@media (max-width: 767px) {
  #cam-nang :is([data-tw-action="tipsPrev"], [data-tw-action="tipsNext"]) { display: none; }
  #cam-nang .d-191d76d7a5 > .d-dd92c714ff { display: none; }
  #cam-nang .d-191d76d7a5 { justify-content: flex-start; }
}

/* "Đặt lịch …" booking heading: uppercase like every other section heading. */
.d-0118e2bcef { text-transform: uppercase; letter-spacing: .01em; }

/* Footer trust strip (#lh-trust-strip) on every template: three commitments on one row on mobile, as on the homepage. */
@media (max-width: 767px) {
  #lh-trust-strip { padding-block: var(--tw-c-space-5); }
  #lh-trust-strip #lh-trust-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: var(--tw-c-space-3) !important; }
  #lh-trust-grid > div { min-width: 0; padding: 0; gap: var(--tw-c-space-2); }
  #lh-trust-grid svg { width: var(--tw-c-space-5); height: var(--tw-c-space-5); }
  #lh-trust-grid :is(.d-f8615e4ddd, .d-38d89f7637) { text-wrap: balance; }
}

/* Footer link groups as dropdowns on mobile (details built by site.js), same values as the homepage
   (home-responsive-review.css). Progressive enhancement: without JS all footer links remain visible. */
@media (max-width: 767px) {
  body:not(.home) #om-footer { padding-block: var(--tw-c-space-5); }
  body:not(.home) #om-footer .d-4052a77eea { grid-template-columns: 1fr !important; gap: 0; padding-bottom: var(--tw-c-space-5); }
  body:not(.home) #om-footer .d-4052a77eea > :first-child { margin-bottom: var(--tw-c-space-5); }
  body:not(.home) #om-footer .d-4052a77eea > div { grid-column: 1 / -1; }
  body:not(.home) #om-footer .d-cc463df104 { width: 132px; height: auto; }
  body:not(.home) #om-footer .d-ff9e1ecfff { min-height: var(--tw-c-control); }
  body:not(.home) #om-social a { width: var(--tw-c-control); height: var(--tw-c-control); }
  body:not(.home) .tw-compact-footer-group { border-top: 1px solid var(--border-default); }
  body:not(.home) .tw-compact-footer-group > summary {
    display: flex; align-items: center; justify-content: space-between;
    min-height: 52px; gap: var(--tw-c-space-3); cursor: pointer; list-style: none;
  }
  body:not(.home) .tw-compact-footer-group > summary::-webkit-details-marker { display: none; }
  body:not(.home) .tw-compact-footer-group > summary::after { content: ''; width: 8px; height: 8px; border: solid var(--teal-700); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); margin-right: var(--tw-c-space-1); }
  body:not(.home) .tw-compact-footer-group[open] > summary::after { transform: rotate(225deg); }
  body:not(.home) #om-footer .tw-compact-footer-group h3 { margin: 0; }
  body:not(.home) #om-footer .tw-compact-footer-group .d-f6641f3426 { padding-bottom: var(--tw-c-space-3); }
  body:not(.home) #om-footer .tw-compact-footer-group.tw-compact-footer-services .d-f6641f3426 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--tw-c-space-4); }
  body:not(.home) #om-footer .d-181ff79eff { padding-top: var(--tw-c-space-4); gap: var(--tw-c-space-4); }
}

/* Mobile menu drawer slides in from the left (section 1). */
@keyframes tw-drawer-in { from { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) { .tw-mobile-menu:not([hidden]) { animation: none; } }

/* Mobile header: right icons 40px wide (44px tall) with no gap so the centred logo fits from 375px. */
@media (max-width: 767px) {
  #om-nav-mobile .d-cb0d07a719 { gap: 0; }
  #om-nav-mobile .d-9fb2df82e4 .d-cb0d07a719 > :is(.d-520743c997, .d-5cd20ffd8d) { min-width: 40px; width: 40px; } /* beats .home #om-nav-mobile :is(button, …) */
  #om-nav-mobile .d-1f5135d54d { width: auto; height: 30px; } /* compact logo; the homepage keeps its own 28px */
}

/* Floating contact buttons (#om-sticky-bar): back-to-top (after scrolling), call and Zalo
   stacked on the right edge. The wrapper is transparent; only the coloured squares show. */
#om-sticky-bar { position: fixed; z-index: var(--tw-contact-layer); left: auto; right: var(--space-4); bottom: calc(96px + env(safe-area-inset-bottom, 0px)); background: transparent; }
.tw-float-cta { display: grid; gap: var(--space-5); }
.tw-float-cta > :is(a, button) { all: unset; box-sizing: border-box; display: grid; place-items: center; width: 44px; height: 44px; cursor: pointer; }
.tw-float-cta > [hidden] { display: none; }
.tw-float-cta > :is(a, button):focus-visible { outline: 2px solid var(--teal-700); outline-offset: 2px; border-radius: 12px; }
.tw-float-cta span { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; color: var(--white); box-shadow: 0 4px 12px rgba(7, 25, 35, .22); }
.tw-float-cta-top span { background: var(--teal-800); }
.tw-float-cta-call span { background: #4cc764; } /* call green */
.tw-float-cta-zalo span { background: #0068ff; } /* Zalo brand blue */
@media (min-width: 1024px) {
  #om-sticky-bar { display: flex !important; right: var(--space-8); bottom: var(--space-9); }
}

/* WooCommerce notices on mobile ("… đã được thêm vào giỏ hàng"): smaller text, the button on its own line. */
@media (max-width: 767px) {
  .woocommerce-message { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); padding: var(--space-6); font-size: 12px; line-height: 1.5; }
  .woocommerce-message a.button { min-height: 36px; padding: var(--space-3) var(--space-6); font-size: 12px; }
}

/* iOS Safari zooms into any text field under 16px on focus; keep form fields at 16px on mobile. */
@media (max-width: 767px) {
  :is(input:not([type="checkbox"], [type="radio"], [type="submit"], [type="button"], [type="hidden"], [type="file"], [type="range"], [type="color"]), select, textarea) { font-size: 16px !important; }
}

/* Quick-nav card under the service-page hero (Giá …, Quy trình …, Tiêu chuẩn chất lượng, Câu hỏi thường gặp):
   compact 2×2 on mobile, icon + label aligned left, no dividers. */
@media (max-width: 767px) {
  .d-50cfd6a296 { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: var(--space-3); row-gap: var(--space-1); }
  .d-50cfd6a296 > a { justify-content: flex-start; gap: var(--space-4); padding: var(--space-3) clamp(var(--space-2), 2vw, var(--space-4)); border-left: 0; border-radius: var(--radius-sm); }
  .d-50cfd6a296 > a > svg { width: 22px; height: 22px; }
  .d-50cfd6a296 .d-0e8dce67d4 { font-size: var(--tw-c-card-title); font-weight: var(--fw-regular); }
}

/* Hero benefits list (heroUspCols: sửa chữa, thay dây, thay pin, đánh bóng, lau dầu, thay mặt kính) where layout.css stacks it:
   three items on one row, icon above a short caption (≤ 2 lines, balanced). Icon/caption by position, since the
   caption class differs per page. */
@media (max-width: 900px) {
  [data-tw-responsive=heroUspCols] { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: var(--space-4); }
  [data-tw-responsive=heroUspCols] > div { flex-direction: column; justify-content: flex-start; gap: var(--space-3); text-align: center; }
  [data-tw-responsive=heroUspCols] > div > span:first-child { width: 24px; height: 24px; }
  [data-tw-responsive=heroUspCols] > div > span:last-child { max-inline-size: 14ch; font-size: var(--tw-c-caption); line-height: 1.35; text-wrap: balance; }
}

/* Price tables (.d-26e125e43f: thay pin, căn chỉnh, cắt mắt dây, thay mặt kính; .d-f9cb5c9f7c: the three strap tables
   on thay dây; .d-19091c7d4e: đánh bóng): on mobile the whole table fits
   the screen with no sideways scroll – no 520px minimum, smaller wrapping headers, tighter cells, and column widths
   set per table type (segment tables: narrow "Phân khúc" + two equal price columns; glass and strap tables: name/price/warranty). */
@media (max-width: 767px) {
  :is(.d-26e125e43f, .d-f9cb5c9f7c, .d-19091c7d4e) { min-width: 0; }
  :is(.d-26e125e43f, .d-f9cb5c9f7c, .d-19091c7d4e) th { padding: var(--space-5) var(--space-3); font-size: var(--tw-c-caption); letter-spacing: 0; white-space: normal; }
  :is(.d-26e125e43f, .d-f9cb5c9f7c, .d-19091c7d4e) td { padding: var(--space-5) var(--space-3); }
  .d-19091c7d4e th:first-child { width: 30%; }
  .d-19091c7d4e td { white-space: nowrap; }
  :is(.tw-page-thay-pin-dong-ho, .tw-page-can-chinh-nhanh-cham, .tw-page-cat-mat-day-dong-ho) .d-26e125e43f th:first-child { width: 22%; }
  .tw-page-thay-mat-kinh-dong-ho .d-26e125e43f th:nth-child(1) { width: 38%; }
  .tw-page-thay-mat-kinh-dong-ho .d-26e125e43f th:nth-child(2) { width: 34%; }
  .tw-page-thay-mat-kinh-dong-ho .d-26e125e43f td { white-space: normal; text-wrap: balance; }
  .tw-page-thay-mat-kinh-dong-ho .d-26e125e43f td:nth-child(2) { white-space: nowrap; }
  .d-f9cb5c9f7c th:nth-child(1) { width: 40%; }
  .d-f9cb5c9f7c th:nth-child(2) { width: 36%; }
  .d-f9cb5c9f7c td { white-space: normal; text-wrap: balance; }
  .d-f9cb5c9f7c td:nth-child(2) { white-space: nowrap; }
}

/* Brand grid "30+" card on every page with the brand section: only the number shows on mobile; the
   "Thương hiệu khác" label stays in the DOM for screen readers. */
@media (max-width: 767px) {
  .d-eb1279a218 > .d-949be0b580 { font-size: clamp(26px, 8vw, 32px); }
  :is(.d-4dbc09f398 > .d-5e071c77fa, .d-eb1279a218 > .d-09dbc6b141) { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* Segment tabs above the price table (Phân khúc A–E: sửa chữa, lau dầu): all five visible on mobile instead of a
   sideways-scrolling row – three per row, the last row centred. Overrides the scroll-row centring of section 3
   (div:has(> [data-tw-tier-button]): flex-start + auto margins on the first/last tab). */
@media (max-width: 767px) {
  .d-dd788eaf18:has(> [data-tw-tier-button]) { flex-wrap: wrap; justify-content: center !important; overflow: visible; gap: var(--space-4); padding-bottom: 0; scroll-snap-type: none; }
  .d-dd788eaf18 > .d-b95bc6e0b4 { flex: 0 0 calc((100% - 2 * var(--space-4)) / 3); margin-inline: 0 !important; }
  .d-dd788eaf18 > .d-b95bc6e0b4 > .d-0a3443d29b { width: 100%; height: 40px; padding: 0 var(--space-3); }
}

/* Mobile menu "Thương hiệu": the same A–Z brand list as the desktop mega menu (inc/navigation.json), in two columns. */
@media (max-width: 1023px) {
  .tw-mobile-menu .tw-mnav-acc[data-tw-mnav="thuong-hieu"] .tw-mnav-links { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-6); }
}

/* "Thông tin liên hệ" (#lh-thong-tin on liên hệ and thương hiệu), mobile: the contact card sits flush with the left
   edge with a large top-right radius, details on the left and the Zalo QR on the right. The card comes first and rises
   32px above the dark band (both pages, 29/10/2026); the intro text and call button follow. The intro's line spans join into one paragraph ≤1100px and
   have no whitespace between them, so a space is added. */
@media (max-width: 1100px) { .lh-info-line + .lh-info-line::before { content: " "; } }
@media (max-width: 767px) {
  #lh-info-card { margin-left: calc(-1 * var(--container-gutter)); padding: var(--space-8) var(--space-7) var(--space-8) calc(var(--container-gutter) + var(--space-3)); border-radius: 0 44px 16px 0 !important; }
  #lh-info-card .d-25624ed604 { margin-bottom: var(--space-7); }
  #lh-info-card-body { grid-template-columns: minmax(0, 1fr) auto !important; align-items: start; justify-items: stretch; gap: var(--space-6); }
  #lh-info-card .d-ac5cfb572d { gap: var(--space-6); }
  #lh-info-card .d-817e48a6e8 { width: 112px; height: 112px; padding: 6px; }
  #lh-info-card { order: -1; }
  #lh-info-text { padding: var(--space-8) 0 0 !important; }
  #lh-info-band, #lh-info-shade { top: var(--space-9) !important; }
}
@media (max-width: 374px) { #lh-info-card { padding-right: var(--space-6); } #lh-info-card-body { gap: var(--space-5); } #lh-info-card .d-817e48a6e8 { width: 92px; height: 92px; padding: 5px; } }

/* Footer "Mạng xã hội": short teal accent bar and uppercase label above the social icons (indented like the address
   block); icons in brand teal, no outline. */
.tw-social-title { margin: var(--space-8) 0 var(--space-4); padding-left: calc(22px + var(--space-5)); font: var(--fw-medium) 14px/1.3 var(--font-sans); letter-spacing: .04em; text-transform: uppercase; color: var(--text-heading); }
.tw-social-title::before { content: ""; display: block; width: 56px; height: 2px; margin-bottom: var(--space-5); background: var(--teal-700); }
#om-social { margin-top: 0; margin-left: -4px; } /* 24px glyph in a 32px link: pull back the 4px inset to line up with the label */
#om-social a { color: var(--teal-700); }
#om-social a:hover { color: var(--teal-800); }
@media (max-width: 767px) { #om-social { margin-left: -10px; } } /* 44px tap areas on mobile: 10px inset */
@media (min-width: 768px) and (max-width: 1024px) { .home #om-social { margin-left: -10px; } }

/* [data-tw-mobile-marquee] (site.js): on mobile the children run as an endless right-to-left strip at a steady
   ~30px/s. The track holds every item twice plus a trailing gap, so moving it by -50% lands exactly on the start.
   "photos" (hero collages: căn chỉnh nhanh chậm, lau dầu): equal 200×150 photo cards, full-bleed.
   "cards" (process cards, cắt mắt dây): the cards keep 78vw and their own content.
   Touch-and-hold pauses it; hover pauses only with a real pointer (on phones :hover sticks after a tap and would leave
   the strip frozen). Reduced motion: no animation, swipe instead. */
@media (max-width: 767px) {
  [data-tw-mobile-marquee].is-mobile-marquee { overflow: hidden; }
  .tw-mobile-marquee-track { display: flex; gap: var(--space-5); width: max-content; padding-right: var(--space-5); animation: tw-mobile-marquee var(--tw-marquee-time, 36s) linear infinite; }
  [data-tw-mobile-marquee].is-mobile-marquee:active .tw-mobile-marquee-track { animation-play-state: paused; }
  @media (hover: hover) { [data-tw-mobile-marquee].is-mobile-marquee:hover .tw-mobile-marquee-track { animation-play-state: paused; } }
  :is(#sc-hero-media, [data-tw-mobile-marquee="photos"]).is-mobile-marquee { width: auto !important; aspect-ratio: auto !important; height: auto; margin-inline: calc(-1 * var(--container-gutter)); }
  [data-tw-mobile-marquee="photos"] .tw-mobile-marquee-track { padding-block: var(--space-4) var(--space-6); }
  [data-tw-mobile-marquee="photos"] .tw-mobile-marquee-track > * { position: relative; inset: auto; flex: 0 0 auto; width: 200px; height: 150px; border-radius: 12px; overflow: hidden; }
  [data-tw-mobile-marquee="photos"] .tw-mobile-marquee-track > * img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  [data-tw-mobile-marquee="photos"] .tw-mobile-marquee-track > img { object-fit: cover; } /* photos placed directly in the collage (lau dầu) */
  #primary [data-tw-responsive=heroCols] > [data-tw-collage].is-mobile-marquee { width: auto !important; height: auto !important; min-height: 0 !important; margin-inline: calc(-1 * var(--container-gutter)); }
  [data-tw-mobile-marquee="cards"] { --tw-marquee-time: 60s; }
  [data-tw-mobile-marquee="cards"] .tw-mobile-marquee-track > * { flex: 0 0 78vw; }
}
@keyframes tw-mobile-marquee { to { transform: translate3d(-50%, 0, 0); } }
@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
  [data-tw-mobile-marquee].is-mobile-marquee { overflow-x: auto; scrollbar-width: none; }
  .tw-mobile-marquee-track { animation: none; }
}

/* Single posts, policy and guide pages: hide the sidebar only on mobile. */
@media (max-width: 767px) {
  body.single-post .tw-editorial-sidebar, .tw-policy-page .tw-editorial-sidebar { display: none; }
}

/* Flip-card process (#qt-row1 title + steps 1–3, #qt-row2 steps 4–8: sửa chữa, đánh bóng), mobile: both design rows
   merge into one 2-column grid (title spans the row), 8 steps in four rows, every card as tall as the tallest one.
   Faces and icons are matched by structure because their classes differ per page. */
@media (max-width: 767px) {
  #quy-trinh .d-9cc49ff864:has(> #qt-row1) { position: relative; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto; grid-auto-rows: 1fr; gap: var(--space-6) var(--space-5); }
  #quy-trinh :is(#qt-row1, #qt-row2) { display: contents; }
  #quy-trinh #qt-row1 > .d-dce62f4158 { grid-column: 1 / -1; }
  #quy-trinh .qt-flip .qt-inner { min-height: 0 !important; }
  #quy-trinh .qt-inner > .qt-face:first-child { padding: var(--space-6) var(--space-5); gap: var(--space-4); }
  #quy-trinh .qt-face .d-fdc275a9ce { align-self: flex-start; } /* the touch flip hint sits in the top-right corner */
  #quy-trinh .qt-inner > .qt-face:first-child > span[aria-hidden] { width: 56px; height: 56px; }
  #quy-trinh .qt-inner > .qt-face:first-child > span[aria-hidden] > svg { width: 28px; height: 28px; }
}

/* Hero copy: staggered fade-up on load (service pages #sc-hero-text; lau dầu .d-4b0447ae7a). Title → intro → CTA group
   → criteria (divider + list), 0.18s apart, 0.6s ease-out, 16px rise. Only opacity/transform animate, so the layout is
   identical during and after; the end state is the normal one. Reduced motion: no animation. */
@keyframes tw-fade-up { from { opacity: 0; transform: translate3d(0, 16px, 0); } to { opacity: 1; transform: none; } }
:is(#sc-hero-text, [data-tw-responsive=heroCols] > .d-4b0447ae7a) > * { animation: tw-fade-up .6s var(--ease-out, ease-out) both; }
:is(#sc-hero-text, [data-tw-responsive=heroCols] > .d-4b0447ae7a) > :nth-child(2) { animation-delay: .18s; }
:is(#sc-hero-text, [data-tw-responsive=heroCols] > .d-4b0447ae7a) > :nth-child(3) { animation-delay: .36s; }
:is(#sc-hero-text, [data-tw-responsive=heroCols] > .d-4b0447ae7a) > :nth-child(n+4) { animation-delay: .54s; }
@media (prefers-reduced-motion: reduce) {
  :is(#sc-hero-text, [data-tw-responsive=heroCols] > .d-4b0447ae7a) > * { animation: none; }
}

/* Scroll reveal (site.js adds .tw-reveal only to sections below the first screen, then .is-revealed in view):
   fade up 24px, 0.6s ease-out; the classes are removed when it ends. Without JS nothing is hidden. */
.tw-reveal { opacity: 0; transform: translate3d(0, 24px, 0); transition: opacity .6s var(--ease-out, ease-out), transform .6s var(--ease-out, ease-out); }
.tw-reveal.is-revealed { opacity: 1; transform: none; }

/* Price tiers (#bang-gia: sửa chữa, lau dầu): the A–E panels share one grid cell; unselected panels keep their space
   but are invisible, so the block always has the height of the tallest panel (Phân khúc A) and switching tabs no
   longer moves the content below. The tab bar (same wrapper) keeps the row above. Hidden panels stay out of the accessibility tree and clicks (visibility). */
#bang-gia div:has(> [data-tw-tier]) { display: grid; }
#bang-gia div:has(> [data-tw-tier]) > :not([data-tw-tier]) { grid-row: 1; } /* the A–E tab bar stays above the tables */
#bang-gia [data-tw-tier] { grid-area: 2 / 1; align-self: start; min-width: 0; }
#bang-gia [data-tw-tier][hidden] { display: block !important; visibility: hidden; } /* beats layout.css [hidden] { display: none !important } */

/* Pagination (shop, categories, blog) on phones: one row – site.js hides the far pages (.tw-page-hidden) and adds one
   "…" per gap; buttons shrink to 34px (28px under 375px) so ‹ 1 … 4 5 6 … 453 › fits. */
@media (max-width: 767px) {
  .tw-page-hidden { display: none !important; }
  :is(.woocommerce-pagination ul.page-numbers, .tw-pagination, .tw-pagination .nav-links) { flex-wrap: nowrap !important; gap: 6px !important; }
  :is(.woocommerce-pagination, .tw-pagination) .page-numbers:not(ul) { min-width: 34px !important; height: 34px !important; padding: 0 6px !important; font-size: 13px !important; }
}
@media (max-width: 374px) {
  :is(.woocommerce-pagination ul.page-numbers, .tw-pagination, .tw-pagination .nav-links) { gap: 4px !important; }
  :is(.woocommerce-pagination, .tw-pagination) .page-numbers:not(ul) { min-width: 28px !important; height: 30px !important; padding: 0 4px !important; font-size: 12px !important; }
}