/*
Theme Name: EcoSalon Blog
Theme URI: https://ecosalon.vn/blog/
Author: Vidco Group
Description: Giao diện blog cho ecosalon.vn — dùng lại đúng bộ màu, font và bố cục
             của trang tĩnh để người đọc không thấy hụt khi chuyển từ trang chủ
             sang blog. Không sidebar, không thư viện ngoài, không gọi tài nguyên
             của bên thứ ba.
Version: 1.0
Requires at least: 6.0
Requires PHP: 8.0
License: GPLv2 or later
Text Domain: ecosalon-blog
*/

/* Biến màu lấy nguyên từ trang tĩnh ecosalon.vn — đổi ở đây là đổi cả blog. */
*{margin:0;padding:0;box-sizing:border-box}
:root{
  --ink:#0d1f18; --ink-2:#39544a; --muted:#6b8078;
  --bg:#fff; --bg-soft:#f3f7f4; --line:#e4ece7;
  --brand:#0f9d6b; --brand-d:#0b7a52; --brand-dd:#0b3d2e;
  --radius:14px; --sh:0 14px 40px -18px rgba(11,60,46,.28);
  --max:760px; --max-wide:1080px;
}
html{scroll-behavior:smooth}
body{font-family:"Be Vietnam Pro",system-ui,-apple-system,sans-serif;color:var(--ink);
  background:var(--bg);line-height:1.78;-webkit-font-smoothing:antialiased}
a{color:var(--brand-d);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;height:auto}

/* Cho người dùng bàn phím thấy rõ đang ở đâu. Trang tĩnh thiếu phần này. */
a:focus-visible,button:focus-visible,input:focus-visible{
  outline:3px solid var(--brand);outline-offset:2px;border-radius:4px}
.bo-qua{position:absolute;left:-9999px}
.bo-qua:focus{left:12px;top:12px;z-index:99;background:#fff;padding:10px 16px;
  border-radius:8px;box-shadow:var(--sh)}

.wrap{max-width:var(--max);margin:0 auto;padding:0 22px}
.wrap-rong{max-width:var(--max-wide);margin:0 auto;padding:0 22px}

/* --- Đầu trang --- */
header.site{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.9);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:64px;
  max-width:var(--max-wide);margin:0 auto;padding:0 22px;gap:16px}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:19px;color:var(--ink);flex:none}
.logo:hover{text-decoration:none}
.logo .mark{width:34px;height:34px;border-radius:10px;
  background:linear-gradient(140deg,var(--brand),var(--brand-dd));
  display:grid;place-items:center;color:#fff;font-size:17px}
.nav-lien-ket{display:flex;gap:20px;font-size:14.5px;font-weight:600;margin-left:auto}
.nav-lien-ket a{color:var(--ink-2)}
.nav-lien-ket a[aria-current]{color:var(--brand-d)}
.nav .cta{font-weight:600;font-size:14px;background:var(--brand);color:#fff;
  padding:9px 16px;border-radius:10px;flex:none}
.nav .cta:hover{background:var(--brand-d);text-decoration:none}
@media(max-width:640px){.nav-lien-ket{display:none}}

/* --- Bài viết --- */
article.bai{padding:44px 0 60px}
.crumb{font-size:13px;color:var(--muted);margin-bottom:22px}
.crumb a{color:var(--muted)}
h1{font-size:clamp(27px,4vw,40px);font-weight:800;letter-spacing:-.02em;
  line-height:1.18;margin-bottom:14px}
.meta{color:var(--muted);font-size:14px;margin-bottom:30px;padding-bottom:24px;
  border-bottom:1px solid var(--line)}
.noi-dung h2{font-size:clamp(21px,2.6vw,27px);font-weight:800;letter-spacing:-.01em;
  margin:38px 0 14px;line-height:1.25}
.noi-dung h3{font-size:19px;font-weight:700;margin:26px 0 10px}
.noi-dung h4{font-size:16.5px;font-weight:700;margin:20px 0 8px}
.noi-dung p{margin:0 0 16px;color:#1e3a30}
.noi-dung ul,.noi-dung ol{margin:0 0 18px;padding-left:22px}
.noi-dung li{margin-bottom:9px;color:#1e3a30}
.noi-dung strong{color:var(--ink)}
.noi-dung .lede{font-size:18px;color:var(--ink-2)}
.noi-dung .box{background:var(--bg-soft);border:1px solid var(--line);
  border-left:4px solid var(--brand);border-radius:12px;padding:18px 20px;margin:24px 0}
.noi-dung .box p:last-child{margin-bottom:0}
.noi-dung blockquote{border-left:4px solid var(--brand);background:var(--bg-soft);
  padding:16px 20px;margin:24px 0;border-radius:0 12px 12px 0;font-style:italic}
.noi-dung table{width:100%;border-collapse:collapse;margin:20px 0;font-size:14.5px}
.noi-dung th,.noi-dung td{border:1px solid var(--line);padding:10px 12px;
  text-align:left;vertical-align:top}
.noi-dung th{background:var(--bg-soft);font-weight:700}
/* Bảng rộng trên điện thoại: cho cuộn ngang thay vì vỡ bố cục */
.noi-dung .bang-cuon{overflow-x:auto;-webkit-overflow-scrolling:touch}
.noi-dung figure{margin:24px 0}
.noi-dung figcaption{font-size:13.5px;color:var(--muted);text-align:center;margin-top:8px}
.noi-dung img{border-radius:12px}
.noi-dung .cta-block{background:linear-gradient(140deg,var(--brand-dd),var(--brand-d));
  color:#fff;border-radius:var(--radius);padding:30px 28px;margin:40px 0 10px;text-align:center}
.noi-dung .cta-block h3{color:#fff;font-size:22px;margin:0 0 8px}
.noi-dung .cta-block p{color:#c9e6d9;margin:0 0 18px}
.noi-dung .cta-block a{display:inline-block;background:#fff;color:var(--brand-dd);
  font-weight:700;padding:13px 26px;border-radius:11px}
.noi-dung .cta-block a:hover{text-decoration:none;background:#f0fff8}

/* --- Bài liên quan (theme tự sinh theo chuyên mục) --- */
.related{margin-top:46px;padding-top:28px;border-top:1px solid var(--line)}
.related h2{font-size:15px;text-transform:uppercase;letter-spacing:.4px;
  color:var(--muted);margin-bottom:14px;font-weight:700}
.related a{display:block;padding:8px 0;font-weight:600}

/* --- Danh sách bài (trang blog, chuyên mục, tìm kiếm) --- */
.dau-trang{padding:46px 0 8px;text-align:center}
.dau-trang h1{margin-bottom:10px}
.dau-trang p{color:var(--muted);max-width:560px;margin:0 auto}
.danh-sach{padding:30px 0 60px;display:grid;gap:18px}
.the-bai{border:1px solid var(--line);border-radius:var(--radius);padding:22px 24px;
  transition:box-shadow .18s,transform .18s,border-color .18s;background:#fff}
.the-bai:hover{box-shadow:var(--sh);transform:translateY(-2px);border-color:#cfe4d8}
.the-bai h2{font-size:20px;font-weight:700;line-height:1.35;margin-bottom:8px}
.the-bai h2 a{color:var(--ink)}
.the-bai .meta{border:0;padding:0;margin-bottom:10px;font-size:13.5px}
.the-bai p{color:var(--ink-2);font-size:15.5px;margin:0}
.nhan{display:inline-block;background:var(--bg-soft);color:var(--brand-d);
  font-size:12.5px;font-weight:600;padding:3px 10px;border-radius:99px;
  border:1px solid var(--line)}
.nhan:hover{text-decoration:none;background:#e8f5ee}
.phan-trang{display:flex;gap:8px;justify-content:center;padding:10px 0 60px;flex-wrap:wrap}
.phan-trang .page-numbers{padding:9px 15px;border:1px solid var(--line);
  border-radius:10px;font-weight:600;color:var(--ink-2)}
.phan-trang .page-numbers:hover{text-decoration:none;border-color:var(--brand)}
.phan-trang .current{background:var(--brand);color:#fff;border-color:var(--brand)}
.trong{text-align:center;padding:50px 0 70px;color:var(--muted)}

/* --- Chân trang --- */
footer.site{background:#08211a;color:#8fb2a3;padding:36px 0 26px;font-size:14px}
footer.site .fl{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;
  max-width:var(--max-wide);margin:0 auto;padding:0 22px}
footer.site a{color:#8fb2a3}
footer.site a:hover{color:#fff}