/*
Theme Name: Phong Thủy Tử vi
Theme URI: https://phongthuytuvi.com/
Author: 
Author URI: 
Description: Theme tin tuc phong thuy, tu vi va doi song. Xay dung tren Bootstrap 5 (tai qua CDN) de dong bo grid/component giua cac trang; nen giay do am, diem nhan ngoc bich - hoang tho - chu sa, minh hoa bang chu Han thay vi anh stock.
Version: 2.0.0
Requires at least: 6.0
Requires PHP: 7.4
Tested up to: 6.6
Text Domain: phongthuytuvi.com
*/


/* =========================================================
   1. Design tokens + ghi de bien Bootstrap
   ========================================================= */
:root{
  --paper:#FFFFFF;
  --paper-deep:#F6F3F0;
  --ink:#0B0909;
  --ink-soft:#3A3636;
  --muted:#6E6868;
  --brand:#D00000;       /* do mat troi trong logo */
  --brand-deep:#9E0B0B;  /* do dam (con dau/hover) */
  --gold:#8F6A1E;        /* diem nhan phu, dung rat it */
  --line:#E4DFDA;

  /* Bootstrap variable overrides (Bootstrap 5.3+) */
  --bs-font-sans-serif:'Be Vietnam Pro', sans-serif;
  --bs-body-bg:var(--paper);
  --bs-body-color:var(--ink);
  --bs-border-color:var(--line);
  --bs-link-color:var(--ink);
  --bs-link-hover-color:var(--brand);
  --bs-link-decoration:none;
  --bs-border-radius:.5rem;
  --bs-border-radius-lg:.75rem;
  --bs-border-radius-sm:.35rem;
  --bs-primary:var(--brand);
  --bs-primary-rgb:208,0,0;
}

body{ font-size:1rem; line-height:1.6; }
h1,h2,h3,h4,h5,h6{ font-family:'Noto Serif Display', serif; color:var(--ink); }
a{ text-decoration:none; }
::selection{ background:var(--brand); color:#fff; }

/* =========================================================
   2. Component overrides (dung chung Bootstrap component,
      chi doi mau/kieu cho khop bo nhan dien)
   ========================================================= */

/* Navbar */
.navbar{ background:var(--paper); border-bottom:1px solid var(--line); padding-top:1.25rem; padding-bottom:1.25rem; }
.navbar-brand{ line-height:1.1; }
.navbar-brand .brand-logo{ height:68px; width:auto; display:block; }
.site-footer .brand-logo{ height:64px; width:auto; display:block; }
.navbar-brand .brand-title{ font-family:'Noto Serif Display', serif; font-weight:700; font-size:1.9rem; color:var(--ink); }
.navbar-brand .brand-tagline{ font-size:.8rem; color:var(--muted); }
.navbar .nav-link{ font-size:.95rem; color:var(--ink); }
.navbar .nav-link:hover,
.navbar .nav-link.active{ color:var(--brand); font-weight:600; }
.navbar .dropdown-menu{ background:var(--paper); border-color:var(--line); }
.navbar .dropdown-item:hover,
.navbar .dropdown-item:focus{ background:var(--paper-deep); color:var(--brand); }

/* Top utility bar (lich am, gio hoang dao) */
.top-bar{ background:var(--ink); color:var(--paper); font-size:.85rem; }
.top-bar .text-muted-top{ color:#BDB4AE; }

/* Dai danh muc nhanh trong header */
.categories-bar{ background:var(--paper-deep); border-bottom:1px solid var(--line); }
.category-chip{ color:#fff; font-weight:500; font-size:.8rem; padding:.45rem .9rem; }
.category-chip:hover{ color:#fff; opacity:.9; }
.categories-bar .d-flex{ scrollbar-width:thin; }

/* Buttons */
.btn-brand{ background:var(--brand); border-color:var(--brand); color:#fff; }
.btn-brand:hover{ background:var(--brand-deep); border-color:var(--brand-deep); color:#fff; }
.btn-outline-line{ border-color:var(--line); color:var(--ink); border-radius:50rem; }
.btn-outline-line:hover{ background:var(--paper-deep); color:var(--ink); }

/* Cards (tin bai) */
.card{ background:transparent; border:none; transition:transform .3s ease, box-shadow .3s ease; }

/* Base cho khoi anh/chu Han minh hoa - ap dung o moi ngu canh (card, hero phu,
   box danh muc, widget...), khong chi rieng trong .card nhu truoc */
.motif-square{
  aspect-ratio:4/3; border-radius:var(--bs-border-radius); display:flex;
  align-items:center; justify-content:center; background-size:cover; background-position:center;
  overflow:hidden; transition:transform .4s ease;
}
.motif-square span{ font-family:'Noto Serif Display', serif; color:#fff; font-size:3rem; transition:transform .4s ease; }

/* Hieu ung hover nhe nhang cho anh: phong to mot chut khi tro vao khung chua no */
a:hover .motif-square,
.card:hover .motif-square{ transform:scale(1.045); }

.card .eyebrow{ font-size:.85rem; font-weight:600; }
.card .card-title{ font-size:1.1rem; line-height:1.4; margin-top:.25rem; }
.card .card-text{ font-size:.9rem; color:var(--muted); }

/* Post list item (dung o index/archive/category/tag/author/search) */
.post-list-item .motif-square{ aspect-ratio:4/3; }
.post-list-item .card-title{ font-size:1.35rem; }
.post-list-item .card-text{ font-size:.95rem; color:var(--ink-soft); }

/* Box bai viet theo danh muc o trang chu - 3 kieu luan phien */
.category-box{ background:var(--paper-deep); }

/* Kieu "split": anh 1 ben - chu 1 ben, danh sach gon o duoi */
.category-box--split .category-box-featured{ border-bottom:1px solid var(--line); }
.category-box--split .category-box-thumb{ width:160px; height:120px; aspect-ratio:auto; }
.category-box--split .category-box-row{ border-top:1px solid var(--line); }
.category-box--split .category-box-row:first-of-type{ border-top:none; }
.category-box--split .category-box-row .card-title{ transition:color .15s ease; }
.category-box--split .category-box-row:hover .card-title{ color:var(--brand); }

/* Kieu "grid": nen trang rieng de phan biet voi 2 kieu con lai, the deu nhau */
.category-box--grid{ background:transparent; border:1px solid var(--line); }

/* Kieu "list": danh sach doc, anh nho ben trai */
.category-box--list .category-box-list-thumb{ width:64px; height:64px; aspect-ratio:auto; }
.category-box--list .category-box-list-item{ border-top:1px solid var(--line); padding-top:.9rem; }
.category-box--list .category-box-list-item:first-of-type{ border-top:none; padding-top:0; }
.category-box--list .category-box-list-item .card-title{ transition:color .15s ease; }
.category-box--list .category-box-list-item:hover .card-title{ color:var(--brand); }

/* Cot "Bai viet moi" */
.latest-posts-box{ background:var(--ink); border-top:4px solid var(--brand); position:sticky; top:1.5rem; }
.latest-posts-index{
  width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.15); color:#fff; font-size:.8rem; font-weight:600;
}
.latest-posts-title{ color:#fff; font-size:.95rem; line-height:1.4; }
.latest-posts-item:hover .latest-posts-title{ text-decoration:underline; }

/* Hero */
.hero-eyebrow{ font-size:.9rem; font-weight:600; }
.hero-title{ font-size:2.6rem; line-height:1.15; }
.hero-side .motif-square{ width:72px; height:72px; aspect-ratio:auto; flex-shrink:0; }
.hero-side .motif-square span{ font-size:1.9rem; }

/* Lunar band */
.lunar-band{ background:var(--brand); }
.lunar-band .lunar-label{ font-size:.75rem; color:rgba(255,255,255,.8); }
.lunar-band .lunar-value{ font-family:'Noto Serif Display', serif; color:#fff; font-size:1.25rem; }

/* Zodiac */
.zodiac-circle{
  width:64px; height:64px; border-radius:50%; border:1.5px solid var(--brand);
  display:flex; align-items:center; justify-content:center; margin:0 auto;
}
.zodiac-circle span{ font-family:'Noto Serif Display', serif; font-size:1.35rem; color:var(--brand); }

/* Five elements */
.element-card{ border-radius:var(--bs-border-radius-lg); padding:1.5rem 1.1rem; min-height:140px; }
.element-card .element-char{ font-family:'Noto Serif Display', serif; color:#fff; font-size:1.9rem; }

/* Newsletter */
.newsletter-section{ background:var(--ink); }
.newsletter-section p{ color:#BDB4AE; }

/* Sidebar widgets */
.widget{ background:var(--paper-deep); border-radius:var(--bs-border-radius); padding:1.25rem; margin-bottom:1.5rem; }
.widget .widget-title{ font-size:.9rem; font-weight:600; margin-bottom:.75rem; display:block; }
.widget ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:.5rem; }

/* Footer */
.site-footer{ background:var(--paper-deep); }
.site-footer .footer-heading{ font-size:.85rem; font-weight:600; margin-bottom:.75rem; display:block; }
.site-footer a{ color:var(--ink-soft); font-size:.9rem; }
.site-footer a:hover{ color:var(--brand); }
.footer-bottom{ border-top:1px solid var(--line); font-size:.8rem; color:var(--muted); }

/* Author box */
.author-box{ background:var(--paper-deep); border-radius:var(--bs-border-radius-lg); }
.author-box img{ border-radius:50%; }

/* Pagination */
.pagination .page-link{ color:var(--ink); border-color:var(--line); }
.pagination .page-item.active .page-link{ background:var(--brand); border-color:var(--brand); }
.pagination .page-link:hover{ background:var(--paper-deep); color:var(--brand); }

/* 404 */
.error-404 .display-code{ font-size:5.5rem; color:var(--brand); }

/* Single post / page content */
.entry-content{ font-size:1.08rem; line-height:1.8; color:var(--ink-soft); }
.entry-content p{ margin-bottom:1.4em; }
.entry-content h2{ font-size:1.7rem; margin:1.6em 0 .6em; }
.entry-content h3{ font-size:1.35rem; margin:1.4em 0 .5em; }
.entry-content a{ color:var(--brand); text-decoration:underline; }
.entry-content img{ border-radius:var(--bs-border-radius); }

/* Comments */
.comment-body{ border-top:1px solid var(--line); padding-top:1rem; }

/* =========================================================
   3. Hieu ung hover nhe nhang cho anh va cac khung (card/box)
   ========================================================= */

/* Khung bai viet dang card (luoi tin, grid danh muc, lien quan...) */
.card:hover{
  transform:translateY(-4px);
  box-shadow:0 10px 24px rgba(11,9,9,.08);
}

/* Khung "post-list-item" o trang danh sach/danh muc/tim kiem */
.post-list-item{ transition:transform .3s ease, box-shadow .3s ease; }
.post-list-item:hover{
  transform:translateY(-3px);
  box-shadow:0 10px 24px rgba(11,9,9,.08);
}

/* Hang trong box danh muc kieu "split" va "list": nhan nhe, doi mau tieu de */
.category-box-featured,
.category-box-row,
.category-box-list-item{ transition:transform .25s ease, background-color .25s ease; border-radius:.5rem; }
.category-box-featured:hover,
.category-box-row:hover,
.category-box-list-item:hover{
  transform:translateX(3px);
  background-color:rgba(208,0,0,.05);
}

/* Muc trong cot "Bai viet moi" (nen toi, nen dung mau trang tren nen toi) */
.latest-posts-item{ transition:transform .25s ease; border-radius:.5rem; }
.latest-posts-item:hover{
  transform:translateX(3px);
  background-color:rgba(255,255,255,.06);
}
.latest-posts-item:hover .latest-posts-index{ background:rgba(255,255,255,.28); }

/* Khung ngu hanh: nhac nhe len tren, dam mau hon mot chut */
.element-card{ transition:transform .3s ease, box-shadow .3s ease; }
.element-card:hover{
  transform:translateY(-4px);
  box-shadow:0 10px 22px rgba(11,9,9,.12);
}

/* Vong tron 12 con giap */
.zodiac-circle{ transition:transform .25s ease, background-color .25s ease; }
a:hover .zodiac-circle{
  transform:scale(1.08);
  background-color:var(--brand);
}
a:hover .zodiac-circle span{ color:#fff; }

/* Muc trong widget sidebar (Bai viet moi, Chuyen muc) */
.widget li > a{ transition:transform .2s ease; display:block; border-radius:.4rem; }
.widget li > a:hover{ transform:translateX(3px); }

/* Doi mau chip danh muc o header khi hover (ngoai hieu ung opacity da co) */
.category-chip{ transition:transform .2s ease, opacity .2s ease; }
.category-chip:hover{ transform:translateY(-2px); }

/* Hop tac gia, hop lien he... nhac nhe khi hover neu la lien ket */
.author-box{ transition:box-shadow .3s ease; }
.author-box:hover{ box-shadow:0 10px 24px rgba(11,9,9,.08); }

/* Tat bot hieu ung chuyen dong cho nguoi dung bat "giam chuyen dong" (accessibility) */
@media (prefers-reduced-motion: reduce){
  .card, .post-list-item, .element-card, .motif-square, .motif-square span,
  .category-box-featured, .category-box-row, .category-box-list-item,
  .latest-posts-item, .zodiac-circle, .widget li > a, .category-chip, .author-box{
    transition:none !important;
  }
  .card:hover, .post-list-item:hover, .element-card:hover,
  a:hover .motif-square, .card:hover .motif-square,
  .category-box-featured:hover, .category-box-row:hover, .category-box-list-item:hover,
  .latest-posts-item:hover, a:hover .zodiac-circle, .widget li > a:hover, .category-chip:hover{
    transform:none !important;
  }
}