/* tvnh-sua.css — chỗ để MỌI chỉnh sửa giao diện về sau.
   Tách khỏi style.css của giao diện để nâng cấp giao diện không mất, và để
   danh sách tệp nguồn thay đổi thì WP Rocket dựng tên tệp gộp MỚI, tránh
   bị Cloudflare giữ bản cũ.
   09/08/2026 — anh Kiên yêu cầu: đổi toàn bộ font sang Roboto, vá bảng cắt chữ. */

body,
h1, h2, h3, h4, h5, h6,
.entry-title, .widget-title, .archive-title,
.genesis-nav-menu, .nav-primary, .nav-secondary,
button, input, select, textarea,
.button, .more-link, .entry-comments,
blockquote, cite, caption, th, td {
	font-family: Roboto, sans-serif;
}

/* Giao diện đặt table{word-break:break-all}. Kiểu ngắt đó cắt ở BẤT KỲ ký tự nào
   nên tiếng Việt vỡ giữa chữ trên màn hình hẹp. Trả về ngắt theo từ. */
table,
table th,
table td {
	word-break: normal;
	overflow-wrap: break-word;
	-webkit-hyphens: none;
	hyphens: none;
}

/* ===== Thành phần cho TRANG DỊCH VỤ (thêm 09/08/2026) =====
   Bọc nội dung trong .tvnh-dv để không ảnh hưởng phần còn lại của site.
   Màu nhấn #008285 lấy theo màu sẵn có của giao diện. */

.tvnh-dv{--nhan:#008285;--nhan-dam:#00686a;--muc:#222;--nhat:#f4f8f8;--vien:#dde7e7}
.tvnh-dv{color:var(--muc);line-height:1.65}
.tvnh-dv h2{font-size:1.5em;line-height:1.3;margin:1.8em 0 .7em;color:#123}
.tvnh-dv h2::after{content:"";display:block;width:52px;height:3px;background:var(--nhan);margin-top:.45em}
.tvnh-dv h3{font-size:1.12em;margin:1.4em 0 .5em;color:#123}
.tvnh-dv p{margin:0 0 1em}

/* Mở đầu */
.dv-mo{background:var(--nhat);border-left:4px solid var(--nhan);padding:20px 22px;border-radius:0 10px 10px 0;margin:0 0 1.8em}
.dv-mo p{margin:0 0 .6em}
.dv-mo p:last-child{margin:0}

/* Lưới thẻ dịch vụ */
.dv-luoi{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;margin:1.4em 0 2em}
.dv-the{border:1px solid var(--vien);border-radius:12px;padding:20px;background:#fff;display:flex;flex-direction:column;transition:box-shadow .18s,transform .18s}
.dv-the:hover{box-shadow:0 6px 18px rgba(0,130,133,.14);transform:translateY(-2px)}
.dv-the h3{margin:0 0 .5em;font-size:1.08em;color:var(--nhan-dam)}
.dv-the p{font-size:.96em;color:#444;flex:1;margin:0 0 1em}
.dv-the a.dv-nut{align-self:flex-start}

/* Nút */
.dv-nut{display:inline-block;background:var(--nhan);color:#fff!important;padding:9px 18px;border-radius:8px;text-decoration:none;font-weight:500;font-size:.95em}
.dv-nut:hover{background:var(--nhan-dam);color:#fff!important}
.dv-nut-vien{background:transparent;color:var(--nhan)!important;border:1.5px solid var(--nhan)}
.dv-nut-vien:hover{background:var(--nhan);color:#fff!important}

/* Danh sách có dấu tích */
.dv-ds{list-style:none;margin:0 0 1.4em;padding:0}
.dv-ds li{position:relative;padding-left:28px;margin-bottom:.6em}
.dv-ds li::before{content:"✓";position:absolute;left:0;top:0;color:var(--nhan);font-weight:700}

/* Các bước */
.dv-buoc{counter-reset:b;list-style:none;margin:0 0 1.6em;padding:0}
.dv-buoc li{counter-increment:b;position:relative;padding-left:46px;margin-bottom:1.1em}
.dv-buoc li::before{content:counter(b);position:absolute;left:0;top:-2px;width:30px;height:30px;border-radius:50%;background:var(--nhan);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.92em}

/* Bảng: cuộn ngang trên máy hẹp thay vì bóp chữ */
.dv-bang{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:1.2em 0 1.8em;border:1px solid var(--vien);border-radius:10px}
.dv-bang table{margin:0;width:100%;min-width:520px;border-collapse:collapse;word-break:normal;overflow-wrap:break-word}
.dv-bang th{background:var(--nhat);color:#123;text-align:left;padding:12px 14px;border-bottom:2px solid var(--vien);font-size:.96em}
.dv-bang td{padding:11px 14px;border-bottom:1px solid var(--vien);vertical-align:top;font-size:.95em}
.dv-bang tr:last-child td{border-bottom:0}
.dv-bang td.so,.dv-bang th.so{text-align:right;white-space:nowrap}

/* Gói dịch vụ */
.dv-goi{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px;margin:1.4em 0 2em}
.dv-goi-the{border:1px solid var(--vien);border-radius:12px;overflow:hidden;background:#fff;display:flex;flex-direction:column}
.dv-goi-the header{background:var(--nhat);padding:16px 18px;border-bottom:1px solid var(--vien)}
.dv-goi-the h3{margin:0 0 .25em;font-size:1.05em;color:var(--nhan-dam)}
.dv-goi-gia{font-size:1.28em;font-weight:700;color:#123}
.dv-goi-the .dv-ds{padding:16px 18px;margin:0;flex:1}
.dv-goi-the .dv-ds li{font-size:.94em}

/* Giá đặt thẳng trong thẻ dịch vụ */
.dv-the .dv-gia{font-size:1.3em;font-weight:700;color:#123;margin:0 0 .8em;padding-bottom:.6em;border-bottom:1px solid var(--vien)}
.dv-the .dv-ds{margin:0;flex:1}
.dv-the .dv-ds li{font-size:.94em;color:#444;margin-bottom:.5em}

/* Dải kêu gọi */
.dv-cta{background:var(--nhan);color:#fff;border-radius:12px;padding:22px 24px;margin:2em 0 1em;text-align:center}
.dv-cta p{margin:0 0 .8em;font-size:1.05em}
.dv-cta .dv-nut{background:#fff;color:var(--nhan-dam)!important}
.dv-cta .dv-nut:hover{background:#eafafa;color:var(--nhan-dam)!important}

/* Lưu ý */
.dv-luuy{background:#fff8e6;border-left:4px solid #d99b0a;padding:16px 18px;border-radius:0 10px 10px 0;margin:1.2em 0 1.6em;font-size:.96em}
.dv-luuy strong{display:block;margin-bottom:.35em;color:#8a6100}

@media (max-width:600px){
  .tvnh-dv h2{font-size:1.3em}
  .dv-cta{padding:18px}
}

/* Ảnh minh hoạ giữa bài */
.tvnh-dv .dv-anh{margin:1.6em 0;text-align:center}
.tvnh-dv .dv-anh img{max-width:100%;height:auto;border-radius:12px}

/* Trích dẫn */
.tvnh-dv blockquote{border-left:4px solid var(--nhan);background:var(--nhat);margin:1.6em 0;padding:18px 22px;border-radius:0 10px 10px 0;font-style:italic}
.tvnh-dv blockquote p{margin:0 0 .5em}
.tvnh-dv blockquote cite{display:block;font-style:normal;font-size:.9em;color:#567}

/* Form Jetpack trong trang dịch vụ */
.tvnh-dv .contact-form{background:var(--nhat);border:1px solid var(--vien);border-radius:12px;padding:22px}
.tvnh-dv .contact-form label{display:block;font-weight:500;margin-bottom:.3em}
.tvnh-dv .contact-form input[type=text],
.tvnh-dv .contact-form input[type=email],
.tvnh-dv .contact-form textarea{width:100%;padding:10px 12px;border:1px solid var(--vien);border-radius:8px;background:#fff;font-family:inherit;font-size:1em}
.tvnh-dv .contact-form textarea{min-height:140px}
.tvnh-dv .contact-form .grunion-field-wrap{margin-bottom:1em}
.tvnh-dv .contact-form button[type=submit],
.tvnh-dv .contact-form input[type=submit]{background:var(--nhan);color:#fff;border:0;padding:11px 22px;border-radius:8px;font-weight:500;cursor:pointer}
.tvnh-dv .contact-form button[type=submit]:hover,
.tvnh-dv .contact-form input[type=submit]:hover{background:var(--nhan-dam)}