/* ============================================================
   UX REDESIGN — Lichamduong365 DESIGN SYSTEM
   Version: 1.0 | Created: 2026-04-01
   Áp dụng cho: trang chủ, chi tiết ngày, tháng, năm
   KHÔNG sửa common.css / common-calendar-am-duong-lich.css
   ============================================================ */

/* ── DESIGN TOKENS ── */
:root {
  --c-primary: #0a8c5c;
  --c-primary-dk: #076644;
  --c-primary-lt: #e8f7f1;
  --c-gold: #c9922a;
  --c-gold-lt: #fff8ec;
  --c-red: #e05c2c;
  --c-red-lt: #fff3ee;
  --c-blue: #2255d4;
  --c-blue-lt: #f4f7fe;
  --c-purple: #8b5cf6;
  --c-purple-lt: #f5f3ff;
  --c-pink: #c7266d;
  --c-pink-lt: #fef5f9;
  --c-orange: #d66e15;
  --c-orange-lt: #fffaf0;
  --c-bg: #f7f9fb;
  --c-surface: #ffffff;
  --c-border: #e5eaee;
  --c-text: #1a2332;
  --c-text2: #4a5568;
  --c-muted: #8898a8;
  --f: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-xl: 20px;
  --r-2xl: 24px;
  --r-full: 9999px;
  --sh-sm: 0 1px 3px rgba(0, 0, 0, .08);
  --sh-md: 0 4px 12px rgba(0, 0, 0, .10);
  --sh-lg: 0 8px 24px rgba(0, 0, 0, .12);
  --max-w: 1200px;
}

/* Thêm vào Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Lora:wght@400; 600; 700& family=Be+Vietnam+Pro:wght@300; 400; 500; 600& display=swap');

/* CSS áp dụng */
body {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 16px;
  line-height: 1.8;
}

h1,
h2,
h3,
h4 {
  font-family: 'Lora', serif;
  font-weight: 700;
  line-height: 1.6;
}
.kt-art-body h2,.kt-art-body h3, .kt-art-body h4 {
padding-bottom: 8px;
margin: auto;
}
#listoffcontent a {
  font-size: 15px;
  font-family: 'Lora', serif;
}
/* ── GLOBAL HEADER ── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 999;
  background: var(--c-primary-dk);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
}

.site-header .container {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 16px;
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px;
}

.site-logo {
  display: flex;
  align-items: center;
  gap: 9px;
  color: #fff;
  font-size: 17px;
  font-weight: 700;
  text-decoration: none;
  flex-shrink: 0;
}

.site-logo:hover {
  color: #fff;
}

.logo-ico {
  width: 34px;
  height: 34px;
  background: var(--c-gold);
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 2px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-nav a {
  color: rgba(255, 255, 255, .88);
  font-size: 13px;
  font-weight: 500;
  padding: 6px 12px;
  border-radius: var(--r-sm);
  transition: background .15s;
  display: block;
  text-decoration: none;
  white-space: nowrap;
}

.site-nav a:hover,
.site-nav a.active {
  background: rgba(255, 255, 255, .15);
  color: #fff;
}

.site-nav .nav-cta {
  background: var(--c-gold);
  color: #fff !important;
  border-radius: var(--r-full) !important;
  padding: 6px 16px !important;
}

.site-nav .nav-cta:hover {
  background: #b07e1a;
}

.site-hamburger {
  display: none;
  background: none;
  border: none;
  color: #fff;
  cursor: pointer;
  font-size: 22px;
  padding: 8px;
  line-height: 1;
}

/* ── GLOBAL FOOTER ── */
.fader {
  display: none;
}

.site-footer-new {
  background: #1a2332;
  color: rgba(255, 255, 255, .7);
  padding: 40px 0 24px;
  margin-top: 0;
  font-family: var(--f);
}

.site-footer-new .container {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 16px;
}

.sf-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 32px;
  margin-bottom: 32px;
}

.sf-col h3 {
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  margin: 0 0 14px;
  text-transform: uppercase;
  letter-spacing: .5px;
}

.sf-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sf-col li+li {
  margin-top: 7px;
}

.sf-col a {
  font-size: 13px;
  color: rgba(255, 255, 255, .65);
  text-decoration: none;
}

.sf-col a:hover {
  color: var(--c-primary);
}

.sf-about p {
  font-size: 13px;
  line-height: 1.7;
  max-width: 280px;
  color: rgba(255, 255, 255, .65);
  margin: 8px 0 0;
}

.sf-bottom {
  border-top: 1px solid rgba(255, 255, 255, .1);
  padding-top: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  flex-wrap: wrap;
  gap: 8px;
  color: rgba(255, 255, 255, .5);
}

.sf-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.sf-logo .logo-ico {
  width: 30px;
  height: 30px;
  font-size: 15px;
}

.sf-logo span {
  color: #fff;
  font-size: 15px;
  font-weight: 700;
}

@media (max-width: 1024px) {
  .sf-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .site-nav {
    display: none;
  }

  .site-hamburger {
    display: flex;
  }

  .sf-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .sf-bottom {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ── BASE OVERRIDES (không đụng vào common.css) ── */
.ux-body {
  font-family: var(--f);
  font-size: 15px;
  color: var(--c-text);
  background: var(--c-bg);
  line-height: 1.6;
}

.ux-section-inner {
  max-width: 1024px;
  margin: 0 auto;
  padding: 0 15px;
}

/* ── BREADCRUMB ── */
.bc-bar {
  background: var(--c-surface);
  border-bottom: 1px solid var(--c-border);
  padding: 7px 0;
}

.bc {
  display: flex;
  align-items: center;
  gap: 6px;
  list-style: none;
  font-size: 12px;
  color: var(--c-muted);
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
}

.bc li+li::before {
  content: '›';
  margin-right: 4px;
}

.bc a {
  color: var(--c-text2);
  text-decoration: none;
}

.bc a:hover {
  color: var(--c-primary);
}

.bc li:last-child {
  color: var(--c-text);
}

/* ── NAV TEMPORAL ── */
.nav-temporal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: 8px 12px;
  margin: 16px 0;
  box-shadow: var(--sh-sm);
}

.nt-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 16px;
  border-radius: var(--r-full);
  font-size: 13px;
  font-weight: 600;
  background: var(--c-primary-lt);
  color: var(--c-primary-dk);
  text-decoration: none;
  transition: all .15s;
}

.nt-btn:hover {
  background: var(--c-primary);
  color: #fff;
}

.nt-btn.today,
.nt-btn.cur {
  background: var(--c-gold-lt);
  color: var(--c-gold);
}

.nt-btn.today:hover,
.nt-btn.cur:hover {
  background: var(--c-gold);
  color: #fff;
}

/* ── LAYOUT GRID ── */
.main-layout-v2 {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 24px;
  padding-bottom: 40px;
  align-items: start;
}

/* ── CARD ── */
.ux-card {
  background: var(--c-surface);
  border-radius: var(--r-lg);
  border: 1px solid var(--c-border);
  padding: 20px;
  box-shadow: var(--sh-sm);
}

.ux-card+.ux-card {
  margin-top: 16px;
}

/* ── SECTION TITLE ── */
.sec-title-v2 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}

.sec-title-v2 h2,
.sec-title-v2 h3 {
  font-size: 16px;
  font-weight: 700;
  margin: 0;
}

.ti-icon {
  width: 32px;
  height: 32px;
  background: var(--c-primary-lt);
  color: var(--c-primary);
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  flex-shrink: 0;
}

.see-all-link {
  margin-left: auto;
  font-size: 12px;
  color: var(--c-primary);
  font-weight: 600;
  text-decoration: none;
}

/* ── BADGE ── */
.ux-badge {
  padding: 4px 10px;
  border-radius: var(--r-full);
  font-size: 11px;
  font-weight: 700;
  display: inline-block;
}

.badge-hd {
  background: rgba(201, 146, 42, .22);
  color: var(--c-gold);
  border: 1px solid rgba(201, 146, 42, .35);
}

.badge-tk {
  background: var(--c-primary-lt);
  color: var(--c-primary-dk);
}

.badge-le {
  background: var(--c-red-lt);
  color: var(--c-red);
}

.badge-cur {
  background: var(--c-primary);
  color: #fff;
}

/* ── HERO (SHARED) ── */
.hero-v3 {
  background: linear-gradient(135deg, var(--c-primary-dk) 0%, var(--c-primary) 55%, #0db87a 100%);
  color: #fff;
  position: relative;
  overflow: hidden;
}

.hero-v3::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23fff' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/svg%3E");
  pointer-events: none;
}

.hero-v3 .hero-inner {
  padding: 40px 0 36px;
  position: relative;
  z-index: 2;
  max-width: 1024px;
  margin: 0 auto;
  padding-left: 15px;
  padding-right: 15px;
}

.hero-v3 .accent-text {
  color: #ffe8a0;
}

.hero-slogan {
  font-size: 14px;
  color: rgba(255, 255, 255, .85);
  line-height: 1.6;
  margin-bottom: 20px;
}

.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.btn-hero {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 11px 22px;
  border-radius: var(--r-full);
  font-size: 14px;
  font-weight: 600;
  transition: all .2s;
  text-decoration: none;
}

.btn-hero-primary {
  background: #fff;
  color: var(--c-primary-dk);
}

.btn-hero-primary:hover {
  background: var(--c-primary-lt);
  color: var(--c-primary-dk);
}

.btn-hero-outline {
  background: transparent;
  color: #fff;
  border: 2px solid rgba(255, 255, 255, .5);
}

.btn-hero-outline:hover {
  background: rgba(255, 255, 255, .12);
}

/* Calendar widget in hero */
.hero-calendar-widget {
  flex-shrink: 0;
  width: 340px;
}

.hero-calendar-card {
  background: rgba(255, 255, 255, .12);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: var(--r-2xl);
  overflow: hidden;
}

.cal-header {
  background: rgba(0, 0, 0, .15);
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 14px;
}

.cal-day-solar {
  font-size: 56px;
  font-weight: 900;
  color: #fff;
  line-height: 1;
}

.cal-date-full {
  color: rgba(255, 255, 255, .85);
  font-size: 14px;
}

.cal-divider {
  height: 1px;
  background: rgba(255, 255, 255, .15);
  margin: 0 16px;
}

.cal-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  padding: 4px 0;
}

.cal-info-item {
  padding: 7px 16px;
}

.cal-info-label {
  font-size: 10px;
  color: rgba(255, 255, 255, .65);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-bottom: 2px;
}

.cal-info-value {
  font-size: 13px;
  font-weight: 600;
  color: #fff;
}

.cal-info-value.text-gold {
  color: #ffe8a0;
}

.cal-info-value.text-red {
  color: #ffa0a0;
}

/* ── SECTION BASE ── */
.section-v3 {
  padding: 32px 0;
}

.section-header {
  margin-bottom: 24px;
}

.section-header h2 {
  font-size: 20px;
  font-weight: 700;
  color: var(--c-text);
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.section-header p {
  font-size: 14px;
  color: var(--c-text2);
  line-height: 1.6;
}

.emoji-icon {
  font-size: 20px;
}

.sub-section-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--c-text);
  margin: 20px 0 12px;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ── ENERGY / ADVISOR ── */
.energy-card-main {
  background: linear-gradient(135deg, var(--c-primary-lt) 0%, #d4f5e9 100%);
  border: 1px solid #b3e8d3;
  border-radius: var(--r-xl);
  padding: 16px 20px;
  margin-bottom: 20px;
}

.energy-state-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--c-primary);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: var(--r-full);
  margin-bottom: 10px;
  letter-spacing: .5px;
  text-transform: uppercase;
}

.state-dot {
  width: 6px;
  height: 6px;
  background: #5effc5;
  border-radius: 50%;
}

.energy-message {
  font-size: 14px;
  color: var(--c-primary-dk);
  line-height: 1.7;
}

/* ── ADVISOR GRID (4 cột) ── */
.advisor-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 24px;
}

.advisor-box {
  padding: 14px;
  border-radius: var(--r-md);
  border: 1px solid;
}

.adv-natural {
  background: #f9fcfb;
  border-color: #e2f0e9;
}

.adv-bio {
  background: #fffaf0;
  border-color: #fbe5cf;
}

.adv-behav {
  background: var(--c-blue-lt);
  border-color: #dce4f7;
}

.adv-mental {
  background: var(--c-pink-lt);
  border-color: #fadce8;
}

.advisor-box h4 {
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 5px;
}

.advisor-box .adv-h-green {
  color: #2d8a56;
}

.advisor-box .adv-h-orange {
  color: var(--c-orange);
}

.advisor-box .adv-h-blue {
  color: var(--c-blue);
}

.advisor-box .adv-h-pink {
  color: var(--c-pink);
}

.advisor-box p {
  font-size: 13px;
  color: var(--c-text2);
  line-height: 1.6;
}

/* ── GIO HOANG DAO ── */
.gio-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
  margin-bottom: 20px;
}

.gio-item {
  border-radius: var(--r-md);
  padding: 10px;
  text-align: center;
  border: 1px solid;
}

.gio-good {
  background: #e6f9f0;
  border-color: #b3ecd6;
}

.gio-bad {
  background: #fff0f0;
  border-color: #ffc8c8;
}

.gio-ten {
  font-size: 13px;
  font-weight: 700;
  color: var(--c-text);
}

.gio-range {
  font-size: 11px;
  color: var(--c-muted);
  margin-top: 2px;
}

.gio-label {
  font-size: 10px;
  font-weight: 700;
  margin-top: 3px;
  text-transform: uppercase;
  letter-spacing: .3px;
}

.gio-good .gio-label {
  color: var(--c-primary);
}

.gio-bad .gio-label {
  color: #c0392b;
}

/* Gio table */
.gio-tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.gio-tbl th {
  background: var(--c-primary);
  color: #fff;
  padding: 8px 10px;
  text-align: left;
  font-size: 12px;
  font-weight: 600;
}

.gio-tbl td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--c-border);
}

.gio-tbl tr:last-child td {
  border-bottom: none;
}

.gio-tbl tr:nth-child(even) td {
  background: var(--c-bg);
}

.gb {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--r-full);
  font-size: 11px;
  font-weight: 700;
}

.gb.hd {
  background: #e6f9f0;
  color: var(--c-primary-dk);
}

.gb.hac {
  background: #fff0f0;
  color: #c0392b;
}

/* ── BEST DAY / CHECK ── */
.check-best-day {
  margin-bottom: 20px;
}

.best-day-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.best-day-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 14px;
  border-radius: var(--r-md);
  border: 1px solid;
}

.best-day-item.is-good {
  background: #e6f9f0;
  border-color: #b3ecd6;
}

.best-day-item.is-bad {
  background: #fff0f0;
  border-color: #ffc8c8;
}

.best-day-badge {
  font-size: 16px;
  flex-shrink: 0;
  margin-top: 1px;
}

.best-day-info strong {
  display: block;
  font-size: 13px;
  color: var(--c-text);
}

.best-day-desc {
  font-size: 12px;
  color: var(--c-text2);
  display: block;
  margin-top: 2px;
}

/* ── TUOI HOP ── */
.tuoi-hop-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 20px;
}

.tuoi-card {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 16px;
  border-radius: var(--r-md);
  border: 1px solid;
}

.tuoi-good {
  background: #e6f9f0;
  border-color: #b3ecd6;
}

.tuoi-bad {
  background: #fff0f0;
  border-color: #ffc8c8;
}

.tuoi-icon {
  font-size: 20px;
  flex-shrink: 0;
}

.tuoi-label {
  font-size: 11px;
  color: var(--c-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-bottom: 3px;
}

.tuoi-value {
  font-size: 14px;
  font-weight: 700;
  color: var(--c-text);
}

/* ── ACTIVITIES (NEN / KIEN) ── */
.act-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.act-head {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  padding: 8px 12px;
  border-radius: var(--r-sm);
  margin-bottom: 8px;
}

.act-head.good {
  background: #e6f9f0;
  color: var(--c-primary-dk);
}

.act-head.bad {
  background: #fff0f0;
  color: #c0392b;
}

.act-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.act-list li {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: 13px;
  padding: 5px 0;
  border-bottom: 1px solid var(--c-border);
  color: var(--c-text2);
}

.act-list li:last-child {
  border-bottom: none;
}

.dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 7px;
}

.dot-g {
  background: var(--c-primary);
}

.dot-r {
  background: var(--c-red);
}

/* ── SAO HAN ── */
.sao-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.sao {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 12px;
  border-radius: var(--r-full);
  font-size: 12px;
  font-weight: 600;
  border: 1px solid;
}

.sao.t {
  background: #e6f9f0;
  color: var(--c-primary-dk);
  border-color: #b3ecd6;
}

.sao.x {
  background: #fff0f0;
  color: #c0392b;
  border-color: #ffc8c8;
}

/* ── INFO CARDS ── */
.info-grid-v2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}

.info-grid-v2.cols-4 {
  grid-template-columns: repeat(4, 1fr);
}

.ic {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  padding: 16px;
  box-shadow: var(--sh-sm);
}

.ic-icon {
  width: 34px;
  height: 34px;
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  margin-bottom: 8px;
}

.ic-icon.g {
  background: var(--c-primary-lt);
}

.ic-icon.go {
  background: var(--c-gold-lt);
}

.ic-icon.r {
  background: var(--c-red-lt);
}

.ic-icon.b {
  background: #e8f4fd;
}

.ic-label {
  font-size: 11px;
  color: var(--c-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-bottom: 3px;
}

.ic-val {
  font-size: 17px;
  font-weight: 700;
}

.ic-val.g {
  color: var(--c-primary-dk);
}

.ic-val.go {
  color: var(--c-gold);
}

.ic-sub {
  font-size: 12px;
  color: var(--c-text2);
  margin-top: 2px;
}

/* ── DAY HERO ── */
.day-hero {
  background: linear-gradient(135deg, var(--c-primary-dk) 0%, var(--c-primary) 100%);
  color: #fff;
  border-radius: var(--r-xl);
  padding: 28px;
  margin-bottom: 16px;
  position: relative;
  overflow: hidden;
}

.day-hero::after {
  content: '';
  position: absolute;
  right: -50px;
  top: -50px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .06);
  pointer-events: none;
}

.dh-inner {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  position: relative;
}

.dh-num {
  font-size: 76px;
  font-weight: 900;
  line-height: 1;
  min-width: 90px;
  text-align: center;
}

.dh-month {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 3px;
}

.dh-weekday {
  font-size: 14px;
  opacity: .85;
  margin-bottom: 10px;
}

.dh-lunar {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(255, 255, 255, .17);
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: var(--r-full);
  padding: 5px 14px;
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 10px;
}

.dh-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.badge-dh-hd {
  background: rgba(201, 146, 42, .35);
  border: 1px solid rgba(201, 146, 42, .5);
  color: #ffe8a0;
  padding: 4px 10px;
  border-radius: var(--r-full);
  font-size: 11px;
  font-weight: 700;
}

.badge-dh-tk {
  background: rgba(255, 255, 255, .17);
  border: 1px solid rgba(255, 255, 255, .25);
  padding: 4px 10px;
  border-radius: var(--r-full);
  font-size: 11px;
  font-weight: 700;
}

.badge-dh-tr {
  background: rgba(16, 185, 129, .28);
  border: 1px solid rgba(16, 185, 129, .38);
  padding: 4px 10px;
  border-radius: var(--r-full);
  font-size: 11px;
  font-weight: 700;
}

/* ── INTERNAL LINKS ── */
.internal-links-section {
  background: var(--c-primary-lt);
  border-radius: var(--r-md);
  padding: 16px;
  margin-bottom: 16px;
}

.cluster-h2 {
  font-size: 14px;
  font-weight: 700;
  color: var(--c-primary-dk);
  margin-bottom: 10px;
}

.list-internal-links {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0;
  margin: 0;
}

.list-internal-links a {
  display: inline-block;
  padding: 4px 12px;
  background: var(--c-surface);
  color: var(--c-primary-dk);
  border: 1px solid #b3ecd6;
  border-radius: var(--r-full);
  font-size: 12px;
  font-weight: 500;
  text-decoration: none;
  transition: all .15s;
}

.list-internal-links a:hover {
  background: var(--c-primary);
  color: #fff;
  border-color: var(--c-primary);
}

.link-temporal {
  background: var(--c-primary-lt);
  border-radius: var(--r-md);
  padding: 16px;
  margin-bottom: 16px;
}

.link-temporal-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: center;
}

.lt-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 16px;
  border-radius: var(--r-full);
  font-size: 13px;
  font-weight: 600;
  background: var(--c-surface);
  color: var(--c-text);
  border: 1px solid var(--c-border);
  text-decoration: none;
  transition: all .15s;
}

.lt-btn:hover {
  background: var(--c-primary);
  color: #fff;
  border-color: var(--c-primary);
}

.lt-btn.hier {
  background: var(--c-gold-lt);
  color: var(--c-gold);
  border-color: var(--c-gold);
}

.lt-btn.hier:hover {
  background: var(--c-gold);
  color: #fff;
}

.link-more-daily {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 24px;
  background: var(--c-primary);
  color: #fff;
  border-radius: var(--r-full);
  font-size: 14px;
  font-weight: 600;
  margin-top: 16px;
  text-decoration: none;
}

.link-more-daily:hover {
  background: var(--c-primary-dk);
  color: #fff;
}

.rel-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.rel-list li {
  border-bottom: 1px solid var(--c-border);
}

.rel-list li:last-child {
  border-bottom: none;
}

.rel-list a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  font-size: 14px;
  color: var(--c-text);
  text-decoration: none;
  transition: color .15s;
}

.rel-list a:hover {
  color: var(--c-primary);
}

.rel-arrow {
  color: var(--c-primary);
  font-size: 15px;
  flex-shrink: 0;
}

.rel-meta {
  font-size: 11px;
  color: var(--c-muted);
  display: block;
}

/* ── SERVICES GRID ── */
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.service-card {
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: 20px;
  transition: box-shadow .2s, transform .2s;
  display: block;
  color: var(--c-text);
  text-decoration: none;
}

.service-card:hover {
  box-shadow: var(--sh-md);
  transform: translateY(-3px);
}

.service-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  margin-bottom: 12px;
}

.icon-calendar {
  background: var(--c-primary-lt);
}

.icon-tuvi {
  background: #f5f3ff;
}

.icon-zodiac {
  background: var(--c-gold-lt);
}

.icon-numerology {
  background: var(--c-blue-lt);
}

.icon-tarot {
  background: var(--c-red-lt);
}

.icon-couple {
  background: var(--c-pink-lt);
}

.service-card h3 {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 6px;
}

.service-card p {
  font-size: 13px;
  color: var(--c-text2);
  line-height: 1.5;
  margin: 0;
}

/* ── TOOLS GRID ── */
.tools-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.tool-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  font-size: 13px;
  color: var(--c-text);
  font-weight: 500;
  text-decoration: none;
  transition: all .15s;
}

.tool-item:hover {
  background: var(--c-primary-lt);
  color: var(--c-primary-dk);
  border-color: var(--c-primary);
}

.tool-icon {
  font-size: 16px;
  flex-shrink: 0;
}

/* ── SIDEBAR WIDGET ── */
.sw {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sh-sm);
}

.sw+.sw {
  margin-top: 16px;
}

.wt {
  background: var(--c-primary);
  color: #fff;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
}

.wb {
  padding: 16px;
}

.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ux-tag {
  display: inline-block;
  padding: 4px 10px;
  background: var(--c-primary-lt);
  color: var(--c-primary-dk);
  border-radius: var(--r-full);
  font-size: 12px;
  font-weight: 500;
  text-decoration: none;
  transition: background .15s;
}

.ux-tag:hover {
  background: var(--c-primary);
  color: #fff;
}

.ux-form-input,
.form-input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  font-size: 13px;
  background: var(--c-bg);
  box-sizing: border-box;
  margin-bottom: 6px;
}

.btn-pri {
  background: var(--c-primary);
  color: #fff;
  border: none;
  padding: 10px;
  border-radius: var(--r-sm);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  width: 100%;
  margin-top: 8px;
}

.btn-pri:hover {
  background: var(--c-primary-dk);
}

/* ── CAN CHI SIDEBAR ── */
.cc-today {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cc-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px solid var(--c-border);
  font-size: 13px;
}

.cc-row:last-child {
  border-bottom: none;
}

.cc-label {
  color: var(--c-muted);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
}

.cc-val {
  font-weight: 700;
  color: var(--c-text);
}

.cc-val.gold {
  color: var(--c-gold);
}

/* ── SEO FEATURE GRID ── */
.seo-feature-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 0 0 4px;
}

.seo-feature-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 16px;
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  font-size: 13px;
  color: var(--c-text);
  text-decoration: none;
  transition: border-color .15s, background .15s;
}

.seo-feature-item:hover {
  background: var(--c-primary-lt);
  border-color: var(--c-primary);
  color: var(--c-primary-dk);
}

.seo-fi-icon {
  font-size: 18px;
  flex-shrink: 0;
  margin-top: 1px;
}

.seo-fi-body {
  line-height: 1.5;
}

.seo-fi-body strong {
  color: var(--c-primary-dk);
  font-weight: 600;
}

@media (max-width: 600px) {
  .seo-feature-grid {
    grid-template-columns: 1fr;
  }
}

/* Next good days */
.ngd {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ngd-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: var(--c-primary-lt);
  border-radius: var(--r-sm);
  font-size: 12px;
  color: var(--c-primary-dk);
}

.ngd-item.gold {
  background: var(--c-gold-lt);
  color: var(--c-gold);
}

.ngd-num {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
  background: var(--c-primary);
  color: #fff;
}

.ngd-item.gold .ngd-num {
  background: var(--c-gold);
}

/* ── MONTH HERO ── */
.month-hero {
  background: linear-gradient(135deg, var(--c-primary-dk) 0%, var(--c-primary) 100%);
  color: #fff;
  border-radius: var(--r-xl);
  padding: 24px 28px;
  margin-bottom: 16px;
}

.mh-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.mh-title {
  font-size: 28px;
  font-weight: 900;
  margin-bottom: 4px;
}

.mh-lunar {
  font-size: 14px;
  opacity: .9;
  margin-bottom: 10px;
}

.mh-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.b-white {
  background: rgba(255, 255, 255, .18);
  border: 1px solid rgba(255, 255, 255, .25);
  padding: 4px 10px;
  border-radius: var(--r-full);
  font-size: 11px;
  font-weight: 700;
}

.b-gold {
  background: rgba(201, 146, 42, .35);
  border: 1px solid rgba(201, 146, 42, .5);
  color: #ffe8a0;
  padding: 4px 10px;
  border-radius: var(--r-full);
  font-size: 11px;
  font-weight: 700;
}

.mh-stats {
  display: flex;
  gap: 16px;
  margin-top: 16px;
}

.mh-stat {
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: var(--r-md);
  padding: 10px 16px;
  text-align: center;
}

.mh-stat .val {
  font-size: 22px;
  font-weight: 900;
}

.mh-stat .lbl {
  font-size: 11px;
  opacity: .8;
}

/* ── CALENDAR GRID (MONTH VIEW) ── */
.calendar-wrap {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sh-sm);
  margin-bottom: 16px;
}

.cal-head-row {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  background: var(--c-primary-dk);
}

.cal-head-cell {
  padding: 10px 4px;
  text-align: center;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}

.cal-head-cell.sun {
  color: #ffaaaa;
}

.cal-head-cell.sat {
  color: #aaccff;
}

.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  background: var(--c-border);
}

.cal-cell-v2 {
  background: var(--c-surface);
  padding: 8px 6px;
  min-height: 72px;
  cursor: pointer;
  transition: background .15s;
  position: relative;
  text-decoration: none;
  display: block;
  color: var(--c-text);
}

.cal-cell-v2:hover {
  background: #f0fdf7;
}

.cal-cell-v2.other {
  opacity: .4;
}

.cal-cell-v2.today {
  background: var(--c-primary-lt);
  border: 2px solid var(--c-primary);
}

.cal-cell-v2 .d-num {
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
}

.cal-cell-v2.sun .d-num {
  color: #c0392b;
}

.cal-cell-v2.sat .d-num {
  color: #2980b9;
}

.cal-cell-v2 .d-lunar {
  font-size: 10px;
  color: var(--c-muted);
  margin-top: 2px;
}

.cal-cell-v2 .d-can {
  font-size: 10px;
  color: var(--c-text2);
}

.cal-cell-v2 .d-status {
  position: absolute;
  bottom: 4px;
  right: 5px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 700;
}

.d-status.good {
  background: #e6f9f0;
  color: var(--c-primary-dk);
}

.d-status.best {
  background: var(--c-gold-lt);
  color: var(--c-gold);
}

.d-status.bad {
  background: #fff0f0;
  color: #c0392b;
}

.cal-cell-v2.ram .d-lunar {
  color: var(--c-gold);
  font-weight: 700;
}

.cal-cell-v2 .d-event {
  font-size: 9px;
  color: var(--c-red);
  font-weight: 600;
}

/* Legend */
.legend-v2 {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 12px 16px;
  background: var(--c-bg);
  border-top: 1px solid var(--c-border);
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--c-text2);
}

.legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

/* ── NGAY TOT LIST ── */
.ntl {
  list-style: none;
  padding: 0;
  margin: 0;
}

.ntl-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--c-border);
}

.ntl-item:last-child {
  border-bottom: none;
}

.ntl-num {
  min-width: 44px;
  height: 44px;
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 800;
  background: var(--c-primary-lt);
  color: var(--c-primary-dk);
}

.ntl-num.best {
  background: var(--c-gold-lt);
  color: var(--c-gold);
}

.ntl-num.bad {
  background: var(--c-red-lt);
  color: var(--c-red);
}

.ntl-info .day-name {
  font-weight: 700;
  font-size: 14px;
}

.ntl-info .day-lunar {
  font-size: 12px;
  color: var(--c-muted);
}

.ntl-info .day-act {
  font-size: 12px;
  color: var(--c-text2);
  margin-top: 2px;
}

/* ── MONTH CARDS (YEAR VIEW) ── */
.month-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}

.mc {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  padding: 14px;
  box-shadow: var(--sh-sm);
  transition: box-shadow .2s, transform .2s;
  display: block;
  color: var(--c-text);
  text-decoration: none;
}

.mc:hover {
  box-shadow: var(--sh-md);
  transform: translateY(-2px);
  color: var(--c-primary);
}

.mc.current {
  border-color: var(--c-primary);
  border-width: 2px;
  background: var(--c-primary-lt);
}

.mc-num {
  font-size: 11px;
  color: var(--c-muted);
  font-weight: 600;
  margin-bottom: 4px;
}

.mc-name {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 4px;
}

.mc-lunar {
  font-size: 11px;
  color: var(--c-text2);
}

.mc-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin-top: 6px;
}

.mc-badge {
  padding: 2px 7px;
  border-radius: var(--r-full);
  font-size: 10px;
  font-weight: 600;
}

.mc-badge.hd {
  background: #e6f9f0;
  color: var(--c-primary-dk);
}

.mc-badge.le {
  background: var(--c-red-lt);
  color: var(--c-red);
}

.mc-badge.tk {
  background: var(--c-gold-lt);
  color: var(--c-gold);
}

/* ── YEAR HERO ── */
.year-hero {
  background: linear-gradient(135deg, var(--c-primary-dk) 0%, #0a9e68 50%, var(--c-gold) 100%);
  color: #fff;
  border-radius: var(--r-xl);
  padding: 32px;
  margin-bottom: 16px;
  position: relative;
  overflow: hidden;
}

.year-hero-watermark {
  position: absolute;
  right: -20px;
  top: -20px;
  font-size: 160px;
  font-weight: 900;
  opacity: .06;
  line-height: 1;
  pointer-events: none;
  color: #fff;
}

.yh-tag {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  opacity: .75;
  margin-bottom: 8px;
}

.yh-year {
  font-size: 52px;
  font-weight: 900;
  line-height: 1;
  margin-bottom: 4px;
}

.yh-name {
  font-size: 20px;
  font-weight: 700;
  opacity: .95;
  margin-bottom: 8px;
}

.yh-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 16px;
}

.b-w {
  background: rgba(255, 255, 255, .17);
  border: 1px solid rgba(255, 255, 255, .25);
  padding: 4px 10px;
  border-radius: var(--r-full);
  font-size: 11px;
  font-weight: 700;
}

.b-g {
  background: rgba(201, 146, 42, .35);
  border: 1px solid rgba(201, 146, 42, .5);
  color: #ffe8a0;
  padding: 4px 10px;
  border-radius: var(--r-full);
  font-size: 11px;
  font-weight: 700;
}

.yh-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.yh-stat {
  background: rgba(255, 255, 255, .13);
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: var(--r-md);
  padding: 10px 18px;
  text-align: center;
}

.yh-stat .val {
  font-size: 22px;
  font-weight: 900;
}

.yh-stat .lbl {
  font-size: 11px;
  opacity: .8;
}

/* ── YEAR INFO GRID ── */
.year-info-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}

.yic {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  padding: 16px;
  box-shadow: var(--sh-sm);
}

.yic-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  margin-bottom: 8px;
}

.yic-icon.g {
  background: var(--c-primary-lt);
}

.yic-icon.go {
  background: var(--c-gold-lt);
}

.yic-icon.b {
  background: #e8f4fd;
}

.yic-icon.p {
  background: #f3e8fd;
}

.yic-label {
  font-size: 11px;
  color: var(--c-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-bottom: 3px;
}

.yic-val {
  font-size: 16px;
  font-weight: 700;
}

.yic-val.g {
  color: var(--c-primary-dk);
}

.yic-val.go {
  color: var(--c-gold);
}

.yic-sub {
  font-size: 12px;
  color: var(--c-text2);
  margin-top: 2px;
}

/* ── TIET KHI GRID ── */
.tk-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.tk-item {
  background: var(--c-primary-lt);
  border-radius: var(--r-md);
  padding: 10px;
  text-align: center;
  display: block;
  color: var(--c-primary-dk);
  text-decoration: none;
  transition: background .15s;
}

.tk-item:hover {
  background: var(--c-primary);
  color: #fff;
}

.tk-name {
  font-size: 12px;
  font-weight: 700;
}

.tk-date {
  font-size: 11px;
  opacity: .8;
  margin-top: 2px;
}

/* ── LE TET ── */
.le-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.le-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--c-border);
}

.le-item:last-child {
  border-bottom: none;
}

.le-date {
  min-width: 52px;
  padding: 8px 6px;
  background: var(--c-primary-lt);
  border-radius: var(--r-md);
  text-align: center;
}

.le-date .d {
  font-size: 18px;
  font-weight: 800;
  color: var(--c-primary-dk);
  line-height: 1;
}

.le-date .m {
  font-size: 11px;
  color: var(--c-muted);
}

.le-info .name {
  font-weight: 700;
  font-size: 14px;
}

.le-info .lunar {
  font-size: 12px;
  color: var(--c-muted);
}

.le-info .desc {
  font-size: 12px;
  color: var(--c-text2);
  margin-top: 2px;
}

/* ── YEARS NAV ── */
.years-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.y-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 16px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-full);
  font-size: 13px;
  font-weight: 600;
  color: var(--c-text2);
  text-decoration: none;
  transition: all .15s;
}

.y-link:hover,
.y-link.cur {
  background: var(--c-primary);
  color: #fff;
  border-color: var(--c-primary);
}

/* Month nav */
.month-grid-nav {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}

.m-link {
  display: block;
  padding: 7px;
  text-align: center;
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  font-size: 12px;
  color: var(--c-text2);
  text-decoration: none;
  transition: all .15s;
}

.m-link:hover,
.m-link.cur {
  background: var(--c-primary);
  color: #fff;
  border-color: var(--c-primary);
}

/* ── FAQ ── */
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.faq-item {
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  padding: 16px 20px;
}

.faq-item h3 {
  font-size: 15px;
  font-weight: 700;
  color: var(--c-primary-dk);
  margin-bottom: 8px;
}

.faq-item p {
  font-size: 13px;
  color: var(--c-text2);
  line-height: 1.7;
  margin: 0;
}

/* ── AD PLACEHOLDER ── */
.ad {
  background: var(--c-border);
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: var(--c-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 16px;
}

.ad.h60 {
  height: 60px;
}

.ad.h90 {
  height: 90px;
}

.ad.h250 {
  height: 250px;
}

/* ── RESPONSIVE ── */
@media (max-width: 1024px) {
  .hero-v3 .hero-content {
    grid-template-columns: 1fr;
  }

  .hero-calendar-widget {
    display: none;
  }

  .advisor-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .services-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .tools-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .year-info-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .main-layout-v2 {
    grid-template-columns: 1fr;
  }

  .month-cards {
    grid-template-columns: repeat(2, 1fr);
  }

  .tk-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .advisor-grid {
    grid-template-columns: 1fr;
  }

  .gio-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .services-grid {
    grid-template-columns: 1fr;
  }

  .tools-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .tuoi-hop-grid {
    grid-template-columns: 1fr;
  }

  .act-grid {
    grid-template-columns: 1fr;
  }

  .info-grid-v2 {
    grid-template-columns: 1fr;
  }

  .info-grid-v2.cols-4 {
    grid-template-columns: repeat(2, 1fr);
  }

  .dh-inner {
    flex-direction: column;
  }

  .dh-num {
    font-size: 56px;
  }

  .mh-stats {
    flex-wrap: wrap;
  }

  .month-cards {
    grid-template-columns: 1fr;
  }

  .year-info-grid {
    grid-template-columns: 1fr;
  }

  .tk-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .link-temporal-inner {
    flex-direction: column;
  }
}

@media (max-width: 480px) {
  .gio-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .tools-grid {
    grid-template-columns: 1fr;
  }

  .cal-cell-v2 .d-can {
    display: none;
  }

  .cal-cell-v2 {
    padding: 5px 3px;
    min-height: 48px;
  }
}

/* ── HERO CARD (in-layout, inside main-col) ── */
.hero-card {
  background: linear-gradient(135deg, var(--c-primary-dk) 0%, var(--c-primary) 55%, #0db87a 100%);
  border-radius: var(--r-xl);
  overflow: hidden;
  position: relative;
  box-shadow: 0 6px 24px rgba(10, 140, 90, .35);
}

.hero-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23fff' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/svg%3E");
  pointer-events: none;
}

.hero-card-inner {
  padding: 24px 24px 16px;
  position: relative;
}

.hero-date-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: rgba(255, 255, 255, .8);
  font-weight: 600;
  margin-bottom: 10px;
}

.hero-card-h1 {
  font-size: 22px;
  font-weight: 800;
  color: #fff;
  line-height: 1.3;
  margin-bottom: 12px;
}

.hero-accent {
  color: #ffe8a0;
}

.hero-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}

.hero-meta-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: var(--r-full);
}

.badge-gold {
  background: #e09c1a;
  color: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .2);
}

.badge-green {
  background: rgba(255, 255, 255, .28);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .4);
}

.badge-outline {
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .5);
  color: #fff;
}

/* Hero cal mini — horizontal info bar */
.hero-cal-mini {
  display: flex;
  align-items: stretch;
  background: rgba(255, 255, 255, .15);
  border-radius: var(--r-md);
  overflow: hidden;
  margin-top: 14px;
  border: 1px solid rgba(255, 255, 255, .3);
}

.hcm-item {
  flex: 1;
  padding: 11px 14px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.hcm-sep {
  width: 1px;
  background: rgba(255, 255, 255, .3);
  margin: 6px 0;
  flex-shrink: 0;
}

.hcm-lbl {
  font-size: 10px;
  color: #fff;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .4px;
  white-space: nowrap;
}

.hcm-val {
  font-size: 14px;
  font-weight: 800;
  color: #fff;
  line-height: 1.3;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .25);
}

.hcm-val.gold {
  color: #ffe44d;
  text-shadow: 0 1px 4px rgba(0, 0, 0, .3);
}

.hcm-val.red {
  color: #ffb3b3;
}

.sao-tag {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 10px;
  margin: 2px 4px 2px 0;
  line-height: 1.4;
  text-shadow: none;
}

.sao-tag.sao-good {
  background: rgba(255, 228, 77, .18);
  color: #ffe44d;
  border: 1px solid rgba(255, 228, 77, .45);
}

.sao-tag.sao-bad {
  background: rgba(255, 130, 130, .18);
  color: #ffb3b3;
  border: 1px solid rgba(255, 130, 130, .45);
}

/* Thông điệp ngày */
.daily-message {
  font-size: 15px;
  color: var(--c-text);
  line-height: 1.8;
  font-style: italic;
  border-left: 3px solid var(--c-primary);
  padding-left: 14px;
  margin: 0;
}

.mentor-box {
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  padding: 16px;
  margin-top: 16px;
}

.mentor-lesson {
  font-size: 14px;
  color: var(--c-text);
  line-height: 1.8;
  font-style: italic;
  margin-bottom: 8px;
}

.mentor-wisdom {
  font-size: 13px;
  color: var(--c-text2);
  line-height: 1.7;
  margin: 0;
}

/* Hero CTA strip */
.hero-card-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 14px 24px;
  border-top: 1px solid rgba(255, 255, 255, .15);
}

.hc-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 18px;
  border-radius: var(--r-full);
  font-size: 13px;
  font-weight: 600;
  transition: all .2s;
}

.hc-btn-white {
  background: #fff;
  color: var(--c-primary-dk);
}

.hc-btn-white:hover {
  background: var(--c-primary-lt);
  color: var(--c-primary-dk);
}

.hc-btn-outline {
  background: transparent;
  color: #fff;
  border: 1.5px solid rgba(255, 255, 255, .5);
}

.hc-btn-outline:hover {
  background: rgba(255, 255, 255, .12);
}

/* ── PAGE BODY — UNIFIED 2-COLUMN LAYOUT ── */
.page-body {
  background: var(--c-bg);
  padding: 24px 0 48px;
}

.body-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 24px;
  align-items: start;
}

.main-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.sidebar-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: sticky;
  top: 76px;
}

.content-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: 24px;
  overflow: hidden;
  box-shadow: var(--sh-sm);
}

.card-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--c-text);
  margin: 0 0 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 12px;
  border-bottom: 2px solid #b8e8d4;
  font-family: 'Lora', serif;
}

/* Sidebar form inputs */
.form-input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  font-size: 13px;
  background: var(--c-bg);
  box-sizing: border-box;
  margin-bottom: 6px;
}

.btn-pri {
  background: var(--c-primary);
  color: #fff;
  border: none;
  padding: 10px;
  border-radius: var(--r-sm);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  width: 100%;
}

.btn-pri:hover {
  background: var(--c-primary-dk);
}

/* Tuvi list */
.tuvi-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.tuvi-list li {
  padding: 7px 0;
  font-size: 13px;
  border-bottom: 1px solid var(--c-border);
}

.tuvi-list li:last-child {
  border-bottom: none;
}

.tuvi-list .con {
  font-size: 16px;
}

/* Responsive */
@media (max-width: 1024px) {
  .body-layout {
    grid-template-columns: 1fr;
  }

  .sidebar-col {
    position: static;
  }
}

@media (max-width: 640px) {
  .hero-cal-mini {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .hcm-sep {
    display: none;
  }

  .hero-card-h1 {
    font-size: 18px;
  }
}

/* ============================================================
   SIDEBAR SUB PAGES — Cấu trúc cột phải chuẩn (v1.0)
   Áp dụng cho: ngay-tot/ | phong-thuy/ | tiet-khi/ sub pages
   ============================================================ */

/* Block wrapper */
.sb-block {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sh-sm);
  margin-bottom: 14px;
}

.sb-block:last-child {
  margin-bottom: 0;
}

/* Block title bar */
.sb-title {
  display: flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, var(--c-primary-dk) 0%, var(--c-primary) 100%);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 10px 14px;
  text-transform: uppercase;
  letter-spacing: .4px;
}

.sb-title.gold {
  background: linear-gradient(135deg, #8a5c08 0%, var(--c-gold) 100%);
}

.sb-title.blue {
  background: linear-gradient(135deg, #1a3d9e 0%, var(--c-blue) 100%);
}

.sb-title.orange {
  background: linear-gradient(135deg, #994d08 0%, var(--c-orange) 100%);
}

.sb-title .sb-ico {
  font-size: 14px;
}

/* Same-hub nav list */
.sb-nav {
  list-style: none;
  padding: 6px 0;
  margin: 0;
}

.sb-nav li {
  border-bottom: 1px solid var(--c-border);
}

.sb-nav li:last-child {
  border-bottom: none;
}

.sb-nav a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  font-size: 13px;
  color: var(--c-text2);
  text-decoration: none;
  transition: background .12s, color .12s;
}

.sb-nav a:hover {
  background: var(--c-primary-lt);
  color: var(--c-primary-dk);
}

.sb-nav a.active {
  background: var(--c-primary-lt);
  color: var(--c-primary);
  font-weight: 700;
  border-right: 3px solid var(--c-primary);
}

.sb-nav .nav-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c-border);
  flex-shrink: 0;
}

.sb-nav a.active .nav-dot {
  background: var(--c-primary);
}

/* Cross-hub internal link list */
.sb-links {
  list-style: none;
  padding: 8px 0;
  margin: 0;
}

.sb-links li {
  border-bottom: 1px solid var(--c-border);
}

.sb-links li:last-child {
  border-bottom: none;
}

.sb-links a {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 14px;
  font-size: 13px;
  color: var(--c-text2);
  text-decoration: none;
  transition: background .12s, color .12s;
  line-height: 1.4;
}

.sb-links a:hover {
  background: var(--c-blue-lt);
  color: var(--c-blue);
}

.sb-links .arrow {
  color: var(--c-primary);
  font-size: 11px;
  margin-top: 2px;
  flex-shrink: 0;
}

/* CTA button at bottom of sb-block */
.sb-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 8px 14px 12px;
  padding: 8px 16px;
  background: var(--c-primary-lt);
  color: var(--c-primary-dk);
  border-radius: var(--r-full);
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  transition: background .15s, color .15s;
}

.sb-cta:hover {
  background: var(--c-primary);
  color: #fff;
}

/* ── ĐỔI LỊCH WIDGET (div-chuyen-doi-tool partial) ── */
.dl-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
}

.dl-tab {
  flex: 1;
  padding: 7px 10px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-full);
  background: var(--c-bg);
  color: var(--c-text2);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s;
}

.dl-tab.active,
.dl-tab:hover {
  background: var(--c-primary);
  color: #fff;
  border-color: var(--c-primary);
}

.dl-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 8px;
}

.dl-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.dl-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--c-muted);
  text-transform: uppercase;
  letter-spacing: .4px;
}

.dl-field .form-input {
  margin-bottom: 0;
}

/* ============================================================
   ILINK — INTERNAL LINK ATOMS
   Prefix: ilink-*
   Dùng cho: mọi anchor/paragraph internal link trong bài viết
   Áp dụng: can-chi/, ngu-hanh/, kien-thuc/, cong-cu/, phong-thuy/
   Quy ước đặt tên:
     ilink-ref   = <a> anchor inline trong đoạn văn
     ilink-hint  = <p> bao quanh ilink-ref (optional wrapper)
     ilink-cta   = <a> dạng nút CTA riêng dòng
     ilink-box   = <div>/<section> chứa nhóm link liên quan
   ============================================================ */

/* ilink-ref: anchor link inline trong nội dung bài viết */
a.ilink-ref {
  color: var(--c-primary-dk);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1.5px dashed var(--c-primary);
  transition: color .15s, border-color .15s;
}

a.ilink-ref:hover {
  color: var(--c-primary);
  border-bottom-style: solid;
}

/* ilink-hint: <p> wrapper cho ilink-ref — highlight nhẹ nền */
p.ilink-hint {
  background: var(--c-primary-lt);
  border-left: 3px solid var(--c-primary);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  padding: 10px 14px;
  margin: 14px 0;
  font-size: 13px;
  color: var(--c-text2);
  line-height: 1.7;
}

p.ilink-hint a.ilink-ref {
  border-bottom-color: transparent;
}

/* ilink-cta: <a> nút riêng dòng — to hơn ilink-ref */
a.ilink-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  background: var(--c-primary-lt);
  color: var(--c-primary-dk);
  border: 1.5px solid var(--c-primary);
  border-radius: var(--r-full);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  transition: background .15s, color .15s;
  margin: 12px 0;
}

a.ilink-cta:hover {
  background: var(--c-primary);
  color: #fff;
}

/* ilink-box: wrapper nhóm nhiều link liên quan */
.ilink-box {
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  padding: 14px 16px;
  margin: 16px 0;
}

.ilink-box-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--c-muted);
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-bottom: 8px;
}

.ilink-box ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ilink-box ul li a {
  display: inline-block;
  padding: 4px 12px;
  background: var(--c-surface);
  color: var(--c-primary-dk);
  border: 1px solid #b3ecd6;
  border-radius: var(--r-full);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  transition: all .15s;
}

.ilink-box ul li a:hover {
  background: var(--c-primary);
  color: #fff;
  border-color: var(--c-primary);
}

/* ============================================================
   NH — NGŨ HÀNH UI COMPONENTS
   Prefix: nh-*
   Dùng cho: /ngu-hanh/menh-[id]/  (menh-detail.hbs)
   Extract từ inline style trong menh-detail.hbs
   ============================================================ */

.nh-article-header {
  border-radius: var(--r-lg);
  padding: 28px 26px;
  position: relative;
  overflow: hidden;
}

.nh-article-header.moc {
  background: linear-gradient(140deg, #14532d 0%, #166534 60%, #16a34a 100%);
}

.nh-article-header.hoa {
  background: linear-gradient(140deg, #7f1d1d 0%, #991b1b 60%, #dc2626 100%);
}

.nh-article-header.tho {
  background: linear-gradient(140deg, #78350f 0%, #92400e 60%, #d97706 100%);
}

.nh-article-header.kim {
  background: linear-gradient(140deg, #2e1065 0%, #5b21b6 60%, #7c3aed 100%);
}

.nh-article-header.thuy {
  background: linear-gradient(140deg, #1e3a8a 0%, #1e40af 60%, #1d4ed8 100%);
}

.nh-article-header::before {
  content: attr(data-ico);
  font-size: 140px;
  position: absolute;
  right: -12px;
  top: -28px;
  opacity: .06;
  pointer-events: none;
  line-height: 1;
}

.nh-h1 {
  font-size: 22px;
  font-weight: 800;
  color: #fff;
  margin: 0 0 10px;
  line-height: 1.35;
}

.nh-h2 {
  font-size: 18px;
  font-weight: 700;
  color: var(--c-text);
  margin: 0 0 14px;
}

.nh-lead {
  font-size: 13.5px;
  color: rgba(255, 255, 255, .82);
  line-height: 1.7;
  margin: 0;
}

.nh-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 14px;
  flex-wrap: wrap;
}

.nh-meta-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  color: rgba(255, 255, 255, .65);
  font-weight: 600;
}

/* nh-color: color swatch */
.nh-color-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 12px 0;
}

.nh-color-swatch {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.nh-color-circle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid var(--c-border);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .15);
}

.nh-color-label {
  font-size: 10px;
  color: var(--c-text2);
  text-align: center;
  max-width: 46px;
  line-height: 1.3;
}

/* nh-dir: direction badges */
.nh-dir-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.nh-dir-badge {
  padding: 5px 14px;
  border-radius: var(--r-full);
  font-size: 12px;
  font-weight: 700;
  border: 1.5px solid;
}

.nh-dir-badge.good {
  background: #f0fdf4;
  border-color: #4ade80;
  color: #166534;
}

.nh-dir-badge.bad {
  background: #fff5f5;
  border-color: #f87171;
  color: #991b1b;
}

/* nh-traits: personality grid */
.nh-traits {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 10px 0;
}

.nh-trait-card {
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  padding: 10px 12px;
}

.nh-trait-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--c-muted);
  text-transform: uppercase;
  letter-spacing: .4px;
  margin-bottom: 4px;
}

.nh-trait-list {
  font-size: 12px;
  color: var(--c-text2);
  line-height: 1.8;
}

/* nh-rel: relationship table (tương sinh/khắc) */
.nh-rel-table {
  width: 100%;
  border-collapse: collapse;
  margin: 12px 0;
}

.nh-rel-table th,
.nh-rel-table td {
  padding: 10px 12px;
  text-align: left;
  font-size: 13px;
  border-bottom: 1px solid var(--c-border);
}

.nh-rel-table th {
  background: var(--c-bg);
  font-weight: 700;
  color: var(--c-text);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .4px;
}

.nh-rel-table td:first-child {
  font-weight: 700;
}

.nh-rel-badge {
  display: inline-block;
  padding: 2px 9px;
  border-radius: var(--r-full);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.nh-rel-badge.duoc-sinh {
  background: #f0fdf4;
  color: #166534;
  border: 1px solid #4ade80;
}

.nh-rel-badge.sinh-to {
  background: #eff6ff;
  color: #1e40af;
  border: 1px solid #60a5fa;
}

.nh-rel-badge.binh {
  background: #f9fafb;
  color: #6b7280;
  border: 1px solid #d1d5db;
}

.nh-rel-badge.khac-to {
  background: #fff7ed;
  color: #9a3412;
  border: 1px solid #fdba74;
}

.nh-rel-badge.bi-khac {
  background: #fff5f5;
  color: #991b1b;
  border: 1px solid #f87171;
}

/* nh-tool: interactive lookup widget */
.nh-tool {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  overflow: hidden;
}

.nh-tool-head {
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.nh-tool-head-ico {
  font-size: 22px;
}

.nh-tool-head-title {
  font-size: 14px;
  font-weight: 800;
  color: #fff;
}

.nh-tool-head-sub {
  font-size: 12px;
  color: rgba(255, 255, 255, .7);
}

.nh-tool-body {
  padding: 16px 18px;
}

.nh-result {
  display: none;
  margin-top: 12px;
  padding: 14px 16px;
  border-radius: var(--r-md);
  border: 2px solid var(--c-border);
  background: var(--c-bg);
}

.nh-result.show {
  display: block;
}

.nh-result-rel {
  font-size: 16px;
  font-weight: 800;
  margin-bottom: 4px;
}

.nh-result-desc {
  font-size: 13px;
  color: var(--c-text2);
  line-height: 1.7;
}

/* nh-art-footer: author/share bar */
.nh-art-footer {
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

/* pt-faq: FAQ accordion (shared giữa ngu-hanh và phong-thuy) */
.pt-faq {
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  overflow: hidden;
}

.pt-faq details {
  border-bottom: 1px solid var(--c-border);
}

.pt-faq details:last-child {
  border-bottom: none;
}

.pt-faq summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  cursor: pointer;
  list-style: none;
  font-size: 14px;
  font-weight: 600;
  color: var(--c-text);
  transition: background .12s;
  user-select: none;
}

.pt-faq summary::-webkit-details-marker {
  display: none;
}

.pt-faq summary::after {
  content: '▾';
  color: var(--c-muted);
  font-size: 12px;
  margin-top: 2px;
  flex-shrink: 0;
  transition: transform .2s;
}

.pt-faq details[open] summary {
  background: var(--c-bg);
}

.pt-faq details[open] summary::after {
  transform: rotate(180deg);
}

.pt-faq summary:hover {
  background: var(--c-bg);
}

.pt-faq .faq-answer {
  padding: 0 16px 14px;
  font-size: 13px;
  color: var(--c-text2);
  line-height: 1.8;
}

/* Responsive nh-* */
@media (max-width: 640px) {
  .nh-traits {
    grid-template-columns: 1fr;
  }

  .nh-rel-table th:last-child,
  .nh-rel-table td:last-child {
    display: none;
  }
}