/* ===== PROJECT DETAIL PAGE ===== */

/* ── BANNER ── */
.pd-banner {
  position: relative;
  height: 300px;
  overflow: hidden;
  margin-top: 0;
}

.pd-banner__bg {
  position: absolute;
  inset: 0;
}

.pd-banner__bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.pd-banner__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(8, 16, 36, 0.95) 0%,
    rgba(8, 16, 36, 0.65) 45%,
    rgba(8, 16, 36, 0.25) 100%
  );
}

.pd-banner__inner {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-bottom: 36px;
  color: #fff;
}

.pd-breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8125rem;
  color: rgba(255,255,255,0.7);
  margin-bottom: 20px;
  flex-wrap: nowrap;
  overflow: hidden;
}

.pd-breadcrumb__link,
.pd-breadcrumb > span {
  color: rgba(255,255,255,0.7);
  transition: color var(--transition-fast);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  max-width: 33%;
}

.pd-breadcrumb__link:hover { color: #fff; }

.pd-breadcrumb__sep {
  font-size: 1rem;
  color: rgba(255,255,255,0.4);
  flex-shrink: 0;
}

.pd-banner__body {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
}

.pd-banner__left { flex: 1; }

.pd-banner__badges {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}

.pd-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.pd-badge--selling { background: #00c853; color: #fff; }
.pd-badge--upcoming { background: #ff9800; color: #fff; }
.pd-badge--type { background: rgba(255,255,255,0.15); color: #fff; border: 1px solid rgba(255,255,255,0.3); }

.pd-banner__title {
  font-size: 2rem;
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 10px;
  text-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

.pd-banner__location {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.9375rem;
  color: rgba(255,255,255,0.85);
  margin-bottom: 20px;
}

/* ── TAB NAVIGATION ── */
.pd-tabs {
  background: var(--white);
  border-bottom: 1px solid var(--dark-200);
  position: relative;
  z-index: 100;
  box-shadow: 0 2px 10px rgba(0,0,0,0.07);
}

.pd-tabs__inner {
  display: flex;
  align-items: stretch;
}

.pd-tabs__nav {
  display: flex;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  min-width: 0;
  flex: 1;
}

.pd-tabs__nav::-webkit-scrollbar { display: none; }

.pd-tabs__link {
  display: inline-flex;
  align-items: center;
  padding: 0 20px;
  height: 52px;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--dark-600);
  white-space: nowrap;
  border-bottom: 3px solid transparent;
  transition: color var(--transition-fast), border-color var(--transition-fast);
  text-decoration: none;
  position: relative;
  flex-shrink: 0;
}

.pd-tabs__link:hover { color: var(--primary); }

.pd-tabs__link.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
  font-weight: 600;
}

/* ── MAIN LAYOUT ── */
.pd-main {
  padding: 28px 0 72px;
  background: var(--dark-50);
}

.pd-main__layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: start;
}

.pd-main__layout > * {
  min-width: 0;
}

/* ── SECTIONS ── */
.pd-section {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 28px;
  margin-bottom: 16px;
  box-shadow: var(--shadow-sm);
  scroll-margin-top: calc(var(--header-height) + 52px + 12px);
}

.pd-section__hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 22px;
}

.pd-section__title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--dark-900);
}

.pd-section__bar {
  display: inline-block;
  width: 4px;
  height: 22px;
  background: var(--primary-gradient);
  border-radius: 2px;
  flex-shrink: 0;
}

.pd-section__count {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--dark-500);
  background: var(--dark-100);
  padding: 4px 10px;
  border-radius: var(--radius-full);
}

/* ── TỔNG QUAN: image ── */
.pd-overview-image {
  margin-bottom: 16px;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  overflow: hidden;
  background: #f8fafc;
  height: 250px;
}

.pd-overview-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 900px) {
  .pd-overview-image {
    height: auto;
    aspect-ratio: 16 / 9;
  }
}

/* Description */
.pd-desc {
  margin-bottom: 24px;
}

.pd-desc p {
  font-size: 0.9375rem;
  color: #4a5568;
  line-height: 1.8;
  margin-bottom: 14px;
}
.pd-desc p:last-child { margin-bottom: 0; }

.pd-desc h1 { font-size: 1.375rem; font-weight: 700; color: #0f1724; margin: 1.4em 0 .5em; line-height: 1.3; }
.pd-desc h2 { font-size: 1.2rem;   font-weight: 700; color: #0f1724; margin: 1.2em 0 .4em; line-height: 1.35; }
.pd-desc h3 { font-size: 1.05rem;  font-weight: 700; color: #0f1724; margin: 1.1em 0 .35em; }
.pd-desc h4,
.pd-desc h5 { font-size: .9375rem; font-weight: 700; color: #0f1724; margin: 1em 0 .3em; }

.pd-desc h1:first-child,
.pd-desc h2:first-child,
.pd-desc h3:first-child { margin-top: 0; }

.pd-desc strong { font-weight: 700; color: #1a2332; }
.pd-desc em     { font-style: italic; color: inherit; }

.pd-desc a              { color: #1B6AE5; text-decoration: none; font-weight: 500; }
.pd-desc a:hover        { text-decoration: underline; }

.pd-desc ul,
.pd-desc ol {
  padding-left: 1.375em;
  margin-bottom: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pd-desc ul { list-style: disc; }
.pd-desc ol { list-style: decimal; }
.pd-desc li {
  font-size: .9375rem;
  color: #4a5568;
  line-height: 1.75;
}
.pd-desc li::marker { color: #1B6AE5; font-weight: 700; }

.pd-desc img {
  max-width: 100%;
  border-radius: 10px;
  margin: .75em 0;
  display: block;
}

.pd-desc span[style*="font-size"] { line-height: 1.6; }

/* Manual-bullet paragraphs (–/+ from RTE) */
.pd-desc__item {
  padding: 10px 14px;
  margin-bottom: 8px !important;
  border-left: 3px solid #1B6AE5;
  background: #f5f9ff;
  border-radius: 0 6px 6px 0;
  line-height: 1.75 !important;
}
.pd-desc__item strong {
  color: #1B6AE5;
}
.pd-desc__subitem {
  padding: 6px 12px 6px 24px;
  margin-bottom: 6px !important;
  position: relative;
  color: #556070 !important;
  font-size: 0.9rem !important;
  border-left: 2px solid #d1e4ff;
  border-radius: 0 4px 4px 0;
  background: #fafcff;
  line-height: 1.7 !important;
}

/* ── TIỆN ÍCH ── */
.pd-amenity-group {
  margin-bottom: 28px;
}

.pd-amenity-group:last-child { margin-bottom: 0; }

.pd-amenity-group__title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--dark-700);
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 1.5px solid var(--dark-100);
}

.pd-amenity-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.pd-amenity-item {
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  border: 1px solid #e2e8f0;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
  cursor: default;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

.pd-amenity-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 28px rgba(27,106,229,.13);
  border-color: #c7d9f7;
}

.pd-amenity-item__img-wrap {
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.pd-amenity-item__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  cursor: zoom-in;
  transition: transform .45s ease;
}

.pd-amenity-item:hover .pd-amenity-item__img {
  transform: scale(1.07);
}

.pd-amenity-item span {
  display: block;
  padding: 10px 12px 11px;
  font-size: .8125rem;
  font-weight: 600;
  color: #1a2332;
  line-height: 1.35;
  text-align: center;
}

/* ── TỔNG QUAN: 2-col internal layout ── */
.pd-tq-layout {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 28px;
  align-items: start;
}

.pd-tq-conn {
  background: #f4f8ff;
  border-radius: 16px;
  padding: 20px 12px;
}

.pd-conn-hd {
  margin-bottom: 16px;
  padding: 0 8px;
}

/* ── Connectivity wheel ── */
.pd-conn-wheel {
  position: relative;
  width: 340px;
  height: 340px;
  margin: 0 auto;
}

.pd-conn-wheel__orbit {
  position: absolute;
  inset: 24px;
  border: 1.5px dashed #c7d9f7;
  border-radius: 50%;
}

.pd-conn-wheel__center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #ddeaff;
  box-shadow: 0 4px 20px rgba(27,106,229,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  overflow: hidden;
}

.pd-conn-wheel__logo {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pd-conn-wheel__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.pd-conn-node {
  position: absolute;
  transform: translate(-50%, -50%);
  z-index: 4;
  background: #fff;
  border: 1.5px solid #c7d9f7;
  border-radius: 12px;
  padding: 7px 10px;
  text-align: center;
  min-width: 88px;
  max-width: 108px;
  box-shadow: 0 2px 10px rgba(27,106,229,0.08);
  cursor: default;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}

.pd-conn-node:hover {
  border-color: #1B6AE5;
  box-shadow: 0 4px 18px rgba(27,106,229,0.2);
  transform: translate(-50%, -50%) scale(1.06);
}

.pd-conn-node__mins {
  display: block;
  font-size: 1.2rem;
  font-weight: 800;
  color: #1B6AE5;
  line-height: 1.2;
}

.pd-conn-node__mins small {
  font-size: .65rem;
  font-weight: 500;
  color: #a0aec0;
  margin-left: 1px;
}

.pd-conn-node__name {
  display: block;
  font-size: .7rem;
  font-weight: 600;
  color: #4a5568;
  margin-top: 2px;
  line-height: 1.3;
}

/* ── RESPONSIVE ── */
@media (min-width: 769px) and (max-width: 1400px) {
  .pd-section { padding: 24px; }

  .pd-overview-image {
    height: clamp(240px, 28vw, 320px);
  }

  .pd-tq-layout {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .pd-tq-main,
  .pd-tq-conn {
    min-width: 0;
  }

  .pd-tq-conn {
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
    padding: 22px 16px;
  }

  .pd-conn-wheel {
    width: min(340px, 100%);
    height: min(340px, calc(100vw - var(--sidebar-nav-width) - 96px));
    min-height: 300px;
  }
}

@media (max-width: 900px) {
  .pd-tq-layout { grid-template-columns: 1fr; }
  .pd-conn-wheel { width: 300px; height: 300px; }

  .pd-banner { height: 380px; }
  .pd-banner__title { font-size: 1.5rem; }
  .pd-amenity-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 640px) {
  .pd-banner { height: 320px; }

  .pd-banner__body { flex-direction: column; gap: 12px; align-items: flex-start; }

  .pd-banner__title { font-size: 1.25rem; }

  .pd-section { padding: 18px; }

  .pd-amenity-grid { grid-template-columns: repeat(2, 1fr); }

  /* Keep the desktop-style connectivity wheel on mobile */
  .pd-conn-wheel {
    position: relative;
    display: block;
    width: min(300px, calc(100vw - 72px));
    height: min(300px, calc(100vw - 72px));
    max-width: 100%;
    margin: 0 auto;
  }

  .pd-conn-wheel__orbit,
  .pd-conn-wheel__svg { display: block; }

  .pd-conn-wheel__center { display: flex; }

  .pd-conn-wheel__orbit { inset: 20px; }

  .pd-conn-wheel__center {
    width: 64px;
    height: 64px;
  }

  .pd-conn-wheel__logo {
    width: 100%;
    height: 100%;
  }

  .pd-conn-node {
    position: absolute;
    transform: translate(-50%, -50%);
    min-width: clamp(72px, 24vw, 88px);
    max-width: clamp(82px, 29vw, 100px);
    padding: 6px 7px;
    border-radius: 10px;
  }

  .pd-conn-node:hover { transform: translate(-50%, -50%) scale(1.04); }

  .pd-conn-node__mins { font-size: 1rem; }

  .pd-conn-node__mins small { font-size: .58rem; }

  .pd-conn-node__name { font-size: .62rem; }

  .pd-tabs__link { padding: 0 14px; font-size: 0.85rem; }
}

@media (max-width: 480px) {
  .pd-banner { height: 280px; }
  .pd-banner__title { font-size: 1.125rem; }
  .pd-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .pd-tabs::-webkit-scrollbar { display: none; }
  .pd-tabs__link { padding: 0 12px; font-size: 0.8rem; white-space: nowrap; }
  .pd-section { padding: 14px; }
}

/* ══════════════════════════════════════════
   MEDIA / TÀI LIỆU TABLE
══════════════════════════════════════════ */
/* ── Base rules (desktop) ── */
.pd-media-bar { --pd-media-control-height:42px; display:flex; align-items:center; gap:10px; margin-bottom:20px; flex-wrap:wrap; }
.pd-media-bar__cats-wrap { display:flex; align-items:center; gap:6px; height:var(--pd-media-control-height); background:#fff; border:1.5px solid #e2e8f0; border-radius:9999px; padding:5px 8px; flex:1; min-width:0; overflow:hidden; }
.pd-media-nav { width:28px; height:28px; border-radius:50%; border:1.5px solid #e2e8f0; background:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:.9rem; color:#4a5568; flex-shrink:0; transition:all .15s; }
.pd-media-nav:hover { background:#e8f0fe; border-color:#1B6AE5; color:#1B6AE5; }
.pd-media-cats { display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; flex:1; }
.pd-media-cats::-webkit-scrollbar { display:none; }
.pd-media-cat { display:inline-flex; align-items:center; padding:5px 14px; border-radius:9999px; font-size:.813rem; font-weight:600; border:1.5px solid #e2e8f0; background:#fff; color:#4a5568; cursor:pointer; white-space:nowrap; transition:all .15s; }
.pd-media-cat:hover { border-color:#1B6AE5; color:#1B6AE5; background:#e8f0fe; }
.pd-media-cat.active { background:#1a2332; color:#fff; border-color:#1a2332; }
.pd-media-search-wrap { display:flex; align-items:center; gap:7px; height:var(--pd-media-control-height); border:1.5px solid #e2e8f0; border-radius:9999px; padding:5px 14px; min-width:180px; background:#fff; }
.pd-media-search-wrap i { color:#a0aec0; font-size:.9rem; flex-shrink:0; }
.pd-media-search-wrap input { border:none; outline:none; font-size:.813rem; color:#4a5568; background:transparent; width:100%; }
.pd-media-search-wrap input::placeholder { color:#a0aec0; }

/* ── Mobile override (must come after base rules) ── */
@media (max-width: 640px) {
  .pd-media-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
  }
  .pd-media-search-wrap {
    order: -1;
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
  .pd-media-search-wrap input { min-width: 0; }
  .pd-media-bar__cats-wrap {
    display: flex;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
  }
  .pd-media-bar__cats-wrap::-webkit-scrollbar { display: none; }
  .pd-media-nav { display: none; }
  .pd-media-cats {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: nowrap;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    touch-action: pan-x;
  }
  .pd-media-cats::-webkit-scrollbar { display: none; }
  .pd-media-cat { flex: 0 0 auto; }
}

.pd-doc-table-wrap {
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  max-width: 100%;
  scrollbar-width: thin;
  scrollbar-color: #c0ccda transparent;
}
.pd-doc-table-wrap::-webkit-scrollbar { height: 5px; }
.pd-doc-table-wrap::-webkit-scrollbar-track { background: transparent; }
.pd-doc-table-wrap::-webkit-scrollbar-thumb { background: #c0ccda; border-radius: 3px; }
.pd-doc-table { min-width:100%; border-collapse:collapse; font-size:.875rem; }
.pd-doc-table thead { background:#f8faff; }
.pd-doc-table th { padding:11px 16px; text-align:left; font-size:.72rem; font-weight:700; color:#718096; text-transform:uppercase; letter-spacing:.4px; white-space:nowrap; border-bottom:1px solid #e2e8f0; }
.pd-doc-table th i { font-size:.8rem; vertical-align:middle; margin-left:3px; cursor:pointer; color:#c0cce0; }
.pd-doc-table td { padding:13px 16px; border-bottom:1px solid #f1f5f9; color:#2d3748; vertical-align:middle; }
.pd-doc-table tbody tr:last-child td { border-bottom:none; }
.pd-doc-table tbody tr:hover { background:#f8faff; }
.pd-doc-name-cell { display:flex; align-items:center; gap:12px; }
.pd-doc-name-text { font-size:.875rem; color:#1a2332; font-weight:500; line-height:1.4; }

.pd-doc-icon { width:36px; height:36px; border-radius:8px; display:inline-flex; align-items:center; justify-content:center; font-size:1.1rem; flex-shrink:0; }
.pd-doc-icon--folder { background:#fff3e0; color:#e67700; }
.pd-doc-icon--pdf    { background:#fff0f0; color:#e53935; }
.pd-doc-icon--img    { background:#e3f2fd; color:#1976d2; }
.pd-doc-icon--video  { background:#f3e5f5; color:#7b1fa2; }
.pd-doc-icon--doc    { background:#e8f5e9; color:#2e7d32; }

.pd-doc-zone { display:inline-flex; align-items:center; padding:3px 10px; border-radius:9999px; font-size:.75rem; font-weight:500; background:#e8f0fe; color:#1B6AE5; border:1px solid #c7d9f7; white-space:nowrap; }
.pd-doc-cat  { display:inline-flex; align-items:center; padding:3px 10px; border-radius:9999px; font-size:.75rem; font-weight:600; white-space:nowrap; }
.pd-doc-cat--bai-pr  { background:#fff8e1; color:#e67700; border:1px solid #ffe0a0; }
.pd-doc-cat--tai-lieu { background:#e8f0fe; color:#1B6AE5; border:1px solid #c7d9f7; }
.pd-doc-cat--hinh-anh { background:#e0f7fa; color:#00838f; border:1px solid #b2ebf2; }
.pd-doc-cat--video   { background:#f3e5f5; color:#7b1fa2; border:1px solid #e1bee7; }
.pd-doc-cat--boc-mai { background:#e8f5e9; color:#2e7d32; border:1px solid #c8e6c9; }
.pd-doc-cat--tien-ich { background:#fce4ec; color:#c62828; border:1px solid #f8bbd0; }
.pd-doc-cat--flyers  { background:#ede7f6; color:#512da8; border:1px solid #d1c4e9; }
.pd-doc-cat--phap-ly { background:#e8f5e9; color:#2e7d32; border:1px solid #c8e6c9; }

.pd-doc-acts { display:flex; gap:6px; }
.pd-doc-act { width:32px; height:32px; border-radius:8px; border:1px solid #e2e8f0; background:#fff; color:#718096; display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:.95rem; transition:all .15s; }
.pd-doc-act:hover { border-color:#1B6AE5; color:#1B6AE5; background:#e8f0fe; }
.pd-doc-act--dl:hover { border-color:#00a040 !important; color:#00a040 !important; background:#e8faf0 !important; }

@media (max-width: 640px) {
  .pd-doc-table { min-width: 720px; }
  .pd-doc-table th:first-child,
  .pd-doc-table td:first-child { min-width: 300px; }
}

/* ══════════════════════════════════════════
   CSBH DOCUMENT CARDS
══════════════════════════════════════════ */
.pd-csbh-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }

@media (max-width: 768px) {
  .pd-csbh-grid { grid-template-columns: 1fr; }
  .pd-banner__inner {
    padding-left: 16px;
    padding-right: 16px;
  }
}
.pd-csbh-card { display:flex; align-items:flex-start; gap:16px; min-width:0; background:#fff; border:1px solid #e2e8f0; border-radius:12px; padding:18px; transition:box-shadow .2s, border-color .2s; }
.pd-csbh-card:hover { box-shadow:0 4px 16px rgba(27,106,229,.1); border-color:#c7d9f7; }
.pd-csbh-card__thumb { width:90px; height:116px; border-radius:8px; overflow:hidden; flex-shrink:0; border:1px solid #e8edf5; background:linear-gradient(135deg,#eef3fb,#f4f8ff); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; }
.pd-csbh-card__thumb i { font-size:2rem; color:#1B6AE5; }
.pd-csbh-card__thumb span { font-size:.68rem; font-weight:700; color:#a0aec0; letter-spacing:.5px; }
.pd-csbh-card__info { flex:1; display:flex; flex-direction:column; gap:8px; min-width:0; }
.pd-csbh-card__title { display:block; max-width:100%; min-width:0; font-size:.9rem; font-weight:600; color:#1B6AE5; line-height:1.4; text-decoration:none; overflow-wrap:anywhere; word-break:break-word; }
.pd-csbh-card__title:hover { text-decoration:underline; }
.pd-csbh-card__date { display:flex; align-items:center; gap:5px; min-width:0; max-width:100%; font-size:.8rem; color:#718096; line-height:1.45; overflow-wrap:anywhere; word-break:break-word; }
.pd-csbh-card__date i { color:#9c5cf6; font-size:.85rem; }
.pd-csbh-card__btn { display:inline-flex; align-items:center; gap:4px; padding:6px 14px; border:1px solid #e2e8f0; border-radius:6px; font-size:.8rem; font-weight:500; color:#1a2332; background:#fff; cursor:pointer; text-decoration:none; transition:all .15s; width:fit-content; }
.pd-csbh-card__btn:hover { background:#f0f4ff; border-color:#1B6AE5; color:#1B6AE5; }

@media (max-width: 640px) {
  .pd-csbh-card {
    gap: 12px;
    padding: 14px;
  }

  .pd-csbh-card__thumb {
    width: 78px;
    height: 104px;
  }

  .pd-csbh-card__thumb i {
    font-size: 1.65rem;
  }

  .pd-csbh-card__title {
    font-size: .875rem;
  }

  .pd-csbh-card__date {
    align-items: flex-start;
    font-size: .75rem;
  }

  .pd-csbh-card__date i {
    margin-top: 2px;
    flex-shrink: 0;
  }
}

@media (max-width: 640px) {
  #pd-mat-bang-scene {
    aspect-ratio: 1 / 1 !important;
  }
}

/* Shared section heading for right columns */
.pd-hl-box-hd { font-weight:700; font-size:.9375rem; color:#0f1724; display:flex; align-items:center; gap:8px; }

/* Project overview right column */
.pd-proj-quick { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:22px; }
.pd-proj-qi { background:#fff; border:1px solid #e2e8f0; border-radius:12px; padding:14px; }
.pd-proj-qi__label { font-size:.7rem; color:#718096; font-weight:600; text-transform:uppercase; letter-spacing:.4px; margin-bottom:5px; display:flex; align-items:center; gap:5px; }
.pd-proj-qi__label i { font-size:.85rem; color:#1B6AE5; }
.pd-proj-qi__val { font-size:.9375rem; font-weight:700; color:#0f1724; line-height:1.3; }