/* NewTransport – giao diện cho các Mẫu bài
   Nạp file này ở CẢ trang ngoài (header) VÀ trong TinyMCE (content_css)
   để soạn thảo nhìn giống hệt lúc hiển thị. */
:root{
  --nt-primary:#0b5ed7; --nt-accent:#f59f00; --nt-ink:#1f2937; --nt-muted:#6b7280;
  --nt-line:#e5e7eb; --nt-soft:#f3f7fd; --nt-radius:12px;
}
.nt-block{margin:32px 0;color:var(--nt-ink)}
.nt-block h2{margin:0 0 12px;line-height:1.3}
.nt-lead{font-size:1.08em;color:var(--nt-muted)}
.nt-eyebrow{margin:0 0 4px;font-size:.85em;font-weight:700;letter-spacing:.08em;color:var(--nt-accent)}
.nt-center{text-align:center}
.nt-note{font-size:.92em;color:var(--nt-muted);font-style:italic}

/* Lưới thẻ */
.nt-grid{display:grid;gap:16px;margin:16px 0}
.nt-grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:900px){.nt-grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.nt-grid-3{grid-template-columns:1fr}}
.nt-card{background:#fff;border:1px solid var(--nt-line);border-radius:var(--nt-radius);padding:18px}
.nt-card h3,.nt-card h4{margin:6px 0 8px;font-size:1.05em;color:var(--nt-primary)}
.nt-card p{margin:0}
.nt-card-icon{font-size:28px;line-height:1}
.nt-card-no{font-size:28px;font-weight:800;color:var(--nt-accent);line-height:1}
.nt-why .nt-card{border-top:4px solid var(--nt-primary)}

/* Bảng */
.nt-table{width:100%;border-collapse:collapse;margin:12px 0}
.nt-table th,.nt-table td{border:1px solid var(--nt-line);padding:10px;text-align:left}
.nt-table th{background:var(--nt-primary);color:#fff}
.nt-table tr:nth-child(even) td{background:var(--nt-soft)}
@media (max-width:600px){.nt-table{display:block;overflow-x:auto}}

/* Quy trình */
.nt-timeline{list-style:none;counter-reset:nt;padding:0;margin:16px 0}
.nt-timeline li{counter-increment:nt;position:relative;padding:0 0 22px 58px}
.nt-timeline li::before{content:counter(nt);position:absolute;left:0;top:0;width:40px;height:40px;border-radius:50%;
  background:var(--nt-primary);color:#fff;font-weight:700;display:flex;align-items:center;justify-content:center}
.nt-timeline li::after{content:"";position:absolute;left:19px;top:42px;bottom:2px;width:2px;background:var(--nt-line)}
.nt-timeline li:last-child::after{display:none}
.nt-timeline h3{margin:6px 0 4px;font-size:1.05em}
.nt-timeline p{margin:0;color:var(--nt-muted)}

/* Đánh giá */
.nt-rating{text-align:center;background:var(--nt-soft);border-radius:var(--nt-radius);padding:18px;margin:12px 0}
.nt-rating p{margin:2px 0}
.nt-rating-score{font-size:40px;font-weight:800;color:var(--nt-primary)}
.nt-rating-score span{font-size:18px;color:var(--nt-muted)}
.nt-stars{color:#fbbc04;letter-spacing:2px;font-size:18px}
.nt-review{margin:0;background:#fff;border:1px solid var(--nt-line);border-radius:var(--nt-radius);padding:18px}
.nt-review p{margin:0 0 10px}
.nt-review .nt-review-by{display:flex;flex-direction:column;font-size:.9em;margin:0}
.nt-review .nt-review-by span{color:var(--nt-muted)}

/* CTA + nút */
.nt-cta{background:linear-gradient(135deg,var(--nt-primary),#084298);color:#fff;border-radius:var(--nt-radius);padding:22px;margin:24px 0;text-align:center}
.nt-cta p{margin:4px 0}
.nt-cta a{color:#fff;font-weight:700}
.nt-cta-title{font-size:1.25em;font-weight:800}
.nt-btn{display:inline-block;padding:10px 20px;border-radius:999px;font-weight:700;text-decoration:none}
.nt-btn-outline{border:2px solid var(--nt-primary);color:var(--nt-primary)}

/* FAQ */
.nt-faq-item{border-bottom:1px solid var(--nt-line);padding:12px 0}
.nt-faq-item h3{margin:0 0 6px;font-size:1.05em;color:var(--nt-primary)}
.nt-faq-item p{margin:0}

/* Form thu thập khách hàng */
.nt-leadbox{background:var(--nt-soft);border-radius:var(--nt-radius);padding:22px}
.nt-form{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.nt-form .nt-full{grid-column:1/-1}
.nt-form .nt-qty{display:flex;gap:8px}
.nt-form .nt-qty input{flex:1 1 auto;min-width:0}
.nt-form .nt-qty select{flex:0 0 7.5em;width:7.5em}
.nt-form label{display:block;font-weight:600;font-size:.92em;margin-bottom:4px}
.nt-form input,.nt-form select,.nt-form textarea{width:100%;box-sizing:border-box;padding:10px 12px;border:1px solid #cbd5e1;border-radius:8px;font:inherit;background:#fff}
.nt-form button{background:var(--nt-accent);color:#1f2937;border:0;border-radius:999px;padding:12px 26px;font-weight:800;cursor:pointer}
.nt-form .nt-hp{position:absolute;left:-9999px}
.nt-form-msg{padding:10px 12px;border-radius:8px;margin-bottom:12px}
.nt-form-msg.ok{background:#d1fae5}.nt-form-msg.err{background:#fee2e2}
@media (max-width:600px){.nt-form{grid-template-columns:1fr}}

/* Trong trình soạn thảo: đánh dấu chỗ cần thay */
.mce-content-body .nt-block{outline:1px dashed #cbd5e1;outline-offset:6px}

/* ===== Slider đánh giá (chạy bằng CSS, không cần script; mau-bai-slider.js chỉ thêm nút/tự chạy) ===== */
.nt-slider{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  padding:4px 2px 14px;margin:16px 0 4px;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.nt-slide{flex:0 0 calc((100% - 32px)/3);scroll-snap-align:start;box-sizing:border-box}
@media (max-width:900px){.nt-slide{flex-basis:calc((100% - 16px)/2)}}
@media (max-width:600px){.nt-slide{flex-basis:85%}}
.nt-slider-img .nt-slide{flex-basis:240px}
.nt-slider-hint{font-size:.85em;color:var(--nt-muted);text-align:right;margin:0}
.nt-slider-wrap + .nt-slider-hint{display:none}
.nt-slider-wrap .nt-slider{padding-left:24px;padding-right:24px;scroll-padding-left:24px}
.nt-slider-wrap.nt-fit .nt-slider-btn{display:none}

/* Nhãn nguồn */
.nt-src{display:inline-block;font-size:.75em;font-weight:700;padding:3px 10px;border-radius:999px;margin:0 0 6px;color:#fff;background:var(--nt-muted)}
.nt-src-google{background:#1a73e8}.nt-src-facebook{background:#1877f2}
.nt-src-zalo{background:#0068ff}.nt-src-email{background:#6d28d9}.nt-src-truc-tiep{background:#f59f00;color:#1f2937}

/* Ảnh feedback */
.nt-shot{margin:0;background:#fff;border:1px solid var(--nt-line);border-radius:var(--nt-radius);overflow:hidden}
.nt-shot img{display:block;width:100%;height:420px;object-fit:cover;object-position:top}
.nt-shot figcaption{padding:10px 12px;font-size:.9em}

/* Nút điều khiển (do mau-bai-slider.js thêm) */
.nt-slider-wrap{position:relative}
.nt-slider-btn{position:absolute;top:45%;transform:translateY(-50%);width:40px;height:40px;border-radius:50%;border:0;
  background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.18);font-size:20px;cursor:pointer;z-index:2;color:var(--nt-primary)}
.nt-slider-btn.prev{left:-8px}.nt-slider-btn.next{right:-8px}
@media (max-width:600px){.nt-slider-btn{display:none}.nt-slider-wrap .nt-slider{padding-left:2px;padding-right:2px;scroll-padding-left:0}}
.mce-content-body .nt-slider{flex-wrap:wrap;overflow:visible}  /* trong trình soạn thảo: hiện hết thẻ để dễ sửa */
.mce-content-body .nt-slide{flex-basis:30%}

/* 24/10/2026: tiêu đề khung liên hệ nhanh chữ trắng, rõ để thấy và sửa được (CSS bài viết làm nó xám tối) */
.nt-prose .nt-cta .nt-cta-title{color:#fff}

/* 24/10/2026: mẫu "6 lý do" – CSS trang chủ (.nt-why trong style.css) chia khối thành 3 cột
   (nhãn | tiêu đề | lưới) làm lưới bị ép hẹp, chữ vỡ từng ký tự.
   Trả khối về dạng thường: tiêu đề ở trên, lưới ở dưới (lưới 3/2/1 cột theo .nt-grid-3 ở trên). */
.nt-block.nt-why{display:block}