/* ==========================================================================
   SAIGON TDC — dichvuit365.com
   Design layer (Impeccable-aligned, "quieter" pass)
   Nguyên tắc: để Tailwind lo bố cục; file này chỉ bổ sung typography,
   icon đồng nhất, focus state và một số chi tiết nhỏ. Không ép !important
   lên card, không gradient text, không glassmorphism trang trí.
   ========================================================================== */

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: #f1f5f9;
}
::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 9999px;
  border: 2px solid #f1f5f9;
}
::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* ==========================================================================
   1. TYPOGRAPHY — giãn dòng thoáng cho dấu tiếng Việt
   ========================================================================== */
/* !important để thắng class tracking-tight của Tailwind (giữ độ thoáng cho dấu tiếng Việt) */
h1 {
  line-height: 1.34 !important;
  letter-spacing: -0.014em !important;
  text-wrap: balance;
}

h2 {
  line-height: 1.36 !important;
  letter-spacing: -0.012em !important;
  text-wrap: balance;
}

h3, h4 {
  line-height: 1.42 !important;
  letter-spacing: -0.006em;
  text-wrap: balance;
}

p, li {
  line-height: 1.72;
  text-wrap: pretty;
}

/* Chữ số đều nhau cho số liệu, hotline, bảng */
.tabular-nums,
a[href^="tel:"],
table td,
table th,
#statPostsCount,
#statProductsCount,
#statServicesCount,
#galleryCountText {
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   2. ICON — một hệ: cùng độ dày nét, cùng cỡ trong ô icon
   ========================================================================== */
svg.imp-svg,
svg.imp-svg-lg {
  display: inline-block;
  flex-shrink: 0;
  stroke-width: 1.9;
}

svg.imp-svg {
  vertical-align: -2.5px;
}

svg.imp-svg-lg {
  vertical-align: middle;
}

/* Icon nằm trong ô vuông (w-10 → w-14): luôn 20px */
.w-10 > svg.imp-svg, .w-10 > svg.imp-svg-lg,
.w-11 > svg.imp-svg, .w-11 > svg.imp-svg-lg,
.w-12 > svg.imp-svg, .w-12 > svg.imp-svg-lg,
.w-14 > svg.imp-svg, .w-14 > svg.imp-svg-lg {
  width: 20px;
  height: 20px;
}

/* ==========================================================================
   3. FOCUS — rõ ràng cho bàn phím, không làm rối khi click chuột
   ========================================================================== */
a:focus-visible,
button:focus-visible,
summary:focus-visible {
  outline: 2px solid #1d4ed8;
  outline-offset: 2px;
  border-radius: 6px;
}

input:not([type="checkbox"]):not([type="radio"]):focus,
select:focus,
textarea:focus {
  box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.14);
}

/* ==========================================================================
   4. NỘI DUNG BÀI VIẾT (.prose)
   ========================================================================== */
.prose h2 {
  font-size: 1.35rem;
  font-weight: 800;
  color: #0f172a;
  margin-top: 2rem;
  margin-bottom: 0.85rem;
}

.prose h3 {
  font-size: 1.15rem;
  font-weight: 700;
  color: #1e293b;
  margin-top: 1.5rem;
  margin-bottom: 0.6rem;
}

.prose p {
  margin-bottom: 1rem;
  line-height: 1.75;
  color: #334155;
}

.prose ul {
  list-style-type: disc;
  padding-left: 1.4rem;
  margin-bottom: 1.1rem;
  color: #334155;
}

.prose li {
  margin-bottom: 0.45rem;
}

.prose strong {
  color: #0f172a;
  font-weight: 700;
}

.prose table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
}

/* Line clamp */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Giảm chuyển động cho người dùng bật reduce-motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   5. MOBILE CHAT WIDGET OFFSET
   Đẩy nút chat nổi (#sgtdc-widget-container) lên phía trên thanh Mobile Sticky
   Bottom Bar (~60px) để không che nút "Đăng Ký Khảo Sát".
   ========================================================================== */
@media (max-width: 767px) {
  #sgtdc-widget-container,
  #dichvuit365-chat-widget,
  .dichvuit365-chat-widget,
  [id*="chat-widget"],
  [class*="chat-widget"],
  [id*="chatbox"],
  [class*="chatbox"],
  iframe[src*="chat.dichvuit365.com"],
  body > div[style*="position: fixed"][style*="bottom"][style*="right"] {
    bottom: 74px !important;
    right: 14px !important;
  }

  #sgtdc-launcher {
    width: 52px !important;
    height: 52px !important;
  }

  #sgtdc-launcher svg {
    width: 26px !important;
    height: 26px !important;
  }

  #sgtdc-window {
    bottom: 64px !important;
    right: 0 !important;
    width: calc(100vw - 28px) !important;
    height: calc(100dvh - 155px) !important;
    max-height: 520px !important;
  }
}