/* ============================================================
   PROFILE PAGE – UI FIX (drop-in replacement for inline <style>)
   Giữ nguyên mọi logic / Blade / JS — chỉ fix CSS
   ============================================================ */

/* ── 1. RESET XUNG ĐỘT CŨ ─────────────────────────────── */
.detail-profile .content {
  min-height: 0 !important;
  position: static !important;
}

/* ── 2. GRID 3 CỘT (desktop ≥ 1024px) ─────────────────── */
/* Tailwind col-span-3 / col-span-7 / col-span-2 đã khai báo trong HTML.
   Vấn đề: grid-cols-12 thiếu gap chuẩn trên một số trình duyệt cũ.
   Ép lại bằng CSS thuần để chắc chắn. */
.grid.grid-cols-12 {
  display: grid !important;
  grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  gap: 1.5rem !important;
  align-items: start !important;
}

/* Sidebar trái: 3/12 */
.intro-y.col-span-12.lg\:col-span-3 {
  grid-column: span 3 / span 3 !important;
}

/* Nội dung giữa: 7/12 */
.col-span-12.lg\:col-span-7 {
  grid-column: span 7 / span 7 !important;
}

/* Sidebar phải: 2/12 */
.intro-y.col-span-12.lg\:col-span-2 {
  grid-column: span 2 / span 2 !important;
}

/* ── 3. SIDEBAR TRÁI ────────────────────────────────────── */
.layout-sidebar-left {
  position: sticky;
  top: 80px;
}

.layout-sidebar-left .title-h2 {
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: #222;
  margin-bottom: 10px;
}

.layout-sidebar-left .countries {
  margin-bottom: 12px;
}

.layout-sidebar-left .countries a.handler {
  display: block;
  padding: 8px 12px;
  background: #c81d3c;
  color: #fff;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}

.layout-sidebar-left .country-not-here .btn {
  display: block;
  text-align: center;
  padding: 10px;
  background: #c81d3c;
  color: #fff;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1.4;
  margin-top: 8px;
}

.layout-sidebar-left .banners img {
  width: 100%;
  border-radius: 6px;
  margin-top: 8px;
  display: block;
}

/* ── 4. SIDEBAR PHẢI ────────────────────────────────────── */
.layout-sidebar-right {
  position: sticky;
  top: 80px;
}

.layout-sidebar-right h3 {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  color: #888;
  margin-bottom: 8px;
}

.layout-sidebar-right .inner img {
  width: 100%;
  border-radius: 6px;
  margin-bottom: 8px;
  display: block;
}

/* ── 5. KHU VỰC ẢNH / GALLERY ──────────────────────────── */
.app-figure {
  display: flex !important;
  flex-direction: row !important;
  gap: 8px !important;
  align-items: flex-start !important;
  float: none !important;
}

.__thumbs {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  width: 68px !important;
  flex-shrink: 0 !important;
}

.__thumbs a {
  display: block;
  border: 2px solid transparent;
  border-radius: 4px;
  overflow: hidden;
}

.__thumbs a:hover,
.__thumbs a.mz-thumb-selected {
  border-color: #c81d3c;
}

.__thumbs a img {
  width: 66px !important;
  height: 66px !important;
  object-fit: cover !important;
  display: block;
}

.__previews {
  flex: 1 !important;
  min-width: 0 !important;
  margin-left: 0 !important;
  float: none !important;
}

.__previews img,
.__previews .MagicZoom img {
  width: 100% !important;
  max-height: 420px !important;
  object-fit: cover !important;
  border-radius: 8px !important;
  display: block;
}

.zoom-btn {
  margin-top: 6px;
  font-size: 12px;
  color: #888;
  text-align: right;
}

/* No-image placeholder */
.__previews > div[style*="280px"],
.__thumbs ~ div[style*="280px"] {
  width: 100% !important;
  height: 300px !important;
  border-radius: 8px;
}

/* ── 6. TIÊU ĐỀ & MÔ TẢ ────────────────────────────────── */
.detail-profile .description h1 {
  font-size: 22px;
  font-weight: 700;
  color: #1a1a1a;
  margin-bottom: 6px;
}

.detail-profile .description .js-more {
  font-size: 14px;
  color: #555;
  line-height: 1.6;
  margin-bottom: 12px;
}

/* ── 7. COLLAPSIBLE SECTIONS ────────────────────────────── */
.detail-profile .content {
  border: 1px solid #ebebeb;
  border-radius: 10px;
  margin-bottom: 12px;
  overflow: hidden;
  background: #fff;
}

.detail-profile .content h2.collapsible_contact,
.detail-profile .content h2.collapsible_rate,
.detail-profile .content h2.collapsible_service,
.detail-profile .content h2.collapsible_available_time {
  cursor: pointer;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 14px 16px !important;
  margin: 0 !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #222 !important;
  background: #fafafa;
  border-bottom: 1px solid #ebebeb;
  user-select: none;
}

.detail-profile .content h2.collapsible_contact:hover,
.detail-profile .content h2.collapsible_rate:hover,
.detail-profile .content h2.collapsible_service:hover,
.detail-profile .content h2.collapsible_available_time:hover {
  background: #f3f3f3;
  color: #c81d3c !important;
}

/* ── 8. CONTACT INFO ROWS ───────────────────────────────── */
.detail-profile .content .contacts {
  padding: 0 !important;
}

.detail-profile .content .contacts > div {
  display: flex !important;
  align-items: baseline !important;
  gap: 8px !important;
  padding: 8px 16px !important;
  border-bottom: 1px solid #f5f5f5 !important;
  flex-wrap: wrap !important;
}

.detail-profile .content .contacts > div:last-child {
  border-bottom: none !important;
}

.detail-profile .content .contacts span {
  color: #888 !important;
  min-width: 160px !important;
  font-size: 13px !important;
  flex-shrink: 0 !important;
}

.detail-profile .content .contacts strong {
  font-size: 13px !important;
  color: #222 !important;
  font-weight: 600 !important;
}

/* Phone row */
#js-phone {
  padding: 12px 16px;
}

#js-phone .row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

#js-phone span {
  font-size: 13px;
  color: #888;
  min-width: 100px;
}

#js-phone strong {
  font-size: 13px;
  font-weight: 600;
  color: #222;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.social-icons {
  display: inline-flex;
  gap: 4px;
  flex-wrap: wrap;
  align-items: center;
  margin-left: 6px;
}

.social-icon {
  width: 28px !important;
  height: 28px !important;
  border-radius: 50%;
  object-fit: contain !important;
  display: inline-block !important;
  vertical-align: middle;
  flex-shrink: 0;
}

/* ── 9. BUTTONS ─────────────────────────────────────────── */
.detail-profile .content .buttons {
  padding: 12px 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.detail-profile .content .buttons .btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

.detail-profile .content .buttons .btn.black {
  background: #222;
  color: #fff;
}

.detail-profile .content .buttons .btn.black:hover {
  background: #000;
}

/* ── 10. RATES TABLE ────────────────────────────────────── */
.detail-profile .rates table,
.detail-profile .services table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  margin: 0;
}

.detail-profile .rates table th,
.detail-profile .rates table td,
.detail-profile .services table th,
.detail-profile .services table td {
  padding: 8px 16px;
  border-bottom: 1px solid #f0f0f0;
  text-align: left;
}

.detail-profile .rates table thead th,
.detail-profile .services table thead th {
  background: #fafafa;
  font-weight: 700;
  color: #555;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .4px;
}

/* ── 11. COMMENTS ───────────────────────────────────────── */
#___comment {
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  margin-top: 0 !important;
}

#___comment > .flex.items-center.px-5.py-3.border-t {
  padding: 12px 0 6px !important;
}

#___comment > .flex.items-center.px-5.py-3.border-t p {
  font-size: 15px;
  font-weight: 700;
  color: #222;
}

.avg-rate {
  display: block !important;
  padding: 0 0 10px !important;
}

.avg-rate > div > div {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  font-size: 13px;
  color: #555;
}

/* Comment form box */
#___comment > div[style*="border"],
#___comment > div[style*="border: 1px"] {
  border: 1px solid #ebebeb !important;
  border-radius: 10px !important;
  padding: 16px !important;
  margin: 0 0 16px !important;
  background: #fafafa;
}

.comment-input {
  width: 100% !important;
  margin-top: 10px !important;
  padding: 10px 14px !important;
  border: 1px solid #ddd !important;
  border-radius: 6px !important;
  font-size: 13px !important;
  box-sizing: border-box !important;
  background: #fff;
}

button.submit_comment,
a.submit_comment {
  display: inline-block !important;
  width: auto !important;
  max-width: 200px !important;
  padding: 10px 24px !important;
  margin: 12px auto 0 !important;
  border-radius: 7px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  text-align: center !important;
  float: none !important;
  background: #c81d3c;
  color: #fff;
  border: none;
  cursor: pointer;
  text-decoration: none;
}

button.submit_comment:hover,
a.submit_comment:hover {
  background: #a3162f;
}

/* Comment list */
.comment-list {
  display: flex;
  gap: 12px;
  padding: 14px 0;
  border-top: 1px solid #f3f3f3;
}

.comment-left {
  flex-shrink: 0;
}

.comment-left img,
.comment-left > div {
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  object-fit: cover;
}

.comment-right {
  flex: 1;
  min-width: 0;
}

.comment-right > div:first-child a strong {
  font-size: 13px;
  font-weight: 700;
  color: #222;
}

.comment-right > div:first-child small {
  font-size: 11px;
  color: #aaa;
  margin-left: 6px;
}

.comment-right .w-full.text-gray-600 {
  font-size: 13px;
  color: #555;
  margin-top: 4px;
  line-height: 1.5;
}

.rating-symbol {
  color: #ec981c !important;
  font-size: 13px !important;
}

.avg-rate .rating-symbol {
  font-size: 18px !important;
}

/* ── 12. STICKY CALL BUTTON (fix_tel) ───────────────────── */
.fix_tel {
  position: fixed;
  right: 20px;
  bottom: 30px;
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 9999;
}

.ring-alo-phone {
  position: relative;
  width: 56px;
  height: 56px;
}

.ring-alo-ph-img-circle {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #4caf50;
  border-radius: 50%;
  z-index: 1;
}

.ring-alo-ph-img-circle img {
  width: 28px;
  height: 28px;
  object-fit: contain;
}

.ring-alo-ph-circle,
.ring-alo-ph-circle-fill {
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  animation: ringPulse 1.8s ease-out infinite;
  border: 2px solid rgba(76, 175, 80, .5);
}

.ring-alo-ph-circle-fill {
  inset: -3px;
  border-color: rgba(76, 175, 80, .3);
  animation-delay: .3s;
}

@keyframes ringPulse {
  0%   { transform: scale(.9); opacity: 1; }
  70%  { transform: scale(1.3); opacity: 0; }
  100% { transform: scale(.9); opacity: 0; }
}

.fix_tel .tel a {
  text-decoration: none;
}

.fix_tel .tel .fone {
  background: #4caf50;
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  padding: 6px 14px;
  border-radius: 20px;
  margin: 0;
  white-space: nowrap;
}

/* Back button */
#bouton-sticky-left {
  position: fixed;
  left: 16px;
  bottom: 30px;
  z-index: 9999;
  background: #4caf50 !important;
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  padding: 10px 18px;
  border-radius: 24px;
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(0,0,0,.2);
}

#bouton-sticky {
  position: fixed;
  right: 140px;
  bottom: 30px;
  z-index: 9999;
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  padding: 10px 18px;
  border-radius: 24px;
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(0,0,0,.2);
}

/* ── 13. VIDEO ───────────────────────────────────────────── */
.detail-profile video {
  border-radius: 8px;
  max-height: 340px;
  background: #000;
}

/* ── 14. REPORT MODAL ────────────────────────────────────── */
.Click-here { cursor: pointer; }

.custom-model-main {
  text-align: center;
  overflow: hidden;
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  -webkit-overflow-scrolling: touch;
  outline: 0;
  opacity: 0;
  transition: opacity .15s linear, z-index .15s;
  z-index: -1;
  overflow-x: hidden;
  overflow-y: auto;
}

.model-open {
  z-index: 99999 !important;
  opacity: 1 !important;
  overflow: hidden !important;
}

.custom-model-inner {
  transform: translate(0, -25%);
  transition: transform .3s ease-out;
  display: inline-block;
  vertical-align: middle;
  width: 560px;
  max-width: 96%;
  margin: 30px auto;
}

.model-open .custom-model-inner {
  transform: translate(0, 0);
  position: relative;
  z-index: 999;
}

.custom-model-wrap {
  display: block;
  width: 100%;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(0,0,0,.18);
  padding: 24px;
  box-sizing: border-box;
  text-align: left;
  max-height: calc(100vh - 80px);
  overflow-y: auto;
}

.close-btn {
  position: absolute;
  right: 0; top: -32px;
  cursor: pointer;
  font-size: 28px;
  color: #fff;
  z-index: 99;
}

.bg-overlay {
  background: rgba(0,0,0,0);
  height: 100vh; width: 100%;
  position: fixed;
  left: 0; top: 0; right: 0; bottom: 0;
  z-index: 0;
  transition: background .15s linear;
}

.model-open .bg-overlay {
  background: rgba(0,0,0,.55);
  z-index: 99;
}

.report-lable {
  margin-top: 14px;
  font-size: 13px;
  font-weight: 600;
  color: #444;
}

.custom-model-wrap input[type="text"],
.custom-model-wrap textarea {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 13px;
  box-sizing: border-box;
  margin-top: 4px;
  background: #fafafa;
}

.custom-model-wrap textarea {
  min-height: 90px;
  resize: vertical;
}

.custom-model-wrap .modal-footer .btn {
  display: block;
  max-width: 180px;
  margin: 16px auto 0;
  padding: 10px 0;
  background: #c81d3c;
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  border-radius: 7px;
  border: none;
  cursor: pointer;
  text-align: center;
}

/* ── 15. FOOTER FIX ──────────────────────────────────────── */
footer .aevn-content h1.title {
  font-size: 13px !important;
  font-weight: 400 !important;
  color: #bbb !important;
  margin: 0 !important;
}

footer .aevn-content {
  padding: 8px 15px !important;
  background: #f9f9f9 !important;
}

/* ── 16. MOBILE ≤ 1024px ─────────────────────────────────── */
@media screen and (max-width: 1024px) {
  /* Sidebar trái ẩn (class hide-1024 đã có sẵn) */
  .hide-1024 { display: none !important; }

  /* 2 cột còn lại: giữa + phải */
  .grid.grid-cols-12 {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }

  .col-span-12.lg\:col-span-7,
  .intro-y.col-span-12.lg\:col-span-2 {
    grid-column: span 1 / span 1 !important;
  }

  .layout-sidebar-right {
    position: static;
    margin-top: 16px;
  }

  .layout-sidebar-right .inner {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  .layout-sidebar-right .inner img {
    width: calc(50% - 4px) !important;
  }

  .detail-profile {
    margin-top: 12px !important;
  }
}

/* ── 17. MOBILE ≤ 640px ──────────────────────────────────── */
@media screen and (max-width: 640px) {
  /* Gallery mobile dùng fancybox (đã handle bằng PHP $is_mobile) */
  .detail-profile .description h1 {
    font-size: 18px;
  }

  .detail-profile .content .contacts span {
    min-width: 120px !important;
  }

  .fix_tel {
    right: 12px;
    bottom: 20px;
  }

  #bouton-sticky-left {
    left: 10px;
    bottom: 20px;
    font-size: 12px;
    padding: 8px 14px;
  }

  #bouton-sticky {
    right: 110px;
    bottom: 20px;
  }

  .custom-model-wrap {
    padding: 16px;
  }

  @media screen and (min-width: 641px) {
    .custom-model-main:before {
      content: "";
      display: inline-block;
      height: 100%;
      vertical-align: middle;
    }
  }

  .ring-alo-phone {
    width: 48px;
    height: 48px;
  }

  .fix_tel .tel .fone {
    font-size: 12px;
    padding: 5px 10px;
  }
}

/* ── 18. MODAL VERTICAL ALIGN (desktop) ──────────────────── */
@media screen and (min-width: 800px) {
  .custom-model-main:before {
    content: "";
    display: inline-block;
    height: 100%;
    vertical-align: middle;
  }
}

/* ── 19. AVAILABLE TIME TABLE ────────────────────────────── */
.available-time table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  margin-top: 8px;
}

.available-time table th,
.available-time table td {
  padding: 7px 14px;
  border-bottom: 1px solid #f0f0f0;
  text-align: left;
}

.available-time table thead th {
  background: #fafafa;
  font-weight: 700;
  color: #666;
  font-size: 12px;
}

.available-time h4 {
  font-size: 13px;
  color: #c81d3c;
  margin: 12px 0 4px;
}

#btn_hien_them {
  font-size: 13px;
  font-weight: 600;
}

/* ── 20. MISC ────────────────────────────────────────────── */
.modal-backdrop { z-index: 999 !important; }