/* ----------------------------------------------------------------
	tokens.css — BRAND CONTROL PANEL (pa-4 · demo op-interior / Canvas One Page + Revolution Slider)
	Nạp SAU custom.css → ghi đè, KHÔNG sửa file demo.
	An Phát 43 — role=navy · head=Archivo · body=Inter (khớp chooser).
	Trong chooser: styleDemos() bơm --cnvs-themecolor = DEEP role + --cnvs-primary-font/-body-font.
	File này = fallback standalone (chooser KHÔNG bơm --ap-cta → CTA lấy ở đây).

	pa-4 dựng trên nền P1(action)+P6(font) hoàn chỉnh → ĐÚNG TỪ ĐẦU (như pa-5), KHÔNG retrofit.
	- P1: CTA nền sáng = --ap-cta (#c2410c) + chữ trắng; CTA nền đậm = --ap-cta-lift. KHÔNG bake #e8631c.
	- P6: hero (RS caption heading) theo --cnvs-primary-font @700. KHÔNG Playfair/serif.

	ĐẶC THÙ op-interior:
	- Header full-header transparent-header dark → phủ hero; sticky đổi not-dark (như pa-5).
	- Hero = Revolution Slider #welcome (fullscreen). Caption heading gốc inline font-family:Playfair
	  (đã strip ở mk_preview) → set head-font var. Sub/desc = body-font var.
	- CTA = nút OUTLINE (.button-border): nền sáng → border+chữ --ap-cta; .button-light nền đậm → --ap-cta-lift.
	  (Khác pa-2/3/5 nút solid: outline set border-color+color, KHÔNG --cnvs-btn-color bg.)
	- Services: col-lg-8 chứa 6 .fbox-dark (chữ sáng) nhưng nền section trắng → lót nền tối (AA).
	- op-gradient-icon (6 icon dịch vụ) = gradient cầu vồng trang trí demo — GIỮ nguyên (đọc rõ trên nền tối).
	  Off-brand nhẹ; muốn theo màu brand → 1 rule, để mở (out-of-scope P3).
-----------------------------------------------------------------*/

:root {
	--cnvs-themecolor: #1c3d6e;
	--cnvs-themecolor-rgb: 28, 61, 110;
	--cnvs-body-bg: #FFF;

	/* P6 · head=Archivo (h1-h6 + hero) · body=Inter. Chooser đè bằng font đang chọn. */
	--cnvs-primary-font: 'Archivo', system-ui, sans-serif;   /* head */
	--cnvs-body-font: 'Inter', system-ui, sans-serif;        /* body */

	/* P1 · action bound-to-role (navy) — WCAG 1.4.11 ≥3.0, chữ nút 1.4.3 ≥4.5 */
	--ap-cta: #c2410c;               /* nút hành động, nền sáng */
	--ap-cta-rgb: 194, 65, 12;
	--ap-cta-ink: #ffffff;           /* trắng/#c2410c = 5.18 PASS */
	--ap-cta-lift: #f05211;          /* nút trên nền đậm */
	--ap-cta-lift-ink: #1e1e1e;      /* #1e1e1e/#f05211 = 5.36 PASS */
}

/* ================================================================
   HERO · Revolution Slider #welcome caption fonts (P6)
   Caption đã strip inline font-family ở mk_preview → set qua var.
   heading (a.tp-caption / .tp-linkmod, 45px) = head font @700 (KHÔNG Playfair/serif);
   sub + desc (.tp-caption div) = body font.
   ================================================================ */
#welcome .tp-caption { font-family: var(--cnvs-body-font) !important; }
#welcome a.tp-caption,
#welcome .tp-caption.tp-linkmod {
	font-family: var(--cnvs-primary-font) !important;
	font-weight: 700 !important;
}

/* ================================================================
   CTA · nút OUTLINE (.button-border) bound-to-role (P1)
   Canvas .button-border = nền trong suốt + border/chữ. Đổi border-color + color (KHÔNG bg).
   ================================================================ */
/* nền sáng (portfolio "Xem thêm dự án" · contact "Gửi liên hệ") → --ap-cta */
.button.button-border:not(.button-light) {
	border-color: var(--ap-cta) !important;
	color: var(--ap-cta) !important;
}
.button.button-border:not(.button-light):hover {
	background-color: var(--ap-cta) !important;
	color: var(--ap-cta-ink) !important;   /* trắng/#c2410c = 5.18 */
}
/* nền đậm (.button-light: testimonial band "Báo giá" · footer "Đăng ký") → --ap-cta-lift */
.button.button-border.button-light {
	border-color: var(--ap-cta-lift) !important;
	color: var(--ap-cta-lift) !important;   /* #f05211/nền tối ≈ 5.4 */
}
.button.button-border.button-light:hover {
	background-color: var(--ap-cta-lift) !important;
	color: var(--ap-cta-lift-ink) !important;   /* #1e1e1e/#f05211 = 5.36 */
}

/* ================================================================
   §AA · SỬA CẶP CHỮ/NỀN CANVAS DEFAULT < 4.5 (gate G2 đo)
   ================================================================ */
/* HERO NAV underlay — nav one-page = <nav.custom-hero-nav> (position:absolute) NẰM TRONG #slider,
   chữ #eee. RS render ảnh slide ở SIBLING (.rev-slidebg) → static scan đo nav trên #wrapper trắng
   = 1.16 (FALSE-POS, y hệt class transparent-header của pa-5). Lót #slider.slider-element nền tối
   → nav effBg thấy nền tối = PASS; ảnh RS phủ lên (opaque) nên KHÔNG đổi hình; RS lỗi → hero tối,
   nav vẫn đọc. (KHÔNG dùng #header — nav không nằm trong #header ở demo này.) */
.slider-element { background-color: #101a30 !important; }

/* DARK SECTIONS deepen — Canvas .dark mặc định = #343a40 (xám, yếu). Nút OUTLINE .button-light
   chữ #f05211 trên #343a40 = 3.24 FAIL. Đẩy về #101a30 (Lbg≈0.011 ≤ 0.0159) → #f05211 = 4.88 PASS.
   Ảnh parallax phủ testimonials nên không đổi hình; chữ sáng nền sâu hơn → tương phản cao hơn. */
.section.dark { background-color: #101a30 !important; }
#footer { background-color: #101a30 !important; }

/* Services: 6 .fbox-dark (chữ sáng) nằm trong col-lg-8 nền trắng → lót nền tối để chữ đọc AA + sống
   khi ảnh main-bg (cột trái) đổi. Cột ảnh trái (col-lg-4) tự có background:url() phủ lên. */
#section-services .col-lg-8 { background-color: #101a30 !important; }

/* Team role: Canvas .team-title span = #999 trên thẻ team nền trắng = 2.85 FAIL. Đậm về #6c6c6c
   (trên trắng ≈ 5.2 PASS). (Portfolio category #999 nằm trong overlay opacity:0 → ẩn, gate bỏ qua.) */
.team-desc .team-title span { color: #6c6c6c !important; }

/* Services h3: Canvas .fbox-dark KHÔNG tự đổi chữ sáng → h3 giữ #212529 (dark) trên panel tối #101a30
   = 1.12 FAIL. Panel tối là chủ ý (icon rainbow op-gradient-icon nổi trên nền tối) → ép h3 sáng. */
#section-services .col-lg-8 .fbox-content h3 { color: #f5f5f5 !important; }

/* Blog category (.before-heading.fst-normal) = #6c757d trên nền blog #f8f9fa = 4.449 (sát ngưỡng) → đậm nhẹ. */
.before-heading.fst-normal { color: #676d73 !important; }

/* Map config-note: Canvas JS inject <div.alert.alert-warning>"Set gmapAPI in js/functions.js..."</div>
   vào .gmap khi map KHÔNG init (offline / thiếu Google API key). Là placeholder LỖI DEV, không phải
   nội dung brand → ẩn. Production có API key → map load bình thường, note không xuất hiện. */
.gmap .alert { display: none !important; }

/* ================================================================
   §8 · VIETNAMESE LAYOUT GUARDS — dấu tiếng Việt cao, dễ tràn/chồng dòng.
   ================================================================ */
.custom-hero-nav .one-page-menu > li > a { white-space: nowrap; }
h1, h2, h3, h4, h5,
.heading-block h2, .heading-block h3 { line-height: 1.3; }
.feature-box .fbox-content h3,
.feature-box p,
.portfolio-desc h3, .portfolio-desc span,
.team-desc .team-title h4, .team-desc .team-title span,
.entry-title, .entry-title h3,
.testimonial p, .testimonial .testi-meta,
.footer-widgets-wrap .widget h4,
address, #copyrights { overflow-wrap: anywhere; }
.feature-box .fbox-icon { flex-shrink: 0; }