/*
Theme Name: Blog Môi Giới
Theme URI: https://sieulytuong.com
Description: Giao diện blog cho môi giới bất động sản — kể chuyện khu vực, chuyện khách hàng. Tối ưu tốc độ, đọc trên điện thoại và SEO (thẻ mô tả, Open Graph, dữ liệu có cấu trúc). Đổi được trong Giao diện › Tuỳ chỉnh, không phải sửa code.
Version: 3.0
Requires at least: 6.0
Requires PHP: 7.4
Author: Realtor OS
Text Domain: blog-don-gian
Tags: blog, one-column, custom-colors, seo-ready
*/

/* ============================================================
   1. BIẾN — màu thương hiệu do bạn chọn, ghi đè trong functions.php
   ============================================================ */
:root{
  --chinh:#0e8077;                 /* MÀU THƯƠNG HIỆU */
  --chinh-dam:#0a5f58;
  --chinh-nhat:#f2faf9;
  --nhan:#c9a227;              /* MÀU NHẤN PHỤ — nhãn nhỏ, gạch chân tiêu mục */
  --chu:#15181a;
  --mo:#5f6b72;
  --rat-mo:#8b969c;
  --vien:#e6e9eb;
  --nen-phu:#f7f9f9;
  --toi-da:1120px;
  --doc:min(720px,100%);
  --bo:10px;
  --bong-nang:0 12px 40px rgba(16,24,32,.12);
  --nhanh:.18s cubic-bezier(.4,0,.2,1);
}

/* ============================================================
   2. NỀN TẢNG
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:#fff;color:var(--chu);
  font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-wrap:break-word;
}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
h1,h2,h3,h4{letter-spacing:-.025em;line-height:1.2;margin:0}
:focus-visible{outline:2px solid var(--chinh);outline-offset:3px;border-radius:4px}
.an{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.bo-qua{position:absolute;left:-9999px;top:0;background:var(--chinh);color:#fff;padding:12px 20px;z-index:200}
.bo-qua:focus{left:0}
.khung{max-width:var(--toi-da);margin:0 auto;padding:0 24px}

/* ============================================================
   3. NÚT
   ============================================================ */
.nut{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--chinh);color:#fff;font-weight:600;font-size:.95rem;
  padding:11px 22px;border-radius:999px;white-space:nowrap;
  transition:background var(--nhanh),transform var(--nhanh),box-shadow var(--nhanh);
}
.nut:hover{background:var(--chinh-dam);transform:translateY(-1px);box-shadow:0 6px 18px rgba(0,0,0,.14)}
.nut:active{transform:translateY(0)}
.nut-vien{background:transparent;color:var(--chinh);box-shadow:inset 0 0 0 1.5px var(--chinh)}
.nut-vien:hover{background:var(--chinh);color:#fff}

/* ============================================================
   4. ĐẦU TRANG
   ============================================================ */
.dau{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.92);backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid var(--vien)}
.dau .khung{max-width:1280px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:28px;padding:14px 24px}
.menu{display:flex;gap:22px;align-items:center;justify-content:center;min-width:0;list-style:none;margin:0;padding:0}
.menu li{list-style:none}
.menu a{font-size:.925rem;font-weight:500;color:var(--mo);white-space:nowrap;transition:color var(--nhanh);position:relative;padding:4px 0}
.menu a:hover,.menu a[aria-current]{color:var(--chinh)}
.menu a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;background:var(--chinh);transition:right var(--nhanh)}
.menu a:hover::after{right:0}
.ten-web{font-size:1.3rem;font-weight:800;letter-spacing:-.03em;white-space:nowrap}
.ten-web img{max-height:40px;width:auto}
.phai{display:flex;align-items:center;justify-content:flex-end;gap:18px}
.phai .lh{font-size:.925rem;font-weight:500;color:var(--mo);white-space:nowrap;transition:color var(--nhanh)}
.phai .lh:hover{color:var(--chinh)}
.mo-menu{display:none;width:42px;height:42px;align-items:center;justify-content:center;border-radius:8px;color:var(--chu)}
.mo-menu:hover{background:var(--nen-phu)}
.mo-menu svg{width:22px;height:22px}

/* Ngăn kéo menu trên điện thoại */
.keo{position:fixed;inset:0;z-index:150;visibility:hidden;opacity:0;transition:opacity var(--nhanh),visibility var(--nhanh)}
.keo[data-mo="1"]{visibility:visible;opacity:1}
.keo-nen{position:absolute;inset:0;background:rgba(12,18,22,.45)}
.keo-hop{position:absolute;top:0;right:0;bottom:0;width:min(320px,86vw);background:#fff;padding:20px;display:flex;flex-direction:column;gap:4px;transform:translateX(100%);transition:transform .22s cubic-bezier(.4,0,.2,1);overflow-y:auto}
.keo[data-mo="1"] .keo-hop{transform:none}
.keo-dong{align-self:flex-end;width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:8px;color:var(--mo)}
.keo-dong svg{width:22px;height:22px}
.keo-hop a{padding:13px 4px;font-size:1.05rem;font-weight:600;border-bottom:1px solid var(--vien)}
.keo-hop a.nut{border-bottom:0}
.keo-hop .nut{margin-top:18px;justify-content:center;padding:14px}

/* ============================================================
   5. DẢI MỞ ĐẦU
   ============================================================ */
.hero{
  background:linear-gradient(135deg,var(--chinh-dam) 0%,var(--chinh) 55%,color-mix(in srgb,var(--chinh) 74%,#fff) 100%);
  color:#fff;padding:96px 0 104px;text-align:center;position:relative;overflow:hidden;
}
.hero::after{content:"";position:absolute;inset:0;background:radial-gradient(1000px 380px at 50% -10%,rgba(255,255,255,.16),transparent 70%);pointer-events:none}
.hero .khung{position:relative;z-index:1}
.hero .nhan{display:inline-block;font-size:.8rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--nhan);margin-bottom:18px}
.hero h1{font-size:clamp(1.95rem,4.6vw,3.1rem);font-weight:800;line-height:1.1;letter-spacing:-.035em;margin:0 auto 20px;max-width:21ch}
.hero .phu{margin:0 auto 32px;max-width:56ch;font-size:1.06rem;opacity:.9;line-height:1.6}
.dangky{display:flex;max-width:520px;margin:0 auto;background:#fff;border-radius:999px;padding:6px 6px 6px 24px;align-items:center;box-shadow:var(--bong-nang);gap:10px}
.dangky span{flex:1;text-align:left;color:var(--rat-mo);font-size:.98rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ============================================================
   6. DANH SÁCH BÀI
   ============================================================ */
.ds{padding:60px 0 20px}
.tieu-muc{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin:0 0 26px;padding-bottom:14px;border-bottom:2px solid var(--nhan)}
.tieu-muc h2{font-size:1.12rem;font-weight:700;letter-spacing:.02em;text-transform:uppercase}
.tieu-muc a{font-size:.9rem;font-weight:500;color:var(--mo)}
.tieu-muc a:hover{color:var(--chinh)}

/* Bài nổi bật */
.noi-bat{display:grid;grid-template-columns:1.15fr 1fr;gap:44px;align-items:center;padding-bottom:44px;border-bottom:1px solid var(--vien)}
.noi-bat .bai-anh img{aspect-ratio:16/10}
.noi-bat h2{font-size:clamp(1.6rem,2.7vw,2.1rem);font-weight:800;line-height:1.18;margin:12px 0 14px}
.noi-bat:hover h2{color:var(--chinh)}
.noi-bat p{color:var(--mo);font-size:1.04rem;line-height:1.6;margin:0 0 18px}

.chuyen-muc{display:inline-block;font-size:.76rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--chinh)}
.chuyen-muc:hover{color:var(--chinh-dam)}

/* Thẻ bài trong danh sách */
.bai{display:grid;grid-template-columns:250px 1fr;gap:32px;padding:30px 0;border-bottom:1px solid var(--vien);align-items:start}
.bai.khong-anh{grid-template-columns:1fr}
.bai-anh{overflow:hidden;border-radius:var(--bo);background:var(--nen-phu)}
.bai-anh img{aspect-ratio:4/3;object-fit:cover;width:100%;transition:transform .4s ease}
.bai:hover .bai-anh img,.noi-bat:hover .bai-anh img,.the:hover .bai-anh img{transform:scale(1.04)}
.bai h2{font-size:1.38rem;font-weight:700;line-height:1.28;margin:9px 0}
.bai:hover h2{color:var(--chinh)}
.bai p{margin:0 0 14px;color:var(--mo);font-size:1.01rem;line-height:1.55}
.meta{font-size:.885rem;color:var(--rat-mo);display:flex;flex-wrap:wrap;align-items:center;column-gap:8px;row-gap:2px}
/* min-width:0 để tên tác giả dài tự xuống dòng thay vì tràn ra ngoài thẻ bài */
.meta > *{min-width:0}
.meta b{font-weight:600;color:var(--mo)}
.meta .cham{opacity:.5}

/* Lưới 3 cột — bài liên quan */
.luoi{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.the{display:flex;flex-direction:column;gap:10px}
.the .bai-anh img{aspect-ratio:16/10}
.the h3{font-size:1.09rem;font-weight:700;line-height:1.35}
.the:hover h3{color:var(--chinh)}

/* Trạng thái trống */
.trong{text-align:center;padding:72px 24px;background:var(--nen-phu);border-radius:14px;border:1px dashed var(--vien)}
.trong h2{font-size:1.4rem;margin-bottom:10px}
.trong p{color:var(--mo);max-width:46ch;margin:0 auto 20px}

/* ============================================================
   7. BÀI VIẾT
   ============================================================ */
.duong-dan{font-size:.85rem;color:var(--rat-mo);padding:22px 0 0;display:flex;flex-wrap:wrap;gap:7px;align-items:center}
.duong-dan a:hover{color:var(--chinh)}
.duong-dan i{font-style:normal;opacity:.55}

.bai-don{max-width:var(--doc);margin:0 auto;padding:26px 24px 24px}
.bai-don .dau-bai{margin-bottom:30px}
.bai-don h1{font-size:clamp(1.75rem,4vw,2.55rem);font-weight:800;line-height:1.14;letter-spacing:-.032em;margin:12px 0 14px}
.bai-don .tom-tat{font-size:1.14rem;color:var(--mo);line-height:1.6;margin:0 0 18px}
.anh-bia{margin:0 0 34px;border-radius:12px;overflow:hidden;background:var(--nen-phu)}
.anh-bia img{width:100%;object-fit:cover}

.noi-dung{font-family:Lora,Georgia,"Times New Roman",serif;font-size:1.16rem;line-height:1.78;color:#1d2226}
.noi-dung > *:first-child{margin-top:0}
.noi-dung p{margin:0 0 1.25em}
.noi-dung h2{font-family:Inter,system-ui,sans-serif;font-size:1.55rem;font-weight:700;margin:1.9em 0 .55em;line-height:1.28}
.noi-dung h3{font-family:Inter,system-ui,sans-serif;font-size:1.24rem;font-weight:700;margin:1.6em 0 .45em}
.noi-dung h4{font-family:Inter,system-ui,sans-serif;font-size:1.08rem;font-weight:700;margin:1.4em 0 .4em}
.noi-dung a{color:var(--chinh);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;font-weight:500}
.noi-dung a:hover{color:var(--chinh-dam)}
.noi-dung ul,.noi-dung ol{margin:0 0 1.25em;padding-left:1.4em}
.noi-dung li{margin-bottom:.5em}
.noi-dung li::marker{color:var(--chinh)}
.noi-dung img,.noi-dung figure{border-radius:10px;margin:1.7em 0}
.noi-dung figure img{margin:0}
.noi-dung figcaption{font-family:Inter,sans-serif;text-align:center;color:var(--rat-mo);font-size:.88rem;margin-top:.7em;line-height:1.5}
.noi-dung blockquote{margin:1.8em 0;padding:4px 0 4px 24px;border-left:3px solid var(--chinh);color:var(--mo);font-style:italic;font-size:1.1rem}
.noi-dung blockquote p:last-child{margin-bottom:0}
.noi-dung hr{border:0;border-top:1px solid var(--vien);margin:2.4em 0}
.noi-dung table{width:100%;border-collapse:collapse;font-family:Inter,sans-serif;font-size:.98rem;margin:1.7em 0;display:block;overflow-x:auto}
.noi-dung th,.noi-dung td{border:1px solid var(--vien);padding:11px 14px;text-align:left;vertical-align:top}
.noi-dung th{background:var(--nen-phu);font-weight:700}
.noi-dung code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9em;background:var(--nen-phu);padding:2px 6px;border-radius:5px}
.noi-dung pre{background:#15181a;color:#e8edf0;padding:18px;border-radius:10px;overflow-x:auto;font-size:.92rem}
.noi-dung pre code{background:none;padding:0;color:inherit}
.noi-dung details{border:1px solid var(--vien);border-radius:10px;padding:2px 18px;margin:1.3em 0;font-family:Inter,sans-serif}
.noi-dung summary{cursor:pointer;font-weight:700;padding:14px 0}
.noi-dung iframe{max-width:100%;border-radius:10px;aspect-ratio:16/9;width:100%;height:auto}

/* Mục lục tự sinh */
.muc-luc{font-family:Inter,sans-serif;background:var(--nen-phu);border:1px solid var(--vien);border-radius:12px;padding:20px 24px;margin:0 0 34px}
.muc-luc > b{display:block;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--rat-mo);margin-bottom:12px}
.muc-luc ol{margin:0;padding-left:1.2em;font-size:.98rem}
.muc-luc li{margin-bottom:7px}
.muc-luc a{color:var(--chu);text-decoration:none;font-weight:500}
.muc-luc a:hover{color:var(--chinh)}

/* Hộp tác giả */
.tac-gia{display:flex;gap:18px;align-items:flex-start;margin:44px 0 0;padding:24px;background:var(--nen-phu);border-radius:14px}
.tac-gia img{border-radius:50%;flex-shrink:0;width:60px;height:60px;object-fit:cover}
.tac-gia .ten{font-weight:700;font-size:1.03rem;margin-bottom:4px}
.tac-gia p{margin:0;color:var(--mo);font-size:.96rem;line-height:1.55}
.tac-gia .nut{margin-top:14px;font-size:.9rem;padding:9px 18px}

/* Thẻ chuyên mục cuối bài */
.the-bai{display:flex;flex-wrap:wrap;gap:8px;margin-top:32px}
.the-bai a{font-size:.85rem;font-weight:500;color:var(--mo);background:var(--nen-phu);border:1px solid var(--vien);padding:6px 14px;border-radius:999px;transition:all var(--nhanh)}
.the-bai a:hover{color:var(--chinh);border-color:var(--chinh);background:var(--chinh-nhat)}

/* Bài trước / bài sau */
.dieu-huong{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:40px;padding-top:32px;border-top:1px solid var(--vien)}
.dieu-huong a{padding:18px 20px;border:1px solid var(--vien);border-radius:12px;transition:all var(--nhanh)}
.dieu-huong a:hover{border-color:var(--chinh);background:var(--chinh-nhat)}
.dieu-huong .nhan{display:block;font-size:.78rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--rat-mo);margin-bottom:7px}
.dieu-huong .tieu{font-weight:600;font-size:1rem;line-height:1.4}
.dieu-huong .sau{text-align:right}

.lien-quan{max-width:var(--toi-da);margin:56px auto 0;padding:0 24px}

/* ============================================================
   8. MỜI THEO DÕI + CHÂN TRANG
   ============================================================ */
.moi{background:var(--nen-phu);border-top:1px solid var(--vien);margin-top:60px;padding:64px 0;text-align:center}
.moi h3{font-size:clamp(1.5rem,3vw,1.95rem);font-weight:800;margin:0 0 12px}
.moi p{margin:0 auto 26px;color:var(--mo);max-width:48ch;line-height:1.6}

.cuoi{background:#fff;border-top:1px solid var(--vien);padding:52px 0 0}
.cuoi-luoi{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:40px;padding-bottom:40px}
.cuoi h4{font-size:.8rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--rat-mo);margin:0 0 16px}
.cuoi-gt .ten{font-size:1.22rem;font-weight:800;letter-spacing:-.03em;margin-bottom:10px;display:block}
.cuoi-gt p{color:var(--mo);font-size:.96rem;line-height:1.6;margin:0 0 16px;max-width:42ch}
.cuoi ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px}
.cuoi ul a{color:var(--mo);font-size:.96rem;transition:color var(--nhanh)}
.cuoi ul a:hover{color:var(--chinh)}
.ban-quyen{border-top:1px solid var(--vien);padding:22px 0 30px;color:var(--rat-mo);font-size:.88rem;display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;align-items:center}

/* ============================================================
   9. PHÂN TRANG · TÌM KIẾM · NÚT ZALO NỔI
   ============================================================ */
.trang{display:flex;gap:9px;justify-content:center;flex-wrap:wrap;padding:38px 0 10px}
.trang a,.trang span{padding:9px 16px;border:1px solid var(--vien);border-radius:999px;color:var(--mo);font-size:.92rem;font-weight:500;transition:all var(--nhanh)}
.trang a:hover{border-color:var(--chinh);color:var(--chinh)}
.trang .current{background:var(--chinh);border-color:var(--chinh);color:#fff}

.tim{display:flex;gap:10px;max-width:520px}
.tim input{flex:1;padding:13px 20px;border:1px solid var(--vien);border-radius:999px;font-size:1rem;font-family:inherit;background:#fff;min-width:0}
.tim input:focus{outline:none;border-color:var(--chinh);box-shadow:0 0 0 3px var(--chinh-nhat)}

.trang-dau{padding:52px 0 30px;border-bottom:1px solid var(--vien)}
.trang-dau h1{font-size:clamp(1.7rem,3.6vw,2.4rem);font-weight:800;margin-bottom:10px}
.trang-dau p{color:var(--mo);margin:0;max-width:56ch;font-size:1.04rem}
.trang-dau .tim{margin-top:24px}

.zalo-noi{position:fixed;right:18px;bottom:18px;z-index:90;width:56px;height:56px;border-radius:50%;background:var(--chinh);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:var(--bong-nang);transition:transform var(--nhanh),background var(--nhanh)}
.zalo-noi:hover{transform:scale(1.07);background:var(--chinh-dam)}
.zalo-noi svg{width:26px;height:26px}

/* ============================================================
   10. ĐIỆN THOẠI / MÁY TÍNH BẢNG
   ============================================================ */
/* Màn hình vừa: giấu link Liên hệ chữ, giữ nút — menu 5 mục vẫn đủ chỗ */
@media(max-width:1180px){
  .dau .khung{gap:18px}
  .menu{gap:16px}
  .menu a{font-size:.88rem}
  .phai .lh{display:none}
}
@media(max-width:1000px){
  .luoi{grid-template-columns:repeat(2,1fr)}
  .cuoi-luoi{grid-template-columns:repeat(3,1fr);gap:32px}
  .cuoi-gt{grid-column:1/-1}
}
@media(max-width:960px){
  body{font-size:16px}
  .khung{padding:0 18px}
  .dau .khung{grid-template-columns:1fr auto;padding:11px 18px;gap:12px}
  .menu{display:none}
  .mo-menu{display:flex}
  .phai .lh,.phai > .nut{display:none}
  .ten-web{text-align:left;font-size:1.15rem}
  .hero{padding:64px 0 70px}
  .dangky{flex-direction:column;border-radius:16px;padding:16px;gap:12px}
  .dangky span{text-align:center;width:100%}
  .dangky .nut{width:100%}
  .noi-bat{grid-template-columns:1fr;gap:20px;padding-bottom:34px}
  .bai{grid-template-columns:1fr;gap:14px}
  .bai-anh img{aspect-ratio:16/9}
  .luoi{grid-template-columns:1fr;gap:26px}
  .bai-don{padding:18px 18px 20px}
  .noi-dung{font-size:1.08rem}
  .dieu-huong{grid-template-columns:1fr}
  .dieu-huong .sau{text-align:left}
  .tac-gia{flex-direction:column;gap:12px}
  .cuoi-luoi{grid-template-columns:1fr;gap:28px}
  .ban-quyen{justify-content:center;text-align:center}
  .zalo-noi{width:50px;height:50px;right:14px;bottom:14px}
}

/* ============================================================
   11. IN GIẤY · GIẢM CHUYỂN ĐỘNG
   ============================================================ */
@media print{
  .dau,.moi,.cuoi,.zalo-noi,.dieu-huong,.lien-quan,.duong-dan,.the-bai,.muc-luc{display:none!important}
  body{font-size:12pt}
  .noi-dung a{text-decoration:none;color:#000}
  .bai-don{max-width:100%}
}
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}