/* ================================================================
   VIETTOP — Block Sections CSS v1.0.0
   Style cho các Block Pattern dựng nội dung trong Block Editor.
   Mục tiêu: nội dung là core blocks (sửa được), CSS chỉ lo
   layout/polish qua các class wrapper .vt-b-*.
   Dùng cả ở frontend lẫn trong editor (xem inc/ load editor style).
================================================================ */

/* ── Eyebrow / nhãn nhỏ phía trên tiêu đề ── */
.vt-eyebrow{
  font-family:var(--vt-sans, 'DM Sans', sans-serif);
  font-size:11px;font-weight:700;letter-spacing:3.5px;
  text-transform:uppercase;color:var(--vt-red,#C0392B);
}
/* Hero (chia đôi + video) đồng bộ style trang Download (.vt-page-hero):
   tiêu đề mảnh, breadcrumb/mô tả trắng mờ, eyebrow trắng mờ + gạch nhỏ phía dưới. */
.vt-split-hero h1, .vt-split-hero h2,
.vt-hero-bgvideo h1, .vt-hero-bgvideo h2{ font-weight:300!important; }
.vt-split-hero .has-vt-gray-color, .vt-hero-bgvideo .has-vt-gray-color{ color:rgba(255,255,255,.45)!important; }
.vt-split-hero .vt-eyebrow, .vt-hero-bgvideo .vt-eyebrow{ color:rgba(255,255,255,.55); }
.vt-split-hero .vt-eyebrow::after, .vt-hero-bgvideo .vt-eyebrow::after{ content:""; display:block; width:36px; height:2px; background:rgba(255,255,255,.25); margin-top:14px; }
.vt-eyebrow + h2, .vt-eyebrow + h3{ margin-top:.4rem; }

/* Đường kẻ gold nhỏ (Block Style cho core/separator: "Gold rule") */
.wp-block-separator.is-style-vt-gold-rule{
  width:48px;max-width:48px;height:2px;border:none;
  background:var(--vt-red,#C0392B);opacity:1;margin-left:0;
}
.has-text-align-center .wp-block-separator.is-style-vt-gold-rule,
.wp-block-separator.is-style-vt-gold-rule.aligncenter{ margin-left:auto;margin-right:auto; }

/* ── Card chung (group có className .vt-card) ── */
.vt-card{
  background:#fff;border:1px solid var(--vt-bd,#e0e3e7);
  padding:36px 32px;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  display:flex;flex-direction:column;            /* cột flex → căn nội dung trong thẻ đồng bộ */
}
/* Chỉ kéo cao bằng cột khi card là con DUY NHẤT của cột (lưới card cân chiều cao).
   Khi nhiều card xếp chồng trong 1 cột (vd: contact-main) thì giữ chiều cao tự nhiên,
   tránh mỗi card phình to 100% chiều cao cột rồi tràn đè lên footer. */
.wp-block-column > .vt-card:only-child{ height:100%; }
.vt-card:hover{ transform:translateY(-4px);box-shadow:0 18px 40px rgba(0,0,0,.08);border-color:var(--vt-red,#C0392B); }
/* Nút CTA (nếu có) luôn nằm đáy thẻ → các nút giữa các thẻ cùng hàng thẳng nhau */
.vt-card > .wp-block-buttons:last-child{ margin-top:auto; }

/* Card trên nền tối */
.vt-card--dark{
  background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.12);
}
.vt-card--dark:hover{ border-color:rgba(192,57,43,.6);box-shadow:none; }

/* Số thứ tự lớn kiểu serif trong card dịch vụ */
.vt-bignum{
  font-family:var(--vt-serif,'Cormorant Garamond',serif);
  font-weight:300;line-height:1;color:var(--vt-red-l,#FDEDEC);
  font-size:72px;
}

/* ── Stat (số liệu nổi bật) ── */
.vt-stat .vt-stat-n{
  font-family:var(--vt-serif,'Cormorant Garamond',serif);
  font-size:clamp(40px,5vw,64px);font-weight:300;line-height:1;
  color:var(--vt-red,#C0392B);
}
.vt-stat .vt-stat-l{
  font-family:var(--vt-sans,'DM Sans',sans-serif);
  font-size:11px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;
  color:var(--vt-mid,#5d6d7e);margin-top:8px;
}

/* ── Hỗ trợ hover cho core/button kiểu outline gold (Block Style) ── */
.wp-block-button.is-style-vt-outline-gold .wp-block-button__link{
  background:transparent;color:var(--vt-red,#C0392B);
  border:1.5px solid var(--vt-red,#C0392B);
}
.wp-block-button.is-style-vt-outline-gold .wp-block-button__link:hover{
  background:var(--vt-red,#C0392B);color:#fff;
}

/* ── core/details dùng làm FAQ accordion (native, không cần JS) ── */
.wp-block-details.vt-faq{
  border:1px solid var(--vt-bd,#e0e3e7);padding:16px 20px;margin-bottom:8px;background:#fff;
}
.wp-block-details.vt-faq summary{
  cursor:pointer;font-family:var(--vt-sans,'DM Sans',sans-serif);
  font-size:15px;font-weight:600;color:var(--vt-ch,#1a1a1a);list-style:none;
}
.wp-block-details.vt-faq summary::-webkit-details-marker{ display:none; }
.wp-block-details.vt-faq[open] summary{ color:var(--vt-red,#C0392B); }
.wp-block-details.vt-faq > *:not(summary){
  margin-top:12px;font-size:14px;color:var(--vt-mid,#5d6d7e);line-height:1.75;font-weight:300;
}

/* ── Danh mục công việc dịch vụ (core/list .vt-svc-checklist) ── */
.vt-svc-checklist{ list-style:none;padding:0;margin:0;column-gap:32px; }
@media(min-width:600px){ .vt-svc-checklist{ columns:2; } }
.vt-svc-checklist li{
  break-inside:avoid;padding:7px 0 7px 20px;position:relative;
  border-bottom:1px solid var(--vt-bd,#e0e3e7);
  font-size:14px;color:var(--vt-mid,#5d6d7e);font-weight:300;
}
.vt-svc-checklist li::before{
  content:'—';position:absolute;left:0;color:var(--vt-red,#C0392B);font-weight:700;
}

/* ── Trang dựng bằng block (template VIETTOP — Trang Block) ── */
/* main full-width: section alignfull tự trải hết chiều ngang, không margin dọc thừa */
.vt-blocks-main{ margin-top:0; }
.vt-blocks-main > *{ margin-top:0;margin-bottom:0; }

/* Section full-bleed: nền trải hết, nội dung thụt lề an toàn 2 bên */
.vt-section{ padding-left:clamp(20px,5vw,48px);padding-right:clamp(20px,5vw,48px); }

/* Đảm bảo alignfull không bị giới hạn chiều rộng trong template classic */
.vt-blocks-main .alignfull{ max-width:none; }

/* ── Trạng thái form liên hệ (shortcode viettop_contact_form) ── */
.vt-form-msg{ display:none;color:var(--vt-red,#C0392B);font-size:13px;margin-bottom:16px; }
.vt-form-success{ display:none;text-align:center;padding:48px 28px;border:1px solid var(--vt-bd,#e0e3e7); }
.vt-form-success.show{ display:block; }

/* ── Bảng (core/table) cuộn ngang khi màn hẹp, không bị cắt ── */
.wp-block-table{ overflow-x:auto; -webkit-overflow-scrolling:touch; }

/* ── Bảng danh sách dự án đầy đủ (core/table .vt-proj-table) ──
   Thay cho is-style-stripes (chữ xám mờ khó đọc). Header xanh đậm
   thương hiệu, chữ than chì rõ ràng, hover đổi nền + gạch đỏ bên trái. */
.wp-block-table.vt-proj-table{ margin:0; }
.wp-block-table.vt-proj-table table{
  width:100%; border-collapse:collapse; background:#fff;
  font-family:var(--vt-sans); border:1px solid var(--vt-bd);
}
/* Hàng tiêu đề */
.wp-block-table.vt-proj-table thead th{
  background:var(--vt-ch); color:#fff;
  font-size:11px; font-weight:700; letter-spacing:2px; text-transform:uppercase;
  text-align:left; padding:15px 24px; border:none; white-space:nowrap;
}
/* Ô dữ liệu */
.wp-block-table.vt-proj-table tbody td{
  padding:15px 24px; font-size:15px; color:var(--vt-ink);
  border:none; border-bottom:1px solid var(--vt-bd);
  vertical-align:middle; line-height:1.5; background:transparent;
}
.wp-block-table.vt-proj-table tbody tr:last-child td{ border-bottom:none; }
.wp-block-table.vt-proj-table tbody tr:nth-child(even){ background:var(--vt-off); }
/* Cột 1 — tên dự án: nổi bật, xanh đậm */
.wp-block-table.vt-proj-table tbody td:first-child{ font-weight:700; color:var(--vt-ch); }
/* Cột 2 — khách hàng: phụ */
.wp-block-table.vt-proj-table tbody td:nth-child(2){ color:var(--vt-mid); }
/* Cột 3 — ngành: chấm tròn đỏ + chữ steel */
.wp-block-table.vt-proj-table tbody td:nth-child(3){
  color:var(--vt-steel); font-weight:600; font-size:13px; white-space:nowrap;
}
.wp-block-table.vt-proj-table tbody td:nth-child(3)::before{
  content:""; display:inline-block; width:6px; height:6px; border-radius:50%;
  background:var(--vt-red); margin-right:9px; vertical-align:middle;
}
/* Hover: nền xanh nhạt + gạch đỏ bên trái */
.wp-block-table.vt-proj-table tbody tr{ transition:background .15s ease; }
.wp-block-table.vt-proj-table tbody tr:hover{ background:rgba(9,56,38,.05); }
.wp-block-table.vt-proj-table tbody tr:hover td:first-child{ box-shadow:inset 3px 0 0 var(--vt-red); }

/* ── Dải logo chạy ngang vô hạn (pattern viettop/logos-marquee) ──
   Một hàng tên/logo khách hàng tự cuộn liên tục. Nội dung được nhân ĐÔI trong
   .vt-logos-track; animation chạy translateX(-50%) = đúng 1 bản → lặp liền mạch.
   Hai mép mờ dần (mask). Rê chuột để tạm dừng. */
.vt-logos-marquee{
  position:relative; width:100%; overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
}
.vt-logos-track{
  display:flex; align-items:center; width:max-content;
  animation:vt-logos-scroll 40s linear infinite; will-change:transform;
}
.vt-logos-marquee:hover .vt-logos-track{ animation-play-state:paused; }
.vt-logo-item{
  flex:0 0 auto; display:flex; align-items:center; justify-content:center;
  padding:0 clamp(26px,4vw,56px);
  font-family:var(--vt-serif); font-size:clamp(18px,2.4vw,27px); font-weight:400;
  letter-spacing:.3px; white-space:nowrap; color:var(--vt-steel,#004C40);
  transition:color .2s ease;
}
.vt-logo-item:hover{ color:var(--vt-ch,#093826); }
/* Khi là LOGO ẢNH (khách upload qua "Logo Khách Hàng"): cao đồng đều, hiện màu sẵn */
.vt-logo-item img.vt-logo-img{
  height:clamp(72px,9vw,116px); width:auto; max-width:360px; display:block;
  object-fit:contain; filter:none; opacity:1;
  transition:transform .25s ease;
}
.vt-logo-item:hover img.vt-logo-img{ transform:scale(1.04); }
@keyframes vt-logos-scroll{ from{transform:translateX(0);} to{transform:translateX(-50%);} }
/* Tôn trọng người dùng tắt chuyển động: bỏ cuộn, xếp gọn nhiều dòng, ẩn bản sao */
@media(prefers-reduced-motion:reduce){
  .vt-logos-marquee{ -webkit-mask-image:none; mask-image:none; }
  .vt-logos-track{ animation:none; width:auto; flex-wrap:wrap; justify-content:center; gap:12px 0; }
  .vt-logos-track [aria-hidden="true"]{ display:none; }
}

/* ── Responsive nhỏ ── */
@media(max-width:768px){
  .vt-bignum{ font-size:56px; }
  .vt-card{ padding:28px 24px; }
  .wp-block-table table{ min-width:520px; } /* ép rộng tối thiểu → cuộn ngang thay vì dồn chữ */
  /* Khối số liệu (.vt-stat trong wp:columns) → 2 cột (2x2) thay vì xếp dọc 1 cột */
  .wp-block-columns:has(.vt-stat){ flex-wrap:wrap!important; }
  .wp-block-columns:has(.vt-stat) > .wp-block-column{ flex-basis:calc(50% - .5rem)!important; flex-grow:1; min-width:0; }
}

/* ===== HERO full màn hình (đi kèm .vt-hero-bgvideo) ===== */
/* ===== HERO – video nền + 2 mảng màu + full màn hình ===== */
.vt-hero-bgvideo{ position:relative; overflow:hidden; min-height:100vh; }
.vt-hero-bgvideo__video{ position:absolute; inset:0; z-index:0; background:#093826; }
.vt-hero-bgvideo__video video,
.vt-hero-bgvideo__video img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; pointer-events:none; display:block; }
.vt-hero-bgvideo .vt-hero-bgvideo__panels{ position:relative; z-index:1; margin:0; min-height:100vh; align-items:stretch; }
.vt-hero-bgvideo .vt-hero-bgvideo__panels>.wp-block-column{ display:flex; flex-direction:column; justify-content:center; align-items:flex-start; }
.vt-hero-bgvideo .vt-hero-bgvideo__panels>.wp-block-column>*{ margin-left:0!important; margin-right:0!important; width:100%; max-width:560px; }
/* 2 mảng bán trong suốt để nhìn xuyên thấy video phía sau */
.vt-hero-bgvideo__panels .wp-block-column.has-vt-black-background-color{ background-color:rgba(9,56,38,.80)!important; }
.vt-hero-bgvideo__panels .wp-block-column.has-vt-gold-background-color{ background-color:rgba(0,76,64,.60)!important; }
@media (max-width:781px){
  .vt-hero-bgvideo, .vt-hero-bgvideo .vt-hero-bgvideo__panels{ min-height:auto; }
  .vt-hero-bgvideo .vt-hero-bgvideo__panels{ flex-direction:column; }
  .vt-hero-bgvideo .vt-hero-bgvideo__panels>.wp-block-column>*{ max-width:none; }
}

/* ===== Lưới thẻ có nút (đi kèm .vt-gallery) ===== */
.vt-gallery .wp-block-column{ display:flex; flex-direction:column; }
.vt-gallery .wp-block-column>.wp-block-buttons{ margin-top:auto; padding-top:1rem; }

/* ================================================================
   VIETTOP — Lưới thẻ dự án (.vt-gallery)
   ================================================================ */

/* Mỗi thẻ = cột flex, cao bằng nhau, chừa khoảng trống dưới nút */
.vt-gallery .wp-block-column{
  display:flex; flex-direction:column;
  padding-bottom:28px;                          /* (2) khoảng trống DƯỚI nút */
}

/* Ảnh: đều nhau CẢ chiều rộng LẪN chiều cao */
.vt-gallery .wp-block-column > .wp-block-image{
  width:100%!important; max-width:none!important;
  margin:0 0 16px!important; text-align:left;
}
.vt-gallery .wp-block-column > .wp-block-image img{
  width:100%!important; max-width:none!important;
  height:clamp(200px,22vw,260px)!important;     /* (3) chiều cao ảnh */
  aspect-ratio:auto!important;
  object-fit:cover; object-position:center; display:block;
}

/* Chữ mô tả: giới hạn số dòng, dài hơn tự cắt "…" */
.vt-gallery .wp-block-column > p{
  margin:0; padding:0 18px;
  display:-webkit-box; -webkit-box-orient:vertical;
  -webkit-line-clamp:3; line-clamp:3;           /* (1) số dòng tối đa */
  overflow:hidden;
}

/* Nút: đẩy xuống đáy thẻ + cách chữ phía trên */
.vt-gallery .wp-block-column > .wp-block-buttons{
  margin-top:auto; padding:18px 18px 0;
}

/* Responsive: 3 cột → 2 cột (tablet) → 1 cột (điện thoại) */
@media (max-width:1024px){
  .vt-gallery .wp-block-columns{ flex-wrap:wrap!important; }
  .vt-gallery .wp-block-columns > .wp-block-column{
    flex-basis:calc(50% - .75rem)!important; flex-grow:1; min-width:0;
  }
}
@media (max-width:600px){
  .vt-gallery .wp-block-columns > .wp-block-column{ flex-basis:100%!important; }
  .vt-gallery .wp-block-column > .wp-block-image img{ height:200px!important; }
}