/*
Theme Name: Blog Môi Giới
Description: Giao diện blog cá nhân cho môi giới bất động sản — kể chuyện khu vực, chuyện khách hàng. Dựng theo ngôn ngữ Ghost. Màu thương hiệu đổi trong Cài đặt hoặc ở dòng --chinh bên dưới.
Version: 2.1
Author: Realtor OS
*/

:root{
  --chinh:#0e8077;        /* MÀU THƯƠNG HIỆU — script tự ghi đè bằng màu bạn chọn */
  --chu:#15181a;
  --mo:#69737a;
  --vien:#e6e9eb;
  /* Hai màu dưới đây giao diện TỰ TÍNH theo màu thương hiệu, đừng sửa tay:
     --chu-tren-mau: chữ đè lên nền màu (trắng nếu nền đậm, đen nếu nền sáng)
     --chinh-dam:    dùng cho link trên nền trắng, đánh đậm lại nếu màu quá sáng */
  --chu-tren-mau:#fff;
  --chinh-dam:var(--chinh);
}
*{box-sizing:border-box}
body{margin:0;font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--chu);background:#fff;
     font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto}
a{text-decoration:none;color:inherit}
.khung{max-width:1070px;margin:0 auto;padding:0 32px}

/* ---- Đầu trang: menu trái · tên giữa · nút phải ---- */
.dau{border-bottom:1px solid var(--vien)}
/* 'auto 1fr auto': menu lấy đúng bề rộng nó cần. Nếu để '1fr auto 1fr' thì cột
   menu bị bó bằng cột nút bên phải, tên chuyên mục tiếng Việt dài là cắt chữ. */
.dau .khung{max-width:1260px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;padding:18px 32px;gap:24px}
.menu{display:flex;gap:22px;flex-wrap:nowrap}
.menu a{font-size:.92rem;font-weight:500;white-space:nowrap}
.menu a:hover{color:var(--chinh-dam,var(--chinh))}
.ten-web{font-size:1.36rem;white-space:nowrap;font-weight:800;letter-spacing:-.028em;text-align:center;justify-self:center}
.phai{display:flex;align-items:center;justify-content:flex-end;gap:20px}
.phai .lh{font-size:.92rem;font-weight:500;white-space:nowrap}
.phai .lh:hover{color:var(--chinh-dam,var(--chinh))}
.nut{background:var(--chinh);color:var(--chu-tren-mau,#fff);font-weight:600;font-size:.95rem;padding:10px 22px;border-radius:999px;display:inline-block}

/* ---- Dải mở đầu ---- */
.hero{background:linear-gradient(125deg,color-mix(in srgb,var(--chinh) 78%,#000) 0%,var(--chinh) 48%,color-mix(in srgb,var(--chinh) 72%,#fff) 100%);
      color:var(--chu-tren-mau,#fff);padding:100px 0 108px;text-align:center}
.hero h1{font-size:3.05rem;font-weight:800;line-height:1.09;letter-spacing:-.035em;margin:0 auto 34px;max-width:20ch}
.dangky{display:flex;max-width:560px;margin:0 auto;background:#fff;border-radius:999px;padding:7px 7px 7px 26px;align-items:center;box-shadow:0 10px 34px rgba(0,0,0,.14)}
.dangky span{flex:1;text-align:left;color:#9aa3a8;font-size:1rem}
.dangky .nut{padding:12px 26px}

/* ---- Danh sách bài ---- */
.ds{padding:64px 0 30px}
.bai{display:grid;grid-template-columns:264px 1fr;gap:34px;padding:34px 0;border-bottom:1px solid var(--vien);align-items:start}
.bai:first-child{padding-top:0}
.bai.khong-anh{grid-template-columns:1fr}
.bai-anh img{aspect-ratio:4/3;object-fit:cover;border-radius:5px;width:100%;display:block}
.bai h2{font-size:1.42rem;font-weight:700;line-height:1.28;letter-spacing:-.022em;margin:0 0 10px}
.bai:hover h2{color:var(--chinh-dam,var(--chinh))}
.bai p{margin:0 0 16px;color:var(--mo);font-size:1.02rem;line-height:1.55}
.meta{font-size:.92rem;color:var(--mo)}
.meta b{font-weight:500}

/* ---- Bài viết ---- */
.bai-don{max-width:720px;margin:0 auto;padding:56px 32px 20px}
.bai-don h1{font-size:2.6rem;font-weight:800;line-height:1.14;letter-spacing:-.032em;margin:0 0 14px}
.bai-don .meta{display:block;margin-bottom:34px}
.noi-dung{font-size:1.12rem;line-height:1.75}
.noi-dung h2{font-size:1.6rem;font-weight:700;letter-spacing:-.022em;margin:2em 0 .5em;line-height:1.3}
.noi-dung h3{font-size:1.25rem;font-weight:700;margin:1.7em 0 .4em}
.noi-dung p{margin:0 0 1.2em}
.noi-dung img{border-radius:6px;margin:1.4em 0}
.noi-dung figcaption{text-align:center;color:var(--mo);font-size:.92rem;margin-top:-.6em}
.noi-dung blockquote{margin:1.6em 0;padding-left:22px;border-left:3px solid var(--chinh);color:var(--mo)}
.noi-dung details{border-bottom:1px solid var(--vien);padding:6px 0}
.noi-dung summary{cursor:pointer;font-weight:700;padding:12px 0}
.noi-dung iframe{max-width:100%;border-radius:6px}

/* ---- Mời theo dõi ---- */
.moi{background:#f7f9f9;border-top:1px solid var(--vien);margin-top:40px;padding:64px 0;text-align:center}
.moi h3{font-size:1.9rem;font-weight:800;letter-spacing:-.03em;margin:0 0 12px}
.moi p{margin:0 auto 28px;color:var(--mo);max-width:46ch}
.cuoi{padding:30px 0 44px;color:var(--mo);font-size:.92rem;text-align:center}
.trang{display:flex;gap:10px;justify-content:center;padding:30px 0}
.trang a,.trang span{padding:8px 15px;border:1px solid var(--vien);border-radius:999px;color:var(--mo);font-size:.92rem}
.trang .current{background:var(--chinh);border-color:var(--chinh);color:var(--chu-tren-mau,#fff)}

/* Khung không còn đủ cho một hàng: menu tụt xuống hàng dưới, căn giữa.
   Thà xuống hàng còn hơn cắt mất chữ của chuyên mục. */
@media(max-width:1120px){
  .dau .khung{grid-template-columns:auto 1fr;
              grid-template-areas:"ten phai" "menu menu";row-gap:14px}
  .ten-web{grid-area:ten;justify-self:start;text-align:left}
  .phai{grid-area:phai}
  .menu{grid-area:menu;justify-content:center;flex-wrap:wrap;row-gap:8px}
}

@media(max-width:820px){
  .dau .khung{gap:14px;row-gap:12px}
  /* Trên điện thoại menu KHÔNG ẩn đi nữa — nó cuộn ngang được.
     Ẩn hẳn thì người đọc trên điện thoại mất đường vào chuyên mục. */
  .menu{justify-content:flex-start;flex-wrap:nowrap;gap:18px;
        overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .menu::-webkit-scrollbar{display:none}
  .hero{padding:70px 0 76px}
  /* Chữ và ô Zalo phải có lề, không thì dính sát mép màn hình điện thoại */
  .hero h1{font-size:2.05rem;padding:0 22px}
  .dangky{margin:0 20px;padding:6px 6px 6px 20px}
  .bai{grid-template-columns:1fr;gap:16px}
  .bai-don h1{font-size:1.9rem}
}

/* Điện thoại hẹp: bỏ chữ "Liên hệ" cho tên web và nút Zalo có chỗ thở */
@media(max-width:420px){
  .dau .khung{padding:14px 20px}
  .phai .lh{display:none}
  .ten-web{font-size:1.18rem}
  .nut{font-size:.9rem;padding:9px 18px}
}