/* Solatech Corp 02 — Visionary (dark corporate) */

:root {
	--d-bg:#0a1020; --d-bg2:#0e1730; --d-card:#131f3c; --d-card2:#182548;
	--d-line:rgba(255,255,255,.09); --d-line2:rgba(255,255,255,.14);
	--d-primary:#3b82f6; --d-primary-d:#2563eb; --d-primary-soft:rgba(59,130,246,.14);
	--d-white:#eef3fb; --d-text:#9fb0cc; --d-muted:#6c7d9e;
	--d-radius:14px; --d-shadow:0 20px 50px rgba(0,0,0,.4);
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--d-bg); color:var(--d-text); line-height:1.6;
	font-family:"Roboto",-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Arial,sans-serif; }
body.admin-bar .site-header { top:32px; }
@media(max-width:782px){ body.admin-bar .site-header { top:46px; } }
a { color:var(--d-primary); text-decoration:none; }
img { max-width:100%; }
.container { max-width:1200px; margin:0 auto; padding:0 28px; }
@media(max-width:600px){ .container { padding:0 18px; } }
section[id] { scroll-margin-top:88px; }

/* Buttons */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:9px; padding:13px 26px;
	border-radius:9px; font-weight:700; font-size:14px; cursor:pointer; border:1.5px solid transparent; transition:.18s; white-space:nowrap; line-height:1; }
.btn-primary { background:var(--d-primary); color:#fff; }
.btn-primary:hover { background:var(--d-primary-d); color:#fff; transform:translateY(-2px); box-shadow:0 12px 28px rgba(59,130,246,.4); }
.btn-glass { background:rgba(255,255,255,.06); border-color:var(--d-line2); color:var(--d-white); }
.btn-glass:hover { background:rgba(255,255,255,.12); color:#fff; }
.btn-white { background:#fff; color:var(--d-bg); }
.btn-white:hover { transform:translateY(-2px); color:var(--d-bg); }
.btn-block { width:100%; }
.play-ico { display:grid; place-items:center; width:24px; height:24px; border-radius:50%; background:rgba(255,255,255,.14); color:#fff; }

/* Headings */
.eyebrow { display:inline-flex; align-items:center; gap:7px; font-size:12px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--d-primary); }
.eyebrow-c { justify-content:center; }
.sec-title { font-size:clamp(26px,3.1vw,36px); line-height:1.2; letter-spacing:-.01em; color:var(--d-white); font-weight:800; margin:12px 0 0; }
.sec-sub { color:var(--d-text); margin:14px auto 0; max-width:560px; font-size:15px; }
.section { padding:88px 0; }
.section-alt { background:var(--d-bg2); }
.sec-head-center { text-align:center; max-width:640px; margin:0 auto 48px; }

/* Header */
.site-header { position:sticky; top:0; z-index:1000; background:rgba(10,16,32,.72); backdrop-filter:blur(14px); border-bottom:1px solid var(--d-line); }
.header-inner { display:flex; align-items:center; gap:24px; height:74px; }
.logo { display:flex; align-items:center; gap:10px; }
.logo-mark { display:grid; place-items:center; width:40px; height:40px; border-radius:11px; background:linear-gradient(135deg,#3b82f6,#1e40af); color:#fff; }
.logo-text strong { font-size:19px; letter-spacing:.02em; color:var(--d-white); font-weight:800; }
.main-nav { display:flex; gap:28px; margin-left:20px; flex:1; }
.main-nav a { color:var(--d-text); font-size:14.5px; font-weight:600; padding:6px 0; position:relative; }
.main-nav a:hover, .main-nav a.current { color:#fff; }
.main-nav a.current::after { content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px; background:var(--d-primary); border-radius:2px; }
.header-right { display:flex; align-items:center; gap:14px; }
.nav-toggle { display:none; position:relative; width:44px; height:44px; border:1px solid var(--d-line2); border-radius:12px; background:rgba(255,255,255,.05); cursor:pointer; }
.nav-toggle span { position:absolute; left:50%; top:50%; width:20px; height:2.4px; margin-left:-10px; background:#fff; border-radius:3px; transition:.3s; }
.nav-toggle span:nth-child(1){ transform:translateY(-6px); }
.nav-toggle span:nth-child(3){ transform:translateY(6px); }
.nav-toggle.active span:nth-child(1){ transform:rotate(45deg); }
.nav-toggle.active span:nth-child(2){ opacity:0; }
.nav-toggle.active span:nth-child(3){ transform:rotate(-45deg); }

/* Mobile menu */
.mobile-menu { display:none; }
.mobile-backdrop { display:none; position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:999; }
.mobile-backdrop.show { display:block; }

/* Hero — ảnh thành phố đêm làm nền toàn khối */
.hero { position:relative; overflow:hidden; padding:150px 0 84px; background:var(--d-bg); }
.hero-bg { position:absolute; inset:0; z-index:0; pointer-events:none;
	background:url("../images/hero-city.webp") center right / cover no-repeat #0a1020; }
.hero::after { content:""; position:absolute; inset:0; z-index:1;
	background:linear-gradient(90deg, rgba(10,16,32,.82) 0%, rgba(10,16,32,.45) 42%, rgba(10,16,32,.05) 75%),
		linear-gradient(180deg, rgba(10,16,32,.35) 0%, rgba(10,16,32,0) 30%, rgba(10,16,32,.55) 78%, var(--d-bg) 100%); }
.hero-inner { position:relative; z-index:2; }
.hero-inner .eyebrow { margin-bottom:16px; }
.hero-inner h1 { font-size:clamp(32px,4.8vw,54px); line-height:1.12; letter-spacing:-.02em; color:#fff; font-weight:800; margin:0 0 18px; max-width:760px; }
.hero-inner h1 span { color:var(--d-primary); }
.hero-sub { color:#b8c6dd; font-size:16.5px; max-width:520px; margin:0 0 28px; }
.hero-actions { display:flex; gap:14px; flex-wrap:wrap; }
/* Stats row — thẻ kính mờ nổi trên ảnh hero */
.stats-row { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:64px; }
.stat-item { background:rgba(13,21,42,.55); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); border:1px solid var(--d-line2); border-radius:14px; padding:24px 20px; text-align:center; }
.stat-item strong { display:block; font-size:34px; font-weight:800; color:var(--d-primary); line-height:1; }
.stat-item small { display:block; margin-top:8px; color:var(--d-text); font-size:13.5px; }

/* Dịch vụ */
.svc-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.svc-card { background:var(--d-card); border:1px solid var(--d-line); border-radius:var(--d-radius); padding:28px 24px; transition:.18s; }
.svc-card:hover { border-color:var(--d-primary); transform:translateY(-4px); box-shadow:var(--d-shadow); }
.svc-ico { display:grid; place-items:center; width:56px; height:56px; border-radius:14px; background:var(--d-primary-soft); color:var(--d-primary); margin-bottom:18px; transition:.18s; }
.svc-card:hover .svc-ico { background:var(--d-primary); color:#fff; }
.svc-card h3 { font-size:17px; color:var(--d-white); margin:0 0 8px; }
.svc-card p { font-size:14px; color:var(--d-text); margin:0 0 16px; line-height:1.65; }
.svc-more { display:inline-flex; align-items:center; gap:6px; font-size:13.5px; font-weight:700; color:var(--d-primary); }
.svc-card:hover .svc-more svg { transform:translateX(4px); }
.svc-more svg { transition:.18s; }

/* Giới thiệu */
.about-grid { display:grid; grid-template-columns:.9fr 1.1fr; gap:56px; align-items:center; }
.about-visual { position:relative; }
.about-img { aspect-ratio:4/3.4; border-radius:20px; background:linear-gradient(150deg,#1a2a52,#0e1730); border:1px solid var(--d-line); display:grid; place-items:center; color:var(--d-primary); }
.about-stat { position:absolute; right:-16px; bottom:-16px; background:var(--d-primary); color:#fff; border-radius:14px; padding:16px 20px; box-shadow:0 14px 32px rgba(59,130,246,.4); }
.about-stat strong { display:block; font-size:26px; line-height:1; }
.about-stat small { font-size:12px; opacity:.85; }
.about-copy .sec-title { margin:12px 0 16px; }
.about-copy > p { color:var(--d-text); margin:0 0 18px; }
.about-list { list-style:none; padding:0; margin:0 0 24px; }
.about-list li { display:flex; align-items:center; gap:10px; padding:6px 0; color:#c3d0e6; font-size:14.5px; }
.about-list li svg { color:var(--d-primary); flex:0 0 auto; }

/* Dự án */
.proj-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.proj-card { display:block; background:var(--d-card); border:1px solid var(--d-line); border-radius:var(--d-radius); overflow:hidden; transition:.18s; }
.proj-card:hover { border-color:var(--d-primary); transform:translateY(-4px); box-shadow:var(--d-shadow); }
.proj-thumb { aspect-ratio:16/9; background:linear-gradient(150deg,#1e3a8a,#0e1730); display:grid; place-items:center; color:#93b4f5; }
.proj-body { padding:18px 20px; }
.proj-cat { display:inline-block; font-size:12px; font-weight:700; color:var(--d-primary); background:var(--d-primary-soft); padding:3px 10px; border-radius:6px; }
.proj-body h3 { font-size:16.5px; color:var(--d-white); margin:10px 0 0; line-height:1.35; }

/* CTA band */
.cta-band { background:linear-gradient(120deg,#1e40af,#3b82f6); }
.cta-inner { display:flex; align-items:center; justify-content:space-between; gap:28px; padding:48px 0; flex-wrap:wrap; }
.cta-inner h2 { color:#fff; font-size:clamp(22px,2.6vw,28px); margin:0 0 6px; font-weight:800; }
.cta-inner p { color:rgba(255,255,255,.85); margin:0; font-size:15px; }

/* Tin tức */
.news-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.news-card { display:flex; flex-direction:column; background:var(--d-card); border:1px solid var(--d-line); border-radius:var(--d-radius); overflow:hidden; transition:.18s; }
.news-card:hover { border-color:var(--d-primary); transform:translateY(-4px); box-shadow:var(--d-shadow); }
.news-thumb { aspect-ratio:16/10; background:linear-gradient(135deg,#1a2a52,#0e1730) center/cover no-repeat; display:grid; place-items:center; }
.news-thumb-ico { color:var(--d-primary); opacity:.6; }
.news-body { padding:16px 18px 18px; display:flex; flex-direction:column; flex:1; }
.news-meta { display:flex; align-items:center; gap:10px; font-size:12.5px; color:var(--d-muted); }
.news-meta .news-cat { color:var(--d-primary); font-weight:600; }
.news-card h3 { margin:9px 0 8px; font-size:16.5px; line-height:1.35; color:var(--d-white); }
.news-body p { font-size:13.5px; color:var(--d-text); line-height:1.6; margin:0; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

/* Liên hệ */
.contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; }
.contact-copy .sec-title { margin:12px 0 14px; }
.contact-copy > p { color:var(--d-text); margin:0 0 22px; }
.contact-info { list-style:none; padding:0; margin:0; }
.contact-info li { display:flex; align-items:center; gap:12px; padding:9px 0; color:#c3d0e6; font-size:15px; }
.contact-info li span { display:grid; place-items:center; width:40px; height:40px; border-radius:11px; background:var(--d-primary-soft); color:var(--d-primary); flex:0 0 auto; }
.contact-info li a { color:#c3d0e6; }
.contact-card { background:var(--d-card); border:1px solid var(--d-line); border-radius:18px; box-shadow:var(--d-shadow); padding:28px; }
.contact-card label { display:block; font-size:13px; font-weight:600; color:#c3d0e6; margin-bottom:14px; }
.contact-card .cc-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.contact-card input, .contact-card textarea { width:100%; box-sizing:border-box; margin-top:6px; border:1px solid var(--d-line2); border-radius:9px; padding:11px 13px; font:inherit; font-size:14px; background:rgba(255,255,255,.04); color:var(--d-white); }
.contact-card input::placeholder, .contact-card textarea::placeholder { color:var(--d-muted); }
.contact-card input:focus, .contact-card textarea:focus { outline:none; border-color:var(--d-primary); box-shadow:0 0 0 3px var(--d-primary-soft); }
.contact-card .hp-field { position:absolute !important; left:-9999px !important; }
.form-message { font-size:13px; margin:12px 0 0; min-height:1em; }
.form-message.ok { color:#4ade80; }
.form-message.err { color:#f87171; }

/* Footer */
.site-footer { background:#070c18; color:var(--d-text); padding:56px 0 20px; border-top:1px solid var(--d-line); }
.footer-grid { display:grid; grid-template-columns:1.6fr 1fr 1fr 1.4fr; gap:40px; padding-bottom:34px; border-bottom:1px solid var(--d-line); }
.footer-brand p { color:var(--d-muted); font-size:14px; margin:16px 0 0; max-width:320px; line-height:1.65; }
.footer-col h4 { color:#fff; font-size:14px; margin:0 0 14px; }
.footer-col:not(.footer-brand):not(.footer-contact) a { display:block; color:var(--d-text); font-size:13.5px; padding:5px 0; }
.footer-col:not(.footer-brand):not(.footer-contact) a:hover { color:#fff; }
.footer-contact p { display:flex; align-items:flex-start; gap:9px; margin:0 0 10px; font-size:13.5px; color:var(--d-text); }
.footer-contact p svg { color:var(--d-primary); flex:0 0 auto; margin-top:2px; }
.footer-contact p a, .footer-contact p span { color:var(--d-text); word-break:break-word; }
.footer-contact p a:hover { color:#fff; }
.footer-bottom { display:flex; justify-content:space-between; gap:12px; padding-top:20px; font-size:13px; color:var(--d-muted); flex-wrap:wrap; }

/* Trang con / bài viết / 404 */
.subpage { padding:120px 0 64px; min-height:60vh; }
.sub-narrow { max-width:760px; margin:0 auto; }
.article-head { margin-bottom:22px; }
.article-back a { display:inline-flex; align-items:center; gap:6px; color:var(--d-primary); font-weight:700; font-size:14px; }
.article-back svg { transform:rotate(180deg); }
.article-meta { display:flex; align-items:center; gap:14px; margin:16px 0 10px; font-size:13px; color:var(--d-muted); }
.article-meta .article-cat { color:var(--d-primary); font-weight:600; }
.article-title { font-size:clamp(26px,3.6vw,36px); line-height:1.2; color:#fff; margin:0; font-weight:800; }
.article-thumb-wrap { margin:24px 0; }
.article-thumb-wrap img { width:100%; height:auto; border-radius:16px; display:block; }
.article-content { font-size:16px; color:#c3d0e6; line-height:1.8; }
.article-content > * { margin:0 0 18px; }
.article-content h2, .article-content h3 { color:#fff; margin:26px 0 12px; }
.article-content a { color:var(--d-primary); text-decoration:underline; }
.article-content img { border-radius:12px; height:auto; }
.article-content blockquote { border-left:3px solid var(--d-primary); background:var(--d-card); margin:20px 0; padding:14px 18px; border-radius:0 10px 10px 0; }
.article-cta { display:flex; flex-wrap:wrap; gap:12px; margin-top:32px; padding-top:24px; border-top:1px solid var(--d-line); }
.article-cta .btn-glass svg { transform:rotate(180deg); }
.corp-404 { min-height:52vh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }
.corp-404 .num { font-size:clamp(90px,18vw,150px); font-weight:800; line-height:1; background:linear-gradient(135deg,#3b82f6,#60a5fa); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.corp-404 h1 { font-size:26px; color:#fff; margin:6px 0 12px; }
.corp-404 p { color:var(--d-text); margin:0 0 24px; }
/* Bình luận */
.article-comments { margin-top:44px; }
.comments-title { font-size:20px; color:#fff; margin:0 0 22px; }
.comment-list { list-style:none; padding:0; margin:0 0 32px; }
.comment-list ol.children { list-style:none; margin:16px 0 0 12px; padding-left:20px; border-left:2px solid var(--d-line); }
.comment-list li.comment { margin-bottom:18px; }
.comment-body { position:relative; padding:0 0 4px 60px; }
.comment-author img.avatar { position:absolute; left:0; top:2px; width:46px; height:46px; border-radius:50%; }
.comment-author .fn { font-weight:600; color:#fff; font-style:normal; font-size:14.5px; }
.comment-author .says { display:none; }
.comment-metadata, .comment-meta { font-size:12.5px; color:var(--d-muted); margin:2px 0 8px; }
.comment-content { font-size:14.5px; color:#c3d0e6; line-height:1.7; }
.comment-reply-link { font-size:13px; font-weight:600; color:var(--d-primary); }
.comment-respond { background:var(--d-card); border:1px solid var(--d-line); border-radius:16px; padding:24px 26px; margin-top:8px; }
.comment-reply-title { font-size:18px; color:#fff; margin:0 0 12px; }
.comment-form label { display:block; font-size:13px; font-weight:600; color:#c3d0e6; margin-bottom:6px; }
.comment-form input[type=text], .comment-form input[type=email], .comment-form input[type=url], .comment-form textarea { width:100%; box-sizing:border-box; border:1px solid var(--d-line2); border-radius:9px; padding:11px 13px; font:inherit; font-size:14px; background:rgba(255,255,255,.04); color:var(--d-white); }
.comment-form input:focus, .comment-form textarea:focus { outline:none; border-color:var(--d-primary); }
.comment-form-author, .comment-form-email { display:inline-block; width:calc(50% - 7px); vertical-align:top; margin-bottom:14px; }
.comment-form-author { margin-right:12px; }
.comment-form-comment { margin-bottom:14px; }
.form-submit .submit { background:var(--d-primary); color:#fff; border:0; border-radius:9px; padding:12px 24px; font-weight:700; cursor:pointer; }
.comment-list .fn a, .comment-metadata a { color:var(--d-text); }
.pagination { display:flex; gap:8px; justify-content:center; margin-top:40px; }
.pagination .page-numbers { display:grid; place-items:center; min-width:40px; height:40px; padding:0 6px; border:1px solid var(--d-line); border-radius:9px; color:var(--d-text); font-weight:600; }
.pagination .page-numbers.current { background:var(--d-primary); border-color:var(--d-primary); color:#fff; }

/* Responsive */
@media(max-width:960px){
	.hero-grid, .about-grid, .contact-grid { grid-template-columns:1fr; }
	.svc-grid, .proj-grid, .news-grid { grid-template-columns:repeat(2,1fr); }
	.stats-row { grid-template-columns:repeat(2,1fr); }
	.main-nav, .header-cta { display:none; }
	.nav-toggle { display:block; }
	.mobile-menu { display:block; position:absolute; top:100%; left:0; right:0; background:var(--d-bg2); border-top:1px solid var(--d-line); box-shadow:var(--d-shadow); padding:14px 24px 20px; transform:translateY(-10px); opacity:0; visibility:hidden; transition:.22s; }
	.mobile-menu.open { transform:translateY(0); opacity:1; visibility:visible; }
	.mm-nav { display:flex; flex-direction:column; }
	.mm-nav a { padding:13px 4px; border-bottom:1px solid var(--d-line); font-size:15px; font-weight:600; color:var(--d-text); }
	.mm-nav a.current { color:#fff; }
	.mm-phone { display:inline-flex; align-items:center; gap:8px; margin:16px 0 14px; color:var(--d-text); font-weight:700; }
	.mm-phone svg { color:var(--d-primary); }
	.mobile-menu .btn-block { width:100%; }
	body.menu-open { overflow:hidden; }
	.cta-inner { flex-direction:column; align-items:flex-start; }
	.footer-grid { grid-template-columns:1fr 1fr; gap:32px 24px; }
	.footer-brand { grid-column:1 / -1; }
}
@media(max-width:600px){
	.section { padding:60px 0; }
	.svc-grid, .proj-grid, .news-grid, .stats-row { grid-template-columns:1fr; }
	.contact-card .cc-row { grid-template-columns:1fr; }
	.footer-grid { grid-template-columns:1fr; gap:26px; }
	.footer-bottom { flex-direction:column; gap:8px; text-align:center; }
	.comment-form-author, .comment-form-email { width:100%; margin-right:0; }
}

/* Màn hình lớn: nới container */
@media (min-width:1680px){ .container { max-width:1440px; } }
@media (min-width:2300px){ .container { max-width:1720px; } }