/* ==========================================================================
   DESIGNERO OVERFLOW GUARD (Task R1)
   Bảo vệ giao diện không vỡ, không cắt chữ khi nhập tiêu đề / dữ liệu dài.
   Đảm bảo 100% không đổi chiều cao và layout khi nội dung bình thường.
   ========================================================================== */

/* 1. Ngắt dòng và chống tràn linh hoạt cho tiêu đề, đoạn văn, nhãn */
h1, h2, h3, h4, h5, h6,
p, li,
.hero-desc, .section-desc, .brand-story-desc, .brand-story-copy,
.card-desc, .service-card-desc, .workshop-desc,
.townhouse-card-caption, .showcase-card-title,
.designero-project-card-title, .project-card-title,
.service-card-title, .price-card-title, .price-decor-card-title, .price-row-title,
.stat-num, .stat-text, .workflow-icon-label, .workflow-card-title,
.testimonial-card-author, .testimonial-card-role, .testimonial-card-quote,
.tdn-why-title, .tdn-job-title, .workshop-metric-val, .workshop-metric-label {
  overflow-wrap: anywhere;
  min-width: 0;
}

/* 2. Line-clamp 2 dòng cho tên công trình trong thẻ */
.showcase-card-title,
.townhouse-card-caption,
.designero-project-card-title,
.project-card-title,
.service-card-title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

/* 3. Line-clamp 2 dòng và chống tràn cho badge */
.showcase-card-badge,
.project-card-badge,
.service-card-badge {
  display: -webkit-inline-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  overflow-wrap: anywhere;
  min-width: 0;
}

/* 4. Số liệu & chỉ số không bị tràn hoặc cắt */
.stat-num,
.stat-text,
.workshop-metric-val,
.workshop-metric-label {
  overflow-wrap: anywhere;
  min-width: 0;
}

/* 5. Nút bấm, nhãn tab, bộ lọc: cho phép xuống dòng và bẻ từ dài */
html body #showcase .showcase-tab,
html body #showcase .showcase-subtab,
html body #showcase .decor-showcase-tab,
html body #showcase .decor-showcase-subtab,
html body #showcase .service-showcase-tab,
html body .showcase-tab,
html body .showcase-subtab,
html body .decor-showcase-tab,
html body .decor-showcase-subtab,
html body .service-showcase-tab,
html body .project-switch,
html body .service-switch,
html body .filter-term,
html body .townhouse-filter,
html body .project-filters button,
html body .figma-filters button,
html body .section-switcher-tab,
html body .section-switcher-level,
html body .price-tab,
html body .price-decor-tab,
html body .price-rough-tab,
html body button.why-tab,
html body .tdn-subnav-tab,
html body .author-btn,
html body .card-btn,
html body .service-more,
html body .btn-banner-more,
html body .btnSite,
html body .filter-btn,
html body .project-filter-btn {
  white-space: normal !important;
  word-break: break-all;
  overflow-wrap: anywhere;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

/* 6. Thanh tab / bộ lọc: cho phép cuộn ngang trong chính mình */
.showcase-tabs,
.showcase-subtabs,
.decor-showcase-tabs,
.decor-showcase-subtabs,
.section-switcher-tabs,
.section-switcher-levels,
.townhouse-filters,
.project-filters,
.price-tabs,
.price-decor-tabs,
.service-showcase-tabs,
.service-switch-row,
.project-switch-row,
.tdn-subnav-tabs,
.testimonial-authors-list {
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.showcase-tabs::-webkit-scrollbar,
.showcase-subtabs::-webkit-scrollbar,
.decor-showcase-tabs::-webkit-scrollbar,
.decor-showcase-subtabs::-webkit-scrollbar,
.section-switcher-tabs::-webkit-scrollbar,
.section-switcher-levels::-webkit-scrollbar,
.townhouse-filters::-webkit-scrollbar,
.project-filters::-webkit-scrollbar,
.price-tabs::-webkit-scrollbar,
.price-decor-tabs::-webkit-scrollbar,
.service-showcase-tabs::-webkit-scrollbar,
.service-switch-row::-webkit-scrollbar,
.project-switch-row::-webkit-scrollbar,
.tdn-subnav-tabs::-webkit-scrollbar,
.testimonial-authors-list::-webkit-scrollbar {
  display: none;
}

.showcase-tabs > *,
.decor-showcase-tabs > * {
  min-width: 0;
}

.service-copy-row {
  min-width: 0;
  max-width: 100%;
}
.service-copy-row .service-more {
  flex-shrink: 1;
}

/* 7. Ảnh an toàn, không tràn container */
img {
  max-width: 100%;
}

/* 8. Container cột số liệu và khối nội dung an toàn */
.stat-col,
.hero-stat-item,
.hero-stats,
.workshop-metrics,
.workshop-metric,
.workshop-hero-panel,
.workshop-hero-head,
.author-info,
.tdn-why-item,
.tdn-why-icon {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}