/* ═══════════════════════════════════════════════════════════
   Trang bài viết tin tức. Nạp SAU sp.css (dùng chung thanh điều
   hướng, nút, đường dẫn, khối gọi cuối, chân trang). Chỉ khai
   những gì riêng cho bài viết.
   ═══════════════════════════════════════════════════════════ */

/* ── Phần đầu bài ── */
.bai__dau{padding:2.6rem 0 0}
.bai__meta{display:flex; flex-wrap:wrap; gap:.6rem 1.4rem; align-items:center}
.bai__meta .eyebrow{color:var(--gold-ink)}
.bai__meta span{font-size:.74rem; font-weight:300; letter-spacing:.08em; color:var(--ink-soft)}
.bai__dau h1{margin:1.3rem 0 0; max-width:22ch; font-weight:300; letter-spacing:-.02em;
  line-height:1.15; font-size:clamp(1.9rem,4.2vw,3.4rem)}
.bai__dau h1::after{content:'.'; color:var(--gold)}
.bai__lede{margin:1.6rem 0 0; max-width:60ch; font-size:clamp(1rem,1.3vw,1.18rem);
  font-weight:300; line-height:1.85; color:var(--ink-soft)}

/* Ảnh mở đầu: khổ ngang rộng, cắt cover */
.bai__anh{margin:3rem 0 0; background:var(--paper-2)}
.bai__anh img{width:100%; aspect-ratio:21/9; object-fit:cover; display:block}
.bai__anh figcaption{padding:.8rem 0 0; font-size:.74rem; font-weight:300; color:#8D867C; letter-spacing:.04em}
@media (max-width:760px){ .bai__anh img{aspect-ratio:4/3} }

/* ── Thân bài: cột chữ + cột bên dính ── */
.bai__luoi{display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:3.5rem; padding:3.2rem 0 4rem;
  align-items:start}
@media (max-width:1000px){ .bai__luoi{grid-template-columns:1fr; gap:2.5rem; padding:3rem 0 3.5rem} }
/* Cột chữ chiếm hết phần còn lại bên trái cột bên (trước đây chặn 68ch, để trống một dải
   rộng giữa chữ và cột bên). Vẫn chặn 92ch để dòng không dài quá mức đọc được ở màn rất rộng. */
.than{max-width:92ch; font-weight:300; line-height:1.9; font-size:1.04rem; color:var(--ink)}
.than > *:first-child{margin-top:0}
.than p{margin:1.2rem 0}
.than h2{margin:3rem 0 1rem; font-weight:300; letter-spacing:.05em; text-transform:uppercase;
  font-size:clamp(1.15rem,2vw,1.5rem); line-height:1.35; padding-top:1.4rem;
  border-top:1px solid var(--line)}
.than h3{margin:2rem 0 .6rem; font-weight:500; font-size:1.02rem; letter-spacing:0}
.than ul, .than ol{margin:1rem 0; padding-left:1.3rem}
.than li{margin:.45rem 0}
.than li::marker{color:var(--gold-ink)}
.than strong{font-weight:500}
.than blockquote{margin:2rem 0; padding:.2rem 0 .2rem 1.4rem; border-left:2px solid var(--gold);
  font-size:1.08rem; line-height:1.75; color:var(--ink)}
.than blockquote cite{display:block; margin-top:.6rem; font-style:normal; font-size:.76rem;
  letter-spacing:.12em; text-transform:uppercase; color:var(--gold-ink)}
.than table{width:100%; border-collapse:collapse; margin:1.6rem 0; font-size:.9rem}
.than th, .than td{padding:.8rem .9rem .8rem 0; text-align:left; vertical-align:top;
  border-bottom:1px solid var(--line-soft); line-height:1.6}
.than th{font-size:.66rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gold-ink); border-bottom-color:var(--line)}
.than .chuY{margin:2rem 0; padding:1.4rem 1.6rem; background:var(--paper-2);
  border-top:2px solid var(--oliu); font-size:.94rem}
.than .chuY b{display:block; margin-bottom:.4rem; font-size:.68rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--oliu)}
.than figure{margin:2rem 0}
.than figure img{width:100%; display:block}
.than figcaption{padding-top:.7rem; font-size:.76rem; color:#8D867C}
.than .luuY{font-size:.84rem; color:#8D867C; border-top:1px solid var(--line-soft); padding-top:1.2rem; margin-top:3rem}

/* Cột bên: mục lục + hộp tư vấn, dính theo khi cuộn */
.ben{position:sticky; top:101px; display:grid; gap:2rem}
@media (max-width:1000px){ .ben{position:static} }
.ben__hop{border-top:1px solid var(--line); padding-top:1.2rem}
.ben__hop b{display:block; font-size:.66rem; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:var(--gold-ink); margin-bottom:.9rem}
.mucluc{list-style:none; margin:0; padding:0}
.mucluc li{margin:0}
.mucluc a{display:block; padding:.5rem 0; font-size:.86rem; font-weight:300; line-height:1.5;
  color:var(--ink-soft); border-bottom:1px solid var(--line-soft); transition:color .3s ease}
.mucluc a:hover, .mucluc a.on{color:var(--ink)}
.mucluc a.on{font-weight:400}
.ben__tuvan{background:var(--paper-2); border-top:2px solid var(--oliu); padding:1.6rem 1.5rem}
.ben__tuvan b{color:var(--oliu)}
.ben__tuvan p{margin:0 0 1.2rem; font-size:.88rem; font-weight:300; line-height:1.8; color:var(--ink-soft)}
.ben__tuvan .btn{width:100%}
.ben__tuvan small{display:block; margin-top:.9rem; font-size:.78rem; color:var(--ink-soft); font-weight:300}
.ben__tuvan small a{border-bottom:1px solid var(--line)}

/* ── Bài liên quan ── */
.lienquan{padding:3.5rem 0; border-top:1px solid var(--line)}
.lienquan h2{margin:1.1rem 0 0; font-weight:300; letter-spacing:.05em; text-transform:uppercase;
  font-size:clamp(1.2rem,2.2vw,1.7rem)}
.posts{display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; margin-top:2.8rem}
@media (max-width:900px){ .posts{grid-template-columns:1fr} }
.post{display:flex; flex-direction:column; gap:1rem}
.post figure{margin:0; aspect-ratio:16/10; overflow:hidden; background:var(--paper-2)}
.post img{width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease)}
.post:hover img{transform:scale(1.04)}
.post em{font-style:normal; font-size:.7rem; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:var(--gold-ink)}
.post h3{margin:0; font-size:1.08rem; font-weight:400; line-height:1.5; letter-spacing:-.01em}
.post p{margin:0; font-size:.86rem; font-weight:300; line-height:1.75; color:var(--ink-soft)}
.post time{font-size:.74rem; font-weight:300; color:#8D867C; letter-spacing:.06em}

/* ── Trang danh sách tin ── */
.tin__dau{padding:2.6rem 0 0}
.tin__dau h1{margin:1.3rem 0 0; font-weight:300; letter-spacing:-.02em; line-height:1.15;
  font-size:clamp(1.9rem,4.2vw,3.4rem)}
.tin__dau h1::after{content:'.'; color:var(--gold)}
.tin__dau p{margin:1.4rem 0 0; max-width:56ch; font-weight:300; line-height:1.85; color:var(--ink-soft)}
.tin__loc{display:flex; flex-wrap:wrap; gap:.5rem; margin-top:2.4rem}
.tin__loc a{padding:.55em 1em; font-size:.74rem; font-weight:500; letter-spacing:.08em;
  text-transform:uppercase; border:1px solid var(--line); color:var(--ink-soft); transition:all .3s ease}
.tin__loc a:hover, .tin__loc a.on{border-color:var(--ink); color:var(--ink)}
.tin__danhsach{padding:3rem 0 5rem}
.tin__danhsach .posts{margin-top:0}

/* ── Cột bên: danh mục bài viết + bài mới ── */
.danhmuc a, .tin__loc a{display:flex; justify-content:space-between; align-items:baseline; gap:1rem}
.danhmuc i, .tin__loc i{font-style:normal; font-size:.72rem; font-weight:300; letter-spacing:.06em; color:var(--gold-ink)}
.tin__loc a{display:inline-flex; gap:.5rem}
.baimoi{list-style:none; margin:0; padding:0}
.baimoi a{display:block; padding:.7rem 0; font-size:.86rem; font-weight:400; line-height:1.5; color:var(--ink);
  border-bottom:1px solid var(--line-soft); transition:color .3s ease}
.baimoi a:hover{color:var(--gold-ink)}
.baimoi small{display:block; margin-top:.25rem; font-size:.72rem; font-weight:300; color:#8D867C; letter-spacing:.06em}
/* mục lục dài (bài có 10–12 mục) thì cuộn trong hộp, không đẩy danh mục xuống quá xa */
.mucluc--bai{max-height:19rem; overflow:auto}
/* cột bên dài hơn khung nhìn thì không dính nữa, để cuộn cùng trang */
@media (max-height:1000px){ .bai__luoi .ben{position:static} }
/* ảnh và bảng trong thân bài nhập từ web cũ */
.than figure img{max-width:100%; height:auto; background:var(--paper-2)}
.than table{display:block; overflow-x:auto}
.than h2{scroll-margin-top:100px}
.post[hidden]{display:none}

/* hộp liên kết nội bộ cuối bài */
.noibo ul{list-style:none; margin:.4rem 0 0; padding:0}
.noibo li{margin:.35rem 0}
.noibo a{color:var(--ink); border-bottom:1px solid var(--line); transition:border-color .3s ease}
.noibo a:hover{border-bottom-color:var(--oliu)}

/* ═════ Sản phẩm gợi ý cuối bài (bài tư vấn kênh bán) ═════ */
.goiy{padding:3.5rem 0; border-top:1px solid var(--line); background:var(--paper-2)}
.goiy__dau{display:flex; justify-content:space-between; align-items:flex-end; gap:1.5rem; flex-wrap:wrap}
.goiy h2{margin:1.1rem 0 0; font-weight:300; letter-spacing:.05em; text-transform:uppercase;
  font-size:clamp(1.2rem,2.2vw,1.7rem); line-height:1.35}
.goiy__tat{font-size:.74rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--ink);
  padding-bottom:.2em; border-bottom:1px solid var(--gold)}
.goiy__tat:hover{color:var(--gold-ink)}
.gy{display:grid; grid-template-columns:repeat(4,1fr); gap:1.6rem; margin-top:2.4rem}
@media (max-width:900px){ .gy{grid-template-columns:repeat(2,1fr); gap:1.2rem} }
.gy__the{display:flex; flex-direction:column; gap:.45rem; color:inherit}
.gy__the figure{margin:0 0 .5rem; aspect-ratio:4/5; overflow:hidden; background:var(--paper)}
.gy__the img{width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease)}
.gy__the:hover img{transform:scale(1.04)}
.gy__the em{font-style:normal; font-size:.66rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-ink)}
.gy__the h3{margin:0; font-size:.98rem; font-weight:400; line-height:1.45}
.gy__the span{font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft)}
.gy__the:hover h3{color:var(--slogan-oliu, #5B6B2E)}

/* ═════ CHÍNH SÁCH BẢO MẬT: năm cam kết ═════ */
.cs5{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:0; margin:2.8rem 0 0;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.cs5__o{display:flex; flex-direction:column; gap:.9rem; padding:1.6rem 1.4rem 1.7rem;
  border-left:1px solid var(--line-soft); color:var(--ink); transition:background .3s}
.cs5__o:first-child{border-left:0; padding-left:0}
.cs5__o:hover{background:var(--paper-2)}
.cs5__o i{font-style:normal; font-family:'Cormorant Garamond',serif; font-size:2.2rem; line-height:1;
  color:var(--gold-ink)}
.cs5__o b{font-weight:400; font-size:.92rem; line-height:1.55}
@media (max-width:1000px){
  .cs5{grid-template-columns:1fr}
  .cs5__o{flex-direction:row; align-items:baseline; gap:1.1rem; padding:1rem 0;
    border-left:0; border-top:1px solid var(--line-soft)}
  .cs5__o:first-child{border-top:0}
  .cs5__o i{font-size:1.6rem; min-width:2ch}
}