/*
Theme Name: Kira Chia Sẻ Công Nghệ
Theme URI: https://chiasecongnghe.net/
Author: Kira / KiraPlatform
Author URI: https://kiraplatform.app/
Description: Theme WordPress production-ready cho trang tin & đánh giá công nghệ chiasecongnghe.net. Cấu trúc chuẩn (header/footer/sidebar/template-parts), layout đầy đủ cho trang, bài viết và chuyên mục, responsive, tối ưu SEO. Toàn bộ giao diện, code và hình ảnh được thiết kế riêng — không sao chép từ bất kỳ website tham chiếu nào.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: kira-chiasecongnghe
Tags: blog, news, technology, two-columns, right-sidebar, custom-menu, featured-images, translation-ready
*/

/* ===========================================================================
   1. Design tokens
   ======================================================================== */
:root {
  --c-navy: #0a1630;
  --c-navy-2: #10224a;
  --c-cyan: #1cb6ff;
  --c-cyan-d: #0a90d6;
  --c-teal: #00d1b2;
  --c-violet: #7c5cff;
  --c-coral: #ff5c6c;
  --c-amber: #ffb020;
  --c-ink: #16223a;
  --c-body: #3a4860;
  --c-muted: #6a7892;
  --c-line: #e4e9f2;
  --c-soft: #f4f7fb;
  --c-soft-2: #eef2f8;
  --c-white: #ffffff;
  --shadow-sm: 0 2px 8px rgba(16, 34, 74, .06);
  --shadow-md: 0 10px 30px rgba(16, 34, 74, .10);
  --shadow-lg: 0 20px 50px rgba(16, 34, 74, .16);
  --radius: 14px;
  --radius-sm: 10px;
  --wrap: 1200px;
  --content: 760px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  --font-head: "Segoe UI", Roboto, var(--font);
}

/* ===========================================================================
   2. Reset & base
   ======================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.7;
  color: var(--c-body);
  background: var(--c-white);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--c-cyan-d); text-decoration: none; transition: color .15s ease; }
a:hover { color: var(--c-navy); }
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-head);
  color: var(--c-ink);
  line-height: 1.25;
  margin: 0 0 .6em;
  font-weight: 800;
  letter-spacing: -.01em;
}
h1 { font-size: 2.1rem; }
h2 { font-size: 1.6rem; }
h3 { font-size: 1.25rem; }
p { margin: 0 0 1.1em; }
ul, ol { margin: 0 0 1.1em; padding-left: 1.3em; }
blockquote {
  margin: 1.6em 0; padding: 1em 1.4em;
  border-left: 4px solid var(--c-cyan);
  background: var(--c-soft);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  color: var(--c-ink); font-style: italic;
}
code, pre {
  font-family: "SFMono-Regular", Menlo, Consolas, monospace;
  background: var(--c-soft-2); border-radius: 6px;
}
code { padding: .12em .4em; font-size: .9em; }
pre { padding: 1em 1.2em; overflow:auto; border-radius: var(--radius-sm); }
hr { border: 0; border-top: 1px solid var(--c-line); margin: 2em 0; }
:focus-visible { outline: 3px solid rgba(28,182,255,.5); outline-offset: 2px; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }
.screen-reader-text {
  position: absolute !important; clip: rect(1px,1px,1px,1px);
  width: 1px; height: 1px; overflow: hidden; padding:0; border:0;
}
.skip-link { position:absolute; left:-9999px; top:0; z-index:1000; background:var(--c-navy); color:#fff; padding:.7em 1.2em; border-radius:0 0 8px 0; }
.skip-link:focus { left:0; color:#fff; }

/* ===========================================================================
   3. Buttons & helpers
   ======================================================================== */
.btn {
  display: inline-flex; align-items: center; gap: .5em;
  padding: .72em 1.5em; border-radius: 999px;
  font-weight: 700; font-size: .95rem; cursor: pointer;
  border: 2px solid transparent; transition: all .18s ease; line-height: 1;
}
.btn-primary { background: var(--c-cyan); color: #fff; box-shadow: 0 8px 20px rgba(28,182,255,.32); }
.btn-primary:hover { background: var(--c-cyan-d); color:#fff; transform: translateY(-2px); }
.btn-ghost { background: transparent; border-color: rgba(255,255,255,.4); color:#fff; }
.btn-ghost:hover { background: rgba(255,255,255,.12); color:#fff; }
.btn-dark { background: var(--c-navy); color:#fff; }
.btn-dark:hover { background: var(--c-navy-2); color:#fff; transform: translateY(-2px); }
.eyebrow { display:inline-block; font-size:.8rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--c-cyan-d); margin-bottom:.5em; }
.text-center { text-align:center; }

.badge {
  display:inline-block; padding:.32em .85em; border-radius:999px;
  font-size:.72rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase;
  background:var(--c-cyan); color:#fff;
}
.badge-soft { background: rgba(28,182,255,.12); color: var(--c-cyan-d); }

/* ===========================================================================
   4. Header
   ======================================================================== */
.site-header { background:#fff; border-bottom:1px solid var(--c-line); position:sticky; top:0; z-index:200; }
.topbar { background: var(--c-navy); color:#cdd8ee; font-size:.82rem; }
.topbar .wrap { display:flex; justify-content:space-between; align-items:center; min-height:38px; gap:1em; }
.topbar a { color:#cdd8ee; }
.topbar a:hover { color:#fff; }
.topbar-tags { display:flex; gap:1.2em; flex-wrap:wrap; }
.topbar-social { display:flex; gap:1em; }
.header-main { display:flex; align-items:center; justify-content:space-between; gap:1.4em; min-height:84px; }
.site-branding { display:flex; align-items:center; }
.site-branding img { height:50px; width:auto; }
.site-title-text { font-size:1.4rem; font-weight:800; color:var(--c-navy); }
.site-title-text span { color:var(--c-cyan); }

.main-navigation { margin-left:auto; min-width:0; }
.main-navigation ul { list-style:none; margin:0; padding:0; display:flex; gap:.05em; align-items:center; }
.main-navigation li { position:relative; }
.main-navigation a {
  display:block; padding:.6em .62em; font-weight:600; color:var(--c-ink);
  font-size:.9rem; border-radius:8px; white-space:nowrap;
}
.main-navigation a:hover, .main-navigation .current-menu-item > a, .main-navigation .current_page_item > a,
.main-navigation .current-menu-ancestor > a {
  color:var(--c-cyan-d); background:var(--c-soft);
}
/* caret on dropdown parents */
.main-navigation .menu-item-has-children > a::after { content:"▾"; margin-left:.3em; font-size:.8em; opacity:.7; }
.main-navigation ul ul .menu-item-has-children > a::after { content:"›"; float:right; }
.main-navigation ul ul {
  position:absolute; top:100%; left:0; flex-direction:column; gap:0;
  background:#fff; min-width:210px; box-shadow:var(--shadow-md);
  border:1px solid var(--c-line); border-radius:var(--radius-sm);
  padding:.4em; opacity:0; visibility:hidden; transform:translateY(8px);
  transition:all .16s ease; z-index:50;
}
.main-navigation li:hover > ul { opacity:1; visibility:visible; transform:translateY(0); }
.main-navigation ul ul a { padding:.55em .8em; }
.header-search { display:flex; align-items:center; }
.header-search .search-toggle { background:var(--c-soft); border:none; border-radius:50%; width:42px; height:42px; cursor:pointer; color:var(--c-ink); font-size:1.05rem; display:flex; align-items:center; justify-content:center; }
.header-search .search-toggle:hover { background:var(--c-cyan); color:#fff; }

.menu-toggle { display:none; background:var(--c-navy); border:none; color:#fff; padding:.6em .8em; border-radius:8px; font-size:1.3rem; cursor:pointer; align-items:center; }

/* Header search drawer */
.header-search-form { display:none; padding:0 0 18px; }
.header-search-form.open { display:block; }
.header-search-form form { display:flex; gap:.6em; }

/* ===========================================================================
   5. Layout grid
   ======================================================================== */
.site-content { padding: 36px 0 56px; }
.content-grid { display:grid; grid-template-columns: minmax(0,1fr) 330px; gap:42px; align-items:start; }
.content-grid.no-sidebar { grid-template-columns: minmax(0,1fr); max-width: 880px; margin:0 auto; }

/* ===========================================================================
   6. Hero slider
   ======================================================================== */
.hero { margin-bottom:40px; }
.hero-slider { position:relative; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-md); }
.hero-slide { display:none; position:relative; }
.hero-slide.active { display:block; animation:fade .6s ease; }
@keyframes fade { from{opacity:.3} to{opacity:1} }
.hero-slide img { width:100%; height:440px; object-fit:cover; }
.hero-caption { position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center; padding:0 8% ; }
.hero-caption .badge { margin-bottom:1em; }
.hero-caption h2 { color:#fff; font-size:2.3rem; max-width:580px; text-shadow:0 2px 14px rgba(0,0,0,.4); margin-bottom:.6em; }
.hero-caption p { color:#e7eefb; max-width:480px; margin-bottom:1.4em; }
.hero-dots { position:absolute; bottom:18px; left:8%; display:flex; gap:.5em; }
.hero-dots button { width:11px; height:11px; border-radius:50%; border:none; background:rgba(255,255,255,.45); cursor:pointer; padding:0; }
.hero-dots button.active { background:#fff; width:28px; border-radius:999px; }
.hero-arrow { position:absolute; top:50%; transform:translateY(-50%); background:rgba(10,22,48,.4); border:none; color:#fff; width:46px; height:46px; border-radius:50%; cursor:pointer; font-size:1.4rem; display:flex; align-items:center; justify-content:center; z-index:5; }
.hero-arrow:hover { background:var(--c-cyan); }
.hero-arrow.prev { left:16px; } .hero-arrow.next { right:16px; }

/* ===========================================================================
   7. Section heading
   ======================================================================== */
.section-head { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:22px; gap:1em; }
.section-head h2 { margin:0; position:relative; padding-left:16px; font-size:1.5rem; }
.section-head h2::before { content:""; position:absolute; left:0; top:.1em; bottom:.1em; width:5px; border-radius:3px; background:linear-gradient(var(--c-cyan),var(--c-teal)); }
.section-head .more-link { font-weight:700; font-size:.9rem; white-space:nowrap; }

/* ===========================================================================
   8. Post cards
   ======================================================================== */
.card-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.card-grid.cols-2 { grid-template-columns:repeat(2,1fr); }
.post-card { background:#fff; border:1px solid var(--c-line); border-radius:var(--radius); overflow:hidden; display:flex; flex-direction:column; transition:transform .18s ease, box-shadow .18s ease; }
.post-card:hover { transform:translateY(-5px); box-shadow:var(--shadow-md); }
.post-card .thumb { display:block; position:relative; aspect-ratio:16/9; overflow:hidden; background:var(--c-soft-2); }
.post-card .thumb img { width:100%; height:100%; object-fit:cover; transition:transform .4s ease; }
.post-card:hover .thumb img { transform:scale(1.05); }
.post-card .cat-tag { position:absolute; top:12px; left:12px; }
.post-card .card-body { padding:18px 20px 22px; display:flex; flex-direction:column; flex:1; }
.post-card h3 { font-size:1.12rem; margin:0 0 .5em; }
.post-card h3 a { color:var(--c-ink); }
.post-card h3 a:hover { color:var(--c-cyan-d); }
.post-card .excerpt { font-size:.95rem; color:var(--c-body); margin-bottom:1em; }
.post-meta { display:flex; flex-wrap:wrap; gap:.4em 1.1em; font-size:.82rem; color:var(--c-muted); margin-top:auto; }
.post-meta .author { font-weight:600; color:var(--c-ink); }

/* Featured (large + list) */
.feature-block { display:grid; grid-template-columns: 1.6fr 1fr; gap:26px; margin-bottom:48px; }
.feature-main .thumb { aspect-ratio:16/10; }
.feature-main h3 { font-size:1.7rem; }
.feature-list { display:flex; flex-direction:column; gap:16px; }
.feature-item { display:grid; grid-template-columns:120px 1fr; gap:14px; align-items:center; background:#fff; border:1px solid var(--c-line); border-radius:var(--radius-sm); padding:10px; }
.feature-item .thumb { aspect-ratio:1/1; border-radius:8px; overflow:hidden; }
.feature-item h4 { margin:0 0 .35em; font-size:1rem; line-height:1.35; }
.feature-item h4 a { color:var(--c-ink); }
.feature-item .post-meta { font-size:.76rem; }

/* ===========================================================================
   9. Category strip on home
   ======================================================================== */
.cat-strip { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-bottom:48px; }
.cat-tile { position:relative; border-radius:var(--radius); overflow:hidden; min-height:150px; display:flex; align-items:flex-end; color:#fff; }
.cat-tile img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.cat-tile::after { content:""; position:absolute; inset:0; background:linear-gradient(transparent,rgba(8,16,36,.82)); z-index:1; }
.cat-tile .cat-tile-body { position:relative; z-index:2; padding:18px 20px; }
.cat-tile h3 { color:#fff; margin:0 0 .15em; font-size:1.15rem; }
.cat-tile span { font-size:.82rem; color:#d8e2f4; }
.cat-tile:hover img { transform:scale(1.05); transition:transform .4s ease; }

/* ===========================================================================
   10. Single / page content
   ======================================================================== */
.entry-header { margin-bottom:26px; }
.breadcrumb { font-size:.85rem; color:var(--c-muted); margin-bottom:16px; }
.breadcrumb a { color:var(--c-muted); }
.breadcrumb a:hover { color:var(--c-cyan-d); }
.breadcrumb .sep { margin:0 .5em; opacity:.6; }
.entry-title { font-size:2.35rem; line-height:1.2; }
.entry-meta { display:flex; flex-wrap:wrap; gap:.5em 1.4em; font-size:.9rem; color:var(--c-muted); margin-top:14px; align-items:center; }
.entry-meta .avatar { width:30px; height:30px; border-radius:50%; background:linear-gradient(135deg,var(--c-cyan),var(--c-violet)); color:#fff; display:inline-flex; align-items:center; justify-content:center; font-weight:800; font-size:.85rem; }
.featured-image { border-radius:var(--radius); overflow:hidden; margin-bottom:30px; box-shadow:var(--shadow-sm); }
.featured-image img { width:100%; }
.entry-content { font-size:1.06rem; }
.entry-content > * { max-width:var(--content); }
.entry-content img, .entry-content figure, .entry-content .wp-block-image { max-width:100%; border-radius:var(--radius-sm); margin:1.6em 0; }
.entry-content h2 { margin-top:1.6em; font-size:1.5rem; }
.entry-content h3 { margin-top:1.4em; font-size:1.22rem; }
.entry-content ul li, .entry-content ol li { margin-bottom:.4em; }
.entry-content figcaption { font-size:.85rem; color:var(--c-muted); text-align:center; margin-top:.5em; }

.entry-tags { margin:30px 0; display:flex; flex-wrap:wrap; gap:.5em; align-items:center; }
.entry-tags a { background:var(--c-soft); color:var(--c-ink); padding:.35em .9em; border-radius:999px; font-size:.82rem; font-weight:600; }
.entry-tags a:hover { background:var(--c-cyan); color:#fff; }

.author-box { display:flex; gap:18px; background:var(--c-soft); border-radius:var(--radius); padding:22px 24px; margin:34px 0; align-items:flex-start; }
.author-box .avatar-lg { width:62px; height:62px; border-radius:50%; flex-shrink:0; background:linear-gradient(135deg,var(--c-cyan),var(--c-violet)); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:1.4rem; }
.author-box h4 { margin:0 0 .3em; }
.author-box p { margin:0; font-size:.95rem; }

.share-row { display:flex; gap:.6em; align-items:center; margin:24px 0; }
.share-row .lbl { font-weight:700; color:var(--c-ink); font-size:.9rem; }
.share-row a { width:40px; height:40px; border-radius:50%; background:var(--c-soft); display:flex; align-items:center; justify-content:center; color:var(--c-ink); font-weight:700; font-size:.85rem; }
.share-row a:hover { background:var(--c-cyan); color:#fff; }

/* Related posts */
.related-posts { margin-top:48px; padding-top:36px; border-top:1px solid var(--c-line); }

/* ===========================================================================
   11. Sidebar widgets
   ======================================================================== */
.sidebar .widget { background:#fff; border:1px solid var(--c-line); border-radius:var(--radius); padding:22px 22px; margin-bottom:26px; }
.sidebar .widget-title { font-size:1.05rem; margin:0 0 16px; padding-bottom:12px; border-bottom:2px solid var(--c-soft-2); position:relative; }
.sidebar .widget-title::after { content:""; position:absolute; left:0; bottom:-2px; width:48px; height:2px; background:var(--c-cyan); }
.widget ul { list-style:none; margin:0; padding:0; }
.widget ul li { padding:.5em 0; border-bottom:1px dashed var(--c-line); font-size:.95rem; }
.widget ul li:last-child { border-bottom:0; }
.widget-popular li { display:grid; grid-template-columns:78px 1fr; gap:12px; align-items:center; border-bottom:1px solid var(--c-line); padding:12px 0; }
.widget-popular .thumb { width:78px; height:58px; border-radius:8px; overflow:hidden; }
.widget-popular .thumb img { width:100%; height:100%; object-fit:cover; }
.widget-popular h4 { margin:0 0 .25em; font-size:.92rem; line-height:1.35; }
.widget-popular h4 a { color:var(--c-ink); }
.widget-popular .date { font-size:.78rem; color:var(--c-muted); }
.widget-cats li a { display:flex; justify-content:space-between; color:var(--c-ink); font-weight:600; }
.widget-cats li a span { background:var(--c-soft); color:var(--c-muted); border-radius:999px; padding:0 .7em; font-size:.78rem; font-weight:700; }
.widget-cats li a:hover { color:var(--c-cyan-d); }
.tagcloud a { display:inline-block; background:var(--c-soft); color:var(--c-ink); padding:.3em .8em; border-radius:999px; font-size:.82rem !important; margin:0 .35em .5em 0; }
.tagcloud a:hover { background:var(--c-cyan); color:#fff; }

.widget-cta { background:linear-gradient(135deg,var(--c-navy),var(--c-navy-2)); color:#fff; border:none; text-align:center; }
.widget-cta .widget-title { color:#fff; border-color:rgba(255,255,255,.15); }
.widget-cta .widget-title::after { background:var(--c-cyan); }
.widget-cta p { color:#cdd8ee; font-size:.92rem; }
.widget-newsletter input[type=email] { width:100%; padding:.7em .9em; border-radius:8px; border:none; margin-bottom:.6em; font-size:.92rem; }

/* Search form */
.search-form { display:flex; gap:0; }
.search-form input[type=search] { flex:1; padding:.7em 1em; border:1px solid var(--c-line); border-radius:8px 0 0 8px; font-size:.95rem; outline:none; }
.search-form input[type=search]:focus { border-color:var(--c-cyan); }
.search-form button { border:none; background:var(--c-cyan); color:#fff; padding:0 1.2em; border-radius:0 8px 8px 0; cursor:pointer; font-weight:700; }
.search-form button:hover { background:var(--c-cyan-d); }

/* ===========================================================================
   12. Archive header
   ======================================================================== */
.archive-hero { background:linear-gradient(135deg,var(--c-navy),var(--c-navy-2)); color:#fff; border-radius:var(--radius); padding:42px 38px; margin-bottom:36px; position:relative; overflow:hidden; }
.archive-hero::after { content:""; position:absolute; right:-40px; top:-40px; width:240px; height:240px; border-radius:50%; background:radial-gradient(rgba(28,182,255,.4),transparent 70%); }
.archive-hero .breadcrumb, .archive-hero .breadcrumb a { color:#aebbd6; position:relative; z-index:2; }
.archive-hero h1 { color:#fff; font-size:2.2rem; margin:.2em 0 .3em; position:relative; z-index:2; }
.archive-hero p { color:#cdd8ee; max-width:620px; margin:0; position:relative; z-index:2; }

/* ===========================================================================
   13. Pagination
   ======================================================================== */
.pagination { margin-top:40px; display:flex; justify-content:center; }
.pagination .nav-links { display:flex; gap:.4em; flex-wrap:wrap; align-items:center; }
.pagination .page-numbers { display:inline-flex; min-width:44px; height:44px; padding:0 .8em; align-items:center; justify-content:center; border-radius:10px; border:1px solid var(--c-line); background:#fff; color:var(--c-ink); font-weight:700; }
.pagination .page-numbers.current { background:var(--c-cyan); color:#fff; border-color:var(--c-cyan); }
.pagination a.page-numbers:hover { background:var(--c-soft); border-color:var(--c-cyan); color:var(--c-cyan-d); }

/* ===========================================================================
   14. Generic WP page sections
   ======================================================================== */
.page-section { padding:50px 0; }
.page-section.alt { background:var(--c-soft); }
.lead { font-size:1.18rem; color:var(--c-ink); }
.feature-cols { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.feature-card { background:#fff; border:1px solid var(--c-line); border-radius:var(--radius); padding:26px 24px; }
.feature-card .ico { width:54px; height:54px; border-radius:14px; background:linear-gradient(135deg,var(--c-cyan),var(--c-teal)); color:#fff; display:flex; align-items:center; justify-content:center; font-size:1.5rem; font-weight:800; margin-bottom:16px; }
.feature-card h3 { font-size:1.15rem; margin-bottom:.4em; }
.feature-card p { font-size:.95rem; margin:0; }

.step-list { counter-reset:step; display:grid; gap:18px; }
.step-item { display:grid; grid-template-columns:54px 1fr; gap:18px; background:#fff; border:1px solid var(--c-line); border-radius:var(--radius); padding:22px 24px; align-items:flex-start; }
.step-item::before { counter-increment:step; content:counter(step); width:54px; height:54px; border-radius:50%; background:var(--c-navy); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:1.3rem; }
.step-item h3 { margin:0 0 .35em; }
.step-item p { margin:0; }

.price-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.price-card { background:#fff; border:1px solid var(--c-line); border-radius:var(--radius); padding:30px 26px; text-align:center; position:relative; }
.price-card.featured { border-color:var(--c-cyan); box-shadow:var(--shadow-md); transform:scale(1.02); }
.price-card .ribbon { position:absolute; top:-14px; left:50%; transform:translateX(-50%); background:var(--c-cyan); color:#fff; padding:.3em 1.1em; border-radius:999px; font-size:.75rem; font-weight:800; }
.price-card .price { font-size:2.2rem; font-weight:800; color:var(--c-ink); margin:.2em 0; }
.price-card .price small { font-size:.9rem; color:var(--c-muted); font-weight:600; }
.price-card ul { list-style:none; padding:0; margin:1.2em 0; text-align:left; }
.price-card ul li { padding:.45em 0; border-bottom:1px dashed var(--c-line); font-size:.95rem; }
.price-card ul li::before { content:"✓"; color:var(--c-teal); font-weight:800; margin-right:.5em; }

.contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:start; }
.contact-info-card { display:flex; gap:14px; padding:18px 0; border-bottom:1px solid var(--c-line); }
.contact-info-card .ico { width:46px; height:46px; border-radius:12px; background:var(--c-soft); color:var(--c-cyan-d); display:flex; align-items:center; justify-content:center; font-size:1.2rem; flex-shrink:0; }
.contact-info-card h4 { margin:0 0 .2em; font-size:1rem; }
.contact-info-card p { margin:0; font-size:.95rem; }
.contact-form label { display:block; font-weight:600; color:var(--c-ink); margin-bottom:.4em; font-size:.92rem; }
.contact-form input, .contact-form textarea { width:100%; padding:.8em 1em; border:1px solid var(--c-line); border-radius:10px; font-size:.97rem; margin-bottom:1em; font-family:inherit; }
.contact-form input:focus, .contact-form textarea:focus { border-color:var(--c-cyan); outline:none; }

.stat-row { display:grid; grid-template-columns:repeat(4,1fr); gap:22px; text-align:center; }
.stat-row .num { font-size:2.4rem; font-weight:800; color:var(--c-cyan-d); line-height:1; }
.stat-row .lbl { color:var(--c-muted); font-size:.92rem; margin-top:.3em; }

.cta-band { background:linear-gradient(135deg,var(--c-navy),var(--c-navy-2)); color:#fff; border-radius:var(--radius); padding:44px 40px; text-align:center; margin:48px 0; position:relative; overflow:hidden; }
.cta-band h2 { color:#fff; }
.cta-band p { color:#cdd8ee; max-width:560px; margin:0 auto 1.4em; }

/* ===========================================================================
   15. Footer
   ======================================================================== */
.site-footer { background:var(--c-navy); color:#aab8d4; margin-top:60px; }
.footer-top { padding:54px 0 40px; }
.footer-cols { display:grid; grid-template-columns:1.6fr 1fr 1fr 1.2fr; gap:36px; }
.footer-cols h4 { color:#fff; font-size:1rem; margin-bottom:18px; }
.footer-cols img { height:44px; margin-bottom:16px; }
.footer-cols p { font-size:.92rem; line-height:1.7; }
.footer-cols ul { list-style:none; padding:0; margin:0; }
.footer-cols ul li { margin-bottom:.6em; }
.footer-cols a { color:#aab8d4; font-size:.92rem; }
.footer-cols a:hover { color:var(--c-cyan); }
.footer-social { display:flex; gap:.6em; margin-top:16px; }
.footer-social a { width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,.08); display:flex; align-items:center; justify-content:center; color:#fff; font-size:.8rem; font-weight:700; }
.footer-social a:hover { background:var(--c-cyan); }
.footer-bottom { border-top:1px solid rgba(255,255,255,.1); padding:20px 0; }
.footer-bottom .wrap { display:flex; justify-content:space-between; gap:1em; flex-wrap:wrap; font-size:.85rem; }
.footer-bottom a { color:#cdd8ee; }

/* ===========================================================================
   16. Comments
   ======================================================================== */
.comments-area { margin-top:48px; padding-top:36px; border-top:1px solid var(--c-line); }
.comment-list { list-style:none; padding:0; margin:0 0 30px; }
.comment-list li { margin-bottom:20px; }
.comment-body { background:var(--c-soft); border-radius:var(--radius-sm); padding:18px 20px; }
.comment-author { font-weight:700; color:var(--c-ink); }
.comment-meta { font-size:.82rem; color:var(--c-muted); margin-bottom:.5em; }
.comment-form input, .comment-form textarea { width:100%; padding:.75em 1em; border:1px solid var(--c-line); border-radius:10px; margin-bottom:1em; font-family:inherit; font-size:.97rem; }

/* ===========================================================================
   17. Responsive
   ======================================================================== */
@media (max-width: 1024px) {
  .feature-block { grid-template-columns:1fr; }
  .footer-cols { grid-template-columns:1fr 1fr; }
  .stat-row { grid-template-columns:repeat(2,1fr); }
  /* Collapse the primary menu to an off-canvas drawer before it would crowd. */
  .main-navigation { position:fixed; top:0; right:-100%; bottom:0; width:288px; background:#fff; box-shadow:-8px 0 30px rgba(0,0,0,.15); padding:80px 18px 24px; transition:right .25s ease; overflow-y:auto; z-index:300; margin-left:0; }
  .main-navigation.open { right:0; }
  .main-navigation ul { flex-direction:column; align-items:stretch; gap:.1em; }
  .main-navigation a { white-space:normal; font-size:1rem; padding:.7em .9em; }
  .main-navigation .menu-item-has-children > a::after { content:""; }
  .main-navigation ul ul { position:static; opacity:1; visibility:visible; transform:none; box-shadow:none; border:none; padding-left:1em; }
  .menu-toggle { display:inline-flex; }
  .nav-backdrop { display:none; position:fixed; inset:0; background:rgba(10,22,48,.5); z-index:250; }
  .nav-backdrop.open { display:block; }
}
@media (max-width: 880px) {
  .content-grid { grid-template-columns:1fr; }
  .card-grid, .cat-strip, .feature-cols, .price-grid { grid-template-columns:1fr 1fr; }
  .contact-grid { grid-template-columns:1fr; }
  .hero-slide img { height:340px; }
  .hero-caption h2 { font-size:1.6rem; }
}
@media (max-width: 600px) {
  body { font-size:16px; }
  h1, .entry-title { font-size:1.7rem !important; }
  .card-grid, .cat-strip, .feature-cols, .price-grid, .stat-row, .footer-cols { grid-template-columns:1fr; }
  .feature-item { grid-template-columns:96px 1fr; }
  .topbar-tags { display:none; }
  .hero-slide img { height:260px; }
  .hero-caption { padding:0 6%; }
  .archive-hero, .cta-band, .price-card.featured { padding:28px 22px; }
  .price-card.featured { transform:none; }
}