/* ============================================================
   THÀNH HƯNG — CSS global (mọi trang)
   Nút nổi (FAB) + tinh chỉnh Header/Footer Flatsome theo thiết kế.
   Màu hardcode (không phụ thuộc tokens của thanhhung-home.css vì
   file này nạp toàn site, kể cả trang không có thanhhung-home.css).
   ============================================================ */

/* ---------- NÚT NỔI (gọi + Zalo) ---------- */
.th-fab { position: fixed; right: 20px; bottom: 20px; z-index: 70; display: flex; flex-direction: column; gap: 12px; }
.th-fab a { width: 54px; height: 54px; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 12px 28px rgba(1,22,49,.16); color: #fff; }
.th-fab a:focus { outline: none; }
.th-fab svg { width: 24px; height: 24px; }
.th-fab .call { background: #BF0603; animation: thpulse 2.2s infinite; }
.th-fab .zalo { background: #004E89; }
@keyframes thpulse { 0% { box-shadow: 0 0 0 0 rgba(191,6,3,.5); } 70% { box-shadow: 0 0 0 14px rgba(191,6,3,0); } 100% { box-shadow: 0 0 0 0 rgba(191,6,3,0); } }
@media (prefers-reduced-motion: reduce) { .th-fab .call { animation: none; } }

/* ---------- MŨI TÊN CUỘN XUỐNG (double chevron) — NGUỒN DUY NHẤT, đồng bộ mọi trang ----------
   Định nghĩa 1 lần ở global để trang chủ + trang dịch vụ (và mọi trang sau này)
   luôn GIỐNG HỆT nhau về kích thước, màu, animation. Khoảng cách trên/dưới do
   padding section điều khiển (đã thu gọn về calc(--sec-pad*.35) ở 2 đầu transition). */
.th-scroll-cue { display: flex; flex-direction: column; align-items: center; margin: 54px 0 4px; }
.th-cue-chev { display: flex; line-height: 0; margin-top: -22px; }
.th-cue-chev:first-child { margin-top: 0; }
.th-cue-chev svg { width: 36px; height: 36px; color: #BF0603; stroke-width: 2.25; filter: drop-shadow(0 2px 5px rgba(191,6,3,.2)); animation: th-cue-wave 1.5s ease-in-out infinite; }
.th-cue-chev:nth-child(2) svg { animation-delay: .22s; }
@keyframes th-cue-wave { 0% { opacity: .2; transform: translateY(-3px); } 50% { opacity: 1; transform: translateY(2px); } 100% { opacity: .2; transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .th-cue-chev svg { animation: none; opacity: .85; } }

/* ---------- TRANG CHỦ: ép font thương hiệu (Flatsome inline h1-h6/body = Lato, thắng kế thừa) ---------- */
body.th-home,
body.th-home h1, body.th-home h2, body.th-home h3,
body.th-home h4, body.th-home h5, body.th-home h6,
body.th-home .heading-font, body.th-home p, body.th-home a,
body.th-home span, body.th-home li, body.th-home div,
body.th-home input, body.th-home select, body.th-home textarea,
body.th-home button, body.th-home .button, body.th-home .th-pill {
  font-family: 'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, sans-serif;
}

/* ---------- BÀI VIẾT (single post): ép font thương hiệu cho toàn vùng nội dung
   (banner + section .thsp bài dịch vụ + bài blog Tin tức). Trước đây chỉ th-home /
   th-svc được ép → single post rơi về Lato mặc định của Flatsome, nhìn lệch. ---------- */
body.single-post #content,
body.single-post #content h1, body.single-post #content h2, body.single-post #content h3,
body.single-post #content h4, body.single-post #content h5, body.single-post #content h6,
body.single-post #content p, body.single-post #content a, body.single-post #content span,
body.single-post #content li, body.single-post #content div,
body.single-post #content td, body.single-post #content th,
body.single-post #content input, body.single-post #content button, body.single-post #content .th-pill {
  font-family: 'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, sans-serif;
}

/* ---------- TRANG CHỦ: fix khối Tin tức — ảnh thumbnail tràn đè lên chữ ----------
   .ph dùng height:100% phụ thuộc chiều cao parent → runtime không resolve được,
   ảnh giữ kích thước gốc tràn ra; .news-thumb position:relative nên vẽ đè body.
   Ép chiều cao px trực tiếp lên ảnh + cắt tràn. */
body.th-home .news-thumb { overflow: hidden; }
body.th-home .news-card:not(.feature) .news-thumb,
body.th-home .news-card:not(.feature) .news-thumb .ph { height: 130px !important; }

/* Card "feature" cao gấp đôi (grid-row span 2): card bị grid kéo giãn nhưng
   flex con KHÔNG nở theo (quirk nested-flex trong stretched grid item) → dôi ô
   trống dưới. Fix: card feature dùng GRID hàng [1fr auto] → hàng ảnh (1fr) nuốt
   trọn chiều cao dôi; ảnh absolute inset:0 phủ kín hàng ảnh dù cao bao nhiêu. */
body.th-home .news-card.feature { display: grid; grid-template-rows: 1fr auto; }
body.th-home .news-card.feature .news-thumb { position: relative; min-height: 240px; height: auto !important; }
body.th-home .news-card.feature .news-thumb .ph { position: absolute; inset: 0; width: 100%; height: 100% !important; object-fit: cover; }
@media (max-width: 860px) {
  body.th-home .news-card.feature { display: flex; }
  body.th-home .news-card.feature .news-thumb { min-height: 0; height: 200px !important; }
  body.th-home .news-card.feature .news-thumb .ph { position: static; height: 200px !important; }
}

/* ---------- TRANG CHỦ: nhúng bản đồ Google Maps TP.HCM vào khối .cov-map ----------
   iframe phủ kín khối (absolute inset:0). Tint đổi thành scrim CHỈ ở đỉnh + đáy
   (gradient mỏng) để chữ tiêu đề/office-card đọc rõ mà KHÔNG che bản đồ; tint
   pointer-events:none nên người dùng vẫn kéo/zoom map được. */
body.th-home .cov-map .cov-map-embed { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
body.th-home .cov-map .cov-map-tint {
  background: linear-gradient(180deg, rgba(1,22,49,.78) 0%, rgba(1,22,49,.30) 18%, rgba(1,22,49,0) 34%, rgba(1,22,49,0) 100%);
}

/* ---------- TRANG CHỦ: lưới dự án (masonry) — ép ảnh phủ kín ô ----------
   .masonry-item .ph dùng height:100% KHÔNG resolve được khi ô "tall" (span 2
   hàng = 416px): ảnh ngang chỉ cao bằng tỉ lệ gốc (~280px) → dôi khoảng xám
   dưới. Lưới đã cố định grid-auto-rows:200px nên chiều cao ô là definite →
   ảnh absolute inset:0 phủ kín đúng khung dù ô cao bao nhiêu. Caption (cũng
   absolute, đứng sau trong DOM) vẫn vẽ đè lên ảnh. */
body.th-home .masonry-item { position: relative; }
body.th-home .masonry-item .ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ---------- TRANG CHỦ: thẻ "Báo chí đưa tin" — masthead branded thay ảnh chụp lỗi ----------
   3 card báo (Dân Trí/VnExpress/Tuổi Trẻ) trước đây dùng ảnh screenshot báo khác
   (Thanh Hóa, HAPLU…) → sai logo, méo ảnh. Thay bằng header tinted: icon tờ báo
   + tên báo lớn, sạch & nhất quán, không phụ thuộc ảnh chụp. */
body.th-home .article-card .press-head {
  height: 170px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  background: linear-gradient(135deg, #f7f9fc 0%, #eef2f8 100%);
  border-bottom: 1px solid rgba(1,22,49,.06);
  border-top-left-radius: 16px; border-top-right-radius: 16px;
}
body.th-home .article-card .press-head-ico {
  width: 46px; height: 46px; border-radius: 12px; flex: none;
  background: #BF0603; color: #fff; display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 16px rgba(191,6,3,.28);
}
body.th-home .article-card .press-head-ico i, body.th-home .article-card .press-head-ico svg { width: 22px; height: 22px; }
body.th-home .article-card .press-head-name { font-size: 24px; font-weight: 800; letter-spacing: -0.02em; color: #011631; }

/* ---------- HEADER (navy theo thiết kế) — áp dụng cho TẤT CẢ các trang ---------- */
#masthead, #masthead .nav a, #masthead .header-nav a, #masthead .nav > li > a { font-family: 'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
#masthead, #masthead .header-main, .header-bg-color { background-color: #011631 !important; }
#masthead.stuck .header-main, #header.stuck #masthead { box-shadow: 0 2px 14px rgba(1,22,49,.35); }
#masthead .header-nav a, #masthead .nav > li > a, #masthead .header-nav-main a { color: #DCE0EC !important; font-weight: 500; }
#masthead .header-nav a:hover, #masthead .nav > li > a:hover { color: #fff !important; }
/* Logo trong chip trắng bo góc cho nổi trên nền navy */
#logo img { background: #fff; border-radius: 8px; padding: 6px 10px; }
/* Đẩy nút gọi về sát phải header + canh đều menu bên trái */
#masthead .header-nav-main.nav-left { align-items: center; }
#masthead .th-header-call { margin-left: auto; }
/* Nút điện thoại đỏ trên header (gắn class 'th-header-call' cho menu item nút) */
#masthead .th-header-call > a, #masthead a.th-header-call {
  background: #BF0603 !important; color: #fff !important; border-radius: 999px !important;
  padding: 0 20px !important; height: 42px; display: inline-flex; align-items: center; gap: 8px;
  font-weight: 700; box-shadow: 0 6px 16px rgba(191,6,3,.30);
}
#masthead .th-header-call > a:hover, #masthead a.th-header-call:hover { background: #A30503 !important; }

/* ---------- FOOTER (navy 4 cột) ---------- */
/* Navy phủ cả #footer LẪN hàng widget bên trong (.footer-1/.footer-2/.footer-widgets)
   — nếu không, Flatsome tô .footer-1 = trắng đè lên nền navy => chữ sáng bị chìm. */
#footer, .footer-wrapper,
#footer .footer-widgets,
#footer .footer-1, #footer .footer-2,
#footer .row, #footer .col { background-color: #011631 !important; }
#footer, #footer p, #footer li, #footer a { color: #C9CDD2; }
#footer a:hover { color: #fff; }
#footer .widget-title, #footer h1, #footer h2, #footer h3, #footer h4 { color: #fff; }
/* Thanh bản quyền dưới cùng — navy đậm hơn cho tách lớp */
#footer .absolute-footer { background-color: #010d1f !important; }
.absolute-footer, html #footer .absolute-footer a { color: #8E94A0; }

/* Lưới 4 cột footer (1 widget Custom HTML chứa .th-footer-grid) */
#footer, #footer .th-footer-grid { font-family: 'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
#footer .th-footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.3fr; gap: 40px; padding: 8px 0; }
#footer .th-foot-logo img { background: #fff; border-radius: 8px; padding: 6px 10px; height: 42px; width: auto; display: inline-block; }
#footer .th-foot-desc { font-size: 14px; line-height: 1.65; margin: 16px 0 0; max-width: 280px; color: #C9CDD2; }
#footer .th-foot-h { color: #fff; font-size: 16px; font-weight: 700; margin: 0 0 16px; }
#footer ul.th-foot-links { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; }
#footer .th-foot-links a { color: #C9CDD2; font-size: 14px; }
#footer .th-foot-links a:hover { color: #fff; }
#footer .th-foot-call { display: inline-flex; align-items: center; gap: 8px; background: #BF0603; color: #fff !important; height: 46px; padding: 0 22px; border-radius: 999px; font-weight: 700; }
#footer .th-foot-call:hover { background: #A30503; color: #fff !important; }
#footer .th-foot-call svg { width: 18px; height: 18px; }
#footer .th-foot-info { margin-top: 14px; display: grid; gap: 9px; font-size: 14px; color: #C9CDD2; }
#footer .th-foot-info span { display: flex; gap: 8px; align-items: center; }
#footer .th-foot-info svg { width: 16px; height: 16px; color: #E4BC6C; flex: 0 0 auto; }
@media (max-width: 849px) { #footer .th-footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; } }
@media (max-width: 549px) { #footer .th-footer-grid { grid-template-columns: 1fr; gap: 24px; } }

/* ============================================================
   FIX RESPONSIVE COMPONENT DÙNG CHUNG (site-wide, không scope)
   Bảng giá .pm-table + máy tính giá .calc-* xuất hiện ở CẢ trang chủ
   và trang dịch vụ → fix ở global để mọi trang nhất quán trên mobile.
   Màu hardcode (không phụ thuộc tokens của home/service CSS).
   ============================================================ */
@media (max-width: 900px) {
  /* Máy tính giá: chống tràn/cắt chữ khi thu hẹp */
  .calc-card > * { min-width: 0; }
  .calc-result, .calc-result * { min-width: 0; max-width: 100%; }
  .calc-result { overflow-wrap: break-word; }
  .calc-addon { min-width: 0; }
  .calc-addon > * { min-width: 0; }
  .calc-addon > :last-child { flex: none; white-space: nowrap; }
  /* Bảng giá cuộn ngang gọn ở tablet */
  .pm-table { min-width: 560px; }
  .pm-table th:first-child, .pm-table td:first-child { white-space: nowrap; }
  /* Hộp phí + FAQ: cho phép xuống dòng */
  .fee-box span { white-space: normal !important; }
  .fee-box *, .svc-faq-qt, .svc-faq-a p { overflow-wrap: break-word; min-width: 0; }
}

@media (max-width: 600px) {
  /* Bảng giá → thẻ xếp chồng (stacked cards) trên điện thoại */
  .pm-table { min-width: 0; width: 100%; }
  .pm-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .pm-table, .pm-table tbody, .pm-table tr, .pm-table td { display: block; width: 100%; }
  .pm-table tr { border: 1px solid #E5E8EC; border-radius: 12px; background: #fff; padding: 4px 16px 8px; margin-bottom: 12px; box-shadow: 0 1px 3px rgba(1,22,49,.06); }
  .pm-table tr:last-child { margin-bottom: 0; }
  .pm-table td { padding: 9px 0; text-align: right; border-bottom: 1px solid #E5E8EC; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
  .pm-table td:last-child { border-bottom: none; }
  .pm-table td::before { content: attr(data-label); color: #6B7280; font-weight: 600; font-size: 13px; text-align: left; flex: none; }
  .pm-table td.veh { display: block; text-align: left; white-space: normal; font-size: 15.5px; font-weight: 800; color: #011631; padding: 12px 0 10px; margin-bottom: 4px; border-bottom: 2px solid rgba(191,6,3,.10); }
  .pm-table td.veh::before { content: none; }
}