/* [awood_hotspot] – ảnh nhà mẫu + khung ngắm "Target Cursor" bắt vào từng hạng mục */
.aw-hs { position: relative; max-width: 1230px; margin: 0 auto; --aw-hs-c: #e27929; }
.aw-hs__stage { position: relative; border-radius: 14px; overflow: hidden; background: #fff; }
.aw-hs__img { display: block; width: 100%; height: auto; user-select: none; -webkit-user-drag: none; }
.aw-hs.is-fine .aw-hs__stage, .aw-hs.is-fine .aw-hs__t { cursor: none; }

/* vùng hạng mục: trong suốt, chỉ có chấm nhấp nháy ở giữa để người xem biết chỗ rê vào */
.aw-hs .aw-hs__t, .aw-hs .aw-hs__t:hover, .aw-hs .aw-hs__t:focus, .aw-hs .aw-hs__t:active {
  position: absolute; padding: 0 !important; margin: 0 !important; border: 0 !important; border-radius: 6px !important;
  background: transparent !important; box-shadow: none !important; min-width: 0 !important; min-height: 0 !important;
  color: inherit !important; opacity: 1 !important; transform: none !important; line-height: 0 !important; cursor: pointer; }
.aw-hs__t:focus { outline: none; }
.aw-hs__t:focus-visible { outline: 2px dashed var(--aw-hs-c); outline-offset: 4px; }
.aw-hs__dot { position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%;
  background: var(--aw-hs-c); border: 3px solid #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .35); transition: transform .2s, opacity .2s; }
.aw-hs__dot::after { content: ""; position: absolute; inset: -9px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .9); animation: aw-hs-pulse 2s ease-out infinite; }
@keyframes aw-hs-pulse { from { transform: scale(.5); opacity: 1; } to { transform: scale(1.6); opacity: 0; } }
.aw-hs__t.is-on .aw-hs__dot { transform: scale(.6); opacity: .0; }

/* khung ngắm: 4 góc quay chậm khi đi theo chuột, "bắt" quanh hạng mục khi rê vào */
.aw-hs__cur { position: absolute; left: 0; top: 0; width: 0; height: 0; z-index: 5; pointer-events: none; opacity: 0;
  --w: 34px; --h: 34px; transition: opacity .2s, transform .12s ease-out; }
.aw-hs.is-fine.is-in .aw-hs__cur, .aw-hs.is-locked .aw-hs__cur { opacity: 1; }
.aw-hs.is-locked .aw-hs__cur { transition: opacity .2s, transform .28s cubic-bezier(.2, .8, .2, 1); }
.aw-hs__rot { position: absolute; left: 0; top: 0; animation: aw-hs-spin 5s linear infinite; }
.aw-hs.is-locked .aw-hs__rot { animation: none; }
@keyframes aw-hs-spin { to { transform: rotate(360deg); } }
.aw-hs__rot i { position: absolute; left: 0; top: 0; width: 18px; height: 18px; border: 3px solid var(--aw-hs-c);
  filter: drop-shadow(0 0 1px rgba(255, 255, 255, .9)) drop-shadow(0 1px 2px rgba(0, 0, 0, .35));
  transition: transform .28s cubic-bezier(.2, .8, .2, 1); }
.aw-hs__rot .tl { border-right: 0; border-bottom: 0; transform: translate(calc(var(--w) / -2), calc(var(--h) / -2)); }
.aw-hs__rot .tr { border-left: 0; border-bottom: 0; transform: translate(calc(var(--w) / 2 - 18px), calc(var(--h) / -2)); }
.aw-hs__rot .bl { border-right: 0; border-top: 0; transform: translate(calc(var(--w) / -2), calc(var(--h) / 2 - 18px)); }
.aw-hs__rot .br { border-left: 0; border-top: 0; transform: translate(calc(var(--w) / 2 - 18px), calc(var(--h) / 2 - 18px)); }
.aw-hs__cd { position: absolute; left: -3px; top: -3px; width: 6px; height: 6px; border-radius: 50%; background: var(--aw-hs-c); box-shadow: 0 0 0 2px #fff; transition: opacity .2s; }
.aw-hs.is-locked .aw-hs__cd { opacity: 0; }

/* thẻ tên hạng mục + nút xem sản phẩm */
.aw-hs__card { position: absolute; left: 0; top: 0; z-index: 6; width: 260px; padding: 14px 16px 16px; border-radius: 10px;
  background: #fffcf7; border: 1px solid #cdb9a2; border-top: 3px solid var(--aw-hs-c); box-shadow: 0 12px 32px rgba(36, 26, 18, .2);
  opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .18s, transform .18s, visibility .18s; }
.aw-hs__card.is-show { opacity: 1; visibility: visible; transform: none; }
.aw-hs__card p { margin: 0; }
.aw-hs .aw-hs__k { color: #a3500e !important; font: 600 11px/1.2 "Be Vietnam Pro", sans-serif !important; letter-spacing: .08em; text-transform: uppercase; }
.aw-hs .aw-hs__name { margin-top: 4px !important; color: #241a12 !important; font: 700 18px/1.3 "Be Vietnam Pro", sans-serif !important; }
.aw-hs .aw-hs__desc { margin-top: 6px !important; color: #5e4c3e !important; font: 400 13.5px/1.5 "Be Vietnam Pro", sans-serif !important; }
.aw-hs__btn { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; padding: 9px 16px; border-radius: 999px;
  background: #6b4c37; color: #fff !important; text-decoration: none !important; font: 600 13px/1 "Be Vietnam Pro", sans-serif; transition: background .2s; }
.aw-hs__btn:hover, .aw-hs__btn:focus-visible { background: var(--aw-hs-c); }
.aw-hs__btn:focus-visible { outline: 2px solid #241a12; outline-offset: 2px; }
.aw-hs__hint { margin: 12px 0 0; text-align: center; color: #5e4c3e; font: 400 13.5px/1.5 "Be Vietnam Pro", sans-serif; }

/* điện thoại / máy tính bảng dọc: thẻ nằm dưới ảnh */
@media (max-width: 767px) {
  .aw-hs__card { position: relative; left: auto !important; top: auto !important; width: auto; margin-top: 12px; display: none; transform: none; }
  .aw-hs__card.is-show { display: block; }
  .aw-hs__dot { width: 12px; height: 12px; margin: -6px 0 0 -6px; border-width: 2px; }
}
@media (prefers-reduced-motion: reduce) {
  .aw-hs__rot { animation: none; }
  .aw-hs__dot::after { animation: none; opacity: 0; }
  .aw-hs__cur, .aw-hs__rot i, .aw-hs__card { transition: none !important; }
}