/*
Theme Name: Flatsome Child - Lịch Âm 365
Theme URI: http://licham365.com.vn/
Description: Child theme Flatsome cho Lịch Âm Việt Nam, tích hợp UX Builder và thư viện Lịch Âm.
Author: UX-Themes & SkyAds
Author URI: http://licham365.com.vn/
Template: flatsome
Version: 3.0.3
*/

@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@400;500;600;700;800&family=Roboto:wght@400;500;600;700&display=swap');
  
:root{--red:#ef0718;
  --ink:#121622;
  --muted:#687289;
  --line:#efeeed;
  --cream:#faf5ee}
*{box-sizing:border-box}
html{scroll-behavior:smooth;
  scroll-padding-top:16px}
body{margin:0;
  color:var(--ink);
  background:#f6f2ed;
  font:14px 'Roboto Condensed',Arial,sans-serif;
  line-height:1.4}
a{color:inherit;
  text-decoration:none}
button,input,select{font:inherit}
button,a,input,select{-webkit-tap-highlight-color:transparent}
button{cursor:pointer}
button:disabled{opacity:.4;
  cursor:not-allowed}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #ef6a6a;
  outline-offset:3px}
button{color:inherit}
.icon{width:22px;
  height:22px;
  flex-shrink:0;
  vertical-align:middle}
.yin{font-family:Arial,sans-serif;
  line-height:1;
  color:var(--red)}
.site-header{height:54px;
  background:#ffffffed;
  position:relative;
  z-index:3}
.site-header .header-inner{max-width:1280px;
  padding:0 24px 0 7.8%;
  height:100%;
  margin:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:22px}
.brand{display:flex;
  align-items:center;
  gap:8px;
  white-space:nowrap}
.brand>.yin{font-size:49px}
.brand strong{color:#e9000c;
  font-family:Roboto,Arial,sans-serif;
  font-size:21px;
  display:block;
  line-height:1.15}
.brand small{display:block;
  font-size:14px;
  color:#777d87;
  line-height:1.25}
.site-header nav{display:flex;
  align-items:center;
  gap:26px;
  height:100%;
  white-space:nowrap}
.site-header nav a{font:14px Roboto,Arial,sans-serif;
  display:flex;
  height:100%;
  align-items:center;
  position:relative}
.site-header nav a.active{color:var(--red);
  font-weight:600}
.site-header nav a.active:after{position:absolute;
  bottom:8px;
  left:0;
  right:0;
  height:2px;
  content:'';
  background:var(--red)}
.header-actions{display:flex;
  gap:12px;
  align-items:center}
.search-button{background:white;
  border:0;
  border-radius:8px;
  box-shadow:0 1px 13px #0000000c;
  padding:7px;
  display:flex}
.login-button,.primary-button{background:linear-gradient(#ef1717,#d90000);
  border:0;
  border-radius:8px;
  color:white;
  font-weight:600;
  padding:10px 20px;
  white-space:nowrap}
.menu-button{display:none;
  border:0;
  background:none;
  font-size:24px}
.calendar-hero{height:384px;
  background:#f7e9d4 url('assets/hero-landscape.png') center center/cover;
  position:relative;
  padding:17px 30px 18px}
.hero-heading{text-align:center}
.hero-heading h1{font:bold 27px Georgia,'Times New Roman',serif;
  letter-spacing:-.7px;
  margin:2px 0 4px;
  color:#080c0b}
.hero-heading p{font:16px Roboto,Arial,sans-serif;
  margin:0}
.hero-heading i{font-style:normal;
  color:#7e8690;
  margin:0 10px}
.hero-panels{max-width:1220px;
  margin:46px auto 0;
  display:grid;
  grid-template-columns:1fr 1.18fr .96fr;
  gap:21px;
  align-items:start}
.panel{background:rgba(255,255,255,.97);
  border-radius:11px;
  padding:13px;
  min-width:0}
.panel h2{font-size:19px;
  line-height:1.2;
  margin:0 0 10px;
  font-weight:700;
  display:flex;
  gap:10px;
  align-items:center;
  color:#080d12}
.panel h2>.icon{color:var(--red);
  width:23px;
  height:23px}
.info-row{display:grid;
  grid-template-columns:45% 55%;
  border:1px solid #f0efed;
  border-radius:9px;
  min-height:33px;
  margin-top:2px;
  font-size:14px;
  overflow:hidden;
  align-items:stretch}
.row-label{display:flex;
  align-items:center;
  gap:10px;
  border-radius:9px;
  background:#fdf6eb;
  padding:3px 6px}
.row-label b{font-size:14px;
  font-weight:600}
.row-value{padding:6px 10px;
  color:#46516a;
  line-height:1.35;
  display:flex;
  align-items:center;
  font-size:14px}
.mini-icon{width:25px;
  height:25px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:8px;
  flex-shrink:0;
  color:var(--red);
  background:#fff0ed}
.mini-icon .icon{width:18px;
  height:18px}
.mini-icon .yin{font-size:20px}
.mini-icon.orange{color:#fa6b00;
  background:#fff1dc}
.mini-icon.green{color:#086726;
  background:#e6f2df}
.mini-icon.orange .yin{color:#fa6b00}
.bloc-area{display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  margin-top:-34px}
.calendar-bloc{width:255px;
  flex-shrink:0;
  position:relative;
  filter:drop-shadow(0 5px 9px #ae8e6425)}
.bloc-month{position:relative;
  background:linear-gradient(135deg,#d20000,#f00b12,#cf0000);
  border-radius:9px 9px 0 0;
  text-align:center;
  color:white;
  font-size:15px;
  font-weight:700;
  padding:9px 4px;
  height:38px;
  z-index:1}
.bloc-month:before{content:'';
  position:absolute;
  inset:-12px 16px 5px;
  background:inherit;
  border-radius:8px 8px 0 0;
  z-index:-1}
.bloc-paper{background:radial-gradient(ellipse at center,#fff 20%,#fff9ed 100%);
  border:1px solid #f8e7d3;
  border-radius:8px;
  min-height:241px;
  text-align:center;
  padding:0 5px 14px;
  position:relative;
  overflow:hidden}
.bloc-paper:before,.bloc-paper:after{content:'☁';
  position:absolute;
  font-size:95px;
  color:#e8c78c;
  opacity:.09;
  left:-20px;
  top:12px;
  pointer-events:none}
.bloc-paper:after{left:auto;
  right:-17px;
  top:123px}
.bloc-number{font:800 120px/1.02 'Roboto Condensed',Arial,sans-serif;
  color:#e6000a;
  letter-spacing:-7px}
.bloc-weekday{display:block;
  font-size:25px;
  line-height:1.2;
  color:#e70007;
  text-transform:uppercase;
  margin:0 0 10px}
.bloc-lunar{display:block;
  font-size:14px}
.bloc-canchi{font-size:14px;
  color:#59617b;
  margin:7px 0 12px}
.detail-button{display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  border:1px solid #ffd9d7;
  border-radius:30px;
  background:#ffedeb;
  color:var(--red);
  font-size:14px;
  padding:6px 19px}
.detail-button .icon{width:20px;
  height:20px}
.day-arrow{background:#fffef9;
  border:1px solid #e0dace;
  border-radius:50%;
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  flex-shrink:0;
  box-shadow:0 2px 8px #0002}
.day-arrow .icon{width:18px;
  height:18px}
.day-arrow.previous-day .icon{transform:rotate(180deg)}
.main-container{max-width:1280px;
  margin:0 auto;
  padding:0 23px 8px}
.feature-grid{display:grid;
  grid-template-columns:repeat(7,minmax(0,1fr));
  gap:13px;
  padding:12px;
  margin:0 0 7px;
  position:relative}
.feature{--accent:#ef0011;
  --tint:#fff4f4;
  text-align:center;
  border-radius:6px;
  background:var(--tint);
  padding:5px 4px 10px;
  min-height:133px;
  transition:transform .15s}
.feature:hover{transform:translateY(-3px)}
.feature-icon{height:62px;
  width:62px;
  border-radius:50%;
  background:color-mix(in srgb,var(--accent) 10%,transparent);
  color:var(--accent);
  display:grid;
  place-items:center;
  margin:0 auto 5px}
.feature-icon>.icon{width:37px;
  height:37px;
  stroke-width:2}
.feature h3{font-size:16px;
  font-weight:600;
  color:var(--accent);
  line-height:1.05;
  margin:3px 0 7px;
  min-height:18px}
.feature p{font-size:14px;
  color:#56617a;
  line-height:1.25;
  margin:0}
.feature.orange{--accent:#ff7600;
  --tint:#fff9f1}
.feature.orange h3{color:var(--red)}
.feature.purple{--accent:#6a2efb;
  --tint:#f6f4ff}
.feature.purple h3,.feature.blue h3{color:#101333}
.feature.green{--accent:#006031;
  --tint:#f2fbf3}
.feature.blue{--accent:#1687ff;
  --tint:#f0f7ff}
.dashboard-grid{display:grid;
  grid-template-columns:1.1fr .94fr 1fr;
  gap:7px;
  align-items:stretch}
.dashboard-grid>.panel{min-height:393px}
.panel-heading{display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:9px}
.panel-heading h2{margin:0;
  gap:8px;
  white-space:nowrap}
.panel-heading>a{color:var(--red);
  font-size:14px;
  white-space:nowrap}
.panel-heading>a .icon{width:14px;
  height:14px}
.month-controls{display:flex;
  gap:8px}
.month-controls button{height:27px;
  width:28px;
  line-height:20px;
  font-size:26px;
  background:white;
  border:1px solid #ffdddd;
  color:var(--red);
  border-radius:9px}
.weekdays{display:grid;
  grid-template-columns:repeat(7,1fr);
  text-align:center;
  border:1px solid var(--line);
  border-bottom:0;
  border-radius:6px 6px 0 0;
  font-size:14px;
  font-weight:600;
  color:#38425a;
  padding:6px 0}
.weekdays span:last-child{color:var(--red)}
.calendar-grid{display:grid;
  grid-template-columns:repeat(7,minmax(0,1fr));
  border-left:1px solid var(--line);
  border-top:1px solid var(--line)}
.date-cell{border:0;
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:white;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  min-height:49px;
  padding:3px;
  color:#172033;
  position:relative}
.date-cell .solar{font-weight:600;
  font-size:15px;
  line-height:1.5}
.date-cell .lunar{font-size:14px;
  line-height:1.35;
  color:#7c859b}
.date-cell.outside{color:#a3a3a5}
.date-cell.outside .lunar{color:#a3a3a5}
.date-cell.sunday,.date-cell.sunday .lunar{color:#f00013}
.date-cell.selected{color:white;
  background:#f00920;
  border-radius:8px;
  border-color:#f00920;
  box-shadow:0 3px 7px #f0092015}
.date-cell.selected .lunar{color:white}
.date-cell:hover:not(.selected){background:#fff1ed}
.today-link{background:none;
  border:0;
  color:#e11d2c;
  font-size:14px;
  padding:7px 0;
  float:right}
.day-details h2{font-size:19px;
  gap:4px;
  white-space:nowrap;
  margin:3px 0 9px}
.day-details .info-row{min-height:48px;
  grid-template-columns:43% 57%}
.day-details .row-label{background:linear-gradient(90deg,#fff7f3,#fff);
  gap:8px;
  padding:3px 0}
.day-details .mini-icon{width:32px;
  height:38px}
.day-details .mini-icon>.icon{height:20px;
  width:20px}
.day-details .row-value{padding:6px 6px;
  font-size:14px}
.right-column{display:flex;
  flex-direction:column;
  gap:8px;
  min-width:0}
.promo-banner{display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  width:100%;
  min-height:170px;
  padding:18px 10px;
  border:7px solid white;
  border-radius:11px;
  text-align:center;
  background:linear-gradient(90deg,#fff8e6d9,#fffaf1bd),url("assets/hero-landscape.png") center/cover}
.upcoming{flex:1;
  padding:12px}
.upcoming h2{font-size:18px;
  gap:7px}
.upcoming h2 .icon{width:20px;
  height:20px}
.upcoming-item{display:flex;
  align-items:center;
  border:1px solid var(--line);
  border-radius:8px;
  margin-top:5px;
  gap:12px;
  min-height:49px;
  overflow:hidden}
.upcoming-date{background:#fff0ea;
  color:red;
  text-align:center;
  align-self:stretch;
  min-width:56px;
  display:flex;
  justify-content:center;
  flex-direction:column;
  line-height:1.15;
  font-size:14px}
.upcoming-date strong{font-size:17px}
.upcoming-text{flex:1;
  min-width:0}
.upcoming-text b{font-size:14px}
.upcoming-text small{font-size:14px;
  display:block;
  color:#7d8699;
  margin-top:3px}
.upcoming-item>.icon{height:17px;
  width:17px;
  color:#788298;
  margin-right:8px}
.articles-section{margin-top:8px;
  padding:12px 13px 10px}
.article-grid{display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px}
.article-card{display:flex;
  flex-direction:column;
  height:100%;
  border:1px solid #efefed;
  border-radius:6px;
  overflow:hidden;
  background:white}
.article-image{display:block;
  width:100%;
  height:auto;
  aspect-ratio:2.34;
  object-fit:cover}
.article-content{display:flex;
  flex-direction:column;
  flex:1;
  padding:8px 10px}
.article-content h3{font-size:15px;
  font-weight:700;
  line-height:1.25;
  margin:0 0 8px;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden}
.article-content p{font-size:14px;
  line-height:1.35;
  color:#707a90;
  margin:0 0 10px;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden}
.article-meta{margin-top:auto;
  display:flex;
  align-items:center;
  gap:5px;
  font-size:14px;
  color:#7b8499;
  padding-top:4px}
.article-meta span{display:flex;
  align-items:center;
  gap:6px}
.article-meta .icon{width:14px;
  height:14px}
.article-meta span:first-child .icon{color:var(--red)}
.site-footer{margin-top:0;
  position:relative;
  background:#fffaf3;
  overflow:hidden}
.site-footer:before{content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(#fff9 .0%,#fff8),url('assets/hero-landscape.png') center 61%/cover;
  opacity:.75;
  pointer-events:none}
.footer-grid{position:relative;
  padding:20px 22px 14px;
  margin:auto;
  display:grid;
  grid-template-columns:1.7fr .8fr .8fr 1.65fr;
  gap:46px}
.footer-about{max-width:250px}
.footer-about .brand strong{font-size:20px}
.footer-about .brand>.yin{font-size:43px}
.footer-about p{font-size:14px;
  line-height:1.5;
  color:#687086;
  margin:10px 0}
.footer-grid h4{color:var(--red);
  font-size:14px;
  margin:0 0 7px}
.footer-grid>div>a:not(.brand){display:block;
  font-size:14px;
  line-height:1.7;
  color:#4e5870;
  margin:1px 0}
.footer-grid>div>p{font-size:14px;
  color:#58637a;
  margin:5px 0}
.footer-grid>div>p>.icon,.footer-grid>div>a>.icon{width:14px;
  height:14px;
  color:var(--red);
  margin-right:8px}
.socials{display:flex;
  gap:8px;
  margin-top:10px}
.socials span{display:grid;
  place-items:center;
  width:24px;
  height:24px;
  border-radius:50%;
  background:#1680ef;
  color:white;
  font:bold 18px Arial}
.socials span:nth-child(2){background:red;
  font-size:14px}
.socials span:nth-child(3){background:#111}
.socials span:nth-child(4){font-size:14px}
.socials span:nth-child(5){background:#f42d77}
.copyright{position:relative;
  border-top:1px solid #ebddcf;
  padding:10px 32px;
  color:#687087;
  font-size:14px}
.inner-hero{text-align:center;
  padding:38px 24px;
  background:linear-gradient(#fff9,#fff9),url('assets/hero-landscape.png') center/cover}
.inner-hero h1{font:bold 32px Georgia,serif;
  margin:0 0 12px}
.inner-hero p{color:#596277;
  margin:0}
.eyebrow{font-size:14px;
  letter-spacing:2px;
  color:#c54432}
.tool-panel{max-width:720px;
  margin:35px auto 50px;
  background:white;
  padding:28px;
  border-radius:12px}
.tool-panel h2{font-size:23px}
.tabs{display:flex;
  gap:10px;
  margin-bottom:24px}
.tabs button{flex:1;
  padding:12px;
  border:1px solid #f4d6d2;
  border-radius:6px;
  background:#fff9f6}
.tabs button.active{background:var(--red);
  color:white}
.fields{display:grid;
  grid-template-columns:1fr 1fr 1.2fr;
  gap:16px}
label{display:block;
  font-size:14px}
input{display:block;
  width:100%;
  height:44px;
  padding:10px 12px;
  border:1px solid #e8ded9;
  border-radius:6px;
  margin-top:7px;
  background:white;
  box-sizing:border-box}
select{display:block;
  width:100%;
  height:44px;
  line-height:42px;
  padding:0 34px 0 12px;
  border:1px solid #e8ded9;
  border-radius:6px;
  margin-top:7px;
  background:white;
  box-sizing:border-box;
  appearance:none;
  -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23666666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 10px center;
  background-size:16px 16px}
.check-label{display:flex;
  align-items:center;
  gap:8px;
  margin-top:16px}
.check-label input{width:auto;
  margin:0}
.primary-button{margin-top:20px}
/* ==========================================================================
   CHUYỂN ĐỔI ÂM DƯƠNG (DOI-NGAY) - NÂNG CẤP ĐỒNG BỘ LỊCH NGÀY / THÁNG / NĂM
   ========================================================================== */
.convert-tabs-wrap {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  margin: 0 0 20px 0 !important;
}
.convert-tabs {
  display: inline-flex !important;
  align-items: center !important;
  background: #fbf3ec !important;
  padding: 4px !important;
  border-radius: 30px !important;
  border: 1px solid #ead9cc !important;
  gap: 4px !important;
  margin: 0 !important;
  line-height: 1 !important;
}
.convert-tab {
  margin: 0 !important;
  padding: 8px 20px !important;
  border-radius: 24px !important;
  border: none !important;
  font-size: 14.5px !important;
  font-weight: 700 !important;
  color: #6c5a4e !important;
  background: transparent !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  line-height: 1.2 !important;
  min-height: 0 !important;
  height: auto !important;
  text-transform: uppercase !important;
  letter-spacing: 0.3px !important;
  box-shadow: none !important;
  transition: all 0.2s ease !important;
}
.convert-tab:hover:not(.active) {
  color: #c0262d !important;
  background: rgba(255, 255, 255, 0.7) !important;
}
.convert-tab.active {
  background: linear-gradient(135deg, #c0262d 0%, #9c151c 100%) !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(192, 38, 45, 0.3) !important;
}
.convert-help-text {
  font-size: 14.5px;
  color: #5a6474;
  margin: 0 0 18px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fffdf9;
  border-left: 3px solid #d97706;
  padding: 8px 14px;
  border-radius: 0 6px 6px 0;
}
.convert-help-text i {
  color: #d97706;
}
.convert-fields-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1.2fr;
  gap: 16px;
}
.convert-field label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 6px;
}
.convert-field label i {
  color: #c0262d;
  font-size: 13px;
}
.convert-field input {
  display: block;
  width: 100%;
  height: 48px;
  padding: 0 14px;
  border: 1.5px solid #ebdcd0;
  border-radius: 8px;
  background: #fff;
  font-size: 16px;
  font-weight: 600;
  color: #1f2937;
  box-sizing: border-box;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.convert-field input:focus {
  border-color: #c0262d;
  box-shadow: 0 0 0 3px rgba(192, 38, 45, 0.12);
  outline: none;
}
.convert-leap-wrap {
  margin-top: 14px;
}
.convert-leap-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  background: #fff7ed;
  border: 1px dashed #f97316;
  padding: 8px 14px;
  border-radius: 8px;
  color: #9a3412;
  font-size: 14.5px;
}
.convert-leap-checkbox input {
  width: 18px;
  height: 18px;
  margin: 0;
  cursor: pointer;
}
.convert-presets-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px dashed #ebdcd0;
}
.convert-presets-label {
  font-size: 14px;
  font-weight: 700;
  color: #8b1800;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-right: 4px;
}
.convert-presets-label i {
  color: #d97706;
}
.convert-presets-list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.convert-preset-chip {
  margin: 0 !important;
  min-height: 0 !important;
  line-height: 1.2 !important;
  background: #fffdf9 !important;
  border: 1px solid #dfd0c2 !important;
  border-radius: 20px !important;
  padding: 6px 14px !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  color: #4b5563 !important;
  cursor: pointer !important;
  box-shadow: none !important;
  transition: all 0.15s ease !important;
}
.convert-preset-chip:hover {
  background: #c0262d !important;
  color: #fff !important;
  border-color: #c0262d !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 3px 8px rgba(192, 38, 45, 0.22) !important;
}
.convert-actions {
  margin-top: 20px;
}
.lich-btn-convert {
  width: 100%;
  height: 50px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: linear-gradient(135deg, #c0262d 0%, #9c151c 100%);
  color: #fff;
  border: 1px solid #850c12;
  border-radius: 8px;
  box-shadow: 0 4px 14px rgba(160, 20, 28, 0.28);
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
}
.lich-btn-convert:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(160, 20, 28, 0.38);
}

/* Khối kết quả */
.conversion-result {
  margin-top: 26px;
}
.conversion-result:empty {
  display: none;
}
.convert-result-card {
  background: #fffdf9;
  border: 1.5px solid #ebdcd0;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(139, 24, 0, 0.05);
}
.convert-result-header-bar {
  background: linear-gradient(135deg, #fbf2ea 0%, #f6e6d8 100%);
  border-bottom: 1px solid #ebdcd0;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}
.convert-badge-status {
  padding: 4px 14px;
  border-radius: 20px;
  font-size: 13.5px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.convert-badge-status.is-hoang-dao {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #fff;
  box-shadow: 0 2px 6px rgba(217, 119, 6, 0.25);
}
.convert-badge-status.is-hac-dao {
  background: #64748b;
  color: #fff;
}
.convert-badge-tiet {
  background: #ebdcd0;
  color: #7a3a22;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.convert-result-grid {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 24px;
  padding: 22px;
  align-items: start;
}

/* Bloc lịch cột trái */
.convert-bloc-col {
  display: flex;
  justify-content: center;
}
.convert-bloc-paper {
  background: #ffffff;
  border: 1px solid #ebdcd0;
  border-radius: 12px;
  overflow: hidden;
  text-align: center;
  width: 100%;
  max-width: 240px;
  box-shadow: 0 4px 16px rgba(139, 24, 0, 0.08);
  position: relative;
}
.convert-bloc-top {
  background: linear-gradient(135deg, #c0262d, #8f0e14);
  color: #fff;
  padding: 8px 10px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.5px;
  position: relative;
}
.convert-bloc-rivets {
  position: absolute;
  top: 5px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  padding: 0 16px;
  pointer-events: none;
  z-index: 2;
}
.convert-bloc-rivets span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: radial-gradient(circle, #fde68a 30%, #b45309 100%);
  box-shadow: 0 1px 2px rgba(0,0,0,0.4);
}
.convert-bloc-num {
  font-size: 82px;
  font-weight: 800;
  font-family: Roboto, Arial, sans-serif;
  color: #c0262d;
  line-height: 0.95;
  padding: 14px 0 6px;
  letter-spacing: -3px;
}
.convert-bloc-weekday {
  font-size: 18px;
  font-weight: 700;
  color: #2d3748;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.convert-bloc-lunar {
  background: #fff4f2;
  border: 1px solid #ffd4cc;
  border-radius: 8px;
  margin: 0 14px 10px;
  padding: 8px 6px;
}
.convert-bloc-lunar-lbl {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: #8b1800;
  letter-spacing: 0.5px;
  margin-bottom: 2px;
}
.convert-bloc-lunar-date {
  font-size: 17px;
  font-weight: 800;
  color: #c0262d;
  display: block;
}
.convert-bloc-canchi {
  font-size: 13.5px;
  color: #64748b;
  font-weight: 600;
  padding-bottom: 12px;
}

/* Bảng chi tiết cột phải */
.convert-facts-table {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.convert-fact-row {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid #f1e6dc;
  font-size: 14.5px;
}
.convert-fact-row.highlight-solar {
  background: #fffbf7;
  border-color: #f7dacb;
}
.convert-fact-row.highlight-lunar {
  background: #fff7f7;
  border-color: #fed7d7;
}
.convert-fact-label {
  font-weight: 600;
  color: #64748b;
  display: flex;
  align-items: center;
  gap: 8px;
}
.convert-fact-label i {
  color: #c0262d;
  font-size: 14px;
  width: 16px;
}
.convert-fact-val {
  color: #1f2937;
  line-height: 1.45;
}
.convert-fact-val strong {
  color: #1f2937;
}
.highlight-lunar .convert-fact-val strong {
  color: #c0262d;
}
.canchi-pill {
  background: #ebdcd0;
  color: #7a3a22;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 13.5px;
  font-weight: 700;
  display: inline-block;
  margin-right: 8px;
}
.canchi-sub {
  color: #64748b;
  font-size: 13.5px;
}
.convert-fact-val .txt-good {
  color: #059669;
  font-weight: 700;
}
.convert-fact-val .txt-bad {
  color: #dc2626;
  font-weight: 700;
}
.convert-gio-chips-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.convert-gio-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  color: #065f46;
  font-size: 12.5px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 6px;
}
.convert-gio-chip i {
  font-size: 11px;
  color: #10b981;
}
.convert-action-wrap {
  margin-top: 16px;
}
.lich-btn-view {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 100% !important;
  padding: 13px 20px !important;
  background: linear-gradient(135deg, #c0262d 0%, #9c151c 100%) !important;
  border: 1px solid #850c12 !important;
  color: #ffffff !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  text-decoration: none !important;
  box-shadow: 0 4px 12px rgba(160, 20, 28, 0.25) !important;
  transition: all 0.2s ease !important;
  box-sizing: border-box !important;
  letter-spacing: 0.3px !important;
}
.lich-btn-view:hover {
  background: linear-gradient(135deg, #d31a22 0%, #ab171f 100%) !important;
  color: #ffffff !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 16px rgba(160, 20, 28, 0.35) !important;
}
.convert-error-box {
  background: #fdf2f2;
  border: 1px solid #f8b4b4;
  color: #9b1c1c;
  padding: 14px 18px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* 3 Bước chuyển đổi */
.convert-steps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.convert-step-card {
  background: #fffdf9;
  border: 1px solid #ebdcd0;
  border-radius: 10px;
  padding: 20px 18px;
  text-align: left;
  transition: transform 0.2s, box-shadow 0.2s;
}
.convert-step-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(139, 24, 0, 0.06);
  border-color: #dfd0c2;
}
.convert-step-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.convert-step-num {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #c0262d;
  color: #fff;
  font-size: 16px;
  font-weight: 800;
  display: grid;
  place-items: center;
  box-shadow: 0 2px 6px rgba(192, 38, 45, 0.3);
}
.convert-step-icon {
  font-size: 22px;
  color: #d97706;
}
.convert-step-card h4 {
  font-size: 16px;
  font-weight: 700;
  color: #8b1800;
  margin: 0 0 8px;
}
.convert-step-card p {
  font-size: 14px;
  line-height: 1.55;
  color: #4b5563;
  margin: 0;
}

@media (max-width: 768px) {
  .convert-fields-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .convert-result-grid {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 16px;
  }
  .convert-fact-row {
    grid-template-columns: 110px minmax(0, 1fr);
    gap: 10px;
    padding: 9px 10px;
    font-size: 13.5px;
  }
  .convert-steps-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .convert-tab {
    padding: 7px 14px !important;
    font-size: 13px !important;
  }
}
.content-wrap{
  padding:24px;
  margin:auto}
.section-heading{display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px}
.section-heading h2{margin:8px 0}
.holiday-list{display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
  margin:20px 0 35px}
.holiday-card{background:white;
  border-radius:10px;
  padding:25px}
.holiday-date{font-size:27px;
  color:var(--red)}
.holiday-card h3{font-size:19px}
.holiday-card p{color:#69768b}
.holiday-card small{display:block;
  color:#9b7a6a}
.credits a,.text-link{color:#e11825;
  text-decoration:underline}
.reading-list{max-width:900px;
  margin:25px auto;
  padding:0 20px}
.reading-article{margin-bottom:20px;
  padding:22px}
.reading-article>.article-image{max-width:360px;
  margin-bottom:20px;
  border-radius:8px}
.reading-article p{font-size:16px;
  line-height:1.7;
  color:#59657b}
.reading-article h2{line-height:1.4}
.reading-article .text-link{display:inline-block;
  margin-top:10px}
dialog{border:1px solid #f0e3da;
  border-radius:16px;
  padding:30px;
  max-width:440px;
  width:calc(100% - 36px);
  box-shadow:0 15px 80px #0003}
dialog::backdrop{background:#2229}
.close-dialog{position:absolute;
  right:12px;
  top:7px;
  border:0;
  background:none;
  font-size:26px}
[hidden]{display:none!important}

@media(min-width:1200px){.calendar-hero{height:420px;
  padding-top:24px}
.hero-panels{margin-top:52px;
  gap:45px}
.hero-heading h1{font-size:30px}
.hero-panels .panel{padding:16px}
.hero-panels .info-row{min-height:37px}
.calendar-bloc{width:280px}
.bloc-number{font-size:133px}
.bloc-paper{min-height:260px}
.feature{min-height:142px}
.dashboard-grid>.panel{min-height:422px}
.date-cell{min-height:54px}
.day-details .info-row{min-height:52px}
.article-content p{min-height:60px}
.article-content h3{font-size:17px}
.site-header nav{gap:25px}
}

@media(max-width:1100px){.site-header .header-inner{gap:18px;
  padding-right:0}
.site-header nav{gap:24px}
.header-actions{gap:12px}
.login-button{padding:10px 18px}
.brand strong{font-size:20px}
.hero-panels{gap:19px;
  grid-template-columns:1fr 1.13fr .96fr}
.row-label{gap:7px}
.row-value{padding:5px 8px}
.hero-panels .panel{padding:12px}
.day-details h2{font-size:18px}
.month-panel .panel-heading h2{font-size:18px}
.feature h3{font-size:15px}
}

@media(max-width:1000px){.site-header .header-inner{padding:0 20px;
  gap:15px}
.site-header nav{gap:15px}
.site-header nav a{font-size:14px}
.brand strong{font-size:18px}
.brand>.yin{font-size:43px}
.login-button{font-size:14px;
  padding:10px 12px}
.header-actions{gap:8px}
.calendar-hero{padding-left:18px;
  padding-right:18px}
.hero-panels{gap:13px}
.calendar-bloc{width:228px}
.day-arrow{width:29px;
  height:29px}
.bloc-area{gap:5px}
.row-label b,.row-value{font-size:14px}
.row-label{gap:5px}
.panel h2{font-size:18px}
.feature-grid{gap:8px}
.main-container{padding-left:15px;
  padding-right:15px}
.panel-heading h2,.day-details h2,.month-panel .panel-heading h2{font-size:16px}
.panel-heading h2>.icon{width:20px}
.month-controls{gap:4px}
.month-controls button{width:24px}
.feature h3{font-size:14px}
.feature p{font-size:14px}
.day-details .row-label{gap:4px}
.day-details .row-value{font-size:14px}
.upcoming{padding:10px}
.upcoming-item{gap:7px}
.upcoming-date{min-width:43px}
.upcoming-text b{font-size:14px}
.upcoming-text small{font-size:14px}
.footer-grid{gap:30px}
}

@media(max-width:800px){.site-header{height:65px}
.site-header .header-inner{padding:0 18px}
.site-header nav{display:none;
  position:absolute;
  top:65px;
  left:0;
  right:0;
  background:white;
  height:auto;
  flex-direction:column;
  align-items:stretch;
  gap:0;
  padding:10px 20px;
  box-shadow:0 6px 15px #0001}
.site-header nav.open{display:flex}
.site-header nav a{padding:12px;
  font-size:14px}
.site-header nav a.active:after{display:none}
.menu-button{display:block}
.brand strong{font-size:20px}
.calendar-hero{height:auto;
  min-height:380px;
  padding:22px 20px}
.hero-heading h1{font-size:24px;
  line-height:1.25}
.hero-heading p{font-size:14px;
  line-height:1.6}
.hero-panels{grid-template-columns:1fr 1fr;
  margin-top:32px;
  gap:20px}
.bloc-area{grid-column:1;
  grid-row:1;
  margin-top:0}
.today-info{display:none}
.quick-info{grid-column:2;
  align-self:center}
.calendar-bloc{width:230px}
.bloc-number{font-size:110px}
.bloc-paper{min-height:238px}
.hero-panels .info-row{min-height:34px}
.feature-grid{grid-template-columns:repeat(4,1fr);
  gap:8px;
  margin-top:8px}
.feature{min-height:130px}
.feature h3{font-size:15px}
.feature p{font-size:14px}
.feature-icon{width:55px;
  height:55px}
.dashboard-grid{grid-template-columns:1fr 1fr;
  gap:10px}
.dashboard-grid>.panel{min-height:375px}
.right-column{grid-column:1/-1;
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:start;
  gap:10px}
.promo-banner{height:100%;
  aspect-ratio:1.88}
.article-grid{grid-template-columns:repeat(2,1fr);
  gap:12px}
.article-content h3{font-size:17px}
.article-content p{font-size:14px}
.footer-grid{grid-template-columns:1.3fr 1fr;
  gap:25px}
.footer-about{max-width:300px}
.panel-heading h2,.day-details h2,.month-panel .panel-heading h2{font-size:18px}
.row-label b,.row-value,.day-details .row-value{font-size:14px}
.day-details .info-row{min-height:46px}
}

@media(max-width:560px){.site-header .header-inner{padding:0 12px;
  gap:8px}
.brand strong{font-size:18px}
.brand small{font-size:14px}
.brand>.yin{font-size:42px}
.header-actions{gap:7px}
.login-button{font-size:14px;
  padding:9px 10px}
.search-button{padding:5px}
.search-button .icon{width:20px}
.menu-button{font-size:22px}
.hero-heading h1{font-size:22px;
  letter-spacing:-.4px}
.hero-heading p{font-size:14px}
.hero-heading i{margin:0 4px}
.calendar-hero{padding:19px 12px 16px;
  background-position:center}
.hero-panels{display:flex;
  flex-direction:column;
  align-items:center;
  margin-top:28px;
  gap:17px}
.bloc-area{width:100%;
  gap:16px}
.calendar-bloc{width:245px}
.bloc-number{font-size:115px}
.bloc-paper{min-height:246px}
.quick-info{width:100%}
.hero-panels .info-row{min-height:34px}
.quick-info .info-row{grid-template-columns:43% 57%}
.main-container{padding:0 9px 8px}
.feature-grid{grid-template-columns:repeat(2,1fr);
  padding:9px;
  gap:8px}
.feature{min-height:130px}
.feature:last-child{grid-column:1/-1;
  display:grid;
  grid-template-columns:56px 1fr;
  grid-template-rows:auto auto;
  text-align:left;
  padding:12px 18px;
  min-height:78px;
  column-gap:18px}
.feature:last-child .feature-icon{grid-row:1/3;
  margin:0}
.feature:last-child h3{margin:5px 0}
.feature:last-child p br{display:none}
.dashboard-grid{grid-template-columns:1fr}
.dashboard-grid>.panel{min-height:0}
.right-column{display:flex;
  grid-column:auto}
.promo-banner{height:auto;
  aspect-ratio:1.88}
.date-cell{min-height:52px}
.day-details .info-row{min-height:47px}
.article-grid{gap:8px}
.article-content{padding:8px}
.article-content h3{font-size:14px}
.article-content h3 br{display:none}
.article-content p{font-size:14px}
.article-meta{font-size:14px;
  flex-wrap:wrap;
  gap:5px}
.articles-section{padding:10px}
.articles-section .panel-heading h2{font-size:17px}
.panel-heading>a{font-size:14px}
.footer-grid{padding:20px 20px;
  gap:25px 18px}
.footer-about{grid-column:1/-1;
  max-width:none}
.footer-grid>div:last-child{grid-column:1/-1}
.footer-about p{font-size:14px;
  max-width:330px}
.footer-grid>div>a:not(.brand){font-size:14px}
.copyright{padding:11px 20px;
  font-size:14px}
.tool-panel{margin:22px 12px 35px;
  padding:22px 18px}
.fields{gap:10px}
.holiday-list{grid-template-columns:1fr}
.content-wrap{padding:20px 14px}
.inner-hero h1{font-size:27px}
.reading-list{padding:0 12px}
.reading-article{padding:17px}
.reading-article h2{font-size:21px}
.reading-article p{font-size:15px}
.tabs button{font-size:14px}
.conversion-result{font-size:15px}
}

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}
*{transition:none!important}
}

/* Match the supplied 1055 px reference proportions. */
@media(min-width:801px) and (max-width:1199px){
 .feature-grid{height:156px}
.feature{min-height:0;
  padding-top:4px;
  padding-bottom:8px}
.feature-icon{height:62px;
  width:62px;
  margin-bottom:5px}
.feature h3{font-size:15px;
  letter-spacing:-.25px}
.feature:nth-child(4) h3{font-size:14px;
  white-space:nowrap}
.feature p{font-size:14px}

 .bloc-paper{height:243px;
  min-height:243px;
  padding-bottom:10px}
.bloc-number{font-family:Roboto,Arial,sans-serif;
  font-size:120px;
  line-height:.92;
  font-weight:800;
  font-style:italic;
  letter-spacing:-7px;
  padding-top:3px}
.bloc-weekday{font-family:'Roboto Condensed',Arial,sans-serif;
  font-size:25px;
  margin-top:0;
  margin-bottom:10px}
.bloc-canchi{margin:7px 0 10px}

 .hero-panels .info-row{grid-template-columns:46% 54%;
  min-height:32px}
.hero-panels .row-label{gap:6px;
  padding:3px}
.hero-panels .row-label b{font-size:14px;
  white-space:nowrap;
  letter-spacing:-.3px}
.hero-panels .mini-icon{width:23px;
  height:23px}
.hero-panels .row-value{padding:5px 7px;
  font-size:14px}
.hero-panels .panel h2{margin-bottom:8px}

 .footer-grid{padding-top:17px;
  padding-bottom:11px;
  padding-left:45px;
  grid-template-columns:1.7fr .8fr .8fr 1.65fr;
  gap:40px}
.footer-about p{margin:7px 0}
.footer-grid>div>a:not(.brand){line-height:1.5}
.copyright{padding-top:8px;
  padding-bottom:8px}

}

.site-footer:before{background:linear-gradient(#ffffffc9,#ffffff9c),url('assets/hero-landscape.png') center 62%/cover}

@media(min-width:801px){.hero-panels .row-value{padding:2px 6px;
  line-height:1.15}
.hero-panels .info-row{min-height:31px}
.hero-panels .row-label{padding-top:2px;
  padding-bottom:2px}
.hero-panels .panel h2{margin-bottom:6px}
}

.brand>.yin{transform:rotate(-35deg)}


.promo-title{font:italic 700 25px/1.1 Georgia,serif;
  color:#29251c}
.promo-description{font-size:14px;
  line-height:1.4;
  color:#655d52}
.promo-cta{display:inline-flex;
  align-items:center;
  gap:12px;
  background:linear-gradient(#ff3029,#df0000);
  color:white;
  border:1px solid #ffa39a;
  border-radius:24px;
  padding:6px 19px;
  font-size:14px;
  font-weight:600;
  box-shadow:0 2px 5px #a72e2526}
.promo-banner:hover .promo-cta{background:#c90000}

/* Readable 14px minimum text throughout desktop and mobile. */
body { font-size: 14px; }
.row-label b, .row-value, .feature p, .article-meta, .tool-note,
.article-tag, .page-kicker, .calendar-hint, .brand small,
.footer-grid > div > a:not(.brand), .footer-grid > div > p,
.footer-about p, .copyright { font-size: 14px; }
.row-value { line-height: 1.45; }
.hero-panels .row-label b { white-space: nowrap; letter-spacing: -0.2px; }
.hero-panels .row-value { font-size: 14px; line-height: 1.4; }
.hero-panels .info-row { min-height: 38px; }
.calendar-hero { height: auto; min-height: 420px; padding-bottom: 24px; }
.feature-grid { height: auto; }
.feature { min-height: 150px; }
.feature:nth-child(4) h3 { white-space: normal; }
.article-content p, .article-content h3 { min-height: 0; }
.article-meta { flex-wrap: wrap; }
.calendar-legend { flex-wrap: wrap; }
.day-details h2, .panel-heading h2 { white-space: normal; }
.hero-heading p { line-height: 1.5; }
.brand small { line-height: 1.3; }
.site-header { min-height: 68px; height: auto; }
.site-header .header-inner { min-height: 68px; padding-left: 24px; padding-right: 24px; gap: 16px; }
.site-header nav { min-height: 68px; gap: 18px; }
.site-header nav a { font-size: 14px; min-height: 68px; }
@media (max-width: 1199px) {
 .site-header nav { display:none; position:absolute; top:68px; left:0; right:0; background:white; height:auto; min-height:0; flex-direction:column; align-items:stretch; gap:0; padding:10px 20px; box-shadow:0 6px 15px #0001; }
 .site-header nav.open { display:flex; }
 .site-header nav a { min-height:44px; padding:12px; height:auto; }
 .site-header nav a.active:after { display:none; }
 .menu-button { display:block; }
 .feature p, .feature h3, .upcoming-text small, .upcoming-text b { font-size:14px; }
}
@media (max-width: 800px) {
 .hero-panels { align-items:start; }
 .quick-info { align-self:start; }
 .date-cell { min-height:64px; }
 .site-header .header-inner { padding-left:12px; padding-right:12px; }
 .feature:last-child { min-height:90px; }
 .article-meta { gap:8px; }
}
@media (max-width: 560px) {
 .header-actions { gap:5px; }
 .site-header .header-inner { gap:6px; }
 .brand { gap:5px; }
 .brand > .yin { font-size:34px; }
 .brand strong { font-size:17px; }
 .brand small { max-width:140px; white-space:normal; }
 .login-button { padding:9px 8px; }
 .hero-heading p { font-size:14px; }
 .weekdays { font-size:14px; }
 .article-content p { font-size:14px; }
 .day-details .row-value, .row-label b { font-size:14px; }
}

.page-hero{background:linear-gradient(90deg,#fff8eece,#fff9ee90,#fff8eece),url('assets/hero-landscape.png') center 40%/cover;
  text-align:center;
  padding:22px 24px 36px;
  border-bottom:1px solid #eddfcf}
.crumb{font-size:14px;
  color:#8c6f5b;
  display:flex;
  justify-content:center;
  gap:12px;
  margin-bottom:22px}
.crumb a{color:var(--red)}
.page-kicker{font-size:14px;
  letter-spacing:2px;
  color:#b74b35}
.page-hero h1{font:700 35px Georgia,serif;
  margin:13px 0}
.page-hero p{color:#6e625b;
  font-size:15px;
  max-width:670px;
  margin:0 auto}
.page-wrap{
  padding:26px 24px 40px;
  margin:auto}
.page-columns{display:grid;
  grid-template-columns:minmax(0,1fr) 285px;
  gap:22px}
.page-main{min-width:0}
.page-main>.panel{margin-bottom:18px}
.page-aside{min-width:0;
  display:flex;
  flex-direction:column;
  gap:18px;
  align-self:start}
.page-aside .promo-banner{aspect-ratio:1.88}
.side-menu{padding:19px}
.side-menu h2{font-size:20px;
  margin-bottom:14px}
.side-menu>a{display:flex;
  justify-content:space-between;
  gap:12px;
  padding:12px 0;
  border-top:1px solid #f2ebe4;
  font-size:14px}
.side-menu>a:hover{color:var(--red)}
.side-menu>a>span{color:#b8977b}
.aside-note{padding:24px;
  text-align:center;
  background:linear-gradient(#fffbf5,#fff0e3)}
.aside-note>span{font:54px Arial;
  color:#ea2930}
.aside-note h3{font-size:19px}
.aside-note p{color:#8a7264;
  font-size:14px;
  line-height:1.7}
.prose{padding:25px}
.prose h2{font-size:24px;
  line-height:1.35;
  margin-bottom:18px}
.prose h3{font-size:19px;
  margin-top:25px}
.prose p,.prose li{font-size:16px;
  line-height:1.8;
  color:#657084}
.prose ol{padding-left:23px}
.prose li{padding-left:8px}
.prose .lead{font-size:18px;
  color:#775748}
.article-tag{display:inline-block;
  font-size:14px;
  letter-spacing:1.2px;
  color:#ce4434;
  margin-bottom:10px}
.date-toolbar{display:flex;
  align-items:end;
  gap:12px;
  flex-wrap:wrap}
.date-toolbar label{flex:1;
  min-width:110px;
  display:flex;
  flex-direction:column;
  gap:6px;
  font-size:14px;
  font-weight:600;
  color:#3a322c;
  margin:0}
.date-toolbar input,.date-toolbar select{height:44px;
  line-height:42px;
  margin-top:0;
  border-radius:8px;
  border:1px solid #dcd1c9;
  box-sizing:border-box}
.date-toolbar .primary-button{margin:0;
  height:44px;
  min-height:44px}
.secondary-button{border:1px solid #efd6d0;
  border-radius:7px;
  padding:10px 15px;
  background:#fff9f5;
  color:#c93025;
  min-height:40px}
.daily-page{padding:22px}
.daily-nav{display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:16px 0}
.daily-nav h2{margin:0;
  font-size:22px}
.daily-nav b{font-size:18px}
.daily-display{display:grid;
  grid-template-columns:230px 1fr;
  gap:24px;
  margin:23px 0}
.large-date{text-align:center;
  background:linear-gradient(#fffaf1,#fff0df);
  border:1px solid #f4d8c4;
  border-radius:12px;
  overflow:hidden;
  padding-bottom:20px}
.large-date>span{display:block;
  color:white;
  background:linear-gradient(#f31d24,#dc0009);
  padding:12px;
  font-weight:600}
.large-date>strong{display:block;
  font:800 118px/1.15 Roboto,Arial;
  color:#e3000d;
  font-style:italic}
.large-date>b{display:block;
  text-transform:uppercase;
  color:#e40010;
  font-size:25px}
.large-date>p{font-size:14px}
.facts-list>div{display:grid;
  grid-template-columns:40% 60%;
  border-bottom:1px solid #f1e9e2;
  min-height:43px;
  align-items:center;
  gap:8px;
  font-size:14px;
  padding:9px 0}
.facts-list b{font-weight:500;
  color:#a64233}
.facts-list span{color:#5e697c;
  padding-right:8px}
.full-calendar{padding:22px}
.full-calendar .calendar-grid .date-cell{min-height:78px}
.full-calendar .solar{font-size:23px}
.full-calendar .lunar{font-size:14px}
.full-calendar .date-cell[aria-current=date]:not(.selected){box-shadow:inset 0 0 0 2px #f17369}
.calendar-hint{color:#8f7a6a;
  font-size:14px}
.inline-button{display:inline-block}
.filter-panel{display:flex;
  justify-content:space-between;
  align-items:center;
  gap:24px;
  padding:22px}
.filter-panel h2{font-size:22px;
  margin:0 0 6px 0}
.filter-panel p{color:#7e8290;
  margin:0;
  font-size:14px}
.filter-panel>label{display:flex;
  flex-direction:column;
  gap:6px;
  font-size:14px;
  font-weight:600;
  color:#3a322c;
  min-width:160px;
  margin:0}
.filter-panel>label select,
#event-year{width:100%;
  height:44px;
  line-height:42px;
  padding:0 34px 0 14px;
  margin-top:0;
  font-size:15px;
  font-weight:600;
  color:#222;
  border:1px solid #dcd1c9;
  border-radius:8px;
  background-color:#fff;
  box-sizing:border-box}
.filter-chips{display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin:20px 0}
.filter-chips button{background:#fff;
  border:1px solid #edddd4;
  border-radius:30px;
  padding:9px 17px;
  font-size:14px}
.filter-chips button.active{background:var(--red);
  border-color:var(--red);
  color:white}
.event-card{display:flex;
  align-items:center;
  gap:20px;
  padding:20px 22px;
  margin-bottom:14px;
  border:1px solid #f0e9e3;
  border-radius:12px;
  background:#fff;
  transition:box-shadow .2s, border-color .2s}
.event-card:hover{border-color:#f4c2b7;box-shadow:0 4px 14px rgba(220,72,55,0.06)}
.event-stamp{align-self:stretch;
  min-width:85px;
  padding:10px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  background:#fff1e9;
  border-radius:9px;
  color:var(--red);
  text-align:center}
.event-stamp strong{font-size:32px;
  font-weight:700;
  line-height:1.1}
.event-stamp span{font-size:12px;
  font-weight:600;
  letter-spacing:0.5px;
  margin-top:2px}
.event-body{flex:1;
  min-width:0}
.event-card h3{font-size:18px;
  font-weight:700;
  color:#1a202c;
  margin:4px 0 6px}
.event-card p{font-size:14px;
  color:#64748b;
  line-height:1.55;
  margin:0 0 8px}
.event-card small{display:inline-block;
  color:#b45309;
  background:#fef3c7;
  padding:3px 8px;
  border-radius:6px;
  font-size:13px;
  font-weight:500}
.event-arrow{display:none}
.event-card .article-tag{margin:0 0 4px;
  display:inline-block;
  font-size:12px}
.festival-art{height:210px;
  background:linear-gradient(#fff2,#fff2),url('assets/hero-landscape.png') center/cover;
  border-radius:9px;
  margin:18px 0}
.prose label{display:flex;
  flex-direction:column;
  gap:6px;
  font-size:14px;
  font-weight:600;
  color:#3a322c;
  margin:16px 0}
.prose label select{max-width:220px;
  height:44px;
  line-height:42px;
  margin-top:0}
.term-intro{padding:25px;
  display:flex;
  gap:20px;
  background:linear-gradient(100deg,#fff,#fff1dc)}
.term-intro h2{font-size:28px}
.term-intro p{color:#81725d;
  line-height:1.7;
  font-size:15px}
.term-symbol{font-size:100px;
  color:#ed973e;
  align-self:center}
.term-cards{display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px}
.term-card{padding:22px;
  position:relative;
  border:1px solid #ebdcd0;
  border-radius:12px;
  background:#fff;
  transition:box-shadow .2s, border-color .2s;
  display:flex;
  flex-direction:column}
.term-card:hover{border-color:#d7a188;box-shadow:0 6px 18px rgba(188,118,80,0.08)}
.term-card-header{display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:8px}
.term-card-symbol{display:inline-flex;
  align-items:center;
  justify-content:center;
  color:#bc7650;
  font-size:26px;
  line-height:1;
  width:32px;
  height:32px}
.term-card h3{font-size:20px;
  font-weight:700;
  color:#1a202c;
  margin:0;
  line-height:1.2}
.term-card p.term-desc{font-size:14px;
  color:#556070;
  line-height:1.55;
  margin:0 0 14px;
  flex:1}
.term-details-box{background:#fdfcfb;
  border:1px dashed #e7d8cd;
  border-radius:9px;
  padding:12px 14px;
  font-size:13px;
  display:flex;
  flex-direction:column;
  gap:7px}
.term-meta-row{line-height:1.55;
  color:#6b5d52;
  font-size:13.5px}
.term-meta-row b{color:#c94932;
  font-size:13.5px;
  font-weight:600;
  margin-right:5px}
.term-meta-row span{color:#374151}
.term-tip-row{line-height:1.55;
  color:#2b6b44;
  border-top:1px dashed #ecdcd1;
  padding-top:7px;
  margin-top:3px;
  font-size:13.5px}
.term-tip-row b{color:#1e7e48;
  font-size:13.5px;
  font-weight:600;
  margin-right:5px}
.term-tip-row span{color:#1f2937}
.term-card .text-link{display:none}
.term-detail-art{background:linear-gradient(120deg,#fff4de,#fdd6a8);
  color:#ea942e;
  text-align:center;
  font-size:100px;
  border-radius:10px;
  margin:15px 0}
.articles-index{display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px}
.articles-index .article-content{padding:17px}
.articles-index .article-content h3{font-size:20px;
  line-height:1.35;
  min-height:0}
.articles-index .article-content p{font-size:14px;
  min-height:0}
.articles-index .text-link{font-size:14px}
.article-detail .article-cover{max-width:none;
  width:100%;
  margin:18px 0 22px;
  border-radius:8px}
.reading-note{padding:15px 18px;
  border-left:3px solid #eb8063;
  background:#fff6ed;
  font-size:14px;
  color:#8a7362;
  line-height:1.7;
  margin:20px 0}
.article-bottom{display:flex;
  justify-content:space-between;
  align-items:center;
  border-top:1px solid #eee3da;
  padding-top:20px;
  margin-top:25px;
  color:#c3352d}
.faq-list details{border-bottom:1px solid #f0e5db;
  padding:17px 0}
.faq-list summary{cursor:pointer;
  font-weight:600;
  font-size:17px;
  line-height:1.5;
  color:#59382c}
.faq-list details[open] summary{color:#d52522}
.faq-list p{margin-bottom:0}
.about-stats{display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:15px;
  margin:28px 0}
.about-stats>div{background:#fff3e8;
  border-radius:10px;
  text-align:center;
  padding:20px 8px}
.about-stats strong{display:block;
  font-size:25px;
  color:#d92723}
.about-stats span{font-size:14px;
  color:#937964}
.field-block{margin-top:20px}
textarea{width:100%;
  font:inherit;
  padding:12px;
  border:1px solid #e8ded9;
  border-radius:8px;
  resize:vertical;
  display:block;
  margin-top:8px}
.auth-panel{max-width:480px;
  margin:10px auto 20px!important;
  padding:30px}
.auth-panel>h2{text-align:center;
  justify-content:center;
  font-size:27px}
.auth-mark{font:65px Arial;
  color:#eb071a;
  display:block;
  text-align:center;
  margin-bottom:10px}
.auth-panel label{margin:15px 0}
.account-form .primary-button{width:100%;
  margin-top:5px}
.auth-links{display:flex;
  justify-content:center;
  gap:20px;
  font-size:14px;
  color:#d6332c;
  padding-top:20px;
  border-top:1px solid #eee3dc}
.account-status{font-size:14px;
  line-height:1.6;
  color:#a36737}
.empty-state{text-align:center;
  padding:35px 20px;
  border:1px dashed #e6cdbb;
  border-radius:10px;
  background:#fffbf6;
  color:#947866}
.empty-state>span{font-size:45px;
  color:#d5a077}
.empty-state h3{font-size:23px}
.section-title{font-size:24px;
  margin:27px 0 18px}
.page-main>.tool-panel{margin:0 0 18px;
  max-width:none}
.page-main .steps p{margin-top:4px}
.page-main .prose .event-card p{font-size:14px}
.login-button{display:inline-block}
.page-main:empty{display:none}

@media(max-width:1000px){.page-columns{grid-template-columns:minmax(0,1fr) 240px;
  gap:16px}
.page-wrap{padding:22px 18px 35px}
.daily-display{grid-template-columns:185px 1fr;
  gap:18px}
.facts-list>div{font-size:14px}
.term-cards{grid-template-columns:1fr 1fr}
.daily-nav b{font-size:15px}
.daily-nav .secondary-button{padding:8px 10px}
.filter-panel{align-items:start;
  flex-wrap:wrap}
}

@media(max-width:800px){.page-columns{grid-template-columns:1fr}
.page-aside{display:grid;
  grid-template-columns:1fr 1fr}
.page-aside>.aside-note{display:none}
.page-aside .promo-banner{align-self:start}
.daily-display{grid-template-columns:230px 1fr}
.term-cards{grid-template-columns:repeat(2,1fr)}
.page-hero h1{font-size:30px}
.page-hero{padding-bottom:28px}
.article-detail h2{font-size:25px}
}

@media(max-width:640px){.page-wrap{padding:16px 12px 28px}
.page-hero{padding:18px 16px 25px}
.page-hero h1{font-size:27px;
  line-height:1.3}
.page-hero p{font-size:14px;
  line-height:1.6}
.crumb{font-size:14px;
  flex-wrap:wrap;
  margin-bottom:17px}
.page-kicker{font-size:14px;
  letter-spacing:1.3px}
.prose,.daily-page,.full-calendar{padding:18px}
.prose h2{font-size:22px}
.prose p,.prose li{font-size:15px}
.daily-display{grid-template-columns:1fr;
  gap:20px}
.large-date{max-width:100%;
  width:100%;
  margin:0 auto}
.daily-nav{gap:6px}
.daily-nav b{font-size:14px}
.daily-nav .secondary-button{font-size:14px;
  padding:7px 8px}
.facts-list>div{font-size:14px}
.page-aside{display:flex}
.page-aside .promo-banner{max-width:380px;
  width:100%;
  margin:auto}
.date-toolbar{gap:9px}
.date-toolbar .primary-button,.date-toolbar .secondary-button{font-size:14px;
  padding:11px 13px}
.full-calendar .calendar-grid .date-cell{min-height:62px}
.full-calendar .solar{font-size:19px}
.full-calendar .lunar{font-size:14px}
.full-calendar .weekdays{font-size:14px}
.calendar-hint{font-size:14px;
  line-height:1.7}
.filter-chips{gap:7px}
.filter-chips button{font-size:14px;
  padding:8px 13px}
.event-card{padding:16px;
  gap:13px}
.event-stamp{min-width:60px}
.event-stamp strong{font-size:29px}
.event-card h3{font-size:18px}
.event-card p{font-size:14px}
.event-arrow{display:none}
.event-card small{font-size:14px}
.term-cards{grid-template-columns:1fr;
  gap:14px}
.term-card{padding:18px 16px;
  box-shadow:0 2px 8px rgba(188,118,80,0.05)}
.term-card h3{font-size:20px}
.term-intro{padding:20px}
.term-symbol{display:none}
.term-intro h2{font-size:25px}
.articles-index{grid-template-columns:1fr}
.articles-index .article-content h3{font-size:21px}
.article-bottom{gap:15px;
  font-size:14px}
.about-stats{gap:7px}
.about-stats>div{padding:17px 6px}
.about-stats strong{font-size:21px}
.about-stats span{font-size:14px}
.auth-panel{padding:22px}
.auth-links{gap:14px;
  font-size:14px}
.festival-art{height:150px}
.filter-panel{padding:18px}
.filter-panel label{width:100%}
.prose .fields{grid-template-columns:1fr}
}

@media print{.site-header,.site-footer,.page-aside,.article-bottom,.page-hero,.auth-panel,dialog{display:none!important}
.page-columns{display:block}
.page-wrap{padding:0;
  max-width:none}
.panel{border:0;
  box-shadow:none}
.article-detail p{color:black}
}

/* Keep supporting text readable at narrow widths. */
.page-main, .page-aside, .prose label { font-size:14px; }
.full-calendar .weekdays { font-size:14px; }
.date-toolbar, .auth-links { flex-wrap:wrap; }
.term-card p { min-height:0; }
@media(max-width:560px) {
 .full-calendar .weekdays span { overflow-wrap:anywhere; }
 .facts-list > div { grid-template-columns:minmax(0,40%) minmax(0,1fr); }
 .event-card small, .article-tag, .term-card small, .calendar-hint { font-size:14px; }
}
/* Annual calendar: real links and twelve responsive month grids. */
.annual-wrap { max-width:1400px; }
.year-toolbar { padding:22px; }
.year-toolbar .date-toolbar { max-width:540px; }
.annual-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.annual-month { padding:16px; }
.annual-month h2 { justify-content:center; margin:3px 0 16px; color:#d51a20; font-size:22px; }
.annual-month h2 a:hover { text-decoration:underline; }
.annual-days { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); border-top:1px solid #eee5df; border-left:1px solid #eee5df; }
.annual-date,.annual-empty { min-height:57px; border-right:1px solid #eee5df; border-bottom:1px solid #eee5df; }
.annual-date { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; }
.annual-date strong { font-size:16px; font-weight:600; }
.annual-date span { font-size:14px; color:#737d8e; }
.annual-date.sunday strong { color:#ec1025; }
.annual-date.today { box-shadow:inset 0 0 0 2px #ed1025; border-radius:5px; background:#fff0ea; }
.annual-date:hover { background:#fff0ea; }
.annual-empty { background:#fcfaf7; }
@media(min-width:1200px) and (max-width:1399px){.site-header .header-inner{padding-left:16px;padding-right:16px;gap:12px}.site-header nav{gap:12px}.site-header .brand strong{font-size:18px}}
@media(max-width:1050px){.annual-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:650px){.annual-grid{grid-template-columns:1fr;gap:16px}.annual-month{padding:14px}.year-toolbar{padding:18px}.year-toolbar .daily-nav{flex-wrap:wrap}.year-toolbar .daily-nav h2{font-size:21px}.year-toolbar .secondary-button{padding:9px 11px;font-size:14px}}
#lunar-details > .panel { margin-bottom:18px; }
.lunar-summary { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin:20px 0; }
.lunar-summary > div { padding:20px 8px; border:1px solid #f3dfce; border-radius:10px; background:linear-gradient(#fffaf3,#fff0e3); text-align:center; }
.lunar-summary strong { display:block; font-size:34px; color:#e21624; }
.lunar-summary span { font-size:14px; color:#8a7261; }
.lunar-facts > div { grid-template-columns:42% minmax(0,1fr); }
.lunar-milestones { display:grid; gap:10px; }
.lunar-milestones > a,.lunar-milestones > div { display:flex; align-items:center; justify-content:space-between; gap:15px; background:#fff8f1; padding:14px 16px; border:1px solid #f0e4d9; border-radius:9px; font-size:15px; }
.lunar-milestones > a:hover { border-color:#e6977c; }
.lunar-milestones small { display:block; font-size:14px; color:#8c796c; margin-top:5px; }
.lunar-milestones > a > span { color:#e1262b; }
.branch-hours { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.branch-hour { border:1px solid #f1e3d6; padding:13px; border-radius:8px; background:#fffbf6; }
.branch-hour b { display:block; color:#b84230; font-size:16px; }
.branch-hour span { display:block; margin-top:5px; color:#677387; font-size:14px; }
@media(max-width:560px){.branch-hours{grid-template-columns:repeat(2,minmax(0,1fr))}.lunar-summary{gap:7px}.lunar-summary strong{font-size:29px}.lunar-summary>div{padding:15px 6px}.lunar-facts>div{grid-template-columns:43% minmax(0,1fr)}}
.traditional-date { padding-bottom:14px; border-bottom:1px solid #eee5dc; }
.traditional-groups { display:grid; gap:16px; }
.hour-group { padding:20px; border-radius:12px; border:1px solid #d7e6d6; background:#f3f9ef; }
.hour-group h3 { margin:0 0 8px; color:#276c38; font-size:21px; }
.hour-group>p { margin:0 0 15px; font-size:14px; }
.traditional-hours { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.traditional-hour { padding:12px 8px; border:1px solid #dce8d8; background:#fffefa; border-radius:8px; text-align:center; }
.traditional-hour b { display:block; font-size:18px; color:#286037; margin-bottom:4px; }
.traditional-hour span { font-size:14px; color:#63716b; white-space:nowrap; }
.inauspicious { background:#fbf1ee; border-color:#edd5ce; }
.inauspicious h3,.inauspicious .traditional-hour b { color:#9b4238; }
.inauspicious .traditional-hour { border-color:#eddcd5; }
.traditional-source { margin:16px 0; border-top:1px solid #eee4d9; padding-top:14px; }
.traditional-source summary { color:#a4523c; font-size:14px; cursor:pointer; }
.traditional-source a { color:#c32f27; text-decoration:underline; }
.traditional-source p { font-size:14px; }
.luc-dieu-result { display:flex; gap:18px; align-items:center; background:#fff4e5; border:1px solid #f1dbc1; border-radius:10px; padding:20px; }
.luc-dieu-result>span { font-size:36px; color:#ba7332; }
.luc-dieu-result strong { font-size:25px; color:#a4552d; }
.luc-dieu-result p { margin:7px 0 0; font-size:15px; }
@media(max-width:560px){.hour-group{padding:15px}.traditional-hours{grid-template-columns:repeat(2,minmax(0,1fr))}.traditional-hour{padding:12px 6px}.luc-dieu-result{padding:16px;gap:12px}}

.traditional-verse { display:block; color:var(--ink); font-weight:600; line-height:1.7; }
.traditional-meaning { display:block; margin-top:6px; line-height:1.7; }

/* Shared outer layout for every page. Width governed dynamically by Flatsome. */
:root {
  --site-gutter: 24px;
}
html { scrollbar-gutter: stable; }
.hero-panels,
.main-container,
.page-wrap,
.content-wrap,
.reading-list,
.footer-grid,
.copyright,
.lich-wrap {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}
.calendar-hero { padding-left: 0; padding-right: 0; }
.hero-heading { padding-left: var(--site-gutter); padding-right: var(--site-gutter); }
.page-hero, .inner-hero { padding-left: var(--site-gutter); padding-right: var(--site-gutter); }
.page-wrap > .credits { max-width: none; width: 100%; margin: 0; }
.auth-panel { max-width: none; width: 100%; }
.auth-panel > * { max-width: 480px; margin-left: auto; margin-right: auto; }
@media (max-width: 800px) {
  :root { --site-gutter: 10px; }
}
@media (max-width: 560px) {
  :root { --site-gutter: 6px; }
}
@media print {
  .page-wrap { width: 100%; max-width: none; }
}


/* ========================================================
   FLATSOME INTEGRATION OVERRIDES
   ======================================================== */
#main {
  background: #f6f2ed;
}

#content {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.page-wrapper {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Header Flatsome Integration */
.header-main {
  background: #ffffffed;
}

.header-nav > li > a {
  font-family: 'Roboto Condensed', Arial, sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #121622 !important;
  padding: 0 12px !important;
}

.header-nav > li.active > a,
.header-nav > li.current-menu-item > a,
.header-nav > li > a:hover {
  color: #ef0718 !important;
}

.header-search-form input.search-field {
  border-radius: 999px !important;
}

/* Background image fixes for relative path in child theme */
.calendar-hero {
  background: #f7e9d4 url('assets/hero-landscape.png') center center/cover !important;
}

.promo-banner {
  background: linear-gradient(90deg,#fff8e6d9,#fffaf1bd), url('assets/hero-landscape.png') center/cover !important;
}

/* ==========================================================================
   FOOTER - LARGER TEXT & HIGH READABILITY
   ========================================================================== */
.site-footer,
.footer-wrapper {
  position: relative !important;
  background: #fffaf3 !important;
  overflow: hidden !important;
  color: #24292f !important;
}

.site-footer:before,
.footer-wrapper:before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(rgba(255, 252, 247, 0.90), rgba(255, 250, 243, 0.92)), url('assets/hero-landscape.png') center 62%/cover !important;
  opacity: 1 !important;
  pointer-events: none !important;
}

.footer-grid {
  position: relative !important;
  padding: 36px 24px 24px !important;
  margin: auto !important;
  display: grid !important;
  grid-template-columns: 1.8fr 0.9fr 0.9fr 1.6fr !important;
  gap: 36px !important;
  z-index: 1;
}

.footer-about {
  max-width: 320px !important;
}

.footer-about .brand,
.footer-about .footer-brand {
  display: inline-block !important;
  margin-bottom: 14px !important;
  text-decoration: none !important;
}

.footer-about .brand img,
.footer-about .footer-logo-img,
.footer-logo-img {
  max-width: 210px !important;
  width: 100% !important;
  height: auto !important;
  display: block !important;
  object-fit: contain !important;
}

.footer-about .brand strong {
  font-size: 21px !important;
  color: #c0262d !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  letter-spacing: -0.2px !important;
  display: inline-block !important;
}

.footer-about .brand small {
  font-size: 13.5px !important;
  color: #4b5563 !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  display: inline-block !important;
  margin-top: 3px !important;
}

.footer-about .brand > .yin {
  font-size: 44px !important;
  color: #c0262d !important;
  line-height: 1 !important;
  flex-shrink: 0 !important;
}

.footer-about p {
  font-size: 15px !important;
  line-height: 1.65 !important;
  color: #374151 !important;
  margin: 12px 0 16px !important;
  font-weight: 400 !important;
}

.footer-grid h4 {
  color: #b91c1c !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  margin: 0 0 14px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

.footer-grid > div > a:not(.brand) {
  display: block !important;
  font-size: 15px !important;
  line-height: 1.85 !important;
  color: #2c3345 !important;
  font-weight: 500 !important;
  margin: 2px 0 !important;
  padding: 2px 0 !important;
  text-decoration: none !important;
  transition: color 0.15s ease, transform 0.15s ease;
}

.footer-grid > div > a:not(.brand):hover {
  color: #c0262d !important;
  transform: translateX(3px);
}

.footer-grid > div > p {
  font-size: 15px !important;
  line-height: 1.7 !important;
  color: #374151 !important;
  font-weight: 500 !important;
  margin: 8px 0 !important;
}

.footer-grid > div > p > .icon,
.footer-grid > div > a > .icon {
  width: 15px !important;
  height: 15px !important;
  color: #c0262d !important;
  margin-right: 8px !important;
}

.socials {
  display: flex !important;
  gap: 10px !important;
  margin-top: 14px !important;
}

.socials span {
  display: grid !important;
  place-items: center !important;
  width: 30px !important;
  height: 30px !important;
  border-radius: 50% !important;
  background: #1680ef !important;
  color: #fff !important;
  font: bold 16px Arial, sans-serif !important;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15) !important;
  cursor: pointer;
  transition: transform 0.15s ease;
}

.socials span:hover {
  transform: translateY(-2px);
}

.socials span:nth-child(2) { background: #e02424 !important; font-size: 14px !important; }
.socials span:nth-child(3) { background: #111827 !important; }
.socials span:nth-child(4) { background: #0068ff !important; font-size: 11px !important; font-weight: bold !important; }
.socials span:nth-child(5) { background: #e1306c !important; }

.copyright {
  position: relative !important;
  border-top: 1px solid #dfd7cc !important;
  padding: 16px 24px !important;
  color: #374151 !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  text-align: center !important;
  z-index: 1;
}

@media (max-width: 800px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 24px 20px !important;
    padding: 24px 16px !important;
  }
  .footer-about {
    grid-column: 1 / -1 !important;
    max-width: none !important;
  }
  .footer-grid > div:last-child {
    grid-column: 1 / -1 !important;
  }
}

@media (max-width: 480px) {
  .footer-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
    padding: 20px 14px !important;
  }
}

.page-hero {
  background: linear-gradient(90deg,#fff8eece,#fff9ee90,#fff8eece), url('assets/hero-landscape.png') center 40%/cover !important;
}

.inner-hero {
  background: linear-gradient(#fff9,#fff9), url('assets/hero-landscape.png') center/cover !important;
}

/* Ensure container margin and padding */
.main-container {
  margin: 0 auto 36px !important;
  padding: 0 16px !important;
}

/* Feature Grid 6 items balanced layout */
.feature-grid {
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: 14px !important;
  padding: 14px !important;
  margin: 0 0 16px !important;
  background: #ffffff !important;
  border-radius: 11px !important;
  box-shadow: 0 4px 16px rgba(18,22,34,0.04) !important;
}

.feature-grid a.feature {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  text-align: center !important;
  border-radius: 8px !important;
  padding: 12px 6px 14px !important;
  min-height: 135px !important;
  text-decoration: none !important;
  box-shadow: none !important;
  border: none !important;
  transition: transform .15s ease, box-shadow .15s ease !important;
}

.feature-grid a.feature:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.06) !important;
}

.feature-grid .feature-icon {
  height: 62px !important;
  width: 62px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 auto 8px !important;
  flex-shrink: 0 !important;
}

.feature-grid .feature-icon .icon {
  width: 32px !important;
  height: 32px !important;
  display: block !important;
}

.feature-grid a.feature.red { background: #fff4f4 !important; }
.feature-grid a.feature.red .feature-icon { background: rgba(239, 0, 17, 0.1) !important; color: #ef0011 !important; }
.feature-grid a.feature.red h3 { color: #ef0011 !important; }

.feature-grid a.feature.orange { background: #fff9f1 !important; }
.feature-grid a.feature.orange .feature-icon { background: rgba(255, 118, 0, 0.1) !important; color: #ff7600 !important; }
.feature-grid a.feature.orange h3 { color: #ef0011 !important; }

.feature-grid a.feature.purple { background: #f6f4ff !important; }
.feature-grid a.feature.purple .feature-icon { background: rgba(106, 46, 251, 0.1) !important; color: #6a2efb !important; }
.feature-grid a.feature.purple h3 { color: #101333 !important; }

.feature-grid a.feature.green { background: #f2fbf3 !important; }
.feature-grid a.feature.green .feature-icon { background: rgba(0, 96, 49, 0.1) !important; color: #006031 !important; }
.feature-grid a.feature.green h3 { color: #006031 !important; }

.feature-grid a.feature.blue { background: #f0f7ff !important; }
.feature-grid a.feature.blue .feature-icon { background: rgba(22, 135, 255, 0.1) !important; color: #1687ff !important; }
.feature-grid a.feature.blue h3 { color: #101333 !important; }

.feature-grid a.feature h3 {
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  margin: 2px 0 6px !important;
}

.feature-grid a.feature p {
  font-size: 13px !important;
  color: #56617a !important;
  line-height: 1.3 !important;
  margin: 0 !important;
}

@media (max-width: 980px) {
  .feature-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 12px !important;
    padding: 12px !important;
  }
}

@media (max-width: 600px) {
  .feature-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    padding: 10px !important;
  }
  .feature-grid a.feature,
  .feature-grid a.feature:last-child {
    grid-column: auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    min-height: 124px !important;
    padding: 10px 4px 12px !important;
  }
  .feature-grid a.feature:last-child .feature-icon {
    grid-row: auto !important;
    margin: 0 auto 8px !important;
  }
  .feature-grid a.feature:last-child h3 {
    margin: 2px 0 6px !important;
  }
  .feature-grid a.feature:last-child p br {
    display: inline !important;
  }
}

/* ========================================================
   REFINED BUTTON STYLES (DAY-ARROW & MONTH-CONTROLS)
   ======================================================== */
.bloc-area {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
}

@media (min-width: 801px) {
  .bloc-area {
    margin-top: -34px !important;
  }
}

@media (max-width: 800px) {
  .calendar-hero {
    height: auto !important;
    min-height: auto !important;
    padding-top: 20px !important;
    padding-bottom: 24px !important;
  }
  .hero-heading {
    margin-bottom: 22px !important;
  }
  .hero-panels {
    margin-top: 12px !important;
  }
  .bloc-area {
    margin-top: 10px !important;
  }
}

@media (max-width: 560px) {
  .hero-heading h1 {
    font-size: 20px !important;
    line-height: 1.3 !important;
  }
  .hero-heading p {
    font-size: 13px !important;
    line-height: 1.5 !important;
  }
  .hero-heading {
    margin-bottom: 18px !important;
  }
  .hero-panels {
    margin-top: 12px !important;
    gap: 16px !important;
  }
  .bloc-area {
    margin-top: 10px !important;
  }
}


button.day-arrow {
  background: #fffef9 !important;
  border: 1px solid #e0dace !important;
  border-radius: 50% !important;
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  padding: 0 !important;
  margin: 0 !important;
  display: grid !important;
  place-items: center !important;
  flex-shrink: 0 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12) !important;
  cursor: pointer !important;
  color: #333333 !important;
  transition: all 0.15s ease !important;
}

button.day-arrow:hover {
  background: #ffffff !important;
  border-color: #ef0718 !important;
  color: #ef0718 !important;
  box-shadow: 0 3px 10px rgba(239, 7, 24, 0.2) !important;
}

button.day-arrow .icon {
  width: 18px !important;
  height: 18px !important;
  stroke: currentColor !important;
  display: block !important;
}

button.day-arrow.previous-day .icon {
  transform: rotate(180deg) !important;
}

/* Month controls (< >) in Month Panel */
.month-controls {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.month-controls button {
  height: 27px !important;
  width: 28px !important;
  min-width: 28px !important;
  min-height: 27px !important;
  line-height: 18px !important;
  font-size: 26px !important;
  font-family: inherit !important;
  font-weight: 400 !important;
  background: #ffffff !important;
  border: 1px solid #ffdddd !important;
  color: #ef0718 !important;
  border-radius: 9px !important;
  padding: 0 !important;
  margin: 0 !important;
  display: grid !important;
  place-items: center !important;
  cursor: pointer !important;
  box-shadow: none !important;
  transition: all 0.15s ease !important;
}

.month-controls button:hover {
  background: #ef0718 !important;
  color: #ffffff !important;
  border-color: #ef0718 !important;
}

/* Detail button inside bloc paper */
.detail-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  border: 1px solid #ffd9d7 !important;
  border-radius: 30px !important;
  background: #ffedeb !important;
  color: #ef0718 !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  padding: 6px 19px !important;
  text-decoration: none !important;
  transition: all 0.15s ease !important;
}

.detail-button:hover {
  background: #ef0718 !important;
  color: #ffffff !important;
  border-color: #ef0718 !important;
}

/* ==============================================================
   SUBPAGE & SIDEBAR PRECISION STYLING
   ============================================================== */

/* Buttons & Inputs Scope Reset against Flatsome */
.date-toolbar button,
.daily-nav button,
.calendar-grid button,
.annual-grid button,
.filter-chips button,
.secondary-button,
.primary-button {
  text-transform: none !important;
  letter-spacing: normal !important;
  margin-right: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  font-family: inherit !important;
  box-sizing: border-box !important;
}

/* Secondary Button */
.secondary-button {
  border: 1px solid #efd6d0 !important;
  border-radius: 7px !important;
  padding: 8px 15px !important;
  background: #fff9f5 !important;
  color: #c93025 !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  min-height: 38px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  line-height: 1.2 !important;
  transition: all 0.15s ease !important;
}
.secondary-button:hover {
  background: #fdeee8 !important;
  color: #b01b10 !important;
  border-color: #e5b8af !important;
}

/* Primary Button */
.primary-button {
  background: linear-gradient(#ef1717, #d90000) !important;
  border: none !important;
  border-radius: 8px !important;
  color: #fff !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  padding: 10px 20px !important;
  min-height: 40px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  transition: background 0.15s ease !important;
}
.primary-button:hover {
  background: linear-gradient(#d90000, #b50000) !important;
  color: #fff !important;
}

/* Date Toolbar */
.date-toolbar {
  display: flex !important;
  align-items: flex-end !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
  margin-bottom: 20px !important;
}
.date-toolbar label {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #61564f !important;
  margin: 0 !important;
  flex: 1 1 120px !important;
}
.date-toolbar select,
.date-toolbar input[type="date"],
.date-toolbar input[type="number"],
.date-toolbar input[type="text"] {
  height: 43px !important;
  line-height: 43px !important;
  padding: 0 12px !important;
  border: 1px solid #d4c8bd !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  font-size: 14px !important;
  color: #2b231d !important;
  margin: 0 !important;
  box-shadow: none !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
.date-toolbar .primary-button {
  height: 43px !important;
  min-height: 43px !important;
  padding: 0 20px !important;
  border-radius: 8px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  margin: 0 !important;
}
.date-toolbar .secondary-button {
  height: 43px !important;
  min-height: 43px !important;
  padding: 0 16px !important;
  border-radius: 8px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  margin: 0 !important;
}

/* Daily Navigation - Centered text in middle */
.daily-nav {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  margin: 16px 0 !important;
  position: relative !important;
}
.daily-nav h2,
.daily-nav b,
#annual-title,
#page-month-title,
#day-heading {
  margin: 0 !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  text-align: center !important;
  color: #2b231d !important;
  flex: 1 1 auto !important;
  display: block !important;
  width: auto !important;
}
.daily-nav .secondary-button,
.daily-nav button {
  height: 38px !important;
  min-height: 38px !important;
  padding: 0 14px !important;
  font-size: 14px !important;
  border-radius: 8px !important;
  flex: 0 0 auto !important;
  text-align: center !important;
}
.daily-nav #annual-prev,
.daily-nav #annual-next,
.daily-nav #day-prev,
.daily-nav #day-next {
  min-width: unset !important;
}
.daily-nav #month-prev,
.daily-nav #month-next {
  min-width: 38px !important;
  width: 38px !important;
}

/* Calendar Hint - Centered */
.calendar-hint,
.year-toolbar .calendar-hint,
.full-calendar .calendar-hint {
  text-align: center !important;
  color: #8f7a6a !important;
  font-size: 14px !important;
  margin: 14px auto 0 !important;
  display: block !important;
}

/* ============================================================
 * LỊCH NGÀY - TỜ LỊCH BLOC CAO CẤP (PREMIUM CALENDAR BLOC)
 * Thiết kế mô phỏng lốc lịch truyền thống Việt Nam:
 * - Gáy nẹp đỏ hoàng gia với viền vàng kim và đinh tán 3D
 * - Hiệu ứng xấp giấy đa tầng (3D stacked paper sheets)
 * - Khung chỉ vàng chìm cổ điển, hoa văn trang nhã
 * - Số ngày đỏ son nổi bật, nét chữ uy nghi chuẩn lịch bloc
 * - Huy hiệu âm lịch dạng ấn triện sang trọng
 * ============================================================ */

.daily-page {
  background: #ffffff !important;
  border-radius: 16px !important;
  border: 1px solid #ebd9c8 !important;
  box-shadow: 0 4px 20px rgba(170, 130, 90, 0.08) !important;
  padding: 24px 28px !important;
}

.daily-nav {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding-bottom: 18px !important;
  margin-bottom: 22px !important;
  border-bottom: 1px dashed #ebd9c8 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.daily-nav .secondary-button {
  background: #fffaf4 !important;
  border: 1px solid #dfc7b0 !important;
  color: #8c3b2d !important;
  padding: 8px 14px !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  transition: all 0.2s ease !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  flex: 0 0 auto !important;
  min-width: unset !important;
}

.daily-nav .secondary-button:hover {
  background: #8c3b2d !important;
  border-color: #8c3b2d !important;
  color: #ffffff !important;
  box-shadow: 0 3px 8px rgba(140, 59, 45, 0.25) !important;
}

#day-heading {
  font-size: 22px !important;
  font-weight: 800 !important;
  color: #2b231d !important;
  letter-spacing: 0.5px !important;
  text-align: center !important;
  white-space: nowrap !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

@media (max-width: 600px) {
  .daily-nav {
    gap: 8px !important;
    padding-bottom: 14px !important;
    margin-bottom: 18px !important;
  }
  .daily-nav .secondary-button {
    padding: 7px 10px !important;
    font-size: 13px !important;
    height: 36px !important;
    min-height: 36px !important;
  }
  #day-heading {
    font-size: 18px !important;
  }
}

@media (max-width: 380px) {
  .daily-nav {
    gap: 4px !important;
  }
  .daily-nav .secondary-button {
    padding: 6px 7px !important;
    font-size: 12px !important;
    height: 34px !important;
    min-height: 34px !important;
  }
  #day-heading {
    font-size: 15px !important;
  }
}

.daily-display {
  display: grid !important;
  grid-template-columns: 260px 1fr !important;
  gap: 36px !important;
  margin: 10px 0 24px !important;
  align-items: center !important;
}

@media (max-width: 768px) {
  .daily-page {
    padding: 18px 14px !important;
  }
  .daily-display {
    grid-template-columns: 1fr !important;
    justify-items: stretch !important;
    gap: 20px !important;
  }
  .large-date {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }
}

/* KHỐI TỜ LỊCH BLOC CHÍNH (.large-date) */
.large-date {
  width: 100% !important;
  max-width: 250px !important;
  margin: 0 auto !important;
  background: #fffefb !important;
  border: 1px solid #ebd8c3 !important;
  border-radius: 14px 14px 10px 10px !important;
  position: relative !important;
  padding: 0 0 20px 0 !important;
  text-align: center !important;
  box-sizing: border-box !important;
  /* Hiệu ứng xấp giấy đa tầng (3D multi-layered stacked paper) */
  box-shadow: 
    0 1px 0 #ede0d0,
    0 2px 0 #ffffff,
    0 3px 0 #e5d4be,
    0 4px 0 #ffffff,
    0 5px 0 #dcc7ad,
    0 8px 2px rgba(0, 0, 0, 0.04),
    0 16px 28px -4px rgba(160, 110, 60, 0.22) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

.large-date:hover {
  transform: translateY(-2px) !important;
  box-shadow: 
    0 1px 0 #ede0d0,
    0 2px 0 #ffffff,
    0 3px 0 #e5d4be,
    0 4px 0 #ffffff,
    0 5px 0 #dcc7ad,
    0 10px 3px rgba(0, 0, 0, 0.05),
    0 20px 32px -4px rgba(160, 110, 60, 0.26) !important;
}

/* Khung chỉ vàng tinh xảo bao quanh thân giấy lịch */
.large-date::before {
  content: '' !important;
  position: absolute !important;
  inset: 54px 10px 10px 10px !important;
  border: 1px solid rgba(212, 175, 55, 0.28) !important;
  border-radius: 6px !important;
  pointer-events: none !important;
  z-index: 0 !important;
  background: radial-gradient(circle at 50% 50%, rgba(212, 175, 55, 0.03) 0%, transparent 75%) !important;
}

/* Xóa bỏ ký tự emoji '☁' cũ */
.large-date::after {
  display: none !important;
}

/* GÁY NẸP ĐỎ TREO LỊCH (#daily-month) */
#daily-month,
.large-date > span {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-height: 46px !important;
  padding: 10px 32px !important;
  background: linear-gradient(180deg, #c4121a 0%, #9e0810 100%) !important;
  color: #fff9e6 !important;
  font-size: 13.5px !important;
  font-weight: 800 !important;
  letter-spacing: 1.2px !important;
  text-transform: uppercase !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important;
  border-top-left-radius: 12px !important;
  border-top-right-radius: 12px !important;
  border-bottom: 2.5px solid #d4af37 !important;
  box-shadow: 
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    inset 0 -1px 0 rgba(0, 0, 0, 0.25),
    0 3px 6px rgba(0, 0, 0, 0.12) !important;
  margin: 0 0 16px 0 !important;
  position: relative !important;
  box-sizing: border-box !important;
  z-index: 1 !important;
}

/* Hai đinh tán kim loại mạ vàng sang trọng (Golden Rivets) ở 2 bên nẹp lịch */
#daily-month::before,
#daily-month::after,
.large-date > span::before,
.large-date > span::after {
  content: '' !important;
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 10px !important;
  height: 10px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle at 35% 35%, #fff5b8 0%, #d4af37 55%, #805c14 100%) !important;
  box-shadow: 
    0 1px 2px rgba(0, 0, 0, 0.35),
    inset 0 1px 1px rgba(255, 255, 255, 0.8) !important;
  border: 1px solid #6b4d0e !important;
  z-index: 2 !important;
}

#daily-month::before,
.large-date > span::before {
  left: 12px !important;
}

#daily-month::after,
.large-date > span::after {
  right: 12px !important;
}

/* SỐ NGÀY DƯƠNG LỊCH (#daily-number) */
#daily-number,
.large-date > strong {
  display: block !important;
  font-family: 'Roboto Condensed', 'Oswald', Arial, sans-serif !important;
  font-size: 112px !important;
  font-weight: 900 !important;
  line-height: 0.95 !important;
  color: #cf131c !important;
  letter-spacing: -4px !important;
  margin: 2px 0 10px 0 !important;
  text-shadow: 0 2px 5px rgba(180, 15, 25, 0.16) !important;
  position: relative !important;
  z-index: 1 !important;
  font-style: normal !important;
}

/* THỨ TRONG TUẦN (#daily-weekday) */
#daily-weekday,
.large-date > b {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  font-size: 21px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  color: #ba121a !important;
  text-transform: uppercase !important;
  letter-spacing: 1.5px !important;
  margin: 0 0 14px 0 !important;
  position: relative !important;
  z-index: 1 !important;
}

/* Dấu gạch chỉ trang trí 2 bên Thứ */
#daily-weekday::before,
#daily-weekday::after,
.large-date > b::before,
.large-date > b::after {
  content: '―' !important;
  font-size: 14px !important;
  color: #d89e5a !important;
  font-weight: 400 !important;
  opacity: 0.8 !important;
}

/* DÒNG ÂM LỊCH (#daily-lunar) - HUY HIỆU ẤN TRIỆN TRUYỀN THỐNG */
#daily-lunar,
.large-date > p {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  background: linear-gradient(135deg, #fcf8f0 0%, #f6edd9 100%) !important;
  border: 1px solid #ebd7bf !important;
  border-radius: 20px !important;
  padding: 6px 16px !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  color: #633f24 !important;
  margin: 0 auto !important;
  box-shadow: 
    inset 0 1px 1px #ffffff,
    0 2px 5px rgba(160, 110, 50, 0.08) !important;
  position: relative !important;
  z-index: 1 !important;
  letter-spacing: 0.2px !important;
}

@media (max-width: 480px) {
  .large-date {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }
  #daily-number,
  .large-date > strong {
    font-size: 106px !important;
  }
  #daily-weekday,
  .large-date > b {
    font-size: 20px !important;
  }
  #daily-lunar,
  .large-date > p {
    font-size: 13.5px !important;
    padding: 6px 16px !important;
  }
}

/* BẢNG THÔNG TIN CHI TIẾT BÊN PHẢI (.facts-list) */
.facts-list {
  background: #fdfbf7 !important;
  border: 1px solid #eee1d0 !important;
  border-radius: 12px !important;
  padding: 8px 18px !important;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.02) !important;
}

.facts-list > div {
  display: grid !important;
  grid-template-columns: 140px 1fr !important;
  align-items: center !important;
  min-height: 44px !important;
  padding: 10px 8px !important;
  border-bottom: 1px solid #f0e4d7 !important;
  font-size: 15px !important;
  transition: background 0.15s ease !important;
}

.facts-list > div:last-child {
  border-bottom: none !important;
}

.facts-list > div:hover {
  background: rgba(235, 217, 195, 0.15) !important;
  border-radius: 6px !important;
}

.facts-list b {
  color: #8c3b2d !important;
  font-weight: 700 !important;
  font-size: 14.5px !important;
}

.facts-list span {
  color: #2b231d !important;
  font-weight: 600 !important;
  font-size: 15px !important;
}

/* Nút chuyển đổi âm dương phía dưới */
.daily-page .text-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  color: #c4121a !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  margin-top: 14px !important;
  padding: 6px 14px !important;
  border-radius: 6px !important;
  background: #fff6f6 !important;
  border: 1px solid #f8d5d7 !important;
  transition: all 0.2s ease !important;
}

.daily-page .text-link:hover {
  background: #c4121a !important;
  color: #ffffff !important;
  border-color: #c4121a !important;
  text-decoration: none !important;
  transform: translateX(3px) !important;
}

/* Full Calendar Grid on lich-thang */
.full-calendar .calendar-grid {
  display: grid !important;
  grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
  border-left: 1px solid var(--line) !important;
  border-top: 1px solid var(--line) !important;
  margin: 0 0 18px 0 !important;
}
.full-calendar .calendar-grid .date-cell {
  min-height: 78px !important;
  height: 78px !important;
  border: 0 !important;
  border-right: 1px solid var(--line) !important;
  border-bottom: 1px solid var(--line) !important;
  background: #ffffff !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 4px !important;
  margin: 0 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  line-height: 1.2 !important;
  border-radius: 0 !important;
  cursor: pointer !important;
  box-shadow: none !important;
  position: relative !important;
  box-sizing: border-box !important;
  width: 100% !important;
}
.full-calendar .calendar-grid .date-cell .solar {
  font-size: 23px !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  color: #232733 !important;
}
.full-calendar .calendar-grid .date-cell .lunar {
  font-size: 13px !important;
  line-height: 1.2 !important;
  color: #7c859b !important;
  margin-top: 3px !important;
}
.full-calendar .calendar-grid .date-cell.outside {
  color: #b0b4be !important;
  background: #fafafc !important;
}
.full-calendar .calendar-grid .date-cell.outside .solar,
.full-calendar .calendar-grid .date-cell.outside .lunar {
  color: #b0b4be !important;
}
.full-calendar .calendar-grid .date-cell.sunday .solar,
.full-calendar .calendar-grid .date-cell.sunday .lunar {
  color: #e01122 !important;
}
.full-calendar .calendar-grid .date-cell.selected {
  background: #ef0718 !important;
  color: #ffffff !important;
  border-radius: 8px !important;
  border-color: #ef0718 !important;
  box-shadow: 0 3px 8px rgba(239, 7, 24, 0.3) !important;
  z-index: 2 !important;
}
.full-calendar .calendar-grid .date-cell.selected .solar,
.full-calendar .calendar-grid .date-cell.selected .lunar {
  color: #ffffff !important;
}
.full-calendar .calendar-grid .date-cell:hover:not(.selected) {
  background: #fff1ed !important;
}
.full-calendar .calendar-grid .date-cell[aria-current="date"]:not(.selected) {
  box-shadow: inset 0 0 0 2px #ef0718 !important;
}

/* Sidebar Components Precision */
.page-aside {
  display: flex !important;
  flex-direction: column !important;
  gap: 18px !important;
  align-self: start !important;
}
.page-aside p {
  margin: 0 !important;
}

.page-aside .promo-banner {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 100% !important;
  min-height: 170px !important;
  padding: 18px 10px !important;
  border: 7px solid white !important;
  border-radius: 11px !important;
  text-align: center !important;
  text-decoration: none !important;
  background: linear-gradient(90deg, rgba(255,248,230,0.85), rgba(255,250,241,0.74)), url("assets/hero-landscape.png") center/cover !important;
  box-sizing: border-box !important;
}
.page-aside .promo-title {
  font: italic 700 24px/1.15 Georgia, serif !important;
  color: #29251c !important;
  margin: 0 !important;
}
.page-aside .promo-description {
  font-size: 13px !important;
  line-height: 1.4 !important;
  color: #655d52 !important;
  margin: 0 !important;
}
.page-aside .promo-cta {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  background: linear-gradient(#ff3029, #df0000) !important;
  color: white !important;
  border: 1px solid #ffa39a !important;
  border-radius: 24px !important;
  padding: 6px 18px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  box-shadow: 0 2px 5px rgba(167, 46, 37, 0.15) !important;
  margin-top: 4px !important;
}
.page-aside .promo-banner:hover .promo-cta {
  background: #c90000 !important;
}

.side-menu {
  padding: 19px !important;
}
.side-menu h2 {
  font-size: 20px !important;
  margin: 0 0 14px 0 !important;
  color: #2b231d !important;
}
.side-menu a {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 11px 0 !important;
  border-top: 1px solid #f2ebe4 !important;
  font-size: 14px !important;
  color: #38425a !important;
  text-decoration: none !important;
  transition: color 0.15s ease !important;
}
.side-menu a:hover {
  color: var(--red) !important;
}
.side-menu a span {
  color: #b8977b !important;
  font-size: 14px !important;
}

.aside-note {
  padding: 24px 18px !important;
  text-align: center !important;
  background: linear-gradient(#fffbf5, #fff0e3) !important;
  border: 1px solid #f6dfcf !important;
  border-radius: 12px !important;
}
.aside-note > span {
  font: 54px Arial, sans-serif !important;
  color: #ea2930 !important;
  line-height: 1 !important;
  display: block !important;
  margin-bottom: 8px !important;
}
.aside-note h3 {
  font-size: 17px !important;
  font-weight: 700 !important;
  color: #2b231d !important;
  margin: 0 0 6px 0 !important;
}
.aside-note p {
  font-size: 13px !important;
  color: #6e625b !important;
  line-height: 1.45 !important;
  margin: 0 !important;
}






/* ============================================================
   BLOG / SINGLE / ARCHIVE / SEARCH STYLES (FROM THOITIETVN)
   ============================================================ */
:root {
    --tt-blue:       #c52222;
    --tt-blue-dark:  #8b0000;
    --tt-blue-light: #e53935;
    --tt-bg:         #f8f9fa;
    --tt-text:       #1a2332;
    --tt-muted:      #546e7a;
    --tt-border:     #e8ecef;
    --tt-radius:     10px;
    --tt-shadow:     0 2px 12px rgba(139,0,0,.08);
}

/* ============================================================
   SINGLE POST – READING PROGRESS BAR
   ============================================================ */
.tt-reading-progress {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: rgba(30, 133, 227, .18);
    z-index: 9999;
}
.tt-reading-progress-bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--tt-blue), var(--tt-blue-light));
    transition: width .1s linear;
    border-radius: 0 2px 2px 0;
}

/* ============================================================
   SINGLE POST – HERO HEADER
   ============================================================ */
.tt-post-hero {
    position: relative;
    background: linear-gradient(135deg, #8b0000 0%, #b71c1c 40%, #d32f2f 100%);
    padding: 56px 0 48px;
    overflow: hidden;
}
/* Featured image overlay version */
.tt-post-hero.has-thumb {
    min-height: 380px;
    display: flex;
    align-items: flex-end;
    background: #18181b;
}
.tt-post-hero-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    filter: brightness(.96);
    z-index: 0;
}
.tt-post-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.05) 0%,
        rgba(0, 0, 0, 0.18) 45%,
        rgba(10, 10, 10, 0.62) 100%
    );
    z-index: 1;
}
.tt-post-hero .container { position: relative; z-index: 2; width: 100%; }
.tt-post-hero-inner { max-width: 820px; }

/* Breadcrumb */
.tt-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    font-size: 13px;
    color: rgba(255,255,255,.72);
    margin-bottom: 18px;
}
.tt-breadcrumb a {
    color: rgba(255,255,255,.72) !important;
    display: flex;
    align-items: center;
    gap: 5px;
    text-decoration: none;
    transition: color .15s;
}
.tt-breadcrumb a:hover { color: #fff !important; }
.tt-breadcrumb-sep { opacity: .5; }
.tt-breadcrumb-current {
    color: rgba(255,255,255,.9);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 260px;
}

/* Category badge */
.tt-post-cat-badge {
    display: inline-block;
    background: rgba(255,255,255,.18);
    border: 1px solid rgba(255,255,255,.3);
    color: #fff !important;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    padding: 4px 12px;
    border-radius: 20px;
    margin-bottom: 14px;
    text-decoration: none !important;
    backdrop-filter: blur(6px);
    transition: background .15s;
}
.tt-post-cat-badge:hover {
    background: rgba(255,255,255,.3) !important;
}

/* Post title */
.tt-post-title {
    font-size: clamp(22px, 4vw, 36px) !important;
    font-weight: 800 !important;
    color: #fff !important;
    line-height: 1.25 !important;
    margin: 0 0 20px !important;
    text-shadow: 0 2px 8px rgba(0,0,0,.25);
}

/* Meta row */
.tt-post-meta-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 12px;
    color: rgba(255,255,255,.82);
    font-size: 13px;
}
.tt-meta-item {
    display: flex;
    align-items: center;
    gap: 5px;
}
.tt-meta-item svg { opacity: .8; flex-shrink: 0; }
.tt-meta-dot { opacity: .45; }
.tt-meta-author-link {
    display: flex;
    align-items: center;
    gap: 6px;
    color: inherit;
    text-decoration: none;
}
.tt-meta-author-link:hover { color: var(--tt-blue); text-decoration: none; }
.tt-meta-avatar {
    width: 28px !important;
    height: 28px !important;
    border-radius: 50% !important;
    border: 2px solid rgba(255,255,255,.4) !important;
    object-fit: cover;
}

/* ============================================================
   SINGLE POST – 2-COLUMN LAYOUT
   ============================================================ */
.tt-single-body {
    padding: 20px 0 40px;
    background: var(--tt-bg);
}

.tt-single-grid {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 28px;
    align-items: start;
}

/* Sticky sidebar trang chủ (plugin render .tt-sidebar-sticky, top mặc định 20px bị khuất sau header) */
/* Flatsome sticky header ~80px; admin bar 32px → cộng thêm gap 12px */
.tt-sidebar-sticky {
    top: 100px !important;  /* visitor thường: header ~80px + gap 20px */
}
.admin-bar .tt-sidebar-sticky {
    top: 130px !important;  /* admin: header ~80px + admin bar 32px + gap 18px */
}

/* Sticky sidebar trang đơn */
.tt-sidebar-sticky-single {
    position: sticky;
    top: 100px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.admin-bar .tt-sidebar-sticky-single {
    top: 130px;
}

/* ── Main column ── */
.tt-single-main { min-width: 0; }

/* ── Article card ── */
.tt-article {
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 2px 16px rgba(139,0,0,.06);
    padding: 0px 36px 32px;
    margin-bottom: 20px;
}

/* Article content typography */
.tt-article-content {
    font-size: 16px;
    line-height: 1.8;
    color: var(--tt-text);
}
.tt-article-content > :first-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
}
.tt-article-content h2 {
    font-size: 22px !important;
    font-weight: 800 !important;
    color: var(--tt-blue-dark) !important;
    margin: 32px 0 14px !important;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--tt-border);
}
.tt-article-content h3 {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: var(--tt-blue-dark) !important;
    margin: 24px 0 10px !important;
}
.tt-article-content h4 {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: var(--tt-text) !important;
    margin: 20px 0 8px !important;
}
.tt-article-content p { margin: 0 0 18px !important; }
.tt-article-content ul,
.tt-article-content ol { margin: 0 0 18px 20px !important; }
.tt-article-content li { margin-bottom: 6px !important; }
.tt-article-content a {
    color: var(--tt-blue) !important;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.tt-article-content a:hover { color: var(--tt-blue-dark) !important; }
.tt-article-content blockquote {
    border-left: 4px solid var(--tt-blue);
    background: #fff5f5;
    margin: 24px 0 !important;
    padding: 16px 20px !important;
    border-radius: 0 10px 10px 0;
    color: var(--tt-muted) !important;
    font-style: italic;
}
.tt-article-content img {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
    margin: 10px 0;
}
.tt-article-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
    font-size: 14px;
}
.tt-article-content th {
    background: var(--tt-blue) !important;
    color: #fff !important;
    padding: 10px 14px;
    text-align: left;
}
.tt-article-content td {
    padding: 9px 14px;
    border-bottom: 1px solid var(--tt-border);
}
.tt-article-content tr:nth-child(even) td { background: #f8fbff; }
.tt-article-content code {
    background: #f0f4f8;
    border: 1px solid var(--tt-border);
    padding: 2px 7px;
    border-radius: 5px;
    font-size: 13px;
    font-family: monospace;
}
.tt-article-content pre {
    background: #1a2332;
    color: #e8f0fe;
    padding: 18px 20px;
    border-radius: 10px;
    overflow-x: auto;
    margin: 20px 0;
}
.tt-article-content pre code {
    background: none;
    border: none;
    color: inherit;
    padding: 0;
    font-size: 14px;
}

/* Tags */
.tt-article-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 28px;
    padding-top: 20px;
    border-top: 1px solid var(--tt-border);
}
.tt-tags-label {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    font-weight: 600;
    color: var(--tt-muted);
}
.tt-tag-pill {
    display: inline-block;
    background: #fff5f5;
    border: 1px solid var(--tt-border);
    color: var(--tt-blue) !important;
    font-size: 12px;
    font-weight: 500;
    padding: 4px 12px;
    border-radius: 20px;
    text-decoration: none !important;
    transition: all .15s;
}
.tt-tag-pill:hover {
    background: var(--tt-blue) !important;
    color: #fff !important;
    border-color: var(--tt-blue);
}

/* Share section */
.tt-share-section {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--tt-border);
}
.tt-share-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--tt-muted);
}
.tt-share-buttons {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.tt-share-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 100px;
    height: 30px;
    padding: 0;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    border: 1.5px solid transparent;
    text-decoration: none !important;
    transition: all .15s;
    font-family: 'Be Vietnam Pro', sans-serif;
    line-height: 1;
    white-space: nowrap;
    box-sizing: border-box;
}
.tt-share-btn svg { width: 13px; height: 13px; flex-shrink: 0; }
.tt-share-fb {
    background: #1877f2;
    color: #fff !important;
    border-color: #1877f2;
}
.tt-share-fb:hover { background: #0d65d9 !important; border-color: #0d65d9 !important; color: #fff !important; }
.tt-share-tw {
    background: #111;
    color: #fff !important;
    border-color: #111;
}
.tt-share-tw:hover { background: #333 !important; border-color: #333 !important; color: #fff !important; }
.tt-share-copy {
    background: #fff;
    color: var(--tt-blue) !important;
    border-color: #c5d8f0 !important;
}
.tt-share-copy:hover { background: #eaf3ff !important; color: var(--tt-blue) !important; }
.tt-share-copied {
    background: #22c55e !important;
    color: #fff !important;
    border-color: #22c55e !important;
}

/* ── Author Box ── */
.tt-author-box {
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 2px 16px rgba(139,0,0,.06);
    padding: 24px 28px;
    display: flex;
    gap: 20px;
    align-items: flex-start;
    margin-bottom: 20px;
    border-left: 4px solid var(--tt-blue);
}
.tt-author-avatar {
    width: 72px !important;
    height: 72px !important;
    border-radius: 50% !important;
    border: 3px solid var(--tt-border) !important;
    object-fit: cover;
    flex-shrink: 0;
}
.tt-author-info { flex: 1; min-width: 0; }
.tt-author-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--tt-blue);
    margin-bottom: 4px;
}
.tt-author-name a {
    color: inherit;
    text-decoration: none;
}
.tt-author-name a:hover { color: var(--tt-blue); }
.tt-author-name {
    font-size: 17px !important;
    font-weight: 800 !important;
    color: var(--tt-blue-dark) !important;
    margin: 0 0 8px !important;
}
.tt-author-bio {
    font-size: 13px !important;
    color: var(--tt-muted) !important;
    line-height: 1.65 !important;
    margin: 0 !important;
}

/* ── Post Navigation ── */
.tt-post-nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 20px;
}
.tt-post-nav-item {
    background: #fff;
    border: 1px solid var(--tt-border);
    border-radius: 12px;
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    text-decoration: none !important;
    transition: all .15s;
}
.tt-post-nav-item:hover {
    border-color: var(--tt-blue);
    box-shadow: 0 4px 16px rgba(197,34,34,.12);
    transform: translateY(-1px);
}
.tt-nav-next { text-align: right; }
.tt-nav-dir {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--tt-blue);
}
.tt-nav-next .tt-nav-dir { justify-content: flex-end; }
.tt-nav-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--tt-text) !important;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.tt-post-nav-item:only-child { grid-column: 1 / -1; }
.tt-nav-prev:only-child { max-width: 50%; }

/* Comments */
.tt-comments-wrap {
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 2px 16px rgba(139,0,0,.06);
    padding: 28px 32px;
}
.tt-comments-wrap .comment-reply-title,
.tt-comments-wrap #reply-title {
    font-size: 18px !important;
    font-weight: 800 !important;
    color: var(--tt-blue-dark) !important;
    margin-bottom: 16px !important;
}
.tt-comments-wrap .comment-list { list-style: none !important; padding: 0 !important; }
.tt-comments-wrap .comment-body {
    background: var(--tt-bg);
    border-radius: 10px;
    padding: 16px 18px;
    margin-bottom: 14px;
}
.tt-comments-wrap textarea,
.tt-comments-wrap input[type="text"],
.tt-comments-wrap input[type="email"],
.tt-comments-wrap input[type="url"] {
    border: 1px solid var(--tt-border) !important;
    border-radius: 8px !important;
    padding: 10px 14px !important;
    font-family: 'Be Vietnam Pro', sans-serif !important;
    font-size: 14px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}
.tt-comments-wrap textarea:focus,
.tt-comments-wrap input:focus {
    border-color: var(--tt-blue) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(197,34,34,.12) !important;
}

/* ── Sidebar widgets ── */
.tt-single-sidebar { min-width: 0; }
.tt-sidebar-widget {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 14px rgba(139,0,0,.06);
    overflow: hidden;
}
.tt-sidebar-widget-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #1565c0;
    padding: 14px 18px 12px;
    border-bottom: 2px solid var(--tt-border);
    background: #fff8f8;
}
.tt-widget-weather-body { padding: 14px; }

/* Related list (sidebar) */
.tt-related-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
.tt-related-item {
    display: flex;
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid #f0f4f8;
    transition: background .12s;
}
.tt-related-item:last-child { border-bottom: none; }
.tt-related-item:hover { background: #f7fbff; }
.tt-related-thumb {
    flex-shrink: 0;
    width: 60px;
    height: 60px;
    border-radius: 8px;
    overflow: hidden;
    display: block;
}
.tt-related-thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
}
.tt-related-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.tt-related-title {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--tt-text) !important;
    line-height: 1.4;
    text-decoration: none !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.tt-related-title:hover { color: var(--tt-blue) !important; }
.tt-related-date {
    font-size: 11px;
    color: var(--tt-muted);
}

/* Categories list (sidebar) */
.tt-cat-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
.tt-cat-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 9px 16px;
    border-bottom: 1px solid #f0f4f8;
    transition: background .12s;
}
.tt-cat-item:last-child { border-bottom: none; }
.tt-cat-item:hover { background: #f7fbff; }
.tt-cat-item a {
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--tt-text) !important;
    text-decoration: none !important;
    flex: 1;
}
.tt-cat-item a:hover { color: var(--tt-blue) !important; }
.tt-cat-count {
    background: #ffebeb;
    color: var(--tt-blue);
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 12px;
    min-width: 24px;
    text-align: center;
}

/* Provinces in sidebar – clean grid, no weather icons */
.tt-widget-provinces-clean { overflow: hidden; }

.tt-sb-provinces-body {
    padding: 10px 12px 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.tt-sb-region {}

.tt-sb-region-label {
    display: block;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--tt-muted);
    margin-bottom: 6px;
    padding-bottom: 4px;
    border-bottom: 1px dashed var(--tt-border);
}

.tt-sb-province-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}

.tt-sb-province-link {
    display: flex;
    align-items: center;
    gap: 7px;
    background: #fff;
    border: 1px solid var(--tt-border);
    color: var(--tt-text) !important;
    font-size: 12px;
    font-weight: 500;
    padding: 8px 10px;
    border-radius: 8px;
    text-decoration: none !important;
    transition: all .15s;
    white-space: nowrap;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(13,71,161,.04);
}
.tt-sb-province-link svg {
    flex-shrink: 0;
    color: var(--tt-blue);
}
.tt-sb-province-link span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tt-sb-province-link:hover {
    background: #fff5f5 !important;
    border-color: var(--tt-blue) !important;
    color: var(--tt-blue) !important;
    box-shadow: 0 2px 8px rgba(197,34,34,.12);
}
.tt-sb-province-link:hover svg {
    color: var(--tt-blue-dark);
}

/* ============================================================
   SINGLE POST – RELATED SECTION (Full width bottom)
   ============================================================ */
.tt-related-section {
    background: #fff5f5;
    padding: 44px 0 52px;
    border-top: 2px solid var(--tt-border);
}
.tt-related-section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 20px !important;
    font-weight: 800 !important;
    color: var(--tt-blue-dark) !important;
    margin: 0 0 28px !important;
    padding-bottom: 14px;
    border-bottom: 3px solid var(--tt-blue);
}
.tt-related-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}
.tt-related-card {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 14px rgba(139,0,0,.06);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: all .2s;
}
.tt-related-card:hover {
    box-shadow: 0 8px 28px rgba(139,0,0,.12);
    transform: translateY(-3px);
}
.tt-related-card-thumb {
    display: block;
    position: relative;
    aspect-ratio: 16/9;
    overflow: hidden;
    background: linear-gradient(135deg, #b71c1c, #d32f2f);
    text-decoration: none !important;
}
.tt-related-card-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    transition: transform .3s;
}
.tt-related-card:hover .tt-related-card-img { transform: scale(1.05); }
.tt-related-card-no-thumb {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}
.tt-related-card-cat {
    position: absolute;
    top: 10px;
    left: 10px;
    background: var(--tt-blue);
    color: #fff !important;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    padding: 3px 10px;
    border-radius: 12px;
}
.tt-related-card-body {
    padding: 16px 18px 20px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.tt-related-card-title {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: var(--tt-text) !important;
    line-height: 1.45;
    text-decoration: none !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color .15s;
}
.tt-related-card-title:hover { color: var(--tt-blue) !important; }
.tt-related-card-meta {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    color: var(--tt-muted);
}
.tt-related-card-excerpt {
    font-size: 13px !important;
    color: var(--tt-muted) !important;
    line-height: 1.55 !important;
    margin: 0 !important;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ============================================================
   SINGLE POST – RESPONSIVE
   ============================================================ */
@media (max-width: 1100px) {
    .tt-single-grid { grid-template-columns: 1fr 290px; }
}
@media (max-width: 900px) {
    .tt-single-grid {
        grid-template-columns: 1fr;
    }
    .tt-sidebar-sticky-single {
        position: static;
    }
    .tt-related-grid { grid-template-columns: repeat(2, 1fr); }
    .tt-post-hero.has-thumb { min-height: 280px; }
    .tt-article { padding: 16px 22px 24px; }
}
@media (max-width: 640px) {
    .tt-post-hero { padding: 36px 0 32px; }
    .tt-post-title { font-size: 22px !important; }
    .tt-post-meta-row { font-size: 12px; }
    .tt-single-body { padding: 20px 0 28px; }
    .tt-article { padding: 14px 16px 20px; }
    .tt-article-content { font-size: 15px; }
    .tt-author-box { padding: 18px 16px; gap: 14px; flex-direction: column; align-items: center; text-align: center; }
    .tt-author-avatar { width: 64px !important; height: 64px !important; }
    .tt-post-nav { grid-template-columns: 1fr; }
    .tt-nav-prev:only-child { max-width: 100%; }
    .tt-related-grid { grid-template-columns: 1fr; gap: 14px; }
    .tt-related-section { padding: 28px 0 36px; }
    .tt-breadcrumb-current { max-width: 140px; }
    .tt-comments-wrap { padding: 18px 16px; }
    .tt-share-btn { padding: 5px 11px; font-size: 11px; }
}

/* ============================================================
   ARCHIVE / CATEGORY / TAG PAGE
   ============================================================ */

/* Hero */
.tt-archive-hero {
    background: linear-gradient(135deg, #8b0000 0%, #b71c1c 45%, #d32f2f 100%);
    padding: 36px 0 32px;
    position: relative;
    overflow: hidden;
}
.tt-archive-hero::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='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Ccircle cx='30' cy='30' r='20'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") repeat;
    pointer-events: none;
}
.tt-archive-hero .container { position: relative; }

.tt-archive-hero .tt-breadcrumb { margin-bottom: 16px; }

.tt-archive-hero-inner {
    display: flex;
    align-items: center;
    gap: 18px;
}
.tt-archive-hero-icon {
    width: 64px;
    height: 64px;
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.25);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    flex-shrink: 0;
    backdrop-filter: blur(6px);
}
.tt-archive-title {
    font-size: clamp(20px, 3.5vw, 30px) !important;
    font-weight: 800 !important;
    color: #fff !important;
    margin: 0 0 6px !important;
    line-height: 1.2 !important;
}
.tt-archive-desc {
    font-size: 14px !important;
    color: rgba(255,255,255,.78) !important;
    margin: 0 0 10px !important;
    line-height: 1.55 !important;
}
.tt-archive-count {
    display: inline-flex;
    align-items: center;
    background: rgba(255,255,255,.18);
    border: 1px solid rgba(255,255,255,.28);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 20px;
}

/* Layout */
.tt-archive-body {
    padding: 32px 0 48px;
    background: var(--tt-bg);
}
.tt-archive-layout {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 28px;
    align-items: start;
}
.tt-archive-main { min-width: 0; }

/* ── Featured first post ── */
.tt-feat-card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 4px 24px rgba(139,0,0,.08);
    overflow: hidden;
    margin-bottom: 24px;
    transition: box-shadow .2s, transform .2s;
}
.tt-feat-card:hover {
    box-shadow: 0 10px 36px rgba(139,0,0,.12);
    transform: translateY(-2px);
}
.tt-feat-thumb {
    display: block;
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #8b0000, #d32f2f);
    min-height: 280px;
    text-decoration: none !important;
}
.tt-feat-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    display: block;
    transition: transform .4s;
}
.tt-feat-card:hover .tt-feat-img { transform: scale(1.05); }
.tt-feat-no-thumb {
    width: 100%;
    height: 100%;
    min-height: 280px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.tt-feat-cat {
    position: absolute;
    top: 14px;
    left: 14px;
    background: var(--tt-blue);
    color: #fff !important;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    padding: 4px 12px;
    border-radius: 20px;
    pointer-events: none;
}
.tt-feat-body {
    padding: 28px 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 14px;
}
.tt-feat-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
    font-size: 12px;
    color: var(--tt-muted);
}
.tt-feat-author { font-weight: 600; }
.tt-feat-title {
    font-size: 20px !important;
    font-weight: 800 !important;
    line-height: 1.35 !important;
    margin: 0 !important;
}
.tt-feat-title a {
    color: var(--tt-text) !important;
    text-decoration: none !important;
    transition: color .15s;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.tt-feat-title a:hover { color: var(--tt-blue) !important; }
.tt-feat-excerpt {
    font-size: 14px !important;
    color: var(--tt-muted) !important;
    line-height: 1.7 !important;
    margin: 0 !important;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.tt-feat-readmore {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--tt-blue);
    color: #fff !important;
    font-size: 13px;
    font-weight: 700;
    padding: 9px 20px;
    border-radius: 8px;
    text-decoration: none !important;
    align-self: flex-start;
    transition: background .15s, gap .15s;
}
.tt-feat-readmore:hover { background: var(--tt-blue-dark) !important; gap: 8px; }
.tt-arc-read-time { font-size: 11px; }

/* Card grid */
.tt-archive-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 32px;
}

/* Card */
.tt-arc-card {
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 2px 14px rgba(139,0,0,.06);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: box-shadow .2s, transform .2s;
}
.tt-arc-card:hover {
    box-shadow: 0 8px 28px rgba(139,0,0,.12);
    transform: translateY(-3px);
}

/* Thumbnail */
.tt-arc-card-thumb {
    display: block;
    position: relative;
    aspect-ratio: 16/9;
    overflow: hidden;
    background: linear-gradient(135deg, #b71c1c, #d32f2f);
    text-decoration: none !important;
    flex-shrink: 0;
}
.tt-arc-card-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    transition: transform .35s;
    display: block;
}
.tt-arc-card:hover .tt-arc-card-img { transform: scale(1.06); }
.tt-arc-card-no-thumb {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.tt-arc-card-cat {
    position: absolute;
    top: 10px;
    left: 10px;
    background: var(--tt-blue);
    color: #fff !important;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    padding: 3px 10px;
    border-radius: 12px;
    pointer-events: none;
}

/* Card body */
.tt-arc-card-body {
    padding: 16px 18px 18px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.tt-arc-card-title {
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
    margin: 0 !important;
}
.tt-arc-card-title a {
    color: var(--tt-text) !important;
    text-decoration: none !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color .15s;
}
.tt-arc-card-title a:hover { color: var(--tt-blue) !important; }

.tt-arc-card-excerpt {
    font-size: 13px !important;
    color: var(--tt-muted) !important;
    line-height: 1.6 !important;
    margin: 0 !important;
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.tt-arc-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 4px;
    padding-top: 12px;
    border-top: 1px solid #f0f4f8;
    gap: 8px;
}
.tt-arc-card-meta {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: var(--tt-muted);
    min-width: 0;
    overflow: hidden;
}
.tt-arc-meta-avatar {
    width: 22px !important;
    height: 22px !important;
    border-radius: 50% !important;
    flex-shrink: 0;
}
.tt-arc-meta-author {
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 80px;
}
.tt-arc-meta-sep { opacity: .4; }
.tt-arc-meta-date { white-space: nowrap; flex-shrink: 0; }

.tt-arc-read-more {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 12px;
    font-weight: 700;
    color: var(--tt-blue) !important;
    text-decoration: none !important;
    white-space: nowrap;
    flex-shrink: 0;
    transition: gap .15s;
}
.tt-arc-read-more:hover { gap: 6px; }

/* Pagination */
.tt-archive-pagination {
    display: flex;
    justify-content: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 8px;
}
.tt-archive-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 0 10px;
    border-radius: 8px;
    background: #fff;
    border: 1px solid var(--tt-border);
    color: var(--tt-text) !important;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none !important;
    transition: all .15s;
}
.tt-archive-pagination .page-numbers:hover,
.tt-archive-pagination .page-numbers.current {
    background: var(--tt-blue) !important;
    border-color: var(--tt-blue);
    color: #fff !important;
}
.tt-archive-pagination .page-numbers.dots {
    background: transparent !important;
    border-color: transparent !important;
    color: var(--tt-muted) !important;
}

/* Empty state */
.tt-archive-empty {
    text-align: center;
    padding: 60px 20px;
    color: var(--tt-muted);
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 2px 14px rgba(13,71,161,.06);
}
.tt-archive-empty p {
    font-size: 15px;
    margin: 16px 0 24px !important;
}
.tt-arc-btn-home {
    display: inline-flex;
    align-items: center;
    background: var(--tt-blue);
    color: #fff !important;
    font-weight: 600;
    padding: 10px 24px;
    border-radius: 8px;
    text-decoration: none !important;
    transition: background .15s;
}
.tt-arc-btn-home:hover { background: var(--tt-blue-dark) !important; }

/* Load More button */
.tt-loadmore-wrap {
    text-align: center;
    padding: 8px 0 16px;
}
.tt-loadmore-wrap .tt-loadmore-btn,
button.tt-loadmore-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 9px !important;
    background: #fff !important;
    border: 2px solid var(--tt-blue) !important;
    color: var(--tt-blue) !important;
    font-family: 'Be Vietnam Pro', sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    padding: 12px 32px !important;
    border-radius: 50px !important;
    cursor: pointer !important;
    transition: all .2s !important;
    box-shadow: 0 2px 12px rgba(197,34,34,.12) !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    line-height: 1.4 !important;
    width: auto !important;
}
.tt-loadmore-wrap .tt-loadmore-btn:hover,
button.tt-loadmore-btn:hover {
    background: var(--tt-blue) !important;
    color: #fff !important;
    box-shadow: 0 4px 20px rgba(197,34,34,.28) !important;
    transform: translateY(-1px);
}
.tt-loadmore-wrap .tt-loadmore-btn:hover .tt-loadmore-icon,
button.tt-loadmore-btn:hover .tt-loadmore-icon { stroke: #fff; }
.tt-loadmore-icon {
    stroke: var(--tt-blue);
    transition: stroke .2s;
    flex-shrink: 0;
}
.tt-loadmore-loading .tt-loadmore-icon {
    animation: tt-spin .8s linear infinite;
}
.tt-loadmore-loading {
    opacity: .75;
    cursor: wait;
}
@keyframes tt-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
.tt-loadmore-status {
    font-size: 13px;
    color: var(--tt-muted);
    margin-top: 8px;
}

/* Sidebar */
.tt-archive-sidebar { min-width: 0; }
.tt-archive-sidebar-sticky {
    position: sticky;
    top: 90px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Search widget */
.tt-sb-search { padding: 14px 16px; }
.tt-sb-search-row {
    display: flex;
    gap: 0;
    border: 1.5px solid var(--tt-border);
    border-radius: 8px;
    overflow: hidden;
    transition: border-color .15s;
}
.tt-sb-search-row:focus-within { border-color: var(--tt-blue); }
.tt-sb-search-input {
    flex: 1;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    padding: 9px 12px !important;
    font-size: 13px !important;
    font-family: 'Be Vietnam Pro', sans-serif !important;
    background: transparent !important;
    color: var(--tt-text) !important;
    min-width: 0;
}
.tt-sb-search-btn {
    background: var(--tt-blue);
    border: none;
    padding: 0 14px;
    cursor: pointer;
    color: #fff;
    display: flex;
    align-items: center;
    transition: background .15s;
}
.tt-sb-search-btn:hover { background: var(--tt-blue-dark); }

/* Active category highlight */
.tt-cat-active a { color: var(--tt-blue) !important; font-weight: 700 !important; }
.tt-cat-active .tt-cat-count { background: var(--tt-blue); color: #fff; }

/* ── Archive responsive ── */
@media (max-width: 1100px) {
    .tt-archive-layout { grid-template-columns: 1fr 280px; }
    .tt-archive-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
    .tt-archive-layout { grid-template-columns: 1fr; }
    .tt-archive-sidebar-sticky { position: static; }
    .tt-archive-grid { grid-template-columns: repeat(2, 1fr); }
    /* Featured card: stack vertically on tablet/mobile */
    .tt-feat-card { grid-template-columns: 1fr; }
    .tt-feat-thumb { min-height: 220px; }
}
@media (max-width: 580px) {
    .tt-archive-grid { grid-template-columns: 1fr; gap: 14px; }
    .tt-archive-hero { padding: 28px 0 24px; }
    .tt-archive-hero-icon { display: none; }
    .tt-archive-title { font-size: 20px !important; }
    /* Featured card: compact on small screens */
    .tt-feat-thumb { min-height: 180px; }
    .tt-feat-body { padding: 18px 20px; gap: 10px; }
    .tt-feat-title { font-size: 17px !important; }
    .tt-feat-excerpt { -webkit-line-clamp: 3; }
}

/* ══════════════════════════════════════════════════════════════
   CHI TIẾT LỊCH NGÀY – PHONG CÁCH TOÀN DIỆN LICHAMDUONG
   ══════════════════════════════════════════════════════════════ */
.lich-rich-wrapper {
  margin-top: 14px;
}
.lich-card {
  background: #fff;
  border: 1px solid #ebdcd0;
  border-radius: 12px;
  margin-bottom: 20px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(188,118,80,0.05);
}
.lich-card-pad { padding: 22px 24px; }
.lich-pattern-bar {
  background: linear-gradient(135deg, #fdf8f4 0%, #faede3 100%);
  border-bottom: 1px solid #ebdcd0;
  padding: 14px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}
.lich-pattern-bar h2 {
  font-size: 18px;
  font-weight: 700;
  color: #8b1800;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}
.lich-pill {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  background: #ebdcd0;
  color: #7a3a22;
}

/* 1. Header Card & 4 Trụ Can Chi */
.lich-astro-hero {
  padding: 22px 24px;
}
.lich-astro-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.lich-date-pill {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 16px;
  font-size: 12.5px;
  font-weight: 600;
  background: #fee2e2;
  color: #991b1b;
  margin-bottom: 6px;
}
.lich-lunar-title {
  font-size: 22px;
  font-weight: 800;
  color: #1e293b;
  margin: 4px 0 8px;
  line-height: 1.3;
}
.lich-hero-sub {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  color: #64748b;
  flex-wrap: wrap;
}
.lich-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 700;
}
.lich-badge.is-good { background: #dcfce7; color: #15803d; }
.lich-badge.is-bad { background: #fee2e2; color: #b91c1c; }

/* Khối Đánh giá Điểm Ngày - Thiết kế thẻ ngang cao cấp, hiển thị chuẩn xác không tràn chữ */
.lich-score-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 18px;
  border-radius: 14px;
  border: 1.5px solid #e2e8f0;
  background: #ffffff;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
  flex-shrink: 0;
  min-width: 250px;
  box-sizing: border-box;
}

.lich-score-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 62px;
  border-radius: 12px;
  background: #f8fafc;
  border: 2px solid #cbd5e1;
  flex-shrink: 0;
  text-align: center;
}

.lich-score-badge .num {
  font-size: 24px;
  font-weight: 900;
  line-height: 1;
  color: #0f172a;
}

.lich-score-badge .lbl {
  font-size: 8.5px;
  font-weight: 700;
  text-transform: uppercase;
  color: #64748b;
  margin-top: 3px;
  letter-spacing: 0.3px;
}

.lich-score-detail {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
  min-width: 0;
}

.lich-score-detail .tag {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  color: #64748b;
  letter-spacing: 0.5px;
}

.lich-score-detail .verdict {
  font-size: 15px;
  font-weight: 800;
  line-height: 1.3;
  color: #0f172a;
  white-space: normal;
}

.lich-score-detail .bar {
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background: #e2e8f0;
  overflow: hidden;
  margin-top: 4px;
}

.lich-score-detail .bar span {
  display: block;
  height: 100%;
  border-radius: 3px;
}

/* Biến thể màu sắc theo mức đánh giá */
.lich-score-card.is-daicat {
  background: #f0fdf4;
  border-color: #86efac;
}
.lich-score-card.is-daicat .lich-score-badge {
  background: #dcfce7;
  border-color: #10b981;
}
.lich-score-card.is-daicat .verdict { color: #047857; }
.lich-score-card.is-daicat .bar span { background: linear-gradient(90deg, #10b981, #059669); }

.lich-score-card.is-cat {
  background: #f0fdf4;
  border-color: #bbf7d0;
}
.lich-score-card.is-cat .lich-score-badge {
  background: #dcfce7;
  border-color: #22c55e;
}
.lich-score-card.is-cat .verdict { color: #15803d; }
.lich-score-card.is-cat .bar span { background: linear-gradient(90deg, #22c55e, #16a34a); }

.lich-score-card.is-binh {
  background: #fefce8;
  border-color: #fde047;
}
.lich-score-card.is-binh .lich-score-badge {
  background: #fef9c3;
  border-color: #eab308;
}
.lich-score-card.is-binh .verdict { color: #a16207; }
.lich-score-card.is-binh .bar span { background: linear-gradient(90deg, #facc15, #ca8a04); }

.lich-score-card.is-hung {
  background: #fff7ed;
  border-color: #fed7aa;
}
.lich-score-card.is-hung .lich-score-badge {
  background: #ffedd5;
  border-color: #f97316;
}
.lich-score-card.is-hung .verdict { color: #c2410c; }
.lich-score-card.is-hung .bar span { background: linear-gradient(90deg, #fb923c, #ea580c); }

.lich-score-card.is-daihung {
  background: #fef2f2;
  border-color: #fecaca;
}
.lich-score-card.is-daihung .lich-score-badge {
  background: #fee2e2;
  border-color: #ef4444;
}
.lich-score-card.is-daihung .verdict { color: #b91c1c; }
.lich-score-card.is-daihung .bar span { background: linear-gradient(90deg, #f87171, #dc2626); }

/* 4 Trụ Grid */
.lich-4tru-heading {
  margin-top: 16px;
  font-size: 13px;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.lich-4tru-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin: 10px 0 16px;
}
.lich-4tru-item {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 10px;
  text-align: center;
}
.lich-4tru-item .cap {
  font-size: 11.5px;
  color: #64748b;
  display: block;
}
.lich-4tru-item .val {
  font-size: 15.5px;
  font-weight: 700;
  color: #0f172a;
  display: block;
  margin: 2px 0;
}
.lich-4tru-item small {
  font-size: 11.5px;
  color: #94a3b8;
  display: block;
}
.lich-4tru-item.is-highlight {
  background: #fff1f2;
  border-color: #fecdd3;
}
.lich-4tru-item.is-highlight .val {
  color: #e11d48;
}

/* Tuổi hợp & xung */
.lich-tuoi-hop-xung {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 12px;
}
.tuoi-box {
  display: flex;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 8px;
  font-size: 13.5px;
  line-height: 1.5;
}
.tuoi-box .icon { font-size: 18px; line-height: 1; flex-shrink: 0; }
.tuoi-box strong { display: block; margin-bottom: 2px; }
.tuoi-box p { margin: 0; }
.tuoi-box.is-hop { background: #f0fdf4; border: 1px solid #bbf7d0; color: #166534; }
.tuoi-box.is-xung { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; }

/* 2. Bảng điểm 7 việc đại sự */
.lich-tasks-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 16px;
}
.lich-task-item {
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 14px 16px;
  background: #fff;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.lich-task-item:hover {
  border-color: #cbd5e1;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.lich-task-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.lich-task-meta {
  display: flex;
  align-items: center;
  gap: 10px;
}
.lich-task-icon { font-size: 22px; line-height: 1; }
.lich-task-name { font-size: 16px; font-weight: 700; color: #1e293b; }
.lich-task-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 12px;
}
.lich-task-badge.is-daicat { background: #d1fae5; color: #065f46; }
.lich-task-badge.is-cat { background: #ecfdf5; color: #047857; }
.lich-task-badge.is-binh { background: #fef3c7; color: #92400e; }
.lich-task-badge.is-hung { background: #fee2e2; color: #991b1b; }

.lich-task-score-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 220px;
}
.lich-task-score-text {
  font-size: 15px;
  font-weight: 700;
  color: #1e293b;
  white-space: nowrap;
}
.lich-task-bar-track {
  flex: 1;
  height: 10px;
  background: #e2e8f0;
  border-radius: 20px;
  overflow: hidden;
}
.lich-task-bar-fill {
  height: 100%;
  border-radius: 20px;
  transition: width 0.3s ease;
}
.lich-task-summary {
  font-size: 13.5px;
  color: #475569;
  margin-top: 8px;
  line-height: 1.5;
}
.lich-task-details {
  margin-top: 8px;
  font-size: 13px;
}
.lich-task-details summary {
  cursor: pointer;
  font-weight: 600;
  color: #bc7650;
  outline: none;
}
.lich-task-details summary:hover {
  color: #8b1800;
}
.lich-task-details .details-body {
  background: #f8fafc;
  border: 1px dashed #e2e8f0;
  border-radius: 6px;
  padding: 10px 14px;
  margin-top: 6px;
  color: #334155;
  line-height: 1.6;
}
.lich-task-details ul {
  margin: 0;
  padding-left: 18px;
}
.lich-task-details li {
  margin: 4px 0;
}

/* 3. Lời khuyên hạ rủi ro */
.lich-risk-solutions {
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px dashed #ebdcd0;
}
.lich-risk-solutions h3 {
  font-size: 16px;
  font-weight: 700;
  color: #1e293b;
  margin: 0 0 12px;
}
.lich-solutions-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.lich-sol-card {
  background: #fdfcfb;
  border: 1px solid #ebdcd0;
  border-radius: 8px;
  padding: 14px;
  font-size: 13px;
}
.lich-sol-card .icon { font-size: 22px; display: block; margin-bottom: 6px; }
.lich-sol-card strong { display: block; font-size: 14px; color: #0f172a; margin-bottom: 4px; }
.lich-sol-card p { margin: 0; color: #475569; line-height: 1.45; }

.lich-callout {
  border-radius: 8px;
  padding: 14px 18px;
  margin: 14px 0;
  font-size: 14px;
  line-height: 1.55;
}
.lich-callout.is-alt { background: #fef8ec; border-left: 4px solid #d97706; color: #92400e; }
.lich-callout.is-good { background: #f3faf7; border-left: 4px solid #0e9f6e; color: #03543f; }
.lich-callout p { margin: 0; }

/* 4. Timeline 24h & Giờ Hoàng Đạo / Hắc Đạo */
.lich-timeline-24h {
  margin: 16px 0 10px;
  overflow-x: auto;
  padding-bottom: 4px;
}
.lich-timeline-bar {
  display: grid;
  grid-template-columns: repeat(24, 1fr);
  gap: 3px;
  min-width: 580px;
}
.lich-timeline-slot {
  text-align: center;
  padding: 8px 0;
  border-radius: 4px;
  font-weight: 700;
  font-size: 11.5px;
  color: #fff;
  transition: transform 0.15s;
}
.lich-timeline-slot.is-good { background: #10b981; }
.lich-timeline-slot.is-bad { background: #94a3b8; }
.lich-timeline-slot.is-now {
  background: #ef4444;
  transform: scale(1.15);
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px #ef4444;
  z-index: 2;
  position: relative;
}
.lich-timeline-legend {
  display: flex;
  gap: 18px;
  align-items: center;
  font-size: 13px;
  color: #64748b;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.lich-timeline-legend .dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  vertical-align: middle;
  margin-right: 4px;
}
.lich-timeline-legend .dot.is-good { background: #10b981; }
.lich-timeline-legend .dot.is-bad { background: #94a3b8; }
.lich-timeline-legend .dot.is-now { background: #ef4444; }

/* Cột Giờ Hoàng Đạo / Hắc Đạo */
.lich-gio-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 16px;
}
.lich-gio-col {
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid #e2e8f0;
}
.lich-gio-col.is-hoang-dao { border-color: #bbf7d0; background: #f0fdf4; }
.lich-gio-col.is-hac-dao { border-color: #fecaca; background: #fef2f2; }
.lich-gio-col .col-head {
  padding: 12px 16px;
}
.lich-gio-col.is-hoang-dao .col-head { background: #dcfce7; color: #15803d; }
.lich-gio-col.is-hac-dao .col-head { background: #fee2e2; color: #b91c1c; }
.lich-gio-col .col-head h3 {
  font-size: 15px;
  font-weight: 700;
  margin: 0;
  color: inherit;
}
.lich-gio-col .col-body {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.gio-row {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 10px 12px;
}
.gio-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.gio-title strong { font-size: 14.5px; color: #0f172a; }
.gio-title .badge {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 10px;
  background: #f1f5f9;
  color: #475569;
}
.gio-time {
  font-size: 13px;
  font-weight: 600;
  color: #2563eb;
  margin: 2px 0 4px;
}
.gio-desc {
  font-size: 12.5px;
  color: #64748b;
  margin: 0;
  line-height: 1.4;
}

/* 5. Tử vi 12 con giáp */
.lich-zodiac-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 14px;
}
.lich-zodiac-card {
  border: 1px solid #ebdcd0;
  border-radius: 10px;
  padding: 12px 14px;
  background: #fff;
}
.lich-zodiac-card.is-tam-hop, .lich-zodiac-card.is-luc-hop {
  border-color: #86efac;
  background: #f0fdf4;
}
.lich-zodiac-card.is-luc-xung, .lich-zodiac-card.is-tuong-hai {
  border-color: #fca5a5;
  background: #fef2f2;
}
.lich-zodiac-card.is-binh, .lich-zodiac-card.is-tu-hinh {
  border-color: #e2e8f0;
  background: #fff;
}
.lich-zodiac-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.lich-zodiac-emoji { font-size: 24px; line-height: 1; }
.lich-zodiac-name { font-weight: 700; font-size: 14.5px; color: #1f2937; }
.lich-zodiac-stars { font-size: 12px; color: #f59e0b; }
.lich-zodiac-verdict {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 700;
  margin-bottom: 6px;
}
.lich-zodiac-card.is-tam-hop .lich-zodiac-verdict,
.lich-zodiac-card.is-luc-hop .lich-zodiac-verdict {
  background: #bbf7d0; color: #166534;
}
.lich-zodiac-card.is-luc-xung .lich-zodiac-verdict,
.lich-zodiac-card.is-tuong-hai .lich-zodiac-verdict {
  background: #fecaca; color: #991b1b;
}
.lich-zodiac-card.is-binh .lich-zodiac-verdict,
.lich-zodiac-card.is-tu-hinh .lich-zodiac-verdict {
  background: #f1f5f9; color: #475569;
}
.lich-zodiac-desc {
  font-size: 12px;
  color: #4b5563;
  line-height: 1.4;
  margin: 0;
}

/* 6. Lời khuyên ngành nghề */
.lich-career-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 14px;
}
.lich-career-card {
  border: 1px solid #ebdcd0;
  border-radius: 10px;
  padding: 14px;
  background: #fdfcfb;
  display: flex;
  gap: 12px;
}
.lich-career-icon { font-size: 28px; line-height: 1; flex-shrink: 0; }
.lich-career-body h3 {
  font-size: 15px;
  font-weight: 700;
  margin: 0 0 4px;
  color: #1f2937;
}
.lich-career-text {
  font-size: 13px;
  color: #4b5563;
  line-height: 1.5;
  margin: 0;
}

/* 7. Ngũ hành & Nạp Âm */
.lich-nguhanh-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px;
  background: #fdf8f4;
  border-radius: 10px;
  margin: 14px 0;
  font-weight: 600;
  font-size: 13.5px;
  flex-wrap: wrap;
}
.lich-nguhanh-circle .hanh {
  padding: 6px 14px;
  border-radius: 20px;
  background: #fff;
  border: 1px solid #ebdcd0;
}
.lich-nguhanh-circle .hanh.is-active {
  background: #c90000;
  color: #fff;
  border-color: #c90000;
  box-shadow: 0 2px 8px rgba(201,0,0,.25);
}
.lich-detail-table {
  width: 100%;
  border-collapse: collapse;
  margin: 14px 0;
  font-size: 13.5px;
}
.lich-detail-table th, .lich-detail-table td {
  border: 1px solid #ebdcd0;
  padding: 10px 14px;
  text-align: left;
}
.lich-detail-table th {
  background: #fdf8f4;
  color: #7a3a22;
  font-weight: 700;
}
.lich-hanh-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 12px;
  font-weight: 600;
  font-size: 12px;
}
.lich-hanh-badge.is-moc { background: #dcfce7; color: #166534; }
.lich-hanh-badge.is-hoa { background: #fee2e2; color: #991b1b; }
.lich-hanh-badge.is-tho { background: #fef3c7; color: #92400e; }
.lich-hanh-badge.is-kim { background: #f3f4f6; color: #374151; }
.lich-hanh-badge.is-thuy { background: #e0f2fe; color: #075985; }

/* 8. Khổng Minh Lục Diệu */
.luc-dieu-result {
  display: flex;
  gap: 12px;
  padding: 14px 16px;
  background: #fdf8f4;
  border: 1px solid #ebdcd0;
  border-radius: 8px;
  align-items: flex-start;
}
.luc-dieu-result span { font-size: 24px; color: #c90000; line-height: 1; }
.luc-dieu-result strong { font-size: 15px; color: #1e293b; display: block; margin-bottom: 4px; }
.luc-dieu-result p { margin: 0; font-size: 13.5px; color: #4b5563; line-height: 1.5; }



/* 10. Quick Nav */
.lich-quick-nav {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 20px;
}
.lich-quick-nav a, .lich-quick-nav button {
  flex: 1;
  text-align: center;
  padding: 12px;
  border: 1px solid #ebdcd0;
  border-radius: 8px;
  background: #fff;
  text-decoration: none;
  color: #1f2937;
  cursor: pointer;
  transition: all .15s;
}
.lich-quick-nav a:hover, .lich-quick-nav button:hover {
  background: #fdf8f4;
  border-color: #c90000;
  color: #c90000;
}
.lich-quick-nav small { display: block; font-size: 12px; color: #8a94a6; }
.lich-quick-nav b { font-size: 15px; font-weight: 700; }

/* Responsive adjustments */
@media (max-width: 860px) {
  .lich-4tru-grid { grid-template-columns: repeat(2, 1fr); }
  .lich-tuoi-hop-xung { grid-template-columns: 1fr; }
  .lich-solutions-grid { grid-template-columns: 1fr; }
  .lich-gio-columns { grid-template-columns: 1fr; }
  .lich-zodiac-grid { grid-template-columns: repeat(2, 1fr); }
  .lich-career-grid { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
  .lich-card-pad, .lich-astro-hero { padding: 16px; }
  .lich-astro-head { flex-direction: column; align-items: stretch; gap: 14px; }
  .lich-score-card { width: 100%; min-width: 0; }
  .lich-4tru-grid { grid-template-columns: 1fr 1fr; }
  .lich-task-main { flex-direction: column; align-items: flex-start; gap: 8px; }
  .lich-task-score-wrap { width: 100%; min-width: 0; }
  .lich-zodiac-grid { grid-template-columns: 1fr; }
  .lich-quick-nav { flex-direction: column; }
}

/* ==========================================================================
   LỊCH THÁNG (MONTHLY CALENDAR SSR STYLES)
   ========================================================================== */
.lich-month-scope {
  width: 100%;
}
.lich-breadcrumb-bar {
  margin-bottom: 14px;
}
.lich-breadcrumb-bar ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 13.5px;
  color: #64748b;
}
.lich-breadcrumb-bar li + li::before {
  content: "›";
  margin-right: 6px;
  color: #94a3b8;
  font-size: 14px;
}
.lich-breadcrumb-bar a {
  color: #475569;
  text-decoration: none;
  transition: color .15s;
}
.lich-breadcrumb-bar a:hover {
  color: #c90000;
}
.lich-month-above-tool {
  background: #fff;
  border: 1px solid #ebdcd0;
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 20px;
}
.lich-month-above-tool h1,
.lich-month-above-tool h2 {
  font-size: 26px;
  font-weight: 800;
  color: #1e293b;
  margin: 0 0 12px;
  line-height: 1.3;
}
.lich-intro-summary {
  font-size: 15.5px;
  line-height: 1.6;
  color: #334155;
  margin: 0 0 14px;
}
.lich-unique-content p {
  font-size: 14.5px;
  line-height: 1.65;
  color: #475569;
  margin: 0 0 10px;
}
.lich-month-summary {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 18px;
}
.lich-month-summary-card {
  padding: 16px 10px;
  border-radius: 10px;
  text-align: center;
  border: 1px solid #ebdcd0;
  background: #fff;
}
.lich-month-summary-card.is-good {
  background: #f0fdf4;
  border-color: #86efac;
}
.lich-month-summary-card.is-bad {
  background: #fef2f2;
  border-color: #fca5a5;
}
.lich-month-summary-card.is-mid {
  background: #fffbeb;
  border-color: #fde68a;
}
.lich-month-summary-num {
  font-size: 32px;
  font-weight: 800;
  line-height: 1;
}
.is-good .lich-month-summary-num { color: #15803d; }
.is-bad .lich-month-summary-num { color: #b91c1c; }
.is-mid .lich-month-summary-num { color: #b45309; }
.lich-month-summary-label {
  font-size: 13px;
  font-weight: 600;
  color: #64748b;
  margin-top: 6px;
}

.lich-sr {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Lưới lịch tháng */
.lich-month-tool .lich-card-pad {
  padding: 20px;
}
.lich-pattern-bar-month-group {
  display: flex;
  align-items: center;
  gap: 12px;
}
.lich-month-nav-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 8px;
  border: 1px solid #d1d5db;
  background: #ffffff;
  color: #334155;
  text-decoration: none;
  font-size: 20px;
  font-weight: bold;
  line-height: 1;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  transition: all .15s;
}
.lich-month-nav-arrow:hover {
  border-color: #b91c1c;
  color: #b91c1c;
  background: #fff5f5;
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(185, 28, 28, 0.15);
}
.lich-month-cal-h2 {
  font-size: 17px;
  font-weight: 700;
  color: #1e293b;
  margin: 0;
}
.lich-month-form {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  flex-wrap: nowrap;
}
.lich-select-wrap {
  position: relative;
  display: inline-block;
}
.lich-month-select {
  height: 38px !important;
  min-height: 38px !important;
  line-height: 38px !important;
  padding: 0 32px 0 12px !important;
  margin: 0 !important;
  border: 1px solid #d1d5db !important;
  border-radius: 8px !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: #1e293b !important;
  background-color: #ffffff !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: calc(100% - 10px) center !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
}
.lich-month-select:hover {
  border-color: #94a3b8 !important;
}
.lich-month-select:focus {
  border-color: #b91c1c !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(185, 28, 28, 0.12) !important;
}
.lich-month-go-btn {
  height: 38px !important;
  min-height: 38px !important;
  padding: 0 16px !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  background: linear-gradient(135deg, #b91c1c 0%, #991b1b 100%) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  letter-spacing: 0.5px !important;
  cursor: pointer !important;
  box-shadow: 0 2px 5px rgba(185, 28, 28, 0.25) !important;
  transition: transform .15s, box-shadow .15s, background .15s !important;
  white-space: nowrap !important;
}
.lich-month-go-btn:hover {
  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 10px rgba(185, 28, 28, 0.35) !important;
}
.lich-month-go-btn:active {
  transform: translateY(0) !important;
  box-shadow: 0 1px 3px rgba(185, 28, 28, 0.2) !important;
}
.lich-month-go-btn svg {
  transition: transform .15s;
}
.lich-month-go-btn:hover svg {
  transform: translateX(2px);
}
.lich-thang-grid {
  width: 100%;
  border-collapse: separate;
  border-spacing: 6px;
  table-layout: fixed;
  margin: 16px 0;
}
.lich-thang-grid th {
  text-align: center;
  padding: 8px 4px;
  font-size: 13.5px;
  font-weight: 700;
  color: #475569;
  background: #f8fafc;
  border-radius: 6px;
}
.lich-thang-grid th.is-sun {
  color: #dc2626;
}
.lich-thang-grid td {
  padding: 0;
  vertical-align: top;
}
.lich-thang-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 8px 4px 6px;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  min-height: 88px;
  text-decoration: none;
  position: relative;
  background: #fff;
  color: #1e293b;
  transition: transform .15s, box-shadow .15s, border-color .15s;
}
a.lich-thang-cell:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  border-color: #c90000;
  z-index: 2;
}
.lich-thang-cell.is-rat-tot {
  background: #dcfce7;
  border-color: #86efac;
  color: #14532d;
}
.lich-thang-cell.is-tot {
  background: #f0fdf4;
  border-color: #bbf7d0;
  color: #166534;
}
.lich-thang-cell.is-binh-thuong {
  background: #ffffff;
  border-color: #e2e8f0;
  color: #1e293b;
}
.lich-thang-cell.is-xau {
  background: #fef2f2;
  border-color: #fca5a5;
  color: #991b1b;
}
.lich-thang-cell.is-rat-xau {
  background: #fee2e2;
  border-color: #f87171;
  color: #7f1d1d;
}
.lich-thang-cell.is-other-month {
  background: #f8fafc;
  border-color: #f1f5f9;
  color: #94a3b8;
  opacity: 0.55;
  pointer-events: none;
}
.lich-thang-cell.is-today {
  outline: 2.5px solid #c90000;
  outline-offset: -2px;
}
.lich-thang-cell.is-sun .ngay-duong {
  color: #dc2626;
}
.ngay-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0 4px;
}
.ngay-duong {
  font-size: 18px;
  font-weight: 800;
  line-height: 1;
}
.ngay-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
}
.ngay-star {
  position: absolute;
  top: 3px;
  right: 5px;
  color: #eab308;
  font-size: 13px;
  line-height: 1;
}
.ngay-am {
  font-size: 12.5px;
  font-weight: 600;
  color: #475569;
  margin: 2px 0 1px;
}
.ngay-am.is-special {
  color: #dc2626;
  font-weight: 700;
}
.ngay-canchi {
  font-size: 11px;
  color: #64748b;
  white-space: nowrap;
}
.ngay-badge {
  display: inline-block;
  font-size: 10px;
  padding: 1px 5px;
  border-radius: 4px;
  font-weight: 600;
  margin-top: 3px;
  white-space: nowrap;
}
.is-rat-tot .ngay-badge, .is-tot .ngay-badge {
  background: #bbf7d0;
  color: #14532d;
}
.is-xau .ngay-badge, .is-rat-xau .ngay-badge {
  background: #fecaca;
  color: #991b1b;
}
.is-binh-thuong .ngay-badge {
  background: #f1f5f9;
  color: #475569;
}
.lich-month-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  font-size: 13px;
  color: #475569;
  padding: 10px 14px;
  background: #f8fafc;
  border-radius: 8px;
  margin-top: 14px;
}
.lich-month-legend span {
  display: inline-flex;
  align-items: center;
}
.lich-month-legend .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 6px;
  display: inline-block;
}
.dot.is-rat-tot { background: #22c55e; }
.dot.is-tot { background: #86efac; }
.dot.is-binh-thuong { background: #cbd5e1; }
.dot.is-xau { background: #fca5a5; }
.dot.is-rat-xau { background: #ef4444; }

/* Khung cuộn ngang mượt cho bảng trên Mobile */
.lich-overflow-x {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 14px 0 18px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #fff;
  box-shadow: inset -6px 0 8px -4px rgba(0, 0, 0, 0.05);
}

/* Thống kê theo tuần */
.lich-week-stats {
  width: 100%;
  min-width: 580px;
  border-collapse: separate;
  border-spacing: 0;
  margin: 0;
  font-size: 13.5px;
  white-space: nowrap;
}
.lich-week-stats th,
.lich-week-stats td {
  padding: 12px 14px;
  border-bottom: 1px solid #f1f5f9;
  text-align: left;
  white-space: nowrap;
  vertical-align: middle;
}
.lich-week-stats thead th {
  background: #f8fafc;
  font-size: 11px;
  text-transform: uppercase;
  font-weight: 700;
  color: #475569;
  letter-spacing: .06em;
  border-bottom: 2px solid #e2e8f0;
  white-space: nowrap;
}
.lich-week-stats thead th.text-good,
.lich-week-stats thead th.text-bad,
.lich-week-stats .num-good,
.lich-week-stats .num-bad {
  text-align: center;
}
.lich-week-stats tbody th {
  font-weight: 700;
  color: #1e293b;
  white-space: nowrap;
}
.lich-week-stats td:nth-child(2) {
  color: #475569;
  font-size: 13px;
  white-space: nowrap;
}
.lich-week-stats .num-good {
  color: #16a34a;
  font-weight: 700;
  font-size: 14px;
}
.lich-week-stats .num-bad {
  color: #dc2626;
  font-weight: 700;
  font-size: 14px;
}
.lich-week-bar {
  display: flex;
  height: 8px;
  border-radius: 999px;
  overflow: hidden;
  background: #f1f5f9;
  width: 110px;
  min-width: 80px;
}
.lich-week-bar .good { background: #22c55e; }
.lich-week-bar .bad { background: #ef4444; }
.lich-week-stats tr.is-best {
  background: rgba(187, 247, 208, 0.4);
}
.lich-week-stats tr.is-worst {
  background: rgba(254, 226, 226, 0.4);
}
.lich-week-stats tr:last-child td,
.lich-week-stats tr:last-child th {
  border-bottom: none;
}

/* Badge Đánh giá tuần (.lich-tag) */
.lich-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  line-height: 1.4;
}
.lich-tag.is-good {
  background: #dcfce7;
  color: #15803d;
  border: 1px solid #bbf7d0;
}
.lich-tag.is-bad {
  background: #fee2e2;
  color: #b91c1c;
  border: 1px solid #fecaca;
}
.lich-tag.is-mid,
.lich-tag.is-warning {
  background: #fef3c7;
  color: #b45309;
  border: 1px solid #fde68a;
}
.lich-week-stats td .lich-tag {
  white-space: nowrap;
  display: inline-flex;
}

/* Tabs & Top Ngày Đẹp */
.lich-filter-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 12px 20px 0;
}
.lich-filter-tab {
  padding: 8px 14px;
  border-radius: 20px;
  border: 1px solid #cbd5e1;
  background: #fff;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s;
  color: #334155;
}
.lich-filter-tab:hover {
  border-color: #c90000;
  color: #c90000;
}
.lich-filter-tab.is-active {
  background: #c90000;
  color: #fff;
  border-color: #c90000;
}
.lich-filter-tab-count {
  background: rgba(0,0,0,0.07);
  padding: 2px 7px;
  border-radius: 10px;
  font-size: 12px;
  margin-left: 4px;
}
.lich-filter-tab.is-active .lich-filter-tab-count {
  background: rgba(255,255,255,0.25);
  color: #fff;
}
.lich-top-panel-label {
  font-size: 14.5px;
  color: #334155;
  margin-bottom: 12px;
}
.lich-top-days {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  list-style: none;
  padding: 0;
  margin: 12px 0 16px;
}
.lich-top-day-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 8px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  text-decoration: none;
  color: inherit;
  text-align: center;
  position: relative;
  background: #fff;
  transition: all .15s;
}
.lich-top-day-card:hover {
  border-color: #c90000;
  box-shadow: 0 4px 14px rgba(201,0,0,0.1);
  transform: translateY(-2px);
}
.lich-top-day-rank {
  position: absolute;
  top: 6px;
  left: 8px;
  font-size: 12px;
  font-weight: 800;
  color: #94a3b8;
}
.lich-top-day-date {
  font-size: 20px;
  font-weight: 800;
  color: #c90000;
  margin-top: 4px;
  line-height: 1.1;
}
.lich-top-day-info {
  font-size: 12px;
  color: #64748b;
  margin: 3px 0 1px;
}
.lich-top-day-canchi {
  font-size: 13px;
  font-weight: 600;
  color: #1e293b;
}
.lich-top-day-score {
  font-size: 12px;
  color: #eab308;
  font-weight: 700;
  margin-top: 4px;
}

/* Thần sát, Vận khí, Tiết khí */
.lich-than-sat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin: 14px 0;
}
.lich-than-sat-card {
  display: flex;
  gap: 12px;
  padding: 16px;
  border: 1px solid #ebdcd0;
  border-radius: 10px;
  background: #fff;
}
.lich-than-sat-card.is-quy {
  border-left: 4px solid #16a34a;
}
.lich-than-sat-card.is-hung {
  border-left: 4px solid #dc2626;
}
.lich-than-sat-icon {
  font-size: 28px;
  line-height: 1;
}
.lich-than-sat-name {
  font-size: 16px;
  font-weight: 700;
  color: #1e293b;
  margin: 0 0 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.lich-than-sat-days {
  font-size: 13px;
  color: #475569;
  margin: 0 0 6px;
  line-height: 1.5;
}
.lich-than-sat-desc {
  font-size: 12.5px;
  color: #64748b;
  margin: 0;
  font-style: italic;
}
/* .lich-van-card được định nghĩa thống nhất tại khối Tam Nguyên Cửu Vận */
.lich-co-thu {
  background: #fff;
  border-left: 4px solid #c90000;
  padding: 12px 16px;
  font-size: 13.5px;
  font-style: italic;
  color: #475569;
  border-radius: 0 8px 8px 0;
  margin-top: 10px;
}
.lich-tk-month-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin: 12px 0;
}
.lich-tk-month-card {
  display: flex;
  gap: 12px;
  padding: 12px 16px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #fff;
  align-items: center;
}
.lich-tk-month-icon {
  font-size: 26px;
}
.lich-tk-month-name {
  font-size: 15px;
  font-weight: 700;
  color: #1e293b;
  margin: 0;
}
.lich-tk-month-range {
  font-size: 12.5px;
  color: #c90000;
  font-weight: 600;
}
.lich-tk-month-note {
  font-size: 12px;
  color: #64748b;
  margin: 0;
}
.lich-moc-am-list {
  padding-left: 20px;
  margin: 10px 0 16px;
  font-size: 14.5px;
  line-height: 1.7;
}
.lich-moc-am-list a {
  color: #c90000;
  font-weight: 600;
  text-decoration: none;
}
.lich-moc-am-list a:hover {
  text-decoration: underline;
}
.lich-objection-list {
  padding-left: 20px;
  margin: 10px 0 16px;
  font-size: 14.5px;
  line-height: 1.7;
}
.lich-ket-bai {
  padding: 18px;
  background: #fff;
  border: 1px solid #ebdcd0;
  border-radius: 10px;
  margin: 20px 0;
  font-size: 14.5px;
  line-height: 1.65;
  color: #475569;
}

@media (max-width: 860px) {
  .lich-month-summary { grid-template-columns: repeat(2, 1fr); }
  .lich-than-sat-grid { grid-template-columns: 1fr; }
  .lich-top-days { grid-template-columns: repeat(3, 1fr); }
  .lich-van-card { flex-direction: column; align-items: flex-start; }
  .lich-van-meta { margin-left: 0; }
}
@media (max-width: 580px) {
  .lich-month-summary { grid-template-columns: 1fr 1fr; }
  .lich-top-days { grid-template-columns: repeat(2, 1fr); }
  .lich-tk-month-list { grid-template-columns: 1fr; }
  .lich-thang-cell { min-height: 72px; padding: 4px 2px; }
  .ngay-duong { font-size: 15px; }
  .ngay-am { font-size: 11px; }
  .ngay-canchi { font-size: 9.5px; }
  .ngay-badge { font-size: 9px; padding: 1px 3px; }
  .lich-pattern-bar-month-group { width: 100%; justify-content: space-between; }
  .lich-month-form { width: 100%; margin-top: 10px; justify-content: flex-start; flex-wrap: wrap; gap: 8px; }
}



/* ============================================================
 * LỊCH NĂM - YEARLY CALENDAR STYLES (SSR)
 * Matching lichamduong.net/lich-nam-2026/
 * ============================================================ */

/* Wrapper & Centered Container - Width governed by Flatsome */
.lich-wrap {
  margin: 0 auto;
  padding: 0 15px;
  width: 100%;
  box-sizing: border-box;
}
.lich-wrap-pad {
  padding-top: 20px;
  padding-bottom: 30px;
}

/* 2-Column Responsive Layout */
.lich-grid {
  display: block;
}
@media (min-width: 992px) {
  .lich-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 24px;
    align-items: start;
  }
}

.lich-stack {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.lich-stack > article {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Base Cards */
.lich-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
}
.lich-card-pad {
  padding: 22px;
}

/* Pattern Header Bar */
.lich-pattern-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  background: linear-gradient(135deg, #fff1f2 0%, #fff7ed 100%);
  border-bottom: 1px solid #fee2e2;
}
.lich-pattern-bar-month-group {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.lich-bar-title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: #1f2937;
  display: flex;
  align-items: center;
  gap: 8px;
}
.lich-bar-icon {
  font-size: 20px;
  line-height: 1;
}
.lich-month-nav-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid #e5e7eb;
  color: #4b5563;
  text-decoration: none;
  font-size: 20px;
  line-height: 1;
  font-weight: bold;
  transition: all .15s;
}
.lich-month-nav-arrow:hover {
  background: #fee2e2;
  color: #dc2626;
  border-color: #fca5a5;
  text-decoration: none;
}

/* Breadcrumb */
.lich-breadcrumb-bar {
  margin-bottom: 14px;
}
.lich-breadcrumb-bar ol {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 13px;
  color: #6b7280;
}
.lich-breadcrumb-bar li + li::before {
  content: "›";
  margin-right: 6px;
  color: #9ca3af;
}
.lich-breadcrumb-bar a {
  color: #dc2626;
  text-decoration: none;
}

/* Headings & Meta */
.lich-stack h1,
.lich-stack h2 {
  font-size: 26px;
  font-weight: 800;
  color: #1f2937;
  margin: 0 0 10px;
  line-height: 1.3;
}
.lich-meta-updated {
  font-size: 13px;
  color: #6b7280;
  margin-bottom: 14px;
}
.lich-meta-updated a {
  color: #dc2626;
  text-decoration: none;
}
.lich-intro-summary {
  font-size: 15px;
  line-height: 1.6;
  margin-bottom: 12px;
  color: #1f2937;
}
.lich-unique-content p {
  font-size: 14.5px;
  line-height: 1.65;
  color: #374151;
  margin-bottom: 10px;
}

/* 4 Summary Cards */
.lich-month-summary {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin: 18px 0;
}
@media (max-width: 768px) {
  .lich-month-summary {
    grid-template-columns: repeat(2, 1fr);
  }
}
.lich-month-summary-card {
  padding: 14px 10px;
  text-align: center;
  border-radius: 10px;
  border: 1px solid #e5e7eb;
  background: #fff;
}
.lich-month-summary-card.is-good {
  border-color: #86efac;
  background: #f0fdf4;
}
.lich-month-summary-card.is-mid {
  border-color: #fde68a;
  background: #fefce8;
}
.lich-month-summary-card.is-bad {
  border-color: #fca5a5;
  background: #fef2f2;
}
.lich-month-summary-card.is-red {
  border-color: #e5e7eb;
  background: #f9fafb;
}
.lich-month-summary-num {
  font-size: 32px;
  font-weight: 800;
  line-height: 1;
  margin-bottom: 4px;
}
.lich-month-summary-card.is-good .lich-month-summary-num { color: #16a34a; }
.lich-month-summary-card.is-mid  .lich-month-summary-num { color: #ca8a04; }
.lich-month-summary-card.is-bad  .lich-month-summary-num { color: #dc2626; }
.lich-month-summary-card.is-red  .lich-month-summary-num { color: #4b5563; }
.lich-month-summary-label {
  font-size: 12px;
  color: #6b7280;
  font-weight: 600;
}

/* Hero Year Card */
.lich-year-card {
  position: relative;
  padding: 28px 20px;
  text-align: center;
  background: #f9fafb;
  border: 1px solid #f3f4f6;
  border-radius: 12px;
  margin: 16px 0;
}
.lich-year-big {
  font-family: 'Playfair Display', serif, system-ui;
  font-weight: 900;
  font-size: 76px;
  line-height: 1;
  color: #dc2626;
  display: inline-block;
}
@media (min-width: 576px) {
  .lich-year-big { font-size: 96px; }
}
@media (min-width: 992px) {
  .lich-year-big { font-size: 110px; }
}
.lich-year-canchi {
  font-family: 'Playfair Display', serif, system-ui;
  font-weight: 700;
  font-size: 26px;
  color: #d97706;
  margin-top: 6px;
}
.lich-year-meta {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  max-width: 560px;
  margin: 18px auto 0;
}
@media (min-width: 576px) {
  .lich-year-meta {
    grid-template-columns: repeat(3, 1fr);
  }
}
.lich-year-meta > div {
  background: #fff;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 13px;
  border: 1px solid #e5e7eb;
}
.lich-year-meta dt {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  color: #dc2626;
  margin-bottom: 4px;
}
.lich-year-meta dd {
  margin: 0;
  font-weight: 700;
  color: #1f2937;
}

/* Ngũ Hành Circle */
.lich-nguhanh-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0;
  padding: 16px 12px;
  background: #f9fafb;
  border-radius: 12px;
}
.lich-nguhanh-circle .hanh {
  padding: 8px 16px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
  color: #fff;
  border: 2px solid transparent;
  transition: all .2s;
}
.lich-nguhanh-circle .hanh.is-moc  { background: #2e7d32; color: #fff !important; }
.lich-nguhanh-circle .hanh.is-hoa  { background: #c62828; color: #fff !important; }
.lich-nguhanh-circle .hanh.is-tho  { background: #f9a825; color: #1f2937 !important; }
.lich-nguhanh-circle .hanh.is-kim  { background: #9e9e9e; color: #fff !important; }
.lich-nguhanh-circle .hanh.is-thuy { background: #1565c0; color: #fff !important; }
.lich-nguhanh-circle .hanh.is-active {
  border-color: #d97706;
  box-shadow: 0 0 0 3px rgba(217, 119, 6, .3);
  transform: scale(1.08);
  font-weight: 800;
}
.lich-nguhanh-circle .arrow {
  font-size: 18px;
  color: #9ca3af;
  font-weight: bold;
}

/* Can Chi Table */
.lich-hanh-table {
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0;
  font-size: 14px;
}
.lich-hanh-table th, .lich-hanh-table td {
  border: 1px solid #e5e7eb;
  padding: 10px 14px;
  line-height: 1.6;
}
.lich-hanh-table thead th {
  background: #dc2626;
  color: #fff;
  font-weight: 700;
  text-align: left;
}
.lich-hanh-table tbody th {
  background: #f9fafb;
  font-weight: 700;
  width: 28%;
  text-align: left;
}
.lich-hanh-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  color: #fff;
  background: #6b7280;
  text-transform: uppercase;
  margin-right: 4px;
  white-space: nowrap;
}
.lich-hanh-badge.is-moc  { background: #2e7d32; color: #ffffff !important; }
.lich-hanh-badge.is-hoa  { background: #c62828; color: #ffffff !important; }
.lich-hanh-badge.is-tho  { background: #f9a825; color: #1f2937 !important; }
.lich-hanh-badge.is-kim  { background: #64748b; color: #ffffff !important; }
.lich-hanh-badge.is-thuy { background: #1565c0; color: #ffffff !important; }
.lich-tuongquan {
  font-weight: 700;
  font-size: 13px;
}
.lich-tuongquan.is-binh { color: #d97706; }

/* ============================================================
 * VẬN 9 CARD - Tam Nguyên Cửu Vận (Tối ưu Mobile & Desktop)
 * ============================================================ */
.lich-van-card {
  display: block !important;
  background: linear-gradient(135deg, #fff9f5 0%, #fffbf0 55%, #fef2f2 100%) !important;
  border: 1px solid #fed7aa !important;
  border-radius: 16px !important;
  padding: 16px 14px !important;
  position: relative !important;
  overflow: hidden !important;
  margin: 18px 0 !important;
  box-shadow: 0 4px 14px rgba(234, 88, 12, 0.06) !important;
}
.lich-van-card::before {
  content: '☯';
  position: absolute;
  right: -15px;
  bottom: -25px;
  font-size: 140px;
  line-height: 1;
  opacity: 0.04;
  color: #dc2626;
  pointer-events: none;
}
.lich-van-header {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin-bottom: 12px !important;
}
.lich-van-number {
  flex-shrink: 0 !important;
  width: 50px !important;
  height: 50px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%) !important;
  color: #ffffff !important;
  font-family: 'Playfair Display', Georgia, serif !important;
  font-weight: 900 !important;
  font-size: 26px !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 4px 12px rgba(185, 28, 28, 0.28) !important;
  border: 2px solid #ffffff !important;
}
.lich-van-title {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-weight: 800 !important;
  font-size: 19px !important;
  line-height: 1.25 !important;
  color: #991b1b !important;
  margin: 0 0 3px 0 !important;
}
.lich-van-subtitle {
  font-size: 12px !important;
  color: #64748b !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
}
.lich-van-meta {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
.lich-van-meta > div {
  background: #ffffff !important;
  padding: 10px 4px !important;
  border-radius: 10px !important;
  border: 1px solid #fed7aa !important;
  box-shadow: 0 2px 5px rgba(234, 88, 12, 0.05) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  min-height: 68px !important;
}
.lich-van-meta dt {
  float: none !important;
  width: auto !important;
  clear: none !important;
  display: block !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  color: #b91c1c !important;
  margin: 0 0 4px 0 !important;
  line-height: 1.2 !important;
}
.lich-van-meta dd {
  float: none !important;
  width: auto !important;
  clear: none !important;
  margin: 0 !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  color: #1f2937 !important;
  line-height: 1.25 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}
.lich-van-meta dd .lich-hanh-badge {
  margin: 0 !important;
  padding: 2px 9px !important;
  font-size: 11px !important;
}

@media (min-width: 576px) {
  .lich-van-card {
    padding: 20px 22px !important;
    border-radius: 18px !important;
  }
  .lich-van-header {
    gap: 16px !important;
    margin-bottom: 16px !important;
  }
  .lich-van-number {
    width: 60px !important;
    height: 60px !important;
    font-size: 30px !important;
  }
  .lich-van-title {
    font-size: 22px !important;
  }
  .lich-van-subtitle {
    font-size: 13px !important;
  }
  .lich-van-meta {
    gap: 12px !important;
  }
  .lich-van-meta > div {
    padding: 12px 10px !important;
    min-height: 74px !important;
    border-radius: 12px !important;
  }
  .lich-van-meta dt {
    font-size: 11px !important;
    margin-bottom: 6px !important;
  }
  .lich-van-meta dd {
    font-size: 13.5px !important;
  }
}

/* 12 Months Grid */
.lich-months-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin: 16px 0;
}
@media (min-width: 576px) {
  .lich-months-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (min-width: 768px) {
  .lich-months-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}
.lich-month-tile {
  display: block;
  padding: 14px 10px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  text-decoration: none;
  text-align: center;
  transition: all .15s;
}
.lich-month-tile:hover {
  transform: translateY(-2px);
  border-color: #dc2626;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
  text-decoration: none;
}
.lich-month-tile-num {
  font-family: 'Playfair Display', serif, system-ui;
  font-weight: 900;
  font-size: 26px;
  color: #dc2626;
  line-height: 1;
}
.lich-month-tile-am {
  font-size: 11.5px;
  color: #6b7280;
  margin-top: 4px;
}
.lich-month-tile-stat {
  font-size: 11px;
  color: #16a34a;
  margin-top: 6px;
  font-weight: 700;
}

/* 12 Month Mini-Calendars */
.lich-year-month-block {
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid #e5e7eb;
}
.lich-year-month-h3 {
  margin: 0 0 4px;
  font-size: 16px;
  font-weight: 700;
  color: #1f2937;
}
.lich-year-month-h3 a {
  color: inherit;
  text-decoration: none;
}
.lich-year-month-h3 a:hover {
  color: #dc2626;
  text-decoration: underline;
}
.lich-year-month-sub {
  margin: 0 0 10px;
  font-size: 13.5px;
  color: #6b7280;
}
.lich-year-month-sub a {
  color: #dc2626;
  text-decoration: none;
  font-weight: 600;
}
.lich-year-month-cal {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  min-width: 320px;
}
.lich-year-month-cal th {
  padding: 6px 2px;
  font-size: 12px;
  font-weight: 700;
  color: #6b7280;
  text-transform: uppercase;
  border-bottom: 1px solid #e5e7eb;
  text-align: center;
  background: #f9fafb;
}
.lich-year-month-cal td {
  padding: 4px 2px;
  text-align: center;
  vertical-align: middle;
  border: 1px solid #f3f4f6;
  height: 42px;
  position: relative;
}
.lich-year-month-cal td .d {
  display: block;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.2;
  color: #1f2937;
}
.lich-year-month-cal td .l {
  display: block;
  font-size: 10px;
  color: #6b7280;
  line-height: 1.2;
}
.lich-year-month-cal td .dot {
  position: absolute;
  top: 4px;
  left: calc(50% + 11px);
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: 1.5px solid #d1d5db;
  background: #fff;
}
.lich-year-month-cal td.is-rat-tot .dot     { background: #15803d; border-color: #15803d; }
.lich-year-month-cal td.is-tot .dot         { background: #22c55e; border-color: #22c55e; }
.lich-year-month-cal td.is-binh-thuong .dot { background: #fff; border-color: #d1d5db; }
.lich-year-month-cal td.is-xau .dot         { background: #f97316; border-color: #f97316; }
.lich-year-month-cal td.is-rat-xau .dot     { background: #dc2626; border-color: #dc2626; }
.lich-year-month-cal td.is-other-month      { opacity: .45; background: #fafafa; }
.lich-year-month-cal td.is-other-month .dot { display: none; }
.lich-year-month-cal td.is-lunar-special .l { color: #d97706; font-weight: 700; }

.lich-year-month-cal a.lich-year-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  text-decoration: none;
  color: inherit;
  border-radius: 4px;
}
.lich-year-month-cal a.lich-year-cell:hover {
  background: rgba(0, 0, 0, 0.04);
}

.lich-year-cal-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  align-items: center;
  margin: 12px 0 2px;
  padding-top: 10px;
  border-top: 1px solid #f3f4f6;
  font-size: 11.5px;
  color: #6b7280;
}
.lich-year-cal-legend .dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  display: inline-block;
  vertical-align: middle;
  margin-right: 4px;
  border: 1.5px solid #d1d5db;
}
.lich-year-cal-legend .dot.is-rat-tot     { background: #15803d; border-color: #15803d; }
.lich-year-cal-legend .dot.is-tot         { background: #22c55e; border-color: #22c55e; }
.lich-year-cal-legend .dot.is-binh-thuong { background: #fff; border-color: #d1d5db; }
.lich-year-cal-legend .dot.is-xau         { background: #f97316; border-color: #f97316; }
.lich-year-cal-legend .dot.is-rat-xau     { background: #dc2626; border-color: #dc2626; }

/* Tables (Holidays & Directions) */
.lich-year-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
  margin: 10px 0;
}
.lich-year-table th, .lich-year-table td {
  padding: 8px 12px;
  border-bottom: 1px solid #f3f4f6;
  text-align: left;
}
.lich-year-table thead th {
  font-size: 12px;
  text-transform: uppercase;
  color: #6b7280;
  background: #f9fafb;
  font-weight: 700;
}
.lich-year-table tbody th {
  font-weight: 600;
  color: #1f2937;
}
.lich-le-group-h {
  margin: 14px 0 6px;
  font-size: 14px;
  font-weight: 700;
  color: #dc2626;
  text-transform: uppercase;
}

/* Phi Tinh 3x3 Grid */
.lich-phi-tinh-wrap {
  max-width: 460px;
  margin: 16px auto;
}
.lich-phi-tinh-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  background: #f9fafb;
  padding: 10px;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
}
.lich-phi-tinh-cell {
  padding: 10px 6px;
  border-radius: 8px;
  border: 1.5px solid transparent;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2px;
  text-align: center;
  background: #fff;
}
.lich-phi-tinh-cell.is-good { background: #f0fdf4; border-color: #bbf7d0; }
.lich-phi-tinh-cell.is-dai-cat { background: #dcfce7; border-color: #4ade80; }
.lich-phi-tinh-cell.is-hung { background: #faf5ff; border-color: #e9d5ff; }
.lich-phi-tinh-cell.is-dai-hung { background: linear-gradient(135deg, #fef2f2, #fee2e2); border-color: #dc2626; }
.lich-phi-tinh-cell.is-trung { background: linear-gradient(135deg, #fef9c3, #fde68a); border-color: #d97706; }

.lich-phi-tinh-direction {
  font-size: 10px;
  color: #6b7280;
  font-weight: 700;
  text-transform: uppercase;
}
.lich-phi-tinh-num {
  font-family: 'Playfair Display', serif, system-ui;
  font-weight: 900;
  font-size: 24px;
  line-height: 1.1;
}
.lich-phi-tinh-cell.is-good .lich-phi-tinh-num { color: #16a34a; }
.lich-phi-tinh-cell.is-dai-cat .lich-phi-tinh-num { color: #15803d; }
.lich-phi-tinh-cell.is-hung .lich-phi-tinh-num { color: #9333ea; }
.lich-phi-tinh-cell.is-dai-hung .lich-phi-tinh-num { color: #dc2626; }
.lich-phi-tinh-cell.is-trung .lich-phi-tinh-num { color: #d97706; }

.lich-phi-tinh-name {
  font-size: 10.5px;
  font-weight: 700;
  color: #1f2937;
}
.lich-phi-tinh-tag {
  font-size: 9px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  text-transform: uppercase;
  color: #fff;
  margin-top: 2px;
}
.lich-phi-tinh-cell.is-good .lich-phi-tinh-tag { background: #16a34a; }
.lich-phi-tinh-cell.is-dai-cat .lich-phi-tinh-tag { background: #15803d; }
.lich-phi-tinh-cell.is-hung .lich-phi-tinh-tag { background: #9333ea; }
.lich-phi-tinh-cell.is-dai-hung .lich-phi-tinh-tag { background: #dc2626; }
.lich-phi-tinh-cell.is-trung .lich-phi-tinh-tag { background: #d97706; }

.lich-phi-tinh-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  font-size: 11.5px;
  margin: 12px 0 16px;
  color: #4b5563;
  justify-content: center;
  background: #f8fafc;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid #f1f5f9;
}
.lich-phi-tinh-legend span {
  display: inline-flex;
  align-items: center;
  font-weight: 500;
}
.lich-phi-tinh-legend .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 5px;
}
.lich-phi-tinh-legend .dot.is-good { background: #16a34a; }
.lich-phi-tinh-legend .dot.is-bad  { background: #9333ea; }
.lich-phi-tinh-legend .dot.is-red  { background: #dc2626; }
.lich-phi-tinh-legend .dot.is-gold { background: #d97706; }

.lich-phi-tinh-tag-inline {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  color: #fff !important;
  white-space: nowrap;
}
.lich-phi-tinh-tag-inline.is-good     { background: #16a34a; }
.lich-phi-tinh-tag-inline.is-dai-cat  { background: #15803d; }
.lich-phi-tinh-tag-inline.is-hung     { background: #9333ea; }
.lich-phi-tinh-tag-inline.is-dai-hung { background: #dc2626; }
.lich-phi-tinh-tag-inline.is-trung    { background: #d97706; }

/* Bảng Hướng Phi Tinh (Nên / Tránh) - Tối ưu Desktop & Mobile */
.lich-huong-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}
.lich-huong-table th, .lich-huong-table td {
  padding: 10px 12px;
  border-bottom: 1px solid #f1f5f9;
  text-align: left;
  vertical-align: top;
}
.lich-huong-table thead th {
  background: #f8fafc;
  color: #64748b;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 10px 12px;
}
.lich-huong-table .col-huong {
  font-weight: 700;
  color: #1e293b;
  white-space: nowrap;
}
.lich-huong-table .col-sao {
  font-weight: 600;
  color: #334155;
  white-space: nowrap;
}
.lich-huong-table .col-nen {
  color: #15803d;
  line-height: 1.5;
}
.lich-huong-table .col-tranh {
  color: #b91c1c;
  line-height: 1.5;
}

/* Giao diện Thẻ Thông Minh trên Mobile (< 768px) */
@media (max-width: 768px) {
  .lich-huong-wrap {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    overflow-x: visible !important;
    margin: 12px 0 16px !important;
  }
  .lich-huong-table,
  .lich-huong-table tbody,
  .lich-huong-table tr {
    display: block !important;
    width: 100% !important;
  }
  .lich-huong-table thead {
    display: none !important;
  }
  .lich-huong-table tr {
    background: #ffffff !important;
    border: 1px solid #fed7aa !important;
    border-radius: 14px !important;
    padding: 14px !important;
    margin-bottom: 12px !important;
    box-shadow: 0 2px 8px rgba(217, 119, 6, 0.05) !important;
    border-left: 4px solid #ea580c !important;
  }
  .lich-huong-table tr:has(.is-dai-hung) {
    border-left-color: #dc2626 !important;
    background: #fffafa !important;
  }
  .lich-huong-table tr:has(.is-good),
  .lich-huong-table tr:has(.is-dai-cat) {
    border-left-color: #16a34a !important;
  }
  .lich-huong-table tr:has(.is-trung) {
    border-left-color: #d97706 !important;
  }
  .lich-huong-table tr:has(.is-hung) {
    border-left-color: #9333ea !important;
  }
  .lich-huong-table .col-huong {
    display: block !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    color: #991b1b !important;
    padding: 0 0 6px 0 !important;
    border: none !important;
    text-transform: uppercase !important;
    letter-spacing: 0.03em !important;
  }
  .lich-huong-table .col-sao {
    display: inline-block !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    color: #475569 !important;
    background: #f1f5f9 !important;
    padding: 3px 10px !important;
    border-radius: 6px !important;
    border: none !important;
    margin: 0 6px 10px 0 !important;
    white-space: normal !important;
  }
  .lich-huong-table .col-tag {
    display: inline-block !important;
    padding: 0 !important;
    border: none !important;
    margin-bottom: 10px !important;
  }
  .lich-huong-table .col-nen {
    display: block !important;
    background: #f0fdf4 !important;
    border: 1px solid #bbf7d0 !important;
    border-radius: 8px !important;
    padding: 9px 12px 9px 34px !important;
    font-size: 13px !important;
    line-height: 1.55 !important;
    color: #166534 !important;
    margin-bottom: 8px !important;
    position: relative !important;
  }
  .lich-huong-table .col-nen::before {
    content: '✓';
    position: absolute;
    left: 12px;
    top: 9px;
    font-weight: 900;
    color: #16a34a;
    font-size: 15px;
    line-height: 1;
  }
  .lich-huong-table .col-tranh {
    display: block !important;
    background: #fef2f2 !important;
    border: 1px solid #fecaca !important;
    border-radius: 8px !important;
    padding: 9px 12px 9px 34px !important;
    font-size: 13px !important;
    line-height: 1.55 !important;
    color: #991b1b !important;
    position: relative !important;
    border-bottom: 1px solid #fecaca !important;
  }
  .lich-huong-table .col-tranh::before {
    content: '✕';
    position: absolute;
    left: 12px;
    top: 9px;
    font-weight: 900;
    color: #dc2626;
    font-size: 14px;
    line-height: 1;
  }
}

/* Interactive Planner Card */
.lich-planner-card {
  background: linear-gradient(135deg, #dc2626, #991b1b);
  color: #ffffff !important;
  padding: 24px 22px;
  border-radius: 14px;
  margin: 16px 0;
}
.lich-planner-card p,
.lich-planner-card .lich-body-label {
  color: #ffffff !important;
}
.lich-planner-sub {
  font-size: 13px;
  color: rgba(255, 255, 255, .92) !important;
  margin-bottom: 14px;
}
.lich-planner-form {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.lich-planner-input {
  flex: 1;
  min-width: 160px;
  padding: 10px 14px;
  border: 0;
  border-radius: 8px;
  font-size: 14px;
}
.lich-planner-select {
  padding: 10px 14px;
  border: 0;
  border-radius: 8px;
  font-size: 14px;
  background: #fff;
  cursor: pointer;
}
.lich-planner-btn {
  background: #d97706;
  color: #fff;
  padding: 10px 20px;
  border: 0;
  border-radius: 8px;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  text-transform: uppercase;
  transition: background .15s;
}
.lich-planner-btn:hover {
  background: #b45309;
}
.lich-planner-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.lich-planner-presets button {
  background: rgba(255, 255, 255, .15);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .3);
  padding: 4px 12px;
  font-size: 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: background .15s;
}
.lich-planner-presets button:hover {
  background: rgba(255, 255, 255, .25);
}

/* History Timeline */
.lich-history-timeline {
  list-style: none;
  padding: 0 0 0 24px;
  margin: 16px 0;
  position: relative;
}
.lich-history-timeline::before {
  content: '';
  position: absolute;
  left: 6px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: linear-gradient(180deg, #dc2626, #d97706);
}
.lich-history-item {
  position: relative;
  padding: 8px 0 14px;
}
.lich-history-item::before {
  content: '';
  position: absolute;
  left: -24px;
  top: 12px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid #dc2626;
  box-shadow: 0 0 0 2px #fff;
}
.lich-history-date {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  font-weight: 700;
  color: #dc2626;
  font-size: 13px;
  margin-bottom: 4px;
}
.lich-history-date .year {
  font-family: 'Playfair Display', serif, system-ui;
  font-size: 17px;
}
.lich-history-am {
  background: #d97706;
  color: #fff;
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: 700;
}
.lich-history-event {
  font-size: 14px;
  line-height: 1.6;
  color: #374151;
  margin: 0;
}



.lich-disclaimer {
  margin: 14px 0 0;
  padding: 10px 14px;
  border-left: 3px solid #d1d5db;
  background: #f9fafb;
  border-radius: 0 6px 6px 0;
  font-size: 13px;
  line-height: 1.6;
  color: #6b7280;
}

/* Sidebar Styling */
.lich-side .lich-side-h {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #dc2626;
  font-weight: 700;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.lich-warning-card {
  background: linear-gradient(135deg, #dc2626, #991b1b);
  color: #ffffff !important;
  padding: 18px;
  border-radius: 14px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(185, 28, 28, 0.25);
}
.lich-warning-card .lich-side-h {
  color: #ffffff !important;
  margin-bottom: 8px;
}
.lich-warning-card p {
  color: #ffffff !important;
  font-size: 13px;
  line-height: 1.55;
  opacity: .95;
  margin-bottom: 10px;
}
.lich-warning-card strong {
  color: #fef08a !important;
  font-weight: 700;
}
.lich-warning-card .lich-pill {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  background: rgba(255, 255, 255, .25) !important;
  color: #ffffff !important;
  padding: 5px 12px !important;
  border-radius: 6px !important;
  letter-spacing: .06em !important;
  border: 1px solid rgba(255, 255, 255, 0.4) !important;
}
.lich-quick-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.lich-quick-nav a {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 10px 6px;
  text-decoration: none;
  color: #1f2937;
  transition: all .15s;
}
.lich-quick-nav a:hover {
  background: #fef2f2;
  border-color: #fca5a5;
  color: #dc2626;
  text-decoration: none;
}
.lich-quick-nav small {
  font-size: 10.5px;
  color: #9ca3af;
  text-transform: uppercase;
  margin-bottom: 2px;
}
.lich-quick-nav b {
  font-size: 14px;
  font-weight: 700;
}
.lich-input-row {
  display: flex;
  gap: 6px;
  margin-bottom: 10px;
}
.lich-input-row input {
  flex: 1;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 13px;
  text-align: center;
}
.lich-btn {
  width: 100%;
  background: #dc2626;
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  padding: 10px;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: .04em;
  transition: background .15s;
}
.lich-btn:hover {
  background: #b91c1c;
}

/* ========================================================
 * TỐI ƯU CÁCH LỀ THẤP NHẤT TRÊN MOBILE CHO TẤT CẢ CÁC TRANG
 * ======================================================== */
@media (max-width: 768px) {
  :root {
    --site-gutter: 6px !important;
  }

  /* 1. Reset lề container ngoài cùng trên mọi trang */
  html, body {
    overflow-x: hidden !important;
  }

  #main, #content, .page-wrapper {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  #content .container,
  .container,
  .page-wrapper .container,
  .col.content-area,
  .content-area,
  .entry-content,
  .post-content,
  .row {
    padding-left: 6px !important;
    padding-right: 6px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .page-wrap,
  .content-wrap,
  .lich-wrap {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .lich-wrap-pad {
    padding-top: 10px !important;
    padding-bottom: 20px !important;
  }

  /* 2. Thẻ card chính (Lịch ngày, Lịch tháng, Lịch năm, Bài viết) */
  .lich-card,
  .daily-page,
  .panel,
  .tt-article {
    border-radius: 12px !important;
    margin-bottom: 12px !important;
    box-sizing: border-box !important;
  }

  .daily-page,
  .panel {
    padding: 12px 8px !important;
  }

  .lich-card-pad {
    padding: 10px 8px !important;
  }

  .lich-astro-hero {
    padding: 12px 8px !important;
  }

  .lich-pattern-bar {
    padding: 10px 10px !important;
  }

  .lich-pattern-bar .lich-bar-title {
    font-size: 15px !important;
  }

  /* 3. Thẻ bảng Hướng Phi Tinh (.lich-huong-table) */
  .lich-huong-wrap {
    margin: 8px 0 12px !important;
  }
  .lich-huong-table tr {
    padding: 10px 8px !important;
    margin-bottom: 8px !important;
    border-radius: 10px !important;
  }
  .lich-huong-table .col-nen,
  .lich-huong-table .col-tranh {
    padding: 7px 8px 7px 26px !important;
    margin-bottom: 6px !important;
    font-size: 13px !important;
    border-radius: 6px !important;
  }
  .lich-huong-table .col-nen::before {
    left: 8px !important;
    top: 7px !important;
  }
  .lich-huong-table .col-tranh::before {
    left: 8px !important;
    top: 7px !important;
  }

  /* 4. Thẻ Vận 9 */
  .lich-van-card {
    padding: 12px 8px !important;
    border-radius: 12px !important;
    margin: 12px 0 !important;
  }
  .lich-van-meta {
    gap: 6px !important;
  }
  .lich-van-meta > div {
    padding: 8px 2px !important;
    border-radius: 8px !important;
    min-height: 64px !important;
  }

  /* 5. Lưới 12 tháng trên trang năm */
  .lich-months-grid {
    gap: 8px !important;
    margin: 10px 0 !important;
  }
  .lich-year-month-card {
    padding: 8px 6px !important;
    border-radius: 10px !important;
  }
  .lich-year-month-cal th,
  .lich-year-month-cal td {
    padding: 3px 0 !important;
    font-size: 12px !important;
  }

  /* 6. Grid 3x3 Phi Tinh */
  .lich-phi-tinh-grid {
    padding: 6px !important;
    gap: 4px !important;
  }
  .lich-phi-tinh-cell {
    padding: 6px 3px !important;
  }

  /* 7. Khối đánh giá điểm & 4 trụ trên Lịch ngày */
  .lich-score-card {
    padding: 10px 10px !important;
  }
  .lich-4tru-grid {
    gap: 6px !important;
  }
  .tuoi-box {
    padding: 8px 6px !important;
  }
  .lich-task-row {
    padding: 8px 6px !important;
  }
  .lich-task-main {
    gap: 6px !important;
  }

  /* 8. Hero Banner */
  .page-hero,
  .inner-hero,
  .calendar-hero {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
}

@media (max-width: 480px) {
  :root {
    --site-gutter: 4px !important;
  }
  #content .container,
  .container,
  .page-wrapper .container,
  .col.content-area,
  .content-area,
  .entry-content,
  .post-content,
  .row {
    padding-left: 4px !important;
    padding-right: 4px !important;
  }
  .lich-card-pad,
  .daily-page,
  .panel {
    padding: 10px 6px !important;
  }
  .lich-huong-table tr {
    padding: 8px 6px !important;
  }
}

/* ==========================================================================
   TRANG NỘI DUNG ĐƠN GIẢN (GIỚI THIỆU, HỎI ĐÁP, LIÊN HỆ, BẢO MẬT...)
   ========================================================================== */
.lich-simple-page-container {
  width: 100%;
}
.lich-simple-content {
  background: #ffffff;
  border: 1px solid #ebdcd0;
  border-radius: 14px;
  padding: 32px 36px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
  color: #334155;
  font-size: 16px;
  line-height: 1.75;
}
.lich-simple-content h2 {
  font-size: 24px;
  font-weight: 700;
  color: #1e293b;
  margin: 0 0 16px;
  padding-bottom: 10px;
  border-bottom: 2px solid #f1e6dc;
  line-height: 1.35;
}
.lich-simple-content h2:not(:first-child) {
  margin-top: 32px;
}
.lich-simple-content h3 {
  font-size: 19px;
  font-weight: 700;
  color: #991b1b;
  margin: 24px 0 10px;
  line-height: 1.4;
}
.lich-simple-content p {
  margin: 0 0 16px;
  color: #475569;
}
.lich-simple-content ul,
.lich-simple-content ol {
  margin: 0 0 18px 24px;
  padding: 0;
  color: #475569;
}
.lich-simple-content li {
  margin-bottom: 8px;
  line-height: 1.7;
}
.lich-simple-content blockquote {
  border-left: 4px solid #b91c1c;
  background: #fff8f5;
  padding: 14px 20px;
  margin: 20px 0;
  border-radius: 0 8px 8px 0;
  color: #475569;
  font-style: italic;
}
.lich-simple-content a {
  color: #b91c1c;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.15s;
}
.lich-simple-content a:hover {
  color: #991b1b;
}

/* Thống kê đơn giản (trang giới thiệu) */
.lich-simple-content .about-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 24px 0;
}
.lich-simple-content .about-stats > div {
  background: #fdfbf9;
  border: 1px solid #f0e4d9;
  border-radius: 10px;
  padding: 18px 12px;
  text-align: center;
}
.lich-simple-content .about-stats strong {
  display: block;
  font-size: 26px;
  font-weight: 800;
  color: #b91c1c;
  margin-bottom: 4px;
}
.lich-simple-content .about-stats span {
  font-size: 13.5px;
  color: #64748b;
}

/* FAQ Details/Accordion (trang hỏi đáp) */
.lich-simple-content details {
  background: #fdfbf9;
  border: 1px solid #ebdcd0;
  border-radius: 10px;
  margin-bottom: 12px;
  overflow: hidden;
  transition: border-color 0.2s, background 0.2s;
}
.lich-simple-content details[open] {
  background: #ffffff;
  border-color: #fca5a5;
  box-shadow: 0 2px 8px rgba(185, 28, 28, 0.06);
}
.lich-simple-content summary {
  padding: 14px 18px;
  font-size: 16px;
  font-weight: 700;
  color: #1e293b;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  user-select: none;
}
.lich-simple-content summary::-webkit-details-marker {
  display: none;
}
.lich-simple-content summary::after {
  content: "▾";
  font-size: 16px;
  color: #b91c1c;
  transition: transform 0.2s;
  margin-left: 10px;
}
.lich-simple-content details[open] summary::after {
  transform: rotate(180deg);
}
.lich-simple-content details p {
  padding: 0 18px 16px;
  margin: 0;
  color: #475569;
  font-size: 15px;
  line-height: 1.7;
}

/* ==========================================================================
   THÔNG TIN LIÊN HỆ & FORM GÓP Ý
   ========================================================================== */
.contact-header-intro {
  margin-bottom: 24px;
}
.contact-subtext {
  font-size: 15.5px;
  line-height: 1.65;
  color: #475569;
  margin-top: 8px;
}

/* Thẻ nổi bật Đơn vị quản lý */
.company-highlight-card {
  background: linear-gradient(135deg, #fffaf6 0%, #ffffff 100%);
  border: 1.5px solid #ebdcd0;
  border-left: 5px solid #b91c1c;
  border-radius: 12px;
  padding: 22px 26px;
  margin: 20px 0 28px;
  box-shadow: 0 3px 12px rgba(185, 28, 28, 0.04);
}
.company-badge-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.company-badge {
  display: inline-block;
  background: #b91c1c;
  color: #ffffff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.8px;
  padding: 3px 10px;
  border-radius: 20px;
  text-transform: uppercase;
}
.company-tax-badge {
  display: inline-block;
  background: #f1f5f9;
  color: #0f172a;
  font-size: 12.5px;
  font-weight: 700;
  padding: 3px 12px;
  border-radius: 20px;
  border: 1px solid #cbd5e1;
}
.company-name {
  font-size: 22px !important;
  font-weight: 800 !important;
  color: #1e293b !important;
  margin: 6px 0 10px !important;
  line-height: 1.3 !important;
}
.company-address {
  font-size: 15px;
  line-height: 1.6;
  color: #334155;
  margin: 0;
}

/* Lưới các thẻ thông tin liên hệ */
.contact-cards-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin: 24px 0 32px;
}
.contact-card {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 20px 22px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.02);
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}
.contact-card:hover {
  transform: translateY(-2px);
  border-color: #fca5a5;
  box-shadow: 0 6px 18px rgba(185, 28, 28, 0.06);
}
.contact-card-icon {
  width: 46px;
  height: 46px;
  border-radius: 10px;
  background: #fff5f5;
  border: 1px solid #fed7d7;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}
.contact-card-info h4 {
  font-size: 14px;
  font-weight: 700;
  color: #64748b;
  margin: 0 0 4px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.contact-card-info .contact-link {
  font-size: 17px;
  font-weight: 700;
  color: #b91c1c;
  text-decoration: none;
  display: inline-block;
  transition: color 0.15s;
}
.contact-card-info .contact-link:hover {
  color: #991b1b;
  text-decoration: underline;
}
.contact-card-info .contact-text {
  font-size: 16px;
  font-weight: 700;
  color: #1e293b;
  display: inline-block;
}
.contact-card-info p {
  font-size: 13.5px;
  color: #64748b;
  margin: 4px 0 0 !important;
  line-height: 1.4;
}

/* Phần Form gửi góp ý trực tuyến */
.contact-form-section {
  background: #fdfbf9;
  border: 1px solid #ebdcd0;
  border-radius: 14px;
  padding: 28px 32px;
  margin-top: 32px;
}
.contact-form-section h3 {
  font-size: 21px !important;
  font-weight: 700 !important;
  color: #1e293b !important;
  margin: 0 0 8px !important;
}
.contact-form-section > p {
  font-size: 15px;
  color: #475569;
  margin-bottom: 22px;
  line-height: 1.6;
}
.clean-contact-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.clean-contact-form .form-row-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.clean-contact-form .form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.clean-contact-form label {
  font-size: 14px;
  font-weight: 700;
  color: #334155;
}
.clean-contact-form label .req {
  color: #b91c1c;
}
.clean-contact-form input,
.clean-contact-form select,
.clean-contact-form textarea {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  padding: 11px 14px !important;
  font-size: 14.5px !important;
  color: #1e293b !important;
  background-color: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 8px !important;
  margin: 0 !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03) !important;
  transition: border-color 0.15s, box-shadow 0.15s !important;
}
.clean-contact-form input {
  height: 44px !important;
}
.clean-contact-form select {
  height: 44px !important;
  line-height: 1.4 !important;
  cursor: pointer;
}
.clean-contact-form textarea {
  min-height: 120px !important;
  resize: vertical !important;
}
.clean-contact-form input:focus,
.clean-contact-form select:focus,
.clean-contact-form textarea:focus {
  border-color: #b91c1c !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(185, 28, 28, 0.12) !important;
}
.clean-contact-form .form-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 8px;
}
.contact-submit-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: linear-gradient(135deg, #b91c1c 0%, #991b1b 100%) !important;
  color: #ffffff !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  padding: 13px 28px !important;
  border: none !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  box-shadow: 0 3px 8px rgba(185, 28, 28, 0.25) !important;
  transition: transform 0.15s, box-shadow 0.15s, background 0.15s !important;
}
.contact-submit-btn:hover {
  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 14px rgba(185, 28, 28, 0.35) !important;
}
.contact-submit-btn:active {
  transform: translateY(0) !important;
}
.contact-submit-btn .btn-arrow {
  font-size: 16px;
  transition: transform 0.15s;
}
.contact-submit-btn:hover .btn-arrow {
  transform: translateX(3px);
}
.form-status {
  font-size: 14px;
  color: #15803d;
  font-weight: 600;
}

@media (max-width: 768px) {
  .contact-cards-grid {
    grid-template-columns: 1fr;
  }
  .clean-contact-form .form-row-grid {
    grid-template-columns: 1fr;
  }
  .contact-form-section {
    padding: 20px 18px;
  }
}

@media (max-width: 640px) {
  .lich-simple-content {
    padding: 20px 18px;
  }
  .lich-simple-content .about-stats {
    grid-template-columns: 1fr;
    gap: 10px;
  }
}

/* ==========================================================================
   Tối ưu độ rộng Hero Panels trang chủ:
   - Mở rộng container lên 1280px để 2 bên thông thoáng, không bị ép hẹp.
   - Bố cục 3 cột: 1fr auto 1fr (tờ lịch ở giữa vừa vặn, 2 bên mở rộng tối đa).
   - Tự động co giãn theo nội dung nhãn, chống rớt dòng tuyệt đối (white-space: nowrap).
   ========================================================================== */
@media (min-width: 901px) {
  .hero-panels {
    max-width: 1280px !important;
    width: 100% !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
    gap: 24px !important;
    align-items: stretch !important;
  }
  .hero-panels .today-info,
  .hero-panels .quick-info {
    width: 100% !important;
    min-width: 0 !important;
  }
  .hero-panels .bloc-area {
    width: auto !important;
    max-width: 350px !important;
    flex-shrink: 0 !important;
  }
}

.hero-panels .info-row,
.today-info .info-row,
.quick-info .info-row {
  display: grid !important;
  grid-template-columns: 178px 1fr !important;
  gap: 0 !important;
  border: 1px solid #f0efed !important;
  border-radius: 9px !important;
  overflow: hidden !important;
  align-items: stretch !important;
  min-height: 38px !important;
  margin-top: 4px !important;
}

.hero-panels .row-label {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 4px 8px !important;
  white-space: nowrap !important;
  width: 100% !important;
  box-sizing: border-box !important;
  background: #fdf6eb !important;
  border-radius: 0 !important;
  border-right: 1px solid #f4ece2 !important;
  flex-shrink: 0 !important;
}

.hero-panels .row-label b {
  font-size: 13px !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
  letter-spacing: -0.2px !important;
  word-break: keep-all !important;
  color: #1e293b !important;
}

.hero-panels .mini-icon {
  width: 23px !important;
  height: 23px !important;
  flex-shrink: 0 !important;
}

.hero-panels .row-value {
  display: flex !important;
  align-items: center !important;
  padding: 5px 10px !important;
  font-size: 13.5px !important;
  line-height: 1.35 !important;
  background: #ffffff !important;
}

/* ==========================================================================
   Tối ưu hiển thị full width trên mobile & tablet cho Ngày lễ sắp tới
   ========================================================================== */
@media (max-width: 800px) {
  .right-column {
    grid-column: 1 / -1 !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 12px !important;
  }
  .right-column .promo-banner,
  .right-column .upcoming,
  .panel.upcoming {
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
    box-sizing: border-box !important;
  }
  .upcoming-item {
    width: 100% !important;
    box-sizing: border-box !important;
  }
}