/*
 * 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) và mục 7 (header desktop đối chiếu lại với thiết kế gốc).
 */

/* =========================================================================
   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; }

/* =========================================================================
   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; }

  .tw-search { width: 100%; padding-inline: var(--container-gutter); }

  /* Menu mobile – theo thiết kế gốc (#om-nav-mobile accordion):
     viền trên mảnh, lề 16px, tối đa 70vh, mục cấp 1 đậm 16px màu chữ đậm, nhóm con 14px. */
  .tw-mobile-menu { max-height: min(70vh, calc(100dvh - var(--tw-drop-top, 64px))); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; background: var(--white); border-top: var(--border-w) solid var(--border-subtle); box-shadow: none; padding: var(--space-5) var(--container-gutter) var(--space-7); }
  .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-account { display: flex; align-items: center; gap: var(--space-5); }
  .tw-mobile-menu .tw-mnav-account svg { flex: 0 0 auto; }
  .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-6); 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, .d-c2bc9e4799 .d-3f0b80de0b { width: 128px; font-size: 12px; line-height: 1.5; }
  .d-c2bc9e4799 .d-4ed59dcb8e, .d-c2bc9e4799 .d-c630e9d266 { width: 112px; white-space: normal; }  /* Lưới logo thương hiệu: 3 cột thay vì 1–2 cột cao */
  .d-320cff0cde { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: var(--space-4) !important; }
  .d-320cff0cde .d-b684e4f095 { width: 82%; height: 72%; }
}

/* =========================================================================
   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 > button svg { transition: transform var(--dur-base) var(--ease-out); }
  #om-hdr-top nav > button[aria-expanded="true"] { color: var(--teal-700); }
  #om-hdr-top nav > button[aria-expanded="true"] svg { transform: rotate(180deg); }
}