/* 3X-BOND — hover states.
   Chuyển 177 thuộc tính style-hover="" của prototype (không phải HTML thật) thành CSS thật.
   !important là bắt buộc vì inline style thắng class — hệ quả trực tiếp của quyết định Đ1.
   Không transition: toàn bộ markup và site.css có 0 khai báo transition, prototype đổi màu tức thì.
   Bọc @media (hover:hover) để trạng thái hover không dính lại sau khi chạm trên thiết bị cảm ứng. */

@media (hover:hover){
  .hv-bg-red-dark:hover{background:#b81b22 !important}
  .hv-c-gold:hover{color:#f2b31a !important}
  .hv-c-red:hover{color:#d8232a !important}
  .hv-bd-green:hover{border-color:#2e6b1d !important}
  .hv-bg-zalo:hover{background:#0960cb !important}
  .hv-bdc-red:hover{border-color:#d8232a !important;color:#d8232a !important}
  .hv-bdc-gold:hover{border-color:#f2b31a !important;color:#f2b31a !important}
  .hv-bd-gold-lift:hover{border-color:#d79b0e !important;transform:translateY(-2px)}
  .hv-bd-green-lift:hover{border-color:#4ca22f !important;transform:translateY(-2px)}
  .hv-bd-ink:hover{border-color:#1c1c1e !important}
  .hv-bg-blue-pale:hover{background:#eaf3ff !important}
  .hv-bd-gold:hover{border-color:#f2b31a !important}
  .hv-bd-red:hover{border-color:#d8232a !important}
  .hv-bg-red-pale:hover{background:#fdecec !important}
  .hv-bg-gold-dark:hover{background:#dda012 !important}
  .hv-c-red-dark:hover{color:#b81b22 !important}
  .hv-bd-input:hover{border-color:#ded8cc !important}
  .hv-white-red:hover{background:#ffffff !important;border-color:#d8232a !important;color:#d8232a !important}
  .hv-bg-cream:hover{background:#f6f2ea !important}
  .hv-bg-cream-2:hover{background:#f0ebe0 !important}
  .hv-bg-red:hover{background:#d8232a !important}
  .hv-c-red-deep:hover{color:#c1121a !important}
  .hv-c-ink:hover{color:#1c1c1e !important}
  .hv-bd-gold-tint:hover{border-color:#f2b31a !important;background:rgba(242,179,26,.14) !important}
  .hv-bg-white-16:hover{background:rgba(255,255,255,.16) !important}
  .hv-grad-red:hover{background:linear-gradient(180deg,#c1121a,#a20f16) !important}
  .hv-bg-err:hover{background:#fdeceb !important}
  .hv-bg-blue-pale-2:hover{background:#eef5ff !important}
  .hv-bg-sand-red:hover{background:#e6e0d4 !important;color:#d8232a !important}
  .hv-bg-red-dark-lift:hover{background:#b81b22 !important;transform:translateY(-2px)}
  .hv-ink-invert:hover{background:#1c1c1e !important;color:#ffffff !important}
}

:focus-visible{outline:3px solid #f2b31a;outline-offset:2px}
::selection{background:#f2b31a;color:#1c1c1e}

/* Thuộc tính hidden của HTML chỉ đặt display:none ở UA stylesheet, nên bị inline
   style đè. Drawer mobile mang sẵn style="display:flex" từ thiết kế, không có rule
   này thì nó hiện trên mọi trang và đẩy nội dung xuống 405px. */
[hidden]{display:none !important}

/* Header chật khi có thêm nút giỏ hàng: từ 1400px trở xuống nút Tìm kiếm
   thu về chỉ còn icon. Nhãn vẫn còn cho trình đọc màn hình qua aria-label. */
/* Khung nội dung của thiết kế khoá ở 1400px, nên thanh header có cùng chỗ trống
   ở mọi bề rộng từ 1440px lên. Đo được: cần 1434px, có 1400px — thiếu 34px ở
   MỌI bề rộng desktop, kể cả 1920. Bỏ chữ "Tìm kiếm" để nút thành ô vuông chỉ
   có kính lúp, giải phóng ~62px. Đây không phải chuyện màn hình nhỏ. */
[data-search-label]{display:none !important}

/* Nút Giỏ hàng chỉ hiện khi có hàng, rộng 175px. Nó là thứ làm thanh header hết
   chỗ: đo được cụm bên phải cần 639px, cộng logo và menu thì vượt khung 1400px
   ở mọi bề rộng desktop. Thu khối chữ hotline lại thành icon điện thoại trong dải
   hẹp (đo được: đến 1599px vẫn thiếu 7px) — số vẫn bấm gọi được vì cả khối là thẻ <a href="tel:">, và menu vẫn đủ chỗ
   thay vì phải rơi xuống hamburger ở laptop 1440. */
@media (max-width:1600px){[data-hotline-text]{display:none !important}}

/* Laptop Windows để scaling 125-150% có viewport CSS chỉ 1229-1536px, dù màn hình
   vật lý là 1920. Ngưỡng hamburger 1330px vì thế đá văng đúng nhóm máy phổ biến
   nhất xuống menu gộp. Thay vì gộp menu, thu gọn hai thứ ít giá trị nhất để lấy
   ~160px: 4 chấm vàng ngăn cách (thuần trang trí) và chữ "Giỏ hàng" (icon giỏ và
   số badge vẫn còn, vẫn hiểu ngay). */
@media (max-width:1440px){
  [data-navdot]{display:none !important}
  [data-cart-label]{display:none !important}
  [data-nav-desk]{gap:18px !important}
}