/* Vá nhỏ cho phần WordPress tự thêm (không có trong Odoo gốc) — không sửa CSS gốc theo khuyến cáo skill */
.tnvc-tx-filter .form-label { margin-bottom: 2px; }

/* Card đồng bộ kích thước — dùng chung cho lưới blog (trang chủ/tin tức), sản phẩm, dự án
   để không bị lệch cao thấp giữa các thẻ trong cùng 1 hàng (yêu cầu PM). */
.tnvc-card-grid { display: flex; flex-wrap: wrap; }
.tnvc-card-grid > [class*="col-"] { display: flex; }
.tnvc-card { display: flex; flex-direction: column; width: 100%; height: 100%; }
.tnvc-card-img { display: block; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; background: #f1f1f1; }
.tnvc-card-img img { width: 100%; height: 100%; object-fit: cover; }
.tnvc-card-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.6em; }
.tnvc-card-excerpt { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* WooCommerce không dùng CSS mặc định của nó (add_filter woocommerce_enqueue_styles rỗng) — vá lại vài nút/khối
   dùng chung để trông giống nút Bootstrap của theme thay vì input/button trần không style. */
.single_add_to_cart_button, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button {
	display: inline-block; padding: .5rem 1.5rem; border-radius: var(--tnvc-radius); border: 1px solid var(--tnvc-brand);
	background: var(--tnvc-brand); color: #fff; font-weight: 600; cursor: pointer;
}
.quantity .qty { width: 60px; padding: .375rem .5rem; border: 1px solid #ced4da; border-radius: var(--tnvc-radius); margin-right: .5rem; }

/* Form liên hệ (CF7) dùng nguyên markup + class s_website_form của Odoo (inc/contact-form.php) nên ăn CSS
   gốc; khung bọc span của CF7 phải là khối để ô nhập giãn đủ bề ngang như gốc. */
.s_website_form .wpcf7-form-control-wrap { display: block; }
/* Biểu tượng chờ gửi của CF7 (inline-block 24px) làm cao dòng nút Gửi thêm 1px so với gốc — tách khỏi dòng. */
.s_website_form .wpcf7-spinner { position: absolute; }
.wpcf7-spinner { margin-left: .5rem; }

/* Menu mobile + sticky header tự viết (thay phần đã mất khi tắt bundle "lazy" của Odoo) — xem site.js.
   CSS gốc Odoo ép .offcanvas { visibility:visible!important; position:inherit; transform:none } trên MỌI
   trạng thái nên không dùng được .show mặc định của Bootstrap; ở đây tự điều khiển bằng .tnvc-open. */
#top_menu_collapse_mobile.offcanvas {
	position: fixed !important;
	top: 0; right: 0; height: 100vh; width: min(320px, 85vw);
	transform: translateX(100%) !important;
	transition: transform .3s ease;
	background: #fff; z-index: 1050; overflow-y: auto;
	box-shadow: -4px 0 12px rgba(0,0,0,.15);
}
#top_menu_collapse_mobile.offcanvas.tnvc-open { transform: translateX(0) !important; visibility: visible !important; }
.tnvc-offcanvas-backdrop {
	position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 1049;
	opacity: 0; visibility: hidden; transition: opacity .3s ease;
}
.tnvc-offcanvas-backdrop.show { opacity: 1; visibility: visible; }
body.tnvc-noscroll { overflow: hidden; }

header#top.tnvc-sticky {
	position: sticky; top: 0; z-index: 1030;
	transition: transform .3s ease, box-shadow .3s ease;
}
header#top.tnvc-sticky.tnvc-hide { transform: translateY(-100%); }
header#top.tnvc-sticky.tnvc-scrolled { box-shadow: 0 2px 8px rgba(0,0,0,.1); }

/* Nút đóng popup xem ảnh (site.js initGalleryLightbox, .s_gallery_lightbox .btn-close) — z-index riêng
   trong modal không đủ vì #wpadminbar (thanh đen khi đăng nhập admin) là 1 stacking context KHÁC ở gốc
   <body> với z-index 99999, còn .modal Bootstrap chỉ 1055 — dù nút có z-index cao TRONG modal vẫn luôn bị
   admin bar (cao 32px) đè ở phía trên khi đang đăng nhập, bấm trúng thanh admin thay vì nút đóng. WP tự
   thêm class "admin-bar" vào <body> đúng lúc thanh này hiển thị — chỉ đẩy nút xuống khi thật sự cần. */
body.admin-bar .s_gallery_lightbox .btn-close { top: 42px !important; }

/* Khối "Tin tức" trang chủ ([tnvc_latest_posts]) — Odoo dùng JS chia mỗi bài 1 .row.my-4 riêng trên mobile
   (<768px) nên giữa các bài cách nhau 24px (margin my-4 các hàng liền kề gộp lại); ở đây in chung 1 hàng. */
@media (max-width: 767.98px) {
	.tnvc-home-posts > div + div { margin-top: 24px; }
}

/* Thư viện video (/thu-vien-video, ô "Các video"): ảnh xem trước 16:9 + nút phát; bấm -> iframe YouTube (site.js). */
.tnvc-yt { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; padding: 0; border: 0; background: #000; overflow: hidden; cursor: pointer; }
.tnvc-yt img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s, opacity .3s; }
.tnvc-yt:hover img { transform: scale(1.03); opacity: .85; }
.tnvc-yt-play { position: absolute; top: 50%; left: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%; background: rgba(0, 0, 0, .6); color: #fff; font-size: 24px; line-height: 64px; text-align: center; padding-left: 4px; transition: background .2s; }
.tnvc-yt:hover .tnvc-yt-play, .tnvc-yt:focus-visible .tnvc-yt-play { background: #e62117; }
.tnvc-yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.tnvc-video-list .card-title { font-size: 1.1rem; }

/* Form đăng nhập / đăng ký / đặt lại mật khẩu (/web/*) và /my/account: thẻ nền trắng trên ảnh nền để dễ đọc.
   Gốc Odoo chỉ đặt form rộng 300px, không nền (parts/web-auth.php). */
.tnvc-auth { padding: 48px 16px; }
.tnvc-auth-card { background: #fff; border-radius: 14px; box-shadow: 0 12px 36px rgba(0, 0, 0, .22); padding: 28px 28px 22px; }
.oe_website_login_container .tnvc-auth-card { max-width: 420px; margin: 0 auto; }
.tnvc-auth-card .tnvc-auth-head h1 { color: rgb(9, 73, 99); font-weight: 700; }
.tnvc-auth-card label { font-weight: 500; }
.tnvc-auth-card .alert { font-size: .9rem; padding: .6rem .8rem; }
.tnvc-auth-card .oe_login_buttons a { font-weight: 500; }
@media (max-width: 575.98px) { .tnvc-auth { padding: 24px 12px; } .tnvc-auth-card { padding: 22px 18px 16px; } }
.o_portal_wrap .tnvc-auth-card { box-shadow: 0 4px 18px rgba(0, 0, 0, .08); border: 1px solid #e9ecef; }
.tnvc-account-side .min-w-0 { min-width: 0; }
/* Menu người dùng trên header (đã đăng nhập). */
.tnvc-usermenu .dropdown-toggle { max-width: 220px; }
.tnvc-usermenu .dropdown-toggle span { max-width: 150px; }
.tnvc-usermenu .dropdown-menu { min-width: 210px; }
.tnvc-usermenu-mobile { border-top: 1px solid #e9ecef; padding-top: 12px; }

/* Màu thương hiệu (Website Quỹ > Thương hiệu) — PHP in :root{--tnvc-brand…} trong <head> (tnvc-core/inc/brand.php). */
:root { --tnvc-brand: #8CC540; --tnvc-brand-text: #5b8227; --tnvc-brand-dark: #1D486A; --tnvc-radius: 5px; --tnvc-brand-on: #fff; }
/* Chữ trên nút nền màu chủ đạo = trắng, đồng bộ toàn site. CSS Odoo cho .btn-primary chữ tối #212529 (màu gốc xanh lá
   nhạt) — nút "Liên hệ"/"Tìm hiểu thêm" trắng chỉ nhờ thẻ <font class="text-o-color-…"> trong markup, còn nút nào không
   có thẻ đó (Sao chép số TK, Gửi form liên hệ, Đăng nhập, tìm kiếm /shop) bị chữ tối. Nút mới: cứ dùng .btn-primary. */
.btn-primary, .btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .show > .btn-primary.dropdown-toggle,
.o_wsale_products_page .box-search-products .o_searchbar_form .oe_search_button {
	--bs-btn-color: var(--tnvc-brand-on); --bs-btn-hover-color: var(--tnvc-brand-on); --bs-btn-active-color: var(--tnvc-brand-on); --bs-btn-disabled-color: var(--tnvc-brand-on);
	color: var(--tnvc-brand-on);
}

/* Nút mũi tên tròn viền (khối Hành trình + dải logo tài trợ) — inc/home-sections.php */
.tnvc-arrow { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 34px; height: 34px; padding: 0; border: 1.5px solid currentColor; border-radius: 50%; background: transparent; color: #fff; cursor: pointer; transition: background .2s, color .2s, opacity .2s; }
.tnvc-arrow:hover, .tnvc-arrow:focus-visible { background: #fff; color: #1d2530; }
.tnvc-arrow[hidden] { display: none; }
/* Menu thả xuống header (hover, site.js): cầu nối vô hình trên khe hở giữa mục menu và danh sách con để kéo chuột
   xuống không bị đóng. */
.o_hoverable_dropdown .navbar .dropdown-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }

/* Logo header "Gieo Chữ Trên Non" (logo ngang có chữ) — cao hơn logo biểu tượng cũ 40px để đọc được chữ. */
header#top .navbar-brand.logo img { height: 50px; width: auto; max-width: none; }
@media (max-width: 991.98px) { header#top .navbar-brand.logo img { height: 44px; } }

/* "Hành trình của chúng tôi" */
.tnvc-journey { background: #F5F4F9; padding: 72px 0 80px; }
.tnvc-journey > .container { max-width: 1600px; padding-left: clamp(16px, 3vw, 48px); padding-right: clamp(16px, 3vw, 48px); }
.tnvc-journey-title { font-family: 'Averta CY', serif; font-weight: 700; font-size: 2.25rem; color: #1b1b1b; text-align: center; margin-bottom: 44px; }
.tnvc-journey-wrap { position: relative; }
.tnvc-journey-track { --gap: 24px; display: flex; gap: var(--gap); overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; padding-bottom: 2px; }
.tnvc-journey-track::-webkit-scrollbar { display: none; }
.tnvc-journey-item { position: relative; flex: 0 0 calc((100% - 4 * var(--gap)) / 5); display: flex; flex-direction: column; scroll-snap-align: start; min-width: 0; }
/* Đường thời gian: mỗi mốc vẽ 1 đoạn nối sang mốc sau (kể cả khoảng cách giữa 2 cột). */
.tnvc-journey-item::before { content: ""; position: absolute; top: 8px; left: 0; right: calc(-1 * var(--gap)); height: 1px; background: #dcdde3; }
.tnvc-journey-item:last-child::before { right: 0; }
.tnvc-journey-dot { position: relative; height: 17px; display: flex; align-items: center; justify-content: center; }
.tnvc-journey-dot span { width: 14px; height: 14px; border-radius: 50%; background: #dcdde3; }
.tnvc-journey-year { margin: 12px 0 30px; text-align: center; font-weight: 700; font-size: 1.1rem; color: #5a5a5a; }
.tnvc-journey-card { flex: 1; display: flex; flex-direction: column; background: #fff; padding: 22px 20px 20px; border: 2px solid transparent; border-radius: 3px; }
.tnvc-journey-stats { flex: 1; margin: 0 0 24px; }
.tnvc-journey-stats > div { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.tnvc-journey-stats dt { font-weight: 400; color: #5a5a5a; font-size: .875rem; line-height: 1.35; }
.tnvc-journey-stats dd { margin: 0; flex: none; font-family: 'Averta CY', serif; font-weight: 700; font-size: 1.05rem; color: #111; text-align: right; }
.tnvc-journey-item.is-highlight .tnvc-journey-dot span { width: 16px; height: 16px; background: var(--tnvc-brand); box-shadow: 0 0 0 4px #F5F4F9; }
.tnvc-journey-item.is-highlight .tnvc-journey-year, .tnvc-journey-item.is-highlight .tnvc-journey-stats dd { color: var(--tnvc-brand-text); }
.tnvc-journey-item.is-highlight .tnvc-journey-card { border-color: var(--tnvc-brand); }
.tnvc-journey-nav { position: absolute; top: 55%; z-index: 2; color: #6c6f78; background: #fff; }
.tnvc-journey-nav.is-prev { left: -48px; } .tnvc-journey-nav.is-next { right: -48px; }
.tnvc-journey-nav:hover { background: var(--tnvc-brand); color: #fff; border-color: var(--tnvc-brand); }
/* Ảnh của mốc: nhiều ảnh xếp chồng, JS bật .is-active */
.tnvc-slides { position: relative; aspect-ratio: 5 / 3; overflow: hidden; background: #eee; }
.tnvc-slides img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .45s; }
.tnvc-slides img.is-active { opacity: 1; }
.tnvc-slides img:not(.is-active) { pointer-events: none; } /* ảnh ẩn nằm chồng lên -> không nhận click (popup mở đúng ảnh) */
.tnvc-slides-nav { position: absolute; top: 50%; margin-top: -17px; background: rgba(0, 0, 0, .12); }
.tnvc-slides-nav.is-prev { left: 12px; } .tnvc-slides-nav.is-next { right: 12px; }
@media (max-width: 1399.98px) { .tnvc-journey-nav.is-prev { left: -42px; } .tnvc-journey-nav.is-next { right: -42px; } }
/* Dưới 1300px lề 2 bên .container < 42px -> nút lòi khỏi màn, #wrapwrap cuộn ngang 11–19px (sửa 01/10/2026): nút vắt giữa mép khối. */
@media (max-width: 1299.98px) { .tnvc-journey-nav.is-prev { left: -17px; } .tnvc-journey-nav.is-next { right: -17px; } }
@media (max-width: 1199.98px) {
	.tnvc-journey-track { --gap: 20px; }
	.tnvc-journey-item { flex-basis: calc((100% - 2 * var(--gap)) / 3); }
	.tnvc-journey-card { padding: 20px; }
}
@media (max-width: 767.98px) {
	.tnvc-journey { padding: 48px 0 56px; }
	.tnvc-journey-title { font-size: 1.75rem; margin-bottom: 32px; }
	.tnvc-journey-item { flex-basis: 78%; }
	.tnvc-journey-nav { display: none !important; }
}

/* "Các đơn vị tài trợ" — đầu chân trang (trên thông tin liên hệ, yêu cầu PM 24/09), nền tối */
.tnvc-sponsors { margin-bottom: 32px; padding-bottom: 32px; border-bottom: 1px solid rgba(255, 255, 255, .14); }
.tnvc-sponsors-title { font-family: 'Averta CY', serif; font-weight: 700; font-size: 1.5rem; color: rgba(255, 255, 255, .7); margin-top: 0; margin-bottom: 22px; text-align: center; }
.tnvc-sponsors-row { display: flex; align-items: center; justify-content: center; gap: 18px; }
/* Bề rộng khung do site.js đặt = đúng N logo (khi cần lướt); không lướt thì co theo số logo -> căn giữa. */
.tnvc-sponsors-track { flex: 0 1 auto; min-width: 0; display: flex; gap: 18px; overflow-x: auto; scroll-behavior: smooth; scroll-snap-type: x proximity; scrollbar-width: none; }
.tnvc-sponsors-track::-webkit-scrollbar { display: none; }
.tnvc-sponsor { flex: 0 0 114px; height: 60px; display: flex; align-items: center; justify-content: center; padding: 6px 8px; background: #fff; border-radius: var(--tnvc-radius); scroll-snap-align: start; transition: transform .2s; }
a.tnvc-sponsor:hover { transform: translateY(-2px); }
.tnvc-sponsor img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
@media (max-width: 575.98px) { .tnvc-sponsors-row { gap: 10px; } .tnvc-sponsors-track { gap: 12px; } .tnvc-sponsor { flex-basis: 100px; height: 54px; } .tnvc-sponsors-nav { width: 30px; height: 30px; } }
/* Logo footer (bản dọc) — trên mobile cột logo rộng hết màn hình, giới hạn cỡ để không chiếm cả màn. */
@media (max-width: 991.98px) { #footer .o_footer_logo img { max-width: 150px; } }

/* Slide ảnh bìa đầu Trang chủ (inc/home-sections.php tnvc_hero_slider_html, site.js). Khung cao cố định theo tỉ lệ
   20:7 (ảnh gợi ý 1920×672), thấp nhất 220px, cao nhất 720px; mọi ảnh cắt vừa khung (object-fit: cover) -> ảnh to nhỏ
   khác nhau cũng không làm trang nhảy khi chuyển. Ảnh tràn hết bề ngang -> không bo góc. */
.tnvc-hero { position: relative; overflow: hidden; background: #1d2530; }
.tnvc-hero-slides { position: relative; width: 100%; aspect-ratio: 20 / 7; min-height: 220px; max-height: 720px; }
.tnvc-hero-slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .8s ease, visibility 0s linear .8s; }
.tnvc-hero-slide.is-active { opacity: 1; visibility: visible; z-index: 1; transition: opacity .8s ease, visibility 0s; }
.tnvc-hero-slide a { display: block; width: 100%; height: 100%; }
#wrap .tnvc-hero-slide img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center; border-radius: 0; }
.tnvc-hero-nav { position: absolute; top: 50%; z-index: 2; margin-top: -17px; background: rgba(0, 0, 0, .25); }
.tnvc-hero-nav.is-prev { left: 16px; } .tnvc-hero-nav.is-next { right: 16px; }
.tnvc-hero-dots { position: absolute; left: 0; right: 0; bottom: 14px; z-index: 2; display: flex; justify-content: center; gap: 8px; }
.tnvc-hero-dots button { width: 10px; height: 10px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .55); box-shadow: 0 0 2px rgba(0, 0, 0, .4); cursor: pointer; transition: background .2s, width .2s; }
.tnvc-hero-dots button.is-active { width: 24px; border-radius: 5px; background: #fff; }
@media (max-width: 575.98px) { .tnvc-hero-nav { display: none; } .tnvc-hero-dots { bottom: 10px; } }

/* Bo góc đồng bộ 5px cho nút + ảnh (yêu cầu PM 24/09/2026 — UI mềm hơn). CSS Odoo ghi thẳng số (.btn 0.4rem, .btn-sm
   0.3rem, .rounded…) chứ không dùng biến -> ghi đè từng lớp. Giữ tròn: nút biểu tượng tròn (tìm kiếm, giỏ hàng — .p-1),
   mũi tên .tnvc-arrow, ảnh đại diện .rounded-circle. Nhóm nút dính nhau (btn-group, input-group) vẫn vuông ở chỗ nối
   vì các quy tắc đó của Bootstrap cụ thể hơn. Logo header/footer và biểu tượng .svg (logo ngân hàng…) không bo. */
.btn, .btn-sm, .btn-lg, .btn-group-sm > .btn, .btn-group-lg > .btn { border-radius: var(--tnvc-radius); }
.btn.rounded-circle:not(.p-1), .btn.rounded-pill { border-radius: var(--tnvc-radius) !important; }
.o_searchbar_form .rounded-start-pill { border-radius: var(--tnvc-radius) 0 0 var(--tnvc-radius) !important; }
.o_searchbar_form .rounded-end-pill { border-radius: 0 var(--tnvc-radius) var(--tnvc-radius) 0 !important; }
.rounded, .rounded-1, .rounded-2, .rounded-3 { border-radius: var(--tnvc-radius) !important; }
.card { border-radius: var(--tnvc-radius); }
#wrap img { border-radius: var(--tnvc-radius); }
#wrap img[src$=".svg"], #wrap img.arrow, #wrap img.emoji, #wrap img.wp-smiley { border-radius: 0; }
.tnvc-yt, .tnvc-slides, .tnvc-card-img, .oe_product_image, .o_record_cover_container { border-radius: var(--tnvc-radius); overflow: hidden; }
.s_blockquote_avatar, #footer .s_blockquote_avatar { border-radius: 50% !important; }
/* Nút/ô tìm kiếm & lọc mà CSS Odoo (theme Mate) ghi cứng 4px !important hoặc 16px — cùng độ cụ thể, nạp sau nên thắng. */
.input-group .btn:first-child, .input-group .btn:last-child,
.input-group-lg > .form-control, .input-group-lg > .form-select, .input-group-lg > .btn,
.input-group-sm > .form-control, .input-group-sm > .form-select, .input-group-sm > .btn { border-radius: var(--tnvc-radius); }
.website_blog .navbar .o_searchbar_form .oe_search_button,
.website_blog .projects-page .projects-page_header .oe_search_button,
.o_wsale_products_page .box-search-products .o_searchbar_form .oe_search_button,
.transaction_table .dropdown .dropdown-toggle { border-radius: var(--tnvc-radius) !important; }
.website_blog .navbar .o_searchbar_form, .website_blog .projects-page .projects-page_header .s_searchbar_input,
.o_wsale_products_page .box-search-products .o_searchbar_form, .transaction_table .search_box, .transaction_table .search_box .search,
.s_mate_transaction .filter_box .search_box .search, .school_site .dropdown .btn, .school_site .datatable .reset-button { border-radius: var(--tnvc-radius); }

/* ===== Khối "Thống kê tài khoản" trang chủ — thiết kế riêng (PM 24/09/2026: khác bản Odoo gốc) =====
   Markup: tnvc-core/templates/transactions-table.php + account-widget-inner.php; JS: site.js initDonationWidget().
   Không còn class s_mate_transaction của Odoo -> giao diện khối nằm hết ở đây. Theo phong cách sẵn có của web (PM:
   tránh kiểu "AI"): nền phẳng, viền mảnh 1px, bo --tnvc-radius (5px), nút Bootstrap của theme (btn-primary…), tiêu đề
   cùng kiểu khối "Hành trình", tab gạch chân; không gradient, không bóng đổ, không nhãn dạng viên thuốc. */
.tnvc-tx { --tx-in: #1f8a4c; --tx-out: #d63c3c; --tx-ink: #1b1b1b; --tx-muted: #6c757d; --tx-line: #e3e5e8; --tx-soft: #f6f7f9;
	padding: 56px 0 64px; background: #fff; color: var(--tx-ink); }
.tnvc-tx p { margin: 0; }
.tnvc-tx-head { text-align: center; margin-bottom: 28px; }
.tnvc-tx-title { margin: 0 0 6px; font-family: "Averta CY", serif; font-weight: 700; font-size: 2.25rem; color: var(--tx-ink); }
.tnvc-tx .tnvc-tx-subtitle { color: var(--tnvc-brand-text); font-size: 1.05rem; margin-bottom: 6px; }
.tnvc-tx-updated { display: inline-flex; align-items: center; gap: 6px; color: var(--tx-muted); font-size: .875rem; }

/* 2 ô tổng */
.tnvc-tx-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; max-width: 820px; margin: 0 auto 28px; }
.tnvc-tx-stat { display: flex; align-items: center; gap: 14px; padding: 18px 22px; border: 1px solid var(--tx-line); border-radius: var(--tnvc-radius); background: #fff; }
.tnvc-tx-stat-icon { flex: none; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--tnvc-radius); background: var(--tx-soft); }
.tnvc-tx-stat.is-in .tnvc-tx-stat-icon { color: var(--tx-in); } .tnvc-tx-stat.is-out .tnvc-tx-stat-icon { color: var(--tx-out); }
.tnvc-tx-stat-label { font-size: .875rem; color: var(--tx-muted); }
.tnvc-tx-stat-value { font-weight: 700; font-size: 1.5rem; line-height: 1.3; }
.tnvc-tx-stat.is-in .tnvc-tx-stat-value { color: var(--tx-in); } .tnvc-tx-stat.is-out .tnvc-tx-stat-value { color: var(--tx-out); }

/* Khung chính + tab quỹ (gạch chân) */
.tnvc-tx-card { border: 1px solid var(--tx-line); border-radius: var(--tnvc-radius); background: #fff; padding: 0 24px 24px; }
.tnvc-tx-tabs { display: flex; overflow-x: auto; scrollbar-width: none; margin: 0 -24px 24px; padding: 0 12px; border-bottom: 1px solid var(--tx-line); }
.tnvc-tx-tabs::-webkit-scrollbar { display: none; }
.tnvc-tx .tab_data { flex: none; padding: 14px 16px 12px; border-bottom: 2px solid transparent; margin-bottom: -1px; color: var(--tx-muted); font-weight: 600; font-size: .95rem; text-decoration: none; white-space: nowrap; cursor: pointer; }
.tnvc-tx .tab_data:hover { color: var(--tx-ink); }
.tnvc-tx .tab_data.active { color: var(--tnvc-brand-dark); border-bottom-color: var(--tnvc-brand); }
.tnvc-tx-card > .tnvc-widget-inner:first-child { padding-top: 24px; }
.tnvc-widget-inner { transition: opacity .2s; }

/* Chuyển khoản + QR */
.tnvc-tx-bank { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 28px; align-items: stretch; }
.tnvc-tx-give { display: flex; flex-direction: column; min-width: 0; }
/* Thông tin tài khoản: hàng "nhãn — giá trị" */
.tnvc-tx-details { margin: 14px 0 0; }
.tnvc-tx-details > div { display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; border-bottom: 1px solid var(--tx-line); font-size: .9rem; }
.tnvc-tx-details dt { font-weight: 400; color: var(--tx-muted); flex: none; }
.tnvc-tx-details dd { margin: 0; font-weight: 600; text-align: right; min-width: 0; }
.tnvc-tx-h { font-weight: 700; font-size: 1.2rem; color: var(--tnvc-brand-dark); margin: 0; }
.tnvc-tx .tnvc-tx-sub { color: var(--tx-muted); margin: 4px 0 18px; font-size: .9rem; }
.tnvc-tx .tnvc-tx-label { font-size: .85rem; color: var(--tx-muted); margin-bottom: 6px; }
.tnvc-tx-account { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 10px 10px 16px; border: 1px solid var(--tx-line); border-radius: var(--tnvc-radius); background: var(--tx-soft); }
.tnvc-tx-account #bank_number { font-weight: 700; font-size: 1.3rem; letter-spacing: .04em; color: var(--tx-ink); }
.tnvc-tx .copy_box { position: relative; }
.tnvc-tx .copy_bank_number { display: inline-flex; align-items: center; gap: 6px; }
.tnvc-tx .copied_box { position: absolute; bottom: calc(100% + 6px); right: 0; padding: 3px 8px; border-radius: var(--tnvc-radius); background: #343a40; color: #fff; font-size: .78rem; white-space: nowrap; }
.tnvc-tx-fund { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: auto; padding-top: 18px; } /* dính đáy cột -> ngang đáy thẻ QR */
.tnvc-tx-fund > div { display: flex; flex-direction: column; gap: 2px; padding: 12px 16px; border: 1px solid var(--tx-line); border-radius: var(--tnvc-radius); }
.tnvc-tx-fund span { font-size: .85rem; color: var(--tx-muted); }
.tnvc-tx-fund strong { font-size: 1.1rem; }
.tnvc-tx-fund .is-in strong { color: var(--tx-in); } .tnvc-tx-fund .is-out strong { color: var(--tx-out); }
.tnvc-tx-qr { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 18px; border: 1px solid var(--tx-line); border-radius: var(--tnvc-radius); background: var(--tx-soft); }
.tnvc-tx-qr-head { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: .9rem; font-weight: 600; color: var(--tnvc-brand-dark); margin-bottom: 12px; }
#wrap .tnvc-tx-qr-head img { height: 18px; width: auto; }
.tnvc-tx-qr-code { width: 100%; max-width: 200px; aspect-ratio: 1; padding: 8px; border: 1px solid var(--tx-line); border-radius: var(--tnvc-radius); background: #fff; margin-bottom: 12px; }
#wrap .tnvc-tx-qr-code img { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: 0; }
.tnvc-tx-qr-foot { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px 14px; width: 100%; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--tx-line); font-size: .75rem; color: var(--tx-muted); }
.tnvc-tx-logos, .tnvc-tx-powered { display: inline-flex; align-items: center; gap: 6px; }
#wrap .tnvc-tx-logos img { height: 14px; width: auto; }
#wrap .tnvc-tx-logos img.tnvc-tx-banklogo { height: 24px; margin: -5px 0; } /* logo VietQR (inc/banks.php) có lề trong suốt */
#wrap .tnvc-tx-powered img { height: 14px; width: auto; }

/* Lịch sử giao dịch */
.tnvc-tx-list { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--tx-line); }
.tnvc-tx-list-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 14px; }
.tnvc-tx-count { color: var(--tx-muted); font-size: .9rem; font-weight: 400; }
.tnvc-tx-count::before { content: "("; } .tnvc-tx-count::after { content: ")"; }
.tnvc-tx-tools { display: flex; flex-wrap: wrap; gap: 8px; }
.tnvc-tx-control { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px; border: 1px solid var(--tx-line); border-radius: var(--tnvc-radius); background: #fff; color: var(--tx-ink); font-size: .875rem; cursor: pointer; }
.tnvc-tx-control.dropdown-toggle::after { display: none; }
.tnvc-tx-control:hover, .tnvc-tx-control[aria-expanded="true"] { border-color: #adb5bd; }
.tnvc-tx .amount_filter_dropdown { min-width: 150px; border-radius: var(--tnvc-radius); }
.tnvc-tx .amount_filter_dropdown .dropdown-item { font-size: .9rem; }
.tnvc-tx .amount_filter_dropdown .dropdown-item.active { background: var(--tnvc-brand); color: #fff; }
.tnvc-tx .filter_date { border-radius: var(--tnvc-radius); }
.tnvc-tx .tnvc-date-clear { border: 0; background: none; color: var(--tnvc-brand-text); font-weight: 600; padding: 4px 10px; }
.tnvc-tx-search { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px; margin: 0; border: 1px solid var(--tx-line); border-radius: var(--tnvc-radius); background: #fff; color: var(--tx-muted); min-width: 240px; }
.tnvc-tx-search:focus-within { border-color: #adb5bd; }
.tnvc-tx-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--tx-ink); font-size: .875rem; }
.tnvc-tx-table { width: 100%; border-collapse: collapse; font-size: .875rem; }
.tnvc-tx-table th { white-space: nowrap; padding: 10px 12px; background: var(--tx-soft); border-bottom: 1px solid var(--tx-line); color: var(--tx-ink); font-weight: 600; }
.tnvc-tx-table td { padding: 11px 12px; border-bottom: 1px solid var(--tx-line); vertical-align: top; }
.tnvc-tx-table tbody tr:hover { background: #fafbfc; }
.tnvc-tx-when { white-space: nowrap; width: 1%; color: var(--tx-ink); }
.tnvc-tx-when small { display: block; color: var(--tx-muted); font-size: .78rem; }
.tnvc-tx-text { color: #454545; word-break: break-word; }
.tnvc-tx-amount { white-space: nowrap; width: 1%; font-weight: 600; font-variant-numeric: tabular-nums; }
.tnvc-tx-amount .is-in { color: var(--tx-in); } .tnvc-tx-amount .is-out { color: var(--tx-out); }
.tnvc-tx-empty { padding: 40px 16px; text-align: center; color: #adb5bd; border: 1px dashed var(--tx-line); border-radius: var(--tnvc-radius); }
.tnvc-tx .tnvc-tx-empty p { margin-top: 8px; color: var(--tx-muted); }
.tnvc-tx-foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
.tnvc-tx-pages { display: flex; align-items: center; gap: 4px; margin: 0; padding: 0; list-style: none; }
.tnvc-tx-pages .page-link { display: flex; align-items: center; justify-content: center; min-width: 34px; height: 34px; padding: 0 8px; border: 1px solid var(--tx-line); border-radius: var(--tnvc-radius); background: #fff; color: var(--tx-ink); font-size: .875rem; text-decoration: none; cursor: pointer; }
.tnvc-tx-pages .page-link:hover { border-color: #adb5bd; }
.tnvc-tx-pages .active .page-link { background: var(--tnvc-brand); border-color: var(--tnvc-brand); color: #fff; }
.tnvc-tx-pages .disabled .page-link { opacity: .45; pointer-events: none; }
.tnvc-tx-pageof { padding: 0 8px; color: var(--tx-muted); font-size: .875rem; }

@media (max-width: 991.98px) {
	.tnvc-tx-bank { grid-template-columns: minmax(0, 1fr); }
	.tnvc-tx-qr { max-width: 420px; width: 100%; margin: 0 auto; }
}
@media (max-width: 767.98px) {
	.tnvc-tx { padding: 44px 0 52px; }
	.tnvc-tx-title { font-size: 1.75rem; }
	.tnvc-tx-stats { grid-template-columns: minmax(0, 1fr); gap: 10px; }
	.tnvc-tx-stat { padding: 14px 16px; }
	.tnvc-tx-stat-value { font-size: 1.3rem; }
	.tnvc-tx-card { padding: 0 16px 16px; }
	.tnvc-tx-tabs { margin: 0 -16px 20px; padding: 0 4px; }
	.tnvc-tx-fund > div { padding: 10px 12px; }
	.tnvc-tx-fund strong { font-size: 1rem; }
	.tnvc-tx-account #bank_number { font-size: 1.1rem; letter-spacing: .02em; }
	.tnvc-tx-tools { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); width: 100%; }
	.tnvc-tx-tools > .dropdown { min-width: 0; }
	.tnvc-tx-tools .tnvc-tx-control, .tnvc-tx #date_filter_box .tnvc-tx-control { width: 100%; min-width: 0; overflow: hidden; justify-content: space-between; } /* Odoo: #date_filter_box .dropdown-toggle{width:unset} */
	.tnvc-tx-control .tnvc-date-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .82rem; }
	.tnvc-tx-search { grid-column: 1 / -1; width: 100%; min-width: 0; }
	/* Bảng -> mỗi giao dịch 1 khối: ngày + số tiền 1 dòng, nội dung dòng dưới */
	.tnvc-tx-table thead { display: none; }
	.tnvc-tx-table, .tnvc-tx-table tbody { display: block; }
	.tnvc-tx-table tr { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 4px 10px; padding: 10px 0; border-bottom: 1px solid var(--tx-line); }
	.tnvc-tx-table td { display: block; padding: 0; border: 0; width: auto; }
	.tnvc-tx-table td.tnvc-tx-what { grid-column: 1 / -1; grid-row: 2; font-size: .85rem; }
	.tnvc-tx-when small { display: inline; margin-left: 6px; }
	.tnvc-tx-foot { justify-content: center; }
}

/* "Đội ngũ quản lý dự án" — Trang chủ, dưới Giới thiệu (yêu cầu khách 01/10/2026; inc/home-sections.php tnvc_team_html).
   Cùng kiểu tiêu đề với "Hành trình"; ảnh tròn viền màu tối thương hiệu; cột ngăn bằng nét đứt mảnh. */
.tnvc-team { background: #fff; padding: 64px 0 72px; }
.tnvc-team-title { font-family: 'Averta CY', serif; font-weight: 700; font-size: 2.25rem; color: #1b1b1b; text-align: center; margin: 0 0 44px; }
.tnvc-team-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); justify-content: center; }
.tnvc-team-grid:has(> :nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tnvc-team-grid:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 340px)); }
.tnvc-team-grid:has(> :only-child) { grid-template-columns: minmax(0, 340px); }
.tnvc-team-item { min-width: 0; padding: 4px 22px 8px; text-align: center; border-left: 1px dashed #dcdde3; }
.tnvc-team-item:nth-child(4n + 1) { border-left: 0; }
.tnvc-team-photo { width: 188px; height: 188px; margin: 0 auto 18px; padding: 5px; border: 3px solid var(--tnvc-brand-dark); border-radius: 50%; background: #fff; }
#wrap .tnvc-team-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; border-radius: 50%; }
.tnvc-team-initial { display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; border-radius: 50%; background: #F5F4F9; color: var(--tnvc-brand-dark); font-family: 'Averta CY', serif; font-weight: 700; font-size: 3.5rem; }
.tnvc-team-name { font-family: 'Averta CY', serif; font-weight: 700; font-size: 1.15rem; line-height: 1.3; color: var(--tnvc-brand-dark); text-transform: uppercase; margin: 0 0 4px; }
.tnvc-team-role { margin: 0 0 12px; font-size: .78rem; letter-spacing: .04em; text-transform: uppercase; color: #6c6f78; }
.tnvc-team-social { display: flex; justify-content: center; gap: 8px; margin-bottom: 14px; }
.tnvc-team-social a { display: inline-flex; width: 32px; height: 32px; align-items: center; justify-content: center; border: 1px solid #dcdde3; border-radius: 50%; color: var(--tnvc-brand-dark); transition: background .2s, color .2s, border-color .2s; }
.tnvc-team-social a:hover, .tnvc-team-social a:focus-visible { background: var(--tnvc-brand); border-color: var(--tnvc-brand); color: #fff; }
.tnvc-team-bio { margin: 0; font-size: .9rem; line-height: 1.6; color: #5a5a5a; }
@media (max-width: 991.98px) {
	.tnvc-team-grid, .tnvc-team-grid:has(> :nth-child(3):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 36px; }
	.tnvc-team-item:nth-child(n) { border-left: 1px dashed #dcdde3; }
	.tnvc-team-item:nth-child(2n + 1) { border-left: 0; }
}
@media (max-width: 767.98px) {
	.tnvc-team { padding: 48px 0 56px; }
	.tnvc-team-title { font-size: 1.75rem; margin-bottom: 32px; }
	.tnvc-team-grid, .tnvc-team-grid:has(> :nth-child(n)) { grid-template-columns: minmax(0, 1fr); row-gap: 32px; }
	.tnvc-team-item:nth-child(n) { border-left: 0; padding: 0 8px; }
	.tnvc-team-item + .tnvc-team-item { padding-top: 32px; border-top: 1px dashed #dcdde3; }
	.tnvc-team-photo { width: 160px; height: 160px; }
}

/* Form "Kết nối và sẻ chia" — cuối Trang chủ, trên chân trang (yêu cầu khách 01/10/2026, bố cục theo mẫu quythientam.com,
   màu/nút/bo góc theo web). Markup form: tnvc-core/inc/contact-form.php (CF7). Dòng báo lỗi đặt absolute dưới ô để nút
   Gửi không nhảy khi lỗi xuất hiện/biến mất (bẫy CF7 đã gặp: phải bấm 2 lần). */
.tnvc-connect { background: #F5F4F9; padding: 64px 0 72px; }
.tnvc-connect-card { max-width: 760px; margin: 0 auto; padding: 28px 32px 32px; background: #fff; border: 1px solid #e3e5e8; border-radius: var(--tnvc-radius); }
.tnvc-connect-title { font-family: 'Averta CY', serif; font-weight: 700; font-size: 1.85rem; color: #1b1b1b; text-align: center; margin: 0 0 24px; }
.tnvc-connect-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px 16px; }
.tnvc-connect-field { min-width: 0; }
.tnvc-connect-field.is-wide { grid-column: 1 / -1; }
.tnvc-connect-field > label { display: block; margin: 0; font-size: .9rem; font-weight: 600; color: #3a3a3a; }
.tnvc-connect-req { color: #d63c3c; }
.tnvc-connect .wpcf7-form-control-wrap { position: relative; display: block; margin-top: 6px; }
.tnvc-connect input.wpcf7-text, .tnvc-connect input.wpcf7-email, .tnvc-connect input.wpcf7-tel, .tnvc-connect textarea.wpcf7-textarea {
	display: block; width: 100%; padding: .6rem .8rem; font: inherit; font-weight: 400; font-size: .95rem; color: #1b1b1b;
	background: #fff; border: 1px solid #d6d8dc; border-radius: var(--tnvc-radius); transition: border-color .2s, box-shadow .2s; }
.tnvc-connect textarea.wpcf7-textarea { height: 104px; resize: vertical; padding-bottom: 1.6rem; }
.tnvc-connect input.wpcf7-form-control:focus, .tnvc-connect textarea.wpcf7-form-control:focus { outline: 0; border-color: var(--tnvc-brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--tnvc-brand) 20%, transparent); }
.tnvc-connect .wpcf7-not-valid { border-color: #d63c3c !important; }
.tnvc-connect .wpcf7-not-valid-tip { position: absolute; left: 0; top: 100%; margin-top: 2px; font-size: .78rem; font-weight: 400; line-height: 1.2; color: #d63c3c; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.tnvc-connect-field.is-wide { position: relative; }
.tnvc-connect-count { position: absolute; right: 10px; bottom: 8px; font-size: .75rem; font-weight: 400; color: #8a8d94; pointer-events: none; }
.tnvc-connect-count.is-full { color: #d63c3c; }
.tnvc-connect-consent { margin: 26px 0 0; font-size: .875rem; line-height: 1.5; color: #3a3a3a; }
.tnvc-connect-consent .wpcf7-list-item { margin: 0; }
.tnvc-connect-consent label { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.tnvc-connect-consent input[type=checkbox] { flex: none; width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--tnvc-brand); }
.tnvc-connect-consent a { color: var(--tnvc-brand-text); text-decoration: underline; }
.tnvc-connect-submit { margin-top: 22px; text-align: center; }
.tnvc-connect-submit .btn { min-width: 200px; padding: .65rem 2rem; font-weight: 600; }
.tnvc-connect-submit .wpcf7-spinner { position: absolute; margin: 12px 0 0 10px; }
.tnvc-connect .wpcf7 form .wpcf7-response-output { margin: 18px 0 0; padding: .6rem .9rem; font-size: .9rem; text-align: center; border-radius: var(--tnvc-radius); }
@media (max-width: 767.98px) {
	.tnvc-connect { padding: 48px 0 56px; }
	.tnvc-connect-card { padding: 22px 18px 24px; }
	.tnvc-connect-title { font-size: 1.5rem; margin-bottom: 18px; }
	.tnvc-connect-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
	.tnvc-connect-submit .btn { width: 100%; }
}

/* Neo của mục menu "Nhà tài trợ" (/#nha-tai-tro) và "Thu chi minh bạch" (/#thu-chi-minh-bach) — task 2 (01/10/2026).
   Header dính (cao 102px desktop / 60px mobile) hiện lại khi cuộn LÊN tới khối -> chừa chỗ để không che tiêu đề khối. */
#nha-tai-tro, #thu-chi-minh-bach { scroll-margin-top: 118px; }
@media (max-width: 991.98px) { #nha-tai-tro, #thu-chi-minh-bach { scroll-margin-top: 76px; } }
/* Menu mobile: Popper (Bootstrap dropdown) đặt mục con "position:absolute" (style inline) -> khung mục con nổi ĐÈ lên các mục
   bên dưới ("Thông tin dự án" che "Nhà tài trợ", "Thu chi minh bạch"). Trong khung menu dọc thì xổ xuống và đẩy mục dưới. */
#top_menu_collapse_mobile .dropdown-menu { position: static !important; inset: auto !important; transform: none !important; margin: 4px 0 8px; }
/* Khung Facebook Page chân trang (iframe 410px) không được lòi khỏi cột ở màn < 1440 — JS site.js đặt lại width cho Facebook vẽ vừa. */
.o_facebook_page > iframe { max-width: 100%; }
/* Menu chính 6 mục (task 2) cần 616px; ở 992–1199px (khung .container 960px) chỉ còn 590px -> cơ chế gốc của Odoo gập "Tin tức"
   vào nút "+". Thu đệm ngang mỗi mục 8px -> .3rem riêng ở khoảng này để hiện đủ 6 mục; >= 1200px giữ nguyên như cũ. */
@media (min-width: 992px) and (max-width: 1199.98px) { #top_menu > li > .nav-link { padding-left: .3rem; padding-right: .3rem; } }