/* ============================================================
   THÀNH HƯNG TAXI TẢI — Trang chủ (Homepage)
   Stylesheet cho theme Flatsome / WordPress
   Tự chứa: không phụ thuộc React hay design-system bundle.
   Nạp SAU style.css của Flatsome (xem functions-snippet.php).
   ============================================================ */

/* ---------- 1. DESIGN TOKENS ---------- */
:root {
  /* Đỏ thương hiệu (CTA + từ khóa) */
  --th-red: #BF0603;
  --th-red-hover: #A30503;
  --red-50: #FCF0F0;   /* nền hồng nhạt */
  --red-100: #F9D9D8;
  --red-400: #D63B37;
  --red-500: #BF0603;
  --red-700: #850402;

  /* Navy (header, footer, vùng tối) */
  --navy-900: #011631;
  --navy-800: #131540;
  --navy-700: #1A1D5C;
  --navy-50: #EAEBF6;

  /* Vàng đồng (badge, accent < 5%) */
  --copper-400: #E4BC6C;
  --copper-500: #D4A24A;

  /* Xanh dịch vụ (link, info, Zalo) */
  --blue-400: #4CA9DF;
  --blue-800: #004E89;

  /* Trung tính */
  --white: #FFFFFF;
  --neutral-50: #F0F3FA;
  --neutral-100: #E5E7EB;
  --neutral-200: #C9CDD2;
  --neutral-400: #9EA4AA;
  --neutral-500: #72787F;
  --neutral-700: #4B4F54;
  --neutral-900: #1B1D1F;

  /* Aliases ngữ nghĩa */
  --surface-tint-red: var(--red-50);
  --border-subtle: var(--neutral-200);
  --border-strong: var(--neutral-400);
  --success: #1E9E6A;
  --success-bg: #E6F6EF;

  /* Hiệu ứng */
  --shadow-sm: 0 1px 3px rgba(1,22,49,.08);
  --shadow-md: 0 4px 12px rgba(1,22,49,.10);
  --shadow-lg: 0 12px 28px rgba(1,22,49,.16);
  --shadow-cta: 0 6px 16px rgba(191,6,3,.30);
  --ease-out: cubic-bezier(0.22,0.61,0.36,1);

  /* Layout */
  --sec-pad: 36px;
  --maxw: 1200px;
}

/* ---------- 2. BASE (scope trong #content trang chủ để không đụng header/footer Flatsome) ---------- */
body.home #content { font-family: 'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, sans-serif; color: var(--neutral-900); font-size: 16px; -webkit-font-smoothing: antialiased; }
body.home #content * { box-sizing: border-box; }
body.home #content img { max-width: 100%; display: block; height: auto; }
body.home #content a { color: inherit; text-decoration: none; }
/* Gỡ max-width/padding mặc định của Flatsome cho vùng nội dung để section chạy full-width */
body.home #content .page-wrapper-inner, body.home #content .entry-content { max-width: none !important; padding: 0 !important; margin: 0 !important; }

.th-container { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.th-section { padding: var(--sec-pad) 0; }
.th-section.tight { padding: calc(var(--sec-pad) * 0.7) 0; }

/* ---------- 3. TYPOGRAPHY HELPERS ---------- */
/* .th-eyebrow: đã chuyển sang global.css (nguồn duy nhất, đồng bộ mọi trang).
   Trước đây khai báo cả ở đây lẫn service.css với giá trị khác nhau nên nhãn đỏ
   trang chủ (chữ thường) trông khác trang dịch vụ (in hoa, giãn chữ).
   Đã bỏ gạch ngang "—" trước eyebrow theo yêu cầu (2026-08-05). */

/* Mũi tên cuộn xuống: style chung ở global.css (nguồn duy nhất). Tại đây chỉ
   thu gọn padding 2 đầu transition hero→section "Lợi thế" để khoảng cách quanh
   mũi tên KHỚP trang dịch vụ (54px trên / ~57px dưới, cân đối). */
body.th-home #top.th-hero { padding-bottom: calc(var(--sec-pad) * .35); }
body.th-home #loi-the { padding-top: calc(var(--sec-pad) * .35); }
.th-h2 { font-size: 34px; line-height: 1.18; font-weight: 800; color: var(--navy-900); margin: 0 0 14px; letter-spacing: -0.02em; text-wrap: balance; }
.th-h2 .kw { color: var(--th-red); }
.th-lead { font-size: 18px; line-height: 1.6; color: var(--neutral-500); margin: 0; max-width: 900px; text-wrap: pretty; }
.th-center { text-align: center; }
/* .th-center .th-eyebrow: xem global.css */
.th-center .th-lead { margin-left: auto; margin-right: auto; }

/* ---------- 4. CARD + BUTTON + ICON CHIP ---------- */
.th-card { background: var(--white); border: 1px solid var(--border-subtle); border-radius: 12px; box-shadow: var(--shadow-sm); }
.th-pill { border-radius: 999px; height: 46px; padding: 0 26px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-weight: 700; font-size: 15px; border: 2px solid transparent; cursor: pointer; text-decoration: none; transition: background .18s var(--ease-out), color .18s var(--ease-out), transform .12s, box-shadow .18s; white-space: nowrap; font-family: inherit; text-transform: none; letter-spacing: normal; }
/* !important: Flatsome style link <a> trong nội dung (selector ID #content a...)
   thắng class -> đè mất màu nền/chữ của nút. Buộc !important để CTA luôn đúng màu. */
.th-pill.primary { background: var(--th-red) !important; color: #fff !important; box-shadow: var(--shadow-cta); }
.th-pill.primary:hover { background: var(--th-red-hover) !important; transform: translateY(-1px); color: #fff !important; }
.th-pill.outline { background: transparent !important; color: var(--th-red) !important; border-color: var(--th-red); }
.th-pill.outline:hover { background: var(--th-red) !important; color: #fff !important; }
.th-pill.heronavy { background: var(--navy-900) !important; color: #fff !important; box-shadow: 0 6px 16px rgba(1,22,49,.28); }
.th-pill.heronavy:hover { background: #02244e !important; transform: translateY(-1px); color: #fff !important; }
.th-pill.white { background: #fff !important; color: var(--th-red) !important; }
.th-pill.white:hover { background: var(--neutral-50) !important; transform: translateY(-1px); }
.th-pill:active { transform: translateY(1px); }

.icon-chip { width: 52px; height: 52px; border-radius: 50%; background: var(--surface-tint-red); display: inline-flex; align-items: center; justify-content: center; color: var(--th-red); flex: none; }
.icon-chip i, .icon-chip svg { width: 24px; height: 24px; }

/* lucide icons inherit color via currentColor */
body.home #content [data-lucide], body.home #content svg.lucide { stroke-width: 2; }

/* ---------- 5. GRID HELPERS ---------- */
.th-grid { display: grid; gap: 20px; }
.cols-2 { grid-template-columns: repeat(2, 1fr); }
.cols-3 { grid-template-columns: repeat(3, 1fr); }
.cols-4 { grid-template-columns: repeat(4, 1fr); }

/* ---------- 6. HEADER (sticky navy) ---------- */
.th-header { position: sticky; top: 0; z-index: 60; background: var(--navy-900); transition: box-shadow .2s; }
.th-header.solid { box-shadow: 0 2px 14px rgba(1,22,49,.35); }
.th-header-bar { display: flex; align-items: center; gap: 18px; height: 68px; }
.th-logo { background: #fff; border-radius: 8px; padding: 6px 10px; display: flex; flex: none; }
.th-logo img { height: 30px; }
.th-nav { display: flex; gap: 22px; margin-left: 8px; }
.th-nav a { color: #DCE0EC; text-decoration: none; font-size: 15px; font-weight: 500; transition: color .15s; }
.th-nav a:hover { color: #fff; }
.th-burger { background: transparent; border: none; color: #fff; cursor: pointer; padding: 6px; }
.th-mobile-menu { background: var(--navy-900); border-top: 1px solid rgba(255,255,255,.1); padding: 8px 0 16px; }
.th-mobile-menu .th-container { display: flex; flex-direction: column; gap: 4px; }
.th-mobile-menu a { color: #DCE0EC; text-decoration: none; font-size: 16px; padding: 10px 4px; }

/* ---------- 7. HERO ---------- */
.th-hero { background: linear-gradient(180deg,#FCF0F0 0%,#fff 78%); padding-top: calc(var(--sec-pad) * .85); }
.th-hero-grid { display: grid; grid-template-columns: minmax(0,55fr) minmax(0,45fr); gap: 44px; align-items: center; }
.hero-commit { display: flex; align-items: center; gap: 10px; font-size: 15.5px; font-weight: 600; color: var(--neutral-700); }
.hero-commit .tick { width: 24px; height: 24px; border-radius: 50%; background: var(--surface-tint-red); color: var(--th-red); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.hero-img { width: 100%; height: 430px; border-radius: 16px; object-fit: cover; background: var(--neutral-50); }
/* Ảnh thật thay cho ô .ph: phủ kín khung, giữ tỉ lệ (height do inline-style/contextual quy định) */
img.ph { width: 100%; object-fit: cover; display: block; }
.svc-card img.ph { border-top-left-radius: 16px; border-top-right-radius: 16px; }
.article-card img.ph { border-top-left-radius: 16px; border-top-right-radius: 16px; }
.hero-trust { display: grid; grid-template-columns: repeat(4, 1fr); padding: 8px 0; border-radius: 16px; }
.hero-trust-cell { display: flex; align-items: center; gap: 14px; justify-content: center; padding: 18px 16px; }
.hero-trust-cell + .hero-trust-cell { border-left: 1px solid var(--border-subtle); }
.hero-badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; font-size: 13px; font-weight: 700; }
.hero-badge.gold { background: var(--copper-50, #FFF8EB); color: var(--copper-700, #8C6429); }
.hero-badge.red { background: var(--surface-tint-red); color: var(--th-red); }
.hero-chips { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.hero-chip { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px; background: var(--surface-tint-red); color: var(--navy-900); font-size: 14px; font-weight: 600; white-space: nowrap; }

/* ---------- 8. ADVANTAGE / SERVICE / STATS CARDS ---------- */
.adv-card { padding: 24px; }
.svc-card { overflow: hidden; text-decoration: none; display: block; transition: transform .15s, box-shadow .15s; }
.svc-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.stats-dark { background: var(--navy-900); background-image: radial-gradient(rgba(228,188,108,.16) 1px, transparent 1.4px); background-size: 22px 22px; }

/* ---------- 8b. SECTION "LỢI THẾ" — DỰNG BẰNG ELEMENT GỐC UX BUILDER ----------
   Section này đã chuyển từ 1 khối HTML sang row/col/text/button của Flatsome
   để sửa chữ bằng cách click thẳng trong builder. CSS dưới đây tái tạo đúng
   kiểu thẻ .th-card.adv-card cũ, đặt lên .col-inner (Flatsome chỉ cho gắn class
   vào .col nên phải nhắm con của nó). */
/* Bề ngang: .row của Flatsome mặc định chỉ 1080px, hẹp hơn các section khác
   (1200px). Cộng 20px bù cho khoảng đệm 10px hai bên của .row-small để mép
   thẻ thẳng hàng với những section còn lại. */
/* Khoảng đệm trên/dưới: bám vào CLASS chứ không bám vào id "loi-the", vì
   UX Builder tự đặt lại id cho section (vd section-8642) mỗi lần dựng lại.
   Cần !important vì Flatsome in ra luật theo id (#section-xxxx) nên thắng class. */
body.th-home .th-adv-sec {
	padding-top: calc(var(--sec-pad) * .35) !important;
	padding-bottom: var(--sec-pad) !important;
}

/* Viết là "section.th-adv-sec" để thắng luật .row.row-small{max-width:1065px}
   của Flatsome (cùng độ ưu tiên nên phải nhỉnh hơn 1 bậc). */
section.th-adv-sec .row,
section.th-svc-sec .row { max-width: calc(var(--maxw) - 28px); width: calc(100% - 28px); }
/* Khoảng cách dọc: bù thêm cho đúng bản cũ (36px trên, 30px dưới) — cột của
   Flatsome đã sẵn 20px đệm đáy nên chỉ cần cộng phần thiếu. */
.th-adv-row { margin-top: 16px; margin-bottom: 0; }
.th-adv-row + .row { margin-top: 10px; }
.th-adv-col { display: flex; }
.th-adv-col > .col-inner {
	flex: 1;
	background: var(--white);
	border: 1px solid var(--border-subtle);
	border-radius: 12px;
	box-shadow: var(--shadow-sm);
	/* !important: Flatsome in ra luật theo id cột (#col-1234 .col-inner{padding:0})
	   từ thuộc tính padding của shortcode nên thắng class -> chữ dính sát viền. */
	padding: 24px !important;
}
.th-adv-col .th-adv-title h3 { font-size: 18px; font-weight: 700; color: var(--navy-900); margin: 16px 0 8px; }
.th-adv-col .th-adv-desc { font-size: 14.5px; line-height: 1.6; color: var(--neutral-500); }
.th-adv-col .th-adv-desc p { margin: 0; }
.th-adv-col .icon-chip { margin: 0; }

/* Nút CTA: ép kiểu .th-pill thắng style .button mặc định của Flatsome.
   Cần !important vì tuỳ biến giao diện của Flatsome (bo góc = 0) được in ra
   sau cùng nên thắng mọi class thường. */
.button.th-adv-cta {
	/* Nút của Flatsome là inline-block + line-height 15px -> chữ bị đẩy lên sát
	   mép trên. Đổi sang inline-flex để chữ nằm chính giữa ô, giống .th-pill cũ. */
	display: inline-flex; align-items: center; justify-content: center;
	height: 50px; min-height: 0; line-height: 1; margin: 0;
	padding: 0 26px; font-size: 15px; font-weight: 700; text-transform: none;
	border-radius: 999px !important;
	border: 2px solid var(--th-red) !important;
	/* Nút viền thì không đổ bóng — giống hệt nút cũ (.th-pill.outline). */
	box-shadow: none !important;
}
.button.th-adv-cta span { display: inline-flex; align-items: center; }
/* Mũi tên → vẽ bằng CSS (không cần thẻ icon riêng, đỡ bị trình soạn thảo xoá). */
.button.th-adv-cta span::after {
	content: ""; display: inline-block; width: 16px; height: 16px; margin-left: 8px;
	background: currentColor; vertical-align: -3px;
	-webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E") center/contain no-repeat;
	mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* ---------- 8c. SECTION "DỊCH VỤ" — DỰNG BẰNG ELEMENT GỐC UX BUILDER ----------
   Tái tạo đúng thẻ .th-card.svc-card cũ: ảnh 150px tràn viền, huy hiệu icon
   tròn đỏ, tiêu đề, mô tả, dòng "Xem chi tiết". Cả thẻ vẫn bấm được nhờ lớp
   phủ ::before của link (không cần bọc toàn thẻ trong thẻ <a> như bản cũ). */
.th-svc-sec { background: var(--neutral-50); }
.th-svc-row { margin-top: 16px; margin-bottom: 0; }
.th-svc-col { display: flex; }
.th-svc-col > .col-inner {
	flex: 1;
	position: relative;
	overflow: hidden;
	background: var(--white);
	border: 1px solid var(--border-subtle);
	border-radius: 12px;
	box-shadow: var(--shadow-sm);
	text-align: left;
	transition: transform .15s, box-shadow .15s;
	/* !important: Flatsome in ra luật theo id cột nên thắng class thường. */
	padding: 0 0 20px !important;
}
.th-svc-col > .col-inner:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.th-svc-img, .th-svc-img .img-inner { margin: 0 !important; padding: 0 !important; }
/* !important: [ux_image] tự in ra một thẻ <style> nội bộ nhắm theo id ảnh
   (#image_1234 img) nên thắng class -> ảnh giữ nguyên tỉ lệ gốc, thẻ cao lệch. */
/* Khung ảnh theo TỈ LỆ 16:10 thay vì chiều cao cứng 150px.
   Vì sao: thẻ rộng 271px mà ảnh cao cứng 150px thì khung dẹt tỉ lệ 1.81 —
   trong khi 4 tấm ảnh gốc có hình dạng rất khác nhau (1.50 / 0.56 / 1.33 / 0.75).
   Hai tấm ảnh dọc bị cắt mất 58-69% chiều cao, mỗi tấm cắt trúng một vị trí
   khác nhau nên nhìn cả hàng thấy ảnh "nhô lên nhô xuống". Khung 16:10 (cao
   ~170px) bớt dẹt, phần bị cắt ít hơn hẳn, và khung tự co giãn theo bề rộng
   thẻ nên trên điện thoại cũng cân đối. */
.th-svc-img img {
	width: 100% !important;
	height: auto !important;
	aspect-ratio: 16 / 10;
	object-fit: cover !important;
	/* Ngắm ảnh hơi lệch lên: chủ thể (xe, nhân viên) thường nằm trên giữa khung. */
	object-position: center 45%;
	display: block;
}
/* Chỉnh riêng vùng hiển thị cho từng ảnh để chủ thể luôn nằm gọn trong khung.
   Nhắm theo TÊN FILE nên không phụ thuộc thứ tự thẻ — đổi chỗ thẻ vẫn đúng. */
.th-svc-img img[src*="dich-vu-chuyen-nha-1"] { object-position: center center; }
.th-svc-img img[src*="dich-vu-chuyen-van-phong-1"] { object-position: center 45%; }
.th-svc-img img[src*="dich-vu-chuyen-kho-xuong-1"] { object-position: center 75%; }
.th-svc-img img[src*="dich-vu-chuyen-nha-2"] { object-position: center 32%; }
/* display:flex (thay vì inline-flex) để huy hiệu nằm trên dòng riêng, khoảng
   cách tính chính xác chứ không phụ thuộc chiều cao dòng chữ. */
.th-svc-col .th-svc-ic {
	display: flex; width: 44px; height: 44px; margin: 4px 0 0 20px;
	background: var(--th-red); color: #fff; box-shadow: var(--shadow-sm);
}
.th-svc-col .th-svc-title,
.th-svc-col .th-svc-desc,
.th-svc-col .th-svc-more { padding: 0 20px; }
.th-svc-col .th-svc-title h3 { font-size: 17px; font-weight: 700; color: var(--navy-900); margin: 14px 0 7px; }
.th-svc-col .th-svc-desc { font-size: 14px; line-height: 1.6; color: var(--neutral-500); }
.th-svc-col .th-svc-desc p { margin: 0; }
/* line-height:1 để dòng chữ không dôi thêm 2px so với bản cũ. */
.th-svc-col .th-svc-more { margin-top: 14px; line-height: 1; }
.th-svc-col .th-svc-more a {
	display: inline-flex; align-items: center;
	font-size: 13.5px; font-weight: 700;
	color: var(--th-red) !important; text-decoration: none !important;
}
/* Lớp phủ vô hình: biến cả thẻ thành vùng bấm được. */
.th-svc-col .th-svc-more a::before { content: ""; position: absolute; inset: 0; }
.th-svc-col .th-svc-more a::after {
	content: ""; display: inline-block; width: 24px; height: 24px; margin-left: 6px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E") center/contain no-repeat;
	mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* ---------- 8f. SECTION "QUY TRÌNH" — DỰNG BẰNG ELEMENT GỐC UX BUILDER ----------
   6 thẻ 2 hàng, mỗi thẻ có huy hiệu icon bên trái + tiêu đề/mô tả bên phải.
   KHÔNG dùng lưới CSS: trong màn hình UX Builder mỗi element bị bọc thêm một
   thẻ div, nên các ô lưới rơi sai chỗ và chữ bị ép thành cột hẹp. Thay vào đó
   chừa sẵn lề trái 90px trên .col-inner rồi thả huy hiệu vào đó bằng định vị
   tuyệt đối — cách này đúng dù cấu trúc thẻ bên trong có bị bọc thêm hay không. */
.th-flow-sec { background: var(--neutral-50); }
/* Khe hở bản cũ là 18px (không phải 20px của .row-small) nên phải tự đặt lại
   đệm cột, đồng thời cộng 30px vào bề ngang .row để mép thẻ vẫn thẳng hàng
   với các section khác (376..1529). */
section.th-flow-sec .row { max-width: calc(var(--maxw) - 30px); width: calc(100% - 30px); }
section.th-flow-sec .row:first-child > .col { padding-bottom: 0; }
/* margin-bottom âm để triệt tiêu 18px đệm đáy của hàng thẻ cuối. */
.th-flow-row { margin-top: 38px; margin-bottom: -18px; }
/* Viết đủ "section.th-flow-sec .row.th-flow-row" để thắng luật
   .row.row-small > .col { padding: 0 10px 20px } của Flatsome. */
section.th-flow-sec .row.th-flow-row > .col { padding: 0 9px 18px; }
.th-flow-col { display: flex; }
.th-flow-col > .col-inner {
	flex: 1;
	position: relative;
	background: var(--white);
	border: 1px solid var(--border-subtle);
	border-radius: 12px;
	box-shadow: var(--shadow-sm);
	text-align: left;
	/* Lề trái 90px = 22 (đệm) + 52 (huy hiệu) + 16 (khoảng cách) — chỗ trống
	   dành riêng cho huy hiệu icon.
	   !important: Flatsome in ra luật theo id cột (#col-1234 .col-inner{padding:0}). */
	padding: 22px 22px 22px 90px !important;
	/* Phòng khi chữ ngắn hơn huy hiệu (huy hiệu không còn tính vào chiều cao). */
	min-height: 96px;
}
.th-flow-col .th-flow-ic { position: absolute; left: 22px; top: 22px; }
/* CHỈ có tác dụng trong màn hình UX Builder: trình dựng bọc mỗi element trong
   một thẻ div.uxb-wrapper kiểu inline-block + position:relative, và nhét vào
   đó một tấm phủ trong suốt để bắt cú bấm chuột. Vì vậy KHÔNG được đổi lớp bọc
   sang position:static — làm thế tấm phủ bung ra trùm cả thẻ, bấm vào chữ lại
   chọn nhầm ô biểu tượng nên không sửa được nội dung.
   Thay vào đó kéo thẳng lớp bọc của ô biểu tượng ra đúng chỗ huy hiệu: vừa
   nhìn giống hệt ngoài web, vừa bấm được đúng từng phần. */
.th-flow-col > .col-inner > .uxb-wrapper { display: block; position: relative; }
.th-flow-col > .col-inner > .uxb-wrapper--ux_html { position: absolute; left: 22px; top: 22px; width: auto; height: auto; }
.th-flow-col > .col-inner > .uxb-wrapper--ux_html .th-flow-ic { position: static; }
.th-flow-col .th-flow-title h3 { font-size: 16.5px; font-weight: 700; color: var(--navy-900); margin: 4px 0 6px; }
.th-flow-col .th-flow-desc { font-size: 14px; line-height: 1.55; color: var(--neutral-500); }
.th-flow-col .th-flow-desc p { margin: 0; }

/* ---------- 8d. PHẦN CHỮ ĐẦU SECTION "ĐÁNH GIÁ" + "BÁO CHÍ" ----------
   Hai section này có dải ảnh/dải báo chạy bằng JS nên phần dải vẫn giữ HTML;
   chỉ phần chữ (nhãn đỏ + tiêu đề + câu dẫn) được dựng bằng element gốc để
   sửa bằng cách click. CSS dưới đây giữ y nguyên khoảng cách của bản cũ. */
/* Đệm trên/dưới: đặt lại theo class để mobile vẫn co còn 26px như bản cũ
   (Flatsome in ra luật theo id section nên phải !important mới thắng). */
body.th-home .th-svc-sec,
body.th-home .th-flow-sec,
body.th-home .th-el-sec,
body.th-home .th-cta-sec {
	padding-top: var(--sec-pad) !important;
	padding-bottom: var(--sec-pad) !important;
}
/* Bề ngang: cộng 28px bù khoảng đệm 2 bên của .row-small để mép chữ thẳng
   hàng với dải ảnh bên dưới (đúng bằng .th-container cũ). */
section.th-el-sec .row { max-width: calc(var(--maxw) - 28px); width: calc(100% - 28px); }
/* Cột của Flatsome sẵn có 20px đệm đáy; bản cũ để dải ảnh tự đẩy xuống bằng
   margin-top (34px / 30px) nên phải gỡ đệm này, nếu không sẽ dôi ra 20px. */
.th-el-sec .row { margin-bottom: 0; }
.th-el-sec .row > .col { padding-bottom: 0; }
.th-el-sec .th-lead p { margin: 0; }

/* Khu "Dự án thực tế" mượn nguyên khung của .th-el-sec, chỉ thêm nền xám —
   trước đây nền này do thẻ <section> bên trong shortcode tự in ra, nhưng như
   vậy thì tiêu đề nằm trong PHP nên không sửa được bằng UX Builder. */
.th-duan-xam { background: var(--neutral-50); }

/* ---------- 8e. SECTION "CTA CUỐI" — DỰNG BẰNG ELEMENT GỐC UX BUILDER ----------
   Tái tạo đúng dải đỏ cũ: khung chữ rộng 712px, 2 nút bo tròn 54px cao,
   dòng 3 dấu tích bên dưới. Icon điện thoại / máy tính vẽ bằng CSS mask nên
   trình soạn thảo không xoá mất được. */
section.th-cta-sec .row { max-width: 732px; width: calc(100% - 28px); }
.th-cta-sec .row { margin-bottom: 0; }
.th-cta-sec .row > .col { padding-bottom: 0; }
.th-cta-sec .th-cta-title h2 { font-size: 34px; font-weight: 800; color: #fff; line-height: 1.18; margin: 0 0 12px; letter-spacing: normal; text-wrap: balance; }
.th-cta-sec .th-cta-lead { font-size: 17px; color: rgba(255,255,255,.9); margin: 0 0 26px; }
.th-cta-sec .th-cta-lead p { margin: 0; }
/* Flatsome chèn 1 dấu xuống dòng giữa 2 nút -> dôi ra ~4px khoảng trắng, làm
   khe hở giữa 2 nút rộng hơn bản cũ. Đặt cỡ chữ 0 cho khung ngoài để khoảng
   trắng đó biến mất; mọi phần tử bên trong đều đã có cỡ chữ riêng. */
.th-cta-sec .col-inner { font-size: 0; }
/* Nút của Flatsome là inline-block + line-height 15px -> chữ dính mép trên;
   đổi sang inline-flex để chữ nằm giữa ô, giống .th-pill cũ.
   !important vì tuỳ biến giao diện Flatsome (bo góc = 0) in ra sau cùng. */
.button.th-cta-btn {
	display: inline-flex; align-items: center; justify-content: center;
	height: 54px; min-height: 0; line-height: 1; margin: 0 6px;
	padding: 0 26px; font-size: 16px; font-weight: 700;
	text-transform: none; letter-spacing: normal; white-space: nowrap;
	border-radius: 999px !important;
	border: 2px solid transparent !important;
	box-shadow: none !important;
	transition: background .18s var(--ease-out), transform .12s;
}
.button.th-cta-btn span { display: inline-flex; align-items: center; }
.button.th-cta-btn span::before {
	content: ""; display: inline-block; width: 24px; height: 24px; margin-right: 8px;
	background: currentColor; flex: none;
}
.button.th-cta-btn1 span::before {
	-webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13.832 16.568a1 1 0 0 0 1.213-.303l.355-.465A2 2 0 0 1 17 15h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2A18 18 0 0 1 2 4a2 2 0 0 1 2-2h3a2 2 0 0 1 2 2v3a2 2 0 0 1-.8 1.6l-.468.351a1 1 0 0 0-.292 1.233 14 14 0 0 0 6.392 6.384'/%3E%3C/svg%3E") center/contain no-repeat;
	mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13.832 16.568a1 1 0 0 0 1.213-.303l.355-.465A2 2 0 0 1 17 15h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2A18 18 0 0 1 2 4a2 2 0 0 1 2-2h3a2 2 0 0 1 2 2v3a2 2 0 0 1-.8 1.6l-.468.351a1 1 0 0 0-.292 1.233 14 14 0 0 0 6.392 6.384'/%3E%3C/svg%3E") center/contain no-repeat;
}
.button.th-cta-btn2 span::before {
	-webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='16' height='20' x='4' y='2' rx='2'/%3E%3Cline x1='8' x2='16' y1='6' y2='6'/%3E%3Cline x1='16' x2='16' y1='14' y2='18'/%3E%3Cpath d='M16 10h.01'/%3E%3Cpath d='M12 10h.01'/%3E%3Cpath d='M8 10h.01'/%3E%3Cpath d='M12 14h.01'/%3E%3Cpath d='M8 14h.01'/%3E%3Cpath d='M12 18h.01'/%3E%3Cpath d='M8 18h.01'/%3E%3C/svg%3E") center/contain no-repeat;
	mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='16' height='20' x='4' y='2' rx='2'/%3E%3Cline x1='8' x2='16' y1='6' y2='6'/%3E%3Cline x1='16' x2='16' y1='14' y2='18'/%3E%3Cpath d='M16 10h.01'/%3E%3Cpath d='M12 10h.01'/%3E%3Cpath d='M8 10h.01'/%3E%3Cpath d='M12 14h.01'/%3E%3Cpath d='M8 14h.01'/%3E%3Cpath d='M12 18h.01'/%3E%3Cpath d='M8 18h.01'/%3E%3C/svg%3E") center/contain no-repeat;
}
/* !important: Flatsome style link <a> trong nội dung bằng selector ID nên
   thắng class -> mất màu nền/chữ của nút. */
.button.th-cta-btn1 { background: #fff !important; color: var(--th-red) !important; }
.button.th-cta-btn1:hover { background: var(--neutral-50) !important; color: var(--th-red) !important; transform: translateY(-1px); }
/* Nút phụ ở bản cũ không có style cỡ chữ riêng nên giữ 15px của .th-pill. */
.button.th-cta-btn2 { font-size: 15px; background: rgba(255,255,255,.16) !important; color: #fff !important; border-color: rgba(255,255,255,.5) !important; }
.button.th-cta-btn2:hover { background: rgba(255,255,255,.26) !important; color: #fff !important; transform: translateY(-1px); }
.th-cta-chk { margin-top: 22px; display: flex; gap: 22px; justify-content: center; flex-wrap: wrap; color: rgba(255,255,255,.92); font-size: 14px; font-weight: 600; }
/* Màn hình hẹp: 2 nút tự xuống dòng. Nút là phần tử nội dòng nên lề dưới
   không tạo được khe hở -> chuyển sang khối tự canh giữa để có đúng 12px
   như bản cũ, đồng thời bớt lề trên của dòng dấu tích cho tổng vẫn là 22px. */
@media (max-width: 860px) {
	.th-cta-sec .col-inner { display: flex; flex-direction: column; }
	.button.th-cta-btn { align-self: center; max-width: 100%; margin: 0; }
	.button.th-cta-btn1 { margin-bottom: 12px; }
}

/* ---------- 9. PRICE TABLE + FEE LISTS ---------- */
.pm-table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.pm-table th { text-align: right; padding: 11px 12px; color: var(--navy-900); font-weight: 700; font-size: 13px; border-bottom: 1px solid var(--border-subtle); background: var(--neutral-50); }
.pm-table th:first-child, .pm-table td:first-child { text-align: left; padding-left: 20px; }
.pm-table th:last-child, .pm-table td:last-child { padding-right: 20px; }
.pm-table td { text-align: right; padding: 11px 12px; border-bottom: 1px solid var(--border-subtle); color: var(--neutral-700); font-weight: 500; }
.pm-table td:first-child { color: var(--navy-900); font-weight: 600; }
.fee-box { padding: 26px; display: grid; grid-template-columns: 1fr 1px 1fr; gap: 36px; }
.fee-divider { background: var(--border-subtle); }
.fee-row { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--border-subtle); }
.fee-row:last-child { border-bottom: none; }
.fee-row .k { font-size: 14.5px; color: var(--neutral-700); line-height: 1.45; }
.fee-row .v { font-size: 14.5px; color: var(--th-red); font-weight: 700; white-space: nowrap; }

/* ---------- 10. QUICK PRICE CALCULATOR ---------- */
.calc-card { display: grid; grid-template-columns: 1.3fr 1fr; }
.calc-addon { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 13px; border: 1.5px solid var(--border-subtle); border-radius: 10px; cursor: pointer; transition: all .14s; }
.calc-addon.on { border-color: var(--th-red); background: var(--surface-tint-red); }
.calc-box { width: 22px; height: 22px; border-radius: 6px; border: 2px solid var(--border-strong); flex: none; display: flex; align-items: center; justify-content: center; transition: all .14s; }
.calc-addon.on .calc-box { background: var(--th-red); border-color: var(--th-red); color: #fff; }
/* Dau tich chi hien khi o duoc chon; dung opacity de o vuong khong bi xe dich. */
.calc-box > i, .calc-box > svg { opacity: 0; transition: opacity .14s; }
.calc-addon.on .calc-box > i, .calc-addon.on .calc-box > svg { opacity: 1; }
.calc-result { background: var(--navy-900); color: #fff; padding: 26px; display: flex; flex-direction: column; background-image: radial-gradient(rgba(228,188,108,.14) 1px, transparent 1.4px); background-size: 20px 20px; }
.th-input { width: 100%; height: 46px; border: 1.5px solid var(--border-subtle); border-radius: 8px; padding: 0 14px; font-family: inherit; font-size: 15px; color: var(--navy-900); }
.th-input:focus { outline: none; border-color: var(--th-red); box-shadow: 0 0 0 3px rgba(191,6,3,.12); }
.th-select { width: 100%; height: 46px; border: 1.5px solid var(--border-subtle); border-radius: 8px; padding: 0 14px; font-family: inherit; font-size: 15px; color: var(--navy-900); background: #fff; }
.th-label { font-size: 14px; font-weight: 600; color: var(--navy-900); display: block; margin-bottom: 7px; }

/* booking modal */
.th-modal-overlay { position: fixed; inset: 0; background: rgba(1,22,49,.6); z-index: 95; display: flex; align-items: center; justify-content: center; padding: 20px; }
.th-modal { width: min(420px, 94vw); padding: 26px; background: #fff; border-radius: 12px; box-shadow: var(--shadow-lg); }

/* ---------- 11. INSURANCE BANNER ---------- */
.ins-banner { position: relative; overflow: hidden; background: linear-gradient(110deg, var(--red-700), var(--red-500)); border-radius: 20px; padding: 36px 40px; display: flex; align-items: center; gap: 28px; }
.ins-dots { position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.12) 1px, transparent 1.4px); background-size: 20px 20px; pointer-events: none; }
.ins-badge { position: relative; z-index: 1; flex: none; width: 110px; height: 110px; border-radius: 50%; background: rgba(255,255,255,.14); border: 2px solid rgba(255,255,255,.5); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: #fff; font-weight: 800; font-size: 13px; text-align: center; line-height: 1.1; }

/* ---------- 12. WORKFLOW ---------- */
.flow-grid7 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.flow-step7 { padding: 22px; display: flex; gap: 16px; align-items: flex-start; }
.flow-ico { position: relative; flex: none; }
.flow-ico .circle { width: 52px; height: 52px; border-radius: 50%; background: var(--surface-tint-red); color: var(--th-red); display: flex; align-items: center; justify-content: center; }
.flow-ico .num { position: absolute; top: -6px; right: -6px; width: 24px; height: 24px; border-radius: 50%; background: var(--th-red); color: #fff; font-size: 13px; font-weight: 800; display: flex; align-items: center; justify-content: center; }

/* ---------- 13. SOCIAL PROOF ---------- */
.proof-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.rating-row { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.rev-avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--navy-50); color: var(--navy-700); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 15px; }

/* ---------- 14. GALLERY (masonry + lightbox) ---------- */
.masonry { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 200px; gap: 16px; grid-auto-flow: row dense; }
.masonry-item { grid-row: span 1; margin: 0; position: relative; border: none; padding: 0; cursor: pointer; border-radius: 12px; overflow: hidden; background: none; width: 100%; }
.masonry-item.tall { grid-row: span 2; }
.masonry-item .ph { width: 100%; height: 100%; object-fit: cover; background: var(--neutral-50); }
.masonry-cap { position: absolute; left: 0; right: 0; bottom: 0; height: 40%; background: linear-gradient(transparent, rgba(1,22,49,.78)); display: flex; align-items: flex-end; padding: 14px; pointer-events: none; }
.masonry-cap span { color: #fff; font-weight: 600; font-size: 14.5px; text-align: left; line-height: 1.35; }
/* CSS lightbox (.th-lightbox / .th-lb-*) đã chuyển sang assets/gallery.css —
   nạp toàn site để trang dịch vụ dùng chung với trang chủ. */

/* ---------- 15. MEDIA / PRESS ---------- */
.press-row { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.press-logo { padding: 12px 22px; border: 1px solid var(--border-subtle); border-radius: 999px; font-weight: 800; font-size: 16px; color: var(--neutral-400); letter-spacing: -0.01em; transition: color .2s, border-color .2s; cursor: default; }
.press-logo:hover { color: var(--navy-900); border-color: var(--th-red); }

/* Dải logo báo chí chạy 1 hàng (marquee liền mạch) — nhân đôi logo trong HTML,
   dịch -50% = đúng 1 bộ → nối vòng không giật. Hover dừng; tôn trọng reduce-motion. */
.press-marquee { overflow: hidden; width: 100%; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%); }
.press-track { display: flex; flex-wrap: nowrap; width: max-content; animation: press-scroll 38s linear infinite; }
.press-marquee:hover .press-track { animation-play-state: paused; }
.press-track .press-logo { flex: none; margin: 0 8px; padding: 0 26px; height: 76px; display: flex; align-items: center; justify-content: center; background: #fff; border: 1px solid var(--border-subtle); border-radius: 14px; box-shadow: 0 4px 14px rgba(1,22,49,.05); }
.press-track .press-logo img { max-height: 40px; max-width: 200px; width: auto; height: auto; object-fit: contain; display: block; }
@keyframes press-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .press-track { animation: none; } }
.article-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.article-card { overflow: hidden; text-decoration: none; display: block; }

/* Báo chí — hàng "pill" tên báo + lưới thẻ bài báo (thay dải logo chạy) */
.th-press-pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.th-press-pill { padding: 9px 20px; border: 1px solid var(--border-subtle); border-radius: 999px; font-weight: 700; font-size: 14.5px; color: var(--neutral-400); background: #fff; transition: color .2s, border-color .2s, box-shadow .2s; }
.th-press-pill:hover { color: var(--navy-900); border-color: var(--th-red); box-shadow: 0 4px 14px rgba(1,22,49,.06); }
.th-press-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 30px; }
.th-press-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--border-subtle); border-radius: 14px; overflow: hidden; text-decoration: none; transition: transform .25s ease, box-shadow .25s ease; }
.th-press-card:hover { transform: translateY(-4px); box-shadow: 0 14px 32px rgba(1,22,49,.12); }
.th-press-thumb { position: relative; aspect-ratio: 16 / 10; background: var(--neutral-50); display: flex; align-items: center; justify-content: center; color: #aab2c2; overflow: hidden; }
.th-press-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.th-press-thumb .ph-ic { display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; }
.th-press-body { padding: 18px 18px 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.th-press-src { font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--th-red); }
.th-press-title { font-size: 16px; font-weight: 700; line-height: 1.4; color: var(--navy-900); margin: 0; }
.th-press-more { margin-top: auto; padding-top: 6px; display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 700; color: var(--th-red); }
@media (max-width: 820px) { .th-press-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .th-press-grid { grid-template-columns: 1fr; } }

/* Dải báo chí TỰ CHẠY (marquee) — hiện đủ mọi bài, chạy ngang liên tục.
   JS (hero-slider.js) bọc .th-fb-track + nhân đôi thẻ; rê chuột thì dừng.
   Chưa có JS: fallback kéo tay (overflow-x:auto). Full-width edge-to-edge. */
.th-press-strip { display: flex; gap: 20px; overflow-x: auto; padding: 6px 0 10px; -webkit-overflow-scrolling: touch; }
.th-press-strip.is-marquee { overflow: hidden; gap: 0; }
.th-press-strip .th-fb-track { gap: 20px; align-items: stretch; }
.th-press-strip .th-press-card { flex: 0 0 340px; width: 340px; }
.th-press-strip:hover .th-fb-track { animation-play-state: paused; }
@media (max-width: 560px) { .th-press-strip .th-press-card { flex-basis: 280px; width: 280px; } }
@media (prefers-reduced-motion: reduce) { .th-press-strip .th-fb-track { animation: none; } .th-press-strip.is-marquee { overflow-x: auto; } }

/* ---------- 16. COVERAGE (map + directory + tabs) ---------- */
.cov-wrap { display: grid; grid-template-columns: 1.3fr 1fr; gap: 22px; align-items: stretch; }
.cov-map { position: relative; overflow: hidden; border-radius: 16px; min-height: 520px; background: var(--navy-900); box-shadow: var(--shadow-md); }
.cov-map .ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cov-map-tint { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(1,22,49,.55) 0%, rgba(1,22,49,.12) 32%, rgba(1,22,49,.62) 100%); pointer-events: none; }
.cov-map-head { position: absolute; top: 22px; left: 24px; right: 24px; z-index: 3; }
.cov-pin { position: absolute; transform: translate(-50%, -100%); z-index: 4; }
.cov-pin-dot { width: 30px; height: 30px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--th-red); display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 10px rgba(0,0,0,.35); }
.cov-pin-dot i, .cov-pin-dot svg { transform: rotate(45deg); }
.cov-pin.main .cov-pin-dot { width: 40px; height: 40px; box-shadow: 0 0 0 8px rgba(191,6,3,.22), 0 4px 12px rgba(0,0,0,.4); animation: covpulse 2.2s infinite; }
@keyframes covpulse { 0% { box-shadow: 0 0 0 0 rgba(191,6,3,.4), 0 4px 12px rgba(0,0,0,.4);} 70% { box-shadow: 0 0 0 16px rgba(191,6,3,0), 0 4px 12px rgba(0,0,0,.4);} 100% { box-shadow: 0 0 0 0 rgba(191,6,3,0), 0 4px 12px rgba(0,0,0,.4);} }
.cov-office-card { position: absolute; bottom: 20px; left: 20px; z-index: 5; width: min(280px, 70%); background: #fff; border-radius: 12px; padding: 14px 16px; box-shadow: var(--shadow-lg); }
.cov-dir { display: flex; flex-direction: column; border: 1px solid var(--border-subtle); border-radius: 16px; background: #fff; overflow: hidden; box-shadow: var(--shadow-sm); }
.cov-dir-head { display: flex; flex-direction: column; align-items: stretch; gap: 14px; padding: 20px 22px; border-bottom: 1px solid var(--border-subtle); }
.cov-count { flex: none; min-width: 44px; height: 44px; padding: 0 12px; border-radius: 999px; background: var(--surface-tint-red); color: var(--th-red); font-weight: 800; font-size: 18px; display: inline-flex; align-items: center; justify-content: center; }
.cov-svc-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.cov-svc-tab { margin: 0; display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-height: 44px; padding: 9px 8px; border-radius: 999px; border: 1.5px solid var(--border-subtle); background: #fff; color: var(--th-red); font-family: inherit; font-weight: 700; font-size: 12.5px; line-height: 1.1; text-transform: none; letter-spacing: 0; cursor: pointer; transition: all .14s; white-space: nowrap; }
.cov-svc-tab.on { background: var(--th-red); color: #fff; border-color: var(--th-red); }
.cov-svc-tab i, .cov-svc-tab svg { width: 15px; height: 15px; flex: none; }
/* Mobile: thu gọn pill chọn dịch vụ cho khỏi tràn chữ (3 cột hẹp) */
@media (max-width: 560px) {
  .cov-svc-tabs { gap: 5px; }
  .cov-svc-tab { gap: 4px; padding: 8px 4px; font-size: 11.5px; }
  .cov-svc-tab i, .cov-svc-tab svg { width: 13px; height: 13px; }
}
.cov-list { padding: 10px; overflow-y: auto; max-height: 470px; display: grid; grid-template-columns: 1fr; gap: 6px; align-content: start; }
.cov-list::-webkit-scrollbar { width: 8px; }
.cov-list::-webkit-scrollbar-thumb { background: var(--neutral-200); border-radius: 999px; }
.cov-item { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-radius: 10px; text-decoration: none; color: var(--navy-900); border: 1px solid transparent; transition: background .14s, border-color .14s, color .14s; }
.cov-item:hover, .cov-item.on { background: var(--surface-tint-red); border-color: var(--red-100); color: var(--th-red); }
.cov-item-pin { width: 30px; height: 30px; flex: none; border-radius: 8px; background: var(--surface-tint-red); display: flex; align-items: center; justify-content: center; }
.cov-item.on .cov-item-pin, .cov-item:hover .cov-item-pin { background: #fff; }
.cov-item-body { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.cov-item-name { font-size: 13.5px; font-weight: 700; line-height: 1.3; }
.cov-item-zone { font-size: 11.5px; color: var(--neutral-500); }
.cov-item.on .cov-item-zone, .cov-item:hover .cov-item-zone { color: var(--red-400); }

/* ---------- 16b. COVERAGE dựng bằng UX Builder ----------
   Lưới .cov-wrap cũ là một khối HTML cứng nên không sửa được trong builder.
   Nay hai nửa là hai cột Flatsome: bản đồ rộng 1.3 phần, danh mục quận rộng
   1 phần, cách nhau 22px — đúng tỉ lệ lưới cũ. Đặt luật lên .col-inner vì
   Flatsome chỉ cho gắn class vào .col. Giữ nguyên khối luật .cov-* ở trên để
   trang nào chưa đổi vẫn chạy y hệt. */
/* Bản cũ là <section class="th-section"> nên có đệm trên/dưới đúng var(--sec-pad);
   [section] của Flatsome đặt padding="0px" nên phải trả lại phần đệm đó ở đây. */
body.th-home .th-cov2-sec > .section-content { padding: var(--sec-pad) 0; }
/* Viết "section.th-cov2-sec" để thắng luật .row.row-small{max-width:1065px}. */
section.th-cov2-sec .row { max-width: calc(var(--maxw) - 48px); width: calc(100% - 48px); }
section.th-cov2-sec .row > .col { padding: 0; }
.th-cov2-row { margin-top: 34px; margin-bottom: 0; gap: 22px; align-items: stretch; }
/* Flatsome gắn sẵn một ô dọn dòng ở cuối hàng; hàng có khe sẽ tính nó thành
   một cột thật và ăn mất một khe -> tắt đi. */
.th-cov2-row::after { display: none; }
section.th-cov2-sec .row.th-cov2-row > .col { flex: 1 1 0%; max-width: none; padding: 0; }
section.th-cov2-sec .row.th-cov2-row > .th-cov2-map { flex-grow: 1.3; }
.th-cov2-map > .col-inner {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  min-height: 520px;
  height: 100%;
  background: var(--navy-900);
  box-shadow: var(--shadow-md);
  padding: 0 !important;
}
/* Tấm thẻ trắng do chính element [th_kv_ds] in ra (.cov-dir), cột chỉ bỏ đệm. */
.th-cov2-dir > .col-inner { display: flex; flex-direction: column; height: 100%; padding: 0 !important; text-align: left; }
.th-cov2-dir .cov-dir { flex: 1; min-height: 0; }
/* Máy tính bảng trở xuống: bản đồ nằm trên, danh mục nằm dưới. */
@media (max-width: 860px) {
  section.th-cov2-sec .row.th-cov2-row > .col,
  section.th-cov2-sec .row.th-cov2-row > .th-cov2-map { flex: 0 0 100%; }
  .th-cov2-map > .col-inner { min-height: 320px; }
}
@media (max-width: 560px) {
  section.th-cov2-sec .row { max-width: none; width: calc(100% - 32px); }
}

/* ---------- 17. NEWS GRID ---------- */
.news-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 18px; }
.news-card { overflow: hidden; text-decoration: none; display: flex; flex-direction: column; transition: transform .15s, box-shadow .15s; }
.news-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.news-card.feature { grid-row: span 2; }
.news-thumb { position: relative; }
.news-thumb .ph { width: 100%; height: 100%; object-fit: cover; background: var(--neutral-50); }
.news-card.feature .news-thumb { height: 240px; }
.news-card:not(.feature) .news-thumb { height: 130px; }
.news-cat { position: absolute; top: 12px; left: 12px; background: var(--th-red); color: #fff; font-size: 11.5px; font-weight: 700; padding: 4px 10px; border-radius: 999px; }
.news-body { padding: 16px 18px; flex: 1; display: flex; flex-direction: column; }

/* ---------- 18. FAQ ---------- */
.faq-item { padding: 0; overflow: hidden; border: 1px solid var(--border-subtle); border-radius: 12px; transition: border-color .2s; background: #fff; }
.faq-item.open { border-color: var(--th-red); }
.faq-q { width: 100%; display: flex; align-items: center; gap: 14px; padding: 18px 20px; background: none; border: none; cursor: pointer; text-align: left; font-family: inherit; text-transform: none; letter-spacing: normal; }
.faq-q span.q { flex: 1; font-size: 16px; font-weight: 600; color: var(--navy-900); text-transform: none; letter-spacing: normal; }
.faq-toggle { width: 30px; height: 30px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; background: var(--neutral-50); color: var(--th-red); transition: background .2s; }
.faq-item.open .faq-toggle { background: var(--th-red); color: #fff; }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .3s var(--ease-out); }
.faq-item.open .faq-a { max-height: 460px; }
.faq-a p { padding: 0 20px 18px; margin: 0; font-size: 14.5px; line-height: 1.65; color: var(--neutral-700); }

/* ---------- 18b. FAQ dựng bằng element [th_faq] ----------
   Khu hỏi đáp nay là element UX Builder chứ không còn là một mảng HTML cứng,
   nên phần khung do [section]/[row]/[col] của Flatsome dựng. Mấy dòng dưới
   dựng lại đúng kích thước cũ: bề ngang chữ 820px, cách tiêu đề 30px.        */
body.th-home .th-faq-sec > .section-content { padding: var(--sec-pad) 0; }
body.th-home section.th-faq-sec .row { max-width: calc(820px - 48px); width: calc(100% - 48px); }
body.th-home section.th-faq-sec .row > .col { padding: 0; max-width: none; }
body.th-home .th-faq-row { margin-top: 30px; }
body.th-home .th-faq-col > .col-inner { padding: 0 !important; text-align: left; }
@media (max-width: 560px) {
	body.th-home section.th-faq-sec .row { max-width: none; width: calc(100% - 32px); }
}

/* Element dùng chung cho cả trang dịch vụ nên nó mang sẵn class .th-card —
   ở trang chủ thẻ hỏi đáp vốn không có bóng đổ, tắt đi cho giống bản cũ. */
body.th-home .faq-item { box-shadow: none; }

/* Trang dịch vụ dùng mũi tên chevron, trang chủ dùng dấu cộng/trừ. Element chỉ
   in ra một hình duy nhất (chevron) nên ở đây giấu nó đi rồi vẽ dấu +/− bằng
   CSS. Vẽ bằng CSS thay vì đổi icon bằng JS: nét vẽ dài đúng 14px, dày 2px —
   khớp từng pixel với icon "plus"/"minus" cũ. */
body.th-home .faq-toggle { position: relative; }
body.th-home .faq-toggle > svg { display: none; }
body.th-home .faq-toggle::before,
body.th-home .faq-toggle::after {
	content: ""; position: absolute; left: 50%; top: 50%;
	background: currentColor; border-radius: 1px;
	transform: translate(-50%, -50%); transition: opacity .2s;
}
body.th-home .faq-toggle::before { width: 14px; height: 2px; }
body.th-home .faq-toggle::after { width: 2px; height: 14px; }
/* Đang mở thì bỏ nét dọc -> còn dấu trừ. */
body.th-home .faq-item.open .faq-toggle::after { opacity: 0; }

/* ---------- 19. FINAL CTA (red band) ---------- */
.final-cta { background: var(--th-red); background-image: radial-gradient(rgba(255,255,255,.12) 1px, transparent 1.4px); background-size: 22px 22px; }

/* ---------- 20. FOOTER ---------- */
.th-footer { background: var(--navy-900); color: #C9CDD2; padding-top: 56px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 32px; padding-bottom: 40px; }
.th-footer h4 { color: #fff; font-size: 15px; font-weight: 700; margin: 0 0 14px; }
.th-footer a { color: #C9CDD2; text-decoration: none; font-size: 14px; }
.th-footer a:hover { color: #fff; }

/* ---------- 21. FLOATING ACTION BUTTONS ---------- */
.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: var(--shadow-lg); color: #fff; }
.th-fab .call { background: var(--th-red); animation: thpulse 2.2s infinite; }
.th-fab .zalo { background: var(--blue-800); }
@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); } }

/* ---------- 22. UTILITIES ---------- */
.only-mobile { display: none; }

/* ---------- 23. RESPONSIVE ---------- */
@media (max-width: 980px) { .svc-grid { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 960px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .article-row { grid-template-columns: 1fr 1fr; }
  .proof-grid { grid-template-columns: 1fr 1fr; }
  .masonry { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) { .flow-grid7 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 860px) {
  :root { --sec-pad: 26px; }
  .cols-3, .cols-4 { grid-template-columns: repeat(2, 1fr); }
  .only-desktop { display: none !important; }
  .only-mobile { display: block; }
  .th-h2 { font-size: 27px; }
  .th-hero-grid { grid-template-columns: 1fr; gap: 28px; }
  .hero-trust { grid-template-columns: 1fr 1fr; }
  .hero-trust-cell + .hero-trust-cell { border-left: none; }
  .intro-grid { grid-template-columns: 1fr !important; gap: 28px !important; }
  .fee-box { grid-template-columns: 1fr; gap: 28px; }
  .fee-divider { display: none; }
  .calc-card { grid-template-columns: 1fr; }
  .ins-banner { flex-direction: column; text-align: center; }
  .cov-wrap { grid-template-columns: 1fr; }
  .cov-map { min-height: 320px; }
  .cov-list { max-height: 380px; }
  .news-grid { grid-template-columns: 1fr 1fr; }
  .news-card.feature { grid-row: span 1; grid-column: span 2; }
  .news-card.feature .news-thumb { height: 200px; }
}
@media (max-width: 560px) {
  .cols-2, .cols-3, .cols-4, .svc-grid, .proof-grid, .article-row, .footer-grid, .masonry, .flow-grid7, .news-grid { grid-template-columns: 1fr !important; }
  .masonry-item.tall { grid-row: span 1; }
  .news-card.feature { grid-column: span 1; }
  /* Hàng chỉ số (4.9 / 5.0 / 1500+): bỏ kiểu wrap-canh-giữa (thẻ hẹp lửng lơ),
     đổi sang 3 cột đều nhau, nội dung xếp dọc cho gọn & cân đối trên điện thoại. */
  .rating-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .rating-row .th-card { flex-direction: column !important; align-items: center !important; text-align: center; gap: 8px !important; padding: 16px 6px !important; }
  .rating-row .th-card > div { display: flex; flex-direction: column; align-items: center; }
  .rating-row .icon-chip { width: 40px !important; height: 40px !important; }
  /* Nút pill chữ dài (vd "Xem chi tiết dịch vụ Chuyển nhà trọn gói"): bỏ nowrap +
     height cố định để chữ tự xuống dòng trong khung, không tràn/cắt mép màn hình. */
  .th-pill { white-space: normal; height: auto !important; min-height: 46px; max-width: 100%; padding: 11px 22px; line-height: 1.3; text-align: center; }
  .th-pill i, .th-pill svg { flex: none; }
  /* 3 chip hero ("Đa dạng tải trọng" / "An toàn tài sản" / "Hỗ trợ 24/7") nằm
     trên CÙNG 1 hàng ở điện thoại: ép nowrap + thu gọn padding/font/icon cho vừa. */
  .hero-chips { flex-wrap: nowrap; gap: 5px; max-width: 100%; }
  .hero-chips .hero-chip { padding: 7px 8px; font-size: 10.5px; gap: 4px; }
  .hero-chips .hero-chip i, .hero-chips .hero-chip svg { width: 13px; height: 13px; }
}
/* ---------- TIÊU ĐỀ LỚN ĐẦU TRANG (H1) TRÊN ĐIỆN THOẠI ----------
   Bản gốc đặt cỡ chữ 40px kèm giãn dòng 1.12 và co chữ -0.02em ngay trong thẻ
   (style nội tuyến) nên trên màn hình hẹp câu tiêu đề vỡ thành 5 dòng, dòng
   chót chỉ còn 2 chữ, các dấu tiếng Việt gần chạm nhau — nhìn rất rối.
   Thu cỡ chữ theo 3 mốc màn hình, nới giãn dòng lên 1.24 cho dấu tiếng Việt
   thở, và bỏ bớt co chữ. Phải ghi !important vì style nội tuyến luôn thắng
   file CSS. Máy tính bảng trở lên giữ nguyên 40px như cũ. */
@media (max-width: 860px) {
  body.th-home .th-hero h1 {
    font-size: 32px !important;
    line-height: 1.24 !important;
    letter-spacing: -0.01em !important;
    margin-bottom: 15px !important;
  }
}
@media (max-width: 560px) {
  body.th-home .th-hero h1 { font-size: 28px !important; }
}
@media (max-width: 360px) {
  body.th-home .th-hero h1 { font-size: 25px !important; }
}

@media (prefers-reduced-motion: reduce) { .th-home * { animation: none !important; scroll-behavior: auto !important; } }

/* ============================================================
   FEEDBACK — 2 hàng ẢNH: review Google + tin nhắn Zalo/Facebook
   Dùng chung wrapper .th-section/.th-container/.th-center có sẵn.
   ============================================================ */
.th-fb-wrap { display: grid; gap: 26px; }
.th-fb-row { display: grid; gap: 12px; }
.th-fb-rowlabel {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 700; color: var(--brand, #0a2a66);
  letter-spacing: .2px;
}
.th-fb-rowlabel::before {
  content: ""; width: 22px; height: 3px; border-radius: 999px;
  background: var(--accent, #e11d2a);
}

/* Filmstrip TỰ CHẠY (marquee) — mọi ảnh cùng chiều cao, chạy ngang liên tục,
   rê chuột thì dừng. JS (hero-slider.js) bọc .th-fb-track + nhân đôi item để chạy
   liền mạch. Chưa có JS thì fallback: kéo tay (overflow-x:auto). */
/* Chặn thanh cuộn ngang do 100vw (100vw = kể cả bề rộng scrollbar) */
#danh-gia { overflow-x: clip; }
.th-fb-grid {
  display: flex;
  gap: 16px;
  overflow-x: auto;               /* fallback: kéo tay khi chưa bật marquee */
  padding: 4px 2px 6px;
  -webkit-overflow-scrolling: touch;
  /* TRÀN FULL-WIDTH: thoát khỏi .th-container để chạy hết ngang màn hình */
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
.th-fb-grid.is-marquee { overflow: hidden; gap: 0; }
.th-fb-track {
  display: flex;
  gap: 16px;
  width: max-content;
  will-change: transform;
  animation: th-fb-marquee var(--th-fb-dur, 40s) linear infinite;
}
.th-fb-row.th-fb-rev .th-fb-track { animation-name: th-fb-marquee-rev; }
.th-fb-grid.is-marquee:hover .th-fb-track { animation-play-state: paused; }
@keyframes th-fb-marquee     { from { transform: translateX(0); }      to { transform: translateX(-50%); } }
@keyframes th-fb-marquee-rev { from { transform: translateX(-50%); }   to { transform: translateX(0); } }

.th-fb-item {
  flex: 0 0 auto;
  display: block;
  height: 360px;                 /* tất cả cùng chiều cao */
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 6px 20px rgba(20,30,60,.08);
  border: 1px solid rgba(20,30,60,.06);
  text-decoration: none;
  transition: transform .25s ease, box-shadow .25s ease;
}
.th-fb-item:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(20,30,60,.16); }
.th-fb-item img { height: 100% !important; width: auto !important; display: block; }
/* Ô placeholder khi chưa có ảnh — anh gửi ảnh, em thay vào sau */
.th-fb-item.is-empty {
  width: 270px;
  display: flex; align-items: center; justify-content: center;
  background: var(--neutral-50, #eef1f6);
  color: #9aa4b8; font-size: 13px; font-weight: 600; letter-spacing: .3px;
  border-style: dashed; border-color: rgba(20,30,60,.18);
}

@media (max-width: 560px) { .th-fb-item { height: 300px; } .th-fb-track { gap: 10px; } }
/* Tôn trọng người tắt hiệu ứng chuyển động: dừng chạy, cho kéo tay */
@media (prefers-reduced-motion: reduce) {
  .th-fb-track { animation: none; }
  .th-fb-grid.is-marquee { overflow-x: auto; }
}

/* ============================================================
   17b. KHỐI "TIN TỨC & CẨM NANG" — DỰNG BẰNG ELEMENT GỐC UX BUILDER
   Tái tạo y hệt lưới cũ .news-grid (1 bài lớn bên trái + 4 bài nhỏ
   bên phải), nhưng mỗi bài giờ là 1 ẢNH + 1 Ô CHỮ thật của trình dựng
   nên sửa được chữ, đổi được ảnh, đổi được đường dẫn ngay trên giao diện.

   KHÔNG dùng lưới CSS (display:grid) đặt trên hàng .row: trong màn hình
   UX Builder mỗi element bị bọc thêm một lớp div, ô lưới sẽ rơi sai chỗ.
   Thay vào đó dùng đúng hệ cột 12 phần của Flatsome rồi tự đặt lại đệm
   cột để ra khe hở 18px giống bản cũ:
     hàng rộng 1152 = 1200 (--maxw) - 48 (đệm 2 bên .th-container)
     cột trái span 6 = 576, chừa đệm phải 18  -> bài lớn rộng 558
     cột phải span 6 = 576, đệm 0             -> chứa hàng con 4 bài nhỏ
     hàng con: 2 cột span 6 = 288, cột lẻ đệm phải 9 / cột chẵn đệm trái 9
                                              -> mỗi bài nhỏ rộng 279
   ============================================================ */

/* Khoảng hở trên 4px: khối tin cũ nằm trong cùng section với bản đồ và
   cách phần trên đúng 40px. Tách ra thành section riêng thì section bản đồ
   đã tự có 36px đệm đáy, nên chỉ cần bù thêm 4px. */
.th-news2-sec > .section-content { padding: 4px 0 var(--sec-pad) !important; }

.th-news2-sec .row {
	max-width: calc(var(--maxw) - 48px);
	width: calc(100% - 48px);
	margin-left: auto;
	margin-right: auto;
}
.th-news2-sec .row > .col { padding: 0; }

/* ----- Dòng tiêu đề: nhãn nhỏ + tên khối bên trái, nút "Xem tất cả" bên phải,
   cả hai canh theo MÉP DƯỚI như bản cũ (align-items:flex-end). ----- */
.th-news2-head { align-items: flex-end; margin-bottom: 22px; }
.th-news2-head-r { text-align: right; }
.th-news2-h3 h3 {
	font-size: 24px; font-weight: 800; color: var(--navy-900);
	margin: 0; line-height: 1.6; letter-spacing: -0.02em;
}
/* Nút "Xem tất cả": giữ nguyên kiểu viền đỏ .th-pill.outline, cao 42px như cũ.
   line-height:0 ở thẻ bọc để dòng chứa nút cao đúng 42px, không dôi thêm
   khoảng trống của dòng chữ rỗng phía sau. */
.th-news2-all { line-height: 0; }
.th-news2-all p { margin: 0; }
.th-news2-all a { height: 42px; line-height: 1.6; }
/* Mũi tên vẽ bằng CSS (mặt nạ SVG) thay cho thẻ <i data-lucide>: sửa chữ trong
   trình dựng cũng không làm mất mũi tên. Là phần tử con của inline-flex nên
   tự ăn khoảng cách gap 8px của .th-pill, không cần đặt lề. */
.th-news2-all a::after {
	content: ""; display: inline-block; width: 24px; height: 24px; flex: none;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E") center/contain no-repeat;
	mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* ----- Hàng lưới ----- */
.th-news2-sec .row.th-news2-row > .col.th-news2-feature { padding-right: 18px; }
/* Hàng con nằm trong cột phải nên KHÔNG áp trần bề ngang của hàng ngoài.
   Flatsome cho hàng lồng nhau lề âm -15px hai bên (để bù đệm cột mặc định);
   ở đây đệm cột do mình tự đặt nên phải xoá lề âm đó, nếu không hàng con
   rộng hơn cột chứa nó 30px.
   Phải viết thêm "body.th-home" vì luật gốc của Flatsome
   (.row .row:not(.row-collapse)) có độ ưu tiên ngang bằng mà lại nạp sau. */
body.th-home .th-news2-sec .row.th-news2-sub {
	max-width: none; width: auto;
	margin-left: 0; margin-right: 0;
	/* Đệm đáy 18px tạo khe hở dọc giữa 2 hàng bài nhỏ; lề âm -18px triệt tiêu
	   phần thừa của hàng cuối. */
	margin-bottom: -18px;
}
.th-news2-sec .row.th-news2-sub > .col { padding-bottom: 18px; }
.th-news2-sec .row.th-news2-sub > .col:nth-child(odd) { padding-right: 9px; }
.th-news2-sec .row.th-news2-sub > .col:nth-child(even) { padding-left: 9px; }

/* ----- Thẻ bài viết ----- */
.th-news2-col { display: flex; }
.th-news2-col > .col-inner {
	flex: 1;
	position: relative;
	overflow: hidden;
	display: grid;
	background: var(--white);
	border: 1px solid var(--border-subtle);
	border-radius: 12px;
	box-shadow: var(--shadow-sm);
	text-align: left;
	transition: transform .15s, box-shadow .15s;
	/* !important: Flatsome in ra luật đệm theo id cột nên thắng class thường. */
	padding: 0 !important;
}
.th-news2-col > .col-inner:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
/* Bài lớn: ảnh chiếm hết phần cao còn dư (1fr), phần chữ cao theo nội dung.
   Bài nhỏ: ảnh cao cố định 130px, phần chữ chiếm phần còn lại. */
.th-news2-feature > .col-inner { grid-template-rows: 1fr auto; }
.th-news2-small > .col-inner { grid-template-rows: auto 1fr; }

/* Ảnh: [ux_image] tự in thẻ <style> nhắm theo id ảnh (#image_1234 img) nên
   phải ghi !important mới đè được. */
.th-news2-thumb { margin: 0 !important; position: relative; overflow: hidden; min-width: 0; }
.th-news2-thumb > a { display: block; height: 100%; }
.th-news2-thumb .img-inner { margin: 0 !important; padding: 0 !important; height: 100%; }
.th-news2-thumb img {
	width: 100% !important; height: 100% !important;
	object-fit: cover; display: block; background: var(--neutral-50);
}
.th-news2-small .th-news2-thumb { height: 130px; }
.th-news2-feature .th-news2-thumb { min-height: 240px; }

/* Phần chữ */
.th-news2-body { padding: 16px 18px; display: flex; flex-direction: column; min-width: 0; }
/* Nhãn phân loại nổi trên ảnh — nằm trong ô chữ để sửa được, nhưng thả về
   đúng góc trên trái của thẻ bằng định vị tuyệt đối. */
.th-news2-body .news-cat { top: 12px; left: 12px; }
/* Chỉ trong UX Builder: cho nhãn chạy inline để không đè lên ngày tháng */
.uxb-wrapper .th-news2-body .news-cat {
	position: static;
	align-self: flex-start;
	margin-bottom: 8px;
}
.th-news2-date {
	font-size: 12.5px; color: var(--neutral-400);
	display: flex; align-items: center; gap: 6px; margin-bottom: 8px;
}
.th-news2-date::before {
	content: ""; width: 13px; height: 13px; flex: none;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='18' x='3' y='4' rx='2' ry='2'/%3E%3Cline x1='16' x2='16' y1='2' y2='6'/%3E%3Cline x1='8' x2='8' y1='2' y2='6'/%3E%3Cline x1='3' x2='21' y1='10' y2='10'/%3E%3C/svg%3E") center/contain no-repeat;
	mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='18' x='3' y='4' rx='2' ry='2'/%3E%3Cline x1='16' x2='16' y1='2' y2='6'/%3E%3Cline x1='8' x2='8' y1='2' y2='6'/%3E%3Cline x1='3' x2='21' y1='10' y2='10'/%3E%3C/svg%3E") center/contain no-repeat;
}
.th-news2-body h4 { font-weight: 700; margin: 0; line-height: 1.4; }
.th-news2-body h4 a { color: var(--navy-900) !important; text-decoration: none !important; }
.th-news2-feature .th-news2-body h4 { font-size: 20px; }
.th-news2-small .th-news2-body h4 { font-size: 15.5px; }
.th-news2-body p { font-size: 14px; color: var(--neutral-500); margin: 10px 0 0; line-height: 1.6; }
/* display:flex trên thẻ bọc để chiều cao dòng "Đọc bài viết" bằng ĐÚNG chiều
   cao chữ (20.8px), không dôi thêm vài pixel do canh theo đường chân chữ. */
.th-news2-more { display: flex; }
.th-news2-more a {
	display: inline-flex; align-items: center; gap: 5px;
	font-size: 13px; line-height: 1.6; font-weight: 700;
	color: var(--th-red) !important; text-decoration: none !important;
}
.th-news2-feature .th-news2-more { margin-top: 16px; }
.th-news2-small .th-news2-more { margin-top: 12px; }
.th-news2-more a::after {
	content: ""; width: 14px; height: 14px; flex: none;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E") center/contain no-repeat;
	mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E") center/contain no-repeat;
}
/* Lớp phủ vô hình: bấm chỗ nào trong thẻ cũng mở được bài viết. */
.th-news2-more a::before { content: ""; position: absolute; inset: 0; }
/* CHỈ trong màn hình UX Builder: tắt lớp phủ đó đi, nếu không nó trùm cả thẻ
   và cướp cú bấm của ô ảnh, khiến không chọn được ảnh để thay.
   Ngoài web không có class .uxb-wrapper nên luật này vô hại. */
.uxb-wrapper .th-news2-more a::before { content: none; }
/* Nhắc lại cho chắc: TUYỆT ĐỐI không đặt lớp bọc của trình dựng về
   position:static — trình dựng nhét trong mỗi lớp bọc một tấm phủ trong suốt
   để bắt cú bấm; bỏ position:relative là tấm phủ bung ra trùm cả thẻ. */
.th-news2-col > .col-inner > .uxb-wrapper { position: relative; }

/* ----- Máy tính bảng: 2 cột, bài lớn chiếm trọn bề ngang (giống bản cũ) ----- */
@media (max-width: 860px) {
	.th-news2-sec > .section-content { padding-top: 14px !important; }
	.th-news2-sec .row.th-news2-row > .col {
		flex-basis: 100% !important; max-width: 100% !important;
		padding-right: 0 !important;
	}
	.th-news2-sec .row.th-news2-row > .col.th-news2-feature { padding-bottom: 18px !important; }
	.th-news2-feature > .col-inner { grid-template-rows: auto auto; }
	.th-news2-feature .th-news2-thumb { height: 200px; min-height: 0; }
}

/* ----- Điện thoại: xếp dọc 1 cột ----- */
@media (max-width: 560px) {
	.th-news2-sec .row.th-news2-sub > .col {
		flex-basis: 100% !important; max-width: 100% !important;
		padding-left: 0 !important; padding-right: 0 !important;
	}
	.th-news2-head { display: block; }
	.th-news2-head-r { text-align: left; margin-top: 14px; }
}