/* 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-lift:hover{transform:translateY(-2px)}
  .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 nằm trong khung 1120px ở mọi bề rộng, nên luôn dùng bản gọn: nút Tìm
   kiếm chỉ còn icon kính lúp, hotline chỉ còn icon điện thoại (cả khối vẫn là
   <a href="tel:">), bỏ 4 chấm vàng ngăn cách và chữ "Giỏ hàng" (icon và số vẫn
   còn). Nhãn vẫn còn cho trình đọc màn hình qua aria-label. */
[data-search-label],
[data-hotline-text],
[data-navdot],
[data-cart-label]{display:none !important}
[data-nav-desk]{gap:18px !important}

/* Slider công trình: ẩn thanh cuộn ngang (Firefox dùng scrollbar-width inline). */
[data-hslider]::-webkit-scrollbar{display:none}

/* Chấm chuyển slide chỉ cao 11px: nới vùng bấm cho ngón tay mà không đổi hình. */
[data-slide-dot]{position:relative}
[data-slide-dot]::after{content:"";position:absolute;inset:-17px -3px}

/* Lưới ảnh thi công thực tế (trang chủ + giới thiệu). Ảnh đầu to gấp đôi. */
.x3-tc-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:clamp(150px,17vw,250px);gap:clamp(8px,1vw,14px)}
.x3-tc-item{position:relative;display:block;overflow:hidden;border-radius:14px;background:#e7e2d8;box-shadow:0 10px 24px rgba(28,28,30,.08)}
.x3-tc-item img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.x3-tc-item:hover img{transform:scale(1.04)}
.x3-tc-big{grid-column:span 2;grid-row:span 2}
@media (max-width:760px){.x3-tc-grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:44vw}}
@media (prefers-reduced-motion:reduce){.x3-tc-item img{transition:none}}

/* Lưới video thực tế trên trang chủ. */
.x3-vid-grid{display:grid;grid-auto-flow:column;grid-auto-columns:clamp(170px,17vw,240px);grid-template-rows:clamp(300px,52vh,400px);gap:clamp(10px,1.2vw,16px);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:4px}
.x3-vid-grid::-webkit-scrollbar{display:none}
.x3-vid{scroll-snap-align:start}
.x3-vid{position:relative;margin:0;border-radius:14px;overflow:hidden;background:#101013}
.x3-vid video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#101013}
.x3-vid-wide{grid-column:span 2}
.x3-vid figcaption{position:absolute;left:10px;top:10px;right:10px;pointer-events:none;color:#fff;font-size:13.5px;font-weight:700;line-height:1.35;text-shadow:0 1px 6px rgba(0,0,0,.7)}
@media (max-width:560px){.x3-vid-grid{grid-auto-columns:62vw;grid-template-rows:420px}}

/* Hai số hotline: nơi chỉ có biểu tượng điện thoại (đầu trang, nút gọi nổi) hiện thẻ nhỏ
   liệt kê cả hai số khi rê chuột hoặc focus bàn phím. Mobile dùng thanh gọi dưới đáy. */
.x3-so{position:relative;display:flex;align-items:center}
.x3-so__the{display:none;position:absolute;z-index:96;top:100%;right:0;padding-top:10px}
.x3-so--trai .x3-so__the{top:50%;right:100%;padding:0 12px 0 0;transform:translateY(-50%)}
.x3-so:hover .x3-so__the,.x3-so:focus-within .x3-so__the{display:block}
.x3-so__hop{display:flex;flex-direction:column;gap:2px;min-width:210px;padding:8px;background:#16161a;border:1px solid rgba(242,179,26,.45);border-radius:12px;box-shadow:0 18px 40px rgba(0,0,0,.35)}
.x3-so__hop a{display:flex;align-items:center;gap:10px;min-height:44px;padding:0 12px;border-radius:8px;color:#ffffff;font-size:16px;font-weight:800;white-space:nowrap}
.x3-so__hop a:hover{background:rgba(255,255,255,.08);color:#f2b31a}
.x3-so__hop svg{width:20px !important;height:20px !important}

/* Menu mobile nhiều cấp: mũi tên ▾ xoay lên khi cấp con đang bung. */
[data-acc-toggle][aria-expanded="true"] span{display:inline-block;transform:rotate(180deg)}