/*
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.0
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;
}
*{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)}
.dau .khung{max-width:1260px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:18px 32px;gap:24px}
.menu{display:flex;gap:22px;flex-wrap:wrap;overflow:visible;min-width:0}
.menu a{font-size:.92rem;font-weight:500;white-space:nowrap}
.menu a:hover{color:var(--chinh)}
.ten-web{font-size:1.36rem;white-space:nowrap;font-weight:800;letter-spacing:-.028em;text-align: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)}
.nut{background:var(--chinh);color:#fff;font-weight:600;font-size:.95rem;padding:10px 22px;border-radius:999px;display:inline-block}

/* ---- Dải mở đầu ---- */
/* Dải mở đầu: nền ĐẬM, cùng tông với màu thương hiệu. Bản cũ sáng dần sang
   gần trắng ở mép phải, làm chữ trắng khó đọc và lệch khỏi nhận diện. Vẫn
   trộn từ var(--chinh) nên đổi màu thương hiệu là nền tự đổi theo. */
.hero{background:linear-gradient(125deg,color-mix(in srgb,var(--chinh) 45%,#03120e) 0%,color-mix(in srgb,var(--chinh) 62%,#03120e) 52%,color-mix(in srgb,var(--chinh) 82%,#03120e) 100%);
      color:#fff;padding:100px 0 108px;text-align:center}
/* pre-line: giữ đúng chỗ người dùng bấm Enter trong câu mở đầu. Không có nó
   thì HTML gộp hết thành một dòng dài, câu mất nhịp. Dòng quá dài vẫn tự
   xuống dòng bình thường. */
.hero h1{font-size:3.05rem;font-weight:800;line-height:1.09;letter-spacing:-.035em;margin:0 auto 34px;max-width:22ch;white-space:pre-line}
/* Khối liên hệ: form nhận tư vấn (ô nhập THẬT) + nút gọi có hình điện thoại.
   Bản gốc là ô "Số Zalo của bạn" giả — chỉ là thẻ <span>, gõ không được. */
.cta{display:flex;gap:12px;justify-content:center;align-items:center;flex-wrap:wrap}
.form-tuvan{display:flex;align-items:center;background:#fff;border-radius:999px;
            padding:6px 6px 6px 8px;box-shadow:0 10px 34px rgba(0,0,0,.14);
            max-width:100%}
.form-tuvan input[type=tel]{border:0;outline:0;background:transparent;
            font:inherit;font-size:1rem;color:var(--chu);
            padding:10px 14px;width:230px;max-width:46vw;min-width:0}
.form-tuvan input[type=tel]::placeholder{color:#9aa3a8}
.form-tuvan input[type=tel]:focus-visible{outline:2px solid var(--chinh);
            outline-offset:2px;border-radius:999px}
.form-tuvan .nut{padding:12px 24px;font-size:1rem;border:0;cursor:pointer;font-family:inherit}
/* Ô bẫy máy gửi rác: phải giấu khỏi mắt người nhưng KHÔNG dùng display:none —
   một số máy gửi rác biết bỏ qua ô display:none. */
.mg-bay{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.nut-vien{display:inline-flex;align-items:center;gap:8px;
          padding:13px 24px;font-size:1rem;font-weight:600;
          border-radius:999px;border:1.5px solid var(--vien);color:var(--chu)}
.nut-vien svg{flex:0 0 auto}
.nut-vien:hover{border-color:var(--chinh);color:var(--chinh)}
/* Trên nền đậm của dải mở đầu thì nút viền phải là viền trắng */
.hero .nut-vien{border-color:rgba(255,255,255,.55);color:#fff}
.hero .nut-vien:hover{background:rgba(255,255,255,.14);border-color:#fff;color:#fff}
/* Câu báo sau khi gửi — chiếm trọn hàng để nằm trên hai nút */
.cta-bao{flex:0 0 100%;margin:0 0 4px;font-size:.98rem;font-weight:600}
.cta-ok{color:#0a7d3f}
.cta-loi{color:#b4453c}
.hero .cta-ok,.hero .cta-loi{color:#fff}

/* ---- 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)}
.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:#fff}

/* Đầu trang: từ 1320px trở xuống, ba khối (menu · tên web · nút) không còn đủ chỗ
   trên một hàng. Grid "1fr auto 1fr" ép cột menu và cột nút rộng BẰNG NHAU, mà
   menu cần chỗ gấp đôi cột nút -> chữ bị cắt cụt giữa chừng ("Kin...").
   Cho menu xuống hàng riêng, chiếm trọn bề ngang. */
@media(max-width:1320px) and (min-width:821px){
  .dau .khung{grid-template-columns:auto 1fr;
              grid-template-areas:"ten phai" "menu menu";row-gap:14px}
  .ten-web{grid-area:ten;text-align:left}
  .phai{grid-area:phai}
  .menu{grid-area:menu}
}

@media(max-width:820px){
  .dau .khung{grid-template-columns:auto 1fr;
              grid-template-areas:"ten phai" "menu menu";
              column-gap:12px;row-gap:12px;padding:14px 20px}
  /* Tên blog dài thì cho XUỐNG DÒNG (bỏ nowrap của bản gốc), đừng để nó
     chiếm hết chỗ rồi bóp nút bên phải thành "Nhận / bài / mới" ba dòng. */
  .ten-web{grid-area:ten;text-align:left;font-size:1.05rem;
           white-space:normal;line-height:1.25;min-width:0}
  .phai{grid-area:phai;gap:12px;align-items:start}
  .phai .lh{display:none}
  .phai .nut{padding:8px 14px;font-size:.84rem;white-space:nowrap}
  /* Menu điện thoại: một hàng chuyên mục trượt ngang, KHÔNG dùng nút ba gạch.
     Khách thấy ngay có những mục nào, đỡ một lần bấm. Bản cũ để .menu{display:none}
     nên người xem bằng điện thoại không có đường nào sang chuyên mục — mà phần lớn
     khách bất động sản đọc bằng điện thoại. */
  .menu{grid-area:menu;display:flex;flex-wrap:nowrap;gap:8px;
        overflow-x:auto;scrollbar-width:none;
        margin:0 -20px;padding:2px 20px}
  .menu::-webkit-scrollbar{display:none}
  .menu a{flex:0 0 auto;color:var(--mo);
          border:1px solid var(--vien);border-radius:999px;
          padding:7px 14px;font-size:.86rem}
  .hero{padding:70px 0 76px}
  .hero h1{font-size:2.05rem}
  .bai{grid-template-columns:1fr;gap:16px}
  .bai-don h1{font-size:1.9rem}
}