/*
 * An Giang Mới — Theme V6 (copy từ wireframe, bỏ thanh review). Wireframe V5 "Chuyên mục theo lĩnh vực, địa danh là tag".
 * Nạp SAU agm-v4.css: giữ nguyên token màu & component V4, chỉ bổ sung phần mới.
 */

/* Chip địa danh (tag) — phân biệt với chip khu vực (.region-chip) */
.place-chip { display: inline-flex; align-items: center; gap: 4px; border-radius: 3px; background: var(--agm-pearl-pale); color: var(--agm-pearl-deep); padding: 1px 6px; font-size: 10.5px; font-weight: 700; letter-spacing: .02em; text-transform: none; }
.place-chip::before { width: 6px; height: 6px; flex: none; border-radius: 50%; background: var(--agm-pearl-deep); content: ''; }
.theme-v4 a.place-chip:hover { background: var(--agm-pearl); color: var(--agm-primary-deep); }
.v5-is-place::before { display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: var(--agm-pearl-deep); content: ''; vertical-align: 2px; }

/* Mega menu theo nhóm (Kinh tế, Du lịch, Văn hóa) */
.v5-mega__inner { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; padding: 20px 0 8px; }
.v5-mega__col h3 { margin: 0 0 8px; border-bottom: 2px solid var(--agm-line); padding-bottom: 6px; font-size: 13px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.v5-mega__col h3 a { color: var(--agm-primary); }
.v5-mega__col ul { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.v5-mega__col li a { display: block; border-radius: 4px; padding: 5px 6px; font-size: 14px; font-weight: 600; }
.v5-mega__col li a:hover { background: var(--agm-sand); }
.v5-mega__col li.is-sub a { color: var(--agm-primary); font-weight: 700; }
.v5-mega__col li.is-tag:not(.v5-is-place) a::before { color: var(--agm-jade); content: '#'; margin-right: 2px; }
.v5-mega__col li.v5-is-place::before { display: none; }
.v5-mega__col li.v5-is-place a::before { display: inline-block; width: 6px; height: 6px; margin-right: 7px; border-radius: 50%; background: var(--agm-pearl-deep); content: ''; vertical-align: 2px; }
.v5-mega__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 20px; border-top: 1px solid var(--agm-line); padding: 10px 0 14px; color: var(--agm-muted); font-size: 12.5px; }
.v5-mega__foot a { color: var(--agm-jade-deep); font-size: 13.5px; font-weight: 800; }

/* Điểm nóng kinh tế: chip địa danh có số bài */
.v5-hotspots { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: -4px 0 20px; border: 1px solid var(--agm-line); border-radius: 8px; background: #fff; padding: 12px 14px; }
.v5-hotspots__label { margin-right: 4px; color: var(--agm-primary); font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.v5-hotspot { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--agm-line); border-radius: 999px; background: var(--agm-sand); padding: 4px 11px; font-size: 13px; font-weight: 700; }
.v5-hotspot::before { width: 7px; height: 7px; border-radius: 50%; background: var(--agm-pearl-deep); content: ''; }
.v5-hotspot small { color: var(--agm-muted); font-size: 11.5px; font-weight: 600; }
.theme-v4 .v5-hotspot:hover { border-color: var(--agm-jade-deep); }

/* Widget địa danh được quan tâm */
.v5-places { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.v5-places a { display: inline-flex; align-items: baseline; gap: 6px; border: 1px solid var(--agm-line); border-radius: 6px; background: #fff; padding: 6px 10px; font-size: 13.5px; font-weight: 700; }
.v5-places small { color: var(--agm-muted); font-size: 11.5px; font-weight: 600; }
.v5-places .is-lg a { font-size: 15.5px; }
.v5-widget-note { margin: 10px 0 0; color: var(--agm-muted); font-size: 12px; }

/* Dải Du lịch An Giang: điểm đến theo loại hình */
.v5-travel { position: relative; overflow: hidden; margin-top: 18px; background: linear-gradient(160deg, #2D2A4A 0%, #1D1B33 45%, #0B4F5C 100%); color: #fff; padding: 40px 0 130px; }
.v5-travel .v4-block-head { border-bottom-color: rgba(255,255,255,.35); }
.v5-travel .v4-block-head h2 { color: #fff; }
.v5-travel .v4-block-head nav { color: rgba(255,255,255,.85); }
.v5-travel .v4-block-head::before { background: rgba(255,255,255,.35); }
.theme-v4 .v5-travel a:hover { color: var(--agm-pearl); }
.v5-travel__intro { max-width: 640px; margin: 0 0 16px; color: rgba(255,255,255,.85); font-size: 15px; }
.v5-travel__layout { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 3fr) minmax(280px, 1fr); gap: 28px; }
.v5-travel__tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.v5-travel__tabs button { border: 1px solid rgba(255,255,255,.4); border-radius: 999px; background: rgba(255,255,255,.06); color: #fff; padding: 6px 14px; font-size: 13px; font-weight: 700; }
.v5-travel__tabs button[aria-selected='true'] { border-color: var(--agm-pearl); background: var(--agm-pearl); color: var(--agm-primary-deep); }
.v5-dest-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.v5-dest-grid li[hidden] { display: none; }
.v5-dest { position: relative; display: block; overflow: hidden; border-radius: 8px; }
.v5-dest .thumb { border-radius: 0; aspect-ratio: 4 / 5; }
.v5-dest .thumb::after { top: 6px; bottom: auto; }
.v5-dest__text { position: absolute; right: 0; bottom: 0; left: 0; padding: 36px 12px 12px; background: linear-gradient(to top, rgba(10, 10, 25, .88), transparent); }
.v5-dest__type { display: block; color: rgba(255,255,255,.88); font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.v5-dest h3 { margin: 2px 0 2px; color: #fff; font-family: var(--agm-serif); font-size: 19px; line-height: 1.25; }
.v5-dest__count { color: rgba(255,255,255,.85); font-size: 12px; }
.theme-v4 .v5-dest:hover h3 { color: var(--agm-pearl); }
.v5-travel__side { display: grid; align-content: start; gap: 18px; }
.v5-travel__box { border: 1px solid rgba(255,255,255,.22); border-radius: 8px; background: rgba(255,255,255,.06); padding: 14px 16px; }
.v5-travel__box > h3 { margin: 0 0 6px; font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.v5-travel .v4-links li { border-top-color: rgba(255,255,255,.18); color: #fff; font-size: 14.5px; }
.v5-travel .v4-card h3 { color: #fff; font-size: 16.5px; }
.v5-travel .kicker { color: #fff; }
.v5-travel__more { display: inline-block; margin-top: 4px; color: var(--agm-pearl); font-size: 14px; font-weight: 800; }
.v5-travel .v4-duo__art { height: 120px; }

/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
  .v5-mega__inner { gap: 16px; }
  .v5-dest-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 980px) {
  .v5-travel__layout { grid-template-columns: minmax(0, 1fr); }
  .v5-travel__side { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .v5-dest-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .v5-travel__tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .v5-travel__tabs button { flex: none; }
}

@media (max-width: 680px) {
  .v5-travel { padding: 32px 0 120px; }
  .v5-travel__side { grid-template-columns: minmax(0, 1fr); }
  .v5-dest h3 { font-size: 16.5px; }
  .v5-hotspots { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .v5-hotspot, .v5-hotspots__label { flex: none; white-space: nowrap; }
}