/* semviet-2026.css — skin Editorial Tin Cậy. Marker build: sv2026-alive */
/* Source file — deploy dưới tên semviet-2026.<BUILD>.css (BUILD khớp SEMVIET_2026_BUILD
   trong mu-plugins/semviet-2026-preview.php). Bunny CDN cache path ~1 năm không purge được,
   nên mỗi lần sửa CSS: bump BUILD + deploy filename mới. Hiện tại: b15. */
/* ============ SEMVIET 2026 — Editorial Tin Cậy ============ */
/* Tokens (spec docs/specs/260714-semviet-facelift-2026-editorial-design.md) */
:root {
  --sv2026-marker: alive;
  --sv-bg: #FBFBF9; --sv-ink: #0C1220; --sv-teal: #0E7490; --sv-cyan: #7DE3F4;
  --sv-line: #E7E9E6; --sv-midnight: #0A1226; --sv-muted: #5B6472;
  --sv-radius: 12px;
  --sv-font: "Be Vietnam Pro", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

/* Base */
body { background: var(--sv-bg); color: var(--sv-ink); font-family: var(--sv-font); font-size: 16px; line-height: 1.65; }
h1, h2, h3, h4, .heading-font { font-family: var(--sv-font); font-weight: 800; letter-spacing: -0.015em; color: var(--sv-ink); }
h1 { font-size: clamp(2.2rem, 5vw, 4.5rem); line-height: 1.08; }
h2 { font-size: clamp(1.6rem, 3vw, 2.6rem); line-height: 1.15; }
h3 { font-size: clamp(1.15rem, 2vw, 1.5rem); }
#content a:not(.button) { color: var(--sv-teal); }

/* Kicker/label editorial */
.section-title-normal span { text-transform: uppercase; letter-spacing: .14em; font-size: 12px; font-weight: 700; color: var(--sv-teal); border: 0; }

/* Buttons */
.button, button, input[type="submit"] {
  border-radius: var(--sv-radius); font-weight: 700; box-shadow: none; text-transform: none; letter-spacing: 0;
  transition: transform .18s ease, border-color .18s ease, background .18s ease, color .18s ease;
}
.button.primary, input[type="submit"].wpcf7-submit { background: var(--sv-ink); color: #fff; border: 0; }
.button.primary:hover, input[type="submit"].wpcf7-submit:hover { background: var(--sv-teal); color: #fff; transform: translateY(-2px); }
.button.secondary, .button.is-outline { background: transparent; border: 1.5px solid var(--sv-line); color: var(--sv-ink); }
.button.is-outline:hover, .button.secondary:hover { border-color: var(--sv-teal); color: var(--sv-teal); transform: translateY(-2px); }

/* Forms */
input[type="text"], input[type="email"], input[type="tel"], input[type="url"], textarea, select {
  background: #fff; border: 1px solid var(--sv-line); border-radius: var(--sv-radius);
  box-shadow: none; padding: 12px 14px; color: var(--sv-ink);
}
input[type="text"]:focus, input[type="email"]:focus, input[type="tel"]:focus, textarea:focus {
  border-color: var(--sv-teal); box-shadow: 0 0 0 3px rgba(14,116,144,.12); outline: none;
}
.cf-turnstile { margin: 8px 0 4px; }

/* Card mặc định: border thay shadow */
.box-shadow, .box-shadow-1, .box-shadow-2 { box-shadow: none !important; border: 1px solid var(--sv-line); border-radius: var(--sv-radius); }

/* Reveal (JS IntersectionObserver gắn class .sv-in khi vào view) */
.sv-reveal { opacity: 1; transform: none; }
html.sv-js .sv-reveal { opacity: 0; transform: translateY(20px); transition: opacity .5s ease, transform .5s ease; }
html.sv-js .sv-reveal.sv-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { html.sv-js .sv-reveal { opacity: 1 !important; transform: none !important; transition: none !important; } }

/* ===== Nav + topbar ===== */
/* FL-8 patch: Flatsome Customizer sinh CSS toàn cục `.header-top{background-color:#272da5!important}`
   (theme_mod cũ, không liên quan skin 2026) — !important thắng rule không !important bất kể specificity,
   nên rule dưới đây (ID selector nhưng thiếu !important từ FL-4) luôn thua. Thêm !important để thắng. */
#top-bar { background: var(--sv-midnight) !important; }
#top-bar .top-bar-nav a, #top-bar span, #top-bar a, #top-bar li { color: #C7D0DE; font-size: 12.5px; }
#masthead, .header-main, .header-bottom { background: var(--sv-bg) !important; box-shadow: none; }
.header-main { border-bottom: 1px solid var(--sv-line); }
.header:not(.transparent) .nav > li > a { color: var(--sv-ink); font-weight: 600; font-size: 14.5px; }
.header:not(.transparent) .nav > li > a:hover { color: var(--sv-teal); }
.nav > li.current-menu-item > a { color: var(--sv-teal) !important; box-shadow: inset 0 -2px 0 var(--sv-teal); }
/* Search icon + mobile toggle giữ tương phản */
.header .icon-search, .header .icon-menu { color: var(--sv-ink); }

/* ===== Hero homepage: type-first editorial trên nền ngà =====
   Anchor thật: .sv-hero (class cố định trên section). LƯU Ý QUAN TRỌNG: id UX Builder
   (dạng #section_XXXXXXXX) đổi ngẫu nhiên MỖI LẦN RENDER khi bypass cache (?sv2026=1 luôn
   bypass) — xác nhận qua 3 lần load liên tiếp ra 3 id khác nhau. TUYỆT ĐỐI không neo CSS
   vào id UX Builder trên site này, luôn dùng class .sv-* ổn định (các section khác đã có
   sẵn: sv-services, sv-stats, sv-process, sv-portfolio, sv-pricing, sv-blog, sv-clients,
   sv-cta-final — dùng cho FL-6/7/8).
   Markup hero chứa nhiều inline style (color trắng trên h1/subline, teal trên kicker)
   nên các override màu bắt buộc !important. */
.sv-hero { background: var(--sv-bg) !important; }
.sv-hero .section-bg, .sv-hero .section-bg-overlay {
  background: var(--sv-bg) !important; opacity: 1 !important; background-image: none !important;
}
.sv-hero h1 {
  max-width: 26ch; margin-left: auto; margin-right: auto;
}
.sv-hero .section-title-main {
  color: var(--sv-ink) !important;
  text-transform: none !important; /* Flatsome đặt uppercase trực tiếp trên span này, không kế thừa từ h1 */
  /* span có inline style font-size:175% RELATIVE THEO h1 — phải khóa tuyệt đối bằng !important,
     nếu không nó vẫn phồng theo font-size h1 (175% × 3.6rem = 100px, vỡ layout) */
  font-size: clamp(2rem, 4.2vw, 3.6rem) !important;
  line-height: 1.15 !important;
}
/* divider chấm trang trí cũ dưới h1: Flatsome vẽ qua .section-title b (đã ẩn) VÀ qua
   background-image ::after trên chính .section-title-main (line.png.webp) — phải ẩn cả hai */
.sv-hero .section-title b { display: none; }
.sv-hero .section-title-main::after { display: none !important; }
/* kicker = span trong p đầu tiên; subline = 2nd <p> (nth-of-type bỏ qua div title ở giữa) */
.sv-hero .col-inner > p:first-child span { color: var(--sv-teal) !important; }
.sv-hero .col-inner > p:nth-of-type(2) { color: var(--sv-muted) !important; }
/* Cân khoảng trắng hero (FL-7): min-height:550px + padding 120px/120px (≥550px viewport) đến từ
   scoped <style>#section_XXXXXXXX{...}</style> per-instance mà UX Builder tự sinh (id đổi ngẫu
   nhiên mỗi render, không phải CSS site viết) — verify bằng curl 3 lần liên tiếp ra 3 id khác nhau,
   cùng rule min-height:550px trong @media(min-width:550px). ID selector thắng class thường nên PHẢI
   !important; rule không điều kiện media của class này áp dụng luôn, thắng cả nhánh có/không có
   @media vì !important quyết định trước specificity trong cùng origin. */
.sv-hero {
  min-height: 0 !important;
  padding-top: clamp(48px, 7vw, 96px) !important;
  padding-bottom: clamp(40px, 6vw, 80px) !important;
}

/* ===== Nút trên nền tối (dark sections — dùng cả FL-6/8) ===== */
.dark .button.is-outline, .dark .button.secondary, section[class*="dark"] .button.is-outline {
  border-color: rgba(255,255,255,.35); color: #EDF1F7;
}
.dark .button.is-outline:hover { border-color: var(--sv-cyan); color: var(--sv-cyan); }

/* ===== Service cards (FL-6) =====
   Markup thật: .sv-services .row.sv-service-cards .col-inner (đã có inline
   background-color:#ffffff + sibling .is-border với border rgba(0,0,0,.06) — không đụng .is-border,
   chỉ vẽ border thật trên .col-inner, nằm chồng lên nhìn không khác biệt). Heading dùng <h3>
   (không có h4 trong markup thật, giữ selector h3 làm chính). */
.sv-services .col-inner { border: 1px solid var(--sv-line); border-radius: var(--sv-radius); background: #fff; padding: 26px 22px; box-shadow: none !important; transition: transform .18s ease, border-color .18s ease; }
.sv-services .col-inner:hover { transform: translateY(-3px); border-color: var(--sv-teal); }
.sv-services .col-inner img { max-width: 84px; }
.sv-services h3 { margin-top: 12px; }

/* ===== Counter band: midnight + số cyan (FL-6) =====
   .sv-stats.dark có scoped <style>#section_XXXXXXXX{background-color:#272da5}</style> per-instance
   (id đổi ngẫu nhiên mỗi render) — cần !important để thắng. .sv-counter là <h2 style="font-size:280%">
   (inline) — font-size cần !important để thắng inline. Label chỉ là <p style="color:rgba(255,255,255,.75)">
   thường (không có class .sv-counter-label trong markup thật) — inline đã đủ tương phản trên nền midnight,
   không cần override. */
.sv-stats { background: var(--sv-midnight) !important; }
.sv-stats .section-bg, .sv-stats .section-bg-overlay { background: var(--sv-midnight) !important; background-image: none !important; }
.sv-stats .sv-counter { color: var(--sv-cyan) !important; font-weight: 800; font-size: clamp(1.8rem, 3vw, 2.6rem) !important; }

/* ===== Section headings: đồng bộ editorial (fix heading khổng lồ, FL-6) =====
   Text thật là Title Case gõ tay ("Giải Pháp Digital Toàn Diện..."), nhưng ẢNH CHỤP b9 lộ ra
   heading vẫn hiện ALL CAPS — do rule gốc Flatsome `.section-title span{text-transform:uppercase}`
   (thấy trong bundle combine LiteSpeed) áp lên .section-title-main (nó là span con của .section-title).
   Rule dưới có specificity cao hơn nên thắng kể cả không !important cho text-transform; font-size/line-height
   vẫn cần !important vì .section-title-main có inline style="font-size:140%". */
#content .section .section-title-main { font-size: clamp(1.5rem, 2.6vw, 2.2rem) !important; line-height: 1.18 !important; text-transform: none; }
.section-title-container { margin-bottom: 14px; }

/* ===== Logo: che nền trắng của ảnh logo trên nav ngà (FL-6) ===== */
#logo img { mix-blend-mode: multiply; }

/* ===== Quy trình 5 bước (FL-7) =====
   Markup thật KHÁC bản gốc dự kiến: .sv-process .sv-step .col-inner không có border/.icon-box-img —
   phần tử đầu tiên trong .col-inner là <div> INLINE STYLE (border-radius:50%, gradient
   #272da5→#6366f1, 64x64px) bọc số thứ tự; heading là <h4> (không có h3/h5 trong markup thật).
   Đổi gradient indigo cũ (không thuộc token nào) thành mực đặc + viền teal — "số editorial" đúng
   token thay vì blob gradient sáng lệch tông với palette ngà/teal. !important bắt buộc để thắng
   inline background. */
.sv-process .sv-step .col-inner > div:first-child {
  background: var(--sv-ink) !important;
  border: 2px solid var(--sv-teal) !important;
}
.sv-process .sv-step h4 { font-size: 1.05rem; font-weight: 700; margin-top: 14px; }
.sv-process .sv-step .col-inner p { color: var(--sv-muted); }

/* ===== Gallery mẫu web (homepage embed) + blog cards (FL-7) =====
   Verify markup thật homepage: .sv-portfolio dùng product grid Flatsome/WooCommerce
   (.product-small.box .box-image + .box-text .name.product-title) — selector khớp đúng, không đoán.
   .sv-blog dùng .box.box-blog-post .box-image + .box-text-inner.blog-post-inner h5.post-title +
   p.from_the_blog_excerpt — class .box-excerpt trong bản nháp gốc không tồn tại trong markup thật,
   đã bỏ (dead selector, theo đúng nguyên tắc dọn code chết như FL-6). */
.sv-portfolio .box-image, .sv-blog .box-image { border-radius: var(--sv-radius); overflow: hidden; border: 1px solid var(--sv-line); }
.sv-portfolio .box-text, .sv-blog .box-text { padding: 14px 6px; }
.sv-blog .post-item h5, .sv-portfolio .box-text .name { font-weight: 700; font-size: 15.5px; }
.sv-blog .from_the_blog_excerpt { color: var(--sv-muted); font-size: 13.5px; }

/* ===== Gallery: trang lưu trữ /kho-giao-dien/ (FL-7) =====
   Trang này KHÔNG có class .sv-portfolio — verify curl xác nhận đây là WooCommerce shop archive
   (body.woocommerce-shop), post-type-archive-product thật (không phải taxonomy term riêng), đã có
   sẵn <style> nội tuyến riêng cho trang (box-shadow đổ bóng nặng #0000001c + nút hover 2 màu
   .nut-live-demo xanh lá/xanh dương "Xem Demo"/"Đặt Mua"). Chỉ polish khung ảnh về border-token,
   bỏ đổ bóng — KHÔNG đụng .nut-live-demo (rủi ro regression cao trên tính năng hover-CTA đang hoạt
   động, ngoài scope FL-7 vốn chỉ xin "gallery mẫu web"). !important cần vì trang có sẵn rule
   box-shadow/border-radius specificity tương đương nạp trước trong <head>. */
body.woocommerce-shop .product-small.box .box-image { border-radius: var(--sv-radius) !important; border: 1px solid var(--sv-line) !important; box-shadow: none !important; }
body.woocommerce-shop .product-small.box { box-shadow: none !important; border-radius: var(--sv-radius) !important; }
body.woocommerce-shop .product-small .name.product-title { font-weight: 700; font-size: 15.5px; }

/* ===== Pricing — 2 DẠNG KHÁC NHAU thật sự tồn tại, verify curl cả 2 (FL-7) =====
   (1) Section .sv-pricing TRÊN HOMEPAGE: phát hiện qua screenshot round 1 (không có trong bản nháp
   gốc — bản nháp chỉ nhắm .sv-pricing table, KHÔNG match gì vì section này không có <table>). Markup
   thật là Flatsome UX Builder Pricing Table element: .pricing-table-wrapper > .pricing-table.
   ux_price_table (class box-shadow-2 có sẵn → rule .box-shadow-2 gốc ở trên (FL-3 tokens) đã tự
   chuyển shadow→border token, không lặp lại), .pricing-table-header > .title + .price.is-xxlarge,
   .pricing-table-items .bullet-item. Card gói nổi bật có thêm class .featured-table.
   (2) Trang /bang-gia-thiet-ke-website/: KHÔNG có wrapper .sv-pricing (article thường), bảng là
   <table> THUẦN không class, <thead><th>/<tbody><td> plain — dùng selector article table riêng biệt
   dạng (2), không liên quan gì tới dạng (1). */
/* .title và .price là 2 div CON có background RIÊNG từ theme default (--primary-color cũ #272da5
   cho .title, sắc xanh khác cho .price) — che mất hoàn toàn background của .pricing-table-header cha
   (chỉ còn lộ vệt padding rất mỏng, xác nhận qua crop screenshot round đầu). Phải override thẳng
   vào .title/.price mới thấy đổi màu thật, !important để thắng biến --primary-color. */
.sv-pricing .pricing-table-header { border-radius: var(--sv-radius) var(--sv-radius) 0 0; overflow: hidden; }
.sv-pricing .pricing-table-header .title, .sv-pricing .pricing-table-header .price { background: var(--sv-midnight) !important; color: #fff !important; }
.sv-pricing .pricing-table.featured-table .pricing-table-header .title,
.sv-pricing .pricing-table.featured-table .pricing-table-header .price { background: var(--sv-teal) !important; }
.sv-pricing .bullet-item { text-align: left; font-size: 14px; }

article table { border-collapse: collapse; width: 100%; }
article th { background: var(--sv-midnight); color: #fff; padding: 12px 14px; text-align: left; }
article td { border: 1px solid var(--sv-line); padding: 11px 14px; }
article tr:nth-child(even) td { background: #F4F5F2; }

/* ===== CTA band cuối trang: midnight, headline lớn, nút cyan (FL-8) =====
   Anchor thật: .sv-cta-final (class ổn định, dùng chung FL-6/7/8 — xem comment dòng ~72).
   Section có <style>#section_XXXXXXXX{background-color:#0f172a}</style> scoped per-instance (id đổi
   ngẫu nhiên mỗi render, cùng cơ chế đã gặp ở .sv-hero/.sv-stats) — cần !important để thắng.
   h2/span title và p subline ĐÃ có inline style color trắng/trắng-mờ sẵn trong markup thật (do UX Builder
   ghi trực tiếp), rule màu ở đây chỉ là fallback phòng khi nội dung đổi mất inline style.
   2 nút CTA: "Liên Hệ Ngay" mang class .button.secondary.is-shade — ĐÃ được phủ bởi rule
   `.dark .button.secondary` có sẵn (dòng ~110), không cần đụng thêm. "Gọi: ..." mang class .button.primary
   — đổi nền cyan theo yêu cầu thiết kế. (Điều tra thêm: file rời wp-content/themes/web-design/
   semviet-custom-style.css có rule `.sv-cta-final{background:...#272da5...!important}` tưởng sẽ đụng độ,
   nhưng file này KHÔNG được enqueue ở đâu (semviet-functions.php chứa nó là file inert, functions.php
   không require) — xác nhận qua rendered HTML không có <link> nào trỏ tới, nên an toàn bỏ qua.) */
.sv-cta-final { background: var(--sv-midnight) !important; }
.sv-cta-final .section-bg, .sv-cta-final .section-bg-overlay { background: var(--sv-midnight) !important; background-image: none !important; }
.sv-cta-final h2, .sv-cta-final h3 { color: #fff; }
.sv-cta-final p { color: #A9B4C6; }
.sv-cta-final .button.primary { background: var(--sv-cyan) !important; color: var(--sv-midnight) !important; border: 0 !important; }
.sv-cta-final .button.primary:hover { background: #fff !important; color: var(--sv-midnight) !important; }

/* ===== Footer: midnight nhạt, gọn (FL-8) =====
   Markup thật KHÔNG có class .footer-widgets (không phải widget-area Flatsome chuẩn) — đây là 2
   <section class="footer-section dark"> do UX Builder dựng bên trong <footer class="footer-wrapper">,
   mỗi section có ảnh nền + overlay scoped riêng (cùng pattern .sv-hero/.sv-stats, cần tắt cả 2 lớp).
   Heading chỉ là <h3> trần (không có .widget-title). Nhiều <a>/<span> trong danh sách dịch vụ có inline
   style="color:#c0c0c0" — override cần !important để thắng. .absolute-footer là class Flatsome thật,
   đã xác nhận có trong markup. */
.footer-wrapper .footer-section { background: #0D1730 !important; }
.footer-wrapper .footer-section .section-bg,
.footer-wrapper .footer-section .section-bg-overlay { background: #0D1730 !important; background-image: none !important; opacity: 1 !important; }
.footer-wrapper .footer-section h3 { color: #fff; font-size: 14px; }
.footer-wrapper .footer-section,
.footer-wrapper .footer-section a,
.footer-wrapper .footer-section p,
.footer-wrapper .footer-section li,
.footer-wrapper .footer-section span,
.footer-wrapper .footer-section div { color: #97A3B8 !important; font-size: 13.5px; }
.footer-wrapper .footer-section a:hover { color: var(--sv-cyan) !important; }
.absolute-footer { background: var(--sv-midnight) !important; color: #7C8798; }
.absolute-footer a { color: #97A3B8; }

/* ===== Patch: "khối xanh dương lớn dưới cùng footer" (fl7 flag, xác nhận qua screenshot /kho-giao-dien/)
   Root cause KHÔNG phải section trang trí và KHÔNG do CSS/JS skin 2026 tạo ra: Flatsome Customizer sinh
   CSS toàn cục `html{background-color:#1e73be}` (theme_mod màu nền site cũ, xác nhận có mặt trong rendered
   HTML mọi trang qua curl). Khi <body> ngắn hơn viewport (VD trang /kho-giao-dien/ chỉ có 7 sản phẩm),
   browser dùng background của <html> để tô phần canvas còn lại — lộ dải xanh dương #1e73be khổng lồ dưới
   footer trên MỌI trang có nội dung ngắn, không riêng gallery. Fix: khớp nền canvas với --sv-bg (nền ngà
   dùng cho <body> toàn skin) để "ẩn" khoảng trống thay vì lộ màu cũ — không thêm band trang trí mới. */
html { background-color: var(--sv-bg) !important; }

/* ===== Patch: nền indigo cũ tồn đọng dưới banner /kho-giao-dien/ (FL-9, tồn đọng FL-8) =====
   Verify: curl markup thật → wrapper banner là <div class="shop-page-title category-page-title
   dark featured-title page-title">, h1 tiêu đề dùng LẠI CÙNG TÊN CLASS "shop-page-title" (2 phần
   tử khác nhau chia sẻ 1 class — không được viết chung 1 selector cho cả hai). Puppeteer
   getComputedStyle(.featured-title).backgroundColor = rgb(39,45,165) = #272da5 (Flatsome
   --fs-color-primary customizer cũ) — ảnh nền thật (.title-bg, PHẦN TỬ CON KHÁC, không phải
   .featured-title, url Lien-he-bg-1.jpg, background-size:cover) che phủ nên bình thường không lộ
   indigo, nhưng vẫn là "tồn đọng" nếu ảnh lỗi tải/mạng chậm hoặc đổi ảnh sau này. h1 đã trắng sẵn
   (Flatsome .dark utility thắng token global h1{color:var(--sv-ink)}, verify computed color =
   rgb(255,255,255)) — không cần override thêm màu chữ. */
.featured-title { background-color: var(--sv-midnight) !important; }

/* ===== Mobile pass (FL-9) =====
   Phương pháp: Puppeteer + iPhone UA, viewport 390x844 isMobile:true, prefers-reduced-motion:reduce
   (bỏ qua .sv-reveal opacity:0 chờ IntersectionObserver — xem semviet-2026.js dòng 4-12) + auto-scroll
   trước khi chụp (trigger .sv-counter đếm số + ảnh lazy-load). Đã tự sửa 2 lỗi phương pháp chụp ban đầu:
   (1) headless Chrome CLI `--window-size` KHÔNG set đúng CSS viewport trong bản Chrome này (viewport
   thực tế fallback ~800px, ảnh 390px chỉ là crop) — gây ảo giác "chữ hero bị cắt" không có thật, xác
   nhận sai qua Puppeteer page.setViewport thật (scrollWidth=390, không tràn); (2) full-page screenshot
   không tự trigger scroll thật nên mọi .sv-reveal section ẩn trắng — dùng prefers-reduced-motion +
   auto-scroll để lấy trạng thái cuối cùng thật.
   Kết quả: 7 trang (/, /sv-2026-home-preview/, /thiet-ke-web/, /bang-gia-thiet-ke-website/,
   /kho-giao-dien/, /lien-he/, /en/home/) đều scrollWidth=390 (không horizontal overflow), hero h1
   wrap đúng ≤2 dòng, service cards 1 cột sạch, counter 2x2 đọc được, pricing card/table không tràn,
   form + Turnstile /lien-he/ vừa khung. KHÔNG tìm thấy lỗi CSS mobile cần media query — không thêm
   fix mù. Quan sát ngoài phạm vi CSS (báo team lead, không sửa ở đây): (a) nội dung /bang-gia-thiet-ke-website/
   phần thân bài mất dấu tiếng Việt hoàn toàn (heading vẫn có dấu) — lỗi content/copy, không phải CSS;
   (b) client-logos + counter chỉ hiện đúng giá trị sau khi có sự kiện scroll/intersection thật — hành vi
   JS thiết kế đúng (semviet-2026.js), không phải bug. */