/* ============ TỬ VI MINGLI — Design tokens + Header/Footer dùng chung ============ */
/* ⚠ BẢNG MÀU CHUẨN DUY NHẤT CỦA SITE ("trắng ngả vàng + vàng cổ").
   Trang mới KHÔNG được tự chế màu nền / màu khung. Chỉ dùng biến ở đây:
     nền trang  = var(--surface-page)  #F5F0DF  (trắng ngả vàng — đổi 10/08/2026, trước là be #EFE6CC)
     nền thẻ    = var(--surface-card)  #FFFDF5
     khung vàng = var(--line-gold)     rgba(122,96,44,.35)
     viền thẻ   = var(--border-card)   rgba(78,68,47,.28)
     chữ vàng   = var(--gold-500)      #9C7E3D
   Xem WEB-QUY-TAC-MAU.md ở gốc dự án. */
:root{
  --paper-50:#FFFDF5; --paper-100:#FAF6E8; --paper-200:#F5F0DF; --paper-300:#EDE6D0; --paper-400:#DDD3B6;
  --ink-950:#231C13; --ink-900:#2E2619; --ink-800:#3D3423; --ink-700:#4E442F; --ink-600:#61553C;
  --gold-200:#E8D9AE; --gold-300:#D3BC82; --gold-400:#B99A55; --gold-500:#9C7E3D; --gold-600:#7E632C; --gold-700:#644D20;
  --red-100:#E9C4BC; --red-400:#B4453A; --red-500:#9E2F23; --red-600:#86251B; --red-700:#6E1D15;
  --ivory-100:#231C13; --ivory-300:#3D3423; --ivory-500:#8A7F69;
  --lavender-400:#7C7059; --lavender-600:#9C9179;
  --jade-500:#2F7A53; --amber-500:#A9721B; --azure-500:#35618F;
  --line-gold:rgba(122,96,44,.35); --line-soft:rgba(61,52,35,.14);
  --surface-page:var(--paper-200); --surface-card:var(--paper-50); --surface-raised:var(--paper-100);
  --surface-inset:#F8F3E4; --surface-hover:var(--paper-100);
  --text-heading:var(--ink-950); --text-body:var(--ink-800); --text-muted:#7C7059;
  --text-faint:#9C9179; --text-on-accent:#FBF3E6;
  --accent:var(--gold-400); --accent-strong:var(--gold-500);
  --danger:var(--red-500); --border-card:rgba(78,68,47,.28); --border-control:rgba(61,52,35,.30);
  --focus-ring:rgba(122,96,44,.45);
  --font-display:"Playfair Display","Times New Roman",serif;
  /* Font chữ nội dung CHUẨN toàn site = Noto Serif, khớp trang chủ (chốt 01/08/2026).
     Header/footer/khối "Đọc thêm" vẫn dùng Be Vietnam Pro nhờ khối khai báo lại
     riêng ở cuối file — cố ý, để thanh điều hướng gọn và tách khỏi phần đọc. */
  --font-body:"Noto Serif",Georgia,"Times New Roman",serif;
  --font-mono:"IBM Plex Mono",ui-monospace,monospace;
  --text-display-1:56px; --text-display-2:40px; --text-h1:32px; --text-h2:24px; --text-h3:19px;
  --text-body-size:15.5px; --text-small:13.5px; --text-caption:12px;
  --leading-display:1.12; --leading-heading:1.25; --leading-body:1.62;
  --tracking-caps:0.14em; --tracking-display:-0.01em;
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px; --space-6:24px;
  --space-8:32px; --space-10:40px; --space-12:48px; --space-16:64px; --space-20:80px;
  --radius-sm:6px; --radius-md:10px; --radius-lg:16px; --radius-pill:999px;
  --content-max:1120px; --control-height:44px; --control-height-sm:34px;
  /* Bóng đổ nhạt & trung tính hơn cho nền trắng ngả vàng (trước là nâu rgba(70,50,24)). */
  --shadow-card:0 12px 32px rgba(58,54,46,0.14); --shadow-raised:0 20px 48px rgba(58,54,46,0.20);
  --shadow-glow-gold:0 0 0 1px rgba(122,96,44,0.35),0 0 24px rgba(185,154,85,0.28);
  --ease-mystic:cubic-bezier(0.22,0.61,0.36,1); --duration-fast:150ms; --duration-slow:320ms;
}
*{box-sizing:border-box}
/* Nền + chữ mặc định cho MỌI trang — trang nào không tự khai báo body vẫn đúng màu */
html{background:var(--surface-page)}
body{margin:0;background:var(--surface-page);color:var(--text-body);font-family:var(--font-body)}
/* Ô nhập & nút KHÔNG tự kế thừa font từ trang (mặc định trình duyệt là Arial/system).
   Đặt ở mức thẻ nên mọi luật theo class trong từng trang vẫn đè được bình thường. */
button,input,select,textarea{font-family:inherit}

/* ---------- HEADER ----------
   ⚠ CỐ Ý GIỮ NỀN BE rgba(230,218,187) — đậm hơn nền trang, không đổi theo trang (10/08/2026).
   Header + logo đỏ + footer tối vốn được thiết kế trên nền be; giữ lại để dải điều hướng
   tách hẳn khỏi vùng nội dung. Menu 3 gạch ở mobile (.tv-nav dưới 820px) cũng vậy. */
.tv-header{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:var(--space-8);
  height:72px;padding:0 var(--space-8);background:rgba(230,218,187,0.92);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line-soft);font-family:var(--font-body)}
.tv-brand{display:flex;align-items:center;gap:var(--space-3);text-decoration:none}
.tv-logo{width:38px;height:38px;border-radius:var(--radius-sm);border:1px solid var(--line-gold);
  background:var(--red-600);display:flex;align-items:center;justify-content:center;color:var(--gold-200);
  font-family:var(--font-display);font-size:18px;flex-shrink:0}
.tv-brand-name{font-family:var(--font-display);font-size:19px;font-weight:600;color:var(--text-heading);letter-spacing:0.01em;white-space:nowrap;line-height:1.15}
.tv-brand-sub{font-size:11px;color:var(--text-faint);white-space:nowrap}
.tv-nav{display:flex;align-items:center;gap:var(--space-6);flex:1}
.tv-nav a{font-size:var(--text-small);font-weight:600;color:#1a1a1a;border-bottom:2px solid transparent;
  padding:4px 2px;cursor:pointer;white-space:nowrap;text-decoration:none;transition:color var(--duration-fast)}
.tv-nav a:hover{color:#882010}
.tv-nav a.active{font-weight:700;color:#882010;border-bottom-color:#882010}
.tv-pro-badge{display:inline-block;margin-left:4px;padding:1px 7px;border-radius:999px;
  font-size:10px;font-weight:700;letter-spacing:.08em;vertical-align:2px;
  color:#3a2a05;background:linear-gradient(135deg,#f0d17a,#c9a24b);box-shadow:0 1px 2px rgba(0,0,0,.25)}
.tv-header-cta{display:flex;align-items:center;gap:var(--space-3)}
.tv-btn-outline{display:inline-flex;align-items:center;justify-content:center;height:34px;padding:0 16px;
  border:1px solid var(--line-gold);border-radius:var(--radius-sm);background:transparent;color:var(--gold-500);
  font-family:var(--font-body);font-size:var(--text-small);font-weight:500;cursor:pointer;text-decoration:none}
.tv-btn-outline:hover{background:var(--accent-quiet,rgba(185,154,85,0.18))}
.tv-burger{display:none;background:none;border:none;font-size:22px;color:var(--text-heading);cursor:pointer}

/* ---------- FOOTER ---------- */
.tv-footer{border-top:1px solid var(--line-soft);background:var(--ink-950);font-family:var(--font-body)}
.tv-footer-grid{max-width:var(--content-max);margin:0 auto;padding:var(--space-16) var(--space-8) var(--space-10);
  display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr 0.9fr;gap:var(--space-8)}
.tv-footer-grid p{max-width:36ch;font-size:var(--text-small);color:var(--text-muted);line-height:var(--leading-body);margin:0}
.tv-footer h4{font-size:var(--text-caption);letter-spacing:var(--tracking-caps);text-transform:uppercase;
  color:var(--text-heading);font-weight:600;margin:0 0 var(--space-4)}
.tv-footer-links{display:flex;flex-direction:column;gap:var(--space-3)}
.tv-footer-links a{font-size:var(--text-small);color:var(--text-muted);cursor:pointer;text-decoration:none}
.tv-footer-links a:hover{color:var(--gold-500)}
.tv-seals{display:flex;gap:var(--space-2)}
.tv-seal{padding:6px 10px;border:1px solid var(--red-500);border-radius:4px;display:flex;align-items:center;
  justify-content:center;color:var(--red-400);font-family:var(--font-display);font-size:12px;font-weight:600;white-space:nowrap}
.tv-footer-bar{max-width:var(--content-max);margin:0 auto;padding:var(--space-6) var(--space-8);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:var(--space-3);border-top:1px solid var(--line-soft)}
.tv-footer-bar span{font-size:var(--text-caption);color:var(--text-faint)}

@media(max-width:820px){
  .tv-nav{display:none}
  .tv-burger{display:block}
  .tv-header{gap:var(--space-4)}
  .tv-footer-grid{grid-template-columns:1fr 1fr;gap:var(--space-6)}
}

/* ---------- FIX MOBILE: chống tràn ngang header/footer (mọi trang) ---------- */
.tv-header{flex-wrap:nowrap}
.tv-header-cta{min-width:0}
.tv-user{min-width:0}
.tv-user .em{max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:820px){
  .tv-brand-sub{display:none}
  .tv-burger{margin-left:auto}
  .tv-user .em{max-width:120px}
}
@media(max-width:520px){
  .tv-header{gap:12px;padding:0 14px}
  .tv-user .em{display:none}
  .tv-footer-grid{grid-template-columns:1fr;padding-left:20px;padding-right:20px}
}

/* ---------- FIX MOBILE: nút menu 3 gạch (.tv-burger) từng bị đẩy ra ngoài màn hình khi
   logo + huy hiệu điểm + ô tài khoản cộng lại rộng hơn viewport (header không được xuống dòng).
   Cách sửa: cho riêng tên thương hiệu được co lại + hiện "…" khi chật chỗ, còn burger/huy hiệu
   điểm/ô tài khoản giữ nguyên kích thước — để burger LUÔN đủ chỗ và luôn bấm được. ---------- */
@media(max-width:820px){
  .tv-brand{min-width:0;flex-shrink:1}
  .tv-brand>div{min-width:0}
  .tv-brand-name{overflow:hidden;text-overflow:ellipsis;max-width:100%}
  .tv-burger,.tvpro-hpts,.tv-header-cta{flex-shrink:0}
}

/* ---------- FIX MOBILE: footer gọn lại thành accordion (chỉ hiện mục chính) ---------- */
@media(max-width:640px){
  .tv-footer-grid{gap:0}
  .tv-footer-grid>div:first-child{margin-bottom:var(--space-6)}
  .tv-footer-grid>div.tv-footer-acc{border-top:1px solid var(--line-soft)}
  .tv-footer-grid>div.tv-footer-acc:last-of-type{border-bottom:1px solid var(--line-soft)}
  .tv-footer-grid>div.tv-footer-acc h4{
    display:flex;align-items:center;justify-content:space-between;gap:8px;
    margin:0;padding:15px 2px;cursor:pointer;user-select:none;
  }
  .tv-footer-grid>div.tv-footer-acc h4::after{
    content:'+';font-size:17px;font-weight:400;line-height:1;color:var(--text-faint);flex-shrink:0;
  }
  .tv-footer-grid>div.tv-footer-acc.tv-open h4::after{content:'−'}
  .tv-footer-grid>div.tv-footer-acc .tv-footer-links,
  .tv-footer-grid>div.tv-footer-acc .tv-seals{display:none;padding-bottom:16px}
  .tv-footer-grid>div.tv-footer-acc.tv-open .tv-footer-links{display:flex}
  .tv-footer-grid>div.tv-footer-acc.tv-open .tv-seals{display:flex}
}

/* ---------- FIX MOBILE: Mục lục bài viết chuyển lên đầu trang (thay vì tụt xuống cuối) ---------- */
.tv-toc-mobile{display:none}
@media(max-width:900px){
  .tv-toc-mobile{
    display:block;margin:0 0 26px;background:var(--surface-card);
    border:1px solid var(--border-card);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);
  }
  .tv-toc-mobile summary{
    list-style:none;cursor:pointer;padding:16px 20px;
    font-family:var(--font-display);font-weight:600;font-size:14.5px;
    letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--gold-600);
    display:flex;align-items:center;justify-content:space-between;gap:8px;
  }
  .tv-toc-mobile summary::-webkit-details-marker{display:none}
  .tv-toc-mobile summary::after{content:'+';font-size:18px;font-weight:400;color:var(--text-faint)}
  .tv-toc-mobile[open] summary::after{content:'−'}
  .tv-toc-mobile-links{display:flex;flex-direction:column;padding:0 20px 14px}
  .tv-toc-mobile-links a{
    font-family:var(--font-display);font-size:16px;line-height:1.35;color:var(--text-body);
    text-decoration:none;padding:9px 0 9px 14px;border-left:3px solid transparent;
  }
}

/* ---------- FIX MOBILE: menu 3 gạch mở dạng DỌC thả xuống (không tràn ngang) ---------- */
@media(max-width:820px){
  .tv-nav{
    position:fixed; top:72px; left:0; right:0; flex:none;
    flex-direction:column; align-items:stretch; gap:0;
    background:rgba(230,218,187,0.98); backdrop-filter:blur(8px);
    border-bottom:1px solid var(--line-soft);
    box-shadow:0 14px 26px rgba(70,50,24,0.20);
    padding:4px 16px 12px; z-index:29; max-height:calc(100vh - 72px); overflow-y:auto;
  }
  .tv-nav a{padding:13px 4px; font-size:15px; border-bottom:1px solid var(--line-soft); white-space:normal}
  .tv-nav a:last-child{border-bottom:none}
}

/* ---------- ĐỒNG BỘ HEADER/FOOTER MỌI TRANG ----------
   Một số trang (boi-tu-vi, ...) có <style> riêng ghi đè các biến token
   (vd --ink-950, --font-body). Header/footer dùng chung inherit các biến
   đó nên bị lệch màu/font. Khai báo LẠI toàn bộ token CHUẨN ngay trên
   .tv-header/.tv-footer để chúng luôn hiển thị y hệt trang "Xin quẻ",
   bất kể token cục bộ của trang. */
/* ---------- KHỐI "ĐỌC THÊM" (bài viết liên quan) dùng chung cho trang tool ---------- */
.tv-readmore{max-width:var(--content-max);margin:0 auto;padding:var(--space-10) var(--space-8) var(--space-16);font-family:var(--font-body)}
.tv-readmore .tv-rm-eyebrow{text-align:center;font-size:var(--text-caption);letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--gold-500);font-weight:500;margin-bottom:var(--space-3)}
.tv-readmore h2{margin:0 0 var(--space-8);text-align:center;font-family:var(--font-display);font-size:28px;color:var(--text-heading);font-weight:600}
.tv-rm-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-4)}
.tv-rm-grid a{display:block;text-decoration:none;background:var(--ink-900);border:1px solid var(--line-gold);border-radius:12px;padding:var(--space-5)}
.tv-rm-grid a:hover{box-shadow:var(--shadow-glow-gold)}
.tv-rm-grid .t{font-family:var(--font-display);font-size:16.5px;line-height:1.35;color:var(--text-heading);font-weight:600;margin-bottom:6px}
.tv-rm-grid .d{font-size:var(--text-small);color:var(--text-muted);line-height:var(--leading-body)}
.tv-rm-more{text-align:center;margin-top:var(--space-6)}
.tv-rm-more a{color:var(--gold-500);font-size:var(--text-small);font-weight:500;text-decoration:none}
.tv-rm-more a:hover{text-decoration:underline}
/* mobile: xếp 2 thẻ/hàng thay vì 1 thẻ/hàng — giữ nguyên cỡ chữ/icon/mô tả,
   chỉ đổi bố cục nên giảm hẳn chiều cao cuộn của khối "Đọc thêm" (19/08) */
@media(max-width:820px){
  .tv-rm-grid{grid-template-columns:repeat(2,1fr);gap:var(--space-3)}
  .tv-rm-grid a{padding:14px}
}
@media(max-width:380px){.tv-rm-grid{grid-template-columns:1fr}}

.tv-header, .tv-footer, .tv-readmore{
  --ink-950:#E6DABB; --ink-900:#FBF7EA; --ink-800:#F6F0DD; --ink-700:#E6DABB; --ink-600:#D9CBA6;
  --gold-200:#E8D9AE; --gold-300:#D3BC82; --gold-400:#B99A55; --gold-500:#9C7E3D; --gold-600:#7E632C; --gold-700:#644D20;
  --red-400:#A83226; --red-500:#882010; --red-600:#6B1A0C; --red-700:#4F1208;
  --ivory-100:#231C13; --ivory-300:#3D3423; --ivory-500:#7A6650;
  --lavender-400:#7C7059; --lavender-600:#9C9179;
  --jade-500:#2F7A53; --amber-500:#A9721B; --azure-500:#35618F;
  --line-gold:rgba(122,96,44,.35); --line-soft:rgba(61,52,35,.14);
  --surface-inset:#F8F3E4;
  --text-heading:var(--ivory-100); --text-body:var(--ivory-300); --text-muted:var(--lavender-400);
  --text-faint:var(--lavender-600); --text-on-accent:#FBF3E6;
  --accent:var(--gold-400); --accent-strong:var(--gold-500);
  --font-display:"Playfair Display","Times New Roman",serif;
  --font-body:"Be Vietnam Pro","Segoe UI",system-ui,sans-serif;
  --text-small:13.5px; --text-caption:12px;
  --leading-body:1.62; --tracking-caps:0.14em;
  --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px; --space-6:24px;
  --space-8:32px; --space-10:40px; --space-16:64px;
  --radius-sm:6px; --content-max:1120px;
  --shadow-glow-gold:0 0 0 1px rgba(122,96,44,0.35),0 0 24px rgba(185,154,85,0.28);
}

/* ===== EEAT — byline tác giả + khối Nguồn tham khảo (20/07/2026) ===== */
.byavatar{border-radius:4px !important;background:var(--red-600) !important;color:#F3E9D2 !important;
  font-size:15px !important;line-height:1;box-shadow:0 0 0 1px rgba(136,32,16,.35),0 1px 3px rgba(0,0,0,.18);}
.byline .byauthor{color:var(--text-heading);font-weight:600;text-decoration:none;
  border-bottom:1px solid var(--gold-400);}
.byline .byauthor:hover{color:var(--red-600);border-bottom-color:var(--red-600);}

.srcbox{margin:44px 0 8px;padding:24px 26px;border:1px solid var(--gold-300);border-radius:var(--radius-sm);
  background:linear-gradient(180deg,rgba(230,218,187,.35),rgba(230,218,187,.08));position:relative;}
.srcbox h2{font-family:var(--font-display);font-size:19px;margin:0 0 8px;color:var(--text-heading);
  border:0;padding:0;letter-spacing:.01em;}
.srcbox .src-intro{font-size:13.5px;color:var(--text-muted);margin:0 0 16px;line-height:1.6;}
.srcbox .src-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px;}
.srcbox .src-list li{padding-left:16px;border-left:2px solid var(--gold-400);}
.srcbox .src-ten{font-weight:600;color:var(--text-heading);font-family:var(--font-display);font-size:15.5px;}
.srcbox .src-han{color:var(--gold-600);font-size:13px;margin-left:7px;}
.srcbox .src-mota{display:block;font-size:13.5px;color:var(--text-muted);line-height:1.65;margin-top:4px;}
.srcbox .src-more{margin:18px 0 0;font-size:13.5px;}
.srcbox .src-more a{color:var(--red-600);text-decoration:none;border-bottom:1px solid var(--gold-400);}
.srcbox .src-more a:hover{border-bottom-color:var(--red-600);}
@media(max-width:520px){.srcbox{padding:18px 16px;}}

/* Trang Giới thiệu — hồ sơ tác giả */
.authorcard{display:flex;gap:22px;align-items:flex-start;padding:26px;border:1px solid var(--gold-300);
  border-radius:var(--radius-sm);background:linear-gradient(180deg,rgba(230,218,187,.4),rgba(230,218,187,.06));}
.authorcard .seal{flex-shrink:0;width:96px;height:96px;border-radius:6px;background:var(--red-600);
  color:#F3E9D2;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);
  font-size:38px;line-height:1.05;text-align:center;letter-spacing:.06em;
  box-shadow:0 0 0 1px rgba(136,32,16,.4),0 2px 8px rgba(0,0,0,.2);}
.authorcard .who h2{margin:0 0 4px;font-family:var(--font-display);font-size:24px;border:0;padding:0;}
.authorcard .who .role{font-size:13.5px;color:var(--gold-600);margin:0 0 12px;letter-spacing:.02em;}
.authorcard .who p{margin:0 0 10px;font-size:14.5px;line-height:1.7;color:var(--text-body);}
@media(max-width:560px){.authorcard{flex-direction:column;gap:16px;}
  .authorcard .seal{width:72px;height:72px;font-size:28px;}}

/* ============================================================================
   CHẾ ĐỘ CHẠY TRONG ỨNG DỤNG (CH Play / màn hình chính)
   ----------------------------------------------------------------------------
   Lớp .is-app do assets/tv-app.js gắn vào <body> khi trang được mở TỪ ỨNG DỤNG.
   Mở mingli.vn bằng Chrome bình thường thì không có lớp này → mọi thứ giữ nguyên,
   payOS và nút Nâng cấp vẫn hoạt động đầy đủ.

   ⚠ Luật chống dẫn dắt của Google Play: trong ứng dụng không được có bất kỳ lối
   nào dẫn ra cổng thanh toán riêng. Khi đấu nối xong Google Play Billing thì gỡ
   khối này và bật cờ PAY_IN_APP trong tv-app.js.
   ========================================================================== */
body.is-app a[href^="/nang-cap"],
body.is-app a[href*="/nang-cap"]{display:none !important}

/* Chừa chỗ cho thanh trạng thái / thanh điều hướng của điện thoại */
body.is-app .tv-header{padding-top:env(safe-area-inset-top)}
body.is-app .tv-footer{padding-bottom:env(safe-area-inset-bottom)}

/* Trong ứng dụng đã có nút quay lại của hệ điều hành nên bỏ bớt chỉ dẫn thừa */
body.is-app .tv-app-hide{display:none !important}