/* =======================================================================
   Taxi Lâm Đồng - Dữ liệu mẫu — CSS riêng cho nội dung các trang mặc định
   (Trang chủ, Bảng giá, Dành cho tài xế, Lái xe hộ, Khu vực Lâm Hà).
   Scoped dưới .tld-scope, tự đủ (không phụ thuộc CSS của plugin khác).
   ======================================================================= */

/* ---- breadcrumb (điều hướng phân cấp: Trang chủ / Khu vực / Huyện / Xã) ---- */
.tld-scope .tld-breadcrumb{ font-size:12px; color:var(--muted); margin-bottom:16px; }
.tld-scope .tld-breadcrumb a{ color:var(--muted); text-decoration:none; }
.tld-scope .tld-breadcrumb a:hover{ color:var(--cyan-ink); text-decoration:underline; }
.tld-scope .tld-breadcrumb .sep{ margin:0 4px; color:var(--line); }
.tld-scope .tld-breadcrumb [aria-current="page"]{ color:var(--ink); font-weight:600; }

/* ---- hero chung ---- */
.tld-scope .hero{ position:relative; padding:48px 0 30px; background:linear-gradient(180deg,#F2FDFD 0%, #FFFFFF 100%); overflow:hidden; text-align:left; }
.tld-scope .hero .wrap.hero-grid{ display:grid; grid-template-columns:1fr 1.05fr; gap:34px; align-items:center; text-align:left; }
.tld-scope .eyebrow{ display:inline-flex; align-items:center; gap:8px; background:#fff; border:1px solid var(--line); padding:7px 14px; border-radius:999px; font-size:12.5px; font-weight:600; color:var(--cyan-ink); margin-bottom:18px; box-shadow:var(--shadow-sm); }
.tld-scope .eyebrow .dot{ width:7px; height:7px; border-radius:50%; background:var(--cyan); animation:tldPulseDot 1.6s infinite; }
@keyframes tldPulseDot{ 0%,100%{opacity:1} 50%{opacity:.3} }
.tld-scope .hero h1{ font-size:clamp(26px,4vw,44px); font-weight:800; line-height:1.12; margin-bottom:14px; }
.tld-scope .hero h1 .hl{ color:var(--cyan-deep); }
.tld-scope .hero p.lead{ color:var(--muted); font-size:15.5px; max-width:520px; margin-bottom:22px; }
.tld-scope .hero-actions{ display:flex; gap:12px; flex-wrap:wrap; margin-bottom:22px; }
.tld-scope .hero-stats{ display:flex; gap:26px; flex-wrap:wrap; }
.tld-scope .hstat .num{ font-size:20px; font-weight:700; color:var(--cyan-ink); }
.tld-scope .hstat .lbl{ font-size:11px; color:var(--muted); }
@media(max-width:960px){ .tld-scope .hero .wrap.hero-grid{ grid-template-columns:1fr; } .tld-scope .hero{ padding:32px 0 30px; text-align:center; } .tld-scope .hero-actions, .tld-scope .hero-stats{ justify-content:center; } }

/* ---- hero — biến thể "immersive" (03/08/2026) ----
   Bật qua Customizer > Biến thể hiển thị > "Kiểu khối đầu trang" = Ảnh nền
   toàn màn hình. hero_html() (Sample-data) in class "hero hero-immersive"
   thay vì "hero" khi biến thể này được chọn — cấu trúc .wrap.hero-grid bên
   trong vẫn giữ nguyên nên không cần đổi PHP nhiều, chỉ đổi cách trình bày.
   Chưa cấu hình ảnh riêng thì dùng gradient thương hiệu làm nền tạm, không
   bao giờ để trống. */
.tld-scope .hero.hero-immersive{ position:relative; min-height:520px; display:flex; align-items:center; padding:70px 0; background-color:var(--cyan-deep); background-image:linear-gradient(150deg,var(--cyan),var(--cyan-deep) 75%); background-size:cover; background-position:center; text-align:center; overflow:hidden; }
.tld-scope .hero.hero-immersive::before{ content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(9,40,42,0.32) 0%, rgba(9,40,42,0.74) 100%); }
.tld-scope .hero-immersive .wrap.hero-grid{ position:relative; z-index:1; display:block; text-align:center; }
.tld-scope .hero-immersive .eyebrow{ background:rgba(255,255,255,0.14); border-color:rgba(255,255,255,0.3); color:#fff; margin:0 auto 18px; }
.tld-scope .hero-immersive .eyebrow .dot{ background:var(--yellow); }
.tld-scope .hero-immersive h1{ color:#fff; }
.tld-scope .hero-immersive h1 .hl{ color:var(--yellow); }
.tld-scope .hero-immersive p.lead{ color:#E9F7F7; margin-left:auto; margin-right:auto; }
.tld-scope .hero-immersive .hero-actions{ justify-content:center; }
.tld-scope .hero-immersive .hero-stats{ display:none; }
@media(max-width:960px){ .tld-scope .hero.hero-immersive{ min-height:auto; padding:52px 0; } }

/* ---- dải số liệu nổi (.stat-pills) — thay cho .hero-stats ở biến thể
   immersive (nền ảnh cần độ tương phản cao hơn số liệu chữ thường). ---- */
.tld-scope .stat-pills{ position:relative; z-index:1; display:flex; gap:12px; flex-wrap:wrap; justify-content:center; margin-top:26px; }
.tld-scope .stat-pill{ background:rgba(255,255,255,0.14); border:1px solid rgba(255,255,255,0.28); backdrop-filter:blur(3px); border-radius:14px; padding:10px 18px; color:#fff; font-size:13px; }
.tld-scope .stat-pill strong{ display:block; font-size:18px; font-weight:800; color:var(--yellow); }

/* ---- hoạ tiết trang trí tuỳ chọn (--tld-motif, Customizer > Biến thể
   hiển thị, 03/08/2026) — mặc định rỗng nên content:'' không chiếm chỗ,
   không đổi gì trên site chưa cấu hình. ---- */
.tld-scope .hero.hero-immersive::after,
.tld-scope .cta-band::after{ content:var(--tld-motif,''); position:absolute; line-height:1; opacity:0.16; pointer-events:none; }
.tld-scope .hero.hero-immersive::after{ right:4%; bottom:6%; font-size:96px; }
.tld-scope .cta-band::after{ right:3%; top:50%; transform:translateY(-50%); font-size:64px; }

/* ---- minh hoạ xe SVG (trang chủ) ---- */
.tld-scope .car-stage{ position:relative; }
.tld-scope .hero-panel{ position:relative; border-radius:32px; padding:34px 24px 26px; overflow:hidden; background:linear-gradient(150deg,#20D6DD,#0F9BA1 75%); box-shadow:0 24px 50px rgba(15,120,125,0.28); min-height:340px; display:flex; align-items:center; justify-content:center; }
.tld-scope .hero-panel::before{ content:''; position:absolute; inset:0; background-image:radial-gradient(rgba(255,255,255,0.16) 1.6px, transparent 1.6px); background-size:22px 22px; opacity:0.7; }
.tld-scope .hero-panel .skyline{ position:absolute; left:0; right:0; bottom:0; height:38%; opacity:0.14; }
.tld-scope .hero-panel .glow{ position:absolute; width:220px; height:220px; border-radius:50%; background:rgba(255,255,255,0.18); }
.tld-scope .hero-panel .glow-a{ top:-60px; left:-50px; }
.tld-scope .hero-panel .glow-b{ bottom:-80px; right:-50px; background:rgba(255,202,0,0.22); }
.tld-scope .car-svg{ position:relative; width:100%; height:auto; display:block; filter:drop-shadow(0 18px 22px rgba(6,40,42,0.35)); }
.tld-scope .float-chip{ position:absolute; background:rgba(255,255,255,0.94); border:1px solid rgba(255,255,255,0.6); border-radius:14px; padding:9px 13px; box-shadow:0 10px 24px rgba(9,60,63,0.18); font-size:12px; font-weight:700; display:flex; align-items:center; gap:8px; z-index:2; color:var(--ink); }
.tld-scope .float-chip .ico{ width:24px; height:24px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:12px; }
.tld-scope .chip-a{ top:7%; left:5%; } .tld-scope .chip-a .ico{ background:#EAFBFC; color:var(--cyan-deep); }
.tld-scope .chip-b{ bottom:8%; right:5%; } .tld-scope .chip-b .ico{ background:#FFF6DA; color:var(--yellow-deep); }
.tld-scope .chip-c{ top:44%; left:-3%; } .tld-scope .chip-c .ico{ background:#FCE7F3; color:#BE185D; }
@media(max-width:960px){ .tld-scope .float-chip{ font-size:11px; padding:7px 10px; } .tld-scope .chip-c{ display:none; } }

/* ---- ảnh thật trong hero (khi đã tải xong qua media_sideload_image) ----
   Khi có ảnh thật, ẩn minh hoạ SVG xe/skyline và đổi .hero-panel thành
   khung ảnh — vẫn giữ nguyên 2 quầng sáng + 3 float-chip đè lên trên để
   không mất thông tin (4,8★, xe xăng/điện, khoảng cách tài xế). */
.tld-scope .hero-panel.has-photo .car-svg,
.tld-scope .hero-panel.has-photo .skyline{ display:none; }
.tld-scope .hero-panel.has-photo{ padding:0; min-height:380px; }
.tld-scope .hero-panel .hero-photo-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.tld-scope .hero-panel.has-photo::before{ background-image:linear-gradient(180deg, rgba(9,60,63,0.05), rgba(9,60,63,0.45)); background-size:auto; }
.tld-scope .tld-photo-credit{ position:absolute; right:10px; bottom:10px; z-index:2; font-size:10px; font-weight:600; color:#fff; background:rgba(9,40,42,0.55); padding:4px 9px; border-radius:20px; text-decoration:none; backdrop-filter:blur(2px); }
.tld-scope .tld-photo-credit:hover{ background:rgba(9,40,42,0.8); }

/* ---- banner ảnh thật đầu trang khu vực/dịch vụ (Ảnh đại diện của trang) ----
   .tld-page-banner-wrap căn cùng chiều rộng/lề với .wrap (1280px, đệm 22px)
   để thẳng hàng với phần nội dung bên dưới; .tld-page-banner bên trong mới
   là khung ảnh bo góc thật (position:relative để định vị dòng ghi công). */
.tld-page-banner-wrap{ max-width:1280px; margin:0 auto 26px; padding:0 22px; box-sizing:border-box; }
.tld-page-banner{ position:relative; display:block; border-radius:20px; overflow:hidden; box-shadow:0 16px 34px rgba(9,60,63,0.16); }
.tld-page-banner img{ display:block; width:100%; height:260px; object-fit:cover; }
.tld-page-banner .tld-photo-credit{ position:absolute; right:10px; bottom:10px; }
@media(max-width:720px){ .tld-page-banner img{ height:180px; } }

/* ---- 4 cách đặt xe ---- */
.tld-scope .path-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.tld-scope .path-card{ border-radius:20px; padding:22px; box-shadow:var(--shadow); }
.tld-scope .path-card.pick{ background:linear-gradient(155deg,#EAFBFC,#FFFFFF 70%); border:1.5px solid #C8EEF0; }
.tld-scope .path-card.fast{ background:linear-gradient(155deg,#FFF6DA,#FFFFFF 70%); border:1.5px solid #FBE7A8; }
.tld-scope .path-icon{ width:44px; height:44px; border-radius:13px; display:flex; align-items:center; justify-content:center; font-size:20px; margin-bottom:12px; }
.tld-scope .path-card.pick .path-icon{ background:var(--cyan); }
.tld-scope .path-card.fast .path-icon{ background:var(--yellow); }
.tld-scope .path-card h3{ font-size:16.5px; font-weight:700; margin-bottom:7px; }
.tld-scope .path-card p.desc{ color:var(--muted); font-size:13px; margin-bottom:16px; min-height:52px; }
.tld-scope .path-actions{ display:flex; gap:8px; flex-wrap:wrap; }
.tld-scope .path-actions .btn{ padding:9px 14px; font-size:12.5px; }
@media(max-width:960px){ .tld-scope .path-grid{ grid-template-columns:1fr 1fr; } }
@media(max-width:560px){ .tld-scope .path-grid{ grid-template-columns:1fr; } .tld-scope .path-card p.desc{ min-height:0; } }

/* ---- banner chiến dịch ----
   Gradient bản trước đi từ cyan-ink tối tới cyan sáng (#2DCCD3) — chữ trắng/
   vàng/xanh nhạt bên trong rớt tương phản nặng ở vùng cyan sáng (có chỗ chỉ
   ~1.3-2:1, cần tối thiểu 4.5:1). Đổi thành 2 sắc tối (cyan-ink) để chữ luôn
   đủ tương phản dù nằm ở vị trí nào trong khối, vẫn giữ tông cyan thương hiệu. */
.tld-scope .campaign{ position:relative; border-radius:28px; overflow:hidden; background:linear-gradient(150deg,#0B4D50,#093B3E); padding:40px 34px; color:#fff; }
.tld-scope .campaign::before{ content:''; position:absolute; inset:0; background-image:radial-gradient(rgba(255,255,255,0.14) 1.6px, transparent 1.6px); background-size:22px 22px; opacity:.6; }
.tld-scope .campaign::after{ content:''; position:absolute; width:220px; height:220px; border-radius:50%; background:rgba(255,202,0,0.18); top:-70px; right:-50px; }
.tld-scope .campaign-inner{ position:relative; display:flex; justify-content:space-between; align-items:center; gap:24px; flex-wrap:wrap; }
.tld-scope .campaign-tag{ display:inline-flex; align-items:center; gap:6px; background:var(--yellow); color:var(--ink); font-size:11.5px; font-weight:800; padding:5px 13px; border-radius:20px; margin-bottom:14px; }
.tld-scope .campaign h2{ font-size:clamp(22px,3.2vw,32px); font-weight:800; margin-bottom:10px; }
.tld-scope .campaign h2 .hl{ color:var(--yellow); }
.tld-scope .campaign p{ color:#D6F6F7; font-size:14px; max-width:460px; margin-bottom:18px; }
@media(max-width:760px){ .tld-scope .campaign-inner{ text-align:center; justify-content:center; } .tld-scope .campaign p{ margin-left:auto; margin-right:auto; } }

/* ---- khối "lái xe hộ" nổi bật ---- */
.tld-scope .service-promo{ background:linear-gradient(150deg,#0E2126,#173A3F); border-radius:24px; padding:36px 32px; display:grid; grid-template-columns:auto 1fr auto; gap:24px; align-items:center; color:#fff; }
.tld-scope .service-promo .ico-big{ width:56px; height:56px; border-radius:16px; background:rgba(255,202,0,0.15); display:flex; align-items:center; justify-content:center; font-size:26px; margin:0 auto; }
.tld-scope .service-promo h3{ font-size:19px; font-weight:700; margin-bottom:8px; }
.tld-scope .service-promo p{ font-size:13.5px; color:#B7CBCD; }
.tld-scope .service-promo .actions{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }
@media(max-width:760px){ .tld-scope .service-promo{ grid-template-columns:1fr; text-align:center; } }

/* ---- dải loại xe ---- */
.tld-scope .vehicle-strip{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.tld-scope .vs-label{ font-size:12.5px; font-weight:700; color:var(--muted); margin-right:2px; }
.tld-scope .vs-pill{ display:inline-flex; align-items:center; gap:6px; background:#fff; border:1px solid var(--line); padding:7px 14px; border-radius:20px; font-size:12.5px; font-weight:600; color:var(--ink); }

/* ---- bảng giá cước ---- */
/* Bảng giá dùng thẻ <table> thật (không phải div giả bảng) để Google có thể
   nhận diện và trích dẫn thành bảng giá trong kết quả tìm kiếm (rich snippet/
   "top 0"). Giao diện vẫn giữ đúng 100% như thiết kế gốc qua CSS bên dưới. */
.tld-scope table.rate-table{ width:100%; background:#fff; border:1px solid var(--line); border-radius:18px; overflow:hidden; box-shadow:var(--shadow-sm); margin-bottom:26px; border-collapse:collapse; border-spacing:0; }
.tld-scope table.rate-table th,
.tld-scope table.rate-table td{ padding:15px 20px; text-align:left; border-bottom:1px solid var(--line); font-size:13px; font-weight:400; }
.tld-scope table.rate-table tbody tr:last-child th,
.tld-scope table.rate-table tbody tr:last-child td{ border-bottom:none; }
.tld-scope table.rate-table thead tr,
.tld-scope table.rate-table tr.rt-head{ background:var(--bg-soft); }
.tld-scope table.rate-table thead th{ font-weight:700; font-size:11.5px; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; }
.tld-scope table.rate-table td.rt-type{ font-weight:700; }
.tld-scope table.rate-table td.rt-type .fuel-badge{ margin-right:9px; }
.tld-scope .fuel-badge{ display:inline-block; font-size:10.5px; font-weight:700; padding:3px 8px; border-radius:20px; }
.tld-scope .fuel-badge.xang{ background:#FFE9CE; color:#B4570A; }
.tld-scope .fuel-badge.dien{ background:var(--bg-soft); color:var(--cyan-ink); }
@media(max-width:700px){
	.tld-scope table.rate-table th,
	.tld-scope table.rate-table td{ padding:12px 14px; font-size:12px; }
	.tld-scope table.rate-table th:nth-child(4),
	.tld-scope table.rate-table td:nth-child(4){ display:none; }
}

/* ---- công cụ tính giá ---- */
.tld-scope .calc-card{ background:#fff; border:1px solid var(--line); border-radius:22px; padding:28px; box-shadow:var(--shadow); }
.tld-scope .calc-grid{ display:grid; grid-template-columns:1fr 1fr; gap:26px; }
.tld-scope .toggle-group{ margin-bottom:18px; }
/* .field-lbl dùng cho cả <label> (kmSlider, có "for") lẫn <span> (3 nhóm nút
   bấm Chiều đi/Loại xe/Nhiên liệu — nhóm nút dùng role="group"+aria-labelledby
   thay vì <label> vì <label> chỉ nên gắn với 1 control duy nhất, không phải
   cả 1 nhóm nút) — selector không ràng buộc theo tên thẻ để cả 2 dùng chung 1 kiểu. */
.tld-scope .toggle-group .field-lbl{ display:block; font-size:11.5px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; margin-bottom:9px; }
.tld-scope .toggle-row{ display:flex; gap:9px; flex-wrap:wrap; }
.tld-scope .toggle-btn{ flex:1; min-width:96px; padding:11px 13px; border-radius:12px; border:1.5px solid var(--line); background:#fff; font-size:13px; font-weight:600; color:var(--muted); text-align:center; }
.tld-scope .toggle-btn.on{ border-color:var(--cyan); background:var(--bg-soft); color:var(--cyan-ink); }
.tld-scope .km-input-row{ display:flex; align-items:center; gap:12px; }
.tld-scope .km-input-row input[type="range"]{ flex:1; accent-color:var(--cyan); }
.tld-scope .km-value{ font-weight:700; font-size:17px; min-width:60px; text-align:right; }
.tld-scope .calc-result{ background:var(--bg-soft); border-radius:18px; padding:22px; display:flex; flex-direction:column; }
.tld-scope .calc-result h3{ font-size:13px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; margin-bottom:14px; }
.tld-scope .breakdown-row{ display:flex; justify-content:space-between; font-size:13px; margin-bottom:9px; color:var(--muted); }
.tld-scope .breakdown-row span:last-child{ color:var(--ink); font-weight:600; }
.tld-scope .total-row{ display:flex; justify-content:space-between; align-items:center; padding-top:14px; margin-top:6px; border-top:1px solid var(--line); }
.tld-scope .total-row .lbl{ font-size:13.5px; font-weight:700; }
.tld-scope .total-row .amt{ font-size:24px; font-weight:800; color:var(--cyan-ink); }
.tld-scope .save-note{ margin-top:12px; font-size:12px; color:var(--cyan-ink); background:#fff; padding:9px 11px; border-radius:10px; display:none; }
.tld-scope .disclaimer{ font-size:11.5px; color:var(--muted); margin-top:10px; }
@media(max-width:860px){ .tld-scope .calc-grid{ grid-template-columns:1fr; } }

/* ---- lý do chọn / an tâm ---- */
.tld-scope .trust-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.tld-scope .tcard{ background:#fff; border:1px solid var(--line); border-radius:18px; padding:22px 18px; text-align:center; }
.tld-scope .tcard .ico{ width:44px; height:44px; border-radius:13px; background:var(--bg-soft); display:flex; align-items:center; justify-content:center; font-size:20px; margin:0 auto 12px; }
.tld-scope .tcard h3{ font-size:14px; font-weight:700; margin-bottom:6px; }
.tld-scope .tcard p{ font-size:12.5px; color:var(--muted); }
@media(max-width:860px){ .tld-scope .trust-grid{ grid-template-columns:1fr 1fr; } }

/* ---- lưới lợi ích (dùng chung cho nhiều trang: bcard) ----
 * Vì sao dùng biến CSS --tld-cols thay vì để nơi gọi tự in thẳng
 * "style="grid-template-columns:repeat(N,1fr)"" như trước: style nội tuyến
 * (inline) luôn có độ ưu tiên (specificity) cao hơn MỌI rule trong file CSS
 * này, kể cả 2 @media bên dưới — nên khối "Khu vực phục vụ" ở trang chủ
 * (4 cột ép cứng qua inline style) từng bị vỡ chữ trên mobile vì @media
 * không bao giờ thắng nổi. Đặt số cột qua biến --tld-cols (inline chỉ set
 * biến, không set thẳng grid-template-columns) thì @media vẫn ghi đè được
 * bình thường vì lúc đó grid-template-columns lại nằm trong file CSS này.
 * Lỗi Quang phát hiện qua ảnh chụp thực tế 2026-08-02.
 */
.tld-scope .benefit-grid{ display:grid; grid-template-columns:repeat(var(--tld-cols,3),1fr); gap:16px; }
.tld-scope .bcard{ background:#fff; border:1px solid var(--line); border-radius:16px; padding:20px; box-shadow:var(--shadow-sm); }
.tld-scope .bcard .ico{ width:40px; height:40px; border-radius:12px; background:var(--bg-soft); display:flex; align-items:center; justify-content:center; font-size:18px; margin-bottom:10px; }
.tld-scope .bcard h3{ font-size:14.5px; font-weight:700; margin-bottom:6px; }
.tld-scope .bcard p{ font-size:12.5px; color:var(--muted); }
@media(max-width:860px){ .tld-scope .benefit-grid{ grid-template-columns:1fr 1fr; } }
@media(max-width:560px){ .tld-scope .benefit-grid{ grid-template-columns:1fr; } }

/* ---- huy hiệu nhỏ ---- */
.tld-scope .mbadge{ font-size:10px; font-weight:700; padding:3px 8px; border-radius:20px; white-space:nowrap; }
.tld-scope .mbadge.gold{ background:var(--yellow); color:var(--ink); }

/* ---- khối CTA tối (fallback) ---- */
.tld-scope .fallback-cta{ background:linear-gradient(150deg,#0E2126,#173A3F); border-radius:24px; padding:32px; display:flex; align-items:center; justify-content:space-between; gap:22px; flex-wrap:wrap; color:#fff; }
.tld-scope .fallback-cta h3{ font-size:17px; font-weight:700; margin-bottom:6px; }
.tld-scope .fallback-cta p{ font-size:13px; color:#B7CBCD; }
.tld-scope .fallback-cta .actions{ display:flex; gap:10px; flex-wrap:wrap; }

/* ---- đánh giá khách hàng / tài xế ---- */
.tld-scope .review-summary{ display:flex; align-items:center; justify-content:center; gap:26px; flex-wrap:wrap; margin-bottom:32px; }
.tld-scope .review-score{ text-align:center; }
.tld-scope .review-score .num{ font-size:40px; font-weight:800; line-height:1; }
.tld-scope .review-score .stars{ color:var(--yellow-deep); font-size:15px; margin:6px 0 4px; }
.tld-scope .review-score .count{ font-size:12px; color:var(--muted); }
.tld-scope .review-divider{ width:1px; height:46px; background:var(--line); }
.tld-scope .review-bars{ display:flex; flex-direction:column; gap:5px; min-width:180px; }
.tld-scope .review-bar-row{ display:flex; align-items:center; gap:8px; font-size:11px; color:var(--muted); }
.tld-scope .review-bar-track{ flex:1; height:6px; border-radius:4px; background:var(--line); overflow:hidden; }
.tld-scope .review-bar-fill{ height:100%; background:var(--yellow); border-radius:4px; display:block; }
.tld-scope .review-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.tld-scope .review-card{ background:#fff; border:1px solid var(--line); border-radius:16px; padding:20px; box-shadow:var(--shadow-sm); display:flex; flex-direction:column; }
.tld-scope .review-card .stars{ color:var(--yellow-deep); font-size:13px; margin-bottom:10px; }
.tld-scope .review-card p.quote{ font-size:13.5px; color:var(--ink); margin-bottom:16px; flex-grow:1; }
.tld-scope .review-who{ display:flex; align-items:center; gap:10px; padding-top:12px; border-top:1px solid var(--line); }
.tld-scope .review-avatar{ width:36px; height:36px; border-radius:50%; background:linear-gradient(135deg,#8CE9EC,var(--cyan)); color:var(--ink); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:13px; flex-shrink:0; }
.tld-scope .review-who .name{ font-size:13px; font-weight:700; }
.tld-scope .review-who .role{ font-size:11.5px; color:var(--muted); }
.tld-scope .role-tag{ display:inline-block; font-size:9.5px; font-weight:800; padding:2px 8px; border-radius:10px; margin-left:6px; vertical-align:middle; }
.tld-scope .role-tag.driver{ background:var(--bg-soft); color:var(--cyan-ink); }
@media(max-width:860px){ .tld-scope .review-grid{ grid-template-columns:1fr; } }

/* ---- tin tức ---- */
.tld-scope .news-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.tld-scope .news-card{ background:#fff; border:1px solid var(--line); border-radius:16px; overflow:hidden; box-shadow:var(--shadow-sm); transition:.15s; display:block; color:inherit; text-decoration:none; }
.tld-scope .news-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow); }
.tld-scope .news-thumb{ height:130px; background:linear-gradient(135deg,var(--bg-soft),#fff); display:flex; align-items:center; justify-content:center; font-size:34px; }
/* Bài viết đã có Ảnh đại diện thật (do TLD_Sample_Images tự gán) thì hiện
   ảnh thay vì icon minh hoạ — trước đây khối "Tin tức" trang chủ LUÔN hiện
   icon dù bài viết đã có ảnh thật, Quang phát hiện qua ảnh chụp thực tế
   2026-08-02. */
.tld-scope .news-thumb.has-photo{ padding:0; background:none; }
.tld-scope .news-thumb.has-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.tld-scope .news-body{ padding:18px; }
.tld-scope .news-meta{ display:flex; align-items:center; gap:8px; font-size:11.5px; color:var(--muted); margin-bottom:10px; }
.tld-scope .news-badge{ background:var(--bg-soft); color:var(--cyan-ink); font-weight:700; padding:2px 9px; border-radius:20px; }
.tld-scope .news-card h3{ font-size:14.5px; font-weight:700; margin-bottom:8px; line-height:1.4; }
.tld-scope .news-card p{ font-size:12.5px; color:var(--muted); }
.tld-scope .news-note{ text-align:center; font-size:12px; color:var(--muted); margin-top:18px; }
@media(max-width:860px){ .tld-scope .news-grid{ grid-template-columns:1fr; } }

/* ---- CTA đăng ký tài xế (trang chủ) ---- */
.tld-scope .driver-illustration{ width:100%; max-width:220px; margin:0 auto 16px; display:block; }
.tld-scope .driver-cta{ background:linear-gradient(135deg,#0E2126,#173A3F); color:#fff; border-radius:26px; padding:44px 36px; display:grid; grid-template-columns:1.2fr 0.8fr; gap:32px; align-items:center; }
.tld-scope .driver-cta .eyebrow2{ font-size:12px; font-weight:700; color:var(--cyan); text-transform:uppercase; letter-spacing:.08em; margin-bottom:10px; }
.tld-scope .driver-cta h2{ font-size:clamp(21px,2.6vw,28px); font-weight:700; margin-bottom:12px; }
.tld-scope .driver-cta p{ color:#A9C4C6; font-size:14px; max-width:480px; margin-bottom:20px; }
.tld-scope .mini-price-row{ display:flex; gap:12px; flex-wrap:wrap; }
.tld-scope .mini-price{ background:rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.14); border-radius:14px; padding:14px 16px; flex:1; min-width:160px; }
.tld-scope .mini-price .lbl{ font-size:11.5px; color:#A9C4C6; margin-bottom:5px; }
.tld-scope .mini-price .amt{ font-size:18px; font-weight:700; color:var(--yellow); }
.tld-scope .dcta-actions{ display:flex; flex-direction:column; gap:10px; }
@media(max-width:900px){ .tld-scope .driver-cta{ grid-template-columns:1fr; padding:30px 22px; text-align:center; } .tld-scope .dcta-actions{ align-items:center; } }

/* ---- CTA cuối trang ---- */
.tld-scope .cta-band{ position:relative; overflow:hidden; background:linear-gradient(135deg,var(--cyan),var(--cyan-deep)); border-radius:26px; padding:44px 32px; text-align:center; }
.tld-scope .cta-band h2{ font-size:clamp(22px,3vw,30px); font-weight:800; margin-bottom:10px; color:#fff; }
.tld-scope .cta-band p{ color:#E3FBFC; font-size:14px; margin-bottom:22px; }
.tld-scope .cta-band .actions{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.tld-scope .cta-band .btn-outline{ background:#fff; }

/* ---- Trang "Dành cho tài xế": khối hệ thống nhiều site ---- */
.tld-scope .network-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:14px; }
.tld-scope .net-site{ position:relative; border:1px solid var(--line); border-radius:16px; padding:16px 16px 18px; background:#fff; }
.tld-scope .net-site.is-current{ border-color:var(--cyan); background:linear-gradient(160deg,#EAFBFC,#fff); box-shadow:0 8px 20px rgba(45,204,211,0.18); }
.tld-scope .net-domain{ font-weight:700; font-size:14px; color:var(--ink); }
.tld-scope .net-name{ font-size:12.5px; color:var(--muted); margin-top:2px; }
.tld-scope .net-badge{ display:inline-block; margin-top:10px; font-size:10.5px; font-weight:700; color:var(--cyan-ink); background:#CFF6F7; padding:3px 9px; border-radius:20px; }
.tld-scope .net-status{ display:inline-block; margin-top:10px; font-size:10.5px; font-weight:600; color:var(--muted); background:var(--bg-soft); padding:3px 9px; border-radius:20px; }
.tld-scope .net-link{ display:block; text-decoration:none; color:inherit; }
.tld-scope .net-site:has(.net-link) .net-domain{ color:var(--cyan-ink); }
.tld-scope .net-desc{ font-size:12px; color:var(--muted); margin-top:8px; line-height:1.4; }

/* ---- Trang "Dành cho tài xế": tóm tắt dạng checklist ---- */
.tld-scope .check-list-wrap{ max-width:720px; margin:0 auto; }
.tld-scope .check-list-wrap h3{ font-size:18px; margin-bottom:14px; text-align:center; }
.tld-scope .check-list{ list-style:none; padding:0; margin:0; display:grid; gap:10px; }
.tld-scope .check-list li{ position:relative; padding-left:30px; font-size:14.5px; color:var(--ink); line-height:1.5; }
.tld-scope .check-list li::before{ content:'✓'; position:absolute; left:0; top:0; width:20px; height:20px; border-radius:50%; background:var(--cyan); color:#fff; font-size:12px; font-weight:700; display:flex; align-items:center; justify-content:center; }

/* ---- Trang "Dành cho tài xế": 4 điểm nổi bật nền tối ---- */
.tld-scope .dark-features-wrap{ background:linear-gradient(135deg,#0E2126,#173A3F); padding:44px 0; }
.tld-scope .dark-features{ max-width:1280px; margin:0 auto; padding:0 22px; display:grid; grid-template-columns:repeat(4,1fr); gap:18px; box-sizing:border-box; }
.tld-scope .dfeat{ text-align:center; color:#fff; }
.tld-scope .dnum{ font-size:26px; font-weight:800; color:var(--yellow); margin-bottom:6px; }
.tld-scope .dlbl{ font-size:12.5px; color:#C7DEDF; line-height:1.4; }
@media(max-width:900px){ .tld-scope .dark-features{ grid-template-columns:repeat(2,1fr); } }

/* ---- Huy hiệu khan hiếm (pulse) trên CTA cuối trang "Dành cho tài xế" ----
   Dùng đúng sự thật đã nêu ở hero-stats ("3 vị trí nổi bật/lượt tìm kiếm")
   — KHÔNG bịa số liệu khan hiếm giả để tạo áp lực mua hàng. */
.tld-scope .urgency-badge{ display:inline-block; margin:0 auto 16px; padding:7px 16px; border-radius:20px; background:rgba(255,255,255,0.16); color:#fff; font-size:12.5px; font-weight:700; animation:tld-urgency-pulse 2.2s ease-in-out infinite; }
@keyframes tld-urgency-pulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(255,255,255,0.35); } 50%{ box-shadow:0 0 0 8px rgba(255,255,255,0); } }