/*
 * CSS bổ sung cho giao diện Sago Media (theo mẫu Halo Studio).
 * Chỉ chứa thứ control của element Nova không diễn đạt được.
 * Màu lấy theo bảng màu của site: đen #030303, xám #4F4F4F, nền phụ #F5F5F5, viền #D9D9D9.
 */

/* ===== Toàn site ===== */

/* Header: chấm xanh "đang hoạt động" trước dòng địa điểm. */
.nv-cham-xanh p { display: inline-flex; align-items: center; gap: 10px; margin: 0; }
.nv-cham-xanh p::before { content: ""; flex: 0 0 12px; width: 12px; height: 12px; border-radius: 50%; background: #3ccd48; box-shadow: 0 0 0 3px rgba(60, 205, 72, .25); }
@media (prefers-reduced-motion: no-preference) {
	.nv-cham-xanh p::before { animation: nv-nhip 2s ease-in-out infinite; }
}
@keyframes nv-nhip { 50% { box-shadow: 0 0 0 6px rgba(60, 205, 72, .1); } }

/* Nút đen của mẫu là khối vuông chữ thường; theme tự gạch chân nút "link" khi rê — tắt cho nút cuộn. */
.nv-cuon.nv-cuon:hover { text-decoration: none; }
/* Nút trong cột bị kéo hết bề ngang khi cột canh "stretch". */
.nv-dau-dong { align-self: flex-start; }

/* Footer: form nhận tin — ô và nút cao 59px, vuông góc, cách nhau 24px như mẫu. */
.nv-form-tin .wpcf7-form { display: grid; gap: 24px; }
.nv-form-tin .wpcf7-form p { margin: 0; }
.nv-form-tin .wpcf7-form br { display: none; }
.nv-form-tin .wpcf7-form-control:not(.wpcf7-submit) { width: 100%; height: 60px; padding: 18px 16px; font-size: 16px; }
.nv-form-tin .wpcf7-submit.wpcf7-submit { height: 59px; border: 0; border-radius: 0; font-size: 18px; font-weight: 500; cursor: pointer; }
.nv-form-tin .wpcf7-submit.wpcf7-submit:hover { background: #fff; color: #030303; }
.nv-form-tin .wpcf7-spinner { position: absolute; }
.nv-lien-ket-trang.nv-lien-ket-trang:hover { text-decoration: underline; text-underline-offset: 4px; }
.nv-ds-chan a:hover { opacity: .7; }

/* ===== Trang chủ ===== */

/* Số đếm 120px giãn chữ âm như mẫu; nhãn dưới số cách 25px. */
.nv-so .nova-counter__num { font-weight: 600; line-height: .84; letter-spacing: -.05em; }
.nv-so .nova-counter__label { margin-top: 25px; max-width: 260px; }

/* Dải ảnh chạy: bỏ bo góc, ảnh không kéo giãn. */
.nv-anh-chay img { display: block; width: 100%; }

/* Dịch vụ: hàng tiêu đề 32px VIẾT HOA, dấu cộng trong vòng tròn 40px. */
.nv-ds-dv.nv-ds-dv { --nova-acc-pad: 40px; }
.nv-ds-dv > details { border-color: #d9d9d9; }
.nv-ds-dv.nv-ds-dv .nova-accordion__title { font-size: 32px; font-weight: 600; line-height: 1.2; letter-spacing: -1px; text-transform: uppercase; color: #030303; }
.nv-ds-dv.nv-ds-dv .nova-accordion__icon { width: 40px; height: 40px; border: 2px solid #4f4f4f; border-radius: 50%; color: #4f4f4f; }
.nv-ds-dv.nv-ds-dv .nova-accordion__icon::before { width: 18px; }
.nv-ds-dv.nv-ds-dv .nova-accordion__icon::after { height: 18px; }
.nv-dv { display: grid; grid-template-columns: 193px minmax(0, 334px) 1fr; gap: 16px 40px; align-items: start; }
.nv-dv img { width: 193px; height: 100px; object-fit: cover; }
.nv-dv p { margin: 0; color: #4e4e4e; }
.nv-the { display: flex; flex-wrap: wrap; gap: 12px; max-width: 380px; margin: 0 0 0 auto; padding: 0; list-style: none; }
.nv-the li { margin: 0; padding: 4px 8px; background: #f5f5f5; color: #4e4e4e; font-size: 18px; font-weight: 500; line-height: 1.5; }

/* Desktop: mục đang mở đặt ảnh nhỏ bên trái tiêu đề, thẻ bên phải — như mẫu. */
@media (min-width: 992px) {
	.nv-ds-dv > details[open] { position: relative; }
	.nv-ds-dv > details[open] > summary { padding-left: 233px; }
	.nv-ds-dv > details[open] .nova-accordion__a { padding-left: 233px; min-height: 84px; }
	.nv-ds-dv > details[open] .nv-dv { display: block; }
	.nv-ds-dv > details[open] .nv-dv img { position: absolute; top: 40px; left: 0; }
	.nv-ds-dv > details[open] .nv-dv p { max-width: 334px; }
	.nv-ds-dv > details[open] .nv-the { position: absolute; top: 40px; left: 840px; }
}

/* Logo khách hàng: một tông đen như mẫu, rê chuột hiện màu thật. */
.nv-logo-kh img { max-height: 84px; width: auto; object-fit: contain; filter: grayscale(1) brightness(.3) contrast(1.6); mix-blend-mode: multiply; transition: filter .3s ease; }
.nv-o-logo:hover .nv-logo-kh img { filter: none; }
/* Logo có mảng nền trắng bên trong: chỉ chuyển xám, làm tối sẽ thành khối đen. */
/* Logo khách giữ màu thật, hơi nhạt; rê chuột rõ hẳn. */
.nv-logo-kh.nv-logo-mau img { max-height: 84px; filter: none; mix-blend-mode: normal; opacity: .9; transition: opacity .3s ease, transform .3s ease; }
.nv-o-logo:hover .nv-logo-kh.nv-logo-mau img { opacity: 1; transform: scale(1.05); }
@media (max-width: 767px) { .nv-logo-kh.nv-logo-mau img { max-height: 56px; } }
.nv-logo-kh.nv-logo-nhat img { filter: grayscale(1) contrast(1.3); }

/* Chứng nhận: đường kẻ nằm trong khung nội dung — khung 1440 đã gồm lề, nên kẻ bằng lớp giả chừa lề hai bên. */
.nv-dong > .nova-row__inner { position: relative; padding-block: 44px; }
.nv-dong > .nova-row__inner::before, .nv-dong--cuoi > .nova-row__inner::after { content: ""; position: absolute; left: var(--nova-edge); right: var(--nova-edge); border-top: 1px solid #d9d9d9; }
.nv-dong > .nova-row__inner::before { top: 0; }
.nv-dong--cuoi > .nova-row__inner::after { bottom: 0; }

/* Bảng giá: chấm tròn đặc 5px. */
.nv-ds-goi .nova-list__icon { border-radius: 50%; background: currentColor; }
.nv-ds-goi .nova-list__icon svg { display: none; }

/* Nhận xét: phủ tối nửa dưới ảnh để chữ trắng đọc được. */
.nv-the-anh { position: relative; }
.nv-the-anh::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, .9) 78%); pointer-events: none; }
.nv-so-nhan strong { color: #1759ba; font-weight: 500; }
.nv-avatar img { border-radius: 7px; background: #fff; }

/* Tin tức: thẻ bài không viền, không đệm; ngày + chuyên mục 18px, tiêu đề 20px. */
.nv-bai article.nova-card.nova-card { border: 0; padding: 0; box-shadow: none; }
.nv-bai .nova-card__body { padding: 16px 0 0; }
.nv-bai .nova-card__meta { font-size: 18px; font-weight: 500; }
.nv-bai .nova-card__title { margin-top: 8px; font-size: 20px; font-weight: 500; line-height: 1.4; }

/* ===== Dự án ( trang chủ, danh sách, chi tiết ) ===== */

/* Lưới thẻ dự án: cột cách 40, hàng cách 80 như mẫu. */
.nv-luoi-da.nv-luoi-da .nova-loop__grid, .nv-luoi-da.nv-luoi-da > .nova-loop__items { row-gap: 80px; }
/* Ảnh thẻ: rê chuột phóng nhẹ, khung giữ nguyên. */
.nv-anh-da { overflow: hidden; }
.nv-anh-da img { display: block; width: 100%; transition: transform .6s ease; }
@media (prefers-reduced-motion: no-preference) {
	.nv-luoi-da article:hover .nv-anh-da img, .nv-luoi-da .nova-loop__item:hover .nv-anh-da img { transform: scale(1.04); }
}
.nv-the-da__dau .nova-post-title { margin: 0; }
/* Tên dự án là liên kết: giữ màu đen như mẫu, rê chuột mới đổi xanh. */
.nv-the-da__dau.nv-the-da__dau .nova-post-title a { color: #030303; text-decoration: none; }
.nv-the-da__dau.nv-the-da__dau .nova-post-title a:hover { color: #1759ba; }
/* Chuyển dự án trước / sau: chữ 18px như nút của mẫu. */
.nv-chuyen-da { font-size: 18px; font-weight: 500; }
.nv-chuyen-da a { color: #030303; }
.nv-loai-da { white-space: nowrap; }
.nv-loai-da a { color: inherit; text-decoration: none; }
.nv-xem-da.nv-xem-da:hover, .nv-loc-da.nv-loc-da:hover { text-decoration: none; color: #1759ba; }
.nv-anh-da-lon img { display: block; width: 100%; height: auto; }
/* Dự án chưa có album: gallery không in gì, ẩn luôn dải để khỏi dư 80px trắng. */
.nv-dai-album:not(:has(.nova-gallery)) { display: none; }
/* Bảng thông tin dự án: mỗi dòng một đường kẻ như hàng chứng nhận. */
.nv-bang-da__dong { padding-block: 16px; border-top: 1px solid #d9d9d9; }
.nv-bang-da__dong:last-child { border-bottom: 1px solid #d9d9d9; }
.nv-bang-da__dong p { margin: 0; }
.nv-noi-dung-da p { margin: 0 0 16px; }
.nv-noi-dung-da img { width: 100%; height: auto; margin-block: 24px; }
/* Thương hiệu nhiều hạng mục: mỗi hạng mục một tiêu đề nhỏ VIẾT HOA trên ảnh của nó. */
.nv-noi-dung-da h3 { margin: 48px 0 0; font-size: 24px; font-weight: 600; line-height: 1.2; letter-spacing: -.5px; text-transform: uppercase; color: #030303; }

@media (max-width: 991px) {
	.nv-luoi-da.nv-luoi-da .nova-loop__grid, .nv-luoi-da.nv-luoi-da > .nova-loop__items { row-gap: 40px; }
	.nv-ds-dv.nv-ds-dv .nova-accordion__title { font-size: 24px; }
	.nv-dv { grid-template-columns: 1fr; }
	.nv-dv img { width: 100%; height: auto; aspect-ratio: 772 / 400; }
	.nv-the { margin: 0; max-width: none; }
	.nv-dong > .nova-row__inner { padding-block: 24px; }
}

@media (max-width: 767px) {
	.nv-ds-dv.nv-ds-dv { --nova-acc-pad: 24px; }
	.nv-ds-dv.nv-ds-dv .nova-accordion__icon { width: 32px; height: 32px; }
	.nv-ds-dv.nv-ds-dv .nova-accordion__icon::before { width: 14px; }
	.nv-ds-dv.nv-ds-dv .nova-accordion__icon::after { height: 14px; }
	.nv-so .nova-counter__label { margin-top: 12px; }
	.nv-dong > .nova-row__inner::before, .nv-dong--cuoi > .nova-row__inner::after { left: var(--nova-edge-mobile); right: var(--nova-edge-mobile); }
}

/* Chi tiết dự án: dòng Thách thức / Kết quả chưa có chữ thì ẩn cả dòng. */
.nv-doan-da:not(:has(.nova-text)) { display: none; }
.nv-doan-da__chu p { margin: 0 0 12px; }

/* ===== Trang dịch vụ ( _tam/gen-dich-vu.mjs ) ===== */
/* Dải chữ chạy: mỗi mục rộng theo chữ, không xuống dòng. */
.nv-chay-chu .nova-slider__item { flex: 0 0 auto !important; width: auto !important; padding-right: 56px; }
.nv-chay-chu .nv-chay-muc { white-space: nowrap; margin: 0; }
.nv-duong-dan a { color: inherit; text-decoration: none; }
.nv-duong-dan a:hover { color: #1759BA; }
/* Nút nằm đáy thẻ gói dù danh sách dài ngắn khác nhau. */
.nv-goi > .nv-day-cuoi { margin-top: auto; }
/* Hàng dịch vụ khác: cả hàng như một liên kết. */
.nv-dong-link h3 a { color: inherit; text-decoration: none; }
.nv-dong-link:hover h3 a { color: #1759BA; }
.nv-faq-dv > details { border-color: #d9d9d9; }
.nv-faq-dv .nova-accordion__title { font-size: 20px; font-weight: 600; color: #030303; }
.nv-the-dv { transition: transform .3s; }
.nv-the-dv:hover { transform: translateY(-4px); }
.nv-the-dv:hover h3 { color: #1759BA; }
/* Menu mega dịch vụ. */
.nv-mega-nhan { text-transform: uppercase; letter-spacing: .04em; }
.nv-mega-ds a { color: #030303; text-decoration: none; display: block; padding: 6px 0; }
.nv-mega-ds a:hover { color: #1759BA; }
.nv-mega-the img { transition: transform .4s; }
.nv-mega-the:hover img { transform: scale(1.03); }
/* Form liên hệ ( CF7 3749 ): lưới 2 cột, nhãn nhỏ, ô cao thoáng. */
.sago-f { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 20px; }
.sago-f__o { display: flex; flex-direction: column; gap: 8px; margin: 0; font-size: 15px; font-weight: 500; line-height: 1.4; color: #030303; }
.sago-f__o--rong { grid-column: 1 / -1; }
.sago-f .wpcf7-form-control-wrap { display: block; }
.sago-f input:not([type=submit]), .sago-f select, .sago-f textarea { width: 100%; min-height: 52px; padding: 14px 16px; font-size: 16px; font-weight: 400; border: 1px solid #d9d9d9; border-radius: 0; background: #fff; color: #030303; }
.sago-f textarea { min-height: 140px; resize: vertical; }
.sago-f input:focus, .sago-f select:focus, .sago-f textarea:focus { outline: none; border-color: #030303; }
.sago-f input[type=submit] { width: 100%; min-height: 56px; margin-top: 8px; border: 0; border-radius: 0; background: #030303; color: #fff; font-size: 18px; font-weight: 500; cursor: pointer; transition: background .2s; }
.sago-f input[type=submit]:hover { background: #1759BA; }
.sago-f .wpcf7-not-valid-tip { font-size: 13px; margin-top: 4px; }
@media (max-width: 767px) { .sago-f { grid-template-columns: 1fr; gap: 18px; } }
.nv-ban-do iframe { display: block; width: 100%; height: 480px; border: 0; }
@media (max-width: 767px) { .nv-ban-do iframe { height: 360px; } }
/* Phân trang: ô vuông viền rõ, trang hiện tại nền đen chữ trắng, rê chuột xanh Sago. */
.nova-pagination .nav-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.nova-pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 48px; height: 48px; padding: 0 16px; border: 1px solid #030303 !important; border-radius: 0 !important; background: #fff !important; color: #030303 !important; font-size: 17px; font-weight: 600; text-decoration: none; transition: background .2s, color .2s, border-color .2s; }
.nova-pagination a.page-numbers:hover { background: #1759BA !important; border-color: #1759BA !important; color: #fff !important; }
.nova-pagination .page-numbers.current { background: #030303 !important; color: #fff !important; }
.nova-pagination .page-numbers.dots { border-color: transparent !important; min-width: 24px; padding: 0; }
/* Album bài đăng fanpage: giữ nguyên cả ảnh ( dọc / ngang ) trên nền xám, không cắt chữ. */
.nv-album-nen .nova-gallery__item { background: #f5f5f5; }

/* ===== Thẻ dự án mới ( the-du-an.mjs ): ảnh 16:9 trên, chữ dưới, hàng cách 80px ===== */
.nv-luoi-da .nova-loop__list { row-gap: 80px; }
@media (max-width: 767px) { .nv-luoi-da .nova-loop__list { row-gap: 48px; } }
.nv-anh-da { overflow: hidden; }
.nv-anh-da img { transition: transform .7s cubic-bezier(.2,.7,.2,1); }
.nova-loop__item:hover .nv-anh-da img { transform: scale(1.04); }
.nv-the-da__ten h3 a { color: inherit; text-decoration: none; }
.nv-mui-da { flex: none; transition: transform .3s, color .3s; }
.nova-loop__item:hover .nv-mui-da { transform: translate(4px, -4px); color: #1759BA; }
.nova-loop__item:hover .nv-the-da__ten h3 a { color: #1759BA; }
.nv-meta-da > * { margin: 0; }
.nv-meta-da > * + *::before { content: "·"; margin: 0 10px; color: #9e9e9e; }
.nv-meta-da .nova-text:has(> p:empty), .nv-meta-da .nova-text:not(:has(p)) { display: none; }
.nv-meta-da .nv-loai-da a { color: inherit; text-decoration: none; }

/* ===== Chuyển trang mượt ( kiểu SPA ) =====
 * Không dùng AJAX thay nội dung: Nova có slider, accordion, form CF7, bản đồ… chạy lại script dễ vỡ, và SEO / analytics
 * cần trang thật. Thay vào đó: trang kế được trình duyệt tải sẵn khi rê chuột ( speculation rules, functions.php )
 * nên bấm là có ngay, và View Transitions nối hai trang bằng hiệu ứng mờ + trượt nhẹ — URL đổi, không thấy nháy trắng.
 * Trình duyệt chưa hỗ trợ thì vẫn chuyển trang bình thường. */
/* Hiệu ứng chuyển trang: đưa sang functions.php ( chỉ in ở trang nội dung, không áp cho header / trang lỗi ). */
/* Dòng phụ thẻ dự án: các mục cùng hàng, dấu chấm giữa thẳng hàng chữ. */
.nv-meta-da { align-items: center; line-height: 1.5; }
.nv-meta-da > .nova-text, .nv-meta-da > .nova-post-terms { display: flex; align-items: center; font-size: 16px; }
.nv-meta-da p { margin: 0; }
/* Bảng giá trang chủ: 4 thẻ dịch vụ đại diện. */
.nv-the-gia { position: relative; border: 1px solid #e6e6e6; transition: border-color .25s, transform .25s; }
.nv-the-gia:hover { border-color: #030303; transform: translateY(-3px); }
.nv-the-gia__dau p { margin: 0; display: flex; justify-content: space-between; align-items: flex-start; }
.nv-the-gia__nhom { padding: 6px 12px; background: #f2f4f7; color: #4f4f4f; font-weight: 600; }
.nv-the-gia__nhan { position: absolute; top: -1px; right: 24px; padding: 6px 14px; background: #030303; color: #fff; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.nv-the-gia__icon { flex: none; width: 60px; height: 60px; display: grid; place-items: center; background: #f2f2f2; }
.nv-the-gia__so { font-size: 22px; font-weight: 700; color: #030303; }
.nv-the-gia__xem p { margin: 0; }
/* Menu mega neo theo cả header: khối Stack bọc menu + icon tìm kiếm không được làm mốc định vị. */
.nv-header .nova-block, .nv-header .nova-col, .nv-header .nova-row__inner { position: static; }
/* …trừ các khối BÊN TRONG bảng mega: khối có link phủ ( .nova-block__link ) phải giữ position:relative, không thì lớp link tràn ra che cả bảng. */
.nova-mega .nova-block, .nova-mega .nova-col, .nova-mega .nova-row__inner { position: relative; }
.nv-header .nova-section__inner { position: relative; }

/* Menu điện thoại: mục con thu gọn, bấm mũi tên để mở ( Nova chưa có sẵn — script ở functions.php ). */
.nova-mobile-menu__list .menu-item-has-children { position: relative; }
.nova-mobile-menu__list .menu-item-has-children > .sub-menu { display: none; }
.nova-mobile-menu__list .menu-item-has-children.is-mo > .sub-menu { display: block; }
.sago-mo-con { position: absolute; right: 0; top: 4px; width: 44px; height: 44px; display: grid; place-items: center; border: 0; background: none; color: #030303; cursor: pointer; }
.sago-mo-con svg { transition: transform .2s; }
.is-mo > .sago-mo-con svg { transform: rotate(180deg); }
/* Chi tiết bài viết: ảnh đại diện rộng đúng cột, thân bài không bị bó hẹp thêm. */
.nv-anh-bai-lon, .nv-anh-bai-lon img { width: 100%; }
.nv-noi-dung-bai.nova-prose, .nv-noi-dung-bai { max-width: none; }

.nv-noi-dung-bai figure { margin: 32px 0; } .nv-noi-dung-bai figure img { width: 100%; height: auto; }

/* Menu điện thoại: bỏ hết gạch chân / đường kẻ, chữ to thoáng hơn, nút gọi thành nút thật. */
.nova-mobile-menu__list a, .nova-mobile-menu__link { border-bottom: 0 !important; padding: 14px 0; font-size: 18px; }
.nova-mobile-menu__list .sub-menu a { font-size: 16px; padding: 10px 0; color: #4f4f4f; }
.nova-mobile-menu__divider { display: none; }
.nova-mobile-menu .nova-btn, .nova-mobile-menu__item--button a { display: flex; justify-content: center; margin-top: 24px; padding: 16px 24px; background: #030303; color: #fff; font-weight: 600; }.nova-mobile-menu__list .sub-menu { padding-left: 16px; margin: 0 0 8px; }
.nova-mobile-menu__list > li > .sago-mo-con { top: 6px; }
.nova-mobile-menu__list .sub-menu .sago-mo-con { top: 0; height: 41px; }
/* Trợ năng: link trong đoạn văn phải phân biệt được không chỉ bằng màu. */
.nv-noi-dung-bai a, .nv-van-ban a, .nova-text p a:not(.nv-mui-link) { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.nv-the-gia:hover .nv-the-gia__xem p { text-decoration: underline; text-underline-offset: 4px; }
.nv-mui-link { color: #030303; text-decoration: none; display: inline-block; transition: transform .25s, color .25s; }
.nv-dong-link:hover .nv-mui-link { transform: translate(4px, -4px); color: #1759BA; }
/* Luồng chính: dải dưới màn hình đầu chỉ vẽ khi tới gần. */
.nv-home ~ .nv-home { content-visibility: auto; contain-intrinsic-size: auto 900px; }
.nv-anh-chay .nova-slider__track { will-change: transform; }
/* Shortcode [sago_info] / [sago_info_company]: khối thông tin công ty trắng đen. */
.sago-info { font-style: normal; border: 1px solid #e5e5e5; padding: 28px 32px; background: #fff; color: #030303; max-width: 560px; }
.sago-info__ten { margin: 0 0 18px; padding-bottom: 16px; border-bottom: 1px solid #e5e5e5; font-size: 20px; font-weight: 600; line-height: 1.3; text-transform: uppercase; letter-spacing: -.2px; }
.sago-info ul.sago-info__ds { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.sago-info ul.sago-info__ds li { display: grid; grid-template-columns: 36px 1fr; column-gap: 12px; align-items: center; margin: 0; padding: 0; }
.sago-info__ds li::before { content: none; }
.sago-info__icon { grid-row: span 2; width: 36px; height: 36px; padding: 9px; background: #f2f2f2; color: #030303; box-sizing: border-box; }
.sago-info__nhan { font-size: 13px; line-height: 1.3; color: #4F4F4F; }
.sago-info__gt { font-size: 16px; line-height: 1.45; font-weight: 500; }
.sago-info a, .nv-noi-dung-bai .sago-info a, .nova-text .sago-info a { color: #030303; text-decoration: none; background-image: linear-gradient(currentColor, currentColor); background-size: 0 1px; background-position: 0 100%; background-repeat: no-repeat; transition: background-size .25s; }
.sago-info a:hover, .sago-info a:focus-visible { background-size: 100% 1px; }
@media (max-width: 767px) { .sago-info { padding: 22px 20px; } .sago-info__ten { font-size: 18px; } }